Merge branch 'main' into 20210818-Glossary/Type

2715 files changed, 175209 insertions, 187933 deletions

diff --git a/PEERS_GUIDELINES.md b/PEERS_GUIDELINES.md
index 4c338f2905..83c4777329 100644
--- a/PEERS_GUIDELINES.md
+++ b/PEERS_GUIDELINES.md
@@ -39,11 +39,9 @@ The review teams for each locale are:
 - French (`fr`) content — the
 [@yari-content-fr](https://github.com/orgs/mdn/teams/yari-content-fr)
   team, which consists of:
-  - [@nicolas-goudry](https://github.com/nicolas-goudry)
-  - [@JNa0](https://github.com/JNa0)
   - [@tristantheb](https://github.com/tristantheb)
-  - [@LEMIBANDDEXARI](https://github.com/LEMIBANDDEXARI)
   - [@SphinxKnight](https://github.com/SphinxKnight)
+  - [@audrasjb](https://github.com/audrasjb)
 - Japanese (`ja`) content — the
 [@yari-content-ja](https://github.com/orgs/mdn/teams/yari-content-ja)
   team, which consists of:
diff --git a/files/de/_redirects.txt b/files/de/_redirects.txt
index 1fb9242dfc..30ab6fb6ff 100644
--- a/files/de/_redirects.txt
+++ b/files/de/_redirects.txt
@@ -214,7 +214,7 @@
 /de/docs/DOM/window	/de/docs/Web/API/Window
 /de/docs/DOM/window.dump	/de/docs/Web/API/Window/dump
 /de/docs/DOM/window.openDialog	/de/docs/Web/API/Window/openDialog
-/de/docs/DOM/window.setTimeout	/de/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout
+/de/docs/DOM/window.setTimeout	/de/docs/Web/API/setTimeout
 /de/docs/DragDrop	/de/docs/Web/API/HTML_Drag_and_Drop_API
 /de/docs/Erweiterungen_für_Firefox_3_aktualisieren	/de/docs/Mozilla/Firefox/Releases/3/Updating_extensions
 /de/docs/Farbverläufe_in_CSS	/de/docs/Web/CSS/CSS_Images/Using_CSS_gradients
@@ -447,10 +447,12 @@
 /de/docs/Web/API/WebGL_API/Tutorial/Objekte_mit_WebGL_animieren	/de/docs/Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL
 /de/docs/Web/API/WebGL_API/Tutorial/Texturen_in_WebGL_verwenden	/de/docs/Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL
 /de/docs/Web/API/Window.alert	/de/docs/Web/API/Window/alert
-/de/docs/Web/API/Window/setTimeout	/de/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout
+/de/docs/Web/API/Window/setTimeout	/de/docs/Web/API/setTimeout
 /de/docs/Web/API/WindowBase64	/de/docs/Web/API/WindowOrWorkerGlobalScope
-/de/docs/Web/API/WindowBase64/btoa	/de/docs/Web/API/WindowOrWorkerGlobalScope/btoa
-/de/docs/Web/API/WindowTimers/setTimeout	/de/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout
+/de/docs/Web/API/WindowBase64/btoa	/de/docs/Web/API/btoa
+/de/docs/Web/API/WindowOrWorkerGlobalScope/btoa	/de/docs/Web/API/btoa
+/de/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout	/de/docs/Web/API/setTimeout
+/de/docs/Web/API/WindowTimers/setTimeout	/de/docs/Web/API/setTimeout
 /de/docs/Web/API/document.documentElement	/de/docs/Web/API/Document/documentElement
 /de/docs/Web/Barrierefreiheit	/de/docs/Web/Accessibility
 /de/docs/Web/Barrierefreiheit/ARIA	/de/docs/Web/Accessibility/ARIA
@@ -486,10 +488,13 @@
 /de/docs/Web/CSS/Boxmodell	/de/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model
 /de/docs/Web/CSS/CSS_Animations/CSS_Animationen_nutzen	/de/docs/Web/CSS/CSS_Animations/Using_CSS_animations
 /de/docs/Web/CSS/CSS_Background_and_Borders	/de/docs/Web/CSS/CSS_Backgrounds_and_Borders
+/de/docs/Web/CSS/CSS_Background_and_Borders/Border-image_generator	/de/docs/Web/CSS/CSS_Backgrounds_and_Borders/Border-image_generator
+/de/docs/Web/CSS/CSS_Background_and_Borders/Border-radius_generator	/de/docs/Web/CSS/CSS_Backgrounds_and_Borders/Border-radius_generator
+/de/docs/Web/CSS/CSS_Background_and_Borders/Box-shadow_generator	/de/docs/Web/CSS/CSS_Backgrounds_and_Borders/Box-shadow_generator
 /de/docs/Web/CSS/CSS_Background_and_Borders/Mehrere_Hintergründe_in_CSS_verwenden	/de/docs/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds
-/de/docs/Web/CSS/CSS_Box_Model/Box-shadow_generator	/de/docs/Web/CSS/CSS_Background_and_Borders/Box-shadow_generator
+/de/docs/Web/CSS/CSS_Box_Model/Box-shadow_generator	/de/docs/Web/CSS/CSS_Backgrounds_and_Borders/Box-shadow_generator
 /de/docs/Web/CSS/CSS_Boxmodell	/de/docs/Web/CSS/CSS_Box_Model
-/de/docs/Web/CSS/CSS_Boxmodell/Box-shadow_generator	/de/docs/Web/CSS/CSS_Background_and_Borders/Box-shadow_generator
+/de/docs/Web/CSS/CSS_Boxmodell/Box-shadow_generator	/de/docs/Web/CSS/CSS_Backgrounds_and_Borders/Box-shadow_generator
 /de/docs/Web/CSS/CSS_Boxmodell/Einführung_in_das_CSS_Boxmodell	/de/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model
 /de/docs/Web/CSS/CSS_Boxmodell/Zusammenfallen_von_Außenabständen_meistern	/de/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing
 /de/docs/Web/CSS/CSS_Colors	/de/docs/Web/CSS/CSS_Color
@@ -526,6 +531,7 @@
 /de/docs/Web/CSS/Pseudoklasse	/de/docs/Web/CSS/Pseudo-classes
 /de/docs/Web/CSS/Referenz	/de/docs/Web/CSS/Reference
 /de/docs/Web/CSS/Spezifität	/de/docs/Web/CSS/Specificity
+/de/docs/Web/CSS/Tools	/de/docs/conflicting/Web/CSS
 /de/docs/Web/CSS/Vererbung	/de/docs/Web/CSS/inheritance
 /de/docs/Web/CSS/Wertdefinitionssyntax	/de/docs/Web/CSS/Value_definition_syntax
 /de/docs/Web/CSS/attr	/de/docs/Web/CSS/attr()
@@ -538,6 +544,7 @@
 /de/docs/Web/CSS/url	/de/docs/Web/CSS/url()
 /de/docs/Web/CSS/visible	/de/docs/Web/CSS/visibility
 /de/docs/Web/CSS/word-wrap	/de/docs/Web/CSS/overflow-wrap
+/de/docs/Web/Demos_of_open_web_technologies	/de/docs/Web/Demos
 /de/docs/Web/Events/DOMContentLoaded	/de/docs/Web/API/Window/DOMContentLoaded_event
 /de/docs/Web/Events/change	/de/docs/Web/API/HTMLElement/change_event
 /de/docs/Web/Events/fullscreenchange	/de/docs/Web/API/Document/fullscreenchange_event
diff --git a/files/de/_wikihistory.json b/files/de/_wikihistory.json
index 30c3dc9b00..a402e431bf 100644
--- a/files/de/_wikihistory.json
+++ b/files/de/_wikihistory.json
@@ -763,12 +763,6 @@
       "Klingohle"
     ]
   },
-  "Glossary/Robots.txt": {
-    "modified": "2020-10-15T22:23:51.763Z",
-    "contributors": [
-      "LoVo666"
-    ]
-  },
   "Glossary/SQL": {
     "modified": "2019-03-18T21:39:17.726Z",
     "contributors": [
@@ -4200,22 +4194,6 @@
       "teoli"
     ]
   },
-  "Web/API/WindowOrWorkerGlobalScope/btoa": {
-    "modified": "2019-03-23T22:50:32.544Z",
-    "contributors": [
-      "cami"
-    ]
-  },
-  "Web/API/WindowOrWorkerGlobalScope/setTimeout": {
-    "modified": "2019-03-23T23:36:28.621Z",
-    "contributors": [
-      "mdnde",
-      "Eschon",
-      "fscholz",
-      "c0ffm3k4r",
-      "wartab"
-    ]
-  },
   "Web/API/Worker": {
     "modified": "2019-03-18T21:45:39.485Z",
     "contributors": [
@@ -4233,6 +4211,12 @@
       "paul_thomann"
     ]
   },
+  "Web/API/btoa": {
+    "modified": "2019-03-23T22:50:32.544Z",
+    "contributors": [
+      "cami"
+    ]
+  },
   "Web/API/notification": {
     "modified": "2019-03-23T22:55:22.604Z",
     "contributors": [
@@ -4249,6 +4233,16 @@
       "mwsh2005"
     ]
   },
+  "Web/API/setTimeout": {
+    "modified": "2019-03-23T23:36:28.621Z",
+    "contributors": [
+      "mdnde",
+      "Eschon",
+      "fscholz",
+      "c0ffm3k4r",
+      "wartab"
+    ]
+  },
   "Web/Accessibility": {
     "modified": "2019-09-09T14:09:32.470Z",
     "contributors": [
@@ -5114,31 +5108,31 @@
       "Simu"
     ]
   },
-  "Web/CSS/CSS_Background_and_Borders/Border-image_generator": {
+  "Web/CSS/CSS_Backgrounds_and_Borders": {
+    "modified": "2019-03-23T22:44:11.176Z",
+    "contributors": [
+      "teoli"
+    ]
+  },
+  "Web/CSS/CSS_Backgrounds_and_Borders/Border-image_generator": {
     "modified": "2019-03-18T21:15:52.768Z",
     "contributors": [
       "Sebastianz"
     ]
   },
-  "Web/CSS/CSS_Background_and_Borders/Border-radius_generator": {
+  "Web/CSS/CSS_Backgrounds_and_Borders/Border-radius_generator": {
     "modified": "2019-03-23T22:43:49.105Z",
     "contributors": [
       "Sebastianz"
     ]
   },
-  "Web/CSS/CSS_Background_and_Borders/Box-shadow_generator": {
+  "Web/CSS/CSS_Backgrounds_and_Borders/Box-shadow_generator": {
     "modified": "2019-03-18T20:43:44.623Z",
     "contributors": [
       "BychekRU",
       "Sebastianz"
     ]
   },
-  "Web/CSS/CSS_Backgrounds_and_Borders": {
-    "modified": "2019-03-23T22:44:11.176Z",
-    "contributors": [
-      "teoli"
-    ]
-  },
   "Web/CSS/CSS_Backgrounds_and_Borders/Resizing_background_images": {
     "modified": "2019-03-23T23:06:19.663Z",
     "contributors": [
@@ -5608,13 +5602,6 @@
       "Sebastianz"
     ]
   },
-  "Web/CSS/Tools": {
-    "modified": "2019-03-23T22:43:38.676Z",
-    "contributors": [
-      "Sebastianz",
-      "creativenitish"
-    ]
-  },
   "Web/CSS/Tools/Linear-gradient_Generator": {
     "modified": "2019-03-23T22:43:38.482Z",
     "contributors": [
@@ -7604,7 +7591,7 @@
       "axlwaii"
     ]
   },
-  "Web/Demos_of_open_web_technologies": {
+  "Web/Demos": {
     "modified": "2019-03-23T22:39:34.270Z",
     "contributors": [
       "sigoa",
@@ -13596,6 +13583,13 @@
       "eminor"
     ]
   },
+  "conflicting/Web/CSS": {
+    "modified": "2019-03-23T22:43:38.676Z",
+    "contributors": [
+      "Sebastianz",
+      "creativenitish"
+    ]
+  },
   "conflicting/Web/CSS/::placeholder": {
     "modified": "2019-03-23T23:08:23.797Z",
     "contributors": [
diff --git a/files/de/conflicting/web/css/index.html b/files/de/conflicting/web/css/index.html
new file mode 100644
index 0000000000..0cdc9d3d44
--- /dev/null
+++ b/files/de/conflicting/web/css/index.html
@@ -0,0 +1,26 @@
+---
+title: Tools
+slug: conflicting/Web/CSS
+tags:
+  - CSS
+translation_of: Web/CSS/Tools
+original_slug: Web/CSS/Tools
+---
+<p>CSS bietet eine Reihe mächtiger Features, die knifflig in der Anwendung sein können oder eine Reihe von Parametern haben, sodass es hilfreich ist, diese während an ihnen gearbeitet wird, zu visualisieren. Dieses Seite bietet Links zu verschiedenen nützlichen Werkzeugen, die helfen, das CSS unter Verwendung dieser Features zu erstellen, um den Inhalt zu stylen.</p>
+
+<p>{{LandingPageListSubpages}}</p>
+
+<h2 id="Weitere_Werkzeuge">Weitere Werkzeuge</h2>
+
+<ul>
+ <li>
+  <h4 id="CSS_Animation_-_Stylie">CSS Animation - <a href="http://jeremyckahn.github.io/stylie/">Stylie</a></h4>
+ </li>
+ <li>Um die Gerätedarstellungsinformationen zu überprüfen (hilfreich in {{Glossary("Responsive Web Design")}}) - <a href="http://mydevice.io">mydevice.io</a></li>
+</ul>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/de/docs/Web/CSS">CSS</a></li>
+</ul>
diff --git a/files/de/glossary/crawler/index.html b/files/de/glossary/crawler/index.html
index df3fd9db4b..49dffae66c 100644
--- a/files/de/glossary/crawler/index.html
+++ b/files/de/glossary/crawler/index.html
@@ -11,7 +11,7 @@ translation_of: Glossary/Crawler
  <li>{{Interwiki("wikipedia", "Webcrawler")}} auf Wikipedia</li>
 </ul>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li><a href="/en-US/docs/Glossary">MDN Web Docs Glossary</a>
 
diff --git a/files/de/glossary/flexbox/index.html b/files/de/glossary/flexbox/index.html
index 1065338721..51175bfd1d 100644
--- a/files/de/glossary/flexbox/index.html
+++ b/files/de/glossary/flexbox/index.html
@@ -46,7 +46,7 @@ translation_of: Glossary/Flexbox
  <li>CSS Flexbox Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox">Typical use cases of flexbox</a></em></li>
 </ul>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li><a href="/en-US/docs/Glossary">MDN Web Docs Glossary</a>
 
diff --git a/files/de/glossary/graceful_degradation/index.html b/files/de/glossary/graceful_degradation/index.html
index 9116aa8bfb..e40f583b5a 100644
--- a/files/de/glossary/graceful_degradation/index.html
+++ b/files/de/glossary/graceful_degradation/index.html
@@ -23,7 +23,7 @@ translation_of: Glossary/Graceful_degradation
  <li>{{Interwiki("wikipedia", "Graceful degradation")}} auf Wikipedia</li>
 </ul>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ul>
  <li><a href="/de/docs/Glossary">Glossar</a>
 
diff --git a/files/de/glossary/gzip_compression/index.html b/files/de/glossary/gzip_compression/index.html
index 406b66c303..ce7148f7be 100644
--- a/files/de/glossary/gzip_compression/index.html
+++ b/files/de/glossary/gzip_compression/index.html
@@ -17,7 +17,7 @@ translation_of: Glossary/GZip_compression
  <li><a href="https://de.wikipedia.org/wiki/Gzip">Gzip auf Wikipedia</a></li>
 </ul>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ul>
  <li>
   <details><summary><a href="/en-US/docs/Glossary">MDN Glossary</a></summary> {{ListSubpages("/en-US/docs/Glossary")}}</details>
diff --git a/files/de/glossary/iife/index.html b/files/de/glossary/iife/index.html
index 22ca4b8818..4f49e8f694 100644
--- a/files/de/glossary/iife/index.html
+++ b/files/de/glossary/iife/index.html
@@ -36,7 +36,7 @@ aName // throws "Uncaught ReferenceError: aName is not defined"
 // Immediately creates the output:
 result; // "Barry"</pre>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li>Mehr darüber erfahren
   <ol>
diff --git a/files/de/glossary/local_variable/index.html b/files/de/glossary/local_variable/index.html
index d0fcecb97b..ab79186796 100644
--- a/files/de/glossary/local_variable/index.html
+++ b/files/de/glossary/local_variable/index.html
@@ -18,7 +18,7 @@ function fun(){
 }
 </pre>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li>General knowledge
   <ol>
diff --git a/files/de/glossary/progressive_enhancement/index.html b/files/de/glossary/progressive_enhancement/index.html
index 624a77649c..eecee8977e 100644
--- a/files/de/glossary/progressive_enhancement/index.html
+++ b/files/de/glossary/progressive_enhancement/index.html
@@ -23,7 +23,7 @@ translation_of: Glossary/Progressive_Enhancement
  <li>{{Interwiki("wikipedia", "Progressive Verbesserung")}} auf Wikipedia</li>
 </ul>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ul>
  <li><a href="/de/docs/Glossary">Glossar</a>
 
diff --git a/files/de/glossary/robots.txt/index.html b/files/de/glossary/robots.txt/index.html
deleted file mode 100644
index 80be2760f1..0000000000
--- a/files/de/glossary/robots.txt/index.html
+++ /dev/null
@@ -1,50 +0,0 @@
----
-title: Robots.txt
-slug: Glossary/Robots.txt
-translation_of: Glossary/Robots.txt
----
-<p>&lt;p&gt; {{HTMLSidebar ("Global_attributes")}} &lt;/ p&gt;</p>
-
-<p>  &lt;p&gt; &lt;span class = "seoSummary"&gt; Das &lt;strong&gt; translate &lt;/ strong&gt; &lt;a href="/en-US/docs/Web/HTML/Global_attributes"&gt; globale Attribut &lt;/a&gt; ist ein aufgezähltes Attribut, das  wird verwendet, um anzugeben, ob die &lt;em&gt; übersetzbaren Attributwerte &lt;/ em&gt; eines Elements und die untergeordneten Knoten {{domxref ("Text")}} beim Lokalisieren der Seite übersetzt werden sollen oder ob sie unverändert bleiben sollen. &lt;/ span  &gt; Es kann folgende Werte annehmen: &lt;/ p&gt;</p>
-
-<p>  &lt;ul&gt;<br>
-  &lt;li&gt; leere Zeichenfolge oder &lt;code&gt; "yes" &lt;/ code&gt;, die angibt, dass das Element übersetzt werden soll, wenn die Seite lokalisiert wird. &lt;/ li&gt;<br>
-  &lt;li&gt; &lt;code&gt; "no" &lt;/ code&gt; gibt an, dass das Element nicht übersetzt werden darf. &lt;/ li&gt;<br>
-   &lt;/ ul&gt;</p>
-
-<p>  &lt;p&gt; Obwohl nicht alle Browser dieses Attribut erkennen, wird es von automatischen Übersetzungssystemen wie Google Translate und möglicherweise auch von Tools, die von menschlichen Übersetzern verwendet werden, respektiert.  Aus diesem Grund ist es wichtig, dass Webautoren dieses Attribut verwenden, um Inhalte zu markieren, die nicht übersetzt werden sollen. &lt;/ P&gt;</p>
-
-<p>  &lt;h2 id = "Specifications"&gt; Spezifikationen &lt;/ h2&gt;</p>
-
-<p>  &lt;table class = "standard-table"&gt;<br>
-  &lt;tbody&gt;<br>
-  &lt;tr&gt;<br>
-  &lt;th scope = "col"&gt; Spezifikation &lt;/ th&gt;<br>
-  &lt;th scope = "col"&gt; Status &lt;/ th&gt;<br>
-  &lt;th scope = "col"&gt; Kommentar &lt;/ th&gt;<br>
-  &lt;/ tr&gt;<br>
-  &lt;tr&gt;<br>
-  &lt;td&gt; {{SpecName ('HTML WHATWG', "dom.html # attr-translate", "translate")}} &lt;/ td&gt;<br>
-  &lt;td&gt; {{Spec2 ('HTML WHATWG')}} &lt;/ td&gt;<br>
-  &lt;td&gt; Keine Änderung gegenüber dem letzten Snapshot {{SpecName ('HTML5.1')}} &lt;/ td&gt;<br>
-  &lt;/ tr&gt;<br>
-  &lt;tr&gt;<br>
-  &lt;td&gt; {{SpecName ('HTML5.1', "dom.html # the-translate-attribute", "translate")}} &lt;/ td&gt;<br>
-  &lt;td&gt; {{Spec2 ('HTML5.1')}} &lt;/ td&gt;<br>
-  &lt;td&gt; Momentaufnahme von {{SpecName ('HTML WHATWG')}}, ursprüngliche Definition &lt;/ td&gt;<br>
-  &lt;/ tr&gt;<br>
-  &lt;/ tbody&gt;<br>
-   &lt;/ table&gt;</p>
-
-<p>  &lt;h2 id = "Browser_compatibility"&gt; Browserkompatibilität &lt;/ h2&gt;</p>
-
-<p>  &lt;div class = "hidden"&gt; Die Kompatibilitätstabelle auf dieser Seite wird aus strukturierten Daten generiert.  Wenn Sie zu den Daten beitragen möchten, lesen Sie &lt;a href="https://github.com/mdn/browser-compat-data"&gt; https://github.com/mdn/browser-compat-  Daten &lt;/a&gt; und senden Sie uns eine Pull-Anfrage. &lt;/ div&gt;</p>
-
-<p>  &lt;p&gt; {{Compat ("html.global_attributes.translate")}} &lt;/ p&gt;</p>
-
-<p>  &lt;h2 id = "See_also"&gt; Siehe auch &lt;/ h2&gt;</p>
-
-<p>  &lt;ul&gt;<br>
-  &lt;li&gt; Alle &lt;a href="/en-US/docs/Web/HTML/Global_attributes"&gt; globalen Attribute &lt;/a&gt;. &lt;/ li&gt;<br>
-  &lt;li&gt; Die Eigenschaft {{domxref ("HTMLElement.translate")}}, die dieses Attribut widerspiegelt. &lt;/ li&gt;<br>
-  &lt;li&gt; &lt;a href="https://www.w3.org/International/questions/qa-translate-flag"&gt; Verwenden des HTML-Übersetzungsattributs &lt;/a&gt;. &lt;/ li&gt;</p>
diff --git a/files/de/glossary/type/index.html b/files/de/glossary/type/index.html
index 09a772b7d4..0aee277a07 100644
--- a/files/de/glossary/type/index.html
+++ b/files/de/glossary/type/index.html
@@ -14,7 +14,7 @@ original_slug: Glossary/Typ
 
 <p>Der Typ eines Wertes bestimmt außerdem, welche Arten von Operationen damit zulässig sind. Z.B. können Zahlen nur mit Zahlen multipliziert werden, nicht aber mit Strings oder Booleans. Dieses Wissen ist auch nützlich für den Vergleich von Typen. Denn neben <a href="/de/docs/Web/JavaScript/Datenstrukturen#Primitive_Werte">Primitiven Werten</a> gibt es auch <a href="/de/docs/Web/JavaScript/Datenstrukturen#Objekte">strukturierte Datentypen</a> wie Objekte.</p>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li>{{Interwiki("wikipedia", "Datentyp auf Wikipedia")}}</li>
  <li><a href="/de/docs/Web/JavaScript/Inheritance_and_the_prototype_chain">Vererbung und Prototypen</a></li>
diff --git a/files/de/glossary/type_conversion/index.html b/files/de/glossary/type_conversion/index.html
index 39202e3f1d..e3267b4b88 100644
--- a/files/de/glossary/type_conversion/index.html
+++ b/files/de/glossary/type_conversion/index.html
@@ -23,7 +23,7 @@ var b = Number("0x11");
 
 <p>(b) Der String <code>0x11</code> wird explizit in die Ganzzahl <code>17</code> umgewandelt.</p>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li><a href="/de/docs/Glossary">Glossar</a>
 
diff --git a/files/de/glossary/user_agent/index.html b/files/de/glossary/user_agent/index.html
index bcf4374e8a..6a6436386c 100644
--- a/files/de/glossary/user_agent/index.html
+++ b/files/de/glossary/user_agent/index.html
@@ -34,7 +34,7 @@ translation_of: Glossary/User_agent
  <li>{{RFC(2616, "14.43")}}: The <code>User-Agent</code> header</li>
 </ul>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li><a href="/en-US/docs/Glossary">MDN Web Docs Glossary</a>
 
diff --git a/files/de/glossary/webm/index.html b/files/de/glossary/webm/index.html
index 4da68d24c7..f910fc066f 100644
--- a/files/de/glossary/webm/index.html
+++ b/files/de/glossary/webm/index.html
@@ -16,7 +16,7 @@ translation_of: Glossary/webm
  <li>{{interwiki("wikipedia", "WebM")}} auf Wikipedia</li>
 </ul>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ul>
  <li><a href="/de/docs/Glossary">Glossar</a>
 
diff --git a/files/de/glossary/webp/index.html b/files/de/glossary/webp/index.html
index 852e6ca068..614ed8c566 100644
--- a/files/de/glossary/webp/index.html
+++ b/files/de/glossary/webp/index.html
@@ -16,7 +16,7 @@ translation_of: Glossary/webp
  <li>{{interwiki("wikipedia", "WebP")}} auf Wikipedia</li>
 </ul>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ul>
  <li><a href="/de/docs/Glossary">Glossar</a>
 
diff --git a/files/de/glossary/wrapper/index.html b/files/de/glossary/wrapper/index.html
index 2dfd58a2c3..e2d0698849 100644
--- a/files/de/glossary/wrapper/index.html
+++ b/files/de/glossary/wrapper/index.html
@@ -16,7 +16,7 @@ translation_of: Glossary/Wrapper
 
 <p>{{Interwiki("wikipedia", "Wrapper function")}} on Wikipedia</p>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li><a href="/en-US/docs/Glossary">MDN Web Docs Glossary</a>
 
diff --git a/files/de/mozilla/firefox/releases/3/updating_extensions/index.html b/files/de/mozilla/firefox/releases/3/updating_extensions/index.html
index 8d95c681f7..a504bb948a 100644
--- a/files/de/mozilla/firefox/releases/3/updating_extensions/index.html
+++ b/files/de/mozilla/firefox/releases/3/updating_extensions/index.html
@@ -6,7 +6,7 @@ tags:
 translation_of: Mozilla/Firefox/Releases/3/Updating_extensions
 original_slug: Erweiterungen_für_Firefox_3_aktualisieren
 ---
-<div><section class="Quick_links" id="Quick_Links">
+<div><section id="Quick_links">
   <ol>
     <li class="toggle">
         <details>
diff --git a/files/de/web/accessibility/index.html b/files/de/web/accessibility/index.html
index c078419595..b3743b8339 100644
--- a/files/de/web/accessibility/index.html
+++ b/files/de/web/accessibility/index.html
@@ -74,5 +74,3 @@ original_slug: Web/Barrierefreiheit
  <li><a href="/en-US/docs/Web/Guide" title="REDIRECT Web">Developer guides</a></li>
  <li><a href="/en-US/docs/Mozilla/Accessibility" title="Accessibility is the idea that software (among other things) should be designed to be usable and, as much as possible, convenient to use for people with disabilities. Mozilla strives to make its software accessible; the documents below cover the ways in which we do so.">Accessibility and Mozilla</a></li>
 </ul>
-
-<section id="Quick_Links"></section>
diff --git a/files/de/web/api/btoa/index.html b/files/de/web/api/btoa/index.html
new file mode 100644
index 0000000000..62a89eac22
--- /dev/null
+++ b/files/de/web/api/btoa/index.html
@@ -0,0 +1,146 @@
+---
+title: WindowBase64.btoa()
+slug: Web/API/btoa
+tags:
+  - API
+  - Méthode
+  - Referenz
+translation_of: Web/API/WindowOrWorkerGlobalScope/btoa
+original_slug: Web/API/WindowOrWorkerGlobalScope/btoa
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p>Erzeugt eine Base-64-kodierten ASCII-Zeichenkette aus einer "Zeichenkette" von Binärdaten.</p>
+
+<p>Hinweis: diese Funktion ist nicht für Raw-<a href="http://www.unicode.org/standard/WhatIsUnicode.html">Unicode</a>-Zeichenketten geeignet (siehe Abschnitt "Unicode-Zeichenketten" unten).</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">var encodedData = window.btoa(<em>stringToEncode</em>);</pre>
+
+<h2 id="Example">Example</h2>
+
+<pre class="brush:js">var encodedData = window.btoa("Hello, world"); // Zeichenkette kodieren
+var decodedData = window.atob(encodedData); // Zeichenkette dekodieren
+</pre>
+
+<h2 id="Hinweise">Hinweise</h2>
+
+<p>Diese Methode kann verwendet werden, um Daten zu kodieren, übertragen, und mittels<code> {{domxref("WindowBase64.atob","window.atob()")}}</code> wieder zu dekodieren, welche andernfalls Übertragungsprobleme bereiten würden. Beispielsweise ist es möglich, die Steuerzeichen mit den ASCII-Werten 0 bis 31 zu kodieren.</p>
+
+<p><code>btoa()</code> steht auch in JavaScript implementierten XPCOM-Komponenten zur Verfügung, auch wenn <a href="/en-US/docs/DOM/window" title="DOM/window"><code>window</code></a> in solchen Komponenten nicht das globale Objekt ist.</p>
+
+<h2 id="Unicode-Zeichenketten">Unicode-Zeichenketten</h2>
+
+<p>In den meisten Browsern verursacht ein Aufruf von <code>window.btoa()</code> mit einer Unicode-Zeichenkette eine "Character Out Of Range"-Exception ("Zeichen außerhalb des zulässigen Wertebereichs").</p>
+
+<p>Das kann mithilfe eines solchen Code-Schemas vermieden werden (beigesteuert von <a class="external" href="http://ecmanaut.blogspot.com/2006/07/encoding-decoding-utf8-in-javascript.html">Johan Sundström</a>):</p>
+
+<pre class="brush:js">function utf8_to_b64(str) {
+    return window.btoa(unescape(encodeURIComponent(str)));
+}
+
+function b64_to_utf8(str) {
+    return decodeURIComponent(escape(window.atob(str)));
+}
+
+// Usage:
+utf8_to_b64('✓ à la mode'); // JTI1dTI3MTMlMjUyMCUyNUUwJTI1MjBsYSUyNTIwbW9kZQ==
+b64_to_utf8('JTI1dTI3MTMlMjUyMCUyNUUwJTI1MjBsYSUyNTIwbW9kZQ=='); // "✓ à la mode"
+
+utf8_to_b64('I \u2661 Unicode!'); // SSUyNTIwJTI1dTI2NjElMjUyMFVuaWNvZGUlMjUyMQ==
+b64_to_utf8('SSUyNTIwJTI1dTI2NjElMjUyMFVuaWNvZGUlMjUyMQ=='); // "I ♡ Unicode!"
+
+</pre>
+
+<p>Eine günstigere, zuverlässigere und effizientere Lösung ist, <a href="/en-US/docs/Web/API/DOMString" title="/en-US/docs/Web/API/DOMString"><code>DOMString</code></a> zunächst in eine UTF-8-kodierte Zeichenkette zu konvertieren, die sich für <a href="/en-US/docs/Web/JavaScript/Typed_arrays" title="/en-US/docs/Web/JavaScript/Typed_arrays">typed arrays</a> eignet. Eine Anleitung bietet <strong><a href="/en-US/docs/Web/JavaScript/Base64_encoding_and_decoding#Solution_.232_.E2.80.93_rewriting_atob()_and_btoa()_using_TypedArrays_and_UTF-8" title="/en-US/docs/Web/JavaScript/Base64_encoding_and_decoding#Solution_.232_.E2.80.93_rewriting_atob()_and_btoa()_using_TypedArrays_and_UTF-8">dieser Abschnitt</a></strong>.</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#dom-windowbase64-btoa', 'WindowBase64.btoa()')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>No change since the latest snapshot, {{SpecName("HTML5.1")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', '#dom-windowbase64-btoa', 'WindowBase64.btoa()')}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>Snapshot of {{SpecName("HTML WHATWG")}}. No change.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5 W3C", "#dom-windowbase64-btoa", "WindowBase64.btoa()")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Snapshot of {{SpecName("HTML WHATWG")}}. Creation of <code>WindowBase64</code> (properties where on the target before it).</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(1)}}[1]</td>
+   <td>10</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(1)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] <code>btoa()</code> is also available to XPCOM components implemented in JavaScript, even though <code><a href="/en-US/docs/DOM/window">window</a></code> is not the global object in components.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/Web/API/WindowBase64/Base64_encoding_and_decoding">Base64 encoding and decoding</a></li>
+ <li><a href="/en-US/docs/data_URIs"><code>data</code> URIs</a></li>
+ <li>{{domxref("WindowBase64.atob","window.atob()")}}</li>
+ <li><a href="/en-US/docs/Components.utils.importGlobalProperties">Components.utils.importGlobalProperties</a></li>
+</ul>
diff --git a/files/de/web/api/settimeout/index.html b/files/de/web/api/settimeout/index.html
new file mode 100644
index 0000000000..706f9a90b3
--- /dev/null
+++ b/files/de/web/api/settimeout/index.html
@@ -0,0 +1,330 @@
+---
+title: WindowTimers.setTimeout()
+slug: Web/API/setTimeout
+translation_of: Web/API/WindowOrWorkerGlobalScope/setTimeout
+original_slug: Web/API/WindowOrWorkerGlobalScope/setTimeout
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p>Die Funktion <strong><code>setTimeout()</code></strong> der {{domxref("WindowOrWorkerGlobalScope")}}-Schnittstelle ruft nach der gegebenen Zeitspanne eine Funktion oder direkt angebenen Code auf.</p>
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><em>var timeoutID</em> = window.setTimeout(funktion, zeitspanne, [<em>parameter1</em>, <em>parameter2</em>, ...]);
+<em>var timeoutID</em> = window.setTimeout(<em>code</em>, zeitspanne);
+</pre>
+
+<p> </p>
+
+<h3 id="Parameter">Parameter</h3>
+
+<p> </p>
+
+<dl>
+ <dt><code>funktion</code></dt>
+ <dd>Die {{jsxref("function", "Funktion")}}, die nach <code>zeitspanne</code> Millisekunden ausgeführt werden soll.</dd>
+ <dt><code>code</code></dt>
+ <dd><code>code</code> in der alternativen Syntax ist eine Zeichenkette, die Code enthält, der nach <code>zeitspanne</code> Millisekunden ausgeführt werden soll.  <code>code</code> sollte aus den gleichen Gründen, die auch <a href="/en-US/docs/JavaScript/Reference/Global_Objects/eval#Don%27t_use_eval!" title="en-US/docs/Core JavaScript 1.5 Reference/Global Functions/Eval#Don't use eval!">eval()</a> zum Sicherheitsrisiko machen, <strong>nicht verwendet</strong> werden.</dd>
+ <dt><code>zeitspanne</code> {{optional_inline}}</dt>
+ <dd><code>zeitspanne</code> ist die Wartezeit in Millisekunden (ein Tausendstel einer Sekunde), nach der <code>funktion</code> bzw. <code>code</code> ausgeführt werden soll. Dieser Wert ist ein Mindestwert, die tatsächlich abgelaufene Zeit kann länger sein, siehe {{anch("Gründe für längere als gegebene Wartezeiten")}} weiter unten.</dd>
+ <dt><code>parameter1, ..., parameterN</code> {{optional_inline}}</dt>
+ <dd>Diese Parameter werden an die <code>funktion</code><em> </em>oder den <code>code</code> übergeben.</dd>
+</dl>
+
+<div class="note"><strong>Anmerkung:</strong> Der Internet Explorer unterstützt bis einschließlich Version 9 die Übergabe von zusätzlichen Parametern nicht.</div>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p><code>setTimeout()</code> gibt eine ID zurück, die den eingerichteten Zeitgeber identifiziert; um die Wartezeit abzubrechen, kann sie an {{domxref("WindowOrWorkerGlobalScope.clearTimeout","clearTimeout()")}}  übergeben werden.</p>
+
+<p>Jede ID wird von <code>setTimeout()</code> und <code>setInterval()</code> nur einmalig je Objekt (window oder Worker) verwendet.</p>
+
+<h2 id="Examples" name="Examples">Beispiel</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html line-numbers  language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span><span class="punctuation token">&gt;</span></span>Beispiel<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>button</span> <span class="attr-name token">onclick</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>delayedAlert();<span class="punctuation token">"</span></span><span class="punctuation token">&gt;Zeige nach zwei Sekunden einen Alarm.</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>button</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>button</span> <span class="attr-name token">onclick</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>clearAlert();<span class="punctuation token">"</span></span><span class="punctuation token">&gt;Alarm</span></span> vorzeitig abbrechen.<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>button</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> timeoutID<span class="punctuation token">;</span>
+
+<span class="keyword token">function</span> <span class="function token">delayedAlert</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  timeoutID <span class="operator token">=</span> window<span class="punctuation token">.</span><span class="function token">setTimeout</span><span class="punctuation token">(</span>slowAlert<span class="punctuation token">,</span> <span class="number token">2000</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+<span class="keyword token">function</span> <span class="function token">slowAlert</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="function token">alert</span><span class="punctuation token">(</span><span class="string token">'Das hat gedauert!'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+<span class="keyword token">function</span> <span class="function token">clearAlert</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  window<span class="punctuation token">.</span><span class="function token">clearTimeout</span><span class="punctuation token">(</span>timeoutID<span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<h3 id="Ergebnis">Ergebnis</h3>
+
+<p>{{EmbedLiveSample('Example')}}</p>
+
+<p>Siehe auch <a href="/en-US/docs/DOM/window.clearTimeout#Example" title="en-US/docs/DOM/window.clearTimeout#Example"><code>clearTimeout()</code></a></p>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<p>Der nachfolgende Polyfill-Code ermöglicht es, der aufzurufenden Funktion auch im Internet Explorer Parameter zu übergeben:</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="comment token">/*\
+|*|
+|*|  Polyfill which enables the passage of arbitrary arguments to the
+|*|  callback functions of JavaScript timers (HTML5 standard syntax).
+|*|
+|*|  https://developer.mozilla.org/en-US/docs/DOM/window.setInterval
+|*|
+|*|  Syntax:
+|*|  var timeoutID = window.setTimeout(func, delay[, param1, param2, ...]);
+|*|  var timeoutID = window.setTimeout(code, delay);
+|*|  var intervalID = window.setInterval(func, delay[, param1, param2, ...]);
+|*|  var intervalID = window.setInterval(code, delay);
+|*|
+\*/</span>
+
+<span class="punctuation token">(</span><span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="function token">setTimeout</span><span class="punctuation token">(</span><span class="keyword token">function</span><span class="punctuation token">(</span>arg1<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    <span class="keyword token">if</span> <span class="punctuation token">(</span>arg1 <span class="operator token">===</span> <span class="string token">'test'</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+      <span class="comment token">// feature test is passed, no need for polyfill</span>
+      <span class="keyword token">return</span><span class="punctuation token">;</span>
+    <span class="punctuation token">}</span>
+    <span class="keyword token">var</span> __nativeST__ <span class="operator token">=</span> window<span class="punctuation token">.</span>setTimeout<span class="punctuation token">;</span>
+    window<span class="punctuation token">.</span>setTimeout <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>vCallback<span class="punctuation token">,</span> nDelay <span class="comment token">/*, argumentToPass1, argumentToPass2, etc. */</span> <span class="punctuation token">)</span> <span class="punctuation token">{</span>
+      <span class="keyword token">var</span> aArgs <span class="operator token">=</span> Array<span class="punctuation token">.</span>prototype<span class="punctuation token">.</span>slice<span class="punctuation token">.</span><span class="function token">call</span><span class="punctuation token">(</span>arguments<span class="punctuation token">,</span> <span class="number token">2</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+      <span class="keyword token">return</span> <span class="function token">__nativeST__</span><span class="punctuation token">(</span>vCallback <span class="keyword token">instanceof</span> <span class="class-name token">Function</span> <span class="operator token">?</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+        vCallback<span class="punctuation token">.</span><span class="function token">apply</span><span class="punctuation token">(</span><span class="keyword token">null</span><span class="punctuation token">,</span> aArgs<span class="punctuation token">)</span><span class="punctuation token">;</span>
+      <span class="punctuation token">}</span> <span class="punctuation token">:</span> vCallback<span class="punctuation token">,</span> nDelay<span class="punctuation token">)</span><span class="punctuation token">;</span>
+    <span class="punctuation token">}</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span><span class="punctuation token">,</span> <span class="number token">0</span><span class="punctuation token">,</span> <span class="string token">'test'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+  <span class="keyword token">var</span> interval <span class="operator token">=</span> <span class="function token">setInterval</span><span class="punctuation token">(</span><span class="keyword token">function</span><span class="punctuation token">(</span>arg1<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    <span class="function token">clearInterval</span><span class="punctuation token">(</span>interval<span class="punctuation token">)</span><span class="punctuation token">;</span>
+    <span class="keyword token">if</span> <span class="punctuation token">(</span>arg1 <span class="operator token">===</span> <span class="string token">'test'</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+      <span class="comment token">// feature test is passed, no need for polyfill</span>
+      <span class="keyword token">return</span><span class="punctuation token">;</span>
+    <span class="punctuation token">}</span>
+    <span class="keyword token">var</span> __nativeSI__ <span class="operator token">=</span> window<span class="punctuation token">.</span>setInterval<span class="punctuation token">;</span>
+    window<span class="punctuation token">.</span>setInterval <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>vCallback<span class="punctuation token">,</span> nDelay <span class="comment token">/*, argumentToPass1, argumentToPass2, etc. */</span> <span class="punctuation token">)</span> <span class="punctuation token">{</span>
+      <span class="keyword token">var</span> aArgs <span class="operator token">=</span> Array<span class="punctuation token">.</span>prototype<span class="punctuation token">.</span>slice<span class="punctuation token">.</span><span class="function token">call</span><span class="punctuation token">(</span>arguments<span class="punctuation token">,</span> <span class="number token">2</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+      <span class="keyword token">return</span> <span class="function token">__nativeSI__</span><span class="punctuation token">(</span>vCallback <span class="keyword token">instanceof</span> <span class="class-name token">Function</span> <span class="operator token">?</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+        vCallback<span class="punctuation token">.</span><span class="function token">apply</span><span class="punctuation token">(</span><span class="keyword token">null</span><span class="punctuation token">,</span> aArgs<span class="punctuation token">)</span><span class="punctuation token">;</span>
+      <span class="punctuation token">}</span> <span class="punctuation token">:</span> vCallback<span class="punctuation token">,</span> nDelay<span class="punctuation token">)</span><span class="punctuation token">;</span>
+    <span class="punctuation token">}</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span><span class="punctuation token">,</span> <span class="number token">0</span><span class="punctuation token">,</span> <span class="string token">'test'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">)</span></code></pre>
+
+<p>Eine andere Möglichkeit ist, die Funktion innerhalb einer anonymen Funktion aufzurufen:</p>
+
+<pre class="brush: js">setTimeout(function() {
+    funktion("eins", "zwei", "drei");
+}, 1000);
+</pre>
+
+<p>Ebenfalls kann die Funktion <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind"><code>bind()</code></a> genutzt werden:</p>
+
+<p> </p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="function token">setTimeout</span><span class="punctuation token">(</span><span class="keyword token">function</span><span class="punctuation token">(</span>arg1, arg2, arg3<span class="punctuation token">)</span><span class="punctuation token">{</span><span class="punctuation token">}</span><span class="punctuation token">.</span><span class="function token">bind</span><span class="punctuation token">(</span>undefined<span class="punctuation token">,</span> "eins", "zwei", "drei"<span class="punctuation token">)</span><span class="punctuation token">,</span> <span class="number token">1000</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<p> </p>
+
+<h2 id="Das_this-Problem">Das "<code>this</code>"-Problem</h2>
+
+<p>In der an <code>setTimeout()</code> übergebenen Funktion wird <code>this</code> bei Aufruf einen falschen Wert enthalten. Dieses Problem wird detailliert in der <a href="/en-US/docs/JavaScript/Reference/Operators/this#Method_binding" title="en-US/docs/Core_JavaScript_1.5_Reference/Operators/Special_Operators/this_Operator#Method_binding">JavaScript-Referenz</a> beschrieben.</p>
+
+<h3 id="Erklärung">Erklärung</h3>
+
+<p>Von <code>setTimeout()</code> ausgeführter Code wird in einem anderen Kontext ausgeführt, als in dem <code>setTimeout()</code> aufgerufen wurde. <code>this</code> wird deshalb in der aufgerufenen Funktion <code>window</code> oder <code>global</code> entsprechen, nicht dem <code>this</code> des Bereichs, in dem  <code>setTimeout()</code> aufgerufen wurde. Beispiel:</p>
+
+<pre class="brush: js">myArray = ["null", "eins", "drei"];
+myArray.myMethod = function (sProperty) {
+    alert(arguments.length &gt; 0 ? this[sProperty] : this);
+};
+
+myArray.myMethod(); // Ausgabe: "null,eins,zwei"
+myArray.myMethod(1); // Ausgabe: "eins"
+setTimeout(myArray.myMethod, 1000); // Ausgabe: "[object Window]" nach 1 Sekunde
+setTimeout(myArray.myMethod, 1500, "1"); // Ausgabe: "undefined" nach 1,5 Sekunden
+// Versuchen wir, 'this' zu übergeben
+setTimeout.call(myArray, myArray.myMethod, 2000); // Fehler: "NS_ERROR_XPC_BAD_OP_ON_WN_PROTO: Illegal operation on WrappedNative prototype object"
+setTimeout.call(myArray, myArray.myMethod, 2500, 2); // Der gleiche Fehler</pre>
+
+<p>Es gibt hier keine Möglichkeit, <code>this</code> an die aufzurufende Funktion durchzureichen.</p>
+
+<h3 id="Eine_Lösungsmöglichkeit">Eine Lösungsmöglichkeit</h3>
+
+<p>Eine Möglichkeit, das Problem zu umgehen, ist es, die beiden eingebauten Funktionen <code>setTimeout()</code> und <code>setInterval()</code> durch zwei eigene zu ersetzen, die sich <a href="en-US/docs/JavaScript/Reference/Global_Objects/Function/call" title="en-US/docs/JavaScript/Reference/Global_Objects/Function/call"><code>Function.prototype.call</code></a> bedienen:</p>
+
+<pre class="brush: js">// Enable the passage of the 'this' object through the JavaScript timers
+
+var __nativeST__ = window.setTimeout, __nativeSI__ = window.setInterval;
+
+window.setTimeout = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) {
+  var oThis = this, aArgs = Array.prototype.slice.call(arguments, 2);
+  return __nativeST__(vCallback instanceof Function ? function () {
+    vCallback.apply(oThis, aArgs);
+  } : vCallback, nDelay);
+};
+
+window.setInterval = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) {
+  var oThis = this, aArgs = Array.prototype.slice.call(arguments, 2);
+  return __nativeSI__(vCallback instanceof Function ? function () {
+    vCallback.apply(oThis, aArgs);
+  } : vCallback, nDelay);
+};</pre>
+
+<div class="note"><strong>Hinweis:</strong> Diese beiden Ersatzfunktionen ermöglichen es auch, im Internet Explorer Parameter an die aufzurufende Funktion zu übergeben, wie es HTML5 vorsieht. Sie können daher auch als {{anch("Polyfill")}} benutzt werden.</div>
+
+<h2 id="Anmerkungen">Anmerkungen</h2>
+
+<p>Eine Wartezeit kann mit <code><a href="/en-US/docs/DOM/window.clearTimeout" title="en-US/docs/DOM/window.clearTimeout">window.clearTimeout()</a></code> abgebrochen werden.</p>
+
+<p>Soll eine Funktion wiederholt alle n Millisekunden aufgerufen werden, ist <code><a href="/en-US/docs/DOM/window.setInterval" title="en-US/docs/DOM/window.setInterval">window.setInterval()</a></code> die bessere Wahl.</p>
+
+<h3 id="Passing_string_literals">Passing string literals</h3>
+
+<p>Passing a string instead of a function to <code>setTimeout()</code> suffers from the same hazards as using <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/eval#Don.27t_use_eval.21" title="https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/eval">eval</a>. </code></p>
+
+<pre class="brush: js">// Correct
+window.setTimeout(function() {
+    alert("Hello World!");
+}, 500);
+
+// Incorrect
+window.setTimeout("alert(\"Hello World!\");", 500);
+
+</pre>
+
+<p>String literals are evaluated in the global context, so local symbols in the context where <code>setTimeout()</code> was called will not be available when the string is evaluated as code.</p>
+
+<h3 id="Gründe_für_längere_als_gegebene_Wartezeiten">Gründe für längere als gegebene Wartezeiten</h3>
+
+<p>Aus verschiedenen Gründen kann die tatsächliche Zeit bis zum Aufruf der Funktion länger sein als mit setTimeout() angegeben wurde. Dieser Abschnitt beschreibt die beiden häufigsten.</p>
+
+<h4 id="Wartezeiten_betragen_4ms_oder_mehr">Wartezeiten betragen 4ms oder mehr</h4>
+
+<p>Um das System nicht zu überlasten, begrenzen moderne Browser die Häufigkeit der von setTimeout() und setInterval() ausgelösten Ereignisse ab einer bestimmten Aufruftiefe oder -häufigkeit. Beispiel:</p>
+
+<pre class="brush: js line-numbers  language-js" id="ct-0"><code class="language-js"><span class="keyword token">function</span> <span class="function token">cb</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> <span class="function token">f</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="function token">setTimeout</span><span class="punctuation token">(</span>cb<span class="punctuation token">,</span> <span class="number token">0</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="punctuation token">}</span>
+<span class="function token">setTimeout</span><span class="punctuation token">(</span>cb<span class="punctuation token">,</span> <span class="number token">0</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="function token">setInterval</span><span class="punctuation token">(</span>f<span class="punctuation token">,</span> <span class="number token">0</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<p>Chrome und Firefox drosseln nach dem fünften Aufruf, Safari nach dem sechsten, Edge bereits nach dem dritten.</p>
+
+<p>Eine Wartezeit von 0 ms kann mit {{domxref("window.postMessage()")}} erreicht werden, wie <a class="external external-icon" href="http://dbaron.org/log/20100309-faster-timeouts">hier beschrieben</a>.</p>
+
+<p> </p>
+
+<div class="note">
+<p><strong>Hinweis</strong>: Die Mindestwartezeit, <code>DOM_MIN_TIMEOUT_VALUE</code>, beträgt 4 ms (Firefox-Einstellung <code>dom.min_timeout_value</code>), die Verschachtelungstiefe <code>DOM_CLAMP_TIMEOUT_NESTING_LEVEL</code> beträgt 5.</p>
+</div>
+
+<div class="note">
+<p><strong>Hinweis</strong>: Der Wert 4 ms wurde mit <a class="external external-icon" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/timers.html#timers">HTML5 festgelegt</a> und wird von allen Browsern umgesetzt, die nach 2010 erschienen sind. Vor {{geckoRelease("5.0")}} war der Mindestwert 10 ms.</p>
+</div>
+
+<p> </p>
+
+<p> </p>
+
+<h4 id="Wartezeiten_in_inaktiven_Tabs_größer_als_1s">Wartezeiten in inaktiven Tabs  größer als 1s</h4>
+
+<p>Um die Last noch weiter zu verringern, beträgt die Mindestwartezeit in sich im Hintergrund befindlichen Tabs grundsätzlich mindestens 1 s.</p>
+
+<p>Firefox setzt diese Beschränkung seit Version 5 um (siehe {{bug(633421)}}). Der Wert von 1000 ms kann in der Einstellungen <span class="comment-copy"><code>dom.min_background_timeout_value</code> geändert werden.</span><br>
+ Chrome setzt diese Beschränkung seit Version 11 um (<a class="external external-icon" href="http://crbug.com/66078">crbug.com/66078</a>).</p>
+
+<p>Bei Firefox für Android beträgt seit Version 14 die Mindestwartezeit in sich im Hintergrund befindlichen Tabs 15 Minuten (siehe {{bug(736602)}}). Jegliche Aktivität in diesen Tabs kann auch vollständig angehalten werden.</p>
+
+<div class="note">
+<p>Seit Version 50 gelten in Firefox keine Beschränkungen mehr, falls sich die Web Audio API {{domxref("AudioContext")}} im Wiedergabemodus befindet. Seit Firefox 51 gilt dies bereits für jegliche Dokumente mit einem {{domxref("AudioContext")}}, unabhängig von dessen Status.<br>
+ Apps, die Musik Note für Note abspielen, konnten wegen der Beschränkungen den Takt nicht halten, sobald sie in den Hintergrund gelegt wurden.</p>
+</div>
+
+<h4 id="Lastbedingte_Verzögerungen">Lastbedingte Verzögerungen</h4>
+
+<p>Zusätzlich zum aktiven Drosseln kann es zu verlängerten Wartezeiten kommen, falls das Dokument, der Browser oder das Betriebssystem anderweitig beschäftigt sind. Ein wichtiger Punkt in diesem Zusammenhang ist, dass die aufzurufende Funktion nicht ausgeführt werden kann, solange der Thread, der <code>setTimeout()</code> aufgerufen hat, noch aktiv ist:</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">function</span> bla<span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="string token">'bla wurde aufgerufen'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+<span class="function token">setTimeout</span><span class="punctuation token">(</span>bla<span class="punctuation token">,</span> <span class="number token">0</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="string token">'hinter setTimeout'</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<p>Ergebnis:</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js">hinter setTimeout
+bla wurde aufgerufen</code></pre>
+
+<p>Obwohl <code>setTimeout</code> die sofortige Ausführung angewiesen wurde, wird der Aufruf von bla() in einer Warteschlange bis zur nächsten Gelegenheit zurückgestellt. Erst wenn der aktuell laufende Code ausgeführt wurde, werden die in der Warteschlange gesammelten Aufrufe abgearbeitet. In der Folge ist der Programmablauf nicht, wie eventuell erwartet.</p>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Eigenschaft</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basis</td>
+   <td>1.0</td>
+   <td>{{ CompatGeckoDesktop("1") }}</td>
+   <td>4.0</td>
+   <td>4.0</td>
+   <td>1.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Eigenschaft</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic</td>
+   <td>1.0</td>
+   <td>1.0</td>
+   <td>{{ CompatGeckoMobile("1") }}</td>
+   <td>6.0</td>
+   <td>6.0</td>
+   <td>1.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Specification" name="Specification">Spezifikation</h2>
+
+<p>Gehört zu DOM-Level 0, wie spezifiziert in <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/browsers.html#timers">HTML5</a>.</p>
+
+<h2 id="See_also" name="See_also">Siehe auch</h2>
+
+<ul>
+ <li>{{domxref("window.setInterval")}}</li>
+ <li>{{domxref("window.requestAnimationFrame")}}</li>
+</ul>
diff --git a/files/de/web/api/windoworworkerglobalscope/btoa/index.html b/files/de/web/api/windoworworkerglobalscope/btoa/index.html
deleted file mode 100644
index 8d1d37cf9f..0000000000
--- a/files/de/web/api/windoworworkerglobalscope/btoa/index.html
+++ /dev/null
@@ -1,146 +0,0 @@
----
-title: WindowBase64.btoa()
-slug: Web/API/WindowOrWorkerGlobalScope/btoa
-tags:
-  - API
-  - Méthode
-  - Referenz
-translation_of: Web/API/WindowOrWorkerGlobalScope/btoa
-original_slug: Web/API/WindowBase64/btoa
----
-<div>{{APIRef("HTML DOM")}}</div>
-
-<p>Erzeugt eine Base-64-kodierten ASCII-Zeichenkette aus einer "Zeichenkette" von Binärdaten.</p>
-
-<p>Hinweis: diese Funktion ist nicht für Raw-<a href="http://www.unicode.org/standard/WhatIsUnicode.html">Unicode</a>-Zeichenketten geeignet (siehe Abschnitt "Unicode-Zeichenketten" unten).</p>
-
-<h2 id="Syntax">Syntax</h2>
-
-<pre class="syntaxbox">var encodedData = window.btoa(<em>stringToEncode</em>);</pre>
-
-<h2 id="Example">Example</h2>
-
-<pre class="brush:js">var encodedData = window.btoa("Hello, world"); // Zeichenkette kodieren
-var decodedData = window.atob(encodedData); // Zeichenkette dekodieren
-</pre>
-
-<h2 id="Hinweise">Hinweise</h2>
-
-<p>Diese Methode kann verwendet werden, um Daten zu kodieren, übertragen, und mittels<code> {{domxref("WindowBase64.atob","window.atob()")}}</code> wieder zu dekodieren, welche andernfalls Übertragungsprobleme bereiten würden. Beispielsweise ist es möglich, die Steuerzeichen mit den ASCII-Werten 0 bis 31 zu kodieren.</p>
-
-<p><code>btoa()</code> steht auch in JavaScript implementierten XPCOM-Komponenten zur Verfügung, auch wenn <a href="/en-US/docs/DOM/window" title="DOM/window"><code>window</code></a> in solchen Komponenten nicht das globale Objekt ist.</p>
-
-<h2 id="Unicode-Zeichenketten">Unicode-Zeichenketten</h2>
-
-<p>In den meisten Browsern verursacht ein Aufruf von <code>window.btoa()</code> mit einer Unicode-Zeichenkette eine "Character Out Of Range"-Exception ("Zeichen außerhalb des zulässigen Wertebereichs").</p>
-
-<p>Das kann mithilfe eines solchen Code-Schemas vermieden werden (beigesteuert von <a class="external" href="http://ecmanaut.blogspot.com/2006/07/encoding-decoding-utf8-in-javascript.html">Johan Sundström</a>):</p>
-
-<pre class="brush:js">function utf8_to_b64(str) {
-    return window.btoa(unescape(encodeURIComponent(str)));
-}
-
-function b64_to_utf8(str) {
-    return decodeURIComponent(escape(window.atob(str)));
-}
-
-// Usage:
-utf8_to_b64('✓ à la mode'); // JTI1dTI3MTMlMjUyMCUyNUUwJTI1MjBsYSUyNTIwbW9kZQ==
-b64_to_utf8('JTI1dTI3MTMlMjUyMCUyNUUwJTI1MjBsYSUyNTIwbW9kZQ=='); // "✓ à la mode"
-
-utf8_to_b64('I \u2661 Unicode!'); // SSUyNTIwJTI1dTI2NjElMjUyMFVuaWNvZGUlMjUyMQ==
-b64_to_utf8('SSUyNTIwJTI1dTI2NjElMjUyMFVuaWNvZGUlMjUyMQ=='); // "I ♡ Unicode!"
-
-</pre>
-
-<p>Eine günstigere, zuverlässigere und effizientere Lösung ist, <a href="/en-US/docs/Web/API/DOMString" title="/en-US/docs/Web/API/DOMString"><code>DOMString</code></a> zunächst in eine UTF-8-kodierte Zeichenkette zu konvertieren, die sich für <a href="/en-US/docs/Web/JavaScript/Typed_arrays" title="/en-US/docs/Web/JavaScript/Typed_arrays">typed arrays</a> eignet. Eine Anleitung bietet <strong><a href="/en-US/docs/Web/JavaScript/Base64_encoding_and_decoding#Solution_.232_.E2.80.93_rewriting_atob()_and_btoa()_using_TypedArrays_and_UTF-8" title="/en-US/docs/Web/JavaScript/Base64_encoding_and_decoding#Solution_.232_.E2.80.93_rewriting_atob()_and_btoa()_using_TypedArrays_and_UTF-8">dieser Abschnitt</a></strong>.</p>
-
-<h2 id="Specifications">Specifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Specification</th>
-   <th scope="col">Status</th>
-   <th scope="col">Comment</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', '#dom-windowbase64-btoa', 'WindowBase64.btoa()')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td>No change since the latest snapshot, {{SpecName("HTML5.1")}}.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5.1', '#dom-windowbase64-btoa', 'WindowBase64.btoa()')}}</td>
-   <td>{{Spec2('HTML5.1')}}</td>
-   <td>Snapshot of {{SpecName("HTML WHATWG")}}. No change.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName("HTML5 W3C", "#dom-windowbase64-btoa", "WindowBase64.btoa()")}}</td>
-   <td>{{Spec2('HTML5 W3C')}}</td>
-   <td>Snapshot of {{SpecName("HTML WHATWG")}}. Creation of <code>WindowBase64</code> (properties where on the target before it).</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility">Browser compatibility</h2>
-
-<div>{{CompatibilityTable}}</div>
-
-<div id="compat-desktop">
-<table class="compat-table">
- <tbody>
-  <tr>
-   <th>Feature</th>
-   <th>Chrome</th>
-   <th>Firefox (Gecko)</th>
-   <th>Internet Explorer</th>
-   <th>Opera</th>
-   <th>Safari (WebKit)</th>
-  </tr>
-  <tr>
-   <td>Basic support</td>
-   <td>{{CompatVersionUnknown}}</td>
-   <td>{{CompatGeckoDesktop(1)}}[1]</td>
-   <td>10</td>
-   <td>{{CompatVersionUnknown}}</td>
-   <td>{{CompatVersionUnknown}}</td>
-  </tr>
- </tbody>
-</table>
-</div>
-
-<div id="compat-mobile">
-<table class="compat-table">
- <tbody>
-  <tr>
-   <th>Feature</th>
-   <th>Android</th>
-   <th>Firefox Mobile (Gecko)</th>
-   <th>IE Mobile</th>
-   <th>Opera Mobile</th>
-   <th>Safari Mobile</th>
-  </tr>
-  <tr>
-   <td>Basic support</td>
-   <td>{{CompatVersionUnknown}}</td>
-   <td>{{CompatGeckoMobile(1)}}</td>
-   <td>{{CompatNo}}</td>
-   <td>{{CompatUnknown}}</td>
-   <td>{{CompatVersionUnknown}}</td>
-  </tr>
- </tbody>
-</table>
-</div>
-
-<p>[1] <code>btoa()</code> is also available to XPCOM components implemented in JavaScript, even though <code><a href="/en-US/docs/DOM/window">window</a></code> is not the global object in components.</p>
-
-<h2 id="See_also">See also</h2>
-
-<ul>
- <li><a href="/Web/API/WindowBase64/Base64_encoding_and_decoding">Base64 encoding and decoding</a></li>
- <li><a href="/en-US/docs/data_URIs"><code>data</code> URIs</a></li>
- <li>{{domxref("WindowBase64.atob","window.atob()")}}</li>
- <li><a href="/en-US/docs/Components.utils.importGlobalProperties">Components.utils.importGlobalProperties</a></li>
-</ul>
diff --git a/files/de/web/api/windoworworkerglobalscope/settimeout/index.html b/files/de/web/api/windoworworkerglobalscope/settimeout/index.html
deleted file mode 100644
index 3849d27e5b..0000000000
--- a/files/de/web/api/windoworworkerglobalscope/settimeout/index.html
+++ /dev/null
@@ -1,330 +0,0 @@
----
-title: WindowTimers.setTimeout()
-slug: Web/API/WindowOrWorkerGlobalScope/setTimeout
-translation_of: Web/API/WindowOrWorkerGlobalScope/setTimeout
-original_slug: Web/API/WindowTimers/setTimeout
----
-<div>{{APIRef("HTML DOM")}}</div>
-
-<p>Die Funktion <strong><code>setTimeout()</code></strong> der {{domxref("WindowOrWorkerGlobalScope")}}-Schnittstelle ruft nach der gegebenen Zeitspanne eine Funktion oder direkt angebenen Code auf.</p>
-
-<h2 id="Syntax" name="Syntax">Syntax</h2>
-
-<pre class="syntaxbox"><em>var timeoutID</em> = window.setTimeout(funktion, zeitspanne, [<em>parameter1</em>, <em>parameter2</em>, ...]);
-<em>var timeoutID</em> = window.setTimeout(<em>code</em>, zeitspanne);
-</pre>
-
-<p> </p>
-
-<h3 id="Parameter">Parameter</h3>
-
-<p> </p>
-
-<dl>
- <dt><code>funktion</code></dt>
- <dd>Die {{jsxref("function", "Funktion")}}, die nach <code>zeitspanne</code> Millisekunden ausgeführt werden soll.</dd>
- <dt><code>code</code></dt>
- <dd><code>code</code> in der alternativen Syntax ist eine Zeichenkette, die Code enthält, der nach <code>zeitspanne</code> Millisekunden ausgeführt werden soll.  <code>code</code> sollte aus den gleichen Gründen, die auch <a href="/en-US/docs/JavaScript/Reference/Global_Objects/eval#Don%27t_use_eval!" title="en-US/docs/Core JavaScript 1.5 Reference/Global Functions/Eval#Don't use eval!">eval()</a> zum Sicherheitsrisiko machen, <strong>nicht verwendet</strong> werden.</dd>
- <dt><code>zeitspanne</code> {{optional_inline}}</dt>
- <dd><code>zeitspanne</code> ist die Wartezeit in Millisekunden (ein Tausendstel einer Sekunde), nach der <code>funktion</code> bzw. <code>code</code> ausgeführt werden soll. Dieser Wert ist ein Mindestwert, die tatsächlich abgelaufene Zeit kann länger sein, siehe {{anch("Gründe für längere als gegebene Wartezeiten")}} weiter unten.</dd>
- <dt><code>parameter1, ..., parameterN</code> {{optional_inline}}</dt>
- <dd>Diese Parameter werden an die <code>funktion</code><em> </em>oder den <code>code</code> übergeben.</dd>
-</dl>
-
-<div class="note"><strong>Anmerkung:</strong> Der Internet Explorer unterstützt bis einschließlich Version 9 die Übergabe von zusätzlichen Parametern nicht.</div>
-
-<h3 id="Rückgabewert">Rückgabewert</h3>
-
-<p><code>setTimeout()</code> gibt eine ID zurück, die den eingerichteten Zeitgeber identifiziert; um die Wartezeit abzubrechen, kann sie an {{domxref("WindowOrWorkerGlobalScope.clearTimeout","clearTimeout()")}}  übergeben werden.</p>
-
-<p>Jede ID wird von <code>setTimeout()</code> und <code>setInterval()</code> nur einmalig je Objekt (window oder Worker) verwendet.</p>
-
-<h2 id="Examples" name="Examples">Beispiel</h2>
-
-<h3 id="HTML">HTML</h3>
-
-<pre class="brush: html line-numbers  language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span><span class="punctuation token">&gt;</span></span>Beispiel<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span>
-<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>button</span> <span class="attr-name token">onclick</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>delayedAlert();<span class="punctuation token">"</span></span><span class="punctuation token">&gt;Zeige nach zwei Sekunden einen Alarm.</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>button</span><span class="punctuation token">&gt;</span></span>
-<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span>
-<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>button</span> <span class="attr-name token">onclick</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>clearAlert();<span class="punctuation token">"</span></span><span class="punctuation token">&gt;Alarm</span></span> vorzeitig abbrechen.<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>button</span><span class="punctuation token">&gt;</span></span></code></pre>
-
-<h3 id="JavaScript">JavaScript</h3>
-
-<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> timeoutID<span class="punctuation token">;</span>
-
-<span class="keyword token">function</span> <span class="function token">delayedAlert</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
-  timeoutID <span class="operator token">=</span> window<span class="punctuation token">.</span><span class="function token">setTimeout</span><span class="punctuation token">(</span>slowAlert<span class="punctuation token">,</span> <span class="number token">2000</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
-<span class="punctuation token">}</span>
-
-<span class="keyword token">function</span> <span class="function token">slowAlert</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
-  <span class="function token">alert</span><span class="punctuation token">(</span><span class="string token">'Das hat gedauert!'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
-<span class="punctuation token">}</span>
-
-<span class="keyword token">function</span> <span class="function token">clearAlert</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
-  window<span class="punctuation token">.</span><span class="function token">clearTimeout</span><span class="punctuation token">(</span>timeoutID<span class="punctuation token">)</span><span class="punctuation token">;</span>
-<span class="punctuation token">}</span></code></pre>
-
-<h3 id="Ergebnis">Ergebnis</h3>
-
-<p>{{EmbedLiveSample('Example')}}</p>
-
-<p>Siehe auch <a href="/en-US/docs/DOM/window.clearTimeout#Example" title="en-US/docs/DOM/window.clearTimeout#Example"><code>clearTimeout()</code></a></p>
-
-<h2 id="Polyfill">Polyfill</h2>
-
-<p>Der nachfolgende Polyfill-Code ermöglicht es, der aufzurufenden Funktion auch im Internet Explorer Parameter zu übergeben:</p>
-
-<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="comment token">/*\
-|*|
-|*|  Polyfill which enables the passage of arbitrary arguments to the
-|*|  callback functions of JavaScript timers (HTML5 standard syntax).
-|*|
-|*|  https://developer.mozilla.org/en-US/docs/DOM/window.setInterval
-|*|
-|*|  Syntax:
-|*|  var timeoutID = window.setTimeout(func, delay[, param1, param2, ...]);
-|*|  var timeoutID = window.setTimeout(code, delay);
-|*|  var intervalID = window.setInterval(func, delay[, param1, param2, ...]);
-|*|  var intervalID = window.setInterval(code, delay);
-|*|
-\*/</span>
-
-<span class="punctuation token">(</span><span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
-  <span class="function token">setTimeout</span><span class="punctuation token">(</span><span class="keyword token">function</span><span class="punctuation token">(</span>arg1<span class="punctuation token">)</span> <span class="punctuation token">{</span>
-    <span class="keyword token">if</span> <span class="punctuation token">(</span>arg1 <span class="operator token">===</span> <span class="string token">'test'</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
-      <span class="comment token">// feature test is passed, no need for polyfill</span>
-      <span class="keyword token">return</span><span class="punctuation token">;</span>
-    <span class="punctuation token">}</span>
-    <span class="keyword token">var</span> __nativeST__ <span class="operator token">=</span> window<span class="punctuation token">.</span>setTimeout<span class="punctuation token">;</span>
-    window<span class="punctuation token">.</span>setTimeout <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>vCallback<span class="punctuation token">,</span> nDelay <span class="comment token">/*, argumentToPass1, argumentToPass2, etc. */</span> <span class="punctuation token">)</span> <span class="punctuation token">{</span>
-      <span class="keyword token">var</span> aArgs <span class="operator token">=</span> Array<span class="punctuation token">.</span>prototype<span class="punctuation token">.</span>slice<span class="punctuation token">.</span><span class="function token">call</span><span class="punctuation token">(</span>arguments<span class="punctuation token">,</span> <span class="number token">2</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
-      <span class="keyword token">return</span> <span class="function token">__nativeST__</span><span class="punctuation token">(</span>vCallback <span class="keyword token">instanceof</span> <span class="class-name token">Function</span> <span class="operator token">?</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
-        vCallback<span class="punctuation token">.</span><span class="function token">apply</span><span class="punctuation token">(</span><span class="keyword token">null</span><span class="punctuation token">,</span> aArgs<span class="punctuation token">)</span><span class="punctuation token">;</span>
-      <span class="punctuation token">}</span> <span class="punctuation token">:</span> vCallback<span class="punctuation token">,</span> nDelay<span class="punctuation token">)</span><span class="punctuation token">;</span>
-    <span class="punctuation token">}</span><span class="punctuation token">;</span>
-  <span class="punctuation token">}</span><span class="punctuation token">,</span> <span class="number token">0</span><span class="punctuation token">,</span> <span class="string token">'test'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
-
-  <span class="keyword token">var</span> interval <span class="operator token">=</span> <span class="function token">setInterval</span><span class="punctuation token">(</span><span class="keyword token">function</span><span class="punctuation token">(</span>arg1<span class="punctuation token">)</span> <span class="punctuation token">{</span>
-    <span class="function token">clearInterval</span><span class="punctuation token">(</span>interval<span class="punctuation token">)</span><span class="punctuation token">;</span>
-    <span class="keyword token">if</span> <span class="punctuation token">(</span>arg1 <span class="operator token">===</span> <span class="string token">'test'</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
-      <span class="comment token">// feature test is passed, no need for polyfill</span>
-      <span class="keyword token">return</span><span class="punctuation token">;</span>
-    <span class="punctuation token">}</span>
-    <span class="keyword token">var</span> __nativeSI__ <span class="operator token">=</span> window<span class="punctuation token">.</span>setInterval<span class="punctuation token">;</span>
-    window<span class="punctuation token">.</span>setInterval <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>vCallback<span class="punctuation token">,</span> nDelay <span class="comment token">/*, argumentToPass1, argumentToPass2, etc. */</span> <span class="punctuation token">)</span> <span class="punctuation token">{</span>
-      <span class="keyword token">var</span> aArgs <span class="operator token">=</span> Array<span class="punctuation token">.</span>prototype<span class="punctuation token">.</span>slice<span class="punctuation token">.</span><span class="function token">call</span><span class="punctuation token">(</span>arguments<span class="punctuation token">,</span> <span class="number token">2</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
-      <span class="keyword token">return</span> <span class="function token">__nativeSI__</span><span class="punctuation token">(</span>vCallback <span class="keyword token">instanceof</span> <span class="class-name token">Function</span> <span class="operator token">?</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
-        vCallback<span class="punctuation token">.</span><span class="function token">apply</span><span class="punctuation token">(</span><span class="keyword token">null</span><span class="punctuation token">,</span> aArgs<span class="punctuation token">)</span><span class="punctuation token">;</span>
-      <span class="punctuation token">}</span> <span class="punctuation token">:</span> vCallback<span class="punctuation token">,</span> nDelay<span class="punctuation token">)</span><span class="punctuation token">;</span>
-    <span class="punctuation token">}</span><span class="punctuation token">;</span>
-  <span class="punctuation token">}</span><span class="punctuation token">,</span> <span class="number token">0</span><span class="punctuation token">,</span> <span class="string token">'test'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
-<span class="punctuation token">}</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">)</span></code></pre>
-
-<p>Eine andere Möglichkeit ist, die Funktion innerhalb einer anonymen Funktion aufzurufen:</p>
-
-<pre class="brush: js">setTimeout(function() {
-    funktion("eins", "zwei", "drei");
-}, 1000);
-</pre>
-
-<p>Ebenfalls kann die Funktion <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind"><code>bind()</code></a> genutzt werden:</p>
-
-<p> </p>
-
-<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="function token">setTimeout</span><span class="punctuation token">(</span><span class="keyword token">function</span><span class="punctuation token">(</span>arg1, arg2, arg3<span class="punctuation token">)</span><span class="punctuation token">{</span><span class="punctuation token">}</span><span class="punctuation token">.</span><span class="function token">bind</span><span class="punctuation token">(</span>undefined<span class="punctuation token">,</span> "eins", "zwei", "drei"<span class="punctuation token">)</span><span class="punctuation token">,</span> <span class="number token">1000</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
-
-<p> </p>
-
-<h2 id="Das_this-Problem">Das "<code>this</code>"-Problem</h2>
-
-<p>In der an <code>setTimeout()</code> übergebenen Funktion wird <code>this</code> bei Aufruf einen falschen Wert enthalten. Dieses Problem wird detailliert in der <a href="/en-US/docs/JavaScript/Reference/Operators/this#Method_binding" title="en-US/docs/Core_JavaScript_1.5_Reference/Operators/Special_Operators/this_Operator#Method_binding">JavaScript-Referenz</a> beschrieben.</p>
-
-<h3 id="Erklärung">Erklärung</h3>
-
-<p>Von <code>setTimeout()</code> ausgeführter Code wird in einem anderen Kontext ausgeführt, als in dem <code>setTimeout()</code> aufgerufen wurde. <code>this</code> wird deshalb in der aufgerufenen Funktion <code>window</code> oder <code>global</code> entsprechen, nicht dem <code>this</code> des Bereichs, in dem  <code>setTimeout()</code> aufgerufen wurde. Beispiel:</p>
-
-<pre class="brush: js">myArray = ["null", "eins", "drei"];
-myArray.myMethod = function (sProperty) {
-    alert(arguments.length &gt; 0 ? this[sProperty] : this);
-};
-
-myArray.myMethod(); // Ausgabe: "null,eins,zwei"
-myArray.myMethod(1); // Ausgabe: "eins"
-setTimeout(myArray.myMethod, 1000); // Ausgabe: "[object Window]" nach 1 Sekunde
-setTimeout(myArray.myMethod, 1500, "1"); // Ausgabe: "undefined" nach 1,5 Sekunden
-// Versuchen wir, 'this' zu übergeben
-setTimeout.call(myArray, myArray.myMethod, 2000); // Fehler: "NS_ERROR_XPC_BAD_OP_ON_WN_PROTO: Illegal operation on WrappedNative prototype object"
-setTimeout.call(myArray, myArray.myMethod, 2500, 2); // Der gleiche Fehler</pre>
-
-<p>Es gibt hier keine Möglichkeit, <code>this</code> an die aufzurufende Funktion durchzureichen.</p>
-
-<h3 id="Eine_Lösungsmöglichkeit">Eine Lösungsmöglichkeit</h3>
-
-<p>Eine Möglichkeit, das Problem zu umgehen, ist es, die beiden eingebauten Funktionen <code>setTimeout()</code> und <code>setInterval()</code> durch zwei eigene zu ersetzen, die sich <a href="en-US/docs/JavaScript/Reference/Global_Objects/Function/call" title="en-US/docs/JavaScript/Reference/Global_Objects/Function/call"><code>Function.prototype.call</code></a> bedienen:</p>
-
-<pre class="brush: js">// Enable the passage of the 'this' object through the JavaScript timers
-
-var __nativeST__ = window.setTimeout, __nativeSI__ = window.setInterval;
-
-window.setTimeout = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) {
-  var oThis = this, aArgs = Array.prototype.slice.call(arguments, 2);
-  return __nativeST__(vCallback instanceof Function ? function () {
-    vCallback.apply(oThis, aArgs);
-  } : vCallback, nDelay);
-};
-
-window.setInterval = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) {
-  var oThis = this, aArgs = Array.prototype.slice.call(arguments, 2);
-  return __nativeSI__(vCallback instanceof Function ? function () {
-    vCallback.apply(oThis, aArgs);
-  } : vCallback, nDelay);
-};</pre>
-
-<div class="note"><strong>Hinweis:</strong> Diese beiden Ersatzfunktionen ermöglichen es auch, im Internet Explorer Parameter an die aufzurufende Funktion zu übergeben, wie es HTML5 vorsieht. Sie können daher auch als {{anch("Polyfill")}} benutzt werden.</div>
-
-<h2 id="Anmerkungen">Anmerkungen</h2>
-
-<p>Eine Wartezeit kann mit <code><a href="/en-US/docs/DOM/window.clearTimeout" title="en-US/docs/DOM/window.clearTimeout">window.clearTimeout()</a></code> abgebrochen werden.</p>
-
-<p>Soll eine Funktion wiederholt alle n Millisekunden aufgerufen werden, ist <code><a href="/en-US/docs/DOM/window.setInterval" title="en-US/docs/DOM/window.setInterval">window.setInterval()</a></code> die bessere Wahl.</p>
-
-<h3 id="Passing_string_literals">Passing string literals</h3>
-
-<p>Passing a string instead of a function to <code>setTimeout()</code> suffers from the same hazards as using <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/eval#Don.27t_use_eval.21" title="https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/eval">eval</a>. </code></p>
-
-<pre class="brush: js">// Correct
-window.setTimeout(function() {
-    alert("Hello World!");
-}, 500);
-
-// Incorrect
-window.setTimeout("alert(\"Hello World!\");", 500);
-
-</pre>
-
-<p>String literals are evaluated in the global context, so local symbols in the context where <code>setTimeout()</code> was called will not be available when the string is evaluated as code.</p>
-
-<h3 id="Gründe_für_längere_als_gegebene_Wartezeiten">Gründe für längere als gegebene Wartezeiten</h3>
-
-<p>Aus verschiedenen Gründen kann die tatsächliche Zeit bis zum Aufruf der Funktion länger sein als mit setTimeout() angegeben wurde. Dieser Abschnitt beschreibt die beiden häufigsten.</p>
-
-<h4 id="Wartezeiten_betragen_4ms_oder_mehr">Wartezeiten betragen 4ms oder mehr</h4>
-
-<p>Um das System nicht zu überlasten, begrenzen moderne Browser die Häufigkeit der von setTimeout() und setInterval() ausgelösten Ereignisse ab einer bestimmten Aufruftiefe oder -häufigkeit. Beispiel:</p>
-
-<pre class="brush: js line-numbers  language-js" id="ct-0"><code class="language-js"><span class="keyword token">function</span> <span class="function token">cb</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> <span class="function token">f</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="function token">setTimeout</span><span class="punctuation token">(</span>cb<span class="punctuation token">,</span> <span class="number token">0</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="punctuation token">}</span>
-<span class="function token">setTimeout</span><span class="punctuation token">(</span>cb<span class="punctuation token">,</span> <span class="number token">0</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
-
-<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="function token">setInterval</span><span class="punctuation token">(</span>f<span class="punctuation token">,</span> <span class="number token">0</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
-
-<p>Chrome und Firefox drosseln nach dem fünften Aufruf, Safari nach dem sechsten, Edge bereits nach dem dritten.</p>
-
-<p>Eine Wartezeit von 0 ms kann mit {{domxref("window.postMessage()")}} erreicht werden, wie <a class="external external-icon" href="http://dbaron.org/log/20100309-faster-timeouts">hier beschrieben</a>.</p>
-
-<p> </p>
-
-<div class="note">
-<p><strong>Hinweis</strong>: Die Mindestwartezeit, <code>DOM_MIN_TIMEOUT_VALUE</code>, beträgt 4 ms (Firefox-Einstellung <code>dom.min_timeout_value</code>), die Verschachtelungstiefe <code>DOM_CLAMP_TIMEOUT_NESTING_LEVEL</code> beträgt 5.</p>
-</div>
-
-<div class="note">
-<p><strong>Hinweis</strong>: Der Wert 4 ms wurde mit <a class="external external-icon" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/timers.html#timers">HTML5 festgelegt</a> und wird von allen Browsern umgesetzt, die nach 2010 erschienen sind. Vor {{geckoRelease("5.0")}} war der Mindestwert 10 ms.</p>
-</div>
-
-<p> </p>
-
-<p> </p>
-
-<h4 id="Wartezeiten_in_inaktiven_Tabs_größer_als_1s">Wartezeiten in inaktiven Tabs  größer als 1s</h4>
-
-<p>Um die Last noch weiter zu verringern, beträgt die Mindestwartezeit in sich im Hintergrund befindlichen Tabs grundsätzlich mindestens 1 s.</p>
-
-<p>Firefox setzt diese Beschränkung seit Version 5 um (siehe {{bug(633421)}}). Der Wert von 1000 ms kann in der Einstellungen <span class="comment-copy"><code>dom.min_background_timeout_value</code> geändert werden.</span><br>
- Chrome setzt diese Beschränkung seit Version 11 um (<a class="external external-icon" href="http://crbug.com/66078">crbug.com/66078</a>).</p>
-
-<p>Bei Firefox für Android beträgt seit Version 14 die Mindestwartezeit in sich im Hintergrund befindlichen Tabs 15 Minuten (siehe {{bug(736602)}}). Jegliche Aktivität in diesen Tabs kann auch vollständig angehalten werden.</p>
-
-<div class="note">
-<p>Seit Version 50 gelten in Firefox keine Beschränkungen mehr, falls sich die Web Audio API {{domxref("AudioContext")}} im Wiedergabemodus befindet. Seit Firefox 51 gilt dies bereits für jegliche Dokumente mit einem {{domxref("AudioContext")}}, unabhängig von dessen Status.<br>
- Apps, die Musik Note für Note abspielen, konnten wegen der Beschränkungen den Takt nicht halten, sobald sie in den Hintergrund gelegt wurden.</p>
-</div>
-
-<h4 id="Lastbedingte_Verzögerungen">Lastbedingte Verzögerungen</h4>
-
-<p>Zusätzlich zum aktiven Drosseln kann es zu verlängerten Wartezeiten kommen, falls das Dokument, der Browser oder das Betriebssystem anderweitig beschäftigt sind. Ein wichtiger Punkt in diesem Zusammenhang ist, dass die aufzurufende Funktion nicht ausgeführt werden kann, solange der Thread, der <code>setTimeout()</code> aufgerufen hat, noch aktiv ist:</p>
-
-<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">function</span> bla<span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
-  console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="string token">'bla wurde aufgerufen'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
-<span class="punctuation token">}</span>
-<span class="function token">setTimeout</span><span class="punctuation token">(</span>bla<span class="punctuation token">,</span> <span class="number token">0</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
-console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="string token">'hinter setTimeout'</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
-
-<p>Ergebnis:</p>
-
-<pre class="brush: js line-numbers  language-js"><code class="language-js">hinter setTimeout
-bla wurde aufgerufen</code></pre>
-
-<p>Obwohl <code>setTimeout</code> die sofortige Ausführung angewiesen wurde, wird der Aufruf von bla() in einer Warteschlange bis zur nächsten Gelegenheit zurückgestellt. Erst wenn der aktuell laufende Code ausgeführt wurde, werden die in der Warteschlange gesammelten Aufrufe abgearbeitet. In der Folge ist der Programmablauf nicht, wie eventuell erwartet.</p>
-
-<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
-
-<p>{{ CompatibilityTable() }}</p>
-
-<div id="compat-desktop">
-<table class="compat-table">
- <tbody>
-  <tr>
-   <th>Eigenschaft</th>
-   <th>Chrome</th>
-   <th>Firefox (Gecko)</th>
-   <th>Internet Explorer</th>
-   <th>Opera</th>
-   <th>Safari</th>
-  </tr>
-  <tr>
-   <td>Basis</td>
-   <td>1.0</td>
-   <td>{{ CompatGeckoDesktop("1") }}</td>
-   <td>4.0</td>
-   <td>4.0</td>
-   <td>1.0</td>
-  </tr>
- </tbody>
-</table>
-</div>
-
-<div id="compat-mobile">
-<table class="compat-table">
- <tbody>
-  <tr>
-   <th>Eigenschaft</th>
-   <th>Android</th>
-   <th>Chrome for Android</th>
-   <th>Firefox Mobile (Gecko)</th>
-   <th>IE Mobile</th>
-   <th>Opera Mobile</th>
-   <th>Safari Mobile</th>
-  </tr>
-  <tr>
-   <td>Basic</td>
-   <td>1.0</td>
-   <td>1.0</td>
-   <td>{{ CompatGeckoMobile("1") }}</td>
-   <td>6.0</td>
-   <td>6.0</td>
-   <td>1.0</td>
-  </tr>
- </tbody>
-</table>
-</div>
-
-<h2 id="Specification" name="Specification">Spezifikation</h2>
-
-<p>Gehört zu DOM-Level 0, wie spezifiziert in <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/browsers.html#timers">HTML5</a>.</p>
-
-<h2 id="See_also" name="See_also">Siehe auch</h2>
-
-<ul>
- <li>{{domxref("window.setInterval")}}</li>
- <li>{{domxref("window.requestAnimationFrame")}}</li>
-</ul>
diff --git a/files/de/web/css/css_background_and_borders/border-image_generator/index.html b/files/de/web/css/css_background_and_borders/border-image_generator/index.html
deleted file mode 100644
index 7e223feb3d..0000000000
--- a/files/de/web/css/css_background_and_borders/border-image_generator/index.html
+++ /dev/null
@@ -1,2626 +0,0 @@
----
-title: Border-image Generator
-slug: Web/CSS/CSS_Background_and_Borders/Border-image_generator
-tags:
-  - CSS
-  - Werkzeuge
-translation_of: Web/CSS/CSS_Background_and_Borders/Border-image_generator
----
-<p>Dieses Werkzeug kann dazu verwendet werden, CSS3 {{cssxref("border-image")}} Werte zu erzeugen.</p>
-
-<div class="hidden">
-<h2 id="Border_Image_Generator" name="Border_Image_Generator">Border Image Generator</h2>
-
-<h3 id="HTML_Content">HTML Content</h3>
-
-<pre class="brush: html">    &lt;div id="container"&gt;
-
-        &lt;div id="gallery"&gt;
-            &lt;div id="image-gallery"&gt;
-                &lt;img class="image" src="https://mdn.mozillademos.org/files/6007/border-image-1.png" data-stateID="border1"/&gt;
-                &lt;img class="image" src="https://mdn.mozillademos.org/files/6009/border-image-2.png" data-stateID="border2"/&gt;
-                &lt;img class="image" src="https://mdn.mozillademos.org/files/6011/border-image-3.png" data-stateID="border3"/&gt;
-                &lt;img class="image" src="https://mdn.mozillademos.org/files/6013/border-image-4.png" data-stateID="border4"/&gt;
-                &lt;img class="image" src="https://mdn.mozillademos.org/files/6015/border-image-5.png" data-stateID="border5"/&gt;
-                &lt;img class="image" src="https://mdn.mozillademos.org/files/6017/border-image-6.svg" data-stateID="border6"/&gt;
-            &lt;/div&gt;
-        &lt;/div&gt;
-
-        &lt;div id="load-actions" class="group section"&gt;
-            &lt;div id="toggle-gallery" data-action="hide"&gt; &lt;/div&gt;
-            &lt;div id="load-image" class="button"&gt; Upload image &lt;/div&gt;
-            &lt;input id="remote-url" type="text" placeholder="Load an image from URL"/&gt;
-            &lt;div id="load-remote" class="button"&gt; &lt;/div&gt;
-        &lt;/div&gt;
-
-        &lt;div id="general-controls" class="group section"&gt;
-            &lt;div class="name"&gt; Control Box &lt;/div&gt;
-            &lt;div class="separator"&gt;&lt;/div&gt;
-            &lt;div class="property"&gt;
-                &lt;div class="name"&gt;scale&lt;/div&gt;
-                &lt;div class="ui-input-slider" data-topic="scale"
-                    data-unit="%" data-max="300" data-sensivity="10"&gt;
-                &lt;/div&gt;
-            &lt;/div&gt;
-            &lt;div class="separator"&gt;&lt;/div&gt;
-            &lt;div class="property"&gt;
-                &lt;div class="name"&gt;draggable&lt;/div&gt;
-                &lt;div class="ui-checkbox" data-topic='drag-subject'&gt;&lt;/div&gt;
-            &lt;/div&gt;
-            &lt;div class="property right"&gt;
-                &lt;div class="name"&gt;section height&lt;/div&gt;
-                &lt;div class="ui-input-slider" data-topic="preview-area-height"
-                    data-min="400" data-max="1000"&gt;
-                &lt;/div&gt;
-            &lt;/div&gt;
-        &lt;/div&gt;
-
-        &lt;div id="preview_section" class="group section"&gt;
-            &lt;div id="subject"&gt;
-                &lt;div class="guideline" data-axis="Y" data-topic="slice-top"&gt;&lt;/div&gt;
-                &lt;div class="guideline" data-axis="X" data-topic="slice-right"&gt;&lt;/div&gt;
-                &lt;div class="guideline" data-axis="Y" data-topic="slice-bottom"&gt;&lt;/div&gt;
-                &lt;div class="guideline" data-axis="X" data-topic="slice-left"&gt;&lt;/div&gt;
-            &lt;/div&gt;
-            &lt;div id="preview"&gt; &lt;/div&gt;
-        &lt;/div&gt;
-
-        &lt;!-- controls --&gt;
-        &lt;div id="controls" class="group section"&gt;
-
-            &lt;!-- border-image-slice --&gt;
-            &lt;div id="border-slice-control" class="category"&gt;
-                &lt;div class="title"&gt; border-image-slice &lt;/div&gt;
-                &lt;div class="property"&gt;
-                    &lt;div class="name"&gt;fill&lt;/div&gt;
-                    &lt;div class="ui-checkbox" data-topic='slice-fill'&gt;&lt;/div&gt;
-                &lt;/div&gt;
-            &lt;/div&gt;
-
-            &lt;!-- border-image-width --&gt;
-            &lt;div id="border-width-control" class="category"&gt;
-                &lt;div class="title"&gt; border-image-width &lt;/div&gt;
-            &lt;/div&gt;
-
-            &lt;!-- border-image-outset --&gt;
-            &lt;div id="border-outset-control" class="category"&gt;
-                &lt;div class="title"&gt; border-image-outset &lt;/div&gt;
-            &lt;/div&gt;
-
-            &lt;!-- other-settings --&gt;
-            &lt;div id="aditional-properties" class="category"&gt;
-                &lt;div class="title"&gt; aditional-properties &lt;/div&gt;
-                &lt;div class="property"&gt;
-                    &lt;div class="name"&gt; repeat-x &lt;/div&gt;
-                    &lt;div class="ui-dropdown border-repeat" data-topic="image-repeat-X" data-selected="2"&gt;
-                        &lt;div data-value="0"&gt;repeat&lt;/div&gt;
-                        &lt;div data-value="0"&gt;stretch&lt;/div&gt;
-                        &lt;div data-value="0"&gt;round&lt;/div&gt;
-                    &lt;/div&gt;
-                &lt;/div&gt;
-                &lt;div class="property"&gt;
-                    &lt;div class="name"&gt; repeat-y &lt;/div&gt;
-                    &lt;div class="ui-dropdown border-repeat" data-topic="image-repeat-Y" data-selected="2"&gt;
-                        &lt;div data-value="1"&gt;repeat&lt;/div&gt;
-                        &lt;div data-value="1"&gt;stretch&lt;/div&gt;
-                        &lt;div data-value="1"&gt;round&lt;/div&gt;
-                    &lt;/div&gt;
-                &lt;/div&gt;
-                &lt;div class="property"&gt;
-                    &lt;div class="ui-input-slider" data-topic="font-size" data-info="em size"
-                        data-unit="px" data-value="12" data-sensivity="3"&gt;
-                    &lt;/div&gt;
-                &lt;/div&gt;
-
-                &lt;div class="property"&gt;
-                    &lt;div class="ui-input-slider" data-topic="preview-width" data-info="width"
-                         data-unit=" px" data-min="10" data-max="10000" data-sensivity="3"&gt;&lt;/div&gt;
-                &lt;/div&gt;
-                &lt;div class="property"&gt;
-                    &lt;div class="ui-input-slider" data-topic="preview-height" data-info="height"
-                        data-unit=" px" data-min="10" data-max="10000" data-sensivity="3"&gt;
-                    &lt;/div&gt;
-                &lt;/div&gt;
-            &lt;/div&gt;
-
-
-            &lt;div id="output" class="category"&gt;
-                &lt;div class="title"&gt; CSS Code &lt;/div&gt;
-                &lt;div class="css-property"&gt;
-                    &lt;span class="name"&gt; border-image-slice: &lt;/span&gt;
-                    &lt;span id="out-border-slice" class="value"&gt; &lt;/span&gt;
-                &lt;/div&gt;
-                &lt;div class="css-property"&gt;
-                    &lt;span class="name"&gt; border-image-width: &lt;/span&gt;
-                    &lt;span id="out-border-width" class="value"&gt; &lt;/span&gt;
-                &lt;/div&gt;
-                &lt;div class="css-property"&gt;
-                    &lt;span class="name"&gt; border-image-outset: &lt;/span&gt;
-                    &lt;span id="out-border-outset" class="value"&gt; &lt;/span&gt;
-                &lt;/div&gt;
-                &lt;div class="css-property"&gt;
-                    &lt;span class="name"&gt; border-image-repeat: &lt;/span&gt;
-                    &lt;span id="out-border-repeat" class="value"&gt; &lt;/span&gt;
-                &lt;/div&gt;
-                &lt;div class="css-property"&gt;
-                    &lt;span class="name"&gt; border-image-source: &lt;/span&gt;
-                    &lt;span id="out-border-source" class="value"&gt;  &lt;/span&gt;
-                &lt;/div&gt;
-            &lt;/div&gt;
-
-        &lt;/div&gt;
-    &lt;/div&gt;</pre>
-
-<h3 id="CSS_Content">CSS Content</h3>
-
-<pre class="brush: css">/*  GRID OF TWELVE
- * ========================================================================== */
-
-.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 {
-	height: 20px;
-	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
-	-moz-user-select: none;
-	user-select: none;
-}
-
-.ui-input-slider * {
-	float: left;
-	height: 100%;
-	line-height: 100%;
-}
-
-/* Input Slider */
-
-.ui-input-slider &gt; 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 DropDown
- */
-
-/* Dropdown */
-
-.ui-dropdown {
-	height: 2em;
-	width: 120px;
-	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
-	font-size: 12px;
-
-	background-image: url("https://mdn.mozillademos.org/files/6037/drop_arrow_icon.png");
-	background-position: right center;
-	background-repeat: no-repeat;
-	background-color: #359740;
-
-	position: relative;
-
-	-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;
-}
-
-.ui-dropdown:hover {
-	cursor: pointer;
-	background-color: #208B20;
-}
-
-/* Dropdown Select Button */
-
-.ui-dropdown-select {
-	height: inherit;
-	padding: 0 0.75em;
-	color: #FFF;
-	line-height: 2em;
-}
-
-/* Dropdown List */
-
-.ui-dropdown-list {
-	width: 100%;
-	height: 150px;
-	max-height: 150px;
-	margin: 0;
-	padding: 0 0.3em;
-
-	border: 3px solid #3490D2;
-	border-color: #208B20;
-	background: #666;
-	background-color: #EEF1F5;
-	color: #000;
-
-	position: absolute;
-	top: 2em;
-	left: 0;
-	z-index: 100;
-
-	overflow: hidden;
-	transition: all 0.3s;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-}
-
-.ui-dropdown-list:hover {
-	overflow: auto;
-}
-
-.ui-dropdown-list[data-hidden='true'] {
-	height: 0 !important;
-	opacity: 0;
-	visibility: hidden;
-}
-
-.ui-dropdown[data-position='left'] .ui-dropdown-list {
-	left: -100%;
-	top: 0;
-}
-
-.ui-dropdown[data-position='right'] .ui-dropdown-list {
-	left: 100%;
-	top: 0;
-}
-
-.ui-dropdown-list &gt; div {
-	width: 100%;
-	height: 1.6em;
-	margin: 0.3em 0;
-	padding: 0.3em;
-	line-height: 1em;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-}
-
-.ui-dropdown-list &gt; div:hover {
-	background: #3490D2;
-	color:#FFF;
-	border-radius: 2px;
-	cursor: pointer;
-}
-
-
-/*************************************************************************************/
-/*************************************************************************************/
-
-/*
- * UI Button
- */
-
-/* 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 &gt; input {
- 	display: none;
-}
-
-.ui-checkbox &gt; 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: 2px;
-	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 &gt; label:hover {
-	cursor: pointer;
-}
-
-.ui-checkbox &gt; input:checked + label {
-	background-image: url("https://mdn.mozillademos.org/files/5681/checked.png");
-	background-color: #379B4A;
-}
-
-/*************************************************************************************/
-/*************************************************************************************/
-
-/*
- * BORDER IMAGE GENERATOR TOOL
- */
-
-body {
-	width: 100%;
-	margin: 0 auto;
-	padding: 0 0 20px 0;
-
-	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
-
-	/*background: url("https://mdn.mozillademos.org/files/6025/grain.png");*/
-	border: 1px solid #EEE;
-
-	-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;
-}
-
-body[data-move='X'] {
-	cursor: w-resize !important;
-}
-
-body[data-move='Y'] {
-	cursor: s-resize !important;
-}
-
-#container {
-	width: 100%;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-}
-
-[data-draggable='true']:hover {
-	cursor: move;
-}
-
-[data-draggable='true']:hover &gt; * {
-	cursor: default;
-}
-
-
-
-/******************************************************************************/
-/******************************************************************************/
-
-/*
- * Border Image Picker
- */
-
-#gallery {
-	box-shadow: 0 0 3px 0 #BABABA;
-}
-
-#image-gallery {
-	width: 600px;
-	height: 100px;
-	margin: 0 auto;
-	transition: margin 0.4s;
-}
-
-#image-gallery .image {
-	height: 80px;
-	float: left;
-	margin: 10px;
-	opacity: 0.5;
-	background-color: #FFF;
-	box-shadow: 0px 0px 3px 1px #BABABA;
-}
-
-#image-gallery .image[selected="true"] {
-	box-shadow: 0px 0px 3px 1px #3BBA52;
-	opacity: 1;
-}
-
-#image-gallery .image:hover {
-	cursor: pointer;
-	box-shadow: 0px 0px 3px 1px #30ACE5;
-	opacity: 1;
-}
-
-#image-gallery[data-collapsed='true'] {
-	margin-top: -100px;
-}
-
-/* Load Menu */
-
-#load-actions {
-	margin: 10px 0;
-}
-
-#toggle-gallery {
-	width: 30px;
-	height: 25px;
-	margin: 10px;
-	color: #FFF;
-
-	background-image: url('https://mdn.mozillademos.org/files/6005/arrow-up-white.png');
-	background-repeat: no-repeat;
-	background-position: top 4px center;
-	background-color: #888888 !important;
-
-	border-radius: 2px;
-	float: left;
-}
-
-#toggle-gallery:hover {
-	cursor: pointer;
-}
-
-#toggle-gallery[data-action='show'] {
-	background-image: url('https://mdn.mozillademos.org/files/6001/arrow-down-white.png');
-	background-color: #888888 !important;
-}
-
-#toggle-gallery[data-action='hide'] {
-	background-image: url('https://mdn.mozillademos.org/files/6005/arrow-up-white.png');
-}
-
-.button {
-	width: 100px;
-	height: 25px;
-	margin: 10px;
-	color: #FFF;
-	text-align: center;
-	font-size: 12px;
-	line-height: 25px;
-	background-color: #379B4A;
-	border-radius: 2px;
-	float: left;
-}
-
-.button:hover {
-	cursor: pointer;
-	background-color: #3380C4;
-}
-
-#load-image {
-	float: left;
-}
-
-#load-remote {
-	width: 30px;
-	background-image: url('https://mdn.mozillademos.org/files/6003/arrow-right-white.png');
-	background-repeat: no-repeat;
-	background-position: center center;
-}
-
-#remote-url {
-	width: 200px;
-	height: 23px;
-	margin: 10px;
-	padding: 0 5px;
-	border: 1px solid #379B4A;
-	border-radius: 2px;
-	float: left;
-
-	transition: width 0.5s;
-}
-
-#remote-url:focus {
-	box-shadow: 0px 0px 3px -1px #379B4A; /*#68ACE8; */
-	border-color: rgba(55, 155, 74, 0.5);
-	width: 450px;
-}
-
-/*
- * Visible Area
- */
-
-#preview_section {
-	position: relative;
-	min-height: 400px;
-}
-
-/* Image Control */
-
-#subject {
-	width: 300px;
-	height: 300px;
-	background-repeat: no-repeat;
-	background-size: 100%;
-	background-color: #FFF;
-	border: 1px solid #CCC;
-
-	position: absolute;
-	z-index: 10;
-	top: 15%;
-	left: 10%;
-
-	box-shadow: 0 0 3px 0 #BABABA;
-	transition-property: width, height;
-	transition-duration: 0.1s;
-}
-
-#subject .guideline {
-	background-color: rgba(255, 255, 255, 0.7);
-	border: 1px solid rgba(0, 0, 0, 0.3);
-	position: absolute;
-}
-
-#subject .guideline:hover {
-	background-color: #F00;
-}
-
-#subject .guideline[data-active] {
-	background-color: #F00;
-	z-index: 10;
-}
-
-#subject .guideline[data-axis='X'] {
-	width: 1px;
-	height: 100%;
-	top: -1px;
-}
-
-#subject .guideline[data-axis='Y'] {
-	width: 100%;
-	height: 1px;
-	left: -1px;
-}
-
-#subject .guideline[data-axis='X']:hover {
-	cursor: w-resize;
-}
-
-#subject .guideline[data-axis='Y']:hover {
-	cursor: s-resize;
-}
-
-
-#subject .relative {
-	position: relative;
-	font-size: 12px;
-}
-
-#subject .tooltip, #subject .tooltip2 {
-	width: 40px;
-	height: 20px;
-	line-height: 20px;
-	font-size: 12px;
-	text-align: center;
-
-	position: absolute;
-	opacity: 0.5;
-	transition: opacity 0.25s;
-}
-
-#subject .tooltip {
-	background: #EEE;
-	border-radius: 2px;
-	border: 1px solid #CCC;
-}
-
-#subject .tooltip2{
-	color: #555;
-}
-
-#subject [data-active] &gt; * {
-	opacity: 1;
-}
-
-#subject .tooltip[data-info='top'] {
-	top: -10px;
-	right: -50px;
-}
-
-#subject .tooltip[data-info='right'] {
-	bottom: -30px;
-	right: -20px;
-}
-
-#subject .tooltip[data-info='bottom'] {
-	top: -10px;
-	left: -50px;
-}
-
-#subject .tooltip[data-info='left'] {
-	top: -30px;
-	right: -20px;
-}
-
-#subject .tooltip2[data-info='top'] {
-	top: -10px;
-	left: -50px;
-}
-
-#subject .tooltip2[data-info='right'] {
-	top: -30px;
-	right: -20px;
-}
-
-#subject .tooltip2[data-info='bottom'] {
-	top: -10px;
-	right: -50px;
-}
-
-#subject .tooltip2[data-info='left'] {
-	bottom: -30px;
-	right: -20px;
-}
-
-/* Preview */
-
-#preview {
-	width: 30%;
-	height: 50%;
-	background-color: #FFF;
-	text-align: center;
-	overflow: hidden;
-	position: absolute;
-	z-index: 10;
-
-	left: 60%;
-	top: 15%;
-
-	border-radius: 2px;
-	border-image-width: 20px;
-	border-image-repeat: round;
-	box-shadow: 0 0 3px 0 #BABABA;
-}
-
-#preview .resize-handle {
-	width: 10px;
-	height: 10px;
-	background: url("https://mdn.mozillademos.org/files/6027/resize.png") center center no-repeat;
-	position: absolute;
-	bottom: 0;
-	right: 0;
-}
-
-#preview .resize-handle:hover {
-	cursor: nw-resize;
-}
-
-
-/*
- * General controls MENU
- */
-
-#general-controls {
-	padding: 10px 30px;
-	background-color: #FFF;
-	opacity: 0.95;
-	color: #888;
-	/*border-radius: 2px;*/
-	box-shadow: 0 0 3px 0 #BABABA;
-}
-
-#general-controls .property {
-	width: 130px;
-	float: left;
-}
-
-#general-controls .name {
-	height: 20px;
-	margin: 0 10px 0 0;
-	line-height: 100%;
-	text-align: right;
-	float: left;
-}
-
-#general-controls .right {
-	width: 200px;
-	float: right;
-}
-
-#general-controls .ui-checkbox label {
-	height: 10px;
-}
-
-#general-controls .separator {
-	height: 40px;
-	width: 1px;
-	margin: -10px 15px;
-	background-color: #EEE;
-	float: left;
-}
-
-/*
- * Controls
- */
-
-#controls {
-	color: #444;
-	margin: 10px 0 0 0;
-}
-
-#controls .category {
-	height: 190px;
-	min-width: 260px;
-	margin: 10px;
-	padding: 10px;
-	border: 1px solid #CCC;
-	border-radius: 3px;
-	float: left;
-
-	box-shadow: 0 0 3px 0 #BABABA;
-	transition: all 0.25s;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-}
-
-@media (min-width: 880px) {
-	#controls .category {
-		width: 30%;
-		margin-left: 1.66%;
-		margin-right: 1.66%;
-	}
-}
-
-@media (max-width: 879px) {
-	#controls .category {
-		width: 37%;
-		margin-left: 6.5%;
-		margin-right: 6.5%;
-	}
-}
-
-#controls .category .title {
-	width: 100%;
-	height: 30px;
-	margin: 0 0 10px 0;
-	line-height: 25px;
-
-	text-align: center;
-	color: #AAA;
-}
-
-#controls .category:hover .title {
-	color: #777;
-}
-
-#controls .category &gt; .group {
-	border: 1px solid #CCC;
-	border-radius: 2px;
-}
-
-
-/* property */
-
-#controls .property {
-	width: 250px;
-	height: 20px;
-	margin: 5px auto;
-}
-
-#controls .property .ui-input-slider {
-	margin: 0;
-	float: left;
-}
-
-#controls .property .ui-input-slider-info {
-	width: 60px;
-}
-
-#controls .property .ui-input-slider-left {
-	transition: opacity 0.15s;
-    opacity: 0;
-}
-
-#controls .property .ui-input-slider-right {
-	transition: opacity 0.15s;
-    opacity: 0;
-}
-
-#controls .property .name {
-	width: 60px;
-	height: 20px;
-	padding: 0px 10px 0px 0px;
-	text-align: right;
-	line-height: 100%;
-	float: left;
-}
-
-#controls .property .config {
-	width: 20px;
-	height: 20px;
-	float: left;
-	background: url("https://mdn.mozillademos.org/files/6021/config.png") center center no-repeat;
-	opacity: 0.5;
-}
-
-#controls .property .config:hover {
-	cursor: pointer;
-	opacity: 1;
-}
-
-#controls .ui-input-slider:hover .ui-input-slider-right {
-    opacity: 1;
-}
-
-#controls .ui-input-slider:hover .ui-input-slider-left {
-    opacity: 1;
-}
-
-#controls .property .ui-dropdown {
-	margin: 0 10px;
-	float: left;
-}
-
-
-#controls .property .ui-checkbox {
-	margin: 0 0 0 16px;
-	float: left;
-}
-
-#controls .property .ui-checkbox label {
-	height: 0.85em;
-	width: 10px;
-}
-
-/* dropdowns */
-#controls .ui-dropdown {
-	width: 50px;
-	height: 1.7em;
-	border-radius: 2px;
-}
-
-#controls .ui-dropdown-select {
-	line-height: 1.6em;
-}
-
-#controls .ui-dropdown-list {
-	top: 20px;
-}
-
-#controls .ui-dropdown-list {
-	border-width: 1px;
-	text-align: center;
-}
-
-#controls .ui-dropdown-list:hover {
-	overflow: hidden;
-}
-
-#controls .border-repeat {
-	margin: 0 0 0 16px !important;
-	width: 80px;
-}
-
-#controls .border-repeat .ui-dropdown-list {
-	height: 6.2em;
-	border-width: 1px;
-	text-align: center;
-}
-
-/* border-image-slice */
-
-
-#border-slice-control .ui-dropdown-list {
-	height: 4.3em;
-}
-
-/* border-image-width */
-
-#border-width-control .ui-dropdown-list {
-	height: 6.2em;
-}
-
-/* border-image-outset */
-
-#border-outset-control .ui-dropdown-list {
-	height: 4.3em;
-}
-
-#aditional-properties .property {
-	width: 200px;
-}
-
-#aditional-properties .ui-input-slider &gt; input {
-	width: 80px !important;
-}
-
-/* unit settings panel */
-
-#unit-settings {
-	padding: 10px;
-	position: absolute;
-
-	background: #FFF;
-
-	font-size: 12px;
-	border-radius: 3px;
-	border: 1px solid #CCC;
-	text-align: center;
-	color: #555;
-
-	position: absolute;
-	z-index: 1000;
-
-	box-shadow: 0 0 3px 0 #BABABA;
-	transition: all 0.25s;
-}
-
-#unit-settings .title {
-	width: 100%;
-	margin: -5px auto 0;
-
-	color: #666;
-	font-size: 14px;
-	font-weight: bold;
-	line-height: 25px;
-	border-bottom: 1px solid #E5E5E5;
-}
-
-#unit-settings .ui-input-slider {
-	margin: 10px 0 0 0;
-}
-
-#unit-settings .ui-input-slider-info {
-	width: 50px;
-	line-height: 1.5em;
-}
-
-#unit-settings input {
-	font-size: 12px;
-	width: 40px !important;
-}
-
-#unit-settings .close {
-	width: 16px;
-	height: 16px;
-	background: url('https://mdn.mozillademos.org/files/6019/close.png') no-repeat center center;
-	background-size: 75%;
-
-	position: absolute;
-	top: 4px;
-	right: 4px;
-	opacity: 0.5;
-}
-
-#unit-settings .close:hover {
-	cursor: pointer;
-	opacity: 1;
-}
-
-#unit-settings[data-active='true'] {
-	opacity: 1;
-}
-
-#unit-settings[data-active='false'] {
-	opacity: 0;
-	top: -100px !important;
-}
-
-/*
- * CSS Output Code
- */
-
-#output {
-	padding: 10px;
-	border: 2px dashed #888 !important;
-	box-shadow: none !important;
-	border-radius: 3px;
-	overflow: hidden;
-
-	-moz-user-select: text;
-	-webkit-user-select: text;
-	-ms-user-select: text;
-	user-select: text;
-}
-
-
-@media (min-width: 880px) {
-	#output {
-		width: 63.33% !important;
-	}
-}
-
-@media (max-width: 879px) {
-	#output {
-		width: 87% !important;
-	}
-}
-
-
-#output .title {
-	width: 100%;
-	height: 30px;
-	margin: 0 0 10px 0;
-	line-height: 25px;
-
-	text-align: center;
-	color: #AAA;
-}
-
-#output .css-property {
-	width: 100%;
-	margin: 0;
-	color: #555;
-	font-size: 14px;
-	line-height: 18px;
-	float: left;
-}
-
-#output .css-property .name {
-	width: 30%;
-	font-weight: bold;
-	text-align: right;
-	float: left;
-}
-
-#output .css-property .value {
-	width: 65%;
-	padding: 0 2.5%;
-	word-break: break-all;
-	float: left;
-}
-
-</pre>
-
-<h3 id="JavaScript_Content">JavaScript Content</h3>
-
-<pre class="brush: js">'use strict';
-
-/**
- * UI-SlidersManager
- */
-
-var InputSliderManager = (function InputSliderManager() {
-
-	var subscribers = {};
-	var sliders = [];
-
-	var InputComponent = function InputComponent(obj) {
-		var input = document.createElement('input');
-		input.setAttribute('type', 'text');
-		input.style.width = 50 + obj.precision * 10 + 'px';
-
-		input.addEventListener('click', function(e) {
-			this.select();
-		});
-
-		input.addEventListener('change', function(e) {
-			var value = parseFloat(e.target.value);
-
-			if (isNaN(value) === true)
-				setValue(obj.topic, obj.value);
-			else
-				setValue(obj.topic, value);
-		});
-
-		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) {
-			document.removeEventListener("mousemove", sliderMotion);
-			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("mouseup", slideEnd);
-			document.addEventListener("mousemove", sliderMotion);
-		});
-
-		var slideEnd = function slideEnd(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		= parseFloat(node.getAttribute('data-min'));
-		var max		= parseFloat(node.getAttribute('data-max'));
-		var step	= parseFloat(node.getAttribute('data-step'));
-		var value	= parseFloat(node.getAttribute('data-value'));
-		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;
-		var precision = node.getAttribute('data-precision') | 0;
-
-		this.min = isNaN(min) ? 0 : min;
-		this.max = isNaN(max) ? 100 : max;
-		this.precision = precision &gt;= 0 ? precision : 0;
-		this.step = step &lt; 0 || isNaN(step) ? 1 : step.toFixed(precision);
-		this.topic = topic;
-		this.node = node;
-		this.unit = unit === null ? '' : unit;
-		this.sensivity = sensivity &gt; 0 ? sensivity : 5;
-		value = isNaN(value) ? this.min : value;
-
-		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);
-
-		this.input = input;
-		sliders[topic] = this;
-		setValue(topic, value);
-	};
-
-	InputSlider.prototype.setInputValue = function setInputValue() {
-		this.input.value = this.value.toFixed(this.precision) + this.unit;
-	};
-
-	var setValue = function setValue(topic, value, send_notify) {
-		var slider = sliders[topic];
-		if (slider === undefined)
-			return;
-
-		value = parseFloat(value.toFixed(slider.precision));
-
-		if (value &gt; slider.max) value = slider.max;
-		if (value &lt; slider.min)	value = slider.min;
-
-		slider.value = value;
-		slider.node.setAttribute('data-value', value);
-
-		slider.setInputValue();
-
-		if (send_notify === false)
-			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 setStep = function setStep(topic, value) {
-		var slider = sliders[topic];
-		if (slider === undefined)
-			return;
-
-		slider.step = parseFloat(value);
-		setValue(topic, slider.value);
-	};
-
-	var setPrecision = function setPrecision(topic, value) {
-		var slider = sliders[topic];
-		if (slider === undefined)
-			return;
-
-		value = value | 0;
-		slider.precision = value;
-
-		var step = parseFloat(slider.step.toFixed(value));
-		if (step === 0)
-			slider.step = 1 / Math.pow(10, value);
-
-		setValue(topic, slider.value);
-	};
-
-	var setSensivity = function setSensivity(topic, value) {
-		var slider = sliders[topic];
-		if (slider === undefined)
-			return;
-
-		value = value | 0;
-
-		slider.sensivity = value &gt; 0 ? value : 5;
-	};
-
-	var getNode =  function getNode(topic) {
-		return sliders[topic].node;
-	};
-
-	var getPrecision =  function getPrecision(topic) {
-		return sliders[topic].precision;
-	};
-
-	var getStep =  function getStep(topic) {
-		return sliders[topic].step;
-	};
-
-	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() {
-		if (subscribers[this.topic] === undefined)
-			return;
-		for (var i = 0; i &lt; subscribers[this.topic].length; i++)
-			subscribers[this.topic][i](this.value);
-	};
-
-	var createSlider = function createSlider(topic, label) {
-		var slider = document.createElement('div');
-		slider.className = 'ui-input-slider';
-		slider.setAttribute('data-topic', topic);
-
-		if (label !== undefined)
-			slider.setAttribute('data-info', label);
-
-		new InputSlider(slider);
-		return slider;
-	};
-
-	var init = function init() {
-		var elem = document.querySelectorAll('.ui-input-slider');
-		var size = elem.length;
-		for (var i = 0; i &lt; size; i++)
-			new InputSlider(elem[i]);
-	};
-
-	return {
-		init : init,
-		setMax : setMax,
-		setMin : setMin,
-		setUnit : setUnit,
-		setStep : setStep,
-		getNode : getNode,
-		getStep : getStep,
-		setValue : setValue,
-		subscribe : subscribe,
-		unsubscribe : unsubscribe,
-		setPrecision : setPrecision,
-		setSensivity : setSensivity,
-		getPrecision : getPrecision,
-		createSlider : createSlider,
-	};
-
-})();
-
-
-/**
- * UI-DropDown Select
- */
-
-var DropDownManager = (function DropdownManager() {
-
-	var subscribers = {};
-	var dropdowns = [];
-	var active = null;
-
-	var visbility = ["hidden", "visible"];
-
-
-	var DropDown = function DropDown(node) {
-		var topic = node.getAttribute('data-topic');
-		var label = node.getAttribute('data-label');
-		var selected = node.getAttribute('data-selected') | 0;
-
-		var select = document.createElement('div');
-		var list = document.createElement('div');
-		var uval = 0;
-		var option = null;
-		var option_value = null;
-
-		list.className = 'ui-dropdown-list';
-		select.className = 'ui-dropdown-select';
-
-		while (node.firstElementChild !== null) {
-			option = node.firstElementChild;
-			option_value = option.getAttribute('data-value');
-
-			if (option_value === null)
-				option.setAttribute('data-value', uval);
-
-			list.appendChild(node.firstElementChild);
-			uval++;
-		}
-
-		node.appendChild(select);
-		node.appendChild(list);
-
-		select.onclick = this.toggle.bind(this);
-		list.onclick = this.updateValue.bind(this);
-		document.addEventListener('click', clickOut);
-
-		this.state = 0;
-		this.time = 0;
-		this.dropmenu = list;
-		this.select = select;
-		this.toggle(false);
-		this.value = {};
-		this.topic = topic;
-
-		if (label)
-			select.textContent = label;
-		else
-			this.setNodeValue(list.children[selected]);
-
-		dropdowns[topic] = this;
-
-	};
-
-	DropDown.prototype.toggle = function toggle(state) {
-		if (typeof(state) === 'boolean')
-			this.state = state === false ? 0 : 1;
-		else
-			this.state = 1 ^ this.state;
-
-		if (active !== this) {
-			if (active)
-				active.toggle(false);
-			active = this;
-		}
-
-		if (this.state === 0)
-			this.dropmenu.setAttribute('data-hidden', 'true');
-		else
-			this.dropmenu.removeAttribute('data-hidden');
-
-	};
-
-	var clickOut = function clickOut(e) {
-		if (active.state === 0 ||
-			e.target === active.dropmenu ||
-			e.target === active.select)
-			return;
-
-		active.toggle(false);
-	};
-
-	DropDown.prototype.updateValue = function updateValue(e) {
-
-		if (Date.now() - this.time &lt; 500)
-			return;
-
-		if (e.target.className !== "ui-dropdown-list") {
-			this.setNodeValue(e.target);
-			this.toggle(false);
-		}
-
-		this.time = Date.now();
-	};
-
-	DropDown.prototype.setNodeValue = function setNodeValue(node) {
-		this.value['name'] = node.textContent;
-		this.value['value'] = node.getAttribute('data-value');
-
-		this.select.textContent = node.textContent;
-		this.select.setAttribute('data-value', this.value['value']);
-
-		notify.call(this);
-	};
-
-	var createDropDown = function createDropDown(topic, options) {
-
-		var dropdown = document.createElement('div');
-		dropdown.setAttribute('data-topic', topic);
-		dropdown.className = 'ui-dropdown';
-
-		for (var i in options) {
-			var x = document.createElement('div');
-			x.setAttribute('data-value', i);
-			x.textContent = options[i];
-			dropdown.appendChild(x);
-		}
-
-		new DropDown(dropdown);
-
-		return dropdown;
-	};
-
-	var setValue = function setValue(topic, index) {
-		if (dropdowns[topic] === undefined ||
-			index &gt;= dropdowns[topic].dropmenu.children.length)
-			return;
-
-		dropdowns[topic].setNodeValue(dropdowns[topic].dropmenu.children[index]);
-	};
-
-	var subscribe = function subscribe(topic, callback) {
-		if (subscribers[topic] === undefined)
-			subscribers[topic] = [];
-		subscribers[topic].push(callback);
-	};
-
-	var unsubscribe = function unsubscribe(topic, callback) {
-		var index = subscribers[topic].indexOf(callback);
-		subscribers[topic].splice(index, 1);
-	};
-
-	var notify = function notify() {
-		if (subscribers[this.topic] === undefined)
-			return;
-
-		for (var i in subscribers[this.topic]) {
-			subscribers[this.topic][i](this.value);
-		}
-	};
-
-	var init = function init() {
-		var elem, size;
-
-		elem = document.querySelectorAll('.ui-dropdown');
-		size = elem.length;
-		for (var i = 0; i &lt; size; i++)
-			new DropDown(elem[i]);
-
-	};
-
-	return {
-		init : init,
-		setValue : setValue,
-		subscribe : subscribe,
-		unsubscribe : unsubscribe,
-		createDropDown : createDropDown
-	};
-
-})();
-
-
-/**
- * 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) {
-		var obj = buttons[topic];
-		if (obj === undefined)
-			return;
-
-		obj.checkbox.checked = value;
-		notify.call(obj);
-	};
-
-	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() {
-		if (subscribers[this.topic] === undefined)
-			return;
-		for (var i = 0; i &lt; 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 &lt; size; i++)
-			new CheckBox(elem[i]);
-	};
-
-	return {
-		init : init,
-		setValue : setValue,
-		subscribe : subscribe,
-		unsubscribe : unsubscribe
-	};
-
-})();
-
-window.addEventListener("load", function() {
-	BorderImage.init();
-});
-
-var BorderImage = (function BorderImage() {
-
-	var getElemById = document.getElementById.bind(document);
-
-	var subject;
-	var preview;
-	var guidelines = [];
-	var positions = ['top', 'right', 'bottom', 'left'];
-
-	var makeDraggable = function makeDraggable(elem) {
-
-		var offsetTop;
-		var offsetLeft;
-
-		elem.setAttribute('data-draggable', 'true');
-
-		var dragStart = function dragStart(e) {
-			if (e.target.getAttribute('data-draggable') !== 'true' ||
-				e.target !== elem || e.button !== 0)
-				return;
-
-			offsetLeft = e.clientX - elem.offsetLeft;
-			offsetTop = e.clientY - elem.offsetTop;
-
-			document.addEventListener('mousemove', mouseDrag);
-			document.addEventListener('mouseup', dragEnd);
-		};
-
-		var dragEnd = function dragEnd(e) {
-			if (e.button !== 0)
-				return;
-
-			document.removeEventListener('mousemove', mouseDrag);
-			document.removeEventListener('mouseup', dragEnd);
-		};
-
-		var mouseDrag = function mouseDrag(e) {
-
-			elem.style.left = e.clientX - offsetLeft + 'px';
-			elem.style.top = e.clientY - offsetTop + 'px';
-		};
-
-		elem.addEventListener('mousedown', dragStart, false);
-	};
-
-	var PreviewControl = function PreviewControl() {
-
-		var dragging = false;
-		var valueX = null;
-		var valueY = null;
-
-		var dragStart = function dragStart(e) {
-			if (e.button !== 0)
-				return;
-
-			valueX = e.clientX - preview.clientWidth;
-			valueY = e.clientY - preview.clientHeight;
-			dragging = true;
-
-			document.addEventListener('mousemove', mouseDrag);
-		};
-
-		var dragEnd = function dragEnd(e) {
-			if (e.button !== 0 || dragging === false)
-				return;
-
-			document.removeEventListener('mousemove', mouseDrag);
-			dragging = false;
-		};
-
-		var mouseDrag = function mouseDrag(e) {
-			InputSliderManager.setValue('preview-width', e.clientX - valueX);
-			InputSliderManager.setValue('preview-height', e.clientY - valueY);
-		};
-
-		var init = function init() {
-
-			makeDraggable(preview);
-			makeDraggable(subject);
-
-			var handle = document.createElement('div');
-			handle.className = 'resize-handle';
-
-			handle.addEventListener('mousedown', dragStart);
-			document.addEventListener('mouseup', dragEnd);
-
-			preview.appendChild(handle);
-
-		};
-
-		return {
-			init: init
-		};
-
-	}();
-
-	var ImageReader = (function ImageReader() {
-
-		var fReader = new FileReader();
-		var browse = document.createElement('input');
-
-		var loadImage = function loadImage(e) {
-			if (browse.files.length === 0)
-				return;
-
-			var file = browse.files[0];
-
-			if (file.type.slice(0, 5) !== 'image')
-				return;
-
-			fReader.readAsDataURL(file);
-
-			return false;
-		};
-
-		fReader.onload = function(e) {
-			ImageControl.loadRemoteImage(e.target.result);
-		};
-
-		var load = function load() {
-			browse.click();
-		};
-
-		browse.setAttribute('type', 'file');
-		browse.style.display = 'none';
-		browse.onchange = loadImage;
-
-		return {
-			load: load
-		};
-
-	})();
-
-	var ImageControl = (function ImageControl() {
-
-		var scale = 0.5;
-		var imgSource = new Image();
-		var imgState = null;
-		var selected = null;
-
-
-		var topics = ['slice', 'width', 'outset'];
-		var properties = {};
-		properties['border1'] = {
-			fill			: false,
-
-			slice_values	: [27, 27, 27, 27],
-			width_values	: [20, 20, 20, 20],
-			outset_values	: [0, 0, 0, 0],
-
-			slice_units		: [0, 0, 0, 0],
-			width_units		: [0, 0, 0, 0],
-			outset_units	: [0, 0, 0, 0],
-
-			repeat			: [1, 1],
-			size			: [300, 200],
-			preview_area	: 400
-		};
-
-		properties['border2'] = {
-			fill			: false,
-
-			slice_values	: [33, 33, 33, 33],
-			width_values	: [1.5, 1.5, 1.5, 1.5],
-			outset_values	: [0, 0, 0, 0],
-
-			slice_units		: [1, 1, 1, 1],
-			width_units		: [2, 2, 2, 2],
-			outset_units	: [0, 0, 0, 0],
-
-			repeat			: [2, 2],
-			size			: [300, 200],
-			preview_area	: 400
-		};
-
-		properties['border3'] = {
-			fill			: true,
-
-			slice_values	: [15, 15, 15, 15],
-			width_values	: [10, 10, 10, 10],
-			outset_values	: [0, 0, 0, 0],
-
-			slice_units		: [0, 0, 0, 0],
-			width_units		: [0, 0, 0, 0],
-			outset_units	: [0, 0, 0, 0],
-
-			repeat			: [2, 2],
-			size			: [300, 200],
-			preview_area	: 400
-		};
-
-		properties['border4'] = {
-			fill			: false,
-
-			slice_values	: [13, 13, 13, 13],
-			width_values	: [13, 13, 13, 13],
-			outset_values	: [13, 13, 13, 13],
-
-			slice_units		: [0, 0, 0, 0],
-			width_units		: [0, 0, 0, 0],
-			outset_units	: [0, 0, 0, 0],
-
-			repeat			: [0, 0],
-			size			: [300, 200],
-			preview_area	: 400
-		};
-
-		properties['border5'] = {
-			fill			: false,
-
-			slice_values	: [0, 12, 0, 12],
-			width_values	: [0, 12, 0, 12],
-			outset_values	: [0, 0, 0, 0],
-
-			slice_units		: [0, 0, 0, 0],
-			width_units		: [0, 0, 0, 0],
-			outset_units	: [0, 0, 0, 0],
-
-			repeat			: [0, 0],
-			size			: [300, 200],
-			preview_area	: 400,
-		};
-
-		properties['border6'] = {
-			fill			: false,
-
-			slice_values	: [42, 42, 42, 42],
-			width_values	: [42, 42, 42, 42],
-			outset_values	: [0, 0, 0, 0],
-
-			slice_units		: [0, 0, 0, 0],
-			width_units		: [0, 0, 0, 0],
-			outset_units	: [0, 0, 0, 0],
-
-			repeat			: [2, 2],
-			size			: [350, 350],
-			preview_area	: 500,
-		};
-
-
-		var loadLocalImage = function loadLocalImage(source) {
-			var location = "images/" + source;
-			imgSource.src = location;
-		};
-
-		var loadRemoteImage = function loadRemoteImage(source) {
-			imgSource.src = source;
-			if (selected)
-				selected.removeAttribute('selected');
-			Tool.setOutputCSS('source', 'url("' + source + '")');
-		};
-
-		var pickImage = function pickImage(e) {
-			if (e.target.className === 'image') {
-				selected = e.target;
-				selected.setAttribute('selected', 'true');
-				loadRemoteImage(e.target.src);
-				imgState = e.target.getAttribute('data-stateID');
-			}
-		};
-
-		var loadImageState = function loadImageState(stateID) {
-			if (properties[stateID] === undefined)
-				return;
-
-			var prop = properties[stateID];
-			var topic;
-			var unit_array;
-			var value_array;
-
-			for (var i in topics) {
-				for (var j=0; j&lt;4; j++) {
-					topic = topics[i] + '-' + positions[j];
-					unit_array = topics[i] + '_units';
-					value_array = topics[i] + '_values';
-					InputSliderManager.setValue(topic, prop[value_array][j]);
-					DropDownManager.setValue(topic, prop[unit_array][j]);
-				}
-			}
-
-			ButtonManager.setValue('slice-fill', prop['fill']);
-			DropDownManager.setValue('image-repeat-X', prop['repeat'][0]);
-			DropDownManager.setValue('image-repeat-Y', prop['repeat'][1]);
-			InputSliderManager.setValue('preview-width', prop['size'][0]);
-			InputSliderManager.setValue('preview-height', prop['size'][1]);
-			InputSliderManager.setValue('preview-area-height', prop['preview_area']);
-		};
-
-		var update = function update() {
-			scale =  Math.min(300, (30000 / this.width) | 0);
-			setScale(scale);
-			InputSliderManager.setValue('scale', scale, false);
-
-			subject.style.backgroundImage = 'url("' + this.src + '")';
-			preview.style.borderImageSource = 'url("' + this.src + '")';
-
-			guidelines['slice-top'].setMax(this.height);
-			guidelines['slice-right'].setMax(this.width);
-			guidelines['slice-bottom'].setMax(this.height);
-			guidelines['slice-left'].setMax(this.width);
-
-			if (imgState)
-				loadImageState(imgState);
-		};
-
-		var setScale = function setScale(value) {
-			scale = value;
-			var w = imgSource.width * scale / 100 | 0;
-			var h = imgSource.height * scale / 100 | 0;
-			subject.style.width = w + 'px';
-			subject.style.height = h + 'px';
-
-			for (var i = 0; i &lt; positions.length; i++)
-				guidelines['slice-' + positions[i]].updateGuidelinePos();
-		};
-
-		var getScale = function getScale() {
-			return scale/100;
-		};
-
-		var toggleGallery = function toggleGallery() {
-			var gallery = getElemById('image-gallery');
-			var button  = getElemById('toggle-gallery');
-			var state = 1;
-			button.addEventListener('click', function() {
-				state = 1 ^ state;
-				if (state === 0) {
-					gallery.setAttribute('data-collapsed', 'true');
-					button.setAttribute('data-action', 'show');
-				}
-				else {
-					gallery.removeAttribute('data-collapsed');
-					button.setAttribute('data-action', 'hide');
-				}
-			});
-		};
-
-		var init = function init() {
-			var gallery = getElemById('image-gallery');
-			var browse = getElemById('load-image');
-			var remote = getElemById('remote-url');
-			var load_remote = getElemById('load-remote');
-
-			remote.addEventListener('change', function(){
-				loadRemoteImage(this.value);
-			});
-
-			load_remote.addEventListener('click', function(){
-				loadRemoteImage(remote.value);
-			});
-
-			browse.addEventListener('click', ImageReader.load);
-			gallery.addEventListener('click', pickImage);
-			imgSource.addEventListener('load', update);
-
-			InputSliderManager.subscribe('scale', setScale);
-			InputSliderManager.setValue('scale', scale);
-			imgState = 'border1';
-			loadRemoteImage('https://mdn.mozillademos.org/files/6007/border-image-1.png');
-			toggleGallery();
-		};
-
-		return {
-			init: init,
-			getScale : getScale,
-			loadRemoteImage: loadRemoteImage
-		};
-
-	})();
-
-	var GuideLine = function GuideLine(node) {
-		var topic = node.getAttribute('data-topic');
-		var axis = node.getAttribute('data-axis');
-
-		this.node = node;
-		this.topic = topic;
-		this.axis = axis;
-		this.info = topic.split('-')[1];
-
-		this.position = 0;
-		this.value = 0;
-		this.unit = 0;
-		this.max = 0;
-		this.pos = positions.indexOf(this.info);
-
-		guidelines[topic] = this;
-
-		var relative_container = document.createElement('div');
-		var tooltip = document.createElement('div');
-		var tooltip2 = document.createElement('div');
-
-		tooltip.className = 'tooltip';
-		tooltip.setAttribute('data-info', this.info);
-
-		tooltip2.className = 'tooltip2';
-		tooltip2.textContent = this.info;
-		tooltip2.setAttribute('data-info', this.info);
-
-		this.tooltip = tooltip;
-
-		relative_container.appendChild(tooltip);
-		relative_container.appendChild(tooltip2);
-		node.appendChild(relative_container);
-
-		var startX = 0;
-		var startY = 0;
-		var start = 0;
-
-		var startDrag = function startDrag(e) {
-			startX = e.clientX;
-			startY = e.clientY;
-			start = guidelines[topic].position;
-			document.body.setAttribute('data-move', axis);
-			relative_container.setAttribute('data-active', '');
-			node.setAttribute('data-active', '');
-
-			document.addEventListener('mousemove', updateGuideline);
-			document.addEventListener('mouseup', endDrag);
-		};
-
-		var endDrag = function endDrag() {
-			document.body.removeAttribute('data-move');
-			relative_container.removeAttribute('data-active');
-			node.removeAttribute('data-active');
-
-			document.removeEventListener('mousemove', updateGuideline);
-		};
-
-		var updateGuideline = function updateGuideline(e) {
-			var value;
-			if (topic === 'slice-top')
-				value = e.clientY - startY + start;
-
-			if (topic === 'slice-right')
-				value = startX - e.clientX + start;
-
-			if (topic === 'slice-bottom')
-				value = startY - e.clientY + start;
-
-			if (topic === 'slice-left')
-				value = e.clientX - startX + start;
-
-			if (this.unit === 0)
-				InputSliderManager.setValue(topic, value * 1 / ImageControl.getScale() | 0);
-			else {
-				InputSliderManager.setValue(topic, (value * 100 / (this.max * ImageControl.getScale())) | 0);
-			}
-
-		}.bind(this);
-
-		node.addEventListener("mousedown", startDrag);
-
-		InputSliderManager.subscribe(topic, this.setPosition.bind(this));
-		InputSliderManager.setValue(topic, this.position);
-	};
-
-
-	GuideLine.prototype.updateGuidelinePos = function updateGuidelinePos() {
-		if (this.unit === 0)
-			this.position = this.value * ImageControl.getScale() | 0;
-		else
-			this.position = this.value * this.max * ImageControl.getScale() / 100 | 0;
-
-		this.node.style[this.info] = this.position + 'px';
-	};
-
-	GuideLine.prototype.setPosition = function setPosition(value) {
-		this.value = value;
-		this.tooltip.textContent = value;
-		this.updateGuidelinePos();
-		Tool.setBorderSlice(this.pos, value);
-	};
-
-	GuideLine.prototype.setMax = function setMax(max) {
-		this.max = max;
-		this.updateLimit();
-	};
-
-	GuideLine.prototype.updateLimit = function updateLimit() {
-		if (this.unit === 1)
-			InputSliderManager.setMax(this.topic, 100);
-		else
-			InputSliderManager.setMax(this.topic, this.max);
-	};
-
-	GuideLine.prototype.setUnit = function setUnit(type) {
-		if (type === '%')	this.unit = 1;
-		if (type === '')	this.unit = 0;
-		this.updateLimit();
-	};
-
-	/*
-	 * Unit panel
-	 */
-	var UnitPanel = (function UnitPanel () {
-
-		var panel;
-		var title;
-		var precision;
-		var step;
-		var unit_topic = null; // settings are made for this topic
-		var step_option = [1, 0.1, 0.01];
-
-		var updatePrecision = function updatePrecision(value) {
-			InputSliderManager.setPrecision('unit-step', value);
-			InputSliderManager.setStep('unit-step', step_option[value]);
-			InputSliderManager.setMin('unit-step', step_option[value]);
-
-			if (unit_topic)
-				InputSliderManager.setPrecision(unit_topic, value);
-		};
-
-		var updateUnitSettings = function updateUnitSettings(value) {
-			if (unit_topic)
-				InputSliderManager.setStep(unit_topic, value);
-		};
-
-		var show = function show(e) {
-			var topic = e.target.getAttribute('data-topic');
-			var precision = InputSliderManager.getPrecision(topic);
-			var step = InputSliderManager.getStep(topic);
-
-			unit_topic = topic;
-			title.textContent = topic;
-
-			panel.setAttribute('data-active', 'true');
-			panel.style.top = e.target.offsetTop - 40 + 'px';
-			panel.style.left = e.target.offsetLeft + 30 + 'px';
-
-			InputSliderManager.setValue('unit-precision', precision);
-			InputSliderManager.setValue('unit-step', step);
-		};
-
-		var init = function init() {
-			panel = document.createElement('div');
-			title = document.createElement('div');
-			var close = document.createElement('div');
-
-			step = InputSliderManager.createSlider('unit-step', 'step');
-			precision = InputSliderManager.createSlider('unit-precision', 'precision');
-
-			InputSliderManager.setStep('unit-precision', 1);
-			InputSliderManager.setMax('unit-precision', 2);
-			InputSliderManager.setValue('unit-precision', 2);
-			InputSliderManager.setSensivity('unit-precision', 20);
-
-			InputSliderManager.setValue('unit-step', 1);
-			InputSliderManager.setStep('unit-step', 0.01);
-			InputSliderManager.setPrecision('unit-step', 2);
-
-			InputSliderManager.subscribe('unit-precision', updatePrecision);
-			InputSliderManager.subscribe('unit-step', updateUnitSettings);
-
-			close.addEventListener('click', function () {
-				panel.setAttribute('data-active', 'false');
-			});
-
-			title.textContent = 'Properties';
-			title.className = 'title';
-			close.className = 'close';
-			panel.id = 'unit-settings';
-			panel.setAttribute('data-active', 'false');
-			panel.appendChild(title);
-			panel.appendChild(precision);
-			panel.appendChild(step);
-			panel.appendChild(close);
-			document.body.appendChild(panel);
-		};
-
-		return {
-			init : init,
-			show : show
-		};
-
-	})();
-
-	/**
-	 * Tool Manager
-	 */
-	var Tool = (function Tool() {
-		var preview_area;
-		var dropdown_unit_options = [
-			{ '' : '--', '%' : '%'},
-			{ 'px' : 'px', '%' : '%', 'em' : 'em'},
-			{ 'px' : 'px', 'em' : 'em'},
-		];
-
-		var border_slice = [];
-		var border_width = [];
-		var border_outset = [];
-
-		var border_slice_values = [];
-		var border_width_values = [];
-		var border_outset_values = [];
-
-		var border_slice_units = ['', '', '', ''];
-		var border_width_units = ['px', 'px', 'px', 'px'];
-		var border_outset_units = ['px', 'px', 'px', 'px'];
-
-		var border_fill = false;
-		var border_repeat = ['round', 'round'];
-		var CSS_code = {
-			'source' : null,
-			'slice' : null,
-			'width' : null,
-			'outset' : null,
-			'repeat' : null
-		};
-
-		var setBorderSlice = function setBorderSlice(positionID, value) {
-			border_slice[positionID] = value + border_slice_units[positionID];
-			updateBorderSlice();
-		};
-
-		var updateBorderSlice = function updateBorderSlice() {
-			var value = border_slice.join(' ');
-			if (border_fill === true)
-				value += ' fill';
-
-			preview.style.borderImageSlice = value;
-			setOutputCSS('slice', value);
-		};
-
-		var setBorderFill = function setBorderFill(value) {
-			border_fill = value;
-			var bimgslice = border_slice.join(' ');;
-			if (value === true)
-				bimgslice += ' fill';
-
-			preview.style.borderImageSlice = bimgslice;
-		};
-
-		var updateBorderWidth = function updateBorderWidth() {
-			var value = border_width.join(' ');
-			preview.style.borderImageWidth = value;
-			setOutputCSS('width', value);
-		};
-
-		var updateBorderOutset = function updateBorderOutset() {
-			var value = border_outset.join(' ');
-			preview.style.borderImageOutset = border_outset.join(' ');
-			setOutputCSS('outset', value);
-		};
-
-		var setBorderRepeat = function setBorderRepeat(obj) {
-			border_repeat[obj.value] = obj.name;
-			var value = border_repeat.join(' ');
-			preview.style.borderImageRepeat = value;
-			setOutputCSS('repeat', value);
-		};
-
-		var setOutputCSS = function setOutputCSS(topic, value) {
-			CSS_code[topic].textContent = value + ';';
-		};
-
-		var setPreviewFontSize = function setPreviewFontSize(value) {
-			preview.style.fontSize = value + 'px';
-		};
-
-		var setPreviewWidth = function setPreviewWidth(value) {
-			preview.style.width = value + 'px';
-		};
-
-		var setPreviewHeight = function setPreviewHeight(value) {
-			preview.style.height = value + 'px';
-		};
-
-		var setPreviewAreaHeight = function setPreviewAreaHeight(value) {
-			preview_area.style.height = value + 'px';
-		};
-
-		var updateDragOption = function updateDragOption(value) {
-			if (value === true)
-				subject.setAttribute('data-draggable', 'true');
-			else
-				subject.removeAttribute('data-draggable');
-		};
-
-		var createProperty = function createProperty(topic, labelID, optionsID) {
-
-			var slider = InputSliderManager.createSlider(topic, positions[labelID]);
-			var dropdown = DropDownManager.createDropDown(topic, dropdown_unit_options[optionsID]);
-
-			InputSliderManager.setSensivity(topic, 3);
-			InputSliderManager.setPrecision(topic, 1);
-
-			var property = document.createElement('div');
-			var config = document.createElement('div');
-
-			property.className = 'property';
-			config.className = 'config';
-			config.setAttribute('data-topic', topic);
-			config.addEventListener('click', UnitPanel.show);
-
-			property.appendChild(slider);
-			property.appendChild(dropdown);
-			property.appendChild(config);
-
-			return property;
-		};
-
-		var initBorderSliceControls = function initBorderSliceControls() {
-			var container = getElemById('border-slice-control');
-
-			var listenForChanges = function listenForChanges(topic, id) {
-				InputSliderManager.subscribe(topic, function(value) {
-					border_slice_values[id] = value;
-					border_slice[id] = value + border_slice_units[id];
-					updateBorderSlice();
-				});
-
-				DropDownManager.subscribe(topic, function(obj) {
-					guidelines[topic].setUnit(obj.value);
-					border_slice_units[id] = obj.value;
-					border_slice[id] = border_slice_values[id] + obj.value;
-					updateBorderSlice();
-				});
-			};
-
-			for (var i = 0; i &lt; positions.length; i++) {
-				var topic = 'slice-' + positions[i];
-				var property = createProperty(topic, i, 0);
-				listenForChanges(topic, i);
-
-				container.appendChild(property);
-			}
-
-			container.appendChild(container.children[1]);
-
-		};
-
-		var initBorderWidthControls = function initBorderWidthControls() {
-			var container = getElemById('border-width-control');
-
-			var listenForChanges = function listenForChanges(topic, id) {
-				InputSliderManager.subscribe(topic, function(value) {
-					border_width_values[id] = value;
-					border_width[id] = value + border_width_units[id];
-					updateBorderWidth();
-				});
-
-				DropDownManager.subscribe(topic, function(obj) {
-					if (obj.value === '%')
-						InputSliderManager.setMax(topic, 100);
-					else
-						InputSliderManager.setMax(topic, 1000);
-
-					border_width_units[id] = obj.value;
-					border_width[id] = border_width_values[id] + obj.value;
-					updateBorderWidth();
-				});
-			};
-
-			for (var i = 0; i &lt; positions.length; i++) {
-				var topic = 'width-' + positions[i];
-				var property = createProperty(topic, i, 1);
-				InputSliderManager.setMax(topic, 1000);
-				listenForChanges(topic, i);
-
-				container.appendChild(property);
-			}
-		};
-
-		var initBorderOutsetControls = function initBorderOutsetControls() {
-
-			var container = getElemById('border-outset-control');
-
-			var listenForChanges = function listenForChanges(topic, id) {
-				InputSliderManager.subscribe(topic, function(value) {
-					border_outset_values[id] = value;
-					border_outset[id] = value + border_outset_units[id];
-					updateBorderOutset();
-				});
-
-				DropDownManager.subscribe(topic, function(obj) {
-					border_outset_units[id] = obj.value;
-					border_outset[id] = border_outset_values[id] + obj.value;
-					updateBorderOutset();
-				});
-			};
-
-			for (var i = 0; i &lt; positions.length; i++) {
-				var topic = 'outset-' + positions[i];
-				var property = createProperty(topic, i, 2);
-				InputSliderManager.setMax(topic, 1000);
-				listenForChanges(topic, i);
-
-				container.appendChild(property);
-			}
-		};
-
-		var init = function init() {
-
-			var gallery =
-			subject = getElemById('subject');
-			preview = getElemById("preview");
-			preview_area = getElemById("preview_section");
-
-
-			CSS_code['source'] = getElemById("out-border-source");
-			CSS_code['slice'] = getElemById("out-border-slice");
-			CSS_code['width'] = getElemById("out-border-width");
-			CSS_code['outset'] = getElemById("out-border-outset");
-			CSS_code['repeat'] = getElemById("out-border-repeat");
-
-			initBorderSliceControls();
-			initBorderWidthControls();
-			initBorderOutsetControls();
-
-			var elem = document.querySelectorAll('.guideline');
-			var size = elem.length;
-			for (var i = 0; i &lt; size; i++)
-				new GuideLine(elem[i]);
-
-			PreviewControl.init();
-
-			ButtonManager.subscribe('slice-fill',setBorderFill);
-			ButtonManager.subscribe('drag-subject', updateDragOption);
-			ButtonManager.setValue('drag-subject', false);
-
-			DropDownManager.subscribe('image-repeat-X', setBorderRepeat);
-			DropDownManager.subscribe('image-repeat-Y', setBorderRepeat);
-
-			InputSliderManager.subscribe('preview-area-height', setPreviewAreaHeight);
-			InputSliderManager.subscribe('preview-width', setPreviewWidth);
-			InputSliderManager.subscribe('preview-height', setPreviewHeight);
-			InputSliderManager.subscribe('font-size', setPreviewFontSize);
-			InputSliderManager.setValue('preview-width', 300);
-			InputSliderManager.setValue('preview-height', 200);
-		};
-
-		return {
-			init: init,
-			setOutputCSS: setOutputCSS,
-			setBorderSlice: setBorderSlice
-		};
-
-	})();
-
-	/**
-	 * Init Tool
-	 */
-	var init = function init() {
-		InputSliderManager.init();
-		DropDownManager.init();
-		ButtonManager.init();
-		UnitPanel.init();
-		Tool.init();
-		ImageControl.init();
-	};
-
-	return {
-		init : init
-	};
-
-})();
-
-</pre>
-</div>
-
-<p>{{EmbedLiveSample('Border_Image_Generator', '100%', '1270px')}}</p>
diff --git a/files/de/web/css/css_background_and_borders/border-radius_generator/index.html b/files/de/web/css/css_background_and_borders/border-radius_generator/index.html
deleted file mode 100644
index ced3cae5ad..0000000000
--- a/files/de/web/css/css_background_and_borders/border-radius_generator/index.html
+++ /dev/null
@@ -1,1600 +0,0 @@
----
-title: Border-radius Generator
-slug: Web/CSS/CSS_Background_and_Borders/Border-radius_generator
-tags:
-  - CSS
-  - Werkzeuge
-translation_of: Web/CSS/CSS_Background_and_Borders/Border-radius_generator
----
-<p>Dieses Werkzeug kann dazu verwendet werden, CSS3 {{cssxref("border-radius")}} Effekte zu erzeugen.</p>
-
-<div class="hidden">
-<h2 id="border-radius-generator" name="border-radius-generator">border-radius</h2>
-
-<h3 id="HTML_Content">HTML Content</h3>
-
-<pre class="brush: html">&lt;div id="container"&gt;
-    &lt;div class="group section"&gt;
-        &lt;div id="preview" class="col span_12"&gt;
-            &lt;div id="subject"&gt;
-                &lt;div id="top-left" class="radius-container"
-                    data-X="left" data-Y="top"&gt;
-                &lt;/div&gt;
-                &lt;div id="top-right" class="radius-container"
-                    data-X="right" data-Y="top"&gt;
-                &lt;/div&gt;
-                &lt;div id="bottom-right" class="radius-container"
-                    data-X="right" data-Y="bottom"&gt;
-                &lt;/div&gt;
-                &lt;div id="bottom-left" class="radius-container"
-                    data-X="left" data-Y="bottom"&gt;
-                &lt;/div&gt;
-
-                &lt;div id="radius-ui-sliders"&gt;
-                    &lt;div id="tlr" class="ui-input-slider" data-topic="top-left"
-                         data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
-
-                    &lt;div id="tlw" class="ui-input-slider" data-topic="top-left-w"
-                         data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
-
-                    &lt;div id="tlh" class="ui-input-slider" data-topic="top-left-h"
-                        data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
-
-                    &lt;div id="trr" class="ui-input-slider" data-topic="top-right"
-                         data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
-
-                    &lt;div id="trw" class="ui-input-slider" data-topic="top-right-w"
-                         data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
-
-                    &lt;div id="trh" class="ui-input-slider" data-topic="top-right-h"
-                        data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
-
-                    &lt;div id="brr" class="ui-input-slider" data-topic="bottom-right"
-                         data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
-
-                    &lt;div id="brw" class="ui-input-slider" data-topic="bottom-right-w"
-                         data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
-
-                    &lt;div id="brh" class="ui-input-slider" data-topic="bottom-right-h"
-                        data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
-
-                    &lt;div id="blr" class="ui-input-slider" data-topic="bottom-left"
-                         data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
-
-                    &lt;div id="blw" class="ui-input-slider" data-topic="bottom-left-w"
-                         data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
-
-                    &lt;div id="blh" class="ui-input-slider" data-topic="bottom-left-h"
-                        data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
-                &lt;/div&gt;
-            &lt;/div&gt;
-        &lt;/div&gt;
-    &lt;/div&gt;
-    &lt;div id="controls" class="group section"&gt;
-
-        &lt;div class="group section"&gt;
-            &lt;div id="dimensions"&gt;
-                &lt;div class="ui-input-slider" data-topic="width" data-info="width"
-                     data-unit=" px" data-min="150" data-max="700" data-sensivity="1"&gt;&lt;/div&gt;
-
-                &lt;div class="ui-input-slider" data-topic="height" data-info="height"
-                    data-unit=" px" data-min="75" data-max="350" data-sensivity="1"&gt;&lt;/div&gt;
-            &lt;/div&gt;
-
-            &lt;div id="output"&gt;&lt;/div&gt;
-        &lt;/div&gt;
-
-        &lt;div class="group section"&gt;
-            &lt;div id="radius-lock"&gt;
-                &lt;div class="info"&gt; rounded corner &lt;/div&gt;
-                &lt;div class="ui-checkbox" data-topic='top-left'&gt;&lt;/div&gt;
-                &lt;div class="ui-checkbox" data-topic='top-right'&gt;&lt;/div&gt;
-                &lt;div class="ui-checkbox" data-topic='bottom-right'&gt;&lt;/div&gt;
-                &lt;div class="ui-checkbox" data-topic='bottom-left'&gt;&lt;/div&gt;
-            &lt;/div&gt;
-
-            &lt;div id="unit-selection"&gt;
-                &lt;div class="info"&gt; select border units &lt;/div&gt;
-            &lt;/div&gt;
-        &lt;/div&gt;
-
-    &lt;/div&gt;
-&lt;/div&gt;
-</pre>
-
-<h3 id="CSS_Content">CSS Content</h3>
-
-<pre class="brush: css">/*  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 &gt; 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 &gt; input {
- 	display: none;
-}
-
-.ui-checkbox &gt; 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 &gt; label:hover {
-	cursor: pointer;
-}
-
-.ui-checkbox &gt; 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 &gt; 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;
-}
-
-
-</pre>
-
-<h3 id="JavaScript_Content">JavaScript Content</h3>
-
-<pre class="brush: js"><code class="language-js">'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 &gt; 0 ? max : 100;
-		this.step = step === 0 ? 1 : step;
-		this.topic = topic;
-		this.node = node;
-		this.unit = unit;
-		this.sensivity = sensivity &gt; 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 &gt; slider.max) value = slider.max;
-		if (value &lt; slider.min)	value = slider.min;
-
-		slider.value = value;
-		slider.node.setAttribute('data-value', value);
-
-		if (send_notify !== undefined &amp;&amp; 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 &lt; 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 &lt; 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 &lt; 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' &amp;&amp; y == 'top') handle.className = 'handle handle-top-left'
-		if (x === 'right' &amp;&amp; y == 'top') handle.className = 'handle handle-top-right';
-		if (x === 'right' &amp;&amp; y == 'bottom') handle.className = 'handle handle-bottom-right';
-		if (x === 'left' &amp;&amp; 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 &amp;&amp; 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 &lt; 0)	this.size = 0;
-			if (this.size &gt; this.maxR)	this.size = this.maxR;
-			this.updateRadius();
-			this.updateBorderRadius();
-			return;
-		}
-
-		if (deltaX) {
-			this.width += this.resizeX * deltaX;
-			if (this.width &lt; 0)	this.width = 0;
-			if (this.width &gt; this.maxW)	this.width = this.maxW;
-			this.updateWidth();
-		}
-
-		if (deltaY) {
-			this.height += this.resizeY * deltaY;
-			if (this.height &lt; 0) this.height = 0;
-			if (this.height &gt; 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 &lt; 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 &lt; 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 &lt; 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
-	}
-
-})();
-
-
-</code></pre>
-</div>
-
-<p>{{EmbedLiveSample('border-radius-generator', '100%', '800px')}}</p>
diff --git a/files/de/web/css/css_background_and_borders/box-shadow_generator/index.html b/files/de/web/css/css_background_and_borders/box-shadow_generator/index.html
deleted file mode 100644
index 9ced969467..0000000000
--- a/files/de/web/css/css_background_and_borders/box-shadow_generator/index.html
+++ /dev/null
@@ -1,2885 +0,0 @@
----
-title: Box-shadow Generator
-slug: Web/CSS/CSS_Background_and_Borders/Box-shadow_generator
-tags:
-  - CSS3
-  - Werkzeuge
-  - box-shadow
-translation_of: Web/CSS/CSS_Background_and_Borders/Box-shadow_generator
-original_slug: Web/CSS/CSS_Boxmodell/Box-shadow_generator
----
-<p>Dieses Werkzeug erlaubt es, CSS {{cssxref("box-shadow")}} Effekte zu erstellen, um Schlagschatteneffekte zu CSS Objekten hinzuzufügen.</p>
-
-<div class="hidden">
-<h2 id="box-shadow_generator" name="box-shadow_generator">box-shadow generator</h2>
-
-<h3 id="HTML_Content">HTML Content</h3>
-
-<pre class="brush: html">&lt;div id="container"&gt;
-    &lt;div class="group section"&gt;
-        &lt;div id="layer_manager"&gt;
-            &lt;div class="group section"&gt;
-                &lt;div class="button" data-type="add"&gt; &lt;/div&gt;
-                &lt;div class="button" data-type="move-up"&gt; &lt;/div&gt;
-                &lt;div class="button" data-type="move-down"&gt; &lt;/div&gt;
-            &lt;/div&gt;
-            &lt;div id="stack_container"&gt;&lt;/div&gt;
-        &lt;/div&gt;
-
-        &lt;div id="preview_zone"&gt;
-            &lt;div id="layer_menu" class="col span_12"&gt;
-                &lt;div class="button" id="element" data-type="subject" data-title="element"&gt; element &lt;/div&gt;
-                &lt;div class="button" id="before" data-type="subject" data-title=":before"&gt;
-                    :before
-                    &lt;span class="delete" data-type="disable"&gt;&lt;/span&gt;
-                &lt;/div&gt;
-                &lt;div class="button" id="after" data-type="subject" data-title=":after"&gt;
-                    :after
-                    &lt;span class="delete" data-type="disable"&gt;&lt;/span&gt;
-                &lt;/div&gt;
-                &lt;div class="ui-checkbox" data-topic='before' data-label=":before"&gt;&lt;/div&gt;
-                &lt;div class="ui-checkbox" data-topic='after' data-label=":after"&gt;&lt;/div&gt;
-            &lt;/div&gt;
-
-            &lt;div id="preview"&gt;
-                &lt;div id="obj-element"&gt;
-                    &lt;div class="content"&gt; &lt;/div&gt;
-                    &lt;div id="obj-before"&gt; &lt;/div&gt;
-                    &lt;div id="obj-after"&gt; &lt;/div&gt;
-                &lt;/div&gt;
-            &lt;/div&gt;
-        &lt;/div&gt;
-    &lt;/div&gt;
-
-    &lt;div id="controls" class="group section"&gt;
-        &lt;div class="wrap-left"&gt;
-            &lt;div class="colorpicker category"&gt;
-                &lt;div class="title"&gt; &lt;/div&gt;
-                &lt;div id="colorpicker" class="group"&gt;
-                    &lt;div id="gradient" class="gradient"&gt;
-                        &lt;div id="gradient_picker"&gt; &lt;/div&gt;
-                    &lt;/div&gt;
-                    &lt;div id="hue" data-topic="hue" class="hue"&gt;
-                        &lt;div id="hue_selector"&gt; &lt;/div&gt;
-                    &lt;/div&gt;
-                    &lt;div class="info"&gt;
-                        &lt;div class="input" data-topic="hue" data-title='H:' data-action="HSV"&gt;&lt;/div&gt;
-                        &lt;div class="input" data-topic="saturation" data-title='S:' data-action="HSV"&gt;&lt;/div&gt;
-                        &lt;div class="input" data-topic="value" data-title='V:' data-action="HSV"&gt;&lt;/div&gt;
-                    &lt;/div&gt;
-                    &lt;div class="alpha"&gt;
-                        &lt;div id="alpha" data-topic="alpha"&gt;
-                            &lt;div id="alpha_selector"&gt; &lt;/div&gt;
-                        &lt;/div&gt;
-                    &lt;/div&gt;
-                    &lt;div class="info"&gt;
-                        &lt;div class="input" data-topic="r" data-title='R:' data-action="RGB"&gt;&lt;/div&gt;
-                        &lt;div class="input" data-topic="g" data-title='G:' data-action="RGB"&gt;&lt;/div&gt;
-                        &lt;div class="input" data-topic="b" data-title='B:' data-action="RGB"&gt;&lt;/div&gt;
-                    &lt;/div&gt;
-                    &lt;div class="preview block"&gt;
-                        &lt;div id="output_color"&gt; &lt;/div&gt;
-                    &lt;/div&gt;
-                    &lt;div class="block info"&gt;
-                        &lt;div class="input" data-topic="a" data-title='alpha:' data-action="alpha"&gt;&lt;/div&gt;
-                        &lt;div class="input" data-topic="hexa" data-title='' data-action="hexa"&gt;&lt;/div&gt;
-                    &lt;/div&gt;
-                &lt;/div&gt;
-            &lt;/div&gt;
-        &lt;/div&gt;
-
-        &lt;div class="wrap-right"&gt;
-
-            &lt;div id="shadow_properties" class="category"&gt;
-                &lt;div class="title"&gt; Shadow properties &lt;/div&gt;
-                &lt;div class="group"&gt;
-                    &lt;div class="group property"&gt;
-                        &lt;div class="ui-slider-name"&gt; inset &lt;/div&gt;
-                        &lt;div class="ui-checkbox" data-topic='inset'&gt;&lt;/div&gt;
-                    &lt;/div&gt;
-                    &lt;div class="slidergroup"&gt;
-                        &lt;div class="ui-slider-name"&gt; Position x &lt;/div&gt;
-                        &lt;div class="ui-slider-btn-set" data-topic="posX" data-type="sub"&gt;&lt;/div&gt;
-                        &lt;div class="ui-slider" data-topic="posX"
-                            data-min="-500" data-max="500" data-step="1"&gt; &lt;/div&gt;
-                        &lt;div class="ui-slider-btn-set" data-topic="posX" data-type="add"&gt;&lt;/div&gt;
-                        &lt;div class="ui-slider-input" data-topic="posX" data-unit="px"&gt;&lt;/div&gt;
-                    &lt;/div&gt;
-                    &lt;div class="slidergroup"&gt;
-                        &lt;div class="ui-slider-name"&gt; Position y &lt;/div&gt;
-                        &lt;div class="ui-slider-btn-set" data-topic="posY" data-type="sub"&gt;&lt;/div&gt;
-                        &lt;div class="ui-slider" data-topic="posY"
-                            data-min="-500" data-max="500" data-step="1"&gt; &lt;/div&gt;
-                        &lt;div class="ui-slider-btn-set" data-topic="posY" data-type="add"&gt;&lt;/div&gt;
-                        &lt;div class="ui-slider-input" data-topic="posY" data-unit="px"&gt;&lt;/div&gt;
-                    &lt;/div&gt;
-                    &lt;div class="slidergroup"&gt;
-                        &lt;div class="ui-slider-name"&gt; Blur &lt;/div&gt;
-                        &lt;div class="ui-slider-btn-set" data-topic="blur" data-type="sub"&gt;&lt;/div&gt;
-                        &lt;div class="ui-slider" data-topic="blur"
-                            data-min="0" data-max="200" data-step="1"&gt; &lt;/div&gt;
-                        &lt;div class="ui-slider-btn-set" data-topic="blur" data-type="add"&gt;&lt;/div&gt;
-                        &lt;div class="ui-slider-input" data-topic="blur" data-unit="px"&gt;&lt;/div&gt;
-                    &lt;/div&gt;
-                    &lt;div class="slidergroup"&gt;
-                        &lt;div class="ui-slider-name"&gt; Spread &lt;/div&gt;
-                        &lt;div class="ui-slider-btn-set" data-topic="spread" data-type="sub"&gt;&lt;/div&gt;
-                        &lt;div class="ui-slider" data-topic="spread"
-                            data-min="-100"    data-max="100" data-step="1" data-value="50"&gt;
-                        &lt;/div&gt;
-                        &lt;div class="ui-slider-btn-set" data-topic="spread" data-type="add"&gt;&lt;/div&gt;
-                        &lt;div class="ui-slider-input" data-topic="spread" data-unit="px"&gt;&lt;/div&gt;
-                    &lt;/div&gt;
-                &lt;/div&gt;
-            &lt;/div&gt;
-
-            &lt;div id="element_properties" class="category"&gt;
-                &lt;div class="title"&gt; Class element properties &lt;/div&gt;
-                &lt;div class="group"&gt;
-                    &lt;div class="group property"&gt;
-                        &lt;div class="ui-slider-name"&gt; border &lt;/div&gt;
-                        &lt;div class="ui-checkbox" data-topic='border-state' data-state="true"&gt;&lt;/div&gt;
-                    &lt;/div&gt;
-                    &lt;div id="z-index" class="slidergroup"&gt;
-                        &lt;div class="ui-slider-name"&gt; z-index &lt;/div&gt;
-                        &lt;div class="ui-slider-btn-set" data-topic="z-index" data-type="sub"&gt;&lt;/div&gt;
-                        &lt;div class="ui-slider" data-topic="z-index"
-                            data-min="-10" data-max="10" data-step="1"&gt;&lt;/div&gt;
-                        &lt;div class="ui-slider-btn-set" data-topic="z-index" data-type="add"&gt;&lt;/div&gt;
-                        &lt;div class="ui-slider-input" data-topic="z-index"&gt;&lt;/div&gt;
-                    &lt;/div&gt;
-                    &lt;div class="slidergroup"&gt;
-                        &lt;div class="ui-slider-name"&gt; top &lt;/div&gt;
-                        &lt;div class="ui-slider-btn-set" data-topic="top" data-type="sub"&gt;&lt;/div&gt;
-                        &lt;div class="ui-slider" data-topic="top"
-                            data-min="-500" data-max="500" data-step="1"&gt; &lt;/div&gt;
-                        &lt;div class="ui-slider-btn-set" data-topic="top" data-type="add"&gt;&lt;/div&gt;
-                        &lt;div class="ui-slider-input" data-topic="top" data-unit="px"&gt;&lt;/div&gt;
-                    &lt;/div&gt;
-                    &lt;div class="slidergroup"&gt;
-                        &lt;div class="ui-slider-name"&gt; left &lt;/div&gt;
-                        &lt;div class="ui-slider-btn-set" data-topic="left" data-type="sub"&gt;&lt;/div&gt;
-                        &lt;div class="ui-slider" data-topic="left"
-                            data-min="-300" data-max="700" data-step="1"&gt; &lt;/div&gt;
-                        &lt;div class="ui-slider-btn-set" data-topic="left" data-type="add"&gt;&lt;/div&gt;
-                        &lt;div class="ui-slider-input" data-topic="left" data-unit="px"&gt;&lt;/div&gt;
-                    &lt;/div&gt;
-                    &lt;div id="transform_rotate" class="slidergroup"&gt;
-                        &lt;div class="ui-slider-name"&gt; Rotate &lt;/div&gt;
-                        &lt;div class="ui-slider-btn-set" data-topic="rotate" data-type="sub"&gt;&lt;/div&gt;
-                        &lt;div class="ui-slider" data-topic="rotate"
-                            data-min="-360" data-max="360" data-step="1" data-value="0"&gt;
-                        &lt;/div&gt;
-                        &lt;div class="ui-slider-btn-set" data-topic="rotate" data-type="add"&gt;&lt;/div&gt;
-                        &lt;div class="ui-slider-input" data-topic="rotate" data-unit="deg"&gt;&lt;/div&gt;
-                    &lt;/div&gt;
-                    &lt;div class="slidergroup"&gt;
-                        &lt;div class="ui-slider-name"&gt; Width &lt;/div&gt;
-                        &lt;div class="ui-slider-btn-set" data-topic="width" data-type="sub"&gt;&lt;/div&gt;
-                        &lt;div class="ui-slider" data-topic="width"
-                            data-min="0" data-max="1000" data-step="1" data-value="200"&gt;
-                        &lt;/div&gt;
-                        &lt;div class="ui-slider-btn-set" data-topic="width" data-type="add"&gt;&lt;/div&gt;
-                        &lt;div class="ui-slider-input" data-topic="width"  data-unit="px"&gt;&lt;/div&gt;
-                    &lt;/div&gt;
-                    &lt;div class="slidergroup"&gt;
-                        &lt;div class="ui-slider-name"&gt; Height &lt;/div&gt;
-                        &lt;div class="ui-slider-btn-set" data-topic="height" data-type="sub"&gt;&lt;/div&gt;
-                        &lt;div class="ui-slider" data-topic="height"
-                            data-min="0" data-max="400" data-step="1" data-value="200"&gt;
-                        &lt;/div&gt;
-                        &lt;div class="ui-slider-btn-set" data-topic="height" data-type="add"&gt;&lt;/div&gt;
-                        &lt;div class="ui-slider-input" data-topic="height" data-unit="px"&gt;&lt;/div&gt;
-                    &lt;/div&gt;
-                &lt;/div&gt;
-            &lt;/div&gt;
-
-            &lt;div id="output" class="category"&gt;
-                &lt;div id="menu" class="menu"&gt;&lt;/div&gt;
-                &lt;div class="title"&gt;    CSS Code &lt;/div&gt;
-                &lt;div class="group" style="border-top-left-radius: 0;"&gt;
-                    &lt;div class="output" data-topic="element" data-name="element"
-                        data-prop="width height background-color position=[relative] box-shadow"&gt;
-                    &lt;/div&gt;
-                    &lt;div class="output" data-topic="before" data-name="element:before"
-                        data-prop="content=[&amp;quot;&amp;quot;] position=[absolute] width height top left z-index background-color box-shadow transform -webkit-transform -ms-transform"&gt;
-                    &lt;/div&gt;
-                    &lt;div class="output" data-topic="after" data-name="element:after"
-                        data-prop="content=[&amp;quot;&amp;quot;] position=[absolute] width height top left z-index background-color box-shadow transform -webkit-transform -ms-transform"&gt;
-                    &lt;/div&gt;
-                &lt;/div&gt;
-            &lt;/div&gt;
-        &lt;/div&gt;
-    &lt;/div&gt;
-&lt;/div&gt;
-</pre>
-
-<h3 id="CSS_Content">CSS Content</h3>
-
-<pre class="brush: css">/*  GRID OF TWELVE
- * ========================================================================== */
-
-.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 Slider
- */
-
-.slidergroup {
-	height: 20px;
-	margin: 10px 0;
-	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
-	-moz-user-select: none;
-	user-select: none;
-}
-
-.slidergroup * {
-	float: left;
-	height: 100%;
-	line-height: 100%;
-}
-
-/* Slider */
-
-.ui-slider {
-	height: 10px;
-	width: 200px;
-	margin: 4px 10px;
-	display: block;
-	border: 1px solid #999;
-	border-radius: 3px;
-	background: #EEE;
-}
-
-.ui-slider:hover {
-	cursor: pointer;
-}
-
-.ui-slider-name {
-	width: 90px;
-	padding: 0 10px 0 0;
-	text-align: right;
-	text-transform: lowercase;
-}
-
-.ui-slider-pointer {
-	width: 13px;
-	height: 13px;
-	background-color: #EEE;
-	border: 1px solid #2C9FC9;
-	border-radius: 3px;
-	position: relative;
-	top: -3px;
-	left: 0%;
-}
-
-.ui-slider-btn-set {
-	width: 25px;
-	background-color: #2C9FC9;
-	border-radius: 3px;
-	color: #FFF;
-	font-weight: bold;
-	text-align: center;
-}
-
-.ui-slider-btn-set:hover {
-	background-color: #379B4A;
-	cursor: pointer;
-}
-
-.ui-slider-input &gt; input {
-	margin: 0 10px;
-	padding: 0;
-	width: 50px;
-	text-align: center;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-}
-
-/*
- * UI Button
- */
-
-/* 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 &gt; input {
- 	display: none;
-}
-
-.ui-checkbox &gt; 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 &gt; label:hover {
-	cursor: pointer;
-}
-
-.ui-checkbox &gt; input:checked + label {
-	background-image: url("https://mdn.mozillademos.org/files/5681/checked.png");
-	background-color: #379B4A;
-}
-
-/*
- * BOX SHADOW GENERATOR TOOL
- */
-
-body {
-	max-width: 1000px;
-	height: 800px;
-	margin: 20px auto 0;
-
-	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;
-}
-
-#container {
-	width: 100%;
-	padding: 2px;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-}
-
-
-/* container with shadows stacks */
-#stack_container {
-	height: 400px;
-	overflow: hidden;
-	position: relative;
-	border: 1px solid #CCC;
-	border-radius: 3px;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-}
-
-#stack_container .container {
-	height: 100%;
-	width: 100%;
-	position: absolute;
-	left: 100%;
-	transition-property: left;
-	transition-duration: 0.5s;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-}
-
-
-#stack_container .title {
-	text-align: center;
-	font-weight: bold;
-	line-height: 2em;
-	border-bottom: 1px solid #43A6E1;
-	color: #666;
-}
-
-
-/*
- * Stack of Layers for shadow
- */
-
-#layer_manager {
-	width: 17%;
-	background-color: #FEFEFE;
-	margin: 0 1% 0 0;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-	float: left;
-}
-
-
-#layer_manager .button {
-	width: 30%;
-	height: 25px;
-	margin:0 0 10px;
-	color: #333;
-	background-color: #EEE;
-	text-align: center;
-	font-size: 0.75em;
-	line-height: 1.5em;
-	border: 1px solid #CCC;
-	border-radius: 3px;
-
-	display: block;
-	background-position: center center;
-	background-repeat: no-repeat;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-	float: left;
-}
-
-#layer_manager .button:hover {
-	background-color: #3380C4;
-	border: 1px solid #3380C4;
-	cursor: pointer;
-}
-
-#layer_manager [data-type='add'] {
-	background-image: url("https://mdn.mozillademos.org/files/5685/add-black.png");
-}
-
-#layer_manager [data-type='add']:hover {
-	background-image: url("https://mdn.mozillademos.org/files/5687/add-white.png");
-}
-
-#layer_manager [data-type='move-up'] {
-	background-image: url("https://mdn.mozillademos.org/files/5697/up-black.png");
-	margin-left: 5%;
-	margin-right: 5%;
-}
-
-#layer_manager [data-type='move-up']:hover {
-	background-image: url("https://mdn.mozillademos.org/files/5709/up-white.png");
-}
-
-#layer_manager [data-type='move-down'] {
-	background-image: url("https://mdn.mozillademos.org/files/5693/down-black.png");
-}
-
-#layer_manager [data-type='move-down']:hover {
-	background-image: url("https://mdn.mozillademos.org/files/5695/down-white.png");
-}
-
-/* shadows classes */
-
-#layer_manager .node {
-	width: 100%;
-	margin: 5px 0;
-	padding: 5px;
-	text-align: center;
-	background-color: #EEE;
-	border: 1px solid #DDD;
-	font-size: 0.75em;
-	line-height: 1.5em;
-	color: #333;
-	border-radius: 3px;
-
-	position: relative;
-	display: block;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-}
-
-#layer_manager .node:hover {
-	color: #FFF;
-	background-color: #3380C4;
-	cursor: pointer;
-}
-
-/* active element styling */
-
-#layer_manager [data-active='layer'] {
-	color: #FFF;
-	border: none;
-	background-color: #379B4A;
-}
-
-#layer_manager [data-active='subject'] {
-	color: #FFF;
-	background-color: #467FC9;
-}
-
-/* delete button */
-
-#layer_manager .delete {
-	width: 1.5em;
-	height: 100%;
-	float: right;
-	border-radius: 3px;
-	background-image: url("https://mdn.mozillademos.org/files/5689/delete-white.png");
-	background-position: center center;
-	background-repeat: no-repeat;
-	position: absolute;
-	top: 0;
-	right: 10px;
-	display: none;
-}
-
-#layer_manager .delete:hover {
-	background-image: url("https://mdn.mozillademos.org/files/5691/delete-yellow.png");
-}
-
-#layer_manager .node:hover .delete {
-	display: block;
-}
-
-
-#layer_manager .stack {
-	padding: 0 5px;
-	max-height: 90%;
-	overflow: auto;
-	overflow-x: hidden;
-}
-
-
-/*
- * Layer Menu
- */
-
-#layer_menu {
-	margin: 0 0 10px 0;
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-}
-
-#layer_menu .button {
-	width: 100px;
-	margin: 0 5px 0 0;
-	padding: 2.5px;
-	color: #333;
-	background-color: #EEE;
-	border: 1px solid #CCC;
-	border-radius: 3px;
-	text-align: center;
-	font-size: 0.75em;
-	line-height: 1.5em;
-
-	position: relative;
-	display: block;
-	float: left;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-}
-
-#layer_menu .button:hover {
-	color: #FFF;
-	background-color: #3380C4;
-	border: 1px solid #3380C4;
-	cursor: pointer;
-}
-
-#layer_menu .delete {
-	width: 1.5em;
-	height: 100%;
-	float: right;
-	border-radius: 3px;
-	background-image: url("https://mdn.mozillademos.org/files/5689/delete-white.png");
-	background-position: center center;
-	background-repeat: no-repeat;
-	position: absolute;
-	top: 0;
-	right: 5px;
-	display: none;
-}
-
-#layer_menu .delete:hover {
-	background-image: url("https://mdn.mozillademos.org/files/5691/delete-yellow.png");
-}
-
-#layer_menu .button:hover .delete {
-	display: block;
-}
-
-
-/*
- * active element styling
- */
-
-#layer_menu [data-active='subject'] {
-	color: #FFF;
-	background-color: #379B4A;
-	border: 1px solid #379B4A;
-}
-
-
-/* Checkbox */
-
-#layer_menu .ui-checkbox &gt; label {
-	height: 15px;
-	line-height: 17px;
-	font-weight: normal;
-	width: 46px;
-	margin: 0 5px 0 0;
-}
-
-#layer_menu .ui-checkbox &gt; input:checked + label {
-	display: none;
-}
-
-
-/******************************************************************************/
-/******************************************************************************/
-/*
- * Preview Area
- */
-
-#preview_zone {
-	width: 82%;
-	float: left;
-
-}
-
-
-#preview {
-	width: 100%;
-	height: 400px;
-	border: 1px solid #CCC;
-	border-radius: 3px;
-	text-align: center;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-	cursor: move;
-	float: left;
-}
-
-#preview .content {
-	width: 100%;
-	height: 100%;
-	display: block;
-}
-
-#obj-element {
-	width: 300px;
-	height: 100px;
-	border: 1px solid #CCC;
-	background: #FFF;
-	position: relative;
-}
-
-
-#obj-before {
-	height: 100%;
-	width: 100%;
-	background: #999;
-	border: 1px solid #CCC;
-	text-align: left;
-	display : block;
-	position: absolute;
-	z-index: -1;
-}
-
-#obj-after {
-	height: 100%;
-	width: 100%;
-	background: #DDD;
-	border: 1px solid #CCC;
-	text-align: right;
-	display : block;
-	position: absolute;
-	z-index: -1;
-}
-
-
-/******************************************************************************/
-/******************************************************************************/
-
-/**
- * Controls
- */
-
-.wrap-left {
-	float: left;
-	overflow: hidden;
-}
-
-.wrap-right {
-	float: right;
-	overflow: hidden;
-}
-
-.wrap-left &gt; * {
-	float: left;
-}
-
-.wrap-right &gt; * {
-	float: right;
-}
-
-@media (min-width: 960px) {
-
-	.wrap-left {
-		width: 45%;
-	}
-
-	.wrap-right {
-		width: 55%;
-	}
-}
-
-
-@media (max-width: 959px) {
-
-	.wrap-left {
-		width: 30%;
-	}
-
-	.wrap-right {
-		width: 70%;
-	}
-}
-
-
-#controls {
-	color: #444;
-	margin: 10px 0 0 0;
-}
-
-
-#controls .category {
-	width: 500px;
-	margin: 0 auto 20px;
-	padding: 0;
-
-}
-
-#controls .category .title {
-	width: 100%;
-	height: 1.5em;
-	line-height: 1.5em;
-	color: #AAA;
-	text-align: right;
-}
-
-#controls .category &gt; .group {
-	border: 1px solid #CCC;
-	border-radius: 3px;
-}
-
-
-/**
- * 	Color Picker
- */
-
-@media (min-width: 960px) {
-	#controls .colorpicker {
-		width: 420px;
-	}
-}
-
-@media (max-width: 959px) {
-	#controls .colorpicker {
-		width: 210px;
-	}
-}
-
-#colorpicker {
-	width: 100%;
-	margin: 0 auto;
-}
-
-#colorpicker .gradient {
-	width: 200px;
-	height: 200px;
-	margin: 5px;
-	background: url("https://mdn.mozillademos.org/files/5707/picker_mask_200.png");
-	background: -moz-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
-				-moz-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
-	background: -webkit-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
-				-webkit-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
-	background-color: #F00;
-	float: left;
-}
-
-#colorpicker .hue {
-	width: 200px;
-	height: 30px;
-	margin: 5px;
-	background: url("https://mdn.mozillademos.org/files/5701/hue.png");
-	background: -moz-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
-				#00F 66.66%, #F0F 83.33%, #F00 100%);
-	background: -webkit-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
-				#00F 66.66%, #F0F 83.33%, #F00 100%);
-	float: left;
-}
-
-#colorpicker .alpha {
-	width: 200px;
-	height: 30px;
-	margin: 5px;
-	border: 1px solid #CCC;
-	float: left;
-	background: url("https://mdn.mozillademos.org/files/5705/alpha.png");
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-}
-
-#colorpicker #alpha {
-	width: 100%;
-	height: 100%;
-	background: url("https://mdn.mozillademos.org/files/5703/alpha_mask.png");
-	background: -moz-linear-gradient(left, rgba(255, 0, 0, 0) 0%, rgba(255, 0, 0, 1) 100%);
-}
-
-#colorpicker #gradient_picker {
-	width: 0.5em;
-	height: 0.5em;
-	border-radius: 0.4em;
-	border: 2px solid #CCC;
-	position: relative;
-	top: 20%;
-	left: 20%;
-}
-
-#colorpicker #hue_selector,
-#colorpicker #alpha_selector {
-	width: 3px;
-	height: 100%;
-	border: 1px solid #777;
-	background-color: #FFF;
-	position: relative;
-	top: -1px;
-	left: 0%;
-}
-
-/* input HSV and RGB */
-#colorpicker .info {
-	width: 200px;
-	margin: 5px;
-	float: left;
-}
-
-#colorpicker .info * {
-	float: left;
-}
-
-#colorpicker .info input {
-	margin: 0;
-	text-align: center;
-	width: 30px;
-	-moz-user-select: text;
-	-webkit-user-select: text;
-	-ms-user-select: text;
-}
-
-#colorpicker .info span {
-	height: 20px;
-	width: 30px;
-	text-align: center;
-	line-height: 20px;
-	display: block;
-}
-
-/* Preview color */
-#colorpicker .block {
-	width: 95px;
-	height: 54px;
-	float: left;
-	position: relative;
-}
-
-#colorpicker .preview {
-	margin: 5px;
-	border: 1px solid #CCC;
-	background-image: url("https://mdn.mozillademos.org/files/5705/alpha.png");
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-}
-
-#colorpicker .preview:before {
-	height: 100%;
-	width: 50%;
-	left: 50%;
-	content: "";
-	background: #FFF;
-	position: absolute;
-	z-index: 1;
-}
-
-#colorpicker .preview &gt; * {
-	width: 50%;
-	height: 100%;
-}
-
-#colorpicker #output_color {
-	width: 100%;
-	height: 100%;
-	position: absolute;
-	z-index: 2;
-}
-
-#colorpicker .block .input {
-	float: right;
-}
-
-#colorpicker [data-topic="a"] &gt; span {
-	width: 50px;
-}
-
-#colorpicker [data-topic="hexa"] {
-	float: right;
-	margin: 10px 0 0 0;
-}
-
-#colorpicker [data-topic="hexa"] &gt; span {
-	display: none;
-}
-
-#colorpicker [data-topic="hexa"] &gt; input {
-	width: 85px;
-	padding: 2px 0;
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-}
-
-
-/*
- * UI Components
- */
-
-/* Property */
-
-.property {
-	height: 20px;
-	margin: 10px 0;
-}
-
-.property * {
-	float: left;
-	height: 100%;
-	line-height: 100%;
-}
-
-/* Slider */
-
-#controls .ui-slider-name {
-	margin: 0 10px 0 0;
-}
-
-/*
- * Output code styling
- */
-
-#output {
-	position: relative;
-}
-
-#output .menu {
-	max-width: 70%;
-	height: 20px;
-	position: absolute;
-	top: 2px;
-}
-
-#output .button {
-	width: 90px;
-	height: 22px;
-	margin: 0 5px 0 0;
-	text-align: center;
-	line-height: 20px;
-	font-size: 14px;
-	color: #FFF;
-	background-color: #999;
-	border-top-left-radius: 3px;
-	border-top-right-radius: 3px;
-	bottom: -5px;
-	float:left;
-}
-
-#output .button:hover {
-	color: #FFF;
-	background-color: #666;
-	cursor: pointer;
-}
-
-#output .menu [data-active="true"] {
-	color: #777;
-	background-color: #FFF;
-	border: 1px solid #CCC;
-	border-bottom: none;
-}
-
-#output .menu [data-topic="before"] {
-	left: 100px;
-}
-
-#output .menu [data-topic="after"] {
-	left: 200px;
-}
-
-#output .output {
-	width: 480px;
-	margin: 10px;
-	padding: 10px;
-	overflow: hidden;
-	color: #555;
-	font-size: 14px;
-	border: 1px dashed #CCC;
-	border-radius: 3px;
-	display: none;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-
-	-moz-user-select: text;
-	-webkit-user-select: text;
-	-ms-user-select: text;
-}
-
-#output .css-property {
-	width: 100%;
-	float: left;
-	white-space: pre;
-}
-
-#output .name {
-	width: 35%;
-	float: left;
-}
-
-#output .value {
-	width: 65%;
-	float: left;
-}
-
-</pre>
-
-<h3 id="JavaScript_Content">JavaScript Content</h3>
-
-<pre class="brush: js">
-
-'use strict';
-
-/**
- * UI-SlidersManager
- */
-
-var SliderManager = (function SliderManager() {
-
-	var subscribers = {};
-	var sliders = [];
-
-	var Slider = 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 snap = node.getAttribute('data-snap');
-		var topic = node.getAttribute('data-topic');
-
-		this.min = min;
-		this.max = max &gt; 0 ? max : 100;
-		this.step = step === 0 ? 1 : step;
-		this.value = value &lt;= max &amp;&amp; value &gt;= min ? value : (min + max) / 2 | 0;
-		this.snap = snap === "true" ? true : false;
-		this.topic = topic;
-		this.node = node;
-
-		var pointer = document.createElement('div');
-		pointer.className = 'ui-slider-pointer';
-		node.appendChild(pointer);
-		this.pointer = pointer;
-
-		setMouseTracking(node, updateSlider.bind(this));
-
-		sliders[topic] = this;
-		setValue(topic, this.value);
-	}
-
-	var setButtonComponent = function setButtonComponent(node) {
-		var type = node.getAttribute('data-type');
-		var topic = node.getAttribute('data-topic');
-		if (type === "sub") {
-			node.textContent = '-';
-			node.addEventListener("click", function() {
-				decrement(topic);
-			});
-		}
-		if (type === "add") {
-			node.textContent = '+';
-			node.addEventListener("click", function() {
-				increment(topic);
-			});
-		}
-	}
-
-	var setInputComponent = function setInputComponent(node) {
-		var topic		= node.getAttribute('data-topic');
-		var unit_type	= node.getAttribute('data-unit');
-
-		var input = document.createElement('input');
-		var unit = document.createElement('span');
-		unit.textContent = unit_type;
-
-		input.setAttribute('type', 'text');
-		node.appendChild(input);
-		node.appendChild(unit);
-
-		input.addEventListener('click', function(e) {
-			this.select();
-		});
-
-		input.addEventListener('change', function(e) {
-			setValue(topic, e.target.value | 0);
-		});
-
-		subscribe(topic, function(value) {
-			node.children[0].value = value;
-		});
-	}
-
-	var increment = function increment(topic) {
-		var slider = sliders[topic];
-		if (slider === null || slider === undefined)
-			return;
-
-		if (slider.value + slider.step &lt;= slider.max) {
-			slider.value += slider.step;
-			setValue(slider.topic, slider.value)
-			notify.call(slider);
-		}
-	};
-
-	var decrement = function decrement(topic) {
-		var slider = sliders[topic];
-		if (slider === null || slider === undefined)
-			return;
-
-		if (slider.value - slider.step &gt;= slider.min) {
-			slider.value -= slider.step;
-			setValue(topic, slider.value)
-			notify.call(slider);
-		}
-	}
-
-	// this = Slider object
-	var updateSlider = function updateSlider(e) {
-		var node = this.node;
-		var pos = e.pageX - node.offsetLeft;
-		var width = node.clientWidth;
-		var delta = this.max - this.min;
-		var offset = this.pointer.clientWidth + 4; // border width * 2
-
-		if (pos &lt; 0) pos = 0;
-		if (pos &gt; width) pos = width;
-
-		var value = pos * delta / width | 0;
-		var precision = value % this.step;
-		value = value - precision + this.min;
-		if (precision &gt; this.step / 2)
-			value = value + this.step;
-
-		if (this.snap)
-			pos =  (value - this.min) * width / delta;
-
-		this.pointer.style.left = pos - offset/2 + "px";
-		this.value = value;
-		node.setAttribute('data-value', value);
-		notify.call(this);
-	}
-
-	var setValue = function setValue(topic, value) {
-		var slider = sliders[topic];
-
-		if (value &gt; slider.max || value &lt; slider.min)
-			return;
-
-		var delta = slider.max - slider.min;
-		var width = slider.node.clientWidth;
-		var offset = slider.pointer.clientWidth;
-		var pos =  (value - slider.min) * width / delta;
-		slider.value = value;
-		slider.pointer.style.left = pos - offset / 2 + "px";
-		slider.node.setAttribute('data-value', value);
-		notify.call(slider);
-	}
-
-	var setMouseTracking = function setMouseTracking(elem, callback) {
-		elem.addEventListener("mousedown", function(e) {
-			callback(e);
-			document.addEventListener("mousemove", callback);
-		});
-
-		document.addEventListener("mouseup", function(e) {
-			document.removeEventListener("mousemove", callback);
-		});
-	}
-
-	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() {
-		if (subscribers[this.topic] === undefined)
-			return;
-
-		for (var i in subscribers[this.topic]) {
-			subscribers[this.topic][i](this.value);
-		}
-	}
-
-	var init = function init() {
-		var elem, size;
-
-		elem = document.querySelectorAll('.ui-slider-btn-set');
-		size = elem.length;
-		for (var i = 0; i &lt; size; i++)
-			setButtonComponent(elem[i]);
-
-		elem = document.querySelectorAll('.ui-slider-input');
-		size = elem.length;
-		for (var i = 0; i &lt; size; i++)
-			setInputComponent(elem[i]);
-
-		elem = document.querySelectorAll('.ui-slider');
-		size = elem.length;
-		for (var i = 0; i &lt; size; i++)
-			new Slider(elem[i]);
-	}
-
-	return {
-		init : init,
-		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;
-			notify.call(buttons[topic]);
-		}
-		catch(error) {
-			console.log(error, topic, value);
-		}
-	}
-
-	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() {
-		if (subscribers[this.topic] === undefined)
-			return;
-		for (var i = 0; i &lt; 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 &lt; size; i++)
-			new CheckBox(elem[i]);
-	}
-
-	return {
-		init : init,
-		setValue : setValue,
-		subscribe : subscribe,
-		unsubscribe : unsubscribe
-	}
-
-})();
-
-
-window.addEventListener("load", function(){
-	BoxShadow.init();
-});
-
-var BoxShadow = (function BoxShadow() {
-
-	function getElemById(id) {
-		return document.getElementById(id);
-	}
-
-	/**
-	 * RGBA Color class
-	 */
-
-	function Color() {
-		this.r = 0;
-		this.g = 0;
-		this.b = 0;
-		this.a = 1;
-		this.hue = 0;
-		this.saturation = 0;
-		this.value = 0;
-	}
-
-	Color.prototype.copy = function copy(obj) {
-		if(obj instanceof Color !== true) {
-			console.log("Typeof instance not Color");
-			return;
-		}
-
-		this.r = obj.r;
-		this.g = obj.g;
-		this.b = obj.b;
-		this.a = obj.a;
-		this.hue = obj.hue;
-		this.saturation = obj.saturation;
-		this.value = obj.value;
-	}
-
-	Color.prototype.setRGBA = function setRGBA(red, green, blue, alpha) {
-		if (red != undefined)
-			this.r = red | 0;
-		if (green != undefined)
-			this.g = green | 0;
-		if (blue != undefined)
-			this.b = blue | 0;
-		if (alpha != undefined)
-			this.a = alpha | 0;
-	}
-
-	/**
-	 * HSV/HSB (hue, saturation, value / brightness)
-	 * @param hue			0-360
-	 * @param saturation	0-100
-	 * @param value 		0-100
-	 */
-	Color.prototype.setHSV = function setHSV(hue, saturation, value) {
-		this.hue = hue;
-		this.saturation = saturation;
-		this.value = value;
-		this.updateRGB();
-	}
-
-	Color.prototype.updateRGB = function updateRGB() {
-		var sat = this.saturation / 100;
-		var value = this.value / 100;
-		var C = sat * value;
-		var H = this.hue / 60;
-		var X = C * (1 - Math.abs(H % 2 - 1));
-		var m = value - C;
-		var precision = 255;
-
-		C = (C + m) * precision;
-		X = (X + m) * precision;
-		m = m * precision;
-
-		if (H &gt;= 0 &amp;&amp; H &lt; 1) {	this.setRGBA(C, X, m);	return; }
-		if (H &gt;= 1 &amp;&amp; H &lt; 2) {	this.setRGBA(X, C, m);	return; }
-		if (H &gt;= 2 &amp;&amp; H &lt; 3) {	this.setRGBA(m, C, X);	return; }
-		if (H &gt;= 3 &amp;&amp; H &lt; 4) {	this.setRGBA(m, X, C);	return; }
-		if (H &gt;= 4 &amp;&amp; H &lt; 5) {	this.setRGBA(X, m, C);	return; }
-		if (H &gt;= 5 &amp;&amp; H &lt; 6) {	this.setRGBA(C, m, X);	return; }
-	}
-
-	Color.prototype.updateHSV = function updateHSV() {
-		var red		= this.r / 255;
-		var green	= this.g / 255;
-		var blue	= this.b / 255;
-
-		var cmax = Math.max(red, green, blue);
-		var cmin = Math.min(red, green, blue);
-		var delta = cmax - cmin;
-		var hue = 0;
-		var saturation = 0;
-
-		if (delta) {
-			if (cmax === red ) { hue = ((green - blue) / delta); }
-			if (cmax === green ) { hue = 2 + (blue - red) / delta; }
-			if (cmax === blue ) { hue = 4 + (red - green) / delta; }
-			if (cmax) saturation = delta / cmax;
-		}
-
-		this.hue = 60 * hue | 0;
-		if (this.hue &lt; 0) this.hue += 360;
-		this.saturation = (saturation * 100) | 0;
-		this.value = (cmax * 100) | 0;
-	}
-
-	Color.prototype.setHexa = function setHexa(value) {
-		var valid  = /(^#{0,1}[0-9A-F]{6}$)|(^#{0,1}[0-9A-F]{3}$)/i.test(value)
-		if (valid !== true)
-			return;
-
-		if (value[0] === '#')
-			value = value.slice(1, value.length);
-
-		if (value.length === 3)
-			value = value.replace(/([0-9A-F])([0-9A-F])([0-9A-F])/i,"$1$1$2$2$3$3");
-
-		this.r = parseInt(value.substr(0, 2), 16);
-		this.g = parseInt(value.substr(2, 2), 16);
-		this.b = parseInt(value.substr(4, 2), 16);
-
-		this.alpha	= 1;
-	}
-
-	Color.prototype.getHexa = function getHexa() {
-		var r = this.r.toString(16);
-		var g = this.g.toString(16);
-		var b = this.b.toString(16);
-		if (this.r &lt; 16) r = '0' + r;
-		if (this.g &lt; 16) g = '0' + g;
-		if (this.b &lt; 16) b = '0' + b;
-		var value = '#' + r + g + b;
-		return value.toUpperCase();
-	}
-
-	Color.prototype.getRGBA = function getRGBA() {
-
-		var rgb = "(" + this.r + ", " + this.g + ", " + this.b;
-		var a = '';
-		var v = '';
-		if (this.a !== 1) {
-			a = 'a';
-			v = ', ' + this.a;
-		}
-
-		var value = "rgb" + a + rgb + v + ")";
-		return value;
-	}
-
-	Color.prototype.getColor = function getColor() {
-		if (this.a | 0 === 1)
-			return this.getHexa();
-		return this.getRGBA();
-	}
-
-	/**
-	 * Shadow Object
-	 */
-	function Shadow() {
-		this.inset  = false;
-		this.posX   = 5;
-		this.posY   = -5;
-		this.blur   = 5;
-		this.spread = 0;
-		this.color  = new Color();
-
-		var hue			= (Math.random() * 360) | 0;
-		var saturation	= (Math.random() * 75) | 0;
-		var value 		= (Math.random() * 50 + 50) | 0;
-		this.color.setHSV(hue, saturation, value, 1);
-	}
-
-	Shadow.prototype.computeCSS = function computeCSS() {
-		var value = "";
-		if (this.inset === true)
-			value += "inset ";
-		value += this.posX + "px ";
-		value += this.posY + "px ";
-		value += this.blur + "px ";
-		value += this.spread + "px ";
-		value += this.color.getColor();
-
-		return value;
-	}
-
-	Shadow.prototype.toggleInset = function toggleInset(value) {
-		if (value !== undefined || typeof value === "boolean")
-			this.inset = value;
-		else
-			this.inset = this.inset === true ? false : true;
-	}
-
-	Shadow.prototype.copy = function copy(obj) {
-		if(obj instanceof Shadow !== true) {
-			console.log("Typeof instance not Shadow");
-			return;
-		}
-
-		this.inset  = obj.inset;
-		this.posX   = obj.posX;
-		this.posY   = obj.posY;
-		this.blur   = obj.blur;
-		this.spread = obj.spread;
-		this.color.copy(obj.color);
-	}
-
-	/**
-	 * Color Picker
-	 */
-	var ColoPicker = (function ColoPicker() {
-
-		var colorpicker;
-		var hue_area;
-		var gradient_area;
-		var alpha_area;
-		var gradient_picker;
-		var hue_selector;
-		var alpha_selector;
-		var pick_object;
-		var info_rgb;
-		var info_hsv;
-		var info_hexa;
-		var output_color;
-		var color = new Color();
-		var subscribers = [];
-
-		var updateColor = function updateColor(e) {
-			var x = e.pageX - gradient_area.offsetLeft;
-			var y = e.pageY - gradient_area.offsetTop;
-
-			// width and height should be the same
-			var size = gradient_area.clientWidth;
-
-			if (x &gt; size)
-				x = size;
-			if (y &gt; size)
-				y = size;
-
-			if (x &lt; 0) x = 0;
-			if (y &lt; 0) y = 0;
-
-			var value = 100 - (y * 100 / size) | 0;
-			var saturation = x * 100 / size | 0;
-
-			color.setHSV(color.hue, saturation, value);
-			// should update just
-			// color pointer location
-			updateUI();
-			notify("color", color);
-		}
-
-		var updateHue = function updateHue(e) {
-			var x = e.pageX - hue_area.offsetLeft;
-			var width = hue_area.clientWidth;
-
-			if (x &lt; 0) x = 0;
-			if (x &gt; width) x = width;
-
-			var hue = ((360 * x) / width) | 0;
-			if (hue === 360) hue = 359;
-
-			color.setHSV(hue, color.saturation, color.value);
-
-			// should update just
-			// hue pointer location
-			// picker area background
-			// alpha area background
-			updateUI();
-			notify("color", color);
-		}
-
-		var updateAlpha = function updateAlpha(e) {
-			var x = e.pageX - alpha_area.offsetLeft;
-			var width = alpha_area.clientWidth;
-
-			if (x &lt; 0) x = 0;
-			if (x &gt; width) x = width;
-
-			color.a = (x / width).toFixed(2);
-
-			// should update just
-			// alpha pointer location
-			updateUI();
-			notify("color", color);
-		}
-
-		var setHueGfx = function setHueGfx(hue) {
-			var sat = color.saturation;
-			var val = color.value;
-			var alpha = color.a;
-
-			color.setHSV(hue, 100, 100);
-			gradient_area.style.backgroundColor = color.getHexa();
-
-			color.a = 0;
-			var start = color.getRGBA();
-			color.a = 1;
-			var end = color.getRGBA();
-			color.a = alpha;
-
-			var gradient = '-moz-linear-gradient(left, ' +	start + '0%, ' + end + ' 100%)';
-			alpha_area.style.background = gradient;
-		}
-
-		var updateUI = function updateUI() {
-			var x, y;		// coordinates
-			var size;		// size of the area
-			var offset;		// pointer graphic selector offset
-
-			// Set color pointer location
-			size = gradient_area.clientWidth;
-			offset = gradient_picker.clientWidth / 2 + 2;
-
-			x = (color.saturation * size / 100) | 0;
-			y = size - (color.value * size / 100) | 0;
-
-			gradient_picker.style.left = x - offset + "px";
-			gradient_picker.style.top = y - offset + "px";
-
-			// Set hue pointer location
-			size = hue_area.clientWidth;
-			offset = hue_selector.clientWidth/2;
-			x = (color.hue * size / 360 ) | 0;
-			hue_selector.style.left = x - offset + "px";
-
-			// Set alpha pointer location
-			size = alpha_area.clientWidth;
-			offset = alpha_selector.clientWidth/2;
-			x = (color.a * size) | 0;
-			alpha_selector.style.left = x - offset + "px";
-
-			// Set picker area background
-			var nc = new Color();
-			nc.copy(color);
-			if (nc.hue === 360) nc.hue = 0;
-			nc.setHSV(nc.hue, 100, 100);
-			gradient_area.style.backgroundColor = nc.getHexa();
-
-			// Set alpha area background
-			nc.copy(color);
-			nc.a = 0;
-			var start = nc.getRGBA();
-			nc.a = 1;
-			var end = nc.getRGBA();
-			var gradient = '-moz-linear-gradient(left, ' +	start + '0%, ' + end + ' 100%)';
-			alpha_area.style.background = gradient;
-
-			// Update color info
-			notify("color", color);
-			notify("hue", color.hue);
-			notify("saturation", color.saturation);
-			notify("value", color.value);
-			notify("r", color.r);
-			notify("g", color.g);
-			notify("b", color.b);
-			notify("a", color.a);
-			notify("hexa", color.getHexa());
-			output_color.style.backgroundColor = color.getRGBA();
-		}
-
-		var setInputComponent = function setInputComponent(node) {
-			var topic = node.getAttribute('data-topic');
-			var title = node.getAttribute('data-title');
-			var action = node.getAttribute('data-action');
-			title = title === null ? '' : title;
-
-			var input = document.createElement('input');
-			var info = document.createElement('span');
-			info.textContent = title;
-
-			input.setAttribute('type', 'text');
-			input.setAttribute('data-action', 'set-' + action + '-' + topic);
-			node.appendChild(info);
-			node.appendChild(input);
-
-			input.addEventListener('click', function(e) {
-				this.select();
-			});
-
-			input.addEventListener('change', function(e) {
-				if (action === 'HSV')
-					inputChangeHSV(topic);
-				if (action === 'RGB')
-					inputChangeRGB(topic);
-				if (action === 'alpha')
-					inputChangeAlpha(topic);
-				if (action === 'hexa')
-					inputChangeHexa(topic);
-			});
-
-			subscribe(topic, function(value) {
-				node.children[1].value = value;
-			});
-		}
-
-		var inputChangeHSV = function actionHSV(topic) {
-			var selector = "[data-action='set-HSV-" + topic + "']";
-			var node = document.querySelector("#colorpicker " + selector);
-			var value = parseInt(node.value);
-
-			if (typeof value === 'number' &amp;&amp; isNaN(value) === false &amp;&amp;
-				value &gt;= 0 &amp;&amp; value &lt; 360)
-				color[topic] = value;
-
-			color.updateRGB();
-			updateUI();
-		}
-
-		var inputChangeRGB = function inputChangeRGB(topic) {
-			var selector = "[data-action='set-RGB-" + topic + "']";
-			var node = document.querySelector("#colorpicker " + selector);
-			var value = parseInt(node.value);
-
-			if (typeof value === 'number' &amp;&amp; isNaN(value) === false &amp;&amp;
-				value &gt;= 0 &amp;&amp; value &lt;= 255)
-				color[topic] = value;
-
-			color.updateHSV();
-			updateUI();
-		}
-
-		var inputChangeAlpha = function inputChangeAlpha(topic) {
-			var selector = "[data-action='set-alpha-" + topic + "']";
-			var node = document.querySelector("#colorpicker " + selector);
-			var value = parseFloat(node.value);
-
-			if (typeof value === 'number' &amp;&amp; isNaN(value) === false &amp;&amp;
-				value &gt;= 0 &amp;&amp; value &lt;= 1)
-				color.a = value.toFixed(2);
-
-			updateUI();
-		}
-
-		var inputChangeHexa = function inputChangeHexa(topic) {
-			var selector = "[data-action='set-hexa-" + topic + "']";
-			var node = document.querySelector("#colorpicker " + selector);
-			var value = node.value;
-			color.setHexa(value);
-			color.updateHSV();
-			updateUI();
-		}
-
-		var setMouseTracking = function setMouseTracking(elem, callback) {
-
-			elem.addEventListener("mousedown", function(e) {
-				callback(e);
-				document.addEventListener("mousemove", callback);
-			});
-
-			document.addEventListener("mouseup", function(e) {
-				document.removeEventListener("mousemove", callback);
-			});
-		}
-
-		/*
-		 * Observer
-		 */
-		var setColor = function setColor(obj) {
-			if(obj instanceof Color !== true) {
-				console.log("Typeof instance not Color");
-				return;
-			}
-			color.copy(obj);
-			updateUI();
-		}
-
-		var subscribe = function subscribe(topic, callback) {
-			if (subscribers[topic] === undefined)
-				subscribers[topic] = [];
-
-			subscribers[topic].push(callback);
-		}
-
-		var unsubscribe = function unsubscribe(callback) {
-			subscribers.indexOf(callback);
-			subscribers.splice(index, 1);
-		}
-
-		var notify = function notify(topic, value) {
-			for (var i in subscribers[topic])
-				subscribers[topic][i](value);
-		}
-
-		var init = function init() {
-			colorpicker		= getElemById("colorpicker");
-			hue_area		= getElemById("hue");
-			gradient_area	= getElemById("gradient");
-			alpha_area		= getElemById("alpha");
-			gradient_picker	= getElemById("gradient_picker");
-			hue_selector	= getElemById("hue_selector");
-			alpha_selector	= getElemById("alpha_selector");
-			output_color	= getElemById("output_color");
-
-			var elem = document.querySelectorAll('#colorpicker .input');
-			var size = elem.length;
-			for (var i = 0; i &lt; size; i++)
-				setInputComponent(elem[i]);
-
-			setMouseTracking(gradient_area, updateColor);
-			setMouseTracking(hue_area, updateHue);
-			setMouseTracking(alpha_area, updateAlpha);
-
-		}
-
-		return {
-			init : init,
-			setColor : setColor,
-			subscribe : subscribe,
-			unsubscribe : unsubscribe
-		}
-
-	})();
-
-	/**
-	 * 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
-		}
-
-	})();
-
-	/*
-	 * Element Class
-	 */
-	var CssClass = function CssClass(id) {
-		this.left = 0;
-		this.top = 0;
-		this.rotate = 0;
-		this.width = 300;
-		this.height = 100;
-		this.display = true;
-		this.border = true;
-		this.zIndex = -1;
-		this.bgcolor = new Color();
-		this.id = id;
-		this.node = getElemById('obj-' + id);
-		this.object = getElemById(id);
-		this.shadowID = null;
-		this.shadows = []
-		this.render = [];
-		this.init();
-	}
-
-	CssClass.prototype.init = function init() {
-		this.left = ((this.node.parentNode.clientWidth - this.node.clientWidth) / 2) | 0;
-		this.top = ((this.node.parentNode.clientHeight - this.node.clientHeight) / 2) | 0;
-
-		this.setTop(this.top);
-		this.setLeft(this.left);
-		this.setHeight(this.height);
-		this.setWidth(this.width);
-		this.bgcolor.setHSV(0, 0, 100);
-		this.updateBgColor(this.bgcolor);
-	}
-
-	CssClass.prototype.updatePos = function updatePos(deltaX, deltaY) {
-		this.left += deltaX;
-		this.top += deltaY;
-		this.node.style.top = this.top + "px";
-		this.node.style.left = this.left + "px";
-		SliderManager.setValue("left", this.left);
-		SliderManager.setValue("top", this.top);
-	}
-
-	CssClass.prototype.setLeft = function setLeft(value) {
-		this.left = value;
-		this.node.style.left = this.left + "px";
-		OutputManager.updateProperty(this.id, 'left', this.left + 'px');
-	}
-
-	CssClass.prototype.setTop = function setTop(value) {
-		this.top = value;
-		this.node.style.top = this.top + 'px';
-		OutputManager.updateProperty(this.id, 'top', this.top + 'px');
-	}
-
-	CssClass.prototype.setWidth = function setWidth(value) {
-		this.width = value;
-		this.node.style.width = this.width + 'px';
-		OutputManager.updateProperty(this.id, 'width', this.width + 'px');
-	}
-
-	CssClass.prototype.setHeight = function setHeight(value) {
-		this.height = value;
-		this.node.style.height = this.height + 'px';
-		OutputManager.updateProperty(this.id, 'height', this.height + 'px');
-	}
-
-	// Browser support
-	CssClass.prototype.setRotate = function setRotate(value) {
-		var cssvalue = 'rotate(' + value +'deg)';
-
-		this.node.style.transform = cssvalue;
-		this.node.style.webkitTransform = cssvalue;
-		this.node.style.msTransform = cssvalue;
-
-		if (value !== 0) {
-			if (this.rotate === 0) {
-				OutputManager.toggleProperty(this.id, 'transform', true);
-				OutputManager.toggleProperty(this.id, '-webkit-transform', true);
-				OutputManager.toggleProperty(this.id, '-ms-transform', true);
-			}
-		}
-		else {
-			OutputManager.toggleProperty(this.id, 'transform', false);
-			OutputManager.toggleProperty(this.id, '-webkit-transform', false);
-			OutputManager.toggleProperty(this.id, '-ms-transform', false);
-		}
-
-		OutputManager.updateProperty(this.id, 'transform', cssvalue);
-		OutputManager.updateProperty(this.id, '-webkit-transform', cssvalue);
-		OutputManager.updateProperty(this.id, '-ms-transform', cssvalue);
-		this.rotate = value;
-	}
-
-	CssClass.prototype.setzIndex = function setzIndex(value) {
-		this.node.style.zIndex = value;
-		OutputManager.updateProperty(this.id, 'z-index', value);
-		this.zIndex = value;
-	}
-
-	CssClass.prototype.toggleDisplay = function toggleDisplay(value) {
-		if (typeof value !== "boolean" || this.display === value)
-			return;
-
-		this.display = value;
-		var display = this.display === true ? "block" : "none";
-		this.node.style.display = display;
-		this.object.style.display = display;
-	}
-
-	CssClass.prototype.toggleBorder = function toggleBorder(value) {
-		if (typeof value !== "boolean" || this.border === value)
-			return;
-
-		this.border = value;
-		var border = this.border === true ? "1px solid #CCC" : "none";
-		this.node.style.border = border;
-	}
-
-	CssClass.prototype.updateBgColor = function updateBgColor(color) {
-		this.bgcolor.copy(color);
-		this.node.style.backgroundColor = color.getColor();
-		OutputManager.updateProperty(this.id, 'background-color', color.getColor());
-	}
-
-	CssClass.prototype.updateShadows = function updateShadows() {
-		if (this.render.length === 0)
-			OutputManager.toggleProperty(this.id, 'box-shadow', false);
-		if (this.render.length === 1)
-			OutputManager.toggleProperty(this.id, 'box-shadow', true);
-
-		this.node.style.boxShadow = this.render.join(", ");
-		OutputManager.updateProperty(this.id, 'box-shadow', this.render.join(", \n"));
-
-	}
-
-
-	/**
-	 * Tool Manager
-	 */
-	var Tool = (function Tool() {
-
-		var preview;
-		var classes = [];
-		var active = null;
-		var animate = false;
-
-		/*
-		 * Toll actions
-		 */
-		var addCssClass = function addCssClass(id) {
-			classes[id] = new CssClass(id);
-		}
-
-		var setActiveClass = function setActiveClass(id) {
-			active = classes[id];
-			active.shadowID = null;
-			ColoPicker.setColor(classes[id].bgcolor);
-			SliderManager.setValue("top", active.top);
-			SliderManager.setValue("left", active.left);
-			SliderManager.setValue("rotate", active.rotate);
-			SliderManager.setValue("z-index", active.zIndex);
-			SliderManager.setValue("width", active.width);
-			SliderManager.setValue("height", active.height);
-			ButtonManager.setValue("border-state", active.border);
-			active.updateShadows();
-		}
-
-		var disableClass = function disableClass(topic) {
-			classes[topic].toggleDisplay(false);
-			ButtonManager.setValue(topic, false);
-		}
-
-		var addShadow = function addShadow(position) {
-			if (animate === true)
-				return -1;
-
-			active.shadows.splice(position, 0, new Shadow());
-			active.render.splice(position, 0, null);
-		}
-
-		var swapShadow = function swapShadow(id1, id2) {
-			var x = active.shadows[id1];
-			active.shadows[id1] = active.shadows[id2];
-			active.shadows[id2] = x;
-			updateShadowCSS(id1);
-			updateShadowCSS(id2);
-		}
-
-		var deleteShadow = function deleteShadow(position) {
-			active.shadows.splice(position, 1);
-			active.render.splice(position, 1);
-			active.updateShadows();
-		}
-
-		var setActiveShadow = function setActiveShadow(id, glow) {
-			active.shadowID = id;
-			ColoPicker.setColor(active.shadows[id].color);
-			ButtonManager.setValue("inset", active.shadows[id].inset);
-			SliderManager.setValue("blur", active.shadows[id].blur);
-			SliderManager.setValue("spread", active.shadows[id].spread);
-			SliderManager.setValue("posX", active.shadows[id].posX);
-			SliderManager.setValue("posY", active.shadows[id].posY);
-			if (glow === true)
-				addGlowEffect(id);
-		}
-
-		var addGlowEffect = function addGlowEffect(id) {
-			if (animate === true)
-				return;
-
-			animate = true;
-			var store = new Shadow();
-			var shadow = active.shadows[id];
-
-			store.copy(shadow);
-			shadow.color.setRGBA(40, 125, 200, 1);
-			shadow.blur = 10;
-			shadow.spread = 10;
-
-			active.node.style.transition = "box-shadow 0.2s";
-			updateShadowCSS(id);
-
-			setTimeout(function() {
-				shadow.copy(store);
-				updateShadowCSS(id);
-				setTimeout(function() {
-					active.node.style.removeProperty("transition");
-					animate = false;
-				}, 100);
-			}, 200);
-		}
-
-		var updateActivePos = function updateActivePos(deltaX, deltaY) {
-			if (active.shadowID === null)
-				active.updatePos(deltaX, deltaY);
-			else
-				updateShadowPos(deltaX, deltaY);
-		}
-
-		/*
-		 * Shadow properties
-		 */
-		var updateShadowCSS = function updateShadowCSS(id) {
-			active.render[id] = active.shadows[id].computeCSS();
-			active.updateShadows();
-		}
-
-		var toggleShadowInset = function toggleShadowInset(value) {
-			if (active.shadowID === null)
-				return;
-			active.shadows[active.shadowID].toggleInset(value);
-			updateShadowCSS(active.shadowID);
-		}
-
-		var updateShadowPos = function updateShadowPos(deltaX, deltaY) {
-			var shadow = active.shadows[active.shadowID];
-			shadow.posX += deltaX;
-			shadow.posY += deltaY;
-			SliderManager.setValue("posX", shadow.posX);
-			SliderManager.setValue("posY", shadow.posY);
-			updateShadowCSS(active.shadowID);
-		}
-
-		var setShadowPosX = function setShadowPosX(value) {
-			if (active.shadowID === null)
-				return;
-			active.shadows[active.shadowID].posX = value;
-			updateShadowCSS(active.shadowID);
-		}
-
-		var setShadowPosY = function setShadowPosY(value) {
-			if (active.shadowID === null)
-				return;
-			active.shadows[active.shadowID].posY = value;
-			updateShadowCSS(active.shadowID);
-		}
-
-		var setShadowBlur = function setShadowBlur(value) {
-			if (active.shadowID === null)
-				return;
-			active.shadows[active.shadowID].blur = value;
-			updateShadowCSS(active.shadowID);
-		}
-
-		var setShadowSpread = function setShadowSpread(value) {
-			if (active.shadowID === null)
-				return;
-			active.shadows[active.shadowID].spread = value;
-			updateShadowCSS(active.shadowID);
-		}
-
-		var updateShadowColor = function updateShadowColor(color) {
-			active.shadows[active.shadowID].color.copy(color);
-			updateShadowCSS(active.shadowID);
-		}
-
-		/*
-		 * Element Properties
-		 */
-		var updateColor = function updateColor(color) {
-			if (active.shadowID === null)
-				active.updateBgColor(color);
-			else
-				updateShadowColor(color);
-		}
-
-		var init = function init() {
-			preview = getElemById("preview");
-
-			ColoPicker.subscribe("color", updateColor);
-			PreviewMouseTracking.subscribe(updateActivePos);
-
-			// Affects shadows
-			ButtonManager.subscribe("inset", toggleShadowInset);
-			SliderManager.subscribe("posX", setShadowPosX);
-			SliderManager.subscribe("posY", setShadowPosY);
-			SliderManager.subscribe("blur", setShadowBlur);
-			SliderManager.subscribe("spread", setShadowSpread);
-
-			// Affects element
-			SliderManager.subscribe("top", function(value){
-				active.setTop(value);
-			});
-			SliderManager.subscribe("left", function(value){
-				active.setLeft(value);
-			});
-			SliderManager.subscribe("rotate", function(value) {
-				if (active == classes["element"])
-					return;
-				active.setRotate(value);
-			});
-
-			SliderManager.subscribe("z-index", function(value) {
-				if (active == classes["element"])
-					return;
-				active.setzIndex(value);
-			});
-
-			SliderManager.subscribe("width", function(value) {
-				active.setWidth(value)
-			});
-
-			SliderManager.subscribe("height", function(value) {
-				active.setHeight(value)
-			});
-
-			// Actions
-			classes['before'].top = -30;
-			classes['before'].left = -30;
-			classes['after'].top = 30;
-			classes['after'].left = 30;
-			classes['before'].toggleDisplay(false);
-			classes['after'].toggleDisplay(false);
-			ButtonManager.setValue('before', false);
-			ButtonManager.setValue('after', false);
-
-			ButtonManager.subscribe("before", classes['before'].toggleDisplay.bind(classes['before']));
-			ButtonManager.subscribe("after", classes['after'].toggleDisplay.bind(classes['after']));
-
-			ButtonManager.subscribe("border-state", function(value) {
-				active.toggleBorder(value);
-			});
-
-		}
-
-		return {
-			init 			: init,
-			addShadow		: addShadow,
-			swapShadow		: swapShadow,
-			addCssClass		: addCssClass,
-			disableClass	: disableClass,
-			deleteShadow	: deleteShadow,
-			setActiveClass	: setActiveClass,
-			setActiveShadow : setActiveShadow
-		}
-
-	})();
-
-	/**
-	 * Layer Manager
-	 */
-	var LayerManager = (function LayerManager() {
-		var stacks = [];
-		var active = {
-			node : null,
-			stack : null
-		}
-		var elements = {};
-
-		var mouseEvents = function mouseEvents(e) {
-			var node = e.target;
-			var type = node.getAttribute('data-type');
-
-			if (type === 'subject')
-				setActiveStack(stacks[node.id]);
-
-			if (type === 'disable') {
-				Tool.disableClass(node.parentNode.id);
-				setActiveStack(stacks['element']);
-			}
-
-			if (type === 'add')
-				active.stack.addLayer();
-
-			if (type === 'layer')
-				active.stack.setActiveLayer(node);
-
-			if (type === 'delete')
-				active.stack.deleteLayer(node.parentNode);
-
-			if (type === 'move-up')
-				active.stack.moveLayer(1);
-
-			if (type === 'move-down')
-				active.stack.moveLayer(-1);
-		}
-
-		var setActiveStack = function setActiveStack(stackObj) {
-			active.stack.hide();
-			active.stack = stackObj;
-			active.stack.show();
-		}
-
-		/*
-		 * Stack object
-		 */
-		var Stack = function Stack(subject) {
-			var S = document.createElement('div');
-			var title = document.createElement('div');
-			var stack = document.createElement('div');
-
-			S.className = 'container';
-			stack.className = 'stack';
-			title.className = 'title';
-			title.textContent = subject.getAttribute('data-title');
-			S.appendChild(title);
-			S.appendChild(stack);
-
-			this.id = subject.id;
-			this.container = S;
-			this.stack = stack;
-			this.subject = subject;
-			this.order = [];
-			this.uid = 0;
-			this.count = 0;
-			this.layer = null;
-			this.layerID = 0;
-		}
-
-		Stack.prototype.addLayer = function addLayer() {
-			if (Tool.addShadow(this.layerID) == -1)
-				return;
-
-			var uid = this.getUID();
-			var layer = this.createLayer(uid);
-
-			if (this.layer === null &amp;&amp; this.stack.children.length &gt;= 1)
-				this.layer = this.stack.children[0];
-
-			this.stack.insertBefore(layer, this.layer);
-			this.order.splice(this.layerID, 0, uid);
-			this.count++;
-			this.setActiveLayer(layer);
-		}
-
-		Stack.prototype.createLayer = function createLayer(uid) {
-			var layer = document.createElement('div');
-			var del = document.createElement('span');
-
-			layer.className = 'node';
-			layer.setAttribute('data-shid', uid);
-			layer.setAttribute('data-type', 'layer');
-			layer.textContent = 'shadow ' + uid;
-
-			del.className = 'delete';
-			del.setAttribute('data-type', 'delete');
-
-			layer.appendChild(del);
-			return layer;
-		}
-
-		Stack.prototype.getUID = function getUID() {
-			return this.uid++;
-		}
-
-		// SOLVE IE BUG
-		Stack.prototype.moveLayer = function moveLayer(direction) {
-			if (this.count &lt;= 1 || this.layer === null)
-				return;
-			if (direction === -1 &amp;&amp; this.layerID === (this.count - 1) )
-				return;
-			if (direction === 1 &amp;&amp; this.layerID === 0 )
-				return;
-
-			if (direction === -1) {
-				var before = null;
-				Tool.swapShadow(this.layerID, this.layerID + 1);
-				this.swapOrder(this.layerID, this.layerID + 1);
-				this.layerID += 1;
-
-				if (this.layerID + 1 !== this.count)
-					before = this.stack.children[this.layerID + 1];
-
-				this.stack.insertBefore(this.layer, before);
-				Tool.setActiveShadow(this.layerID, false);
-			}
-
-			if (direction === 1) {
-				Tool.swapShadow(this.layerID, this.layerID - 1);
-				this.swapOrder(this.layerID, this.layerID - 1);
-				this.layerID -= 1;
-				this.stack.insertBefore(this.layer, this.stack.children[this.layerID]);
-				Tool.setActiveShadow(this.layerID, false);
-			}
-		}
-
-		Stack.prototype.swapOrder = function swapOrder(pos1, pos2) {
-			var x = this.order[pos1];
-			this.order[pos1] = this.order[pos2];
-			this.order[pos2] = x;
-		}
-
-		Stack.prototype.deleteLayer = function deleteLayer(node) {
-			var shadowID =  node.getAttribute('data-shid') | 0;
-			var index = this.order.indexOf(shadowID);
-			this.stack.removeChild(this.stack.children[index]);
-			this.order.splice(index, 1);
-			this.count--;
-
-			Tool.deleteShadow(index);
-
-			if (index &gt; this.layerID)
-				return;
-
-			if (index == this.layerID) {
-				if (this.count &gt;= 1) {
-					this.layerID = 0;
-					this.setActiveLayer(this.stack.children[0], true);
-				}
-				else {
-					this.layer = null;
-					this.show();
-				}
-			}
-
-			if (index &lt; this.layerID) {
-				this.layerID--;
-				Tool.setActiveShadow(this.layerID, true);
-			}
-
-		}
-
-		Stack.prototype.setActiveLayer = function setActiveLayer(node) {
-			elements.shadow_properties.style.display = 'block';
-			elements.element_properties.style.display = 'none';
-
-			if (this.layer)
-				this.layer.removeAttribute('data-active');
-
-			this.layer = node;
-			this.layer.setAttribute('data-active', 'layer');
-
-			var shadowID =  node.getAttribute('data-shid') | 0;
-			this.layerID = this.order.indexOf(shadowID);
-			Tool.setActiveShadow(this.layerID, true);
-		}
-
-		Stack.prototype.unsetActiveLayer = function unsetActiveLayer() {
-			if (this.layer)
-				this.layer.removeAttribute('data-active');
-
-			this.layer = null;
-			this.layerID = 0;
-		}
-
-		Stack.prototype.hide = function hide() {
-			this.unsetActiveLayer();
-			this.subject.removeAttribute('data-active');
-			var style = this.container.style;
-			style.left = '100%';
-			style.zIndex = '0';
-		}
-
-		Stack.prototype.show = function show() {
-			elements.shadow_properties.style.display = 'none';
-			elements.element_properties.style.display = 'block';
-
-			if (this.id === 'element') {
-				elements.zIndex.style.display = 'none';
-				elements.transform_rotate.style.display = 'none';
-			}
-			else {
-				elements.zIndex.style.display = 'block';
-				elements.transform_rotate.style.display = 'block';
-			}
-
-			this.subject.setAttribute('data-active', 'subject');
-			var style = this.container.style;
-			style.left = '0';
-			style.zIndex = '10';
-			Tool.setActiveClass(this.id);
-		}
-
-		function init() {
-
-			var elem, size;
-			var layerManager = getElemById("layer_manager");
-			var layerMenu = getElemById("layer_menu");
-			var container = getElemById("stack_container");
-
-			elements.shadow_properties = getElemById('shadow_properties');
-			elements.element_properties = getElemById('element_properties');
-			elements.transform_rotate = getElemById('transform_rotate');
-			elements.zIndex = getElemById('z-index');
-
-			elem = document.querySelectorAll('#layer_menu [data-type="subject"]');
-			size = elem.length;
-
-			for (var i = 0; i &lt; size; i++) {
-				var S = new Stack(elem[i]);
-				stacks[elem[i].id] = S;
-				container.appendChild(S.container);
-				Tool.addCssClass(elem[i].id);
-			}
-
-			active.stack = stacks['element'];
-			stacks['element'].show();
-
-			layerManager.addEventListener("click", mouseEvents);
-			layerMenu.addEventListener("click", mouseEvents);
-
-			ButtonManager.subscribe("before", function(value) {
-				if (value === false &amp;&amp; active.stack === stacks['before'])
-					setActiveStack(stacks['element'])
-				if (value === true &amp;&amp; active.stack !== stacks['before'])
-					setActiveStack(stacks['before'])
-			});
-
-			ButtonManager.subscribe("after", function(value) {
-				if (value === false &amp;&amp; active.stack === stacks['after'])
-					setActiveStack(stacks['element'])
-				if (value === true &amp;&amp; active.stack !== stacks['after'])
-					setActiveStack(stacks['after'])
-			});
-		}
-
-		return {
-			init : init
-		}
-	})();
-
-	/*
-	 * OutputManager
-	 */
-	var OutputManager = (function OutputManager() {
-		var classes = [];
-		var buttons = [];
-		var active = null;
-		var menu = null;
-		var button_offset = 0;
-
-		var crateOutputNode = function(topic, property) {
-
-			var prop = document.createElement('div');
-			var name = document.createElement('span');
-			var value = document.createElement('span');
-
-			var pmatch = property.match(/(^([a-z0-9\-]*)=\[([a-z0-9\-\"]*)\])|^([a-z0-9\-]*)/i);
-
-			name.textContent = '\t' + pmatch[4];
-
-			if (pmatch[3] !== undefined) {
-				name.textContent = '\t' + pmatch[2];
-				value.textContent = pmatch[3] + ';';
-			}
-
-			name.textContent += ': ';
-			prop.className = 'css-property';
-			name.className = 'name';
-			value.className = 'value';
-			prop.appendChild(name);
-			prop.appendChild(value);
-
-			classes[topic].node.appendChild(prop);
-			classes[topic].line[property] = prop;
-			classes[topic].prop[property] = value;
-		}
-
-		var OutputClass = function OutputClass(node) {
-			var topic = node.getAttribute('data-topic');
-			var prop = node.getAttribute('data-prop');
-			var name = node.getAttribute('data-name');
-			var properties = prop.split(' ');
-
-			classes[topic] = {};
-			classes[topic].node = node;
-			classes[topic].prop = [];
-			classes[topic].line = [];
-			classes[topic].button = new Button(topic);
-
-			var open_decl = document.createElement('div');
-			var end_decl = document.createElement('div');
-
-			open_decl.textContent = name + ' {';
-			end_decl.textContent = '}';
-			node.appendChild(open_decl);
-
-			for (var i in properties)
-				crateOutputNode(topic, properties[i]);
-
-			node.appendChild(end_decl);
-		}
-
-		var Button = function Button(topic) {
-			var button = document.createElement('div');
-
-			button.className = 'button';
-			button.textContent = topic;
-			button.style.left = button_offset + 'px';
-			button_offset += 100;
-
-			button.addEventListener("click", function() {
-				toggleDisplay(topic);
-			})
-
-			menu.appendChild(button);
-			return button;
-		}
-
-		var toggleDisplay = function toggleDisplay(topic) {
-			active.button.removeAttribute('data-active');
-			active.node.style.display = 'none';
-			active = classes[topic];
-			active.node.style.display = 'block';
-			active.button.setAttribute('data-active', 'true');
-		}
-
-		var toggleButton = function toggleButton(topic, value) {
-			var display = (value === true) ? 'block' : 'none';
-			classes[topic].button.style.display = display;
-
-			if (value === true)
-				toggleDisplay(topic);
-			else
-				toggleDisplay('element');
-		}
-
-		var updateProperty = function updateProperty(topic, property, data) {
-			try {
-				classes[topic].prop[property].textContent = data + ';';
-			}
-			catch(error) {
-				// console.log("ERROR undefined : ", topic, property, data);
-			}
-		}
-
-		var toggleProperty = function toggleProperty(topic, property, value) {
-			var display = (value === true) ? 'block' : 'none';
-			try {
-				classes[topic].line[property].style.display = display;
-			}
-			catch(error) {
-				// console.log("ERROR undefined : ",classes, topic, property, value);
-			}
-		}
-
-		var init = function init() {
-
-			menu = getElemById('menu');
-
-			var elem = document.querySelectorAll('#output .output');
-			var size = elem.length;
-			for (var i = 0; i &lt; size; i++)
-				OutputClass(elem[i]);
-
-			active = classes['element'];
-			toggleDisplay('element');
-
-			ButtonManager.subscribe("before", function(value) {
-				toggleButton('before', value);
-			});
-
-			ButtonManager.subscribe("after", function(value) {
-				toggleButton('after', value);
-			});
-		}
-
-		return {
-			init : init,
-			updateProperty : updateProperty,
-			toggleProperty : toggleProperty
-		}
-
-	})();
-
-
-	/**
-	 * Init Tool
-	 */
-	var init = function init() {
-		ButtonManager.init();
-		OutputManager.init();
-		ColoPicker.init();
-		SliderManager.init();
-		LayerManager.init();
-		PreviewMouseTracking.init("preview");
-		Tool.init();
-	}
-
-	return {
-		init : init
-	}
-
-})();
-
-
-</pre>
-</div>
-
-<div>{{ EmbedLiveSample('box-shadow_generator', '100%', '1100px', '') }}</div>
-
-<p><strong>Related Tool: </strong><a href="https://cssgenerator.org/box-shadow-css-generator.html">Box Shadow CSS Generator</a></p>
diff --git a/files/de/web/css/css_backgrounds_and_borders/border-image_generator/index.html b/files/de/web/css/css_backgrounds_and_borders/border-image_generator/index.html
new file mode 100644
index 0000000000..2df004ab73
--- /dev/null
+++ b/files/de/web/css/css_backgrounds_and_borders/border-image_generator/index.html
@@ -0,0 +1,2627 @@
+---
+title: Border-image Generator
+slug: Web/CSS/CSS_Backgrounds_and_Borders/Border-image_generator
+tags:
+  - CSS
+  - Werkzeuge
+translation_of: Web/CSS/CSS_Background_and_Borders/Border-image_generator
+original_slug: Web/CSS/CSS_Background_and_Borders/Border-image_generator
+---
+<p>Dieses Werkzeug kann dazu verwendet werden, CSS3 {{cssxref("border-image")}} Werte zu erzeugen.</p>
+
+<div class="hidden">
+<h2 id="Border_Image_Generator" name="Border_Image_Generator">Border Image Generator</h2>
+
+<h3 id="HTML_Content">HTML Content</h3>
+
+<pre class="brush: html">    &lt;div id="container"&gt;
+
+        &lt;div id="gallery"&gt;
+            &lt;div id="image-gallery"&gt;
+                &lt;img class="image" src="https://mdn.mozillademos.org/files/6007/border-image-1.png" data-stateID="border1"/&gt;
+                &lt;img class="image" src="https://mdn.mozillademos.org/files/6009/border-image-2.png" data-stateID="border2"/&gt;
+                &lt;img class="image" src="https://mdn.mozillademos.org/files/6011/border-image-3.png" data-stateID="border3"/&gt;
+                &lt;img class="image" src="https://mdn.mozillademos.org/files/6013/border-image-4.png" data-stateID="border4"/&gt;
+                &lt;img class="image" src="https://mdn.mozillademos.org/files/6015/border-image-5.png" data-stateID="border5"/&gt;
+                &lt;img class="image" src="https://mdn.mozillademos.org/files/6017/border-image-6.svg" data-stateID="border6"/&gt;
+            &lt;/div&gt;
+        &lt;/div&gt;
+
+        &lt;div id="load-actions" class="group section"&gt;
+            &lt;div id="toggle-gallery" data-action="hide"&gt; &lt;/div&gt;
+            &lt;div id="load-image" class="button"&gt; Upload image &lt;/div&gt;
+            &lt;input id="remote-url" type="text" placeholder="Load an image from URL"/&gt;
+            &lt;div id="load-remote" class="button"&gt; &lt;/div&gt;
+        &lt;/div&gt;
+
+        &lt;div id="general-controls" class="group section"&gt;
+            &lt;div class="name"&gt; Control Box &lt;/div&gt;
+            &lt;div class="separator"&gt;&lt;/div&gt;
+            &lt;div class="property"&gt;
+                &lt;div class="name"&gt;scale&lt;/div&gt;
+                &lt;div class="ui-input-slider" data-topic="scale"
+                    data-unit="%" data-max="300" data-sensivity="10"&gt;
+                &lt;/div&gt;
+            &lt;/div&gt;
+            &lt;div class="separator"&gt;&lt;/div&gt;
+            &lt;div class="property"&gt;
+                &lt;div class="name"&gt;draggable&lt;/div&gt;
+                &lt;div class="ui-checkbox" data-topic='drag-subject'&gt;&lt;/div&gt;
+            &lt;/div&gt;
+            &lt;div class="property right"&gt;
+                &lt;div class="name"&gt;section height&lt;/div&gt;
+                &lt;div class="ui-input-slider" data-topic="preview-area-height"
+                    data-min="400" data-max="1000"&gt;
+                &lt;/div&gt;
+            &lt;/div&gt;
+        &lt;/div&gt;
+
+        &lt;div id="preview_section" class="group section"&gt;
+            &lt;div id="subject"&gt;
+                &lt;div class="guideline" data-axis="Y" data-topic="slice-top"&gt;&lt;/div&gt;
+                &lt;div class="guideline" data-axis="X" data-topic="slice-right"&gt;&lt;/div&gt;
+                &lt;div class="guideline" data-axis="Y" data-topic="slice-bottom"&gt;&lt;/div&gt;
+                &lt;div class="guideline" data-axis="X" data-topic="slice-left"&gt;&lt;/div&gt;
+            &lt;/div&gt;
+            &lt;div id="preview"&gt; &lt;/div&gt;
+        &lt;/div&gt;
+
+        &lt;!-- controls --&gt;
+        &lt;div id="controls" class="group section"&gt;
+
+            &lt;!-- border-image-slice --&gt;
+            &lt;div id="border-slice-control" class="category"&gt;
+                &lt;div class="title"&gt; border-image-slice &lt;/div&gt;
+                &lt;div class="property"&gt;
+                    &lt;div class="name"&gt;fill&lt;/div&gt;
+                    &lt;div class="ui-checkbox" data-topic='slice-fill'&gt;&lt;/div&gt;
+                &lt;/div&gt;
+            &lt;/div&gt;
+
+            &lt;!-- border-image-width --&gt;
+            &lt;div id="border-width-control" class="category"&gt;
+                &lt;div class="title"&gt; border-image-width &lt;/div&gt;
+            &lt;/div&gt;
+
+            &lt;!-- border-image-outset --&gt;
+            &lt;div id="border-outset-control" class="category"&gt;
+                &lt;div class="title"&gt; border-image-outset &lt;/div&gt;
+            &lt;/div&gt;
+
+            &lt;!-- other-settings --&gt;
+            &lt;div id="aditional-properties" class="category"&gt;
+                &lt;div class="title"&gt; aditional-properties &lt;/div&gt;
+                &lt;div class="property"&gt;
+                    &lt;div class="name"&gt; repeat-x &lt;/div&gt;
+                    &lt;div class="ui-dropdown border-repeat" data-topic="image-repeat-X" data-selected="2"&gt;
+                        &lt;div data-value="0"&gt;repeat&lt;/div&gt;
+                        &lt;div data-value="0"&gt;stretch&lt;/div&gt;
+                        &lt;div data-value="0"&gt;round&lt;/div&gt;
+                    &lt;/div&gt;
+                &lt;/div&gt;
+                &lt;div class="property"&gt;
+                    &lt;div class="name"&gt; repeat-y &lt;/div&gt;
+                    &lt;div class="ui-dropdown border-repeat" data-topic="image-repeat-Y" data-selected="2"&gt;
+                        &lt;div data-value="1"&gt;repeat&lt;/div&gt;
+                        &lt;div data-value="1"&gt;stretch&lt;/div&gt;
+                        &lt;div data-value="1"&gt;round&lt;/div&gt;
+                    &lt;/div&gt;
+                &lt;/div&gt;
+                &lt;div class="property"&gt;
+                    &lt;div class="ui-input-slider" data-topic="font-size" data-info="em size"
+                        data-unit="px" data-value="12" data-sensivity="3"&gt;
+                    &lt;/div&gt;
+                &lt;/div&gt;
+
+                &lt;div class="property"&gt;
+                    &lt;div class="ui-input-slider" data-topic="preview-width" data-info="width"
+                         data-unit=" px" data-min="10" data-max="10000" data-sensivity="3"&gt;&lt;/div&gt;
+                &lt;/div&gt;
+                &lt;div class="property"&gt;
+                    &lt;div class="ui-input-slider" data-topic="preview-height" data-info="height"
+                        data-unit=" px" data-min="10" data-max="10000" data-sensivity="3"&gt;
+                    &lt;/div&gt;
+                &lt;/div&gt;
+            &lt;/div&gt;
+
+
+            &lt;div id="output" class="category"&gt;
+                &lt;div class="title"&gt; CSS Code &lt;/div&gt;
+                &lt;div class="css-property"&gt;
+                    &lt;span class="name"&gt; border-image-slice: &lt;/span&gt;
+                    &lt;span id="out-border-slice" class="value"&gt; &lt;/span&gt;
+                &lt;/div&gt;
+                &lt;div class="css-property"&gt;
+                    &lt;span class="name"&gt; border-image-width: &lt;/span&gt;
+                    &lt;span id="out-border-width" class="value"&gt; &lt;/span&gt;
+                &lt;/div&gt;
+                &lt;div class="css-property"&gt;
+                    &lt;span class="name"&gt; border-image-outset: &lt;/span&gt;
+                    &lt;span id="out-border-outset" class="value"&gt; &lt;/span&gt;
+                &lt;/div&gt;
+                &lt;div class="css-property"&gt;
+                    &lt;span class="name"&gt; border-image-repeat: &lt;/span&gt;
+                    &lt;span id="out-border-repeat" class="value"&gt; &lt;/span&gt;
+                &lt;/div&gt;
+                &lt;div class="css-property"&gt;
+                    &lt;span class="name"&gt; border-image-source: &lt;/span&gt;
+                    &lt;span id="out-border-source" class="value"&gt;  &lt;/span&gt;
+                &lt;/div&gt;
+            &lt;/div&gt;
+
+        &lt;/div&gt;
+    &lt;/div&gt;</pre>
+
+<h3 id="CSS_Content">CSS Content</h3>
+
+<pre class="brush: css">/*  GRID OF TWELVE
+ * ========================================================================== */
+
+.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 {
+	height: 20px;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	-moz-user-select: none;
+	user-select: none;
+}
+
+.ui-input-slider * {
+	float: left;
+	height: 100%;
+	line-height: 100%;
+}
+
+/* Input Slider */
+
+.ui-input-slider &gt; 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 DropDown
+ */
+
+/* Dropdown */
+
+.ui-dropdown {
+	height: 2em;
+	width: 120px;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	font-size: 12px;
+
+	background-image: url("https://mdn.mozillademos.org/files/6037/drop_arrow_icon.png");
+	background-position: right center;
+	background-repeat: no-repeat;
+	background-color: #359740;
+
+	position: relative;
+
+	-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;
+}
+
+.ui-dropdown:hover {
+	cursor: pointer;
+	background-color: #208B20;
+}
+
+/* Dropdown Select Button */
+
+.ui-dropdown-select {
+	height: inherit;
+	padding: 0 0.75em;
+	color: #FFF;
+	line-height: 2em;
+}
+
+/* Dropdown List */
+
+.ui-dropdown-list {
+	width: 100%;
+	height: 150px;
+	max-height: 150px;
+	margin: 0;
+	padding: 0 0.3em;
+
+	border: 3px solid #3490D2;
+	border-color: #208B20;
+	background: #666;
+	background-color: #EEF1F5;
+	color: #000;
+
+	position: absolute;
+	top: 2em;
+	left: 0;
+	z-index: 100;
+
+	overflow: hidden;
+	transition: all 0.3s;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+.ui-dropdown-list:hover {
+	overflow: auto;
+}
+
+.ui-dropdown-list[data-hidden='true'] {
+	height: 0 !important;
+	opacity: 0;
+	visibility: hidden;
+}
+
+.ui-dropdown[data-position='left'] .ui-dropdown-list {
+	left: -100%;
+	top: 0;
+}
+
+.ui-dropdown[data-position='right'] .ui-dropdown-list {
+	left: 100%;
+	top: 0;
+}
+
+.ui-dropdown-list &gt; div {
+	width: 100%;
+	height: 1.6em;
+	margin: 0.3em 0;
+	padding: 0.3em;
+	line-height: 1em;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+.ui-dropdown-list &gt; div:hover {
+	background: #3490D2;
+	color:#FFF;
+	border-radius: 2px;
+	cursor: pointer;
+}
+
+
+/*************************************************************************************/
+/*************************************************************************************/
+
+/*
+ * UI Button
+ */
+
+/* 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 &gt; input {
+ 	display: none;
+}
+
+.ui-checkbox &gt; 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: 2px;
+	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 &gt; label:hover {
+	cursor: pointer;
+}
+
+.ui-checkbox &gt; input:checked + label {
+	background-image: url("https://mdn.mozillademos.org/files/5681/checked.png");
+	background-color: #379B4A;
+}
+
+/*************************************************************************************/
+/*************************************************************************************/
+
+/*
+ * BORDER IMAGE GENERATOR TOOL
+ */
+
+body {
+	width: 100%;
+	margin: 0 auto;
+	padding: 0 0 20px 0;
+
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+
+	/*background: url("https://mdn.mozillademos.org/files/6025/grain.png");*/
+	border: 1px solid #EEE;
+
+	-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;
+}
+
+body[data-move='X'] {
+	cursor: w-resize !important;
+}
+
+body[data-move='Y'] {
+	cursor: s-resize !important;
+}
+
+#container {
+	width: 100%;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+[data-draggable='true']:hover {
+	cursor: move;
+}
+
+[data-draggable='true']:hover &gt; * {
+	cursor: default;
+}
+
+
+
+/******************************************************************************/
+/******************************************************************************/
+
+/*
+ * Border Image Picker
+ */
+
+#gallery {
+	box-shadow: 0 0 3px 0 #BABABA;
+}
+
+#image-gallery {
+	width: 600px;
+	height: 100px;
+	margin: 0 auto;
+	transition: margin 0.4s;
+}
+
+#image-gallery .image {
+	height: 80px;
+	float: left;
+	margin: 10px;
+	opacity: 0.5;
+	background-color: #FFF;
+	box-shadow: 0px 0px 3px 1px #BABABA;
+}
+
+#image-gallery .image[selected="true"] {
+	box-shadow: 0px 0px 3px 1px #3BBA52;
+	opacity: 1;
+}
+
+#image-gallery .image:hover {
+	cursor: pointer;
+	box-shadow: 0px 0px 3px 1px #30ACE5;
+	opacity: 1;
+}
+
+#image-gallery[data-collapsed='true'] {
+	margin-top: -100px;
+}
+
+/* Load Menu */
+
+#load-actions {
+	margin: 10px 0;
+}
+
+#toggle-gallery {
+	width: 30px;
+	height: 25px;
+	margin: 10px;
+	color: #FFF;
+
+	background-image: url('https://mdn.mozillademos.org/files/6005/arrow-up-white.png');
+	background-repeat: no-repeat;
+	background-position: top 4px center;
+	background-color: #888888 !important;
+
+	border-radius: 2px;
+	float: left;
+}
+
+#toggle-gallery:hover {
+	cursor: pointer;
+}
+
+#toggle-gallery[data-action='show'] {
+	background-image: url('https://mdn.mozillademos.org/files/6001/arrow-down-white.png');
+	background-color: #888888 !important;
+}
+
+#toggle-gallery[data-action='hide'] {
+	background-image: url('https://mdn.mozillademos.org/files/6005/arrow-up-white.png');
+}
+
+.button {
+	width: 100px;
+	height: 25px;
+	margin: 10px;
+	color: #FFF;
+	text-align: center;
+	font-size: 12px;
+	line-height: 25px;
+	background-color: #379B4A;
+	border-radius: 2px;
+	float: left;
+}
+
+.button:hover {
+	cursor: pointer;
+	background-color: #3380C4;
+}
+
+#load-image {
+	float: left;
+}
+
+#load-remote {
+	width: 30px;
+	background-image: url('https://mdn.mozillademos.org/files/6003/arrow-right-white.png');
+	background-repeat: no-repeat;
+	background-position: center center;
+}
+
+#remote-url {
+	width: 200px;
+	height: 23px;
+	margin: 10px;
+	padding: 0 5px;
+	border: 1px solid #379B4A;
+	border-radius: 2px;
+	float: left;
+
+	transition: width 0.5s;
+}
+
+#remote-url:focus {
+	box-shadow: 0px 0px 3px -1px #379B4A; /*#68ACE8; */
+	border-color: rgba(55, 155, 74, 0.5);
+	width: 450px;
+}
+
+/*
+ * Visible Area
+ */
+
+#preview_section {
+	position: relative;
+	min-height: 400px;
+}
+
+/* Image Control */
+
+#subject {
+	width: 300px;
+	height: 300px;
+	background-repeat: no-repeat;
+	background-size: 100%;
+	background-color: #FFF;
+	border: 1px solid #CCC;
+
+	position: absolute;
+	z-index: 10;
+	top: 15%;
+	left: 10%;
+
+	box-shadow: 0 0 3px 0 #BABABA;
+	transition-property: width, height;
+	transition-duration: 0.1s;
+}
+
+#subject .guideline {
+	background-color: rgba(255, 255, 255, 0.7);
+	border: 1px solid rgba(0, 0, 0, 0.3);
+	position: absolute;
+}
+
+#subject .guideline:hover {
+	background-color: #F00;
+}
+
+#subject .guideline[data-active] {
+	background-color: #F00;
+	z-index: 10;
+}
+
+#subject .guideline[data-axis='X'] {
+	width: 1px;
+	height: 100%;
+	top: -1px;
+}
+
+#subject .guideline[data-axis='Y'] {
+	width: 100%;
+	height: 1px;
+	left: -1px;
+}
+
+#subject .guideline[data-axis='X']:hover {
+	cursor: w-resize;
+}
+
+#subject .guideline[data-axis='Y']:hover {
+	cursor: s-resize;
+}
+
+
+#subject .relative {
+	position: relative;
+	font-size: 12px;
+}
+
+#subject .tooltip, #subject .tooltip2 {
+	width: 40px;
+	height: 20px;
+	line-height: 20px;
+	font-size: 12px;
+	text-align: center;
+
+	position: absolute;
+	opacity: 0.5;
+	transition: opacity 0.25s;
+}
+
+#subject .tooltip {
+	background: #EEE;
+	border-radius: 2px;
+	border: 1px solid #CCC;
+}
+
+#subject .tooltip2{
+	color: #555;
+}
+
+#subject [data-active] &gt; * {
+	opacity: 1;
+}
+
+#subject .tooltip[data-info='top'] {
+	top: -10px;
+	right: -50px;
+}
+
+#subject .tooltip[data-info='right'] {
+	bottom: -30px;
+	right: -20px;
+}
+
+#subject .tooltip[data-info='bottom'] {
+	top: -10px;
+	left: -50px;
+}
+
+#subject .tooltip[data-info='left'] {
+	top: -30px;
+	right: -20px;
+}
+
+#subject .tooltip2[data-info='top'] {
+	top: -10px;
+	left: -50px;
+}
+
+#subject .tooltip2[data-info='right'] {
+	top: -30px;
+	right: -20px;
+}
+
+#subject .tooltip2[data-info='bottom'] {
+	top: -10px;
+	right: -50px;
+}
+
+#subject .tooltip2[data-info='left'] {
+	bottom: -30px;
+	right: -20px;
+}
+
+/* Preview */
+
+#preview {
+	width: 30%;
+	height: 50%;
+	background-color: #FFF;
+	text-align: center;
+	overflow: hidden;
+	position: absolute;
+	z-index: 10;
+
+	left: 60%;
+	top: 15%;
+
+	border-radius: 2px;
+	border-image-width: 20px;
+	border-image-repeat: round;
+	box-shadow: 0 0 3px 0 #BABABA;
+}
+
+#preview .resize-handle {
+	width: 10px;
+	height: 10px;
+	background: url("https://mdn.mozillademos.org/files/6027/resize.png") center center no-repeat;
+	position: absolute;
+	bottom: 0;
+	right: 0;
+}
+
+#preview .resize-handle:hover {
+	cursor: nw-resize;
+}
+
+
+/*
+ * General controls MENU
+ */
+
+#general-controls {
+	padding: 10px 30px;
+	background-color: #FFF;
+	opacity: 0.95;
+	color: #888;
+	/*border-radius: 2px;*/
+	box-shadow: 0 0 3px 0 #BABABA;
+}
+
+#general-controls .property {
+	width: 130px;
+	float: left;
+}
+
+#general-controls .name {
+	height: 20px;
+	margin: 0 10px 0 0;
+	line-height: 100%;
+	text-align: right;
+	float: left;
+}
+
+#general-controls .right {
+	width: 200px;
+	float: right;
+}
+
+#general-controls .ui-checkbox label {
+	height: 10px;
+}
+
+#general-controls .separator {
+	height: 40px;
+	width: 1px;
+	margin: -10px 15px;
+	background-color: #EEE;
+	float: left;
+}
+
+/*
+ * Controls
+ */
+
+#controls {
+	color: #444;
+	margin: 10px 0 0 0;
+}
+
+#controls .category {
+	height: 190px;
+	min-width: 260px;
+	margin: 10px;
+	padding: 10px;
+	border: 1px solid #CCC;
+	border-radius: 3px;
+	float: left;
+
+	box-shadow: 0 0 3px 0 #BABABA;
+	transition: all 0.25s;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+@media (min-width: 880px) {
+	#controls .category {
+		width: 30%;
+		margin-left: 1.66%;
+		margin-right: 1.66%;
+	}
+}
+
+@media (max-width: 879px) {
+	#controls .category {
+		width: 37%;
+		margin-left: 6.5%;
+		margin-right: 6.5%;
+	}
+}
+
+#controls .category .title {
+	width: 100%;
+	height: 30px;
+	margin: 0 0 10px 0;
+	line-height: 25px;
+
+	text-align: center;
+	color: #AAA;
+}
+
+#controls .category:hover .title {
+	color: #777;
+}
+
+#controls .category &gt; .group {
+	border: 1px solid #CCC;
+	border-radius: 2px;
+}
+
+
+/* property */
+
+#controls .property {
+	width: 250px;
+	height: 20px;
+	margin: 5px auto;
+}
+
+#controls .property .ui-input-slider {
+	margin: 0;
+	float: left;
+}
+
+#controls .property .ui-input-slider-info {
+	width: 60px;
+}
+
+#controls .property .ui-input-slider-left {
+	transition: opacity 0.15s;
+    opacity: 0;
+}
+
+#controls .property .ui-input-slider-right {
+	transition: opacity 0.15s;
+    opacity: 0;
+}
+
+#controls .property .name {
+	width: 60px;
+	height: 20px;
+	padding: 0px 10px 0px 0px;
+	text-align: right;
+	line-height: 100%;
+	float: left;
+}
+
+#controls .property .config {
+	width: 20px;
+	height: 20px;
+	float: left;
+	background: url("https://mdn.mozillademos.org/files/6021/config.png") center center no-repeat;
+	opacity: 0.5;
+}
+
+#controls .property .config:hover {
+	cursor: pointer;
+	opacity: 1;
+}
+
+#controls .ui-input-slider:hover .ui-input-slider-right {
+    opacity: 1;
+}
+
+#controls .ui-input-slider:hover .ui-input-slider-left {
+    opacity: 1;
+}
+
+#controls .property .ui-dropdown {
+	margin: 0 10px;
+	float: left;
+}
+
+
+#controls .property .ui-checkbox {
+	margin: 0 0 0 16px;
+	float: left;
+}
+
+#controls .property .ui-checkbox label {
+	height: 0.85em;
+	width: 10px;
+}
+
+/* dropdowns */
+#controls .ui-dropdown {
+	width: 50px;
+	height: 1.7em;
+	border-radius: 2px;
+}
+
+#controls .ui-dropdown-select {
+	line-height: 1.6em;
+}
+
+#controls .ui-dropdown-list {
+	top: 20px;
+}
+
+#controls .ui-dropdown-list {
+	border-width: 1px;
+	text-align: center;
+}
+
+#controls .ui-dropdown-list:hover {
+	overflow: hidden;
+}
+
+#controls .border-repeat {
+	margin: 0 0 0 16px !important;
+	width: 80px;
+}
+
+#controls .border-repeat .ui-dropdown-list {
+	height: 6.2em;
+	border-width: 1px;
+	text-align: center;
+}
+
+/* border-image-slice */
+
+
+#border-slice-control .ui-dropdown-list {
+	height: 4.3em;
+}
+
+/* border-image-width */
+
+#border-width-control .ui-dropdown-list {
+	height: 6.2em;
+}
+
+/* border-image-outset */
+
+#border-outset-control .ui-dropdown-list {
+	height: 4.3em;
+}
+
+#aditional-properties .property {
+	width: 200px;
+}
+
+#aditional-properties .ui-input-slider &gt; input {
+	width: 80px !important;
+}
+
+/* unit settings panel */
+
+#unit-settings {
+	padding: 10px;
+	position: absolute;
+
+	background: #FFF;
+
+	font-size: 12px;
+	border-radius: 3px;
+	border: 1px solid #CCC;
+	text-align: center;
+	color: #555;
+
+	position: absolute;
+	z-index: 1000;
+
+	box-shadow: 0 0 3px 0 #BABABA;
+	transition: all 0.25s;
+}
+
+#unit-settings .title {
+	width: 100%;
+	margin: -5px auto 0;
+
+	color: #666;
+	font-size: 14px;
+	font-weight: bold;
+	line-height: 25px;
+	border-bottom: 1px solid #E5E5E5;
+}
+
+#unit-settings .ui-input-slider {
+	margin: 10px 0 0 0;
+}
+
+#unit-settings .ui-input-slider-info {
+	width: 50px;
+	line-height: 1.5em;
+}
+
+#unit-settings input {
+	font-size: 12px;
+	width: 40px !important;
+}
+
+#unit-settings .close {
+	width: 16px;
+	height: 16px;
+	background: url('https://mdn.mozillademos.org/files/6019/close.png') no-repeat center center;
+	background-size: 75%;
+
+	position: absolute;
+	top: 4px;
+	right: 4px;
+	opacity: 0.5;
+}
+
+#unit-settings .close:hover {
+	cursor: pointer;
+	opacity: 1;
+}
+
+#unit-settings[data-active='true'] {
+	opacity: 1;
+}
+
+#unit-settings[data-active='false'] {
+	opacity: 0;
+	top: -100px !important;
+}
+
+/*
+ * CSS Output Code
+ */
+
+#output {
+	padding: 10px;
+	border: 2px dashed #888 !important;
+	box-shadow: none !important;
+	border-radius: 3px;
+	overflow: hidden;
+
+	-moz-user-select: text;
+	-webkit-user-select: text;
+	-ms-user-select: text;
+	user-select: text;
+}
+
+
+@media (min-width: 880px) {
+	#output {
+		width: 63.33% !important;
+	}
+}
+
+@media (max-width: 879px) {
+	#output {
+		width: 87% !important;
+	}
+}
+
+
+#output .title {
+	width: 100%;
+	height: 30px;
+	margin: 0 0 10px 0;
+	line-height: 25px;
+
+	text-align: center;
+	color: #AAA;
+}
+
+#output .css-property {
+	width: 100%;
+	margin: 0;
+	color: #555;
+	font-size: 14px;
+	line-height: 18px;
+	float: left;
+}
+
+#output .css-property .name {
+	width: 30%;
+	font-weight: bold;
+	text-align: right;
+	float: left;
+}
+
+#output .css-property .value {
+	width: 65%;
+	padding: 0 2.5%;
+	word-break: break-all;
+	float: left;
+}
+
+</pre>
+
+<h3 id="JavaScript_Content">JavaScript Content</h3>
+
+<pre class="brush: js">'use strict';
+
+/**
+ * UI-SlidersManager
+ */
+
+var InputSliderManager = (function InputSliderManager() {
+
+	var subscribers = {};
+	var sliders = [];
+
+	var InputComponent = function InputComponent(obj) {
+		var input = document.createElement('input');
+		input.setAttribute('type', 'text');
+		input.style.width = 50 + obj.precision * 10 + 'px';
+
+		input.addEventListener('click', function(e) {
+			this.select();
+		});
+
+		input.addEventListener('change', function(e) {
+			var value = parseFloat(e.target.value);
+
+			if (isNaN(value) === true)
+				setValue(obj.topic, obj.value);
+			else
+				setValue(obj.topic, value);
+		});
+
+		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) {
+			document.removeEventListener("mousemove", sliderMotion);
+			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("mouseup", slideEnd);
+			document.addEventListener("mousemove", sliderMotion);
+		});
+
+		var slideEnd = function slideEnd(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		= parseFloat(node.getAttribute('data-min'));
+		var max		= parseFloat(node.getAttribute('data-max'));
+		var step	= parseFloat(node.getAttribute('data-step'));
+		var value	= parseFloat(node.getAttribute('data-value'));
+		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;
+		var precision = node.getAttribute('data-precision') | 0;
+
+		this.min = isNaN(min) ? 0 : min;
+		this.max = isNaN(max) ? 100 : max;
+		this.precision = precision &gt;= 0 ? precision : 0;
+		this.step = step &lt; 0 || isNaN(step) ? 1 : step.toFixed(precision);
+		this.topic = topic;
+		this.node = node;
+		this.unit = unit === null ? '' : unit;
+		this.sensivity = sensivity &gt; 0 ? sensivity : 5;
+		value = isNaN(value) ? this.min : value;
+
+		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);
+
+		this.input = input;
+		sliders[topic] = this;
+		setValue(topic, value);
+	};
+
+	InputSlider.prototype.setInputValue = function setInputValue() {
+		this.input.value = this.value.toFixed(this.precision) + this.unit;
+	};
+
+	var setValue = function setValue(topic, value, send_notify) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		value = parseFloat(value.toFixed(slider.precision));
+
+		if (value &gt; slider.max) value = slider.max;
+		if (value &lt; slider.min)	value = slider.min;
+
+		slider.value = value;
+		slider.node.setAttribute('data-value', value);
+
+		slider.setInputValue();
+
+		if (send_notify === false)
+			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 setStep = function setStep(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.step = parseFloat(value);
+		setValue(topic, slider.value);
+	};
+
+	var setPrecision = function setPrecision(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		value = value | 0;
+		slider.precision = value;
+
+		var step = parseFloat(slider.step.toFixed(value));
+		if (step === 0)
+			slider.step = 1 / Math.pow(10, value);
+
+		setValue(topic, slider.value);
+	};
+
+	var setSensivity = function setSensivity(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		value = value | 0;
+
+		slider.sensivity = value &gt; 0 ? value : 5;
+	};
+
+	var getNode =  function getNode(topic) {
+		return sliders[topic].node;
+	};
+
+	var getPrecision =  function getPrecision(topic) {
+		return sliders[topic].precision;
+	};
+
+	var getStep =  function getStep(topic) {
+		return sliders[topic].step;
+	};
+
+	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() {
+		if (subscribers[this.topic] === undefined)
+			return;
+		for (var i = 0; i &lt; subscribers[this.topic].length; i++)
+			subscribers[this.topic][i](this.value);
+	};
+
+	var createSlider = function createSlider(topic, label) {
+		var slider = document.createElement('div');
+		slider.className = 'ui-input-slider';
+		slider.setAttribute('data-topic', topic);
+
+		if (label !== undefined)
+			slider.setAttribute('data-info', label);
+
+		new InputSlider(slider);
+		return slider;
+	};
+
+	var init = function init() {
+		var elem = document.querySelectorAll('.ui-input-slider');
+		var size = elem.length;
+		for (var i = 0; i &lt; size; i++)
+			new InputSlider(elem[i]);
+	};
+
+	return {
+		init : init,
+		setMax : setMax,
+		setMin : setMin,
+		setUnit : setUnit,
+		setStep : setStep,
+		getNode : getNode,
+		getStep : getStep,
+		setValue : setValue,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe,
+		setPrecision : setPrecision,
+		setSensivity : setSensivity,
+		getPrecision : getPrecision,
+		createSlider : createSlider,
+	};
+
+})();
+
+
+/**
+ * UI-DropDown Select
+ */
+
+var DropDownManager = (function DropdownManager() {
+
+	var subscribers = {};
+	var dropdowns = [];
+	var active = null;
+
+	var visbility = ["hidden", "visible"];
+
+
+	var DropDown = function DropDown(node) {
+		var topic = node.getAttribute('data-topic');
+		var label = node.getAttribute('data-label');
+		var selected = node.getAttribute('data-selected') | 0;
+
+		var select = document.createElement('div');
+		var list = document.createElement('div');
+		var uval = 0;
+		var option = null;
+		var option_value = null;
+
+		list.className = 'ui-dropdown-list';
+		select.className = 'ui-dropdown-select';
+
+		while (node.firstElementChild !== null) {
+			option = node.firstElementChild;
+			option_value = option.getAttribute('data-value');
+
+			if (option_value === null)
+				option.setAttribute('data-value', uval);
+
+			list.appendChild(node.firstElementChild);
+			uval++;
+		}
+
+		node.appendChild(select);
+		node.appendChild(list);
+
+		select.onclick = this.toggle.bind(this);
+		list.onclick = this.updateValue.bind(this);
+		document.addEventListener('click', clickOut);
+
+		this.state = 0;
+		this.time = 0;
+		this.dropmenu = list;
+		this.select = select;
+		this.toggle(false);
+		this.value = {};
+		this.topic = topic;
+
+		if (label)
+			select.textContent = label;
+		else
+			this.setNodeValue(list.children[selected]);
+
+		dropdowns[topic] = this;
+
+	};
+
+	DropDown.prototype.toggle = function toggle(state) {
+		if (typeof(state) === 'boolean')
+			this.state = state === false ? 0 : 1;
+		else
+			this.state = 1 ^ this.state;
+
+		if (active !== this) {
+			if (active)
+				active.toggle(false);
+			active = this;
+		}
+
+		if (this.state === 0)
+			this.dropmenu.setAttribute('data-hidden', 'true');
+		else
+			this.dropmenu.removeAttribute('data-hidden');
+
+	};
+
+	var clickOut = function clickOut(e) {
+		if (active.state === 0 ||
+			e.target === active.dropmenu ||
+			e.target === active.select)
+			return;
+
+		active.toggle(false);
+	};
+
+	DropDown.prototype.updateValue = function updateValue(e) {
+
+		if (Date.now() - this.time &lt; 500)
+			return;
+
+		if (e.target.className !== "ui-dropdown-list") {
+			this.setNodeValue(e.target);
+			this.toggle(false);
+		}
+
+		this.time = Date.now();
+	};
+
+	DropDown.prototype.setNodeValue = function setNodeValue(node) {
+		this.value['name'] = node.textContent;
+		this.value['value'] = node.getAttribute('data-value');
+
+		this.select.textContent = node.textContent;
+		this.select.setAttribute('data-value', this.value['value']);
+
+		notify.call(this);
+	};
+
+	var createDropDown = function createDropDown(topic, options) {
+
+		var dropdown = document.createElement('div');
+		dropdown.setAttribute('data-topic', topic);
+		dropdown.className = 'ui-dropdown';
+
+		for (var i in options) {
+			var x = document.createElement('div');
+			x.setAttribute('data-value', i);
+			x.textContent = options[i];
+			dropdown.appendChild(x);
+		}
+
+		new DropDown(dropdown);
+
+		return dropdown;
+	};
+
+	var setValue = function setValue(topic, index) {
+		if (dropdowns[topic] === undefined ||
+			index &gt;= dropdowns[topic].dropmenu.children.length)
+			return;
+
+		dropdowns[topic].setNodeValue(dropdowns[topic].dropmenu.children[index]);
+	};
+
+	var subscribe = function subscribe(topic, callback) {
+		if (subscribers[topic] === undefined)
+			subscribers[topic] = [];
+		subscribers[topic].push(callback);
+	};
+
+	var unsubscribe = function unsubscribe(topic, callback) {
+		var index = subscribers[topic].indexOf(callback);
+		subscribers[topic].splice(index, 1);
+	};
+
+	var notify = function notify() {
+		if (subscribers[this.topic] === undefined)
+			return;
+
+		for (var i in subscribers[this.topic]) {
+			subscribers[this.topic][i](this.value);
+		}
+	};
+
+	var init = function init() {
+		var elem, size;
+
+		elem = document.querySelectorAll('.ui-dropdown');
+		size = elem.length;
+		for (var i = 0; i &lt; size; i++)
+			new DropDown(elem[i]);
+
+	};
+
+	return {
+		init : init,
+		setValue : setValue,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe,
+		createDropDown : createDropDown
+	};
+
+})();
+
+
+/**
+ * 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) {
+		var obj = buttons[topic];
+		if (obj === undefined)
+			return;
+
+		obj.checkbox.checked = value;
+		notify.call(obj);
+	};
+
+	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() {
+		if (subscribers[this.topic] === undefined)
+			return;
+		for (var i = 0; i &lt; 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 &lt; size; i++)
+			new CheckBox(elem[i]);
+	};
+
+	return {
+		init : init,
+		setValue : setValue,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe
+	};
+
+})();
+
+window.addEventListener("load", function() {
+	BorderImage.init();
+});
+
+var BorderImage = (function BorderImage() {
+
+	var getElemById = document.getElementById.bind(document);
+
+	var subject;
+	var preview;
+	var guidelines = [];
+	var positions = ['top', 'right', 'bottom', 'left'];
+
+	var makeDraggable = function makeDraggable(elem) {
+
+		var offsetTop;
+		var offsetLeft;
+
+		elem.setAttribute('data-draggable', 'true');
+
+		var dragStart = function dragStart(e) {
+			if (e.target.getAttribute('data-draggable') !== 'true' ||
+				e.target !== elem || e.button !== 0)
+				return;
+
+			offsetLeft = e.clientX - elem.offsetLeft;
+			offsetTop = e.clientY - elem.offsetTop;
+
+			document.addEventListener('mousemove', mouseDrag);
+			document.addEventListener('mouseup', dragEnd);
+		};
+
+		var dragEnd = function dragEnd(e) {
+			if (e.button !== 0)
+				return;
+
+			document.removeEventListener('mousemove', mouseDrag);
+			document.removeEventListener('mouseup', dragEnd);
+		};
+
+		var mouseDrag = function mouseDrag(e) {
+
+			elem.style.left = e.clientX - offsetLeft + 'px';
+			elem.style.top = e.clientY - offsetTop + 'px';
+		};
+
+		elem.addEventListener('mousedown', dragStart, false);
+	};
+
+	var PreviewControl = function PreviewControl() {
+
+		var dragging = false;
+		var valueX = null;
+		var valueY = null;
+
+		var dragStart = function dragStart(e) {
+			if (e.button !== 0)
+				return;
+
+			valueX = e.clientX - preview.clientWidth;
+			valueY = e.clientY - preview.clientHeight;
+			dragging = true;
+
+			document.addEventListener('mousemove', mouseDrag);
+		};
+
+		var dragEnd = function dragEnd(e) {
+			if (e.button !== 0 || dragging === false)
+				return;
+
+			document.removeEventListener('mousemove', mouseDrag);
+			dragging = false;
+		};
+
+		var mouseDrag = function mouseDrag(e) {
+			InputSliderManager.setValue('preview-width', e.clientX - valueX);
+			InputSliderManager.setValue('preview-height', e.clientY - valueY);
+		};
+
+		var init = function init() {
+
+			makeDraggable(preview);
+			makeDraggable(subject);
+
+			var handle = document.createElement('div');
+			handle.className = 'resize-handle';
+
+			handle.addEventListener('mousedown', dragStart);
+			document.addEventListener('mouseup', dragEnd);
+
+			preview.appendChild(handle);
+
+		};
+
+		return {
+			init: init
+		};
+
+	}();
+
+	var ImageReader = (function ImageReader() {
+
+		var fReader = new FileReader();
+		var browse = document.createElement('input');
+
+		var loadImage = function loadImage(e) {
+			if (browse.files.length === 0)
+				return;
+
+			var file = browse.files[0];
+
+			if (file.type.slice(0, 5) !== 'image')
+				return;
+
+			fReader.readAsDataURL(file);
+
+			return false;
+		};
+
+		fReader.onload = function(e) {
+			ImageControl.loadRemoteImage(e.target.result);
+		};
+
+		var load = function load() {
+			browse.click();
+		};
+
+		browse.setAttribute('type', 'file');
+		browse.style.display = 'none';
+		browse.onchange = loadImage;
+
+		return {
+			load: load
+		};
+
+	})();
+
+	var ImageControl = (function ImageControl() {
+
+		var scale = 0.5;
+		var imgSource = new Image();
+		var imgState = null;
+		var selected = null;
+
+
+		var topics = ['slice', 'width', 'outset'];
+		var properties = {};
+		properties['border1'] = {
+			fill			: false,
+
+			slice_values	: [27, 27, 27, 27],
+			width_values	: [20, 20, 20, 20],
+			outset_values	: [0, 0, 0, 0],
+
+			slice_units		: [0, 0, 0, 0],
+			width_units		: [0, 0, 0, 0],
+			outset_units	: [0, 0, 0, 0],
+
+			repeat			: [1, 1],
+			size			: [300, 200],
+			preview_area	: 400
+		};
+
+		properties['border2'] = {
+			fill			: false,
+
+			slice_values	: [33, 33, 33, 33],
+			width_values	: [1.5, 1.5, 1.5, 1.5],
+			outset_values	: [0, 0, 0, 0],
+
+			slice_units		: [1, 1, 1, 1],
+			width_units		: [2, 2, 2, 2],
+			outset_units	: [0, 0, 0, 0],
+
+			repeat			: [2, 2],
+			size			: [300, 200],
+			preview_area	: 400
+		};
+
+		properties['border3'] = {
+			fill			: true,
+
+			slice_values	: [15, 15, 15, 15],
+			width_values	: [10, 10, 10, 10],
+			outset_values	: [0, 0, 0, 0],
+
+			slice_units		: [0, 0, 0, 0],
+			width_units		: [0, 0, 0, 0],
+			outset_units	: [0, 0, 0, 0],
+
+			repeat			: [2, 2],
+			size			: [300, 200],
+			preview_area	: 400
+		};
+
+		properties['border4'] = {
+			fill			: false,
+
+			slice_values	: [13, 13, 13, 13],
+			width_values	: [13, 13, 13, 13],
+			outset_values	: [13, 13, 13, 13],
+
+			slice_units		: [0, 0, 0, 0],
+			width_units		: [0, 0, 0, 0],
+			outset_units	: [0, 0, 0, 0],
+
+			repeat			: [0, 0],
+			size			: [300, 200],
+			preview_area	: 400
+		};
+
+		properties['border5'] = {
+			fill			: false,
+
+			slice_values	: [0, 12, 0, 12],
+			width_values	: [0, 12, 0, 12],
+			outset_values	: [0, 0, 0, 0],
+
+			slice_units		: [0, 0, 0, 0],
+			width_units		: [0, 0, 0, 0],
+			outset_units	: [0, 0, 0, 0],
+
+			repeat			: [0, 0],
+			size			: [300, 200],
+			preview_area	: 400,
+		};
+
+		properties['border6'] = {
+			fill			: false,
+
+			slice_values	: [42, 42, 42, 42],
+			width_values	: [42, 42, 42, 42],
+			outset_values	: [0, 0, 0, 0],
+
+			slice_units		: [0, 0, 0, 0],
+			width_units		: [0, 0, 0, 0],
+			outset_units	: [0, 0, 0, 0],
+
+			repeat			: [2, 2],
+			size			: [350, 350],
+			preview_area	: 500,
+		};
+
+
+		var loadLocalImage = function loadLocalImage(source) {
+			var location = "images/" + source;
+			imgSource.src = location;
+		};
+
+		var loadRemoteImage = function loadRemoteImage(source) {
+			imgSource.src = source;
+			if (selected)
+				selected.removeAttribute('selected');
+			Tool.setOutputCSS('source', 'url("' + source + '")');
+		};
+
+		var pickImage = function pickImage(e) {
+			if (e.target.className === 'image') {
+				selected = e.target;
+				selected.setAttribute('selected', 'true');
+				loadRemoteImage(e.target.src);
+				imgState = e.target.getAttribute('data-stateID');
+			}
+		};
+
+		var loadImageState = function loadImageState(stateID) {
+			if (properties[stateID] === undefined)
+				return;
+
+			var prop = properties[stateID];
+			var topic;
+			var unit_array;
+			var value_array;
+
+			for (var i in topics) {
+				for (var j=0; j&lt;4; j++) {
+					topic = topics[i] + '-' + positions[j];
+					unit_array = topics[i] + '_units';
+					value_array = topics[i] + '_values';
+					InputSliderManager.setValue(topic, prop[value_array][j]);
+					DropDownManager.setValue(topic, prop[unit_array][j]);
+				}
+			}
+
+			ButtonManager.setValue('slice-fill', prop['fill']);
+			DropDownManager.setValue('image-repeat-X', prop['repeat'][0]);
+			DropDownManager.setValue('image-repeat-Y', prop['repeat'][1]);
+			InputSliderManager.setValue('preview-width', prop['size'][0]);
+			InputSliderManager.setValue('preview-height', prop['size'][1]);
+			InputSliderManager.setValue('preview-area-height', prop['preview_area']);
+		};
+
+		var update = function update() {
+			scale =  Math.min(300, (30000 / this.width) | 0);
+			setScale(scale);
+			InputSliderManager.setValue('scale', scale, false);
+
+			subject.style.backgroundImage = 'url("' + this.src + '")';
+			preview.style.borderImageSource = 'url("' + this.src + '")';
+
+			guidelines['slice-top'].setMax(this.height);
+			guidelines['slice-right'].setMax(this.width);
+			guidelines['slice-bottom'].setMax(this.height);
+			guidelines['slice-left'].setMax(this.width);
+
+			if (imgState)
+				loadImageState(imgState);
+		};
+
+		var setScale = function setScale(value) {
+			scale = value;
+			var w = imgSource.width * scale / 100 | 0;
+			var h = imgSource.height * scale / 100 | 0;
+			subject.style.width = w + 'px';
+			subject.style.height = h + 'px';
+
+			for (var i = 0; i &lt; positions.length; i++)
+				guidelines['slice-' + positions[i]].updateGuidelinePos();
+		};
+
+		var getScale = function getScale() {
+			return scale/100;
+		};
+
+		var toggleGallery = function toggleGallery() {
+			var gallery = getElemById('image-gallery');
+			var button  = getElemById('toggle-gallery');
+			var state = 1;
+			button.addEventListener('click', function() {
+				state = 1 ^ state;
+				if (state === 0) {
+					gallery.setAttribute('data-collapsed', 'true');
+					button.setAttribute('data-action', 'show');
+				}
+				else {
+					gallery.removeAttribute('data-collapsed');
+					button.setAttribute('data-action', 'hide');
+				}
+			});
+		};
+
+		var init = function init() {
+			var gallery = getElemById('image-gallery');
+			var browse = getElemById('load-image');
+			var remote = getElemById('remote-url');
+			var load_remote = getElemById('load-remote');
+
+			remote.addEventListener('change', function(){
+				loadRemoteImage(this.value);
+			});
+
+			load_remote.addEventListener('click', function(){
+				loadRemoteImage(remote.value);
+			});
+
+			browse.addEventListener('click', ImageReader.load);
+			gallery.addEventListener('click', pickImage);
+			imgSource.addEventListener('load', update);
+
+			InputSliderManager.subscribe('scale', setScale);
+			InputSliderManager.setValue('scale', scale);
+			imgState = 'border1';
+			loadRemoteImage('https://mdn.mozillademos.org/files/6007/border-image-1.png');
+			toggleGallery();
+		};
+
+		return {
+			init: init,
+			getScale : getScale,
+			loadRemoteImage: loadRemoteImage
+		};
+
+	})();
+
+	var GuideLine = function GuideLine(node) {
+		var topic = node.getAttribute('data-topic');
+		var axis = node.getAttribute('data-axis');
+
+		this.node = node;
+		this.topic = topic;
+		this.axis = axis;
+		this.info = topic.split('-')[1];
+
+		this.position = 0;
+		this.value = 0;
+		this.unit = 0;
+		this.max = 0;
+		this.pos = positions.indexOf(this.info);
+
+		guidelines[topic] = this;
+
+		var relative_container = document.createElement('div');
+		var tooltip = document.createElement('div');
+		var tooltip2 = document.createElement('div');
+
+		tooltip.className = 'tooltip';
+		tooltip.setAttribute('data-info', this.info);
+
+		tooltip2.className = 'tooltip2';
+		tooltip2.textContent = this.info;
+		tooltip2.setAttribute('data-info', this.info);
+
+		this.tooltip = tooltip;
+
+		relative_container.appendChild(tooltip);
+		relative_container.appendChild(tooltip2);
+		node.appendChild(relative_container);
+
+		var startX = 0;
+		var startY = 0;
+		var start = 0;
+
+		var startDrag = function startDrag(e) {
+			startX = e.clientX;
+			startY = e.clientY;
+			start = guidelines[topic].position;
+			document.body.setAttribute('data-move', axis);
+			relative_container.setAttribute('data-active', '');
+			node.setAttribute('data-active', '');
+
+			document.addEventListener('mousemove', updateGuideline);
+			document.addEventListener('mouseup', endDrag);
+		};
+
+		var endDrag = function endDrag() {
+			document.body.removeAttribute('data-move');
+			relative_container.removeAttribute('data-active');
+			node.removeAttribute('data-active');
+
+			document.removeEventListener('mousemove', updateGuideline);
+		};
+
+		var updateGuideline = function updateGuideline(e) {
+			var value;
+			if (topic === 'slice-top')
+				value = e.clientY - startY + start;
+
+			if (topic === 'slice-right')
+				value = startX - e.clientX + start;
+
+			if (topic === 'slice-bottom')
+				value = startY - e.clientY + start;
+
+			if (topic === 'slice-left')
+				value = e.clientX - startX + start;
+
+			if (this.unit === 0)
+				InputSliderManager.setValue(topic, value * 1 / ImageControl.getScale() | 0);
+			else {
+				InputSliderManager.setValue(topic, (value * 100 / (this.max * ImageControl.getScale())) | 0);
+			}
+
+		}.bind(this);
+
+		node.addEventListener("mousedown", startDrag);
+
+		InputSliderManager.subscribe(topic, this.setPosition.bind(this));
+		InputSliderManager.setValue(topic, this.position);
+	};
+
+
+	GuideLine.prototype.updateGuidelinePos = function updateGuidelinePos() {
+		if (this.unit === 0)
+			this.position = this.value * ImageControl.getScale() | 0;
+		else
+			this.position = this.value * this.max * ImageControl.getScale() / 100 | 0;
+
+		this.node.style[this.info] = this.position + 'px';
+	};
+
+	GuideLine.prototype.setPosition = function setPosition(value) {
+		this.value = value;
+		this.tooltip.textContent = value;
+		this.updateGuidelinePos();
+		Tool.setBorderSlice(this.pos, value);
+	};
+
+	GuideLine.prototype.setMax = function setMax(max) {
+		this.max = max;
+		this.updateLimit();
+	};
+
+	GuideLine.prototype.updateLimit = function updateLimit() {
+		if (this.unit === 1)
+			InputSliderManager.setMax(this.topic, 100);
+		else
+			InputSliderManager.setMax(this.topic, this.max);
+	};
+
+	GuideLine.prototype.setUnit = function setUnit(type) {
+		if (type === '%')	this.unit = 1;
+		if (type === '')	this.unit = 0;
+		this.updateLimit();
+	};
+
+	/*
+	 * Unit panel
+	 */
+	var UnitPanel = (function UnitPanel () {
+
+		var panel;
+		var title;
+		var precision;
+		var step;
+		var unit_topic = null; // settings are made for this topic
+		var step_option = [1, 0.1, 0.01];
+
+		var updatePrecision = function updatePrecision(value) {
+			InputSliderManager.setPrecision('unit-step', value);
+			InputSliderManager.setStep('unit-step', step_option[value]);
+			InputSliderManager.setMin('unit-step', step_option[value]);
+
+			if (unit_topic)
+				InputSliderManager.setPrecision(unit_topic, value);
+		};
+
+		var updateUnitSettings = function updateUnitSettings(value) {
+			if (unit_topic)
+				InputSliderManager.setStep(unit_topic, value);
+		};
+
+		var show = function show(e) {
+			var topic = e.target.getAttribute('data-topic');
+			var precision = InputSliderManager.getPrecision(topic);
+			var step = InputSliderManager.getStep(topic);
+
+			unit_topic = topic;
+			title.textContent = topic;
+
+			panel.setAttribute('data-active', 'true');
+			panel.style.top = e.target.offsetTop - 40 + 'px';
+			panel.style.left = e.target.offsetLeft + 30 + 'px';
+
+			InputSliderManager.setValue('unit-precision', precision);
+			InputSliderManager.setValue('unit-step', step);
+		};
+
+		var init = function init() {
+			panel = document.createElement('div');
+			title = document.createElement('div');
+			var close = document.createElement('div');
+
+			step = InputSliderManager.createSlider('unit-step', 'step');
+			precision = InputSliderManager.createSlider('unit-precision', 'precision');
+
+			InputSliderManager.setStep('unit-precision', 1);
+			InputSliderManager.setMax('unit-precision', 2);
+			InputSliderManager.setValue('unit-precision', 2);
+			InputSliderManager.setSensivity('unit-precision', 20);
+
+			InputSliderManager.setValue('unit-step', 1);
+			InputSliderManager.setStep('unit-step', 0.01);
+			InputSliderManager.setPrecision('unit-step', 2);
+
+			InputSliderManager.subscribe('unit-precision', updatePrecision);
+			InputSliderManager.subscribe('unit-step', updateUnitSettings);
+
+			close.addEventListener('click', function () {
+				panel.setAttribute('data-active', 'false');
+			});
+
+			title.textContent = 'Properties';
+			title.className = 'title';
+			close.className = 'close';
+			panel.id = 'unit-settings';
+			panel.setAttribute('data-active', 'false');
+			panel.appendChild(title);
+			panel.appendChild(precision);
+			panel.appendChild(step);
+			panel.appendChild(close);
+			document.body.appendChild(panel);
+		};
+
+		return {
+			init : init,
+			show : show
+		};
+
+	})();
+
+	/**
+	 * Tool Manager
+	 */
+	var Tool = (function Tool() {
+		var preview_area;
+		var dropdown_unit_options = [
+			{ '' : '--', '%' : '%'},
+			{ 'px' : 'px', '%' : '%', 'em' : 'em'},
+			{ 'px' : 'px', 'em' : 'em'},
+		];
+
+		var border_slice = [];
+		var border_width = [];
+		var border_outset = [];
+
+		var border_slice_values = [];
+		var border_width_values = [];
+		var border_outset_values = [];
+
+		var border_slice_units = ['', '', '', ''];
+		var border_width_units = ['px', 'px', 'px', 'px'];
+		var border_outset_units = ['px', 'px', 'px', 'px'];
+
+		var border_fill = false;
+		var border_repeat = ['round', 'round'];
+		var CSS_code = {
+			'source' : null,
+			'slice' : null,
+			'width' : null,
+			'outset' : null,
+			'repeat' : null
+		};
+
+		var setBorderSlice = function setBorderSlice(positionID, value) {
+			border_slice[positionID] = value + border_slice_units[positionID];
+			updateBorderSlice();
+		};
+
+		var updateBorderSlice = function updateBorderSlice() {
+			var value = border_slice.join(' ');
+			if (border_fill === true)
+				value += ' fill';
+
+			preview.style.borderImageSlice = value;
+			setOutputCSS('slice', value);
+		};
+
+		var setBorderFill = function setBorderFill(value) {
+			border_fill = value;
+			var bimgslice = border_slice.join(' ');;
+			if (value === true)
+				bimgslice += ' fill';
+
+			preview.style.borderImageSlice = bimgslice;
+		};
+
+		var updateBorderWidth = function updateBorderWidth() {
+			var value = border_width.join(' ');
+			preview.style.borderImageWidth = value;
+			setOutputCSS('width', value);
+		};
+
+		var updateBorderOutset = function updateBorderOutset() {
+			var value = border_outset.join(' ');
+			preview.style.borderImageOutset = border_outset.join(' ');
+			setOutputCSS('outset', value);
+		};
+
+		var setBorderRepeat = function setBorderRepeat(obj) {
+			border_repeat[obj.value] = obj.name;
+			var value = border_repeat.join(' ');
+			preview.style.borderImageRepeat = value;
+			setOutputCSS('repeat', value);
+		};
+
+		var setOutputCSS = function setOutputCSS(topic, value) {
+			CSS_code[topic].textContent = value + ';';
+		};
+
+		var setPreviewFontSize = function setPreviewFontSize(value) {
+			preview.style.fontSize = value + 'px';
+		};
+
+		var setPreviewWidth = function setPreviewWidth(value) {
+			preview.style.width = value + 'px';
+		};
+
+		var setPreviewHeight = function setPreviewHeight(value) {
+			preview.style.height = value + 'px';
+		};
+
+		var setPreviewAreaHeight = function setPreviewAreaHeight(value) {
+			preview_area.style.height = value + 'px';
+		};
+
+		var updateDragOption = function updateDragOption(value) {
+			if (value === true)
+				subject.setAttribute('data-draggable', 'true');
+			else
+				subject.removeAttribute('data-draggable');
+		};
+
+		var createProperty = function createProperty(topic, labelID, optionsID) {
+
+			var slider = InputSliderManager.createSlider(topic, positions[labelID]);
+			var dropdown = DropDownManager.createDropDown(topic, dropdown_unit_options[optionsID]);
+
+			InputSliderManager.setSensivity(topic, 3);
+			InputSliderManager.setPrecision(topic, 1);
+
+			var property = document.createElement('div');
+			var config = document.createElement('div');
+
+			property.className = 'property';
+			config.className = 'config';
+			config.setAttribute('data-topic', topic);
+			config.addEventListener('click', UnitPanel.show);
+
+			property.appendChild(slider);
+			property.appendChild(dropdown);
+			property.appendChild(config);
+
+			return property;
+		};
+
+		var initBorderSliceControls = function initBorderSliceControls() {
+			var container = getElemById('border-slice-control');
+
+			var listenForChanges = function listenForChanges(topic, id) {
+				InputSliderManager.subscribe(topic, function(value) {
+					border_slice_values[id] = value;
+					border_slice[id] = value + border_slice_units[id];
+					updateBorderSlice();
+				});
+
+				DropDownManager.subscribe(topic, function(obj) {
+					guidelines[topic].setUnit(obj.value);
+					border_slice_units[id] = obj.value;
+					border_slice[id] = border_slice_values[id] + obj.value;
+					updateBorderSlice();
+				});
+			};
+
+			for (var i = 0; i &lt; positions.length; i++) {
+				var topic = 'slice-' + positions[i];
+				var property = createProperty(topic, i, 0);
+				listenForChanges(topic, i);
+
+				container.appendChild(property);
+			}
+
+			container.appendChild(container.children[1]);
+
+		};
+
+		var initBorderWidthControls = function initBorderWidthControls() {
+			var container = getElemById('border-width-control');
+
+			var listenForChanges = function listenForChanges(topic, id) {
+				InputSliderManager.subscribe(topic, function(value) {
+					border_width_values[id] = value;
+					border_width[id] = value + border_width_units[id];
+					updateBorderWidth();
+				});
+
+				DropDownManager.subscribe(topic, function(obj) {
+					if (obj.value === '%')
+						InputSliderManager.setMax(topic, 100);
+					else
+						InputSliderManager.setMax(topic, 1000);
+
+					border_width_units[id] = obj.value;
+					border_width[id] = border_width_values[id] + obj.value;
+					updateBorderWidth();
+				});
+			};
+
+			for (var i = 0; i &lt; positions.length; i++) {
+				var topic = 'width-' + positions[i];
+				var property = createProperty(topic, i, 1);
+				InputSliderManager.setMax(topic, 1000);
+				listenForChanges(topic, i);
+
+				container.appendChild(property);
+			}
+		};
+
+		var initBorderOutsetControls = function initBorderOutsetControls() {
+
+			var container = getElemById('border-outset-control');
+
+			var listenForChanges = function listenForChanges(topic, id) {
+				InputSliderManager.subscribe(topic, function(value) {
+					border_outset_values[id] = value;
+					border_outset[id] = value + border_outset_units[id];
+					updateBorderOutset();
+				});
+
+				DropDownManager.subscribe(topic, function(obj) {
+					border_outset_units[id] = obj.value;
+					border_outset[id] = border_outset_values[id] + obj.value;
+					updateBorderOutset();
+				});
+			};
+
+			for (var i = 0; i &lt; positions.length; i++) {
+				var topic = 'outset-' + positions[i];
+				var property = createProperty(topic, i, 2);
+				InputSliderManager.setMax(topic, 1000);
+				listenForChanges(topic, i);
+
+				container.appendChild(property);
+			}
+		};
+
+		var init = function init() {
+
+			var gallery =
+			subject = getElemById('subject');
+			preview = getElemById("preview");
+			preview_area = getElemById("preview_section");
+
+
+			CSS_code['source'] = getElemById("out-border-source");
+			CSS_code['slice'] = getElemById("out-border-slice");
+			CSS_code['width'] = getElemById("out-border-width");
+			CSS_code['outset'] = getElemById("out-border-outset");
+			CSS_code['repeat'] = getElemById("out-border-repeat");
+
+			initBorderSliceControls();
+			initBorderWidthControls();
+			initBorderOutsetControls();
+
+			var elem = document.querySelectorAll('.guideline');
+			var size = elem.length;
+			for (var i = 0; i &lt; size; i++)
+				new GuideLine(elem[i]);
+
+			PreviewControl.init();
+
+			ButtonManager.subscribe('slice-fill',setBorderFill);
+			ButtonManager.subscribe('drag-subject', updateDragOption);
+			ButtonManager.setValue('drag-subject', false);
+
+			DropDownManager.subscribe('image-repeat-X', setBorderRepeat);
+			DropDownManager.subscribe('image-repeat-Y', setBorderRepeat);
+
+			InputSliderManager.subscribe('preview-area-height', setPreviewAreaHeight);
+			InputSliderManager.subscribe('preview-width', setPreviewWidth);
+			InputSliderManager.subscribe('preview-height', setPreviewHeight);
+			InputSliderManager.subscribe('font-size', setPreviewFontSize);
+			InputSliderManager.setValue('preview-width', 300);
+			InputSliderManager.setValue('preview-height', 200);
+		};
+
+		return {
+			init: init,
+			setOutputCSS: setOutputCSS,
+			setBorderSlice: setBorderSlice
+		};
+
+	})();
+
+	/**
+	 * Init Tool
+	 */
+	var init = function init() {
+		InputSliderManager.init();
+		DropDownManager.init();
+		ButtonManager.init();
+		UnitPanel.init();
+		Tool.init();
+		ImageControl.init();
+	};
+
+	return {
+		init : init
+	};
+
+})();
+
+</pre>
+</div>
+
+<p>{{EmbedLiveSample('Border_Image_Generator', '100%', '1270px')}}</p>
diff --git a/files/de/web/css/css_backgrounds_and_borders/border-radius_generator/index.html b/files/de/web/css/css_backgrounds_and_borders/border-radius_generator/index.html
new file mode 100644
index 0000000000..2682c0adc8
--- /dev/null
+++ b/files/de/web/css/css_backgrounds_and_borders/border-radius_generator/index.html
@@ -0,0 +1,1601 @@
+---
+title: Border-radius Generator
+slug: Web/CSS/CSS_Backgrounds_and_Borders/Border-radius_generator
+tags:
+  - CSS
+  - Werkzeuge
+translation_of: Web/CSS/CSS_Background_and_Borders/Border-radius_generator
+original_slug: Web/CSS/CSS_Background_and_Borders/Border-radius_generator
+---
+<p>Dieses Werkzeug kann dazu verwendet werden, CSS3 {{cssxref("border-radius")}} Effekte zu erzeugen.</p>
+
+<div class="hidden">
+<h2 id="border-radius-generator" name="border-radius-generator">border-radius</h2>
+
+<h3 id="HTML_Content">HTML Content</h3>
+
+<pre class="brush: html">&lt;div id="container"&gt;
+    &lt;div class="group section"&gt;
+        &lt;div id="preview" class="col span_12"&gt;
+            &lt;div id="subject"&gt;
+                &lt;div id="top-left" class="radius-container"
+                    data-X="left" data-Y="top"&gt;
+                &lt;/div&gt;
+                &lt;div id="top-right" class="radius-container"
+                    data-X="right" data-Y="top"&gt;
+                &lt;/div&gt;
+                &lt;div id="bottom-right" class="radius-container"
+                    data-X="right" data-Y="bottom"&gt;
+                &lt;/div&gt;
+                &lt;div id="bottom-left" class="radius-container"
+                    data-X="left" data-Y="bottom"&gt;
+                &lt;/div&gt;
+
+                &lt;div id="radius-ui-sliders"&gt;
+                    &lt;div id="tlr" class="ui-input-slider" data-topic="top-left"
+                         data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
+
+                    &lt;div id="tlw" class="ui-input-slider" data-topic="top-left-w"
+                         data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
+
+                    &lt;div id="tlh" class="ui-input-slider" data-topic="top-left-h"
+                        data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
+
+                    &lt;div id="trr" class="ui-input-slider" data-topic="top-right"
+                         data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
+
+                    &lt;div id="trw" class="ui-input-slider" data-topic="top-right-w"
+                         data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
+
+                    &lt;div id="trh" class="ui-input-slider" data-topic="top-right-h"
+                        data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
+
+                    &lt;div id="brr" class="ui-input-slider" data-topic="bottom-right"
+                         data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
+
+                    &lt;div id="brw" class="ui-input-slider" data-topic="bottom-right-w"
+                         data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
+
+                    &lt;div id="brh" class="ui-input-slider" data-topic="bottom-right-h"
+                        data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
+
+                    &lt;div id="blr" class="ui-input-slider" data-topic="bottom-left"
+                         data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
+
+                    &lt;div id="blw" class="ui-input-slider" data-topic="bottom-left-w"
+                         data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
+
+                    &lt;div id="blh" class="ui-input-slider" data-topic="bottom-left-h"
+                        data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
+                &lt;/div&gt;
+            &lt;/div&gt;
+        &lt;/div&gt;
+    &lt;/div&gt;
+    &lt;div id="controls" class="group section"&gt;
+
+        &lt;div class="group section"&gt;
+            &lt;div id="dimensions"&gt;
+                &lt;div class="ui-input-slider" data-topic="width" data-info="width"
+                     data-unit=" px" data-min="150" data-max="700" data-sensivity="1"&gt;&lt;/div&gt;
+
+                &lt;div class="ui-input-slider" data-topic="height" data-info="height"
+                    data-unit=" px" data-min="75" data-max="350" data-sensivity="1"&gt;&lt;/div&gt;
+            &lt;/div&gt;
+
+            &lt;div id="output"&gt;&lt;/div&gt;
+        &lt;/div&gt;
+
+        &lt;div class="group section"&gt;
+            &lt;div id="radius-lock"&gt;
+                &lt;div class="info"&gt; rounded corner &lt;/div&gt;
+                &lt;div class="ui-checkbox" data-topic='top-left'&gt;&lt;/div&gt;
+                &lt;div class="ui-checkbox" data-topic='top-right'&gt;&lt;/div&gt;
+                &lt;div class="ui-checkbox" data-topic='bottom-right'&gt;&lt;/div&gt;
+                &lt;div class="ui-checkbox" data-topic='bottom-left'&gt;&lt;/div&gt;
+            &lt;/div&gt;
+
+            &lt;div id="unit-selection"&gt;
+                &lt;div class="info"&gt; select border units &lt;/div&gt;
+            &lt;/div&gt;
+        &lt;/div&gt;
+
+    &lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="CSS_Content">CSS Content</h3>
+
+<pre class="brush: css">/*  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 &gt; 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 &gt; input {
+ 	display: none;
+}
+
+.ui-checkbox &gt; 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 &gt; label:hover {
+	cursor: pointer;
+}
+
+.ui-checkbox &gt; 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 &gt; 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;
+}
+
+
+</pre>
+
+<h3 id="JavaScript_Content">JavaScript Content</h3>
+
+<pre class="brush: js"><code class="language-js">'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 &gt; 0 ? max : 100;
+		this.step = step === 0 ? 1 : step;
+		this.topic = topic;
+		this.node = node;
+		this.unit = unit;
+		this.sensivity = sensivity &gt; 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 &gt; slider.max) value = slider.max;
+		if (value &lt; slider.min)	value = slider.min;
+
+		slider.value = value;
+		slider.node.setAttribute('data-value', value);
+
+		if (send_notify !== undefined &amp;&amp; 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 &lt; 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 &lt; 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 &lt; 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' &amp;&amp; y == 'top') handle.className = 'handle handle-top-left'
+		if (x === 'right' &amp;&amp; y == 'top') handle.className = 'handle handle-top-right';
+		if (x === 'right' &amp;&amp; y == 'bottom') handle.className = 'handle handle-bottom-right';
+		if (x === 'left' &amp;&amp; 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 &amp;&amp; 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 &lt; 0)	this.size = 0;
+			if (this.size &gt; this.maxR)	this.size = this.maxR;
+			this.updateRadius();
+			this.updateBorderRadius();
+			return;
+		}
+
+		if (deltaX) {
+			this.width += this.resizeX * deltaX;
+			if (this.width &lt; 0)	this.width = 0;
+			if (this.width &gt; this.maxW)	this.width = this.maxW;
+			this.updateWidth();
+		}
+
+		if (deltaY) {
+			this.height += this.resizeY * deltaY;
+			if (this.height &lt; 0) this.height = 0;
+			if (this.height &gt; 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 &lt; 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 &lt; 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 &lt; 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
+	}
+
+})();
+
+
+</code></pre>
+</div>
+
+<p>{{EmbedLiveSample('border-radius-generator', '100%', '800px')}}</p>
diff --git a/files/de/web/css/css_backgrounds_and_borders/box-shadow_generator/index.html b/files/de/web/css/css_backgrounds_and_borders/box-shadow_generator/index.html
new file mode 100644
index 0000000000..a1121165f0
--- /dev/null
+++ b/files/de/web/css/css_backgrounds_and_borders/box-shadow_generator/index.html
@@ -0,0 +1,2885 @@
+---
+title: Box-shadow Generator
+slug: Web/CSS/CSS_Backgrounds_and_Borders/Box-shadow_generator
+tags:
+  - CSS3
+  - Werkzeuge
+  - box-shadow
+translation_of: Web/CSS/CSS_Background_and_Borders/Box-shadow_generator
+original_slug: Web/CSS/CSS_Background_and_Borders/Box-shadow_generator
+---
+<p>Dieses Werkzeug erlaubt es, CSS {{cssxref("box-shadow")}} Effekte zu erstellen, um Schlagschatteneffekte zu CSS Objekten hinzuzufügen.</p>
+
+<div class="hidden">
+<h2 id="box-shadow_generator" name="box-shadow_generator">box-shadow generator</h2>
+
+<h3 id="HTML_Content">HTML Content</h3>
+
+<pre class="brush: html">&lt;div id="container"&gt;
+    &lt;div class="group section"&gt;
+        &lt;div id="layer_manager"&gt;
+            &lt;div class="group section"&gt;
+                &lt;div class="button" data-type="add"&gt; &lt;/div&gt;
+                &lt;div class="button" data-type="move-up"&gt; &lt;/div&gt;
+                &lt;div class="button" data-type="move-down"&gt; &lt;/div&gt;
+            &lt;/div&gt;
+            &lt;div id="stack_container"&gt;&lt;/div&gt;
+        &lt;/div&gt;
+
+        &lt;div id="preview_zone"&gt;
+            &lt;div id="layer_menu" class="col span_12"&gt;
+                &lt;div class="button" id="element" data-type="subject" data-title="element"&gt; element &lt;/div&gt;
+                &lt;div class="button" id="before" data-type="subject" data-title=":before"&gt;
+                    :before
+                    &lt;span class="delete" data-type="disable"&gt;&lt;/span&gt;
+                &lt;/div&gt;
+                &lt;div class="button" id="after" data-type="subject" data-title=":after"&gt;
+                    :after
+                    &lt;span class="delete" data-type="disable"&gt;&lt;/span&gt;
+                &lt;/div&gt;
+                &lt;div class="ui-checkbox" data-topic='before' data-label=":before"&gt;&lt;/div&gt;
+                &lt;div class="ui-checkbox" data-topic='after' data-label=":after"&gt;&lt;/div&gt;
+            &lt;/div&gt;
+
+            &lt;div id="preview"&gt;
+                &lt;div id="obj-element"&gt;
+                    &lt;div class="content"&gt; &lt;/div&gt;
+                    &lt;div id="obj-before"&gt; &lt;/div&gt;
+                    &lt;div id="obj-after"&gt; &lt;/div&gt;
+                &lt;/div&gt;
+            &lt;/div&gt;
+        &lt;/div&gt;
+    &lt;/div&gt;
+
+    &lt;div id="controls" class="group section"&gt;
+        &lt;div class="wrap-left"&gt;
+            &lt;div class="colorpicker category"&gt;
+                &lt;div class="title"&gt; &lt;/div&gt;
+                &lt;div id="colorpicker" class="group"&gt;
+                    &lt;div id="gradient" class="gradient"&gt;
+                        &lt;div id="gradient_picker"&gt; &lt;/div&gt;
+                    &lt;/div&gt;
+                    &lt;div id="hue" data-topic="hue" class="hue"&gt;
+                        &lt;div id="hue_selector"&gt; &lt;/div&gt;
+                    &lt;/div&gt;
+                    &lt;div class="info"&gt;
+                        &lt;div class="input" data-topic="hue" data-title='H:' data-action="HSV"&gt;&lt;/div&gt;
+                        &lt;div class="input" data-topic="saturation" data-title='S:' data-action="HSV"&gt;&lt;/div&gt;
+                        &lt;div class="input" data-topic="value" data-title='V:' data-action="HSV"&gt;&lt;/div&gt;
+                    &lt;/div&gt;
+                    &lt;div class="alpha"&gt;
+                        &lt;div id="alpha" data-topic="alpha"&gt;
+                            &lt;div id="alpha_selector"&gt; &lt;/div&gt;
+                        &lt;/div&gt;
+                    &lt;/div&gt;
+                    &lt;div class="info"&gt;
+                        &lt;div class="input" data-topic="r" data-title='R:' data-action="RGB"&gt;&lt;/div&gt;
+                        &lt;div class="input" data-topic="g" data-title='G:' data-action="RGB"&gt;&lt;/div&gt;
+                        &lt;div class="input" data-topic="b" data-title='B:' data-action="RGB"&gt;&lt;/div&gt;
+                    &lt;/div&gt;
+                    &lt;div class="preview block"&gt;
+                        &lt;div id="output_color"&gt; &lt;/div&gt;
+                    &lt;/div&gt;
+                    &lt;div class="block info"&gt;
+                        &lt;div class="input" data-topic="a" data-title='alpha:' data-action="alpha"&gt;&lt;/div&gt;
+                        &lt;div class="input" data-topic="hexa" data-title='' data-action="hexa"&gt;&lt;/div&gt;
+                    &lt;/div&gt;
+                &lt;/div&gt;
+            &lt;/div&gt;
+        &lt;/div&gt;
+
+        &lt;div class="wrap-right"&gt;
+
+            &lt;div id="shadow_properties" class="category"&gt;
+                &lt;div class="title"&gt; Shadow properties &lt;/div&gt;
+                &lt;div class="group"&gt;
+                    &lt;div class="group property"&gt;
+                        &lt;div class="ui-slider-name"&gt; inset &lt;/div&gt;
+                        &lt;div class="ui-checkbox" data-topic='inset'&gt;&lt;/div&gt;
+                    &lt;/div&gt;
+                    &lt;div class="slidergroup"&gt;
+                        &lt;div class="ui-slider-name"&gt; Position x &lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="posX" data-type="sub"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider" data-topic="posX"
+                            data-min="-500" data-max="500" data-step="1"&gt; &lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="posX" data-type="add"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider-input" data-topic="posX" data-unit="px"&gt;&lt;/div&gt;
+                    &lt;/div&gt;
+                    &lt;div class="slidergroup"&gt;
+                        &lt;div class="ui-slider-name"&gt; Position y &lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="posY" data-type="sub"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider" data-topic="posY"
+                            data-min="-500" data-max="500" data-step="1"&gt; &lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="posY" data-type="add"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider-input" data-topic="posY" data-unit="px"&gt;&lt;/div&gt;
+                    &lt;/div&gt;
+                    &lt;div class="slidergroup"&gt;
+                        &lt;div class="ui-slider-name"&gt; Blur &lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="blur" data-type="sub"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider" data-topic="blur"
+                            data-min="0" data-max="200" data-step="1"&gt; &lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="blur" data-type="add"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider-input" data-topic="blur" data-unit="px"&gt;&lt;/div&gt;
+                    &lt;/div&gt;
+                    &lt;div class="slidergroup"&gt;
+                        &lt;div class="ui-slider-name"&gt; Spread &lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="spread" data-type="sub"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider" data-topic="spread"
+                            data-min="-100"    data-max="100" data-step="1" data-value="50"&gt;
+                        &lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="spread" data-type="add"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider-input" data-topic="spread" data-unit="px"&gt;&lt;/div&gt;
+                    &lt;/div&gt;
+                &lt;/div&gt;
+            &lt;/div&gt;
+
+            &lt;div id="element_properties" class="category"&gt;
+                &lt;div class="title"&gt; Class element properties &lt;/div&gt;
+                &lt;div class="group"&gt;
+                    &lt;div class="group property"&gt;
+                        &lt;div class="ui-slider-name"&gt; border &lt;/div&gt;
+                        &lt;div class="ui-checkbox" data-topic='border-state' data-state="true"&gt;&lt;/div&gt;
+                    &lt;/div&gt;
+                    &lt;div id="z-index" class="slidergroup"&gt;
+                        &lt;div class="ui-slider-name"&gt; z-index &lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="z-index" data-type="sub"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider" data-topic="z-index"
+                            data-min="-10" data-max="10" data-step="1"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="z-index" data-type="add"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider-input" data-topic="z-index"&gt;&lt;/div&gt;
+                    &lt;/div&gt;
+                    &lt;div class="slidergroup"&gt;
+                        &lt;div class="ui-slider-name"&gt; top &lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="top" data-type="sub"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider" data-topic="top"
+                            data-min="-500" data-max="500" data-step="1"&gt; &lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="top" data-type="add"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider-input" data-topic="top" data-unit="px"&gt;&lt;/div&gt;
+                    &lt;/div&gt;
+                    &lt;div class="slidergroup"&gt;
+                        &lt;div class="ui-slider-name"&gt; left &lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="left" data-type="sub"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider" data-topic="left"
+                            data-min="-300" data-max="700" data-step="1"&gt; &lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="left" data-type="add"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider-input" data-topic="left" data-unit="px"&gt;&lt;/div&gt;
+                    &lt;/div&gt;
+                    &lt;div id="transform_rotate" class="slidergroup"&gt;
+                        &lt;div class="ui-slider-name"&gt; Rotate &lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="rotate" data-type="sub"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider" data-topic="rotate"
+                            data-min="-360" data-max="360" data-step="1" data-value="0"&gt;
+                        &lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="rotate" data-type="add"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider-input" data-topic="rotate" data-unit="deg"&gt;&lt;/div&gt;
+                    &lt;/div&gt;
+                    &lt;div class="slidergroup"&gt;
+                        &lt;div class="ui-slider-name"&gt; Width &lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="width" data-type="sub"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider" data-topic="width"
+                            data-min="0" data-max="1000" data-step="1" data-value="200"&gt;
+                        &lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="width" data-type="add"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider-input" data-topic="width"  data-unit="px"&gt;&lt;/div&gt;
+                    &lt;/div&gt;
+                    &lt;div class="slidergroup"&gt;
+                        &lt;div class="ui-slider-name"&gt; Height &lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="height" data-type="sub"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider" data-topic="height"
+                            data-min="0" data-max="400" data-step="1" data-value="200"&gt;
+                        &lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="height" data-type="add"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider-input" data-topic="height" data-unit="px"&gt;&lt;/div&gt;
+                    &lt;/div&gt;
+                &lt;/div&gt;
+            &lt;/div&gt;
+
+            &lt;div id="output" class="category"&gt;
+                &lt;div id="menu" class="menu"&gt;&lt;/div&gt;
+                &lt;div class="title"&gt;    CSS Code &lt;/div&gt;
+                &lt;div class="group" style="border-top-left-radius: 0;"&gt;
+                    &lt;div class="output" data-topic="element" data-name="element"
+                        data-prop="width height background-color position=[relative] box-shadow"&gt;
+                    &lt;/div&gt;
+                    &lt;div class="output" data-topic="before" data-name="element:before"
+                        data-prop="content=[&amp;quot;&amp;quot;] position=[absolute] width height top left z-index background-color box-shadow transform -webkit-transform -ms-transform"&gt;
+                    &lt;/div&gt;
+                    &lt;div class="output" data-topic="after" data-name="element:after"
+                        data-prop="content=[&amp;quot;&amp;quot;] position=[absolute] width height top left z-index background-color box-shadow transform -webkit-transform -ms-transform"&gt;
+                    &lt;/div&gt;
+                &lt;/div&gt;
+            &lt;/div&gt;
+        &lt;/div&gt;
+    &lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="CSS_Content">CSS Content</h3>
+
+<pre class="brush: css">/*  GRID OF TWELVE
+ * ========================================================================== */
+
+.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 Slider
+ */
+
+.slidergroup {
+	height: 20px;
+	margin: 10px 0;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	-moz-user-select: none;
+	user-select: none;
+}
+
+.slidergroup * {
+	float: left;
+	height: 100%;
+	line-height: 100%;
+}
+
+/* Slider */
+
+.ui-slider {
+	height: 10px;
+	width: 200px;
+	margin: 4px 10px;
+	display: block;
+	border: 1px solid #999;
+	border-radius: 3px;
+	background: #EEE;
+}
+
+.ui-slider:hover {
+	cursor: pointer;
+}
+
+.ui-slider-name {
+	width: 90px;
+	padding: 0 10px 0 0;
+	text-align: right;
+	text-transform: lowercase;
+}
+
+.ui-slider-pointer {
+	width: 13px;
+	height: 13px;
+	background-color: #EEE;
+	border: 1px solid #2C9FC9;
+	border-radius: 3px;
+	position: relative;
+	top: -3px;
+	left: 0%;
+}
+
+.ui-slider-btn-set {
+	width: 25px;
+	background-color: #2C9FC9;
+	border-radius: 3px;
+	color: #FFF;
+	font-weight: bold;
+	text-align: center;
+}
+
+.ui-slider-btn-set:hover {
+	background-color: #379B4A;
+	cursor: pointer;
+}
+
+.ui-slider-input &gt; input {
+	margin: 0 10px;
+	padding: 0;
+	width: 50px;
+	text-align: center;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+/*
+ * UI Button
+ */
+
+/* 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 &gt; input {
+ 	display: none;
+}
+
+.ui-checkbox &gt; 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 &gt; label:hover {
+	cursor: pointer;
+}
+
+.ui-checkbox &gt; input:checked + label {
+	background-image: url("https://mdn.mozillademos.org/files/5681/checked.png");
+	background-color: #379B4A;
+}
+
+/*
+ * BOX SHADOW GENERATOR TOOL
+ */
+
+body {
+	max-width: 1000px;
+	height: 800px;
+	margin: 20px auto 0;
+
+	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;
+}
+
+#container {
+	width: 100%;
+	padding: 2px;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+
+/* container with shadows stacks */
+#stack_container {
+	height: 400px;
+	overflow: hidden;
+	position: relative;
+	border: 1px solid #CCC;
+	border-radius: 3px;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+#stack_container .container {
+	height: 100%;
+	width: 100%;
+	position: absolute;
+	left: 100%;
+	transition-property: left;
+	transition-duration: 0.5s;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+
+#stack_container .title {
+	text-align: center;
+	font-weight: bold;
+	line-height: 2em;
+	border-bottom: 1px solid #43A6E1;
+	color: #666;
+}
+
+
+/*
+ * Stack of Layers for shadow
+ */
+
+#layer_manager {
+	width: 17%;
+	background-color: #FEFEFE;
+	margin: 0 1% 0 0;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+	float: left;
+}
+
+
+#layer_manager .button {
+	width: 30%;
+	height: 25px;
+	margin:0 0 10px;
+	color: #333;
+	background-color: #EEE;
+	text-align: center;
+	font-size: 0.75em;
+	line-height: 1.5em;
+	border: 1px solid #CCC;
+	border-radius: 3px;
+
+	display: block;
+	background-position: center center;
+	background-repeat: no-repeat;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+	float: left;
+}
+
+#layer_manager .button:hover {
+	background-color: #3380C4;
+	border: 1px solid #3380C4;
+	cursor: pointer;
+}
+
+#layer_manager [data-type='add'] {
+	background-image: url("https://mdn.mozillademos.org/files/5685/add-black.png");
+}
+
+#layer_manager [data-type='add']:hover {
+	background-image: url("https://mdn.mozillademos.org/files/5687/add-white.png");
+}
+
+#layer_manager [data-type='move-up'] {
+	background-image: url("https://mdn.mozillademos.org/files/5697/up-black.png");
+	margin-left: 5%;
+	margin-right: 5%;
+}
+
+#layer_manager [data-type='move-up']:hover {
+	background-image: url("https://mdn.mozillademos.org/files/5709/up-white.png");
+}
+
+#layer_manager [data-type='move-down'] {
+	background-image: url("https://mdn.mozillademos.org/files/5693/down-black.png");
+}
+
+#layer_manager [data-type='move-down']:hover {
+	background-image: url("https://mdn.mozillademos.org/files/5695/down-white.png");
+}
+
+/* shadows classes */
+
+#layer_manager .node {
+	width: 100%;
+	margin: 5px 0;
+	padding: 5px;
+	text-align: center;
+	background-color: #EEE;
+	border: 1px solid #DDD;
+	font-size: 0.75em;
+	line-height: 1.5em;
+	color: #333;
+	border-radius: 3px;
+
+	position: relative;
+	display: block;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+#layer_manager .node:hover {
+	color: #FFF;
+	background-color: #3380C4;
+	cursor: pointer;
+}
+
+/* active element styling */
+
+#layer_manager [data-active='layer'] {
+	color: #FFF;
+	border: none;
+	background-color: #379B4A;
+}
+
+#layer_manager [data-active='subject'] {
+	color: #FFF;
+	background-color: #467FC9;
+}
+
+/* delete button */
+
+#layer_manager .delete {
+	width: 1.5em;
+	height: 100%;
+	float: right;
+	border-radius: 3px;
+	background-image: url("https://mdn.mozillademos.org/files/5689/delete-white.png");
+	background-position: center center;
+	background-repeat: no-repeat;
+	position: absolute;
+	top: 0;
+	right: 10px;
+	display: none;
+}
+
+#layer_manager .delete:hover {
+	background-image: url("https://mdn.mozillademos.org/files/5691/delete-yellow.png");
+}
+
+#layer_manager .node:hover .delete {
+	display: block;
+}
+
+
+#layer_manager .stack {
+	padding: 0 5px;
+	max-height: 90%;
+	overflow: auto;
+	overflow-x: hidden;
+}
+
+
+/*
+ * Layer Menu
+ */
+
+#layer_menu {
+	margin: 0 0 10px 0;
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+#layer_menu .button {
+	width: 100px;
+	margin: 0 5px 0 0;
+	padding: 2.5px;
+	color: #333;
+	background-color: #EEE;
+	border: 1px solid #CCC;
+	border-radius: 3px;
+	text-align: center;
+	font-size: 0.75em;
+	line-height: 1.5em;
+
+	position: relative;
+	display: block;
+	float: left;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+#layer_menu .button:hover {
+	color: #FFF;
+	background-color: #3380C4;
+	border: 1px solid #3380C4;
+	cursor: pointer;
+}
+
+#layer_menu .delete {
+	width: 1.5em;
+	height: 100%;
+	float: right;
+	border-radius: 3px;
+	background-image: url("https://mdn.mozillademos.org/files/5689/delete-white.png");
+	background-position: center center;
+	background-repeat: no-repeat;
+	position: absolute;
+	top: 0;
+	right: 5px;
+	display: none;
+}
+
+#layer_menu .delete:hover {
+	background-image: url("https://mdn.mozillademos.org/files/5691/delete-yellow.png");
+}
+
+#layer_menu .button:hover .delete {
+	display: block;
+}
+
+
+/*
+ * active element styling
+ */
+
+#layer_menu [data-active='subject'] {
+	color: #FFF;
+	background-color: #379B4A;
+	border: 1px solid #379B4A;
+}
+
+
+/* Checkbox */
+
+#layer_menu .ui-checkbox &gt; label {
+	height: 15px;
+	line-height: 17px;
+	font-weight: normal;
+	width: 46px;
+	margin: 0 5px 0 0;
+}
+
+#layer_menu .ui-checkbox &gt; input:checked + label {
+	display: none;
+}
+
+
+/******************************************************************************/
+/******************************************************************************/
+/*
+ * Preview Area
+ */
+
+#preview_zone {
+	width: 82%;
+	float: left;
+
+}
+
+
+#preview {
+	width: 100%;
+	height: 400px;
+	border: 1px solid #CCC;
+	border-radius: 3px;
+	text-align: center;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+	cursor: move;
+	float: left;
+}
+
+#preview .content {
+	width: 100%;
+	height: 100%;
+	display: block;
+}
+
+#obj-element {
+	width: 300px;
+	height: 100px;
+	border: 1px solid #CCC;
+	background: #FFF;
+	position: relative;
+}
+
+
+#obj-before {
+	height: 100%;
+	width: 100%;
+	background: #999;
+	border: 1px solid #CCC;
+	text-align: left;
+	display : block;
+	position: absolute;
+	z-index: -1;
+}
+
+#obj-after {
+	height: 100%;
+	width: 100%;
+	background: #DDD;
+	border: 1px solid #CCC;
+	text-align: right;
+	display : block;
+	position: absolute;
+	z-index: -1;
+}
+
+
+/******************************************************************************/
+/******************************************************************************/
+
+/**
+ * Controls
+ */
+
+.wrap-left {
+	float: left;
+	overflow: hidden;
+}
+
+.wrap-right {
+	float: right;
+	overflow: hidden;
+}
+
+.wrap-left &gt; * {
+	float: left;
+}
+
+.wrap-right &gt; * {
+	float: right;
+}
+
+@media (min-width: 960px) {
+
+	.wrap-left {
+		width: 45%;
+	}
+
+	.wrap-right {
+		width: 55%;
+	}
+}
+
+
+@media (max-width: 959px) {
+
+	.wrap-left {
+		width: 30%;
+	}
+
+	.wrap-right {
+		width: 70%;
+	}
+}
+
+
+#controls {
+	color: #444;
+	margin: 10px 0 0 0;
+}
+
+
+#controls .category {
+	width: 500px;
+	margin: 0 auto 20px;
+	padding: 0;
+
+}
+
+#controls .category .title {
+	width: 100%;
+	height: 1.5em;
+	line-height: 1.5em;
+	color: #AAA;
+	text-align: right;
+}
+
+#controls .category &gt; .group {
+	border: 1px solid #CCC;
+	border-radius: 3px;
+}
+
+
+/**
+ * 	Color Picker
+ */
+
+@media (min-width: 960px) {
+	#controls .colorpicker {
+		width: 420px;
+	}
+}
+
+@media (max-width: 959px) {
+	#controls .colorpicker {
+		width: 210px;
+	}
+}
+
+#colorpicker {
+	width: 100%;
+	margin: 0 auto;
+}
+
+#colorpicker .gradient {
+	width: 200px;
+	height: 200px;
+	margin: 5px;
+	background: url("https://mdn.mozillademos.org/files/5707/picker_mask_200.png");
+	background: -moz-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
+				-moz-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
+	background: -webkit-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
+				-webkit-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
+	background-color: #F00;
+	float: left;
+}
+
+#colorpicker .hue {
+	width: 200px;
+	height: 30px;
+	margin: 5px;
+	background: url("https://mdn.mozillademos.org/files/5701/hue.png");
+	background: -moz-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
+				#00F 66.66%, #F0F 83.33%, #F00 100%);
+	background: -webkit-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
+				#00F 66.66%, #F0F 83.33%, #F00 100%);
+	float: left;
+}
+
+#colorpicker .alpha {
+	width: 200px;
+	height: 30px;
+	margin: 5px;
+	border: 1px solid #CCC;
+	float: left;
+	background: url("https://mdn.mozillademos.org/files/5705/alpha.png");
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+#colorpicker #alpha {
+	width: 100%;
+	height: 100%;
+	background: url("https://mdn.mozillademos.org/files/5703/alpha_mask.png");
+	background: -moz-linear-gradient(left, rgba(255, 0, 0, 0) 0%, rgba(255, 0, 0, 1) 100%);
+}
+
+#colorpicker #gradient_picker {
+	width: 0.5em;
+	height: 0.5em;
+	border-radius: 0.4em;
+	border: 2px solid #CCC;
+	position: relative;
+	top: 20%;
+	left: 20%;
+}
+
+#colorpicker #hue_selector,
+#colorpicker #alpha_selector {
+	width: 3px;
+	height: 100%;
+	border: 1px solid #777;
+	background-color: #FFF;
+	position: relative;
+	top: -1px;
+	left: 0%;
+}
+
+/* input HSV and RGB */
+#colorpicker .info {
+	width: 200px;
+	margin: 5px;
+	float: left;
+}
+
+#colorpicker .info * {
+	float: left;
+}
+
+#colorpicker .info input {
+	margin: 0;
+	text-align: center;
+	width: 30px;
+	-moz-user-select: text;
+	-webkit-user-select: text;
+	-ms-user-select: text;
+}
+
+#colorpicker .info span {
+	height: 20px;
+	width: 30px;
+	text-align: center;
+	line-height: 20px;
+	display: block;
+}
+
+/* Preview color */
+#colorpicker .block {
+	width: 95px;
+	height: 54px;
+	float: left;
+	position: relative;
+}
+
+#colorpicker .preview {
+	margin: 5px;
+	border: 1px solid #CCC;
+	background-image: url("https://mdn.mozillademos.org/files/5705/alpha.png");
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+#colorpicker .preview:before {
+	height: 100%;
+	width: 50%;
+	left: 50%;
+	content: "";
+	background: #FFF;
+	position: absolute;
+	z-index: 1;
+}
+
+#colorpicker .preview &gt; * {
+	width: 50%;
+	height: 100%;
+}
+
+#colorpicker #output_color {
+	width: 100%;
+	height: 100%;
+	position: absolute;
+	z-index: 2;
+}
+
+#colorpicker .block .input {
+	float: right;
+}
+
+#colorpicker [data-topic="a"] &gt; span {
+	width: 50px;
+}
+
+#colorpicker [data-topic="hexa"] {
+	float: right;
+	margin: 10px 0 0 0;
+}
+
+#colorpicker [data-topic="hexa"] &gt; span {
+	display: none;
+}
+
+#colorpicker [data-topic="hexa"] &gt; input {
+	width: 85px;
+	padding: 2px 0;
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+
+/*
+ * UI Components
+ */
+
+/* Property */
+
+.property {
+	height: 20px;
+	margin: 10px 0;
+}
+
+.property * {
+	float: left;
+	height: 100%;
+	line-height: 100%;
+}
+
+/* Slider */
+
+#controls .ui-slider-name {
+	margin: 0 10px 0 0;
+}
+
+/*
+ * Output code styling
+ */
+
+#output {
+	position: relative;
+}
+
+#output .menu {
+	max-width: 70%;
+	height: 20px;
+	position: absolute;
+	top: 2px;
+}
+
+#output .button {
+	width: 90px;
+	height: 22px;
+	margin: 0 5px 0 0;
+	text-align: center;
+	line-height: 20px;
+	font-size: 14px;
+	color: #FFF;
+	background-color: #999;
+	border-top-left-radius: 3px;
+	border-top-right-radius: 3px;
+	bottom: -5px;
+	float:left;
+}
+
+#output .button:hover {
+	color: #FFF;
+	background-color: #666;
+	cursor: pointer;
+}
+
+#output .menu [data-active="true"] {
+	color: #777;
+	background-color: #FFF;
+	border: 1px solid #CCC;
+	border-bottom: none;
+}
+
+#output .menu [data-topic="before"] {
+	left: 100px;
+}
+
+#output .menu [data-topic="after"] {
+	left: 200px;
+}
+
+#output .output {
+	width: 480px;
+	margin: 10px;
+	padding: 10px;
+	overflow: hidden;
+	color: #555;
+	font-size: 14px;
+	border: 1px dashed #CCC;
+	border-radius: 3px;
+	display: none;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+
+	-moz-user-select: text;
+	-webkit-user-select: text;
+	-ms-user-select: text;
+}
+
+#output .css-property {
+	width: 100%;
+	float: left;
+	white-space: pre;
+}
+
+#output .name {
+	width: 35%;
+	float: left;
+}
+
+#output .value {
+	width: 65%;
+	float: left;
+}
+
+</pre>
+
+<h3 id="JavaScript_Content">JavaScript Content</h3>
+
+<pre class="brush: js">
+
+'use strict';
+
+/**
+ * UI-SlidersManager
+ */
+
+var SliderManager = (function SliderManager() {
+
+	var subscribers = {};
+	var sliders = [];
+
+	var Slider = 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 snap = node.getAttribute('data-snap');
+		var topic = node.getAttribute('data-topic');
+
+		this.min = min;
+		this.max = max &gt; 0 ? max : 100;
+		this.step = step === 0 ? 1 : step;
+		this.value = value &lt;= max &amp;&amp; value &gt;= min ? value : (min + max) / 2 | 0;
+		this.snap = snap === "true" ? true : false;
+		this.topic = topic;
+		this.node = node;
+
+		var pointer = document.createElement('div');
+		pointer.className = 'ui-slider-pointer';
+		node.appendChild(pointer);
+		this.pointer = pointer;
+
+		setMouseTracking(node, updateSlider.bind(this));
+
+		sliders[topic] = this;
+		setValue(topic, this.value);
+	}
+
+	var setButtonComponent = function setButtonComponent(node) {
+		var type = node.getAttribute('data-type');
+		var topic = node.getAttribute('data-topic');
+		if (type === "sub") {
+			node.textContent = '-';
+			node.addEventListener("click", function() {
+				decrement(topic);
+			});
+		}
+		if (type === "add") {
+			node.textContent = '+';
+			node.addEventListener("click", function() {
+				increment(topic);
+			});
+		}
+	}
+
+	var setInputComponent = function setInputComponent(node) {
+		var topic		= node.getAttribute('data-topic');
+		var unit_type	= node.getAttribute('data-unit');
+
+		var input = document.createElement('input');
+		var unit = document.createElement('span');
+		unit.textContent = unit_type;
+
+		input.setAttribute('type', 'text');
+		node.appendChild(input);
+		node.appendChild(unit);
+
+		input.addEventListener('click', function(e) {
+			this.select();
+		});
+
+		input.addEventListener('change', function(e) {
+			setValue(topic, e.target.value | 0);
+		});
+
+		subscribe(topic, function(value) {
+			node.children[0].value = value;
+		});
+	}
+
+	var increment = function increment(topic) {
+		var slider = sliders[topic];
+		if (slider === null || slider === undefined)
+			return;
+
+		if (slider.value + slider.step &lt;= slider.max) {
+			slider.value += slider.step;
+			setValue(slider.topic, slider.value)
+			notify.call(slider);
+		}
+	};
+
+	var decrement = function decrement(topic) {
+		var slider = sliders[topic];
+		if (slider === null || slider === undefined)
+			return;
+
+		if (slider.value - slider.step &gt;= slider.min) {
+			slider.value -= slider.step;
+			setValue(topic, slider.value)
+			notify.call(slider);
+		}
+	}
+
+	// this = Slider object
+	var updateSlider = function updateSlider(e) {
+		var node = this.node;
+		var pos = e.pageX - node.offsetLeft;
+		var width = node.clientWidth;
+		var delta = this.max - this.min;
+		var offset = this.pointer.clientWidth + 4; // border width * 2
+
+		if (pos &lt; 0) pos = 0;
+		if (pos &gt; width) pos = width;
+
+		var value = pos * delta / width | 0;
+		var precision = value % this.step;
+		value = value - precision + this.min;
+		if (precision &gt; this.step / 2)
+			value = value + this.step;
+
+		if (this.snap)
+			pos =  (value - this.min) * width / delta;
+
+		this.pointer.style.left = pos - offset/2 + "px";
+		this.value = value;
+		node.setAttribute('data-value', value);
+		notify.call(this);
+	}
+
+	var setValue = function setValue(topic, value) {
+		var slider = sliders[topic];
+
+		if (value &gt; slider.max || value &lt; slider.min)
+			return;
+
+		var delta = slider.max - slider.min;
+		var width = slider.node.clientWidth;
+		var offset = slider.pointer.clientWidth;
+		var pos =  (value - slider.min) * width / delta;
+		slider.value = value;
+		slider.pointer.style.left = pos - offset / 2 + "px";
+		slider.node.setAttribute('data-value', value);
+		notify.call(slider);
+	}
+
+	var setMouseTracking = function setMouseTracking(elem, callback) {
+		elem.addEventListener("mousedown", function(e) {
+			callback(e);
+			document.addEventListener("mousemove", callback);
+		});
+
+		document.addEventListener("mouseup", function(e) {
+			document.removeEventListener("mousemove", callback);
+		});
+	}
+
+	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() {
+		if (subscribers[this.topic] === undefined)
+			return;
+
+		for (var i in subscribers[this.topic]) {
+			subscribers[this.topic][i](this.value);
+		}
+	}
+
+	var init = function init() {
+		var elem, size;
+
+		elem = document.querySelectorAll('.ui-slider-btn-set');
+		size = elem.length;
+		for (var i = 0; i &lt; size; i++)
+			setButtonComponent(elem[i]);
+
+		elem = document.querySelectorAll('.ui-slider-input');
+		size = elem.length;
+		for (var i = 0; i &lt; size; i++)
+			setInputComponent(elem[i]);
+
+		elem = document.querySelectorAll('.ui-slider');
+		size = elem.length;
+		for (var i = 0; i &lt; size; i++)
+			new Slider(elem[i]);
+	}
+
+	return {
+		init : init,
+		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;
+			notify.call(buttons[topic]);
+		}
+		catch(error) {
+			console.log(error, topic, value);
+		}
+	}
+
+	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() {
+		if (subscribers[this.topic] === undefined)
+			return;
+		for (var i = 0; i &lt; 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 &lt; size; i++)
+			new CheckBox(elem[i]);
+	}
+
+	return {
+		init : init,
+		setValue : setValue,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe
+	}
+
+})();
+
+
+window.addEventListener("load", function(){
+	BoxShadow.init();
+});
+
+var BoxShadow = (function BoxShadow() {
+
+	function getElemById(id) {
+		return document.getElementById(id);
+	}
+
+	/**
+	 * RGBA Color class
+	 */
+
+	function Color() {
+		this.r = 0;
+		this.g = 0;
+		this.b = 0;
+		this.a = 1;
+		this.hue = 0;
+		this.saturation = 0;
+		this.value = 0;
+	}
+
+	Color.prototype.copy = function copy(obj) {
+		if(obj instanceof Color !== true) {
+			console.log("Typeof instance not Color");
+			return;
+		}
+
+		this.r = obj.r;
+		this.g = obj.g;
+		this.b = obj.b;
+		this.a = obj.a;
+		this.hue = obj.hue;
+		this.saturation = obj.saturation;
+		this.value = obj.value;
+	}
+
+	Color.prototype.setRGBA = function setRGBA(red, green, blue, alpha) {
+		if (red != undefined)
+			this.r = red | 0;
+		if (green != undefined)
+			this.g = green | 0;
+		if (blue != undefined)
+			this.b = blue | 0;
+		if (alpha != undefined)
+			this.a = alpha | 0;
+	}
+
+	/**
+	 * HSV/HSB (hue, saturation, value / brightness)
+	 * @param hue			0-360
+	 * @param saturation	0-100
+	 * @param value 		0-100
+	 */
+	Color.prototype.setHSV = function setHSV(hue, saturation, value) {
+		this.hue = hue;
+		this.saturation = saturation;
+		this.value = value;
+		this.updateRGB();
+	}
+
+	Color.prototype.updateRGB = function updateRGB() {
+		var sat = this.saturation / 100;
+		var value = this.value / 100;
+		var C = sat * value;
+		var H = this.hue / 60;
+		var X = C * (1 - Math.abs(H % 2 - 1));
+		var m = value - C;
+		var precision = 255;
+
+		C = (C + m) * precision;
+		X = (X + m) * precision;
+		m = m * precision;
+
+		if (H &gt;= 0 &amp;&amp; H &lt; 1) {	this.setRGBA(C, X, m);	return; }
+		if (H &gt;= 1 &amp;&amp; H &lt; 2) {	this.setRGBA(X, C, m);	return; }
+		if (H &gt;= 2 &amp;&amp; H &lt; 3) {	this.setRGBA(m, C, X);	return; }
+		if (H &gt;= 3 &amp;&amp; H &lt; 4) {	this.setRGBA(m, X, C);	return; }
+		if (H &gt;= 4 &amp;&amp; H &lt; 5) {	this.setRGBA(X, m, C);	return; }
+		if (H &gt;= 5 &amp;&amp; H &lt; 6) {	this.setRGBA(C, m, X);	return; }
+	}
+
+	Color.prototype.updateHSV = function updateHSV() {
+		var red		= this.r / 255;
+		var green	= this.g / 255;
+		var blue	= this.b / 255;
+
+		var cmax = Math.max(red, green, blue);
+		var cmin = Math.min(red, green, blue);
+		var delta = cmax - cmin;
+		var hue = 0;
+		var saturation = 0;
+
+		if (delta) {
+			if (cmax === red ) { hue = ((green - blue) / delta); }
+			if (cmax === green ) { hue = 2 + (blue - red) / delta; }
+			if (cmax === blue ) { hue = 4 + (red - green) / delta; }
+			if (cmax) saturation = delta / cmax;
+		}
+
+		this.hue = 60 * hue | 0;
+		if (this.hue &lt; 0) this.hue += 360;
+		this.saturation = (saturation * 100) | 0;
+		this.value = (cmax * 100) | 0;
+	}
+
+	Color.prototype.setHexa = function setHexa(value) {
+		var valid  = /(^#{0,1}[0-9A-F]{6}$)|(^#{0,1}[0-9A-F]{3}$)/i.test(value)
+		if (valid !== true)
+			return;
+
+		if (value[0] === '#')
+			value = value.slice(1, value.length);
+
+		if (value.length === 3)
+			value = value.replace(/([0-9A-F])([0-9A-F])([0-9A-F])/i,"$1$1$2$2$3$3");
+
+		this.r = parseInt(value.substr(0, 2), 16);
+		this.g = parseInt(value.substr(2, 2), 16);
+		this.b = parseInt(value.substr(4, 2), 16);
+
+		this.alpha	= 1;
+	}
+
+	Color.prototype.getHexa = function getHexa() {
+		var r = this.r.toString(16);
+		var g = this.g.toString(16);
+		var b = this.b.toString(16);
+		if (this.r &lt; 16) r = '0' + r;
+		if (this.g &lt; 16) g = '0' + g;
+		if (this.b &lt; 16) b = '0' + b;
+		var value = '#' + r + g + b;
+		return value.toUpperCase();
+	}
+
+	Color.prototype.getRGBA = function getRGBA() {
+
+		var rgb = "(" + this.r + ", " + this.g + ", " + this.b;
+		var a = '';
+		var v = '';
+		if (this.a !== 1) {
+			a = 'a';
+			v = ', ' + this.a;
+		}
+
+		var value = "rgb" + a + rgb + v + ")";
+		return value;
+	}
+
+	Color.prototype.getColor = function getColor() {
+		if (this.a | 0 === 1)
+			return this.getHexa();
+		return this.getRGBA();
+	}
+
+	/**
+	 * Shadow Object
+	 */
+	function Shadow() {
+		this.inset  = false;
+		this.posX   = 5;
+		this.posY   = -5;
+		this.blur   = 5;
+		this.spread = 0;
+		this.color  = new Color();
+
+		var hue			= (Math.random() * 360) | 0;
+		var saturation	= (Math.random() * 75) | 0;
+		var value 		= (Math.random() * 50 + 50) | 0;
+		this.color.setHSV(hue, saturation, value, 1);
+	}
+
+	Shadow.prototype.computeCSS = function computeCSS() {
+		var value = "";
+		if (this.inset === true)
+			value += "inset ";
+		value += this.posX + "px ";
+		value += this.posY + "px ";
+		value += this.blur + "px ";
+		value += this.spread + "px ";
+		value += this.color.getColor();
+
+		return value;
+	}
+
+	Shadow.prototype.toggleInset = function toggleInset(value) {
+		if (value !== undefined || typeof value === "boolean")
+			this.inset = value;
+		else
+			this.inset = this.inset === true ? false : true;
+	}
+
+	Shadow.prototype.copy = function copy(obj) {
+		if(obj instanceof Shadow !== true) {
+			console.log("Typeof instance not Shadow");
+			return;
+		}
+
+		this.inset  = obj.inset;
+		this.posX   = obj.posX;
+		this.posY   = obj.posY;
+		this.blur   = obj.blur;
+		this.spread = obj.spread;
+		this.color.copy(obj.color);
+	}
+
+	/**
+	 * Color Picker
+	 */
+	var ColoPicker = (function ColoPicker() {
+
+		var colorpicker;
+		var hue_area;
+		var gradient_area;
+		var alpha_area;
+		var gradient_picker;
+		var hue_selector;
+		var alpha_selector;
+		var pick_object;
+		var info_rgb;
+		var info_hsv;
+		var info_hexa;
+		var output_color;
+		var color = new Color();
+		var subscribers = [];
+
+		var updateColor = function updateColor(e) {
+			var x = e.pageX - gradient_area.offsetLeft;
+			var y = e.pageY - gradient_area.offsetTop;
+
+			// width and height should be the same
+			var size = gradient_area.clientWidth;
+
+			if (x &gt; size)
+				x = size;
+			if (y &gt; size)
+				y = size;
+
+			if (x &lt; 0) x = 0;
+			if (y &lt; 0) y = 0;
+
+			var value = 100 - (y * 100 / size) | 0;
+			var saturation = x * 100 / size | 0;
+
+			color.setHSV(color.hue, saturation, value);
+			// should update just
+			// color pointer location
+			updateUI();
+			notify("color", color);
+		}
+
+		var updateHue = function updateHue(e) {
+			var x = e.pageX - hue_area.offsetLeft;
+			var width = hue_area.clientWidth;
+
+			if (x &lt; 0) x = 0;
+			if (x &gt; width) x = width;
+
+			var hue = ((360 * x) / width) | 0;
+			if (hue === 360) hue = 359;
+
+			color.setHSV(hue, color.saturation, color.value);
+
+			// should update just
+			// hue pointer location
+			// picker area background
+			// alpha area background
+			updateUI();
+			notify("color", color);
+		}
+
+		var updateAlpha = function updateAlpha(e) {
+			var x = e.pageX - alpha_area.offsetLeft;
+			var width = alpha_area.clientWidth;
+
+			if (x &lt; 0) x = 0;
+			if (x &gt; width) x = width;
+
+			color.a = (x / width).toFixed(2);
+
+			// should update just
+			// alpha pointer location
+			updateUI();
+			notify("color", color);
+		}
+
+		var setHueGfx = function setHueGfx(hue) {
+			var sat = color.saturation;
+			var val = color.value;
+			var alpha = color.a;
+
+			color.setHSV(hue, 100, 100);
+			gradient_area.style.backgroundColor = color.getHexa();
+
+			color.a = 0;
+			var start = color.getRGBA();
+			color.a = 1;
+			var end = color.getRGBA();
+			color.a = alpha;
+
+			var gradient = '-moz-linear-gradient(left, ' +	start + '0%, ' + end + ' 100%)';
+			alpha_area.style.background = gradient;
+		}
+
+		var updateUI = function updateUI() {
+			var x, y;		// coordinates
+			var size;		// size of the area
+			var offset;		// pointer graphic selector offset
+
+			// Set color pointer location
+			size = gradient_area.clientWidth;
+			offset = gradient_picker.clientWidth / 2 + 2;
+
+			x = (color.saturation * size / 100) | 0;
+			y = size - (color.value * size / 100) | 0;
+
+			gradient_picker.style.left = x - offset + "px";
+			gradient_picker.style.top = y - offset + "px";
+
+			// Set hue pointer location
+			size = hue_area.clientWidth;
+			offset = hue_selector.clientWidth/2;
+			x = (color.hue * size / 360 ) | 0;
+			hue_selector.style.left = x - offset + "px";
+
+			// Set alpha pointer location
+			size = alpha_area.clientWidth;
+			offset = alpha_selector.clientWidth/2;
+			x = (color.a * size) | 0;
+			alpha_selector.style.left = x - offset + "px";
+
+			// Set picker area background
+			var nc = new Color();
+			nc.copy(color);
+			if (nc.hue === 360) nc.hue = 0;
+			nc.setHSV(nc.hue, 100, 100);
+			gradient_area.style.backgroundColor = nc.getHexa();
+
+			// Set alpha area background
+			nc.copy(color);
+			nc.a = 0;
+			var start = nc.getRGBA();
+			nc.a = 1;
+			var end = nc.getRGBA();
+			var gradient = '-moz-linear-gradient(left, ' +	start + '0%, ' + end + ' 100%)';
+			alpha_area.style.background = gradient;
+
+			// Update color info
+			notify("color", color);
+			notify("hue", color.hue);
+			notify("saturation", color.saturation);
+			notify("value", color.value);
+			notify("r", color.r);
+			notify("g", color.g);
+			notify("b", color.b);
+			notify("a", color.a);
+			notify("hexa", color.getHexa());
+			output_color.style.backgroundColor = color.getRGBA();
+		}
+
+		var setInputComponent = function setInputComponent(node) {
+			var topic = node.getAttribute('data-topic');
+			var title = node.getAttribute('data-title');
+			var action = node.getAttribute('data-action');
+			title = title === null ? '' : title;
+
+			var input = document.createElement('input');
+			var info = document.createElement('span');
+			info.textContent = title;
+
+			input.setAttribute('type', 'text');
+			input.setAttribute('data-action', 'set-' + action + '-' + topic);
+			node.appendChild(info);
+			node.appendChild(input);
+
+			input.addEventListener('click', function(e) {
+				this.select();
+			});
+
+			input.addEventListener('change', function(e) {
+				if (action === 'HSV')
+					inputChangeHSV(topic);
+				if (action === 'RGB')
+					inputChangeRGB(topic);
+				if (action === 'alpha')
+					inputChangeAlpha(topic);
+				if (action === 'hexa')
+					inputChangeHexa(topic);
+			});
+
+			subscribe(topic, function(value) {
+				node.children[1].value = value;
+			});
+		}
+
+		var inputChangeHSV = function actionHSV(topic) {
+			var selector = "[data-action='set-HSV-" + topic + "']";
+			var node = document.querySelector("#colorpicker " + selector);
+			var value = parseInt(node.value);
+
+			if (typeof value === 'number' &amp;&amp; isNaN(value) === false &amp;&amp;
+				value &gt;= 0 &amp;&amp; value &lt; 360)
+				color[topic] = value;
+
+			color.updateRGB();
+			updateUI();
+		}
+
+		var inputChangeRGB = function inputChangeRGB(topic) {
+			var selector = "[data-action='set-RGB-" + topic + "']";
+			var node = document.querySelector("#colorpicker " + selector);
+			var value = parseInt(node.value);
+
+			if (typeof value === 'number' &amp;&amp; isNaN(value) === false &amp;&amp;
+				value &gt;= 0 &amp;&amp; value &lt;= 255)
+				color[topic] = value;
+
+			color.updateHSV();
+			updateUI();
+		}
+
+		var inputChangeAlpha = function inputChangeAlpha(topic) {
+			var selector = "[data-action='set-alpha-" + topic + "']";
+			var node = document.querySelector("#colorpicker " + selector);
+			var value = parseFloat(node.value);
+
+			if (typeof value === 'number' &amp;&amp; isNaN(value) === false &amp;&amp;
+				value &gt;= 0 &amp;&amp; value &lt;= 1)
+				color.a = value.toFixed(2);
+
+			updateUI();
+		}
+
+		var inputChangeHexa = function inputChangeHexa(topic) {
+			var selector = "[data-action='set-hexa-" + topic + "']";
+			var node = document.querySelector("#colorpicker " + selector);
+			var value = node.value;
+			color.setHexa(value);
+			color.updateHSV();
+			updateUI();
+		}
+
+		var setMouseTracking = function setMouseTracking(elem, callback) {
+
+			elem.addEventListener("mousedown", function(e) {
+				callback(e);
+				document.addEventListener("mousemove", callback);
+			});
+
+			document.addEventListener("mouseup", function(e) {
+				document.removeEventListener("mousemove", callback);
+			});
+		}
+
+		/*
+		 * Observer
+		 */
+		var setColor = function setColor(obj) {
+			if(obj instanceof Color !== true) {
+				console.log("Typeof instance not Color");
+				return;
+			}
+			color.copy(obj);
+			updateUI();
+		}
+
+		var subscribe = function subscribe(topic, callback) {
+			if (subscribers[topic] === undefined)
+				subscribers[topic] = [];
+
+			subscribers[topic].push(callback);
+		}
+
+		var unsubscribe = function unsubscribe(callback) {
+			subscribers.indexOf(callback);
+			subscribers.splice(index, 1);
+		}
+
+		var notify = function notify(topic, value) {
+			for (var i in subscribers[topic])
+				subscribers[topic][i](value);
+		}
+
+		var init = function init() {
+			colorpicker		= getElemById("colorpicker");
+			hue_area		= getElemById("hue");
+			gradient_area	= getElemById("gradient");
+			alpha_area		= getElemById("alpha");
+			gradient_picker	= getElemById("gradient_picker");
+			hue_selector	= getElemById("hue_selector");
+			alpha_selector	= getElemById("alpha_selector");
+			output_color	= getElemById("output_color");
+
+			var elem = document.querySelectorAll('#colorpicker .input');
+			var size = elem.length;
+			for (var i = 0; i &lt; size; i++)
+				setInputComponent(elem[i]);
+
+			setMouseTracking(gradient_area, updateColor);
+			setMouseTracking(hue_area, updateHue);
+			setMouseTracking(alpha_area, updateAlpha);
+
+		}
+
+		return {
+			init : init,
+			setColor : setColor,
+			subscribe : subscribe,
+			unsubscribe : unsubscribe
+		}
+
+	})();
+
+	/**
+	 * 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
+		}
+
+	})();
+
+	/*
+	 * Element Class
+	 */
+	var CssClass = function CssClass(id) {
+		this.left = 0;
+		this.top = 0;
+		this.rotate = 0;
+		this.width = 300;
+		this.height = 100;
+		this.display = true;
+		this.border = true;
+		this.zIndex = -1;
+		this.bgcolor = new Color();
+		this.id = id;
+		this.node = getElemById('obj-' + id);
+		this.object = getElemById(id);
+		this.shadowID = null;
+		this.shadows = []
+		this.render = [];
+		this.init();
+	}
+
+	CssClass.prototype.init = function init() {
+		this.left = ((this.node.parentNode.clientWidth - this.node.clientWidth) / 2) | 0;
+		this.top = ((this.node.parentNode.clientHeight - this.node.clientHeight) / 2) | 0;
+
+		this.setTop(this.top);
+		this.setLeft(this.left);
+		this.setHeight(this.height);
+		this.setWidth(this.width);
+		this.bgcolor.setHSV(0, 0, 100);
+		this.updateBgColor(this.bgcolor);
+	}
+
+	CssClass.prototype.updatePos = function updatePos(deltaX, deltaY) {
+		this.left += deltaX;
+		this.top += deltaY;
+		this.node.style.top = this.top + "px";
+		this.node.style.left = this.left + "px";
+		SliderManager.setValue("left", this.left);
+		SliderManager.setValue("top", this.top);
+	}
+
+	CssClass.prototype.setLeft = function setLeft(value) {
+		this.left = value;
+		this.node.style.left = this.left + "px";
+		OutputManager.updateProperty(this.id, 'left', this.left + 'px');
+	}
+
+	CssClass.prototype.setTop = function setTop(value) {
+		this.top = value;
+		this.node.style.top = this.top + 'px';
+		OutputManager.updateProperty(this.id, 'top', this.top + 'px');
+	}
+
+	CssClass.prototype.setWidth = function setWidth(value) {
+		this.width = value;
+		this.node.style.width = this.width + 'px';
+		OutputManager.updateProperty(this.id, 'width', this.width + 'px');
+	}
+
+	CssClass.prototype.setHeight = function setHeight(value) {
+		this.height = value;
+		this.node.style.height = this.height + 'px';
+		OutputManager.updateProperty(this.id, 'height', this.height + 'px');
+	}
+
+	// Browser support
+	CssClass.prototype.setRotate = function setRotate(value) {
+		var cssvalue = 'rotate(' + value +'deg)';
+
+		this.node.style.transform = cssvalue;
+		this.node.style.webkitTransform = cssvalue;
+		this.node.style.msTransform = cssvalue;
+
+		if (value !== 0) {
+			if (this.rotate === 0) {
+				OutputManager.toggleProperty(this.id, 'transform', true);
+				OutputManager.toggleProperty(this.id, '-webkit-transform', true);
+				OutputManager.toggleProperty(this.id, '-ms-transform', true);
+			}
+		}
+		else {
+			OutputManager.toggleProperty(this.id, 'transform', false);
+			OutputManager.toggleProperty(this.id, '-webkit-transform', false);
+			OutputManager.toggleProperty(this.id, '-ms-transform', false);
+		}
+
+		OutputManager.updateProperty(this.id, 'transform', cssvalue);
+		OutputManager.updateProperty(this.id, '-webkit-transform', cssvalue);
+		OutputManager.updateProperty(this.id, '-ms-transform', cssvalue);
+		this.rotate = value;
+	}
+
+	CssClass.prototype.setzIndex = function setzIndex(value) {
+		this.node.style.zIndex = value;
+		OutputManager.updateProperty(this.id, 'z-index', value);
+		this.zIndex = value;
+	}
+
+	CssClass.prototype.toggleDisplay = function toggleDisplay(value) {
+		if (typeof value !== "boolean" || this.display === value)
+			return;
+
+		this.display = value;
+		var display = this.display === true ? "block" : "none";
+		this.node.style.display = display;
+		this.object.style.display = display;
+	}
+
+	CssClass.prototype.toggleBorder = function toggleBorder(value) {
+		if (typeof value !== "boolean" || this.border === value)
+			return;
+
+		this.border = value;
+		var border = this.border === true ? "1px solid #CCC" : "none";
+		this.node.style.border = border;
+	}
+
+	CssClass.prototype.updateBgColor = function updateBgColor(color) {
+		this.bgcolor.copy(color);
+		this.node.style.backgroundColor = color.getColor();
+		OutputManager.updateProperty(this.id, 'background-color', color.getColor());
+	}
+
+	CssClass.prototype.updateShadows = function updateShadows() {
+		if (this.render.length === 0)
+			OutputManager.toggleProperty(this.id, 'box-shadow', false);
+		if (this.render.length === 1)
+			OutputManager.toggleProperty(this.id, 'box-shadow', true);
+
+		this.node.style.boxShadow = this.render.join(", ");
+		OutputManager.updateProperty(this.id, 'box-shadow', this.render.join(", \n"));
+
+	}
+
+
+	/**
+	 * Tool Manager
+	 */
+	var Tool = (function Tool() {
+
+		var preview;
+		var classes = [];
+		var active = null;
+		var animate = false;
+
+		/*
+		 * Toll actions
+		 */
+		var addCssClass = function addCssClass(id) {
+			classes[id] = new CssClass(id);
+		}
+
+		var setActiveClass = function setActiveClass(id) {
+			active = classes[id];
+			active.shadowID = null;
+			ColoPicker.setColor(classes[id].bgcolor);
+			SliderManager.setValue("top", active.top);
+			SliderManager.setValue("left", active.left);
+			SliderManager.setValue("rotate", active.rotate);
+			SliderManager.setValue("z-index", active.zIndex);
+			SliderManager.setValue("width", active.width);
+			SliderManager.setValue("height", active.height);
+			ButtonManager.setValue("border-state", active.border);
+			active.updateShadows();
+		}
+
+		var disableClass = function disableClass(topic) {
+			classes[topic].toggleDisplay(false);
+			ButtonManager.setValue(topic, false);
+		}
+
+		var addShadow = function addShadow(position) {
+			if (animate === true)
+				return -1;
+
+			active.shadows.splice(position, 0, new Shadow());
+			active.render.splice(position, 0, null);
+		}
+
+		var swapShadow = function swapShadow(id1, id2) {
+			var x = active.shadows[id1];
+			active.shadows[id1] = active.shadows[id2];
+			active.shadows[id2] = x;
+			updateShadowCSS(id1);
+			updateShadowCSS(id2);
+		}
+
+		var deleteShadow = function deleteShadow(position) {
+			active.shadows.splice(position, 1);
+			active.render.splice(position, 1);
+			active.updateShadows();
+		}
+
+		var setActiveShadow = function setActiveShadow(id, glow) {
+			active.shadowID = id;
+			ColoPicker.setColor(active.shadows[id].color);
+			ButtonManager.setValue("inset", active.shadows[id].inset);
+			SliderManager.setValue("blur", active.shadows[id].blur);
+			SliderManager.setValue("spread", active.shadows[id].spread);
+			SliderManager.setValue("posX", active.shadows[id].posX);
+			SliderManager.setValue("posY", active.shadows[id].posY);
+			if (glow === true)
+				addGlowEffect(id);
+		}
+
+		var addGlowEffect = function addGlowEffect(id) {
+			if (animate === true)
+				return;
+
+			animate = true;
+			var store = new Shadow();
+			var shadow = active.shadows[id];
+
+			store.copy(shadow);
+			shadow.color.setRGBA(40, 125, 200, 1);
+			shadow.blur = 10;
+			shadow.spread = 10;
+
+			active.node.style.transition = "box-shadow 0.2s";
+			updateShadowCSS(id);
+
+			setTimeout(function() {
+				shadow.copy(store);
+				updateShadowCSS(id);
+				setTimeout(function() {
+					active.node.style.removeProperty("transition");
+					animate = false;
+				}, 100);
+			}, 200);
+		}
+
+		var updateActivePos = function updateActivePos(deltaX, deltaY) {
+			if (active.shadowID === null)
+				active.updatePos(deltaX, deltaY);
+			else
+				updateShadowPos(deltaX, deltaY);
+		}
+
+		/*
+		 * Shadow properties
+		 */
+		var updateShadowCSS = function updateShadowCSS(id) {
+			active.render[id] = active.shadows[id].computeCSS();
+			active.updateShadows();
+		}
+
+		var toggleShadowInset = function toggleShadowInset(value) {
+			if (active.shadowID === null)
+				return;
+			active.shadows[active.shadowID].toggleInset(value);
+			updateShadowCSS(active.shadowID);
+		}
+
+		var updateShadowPos = function updateShadowPos(deltaX, deltaY) {
+			var shadow = active.shadows[active.shadowID];
+			shadow.posX += deltaX;
+			shadow.posY += deltaY;
+			SliderManager.setValue("posX", shadow.posX);
+			SliderManager.setValue("posY", shadow.posY);
+			updateShadowCSS(active.shadowID);
+		}
+
+		var setShadowPosX = function setShadowPosX(value) {
+			if (active.shadowID === null)
+				return;
+			active.shadows[active.shadowID].posX = value;
+			updateShadowCSS(active.shadowID);
+		}
+
+		var setShadowPosY = function setShadowPosY(value) {
+			if (active.shadowID === null)
+				return;
+			active.shadows[active.shadowID].posY = value;
+			updateShadowCSS(active.shadowID);
+		}
+
+		var setShadowBlur = function setShadowBlur(value) {
+			if (active.shadowID === null)
+				return;
+			active.shadows[active.shadowID].blur = value;
+			updateShadowCSS(active.shadowID);
+		}
+
+		var setShadowSpread = function setShadowSpread(value) {
+			if (active.shadowID === null)
+				return;
+			active.shadows[active.shadowID].spread = value;
+			updateShadowCSS(active.shadowID);
+		}
+
+		var updateShadowColor = function updateShadowColor(color) {
+			active.shadows[active.shadowID].color.copy(color);
+			updateShadowCSS(active.shadowID);
+		}
+
+		/*
+		 * Element Properties
+		 */
+		var updateColor = function updateColor(color) {
+			if (active.shadowID === null)
+				active.updateBgColor(color);
+			else
+				updateShadowColor(color);
+		}
+
+		var init = function init() {
+			preview = getElemById("preview");
+
+			ColoPicker.subscribe("color", updateColor);
+			PreviewMouseTracking.subscribe(updateActivePos);
+
+			// Affects shadows
+			ButtonManager.subscribe("inset", toggleShadowInset);
+			SliderManager.subscribe("posX", setShadowPosX);
+			SliderManager.subscribe("posY", setShadowPosY);
+			SliderManager.subscribe("blur", setShadowBlur);
+			SliderManager.subscribe("spread", setShadowSpread);
+
+			// Affects element
+			SliderManager.subscribe("top", function(value){
+				active.setTop(value);
+			});
+			SliderManager.subscribe("left", function(value){
+				active.setLeft(value);
+			});
+			SliderManager.subscribe("rotate", function(value) {
+				if (active == classes["element"])
+					return;
+				active.setRotate(value);
+			});
+
+			SliderManager.subscribe("z-index", function(value) {
+				if (active == classes["element"])
+					return;
+				active.setzIndex(value);
+			});
+
+			SliderManager.subscribe("width", function(value) {
+				active.setWidth(value)
+			});
+
+			SliderManager.subscribe("height", function(value) {
+				active.setHeight(value)
+			});
+
+			// Actions
+			classes['before'].top = -30;
+			classes['before'].left = -30;
+			classes['after'].top = 30;
+			classes['after'].left = 30;
+			classes['before'].toggleDisplay(false);
+			classes['after'].toggleDisplay(false);
+			ButtonManager.setValue('before', false);
+			ButtonManager.setValue('after', false);
+
+			ButtonManager.subscribe("before", classes['before'].toggleDisplay.bind(classes['before']));
+			ButtonManager.subscribe("after", classes['after'].toggleDisplay.bind(classes['after']));
+
+			ButtonManager.subscribe("border-state", function(value) {
+				active.toggleBorder(value);
+			});
+
+		}
+
+		return {
+			init 			: init,
+			addShadow		: addShadow,
+			swapShadow		: swapShadow,
+			addCssClass		: addCssClass,
+			disableClass	: disableClass,
+			deleteShadow	: deleteShadow,
+			setActiveClass	: setActiveClass,
+			setActiveShadow : setActiveShadow
+		}
+
+	})();
+
+	/**
+	 * Layer Manager
+	 */
+	var LayerManager = (function LayerManager() {
+		var stacks = [];
+		var active = {
+			node : null,
+			stack : null
+		}
+		var elements = {};
+
+		var mouseEvents = function mouseEvents(e) {
+			var node = e.target;
+			var type = node.getAttribute('data-type');
+
+			if (type === 'subject')
+				setActiveStack(stacks[node.id]);
+
+			if (type === 'disable') {
+				Tool.disableClass(node.parentNode.id);
+				setActiveStack(stacks['element']);
+			}
+
+			if (type === 'add')
+				active.stack.addLayer();
+
+			if (type === 'layer')
+				active.stack.setActiveLayer(node);
+
+			if (type === 'delete')
+				active.stack.deleteLayer(node.parentNode);
+
+			if (type === 'move-up')
+				active.stack.moveLayer(1);
+
+			if (type === 'move-down')
+				active.stack.moveLayer(-1);
+		}
+
+		var setActiveStack = function setActiveStack(stackObj) {
+			active.stack.hide();
+			active.stack = stackObj;
+			active.stack.show();
+		}
+
+		/*
+		 * Stack object
+		 */
+		var Stack = function Stack(subject) {
+			var S = document.createElement('div');
+			var title = document.createElement('div');
+			var stack = document.createElement('div');
+
+			S.className = 'container';
+			stack.className = 'stack';
+			title.className = 'title';
+			title.textContent = subject.getAttribute('data-title');
+			S.appendChild(title);
+			S.appendChild(stack);
+
+			this.id = subject.id;
+			this.container = S;
+			this.stack = stack;
+			this.subject = subject;
+			this.order = [];
+			this.uid = 0;
+			this.count = 0;
+			this.layer = null;
+			this.layerID = 0;
+		}
+
+		Stack.prototype.addLayer = function addLayer() {
+			if (Tool.addShadow(this.layerID) == -1)
+				return;
+
+			var uid = this.getUID();
+			var layer = this.createLayer(uid);
+
+			if (this.layer === null &amp;&amp; this.stack.children.length &gt;= 1)
+				this.layer = this.stack.children[0];
+
+			this.stack.insertBefore(layer, this.layer);
+			this.order.splice(this.layerID, 0, uid);
+			this.count++;
+			this.setActiveLayer(layer);
+		}
+
+		Stack.prototype.createLayer = function createLayer(uid) {
+			var layer = document.createElement('div');
+			var del = document.createElement('span');
+
+			layer.className = 'node';
+			layer.setAttribute('data-shid', uid);
+			layer.setAttribute('data-type', 'layer');
+			layer.textContent = 'shadow ' + uid;
+
+			del.className = 'delete';
+			del.setAttribute('data-type', 'delete');
+
+			layer.appendChild(del);
+			return layer;
+		}
+
+		Stack.prototype.getUID = function getUID() {
+			return this.uid++;
+		}
+
+		// SOLVE IE BUG
+		Stack.prototype.moveLayer = function moveLayer(direction) {
+			if (this.count &lt;= 1 || this.layer === null)
+				return;
+			if (direction === -1 &amp;&amp; this.layerID === (this.count - 1) )
+				return;
+			if (direction === 1 &amp;&amp; this.layerID === 0 )
+				return;
+
+			if (direction === -1) {
+				var before = null;
+				Tool.swapShadow(this.layerID, this.layerID + 1);
+				this.swapOrder(this.layerID, this.layerID + 1);
+				this.layerID += 1;
+
+				if (this.layerID + 1 !== this.count)
+					before = this.stack.children[this.layerID + 1];
+
+				this.stack.insertBefore(this.layer, before);
+				Tool.setActiveShadow(this.layerID, false);
+			}
+
+			if (direction === 1) {
+				Tool.swapShadow(this.layerID, this.layerID - 1);
+				this.swapOrder(this.layerID, this.layerID - 1);
+				this.layerID -= 1;
+				this.stack.insertBefore(this.layer, this.stack.children[this.layerID]);
+				Tool.setActiveShadow(this.layerID, false);
+			}
+		}
+
+		Stack.prototype.swapOrder = function swapOrder(pos1, pos2) {
+			var x = this.order[pos1];
+			this.order[pos1] = this.order[pos2];
+			this.order[pos2] = x;
+		}
+
+		Stack.prototype.deleteLayer = function deleteLayer(node) {
+			var shadowID =  node.getAttribute('data-shid') | 0;
+			var index = this.order.indexOf(shadowID);
+			this.stack.removeChild(this.stack.children[index]);
+			this.order.splice(index, 1);
+			this.count--;
+
+			Tool.deleteShadow(index);
+
+			if (index &gt; this.layerID)
+				return;
+
+			if (index == this.layerID) {
+				if (this.count &gt;= 1) {
+					this.layerID = 0;
+					this.setActiveLayer(this.stack.children[0], true);
+				}
+				else {
+					this.layer = null;
+					this.show();
+				}
+			}
+
+			if (index &lt; this.layerID) {
+				this.layerID--;
+				Tool.setActiveShadow(this.layerID, true);
+			}
+
+		}
+
+		Stack.prototype.setActiveLayer = function setActiveLayer(node) {
+			elements.shadow_properties.style.display = 'block';
+			elements.element_properties.style.display = 'none';
+
+			if (this.layer)
+				this.layer.removeAttribute('data-active');
+
+			this.layer = node;
+			this.layer.setAttribute('data-active', 'layer');
+
+			var shadowID =  node.getAttribute('data-shid') | 0;
+			this.layerID = this.order.indexOf(shadowID);
+			Tool.setActiveShadow(this.layerID, true);
+		}
+
+		Stack.prototype.unsetActiveLayer = function unsetActiveLayer() {
+			if (this.layer)
+				this.layer.removeAttribute('data-active');
+
+			this.layer = null;
+			this.layerID = 0;
+		}
+
+		Stack.prototype.hide = function hide() {
+			this.unsetActiveLayer();
+			this.subject.removeAttribute('data-active');
+			var style = this.container.style;
+			style.left = '100%';
+			style.zIndex = '0';
+		}
+
+		Stack.prototype.show = function show() {
+			elements.shadow_properties.style.display = 'none';
+			elements.element_properties.style.display = 'block';
+
+			if (this.id === 'element') {
+				elements.zIndex.style.display = 'none';
+				elements.transform_rotate.style.display = 'none';
+			}
+			else {
+				elements.zIndex.style.display = 'block';
+				elements.transform_rotate.style.display = 'block';
+			}
+
+			this.subject.setAttribute('data-active', 'subject');
+			var style = this.container.style;
+			style.left = '0';
+			style.zIndex = '10';
+			Tool.setActiveClass(this.id);
+		}
+
+		function init() {
+
+			var elem, size;
+			var layerManager = getElemById("layer_manager");
+			var layerMenu = getElemById("layer_menu");
+			var container = getElemById("stack_container");
+
+			elements.shadow_properties = getElemById('shadow_properties');
+			elements.element_properties = getElemById('element_properties');
+			elements.transform_rotate = getElemById('transform_rotate');
+			elements.zIndex = getElemById('z-index');
+
+			elem = document.querySelectorAll('#layer_menu [data-type="subject"]');
+			size = elem.length;
+
+			for (var i = 0; i &lt; size; i++) {
+				var S = new Stack(elem[i]);
+				stacks[elem[i].id] = S;
+				container.appendChild(S.container);
+				Tool.addCssClass(elem[i].id);
+			}
+
+			active.stack = stacks['element'];
+			stacks['element'].show();
+
+			layerManager.addEventListener("click", mouseEvents);
+			layerMenu.addEventListener("click", mouseEvents);
+
+			ButtonManager.subscribe("before", function(value) {
+				if (value === false &amp;&amp; active.stack === stacks['before'])
+					setActiveStack(stacks['element'])
+				if (value === true &amp;&amp; active.stack !== stacks['before'])
+					setActiveStack(stacks['before'])
+			});
+
+			ButtonManager.subscribe("after", function(value) {
+				if (value === false &amp;&amp; active.stack === stacks['after'])
+					setActiveStack(stacks['element'])
+				if (value === true &amp;&amp; active.stack !== stacks['after'])
+					setActiveStack(stacks['after'])
+			});
+		}
+
+		return {
+			init : init
+		}
+	})();
+
+	/*
+	 * OutputManager
+	 */
+	var OutputManager = (function OutputManager() {
+		var classes = [];
+		var buttons = [];
+		var active = null;
+		var menu = null;
+		var button_offset = 0;
+
+		var crateOutputNode = function(topic, property) {
+
+			var prop = document.createElement('div');
+			var name = document.createElement('span');
+			var value = document.createElement('span');
+
+			var pmatch = property.match(/(^([a-z0-9\-]*)=\[([a-z0-9\-\"]*)\])|^([a-z0-9\-]*)/i);
+
+			name.textContent = '\t' + pmatch[4];
+
+			if (pmatch[3] !== undefined) {
+				name.textContent = '\t' + pmatch[2];
+				value.textContent = pmatch[3] + ';';
+			}
+
+			name.textContent += ': ';
+			prop.className = 'css-property';
+			name.className = 'name';
+			value.className = 'value';
+			prop.appendChild(name);
+			prop.appendChild(value);
+
+			classes[topic].node.appendChild(prop);
+			classes[topic].line[property] = prop;
+			classes[topic].prop[property] = value;
+		}
+
+		var OutputClass = function OutputClass(node) {
+			var topic = node.getAttribute('data-topic');
+			var prop = node.getAttribute('data-prop');
+			var name = node.getAttribute('data-name');
+			var properties = prop.split(' ');
+
+			classes[topic] = {};
+			classes[topic].node = node;
+			classes[topic].prop = [];
+			classes[topic].line = [];
+			classes[topic].button = new Button(topic);
+
+			var open_decl = document.createElement('div');
+			var end_decl = document.createElement('div');
+
+			open_decl.textContent = name + ' {';
+			end_decl.textContent = '}';
+			node.appendChild(open_decl);
+
+			for (var i in properties)
+				crateOutputNode(topic, properties[i]);
+
+			node.appendChild(end_decl);
+		}
+
+		var Button = function Button(topic) {
+			var button = document.createElement('div');
+
+			button.className = 'button';
+			button.textContent = topic;
+			button.style.left = button_offset + 'px';
+			button_offset += 100;
+
+			button.addEventListener("click", function() {
+				toggleDisplay(topic);
+			})
+
+			menu.appendChild(button);
+			return button;
+		}
+
+		var toggleDisplay = function toggleDisplay(topic) {
+			active.button.removeAttribute('data-active');
+			active.node.style.display = 'none';
+			active = classes[topic];
+			active.node.style.display = 'block';
+			active.button.setAttribute('data-active', 'true');
+		}
+
+		var toggleButton = function toggleButton(topic, value) {
+			var display = (value === true) ? 'block' : 'none';
+			classes[topic].button.style.display = display;
+
+			if (value === true)
+				toggleDisplay(topic);
+			else
+				toggleDisplay('element');
+		}
+
+		var updateProperty = function updateProperty(topic, property, data) {
+			try {
+				classes[topic].prop[property].textContent = data + ';';
+			}
+			catch(error) {
+				// console.log("ERROR undefined : ", topic, property, data);
+			}
+		}
+
+		var toggleProperty = function toggleProperty(topic, property, value) {
+			var display = (value === true) ? 'block' : 'none';
+			try {
+				classes[topic].line[property].style.display = display;
+			}
+			catch(error) {
+				// console.log("ERROR undefined : ",classes, topic, property, value);
+			}
+		}
+
+		var init = function init() {
+
+			menu = getElemById('menu');
+
+			var elem = document.querySelectorAll('#output .output');
+			var size = elem.length;
+			for (var i = 0; i &lt; size; i++)
+				OutputClass(elem[i]);
+
+			active = classes['element'];
+			toggleDisplay('element');
+
+			ButtonManager.subscribe("before", function(value) {
+				toggleButton('before', value);
+			});
+
+			ButtonManager.subscribe("after", function(value) {
+				toggleButton('after', value);
+			});
+		}
+
+		return {
+			init : init,
+			updateProperty : updateProperty,
+			toggleProperty : toggleProperty
+		}
+
+	})();
+
+
+	/**
+	 * Init Tool
+	 */
+	var init = function init() {
+		ButtonManager.init();
+		OutputManager.init();
+		ColoPicker.init();
+		SliderManager.init();
+		LayerManager.init();
+		PreviewMouseTracking.init("preview");
+		Tool.init();
+	}
+
+	return {
+		init : init
+	}
+
+})();
+
+
+</pre>
+</div>
+
+<div>{{ EmbedLiveSample('box-shadow_generator', '100%', '1100px', '') }}</div>
+
+<p><strong>Related Tool: </strong><a href="https://cssgenerator.org/box-shadow-css-generator.html">Box Shadow CSS Generator</a></p>
diff --git a/files/de/web/css/css_grid_layout/index.html b/files/de/web/css/css_grid_layout/index.html
index d5e810da8e..973301c065 100644
--- a/files/de/web/css/css_grid_layout/index.html
+++ b/files/de/web/css/css_grid_layout/index.html
@@ -193,7 +193,7 @@ translation_of: Web/CSS/CSS_Grid_Layout
  </tbody>
 </table>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li>
  <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li>
diff --git a/files/de/web/css/gap/index.html b/files/de/web/css/gap/index.html
index 8fbab40969..12d3fa49e2 100644
--- a/files/de/web/css/gap/index.html
+++ b/files/de/web/css/gap/index.html
@@ -122,7 +122,7 @@ grid-gap: unset;
  <li>Grid Layout Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout#Gutters">Basic concepts of grid layout - Gutters</a></em></li>
 </ul>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li>
  <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li>
diff --git a/files/de/web/css/grid-template-areas/index.html b/files/de/web/css/grid-template-areas/index.html
index fe40894d2b..c800b19390 100644
--- a/files/de/web/css/grid-template-areas/index.html
+++ b/files/de/web/css/grid-template-areas/index.html
@@ -135,7 +135,7 @@ grid-template-areas: unset;
  <li>Video Tutorial: <em><a href="http://gridbyexample.com/video/grid-template-areas/">Grid Template Areas</a></em></li>
 </ul>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li>
  <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li>
diff --git a/files/de/web/css/grid/index.html b/files/de/web/css/grid/index.html
index aee6a296fe..649b0f3ccb 100644
--- a/files/de/web/css/grid/index.html
+++ b/files/de/web/css/grid/index.html
@@ -127,7 +127,7 @@ grid: unset;
  <li>Verwandte CSS-Eigenschaften: {{cssxref("grid-template")}}, {{cssxref("grid-template-rows")}}, {{cssxref("grid-template-columns")}}, {{cssxref("grid-template-areas")}}, {{cssxref("grid-auto-columns")}}, {{cssxref("grid-auto-rows")}}, {{cssxref("grid-auto-flow")}}</li>
 </ul>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li>
  <li><strong><a href="/en-US/docs/Web/CSS/Reference">CSS-Referenz</a></strong></li>
diff --git a/files/de/web/css/tools/index.html b/files/de/web/css/tools/index.html
deleted file mode 100644
index f107c81ddb..0000000000
--- a/files/de/web/css/tools/index.html
+++ /dev/null
@@ -1,25 +0,0 @@
----
-title: Tools
-slug: Web/CSS/Tools
-tags:
-  - CSS
-translation_of: Web/CSS/Tools
----
-<p>CSS bietet eine Reihe mächtiger Features, die knifflig in der Anwendung sein können oder eine Reihe von Parametern haben, sodass es hilfreich ist, diese während an ihnen gearbeitet wird, zu visualisieren. Dieses Seite bietet Links zu verschiedenen nützlichen Werkzeugen, die helfen, das CSS unter Verwendung dieser Features zu erstellen, um den Inhalt zu stylen.</p>
-
-<p>{{LandingPageListSubpages}}</p>
-
-<h2 id="Weitere_Werkzeuge">Weitere Werkzeuge</h2>
-
-<ul>
- <li>
-  <h4 id="CSS_Animation_-_Stylie">CSS Animation - <a href="http://jeremyckahn.github.io/stylie/">Stylie</a></h4>
- </li>
- <li>Um die Gerätedarstellungsinformationen zu überprüfen (hilfreich in {{Glossary("Responsive Web Design")}}) - <a href="http://mydevice.io">mydevice.io</a></li>
-</ul>
-
-<h2 id="Siehe_auch">Siehe auch</h2>
-
-<ul>
- <li><a href="/de/docs/Web/CSS">CSS</a></li>
-</ul>
diff --git a/files/de/web/demos/index.html b/files/de/web/demos/index.html
new file mode 100644
index 0000000000..22d8922369
--- /dev/null
+++ b/files/de/web/demos/index.html
@@ -0,0 +1,155 @@
+---
+title: Demos für Open Web Technologie
+slug: Web/Demos
+tags:
+  - Apps
+  - Demos
+  - Example
+  - Translation
+translation_of: Web/Demos_of_open_web_technologies
+original_slug: Web/Demos_of_open_web_technologies
+---
+<p>Mozilla unterstützt eine Vielzahl an Open Web Technologien und ermutigt ihre Verwendung, deswegen auch die ganzen <strong>toten links</strong> hier auf dieser Seite. Diese Seite bietet Links zu spannenden Demonstrationen dieser Technologien, unter anderem beliebte Demos aus dem Demo Studio, <a href="https://blog.mozilla.org/community/2015/12/18/saying-goodbye-to-demo-studio/">welches kürzlich geschlossen wurde</a>. Wenn Sie eine gute Demonstration oder Anwendung von Open Web Technologie kennen, bitte fügen Sie einen Link in der passenden Sektion ein.</p>
+
+<p> </p>
+
+<h2 id="2D_Grafik">2D Grafik</h2>
+
+<h3 id="APNG" name="APNG">APNG</h3>
+
+<ul>
+ <li><a class="external" href="http://people.mozilla.com/~dolske/apng/demo.html">Justin's demo</a> (funktioniert wenn lokal gespeichert)</li>
+</ul>
+
+<h3 id="SVG" name="SVG">Canvas</h3>
+
+<ul>
+ <li><a class="external" href="http://www.blobsallad.se/">Ein interaktiver blob mit javascript und canvas (fun)</a></li>
+ <li><a class="external" href="http://blobsallad.se/article/">Blob's demos</a></li>
+ <li><a class="external" href="http://glimr.rubyforge.org/cake/canvas.html">Canvas Animation Kit Experiment (CAKE)</a></li>
+ <li><a class="external" href="http://www.xs4all.nl/~peterned/3d/">Canvas3D &amp; Flickr</a></li>
+ <li><a class="external" href="http://arapehlivanian.com/wp-content/uploads/2007/02/canvas.html">Playing with Canvas</a></li>
+ <li><a class="external" href="http://langexplr.blogspot.com/2008/11/using-canvas-html-element.html">Verwendung des  Canvas HTML5-Elements</a></li>
+ <li><a class="external" href="/samples/raycaster/RayCaster.html" title="https://developer.mozilla.org/editor/fckeditor/core/editor/samples/raycaster/RayCaster.html">RayCaster</a></li>
+ <li><a class="external" href="http://jsmsxdemo.googlepages.com/jsmsx.html">MSX Emulator</a></li>
+ <li><a class="external" href="http://processingjs.org/exhibition/">processing.js</a></li>
+ <li><a class="external" href="http://glimr.rubyforge.org/cake/missile_fleet.html">Missile fleet</a></li>
+ <li><a class="external" href="http://glimr.rubyforge.org/cake/demos/fireworks2.6rt.html">FireWorks</a></li>
+ <li><a class="external" href="http://glimr.rubyforge.org/cake/demos/canvas_ash.html">Canvas ash1</a></li>
+ <li><a class="external" href="http://glimr.rubyforge.org/cake/demos/canvas_ash2.html">Canvas ash2</a></li>
+ <li><a class="external" href="http://glimr.rubyforge.org/cake/demos/canvas_ash8.html">Canvas ash8</a></li>
+ <li><a class="external" href="http://gyu.que.jp/jscloth/">3D on 2D Canvas</a></li>
+ <li><a href="http://viliusle.github.io/miniPaint/">miniPaint - Image editor </a>(<a href="https://github.com/viliusle/miniPaint">source code</a>)</li>
+</ul>
+
+<h3 id="SVG" name="SVG">SVG</h3>
+
+<ul>
+ <li><a class="external" href="http://www.kde-look.org/CONTENT/content-files/19524-gearflowers.svg.gz">Gearflowers image</a> Nicht vergessen reinzuzoomen (funktioniert wenn lokal gespeichert)</li>
+ <li><a class="external" href="http://people.mozilla.com/~vladimir/demos/photos.svg">SVG photo demo</a> (Visuelle Effekte und Interaktion)</li>
+ <li><a class="external" href="http://starkravingfinkle.org/projects/demo/svg-bubblemenu-in-html.xml">Bubblemenu</a> (Visuelle Effekte und Interaktion)</li>
+ <li><a class="external" href="http://starkravingfinkle.org/blog/2007/07/firefox-3-svg-foreignobject/">HTML transformationen</a> using <code>foreignObject</code> (Visuelle Effekte and transforms)</li>
+ <li><a class="external" href="http://svg-whiz.com/svg/linguistics/theCreepyMouth.svg">Phonetics Guide</a> (Interaktiv)</li>
+ <li><a class="external" href="http://www.lutanho.net/svgvml3d/platonic.html">3D objects demo</a> (Interaktiv)</li>
+ <li><a class="external" href="http://www.themaninblue.com/experiment/Blobular/">Blobular</a> (Interaktiv)</li>
+ <li><a class="external" href="http://www.double.co.nz/video_test/video.svg">Video embedded in SVG</a> (oder benutze den <a class="external" href="http://www.double.co.nz/video_test/video_svg.tar.bz2">lokalen Download</a>)</li>
+ <li><a href="http://summerstyle.github.io/summer/">Summer HTML image map creator</a> (<a href="https://github.com/summerstyle/summer">source code</a>)</li>
+</ul>
+
+<h3 id="Video" name="Video">Video</h3>
+
+<ul>
+ <li><a class="external" href="http://www.double.co.nz/video_test/test1.html">Streaming Anime, Movie Trailer and Interview</a></li>
+ <li><a class="external" href="http://www.double.co.nz/video_test/test2.html">Billy's Browser Firefox Flick</a></li>
+ <li><a class="external" href="http://www.double.co.nz/video_test/test3.html">Virtual Barber Shop</a></li>
+ <li><a class="external" href="http://www.double.co.nz/video_test/test4.html">Transformers Movie Trailer</a></li>
+ <li><a class="external" href="http://www.double.co.nz/video_test/test5.html">A Scanner Darkly Movie Trailer</a> (mit eingebauter Steuerung)</li>
+ <li><a class="external" href="http://www.double.co.nz/video_test/events.html">Events firing and volume control</a></li>
+ <li><a class="external" href="http://www.double.co.nz/video_test/video.svg">Dragable and sizable videos</a></li>
+</ul>
+
+<h2 id="3D_Grafik">3D Grafik</h2>
+
+<h3 id="WebGL">WebGL</h3>
+
+<ul>
+ <li><a href="http://ondras.github.io/fireworks-webgl/">Web Audio Fireworks</a></li>
+ <li><a href="https://dl.dropboxusercontent.com/u/62064441/ioquake3.js/ioquake3.html">IoQuake3</a> (<a href="https://github.com/klaussilveira/ioquake3.js">source code</a>)</li>
+ <li><a href="http://micah.tech/demoscene/">Escher puzzle</a> (<a href="https://github.com/micahbolen/demoscene">source code</a>)</li>
+ <li><a href="http://collinhover.github.io/kaiopua/">Kai 'Opua</a> (<a href="https://github.com/collinhover/kaiopua">source code</a>)</li>
+</ul>
+
+<h3 id="Virtual_Reality">Virtual Reality</h3>
+
+<ul>
+ <li><a href="http://mozvr.github.io/polarsea/">The Polar Sea</a> (<a href="https://github.com/MozVR/polarsea">source code</a>)</li>
+ <li><a href="http://mozvr.github.io/sechelt/">Sechelt fly-through</a> (<a href="https://github.com/mozvr/sechelt">source code</a>)</li>
+</ul>
+
+<h2 id="CSS">CSS</h2>
+
+<ul>
+ <li><a href="http://felixniklas.com/paperfold/">Paperfold</a></li>
+ <li><a href="http://ondras.zarovi.cz/games/blockout/">CSS Blockout</a></li>
+ <li><a href="http://ondras.zarovi.cz/demos/rubik/">Rubik's cube</a></li>
+ <li><a href="http://ondras.zarovi.cz/demos/nojs/">Pure CSS Slides</a></li>
+ <li>Planetarium (<a href="https://github.com/littleworkshop/planetarium">source code</a>)</li>
+ <li><a href="http://www.lesmoffat.co.uk/folio/forest/forest.html">CSS Paralax Forest</a></li>
+ <li><a href="http://webdeveloperbareilly.in/blog/css3/awesome-login-form.html">Awesome Login Page</a></li>
+ <li><a href="http://webdeveloperbareilly.in/blog/css3/onepage-scroll-template.html">CSS3 One Page Scroll</a></li>
+</ul>
+
+<h3 id="Transformations">Transformations</h3>
+
+<ul>
+ <li><a href="http://impress.github.io/impress.js">Impress.js</a> (<a href="https://github.com/impress/impress.js">source code</a>)</li>
+</ul>
+
+<h2 id="Spiele">Spiele</h2>
+
+<ul>
+ <li><a href="https://dl.dropboxusercontent.com/u/62064441/ioquake3.js/ioquake3.html">IoQuake3</a> (<a href="https://github.com/klaussilveira/ioquake3.js">source code</a>)</li>
+ <li><a href="http://collinhover.github.io/kaiopua/">Kai 'Opua</a> (<a href="https://github.com/collinhover/kaiopua">source code</a>)</li>
+</ul>
+
+<h2 id="HTML">HTML</h2>
+
+<ul>
+ <li> <a href="http://zenphoton.com">Zen Photon Garden </a>(<a href="https://github.com/scanlime/zenphoton">source code</a>)</li>
+ <li><a href="http://webdeveloperbareilly.in/blog/smo/html-meta-tags-for-social-media-optimization.html">HTMl Meta Tags For SMO</a></li>
+</ul>
+
+<h2 id="Web_APIs">Web APIs</h2>
+
+<ul>
+</ul>
+
+<h3 id="Notifications_API">Notifications API</h3>
+
+<ul>
+ <li>HTML5 Notifications (<a href="https://github.com/elfoxero/html5notifications">source code</a>)</li>
+</ul>
+
+<ul>
+</ul>
+
+<h3 id="Web_Audio_API">Web Audio API</h3>
+
+<ul>
+ <li><a href="http://ondras.github.io/fireworks-webgl/">Web Audio Fireworks</a></li>
+ <li><a href="http://ondras.github.io/oscope/">oscope.js - JavaScript oscilloscope</a></li>
+ <li><a href="http://mdn.github.io/audio-buffer/">Audio Buffer demo</a> (<a href="http://mdn.github.io/audio-buffer/">source code</a>)</li>
+ <li><a href="http://nipe-systems.de/webapps/html5-web-audio/">HTML5 Web Audio Showcase</a> (<a href="https://github.com/NIPE-SYSTEMS/html5-web-audio-showcase">source code</a>)</li>
+ <li><a href="http://wayou.github.io/HTML5_Audio_Visualizer/">HTML5 Audio Visualizer</a> (<a href="https://github.com/Wayou/HTML5_Audio_Visualizer">source code</a>)</li>
+ <li><a href="http://carlosrafaelgn.com.br/GraphicalFilterEditor/">Graphical Filter Editor and Visualizer</a> (<a href="https://github.com/carlosrafaelgn/GraphicalFilterEditor">source code</a>)</li>
+</ul>
+
+<h3 id="Unclassified" name="Unclassified">Web Workers</h3>
+
+<ul>
+ <li><a href="http://ondras.github.io/fractal/">Web Worker Fractals</a></li>
+ <li><a href="http://ondras.github.io/photo/">Photo editor</a></li>
+ <li><a href="http://ondras.github.io/coral/">Coral generator</a></li>
+ <li><a class="external" href="http://nerget.com/rayjs-mt/rayjs.html">Raytracer</a></li>
+ <li><a href="http://palerdot.github.io/hotcold/">HotCold Touch Typing</a></li>
+</ul>
diff --git a/files/de/web/demos_of_open_web_technologies/index.html b/files/de/web/demos_of_open_web_technologies/index.html
deleted file mode 100644
index fffa5e1530..0000000000
--- a/files/de/web/demos_of_open_web_technologies/index.html
+++ /dev/null
@@ -1,154 +0,0 @@
----
-title: Demos für Open Web Technologie
-slug: Web/Demos_of_open_web_technologies
-tags:
-  - Apps
-  - Demos
-  - Example
-  - Translation
-translation_of: Web/Demos_of_open_web_technologies
----
-<p>Mozilla unterstützt eine Vielzahl an Open Web Technologien und ermutigt ihre Verwendung, deswegen auch die ganzen <strong>toten links</strong> hier auf dieser Seite. Diese Seite bietet Links zu spannenden Demonstrationen dieser Technologien, unter anderem beliebte Demos aus dem Demo Studio, <a href="https://blog.mozilla.org/community/2015/12/18/saying-goodbye-to-demo-studio/">welches kürzlich geschlossen wurde</a>. Wenn Sie eine gute Demonstration oder Anwendung von Open Web Technologie kennen, bitte fügen Sie einen Link in der passenden Sektion ein.</p>
-
-<p> </p>
-
-<h2 id="2D_Grafik">2D Grafik</h2>
-
-<h3 id="APNG" name="APNG">APNG</h3>
-
-<ul>
- <li><a class="external" href="http://people.mozilla.com/~dolske/apng/demo.html">Justin's demo</a> (funktioniert wenn lokal gespeichert)</li>
-</ul>
-
-<h3 id="SVG" name="SVG">Canvas</h3>
-
-<ul>
- <li><a class="external" href="http://www.blobsallad.se/">Ein interaktiver blob mit javascript und canvas (fun)</a></li>
- <li><a class="external" href="http://blobsallad.se/article/">Blob's demos</a></li>
- <li><a class="external" href="http://glimr.rubyforge.org/cake/canvas.html">Canvas Animation Kit Experiment (CAKE)</a></li>
- <li><a class="external" href="http://www.xs4all.nl/~peterned/3d/">Canvas3D &amp; Flickr</a></li>
- <li><a class="external" href="http://arapehlivanian.com/wp-content/uploads/2007/02/canvas.html">Playing with Canvas</a></li>
- <li><a class="external" href="http://langexplr.blogspot.com/2008/11/using-canvas-html-element.html">Verwendung des  Canvas HTML5-Elements</a></li>
- <li><a class="external" href="/samples/raycaster/RayCaster.html" title="https://developer.mozilla.org/editor/fckeditor/core/editor/samples/raycaster/RayCaster.html">RayCaster</a></li>
- <li><a class="external" href="http://jsmsxdemo.googlepages.com/jsmsx.html">MSX Emulator</a></li>
- <li><a class="external" href="http://processingjs.org/exhibition/">processing.js</a></li>
- <li><a class="external" href="http://glimr.rubyforge.org/cake/missile_fleet.html">Missile fleet</a></li>
- <li><a class="external" href="http://glimr.rubyforge.org/cake/demos/fireworks2.6rt.html">FireWorks</a></li>
- <li><a class="external" href="http://glimr.rubyforge.org/cake/demos/canvas_ash.html">Canvas ash1</a></li>
- <li><a class="external" href="http://glimr.rubyforge.org/cake/demos/canvas_ash2.html">Canvas ash2</a></li>
- <li><a class="external" href="http://glimr.rubyforge.org/cake/demos/canvas_ash8.html">Canvas ash8</a></li>
- <li><a class="external" href="http://gyu.que.jp/jscloth/">3D on 2D Canvas</a></li>
- <li><a href="http://viliusle.github.io/miniPaint/">miniPaint - Image editor </a>(<a href="https://github.com/viliusle/miniPaint">source code</a>)</li>
-</ul>
-
-<h3 id="SVG" name="SVG">SVG</h3>
-
-<ul>
- <li><a class="external" href="http://www.kde-look.org/CONTENT/content-files/19524-gearflowers.svg.gz">Gearflowers image</a> Nicht vergessen reinzuzoomen (funktioniert wenn lokal gespeichert)</li>
- <li><a class="external" href="http://people.mozilla.com/~vladimir/demos/photos.svg">SVG photo demo</a> (Visuelle Effekte und Interaktion)</li>
- <li><a class="external" href="http://starkravingfinkle.org/projects/demo/svg-bubblemenu-in-html.xml">Bubblemenu</a> (Visuelle Effekte und Interaktion)</li>
- <li><a class="external" href="http://starkravingfinkle.org/blog/2007/07/firefox-3-svg-foreignobject/">HTML transformationen</a> using <code>foreignObject</code> (Visuelle Effekte and transforms)</li>
- <li><a class="external" href="http://svg-whiz.com/svg/linguistics/theCreepyMouth.svg">Phonetics Guide</a> (Interaktiv)</li>
- <li><a class="external" href="http://www.lutanho.net/svgvml3d/platonic.html">3D objects demo</a> (Interaktiv)</li>
- <li><a class="external" href="http://www.themaninblue.com/experiment/Blobular/">Blobular</a> (Interaktiv)</li>
- <li><a class="external" href="http://www.double.co.nz/video_test/video.svg">Video embedded in SVG</a> (oder benutze den <a class="external" href="http://www.double.co.nz/video_test/video_svg.tar.bz2">lokalen Download</a>)</li>
- <li><a href="http://summerstyle.github.io/summer/">Summer HTML image map creator</a> (<a href="https://github.com/summerstyle/summer">source code</a>)</li>
-</ul>
-
-<h3 id="Video" name="Video">Video</h3>
-
-<ul>
- <li><a class="external" href="http://www.double.co.nz/video_test/test1.html">Streaming Anime, Movie Trailer and Interview</a></li>
- <li><a class="external" href="http://www.double.co.nz/video_test/test2.html">Billy's Browser Firefox Flick</a></li>
- <li><a class="external" href="http://www.double.co.nz/video_test/test3.html">Virtual Barber Shop</a></li>
- <li><a class="external" href="http://www.double.co.nz/video_test/test4.html">Transformers Movie Trailer</a></li>
- <li><a class="external" href="http://www.double.co.nz/video_test/test5.html">A Scanner Darkly Movie Trailer</a> (mit eingebauter Steuerung)</li>
- <li><a class="external" href="http://www.double.co.nz/video_test/events.html">Events firing and volume control</a></li>
- <li><a class="external" href="http://www.double.co.nz/video_test/video.svg">Dragable and sizable videos</a></li>
-</ul>
-
-<h2 id="3D_Grafik">3D Grafik</h2>
-
-<h3 id="WebGL">WebGL</h3>
-
-<ul>
- <li><a href="http://ondras.github.io/fireworks-webgl/">Web Audio Fireworks</a></li>
- <li><a href="https://dl.dropboxusercontent.com/u/62064441/ioquake3.js/ioquake3.html">IoQuake3</a> (<a href="https://github.com/klaussilveira/ioquake3.js">source code</a>)</li>
- <li><a href="http://micah.tech/demoscene/">Escher puzzle</a> (<a href="https://github.com/micahbolen/demoscene">source code</a>)</li>
- <li><a href="http://collinhover.github.io/kaiopua/">Kai 'Opua</a> (<a href="https://github.com/collinhover/kaiopua">source code</a>)</li>
-</ul>
-
-<h3 id="Virtual_Reality">Virtual Reality</h3>
-
-<ul>
- <li><a href="http://mozvr.github.io/polarsea/">The Polar Sea</a> (<a href="https://github.com/MozVR/polarsea">source code</a>)</li>
- <li><a href="http://mozvr.github.io/sechelt/">Sechelt fly-through</a> (<a href="https://github.com/mozvr/sechelt">source code</a>)</li>
-</ul>
-
-<h2 id="CSS">CSS</h2>
-
-<ul>
- <li><a href="http://felixniklas.com/paperfold/">Paperfold</a></li>
- <li><a href="http://ondras.zarovi.cz/games/blockout/">CSS Blockout</a></li>
- <li><a href="http://ondras.zarovi.cz/demos/rubik/">Rubik's cube</a></li>
- <li><a href="http://ondras.zarovi.cz/demos/nojs/">Pure CSS Slides</a></li>
- <li>Planetarium (<a href="https://github.com/littleworkshop/planetarium">source code</a>)</li>
- <li><a href="http://www.lesmoffat.co.uk/folio/forest/forest.html">CSS Paralax Forest</a></li>
- <li><a href="http://webdeveloperbareilly.in/blog/css3/awesome-login-form.html">Awesome Login Page</a></li>
- <li><a href="http://webdeveloperbareilly.in/blog/css3/onepage-scroll-template.html">CSS3 One Page Scroll</a></li>
-</ul>
-
-<h3 id="Transformations">Transformations</h3>
-
-<ul>
- <li><a href="http://impress.github.io/impress.js">Impress.js</a> (<a href="https://github.com/impress/impress.js">source code</a>)</li>
-</ul>
-
-<h2 id="Spiele">Spiele</h2>
-
-<ul>
- <li><a href="https://dl.dropboxusercontent.com/u/62064441/ioquake3.js/ioquake3.html">IoQuake3</a> (<a href="https://github.com/klaussilveira/ioquake3.js">source code</a>)</li>
- <li><a href="http://collinhover.github.io/kaiopua/">Kai 'Opua</a> (<a href="https://github.com/collinhover/kaiopua">source code</a>)</li>
-</ul>
-
-<h2 id="HTML">HTML</h2>
-
-<ul>
- <li> <a href="http://zenphoton.com">Zen Photon Garden </a>(<a href="https://github.com/scanlime/zenphoton">source code</a>)</li>
- <li><a href="http://webdeveloperbareilly.in/blog/smo/html-meta-tags-for-social-media-optimization.html">HTMl Meta Tags For SMO</a></li>
-</ul>
-
-<h2 id="Web_APIs">Web APIs</h2>
-
-<ul>
-</ul>
-
-<h3 id="Notifications_API">Notifications API</h3>
-
-<ul>
- <li>HTML5 Notifications (<a href="https://github.com/elfoxero/html5notifications">source code</a>)</li>
-</ul>
-
-<ul>
-</ul>
-
-<h3 id="Web_Audio_API">Web Audio API</h3>
-
-<ul>
- <li><a href="http://ondras.github.io/fireworks-webgl/">Web Audio Fireworks</a></li>
- <li><a href="http://ondras.github.io/oscope/">oscope.js - JavaScript oscilloscope</a></li>
- <li><a href="http://mdn.github.io/audio-buffer/">Audio Buffer demo</a> (<a href="http://mdn.github.io/audio-buffer/">source code</a>)</li>
- <li><a href="http://nipe-systems.de/webapps/html5-web-audio/">HTML5 Web Audio Showcase</a> (<a href="https://github.com/NIPE-SYSTEMS/html5-web-audio-showcase">source code</a>)</li>
- <li><a href="http://wayou.github.io/HTML5_Audio_Visualizer/">HTML5 Audio Visualizer</a> (<a href="https://github.com/Wayou/HTML5_Audio_Visualizer">source code</a>)</li>
- <li><a href="http://carlosrafaelgn.com.br/GraphicalFilterEditor/">Graphical Filter Editor and Visualizer</a> (<a href="https://github.com/carlosrafaelgn/GraphicalFilterEditor">source code</a>)</li>
-</ul>
-
-<h3 id="Unclassified" name="Unclassified">Web Workers</h3>
-
-<ul>
- <li><a href="http://ondras.github.io/fractal/">Web Worker Fractals</a></li>
- <li><a href="http://ondras.github.io/photo/">Photo editor</a></li>
- <li><a href="http://ondras.github.io/coral/">Coral generator</a></li>
- <li><a class="external" href="http://nerget.com/rayjs-mt/rayjs.html">Raytracer</a></li>
- <li><a href="http://palerdot.github.io/hotcold/">HotCold Touch Typing</a></li>
-</ul>
diff --git a/files/de/web/javascript/reference/global_objects/webassembly/index.html b/files/de/web/javascript/reference/global_objects/webassembly/index.html
index 4681f473fd..f02c065588 100644
--- a/files/de/web/javascript/reference/global_objects/webassembly/index.html
+++ b/files/de/web/javascript/reference/global_objects/webassembly/index.html
@@ -107,5 +107,3 @@ WebAssembly.instantiateStreaming(fetch('simple.wasm'), importObject)
  <li><a href="/en-US/docs/WebAssembly/Concepts">WebAssembly concepts</a></li>
  <li><a href="/en-US/docs/WebAssembly/Using_the_JavaScript_API">Using the WebAssembly JavaScript API</a></li>
 </ul>
-
-<section id="Quick_Links"> </section>
diff --git a/files/es/_redirects.txt b/files/es/_redirects.txt
index b0cfd8f626..a9ca29c7e8 100644
--- a/files/es/_redirects.txt
+++ b/files/es/_redirects.txt
@@ -293,7 +293,7 @@
 /es/docs/DOM/event.cancelable	/es/docs/Web/API/Event/cancelable
 /es/docs/DOM/event.initEvent	/es/docs/Web/API/Event/initEvent
 /es/docs/DOM/event.initMouseEvent	/es/docs/Web/API/MouseEvent/initMouseEvent
-/es/docs/DOM/event.pageX	/es/docs/Web/API/UIEvent/pageX
+/es/docs/DOM/event.pageX	/es/docs/Web/API/MouseEvent/pageX
 /es/docs/DOM/event.preventDefault	/es/docs/Web/API/Event/preventDefault
 /es/docs/DOM/event.type	/es/docs/Web/API/Event/type
 /es/docs/DOM/form	/es/docs/Web/API/HTMLFormElement
@@ -360,7 +360,7 @@
 /es/docs/DOM:event.cancelable	/es/docs/Web/API/Event/cancelable
 /es/docs/DOM:event.initEvent	/es/docs/Web/API/Event/initEvent
 /es/docs/DOM:event.initMouseEvent	/es/docs/Web/API/MouseEvent/initMouseEvent
-/es/docs/DOM:event.pageX	/es/docs/Web/API/UIEvent/pageX
+/es/docs/DOM:event.pageX	/es/docs/Web/API/MouseEvent/pageX
 /es/docs/DOM:event.preventDefault	/es/docs/Web/API/Event/preventDefault
 /es/docs/DOM:form	/es/docs/Web/API/HTMLFormElement
 /es/docs/DOM:range	/es/docs/Web/API/Range
@@ -1566,23 +1566,34 @@
 /es/docs/Web/API/Position	/es/docs/Web/API/GeolocationPosition
 /es/docs/Web/API/RandomSource/Obtenervaloresaleatorios	/es/docs/Web/API/Crypto/getRandomValues
 /es/docs/Web/API/SubtleCrypto/encrypt	/es/docs/Web/HTTP/Headers/Digest
+/es/docs/Web/API/UIEvent/pageX	/es/docs/Web/API/MouseEvent/pageX
 /es/docs/Web/API/WebGL_API/Getting_started_with_WebGL	/es/docs/Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL
 /es/docs/Web/API/WebGL_API/Tutorial/Objetos_3D_utilizando_WebGL	/es/docs/Web/API/WebGL_API/Tutorial/Creating_3D_objects_using_WebGL
 /es/docs/Web/API/WebGL_API/Tutorial/Wtilizando_texturas_en_WebGL	/es/docs/Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL
 /es/docs/Web/API/WebSockets_API/Escribiendo_servidor_WebSocket	/es/docs/Web/API/WebSockets_API/Writing_WebSocket_server
 /es/docs/Web/API/WebSockets_API/Escribiendo_servidores_con_WebSocket	/es/docs/Web/API/WebSockets_API/Writing_WebSocket_servers
 /es/docs/Web/API/Web_Speech_API/Uso_de_la_Web_Speech_API	/es/docs/Web/API/Web_Speech_API/Using_the_Web_Speech_API
-/es/docs/Web/API/Window.clearTimeout	/es/docs/Web/API/WindowOrWorkerGlobalScope/clearTimeout
+/es/docs/Web/API/Window.clearTimeout	/es/docs/Web/API/clearTimeout
 /es/docs/Web/API/Window.navigator	/es/docs/Web/API/Window/navigator
 /es/docs/Web/API/Window.onbeforeunload	/es/docs/Web/API/WindowEventHandlers/onbeforeunload
-/es/docs/Web/API/Window.setTimeout	/es/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout
-/es/docs/Web/API/WindowBase64.atob	/es/docs/Web/API/WindowOrWorkerGlobalScope/atob
+/es/docs/Web/API/Window.setTimeout	/es/docs/Web/API/setTimeout
+/es/docs/Web/API/WindowBase64.atob	/es/docs/Web/API/atob
 /es/docs/Web/API/WindowBase64/Base64_codificando_y_decodificando	/es/docs/Glossary/Base64
-/es/docs/Web/API/WindowBase64/atob	/es/docs/Web/API/WindowOrWorkerGlobalScope/atob
-/es/docs/Web/API/WindowTimers/clearInterval	/es/docs/Web/API/WindowOrWorkerGlobalScope/clearInterval
-/es/docs/Web/API/WindowTimers/clearTimeout	/es/docs/Web/API/WindowOrWorkerGlobalScope/clearTimeout
-/es/docs/Web/API/WindowTimers/setInterval	/es/docs/Web/API/WindowOrWorkerGlobalScope/setInterval
-/es/docs/Web/API/WindowTimers/setTimeout	/es/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout
+/es/docs/Web/API/WindowBase64/atob	/es/docs/Web/API/atob
+/es/docs/Web/API/WindowOrWorkerGlobalScope/atob	/es/docs/Web/API/atob
+/es/docs/Web/API/WindowOrWorkerGlobalScope/caches	/es/docs/Web/API/caches
+/es/docs/Web/API/WindowOrWorkerGlobalScope/clearInterval	/es/docs/Web/API/clearInterval
+/es/docs/Web/API/WindowOrWorkerGlobalScope/clearTimeout	/es/docs/Web/API/clearTimeout
+/es/docs/Web/API/WindowOrWorkerGlobalScope/createImageBitmap	/es/docs/Web/API/createImageBitmap
+/es/docs/Web/API/WindowOrWorkerGlobalScope/fetch	/es/docs/Web/API/fetch
+/es/docs/Web/API/WindowOrWorkerGlobalScope/indexedDB	/es/docs/Web/API/indexedDB
+/es/docs/Web/API/WindowOrWorkerGlobalScope/isSecureContext	/es/docs/Web/API/isSecureContext
+/es/docs/Web/API/WindowOrWorkerGlobalScope/setInterval	/es/docs/Web/API/setInterval
+/es/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout	/es/docs/Web/API/setTimeout
+/es/docs/Web/API/WindowTimers/clearInterval	/es/docs/Web/API/clearInterval
+/es/docs/Web/API/WindowTimers/clearTimeout	/es/docs/Web/API/clearTimeout
+/es/docs/Web/API/WindowTimers/setInterval	/es/docs/Web/API/setInterval
+/es/docs/Web/API/WindowTimers/setTimeout	/es/docs/Web/API/setTimeout
 /es/docs/Web/API/XMLHttpRequest/FormData	/es/docs/Web/API/FormData
 /es/docs/Web/API/event.defaultPrevented	/es/docs/Web/API/Event/defaultPrevented
 /es/docs/Web/API/event.which	/es/docs/Web/API/KeyboardEvent/which
@@ -1622,7 +1633,9 @@
 /es/docs/Web/CSS/CSS_Animations/Detectar_soporte_de_animación_CSS	/es/docs/Web/CSS/CSS_Animations/Detecting_CSS_animation_support
 /es/docs/Web/CSS/CSS_Animations/Usando_animaciones_CSS	/es/docs/Web/CSS/CSS_Animations/Using_CSS_animations
 /es/docs/Web/CSS/CSS_Background_and_Borders	/es/docs/Web/CSS/CSS_Backgrounds_and_Borders
-/es/docs/Web/CSS/CSS_Background_and_Borders/Border-image_generador	/es/docs/Web/CSS/CSS_Background_and_Borders/Border-image_generator
+/es/docs/Web/CSS/CSS_Background_and_Borders/Border-image_generador	/es/docs/Web/CSS/CSS_Backgrounds_and_Borders/Border-image_generator
+/es/docs/Web/CSS/CSS_Background_and_Borders/Border-image_generator	/es/docs/Web/CSS/CSS_Backgrounds_and_Borders/Border-image_generator
+/es/docs/Web/CSS/CSS_Background_and_Borders/Border-radius_generator	/es/docs/Web/CSS/CSS_Backgrounds_and_Borders/Border-radius_generator
 /es/docs/Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds	/es/docs/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds
 /es/docs/Web/CSS/CSS_Colors	/es/docs/Web/CSS/CSS_Color
 /es/docs/Web/CSS/CSS_Colors/Herramienta_para_seleccionar_color	/es/docs/Web/CSS/CSS_Colors/Color_picker_tool
@@ -1651,7 +1664,7 @@
 /es/docs/Web/CSS/Elemento_reemplazo	/es/docs/Web/CSS/Replaced_element
 /es/docs/Web/CSS/Especificidad	/es/docs/Web/CSS/Specificity
 /es/docs/Web/CSS/Gradiente	/es/docs/Web/CSS/gradient
-/es/docs/Web/CSS/Herramientas	/es/docs/Web/CSS/Tools
+/es/docs/Web/CSS/Herramientas	/es/docs/conflicting/Web/CSS
 /es/docs/Web/CSS/Introducción/Content	/es/docs/Learn/CSS/Howto/Generated_content
 /es/docs/Web/CSS/Introducción/Media	/es/docs/Web/Progressive_web_apps/Responsive/Media_types
 /es/docs/Web/CSS/Preguntas_frecuentes_sobre_CSS	/es/docs/Learn/CSS/Howto/CSS_FAQ
@@ -1668,6 +1681,7 @@
 /es/docs/Web/CSS/Selectores_hermanos_generales	/es/docs/Web/CSS/General_sibling_combinator
 /es/docs/Web/CSS/Sintaxis_definición_de_valor	/es/docs/Web/CSS/Value_definition_syntax
 /es/docs/Web/CSS/Texto_CSS	/es/docs/Web/CSS/CSS_Text
+/es/docs/Web/CSS/Tools	/es/docs/conflicting/Web/CSS
 /es/docs/Web/CSS/Transiciones_de_CSS	/es/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions
 /es/docs/Web/CSS/Usando_animaciones_CSS	/es/docs/Web/CSS/CSS_Animations/Using_CSS_animations
 /es/docs/Web/CSS/Using_CSS_transforms	/es/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms
@@ -1704,6 +1718,7 @@
 /es/docs/Web/CSS/transform-function/translateY	/es/docs/Web/CSS/transform-function/translateY()
 /es/docs/Web/CSS/transform-function/translateZ	/es/docs/Web/CSS/transform-function/translateZ()
 /es/docs/Web/CSS/var	/es/docs/Web/CSS/var()
+/es/docs/Web/Demos_of_open_web_technologies	/es/docs/Web/Demos
 /es/docs/Web/Events/animationend	/es/docs/Web/API/HTMLElement/animationend_event
 /es/docs/Web/Events/beforeunload	/es/docs/Web/API/Window/beforeunload_event
 /es/docs/Web/Events/blur	/es/docs/Web/API/Element/blur_event
diff --git a/files/es/_wikihistory.json b/files/es/_wikihistory.json
index 3c8ab55145..fd2d790297 100644
--- a/files/es/_wikihistory.json
+++ b/files/es/_wikihistory.json
@@ -7568,6 +7568,15 @@
       "Mgjbot"
     ]
   },
+  "Web/API/MouseEvent/pageX": {
+    "modified": "2019-03-23T23:12:56.756Z",
+    "contributors": [
+      "fscholz",
+      "khalid32",
+      "Nathymig",
+      "Julgon"
+    ]
+  },
   "Web/API/MouseEvent/shiftKey": {
     "modified": "2019-03-23T22:05:24.832Z",
     "contributors": [
@@ -8431,15 +8440,6 @@
       "fscholz"
     ]
   },
-  "Web/API/UIEvent/pageX": {
-    "modified": "2019-03-23T23:12:56.756Z",
-    "contributors": [
-      "fscholz",
-      "khalid32",
-      "Nathymig",
-      "Julgon"
-    ]
-  },
   "Web/API/URL": {
     "modified": "2019-03-23T22:19:12.735Z",
     "contributors": [
@@ -9120,79 +9120,6 @@
       "chrisdavidmills"
     ]
   },
-  "Web/API/WindowOrWorkerGlobalScope/atob": {
-    "modified": "2019-03-23T23:03:12.715Z",
-    "contributors": [
-      "fscholz",
-      "sathyasanles"
-    ]
-  },
-  "Web/API/WindowOrWorkerGlobalScope/caches": {
-    "modified": "2019-03-23T22:16:45.016Z",
-    "contributors": [
-      "ivannieto"
-    ]
-  },
-  "Web/API/WindowOrWorkerGlobalScope/clearInterval": {
-    "modified": "2019-03-23T22:56:16.485Z",
-    "contributors": [
-      "Guitxo"
-    ]
-  },
-  "Web/API/WindowOrWorkerGlobalScope/clearTimeout": {
-    "modified": "2019-06-18T10:20:27.972Z",
-    "contributors": [
-      "AlePerez92",
-      "fscholz",
-      "basemnassar11",
-      "VictorArias"
-    ]
-  },
-  "Web/API/WindowOrWorkerGlobalScope/createImageBitmap": {
-    "modified": "2020-10-15T22:14:17.553Z",
-    "contributors": [
-      "Bumxu"
-    ]
-  },
-  "Web/API/WindowOrWorkerGlobalScope/fetch": {
-    "modified": "2020-10-15T22:01:57.457Z",
-    "contributors": [
-      "fscholz",
-      "jagomf"
-    ]
-  },
-  "Web/API/WindowOrWorkerGlobalScope/indexedDB": {
-    "modified": "2019-03-23T22:16:36.537Z",
-    "contributors": [
-      "ivannieto"
-    ]
-  },
-  "Web/API/WindowOrWorkerGlobalScope/isSecureContext": {
-    "modified": "2019-03-23T22:16:45.834Z",
-    "contributors": [
-      "ivannieto"
-    ]
-  },
-  "Web/API/WindowOrWorkerGlobalScope/setInterval": {
-    "modified": "2020-08-24T18:02:23.092Z",
-    "contributors": [
-      "mastertrooper",
-      "Makinita",
-      "Klius",
-      "claudionebbia"
-    ]
-  },
-  "Web/API/WindowOrWorkerGlobalScope/setTimeout": {
-    "modified": "2019-03-23T23:17:29.378Z",
-    "contributors": [
-      "BubuAnabelas",
-      "vltamara",
-      "nauj27",
-      "fscholz",
-      "AshfaqHossain",
-      "VictorArias"
-    ]
-  },
   "Web/API/Worker": {
     "modified": "2019-03-23T22:48:01.797Z",
     "contributors": [
@@ -9277,6 +9204,34 @@
       "mmednik"
     ]
   },
+  "Web/API/atob": {
+    "modified": "2019-03-23T23:03:12.715Z",
+    "contributors": [
+      "fscholz",
+      "sathyasanles"
+    ]
+  },
+  "Web/API/caches": {
+    "modified": "2019-03-23T22:16:45.016Z",
+    "contributors": [
+      "ivannieto"
+    ]
+  },
+  "Web/API/clearInterval": {
+    "modified": "2019-03-23T22:56:16.485Z",
+    "contributors": [
+      "Guitxo"
+    ]
+  },
+  "Web/API/clearTimeout": {
+    "modified": "2019-06-18T10:20:27.972Z",
+    "contributors": [
+      "AlePerez92",
+      "fscholz",
+      "basemnassar11",
+      "VictorArias"
+    ]
+  },
   "Web/API/console/assert": {
     "modified": "2019-03-23T22:47:53.587Z",
     "contributors": [
@@ -9285,6 +9240,31 @@
       "danycoro"
     ]
   },
+  "Web/API/createImageBitmap": {
+    "modified": "2020-10-15T22:14:17.553Z",
+    "contributors": [
+      "Bumxu"
+    ]
+  },
+  "Web/API/fetch": {
+    "modified": "2020-10-15T22:01:57.457Z",
+    "contributors": [
+      "fscholz",
+      "jagomf"
+    ]
+  },
+  "Web/API/indexedDB": {
+    "modified": "2019-03-23T22:16:36.537Z",
+    "contributors": [
+      "ivannieto"
+    ]
+  },
+  "Web/API/isSecureContext": {
+    "modified": "2019-03-23T22:16:45.834Z",
+    "contributors": [
+      "ivannieto"
+    ]
+  },
   "Web/API/notification": {
     "modified": "2019-06-28T05:54:12.854Z",
     "contributors": [
@@ -9338,6 +9318,26 @@
       "Davdriver"
     ]
   },
+  "Web/API/setInterval": {
+    "modified": "2020-08-24T18:02:23.092Z",
+    "contributors": [
+      "mastertrooper",
+      "Makinita",
+      "Klius",
+      "claudionebbia"
+    ]
+  },
+  "Web/API/setTimeout": {
+    "modified": "2019-03-23T23:17:29.378Z",
+    "contributors": [
+      "BubuAnabelas",
+      "vltamara",
+      "nauj27",
+      "fscholz",
+      "AshfaqHossain",
+      "VictorArias"
+    ]
+  },
   "Web/Accessibility": {
     "modified": "2020-09-22T14:24:03.363Z",
     "contributors": [
@@ -10652,25 +10652,25 @@
       "ulisescab"
     ]
   },
-  "Web/CSS/CSS_Background_and_Borders/Border-image_generator": {
+  "Web/CSS/CSS_Backgrounds_and_Borders": {
+    "modified": "2019-03-23T22:41:48.399Z",
+    "contributors": [
+      "teoli"
+    ]
+  },
+  "Web/CSS/CSS_Backgrounds_and_Borders/Border-image_generator": {
     "modified": "2019-03-23T22:41:48.777Z",
     "contributors": [
       "teoli",
       "mcclone2001"
     ]
   },
-  "Web/CSS/CSS_Background_and_Borders/Border-radius_generator": {
+  "Web/CSS/CSS_Backgrounds_and_Borders/Border-radius_generator": {
     "modified": "2019-03-18T21:15:42.476Z",
     "contributors": [
       "israel-munoz"
     ]
   },
-  "Web/CSS/CSS_Backgrounds_and_Borders": {
-    "modified": "2019-03-23T22:41:48.399Z",
-    "contributors": [
-      "teoli"
-    ]
-  },
   "Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds": {
     "modified": "2019-03-23T22:17:03.740Z",
     "contributors": [
@@ -11192,12 +11192,6 @@
       "Derhks"
     ]
   },
-  "Web/CSS/Tools": {
-    "modified": "2019-03-23T22:28:04.142Z",
-    "contributors": [
-      "arturoblack"
-    ]
-  },
   "Web/CSS/Tutorials": {
     "modified": "2019-03-23T22:52:34.225Z",
     "contributors": [
@@ -13293,7 +13287,7 @@
       "pekechis"
     ]
   },
-  "Web/Demos_of_open_web_technologies": {
+  "Web/Demos": {
     "modified": "2019-03-23T22:33:45.097Z",
     "contributors": [
       "SoftwareRVG",
@@ -21464,6 +21458,12 @@
       "Jeremie"
     ]
   },
+  "conflicting/Web/CSS": {
+    "modified": "2019-03-23T22:28:04.142Z",
+    "contributors": [
+      "arturoblack"
+    ]
+  },
   "conflicting/Web/CSS/::placeholder": {
     "modified": "2019-03-23T22:29:22.118Z",
     "contributors": [
diff --git a/files/es/conflicting/web/css/index.html b/files/es/conflicting/web/css/index.html
new file mode 100644
index 0000000000..988256afbd
--- /dev/null
+++ b/files/es/conflicting/web/css/index.html
@@ -0,0 +1,29 @@
+---
+title: Herramientas
+slug: conflicting/Web/CSS
+tags:
+  - CSS
+translation_of: Web/CSS/Tools
+original_slug: Web/CSS/Tools
+---
+<div> </div>
+
+<p><span id="result_box" lang="es"><span>CSS</span> <span>ofrece una serie de</span> <span>características poderosas</span> <span>que puede ser</span> <span>difíciles de usar</span><span>,</span> <span>o tener un gran</span> <span>número de</span> <span>parámetros, por lo</span> <span>que es</span> <span>muy útil</span> <span>visualizarlos</span> <span>mientras se trabaja en</span> <span>ellos.</span> <span>Esta página</span> <span>ofrece</span> <span>enlaces a</span> <span>una serie de herramientas</span> <span>que</span> <span>le ayudarán a construir sus estilos usando estas caracteristicas</span><span>.</span></span></p>
+
+<p>{{LandingPageListSubpages}}</p>
+
+<h2 id="Otras_herramientas">Otras herramientas</h2>
+
+<ul>
+ <li>
+  <h4 id="Animación_CSS_-_Stylie">Animación CSS - <a href="http://jeremyckahn.github.io/stylie/">Stylie</a></h4>
+ </li>
+ <li><span id="result_box" lang="es"><span>Para</span> <span>comprobar la información de</span> <span>la pantalla del dispositivo</span></span> (helpful in {{Glossary("responsive web design")}}) - <a href="http://mydevice.io">mydevice.io</a></li>
+ <li>Menus CSS- <a href="http://cssmenumaker.com/">cssmenumaker.com</a></li>
+</ul>
+
+<h2 id="Temas_relacionados">Temas relacionados</h2>
+
+<ul>
+ <li><a href="/es/docs/Web/CSS" title="/en-US/docs/Web/CSS">CSS</a></li>
+</ul>
diff --git a/files/es/glossary/accessibility_tree/index.html b/files/es/glossary/accessibility_tree/index.html
index 0944f31397..812e74631a 100644
--- a/files/es/glossary/accessibility_tree/index.html
+++ b/files/es/glossary/accessibility_tree/index.html
@@ -28,7 +28,7 @@ translation_of: Glossary/Accessibility_tree
 
 <p>Además, el árbol de accesibilidad usualmente contiene información sobre lo que se puede hacer con un elemento: <em>seguir</em> un enlace, <em>completar</em> un cuadro de texto, etc.</p>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li><a href="/en-US/docs/Glossary">Glossary</a>
 
diff --git a/files/es/glossary/call_stack/index.html b/files/es/glossary/call_stack/index.html
index 3eea4ae1cc..9980c2811a 100644
--- a/files/es/glossary/call_stack/index.html
+++ b/files/es/glossary/call_stack/index.html
@@ -80,7 +80,7 @@ saludar();
  <li>{{Interwiki("wikipedia", "Pila de llamadas")}} en Wikipedia</li>
 </ul>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ul>
  <li><a href="/es-ES/docs/Glossary">Glosario</a>
 
diff --git a/files/es/glossary/character_set/index.html b/files/es/glossary/character_set/index.html
index cbfc145643..5fbd2851e0 100644
--- a/files/es/glossary/character_set/index.html
+++ b/files/es/glossary/character_set/index.html
@@ -14,7 +14,7 @@ original_slug: Glossary/conjunto_de_caracteres
 
 <p>Si un conjunto de caracteres se usa incorrectamente (por ejemplo, Unicode para un artículo codificado en Big5), es posible que no vean más que caracteres rotos, que se llaman {{Interwiki("wikipedia", "Mojibake")}}.</p>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li>Artículos de Wikipedia
   <ol>
diff --git a/files/es/glossary/first-class_function/index.html b/files/es/glossary/first-class_function/index.html
index 1d1e569277..c980b4685c 100644
--- a/files/es/glossary/first-class_function/index.html
+++ b/files/es/glossary/first-class_function/index.html
@@ -98,7 +98,7 @@ diHola()();
 
 <h3 id="Conocimiento_general">Conocimiento general</h3>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li>{{Interwiki("wikipedia", "First-class_function", "First-class functions")}} on Wikipedia</li>
  <li><a href="/en-US/docs/Glossary">MDN Web Docs Glossary</a>
diff --git a/files/es/glossary/identifier/index.html b/files/es/glossary/identifier/index.html
index cda711dece..2cbf247479 100644
--- a/files/es/glossary/identifier/index.html
+++ b/files/es/glossary/identifier/index.html
@@ -24,7 +24,7 @@ original_slug: Glossary/Identificador
  <li>{{interwiki("wikipedia", "Identificador#Identificadores_en_lenguajes_informáticos", "Identificador")}} en Wikipedia</li>
 </ul>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li><a href="/es/docs/Glossary">Glosario</a>
 
diff --git a/files/es/glossary/main_thread/index.html b/files/es/glossary/main_thread/index.html
index f58296fe3f..07dd035bae 100644
--- a/files/es/glossary/main_thread/index.html
+++ b/files/es/glossary/main_thread/index.html
@@ -13,7 +13,7 @@ original_slug: Glossary/Hilo_principal
 
 <p>A menos que use intencionalmente un trabajador web, como un trabajador de servicio, JavaScript se ejecuta en el hilo principal, por lo que es fácil que un script provoque retrasos en el procesamiento o la pintura de eventos. Cuanto menos trabajo se requiera del hilo principal, más puede responder ese hilo a los eventos del usuario, pintar y, en general, responder al usuario.</p>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li>See also
   <ol>
diff --git a/files/es/glossary/php/index.html b/files/es/glossary/php/index.html
index e1677eef56..ccd4177952 100644
--- a/files/es/glossary/php/index.html
+++ b/files/es/glossary/php/index.html
@@ -40,7 +40,7 @@ translation_of: Glossary/PHP
  echo $email;
 ?&gt;</pre>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li><a href="http://php.net/">Official website</a></li>
  <li>{{Interwiki("wikipedia", "PHP")}} en Wikipedia</li>
diff --git a/files/es/glossary/pop/index.html b/files/es/glossary/pop/index.html
index 2de8816ba8..e9f9a342f4 100644
--- a/files/es/glossary/pop/index.html
+++ b/files/es/glossary/pop/index.html
@@ -13,7 +13,7 @@ translation_of: Glossary/POP
 
 <p>Los clientes usualmente recuperan todos los mensajes y luego los eliminan del servidor, pero POP3 permite retener una copia en el servidor. Casi todos los servidores y clientes de correo actualmente soportan POP3.</p>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ul>
  <li><a href="https://es.wikipedia.org/wiki/Protocolo_de_oficina_de_correo">POP</a> en Wikipedia</li>
  <li><a href="https://tools.ietf.org/html/rfc1734">RFC 1734</a> (Especificación del mecanismo de autenticación de POP3)</li>
diff --git a/files/es/glossary/primitive/index.html b/files/es/glossary/primitive/index.html
index 2591883ebb..45229b6337 100644
--- a/files/es/glossary/primitive/index.html
+++ b/files/es/glossary/primitive/index.html
@@ -106,7 +106,7 @@ console.log(foo);   // 5
  <li>{{Interwiki("wikipedia", "Tipo de dato primitivo")}} en Wikipedia</li>
 </ul>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li>{{Link("/es/docs/Glossary")}}
 
diff --git a/files/es/glossary/smtp/index.html b/files/es/glossary/smtp/index.html
index 3a3591cd0e..1bf01916b1 100644
--- a/files/es/glossary/smtp/index.html
+++ b/files/es/glossary/smtp/index.html
@@ -13,7 +13,7 @@ translation_of: Glossary/SMTP
 
 <p>El protocolo es relativamente simple. Las complicaciones principales incluyen soportar varios mecanismos de autenticación (<a class="external" href="http://en.wikipedia.org/wiki/Generic_Security_Services_Application_Program_Interface"><abbr title="Generic Security Services Application Program Interface">GSSAPI</abbr></a>, <a class="external" href="http://en.wikipedia.org/wiki/CRAM-MD5"><abbr title="challenge-response authentication mechanism">CRAM-MD5</abbr></a>, <a class="external" href="http://en.wikipedia.org/wiki/NTLM"><abbr title="NT LAN Manager">NTLM</abbr></a>, MSN, AUTH LOGIN, AUTH PLAIN, etc.), manejo de respuestas de error, y retroceder cuando los mecanismos de autenticación fallan (p. ej., el servidor asegura que soporta un mecanismo, pero no).</p>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li><a href="/es/docs/Glossary">Glosario</a>
 
diff --git a/files/es/glossary/type_coercion/index.html b/files/es/glossary/type_coercion/index.html
index 7260ab3c2d..a56d69d09c 100644
--- a/files/es/glossary/type_coercion/index.html
+++ b/files/es/glossary/type_coercion/index.html
@@ -20,4 +20,4 @@ console.log(suma);</pre>
 
 <pre class="brush: js">sumar = Number(valor1) + valor2</pre>
 
-<section class="Quick_links" id="Quick_Links"></section>
+<section id="Quick_links"></section>
diff --git a/files/es/glossary/whitespace/index.html b/files/es/glossary/whitespace/index.html
index 05638d15ef..b85fe6e3d0 100644
--- a/files/es/glossary/whitespace/index.html
+++ b/files/es/glossary/whitespace/index.html
@@ -18,7 +18,7 @@ original_slug: Glossary/Espacio_en_blanco
 
 <p>La <a href="https://www.ecma-international.org/ecma-262/6.0/#sec-white-space">especificación del lenguaje ECMAScript® 2015</a> establece varios puntos de código Unicode como espacio en blanco: <code>U+0009</code> CARACTERES de TABULACIÓN &lt;TAB&gt;, <code>U+000B</code> TABULACIÓN DE LÍNEA &lt;VT&gt;, <code>U+000C</code> FORM FEED &lt;FF&gt;, <code>U+0020</code> ESPACIO &lt;SP&gt;, <code>U+00A0</code> ESPACIO SIN ROTURA &lt;NBSP&gt;, <code>U+FEFF</code> ANCHO CERO NO -BREAK SPACE &lt;ZWNBSP&gt; y otra categoría “Zs” Cualquier otro punto de código Unicode “Separador, espacio” &lt;USP&gt;. Estos caracteres suelen ser innecesarios para la funcionalidad del código.</p>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li>Especificaciones
   <ol>
diff --git a/files/es/glossary/wrapper/index.html b/files/es/glossary/wrapper/index.html
index e6ecc8caa6..e265e08fb5 100644
--- a/files/es/glossary/wrapper/index.html
+++ b/files/es/glossary/wrapper/index.html
@@ -17,7 +17,7 @@ translation_of: Glossary/Wrapper
 
 <p>{{Interwiki("wikipedia", "Wrapper function")}} on Wikipedia</p>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li><a href="https://developer.mozilla.org/es/docs/Glossary">MDN Web Docs Glossary</a>
 
diff --git a/files/es/learn/css/first_steps/using_your_new_knowledge/index.html b/files/es/learn/css/first_steps/using_your_new_knowledge/index.html
index 2fe00e7ce9..927a5798b8 100644
--- a/files/es/learn/css/first_steps/using_your_new_knowledge/index.html
+++ b/files/es/learn/css/first_steps/using_your_new_knowledge/index.html
@@ -30,7 +30,7 @@ original_slug: Learn/CSS/First_steps/Usa_tu_nuevo_conocimiento
 <p>Puedes trabajar en el editor en vivo más abajo, o puedes descargar el punto de partida para trabajar con tu propio editor. Esta es una página HTML, con el inicio del CSS en el <code>&lt;head&gt;</code> del documento. Si prefieres, puedes mover este CSS a un archivo separado cuando crees el ejemplo en tu computador. Alternativamente, puedes usar una herramienta en línea como <a href="https://codepen.io/" rel="noopener">CodePen</a>, <a href="https://jsfiddle.net/" rel="noopener">jsFiddle</a>, o <a href="https://glitch.com/" rel="noopener">Glitch</a> para trabajar en las tareas.</p>
 
 <div class="blockIndicator note">
-<p><strong>Nota</strong>: Si te atascas, pide ayuda — mira la sección <a class="external external-icon" href="https://wiki.developer.mozilla.org/es/docs/Learn/HTML/Introduccion_a_HTML/Prueba_tus_habilidades:_Enlaces#Evaluaci%C3%B3n_o_ayuda_adicional" rel="noopener">Evaluación o ayuda adicional</a> al final de esta página.</p>
+<p><strong>Nota</strong>: Si te atascas, pide ayuda — mira la sección <a class="external external-icon" href="/es/docs/Learn/HTML/Introduccion_a_HTML/Prueba_tus_habilidades:_Enlaces#Evaluaci%C3%B3n_o_ayuda_adicional" rel="noopener">Evaluación o ayuda adicional</a> al final de esta página.</p>
 </div>
 
 <h2 id="Trabajando_con_CSS">Trabajando con CSS</h2>
diff --git a/files/es/learn/forms/how_to_structure_a_web_form/index.html b/files/es/learn/forms/how_to_structure_a_web_form/index.html
index 1bde629579..e8039ec3f4 100644
--- a/files/es/learn/forms/how_to_structure_a_web_form/index.html
+++ b/files/es/learn/forms/how_to_structure_a_web_form/index.html
@@ -282,7 +282,7 @@ original_slug: Learn/HTML/Forms/How_to_structure_an_HTML_form
 
 <h2 id="¡Prueba_tus_habilidades!">¡Prueba tus habilidades!</h2>
 
-<p>Has llegado al final de este artículo pero ¿puedes recordar la información más importante? Puedes encontrar pruebas adicionales para comprobar que has comprendido la información antes de continuar — visita <a class="external external-icon" href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Forms/Test_your_skills:_Form_structure" rel="noopener">Prueba tus habilidades: Estructura de formularios</a>.</p>
+<p>Has llegado al final de este artículo pero ¿puedes recordar la información más importante? Puedes encontrar pruebas adicionales para comprobar que has comprendido la información antes de continuar — visita <a class="external external-icon" href="/en-US/docs/Learn/Forms/Test_your_skills:_Form_structure" rel="noopener">Prueba tus habilidades: Estructura de formularios</a>.</p>
 
 <h2 id="Resumen">Resumen</h2>
 
diff --git a/files/es/mozilla/firefox/releases/9/index.html b/files/es/mozilla/firefox/releases/9/index.html
index 4e976f6262..276bf245ac 100644
--- a/files/es/mozilla/firefox/releases/9/index.html
+++ b/files/es/mozilla/firefox/releases/9/index.html
@@ -9,7 +9,7 @@ tags:
   - TopicStub
 translation_of: Mozilla/Firefox/Releases/9
 ---
-<div><section class="Quick_links" id="Quick_Links">
+<div><section id="Quick_links">
   <ol>
     <li class="toggle">
         <details>
diff --git a/files/es/web/api/atob/index.html b/files/es/web/api/atob/index.html
new file mode 100644
index 0000000000..71044fc0ab
--- /dev/null
+++ b/files/es/web/api/atob/index.html
@@ -0,0 +1,112 @@
+---
+title: WindowBase64.atob()
+slug: Web/API/atob
+translation_of: Web/API/WindowOrWorkerGlobalScope/atob
+original_slug: Web/API/WindowOrWorkerGlobalScope/atob
+---
+<p>{{APIRef}}</p>
+
+<p>La función <strong>WindowBase64.atob() </strong>descodifica una cadena de datos que ha sido codificada utilizando la codificación en base-64. Puedes utilizar el método {{domxref("window.btoa()")}} para codificar y transmitir datos que, de otro modo podrían generar problemas de comunicación. Luego de ser transmitidos se puede usar el método window.atob() para decodificar los datos de nuevo. Por ejemplo, puedes codificar, transmitir y decodificar los caracteres de control como valores ASCII 0 a 31.</p>
+
+<p>For use with Unicode or UTF-8 strings, see <a href="/en-US/docs/Web/JavaScript/Base64_encoding_and_decoding#The_.22Unicode_Problem.22">this note at Base64 encoding and decoding</a> and <a href="/en-US/docs/Web/API/window.btoa#Unicode_Strings">this note at <code>window.btoa()</code></a>.</p>
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">var decodedData = window.atob(<em>encodedData</em>);</pre>
+
+<h2 id="Example" name="Example">Example</h2>
+
+<pre class="brush:js">var encodedData = window.btoa("Hello, world"); // encode a string
+var decodedData = window.atob(encodedData); // decode the string</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#dom-windowbase64-atob', 'WindowBase64.atob()')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>No change since the latest snapshot, {{SpecName("HTML5.1")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', '#dom-windowbase64-atob', 'WindowBase64.atob()')}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>Snapshot of {{SpecName("HTML WHATWG")}}. No change.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5 W3C", "#dom-windowbase64-atob", "WindowBase64.atob()")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Snapshot of {{SpecName("HTML WHATWG")}}. Creation of <code>WindowBase64</code> (properties where on the target before it).</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(1)}}[1][2]</td>
+   <td>10</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(1)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1]  <code>atob()</code> is also available to XPCOM components implemented in JavaScript, even though <code><a href="/en-US/docs/DOM/window">window</a></code> is not the global object in components.</p>
+
+<p>[2] Starting with <a href="/en-US/Firefox/Releases/27/Site_Compatibility">Firefox 27</a>, this <code>atob()</code> method ignores all space characters in the argument to comply with the latest HTML5 spec. ({{ bug(711180) }})</p>
+
+<h2 id="See_also" name="See_also">See also</h2>
+
+<ul>
+ <li><a href="/Web/API/WindowBase64/Base64_encoding_and_decoding">Base64 encoding and decoding</a></li>
+ <li><a href="/en-US/docs/data_URIs"><code>data</code> URIs</a></li>
+ <li>{{domxref("window.btoa()")}}</li>
+ <li><a href="/en-US/docs/Components.utils.importGlobalProperties">Components.utils.importGlobalProperties</a></li>
+</ul>
diff --git a/files/es/web/api/caches/index.html b/files/es/web/api/caches/index.html
new file mode 100644
index 0000000000..db56d9611d
--- /dev/null
+++ b/files/es/web/api/caches/index.html
@@ -0,0 +1,128 @@
+---
+title: WindowOrWorkerGlobalScope.caches
+slug: Web/API/caches
+translation_of: Web/API/WindowOrWorkerGlobalScope/caches
+original_slug: Web/API/WindowOrWorkerGlobalScope/caches
+---
+<p>{{APIRef()}}{{SeeCompatTable}}</p>
+
+<p>La propiedad de sólo-lectura <code><strong>caches</strong></code>, de la interfaz {{domxref("WindowOrWorkerGlobalScope")}}, devuelve el objeto {{domxref("CacheStorage")}} asociado al contexto actual. Este objeto habilita funcionalidades como guardar assets para su utilización <em>offline</em>, y generar respuestas personalizadas a las peticiones.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">var <em>myCacheStorage</em> = self.caches; // or just caches
+</pre>
+
+<h3 id="Valor">Valor</h3>
+
+<p>Un objeto {{domxref("CacheStorage")}}.</p>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<p>El siguiente ejemplo muestra la forma en la que utilizarías una cache en un contexto de <a href="/en-US/docs/Web/API/Service_Worker_API">service worker</a> para guardar assets <em>offline</em>.</p>
+
+<pre class="brush: js">this.addEventListener('install', function(event) {
+  event.waitUntil(
+    caches.open('v1').then(function(cache) {
+      return cache.addAll(
+        '/sw-test/',
+        '/sw-test/index.html',
+        '/sw-test/style.css',
+        '/sw-test/app.js',
+        '/sw-test/image-list.js',
+        '/sw-test/star-wars-logo.jpg',
+        '/sw-test/gallery/',
+        '/sw-test/gallery/bountyHunters.jpg',
+        '/sw-test/gallery/myLittleVader.jpg',
+        '/sw-test/gallery/snowTroopers.jpg'
+      );
+    })
+  );
+});</pre>
+
+<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('Service Workers', '#self-caches', 'caches')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Definido en un <code>WindowOrWorkerGlobalScope</code> parcial en la última especificación.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Service Workers')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Definición inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_Navegadores">Compatibilidad de Navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte Básico</td>
+   <td>40.0</td>
+   <td>{{CompatGeckoDesktop(42)}}<br>
+    {{CompatGeckoDesktop(52)}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Chrome para Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte Básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(42)}}<br>
+    {{CompatGeckoMobile(52)}}<sup>[1]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] las <code>caches</code> se definen ahora en el mixin {{domxref("WindowOrWorkerGlobalScope")}}.</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/ServiceWorker_API">Service Workers</a></li>
+ <li><a href="/en-US/docs/Web/API/Web_Workers_API">Web Workers</a></li>
+ <li>{{domxref("CacheStorage")}}</li>
+ <li>{{domxref("Cache")}}</li>
+</ul>
diff --git a/files/es/web/api/clearinterval/index.html b/files/es/web/api/clearinterval/index.html
new file mode 100644
index 0000000000..df9ac60205
--- /dev/null
+++ b/files/es/web/api/clearinterval/index.html
@@ -0,0 +1,44 @@
+---
+title: WindowTimers.clearInterval()
+slug: Web/API/clearInterval
+translation_of: Web/API/WindowOrWorkerGlobalScope/clearInterval
+original_slug: Web/API/WindowOrWorkerGlobalScope/clearInterval
+---
+<div>
+<div>{{APIRef("HTML DOM")}}</div>
+</div>
+
+<p>Cancela una acción reiterativa que se inició mediante una llamada a {{domxref("window.setInterval", "setInterval")}}.</p>
+
+<h2 id="Syntax" name="Syntax">Sintaxis</h2>
+
+<pre class="syntaxbox"><em>window</em>.clearInterval(<var>intervalID</var>)
+</pre>
+
+<p><code>intervalID</code> es el identificador de la acción reiterativa que se desea cancelar. Este ID se obtiene a partir de <code>setInterval()</code>.</p>
+
+<h2 id="Example" name="Example">Ejemplo</h2>
+
+<p>Vea el <a href="/en-US/docs/DOM/window.setInterval#Example" title="DOM/window.setInterval#Example">ejemplo de<code> setInterval()</code></a>.</p>
+
+<h2 id="Specification" name="Specification">Especificación</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'timers.html#timers', 'clearInterval')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="See_also" name="See_also">Vea también</h2>
+
+<ul>
+ <li><a href="/en-US/docs/JavaScript/Timers" title="JavaScript/Timers">JavaScript timers</a></li>
+ <li>{{domxref("WindowTimers.setTimeout")}}</li>
+ <li>{{domxref("WindowTimers.setInterval")}}</li>
+ <li>{{domxref("WindowTimers.clearTimeout")}}</li>
+ <li>{{domxref("window.requestAnimationFrame")}}</li>
+ <li><a href="/en-US/docs/JavaScript/Timers/Daemons" title="JavaScript/Timers/Daemons"><em>Daemons</em> management</a></li>
+</ul>
diff --git a/files/es/web/api/cleartimeout/index.html b/files/es/web/api/cleartimeout/index.html
new file mode 100644
index 0000000000..d86391e675
--- /dev/null
+++ b/files/es/web/api/cleartimeout/index.html
@@ -0,0 +1,64 @@
+---
+title: window.clearTimeout
+slug: Web/API/clearTimeout
+translation_of: Web/API/WindowOrWorkerGlobalScope/clearTimeout
+original_slug: Web/API/WindowOrWorkerGlobalScope/clearTimeout
+---
+<div>{{ApiRef}}</div>
+
+<h2 id="Summary" name="Summary">Resumen</h2>
+
+<p>Borra el retraso asignado por {{domxref("window.setTimeout","window.setTimeout()")}}.</p>
+
+<h2 id="Syntax" name="Syntax">Sintaxis</h2>
+
+<pre class="syntaxbox">window.clearTimeout(<em>timeoutID</em>)
+</pre>
+
+<ul>
+ <li><code>timeoutID</code> es el ID del timeout que desee borrar, retornado por {{domxref("window.setTimeout","window.setTimeout()")}}.</li>
+</ul>
+
+<h2 id="Example" name="Example">Ejemplo</h2>
+
+<p>Ejecute el script de abajo en el contexto de una página web y haga clic en la página una vez. Verá un mensaje emergente en un segundo. Si permanece haciendo clic en la página cada segundo, la alerta nunca aparece.</p>
+
+<pre class="brush: js">var alarm = {
+  remind: function(aMessage) {
+    alert(aMessage);
+    delete this.timeoutID;
+  },
+
+  setup: function() {
+    this.cancel();
+    var self = this;
+    this.timeoutID = window.setTimeout(function(msg) {self.remind(msg);}, 1000, "Wake up!");
+  },
+
+  cancel: function() {
+    if(typeof this.timeoutID == "number") {
+      window.clearTimeout(this.timeoutID);
+      delete this.timeoutID;
+    }
+  }
+};
+window.onclick = function() { alarm.setup() };</pre>
+
+<h2 id="Notes" name="Notes">Notas</h2>
+
+<p>Pasar un ID inválido a <code>clearTimeout</code> no tiene ningún efecto (y no lanza una excepción).</p>
+
+<h2 id="Specification" name="Specification">Especificación</h2>
+
+<p>DOM Nivel 0. Especificado en <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/timers.html#dom-windowtimers-cleartimeout">HTML5</a>.</p>
+
+<h2 id="See_also" name="See_also">Vea también</h2>
+
+<ul>
+ <li><a href="/en-US/docs/JavaScript/Timers" title="JavaScript/Timers">JavaScript timers</a></li>
+ <li>{{domxref("window.setTimeout")}}</li>
+ <li>{{domxref("window.setInterval")}}</li>
+ <li>{{domxref("window.clearInterval")}}</li>
+ <li>{{domxref("window.requestAnimationFrame")}}</li>
+ <li><a href="/en-US/docs/JavaScript/Timers/Daemons" title="JavaScript/Timers/Daemons"><em>Daemons</em> management</a></li>
+</ul>
diff --git a/files/es/web/api/createimagebitmap/index.html b/files/es/web/api/createimagebitmap/index.html
new file mode 100644
index 0000000000..4f6c6fabe4
--- /dev/null
+++ b/files/es/web/api/createimagebitmap/index.html
@@ -0,0 +1,109 @@
+---
+title: self.createImageBitmap()
+slug: Web/API/createImageBitmap
+tags:
+  - API
+  - Canvas
+  - DOM
+  - Referencia
+  - WindowOrWorkerGlobalScope
+  - createImageBitmap
+  - metodo
+translation_of: Web/API/WindowOrWorkerGlobalScope/createImageBitmap
+original_slug: Web/API/WindowOrWorkerGlobalScope/createImageBitmap
+---
+<div>{{APIRef("Canvas API")}}</div>
+
+<p>El método <code><strong>createImageBitmap()</strong></code> crea un <em>bitmap</em> a partir de un recurso especificado, opcionalmente recortado para mostrar únicamente una porción de este. El método existe a nivel global como parte, tanto de las ventanas (<em>window</em>), como de los <em>workers</em>. Este admite una variedad de tipos de entrada, y devuelve una {{domxref("Promise")}} que es resuelta con un {{domxref("ImageBitmap")}}.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">createImageBitmap(<em>image</em>[, options]).then(function(response) { ... });
+createImageBitmap(<em>image, sx, sy, sw, sh</em>[, options]).then(function(response) { ... });</pre>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<dl>
+ <dt><code>image</code></dt>
+ <dd>Un recurso/imagen origen, que puede uno de los siguientes elementos: {{HTMLElement("img")}}, SVG {{SVGElement("image")}}, {{HTMLElement("video")}}, {{HTMLElement("canvas")}}, {{domxref("HTMLImageElement")}}, {{domxref("SVGImageElement")}}, {{domxref("HTMLVideoElement")}}, {{domxref("HTMLCanvasElement")}}, {{domxref("Blob")}}, {{domxref("ImageData")}}, {{domxref("ImageBitmap")}}, o {{domxref("OffscreenCanvas")}}.</dd>
+ <dt><code>sx</code></dt>
+ <dd>La coordenada x del rectángulo que será usado para la extracción del <code>ImageBitmap</code>.</dd>
+ <dt><code>sy</code></dt>
+ <dd>La coordenada y del rectángulo que será usado para la extracción del <code>ImageBitmap</code>.</dd>
+ <dt><code>sw</code></dt>
+ <dd>La anchura del rectángulo que será usado para extraer el <code>ImageBitmap</code>. El valor podría ser negativo.</dd>
+ <dt><code>sh</code></dt>
+ <dd>La altura del rectángulo que será usado para extraer el <code>ImageBitmap</code>. El valor podría ser negativo.</dd>
+ <dt><code>options</code> {{optional_inline}}</dt>
+ <dd>Un objeto que proporciona opciones para la extracción de la imagen. Las opciones posibles son:
+ <ul>
+  <li><code>imageOrientation</code>: Especifica si la imagen debe ser extraida tal y como se muestra, o debe ser volteada verticalmente. Las valores posibles: <code>none</code> (por defecto) o <code>flipY</code>.</li>
+  <li><code>premultiplyAlpha</code>: Especifica si los canales de color del mapa de bits generado deben premultiplicarse por el canal alpha. Uno de: <code>none</code>, <code>premultiply</code>, o <code>default</code> (por defecto).</li>
+  <li><code>colorSpaceConversion</code>: Especifica si la imagen debe ser decodificada usando conversión del espacio de color. Uno de: <code>none</code> o <code>default</code> (por defecto). El valor <code>default</code> indica que se usará la implementación que haya disponible.</li>
+  <li><code>resizeWidth</code>: Un entero largo que especifica la anchura final.</li>
+  <li><code>resizeHeight</code>: Un entero largo que especifica la altura final.</li>
+  <li><code>resizeQuality</code>: Especifica que algorítmo debe ser usado en el redimensionado para alcanzar las dimensiones deseadas. Uno de estos valores: <code>pixelated</code>, <code>low</code> (por defecto), <code>medium</code>, o <code>high</code>.</li>
+ </ul>
+ </dd>
+</dl>
+
+<h3 id="Valor_devuelto">Valor devuelto</h3>
+
+<p>Una {{domxref("Promise")}} que es resuelta con un objeto {{domxref("ImageBitmap")}}, el cual contiene los datos del mapa de bits generado para el rectángulo dado.</p>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<h3 id="Creando_sprites_desde_un_sprite_sheet">Creando <em>sprites</em> desde un <em>sprite sheet</em></h3>
+
+<p>El siguiente ejemplo carga un<em> sprite sheet</em>, extrae los <em>sprites</em>, y muestra cada uno de ellos en el <em>canvas</em>. Un <em>sprite sheet</em> es una imagen que contiene multiples imágenes más pequeñas, que finalmente son utilizadas de manera individual.</p>
+
+<pre class="brush: js  language-js">var canvas = document.getElementById('myCanvas'),
+ctx = canvas.getContext('2d'),
+image = new Image();
+
+// Esperar que el sprite sheet se cargue
+image.onload = function() {
+  Promise.all([
+    // Recortar dos sprites del conjunto
+    createImageBitmap(image, 0, 0, 32, 32),
+    createImageBitmap(image, 32, 0, 32, 32)
+  ]).then(function(sprites) {
+    // Pintar cada uno de los sprites en el canvas
+    ctx.drawImage(sprites[0], 0, 0);
+    ctx.drawImage(sprites[1], 32, 32);
+  });
+}
+
+// Cargar el sprite sheet desde un archivo de imagen
+image.src = 'sprites.png';
+</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('HTML WHATWG', "webappapis.html#dom-createimagebitmap", "createImageBitmap")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+
+
+<p>{{Compat("api.WindowOrWorkerGlobalScope.createImageBitmap")}}</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{domxref("CanvasRenderingContext2D.drawImage()")}}</li>
+ <li>{{domxref("ImageData")}}</li>
+</ul>
diff --git a/files/es/web/api/fetch/index.html b/files/es/web/api/fetch/index.html
new file mode 100644
index 0000000000..0b2f38916a
--- /dev/null
+++ b/files/es/web/api/fetch/index.html
@@ -0,0 +1,178 @@
+---
+title: WindowOrWorkerGlobalScope.fetch()
+slug: Web/API/fetch
+tags:
+  - API
+  - Experimental
+  - Fetch
+  - Fetch API
+  - GlobalFetch
+  - Petición
+  - Referencia
+  - metodo
+  - solicitud
+translation_of: Web/API/WindowOrWorkerGlobalScope/fetch
+original_slug: Web/API/WindowOrWorkerGlobalScope/fetch
+---
+<div>{{APIRef("Fetch API")}}</div>
+
+<p>El método <code><strong>fetch()</strong></code> del mixin {{domxref("WindowOrWorkerGlobalScope")}} lanza el proceso de solicitud de un recurso de la red. Esto devuelve una promesa que resuelve al objeto {{domxref("Response")}} que representa la respuesta a la solicitud realizada.</p>
+
+<p>Tanto {{domxref("Window")}} como {{domxref("WorkerGlobalScope")}} implementan <code>WorkerOrGlobalScope</code>, por lo que el método <code>fetch()</code> está disponible en prácticamente cualquier contexto desde el que se pueda necesitar solicitar un recurso.</p>
+
+<p>Una promesa {{domxref("WindowOrWorkerGlobalScope.fetch","fetch()")}} se rechaza con un {{jsxref("TypeError")}} cuando sucede un error en la red, aunque normalmente significa un tema de permisos o similar. Una comprobación más precisa de una solicitud con <code>fetch()</code> debería comprobar que la promesa se resuelve, y que la propiedad {{domxref("Response.ok")}} tiene valor <code>true</code>. Un estatus HTTP 404 no constituye un error de red.</p>
+
+<p>El método <code>fetch()</code> es controlado por la directiva <code>connect-src</code> de la <a href="/en-US/docs/Security/CSP/CSP_policy_directives">Política de Seguridad de Contenido (Content Security Policy)</a> en lugar de la directiva del recurso que se solicita.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Los parámetros del método <code>fetch()</code> son indénticos a los del constructor de {{domxref("Request.Request","Request()")}}.</p>
+</div>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">Promise&lt;Response&gt; fetch(input[, init]);</pre>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<dl>
+ <dt><em>input</em></dt>
+ <dd>Define el recurso que se quiere solicitar. Puede ser:
+ <ul>
+  <li>Un {{domxref("USVString")}} con la URL del recurso a solicitar. Algunos navegadores aceptan los esquemas <code>blob:</code> y <code>data:</code>.</li>
+  <li>Un objeto {{domxref("Request")}}.</li>
+ </ul>
+ </dd>
+ <dt><em>init</em> {{optional_inline}}</dt>
+ <dd>Objeto de opciones que contiene configuraciones para personalizar la solicitud. Estas opciones pueden ser:
+ <ul>
+  <li><code>method</code>: El método de solicitud, p.ej., <code>GET</code>, <code>POST</code>.</li>
+  <li><code>headers</code>: Cualquier cabecera que se quiera añadir a la solicitud, contenidas en un objeto {{domxref("Headers")}} o un objeto literal con valores {{domxref("ByteString")}}.</li>
+  <li><code>body</code>: Cualquier cuerpo que se quiera añadir a la solicitud: puede ser un {{domxref("Blob")}}, {{domxref("BufferSource")}}, {{domxref("FormData")}}, {{domxref("URLSearchParams")}}, u objeto {{domxref("USVString")}}. Nótese que las solicitudes con métodos <code>GET</code> o <code>HEAD</code> no pueden tener cuerpo.</li>
+  <li><code>mode</code>: El modo a usar en la solicitud, p.ej., <code>cors</code>, <code>no-cors</code>, o <code>same-origin</code>.</li>
+  <li><code>credentials</code>: Las credenciales que se quieran utilizar para la solicitud: <code>omit</code>, <code>same-origin</code>, o <code>include</code>. Para enviar automáticamente las cookies del dominio actual, debe indicarse esta opción. Desde Chrome 50, esta propiedad también acepta una instancia de {{domxref("FederatedCredential")}} o de {{domxref("PasswordCredential")}}.</li>
+  <li><code>cache</code>: El modo de caché a utilizar en la solicitud: <code>default</code>, <code>no-store</code>, <code>reload</code>, <code>no-cache</code>, <code>force-cache</code>, o <code>only-if-cached</code>.</li>
+  <li><code>redirect</code>: El modo de redirección a usar: <code>follow</code> (seguir redirecciones automáticamente), <code>error</code> (abortar si sucede un error durante la redirección), o <code>manual</code> (gestionar redirecciones manualmente). El valor por defecto en Chrome es <code>follow</code> (hasta la versión 46 era <code>manual</code>).</li>
+  <li><code>referrer</code>: Un {{domxref("USVString")}} que especifique <code>no-referrer</code>, <code>client</code>, o una URL. El valor por defecto es <code>client</code>.</li>
+  <li><code>referrerPolicy</code>: Especifica el valor de la cabecera HTTP referer. Puede ser <code>no-referrer</code>, <code>no-referrer-when-downgrade</code>, <code>origin</code>, <code>origin-when-cross-origin</code>, <code>unsafe-url</code>.</li>
+  <li><code>integrity</code>: Contiene el valor de <a href="/en-US/docs/Web/Security/Subresource_Integrity">integridad de subrecurso (subresource integrity)</a> de la solicitud (p.ej., <code>sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE=</code>).</li>
+  <li><code>keepalive</code>: La opción <code>keepalive</code> se puede usar para permitir que recurso dure más que la página. Las solicitudes con el indicador <code>keepalive</code> son un reemplazo de la API {{domxref("Navigator.sendBeacon()")}}. </li>
+  <li><code>signal</code>: Una instancia de objeto {{domxref("AbortSignal")}}; permite comunicarse con con una solicitud vigente y abortarla si se desea via {{domxref("AbortController")}}.</li>
+ </ul>
+ </dd>
+</dl>
+
+<h3 id="Return_value">Return value</h3>
+
+<p>Una {{domxref("Promise")}} que resuelve a un objeto {{domxref("Response")}}.</p>
+
+<h3 id="Excepciones">Excepciones</h3>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col"><strong>Tipo</strong></th>
+   <th scope="col"><strong>Descriptción</strong></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>AbortError</code></td>
+   <td>Se abortó la solicitud (mediante {{domxref("AbortController.abort()")}}).</td>
+  </tr>
+  <tr>
+   <td><code>TypeError</code></td>
+   <td>Desde <a href="/en-US/docs/Mozilla/Firefox/Releases/43">Firefox 43</a>, <code>fetch()</code> lanza un <code>TypeError</code> si la URL tiene credenciales, como en <code>http://usuario:clave@ejemplo.com</code>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<p>En el ejemplo de <a href="https://github.com/mdn/fetch-examples/tree/master/fetch-request">solicitud con Request</a> (ver <a href="https://mdn.github.io/fetch-examples/fetch-request/">Fetch Request live</a>) creamos un nuevo objeto {{domxref("Request")}} usando el constructor pertinente, y realizamos una solicitud usando <code>fetch()</code>. Dado que estamos solicitando una imagen, ejecutamos {{domxref("Body.blob()")}} en la respuesta para darle el tipo MIME correspondiente para que sea gestionada apropiadamente, luego creamos un objeto URL de ella para mostrarla en un elemento {{htmlelement("img")}}.</p>
+
+<pre class="brush: js">var miImagen = document.querySelector('img');
+
+var miSolicitud = new Request('flores.jpg');
+
+fetch(miSolicitud).then(function(respuesta) {
+  return respuesta.blob();
+}).then(function(respuesta) {
+  var objeto = URL.createObjectURL(respuesta);
+  miImagen.src = objeto;
+});</pre>
+
+<p>En el ejemplo de <a href="https://github.com/mdn/fetch-examples/blob/master/fetch-with-init-then-request/index.html">solicitud con inicializador y Request</a> (ver <a href="https://mdn.github.io/fetch-examples/fetch-with-init-then-request/">Fetch Request init live</a>) hacemos lo mismo pero además pasamos un objeto inicializador cuando invocamos el <code>fetch()</code>:</p>
+
+<pre class="brush: js">var miImagen = document.querySelector('img');
+
+var misCabeceras = new Headers();
+misCabeceras.append('Content-Type', 'image/jpeg');
+
+var miInicializador = { method: 'GET',
+                        headers: misCabeceras,
+                        mode: 'cors',
+                        cache: 'default' };
+
+var miSolicitud = new Request('flores.jpg');
+
+fetch(miSolicitud,miInicializador).then(function(respuesta) {
+  ...
+});</pre>
+
+<p>Nótese que también podríamos pasar el objeto inicializador con el constructor de <code>Request</code> para conseguir el mismo efecto, p.ej.:</p>
+
+<pre class="brush: js">var miSolicitud = new Request('flores.jpg', miInicializador);</pre>
+
+<p>También se puede usar un objeto literal a modo de <code>headers</code> en <code>init</code>.</p>
+
+<pre class="brush: js">var miInicializador = { method: 'GET',
+                        headers: {
+                            'Content-Type': 'image/jpeg'
+                        },
+                        mode: 'cors',
+                        cache: 'default' };
+
+var myRequest = new Request('flowers.jpg', miInicializador);
+</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">Comentarios</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Fetch','#fetch-method','fetch()')}}</td>
+   <td>{{Spec2('Fetch')}}</td>
+   <td>Definida parcialmente en <code>WindowOrWorkerGlobalScope</code> en la especificación más reciente.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Fetch','#dom-global-fetch','fetch()')}}</td>
+   <td>{{Spec2('Fetch')}}</td>
+   <td>Definición inicial</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Credential Management')}}</td>
+   <td>{{Spec2('Credential Management')}}</td>
+   <td>Añade una instancia de {{domxref("FederatedCredential")}} o {{domxref("PasswordCredential")}} como valor posible para <code>init.credentials</code>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+
+
+<p>{{Compat("api.WindowOrWorkerGlobalScope.fetch")}}</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Fetch_API">Fetch API</a></li>
+ <li><a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/Access_control_CORS">Control de acceso HTTP (CORS)</a></li>
+ <li><a href="/en-US/docs/Web/HTTP">HTTP</a></li>
+</ul>
diff --git a/files/es/web/api/indexeddb/index.html b/files/es/web/api/indexeddb/index.html
new file mode 100644
index 0000000000..6fa82a2310
--- /dev/null
+++ b/files/es/web/api/indexeddb/index.html
@@ -0,0 +1,142 @@
+---
+title: WindowOrWorkerGlobalScope.indexedDB
+slug: Web/API/indexedDB
+translation_of: Web/API/WindowOrWorkerGlobalScope/indexedDB
+original_slug: Web/API/WindowOrWorkerGlobalScope/indexedDB
+---
+<p>{{ APIRef() }}</p>
+
+<p>La propiedad <strong><code>indexedDB</code></strong> del mixin {{domxref("WindowOrWorkerGlobalScope")}} proporciona un mecanismo para que las aplicaciones puedan acceder asíncronamente a las capacidades de las bases de datos indexadas.</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="brush: js">var DBOpenRequest = self.indexedDB.open('toDoList');</pre>
+
+<h3 id="Valor">Valor</h3>
+
+<p>Un objeto {{domxref("IDBFactory")}}.</p>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<pre class="brush: js;highlight:[3]">var db;
+function openDB() {
+ var DBOpenRequest = window.indexedDB.open('toDoList');
+ DBOpenRequest.onsuccess = function(e) {
+   db = DBOpenRequest.result;
+ }
+}</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('IndexedDB 2', '#dom-windoworworkerglobalscope-indexeddb', 'indexedDB')}}</td>
+   <td>{{Spec2('IndexedDB 2')}}</td>
+   <td>Definido en un <code>WindowOrWorkerGlobalScope</code> parcial en la última especificación.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('IndexedDB', '#widl-IDBEnvironment-indexedDB', 'indexedDB')}}</td>
+   <td>{{Spec2('IndexedDB')}}</td>
+   <td>Definición inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidad de Navegadores</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>23{{property_prefix("webkit")}}<br>
+    24</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>10 {{property_prefix("moz")}}<br>
+    {{CompatGeckoDesktop("16.0")}}<br>
+    {{CompatGeckoDesktop("52.0")}}<sup>[1]</sup></td>
+   <td>10, parcial</td>
+   <td>15</td>
+   <td>7.1</td>
+  </tr>
+  <tr>
+   <td>Disponible en los workers</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("37.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>4.4</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("22.0")}}<br>
+    {{CompatGeckoMobile("52.0")}}<sup>[1]</sup></td>
+   <td>1.0.1</td>
+   <td>10</td>
+   <td>22</td>
+   <td>8</td>
+  </tr>
+  <tr>
+   <td>Disponible en los workers</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("37.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] <code>indexedDB</code> se define ahora en el mixin {{domxref("WindowOrWorkerGlobalScope")}}.</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/IndexedDB_API/Using_IndexedDB">Utilización de IndexedDB</a></li>
+ <li>Iniciando transacciones: {{domxref("IDBDatabase")}}</li>
+ <li>Usando transacciones: {{domxref("IDBTransaction")}}</li>
+ <li>Estableciendo un rango de claves: {{domxref("IDBKeyRange")}}</li>
+ <li>Recuperación y edición de tus datos: {{domxref("IDBObjectStore")}}</li>
+ <li>Utilización de cursores: {{domxref("IDBCursor")}}</li>
+ <li>Ejemplo de referencia: <a class="external" href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a class="external" href="http://mdn.github.io/to-do-notifications/">ver ejemplo <em>live</em></a>.)</li>
+</ul>
diff --git a/files/es/web/api/issecurecontext/index.html b/files/es/web/api/issecurecontext/index.html
new file mode 100644
index 0000000000..a1e631007e
--- /dev/null
+++ b/files/es/web/api/issecurecontext/index.html
@@ -0,0 +1,87 @@
+---
+title: WindowOrWorkerGlobalScope.isSecureContext
+slug: Web/API/isSecureContext
+translation_of: Web/API/WindowOrWorkerGlobalScope/isSecureContext
+original_slug: Web/API/WindowOrWorkerGlobalScope/isSecureContext
+---
+<p>{{APIRef()}}{{SeeCompatTable}}</p>
+
+<p>La propiedad de sólo-lectura <code><strong>isSecureContext</strong></code>, de la interface  {{domxref("WindowOrWorkerGlobalScope")}} Devuelve un booleano indicando si el contexto actual es seguro (<code>true</code>) or not (<code>false</code>).</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">var <em>isItSecure</em> = self.isSecureContext; // or just isSecureContext
+</pre>
+
+<h3 id="Valor">Valor</h3>
+
+<p>Un {{domxref("Boolean")}}.</p>
+
+<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('Secure Contexts', 'webappapis.html#dom-origin', 'WindowOrWorkerGlobalScope.isSecureContext')}}</td>
+   <td>{{Spec2('Secure Contexts')}}</td>
+   <td>Definición inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_Navegadores">Compatibilidad de Navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatChrome(55)}}</td>
+   <td>{{CompatGeckoDesktop(52)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android Webview</th>
+   <th>Chrome para Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{CompatChrome(55)}}</td>
+   <td>{{CompatChrome(55)}}</td>
+   <td>{{CompatGeckoMobile(52)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/es/web/api/mouseevent/pagex/index.html b/files/es/web/api/mouseevent/pagex/index.html
new file mode 100644
index 0000000000..7eca1c67bb
--- /dev/null
+++ b/files/es/web/api/mouseevent/pagex/index.html
@@ -0,0 +1,103 @@
+---
+title: event.pageX
+slug: Web/API/MouseEvent/pageX
+tags:
+  - DOM
+  - Referencia_DOM_de_Gecko
+  - Todas_las_Categorías
+translation_of: Web/API/UIEvent/pageX
+original_slug: Web/API/UIEvent/pageX
+---
+<p>{{ ApiRef() }}</p>
+<h3 id="Sumario" name="Sumario">Sumario</h3>
+<p>Retorna la coordena horizontal del evento, relativo al documento completo.</p>
+<h3 id="Sintaxis" name="Sintaxis">Sintaxis</h3>
+<pre class="eval"><i>pageX</i> =<i>event</i>.pageX;
+</pre>
+<p><code>pageX</code> es un valor entero expresado en pixels para la corrdenada X del puntero del ratón, relativo al documento entero, cuando se produjo el evento. Esta propiedad toma en cuenta la barra de desplazamiento horizontal de la página.</p>
+<h3 id="Ejemplo" name="Ejemplo">Ejemplo</h3>
+<pre>&lt;html&gt;
+&lt;head&gt;
+&lt;title&gt;pageX\pageY &amp; layerX\layerY example&lt;/title&gt;
+
+&lt;script type="text/javascript"&gt;
+
+function showCoords(evt){
+  var form = document.forms.form_coords;
+  var parent_id = evt.target.parentNode.id;
+  form.parentId.value = parent_id;
+  form.pageXCoords.value = evt.pageX;
+  form.pageYCoords.value = evt.pageY;
+  form.layerXCoords.value = evt.layerX;
+  form.layerYCoords.value = evt.layerY;
+}
+
+&lt;/script&gt;
+
+&lt;style type="text/css"&gt;
+
+ #d1 {
+  border: solid blue 1px;
+  padding: 20px;
+ }
+
+ #d2 {
+  position: absolute;
+  top: 180px;
+  left: 80%;
+  right:auto;
+  width: 40%;
+  border: solid blue 1px;
+  padding: 20px;
+ }
+
+ #d3 {
+  position: absolute;
+  top: 240px;
+  left: 20%;
+  width: 50%;
+  border: solid blue 1px;
+  padding: 10px;
+ }
+
+&lt;/style&gt;
+&lt;/head&gt;
+
+&lt;body onmousedown="showCoords(event)"&gt;
+
+&lt;p&gt;To display the mouse coordinates please click anywhere on the page.&lt;/p&gt;
+
+&lt;div id="d1"&gt;
+&lt;span&gt;This is an un-positioned div so clicking it will return
+layerX/layerY values almost the same as pageX/PageY values.&lt;/span&gt;
+&lt;/div&gt;
+
+&lt;div id="d2"&gt;
+&lt;span&gt;This is a positioned div so clicking it will return layerX/layerY
+values that are relative to the top-left corner of this positioned
+element. Note the pageX\pageY properties still return the
+absolute position in the document, including page scrolling.&lt;/span&gt;
+
+&lt;span&gt;Make the page scroll more! This is a positioned div so clicking it
+will return layerX/layerY values that are relative to the top-left
+corner of this positioned element. Note the pageX\pageY properties still
+return the absolute position in the document, including page
+scrolling.&lt;/span&gt;
+&lt;/div&gt;
+
+&lt;div id="d3"&gt;
+&lt;form name="form_coords"&gt;
+ Parent Element id: &lt;input type="text" name="parentId" size="7" /&gt;&lt;br /&gt;
+ pageX:&lt;input type="text" name="pageXCoords" size="7" /&gt;
+ pageY:&lt;input type="text" name="pageYCoords" size="7" /&gt;&lt;br /&gt;
+ layerX:&lt;input type="text" name="layerXCoords" size="7" /&gt;
+ layerY:&lt;input type="text" name="layerYCoords" size="7" /&gt;
+&lt;/form&gt;
+&lt;/div&gt;
+
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+<h3 id="Specificaci.C3.B3n" name="Specificaci.C3.B3n">Specificación</h3>
+<p>No es parte del estándar público.</p>
+<p>{{ languages( { "pl": "pl/DOM/event.pageX", "en": "en/DOM/event.pageX" } ) }}</p>
diff --git a/files/es/web/api/setinterval/index.html b/files/es/web/api/setinterval/index.html
new file mode 100644
index 0000000000..381711900a
--- /dev/null
+++ b/files/es/web/api/setinterval/index.html
@@ -0,0 +1,693 @@
+---
+title: WindowTimers.setInterval()
+slug: Web/API/setInterval
+tags:
+  - API
+  - DOM
+  - Gecko
+  - Intervalos
+  - Method
+  - Temporizadores
+  - Temporizadores de JavaScript
+  - WindowTimers
+  - setInterval
+translation_of: Web/API/WindowOrWorkerGlobalScope/setInterval
+original_slug: Web/API/WindowOrWorkerGlobalScope/setInterval
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<div>Ejecuta una función o un fragmento de código de forma repetitiva cada vez que termina el periodo de tiempo determinado. Devuelve un ID de proceso.</div>
+
+<div></div>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox notranslate"><em>var procesoID</em> = window.setInterval(<em>función</em>, <em>intervaloDeTiempo</em>[, <em>parámetro1</em>, <em>parámetro2</em>, ... , parámetroN]);
+<em>var procesoID</em> = window.setInterval(<em>código</em>, <em>intervaloDeTiempo</em>);
+</pre>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<dl>
+ <dt><code>función</code></dt>
+ <dd>La {{jsxref("function")}} que será ejecutada cada <code>intervaloDeTiempo</code> milisegundos.</dd>
+ <dt><code>código</code></dt>
+ <dd>Una sintaxis opcional permite introducir una cadena en lugar de una función, la cual es evaluada y ejecutada cada <code>intervaloDeTiempo</code> milisegundos. Se recomienda evitar esta sintaxis por la misma razón por la que el comando {{jsxref("eval", "eval()")}} conlleva problemas de seguridad.</dd>
+ <dt><code>intervaloDeTiempo</code></dt>
+ <dd>El tiempo en milisegundos (1/1000 de segundo, ms) que se debe esperar entre cada ejecución de la función o del código. Si el valor es menor que 10, se usará 10 en su lugar. El tiempo entre cada ejecución puede ser mayor al que indicamos, para mayor información puedes revisar el siguiente artículo: {{SectionOnPage("/en-US/docs/Web/API/WindowTimers/setTimeout", "Reasons for delays longer than specified")}}.</dd>
+ <dt>
+ <div class="note">El parámetro <strong>intervaloDeTiempo</strong> es convertido en un entero de 32 bits con signo en el IDL, por lo que el valor más grande que puede tener es 2,147,483,647 milisegundos, aproximadamente 24.8 días.</div>
+ </dt>
+ <dt><code>parámetro1, ..., parámetroN</code> {{optional_inline}}</dt>
+ <dd>Parámetros adicionales que se pasan a la función a ejecutar.</dd>
+</dl>
+
+<div class="note">
+<p>En Internet Explorer 9 y anteriores no es posible pasar más parámetros mediante esta sintaxis. Si quieres activar esta funcionalidad en dichos navegadores deberás usar un polyfill (entra en la sección <a href="#Callback_arguments">Callback arguments</a>).</p>
+</div>
+
+<h3 id="Valor_de_Retorno">Valor de Retorno</h3>
+
+<p>El valor de retorno <code>procesoID</code> es un valor numérico distinto de cero que identifica al temporizador que fue creado al llamar <code>setInterval()</code>; este valor puede ser usado como parámetro en la función {{domxref("Window.clearInterval()")}} para detener el temporizador. Las funciones <code>setInterval()</code> y {{domxref("WindowTimers.setTimeout", "setTimeout()")}} comparten la misma pila de IDs, por lo que, técnicamente, los comandos <code>clearInterval()</code> y {{domxref("WindowTimers.clearTimeout", "clearTimeout()")}} pueden usarse indiscriminadamente. Sin embargo, por motivos de claridad y mantenimiento, es importante usarlos como corresponde.</p>
+
+<div class="blockIndicator note">
+<p><strong>Nota:</strong> El argumento <code>intervaloDeTiempo</code> se convierte aun entero con signo de 32 bits. Esto limita efectivamente al <code>intervaloDeTiempo</code> a valores de 2147483647 ms, ya que se especifica como entero con signo en el IDL.</p>
+</div>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Ejemplo_1_Sintaxis_básica">Ejemplo 1: Sintaxis básica</h3>
+
+<p>El siguiente ejemplo muestra la sintaxis básica.</p>
+
+<pre class="brush:js notranslate">var intervalID = window.setInterval(miFuncion, 500, 'Parametro 1', 'Parametro 2');
+
+function miFuncion(a,b) {
+  // Aquí va tu código
+  // Los parámetros son opcionales completamente
+  console.log(a);
+  console.log(b);
+}
+</pre>
+
+<h3 id="Ejemplo_2_Alternando_dos_colores">Ejemplo 2: Alternando dos colores</h3>
+
+<p>El siguiente ejemplo se llama a la función <code>flashtext()</code> una vez por segundo hasta que se presiona el botón Detener.</p>
+
+<pre class="brush:html notranslate">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+  &lt;meta charset="UTF-8" /&gt;
+  &lt;title&gt;Ejemplo de setInterval/clearInterval&lt;/title&gt;
+  &lt;script&gt;
+     var nIntervId;
+
+     function cambiaDeColor() {
+        nIntervId = setInterval(flasheaTexto, 1000);
+     }
+
+     function flasheaTexto() {
+        var oElem = document.getElementById('mi_mensaje');
+        oElem.style.color = oElem.style.color == 'red' ? 'blue' : 'red';
+        //oElem.style.color ... es un operador ternario o condicional
+     }
+
+     function detenerCambioDeColor() {
+        clearInterval(nIntervId);
+     }
+  &lt;/script&gt;
+&lt;/head&gt;
+&lt;body onload="cambiaDeColor();"&gt;
+  &lt;div id="mi_mensaje"&gt;
+    &lt;p&gt;¡Hola mundo!&lt;/p&gt;
+  &lt;/div&gt;
+  &lt;button onclick="detenerCambioDeColor();"&gt;Detener&lt;/button&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h3 id="Ejemplo_3_Simulando_una_máquina_de_escribir">Ejemplo 3: Simulando una máquina de escribir</h3>
+
+<p>El siguiente ejemplo simula una máquina de escribir, primero borra el contenido de una lista de nodos (<code><a href="/en-US/docs/DOM/NodeList">NodeList</a>)</code> que coinciden con un grupo de selectores y después lo escribe lentamente.</p>
+
+<pre class="brush:html notranslate">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+&lt;meta charset="UTF-8" /&gt;
+&lt;title&gt;Máquina de Escribir con JavaScript&lt;/title&gt;
+&lt;script&gt;
+  function maquinaEscribir (sSelector, nRate) {
+
+      function limpiar () {
+        clearInterval(nIntervId);
+        bTyping = false;
+        bStart = true;
+        oCurrent = null;
+        aSheets.length = nIdx = 0;
+      }
+
+      function desplazarse (oSheet, nPos, bEraseAndStop) {
+        if (!oSheet.hasOwnProperty("parts") || aMap.length &lt; nPos) { return true; }
+
+        var oRel, bExit = false;
+
+        if (aMap.length === nPos) { aMap.push(0); }
+
+        while (aMap[nPos] &lt; oSheet.parts.length) {
+          oRel = oSheet.parts[aMap[nPos]];
+
+          desplazarse(oRel, nPos + 1, bEraseAndStop) ? aMap[nPos]++ : bExit = true;
+
+          if (bEraseAndStop &amp;&amp; (oRel.ref.nodeType - 1 | 1) === 3 &amp;&amp; oRel.ref.nodeValue) {
+            bExit = true;
+            oCurrent = oRel.ref;
+            sPart = oCurrent.nodeValue;
+            oCurrent.nodeValue = "";
+          }
+
+          oSheet.ref.appendChild(oRel.ref);
+          if (bExit) { return false; }
+        }
+
+        aMap.length--;
+        return true;
+      }
+
+      function mecanografear () {
+        if (sPart.length === 0 &amp;&amp; desplazarse(aSheets[nIdx], 0, true) &amp;&amp; nIdx++ === aSheets.length - 1) { limpiar(); return; }
+
+        oCurrent.nodeValue += sPart.charAt(0);
+        sPart = sPart.slice(1);
+      }
+
+      function Hoja (oNode) {
+        this.ref = oNode;
+        if (!oNode.hasChildNodes()) { return; }
+        this.parts = Array.prototype.slice.call(oNode.childNodes);
+
+        for (var nChild = 0; nChild &lt; this.parts.length; nChild++) {
+          oNode.removeChild(this.parts[nChild]);
+          this.parts[nChild] = new Hoja(this.parts[nChild]);
+        }
+      }
+
+      var
+        nIntervId, oCurrent = null, bTyping = false, bStart = true,
+        nIdx = 0, sPart = "", aSheets = [], aMap = [];
+
+      this.rate = nRate || 100;
+
+      this.ejecuta = function () {
+        if (bTyping) { return; }
+        if (bStart) {
+          var aItems = document.querySelectorAll(sSelector);
+
+          if (aItems.length === 0) { return; }
+          for (var nItem = 0; nItem &lt; aItems.length; nItem++) {
+            aSheets.push(new Hoja(aItems[nItem]));
+            /* Uncomment the following line if you have previously hidden your elements via CSS: */
+            // aItems[nItem].style.visibility = "visible";
+          }
+
+          bStart = false;
+        }
+
+        nIntervId = setInterval(mecanografear, this.rate);
+        bTyping = true;
+      };
+
+      this.pausa = function () {
+        clearInterval(nIntervId);
+        bTyping = false;
+      };
+
+      this.finaliza = function () {
+        oCurrent.nodeValue += sPart;
+        sPart = "";
+        for (nIdx; nIdx &lt; aSheets.length; desplazarse(aSheets[nIdx++], 0, false));
+        limpiar();
+      };
+  }
+
+    /* usage: */
+    var oTWExample1 = new maquinaEscribir(/* elements: */ "#article, h1, #info, #copyleft", /* frame rate (optional): */ 15);
+
+    /* default frame rate is 100: */
+    var oTWExample2 = new maquinaEscribir("#controls");
+
+    /* you can also change the frame rate value modifying the "rate" property; for example: */
+    // oTWExample2.rate = 150;
+
+    onload = function () {
+      oTWExample1.ejecuta();
+      oTWExample2.ejecuta();
+    };
+&lt;/script&gt;
+&lt;style type="text/css"&gt;
+span.intLink, a, a:visited {
+  cursor: pointer;
+  color: #000000;
+  text-decoration: underline;
+}
+
+#info {
+  width: 180px;
+  height: 150px;
+  float: right;
+  background-color: #eeeeff;
+  padding: 4px;
+  overflow: auto;
+  font-size: 12px;
+  margin: 4px;
+  border-radius: 5px;
+  /* visibility: hidden; */
+}
+&lt;/style&gt;
+&lt;/head&gt;
+
+&lt;body&gt;
+
+&lt;p id="copyleft" style="font-style: italic; font-size: 12px; text-align: center;"&gt;CopyLeft 2012 by &lt;a href="https://developer.mozilla.org/" target="_blank"&gt;Mozilla Developer Network&lt;/a&gt;&lt;/p&gt;
+&lt;p id="controls" style="text-align: center;"&gt;[&amp;nbsp;&lt;span class="intLink" onclick="oTWExample1.ejecuta();"&gt;Ejecutar&lt;/span&gt; | &lt;span class="intLink" onclick="oTWExample1.pausa();"&gt;Pausar&lt;/span&gt; | &lt;span class="intLink" onclick="oTWExample1.finaliza();"&gt;Terminar&lt;/span&gt;&amp;nbsp;]&lt;/p&gt;
+&lt;div id="info"&gt;
+Vivamus blandit massa ut metus mattis in fringilla lectus imperdiet. Proin ac ante a felis ornare vehicula. Fusce pellentesque lacus vitae eros convallis ut mollis magna pellentesque. Pellentesque placerat enim at lacus ultricies vitae facilisis nisi fringilla. In tincidunt tincidunt tincidunt.
+&lt;/div&gt;
+&lt;h1&gt;Maquina de Escribir en JavaScript &lt;/h1&gt;
+
+&lt;div id="article"&gt;
+&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ultrices dolor ac dolor imperdiet ullamcorper. Suspendisse quam libero, luctus auctor mollis sed, malesuada condimentum magna. Quisque in ante tellus, in placerat est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec a mi magna, quis mattis dolor. Etiam sit amet ligula quis urna auctor imperdiet nec faucibus ante. Mauris vel consectetur dolor. Nunc eget elit eget velit pulvinar fringilla consectetur aliquam purus. Curabitur convallis, justo posuere porta egestas, velit erat ornare tortor, non viverra justo diam eget arcu. Phasellus adipiscing fermentum nibh ac commodo. Nam turpis nunc, suscipit a hendrerit vitae, volutpat non ipsum.&lt;/p&gt;
+&lt;form&gt;
+&lt;p&gt;Phasellus ac nisl lorem: &lt;input type="text" /&gt;&lt;br /&gt;
+&lt;textarea style="width: 400px; height: 200px;"&gt;Nullam commodo suscipit lacus non aliquet. Phasellus ac nisl lorem, sed facilisis ligula. Nam cursus lobortis placerat. Sed dui nisi, elementum eu sodales ac, placerat sit amet mauris. Pellentesque dapibus tellus ut ipsum aliquam eu auctor dui vehicula. Quisque ultrices laoreet erat, at ultrices tortor sodales non. Sed venenatis luctus magna, ultricies ultricies nunc fringilla eget. Praesent scelerisque urna vitae nibh tristique varius consequat neque luctus. Integer ornare, erat a porta tempus, velit justo fermentum elit, a fermentum metus nisi eu ipsum. Vivamus eget augue vel dui viverra adipiscing congue ut massa. Praesent vitae eros erat, pulvinar laoreet magna. Maecenas vestibulum mollis nunc in posuere. Pellentesque sit amet metus a turpis lobortis tempor eu vel tortor. Cras sodales eleifend interdum.&lt;/textarea&gt;&lt;/p&gt;
+&lt;p&gt;&lt;input type="submit" value="Send" /&gt;
+&lt;/form&gt;
+&lt;p&gt;Duis lobortis sapien quis nisl luctus porttitor. In tempor semper libero, eu tincidunt dolor eleifend sit amet. Ut nec velit in dolor tincidunt rhoncus non non diam. Morbi auctor ornare orci, non euismod felis gravida nec. Curabitur elementum nisi a eros rutrum nec blandit diam placerat. Aenean tincidunt risus ut nisi consectetur cursus. Ut vitae quam elit. Donec dignissim est in quam tempor consequat. Aliquam aliquam diam non felis convallis suscipit. Nulla facilisi. Donec lacus risus, dignissim et fringilla et, egestas vel eros. Duis malesuada accumsan dui, at fringilla mauris bibStartum quis. Cras adipiscing ultricies fermentum. Praesent bibStartum condimentum feugiat.&lt;/p&gt;
+&lt;p&gt;Nam faucibus, ligula eu fringilla pulvinar, lectus tellus iaculis nunc, vitae scelerisque metus leo non metus. Proin mattis lobortis lobortis. Quisque accumsan faucibus erat, vel varius tortor ultricies ac. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec libero nunc. Nullam tortor nunc, elementum a consectetur et, ultrices eu orci. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a nisl eu sem vehicula egestas.&lt;/p&gt;
+&lt;/div&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<p><a href="/files/3997/typewriter.html">Observa este ejemplo en acción</a>. Ver más: <a href="/en-US/docs/DOM/window.clearInterval"><code>clearInterval()</code></a>.</p>
+
+<h2 id="Argumentos_de_Callback">Argumentos de Callback</h2>
+
+<p>Como se mencionó previamente Internet Explorer version 9 y anteriores no soportan el pasar argumentos a la función Callback en <code>setTimeout()</code> ni en <code>setInterval()</code>. El siguiente código específico de Internet Explorer muestra un método de superar esta limitante. Para usarlo basta añadir el código marcado al inicio de tu script.</p>
+
+<pre class="brush:js notranslate">/*\
+|*|
+|*|  IE-specific polyfill that enables the passage of arbitrary arguments to the
+|*|  callback functions of javascript timers (HTML5 standard syntax).
+|*|
+|*|  https://developer.mozilla.org/en-US/docs/Web/API/window.setInterval
+|*|  https://developer.mozilla.org/User:fusionchess
+|*|
+|*|  Syntax:
+|*|  var timeoutID = window.setTimeout(func, delay[, param1, param2, ...]);
+|*|  var timeoutID = window.setTimeout(code, delay);
+|*|  var intervalID = window.setInterval(func, delay[, param1, param2, ...]);
+|*|  var intervalID = window.setInterval(code, delay);
+|*|
+\*/
+
+if (document.all &amp;&amp; !window.setTimeout.isPolyfill) {
+  var __nativeST__ = window.setTimeout;
+  window.setTimeout = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) {
+    var aArgs = Array.prototype.slice.call(arguments, 2);
+    return __nativeST__(vCallback instanceof Function ? function () {
+      vCallback.apply(null, aArgs);
+    } : vCallback, nDelay);
+  };
+  window.setTimeout.isPolyfill = true;
+}
+
+if (document.all &amp;&amp; !window.setInterval.isPolyfill) {
+  var __nativeSI__ = window.setInterval;
+  window.setInterval = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) {
+    var aArgs = Array.prototype.slice.call(arguments, 2);
+    return __nativeSI__(vCallback instanceof Function ? function () {
+      vCallback.apply(null, aArgs);
+    } : vCallback, nDelay);
+  };
+  window.setInterval.isPolyfill = true;
+}
+</pre>
+
+<p>Otra posible solución es el usar funciones anónimas para llamar al Callback, aunque esta solución es un poco más cara. Ejemplo:</p>
+
+<pre class="brush:js notranslate">var intervalID = setInterval(function() { myFunc("one", "two", "three"); }, 1000);</pre>
+
+<p>También puedes hacer uso de <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind">function's bind</a>. Ejemplo:</p>
+
+<pre class="brush:js notranslate">var intervalID = setInterval(function(arg1) {}.bind(undefined, 10), 1000);</pre>
+
+<p>{{h3_gecko_minversion("Inactive tabs", "5.0")}}</p>
+
+<p>A partir de Gecko 5.0 {{geckoRelease("5.0")}}, los intervalos no se disparan más de una vez por segundo en las pestañas inactivas.</p>
+
+<h2 id="Problemas_usando_this">Problemas usando "<a href="/en-US/docs/Web/JavaScript/Reference/Operators/this"><code>this</code></a>"</h2>
+
+<p>Cuando pasas el método de un objeto a la función <code>setInterval()</code> éste es invocado fuera de su contexto. Esto puede crear un valor de <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this"><code>this</code></a> que puede no ser el esperado. Este problema es abordado en detalle en <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this#As_an_object_method">JavaScript reference</a>.</p>
+
+<h3 id="Explicación">Explicación</h3>
+
+<p>Cuando <code>setInterval() o setTimeOut()</code> ejecuta un determinado código o función, ésta corre en un contexto de ejecución separado al de la función en la que se creó dicho temporizador. Por esta razón a la palabra clave <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this"><code>this</code></a> se le asigna el valor del objeto <code>window</code> (o el objeto <code>global</code>), no es igual que usar <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this"><code>this</code></a> dentro de una fuinción que invoque a <code>setTimeOut()</code>. Observa el siguiente ejemplo (que utiliza <code>setTimeOut()</code> en lugar de <code>setInterval()</code> – el problema, de hecho, es el mismo para ambos temporizadores):</p>
+
+<pre class="brush:js notranslate">miArreglo = ["cero", "uno", "dos"];
+
+miArreglo.miMetodo = function (sPropiedad) {
+    alert(arguments.length &gt; 0 ? this[sPropiedad] : this);
+};
+
+miArreglo.miMetodo(); // imprime "cero,uno,dos"
+miArreglo.miMetodo(1); // imprime "uno"
+setTimeout(miArreglo.miMetodo, 1000); // imprime "[object Window]" despues de 1 segundo
+setTimeout(miArreglo.miMetodo, 1500, "1"); // imprime "undefined" despues de 1,5 segundos
+// tratemos de pasar el objeto 'this'
+setTimeout.call(miArreglo, miArreglo.miMetodo, 2000); // error: "NS_ERROR_XPC_BAD_OP_ON_WN_PROTO: Illegal operation on WrappedNative prototype object"
+setTimeout.call(miArreglo, miArreglo.miMetodo, 2500, 2); // same error</pre>
+
+<p>Como puedes ver no hay forma de pasar el objeto <code>this</code> a la función de Callback en la versión anterior de JavaScript.</p>
+
+<h3 id="Una_posible_solución">Una posible solución</h3>
+
+<p>Una posible alternativa para resolver ésto es reemplazar las dos funciones globales nativas <code>setTimeout()</code> y <code>setInterval()</code> con las siguientes funciones no nativas que permiten su ejecución a través del método <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Function/call"><code>Function.prototype.call</code></a>. El siguiente ejemplo muestra una posible sustitución:</p>
+
+<pre class="brush:js notranslate">// Permite el pase del objeto 'this' a través de temporizadores JavaScript
+
+var __nativeST__ = window.setTimeout, __nativeSI__ = window.setInterval;
+
+window.setTimeout = function (vCallback, nDelay /*, argumentoAPasar1, argumentuAPasar2, etc. */) {
+  var oThis = this, aArgs = Array.prototype.slice.call(arguments, 2);
+  return __nativeST__(vCallback instanceof Function ? function () {
+    vCallback.apply(oThis, aArgs);
+  } : vCallback, nDelay);
+};
+
+window.setInterval = function (vCallback, nDelay /*, argumentoAPasar1, argumentoAPasar2, etc. */) {
+  var oThis = this, aArgs = Array.prototype.slice.call(arguments, 2);
+  return __nativeSI__(vCallback instanceof Function ? function () {
+    vCallback.apply(oThis, aArgs);
+  } : vCallback, nDelay);
+};
+</pre>
+
+<div class="note">Estos dos reemplazos también permiten el camino estándar en HTML5 de pasar argumentos arbitrarios a las funciones de Callback de los temporizadores dentro de IE. Por lo tanto, pueden utilizarse como rellenos (polyfills) <em>no estándar</em>. Para más información vea <a href="#Callback_arguments">callback arguments paragraph</a>.</div>
+
+<p>Prueba de nueva funcionalidad:</p>
+
+<pre class="brush:js notranslate">miArreglo = ["cero", "uno", "dos"];
+
+miArreglo.miMetodo = function (sProperty) {
+    alert(arguments.length &gt; 0 ? this[sProperty] : this);
+};
+
+setTimeout(alert, 1500, "Hola Mundo!"); // la utilizacion estandar de setTimeout y de setInterval se mantiene, pero...
+setTimeout.call(miArreglo, miArreglo.miMetodo, 2000); // imprime "cero,uno,dos" despues de 2 segundos
+setTimeout.call(miArreglo, miArreglo.miMetodo, 2500, 2); // imprime "dos" despues de 2,5 segundos
+</pre>
+
+<p>Otra solución más compleja está en la siguiente liga de <a href="#A_little_framework">framework</a>.</p>
+
+<div class="note">JavaScript 1.8.5 introduce el método <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind">Function.prototype.bind()</a></code>, el cual permite especificar el valor de <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this"><code>this</code></a> para todas sus llamadas en una determinada función. Esto permite sobrellevar facilmente diferentes problemas de contexto con el uso de la palabra <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this"><code>this</code></a>. También, ES2015 soporta <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions">arrow functions</a>, dentro del lenguaje nos permite escribir cosas como setInterval( () =&gt; this.myMethod) si estamos dentro del método de miArreglo .</div>
+
+<h2 id="MiniDaemon_-_Un_framework_para_administrar_temporizadores">MiniDaemon - Un framework para administrar temporizadores</h2>
+
+<p>En proyectos que requieren muchos temporizadores puede volverse complicado el seguimiento de todos los eventos generados. Una forma de facilitar la administración de timers es guardando sus estados en un objeto. El siguiente ejemplo muestra este tipo de abstracción, la arquitectura del constructor evita explicitamente el uso de cerraduras. También ofrece un camino alternativo para pasar el objeto <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this"><code>this</code></a> a la función de Callback (observa la sección Problemas usando "<a href="/en-US/docs/Web/JavaScript/Reference/Operators/this"><code>this</code></a>" para más detalles). Puedes consultar también el siguiente código en<a href="https://github.com/madmurphy/minidaemon.js"> GitHub</a>.</p>
+
+<div class="note">Para una versión más modular de este (<code><em>Daemon)</em></code>puedes verlo en <a href="/en-US/Add-ons/Code_snippets/Timers/Daemons">JavaScript Daemons Management</a>. Aquí encontrarás una versión mas complicada que se reduce a una colección escalable de métodos para el constructor <code><em>Daemon</em></code>. Éste constructor no es más que un clon del  <code><em>MiniDaemon</em></code> con soporte para las funciones <em>init</em> y <em>onstart</em> declarables durante la instanciación del mismo. Por esto el <strong><code><em>MiniDaemon</em></code> framework </strong>se mantiene como el camino recomendado para realizar animaciones simples.</div>
+
+<h3 id="minidaemon.js">minidaemon.js</h3>
+
+<pre class="brush:js notranslate">/*\
+|*|
+|*|  :: MiniDaemon ::
+|*|
+|*|  Revision #2 - September 26, 2014
+|*|
+|*|  https://developer.mozilla.org/en-US/docs/Web/API/window.setInterval
+|*|  https://developer.mozilla.org/User:fusionchess
+|*|  https://github.com/madmurphy/minidaemon.js
+|*|
+|*|  This framework is released under the GNU Lesser General Public License, version 3 or later.
+|*|  http://www.gnu.org/licenses/lgpl-3.0.html
+|*|
+\*/
+
+function MiniDaemon (oOwner, fTask, nRate, nLen) {
+  if (!(this &amp;&amp; this instanceof MiniDaemon)) { return; }
+  if (arguments.length &lt; 2) { throw new TypeError("MiniDaemon - not enough arguments"); }
+  if (oOwner) { this.owner = oOwner; }
+  this.task = fTask;
+  if (isFinite(nRate) &amp;&amp; nRate &gt; 0) { this.rate = Math.floor(nRate); }
+  if (nLen &gt; 0) { this.length = Math.floor(nLen); }
+}
+
+MiniDaemon.prototype.owner = null;
+MiniDaemon.prototype.task = null;
+MiniDaemon.prototype.rate = 100;
+MiniDaemon.prototype.length = Infinity;
+
+  /* These properties should be read-only */
+
+MiniDaemon.prototype.SESSION = -1;
+MiniDaemon.prototype.INDEX = 0;
+MiniDaemon.prototype.PAUSED = true;
+MiniDaemon.prototype.BACKW = true;
+
+  /* Global methods */
+
+MiniDaemon.forceCall = function (oDmn) {
+  oDmn.INDEX += oDmn.BACKW ? -1 : 1;
+  if (oDmn.task.call(oDmn.owner, oDmn.INDEX, oDmn.length, oDmn.BACKW) === false || oDmn.isAtEnd()) { oDmn.pause(); return false; }
+  return true;
+};
+
+  /* Instances methods */
+
+MiniDaemon.prototype.isAtEnd = function () {
+  return this.BACKW ? isFinite(this.length) &amp;&amp; this.INDEX &lt; 1 : this.INDEX + 1 &gt; this.length;
+};
+
+MiniDaemon.prototype.synchronize = function () {
+  if (this.PAUSED) { return; }
+  clearInterval(this.SESSION);
+  this.SESSION = setInterval(MiniDaemon.forceCall, this.rate, this);
+};
+
+MiniDaemon.prototype.pause = function () {
+  clearInterval(this.SESSION);
+  this.PAUSED = true;
+};
+
+MiniDaemon.prototype.start = function (bReverse) {
+  var bBackw = Boolean(bReverse);
+  if (this.BACKW === bBackw &amp;&amp; (this.isAtEnd() || !this.PAUSED)) { return; }
+  this.BACKW = bBackw;
+  this.PAUSED = false;
+  this.synchronize();
+};
+</pre>
+
+<div class="note">MiniDaemon pasa argumentos a la función callback. Si quieres trabajar con ellos en navegadores que no soportan nativamente esta característica, usa uno de los métodos propuestos arriba.</div>
+
+<h3 id="Sintaxis_2">Sintaxis</h3>
+
+<p><code>var myDaemon = new MiniDaemon(<em>thisObject</em>, <em>callback</em>[</code><code>, <em>rate</em></code><code>[, <em>length</em>]]);</code></p>
+
+<h3 id="Descripción">Descripción</h3>
+
+<p>Regresa un <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object">Objecto</a></code> que contiene la información necesaria para una animación (como el objeto <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this"><code>this</code></a>, la función de Callback, la duración y el frame-rate).</p>
+
+<h4 id="Parámetros_2">Parámetros</h4>
+
+<dl>
+ <dt><code>thisObject</code></dt>
+ <dd>El valor de la palabra <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this"><code>this</code></a> sobre el cual funcionará la función de <em>Callback. </em>Puede ser un <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object"><code>objecto</code></a> o <code>null</code>.</dd>
+ <dt><code>callback</code></dt>
+ <dd>La función que se invocará repetidas veces. Dicha función se invocará con tres parámetros: <em>index</em> que corresponde al valor iterativo de cada invocación, <em>length</em> que es el número total de invocaciones asignadas al <em>daemon</em> (puede ser un valor finito o <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Infinity"><code>Infinity</code></a>) y <em>backwards</em> (valor booleano que expresa cuando el valor de <em>index</em> es creciente o decreciente). Es similar a <em>callback</em>.call(<em>thisObject</em>, <em>index</em>, <em>length</em>, <em>backwards</em>). Si la función de Callback regresa un valor false el deamon se detiene.</dd>
+ <dt><code>rate (optional)</code></dt>
+ <dd>El tiempo minimo en milisegundos que transcurre entre cada invocación. El valor por omisión es 100.</dd>
+ <dt><code>length (optional)</code></dt>
+ <dd>El número total de invocaciones. Puede ser un valor entero positivo o <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Infinity"><code>Infinity</code></a>. El valor por omisión es <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Infinity">Infinity</a>.</code></dd>
+</dl>
+
+<h4 id="Propiedades_de_la_intancia_MiniDaemon"><code>Propiedades de la intancia MiniDaemon</code> </h4>
+
+<dl>
+ <dt><code>myDaemon.owner</code></dt>
+ <dd>El objeto <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this"><code>this</code></a> sobre el cual se ejecuta el daemon (lectura/escritura). Puede ser un <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object"><code>objecto</code></a> o <code>null</code>.</dd>
+ <dt><code>myDaemon.task</code></dt>
+ <dd>La función que se invocará repetidas veces. Dicha función se invocará con tres parámetros: <em>index</em> que corresponde al valor iterativo de cada invocación, <em>length</em> que es el número total de invocaciones asignadas al <em>daemon</em> (puede ser un valor finito o <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Infinity"><code>Infinity</code></a>) y <em>backwards</em> (valor booleano que expresa cuando el valor de <em>index</em> es creciente o decreciente). Es similar a <em>callback</em>.call(<em>thisObject</em>, <em>index</em>, <em>length</em>, <em>backwards</em>). Si la función de Callback regresa un valor false el deamon se detiene.</dd>
+ <dt><code>myDaemon.rate</code></dt>
+ <dd>El tiempo minimo en milisegundos que transcurre entre cada invocación. El valor por omición es 100 (lectura/escritura).</dd>
+ <dt><code>myDaemon.length</code></dt>
+ <dd>El número total de invocaciones. Puede ser un valor entero positivo o <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Infinity"><code>Infinity</code></a>. El valor por omición es <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Infinity">Infinity</a> </code>(lectura/escritura).</dd>
+</dl>
+
+<h4 id="MiniDaemon_instances_methods"><code>MiniDaemon</code> instances methods</h4>
+
+<dl>
+ <dt><code>myDaemon.isAtEnd()</code></dt>
+ <dd>Regresa un valor boleano que expresa cuando el <em>daemon</em> está en posición de inicio/fin o no.</dd>
+ <dt><code>myDaemon.synchronize()</code></dt>
+ <dd>Sincroniza el tiempo de un deamon iniciado con el tiempo de su invocación.</dd>
+ <dt><code>myDaemon.pause()</code></dt>
+ <dd>Pausa el deamon.</dd>
+ <dt><code>myDaemon.start([<em>reverse</em>])</code></dt>
+ <dd>Inicia el daemon hacia adelante "forward" (el indice de cada invocación se incrementa) o hacia atrás "backwards" (el índice de cada invocación se decrementa).</dd>
+</dl>
+
+<h4 id="Métodos_del_objeto_global_del_MiniDaemon">Métodos del objeto global del <code>MiniDaemon</code></h4>
+
+<dl>
+ <dt><code>MiniDaemon.forceCall(<em>minidaemon</em>)</code></dt>
+ <dd>Fuerza una sola función callback a la función <code><em>minidaemon</em>.task</code>  en lugar del hecho de que se ha alcanzado el final o no. En cualquier caso la propiedad INDEX interna crece o decrece según la dirección del proceso.</dd>
+</dl>
+
+<h3 id="Ejemplo_de_uso">Ejemplo de uso</h3>
+
+<p>Tu página HTML:</p>
+
+<pre class="brush:html notranslate">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+  &lt;meta charset="UTF-8" /&gt;
+  &lt;title&gt;MiniDaemin Example - MDN&lt;/title&gt;
+  &lt;script type="text/javascript" src="minidaemon.js"&gt;&lt;/script&gt;
+  &lt;style type="text/css"&gt;
+    #sample_div {
+      visibility: hidden;
+    }
+  &lt;/style&gt;
+&lt;/head&gt;
+
+&lt;body&gt;
+  &lt;p&gt;
+    &lt;input type="button" onclick="fadeInOut.start(false /* optional */);" value="fade in" /&gt;
+    &lt;input type="button" onclick="fadeInOut.start(true);" value="fade out"&gt;
+    &lt;input type="button" onclick="fadeInOut.pause();" value="pause" /&gt;
+  &lt;/p&gt;
+
+  &lt;div id="sample_div"&gt;Some text here&lt;/div&gt;
+
+  &lt;script type="text/javascript"&gt;
+    function opacity (nIndex, nLength, bBackwards) {
+      this.style.opacity = nIndex / nLength;
+      if (bBackwards ? nIndex === 0 : nIndex === 1) {
+        this.style.visibility = bBackwards ? "hidden" : "visible";
+      }
+    }
+
+    var fadeInOut = new MiniDaemon(document.getElementById("sample_div"), opacity, 300, 8);
+  &lt;/script&gt;
+&lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p><a href="/files/3995/minidaemon_example.html" title="MiniDaemon Example">Prueba este ejemplo</a></p>
+
+<h2 id="Notas">Notas</h2>
+
+<p>La función<code> setInterval()</code> es usada frecuentemente para asignar una pausa para ejecutar funciones recurrentes, como por ejemplo pintar el siguiente cuadro de una animación.</p>
+
+<p>Puedes cancelar el ciclo iniciado por un <code>setInterval() </code>usando el comando <a href="/en-US/docs/Web/API/WindowTimers/clearInterval"><code>window.clearInterval()</code></a>.</p>
+
+<p>Si solo deseas ejecutar el ciclo una sola vez despues de una pausa usa en su lugar la función <a href="/en-US/docs/Web/API/WindowTimers/setTimeout"><code>window.setTimeout()</code></a>.</p>
+
+<h3 id="Asegúrate_que_el_tiempo_de_ejecución_sea_menor_que_la_frecuencia">Asegúrate que el tiempo de ejecución sea menor que la frecuencia</h3>
+
+<p>Si existe la posibilidad de que tu función o el código a ejecutarse una y otra vez exeda el tiempo marcado en cada intervalo es recomendado que uses recursivamente el nombre de tu función usando <code><a href="/en-US/docs/Web/API/WindowTimers/setTimeout">window.setTimeout</a></code>. Por ejemplo, si usas <code>setInterval </code>para hacer llamadas a un servidor remoto cada 5 segundos, la latencia en la red, un servidor que no responde, o cualquier otro tipo de contratiempo puede generar una pausa mayor a la que indicaste. De esta forma terminarás con solicitudes XHR apiladas que no se resolverán necesariamente en orden.</p>
+
+<p>En estos casos llamadas con un patrón de <code>setTimeout()</code> recursivo es preferible:</p>
+
+<pre class="brush:js notranslate">(function loop(){
+   setTimeout(function() {
+      // Your logic here
+
+      loop();
+  }, delay);
+})();
+</pre>
+
+<p>En este fragmento de código, la función <code>loop()</code> es declarada y es ejecutada inmediatamente. La función <code>loop()</code> es invocada de forma recursiva dentro de <code>setTimeout()</code> despues de cada ejecución. Si bien este patrón no garantiza una ejecución a intervalos fijos, si garantiza que nunca se ejecutará un paso sin que se haya finalizado el anterior. </p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Especificaciones</th>
+   <th>Estatus</th>
+   <th>Comentarios</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML WHATWG", "webappapis.html#dom-setinterval", "WindowTimers.setInterval()")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td>Definición inicial (DOM Level 0)</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad">Compatibilidad</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)<sup>[2]</sup></th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1")}}</td>
+   <td>4.0</td>
+   <td>4.0</td>
+   <td>1.0</td>
+  </tr>
+  <tr>
+   <td>Soporta parámetros para callback<sup>[1]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>10.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>1.0</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoMobile("1")}}</td>
+   <td>6.0</td>
+   <td>6.0</td>
+   <td>1.0</td>
+  </tr>
+  <tr>
+   <td>Soporta parámetros para callback<sup>[1]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Whether it supports the optional parameters when in its first form or not.</p>
+
+<p>[2] Anterior a Firefox 13, Firefox pasaba un parametro adicional al callback, indicando el "actual lateness" del timeout en milisegundos. Este parámetro no estandar dejó de usarse en versiones posteriores a Firefox 13. No es recomendable que extensiones basadas en XPCOM para Firefox usen setInterval(), ya que las actualizaciones pueden causar el que el objeto {{domxref("Window")}} se actualice perdiendo los temporizadores. Deberás usar en su lugar {{interface("nsITimer")}}.</p>
+
+<h2 id="Ver_más">Ver más</h2>
+
+<ul>
+ <li><a href="/en-US/Add-ons/Code_snippets/Timers">JavaScript timers</a></li>
+ <li>{{domxref("WindowTimers.setTimeout")}}</li>
+ <li>{{domxref("WindowTimers.clearTimeout")}}</li>
+ <li>{{domxref("WindowTimers.clearInterval")}}</li>
+ <li>{{domxref("window.requestAnimationFrame")}}</li>
+ <li><a href="/en-US/Add-ons/Code_snippets/Timers/Daemons"><em>Daemons</em> management</a></li>
+</ul>
diff --git a/files/es/web/api/settimeout/index.html b/files/es/web/api/settimeout/index.html
new file mode 100644
index 0000000000..aa531c471d
--- /dev/null
+++ b/files/es/web/api/settimeout/index.html
@@ -0,0 +1,341 @@
+---
+title: WindowOrWorkerGlobalScope.setTimeout
+slug: Web/API/setTimeout
+tags:
+  - API
+  - HTML DOM
+  - WindowOrWorkerGlobalScope
+  - setTimeout
+translation_of: Web/API/WindowOrWorkerGlobalScope/setTimeout
+original_slug: Web/API/WindowOrWorkerGlobalScope/setTimeout
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p>El método <strong><code>setTimeout()</code></strong> del mixin {{domxref("WindowOrWorkerGlobalScope")}} establece un temporizador que ejecuta una función o una porción de código después de que transcurre un tiempo establecido.</p>
+
+
+<h2 id="Syntax" name="Syntax">Sintaxis</h2>
+
+<pre class="syntaxbox"><em>var idTemporizador</em> = <em>scope</em>.setTimeout(<em>funcion</em>[, <em>retraso</em>, <em>parametro1</em>, <em>parametro2</em>, ...]);
+<em>var</em> <em>idTimeout</em> = <em>scope</em>.setTimeout(<em>funcion</em>[, <em>retraso</em>]);
+<em>var idTimeout</em> = <em>scope</em>.setTimeout(<em>codigo</em>[, <em>retraso</em>]);
+</pre>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<dl>
+ <dt><code>funcion</code></dt>
+ <dd>Una {{jsxref("function")}} para ejecutar después de que expire el temporizador.</dd>
+ <dt><code>codigo</code></dt>
+ <dd>Una sintaxis opcional que le permite incluir una cadena en lugar de una función, la cual es compilada y ejecutada cuando el temporizador expira. Esta sintaxis <strong>no se recomienda</strong> por las mismas razones que hacen del uso de {{jsxref("Global_Objects/eval", "eval()")}} un riesgo de seguridad.</dd>
+ <dt><code>retraso</code> {{optional_inline}}</dt>
+ <dd>Tiempo, en milisegundos  (milésimas de segundo), que el temporizador debe esperar antes de ejecutar la función o el código. Si se omite este parámetro se usa el valor 0. Tenga en cuenta que el retraso real puede ser más prolongado; ver más abajo {{anch("Reasons for delays longer than specified")}}.</dd>
+ <dt><code>param1, ..., paramN</code> {{optional_inline}}</dt>
+ <dd>Parámetros adicionales que se pasan a la función especificada por  <em>func</em> una vez el temporizador expira.</dd>
+</dl>
+
+<div class="note"><strong>Nota:</strong> Pasar parámetros adicionales a la función en la primera sintaxis no funciona en Internet Explorer 9 o inferior. Si quiere habilitar esta funcionalidad en ese navegador,  debe usar un código de compatibilidad (vea la sección <a href="#Callback_arguments">Callback arguments</a>).</div>
+
+<h3 id="Valor_retornado">Valor retornado</h3>
+
+<p>El valor retornado <code>IDtemporizador</code> es númerico y no es cero; identifica el temporizador creado con la llamada a <code>setTimeout()</code>; este valor puede pasarse a {{domxref("WindowOrWorkerGlobalScope.clearTimeout()")}} para cancelar el temporizador.</p>
+
+<p>Puede ser útil advertir que  <code>setTimeout()</code> y {{domxref("WindowOrWorkerGlobalScope.setInterval", "setInterval()")}} comparten la misma piscina de IDs, y que tanto <code>clearTimeout()</code> como {{domxref("WindowOrWorkerGlobalScope.clearInterval", "clearInterval()")}} pueden intercambiarse.  Por claridad, sin embargo,  debe hacerlos coincidir para evitar confusiones cuando mantenga su código.</p>
+
+<h2 id="Example" name="Example">Ejemplo</h2>
+
+<p>El siguiente ejemplo establece dos botenes simples en una página web y los engancha a las rutinas <code>setTimeout()</code> y <code>clearTimeout()</code>. Presionando el primer botón establecerá un temporizador que llama un diálogo de alerta después de dos segundos y guarda el id del temporizador para usarlo con <code>clearTimeout()</code>. Opcionalmente puede cancelar este temporizador presionando el segundo botón.</p>
+
+<h3 id="Contenido_HTML">Contenido HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;Ejemplo funcional&lt;/p&gt;
+&lt;button onclick="delayedAlert();"&gt;Muestra una caja de alerta después de dos segundos&lt;/button&gt;
+&lt;p&gt;&lt;/p&gt;
+&lt;button onclick="clearAlert();"&gt;Cancela la alerta antes de que ocurra&lt;/button&gt;
+</pre>
+
+<h3 id="Contenido_JavaScript">Contenido JavaScript</h3>
+
+<pre class="brush: js">var timeoutID;
+
+function delayedAlert() {
+  timeoutID = window.setTimeout(slowAlert, 2000);
+}
+
+function slowAlert() {
+  alert("That was really slow!");
+}
+
+function clearAlert() {
+  window.clearTimeout(timeoutID);
+}
+</pre>
+
+<p>{{ EmbedLiveSample('Example') }}</p>
+
+<p>Vea también <a href="/en-US/docs/DOM/window.clearTimeout#Example" title="en-US/docs/DOM/window.clearTimeout#Example"><code>clearTimeout()</code> example</a>.</p>
+
+<h2 id="Callback_arguments">Callback arguments</h2>
+
+<p>Si necesita pasar un argumento a su función callback, pero necesita que funcione en Internet Explorer, que no soporta el envío de parámetros adicionales (ni con <code>setTimeout()</code> o <code>setInterval()</code>) usted puede incluir este código de compatibilidad <em>IE-specific</em> que habilitará la funcionalidad estándar de HTML5 para pasar los parámetros adicionales en ese navegador para ambos temporizadores solamente insertandolo al inicio de sus scripts.</p>
+
+<pre class="brush: js">/*\
+|*|
+|*|  IE-specific polyfill which enables the passage of arbitrary arguments to the
+|*|  callback functions of JavaScript timers (HTML5 standard syntax).
+|*|
+|*|  https://developer.mozilla.org/en-US/docs/DOM/window.setInterval
+|*|
+|*|  Syntax:
+|*|  var timeoutID = window.setTimeout(func, delay, [param1, param2, ...]);
+|*|  var timeoutID = window.setTimeout(code, delay);
+|*|  var intervalID = window.setInterval(func, delay[, param1, param2, ...]);
+|*|  var intervalID = window.setInterval(code, delay);
+|*|
+\*/
+
+if (document.all &amp;&amp; !window.setTimeout.isPolyfill) {
+  var __nativeST__ = window.setTimeout;
+  window.setTimeout = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) {
+    var aArgs = Array.prototype.slice.call(arguments, 2);
+    return __nativeST__(vCallback instanceof Function ? function () {
+      vCallback.apply(null, aArgs);
+    } : vCallback, nDelay);
+  };
+  window.setTimeout.isPolyfill = true;
+}
+
+if (document.all &amp;&amp; !window.setInterval.isPolyfill) {
+  var __nativeSI__ = window.setInterval;
+  window.setInterval = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) {
+    var aArgs = Array.prototype.slice.call(arguments, 2);
+    return __nativeSI__(vCallback instanceof Function ? function () {
+      vCallback.apply(null, aArgs);
+    } : vCallback, nDelay);
+  };
+  window.setInterval.isPolyfill = true;
+}
+</pre>
+
+<h2 id="Arreglo_solo_para_IE">Arreglo solo para IE</h2>
+
+<p>Si quiere una solución completamente no intrusiva con otros navegadores móviles o de escritorio, incluyendo IE 9 y superior, puede usar los comentarios condicionales de JavaScript:</p>
+
+<pre class="brush: js">/*@cc_on
+  // conditional IE &lt; 9 only fix
+  @if (@_jscript_version &lt;= 6)
+  (function(f){
+     window.setTimeout =f(window.setTimeout);
+     window.setInterval =f(window.setInterval);
+  })(function(f){return function(c,t){var a=[].slice.call(arguments,2);return f(function(){c.apply(this,a)},t)}});
+  @end
+@*/
+</pre>
+
+<p>O usar un enfoque más limpio basado en el condicional para IE de HTML:</p>
+
+<pre class="brush: html">&lt;!--[if lt IE 9]&gt;&lt;script&gt;
+(function(f){
+window.setTimeout =f(window.setTimeout);
+window.setInterval =f(window.setInterval);
+})(function(f){return function(c,t){
+var a=[].slice.call(arguments,2);return f(function(){c.apply(this,a)},t)}
+});
+&lt;/script&gt;&lt;![endif]--&gt;
+</pre>
+
+<p>Otra posibilidad es usar una función anónima para llamar el callback, pero esta solución es un poco más costosa. Ejemplo:</p>
+
+<pre class="brush: js">var intervalID = setTimeout(function() { myFunc("uno", "dos", "tres"); }, 1000);
+</pre>
+
+<p>Sin embargo, otra posibilidad es usar <a href="https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Function/bind" title="/en-US/docs/JavaScript/Reference/Global_Objects/Function/bind">function's bind</a>. Ejemplo:</p>
+
+<pre class="brush: js">setTimeout(function(arg1){}.bind(undefined, 10));
+</pre>
+
+<h2 id="El_problema_this">El problema "<code>this</code>"</h2>
+
+<p>Cuando pasa un método a <code>setTimeout()</code> (o cualquier otra función , por el estilo), podría ser invocada con el valor de <code>this</code> equivocado. Este problema es explicado en detalle en la <a href="/en-US/docs/JavaScript/Reference/Operators/this#Method_binding" title="en-US/docs/Core_JavaScript_1.5_Reference/Operators/Special_Operators/this_Operator#Method_binding">referencia de JavaScript</a>.</p>
+
+<h3 id="Explicación">Explicación</h3>
+
+<p>El código ejecutado por <code>setTimeout()</code> corre en un contexto de ejecución diferente al de la función por la que fue llamado. Como consecuencia, la palabra clave <code>this para la función llamada </code>será asignado al objeto <code>window</code> (o <code>global</code>); no tendrá el mismo valor del <code>this</code> de la función que llamó al <code>setTimeout</code>. Vea el siguiente ejemplo:</p>
+
+<pre class="brush: js">myArray = ["cero", "uno", "dos"];
+myArray.myMethod = function (sProperty) {
+    alert(arguments.length &gt; 0 ? this[sProperty] : this);
+};
+
+myArray.myMethod(); // imprime "cero,uno,dos"
+myArray.myMethod(1); // imprime "uno"
+setTimeout(myArray.myMethod, 1000); // imprime "[object Window]" después de 1 segundo
+setTimeout(myArray.myMethod, 1500, "1"); // imprime "undefined" después de 1.5 segundos
+// intentemos pasar el objeto 'this'
+setTimeout.call(myArray, myArray.myMethod, 2000); // error: "NS_ERROR_XPC_BAD_OP_ON_WN_PROTO: Illegal operation on WrappedNative prototype object"
+setTimeout.call(myArray, myArray.myMethod, 2500, 2); // mismo error</pre>
+
+<p>Como puedes ver no hay forma de pasar el objeto <code>this</code> a la función callback.</p>
+
+<h3 id="Una_posible_solución">Una posible solución</h3>
+
+<p>Una posible forma de resolver el problema del "<code>this</code>" es reemplazar las dos funciones globales nativas <code>setTimeout()</code> or <code>setInterval()por dos no-nativas<em> </em> </code>que permitan su invocación a través del método <a href="en-US/docs/JavaScript/Reference/Global_Objects/Function/call" title="en-US/docs/JavaScript/Reference/Global_Objects/Function/call"><code>Function.prototype.call</code></a>. El siguiente ejemplo muestra un posible reemplazo:</p>
+
+<pre class="brush: js">// Enable the passage of the 'this' object through the JavaScript timers
+
+var __nativeST__ = window.setTimeout, __nativeSI__ = window.setInterval;
+
+window.setTimeout = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) {
+  var oThis = this, aArgs = Array.prototype.slice.call(arguments, 2);
+  return __nativeST__(vCallback instanceof Function ? function () {
+    vCallback.apply(oThis, aArgs);
+  } : vCallback, nDelay);
+};
+
+window.setInterval = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) {
+  var oThis = this, aArgs = Array.prototype.slice.call(arguments, 2);
+  return __nativeSI__(vCallback instanceof Function ? function () {
+    vCallback.apply(oThis, aArgs);
+  } : vCallback, nDelay);
+};</pre>
+
+<div class="note"><strong>Nota:</strong> Estos dos reemplazos habilitarán el estándar HTML5 para el paso de argumentos arbitrarios a las funciones callback de los temporizadores en IE. Pueden usarse como polyfills también. Vea el párrafo <a href="#Callback_arguments">Callback arguments</a>.</div>
+
+<p>Prueba de la nueva característica:</p>
+
+<pre class="brush: js">myArray = ["zero", "one", "two"];
+myArray.myMethod = function (sProperty) {
+    alert(arguments.length &gt; 0 ? this[sProperty] : this);
+};
+
+setTimeout(alert, 1500, "Hello world!"); // the standard use of setTimeout and setInterval is preserved, but...
+setTimeout.call(myArray, myArray.myMethod, 2000); // prints "zero,one,two" after 2 seconds
+setTimeout.call(myArray, myArray.myMethod, 2500, 2); // prints "two" after 2.5 seconds
+</pre>
+
+<p>No hay soluciones nativas <em>ad hoc</em> a este problema.</p>
+
+<div class="note"><strong>Nota:</strong> JavaScript 1.8.5 introduce el método <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Function/bind" title="en-US/docs/JavaScript/Reference/Global Objects/Function/bind">Function.prototype.bind(</a></code>, que permite especificar el valor que debería usarse como <code>this</code> para todas las llamadas a una función dada. Esto permite evitar fácilmente los problemas en los que no es claro que será, dependiendo del contexto desde el cual la función sea llamada.</div>
+
+<h2 id="Notas">Notas</h2>
+
+<p>Puede cancelar el temporizador usando <code><a href="/en-US/docs/DOM/window.clearTimeout" title="en-US/docs/DOM/window.clearTimeout">window.clearTimeout()</a></code>. Si desea tener una función llamada repetidamente (p.e., cada N milisegundos), considere usar <code><a href="/en-US/docs/DOM/window.setInterval" title="en-US/docs/DOM/window.setInterval">window.setInterval()</a></code>.</p>
+
+<p>Es importante notar que la función o fragmento de código no puede ser ejecutado hasta que el hilo que llamó <code>setTimeout()</code>haya terminado.</p>
+
+<h3 id="Pasando_cadenas_literales">Pasando cadenas literales</h3>
+
+<p>Pasando una cadena en vez de una función a <code>setTimeout()</code>pasa lo mismo que al usar <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/eval#Don.27t_use_eval.21" title="https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/eval">eval</a>. </code></p>
+
+<pre class="brush: js">// Correcto
+window.setTimeout(function() {
+    alert("Hello World!");
+}, 500);
+
+// Incorrecto
+window.setTimeout("alert(\"Hello World!\");", 500);
+
+</pre>
+
+<p>Las cadenas literales son evaluadas en el contexto global, así que los símbolos locales en el contexto donde <code>setTimeout()</code> fue llamado no estarán disponibles cuando la cadena es evaluada como código.</p>
+
+<h3 id="Minimum_maximum_delay_and_timeout_nesting">Minimum/ maximum delay and timeout nesting</h3>
+
+<p><a class="external" href="http://code.google.com/p/chromium/issues/detail?id=792#c10">Historically</a> browsers implement <code>setTimeout()</code> "clamping": successive <code>setTimeout()</code> calls with <code>delay</code> smaller than the "minimum delay" limit are forced to use at least the minimum delay. The minimum delay, <code>DOM_MIN_TIMEOUT_VALUE</code>, is 4 ms (stored in a preference in Firefox: <code>dom.min_timeout_value</code>), with a <code>DOM_CLAMP_TIMEOUT_NESTING_LEVEL</code> of 5ms.</p>
+
+<p>In fact, 4ms is <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/timers.html#timers">specified by the HTML5 spec</a> and is consistent across browsers released in 2010 and onward. Prior to {{ geckoRelease("5.0") }}, the minimum timeout value for nested timeouts was 10 ms.</p>
+
+<p>In addition to "clamping", the timeout can also fire later when the page (or the OS/browser itself) is busy with other tasks.</p>
+
+<p>To implement a 0 ms timeout in a modern browser, you can use {{ domxref("window.postMessage()") }} as <a class="external" href="http://dbaron.org/log/20100309-faster-timeouts">described here</a>.</p>
+
+<p>Browsers including Internet Explorer, Chrome, Safari, and Firefox store the delay as a 32-bit signed Integer internally. This causes an Integer overflow when using delays larger than 2147483647, resulting in the timeout being executed immediately.</p>
+
+<h4 id="Inactive_tabs">Inactive tabs</h4>
+
+<p>In {{ geckoRelease("5.0") }} and Chrome 11, timeouts are clamped to firing no more often than once per second (1000ms) in inactive tabs; see {{ bug(633421) }} for more information about this in Mozilla or <a class="external" href="http://crbug.com/66078">crbug.com/66078</a> for details about this in Chrome.</p>
+
+<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>1.0</td>
+   <td>{{ CompatGeckoDesktop("1") }}</td>
+   <td>4.0</td>
+   <td>4.0</td>
+   <td>1.0</td>
+  </tr>
+  <tr>
+   <td>Soporta parámetros para callback*1</td>
+   <td>{{ CompatVersionUnknown }}</td>
+   <td>{{ CompatVersionUnknown }}</td>
+   <td>10.0</td>
+   <td>{{ CompatVersionUnknown }}</td>
+   <td>{{ CompatUnknown }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>1.0</td>
+   <td>1.0</td>
+   <td>{{ CompatGeckoMobile("1") }}</td>
+   <td>6.0</td>
+   <td>6.0</td>
+   <td>1.0</td>
+  </tr>
+  <tr>
+   <td>Soporta parámetros para callback*1</td>
+   <td>{{ CompatUnknown }}</td>
+   <td>{{ CompatUnknown }}</td>
+   <td>{{ CompatUnknown }}</td>
+   <td>{{ CompatUnknown }}</td>
+   <td>{{ CompatUnknown }}</td>
+   <td>{{ CompatUnknown }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>*1 Whether it supports the optional parameters when in its first form or not.</p>
+
+<h2 id="Specification" name="Specification">Especificación</h2>
+
+<p>Parte del DOM nivel 0, como se especifica en <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/browsers.html#timers">HTML5</a>.</p>
+
+<h2 id="See_also" name="See_also">Vea también</h2>
+
+<ul>
+ <li><a href="/en-US/docs/JavaScript/Timers" title="/en-US/docs/JavaScript/Timers">JavaScript timers</a></li>
+ <li><a href="/en-US/docs/Mozilla/JavaScript_code_modules/Timer.jsm" title="/en-US/docs/Mozilla/JavaScript_code_modules/Timer.jsm">Timer.jsm</a></li>
+ <li>{{domxref("window.setInterval")}}</li>
+ <li>{{domxref("window.requestAnimationFrame")}}</li>
+ <li><a href="/en-US/docs/JavaScript/Timers/Daemons" title="/en-US/docs/JavaScript/Timers/Daemons"><em>Daemons</em> management</a></li>
+</ul>
diff --git a/files/es/web/api/uievent/pagex/index.html b/files/es/web/api/uievent/pagex/index.html
deleted file mode 100644
index fbd75e26f8..0000000000
--- a/files/es/web/api/uievent/pagex/index.html
+++ /dev/null
@@ -1,102 +0,0 @@
----
-title: event.pageX
-slug: Web/API/UIEvent/pageX
-tags:
-  - DOM
-  - Referencia_DOM_de_Gecko
-  - Todas_las_Categorías
-translation_of: Web/API/UIEvent/pageX
----
-<p>{{ ApiRef() }}</p>
-<h3 id="Sumario" name="Sumario">Sumario</h3>
-<p>Retorna la coordena horizontal del evento, relativo al documento completo.</p>
-<h3 id="Sintaxis" name="Sintaxis">Sintaxis</h3>
-<pre class="eval"><i>pageX</i> =<i>event</i>.pageX;
-</pre>
-<p><code>pageX</code> es un valor entero expresado en pixels para la corrdenada X del puntero del ratón, relativo al documento entero, cuando se produjo el evento. Esta propiedad toma en cuenta la barra de desplazamiento horizontal de la página.</p>
-<h3 id="Ejemplo" name="Ejemplo">Ejemplo</h3>
-<pre>&lt;html&gt;
-&lt;head&gt;
-&lt;title&gt;pageX\pageY &amp; layerX\layerY example&lt;/title&gt;
-
-&lt;script type="text/javascript"&gt;
-
-function showCoords(evt){
-  var form = document.forms.form_coords;
-  var parent_id = evt.target.parentNode.id;
-  form.parentId.value = parent_id;
-  form.pageXCoords.value = evt.pageX;
-  form.pageYCoords.value = evt.pageY;
-  form.layerXCoords.value = evt.layerX;
-  form.layerYCoords.value = evt.layerY;
-}
-
-&lt;/script&gt;
-
-&lt;style type="text/css"&gt;
-
- #d1 {
-  border: solid blue 1px;
-  padding: 20px;
- }
-
- #d2 {
-  position: absolute;
-  top: 180px;
-  left: 80%;
-  right:auto;
-  width: 40%;
-  border: solid blue 1px;
-  padding: 20px;
- }
-
- #d3 {
-  position: absolute;
-  top: 240px;
-  left: 20%;
-  width: 50%;
-  border: solid blue 1px;
-  padding: 10px;
- }
-
-&lt;/style&gt;
-&lt;/head&gt;
-
-&lt;body onmousedown="showCoords(event)"&gt;
-
-&lt;p&gt;To display the mouse coordinates please click anywhere on the page.&lt;/p&gt;
-
-&lt;div id="d1"&gt;
-&lt;span&gt;This is an un-positioned div so clicking it will return
-layerX/layerY values almost the same as pageX/PageY values.&lt;/span&gt;
-&lt;/div&gt;
-
-&lt;div id="d2"&gt;
-&lt;span&gt;This is a positioned div so clicking it will return layerX/layerY
-values that are relative to the top-left corner of this positioned
-element. Note the pageX\pageY properties still return the
-absolute position in the document, including page scrolling.&lt;/span&gt;
-
-&lt;span&gt;Make the page scroll more! This is a positioned div so clicking it
-will return layerX/layerY values that are relative to the top-left
-corner of this positioned element. Note the pageX\pageY properties still
-return the absolute position in the document, including page
-scrolling.&lt;/span&gt;
-&lt;/div&gt;
-
-&lt;div id="d3"&gt;
-&lt;form name="form_coords"&gt;
- Parent Element id: &lt;input type="text" name="parentId" size="7" /&gt;&lt;br /&gt;
- pageX:&lt;input type="text" name="pageXCoords" size="7" /&gt;
- pageY:&lt;input type="text" name="pageYCoords" size="7" /&gt;&lt;br /&gt;
- layerX:&lt;input type="text" name="layerXCoords" size="7" /&gt;
- layerY:&lt;input type="text" name="layerYCoords" size="7" /&gt;
-&lt;/form&gt;
-&lt;/div&gt;
-
-&lt;/body&gt;
-&lt;/html&gt;
-</pre>
-<h3 id="Specificaci.C3.B3n" name="Specificaci.C3.B3n">Specificación</h3>
-<p>No es parte del estándar público.</p>
-<p>{{ languages( { "pl": "pl/DOM/event.pageX", "en": "en/DOM/event.pageX" } ) }}</p>
diff --git a/files/es/web/api/windoworworkerglobalscope/atob/index.html b/files/es/web/api/windoworworkerglobalscope/atob/index.html
deleted file mode 100644
index 446f7e2df9..0000000000
--- a/files/es/web/api/windoworworkerglobalscope/atob/index.html
+++ /dev/null
@@ -1,112 +0,0 @@
----
-title: WindowBase64.atob()
-slug: Web/API/WindowOrWorkerGlobalScope/atob
-translation_of: Web/API/WindowOrWorkerGlobalScope/atob
-original_slug: Web/API/WindowBase64/atob
----
-<p>{{APIRef}}</p>
-
-<p>La función <strong>WindowBase64.atob() </strong>descodifica una cadena de datos que ha sido codificada utilizando la codificación en base-64. Puedes utilizar el método {{domxref("window.btoa()")}} para codificar y transmitir datos que, de otro modo podrían generar problemas de comunicación. Luego de ser transmitidos se puede usar el método window.atob() para decodificar los datos de nuevo. Por ejemplo, puedes codificar, transmitir y decodificar los caracteres de control como valores ASCII 0 a 31.</p>
-
-<p>For use with Unicode or UTF-8 strings, see <a href="/en-US/docs/Web/JavaScript/Base64_encoding_and_decoding#The_.22Unicode_Problem.22">this note at Base64 encoding and decoding</a> and <a href="/en-US/docs/Web/API/window.btoa#Unicode_Strings">this note at <code>window.btoa()</code></a>.</p>
-
-<h2 id="Syntax" name="Syntax">Syntax</h2>
-
-<pre class="syntaxbox">var decodedData = window.atob(<em>encodedData</em>);</pre>
-
-<h2 id="Example" name="Example">Example</h2>
-
-<pre class="brush:js">var encodedData = window.btoa("Hello, world"); // encode a string
-var decodedData = window.atob(encodedData); // decode the string</pre>
-
-<h2 id="Specifications">Specifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Specification</th>
-   <th scope="col">Status</th>
-   <th scope="col">Comment</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', '#dom-windowbase64-atob', 'WindowBase64.atob()')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td>No change since the latest snapshot, {{SpecName("HTML5.1")}}.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5.1', '#dom-windowbase64-atob', 'WindowBase64.atob()')}}</td>
-   <td>{{Spec2('HTML5.1')}}</td>
-   <td>Snapshot of {{SpecName("HTML WHATWG")}}. No change.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName("HTML5 W3C", "#dom-windowbase64-atob", "WindowBase64.atob()")}}</td>
-   <td>{{Spec2('HTML5 W3C')}}</td>
-   <td>Snapshot of {{SpecName("HTML WHATWG")}}. Creation of <code>WindowBase64</code> (properties where on the target before it).</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2>
-
-<div>{{CompatibilityTable}}</div>
-
-<div id="compat-desktop">
-<table class="compat-table">
- <tbody>
-  <tr>
-   <th>Feature</th>
-   <th>Chrome</th>
-   <th>Firefox (Gecko)</th>
-   <th>Internet Explorer</th>
-   <th>Opera</th>
-   <th>Safari (WebKit)</th>
-  </tr>
-  <tr>
-   <td>Basic support</td>
-   <td>{{CompatVersionUnknown}}</td>
-   <td>{{CompatGeckoDesktop(1)}}[1][2]</td>
-   <td>10</td>
-   <td>{{CompatVersionUnknown}}</td>
-   <td>{{CompatVersionUnknown}}</td>
-  </tr>
- </tbody>
-</table>
-</div>
-
-<div id="compat-mobile">
-<table class="compat-table">
- <tbody>
-  <tr>
-   <th>Feature</th>
-   <th>Android</th>
-   <th>Firefox Mobile (Gecko)</th>
-   <th>IE Mobile</th>
-   <th>Opera Mobile</th>
-   <th>Safari Mobile</th>
-  </tr>
-  <tr>
-   <td>Basic support</td>
-   <td>{{CompatVersionUnknown}}</td>
-   <td>{{CompatGeckoMobile(1)}}</td>
-   <td>{{CompatNo}}</td>
-   <td>{{CompatUnknown}}</td>
-   <td>{{CompatVersionUnknown}}</td>
-  </tr>
- </tbody>
-</table>
-</div>
-
-<p>[1]  <code>atob()</code> is also available to XPCOM components implemented in JavaScript, even though <code><a href="/en-US/docs/DOM/window">window</a></code> is not the global object in components.</p>
-
-<p>[2] Starting with <a href="/en-US/Firefox/Releases/27/Site_Compatibility">Firefox 27</a>, this <code>atob()</code> method ignores all space characters in the argument to comply with the latest HTML5 spec. ({{ bug(711180) }})</p>
-
-<h2 id="See_also" name="See_also">See also</h2>
-
-<ul>
- <li><a href="/Web/API/WindowBase64/Base64_encoding_and_decoding">Base64 encoding and decoding</a></li>
- <li><a href="/en-US/docs/data_URIs"><code>data</code> URIs</a></li>
- <li>{{domxref("window.btoa()")}}</li>
- <li><a href="/en-US/docs/Components.utils.importGlobalProperties">Components.utils.importGlobalProperties</a></li>
-</ul>
diff --git a/files/es/web/api/windoworworkerglobalscope/caches/index.html b/files/es/web/api/windoworworkerglobalscope/caches/index.html
deleted file mode 100644
index c8d3a71b97..0000000000
--- a/files/es/web/api/windoworworkerglobalscope/caches/index.html
+++ /dev/null
@@ -1,127 +0,0 @@
----
-title: WindowOrWorkerGlobalScope.caches
-slug: Web/API/WindowOrWorkerGlobalScope/caches
-translation_of: Web/API/WindowOrWorkerGlobalScope/caches
----
-<p>{{APIRef()}}{{SeeCompatTable}}</p>
-
-<p>La propiedad de sólo-lectura <code><strong>caches</strong></code>, de la interfaz {{domxref("WindowOrWorkerGlobalScope")}}, devuelve el objeto {{domxref("CacheStorage")}} asociado al contexto actual. Este objeto habilita funcionalidades como guardar assets para su utilización <em>offline</em>, y generar respuestas personalizadas a las peticiones.</p>
-
-<h2 id="Sintaxis">Sintaxis</h2>
-
-<pre class="syntaxbox">var <em>myCacheStorage</em> = self.caches; // or just caches
-</pre>
-
-<h3 id="Valor">Valor</h3>
-
-<p>Un objeto {{domxref("CacheStorage")}}.</p>
-
-<h2 id="Ejemplo">Ejemplo</h2>
-
-<p>El siguiente ejemplo muestra la forma en la que utilizarías una cache en un contexto de <a href="/en-US/docs/Web/API/Service_Worker_API">service worker</a> para guardar assets <em>offline</em>.</p>
-
-<pre class="brush: js">this.addEventListener('install', function(event) {
-  event.waitUntil(
-    caches.open('v1').then(function(cache) {
-      return cache.addAll(
-        '/sw-test/',
-        '/sw-test/index.html',
-        '/sw-test/style.css',
-        '/sw-test/app.js',
-        '/sw-test/image-list.js',
-        '/sw-test/star-wars-logo.jpg',
-        '/sw-test/gallery/',
-        '/sw-test/gallery/bountyHunters.jpg',
-        '/sw-test/gallery/myLittleVader.jpg',
-        '/sw-test/gallery/snowTroopers.jpg'
-      );
-    })
-  );
-});</pre>
-
-<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('Service Workers', '#self-caches', 'caches')}}</td>
-   <td>{{Spec2('Service Workers')}}</td>
-   <td>Definido en un <code>WindowOrWorkerGlobalScope</code> parcial en la última especificación.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('Service Workers')}}</td>
-   <td>{{Spec2('Service Workers')}}</td>
-   <td>Definición inicial.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilidad_de_Navegadores">Compatibilidad de Navegadores</h2>
-
-<p>{{CompatibilityTable}}</p>
-
-<div id="compat-desktop">
-<table class="compat-table">
- <tbody>
-  <tr>
-   <th>Característica</th>
-   <th>Chrome</th>
-   <th>Firefox (Gecko)</th>
-   <th>Internet Explorer</th>
-   <th>Opera</th>
-   <th>Safari</th>
-  </tr>
-  <tr>
-   <td>Soporte Básico</td>
-   <td>40.0</td>
-   <td>{{CompatGeckoDesktop(42)}}<br>
-    {{CompatGeckoDesktop(52)}}<sup>[1]</sup></td>
-   <td>{{CompatNo}}</td>
-   <td>{{CompatUnknown}}</td>
-   <td>{{CompatNo}}</td>
-  </tr>
- </tbody>
-</table>
-</div>
-
-<div id="compat-mobile">
-<table class="compat-table">
- <tbody>
-  <tr>
-   <th>Característica</th>
-   <th>Android</th>
-   <th>Chrome para Android</th>
-   <th>Firefox Mobile (Gecko)</th>
-   <th>IE Mobile</th>
-   <th>Opera Mobile</th>
-   <th>Safari Mobile</th>
-  </tr>
-  <tr>
-   <td>Soporte Básico</td>
-   <td>{{CompatVersionUnknown}}</td>
-   <td>{{CompatVersionUnknown}}</td>
-   <td>{{CompatGeckoMobile(42)}}<br>
-    {{CompatGeckoMobile(52)}}<sup>[1]</sup></td>
-   <td>{{CompatVersionUnknown}}</td>
-   <td>{{CompatVersionUnknown}}</td>
-   <td>{{CompatVersionUnknown}}</td>
-  </tr>
- </tbody>
-</table>
-</div>
-
-<p>[1] las <code>caches</code> se definen ahora en el mixin {{domxref("WindowOrWorkerGlobalScope")}}.</p>
-
-<h2 id="Ver_también">Ver también</h2>
-
-<ul>
- <li><a href="/en-US/docs/Web/API/ServiceWorker_API">Service Workers</a></li>
- <li><a href="/en-US/docs/Web/API/Web_Workers_API">Web Workers</a></li>
- <li>{{domxref("CacheStorage")}}</li>
- <li>{{domxref("Cache")}}</li>
-</ul>
diff --git a/files/es/web/api/windoworworkerglobalscope/clearinterval/index.html b/files/es/web/api/windoworworkerglobalscope/clearinterval/index.html
deleted file mode 100644
index c984baf637..0000000000
--- a/files/es/web/api/windoworworkerglobalscope/clearinterval/index.html
+++ /dev/null
@@ -1,44 +0,0 @@
----
-title: WindowTimers.clearInterval()
-slug: Web/API/WindowOrWorkerGlobalScope/clearInterval
-translation_of: Web/API/WindowOrWorkerGlobalScope/clearInterval
-original_slug: Web/API/WindowTimers/clearInterval
----
-<div>
-<div>{{APIRef("HTML DOM")}}</div>
-</div>
-
-<p>Cancela una acción reiterativa que se inició mediante una llamada a {{domxref("window.setInterval", "setInterval")}}.</p>
-
-<h2 id="Syntax" name="Syntax">Sintaxis</h2>
-
-<pre class="syntaxbox"><em>window</em>.clearInterval(<var>intervalID</var>)
-</pre>
-
-<p><code>intervalID</code> es el identificador de la acción reiterativa que se desea cancelar. Este ID se obtiene a partir de <code>setInterval()</code>.</p>
-
-<h2 id="Example" name="Example">Ejemplo</h2>
-
-<p>Vea el <a href="/en-US/docs/DOM/window.setInterval#Example" title="DOM/window.setInterval#Example">ejemplo de<code> setInterval()</code></a>.</p>
-
-<h2 id="Specification" name="Specification">Especificación</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', 'timers.html#timers', 'clearInterval')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="See_also" name="See_also">Vea también</h2>
-
-<ul>
- <li><a href="/en-US/docs/JavaScript/Timers" title="JavaScript/Timers">JavaScript timers</a></li>
- <li>{{domxref("WindowTimers.setTimeout")}}</li>
- <li>{{domxref("WindowTimers.setInterval")}}</li>
- <li>{{domxref("WindowTimers.clearTimeout")}}</li>
- <li>{{domxref("window.requestAnimationFrame")}}</li>
- <li><a href="/en-US/docs/JavaScript/Timers/Daemons" title="JavaScript/Timers/Daemons"><em>Daemons</em> management</a></li>
-</ul>
diff --git a/files/es/web/api/windoworworkerglobalscope/cleartimeout/index.html b/files/es/web/api/windoworworkerglobalscope/cleartimeout/index.html
deleted file mode 100644
index e40c77c5b6..0000000000
--- a/files/es/web/api/windoworworkerglobalscope/cleartimeout/index.html
+++ /dev/null
@@ -1,64 +0,0 @@
----
-title: window.clearTimeout
-slug: Web/API/WindowOrWorkerGlobalScope/clearTimeout
-translation_of: Web/API/WindowOrWorkerGlobalScope/clearTimeout
-original_slug: Web/API/WindowTimers/clearTimeout
----
-<div>{{ApiRef}}</div>
-
-<h2 id="Summary" name="Summary">Resumen</h2>
-
-<p>Borra el retraso asignado por {{domxref("window.setTimeout","window.setTimeout()")}}.</p>
-
-<h2 id="Syntax" name="Syntax">Sintaxis</h2>
-
-<pre class="syntaxbox">window.clearTimeout(<em>timeoutID</em>)
-</pre>
-
-<ul>
- <li><code>timeoutID</code> es el ID del timeout que desee borrar, retornado por {{domxref("window.setTimeout","window.setTimeout()")}}.</li>
-</ul>
-
-<h2 id="Example" name="Example">Ejemplo</h2>
-
-<p>Ejecute el script de abajo en el contexto de una página web y haga clic en la página una vez. Verá un mensaje emergente en un segundo. Si permanece haciendo clic en la página cada segundo, la alerta nunca aparece.</p>
-
-<pre class="brush: js">var alarm = {
-  remind: function(aMessage) {
-    alert(aMessage);
-    delete this.timeoutID;
-  },
-
-  setup: function() {
-    this.cancel();
-    var self = this;
-    this.timeoutID = window.setTimeout(function(msg) {self.remind(msg);}, 1000, "Wake up!");
-  },
-
-  cancel: function() {
-    if(typeof this.timeoutID == "number") {
-      window.clearTimeout(this.timeoutID);
-      delete this.timeoutID;
-    }
-  }
-};
-window.onclick = function() { alarm.setup() };</pre>
-
-<h2 id="Notes" name="Notes">Notas</h2>
-
-<p>Pasar un ID inválido a <code>clearTimeout</code> no tiene ningún efecto (y no lanza una excepción).</p>
-
-<h2 id="Specification" name="Specification">Especificación</h2>
-
-<p>DOM Nivel 0. Especificado en <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/timers.html#dom-windowtimers-cleartimeout">HTML5</a>.</p>
-
-<h2 id="See_also" name="See_also">Vea también</h2>
-
-<ul>
- <li><a href="/en-US/docs/JavaScript/Timers" title="JavaScript/Timers">JavaScript timers</a></li>
- <li>{{domxref("window.setTimeout")}}</li>
- <li>{{domxref("window.setInterval")}}</li>
- <li>{{domxref("window.clearInterval")}}</li>
- <li>{{domxref("window.requestAnimationFrame")}}</li>
- <li><a href="/en-US/docs/JavaScript/Timers/Daemons" title="JavaScript/Timers/Daemons"><em>Daemons</em> management</a></li>
-</ul>
diff --git a/files/es/web/api/windoworworkerglobalscope/createimagebitmap/index.html b/files/es/web/api/windoworworkerglobalscope/createimagebitmap/index.html
deleted file mode 100644
index e24e4b11f4..0000000000
--- a/files/es/web/api/windoworworkerglobalscope/createimagebitmap/index.html
+++ /dev/null
@@ -1,108 +0,0 @@
----
-title: self.createImageBitmap()
-slug: Web/API/WindowOrWorkerGlobalScope/createImageBitmap
-tags:
-  - API
-  - Canvas
-  - DOM
-  - Referencia
-  - WindowOrWorkerGlobalScope
-  - createImageBitmap
-  - metodo
-translation_of: Web/API/WindowOrWorkerGlobalScope/createImageBitmap
----
-<div>{{APIRef("Canvas API")}}</div>
-
-<p>El método <code><strong>createImageBitmap()</strong></code> crea un <em>bitmap</em> a partir de un recurso especificado, opcionalmente recortado para mostrar únicamente una porción de este. El método existe a nivel global como parte, tanto de las ventanas (<em>window</em>), como de los <em>workers</em>. Este admite una variedad de tipos de entrada, y devuelve una {{domxref("Promise")}} que es resuelta con un {{domxref("ImageBitmap")}}.</p>
-
-<h2 id="Sintaxis">Sintaxis</h2>
-
-<pre class="syntaxbox">createImageBitmap(<em>image</em>[, options]).then(function(response) { ... });
-createImageBitmap(<em>image, sx, sy, sw, sh</em>[, options]).then(function(response) { ... });</pre>
-
-<h3 id="Parámetros">Parámetros</h3>
-
-<dl>
- <dt><code>image</code></dt>
- <dd>Un recurso/imagen origen, que puede uno de los siguientes elementos: {{HTMLElement("img")}}, SVG {{SVGElement("image")}}, {{HTMLElement("video")}}, {{HTMLElement("canvas")}}, {{domxref("HTMLImageElement")}}, {{domxref("SVGImageElement")}}, {{domxref("HTMLVideoElement")}}, {{domxref("HTMLCanvasElement")}}, {{domxref("Blob")}}, {{domxref("ImageData")}}, {{domxref("ImageBitmap")}}, o {{domxref("OffscreenCanvas")}}.</dd>
- <dt><code>sx</code></dt>
- <dd>La coordenada x del rectángulo que será usado para la extracción del <code>ImageBitmap</code>.</dd>
- <dt><code>sy</code></dt>
- <dd>La coordenada y del rectángulo que será usado para la extracción del <code>ImageBitmap</code>.</dd>
- <dt><code>sw</code></dt>
- <dd>La anchura del rectángulo que será usado para extraer el <code>ImageBitmap</code>. El valor podría ser negativo.</dd>
- <dt><code>sh</code></dt>
- <dd>La altura del rectángulo que será usado para extraer el <code>ImageBitmap</code>. El valor podría ser negativo.</dd>
- <dt><code>options</code> {{optional_inline}}</dt>
- <dd>Un objeto que proporciona opciones para la extracción de la imagen. Las opciones posibles son:
- <ul>
-  <li><code>imageOrientation</code>: Especifica si la imagen debe ser extraida tal y como se muestra, o debe ser volteada verticalmente. Las valores posibles: <code>none</code> (por defecto) o <code>flipY</code>.</li>
-  <li><code>premultiplyAlpha</code>: Especifica si los canales de color del mapa de bits generado deben premultiplicarse por el canal alpha. Uno de: <code>none</code>, <code>premultiply</code>, o <code>default</code> (por defecto).</li>
-  <li><code>colorSpaceConversion</code>: Especifica si la imagen debe ser decodificada usando conversión del espacio de color. Uno de: <code>none</code> o <code>default</code> (por defecto). El valor <code>default</code> indica que se usará la implementación que haya disponible.</li>
-  <li><code>resizeWidth</code>: Un entero largo que especifica la anchura final.</li>
-  <li><code>resizeHeight</code>: Un entero largo que especifica la altura final.</li>
-  <li><code>resizeQuality</code>: Especifica que algorítmo debe ser usado en el redimensionado para alcanzar las dimensiones deseadas. Uno de estos valores: <code>pixelated</code>, <code>low</code> (por defecto), <code>medium</code>, o <code>high</code>.</li>
- </ul>
- </dd>
-</dl>
-
-<h3 id="Valor_devuelto">Valor devuelto</h3>
-
-<p>Una {{domxref("Promise")}} que es resuelta con un objeto {{domxref("ImageBitmap")}}, el cual contiene los datos del mapa de bits generado para el rectángulo dado.</p>
-
-<h2 id="Ejemplo">Ejemplo</h2>
-
-<h3 id="Creando_sprites_desde_un_sprite_sheet">Creando <em>sprites</em> desde un <em>sprite sheet</em></h3>
-
-<p>El siguiente ejemplo carga un<em> sprite sheet</em>, extrae los <em>sprites</em>, y muestra cada uno de ellos en el <em>canvas</em>. Un <em>sprite sheet</em> es una imagen que contiene multiples imágenes más pequeñas, que finalmente son utilizadas de manera individual.</p>
-
-<pre class="brush: js  language-js">var canvas = document.getElementById('myCanvas'),
-ctx = canvas.getContext('2d'),
-image = new Image();
-
-// Esperar que el sprite sheet se cargue
-image.onload = function() {
-  Promise.all([
-    // Recortar dos sprites del conjunto
-    createImageBitmap(image, 0, 0, 32, 32),
-    createImageBitmap(image, 32, 0, 32, 32)
-  ]).then(function(sprites) {
-    // Pintar cada uno de los sprites en el canvas
-    ctx.drawImage(sprites[0], 0, 0);
-    ctx.drawImage(sprites[1], 32, 32);
-  });
-}
-
-// Cargar el sprite sheet desde un archivo de imagen
-image.src = 'sprites.png';
-</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('HTML WHATWG', "webappapis.html#dom-createimagebitmap", "createImageBitmap")}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
-
-
-
-<p>{{Compat("api.WindowOrWorkerGlobalScope.createImageBitmap")}}</p>
-
-<h2 id="Ver_también">Ver también</h2>
-
-<ul>
- <li>{{domxref("CanvasRenderingContext2D.drawImage()")}}</li>
- <li>{{domxref("ImageData")}}</li>
-</ul>
diff --git a/files/es/web/api/windoworworkerglobalscope/fetch/index.html b/files/es/web/api/windoworworkerglobalscope/fetch/index.html
deleted file mode 100644
index 9540fe5d05..0000000000
--- a/files/es/web/api/windoworworkerglobalscope/fetch/index.html
+++ /dev/null
@@ -1,177 +0,0 @@
----
-title: WindowOrWorkerGlobalScope.fetch()
-slug: Web/API/WindowOrWorkerGlobalScope/fetch
-tags:
-  - API
-  - Experimental
-  - Fetch
-  - Fetch API
-  - GlobalFetch
-  - Petición
-  - Referencia
-  - metodo
-  - solicitud
-translation_of: Web/API/WindowOrWorkerGlobalScope/fetch
----
-<div>{{APIRef("Fetch API")}}</div>
-
-<p>El método <code><strong>fetch()</strong></code> del mixin {{domxref("WindowOrWorkerGlobalScope")}} lanza el proceso de solicitud de un recurso de la red. Esto devuelve una promesa que resuelve al objeto {{domxref("Response")}} que representa la respuesta a la solicitud realizada.</p>
-
-<p>Tanto {{domxref("Window")}} como {{domxref("WorkerGlobalScope")}} implementan <code>WorkerOrGlobalScope</code>, por lo que el método <code>fetch()</code> está disponible en prácticamente cualquier contexto desde el que se pueda necesitar solicitar un recurso.</p>
-
-<p>Una promesa {{domxref("WindowOrWorkerGlobalScope.fetch","fetch()")}} se rechaza con un {{jsxref("TypeError")}} cuando sucede un error en la red, aunque normalmente significa un tema de permisos o similar. Una comprobación más precisa de una solicitud con <code>fetch()</code> debería comprobar que la promesa se resuelve, y que la propiedad {{domxref("Response.ok")}} tiene valor <code>true</code>. Un estatus HTTP 404 no constituye un error de red.</p>
-
-<p>El método <code>fetch()</code> es controlado por la directiva <code>connect-src</code> de la <a href="/en-US/docs/Security/CSP/CSP_policy_directives">Política de Seguridad de Contenido (Content Security Policy)</a> en lugar de la directiva del recurso que se solicita.</p>
-
-<div class="note">
-<p><strong>Nota</strong>: Los parámetros del método <code>fetch()</code> son indénticos a los del constructor de {{domxref("Request.Request","Request()")}}.</p>
-</div>
-
-<h2 id="Sintaxis">Sintaxis</h2>
-
-<pre class="syntaxbox">Promise&lt;Response&gt; fetch(input[, init]);</pre>
-
-<h3 id="Parámetros">Parámetros</h3>
-
-<dl>
- <dt><em>input</em></dt>
- <dd>Define el recurso que se quiere solicitar. Puede ser:
- <ul>
-  <li>Un {{domxref("USVString")}} con la URL del recurso a solicitar. Algunos navegadores aceptan los esquemas <code>blob:</code> y <code>data:</code>.</li>
-  <li>Un objeto {{domxref("Request")}}.</li>
- </ul>
- </dd>
- <dt><em>init</em> {{optional_inline}}</dt>
- <dd>Objeto de opciones que contiene configuraciones para personalizar la solicitud. Estas opciones pueden ser:
- <ul>
-  <li><code>method</code>: El método de solicitud, p.ej., <code>GET</code>, <code>POST</code>.</li>
-  <li><code>headers</code>: Cualquier cabecera que se quiera añadir a la solicitud, contenidas en un objeto {{domxref("Headers")}} o un objeto literal con valores {{domxref("ByteString")}}.</li>
-  <li><code>body</code>: Cualquier cuerpo que se quiera añadir a la solicitud: puede ser un {{domxref("Blob")}}, {{domxref("BufferSource")}}, {{domxref("FormData")}}, {{domxref("URLSearchParams")}}, u objeto {{domxref("USVString")}}. Nótese que las solicitudes con métodos <code>GET</code> o <code>HEAD</code> no pueden tener cuerpo.</li>
-  <li><code>mode</code>: El modo a usar en la solicitud, p.ej., <code>cors</code>, <code>no-cors</code>, o <code>same-origin</code>.</li>
-  <li><code>credentials</code>: Las credenciales que se quieran utilizar para la solicitud: <code>omit</code>, <code>same-origin</code>, o <code>include</code>. Para enviar automáticamente las cookies del dominio actual, debe indicarse esta opción. Desde Chrome 50, esta propiedad también acepta una instancia de {{domxref("FederatedCredential")}} o de {{domxref("PasswordCredential")}}.</li>
-  <li><code>cache</code>: El modo de caché a utilizar en la solicitud: <code>default</code>, <code>no-store</code>, <code>reload</code>, <code>no-cache</code>, <code>force-cache</code>, o <code>only-if-cached</code>.</li>
-  <li><code>redirect</code>: El modo de redirección a usar: <code>follow</code> (seguir redirecciones automáticamente), <code>error</code> (abortar si sucede un error durante la redirección), o <code>manual</code> (gestionar redirecciones manualmente). El valor por defecto en Chrome es <code>follow</code> (hasta la versión 46 era <code>manual</code>).</li>
-  <li><code>referrer</code>: Un {{domxref("USVString")}} que especifique <code>no-referrer</code>, <code>client</code>, o una URL. El valor por defecto es <code>client</code>.</li>
-  <li><code>referrerPolicy</code>: Especifica el valor de la cabecera HTTP referer. Puede ser <code>no-referrer</code>, <code>no-referrer-when-downgrade</code>, <code>origin</code>, <code>origin-when-cross-origin</code>, <code>unsafe-url</code>.</li>
-  <li><code>integrity</code>: Contiene el valor de <a href="/en-US/docs/Web/Security/Subresource_Integrity">integridad de subrecurso (subresource integrity)</a> de la solicitud (p.ej., <code>sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE=</code>).</li>
-  <li><code>keepalive</code>: La opción <code>keepalive</code> se puede usar para permitir que recurso dure más que la página. Las solicitudes con el indicador <code>keepalive</code> son un reemplazo de la API {{domxref("Navigator.sendBeacon()")}}. </li>
-  <li><code>signal</code>: Una instancia de objeto {{domxref("AbortSignal")}}; permite comunicarse con con una solicitud vigente y abortarla si se desea via {{domxref("AbortController")}}.</li>
- </ul>
- </dd>
-</dl>
-
-<h3 id="Return_value">Return value</h3>
-
-<p>Una {{domxref("Promise")}} que resuelve a un objeto {{domxref("Response")}}.</p>
-
-<h3 id="Excepciones">Excepciones</h3>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col"><strong>Tipo</strong></th>
-   <th scope="col"><strong>Descriptción</strong></th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><code>AbortError</code></td>
-   <td>Se abortó la solicitud (mediante {{domxref("AbortController.abort()")}}).</td>
-  </tr>
-  <tr>
-   <td><code>TypeError</code></td>
-   <td>Desde <a href="/en-US/docs/Mozilla/Firefox/Releases/43">Firefox 43</a>, <code>fetch()</code> lanza un <code>TypeError</code> si la URL tiene credenciales, como en <code>http://usuario:clave@ejemplo.com</code>.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Ejemplo">Ejemplo</h2>
-
-<p>En el ejemplo de <a href="https://github.com/mdn/fetch-examples/tree/master/fetch-request">solicitud con Request</a> (ver <a href="https://mdn.github.io/fetch-examples/fetch-request/">Fetch Request live</a>) creamos un nuevo objeto {{domxref("Request")}} usando el constructor pertinente, y realizamos una solicitud usando <code>fetch()</code>. Dado que estamos solicitando una imagen, ejecutamos {{domxref("Body.blob()")}} en la respuesta para darle el tipo MIME correspondiente para que sea gestionada apropiadamente, luego creamos un objeto URL de ella para mostrarla en un elemento {{htmlelement("img")}}.</p>
-
-<pre class="brush: js">var miImagen = document.querySelector('img');
-
-var miSolicitud = new Request('flores.jpg');
-
-fetch(miSolicitud).then(function(respuesta) {
-  return respuesta.blob();
-}).then(function(respuesta) {
-  var objeto = URL.createObjectURL(respuesta);
-  miImagen.src = objeto;
-});</pre>
-
-<p>En el ejemplo de <a href="https://github.com/mdn/fetch-examples/blob/master/fetch-with-init-then-request/index.html">solicitud con inicializador y Request</a> (ver <a href="https://mdn.github.io/fetch-examples/fetch-with-init-then-request/">Fetch Request init live</a>) hacemos lo mismo pero además pasamos un objeto inicializador cuando invocamos el <code>fetch()</code>:</p>
-
-<pre class="brush: js">var miImagen = document.querySelector('img');
-
-var misCabeceras = new Headers();
-misCabeceras.append('Content-Type', 'image/jpeg');
-
-var miInicializador = { method: 'GET',
-                        headers: misCabeceras,
-                        mode: 'cors',
-                        cache: 'default' };
-
-var miSolicitud = new Request('flores.jpg');
-
-fetch(miSolicitud,miInicializador).then(function(respuesta) {
-  ...
-});</pre>
-
-<p>Nótese que también podríamos pasar el objeto inicializador con el constructor de <code>Request</code> para conseguir el mismo efecto, p.ej.:</p>
-
-<pre class="brush: js">var miSolicitud = new Request('flores.jpg', miInicializador);</pre>
-
-<p>También se puede usar un objeto literal a modo de <code>headers</code> en <code>init</code>.</p>
-
-<pre class="brush: js">var miInicializador = { method: 'GET',
-                        headers: {
-                            'Content-Type': 'image/jpeg'
-                        },
-                        mode: 'cors',
-                        cache: 'default' };
-
-var myRequest = new Request('flowers.jpg', miInicializador);
-</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">Comentarios</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Fetch','#fetch-method','fetch()')}}</td>
-   <td>{{Spec2('Fetch')}}</td>
-   <td>Definida parcialmente en <code>WindowOrWorkerGlobalScope</code> en la especificación más reciente.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('Fetch','#dom-global-fetch','fetch()')}}</td>
-   <td>{{Spec2('Fetch')}}</td>
-   <td>Definición inicial</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('Credential Management')}}</td>
-   <td>{{Spec2('Credential Management')}}</td>
-   <td>Añade una instancia de {{domxref("FederatedCredential")}} o {{domxref("PasswordCredential")}} como valor posible para <code>init.credentials</code>.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
-
-
-
-<p>{{Compat("api.WindowOrWorkerGlobalScope.fetch")}}</p>
-
-<h2 id="Ver_también">Ver también</h2>
-
-<ul>
- <li><a href="/en-US/docs/Web/API/Fetch_API">Fetch API</a></li>
- <li><a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li>
- <li><a href="/en-US/docs/Web/HTTP/Access_control_CORS">Control de acceso HTTP (CORS)</a></li>
- <li><a href="/en-US/docs/Web/HTTP">HTTP</a></li>
-</ul>
diff --git a/files/es/web/api/windoworworkerglobalscope/indexeddb/index.html b/files/es/web/api/windoworworkerglobalscope/indexeddb/index.html
deleted file mode 100644
index e6ef3fe5cd..0000000000
--- a/files/es/web/api/windoworworkerglobalscope/indexeddb/index.html
+++ /dev/null
@@ -1,141 +0,0 @@
----
-title: WindowOrWorkerGlobalScope.indexedDB
-slug: Web/API/WindowOrWorkerGlobalScope/indexedDB
-translation_of: Web/API/WindowOrWorkerGlobalScope/indexedDB
----
-<p>{{ APIRef() }}</p>
-
-<p>La propiedad <strong><code>indexedDB</code></strong> del mixin {{domxref("WindowOrWorkerGlobalScope")}} proporciona un mecanismo para que las aplicaciones puedan acceder asíncronamente a las capacidades de las bases de datos indexadas.</p>
-
-<h2 id="Sintaxis">Sintaxis</h2>
-
-<pre class="brush: js">var DBOpenRequest = self.indexedDB.open('toDoList');</pre>
-
-<h3 id="Valor">Valor</h3>
-
-<p>Un objeto {{domxref("IDBFactory")}}.</p>
-
-<h2 id="Ejemplo">Ejemplo</h2>
-
-<pre class="brush: js;highlight:[3]">var db;
-function openDB() {
- var DBOpenRequest = window.indexedDB.open('toDoList');
- DBOpenRequest.onsuccess = function(e) {
-   db = DBOpenRequest.result;
- }
-}</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('IndexedDB 2', '#dom-windoworworkerglobalscope-indexeddb', 'indexedDB')}}</td>
-   <td>{{Spec2('IndexedDB 2')}}</td>
-   <td>Definido en un <code>WindowOrWorkerGlobalScope</code> parcial en la última especificación.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('IndexedDB', '#widl-IDBEnvironment-indexedDB', 'indexedDB')}}</td>
-   <td>{{Spec2('IndexedDB')}}</td>
-   <td>Definición inicial.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidad de Navegadores</h2>
-
-<div>{{CompatibilityTable}}</div>
-
-<div id="compat-desktop">
-<table class="compat-table">
- <tbody>
-  <tr>
-   <th>Característica</th>
-   <th>Chrome</th>
-   <th>Edge</th>
-   <th>Firefox (Gecko)</th>
-   <th>Internet Explorer</th>
-   <th>Opera</th>
-   <th>Safari (WebKit)</th>
-  </tr>
-  <tr>
-   <td>Soporte básico</td>
-   <td>23{{property_prefix("webkit")}}<br>
-    24</td>
-   <td>{{CompatVersionUnknown}}</td>
-   <td>10 {{property_prefix("moz")}}<br>
-    {{CompatGeckoDesktop("16.0")}}<br>
-    {{CompatGeckoDesktop("52.0")}}<sup>[1]</sup></td>
-   <td>10, parcial</td>
-   <td>15</td>
-   <td>7.1</td>
-  </tr>
-  <tr>
-   <td>Disponible en los workers</td>
-   <td>{{CompatVersionUnknown}}</td>
-   <td>{{CompatVersionUnknown}}</td>
-   <td>{{CompatGeckoMobile("37.0")}}</td>
-   <td>{{CompatUnknown}}</td>
-   <td>{{CompatVersionUnknown}}</td>
-   <td>{{CompatUnknown}}</td>
-  </tr>
- </tbody>
-</table>
-</div>
-
-<div id="compat-mobile">
-<table class="compat-table">
- <tbody>
-  <tr>
-   <th>Característica</th>
-   <th>Android</th>
-   <th>Edge</th>
-   <th>Firefox Mobile (Gecko)</th>
-   <th>Firefox OS</th>
-   <th>IE Phone</th>
-   <th>Opera Mobile</th>
-   <th>Safari Mobile</th>
-  </tr>
-  <tr>
-   <td>Soporte básico</td>
-   <td>4.4</td>
-   <td>{{CompatVersionUnknown}}</td>
-   <td>{{CompatGeckoMobile("22.0")}}<br>
-    {{CompatGeckoMobile("52.0")}}<sup>[1]</sup></td>
-   <td>1.0.1</td>
-   <td>10</td>
-   <td>22</td>
-   <td>8</td>
-  </tr>
-  <tr>
-   <td>Disponible en los workers</td>
-   <td>{{CompatVersionUnknown}}</td>
-   <td>{{CompatVersionUnknown}}</td>
-   <td>{{CompatGeckoMobile("37.0")}}</td>
-   <td>{{CompatVersionUnknown}}</td>
-   <td>{{CompatUnknown}}</td>
-   <td>{{CompatVersionUnknown}}</td>
-   <td>{{CompatUnknown}}</td>
-  </tr>
- </tbody>
-</table>
-</div>
-
-<p>[1] <code>indexedDB</code> se define ahora en el mixin {{domxref("WindowOrWorkerGlobalScope")}}.</p>
-
-<h2 id="Ver_también">Ver también</h2>
-
-<ul>
- <li><a href="/en-US/docs/Web/API/IndexedDB_API/Using_IndexedDB">Utilización de IndexedDB</a></li>
- <li>Iniciando transacciones: {{domxref("IDBDatabase")}}</li>
- <li>Usando transacciones: {{domxref("IDBTransaction")}}</li>
- <li>Estableciendo un rango de claves: {{domxref("IDBKeyRange")}}</li>
- <li>Recuperación y edición de tus datos: {{domxref("IDBObjectStore")}}</li>
- <li>Utilización de cursores: {{domxref("IDBCursor")}}</li>
- <li>Ejemplo de referencia: <a class="external" href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a class="external" href="http://mdn.github.io/to-do-notifications/">ver ejemplo <em>live</em></a>.)</li>
-</ul>
diff --git a/files/es/web/api/windoworworkerglobalscope/issecurecontext/index.html b/files/es/web/api/windoworworkerglobalscope/issecurecontext/index.html
deleted file mode 100644
index a99c499c7c..0000000000
--- a/files/es/web/api/windoworworkerglobalscope/issecurecontext/index.html
+++ /dev/null
@@ -1,86 +0,0 @@
----
-title: WindowOrWorkerGlobalScope.isSecureContext
-slug: Web/API/WindowOrWorkerGlobalScope/isSecureContext
-translation_of: Web/API/WindowOrWorkerGlobalScope/isSecureContext
----
-<p>{{APIRef()}}{{SeeCompatTable}}</p>
-
-<p>La propiedad de sólo-lectura <code><strong>isSecureContext</strong></code>, de la interface  {{domxref("WindowOrWorkerGlobalScope")}} Devuelve un booleano indicando si el contexto actual es seguro (<code>true</code>) or not (<code>false</code>).</p>
-
-<h2 id="Sintaxis">Sintaxis</h2>
-
-<pre class="syntaxbox">var <em>isItSecure</em> = self.isSecureContext; // or just isSecureContext
-</pre>
-
-<h3 id="Valor">Valor</h3>
-
-<p>Un {{domxref("Boolean")}}.</p>
-
-<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('Secure Contexts', 'webappapis.html#dom-origin', 'WindowOrWorkerGlobalScope.isSecureContext')}}</td>
-   <td>{{Spec2('Secure Contexts')}}</td>
-   <td>Definición inicial.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilidad_de_Navegadores">Compatibilidad de Navegadores</h2>
-
-<p>{{CompatibilityTable}}</p>
-
-<div id="compat-desktop">
-<table class="compat-table">
- <tbody>
-  <tr>
-   <th>Característica</th>
-   <th>Chrome</th>
-   <th>Firefox (Gecko)</th>
-   <th>Internet Explorer</th>
-   <th>Opera</th>
-   <th>Safari</th>
-  </tr>
-  <tr>
-   <td>Soporte básico</td>
-   <td>{{CompatChrome(55)}}</td>
-   <td>{{CompatGeckoDesktop(52)}}</td>
-   <td>{{CompatUnknown}}</td>
-   <td>{{CompatUnknown}}</td>
-   <td>{{CompatUnknown}}</td>
-  </tr>
- </tbody>
-</table>
-</div>
-
-<div id="compat-mobile">
-<table class="compat-table">
- <tbody>
-  <tr>
-   <th>Característica</th>
-   <th>Android Webview</th>
-   <th>Chrome para Android</th>
-   <th>Firefox Mobile (Gecko)</th>
-   <th>IE Mobile</th>
-   <th>Opera Mobile</th>
-   <th>Safari Mobile</th>
-  </tr>
-  <tr>
-   <td>Soporte básico</td>
-   <td>{{CompatChrome(55)}}</td>
-   <td>{{CompatChrome(55)}}</td>
-   <td>{{CompatGeckoMobile(52)}}</td>
-   <td>{{CompatUnknown}}</td>
-   <td>{{CompatUnknown}}</td>
-   <td>{{CompatUnknown}}</td>
-  </tr>
- </tbody>
-</table>
-</div>
diff --git a/files/es/web/api/windoworworkerglobalscope/setinterval/index.html b/files/es/web/api/windoworworkerglobalscope/setinterval/index.html
deleted file mode 100644
index a00e4b2c93..0000000000
--- a/files/es/web/api/windoworworkerglobalscope/setinterval/index.html
+++ /dev/null
@@ -1,693 +0,0 @@
----
-title: WindowTimers.setInterval()
-slug: Web/API/WindowOrWorkerGlobalScope/setInterval
-tags:
-  - API
-  - DOM
-  - Gecko
-  - Intervalos
-  - Method
-  - Temporizadores
-  - Temporizadores de JavaScript
-  - WindowTimers
-  - setInterval
-translation_of: Web/API/WindowOrWorkerGlobalScope/setInterval
-original_slug: Web/API/WindowTimers/setInterval
----
-<div>{{APIRef("HTML DOM")}}</div>
-
-<div>Ejecuta una función o un fragmento de código de forma repetitiva cada vez que termina el periodo de tiempo determinado. Devuelve un ID de proceso.</div>
-
-<div></div>
-
-<h2 id="Sintaxis">Sintaxis</h2>
-
-<pre class="syntaxbox notranslate"><em>var procesoID</em> = window.setInterval(<em>función</em>, <em>intervaloDeTiempo</em>[, <em>parámetro1</em>, <em>parámetro2</em>, ... , parámetroN]);
-<em>var procesoID</em> = window.setInterval(<em>código</em>, <em>intervaloDeTiempo</em>);
-</pre>
-
-<h3 id="Parámetros">Parámetros</h3>
-
-<dl>
- <dt><code>función</code></dt>
- <dd>La {{jsxref("function")}} que será ejecutada cada <code>intervaloDeTiempo</code> milisegundos.</dd>
- <dt><code>código</code></dt>
- <dd>Una sintaxis opcional permite introducir una cadena en lugar de una función, la cual es evaluada y ejecutada cada <code>intervaloDeTiempo</code> milisegundos. Se recomienda evitar esta sintaxis por la misma razón por la que el comando {{jsxref("eval", "eval()")}} conlleva problemas de seguridad.</dd>
- <dt><code>intervaloDeTiempo</code></dt>
- <dd>El tiempo en milisegundos (1/1000 de segundo, ms) que se debe esperar entre cada ejecución de la función o del código. Si el valor es menor que 10, se usará 10 en su lugar. El tiempo entre cada ejecución puede ser mayor al que indicamos, para mayor información puedes revisar el siguiente artículo: {{SectionOnPage("/en-US/docs/Web/API/WindowTimers/setTimeout", "Reasons for delays longer than specified")}}.</dd>
- <dt>
- <div class="note">El parámetro <strong>intervaloDeTiempo</strong> es convertido en un entero de 32 bits con signo en el IDL, por lo que el valor más grande que puede tener es 2,147,483,647 milisegundos, aproximadamente 24.8 días.</div>
- </dt>
- <dt><code>parámetro1, ..., parámetroN</code> {{optional_inline}}</dt>
- <dd>Parámetros adicionales que se pasan a la función a ejecutar.</dd>
-</dl>
-
-<div class="note">
-<p>En Internet Explorer 9 y anteriores no es posible pasar más parámetros mediante esta sintaxis. Si quieres activar esta funcionalidad en dichos navegadores deberás usar un polyfill (entra en la sección <a href="#Callback_arguments">Callback arguments</a>).</p>
-</div>
-
-<h3 id="Valor_de_Retorno">Valor de Retorno</h3>
-
-<p>El valor de retorno <code>procesoID</code> es un valor numérico distinto de cero que identifica al temporizador que fue creado al llamar <code>setInterval()</code>; este valor puede ser usado como parámetro en la función {{domxref("Window.clearInterval()")}} para detener el temporizador. Las funciones <code>setInterval()</code> y {{domxref("WindowTimers.setTimeout", "setTimeout()")}} comparten la misma pila de IDs, por lo que, técnicamente, los comandos <code>clearInterval()</code> y {{domxref("WindowTimers.clearTimeout", "clearTimeout()")}} pueden usarse indiscriminadamente. Sin embargo, por motivos de claridad y mantenimiento, es importante usarlos como corresponde.</p>
-
-<div class="blockIndicator note">
-<p><strong>Nota:</strong> El argumento <code>intervaloDeTiempo</code> se convierte aun entero con signo de 32 bits. Esto limita efectivamente al <code>intervaloDeTiempo</code> a valores de 2147483647 ms, ya que se especifica como entero con signo en el IDL.</p>
-</div>
-
-<h2 id="Ejemplos">Ejemplos</h2>
-
-<h3 id="Ejemplo_1_Sintaxis_básica">Ejemplo 1: Sintaxis básica</h3>
-
-<p>El siguiente ejemplo muestra la sintaxis básica.</p>
-
-<pre class="brush:js notranslate">var intervalID = window.setInterval(miFuncion, 500, 'Parametro 1', 'Parametro 2');
-
-function miFuncion(a,b) {
-  // Aquí va tu código
-  // Los parámetros son opcionales completamente
-  console.log(a);
-  console.log(b);
-}
-</pre>
-
-<h3 id="Ejemplo_2_Alternando_dos_colores">Ejemplo 2: Alternando dos colores</h3>
-
-<p>El siguiente ejemplo se llama a la función <code>flashtext()</code> una vez por segundo hasta que se presiona el botón Detener.</p>
-
-<pre class="brush:html notranslate">&lt;!DOCTYPE html&gt;
-&lt;html&gt;
-&lt;head&gt;
-  &lt;meta charset="UTF-8" /&gt;
-  &lt;title&gt;Ejemplo de setInterval/clearInterval&lt;/title&gt;
-  &lt;script&gt;
-     var nIntervId;
-
-     function cambiaDeColor() {
-        nIntervId = setInterval(flasheaTexto, 1000);
-     }
-
-     function flasheaTexto() {
-        var oElem = document.getElementById('mi_mensaje');
-        oElem.style.color = oElem.style.color == 'red' ? 'blue' : 'red';
-        //oElem.style.color ... es un operador ternario o condicional
-     }
-
-     function detenerCambioDeColor() {
-        clearInterval(nIntervId);
-     }
-  &lt;/script&gt;
-&lt;/head&gt;
-&lt;body onload="cambiaDeColor();"&gt;
-  &lt;div id="mi_mensaje"&gt;
-    &lt;p&gt;¡Hola mundo!&lt;/p&gt;
-  &lt;/div&gt;
-  &lt;button onclick="detenerCambioDeColor();"&gt;Detener&lt;/button&gt;
-&lt;/body&gt;
-&lt;/html&gt;
-</pre>
-
-<h3 id="Ejemplo_3_Simulando_una_máquina_de_escribir">Ejemplo 3: Simulando una máquina de escribir</h3>
-
-<p>El siguiente ejemplo simula una máquina de escribir, primero borra el contenido de una lista de nodos (<code><a href="/en-US/docs/DOM/NodeList">NodeList</a>)</code> que coinciden con un grupo de selectores y después lo escribe lentamente.</p>
-
-<pre class="brush:html notranslate">&lt;!DOCTYPE html&gt;
-&lt;html&gt;
-&lt;head&gt;
-&lt;meta charset="UTF-8" /&gt;
-&lt;title&gt;Máquina de Escribir con JavaScript&lt;/title&gt;
-&lt;script&gt;
-  function maquinaEscribir (sSelector, nRate) {
-
-      function limpiar () {
-        clearInterval(nIntervId);
-        bTyping = false;
-        bStart = true;
-        oCurrent = null;
-        aSheets.length = nIdx = 0;
-      }
-
-      function desplazarse (oSheet, nPos, bEraseAndStop) {
-        if (!oSheet.hasOwnProperty("parts") || aMap.length &lt; nPos) { return true; }
-
-        var oRel, bExit = false;
-
-        if (aMap.length === nPos) { aMap.push(0); }
-
-        while (aMap[nPos] &lt; oSheet.parts.length) {
-          oRel = oSheet.parts[aMap[nPos]];
-
-          desplazarse(oRel, nPos + 1, bEraseAndStop) ? aMap[nPos]++ : bExit = true;
-
-          if (bEraseAndStop &amp;&amp; (oRel.ref.nodeType - 1 | 1) === 3 &amp;&amp; oRel.ref.nodeValue) {
-            bExit = true;
-            oCurrent = oRel.ref;
-            sPart = oCurrent.nodeValue;
-            oCurrent.nodeValue = "";
-          }
-
-          oSheet.ref.appendChild(oRel.ref);
-          if (bExit) { return false; }
-        }
-
-        aMap.length--;
-        return true;
-      }
-
-      function mecanografear () {
-        if (sPart.length === 0 &amp;&amp; desplazarse(aSheets[nIdx], 0, true) &amp;&amp; nIdx++ === aSheets.length - 1) { limpiar(); return; }
-
-        oCurrent.nodeValue += sPart.charAt(0);
-        sPart = sPart.slice(1);
-      }
-
-      function Hoja (oNode) {
-        this.ref = oNode;
-        if (!oNode.hasChildNodes()) { return; }
-        this.parts = Array.prototype.slice.call(oNode.childNodes);
-
-        for (var nChild = 0; nChild &lt; this.parts.length; nChild++) {
-          oNode.removeChild(this.parts[nChild]);
-          this.parts[nChild] = new Hoja(this.parts[nChild]);
-        }
-      }
-
-      var
-        nIntervId, oCurrent = null, bTyping = false, bStart = true,
-        nIdx = 0, sPart = "", aSheets = [], aMap = [];
-
-      this.rate = nRate || 100;
-
-      this.ejecuta = function () {
-        if (bTyping) { return; }
-        if (bStart) {
-          var aItems = document.querySelectorAll(sSelector);
-
-          if (aItems.length === 0) { return; }
-          for (var nItem = 0; nItem &lt; aItems.length; nItem++) {
-            aSheets.push(new Hoja(aItems[nItem]));
-            /* Uncomment the following line if you have previously hidden your elements via CSS: */
-            // aItems[nItem].style.visibility = "visible";
-          }
-
-          bStart = false;
-        }
-
-        nIntervId = setInterval(mecanografear, this.rate);
-        bTyping = true;
-      };
-
-      this.pausa = function () {
-        clearInterval(nIntervId);
-        bTyping = false;
-      };
-
-      this.finaliza = function () {
-        oCurrent.nodeValue += sPart;
-        sPart = "";
-        for (nIdx; nIdx &lt; aSheets.length; desplazarse(aSheets[nIdx++], 0, false));
-        limpiar();
-      };
-  }
-
-    /* usage: */
-    var oTWExample1 = new maquinaEscribir(/* elements: */ "#article, h1, #info, #copyleft", /* frame rate (optional): */ 15);
-
-    /* default frame rate is 100: */
-    var oTWExample2 = new maquinaEscribir("#controls");
-
-    /* you can also change the frame rate value modifying the "rate" property; for example: */
-    // oTWExample2.rate = 150;
-
-    onload = function () {
-      oTWExample1.ejecuta();
-      oTWExample2.ejecuta();
-    };
-&lt;/script&gt;
-&lt;style type="text/css"&gt;
-span.intLink, a, a:visited {
-  cursor: pointer;
-  color: #000000;
-  text-decoration: underline;
-}
-
-#info {
-  width: 180px;
-  height: 150px;
-  float: right;
-  background-color: #eeeeff;
-  padding: 4px;
-  overflow: auto;
-  font-size: 12px;
-  margin: 4px;
-  border-radius: 5px;
-  /* visibility: hidden; */
-}
-&lt;/style&gt;
-&lt;/head&gt;
-
-&lt;body&gt;
-
-&lt;p id="copyleft" style="font-style: italic; font-size: 12px; text-align: center;"&gt;CopyLeft 2012 by &lt;a href="https://developer.mozilla.org/" target="_blank"&gt;Mozilla Developer Network&lt;/a&gt;&lt;/p&gt;
-&lt;p id="controls" style="text-align: center;"&gt;[&amp;nbsp;&lt;span class="intLink" onclick="oTWExample1.ejecuta();"&gt;Ejecutar&lt;/span&gt; | &lt;span class="intLink" onclick="oTWExample1.pausa();"&gt;Pausar&lt;/span&gt; | &lt;span class="intLink" onclick="oTWExample1.finaliza();"&gt;Terminar&lt;/span&gt;&amp;nbsp;]&lt;/p&gt;
-&lt;div id="info"&gt;
-Vivamus blandit massa ut metus mattis in fringilla lectus imperdiet. Proin ac ante a felis ornare vehicula. Fusce pellentesque lacus vitae eros convallis ut mollis magna pellentesque. Pellentesque placerat enim at lacus ultricies vitae facilisis nisi fringilla. In tincidunt tincidunt tincidunt.
-&lt;/div&gt;
-&lt;h1&gt;Maquina de Escribir en JavaScript &lt;/h1&gt;
-
-&lt;div id="article"&gt;
-&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ultrices dolor ac dolor imperdiet ullamcorper. Suspendisse quam libero, luctus auctor mollis sed, malesuada condimentum magna. Quisque in ante tellus, in placerat est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec a mi magna, quis mattis dolor. Etiam sit amet ligula quis urna auctor imperdiet nec faucibus ante. Mauris vel consectetur dolor. Nunc eget elit eget velit pulvinar fringilla consectetur aliquam purus. Curabitur convallis, justo posuere porta egestas, velit erat ornare tortor, non viverra justo diam eget arcu. Phasellus adipiscing fermentum nibh ac commodo. Nam turpis nunc, suscipit a hendrerit vitae, volutpat non ipsum.&lt;/p&gt;
-&lt;form&gt;
-&lt;p&gt;Phasellus ac nisl lorem: &lt;input type="text" /&gt;&lt;br /&gt;
-&lt;textarea style="width: 400px; height: 200px;"&gt;Nullam commodo suscipit lacus non aliquet. Phasellus ac nisl lorem, sed facilisis ligula. Nam cursus lobortis placerat. Sed dui nisi, elementum eu sodales ac, placerat sit amet mauris. Pellentesque dapibus tellus ut ipsum aliquam eu auctor dui vehicula. Quisque ultrices laoreet erat, at ultrices tortor sodales non. Sed venenatis luctus magna, ultricies ultricies nunc fringilla eget. Praesent scelerisque urna vitae nibh tristique varius consequat neque luctus. Integer ornare, erat a porta tempus, velit justo fermentum elit, a fermentum metus nisi eu ipsum. Vivamus eget augue vel dui viverra adipiscing congue ut massa. Praesent vitae eros erat, pulvinar laoreet magna. Maecenas vestibulum mollis nunc in posuere. Pellentesque sit amet metus a turpis lobortis tempor eu vel tortor. Cras sodales eleifend interdum.&lt;/textarea&gt;&lt;/p&gt;
-&lt;p&gt;&lt;input type="submit" value="Send" /&gt;
-&lt;/form&gt;
-&lt;p&gt;Duis lobortis sapien quis nisl luctus porttitor. In tempor semper libero, eu tincidunt dolor eleifend sit amet. Ut nec velit in dolor tincidunt rhoncus non non diam. Morbi auctor ornare orci, non euismod felis gravida nec. Curabitur elementum nisi a eros rutrum nec blandit diam placerat. Aenean tincidunt risus ut nisi consectetur cursus. Ut vitae quam elit. Donec dignissim est in quam tempor consequat. Aliquam aliquam diam non felis convallis suscipit. Nulla facilisi. Donec lacus risus, dignissim et fringilla et, egestas vel eros. Duis malesuada accumsan dui, at fringilla mauris bibStartum quis. Cras adipiscing ultricies fermentum. Praesent bibStartum condimentum feugiat.&lt;/p&gt;
-&lt;p&gt;Nam faucibus, ligula eu fringilla pulvinar, lectus tellus iaculis nunc, vitae scelerisque metus leo non metus. Proin mattis lobortis lobortis. Quisque accumsan faucibus erat, vel varius tortor ultricies ac. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec libero nunc. Nullam tortor nunc, elementum a consectetur et, ultrices eu orci. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a nisl eu sem vehicula egestas.&lt;/p&gt;
-&lt;/div&gt;
-&lt;/body&gt;
-&lt;/html&gt;
-</pre>
-
-<p><a href="/files/3997/typewriter.html">Observa este ejemplo en acción</a>. Ver más: <a href="/en-US/docs/DOM/window.clearInterval"><code>clearInterval()</code></a>.</p>
-
-<h2 id="Argumentos_de_Callback">Argumentos de Callback</h2>
-
-<p>Como se mencionó previamente Internet Explorer version 9 y anteriores no soportan el pasar argumentos a la función Callback en <code>setTimeout()</code> ni en <code>setInterval()</code>. El siguiente código específico de Internet Explorer muestra un método de superar esta limitante. Para usarlo basta añadir el código marcado al inicio de tu script.</p>
-
-<pre class="brush:js notranslate">/*\
-|*|
-|*|  IE-specific polyfill that enables the passage of arbitrary arguments to the
-|*|  callback functions of javascript timers (HTML5 standard syntax).
-|*|
-|*|  https://developer.mozilla.org/en-US/docs/Web/API/window.setInterval
-|*|  https://developer.mozilla.org/User:fusionchess
-|*|
-|*|  Syntax:
-|*|  var timeoutID = window.setTimeout(func, delay[, param1, param2, ...]);
-|*|  var timeoutID = window.setTimeout(code, delay);
-|*|  var intervalID = window.setInterval(func, delay[, param1, param2, ...]);
-|*|  var intervalID = window.setInterval(code, delay);
-|*|
-\*/
-
-if (document.all &amp;&amp; !window.setTimeout.isPolyfill) {
-  var __nativeST__ = window.setTimeout;
-  window.setTimeout = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) {
-    var aArgs = Array.prototype.slice.call(arguments, 2);
-    return __nativeST__(vCallback instanceof Function ? function () {
-      vCallback.apply(null, aArgs);
-    } : vCallback, nDelay);
-  };
-  window.setTimeout.isPolyfill = true;
-}
-
-if (document.all &amp;&amp; !window.setInterval.isPolyfill) {
-  var __nativeSI__ = window.setInterval;
-  window.setInterval = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) {
-    var aArgs = Array.prototype.slice.call(arguments, 2);
-    return __nativeSI__(vCallback instanceof Function ? function () {
-      vCallback.apply(null, aArgs);
-    } : vCallback, nDelay);
-  };
-  window.setInterval.isPolyfill = true;
-}
-</pre>
-
-<p>Otra posible solución es el usar funciones anónimas para llamar al Callback, aunque esta solución es un poco más cara. Ejemplo:</p>
-
-<pre class="brush:js notranslate">var intervalID = setInterval(function() { myFunc("one", "two", "three"); }, 1000);</pre>
-
-<p>También puedes hacer uso de <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind">function's bind</a>. Ejemplo:</p>
-
-<pre class="brush:js notranslate">var intervalID = setInterval(function(arg1) {}.bind(undefined, 10), 1000);</pre>
-
-<p>{{h3_gecko_minversion("Inactive tabs", "5.0")}}</p>
-
-<p>A partir de Gecko 5.0 {{geckoRelease("5.0")}}, los intervalos no se disparan más de una vez por segundo en las pestañas inactivas.</p>
-
-<h2 id="Problemas_usando_this">Problemas usando "<a href="/en-US/docs/Web/JavaScript/Reference/Operators/this"><code>this</code></a>"</h2>
-
-<p>Cuando pasas el método de un objeto a la función <code>setInterval()</code> éste es invocado fuera de su contexto. Esto puede crear un valor de <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this"><code>this</code></a> que puede no ser el esperado. Este problema es abordado en detalle en <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this#As_an_object_method">JavaScript reference</a>.</p>
-
-<h3 id="Explicación">Explicación</h3>
-
-<p>Cuando <code>setInterval() o setTimeOut()</code> ejecuta un determinado código o función, ésta corre en un contexto de ejecución separado al de la función en la que se creó dicho temporizador. Por esta razón a la palabra clave <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this"><code>this</code></a> se le asigna el valor del objeto <code>window</code> (o el objeto <code>global</code>), no es igual que usar <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this"><code>this</code></a> dentro de una fuinción que invoque a <code>setTimeOut()</code>. Observa el siguiente ejemplo (que utiliza <code>setTimeOut()</code> en lugar de <code>setInterval()</code> – el problema, de hecho, es el mismo para ambos temporizadores):</p>
-
-<pre class="brush:js notranslate">miArreglo = ["cero", "uno", "dos"];
-
-miArreglo.miMetodo = function (sPropiedad) {
-    alert(arguments.length &gt; 0 ? this[sPropiedad] : this);
-};
-
-miArreglo.miMetodo(); // imprime "cero,uno,dos"
-miArreglo.miMetodo(1); // imprime "uno"
-setTimeout(miArreglo.miMetodo, 1000); // imprime "[object Window]" despues de 1 segundo
-setTimeout(miArreglo.miMetodo, 1500, "1"); // imprime "undefined" despues de 1,5 segundos
-// tratemos de pasar el objeto 'this'
-setTimeout.call(miArreglo, miArreglo.miMetodo, 2000); // error: "NS_ERROR_XPC_BAD_OP_ON_WN_PROTO: Illegal operation on WrappedNative prototype object"
-setTimeout.call(miArreglo, miArreglo.miMetodo, 2500, 2); // same error</pre>
-
-<p>Como puedes ver no hay forma de pasar el objeto <code>this</code> a la función de Callback en la versión anterior de JavaScript.</p>
-
-<h3 id="Una_posible_solución">Una posible solución</h3>
-
-<p>Una posible alternativa para resolver ésto es reemplazar las dos funciones globales nativas <code>setTimeout()</code> y <code>setInterval()</code> con las siguientes funciones no nativas que permiten su ejecución a través del método <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Function/call"><code>Function.prototype.call</code></a>. El siguiente ejemplo muestra una posible sustitución:</p>
-
-<pre class="brush:js notranslate">// Permite el pase del objeto 'this' a través de temporizadores JavaScript
-
-var __nativeST__ = window.setTimeout, __nativeSI__ = window.setInterval;
-
-window.setTimeout = function (vCallback, nDelay /*, argumentoAPasar1, argumentuAPasar2, etc. */) {
-  var oThis = this, aArgs = Array.prototype.slice.call(arguments, 2);
-  return __nativeST__(vCallback instanceof Function ? function () {
-    vCallback.apply(oThis, aArgs);
-  } : vCallback, nDelay);
-};
-
-window.setInterval = function (vCallback, nDelay /*, argumentoAPasar1, argumentoAPasar2, etc. */) {
-  var oThis = this, aArgs = Array.prototype.slice.call(arguments, 2);
-  return __nativeSI__(vCallback instanceof Function ? function () {
-    vCallback.apply(oThis, aArgs);
-  } : vCallback, nDelay);
-};
-</pre>
-
-<div class="note">Estos dos reemplazos también permiten el camino estándar en HTML5 de pasar argumentos arbitrarios a las funciones de Callback de los temporizadores dentro de IE. Por lo tanto, pueden utilizarse como rellenos (polyfills) <em>no estándar</em>. Para más información vea <a href="#Callback_arguments">callback arguments paragraph</a>.</div>
-
-<p>Prueba de nueva funcionalidad:</p>
-
-<pre class="brush:js notranslate">miArreglo = ["cero", "uno", "dos"];
-
-miArreglo.miMetodo = function (sProperty) {
-    alert(arguments.length &gt; 0 ? this[sProperty] : this);
-};
-
-setTimeout(alert, 1500, "Hola Mundo!"); // la utilizacion estandar de setTimeout y de setInterval se mantiene, pero...
-setTimeout.call(miArreglo, miArreglo.miMetodo, 2000); // imprime "cero,uno,dos" despues de 2 segundos
-setTimeout.call(miArreglo, miArreglo.miMetodo, 2500, 2); // imprime "dos" despues de 2,5 segundos
-</pre>
-
-<p>Otra solución más compleja está en la siguiente liga de <a href="#A_little_framework">framework</a>.</p>
-
-<div class="note">JavaScript 1.8.5 introduce el método <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind">Function.prototype.bind()</a></code>, el cual permite especificar el valor de <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this"><code>this</code></a> para todas sus llamadas en una determinada función. Esto permite sobrellevar facilmente diferentes problemas de contexto con el uso de la palabra <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this"><code>this</code></a>. También, ES2015 soporta <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions">arrow functions</a>, dentro del lenguaje nos permite escribir cosas como setInterval( () =&gt; this.myMethod) si estamos dentro del método de miArreglo .</div>
-
-<h2 id="MiniDaemon_-_Un_framework_para_administrar_temporizadores">MiniDaemon - Un framework para administrar temporizadores</h2>
-
-<p>En proyectos que requieren muchos temporizadores puede volverse complicado el seguimiento de todos los eventos generados. Una forma de facilitar la administración de timers es guardando sus estados en un objeto. El siguiente ejemplo muestra este tipo de abstracción, la arquitectura del constructor evita explicitamente el uso de cerraduras. También ofrece un camino alternativo para pasar el objeto <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this"><code>this</code></a> a la función de Callback (observa la sección Problemas usando "<a href="/en-US/docs/Web/JavaScript/Reference/Operators/this"><code>this</code></a>" para más detalles). Puedes consultar también el siguiente código en<a href="https://github.com/madmurphy/minidaemon.js"> GitHub</a>.</p>
-
-<div class="note">Para una versión más modular de este (<code><em>Daemon)</em></code>puedes verlo en <a href="/en-US/Add-ons/Code_snippets/Timers/Daemons">JavaScript Daemons Management</a>. Aquí encontrarás una versión mas complicada que se reduce a una colección escalable de métodos para el constructor <code><em>Daemon</em></code>. Éste constructor no es más que un clon del  <code><em>MiniDaemon</em></code> con soporte para las funciones <em>init</em> y <em>onstart</em> declarables durante la instanciación del mismo. Por esto el <strong><code><em>MiniDaemon</em></code> framework </strong>se mantiene como el camino recomendado para realizar animaciones simples.</div>
-
-<h3 id="minidaemon.js">minidaemon.js</h3>
-
-<pre class="brush:js notranslate">/*\
-|*|
-|*|  :: MiniDaemon ::
-|*|
-|*|  Revision #2 - September 26, 2014
-|*|
-|*|  https://developer.mozilla.org/en-US/docs/Web/API/window.setInterval
-|*|  https://developer.mozilla.org/User:fusionchess
-|*|  https://github.com/madmurphy/minidaemon.js
-|*|
-|*|  This framework is released under the GNU Lesser General Public License, version 3 or later.
-|*|  http://www.gnu.org/licenses/lgpl-3.0.html
-|*|
-\*/
-
-function MiniDaemon (oOwner, fTask, nRate, nLen) {
-  if (!(this &amp;&amp; this instanceof MiniDaemon)) { return; }
-  if (arguments.length &lt; 2) { throw new TypeError("MiniDaemon - not enough arguments"); }
-  if (oOwner) { this.owner = oOwner; }
-  this.task = fTask;
-  if (isFinite(nRate) &amp;&amp; nRate &gt; 0) { this.rate = Math.floor(nRate); }
-  if (nLen &gt; 0) { this.length = Math.floor(nLen); }
-}
-
-MiniDaemon.prototype.owner = null;
-MiniDaemon.prototype.task = null;
-MiniDaemon.prototype.rate = 100;
-MiniDaemon.prototype.length = Infinity;
-
-  /* These properties should be read-only */
-
-MiniDaemon.prototype.SESSION = -1;
-MiniDaemon.prototype.INDEX = 0;
-MiniDaemon.prototype.PAUSED = true;
-MiniDaemon.prototype.BACKW = true;
-
-  /* Global methods */
-
-MiniDaemon.forceCall = function (oDmn) {
-  oDmn.INDEX += oDmn.BACKW ? -1 : 1;
-  if (oDmn.task.call(oDmn.owner, oDmn.INDEX, oDmn.length, oDmn.BACKW) === false || oDmn.isAtEnd()) { oDmn.pause(); return false; }
-  return true;
-};
-
-  /* Instances methods */
-
-MiniDaemon.prototype.isAtEnd = function () {
-  return this.BACKW ? isFinite(this.length) &amp;&amp; this.INDEX &lt; 1 : this.INDEX + 1 &gt; this.length;
-};
-
-MiniDaemon.prototype.synchronize = function () {
-  if (this.PAUSED) { return; }
-  clearInterval(this.SESSION);
-  this.SESSION = setInterval(MiniDaemon.forceCall, this.rate, this);
-};
-
-MiniDaemon.prototype.pause = function () {
-  clearInterval(this.SESSION);
-  this.PAUSED = true;
-};
-
-MiniDaemon.prototype.start = function (bReverse) {
-  var bBackw = Boolean(bReverse);
-  if (this.BACKW === bBackw &amp;&amp; (this.isAtEnd() || !this.PAUSED)) { return; }
-  this.BACKW = bBackw;
-  this.PAUSED = false;
-  this.synchronize();
-};
-</pre>
-
-<div class="note">MiniDaemon pasa argumentos a la función callback. Si quieres trabajar con ellos en navegadores que no soportan nativamente esta característica, usa uno de los métodos propuestos arriba.</div>
-
-<h3 id="Sintaxis_2">Sintaxis</h3>
-
-<p><code>var myDaemon = new MiniDaemon(<em>thisObject</em>, <em>callback</em>[</code><code>, <em>rate</em></code><code>[, <em>length</em>]]);</code></p>
-
-<h3 id="Descripción">Descripción</h3>
-
-<p>Regresa un <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object">Objecto</a></code> que contiene la información necesaria para una animación (como el objeto <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this"><code>this</code></a>, la función de Callback, la duración y el frame-rate).</p>
-
-<h4 id="Parámetros_2">Parámetros</h4>
-
-<dl>
- <dt><code>thisObject</code></dt>
- <dd>El valor de la palabra <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this"><code>this</code></a> sobre el cual funcionará la función de <em>Callback. </em>Puede ser un <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object"><code>objecto</code></a> o <code>null</code>.</dd>
- <dt><code>callback</code></dt>
- <dd>La función que se invocará repetidas veces. Dicha función se invocará con tres parámetros: <em>index</em> que corresponde al valor iterativo de cada invocación, <em>length</em> que es el número total de invocaciones asignadas al <em>daemon</em> (puede ser un valor finito o <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Infinity"><code>Infinity</code></a>) y <em>backwards</em> (valor booleano que expresa cuando el valor de <em>index</em> es creciente o decreciente). Es similar a <em>callback</em>.call(<em>thisObject</em>, <em>index</em>, <em>length</em>, <em>backwards</em>). Si la función de Callback regresa un valor false el deamon se detiene.</dd>
- <dt><code>rate (optional)</code></dt>
- <dd>El tiempo minimo en milisegundos que transcurre entre cada invocación. El valor por omisión es 100.</dd>
- <dt><code>length (optional)</code></dt>
- <dd>El número total de invocaciones. Puede ser un valor entero positivo o <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Infinity"><code>Infinity</code></a>. El valor por omisión es <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Infinity">Infinity</a>.</code></dd>
-</dl>
-
-<h4 id="Propiedades_de_la_intancia_MiniDaemon"><code>Propiedades de la intancia MiniDaemon</code> </h4>
-
-<dl>
- <dt><code>myDaemon.owner</code></dt>
- <dd>El objeto <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this"><code>this</code></a> sobre el cual se ejecuta el daemon (lectura/escritura). Puede ser un <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object"><code>objecto</code></a> o <code>null</code>.</dd>
- <dt><code>myDaemon.task</code></dt>
- <dd>La función que se invocará repetidas veces. Dicha función se invocará con tres parámetros: <em>index</em> que corresponde al valor iterativo de cada invocación, <em>length</em> que es el número total de invocaciones asignadas al <em>daemon</em> (puede ser un valor finito o <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Infinity"><code>Infinity</code></a>) y <em>backwards</em> (valor booleano que expresa cuando el valor de <em>index</em> es creciente o decreciente). Es similar a <em>callback</em>.call(<em>thisObject</em>, <em>index</em>, <em>length</em>, <em>backwards</em>). Si la función de Callback regresa un valor false el deamon se detiene.</dd>
- <dt><code>myDaemon.rate</code></dt>
- <dd>El tiempo minimo en milisegundos que transcurre entre cada invocación. El valor por omición es 100 (lectura/escritura).</dd>
- <dt><code>myDaemon.length</code></dt>
- <dd>El número total de invocaciones. Puede ser un valor entero positivo o <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Infinity"><code>Infinity</code></a>. El valor por omición es <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Infinity">Infinity</a> </code>(lectura/escritura).</dd>
-</dl>
-
-<h4 id="MiniDaemon_instances_methods"><code>MiniDaemon</code> instances methods</h4>
-
-<dl>
- <dt><code>myDaemon.isAtEnd()</code></dt>
- <dd>Regresa un valor boleano que expresa cuando el <em>daemon</em> está en posición de inicio/fin o no.</dd>
- <dt><code>myDaemon.synchronize()</code></dt>
- <dd>Sincroniza el tiempo de un deamon iniciado con el tiempo de su invocación.</dd>
- <dt><code>myDaemon.pause()</code></dt>
- <dd>Pausa el deamon.</dd>
- <dt><code>myDaemon.start([<em>reverse</em>])</code></dt>
- <dd>Inicia el daemon hacia adelante "forward" (el indice de cada invocación se incrementa) o hacia atrás "backwards" (el índice de cada invocación se decrementa).</dd>
-</dl>
-
-<h4 id="Métodos_del_objeto_global_del_MiniDaemon">Métodos del objeto global del <code>MiniDaemon</code></h4>
-
-<dl>
- <dt><code>MiniDaemon.forceCall(<em>minidaemon</em>)</code></dt>
- <dd>Fuerza una sola función callback a la función <code><em>minidaemon</em>.task</code>  en lugar del hecho de que se ha alcanzado el final o no. En cualquier caso la propiedad INDEX interna crece o decrece según la dirección del proceso.</dd>
-</dl>
-
-<h3 id="Ejemplo_de_uso">Ejemplo de uso</h3>
-
-<p>Tu página HTML:</p>
-
-<pre class="brush:html notranslate">&lt;!DOCTYPE html&gt;
-&lt;html&gt;
-&lt;head&gt;
-  &lt;meta charset="UTF-8" /&gt;
-  &lt;title&gt;MiniDaemin Example - MDN&lt;/title&gt;
-  &lt;script type="text/javascript" src="minidaemon.js"&gt;&lt;/script&gt;
-  &lt;style type="text/css"&gt;
-    #sample_div {
-      visibility: hidden;
-    }
-  &lt;/style&gt;
-&lt;/head&gt;
-
-&lt;body&gt;
-  &lt;p&gt;
-    &lt;input type="button" onclick="fadeInOut.start(false /* optional */);" value="fade in" /&gt;
-    &lt;input type="button" onclick="fadeInOut.start(true);" value="fade out"&gt;
-    &lt;input type="button" onclick="fadeInOut.pause();" value="pause" /&gt;
-  &lt;/p&gt;
-
-  &lt;div id="sample_div"&gt;Some text here&lt;/div&gt;
-
-  &lt;script type="text/javascript"&gt;
-    function opacity (nIndex, nLength, bBackwards) {
-      this.style.opacity = nIndex / nLength;
-      if (bBackwards ? nIndex === 0 : nIndex === 1) {
-        this.style.visibility = bBackwards ? "hidden" : "visible";
-      }
-    }
-
-    var fadeInOut = new MiniDaemon(document.getElementById("sample_div"), opacity, 300, 8);
-  &lt;/script&gt;
-&lt;/body&gt;
-&lt;/html&gt;</pre>
-
-<p><a href="/files/3995/minidaemon_example.html" title="MiniDaemon Example">Prueba este ejemplo</a></p>
-
-<h2 id="Notas">Notas</h2>
-
-<p>La función<code> setInterval()</code> es usada frecuentemente para asignar una pausa para ejecutar funciones recurrentes, como por ejemplo pintar el siguiente cuadro de una animación.</p>
-
-<p>Puedes cancelar el ciclo iniciado por un <code>setInterval() </code>usando el comando <a href="/en-US/docs/Web/API/WindowTimers/clearInterval"><code>window.clearInterval()</code></a>.</p>
-
-<p>Si solo deseas ejecutar el ciclo una sola vez despues de una pausa usa en su lugar la función <a href="/en-US/docs/Web/API/WindowTimers/setTimeout"><code>window.setTimeout()</code></a>.</p>
-
-<h3 id="Asegúrate_que_el_tiempo_de_ejecución_sea_menor_que_la_frecuencia">Asegúrate que el tiempo de ejecución sea menor que la frecuencia</h3>
-
-<p>Si existe la posibilidad de que tu función o el código a ejecutarse una y otra vez exeda el tiempo marcado en cada intervalo es recomendado que uses recursivamente el nombre de tu función usando <code><a href="/en-US/docs/Web/API/WindowTimers/setTimeout">window.setTimeout</a></code>. Por ejemplo, si usas <code>setInterval </code>para hacer llamadas a un servidor remoto cada 5 segundos, la latencia en la red, un servidor que no responde, o cualquier otro tipo de contratiempo puede generar una pausa mayor a la que indicaste. De esta forma terminarás con solicitudes XHR apiladas que no se resolverán necesariamente en orden.</p>
-
-<p>En estos casos llamadas con un patrón de <code>setTimeout()</code> recursivo es preferible:</p>
-
-<pre class="brush:js notranslate">(function loop(){
-   setTimeout(function() {
-      // Your logic here
-
-      loop();
-  }, delay);
-})();
-</pre>
-
-<p>En este fragmento de código, la función <code>loop()</code> es declarada y es ejecutada inmediatamente. La función <code>loop()</code> es invocada de forma recursiva dentro de <code>setTimeout()</code> despues de cada ejecución. Si bien este patrón no garantiza una ejecución a intervalos fijos, si garantiza que nunca se ejecutará un paso sin que se haya finalizado el anterior. </p>
-
-<h2 id="Especificaciones">Especificaciones</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th>Especificaciones</th>
-   <th>Estatus</th>
-   <th>Comentarios</th>
-  </tr>
-  <tr>
-   <td>{{SpecName("HTML WHATWG", "webappapis.html#dom-setinterval", "WindowTimers.setInterval()")}}</td>
-   <td>{{Spec2("HTML WHATWG")}}</td>
-   <td>Definición inicial (DOM Level 0)</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilidad">Compatibilidad</h2>
-
-<div>{{CompatibilityTable}}</div>
-
-<div id="compat-desktop">
-<table class="compat-table">
- <tbody>
-  <tr>
-   <th>Característica</th>
-   <th>Chrome</th>
-   <th>Firefox (Gecko)<sup>[2]</sup></th>
-   <th>Internet Explorer</th>
-   <th>Opera</th>
-   <th>Safari</th>
-  </tr>
-  <tr>
-   <td>Soporte básico</td>
-   <td>1.0</td>
-   <td>{{CompatGeckoDesktop("1")}}</td>
-   <td>4.0</td>
-   <td>4.0</td>
-   <td>1.0</td>
-  </tr>
-  <tr>
-   <td>Soporta parámetros para callback<sup>[1]</sup></td>
-   <td>{{CompatVersionUnknown}}</td>
-   <td>{{CompatVersionUnknown}}</td>
-   <td>10.0</td>
-   <td>{{CompatVersionUnknown}}</td>
-   <td>{{CompatUnknown}}</td>
-  </tr>
- </tbody>
-</table>
-</div>
-
-<div id="compat-mobile">
-<table class="compat-table">
- <tbody>
-  <tr>
-   <th>Característica</th>
-   <th>Android</th>
-   <th>Chrome for Android</th>
-   <th>Firefox Mobile (Gecko)</th>
-   <th>IE Mobile</th>
-   <th>Opera Mobile</th>
-   <th>Safari Mobile</th>
-  </tr>
-  <tr>
-   <td>Soporte básico</td>
-   <td>1.0</td>
-   <td>1.0</td>
-   <td>{{CompatGeckoMobile("1")}}</td>
-   <td>6.0</td>
-   <td>6.0</td>
-   <td>1.0</td>
-  </tr>
-  <tr>
-   <td>Soporta parámetros para callback<sup>[1]</sup></td>
-   <td>{{CompatUnknown}}</td>
-   <td>{{CompatUnknown}}</td>
-   <td>{{CompatUnknown}}</td>
-   <td>{{CompatUnknown}}</td>
-   <td>{{CompatUnknown}}</td>
-   <td>{{CompatUnknown}}</td>
-  </tr>
- </tbody>
-</table>
-</div>
-
-<p>[1] Whether it supports the optional parameters when in its first form or not.</p>
-
-<p>[2] Anterior a Firefox 13, Firefox pasaba un parametro adicional al callback, indicando el "actual lateness" del timeout en milisegundos. Este parámetro no estandar dejó de usarse en versiones posteriores a Firefox 13. No es recomendable que extensiones basadas en XPCOM para Firefox usen setInterval(), ya que las actualizaciones pueden causar el que el objeto {{domxref("Window")}} se actualice perdiendo los temporizadores. Deberás usar en su lugar {{interface("nsITimer")}}.</p>
-
-<h2 id="Ver_más">Ver más</h2>
-
-<ul>
- <li><a href="/en-US/Add-ons/Code_snippets/Timers">JavaScript timers</a></li>
- <li>{{domxref("WindowTimers.setTimeout")}}</li>
- <li>{{domxref("WindowTimers.clearTimeout")}}</li>
- <li>{{domxref("WindowTimers.clearInterval")}}</li>
- <li>{{domxref("window.requestAnimationFrame")}}</li>
- <li><a href="/en-US/Add-ons/Code_snippets/Timers/Daemons"><em>Daemons</em> management</a></li>
-</ul>
diff --git a/files/es/web/api/windoworworkerglobalscope/settimeout/index.html b/files/es/web/api/windoworworkerglobalscope/settimeout/index.html
deleted file mode 100644
index 7b15ffa392..0000000000
--- a/files/es/web/api/windoworworkerglobalscope/settimeout/index.html
+++ /dev/null
@@ -1,341 +0,0 @@
----
-title: WindowOrWorkerGlobalScope.setTimeout
-slug: Web/API/WindowOrWorkerGlobalScope/setTimeout
-tags:
-  - API
-  - HTML DOM
-  - WindowOrWorkerGlobalScope
-  - setTimeout
-translation_of: Web/API/WindowOrWorkerGlobalScope/setTimeout
-original_slug: Web/API/WindowTimers/setTimeout
----
-<div>{{APIRef("HTML DOM")}}</div>
-
-<p>El método <strong><code>setTimeout()</code></strong> del mixin {{domxref("WindowOrWorkerGlobalScope")}} establece un temporizador que ejecuta una función o una porción de código después de que transcurre un tiempo establecido.</p>
-
-
-<h2 id="Syntax" name="Syntax">Sintaxis</h2>
-
-<pre class="syntaxbox"><em>var idTemporizador</em> = <em>scope</em>.setTimeout(<em>funcion</em>[, <em>retraso</em>, <em>parametro1</em>, <em>parametro2</em>, ...]);
-<em>var</em> <em>idTimeout</em> = <em>scope</em>.setTimeout(<em>funcion</em>[, <em>retraso</em>]);
-<em>var idTimeout</em> = <em>scope</em>.setTimeout(<em>codigo</em>[, <em>retraso</em>]);
-</pre>
-
-<h3 id="Parámetros">Parámetros</h3>
-
-<dl>
- <dt><code>funcion</code></dt>
- <dd>Una {{jsxref("function")}} para ejecutar después de que expire el temporizador.</dd>
- <dt><code>codigo</code></dt>
- <dd>Una sintaxis opcional que le permite incluir una cadena en lugar de una función, la cual es compilada y ejecutada cuando el temporizador expira. Esta sintaxis <strong>no se recomienda</strong> por las mismas razones que hacen del uso de {{jsxref("Global_Objects/eval", "eval()")}} un riesgo de seguridad.</dd>
- <dt><code>retraso</code> {{optional_inline}}</dt>
- <dd>Tiempo, en milisegundos  (milésimas de segundo), que el temporizador debe esperar antes de ejecutar la función o el código. Si se omite este parámetro se usa el valor 0. Tenga en cuenta que el retraso real puede ser más prolongado; ver más abajo {{anch("Reasons for delays longer than specified")}}.</dd>
- <dt><code>param1, ..., paramN</code> {{optional_inline}}</dt>
- <dd>Parámetros adicionales que se pasan a la función especificada por  <em>func</em> una vez el temporizador expira.</dd>
-</dl>
-
-<div class="note"><strong>Nota:</strong> Pasar parámetros adicionales a la función en la primera sintaxis no funciona en Internet Explorer 9 o inferior. Si quiere habilitar esta funcionalidad en ese navegador,  debe usar un código de compatibilidad (vea la sección <a href="#Callback_arguments">Callback arguments</a>).</div>
-
-<h3 id="Valor_retornado">Valor retornado</h3>
-
-<p>El valor retornado <code>IDtemporizador</code> es númerico y no es cero; identifica el temporizador creado con la llamada a <code>setTimeout()</code>; este valor puede pasarse a {{domxref("WindowOrWorkerGlobalScope.clearTimeout()")}} para cancelar el temporizador.</p>
-
-<p>Puede ser útil advertir que  <code>setTimeout()</code> y {{domxref("WindowOrWorkerGlobalScope.setInterval", "setInterval()")}} comparten la misma piscina de IDs, y que tanto <code>clearTimeout()</code> como {{domxref("WindowOrWorkerGlobalScope.clearInterval", "clearInterval()")}} pueden intercambiarse.  Por claridad, sin embargo,  debe hacerlos coincidir para evitar confusiones cuando mantenga su código.</p>
-
-<h2 id="Example" name="Example">Ejemplo</h2>
-
-<p>El siguiente ejemplo establece dos botenes simples en una página web y los engancha a las rutinas <code>setTimeout()</code> y <code>clearTimeout()</code>. Presionando el primer botón establecerá un temporizador que llama un diálogo de alerta después de dos segundos y guarda el id del temporizador para usarlo con <code>clearTimeout()</code>. Opcionalmente puede cancelar este temporizador presionando el segundo botón.</p>
-
-<h3 id="Contenido_HTML">Contenido HTML</h3>
-
-<pre class="brush: html">&lt;p&gt;Ejemplo funcional&lt;/p&gt;
-&lt;button onclick="delayedAlert();"&gt;Muestra una caja de alerta después de dos segundos&lt;/button&gt;
-&lt;p&gt;&lt;/p&gt;
-&lt;button onclick="clearAlert();"&gt;Cancela la alerta antes de que ocurra&lt;/button&gt;
-</pre>
-
-<h3 id="Contenido_JavaScript">Contenido JavaScript</h3>
-
-<pre class="brush: js">var timeoutID;
-
-function delayedAlert() {
-  timeoutID = window.setTimeout(slowAlert, 2000);
-}
-
-function slowAlert() {
-  alert("That was really slow!");
-}
-
-function clearAlert() {
-  window.clearTimeout(timeoutID);
-}
-</pre>
-
-<p>{{ EmbedLiveSample('Example') }}</p>
-
-<p>Vea también <a href="/en-US/docs/DOM/window.clearTimeout#Example" title="en-US/docs/DOM/window.clearTimeout#Example"><code>clearTimeout()</code> example</a>.</p>
-
-<h2 id="Callback_arguments">Callback arguments</h2>
-
-<p>Si necesita pasar un argumento a su función callback, pero necesita que funcione en Internet Explorer, que no soporta el envío de parámetros adicionales (ni con <code>setTimeout()</code> o <code>setInterval()</code>) usted puede incluir este código de compatibilidad <em>IE-specific</em> que habilitará la funcionalidad estándar de HTML5 para pasar los parámetros adicionales en ese navegador para ambos temporizadores solamente insertandolo al inicio de sus scripts.</p>
-
-<pre class="brush: js">/*\
-|*|
-|*|  IE-specific polyfill which enables the passage of arbitrary arguments to the
-|*|  callback functions of JavaScript timers (HTML5 standard syntax).
-|*|
-|*|  https://developer.mozilla.org/en-US/docs/DOM/window.setInterval
-|*|
-|*|  Syntax:
-|*|  var timeoutID = window.setTimeout(func, delay, [param1, param2, ...]);
-|*|  var timeoutID = window.setTimeout(code, delay);
-|*|  var intervalID = window.setInterval(func, delay[, param1, param2, ...]);
-|*|  var intervalID = window.setInterval(code, delay);
-|*|
-\*/
-
-if (document.all &amp;&amp; !window.setTimeout.isPolyfill) {
-  var __nativeST__ = window.setTimeout;
-  window.setTimeout = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) {
-    var aArgs = Array.prototype.slice.call(arguments, 2);
-    return __nativeST__(vCallback instanceof Function ? function () {
-      vCallback.apply(null, aArgs);
-    } : vCallback, nDelay);
-  };
-  window.setTimeout.isPolyfill = true;
-}
-
-if (document.all &amp;&amp; !window.setInterval.isPolyfill) {
-  var __nativeSI__ = window.setInterval;
-  window.setInterval = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) {
-    var aArgs = Array.prototype.slice.call(arguments, 2);
-    return __nativeSI__(vCallback instanceof Function ? function () {
-      vCallback.apply(null, aArgs);
-    } : vCallback, nDelay);
-  };
-  window.setInterval.isPolyfill = true;
-}
-</pre>
-
-<h2 id="Arreglo_solo_para_IE">Arreglo solo para IE</h2>
-
-<p>Si quiere una solución completamente no intrusiva con otros navegadores móviles o de escritorio, incluyendo IE 9 y superior, puede usar los comentarios condicionales de JavaScript:</p>
-
-<pre class="brush: js">/*@cc_on
-  // conditional IE &lt; 9 only fix
-  @if (@_jscript_version &lt;= 6)
-  (function(f){
-     window.setTimeout =f(window.setTimeout);
-     window.setInterval =f(window.setInterval);
-  })(function(f){return function(c,t){var a=[].slice.call(arguments,2);return f(function(){c.apply(this,a)},t)}});
-  @end
-@*/
-</pre>
-
-<p>O usar un enfoque más limpio basado en el condicional para IE de HTML:</p>
-
-<pre class="brush: html">&lt;!--[if lt IE 9]&gt;&lt;script&gt;
-(function(f){
-window.setTimeout =f(window.setTimeout);
-window.setInterval =f(window.setInterval);
-})(function(f){return function(c,t){
-var a=[].slice.call(arguments,2);return f(function(){c.apply(this,a)},t)}
-});
-&lt;/script&gt;&lt;![endif]--&gt;
-</pre>
-
-<p>Otra posibilidad es usar una función anónima para llamar el callback, pero esta solución es un poco más costosa. Ejemplo:</p>
-
-<pre class="brush: js">var intervalID = setTimeout(function() { myFunc("uno", "dos", "tres"); }, 1000);
-</pre>
-
-<p>Sin embargo, otra posibilidad es usar <a href="https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Function/bind" title="/en-US/docs/JavaScript/Reference/Global_Objects/Function/bind">function's bind</a>. Ejemplo:</p>
-
-<pre class="brush: js">setTimeout(function(arg1){}.bind(undefined, 10));
-</pre>
-
-<h2 id="El_problema_this">El problema "<code>this</code>"</h2>
-
-<p>Cuando pasa un método a <code>setTimeout()</code> (o cualquier otra función , por el estilo), podría ser invocada con el valor de <code>this</code> equivocado. Este problema es explicado en detalle en la <a href="/en-US/docs/JavaScript/Reference/Operators/this#Method_binding" title="en-US/docs/Core_JavaScript_1.5_Reference/Operators/Special_Operators/this_Operator#Method_binding">referencia de JavaScript</a>.</p>
-
-<h3 id="Explicación">Explicación</h3>
-
-<p>El código ejecutado por <code>setTimeout()</code> corre en un contexto de ejecución diferente al de la función por la que fue llamado. Como consecuencia, la palabra clave <code>this para la función llamada </code>será asignado al objeto <code>window</code> (o <code>global</code>); no tendrá el mismo valor del <code>this</code> de la función que llamó al <code>setTimeout</code>. Vea el siguiente ejemplo:</p>
-
-<pre class="brush: js">myArray = ["cero", "uno", "dos"];
-myArray.myMethod = function (sProperty) {
-    alert(arguments.length &gt; 0 ? this[sProperty] : this);
-};
-
-myArray.myMethod(); // imprime "cero,uno,dos"
-myArray.myMethod(1); // imprime "uno"
-setTimeout(myArray.myMethod, 1000); // imprime "[object Window]" después de 1 segundo
-setTimeout(myArray.myMethod, 1500, "1"); // imprime "undefined" después de 1.5 segundos
-// intentemos pasar el objeto 'this'
-setTimeout.call(myArray, myArray.myMethod, 2000); // error: "NS_ERROR_XPC_BAD_OP_ON_WN_PROTO: Illegal operation on WrappedNative prototype object"
-setTimeout.call(myArray, myArray.myMethod, 2500, 2); // mismo error</pre>
-
-<p>Como puedes ver no hay forma de pasar el objeto <code>this</code> a la función callback.</p>
-
-<h3 id="Una_posible_solución">Una posible solución</h3>
-
-<p>Una posible forma de resolver el problema del "<code>this</code>" es reemplazar las dos funciones globales nativas <code>setTimeout()</code> or <code>setInterval()por dos no-nativas<em> </em> </code>que permitan su invocación a través del método <a href="en-US/docs/JavaScript/Reference/Global_Objects/Function/call" title="en-US/docs/JavaScript/Reference/Global_Objects/Function/call"><code>Function.prototype.call</code></a>. El siguiente ejemplo muestra un posible reemplazo:</p>
-
-<pre class="brush: js">// Enable the passage of the 'this' object through the JavaScript timers
-
-var __nativeST__ = window.setTimeout, __nativeSI__ = window.setInterval;
-
-window.setTimeout = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) {
-  var oThis = this, aArgs = Array.prototype.slice.call(arguments, 2);
-  return __nativeST__(vCallback instanceof Function ? function () {
-    vCallback.apply(oThis, aArgs);
-  } : vCallback, nDelay);
-};
-
-window.setInterval = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) {
-  var oThis = this, aArgs = Array.prototype.slice.call(arguments, 2);
-  return __nativeSI__(vCallback instanceof Function ? function () {
-    vCallback.apply(oThis, aArgs);
-  } : vCallback, nDelay);
-};</pre>
-
-<div class="note"><strong>Nota:</strong> Estos dos reemplazos habilitarán el estándar HTML5 para el paso de argumentos arbitrarios a las funciones callback de los temporizadores en IE. Pueden usarse como polyfills también. Vea el párrafo <a href="#Callback_arguments">Callback arguments</a>.</div>
-
-<p>Prueba de la nueva característica:</p>
-
-<pre class="brush: js">myArray = ["zero", "one", "two"];
-myArray.myMethod = function (sProperty) {
-    alert(arguments.length &gt; 0 ? this[sProperty] : this);
-};
-
-setTimeout(alert, 1500, "Hello world!"); // the standard use of setTimeout and setInterval is preserved, but...
-setTimeout.call(myArray, myArray.myMethod, 2000); // prints "zero,one,two" after 2 seconds
-setTimeout.call(myArray, myArray.myMethod, 2500, 2); // prints "two" after 2.5 seconds
-</pre>
-
-<p>No hay soluciones nativas <em>ad hoc</em> a este problema.</p>
-
-<div class="note"><strong>Nota:</strong> JavaScript 1.8.5 introduce el método <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Function/bind" title="en-US/docs/JavaScript/Reference/Global Objects/Function/bind">Function.prototype.bind(</a></code>, que permite especificar el valor que debería usarse como <code>this</code> para todas las llamadas a una función dada. Esto permite evitar fácilmente los problemas en los que no es claro que será, dependiendo del contexto desde el cual la función sea llamada.</div>
-
-<h2 id="Notas">Notas</h2>
-
-<p>Puede cancelar el temporizador usando <code><a href="/en-US/docs/DOM/window.clearTimeout" title="en-US/docs/DOM/window.clearTimeout">window.clearTimeout()</a></code>. Si desea tener una función llamada repetidamente (p.e., cada N milisegundos), considere usar <code><a href="/en-US/docs/DOM/window.setInterval" title="en-US/docs/DOM/window.setInterval">window.setInterval()</a></code>.</p>
-
-<p>Es importante notar que la función o fragmento de código no puede ser ejecutado hasta que el hilo que llamó <code>setTimeout()</code>haya terminado.</p>
-
-<h3 id="Pasando_cadenas_literales">Pasando cadenas literales</h3>
-
-<p>Pasando una cadena en vez de una función a <code>setTimeout()</code>pasa lo mismo que al usar <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/eval#Don.27t_use_eval.21" title="https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/eval">eval</a>. </code></p>
-
-<pre class="brush: js">// Correcto
-window.setTimeout(function() {
-    alert("Hello World!");
-}, 500);
-
-// Incorrecto
-window.setTimeout("alert(\"Hello World!\");", 500);
-
-</pre>
-
-<p>Las cadenas literales son evaluadas en el contexto global, así que los símbolos locales en el contexto donde <code>setTimeout()</code> fue llamado no estarán disponibles cuando la cadena es evaluada como código.</p>
-
-<h3 id="Minimum_maximum_delay_and_timeout_nesting">Minimum/ maximum delay and timeout nesting</h3>
-
-<p><a class="external" href="http://code.google.com/p/chromium/issues/detail?id=792#c10">Historically</a> browsers implement <code>setTimeout()</code> "clamping": successive <code>setTimeout()</code> calls with <code>delay</code> smaller than the "minimum delay" limit are forced to use at least the minimum delay. The minimum delay, <code>DOM_MIN_TIMEOUT_VALUE</code>, is 4 ms (stored in a preference in Firefox: <code>dom.min_timeout_value</code>), with a <code>DOM_CLAMP_TIMEOUT_NESTING_LEVEL</code> of 5ms.</p>
-
-<p>In fact, 4ms is <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/timers.html#timers">specified by the HTML5 spec</a> and is consistent across browsers released in 2010 and onward. Prior to {{ geckoRelease("5.0") }}, the minimum timeout value for nested timeouts was 10 ms.</p>
-
-<p>In addition to "clamping", the timeout can also fire later when the page (or the OS/browser itself) is busy with other tasks.</p>
-
-<p>To implement a 0 ms timeout in a modern browser, you can use {{ domxref("window.postMessage()") }} as <a class="external" href="http://dbaron.org/log/20100309-faster-timeouts">described here</a>.</p>
-
-<p>Browsers including Internet Explorer, Chrome, Safari, and Firefox store the delay as a 32-bit signed Integer internally. This causes an Integer overflow when using delays larger than 2147483647, resulting in the timeout being executed immediately.</p>
-
-<h4 id="Inactive_tabs">Inactive tabs</h4>
-
-<p>In {{ geckoRelease("5.0") }} and Chrome 11, timeouts are clamped to firing no more often than once per second (1000ms) in inactive tabs; see {{ bug(633421) }} for more information about this in Mozilla or <a class="external" href="http://crbug.com/66078">crbug.com/66078</a> for details about this in Chrome.</p>
-
-<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2>
-
-<p>{{ CompatibilityTable() }}</p>
-
-<div id="compat-desktop">
-<table class="compat-table">
- <tbody>
-  <tr>
-   <th>Característica</th>
-   <th>Chrome</th>
-   <th>Firefox (Gecko)</th>
-   <th>Internet Explorer</th>
-   <th>Opera</th>
-   <th>Safari</th>
-  </tr>
-  <tr>
-   <td>Soporte básico</td>
-   <td>1.0</td>
-   <td>{{ CompatGeckoDesktop("1") }}</td>
-   <td>4.0</td>
-   <td>4.0</td>
-   <td>1.0</td>
-  </tr>
-  <tr>
-   <td>Soporta parámetros para callback*1</td>
-   <td>{{ CompatVersionUnknown }}</td>
-   <td>{{ CompatVersionUnknown }}</td>
-   <td>10.0</td>
-   <td>{{ CompatVersionUnknown }}</td>
-   <td>{{ CompatUnknown }}</td>
-  </tr>
- </tbody>
-</table>
-</div>
-
-<div id="compat-mobile">
-<table class="compat-table">
- <tbody>
-  <tr>
-   <th>Característica</th>
-   <th>Android</th>
-   <th>Chrome for Android</th>
-   <th>Firefox Mobile (Gecko)</th>
-   <th>IE Mobile</th>
-   <th>Opera Mobile</th>
-   <th>Safari Mobile</th>
-  </tr>
-  <tr>
-   <td>Soporte básico</td>
-   <td>1.0</td>
-   <td>1.0</td>
-   <td>{{ CompatGeckoMobile("1") }}</td>
-   <td>6.0</td>
-   <td>6.0</td>
-   <td>1.0</td>
-  </tr>
-  <tr>
-   <td>Soporta parámetros para callback*1</td>
-   <td>{{ CompatUnknown }}</td>
-   <td>{{ CompatUnknown }}</td>
-   <td>{{ CompatUnknown }}</td>
-   <td>{{ CompatUnknown }}</td>
-   <td>{{ CompatUnknown }}</td>
-   <td>{{ CompatUnknown }}</td>
-  </tr>
- </tbody>
-</table>
-</div>
-
-<p>*1 Whether it supports the optional parameters when in its first form or not.</p>
-
-<h2 id="Specification" name="Specification">Especificación</h2>
-
-<p>Parte del DOM nivel 0, como se especifica en <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/browsers.html#timers">HTML5</a>.</p>
-
-<h2 id="See_also" name="See_also">Vea también</h2>
-
-<ul>
- <li><a href="/en-US/docs/JavaScript/Timers" title="/en-US/docs/JavaScript/Timers">JavaScript timers</a></li>
- <li><a href="/en-US/docs/Mozilla/JavaScript_code_modules/Timer.jsm" title="/en-US/docs/Mozilla/JavaScript_code_modules/Timer.jsm">Timer.jsm</a></li>
- <li>{{domxref("window.setInterval")}}</li>
- <li>{{domxref("window.requestAnimationFrame")}}</li>
- <li><a href="/en-US/docs/JavaScript/Timers/Daemons" title="/en-US/docs/JavaScript/Timers/Daemons"><em>Daemons</em> management</a></li>
-</ul>
diff --git a/files/es/web/css/column-gap/index.html b/files/es/web/css/column-gap/index.html
index fc08233bee..b97fb87f29 100644
--- a/files/es/web/css/column-gap/index.html
+++ b/files/es/web/css/column-gap/index.html
@@ -102,7 +102,7 @@ grid-column-gap: unset;
  <li>Guía sobre CSS Grid Layout: <em><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout#Gutters">Conceptos básicos sobre CSS Grid Layout - Gutters</a></em></li>
 </ul>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li>
  <li><strong> <a href="/en-US/docs/Web/CSS/Reference">Referencia CSS</a></strong></li>
diff --git a/files/es/web/css/css_background_and_borders/border-image_generator/index.html b/files/es/web/css/css_background_and_borders/border-image_generator/index.html
deleted file mode 100644
index 17cb7b70bc..0000000000
--- a/files/es/web/css/css_background_and_borders/border-image_generator/index.html
+++ /dev/null
@@ -1,2616 +0,0 @@
----
-title: Generador Border-image
-slug: Web/CSS/CSS_Background_and_Borders/Border-image_generator
-tags:
-  - CSS
-  - Herramientas
-translation_of: Web/CSS/CSS_Background_and_Borders/Border-image_generator
-original_slug: Web/CSS/CSS_Background_and_Borders/Border-image_generador
----
-<p>Esta herramienta permite generar valores para CSS3 {{cssxref("border-image")}}</p>
-<div class="hidden">
- <h2 id="Border_Image_Generator" name="Border_Image_Generator">Border Image Generator</h2>
- <h3 id="HTML_Content">HTML Content</h3>
- <pre class="brush: html">    <div id="container">
-
-        <div id="gallery">
-            <div id="image-gallery">
-                <img class="image" src="https://mdn.mozillademos.org/files/6007/border-image-1.png">
-                <img class="image" src="https://mdn.mozillademos.org/files/6009/border-image-2.png">
-                <img class="image" src="https://mdn.mozillademos.org/files/6011/border-image-3.png">
-                <img class="image" src="https://mdn.mozillademos.org/files/6013/border-image-4.png">
-                <img class="image" src="https://mdn.mozillademos.org/files/6015/border-image-5.png">
-                <img class="image" src="https://mdn.mozillademos.org/files/6017/border-image-6.svg">
-            </div>
-        </div>
-
-        <div class="group section" id="load-actions">
-            <div id="toggle-gallery"> </div>
-            <div class="button" id="load-image"> Upload image </div>
-            <input>
-            <div class="button" id="load-remote"> </div>
-        </div>
-
-        <div class="group section" id="general-controls">
-            <div class="name"> Control Box </div>
-            <div class="separator"></div>
-            <div class="property">
-                <div class="name">scale</div>
-                <div class="ui-input-slider">
-                </div>
-            </div>
-            <div class="separator"></div>
-            <div class="property">
-                <div class="name">draggable</div>
-                <div class="ui-checkbox"></div>
-            </div>
-            <div class="property right">
-                <div class="name">section height</div>
-                <div class="ui-input-slider">
-                </div>
-            </div>
-        </div>
-
-        <div class="group section" id="preview_section">
-            <div id="subject">
-                <div class="guideline"></div>
-                <div class="guideline"></div>
-                <div class="guideline"></div>
-                <div class="guideline"></div>
-            </div>
-            <div id="preview"> </div>
-        </div>
-
-
-        <div class="group section" id="controls">
-
-
-            <div class="category" id="border-slice-control">
-                <div class="title"> border-image-slice </div>
-                <div class="property">
-                    <div class="name">fill</div>
-                    <div class="ui-checkbox"></div>
-                </div>
-            </div>
-
-
-            <div class="category" id="border-width-control">
-                <div class="title"> border-image-width </div>
-            </div>
-
-
-            <div class="category" id="border-outset-control">
-                <div class="title"> border-image-outset </div>
-            </div>
-
-
-            <div class="category" id="aditional-properties">
-                <div class="title"> aditional-properties </div>
-                <div class="property">
-                    <div class="name"> repeat-x </div>
-                    <div class="ui-dropdown border-repeat">
-                        <div>repeat</div>
-                        <div>stretch</div>
-                        <div>round</div>
-                    </div>
-                </div>
-                <div class="property">
-                    <div class="name"> repeat-y </div>
-                    <div class="ui-dropdown border-repeat">
-                        <div>repeat</div>
-                        <div>stretch</div>
-                        <div>round</div>
-                    </div>
-                </div>
-                <div class="property">
-                    <div class="ui-input-slider">
-                    </div>
-                </div>
-
-                <div class="property">
-                    <div class="ui-input-slider"></div>
-                </div>
-                <div class="property">
-                    <div class="ui-input-slider">
-                    </div>
-                </div>
-            </div>
-
-
-            <div class="category" id="output">
-                <div class="title"> CSS Code </div>
-                <div class="css-property">
-                    <span class="name"> border-image-slice: </span>
-                    <span class="value" id="out-border-slice"> </span>
-                </div>
-                <div class="css-property">
-                    <span class="name"> border-image-width: </span>
-                    <span class="value" id="out-border-width"> </span>
-                </div>
-                <div class="css-property">
-                    <span class="name"> border-image-outset: </span>
-                    <span class="value" id="out-border-outset"> </span>
-                </div>
-                <div class="css-property">
-                    <span class="name"> border-image-repeat: </span>
-                    <span class="value" id="out-border-repeat"> </span>
-                </div>
-                <div class="css-property">
-                    <span class="name"> border-image-source: </span>
-                    <span class="value" id="out-border-source">  </span>
-                </div>
-            </div>
-
-        </div>
-    </div></pre>
- <h3 id="CSS_Content">CSS Content</h3>
- <pre class="brush: css">/*  GRID OF TWELVE
- * ========================================================================== */
-
-.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 {
-	height: 20px;
-	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
-	-moz-user-select: none;
-	user-select: none;
-}
-
-.ui-input-slider * {
-	float: left;
-	height: 100%;
-	line-height: 100%;
-}
-
-/* Input Slider */
-
-.ui-input-slider &gt; 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 DropDown
- */
-
-/* Dropdown */
-
-.ui-dropdown {
-	height: 2em;
-	width: 120px;
-	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
-	font-size: 12px;
-
-	background-image: url("https://mdn.mozillademos.org/files/6037/drop_arrow_icon.png");
-	background-position: right center;
-	background-repeat: no-repeat;
-	background-color: #359740;
-
-	position: relative;
-
-	-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;
-}
-
-.ui-dropdown:hover {
-	cursor: pointer;
-	background-color: #208B20;
-}
-
-/* Dropdown Select Button */
-
-.ui-dropdown-select {
-	height: inherit;
-	padding: 0 0.75em;
-	color: #FFF;
-	line-height: 2em;
-}
-
-/* Dropdown List */
-
-.ui-dropdown-list {
-	width: 100%;
-	height: 150px;
-	max-height: 150px;
-	margin: 0;
-	padding: 0 0.3em;
-
-	border: 3px solid #3490D2;
-	border-color: #208B20;
-	background: #666;
-	background-color: #EEF1F5;
-	color: #000;
-
-	position: absolute;
-	top: 2em;
-	left: 0;
-	z-index: 100;
-
-	overflow: hidden;
-	transition: all 0.3s;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-}
-
-.ui-dropdown-list:hover {
-	overflow: auto;
-}
-
-.ui-dropdown-list[data-hidden='true'] {
-	height: 0 !important;
-	opacity: 0;
-	visibility: hidden;
-}
-
-.ui-dropdown[data-position='left'] .ui-dropdown-list {
-	left: -100%;
-	top: 0;
-}
-
-.ui-dropdown[data-position='right'] .ui-dropdown-list {
-	left: 100%;
-	top: 0;
-}
-
-.ui-dropdown-list &gt; div {
-	width: 100%;
-	height: 1.6em;
-	margin: 0.3em 0;
-	padding: 0.3em;
-	line-height: 1em;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-}
-
-.ui-dropdown-list &gt; div:hover {
-	background: #3490D2;
-	color:#FFF;
-	border-radius: 2px;
-	cursor: pointer;
-}
-
-
-/*************************************************************************************/
-/*************************************************************************************/
-
-/*
- * UI Button
- */
-
-/* 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 &gt; input {
- 	display: none;
-}
-
-.ui-checkbox &gt; 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: 2px;
-	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 &gt; label:hover {
-	cursor: pointer;
-}
-
-.ui-checkbox &gt; input:checked + label {
-	background-image: url("https://mdn.mozillademos.org/files/5681/checked.png");
-	background-color: #379B4A;
-}
-
-/*************************************************************************************/
-/*************************************************************************************/
-
-/*
- * BORDER IMAGE GENERATOR TOOL
- */
-
-body {
-	width: 100%;
-	margin: 0 auto;
-	padding: 0 0 20px 0;
-
-	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
-
-	/*background: url("https://mdn.mozillademos.org/files/6025/grain.png");*/
-	border: 1px solid #EEE;
-
-	-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;
-}
-
-body[data-move='X'] {
-	cursor: w-resize !important;
-}
-
-body[data-move='Y'] {
-	cursor: s-resize !important;
-}
-
-#container {
-	width: 100%;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-}
-
-[data-draggable='true']:hover {
-	cursor: move;
-}
-
-[data-draggable='true']:hover &gt; * {
-	cursor: default;
-}
-
-
-
-/******************************************************************************/
-/******************************************************************************/
-
-/*
- * Border Image Picker
- */
-
-#gallery {
-	box-shadow: 0 0 3px 0 #BABABA;
-}
-
-#image-gallery {
-	width: 600px;
-	height: 100px;
-	margin: 0 auto;
-	transition: margin 0.4s;
-}
-
-#image-gallery .image {
-	height: 80px;
-	float: left;
-	margin: 10px;
-	opacity: 0.5;
-	background-color: #FFF;
-	box-shadow: 0px 0px 3px 1px #BABABA;
-}
-
-#image-gallery .image[selected="true"] {
-	box-shadow: 0px 0px 3px 1px #3BBA52;
-	opacity: 1;
-}
-
-#image-gallery .image:hover {
-	cursor: pointer;
-	box-shadow: 0px 0px 3px 1px #30ACE5;
-	opacity: 1;
-}
-
-#image-gallery[data-collapsed='true'] {
-	margin-top: -100px;
-}
-
-/* Load Menu */
-
-#load-actions {
-	margin: 10px 0;
-}
-
-#toggle-gallery {
-	width: 30px;
-	height: 25px;
-	margin: 10px;
-	color: #FFF;
-
-	background-image: url('https://mdn.mozillademos.org/files/6005/arrow-up-white.png');
-	background-repeat: no-repeat;
-	background-position: top 4px center;
-	background-color: #888888 !important;
-
-	border-radius: 2px;
-	float: left;
-}
-
-#toggle-gallery:hover {
-	cursor: pointer;
-}
-
-#toggle-gallery[data-action='show'] {
-	background-image: url('https://mdn.mozillademos.org/files/6001/arrow-down-white.png');
-	background-color: #888888 !important;
-}
-
-#toggle-gallery[data-action='hide'] {
-	background-image: url('https://mdn.mozillademos.org/files/6005/arrow-up-white.png');
-}
-
-.button {
-	width: 100px;
-	height: 25px;
-	margin: 10px;
-	color: #FFF;
-	text-align: center;
-	font-size: 12px;
-	line-height: 25px;
-	background-color: #379B4A;
-	border-radius: 2px;
-	float: left;
-}
-
-.button:hover {
-	cursor: pointer;
-	background-color: #3380C4;
-}
-
-#load-image {
-	float: left;
-}
-
-#load-remote {
-	width: 30px;
-	background-image: url('https://mdn.mozillademos.org/files/6003/arrow-right-white.png');
-	background-repeat: no-repeat;
-	background-position: center center;
-}
-
-#remote-url {
-	width: 200px;
-	height: 23px;
-	margin: 10px;
-	padding: 0 5px;
-	border: 1px solid #379B4A;
-	border-radius: 2px;
-	float: left;
-
-	transition: width 0.5s;
-}
-
-#remote-url:focus {
-	box-shadow: 0px 0px 3px -1px #379B4A; /*#68ACE8; */
-	border-color: rgba(55, 155, 74, 0.5);
-	width: 450px;
-}
-
-/*
- * Visible Area
- */
-
-#preview_section {
-	position: relative;
-	min-height: 400px;
-}
-
-/* Image Control */
-
-#subject {
-	width: 300px;
-	height: 300px;
-	background-repeat: no-repeat;
-	background-size: 100%;
-	background-color: #FFF;
-	border: 1px solid #CCC;
-
-	position: absolute;
-	z-index: 10;
-	top: 15%;
-	left: 10%;
-
-	box-shadow: 0 0 3px 0 #BABABA;
-	transition-property: width, height;
-	transition-duration: 0.1s;
-}
-
-#subject .guideline {
-	background-color: rgba(255, 255, 255, 0.7);
-	border: 1px solid rgba(0, 0, 0, 0.3);
-	position: absolute;
-}
-
-#subject .guideline:hover {
-	background-color: #F00;
-}
-
-#subject .guideline[data-active] {
-	background-color: #F00;
-	z-index: 10;
-}
-
-#subject .guideline[data-axis='X'] {
-	width: 1px;
-	height: 100%;
-	top: -1px;
-}
-
-#subject .guideline[data-axis='Y'] {
-	width: 100%;
-	height: 1px;
-	left: -1px;
-}
-
-#subject .guideline[data-axis='X']:hover {
-	cursor: w-resize;
-}
-
-#subject .guideline[data-axis='Y']:hover {
-	cursor: s-resize;
-}
-
-
-#subject .relative {
-	position: relative;
-	font-size: 12px;
-}
-
-#subject .tooltip, #subject .tooltip2 {
-	width: 40px;
-	height: 20px;
-	line-height: 20px;
-	font-size: 12px;
-	text-align: center;
-
-	position: absolute;
-	opacity: 0.5;
-	transition: opacity 0.25s;
-}
-
-#subject .tooltip {
-	background: #EEE;
-	border-radius: 2px;
-	border: 1px solid #CCC;
-}
-
-#subject .tooltip2{
-	color: #555;
-}
-
-#subject [data-active] &gt; * {
-	opacity: 1;
-}
-
-#subject .tooltip[data-info='top'] {
-	top: -10px;
-	right: -50px;
-}
-
-#subject .tooltip[data-info='right'] {
-	bottom: -30px;
-	right: -20px;
-}
-
-#subject .tooltip[data-info='bottom'] {
-	top: -10px;
-	left: -50px;
-}
-
-#subject .tooltip[data-info='left'] {
-	top: -30px;
-	right: -20px;
-}
-
-#subject .tooltip2[data-info='top'] {
-	top: -10px;
-	left: -50px;
-}
-
-#subject .tooltip2[data-info='right'] {
-	top: -30px;
-	right: -20px;
-}
-
-#subject .tooltip2[data-info='bottom'] {
-	top: -10px;
-	right: -50px;
-}
-
-#subject .tooltip2[data-info='left'] {
-	bottom: -30px;
-	right: -20px;
-}
-
-/* Preview */
-
-#preview {
-	width: 30%;
-	height: 50%;
-	background-color: #FFF;
-	text-align: center;
-	overflow: hidden;
-	position: absolute;
-	z-index: 10;
-
-	left: 60%;
-	top: 15%;
-
-	border-radius: 2px;
-	border-image-width: 20px;
-	border-image-repeat: round;
-	box-shadow: 0 0 3px 0 #BABABA;
-}
-
-#preview .resize-handle {
-	width: 10px;
-	height: 10px;
-	background: url("https://mdn.mozillademos.org/files/6027/resize.png") center center no-repeat;
-	position: absolute;
-	bottom: 0;
-	right: 0;
-}
-
-#preview .resize-handle:hover {
-	cursor: nw-resize;
-}
-
-
-/*
- * General controls MENU
- */
-
-#general-controls {
-	padding: 10px 30px;
-	background-color: #FFF;
-	opacity: 0.95;
-	color: #888;
-	/*border-radius: 2px;*/
-	box-shadow: 0 0 3px 0 #BABABA;
-}
-
-#general-controls .property {
-	width: 130px;
-	float: left;
-}
-
-#general-controls .name {
-	height: 20px;
-	margin: 0 10px 0 0;
-	line-height: 100%;
-	text-align: right;
-	float: left;
-}
-
-#general-controls .right {
-	width: 200px;
-	float: right;
-}
-
-#general-controls .ui-checkbox label {
-	height: 10px;
-}
-
-#general-controls .separator {
-	height: 40px;
-	width: 1px;
-	margin: -10px 15px;
-	background-color: #EEE;
-	float: left;
-}
-
-/*
- * Controls
- */
-
-#controls {
-	color: #444;
-	margin: 10px 0 0 0;
-}
-
-#controls .category {
-	height: 190px;
-	min-width: 260px;
-	margin: 10px;
-	padding: 10px;
-	border: 1px solid #CCC;
-	border-radius: 3px;
-	float: left;
-
-	box-shadow: 0 0 3px 0 #BABABA;
-	transition: all 0.25s;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-}
-
-@media (min-width: 880px) {
-	#controls .category {
-		width: 30%;
-		margin-left: 1.66%;
-		margin-right: 1.66%;
-	}
-}
-
-@media (max-width: 879px) {
-	#controls .category {
-		width: 37%;
-		margin-left: 6.5%;
-		margin-right: 6.5%;
-	}
-}
-
-#controls .category .title {
-	width: 100%;
-	height: 30px;
-	margin: 0 0 10px 0;
-	line-height: 25px;
-
-	text-align: center;
-	color: #AAA;
-}
-
-#controls .category:hover .title {
-	color: #777;
-}
-
-#controls .category &gt; .group {
-	border: 1px solid #CCC;
-	border-radius: 2px;
-}
-
-
-/* property */
-
-#controls .property {
-	width: 250px;
-	height: 20px;
-	margin: 5px auto;
-}
-
-#controls .property .ui-input-slider {
-	margin: 0;
-	float: left;
-}
-
-#controls .property .ui-input-slider-info {
-	width: 60px;
-}
-
-#controls .property .ui-input-slider-left {
-	transition: opacity 0.15s;
-    opacity: 0;
-}
-
-#controls .property .ui-input-slider-right {
-	transition: opacity 0.15s;
-    opacity: 0;
-}
-
-#controls .property .name {
-	width: 60px;
-	height: 20px;
-	padding: 0px 10px 0px 0px;
-	text-align: right;
-	line-height: 100%;
-	float: left;
-}
-
-#controls .property .config {
-	width: 20px;
-	height: 20px;
-	float: left;
-	background: url("https://mdn.mozillademos.org/files/6021/config.png") center center no-repeat;
-	opacity: 0.5;
-}
-
-#controls .property .config:hover {
-	cursor: pointer;
-	opacity: 1;
-}
-
-#controls .ui-input-slider:hover .ui-input-slider-right {
-    opacity: 1;
-}
-
-#controls .ui-input-slider:hover .ui-input-slider-left {
-    opacity: 1;
-}
-
-#controls .property .ui-dropdown {
-	margin: 0 10px;
-	float: left;
-}
-
-
-#controls .property .ui-checkbox {
-	margin: 0 0 0 16px;
-	float: left;
-}
-
-#controls .property .ui-checkbox label {
-	height: 0.85em;
-	width: 10px;
-}
-
-/* dropdowns */
-#controls .ui-dropdown {
-	width: 50px;
-	height: 1.7em;
-	border-radius: 2px;
-}
-
-#controls .ui-dropdown-select {
-	line-height: 1.6em;
-}
-
-#controls .ui-dropdown-list {
-	top: 20px;
-}
-
-#controls .ui-dropdown-list {
-	border-width: 1px;
-	text-align: center;
-}
-
-#controls .ui-dropdown-list:hover {
-	overflow: hidden;
-}
-
-#controls .border-repeat {
-	margin: 0 0 0 16px !important;
-	width: 80px;
-}
-
-#controls .border-repeat .ui-dropdown-list {
-	height: 6.2em;
-	border-width: 1px;
-	text-align: center;
-}
-
-/* border-image-slice */
-
-
-#border-slice-control .ui-dropdown-list {
-	height: 4.3em;
-}
-
-/* border-image-width */
-
-#border-width-control .ui-dropdown-list {
-	height: 6.2em;
-}
-
-/* border-image-outset */
-
-#border-outset-control .ui-dropdown-list {
-	height: 4.3em;
-}
-
-#aditional-properties .property {
-	width: 200px;
-}
-
-#aditional-properties .ui-input-slider &gt; input {
-	width: 80px !important;
-}
-
-/* unit settings panel */
-
-#unit-settings {
-	padding: 10px;
-	position: absolute;
-
-	background: #FFF;
-
-	font-size: 12px;
-	border-radius: 3px;
-	border: 1px solid #CCC;
-	text-align: center;
-	color: #555;
-
-	position: absolute;
-	z-index: 1000;
-
-	box-shadow: 0 0 3px 0 #BABABA;
-	transition: all 0.25s;
-}
-
-#unit-settings .title {
-	width: 100%;
-	margin: -5px auto 0;
-
-	color: #666;
-	font-size: 14px;
-	font-weight: bold;
-	line-height: 25px;
-	border-bottom: 1px solid #E5E5E5;
-}
-
-#unit-settings .ui-input-slider {
-	margin: 10px 0 0 0;
-}
-
-#unit-settings .ui-input-slider-info {
-	width: 50px;
-	line-height: 1.5em;
-}
-
-#unit-settings input {
-	font-size: 12px;
-	width: 40px !important;
-}
-
-#unit-settings .close {
-	width: 16px;
-	height: 16px;
-	background: url('https://mdn.mozillademos.org/files/6019/close.png') no-repeat center center;
-	background-size: 75%;
-
-	position: absolute;
-	top: 4px;
-	right: 4px;
-	opacity: 0.5;
-}
-
-#unit-settings .close:hover {
-	cursor: pointer;
-	opacity: 1;
-}
-
-#unit-settings[data-active='true'] {
-	opacity: 1;
-}
-
-#unit-settings[data-active='false'] {
-	opacity: 0;
-	top: -100px !important;
-}
-
-/*
- * CSS Output Code
- */
-
-#output {
-	padding: 10px;
-	border: 2px dashed #888 !important;
-	box-shadow: none !important;
-	border-radius: 3px;
-	overflow: hidden;
-
-	-moz-user-select: text;
-	-webkit-user-select: text;
-	-ms-user-select: text;
-	user-select: text;
-}
-
-
-@media (min-width: 880px) {
-	#output {
-		width: 63.33% !important;
-	}
-}
-
-@media (max-width: 879px) {
-	#output {
-		width: 87% !important;
-	}
-}
-
-
-#output .title {
-	width: 100%;
-	height: 30px;
-	margin: 0 0 10px 0;
-	line-height: 25px;
-
-	text-align: center;
-	color: #AAA;
-}
-
-#output .css-property {
-	width: 100%;
-	margin: 0;
-	color: #555;
-	font-size: 14px;
-	line-height: 18px;
-	float: left;
-}
-
-#output .css-property .name {
-	width: 30%;
-	font-weight: bold;
-	text-align: right;
-	float: left;
-}
-
-#output .css-property .value {
-	width: 65%;
-	padding: 0 2.5%;
-	word-break: break-all;
-	float: left;
-}
-
-</pre>
- <h3 id="JavaScript_Content">JavaScript Content</h3>
- <pre class="brush: js">'use strict';
-
-/**
- * UI-SlidersManager
- */
-
-var InputSliderManager = (function InputSliderManager() {
-
-	var subscribers = {};
-	var sliders = [];
-
-	var InputComponent = function InputComponent(obj) {
-		var input = document.createElement('input');
-		input.setAttribute('type', 'text');
-		input.style.width = 50 + obj.precision * 10 + 'px';
-
-		input.addEventListener('click', function(e) {
-			this.select();
-		});
-
-		input.addEventListener('change', function(e) {
-			var value = parseFloat(e.target.value);
-
-			if (isNaN(value) === true)
-				setValue(obj.topic, obj.value);
-			else
-				setValue(obj.topic, value);
-		});
-
-		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) {
-			document.removeEventListener("mousemove", sliderMotion);
-			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("mouseup", slideEnd);
-			document.addEventListener("mousemove", sliderMotion);
-		});
-
-		var slideEnd = function slideEnd(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		= parseFloat(node.getAttribute('data-min'));
-		var max		= parseFloat(node.getAttribute('data-max'));
-		var step	= parseFloat(node.getAttribute('data-step'));
-		var value	= parseFloat(node.getAttribute('data-value'));
-		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;
-		var precision = node.getAttribute('data-precision') | 0;
-
-		this.min = isNaN(min) ? 0 : min;
-		this.max = isNaN(max) ? 100 : max;
-		this.precision = precision &gt;= 0 ? precision : 0;
-		this.step = step &lt; 0 || isNaN(step) ? 1 : step.toFixed(precision);
-		this.topic = topic;
-		this.node = node;
-		this.unit = unit === null ? '' : unit;
-		this.sensivity = sensivity &gt; 0 ? sensivity : 5;
-		value = isNaN(value) ? this.min : value;
-
-		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);
-
-		this.input = input;
-		sliders[topic] = this;
-		setValue(topic, value);
-	};
-
-	InputSlider.prototype.setInputValue = function setInputValue() {
-		this.input.value = this.value.toFixed(this.precision) + this.unit;
-	};
-
-	var setValue = function setValue(topic, value, send_notify) {
-		var slider = sliders[topic];
-		if (slider === undefined)
-			return;
-
-		value = parseFloat(value.toFixed(slider.precision));
-
-		if (value &gt; slider.max) value = slider.max;
-		if (value &lt; slider.min)	value = slider.min;
-
-		slider.value = value;
-		slider.node.setAttribute('data-value', value);
-
-		slider.setInputValue();
-
-		if (send_notify === false)
-			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 setStep = function setStep(topic, value) {
-		var slider = sliders[topic];
-		if (slider === undefined)
-			return;
-
-		slider.step = parseFloat(value);
-		setValue(topic, slider.value);
-	};
-
-	var setPrecision = function setPrecision(topic, value) {
-		var slider = sliders[topic];
-		if (slider === undefined)
-			return;
-
-		value = value | 0;
-		slider.precision = value;
-
-		var step = parseFloat(slider.step.toFixed(value));
-		if (step === 0)
-			slider.step = 1 / Math.pow(10, value);
-
-		setValue(topic, slider.value);
-	};
-
-	var setSensivity = function setSensivity(topic, value) {
-		var slider = sliders[topic];
-		if (slider === undefined)
-			return;
-
-		value = value | 0;
-
-		slider.sensivity = value &gt; 0 ? value : 5;
-	};
-
-	var getNode =  function getNode(topic) {
-		return sliders[topic].node;
-	};
-
-	var getPrecision =  function getPrecision(topic) {
-		return sliders[topic].precision;
-	};
-
-	var getStep =  function getStep(topic) {
-		return sliders[topic].step;
-	};
-
-	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() {
-		if (subscribers[this.topic] === undefined)
-			return;
-		for (var i = 0; i &lt; subscribers[this.topic].length; i++)
-			subscribers[this.topic][i](this.value);
-	};
-
-	var createSlider = function createSlider(topic, label) {
-		var slider = document.createElement('div');
-		slider.className = 'ui-input-slider';
-		slider.setAttribute('data-topic', topic);
-
-		if (label !== undefined)
-			slider.setAttribute('data-info', label);
-
-		new InputSlider(slider);
-		return slider;
-	};
-
-	var init = function init() {
-		var elem = document.querySelectorAll('.ui-input-slider');
-		var size = elem.length;
-		for (var i = 0; i &lt; size; i++)
-			new InputSlider(elem[i]);
-	};
-
-	return {
-		init : init,
-		setMax : setMax,
-		setMin : setMin,
-		setUnit : setUnit,
-		setStep : setStep,
-		getNode : getNode,
-		getStep : getStep,
-		setValue : setValue,
-		subscribe : subscribe,
-		unsubscribe : unsubscribe,
-		setPrecision : setPrecision,
-		setSensivity : setSensivity,
-		getPrecision : getPrecision,
-		createSlider : createSlider,
-	};
-
-})();
-
-
-/**
- * UI-DropDown Select
- */
-
-var DropDownManager = (function DropdownManager() {
-
-	var subscribers = {};
-	var dropdowns = [];
-	var active = null;
-
-	var visbility = ["hidden", "visible"];
-
-
-	var DropDown = function DropDown(node) {
-		var topic = node.getAttribute('data-topic');
-		var label = node.getAttribute('data-label');
-		var selected = node.getAttribute('data-selected') | 0;
-
-		var select = document.createElement('div');
-		var list = document.createElement('div');
-		var uval = 0;
-		var option = null;
-		var option_value = null;
-
-		list.className = 'ui-dropdown-list';
-		select.className = 'ui-dropdown-select';
-
-		while (node.firstElementChild !== null) {
-			option = node.firstElementChild;
-			option_value = option.getAttribute('data-value');
-
-			if (option_value === null)
-				option.setAttribute('data-value', uval);
-
-			list.appendChild(node.firstElementChild);
-			uval++;
-		}
-
-		node.appendChild(select);
-		node.appendChild(list);
-
-		select.onclick = this.toggle.bind(this);
-		list.onclick = this.updateValue.bind(this);
-		document.addEventListener('click', clickOut);
-
-		this.state = 0;
-		this.time = 0;
-		this.dropmenu = list;
-		this.select = select;
-		this.toggle(false);
-		this.value = {};
-		this.topic = topic;
-
-		if (label)
-			select.textContent = label;
-		else
-			this.setNodeValue(list.children[selected]);
-
-		dropdowns[topic] = this;
-
-	};
-
-	DropDown.prototype.toggle = function toggle(state) {
-		if (typeof(state) === 'boolean')
-			this.state = state === false ? 0 : 1;
-		else
-			this.state = 1 ^ this.state;
-
-		if (active !== this) {
-			if (active)
-				active.toggle(false);
-			active = this;
-		}
-
-		if (this.state === 0)
-			this.dropmenu.setAttribute('data-hidden', 'true');
-		else
-			this.dropmenu.removeAttribute('data-hidden');
-
-	};
-
-	var clickOut = function clickOut(e) {
-		if (active.state === 0 ||
-			e.target === active.dropmenu ||
-			e.target === active.select)
-			return;
-
-		active.toggle(false);
-	};
-
-	DropDown.prototype.updateValue = function updateValue(e) {
-
-		if (Date.now() - this.time &lt; 500)
-			return;
-
-		if (e.target.className !== "ui-dropdown-list") {
-			this.setNodeValue(e.target);
-			this.toggle(false);
-		}
-
-		this.time = Date.now();
-	};
-
-	DropDown.prototype.setNodeValue = function setNodeValue(node) {
-		this.value['name'] = node.textContent;
-		this.value['value'] = node.getAttribute('data-value');
-
-		this.select.textContent = node.textContent;
-		this.select.setAttribute('data-value', this.value['value']);
-
-		notify.call(this);
-	};
-
-	var createDropDown = function createDropDown(topic, options) {
-
-		var dropdown = document.createElement('div');
-		dropdown.setAttribute('data-topic', topic);
-		dropdown.className = 'ui-dropdown';
-
-		for (var i in options) {
-			var x = document.createElement('div');
-			x.setAttribute('data-value', i);
-			x.textContent = options[i];
-			dropdown.appendChild(x);
-		}
-
-		new DropDown(dropdown);
-
-		return dropdown;
-	};
-
-	var setValue = function setValue(topic, index) {
-		if (dropdowns[topic] === undefined ||
-			index &gt;= dropdowns[topic].dropmenu.children.length)
-			return;
-
-		dropdowns[topic].setNodeValue(dropdowns[topic].dropmenu.children[index]);
-	};
-
-	var subscribe = function subscribe(topic, callback) {
-		if (subscribers[topic] === undefined)
-			subscribers[topic] = [];
-		subscribers[topic].push(callback);
-	};
-
-	var unsubscribe = function unsubscribe(topic, callback) {
-		var index = subscribers[topic].indexOf(callback);
-		subscribers[topic].splice(index, 1);
-	};
-
-	var notify = function notify() {
-		if (subscribers[this.topic] === undefined)
-			return;
-
-		for (var i in subscribers[this.topic]) {
-			subscribers[this.topic][i](this.value);
-		}
-	};
-
-	var init = function init() {
-		var elem, size;
-
-		elem = document.querySelectorAll('.ui-dropdown');
-		size = elem.length;
-		for (var i = 0; i &lt; size; i++)
-			new DropDown(elem[i]);
-
-	};
-
-	return {
-		init : init,
-		setValue : setValue,
-		subscribe : subscribe,
-		unsubscribe : unsubscribe,
-		createDropDown : createDropDown
-	};
-
-})();
-
-
-/**
- * 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) {
-		var obj = buttons[topic];
-		if (obj === undefined)
-			return;
-
-		obj.checkbox.checked = value;
-		notify.call(obj);
-	};
-
-	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() {
-		if (subscribers[this.topic] === undefined)
-			return;
-		for (var i = 0; i &lt; 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 &lt; size; i++)
-			new CheckBox(elem[i]);
-	};
-
-	return {
-		init : init,
-		setValue : setValue,
-		subscribe : subscribe,
-		unsubscribe : unsubscribe
-	};
-
-})();
-
-window.addEventListener("load", function() {
-	BorderImage.init();
-});
-
-var BorderImage = (function BorderImage() {
-
-	var getElemById = document.getElementById.bind(document);
-
-	var subject;
-	var preview;
-	var guidelines = [];
-	var positions = ['top', 'right', 'bottom', 'left'];
-
-	var makeDraggable = function makeDraggable(elem) {
-
-		var offsetTop;
-		var offsetLeft;
-
-		elem.setAttribute('data-draggable', 'true');
-
-		var dragStart = function dragStart(e) {
-			if (e.target.getAttribute('data-draggable') !== 'true' ||
-				e.target !== elem || e.button !== 0)
-				return;
-
-			offsetLeft = e.clientX - elem.offsetLeft;
-			offsetTop = e.clientY - elem.offsetTop;
-
-			document.addEventListener('mousemove', mouseDrag);
-			document.addEventListener('mouseup', dragEnd);
-		};
-
-		var dragEnd = function dragEnd(e) {
-			if (e.button !== 0)
-				return;
-
-			document.removeEventListener('mousemove', mouseDrag);
-			document.removeEventListener('mouseup', dragEnd);
-		};
-
-		var mouseDrag = function mouseDrag(e) {
-
-			elem.style.left = e.clientX - offsetLeft + 'px';
-			elem.style.top = e.clientY - offsetTop + 'px';
-		};
-
-		elem.addEventListener('mousedown', dragStart, false);
-	};
-
-	var PreviewControl = function PreviewControl() {
-
-		var dragging = false;
-		var valueX = null;
-		var valueY = null;
-
-		var dragStart = function dragStart(e) {
-			if (e.button !== 0)
-				return;
-
-			valueX = e.clientX - preview.clientWidth;
-			valueY = e.clientY - preview.clientHeight;
-			dragging = true;
-
-			document.addEventListener('mousemove', mouseDrag);
-		};
-
-		var dragEnd = function dragEnd(e) {
-			if (e.button !== 0 || dragging === false)
-				return;
-
-			document.removeEventListener('mousemove', mouseDrag);
-			dragging = false;
-		};
-
-		var mouseDrag = function mouseDrag(e) {
-			InputSliderManager.setValue('preview-width', e.clientX - valueX);
-			InputSliderManager.setValue('preview-height', e.clientY - valueY);
-		};
-
-		var init = function init() {
-
-			makeDraggable(preview);
-			makeDraggable(subject);
-
-			var handle = document.createElement('div');
-			handle.className = 'resize-handle';
-
-			handle.addEventListener('mousedown', dragStart);
-			document.addEventListener('mouseup', dragEnd);
-
-			preview.appendChild(handle);
-
-		};
-
-		return {
-			init: init
-		};
-
-	}();
-
-	var ImageReader = (function ImageReader() {
-
-		var fReader = new FileReader();
-		var browse = document.createElement('input');
-
-		var loadImage = function loadImage(e) {
-			if (browse.files.length === 0)
-				return;
-
-			var file = browse.files[0];
-
-			if (file.type.slice(0, 5) !== 'image')
-				return;
-
-			fReader.readAsDataURL(file);
-
-			return false;
-		};
-
-		fReader.onload = function(e) {
-			ImageControl.loadRemoteImage(e.target.result);
-		};
-
-		var load = function load() {
-			browse.click();
-		};
-
-		browse.setAttribute('type', 'file');
-		browse.style.display = 'none';
-		browse.onchange = loadImage;
-
-		return {
-			load: load
-		};
-
-	})();
-
-	var ImageControl = (function ImageControl() {
-
-		var scale = 0.5;
-		var imgSource = new Image();
-		var imgState = null;
-		var selected = null;
-
-
-		var topics = ['slice', 'width', 'outset'];
-		var properties = {};
-		properties['border1'] = {
-			fill			: false,
-
-			slice_values	: [27, 27, 27, 27],
-			width_values	: [20, 20, 20, 20],
-			outset_values	: [0, 0, 0, 0],
-
-			slice_units		: [0, 0, 0, 0],
-			width_units		: [0, 0, 0, 0],
-			outset_units	: [0, 0, 0, 0],
-
-			repeat			: [1, 1],
-			size			: [300, 200],
-			preview_area	: 400
-		};
-
-		properties['border2'] = {
-			fill			: false,
-
-			slice_values	: [33, 33, 33, 33],
-			width_values	: [1.5, 1.5, 1.5, 1.5],
-			outset_values	: [0, 0, 0, 0],
-
-			slice_units		: [1, 1, 1, 1],
-			width_units		: [2, 2, 2, 2],
-			outset_units	: [0, 0, 0, 0],
-
-			repeat			: [2, 2],
-			size			: [300, 200],
-			preview_area	: 400
-		};
-
-		properties['border3'] = {
-			fill			: true,
-
-			slice_values	: [15, 15, 15, 15],
-			width_values	: [10, 10, 10, 10],
-			outset_values	: [0, 0, 0, 0],
-
-			slice_units		: [0, 0, 0, 0],
-			width_units		: [0, 0, 0, 0],
-			outset_units	: [0, 0, 0, 0],
-
-			repeat			: [2, 2],
-			size			: [300, 200],
-			preview_area	: 400
-		};
-
-		properties['border4'] = {
-			fill			: false,
-
-			slice_values	: [13, 13, 13, 13],
-			width_values	: [13, 13, 13, 13],
-			outset_values	: [13, 13, 13, 13],
-
-			slice_units		: [0, 0, 0, 0],
-			width_units		: [0, 0, 0, 0],
-			outset_units	: [0, 0, 0, 0],
-
-			repeat			: [0, 0],
-			size			: [300, 200],
-			preview_area	: 400
-		};
-
-		properties['border5'] = {
-			fill			: false,
-
-			slice_values	: [0, 12, 0, 12],
-			width_values	: [0, 12, 0, 12],
-			outset_values	: [0, 0, 0, 0],
-
-			slice_units		: [0, 0, 0, 0],
-			width_units		: [0, 0, 0, 0],
-			outset_units	: [0, 0, 0, 0],
-
-			repeat			: [0, 0],
-			size			: [300, 200],
-			preview_area	: 400,
-		};
-
-		properties['border6'] = {
-			fill			: false,
-
-			slice_values	: [42, 42, 42, 42],
-			width_values	: [42, 42, 42, 42],
-			outset_values	: [0, 0, 0, 0],
-
-			slice_units		: [0, 0, 0, 0],
-			width_units		: [0, 0, 0, 0],
-			outset_units	: [0, 0, 0, 0],
-
-			repeat			: [2, 2],
-			size			: [350, 350],
-			preview_area	: 500,
-		};
-
-
-		var loadLocalImage = function loadLocalImage(source) {
-			var location = "images/" + source;
-			imgSource.src = location;
-		};
-
-		var loadRemoteImage = function loadRemoteImage(source) {
-			imgSource.src = source;
-			if (selected)
-				selected.removeAttribute('selected');
-			Tool.setOutputCSS('source', 'url("' + source + '")');
-		};
-
-		var pickImage = function pickImage(e) {
-			if (e.target.className === 'image') {
-				selected = e.target;
-				selected.setAttribute('selected', 'true');
-				loadRemoteImage(e.target.src);
-				imgState = e.target.getAttribute('data-stateID');
-			}
-		};
-
-		var loadImageState = function loadImageState(stateID) {
-			if (properties[stateID] === undefined)
-				return;
-
-			var prop = properties[stateID];
-			var topic;
-			var unit_array;
-			var value_array;
-
-			for (var i in topics) {
-				for (var j=0; j&lt;4; j++) {
-					topic = topics[i] + '-' + positions[j];
-					unit_array = topics[i] + '_units';
-					value_array = topics[i] + '_values';
-					InputSliderManager.setValue(topic, prop[value_array][j]);
-					DropDownManager.setValue(topic, prop[unit_array][j]);
-				}
-			}
-
-			ButtonManager.setValue('slice-fill', prop['fill']);
-			DropDownManager.setValue('image-repeat-X', prop['repeat'][0]);
-			DropDownManager.setValue('image-repeat-Y', prop['repeat'][1]);
-			InputSliderManager.setValue('preview-width', prop['size'][0]);
-			InputSliderManager.setValue('preview-height', prop['size'][1]);
-			InputSliderManager.setValue('preview-area-height', prop['preview_area']);
-		};
-
-		var update = function update() {
-			scale =  Math.min(300, (30000 / this.width) | 0);
-			setScale(scale);
-			InputSliderManager.setValue('scale', scale, false);
-
-			subject.style.backgroundImage = 'url("' + this.src + '")';
-			preview.style.borderImageSource = 'url("' + this.src + '")';
-
-			guidelines['slice-top'].setMax(this.height);
-			guidelines['slice-right'].setMax(this.width);
-			guidelines['slice-bottom'].setMax(this.height);
-			guidelines['slice-left'].setMax(this.width);
-
-			if (imgState)
-				loadImageState(imgState);
-		};
-
-		var setScale = function setScale(value) {
-			scale = value;
-			var w = imgSource.width * scale / 100 | 0;
-			var h = imgSource.height * scale / 100 | 0;
-			subject.style.width = w + 'px';
-			subject.style.height = h + 'px';
-
-			for (var i = 0; i &lt; positions.length; i++)
-				guidelines['slice-' + positions[i]].updateGuidelinePos();
-		};
-
-		var getScale = function getScale() {
-			return scale/100;
-		};
-
-		var toggleGallery = function toggleGallery() {
-			var gallery = getElemById('image-gallery');
-			var button  = getElemById('toggle-gallery');
-			var state = 1;
-			button.addEventListener('click', function() {
-				state = 1 ^ state;
-				if (state === 0) {
-					gallery.setAttribute('data-collapsed', 'true');
-					button.setAttribute('data-action', 'show');
-				}
-				else {
-					gallery.removeAttribute('data-collapsed');
-					button.setAttribute('data-action', 'hide');
-				}
-			});
-		};
-
-		var init = function init() {
-			var gallery = getElemById('image-gallery');
-			var browse = getElemById('load-image');
-			var remote = getElemById('remote-url');
-			var load_remote = getElemById('load-remote');
-
-			remote.addEventListener('change', function(){
-				loadRemoteImage(this.value);
-			});
-
-			load_remote.addEventListener('click', function(){
-				loadRemoteImage(remote.value);
-			});
-
-			browse.addEventListener('click', ImageReader.load);
-			gallery.addEventListener('click', pickImage);
-			imgSource.addEventListener('load', update);
-
-			InputSliderManager.subscribe('scale', setScale);
-			InputSliderManager.setValue('scale', scale);
-			imgState = 'border1';
-			loadRemoteImage('https://mdn.mozillademos.org/files/6007/border-image-1.png');
-			toggleGallery();
-		};
-
-		return {
-			init: init,
-			getScale : getScale,
-			loadRemoteImage: loadRemoteImage
-		};
-
-	})();
-
-	var GuideLine = function GuideLine(node) {
-		var topic = node.getAttribute('data-topic');
-		var axis = node.getAttribute('data-axis');
-
-		this.node = node;
-		this.topic = topic;
-		this.axis = axis;
-		this.info = topic.split('-')[1];
-
-		this.position = 0;
-		this.value = 0;
-		this.unit = 0;
-		this.max = 0;
-		this.pos = positions.indexOf(this.info);
-
-		guidelines[topic] = this;
-
-		var relative_container = document.createElement('div');
-		var tooltip = document.createElement('div');
-		var tooltip2 = document.createElement('div');
-
-		tooltip.className = 'tooltip';
-		tooltip.setAttribute('data-info', this.info);
-
-		tooltip2.className = 'tooltip2';
-		tooltip2.textContent = this.info;
-		tooltip2.setAttribute('data-info', this.info);
-
-		this.tooltip = tooltip;
-
-		relative_container.appendChild(tooltip);
-		relative_container.appendChild(tooltip2);
-		node.appendChild(relative_container);
-
-		var startX = 0;
-		var startY = 0;
-		var start = 0;
-
-		var startDrag = function startDrag(e) {
-			startX = e.clientX;
-			startY = e.clientY;
-			start = guidelines[topic].position;
-			document.body.setAttribute('data-move', axis);
-			relative_container.setAttribute('data-active', '');
-			node.setAttribute('data-active', '');
-
-			document.addEventListener('mousemove', updateGuideline);
-			document.addEventListener('mouseup', endDrag);
-		};
-
-		var endDrag = function endDrag() {
-			document.body.removeAttribute('data-move');
-			relative_container.removeAttribute('data-active');
-			node.removeAttribute('data-active');
-
-			document.removeEventListener('mousemove', updateGuideline);
-		};
-
-		var updateGuideline = function updateGuideline(e) {
-			var value;
-			if (topic === 'slice-top')
-				value = e.clientY - startY + start;
-
-			if (topic === 'slice-right')
-				value = startX - e.clientX + start;
-
-			if (topic === 'slice-bottom')
-				value = startY - e.clientY + start;
-
-			if (topic === 'slice-left')
-				value = e.clientX - startX + start;
-
-			if (this.unit === 0)
-				InputSliderManager.setValue(topic, value * 1 / ImageControl.getScale() | 0);
-			else {
-				InputSliderManager.setValue(topic, (value * 100 / (this.max * ImageControl.getScale())) | 0);
-			}
-
-		}.bind(this);
-
-		node.addEventListener("mousedown", startDrag);
-
-		InputSliderManager.subscribe(topic, this.setPosition.bind(this));
-		InputSliderManager.setValue(topic, this.position);
-	};
-
-
-	GuideLine.prototype.updateGuidelinePos = function updateGuidelinePos() {
-		if (this.unit === 0)
-			this.position = this.value * ImageControl.getScale() | 0;
-		else
-			this.position = this.value * this.max * ImageControl.getScale() / 100 | 0;
-
-		this.node.style[this.info] = this.position + 'px';
-	};
-
-	GuideLine.prototype.setPosition = function setPosition(value) {
-		this.value = value;
-		this.tooltip.textContent = value;
-		this.updateGuidelinePos();
-		Tool.setBorderSlice(this.pos, value);
-	};
-
-	GuideLine.prototype.setMax = function setMax(max) {
-		this.max = max;
-		this.updateLimit();
-	};
-
-	GuideLine.prototype.updateLimit = function updateLimit() {
-		if (this.unit === 1)
-			InputSliderManager.setMax(this.topic, 100);
-		else
-			InputSliderManager.setMax(this.topic, this.max);
-	};
-
-	GuideLine.prototype.setUnit = function setUnit(type) {
-		if (type === '%')	this.unit = 1;
-		if (type === '')	this.unit = 0;
-		this.updateLimit();
-	};
-
-	/*
-	 * Unit panel
-	 */
-	var UnitPanel = (function UnitPanel () {
-
-		var panel;
-		var title;
-		var precision;
-		var step;
-		var unit_topic = null; // settings are made for this topic
-		var step_option = [1, 0.1, 0.01];
-
-		var updatePrecision = function updatePrecision(value) {
-			InputSliderManager.setPrecision('unit-step', value);
-			InputSliderManager.setStep('unit-step', step_option[value]);
-			InputSliderManager.setMin('unit-step', step_option[value]);
-
-			if (unit_topic)
-				InputSliderManager.setPrecision(unit_topic, value);
-		};
-
-		var updateUnitSettings = function updateUnitSettings(value) {
-			if (unit_topic)
-				InputSliderManager.setStep(unit_topic, value);
-		};
-
-		var show = function show(e) {
-			var topic = e.target.getAttribute('data-topic');
-			var precision = InputSliderManager.getPrecision(topic);
-			var step = InputSliderManager.getStep(topic);
-
-			unit_topic = topic;
-			title.textContent = topic;
-
-			panel.setAttribute('data-active', 'true');
-			panel.style.top = e.target.offsetTop - 40 + 'px';
-			panel.style.left = e.target.offsetLeft + 30 + 'px';
-
-			InputSliderManager.setValue('unit-precision', precision);
-			InputSliderManager.setValue('unit-step', step);
-		};
-
-		var init = function init() {
-			panel = document.createElement('div');
-			title = document.createElement('div');
-			var close = document.createElement('div');
-
-			step = InputSliderManager.createSlider('unit-step', 'step');
-			precision = InputSliderManager.createSlider('unit-precision', 'precision');
-
-			InputSliderManager.setStep('unit-precision', 1);
-			InputSliderManager.setMax('unit-precision', 2);
-			InputSliderManager.setValue('unit-precision', 2);
-			InputSliderManager.setSensivity('unit-precision', 20);
-
-			InputSliderManager.setValue('unit-step', 1);
-			InputSliderManager.setStep('unit-step', 0.01);
-			InputSliderManager.setPrecision('unit-step', 2);
-
-			InputSliderManager.subscribe('unit-precision', updatePrecision);
-			InputSliderManager.subscribe('unit-step', updateUnitSettings);
-
-			close.addEventListener('click', function () {
-				panel.setAttribute('data-active', 'false');
-			});
-
-			title.textContent = 'Properties';
-			title.className = 'title';
-			close.className = 'close';
-			panel.id = 'unit-settings';
-			panel.setAttribute('data-active', 'false');
-			panel.appendChild(title);
-			panel.appendChild(precision);
-			panel.appendChild(step);
-			panel.appendChild(close);
-			document.body.appendChild(panel);
-		};
-
-		return {
-			init : init,
-			show : show
-		};
-
-	})();
-
-	/**
-	 * Tool Manager
-	 */
-	var Tool = (function Tool() {
-		var preview_area;
-		var dropdown_unit_options = [
-			{ '' : '--', '%' : '%'},
-			{ 'px' : 'px', '%' : '%', 'em' : 'em'},
-			{ 'px' : 'px', 'em' : 'em'},
-		];
-
-		var border_slice = [];
-		var border_width = [];
-		var border_outset = [];
-
-		var border_slice_values = [];
-		var border_width_values = [];
-		var border_outset_values = [];
-
-		var border_slice_units = ['', '', '', ''];
-		var border_width_units = ['px', 'px', 'px', 'px'];
-		var border_outset_units = ['px', 'px', 'px', 'px'];
-
-		var border_fill = false;
-		var border_repeat = ['round', 'round'];
-		var CSS_code = {
-			'source' : null,
-			'slice' : null,
-			'width' : null,
-			'outset' : null,
-			'repeat' : null
-		};
-
-		var setBorderSlice = function setBorderSlice(positionID, value) {
-			border_slice[positionID] = value + border_slice_units[positionID];
-			updateBorderSlice();
-		};
-
-		var updateBorderSlice = function updateBorderSlice() {
-			var value = border_slice.join(' ');
-			if (border_fill === true)
-				value += ' fill';
-
-			preview.style.borderImageSlice = value;
-			setOutputCSS('slice', value);
-		};
-
-		var setBorderFill = function setBorderFill(value) {
-			border_fill = value;
-			var bimgslice = border_slice.join(' ');;
-			if (value === true)
-				bimgslice += ' fill';
-
-			preview.style.borderImageSlice = bimgslice;
-		};
-
-		var updateBorderWidth = function updateBorderWidth() {
-			var value = border_width.join(' ');
-			preview.style.borderImageWidth = value;
-			setOutputCSS('width', value);
-		};
-
-		var updateBorderOutset = function updateBorderOutset() {
-			var value = border_outset.join(' ');
-			preview.style.borderImageOutset = border_outset.join(' ');
-			setOutputCSS('outset', value);
-		};
-
-		var setBorderRepeat = function setBorderRepeat(obj) {
-			border_repeat[obj.value] = obj.name;
-			var value = border_repeat.join(' ');
-			preview.style.borderImageRepeat = value;
-			setOutputCSS('repeat', value);
-		};
-
-		var setOutputCSS = function setOutputCSS(topic, value) {
-			CSS_code[topic].textContent = value + ';';
-		};
-
-		var setPreviewFontSize = function setPreviewFontSize(value) {
-			preview.style.fontSize = value + 'px';
-		};
-
-		var setPreviewWidth = function setPreviewWidth(value) {
-			preview.style.width = value + 'px';
-		};
-
-		var setPreviewHeight = function setPreviewHeight(value) {
-			preview.style.height = value + 'px';
-		};
-
-		var setPreviewAreaHeight = function setPreviewAreaHeight(value) {
-			preview_area.style.height = value + 'px';
-		};
-
-		var updateDragOption = function updateDragOption(value) {
-			if (value === true)
-				subject.setAttribute('data-draggable', 'true');
-			else
-				subject.removeAttribute('data-draggable');
-		};
-
-		var createProperty = function createProperty(topic, labelID, optionsID) {
-
-			var slider = InputSliderManager.createSlider(topic, positions[labelID]);
-			var dropdown = DropDownManager.createDropDown(topic, dropdown_unit_options[optionsID]);
-
-			InputSliderManager.setSensivity(topic, 3);
-			InputSliderManager.setPrecision(topic, 1);
-
-			var property = document.createElement('div');
-			var config = document.createElement('div');
-
-			property.className = 'property';
-			config.className = 'config';
-			config.setAttribute('data-topic', topic);
-			config.addEventListener('click', UnitPanel.show);
-
-			property.appendChild(slider);
-			property.appendChild(dropdown);
-			property.appendChild(config);
-
-			return property;
-		};
-
-		var initBorderSliceControls = function initBorderSliceControls() {
-			var container = getElemById('border-slice-control');
-
-			var listenForChanges = function listenForChanges(topic, id) {
-				InputSliderManager.subscribe(topic, function(value) {
-					border_slice_values[id] = value;
-					border_slice[id] = value + border_slice_units[id];
-					updateBorderSlice();
-				});
-
-				DropDownManager.subscribe(topic, function(obj) {
-					guidelines[topic].setUnit(obj.value);
-					border_slice_units[id] = obj.value;
-					border_slice[id] = border_slice_values[id] + obj.value;
-					updateBorderSlice();
-				});
-			};
-
-			for (var i = 0; i &lt; positions.length; i++) {
-				var topic = 'slice-' + positions[i];
-				var property = createProperty(topic, i, 0);
-				listenForChanges(topic, i);
-
-				container.appendChild(property);
-			}
-
-			container.appendChild(container.children[1]);
-
-		};
-
-		var initBorderWidthControls = function initBorderWidthControls() {
-			var container = getElemById('border-width-control');
-
-			var listenForChanges = function listenForChanges(topic, id) {
-				InputSliderManager.subscribe(topic, function(value) {
-					border_width_values[id] = value;
-					border_width[id] = value + border_width_units[id];
-					updateBorderWidth();
-				});
-
-				DropDownManager.subscribe(topic, function(obj) {
-					if (obj.value === '%')
-						InputSliderManager.setMax(topic, 100);
-					else
-						InputSliderManager.setMax(topic, 1000);
-
-					border_width_units[id] = obj.value;
-					border_width[id] = border_width_values[id] + obj.value;
-					updateBorderWidth();
-				});
-			};
-
-			for (var i = 0; i &lt; positions.length; i++) {
-				var topic = 'width-' + positions[i];
-				var property = createProperty(topic, i, 1);
-				InputSliderManager.setMax(topic, 1000);
-				listenForChanges(topic, i);
-
-				container.appendChild(property);
-			}
-		};
-
-		var initBorderOutsetControls = function initBorderOutsetControls() {
-
-			var container = getElemById('border-outset-control');
-
-			var listenForChanges = function listenForChanges(topic, id) {
-				InputSliderManager.subscribe(topic, function(value) {
-					border_outset_values[id] = value;
-					border_outset[id] = value + border_outset_units[id];
-					updateBorderOutset();
-				});
-
-				DropDownManager.subscribe(topic, function(obj) {
-					border_outset_units[id] = obj.value;
-					border_outset[id] = border_outset_values[id] + obj.value;
-					updateBorderOutset();
-				});
-			};
-
-			for (var i = 0; i &lt; positions.length; i++) {
-				var topic = 'outset-' + positions[i];
-				var property = createProperty(topic, i, 2);
-				InputSliderManager.setMax(topic, 1000);
-				listenForChanges(topic, i);
-
-				container.appendChild(property);
-			}
-		};
-
-		var init = function init() {
-
-			var gallery =
-			subject = getElemById('subject');
-			preview = getElemById("preview");
-			preview_area = getElemById("preview_section");
-
-
-			CSS_code['source'] = getElemById("out-border-source");
-			CSS_code['slice'] = getElemById("out-border-slice");
-			CSS_code['width'] = getElemById("out-border-width");
-			CSS_code['outset'] = getElemById("out-border-outset");
-			CSS_code['repeat'] = getElemById("out-border-repeat");
-
-			initBorderSliceControls();
-			initBorderWidthControls();
-			initBorderOutsetControls();
-
-			var elem = document.querySelectorAll('.guideline');
-			var size = elem.length;
-			for (var i = 0; i &lt; size; i++)
-				new GuideLine(elem[i]);
-
-			PreviewControl.init();
-
-			ButtonManager.subscribe('slice-fill',setBorderFill);
-			ButtonManager.subscribe('drag-subject', updateDragOption);
-			ButtonManager.setValue('drag-subject', false);
-
-			DropDownManager.subscribe('image-repeat-X', setBorderRepeat);
-			DropDownManager.subscribe('image-repeat-Y', setBorderRepeat);
-
-			InputSliderManager.subscribe('preview-area-height', setPreviewAreaHeight);
-			InputSliderManager.subscribe('preview-width', setPreviewWidth);
-			InputSliderManager.subscribe('preview-height', setPreviewHeight);
-			InputSliderManager.subscribe('font-size', setPreviewFontSize);
-			InputSliderManager.setValue('preview-width', 300);
-			InputSliderManager.setValue('preview-height', 200);
-		};
-
-		return {
-			init: init,
-			setOutputCSS: setOutputCSS,
-			setBorderSlice: setBorderSlice
-		};
-
-	})();
-
-	/**
-	 * Init Tool
-	 */
-	var init = function init() {
-		InputSliderManager.init();
-		DropDownManager.init();
-		ButtonManager.init();
-		UnitPanel.init();
-		Tool.init();
-		ImageControl.init();
-	};
-
-	return {
-		init : init
-	};
-
-})();
-
-</pre>
-</div>
-<p>{{ EmbedLiveSample('Border_Image_Generator', '100%', '1270px') }}</p>
-
-<p> </p>
diff --git a/files/es/web/css/css_background_and_borders/border-radius_generator/index.html b/files/es/web/css/css_background_and_borders/border-radius_generator/index.html
deleted file mode 100644
index f445dff39b..0000000000
--- a/files/es/web/css/css_background_and_borders/border-radius_generator/index.html
+++ /dev/null
@@ -1,1601 +0,0 @@
----
-title: Generador de border-radius
-slug: Web/CSS/CSS_Background_and_Borders/Border-radius_generator
-tags:
-  - Herramientas
-translation_of: Web/CSS/CSS_Background_and_Borders/Border-radius_generator
----
-<p>Esta herramienta puede ser usada para generar efectos de {{cssxref("border-radius")}} de CSS3.</p>
-
-<div class="hidden">
-<h2 id="border-radius-generator" name="border-radius-generator">border-radius</h2>
-
-<h3 id="HTML_Content">HTML Content</h3>
-
-<pre class="brush: html">&lt;div id="container"&gt;
-    &lt;div class="group section"&gt;
-        &lt;div id="preview" class="col span_12"&gt;
-            &lt;div id="subject"&gt;
-                &lt;div id="top-left" class="radius-container"
-                    data-X="left" data-Y="top"&gt;
-                &lt;/div&gt;
-                &lt;div id="top-right" class="radius-container"
-                    data-X="right" data-Y="top"&gt;
-                &lt;/div&gt;
-                &lt;div id="bottom-right" class="radius-container"
-                    data-X="right" data-Y="bottom"&gt;
-                &lt;/div&gt;
-                &lt;div id="bottom-left" class="radius-container"
-                    data-X="left" data-Y="bottom"&gt;
-                &lt;/div&gt;
-
-                &lt;div id="radius-ui-sliders"&gt;
-                    &lt;div id="tlr" class="ui-input-slider" data-topic="top-left"
-                         data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
-
-                    &lt;div id="tlw" class="ui-input-slider" data-topic="top-left-w"
-                         data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
-
-                    &lt;div id="tlh" class="ui-input-slider" data-topic="top-left-h"
-                        data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
-
-                    &lt;div id="trr" class="ui-input-slider" data-topic="top-right"
-                         data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
-
-                    &lt;div id="trw" class="ui-input-slider" data-topic="top-right-w"
-                         data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
-
-                    &lt;div id="trh" class="ui-input-slider" data-topic="top-right-h"
-                        data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
-
-                    &lt;div id="brr" class="ui-input-slider" data-topic="bottom-right"
-                         data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
-
-                    &lt;div id="brw" class="ui-input-slider" data-topic="bottom-right-w"
-                         data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
-
-                    &lt;div id="brh" class="ui-input-slider" data-topic="bottom-right-h"
-                        data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
-
-                    &lt;div id="blr" class="ui-input-slider" data-topic="bottom-left"
-                         data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
-
-                    &lt;div id="blw" class="ui-input-slider" data-topic="bottom-left-w"
-                         data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
-
-                    &lt;div id="blh" class="ui-input-slider" data-topic="bottom-left-h"
-                        data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
-                &lt;/div&gt;
-            &lt;/div&gt;
-        &lt;/div&gt;
-    &lt;/div&gt;
-    &lt;div id="controls" class="group section"&gt;
-
-        &lt;div class="group section"&gt;
-            &lt;div id="dimensions"&gt;
-                &lt;div class="ui-input-slider" data-topic="width" data-info="width"
-                     data-unit=" px" data-min="150" data-max="700" data-sensivity="1"&gt;&lt;/div&gt;
-
-                &lt;div class="ui-input-slider" data-topic="height" data-info="height"
-                    data-unit=" px" data-min="75" data-max="350" data-sensivity="1"&gt;&lt;/div&gt;
-            &lt;/div&gt;
-
-            &lt;div id="output"&gt;&lt;/div&gt;
-        &lt;/div&gt;
-
-        &lt;div class="group section"&gt;
-            &lt;div id="radius-lock"&gt;
-                &lt;div class="info"&gt; rounded corner &lt;/div&gt;
-                &lt;div class="ui-checkbox" data-topic='top-left'&gt;&lt;/div&gt;
-                &lt;div class="ui-checkbox" data-topic='top-right'&gt;&lt;/div&gt;
-                &lt;div class="ui-checkbox" data-topic='bottom-right'&gt;&lt;/div&gt;
-                &lt;div class="ui-checkbox" data-topic='bottom-left'&gt;&lt;/div&gt;
-            &lt;/div&gt;
-
-            &lt;div id="unit-selection"&gt;
-                &lt;div class="info"&gt; select border units &lt;/div&gt;
-            &lt;/div&gt;
-        &lt;/div&gt;
-
-    &lt;/div&gt;
-&lt;/div&gt;
-</pre>
-
-<h3 id="CSS_Content">CSS Content</h3>
-
-<pre class="brush: css">/*  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 &gt; 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 &gt; input {
- 	display: none;
-}
-
-.ui-checkbox &gt; 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 &gt; label:hover {
-	cursor: pointer;
-}
-
-.ui-checkbox &gt; 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 &gt; 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;
-}
-
-
-</pre>
-
-<h3 id="JavaScript_Content">JavaScript Content</h3>
-
-<pre class="brush: js"><code class="language-js">'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 &gt; 0 ? max : 100;
-		this.step = step === 0 ? 1 : step;
-		this.topic = topic;
-		this.node = node;
-		this.unit = unit;
-		this.sensivity = sensivity &gt; 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 &gt; slider.max) value = slider.max;
-		if (value &lt; slider.min)	value = slider.min;
-
-		slider.value = value;
-		slider.node.setAttribute('data-value', value);
-
-		if (send_notify !== undefined &amp;&amp; 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 &lt; 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 &lt; 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 &lt; 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' &amp;&amp; y == 'top') handle.className = 'handle handle-top-left'
-		if (x === 'right' &amp;&amp; y == 'top') handle.className = 'handle handle-top-right';
-		if (x === 'right' &amp;&amp; y == 'bottom') handle.className = 'handle handle-bottom-right';
-		if (x === 'left' &amp;&amp; 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 &amp;&amp; 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 &lt; 0)	this.size = 0;
-			if (this.size &gt; this.maxR)	this.size = this.maxR;
-			this.updateRadius();
-			this.updateBorderRadius();
-			return;
-		}
-
-		if (deltaX) {
-			this.width += this.resizeX * deltaX;
-			if (this.width &lt; 0)	this.width = 0;
-			if (this.width &gt; this.maxW)	this.width = this.maxW;
-			this.updateWidth();
-		}
-
-		if (deltaY) {
-			this.height += this.resizeY * deltaY;
-			if (this.height &lt; 0) this.height = 0;
-			if (this.height &gt; 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 &lt; 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 &lt; 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 &lt; 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
-	}
-
-})();
-
-
-</code></pre>
-</div>
-
-<p>{{ EmbedLiveSample('border-radius-generator', '100%', '800px', '') }}</p>
-
-<p> </p>
diff --git a/files/es/web/css/css_backgrounds_and_borders/border-image_generator/index.html b/files/es/web/css/css_backgrounds_and_borders/border-image_generator/index.html
new file mode 100644
index 0000000000..13a073100e
--- /dev/null
+++ b/files/es/web/css/css_backgrounds_and_borders/border-image_generator/index.html
@@ -0,0 +1,2616 @@
+---
+title: Generador Border-image
+slug: Web/CSS/CSS_Backgrounds_and_Borders/Border-image_generator
+tags:
+  - CSS
+  - Herramientas
+translation_of: Web/CSS/CSS_Background_and_Borders/Border-image_generator
+original_slug: Web/CSS/CSS_Background_and_Borders/Border-image_generator
+---
+<p>Esta herramienta permite generar valores para CSS3 {{cssxref("border-image")}}</p>
+<div class="hidden">
+ <h2 id="Border_Image_Generator" name="Border_Image_Generator">Border Image Generator</h2>
+ <h3 id="HTML_Content">HTML Content</h3>
+ <pre class="brush: html">    <div id="container">
+
+        <div id="gallery">
+            <div id="image-gallery">
+                <img class="image" src="https://mdn.mozillademos.org/files/6007/border-image-1.png">
+                <img class="image" src="https://mdn.mozillademos.org/files/6009/border-image-2.png">
+                <img class="image" src="https://mdn.mozillademos.org/files/6011/border-image-3.png">
+                <img class="image" src="https://mdn.mozillademos.org/files/6013/border-image-4.png">
+                <img class="image" src="https://mdn.mozillademos.org/files/6015/border-image-5.png">
+                <img class="image" src="https://mdn.mozillademos.org/files/6017/border-image-6.svg">
+            </div>
+        </div>
+
+        <div class="group section" id="load-actions">
+            <div id="toggle-gallery"> </div>
+            <div class="button" id="load-image"> Upload image </div>
+            <input>
+            <div class="button" id="load-remote"> </div>
+        </div>
+
+        <div class="group section" id="general-controls">
+            <div class="name"> Control Box </div>
+            <div class="separator"></div>
+            <div class="property">
+                <div class="name">scale</div>
+                <div class="ui-input-slider">
+                </div>
+            </div>
+            <div class="separator"></div>
+            <div class="property">
+                <div class="name">draggable</div>
+                <div class="ui-checkbox"></div>
+            </div>
+            <div class="property right">
+                <div class="name">section height</div>
+                <div class="ui-input-slider">
+                </div>
+            </div>
+        </div>
+
+        <div class="group section" id="preview_section">
+            <div id="subject">
+                <div class="guideline"></div>
+                <div class="guideline"></div>
+                <div class="guideline"></div>
+                <div class="guideline"></div>
+            </div>
+            <div id="preview"> </div>
+        </div>
+
+
+        <div class="group section" id="controls">
+
+
+            <div class="category" id="border-slice-control">
+                <div class="title"> border-image-slice </div>
+                <div class="property">
+                    <div class="name">fill</div>
+                    <div class="ui-checkbox"></div>
+                </div>
+            </div>
+
+
+            <div class="category" id="border-width-control">
+                <div class="title"> border-image-width </div>
+            </div>
+
+
+            <div class="category" id="border-outset-control">
+                <div class="title"> border-image-outset </div>
+            </div>
+
+
+            <div class="category" id="aditional-properties">
+                <div class="title"> aditional-properties </div>
+                <div class="property">
+                    <div class="name"> repeat-x </div>
+                    <div class="ui-dropdown border-repeat">
+                        <div>repeat</div>
+                        <div>stretch</div>
+                        <div>round</div>
+                    </div>
+                </div>
+                <div class="property">
+                    <div class="name"> repeat-y </div>
+                    <div class="ui-dropdown border-repeat">
+                        <div>repeat</div>
+                        <div>stretch</div>
+                        <div>round</div>
+                    </div>
+                </div>
+                <div class="property">
+                    <div class="ui-input-slider">
+                    </div>
+                </div>
+
+                <div class="property">
+                    <div class="ui-input-slider"></div>
+                </div>
+                <div class="property">
+                    <div class="ui-input-slider">
+                    </div>
+                </div>
+            </div>
+
+
+            <div class="category" id="output">
+                <div class="title"> CSS Code </div>
+                <div class="css-property">
+                    <span class="name"> border-image-slice: </span>
+                    <span class="value" id="out-border-slice"> </span>
+                </div>
+                <div class="css-property">
+                    <span class="name"> border-image-width: </span>
+                    <span class="value" id="out-border-width"> </span>
+                </div>
+                <div class="css-property">
+                    <span class="name"> border-image-outset: </span>
+                    <span class="value" id="out-border-outset"> </span>
+                </div>
+                <div class="css-property">
+                    <span class="name"> border-image-repeat: </span>
+                    <span class="value" id="out-border-repeat"> </span>
+                </div>
+                <div class="css-property">
+                    <span class="name"> border-image-source: </span>
+                    <span class="value" id="out-border-source">  </span>
+                </div>
+            </div>
+
+        </div>
+    </div></pre>
+ <h3 id="CSS_Content">CSS Content</h3>
+ <pre class="brush: css">/*  GRID OF TWELVE
+ * ========================================================================== */
+
+.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 {
+	height: 20px;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	-moz-user-select: none;
+	user-select: none;
+}
+
+.ui-input-slider * {
+	float: left;
+	height: 100%;
+	line-height: 100%;
+}
+
+/* Input Slider */
+
+.ui-input-slider &gt; 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 DropDown
+ */
+
+/* Dropdown */
+
+.ui-dropdown {
+	height: 2em;
+	width: 120px;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	font-size: 12px;
+
+	background-image: url("https://mdn.mozillademos.org/files/6037/drop_arrow_icon.png");
+	background-position: right center;
+	background-repeat: no-repeat;
+	background-color: #359740;
+
+	position: relative;
+
+	-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;
+}
+
+.ui-dropdown:hover {
+	cursor: pointer;
+	background-color: #208B20;
+}
+
+/* Dropdown Select Button */
+
+.ui-dropdown-select {
+	height: inherit;
+	padding: 0 0.75em;
+	color: #FFF;
+	line-height: 2em;
+}
+
+/* Dropdown List */
+
+.ui-dropdown-list {
+	width: 100%;
+	height: 150px;
+	max-height: 150px;
+	margin: 0;
+	padding: 0 0.3em;
+
+	border: 3px solid #3490D2;
+	border-color: #208B20;
+	background: #666;
+	background-color: #EEF1F5;
+	color: #000;
+
+	position: absolute;
+	top: 2em;
+	left: 0;
+	z-index: 100;
+
+	overflow: hidden;
+	transition: all 0.3s;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+.ui-dropdown-list:hover {
+	overflow: auto;
+}
+
+.ui-dropdown-list[data-hidden='true'] {
+	height: 0 !important;
+	opacity: 0;
+	visibility: hidden;
+}
+
+.ui-dropdown[data-position='left'] .ui-dropdown-list {
+	left: -100%;
+	top: 0;
+}
+
+.ui-dropdown[data-position='right'] .ui-dropdown-list {
+	left: 100%;
+	top: 0;
+}
+
+.ui-dropdown-list &gt; div {
+	width: 100%;
+	height: 1.6em;
+	margin: 0.3em 0;
+	padding: 0.3em;
+	line-height: 1em;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+.ui-dropdown-list &gt; div:hover {
+	background: #3490D2;
+	color:#FFF;
+	border-radius: 2px;
+	cursor: pointer;
+}
+
+
+/*************************************************************************************/
+/*************************************************************************************/
+
+/*
+ * UI Button
+ */
+
+/* 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 &gt; input {
+ 	display: none;
+}
+
+.ui-checkbox &gt; 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: 2px;
+	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 &gt; label:hover {
+	cursor: pointer;
+}
+
+.ui-checkbox &gt; input:checked + label {
+	background-image: url("https://mdn.mozillademos.org/files/5681/checked.png");
+	background-color: #379B4A;
+}
+
+/*************************************************************************************/
+/*************************************************************************************/
+
+/*
+ * BORDER IMAGE GENERATOR TOOL
+ */
+
+body {
+	width: 100%;
+	margin: 0 auto;
+	padding: 0 0 20px 0;
+
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+
+	/*background: url("https://mdn.mozillademos.org/files/6025/grain.png");*/
+	border: 1px solid #EEE;
+
+	-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;
+}
+
+body[data-move='X'] {
+	cursor: w-resize !important;
+}
+
+body[data-move='Y'] {
+	cursor: s-resize !important;
+}
+
+#container {
+	width: 100%;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+[data-draggable='true']:hover {
+	cursor: move;
+}
+
+[data-draggable='true']:hover &gt; * {
+	cursor: default;
+}
+
+
+
+/******************************************************************************/
+/******************************************************************************/
+
+/*
+ * Border Image Picker
+ */
+
+#gallery {
+	box-shadow: 0 0 3px 0 #BABABA;
+}
+
+#image-gallery {
+	width: 600px;
+	height: 100px;
+	margin: 0 auto;
+	transition: margin 0.4s;
+}
+
+#image-gallery .image {
+	height: 80px;
+	float: left;
+	margin: 10px;
+	opacity: 0.5;
+	background-color: #FFF;
+	box-shadow: 0px 0px 3px 1px #BABABA;
+}
+
+#image-gallery .image[selected="true"] {
+	box-shadow: 0px 0px 3px 1px #3BBA52;
+	opacity: 1;
+}
+
+#image-gallery .image:hover {
+	cursor: pointer;
+	box-shadow: 0px 0px 3px 1px #30ACE5;
+	opacity: 1;
+}
+
+#image-gallery[data-collapsed='true'] {
+	margin-top: -100px;
+}
+
+/* Load Menu */
+
+#load-actions {
+	margin: 10px 0;
+}
+
+#toggle-gallery {
+	width: 30px;
+	height: 25px;
+	margin: 10px;
+	color: #FFF;
+
+	background-image: url('https://mdn.mozillademos.org/files/6005/arrow-up-white.png');
+	background-repeat: no-repeat;
+	background-position: top 4px center;
+	background-color: #888888 !important;
+
+	border-radius: 2px;
+	float: left;
+}
+
+#toggle-gallery:hover {
+	cursor: pointer;
+}
+
+#toggle-gallery[data-action='show'] {
+	background-image: url('https://mdn.mozillademos.org/files/6001/arrow-down-white.png');
+	background-color: #888888 !important;
+}
+
+#toggle-gallery[data-action='hide'] {
+	background-image: url('https://mdn.mozillademos.org/files/6005/arrow-up-white.png');
+}
+
+.button {
+	width: 100px;
+	height: 25px;
+	margin: 10px;
+	color: #FFF;
+	text-align: center;
+	font-size: 12px;
+	line-height: 25px;
+	background-color: #379B4A;
+	border-radius: 2px;
+	float: left;
+}
+
+.button:hover {
+	cursor: pointer;
+	background-color: #3380C4;
+}
+
+#load-image {
+	float: left;
+}
+
+#load-remote {
+	width: 30px;
+	background-image: url('https://mdn.mozillademos.org/files/6003/arrow-right-white.png');
+	background-repeat: no-repeat;
+	background-position: center center;
+}
+
+#remote-url {
+	width: 200px;
+	height: 23px;
+	margin: 10px;
+	padding: 0 5px;
+	border: 1px solid #379B4A;
+	border-radius: 2px;
+	float: left;
+
+	transition: width 0.5s;
+}
+
+#remote-url:focus {
+	box-shadow: 0px 0px 3px -1px #379B4A; /*#68ACE8; */
+	border-color: rgba(55, 155, 74, 0.5);
+	width: 450px;
+}
+
+/*
+ * Visible Area
+ */
+
+#preview_section {
+	position: relative;
+	min-height: 400px;
+}
+
+/* Image Control */
+
+#subject {
+	width: 300px;
+	height: 300px;
+	background-repeat: no-repeat;
+	background-size: 100%;
+	background-color: #FFF;
+	border: 1px solid #CCC;
+
+	position: absolute;
+	z-index: 10;
+	top: 15%;
+	left: 10%;
+
+	box-shadow: 0 0 3px 0 #BABABA;
+	transition-property: width, height;
+	transition-duration: 0.1s;
+}
+
+#subject .guideline {
+	background-color: rgba(255, 255, 255, 0.7);
+	border: 1px solid rgba(0, 0, 0, 0.3);
+	position: absolute;
+}
+
+#subject .guideline:hover {
+	background-color: #F00;
+}
+
+#subject .guideline[data-active] {
+	background-color: #F00;
+	z-index: 10;
+}
+
+#subject .guideline[data-axis='X'] {
+	width: 1px;
+	height: 100%;
+	top: -1px;
+}
+
+#subject .guideline[data-axis='Y'] {
+	width: 100%;
+	height: 1px;
+	left: -1px;
+}
+
+#subject .guideline[data-axis='X']:hover {
+	cursor: w-resize;
+}
+
+#subject .guideline[data-axis='Y']:hover {
+	cursor: s-resize;
+}
+
+
+#subject .relative {
+	position: relative;
+	font-size: 12px;
+}
+
+#subject .tooltip, #subject .tooltip2 {
+	width: 40px;
+	height: 20px;
+	line-height: 20px;
+	font-size: 12px;
+	text-align: center;
+
+	position: absolute;
+	opacity: 0.5;
+	transition: opacity 0.25s;
+}
+
+#subject .tooltip {
+	background: #EEE;
+	border-radius: 2px;
+	border: 1px solid #CCC;
+}
+
+#subject .tooltip2{
+	color: #555;
+}
+
+#subject [data-active] &gt; * {
+	opacity: 1;
+}
+
+#subject .tooltip[data-info='top'] {
+	top: -10px;
+	right: -50px;
+}
+
+#subject .tooltip[data-info='right'] {
+	bottom: -30px;
+	right: -20px;
+}
+
+#subject .tooltip[data-info='bottom'] {
+	top: -10px;
+	left: -50px;
+}
+
+#subject .tooltip[data-info='left'] {
+	top: -30px;
+	right: -20px;
+}
+
+#subject .tooltip2[data-info='top'] {
+	top: -10px;
+	left: -50px;
+}
+
+#subject .tooltip2[data-info='right'] {
+	top: -30px;
+	right: -20px;
+}
+
+#subject .tooltip2[data-info='bottom'] {
+	top: -10px;
+	right: -50px;
+}
+
+#subject .tooltip2[data-info='left'] {
+	bottom: -30px;
+	right: -20px;
+}
+
+/* Preview */
+
+#preview {
+	width: 30%;
+	height: 50%;
+	background-color: #FFF;
+	text-align: center;
+	overflow: hidden;
+	position: absolute;
+	z-index: 10;
+
+	left: 60%;
+	top: 15%;
+
+	border-radius: 2px;
+	border-image-width: 20px;
+	border-image-repeat: round;
+	box-shadow: 0 0 3px 0 #BABABA;
+}
+
+#preview .resize-handle {
+	width: 10px;
+	height: 10px;
+	background: url("https://mdn.mozillademos.org/files/6027/resize.png") center center no-repeat;
+	position: absolute;
+	bottom: 0;
+	right: 0;
+}
+
+#preview .resize-handle:hover {
+	cursor: nw-resize;
+}
+
+
+/*
+ * General controls MENU
+ */
+
+#general-controls {
+	padding: 10px 30px;
+	background-color: #FFF;
+	opacity: 0.95;
+	color: #888;
+	/*border-radius: 2px;*/
+	box-shadow: 0 0 3px 0 #BABABA;
+}
+
+#general-controls .property {
+	width: 130px;
+	float: left;
+}
+
+#general-controls .name {
+	height: 20px;
+	margin: 0 10px 0 0;
+	line-height: 100%;
+	text-align: right;
+	float: left;
+}
+
+#general-controls .right {
+	width: 200px;
+	float: right;
+}
+
+#general-controls .ui-checkbox label {
+	height: 10px;
+}
+
+#general-controls .separator {
+	height: 40px;
+	width: 1px;
+	margin: -10px 15px;
+	background-color: #EEE;
+	float: left;
+}
+
+/*
+ * Controls
+ */
+
+#controls {
+	color: #444;
+	margin: 10px 0 0 0;
+}
+
+#controls .category {
+	height: 190px;
+	min-width: 260px;
+	margin: 10px;
+	padding: 10px;
+	border: 1px solid #CCC;
+	border-radius: 3px;
+	float: left;
+
+	box-shadow: 0 0 3px 0 #BABABA;
+	transition: all 0.25s;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+@media (min-width: 880px) {
+	#controls .category {
+		width: 30%;
+		margin-left: 1.66%;
+		margin-right: 1.66%;
+	}
+}
+
+@media (max-width: 879px) {
+	#controls .category {
+		width: 37%;
+		margin-left: 6.5%;
+		margin-right: 6.5%;
+	}
+}
+
+#controls .category .title {
+	width: 100%;
+	height: 30px;
+	margin: 0 0 10px 0;
+	line-height: 25px;
+
+	text-align: center;
+	color: #AAA;
+}
+
+#controls .category:hover .title {
+	color: #777;
+}
+
+#controls .category &gt; .group {
+	border: 1px solid #CCC;
+	border-radius: 2px;
+}
+
+
+/* property */
+
+#controls .property {
+	width: 250px;
+	height: 20px;
+	margin: 5px auto;
+}
+
+#controls .property .ui-input-slider {
+	margin: 0;
+	float: left;
+}
+
+#controls .property .ui-input-slider-info {
+	width: 60px;
+}
+
+#controls .property .ui-input-slider-left {
+	transition: opacity 0.15s;
+    opacity: 0;
+}
+
+#controls .property .ui-input-slider-right {
+	transition: opacity 0.15s;
+    opacity: 0;
+}
+
+#controls .property .name {
+	width: 60px;
+	height: 20px;
+	padding: 0px 10px 0px 0px;
+	text-align: right;
+	line-height: 100%;
+	float: left;
+}
+
+#controls .property .config {
+	width: 20px;
+	height: 20px;
+	float: left;
+	background: url("https://mdn.mozillademos.org/files/6021/config.png") center center no-repeat;
+	opacity: 0.5;
+}
+
+#controls .property .config:hover {
+	cursor: pointer;
+	opacity: 1;
+}
+
+#controls .ui-input-slider:hover .ui-input-slider-right {
+    opacity: 1;
+}
+
+#controls .ui-input-slider:hover .ui-input-slider-left {
+    opacity: 1;
+}
+
+#controls .property .ui-dropdown {
+	margin: 0 10px;
+	float: left;
+}
+
+
+#controls .property .ui-checkbox {
+	margin: 0 0 0 16px;
+	float: left;
+}
+
+#controls .property .ui-checkbox label {
+	height: 0.85em;
+	width: 10px;
+}
+
+/* dropdowns */
+#controls .ui-dropdown {
+	width: 50px;
+	height: 1.7em;
+	border-radius: 2px;
+}
+
+#controls .ui-dropdown-select {
+	line-height: 1.6em;
+}
+
+#controls .ui-dropdown-list {
+	top: 20px;
+}
+
+#controls .ui-dropdown-list {
+	border-width: 1px;
+	text-align: center;
+}
+
+#controls .ui-dropdown-list:hover {
+	overflow: hidden;
+}
+
+#controls .border-repeat {
+	margin: 0 0 0 16px !important;
+	width: 80px;
+}
+
+#controls .border-repeat .ui-dropdown-list {
+	height: 6.2em;
+	border-width: 1px;
+	text-align: center;
+}
+
+/* border-image-slice */
+
+
+#border-slice-control .ui-dropdown-list {
+	height: 4.3em;
+}
+
+/* border-image-width */
+
+#border-width-control .ui-dropdown-list {
+	height: 6.2em;
+}
+
+/* border-image-outset */
+
+#border-outset-control .ui-dropdown-list {
+	height: 4.3em;
+}
+
+#aditional-properties .property {
+	width: 200px;
+}
+
+#aditional-properties .ui-input-slider &gt; input {
+	width: 80px !important;
+}
+
+/* unit settings panel */
+
+#unit-settings {
+	padding: 10px;
+	position: absolute;
+
+	background: #FFF;
+
+	font-size: 12px;
+	border-radius: 3px;
+	border: 1px solid #CCC;
+	text-align: center;
+	color: #555;
+
+	position: absolute;
+	z-index: 1000;
+
+	box-shadow: 0 0 3px 0 #BABABA;
+	transition: all 0.25s;
+}
+
+#unit-settings .title {
+	width: 100%;
+	margin: -5px auto 0;
+
+	color: #666;
+	font-size: 14px;
+	font-weight: bold;
+	line-height: 25px;
+	border-bottom: 1px solid #E5E5E5;
+}
+
+#unit-settings .ui-input-slider {
+	margin: 10px 0 0 0;
+}
+
+#unit-settings .ui-input-slider-info {
+	width: 50px;
+	line-height: 1.5em;
+}
+
+#unit-settings input {
+	font-size: 12px;
+	width: 40px !important;
+}
+
+#unit-settings .close {
+	width: 16px;
+	height: 16px;
+	background: url('https://mdn.mozillademos.org/files/6019/close.png') no-repeat center center;
+	background-size: 75%;
+
+	position: absolute;
+	top: 4px;
+	right: 4px;
+	opacity: 0.5;
+}
+
+#unit-settings .close:hover {
+	cursor: pointer;
+	opacity: 1;
+}
+
+#unit-settings[data-active='true'] {
+	opacity: 1;
+}
+
+#unit-settings[data-active='false'] {
+	opacity: 0;
+	top: -100px !important;
+}
+
+/*
+ * CSS Output Code
+ */
+
+#output {
+	padding: 10px;
+	border: 2px dashed #888 !important;
+	box-shadow: none !important;
+	border-radius: 3px;
+	overflow: hidden;
+
+	-moz-user-select: text;
+	-webkit-user-select: text;
+	-ms-user-select: text;
+	user-select: text;
+}
+
+
+@media (min-width: 880px) {
+	#output {
+		width: 63.33% !important;
+	}
+}
+
+@media (max-width: 879px) {
+	#output {
+		width: 87% !important;
+	}
+}
+
+
+#output .title {
+	width: 100%;
+	height: 30px;
+	margin: 0 0 10px 0;
+	line-height: 25px;
+
+	text-align: center;
+	color: #AAA;
+}
+
+#output .css-property {
+	width: 100%;
+	margin: 0;
+	color: #555;
+	font-size: 14px;
+	line-height: 18px;
+	float: left;
+}
+
+#output .css-property .name {
+	width: 30%;
+	font-weight: bold;
+	text-align: right;
+	float: left;
+}
+
+#output .css-property .value {
+	width: 65%;
+	padding: 0 2.5%;
+	word-break: break-all;
+	float: left;
+}
+
+</pre>
+ <h3 id="JavaScript_Content">JavaScript Content</h3>
+ <pre class="brush: js">'use strict';
+
+/**
+ * UI-SlidersManager
+ */
+
+var InputSliderManager = (function InputSliderManager() {
+
+	var subscribers = {};
+	var sliders = [];
+
+	var InputComponent = function InputComponent(obj) {
+		var input = document.createElement('input');
+		input.setAttribute('type', 'text');
+		input.style.width = 50 + obj.precision * 10 + 'px';
+
+		input.addEventListener('click', function(e) {
+			this.select();
+		});
+
+		input.addEventListener('change', function(e) {
+			var value = parseFloat(e.target.value);
+
+			if (isNaN(value) === true)
+				setValue(obj.topic, obj.value);
+			else
+				setValue(obj.topic, value);
+		});
+
+		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) {
+			document.removeEventListener("mousemove", sliderMotion);
+			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("mouseup", slideEnd);
+			document.addEventListener("mousemove", sliderMotion);
+		});
+
+		var slideEnd = function slideEnd(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		= parseFloat(node.getAttribute('data-min'));
+		var max		= parseFloat(node.getAttribute('data-max'));
+		var step	= parseFloat(node.getAttribute('data-step'));
+		var value	= parseFloat(node.getAttribute('data-value'));
+		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;
+		var precision = node.getAttribute('data-precision') | 0;
+
+		this.min = isNaN(min) ? 0 : min;
+		this.max = isNaN(max) ? 100 : max;
+		this.precision = precision &gt;= 0 ? precision : 0;
+		this.step = step &lt; 0 || isNaN(step) ? 1 : step.toFixed(precision);
+		this.topic = topic;
+		this.node = node;
+		this.unit = unit === null ? '' : unit;
+		this.sensivity = sensivity &gt; 0 ? sensivity : 5;
+		value = isNaN(value) ? this.min : value;
+
+		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);
+
+		this.input = input;
+		sliders[topic] = this;
+		setValue(topic, value);
+	};
+
+	InputSlider.prototype.setInputValue = function setInputValue() {
+		this.input.value = this.value.toFixed(this.precision) + this.unit;
+	};
+
+	var setValue = function setValue(topic, value, send_notify) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		value = parseFloat(value.toFixed(slider.precision));
+
+		if (value &gt; slider.max) value = slider.max;
+		if (value &lt; slider.min)	value = slider.min;
+
+		slider.value = value;
+		slider.node.setAttribute('data-value', value);
+
+		slider.setInputValue();
+
+		if (send_notify === false)
+			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 setStep = function setStep(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.step = parseFloat(value);
+		setValue(topic, slider.value);
+	};
+
+	var setPrecision = function setPrecision(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		value = value | 0;
+		slider.precision = value;
+
+		var step = parseFloat(slider.step.toFixed(value));
+		if (step === 0)
+			slider.step = 1 / Math.pow(10, value);
+
+		setValue(topic, slider.value);
+	};
+
+	var setSensivity = function setSensivity(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		value = value | 0;
+
+		slider.sensivity = value &gt; 0 ? value : 5;
+	};
+
+	var getNode =  function getNode(topic) {
+		return sliders[topic].node;
+	};
+
+	var getPrecision =  function getPrecision(topic) {
+		return sliders[topic].precision;
+	};
+
+	var getStep =  function getStep(topic) {
+		return sliders[topic].step;
+	};
+
+	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() {
+		if (subscribers[this.topic] === undefined)
+			return;
+		for (var i = 0; i &lt; subscribers[this.topic].length; i++)
+			subscribers[this.topic][i](this.value);
+	};
+
+	var createSlider = function createSlider(topic, label) {
+		var slider = document.createElement('div');
+		slider.className = 'ui-input-slider';
+		slider.setAttribute('data-topic', topic);
+
+		if (label !== undefined)
+			slider.setAttribute('data-info', label);
+
+		new InputSlider(slider);
+		return slider;
+	};
+
+	var init = function init() {
+		var elem = document.querySelectorAll('.ui-input-slider');
+		var size = elem.length;
+		for (var i = 0; i &lt; size; i++)
+			new InputSlider(elem[i]);
+	};
+
+	return {
+		init : init,
+		setMax : setMax,
+		setMin : setMin,
+		setUnit : setUnit,
+		setStep : setStep,
+		getNode : getNode,
+		getStep : getStep,
+		setValue : setValue,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe,
+		setPrecision : setPrecision,
+		setSensivity : setSensivity,
+		getPrecision : getPrecision,
+		createSlider : createSlider,
+	};
+
+})();
+
+
+/**
+ * UI-DropDown Select
+ */
+
+var DropDownManager = (function DropdownManager() {
+
+	var subscribers = {};
+	var dropdowns = [];
+	var active = null;
+
+	var visbility = ["hidden", "visible"];
+
+
+	var DropDown = function DropDown(node) {
+		var topic = node.getAttribute('data-topic');
+		var label = node.getAttribute('data-label');
+		var selected = node.getAttribute('data-selected') | 0;
+
+		var select = document.createElement('div');
+		var list = document.createElement('div');
+		var uval = 0;
+		var option = null;
+		var option_value = null;
+
+		list.className = 'ui-dropdown-list';
+		select.className = 'ui-dropdown-select';
+
+		while (node.firstElementChild !== null) {
+			option = node.firstElementChild;
+			option_value = option.getAttribute('data-value');
+
+			if (option_value === null)
+				option.setAttribute('data-value', uval);
+
+			list.appendChild(node.firstElementChild);
+			uval++;
+		}
+
+		node.appendChild(select);
+		node.appendChild(list);
+
+		select.onclick = this.toggle.bind(this);
+		list.onclick = this.updateValue.bind(this);
+		document.addEventListener('click', clickOut);
+
+		this.state = 0;
+		this.time = 0;
+		this.dropmenu = list;
+		this.select = select;
+		this.toggle(false);
+		this.value = {};
+		this.topic = topic;
+
+		if (label)
+			select.textContent = label;
+		else
+			this.setNodeValue(list.children[selected]);
+
+		dropdowns[topic] = this;
+
+	};
+
+	DropDown.prototype.toggle = function toggle(state) {
+		if (typeof(state) === 'boolean')
+			this.state = state === false ? 0 : 1;
+		else
+			this.state = 1 ^ this.state;
+
+		if (active !== this) {
+			if (active)
+				active.toggle(false);
+			active = this;
+		}
+
+		if (this.state === 0)
+			this.dropmenu.setAttribute('data-hidden', 'true');
+		else
+			this.dropmenu.removeAttribute('data-hidden');
+
+	};
+
+	var clickOut = function clickOut(e) {
+		if (active.state === 0 ||
+			e.target === active.dropmenu ||
+			e.target === active.select)
+			return;
+
+		active.toggle(false);
+	};
+
+	DropDown.prototype.updateValue = function updateValue(e) {
+
+		if (Date.now() - this.time &lt; 500)
+			return;
+
+		if (e.target.className !== "ui-dropdown-list") {
+			this.setNodeValue(e.target);
+			this.toggle(false);
+		}
+
+		this.time = Date.now();
+	};
+
+	DropDown.prototype.setNodeValue = function setNodeValue(node) {
+		this.value['name'] = node.textContent;
+		this.value['value'] = node.getAttribute('data-value');
+
+		this.select.textContent = node.textContent;
+		this.select.setAttribute('data-value', this.value['value']);
+
+		notify.call(this);
+	};
+
+	var createDropDown = function createDropDown(topic, options) {
+
+		var dropdown = document.createElement('div');
+		dropdown.setAttribute('data-topic', topic);
+		dropdown.className = 'ui-dropdown';
+
+		for (var i in options) {
+			var x = document.createElement('div');
+			x.setAttribute('data-value', i);
+			x.textContent = options[i];
+			dropdown.appendChild(x);
+		}
+
+		new DropDown(dropdown);
+
+		return dropdown;
+	};
+
+	var setValue = function setValue(topic, index) {
+		if (dropdowns[topic] === undefined ||
+			index &gt;= dropdowns[topic].dropmenu.children.length)
+			return;
+
+		dropdowns[topic].setNodeValue(dropdowns[topic].dropmenu.children[index]);
+	};
+
+	var subscribe = function subscribe(topic, callback) {
+		if (subscribers[topic] === undefined)
+			subscribers[topic] = [];
+		subscribers[topic].push(callback);
+	};
+
+	var unsubscribe = function unsubscribe(topic, callback) {
+		var index = subscribers[topic].indexOf(callback);
+		subscribers[topic].splice(index, 1);
+	};
+
+	var notify = function notify() {
+		if (subscribers[this.topic] === undefined)
+			return;
+
+		for (var i in subscribers[this.topic]) {
+			subscribers[this.topic][i](this.value);
+		}
+	};
+
+	var init = function init() {
+		var elem, size;
+
+		elem = document.querySelectorAll('.ui-dropdown');
+		size = elem.length;
+		for (var i = 0; i &lt; size; i++)
+			new DropDown(elem[i]);
+
+	};
+
+	return {
+		init : init,
+		setValue : setValue,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe,
+		createDropDown : createDropDown
+	};
+
+})();
+
+
+/**
+ * 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) {
+		var obj = buttons[topic];
+		if (obj === undefined)
+			return;
+
+		obj.checkbox.checked = value;
+		notify.call(obj);
+	};
+
+	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() {
+		if (subscribers[this.topic] === undefined)
+			return;
+		for (var i = 0; i &lt; 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 &lt; size; i++)
+			new CheckBox(elem[i]);
+	};
+
+	return {
+		init : init,
+		setValue : setValue,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe
+	};
+
+})();
+
+window.addEventListener("load", function() {
+	BorderImage.init();
+});
+
+var BorderImage = (function BorderImage() {
+
+	var getElemById = document.getElementById.bind(document);
+
+	var subject;
+	var preview;
+	var guidelines = [];
+	var positions = ['top', 'right', 'bottom', 'left'];
+
+	var makeDraggable = function makeDraggable(elem) {
+
+		var offsetTop;
+		var offsetLeft;
+
+		elem.setAttribute('data-draggable', 'true');
+
+		var dragStart = function dragStart(e) {
+			if (e.target.getAttribute('data-draggable') !== 'true' ||
+				e.target !== elem || e.button !== 0)
+				return;
+
+			offsetLeft = e.clientX - elem.offsetLeft;
+			offsetTop = e.clientY - elem.offsetTop;
+
+			document.addEventListener('mousemove', mouseDrag);
+			document.addEventListener('mouseup', dragEnd);
+		};
+
+		var dragEnd = function dragEnd(e) {
+			if (e.button !== 0)
+				return;
+
+			document.removeEventListener('mousemove', mouseDrag);
+			document.removeEventListener('mouseup', dragEnd);
+		};
+
+		var mouseDrag = function mouseDrag(e) {
+
+			elem.style.left = e.clientX - offsetLeft + 'px';
+			elem.style.top = e.clientY - offsetTop + 'px';
+		};
+
+		elem.addEventListener('mousedown', dragStart, false);
+	};
+
+	var PreviewControl = function PreviewControl() {
+
+		var dragging = false;
+		var valueX = null;
+		var valueY = null;
+
+		var dragStart = function dragStart(e) {
+			if (e.button !== 0)
+				return;
+
+			valueX = e.clientX - preview.clientWidth;
+			valueY = e.clientY - preview.clientHeight;
+			dragging = true;
+
+			document.addEventListener('mousemove', mouseDrag);
+		};
+
+		var dragEnd = function dragEnd(e) {
+			if (e.button !== 0 || dragging === false)
+				return;
+
+			document.removeEventListener('mousemove', mouseDrag);
+			dragging = false;
+		};
+
+		var mouseDrag = function mouseDrag(e) {
+			InputSliderManager.setValue('preview-width', e.clientX - valueX);
+			InputSliderManager.setValue('preview-height', e.clientY - valueY);
+		};
+
+		var init = function init() {
+
+			makeDraggable(preview);
+			makeDraggable(subject);
+
+			var handle = document.createElement('div');
+			handle.className = 'resize-handle';
+
+			handle.addEventListener('mousedown', dragStart);
+			document.addEventListener('mouseup', dragEnd);
+
+			preview.appendChild(handle);
+
+		};
+
+		return {
+			init: init
+		};
+
+	}();
+
+	var ImageReader = (function ImageReader() {
+
+		var fReader = new FileReader();
+		var browse = document.createElement('input');
+
+		var loadImage = function loadImage(e) {
+			if (browse.files.length === 0)
+				return;
+
+			var file = browse.files[0];
+
+			if (file.type.slice(0, 5) !== 'image')
+				return;
+
+			fReader.readAsDataURL(file);
+
+			return false;
+		};
+
+		fReader.onload = function(e) {
+			ImageControl.loadRemoteImage(e.target.result);
+		};
+
+		var load = function load() {
+			browse.click();
+		};
+
+		browse.setAttribute('type', 'file');
+		browse.style.display = 'none';
+		browse.onchange = loadImage;
+
+		return {
+			load: load
+		};
+
+	})();
+
+	var ImageControl = (function ImageControl() {
+
+		var scale = 0.5;
+		var imgSource = new Image();
+		var imgState = null;
+		var selected = null;
+
+
+		var topics = ['slice', 'width', 'outset'];
+		var properties = {};
+		properties['border1'] = {
+			fill			: false,
+
+			slice_values	: [27, 27, 27, 27],
+			width_values	: [20, 20, 20, 20],
+			outset_values	: [0, 0, 0, 0],
+
+			slice_units		: [0, 0, 0, 0],
+			width_units		: [0, 0, 0, 0],
+			outset_units	: [0, 0, 0, 0],
+
+			repeat			: [1, 1],
+			size			: [300, 200],
+			preview_area	: 400
+		};
+
+		properties['border2'] = {
+			fill			: false,
+
+			slice_values	: [33, 33, 33, 33],
+			width_values	: [1.5, 1.5, 1.5, 1.5],
+			outset_values	: [0, 0, 0, 0],
+
+			slice_units		: [1, 1, 1, 1],
+			width_units		: [2, 2, 2, 2],
+			outset_units	: [0, 0, 0, 0],
+
+			repeat			: [2, 2],
+			size			: [300, 200],
+			preview_area	: 400
+		};
+
+		properties['border3'] = {
+			fill			: true,
+
+			slice_values	: [15, 15, 15, 15],
+			width_values	: [10, 10, 10, 10],
+			outset_values	: [0, 0, 0, 0],
+
+			slice_units		: [0, 0, 0, 0],
+			width_units		: [0, 0, 0, 0],
+			outset_units	: [0, 0, 0, 0],
+
+			repeat			: [2, 2],
+			size			: [300, 200],
+			preview_area	: 400
+		};
+
+		properties['border4'] = {
+			fill			: false,
+
+			slice_values	: [13, 13, 13, 13],
+			width_values	: [13, 13, 13, 13],
+			outset_values	: [13, 13, 13, 13],
+
+			slice_units		: [0, 0, 0, 0],
+			width_units		: [0, 0, 0, 0],
+			outset_units	: [0, 0, 0, 0],
+
+			repeat			: [0, 0],
+			size			: [300, 200],
+			preview_area	: 400
+		};
+
+		properties['border5'] = {
+			fill			: false,
+
+			slice_values	: [0, 12, 0, 12],
+			width_values	: [0, 12, 0, 12],
+			outset_values	: [0, 0, 0, 0],
+
+			slice_units		: [0, 0, 0, 0],
+			width_units		: [0, 0, 0, 0],
+			outset_units	: [0, 0, 0, 0],
+
+			repeat			: [0, 0],
+			size			: [300, 200],
+			preview_area	: 400,
+		};
+
+		properties['border6'] = {
+			fill			: false,
+
+			slice_values	: [42, 42, 42, 42],
+			width_values	: [42, 42, 42, 42],
+			outset_values	: [0, 0, 0, 0],
+
+			slice_units		: [0, 0, 0, 0],
+			width_units		: [0, 0, 0, 0],
+			outset_units	: [0, 0, 0, 0],
+
+			repeat			: [2, 2],
+			size			: [350, 350],
+			preview_area	: 500,
+		};
+
+
+		var loadLocalImage = function loadLocalImage(source) {
+			var location = "images/" + source;
+			imgSource.src = location;
+		};
+
+		var loadRemoteImage = function loadRemoteImage(source) {
+			imgSource.src = source;
+			if (selected)
+				selected.removeAttribute('selected');
+			Tool.setOutputCSS('source', 'url("' + source + '")');
+		};
+
+		var pickImage = function pickImage(e) {
+			if (e.target.className === 'image') {
+				selected = e.target;
+				selected.setAttribute('selected', 'true');
+				loadRemoteImage(e.target.src);
+				imgState = e.target.getAttribute('data-stateID');
+			}
+		};
+
+		var loadImageState = function loadImageState(stateID) {
+			if (properties[stateID] === undefined)
+				return;
+
+			var prop = properties[stateID];
+			var topic;
+			var unit_array;
+			var value_array;
+
+			for (var i in topics) {
+				for (var j=0; j&lt;4; j++) {
+					topic = topics[i] + '-' + positions[j];
+					unit_array = topics[i] + '_units';
+					value_array = topics[i] + '_values';
+					InputSliderManager.setValue(topic, prop[value_array][j]);
+					DropDownManager.setValue(topic, prop[unit_array][j]);
+				}
+			}
+
+			ButtonManager.setValue('slice-fill', prop['fill']);
+			DropDownManager.setValue('image-repeat-X', prop['repeat'][0]);
+			DropDownManager.setValue('image-repeat-Y', prop['repeat'][1]);
+			InputSliderManager.setValue('preview-width', prop['size'][0]);
+			InputSliderManager.setValue('preview-height', prop['size'][1]);
+			InputSliderManager.setValue('preview-area-height', prop['preview_area']);
+		};
+
+		var update = function update() {
+			scale =  Math.min(300, (30000 / this.width) | 0);
+			setScale(scale);
+			InputSliderManager.setValue('scale', scale, false);
+
+			subject.style.backgroundImage = 'url("' + this.src + '")';
+			preview.style.borderImageSource = 'url("' + this.src + '")';
+
+			guidelines['slice-top'].setMax(this.height);
+			guidelines['slice-right'].setMax(this.width);
+			guidelines['slice-bottom'].setMax(this.height);
+			guidelines['slice-left'].setMax(this.width);
+
+			if (imgState)
+				loadImageState(imgState);
+		};
+
+		var setScale = function setScale(value) {
+			scale = value;
+			var w = imgSource.width * scale / 100 | 0;
+			var h = imgSource.height * scale / 100 | 0;
+			subject.style.width = w + 'px';
+			subject.style.height = h + 'px';
+
+			for (var i = 0; i &lt; positions.length; i++)
+				guidelines['slice-' + positions[i]].updateGuidelinePos();
+		};
+
+		var getScale = function getScale() {
+			return scale/100;
+		};
+
+		var toggleGallery = function toggleGallery() {
+			var gallery = getElemById('image-gallery');
+			var button  = getElemById('toggle-gallery');
+			var state = 1;
+			button.addEventListener('click', function() {
+				state = 1 ^ state;
+				if (state === 0) {
+					gallery.setAttribute('data-collapsed', 'true');
+					button.setAttribute('data-action', 'show');
+				}
+				else {
+					gallery.removeAttribute('data-collapsed');
+					button.setAttribute('data-action', 'hide');
+				}
+			});
+		};
+
+		var init = function init() {
+			var gallery = getElemById('image-gallery');
+			var browse = getElemById('load-image');
+			var remote = getElemById('remote-url');
+			var load_remote = getElemById('load-remote');
+
+			remote.addEventListener('change', function(){
+				loadRemoteImage(this.value);
+			});
+
+			load_remote.addEventListener('click', function(){
+				loadRemoteImage(remote.value);
+			});
+
+			browse.addEventListener('click', ImageReader.load);
+			gallery.addEventListener('click', pickImage);
+			imgSource.addEventListener('load', update);
+
+			InputSliderManager.subscribe('scale', setScale);
+			InputSliderManager.setValue('scale', scale);
+			imgState = 'border1';
+			loadRemoteImage('https://mdn.mozillademos.org/files/6007/border-image-1.png');
+			toggleGallery();
+		};
+
+		return {
+			init: init,
+			getScale : getScale,
+			loadRemoteImage: loadRemoteImage
+		};
+
+	})();
+
+	var GuideLine = function GuideLine(node) {
+		var topic = node.getAttribute('data-topic');
+		var axis = node.getAttribute('data-axis');
+
+		this.node = node;
+		this.topic = topic;
+		this.axis = axis;
+		this.info = topic.split('-')[1];
+
+		this.position = 0;
+		this.value = 0;
+		this.unit = 0;
+		this.max = 0;
+		this.pos = positions.indexOf(this.info);
+
+		guidelines[topic] = this;
+
+		var relative_container = document.createElement('div');
+		var tooltip = document.createElement('div');
+		var tooltip2 = document.createElement('div');
+
+		tooltip.className = 'tooltip';
+		tooltip.setAttribute('data-info', this.info);
+
+		tooltip2.className = 'tooltip2';
+		tooltip2.textContent = this.info;
+		tooltip2.setAttribute('data-info', this.info);
+
+		this.tooltip = tooltip;
+
+		relative_container.appendChild(tooltip);
+		relative_container.appendChild(tooltip2);
+		node.appendChild(relative_container);
+
+		var startX = 0;
+		var startY = 0;
+		var start = 0;
+
+		var startDrag = function startDrag(e) {
+			startX = e.clientX;
+			startY = e.clientY;
+			start = guidelines[topic].position;
+			document.body.setAttribute('data-move', axis);
+			relative_container.setAttribute('data-active', '');
+			node.setAttribute('data-active', '');
+
+			document.addEventListener('mousemove', updateGuideline);
+			document.addEventListener('mouseup', endDrag);
+		};
+
+		var endDrag = function endDrag() {
+			document.body.removeAttribute('data-move');
+			relative_container.removeAttribute('data-active');
+			node.removeAttribute('data-active');
+
+			document.removeEventListener('mousemove', updateGuideline);
+		};
+
+		var updateGuideline = function updateGuideline(e) {
+			var value;
+			if (topic === 'slice-top')
+				value = e.clientY - startY + start;
+
+			if (topic === 'slice-right')
+				value = startX - e.clientX + start;
+
+			if (topic === 'slice-bottom')
+				value = startY - e.clientY + start;
+
+			if (topic === 'slice-left')
+				value = e.clientX - startX + start;
+
+			if (this.unit === 0)
+				InputSliderManager.setValue(topic, value * 1 / ImageControl.getScale() | 0);
+			else {
+				InputSliderManager.setValue(topic, (value * 100 / (this.max * ImageControl.getScale())) | 0);
+			}
+
+		}.bind(this);
+
+		node.addEventListener("mousedown", startDrag);
+
+		InputSliderManager.subscribe(topic, this.setPosition.bind(this));
+		InputSliderManager.setValue(topic, this.position);
+	};
+
+
+	GuideLine.prototype.updateGuidelinePos = function updateGuidelinePos() {
+		if (this.unit === 0)
+			this.position = this.value * ImageControl.getScale() | 0;
+		else
+			this.position = this.value * this.max * ImageControl.getScale() / 100 | 0;
+
+		this.node.style[this.info] = this.position + 'px';
+	};
+
+	GuideLine.prototype.setPosition = function setPosition(value) {
+		this.value = value;
+		this.tooltip.textContent = value;
+		this.updateGuidelinePos();
+		Tool.setBorderSlice(this.pos, value);
+	};
+
+	GuideLine.prototype.setMax = function setMax(max) {
+		this.max = max;
+		this.updateLimit();
+	};
+
+	GuideLine.prototype.updateLimit = function updateLimit() {
+		if (this.unit === 1)
+			InputSliderManager.setMax(this.topic, 100);
+		else
+			InputSliderManager.setMax(this.topic, this.max);
+	};
+
+	GuideLine.prototype.setUnit = function setUnit(type) {
+		if (type === '%')	this.unit = 1;
+		if (type === '')	this.unit = 0;
+		this.updateLimit();
+	};
+
+	/*
+	 * Unit panel
+	 */
+	var UnitPanel = (function UnitPanel () {
+
+		var panel;
+		var title;
+		var precision;
+		var step;
+		var unit_topic = null; // settings are made for this topic
+		var step_option = [1, 0.1, 0.01];
+
+		var updatePrecision = function updatePrecision(value) {
+			InputSliderManager.setPrecision('unit-step', value);
+			InputSliderManager.setStep('unit-step', step_option[value]);
+			InputSliderManager.setMin('unit-step', step_option[value]);
+
+			if (unit_topic)
+				InputSliderManager.setPrecision(unit_topic, value);
+		};
+
+		var updateUnitSettings = function updateUnitSettings(value) {
+			if (unit_topic)
+				InputSliderManager.setStep(unit_topic, value);
+		};
+
+		var show = function show(e) {
+			var topic = e.target.getAttribute('data-topic');
+			var precision = InputSliderManager.getPrecision(topic);
+			var step = InputSliderManager.getStep(topic);
+
+			unit_topic = topic;
+			title.textContent = topic;
+
+			panel.setAttribute('data-active', 'true');
+			panel.style.top = e.target.offsetTop - 40 + 'px';
+			panel.style.left = e.target.offsetLeft + 30 + 'px';
+
+			InputSliderManager.setValue('unit-precision', precision);
+			InputSliderManager.setValue('unit-step', step);
+		};
+
+		var init = function init() {
+			panel = document.createElement('div');
+			title = document.createElement('div');
+			var close = document.createElement('div');
+
+			step = InputSliderManager.createSlider('unit-step', 'step');
+			precision = InputSliderManager.createSlider('unit-precision', 'precision');
+
+			InputSliderManager.setStep('unit-precision', 1);
+			InputSliderManager.setMax('unit-precision', 2);
+			InputSliderManager.setValue('unit-precision', 2);
+			InputSliderManager.setSensivity('unit-precision', 20);
+
+			InputSliderManager.setValue('unit-step', 1);
+			InputSliderManager.setStep('unit-step', 0.01);
+			InputSliderManager.setPrecision('unit-step', 2);
+
+			InputSliderManager.subscribe('unit-precision', updatePrecision);
+			InputSliderManager.subscribe('unit-step', updateUnitSettings);
+
+			close.addEventListener('click', function () {
+				panel.setAttribute('data-active', 'false');
+			});
+
+			title.textContent = 'Properties';
+			title.className = 'title';
+			close.className = 'close';
+			panel.id = 'unit-settings';
+			panel.setAttribute('data-active', 'false');
+			panel.appendChild(title);
+			panel.appendChild(precision);
+			panel.appendChild(step);
+			panel.appendChild(close);
+			document.body.appendChild(panel);
+		};
+
+		return {
+			init : init,
+			show : show
+		};
+
+	})();
+
+	/**
+	 * Tool Manager
+	 */
+	var Tool = (function Tool() {
+		var preview_area;
+		var dropdown_unit_options = [
+			{ '' : '--', '%' : '%'},
+			{ 'px' : 'px', '%' : '%', 'em' : 'em'},
+			{ 'px' : 'px', 'em' : 'em'},
+		];
+
+		var border_slice = [];
+		var border_width = [];
+		var border_outset = [];
+
+		var border_slice_values = [];
+		var border_width_values = [];
+		var border_outset_values = [];
+
+		var border_slice_units = ['', '', '', ''];
+		var border_width_units = ['px', 'px', 'px', 'px'];
+		var border_outset_units = ['px', 'px', 'px', 'px'];
+
+		var border_fill = false;
+		var border_repeat = ['round', 'round'];
+		var CSS_code = {
+			'source' : null,
+			'slice' : null,
+			'width' : null,
+			'outset' : null,
+			'repeat' : null
+		};
+
+		var setBorderSlice = function setBorderSlice(positionID, value) {
+			border_slice[positionID] = value + border_slice_units[positionID];
+			updateBorderSlice();
+		};
+
+		var updateBorderSlice = function updateBorderSlice() {
+			var value = border_slice.join(' ');
+			if (border_fill === true)
+				value += ' fill';
+
+			preview.style.borderImageSlice = value;
+			setOutputCSS('slice', value);
+		};
+
+		var setBorderFill = function setBorderFill(value) {
+			border_fill = value;
+			var bimgslice = border_slice.join(' ');;
+			if (value === true)
+				bimgslice += ' fill';
+
+			preview.style.borderImageSlice = bimgslice;
+		};
+
+		var updateBorderWidth = function updateBorderWidth() {
+			var value = border_width.join(' ');
+			preview.style.borderImageWidth = value;
+			setOutputCSS('width', value);
+		};
+
+		var updateBorderOutset = function updateBorderOutset() {
+			var value = border_outset.join(' ');
+			preview.style.borderImageOutset = border_outset.join(' ');
+			setOutputCSS('outset', value);
+		};
+
+		var setBorderRepeat = function setBorderRepeat(obj) {
+			border_repeat[obj.value] = obj.name;
+			var value = border_repeat.join(' ');
+			preview.style.borderImageRepeat = value;
+			setOutputCSS('repeat', value);
+		};
+
+		var setOutputCSS = function setOutputCSS(topic, value) {
+			CSS_code[topic].textContent = value + ';';
+		};
+
+		var setPreviewFontSize = function setPreviewFontSize(value) {
+			preview.style.fontSize = value + 'px';
+		};
+
+		var setPreviewWidth = function setPreviewWidth(value) {
+			preview.style.width = value + 'px';
+		};
+
+		var setPreviewHeight = function setPreviewHeight(value) {
+			preview.style.height = value + 'px';
+		};
+
+		var setPreviewAreaHeight = function setPreviewAreaHeight(value) {
+			preview_area.style.height = value + 'px';
+		};
+
+		var updateDragOption = function updateDragOption(value) {
+			if (value === true)
+				subject.setAttribute('data-draggable', 'true');
+			else
+				subject.removeAttribute('data-draggable');
+		};
+
+		var createProperty = function createProperty(topic, labelID, optionsID) {
+
+			var slider = InputSliderManager.createSlider(topic, positions[labelID]);
+			var dropdown = DropDownManager.createDropDown(topic, dropdown_unit_options[optionsID]);
+
+			InputSliderManager.setSensivity(topic, 3);
+			InputSliderManager.setPrecision(topic, 1);
+
+			var property = document.createElement('div');
+			var config = document.createElement('div');
+
+			property.className = 'property';
+			config.className = 'config';
+			config.setAttribute('data-topic', topic);
+			config.addEventListener('click', UnitPanel.show);
+
+			property.appendChild(slider);
+			property.appendChild(dropdown);
+			property.appendChild(config);
+
+			return property;
+		};
+
+		var initBorderSliceControls = function initBorderSliceControls() {
+			var container = getElemById('border-slice-control');
+
+			var listenForChanges = function listenForChanges(topic, id) {
+				InputSliderManager.subscribe(topic, function(value) {
+					border_slice_values[id] = value;
+					border_slice[id] = value + border_slice_units[id];
+					updateBorderSlice();
+				});
+
+				DropDownManager.subscribe(topic, function(obj) {
+					guidelines[topic].setUnit(obj.value);
+					border_slice_units[id] = obj.value;
+					border_slice[id] = border_slice_values[id] + obj.value;
+					updateBorderSlice();
+				});
+			};
+
+			for (var i = 0; i &lt; positions.length; i++) {
+				var topic = 'slice-' + positions[i];
+				var property = createProperty(topic, i, 0);
+				listenForChanges(topic, i);
+
+				container.appendChild(property);
+			}
+
+			container.appendChild(container.children[1]);
+
+		};
+
+		var initBorderWidthControls = function initBorderWidthControls() {
+			var container = getElemById('border-width-control');
+
+			var listenForChanges = function listenForChanges(topic, id) {
+				InputSliderManager.subscribe(topic, function(value) {
+					border_width_values[id] = value;
+					border_width[id] = value + border_width_units[id];
+					updateBorderWidth();
+				});
+
+				DropDownManager.subscribe(topic, function(obj) {
+					if (obj.value === '%')
+						InputSliderManager.setMax(topic, 100);
+					else
+						InputSliderManager.setMax(topic, 1000);
+
+					border_width_units[id] = obj.value;
+					border_width[id] = border_width_values[id] + obj.value;
+					updateBorderWidth();
+				});
+			};
+
+			for (var i = 0; i &lt; positions.length; i++) {
+				var topic = 'width-' + positions[i];
+				var property = createProperty(topic, i, 1);
+				InputSliderManager.setMax(topic, 1000);
+				listenForChanges(topic, i);
+
+				container.appendChild(property);
+			}
+		};
+
+		var initBorderOutsetControls = function initBorderOutsetControls() {
+
+			var container = getElemById('border-outset-control');
+
+			var listenForChanges = function listenForChanges(topic, id) {
+				InputSliderManager.subscribe(topic, function(value) {
+					border_outset_values[id] = value;
+					border_outset[id] = value + border_outset_units[id];
+					updateBorderOutset();
+				});
+
+				DropDownManager.subscribe(topic, function(obj) {
+					border_outset_units[id] = obj.value;
+					border_outset[id] = border_outset_values[id] + obj.value;
+					updateBorderOutset();
+				});
+			};
+
+			for (var i = 0; i &lt; positions.length; i++) {
+				var topic = 'outset-' + positions[i];
+				var property = createProperty(topic, i, 2);
+				InputSliderManager.setMax(topic, 1000);
+				listenForChanges(topic, i);
+
+				container.appendChild(property);
+			}
+		};
+
+		var init = function init() {
+
+			var gallery =
+			subject = getElemById('subject');
+			preview = getElemById("preview");
+			preview_area = getElemById("preview_section");
+
+
+			CSS_code['source'] = getElemById("out-border-source");
+			CSS_code['slice'] = getElemById("out-border-slice");
+			CSS_code['width'] = getElemById("out-border-width");
+			CSS_code['outset'] = getElemById("out-border-outset");
+			CSS_code['repeat'] = getElemById("out-border-repeat");
+
+			initBorderSliceControls();
+			initBorderWidthControls();
+			initBorderOutsetControls();
+
+			var elem = document.querySelectorAll('.guideline');
+			var size = elem.length;
+			for (var i = 0; i &lt; size; i++)
+				new GuideLine(elem[i]);
+
+			PreviewControl.init();
+
+			ButtonManager.subscribe('slice-fill',setBorderFill);
+			ButtonManager.subscribe('drag-subject', updateDragOption);
+			ButtonManager.setValue('drag-subject', false);
+
+			DropDownManager.subscribe('image-repeat-X', setBorderRepeat);
+			DropDownManager.subscribe('image-repeat-Y', setBorderRepeat);
+
+			InputSliderManager.subscribe('preview-area-height', setPreviewAreaHeight);
+			InputSliderManager.subscribe('preview-width', setPreviewWidth);
+			InputSliderManager.subscribe('preview-height', setPreviewHeight);
+			InputSliderManager.subscribe('font-size', setPreviewFontSize);
+			InputSliderManager.setValue('preview-width', 300);
+			InputSliderManager.setValue('preview-height', 200);
+		};
+
+		return {
+			init: init,
+			setOutputCSS: setOutputCSS,
+			setBorderSlice: setBorderSlice
+		};
+
+	})();
+
+	/**
+	 * Init Tool
+	 */
+	var init = function init() {
+		InputSliderManager.init();
+		DropDownManager.init();
+		ButtonManager.init();
+		UnitPanel.init();
+		Tool.init();
+		ImageControl.init();
+	};
+
+	return {
+		init : init
+	};
+
+})();
+
+</pre>
+</div>
+<p>{{ EmbedLiveSample('Border_Image_Generator', '100%', '1270px') }}</p>
+
+<p> </p>
diff --git a/files/es/web/css/css_backgrounds_and_borders/border-radius_generator/index.html b/files/es/web/css/css_backgrounds_and_borders/border-radius_generator/index.html
new file mode 100644
index 0000000000..bd0dc7e058
--- /dev/null
+++ b/files/es/web/css/css_backgrounds_and_borders/border-radius_generator/index.html
@@ -0,0 +1,1602 @@
+---
+title: Generador de border-radius
+slug: Web/CSS/CSS_Backgrounds_and_Borders/Border-radius_generator
+tags:
+  - Herramientas
+translation_of: Web/CSS/CSS_Background_and_Borders/Border-radius_generator
+original_slug: Web/CSS/CSS_Background_and_Borders/Border-radius_generator
+---
+<p>Esta herramienta puede ser usada para generar efectos de {{cssxref("border-radius")}} de CSS3.</p>
+
+<div class="hidden">
+<h2 id="border-radius-generator" name="border-radius-generator">border-radius</h2>
+
+<h3 id="HTML_Content">HTML Content</h3>
+
+<pre class="brush: html">&lt;div id="container"&gt;
+    &lt;div class="group section"&gt;
+        &lt;div id="preview" class="col span_12"&gt;
+            &lt;div id="subject"&gt;
+                &lt;div id="top-left" class="radius-container"
+                    data-X="left" data-Y="top"&gt;
+                &lt;/div&gt;
+                &lt;div id="top-right" class="radius-container"
+                    data-X="right" data-Y="top"&gt;
+                &lt;/div&gt;
+                &lt;div id="bottom-right" class="radius-container"
+                    data-X="right" data-Y="bottom"&gt;
+                &lt;/div&gt;
+                &lt;div id="bottom-left" class="radius-container"
+                    data-X="left" data-Y="bottom"&gt;
+                &lt;/div&gt;
+
+                &lt;div id="radius-ui-sliders"&gt;
+                    &lt;div id="tlr" class="ui-input-slider" data-topic="top-left"
+                         data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
+
+                    &lt;div id="tlw" class="ui-input-slider" data-topic="top-left-w"
+                         data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
+
+                    &lt;div id="tlh" class="ui-input-slider" data-topic="top-left-h"
+                        data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
+
+                    &lt;div id="trr" class="ui-input-slider" data-topic="top-right"
+                         data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
+
+                    &lt;div id="trw" class="ui-input-slider" data-topic="top-right-w"
+                         data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
+
+                    &lt;div id="trh" class="ui-input-slider" data-topic="top-right-h"
+                        data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
+
+                    &lt;div id="brr" class="ui-input-slider" data-topic="bottom-right"
+                         data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
+
+                    &lt;div id="brw" class="ui-input-slider" data-topic="bottom-right-w"
+                         data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
+
+                    &lt;div id="brh" class="ui-input-slider" data-topic="bottom-right-h"
+                        data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
+
+                    &lt;div id="blr" class="ui-input-slider" data-topic="bottom-left"
+                         data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
+
+                    &lt;div id="blw" class="ui-input-slider" data-topic="bottom-left-w"
+                         data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
+
+                    &lt;div id="blh" class="ui-input-slider" data-topic="bottom-left-h"
+                        data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
+                &lt;/div&gt;
+            &lt;/div&gt;
+        &lt;/div&gt;
+    &lt;/div&gt;
+    &lt;div id="controls" class="group section"&gt;
+
+        &lt;div class="group section"&gt;
+            &lt;div id="dimensions"&gt;
+                &lt;div class="ui-input-slider" data-topic="width" data-info="width"
+                     data-unit=" px" data-min="150" data-max="700" data-sensivity="1"&gt;&lt;/div&gt;
+
+                &lt;div class="ui-input-slider" data-topic="height" data-info="height"
+                    data-unit=" px" data-min="75" data-max="350" data-sensivity="1"&gt;&lt;/div&gt;
+            &lt;/div&gt;
+
+            &lt;div id="output"&gt;&lt;/div&gt;
+        &lt;/div&gt;
+
+        &lt;div class="group section"&gt;
+            &lt;div id="radius-lock"&gt;
+                &lt;div class="info"&gt; rounded corner &lt;/div&gt;
+                &lt;div class="ui-checkbox" data-topic='top-left'&gt;&lt;/div&gt;
+                &lt;div class="ui-checkbox" data-topic='top-right'&gt;&lt;/div&gt;
+                &lt;div class="ui-checkbox" data-topic='bottom-right'&gt;&lt;/div&gt;
+                &lt;div class="ui-checkbox" data-topic='bottom-left'&gt;&lt;/div&gt;
+            &lt;/div&gt;
+
+            &lt;div id="unit-selection"&gt;
+                &lt;div class="info"&gt; select border units &lt;/div&gt;
+            &lt;/div&gt;
+        &lt;/div&gt;
+
+    &lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="CSS_Content">CSS Content</h3>
+
+<pre class="brush: css">/*  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 &gt; 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 &gt; input {
+ 	display: none;
+}
+
+.ui-checkbox &gt; 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 &gt; label:hover {
+	cursor: pointer;
+}
+
+.ui-checkbox &gt; 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 &gt; 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;
+}
+
+
+</pre>
+
+<h3 id="JavaScript_Content">JavaScript Content</h3>
+
+<pre class="brush: js"><code class="language-js">'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 &gt; 0 ? max : 100;
+		this.step = step === 0 ? 1 : step;
+		this.topic = topic;
+		this.node = node;
+		this.unit = unit;
+		this.sensivity = sensivity &gt; 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 &gt; slider.max) value = slider.max;
+		if (value &lt; slider.min)	value = slider.min;
+
+		slider.value = value;
+		slider.node.setAttribute('data-value', value);
+
+		if (send_notify !== undefined &amp;&amp; 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 &lt; 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 &lt; 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 &lt; 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' &amp;&amp; y == 'top') handle.className = 'handle handle-top-left'
+		if (x === 'right' &amp;&amp; y == 'top') handle.className = 'handle handle-top-right';
+		if (x === 'right' &amp;&amp; y == 'bottom') handle.className = 'handle handle-bottom-right';
+		if (x === 'left' &amp;&amp; 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 &amp;&amp; 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 &lt; 0)	this.size = 0;
+			if (this.size &gt; this.maxR)	this.size = this.maxR;
+			this.updateRadius();
+			this.updateBorderRadius();
+			return;
+		}
+
+		if (deltaX) {
+			this.width += this.resizeX * deltaX;
+			if (this.width &lt; 0)	this.width = 0;
+			if (this.width &gt; this.maxW)	this.width = this.maxW;
+			this.updateWidth();
+		}
+
+		if (deltaY) {
+			this.height += this.resizeY * deltaY;
+			if (this.height &lt; 0) this.height = 0;
+			if (this.height &gt; 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 &lt; 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 &lt; 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 &lt; 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
+	}
+
+})();
+
+
+</code></pre>
+</div>
+
+<p>{{ EmbedLiveSample('border-radius-generator', '100%', '800px', '') }}</p>
+
+<p> </p>
diff --git a/files/es/web/css/css_flow_layout/index.html b/files/es/web/css/css_flow_layout/index.html
index 45daafc7a4..7a9d5a763d 100644
--- a/files/es/web/css/css_flow_layout/index.html
+++ b/files/es/web/css/css_flow_layout/index.html
@@ -35,7 +35,7 @@ translation_of: Web/CSS/CSS_Flow_Layout
  <li>{{Glossary("Block/CSS", "Block (CSS)")}}</li>
 </ul>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li>
  <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li>
diff --git a/files/es/web/css/css_grid_layout/auto-placement_in_css_grid_layout/index.html b/files/es/web/css/css_grid_layout/auto-placement_in_css_grid_layout/index.html
index 3b0aac0c26..9b22e46e0d 100644
--- a/files/es/web/css/css_grid_layout/auto-placement_in_css_grid_layout/index.html
+++ b/files/es/web/css/css_grid_layout/auto-placement_in_css_grid_layout/index.html
@@ -554,7 +554,7 @@ dd {
 
 <p><span class="notranslate">Puede ser que se te ocurran tus propios casos de uso para la colocación automática o cualquier otra parte del diseño de la cuadrícula.</span> <span class="notranslate"> Si lo hace, créelos como problemas o agréguelos a un problema existente que podría resolver su caso de uso.</span> <span class="notranslate"> Esto ayudará a mejorar las futuras versiones de la especificación.</span></p>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li>
  <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li>
diff --git a/files/es/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html b/files/es/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html
index 26cff270b6..87214ed390 100644
--- a/files/es/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html
+++ b/files/es/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html
@@ -663,7 +663,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Conceptos_Básicos_del_Posicionamiento_co
 
 <p>En este artículo hemos tenido una mirada muy rápida a través de la Especificación de Grid Layout. Juegue un poco con los ejemplos de código, y luego pase a <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">la siguiente parte de esta guía donde realmente nos vamos a adentrar en detalle dentro de CSS Grid Layout</a>.</p>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li><a href="/es/docs/Web/CSS"><strong>CSS</strong></a></li>
  <li><a href="/es/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li>
diff --git a/files/es/web/css/css_grid_layout/box_alignment_in_css_grid_layout/index.html b/files/es/web/css/css_grid_layout/box_alignment_in_css_grid_layout/index.html
index 445cbac308..9880ecd33d 100644
--- a/files/es/web/css/css_grid_layout/box_alignment_in_css_grid_layout/index.html
+++ b/files/es/web/css/css_grid_layout/box_alignment_in_css_grid_layout/index.html
@@ -644,7 +644,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout
 
 <p>Setting auto margins, using <code>margin-right</code> or <code>margin-left</code> however, or absolutely positioning items using the <code>top</code>, <code>right</code>, <code>bottom</code> and <code>left</code> offsets would not honor writing modes. In the next guide, we will look further into this interaction between CSS grid layout, box alignment and writing modes. This will be important to understand, if you develop sites that are then displayed in multiple languages, or if you want to mix languages or writing modes in a design.</p>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li>
  <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li>
diff --git a/files/es/web/css/css_grid_layout/index.html b/files/es/web/css/css_grid_layout/index.html
index d26c21f5fa..042d1f04fb 100644
--- a/files/es/web/css/css_grid_layout/index.html
+++ b/files/es/web/css/css_grid_layout/index.html
@@ -190,7 +190,7 @@ translation_of: Web/CSS/CSS_Grid_Layout
  </tbody>
 </table>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <section class="Quick_links" id="Enlaces_Rapidos">
 <ol>
  <li><a href="/es/docs/Web/CSS"><strong>CSS</strong></a></li>
diff --git a/files/es/web/css/css_grid_layout/realizing_common_layouts_using_css_grid_layout/index.html b/files/es/web/css/css_grid_layout/realizing_common_layouts_using_css_grid_layout/index.html
index d477402114..352c321708 100644
--- a/files/es/web/css/css_grid_layout/realizing_common_layouts_using_css_grid_layout/index.html
+++ b/files/es/web/css/css_grid_layout/realizing_common_layouts_using_css_grid_layout/index.html
@@ -538,7 +538,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_
  <li>ara obtener patrones de diseño comunes adicionales, consulta <em><a href="http://gridbyexample.com">Grid by Example</a></em>, donde hay muchos ejemplos&gt; de diseño de cuadrícula y también algunos patrones de interfaz de usuario más grandes y diseños de página completa.</li>
 </ul>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li><a href="/es/docs/Web/CSS"><strong>CSS</strong></a></li>
  <li><a href="/es/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li>
diff --git a/files/es/web/css/css_grid_layout/relationship_of_grid_layout/index.html b/files/es/web/css/css_grid_layout/relationship_of_grid_layout/index.html
index f747b94b5d..df0c949072 100644
--- a/files/es/web/css/css_grid_layout/relationship_of_grid_layout/index.html
+++ b/files/es/web/css/css_grid_layout/relationship_of_grid_layout/index.html
@@ -584,7 +584,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Relacion_de_Grid_Layout
 
 <p>Como puedes ver en esta guía, CSS Grid Layout es sólo una parte de tu kit de herramientas. No tengas miedo de mezclarlo con otros métodos de maquetación, para conseguir los diferentes efectos que necesitas.</p>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li><a href="/es/docs/Web/CSS"><strong>CSS</strong></a></li>
  <li><a href="/es/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li>
diff --git a/files/es/web/css/gap/index.html b/files/es/web/css/gap/index.html
index 090d6e9957..70da3da759 100644
--- a/files/es/web/css/gap/index.html
+++ b/files/es/web/css/gap/index.html
@@ -196,7 +196,7 @@ grid-gap: unset;
  <li>Grid Layout Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout#Gutters">Basic concepts of grid layout - Gutters</a></em></li>
 </ul>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li>
  <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li>
diff --git a/files/es/web/css/grid-auto-columns/index.html b/files/es/web/css/grid-auto-columns/index.html
index 6e5aea4e5a..ad18820261 100644
--- a/files/es/web/css/grid-auto-columns/index.html
+++ b/files/es/web/css/grid-auto-columns/index.html
@@ -154,7 +154,7 @@ grid-auto-columns: unset;
  <li>Video tutorial (inglés): <em><a href="http://gridbyexample.com/video/series-auto-placement-order/">Introducing Grid auto-placement and order</a></em></li>
 </ul>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li>
  <li><strong><a href="/en-US/docs/Web/CSS/Reference">R</a>eferencia a  CSS</strong></li>
diff --git a/files/es/web/css/grid-auto-rows/index.html b/files/es/web/css/grid-auto-rows/index.html
index cdcf192391..d59decd2b8 100644
--- a/files/es/web/css/grid-auto-rows/index.html
+++ b/files/es/web/css/grid-auto-rows/index.html
@@ -147,7 +147,7 @@ grid-auto-rows: unset;
  <li>Video tutorial: <em><a href="http://gridbyexample.com/video/series-auto-placement-order/">Introducing Grid auto-placement and order</a></em></li>
 </ul>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li>
  <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li>
diff --git a/files/es/web/css/grid-template-areas/index.html b/files/es/web/css/grid-template-areas/index.html
index 215ca0b81f..7a5798c4b5 100644
--- a/files/es/web/css/grid-template-areas/index.html
+++ b/files/es/web/css/grid-template-areas/index.html
@@ -176,7 +176,7 @@ grid-template-areas: unset;
  <li>Video tutorial: <em><a href="http://gridbyexample.com/video/grid-template-areas/">Grid Template Areas</a></em></li>
 </ul>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li>
  <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li>
diff --git a/files/es/web/css/grid-template-columns/index.html b/files/es/web/css/grid-template-columns/index.html
index 63c5bba16d..aba02c3d40 100644
--- a/files/es/web/css/grid-template-columns/index.html
+++ b/files/es/web/css/grid-template-columns/index.html
@@ -131,7 +131,7 @@ grid-template-columns: unset;
  <li>Video tutorial: <em><a href="http://gridbyexample.com/video/series-define-a-grid/">Defining a Grid</a></em></li>
 </ul>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li>
  <li><a href="/en-US/docs/Web/CSS/Reference"><strong>Referencia CSS</strong></a></li>
diff --git a/files/es/web/css/grid-template-rows/index.html b/files/es/web/css/grid-template-rows/index.html
index c3f072c7b3..3db676f169 100644
--- a/files/es/web/css/grid-template-rows/index.html
+++ b/files/es/web/css/grid-template-rows/index.html
@@ -158,7 +158,7 @@ grid-template-rows: unset;
  <li>Video tutorial: <em><a href="http://gridbyexample.com/video/series-define-a-grid/">Defining a Grid</a></em></li>
 </ul>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li>
  <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li>
diff --git a/files/es/web/css/grid/index.html b/files/es/web/css/grid/index.html
index 11c689058f..1657f4d988 100644
--- a/files/es/web/css/grid/index.html
+++ b/files/es/web/css/grid/index.html
@@ -180,7 +180,7 @@ grid: unset;
  <li>Grid Layout Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas#Grid_definition_shorthands">Grid template areas - Grid definition shorthands</a></em></li>
 </ul>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li>
  <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li>
diff --git a/files/es/web/css/minmax()/index.html b/files/es/web/css/minmax()/index.html
index aee4d66659..4b91d4aee7 100644
--- a/files/es/web/css/minmax()/index.html
+++ b/files/es/web/css/minmax()/index.html
@@ -154,7 +154,7 @@ minmax(auto, 300px)
  </li>
 </ul>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li>
  <li><a href="/en-US/docs/Web/CSS/Reference"><strong>Referencia CSS</strong></a></li>
diff --git a/files/es/web/css/tools/index.html b/files/es/web/css/tools/index.html
deleted file mode 100644
index 3ea9e20a3f..0000000000
--- a/files/es/web/css/tools/index.html
+++ /dev/null
@@ -1,29 +0,0 @@
----
-title: Herramientas
-slug: Web/CSS/Tools
-tags:
-  - CSS
-translation_of: Web/CSS/Tools
-original_slug: Web/CSS/Herramientas
----
-<div> </div>
-
-<p><span id="result_box" lang="es"><span>CSS</span> <span>ofrece una serie de</span> <span>características poderosas</span> <span>que puede ser</span> <span>difíciles de usar</span><span>,</span> <span>o tener un gran</span> <span>número de</span> <span>parámetros, por lo</span> <span>que es</span> <span>muy útil</span> <span>visualizarlos</span> <span>mientras se trabaja en</span> <span>ellos.</span> <span>Esta página</span> <span>ofrece</span> <span>enlaces a</span> <span>una serie de herramientas</span> <span>que</span> <span>le ayudarán a construir sus estilos usando estas caracteristicas</span><span>.</span></span></p>
-
-<p>{{LandingPageListSubpages}}</p>
-
-<h2 id="Otras_herramientas">Otras herramientas</h2>
-
-<ul>
- <li>
-  <h4 id="Animación_CSS_-_Stylie">Animación CSS - <a href="http://jeremyckahn.github.io/stylie/">Stylie</a></h4>
- </li>
- <li><span id="result_box" lang="es"><span>Para</span> <span>comprobar la información de</span> <span>la pantalla del dispositivo</span></span> (helpful in {{Glossary("responsive web design")}}) - <a href="http://mydevice.io">mydevice.io</a></li>
- <li>Menus CSS- <a href="http://cssmenumaker.com/">cssmenumaker.com</a></li>
-</ul>
-
-<h2 id="Temas_relacionados">Temas relacionados</h2>
-
-<ul>
- <li><a href="/es/docs/Web/CSS" title="/en-US/docs/Web/CSS">CSS</a></li>
-</ul>
diff --git a/files/es/web/demos/index.html b/files/es/web/demos/index.html
new file mode 100644
index 0000000000..a7cf5325ce
--- /dev/null
+++ b/files/es/web/demos/index.html
@@ -0,0 +1,162 @@
+---
+title: Demostraciones de tecnologías de Web Abierta
+slug: Web/Demos
+tags:
+  - 2D
+  - 3D
+  - CSS
+  - Canvas
+  - Design
+  - HTML
+  - SVG
+  - Video
+  - transform
+translation_of: Web/Demos_of_open_web_technologies
+original_slug: Web/Demos_of_open_web_technologies
+---
+<p>Mozilla soporta una amplia variedad de emocionantes tecnologías web abiertas, y alentamos su utilización.  Esta página ofrece enlaces a interesantes demostraciones de estas tecnologías, incluyendo algunas que fueron populares en la Demo Studio, la cual <a href="https://blog.mozilla.org/community/2015/12/18/saying-goodbye-to-demo-studio/">ha sido retirada desde entonces</a>. Si conoces una buena demostración o aplicación de tecnología web abierta, por favor agrega el enlace a la sección apropiada aquí.</p>
+
+<h2 id="Gráficos_2D">Gráficos 2D</h2>
+
+<h3 id="APNG" name="APNG">APNG</h3>
+
+<ul>
+ <li><a class="external" href="http://people.mozilla.com/~dolske/apng/demo.html">Justin's demo</a> (funciona cuando está guardado localmente)</li>
+</ul>
+
+<h3 id="SVG" name="SVG">Canvas</h3>
+
+<ul>
+ <li><a class="external" href="http://www.blobsallad.se/">An interactive blob using javascript and canvas (divertido)</a></li>
+ <li><a class="external" href="http://blobsallad.se/article/">Blob's demos</a></li>
+ <li><a class="external" href="http://glimr.rubyforge.org/cake/canvas.html">Canvas Animation Kit Experiment (CAKE)</a></li>
+ <li><a class="external" href="http://www.xs4all.nl/~peterned/3d/">Canvas3D &amp; Flickr</a></li>
+ <li><a class="external" href="http://arapehlivanian.com/wp-content/uploads/2007/02/canvas.html">Playing with Canvas</a></li>
+ <li><a class="external" href="http://langexplr.blogspot.com/2008/11/using-canvas-html-element.html">Using the Canvas Html element5</a></li>
+ <li><a class="external" href="/samples/raycaster/RayCaster.html" title="https://developer.mozilla.org/editor/fckeditor/core/editor/samples/raycaster/RayCaster.html">RayCaster</a></li>
+ <li><a class="external" href="http://jsmsxdemo.googlepages.com/jsmsx.html">MSX Emulator</a></li>
+ <li><a class="external" href="http://processingjs.org/exhibition/">processing.js</a></li>
+ <li><a class="external" href="http://glimr.rubyforge.org/cake/missile_fleet.html">Missile fleet</a></li>
+ <li><a class="external" href="http://glimr.rubyforge.org/cake/demos/fireworks2.6rt.html">FireWorks</a></li>
+ <li><a class="external" href="http://glimr.rubyforge.org/cake/demos/canvas_ash.html">Canvas ash1</a></li>
+ <li><a class="external" href="http://glimr.rubyforge.org/cake/demos/canvas_ash2.html">Canvas ash2</a></li>
+ <li><a class="external" href="http://glimr.rubyforge.org/cake/demos/canvas_ash8.html">Canvas ash8</a></li>
+ <li><a class="external" href="http://gyu.que.jp/jscloth/">3D on 2D Canvas</a></li>
+ <li><a href="http://viliusle.github.io/miniPaint/">miniPaint - Image editor </a>(<a href="https://github.com/viliusle/miniPaint">código fuente</a>)</li>
+</ul>
+
+<h3 id="SVG" name="SVG">SVG</h3>
+
+<ul>
+ <li><a class="external" href="http://www.kde-look.org/CONTENT/content-files/19524-gearflowers.svg.gz">Gearflowers image</a> No olvides hacer un zoom (funciona cuando está guardado localmente)</li>
+ <li><a class="external" href="http://people.mozilla.com/~vladimir/demos/photos.svg">SVG photo demo</a> (efectos visuales e interacción)</li>
+ <li><a class="external" href="http://starkravingfinkle.org/projects/demo/svg-bubblemenu-in-html.xml">Bubblemenu</a> (efectos visuales e interacción)</li>
+ <li><a class="external" href="http://starkravingfinkle.org/blog/2007/07/firefox-3-svg-foreignobject/">HTML transformations</a> usando <code>foreignObject</code> (efectos visuales y transformaciones)</li>
+ <li><a class="external" href="http://svg-whiz.com/svg/linguistics/theCreepyMouth.svg">Phonetics Guide</a> (interactivo)</li>
+ <li><a class="external" href="http://www.lutanho.net/svgvml3d/platonic.html">3D objects demo</a> (interactivo)</li>
+ <li><a class="external" href="http://www.themaninblue.com/experiment/Blobular/">Blobular</a> (interactivo)</li>
+ <li><a class="external" href="http://www.double.co.nz/video_test/video.svg">Video embedded in SVG</a> (o usa la <a class="external" href="http://www.double.co.nz/video_test/video_svg.tar.bz2">descarga local</a>)</li>
+ <li><a href="http://summerstyle.github.io/summer/">Summer HTML image map creator</a> (<a href="https://github.com/summerstyle/summer">código fuente</a>)</li>
+</ul>
+
+<h3 id="Video" name="Video">Video</h3>
+
+<ul>
+ <li><a href="https://vimeo.com/172328210">Video 3D Animation "mozilla constantly evolving" Designed by Rober Villar ,SoftwareRVG developer.</a></li>
+ <li><a href="https://vimeo.com/173851395">Video 3D animation "Floating Dance" . Designed by Rober Villar , developer from SoftwareRVGdesignS.</a></li>
+ <li><a class="external" href="http://www.double.co.nz/video_test/test1.html">Streaming Anime, Movie Trailer and Interview</a></li>
+ <li><a class="external" href="http://www.double.co.nz/video_test/test2.html">Billy's Browser Firefox Flick</a></li>
+ <li><a class="external" href="http://www.double.co.nz/video_test/test3.html">Virtual Barber Shop</a></li>
+ <li><a class="external" href="http://www.double.co.nz/video_test/test4.html">Transformers Movie Trailer</a></li>
+ <li><a class="external" href="http://www.double.co.nz/video_test/test5.html">A Scanner Darkly Movie Trailer</a> (con controles incorporados)</li>
+ <li><a class="external" href="http://www.double.co.nz/video_test/events.html">Events firing and volume control</a></li>
+ <li><a class="external" href="http://www.double.co.nz/video_test/video.svg">Dragable and sizable videos</a></li>
+</ul>
+
+<h2 id="Gráficos_3D">Gráficos 3D</h2>
+
+<h3 id="WebGL">WebGL</h3>
+
+<ul>
+ <li><a href="http://ondras.github.io/fireworks-webgl/">Web Audio Fireworks</a></li>
+ <li><a href="https://dl.dropboxusercontent.com/u/62064441/ioquake3.js/ioquake3.html">IoQuake3</a> (<a href="https://github.com/klaussilveira/ioquake3.js">código fuente</a>)</li>
+ <li><a href="http://micah.tech/demoscene/">Escher puzzle</a> (<a href="https://github.com/micahbolen/demoscene">código fuente</a>)</li>
+ <li><a href="http://collinhover.github.io/kaiopua/">Kai 'Opua</a> (<a href="https://github.com/collinhover/kaiopua">código fuente</a>)</li>
+</ul>
+
+<h3 id="Realidad_VIrtual">Realidad VIrtual</h3>
+
+<ul>
+ <li><a href="http://mozvr.com/demos/polarsea/">The Polar Sea</a> (<a href="https://github.com/MozVR/polarsea">código fuente</a>)</li>
+ <li><a href="http://mozvr.github.io/sechelt/">Sechelt fly-through</a> (<a href="https://github.com/mozvr/sechelt">código fuente</a>)</li>
+</ul>
+
+<h2 id="CSS">CSS</h2>
+
+<ul>
+ <li><a href="http://s.codepen.io/SoftwareRVG/debug/OXkOWj">CSS floating logo " mozilla  "  developed by Rober Villar , from Software RVG. </a>(modo depurado)</li>
+ <li><a href="http://codepen.io/SoftwareRVG/pen/OXkOWj/">CSS floating logo " mozilla  "  developed by Rober Villar , from Software RVG. </a>(codigo fuente)</li>
+ <li><a href="http://webdeveloperbareilly.in/blog/html5/responsive-contact-form-bootstrap.php">Responsive Contact Form</a></li>
+ <li><a href="http://felixniklas.com/paperfold/">Paperfold</a></li>
+ <li><a href="http://ondras.github.io/blockout/">CSS Blockout</a></li>
+ <li><a href="http://ondras.zarovi.cz/demos/rubik/">Rubik's cube</a></li>
+ <li><a href="http://ondras.zarovi.cz/demos/nojs/">Pure CSS Slides</a></li>
+ <li>Planetarium (<a href="https://github.com/littleworkshop/planetarium">código fuente</a>)</li>
+ <li><a href="http://www.lesmoffat.co.uk/folio/forest/forest.html">CSS Paralax Forest</a></li>
+ <li><a href="http://webdeveloperbareilly.in/blog/css3/awesome-login-form.html">Awesome Login Page</a></li>
+ <li><a href="http://webdeveloperbareilly.in/blog/css3/onepage-scroll-template.html">CSS3 One Page Scroll</a></li>
+</ul>
+
+<h3 id="Transformaciones">Transformaciones</h3>
+
+<ul>
+ <li><a href="http://impress.github.io/impress.js">Impress.js</a> (<a href="https://github.com/impress/impress.js">código fuente</a>)</li>
+</ul>
+
+<h2 id="Juegos">Juegos</h2>
+
+<ul>
+ <li><a href="https://dl.dropboxusercontent.com/u/62064441/ioquake3.js/ioquake3.html">IoQuake3</a> (<a href="https://github.com/klaussilveira/ioquake3.js">código fuente</a>)</li>
+ <li><a href="http://collinhover.github.io/kaiopua/">Kai 'Opua</a> (<a href="https://github.com/collinhover/kaiopua">código fuente</a>)</li>
+</ul>
+
+<h2 id="HTML">HTML</h2>
+
+<ul>
+ <li> <a href="http://zenphoton.com">Zen Photon Garden </a>(<a href="https://github.com/scanlime/zenphoton">código fuente</a>)</li>
+ <li><a href="http://webdeveloperbareilly.in/blog/smo/html-meta-tags-for-social-media-optimization.html">HTMl Meta Tags For SMO</a></li>
+</ul>
+
+<h2 id="Web_APIs">Web APIs</h2>
+
+<ul>
+</ul>
+
+<h3 id="API_Notificaciones"> API Notificaciones</h3>
+
+<ul>
+ <li><a href="http://elfoxero.github.io/html5notifications/">HTML5 Notifications</a> (<a href="https://github.com/elfoxero/html5notifications">código fuente</a>)</li>
+</ul>
+
+<ul>
+</ul>
+
+<h3 id="API_Web_Audio">API Web Audio</h3>
+
+<ul>
+ <li><a href="http://ondras.github.io/fireworks-webgl/">Web Audio Fireworks</a></li>
+ <li><a href="http://ondras.github.io/oscope/">oscope.js - JavaScript oscilloscope</a></li>
+ <li><a href="http://mdn.github.io/audio-buffer/">Audio Buffer demo</a> (<a href="http://mdn.github.io/audio-buffer/">código fuente</a>)</li>
+ <li><a href="http://nipe-systems.de/webapps/html5-web-audio/">HTML5 Web Audio Showcase</a> (<a href="https://github.com/NIPE-SYSTEMS/html5-web-audio-showcase">código fuente</a>)</li>
+ <li><a href="http://wayou.github.io/HTML5_Audio_Visualizer/">HTML5 Audio Visualizer</a> (<a href="https://github.com/Wayou/HTML5_Audio_Visualizer">código fuente</a>)</li>
+ <li><a href="http://carlosrafaelgn.com.br/GraphicalFilterEditor/">Graphical Filter Editor and Visualizer</a> (<a href="https://github.com/carlosrafaelgn/GraphicalFilterEditor">código fuente</a>)</li>
+</ul>
+
+<h3 id="Unclassified" name="Unclassified">Funciones Web</h3>
+
+<ul>
+ <li><a href="http://ondras.github.io/fractal/">Web Worker Fractals</a></li>
+ <li><a href="http://ondras.github.io/photo/">Photo editor</a></li>
+ <li><a href="http://ondras.github.io/coral/">Coral generator</a></li>
+ <li><a class="external" href="http://nerget.com/rayjs-mt/rayjs.html">Raytracer</a></li>
+</ul>
diff --git a/files/es/web/demos_of_open_web_technologies/index.html b/files/es/web/demos_of_open_web_technologies/index.html
deleted file mode 100644
index 27e6816192..0000000000
--- a/files/es/web/demos_of_open_web_technologies/index.html
+++ /dev/null
@@ -1,161 +0,0 @@
----
-title: Demostraciones de tecnologías de Web Abierta
-slug: Web/Demos_of_open_web_technologies
-tags:
-  - 2D
-  - 3D
-  - CSS
-  - Canvas
-  - Design
-  - HTML
-  - SVG
-  - Video
-  - transform
-translation_of: Web/Demos_of_open_web_technologies
----
-<p>Mozilla soporta una amplia variedad de emocionantes tecnologías web abiertas, y alentamos su utilización.  Esta página ofrece enlaces a interesantes demostraciones de estas tecnologías, incluyendo algunas que fueron populares en la Demo Studio, la cual <a href="https://blog.mozilla.org/community/2015/12/18/saying-goodbye-to-demo-studio/">ha sido retirada desde entonces</a>. Si conoces una buena demostración o aplicación de tecnología web abierta, por favor agrega el enlace a la sección apropiada aquí.</p>
-
-<h2 id="Gráficos_2D">Gráficos 2D</h2>
-
-<h3 id="APNG" name="APNG">APNG</h3>
-
-<ul>
- <li><a class="external" href="http://people.mozilla.com/~dolske/apng/demo.html">Justin's demo</a> (funciona cuando está guardado localmente)</li>
-</ul>
-
-<h3 id="SVG" name="SVG">Canvas</h3>
-
-<ul>
- <li><a class="external" href="http://www.blobsallad.se/">An interactive blob using javascript and canvas (divertido)</a></li>
- <li><a class="external" href="http://blobsallad.se/article/">Blob's demos</a></li>
- <li><a class="external" href="http://glimr.rubyforge.org/cake/canvas.html">Canvas Animation Kit Experiment (CAKE)</a></li>
- <li><a class="external" href="http://www.xs4all.nl/~peterned/3d/">Canvas3D &amp; Flickr</a></li>
- <li><a class="external" href="http://arapehlivanian.com/wp-content/uploads/2007/02/canvas.html">Playing with Canvas</a></li>
- <li><a class="external" href="http://langexplr.blogspot.com/2008/11/using-canvas-html-element.html">Using the Canvas Html element5</a></li>
- <li><a class="external" href="/samples/raycaster/RayCaster.html" title="https://developer.mozilla.org/editor/fckeditor/core/editor/samples/raycaster/RayCaster.html">RayCaster</a></li>
- <li><a class="external" href="http://jsmsxdemo.googlepages.com/jsmsx.html">MSX Emulator</a></li>
- <li><a class="external" href="http://processingjs.org/exhibition/">processing.js</a></li>
- <li><a class="external" href="http://glimr.rubyforge.org/cake/missile_fleet.html">Missile fleet</a></li>
- <li><a class="external" href="http://glimr.rubyforge.org/cake/demos/fireworks2.6rt.html">FireWorks</a></li>
- <li><a class="external" href="http://glimr.rubyforge.org/cake/demos/canvas_ash.html">Canvas ash1</a></li>
- <li><a class="external" href="http://glimr.rubyforge.org/cake/demos/canvas_ash2.html">Canvas ash2</a></li>
- <li><a class="external" href="http://glimr.rubyforge.org/cake/demos/canvas_ash8.html">Canvas ash8</a></li>
- <li><a class="external" href="http://gyu.que.jp/jscloth/">3D on 2D Canvas</a></li>
- <li><a href="http://viliusle.github.io/miniPaint/">miniPaint - Image editor </a>(<a href="https://github.com/viliusle/miniPaint">código fuente</a>)</li>
-</ul>
-
-<h3 id="SVG" name="SVG">SVG</h3>
-
-<ul>
- <li><a class="external" href="http://www.kde-look.org/CONTENT/content-files/19524-gearflowers.svg.gz">Gearflowers image</a> No olvides hacer un zoom (funciona cuando está guardado localmente)</li>
- <li><a class="external" href="http://people.mozilla.com/~vladimir/demos/photos.svg">SVG photo demo</a> (efectos visuales e interacción)</li>
- <li><a class="external" href="http://starkravingfinkle.org/projects/demo/svg-bubblemenu-in-html.xml">Bubblemenu</a> (efectos visuales e interacción)</li>
- <li><a class="external" href="http://starkravingfinkle.org/blog/2007/07/firefox-3-svg-foreignobject/">HTML transformations</a> usando <code>foreignObject</code> (efectos visuales y transformaciones)</li>
- <li><a class="external" href="http://svg-whiz.com/svg/linguistics/theCreepyMouth.svg">Phonetics Guide</a> (interactivo)</li>
- <li><a class="external" href="http://www.lutanho.net/svgvml3d/platonic.html">3D objects demo</a> (interactivo)</li>
- <li><a class="external" href="http://www.themaninblue.com/experiment/Blobular/">Blobular</a> (interactivo)</li>
- <li><a class="external" href="http://www.double.co.nz/video_test/video.svg">Video embedded in SVG</a> (o usa la <a class="external" href="http://www.double.co.nz/video_test/video_svg.tar.bz2">descarga local</a>)</li>
- <li><a href="http://summerstyle.github.io/summer/">Summer HTML image map creator</a> (<a href="https://github.com/summerstyle/summer">código fuente</a>)</li>
-</ul>
-
-<h3 id="Video" name="Video">Video</h3>
-
-<ul>
- <li><a href="https://vimeo.com/172328210">Video 3D Animation "mozilla constantly evolving" Designed by Rober Villar ,SoftwareRVG developer.</a></li>
- <li><a href="https://vimeo.com/173851395">Video 3D animation "Floating Dance" . Designed by Rober Villar , developer from SoftwareRVGdesignS.</a></li>
- <li><a class="external" href="http://www.double.co.nz/video_test/test1.html">Streaming Anime, Movie Trailer and Interview</a></li>
- <li><a class="external" href="http://www.double.co.nz/video_test/test2.html">Billy's Browser Firefox Flick</a></li>
- <li><a class="external" href="http://www.double.co.nz/video_test/test3.html">Virtual Barber Shop</a></li>
- <li><a class="external" href="http://www.double.co.nz/video_test/test4.html">Transformers Movie Trailer</a></li>
- <li><a class="external" href="http://www.double.co.nz/video_test/test5.html">A Scanner Darkly Movie Trailer</a> (con controles incorporados)</li>
- <li><a class="external" href="http://www.double.co.nz/video_test/events.html">Events firing and volume control</a></li>
- <li><a class="external" href="http://www.double.co.nz/video_test/video.svg">Dragable and sizable videos</a></li>
-</ul>
-
-<h2 id="Gráficos_3D">Gráficos 3D</h2>
-
-<h3 id="WebGL">WebGL</h3>
-
-<ul>
- <li><a href="http://ondras.github.io/fireworks-webgl/">Web Audio Fireworks</a></li>
- <li><a href="https://dl.dropboxusercontent.com/u/62064441/ioquake3.js/ioquake3.html">IoQuake3</a> (<a href="https://github.com/klaussilveira/ioquake3.js">código fuente</a>)</li>
- <li><a href="http://micah.tech/demoscene/">Escher puzzle</a> (<a href="https://github.com/micahbolen/demoscene">código fuente</a>)</li>
- <li><a href="http://collinhover.github.io/kaiopua/">Kai 'Opua</a> (<a href="https://github.com/collinhover/kaiopua">código fuente</a>)</li>
-</ul>
-
-<h3 id="Realidad_VIrtual">Realidad VIrtual</h3>
-
-<ul>
- <li><a href="http://mozvr.com/demos/polarsea/">The Polar Sea</a> (<a href="https://github.com/MozVR/polarsea">código fuente</a>)</li>
- <li><a href="http://mozvr.github.io/sechelt/">Sechelt fly-through</a> (<a href="https://github.com/mozvr/sechelt">código fuente</a>)</li>
-</ul>
-
-<h2 id="CSS">CSS</h2>
-
-<ul>
- <li><a href="http://s.codepen.io/SoftwareRVG/debug/OXkOWj">CSS floating logo " mozilla  "  developed by Rober Villar , from Software RVG. </a>(modo depurado)</li>
- <li><a href="http://codepen.io/SoftwareRVG/pen/OXkOWj/">CSS floating logo " mozilla  "  developed by Rober Villar , from Software RVG. </a>(codigo fuente)</li>
- <li><a href="http://webdeveloperbareilly.in/blog/html5/responsive-contact-form-bootstrap.php">Responsive Contact Form</a></li>
- <li><a href="http://felixniklas.com/paperfold/">Paperfold</a></li>
- <li><a href="http://ondras.github.io/blockout/">CSS Blockout</a></li>
- <li><a href="http://ondras.zarovi.cz/demos/rubik/">Rubik's cube</a></li>
- <li><a href="http://ondras.zarovi.cz/demos/nojs/">Pure CSS Slides</a></li>
- <li>Planetarium (<a href="https://github.com/littleworkshop/planetarium">código fuente</a>)</li>
- <li><a href="http://www.lesmoffat.co.uk/folio/forest/forest.html">CSS Paralax Forest</a></li>
- <li><a href="http://webdeveloperbareilly.in/blog/css3/awesome-login-form.html">Awesome Login Page</a></li>
- <li><a href="http://webdeveloperbareilly.in/blog/css3/onepage-scroll-template.html">CSS3 One Page Scroll</a></li>
-</ul>
-
-<h3 id="Transformaciones">Transformaciones</h3>
-
-<ul>
- <li><a href="http://impress.github.io/impress.js">Impress.js</a> (<a href="https://github.com/impress/impress.js">código fuente</a>)</li>
-</ul>
-
-<h2 id="Juegos">Juegos</h2>
-
-<ul>
- <li><a href="https://dl.dropboxusercontent.com/u/62064441/ioquake3.js/ioquake3.html">IoQuake3</a> (<a href="https://github.com/klaussilveira/ioquake3.js">código fuente</a>)</li>
- <li><a href="http://collinhover.github.io/kaiopua/">Kai 'Opua</a> (<a href="https://github.com/collinhover/kaiopua">código fuente</a>)</li>
-</ul>
-
-<h2 id="HTML">HTML</h2>
-
-<ul>
- <li> <a href="http://zenphoton.com">Zen Photon Garden </a>(<a href="https://github.com/scanlime/zenphoton">código fuente</a>)</li>
- <li><a href="http://webdeveloperbareilly.in/blog/smo/html-meta-tags-for-social-media-optimization.html">HTMl Meta Tags For SMO</a></li>
-</ul>
-
-<h2 id="Web_APIs">Web APIs</h2>
-
-<ul>
-</ul>
-
-<h3 id="API_Notificaciones"> API Notificaciones</h3>
-
-<ul>
- <li><a href="http://elfoxero.github.io/html5notifications/">HTML5 Notifications</a> (<a href="https://github.com/elfoxero/html5notifications">código fuente</a>)</li>
-</ul>
-
-<ul>
-</ul>
-
-<h3 id="API_Web_Audio">API Web Audio</h3>
-
-<ul>
- <li><a href="http://ondras.github.io/fireworks-webgl/">Web Audio Fireworks</a></li>
- <li><a href="http://ondras.github.io/oscope/">oscope.js - JavaScript oscilloscope</a></li>
- <li><a href="http://mdn.github.io/audio-buffer/">Audio Buffer demo</a> (<a href="http://mdn.github.io/audio-buffer/">código fuente</a>)</li>
- <li><a href="http://nipe-systems.de/webapps/html5-web-audio/">HTML5 Web Audio Showcase</a> (<a href="https://github.com/NIPE-SYSTEMS/html5-web-audio-showcase">código fuente</a>)</li>
- <li><a href="http://wayou.github.io/HTML5_Audio_Visualizer/">HTML5 Audio Visualizer</a> (<a href="https://github.com/Wayou/HTML5_Audio_Visualizer">código fuente</a>)</li>
- <li><a href="http://carlosrafaelgn.com.br/GraphicalFilterEditor/">Graphical Filter Editor and Visualizer</a> (<a href="https://github.com/carlosrafaelgn/GraphicalFilterEditor">código fuente</a>)</li>
-</ul>
-
-<h3 id="Unclassified" name="Unclassified">Funciones Web</h3>
-
-<ul>
- <li><a href="http://ondras.github.io/fractal/">Web Worker Fractals</a></li>
- <li><a href="http://ondras.github.io/photo/">Photo editor</a></li>
- <li><a href="http://ondras.github.io/coral/">Coral generator</a></li>
- <li><a class="external" href="http://nerget.com/rayjs-mt/rayjs.html">Raytracer</a></li>
-</ul>
diff --git a/files/fr/_redirects.txt b/files/fr/_redirects.txt
index ca72b29e90..9cd2fc2d36 100644
--- a/files/fr/_redirects.txt
+++ b/files/fr/_redirects.txt
@@ -1006,9 +1006,9 @@
 /fr/docs/DOM/window	/fr/docs/Web/API/Window
 /fr/docs/DOM/window.URL.createObjectURL	/fr/docs/Web/API/URL/createObjectURL
 /fr/docs/DOM/window.alert	/fr/docs/Web/API/Window/alert
-/fr/docs/DOM/window.atob	/fr/docs/Web/API/WindowOrWorkerGlobalScope/atob
-/fr/docs/DOM/window.btoa	/fr/docs/Web/API/WindowOrWorkerGlobalScope/btoa
-/fr/docs/DOM/window.clearInterval	/fr/docs/Web/API/WindowOrWorkerGlobalScope/clearInterval
+/fr/docs/DOM/window.atob	/fr/docs/Web/API/atob
+/fr/docs/DOM/window.btoa	/fr/docs/Web/API/btoa
+/fr/docs/DOM/window.clearInterval	/fr/docs/Web/API/clearInterval
 /fr/docs/DOM/window.close	/fr/docs/Web/API/Window/close
 /fr/docs/DOM/window.closed	/fr/docs/Web/API/Window/closed
 /fr/docs/DOM/window.confirm	/fr/docs/Web/API/Window/confirm
@@ -1037,7 +1037,7 @@
 /fr/docs/DOM/window.prompt	/fr/docs/Web/API/Window/prompt
 /fr/docs/DOM/window.scroll	/fr/docs/Web/API/Window/scroll
 /fr/docs/DOM/window.scrollTo	/fr/docs/Web/API/Window/scrollTo
-/fr/docs/DOM/window.setTimeout	/fr/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout
+/fr/docs/DOM/window.setTimeout	/fr/docs/Web/API/setTimeout
 /fr/docs/DOM/window.showModalDialog	/fr/docs/Web/API/Window/showModalDialog
 /fr/docs/DOM:Autres_ressources	/fr/docs/Web/API/Document_Object_Model
 /fr/docs/DOM:Selection:toString	/fr/docs/Web/API/Selection/toString
@@ -1158,9 +1158,9 @@
 /fr/docs/DOM:table.caption	/fr/docs/Web/API/HTMLTableElement/caption
 /fr/docs/DOM:window	/fr/docs/Web/API/Window
 /fr/docs/DOM:window.alert	/fr/docs/Web/API/Window/alert
-/fr/docs/DOM:window.atob	/fr/docs/Web/API/WindowOrWorkerGlobalScope/atob
-/fr/docs/DOM:window.btoa	/fr/docs/Web/API/WindowOrWorkerGlobalScope/btoa
-/fr/docs/DOM:window.clearInterval	/fr/docs/Web/API/WindowOrWorkerGlobalScope/clearInterval
+/fr/docs/DOM:window.atob	/fr/docs/Web/API/atob
+/fr/docs/DOM:window.btoa	/fr/docs/Web/API/btoa
+/fr/docs/DOM:window.clearInterval	/fr/docs/Web/API/clearInterval
 /fr/docs/DOM:window.close	/fr/docs/Web/API/Window/close
 /fr/docs/DOM:window.closed	/fr/docs/Web/API/Window/closed
 /fr/docs/DOM:window.confirm	/fr/docs/Web/API/Window/confirm
@@ -1182,7 +1182,7 @@
 /fr/docs/DOM:window.parent	/fr/docs/Web/API/Window/parent
 /fr/docs/DOM:window.prompt	/fr/docs/Web/API/Window/prompt
 /fr/docs/DOM:window.scrollTo	/fr/docs/Web/API/Window/scrollTo
-/fr/docs/DOM:window.setTimeout	/fr/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout
+/fr/docs/DOM:window.setTimeout	/fr/docs/Web/API/setTimeout
 /fr/docs/DOM:window.showModalDialog	/fr/docs/Web/API/Window/showModalDialog
 /fr/docs/DOMParser	/fr/docs/Web/API/DOMParser
 /fr/docs/Dessin_de_texte_avec_canvas	/fr/docs/Web/API/Canvas_API/Tutorial/Drawing_text
@@ -3650,7 +3650,7 @@
 /fr/docs/Web/API/FileReader/FileList	/fr/docs/Web/API/FileList
 /fr/docs/Web/API/FormData/Utilisation_objets_FormData	/fr/docs/Web/API/FormData/Using_FormData_Objects
 /fr/docs/Web/API/GlobalFetch	/fr/docs/Web/API/WindowOrWorkerGlobalScope
-/fr/docs/Web/API/GlobalFetch/fetch	/fr/docs/Web/API/WindowOrWorkerGlobalScope/fetch
+/fr/docs/Web/API/GlobalFetch/fetch	/fr/docs/Web/API/fetch
 /fr/docs/Web/API/HTMLElement/dataset	/fr/docs/orphaned/Web/API/HTMLOrForeignElement/dataset
 /fr/docs/Web/API/HTMLElement/focus	/fr/docs/orphaned/Web/API/HTMLOrForeignElement/focus
 /fr/docs/Web/API/HTMLElement/style	/fr/docs/orphaned/Web/API/ElementCSSInlineStyle/style
@@ -3662,7 +3662,7 @@
 /fr/docs/Web/API/HTMLOrForeignElement/tabIndex	/fr/docs/orphaned/Web/API/HTMLOrForeignElement/tabIndex
 /fr/docs/Web/API/HTMLTableElement.caption	/fr/docs/Web/API/HTMLTableElement/caption
 /fr/docs/Web/API/HTMLTableElement.insertRow	/fr/docs/Web/API/HTMLTableElement/insertRow
-/fr/docs/Web/API/IDBEnvironment/indexedDB	/fr/docs/Web/API/WindowOrWorkerGlobalScope/indexedDB
+/fr/docs/Web/API/IDBEnvironment/indexedDB	/fr/docs/Web/API/indexedDB
 /fr/docs/Web/API/IDBRequest/blocked_event	/fr/docs/Web/API/IDBOpenDBRequest/blocked_event
 /fr/docs/Web/API/IndexedDB_API/Basic_Concepts_Behind_IndexedDB	/fr/docs/orphaned/Web/API/IndexedDB_API/Basic_Concepts_Behind_IndexedDB
 /fr/docs/Web/API/Location.assign	/fr/docs/Web/API/Location/assign
@@ -3756,9 +3756,9 @@
 /fr/docs/Web/API/Web_Workers_API/Utilisation_des_web_workers	/fr/docs/Web/API/Web_Workers_API/Using_web_workers
 /fr/docs/Web/API/Web_Workers_API/algorithme_clonage_structure	/fr/docs/Web/API/Web_Workers_API/Structured_clone_algorithm
 /fr/docs/Web/API/Window.alert	/fr/docs/Web/API/Window/alert
-/fr/docs/Web/API/Window.atob	/fr/docs/Web/API/WindowOrWorkerGlobalScope/atob
-/fr/docs/Web/API/Window.btoa	/fr/docs/Web/API/WindowOrWorkerGlobalScope/btoa
-/fr/docs/Web/API/Window.clearInterval	/fr/docs/Web/API/WindowOrWorkerGlobalScope/clearInterval
+/fr/docs/Web/API/Window.atob	/fr/docs/Web/API/atob
+/fr/docs/Web/API/Window.btoa	/fr/docs/Web/API/btoa
+/fr/docs/Web/API/Window.clearInterval	/fr/docs/Web/API/clearInterval
 /fr/docs/Web/API/Window.close	/fr/docs/Web/API/Window/close
 /fr/docs/Web/API/Window.closed	/fr/docs/Web/API/Window/closed
 /fr/docs/Web/API/Window.confirm	/fr/docs/Web/API/Window/confirm
@@ -3782,19 +3782,30 @@
 /fr/docs/Web/API/Window.postMessage	/fr/docs/Web/API/Window/postMessage
 /fr/docs/Web/API/Window.prompt	/fr/docs/Web/API/Window/prompt
 /fr/docs/Web/API/Window.scrollTo	/fr/docs/Web/API/Window/scrollTo
-/fr/docs/Web/API/Window.setTimeout	/fr/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout
+/fr/docs/Web/API/Window.setTimeout	/fr/docs/Web/API/setTimeout
 /fr/docs/Web/API/Window.showModalDialog	/fr/docs/Web/API/Window/showModalDialog
 /fr/docs/Web/API/Window/URL	/fr/docs/conflicting/Web/API/URL
-/fr/docs/Web/API/Window/caches	/fr/docs/Web/API/WindowOrWorkerGlobalScope/caches
+/fr/docs/Web/API/Window/caches	/fr/docs/Web/API/caches
 /fr/docs/Web/API/Window/gamepaddisconnected	/fr/docs/Web/API/Window/gamepaddisconnected_event
 /fr/docs/Web/API/Window/ondevicelight	/fr/docs/orphaned/Web/API/Window/ondevicelight
 /fr/docs/Web/API/Window/onresize	/fr/docs/conflicting/Web/API/GlobalEventHandlers/onresize
 /fr/docs/Web/API/WindowBase64	/fr/docs/Web/API/WindowOrWorkerGlobalScope
 /fr/docs/Web/API/WindowBase64/Décoder_encoder_en_base64	/fr/docs/Glossary/Base64
-/fr/docs/Web/API/WindowBase64/atob	/fr/docs/Web/API/WindowOrWorkerGlobalScope/atob
-/fr/docs/Web/API/WindowBase64/btoa	/fr/docs/Web/API/WindowOrWorkerGlobalScope/btoa
-/fr/docs/Web/API/WindowTimers/clearInterval	/fr/docs/Web/API/WindowOrWorkerGlobalScope/clearInterval
-/fr/docs/Web/API/WindowTimers/setTimeout	/fr/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout
+/fr/docs/Web/API/WindowBase64/atob	/fr/docs/Web/API/atob
+/fr/docs/Web/API/WindowBase64/btoa	/fr/docs/Web/API/btoa
+/fr/docs/Web/API/WindowOrWorkerGlobalScope/atob	/fr/docs/Web/API/atob
+/fr/docs/Web/API/WindowOrWorkerGlobalScope/btoa	/fr/docs/Web/API/btoa
+/fr/docs/Web/API/WindowOrWorkerGlobalScope/caches	/fr/docs/Web/API/caches
+/fr/docs/Web/API/WindowOrWorkerGlobalScope/clearInterval	/fr/docs/Web/API/clearInterval
+/fr/docs/Web/API/WindowOrWorkerGlobalScope/crossOriginIsolated	/fr/docs/Web/API/crossOriginIsolated
+/fr/docs/Web/API/WindowOrWorkerGlobalScope/fetch	/fr/docs/Web/API/fetch
+/fr/docs/Web/API/WindowOrWorkerGlobalScope/indexedDB	/fr/docs/Web/API/indexedDB
+/fr/docs/Web/API/WindowOrWorkerGlobalScope/isSecureContext	/fr/docs/Web/API/isSecureContext
+/fr/docs/Web/API/WindowOrWorkerGlobalScope/origin	/fr/docs/Web/API/origin
+/fr/docs/Web/API/WindowOrWorkerGlobalScope/queueMicrotask	/fr/docs/Web/API/queueMicrotask
+/fr/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout	/fr/docs/Web/API/setTimeout
+/fr/docs/Web/API/WindowTimers/clearInterval	/fr/docs/Web/API/clearInterval
+/fr/docs/Web/API/WindowTimers/setTimeout	/fr/docs/Web/API/setTimeout
 /fr/docs/Web/API/Worker.Worker	/fr/docs/Web/API/Worker/Worker
 /fr/docs/Web/API/Worker.onmessage	/fr/docs/Web/API/Worker/onmessage
 /fr/docs/Web/API/Worker.postMessage	/fr/docs/Web/API/Worker/postMessage
@@ -3927,8 +3938,8 @@
 /fr/docs/Web/CSS/Animations_CSS/Détecter_la_prise_en_charge_des_animations_CSS	/fr/docs/Web/CSS/CSS_Animations/Detecting_CSS_animation_support
 /fr/docs/Web/CSS/Animations_CSS/Utiliser_les_animations_CSS	/fr/docs/Web/CSS/CSS_Animations/Using_CSS_animations
 /fr/docs/Web/CSS/Arrière-plans_et_bordures_CSS	/fr/docs/conflicting/Web/CSS/CSS_Backgrounds_and_Borders
-/fr/docs/Web/CSS/Arrière-plans_et_bordures_CSS/Générateur_border-image	/fr/docs/Web/CSS/CSS_Background_and_Borders/Border-image_generator
-/fr/docs/Web/CSS/Arrière-plans_et_bordures_CSS/Générateur_border-radius	/fr/docs/Web/CSS/CSS_Background_and_Borders/Border-radius_generator
+/fr/docs/Web/CSS/Arrière-plans_et_bordures_CSS/Générateur_border-image	/fr/docs/Web/CSS/CSS_Backgrounds_and_Borders/Border-image_generator
+/fr/docs/Web/CSS/Arrière-plans_et_bordures_CSS/Générateur_border-radius	/fr/docs/Web/CSS/CSS_Backgrounds_and_Borders/Border-radius_generator
 /fr/docs/Web/CSS/Arrière-plans_et_bordures_CSS/Scaling_background_images	/fr/docs/Web/CSS/CSS_Backgrounds_and_Borders/Resizing_background_images
 /fr/docs/Web/CSS/Arrière-plans_et_bordures_CSS/Utiliser_des_fonds_multiples	/fr/docs/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds
 /fr/docs/Web/CSS/Aural	/fr/docs/Web/CSS/@media/aural
@@ -3939,6 +3950,9 @@
 /fr/docs/Web/CSS/CSS_:_la_propriété_animation-play-state	/fr/docs/Web/CSS/animation-play-state
 /fr/docs/Web/CSS/CSS_Animations/Utiliser_les_animations_CSS	/fr/docs/Web/CSS/CSS_Animations/Using_CSS_animations
 /fr/docs/Web/CSS/CSS_Background_and_Borders	/fr/docs/conflicting/Web/CSS/CSS_Backgrounds_and_Borders
+/fr/docs/Web/CSS/CSS_Background_and_Borders/Border-image_generator	/fr/docs/Web/CSS/CSS_Backgrounds_and_Borders/Border-image_generator
+/fr/docs/Web/CSS/CSS_Background_and_Borders/Border-radius_generator	/fr/docs/Web/CSS/CSS_Backgrounds_and_Borders/Border-radius_generator
+/fr/docs/Web/CSS/CSS_Background_and_Borders/Box-shadow_generator	/fr/docs/Web/CSS/CSS_Backgrounds_and_Borders/Box-shadow_generator
 /fr/docs/Web/CSS/CSS_Background_and_Borders/Scaling_background_images	/fr/docs/Web/CSS/CSS_Backgrounds_and_Borders/Resizing_background_images
 /fr/docs/Web/CSS/CSS_Background_and_Borders/Utiliser_des_fonds_multiples	/fr/docs/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds
 /fr/docs/Web/CSS/CSS_Backgrounds_and_Borders/Scaling_background_images	/fr/docs/Web/CSS/CSS_Backgrounds_and_Borders/Resizing_background_images
@@ -3948,7 +3962,7 @@
 /fr/docs/Web/CSS/CSS_Box_Alignment/Alignement_boîtes_disposition_bloc_absolue_tableau	/fr/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_In_Block_Abspos_Tables
 /fr/docs/Web/CSS/CSS_Box_Alignment/Alignement_boîtes_disposition_colonnes	/fr/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Multi-column_Layout
 /fr/docs/Web/CSS/CSS_Box_Alignment/Alignement_boîtes_disposition_grille	/fr/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_In_Grid_Layout
-/fr/docs/Web/CSS/CSS_Box_Model/Box-shadow_generator	/fr/docs/Web/CSS/CSS_Background_and_Borders/Box-shadow_generator
+/fr/docs/Web/CSS/CSS_Box_Model/Box-shadow_generator	/fr/docs/Web/CSS/CSS_Backgrounds_and_Borders/Box-shadow_generator
 /fr/docs/Web/CSS/CSS_Colors	/fr/docs/conflicting/Web/CSS/CSS_Color
 /fr/docs/Web/CSS/CSS_Columns/Concepts_base_multi-colonnes	/fr/docs/Web/CSS/CSS_Columns/Basic_Concepts_of_Multicol
 /fr/docs/Web/CSS/CSS_Columns/Gestion_dépassement_multi-colonnes	/fr/docs/Web/CSS/CSS_Columns/Handling_Overflow_in_Multicol
@@ -4090,9 +4104,9 @@
 /fr/docs/Web/CSS/Mode_de_mise_en_page	/fr/docs/Web/CSS/Layout_mode
 /fr/docs/Web/CSS/Modèle_de_boîte	/en-US/docs/Learn/CSS/Building_blocks/The_box_model
 /fr/docs/Web/CSS/Modèle_de_boîte_CSS	/fr/docs/Web/CSS/CSS_Box_Model
-/fr/docs/Web/CSS/Modèle_de_boîte_CSS/Box-shadow_generator	/fr/docs/Web/CSS/CSS_Background_and_Borders/Box-shadow_generator
+/fr/docs/Web/CSS/Modèle_de_boîte_CSS/Box-shadow_generator	/fr/docs/Web/CSS/CSS_Backgrounds_and_Borders/Box-shadow_generator
 /fr/docs/Web/CSS/Modèle_de_boîte_CSS/Fusion_des_marges	/fr/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing
-/fr/docs/Web/CSS/Modèle_de_boîte_CSS/Générateur_box-shadow	/fr/docs/Web/CSS/CSS_Background_and_Borders/Box-shadow_generator
+/fr/docs/Web/CSS/Modèle_de_boîte_CSS/Générateur_box-shadow	/fr/docs/Web/CSS/CSS_Backgrounds_and_Borders/Box-shadow_generator
 /fr/docs/Web/CSS/Modèle_de_boîte_CSS/Modèle_de_boîte	/en-US/docs/Learn/CSS/Building_blocks/The_box_model
 /fr/docs/Web/CSS/Modèle_de_mise_en_forme_visuelle	/fr/docs/Web/CSS/Visual_formatting_model
 /fr/docs/Web/CSS/Motion_Path	/fr/docs/Web/CSS/CSS_Motion_Path
@@ -4100,7 +4114,7 @@
 /fr/docs/Web/CSS/Média/Visuel	/fr/docs/Web/CSS/@media
 /fr/docs/Web/CSS/Média_Paginé	/fr/docs/Web/CSS/Paged_Media
 /fr/docs/Web/CSS/Média_paginés	/fr/docs/Web/CSS/Paged_Media
-/fr/docs/Web/CSS/Outils	/fr/docs/Web/CSS/Tools
+/fr/docs/Web/CSS/Outils	/fr/docs/conflicting/Web/CSS_c2c099599c0a58c69d1390033045f244
 /fr/docs/Web/CSS/Outils/Générateur_de_courbe_de_Bézier	/fr/docs/orphaned/Web/CSS/Tools/Cubic_Bezier_Generator
 /fr/docs/Web/CSS/Outils/Générateur_de_dégradés_linéaires	/fr/docs/Web/CSS/Tools/Linear-gradient_Generator
 /fr/docs/Web/CSS/Propriétés_raccourcies	/fr/docs/Web/CSS/Shorthand_properties
@@ -4136,6 +4150,7 @@
 /fr/docs/Web/CSS/Sélecteurs_descendant	/fr/docs/Web/CSS/Descendant_combinator
 /fr/docs/Web/CSS/Sélecteurs_enfant	/fr/docs/Web/CSS/Child_combinator
 /fr/docs/Web/CSS/Sélecteurs_universels	/fr/docs/Web/CSS/Universal_selectors
+/fr/docs/Web/CSS/Tools	/fr/docs/conflicting/Web/CSS_c2c099599c0a58c69d1390033045f244
 /fr/docs/Web/CSS/Tools/Cubic_Bezier_Generator	/fr/docs/orphaned/Web/CSS/Tools/Cubic_Bezier_Generator
 /fr/docs/Web/CSS/Tools/Générateur_de_courbe_de_Bézier	/fr/docs/orphaned/Web/CSS/Tools/Cubic_Bezier_Generator
 /fr/docs/Web/CSS/Tools/Générateur_de_dégradés_linéaires	/fr/docs/Web/CSS/Tools/Linear-gradient_Generator
@@ -4250,7 +4265,8 @@
 /fr/docs/Web/CSS/visible	/fr/docs/Web/CSS/visibility
 /fr/docs/Web/CSS/word-wrap	/fr/docs/Web/CSS/overflow-wrap
 /fr/docs/Web/CSS/Élément_remplacé	/fr/docs/Web/CSS/Replaced_element
-/fr/docs/Web/Démos_de_technologies_open_web	/fr/docs/Web/Demos_of_open_web_technologies
+/fr/docs/Web/Demos_of_open_web_technologies	/fr/docs/Web/Demos
+/fr/docs/Web/Démos_de_technologies_open_web	/fr/docs/Web/Demos
 /fr/docs/Web/Events/DOMContentLoaded	/fr/docs/Web/API/Window/DOMContentLoaded_event
 /fr/docs/Web/Events/abort	/fr/docs/conflicting/Web/API/HTMLMediaElement/abort_event
 /fr/docs/Web/Events/abort_(ProgressEvent)	/fr/docs/Web/API/XMLHttpRequest/abort_event
diff --git a/files/fr/_wikihistory.json b/files/fr/_wikihistory.json
index b4de7ff0ab..fcdcc1acd9 100644
--- a/files/fr/_wikihistory.json
+++ b/files/fr/_wikihistory.json
@@ -21577,112 +21577,6 @@
       "Bzbarsky"
     ]
   },
-  "Web/API/WindowOrWorkerGlobalScope/atob": {
-    "modified": "2019-09-24T09:32:03.862Z",
-    "contributors": [
-      "NemoNobobyPersonne",
-      "tbroadley",
-      "fscholz",
-      "teoli",
-      "khalid32",
-      "Mgjbot",
-      "BenoitL",
-      "Celelibi"
-    ]
-  },
-  "Web/API/WindowOrWorkerGlobalScope/btoa": {
-    "modified": "2019-03-18T21:13:03.287Z",
-    "contributors": [
-      "PamProg",
-      "NemoNobobyPersonne",
-      "teoli",
-      "lovasoa",
-      "fscholz",
-      "jsx",
-      "e7d",
-      "Mgjbot",
-      "BenoitL",
-      "Celelibi"
-    ]
-  },
-  "Web/API/WindowOrWorkerGlobalScope/caches": {
-    "modified": "2020-10-15T22:06:53.037Z",
-    "contributors": [
-      "Arzak656",
-      "jonasgrilleres"
-    ]
-  },
-  "Web/API/WindowOrWorkerGlobalScope/clearInterval": {
-    "modified": "2020-10-15T21:18:22.478Z",
-    "contributors": [
-      "SphinxKnight",
-      "faflo10",
-      "Shinomix",
-      "fscholz",
-      "teoli",
-      "khalid32",
-      "Mgjbot",
-      "BenoitL"
-    ]
-  },
-  "Web/API/WindowOrWorkerGlobalScope/crossOriginIsolated": {
-    "modified": "2020-10-15T22:26:34.641Z",
-    "contributors": [
-      "Eliastik"
-    ]
-  },
-  "Web/API/WindowOrWorkerGlobalScope/fetch": {
-    "modified": "2020-11-16T08:26:54.613Z",
-    "contributors": [
-      "JNa0",
-      "PxlCtzn",
-      "fscholz",
-      "Hell_Carlito",
-      "Bat41"
-    ]
-  },
-  "Web/API/WindowOrWorkerGlobalScope/indexedDB": {
-    "modified": "2020-10-15T21:45:39.555Z",
-    "contributors": [
-      "Arzak656",
-      "SphinxKnight",
-      "gadgino"
-    ]
-  },
-  "Web/API/WindowOrWorkerGlobalScope/isSecureContext": {
-    "modified": "2020-10-15T22:06:53.371Z",
-    "contributors": [
-      "jonasgrilleres"
-    ]
-  },
-  "Web/API/WindowOrWorkerGlobalScope/origin": {
-    "modified": "2020-10-15T22:06:53.236Z",
-    "contributors": [
-      "jonasgrilleres"
-    ]
-  },
-  "Web/API/WindowOrWorkerGlobalScope/queueMicrotask": {
-    "modified": "2020-10-15T22:26:44.474Z",
-    "contributors": [
-      "Eliastik"
-    ]
-  },
-  "Web/API/WindowOrWorkerGlobalScope/setTimeout": {
-    "modified": "2020-10-15T21:13:52.309Z",
-    "contributors": [
-      "SphinxKnight",
-      "jmh",
-      "fscholz",
-      "teoli",
-      "jsx",
-      "Automatik",
-      "zanz",
-      "Tiller",
-      "Ceth",
-      "BenoitL",
-      "Mgjbot"
-    ]
-  },
   "Web/API/Worker": {
     "modified": "2020-10-15T21:25:14.944Z",
     "contributors": [
@@ -22017,6 +21911,84 @@
       "BenoitL"
     ]
   },
+  "Web/API/atob": {
+    "modified": "2019-09-24T09:32:03.862Z",
+    "contributors": [
+      "NemoNobobyPersonne",
+      "tbroadley",
+      "fscholz",
+      "teoli",
+      "khalid32",
+      "Mgjbot",
+      "BenoitL",
+      "Celelibi"
+    ]
+  },
+  "Web/API/btoa": {
+    "modified": "2019-03-18T21:13:03.287Z",
+    "contributors": [
+      "PamProg",
+      "NemoNobobyPersonne",
+      "teoli",
+      "lovasoa",
+      "fscholz",
+      "jsx",
+      "e7d",
+      "Mgjbot",
+      "BenoitL",
+      "Celelibi"
+    ]
+  },
+  "Web/API/caches": {
+    "modified": "2020-10-15T22:06:53.037Z",
+    "contributors": [
+      "Arzak656",
+      "jonasgrilleres"
+    ]
+  },
+  "Web/API/clearInterval": {
+    "modified": "2020-10-15T21:18:22.478Z",
+    "contributors": [
+      "SphinxKnight",
+      "faflo10",
+      "Shinomix",
+      "fscholz",
+      "teoli",
+      "khalid32",
+      "Mgjbot",
+      "BenoitL"
+    ]
+  },
+  "Web/API/crossOriginIsolated": {
+    "modified": "2020-10-15T22:26:34.641Z",
+    "contributors": [
+      "Eliastik"
+    ]
+  },
+  "Web/API/fetch": {
+    "modified": "2020-11-16T08:26:54.613Z",
+    "contributors": [
+      "JNa0",
+      "PxlCtzn",
+      "fscholz",
+      "Hell_Carlito",
+      "Bat41"
+    ]
+  },
+  "Web/API/indexedDB": {
+    "modified": "2020-10-15T21:45:39.555Z",
+    "contributors": [
+      "Arzak656",
+      "SphinxKnight",
+      "gadgino"
+    ]
+  },
+  "Web/API/isSecureContext": {
+    "modified": "2020-10-15T22:06:53.371Z",
+    "contributors": [
+      "jonasgrilleres"
+    ]
+  },
   "Web/API/notification": {
     "modified": "2020-10-15T21:26:50.253Z",
     "contributors": [
@@ -22172,6 +22144,34 @@
       "tomderudder"
     ]
   },
+  "Web/API/origin": {
+    "modified": "2020-10-15T22:06:53.236Z",
+    "contributors": [
+      "jonasgrilleres"
+    ]
+  },
+  "Web/API/queueMicrotask": {
+    "modified": "2020-10-15T22:26:44.474Z",
+    "contributors": [
+      "Eliastik"
+    ]
+  },
+  "Web/API/setTimeout": {
+    "modified": "2020-10-15T21:13:52.309Z",
+    "contributors": [
+      "SphinxKnight",
+      "jmh",
+      "fscholz",
+      "teoli",
+      "jsx",
+      "Automatik",
+      "zanz",
+      "Tiller",
+      "Ceth",
+      "BenoitL",
+      "Mgjbot"
+    ]
+  },
   "Web/API/window/location": {
     "modified": "2019-03-23T23:59:30.762Z",
     "contributors": [
@@ -24440,19 +24440,25 @@
       "FredB"
     ]
   },
-  "Web/CSS/CSS_Background_and_Borders/Border-image_generator": {
+  "Web/CSS/CSS_Backgrounds_and_Borders": {
+    "modified": "2019-04-06T12:13:22.172Z",
+    "contributors": [
+      "SphinxKnight"
+    ]
+  },
+  "Web/CSS/CSS_Backgrounds_and_Borders/Border-image_generator": {
     "modified": "2019-03-23T22:30:30.328Z",
     "contributors": [
       "SphinxKnight"
     ]
   },
-  "Web/CSS/CSS_Background_and_Borders/Border-radius_generator": {
+  "Web/CSS/CSS_Backgrounds_and_Borders/Border-radius_generator": {
     "modified": "2019-03-23T22:30:26.745Z",
     "contributors": [
       "SphinxKnight"
     ]
   },
-  "Web/CSS/CSS_Background_and_Borders/Box-shadow_generator": {
+  "Web/CSS/CSS_Backgrounds_and_Borders/Box-shadow_generator": {
     "modified": "2019-03-18T20:43:43.479Z",
     "contributors": [
       "BychekRU",
@@ -24460,12 +24466,6 @@
       "kiux"
     ]
   },
-  "Web/CSS/CSS_Backgrounds_and_Borders": {
-    "modified": "2019-04-06T12:13:22.172Z",
-    "contributors": [
-      "SphinxKnight"
-    ]
-  },
   "Web/CSS/CSS_Backgrounds_and_Borders/Resizing_background_images": {
     "modified": "2019-06-18T19:28:42.872Z",
     "contributors": [
@@ -25688,13 +25688,6 @@
       "FredB"
     ]
   },
-  "Web/CSS/Tools": {
-    "modified": "2019-04-06T13:47:45.843Z",
-    "contributors": [
-      "SphinxKnight",
-      "velvel53"
-    ]
-  },
   "Web/CSS/Tools/Linear-gradient_Generator": {
     "modified": "2019-04-06T13:48:01.466Z",
     "contributors": [
@@ -30106,7 +30099,7 @@
       "JayPanoz"
     ]
   },
-  "Web/Demos_of_open_web_technologies": {
+  "Web/Demos": {
     "modified": "2019-03-18T20:44:11.081Z",
     "contributors": [
       "goofy_mdn",
@@ -43607,6 +43600,13 @@
       "ThePrisoner"
     ]
   },
+  "conflicting/Web/CSS_c2c099599c0a58c69d1390033045f244": {
+    "modified": "2019-04-06T13:47:45.843Z",
+    "contributors": [
+      "SphinxKnight",
+      "velvel53"
+    ]
+  },
   "conflicting/Web/Guide": {
     "modified": "2019-03-24T00:13:07.123Z",
     "contributors": [
diff --git a/files/fr/conflicting/web/css_c2c099599c0a58c69d1390033045f244/index.html b/files/fr/conflicting/web/css_c2c099599c0a58c69d1390033045f244/index.html
new file mode 100644
index 0000000000..84516f2356
--- /dev/null
+++ b/files/fr/conflicting/web/css_c2c099599c0a58c69d1390033045f244/index.html
@@ -0,0 +1,21 @@
+---
+title: Outils
+slug: conflicting/Web/CSS_c2c099599c0a58c69d1390033045f244
+tags:
+  - CSS
+  - Outils
+translation_of: Web/CSS/Tools
+original_slug: Web/CSS/Tools
+---
+<p>CSS fournit de nombreuses fonctionnalités qui peuvent être paramétrées avec différents facteurs. Il est donc utile de pouvoir visualiser ces paramètres lorsqu'on manipule ces propriétés. Cette page indique différents outils qui pourront vous être utiles lorsque vous construirez vos feuilles de style avec ces fonctionnalités.</p>
+
+<p>{{LandingPageListSubpages}}</p>
+
+<h2 id="Autres_outils">Autres outils</h2>
+
+<ul>
+ <li><a href="http://jeremyckahn.github.io/stylie/">Stylie </a>pour les animations</li>
+ <li>Connaître les informations d'affichage d'un appareil (utile pour la conception de sites adaptatifs) : <a href="http://mydevice.io">mydevice.io</a></li>
+ <li>Construire des menus CSS - <a href="https://cssmenumaker.com/">cssmenumaker.com</a></li>
+ <li>Un linter CSS qui permet de respecter des conventions homogènes et d'éviter des erreurs dans les feuilles de style - <a href="https://stylelint.io/">stylelint</a></li>
+</ul>
diff --git a/files/fr/glossary/accent/index.html b/files/fr/glossary/accent/index.html
new file mode 100644
index 0000000000..3a18102a44
--- /dev/null
+++ b/files/fr/glossary/accent/index.html
@@ -0,0 +1,22 @@
+---
+title: Accentuation
+slug: Glossary/accent
+translation_of: 'Glossary/accent'
+---
+<p>Une <strong>accentuation</strong> est une couleur généralement vive qui contraste avec les couleurs d'arrière-plan et de premier plan plus utilitaires d'un jeu de couleurs. Celles-ci sont présentes dans le style visuel de nombreuses plates-formes (mais pas toutes).</p>
+
+<p>Sur le Web, une accentuation est parfois utilisée dans les éléments <a href="/fr/docs/Web/HTML/Element/Input"><code>&lt;input&gt;</code></a> pour la partie active du contrôle, par exemple l'arrière-plan d'une <a href="/fr/docs/Web/HTML/Element/Input/checkbox">case cochée</a> (« <i>checkbox</i> » en anglais).</p>
+
+<h2 id="Learn_more">En apprendre plus</h2>
+
+<h3 id="CSS_related_to_the_accent">CSS lié à l'accentuation</h3>
+
+<p>Vous pouvez définir la couleur d'accentuation pour un élément donné en définissant la propriété CSS <a href="/fr/docs/Web/CSS/accent-color"><code>accent-color</code></a> de l'élément sur la valeur <a href="/fr/docs/Web/CSS/color_value"><code>&lt;color&gt</code></a> appropriée.</p>
+
+<h3 id="HTML_elements_that_may_present_an_accent">Éléments HTML pouvant avoir une accentuation</h3>
+
+<ul>
+  <li><code><a href="/fr/docs/Web/HTML/Element/Input/checkbox">&lt;input type="checkbox"&gt;</a></code></li>
+  <li><code><a href="/fr/docs/Web/HTML/Element/Input/radio">&lt;input type="radio"&gt;</a></code></li>
+  <li><code><a href="/fr/docs/Web/HTML/Element/Input/range">&lt;input type="range"&gt;</a></code></li>
+</ul>
diff --git a/files/fr/glossary/accessibility_tree/index.html b/files/fr/glossary/accessibility_tree/index.html
index 80b1d9f653..d5f1f739d0 100644
--- a/files/fr/glossary/accessibility_tree/index.html
+++ b/files/fr/glossary/accessibility_tree/index.html
@@ -28,7 +28,7 @@ translation_of: Glossary/Accessibility_tree
 
 <p>De plus, l'arbre d'accessibilité contient souvent des informations concernant ce qui peut être fait avec un élément : un lien peut être <em>suivi,</em> on peut <em>écrire dans</em> un champ texte etc.</p>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li><a href="/fr/docs/Glossaire">Glossaire</a>
 
diff --git a/files/fr/glossary/ajax/index.html b/files/fr/glossary/ajax/index.html
index 3a37adf62d..e07db98289 100644
--- a/files/fr/glossary/ajax/index.html
+++ b/files/fr/glossary/ajax/index.html
@@ -17,7 +17,7 @@ original_slug: Glossaire/AJAX
 
 <p>Avec les sites web interactifs et les standards modernes du web, AJAX est progressivement remplacé par des fonctions dans les cadres JavaScript et l'API standard officielle {{domxref("Fetch API")}}.</p>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ul>
  <li><a href="/fr/docs/Glossaire">Glossaire du MND</a>:
 
diff --git a/files/fr/glossary/bootstrap/index.html b/files/fr/glossary/bootstrap/index.html
index e2fecc8a9b..2582be5642 100644
--- a/files/fr/glossary/bootstrap/index.html
+++ b/files/fr/glossary/bootstrap/index.html
@@ -14,7 +14,7 @@ original_slug: Glossaire/Bootstrap
 
 <p>Initialement, Bootstrap s'appelait Twitter Blueprint et a été développé par une équipe travaillant chez <a href="https://twitter.com/">Twitter</a>. Il prend en charge la conception réactive et propose des modèles de conception prédéfinis que vous pouvez utiliser directement ou personnalier selon vos besoin avec votre code. Vous n'avez pas non plus à vous soucier de la compatibilité avec les autres navigateurs, car Bootstrap est compatible avec tous les navigateurs modernes et les nouvelles versions de {{glossary("Microsoft Internet Explorer", "Internet Explorer")}}.</p>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li>{{interwiki("wikipedia", "Bootstrap (front-end framework)", "Bootstrap")}} sur Wikipédia</li>
  <li><a href="https://getbootstrap.com/">Télécharger Bootstrap</a></li>
diff --git a/files/fr/glossary/brotli_compression/index.html b/files/fr/glossary/brotli_compression/index.html
index dc7157d402..3f595b3ed2 100644
--- a/files/fr/glossary/brotli_compression/index.html
+++ b/files/fr/glossary/brotli_compression/index.html
@@ -23,7 +23,7 @@ original_slug: Glossaire/brotli_compression
  <li><a href="https://caniuse.com/#feat=brotli">Brotli sur Caniuse</a></li>
 </ul>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ul>
  <li>
   <details open><summary></summary> {{ListSubpages("/en-US/docs/Glossary")}}</details>
diff --git a/files/fr/glossary/continuous_media/index.html b/files/fr/glossary/continuous_media/index.html
new file mode 100644
index 0000000000..b67d26adcc
--- /dev/null
+++ b/files/fr/glossary/continuous_media/index.html
@@ -0,0 +1,10 @@
+---
+title: Médias continus
+slug: Glossary/Continuous_Media
+translation_of: 'Glossary/Continuous_Media'
+---
+<p>Les médias continus (« <i>Continuous Media</i> » en Anglais) sont des données pour lesquelles il existe une relation temporelle entre la source et la destination. Les exemples les plus courants de médias continus sont l'audio et la vidéo animée. Les médias continus peuvent être en temps réel (interactif), où il existe une relation temporelle « étroite » entre la source et le récepteur, ou en streaming (lecture), où la relation est moins stricte.</p>
+
+<p>CSS peut être utilisé dans une variété de contextes, y compris les médias imprimés. Et certains CSS, en particulier ceux qui sont utilisés pour la mise en page, se comportent différemment selon le contexte dans lequel ils se trouvent.</p>
+
+<p>Les médias continus identifient donc un contexte où le contenu n'est pas fragmenté. Il coule en continu. Le contenu Web affiché sur un écran est un média continu, tout comme le contenu parlé.</p>
diff --git a/files/fr/glossary/database/index.html b/files/fr/glossary/database/index.html
new file mode 100644
index 0000000000..236c570abc
--- /dev/null
+++ b/files/fr/glossary/database/index.html
@@ -0,0 +1,23 @@
+---
+title: Base de données
+slug: Glossary/Database
+translation_of: 'Glossary/Database'
+---
+<p>Une <strong>base de donnée</strong> est un système de stockage qui collecte des données organisées, pour faciliter certains travaux comme la recherche, la structure et l'extension.</p>
+
+<p>Dans le développement web, la plupart des bases de données utilisent le système de gestion de base de données relationnelle (SGBDR) pour organiser les données et la programmation en <a href="/fr/docs/Glossary/SQL">SQL</a>. Cependant, certaines bases de données appelées NoSQL ne suivent pas l'ancien mécanisme de données organisées.</p>
+
+<p>Parmi les SGBDR côté serveur les plus célèbres nous avons <em>MySQL</em> (ou <em>MariaDB</em> qui en est un <i lang="en">fork</i>), <em>SQL Server</em>, et <em>Oracle Database</em>. D'autre part, certains exemples NoSQL célèbres sont  <em>MongoDB</em>, <em>Cassandra</em>, et <em>Redis</em>.</p>
+
+<p>Les navigateurs ont également leur propre système de base de données appelé <a href="/fr/docs/Glossary/IndexedDB">IndexedDB</a>.</p>
+
+<section id="Quick_links">
+<ol>
+ <li><a href="https://fr.wikipedia.org/wiki/Base_de_donn%C3%A9es">Base de données</a> sur Wikipédia
+  <ol>
+   <li><a href="/fr/docs/Glossary/IndexedDB">IndexedDB</a></li>
+   <li><a href="/fr/docs/Glossary/SQL">SQL</a></li>
+  </ol>
+ </li>
+</ol>
+</section>
diff --git a/files/fr/glossary/favicon/index.html b/files/fr/glossary/favicon/index.html
index f5a605604f..f421cff348 100644
--- a/files/fr/glossary/favicon/index.html
+++ b/files/fr/glossary/favicon/index.html
@@ -15,7 +15,7 @@ original_slug: Glossaire/Favicon
 
 <p>Ils sont utilisés pour améliorer l'expérience utilisateur et renforcer la cohérence de la marque. Lorsqu'une icône familière apparaît dans la barre d'adresse du navigateur, par exemple, elle aide les utilisateurs à savoir qu'ils sont au bon endroit.</p>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li>{{interwiki("wikipedia", "Favicon", "Favicon")}} sur Wikipédia</li>
  <li>Outils
diff --git a/files/fr/glossary/first_cpu_idle/index.html b/files/fr/glossary/first_cpu_idle/index.html
new file mode 100644
index 0000000000..51212e9e0d
--- /dev/null
+++ b/files/fr/glossary/first_cpu_idle/index.html
@@ -0,0 +1,6 @@
+---
+title: Première inactivité CPU
+slug: Glossary/First_CPU_idle
+translation_of: 'Glossary/First_CPU_idle'
+---
+<p><strong>La première inactivité CPU</strong> (« <i>First CPU Idle</i> » en anglais) mesure quand une page est minimalement interactive, ou quand la fenêtre est suffisamment silencieuse pour gérer les entrées de l'utilisateur. Il s'agit d'une mesure de performance web non standard de Google. Généralement, cela se produit lorsque la plupart des éléments d'interface utilisateur (UI) visibles, mais pas nécessairement tous, sont interactifs et que l'interface utilisateur répond, en moyenne, à la plupart des entrées de l'utilisateur dans les 50 ms. Il est également connu sous le nom de <a href="/fr/docs/Glossary/First_interactive">Premier instant d'interactivité</a>.</p>
diff --git a/files/fr/glossary/http_2/index.html b/files/fr/glossary/http_2/index.html
index 6888f9c516..97b4ec6e10 100644
--- a/files/fr/glossary/http_2/index.html
+++ b/files/fr/glossary/http_2/index.html
@@ -15,7 +15,7 @@ original_slug: Glossaire/HTTP_2
 
 <p>HTTP/2 ne modifie en aucune façon la sémantique d'application de HTTP. Tous les concepts fondamentaux de HTTP 1.1, tels que les méthodes HTTP, les codes d'état, les URL et les champs d'en-tête, restent en place. En revanche, HTTP/2 modifie la façon dont les données sont formatées (encadrées) et transportées entre le client et le serveur, qui gèrent tous deux l'ensemble du processus, et dissimule la complexité de l'application dans la nouvelle couche d'encadrement. Par conséquent, toutes les applications existantes peuvent être fournies sans modification.</p>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li>Culture générale
   <ol>
diff --git a/files/fr/glossary/http_3/index.html b/files/fr/glossary/http_3/index.html
index 5f25500ab6..bd46ed765a 100644
--- a/files/fr/glossary/http_3/index.html
+++ b/files/fr/glossary/http_3/index.html
@@ -10,7 +10,7 @@ original_slug: Glossaire/HTTP_3
 ---
 <p><span class="seoSummary"><strong>HTTP/3</strong> est la prochaine révision majeure du <a href="/en-US/docs/Web/HTTP/Basics_of_HTTP">protocole réseau HTTP</a></span>, succédant à {{glossary("HTTP 2", "HTTP/2")}}. Le point majeur de HTTP/3 est qu'il utilise un nouveau protocole {{glossary("UDP")}} nommé QUIC, au lieu de {{glossary("TCP")}}.</p>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li>Culture générale
   <ol>
diff --git a/files/fr/glossary/input_method_editor/index.html b/files/fr/glossary/input_method_editor/index.html
index 6bb07a44ce..608e4b8145 100644
--- a/files/fr/glossary/input_method_editor/index.html
+++ b/files/fr/glossary/input_method_editor/index.html
@@ -14,7 +14,7 @@ original_slug: Glossaire/Input_method_editor
  <li>la saisie de texte à partir d'un écran tactile avec reconnaisance d'écriture manuscrite.</li>
 </ul>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li>Wikipedia articles
   <ol>
diff --git a/files/fr/glossary/internationalization_and_localization/index.html b/files/fr/glossary/internationalization_and_localization/index.html
index 4b44e5f3d5..2cb6a543a3 100644
--- a/files/fr/glossary/internationalization_and_localization/index.html
+++ b/files/fr/glossary/internationalization_and_localization/index.html
@@ -20,7 +20,7 @@ original_slug: Glossaire/Internationalisation_et_localisation
  <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Disposition Flexbox</a> et <a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Grid</a></li>
 </ul>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ul>
  <li>
   <details open><summary></summary> {{ListSubpages("/en-US/docs/Glossary")}}</details>
diff --git a/files/fr/glossary/intrinsic_size/index.html b/files/fr/glossary/intrinsic_size/index.html
new file mode 100644
index 0000000000..684e7fac9f
--- /dev/null
+++ b/files/fr/glossary/intrinsic_size/index.html
@@ -0,0 +1,15 @@
+---
+title: Taille intrinsèque
+slug: Glossary/Intrinsic_Size
+translation_of: 'Glossary/Intrinsic_Size'
+---
+
+<p>En CSS, la <em>taille intrinsèque</em> d'un élément est la taille qu'il aurait en fonction de son contenu, si aucun facteur externe ne lui était appliqué. Par exemple, les éléments en ligne sont dimensionnés de manière intrinsèque : la <code>largeur</code>, la <code>hauteur</code>, la marge et le remplissage vertical n'ont aucun impact, contrairement à la marge et au remplissage horizontal.</p>
+
+<p>La manière dont les tailles intrinsèques sont calculées est définie dans la <a href="https://www.w3.org/TR/css-sizing-3/#intrinsic-sizes">Spécification de dimensionnement intrinsèque et extrinsèque du CSS</a>.</p>
+
+<p>Le dimensionnement intrinsèque prend en compte la taille <code>min-content</code> et <code>max-content</code> d'un élément. Pour le texte, la taille du <code>min-content</code> serait le fait que le texte soit aussi petit que possible dans le sens linéaire sans provoquer de débordement, en faisant autant d'enveloppement souple que possible. Pour une boîte contenant une chaîne de texte, la taille du <code>min-content</code> serait définie par le mot le plus long. La valeur du mot-clé de <code>min-content</code> pour la propriété {{cssxref("width")}} dimensionnera un élément en fonction de la taille de <code>min-content</code>.</p>
+
+<p>La taille de <code>max-content</code> est l'inverse — dans le cas du texte, le texte s'afficherait aussi large que possible, sans enveloppement souple, même si un débordement était provoqué. La valeur du mot clé <code>max-content</code> expose ce comportement.</p>
+
+<p>Pour les images, la taille intrinsèque a la même signification — c'est la taille avec laquelle une image serait affichée si aucun CSS n'était appliqué pour modifier le rendu. Par défaut, les images sont supposées avoir une densité de "1x" pixels (1 pixel de périphérique = 1 pixel CSS) et donc la taille intrinsèque est simplement la hauteur et la largeur du pixel. La taille et la résolution intrinsèques de l'image peuvent être explicitement spécifiées dans les données {{Glossary("EXIF")}}. La densité de pixels intrinsèque peut également être définie pour les images à l'aide de l'attribut {{htmlattrxref("srcset", "img")}} (notez que si les deux mécanismes sont utilisés, la valeur <code>srcset</code> est appliquée "par-dessus" la valeur EXIF).</p>
diff --git a/files/fr/glossary/lossless_compression/index.html b/files/fr/glossary/lossless_compression/index.html
index b444a78fa4..56aef4c83d 100644
--- a/files/fr/glossary/lossless_compression/index.html
+++ b/files/fr/glossary/lossless_compression/index.html
@@ -15,7 +15,7 @@ original_slug: Glossaire/Compression_sans_perte
 
 <p>{{glossary("Lossy compression")}}, en revanche, résulte en une approximation inexacte, puisque certaines données du fichier d'origine ont été abandonnées, faisant de la compression avec perte une méthode irréversible.</p>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <p><a href="/en-US/docs/Glossary">Glossary</a></p>
 
 <ol>
diff --git a/files/fr/glossary/same-origin_policy/index.html b/files/fr/glossary/same-origin_policy/index.html
index 0a735f4b04..793dbbc73d 100644
--- a/files/fr/glossary/same-origin_policy/index.html
+++ b/files/fr/glossary/same-origin_policy/index.html
@@ -8,7 +8,7 @@ original_slug: Glossaire/Same-origin_policy
 
 <p>Voir <a href="https://developer.mozilla.org/fr/docs/Web/Security/Same_origin_policy_for_JavaScript">Same origin policy</a> pour plus d’informations.</p>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ul>
  <li><a href="/fr/docs/Glossary">Glossaire MDN</a> :
 
diff --git a/files/fr/glossary/spa/index.html b/files/fr/glossary/spa/index.html
new file mode 100644
index 0000000000..f6426919fc
--- /dev/null
+++ b/files/fr/glossary/spa/index.html
@@ -0,0 +1,38 @@
+---
+title: Application monopage (SPA)
+slug: Glossary/SPA
+translation_of: 'Glossary/SPA'
+---
+<p>Une application monopage ou SPA (« <i>Single-page application</i> » en anglais) est une implémentation d'application web qui ne charge qu'un seul document web, puis met à jour le contenu du corps de ce document via des API JavaScript telles que <a href="/fr/docs/Web/API/XMLHttpRequest"><code>XMLHttpRequest</code></a> et <a href="/fr/docs/Web/API/Fetch_API">Fetch</a> lorsqu'un contenu différent doit être affiché.</p>
+
+<p>Cela permet donc aux utilisateurs d'utiliser des sites web sans charger de nouvelles pages entières à partir du serveur, ce qui peut entraîner des gains de performances et une expérience plus dynamique, avec certains inconvénients tels que le référencement (SEO), plus d'efforts nécessaires pour maintenir l'état, mettre en œuvre la navigation et mesurer les performances.</p>
+
+<h2 id="learn_more">En apprendre plus</h2>
+
+<h3 id="general_knowledge">Connaissance générale</h3>
+
+<p>Certains des frameworks SPA les plus populaires incluent:</p>
+
+<ul>
+ <li><a href="https://reactjs.org/">React</a></li>
+ <li><a href="https://angular.io/">Angular</a></li>
+ <li><a href="https://vuejs.org/">Vue.JS</a></li>
+</ul>
+
+<section id="Quick_links">
+<ol>
+ <li>Articles wikipedia
+  <ol>
+   <li>{{Interwiki("wikipedia", "Application web monopage")}}</li>
+  </ol>
+ </li>
+ <li><a href="/fr/docs/Glossary">Glossaire</a>
+  <ol>
+   <li><a href="/fr/docs/Glossary/API">API</a></li>
+   <li><a href="/fr/docs/Glossary/AJAX">AJAX</a></li>
+   <li><a href="/fr/docs/Glossary/JavaScript">JavaScript</a></li>
+  </ol>
+ </li>
+ <li><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks">Comprendre les frameworks JavaScript côté client</a></li>
+</ol>
+</section>
diff --git a/files/fr/glossary/type_coercion/index.html b/files/fr/glossary/type_coercion/index.html
index e5d5d1c3b3..1fc965a03a 100644
--- a/files/fr/glossary/type_coercion/index.html
+++ b/files/fr/glossary/type_coercion/index.html
@@ -24,7 +24,7 @@ console.log(somme);</pre>
 
 <pre class="brush: js notranslate">somme = Number(valeur1) + valeur2;</pre>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li><a href="/en-US/docs/Glossary">Glossary</a>
 
diff --git a/files/fr/glossary/web_performance/index.html b/files/fr/glossary/web_performance/index.html
new file mode 100644
index 0000000000..59df3daa30
--- /dev/null
+++ b/files/fr/glossary/web_performance/index.html
@@ -0,0 +1,13 @@
+---
+title: Performance web
+slug: Glossary/Web_performance
+translation_of: 'Glossary/Web_performance'
+---
+<p>La <strong>performance web</strong> est le temps objectif entre le moment où une demande de contenu est faite et l'affichage de ce contenu dans le navigateur de la personne visitant le site. Cela regroupe les temps de rendu objectifs et l'expérience utilisateur subjective du temps de chargement et de l'exécution de la page. Objectivement, c'est le temps, mesurable en millisecondes, qu'il faut pour que la page web ou l'application web soit téléchargée, représentée dans le navigateur web de l'utilisateur et pour qu'elle devienne réactive et interactive. Les mesures de performances s'attachent également à mesurer le nombre d'images par seconde et la période lors de laquelle le flux principal n'est pas disponible pour les interactions avec la personne consultant la page. Subjectivement, c'est aussi une question de perception du visiteur qui estimera si le temps de chargement, entre le moment où il demande le contenu et celui où il voit que ce contenu demandé est disponible et utilisable, semble plutôt lent ou plutôt rapide.</p>
+
+<h2 id="learn_more">En savoir plus</h2>
+
+<ul>
+  <li><a href="/fr/docs/Learn/Performance">En savoir plus sur les performances web</a></li>
+  <li><a href="/fr/docs/Glossary/Perceived_performance">Performances perçues (glossaire)</a></li>
+</ul>
diff --git a/files/fr/glossary/web_server/index.html b/files/fr/glossary/web_server/index.html
index 7befc0cad9..5c29bc8ee4 100644
--- a/files/fr/glossary/web_server/index.html
+++ b/files/fr/glossary/web_server/index.html
@@ -9,7 +9,7 @@ original_slug: Glossaire/Serveur_Web
 ---
 <p>Un serveur Web est un logiciel qui s'exécute souvent sur un serveur matériel offrant un service à un utilisateur, généralement appelé client. Un serveur, par contre, est un matériel qui vit dans une pièce remplie d'ordinateurs, communément appelée centre de données.</p>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ul>
  <li><a href="/en-US/docs/Learn/Common_questions/What_is_a_web_server">Introduction to serversIntroduction aux serveurs</a></li>
  <li>{{Interwiki("wikipedia", "Server (computing)")}} sur Wikipédia</li>
diff --git a/files/fr/glossary/whitespace/index.html b/files/fr/glossary/whitespace/index.html
index 624d108ecb..a7e0d55330 100644
--- a/files/fr/glossary/whitespace/index.html
+++ b/files/fr/glossary/whitespace/index.html
@@ -19,7 +19,7 @@ original_slug: Glossaire/Whitespace
 
 <p><a href="https://www.ecma-international.org/ecma-262/6.0/#sec-white-space">ECMAScript® 2015 Language Specification</a> spécifie plusieurs points de code Unicode sous forme de white space: U+0009 CHARACTER TABULATION &lt;TAB&gt;, U+000B LINE TABULATION &lt;VT&gt;, U+000C FORM FEED &lt;FF&gt;, U+0020 SPACE &lt;SP&gt;, U+00A0 NO-BREAK SPACE &lt;NBSP&gt;, U+FEFF ZERO WIDTH NO-BREAK SPACE &lt;ZWNBSP&gt; et autre catégorie “Zs” Tout autre point de code Unicode “Séparateur, esspace” &lt;USP&gt;. Ces caractères sont généralement inutiles pour la fonctionnalité du code.</p>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li>Spécifications
   <ol>
diff --git a/files/fr/learn/css/building_blocks/backgrounds_and_borders/index.html b/files/fr/learn/css/building_blocks/backgrounds_and_borders/index.html
index 27b6617080..33bf88edac 100644
--- a/files/fr/learn/css/building_blocks/backgrounds_and_borders/index.html
+++ b/files/fr/learn/css/building_blocks/backgrounds_and_borders/index.html
@@ -6,24 +6,24 @@ original_slug: Apprendre/CSS/Building_blocks/Backgrounds_and_borders
 ---
 <div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/The_box_model", "Learn/CSS/Building_blocks/Handling_different_text_directions", "Learn/CSS/Building_blocks")}}</div>
 
-<p>Dans cette leçon, nous verrons quelques unes des mises en forme créatives autorisées par les bordures et les arrière-plans CSS. On peut ajouter des dégradés, des images de fond, et des coins arrondis, les arrière-plans et les bordures répondent à de nombreux besoins de mise en forme CSS.</p>
+<p>Dans cette leçon, nous verrons quelques-unes des mises en forme créatives autorisées par les bordures et les arrière-plans CSS. On peut ajouter des dégradés, des images de fond, et des coins arrondis, les arrière-plans et les bordures répondent à de nombreux besoins de mise en forme CSS.</p>
 
 <table class="learn-box standard-table">
  <tbody>
   <tr>
-   <th scope="row">Prérequis:</th>
-   <td>Compétences informatique basiques , <a href="/fr/docs/Learn/Getting_started_with_the_web/Installing_basic_software">logicels de base installés</a>, connaissance simple en <a href="/fr/docs/Learn/Getting_started_with_the_web/Dealing_with_files">manipulation de fichiers</a>, les bases du HTML (voir <a href="/fr/docs/Learn/HTML/Introduction_to_HTML">Introduction au HTML</a>), et une esquisse du fonctionnement du CSS (voir <a href="/fr/docs/Learn/CSS/First_steps">premiers pas en CSS</a>. )</td>
+   <th scope="row">Prérequis&nbsp;:</th>
+   <td>Compétences informatique basiques, <a href="/fr/docs/Learn/Getting_started_with_the_web/Installing_basic_software">logiciels de base installés</a>, connaissance simple en <a href="/fr/docs/Learn/Getting_started_with_the_web/Dealing_with_files">manipulation de fichiers</a>, les bases du HTML (voir <a href="/fr/docs/Learn/HTML/Introduction_to_HTML">Introduction au HTML</a>), et une esquisse du fonctionnement du CSS (voir <a href="/fr/docs/Learn/CSS/First_steps">premiers pas en CSS</a>. )</td>
   </tr>
   <tr>
-   <th scope="row">Objectif:</th>
+   <th scope="row">Objectif&nbsp;:</th>
    <td>Apprendre comment mettre en forme l'arrière-plan et les bordures.</td>
   </tr>
  </tbody>
 </table>
 
-<h2 id="Mettre_en_forme_larrière-plan_avec_CSS">Mettre en forme l'arrière-plan avec CSS</h2>
+<h2 id="styling_backgrounds_in_css">Mettre en forme l'arrière-plan avec CSS</h2>
 
-<p>La propriété CSS {{cssxref("background")}} est un raccourci pour une famille de propriétés concernant l'arrière-plan. Nous les explorons dans cette partie. On peut rencontrer dans une feuille de style des déclarations de la propriété <code>background</code> difficiles à analyser, tant le nombre de valeurs qu'on peut lui passer est important.</p>
+<p>La propriété CSS <a href="/fr/docs/Web/CSS/background"><code>background</code></a> est un raccourci pour une famille de propriétés concernant l'arrière-plan. Nous les explorons dans cette partie. On peut rencontrer dans une feuille de style des déclarations de la propriété <code>background</code> difficiles à analyser, tant le nombre de valeurs qu'on peut lui passer est important.</p>
 
 <pre class="brush: css">.box {
   background: linear-gradient(105deg, rgba(255,255,255,.2) 39%, rgba(51,56,57,1) 96%) center center / 400px 200px no-repeat,
@@ -32,29 +32,29 @@ original_slug: Apprendre/CSS/Building_blocks/Backgrounds_and_borders
 
 <p>Nous reviendrons un peu plus loin sur le fonctionnement des raccourcis. Pour l'instant, passons en revue les propriétés CSS des arrière-plans.</p>
 
-<h3 id="Couleur_de_fond">Couleur de fond</h3>
+<h3 id="background_colors">Couleurs d'arrière-plan</h3>
 
-<p>La propriété {{cssxref("background-color")}} définit la couleur d'arrière-plan d'un élément HTML. La propriété accepte comme valeur n'importe quelle <code><a href="/fr/docs/Web/CSS/color_value">&lt;color&gt;</a></code>. La <code>background-color</code> s'étend sous le contenu dans la zone de remplissage (padding box) de l'élément.</p>
+<p>La propriété <a href="/fr/docs/Web/CSS/background-color"><code>background-color</code></a> définit la couleur d'arrière-plan d'un élément HTML. La propriété accepte comme valeur n'importe quelle <code><a href="/fr/docs/Web/CSS/color_value">&lt;color&gt;</a></code>. La <code>background-color</code> s'étend sous le contenu dans la zone de remplissage (padding box) de l'élément.</p>
 
-<p>Dans l'exemple ci-dessous, nous ajoutons des couleurs de fond à une boîte, un titre et un élément {{htmlelement("span")}}.</p>
+<p>Dans l'exemple ci-dessous, nous ajoutons des couleurs de fond à une boîte, un titre et un élément <a href="/fr/docs/Web/HTML/Element/span"><code>&lt;span&gt;</code></a>.</p>
 
 <p><strong>Expérimentez avec ce code, en faisant varier les valeurs <a href="/fr/docs/Web/CSS/color_value">&lt;color&gt;</a> dans les différentes déclarations.</strong></p>
 
-<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/color.html", '100%', 800)}}</p>
+<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/color.html", '100%', 700)}}</p>
 
-<h3 id="Images_de_fond">Images de fond</h3>
+<h3 id="background_images">Images d'arrière-plan</h3>
 
-<p>La propriété {{cssxref("background-image")}} permet d'afficher une image dans l'arrière-plan d'un élément. L'exemple ci-dessous montre deux boîtes — l'une avec une image de fond trop grande, l'autre avec comme fond une petite image représentant une étoile.</p>
+<p>La propriété <a href="/fr/docs/Web/CSS/background-image"><code>background-image</code></a> permet d'afficher une image dans l'arrière-plan d'un élément. L'exemple ci-dessous montre deux boîtes — l'une avec une image de fond trop grande (<a href="https://mdn.github.io/css-examples/learn/backgrounds-borders/balloons.jpg">balloons.jpg</a>), l'autre avec comme fond une petite image représentant une étoile (<a href="https://mdn.github.io/css-examples/learn/backgrounds-borders/star.png">star.png</a>).</p>
 
-<p>Cet exemple illustre deux points concernant l'utilisation d'images de fond. Par défaut, une image trop large n'est pas redimensionnée pour correspondre aux dimension de la boîte, on n'en voit qu'un coin, alors qu'un image de fond ne remplissant pas la boîte sera automatiquement répétée en pavage pour occuper tout l'espace disponible. Dans l'exemple, l'image d'origine est juste une étoile.</p>
+<p>Cet exemple illustre deux points concernant l'utilisation d'images de fond. Par défaut, une image trop large n'est pas redimensionnée pour correspondre aux dimensions de la boîte, on n'en voit qu'un coin, alors qu'une image de fond ne remplissant pas la boîte sera automatiquement répétée en pavage pour occuper tout l'espace disponible. Dans l'exemple, l'image d'origine est juste une étoile.</p>
 
-<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/background-image.html", '100%', 800)}}</p>
+<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/background-image.html", '100%', 700)}}</p>
 
-<p><strong>Si on spécifie une couleur de fond en plus de l'image de fond, l'image s'affiche par dessus la couleur. Expérimentez ce comportement en ajoutant une propriété </strong><code>background-color</code><strong> dans l'exemple ci-dessus.</strong></p>
+<p><strong>Si on spécifie une couleur de fond en plus de l'image de fond, l'image s'affiche par-dessus la couleur. Expérimentez ce comportement en ajoutant une propriété </strong><code>background-color</code><strong> dans l'exemple ci-dessus.</strong></p>
 
-<h4 id="Contrôler_le_background-repeat">Contrôler le background-repeat</h4>
+<h4 id="controlling_background-repeat">Contrôler la répétition de l'arrière-plan</h4>
 
-<p>La propriété {{cssxref("background-repeat")}} permet de contrôler la répétition d'image pour former des pavages. Les valeurs possibles sont :</p>
+<p>La propriété <a href="/fr/docs/Web/CSS/background-repeat"><code>background-repeat</code></a> permet de contrôler la répétition d'image pour former des pavages. Les valeurs possibles sont :</p>
 
 <ul>
  <li><code>no-repeat</code> — aucune répétition de l'arrière-plan.</li>
@@ -63,13 +63,13 @@ original_slug: Apprendre/CSS/Building_blocks/Backgrounds_and_borders
  <li><code>repeat</code> — comportement par défaut : répétition dans les deux directions.</li>
 </ul>
 
-<p><strong>Expérimentez l'effet de ces valeurs dans l'exemple ci-dessous. La valeur est fixée à <code>no-repeat</code>, une seule étoile apparaît donc. Remplacez par <code>repeat-x</code> et <code>repeat-y</code><strong> et observez.</strong></p>
+<p><strong>Expérimentez l'effet de ces valeurs dans l'exemple ci-dessous. La valeur est fixée à <code>no-repeat</code>, une seule étoile apparaît donc. Remplacez par <code>repeat-x</code> et <code>repeat-y</code> et observez.</strong></p>
 
-<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/repeat.html", '100%', 800)}}</p>
+<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/repeat.html", '100%', 600)}}</p>
 
-<h4 id="Dimensionner_limage_de_fond">Dimensionner l'image de fond</h4>
+<h4 id="sizing_the_background_image">Dimensionner l'image de fond</h4>
 
-<p>Dans l'exemple ci-dessus on voit qu'une image d'arrière-plan est recadrée quand elle dépasse de l'élément dont elle est le fond. Dans un tel cas, la propriété {{cssxref("background-size")}} — avec comme valeur une  <a href="/fr/docs/Web/CSS/length">longueur</a> ou un <a href="/fr/docs/Web/CSS/percentage">pourcentage</a>, permet d'adapter l'image à l'élément pour en occuper tout le fond.</p>
+<p>Dans l'exemple ci-dessus on voit qu'une image d'arrière-plan est recadrée quand elle dépasse de l'élément dont elle est le fond. Dans un tel cas, la propriété <a href="/fr/docs/Web/CSS/background-size"><code>background-size</code></a> — avec comme valeur une  <a href="/fr/docs/Web/CSS/length">longueur</a> ou un <a href="/fr/docs/Web/CSS/percentage">pourcentage</a>, permet d'adapter l'image à l'élément pour en occuper tout le fond.</p>
 
 <p>On peut aussi utiliser les mots-clé :</p>
 
@@ -90,9 +90,9 @@ original_slug: Apprendre/CSS/Building_blocks/Backgrounds_and_borders
 
 <p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/size.html", '100%', 800)}}</p>
 
-<h4 id="Positionner_limage_de_fond">Positionner l'image de fond</h4>
+<h4 id="positioning_the_background_image">Positionner l'image de fond</h4>
 
-<p>La propriété {{cssxref("background-position")}} permet de choisir la position de l'arrière-plan à l'intérieur de la boîte dans laquelle il est appliqué. On utilise pour cela un système de coordonnées avec l'origine <code>(0,0)</code> au coin en haut à gauche de la boîte, l'axe (<code>x</code>) étant horizontal, l'axe (<code>y</code>) vertical.</p>
+<p>La propriété <a href="/fr/docs/Web/CSS/background-position"><code>background-position</code></a> permet de choisir la position de l'arrière-plan à l'intérieur de la boîte dans laquelle il est appliqué. On utilise pour cela un système de coordonnées avec l'origine <code>(0,0)</code> au coin en haut à gauche de la boîte, l'axe (<code>x</code>) étant horizontal, l'axe (<code>y</code>) vertical.</p>
 
 <div class="blockIndicator note">
 <p><strong>Note </strong>: La valeur par défaut de <code>background-position</code> est <code>(0,0)</code>.</p>
@@ -100,7 +100,7 @@ original_slug: Apprendre/CSS/Building_blocks/Backgrounds_and_borders
 
 <p>Les valeurs les plus communes pour <code>background-position</code> se présentent sous la forme d'un couple — une valeur horizontale suivie d'une valeur verticale.</p>
 
-<p>Vous pouvez utiliser les mots-clé tels que <code>top</code> et <code>right</code> (vous trouverez les autres valeurs possibles sur la page {{cssxref("background-image")}}):</p>
+<p>Vous pouvez utiliser les mots-clé tels que <code>top</code> et <code>right</code> (vous trouverez les autres valeurs possibles sur la page <a href="/fr/docs/Web/CSS/background-image"><code>background-image</code></a>)&nbsp;:</p>
 
 <pre class="brush: css">.box {
   background-image: url(star.png);
@@ -108,7 +108,7 @@ original_slug: Apprendre/CSS/Building_blocks/Backgrounds_and_borders
   background-position: top center;
 }</pre>
 
-<p>Et <a href="/fr/docs/Web/CSS/length">Longueurs</a>, ou <a href="/fr/docs/Web/CSS/percentage">pourcentages</a> :</p>
+<p>Ainsi que des valeurs de <a href="/fr/docs/Web/CSS/length">longueurs</a>, ou des <a href="/fr/docs/Web/CSS/percentage">pourcentages</a>&nbsp;:</p>
 
 <pre class="brush: css">.box {
   background-image: url(star.png);
@@ -116,7 +116,7 @@ original_slug: Apprendre/CSS/Building_blocks/Backgrounds_and_borders
   background-position: 20px 10%;
 }</pre>
 
-<p>On peut utiliser simultanément mots-clé, dimensions et pourcentages, par exemple :</p>
+<p>On peut utiliser simultanément mots-clé, dimensions et pourcentages, par exemple&nbsp;:</p>
 
 <pre class="brush: css">.box {
   background-image: url(star.png);
@@ -124,9 +124,9 @@ original_slug: Apprendre/CSS/Building_blocks/Backgrounds_and_borders
   background-position: top 20px;
 }</pre>
 
-<p>La syntaxe à quatre valeurs enfin permet d'indiquer la distance depuis certains bords de la boîte — dans ce cas, la longueur correspond à un décalage par rapport à la valeur précédene. Par exemple dans le CSS ci-dessous on positionne l'arrière-plan à 20px du haut et à 10px de la droite :</p>
+<p>La syntaxe à quatre valeurs enfin permet d'indiquer la distance depuis certains bords de la boîte — dans ce cas, la longueur correspond à un décalage par rapport à la valeur précédente. Par exemple dans le CSS ci-dessous on positionne l'arrière-plan à 20px du haut et à 10px de la droite :</p>
 
-<pre class="brush: css notranslate">.box {
+<pre class="brush: css">.box {
   background-image: url(star.png);
   background-repeat: no-repeat;
   background-position: top 20px right 10px;
@@ -134,96 +134,96 @@ original_slug: Apprendre/CSS/Building_blocks/Backgrounds_and_borders
 
 <p><strong>Dans l'exemple ci-dessous, modifiez les valeurs pour déplacer l'étoile à l'intérieur de la boîte.</strong></p>
 
-<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/position.html", '100%', 800)}}</p>
+<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/position.html", '100%', 600)}}</p>
 
 <div class="note">
-<p><strong>Note :</strong> <code>background-position</code> est un raccourci pour{{cssxref("background-position-x")}} et {{cssxref("background-position-y")}}, qui permettent de fixer individuellement les positions sur chaque axe.</p>
+<p><strong>Note :</strong> <code>background-position</code> est un raccourci pour<a href="/fr/docs/Web/CSS/background-position-x"><code>background-position-x</code></a> et <a href="/fr/docs/Web/CSS/background-position-y"><code>background-position-y</code></a>, qui permettent de fixer individuellement les positions sur chaque axe.</p>
 </div>
 
-<h3 id="Arrière-plan_dégradé">Arrière-plan dégradé</h3>
+<h3 id="gradient_backgrounds">Utiliser un dégradé comme arrière-plan</h3>
 
-<p>Un dégradé — quand on l'utilise pour arrière-plan — se comporte comme une image, il se paramètre aussi avec la propriété {{cssxref("background-image")}}.</p>
+<p>Un dégradé — quand on l'utilise pour arrière-plan — se comporte comme une image, il se paramètre aussi avec la propriété <a href="/fr/docs/Web/CSS/background-image"><code>background-image</code></a>.</p>
 
-<p>Vous en apprendrez plus sur les différents types de dégradés et tout ce qu'on peut faire avec sur la page MDN consacrée au type <code><a href="/fr/docs/Web/CSS/gradient">&lt;gradient&gt;</a></code>. Une manière amusante de découvrir les dégradés est d'utiliser l'un des nombreux générateurs de dégradés CSS disponibles en ligne, par exemple <a href="https://cssgradient.io/">celui là</a>. Créez votre dégradé puis copiez-collez le code source qui l'a généré.</p>
+<p>Vous en apprendrez plus sur les différents types de dégradés et tout ce qu'on peut faire avec sur la page MDN consacrée au type <code><a href="/fr/docs/Web/CSS/gradient">&lt;gradient&gt;</a></code>. Une manière amusante de découvrir les dégradés est d'utiliser l'un des nombreux générateurs de dégradés CSS disponibles en ligne, par exemple <a href="https://cssgradient.io/">celui-là</a>. Créez votre dégradé puis copiez-collez le code source qui l'a généré.</p>
 
 <p>Essayez différents dégradés dans l'exemple ci-dessous. Dans les deux boîtes on trouve respectivement un dégradé linéaire étendu sur toute la boîte et un dégradé circulaire de taille donné, qui du coup se répète.</p>
 
-<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/gradients.html", '100%', 800)}}</p>
+<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/gradients.html", '100%', 650)}}</p>
 
-<h3 id="Images_de_fond_multiples">Images de fond multiples</h3>
+<h3 id="multiple_background_images">Images de fond multiples</h3>
 
 <p>Il est aussi possible d'ajouter plusieurs images en arrière-plan — il suffit de spécifier plusieurs valeurs pour <code>background-image</code>, chacune séparé par une virgule.</p>
 
-<p>Quand vous faîtes cela, il est possible de se retrouver avec plusieurs arrière-plans qui se chevauchent. Les arrière-plans se superposeront les uns sur les autres, avec le dernier se retrouvant sur le dessus, chacun suivant à leur tour, jusqu'au premier.</p>
+<p>Quand vous faites cela, il est possible de se retrouver avec plusieurs arrière-plans qui se chevauchent. Les arrière-plans se superposeront les uns sur les autres, avec le dernier se retrouvant sur le dessus, chacun suivant à leur tour, jusqu'au premier.</p>
 
 <div class="note">
-<p><strong>Note :</strong> on peut joyeusement mélanger gradients et images de fond classiques.</p>
+<p><strong>Note :</strong> On peut joyeusement mélanger dégradés et images de fond classiques.</p>
 </div>
 
-<p>Les autres propriété <code>background-*</code> peuvent aussi avoir une série de valeurs séparées de virgules, de la même manière que <code>background-image</code>:</p>
+<p>Les autres propriétés <code>background-*</code> peuvent aussi avoir une série de valeurs séparées de virgules, de la même manière que <code>background-image</code>:</p>
 
-<pre class="brush: css notranslate">background-image: url(image1.png), url(image2.png), url(image3.png), url(image1.png);
+<pre class="brush: css">background-image: url(image1.png), url(image2.png), url(image3.png), url(image1.png);
 background-repeat: no-repeat, repeat-x, repeat;
 background-position: 10px 20px,  top right;</pre>
 
-<p>Chaque valeur des différentes propriétés va correspondre aux valeurs placées à la même position dans les autres propriétés. Au dessus, par exemple, la valeur <code>background-repeat</code> de l' <code>image1</code> sera <code>no-repeat</code>. Cependant, qu'arrive-t-il quand différentes propriétés ont différents nombres de valeurs? La réponse est que s'il y a moins de valeurs, elles seront réutilisées — dans l'exemple au-dessus il y a quatre images de fond mais seulement deux valeurs <code>background-position</code>. Les deux premières valeurs seront appliquées aux deux premières images, puis elles seront réutilisées pour les images suivantes — l' <code>image3</code> recevra la première valeur, et l' <code>image4</code> recevra la seconde valeur.</p>
+<p>Chaque valeur des différentes propriétés va correspondre aux valeurs placées à la même position dans les autres propriétés. Au-dessus, par exemple, la valeur <code>background-repeat</code> de l' <code>image1</code> sera <code>no-repeat</code>. Cependant, qu'arrive-t-il quand différentes propriétés ont différents nombres de valeurs? La réponse est que s'il y a moins de valeurs, elles seront réutilisées — dans l'exemple au-dessus il y a quatre images de fond mais seulement deux valeurs <code>background-position</code>. Les deux premières valeurs seront appliquées aux deux premières images, puis elles seront réutilisées pour les images suivantes — l'<code>image3</code> recevra la première valeur, et l'<code>image4</code> recevra la seconde valeur.</p>
 
-<p><strong>Jouons un peu. Dans l'exemple ci-dessous j'ai inclus deux images. To demonstrate the stacking order, try switching which background image comes first in the list. Or play with the other properties to change the position, size, or repeat values.</strong></p>
+<p><strong>Jouons un peu. Dans l'exemple ci-dessous j'ai inclus deux images. Afin de visualiser l'ordre d'empilement, essayez d'alterner la première image d'arrière-plan dans la liste. Vous pouvez aussi modifier les autres propriétés afin de changer la position, la taille ou la répétition.</strong></p>
 
-<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/multiple-background-image.html", '100%', 800)}}</p>
+<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/multiple-background-image.html", '100%', 600)}}</p>
 
-<h3 id="Attachement_du_fond">Attachement du fond</h3>
+<h3 id="background_attachment">Défilement de l'arrière-plan</h3>
 
-<p>Une autre option que nous avons à notre disposition pour les arrières-plans est de spécifier comment ils défilent quand le contenu défile lui-même. C'est contrôlé grâce à la propriété {{cssxref("background-attachment")}} , qui peut prendre ces valeurs:</p>
+<p>Une autre option que nous avons à notre disposition pour les arrières-plans est de spécifier comment ils défilent quand le contenu défile lui-même. Ce comportement est contrôlé grâce à la propriété <a href="/fr/docs/Web/CSS/background-attachment"><code>background-attachment</code></a> , qui peut prendre ces valeurs:</p>
 
 <ul>
- <li><code>scroll</code>: Causes the element's background to scroll when the page is scrolled. If the element content is scrolled, the background does not move. In effect, the background is fixed to the same position on the page, so it scrolls as the page scrolls.</li>
- <li><code>fixed</code>: Causes an element's background to be fixed to the viewport, so that it doesn't scroll when the page or element content is scrolled. It will always remain in the same position on the screen.</li>
- <li><code>local</code>: This value was added later on (it is only supported in Internet Explorer 9+, whereas the others are supported in IE4+) because the <code>scroll</code> value is rather confusing and doesn't really do what you want in many cases. The <code>local</code> value fixes the background to the element it is set on, so when you scroll the element, the background scrolls with it.</li>
+ <li><code>scroll</code>&nbsp;: L'arrière-plan de l'élément défile lorsqu'on fait défiler la page. Si le contenu de l'élément défile, l'arrière-plan ne bouge pas. Dans la pratique, l'effet obtenu est que l'arrière-plan est fixé à la position de la page et défile comme elle.</li>
+ <li><code>fixed</code>&nbsp;: L'arrière-plan de l'élément est fixe dans la zone d'affichage (<i lang="en">viewport</i>) et il ne défile pas lorsqu'on fait défiler ou la page ou le contenu de l'élément. L'arrière-plan reste toujours à la même position sur l'écran.</li>
+ <li><code>local</code>&nbsp;: Cette valeur fut ajoutée plus tard en raison de la confusion engendrée par la valeur <code>scroll</code> et son comportement qui ne correspond pas aux cas d'usage. <code>local</code> permet de fixer l'arrière-plan sur l'élément sur lequel il est défini afin que, lorsqu'on fait défiler l'élément, l'arrière-plan défile avec lui.</li>
 </ul>
 
-<p>The {{cssxref("background-attachment")}} property only has an effect when there is content to scroll, so we've made a demo to demonstrate the differences between the three values — have a look at <a href="https://mdn.github.io/learning-area/css/styling-boxes/backgrounds/background-attachment.html">background-attachment.html</a> (also <a href="https://github.com/mdn/learning-area/tree/master/css/styling-boxes/backgrounds">see the source code</a> here).</p>
+<p>La propriété <a href="/fr/docs/Web/CSS/background-attachment"><code>background-attachment</code></a> n'a d'effet que lorsque le contenu défile. Pour observer cet effet, nous avons construit une démo afin d'illustrer les différences entre les trois valeurs : <a href="https://mdn.github.io/learning-area/css/styling-boxes/backgrounds/background-attachment.html">background-attachment.html</a> (vous pouvez également consulter <a href="https://github.com/mdn/learning-area/tree/master/css/styling-boxes/backgrounds">le code source de cette démo</a>).</p>
 
-<h3 id="Utiliser_la_propriété_raccourci_background">Utiliser la propriété raccourci background</h3>
+<h3 id="using_the_background_shorthand_property">Utiliser la propriété raccourcie background</h3>
 
-<p>As I mentioned at the beginning of this lesson, you will often see backgrounds specified using the {{cssxref("background")}} property. This shorthand lets you set all of the different properties at once.</p>
+<p>Comme mentionné au début de cet article, vous verrez souvent des arrières-plans définis grâce à la propriété <a href="/fr/docs/Web/CSS/background"><code>background</code></a>. Cette propriété raccourcie permet de définir les différentes propriétés en une seule déclaration.</p>
 
-<p>If using multiple backgrounds, you need to specify all of the properties for the first background, then add your next background after a comma. In the example below we have a gradient with a size and position, then an image background with <code>no-repeat</code> and a position, then a color.</p>
+<p>Si vous utilisez plusieurs arrières-plans, vous devrez indiquer toutes les propriétés pour le premier arrière-plan puis ajouter l'arrière-plan suivant après une virgule. Dans l'exemple qui suit, on a un dégradé avec une taille et une position puis une image d'arrière-plan avec <code>no-repeat</code> et un position et enfin une couleur d'arrière-plan.</p>
 
-<p>There are a few rules that need to be followed when writing background image shorthand values, for example:</p>
+<p>Quelques règles sont à respecter lorsqu'on déclare des images d'arrière-plan avec cette propriété raccourcie :</p>
 
 <ul>
- <li>A <code>background-color</code> may only be specified after the final comma.</li>
- <li>The value for <code>background-size</code> may only be included immediately after <code>background-position</code>, separated with the '/' character, like this: <code>center/80%</code>.</li>
+ <li>La valeur pour <code>background-color</code> ne peut être définie qu'après la virgule finale.</li>
+ <li>La valeur pour <code>background-size</code> ne peut être incluse qu'immédiatement après celle <code>background-position</code> en la séparant de celle-ci avec une barre oblique (« / »), par exemple : <code>center/80%</code>.</li>
 </ul>
 
-<p>Take a look at the MDN page for {{cssxref("background")}} to see all of the considerations.</p>
+<p>N'hésitez pas à consulter la page de documentation pour <a href="/fr/docs/Web/CSS/background"><code>background</code></a> qui détaille ces différents points.</p>
 
-<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/background.html", '100%', 800)}}</p>
+<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/background.html", '100%', 850)}}</p>
 
-<h3 id="Arrière-plans_et_accessibilité">Arrière-plans et accessibilité</h3>
+<h3 id="accessibility_considerations_with_backgrounds">Arrière-plans et accessibilité</h3>
 
-<p>Quand on place un texte sur une image ou une couleur de fond, il faut s'assurer d'un contraste suffisant pour une bonne lisibilité. Quand un texte est écrit par-dessu une image, déclarez toujours une <code>background-color</code> qui rendra le texte lisible si l'image n'est pas chargée.</p>
+<p>Quand on place un texte sur une image ou une couleur de fond, il faut s'assurer d'un contraste suffisant pour une bonne lisibilité. Quand un texte est écrit par-dessus une image, déclarez toujours une <code>background-color</code> qui rendra le texte lisible si l'image n'est pas chargée.</p>
 
 <p>Les lecteurs d'écran ne traitent pas les images de fond, elles ne doivent donc pas être autre chose que décoratives ; tout contenu important doit faire partie de la page HTML et pas de la mise en forme du fond.</p>
 
-<h2 id="Bordures">Bordures</h2>
+<h2 id="borders">Bordures</h2>
 
-<p>When learning about the Box Model, we discovered how borders affect the size of our box. In this lesson we will look at how to use borders creatively. Typically when we add borders to an element with CSS we use a shorthand property that sets the color, width, and style of the border in one line of CSS.</p>
+<p>Lors de l'apprentissage du modèle de boîte, on a pu voir comment les bordures jouaient un rôle sur la taille de la boîte. Dans cette leçon, nous allons voir comment créer des bordures. Généralement, lorsqu'on ajoute des bordures à un élément avec CSS, on utilise une propriété raccourcie qui définit la couleur, l'épaisseur et le style de la bordure.</p>
 
-<p>We can set a border for all four sides of a box with {{cssxref("border")}}:</p>
+<p>On peut définir une bordure pour les quatre côtés d'une boîte avec la propriété <a href="/fr/docs/Web/CSS/border"><code>border</code></a>&nbsp;:</p>
 
 <pre class="brush: css">*.box {
   border: 1px solid black;
 }*</pre>
 
-<p>Or we can target one edge of the box, for example:</p>
+<p>On peut aussi cibler un seul des côtés de la boîte, par exemple&nbsp;:</p>
 
 <pre class="brush: css">.box {
   border-top: 1px solid black;
 }</pre>
 
-<p>The individual properties for these shorthands would be:</p>
+<p>Les propriétés individuelles équivalentes pour ces notations raccourcies seraient&nbsp;:</p>
 
 <pre class="brush: css">.box {
   border-width: 1px;
@@ -231,7 +231,7 @@ background-position: 10px 20px,  top right;</pre>
   border-color: black;
 }</pre>
 
-<p>And for the longhands:</p>
+<p>Pour la propriété qui concerne un des côtés&nbsp;:</p>
 
 <pre class="brush: css">.box {
   border-top-width: 1px;
@@ -240,34 +240,34 @@ background-position: 10px 20px,  top right;</pre>
 }</pre>
 
 <div class="note">
-<p><strong>Note :</strong> These top, right, bottom, and left border properties also have mapped <em>logical</em> properties which relate to the writing mode of the document (e.g. left-to-right or right-to-left text, or top-to-bottom). We'll be exploring these in the next lesson, which covers <a href="/fr/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">handling different text directions</a>.</p>
+<p><strong>Note :</strong> Ces propriétés pour les bordures des côtés haut, droit, bas et gauche ont également des propriétés équivalentes <em>logiques</em> qui ciblent les différents côtés de la boîte en fonction du mode d'écriture du document (par exemple de gauche à droite, de droite à gauche ou bien encore de haut en bas). Nous aborderons celles-ci dans la prochaine leçon qui traitera <a href="/fr/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">de la directionnalité du texte</a>.</p>
 </div>
 
-<p><strong>There are a variety of styles that you can use for borders. In the example below we have used a different border style for the four sides of my box. Play with the border style, width, and color to see how borders work.</strong></p>
+<p><strong>Il existe différents styles qui peuvent être utilisés pour les bordures. Dans l'exemple qui suit, nous avons utilisé un style différent pour chacun des côtés de la boîte. N'hésitez pas à modifier l'exemple pour modifier le style, l'épaisseur et la couleur afin de voir comment les bordures fonctionnent.</strong></p>
 
-<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/borders.html", '100%', 800)}}</p>
+<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/borders.html", '100%', 750)}}</p>
 
-<h3 id="Coins_arrondis">Coins arrondis</h3>
+<h3 id="rounded_corners">Coins arrondis</h3>
 
-<p>On peut arrondir les coins d'une boîte avec la propriété {{cssxref("border-radius")}} and associated longhands which relate to each corner of the box. Two lengths or percentages may be used as a value, the first value defining the horizontal radius, and the second the vertical radius. In a lot of cases you will only pass in one value, which will be used for both.</p>
+<p>On peut arrondir les coins d'une boîte avec la propriété <a href="/fr/docs/Web/CSS/border-radius"><code>border-radius</code></a> ou les propriétés détaillées correspondantes (une pour chaque coin de la boîte). Cette propriété peut s'utiliser avec deux longueurs ou pourcentages : la première de ces valeurs définit le rayon horizontal et la seconde le rayon vertical. Dans de nombreux cas, on utilisera une seule valeur qui sera alors utilisée pour les deux rayons de courbure.</p>
 
-<p>Par exemple, Pour donner par exemple un rayon de 10px à chacun des quatre coins :</p>
+<p>Par exemple, pour donner par exemple un rayon de 10px à chacun des quatre coins :</p>
 
 <pre class="brush: css">.box {
   border-radius: 10px;
 }</pre>
 
-<p>Ou de donner au coin en haut à droite un rayon horizontal de 1em et un rayon vertical de 10% :</p>
+<p>Ou pour donner au coin en haut à droite un rayon horizontal de 1em et un rayon vertical de 10% :</p>
 
 <pre class="brush: css">.box {
   border-top-right-radius: 1em 10%;
 }</pre>
 
-<p>Dans l'exemple ci-dessus, nous avons d'abord fixé la valeur pour les quatre coins, puis modifié celle du coin en haut à droite. Vous pouvez jouer avec les différentes valeurs pour changer le rendu des coins. Jettez un œil à la page de documentation de {{cssxref("border-radius")}}, vous y trouverez la syntaxe pour les différentes options.</p>
+<p>Dans l'exemple ci-dessus, nous avons d'abord fixé la valeur pour les quatre coins, puis modifié celle du coin en haut à droite. Vous pouvez jouer avec les différentes valeurs pour changer le rendu des coins. Jetez un œil à la page de documentation de <a href="/fr/docs/Web/CSS/border-radius"><code>border-radius</code></a>, vous y trouverez la syntaxe pour les différentes options.</p>
 
-<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/corners.html", '100%', 800)}}</p>
+<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/corners.html", '100%', 750)}}</p>
 
-<h2 id="Jouer_avec_les_arrière-plans_et_les_bordures">Jouer avec les arrière-plans et les bordures</h2>
+<h2 id="test_your_skills">Testez vos compétences&nbsp;!</h2>
 
 <p>Testons vos nouvelles connaissances : en partant de l'exemple fourni plus bas :</p>
 
@@ -277,13 +277,13 @@ background-position: 10px 20px,  top right;</pre>
  <li>Donnez au <code>&lt;h2&gt;</code> une couleur de fond noire semi-transparente, avec un texte en blanc.</li>
 </ol>
 
-<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/task.html", '100%', 800)}}</p>
+<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/task.html", '100%', 700)}}</p>
 
 <div class="note">
 <p><strong>Note </strong>: Vous pouvez <a href="https://github.com/mdn/css-examples/blob/master/learn/solutions.md">jeter un œil à la solution ici</a> — mais essayez d'abord de la trouver par vous-même !</p>
 </div>
 
-<h2 id="Résumé">Résumé</h2>
+<h2 id="summary">Résumé</h2>
 
 <p>Nous avons vu beaucoup de choses dans cette leçon, ajouter un arrière-plan à une boîte ou  une bordure n'est pas si simple. N'hésitez pas à explorer les pages de référence des propriétés rencontrées si vous voulez creuser les points évoqués ici. Chaque page sur MDN vous proposera de nouveaux exemples sur lesquels vous pourrez continuer à vous entraîner et renforcer vos connaissances.</p>
 
@@ -294,23 +294,23 @@ background-position: 10px 20px,  top right;</pre>
 <h2 id="Dans_ce_cours">Dans ce cours</h2>
 
 <ol>
- <li><a href="/fr/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Cascade and inheritance</a></li>
- <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors">CSS selectors</a>
-  <ul>
-   <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Type, class, and ID selectors</a></li>
-   <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Attribute selectors</a></li>
-   <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Pseudo-classes and pseudo-elements</a></li>
-   <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Combinators</a></li>
-  </ul>
- </li>
- <li><a href="/fr/docs/Learn/CSS/Building_blocks/The_box_model">The box model</a></li>
- <li><a href="/fr/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Backgrounds and borders</a></li>
- <li><a href="/fr/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Handling different text directions</a></li>
- <li><a href="/fr/docs/Learn/CSS/Building_blocks/Overflowing_content">Overflowing content</a></li>
- <li><a href="/fr/docs/Learn/CSS/Building_blocks/Values_and_units">Values and units</a></li>
- <li><a href="/fr/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Sizing items in CSS</a></li>
- <li><a href="/fr/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Images, media, and form elements</a></li>
- <li><a href="/fr/docs/Learn/CSS/Building_blocks/Styling_tables">Styling tables</a></li>
- <li><a href="/fr/docs/Learn/CSS/Building_blocks/Debugging_CSS">Debugging CSS</a></li>
- <li><a href="/fr/docs/Learn/CSS/Building_blocks/Organizing">Organizing your CSS</a></li>
-</ol>
+  <li><a href="/fr/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Cascade et héritage</a></li>
+  <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors">Sélecteurs CSS</a>
+   <ul>
+    <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Sélecteurs de classe, de type et d'identifiant</a></li>
+    <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Sélecteurs d'attribut</a></li>
+    <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Pseudo-classes et pseudo-éléments</a></li>
+    <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Combinateurs</a></li>
+   </ul>
+  </li>
+  <li><a href="/fr/docs/Learn/CSS/Building_blocks/The_box_model">Le modèle de boîte</a></li>
+  <li>Arrières-plans et bordures</li>
+  <li><a href="/fr/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Gérer la directionnalité du texte</a></li>
+  <li><a href="/fr/docs/Learn/CSS/Building_blocks/Overflowing_content">Le dépassement du contenu</a></li>
+  <li><a href="/fr/docs/Learn/CSS/Building_blocks/Values_and_units">Valeurs et unités</a></li>
+  <li><a href="/fr/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Dimensionnement des objets en CSS</a></li>
+  <li><a href="/fr/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Images, médias, et formulaires</a></li>
+  <li><a href="/fr/docs/Learn/CSS/Building_blocks/Styling_tables">Mettre en forme les tableaux</a></li>
+  <li><a href="/fr/docs/Learn/CSS/Building_blocks/Debugging_CSS">Déboguer CSS</a></li>
+  <li><a href="/fr/docs/Learn/CSS/Building_blocks/Organizing">Organiser son code CSS</a></li>
+ </ol>
\ No newline at end of file
diff --git a/files/fr/learn/css/building_blocks/selectors/attribute_selectors/index.html b/files/fr/learn/css/building_blocks/selectors/attribute_selectors/index.html
index a32606765a..94b5601bf6 100644
--- a/files/fr/learn/css/building_blocks/selectors/attribute_selectors/index.html
+++ b/files/fr/learn/css/building_blocks/selectors/attribute_selectors/index.html
@@ -1,35 +1,29 @@
 ---
 title: Sélecteurs d'attribut
 slug: Learn/CSS/Building_blocks/Selectors/Attribute_selectors
-tags:
-  - Apprendre
-  - Attribut
-  - CSS
-  - Débutant
-  - Sélecteurs
 translation_of: Learn/CSS/Building_blocks/Selectors/Attribute_selectors
 original_slug: Apprendre/CSS/Building_blocks/Selectors/Sélecteurs_d_atrribut
 ---
 <p>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements", "Learn/CSS/Building_blocks")}}</p>
 
-<p>Dans l'étude de HTML, nous avons vu les attributs d'un élément. En CSS, on peut utiliser ces attributs pour cibler les éléments. Cette leçon vous montre comment.</p>
+<p>Dans l'étude de HTML, nous avons vu les attributs d'un élément. En CSS, on peut utiliser ces attributs pour cibler les éléments. Cette leçon vous montre comment.</p>
 
 <table class="learn-box standard-table">
  <tbody>
   <tr>
-   <th scope="row">Prérequis :</th>
-   <td>Maîtrise élémentaire de l'informatique, <a href="https://developer.mozilla.org/fr/docs/Apprendre/Commencer_avec_le_web/Installation_outils_de_base">suite logicielle de base installée</a>, compétences élémentaires pour <a href="/fr/docs/Apprendre/Commencer_avec_le_web/Gérer_les_fichiers">travailler avec des fichiers</a>, connaissance de base du HTML  (cf. <a href="/fr/docs/Apprendre/HTML/Introduction_à_HTML">Introduction à HTML</a>), et une idée de <a href="/fr/docs/Learn/CSS/First_steps/How_CSS_works">Comment fonctionne CSS</a>.</td>
+   <th scope="row">Prérequis&nbsp;:</th>
+   <td>Maîtrise élémentaire de l'informatique, <a href="/fr/docs/Learn/Getting_started_with_the_web/Installing_basic_software">suite logicielle de base installée</a>, compétences élémentaires pour <a href="/fr/docs/Learn/Getting_started_with_the_web/Dealing_with_files">travailler avec des fichiers</a>, connaissance de base du HTML (cf. <a href="/fr/docs/Learn/HTML/Introduction_to_HTML">Introduction à HTML</a>), et une idée de <a href="/fr/docs/Learn/CSS/First_steps/How_CSS_works">Comment fonctionne CSS</a>.</td>
   </tr>
   <tr>
-   <th scope="row">Objectif :</th>
+   <th scope="row">Objectif&nbsp;:</th>
    <td>Découvrir les sélecteurs d'attribut et comment les utiliser.</td>
   </tr>
  </tbody>
 </table>
 
-<h2 id="Sélecteur_de_présence_et_de_valeur">Sélecteur de présence et de valeur</h2>
+<h2 id="Sélecteur_de_présence_et_de_valeur">Sélecteur de présence et de valeur</h2>
 
-<p>Ces sélecteurs permettent de cibler un élément en fonction de la présence d'un attribut unique (par exemple <code>href</code>), ou sur des correspondances variées avec la valeur d'un attribut donné</p>
+<p>Ces sélecteurs permettent de cibler un élément en fonction de la présence d'un attribut unique (par exemple <code>href</code>), ou sur des correspondances variées avec la valeur d'un attribut donné</p>
 
 <table class="standard-table">
  <thead>
@@ -43,18 +37,18 @@ original_slug: Apprendre/CSS/Building_blocks/Selectors/Sélecteurs_d_atrribut
   <tr>
    <td><code>[<em>attr</em>]</code></td>
    <td><code>a[title]</code></td>
-   <td>Cible les éléments avec un attribut du nom de <em>attr</em> — la valeur entre les crochets droits.</td>
+   <td>Cible les éléments avec un attribut du nom de <em>attr</em> — la valeur entre les crochets droits.</td>
   </tr>
   <tr>
    <td><code>[<em>attr</em>=<em>value</em>]</code></td>
    <td><code>a[href="https://example.com"]</code></td>
-   <td>Cible les éléments dont l'attribut <em>attr</em> a la valeur <em>value</em> — la chaîne entre guillemets.</td>
+   <td>Cible les éléments dont l'attribut <em>attr</em> a la valeur <em>value</em> — la chaîne entre guillemets.</td>
   </tr>
   <tr>
    <td><code>[<em>attr</em>~=<em>value</em>]</code></td>
    <td><code>p[class~="special"]</code></td>
    <td>
-    <p>Cible les éléments avec un attribut <em>attr</em> dont la valeur est exactement <em>value</em>, ou les éléments dont l'attribut <em>attr</em> contient une ou plusieurs valeurs, dont au moins une correspond à <em>value</em>.</p>
+    <p>Cible les éléments avec un attribut <em>attr</em> dont la valeur est exactement <em>value</em>, ou les éléments dont l'attribut <em>attr</em> contient une ou plusieurs valeurs, dont au moins une correspond à <em>value</em>.</p>
 
     <p>Notez que dans une liste de plusieurs valeurs, le séparateur est l'espace.</p>
    </td>
@@ -62,7 +56,7 @@ original_slug: Apprendre/CSS/Building_blocks/Selectors/Sélecteurs_d_atrribut
   <tr>
    <td><code>[<em>attr</em>|=<em>value</em>]</code></td>
    <td><code>div[lang|="zh"]</code></td>
-   <td>Cible les éléments avec un attribut <em>attr</em> dont la valeur peut être exactement <em>value</em> ou peut commencer par <em>value</em> immédiatement suivie d'un trait d'union.</td>
+   <td>Cible les éléments avec un attribut <em>attr</em> dont la valeur peut être exactement <em>value</em> ou peut commencer par <em>value</em> immédiatement suivie d'un trait d'union.</td>
   </tr>
  </tbody>
 </table>
@@ -70,16 +64,16 @@ original_slug: Apprendre/CSS/Building_blocks/Selectors/Sélecteurs_d_atrribut
 <p>Dans l'exemple ci-dessous vous voyez ces sélecteurs en action :</p>
 
 <ul>
- <li>Avec <code>li[class]</code> on cible tout élément <code>&lt;li&gt;</code> possédant un attribut <code>class</code>. On cible ainsi tous les list items sauf le premier.</li>
- <li><code>li[class="a"]</code> cible les <code>&lt;li&gt;</code> appartenant à la classe <code>a</code> et seulement elle. Un élément <code>&lt;li&gt;</code> dans la classe <code>a</code> mais aussi dans une autre classe ne sera pas sélectionné. Ce sélecteur cible le deuxième item de la liste.</li>
- <li><code>li[class~="a"]</code> cible tout élément <code>&lt;li&gt;</code> dont l'attribut <code>class</code> contient <code>a</code> dans sa liste de valeurs (séparées par des espaces). Les items deux et trois de la liste sont sélectionnés.</li>
+ <li>Avec <code>li[class]</code> on cible tout élément <code>&lt;li&gt;</code> possédant un attribut <code>class</code>. On cible ainsi tous les éléments de la liste sauf le premier.</li>
+ <li><code>li[class="a"]</code> cible les <code>&lt;li&gt;</code> appartenant à la classe <code>a</code> et seulement elle. Un élément <code>&lt;li&gt;</code> dans la classe <code>a</code> mais aussi dans une autre classe ne sera pas sélectionné. Ce sélecteur cible le deuxième item de la liste.</li>
+ <li><code>li[class~="a"]</code> cible tout élément <code>&lt;li&gt;</code> dont l'attribut <code>class</code> contient <code>a</code> dans sa liste de valeurs (séparées par des espaces). Les items deux et trois de la liste sont sélectionnés.</li>
 </ul>
 
 <p>{{EmbedGHLiveSample("css-examples/learn/selectors/attribute.html", '100%', 800)}}</p>
 
-<h2 id="Sélecteurs_ciblant_une_sous-chaîne">Sélecteurs ciblant une sous-chaîne </h2>
+<h2 id="Sélecteurs_ciblant_une_sous-chaîne">Sélecteurs ciblant une sous-chaîne </h2>
 
-<p>Ces sélecteurs permettent une sélection plus fine des sous-chaînes à l'intérieur de la valeur de l'attribut. Par exemple, vous avez défini des classes  <code>box-warning</code> et <code>box-error</code>,  vous voulez cibler les classes dont le nom commence par "box-". Le sélecteur d'attribut <code>[class ^= "box-"]</code> est là pour ça.</p>
+<p>Ces sélecteurs permettent une sélection plus fine des sous-chaînes à l'intérieur de la valeur de l'attribut. Par exemple, vous avez défini des classes <code>box-warning</code> et <code>box-error</code>, vous voulez cibler les classes dont le nom commence par "box-". Le sélecteur d'attribut <code>[class ^= "box-"]</code> est là pour ça.</p>
 
 <table class="standard-table">
  <thead>
@@ -93,18 +87,18 @@ original_slug: Apprendre/CSS/Building_blocks/Selectors/Sélecteurs_d_atrribut
   <tr>
    <td><code>[<em>attr</em>^=<em>value</em>]</code></td>
    <td><code>li[class^="box-"]</code></td>
-   <td>élément sélectionné quand la valeur <em>value</em> de l'attribut <em>attr </em>commence par la sous-chaîne <em>value.</em></td>
+   <td>élément sélectionné quand la valeur <em>value</em> de l'attribut <em>attr </em>commence par la sous-chaîne <em>value.</em></td>
   </tr>
   <tr>
    <td><code>[<em>attr</em>$=<em>value</em>]</code></td>
    <td><code>li[class$="-box"]</code></td>
-   <td>élément sélectionné quand la valeur de l'attribut <em>attr </em>finit par la sous-chaîne<em> value.</em> </td>
+   <td>élément sélectionné quand la valeur de l'attribut <em>attr </em>finit par la sous-chaîne<em> value.</em> </td>
   </tr>
   <tr>
    <td><code>[<em>attr</em>*=value<em> </em>]</code></td>
    <td><code>li[class*="box"]</code></td>
    <td>élément sélectionné quand la<br>
-    la sous-chaîne <em>value </em>apparaît quelque part dans la valeur de l'attribut <em>attr.</em></td>
+    la sous-chaîne <em>value </em>apparaît quelque part dans la valeur de l'attribut <em>attr.</em></td>
   </tr>
  </tbody>
 </table>
@@ -112,67 +106,51 @@ original_slug: Apprendre/CSS/Building_blocks/Selectors/Sélecteurs_d_atrribut
 <p>L'exemple suivant montre ces sélecteurs en action :</p>
 
 <ul>
- <li><code>li[class^="a"]</code> correspond à toute valeur d'attribut commençant par un <em>a,</em> ce sélecteur cible donc les deux premiers items de la liste.</li>
- <li><code>li[class$="a"]</code> correspond à toute valeur d'attribut finissant par un <em>a,</em> ce sélecteur cible donc les items un et trois de la liste.</li>
- <li><code>li[class*="a"]</code> correspond à toute valeur d'attribut contenant quelquepart un <em>a,</em> ce sélecteur cible donc tous les items de la liste.</li>
+ <li><code>li[class^="a"]</code> correspond à toute valeur d'attribut commençant par un <em>a,</em> ce sélecteur cible donc les deux premiers items de la liste.</li>
+ <li><code>li[class$="a"]</code> correspond à toute valeur d'attribut finissant par un <em>a,</em> ce sélecteur cible donc les items un et trois de la liste.</li>
+ <li><code>li[class*="a"]</code> correspond à toute valeur d'attribut contenant quelque part un <em>a,</em> ce sélecteur cible donc tous les items de la liste.</li>
 </ul>
 
 <p>{{EmbedGHLiveSample("css-examples/learn/selectors/attribute-substring.html", '100%', 800)}}</p>
 
 <h2 id="Sensibilité_à_la_casse">Sensibilité à la casse</h2>
 
-<p>Pour cibler des valeurs d'attribut sans prendre en compte la casse (majucule ou minuscule indifférentes), ajoutez la valeur <code>i</code> avant la parenthèse fermante. Ce drapeau signale au navigateur d'identifier les caractères ASCII sans se préoccuper de la casse (<em>a</em> = <em>A</em>). Sans le drapeau <code>i</code>, les valeurs seront identifiées selon la sensibilité à la casse de la langue du document — HTML est sensible à la casse.</p>
+<p>Pour cibler des valeurs d'attribut sans prendre en compte la casse (majuscule ou minuscule indifférentes), ajoutez la valeur <code>i</code> avant le crochet fermant. Ce drapeau signale au navigateur d'identifier les caractères ASCII sans se préoccuper de la casse (<em>a</em> = <em>A</em>). Sans le drapeau <code>i</code>, les valeurs seront identifiées selon la sensibilité à la casse de la langue du document — HTML est sensible à la casse.</p>
 
-<p>Dans l'exemple ci-dessous, le premier sélecteur cible les valeurs commençant par un <code>a</code> — seul le premier élément de la liste est ciblé, les deux suivants commencent par un A majuscule. Le second sélecteur est marqué du drapeau <em>insensible à la casse, </em>il cible donc tous les éléments de la liste.</p>
+<p>Dans l'exemple ci-dessous, le premier sélecteur cible les valeurs commençant par un <code>a</code> — seul le premier élément de la liste est ciblé, les deux suivants commencent par un A majuscule. Le second sélecteur est marqué du drapeau <em>insensible à la casse, </em>il cible donc tous les éléments de la liste.</p>
 
 <p>{{EmbedGHLiveSample("css-examples/learn/selectors/attribute-case.html", '100%', 800)}}</p>
 
 <div class="blockIndicator note">
-<p><strong>Note </strong>: Dans des contextes normalement insensibles à la casse, on peut forcer la sensibilité avec la valeur <code>s</code> nouvellement introduite, mais sa prise en charge par les navigateurs est inégale ; elle n'est pas très utile dans un contexte HTML.</p>
-</div>
-
-<h2 id="À_faire_vous-mêmes">À faire vous-mêmes</h2>
-
-<p>Dans l'exemple live ci-dessous, ajoutez les sélecteurs d'attribut pour obtenir les comportements suivants :</p>
-
-<ul>
- <li>Cibler l'élément <code>&lt;a&gt;</code> ayant un attribut <code>title</code> et colorer sa bordure en rose (<code>border-color: pink</code>).</li>
- <li>Cibler l'élément <code>&lt;a&gt;</code> dont l'attribut <code>href</code> contient le mot <code>contact</code> quelque part dans sa valeur et colorer sa bordure en orange (<code>border-color: orange</code>).</li>
- <li>Cibler l'élément <code>&lt;a&gt;</code> dont la valeur <code>href</code> commence par <code>https</code> et colorer sa bordure en vert (<code>border-color: green</code>).</li>
-</ul>
-
-<p>{{EmbedGHLiveSample("css-examples/learn/selectors/attribute-links.html", '100%', 800)}}</p>
-
-<div class="blockIndicator note">
-<p><strong>Note </strong>: Vous pouvez <a href="https://github.com/mdn/css-examples/blob/master/learn/solutions.md">jeter un œil à la solution ici</a> —  mais essayez d'abord de la trouver par vous-même !</p>
+<p><strong>Note </strong>: Dans des contextes normalement insensibles à la casse, on peut forcer la sensibilité avec la valeur <code>s</code> nouvellement introduite, mais sa prise en charge par les navigateurs est inégale ; elle n'est pas très utile dans un contexte HTML.</p>
 </div>
 
 <h2 id="Pas_suivants">Pas suivants</h2>
 
-<p>Nous en avons fini avec les sélecteurs d'attribut, vous pouvez maintenant continuer la visite et passer aux <a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">sélecteurs de pseudo-classes et pseudo-éléments</a>.</p>
+<p>Nous en avons fini avec les sélecteurs d'attribut, vous pouvez maintenant continuer la visite et passer aux <a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">sélecteurs de pseudo-classes et pseudo-éléments</a>.</p>
 
 <p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements", "Learn/CSS/Building_blocks")}}</p>
 
 <h2 id="Dans_ce_cours">Dans ce cours</h2>
 
 <ol>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Cascade and inheritance</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">CSS selectors</a>
+ <li><a href="/fr/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Cascade et héritage</a></li>
+ <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors">Sélecteurs CSS</a>
   <ul>
-   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Type, class, and ID selectors</a></li>
-   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Attribute selectors</a></li>
-   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Pseudo-classes and pseudo-elements</a></li>
-   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Combinators</a></li>
+   <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Sélecteurs de classe, de type et d'identifiant</a></li>
+   <li>Sélecteurs d'attribut</li>
+   <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Pseudo-classes et pseudo-éléments</a></li>
+   <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Combinateurs</a></li>
   </ul>
  </li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">The box model</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Backgrounds and borders</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Handling different text directions</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content">Overflowing content</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">Values and units</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Sizing items in CSS</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Images, media, and form elements</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Styling_tables">Styling tables</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS">Debugging CSS</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing">Organizing your CSS</a></li>
+ <li><a href="/fr/docs/Learn/CSS/Building_blocks/The_box_model">Le modèle de boîte</a></li>
+ <li><a href="/fr/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Arrières-plans et bordures</a></li>
+ <li><a href="/fr/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Gérer la directionnalité du texte</a></li>
+ <li><a href="/fr/docs/Learn/CSS/Building_blocks/Overflowing_content">Le dépassement du contenu</a></li>
+ <li><a href="/fr/docs/Learn/CSS/Building_blocks/Values_and_units">Valeurs et unités</a></li>
+ <li><a href="/fr/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Dimensionnement des objets en CSS</a></li>
+ <li><a href="/fr/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Images, médias, et formulaires</a></li>
+ <li><a href="/fr/docs/Learn/CSS/Building_blocks/Styling_tables">Mettre en forme les tableaux</a></li>
+ <li><a href="/fr/docs/Learn/CSS/Building_blocks/Debugging_CSS">Déboguer CSS</a></li>
+ <li><a href="/fr/docs/Learn/CSS/Building_blocks/Organizing">Organiser son code CSS</a></li>
 </ol>
diff --git a/files/fr/learn/css/building_blocks/selectors/index.html b/files/fr/learn/css/building_blocks/selectors/index.html
index 5cfbb2cd4e..2ba25e54d4 100644
--- a/files/fr/learn/css/building_blocks/selectors/index.html
+++ b/files/fr/learn/css/building_blocks/selectors/index.html
@@ -6,131 +6,131 @@ original_slug: Apprendre/CSS/Building_blocks/Selectors
 ---
 <div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Cascade_and_inheritance", "Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks")}}</div>
 
-<p class="summary">Dans {{Glossary("CSS")}}, les sélecteurs sont utilisés pour cibler les éléments {{glossary("HTML")}} à mettre en forme dans nos pages web. CSS propose une grande diversité de sélecteurs, offrant ainsi une précision très fine dans la façon de cibler les éléments. Dans cet article nous explorerons en détails le fonctionnement de ces différents types.</p>
+<p>Dans {{Glossary("CSS")}}, les sélecteurs sont utilisés pour cibler les éléments {{glossary("HTML")}} à mettre en forme dans nos pages web. CSS propose une grande diversité de sélecteurs, offrant ainsi une précision très fine dans la façon de cibler les éléments. Dans cet article nous explorerons en détails le fonctionnement de ces différents types.</p>
 
 <table class="learn-box standard-table">
  <tbody>
   <tr>
-   <th scope="row">Prérequis :</th>
-   <td>Notions de base en l'informatique, <a href="/fr/docs/Apprendre/Commencer_avec_le_web/Installation_outils_de_base">logiciels de base installés</a>, <a href="/fr/docs/Apprendre/Commencer_avec_le_web/Gérer_les_fichiers">savoir manipuler des fichiers</a>, connaissance de base de HTML (cf. <a href="/fr/docs/Apprendre/HTML/Introduction_à_HTML">Introduction à HTML</a>.) et une première idée du fonctionnement de CSS (voir <a href="/fr/docs/Learn/CSS/First_steps">premiers pas en CSS</a>.)</td>
+   <th scope="row">Prérequis&nbsp;:</th>
+   <td>Notions de base en l'informatique, <a href="/fr/docs/Learn/Getting_started_with_the_web/Installing_basic_software">logiciels de base installés</a>, <a href="/fr/docs/Learn/Getting_started_with_the_web/Dealing_with_files">savoir manipuler des fichiers</a>, connaissance de base de HTML (cf. <a href="/fr/docs/Learn/HTML/Introduction_to_HTML">Introduction à HTML</a>.) et une première idée du fonctionnement de CSS (voir <a href="/fr/docs/Learn/CSS/First_steps">premiers pas en CSS</a>.)</td>
   </tr>
   <tr>
-   <th scope="row">Objectif :</th>
+   <th scope="row">Objectif&nbsp;:</th>
    <td>Voir dans les détails comment les sélecteurs CSS fonctionnent.</td>
   </tr>
  </tbody>
 </table>
 
-<h2 id="Quest_ce_quun_sélecteur">Qu'est ce qu'un sélecteur ?</h2>
+<h2 id="what_is_a_selector">Qu'est-ce qu'un sélecteur ?</h2>
 
-<p>Vous les avez déjà rencontré : toute règle CSS commence par un sélecteur. Un sélecteur est une expression qui indique au navigateur à quelle entité HTML s'applique la règle CSS correspondante. Le ou les éléments ciblés par le sélecteur sont le <em>sujet </em>de ce sélecteur.</p>
+<p>Vous les avez déjà rencontrés : toute règle CSS commence par un sélecteur. Un sélecteur est une expression qui indique au navigateur à quelle entité HTML s'applique la règle CSS correspondante. Le ou les éléments ciblés par le sélecteur sont le <em>sujet</em> de ce sélecteur.</p>
 
-<p><img alt="Some code with the h1 highlighted." src="https://mdn.mozillademos.org/files/16550/selector.png" style="border: 1px solid #cccccc; height: 218px; width: 471px;"></p>
+<p><img alt="Du code où h1 est surligné." src="selector.png" style="border: 1px solid #cccccc;"></p>
 
-<p>Vous avez rencontrés plusieurs sélecteurs dans des articles précédents, vous avez vu que les sélecteurs ont différentes façons de cibler le document HTML — on peut par exemple cibler les éléments <code>h1</code>, ou la classe  <code>.special</code>.</p>
+<p>Vous avez rencontré plusieurs sélecteurs dans des articles précédents, vous avez vu que les sélecteurs ont différentes façons de cibler le document HTML — on peut par exemple cibler les éléments <code>h1</code>, ou la classe <code>.special</code>.</p>
 
-<p>En CSS, les sélecteurs sont définis dans la spécification CSS Selectors ; comme tout le reste de CSS le bon fonctionnement des sélecteurs dépend de la prise en charge par les navigateurs. La plupart des sélecteurs que vous rencontrerez sont définis dans la <a href="https://www.w3.org/TR/selectors-3/">Level 3 Selectors specification</a>, une spécification mature, la prise en charge par les navigateurs est donc complète.</p>
+<p>En CSS, les sélecteurs sont définis dans la spécification CSS Selectors ; comme tout le reste de CSS, le bon fonctionnement des sélecteurs dépend de la prise en charge par les navigateurs. La plupart des sélecteurs que vous rencontrerez sont définis dans la <a href="https://www.w3.org/TR/selectors-3/">spécification de niveau 3 pour les sélecteurs</a>, une spécification mature, aussi la prise en charge par les navigateurs est excellente.</p>
 
-<h2 id="Listes_de_sélecteurs">Listes de sélecteurs</h2>
+<h2 id="selector_lists">Listes de sélecteurs</h2>
 
-<p>Quand un groupe de déclarations CSS s'applique à plusieurs éléments distincts, on peut combiner les sélecteurs individuels en une liste. Par exemple, si j'ai le même CSS pour un <code>h1</code> et pour une classe <code>.special</code>, je pourrais écrire deux règles :</p>
+<p>Quand un groupe de déclarations CSS s'applique à plusieurs éléments distincts, on peut combiner les sélecteurs individuels en une liste. Par exemple, si j'ai le même CSS pour un <code>h1</code> et pour une classe <code>.special</code>, je pourrais écrire deux règles :</p>
 
-<pre class="brush: css notranslate"><code>h1 {
+<pre class="brush: css">h1 {
   color: blue;
 }
 
 .special {
   color: blue;
-} </code></pre>
+}</pre>
 
-<p>ou bien une seule règle en combinant les sélecteurs, séparés par une virgule :</p>
+<p>ou bien une seule règle en combinant les sélecteurs, séparés par une virgule :</p>
 
-<pre class="brush: css notranslate"><code>h1, .special {
+<pre class="brush: css">h1, .special {
   color: blue;
-} </code></pre>
+}</pre>
 
 <p>L'espace est valide avant ou après la virgule. Vous trouverez peut-être la version suivante plus lisible avec un sélecteur par ligne :</p>
 
-<pre class="brush: css notranslate"><code>h1,
+<pre class="brush: css">h1,
 .special {
   color: blue;
-} </code></pre>
+}</pre>
 
 <p>Dans l'exemple live ci-dessous, essayez de combiner les sélecteurs dont les déclarations sont identiques. Le rendu visuel devrait être inchangé.</p>
 
-<p>{{EmbedGHLiveSample("css-examples/learn/selectors/selector-list.html", '100%', 1000)}} </p>
+<p>{{EmbedGHLiveSample("css-examples/learn/selectors/selector-list.html", '100%', 1000)}}</p>
 
 <p>Quand on regroupe ainsi des sélecteurs, si l'un des sélecteurs est invalide la règle toute entière sera ignorée.</p>
 
-<p>Dans l'exemple suivant, la règle avec le sélecteur de classe invalide sera ignorée, alors que le <code>h1</code> sera mis en forme comme prévu.</p>
+<p>Dans l'exemple suivant, la règle avec le sélecteur de classe invalide sera ignorée, alors que le <code>h1</code> sera mis en forme comme prévu.</p>
 
-<pre class="brush: css notranslate"><code>h1 {
+<pre class="brush: css">h1 {
   color: blue;
 }
 
 ..special {
   color: blue;
-} </code></pre>
+}</pre>
 
 <p>En combinant les sélecteurs, la règle est considérée invalide et donc ignorée : ni <code>h1</code> ni les éléments de classe <code>.special</code> ne seront mis en forme.</p>
 
-<pre class="brush: css notranslate"><code>h1, ..special {
+<pre class="brush: css">h1, ..special {
   color: blue;
-} </code></pre>
+}</pre>
 
-<h2 id="Types_de_sélecteurs">Types de sélecteurs</h2>
+<h2 id="types_of_selectors">Types de sélecteurs</h2>
 
 <p>On peut regrouper les sélecteurs en différents groupes ; classer les sélecteurs par type vous aidera à identifier l'outil pertinent pour chaque situation. Dans les sections suivantes, nous passons en revue ces différents types de sélecteurs.</p>
 
-<h3 id="Sélecteurs_de_type_de_classe_et_dID">Sélecteurs de type, de classe , et d'ID</h3>
+<h3 id="type_class_and_id_selectors">Sélecteurs de type, de classe, et d'ID</h3>
 
-<p>Ce groupe inclut les sélecteurs ciblant les élements HTML tels que <code>&lt;h1&gt;</code> :</p>
+<p>Ce groupe inclut les sélecteurs ciblant les élements HTML tels que <code>&lt;h1&gt;</code> :</p>
 
-<pre class="brush: css notranslate">h1 { }</pre>
+<pre class="brush: css">h1 { }</pre>
 
 <p>On trouve aussi les sélecteurs ciblant une classe :</p>
 
-<pre class="brush: css notranslate">.box { }</pre>
+<pre class="brush: css">.box { }</pre>
 
-<p>ou une  ID :</p>
+<p>ou un ID :</p>
 
-<pre class="brush: css notranslate">#unique { }</pre>
+<pre class="brush: css">#unique { }</pre>
 
-<h3 id="Sélecteurs_dattribut">Sélecteurs d'attribut</h3>
+<h3 id="attribute_selectors">Sélecteurs d'attribut</h3>
 
 <p>Ce groupe de sélecteurs offre différents mécanismes pour cibler des éléments en fonction de la présence d'un attribut donné pour un élément donné :</p>
 
-<pre class="brush: css notranslate">a[title] { }</pre>
+<pre class="brush: css">a[title] { }</pre>
 
 <p>Ou même de baser la sélection sur la présence d'un attribut avec une valeur bien précise :</p>
 
-<pre class="brush: css notranslate">a[href="https://example.com"] { }</pre>
+<pre class="brush: css">a[href="https://example.com"] { }</pre>
 
-<h3 id="Pseudo-classes_et_pseudo-éléments">Pseudo-classes et pseudo-éléments</h3>
+<h3 id="pseudo-classes_and_pseudo-elements">Pseudo-classes et pseudo-éléments</h3>
 
-<p>Ce groupe de sélecteurs inclut les pseudo-classes, qui ciblent des éléments dans un état donné. Par exemple, la pseudo-classe <code>:hover</code> sélectionne un élément seulement s'il est survolé par le pointeur de la souris :</p>
+<p>Ce groupe de sélecteurs inclut les pseudo-classes, qui ciblent des éléments dans un état donné. Par exemple, la pseudo-classe <code>:hover</code> sélectionne un élément seulement s'il est survolé par le pointeur de la souris :</p>
 
-<pre class="brush: css notranslate">a:hover { }</pre>
+<pre class="brush: css">a:hover { }</pre>
 
-<p>Ce groupe inclut aussi les pseudo-éléments, qui ciblent une certaine partie d'un élément plutôt que l'élément tout entier. Par exemple, <code>::first-line</code> sélectionne la première ligne d'un texte contenu dans un élément (un <code>&lt;p&gt;</code> dans l'exemple ci-dessous), comme si la première ligne du texte mis en forme était placée entre  <code>&lt;span&gt;</code>  et qu'après coup on appliquait un style sur cet élément.</p>
+<p>Ce groupe inclut aussi les pseudo-éléments, qui ciblent une certaine partie d'un élément plutôt que l'élément tout entier. Par exemple, <code>::first-line</code> sélectionne la première ligne d'un texte contenu dans un élément (un <code>&lt;p&gt;</code> dans l'exemple ci-dessous), comme si la première ligne du texte mis en forme était placée entre <code>&lt;span&gt;</code> et qu'après coup on appliquait un style sur cet élément.</p>
 
-<pre class="brush: css notranslate">p::first-line { }</pre>
+<pre class="brush: css">p::first-line { }</pre>
 
-<h3 id="Combinateurs">Combinateurs</h3>
+<h3 id="combinators">Combinateurs</h3>
 
-<p>Dans la dernière catégorie, on combine les sélecteurs pour cibler plus finement les éléments dans nos documents. L'exemple suivant sélectionne les paragraphes enfants directs de <code>&lt;article&gt;</code>  grâce au combinateur enfant (<code>&gt;</code>) :</p>
+<p>Dans la dernière catégorie, on combine les sélecteurs pour cibler plus finement les éléments dans nos documents. L'exemple suivant sélectionne les paragraphes enfants directs de <code>&lt;article&gt;</code> grâce au combinateur enfant (<code>&gt;</code>) :</p>
 
-<pre class="brush: css notranslate">article &gt; p { }</pre>
+<pre class="brush: css">article &gt; p { }</pre>
 
-<h2 id="À_faire_ensuite">À faire ensuite</h2>
+<h2 id="next_steps">À faire ensuite</h2>
 
-<p>Vous pouvez consulter ci-dessous le tableau de référence des sélecteurs avec des liens directs vers les différents types de sélecteurs dans cette section <em>Apprendre</em> ou dans d'autres rubriques de MDN ;  vous pouvez aussi suivre le fil de ce cours et en apprendre plus sur les <a href="/fr/docs/Apprendre/CSS/Building_blocks/Selectors/Sélecteurs_de_type_classe_ID">sélecteurs de type, de classe, et d'ID</a>.</p>
+<p>Vous pouvez consulter ci-dessous le tableau de référence des sélecteurs avec des liens directs vers les différents types de sélecteurs dans cette section <em>Apprendre</em> ou dans d'autres rubriques de MDN ; vous pouvez aussi suivre le fil de ce cours et en apprendre plus sur les <a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">sélecteurs de type, de classe, et d'ID</a>.</p>
 
 <p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Cascade_and_inheritance", "Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks")}}</p>
 
-<h2 id="Table_de_référence_des_sélecteurs">Table de référence des sélecteurs</h2>
+<h2 id="reference_table_of_selectors">Table de référence des sélecteurs</h2>
 
-<p>Le tableau ci-dessous donne un aperçu des sélecteurs disponibles, ainsi que des liens vers les pages qui vous montreront comment utiliser chaque type de sélecteur. J'ai également inclus un lien vers la page MDN pour chaque sélecteur où vous pouvez vérifier les informations sur la prise en charge par les navigateurs. Pour la suite de ce cours, ou dans vos expériences CSS à venir, cette table sera votre référence quand vous  rechercherez des informations sur les sélecteurs.</p>
+<p>Le tableau ci-dessous donne un aperçu des sélecteurs disponibles, ainsi que des liens vers les pages qui vous montreront comment utiliser chaque type de sélecteur. J'ai également inclus un lien vers la page MDN pour chaque sélecteur où vous pouvez vérifier les informations sur la prise en charge par les navigateurs. Pour la suite de ce cours, ou dans vos expériences CSS à venir, cette table sera votre référence quand vous rechercherez des informations sur les sélecteurs.</p>
 
 <table class="standard-table">
  <thead>
@@ -142,83 +142,83 @@ original_slug: Apprendre/CSS/Building_blocks/Selectors
  </thead>
  <tbody>
   <tr>
-   <td><a href="/fr/docs/Web/CSS/Sélecteurs_de_type">Sélecteur de type</a></td>
-   <td><code>h1 {  }</code></td>
-   <td><a href="/fr/docs/Apprendre/CSS/Building_blocks/Selectors/Sélecteurs_de_type_classe_ID">Sélecteurs de type</a></td>
+   <td><a href="/fr/docs/Web/CSS/Type_selectors">Sélecteur de type</a></td>
+   <td><code>h1 { }</code></td>
+   <td><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Sélecteurs de type</a></td>
   </tr>
   <tr>
-   <td><a href="/fr/docs/Web/CSS/Sélecteurs_universels">Sélecteur universel</a></td>
-   <td><code>* {  }</code></td>
-   <td><a href="/en-US/docs/user:chrisdavidmills/CSS_Learn/CSS_Selectors/Type_Class_and_ID_Selectors#The_universal_selector">The universal selector</a></td>
+   <td><a href="/fr/docs/Web/CSS/Universal_selectors">Sélecteur universel</a></td>
+   <td><code>* { }</code></td>
+   <td><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors#the_universal_selector">The universal selector</a></td>
   </tr>
   <tr>
-   <td><a href="/fr/docs/Web/CSS/Sélecteurs_de_classe">Sélecteur de classe</a></td>
-   <td><code>.box {  }</code></td>
-   <td><a href="https://developer.mozilla.org/en-US/docs/user:chrisdavidmills/CSS_Learn/CSS_Selectors/Type_Class_and_ID_Selectors#Class_selectors">Class selectors</a></td>
+   <td><a href="/fr/docs/Web/CSS/Class_selectors">Sélecteur de classe</a></td>
+   <td><code>.box { }</code></td>
+   <td><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors#class_selectors">Class selectors</a></td>
   </tr>
   <tr>
-   <td><a href="/fr/docs/Web/CSS/Sélecteurs_d_ID">Sélecteur d'ID</a></td>
+   <td><a href="/fr/docs/Web/CSS/ID_selectors">Sélecteur d'ID</a></td>
    <td><code>#unique { }</code></td>
-   <td><a href="https://developer.mozilla.org/en-US/docs/user:chrisdavidmills/CSS_Learn/CSS_Selectors/Type_Class_and_ID_Selectors#ID_Selectors">ID selectors</a></td>
+   <td><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors#id_selectors">ID selectors</a></td>
   </tr>
   <tr>
-   <td><a href="/fr/docs/Web/CSS/Sélecteurs_d_attribut">Sélecteur d'attribut</a></td>
-   <td><code>a[title] {  }</code></td>
-   <td><a href="https://developer.mozilla.org/en-US/docs/User:chrisdavidmills/CSS_Learn/CSS_Selectors/Attribute_selectors">Attribute selectors</a></td>
+   <td><a href="/fr/docs/Web/CSS/Attribute_selectors">Sélecteur d'attribut</a></td>
+   <td><code>a[title] { }</code></td>
+   <td><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Attribute selectors</a></td>
   </tr>
   <tr>
-   <td><a href="/en-US/docs/Web/CSS/Pseudo-classes">Pseudo-class selectors</a></td>
+   <td><a href="/fr/docs/Web/CSS/Pseudo-classes">Pseudo-class selectors</a></td>
    <td><code>p:first-child { }</code></td>
-   <td><a href="https://developer.mozilla.org/en-US/docs/User:chrisdavidmills/CSS_Learn/CSS_Selectors/Pseuso-classes_and_Pseudo-elements#What_is_a_pseudo-class">Pseudo-classes</a></td>
+   <td><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Pseuso-classes_and_Pseudo-elements#What_is_a_pseudo-class">Pseudo-classes</a></td>
   </tr>
   <tr>
-   <td><a href="/en-US/docs/Web/CSS/Pseudo-elements">Pseudo-element selectors</a></td>
+   <td><a href="/fr/docs/Web/CSS/Pseudo-elements">Pseudo-element selectors</a></td>
    <td><code>p::first-line { }</code></td>
-   <td><a href="https://developer.mozilla.org/en-US/docs/User:chrisdavidmills/CSS_Learn/CSS_Selectors/Pseuso-classes_and_Pseudo-elements#What_is_a_pseudo-element">Pseudo-elements</a></td>
+   <td><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Pseuso-classes_and_Pseudo-elements#What_is_a_pseudo-element">Pseudo-elements</a></td>
   </tr>
   <tr>
-   <td><a href="/fr/docs/Web/CSS/Sélecteurs_descendant">Sélecteur descendant</a></td>
+   <td><a href="/fr/docs/Web/CSS/Descendant_combinator">Sélecteur descendant</a></td>
    <td><code>article p</code></td>
-   <td><a href="https://developer.mozilla.org/en-US/docs/User:chrisdavidmills/CSS_Learn/CSS_Selectors/Combinators#Descendant_Selector">Descendant combinator</a></td>
+   <td><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Combinators#descendant_selector">Descendant combinator</a></td>
   </tr>
   <tr>
-   <td><a href="/fr/docs/Web/CSS/Sélecteurs_enfant">Sélecteur enfant</a></td>
+   <td><a href="/fr/docs/Web/CSS/Child_combinator">Sélecteur enfant</a></td>
    <td><code>article &gt; p</code></td>
-   <td><a href="https://developer.mozilla.org/en-US/docs/User:chrisdavidmills/CSS_Learn/CSS_Selectors/Combinators#Child_combinator">Child combinator</a></td>
+   <td><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Combinators#child_combinator">Child combinator</a></td>
   </tr>
   <tr>
-   <td><a href="/fr/docs/Web/CSS/Combinateur_de_voisin_direct">Sélecteur de frére adjacent</a></td>
+   <td><a href="/fr/docs/Web/CSS/Adjacent_sibling_combinator">Sélecteur de frère adjacent</a></td>
    <td><code>h1 + p</code></td>
-   <td><a href="https://developer.mozilla.org/en-US/docs/User:chrisdavidmills/CSS_Learn/CSS_Selectors/Combinators#Adjacent_sibling">Adjacent sibling</a></td>
+   <td><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Combinators#adjacent_sibling">Adjacent sibling</a></td>
   </tr>
   <tr>
-   <td><a href="/fr/docs/Web/CSS/Sélecteurs_de_voisins_généraux">Sélecteur de frère général</a></td>
+   <td><a href="/fr/docs/Web/CSS/General_sibling_combinator">Sélecteur de frère général</a></td>
    <td><code>h1 ~ p</code></td>
-   <td><a href="https://developer.mozilla.org/en-US/docs/User:chrisdavidmills/CSS_Learn/CSS_Selectors/Combinators#General_sibling">General sibling</a></td>
+   <td><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Combinators#general_sibling">General sibling</a></td>
   </tr>
- </tbody>
+ </tbody> 
 </table>
 
-<h2 id="Dans_ce_module">Dans ce module</h2>
+<h2 id="in_this_module">Dans ce module</h2>
 
 <ol>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Cascade and inheritance</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">CSS selectors</a>
+ <li><a href="/fr/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Cascade and inheritance</a></li>
+ <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors">CSS selectors</a>
   <ul>
-   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Type, class, and ID selectors</a></li>
-   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Attribute selectors</a></li>
-   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Pseudo-classes and pseudo-elements</a></li>
-   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Combinators</a></li>
+   <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Type, class, and ID selectors</a></li>
+   <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Attribute selectors</a></li>
+   <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Pseudo-classes and pseudo-elements</a></li>
+   <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Combinators</a></li>
   </ul>
  </li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">The box model</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Backgrounds and borders</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Handling different text directions</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content">Overflowing content</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">Values and units</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Sizing items in CSS</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Images, media, and form elements</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Styling_tables">Styling tables</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS">Debugging CSS</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing">Organizing your CSS</a></li>
+ <li><a href="/fr/docs/Learn/CSS/Building_blocks/The_box_model">The box model</a></li>
+ <li><a href="/fr/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Backgrounds and borders</a></li>
+ <li><a href="/fr/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Handling different text directions</a></li>
+ <li><a href="/fr/docs/Learn/CSS/Building_blocks/Overflowing_content">Overflowing content</a></li>
+ <li><a href="/fr/docs/Learn/CSS/Building_blocks/Values_and_units">Values and units</a></li>
+ <li><a href="/fr/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Sizing items in CSS</a></li>
+ <li><a href="/fr/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Images, media, and form elements</a></li>
+ <li><a href="/fr/docs/Learn/CSS/Building_blocks/Styling_tables">Styling tables</a></li>
+ <li><a href="/fr/docs/Learn/CSS/Building_blocks/Debugging_CSS">Debugging CSS</a></li>
+ <li><a href="/fr/docs/Learn/CSS/Building_blocks/Organizing">Organizing your CSS</a></li>
 </ol>
diff --git a/files/fr/learn/css/building_blocks/sizing_items_in_css/index.html b/files/fr/learn/css/building_blocks/sizing_items_in_css/index.html
index 2fdf39d902..47e0ee79a1 100644
--- a/files/fr/learn/css/building_blocks/sizing_items_in_css/index.html
+++ b/files/fr/learn/css/building_blocks/sizing_items_in_css/index.html
@@ -6,131 +6,131 @@ original_slug: Apprendre/CSS/Building_blocks/Sizing_items_in_CSS
 ---
 <div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Values_and_units", "Learn/CSS/Building_blocks/Images_media_form_elements", "Learn/CSS/Building_blocks")}}</div>
 
-<div></div>
-
-<div>Dans les différentes leçons vues jusqu'à présent vous avez rencontré de nombreuses manières de dimensionner les éléments sur une page en utlisant CSS. Comprendre le dimensionnement des différentes caractéristiques de votre design est important. Cette leçon résumera les diverses méthodes pour appliquer une taille via CSS et définira également quelques termes au sujet du dimensionnement qui vous aiderons dans le futur.</div>
-
-<div></div>
+<div>Dans les différentes leçons vues jusqu'à présent vous avez rencontré de nombreuses manières de dimensionner les éléments sur une page en utilisant CSS. Comprendre le dimensionnement des différentes caractéristiques de votre design est important. Cette leçon résumera les diverses méthodes pour appliquer une taille via CSS et définira également quelques termes au sujet du dimensionnement qui vous aideront dans le futur.</div>
 
 <table class="learn-box standard-table">
- <tbody>
-  <tr>
-   <th scope="row">Prérequis:</th>
-   <td>
-    <p>Maîtrise élémentaire de l'informatique, <a href="https://developer.mozilla.org/fr/docs/Apprendre/Commencer_avec_le_web/Installation_outils_de_base">suite logicielle de base installée</a>, compétences élémentaires pour <a href="https://developer.mozilla.org/fr/docs/Apprendre/Commencer_avec_le_web/Gérer_les_fichiers">travailler avec des fichiers</a>, connaissance de base du HTML  (cf. <a href="https://developer.mozilla.org/fr/docs/Apprendre/HTML/Introduction_à_HTML">Introduction à HTML</a>), et une idée de <a href="https://developer.mozilla.org/fr/docs/Learn/CSS/First_steps/How_CSS_works">Comment fonctionne CSS</a>.</p>
-   </td>
-  </tr>
-  <tr>
-   <th scope="row">Objectif:</th>
-   <td>Découvrir comment spécifier la taille des éléments en CSS.</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="row">Prérequis :</th>
+      <td>
+        <p>Maîtrise élémentaire de l'informatique, <a href="/fr/docs/Learn/Getting_started_with_the_web/Installing_basic_software">suite logicielle de base installée</a>, compétences élémentaires pour <a href="/fr/docs/Learn/Getting_started_with_the_web/Dealing_with_files">travailler avec des fichiers</a>, connaissance de base du HTML (cf. <a href="/fr/docs/Learn/HTML/Introduction_to_HTML">Introduction à HTML</a>), et une idée de <a href="/fr/docs/Learn/CSS/First_steps">Comment fonctionne CSS</a>.</p>
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Objectif :</th>
+      <td>Découvrir comment spécifier la taille des éléments en CSS.</td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="La_taille_naturelle_ou_intrinsèque_des_choses">La taille naturelle ou intrinsèque des choses</h2>
+<h2 id="the_natural_or_intrinsic_size_of_things">La taille naturelle ou intrinsèque des choses</h2>
 
-<p>Tous les éléments HTML ont une taille "naturelle", définie avant toute modification par CSS. Un exemple parlant est celui d'un élément image. Une image a une largeur et une hauteur définies dans le fichier image qu'elle incorpore dans la page. On parle d'une <strong>taille intrinsèque </strong>— qui provient de l'image elle même.</p>
+<p>Tous les éléments HTML ont une taille « naturelle », définie avant toute modification par CSS. Un exemple parlant est celui d'un élément image. Une image a une largeur et une hauteur définies dans le fichier image qu'elle incorpore dans la page. On parle d'une <strong>taille intrinsèque </strong>— qui provient de l'image elle-même.</p>
 
-<p>Si vous placer une image dans une page sans modifier sa hauteur ni sa largeur (que ce soit à en utilisant un attribut sur la balise <code>&lt;img&gt;</code> ou avec CSS), cela l'affichera en utilisant sa taille intrasèque. Ci-dessous nous avons l'exemple d'une image à laquelle nous avons ajouté une bordure afin de bien délimiter sa taille.</p>
+<p>Si vous placez une image dans une page sans modifier sa hauteur ni sa largeur (que ce soit à en utilisant un attribut sur la balise <code>&lt;img&gt;</code> ou avec CSS), cela l'affichera en utilisant sa taille intrinsèque. Ci-dessous nous avons l'exemple d'une image à laquelle nous avons ajouté une bordure afin de bien délimiter sa taille.</p>
 
 <p>{{EmbedGHLiveSample("css-examples/learn/sizing/intrinsic-image.html", '100%', 600)}}</p>
 
-<p>Un élément {{htmlelement("div")}} vide en revanche, n'a pas de taille en soi. Si vous ajouter une {{htmlelement("div")}} à votre HTML sans aucun contenu à l'intérieur,et que vous lui ajouter une bordure comme nous l'avons fait avec l'image ci-dessus, vous verrez une ligne s'afficher sur la page. Cette ligne résulte de la juxtaposition des bordures horizontales, car il n'y a aucun contenu entre les deux. De plus les bordures s'étendent sur toute la largeur disponible du conteneur, car il s'agit d'un élément de bloc. Un comportement avec lequel vous devriez déjà être familiarisé. Cet élément n'a pas de hauteur (ou plutôt pas de taille dans l'axe de bloc) car il n'y a pas de contenu à l'interieur de celui ci.</p>
+<p>Un élément <a href="/fr/docs/Web/HTML/Element/div"><code>&lt;div&gt;</code></a> vide en revanche, n'a pas de taille en soi. Si vous ajouter une <a href="/fr/docs/Web/HTML/Element/div"><code>&lt;div&gt;</code></a> à votre HTML sans aucun contenu à l'intérieur, et que vous lui ajouter une bordure comme nous l'avons fait avec l'image ci-dessus, vous verrez une ligne s'afficher sur la page. Cette ligne résulte de la juxtaposition des bordures horizontales, car il n'y a aucun contenu entre les deux. De plus les bordures s'étendent sur toute la largeur disponible du conteneur, car il s'agit d'un élément de bloc. Un comportement avec lequel vous devriez déjà être familiarisé. Cet élément n'a pas de hauteur (ou plutôt pas de taille dans l'axe de bloc), car il n'y a pas de contenu à l'intérieur de celui-ci.</p>
 
 <p>{{EmbedGHLiveSample("css-examples/learn/sizing/intrinsic-text.html", '100%', 500)}}</p>
 
-<p>Dans l'exemple ci-dessus; essayez d'ajouter du texte a l'interieur de l'élément vide. Les bordures contiennent maintenant ce texte car la hauteur de l'élément est définie par son contenu. De plus, la taille de cette <code>&lt;div&gt;</code> dans l'axe de bloc provient maintenant de la taille du contenu. Là aussi il s'agit de la taille intrasèque de l'élément — sa taille est définie par son contenu.</p>
+<p>Dans l'exemple ci-dessus; essayez d'ajouter du texte à l'intérieur de l'élément vide. Les bordures contiennent maintenant ce texte, car la hauteur de l'élément est définie par son contenu. De plus, la taille de cette <code>&lt;div&gt;</code> dans l'axe de bloc provient maintenant de la taille du contenu. Là aussi il s'agit de la taille intrinsèque de l'élément — sa taille est définie par son contenu.</p>
 
-<h2 id="Spécifier_une_taille">Spécifier une taille</h2>
+<h2 id="setting_a_specific_size">Spécifier une taille</h2>
 
-<p>Nous pouvons bien entendu donner une taille spécifique aux éléments. Quand une taille est ainsi donnée à un élément (et que son contenu est adapté à cette taille), nous parlons de <strong>taille extrinsèque</strong>. Reprenons notre <code>&lt;div&gt;</code> de l'exemple précédent — nous pouvons lui donner une  {{cssxref("width")}} spécifique et une {{cssxref("height")}} spécifique, l'élément à désormais une taille définie peu importe ce qui est placé à l'interieur de celui ci. Comme nous l'avons appris dans <a href="/fr/docs/Learn/CSS/Building_blocks/Overflowing_content">notre précédente leçon sur le concept d'overflow,</a> une hauteur définie peut générer un débordement du contenu si celui ci est plus important que l'espace alloué par son conteneur.</p>
+<p>Nous pouvons bien entendu donner une taille spécifique aux éléments. Quand une taille est ainsi donnée à un élément (et que son contenu est adapté à cette taille), nous parlons de <strong>taille extrinsèque</strong>. Reprenons notre <code>&lt;div&gt;</code> de l'exemple précédent — nous pouvons lui donner une <a href="/fr/docs/Web/CSS/width"><code>width</code></a> spécifique et une <a href="/fr/docs/Web/CSS/height"><code>height</code></a> spécifique, l'élément a désormais une taille définie peu importe ce qui est placé à l'intérieur de celui-ci. Comme nous l'avons appris dans <a href="/fr/docs/Learn/CSS/Building_blocks/Overflowing_content">notre précédente leçon sur le concept d'overflow,</a> une hauteur définie peut générer un débordement du contenu si celui-ci est plus important que l'espace alloué par son conteneur.</p>
 
 <p>{{EmbedGHLiveSample("css-examples/learn/sizing/height.html", '100%', 600)}}</p>
 
 <p>Du fait de ce comportement parfois inattendu, fixer la hauteur d'un élément avec une longueur ou en pourcentage est une pratique à utiliser avec parcimonie sur le web.</p>
 
-<h3 id="Avec_les_pourcentages">Avec les pourcentages</h3>
+<h3 id="using_percentages">Avec les pourcentages</h3>
 
-<p>De bien des manières, les pourcentages agissent de la même manière que les unités de longueur, et comme nous l'avons vu dans <a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">la leçon sur les valeurs et unités en CSS</a>, ils peuvent souvent être utilisés de manière interchangeable avec les unités de longueur. Lorsque vous utilisez les pourcentages vous devez seulement être conscient de la valeur auquelle se réfère le pourcentage. Si vous donnez à un bloc enfant une largeur définie en pourcentage, celui ci correspond à un pourcentage de la largeur du conteneur parent.</p>
+<p>De bien des manières, les pourcentages agissent de la même manière que les unités de longueur, et comme nous l'avons vu dans <a href="/fr/docs/Learn/CSS/Building_blocks/Values_and_units">la leçon sur les valeurs et unités en CSS</a>, ils peuvent souvent être utilisés de manière interchangeable avec les unités de longueur. Lorsque vous utilisez les pourcentages vous devez seulement être conscient de la valeur à laquelle se réfère le pourcentage. Si vous donnez à un bloc enfant une largeur définie en pourcentage, celui-ci correspond à un pourcentage de la largeur du conteneur parent.</p>
 
 <p>{{EmbedGHLiveSample("css-examples/learn/sizing/percent-width.html", '100%', 600)}}</p>
 
-<p>En effet, les pourcentages sont determinés en fonction de la taille de l'élément parent. Si aucun pourcentage n'est spécifié, notre <code>&lt;div&gt;</code> prendra 100% de l'espace disponible (car il s'agit du comportement par défaut d'un élément de type bloc). En revanche si nous lui donnons une largeur en pourcentage, ce pourcentage fera référence à l'espace que la <code>&lt;div</code><code>&gt;</code> aurait normalement occupé dans l'élément parent.</p>
+<p>En effet, les pourcentages sont déterminés en fonction de la taille de l'élément parent. Si aucun pourcentage n'est spécifié, notre <code>&lt;div&gt;</code> prendra 100% de l'espace disponible (car il s'agit du comportement par défaut d'un élément de type bloc). En revanche si nous lui donnons une largeur en pourcentage, ce pourcentage fera référence à l'espace que la <code>&lt;div</code><code>&gt;</code> aurait normalement occupé dans l'élément parent.</p>
 
-<h3 id="Marges_et_remplissage_en_pourcentages">Marges et remplissage en pourcentages</h3>
+<h3 id="percentage_margins_and_padding">Marges et remplissage en pourcentages</h3>
 
-<p>Si vous définissez les <code>margins</code> (marges exterieurs) et les <code>paddings</code> (marges intérieurs) avec des pourcentages, vous noterez un comportement inattendu. Dans l'exemple ci-dessous nous avons une boite. Nous avons défini la propriété {{cssxref("margin")}} à 10% et la propriété {{cssxref("padding")}} à 10% également. Les marges intérieurs et exterieurs sur le haut et le bas de la boite ont la même taille que les marges extérieurs sur la gauche et la droite.</p>
+<p>Si vous définissez les <code>margins</code> (marges extérieures) et les <code>paddings</code> (marges intérieurs) avec des pourcentages, vous noterez un comportement inattendu. Dans l'exemple ci-dessous nous avons une boite. Nous avons défini la propriété <a href="/fr/docs/Web/CSS/margin"><code>margin</code></a> à 10% et la propriété <a href="/fr/docs/Web/CSS/padding"><code>padding</code></a> à 10% également. Les marges intérieures et extérieures sur le haut et le bas de la boite ont la même taille que les marges extérieures sur la gauche et la droite.</p>
 
 <p>{{EmbedGHLiveSample("css-examples/learn/sizing/percent-mp.html", '100%', 700)}}</p>
 
-<p>You might expect for example the percentage top and bottom margins to be a percentage of the element's height, and the percentage left and right margins to be a percentage of the element's width. However, this is not the case!</p>
+<p>On pourrait s'attendre, par exemple, à ce que le pourcentage des marges supérieures et inférieures soit un pourcentage de la hauteur de l'élément, et que le pourcentage des marges gauche et droite soit un pourcentage de la largeur de l'élément. Or, ce n'est pas le cas !</p>
 
-<p>When you use margin and padding set in percentages, the value is calculated from the<strong> inline size</strong> — therefore the width when working in a horizontal language. In our example, all of the margins and padding are 10% of the width. This means you can have equal sized margins and padding all round the box. This is a fact worth remembering if you do use percentages in this way.</p>
+<p>Lorsque vous utilisez des marges et des remplissages définis en pourcentages, la valeur est calculée à partir de la <strong>taille en ligne</strong> — donc de la largeur lorsque vous travaillez dans un langage horizontal. Dans notre exemple, toutes les marges et tous les renforts représentent 10 % de la largeur. Cela signifie que vous pouvez avoir des marges et un remplissage de taille égale tout autour de la boîte. C'est un fait dont il faut se souvenir si vous utilisez les pourcentages de cette manière.</p>
 
-<h2 id="tailles_min-_et_max-">tailles min- et max- </h2>
+<h2 id="min-_and_max-_sizes">Tailles min- et max-</h2>
 
-<p>In addition to giving things a fixed size, we can ask CSS to give an element a minimum or a maximum size. If you have a box that might contain a variable amount of content, and you always want it to be <em>at least</em> a certain height, you could set the {{cssxref("min-height")}} property on it. The box will always be at least this height, but will then grow taller if there is more content than the box has space for at its minimum height.</p>
+<p>En plus de donner aux choses une taille fixe, nous pouvons demander à CSS de donner à un élément une taille minimale ou maximale. Si vous avez une boîte qui pourrait contenir une quantité variable de contenu, et que vous voulez toujours qu'elle ait <em>au moins</em> une certaine hauteur, vous pourriez lui attribuer la propriété <a href="/fr/docs/Web/CSS/min-height"><code>min-height</code></a>. La boîte sera toujours, au minimum, de cette hauteur, mais deviendra plus grande s'il y a plus de contenu que la boîte que sa hauteur minimale.</p>
 
-<p>In the example below you can see two boxes, both with a defined height of 150 pixels. The box on the left is 150 pixels tall; the box on the right has content that needs more room, and so it has grown taller than 150 pixels.</p>
+<p>Dans l'exemple ci-dessous, vous pouvez voir deux boîtes, toutes deux ayant une hauteur définie de 150 pixels. La boîte de gauche a une hauteur de 150 pixels ; la boîte de droite a un contenu qui a besoin de plus d'espace, et elle est donc devenue plus haute que 150 pixels.</p>
 
 <p>{{EmbedGHLiveSample("css-examples/learn/sizing/min-height.html", '100%', 800)}}</p>
 
-<p>This is very useful for dealing with variable amounts of content while avoiding overflow.</p>
+<p>C'est très utile pour traiter des quantités variables de contenu tout en évitant les débordements.</p>
 
-<p>A common use of {{cssxref("max-width")}} is to cause images to scale down if there is not enough space to display them at their intrinsic width, while making sure they don't become larger than that width.</p>
+<p>Une utilisation courante de <a href="/fr/docs/Web/CSS/max-width"><code>max-width</code></a> consiste à faire en sorte que les images soient réduites si l'espace est insuffisant pour les afficher à leur largeur intrinsèque, tout en s'assurant qu'elles ne deviennent pas plus grandes que cette largeur.</p>
 
-<p>As an example, if you were to set <code>width: 100%</code> on an image, and its intrinsic width was smaller than its container, the image would be forced to stretch and become larger, causing it to look pixellated. If its intrinsic width were larger than its container, it would overflow it. Neither case is likely to be what you want to happen.</p>
+<p>À titre d'exemple, si vous définissiez <code>width: 100%</code> sur une image, et que sa largeur intrinsèque était inférieure à son conteneur, l'image serait forcée de s'étirer et de s'agrandir, ce qui lui donnerait un aspect pixelisé. Si sa largeur intrinsèque était supérieure à celle de son conteneur, elle le déborderait. Aucun des deux cas n'est susceptible de correspondre à ce que vous souhaitez.</p>
 
-<p>If you instead use <code>max-width: 100%</code>, the image is able to become smaller than its intrinsic size, but will stop at 100% of its size.</p>
+<p>Si vous utilisez plutôt <code>max-width : 100%</code>, l'image est capable de devenir plus petite que sa taille intrinsèque, mais s'arrêtera à 100% de sa taille.</p>
 
-<p>In the example below we have used the same image twice. The first image has been given <code>width: 100%</code> and is in a container which is larger than it, therefore it stretches to the container width. The second image has <code>max-width: 100%</code> set on it and therefore does not stretch to fill the container. The third box contains the same image again, also with <code>max-width: 100%</code> set; in this case you can see how it has scaled down to fit into the box.</p>
+<p>Dans l'exemple ci-dessous, nous avons utilisé trois fois la même image. La première image a reçu le <code>width: 100%</code> et se trouve dans un conteneur plus grand qu'elle, elle s'étire donc à la largeur du conteneur. La deuxième image a été dotée du <code>max-width : 100%</code> et ne s'étire donc pas pour remplir le conteneur. La troisième boîte contient à nouveau la même image, également avec <code>max-width : 100%</code> défini ; dans ce cas, vous pouvez voir comment elle a été réduite pour entrer dans le conteneur.</p>
 
 <p>{{EmbedGHLiveSample("css-examples/learn/sizing/max-width.html", '100%', 800)}}</p>
 
-<p>This technique is used to make images <em>responsive</em>, so that when viewed on a smaller device they scale down appropriately. You should however not use this technique to load in really large images and then scale them down in the browser. Images should be appropriately sized to be no larger than they need to be for the largest size they are displayed in the design. Downloading overly large images will cause your site to become slow, and it can cost users more money if they are on a metered connection.</p>
+<p>Cette technique est utilisée pour rendre les images <em>responsive</em>, de sorte que lorsqu'elles sont visualisées sur un appareil plus petit, elles sont réduites de manière appropriée. Vous ne devez cependant pas utiliser cette technique pour charger des images vraiment grandes et les réduire ensuite dans le navigateur. Les images doivent être correctement dimensionnées pour ne pas être plus grandes qu'elles ne doivent l'être pour la plus grande taille à laquelle elles sont affichées dans la conception. Le téléchargement d'images trop grandes ralentira votre site et peut coûter plus cher aux utilisateurs s'ils disposent d'une connexion limitée.</p>
 
-<div class="blockIndicator note">
-<p><strong>Note </strong>: Find out more about <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">responsive image techniques</a>.</p>
+<div class="notecard note">
+  <p><b>Note :</b> En savoir plus sur <a href="/fr/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">les techniques d'images responsives</a>.</p>
 </div>
 
-<h2 id="Unités_de_la_fenêtre_daffichage">Unités de la fenêtre d'affichage</h2>
+<h2 id="viewport_units">Unités de la fenêtre d'affichage</h2>
 
-<p>La fenêtre — la surface de la page montrée par le navigateur lorsqu'on navigue sur un site — a aussi des dimensions. Certaines unités CSS sont dédiées à la description des dimensions de la fenêtre —  <code>vw</code> pour <em>viewport width</em> (largeur de la fenêtre), et <code>vh</code> pour <em>viewport height </em>(hauteur de la fenêtre). Grâce à ces unités vous pouvez dimensionner un objet en fonction de la fenêtre de l'utilisateur.</p>
+<p>La fenêtre — la surface de la page montrée par le navigateur lorsqu'on navigue sur un site — a aussi des dimensions. Certaines unités CSS sont dédiées à la description des dimensions de la fenêtre — <code>vw</code> pour <em>viewport width</em> (largeur de la fenêtre), et <code>vh</code> pour <em>viewport height </em>(hauteur de la fenêtre). Grâce à ces unités vous pouvez dimensionner un objet en fonction de la fenêtre de l'utilisateur.</p>
 
-<p><code>1vh</code> correspond à 1% dela hauteur de la fenêtre, <code>1vw</code> à 1% sa largeur. Avec ces unités, on peut dimensionner des boîtes aussi bien que du texte. Dans l'exemple ci-dessous, la boîte a pour dimensions 20vh et 20vw. Elle contient la lettre <code>A</code>, de {{cssxref("font-size")}} 10vh.</p>
+<p><code>1vh</code> correspond à 1% de la hauteur de la fenêtre, <code>1vw</code> à 1% sa largeur. Avec ces unités, on peut dimensionner des boîtes aussi bien que du texte. Dans l'exemple ci-dessous, la boîte a pour dimensions 20vh et 20vw. Elle contient la lettre <code>A</code>, de <a href="/fr/docs/Web/CSS/font-size"><code>font-size</code></a> 10vh.</p>
 
 <p>{{EmbedGHLiveSample("css-examples/learn/sizing/vw-vh.html", '100%', 600)}}</p>
 
-<p><strong>If you change the <code>vh</code> and <code>vw</code> values this will change the size of the box or font; changing the viewport size will also change their sizes because they are sized relative to the viewport. To see the example change when you change the viewport size you will need to load the example in a new browser window that you can resize (as the embedded <code>&lt;iframe&gt;</code> that contains the example shown above is its viewport). <a href="https://mdn.github.io/css-examples/learn/sizing/vw-vh.html">Open the example</a>, resize the browser window, and observe what happens to the size of the box and text.</strong></p>
+<p>Si vous changez les valeurs <code>vh</code> et <code>vw</code>, cela modifiera la taille du conteneur ou de la police ; changer la taille de la fenêtre modifiera également leurs tailles, car elles sont dimensionnées par rapport à la fenêtre de vue. Pour voir l'exemple changer lorsque vous modifiez la taille de la fenêtre, vous devrez charger l'exemple dans une nouvelle fenêtre de navigateur que vous pouvez redimensionner (car le <code>&lt;iframe&gt;</code> intégré qui contient l'exemple montré ci-dessus est sa fenêtre de vue). <a href="https://mdn.github.io/css-examples/learn/sizing/vw-vh.html">Ouvrez l'exemple</a>, redimensionnez la fenêtre du navigateur et observez ce qui se passe pour la taille de la boîte et du texte.</p>
+
+<p>Dimensionner les objets en fonction de la fenêtre peut s'avérer utile. Par exemple, pour afficher la section principale en pleine page, il suffit de lui attribuer 100vh, cela poussera le reste du contenu sous la fenêtre ; le reste du contenu n'apparaîtra qu'en la faisant défiler.</p>
+
+<h2 id="test_your_skills">Testez vos compétences !</h2>
 
-<p>Dimensionner les objets en fonction de la fenêtre peut s'avérer utile. Par exemple, pour afficher la section principale en pleine page, il suffit de lui attribuer 100vh, cela poussera le reste du contenu sous la fenêtre ; le reste du contenu n'apparaîtra qu'en la faisant défiler.</p>
+<p>Nous avons abordé beaucoup de choses dans cet article, mais pouvez-vous vous souvenir des informations les plus importantes ? Vous pouvez trouver d'autres tests pour vérifier que vous avez retenu ces informations avant de passer à autre chose — voir <a href="/fr/docs/Learn/CSS/Building_blocks/Sizing_tasks">Tester vos compétences : Dimensionnement</a>.</p>
 
-<h2 id="Résumé">Résumé</h2>
+<h2 id="summary">Résumé</h2>
 
-<p>Cette leçon a voulu vous sensibiliser aux difficultés principales qu'on rencontre dès qu'on veut donner une dimension aux objets sur le Web. When you move onto <a href="/en-US/docs/Learn/CSS/CSS_layout">CSS Layout</a>, sizing will become very important in mastering the different layout methods, so it is worth understanding the concepts here before moving on.</p>
+<p>Cette leçon a voulu vous sensibiliser aux difficultés principales qu'on rencontre dès qu'on veut donner une dimension aux objets sur le Web. Lorsque vous verrez <a href="/fr/docs/Learn/CSS/CSS_layout">les dispositions en CSS</a>, le dimensionnement deviendra crucial pour maîtriser les différents modes de disposition : autant en comprendre les concepts avant d'aller plus loin.</p>
 
 <p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Values_and_units", "Learn/CSS/Building_blocks/Images_media_form_elements", "Learn/CSS/Building_blocks")}}</p>
 
-<h2 id="Dans_ce_cours">Dans ce cours</h2>
+<h2 id="in_this_module">Dans ce module</h2>
 
 <ol>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Cascade and inheritance</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">CSS selectors</a>
+ <li><a href="/fr/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Cascade et héritage</a></li>
+ <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors">Sélecteurs CSS</a>
   <ul>
-   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Type, class, and ID selectors</a></li>
-   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Attribute selectors</a></li>
-   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Pseudo-classes and pseudo-elements</a></li>
-   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Combinators</a></li>
+   <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Sélecteurs de type, de classe et d'ID</a></li>
+   <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Sélecteurs d'attributs</a></li>
+   <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Pseudo-classes et pseudo-éléments</a></li>
+   <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Combinateurs</a></li>
   </ul>
  </li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">The box model</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Backgrounds and borders</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Handling different text directions</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content">Overflowing content</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">Values and units</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Sizing items in CSS</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Images, media, and form elements</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Styling_tables">Styling tables</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS">Debugging CSS</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing">Organizing your CSS</a></li>
+ <li><a href="/fr/docs/Learn/CSS/Building_blocks/The_box_model">Le modèle de boîte</a></li>
+ <li><a href="/fr/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Arrière-plans et bordures</a></li>
+ <li><a href="/fr/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Gestion de différentes directions de texte</a></li>
+ <li><a href="/fr/docs/Learn/CSS/Building_blocks/Overflowing_content">Débordements de contenu</a></li>
+ <li><a href="/fr/docs/Learn/CSS/Building_blocks/Values_and_units">Valeurs et unités CSS</a></li>
+ <li><a href="/fr/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Définir la taille des éléments en CSS</a></li>
+ <li><a href="/fr/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Images, médias et éléments de formulaire</a></li>
+ <li><a href="/fr/docs/Learn/CSS/Building_blocks/Styling_tables">Mise en page de tableaux</a></li>
+ <li><a href="/fr/docs/Learn/CSS/Building_blocks/Debugging_CSS">Débogage de CSS</a></li>
+ <li><a href="/fr/docs/Learn/CSS/Building_blocks/Organizing">Organiser votre CSS</a></li>
 </ol>
diff --git a/files/fr/learn/css/building_blocks/the_box_model/index.html b/files/fr/learn/css/building_blocks/the_box_model/index.html
index 82b3ffdeff..a673fb36d6 100644
--- a/files/fr/learn/css/building_blocks/the_box_model/index.html
+++ b/files/fr/learn/css/building_blocks/the_box_model/index.html
@@ -1,52 +1,37 @@
 ---
-title: Le modèle de Boîte
+title: Le modèle de boîte
 slug: Learn/CSS/Building_blocks/The_box_model
-tags:
-  - Boîte
-  - CSS
-  - Disposition
-  - Débutant
-  - Mise en page
-  - Model
-  - Modèle
-  - Position
-  - Positionnement
-  - border
-  - box
-  - display
-  - margin
-  - padding
 translation_of: Learn/CSS/Building_blocks/The_box_model
 original_slug: Apprendre/CSS/Building_blocks/Le_modele_de_boite
 ---
 <div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks/Backgrounds_and_borders", "Learn/CSS/Building_blocks")}}</div>
 
-<p>En CSS, tout élement est inclus dans une boîte ("<em>box</em>" en anglais). Comprendre le fonctionnement de ces boîtes est essentiel pour maîtriser la mise en page CSS ainsi que le positionement des élements d'une page HTML. Dans cette leçon, nous verrons en détails le <em>Modèle de Boîtes CSS</em> - son fonctionnement ainsi que sa terminologie - pour vous permettre de réaliser des mises en pages plus complexes.</p>
+<p>En CSS, tout élément est inclus dans une boîte ("<em>box</em>" en anglais). Comprendre le fonctionnement de ces boîtes est essentiel pour maîtriser la mise en page CSS ainsi que le positionement des éléments d'une page HTML. Dans cette leçon, nous verrons en détails le <em>Modèle de Boîtes CSS</em> - son fonctionnement ainsi que sa terminologie - pour vous permettre de réaliser des mises en pages plus complexes.</p>
 
 <table class="learn-box standard-table">
  <tbody>
   <tr>
-   <th scope="row">Prérequis:</th>
-   <td>Compétences informatique basiques, <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Installing_basic_software">Logiciels de base installés</a>, connaissance simple en <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">manipulation de fichiers</a>, les bases du HTML (voir <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction au HTML</a>), et une esquisse du fonctionnement du CSS (voir <a href="/en-US/docs/Learn/CSS/First_steps">premiers pas en CSS</a>).</td>
+   <th scope="row">Prérequis&nbsp;:</th>
+   <td>Compétences informatique basiques, <a href="/fr/docs/Learn/Getting_started_with_the_web/Installing_basic_software">Logiciels de base installés</a>, connaissance simple en <a href="/fr/docs/Learn/Getting_started_with_the_web/Dealing_with_files">manipulation de fichiers</a>, les bases du HTML (voir <a href="/fr/docs/Learn/HTML/Introduction_to_HTML">Introduction au HTML</a>), et une esquisse du fonctionnement du CSS (voir <a href="/fr/docs/Learn/CSS/First_steps">premiers pas en CSS</a>).</td>
   </tr>
   <tr>
-   <th scope="row">Objectif:</th>
+   <th scope="row">Objectif&nbsp;:</th>
    <td>Apprendre les principes du Modèle de Boîte en CSS, ce qui constitue le Modèle de Boîte et comment passer au modèle alternatif.</td>
   </tr>
  </tbody>
 </table>
 
-<h2 id="Les_Boîtes_en_ligne_et_en_bloc">Les Boîtes "en ligne" et "en bloc"</h2>
+<h2 id="block_and_inline_boxes">Les boîtes en ligne et boîte de bloc</h2>
 
-<p>En CSS, il existe deux type de boîtes : les boîtes <strong>en bloc</strong> ("<em>block boxes</em>" en anglais) et les boîtes <strong>en ligne</strong> (<em>"inline boxes"</em>). Ces deux qualifications renvoient au comportement de la boîte au sein de la page et vis à vis des autres boîtes :</p>
+<p>En CSS, il existe deux type de boîtes : les boîtes <strong>en bloc</strong> ("<em>block boxes</em>" en anglais) et les boîtes <strong>en ligne</strong> (<em>"inline boxes"</em> en anglais ou également « boîtes en incise » en français). Ces deux qualifications renvoient au comportement de la boîte au sein de la page et vis-à-vis des autres boîtes :</p>
 
 <p>Si une boîte est définie en bloc, elle suivra alors les règles suivantes :</p>
 
 <ul>
  <li>La boîte s'étend en largeur pour remplir totalement l'espace offert par son conteneur. Dans la plupart des cas, la boîte devient alors aussi large que son conteneur, occupant 100% de l'espace disponible.</li>
  <li>La boîte occupe sa propre nouvelle ligne et créé un retour à la ligne, faisant ainsi passer les éléments suivants à la ligne d'après.</li>
- <li>Les propriétés de largeur ({{cssxref("width")}}) et de hauteur ({{cssxref("height")}}) sont toujours respectées.</li>
- <li>Les propriétés {{cssxref("padding")}}, {{cssxref("margin")}} et {{cssxref("border")}} — correspondantes respectivement aux écarts de remplissage interne, externe et à la bordure de la boîte — auront pour effet de repousser les autres éléments.</li>
+ <li>Les propriétés de largeur (<a href="/fr/docs/Web/CSS/width"><code>width</code></a>) et de hauteur (<a href="/fr/docs/Web/CSS/height"><code>height</code></a>) sont toujours respectées.</li>
+ <li>Les propriétés <a href="/fr/docs/Web/CSS/padding"><code>padding</code></a>, <a href="/fr/docs/Web/CSS/margin"><code>margin</code></a> et <a href="/fr/docs/Web/CSS/border"><code>border</code></a> — correspondantes respectivement aux écarts de <i lang="en">padding</i>, à la marge et à la bordure de la boîte — auront pour effet de repousser les autres éléments.</li>
 </ul>
 
 <p>À moins que l'on ne décide de changer le type de positionnement de la boîte en "en ligne", certains éléments tels que les titres (<code>&lt;h1&gt;</code>,<code>&lt;h2&gt;</code>, etc.) et les paragraphes (<code>&lt;p&gt;</code>) utilisent le mode "bloc" comme propriété de positionnement extérieur par défaut.</p>
@@ -55,40 +40,40 @@ original_slug: Apprendre/CSS/Building_blocks/Le_modele_de_boite
 
 <ul>
  <li>La boîte ne crée pas de retour à la ligne, les autres éléments se suivent donc en ligne.</li>
- <li>Les propriétés de largeur ({{cssxref("width")}}) et de hauteur ({{cssxref("height")}}) ne s'appliquent pas.</li>
- <li>Le padding, les marges et les bordures verticales (en haut et en bas) seront appliquées mais ne provoqueront pas de déplacement des éléments alentours.</li>
- <li>Le padding, les marges et les bordures horizontales (à gauche et à droite) seront appliquées et provoqueront le déplacement des éléments alentours.</li>
+ <li>Les propriétés de largeur (<a href="/fr/docs/Web/CSS/width"><code>width</code></a>) et de hauteur (<a href="/fr/docs/Web/CSS/height"><code>height</code></a>) ne s'appliquent pas.</li>
+ <li>Le <i lang="en">padding</i>, les marges et les bordures verticales (en haut et en bas) seront appliquées mais ne provoqueront pas de déplacement des éléments alentours.</li>
+ <li>Le <i lang="en">padding</i>, les marges et les bordures horizontales (à gauche et à droite) seront appliquées et provoqueront le déplacement des éléments alentours.</li>
 </ul>
 
 <p>Les éléments <code>&lt;a&gt;</code>, utilisés pour les liens, ou encore <code>&lt;span&gt;</code>, <code>&lt;em&gt;</code> et <code>&lt;strong&gt;</code> sont tous des éléments qui s'affichent "en ligne" par défaut.</p>
 
-<p>Le type de boîte appliqué à un élement est défini par la valeur de la propriété {{cssxref("display")}} tel que <code>block</code> ou <code>inline</code>, et se réfère à la valeur extérieur de positionnement (ou "<em>display</em>" en anglais).</p>
+<p>Le type de boîte appliqué à un élément est défini par la valeur de la propriété <a href="/fr/docs/Web/CSS/display"><code>display</code></a> tel que <code>block</code> ou <code>inline</code>, et se réfère à la valeur extérieure de positionnement (ou "<em>display</em>" en anglais).</p>
 
-<h2 id="Aparté_Les_positionnements_intérieurs_et_extérieurs">Aparté : Les positionnements intérieurs et extérieurs</h2>
+<h2 id="aside_inner_and_outer_display_types">Aparté : les positionnements intérieurs et extérieurs</h2>
 
 <p>Au point où nous en sommes, il faut aborder la différence entre les propriétés de positionnement <strong>intérieurs</strong> ("<em>inner dipslay</em>") et <strong>extérieurs</strong> ("<em>outer display</em>"). Comme nous l'avons évoqué, les boîtes en CSS possèdent un type de positionnement <em>extérieur</em> qui détermine si la boîte est "en ligne" ou bien "en bloc".</p>
 
-<p>Cependant, les boîtes ont aussi un type de positionnement intérieur, qui décrit le comportement de mise en page des élements contenus dans la boîte. Par défaut, les éléments contenus dans la boîte sont affichés dans la <strong><a href="/en-US/docs/Learn/CSS/CSS_layout/Normal_Flow">disposition normale</a></strong>, ce qui signifie qu'ils se comportent exactement comme n'importe quel autre élément "en bloc" ou "en ligne" (comme décrit auparavant).</p>
+<p>Cependant, les boîtes ont aussi un type de positionnement intérieur, qui décrit le comportement de mise en page des éléments contenus dans la boîte. Par défaut, les éléments contenus dans la boîte sont affichés dans la <strong><a href="/fr/docs/Learn/CSS/CSS_layout/Normal_Flow">disposition normale</a></strong>, ce qui signifie qu'ils se comportent exactement comme n'importe quel autre élément "en bloc" ou "en ligne" (comme décrit auparavant).</p>
 
-<p>Ce type de positionnement intérieur peut naturellement être modifié, en utilisant la valeur <code>flex</code> de la propriété <code>display</code>. Ainsi, si on donne la propriété <code>display: flex;</code> à un élément, son type depositionnement extérieur est "en bloc" (<code>block</code>), mais son type de positionnement intérieur est modifié en <code>flex</code>. Tout élément directement enfant de cette boîte se voit alors changé en élément flex, et sera mis en page selon les règles précisées dans les spécifications de <a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a>, dont on reparlera plus tard.</p>
+<p>Ce type de positionnement intérieur peut naturellement être modifié, en utilisant la valeur <code>flex</code> de la propriété <code>display</code>. Ainsi, si on donne la propriété <code>display: flex;</code> à un élément, son type de positionnement extérieur est "en bloc" (<code>block</code>), mais son type de positionnement intérieur est modifié en <code>flex</code>. Tout élément directement enfant de cette boîte se voit alors changé en élément flex, et sera mis en page selon les règles précisées dans les spécifications de <a href="/fr/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a>, dont on reparlera plus tard.</p>
 
 <div class="blockIndicator note">
-<p><strong>Note </strong>: Pour en apprendre d'avantage sur les valeurs prises par la propriété display, et le comportement des boîtes dans une mise en page en bloc ou en ligne, jettez un coup d'oeil au guide MDN sur la <a href="/en-US/docs/Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow">Disposition en ligne et en bloc</a>.</p>
+<p><strong>Note </strong>: Pour en apprendre d'avantage sur les valeurs prises par la propriété display, et le comportement des boîtes dans une mise en page en bloc ou en ligne, jettez un coup d'oeil au guide MDN sur la <a href="/fr/docs/Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow">Disposition en ligne et en bloc</a>.</p>
 </div>
 
-<p>Lorque vous en apprendrez plus sur la mise en page en CSS, vous découvrirez une variété d'autres valeurs de positionnement intérieur pour une boîte, tel que <code>flex</code>, ou encore <code><a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">grid</a></code>.</p>
+<p>Lorsque vous en apprendrez plus sur la mise en page en CSS, vous découvrirez une variété d'autres valeurs de positionnement intérieur pour une boîte, tel que <code>flex</code>, ou encore <code><a href="/fr/docs/Learn/CSS/CSS_layout/Grids">grid</a></code>.</p>
 
-<p>Les dipositions "en ligne" et "en bloc" demeurent néanmoins le comportement par défaut des éléments sur le web — ce qui, comme nous l'avons vu, est appelé la <strong>disposition normale</strong> ("<em>normal flow</em>" en anglais), puisque sans instructions supplémentaires de notre part, c'est ainsi que les boîtes sont mises en page.</p>
+<p>Les dispositions "en ligne" et "en bloc" demeurent néanmoins le comportement par défaut des éléments sur le Web — ce qui, comme nous l'avons vu, est appelé la <strong>disposition normale</strong> ("<em>normal flow</em>" en anglais), puisque sans instructions supplémentaires de notre part, c'est ainsi que les boîtes sont mises en page.</p>
 
-<h2 id="Exemples_de_quelques_types_de_positionnement">Exemples de quelques types de positionnement</h2>
+<h2 id="examples_of_different_display_types">Exemples de quelques types de positionnement</h2>
 
-<p>Lançons nous à présent dans la pratique et étudions quelques exemples. Vous trouverez ci-dessous trois éléments HTML différents, mais qui sont tous en postionnement extérieur "en bloc" (<code>block</code>). Le premier est un paragraphe, possèdant une bordure (un cadre) ajoutée en CSS. Le navigateur va alors disposer l'élément comme une boîte "en bloc" lors de sa phase de rendu : le paragraphe occupe alors sa propre nouvelle ligne et s'étend en largeur pour occuper tout l'espace disponible.</p>
+<p>Lançons nous à présent dans la pratique et étudions quelques exemples. Vous trouverez ci-dessous trois éléments HTML différents, mais qui sont tous en postionnement extérieur "en bloc" (<code>block</code>). Le premier est un paragraphe, possèdant une bordure ajoutée en CSS. Le navigateur va alors disposer l'élément comme une boîte "en bloc" lors de sa phase de rendu : le paragraphe occupe alors sa propre nouvelle ligne et s'étend en largeur pour occuper tout l'espace disponible.</p>
 
-<p>Le deuxième élément est une liste, qui est disposée selon la règle <code>display: flex;</code>. Ceci définit une mise en page "flex" pour tous les éléments contenue dans la liste, bien que la liste en elle-même est en disposition "en bloc" — c'est pourquoi elle s'étend en largeur sur une nouvelle ligne, exactement comme le premier paragraphe.</p>
+<p>Le deuxième élément est une liste, qui est disposée selon la règle <code>display: flex;</code>. Ceci définit une mise en page "flex" pour tous les éléments contenus dans la liste, bien que la liste en elle-même est en disposition "en bloc" — c'est pourquoi elle s'étend en largeur sur une nouvelle ligne, exactement comme le premier paragraphe.</p>
 
 <p>Juste en dessous, se trouve un autre paragraphe, diposé en bloc comme le précédent, dans lequel sont insérés deux éléments <code>&lt;span&gt;</code>. Ces deux éléments sont par défaut disposés "en ligne". Cependant, on a ajouté à l'un des deux <code>&lt;span&gt;</code> une classe CSS nommée "block" qui lui attribue la propriété <code>display: block;</code>, ce qui explique la différence de mise en page observée.</p>
 
-<p>{{EmbedGHLiveSample("css-examples/learn/box-model/block.html", '100%', 1000)}} </p>
+<p>{{EmbedGHLiveSample("css-examples/learn/box-model/block.html", '100%', 1050)}}</p>
 
 <p>Nous avons dans cet exemple le comportement typique d'un élément en ligne (<code>inline</code>), observant chacune des règles énoncées plus haut : l'élément <code>&lt;span&gt;</code> du premier paragraphe ne force pas de retour à la ligne et se place à la suite - <em>en ligne</em> donc - des autres éléments.</p>
 
@@ -98,38 +83,38 @@ original_slug: Apprendre/CSS/Building_blocks/Le_modele_de_boite
 
 <p><strong>Dans cet exemple, nous vous invitons à passer de <code>display: inline;</code> à <code>display: block;</code> ou encore de <code>display: inline-flex;</code> à <code>display: flex;</code> pour observer les modifications apportées par ces modes de positionnement.</strong></p>
 
-<p>{{EmbedGHLiveSample("css-examples/learn/box-model/inline.html", '100%', 1000)}} </p>
+<p>{{EmbedGHLiveSample("css-examples/learn/box-model/inline.html", '100%', 1000)}}</p>
 
-<p>Vous rencontrerez des mises en page de type "flex" plus tard dans ces lessons, pas d'inquiétude si ce type de positionnement n'est pas maîtrisé. L'important est ici de se souvenir que c'est la valeur de la propriété <code>display</code> qui permet de modifier l'affichage extérieur (en ligne ou en bloc), ce qui définit l'interaction de la boîte par rapport à son environement dans la mise en page.</p>
+<p>Vous rencontrerez des mises en page de type "flex" plus tard dans ces lessons, pas d'inquiétude si ce type de positionnement n'est pas maîtrisé. L'important est ici de se souvenir que c'est la valeur de la propriété <code>display</code> qui permet de modifier l'affichage extérieur (en ligne ou en bloc), ce qui définit l'interaction de la boîte par rapport à son environnement dans la mise en page.</p>
 
 <p>Pour le reste de la leçon, nous ne parlerons plus que du <strong>type de positionnement extérieur</strong>.</p>
 
-<h2 id="Quest-ce_que_le_Modèle_de_Boîte_en_CSS">Qu'est-ce que le Modèle de Boîte en CSS ?</h2>
+<h2 id="what_is_the_css_box_model">Qu'est-ce que le modèle de boîte CSS ?</h2>
 
-<p>Le modèle de boîte que nous allons voir s'applique totalement aux boîtes en bloc, mais les boîtes en ligne ne reprennent que certains aspects — le modèle est alors simplifié ! Ce modèle définit comment chaque composant de la boîte, à savoir le <em>margin</em> (remplissage extérieur), le <em>border</em> (cadre), le <em>padding</em> (remplissage intérieur) et le contenu, fonctionnent ensemble pour former l'aspect final rendu à l'écran. Pour ajouter un soupçon de complexité, il est aussi possible de passer du modèle standard à un modèle alternatif.</p>
+<p>Le modèle de boîte que nous allons voir s'applique totalement aux boîtes en bloc, mais les boîtes en ligne ne reprennent que certains aspects — le modèle est alors simplifié ! Ce modèle définit comment chaque composant de la boîte, à savoir la <em>marge</em>, la <em>bordure</em>, le <em>padding</em> (remplissage intérieur) et le contenu, fonctionnent ensemble pour former l'aspect final rendu à l'écran. Pour ajouter un soupçon de complexité, il est aussi possible de passer du modèle standard à un modèle alternatif.</p>
 
-<h3 id="Les_composants_dune_boîte">Les composants d'une boîte</h3>
+<h3 id="parts_of_a_box">Les composants d'une boîte</h3>
 
 <p>Lorsque l'on crée une boîte en bloc, on se retrouve avec les composants suivant :</p>
 
 <ul>
- <li><strong>La boîte de contenu </strong>: Il s'agit de la zone où sont affichés les éléments contenus par notre boîte, qui peut être dimensionnée en utilisant les propriétés CSS {{cssxref("width")}} et {{cssxref("height")}}.</li>
- <li><strong>La boîte de padding</strong> <strong>(marge intérieure) </strong>: Le padding est une zone vierge qui se présente comme un espacement encadrant le contenu; sa taille peut être controllée sur chaque côté en utilisant la propriété {{cssxref("padding")}} et ses autres propriétés connexes.</li>
- <li><strong>La boîte du cadre </strong>: Le cadre englobe le contenu et le padding pour former une bordure. Sa taille et son style sont paramétrés par la propriété {{cssxref("border")}} et ses propriétés sous-jacentes.</li>
- <li><strong>La boîte de margin (marge extérieure)</strong> : Le margin est la couche la plus à l'extérieur, englobant le contenu, le padding and le border. Comme le padding, il s'agit d'une zone vierge d'espacement mais qui est cette fois située a l'extérieur de l'élément, séparant l'élément des autres éléments de la page. sa taille peut être controllée sur chaque côté en utilisant la propriété {{cssxref("margin")}} et ses autres propriétés connexes.</li>
+ <li><strong>La boîte de contenu&nbsp;</strong>: Il s'agit de la zone où sont affichés les éléments contenus par notre boîte, qui peut être dimensionnée en utilisant les propriétés CSS <a href="/fr/docs/Web/CSS/width"><code>width</code></a> et <a href="/fr/docs/Web/CSS/height"><code>height</code></a>.</li>
+ <li><strong>La boîte de <i lang="en">padding</i></strong> <strong>(marge intérieure)&nbsp;</strong>: Le <i lang="en">padding</i> (ou remplissage en français) est une zone vierge qui se présente comme un espacement encadrant le contenu; sa taille peut être contrôlée sur chaque côté en utilisant la propriété <a href="/fr/docs/Web/CSS/padding"><code>padding</code></a> et ses autres propriétés connexes.</li>
+ <li><strong>La boîte de bordure&nbsp;</strong>: La bordure englobe le contenu et le <i lang="en">padding</i> pour former une bordure. Sa taille et son style sont paramétrés par la propriété <a href="/fr/docs/Web/CSS/border"><code>border</code></a> et ses propriétés sous-jacentes.</li>
+ <li><strong>La boîte de marge&nbsp;</strong>: La marge est la couche la plus à l'extérieur, englobant le contenu, le <i lang="en">padding</i> et la bordure. Comme le <i lang="en">padding</i>, il s'agit d'une zone vierge d'espacement mais qui est cette fois située à l'extérieur de l'élément, séparant l'élément des autres éléments de la page. sa taille peut être contrôlée sur chaque côté en utilisant la propriété <a href="/fr/docs/Web/CSS/margin"><code>margin</code></a> et ses autres propriétés connexes.</li>
 </ul>
 
 <p>Le schéma ci-dessous montre la structure de ces différentes couches:</p>
 
-<p><img alt="Diagram of the box model" src="https://mdn.mozillademos.org/files/16558/box-model.png" style="height: 300px; width: 544px;"></p>
+<p><img alt="Diagramme du modèle de boîte" src="box-model.png"></p>
 
-<h3 id="Le_Modèle_Standard_de_Boîte_CSS">Le Modèle Standard de Boîte CSS</h3>
+<h3 id="the_standard_css_box_model">Le modèle de boîte CSS standard</h3>
 
-<p>Dans le modèle standard, lorsque vous spécifiez les propriétés de largeur (<code>width</code>) et de hauteur (<code>height</code>), celles-ci définissent alors la hauteur et la largeur de la boîte de contenu (la boîte la plus à l'intérieur donc). La taille des padding et du border (s'ils existent) s'ajoutent à la largeur et à la hauteur définies dans <code>width</code> et <code>height</code> pour obtenir les dimensions totales occupées par la boîte. Le margin étant extérieur, il ne rentre pas dans le compte. Ce principe est illustré dans l'exemple ci-dessous.</p>
+<p>Dans le modèle standard, lorsque vous spécifiez les propriétés de largeur (<code>width</code>) et de hauteur (<code>height</code>), celles-ci définissent alors la hauteur et la largeur de la boîte de contenu (la boîte la plus à l'intérieur donc). La taille du <i lang="en">padding</i> et de la bordure (s'ils existent) s'ajoutent à la largeur et à la hauteur définies dans <code>width</code> et <code>height</code> pour obtenir les dimensions totales occupées par la boîte. La marge étant extérieure, elle ne rentre pas dans le compte. Ce principe est illustré dans l'exemple ci-dessous.</p>
 
 <p>En prenant une boîte définie avec les valeurs suivantes de <code>width</code>, <code>height</code>, <code>margin</code>, <code>border</code> et <code>padding</code> :</p>
 
-<pre class="brush: css notranslate">.box {
+<pre class="brush: css">.box {
   width: 350px;
   height: 150px;
   margin: 10px;
@@ -140,166 +125,166 @@ original_slug: Apprendre/CSS/Building_blocks/Le_modele_de_boite
 
 <p>L'espace occupé par notre boîte dans le modèle standard vaut alors 410px (350 + 25 + 25 + 5 + 5), et la hauteur, 210px (150 + 25 + 25 + 5 + 5), en ajoutant bien les valeurs de <code>padding</code> et de <code>border</code> (deux fois, car ces marges sont présentes aux deux extrêmités de la largeur et de la longeur), aux valeurs de <code>width</code> et de <code>height</code>.</p>
 
-<p><img alt="Showing the size of the box when the standard box model is being used." src="https://mdn.mozillademos.org/files/16559/standard-box-model.png" style="height: 300px; width: 500px;"></p>
+<p><img alt="Illustration de la taille de la boîte lorsqu'on utilise le modèle de boîte standard." src="standard-box-model.png"></p>
 
 <div class="blockIndicator note">
-<p><strong>Note </strong>: Le margin (marge extérieure) n'est pas comptabilisé dans la taille totale de la boîte — car bien qu'elle affecte l'espace que la boîte va prendre en définitive dans la page, il ne s'agit que de l'espace extérieur à la boîte. La zone couverte par la boîte s'arrête donc au border (le cadre) et ne s'étend pas au margin.</p>
+<p><strong>Note </strong>: La marge n'est pas comptabilisée dans la taille totale de la boîte — car bien qu'elle affecte l'espace que la boîte va prendre en définitive dans la page, il ne s'agit que de l'espace extérieur à la boîte. La zone couverte par la boîte s'arrête donc à la bordure et ne s'étend pas à la marge.</p>
 </div>
 
-<h3 id="Le_Modèle_Alternatif_de_Boîte_CSS">Le Modèle Alternatif de Boîte CSS</h3>
+<h3 id="the_alternative_css_box_model">Le modèle de boîte CSS alternatif</h3>
 
-<p>À ce stade, vous pourriez penser qu'il n'est pas très commode d'avoir à ajouter constament les dimensions du border et du padding aux dimensions du conteneur pour obtenir les dimensions totales de la boîte, et vous n'auriez pas tort ! Pour cela, le CSS possède un modèle de boîte alternatif introduit peu de temps après le modèle standard. En utilisant ce modèle, les paramètres width et height définissent la largeur et la hauteur <strong>totale</strong> de la boîte en comprenant le contenu, le padding et le border. Ainsi, pour obtenir la taille du contenu, il faut retirer aux dimension la taille du padding et du border. En reprenant l'exemple précédent avec ce modèle, on obtiendrait les dimensions suivantes: width = 350px, height = 150px.</p>
+<p>À ce stade, vous pourriez penser qu'il n'est pas très commode d'avoir à ajouter constamment les dimensions de la bordure et du <i lang="en">padding</i> aux dimensions du conteneur pour obtenir les dimensions totales de la boîte, et vous n'auriez pas tort ! Pour cela, le CSS possède un modèle de boîte alternatif introduit peu de temps après le modèle standard. En utilisant ce modèle, les paramètres width et height définissent la largeur et la hauteur <strong>totale</strong> de la boîte en comprenant le contenu, le <i lang="en">padding</i> et la bordure. Ainsi, pour obtenir la taille du contenu, il faut retirer aux dimensions la taille du <i lang="en">padding</i> et de la bordure. En reprenant l'exemple précédent avec ce modèle, on obtiendrait les dimensions suivantes : largeur = 350px, hauteur = 150px.</p>
 
-<p><img alt="Showing the size of the box when the alternate box model is being used." src="https://mdn.mozillademos.org/files/16557/alternate-box-model.png" style="height: 240px; width: 440px;"></p>
+<p><img alt="Illustration de la taille de la boîte lorsqu'on utilise le modèle de boîte alternatif." src="alternate-box-model.png"></p>
 
-<p>Le navigateur utilise le modèle standard par défaut. Pour utiliser le modèle alternatif, il faut  définir la propriété <code>box-sizing: border-box;</code> sur notre boîte. Cela revient à demander au navigateur de considérer la <strong>boîte du cadre</strong> (la "<em>border box</em>") comme la zone d'effet de <code>width</code> et <code>height</code>, et non la boîte du contenu comme dans le modèle standard !</p>
+<p>Le navigateur utilise le modèle standard par défaut. Pour utiliser le modèle alternatif, il faut définir la propriété <code>box-sizing: border-box;</code> sur notre boîte. Cela revient à demander au navigateur de considérer la <strong>boîte de la bordure</strong> comme la zone d'effet de <code>width</code> et <code>height</code>, et non la boîte du contenu comme dans le modèle standard !</p>
 
-<pre class="brush: css notranslate"><code>.box {
+<pre class="brush: css">.box {
   box-sizing: border-box;
-} </code></pre>
+} </pre>
 
-<p>Si vous désirez utiliser le modèle alternatif sur tous vos éléments — ce qui est un choix répendu parmi certains cercles de développeurs — vous pouvez le faire simplement à l'aide de ces quelques instructions ci-dessous, en utilisant <code>box-sizing</code> sur l'élément <code>&lt;html&gt;</code> et en utilisant l'effet cascade du CSS en paramètrant tous les autres éléments sur la valeur hérité du parent (<code>inherit</code>). Si vous tenez à comprendre le raisonnement derrière ce code, regardez du coté de <a href="https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/">l'article des Astuces CSS sur box-sizing</a>.</p>
+<p>Si vous désirez utiliser le modèle alternatif sur tous vos éléments — ce qui est un choix répandu parmi certains cercles de développeurs — vous pouvez le faire simplement à l'aide des quelques instructions ci-dessous, en utilisant <code>box-sizing</code> sur l'élément <code>&lt;html&gt;</code> et en utilisant l'effet cascade du CSS en paramétrant tous les autres éléments sur la valeur héritée du parent (<code>inherit</code>). Si vous tenez à comprendre le raisonnement derrière ce code, regardez du côté de <a href="https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/">l'article des Astuces CSS sur box-sizing</a>.</p>
 
-<pre class="brush: css notranslate"><code class="language-css"><span class="selector token">html</span> <span class="punctuation token">{</span>
-  <span class="property token">box-sizing</span><span class="punctuation token">:</span> border-box<span class="punctuation token">;</span>
-<span class="punctuation token">}</span>
-<span class="selector token">*, *<span class="pseudo-element token">::before</span>, *<span class="pseudo-element token">::after</span></span> <span class="punctuation token">{</span>
-  <span class="property token">box-sizing</span><span class="punctuation token">:</span> inherit<span class="punctuation token">;</span>
-<span class="punctuation token">}</span></code></pre>
+<pre class="brush: css">html {
+  box-sizing: border-box;
+}
+*, *::before, *::after {
+  box-sizing: inherit;
+}</pre>
 
 <div class="blockIndicator note">
-<p><strong>Note </strong>: Pour l'anecdote, le navigateur Internet Explorer utilisait historiquement le modèle alternatif par defaut — sans pour autant fournir un moyen de passer à l'autre modèle !</p>
+<p><strong>Note </strong>: Pour l'anecdote, le navigateur Internet Explorer utilisait historiquement le modèle alternatif par defaut — sans pour autant fournir un moyen de passer à l'autre modèle !</p>
 </div>
 
-<h2 id="Manipuler_les_modèles_de_boîtes">Manipuler les modèles de boîtes</h2>
+<h2 id="playing_with_box_models">Manipuler les modèles de boîte</h2>
 
 <p>Dans l'exemple ci-dessous, se trouvent deux boîtes. Ces deux boîtes possèdent la classe <code>.box</code> qui leur confère les mêmes valeurs pour les propriétés <code>width</code>, <code>height</code>, <code>margin</code>, <code>border</code> et <code>padding</code>. La seule différence est que la seconde boîte utilise le modèle alternatif.</p>
 
 <p><strong>Pouvez-vous modifier les dimensions de la seconde boîte (en lui ajoutant le CSS dans la classe <code>.alternate</code>) pour lui permettre d'avoir la même hauteur et largeur finale que l'autre boîte ?</strong></p>
 
-<p>{{EmbedGHLiveSample("css-examples/learn/box-model/box-models.html", '100%', 1000)}} </p>
+<p>{{EmbedGHLiveSample("css-examples/learn/box-model/box-models.html", '100%', 1000)}}</p>
 
 <div class="blockIndicator note">
 <p><strong>Note</strong>: vous pouvez trouver une solution <a href="https://github.com/mdn/css-examples/blob/master/learn/solutions.md#the-box-model">ici</a>.</p>
 </div>
 
-<h3 id="Utiliser_les_DevTools_pour_voir_le_modèle_de_boîte">Utiliser les DevTools pour voir le modèle de boîte</h3>
+<h3 id="use_browser_devtools_to_view_the_box_model">Utiliser les outils de développement pour voir le modèle de boîte</h3>
 
-<p>Les <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">outils de développement</a> de votre navigateur peuvent vous permettre d'apréhender les concepts de boîte bien plus facilement. Si vous inspectez un élément dans les DevTools de Firefox (clic droit &gt; Examiner l'élément), vous pouvez avoir accès à toutes les propriétés des différentes couches de la boîte (contenu, padding, border et margin) dans l'interface graphique interactive montrée ci-dessous. Inspecter un élément ainsi, c'est s'assurer qu'il possède bien la taille que l'on désire !</p>
+<p>Les <a href="/fr/docs/Learn/Common_questions/What_are_browser_developer_tools">outils de développement</a> de votre navigateur peuvent vous permettre d'apréhender les concepts de boîte bien plus facilement. Si vous inspectez un élément dans les DevTools de Firefox (clic droit &gt; Examiner l'élément), vous pouvez avoir accès à toutes les propriétés des différentes couches de la boîte (contenu, <i lang="en">padding</i>, bordure et marge) dans l'interface graphique interactive montrée ci-dessous. Inspecter un élément ainsi, c'est s'assurer qu'il possède bien la taille que l'on désire !</p>
 
-<p><img alt="Inspecting the box model of an element using Firefox DevTools" src="https://mdn.mozillademos.org/files/16560/box-model-devtools.png" style="height: 683px; width: 1150px;"></p>
+<p><img alt="Inspecter le modèle de boîte d'un élément grâce aux outils de développement de Firefox" src="box-model-devtools.png"></p>
 
-<h2 id="Margins_paddings_et_borders">Margins, paddings, et borders</h2>
+<h2 id="margins_padding_and_borders">Marges, remplissages (paddings), et bordures</h2>
 
-<p>Nous avons déjà rencontré ensemble les propriétés {{cssxref("margin")}}, {{cssxref("padding")}} et {{cssxref("border")}}, ainsi que leurs effets dans les exemples précédents. Mais ces propriétés sont des <strong>raccourcis</strong> qui nous permettent de définir ces règles pour les quatres côtés de la boîte d'un seul coup. Ces raccourcis ont donc aussi leurs propriétés équivalentes permettant de régler séparement chaque côté pour plus de personalisation.</p>
+<p>Nous avons déjà rencontré ensemble les propriétés <a href="/fr/docs/Web/CSS/margin"><code>margin</code></a>, <a href="/fr/docs/Web/CSS/padding"><code>padding</code></a> et <a href="/fr/docs/Web/CSS/border"><code>border</code></a>, ainsi que leurs effets dans les exemples précédents. Mais ces propriétés sont des <strong>raccourcis</strong> qui nous permettent de définir ces règles pour les quatre côtés de la boîte d'un seul coup. Ces raccourcis ont donc aussi leurs propriétés équivalentes permettant de régler séparément chaque côté pour plus de personalisation.</p>
 
 <p>Regardons de plus près ces nouvelles propriétés.</p>
 
-<h3 id="Les_Margins_Marges_extérieures">Les Margins (Marges extérieures)</h3>
+<h3 id="Margin">Les marges</h3>
 
-<p>Le margin est une zone d'espacement invisible qui encadre votre boîte (une marge extérieure). Le margin repousse les éléments alentours de le boîte. On peut de plus lui donner une valeur numérique positive ou bien même négative ! Lorsque cette valeur est négative, cela peut cependant engendrer des superpositions entre votre boîte et d'autres éléments. Que vous utilisiez le modèle alternatif ou standard, le margin est toujours décompté en surplus de la taille totale de la boîte et est ajouté après que celle-ci a été calculée.</p>
+<p>La marge est une zone d'espacement invisible qui encadre votre boîte (une marge extérieure). La marge repousse les éléments alentours de la boîte. On peut de plus lui donner une valeur numérique positive ou bien même négative ! Lorsque cette valeur est négative, cela peut cependant engendrer des superpositions entre votre boîte et d'autres éléments. Que vous utilisiez le modèle alternatif ou standard, la marge est toujours décomptée en surplus de la taille totale de la boîte et est ajoutée après que celle-ci a été calculée.</p>
 
-<p>On peut fixer les quatres margins d'une boîte d'un seul coup à l'aide de la propriété {{cssxref("margin")}}, ou bien régler chaque côté individuelement avec les propriétés équivalentes suivantes :</p>
+<p>On peut fixer les quatre marges d'une boîte d'un seul coup à l'aide de la propriété <a href="/fr/docs/Web/CSS/margin"><code>margin</code></a>, ou bien régler chaque côté individuellement avec les propriétés équivalentes suivantes :</p>
 
 <ul>
- <li>{{cssxref("margin-top")}}</li>
- <li>{{cssxref("margin-right")}}</li>
- <li>{{cssxref("margin-bottom")}}</li>
- <li>{{cssxref("margin-left")}}</li>
+ <li><a href="/fr/docs/Web/CSS/margin-top"><code>margin-top</code></a></li>
+ <li><a href="/fr/docs/Web/CSS/margin-right"><code>margin-right</code></a></li>
+ <li><a href="/fr/docs/Web/CSS/margin-bottom"><code>margin-bottom</code></a></li>
+ <li><a href="/fr/docs/Web/CSS/margin-left"><code>margin-left</code></a></li>
 </ul>
 
-<p><strong>Dans l'exemple ci-dessous, tentez donc de modifier les valeurs de margin pour voir comment la boîte est repoussée et évolue à cause des espaces créés ou suprimés (si le margin est négatif) par vos soins.</strong></p>
+<p><strong>Dans l'exemple ci-dessous, tentez donc de modifier les valeurs de <code>margin</code> pour voir comment la boîte est repoussée et évolue à cause des espaces créés ou supprimés (si la marge est négative) par vos soins.</strong></p>
 
-<p>{{EmbedGHLiveSample("css-examples/learn/box-model/margin.html", '100%', 1000)}} </p>
+<p>{{EmbedGHLiveSample("css-examples/learn/box-model/margin.html", '100%', 700)}}</p>
 
-<h4 id="La_fusion_des_marges">La fusion des marges</h4>
+<h4 id="margin_collapsing">La fusion des marges</h4>
 
-<p>Le concept de fusion entre les marges est important à maîtriser pour la mise en page. Si deux éléments de votre page ont des margins qui se touchent, alors ces margins fusionnent pour ne faire plus qu'un seul margin qui aura pour taille la plus grande des deux tailles des margins initiaux.</p>
+<p>Le concept de fusion entre les marges est important à maîtriser pour la mise en page. Si deux éléments de votre page ont des marges qui se touchent, alors ces marges fusionnent pour ne faire plus qu'une seule marge qui aura pour taille la plus grande des deux tailles des marges initiaux.</p>
 
-<p>Dans l'exemple ci-dessous, nous avons deux paragraphes. Le paragraphe du haut a un <code>margin-bottom</code> de 50 pixels. Le second paragraphe a un <code>margin-top</code> de 30 pixels. Puisque ces deux margins se touchent, ils fusionnent ensemble, et ainsi le margin final entre les deux paragraphes est de 50 pixels et non 80, la somme des deux margins.</p>
+<p>Dans l'exemple ci-dessous, nous avons deux paragraphes. Le paragraphe du haut a un <code>margin-bottom</code> de 50 pixels. Le second paragraphe a un <code>margin-top</code> de 30 pixels. Puisque ces deux marges se touchent, elles fusionnent ensemble, et ainsi la marge finale entre les deux paragraphes est de 50 pixels et non 80, la somme des deux marges.</p>
 
-<p><strong>Vous pouvez tester cette propriété par vous même en modifiant la propriété <code>margin-top</code> du deuxième paragraphe à 0 dans l'exemple ci-dessous. Le margin visible entre les deux paragraphes demeure inchangé — il conserve sa taille de 50 pixels qui provient du <code>margin-bottom</code> du premier paragraphe.</strong></p>
+<p><strong>Vous pouvez tester cette propriété par vous-même en modifiant la propriété <code>margin-top</code> du deuxième paragraphe à 0 dans l'exemple ci-dessous. La marge visible entre les deux paragraphes demeure inchangée — elle conserve sa taille de 50 pixels qui provient de la propriété <code>margin-bottom</code> du premier paragraphe.</strong></p>
 
-<p>{{EmbedGHLiveSample("css-examples/learn/box-model/margin-collapse.html", '100%', 1000)}} </p>
+<p>{{EmbedGHLiveSample("css-examples/learn/box-model/margin-collapse.html", '100%', 700)}}</p>
 
-<p>Il existe quelques règles qui contrôlent la fusion ou non des marges. Pour plus d'informations, référez vous à la page détaillée <a href="/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing">Maîtriser la fusion des marges</a>. Si vous ne devez retenir qu'une chose, c'est que les marges peuvent fusionner, et que si vos marges ne correspondent pas à vos attentes, c'est certainement ce phénomène qui est derrière.</p>
+<p>Il existe quelques règles qui contrôlent la fusion ou non des marges. Pour plus d'informations, référez vous à la page détaillée <a href="/fr/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing">Maîtriser la fusion des marges</a>. Si vous ne devez retenir qu'une chose, c'est que les marges peuvent fusionner, et que si vos marges ne correspondent pas à vos attentes, c'est certainement ce phénomène qui est derrière.</p>
 
-<h3 id="Les_Borders_Cadres">Les Borders (Cadres)</h3>
+<h3 id="borders">Les bordures</h3>
 
-<p>le border (le cadre en français) se situe entre le margin (marge externe) et le padding (marge interne) d'une boîte. Si vous utilisez le modèle standard de boîte, la taille du border s'ajoute à la largeur (<code>width</code>) et la hauteur (<code>height</code>) de la boîte. Si vous utilisez le modèle de boîte alternatif, alors la taille du border rends la taille disponible pour le contenu plus petite puisqu'il utilise une partie du <code>width</code> et <code>height</code> disponible.</p>
+<p>La bordure se situe entre la marge et le remplissage (<i lang="en">padding</i>) d'une boîte. Si vous utilisez le modèle standard de boîte, la taille de la bordure s'ajoute à la largeur (<code>width</code>) et la hauteur (<code>height</code>) de la boîte. Si vous utilisez le modèle de boîte alternatif, alors la taille de la bordure rend la taille disponible pour le contenu plus petite puisqu'elle utilise une partie de la largeur et de la hauteur disponible.</p>
 
-<p>Pour agir sur le style d'un border, il existe de nombreuses propriétés qui permettent de régler le style, la taille et la couleur pour chacun des quatres côtés du cadre.</p>
+<p>Pour agir sur le style d'une bordure, il existe de nombreuses propriétés qui permettent de régler le style, la taille et la couleur pour chacun des quatre côtés de la bordure.</p>
 
-<p>Vous pouvez naturellement fixer la forme taille et couleur des quatres côtés en une seule fois, par le biais de la propriété <code>border</code>.</p>
+<p>Vous pouvez naturellement fixer la forme taille et couleur des quatre côtés en une seule fois, par le biais de la propriété <code>border</code>.</p>
 
 <p>Pour régler ces propriétés individuellement pour chacun des côtés, vous pouvez utiliser :</p>
 
 <ul>
- <li>{{cssxref("border-top")}}</li>
- <li>{{cssxref("border-right")}}</li>
- <li>{{cssxref("border-bottom")}}</li>
- <li>{{cssxref("border-left")}}</li>
+ <li><a href="/fr/docs/Web/CSS/border-top"><code>border-top</code></a></li>
+ <li><a href="/fr/docs/Web/CSS/border-right"><code>border-right</code></a></li>
+ <li><a href="/fr/docs/Web/CSS/border-bottom"><code>border-bottom</code></a></li>
+ <li><a href="/fr/docs/Web/CSS/border-left"><code>border-left</code></a></li>
 </ul>
 
 <p>Pour modifier la taille, le style ou la couleur de tous les côtés en même temps, utilisez les propriétés suivantes :</p>
 
 <ul>
- <li>{{cssxref("border-width")}}</li>
- <li>{{cssxref("border-style")}}</li>
- <li>{{cssxref("border-color")}}</li>
+ <li><a href="/fr/docs/Web/CSS/border-width"><code>border-width</code></a></li>
+ <li><a href="/fr/docs/Web/CSS/border-style"><code>border-style</code></a></li>
+ <li><a href="/fr/docs/Web/CSS/border-color"><code>border-color</code></a></li>
 </ul>
 
 <p>Pour modifier la taille, le style ou la couleur d'un seul coté à la fois, vous pouvez faire l'usage de ces propriétés :</p>
 
 <ul>
- <li>{{cssxref("border-top-width")}}</li>
- <li>{{cssxref("border-top-style")}}</li>
- <li>{{cssxref("border-top-color")}}</li>
- <li>{{cssxref("border-right-width")}}</li>
- <li>{{cssxref("border-right-style")}}</li>
- <li>{{cssxref("border-right-color")}}</li>
- <li>{{cssxref("border-bottom-width")}}</li>
- <li>{{cssxref("border-bottom-style")}}</li>
- <li>{{cssxref("border-bottom-color")}}</li>
- <li>{{cssxref("border-left-width")}}</li>
- <li>{{cssxref("border-left-style")}}</li>
- <li>{{cssxref("border-left-color")}}</li>
+ <li><a href="/fr/docs/Web/CSS/border-top-width"><code>border-top-width</code></a></li>
+ <li><a href="/fr/docs/Web/CSS/border-top-style"><code>border-top-style</code></a></li>
+ <li><a href="/fr/docs/Web/CSS/border-top-color"><code>border-top-color</code></a></li>
+ <li><a href="/fr/docs/Web/CSS/border-right-width"><code>border-right-width</code></a></li>
+ <li><a href="/fr/docs/Web/CSS/border-right-style"><code>border-right-style</code></a></li>
+ <li><a href="/fr/docs/Web/CSS/border-right-color"><code>border-right-color</code></a></li>
+ <li><a href="/fr/docs/Web/CSS/border-bottom-width"><code>border-bottom-width</code></a></li>
+ <li><a href="/fr/docs/Web/CSS/border-bottom-style"><code>border-bottom-style</code></a></li>
+ <li><a href="/fr/docs/Web/CSS/border-bottom-color"><code>border-bottom-color</code></a></li>
+ <li><a href="/fr/docs/Web/CSS/border-left-width"><code>border-left-width</code></a></li>
+ <li><a href="/fr/docs/Web/CSS/border-left-style"><code>border-left-style</code></a></li>
+ <li><a href="/fr/docs/Web/CSS/border-left-color"><code>border-left-color</code></a></li>
 </ul>
 
-<p><strong>Dans l'exemple ci-dessous, nous avons utilisé différentes propriétés, qu'elles soient des raccourcis ou bien les propriétés précises, pour créer un cadre (border). Amusez-vous à modifier les valeurs de ces différentes propriétés pour vérifier que vous comprenez bien comment elles s'organisent. Les pages du MDN pour les propriétés des borders (données ci-dessus) vous documentent sur les différents styles que vous pouvez appliquer à vos pages. N'hésitez pas à les consulter.</strong></p>
+<p><strong>Dans l'exemple ci-dessous, nous avons utilisé différentes propriétés, qu'elles soient des raccourcis ou bien les propriétés précises, pour créer une bordure. Amusez-vous à modifier les valeurs de ces différentes propriétés pour vérifier que vous comprenez bien comment elles s'organisent. Les pages MDN pour les propriétés des bordures (données ci-dessus) documentent les différents styles que vous pouvez appliquer à vos pages. N'hésitez pas à les consulter.</strong></p>
 
-<p>{{EmbedGHLiveSample("css-examples/learn/box-model/border.html", '100%', 1000)}} </p>
+<p>{{EmbedGHLiveSample("css-examples/learn/box-model/border.html", '100%', 700)}}</p>
 
-<h3 id="Les_Paddings_Marges_intérieures">Les Paddings (Marges intérieures)</h3>
+<h3 id="padding">Le padding (remplissage)</h3>
 
-<p>Les paddings (ou marges intérieures) se situent entre le border (le cadre) et la zone du contenu. Contrairement aux margins, on ne peut attribuer une valeur numérique négative à un padding, la valeur ne peut être que 0 ou bien une valeur positive. Si vous avez défini un arrière plan à votre élément, celui-ci continuera de s'afficher dans la padding, et c'est pourquoi cette propriété est souvent utilisée pour repousser le contenu du border (le cadre).</p>
+<p>Le <i lang="en">padding</i> (ou remplissage) se situe entre la bordure et le contenu. Contrairement aux marges, on ne peut attribuer une valeur numérique négative à un <i lang="en">padding</i>, la valeur ne peut être que 0 ou bien une valeur positive. Si vous avez défini un arrière-plan à votre élément, celui-ci continuera de s'afficher dans la <i lang="en">padding</i>, et c'est pourquoi cette propriété est souvent utilisée pour repousser le contenu de la bordure.</p>
 
-<p>On peut une fois de plus configurer le padding pour tous les côtés à la fois à l'aide de la propriété {{cssxref("padding")}}, ou bien chaque côté indépendament des autres en utilisant les variantes plus précises suivantes :</p>
+<p>On peut une fois de plus configurer le <i lang="en">padding</i> pour tous les côtés à la fois à l'aide de la propriété <a href="/fr/docs/Web/CSS/padding"><code>padding</code></a>, ou bien chaque côté indépendament des autres en utilisant les variantes plus précises suivantes :</p>
 
 <ul>
- <li>{{cssxref("padding-top")}}</li>
- <li>{{cssxref("padding-right")}}</li>
- <li>{{cssxref("padding-bottom")}}</li>
- <li>{{cssxref("padding-left")}}</li>
+ <li><a href="/fr/docs/Web/CSS/padding-top"><code>padding-top</code></a></li>
+ <li><a href="/fr/docs/Web/CSS/padding-right"><code>padding-right</code></a></li>
+ <li><a href="/fr/docs/Web/CSS/padding-bottom"><code>padding-bottom</code></a></li>
+ <li><a href="/fr/docs/Web/CSS/padding-left"><code>padding-left</code></a></li>
 </ul>
 
-<p><strong>Si vous modifiez les valeurs du padding sur la classe <code>.box</code> de l'exemple ci-dessous, vous pouvez observer comment l'emplacement du texte est impacté par les marges intérieures.</strong></p>
+<p><strong>Si vous modifiez les valeurs du <i lang="en">padding</i> sur la classe <code>.box</code> de l'exemple ci-dessous, vous pouvez observer comment l'emplacement du texte est impacté par les marges intérieures.</strong></p>
 
-<p><strong>Tentez aussi de modifier la valeur du padding dans la classe <code>.container</code>, cela aura pour effet d'espacer le conteneur et la boîte. Le padding peut être modifié sur tout élément pour permettre d'espacer le contenu du cadre.</strong></p>
+<p><strong>Tentez aussi de modifier la valeur du <i lang="en">padding</i> dans la classe <code>.container</code>, cela aura pour effet d'espacer le conteneur et la boîte. Le <i lang="en">padding</i> peut être modifié sur tout élément pour permettre d'espacer le contenu de la bordure.</strong></p>
 
-<p>{{EmbedGHLiveSample("css-examples/learn/box-model/padding.html", '100%', 800)}} </p>
+<p>{{EmbedGHLiveSample("css-examples/learn/box-model/padding.html", '100%', 600)}}</p>
 
-<h2 id="Le_modèle_de_boîte_et_la_disposition_en_ligne">Le modèle de boîte et la disposition en ligne</h2>
+<h2 id="the_box_model_and_inline_boxes">Le modèle de boîte et la disposition en ligne</h2>
 
 <p>Toutes les règles énoncées plus haut s'appliquent totalement aux boîtes positionnées en bloc. Mais qu'en est-il des boîtes positionnées en ligne, comme l'élément <code>&lt;span&gt;</code> par exemple ?</p>
 
 <p>Dans l'exemple ci-après, nous avons un élément <code>&lt;span&gt;</code> inclus dans un paragraphe auquel on a défini les propriétés <code>width</code>, <code>height</code>, <code>margin</code>, <code>border</code> et <code>padding</code>. Vous pouvez alors observer que les paramètres <code>width</code> et <code>height</code> sont totalement ignorés. Les propriétés de <code>margin</code>, <code>padding</code> et <code>border</code> sont quant à elles appliquées, mais n'ont pas modifié l'espacement avec les autres éléments de la page, se superposant ainsi avec les mots environnants dans le paragraphe.</p>
 
-<p>{{EmbedGHLiveSample("css-examples/learn/box-model/inline-box-model.html", '100%', 800)}} </p>
+<p>{{EmbedGHLiveSample("css-examples/learn/box-model/inline-box-model.html", '100%', 600)}}</p>
 
-<h2 id="le_positionnement_display_inline-block">le positionnement display: inline-block</h2>
+<h2 id="using_display_inline-block">le positionnement display: inline-block</h2>
 
-<p>Il existe une valeur spéciale pour la propriété <code>display</code>, qui constitue un compromis entre la diposition en ligne et la disposition en bloc, une sorte d'entre-deux qui combine ces deux dispositions. Cet état peut-être utile dans les situations où l'on désire utiliser les propriétés <code>width</code> et <code>height</code>, et éviter les superpositions (voir l'exemple précédent), tout en conservant la disposition dans une même ligne (i.e. sans créer de nouvelle ligne, comme le ferait une disposition en bloc).</p>
+<p>Il existe une valeur spéciale pour la propriété <code>display</code>, qui constitue un compromis entre la disposition en ligne et la disposition en bloc, une sorte d'entre-deux qui combine ces deux dispositions. Cet état peut-être utile dans les situations où l'on désire utiliser les propriétés <code>width</code> et <code>height</code>, et éviter les superpositions (voir l'exemple précédent), tout en conservant la disposition dans une même ligne (i.e. sans créer de nouvelle ligne, comme le ferait une disposition en bloc).</p>
 
 <p>C'est la solution apportée par la disposition <code>display: inline-block;</code> qui emprunte des règles des deux dispositions pour satisfaire ces motivations :</p>
 
@@ -312,44 +297,44 @@ original_slug: Apprendre/CSS/Building_blocks/Le_modele_de_boite
 
 <p><strong>Dans cet exemple, nous avons ajouté la propriété <code>display: inline-block;</code> à notre élément <code>&lt;span&gt;</code>. Changez donc la valeur en <code>display: block;</code> ou bien tentez même de supprimer cette ligne pour observer l'utilité de cette nouvelle disposition.</strong></p>
 
-<p>{{EmbedGHLiveSample("css-examples/learn/box-model/inline-block.html", '100%', 800)}} </p>
+<p>{{EmbedGHLiveSample("css-examples/learn/box-model/inline-block.html", '100%', 700)}}</p>
 
-<p>Ceci peut-être très utile dans certains cas comme lorsque l'on veut élargir la zone cliquable d'un lien en aggrandissant le <code>padding</code>. l'élément <code>&lt;a&gt;</code> est par défaut "en ligne", comme un <code>&lt;span&gt;</code>, mais vous pouvez alors utiliser <code>display: inline-block;</code> pour permettre au padding d'être ajouté correctement sur la page, améliorant l'accessibilité du lien pour l'utilisateur.</p>
+<p>Ceci peut-être très utile dans certains cas comme lorsque l'on veut élargir la zone cliquable d'un lien en aggrandissant le <code>padding</code>. l'élément <code>&lt;a&gt;</code> est par défaut "en ligne", comme un <code>&lt;span&gt;</code>, mais vous pouvez alors utiliser <code>display: inline-block;</code> pour permettre au <i lang="en">padding</i> d'être ajouté correctement sur la page, améliorant l'accessibilité du lien pour l'utilisateur.</p>
 
-<p>Vous pouvez rencontrer cette astuce sur bon nombre de menus de navigation dans les sites web. Par exemple, la barre de navigation ci-dessous est affichée en une seule ligne en utilisant la disposition flexbox et nous avons ajouté un padding aux lien <code>&lt;a&gt;</code> pour pouvoir modifier la couleur de fond (<code>background-color</code>) au survol du curseur. Le padding semble se superposer sur la bordure de l'élément <code>&lt;ul&gt;</code>. Ceci est dû au fait que <code>&lt;a&gt;</code> est un élément en ligne.</p>
+<p>Vous pouvez rencontrer cette astuce sur bon nombre de menus de navigation dans les sites web. Par exemple, la barre de navigation ci-dessous est affichée en une seule ligne en utilisant la disposition flexbox et nous avons ajouté un <i lang="en">padding</i> aux liens <code>&lt;a&gt;</code> pour pouvoir modifier la couleur de fond (<code>background-color</code>) au survol du curseur. Le <i lang="en">padding</i> semble se superposer sur la bordure de l'élément <code>&lt;ul&gt;</code>. Ceci est dû au fait que <code>&lt;a&gt;</code> est un élément en ligne.</p>
 
-<p><strong>Ajoutez la propriété <code>display: inline-block;</code>  en utilisant le sélecteur <code>.links-list a</code> pour voir le respect du padding régler ce problème.</strong></p>
+<p><strong>Ajoutez la propriété <code>display: inline-block;</code> en utilisant le sélecteur <code>.links-list a</code> pour voir le respect du <i lang="en">padding</i> régler ce problème.</strong></p>
 
-<p>{{EmbedGHLiveSample("css-examples/learn/box-model/inline-block-nav.html", '100%', 600)}} </p>
+<p>{{EmbedGHLiveSample("css-examples/learn/box-model/inline-block-nav.html", '100%', 600)}}</p>
 
-<h2 id="Conclusion">Conclusion</h2>
+<h2 id="summary">Résumé</h2>
 
 <p>À présent vous connaissez tout ce dont vous avez besoin pour comprendre le modèle des boîtes en CSS. N'hésitez pas à revenir jetter un coup d'oeil à ce cours si vous rencontrez encore des problèmes de mise en page : beaucoup de solutions se trouvent ici !</p>
 
-<p>Dans la leçon suivante, ce sont les arrières-plans et cadres qui capterons notre attention, afin de rendre votre mise en page plus attrayante.</p>
+<p>Dans la leçon suivante, ce sont les arrières-plans et les bordures qui capteront notre attention, afin de rendre votre mise en page plus attrayante.</p>
 
 <p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks/Backgrounds_and_borders", "Learn/CSS/Building_blocks")}}</p>
 
-<h2 id="Dans_ce_module">Dans ce module</h2>
+<h2 id="in_this_module">Dans ce module</h2>
 
 <ol>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Cascade and inheritance</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">CSS selectors</a>
-  <ul>
-   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Type, class, and ID selectors</a></li>
-   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Attribute selectors</a></li>
-   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Pseudo-classes and pseudo-elements</a></li>
-   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Combinators</a></li>
-  </ul>
- </li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">The box model</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Backgrounds and borders</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Handling different text directions</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content">Overflowing content</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">Values and units</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Sizing items in CSS</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Images, media, and form elements</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Styling_tables">Styling tables</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS">Debugging CSS</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing">Organizing your CSS</a></li>
-</ol>
+  <li><a href="/fr/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Cascade et héritage</a></li>
+  <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors">Sélecteurs CSS</a>
+   <ul>
+    <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Sélecteurs de classe, de type et d'identifiant</a></li>
+    <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Sélecteurs d'attribut</a></li>
+    <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Pseudo-classes et pseudo-éléments</a></li>
+    <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Combinateurs</a></li>
+   </ul>
+  </li>
+  <li>Le modèle de boîte</li>
+  <li><a href="/fr/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Arrières-plans et bordures</a></li>
+  <li><a href="/fr/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Gérer la directionnalité du texte</a></li>
+  <li><a href="/fr/docs/Learn/CSS/Building_blocks/Overflowing_content">Le dépassement du contenu</a></li>
+  <li><a href="/fr/docs/Learn/CSS/Building_blocks/Values_and_units">Valeurs et unités</a></li>
+  <li><a href="/fr/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Dimensionnement des objets en CSS</a></li>
+  <li><a href="/fr/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Images, médias, et formulaires</a></li>
+  <li><a href="/fr/docs/Learn/CSS/Building_blocks/Styling_tables">Mettre en forme les tableaux</a></li>
+  <li><a href="/fr/docs/Learn/CSS/Building_blocks/Debugging_CSS">Déboguer CSS</a></li>
+  <li><a href="/fr/docs/Learn/CSS/Building_blocks/Organizing">Organiser son code CSS</a></li>
+ </ol>
diff --git a/files/fr/learn/css/css_layout/multiple-column_layout/index.html b/files/fr/learn/css/css_layout/multiple-column_layout/index.html
index 4a23cb740a..9d28e265de 100644
--- a/files/fr/learn/css/css_layout/multiple-column_layout/index.html
+++ b/files/fr/learn/css/css_layout/multiple-column_layout/index.html
@@ -45,7 +45,7 @@ original_slug: Apprendre/CSS/CSS_layout/Multiple-column_Layout
 }
 </pre>
 
-<p>Les colonnes créées sont de largeur variable — le navigateur colcule automatiquement l'espace à donner à chacune d'entre elles.</p>
+<p>Les colonnes créées sont de largeur variable — le navigateur calcule automatiquement l'espace à donner à chacune d'entre elles.</p>
 
 <div id="Multicol_1">
 <div class="hidden">
diff --git a/files/fr/learn/css/first_steps/how_css_is_structured/index.html b/files/fr/learn/css/first_steps/how_css_is_structured/index.html
index c8dd73edb2..a5dca8a25a 100644
--- a/files/fr/learn/css/first_steps/how_css_is_structured/index.html
+++ b/files/fr/learn/css/first_steps/how_css_is_structured/index.html
@@ -1,50 +1,38 @@
 ---
 title: Comment CSS est structuré
 slug: Learn/CSS/First_steps/How_CSS_is_structured
-tags:
-  - Apprendre
-  - CSS
-  - Commentaires
-  - Débutant
-  - HTML
-  - Propriétés
-  - Structure
-  - Sélecteurs
-  - espace
-  - raccourci
-  - valeurse
 translation_of: Learn/CSS/First_steps/How_CSS_is_structured
 ---
 <div>{{LearnSidebar}}</div>
 
 <div>{{PreviousMenuNext("Learn/CSS/First_steps/Getting_started", "Learn/CSS/First_steps/How_CSS_works", "Learn/CSS/First_steps")}}</div>
 
-<p class="summary">Vous avez maintenant une idée plus claire de CSS. Vous connaissez les bases de son fonctionnement. Il est temps d'explorer plus avant la structure du langage lui-même. Nous avons déjà rencontré nombre des concepts apparaissant dans ce tutoriel ; reportez vous aux leçons précédentes si un concept vous semble peu clair.</p>
+<p>Vous avez maintenant une idée plus claire de CSS. Vous connaissez les bases de son fonctionnement. Il est temps d'explorer plus avant la structure du langage lui-même. Nous avons déjà rencontré nombre des concepts apparaissant dans ce tutoriel ; reportez vous aux leçons précédentes si un concept vous semble peu clair.</p>
 
 <table class="learn-box standard-table">
  <tbody>
   <tr>
-   <th scope="row">Prérequis :</th>
-   <td>Maîtrise élémentaire de l'informatique, <a href="https://developer.mozilla.org/fr/docs/Apprendre/Commencer_avec_le_web/Installation_outils_de_base">suite logicielle de base installée</a>, compétences élémentaires pour <a href="/fr/docs/Apprendre/Commencer_avec_le_web/Gérer_les_fichiers">travailler avec des fichiers</a>, connaissance de base du HTML  (cf. <a href="/fr/docs/Apprendre/HTML/Introduction_à_HTML">Introduction à HTML</a>), et une idée de <a href="/fr/docs/Learn/CSS/First_steps/How_CSS_works">Comment fonctionne CSS</a>.</td>
+   <th scope="row">Prérequis&nbsp;:</th>
+   <td>Maîtrise élémentaire de l'informatique, <a href="/fr/docs/Learn/Getting_started_with_the_web/Installing_basic_software">suite logicielle de base installée</a>, compétences élémentaires pour <a href="/fr/docs/Learn/Getting_started_with_the_web/Dealing_with_files">travailler avec des fichiers</a>, connaissance de base du HTML (cf. <a href="/fr/docs/Learn/HTML/Introduction_to_HTML">Introduction à HTML</a>), et une idée de <a href="/fr/docs/Learn/CSS/First_steps/How_CSS_works">Comment fonctionne CSS</a>.</td>
   </tr>
   <tr>
-   <th scope="row">Objectif :</th>
+   <th scope="row">Objectif&nbsp;:</th>
    <td>Approfondir les structures syntaxiques fondamentales de CSS</td>
   </tr>
  </tbody>
 </table>
 
-<h2 id="Appliquer_CSS_à_votre_document_HTML">Appliquer CSS à votre document HTML</h2>
+<h2 id="applying_css_to_html">Appliquer CSS à votre document HTML</h2>
 
-<p>Regardons d'abord les trois méthodes pour appliquer CSS à un document.</p>
+<p>Regardons d'abord les trois méthodes pour appliquer CSS à un document.</p>
 
-<h3 id="Feuille_de_style_externe">Feuille de style externe</h3>
+<h3 id="external_stylesheet">Feuille de style externe</h3>
 
-<p>Dans la leçon <a href="/fr/docs/Learn/CSS/First_steps/Getting_started">Démarrer avec CSS</a> nous avons lié une feuille de style externe à notre document. C'est la méthode la plus commune pour appliquer CSS à un document. C'est aussi la plus utile : dans la plupart des cas, les différentes pages d'un site ont à peu près la même apparence, on peut donc utiliser le même jeu de règles pour l'apparence de base. Il est dans ce cas commode d'écrire ces règles une seule fois dans une feuille de style commune à toutes les pages.</p>
+<p>Dans la leçon <a href="/fr/docs/Learn/CSS/First_steps/Getting_started">Démarrer avec CSS</a> nous avons lié une feuille de style externe à notre document. C'est la méthode la plus commune pour appliquer CSS à un document. C'est aussi la plus utile : dans la plupart des cas, les différentes pages d'un site ont à peu près la même apparence, on peut donc utiliser le même jeu de règles pour l'apparence de base. Il est dans ce cas commode d'écrire ces règles une seule fois dans une feuille de style commune à toutes les pages.</p>
 
-<p>Dans le cas d'une feuille de style externe, les règles CSS sont écrites dans un fichier séparé, avec l'extension <code>.css</code>. Un élement HTML <code>&lt;link&gt;</code> fait référence à ce fichier.</p>
+<p>Dans le cas d'une feuille de style externe, les règles CSS sont écrites dans un fichier séparé, avec l'extension <code>.css</code>. Un élément HTML <code>&lt;link&gt;</code> fait référence à ce fichier.</p>
 
-<pre class="brush: html notranslate">&lt;!DOCTYPE html&gt;
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
 &lt;html&gt;
   &lt;head&gt;
     &lt;meta charset="utf-8"&gt;
@@ -55,11 +43,11 @@ translation_of: Learn/CSS/First_steps/How_CSS_is_structured
     &lt;h1&gt;Hello World!&lt;/h1&gt;
     &lt;p&gt;ceci est mon premier exemple CSS&lt;/p&gt;
   &lt;/body&gt;
-&lt;/html&gt;</pre>
+&lt;/html&gt;</pre>e
 
-<p>Le fichier CSS devrait ressembler à cela :</p>
+<p>Le fichier CSS devrait ressembler à cela :</p>
 
-<pre class="brush: css notranslate">h1 {
+<pre class="brush: css">h1 {
   color: blue;
   background-color: yellow;
   border: 1px solid black;
@@ -69,30 +57,30 @@ p {
   color: red;
 }</pre>
 
-<p>L'attribut <code>href</code> de l'élement {{htmlelement("link")}} doit pointer vers un fichier dans votre système de fichiers.</p>
+<p>L'attribut <code>href</code> de l'élément <a href="/fr/docs/Web/HTML/Element/link"><code>&lt;link&gt;</code></a> doit pointer vers un fichier dans votre système de fichiers.</p>
 
-<p>Dans l'exemple ci-dessus, le fichier CSS et le document HTML sont dans le même dossier, mais vous pouvez le placer ailleurs et ajuster le chemin, par exemple :</p>
+<p>Dans l'exemple ci-dessus, le fichier CSS et le document HTML sont dans le même dossier, mais vous pouvez le placer ailleurs et ajuster le chemin, par exemple :</p>
 
-<pre class="brush: html notranslate">&lt;!-- Dans un sous répertoire nommé styles dans le répertoire courant --&gt;
+<pre class="brush: html">&lt;!-- Dans un sous-répertoire nommé styles dans le répertoire courant --&gt;
 &lt;link rel="stylesheet" href="styles/style.css"&gt;
 
-&lt;!-- Dans un sous répertoire nommé general, lui-même dans un sous répertoire nommé styles, dans le répertoire courant --&gt;
+&lt;!-- Dans un sous-répertoire nommé general, lui-même dans un sous-répertoire nommé styles, dans le répertoire courant --&gt;
 &lt;link rel="stylesheet" href="styles/general/style.css"&gt;
 
-&lt;!-- Dans un sous répertoire nommé styles, un niveau plus haut --&gt;
+&lt;!-- Dans un sous-répertoire nommé styles, un niveau plus haut --&gt;
 &lt;link rel="stylesheet" href="../styles/style.css"&gt;</pre>
 
-<h3 id="Feuille_de_style_interne">Feuille de style interne</h3>
+<h3 id="internal_stylesheet">Feuille de style interne</h3>
 
-<p>Les règles CSS peuvent être écrites directement dans l'en-tête HTML {{htmlelement("head")}} dans un élément {{htmlelement("style")}}. On parle alors de feuille de style interne.</p>
+<p>Les règles CSS peuvent être écrites directement dans l'en-tête HTML <a href="/fr/docs/Web/HTML/Element/head"><code>&lt;head&gt;</code></a> dans un élément <a href="/fr/docs/Web/HTML/Element/style"><code>&lt;style&gt;</code></a>. On parle alors de feuille de style interne.</p>
 
-<p>Le code HTML ci-dessous illustre cette technique :</p>
+<p>Le code HTML ci-dessous illustre cette technique :</p>
 
-<pre class="brush: html notranslate">&lt;!DOCTYPE html&gt;
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
 &lt;html&gt;
   &lt;head&gt;
     &lt;meta charset="utf-8"&gt;
-    &lt;title&gt;Mes experimentations CSS&lt;/title&gt;
+    &lt;title&gt;Mes expérimentations CSS&lt;/title&gt;
     &lt;style&gt;
       h1 {
         color: blue;
@@ -111,17 +99,17 @@ p {
   &lt;/body&gt;
 &lt;/html&gt;</pre>
 
-<p>Cette méthode peut être utile dans certaines circonstances (un système de gestion de contenu (CMS) qui n'autoriserait pas la modification du fichier <code>style.css</code>). Cette solution est un pis-aller, on préfèrera quand c'est possible une feuille de style externe — dans un site web, avec la méthode de styles internes, le CSS doit être recopié dans chaque page : la mise à jour des styles nécessite donc de modifier chaque fichier.</p>
+<p>Cette méthode peut être utile dans certaines circonstances (un système de gestion de contenu (CMS) qui n'autoriserait pas la modification du fichier <code>style.css</code>). Cette solution est un pis-aller, on préfèrera quand c'est possible une feuille de style externe — dans un site web, avec la méthode de styles internes, le CSS doit être recopié dans chaque page : la mise à jour des styles nécessite donc de modifier chaque fichier.</p>
 
-<h3 id="Styles_en_ligne">Styles en ligne</h3>
+<h3 id="inline_styles">Styles en ligne</h3>
 
-<p>Les styles en ligne sont des déclarations CSS qui n'affectent qu'un seul élement, elles sont déclarées grâce à l'attribut <code>style</code>:</p>
+<p>Les styles en ligne sont des déclarations CSS qui n'affectent qu'un seul élément, elles sont déclarées grâce à l'attribut <code>style</code>:</p>
 
-<pre class="brush: html notranslate">&lt;!DOCTYPE html&gt;
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
 &lt;html&gt;
   &lt;head&gt;
     &lt;meta charset="utf-8"&gt;
-    &lt;title&gt;Mes experimentations CSS&lt;/title&gt;
+    &lt;title&gt;Mes expérimentations CSS&lt;/title&gt;
   &lt;/head&gt;
   &lt;body&gt;
     &lt;h1 style="color: blue;background-color: yellow;border: 1px solid black;"&gt;Hello World!&lt;/h1&gt;
@@ -129,17 +117,17 @@ p {
   &lt;/body&gt;
 &lt;/html&gt;</pre>
 
-<p><strong>Cette approche est vraiment à proscrire ! </strong>Le code produit n'est pas maintenable (les modifications ne doivent plus se faire pour chaque page, mais dans chaque page, élément par élément !). Par ailleurs, mélanger le CSS  avec le HTML rend la lecture du code plus difficile. En plus d'une meilleure lisibilité du code, séparer le fond de la forme rend le travail d'équipe plus facile.</p>
+<p><strong>Cette approche est vraiment à proscrire ! </strong>Le code produit n'est pas maintenable (les modifications ne doivent plus se faire pour chaque page, mais dans chaque page, élément par élément !). Par ailleurs, mélanger le CSS avec le HTML rend la lecture du code plus difficile. En plus d'une meilleure lisibilité du code, séparer le fond de la forme rend le travail d'équipe plus facile.</p>
 
-<p>Il existe quelques endroits où les styles en ligne sont communs, voire recommandés. Vous devrez peut-être les utiliser si votre environnement de travail est vraiment restrictif (votre CMS ne vous permet peut-être que de modifier le corps du  HTML). Vous les verrez également beaucoup utilisés dans les e-mails HTML afin d’être compatibles avec autant de clients de messagerie que possible.</p>
+<p>Il existe quelques endroits où les styles en ligne sont communs, voire recommandés. Vous devrez peut-être les utiliser si votre environnement de travail est vraiment restrictif (votre CMS ne vous permet peut-être que de modifier le corps du HTML). Vous les verrez également beaucoup utilisés dans les e-mails HTML afin d'être compatibles avec autant de clients de messagerie que possible.</p>
 
-<h2 id="Jouer_avec_le_CSS_de_cet_article">Jouer avec le CSS de cet article</h2>
+<h2 id="playing_with_the_css_in_this_article">Jouer avec le CSS de cet article</h2>
 
-<p>Les exemples de cet article sont autant d'occasions pour faire vos premiers tests. Pour ce faire, nous vous recommandons de créer un nouveau répertoire sur votre ordinateur et d'y créer une copie des deux fichiers suivants :</p>
+<p>Les exemples de cet article sont autant d'occasions pour faire vos premiers tests. Pour ce faire, nous vous recommandons de créer un nouveau répertoire sur votre ordinateur et d'y créer une copie des deux fichiers suivants :</p>
 
 <p><strong>index.html</strong> :</p>
 
-<pre class="brush: html notranslate">&lt;!DOCTYPE html&gt;
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
 &lt;html lang="en"&gt;
   &lt;head&gt;
     &lt;meta charset="utf-8"&gt;
@@ -155,27 +143,27 @@ p {
 
 <p><strong>styles.css</strong> :</p>
 
-<pre class="brush: css notranslate">/* Créez votre test CSS ici */
+<pre class="brush: css">/* Créez votre test CSS ici */
 
 p {
   color: red;
 }</pre>
 
-<p>Ensuite, lorsque vous rencontrez du code à tester : collez le HTML à mettre en forme entre les balises <code>&lt;body&gt;</code> ... <code>&lt;/body&gt;</code> dans le fichier  <code>index.html</code> ;  ajoutez les règles CSS dans la feuille <code>styles.css</code>.</p>
+<p>Ensuite, lorsque vous rencontrez du code à tester : collez le HTML à mettre en forme entre les balises <code>&lt;body&gt;</code>…<code>&lt;/body&gt;</code> dans le fichier <code>index.html</code> ; ajoutez les règles CSS dans la feuille <code>styles.css</code>.</p>
 
-<p>Si le système que vous utilisez rend difficile la création de fichiers, vous pouvez utiliser l'éditeur interactif ci-dessous pour vos expériences.</p>
+<p>Si le système que vous utilisez rend difficile la création de fichiers, vous pouvez utiliser l'éditeur interactif ci-dessous pour vos expériences.</p>
 
-<p>{{EmbedGHLiveSample("css-examples/learn/getting-started/experiment-sandbox.html", '100%', 800)}} </p>
+<p>{{EmbedGHLiveSample("css-examples/learn/getting-started/experiment-sandbox.html", '100%', 600)}} </p>
 
 <p>Bonne lecture !</p>
 
-<h2 id="Sélecteurs">Sélecteurs</h2>
+<h2 id="selectors">Sélecteurs</h2>
 
-<p>Vous ne pouvez pas parler de CSS sans rencontrer les sélecteurs et nous en avons déjà découvert différents types dans le tutoriel <a href="/fr-FR/docs/Learn/CSS/First_steps/Getting_started">Démarrer avec CSS</a>.  Un sélecteur cible quelque chose dans le document HTML afin de lui appliquer des styles. Quand une mise en forme ne ne s'applique pas comme prévu, il est probable que le sélecteur concerné ne fonctionne pas comme vous l'attendiez.</p>
+<p>Vous ne pouvez pas parler de CSS sans rencontrer les sélecteurs et nous en avons déjà découvert différents types dans le tutoriel <a href="/fr/docs/Learn/CSS/First_steps/Getting_started">Démarrer avec CSS</a>. Un sélecteur cible quelque chose dans le document HTML afin de lui appliquer des styles. Quand une mise en forme ne s'applique pas comme prévu, il est probable que le sélecteur concerné ne fonctionne pas comme vous l'attendiez.</p>
 
 <p>Chaque règle CSS commence par un sélecteur ou une liste de sélecteurs afin d'indiquer au navigateur les éléments auxquels les règles doivent s'appliquer. Tous les exemples suivants sont des exemples de sélecteurs valides ou de listes de sélecteurs.</p>
 
-<pre class="brush: css notranslate">h1
+<pre class="brush: css">h1
 a:link
 .manythings
 #onething
@@ -184,17 +172,17 @@ a:link
 .box p:first-child
 h1, h2, .intro</pre>
 
-<p><strong>Essayez de créer des règles CSS qui utilisent les sélecteurs ci-dessus et du code HTML à styler. Si vous ne savez pas ce que signifie la syntaxe ci-dessus, essayez de la rechercher sur MDN !</strong></p>
+<p>Essayez de créer des règles CSS qui utilisent les sélecteurs ci-dessus et du code HTML à styler. Si vous ne savez pas ce que signifie la syntaxe ci-dessus, essayez de la rechercher sur MDN !</p>
 
-<div class="blockIndicator note">
-<p><strong>Note </strong>: Vous en apprendrez beaucoup plus sur les sélecteurs dans nos tutoriels sur <a href="/fr-FR/docs/Learn/CSS/Building_blocks/Selectors">les sélecteurs CSS</a>, dans un prochain cours.</p>
+<div class="notecard note">
+<p><strong>Note :</strong> Vous en apprendrez beaucoup plus sur les sélecteurs dans nos tutoriels sur <a href="/fr/docs/Learn/CSS/Building_blocks/Selectors">les sélecteurs CSS</a>, dans un prochain cours.</p>
 </div>
 
-<h3 id="Spécificité">Spécificité</h3>
+<h3 id="specificity">Spécificité</h3>
 
-<p>Dans de nombreux cas, deux sélecteurs différents peuvent cibler le même élément HTML. Considérons la feuille de style ci-dessous où j'ai une règle avec un sélecteur <code>p</code> qui colore les paragraphes en bleu, puis une règle qui colore en rouge les éléments dans la classe <code>special</code>.</p>
+<p>Dans de nombreux cas, deux sélecteurs différents peuvent cibler le même élément HTML. Considérons la feuille de style ci-dessous où j'ai une règle avec un sélecteur <code>p</code> qui colore les paragraphes en bleu, puis une règle qui colore en rouge les éléments dans la classe <code>special</code>.</p>
 
-<pre class="brush: css notranslate">.special {
+<pre class="brush: css">.special {
   color: red;
 }
 
@@ -202,13 +190,13 @@ p {
   color: blue;
 }</pre>
 
-<p>Disons que dans notre document HTML, nous avons un paragraphe avec un attribut <code>class</code> valant <code>special</code>. Les deux règles pourraient s'appliquer. Selon vous, quelle sera la couleur du paragraphe ?</p>
+<p>Disons que dans notre document HTML, nous avons un paragraphe avec un attribut <code>class</code> valant <code>special</code>. Les deux règles pourraient s'appliquer. Selon vous, quelle sera la couleur du paragraphe ?</p>
 
-<pre class="brush: html notranslate">&lt;p class="special"&gt;De quelle couleur suis-je?&lt;/p&gt;</pre>
+<pre class="brush: html">&lt;p class="special"&gt;De quelle couleur suis-je?&lt;/p&gt;</pre>
 
-<p>Le langage CSS a des règles pour déterminer quelle mise en forme appliquer en cas de collision de sélecteurs — elles sont appelées <strong>cascade</strong> et <strong>spécificité</strong>. Dans le bloc de code ci-dessous, nous avons défini deux règles pour le sélecteur <code>p</code>, mais le paragraphe finit par être coloré en bleu. En effet, la déclaration qui l'a défini en bleu apparaît plus tard dans la feuille de style et les styles ultérieurs remplacent les précédents. C'est la <em>cascade</em> en action.</p>
+<p>Le langage CSS a des règles pour déterminer quelle mise en forme appliquer en cas de collision de sélecteurs — elles sont appelées <strong>cascade</strong> et <strong>spécificité</strong>. Dans le bloc de code ci-dessous, nous avons défini deux règles pour le sélecteur <code>p</code>, mais le paragraphe finit par être coloré en bleu. En effet, la déclaration qui l'a défini en bleu apparaît plus tard dans la feuille de style et les styles ultérieurs remplacent les précédents. C'est la <em>cascade</em> en action.</p>
 
-<pre class="brush: css notranslate">p {
+<pre class="brush: css">p {
   color: red;
 }
 
@@ -216,61 +204,61 @@ p {
   color: blue;
 }</pre>
 
-<p>Cependant, dans l'exemple plus haut avec le sélecteur de classe et le sélecteur d'élément, la classe l'emportera, rendant le paragraphe rouge — même s'il apparaît plus tôt dans la feuille de style. Une classe est décrite comme étant plus spécifique ou ayant plus de <em>spécificité</em> que le sélecteur d'élément, elle gagne donc.</p>
+<p>Cependant, dans l'exemple plus haut avec le sélecteur de classe et le sélecteur d'élément, la classe l'emportera, rendant le paragraphe rouge — même s'il apparaît plus tôt dans la feuille de style. Une classe est décrite comme étant plus spécifique ou ayant plus de <em>spécificité</em> que le sélecteur d'élément, elle gagne donc.</p>
 
-<p><strong>Tentez vous-même l'expérience ci-dessus </strong>—<strong> ajoutez le code HTML à votre expérience, puis ajoutez les deux règles <code>p {...}</code> à votre feuille de style. Ensuite, changez le premier sélecteur <code>p</code> en <code>.special</code> pour voir comment il affecte le style.</strong></p>
+<p><strong>Tentez vous-même l'expérience ci-dessus </strong>—<strong> ajoutez le code HTML à votre expérience, puis ajoutez les deux règles <code>p {…}</code> à votre feuille de style. Ensuite, changez le premier sélecteur <code>p</code> en <code>.special</code> pour voir comment il affecte le style.</strong></p>
 
-<p>Au premier abord, les règles de cascade et de spécificité peuvent sembler compliquées ; avec une meilleure connaissance de CSS, elles vous paraîtront plus naturelles. Dans le prochain module, l'article <a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Cascade et héritage</a> vous détaillera ces principes et expliquera notamment comment calculer la spécificité. Pour le moment, rappelez vous que de tels cas existent et que le CSS peut parfois ne pas s'appliquer comme prévu. Dans une telle situation, souvenez-vous qu'un même élément peut être la cible de plusieurs sélecteurs concurrents.</p>
+<p>Au premier abord, les règles de cascade et de spécificité peuvent sembler compliquées ; avec une meilleure connaissance de CSS, elles vous paraîtront plus naturelles. Dans le prochain module, l'article <a href="/fr/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Cascade et héritage</a> vous détaillera ces principes et expliquera notamment comment calculer la spécificité. Pour le moment, rappelez vous que de tels cas existent et que le CSS peut parfois ne pas s'appliquer comme prévu. Dans une telle situation, souvenez-vous qu'un même élément peut être la cible de plusieurs sélecteurs concurrents.</p>
 
-<h2 id="Propriétés_et_valeurs">Propriétés et valeurs</h2>
+<h2 id="properties_and_values">Propriétés et valeurs</h2>
 
 <p>Au niveau le plus fondamental, CSS se compose de deux blocs de construction :</p>
 
 <ul>
- <li><strong>Propriétés </strong>: des identifiants lisibles par l'homme indiquant les caractéristiques stylistiques (<code><a href="/en-US/docs/Web/CSS/font-size">font-size</a></code>, <code><a href="/en-US/docs/Web/CSS/width">width</a></code>, <code><a href="/en-US/docs/Web/CSS/background-color">background-color</a></code>, par exemple) que vous souhaitez modifier ;</li>
- <li><strong>Valeurs </strong>: une valeur est attribuée à chaque propriété spécifiée. Elle indique comment vous souhaitez modifier ces caractéristiques stylistiques (par exemple, en modifiant la couleur de la police, la largeur ou l’arrière-plan).</li>
+ <li><strong>Propriétés </strong>: des identifiants lisibles par l'homme indiquant les caractéristiques stylistiques (<code><a href="/fr/docs/Web/CSS/font-size">font-size</a></code>, <code><a href="/fr/docs/Web/CSS/width">width</a></code>, <code><a href="/fr/docs/Web/CSS/background-color">background-color</a></code>, par exemple) que vous souhaitez modifier ;</li>
+ <li><strong>Valeurs </strong>: une valeur est attribuée à chaque propriété spécifiée. Elle indique comment vous souhaitez modifier ces caractéristiques stylistiques (par exemple, en modifiant la couleur de la police, la largeur ou l'arrière-plan).</li>
 </ul>
 
 <p>L'image ci-dessous met en évidence une propriété et une valeur uniques. Le nom de la propriété est <code>color</code> et la valeur <code>blue</code>.</p>
 
-<p><img alt="A declaration highlighted in the CSS" src="https://mdn.mozillademos.org/files/16498/declaration.png" style=""></p>
+<p><img alt="Une déclaration surlignée au sein du code CSS" src="declaration.png"></p>
 
 <p>Une propriété associée à une valeur s'appelle une <em>déclaration CSS</em>. Les déclarations CSS sont placées dans des <em>blocs de déclaration CSS</em>. L'image suivante montre notre CSS avec le bloc de déclaration en surbrillance.</p>
 
-<p><img alt="A highlighted declaration block" src="https://mdn.mozillademos.org/files/16499/declaration-block.png" style=""></p>
+<p><img alt="Un bloc de déclaration surligné" src="declaration-block.png"></p>
 
 <p>Enfin, les blocs de déclaration CSS sont associés à des <em>sélecteurs</em> pour produire des <em>ensembles de règles CSS</em> (ou <em>règles CSS</em>). L'image contient deux règles, une pour le sélecteur <code>h1</code> et une pour le sélecteur <code>p</code>. La règle pour <code>h1</code> est mise en surbrillance.</p>
 
-<p><img alt="The rule for h1 highlighted" src="https://mdn.mozillademos.org/files/16500/rules.png" style=""></p>
+<p><img alt="La règle ciblant h1 est surlignée" src="rules.png"></p>
 
 <p>Définir les propriétés CSS sur des valeurs spécifiques est la fonction principale du langage CSS. Le moteur CSS calcule les déclarations qui s'appliquent à chaque élément d'une page afin de le présenter et de le styler de manière appropriée. Ce qui est important à retenir est que les propriétés et les valeurs sont sensibles à la casse en CSS. La propriété et la valeur de chaque paire sont séparées par deux points (<code>:</code>).</p>
 
-<p><strong>Recherchez différentes valeurs possibles pour les propriétés suivantes puis écrivez des règles CSS qui les appliquent à différents éléments HTML : </strong></p>
+<p><strong>Recherchez différentes valeurs possibles pour les propriétés suivantes puis écrivez des règles CSS qui les appliquent à différents éléments HTML : </strong></p>
 
 <ul>
- <li><strong>{{cssxref("font-size")}}</strong></li>
- <li><strong>{{cssxref("width")}}</strong></li>
- <li><strong>{{cssxref("background-color")}}</strong></li>
- <li><strong>{{cssxref("color")}}</strong></li>
- <li><strong>{{cssxref("border")}}</strong></li>
+ <li><strong><a href="/fr/docs/Web/CSS/font-size"><code>font-size</code></a></strong></li>
+ <li><strong><a href="/fr/docs/Web/CSS/width"><code>width</code></a></strong></li>
+ <li><strong><a href="/fr/docs/Web/CSS/background-color"><code>background-color</code></a></strong></li>
+ <li><strong><a href="/fr/docs/Web/CSS/color"><code>color</code></a></strong></li>
+ <li><strong><a href="/fr/docs/Web/CSS/border"><code>border</code></a></strong></li>
 </ul>
 
 <div class="warning">
-<p><strong>Important </strong>: Si la propriété est inconnue ou si la valeur est invalide pour une propriété donnée, la déclaration est considérée comme <em>invalide</em> et complètement ignorée par le moteur CSS du navigateur.</p>
+<p><strong>Important :</strong> Si la propriété est inconnue ou si la valeur est invalide pour une propriété donnée, la déclaration est considérée comme <em>invalide</em> et complètement ignorée par le moteur CSS du navigateur.</p>
 </div>
 
 <div class="warning">
-<p><strong>Important </strong>: En CSS (et dans les autres standards web), l'orthographe américaine a été adoptée comme norme à respecter en cas d'incertitude linguistique. Par exemple, la couleur doit <em>toujours</em> être notée <code>color</code>. <code>couleur</code> ne fonctionnera pas.</p>
+<p><strong>Important :</strong> En CSS (et dans les autres standards web), l'orthographe américaine a été adoptée comme norme à respecter en cas d'incertitude linguistique. Par exemple, la couleur doit <em>toujours</em> être notée <code>color</code>. <code>couleur</code> ne fonctionnera pas.</p>
 </div>
 
-<h3 id="Fonctions">Fonctions</h3>
+<h3 id="functions">Fonctions</h3>
 
-<p>Bien que la plupart des valeurs soient des mots-clés relativement simples ou des valeurs numériques, on peut aussi appeler une fonction  pour calculer une valeur dans une déclaration CSS. Un exemple serait la fonction <code>calc()</code>. Cette fonction vous permet de faire des calculs simples à partir de CSS, par exemple :</p>
+<p>Bien que la plupart des valeurs soient des mots-clés relativement simples ou des valeurs numériques, on peut aussi appeler une fonction pour calculer une valeur dans une déclaration CSS. Un exemple serait la fonction <code>calc()</code>. Cette fonction vous permet de faire des calculs simples à partir de CSS, par exemple :</p>
 
 <div id="calc_example">
-<pre class="brush: html notranslate">&lt;div class="outer"&gt;&lt;div class="box"&gt;la boite interne vaut 90% - 30px.&lt;/div&gt;&lt;/div&gt;</pre>
+<pre class="brush: html">&lt;div class="outer"&gt;&lt;div class="box"&gt;la boite interne vaut 90% - 30px.&lt;/div&gt;&lt;/div&gt;</pre>
 
-<pre class="brush: css notranslate">.outer {
+<pre class="brush: css">.outer {
   border: 5px solid black;
 }
 
@@ -286,14 +274,14 @@ p {
 
 <p>{{EmbedLiveSample('calc_example', '100%', 200)}}</p>
 
-<p>Une fonction est composée du nom de la fonction suivi d'une paire de parenthèses entre lesquelles sont placées les valeurs autorisées pour cette fonction. Dans le cas de l'exemple <code>calc()</code> ci-dessus, on demande que la largeur de cette zone soit égale à 90% de la largeur du bloc conteneur, moins 30 pixels. Ce n'est pas quelque chose que l'on peut calculer à l'avance et simplement entrer la valeur dans le CSS, car on ne sait pas ce que seront 90%. Comme pour toutes les valeurs, chaque fonction a sa page de documentation sur MDN avec des exemples d'utilisation pour en voir le fonctionnement.</p>
+<p>Une fonction est composée du nom de la fonction suivi d'une paire de parenthèses entre lesquelles sont placées les valeurs autorisées pour cette fonction. Dans le cas de l'exemple <code>calc()</code> ci-dessus, on demande que la largeur de cette zone soit égale à 90% de la largeur du bloc conteneur, moins 30 pixels. Ce n'est pas quelque chose que l'on peut calculer à l'avance et simplement entrer la valeur dans le CSS, car on ne sait pas ce que seront 90%. Comme pour toutes les valeurs, chaque fonction a sa page de documentation sur MDN avec des exemples d'utilisation pour en voir le fonctionnement.</p>
 
-<p>Un autre exemple serait les différentes valeurs de la propriété {{cssxref ("&lt;transform&gt;")}}, telles que <code>rotate()</code>.</p>
+<p>Un autre exemple serait les différentes valeurs de la propriété <a href="/fr/docs/Web/CSS/&lt;transform&gt;"><code>&lt;transform&gt;</code></a>, telles que <code>rotate()</code>.</p>
 
 <div id="transform_example">
-<pre class="brush: html notranslate">&lt;div class="box"&gt;&lt;/div&gt;</pre>
+<pre class="brush: html">&lt;div class="box"&gt;&lt;/div&gt;</pre>
 
-<pre class="brush: css notranslate">.box {
+<pre class="brush: css">.box {
   margin: 30px;
   width: 100px;
   height: 100px;
@@ -309,22 +297,22 @@ p {
 <p><strong>Essayez de rechercher différentes valeurs des propriétés suivantes et d'écrire des règles CSS qui les appliquent à différents éléments HTML : </strong></p>
 
 <ul>
- <li><strong>{{cssxref("transform")}}</strong></li>
- <li><strong>{{cssxref("background-image")}}, in particular gradient values</strong></li>
- <li><strong>{{cssxref("color")}}, in particular rgb/rgba/hsl/hsla values</strong></li>
+ <li><strong><a href="/fr/docs/Web/CSS/transform"><code>transform</code></a></strong></li>
+ <li><strong><a href="/fr/docs/Web/CSS/background-image"><code>background-image</code></a>, en particulier les valeurs de dégradé</strong></li>
+ <li><strong><a href="/fr/docs/Web/CSS/color"><code>color</code></a>, en particulier les valeurs rgb/rgba/hsl/hsla</strong></li>
 </ul>
 
 <h2 id="rules">@rules</h2>
+e
+<p>Nous n'avons pas rencontré jusqu'ici les <code><a href="/fr/docs/Web/CSS/At-rule">@rules</a></code> (prononcer "at-rules"). Ce sont des règles spéciales dictant un comportement CSS. Certaines <code>@rules</code> simples sont composées d'un nom et d'une valeur. Par exemple, pour importer une feuille de style additionnelle dans le CSS principal on utilisera <code>@import</code> :</p>
 
-<p>Nous n'avons pas rencontré jusqu'ici les <code><a href="/en-US/docs/Web/CSS/At-rule">@rules</a></code> (prononcer "at-rules"). Ce sont des règles spéciales dictant un comportement CSS. Certaines <code>@rules</code>  simples sont composées d'un nom et d'une valeur. Par exemple, pour importer une feuille de style additionnelle dans le CSS principal on utilisera  <code>@import</code> :</p>
-
-<pre class="brush: css notranslate">@import 'styles2.css';</pre>
+<pre class="brush: css">@import 'styles2.css';</pre>
 
-<p>L'une des <code>@rules</code> les plus fréquemment rencontrée est <code>@media</code>, qui permet d'utiliser les <a href="/fr/docs/Web/CSS/Requêtes_média">media queries</a> pour appliquer CSS seulement quand certaines conditions sont vérifiées (par ex. quand la résolution de l'écran dépasse une certaine valeur, ou quand l'écran dépasse une certaine largeur).</p>
+<p>L'une des <code>@rules</code> les plus fréquemment rencontrée est <code>@media</code>, qui permet d'utiliser les <a href="/fr/docs/Web/CSS/Media_Queries"><i lang="en">media queries</i></a> pour appliquer CSS seulement quand certaines conditions sont vérifiées (par ex. quand la résolution de l'écran dépasse une certaine valeur, ou quand l'écran dépasse une certaine largeur).</p>
 
-<p>Dans le CSS ci-dessous, une règle donne à l'élément <code>&lt;body&gt;</code> un fond rose. La section <code>@media</code> ne s'appliquera que dans les navigateurs dont la fenêtre est plus large que 30em. Dans ce cas la couleur de fond sera redéfinie à bleue.</p>
+<p>Dans le CSS ci-dessous, une règle donne à l'élément <code>&lt;body&gt;</code> un fond rose. La section <code>@media</code> ne s'appliquera que dans les navigateurs dont la fenêtre est plus large que 30em. Dans ce cas la couleur de fond sera redéfinie à bleue.</p>
 
-<pre class="brush: css notranslate">body {
+<pre class="brush: css">body {
   background-color: pink
 }
 
@@ -334,56 +322,56 @@ p {
   }
 }</pre>
 
-<p>Tout au long de nos tutoriels CSS, vous rencontrerez d'autres <code>@rules</code>.</p>
+<p>Tout au long de nos tutoriels CSS, vous rencontrerez d'autres <code>@rules</code>.</p>
 
-<p><strong>Ajoutez une media query à votre CSS  pour obtenir des changements de styles basés sur la largeur de la fenêtre. Changez la largeur de la fenêtre de votre navigateur pour contrôler le résultat.</strong></p>
+<p><strong>Ajoutez une <i lang="en">media query</i> à votre CSS pour obtenir des changements de styles basés sur la largeur de la fenêtre. Changez la largeur de la fenêtre de votre navigateur pour contrôler le résultat.</strong></p>
 
-<h2 id="Raccourcis">Raccourcis</h2>
+<h2 id="shorthands">Raccourcis</h2>
 
-<p>Certaines propriétés comme {{cssxref("font")}}, {{cssxref("background")}}, {{cssxref("padding")}}, {{cssxref("border")}}, ou {{cssxref("margin")}} sont appelées <strong>propriétés raccourci</strong> — elles permettent d'attribuer plusieurs couples propriété : valeur en une seule ligne. On gagne du temps et le code est plus joli.</p>
+<p>Certaines propriétés comme <a href="/fr/docs/Web/CSS/font"><code>font</code></a>, <a href="/fr/docs/Web/CSS/background"><code>background</code></a>, <a href="/fr/docs/Web/CSS/padding"><code>padding</code></a>, <a href="/fr/docs/Web/CSS/border"><code>border</code></a>, ou <a href="/fr/docs/Web/CSS/margin"><code>margin</code></a> sont appelées <strong>propriétés raccourci</strong> — elles permettent d'attribuer plusieurs couples propriété : valeur en une seule ligne. On gagne du temps et le code est plus joli.</p>
 
-<p>Par exemple, la ligne suivante  :</p>
+<p>Par exemple, la ligne suivante :</p>
 
-<pre class="brush: css notranslate">/* Dans les raccourcis à 4 valeurs comme padding ou margin, les valeurs sont données
-   dans l'ordre top, right, bottom, left (sens des aiguilles d'une montre depuis top).
-   Il y a d'autres raccourcis, a 2 valeurs par exemple qui padding ou margin
-   pour top/bottom, puis left/right */
+<pre class="brush: css">/* Dans les raccourcis à 4 valeurs comme padding ou margin, les valeurs sont données
+   dans l'ordre top, right, bottom, left (sens des aiguilles d'une montre depuis top).
+   Il y a d'autres raccourcis, a 2 valeurs par exemple qui padding ou margin
+   pour top/bottom, puis left/right */
 padding: 10px 15px 15px 5px;</pre>
 
 <p>produit le même effet que les quatre lignes suivantes réunies :</p>
 
-<pre class="brush: css notranslate">padding-top: 10px;
+<pre class="brush: css">padding-top: 10px;
 padding-right: 15px;
 padding-bottom: 15px;
 padding-left: 5px;</pre>
 
 <p>Alors que :</p>
 
-<pre class="brush: css notranslate">background: red url(bg-graphic.png) 10px 10px repeat-x fixed;</pre>
+<pre class="brush: css">background: red url(bg-graphic.png) 10px 10px repeat-x fixed;</pre>
 
-<p>produit la même chose que tout ce qui suit :</p>
+<p>produit la même chose que tout ce qui suit :</p>
 
-<pre class="brush: css notranslate">background-color: red;
+<pre class="brush: css">background-color: red;
 background-image: url(bg-graphic.png);
 background-position: 10px 10px;
 background-repeat: repeat-x;
 background-scroll: fixed;</pre>
 
-<p>Ce n'est pas le moment d'apprendre tous ces raccourcis — vous les croiserez à travers de nombreux exemples tout au long de ce cours, vous vous réfèrerez alors à notre <a href="/fr/docs/Web/CSS/Reference">référence CSS</a> pour en savoir plus.</p>
+<p>Ce n'est pas le moment d'apprendre tous ces raccourcis — vous les croiserez à travers de nombreux exemples tout au long de ce cours, vous vous réfèrerez alors à notre <a href="/fr/docs/Web/CSS/Reference">référence CSS</a> pour en savoir plus.</p>
 
 <p><strong>Ajoutez les déclarations précédentes à votre CSS pour voir comment elles affectent la mise en forme de votre document HTML. Testez différentes valeurs.</strong></p>
 
-<div class="blockIndicator warning">
-<p><strong>Attention </strong>: Les raccourcis vous autorisent à ne pas déclarer certaines valeurs, mais dans ce cas, les valeurs non déclarées sont restaurées à leur valeur par défaut. Cela garantit l'usage d'un ensemble de valeurs qui restent raisonnables. Cela peut par contre vous surprendre, si vous pensiez que le rccourci ne changeait que les valeurs passées en argument.</p>
+<div class="notecard warning">
+<p><strong>Attention :</strong> Les raccourcis vous autorisent à ne pas déclarer certaines valeurs, mais dans ce cas, les valeurs non déclarées sont restaurées à leur valeur par défaut. Cela garantit l'usage d'un ensemble de valeurs qui restent raisonnables. Cela peut par contre vous surprendre, si vous pensiez que le raccourci ne changeait que les valeurs passées en argument.</p>
 </div>
 
-<h2 id="Commentaires">Commentaires</h2>
+<h2 id="comments">Commentaires</h2>
 
-<p>En CSS comme en HTML il est recomandé d'ajouter des commentaires, pour vous permettre de retrouver comment votre code fonctionne quand vous vous y replongez après quelques mois et pour permettre aussi à d'autres personnes de comprendre votre code quand elles sont amenées à travailler dessus.</p>
+<p>En CSS comme en HTML il est recommandé d'ajouter des commentaires, pour vous permettre de retrouver comment votre code fonctionne quand vous vous y replongez après quelques mois et pour permettre aussi à d'autres personnes de comprendre votre code quand elles sont amenées à travailler dessus.</p>
 
-<p>En CSS le début des commentaires est signalé par  <code>/*</code>  et la fin par <code>*/</code>. Dans le bloc de code ci-dessous, j'ai utilisé des commentaire pour marquer les différentes sections. Cela devient intéressant pour un code de taille importante— on peut alors utiliser les fonctionnalités de recherche de l'éditeur de code pour naviguer dans le fichier.</p>
+<p>En CSS le début des commentaires est signalé par <code>/*</code> et la fin par <code>*/</code>. Dans le bloc de code ci-dessous, j'ai utilisé des commentaires pour marquer les différentes sections. Cela devient intéressant pour un code de taille importante — on peut alors utiliser les fonctionnalités de recherche de l'éditeur de code pour naviguer dans le fichier.</p>
 
-<pre class="brush: css notranslate">/* mise en forme des éléments de base */
+<pre class="brush: css">/* mise en forme des éléments de base */
 /* -------------------------------------------------------------------------------------------- */
 body {
   font: 1em/150% Helvetica, Arial, sans-serif;
@@ -394,8 +382,8 @@ body {
 
 @media (min-width: 70em) {
   /* On donne un traitement conditionnel de la taille de police globale.
-     sur de grands écrans, on augmente la valeur de font-size pour une
-     meilleure lisibilité */
+     sur de grands écrans, on augmente la valeur de font-size pour une
+     meilleure lisibilité */
   body {
     font-size: 130%;
   }
@@ -403,7 +391,7 @@ body {
 
 h1 {font-size: 1.5em;}
 
-/* mise en forme des éléments imbriqués dans le DOM  */
+/* mise en forme des éléments imbriqués dans le DOM */
 /* -------------------------------------------------------------------------------------------- */
 div p, #id:first-line {
   background-color: red;
@@ -419,9 +407,9 @@ div p + p {
   padding-top: 0;
 }</pre>
 
-<p>Les commentaires sont aussi parfois utiles pour rendre temporairement inactive une zone de code (les sections commentées ne sont pas interprétées par le navigateur), par exemple pour identifier la partie de code responsable d'une erreur. Dans l'exemple suivant, la règle pour le sélecteur  <code>.special</code> a été désactivée par des commentaires :</p>
+<p>Les commentaires sont aussi parfois utiles pour rendre temporairement inactive une zone de code (les sections commentées ne sont pas interprétées par le navigateur), par exemple pour identifier la partie de code responsable d'une erreur. Dans l'exemple suivant, la règle pour le sélecteur <code>.special</code> a été désactivée par des commentaires :</p>
 
-<pre class="brush: css notranslate">/*.special {
+<pre class="brush: css">/*.special {
   color: red;
 }*/
 
@@ -431,13 +419,13 @@ p {
 
 <p><strong>Ajoutez des commentaires à votre CSS, il est bon que cela devienne une habitude.</strong></p>
 
-<h2 id="Espace">Espace</h2>
+<h2 id="white_space">Espace</h2>
 
-<p>On parle ici d'espaces laissés blancs dans le texte, de tabulations, de retour à la ligne. Le navigateur tend à ignorer les espaces dans les codes CSS et HTML ; les espaces dans le code CSS sont làa plupart du temps là pour le rendre plus lisible.</p>
+<p>On parle ici d'espaces laissés blancs dans le texte, de tabulations, de retour à la ligne. Le navigateur tend à ignorer les espaces dans les codes CSS et HTML ; les espaces dans le code CSS sont la plupart du temps présents pour le rendre plus lisible.</p>
 
-<p>L'exemple ci-dessous propose d'écrire une déclaration par ligne — le code produit est facile à comprendre et à maintenir : c'est un bon code.</p>
+<p>L'exemple ci-dessous propose d'écrire une déclaration par ligne — le code produit est facile à comprendre et à maintenir : c'est un bon code.</p>
 
-<pre class="brush: css notranslate">body {
+<pre class="brush: css">body {
   font: 1em/150% Helvetica, Arial, sans-serif;
   padding: 1em;
   margin: 0 auto;
@@ -470,9 +458,9 @@ div p + p {
 }
 </pre>
 
-<p id="Very_compact">On peut écrire le même code CSS en retirant la plupart des espaces — le code ci-dessous est équivalent au précédent pour un navigateur, mais, vous l'admettrez, plus difficile à lire pour un humain !</p>
+<p>On peut écrire le même code CSS en retirant la plupart des espaces — le code ci-dessous est équivalent au précédent pour un navigateur, mais, vous l'admettrez, plus difficile à lire pour un humain !</p>
 
-<pre class="brush: css notranslate">body {font: 1em/150% Helvetica, Arial, sans-serif; padding: 1em; margin: 0 auto; max-width: 33em;}
+<pre class="brush: css">body {font: 1em/150% Helvetica, Arial, sans-serif; padding: 1em; margin: 0 auto; max-width: 33em;}
 @media (min-width: 70em) { body {font-size: 130%;} }
 
 h1 {font-size: 1.5em;}
@@ -484,34 +472,34 @@ div p + p {padding-top: 0;}
 
 <p>La mise en forme de votre code est une question de goût personnel. Si vous travaillez en équipe, vous devrez sans doute vous plier aux conventions admises au sein de cette équipe.</p>
 
-<p>Il n'est pourtant pas possible de supprimer tous les espaces dans un fichier CSS. La suppression ou l'ajout d'espaces dans le code CSS peut produire des erreurs. Par exemple, les déclarations suivantes sont valides en CSS :</p>
+<p>Il n'est pourtant pas possible de supprimer tous les espaces dans un fichier CSS. La suppression ou l'ajout d'espaces dans le code CSS peut produire des erreurs. Par exemple, les déclarations suivantes sont valides en CSS :</p>
 
-<pre class="brush: css notranslate">margin: 0 auto;
+<pre class="brush: css">margin: 0 auto;
 padding-left: 10px;</pre>
 
-<p>Mais les suivantes sont invalides :</p>
+<p>Mais les suivantes sont invalides :</p>
 
-<pre class="brush: css notranslate">margin: 0auto;
+<pre class="brush: css">margin: 0auto;
 padding- left: 10px;</pre>
 
-<p><code>0auto</code> n'est pas reconnu comme une valeur possible pour la propriété <code>margin</code>  (<code>0</code> et <code>auto</code> sont chacune une valeur possible). Deux valeurs attribuées à une même propriété devront toujours être séparées par au moins un espace.</p>
+<p><code>0auto</code> n'est pas reconnu comme une valeur possible pour la propriété <code>margin</code> (<code>0</code> et <code>auto</code> sont chacune une valeur possible). Deux valeurs attribuées à une même propriété devront toujours être séparées par au moins un espace.</p>
 
-<p>Le navigateur ne connaît pas la propriété <code>padding-</code> . Les noms de propriété ou de valeur doivent être écrits tels quels sans rajouter d'espace.</p>
+<p>Le navigateur ne connaît pas la propriété <code>padding-</code> . Les noms de propriété ou de valeur doivent être écrits tels quels sans rajouter d'espace.</p>
 
-<p><strong>A votre tour, ajoutez ou supprimez des espaces dans votre CSS pour voir dans quels cas rien ne change et dans quels cas tout est cassé.</strong></p>
+<p><strong>À votre tour, ajoutez ou supprimez des espaces dans votre CSS pour voir dans quels cas rien ne change et dans quels cas tout est cassé.</strong></p>
 
-<h2 id="À_suivre...">À suivre... </h2>
+<h2 id="À_suivre…">À suivre…</h2>
 
-<p>Il est utile de comprendre, au moins dans les grandes lignes, comment votre navigateur calcule le rendu d'une page web à partir des fichiers HTML et CSS. Dans la prochaine leçon — <a href="/fr/docs/Learn/CSS/First_steps/How_CSS_works">Comment CSS fonctionne</a> — nous examinerons donc ce point.</p>
+<p>Il est utile de comprendre, au moins dans les grandes lignes, comment votre navigateur calcule le rendu d'une page web à partir des fichiers HTML et CSS. Dans la prochaine leçon — <a href="/fr/docs/Learn/CSS/First_steps/How_CSS_works">Comment CSS fonctionne</a> — nous examinerons donc ce point.</p>
 
 <p>{{PreviousMenuNext("Learn/CSS/First_steps/Getting_started", "Learn/CSS/First_steps/How_CSS_works", "Learn/CSS/First_steps")}}</p>
 
 <h2 id="Dans_ce_cours">Dans ce cours</h2>
 
 <ol>
- <li><a href="/fr/docs/Learn/CSS/First_steps/Qu_est_ce_que_CSS">Qu'est ce que CSS?</a></li>
- <li><a href="/fr/docs/Learn/CSS/First_steps/Getting_started">Démarrer avec CSS</a></li>
- <li><a href="/fr/docs/Learn/CSS/First_steps/How_CSS_is_structured">Comment CSS est structuré</a></li>
+ <li><a href="/fr/docs/Learn/CSS/First_steps/What_is_CSS">Qu'est ce que CSS?</a></li>
+ <li><a href="/fr/docs/Learn/CSS/First_steps/Getting_started">Démarrer avec CSS</a></li>
+ <li>Comment CSS est structuré</li>
  <li><a href="/fr/docs/Learn/CSS/First_steps/How_CSS_works">CSS comment ça marche ?</a></li>
  <li><a href="/fr/docs/Learn/CSS/First_steps/Using_your_new_knowledge">Mettre en œuvre vos connaissances</a></li>
 </ol>
diff --git a/files/fr/learn/front-end_web_developer/index.html b/files/fr/learn/front-end_web_developer/index.html
index 60fea45f7e..87618a86ca 100644
--- a/files/fr/learn/front-end_web_developer/index.html
+++ b/files/fr/learn/front-end_web_developer/index.html
@@ -35,7 +35,7 @@ original_slug: Apprendre/Front-end_web_developer
 
 <p>Nous avons essayé de rendre l'apprentissage du développement web front-end aussi simple que possible, mais vous resterez probablement bloqué parce que vous ne comprenez pas quelque chose, ou parce que du code ne fonctionne pas.</p>
 
-<p>Ne paniquez pas. Nous avons tous des problèmes, que nous soyons débutants ou professionnels du développement web. L'article <a href="/en-US/docs/Learn/Learning_and_getting_help">Apprendre et obtenir de l'aide</a> avous donne une série de conseils pour rechercher des informations et vous aider. Si vous êtes toujours bloqués, n'hésitez pas à poser une question sur notre <a href="https://discourse.mozilla.org/c/mdn/learn/">forum de discussion</a>.</p>
+<p>Ne paniquez pas. Nous avons tous des problèmes, que nous soyons débutants ou professionnels du développement web. L'article <a href="/en-US/docs/Learn/Learning_and_getting_help">Apprendre et obtenir de l'aide</a> vous donne une série de conseils pour rechercher des informations et vous aider. Si vous êtes toujours bloqués, n'hésitez pas à poser une question sur notre <a href="https://discourse.mozilla.org/c/mdn/learn/">forum de discussion</a>.</p>
 
 <p>Allons-y. Bonne chance !</p>
 
diff --git a/files/fr/learn/performance/html/index.html b/files/fr/learn/performance/html/index.html
new file mode 100644
index 0000000000..268d602662
--- /dev/null
+++ b/files/fr/learn/performance/html/index.html
@@ -0,0 +1,82 @@
+---
+title: Fonctionnalités de performances liées à HTML
+slug: Learn/Performance/HTML
+translation_of: Learn/Performance/HTML
+---
+<p>{{LearnSidebar}} {{PreviousMenuNext("Learn/Performance/javascript_performance", "Learn/Performance/CSS", "Learn/Performance")}} {{draft}}</p>
+
+<p>HTML est par défaut rapide et accessible. Il est du devoir de toute personne développant des sites web et des applications de s'assurer que ces deux caractéristiques sont préservées lors de la création ou de la modification de code HTML. Des difficultés peuvent apparaître par exemple lorsque la taille de fichier d'un élément <a href="/fr/docs/Web/HTML/Element/video"><code>&lt;video&gt;</code></a> est trop importante, ou lorsqu'une page web n'est pas optimisée pour les appareils mobiles. Ce module a pour but de présenter les fonctionnalités clés de HTML qui sont liées aux performances, et qui peuvent améliorer drastiquement la qualité de vos pages web.</p>
+
+<table class="learn-box standard-table">
+  <tbody>
+    <tr>
+      <th scope="row">Prérequis&nbsp;:</th>
+      <td>Bases de l'informatique, <a href="/fr/docs/Learn/Getting_started_with_the_web/Installing_basic_software">logiciels de base</a> installés et connaissances de base <a href="/fr/docs/Learn/Getting_started_with_the_web">des technologies web opérant côté client</a>.</td>
+    </tr>
+    <tr>
+      <th scope="row">Objectifs&nbsp;:</th>
+      <td>En savoir davantage sur l'impact des éléments et attributs HTML le l'optimisation des performances pour le web.</td>
+    </tr>
+  </tbody>
+</table>
+
+<h2 id="elements_attributes_impacting_performance">Éléments &amp; attributs ayant un impact sur les performances</h2>
+
+<ul>
+  <li><a href="/fr/docs/Web/HTML/Element/picture">L'élément <code>&lt;picture&gt;</code></a></li>
+  <li><a href="/fr/docs/Web/HTML/Element/video">L'élément <code>&lt;video&gt;</code></a></li>
+  <li><a href="/fr/docs/Web/HTML/Element/Source">L'élément <code>&lt;source&gt;</code></a></li>
+  <li>
+    <a href="/fr/docs/Web/HTML/Element/Img#attributes">L'élément et l'attribut <code>&lt;img&gt; srcset</code></a>
+    <ul>
+      <li><a href="/fr/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">Images adaptatives</a></li>
+    </ul>
+  </li>
+  <li><a href="/fr/docs/orphaned/Web/HTML/Preloading_content">Préchargement du contenu avec <code>rel="preload"</code></a> - <a href="https://w3c.github.io/preload/">(https://w3c.github.io/preload/ - en anglais</a>)</li>
+  <li>Attributs <code>async</code> / <code>defer</code></li>
+  <li><a href="/fr/docs/Web/HTML/Element/iframe">L'élément <code>&lt;iframe&gt;</code></a></li>
+  <li><a href="/fr/docs/Web/HTML/Element/object">L'élément <code>&lt;object&gt;</code></a></li>
+  <li><a href="/fr/docs/Web/HTML/Element/script">L'élément <code>&lt;script&gt;</code></a></li>
+  <li><a href="/fr/docs/Web/HTML/Attributes/rel">L'attribut <code>rel</code></a></li>
+</ul>
+
+<h2 id="conclusion">Conclusion</h2>
+
+<p>{{PreviousMenuNext("Learn/Performance/javascript_performance", "Learn/Performance/CSS", "Learn/Performance")}}</p>
+
+<h2 id="in_this_module">Dans ce module</h2>
+
+<ul>
+  <li><a href="/fr/docs/Learn/Performance/why_web_performance">Le « pourquoi » des performances web</a></li>
+  <li><a href="/fr/docs/Learn/Performance/What_is_web_performance">Qu'est-ce que sont les performances web ?</a></li>
+  <li><a href="/fr/docs/Learn/Performance/Perceived_performance">Comment les visiteurs perçoivent-ils les performances ?</a></li>
+  <li><a href="/fr/docs/Learn/Performance/Measuring_performance">Mesurer les performances</a></li>
+  <li><a href="/fr/docs/Learn/Performance/Multimedia">Multimédia : images</a></li>
+  <li><a href="/fr/docs/Learn/Performance/video">Multimédia : vidéos</a></li>
+  <li><a href="/fr/docs/Learn/Performance/JavaScript">Bonnes pratiques de performances pour JavaScript</a></li>
+  <li><a href="/fr/docs/Learn/Performance/HTML">Fonctionnalités de HTML liées aux performances</a></li>
+  <li><a href="/fr/docs/Learn/Performance/CSS">Fonctionnalités de CSS liées aux performances</a></li>
+  <li><a href="/fr/docs/Learn/Performance/Fonts">Performances et polices d'écriture</a></li>
+  <li><a href="/fr/docs/Learn/Performance/Mobile">Performances sur mobile</a></li>
+  <li><a href="/fr/docs/Learn/Performance/business_case_for_performance">Placer le focus sur les performances</a></li>
+</ul>
+
+<h2 id="see_also">Voir aussi</h2>
+
+<ul>
+  <li><a href="/fr/docs/Web/HTML/Element/picture">L'élément <code>&lt;picture&gt;</code></a></li>
+  <li><a href="/fr/docs/Web/HTML/Element/video">L'élément <code>&lt;video&gt;</code></a></li>
+  <li><a href="/fr/docs/Web/HTML/Element/Source">L'élément <code>&lt;source&gt;</code></a></li>
+  <li>
+    <a href="/fr/docs/Web/HTML/Element/Img#attributes">L'élément et l'attribut <code>&lt;img&gt; srcset</code></a>
+    <ul>
+      <li><a href="/fr/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">Images adaptatives</a></li>
+    </ul>
+  </li>
+  <li><a href="/fr/docs/orphaned/Web/HTML/Preloading_content">Préchargement du contenu avec <code>rel="preload"</code></a> - <a href="https://w3c.github.io/preload/">(https://w3c.github.io/preload/ - en anglais</a>)</li>
+  <li>Attributs <code>async</code> / <code>defer</code></li>
+  <li><a href="/fr/docs/Web/HTML/Element/iframe">L'élément <code>&lt;iframe&gt;</code></a></li>
+  <li><a href="/fr/docs/Web/HTML/Element/object">L'élément <code>&lt;object&gt;</code></a></li>
+  <li><a href="/fr/docs/Web/HTML/Element/script">L'élément <code>&lt;script&gt;</code></a></li>
+  <li><a href="/fr/docs/Web/HTML/Attributes/rel">L'attribut <code>rel</code></a></li>
+</ul>
diff --git a/files/fr/learn/performance/measuring_performance/index.html b/files/fr/learn/performance/measuring_performance/index.html
new file mode 100644
index 0000000000..8ac486bdab
--- /dev/null
+++ b/files/fr/learn/performance/measuring_performance/index.html
@@ -0,0 +1,101 @@
+---
+title: Mesure des performances
+slug: Learn/Performance/Measuring_performance
+translation_of: 'Learn/Performance/Measuring_performance'
+---
+<div>{{LearnSidebar}} {{PreviousMenuNext("Learn/Performance/Perceived_performance", "Learn/Performance/Multimedia", "Learn/Performance")}}</div>
+
+<p>La mesure des performance fournit un indicateur important pour vous aider à assurer le succès de votre application, site ou service web.</p>
+
+<p>Par exemple, vous pouvez utiliser les indicateurs de performances pour déterminer la manière dont votre application se charge par rapport à vos concurrents, ou par rapport à vos versions précédentes. Il est recommandé de choisir des indicateurs pertinents en fonction de vos utilisatrices et utilisateurs, du contexte de votre site et de vos objectifs commerciaux. Ces indicateurs doivent être collectés et mesurés de façon cohérente et analysés à partir d'un format qui peut être lu et compris par des parties prenantes non techniques.</p>
+
+<p>Cet article présente les indicateurs de performances web que vous pouvez utiliser afin de mesurer et optimiser les performances de votre site.</p>
+
+<table class="learn-box standard-table">
+  <tbody>
+    <tr>
+      <th scope="row">Pré-requis&nbsp;:</th>
+      <td>Bases de l'informatique, <a href="/fr/docs/Learn/Getting_started_with_the_web/Installing_basic_software">logiciels de base</a> installés et connaissances de base <a href="/fr/docs/Learn/Getting_started_with_the_web">des technologies web opérant côté client</a>.</td>
+    </tr>
+    <tr>
+      <th scope="row">Objectif&nbsp;:</th>
+      <td>
+        <p>Proposer des informations sur les indicateurs de performance web que vous pouvez collecter avec les différentes API de performances web et présenter des outils qui permettent de visualiser ces données.</p>
+      </td>
+    </tr>
+  </tbody>
+</table>
+
+<h2 id="performance_APIs">Les API de mesure des performances</h2>
+
+<p>Si vous êtes en capacité d'écrire du code pour le web, sachez qu'il existe un grand nombre <a href="/fr/docs/Web/API">d'API Web</a> destinées à créer vos propres outils de mesure de performances.</p>
+
+<p>Vous pouvez utiliser <a href="/fr/docs/Web/API/Navigation_timing_API">l'API d'horodatage de navigation</a> pour mesurer les performances web côté client. Cela comprend le volume de temps nécessaire pour décharger la page précédente, le temps que prendra la résolution du nom de domaine, le total du temps passé à exécuter le chargement de la page, et bien plus encore. Vous pouvez utiliser les API pour créer des indicateurs de mesure de tous les évènements liés à la navigation affichés dans le diagramme présenté ci-dessous.</p>
+
+<p><img alt="Voici les différents gestionnaires que l'API d'horodatage de la navigation peut prendre en charge, incluant les gestionnaires suivants (en anglais)&nbsp;: Prompt for unload&nbsp;; redirect&nbsp;; unload&nbsp;; App cache&nbsp;; DNS&nbsp;; TCP&nbsp;; Request&nbsp;; Response&nbsp;; Processing&nbsp;; onLoad&nbsp;; navigationStart&nbsp;; redirectStart&nbsp;; redirectEnd&nbsp;; fetchStart&nbsp;; domainLookupEnd&nbsp;; domainLookupStart&nbsp;; connectStart (secureConnectionStart)&nbsp;; connectEnd&nbsp;; requestStart&nbsp;; responseStart&nbsp;; responseEnd&nbsp;; unloadStart&nbsp;; unloadEnd&nbsp;; domLoading&nbsp;; domInteractive&nbsp;; domContentLoaded&nbsp;; domComplete&nbsp;; loadEventStart&nbsp;; loadEventEnd." src="navigationtimingapi.jpg"></p>
+
+<p><a href="/fr/docs/Web/API/Performance_API/Using_the_Performance_API">L'API de performances</a> propose un accès aux informations liées aux performances, ce qui comprend <a href="/fr/docs/Web/API/Performance_Timeline">l'API de chronologie des performances</a>, <a href="/fr/docs/Web/API/Navigation_timing_API">l'API d'horodatage de la navigation</a>, <a href="/fr/docs/Web/API/User_Timing_API">l'API d'horodatage du visiteur</a> ainsi que <a href="/fr/docs/Web/API/Resource_Timing_API">l'API d'horodatage des ressources</a>. Ces interfaces permettent de mesurer précisément le temps que prennent les tâches JavaScript pour se dérouler.</p>
+
+<p>L'objet <a href="/fr/docs/Web/API/PerformanceEntry"><code>PerformanceEntry</code></a> fait partie de la <em>chronologie des performances</em>. Une entrée <em>performance</em> peut directement être créée en utilisant <em>{{domxref("PerformanceMark","PerformanceMark")}}</em> ou une <em>{{domxref("PerformanceMeasure","PerformanceMeasure")}}</em> (par exemple en appelant la méthode {{domxref("Performance.mark","mark()")}}) sur un point explicite de l'application. Les entrées de performances peuvent aussi être créées de façon indirecte, par exemple lors du chargement d'une ressource graphique.</p>
+
+<p><a href="/fr/docs/Web/API/PerformanceObserver">L'API PerformanceObserver</a> peut être utilisée pour observer le déroulement d'évènements de mesure des performances et permet de vous notifier de nouvelles <a href="/fr/docs/Web/API/PerformanceEntry">entrées de performances</a> lorsqu'elles enregistrent la chronologie des performances dans le navigateur.</p>
+
+<p>Si cet article n'a pas pour but de proposer une documentation complète de ces API, il est bon de savoir qu'elles existent. Vous pouvez vous référer à l'article concernant <a href="/fr/docs/Web/Performance/Navigation_and_resource_timings">l'horodatage de navigation</a> pour aller plus loin et découvrir plus d'exemples concernant les API liées à la mesure des performances.</p>
+
+<h2 id="tools_and_metrics">Outils de mesure</h2>
+
+<p>Il y a beaucoup d'outils disponibles pour vous aider à améliorer les performances de vos sites. Ils sont généralement classés dans deux catégories&nbsp;:</p>
+
+<ul>
+  <li>Les outils qui indiquent ou mesurent les performances, tels que <a href="https://developers.google.com/speed/pagespeed/insights/">PageSpeed Insights</a> ou le <a href="/fr/docs/Tools/Network_Monitor">moniteur réseau</a> et le <a href="/fr/docs/Tools/Performance">moniteur de performances</a> de Firefox. Ces outils vous montrent la vitesse de chargement de votre site ou de votre application. Ils vous indiquent également les points sur lesquels votre application web peut être améliorée.</li>
+  <li>Les outils qui corrigent le code de votre application web ou de votre site afin d'améliorer ses performances. Par exemple, certains outils de construction empaquettent le code réparti sur plusieurs fichiers en un seul fichier unique afin de réduire le nombre de requêtes HTTP. Il existe aussi des minificateurs qui suppriment tous les espaces de votre code pour réduire la taille des fichiers.</li>
+</ul>
+
+<p>Sur cette page, ces deux catégories d'outils seront abordées. Par ailleurs, en parlant des mesures de performances, nous aborderons bien entendu les indicateurs que vous allez utiliser pour déterminer si les performances de votre site s'améliorent ou non.</p>
+
+<h3 id="general_performance_reporting_tools">Outils de rapport de performances génériques</h3>
+
+<p>Les outils tels que <a href="https://developers.google.com/speed/pagespeed/insights/">PageSpeed Insights</a> sont faits pour mesurer les performances des sites. Vous saisissez une URL, puis vous obtenez un rapport de performances en quelques secondes. Le rapport contient les scores obtenus par votre site, que ce soit sur mobile ou sur ordinateur de bureau. C'est un bon point de départ pour savoir d'où vous partez et pour connaître les points d'amélioration.</p>
+
+<p>Au moment de l'écriture de cette page, voici à quoi ressemblait le rapport de performances du site MDN&nbsp;:</p>
+
+<p><img alt="Une capture d'écran montrant le rapport PageSpeed Insights de la page d'accueil de Mozilla." src="pagespeed-insight-mozilla-homepage.png" style="border-style: solid; border-width: 1px;"></p>
+
+<p>Un rapport de performances contient des informations concernant le temps d'attente des visiteurs avant que quelque chose ne s'affiche, le nombre d'octets à télécharger pour afficher la page, et bien plus encore. Cela vous permet également de savoir si les mesures réalisées sont positives ou négatives.</p>
+
+<p><a href="https://webpagetest.org">webpagetest.org</a> est un autre exemple d'outil capable de tester automatiquement votre site et d'afficher des indicateurs utiles.</p>
+
+<p>Essayez vos sites favoris sur webpagetest.org et PageSpeed Insights, vous connaîtrez leurs scores de performances.</p>
+
+<h3 id="network_tools">Outils réseau</h3>
+
+<p>La plupart des navigateurs ont des outils avec lesquels vous pouvez tester les pages web en cours de chargement pour déterminer leurs performances. Par exemple, le <a href="/fr/docs/Tools/Network_Monitor">moniteur réseau</a> de Firefox retourne des informations détaillées sur toutes les ressources téléchargées sur le réseau ainsi qu'un graphique montrant la durée de téléchargement de chaque ressource.</p>
+
+<p><img alt="" src="network-monitor.png" style="border-style: solid; border-width: 1px;"></p>
+
+<p>Vous pouvez aussi utiliser le <a href="/fr/docs/Tools/Performance">moniteur de performances</a> pour mesurer les performances de l'interface de votre application ou de votre site pendant que vous réalisez différentes actions. Cela permet d'identifier les fonctionnalités qui ralentissent le plus votre interface.</p>
+
+<p><img alt="" src="perf-monitor.png" style="border-style: solid; border-width: 1px;"></p>
+
+<h2 id="conclusion">Conclusion</h2>
+
+<p>Cet article était destiné à proposer une vue d'ensemble rapide des indicateurs de performance web que vous pouvez mesurer sur un site ou une application web. Dans le prochain article, nous verrons comment travailler sur la performance perçue et nous découvrirons des techniques permettant de rendre les éléments les plus longs à charger un peu moins lents pour le visiteur, voire pour les masquer complètement.</p>
+
+<p>{{PreviousMenuNext("Learn/Performance/Perceived_performance", "Learn/Performance/Multimedia", "Learn/Performance")}}</p>
+
+<h2 id="in_this_module">Dans ce module</h2>
+
+<ul>
+  <li><a href="/fr/docs/Learn/Performance/why_web_performance">Le «&nbsp;pourquoi&nbsp;» des performances web</a></li>
+  <li><a href="/fr/docs/Learn/Performance/What_is_web_performance">Qu'est-ce que sont les performances web&nbsp;?</a></li>
+  <li><a href="/fr/docs/Learn/Performance/Perceived_performance">Comment les visiteurs perçoivent-ils les performances&nbsp;?</a></li>
+  <li><a href="/fr/docs/Learn/Performance/Measuring_performance">Mesurer les performances</a></li>
+  <li><a href="/fr/docs/Learn/Performance/Multimedia">Multimédia&nbsp;: images</a></li>
+  <li><a href="/fr/docs/Learn/Performance/video">Multimédia&nbsp;: vidéos</a></li>
+  <li><a href="/fr/docs/Learn/Performance/JavaScript">Bonnes pratiques de performances pour JavaScript</a></li>
+  <li><a href="/fr/docs/Learn/Performance/HTML">Fonctionnalités de HTML liées aux performances</a></li>
+  <li><a href="/fr/docs/Learn/Performance/CSS">Fonctionnalités de CSS liées aux performances</a></li>
+  <li><a href="/fr/docs/Learn/Performance/Fonts">Performances et polices d'écriture</a></li>
+  <li><a href="/fr/docs/Learn/Performance/Mobile">Performances sur mobile</a></li>
+  <li><a href="/fr/docs/Learn/Performance/business_case_for_performance">Placer le focus sur les performances</a></li>
+</ul>
diff --git a/files/fr/learn/tools_and_testing/understanding_client-side_tools/command_line/index.html b/files/fr/learn/tools_and_testing/understanding_client-side_tools/command_line/index.html
index 19933cfd0d..9905d1e7ae 100644
--- a/files/fr/learn/tools_and_testing/understanding_client-side_tools/command_line/index.html
+++ b/files/fr/learn/tools_and_testing/understanding_client-side_tools/command_line/index.html
@@ -481,7 +481,7 @@ printMe(myObj);</pre>
 
 <ul>
  <li><a href="/fr/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview">Client-side tooling overview</a></li>
- <li><a href="https://wiki.developer.mozilla.org/fr/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Ligne_de_commande">Cours express sur la ligne de commande</a></li>
+ <li><a href="/fr/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Ligne_de_commande">Cours express sur la ligne de commande</a></li>
  <li><a href="/fr/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Package_management">Package management basics</a></li>
  <li><a href="/fr/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Introducing_complete_toolchain">Introducing a complete toolchain</a></li>
  <li><a href="/fr/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Deployment">Deploying our app</a></li>
diff --git a/files/fr/mdn/contribute/localize/index.html b/files/fr/mdn/contribute/localize/index.html
index 769f171966..082c1a24ed 100644
--- a/files/fr/mdn/contribute/localize/index.html
+++ b/files/fr/mdn/contribute/localize/index.html
@@ -32,7 +32,7 @@ tags:
 
 <ul>
  <li>Discussions : <a href="https://chat.mozilla.org/#/room/#l10n-fr:mozilla.org">Matrix (#l10n-fr channel)</a></li>
- <li>Contributeurs actuels : <a href="https://github.com/SphinxKnight">SphinxKnight</a>, <a href="https://github.com/tristantheb">tristantheb</a>, <a href="https://github.com/JNa0">JNa0</a>, <a href="https://github.com/nicolas-goudry">nicolas-goudry</a>, <a href="https://github.com/LEMIBANDDEXARI">LEMIBANDDEXARI</a></li>
+ <li>Contributeurs actuels : <a href="https://github.com/SphinxKnight">SphinxKnight</a>, <a href="https://github.com/tristantheb">tristantheb</a>, <a href="https://github.com/audrasjb">Jb Audras</a></li>
 </ul>
 
 <h3 id="Japanese_ja">Japonais (ja)</h3>
diff --git a/files/fr/mozilla/add-ons/webextensions/manifest.json/permissions/index.html b/files/fr/mozilla/add-ons/webextensions/manifest.json/permissions/index.html
index 537eca9f45..f1a7196433 100644
--- a/files/fr/mozilla/add-ons/webextensions/manifest.json/permissions/index.html
+++ b/files/fr/mozilla/add-ons/webextensions/manifest.json/permissions/index.html
@@ -179,15 +179,15 @@ translation_of: Mozilla/Add-ons/WebExtensions/manifest.json/permissions
 
 <h2 id="Exemple">Exemple</h2>
 
-<pre class="brush: json; no-line-numbers"> "permissions": ["*://developer.mozilla.org/*"]</pre>
+<pre class="brush: json; no-line-numbers">"permissions": ["*://developer.mozilla.org/*"]</pre>
 
 <p>Demande d'accès privilégié aux pages sous developer.mozilla.org.</p>
 
-<pre class="brush: json no-line-numbers">  "permissions": ["tabs"]</pre>
+<pre class="brush: json no-line-numbers">"permissions": ["tabs"]</pre>
 
 <p>Demande d'accès aux éléments privilégiés de l'API <code>tabs.</code></p>
 
-<pre class="brush: json no-line-numbers  language-json"><code class="language-json"><span class="key token">"permissions":</span> <span class="punctuation token">[</span><span class="string token">"*://developer.mozilla.org/*"</span><span class="punctuation token">,</span> <span class="string token">"tabs"</span></code></pre>
+<pre class="brush: json no-line-numbers">"permissions": ["*://developer.mozilla.org/*", "tabs"]</pre>
 
 <p>Demande des deux permissions ci-dessus.</p>
 
diff --git a/files/fr/mozilla/firefox/releases/3.6/index.html b/files/fr/mozilla/firefox/releases/3.6/index.html
index 168ce35f38..0db6534632 100644
--- a/files/fr/mozilla/firefox/releases/3.6/index.html
+++ b/files/fr/mozilla/firefox/releases/3.6/index.html
@@ -7,7 +7,7 @@ tags:
 translation_of: Mozilla/Firefox/Releases/3.6
 original_slug: Mozilla/Firefox/Versions/3.6
 ---
-<div><section class="Quick_links" id="Quick_Links">
+<div><section id="Quick_links">
   <ol>
     <li class="toggle">
         <details>
diff --git a/files/fr/mozilla/firefox/releases/3/updating_extensions/index.html b/files/fr/mozilla/firefox/releases/3/updating_extensions/index.html
index 1912c86e8c..5fdb071214 100644
--- a/files/fr/mozilla/firefox/releases/3/updating_extensions/index.html
+++ b/files/fr/mozilla/firefox/releases/3/updating_extensions/index.html
@@ -6,7 +6,7 @@ tags:
 translation_of: Mozilla/Firefox/Releases/3/Updating_extensions
 original_slug: Mise_à_jour_des_extensions_pour_Firefox_3
 ---
-<div><section class="Quick_links" id="Quick_Links">
+<div><section id="Quick_links">
   <ol>
     <li class="toggle">
         <details>
diff --git a/files/fr/mozilla/firefox/releases/35/index.html b/files/fr/mozilla/firefox/releases/35/index.html
index 51627085aa..ccd31bf7db 100644
--- a/files/fr/mozilla/firefox/releases/35/index.html
+++ b/files/fr/mozilla/firefox/releases/35/index.html
@@ -8,7 +8,7 @@ tags:
 translation_of: Mozilla/Firefox/Releases/35
 original_slug: Mozilla/Firefox/Versions/35
 ---
-<div><section class="Quick_links" id="Quick_Links">
+<div><section id="Quick_links">
   <ol>
     <li class="toggle">
         <details>
diff --git a/files/fr/mozilla/firefox/releases/4/index.html b/files/fr/mozilla/firefox/releases/4/index.html
index 20b62b8bee..42cc40e3dc 100644
--- a/files/fr/mozilla/firefox/releases/4/index.html
+++ b/files/fr/mozilla/firefox/releases/4/index.html
@@ -7,7 +7,7 @@ tags:
 translation_of: Mozilla/Firefox/Releases/4
 original_slug: Mozilla/Firefox/Versions/4
 ---
-<div><section class="Quick_links" id="Quick_Links">
+<div><section id="Quick_links">
   <ol>
     <li class="toggle">
         <details>
diff --git a/files/fr/mozilla/firefox/releases/6/index.html b/files/fr/mozilla/firefox/releases/6/index.html
index b3c31b4e8e..413996137f 100644
--- a/files/fr/mozilla/firefox/releases/6/index.html
+++ b/files/fr/mozilla/firefox/releases/6/index.html
@@ -7,7 +7,7 @@ tags:
 translation_of: Mozilla/Firefox/Releases/6
 original_slug: Mozilla/Firefox/Versions/6
 ---
-<div><section class="Quick_links" id="Quick_Links">
+<div><section id="Quick_links">
   <ol>
     <li class="toggle">
         <details>
diff --git a/files/fr/mozilla/firefox/releases/8/index.html b/files/fr/mozilla/firefox/releases/8/index.html
index d6da1ee29c..b59e66f0b9 100644
--- a/files/fr/mozilla/firefox/releases/8/index.html
+++ b/files/fr/mozilla/firefox/releases/8/index.html
@@ -7,7 +7,7 @@ tags:
 translation_of: Mozilla/Firefox/Releases/8
 original_slug: Mozilla/Firefox/Versions/8
 ---
-<div><section class="Quick_links" id="Quick_Links">
+<div><section id="Quick_links">
   <ol>
     <li class="toggle">
         <details>
diff --git a/files/fr/mozilla/firefox/releases/9/index.html b/files/fr/mozilla/firefox/releases/9/index.html
index e34861ce72..ccef51ab0f 100644
--- a/files/fr/mozilla/firefox/releases/9/index.html
+++ b/files/fr/mozilla/firefox/releases/9/index.html
@@ -7,7 +7,7 @@ tags:
 translation_of: Mozilla/Firefox/Releases/9
 original_slug: Mozilla/Firefox/Versions/9
 ---
-<div><section class="Quick_links" id="Quick_Links">
+<div><section id="Quick_links">
   <ol>
     <li class="toggle">
         <details>
diff --git a/files/fr/web/api/atob/index.html b/files/fr/web/api/atob/index.html
new file mode 100644
index 0000000000..bcc94f59e4
--- /dev/null
+++ b/files/fr/web/api/atob/index.html
@@ -0,0 +1,78 @@
+---
+title: window.atob
+slug: Web/API/atob
+tags:
+  - API
+  - DOM
+  - Reference
+  - WindowOrWorkerGlobalScope
+  - atob
+translation_of: Web/API/WindowOrWorkerGlobalScope/atob
+original_slug: Web/API/WindowOrWorkerGlobalScope/atob
+---
+<p>{{APIRef ("HTML DOM")}}<br>
+ La fonction <code>WindowOrWorkerGlobalScope.atob()</code> décode une chaîne de données qui a été codée en utilisant le codage en base 64. Vous pouvez utiliser la méthode {{domxref("WindowOrWorkerGlobalScope.btoa","btoa()")}} pour encoder et transmettre des données qui pourraient causer des problèmes de communication, puis les transmettre et utiliser la méthode atob() pour décoder les données . Par exemple, vous pouvez coder, transmettre et décoder des caractères de contrôle tels que les valeurs ASCII 0 à 31.</p>
+
+<p>Pour une utilisation avec des chaînes Unicode ou UTF-8, voir <a href="/fr/docs/D%C3%A9coder_encoder_en_base64">cette note sur l'encodage et le décodage Base64</a> et <a href="/fr-FR/docs/Web/API/window.btoa#Unicode_Strings">cette note sur btoa()</a>.</p>
+
+<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2>
+
+<pre class="eval">var donneesDecodees = scope.atob(<em>donneesEncodees</em>);
+</pre>
+
+<h3 id="Déclenche">Déclenche</h3>
+
+<p>Déclenche une {{jsxref("DOMException")}} si la longueur de la chaîne passée en entrée n'est pas un multiple de 4.</p>
+
+<h2 id="Exemple" name="Exemple">Exemple</h2>
+
+<pre class="eval"><em>donneesEncodees</em> = window.btoa('Salut, monde'); // encode une chaîne
+<em>donneesDecodees</em> = window.atob(<em>donneesEncodees</em>); // décode la chaîne
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'webappapis.html#dom-btoa', 'WindowOrWorkerGlobalScope.atob()')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Méthode déplacée dans le mixin <code>WindowOrWorkerGlobalScope</code> dans la spéc la plus récente.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#dom-windowbase64-atob', 'WindowBase64.atob()')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Pas de changement depuis l'instantané le plus récent {{SpecName("HTML5.1")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', '#dom-windowbase64-atob', 'WindowBase64.atob()')}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>Instantané de {{SpecName("HTML WHATWG")}}. Pas de changement.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5 W3C", "#dom-windowbase64-atob", "WindowBase64.atob()")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Instantané de {{SpecName("HTML WHATWG")}}. Création de <code>WindowBase64</code> (les propriétés se trouvaient sur la cible avant cela).</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{Compat("api.WindowOrWorkerGlobalScope.atob")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/Web/API/WindowBase64/Base64_encoding_and_decoding">Base64 encoding and decoding</a></li>
+ <li><a href="https://developer.mozilla.org/fr/docs/Web/HTTP/Basics_of_HTTP/Data_URIs">Les  URL de <code>données</code></a></li>
+ <li>{{domxref("WindowOrWorkerGlobalScope.btoa","window.btoa()")}}</li>
+ <li><a href="https://developer.mozilla.org/fr-FR/docs/Components.utils.importGlobalProperties">Components.utils.importGlobalProperties</a></li>
+</ul>
diff --git a/files/fr/web/api/btoa/index.html b/files/fr/web/api/btoa/index.html
new file mode 100644
index 0000000000..9c07b8bb40
--- /dev/null
+++ b/files/fr/web/api/btoa/index.html
@@ -0,0 +1,123 @@
+---
+title: WindowBase64.btoa()
+slug: Web/API/btoa
+tags:
+  - API
+  - DOM
+  - Méthode
+  - Reference
+  - Web
+  - WindowOrWorkerGlobalScope
+  - btoa
+  - chaînes
+  - données
+translation_of: Web/API/WindowOrWorkerGlobalScope/btoa
+original_slug: Web/API/WindowOrWorkerGlobalScope/btoa
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p>La méthode <code>WindowOrWorkerGlobalScope.btoa()</code> crée une chaîne ASCII codée en base 64 à partir d'un objet {{jsxref ("String")}} dans lequel chaque caractère de la chaîne est traité comme un octet de données binaires.</p>
+
+<div class="note">
+<p><strong>Note :</strong> étant donné que cette fonction traite chaque caractère comme un octet de données binaires, quel que soit le nombre d'octets composant le caractère, une exception <code>InvalidCharacterError</code> est déclenchée si le {{Glossary("code point")}} d'un caractère quelconque est en dehors de la plage 0x00 à 0xFF. Voir {{anch("Chaînes Unicode")}} pour un exemple montrant comment encoder des chaînes avec des caractères en dehors de la plage 0x00 à 0xFF.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre>var donneesEncodees = scope.btoa(<em>chaineAEncoder</em>);
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>chaineAEncoder</code></dt>
+ <dd>Une chaîne dont les caractères représentent chacun un octet unique de données binaires à encoder en ASCII.</dd>
+</dl>
+
+<h3 id="Valeur_retournée">Valeur retournée</h3>
+
+<p>Une chaîne contenant la représentation Base64 de la <code>chaineAEncoder</code>.</p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="eval">var donneesEncodees = window.btoa('Salut, monde'); // encode une chaîne<em>
+</em>var donneesDecodees = window.atob(donneesEncodees); // décode la chaîne
+</pre>
+
+<h2 id="Notes" name="Notes">Notes</h2>
+
+<p>Vous pouvez utiliser cette méthode pour encoder des données qui, autrement, pourraient engendrer des problèmes de communication, les transmettre et utiliser alors la méthode {{domxref("WindowOrWorkerGlobalScope.atob","atob()")}} pour décoder les données à nouveau. Par exemple, vous pouvez encoder des caractères de contrôle tels que les valeurs ASCII de 0 à 31.</p>
+
+<p><code>btoa()</code> est également disponible pour les composants XPCOM implémentés en JavaScript, même si {domxref("Window")}} n'est pas l'objet global dans les composants.</p>
+
+<h2 id="Chaînes_Unicode">Chaînes Unicode</h2>
+
+<p>Dans la plupart des navigateurs, l'appel de <code>btoa()</code> sur une chaîne Unicode engendrera une exception <code>InvalidCharacterError</code>.</p>
+
+<p>Une option est d'échapper tous les caractères étendus, de telle sorte que la chaîne que vous voulez en fait encoder soit une représentation ASCII de l'original. Voyez cet exemple, noté par <a href="http://ecmanaut.blogspot.com/2006/07/encoding-decoding-utf8-in-javascript.html" title="http://ecmanaut.blogspot.com/2006/07/encoding-decoding-utf8-in-javascript.html">Johan Sundström</a> :</p>
+
+<pre id="txt"><code>// Chaîne ucs-2 en ascii encodé en base64
+function uena(chn) {
+    return window.btoa(unescape(encodeURIComponent(chn)));
+}
+// Ascii encodé en base64 en chaîne ucs-2
+function aenu(chn) {
+    return decodeURIComponent(escape(window.atob(chn)));
+}
+// Usage :
+uena('✓ à la mode'); // 4pyTIMOgIGxhIG1vZGU=
+aenu('4pyTIMOgIGxhIG1vZGU='); // "✓ à la mode"
+
+uena('I \u2661 Unicode!'); // SSDimaEgVW5pY29kZSE=
+aenu('SSDimaEgVW5pY29kZSE='); // "I ♡ Unicode!"</code></pre>
+
+<p>Une solution meilleure, plus fiable et moins coûteuse consiste à <a href="https://developer.mozilla.org/fr/docs/D%C3%A9coder_encoder_en_base64">utiliser des tableaux typés pour faire la conversion</a>.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'webappapis.html#dom-btoa', 'WindowOrWorkerGlobalScope.btoa()')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Méthode déplacée dans le mixin <code>WindowOrWorkerGlobalScope</code> dans la spéc la plus récente.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#dom-windowbase64-btoa', 'WindowBase64.btoa()')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Pas de changement depuis le dernier instantané, {{SpecName("HTML5.1")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', '#dom-windowbase64-btoa', 'WindowBase64.btoa()')}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>Instantané de {{SpecName("HTML WHATWG")}}. Pas de changement.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5 W3C", "#dom-windowbase64-btoa", "WindowBase64.btoa()")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Instantané de {{SpecName("HTML WHATWG")}}. Création de <code>WindowBase64</code> (les propriétés se trouvaient sur la cible avant cela).</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{Compat("api.WindowOrWorkerGlobalScope.btoa")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/WindowBase64/Base64_encoding_and_decoding">Base64 encoding and decoding</a></li>
+ <li><a href="https://developer.mozilla.org/fr/docs/Web/HTTP/Basics_of_HTTP/Data_URIs">Les URL de <code>données</code></a></li>
+ <li>{{domxref("WindowOrWorkerGlobalScope.atob","atob()")}}</li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Components.utils.importGlobalProperties">Components.utils.importGlobalProperties</a></li>
+</ul>
diff --git a/files/fr/web/api/caches/index.html b/files/fr/web/api/caches/index.html
new file mode 100644
index 0000000000..b5b57df7ee
--- /dev/null
+++ b/files/fr/web/api/caches/index.html
@@ -0,0 +1,80 @@
+---
+title: WindowOrWorkerGlobalScope.caches
+slug: Web/API/caches
+translation_of: Web/API/WindowOrWorkerGlobalScope/caches
+original_slug: Web/API/WindowOrWorkerGlobalScope/caches
+---
+<p>{{APIRef()}}{{SeeCompatTable}}</p>
+
+<p>La propriété en lecture seule  <code><strong>caches</strong></code> de l'interface {{domxref("WindowOrWorkerGlobalScope")}} retourne l'objet {{domxref("CacheStorage")}} associé au contexte actuel. Cet objet permet de stocker des ressources pour une utilisation hors-ligne et de générer des réponses personnalisées à des requêtes.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var <em>myCacheStorage</em> = self.caches; // ou simplement caches
+</pre>
+
+<h3 id="Value">Value</h3>
+
+<p>Un objet de type {{domxref("CacheStorage")}}.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>L'exemple suivant montre comment mettre en cache un contexte de <a href="/en-US/docs/Web/API/Service_Worker_API">service worker</a> pour stocker des ressources et les utiliser hors-ligne.</p>
+
+<pre class="brush: js">this.addEventListener('install', function(event) {
+  event.waitUntil(
+    caches.open('v1').then(function(cache) {
+      return cache.addAll([
+        '/sw-test/',
+        '/sw-test/index.html',
+        '/sw-test/style.css',
+        '/sw-test/app.js',
+        '/sw-test/image-list.js',
+        '/sw-test/star-wars-logo.jpg',
+        '/sw-test/gallery/',
+        '/sw-test/gallery/bountyHunters.jpg',
+        '/sw-test/gallery/myLittleVader.jpg',
+        '/sw-test/gallery/snowTroopers.jpg'
+      ]);
+    })
+  );
+});</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Service Workers', '#self-caches', 'caches')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>
+    <p>Défini dans un <code>WindowOrWorkerGlobalScope</code> partiel dans la nouvelle spec.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Service Workers')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.WindowOrWorkerGlobalScope.caches")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/ServiceWorker_API">Service Workers</a></li>
+ <li><a href="/en-US/docs/Web/API/Web_Workers_API">Web Workers</a></li>
+ <li>{{domxref("CacheStorage")}}</li>
+ <li>{{domxref("Cache")}}</li>
+</ul>
diff --git a/files/fr/web/api/clearinterval/index.html b/files/fr/web/api/clearinterval/index.html
new file mode 100644
index 0000000000..f65d566b16
--- /dev/null
+++ b/files/fr/web/api/clearinterval/index.html
@@ -0,0 +1,72 @@
+---
+title: WindowOrWorkerGlobalScope.clearInterval()
+slug: Web/API/clearInterval
+tags:
+  - API
+  - Méthode
+  - Reference
+  - WindowOrWorkerGlobalScope
+  - clearInterval
+translation_of: Web/API/WindowOrWorkerGlobalScope/clearInterval
+original_slug: Web/API/WindowOrWorkerGlobalScope/clearInterval
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p>La méthode <strong><code>clearInterval()</code></strong>, rattachée au <em>mixin </em>{{domxref("WindowOrWorkerGlobalScope")}}, permet d'annuler une action répétée minutée initiée via un appel à {{domxref("WindowOrWorkerGlobalScope.setInterval", "setInterval()")}}.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>scope</em>.clearInterval(<var>intervalID</var>)
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>intervalID</code></dt>
+ <dd>L'identifiant de l'intervalle de répétition qu'on souhaite annuler. Cet identifiant est renvoyé lorsqu'on appelle <code>setInterval()</code> pour définir l'intervalle de répétition.</dd>
+</dl>
+
+<p>On notera que l'ensemble des identifiants utilisés est commun entre ceux fournis par {{domxref("WindowOrWorkerGlobalScope.setInterval", "setInterval()")}} et ceux fournis par {{domxref("WindowOrWorkerGlobalScope.setTimeout", "setTimeout()")}}. Cela signifie qu'on peut, techniquement, utiliser <code>clearInterval()</code> et {{domxref("WindowOrWorkerGlobalScope.clearTimeout", "clearTimeout()")}} de façon interchangeable. C'est toutefois une mauvaise pratique, qui nuit à la lisibilité du code et à sa maintenabilité.</p>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>{{jsxref("undefined")}}</p>
+
+<h2 id="Example" name="Example">Exemples</h2>
+
+<p>Voir <a href="/fr/docs/Web/API/WindowTimers/setInterval#Exemples" title="DOM/window.setInterval#Example">l'exemple <code>setInterval()</code></a>.</p>
+
+<h2 id="Specification" name="Specification">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'webappapis.html#dom-clearinterval', 'WindowOrWorkerGlobalScope.clearInterval()')}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td>Cette méthode a été déplacée sur le <em>mixin</em> <code>WindowOrWorkerGlobalScope</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'webappapis.html#dom-clearinterval', 'clearInterval()')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{Compat("api.WindowOrWorkerGlobalScope.clearInterval")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("WindowOrWorkerGlobalScope.setTimeout")}}</li>
+ <li>{{domxref("WindowOrWorkerGlobalScope.setInterval")}}</li>
+ <li>{{domxref("WindowOrWorkerGlobalScope.clearTimeout")}}</li>
+ <li>{{domxref("Window.requestAnimationFrame")}}</li>
+</ul>
diff --git a/files/fr/web/api/crossoriginisolated/index.html b/files/fr/web/api/crossoriginisolated/index.html
new file mode 100644
index 0000000000..0fd49fde85
--- /dev/null
+++ b/files/fr/web/api/crossoriginisolated/index.html
@@ -0,0 +1,59 @@
+---
+title: WindowOrWorkerGlobalScope.crossOriginIsolated
+slug: Web/API/crossOriginIsolated
+translation_of: Web/API/WindowOrWorkerGlobalScope/crossOriginIsolated
+original_slug: Web/API/WindowOrWorkerGlobalScope/crossOriginIsolated
+---
+<div>{{APIRef()}}{{SeeCompatTable}}</div>
+
+<p>La propriéte en lecture seule <code><strong>crossOriginIsolated</strong></code> de l'interface {{domxref("WindowOrWorkerGlobalScope")}} retourne une valeur booléenne qui indique si un {{jsxref("SharedArrayBuffer")}} peut être envoyé via un appel à {{domxref("Window.postMessage()")}}.</p>
+
+<p>Cette valeur est dépendante de toute entête {{httpheader("Cross-Origin-Opener-Policy")}} et {{httpheader("Cross-Origin-Embedder-Policy")}} présente dans la réponse.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var <em>myCrossOriginIsolated</em> = self.crossOriginIsolated; // or just crossOriginIsolated
+</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p>Une valeur booléenne</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">if(crossOriginIsolated) {
+  // Post SharedArrayBuffer
+} else {
+  // Do something else
+}
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML WHATWG")}}</td>
+   <td></td>
+   <td>Pas encore ajouté à la spécification</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.WindowOrWorkerGlobalScope.crossOriginIsolated")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/ServiceWorker_API">Service Workers</a></li>
+ <li><a href="/en-US/docs/Web/API/Web_Workers_API">Web Workers</a></li>
+</ul>
diff --git a/files/fr/web/api/fetch/index.html b/files/fr/web/api/fetch/index.html
new file mode 100644
index 0000000000..f339f8f389
--- /dev/null
+++ b/files/fr/web/api/fetch/index.html
@@ -0,0 +1,194 @@
+---
+title: GlobalFetch.fetch()
+slug: Web/API/fetch
+tags:
+  - API
+  - API Fetch
+  - Experimental
+  - Fetch
+  - GlobalFetch
+  - Méthode
+  - Reference
+  - WindowOrWorkerGlobalScope
+  - requête
+translation_of: Web/API/WindowOrWorkerGlobalScope/fetch
+original_slug: Web/API/WindowOrWorkerGlobalScope/fetch
+---
+<p>{{APIRef("Fetch")}}</p>
+
+<p><span class="seoSummary">La méthode <code><strong>fetch()</strong></code> du mixin {{domxref("WindowOrWorkerGlobalScope")}} démarre le chargement d'une ressource sur le réseau et retourne une promesse qui est résolue dès que la réponse est disponible. La promesse résoud l'objet {{domxref("Response")}} représentant la réponse de votre requête. Cette promesse n'échoue pas en cas d'erreur HTTP, elle n'échoue que sur les problèmes de réseau. Vous devez utiliser un gestionnaire <code>then</code> pour identifier les erreurs HTTP.</span></p>
+
+<p><code>WindowOrWorkerGlobalScope</code> est aussi bien implémenté par {{domxref("Window")}} que par {{domxref("WorkerGlobalScope")}}, ce qui signifie que la méthode <code>fetch()</code> est disponible dans la plupart des cas où vous pourriez en avoir besoin.</p>
+
+<p>Une promesse {{domxref("GlobalFetch.fetch","fetch()")}} n'est rejetée que quand un problème de réseau est rencontré, même si en réalité cela signifie généralement qu'il y a un problème de permissions ou quelque chose de similaire. La promesse ne sera pas rejetée en cas d'erreur HTTP (<code>404</code>, etc.) Pour cela, un gestionnaire <code>then()</code> doit vérifier que la propriété {{domxref("Response.ok")}} ait bien pour valeur <code>true</code> et/ou la valeur de la propriété {{domxref("Response.status")}}.</p>
+
+<p>La méthode <code>fetch()</code> est contrôlée par la directive <code>connect-src</code> de l'entête <a href="/fr/docs/Web/HTTP/Headers/Content-Security-Policy">Content Security Policy</a> plutôt que par la directive de la ressource qui est récupérée.</p>
+
+<div class="note">
+<p>Les paramètres de la méthode <code>fetch()</code> sont identiques à ceux du contructeur d'une {{domxref("Request.Request","Request()")}}.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate">const <em>fetchResponsePromise</em> = Promise&lt;Response&gt; fetch(<em>entrée</em>[, <em>init</em>]);</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code><em>entrée</em></code></dt>
+ <dd>Définit la ressource que vous voulez obtenir. Cela peut être :
+ <ul>
+  <li>Un {{domxref("USVString")}} qui contient l'URL de la ressource à obtenir. Certains navigateurs acceptent <code>blob:</code> et <code>data:</code>.</li>
+  <li>Un objet {{domxref("Request")}}.</li>
+ </ul>
+ </dd>
+ <dt><code><em>init</em></code> {{optional_inline}}</dt>
+ <dd>
+  <p>Un objet qui contient les paramètres de votre requête. Les options possibles sont :</p>
+
+  <dl>
+    <dt><code>method</code></dt>
+    <dd>La méthode de la requête, par exemple <code>GET</code> ou <code>POST</code>.</dd>
+
+    <dt><code>headers</code></dt>
+    <dd>Les entêtes à ajouter à votre requête, contenues dans un objet {{domxref("Headers")}} ou dans un objet avec des {{domxref("ByteString")}} pour valeurs.</dd>
+
+    <dt><code>body</code></dt>
+    <dd>Le corps de votre requête. Cela peut être un {{domxref("Blob")}}, un {{domxref("BufferSource")}}, un {{domxref("FormData")}}, un {{domxref("URLSearchParams")}}, ou un {{domxref("USVString")}}. Notez cependant qu'une requête avec <code>GET</code> ou <code>HEAD</code> pour méthode ne peut pas avoir de corps.</dd>
+
+    <dt><code>mode</code></dt>
+    <dd>Le mode à utiliser pour cette requête, par exemple <code>cors</code>, <code>no-cors</code>, ou <code>same-origin.</code></dd>
+
+    <dt><code>credentials</code></dt>
+    <dd>Les identifiants à utiliser pour cette requête : <code>omit</code>, <code>same-origin</code>, ou <code>include</code>. Pour envoyer automatiquement les cookies pour le domaine actuel, cette option doit être définie. À partir de Chrome 50, cette propriété peut aussi prendre un objet {{domxref("FederatedCredential")}} ou une instance de {{domxref("PasswordCredential")}}.</dd>
+
+    <dt><code>cache</code></dt>
+    <dd>Le comportement du cache pour cette requête : <code>default</code>, <code>no-store</code>, <code>reload</code>, <code>no-cache</code>, <code>force-cache</code>, ou <code>only-if-cached</code>.</dd>
+
+    <dt><code>redirect</code></dt>
+    <dd>Le mode de redirection à adopter pour cette requête : <code>follow</code> (suivre les redirections automatiquement), <code>error</code> (abandonner avec une erreur si une redirection a lieu), ou <code>manual</code> (gérer les redirections manuellement). Dans Chrome, la valeur par défaut était <code>follow</code> avant Chrome 47, mais à partir de cette version, c'est <code>manual</code>.</dd>
+
+    <dt><code>referrer</code></dt>
+    <dd>Un USVString qui vaut <code>no-referrer</code>, <code>client</code>, ou qui contient une URL. La valeur par défaut est <code>client</code>.</dd>
+
+    <dt><code>referrerPolicy</code></dt>
+    <dd>Spécifie la valeur de l'entête HTTP referer. Cela peut être <code>no-referrer</code>, <code>no-referrer-when-downgrade</code>, <code>origin</code>, <code>origin-when-cross-origin</code> ou <code>unsafe-url</code>.</dd>
+
+    <dt><code>integrity</code></dt>
+    <dd>Contient la valeur de <a href="https://developer.mozilla.org/fr/docs/Web/Security/Subresource_Integrity">l'intégrité de la sous-ressource</a> de la requête (par exemple, <code>sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE=</code>).</dd>
+
+    <dt><code>keepalive</code></dt>
+    <dd>Peut être utilisée pour autoriser la requête à se poursuivre après la fermeture de la page. Une requête avec ce paramètre est équivalente à l'API {{domxref("Navigator.sendBeacon()")}}.</dd>
+
+    <dt><code>signal</code></dt>
+    <dd>Une instance de {{domxref("AbortSignal")}} vous permettant de communiquer avec une requête et de l'interrompre si vous le souhaitez via un {{domxref("AbortController")}}.</dd>
+  </dl>
+</dd>
+</dl>
+
+<h3 id="Valeur_retournée">Valeur retournée</h3>
+
+<p>Une {{domxref("Promise")}} qui se résoud avec un object {{domxref("Response")}}.</p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<dl>
+ <dt><code>AbortError</code></dt>
+ <dd>La requête a été interrompue à cause d'un appel à la méthode {{domxref("AbortController.abort", "abort()")}} de {{domxref("AbortController")}}.</dd>
+ <dt><code>TypeError</code></dt>
+ <dd>L'URL spécifié inclut des identifiants. Ces informations devraient plutôt être fournises via l'en-tête HTTP {{HTTPHeader("Authorization")}}.</dd>
+</dl>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Dans notre <a href="https://github.com/mdn/fetch-examples/tree/gh-pages/fetch-request">exemple de requête avec fetch</a> (voir <a href="http://mdn.github.io/fetch-examples/fetch-request/">cet exemple en direct</a>) nous créons une nouvelle {{domxref("Request")}} avec le constructeur correspondant, puis on l'envoie en appellant <code>fetch()</code>. Comme nous récupérons une image, nous utilisons la méthode {{domxref("Body.blob()")}} sur la réponse pour lui donner le bon type MIME pour qu'elle soit gérée correctement, puis l'on crée l'URL correspondant à cet objet et on l'affiche dans un élément {{htmlelement("img")}}.</p>
+
+<pre class="brush: js notranslate">const monImage = document.querySelector('img');
+
+let maRequete = new Request('fleurs.jpg');
+
+fetch(maRequete)
+.then(function(reponse) {
+  if (!response.ok) {
+    throw new Error(`erreur HTTP! statut: ${reponse.status}`);
+  }
+  return reponse.blob();
+})
+.then(function(reponse) {
+  let URLobjet = URL.createObjectURL(reponse);
+  monImage.src = URLobjet;
+});</pre>
+
+<p>Dans notre <a href="https://github.com/mdn/fetch-examples/tree/gh-pages/fetch-with-init-then-request">exemple fetch avec initialisation et requête</a> (voir <a href="http://mdn.github.io/fetch-examples/fetch-with-init-then-request/">cet exemple en direct</a>) nous faisons la même chose à la différence que nous passons aussi un objet d'initalisation à la méthode <code>fetch</code> :</p>
+
+<pre class="brush: js notranslate">const monImage = document.querySelector('img');
+
+let mesEntetes = new Headers();
+mesEntetes.append('Content-Type', 'image/jpeg');
+
+const monInit = { method: 'GET',
+               headers: mesEntetes,
+               mode: 'cors',
+               cache: 'default' };
+
+let maRequete = new Request('fleurs.jpg');
+
+fetch(maRequete, monInit).then(function(reponse) {
+  ...
+});</pre>
+
+<p>Notez que vous pouvez aussi passer l'objet d'initialisation au constructeur de la requête pour obtenir le même effet, par exemple :</p>
+
+<pre class="brush: js notranslate">let maRequete = new Request('fleurs.jpg', monInit);</pre>
+
+<p>Vous pouvez aussi utiliser un objet litéral comme en-têtes dans votre objet d'initalisation.</p>
+
+<pre class="brush: js notranslate">const monInit = { method: 'GET',
+               headers: {
+                   'Content-Type': 'image/jpeg'
+               },
+               mode: 'cors',
+               cache: 'default' };
+
+let maRequete = new Request('fleurs.jpg', monInit);
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Fetch','#fetch-method','fetch()')}}</td>
+   <td>{{Spec2('Fetch')}}</td>
+   <td>Définie dans un <code>WindowOrWorkerGlobalScope</code> dans la nouvelle spécification.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Fetch','#dom-global-fetch','fetch()')}}</td>
+   <td>{{Spec2('Fetch')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Credential Management')}}</td>
+   <td>{{Spec2('Credential Management')}}</td>
+   <td>Ajoute la possiblité d'utiliser une instance de {{domxref("FederatedCredential")}} ou de {{domxref("PasswordCredential")}} comme valeur de <code>init.credentials</code>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{Compat("api.WindowOrWorkerGlobalScope.fetch")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/Fetch_API">Fetch API</a></li>
+ <li><a href="/fr/docs/Web/API/Service_Worker_API">ServiceWorker API</a></li>
+ <li><a href="/fr/docs/HTTP/Access_control_CORS">HTTP access control (CORS)</a></li>
+ <li><a href="/fr/docs/HTTP">HTTP</a></li>
+</ul>
diff --git a/files/fr/web/api/headers/index.html b/files/fr/web/api/headers/index.html
index 93e16b4a2e..bb33724fa5 100644
--- a/files/fr/web/api/headers/index.html
+++ b/files/fr/web/api/headers/index.html
@@ -59,7 +59,7 @@ translation_of: Web/API/Headers
 </dl>
 
 <div class="note">
-<p><strong>Note</strong>: Poue être clair, la différence entre {{domxref("Headers.set()")}} et {{domxref("Headers.append()")}} est que si le header spécifié existe et accepte plusieurs valeurs,  {{domxref("Headers.set()")}} va remplacer la valeur existante par la nouvelle, tandis que {{domxref("Headers.append()")}} va ajouter la nouvelle valeur à la fin des autres valeurs. Voir leurs pages dédiées pour des exemples de code.</p>
+<p><strong>Note</strong>: Pour être clair, la différence entre {{domxref("Headers.set()")}} et {{domxref("Headers.append()")}} est que si le header spécifié existe et accepte plusieurs valeurs,  {{domxref("Headers.set()")}} va remplacer la valeur existante par la nouvelle, tandis que {{domxref("Headers.append()")}} va ajouter la nouvelle valeur à la fin des autres valeurs. Voir leurs pages dédiées pour des exemples de code.</p>
 </div>
 
 <div class="note">
diff --git a/files/fr/web/api/indexeddb/index.html b/files/fr/web/api/indexeddb/index.html
new file mode 100644
index 0000000000..7d8aaa0ed5
--- /dev/null
+++ b/files/fr/web/api/indexeddb/index.html
@@ -0,0 +1,77 @@
+---
+title: IDBEnvironment.indexedDB
+slug: Web/API/indexedDB
+tags:
+  - API
+  - IndexedDB
+  - Propriété
+  - Reference
+  - WindowOrWorkerGlobalScope
+translation_of: Web/API/WindowOrWorkerGlobalScope/indexedDB
+original_slug: Web/API/WindowOrWorkerGlobalScope/indexedDB
+---
+<div>{{APIRef}}</div>
+
+<p>La propriété <strong><code>indexedDB</code></strong> en lecture seule, rattachée au <em>mixin</em> {{domxref("WindowOrWorkerGlobalScope")}} fournit un mécanisme qui permet aux applications d'accéder aux bases de données indexées de façon asynchrone.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var <em>IDBFactory</em> = self.indexedDB;</pre>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Un objet {{domxref("IDBFactory")}}.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js;highlight:[3]">var db;
+function openDB() {
+ var DBOpenRequest = window.indexedDB.open('toDoList');
+ DBOpenRequest.onsuccess = function(e) {
+   db = DBOpenRequest.result;
+ }
+}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('IndexedDB 2', '#dom-windoworworkerglobalscope-indexeddb', 'indexedDB')}}</td>
+   <td>{{Spec2('IndexedDB 2')}}</td>
+   <td>Rattachement partiel à <code>WindowOrWorkerGlobalScope</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('IndexedDB', '#widl-IDBEnvironment-indexedDB', 'indexedDB')}}</td>
+   <td>{{Spec2('IndexedDB')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+<div>
+
+
+<p>{{Compat("api.WindowOrWorkerGlobalScope.indexedDB")}}</p>
+</div>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB">Utiliser IndexedDB</a></li>
+ <li>Initier une connexion : {{domxref("IDBDatabase")}}</li>
+ <li>Utiliser les transactions : {{domxref("IDBTransaction")}}</li>
+ <li>Définir un intervalle de clés : {{domxref("IDBKeyRange")}}</li>
+ <li>Récupérer et modifier les données : {{domxref("IDBObjectStore")}}</li>
+ <li>Utiliser les curseurs {{domxref("IDBCursor")}}</li>
+ <li>Exemple de référence : <a class="external" href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a class="external" href="https://mdn.github.io/to-do-notifications/">exemple <em>live</em></a>).</li>
+</ul>
diff --git a/files/fr/web/api/issecurecontext/index.html b/files/fr/web/api/issecurecontext/index.html
new file mode 100644
index 0000000000..be1a06cc17
--- /dev/null
+++ b/files/fr/web/api/issecurecontext/index.html
@@ -0,0 +1,47 @@
+---
+title: WindowOrWorkerGlobalScope.isSecureContext
+slug: Web/API/isSecureContext
+translation_of: Web/API/WindowOrWorkerGlobalScope/isSecureContext
+original_slug: Web/API/WindowOrWorkerGlobalScope/isSecureContext
+---
+<p>{{APIRef()}}{{SeeCompatTable}}</p>
+
+<p>La propriété <code><strong>isSecureContext</strong></code> de l'interface {{domxref("WindowOrWorkerGlobalScope")}} retourne un booleen indiquant si le contexte actuel est sécurisé (<code>true</code>) ou pas (<code>false</code>).</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var <em>isItSecure</em> = self.isSecureContext; // ou simplement isSecureContext
+</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p>Un {{domxref("Boolean")}}.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécifications</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Secure Contexts', '#dom-windoworworkerglobalscope-issecurecontext', 'WindowOrWorkerGlobalScope.isSecureContext')}}</td>
+   <td>{{Spec2('Secure Contexts')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.WindowOrWorkerGlobalScope.isSecureContext")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Security/Secure_Contexts">Secure contexts</a></li>
+</ul>
diff --git a/files/fr/web/api/notifications_api/using_the_notifications_api/index.html b/files/fr/web/api/notifications_api/using_the_notifications_api/index.html
index 34789ad74d..694ad26f34 100644
--- a/files/fr/web/api/notifications_api/using_the_notifications_api/index.html
+++ b/files/fr/web/api/notifications_api/using_the_notifications_api/index.html
@@ -1,276 +1,252 @@
 ---
-title: Utilisation des Notifications Web
+title: Utilisation de l'API Notifications
 slug: Web/API/Notifications_API/Using_the_Notifications_API
-tags:
-  - Avancé
-  - DOM
-  - Firefox OS
-  - Guide
-  - Notifications
 translation_of: Web/API/Notifications_API/Using_the_Notifications_API
 original_slug: Web/API/notification/Using_Web_Notifications
 ---
-<p>{{SeeCompatTable}}</p>
+<p>{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}</p>
 
-<h2 id="En_bref">En bref</h2>
+<p>L'<a href="/fr/docs/Web/API/Notifications_API">API Notifications</a> permet à une application ou à une page web d'envoyer des notifications affichées en dehors de la page par le système sous-jacent. Cela permet aux applications web d'envoyer des informations aux utilisatrices et utilisateurs même lorsque l'application est en veille ou en arrière-plan. Dans cet article, nous verrons les bases de cette API afin de vous permettre de l'utiliser dans vos propres applications.</p>
 
-<p><span id="result_box" lang="fr"><span class="hps">L'API</span> de <span class="hps">Notifications</span> <span class="hps">Web </span></span><span lang="fr"><span class="hps">permet à une page</span> <span class="hps">Web d'</span><span class="hps">envoyer des notifications</span> <span class="hps">qui s'affichent</span> <span class="hps">hors de la page</span> <span class="hps">au niveau</span> <span class="hps">du système.</span> <span class="hps">Cela permet</span> aux<span class="hps"> applications web</span> <span class="hps">d'envoyer des informations</span> <span class="hps">à un</span> <span class="hps">utilisateur, même si</span> <span class="hps">l'application est inactive</span><span>.</span> <span class="hps">Un des</span> <span class="hps">principaux cas d'utilisation</span> <span class="hps">évidente</span> <span class="hps">est une application</span> <span class="hps">de messagerie Web</span> <span class="hps">qui</span> <span class="hps">informe l'utilisateur</span> <span class="hps">à chaque fois</span> <span class="hps">qu'un nouvel e</span><span>-mail</span> <span class="hps">est reçu,</span> <span class="hps">même si l'utilisateur</span> <span class="hps">fait autre</span> <span class="hps">chose</span> <span class="hps">avec une autre application</span><span>.</span></span></p>
+<p>Généralement, le système sous-jacent utilisé pour les notifications est celui du système d'exploitation. Voyez par exemple comment votre appareil mobile ou ordinateur affiche certaines notifications.</p>
 
-<p>Pour afficher des notifications, il faut commencer par demander la permission appropriée et d'instancier un objet {{domxref("Notification")}} :</p>
+<p><img alt="Une capture d'écran d'Android avec trois notifications." src="android-notification.png"></p>
 
-<pre class="brush: js">Notification.requestPermission( function(status) {
-  console.log(status); // les notifications ne seront affichées que si "autorisées"
-  var n = new Notification("title", {body: "notification body"}); // this also shows the notification
-});
-</pre>
+<p>Le système de notification du système d'exploitation variera selon la plateforme et le navigateur mais ce n'est pas un problème en soi : l'API Notifications a été conçue de façon suffisamment générique pour être compatible avec la plupart des systèmes de notification.</p>
 
-<h2 id="Obtenir_l'autorisation">Obtenir l'autorisation</h2>
+<h2 id="examples">Exemples</h2>
 
-<p><span id="result_box" lang="fr"><span class="hps">Avant</span> qu'<span class="hps">une application</span> ne <span class="hps">soit capable d'envoyer</span> <span class="hps">une notification</span><span>,</span> <span class="hps">l'utilisateur doit</span> donner son accord<span>.</span> <span class="hps">C'est</span> <span class="hps">une exigence commune</span> <span class="hps">quand</span> <span class="hps">une API</span> <span class="atn hps">tente d'</span><span>interagir avec</span> quoi que ce soit <span class="hps">en dehors d'une</span> <span class="hps">page Web.</span> <span class="hps">Cela permet </span><span class="hps">d'éviter</span> <span class="atn hps">les notifications "</span><span>spam"</span> <span class="atn hps">pour le bien-</span><span>être de l'utilisateur</span><span>.</span></span></p>
+<p>Un des cas d'usage parmi les plus évidents pour les notifications est un client mail web ou une application de messagerie instantanée qui notifie dès qu'un nouveau message a été reçu, y compris lorsqu'on utilise l'appareil pour autre chose avec une autre application. De nombreux exemples existent pour ce cas, <a href="https://slack.com/">Slack</a> en est un parmi d'autres.</p>
 
-<h3 id="Vérifier_l'état_de_la_permission">Vérifier l'état de la permission</h3>
+<p>Nous avons écrit un exemple concret : une application pour gérer des listes de trucs à faire (« <i lang="en">to-do</i> ») pour vous donner une meilleure idée de la façon dont les notifications web peuvent être utilisées. Les données sont stockées localement avec <a href="/fr/docs/Web/API/IndexedDB_API">IndexedDB</a> et les utilisateurs sont notifiés lorsque les tâches arrivent à échéance grâce aux notifications système. <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">Téléchargez le code de cette application</a>, ou <a href="https://mdn.github.io/to-do-notifications/">testez l'application en <i lang="en">live</i></a>.</p>
 
-<p><span id="result_box" lang="fr"><span class="hps">Une application qui</span> <span class="hps">a besoin d'envoyer</span> <span class="hps">une notification</span> <span class="hps">peut vérifier l'état</span> <span class="hps">d'autorisation</span> <span class="hps">actuel</span> <span class="hps">grâce à la</span> <span class="hps">propriété non modifiable </span></span>{{domxref("Notification.permission")}} <span lang="fr"><span class="hps">.</span> <span class="hps">Il peut avoir</span> <span class="hps">l'une des</span> <span class="hps">trois</span> <span class="hps">valeurs possibles </span><span>:</span></span></p>
+<h2 id="requesting_permission">Demander la permission</h2>
 
-<ul>
- <li><code>default</code>: <span id="result_box" lang="fr"><span class="hps">l'utilisateur</span> <span class="hps">n'a pas encore</span> </span><span lang="fr"><span class="hps">donné</span> s<span class="hps">a permission</span> <span class="hps">(et donc</span> <span class="hps">aucune notification ne sera</span> <span class="hps">affichée à l'utilisateur</span><span>)</span><span>.</span></span></li>
- <li><code>granted</code>: <span id="result_box" lang="fr"><span class="hps">l'utilisateur</span> a <span class="hps">explicitement</span> <span class="hps">accepté d'être</span> <span class="hps">notifié par</span> <span class="hps">l'application</span><span>.</span></span></li>
- <li><code>denied</code>: <span id="result_box" lang="fr"><span class="hps">l'utilisateur</span> a <span class="hps">explicitement</span> <span class="hps">refusé d'être</span> <span class="hps">notifié par</span> <span class="hps">l'application</span><span>.</span></span></li>
-</ul>
+<p>Avant qu'une application puisse envoyer une notification, l'utilisatrice ou l'utilisateur doit lui accorder le droit de le faire. Il s'agit d'un prérequis courant pour les API qui doivent interagir en dehors d'une page web : l'utilisatrice ou l'utilisateur doit, au moins une fois, explicitement accorder la permission à l'application d'afficher des notifications. La personne contrôle ainsi quels sites ou applications sont autorisés à afficher des notifications.</p>
 
-<div class="note">
-<p><strong>Note:</strong> <span id="result_box" lang="fr"><span class="hps">Safari et Chrome</span> antérieurs à <span class="hps">v32</span> <span class="hps">n'</span><span class="hps">appliquent pas</span> <span class="hps">encore</span> <span class="hps">la propriété</span> </span><span style="line-height: 1.5;"> </span><code style="font-style: italic; line-height: 1.5;">permission</code><span style="line-height: 1.5;"> </span><span lang="fr"><span>.</span></span></p>
-</div>
+<p>En raison d'abus des notifications par le passé, les équipes des navigateurs web ont commencé à mettre en place des stratégies pour limiter ce problème. Dans la pratique, vous ne devriez demander la permission à une personne uniquement après que celle-ci a interagi avec votre site/application (par exemple en ayant cliqué sur un bouton). Il ne s'agit pas seulement d'une bonne pratique (on ne devrait pas ennuyer les utilisatrices et utilisateurs avec de trop nombreuses notifications indésirées) mais d'une méthode qui sera implémentée par les différents navigateurs : Firefox le fait depuis Firefox 72 et Safari le fait également depuis quelque temps.</p>
 
-<h3 id="Recevoir_la_permission">Recevoir la permission</h3>
+<p>De plus, pour Chrome et Firefox, il n'est pas possible de demander la permission d'afficher des notifications à moins que le site soit servi dans un contexte sécurisé (c'est-à-dire avec HTTPS) et il n'est plus possible de demander une telle permission depuis une <a href="/fr/docs/Web/HTML/Element/iframe"><code>&lt;iframe&gt;</code></a> d'une origine tierce.</p>
 
-<p><span id="result_box" lang="fr"><span class="hps">Si l'autorisation</span> <span class="hps">n'est pas accordée</span><span>,</span> <span class="hps">l'application doit</span> <span class="hps">utiliser la méthode</span> </span> {{domxref("Notification.requestPermission()")}} <span lang="fr"><span class="hps"> pour</span> <span class="hps">permettre à l'utilisateur</span> <span class="hps">de faire un choix</span><span>.</span> <span class="hps">Cette méthode accepte</span> <span class="hps">une fonction de rappel</span> <span class="hps">qui reçoit</span> <span class="hps">la permission</span> <span class="hps">choisie par l'utilisateur</span> <span class="hps">pour</span> <span class="hps">réagir.</span></span></p>
+<h3 id="checking_current_permission_status">Vérifier l'état de la permission</h3>
 
-<p>C'est une pratique usuelle de demander l'autorisation à l'initialisation de l'application:</p>
+<p>Vous pouvez vérifier si la permission a déjà été accordée ou non grâce à la propriété en lecture seule <a href="/fr/docs/Web/API/notification/permission"><code>Notification.permission</code></a>. Cette dernière peut avoir l'une de ces trois valeurs :</p>
 
-<pre class="brush: js">window.addEventListener('load', function () {
-  Notification.requestPermission(function (status) {
-    // Cela permet d'utiliser Notification.permission avec Chrome/Safari
-    if (Notification.permission !== status) {
-      Notification.permission = status;
-    }
-  });
+<dl>
+ <dt><code>default</code></dt>
+ <dd>La permission n'a pas encore été demandée à l'utilisatrice ou l'utilisateur, les notifications ne seront pas affichées.</dd>
+ <dt><code>granted</code></dt>
+ <dd>La permission d'afficher des notifications a été accordée après que la demande a été affichée.</dd>
+ <dt><code>denied</code></dt>
+ <dd>La permission d'afficher des notifications a été explicitement refusée.</dd>
+</dl>
+
+<h3 id="getting_permission">Obtenir la permission</h3>
+
+<p>Si la permission n'a pas encore été accordée, l'application devra utiliser la méthode <a href="/fr/docs/Web/API/notification/requestPermission"><code>Notification.requestPermission()</code></a> afin de la demander.  Une version très basique consiste à inclure :</p>
+
+<pre class="brush: js">Notification.requestPermission().then(function(result) {
+  console.log(result);
 });</pre>
 
-<div class="note">
-<p><strong>Note:</strong> Chrome ne permettait pas l'appel à {{domxref("Notification.requestPermission()")}} dans l'event load jusqu'à sa version 37 (voir <a href="https://code.google.com/p/chromium/issues/detail?id=274284" title="https://code.google.com/p/chromium/issues/detail?id=274284">issue 274284</a>).</p>
-</div>
+<p>Cela utilise la version de la méthode sous forme de promesse. Si vous souhaitez ou avez besoin de prendre en charge les versions antérieures, vous pourrez avoir besoin de version sous forme d'une fonction de rappel (<i lang="en">callback</i>) :</p>
 
-<h3 id="Manifeste_des_permissions_pour_l'API_de_Notification">Manifeste des permissions pour l'API de Notification</h3>
+<pre class="brush: js">Notification.requestPermission();</pre>
 
-<p>Notez que tant que que l'API de Notification API n'est pas <em>privileged</em> ou <em>certifiée</em>, il vous faudra toujours ajouter une entrée dans votre ficher <code>manifest.webapp</code> pour l'inclure dans une application web ouverte:</p>
+<p>Cette version accepte en paramètre une fonction de rappel qui sera appelée une fois que l'utilisatrice ou l'utilisateur aura répondu à la demande de permission.</p>
 
-<pre>"permissions": {
-  "desktop-notification": {
-    "description": "Needed for creating system notifications."
-  }
-}</pre>
+<h3 id="example">Exemple</h3>
 
-<div class="note">
-<p>Remarque : quand une application est installée, vous ne devriez pas avoir besoin de demander la permission explicitement par le code ci-dessus, mais vous aurez toujours besoin de l'entrée des autorisations ci-dessus pour que les notifications soient lancées.</p>
-</div>
+<p>Dans notre application de démonstration, nous avons inclus un bouton « Activer les notifications » qui, lorsqu'il est pressé, demande la permission pour l'application.</p>
 
-<h2 id="Créer_une_notification">Créer une notification</h2>
+<pre class="brush: html">&lt;button id="enable"&gt;Activer les notifications&lt;/button&gt;</pre>
 
-<p>Créer une notification peut être simplement réalisé en utilisant le constructeur {{domxref("Notification")}}. Ce constructeur s'attend à recevoir un titre à afficher dans la notification et quelques options pour la personnaliser telles qu'une icône {{domxref("Notification.icon","icon")}} ou un texte {{domxref("Notification.body","body")}}.</p>
+<p>Cliquer sur ce bouton déclenche l'appel à la fonction <code>askNotificationPermission()</code> :</p>
 
-<p>Une notification sera affichée dès que possible. Pour connaître son statut d'affichage, quatre événements peuvent être déclenchés au niveau de {{domxref("Notification")}} :</p>
+<pre class="brush: js">function askNotificationPermission() {
+  // La fonction qui sert effectivement à demander la permission
+  function handlePermission(permission) {
+    // On affiche ou non le bouton en fonction de la réponse
+    if(Notification.permission === 'denied' || Notification.permission === 'default') {
+      notificationBtn.style.display = 'block';
+    } else {
+      notificationBtn.style.display = 'none';
+    }
+  }
 
-<ul>
- <li>{{event("show")}}: déclenché quand la notification est affichée à l'utilisateur.</li>
- <li>{{event("click")}}: déclenché quand l'utilisateur clique sur la notification.</li>
- <li>{{event("close")}}: déclenché quand la notification est fermée.</li>
- <li>{{event("error")}}: déclenché quand quelque chose n'a pas fonctionné avec cette notification (surtout quand quelque chose empêche la notification d'être affichée)</li>
-</ul>
+  // Vérifions si le navigateur prend en charge les notifications
+  if (!('Notification' in window)) {
+    console.log("Ce navigateur ne prend pas en charge les notifications.");
+  } else {
+    if(checkNotificationPromise()) {
+      Notification.requestPermission()
+      .then((permission) =&gt; {
+        handlePermission(permission);
+      })
+    } else {
+      Notification.requestPermission(function(permission) {
+        handlePermission(permission);
+      });
+    }
+  }
+}</pre>
+
+<p>Commençons par jeter un œil au deuxième bloc de code : vous verrez qu'on commence par vérifier la prise en charge de l'API Notifications. Si celle-ci est bien disponible, on regarde si la version à base de promesses pour <code>Notification.requestPermission()</code> est prise en charge. Si c'est le cas, on utilise cette version (prise en charge partout à l'exception de Safari) et sinon, on utilise l'ancienne version avec le <i lang="en">callback</i> (prise en charge par Safari).</p>
 
-<p>Ces événements peuvent être suivis en utilisant les gestionnaires d'événements {{domxref("Notification.onshow","onshow")}}, {{domxref("Notification.onclick","onclick")}}, {{domxref("Notification.onclose","onclose")}}, ou {{domxref("Notification.onerror","onerror")}}. Car {{domxref("Notification")}} hérite également de {{domxref("EventTarget")}}, Il est possible d'utiliser cette {{domxref("EventTarget.addEventListener","addEventListener()")}} méthode..</p>
+<p>Pour éviter la duplication du code, nous avons stocké quelques lignes dans la fonction <code>handlePermission()</code> qui correspond au premier bloc de ce fragment de code. Dans cette fonction, on définit explicitement la valeur de <code>Notification.permission</code> (certaines anciennes versions de Chrome avaient un bug et ne réalisaient pas cette initialisation automatiquement) puis on affiche ou on masque le bouton selon que la permission a déjà été demandée ou non. On ne veut pas afficher le bouton si la permission a déjà été accordée, en revanche, si elle a été déclinée, on veut permettre à l'utilisatrice ou à l'utilisateur de changer d'avis plus tard.</p>
 
 <div class="note">
-<p><strong>Note:</strong> Firefox et Safari ferment automatiquement les notifications après un certain temps, de l'ordre de 4 secondes.</p>
+<p><strong>Note :</strong> Avant Chrome 37, Chrome ne permettait pas d'appeler <a href="/fr/docs/Web/API/notification/requestPermission"><code>Notification.requestPermission()</code></a> dans le gestionnaire d'évènements <code>load</code> (voir <a href="https://code.google.com/p/chromium/issues/detail?id=274284">le bug 274284</a>).</p>
+</div>
 
-<p>Cela peut aussi être fait au niveau de l'application web en utilisant la méthode {{domxref("Notification.close()")}},  comme par exemple dans le code suivant:</p>
+<h3 id="feature-detecting_the_requestpermission_promise">Détecter la prise en charge de requestPermission() en promesse</h3>
 
-<pre class="brush: js">var n = new Notification("Salut!");
-n.onshow = function () {
-  setTimeout(n.close.bind(n), 5000);
-}
-</pre>
+<p>Plus haut, nous avons dit vérifier la prise en charge du navigateur pour la version de <code>Notification.requestPermission()</code> avec les promesses. Pour cela, nous avons utilisé :</p>
 
-<p>Quand vous recevez un événement "close", il n'y a aucune garantie que l'utilisateur ait lui-même fermé la notification. C'est en accord avec la spécification, qui dit : "When a notification is closed, either by the underlying notifications platform or by the user, the close steps for it must be run." soit "Quand une notification est fermée, que ce soit par la plateforme ou par l'utilisateur, on procède à l'étape de clôture."</p>
-</div>
+<pre class="brush: js">function checkNotificationPromise() {
+    try {
+      Notification.requestPermission().then();
+    } catch(e) {
+      return false;
+    }
 
-<h3 id="Un_petit_exemple">Un petit exemple</h3>
+    return true;
+  }</pre>
 
-<p>En considérant ce petit bout de HTML assez simple :</p>
+<p>Cela permet de vérifier la présence d'une méthode <code>.then()</code> sur <code>requestPermission()</code>. Si une telle fonction est présente, on continue et on renvoie <code>true</code>. Sinon, on renvoie <code>false</code> dans le bloc de code <code>catch() {}</code>.</p>
 
-<pre class="brush: html">&lt;button&gt;Notifiez moi!&lt;/button&gt;</pre>
+<h2 id="creating_a_notification">Créer une notification</h2>
 
-<p>Il est possible de gérer les notifications de cette façon :</p>
+<p>Pour créer une notification, on utilisera le constructeur <a href="/fr/docs/Web/API/notification"><code>Notification</code></a>. Ce constructeur attend un titre à afficher au sein de la notification et permet d'utiliser différentes options pour améliorer la notification comme <a href="/fr/docs/Web/API/notification/icon"><code>une icône</code></a> ou un texte (<a href="/fr/docs/Web/API/notification/body"><code>body</code></a>).</p>
 
-<pre class="brush: js">window.addEventListener('load', function () {
-  // Premièrement, vérifions que nous avons la permission de publier des notifications. Si ce n'est pas le cas, demandons la
-  if (window.Notification &amp;&amp; Notification.permission !== "granted") {
-    Notification.requestPermission(function (status) {
-      if (Notification.permission !== status) {
-        Notification.permission = status;
-      }
-    });
-  }
+<p>Par exemple, dans notre application de démonstration, on utilise le fragment de code suivant pour créer une notification lorsque c'est nécessaire (ce fragment se trouve dans la fonction <code>createNotification()</code>) :</p>
 
-  var button = document.getElementsByTagName('button')[0];
+<pre class="brush: js">const img = '/to-do-notifications/img/icon-128.png';
+const text = 'Coucou ! Votre tâche "' + titre + '" arrive maintenant à échéance.';
+const notification = new Notification('Liste de trucs à faire', { body: text, icon: img });</pre>
 
-  button.addEventListener('click', function () {
-    // Si l'utilisateur accepte d'être notifié
-    if (window.Notification &amp;&amp; Notification.permission === "granted") {
-      var n = new Notification("Coucou !");
-    }
+<h2 id="closing_notifications">Fermer les notifications</h2>
 
-    // Si l'utilisateur n'a pas choisi s'il accepte d'être notifié
-    // Note: à cause de Chrome, nous ne sommes pas certains que la propriété permission soit définie, par conséquent il n'est pas sûr de vérifier la valeur par défaut.
-    else if (window.Notification &amp;&amp; Notification.permission !== "denied") {
-      Notification.requestPermission(function (status) {
-        if (Notification.permission !== status) {
-          Notification.permission = status;
-        }
+<p>On utilisera la méthode <a href="/fr/docs/Web/API/notification/close"><code>close()</code></a> afin de retirer une notification qui n'est plus pertinente (par exemple parce que la personne l'a déjà lue sur la page web s'il s'agit d'une messagerie ou, dans le cas d'un lecteur de musique, si la chanson en cours de lecture a déjà changé). La plupart des navigateurs effacent les notifications après un certain délai  (généralement autour de 4 secondes) mais ça ne devrait pas être un souci particulier, car cette tâche est souvent gérée par l'utilisateur ou l'agent utilisateur. La fermeture peut également être gérée par le système d'exploitation et les utilisatrices et utilisateurs doivent avoir la main sur ce comportement. D'anciennes versions de Chrome ne retiraient pas les automatiquement les notifications et vous pouvez donc utiliser un <a href="/fr/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout"><code>setTimeout()</code></a> uniquement pour ces versions historiques.</p>
 
-        // Si l'utilisateur est OK
-        if (status === "granted") {
-          var n = new Notification("Coucou !");
-        }
+<pre class="brush: js">const n = new Notification('Une super chanson');
+document.addEventListener('visibilitychange', function() {
+  if (document.visibilityState === 'visible') {
+    // L'onglet est désormais visible et la notification n'est plus pertinente
+    // on peut la fermer
+    n.close();
+  }
+});
+</pre>
 
-        // Sinon, revenons en à un mode d'alerte classique
-        else {
-          alert("Coucou !");
-        }
-      });
-    }
+<div class="note">
+<p><strong>Note :</strong> Cette API ne devrait pas être utilisée pour retirer la notification de l'écran après un délai donné car elle supprimera également la notification de la liste des notifications et empêchera toute interaction avec celle-ci après qu'elle a initialement été affichée.</p>
+</div>
 
-    // Si l'utilisateur refuse d'être notifié
-    else {
-      // We can fallback to a regular modal alert
-      alert("Coucou !");
-    }
-  });
-});</pre>
+<div class="note">
+<p><strong>Note :</strong> Lorsque vous recevez un évènement <code>close</code>, il n'y a aucune garantie que celui-ci provienne de l'utilisatrice ou de l'utilisateur. Cela correspond à la spécification qui indique : « lorsqu'une notification est fermée, que ce soit par la plateforme sous-jacente ou par l'utilisateur, l'étape de fermeture correspondante doit être exécutée. ».</p>
+</div>
 
-<p>Et voici le résultat:</p>
+<h2 id="notification_events">Évènements relatifs aux notifications</h2>
 
-<p>{{ EmbedLiveSample('Simple_example', '100%', 30) }}</p>
+<p>Quatre évènements sont déclenchés sur une instance de <a href="/fr/docs/Web/API/notification"><code>Notification</code></a> :</p>
 
-<h2 id="Gestion_des_notifications_répétitives">Gestion des notifications répétitives</h2>
+<dl>
+ <dt><code>click</code></dt>
+ <dd>Déclenché lorsque la personne clique sur la notification.</dd>
+ <dt><code>close</code></dt>
+ <dd>Déclenché lorsque la notification a été fermée.</dd>
+ <dt><code>error</code></dt>
+ <dd>Déclenché si une erreur se produit avec la notification. Généralement, cela a lieu lorsqu'il y a un problème d'affichage.</dd>
+ <dt><code>show</code></dt>
+ <dd>Déclenché lorsque la notification est affichée.</dd>
+</dl>
 
-<p><span id="result_box" lang="fr"><span class="hps">Dans</span> <span class="hps">certains cas, il</span> <span class="alt-edited hps">peut être dérangeant</span> <span class="hps">pour l'utilisateur</span> <span class="alt-edited hps">de lui</span> <span class="hps">envoyer un</span> <span class="hps">nombre élevé de</span> <span class="hps">notifications</span> <span class="hps">-</span> <span class="hps">par exemple,</span> <span class="hps">si une application</span> <span class="hps">pour la messagerie instantanée</span> <span class="hps">peut</span> <span class="hps">notifier à un utilisateur</span> <span class="hps">pour chaque</span> <span class="hps">message entrant</span><span>.</span> </span><span lang="fr"><span class="hps">Pour éviter</span> <span class="hps">une invasion de "bulles" sur le </span><span class="hps">bureau de l'utilisateur</span> <span class="hps">avec des centaines de</span> <span class="hps">notifications inutiles</span><span>,</span> <span class="hps">il est possible de</span> <span class="hps">prendre en charge</span> <span class="hps">la file d'attente</span> <span class="hps">des notifications en attente</span><span>.</span></span></p>
+<p>Ces évènements peuvent être suivis avec les gestionnaires d'évènement <a href="/fr/docs/Web/API/notification/onclick"><code>onclick</code></a>, <a href="/fr/docs/Web/API/notification/onclose"><code>onclose</code></a>, <a href="/fr/docs/Web/API/notification/onerror"><code>onerror</code></a>, et <a href="/fr/docs/Web/API/notification/onshow"><code>onshow</code></a>. <a href="/fr/docs/Web/API/notification"><code>Notification</code></a> héritant également de <a href="/fr/docs/Web/API/EventTarget"><code>EventTarget</code></a>, il est aussi possible d'utiliser la méthode <a href="/fr/docs/Web/API/EventTarget/addEventListener"><code>addEventListener()</code></a>.</p>
 
-<p>Pour ce faire, il est possible d'ajouter un tag à toute nouvelle notification. Si une notification a déjà le même tag et n'a pas encore été affichée, la nouvelle notification va remplacer l'ancienne. Si la notification avec le même tag a déjà été affichée, l'ancienne notification est fermée et la nouvelle est affichée.</p>
+<h2 id="replacing_existing_notifications">Remplacer les notifications existantes</h2>
 
-<h3 id="Exemple_de_Tag">Exemple de Tag</h3>
+<p>Il est généralement peu souhaitable de recevoir de nombreuses notifications sur une courte période. Par exemple, que se passerait-il si une messagerie envoyait une notification pour chaque message reçu alors qu'une discussion est en cours ? Pour éviter de submerger l'utilisatrice ou l'utilisateur avec de trop nombreuses notifications, il est possible de modifier les notifications en attente en remplaçant une ou plusieurs notifications avec une nouvelle notification à jour.</p>
 
-<p>Considérons le code HTML suivant:</p>
+<p>Pour cela, on pourra ajouter une balise à toute nouvelle notification. Si une notification existante possède la balise correspondante et qu'elle n'a pas encore été affichée, la nouvelle notification remplacera la précédente. Si une notification avec la même balise a déjà été affichée, elle est fermée et la nouvelle notification est affichée.</p>
 
-<pre class="brush: html">&lt;button&gt;Notifie moi!&lt;/button&gt;</pre>
+<h3 id="tag_example">Exemple d'utilisation des balises</h3>
 
-<p>Il est possible de gérer plusieurs notifications de cette manière:</p>
+<p>Prenons le fragment HTML qui suit :</p>
 
-<pre class="brush: js">window.addEventListener('load', function () {
-  // Premièrement, vérifions que nous avons la permission de notifier
-  // Sinon, demandons la permission
-  if (window.Notification &amp;&amp; Notification.permission !== "granted") {
-    Notification.requestPermission(function (status) {
-      if (Notification.permission !== status) {
-        Notification.permission = status;
-      }
-    });
-  }
+<pre class="brush: html">&lt;button&gt;Envoyez une notification !&lt;/button&gt;</pre>
+
+<p>Il est possible de gérer plusieurs notifications ainsi :</p>
 
-  var button = document.getElementsByTagName('button')[0];
+<pre class="brush: js">window.addEventListener('load', function () {
+  const button = document.getElementsByTagName('button')[0];
 
   button.addEventListener('click', function () {
-    // Si l'utilisateur accepte les notifications
+    // Si l'utilisateur a permis les notifications
     // essayons d'envoyer 10 notifications
     if (window.Notification &amp;&amp; Notification.permission === "granted") {
-      for (var i = 0; i &lt; 10; i++) {
-        // Grâce au tag, nous ne devrions voir que la notification "Hey! 9"
-        var n = new Notification("Hey! " + i, {tag: 'soManyNotification'});
-      }
+      let i = 0;
+      // On utilise un intervalle, car certains navigateurs (dont Firefox)
+      // bloquent les notifications s'il y en a trop sur une période
+      // donnée
+      const interval = window.setInterval(function () {
+        // Avec la balise, on ne devrait voir que la notification "Coucou ! 9"
+        const n = new Notification("Coucou ! " + i, {tag: 'soManyNotification'});
+        if (i++ == 9) {
+          window.clearInterval(interval);
+        }
+      }, 200);
     }
 
-    // Si l'utilisateur n'a pas choisi s'il accepte d'être notifié // Note: à cause de Chrome, nous ne sommes pas certains que la
-    // propriété permission soit définie, par conséquent il n'est pas
-    // sûr de vérifier la valeur par défault.
+    // Si l'utilisateur n'a pas encore autorisé ou non
+    // Note : À cause de Chrome, on ne peut pas s'assurer que la propriété permission 
+    // est définie et il est donc dangereux de vérifier la valeur "default"
     else if (window.Notification &amp;&amp; Notification.permission !== "denied") {
       Notification.requestPermission(function (status) {
-        if (Notification.permission !== status) {
-          Notification.permission = status;
-        }
-
-        // Si l'utilisateur a accepté les notifications
+        // Si la permission a été accordée
         if (status === "granted") {
-          for (var i = 0; i &lt; 10; i++) {
-            // Grâce au tag, nous ne devrions voir que la notification "Hey! 9"
-            var n = new Notification("Hey! " + i, {tag: 'soManyNotification'});
-          }
+          var i = 0;
+          // On utilise un intervalle, car certains navigateurs (dont Firefox)
+          // bloquent les notifications s'il y en a trop sur une période
+          // donnée
+          var interval = window.setInterval(function () {
+            // Avec la balise, on ne devrait voir que la notification "Coucou ! 9"
+            const n = new Notification("Coucou ! " + i, {tag: 'soManyNotification'});
+            if (i++ == 9) {
+              window.clearInterval(interval);
+            }
+          }, 200);
         }
 
-        // Sinon on bascule sur une alerte modale
+        // Sinon, on peut utiliser une alerte modale classique
         else {
-          alert("Hey!");
+          alert("Coucou !");
         }
       });
     }
 
-    // Si l'utilisateur refuse les notifications
+    // Si l'utilisateur a refusé les notifications
     else {
-      // on bascule sur une alerte modale
-      alert("Hey!");
+      // On utilise une alerte modale classique
+      alert("Coucou !");
     }
   });
 });</pre>
 
-<p>Et voici le résultat:</p>
-
-<p>{{ EmbedLiveSample('Tag_example', '100%', 30) }}</p>
-
-<h2 id="Recevoir_la_notification_du_clic_sur_une_notification">Recevoir la notification du clic sur une notification</h2>
-
-<p>Quand un utilisateur clique sur une notification générée par une application, il sera notifié de cet événement de deux façons, en fonction de la circonstance:</p>
-
-<ol>
- <li>Un événement click si votre application n'a pas été fermée ou placée en arrière-plan entre le moment où vous créez la notification et celui où l'utilisateur clique dessus.</li>
- <li>Sinon un message système</li>
-</ol>
+<p>Voir le résultat de cet exemple :</p>
 
-<p>Voir cet <a href="https://github.com/mozilla/buddyup/commit/829cba7afa576052cf601c3e286b8d1981f93f45#diff-3">extrait de code</a> pour un exemple d'utilisation.</p>
+<p>{{EmbedLiveSample('tag_example', '100%', 30)}}</p>
 
-<h2 id="Spécifications">Spécifications</h2>
+<h2 id="specifications">Spécifications</h2>
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('Web Notifications')}}</td>
-   <td>{{Spec2('Web Notifications')}}</td>
-   <td>Spécification initiale</td>
-  </tr>
- </tbody>
-</table>
+<p>{{Specifications("api.Notification")}}</p>
 
-<h2 id="Compatibilité_Navigateurs">Compatibilité Navigateurs</h2>
+<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
 
-<p>{{page("/fr/Web/API/Notification","Browser compatibility")}}</p>
+<p>{{Compat("api.Notification")}}</p>
 
-<h2 id="A_lire_aussi">A lire aussi</h2>
+<h2 id="see_also">Voir aussi</h2>
 
 <ul>
- <li>{{ domxref("Notification") }}</li>
+ <li><a href="/fr/docs/Web/API/notification"><code>Notification</code></a></li>
 </ul>
diff --git a/files/fr/web/api/origin/index.html b/files/fr/web/api/origin/index.html
new file mode 100644
index 0000000000..5fd2b80559
--- /dev/null
+++ b/files/fr/web/api/origin/index.html
@@ -0,0 +1,51 @@
+---
+title: WindowOrWorkerGlobalScope.origin
+slug: Web/API/origin
+translation_of: Web/API/WindowOrWorkerGlobalScope/origin
+original_slug: Web/API/WindowOrWorkerGlobalScope/origin
+---
+<p>{{APIRef()}}{{SeeCompatTable}}</p>
+
+<p>La propriété <code><strong>origin</strong></code> de l'interface {{domxref("WindowOrWorkerGlobalScope")}} retourne l'origine du scope global, serialisé en chaîne de caractères.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var <em>myOrigin</em> = self.origin; // ou simplement origin
+</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p>Une {{domxref("USVString")}}.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Exécuté depuis un worker, le code suivant permet d'afficher en console le scope global de ce worker à chaque message reçu.</p>
+
+<pre class="brush: js">onmessage = function() {
+  console.log(self.origin);
+};</pre>
+
+<p>Si l'origine n'est pas sous la forme scheme/host/port (par exemple, si vous exécutez le code en local, via <code>file://</code>), <code>origin</code> retournera la chaîne de caractère <code>"null"</code>.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'webappapis.html#dom-origin', 'WindowOrWorkerGlobalScope.origin')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.WindowOrWorkerGlobalScope.origin")}}</p>
diff --git a/files/fr/web/api/queuemicrotask/index.html b/files/fr/web/api/queuemicrotask/index.html
new file mode 100644
index 0000000000..cced10b9e4
--- /dev/null
+++ b/files/fr/web/api/queuemicrotask/index.html
@@ -0,0 +1,118 @@
+---
+title: WindowOrWorkerGlobalScope.queueMicrotask()
+slug: Web/API/queueMicrotask
+tags:
+  - API
+  - Asynchrone
+  - HTML DOM
+  - Intervales
+  - JavaScript
+  - Micro-tâche
+  - Microtask
+  - Minuteurs
+  - Méthode
+  - Performance
+  - ServiceWorker
+  - SharedWorker
+  - Tâches
+  - Window
+  - WindowOrWorkerGlobalScope
+  - Worker
+  - queueMicrotask
+  - setTimeout
+translation_of: Web/API/WindowOrWorkerGlobalScope/queueMicrotask
+original_slug: Web/API/WindowOrWorkerGlobalScope/queueMicrotask
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p><span class="seoSummary">La méthode <code><strong>queueMicrotask()</strong></code>, qui est exposée par {{domxref("Window")}} ou l'interface {{domxref("Worker")}}, met en file d'attente une micro-tâche qui doit être exécutée à un moment sûr avant que le contrôle soit retourné à la boucle d'événement du navigateur.</span> La micro-tâche est une fonction courte qui doit être exécutée après que la tâche actuelle ait terminé son exécution et lorsqu'il n'y a pas d'autre code en attente d'exécution avant que le contrôle du contexte d'exécution soit retourné à la boucle d'événement du navigateur.</p>
+
+<p>Cela permet à votre code de fonctionner sans interférer avec aucun autre code potentiellement à une plus haute priorité en attente, mais avant que le navigateur ne regagne le contrôle du contexte d'exécution, qui dépend potentiellement de la tâche que vous devez effectuer. Vous pouvez en apprendre plus sur comment utiliser les micro-tâches et pourquoi vous devriez le faire dans notre <a href="/en-US/docs/Web/API/HTML_DOM_API/Microtask_guide">microtask guide</a>.</p>
+
+<p>L'importance des micro-tâches vient de leur possibilité d'effectuer des tâches de manière asynchrone mais dans un ordre spécifique. Voir <a href="/en-US/docs/Web/API/HTML_DOM_API/Microtask_guide">Using microtasks in JavaScript with queueMicrotask()</a> pour plus de détails.</p>
+
+<p>Les micro-tâches sont particulièrement utiles pour les librairies et les frameworks qui doivent effectuer un nettoyage final ou d'autres tâches à exécuter avant le rendu.</p>
+
+<p><code>queueMicrotask()</code> est exposé dans la mixin {{domxref("WindowOrWorkerGlobalScope")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>scope</em>.queueMicrotask(<em>function</em>);
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>function</code></dt>
+ <dd>Une {{jsxref("function")}} qui doit être exécutée lorsque le moteur du navigateur détermine qu'il est sûr d'appeler votre code. Les micro-tâches mises en files d'attente sont exécutées après la fin de toutes les tâches en attente mais avant de céder le contrôle à la boucle d'événement du navigateur.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p><code>undefined</code>.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">self.queueMicrotask(() =&gt; {
+  // function contents here
+})</pre>
+
+<p>Tiré de la <a href="https://html.spec.whatwg.org/multipage/timers-and-user-prompts.html#microtask-queuing">spécification de queueMicrotask</a> :</p>
+
+<pre class="brush: js">MyElement.prototype.loadData = function (url) {
+  if (this._cache[url]) {
+    queueMicrotask(() =&gt; {
+      this._setData(this._cache[url]);
+      this.dispatchEvent(new Event("load"));
+    });
+  } else {
+    fetch(url).then(res =&gt; res.arrayBuffer()).then(data =&gt; {
+      this._cache[url] = data;
+      this._setData(data);
+      this.dispatchEvent(new Event("load"));
+    });
+  }
+};</pre>
+
+<h2 id="Lorsque_queueMicrotask_nest_pas_disponible">Lorsque queueMicrotask() n'est pas disponible</h2>
+
+<p>Le code ci-dessous est une prothèse d'émulation (<em>polyfill</em>) pour <code>queueMicrotask()</code>. Il crée une micro-tâche en utilisant une promesse qui se résout immédiatement, et utilise un timeout si la promesse ne peut pas être créée.</p>
+
+<pre class="brush: js">if (typeof window.queueMicrotask !== "function") {
+  window.queueMicrotask = function (callback) {
+    Promise.resolve()
+      .then(callback)
+      .catch(e =&gt; setTimeout(() =&gt; { throw e; }));
+  };
+}
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Spécification</th>
+   <th>Statut</th>
+   <th>Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML WHATWG", "timers-and-user-prompts.html#microtask-queuing", "self.queueMicrotask()")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{Compat("api.WindowOrWorkerGlobalScope.queueMicrotask")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/HTML_DOM_API/Microtask_guide">Using microtasks in JavaScript with queueMicrotask()</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous">Asynchronous JavaScript</a></li>
+ <li><a href="https://github.com/fergald/docs/blob/master/explainers/queueMicrotask.md">queueMicrotask explainer</a></li>
+ <li><a href="https://jakearchibald.com/2015/tasks-microtasks-queues-and-schedules/">Tasks, microtasks, queues and schedules</a> by Jake Archibald</li>
+</ul>
diff --git a/files/fr/web/api/settimeout/index.html b/files/fr/web/api/settimeout/index.html
new file mode 100644
index 0000000000..351b32953b
--- /dev/null
+++ b/files/fr/web/api/settimeout/index.html
@@ -0,0 +1,361 @@
+---
+title: WindowOrWorkerGlobalScope.setTimeout()
+slug: Web/API/setTimeout
+tags:
+  - API
+  - HTML DOM
+  - Méthode
+  - Reference
+translation_of: Web/API/WindowOrWorkerGlobalScope/setTimeout
+original_slug: Web/API/WindowOrWorkerGlobalScope/setTimeout
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p>La méthode <strong><code>setTimeout()</code></strong>, rattachée au <em>mixin</em>  {{domxref("WindowOrWorkerGlobalScope")}} (et qui succède à <code>window.setTimeout()</code>) permet de définir un « minuteur » (<em>timer</em>) qui exécute une fonction ou un code donné après la fin du délai indiqué.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>var identifiant</em> = <em>scope</em>.setTimeout(<em>fonction</em>[, <em>delai</em>, <em>param1</em>, <em>param2</em>, ...]);
+<em>var</em> <em>identifiant</em> = <em>scope</em>.setTimeout(<em>fonction</em>[, <em>delai</em>]);
+<em>var identifiant</em> = <em>scope</em>.setTimeout(<em>code</em>[, <em>delai</em>]);
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>function</code></dt>
+ <dd>Une fonction ({{jsxref("function")}}) qui doit être exécuté au déclenchement du minuteur après le temps imparti.</dd>
+ <dt><code>code</code></dt>
+ <dd>Une chaîne de caractères qui représente le code à exécuter. Cette chaîne est compilée et exécutée à l'expiration du minuteur. Pour des raisons analogues à celles exprimées avec {{jsxref("Objets_globaux/eval", "eval()")}}, cette syntaxe n'est pas <strong>recommandée</strong>.</dd>
+ <dt><code>delai</code> {{optional_inline}}</dt>
+ <dd>La durée, exprimée en millisecondes, à attendre avant que la fonction indiquée soit exécutée. Par défaut, ce paramètre vaut 0, ce qui signifiie que la fonction est exécutée dès que possible. La durée réelle mesurée avant l'exécution de la fonction peut être supérieure à ce paramètre, voir <a href="#durée">la section ci-après</a>.</dd>
+ <dt><code>param1, … , paramN</code> {{optional_inline}}</dt>
+ <dd>D'autres paramètres qui seront passés à la fonction une fois que le temps est écoulé.</dd>
+</dl>
+
+<div class="note">
+<p><strong>Note</strong> : La première syntaxe utilisant les paramètres supplémentaires ne fonctionne pas pour Internet Explorer 9 et les versions antérieures. Si vous souhaitez obtenir cette fonctionnalité pour ce navigateur, vous devrez utiliser une prothèse, <a href="#polyfill">voir ci-après</a>.</p>
+</div>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>La valeur renvoyée par la fonction est un entier qui représente un identifiant du minuteur créé par l'appel à <code>setTimeout()</code>. Cet identifiant pourra être passé à la méthode {{domxref("WindowOrWorkerGlobalScope.clearTimeout","clearTimeout()")}} afin d'annuler ce minuteur donné.</p>
+
+<p>Il peut être utile de savoir que <code>setTimeout()</code> et {{domxref("WindowOrWorkerGlobalScope.setInterval", "setInterval()")}} partagent le même ensemble d'identifiants et que  <code>clearTimeout()</code> et {{domxref("WindowOrWorkerGlobalScope.clearInterval", "clearInterval()")}} sont, techniquement, interchangeables. Toutefois pour des raisons de lisibilité et de maintenance, mieux vaut les utiliser par paires plutôt que de les mélanger.</p>
+
+<p>Le moteur d'exécution garantit qu'un identifiant donné ne sera pas réutilisé par un appel ultérieur à <code>setTimeout()</code> ou <code>setInterval()</code> pour un même objet (une fenêtre ou un <em>worker</em>). En revanche, différents objets possèdent chacun leurs ensembles d'identifiants.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans l'exemple qui suit, on dispose deux boutons classiques auxquels on associe, via des gestionnaires d'évènements, des fonctions qui utilisent <code>setTimeout()</code> et <code>clearTimeout()</code>. Utiliser le premier bouton déclenchera un minuteur qui affichera une boîte de dialogue après deux secondes. L'identifiant est enregistré à la création du minuteur et on peut annuler le minuteur en cours en appuyant sur le deuxième bouton (dont la fonction associée au gestionnaire d'évènements utilise <code>clearTimeout()</code>).</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;button onclick="delayedAlert();"&gt;
+  Affiche une alerte après deux secondes
+&lt;/button&gt;
+&lt;p&gt;&lt;/p&gt;
+&lt;button onclick="clearAlert();"&gt;
+  Annuler l'alerte avant qu'elle ne se déclenche
+&lt;/button&gt;
+</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">var timeoutID;
+
+function delayedAlert() {
+  timeoutID = window.setTimeout(slowAlert, 2000);
+}
+
+function slowAlert() {
+  alert("C'était long…");
+}
+
+function clearAlert() {
+  window.clearTimeout(timeoutID);
+}
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples')}}</p>
+
+<div class="note">
+<p><strong>Note :</strong> Voir aussi les exemples pour <a href="/fr/docs/Web/API/WindowOrWorkerGlobalScope/clearTimeout#Exemples"><code>clearTimeout()</code></a>.</p>
+</div>
+
+<h2 id="Prothèse_d'émulation_(polyfill)"><a name="polyfill">Prothèse d'émulation (<em>polyfill</em>)</a></h2>
+
+<p>S'il vous faut passer un ou plusieurs arguments à la fonction de rappel tout en prenant en charge Internet Explorer 9 et les versions antérieures, vous pouvez utiliser cette prothèse qui ajoute la prise en charge des paramètres additionnels :</p>
+
+<pre class="brush: js">/*\
+|*|
+|*|  Polyfill which enables the passage of arbitrary arguments to the
+|*|  callback functions of JavaScript timers (HTML5 standard syntax).
+|*|
+|*|  https://developer.mozilla.org/en-US/docs/DOM/window.setInterval
+|*|
+\*/
+
+(function() {
+  setTimeout(function(arg1) {
+    if (arg1 === 'test') {
+      // l'argument est passé, pas besoin de prothèse
+      return;
+    }
+    var __nativeST__ = window.setTimeout;
+    window.setTimeout = function(vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */ ) {
+      var aArgs = Array.prototype.slice.call(arguments, 2);
+      return __nativeST__(vCallback instanceof Function ? function() {
+        vCallback.apply(null, aArgs);
+      } : vCallback, nDelay);
+    };
+  }, 0, 'test');
+
+  var interval = setInterval(function(arg1) {
+    clearInterval(interval);
+    if (arg1 === 'test') {
+    // l'argument est passé, pas besoin de prothèse
+      return;
+    }
+    var __nativeSI__ = window.setInterval;
+    window.setInterval = function(vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */ ) {
+      var aArgs = Array.prototype.slice.call(arguments, 2);
+      return __nativeSI__(vCallback instanceof Function ? function() {
+        vCallback.apply(null, aArgs);
+      } : vCallback, nDelay);
+    };
+  }, 0, 'test');
+}())
+</pre>
+
+<h3 id="Correctif_ciblé_sur_IE">Correctif ciblé sur IE</h3>
+
+<p>Si vous souhaitez ne cibler que IE 9 et antérieurs, vous pouvez utiliser les commentaires conditionnels JavaScript :</p>
+
+<pre class="brush: js">/*@cc_on
+  // conditional IE &lt; 9 only fix
+  @if (@_jscript_version &lt;= 9)
+  (function(f){
+     window.setTimeout = f(window.setTimeout);
+     window.setInterval = f(window.setInterval);
+  })(function(f){return function(c,t){var a=[].slice.call(arguments,2);return f(function(){c instanceof Function?c.apply(this,a):eval(c)},t)}});
+  @end
+@*/
+</pre>
+
+<p>Ou plutôt les commentaires conditionnels HTML :</p>
+
+<pre class="brush: html">&lt;!--[if lte IE 9]&gt;&lt;script&gt;
+(function(f){
+window.setTimeout=f(window.setTimeout);
+window.setInterval=f(window.setInterval);
+})(function(f){return function(c,t){
+var a=[].slice.call(arguments,2);return f(function(){c instanceof Function?c.apply(this,a):eval(c)},t)}
+});
+&lt;/script&gt;&lt;![endif]--&gt;
+</pre>
+
+<h3 id="Autres_méthodes_de_contournement">Autres méthodes de contournement</h3>
+
+<p>Vous pouvez également utiliser une fonction anonyme comme fonction de rappel (<em>callback</em>) :</p>
+
+<pre class="brush: js">var intervalID = setTimeout(function() {
+  maFonction('un', 'deux', 'trois');
+  }, 1000);
+</pre>
+
+<p>Voici une réécriture de l'exemple précédent avec <a href="/fr/docs/Web/JavaScript/Reference/Fonctions/Fonctions_fl%C3%A9ch%C3%A9es">les fonctions fléchées</a> :</p>
+
+<pre class="brush: js">var intervalID = setTimeout(() =&gt; {
+  maFonction('un', 'deux', 'trois');
+  }, 1000);
+</pre>
+
+<p>On peut également utiliser {{jsxref("Function.prototype.bind()")}} :</p>
+
+<pre class="brush: js">setTimeout(function(arg1){}.bind(undefined, 10), 1000);
+</pre>
+
+<h2 id="Le_problème_«_this_»">Le problème « <code>this</code> »</h2>
+
+<p>Lorsqu'on passe une fonction à <code>setTimeout()</code>, cette fonction peut être appelée avec une valeur <code>this</code> qui n'est pas celle qu'on attend. Ce problème est expliqué en détails dans la référence JavaScript<a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_this#Dans_le_contexte_d'une_fonction">JavaScript reference</a>.</p>
+
+<h3 id="Explications">Explications</h3>
+
+<p>Le code exécuté par <code>setTimeout()</code> est appelé dans un contexte d'exécution différent de celui de la fonction où <code>setTimeout</code> a été appelé. Les règles usuelles pour la détermination de <code>this</code> s'appliquent : si <code>this</code> n'est pas défini lors de l'appel ou avec <code>bind</code>, la valeur par défaut sera l'objet global (<code>global</code> ou <code>window</code>) en mode non-strict ou {{jsxref("undefined")}} en mode strict. Aussi, le <code>this</code> utilisé par la fonction de rappel ne sera pas le même <code>this</code> que celui utilisé par la fonction ayant appelé <code>setTimeout</code>.</p>
+
+<div class="note">
+<p><strong>Note :</strong> La valeur par défaut pour <code>this</code>, lors de l'utilisation d'une fonction de rappel par <code>setTimeout</code> sera toujours l'objet <code>window</code> et pas la valeur <code>undefined</code>, même en mode strict.</p>
+</div>
+
+<p>Par exemple :</p>
+
+<pre class="brush: js">monTableau = ['zéro', 'un', 'deux'];
+monTableau.maMéthode = function (sPropriété) {
+    console.log(arguments.length &gt; 0 ? this[sPropriété] : this);
+};
+
+monTableau.maMéthode();  // affichera "zéro,un,deux" dans la console
+monTableau.maMéthode(1); // affichera "un"</pre>
+
+<p>Le code qui précède fonctionne car lorsque <code>maMéthode</code> est appelée, <code>this</code> correspond à <code>monTableau</code> et qu'au sein de <code>maMéthode</code>, <code>this[sPropriété]</code> correspond alors à <code>monTableau[sPropriété]</code>. Toutefois, avec :</p>
+
+<pre class="brush: js">setTimeout(monTableau.maMéthode, 1000);
+// affiche "[object Window]" après 1 seconde
+setTimeout(monTableau.maMéthode, 1500, '1');
+// affiche "undefined" après 1.5 seconde</pre>
+
+<p>La fonction <code>monTableau.maMéthode</code> est pasée à <code>setTimeout</code> et, lorsqu'elle est appelée, <code>this</code> n'est pas défini et le moteur utilise la valeur par défaut : <code>window</code>. Il n'y apas d'option qui permettent de passer une valeur  <code>thisArg</code> à <code>setTimeout()</code> comme on peut le faire avec {{jsxref("Array.prototype.forEach()")}} ou {{jsxref("Array.prototype.reduce()")}} par exemple. Aussi, utiliser <code>call()</code> afin de définir <code>this</code> ne fonctionnera pas non plus.</p>
+
+<pre class="brush: js">setTimeout.call(monTableau, monTableau.maMéthode, 2000);
+// error: "NS_ERROR_XPC_BAD_OP_ON_WN_PROTO: Illegal operation on WrappedNative prototype object"
+setTimeout.call(monTableau, monTableau.maMéthode, 2500, 2);
+// même erreur
+</pre>
+
+<h3 id="Solutions_éventuelles">Solutions éventuelles</h3>
+
+<p class="note"><strong>Note</strong>: JavaScript 1.8.5 introduced the <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind">Function.prototype.bind()</a></code> method to set the value of <code>this</code> for all calls to a given function. This can avoid having to use a wrapper function to set the value of <code>this</code> in a callback.</p>
+
+<p>Exemple d'utilisation :</p>
+
+<pre class="brush: js">var monTableau = ['zéro', 'un', 'deux'];
+var maMéthodeLiée = (function (sPropriété) {
+  console.log(arguments.length &gt; 0 ? this[sPropriété] : this);
+}).bind(monTableau);
+
+
+maMéthodeLiée(); // affiche "zéro,un,deux"
+maMéthodeLiée(1); // affiche "un"
+setTimeout(maMéthodeLiée, 1000);
+// affiche "zéro,un,deux" après une seconde
+setTimeout(maMéthodeLiée, 1500, "1");
+// affiche "un" après 1.5 seconde
+</pre>
+
+<h2 id="Notes">Notes</h2>
+
+<p>Les minuteurs peuvent être annulés avec {{domxref("WindowOrWorkerGlobalScope.clearTimeout","clearTimeout()")}}. Si on souhaite appeler une fonction de façon répétée, on utilisera plutôt {{domxref("WindowOrWorkerGlobalScope.setInterval()","setInterval()")}}.</p>
+
+<h3 id="Utiliser_des_chaînes_pour_le_code_plutôt_que_des_fonctions">Utiliser des chaînes pour le code plutôt que des fonctions</h3>
+
+<p>Passer une chaîne de caractères pour le code à exécuter, plutôt qu'une fonction, souffre des mêmes dangers que {{jsxref("Objets_globaux/eval","eval()")}}.</p>
+
+<pre class="brush: js">// Recommandé
+window.setTimeout(function() {
+    console.log('Coucou monde !');
+}, 500);
+
+// Non recommandé
+window.setTimeout("console.log('Coucou monde !');", 500);
+</pre>
+
+<p>Une chaîne de caractères passée à <code>setTimeout</code> sera évaluée dans le contexte global. Aussi, les symboles locaux au contexte de l'appel de <code>setTimeout()</code> ne seront pas accessibles au code présent dans la chaîne de caractères lors de son évaluation.</p>
+
+<h3 id="Durée_plus_longue_que_le_paramètre_indiquée"><a id="durée" name="durée">Durée plus longue que le paramètre indiquée</a></h3>
+
+<p>Plusieurs raisons peuvent expliquer une durée réelle plus longue que le délai passé en argument. Voici les plus fréquentes.</p>
+
+<h4 id="Précision_minimale_à_4ms">Précision minimale à 4ms</h4>
+
+<p>Dans les navigateurs récents les appels à <code>setTimeout()/</code>{{domxref("WindowOrworkerGlobalScope.setInterval","setInterval()")}} possèdent au plus une précision de 4ms lorsque plusieurs appels imbriqués sont réalisés. Par exemple :</p>
+
+<pre class="brush: js" id="ct-0">function cb() { f(); setTimeout(cb, 0); }
+setTimeout(cb, 0);</pre>
+
+<pre class="brush: js">setInterval(f, 0);</pre>
+
+<p>Pour Chrome et Firefox, la limitation est active à partir du cinquième appel de fonction de rappel,  Safari active la limitation à partir du sixième et Edge à partir du troisième. Gecko traite <code>setInterval()</code> de la même façon depuis la <a href="/fr/docs/Mozilla/Firefox/Releases/56">version 56</a>.</p>
+
+<p><a class="external" href="http://code.google.com/p/chromium/issues/detail?id=792#c10">Par le passé</a>, certains navigateurs implémentaient cette limite différemment (pour les appels à <code>setInterval()</code> quelle que soit leur provenance ou lorsqu'un appel <code>setTimeout()</code> était imbriqué dans un autre pour un certain nombre de niveaux d'imbrication.</p>
+
+<p>Pour implémenter un minuteur de 0ms, on pourra utiliser {{domxref("window.postMessage()")}}.</p>
+
+<div class="note">
+<p><strong>Note </strong>: Le délai minimal est géré dans Firefox via une préférence : <code>dom.min_timeout_value</code>.</p>
+</div>
+
+<div class="note">
+<p><strong>Note</strong> : Cette durée de 4 ms est <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/timers.html#timers">définie dans la spécification HTML5</a> et est la même dans l'ensemble des navigateurs à partir de 2010. Avant {{geckoRelease("5.0")}}, la valeur minimale pour les appels imbriqués était 10ms.</p>
+</div>
+
+<h4 id="Précision_minimale_des_minuteurs_pour_les_onglets_inactifs_plus_de_1000ms">Précision minimale des minuteurs pour les onglets inactifs : plus de 1000ms</h4>
+
+<p>Afin de réduire la charge (ainsi que la consommation d'énergie associée) des onglets en arrière-plan, les minuteurs ne sont déclenchés au maximum qu'une fois par seconde pour les onglets inactifs.</p>
+
+<p>Firefox implémente ce comportement depuis Firefox 5 (cf.  {{bug(633421)}}) et la valeur du seuil de 1000ms peut être paramétrée via la préférence <span class="comment-copy"><code>dom.min_background_timeout_value</code>.</span> Chrome implémente ce comportement depuis la version 11 (<a class="external" href="http://crbug.com/66078">crbug.com/66078</a>).</p>
+
+<p>Firefox pour Android utilise un minimum de 15 minutes depuis Firefox 14 (cf.  {{bug(736602)}}) et les onglets en arrière-plan peuvent être déchargés complètement.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Firefox 50 ne limite plus la réactivité des onglets en arrière-plan si un contexte Web Audio API {{domxref("AudioContext")}} joue un son. Firefox 51 élargit le spectre en supprimant la limitation si un objet {{domxref("AudioContext")}} est présent dans l'onglet, même sans jouer de son. Cela a permis de résoudre différents problèmes avec certaines applications qui jouent de la musique en arrière-plan.</p>
+</div>
+
+<h4 id="Limitation_des_minuteurs_pour_les_scripts_de_pistage">Limitation des minuteurs pour les scripts de pistage</h4>
+
+<p>Depuis Firefox 55, les scripts de pistage (par exemple Google Analytics) (c'est-à-dire que toute URL que Firefox reconnaît comme appartenant à un domaine de pistage via <a href="https://wiki.mozilla.org/Security/Tracking_protection#Lists">la liste TP</a>) ont une limitation plus forte. En premier plan la limitation est toujours de 4ms mais pour les onglets en arrière-plan, la limite est à 10000ms une fois que 30 secondes se sont écoulées après le premier chargement du document.</p>
+
+<p>Ces seuils peuvent être gérés via les préférences :</p>
+
+<ul>
+ <li><code>dom.min_tracking_timeout_value</code> : 4</li>
+ <li><code>dom.min_tracking_background_timeout_value</code> : 10000</li>
+ <li><code>dom.timeout.tracking_throttling_delay</code> : 30000</li>
+</ul>
+
+<h4 id="Minuteurs_en_retard">Minuteurs en retard</h4>
+
+<p>En plus de ces limitations, le minuteur peut être déclenché plus tard si le navigateur ou le système d'opération est occupé sur d'autres tâches. On notera particulièrement que la fonction de rappel n'est pas exécutée tant que le <em>thread</em> du script n'a pas terminé. Par exemple :</p>
+
+<pre class="brush: js">function toto() {
+  console.log('appel de toto');
+}
+setTimeout(toto, 0);
+console.log('Après setTimeout');</pre>
+
+<p>affichera, dans la console :</p>
+
+<pre class="brush: js">Après setTimeout
+appel de toto</pre>
+
+<p>Ici, même si <code>setTimeout</code> a été appelé avec un délai nul, la fonction de rappel est placée dans la queue et est planifiée pour être exécutée dès que possible : ce qui n'est pas « immédiatement ». Le code courant doit finir d'être exécuté afin que les appels dans la queue puissent être dépilés.</p>
+
+<h3 id="Valeur_de_délai_maximale">Valeur de délai maximale</h3>
+
+<p>Les navigateurs que sont Internet Explorer, Chrome, Safari et Firefox stockent, en interne, la valeur du délai comme un entier sur 32 bits signé. Il y a donc un dépassement de borne si le délai est supérieur à 2147483647 millisecondes, ce qui correspond à 24.8 days. Si une telle valeur (supérieure à ce seuil) est utilisée, le minuteur est déclenché dès que possible.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Spécification</th>
+   <th>État</th>
+   <th>Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'webappapis.html#dom-settimeout', 'WindowOrWorkerGlobalScope.setTimeout()')}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td>Déplacement de la méthode sur le <em>mixin</em> <code>WindowOrWorkerGlobalScope</code> dans la dernière spécification.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML WHATWG", "webappapis.html#dom-settimeout", "WindowTimers.setTimeout()")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td>Définition initiale (<em>DOM Level 0</em>)</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{Compat("api.WindowOrWorkerGlobalScope.setTimeout")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("WindowOrWorkerGlobalScope.clearTimeout")}}</li>
+ <li>{{domxref("WindowOrWorkerGlobalScope.setInterval")}}</li>
+ <li>{{domxref("window.requestAnimationFrame")}}</li>
+</ul>
diff --git a/files/fr/web/api/web_audio_api/visualizations_with_web_audio_api/index.html b/files/fr/web/api/web_audio_api/visualizations_with_web_audio_api/index.html
index e8891925b5..14da8cbd47 100644
--- a/files/fr/web/api/web_audio_api/visualizations_with_web_audio_api/index.html
+++ b/files/fr/web/api/web_audio_api/visualizations_with_web_audio_api/index.html
@@ -39,7 +39,7 @@ analyseur.connect(distortion);
 
 <p>Ces méthodes copient les données dans le tableau passé en paramètre, il faut donc créer un tableau avant de les invoquer. La première produit des nombres flottants à simple précision de 32 bits, qui ne peuvent être stockées dans un simple tableau javascript. Vous devez créer un domxref("Float32Array") }} ou un {{ domxref("Uint8Array") }}, en fonction du type de données que vous traitez.</p>
 
-<p>Par exemple, disons que nous manipulons une fft de fréquence 2048. Nous retournonns la valeur {{ domxref("AnalyserNode.frequencyBinCount") }}, qui correspond à la moitié de la fréquence, puis nous appelons la méthode  Uint8Array() en passant frequencyBinCount comme argument pour la taille — c'est le nombre de points de données qui seront collectées pour cette fréquence.</p>
+<p>Par exemple, disons que nous manipulons une fft de fréquence 2048. Nous retournons la valeur {{ domxref("AnalyserNode.frequencyBinCount") }}, qui correspond à la moitié de la fréquence, puis nous appelons la méthode  Uint8Array() en passant frequencyBinCount comme argument pour la taille — c'est le nombre de points de données qui seront collectées pour cette fréquence.</p>
 
 <pre class="brush: js">analyseur.fftSize = 2048;
 var tailleMemoireTampon = analyseur.frequencyBinCount;
diff --git a/files/fr/web/api/windoworworkerglobalscope/atob/index.html b/files/fr/web/api/windoworworkerglobalscope/atob/index.html
deleted file mode 100644
index 1ce6ba94c1..0000000000
--- a/files/fr/web/api/windoworworkerglobalscope/atob/index.html
+++ /dev/null
@@ -1,78 +0,0 @@
----
-title: window.atob
-slug: Web/API/WindowOrWorkerGlobalScope/atob
-tags:
-  - API
-  - DOM
-  - Reference
-  - WindowOrWorkerGlobalScope
-  - atob
-translation_of: Web/API/WindowOrWorkerGlobalScope/atob
-original_slug: Web/API/WindowBase64/atob
----
-<p>{{APIRef ("HTML DOM")}}<br>
- La fonction <code>WindowOrWorkerGlobalScope.atob()</code> décode une chaîne de données qui a été codée en utilisant le codage en base 64. Vous pouvez utiliser la méthode {{domxref("WindowOrWorkerGlobalScope.btoa","btoa()")}} pour encoder et transmettre des données qui pourraient causer des problèmes de communication, puis les transmettre et utiliser la méthode atob() pour décoder les données . Par exemple, vous pouvez coder, transmettre et décoder des caractères de contrôle tels que les valeurs ASCII 0 à 31.</p>
-
-<p>Pour une utilisation avec des chaînes Unicode ou UTF-8, voir <a href="/fr/docs/D%C3%A9coder_encoder_en_base64">cette note sur l'encodage et le décodage Base64</a> et <a href="/fr-FR/docs/Web/API/window.btoa#Unicode_Strings">cette note sur btoa()</a>.</p>
-
-<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2>
-
-<pre class="eval">var donneesDecodees = scope.atob(<em>donneesEncodees</em>);
-</pre>
-
-<h3 id="Déclenche">Déclenche</h3>
-
-<p>Déclenche une {{jsxref("DOMException")}} si la longueur de la chaîne passée en entrée n'est pas un multiple de 4.</p>
-
-<h2 id="Exemple" name="Exemple">Exemple</h2>
-
-<pre class="eval"><em>donneesEncodees</em> = window.btoa('Salut, monde'); // encode une chaîne
-<em>donneesDecodees</em> = window.atob(<em>donneesEncodees</em>); // décode la chaîne
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table>
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', 'webappapis.html#dom-btoa', 'WindowOrWorkerGlobalScope.atob()')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td>Méthode déplacée dans le mixin <code>WindowOrWorkerGlobalScope</code> dans la spéc la plus récente.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', '#dom-windowbase64-atob', 'WindowBase64.atob()')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td>Pas de changement depuis l'instantané le plus récent {{SpecName("HTML5.1")}}.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5.1', '#dom-windowbase64-atob', 'WindowBase64.atob()')}}</td>
-   <td>{{Spec2('HTML5.1')}}</td>
-   <td>Instantané de {{SpecName("HTML WHATWG")}}. Pas de changement.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName("HTML5 W3C", "#dom-windowbase64-atob", "WindowBase64.atob()")}}</td>
-   <td>{{Spec2('HTML5 W3C')}}</td>
-   <td>Instantané de {{SpecName("HTML WHATWG")}}. Création de <code>WindowBase64</code> (les propriétés se trouvaient sur la cible avant cela).</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.WindowOrWorkerGlobalScope.atob")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="https://developer.mozilla.org/Web/API/WindowBase64/Base64_encoding_and_decoding">Base64 encoding and decoding</a></li>
- <li><a href="https://developer.mozilla.org/fr/docs/Web/HTTP/Basics_of_HTTP/Data_URIs">Les  URL de <code>données</code></a></li>
- <li>{{domxref("WindowOrWorkerGlobalScope.btoa","window.btoa()")}}</li>
- <li><a href="https://developer.mozilla.org/fr-FR/docs/Components.utils.importGlobalProperties">Components.utils.importGlobalProperties</a></li>
-</ul>
diff --git a/files/fr/web/api/windoworworkerglobalscope/btoa/index.html b/files/fr/web/api/windoworworkerglobalscope/btoa/index.html
deleted file mode 100644
index 41956ed3b0..0000000000
--- a/files/fr/web/api/windoworworkerglobalscope/btoa/index.html
+++ /dev/null
@@ -1,123 +0,0 @@
----
-title: WindowBase64.btoa()
-slug: Web/API/WindowOrWorkerGlobalScope/btoa
-tags:
-  - API
-  - DOM
-  - Méthode
-  - Reference
-  - Web
-  - WindowOrWorkerGlobalScope
-  - btoa
-  - chaînes
-  - données
-translation_of: Web/API/WindowOrWorkerGlobalScope/btoa
-original_slug: Web/API/WindowBase64/btoa
----
-<div>{{APIRef("HTML DOM")}}</div>
-
-<p>La méthode <code>WindowOrWorkerGlobalScope.btoa()</code> crée une chaîne ASCII codée en base 64 à partir d'un objet {{jsxref ("String")}} dans lequel chaque caractère de la chaîne est traité comme un octet de données binaires.</p>
-
-<div class="note">
-<p><strong>Note :</strong> étant donné que cette fonction traite chaque caractère comme un octet de données binaires, quel que soit le nombre d'octets composant le caractère, une exception <code>InvalidCharacterError</code> est déclenchée si le {{Glossary("code point")}} d'un caractère quelconque est en dehors de la plage 0x00 à 0xFF. Voir {{anch("Chaînes Unicode")}} pour un exemple montrant comment encoder des chaînes avec des caractères en dehors de la plage 0x00 à 0xFF.</p>
-</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre>var donneesEncodees = scope.btoa(<em>chaineAEncoder</em>);
-</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>chaineAEncoder</code></dt>
- <dd>Une chaîne dont les caractères représentent chacun un octet unique de données binaires à encoder en ASCII.</dd>
-</dl>
-
-<h3 id="Valeur_retournée">Valeur retournée</h3>
-
-<p>Une chaîne contenant la représentation Base64 de la <code>chaineAEncoder</code>.</p>
-
-<h3 id="Exceptions">Exceptions</h3>
-
-<h2 id="Exemple">Exemple</h2>
-
-<pre class="eval">var donneesEncodees = window.btoa('Salut, monde'); // encode une chaîne<em>
-</em>var donneesDecodees = window.atob(donneesEncodees); // décode la chaîne
-</pre>
-
-<h2 id="Notes" name="Notes">Notes</h2>
-
-<p>Vous pouvez utiliser cette méthode pour encoder des données qui, autrement, pourraient engendrer des problèmes de communication, les transmettre et utiliser alors la méthode {{domxref("WindowOrWorkerGlobalScope.atob","atob()")}} pour décoder les données à nouveau. Par exemple, vous pouvez encoder des caractères de contrôle tels que les valeurs ASCII de 0 à 31.</p>
-
-<p><code>btoa()</code> est également disponible pour les composants XPCOM implémentés en JavaScript, même si {domxref("Window")}} n'est pas l'objet global dans les composants.</p>
-
-<h2 id="Chaînes_Unicode">Chaînes Unicode</h2>
-
-<p>Dans la plupart des navigateurs, l'appel de <code>btoa()</code> sur une chaîne Unicode engendrera une exception <code>InvalidCharacterError</code>.</p>
-
-<p>Une option est d'échapper tous les caractères étendus, de telle sorte que la chaîne que vous voulez en fait encoder soit une représentation ASCII de l'original. Voyez cet exemple, noté par <a href="http://ecmanaut.blogspot.com/2006/07/encoding-decoding-utf8-in-javascript.html" title="http://ecmanaut.blogspot.com/2006/07/encoding-decoding-utf8-in-javascript.html">Johan Sundström</a> :</p>
-
-<pre id="txt"><code>// Chaîne ucs-2 en ascii encodé en base64
-function uena(chn) {
-    return window.btoa(unescape(encodeURIComponent(chn)));
-}
-// Ascii encodé en base64 en chaîne ucs-2
-function aenu(chn) {
-    return decodeURIComponent(escape(window.atob(chn)));
-}
-// Usage :
-uena('✓ à la mode'); // 4pyTIMOgIGxhIG1vZGU=
-aenu('4pyTIMOgIGxhIG1vZGU='); // "✓ à la mode"
-
-uena('I \u2661 Unicode!'); // SSDimaEgVW5pY29kZSE=
-aenu('SSDimaEgVW5pY29kZSE='); // "I ♡ Unicode!"</code></pre>
-
-<p>Une solution meilleure, plus fiable et moins coûteuse consiste à <a href="https://developer.mozilla.org/fr/docs/D%C3%A9coder_encoder_en_base64">utiliser des tableaux typés pour faire la conversion</a>.</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table>
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', 'webappapis.html#dom-btoa', 'WindowOrWorkerGlobalScope.btoa()')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td>Méthode déplacée dans le mixin <code>WindowOrWorkerGlobalScope</code> dans la spéc la plus récente.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', '#dom-windowbase64-btoa', 'WindowBase64.btoa()')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td>Pas de changement depuis le dernier instantané, {{SpecName("HTML5.1")}}.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5.1', '#dom-windowbase64-btoa', 'WindowBase64.btoa()')}}</td>
-   <td>{{Spec2('HTML5.1')}}</td>
-   <td>Instantané de {{SpecName("HTML WHATWG")}}. Pas de changement.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName("HTML5 W3C", "#dom-windowbase64-btoa", "WindowBase64.btoa()")}}</td>
-   <td>{{Spec2('HTML5 W3C')}}</td>
-   <td>Instantané de {{SpecName("HTML WHATWG")}}. Création de <code>WindowBase64</code> (les propriétés se trouvaient sur la cible avant cela).</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.WindowOrWorkerGlobalScope.btoa")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/WindowBase64/Base64_encoding_and_decoding">Base64 encoding and decoding</a></li>
- <li><a href="https://developer.mozilla.org/fr/docs/Web/HTTP/Basics_of_HTTP/Data_URIs">Les URL de <code>données</code></a></li>
- <li>{{domxref("WindowOrWorkerGlobalScope.atob","atob()")}}</li>
- <li><a href="https://developer.mozilla.org/en-US/docs/Components.utils.importGlobalProperties">Components.utils.importGlobalProperties</a></li>
-</ul>
diff --git a/files/fr/web/api/windoworworkerglobalscope/caches/index.html b/files/fr/web/api/windoworworkerglobalscope/caches/index.html
deleted file mode 100644
index d05a1c95ad..0000000000
--- a/files/fr/web/api/windoworworkerglobalscope/caches/index.html
+++ /dev/null
@@ -1,79 +0,0 @@
----
-title: WindowOrWorkerGlobalScope.caches
-slug: Web/API/WindowOrWorkerGlobalScope/caches
-translation_of: Web/API/WindowOrWorkerGlobalScope/caches
----
-<p>{{APIRef()}}{{SeeCompatTable}}</p>
-
-<p>La propriété en lecture seule  <code><strong>caches</strong></code> de l'interface {{domxref("WindowOrWorkerGlobalScope")}} retourne l'objet {{domxref("CacheStorage")}} associé au contexte actuel. Cet objet permet de stocker des ressources pour une utilisation hors-ligne et de générer des réponses personnalisées à des requêtes.</p>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">var <em>myCacheStorage</em> = self.caches; // ou simplement caches
-</pre>
-
-<h3 id="Value">Value</h3>
-
-<p>Un objet de type {{domxref("CacheStorage")}}.</p>
-
-<h2 id="Exemple">Exemple</h2>
-
-<p>L'exemple suivant montre comment mettre en cache un contexte de <a href="/en-US/docs/Web/API/Service_Worker_API">service worker</a> pour stocker des ressources et les utiliser hors-ligne.</p>
-
-<pre class="brush: js">this.addEventListener('install', function(event) {
-  event.waitUntil(
-    caches.open('v1').then(function(cache) {
-      return cache.addAll([
-        '/sw-test/',
-        '/sw-test/index.html',
-        '/sw-test/style.css',
-        '/sw-test/app.js',
-        '/sw-test/image-list.js',
-        '/sw-test/star-wars-logo.jpg',
-        '/sw-test/gallery/',
-        '/sw-test/gallery/bountyHunters.jpg',
-        '/sw-test/gallery/myLittleVader.jpg',
-        '/sw-test/gallery/snowTroopers.jpg'
-      ]);
-    })
-  );
-});</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Status</th>
-   <th scope="col">Comment</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Service Workers', '#self-caches', 'caches')}}</td>
-   <td>{{Spec2('Service Workers')}}</td>
-   <td>
-    <p>Défini dans un <code>WindowOrWorkerGlobalScope</code> partiel dans la nouvelle spec.</p>
-   </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('Service Workers')}}</td>
-   <td>{{Spec2('Service Workers')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-
-
-<p>{{Compat("api.WindowOrWorkerGlobalScope.caches")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/en-US/docs/Web/API/ServiceWorker_API">Service Workers</a></li>
- <li><a href="/en-US/docs/Web/API/Web_Workers_API">Web Workers</a></li>
- <li>{{domxref("CacheStorage")}}</li>
- <li>{{domxref("Cache")}}</li>
-</ul>
diff --git a/files/fr/web/api/windoworworkerglobalscope/clearinterval/index.html b/files/fr/web/api/windoworworkerglobalscope/clearinterval/index.html
deleted file mode 100644
index d80eda07e3..0000000000
--- a/files/fr/web/api/windoworworkerglobalscope/clearinterval/index.html
+++ /dev/null
@@ -1,72 +0,0 @@
----
-title: WindowOrWorkerGlobalScope.clearInterval()
-slug: Web/API/WindowOrWorkerGlobalScope/clearInterval
-tags:
-  - API
-  - Méthode
-  - Reference
-  - WindowOrWorkerGlobalScope
-  - clearInterval
-translation_of: Web/API/WindowOrWorkerGlobalScope/clearInterval
-original_slug: Web/API/WindowTimers/clearInterval
----
-<div>{{APIRef("HTML DOM")}}</div>
-
-<p>La méthode <strong><code>clearInterval()</code></strong>, rattachée au <em>mixin </em>{{domxref("WindowOrWorkerGlobalScope")}}, permet d'annuler une action répétée minutée initiée via un appel à {{domxref("WindowOrWorkerGlobalScope.setInterval", "setInterval()")}}.</p>
-
-<h2 id="Syntax" name="Syntax">Syntaxe</h2>
-
-<pre class="syntaxbox"><em>scope</em>.clearInterval(<var>intervalID</var>)
-</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>intervalID</code></dt>
- <dd>L'identifiant de l'intervalle de répétition qu'on souhaite annuler. Cet identifiant est renvoyé lorsqu'on appelle <code>setInterval()</code> pour définir l'intervalle de répétition.</dd>
-</dl>
-
-<p>On notera que l'ensemble des identifiants utilisés est commun entre ceux fournis par {{domxref("WindowOrWorkerGlobalScope.setInterval", "setInterval()")}} et ceux fournis par {{domxref("WindowOrWorkerGlobalScope.setTimeout", "setTimeout()")}}. Cela signifie qu'on peut, techniquement, utiliser <code>clearInterval()</code> et {{domxref("WindowOrWorkerGlobalScope.clearTimeout", "clearTimeout()")}} de façon interchangeable. C'est toutefois une mauvaise pratique, qui nuit à la lisibilité du code et à sa maintenabilité.</p>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>{{jsxref("undefined")}}</p>
-
-<h2 id="Example" name="Example">Exemples</h2>
-
-<p>Voir <a href="/fr/docs/Web/API/WindowTimers/setInterval#Exemples" title="DOM/window.setInterval#Example">l'exemple <code>setInterval()</code></a>.</p>
-
-<h2 id="Specification" name="Specification">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', 'webappapis.html#dom-clearinterval', 'WindowOrWorkerGlobalScope.clearInterval()')}}</td>
-   <td>{{Spec2("HTML WHATWG")}}</td>
-   <td>Cette méthode a été déplacée sur le <em>mixin</em> <code>WindowOrWorkerGlobalScope</code>.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', 'webappapis.html#dom-clearinterval', 'clearInterval()')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.WindowOrWorkerGlobalScope.clearInterval")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{domxref("WindowOrWorkerGlobalScope.setTimeout")}}</li>
- <li>{{domxref("WindowOrWorkerGlobalScope.setInterval")}}</li>
- <li>{{domxref("WindowOrWorkerGlobalScope.clearTimeout")}}</li>
- <li>{{domxref("Window.requestAnimationFrame")}}</li>
-</ul>
diff --git a/files/fr/web/api/windoworworkerglobalscope/crossoriginisolated/index.html b/files/fr/web/api/windoworworkerglobalscope/crossoriginisolated/index.html
deleted file mode 100644
index cb7f6948a0..0000000000
--- a/files/fr/web/api/windoworworkerglobalscope/crossoriginisolated/index.html
+++ /dev/null
@@ -1,58 +0,0 @@
----
-title: WindowOrWorkerGlobalScope.crossOriginIsolated
-slug: Web/API/WindowOrWorkerGlobalScope/crossOriginIsolated
-translation_of: Web/API/WindowOrWorkerGlobalScope/crossOriginIsolated
----
-<div>{{APIRef()}}{{SeeCompatTable}}</div>
-
-<p>La propriéte en lecture seule <code><strong>crossOriginIsolated</strong></code> de l'interface {{domxref("WindowOrWorkerGlobalScope")}} retourne une valeur booléenne qui indique si un {{jsxref("SharedArrayBuffer")}} peut être envoyé via un appel à {{domxref("Window.postMessage()")}}.</p>
-
-<p>Cette valeur est dépendante de toute entête {{httpheader("Cross-Origin-Opener-Policy")}} et {{httpheader("Cross-Origin-Embedder-Policy")}} présente dans la réponse.</p>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">var <em>myCrossOriginIsolated</em> = self.crossOriginIsolated; // or just crossOriginIsolated
-</pre>
-
-<h3 id="Valeur">Valeur</h3>
-
-<p>Une valeur booléenne</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<pre class="brush: js">if(crossOriginIsolated) {
-  // Post SharedArrayBuffer
-} else {
-  // Do something else
-}
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName("HTML WHATWG")}}</td>
-   <td></td>
-   <td>Pas encore ajouté à la spécification</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-
-
-<p>{{Compat("api.WindowOrWorkerGlobalScope.crossOriginIsolated")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/en-US/docs/Web/API/ServiceWorker_API">Service Workers</a></li>
- <li><a href="/en-US/docs/Web/API/Web_Workers_API">Web Workers</a></li>
-</ul>
diff --git a/files/fr/web/api/windoworworkerglobalscope/fetch/index.html b/files/fr/web/api/windoworworkerglobalscope/fetch/index.html
deleted file mode 100644
index bb1399ba26..0000000000
--- a/files/fr/web/api/windoworworkerglobalscope/fetch/index.html
+++ /dev/null
@@ -1,193 +0,0 @@
----
-title: GlobalFetch.fetch()
-slug: Web/API/WindowOrWorkerGlobalScope/fetch
-tags:
-  - API
-  - API Fetch
-  - Experimental
-  - Fetch
-  - GlobalFetch
-  - Méthode
-  - Reference
-  - WindowOrWorkerGlobalScope
-  - requête
-translation_of: Web/API/WindowOrWorkerGlobalScope/fetch
----
-<p>{{APIRef("Fetch")}}</p>
-
-<p><span class="seoSummary">La méthode <code><strong>fetch()</strong></code> du mixin {{domxref("WindowOrWorkerGlobalScope")}} démarre le chargement d'une ressource sur le réseau et retourne une promesse qui est résolue dès que la réponse est disponible. La promesse résoud l'objet {{domxref("Response")}} représentant la réponse de votre requête. Cette promesse n'échoue pas en cas d'erreur HTTP, elle n'échoue que sur les problèmes de réseau. Vous devez utiliser un gestionnaire <code>then</code> pour identifier les erreurs HTTP.</span></p>
-
-<p><code>WindowOrWorkerGlobalScope</code> est aussi bien implémenté par {{domxref("Window")}} que par {{domxref("WorkerGlobalScope")}}, ce qui signifie que la méthode <code>fetch()</code> est disponible dans la plupart des cas où vous pourriez en avoir besoin.</p>
-
-<p>Une promesse {{domxref("GlobalFetch.fetch","fetch()")}} n'est rejetée que quand un problème de réseau est rencontré, même si en réalité cela signifie généralement qu'il y a un problème de permissions ou quelque chose de similaire. La promesse ne sera pas rejetée en cas d'erreur HTTP (<code>404</code>, etc.) Pour cela, un gestionnaire <code>then()</code> doit vérifier que la propriété {{domxref("Response.ok")}} ait bien pour valeur <code>true</code> et/ou la valeur de la propriété {{domxref("Response.status")}}.</p>
-
-<p>La méthode <code>fetch()</code> est contrôlée par la directive <code>connect-src</code> de l'entête <a href="/fr/docs/Web/HTTP/Headers/Content-Security-Policy">Content Security Policy</a> plutôt que par la directive de la ressource qui est récupérée.</p>
-
-<div class="note">
-<p>Les paramètres de la méthode <code>fetch()</code> sont identiques à ceux du contructeur d'une {{domxref("Request.Request","Request()")}}.</p>
-</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox notranslate">const <em>fetchResponsePromise</em> = Promise&lt;Response&gt; fetch(<em>entrée</em>[, <em>init</em>]);</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code><em>entrée</em></code></dt>
- <dd>Définit la ressource que vous voulez obtenir. Cela peut être :
- <ul>
-  <li>Un {{domxref("USVString")}} qui contient l'URL de la ressource à obtenir. Certains navigateurs acceptent <code>blob:</code> et <code>data:</code>.</li>
-  <li>Un objet {{domxref("Request")}}.</li>
- </ul>
- </dd>
- <dt><code><em>init</em></code> {{optional_inline}}</dt>
- <dd>
-  <p>Un objet qui contient les paramètres de votre requête. Les options possibles sont :</p>
-
-  <dl>
-    <dt><code>method</code></dt>
-    <dd>La méthode de la requête, par exemple <code>GET</code> ou <code>POST</code>.</dd>
-
-    <dt><code>headers</code></dt>
-    <dd>Les entêtes à ajouter à votre requête, contenues dans un objet {{domxref("Headers")}} ou dans un objet avec des {{domxref("ByteString")}} pour valeurs.</dd>
-
-    <dt><code>body</code></dt>
-    <dd>Le corps de votre requête. Cela peut être un {{domxref("Blob")}}, un {{domxref("BufferSource")}}, un {{domxref("FormData")}}, un {{domxref("URLSearchParams")}}, ou un {{domxref("USVString")}}. Notez cependant qu'une requête avec <code>GET</code> ou <code>HEAD</code> pour méthode ne peut pas avoir de corps.</dd>
-
-    <dt><code>mode</code></dt>
-    <dd>Le mode à utiliser pour cette requête, par exemple <code>cors</code>, <code>no-cors</code>, ou <code>same-origin.</code></dd>
-
-    <dt><code>credentials</code></dt>
-    <dd>Les identifiants à utiliser pour cette requête : <code>omit</code>, <code>same-origin</code>, ou <code>include</code>. Pour envoyer automatiquement les cookies pour le domaine actuel, cette option doit être définie. À partir de Chrome 50, cette propriété peut aussi prendre un objet {{domxref("FederatedCredential")}} ou une instance de {{domxref("PasswordCredential")}}.</dd>
-
-    <dt><code>cache</code></dt>
-    <dd>Le comportement du cache pour cette requête : <code>default</code>, <code>no-store</code>, <code>reload</code>, <code>no-cache</code>, <code>force-cache</code>, ou <code>only-if-cached</code>.</dd>
-
-    <dt><code>redirect</code></dt>
-    <dd>Le mode de redirection à adopter pour cette requête : <code>follow</code> (suivre les redirections automatiquement), <code>error</code> (abandonner avec une erreur si une redirection a lieu), ou <code>manual</code> (gérer les redirections manuellement). Dans Chrome, la valeur par défaut était <code>follow</code> avant Chrome 47, mais à partir de cette version, c'est <code>manual</code>.</dd>
-
-    <dt><code>referrer</code></dt>
-    <dd>Un USVString qui vaut <code>no-referrer</code>, <code>client</code>, ou qui contient une URL. La valeur par défaut est <code>client</code>.</dd>
-
-    <dt><code>referrerPolicy</code></dt>
-    <dd>Spécifie la valeur de l'entête HTTP referer. Cela peut être <code>no-referrer</code>, <code>no-referrer-when-downgrade</code>, <code>origin</code>, <code>origin-when-cross-origin</code> ou <code>unsafe-url</code>.</dd>
-
-    <dt><code>integrity</code></dt>
-    <dd>Contient la valeur de <a href="https://developer.mozilla.org/fr/docs/Web/Security/Subresource_Integrity">l'intégrité de la sous-ressource</a> de la requête (par exemple, <code>sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE=</code>).</dd>
-
-    <dt><code>keepalive</code></dt>
-    <dd>Peut être utilisée pour autoriser la requête à se poursuivre après la fermeture de la page. Une requête avec ce paramètre est équivalente à l'API {{domxref("Navigator.sendBeacon()")}}.</dd>
-
-    <dt><code>signal</code></dt>
-    <dd>Une instance de {{domxref("AbortSignal")}} vous permettant de communiquer avec une requête et de l'interrompre si vous le souhaitez via un {{domxref("AbortController")}}.</dd>
-  </dl>
-</dd>
-</dl>
-
-<h3 id="Valeur_retournée">Valeur retournée</h3>
-
-<p>Une {{domxref("Promise")}} qui se résoud avec un object {{domxref("Response")}}.</p>
-
-<h3 id="Exceptions">Exceptions</h3>
-
-<dl>
- <dt><code>AbortError</code></dt>
- <dd>La requête a été interrompue à cause d'un appel à la méthode {{domxref("AbortController.abort", "abort()")}} de {{domxref("AbortController")}}.</dd>
- <dt><code>TypeError</code></dt>
- <dd>L'URL spécifié inclut des identifiants. Ces informations devraient plutôt être fournises via l'en-tête HTTP {{HTTPHeader("Authorization")}}.</dd>
-</dl>
-
-<h2 id="Exemple">Exemple</h2>
-
-<p>Dans notre <a href="https://github.com/mdn/fetch-examples/tree/gh-pages/fetch-request">exemple de requête avec fetch</a> (voir <a href="http://mdn.github.io/fetch-examples/fetch-request/">cet exemple en direct</a>) nous créons une nouvelle {{domxref("Request")}} avec le constructeur correspondant, puis on l'envoie en appellant <code>fetch()</code>. Comme nous récupérons une image, nous utilisons la méthode {{domxref("Body.blob()")}} sur la réponse pour lui donner le bon type MIME pour qu'elle soit gérée correctement, puis l'on crée l'URL correspondant à cet objet et on l'affiche dans un élément {{htmlelement("img")}}.</p>
-
-<pre class="brush: js notranslate">const monImage = document.querySelector('img');
-
-let maRequete = new Request('fleurs.jpg');
-
-fetch(maRequete)
-.then(function(reponse) {
-  if (!response.ok) {
-    throw new Error(`erreur HTTP! statut: ${reponse.status}`);
-  }
-  return reponse.blob();
-})
-.then(function(reponse) {
-  let URLobjet = URL.createObjectURL(reponse);
-  monImage.src = URLobjet;
-});</pre>
-
-<p>Dans notre <a href="https://github.com/mdn/fetch-examples/tree/gh-pages/fetch-with-init-then-request">exemple fetch avec initialisation et requête</a> (voir <a href="http://mdn.github.io/fetch-examples/fetch-with-init-then-request/">cet exemple en direct</a>) nous faisons la même chose à la différence que nous passons aussi un objet d'initalisation à la méthode <code>fetch</code> :</p>
-
-<pre class="brush: js notranslate">const monImage = document.querySelector('img');
-
-let mesEntetes = new Headers();
-mesEntetes.append('Content-Type', 'image/jpeg');
-
-const monInit = { method: 'GET',
-               headers: mesEntetes,
-               mode: 'cors',
-               cache: 'default' };
-
-let maRequete = new Request('fleurs.jpg');
-
-fetch(maRequete, monInit).then(function(reponse) {
-  ...
-});</pre>
-
-<p>Notez que vous pouvez aussi passer l'objet d'initialisation au constructeur de la requête pour obtenir le même effet, par exemple :</p>
-
-<pre class="brush: js notranslate">let maRequete = new Request('fleurs.jpg', monInit);</pre>
-
-<p>Vous pouvez aussi utiliser un objet litéral comme en-têtes dans votre objet d'initalisation.</p>
-
-<pre class="brush: js notranslate">const monInit = { method: 'GET',
-               headers: {
-                   'Content-Type': 'image/jpeg'
-               },
-               mode: 'cors',
-               cache: 'default' };
-
-let maRequete = new Request('fleurs.jpg', monInit);
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Specification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Fetch','#fetch-method','fetch()')}}</td>
-   <td>{{Spec2('Fetch')}}</td>
-   <td>Définie dans un <code>WindowOrWorkerGlobalScope</code> dans la nouvelle spécification.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('Fetch','#dom-global-fetch','fetch()')}}</td>
-   <td>{{Spec2('Fetch')}}</td>
-   <td>Définition initiale</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('Credential Management')}}</td>
-   <td>{{Spec2('Credential Management')}}</td>
-   <td>Ajoute la possiblité d'utiliser une instance de {{domxref("FederatedCredential")}} ou de {{domxref("PasswordCredential")}} comme valeur de <code>init.credentials</code>.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.WindowOrWorkerGlobalScope.fetch")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/API/Fetch_API">Fetch API</a></li>
- <li><a href="/fr/docs/Web/API/Service_Worker_API">ServiceWorker API</a></li>
- <li><a href="/fr/docs/HTTP/Access_control_CORS">HTTP access control (CORS)</a></li>
- <li><a href="/fr/docs/HTTP">HTTP</a></li>
-</ul>
diff --git a/files/fr/web/api/windoworworkerglobalscope/indexeddb/index.html b/files/fr/web/api/windoworworkerglobalscope/indexeddb/index.html
deleted file mode 100644
index b18f70c21f..0000000000
--- a/files/fr/web/api/windoworworkerglobalscope/indexeddb/index.html
+++ /dev/null
@@ -1,76 +0,0 @@
----
-title: IDBEnvironment.indexedDB
-slug: Web/API/WindowOrWorkerGlobalScope/indexedDB
-tags:
-  - API
-  - IndexedDB
-  - Propriété
-  - Reference
-  - WindowOrWorkerGlobalScope
-translation_of: Web/API/WindowOrWorkerGlobalScope/indexedDB
----
-<div>{{APIRef}}</div>
-
-<p>La propriété <strong><code>indexedDB</code></strong> en lecture seule, rattachée au <em>mixin</em> {{domxref("WindowOrWorkerGlobalScope")}} fournit un mécanisme qui permet aux applications d'accéder aux bases de données indexées de façon asynchrone.</p>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">var <em>IDBFactory</em> = self.indexedDB;</pre>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Un objet {{domxref("IDBFactory")}}.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<pre class="brush: js;highlight:[3]">var db;
-function openDB() {
- var DBOpenRequest = window.indexedDB.open('toDoList');
- DBOpenRequest.onsuccess = function(e) {
-   db = DBOpenRequest.result;
- }
-}</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('IndexedDB 2', '#dom-windoworworkerglobalscope-indexeddb', 'indexedDB')}}</td>
-   <td>{{Spec2('IndexedDB 2')}}</td>
-   <td>Rattachement partiel à <code>WindowOrWorkerGlobalScope</code>.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('IndexedDB', '#widl-IDBEnvironment-indexedDB', 'indexedDB')}}</td>
-   <td>{{Spec2('IndexedDB')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<div>
-<div>
-
-
-<p>{{Compat("api.WindowOrWorkerGlobalScope.indexedDB")}}</p>
-</div>
-</div>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB">Utiliser IndexedDB</a></li>
- <li>Initier une connexion : {{domxref("IDBDatabase")}}</li>
- <li>Utiliser les transactions : {{domxref("IDBTransaction")}}</li>
- <li>Définir un intervalle de clés : {{domxref("IDBKeyRange")}}</li>
- <li>Récupérer et modifier les données : {{domxref("IDBObjectStore")}}</li>
- <li>Utiliser les curseurs {{domxref("IDBCursor")}}</li>
- <li>Exemple de référence : <a class="external" href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a class="external" href="https://mdn.github.io/to-do-notifications/">exemple <em>live</em></a>).</li>
-</ul>
diff --git a/files/fr/web/api/windoworworkerglobalscope/issecurecontext/index.html b/files/fr/web/api/windoworworkerglobalscope/issecurecontext/index.html
deleted file mode 100644
index e7f3c8c1fc..0000000000
--- a/files/fr/web/api/windoworworkerglobalscope/issecurecontext/index.html
+++ /dev/null
@@ -1,46 +0,0 @@
----
-title: WindowOrWorkerGlobalScope.isSecureContext
-slug: Web/API/WindowOrWorkerGlobalScope/isSecureContext
-translation_of: Web/API/WindowOrWorkerGlobalScope/isSecureContext
----
-<p>{{APIRef()}}{{SeeCompatTable}}</p>
-
-<p>La propriété <code><strong>isSecureContext</strong></code> de l'interface {{domxref("WindowOrWorkerGlobalScope")}} retourne un booleen indiquant si le contexte actuel est sécurisé (<code>true</code>) ou pas (<code>false</code>).</p>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">var <em>isItSecure</em> = self.isSecureContext; // ou simplement isSecureContext
-</pre>
-
-<h3 id="Valeur">Valeur</h3>
-
-<p>Un {{domxref("Boolean")}}.</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécifications</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Secure Contexts', '#dom-windoworworkerglobalscope-issecurecontext', 'WindowOrWorkerGlobalScope.isSecureContext')}}</td>
-   <td>{{Spec2('Secure Contexts')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-
-
-<p>{{Compat("api.WindowOrWorkerGlobalScope.isSecureContext")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/en-US/docs/Web/Security/Secure_Contexts">Secure contexts</a></li>
-</ul>
diff --git a/files/fr/web/api/windoworworkerglobalscope/origin/index.html b/files/fr/web/api/windoworworkerglobalscope/origin/index.html
deleted file mode 100644
index e0775b82bd..0000000000
--- a/files/fr/web/api/windoworworkerglobalscope/origin/index.html
+++ /dev/null
@@ -1,50 +0,0 @@
----
-title: WindowOrWorkerGlobalScope.origin
-slug: Web/API/WindowOrWorkerGlobalScope/origin
-translation_of: Web/API/WindowOrWorkerGlobalScope/origin
----
-<p>{{APIRef()}}{{SeeCompatTable}}</p>
-
-<p>La propriété <code><strong>origin</strong></code> de l'interface {{domxref("WindowOrWorkerGlobalScope")}} retourne l'origine du scope global, serialisé en chaîne de caractères.</p>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">var <em>myOrigin</em> = self.origin; // ou simplement origin
-</pre>
-
-<h3 id="Valeur">Valeur</h3>
-
-<p>Une {{domxref("USVString")}}.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<p>Exécuté depuis un worker, le code suivant permet d'afficher en console le scope global de ce worker à chaque message reçu.</p>
-
-<pre class="brush: js">onmessage = function() {
-  console.log(self.origin);
-};</pre>
-
-<p>Si l'origine n'est pas sous la forme scheme/host/port (par exemple, si vous exécutez le code en local, via <code>file://</code>), <code>origin</code> retournera la chaîne de caractère <code>"null"</code>.</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', 'webappapis.html#dom-origin', 'WindowOrWorkerGlobalScope.origin')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-
-
-<p>{{Compat("api.WindowOrWorkerGlobalScope.origin")}}</p>
diff --git a/files/fr/web/api/windoworworkerglobalscope/queuemicrotask/index.html b/files/fr/web/api/windoworworkerglobalscope/queuemicrotask/index.html
deleted file mode 100644
index e07291e3d5..0000000000
--- a/files/fr/web/api/windoworworkerglobalscope/queuemicrotask/index.html
+++ /dev/null
@@ -1,117 +0,0 @@
----
-title: WindowOrWorkerGlobalScope.queueMicrotask()
-slug: Web/API/WindowOrWorkerGlobalScope/queueMicrotask
-tags:
-  - API
-  - Asynchrone
-  - HTML DOM
-  - Intervales
-  - JavaScript
-  - Micro-tâche
-  - Microtask
-  - Minuteurs
-  - Méthode
-  - Performance
-  - ServiceWorker
-  - SharedWorker
-  - Tâches
-  - Window
-  - WindowOrWorkerGlobalScope
-  - Worker
-  - queueMicrotask
-  - setTimeout
-translation_of: Web/API/WindowOrWorkerGlobalScope/queueMicrotask
----
-<div>{{APIRef("HTML DOM")}}</div>
-
-<p><span class="seoSummary">La méthode <code><strong>queueMicrotask()</strong></code>, qui est exposée par {{domxref("Window")}} ou l'interface {{domxref("Worker")}}, met en file d'attente une micro-tâche qui doit être exécutée à un moment sûr avant que le contrôle soit retourné à la boucle d'événement du navigateur.</span> La micro-tâche est une fonction courte qui doit être exécutée après que la tâche actuelle ait terminé son exécution et lorsqu'il n'y a pas d'autre code en attente d'exécution avant que le contrôle du contexte d'exécution soit retourné à la boucle d'événement du navigateur.</p>
-
-<p>Cela permet à votre code de fonctionner sans interférer avec aucun autre code potentiellement à une plus haute priorité en attente, mais avant que le navigateur ne regagne le contrôle du contexte d'exécution, qui dépend potentiellement de la tâche que vous devez effectuer. Vous pouvez en apprendre plus sur comment utiliser les micro-tâches et pourquoi vous devriez le faire dans notre <a href="/en-US/docs/Web/API/HTML_DOM_API/Microtask_guide">microtask guide</a>.</p>
-
-<p>L'importance des micro-tâches vient de leur possibilité d'effectuer des tâches de manière asynchrone mais dans un ordre spécifique. Voir <a href="/en-US/docs/Web/API/HTML_DOM_API/Microtask_guide">Using microtasks in JavaScript with queueMicrotask()</a> pour plus de détails.</p>
-
-<p>Les micro-tâches sont particulièrement utiles pour les librairies et les frameworks qui doivent effectuer un nettoyage final ou d'autres tâches à exécuter avant le rendu.</p>
-
-<p><code>queueMicrotask()</code> est exposé dans la mixin {{domxref("WindowOrWorkerGlobalScope")}}.</p>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><em>scope</em>.queueMicrotask(<em>function</em>);
-</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>function</code></dt>
- <dd>Une {{jsxref("function")}} qui doit être exécutée lorsque le moteur du navigateur détermine qu'il est sûr d'appeler votre code. Les micro-tâches mises en files d'attente sont exécutées après la fin de toutes les tâches en attente mais avant de céder le contrôle à la boucle d'événement du navigateur.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p><code>undefined</code>.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<pre class="brush: js">self.queueMicrotask(() =&gt; {
-  // function contents here
-})</pre>
-
-<p>Tiré de la <a href="https://html.spec.whatwg.org/multipage/timers-and-user-prompts.html#microtask-queuing">spécification de queueMicrotask</a> :</p>
-
-<pre class="brush: js">MyElement.prototype.loadData = function (url) {
-  if (this._cache[url]) {
-    queueMicrotask(() =&gt; {
-      this._setData(this._cache[url]);
-      this.dispatchEvent(new Event("load"));
-    });
-  } else {
-    fetch(url).then(res =&gt; res.arrayBuffer()).then(data =&gt; {
-      this._cache[url] = data;
-      this._setData(data);
-      this.dispatchEvent(new Event("load"));
-    });
-  }
-};</pre>
-
-<h2 id="Lorsque_queueMicrotask_nest_pas_disponible">Lorsque queueMicrotask() n'est pas disponible</h2>
-
-<p>Le code ci-dessous est une prothèse d'émulation (<em>polyfill</em>) pour <code>queueMicrotask()</code>. Il crée une micro-tâche en utilisant une promesse qui se résout immédiatement, et utilise un timeout si la promesse ne peut pas être créée.</p>
-
-<pre class="brush: js">if (typeof window.queueMicrotask !== "function") {
-  window.queueMicrotask = function (callback) {
-    Promise.resolve()
-      .then(callback)
-      .catch(e =&gt; setTimeout(() =&gt; { throw e; }));
-  };
-}
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th>Spécification</th>
-   <th>Statut</th>
-   <th>Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName("HTML WHATWG", "timers-and-user-prompts.html#microtask-queuing", "self.queueMicrotask()")}}</td>
-   <td>{{Spec2("HTML WHATWG")}}</td>
-   <td>Définition initiale</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.WindowOrWorkerGlobalScope.queueMicrotask")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/en-US/docs/Web/API/HTML_DOM_API/Microtask_guide">Using microtasks in JavaScript with queueMicrotask()</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous">Asynchronous JavaScript</a></li>
- <li><a href="https://github.com/fergald/docs/blob/master/explainers/queueMicrotask.md">queueMicrotask explainer</a></li>
- <li><a href="https://jakearchibald.com/2015/tasks-microtasks-queues-and-schedules/">Tasks, microtasks, queues and schedules</a> by Jake Archibald</li>
-</ul>
diff --git a/files/fr/web/api/windoworworkerglobalscope/settimeout/index.html b/files/fr/web/api/windoworworkerglobalscope/settimeout/index.html
deleted file mode 100644
index 6e676f6ebc..0000000000
--- a/files/fr/web/api/windoworworkerglobalscope/settimeout/index.html
+++ /dev/null
@@ -1,360 +0,0 @@
----
-title: WindowOrWorkerGlobalScope.setTimeout()
-slug: Web/API/WindowOrWorkerGlobalScope/setTimeout
-tags:
-  - API
-  - HTML DOM
-  - Méthode
-  - Reference
-translation_of: Web/API/WindowOrWorkerGlobalScope/setTimeout
----
-<div>{{APIRef("HTML DOM")}}</div>
-
-<p>La méthode <strong><code>setTimeout()</code></strong>, rattachée au <em>mixin</em>  {{domxref("WindowOrWorkerGlobalScope")}} (et qui succède à <code>window.setTimeout()</code>) permet de définir un « minuteur » (<em>timer</em>) qui exécute une fonction ou un code donné après la fin du délai indiqué.</p>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><em>var identifiant</em> = <em>scope</em>.setTimeout(<em>fonction</em>[, <em>delai</em>, <em>param1</em>, <em>param2</em>, ...]);
-<em>var</em> <em>identifiant</em> = <em>scope</em>.setTimeout(<em>fonction</em>[, <em>delai</em>]);
-<em>var identifiant</em> = <em>scope</em>.setTimeout(<em>code</em>[, <em>delai</em>]);
-</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>function</code></dt>
- <dd>Une fonction ({{jsxref("function")}}) qui doit être exécuté au déclenchement du minuteur après le temps imparti.</dd>
- <dt><code>code</code></dt>
- <dd>Une chaîne de caractères qui représente le code à exécuter. Cette chaîne est compilée et exécutée à l'expiration du minuteur. Pour des raisons analogues à celles exprimées avec {{jsxref("Objets_globaux/eval", "eval()")}}, cette syntaxe n'est pas <strong>recommandée</strong>.</dd>
- <dt><code>delai</code> {{optional_inline}}</dt>
- <dd>La durée, exprimée en millisecondes, à attendre avant que la fonction indiquée soit exécutée. Par défaut, ce paramètre vaut 0, ce qui signifiie que la fonction est exécutée dès que possible. La durée réelle mesurée avant l'exécution de la fonction peut être supérieure à ce paramètre, voir <a href="#durée">la section ci-après</a>.</dd>
- <dt><code>param1, … , paramN</code> {{optional_inline}}</dt>
- <dd>D'autres paramètres qui seront passés à la fonction une fois que le temps est écoulé.</dd>
-</dl>
-
-<div class="note">
-<p><strong>Note</strong> : La première syntaxe utilisant les paramètres supplémentaires ne fonctionne pas pour Internet Explorer 9 et les versions antérieures. Si vous souhaitez obtenir cette fonctionnalité pour ce navigateur, vous devrez utiliser une prothèse, <a href="#polyfill">voir ci-après</a>.</p>
-</div>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>La valeur renvoyée par la fonction est un entier qui représente un identifiant du minuteur créé par l'appel à <code>setTimeout()</code>. Cet identifiant pourra être passé à la méthode {{domxref("WindowOrWorkerGlobalScope.clearTimeout","clearTimeout()")}} afin d'annuler ce minuteur donné.</p>
-
-<p>Il peut être utile de savoir que <code>setTimeout()</code> et {{domxref("WindowOrWorkerGlobalScope.setInterval", "setInterval()")}} partagent le même ensemble d'identifiants et que  <code>clearTimeout()</code> et {{domxref("WindowOrWorkerGlobalScope.clearInterval", "clearInterval()")}} sont, techniquement, interchangeables. Toutefois pour des raisons de lisibilité et de maintenance, mieux vaut les utiliser par paires plutôt que de les mélanger.</p>
-
-<p>Le moteur d'exécution garantit qu'un identifiant donné ne sera pas réutilisé par un appel ultérieur à <code>setTimeout()</code> ou <code>setInterval()</code> pour un même objet (une fenêtre ou un <em>worker</em>). En revanche, différents objets possèdent chacun leurs ensembles d'identifiants.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<p>Dans l'exemple qui suit, on dispose deux boutons classiques auxquels on associe, via des gestionnaires d'évènements, des fonctions qui utilisent <code>setTimeout()</code> et <code>clearTimeout()</code>. Utiliser le premier bouton déclenchera un minuteur qui affichera une boîte de dialogue après deux secondes. L'identifiant est enregistré à la création du minuteur et on peut annuler le minuteur en cours en appuyant sur le deuxième bouton (dont la fonction associée au gestionnaire d'évènements utilise <code>clearTimeout()</code>).</p>
-
-<h3 id="HTML">HTML</h3>
-
-<pre class="brush: html">&lt;button onclick="delayedAlert();"&gt;
-  Affiche une alerte après deux secondes
-&lt;/button&gt;
-&lt;p&gt;&lt;/p&gt;
-&lt;button onclick="clearAlert();"&gt;
-  Annuler l'alerte avant qu'elle ne se déclenche
-&lt;/button&gt;
-</pre>
-
-<h3 id="JavaScript">JavaScript</h3>
-
-<pre class="brush: js">var timeoutID;
-
-function delayedAlert() {
-  timeoutID = window.setTimeout(slowAlert, 2000);
-}
-
-function slowAlert() {
-  alert("C'était long…");
-}
-
-function clearAlert() {
-  window.clearTimeout(timeoutID);
-}
-</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample('Exemples')}}</p>
-
-<div class="note">
-<p><strong>Note :</strong> Voir aussi les exemples pour <a href="/fr/docs/Web/API/WindowOrWorkerGlobalScope/clearTimeout#Exemples"><code>clearTimeout()</code></a>.</p>
-</div>
-
-<h2 id="Prothèse_d'émulation_(polyfill)"><a name="polyfill">Prothèse d'émulation (<em>polyfill</em>)</a></h2>
-
-<p>S'il vous faut passer un ou plusieurs arguments à la fonction de rappel tout en prenant en charge Internet Explorer 9 et les versions antérieures, vous pouvez utiliser cette prothèse qui ajoute la prise en charge des paramètres additionnels :</p>
-
-<pre class="brush: js">/*\
-|*|
-|*|  Polyfill which enables the passage of arbitrary arguments to the
-|*|  callback functions of JavaScript timers (HTML5 standard syntax).
-|*|
-|*|  https://developer.mozilla.org/en-US/docs/DOM/window.setInterval
-|*|
-\*/
-
-(function() {
-  setTimeout(function(arg1) {
-    if (arg1 === 'test') {
-      // l'argument est passé, pas besoin de prothèse
-      return;
-    }
-    var __nativeST__ = window.setTimeout;
-    window.setTimeout = function(vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */ ) {
-      var aArgs = Array.prototype.slice.call(arguments, 2);
-      return __nativeST__(vCallback instanceof Function ? function() {
-        vCallback.apply(null, aArgs);
-      } : vCallback, nDelay);
-    };
-  }, 0, 'test');
-
-  var interval = setInterval(function(arg1) {
-    clearInterval(interval);
-    if (arg1 === 'test') {
-    // l'argument est passé, pas besoin de prothèse
-      return;
-    }
-    var __nativeSI__ = window.setInterval;
-    window.setInterval = function(vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */ ) {
-      var aArgs = Array.prototype.slice.call(arguments, 2);
-      return __nativeSI__(vCallback instanceof Function ? function() {
-        vCallback.apply(null, aArgs);
-      } : vCallback, nDelay);
-    };
-  }, 0, 'test');
-}())
-</pre>
-
-<h3 id="Correctif_ciblé_sur_IE">Correctif ciblé sur IE</h3>
-
-<p>Si vous souhaitez ne cibler que IE 9 et antérieurs, vous pouvez utiliser les commentaires conditionnels JavaScript :</p>
-
-<pre class="brush: js">/*@cc_on
-  // conditional IE &lt; 9 only fix
-  @if (@_jscript_version &lt;= 9)
-  (function(f){
-     window.setTimeout = f(window.setTimeout);
-     window.setInterval = f(window.setInterval);
-  })(function(f){return function(c,t){var a=[].slice.call(arguments,2);return f(function(){c instanceof Function?c.apply(this,a):eval(c)},t)}});
-  @end
-@*/
-</pre>
-
-<p>Ou plutôt les commentaires conditionnels HTML :</p>
-
-<pre class="brush: html">&lt;!--[if lte IE 9]&gt;&lt;script&gt;
-(function(f){
-window.setTimeout=f(window.setTimeout);
-window.setInterval=f(window.setInterval);
-})(function(f){return function(c,t){
-var a=[].slice.call(arguments,2);return f(function(){c instanceof Function?c.apply(this,a):eval(c)},t)}
-});
-&lt;/script&gt;&lt;![endif]--&gt;
-</pre>
-
-<h3 id="Autres_méthodes_de_contournement">Autres méthodes de contournement</h3>
-
-<p>Vous pouvez également utiliser une fonction anonyme comme fonction de rappel (<em>callback</em>) :</p>
-
-<pre class="brush: js">var intervalID = setTimeout(function() {
-  maFonction('un', 'deux', 'trois');
-  }, 1000);
-</pre>
-
-<p>Voici une réécriture de l'exemple précédent avec <a href="/fr/docs/Web/JavaScript/Reference/Fonctions/Fonctions_fl%C3%A9ch%C3%A9es">les fonctions fléchées</a> :</p>
-
-<pre class="brush: js">var intervalID = setTimeout(() =&gt; {
-  maFonction('un', 'deux', 'trois');
-  }, 1000);
-</pre>
-
-<p>On peut également utiliser {{jsxref("Function.prototype.bind()")}} :</p>
-
-<pre class="brush: js">setTimeout(function(arg1){}.bind(undefined, 10), 1000);
-</pre>
-
-<h2 id="Le_problème_«_this_»">Le problème « <code>this</code> »</h2>
-
-<p>Lorsqu'on passe une fonction à <code>setTimeout()</code>, cette fonction peut être appelée avec une valeur <code>this</code> qui n'est pas celle qu'on attend. Ce problème est expliqué en détails dans la référence JavaScript<a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_this#Dans_le_contexte_d'une_fonction">JavaScript reference</a>.</p>
-
-<h3 id="Explications">Explications</h3>
-
-<p>Le code exécuté par <code>setTimeout()</code> est appelé dans un contexte d'exécution différent de celui de la fonction où <code>setTimeout</code> a été appelé. Les règles usuelles pour la détermination de <code>this</code> s'appliquent : si <code>this</code> n'est pas défini lors de l'appel ou avec <code>bind</code>, la valeur par défaut sera l'objet global (<code>global</code> ou <code>window</code>) en mode non-strict ou {{jsxref("undefined")}} en mode strict. Aussi, le <code>this</code> utilisé par la fonction de rappel ne sera pas le même <code>this</code> que celui utilisé par la fonction ayant appelé <code>setTimeout</code>.</p>
-
-<div class="note">
-<p><strong>Note :</strong> La valeur par défaut pour <code>this</code>, lors de l'utilisation d'une fonction de rappel par <code>setTimeout</code> sera toujours l'objet <code>window</code> et pas la valeur <code>undefined</code>, même en mode strict.</p>
-</div>
-
-<p>Par exemple :</p>
-
-<pre class="brush: js">monTableau = ['zéro', 'un', 'deux'];
-monTableau.maMéthode = function (sPropriété) {
-    console.log(arguments.length &gt; 0 ? this[sPropriété] : this);
-};
-
-monTableau.maMéthode();  // affichera "zéro,un,deux" dans la console
-monTableau.maMéthode(1); // affichera "un"</pre>
-
-<p>Le code qui précède fonctionne car lorsque <code>maMéthode</code> est appelée, <code>this</code> correspond à <code>monTableau</code> et qu'au sein de <code>maMéthode</code>, <code>this[sPropriété]</code> correspond alors à <code>monTableau[sPropriété]</code>. Toutefois, avec :</p>
-
-<pre class="brush: js">setTimeout(monTableau.maMéthode, 1000);
-// affiche "[object Window]" après 1 seconde
-setTimeout(monTableau.maMéthode, 1500, '1');
-// affiche "undefined" après 1.5 seconde</pre>
-
-<p>La fonction <code>monTableau.maMéthode</code> est pasée à <code>setTimeout</code> et, lorsqu'elle est appelée, <code>this</code> n'est pas défini et le moteur utilise la valeur par défaut : <code>window</code>. Il n'y apas d'option qui permettent de passer une valeur  <code>thisArg</code> à <code>setTimeout()</code> comme on peut le faire avec {{jsxref("Array.prototype.forEach()")}} ou {{jsxref("Array.prototype.reduce()")}} par exemple. Aussi, utiliser <code>call()</code> afin de définir <code>this</code> ne fonctionnera pas non plus.</p>
-
-<pre class="brush: js">setTimeout.call(monTableau, monTableau.maMéthode, 2000);
-// error: "NS_ERROR_XPC_BAD_OP_ON_WN_PROTO: Illegal operation on WrappedNative prototype object"
-setTimeout.call(monTableau, monTableau.maMéthode, 2500, 2);
-// même erreur
-</pre>
-
-<h3 id="Solutions_éventuelles">Solutions éventuelles</h3>
-
-<p class="note"><strong>Note</strong>: JavaScript 1.8.5 introduced the <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind">Function.prototype.bind()</a></code> method to set the value of <code>this</code> for all calls to a given function. This can avoid having to use a wrapper function to set the value of <code>this</code> in a callback.</p>
-
-<p>Exemple d'utilisation :</p>
-
-<pre class="brush: js">var monTableau = ['zéro', 'un', 'deux'];
-var maMéthodeLiée = (function (sPropriété) {
-  console.log(arguments.length &gt; 0 ? this[sPropriété] : this);
-}).bind(monTableau);
-
-
-maMéthodeLiée(); // affiche "zéro,un,deux"
-maMéthodeLiée(1); // affiche "un"
-setTimeout(maMéthodeLiée, 1000);
-// affiche "zéro,un,deux" après une seconde
-setTimeout(maMéthodeLiée, 1500, "1");
-// affiche "un" après 1.5 seconde
-</pre>
-
-<h2 id="Notes">Notes</h2>
-
-<p>Les minuteurs peuvent être annulés avec {{domxref("WindowOrWorkerGlobalScope.clearTimeout","clearTimeout()")}}. Si on souhaite appeler une fonction de façon répétée, on utilisera plutôt {{domxref("WindowOrWorkerGlobalScope.setInterval()","setInterval()")}}.</p>
-
-<h3 id="Utiliser_des_chaînes_pour_le_code_plutôt_que_des_fonctions">Utiliser des chaînes pour le code plutôt que des fonctions</h3>
-
-<p>Passer une chaîne de caractères pour le code à exécuter, plutôt qu'une fonction, souffre des mêmes dangers que {{jsxref("Objets_globaux/eval","eval()")}}.</p>
-
-<pre class="brush: js">// Recommandé
-window.setTimeout(function() {
-    console.log('Coucou monde !');
-}, 500);
-
-// Non recommandé
-window.setTimeout("console.log('Coucou monde !');", 500);
-</pre>
-
-<p>Une chaîne de caractères passée à <code>setTimeout</code> sera évaluée dans le contexte global. Aussi, les symboles locaux au contexte de l'appel de <code>setTimeout()</code> ne seront pas accessibles au code présent dans la chaîne de caractères lors de son évaluation.</p>
-
-<h3 id="Durée_plus_longue_que_le_paramètre_indiquée"><a id="durée" name="durée">Durée plus longue que le paramètre indiquée</a></h3>
-
-<p>Plusieurs raisons peuvent expliquer une durée réelle plus longue que le délai passé en argument. Voici les plus fréquentes.</p>
-
-<h4 id="Précision_minimale_à_4ms">Précision minimale à 4ms</h4>
-
-<p>Dans les navigateurs récents les appels à <code>setTimeout()/</code>{{domxref("WindowOrworkerGlobalScope.setInterval","setInterval()")}} possèdent au plus une précision de 4ms lorsque plusieurs appels imbriqués sont réalisés. Par exemple :</p>
-
-<pre class="brush: js" id="ct-0">function cb() { f(); setTimeout(cb, 0); }
-setTimeout(cb, 0);</pre>
-
-<pre class="brush: js">setInterval(f, 0);</pre>
-
-<p>Pour Chrome et Firefox, la limitation est active à partir du cinquième appel de fonction de rappel,  Safari active la limitation à partir du sixième et Edge à partir du troisième. Gecko traite <code>setInterval()</code> de la même façon depuis la <a href="/fr/docs/Mozilla/Firefox/Releases/56">version 56</a>.</p>
-
-<p><a class="external" href="http://code.google.com/p/chromium/issues/detail?id=792#c10">Par le passé</a>, certains navigateurs implémentaient cette limite différemment (pour les appels à <code>setInterval()</code> quelle que soit leur provenance ou lorsqu'un appel <code>setTimeout()</code> était imbriqué dans un autre pour un certain nombre de niveaux d'imbrication.</p>
-
-<p>Pour implémenter un minuteur de 0ms, on pourra utiliser {{domxref("window.postMessage()")}}.</p>
-
-<div class="note">
-<p><strong>Note </strong>: Le délai minimal est géré dans Firefox via une préférence : <code>dom.min_timeout_value</code>.</p>
-</div>
-
-<div class="note">
-<p><strong>Note</strong> : Cette durée de 4 ms est <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/timers.html#timers">définie dans la spécification HTML5</a> et est la même dans l'ensemble des navigateurs à partir de 2010. Avant {{geckoRelease("5.0")}}, la valeur minimale pour les appels imbriqués était 10ms.</p>
-</div>
-
-<h4 id="Précision_minimale_des_minuteurs_pour_les_onglets_inactifs_plus_de_1000ms">Précision minimale des minuteurs pour les onglets inactifs : plus de 1000ms</h4>
-
-<p>Afin de réduire la charge (ainsi que la consommation d'énergie associée) des onglets en arrière-plan, les minuteurs ne sont déclenchés au maximum qu'une fois par seconde pour les onglets inactifs.</p>
-
-<p>Firefox implémente ce comportement depuis Firefox 5 (cf.  {{bug(633421)}}) et la valeur du seuil de 1000ms peut être paramétrée via la préférence <span class="comment-copy"><code>dom.min_background_timeout_value</code>.</span> Chrome implémente ce comportement depuis la version 11 (<a class="external" href="http://crbug.com/66078">crbug.com/66078</a>).</p>
-
-<p>Firefox pour Android utilise un minimum de 15 minutes depuis Firefox 14 (cf.  {{bug(736602)}}) et les onglets en arrière-plan peuvent être déchargés complètement.</p>
-
-<div class="note">
-<p><strong>Note :</strong> Firefox 50 ne limite plus la réactivité des onglets en arrière-plan si un contexte Web Audio API {{domxref("AudioContext")}} joue un son. Firefox 51 élargit le spectre en supprimant la limitation si un objet {{domxref("AudioContext")}} est présent dans l'onglet, même sans jouer de son. Cela a permis de résoudre différents problèmes avec certaines applications qui jouent de la musique en arrière-plan.</p>
-</div>
-
-<h4 id="Limitation_des_minuteurs_pour_les_scripts_de_pistage">Limitation des minuteurs pour les scripts de pistage</h4>
-
-<p>Depuis Firefox 55, les scripts de pistage (par exemple Google Analytics) (c'est-à-dire que toute URL que Firefox reconnaît comme appartenant à un domaine de pistage via <a href="https://wiki.mozilla.org/Security/Tracking_protection#Lists">la liste TP</a>) ont une limitation plus forte. En premier plan la limitation est toujours de 4ms mais pour les onglets en arrière-plan, la limite est à 10000ms une fois que 30 secondes se sont écoulées après le premier chargement du document.</p>
-
-<p>Ces seuils peuvent être gérés via les préférences :</p>
-
-<ul>
- <li><code>dom.min_tracking_timeout_value</code> : 4</li>
- <li><code>dom.min_tracking_background_timeout_value</code> : 10000</li>
- <li><code>dom.timeout.tracking_throttling_delay</code> : 30000</li>
-</ul>
-
-<h4 id="Minuteurs_en_retard">Minuteurs en retard</h4>
-
-<p>En plus de ces limitations, le minuteur peut être déclenché plus tard si le navigateur ou le système d'opération est occupé sur d'autres tâches. On notera particulièrement que la fonction de rappel n'est pas exécutée tant que le <em>thread</em> du script n'a pas terminé. Par exemple :</p>
-
-<pre class="brush: js">function toto() {
-  console.log('appel de toto');
-}
-setTimeout(toto, 0);
-console.log('Après setTimeout');</pre>
-
-<p>affichera, dans la console :</p>
-
-<pre class="brush: js">Après setTimeout
-appel de toto</pre>
-
-<p>Ici, même si <code>setTimeout</code> a été appelé avec un délai nul, la fonction de rappel est placée dans la queue et est planifiée pour être exécutée dès que possible : ce qui n'est pas « immédiatement ». Le code courant doit finir d'être exécuté afin que les appels dans la queue puissent être dépilés.</p>
-
-<h3 id="Valeur_de_délai_maximale">Valeur de délai maximale</h3>
-
-<p>Les navigateurs que sont Internet Explorer, Chrome, Safari et Firefox stockent, en interne, la valeur du délai comme un entier sur 32 bits signé. Il y a donc un dépassement de borne si le délai est supérieur à 2147483647 millisecondes, ce qui correspond à 24.8 days. Si une telle valeur (supérieure à ce seuil) est utilisée, le minuteur est déclenché dès que possible.</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th>Spécification</th>
-   <th>État</th>
-   <th>Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', 'webappapis.html#dom-settimeout', 'WindowOrWorkerGlobalScope.setTimeout()')}}</td>
-   <td>{{Spec2("HTML WHATWG")}}</td>
-   <td>Déplacement de la méthode sur le <em>mixin</em> <code>WindowOrWorkerGlobalScope</code> dans la dernière spécification.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName("HTML WHATWG", "webappapis.html#dom-settimeout", "WindowTimers.setTimeout()")}}</td>
-   <td>{{Spec2("HTML WHATWG")}}</td>
-   <td>Définition initiale (<em>DOM Level 0</em>)</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.WindowOrWorkerGlobalScope.setTimeout")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{domxref("WindowOrWorkerGlobalScope.clearTimeout")}}</li>
- <li>{{domxref("WindowOrWorkerGlobalScope.setInterval")}}</li>
- <li>{{domxref("window.requestAnimationFrame")}}</li>
-</ul>
diff --git a/files/fr/web/css/@media/index.html b/files/fr/web/css/@media/index.html
index 7a67bea0bb..bc94ddbaf3 100644
--- a/files/fr/web/css/@media/index.html
+++ b/files/fr/web/css/@media/index.html
@@ -1,29 +1,22 @@
 ---
 title: '@media'
 slug: Web/CSS/@media
-tags:
-  - CSS
-  - Reference
-  - Règle @
+browser-compat: css.at-rules.media
 translation_of: Web/CSS/@media
 ---
 <div>{{CSSRef}}</div>
 
-<p>La <a href="/fr/docs/Web/CSS/R%C3%A8gles_@">règle @</a> <strong><code>@media</code></strong> permet d'associer un ensemble d'instructions imbriquées (délimité par des accolades) avec une condition définie par une <a href="/fr/docs/Web/CSS/Media_queries">requête média</a>. La règle <code>@media</code> peut être utilisé au niveau le plus haut de la feuille de style et également <a href="/fr/docs/Web/CSS/Règles_@#Les_règles_de_groupe_conditionnelles">à l'intérieur d'un groupe de règles conditionnel</a>.</p>
+<p>La <a href="/fr/docs/Web/CSS/At-rule">règle @</a> <strong><code>@media</code></strong> permet d'appliquer une partie d'une feuille de styles en fonction du résultat d'une ou plusieurs <a href="/fr/docs/Web/CSS/Media_Queries">requêtes média (<i lang="en">media queries</i>)</a>. Grâce à cette règle, on peut indiquer une requête média et un ensemble de règles CSS qui s'appliquent uniquement si la requête média est vérifiée pour l'appareil, le contexte avec lequel le contenu est consulté.</p>
 
-<pre class="brush: css no-line-numbers">@media (max-width: 600px) {
-  .sidebar {
-    display: none;
-  }
-}</pre>
-
-<p>Il est possible de manipuler la règle @ <code>@media</code> via le CSSOM (et JavaScript) notamment grâce à l'interface {{domxref("CSSMediaRule")}}.</p>
+<div class="note">
+  <p><strong>Note :</strong> Il est possible de manipuler la règle @ <code>@media</code> via le CSSOM (et JavaScript) grâce à l'interface <a href="/fr/docs/Web/API/CSSMediaRule"><code>CSSMediaRule</code></a>.</p>
+</div>
 
-<h2 id="Syntaxe">Syntaxe</h2>
+<h2 id="syntax">Syntaxe</h2>
 
-<p>Une requête média (type <code>&lt;media-query&gt;</code>) est composée d'un type de média (optionnel) et/ou de différentes caractéristiques relatives au média. Une requête média peut être imbriquée dans une autre <a href="/fr/docs/Web/CSS/Règles_@#Les_règles_de_groupe_conditionnelles">règle conditionnelle</a>.</p>
+<p>Une requête média (type <code>&lt;media-query&gt;</code>) est composée d'un type de média (optionnel) et/ou de différentes caractéristiques relatives au média. Une requête média peut être imbriquée dans une autre <a href="/fr/docs/Web/CSS/At-rule#les_r%c3%a8gles_de_groupe_conditionnelles">règle conditionnelle</a>.</p>
 
-<pre class="brush: css no-line-numbers">/* Au niveau le plus haut du code */
+<pre class="brush: css">/* Au niveau le plus haut du code */
 @media screen and (min-width: 900px) {
   article {
     padding: 1rem 3rem;
@@ -40,17 +33,37 @@ translation_of: Web/CSS/@media
 }
 </pre>
 
-<p>Pour plus d'informations sur la syntaxe des requêtes média, voir <a href="/fr/docs/Web/CSS/Requêtes_média/Utiliser_les_Media_queries">Utiliser les requêtes média</a>.</p>
+<p>Pour plus d'informations sur la syntaxe des requêtes média, voir <a href="/fr/docs/Web/CSS/Media_Queries/Using_media_queries">Utiliser les requêtes média</a>.</p>
+
+<h2 id="description">Description</h2>
+
+<h3 id="media_types">Types de média</h3>
+
+<p>{{page("/fr/docs/Web/CSS/Media_Queries/Using_media_queries","media_types")}}</p>
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+<h3 id="media_features">Caractéristiques de média</h3>
 
-{{csssyntax}}
+<p>{{page("/fr/docs/Web/CSS/Media_Queries/Using_media_queries","media_features")}}</p>
 
-<h2 id="Les_caractéristiques_média">Les caractéristiques média</h2>
+<h2 id="accessibility_concerns">Accessibilité</h2>
 
-<p>{{page("/fr/docs/Web/CSS/Requêtes_média/Utiliser_les_Media_queries","Caractéristiques_média_(media_features)")}}</p>
+<p>Pour une meilleure interaction, notamment avec les personnes qui zooment sur une page pour accroître la taille du texte ou qui définissent une taille de police par défaut pour l'ensemble du navigateur, on utilisera l'unité <code><a href="/fr/docs/Web/CSS/length#em">em</a></code> comme valeur pour <a href="/fr/docs/Web/CSS/Media_Queries/Using_media_queries">les requêtes média</a> lorsqu'il faut utiliser une longueur (<a href="/fr/docs/Web/CSS/&lt;length&gt;"><code>&lt;length&gt;</code></a>).</p>
 
-<h2 id="Exemples">Exemples</h2>
+<p>Les unités <code><a href="/fr/docs/Learn/CSS/Building_blocks/Values_and_units#longueur_et_taille">em</a></code> et <code><a href="/fr/docs/Learn/CSS/Building_blocks/Values_and_units#longueur_et_taille">px</a></code> sont toutes les deux valides mais <code><a href="/fr/docs/Learn/CSS/Building_blocks/Values_and_units#longueur_et_taille">em</a></code> s'adapte mieux quand la taille de la police du navigateur a été ajustée.</p>
+
+<p>On privilégiera, autant que possible, les requêtes média de la spécification de niveau 4 afin d'améliorer l'ergonomie. On pourra, par exemple, se baser sur <a href="/fr/docs/Web/CSS/@media/prefers-reduced-motion"><code>prefers-reduced-motion</code> afin de détecter si l'utilisateur souhaite minimiser les animations ou les déplacements</a>.</p>
+
+<h2 id="security">Sécurité</h2>
+
+<p>Les requêtes média fournissent des informations quant aux capacités de l'appareil avec lequel on navigue. L'ensemble de ces capacités peut être détourné afin de construire une empreinte qui identifie l'appareil ou le catégorise de façon non-désirée.</p>
+
+<p>Pour ces raisons, un navigateur peut choisir de mentir sur les valeurs renvoyées afin de contourner ce pistage. Ainsi, si la détection d'empreinte numérique est désactivée dans Firefox, la plupart des caractéristiques média renverront leurs valeurs par défaut afin d'éviter leur utilisation pour du pistage.</p>
+
+<h3 id="formal_syntax">Syntaxe formelle</h3>
+
+<p>{{csssyntax}}</p>
+
+<h2 id="examples">Exemples</h2>
 
 <pre class="brush: css">@media print {
   body { font-size: 10pt }
@@ -81,73 +94,19 @@ translation_of: Web/CSS/@media
 }
 </pre>
 
-<p>Pour plus d'exemples, voir <a href="/fr/docs/Web/CSS/Requêtes_média/Utiliser_les_Media_queries">Utiliser les requêtes média</a>.</p>
+<p>Pour plus d'exemples, voir <a href="/fr/docs/Web/CSS/Media_Queries/Using_media_queries">Utiliser les requêtes média</a>.</p>
 
-<h2 id="Accessibilité">Accessibilité</h2>
+<h2 id="specifications">Spécifications</h2>
 
-<p>Pour une meilleure interaction, notamment avec les personnes qui zooment sur une page pour accroître la taille du texte ou qui définissent une taille de police par défaut pour l'ensemble du navigateur, on utilisera l'unité <code><a href="/fr/docs/Web/CSS/length#em">em</a></code> comme valeur pour <a href="/fr/docs/Web/CSS/Requêtes_média/Utiliser_les_Media_queries">les requêtes média</a> lorsqu'il faut utiliser une longueur ({{cssxref("&lt;length&gt;")}}).</p>
+<p>{{Specifications}}</p>
 
-<p>Les unités <code><a href="/fr/Apprendre/CSS/Introduction_à_CSS/Values_and_units#Longueur_et_taille">em</a></code> et <code><a href="/fr/Apprendre/CSS/Introduction_à_CSS/Values_and_units#Longueur_et_taille">px</a></code> sont toutes les deux valides mais <code><a href="/fr/Apprendre/CSS/Introduction_à_CSS/Values_and_units#Longueur_et_taille">em</a></code> s'adapte mieux quand la taille de la police du navigateur a été ajustée.</p>
+<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
 
-<p>On privilégiera, autant que possible, les requêtes média de la spécification de niveau 4 afin d'améliorer l'ergonomie. On pourra, par exemple, se baser sur <a href="/fr/docs/Web/CSS/@media/prefers-reduced-motion"><code>prefers-reduced-motion</code> afin de détecter si l'utilisateur souhaite minimiser les animations ou les déplacements</a>.</p>
-
-<h2 id="Sécurité">Sécurité</h2>
-
-<p>Les requêtes média fournissent des informations quant aux capacités de l'appareil avec lequel on navigue. L'ensemble de ces capacités peut être détourné afin de construire une empreinte qui identifie l'appareil ou le catégorise de façon indésirée.</p>
-
-<p>Pour ces raisons, un navigateur peut choisir de mentir sur les valeurs renvoyées afin de contourner ce pistage. Ainsi, si la détection d'empreinte numérique est désactivée dans Firefox, la plupart des caractéristiques média renverront leurs valeurs par défaut afin d'éviter leur utilisation pour du pistage.</p>
+<p>{{Compat}}</p>
 
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Commentaires</th>
-   <th scope="col">Retours</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS5 Media Queries', '#at-media5', '@media')}}</td>
-   <td>Réintègre <code>light-level</code>, <code>inverted-colors</code> et les requêtes média personnalisées qui avaient été retirées la spécification de niveau 4.<br>
-    Ajout des caractéristiques média <code>prefers-reduced-motion</code>, <code>prefers-reduced-transparency</code>, <code>prefers-contrast</code> et <code>prefers-color-scheme</code>.</td>
-   <td><a href="https://github.com/w3c/csswg-drafts/issues"><em>Issues</em> GitHub pour les brouillons du groupe de travail CSS (en anglais)</a></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Conditional', '#at-media', '@media')}}</td>
-   <td>Définition de la syntaxe de base pour la règle <code>@media</code>.</td>
-   <td><a href="https://github.com/w3c/csswg-drafts/issues"><em>Issues</em> GitHub pour les brouillons du groupe de travail CSS (en anglais)</a></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS4 Media Queries', '#media', '@media')}}</td>
-   <td>
-    <p>Ajout des caractéristiques média <code>scripting</code>, <code>pointer</code>, <code>hover</code>, <code>update</code>, <code>overflow-block</code> et <code>overflow-inline</code>.<br>
-     Dépréciation de l'ensemble des types de média à l'exception de <code>screen</code>, <code>print</code>, <code>speech</code> et <code>all</code>.<br>
-     La syntaxe est rendue plus flexible avec l'ajout (entre autres) du mot-clé <code>or</code>.</p>
-   </td>
-   <td><a href="https://github.com/w3c/csswg-drafts/issues"><em>Issues</em> GitHub pour les brouillons du groupe de travail CSS (en anglais)</a></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Media Queries', '#media0', '@media')}}</td>
-   <td></td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS2.1', 'media.html#at-media-rule', '@media')}}</td>
-   <td>Définition initiale.</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.at-rules.media")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
+<h2 id="see_also">Voir aussi</h2>
 
 <ul>
- <li><a href="/fr/docs/Web/CSS/Media_queries">Les requêtes média</a></li>
- <li>L'interface CSSOM {{domxref("CSSMediaRule")}} qui est associée avec cette règle @.</li>
+  <li><a href="/fr/docs/Web/CSS/Media_Queries/Using_media_queries">Utiliser les requêtes média</a></li>
+ <li>L'interface CSSOM <a href="/fr/docs/Web/API/CSSMediaRule"><code>CSSMediaRule</code></a> qui est associée avec cette règle @.</li>
 </ul>
diff --git a/files/fr/web/css/css_background_and_borders/border-image_generator/index.html b/files/fr/web/css/css_background_and_borders/border-image_generator/index.html
deleted file mode 100644
index c0c5db61cd..0000000000
--- a/files/fr/web/css/css_background_and_borders/border-image_generator/index.html
+++ /dev/null
@@ -1,2627 +0,0 @@
----
-title: Générateur de border-image
-slug: Web/CSS/CSS_Background_and_Borders/Border-image_generator
-tags:
-  - CSS
-  - Outil
-translation_of: Web/CSS/CSS_Background_and_Borders/Border-image_generator
-original_slug: Web/CSS/Arrière-plans_et_bordures_CSS/Générateur_border-image
----
-<p>Cet outil peut être utilisé afin de générer des valeurs pour la propriété {{cssxref("border-image")}}.</p>
-
-<div class="hidden">
-<h2 id="Border_Image_Generator" name="Border_Image_Generator">Générateur border-image</h2>
-
-<h3 id="Contenu_HTML">Contenu HTML</h3>
-
-<pre class="brush: html">    &lt;div id="container"&gt;
-
-        &lt;div id="gallery"&gt;
-            &lt;div id="image-gallery"&gt;
-                &lt;img class="image" src="https://mdn.mozillademos.org/files/6007/border-image-1.png" data-stateID="border1"/&gt;
-                &lt;img class="image" src="https://mdn.mozillademos.org/files/6009/border-image-2.png" data-stateID="border2"/&gt;
-                &lt;img class="image" src="https://mdn.mozillademos.org/files/6011/border-image-3.png" data-stateID="border3"/&gt;
-                &lt;img class="image" src="https://mdn.mozillademos.org/files/6013/border-image-4.png" data-stateID="border4"/&gt;
-                &lt;img class="image" src="https://mdn.mozillademos.org/files/6015/border-image-5.png" data-stateID="border5"/&gt;
-                &lt;img class="image" src="https://mdn.mozillademos.org/files/6017/border-image-6.svg" data-stateID="border6"/&gt;
-            &lt;/div&gt;
-        &lt;/div&gt;
-
-        &lt;div id="load-actions" class="group section"&gt;
-            &lt;div id="toggle-gallery" data-action="hide"&gt; &lt;/div&gt;
-            &lt;div id="load-image" class="button"&gt; Upload image &lt;/div&gt;
-            &lt;input id="remote-url" type="text" placeholder="Charger une image depuis une  URL"/&gt;
-            &lt;div id="load-remote" class="button"&gt; &lt;/div&gt;
-        &lt;/div&gt;
-
-        &lt;div id="general-controls" class="group section"&gt;
-            &lt;div class="name"&gt; Options &lt;/div&gt;
-            &lt;div class="separator"&gt;&lt;/div&gt;
-            &lt;div class="property"&gt;
-                &lt;div class="name"&gt;Échelle&lt;/div&gt;
-                &lt;div class="ui-input-slider" data-topic="scale"
-                    data-unit="%" data-max="300" data-sensivity="10"&gt;
-                &lt;/div&gt;
-            &lt;/div&gt;
-            &lt;div class="separator"&gt;&lt;/div&gt;
-            &lt;div class="property"&gt;
-                &lt;div class="name"&gt;Déplaçable&lt;/div&gt;
-                &lt;div class="ui-checkbox" data-topic='drag-subject'&gt;&lt;/div&gt;
-            &lt;/div&gt;
-            &lt;div class="property right"&gt;
-                &lt;div class="name"&gt;Hauteur de la section&lt;/div&gt;
-                &lt;div class="ui-input-slider" data-topic="preview-area-height"
-                    data-min="400" data-max="1000"&gt;
-                &lt;/div&gt;
-            &lt;/div&gt;
-        &lt;/div&gt;
-
-        &lt;div id="preview_section" class="group section"&gt;
-            &lt;div id="subject"&gt;
-                &lt;div class="guideline" data-axis="Y" data-topic="slice-top"&gt;&lt;/div&gt;
-                &lt;div class="guideline" data-axis="X" data-topic="slice-right"&gt;&lt;/div&gt;
-                &lt;div class="guideline" data-axis="Y" data-topic="slice-bottom"&gt;&lt;/div&gt;
-                &lt;div class="guideline" data-axis="X" data-topic="slice-left"&gt;&lt;/div&gt;
-            &lt;/div&gt;
-            &lt;div id="preview"&gt; &lt;/div&gt;
-        &lt;/div&gt;
-
-        &lt;!-- controls --&gt;
-        &lt;div id="controls" class="group section"&gt;
-
-            &lt;!-- border-image-slice --&gt;
-            &lt;div id="border-slice-control" class="category"&gt;
-                &lt;div class="title"&gt; border-image-slice &lt;/div&gt;
-                &lt;div class="property"&gt;
-                    &lt;div class="name"&gt;fill&lt;/div&gt;
-                    &lt;div class="ui-checkbox" data-topic='slice-fill'&gt;&lt;/div&gt;
-                &lt;/div&gt;
-            &lt;/div&gt;
-
-            &lt;!-- border-image-width --&gt;
-            &lt;div id="border-width-control" class="category"&gt;
-                &lt;div class="title"&gt; border-image-width &lt;/div&gt;
-            &lt;/div&gt;
-
-            &lt;!-- border-image-outset --&gt;
-            &lt;div id="border-outset-control" class="category"&gt;
-                &lt;div class="title"&gt; border-image-outset &lt;/div&gt;
-            &lt;/div&gt;
-
-            &lt;!-- other-settings --&gt;
-            &lt;div id="aditional-properties" class="category"&gt;
-                &lt;div class="title"&gt; Autres propriétés &lt;/div&gt;
-                &lt;div class="property"&gt;
-                    &lt;div class="name"&gt; repeat-x &lt;/div&gt;
-                    &lt;div class="ui-dropdown border-repeat" data-topic="image-repeat-X" data-selected="2"&gt;
-                        &lt;div data-value="0"&gt;repeat&lt;/div&gt;
-                        &lt;div data-value="0"&gt;stretch&lt;/div&gt;
-                        &lt;div data-value="0"&gt;round&lt;/div&gt;
-                    &lt;/div&gt;
-                &lt;/div&gt;
-                &lt;div class="property"&gt;
-                    &lt;div class="name"&gt; repeat-y &lt;/div&gt;
-                    &lt;div class="ui-dropdown border-repeat" data-topic="image-repeat-Y" data-selected="2"&gt;
-                        &lt;div data-value="1"&gt;repeat&lt;/div&gt;
-                        &lt;div data-value="1"&gt;stretch&lt;/div&gt;
-                        &lt;div data-value="1"&gt;round&lt;/div&gt;
-                    &lt;/div&gt;
-                &lt;/div&gt;
-                &lt;div class="property"&gt;
-                    &lt;div class="ui-input-slider" data-topic="font-size" data-info="em size"
-                        data-unit="px" data-value="12" data-sensivity="3"&gt;
-                    &lt;/div&gt;
-                &lt;/div&gt;
-
-                &lt;div class="property"&gt;
-                    &lt;div class="ui-input-slider" data-topic="preview-width" data-info="width"
-                         data-unit=" px" data-min="10" data-max="10000" data-sensivity="3"&gt;&lt;/div&gt;
-                &lt;/div&gt;
-                &lt;div class="property"&gt;
-                    &lt;div class="ui-input-slider" data-topic="preview-height" data-info="height"
-                        data-unit=" px" data-min="10" data-max="10000" data-sensivity="3"&gt;
-                    &lt;/div&gt;
-                &lt;/div&gt;
-            &lt;/div&gt;
-
-
-            &lt;div id="output" class="category"&gt;
-                &lt;div class="title"&gt; Code CSS &lt;/div&gt;
-                &lt;div class="css-property"&gt;
-                    &lt;span class="name"&gt; border-image-slice: &lt;/span&gt;
-                    &lt;span id="out-border-slice" class="value"&gt; &lt;/span&gt;
-                &lt;/div&gt;
-                &lt;div class="css-property"&gt;
-                    &lt;span class="name"&gt; border-image-width: &lt;/span&gt;
-                    &lt;span id="out-border-width" class="value"&gt; &lt;/span&gt;
-                &lt;/div&gt;
-                &lt;div class="css-property"&gt;
-                    &lt;span class="name"&gt; border-image-outset: &lt;/span&gt;
-                    &lt;span id="out-border-outset" class="value"&gt; &lt;/span&gt;
-                &lt;/div&gt;
-                &lt;div class="css-property"&gt;
-                    &lt;span class="name"&gt; border-image-repeat: &lt;/span&gt;
-                    &lt;span id="out-border-repeat" class="value"&gt; &lt;/span&gt;
-                &lt;/div&gt;
-                &lt;div class="css-property"&gt;
-                    &lt;span class="name"&gt; border-image-source: &lt;/span&gt;
-                    &lt;span id="out-border-source" class="value"&gt;  &lt;/span&gt;
-                &lt;/div&gt;
-            &lt;/div&gt;
-
-        &lt;/div&gt;
-    &lt;/div&gt;</pre>
-
-<h3 id="CSS_Content">CSS Content</h3>
-
-<pre class="brush: css">/*  GRID OF TWELVE
- * ========================================================================== */
-
-.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 {
-	height: 20px;
-	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
-	-moz-user-select: none;
-	user-select: none;
-}
-
-.ui-input-slider * {
-	float: left;
-	height: 100%;
-	line-height: 100%;
-}
-
-/* Input Slider */
-
-.ui-input-slider &gt; 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 DropDown
- */
-
-/* Dropdown */
-
-.ui-dropdown {
-	height: 2em;
-	width: 120px;
-	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
-	font-size: 12px;
-
-	background-image: url("https://mdn.mozillademos.org/files/6037/drop_arrow_icon.png");
-	background-position: right center;
-	background-repeat: no-repeat;
-	background-color: #359740;
-
-	position: relative;
-
-	-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;
-}
-
-.ui-dropdown:hover {
-	cursor: pointer;
-	background-color: #208B20;
-}
-
-/* Dropdown Select Button */
-
-.ui-dropdown-select {
-	height: inherit;
-	padding: 0 0.75em;
-	color: #FFF;
-	line-height: 2em;
-}
-
-/* Dropdown List */
-
-.ui-dropdown-list {
-	width: 100%;
-	height: 150px;
-	max-height: 150px;
-	margin: 0;
-	padding: 0 0.3em;
-
-	border: 3px solid #3490D2;
-	border-color: #208B20;
-	background: #666;
-	background-color: #EEF1F5;
-	color: #000;
-
-	position: absolute;
-	top: 2em;
-	left: 0;
-	z-index: 100;
-
-	overflow: hidden;
-	transition: all 0.3s;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-}
-
-.ui-dropdown-list:hover {
-	overflow: auto;
-}
-
-.ui-dropdown-list[data-hidden='true'] {
-	height: 0 !important;
-	opacity: 0;
-	visibility: hidden;
-}
-
-.ui-dropdown[data-position='left'] .ui-dropdown-list {
-	left: -100%;
-	top: 0;
-}
-
-.ui-dropdown[data-position='right'] .ui-dropdown-list {
-	left: 100%;
-	top: 0;
-}
-
-.ui-dropdown-list &gt; div {
-	width: 100%;
-	height: 1.6em;
-	margin: 0.3em 0;
-	padding: 0.3em;
-	line-height: 1em;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-}
-
-.ui-dropdown-list &gt; div:hover {
-	background: #3490D2;
-	color:#FFF;
-	border-radius: 2px;
-	cursor: pointer;
-}
-
-
-/*************************************************************************************/
-/*************************************************************************************/
-
-/*
- * UI Button
- */
-
-/* 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 &gt; input {
- 	display: none;
-}
-
-.ui-checkbox &gt; 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: 2px;
-	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 &gt; label:hover {
-	cursor: pointer;
-}
-
-.ui-checkbox &gt; input:checked + label {
-	background-image: url("https://mdn.mozillademos.org/files/5681/checked.png");
-	background-color: #379B4A;
-}
-
-/*************************************************************************************/
-/*************************************************************************************/
-
-/*
- * BORDER IMAGE GENERATOR TOOL
- */
-
-body {
-	width: 100%;
-	margin: 0 auto;
-	padding: 0 0 20px 0;
-
-	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
-
-	/*background: url("https://mdn.mozillademos.org/files/6025/grain.png");*/
-	border: 1px solid #EEE;
-
-	-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;
-}
-
-body[data-move='X'] {
-	cursor: w-resize !important;
-}
-
-body[data-move='Y'] {
-	cursor: s-resize !important;
-}
-
-#container {
-	width: 100%;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-}
-
-[data-draggable='true']:hover {
-	cursor: move;
-}
-
-[data-draggable='true']:hover &gt; * {
-	cursor: default;
-}
-
-
-
-/******************************************************************************/
-/******************************************************************************/
-
-/*
- * Border Image Picker
- */
-
-#gallery {
-	box-shadow: 0 0 3px 0 #BABABA;
-}
-
-#image-gallery {
-	width: 600px;
-	height: 100px;
-	margin: 0 auto;
-	transition: margin 0.4s;
-}
-
-#image-gallery .image {
-	height: 80px;
-	float: left;
-	margin: 10px;
-	opacity: 0.5;
-	background-color: #FFF;
-	box-shadow: 0px 0px 3px 1px #BABABA;
-}
-
-#image-gallery .image[selected="true"] {
-	box-shadow: 0px 0px 3px 1px #3BBA52;
-	opacity: 1;
-}
-
-#image-gallery .image:hover {
-	cursor: pointer;
-	box-shadow: 0px 0px 3px 1px #30ACE5;
-	opacity: 1;
-}
-
-#image-gallery[data-collapsed='true'] {
-	margin-top: -100px;
-}
-
-/* Load Menu */
-
-#load-actions {
-	margin: 10px 0;
-}
-
-#toggle-gallery {
-	width: 30px;
-	height: 25px;
-	margin: 10px;
-	color: #FFF;
-
-	background-image: url('https://mdn.mozillademos.org/files/6005/arrow-up-white.png');
-	background-repeat: no-repeat;
-	background-position: top 4px center;
-	background-color: #888888 !important;
-
-	border-radius: 2px;
-	float: left;
-}
-
-#toggle-gallery:hover {
-	cursor: pointer;
-}
-
-#toggle-gallery[data-action='show'] {
-	background-image: url('https://mdn.mozillademos.org/files/6001/arrow-down-white.png');
-	background-color: #888888 !important;
-}
-
-#toggle-gallery[data-action='hide'] {
-	background-image: url('https://mdn.mozillademos.org/files/6005/arrow-up-white.png');
-}
-
-.button {
-	width: 100px;
-	height: 25px;
-	margin: 10px;
-	color: #FFF;
-	text-align: center;
-	font-size: 12px;
-	line-height: 25px;
-	background-color: #379B4A;
-	border-radius: 2px;
-	float: left;
-}
-
-.button:hover {
-	cursor: pointer;
-	background-color: #3380C4;
-}
-
-#load-image {
-	float: left;
-}
-
-#load-remote {
-	width: 30px;
-	background-image: url('https://mdn.mozillademos.org/files/6003/arrow-right-white.png');
-	background-repeat: no-repeat;
-	background-position: center center;
-}
-
-#remote-url {
-	width: 200px;
-	height: 23px;
-	margin: 10px;
-	padding: 0 5px;
-	border: 1px solid #379B4A;
-	border-radius: 2px;
-	float: left;
-
-	transition: width 0.5s;
-}
-
-#remote-url:focus {
-	box-shadow: 0px 0px 3px -1px #379B4A; /*#68ACE8; */
-	border-color: rgba(55, 155, 74, 0.5);
-	width: 450px;
-}
-
-/*
- * Visible Area
- */
-
-#preview_section {
-	position: relative;
-	min-height: 400px;
-}
-
-/* Image Control */
-
-#subject {
-	width: 300px;
-	height: 300px;
-	background-repeat: no-repeat;
-	background-size: 100%;
-	background-color: #FFF;
-	border: 1px solid #CCC;
-
-	position: absolute;
-	z-index: 10;
-	top: 15%;
-	left: 10%;
-
-	box-shadow: 0 0 3px 0 #BABABA;
-	transition-property: width, height;
-	transition-duration: 0.1s;
-}
-
-#subject .guideline {
-	background-color: rgba(255, 255, 255, 0.7);
-	border: 1px solid rgba(0, 0, 0, 0.3);
-	position: absolute;
-}
-
-#subject .guideline:hover {
-	background-color: #F00;
-}
-
-#subject .guideline[data-active] {
-	background-color: #F00;
-	z-index: 10;
-}
-
-#subject .guideline[data-axis='X'] {
-	width: 1px;
-	height: 100%;
-	top: -1px;
-}
-
-#subject .guideline[data-axis='Y'] {
-	width: 100%;
-	height: 1px;
-	left: -1px;
-}
-
-#subject .guideline[data-axis='X']:hover {
-	cursor: w-resize;
-}
-
-#subject .guideline[data-axis='Y']:hover {
-	cursor: s-resize;
-}
-
-
-#subject .relative {
-	position: relative;
-	font-size: 12px;
-}
-
-#subject .tooltip, #subject .tooltip2 {
-	width: 40px;
-	height: 20px;
-	line-height: 20px;
-	font-size: 12px;
-	text-align: center;
-
-	position: absolute;
-	opacity: 0.5;
-	transition: opacity 0.25s;
-}
-
-#subject .tooltip {
-	background: #EEE;
-	border-radius: 2px;
-	border: 1px solid #CCC;
-}
-
-#subject .tooltip2{
-	color: #555;
-}
-
-#subject [data-active] &gt; * {
-	opacity: 1;
-}
-
-#subject .tooltip[data-info='top'] {
-	top: -10px;
-	right: -50px;
-}
-
-#subject .tooltip[data-info='right'] {
-	bottom: -30px;
-	right: -20px;
-}
-
-#subject .tooltip[data-info='bottom'] {
-	top: -10px;
-	left: -50px;
-}
-
-#subject .tooltip[data-info='left'] {
-	top: -30px;
-	right: -20px;
-}
-
-#subject .tooltip2[data-info='top'] {
-	top: -10px;
-	left: -50px;
-}
-
-#subject .tooltip2[data-info='right'] {
-	top: -30px;
-	right: -20px;
-}
-
-#subject .tooltip2[data-info='bottom'] {
-	top: -10px;
-	right: -50px;
-}
-
-#subject .tooltip2[data-info='left'] {
-	bottom: -30px;
-	right: -20px;
-}
-
-/* Preview */
-
-#preview {
-	width: 30%;
-	height: 50%;
-	background-color: #FFF;
-	text-align: center;
-	overflow: hidden;
-	position: absolute;
-	z-index: 10;
-
-	left: 60%;
-	top: 15%;
-
-	border-radius: 2px;
-	border-image-width: 20px;
-	border-image-repeat: round;
-	box-shadow: 0 0 3px 0 #BABABA;
-}
-
-#preview .resize-handle {
-	width: 10px;
-	height: 10px;
-	background: url("https://mdn.mozillademos.org/files/6027/resize.png") center center no-repeat;
-	position: absolute;
-	bottom: 0;
-	right: 0;
-}
-
-#preview .resize-handle:hover {
-	cursor: nw-resize;
-}
-
-
-/*
- * General controls MENU
- */
-
-#general-controls {
-	padding: 10px 30px;
-	background-color: #FFF;
-	opacity: 0.95;
-	color: #888;
-	/*border-radius: 2px;*/
-	box-shadow: 0 0 3px 0 #BABABA;
-}
-
-#general-controls .property {
-	width: 130px;
-	float: left;
-}
-
-#general-controls .name {
-	height: 20px;
-	margin: 0 10px 0 0;
-	line-height: 100%;
-	text-align: right;
-	float: left;
-}
-
-#general-controls .right {
-	width: 200px;
-	float: right;
-}
-
-#general-controls .ui-checkbox label {
-	height: 10px;
-}
-
-#general-controls .separator {
-	height: 40px;
-	width: 1px;
-	margin: -10px 15px;
-	background-color: #EEE;
-	float: left;
-}
-
-/*
- * Controls
- */
-
-#controls {
-	color: #444;
-	margin: 10px 0 0 0;
-}
-
-#controls .category {
-	height: 190px;
-	min-width: 260px;
-	margin: 10px;
-	padding: 10px;
-	border: 1px solid #CCC;
-	border-radius: 3px;
-	float: left;
-
-	box-shadow: 0 0 3px 0 #BABABA;
-	transition: all 0.25s;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-}
-
-@media (min-width: 880px) {
-	#controls .category {
-		width: 30%;
-		margin-left: 1.66%;
-		margin-right: 1.66%;
-	}
-}
-
-@media (max-width: 879px) {
-	#controls .category {
-		width: 37%;
-		margin-left: 6.5%;
-		margin-right: 6.5%;
-	}
-}
-
-#controls .category .title {
-	width: 100%;
-	height: 30px;
-	margin: 0 0 10px 0;
-	line-height: 25px;
-
-	text-align: center;
-	color: #AAA;
-}
-
-#controls .category:hover .title {
-	color: #777;
-}
-
-#controls .category &gt; .group {
-	border: 1px solid #CCC;
-	border-radius: 2px;
-}
-
-
-/* property */
-
-#controls .property {
-	width: 250px;
-	height: 20px;
-	margin: 5px auto;
-}
-
-#controls .property .ui-input-slider {
-	margin: 0;
-	float: left;
-}
-
-#controls .property .ui-input-slider-info {
-	width: 60px;
-}
-
-#controls .property .ui-input-slider-left {
-	transition: opacity 0.15s;
-    opacity: 0;
-}
-
-#controls .property .ui-input-slider-right {
-	transition: opacity 0.15s;
-    opacity: 0;
-}
-
-#controls .property .name {
-	width: 60px;
-	height: 20px;
-	padding: 0px 10px 0px 0px;
-	text-align: right;
-	line-height: 100%;
-	float: left;
-}
-
-#controls .property .config {
-	width: 20px;
-	height: 20px;
-	float: left;
-	background: url("https://mdn.mozillademos.org/files/6021/config.png") center center no-repeat;
-	opacity: 0.5;
-}
-
-#controls .property .config:hover {
-	cursor: pointer;
-	opacity: 1;
-}
-
-#controls .ui-input-slider:hover .ui-input-slider-right {
-    opacity: 1;
-}
-
-#controls .ui-input-slider:hover .ui-input-slider-left {
-    opacity: 1;
-}
-
-#controls .property .ui-dropdown {
-	margin: 0 10px;
-	float: left;
-}
-
-
-#controls .property .ui-checkbox {
-	margin: 0 0 0 16px;
-	float: left;
-}
-
-#controls .property .ui-checkbox label {
-	height: 0.85em;
-	width: 10px;
-}
-
-/* dropdowns */
-#controls .ui-dropdown {
-	width: 50px;
-	height: 1.7em;
-	border-radius: 2px;
-}
-
-#controls .ui-dropdown-select {
-	line-height: 1.6em;
-}
-
-#controls .ui-dropdown-list {
-	top: 20px;
-}
-
-#controls .ui-dropdown-list {
-	border-width: 1px;
-	text-align: center;
-}
-
-#controls .ui-dropdown-list:hover {
-	overflow: hidden;
-}
-
-#controls .border-repeat {
-	margin: 0 0 0 16px !important;
-	width: 80px;
-}
-
-#controls .border-repeat .ui-dropdown-list {
-	height: 6.2em;
-	border-width: 1px;
-	text-align: center;
-}
-
-/* border-image-slice */
-
-
-#border-slice-control .ui-dropdown-list {
-	height: 4.3em;
-}
-
-/* border-image-width */
-
-#border-width-control .ui-dropdown-list {
-	height: 6.2em;
-}
-
-/* border-image-outset */
-
-#border-outset-control .ui-dropdown-list {
-	height: 4.3em;
-}
-
-#aditional-properties .property {
-	width: 200px;
-}
-
-#aditional-properties .ui-input-slider &gt; input {
-	width: 80px !important;
-}
-
-/* unit settings panel */
-
-#unit-settings {
-	padding: 10px;
-	position: absolute;
-
-	background: #FFF;
-
-	font-size: 12px;
-	border-radius: 3px;
-	border: 1px solid #CCC;
-	text-align: center;
-	color: #555;
-
-	position: absolute;
-	z-index: 1000;
-
-	box-shadow: 0 0 3px 0 #BABABA;
-	transition: all 0.25s;
-}
-
-#unit-settings .title {
-	width: 100%;
-	margin: -5px auto 0;
-
-	color: #666;
-	font-size: 14px;
-	font-weight: bold;
-	line-height: 25px;
-	border-bottom: 1px solid #E5E5E5;
-}
-
-#unit-settings .ui-input-slider {
-	margin: 10px 0 0 0;
-}
-
-#unit-settings .ui-input-slider-info {
-	width: 50px;
-	line-height: 1.5em;
-}
-
-#unit-settings input {
-	font-size: 12px;
-	width: 40px !important;
-}
-
-#unit-settings .close {
-	width: 16px;
-	height: 16px;
-	background: url('https://mdn.mozillademos.org/files/6019/close.png') no-repeat center center;
-	background-size: 75%;
-
-	position: absolute;
-	top: 4px;
-	right: 4px;
-	opacity: 0.5;
-}
-
-#unit-settings .close:hover {
-	cursor: pointer;
-	opacity: 1;
-}
-
-#unit-settings[data-active='true'] {
-	opacity: 1;
-}
-
-#unit-settings[data-active='false'] {
-	opacity: 0;
-	top: -100px !important;
-}
-
-/*
- * CSS Output Code
- */
-
-#output {
-	padding: 10px;
-	border: 2px dashed #888 !important;
-	box-shadow: none !important;
-	border-radius: 3px;
-	overflow: hidden;
-
-	-moz-user-select: text;
-	-webkit-user-select: text;
-	-ms-user-select: text;
-	user-select: text;
-}
-
-
-@media (min-width: 880px) {
-	#output {
-		width: 63.33% !important;
-	}
-}
-
-@media (max-width: 879px) {
-	#output {
-		width: 87% !important;
-	}
-}
-
-
-#output .title {
-	width: 100%;
-	height: 30px;
-	margin: 0 0 10px 0;
-	line-height: 25px;
-
-	text-align: center;
-	color: #AAA;
-}
-
-#output .css-property {
-	width: 100%;
-	margin: 0;
-	color: #555;
-	font-size: 14px;
-	line-height: 18px;
-	float: left;
-}
-
-#output .css-property .name {
-	width: 30%;
-	font-weight: bold;
-	text-align: right;
-	float: left;
-}
-
-#output .css-property .value {
-	width: 65%;
-	padding: 0 2.5%;
-	word-break: break-all;
-	float: left;
-}
-
-</pre>
-
-<h3 id="JavaScript_Content">JavaScript Content</h3>
-
-<pre class="brush: js">'use strict';
-
-/**
- * UI-SlidersManager
- */
-
-var InputSliderManager = (function InputSliderManager() {
-
-	var subscribers = {};
-	var sliders = [];
-
-	var InputComponent = function InputComponent(obj) {
-		var input = document.createElement('input');
-		input.setAttribute('type', 'text');
-		input.style.width = 50 + obj.precision * 10 + 'px';
-
-		input.addEventListener('click', function(e) {
-			this.select();
-		});
-
-		input.addEventListener('change', function(e) {
-			var value = parseFloat(e.target.value);
-
-			if (isNaN(value) === true)
-				setValue(obj.topic, obj.value);
-			else
-				setValue(obj.topic, value);
-		});
-
-		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) {
-			document.removeEventListener("mousemove", sliderMotion);
-			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("mouseup", slideEnd);
-			document.addEventListener("mousemove", sliderMotion);
-		});
-
-		var slideEnd = function slideEnd(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		= parseFloat(node.getAttribute('data-min'));
-		var max		= parseFloat(node.getAttribute('data-max'));
-		var step	= parseFloat(node.getAttribute('data-step'));
-		var value	= parseFloat(node.getAttribute('data-value'));
-		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;
-		var precision = node.getAttribute('data-precision') | 0;
-
-		this.min = isNaN(min) ? 0 : min;
-		this.max = isNaN(max) ? 100 : max;
-		this.precision = precision &gt;= 0 ? precision : 0;
-		this.step = step &lt; 0 || isNaN(step) ? 1 : step.toFixed(precision);
-		this.topic = topic;
-		this.node = node;
-		this.unit = unit === null ? '' : unit;
-		this.sensivity = sensivity &gt; 0 ? sensivity : 5;
-		value = isNaN(value) ? this.min : value;
-
-		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);
-
-		this.input = input;
-		sliders[topic] = this;
-		setValue(topic, value);
-	};
-
-	InputSlider.prototype.setInputValue = function setInputValue() {
-		this.input.value = this.value.toFixed(this.precision) + this.unit;
-	};
-
-	var setValue = function setValue(topic, value, send_notify) {
-		var slider = sliders[topic];
-		if (slider === undefined)
-			return;
-
-		value = parseFloat(value.toFixed(slider.precision));
-
-		if (value &gt; slider.max) value = slider.max;
-		if (value &lt; slider.min)	value = slider.min;
-
-		slider.value = value;
-		slider.node.setAttribute('data-value', value);
-
-		slider.setInputValue();
-
-		if (send_notify === false)
-			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 setStep = function setStep(topic, value) {
-		var slider = sliders[topic];
-		if (slider === undefined)
-			return;
-
-		slider.step = parseFloat(value);
-		setValue(topic, slider.value);
-	};
-
-	var setPrecision = function setPrecision(topic, value) {
-		var slider = sliders[topic];
-		if (slider === undefined)
-			return;
-
-		value = value | 0;
-		slider.precision = value;
-
-		var step = parseFloat(slider.step.toFixed(value));
-		if (step === 0)
-			slider.step = 1 / Math.pow(10, value);
-
-		setValue(topic, slider.value);
-	};
-
-	var setSensivity = function setSensivity(topic, value) {
-		var slider = sliders[topic];
-		if (slider === undefined)
-			return;
-
-		value = value | 0;
-
-		slider.sensivity = value &gt; 0 ? value : 5;
-	};
-
-	var getNode =  function getNode(topic) {
-		return sliders[topic].node;
-	};
-
-	var getPrecision =  function getPrecision(topic) {
-		return sliders[topic].precision;
-	};
-
-	var getStep =  function getStep(topic) {
-		return sliders[topic].step;
-	};
-
-	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() {
-		if (subscribers[this.topic] === undefined)
-			return;
-		for (var i = 0; i &lt; subscribers[this.topic].length; i++)
-			subscribers[this.topic][i](this.value);
-	};
-
-	var createSlider = function createSlider(topic, label) {
-		var slider = document.createElement('div');
-		slider.className = 'ui-input-slider';
-		slider.setAttribute('data-topic', topic);
-
-		if (label !== undefined)
-			slider.setAttribute('data-info', label);
-
-		new InputSlider(slider);
-		return slider;
-	};
-
-	var init = function init() {
-		var elem = document.querySelectorAll('.ui-input-slider');
-		var size = elem.length;
-		for (var i = 0; i &lt; size; i++)
-			new InputSlider(elem[i]);
-	};
-
-	return {
-		init : init,
-		setMax : setMax,
-		setMin : setMin,
-		setUnit : setUnit,
-		setStep : setStep,
-		getNode : getNode,
-		getStep : getStep,
-		setValue : setValue,
-		subscribe : subscribe,
-		unsubscribe : unsubscribe,
-		setPrecision : setPrecision,
-		setSensivity : setSensivity,
-		getPrecision : getPrecision,
-		createSlider : createSlider,
-	};
-
-})();
-
-
-/**
- * UI-DropDown Select
- */
-
-var DropDownManager = (function DropdownManager() {
-
-	var subscribers = {};
-	var dropdowns = [];
-	var active = null;
-
-	var visbility = ["hidden", "visible"];
-
-
-	var DropDown = function DropDown(node) {
-		var topic = node.getAttribute('data-topic');
-		var label = node.getAttribute('data-label');
-		var selected = node.getAttribute('data-selected') | 0;
-
-		var select = document.createElement('div');
-		var list = document.createElement('div');
-		var uval = 0;
-		var option = null;
-		var option_value = null;
-
-		list.className = 'ui-dropdown-list';
-		select.className = 'ui-dropdown-select';
-
-		while (node.firstElementChild !== null) {
-			option = node.firstElementChild;
-			option_value = option.getAttribute('data-value');
-
-			if (option_value === null)
-				option.setAttribute('data-value', uval);
-
-			list.appendChild(node.firstElementChild);
-			uval++;
-		}
-
-		node.appendChild(select);
-		node.appendChild(list);
-
-		select.onclick = this.toggle.bind(this);
-		list.onclick = this.updateValue.bind(this);
-		document.addEventListener('click', clickOut);
-
-		this.state = 0;
-		this.time = 0;
-		this.dropmenu = list;
-		this.select = select;
-		this.toggle(false);
-		this.value = {};
-		this.topic = topic;
-
-		if (label)
-			select.textContent = label;
-		else
-			this.setNodeValue(list.children[selected]);
-
-		dropdowns[topic] = this;
-
-	};
-
-	DropDown.prototype.toggle = function toggle(state) {
-		if (typeof(state) === 'boolean')
-			this.state = state === false ? 0 : 1;
-		else
-			this.state = 1 ^ this.state;
-
-		if (active !== this) {
-			if (active)
-				active.toggle(false);
-			active = this;
-		}
-
-		if (this.state === 0)
-			this.dropmenu.setAttribute('data-hidden', 'true');
-		else
-			this.dropmenu.removeAttribute('data-hidden');
-
-	};
-
-	var clickOut = function clickOut(e) {
-		if (active.state === 0 ||
-			e.target === active.dropmenu ||
-			e.target === active.select)
-			return;
-
-		active.toggle(false);
-	};
-
-	DropDown.prototype.updateValue = function updateValue(e) {
-
-		if (Date.now() - this.time &lt; 500)
-			return;
-
-		if (e.target.className !== "ui-dropdown-list") {
-			this.setNodeValue(e.target);
-			this.toggle(false);
-		}
-
-		this.time = Date.now();
-	};
-
-	DropDown.prototype.setNodeValue = function setNodeValue(node) {
-		this.value['name'] = node.textContent;
-		this.value['value'] = node.getAttribute('data-value');
-
-		this.select.textContent = node.textContent;
-		this.select.setAttribute('data-value', this.value['value']);
-
-		notify.call(this);
-	};
-
-	var createDropDown = function createDropDown(topic, options) {
-
-		var dropdown = document.createElement('div');
-		dropdown.setAttribute('data-topic', topic);
-		dropdown.className = 'ui-dropdown';
-
-		for (var i in options) {
-			var x = document.createElement('div');
-			x.setAttribute('data-value', i);
-			x.textContent = options[i];
-			dropdown.appendChild(x);
-		}
-
-		new DropDown(dropdown);
-
-		return dropdown;
-	};
-
-	var setValue = function setValue(topic, index) {
-		if (dropdowns[topic] === undefined ||
-			index &gt;= dropdowns[topic].dropmenu.children.length)
-			return;
-
-		dropdowns[topic].setNodeValue(dropdowns[topic].dropmenu.children[index]);
-	};
-
-	var subscribe = function subscribe(topic, callback) {
-		if (subscribers[topic] === undefined)
-			subscribers[topic] = [];
-		subscribers[topic].push(callback);
-	};
-
-	var unsubscribe = function unsubscribe(topic, callback) {
-		var index = subscribers[topic].indexOf(callback);
-		subscribers[topic].splice(index, 1);
-	};
-
-	var notify = function notify() {
-		if (subscribers[this.topic] === undefined)
-			return;
-
-		for (var i in subscribers[this.topic]) {
-			subscribers[this.topic][i](this.value);
-		}
-	};
-
-	var init = function init() {
-		var elem, size;
-
-		elem = document.querySelectorAll('.ui-dropdown');
-		size = elem.length;
-		for (var i = 0; i &lt; size; i++)
-			new DropDown(elem[i]);
-
-	};
-
-	return {
-		init : init,
-		setValue : setValue,
-		subscribe : subscribe,
-		unsubscribe : unsubscribe,
-		createDropDown : createDropDown
-	};
-
-})();
-
-
-/**
- * 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) {
-		var obj = buttons[topic];
-		if (obj === undefined)
-			return;
-
-		obj.checkbox.checked = value;
-		notify.call(obj);
-	};
-
-	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() {
-		if (subscribers[this.topic] === undefined)
-			return;
-		for (var i = 0; i &lt; 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 &lt; size; i++)
-			new CheckBox(elem[i]);
-	};
-
-	return {
-		init : init,
-		setValue : setValue,
-		subscribe : subscribe,
-		unsubscribe : unsubscribe
-	};
-
-})();
-
-window.addEventListener("load", function() {
-	BorderImage.init();
-});
-
-var BorderImage = (function BorderImage() {
-
-	var getElemById = document.getElementById.bind(document);
-
-	var subject;
-	var preview;
-	var guidelines = [];
-	var positions = ['top', 'right', 'bottom', 'left'];
-
-	var makeDraggable = function makeDraggable(elem) {
-
-		var offsetTop;
-		var offsetLeft;
-
-		elem.setAttribute('data-draggable', 'true');
-
-		var dragStart = function dragStart(e) {
-			if (e.target.getAttribute('data-draggable') !== 'true' ||
-				e.target !== elem || e.button !== 0)
-				return;
-
-			offsetLeft = e.clientX - elem.offsetLeft;
-			offsetTop = e.clientY - elem.offsetTop;
-
-			document.addEventListener('mousemove', mouseDrag);
-			document.addEventListener('mouseup', dragEnd);
-		};
-
-		var dragEnd = function dragEnd(e) {
-			if (e.button !== 0)
-				return;
-
-			document.removeEventListener('mousemove', mouseDrag);
-			document.removeEventListener('mouseup', dragEnd);
-		};
-
-		var mouseDrag = function mouseDrag(e) {
-
-			elem.style.left = e.clientX - offsetLeft + 'px';
-			elem.style.top = e.clientY - offsetTop + 'px';
-		};
-
-		elem.addEventListener('mousedown', dragStart, false);
-	};
-
-	var PreviewControl = function PreviewControl() {
-
-		var dragging = false;
-		var valueX = null;
-		var valueY = null;
-
-		var dragStart = function dragStart(e) {
-			if (e.button !== 0)
-				return;
-
-			valueX = e.clientX - preview.clientWidth;
-			valueY = e.clientY - preview.clientHeight;
-			dragging = true;
-
-			document.addEventListener('mousemove', mouseDrag);
-		};
-
-		var dragEnd = function dragEnd(e) {
-			if (e.button !== 0 || dragging === false)
-				return;
-
-			document.removeEventListener('mousemove', mouseDrag);
-			dragging = false;
-		};
-
-		var mouseDrag = function mouseDrag(e) {
-			InputSliderManager.setValue('preview-width', e.clientX - valueX);
-			InputSliderManager.setValue('preview-height', e.clientY - valueY);
-		};
-
-		var init = function init() {
-
-			makeDraggable(preview);
-			makeDraggable(subject);
-
-			var handle = document.createElement('div');
-			handle.className = 'resize-handle';
-
-			handle.addEventListener('mousedown', dragStart);
-			document.addEventListener('mouseup', dragEnd);
-
-			preview.appendChild(handle);
-
-		};
-
-		return {
-			init: init
-		};
-
-	}();
-
-	var ImageReader = (function ImageReader() {
-
-		var fReader = new FileReader();
-		var browse = document.createElement('input');
-
-		var loadImage = function loadImage(e) {
-			if (browse.files.length === 0)
-				return;
-
-			var file = browse.files[0];
-
-			if (file.type.slice(0, 5) !== 'image')
-				return;
-
-			fReader.readAsDataURL(file);
-
-			return false;
-		};
-
-		fReader.onload = function(e) {
-			ImageControl.loadRemoteImage(e.target.result);
-		};
-
-		var load = function load() {
-			browse.click();
-		};
-
-		browse.setAttribute('type', 'file');
-		browse.style.display = 'none';
-		browse.onchange = loadImage;
-
-		return {
-			load: load
-		};
-
-	})();
-
-	var ImageControl = (function ImageControl() {
-
-		var scale = 0.5;
-		var imgSource = new Image();
-		var imgState = null;
-		var selected = null;
-
-
-		var topics = ['slice', 'width', 'outset'];
-		var properties = {};
-		properties['border1'] = {
-			fill			: false,
-
-			slice_values	: [27, 27, 27, 27],
-			width_values	: [20, 20, 20, 20],
-			outset_values	: [0, 0, 0, 0],
-
-			slice_units		: [0, 0, 0, 0],
-			width_units		: [0, 0, 0, 0],
-			outset_units	: [0, 0, 0, 0],
-
-			repeat			: [1, 1],
-			size			: [300, 200],
-			preview_area	: 400
-		};
-
-		properties['border2'] = {
-			fill			: false,
-
-			slice_values	: [33, 33, 33, 33],
-			width_values	: [1.5, 1.5, 1.5, 1.5],
-			outset_values	: [0, 0, 0, 0],
-
-			slice_units		: [1, 1, 1, 1],
-			width_units		: [2, 2, 2, 2],
-			outset_units	: [0, 0, 0, 0],
-
-			repeat			: [2, 2],
-			size			: [300, 200],
-			preview_area	: 400
-		};
-
-		properties['border3'] = {
-			fill			: true,
-
-			slice_values	: [15, 15, 15, 15],
-			width_values	: [10, 10, 10, 10],
-			outset_values	: [0, 0, 0, 0],
-
-			slice_units		: [0, 0, 0, 0],
-			width_units		: [0, 0, 0, 0],
-			outset_units	: [0, 0, 0, 0],
-
-			repeat			: [2, 2],
-			size			: [300, 200],
-			preview_area	: 400
-		};
-
-		properties['border4'] = {
-			fill			: false,
-
-			slice_values	: [13, 13, 13, 13],
-			width_values	: [13, 13, 13, 13],
-			outset_values	: [13, 13, 13, 13],
-
-			slice_units		: [0, 0, 0, 0],
-			width_units		: [0, 0, 0, 0],
-			outset_units	: [0, 0, 0, 0],
-
-			repeat			: [0, 0],
-			size			: [300, 200],
-			preview_area	: 400
-		};
-
-		properties['border5'] = {
-			fill			: false,
-
-			slice_values	: [0, 12, 0, 12],
-			width_values	: [0, 12, 0, 12],
-			outset_values	: [0, 0, 0, 0],
-
-			slice_units		: [0, 0, 0, 0],
-			width_units		: [0, 0, 0, 0],
-			outset_units	: [0, 0, 0, 0],
-
-			repeat			: [0, 0],
-			size			: [300, 200],
-			preview_area	: 400,
-		};
-
-		properties['border6'] = {
-			fill			: false,
-
-			slice_values	: [42, 42, 42, 42],
-			width_values	: [42, 42, 42, 42],
-			outset_values	: [0, 0, 0, 0],
-
-			slice_units		: [0, 0, 0, 0],
-			width_units		: [0, 0, 0, 0],
-			outset_units	: [0, 0, 0, 0],
-
-			repeat			: [2, 2],
-			size			: [350, 350],
-			preview_area	: 500,
-		};
-
-
-		var loadLocalImage = function loadLocalImage(source) {
-			var location = "images/" + source;
-			imgSource.src = location;
-		};
-
-		var loadRemoteImage = function loadRemoteImage(source) {
-			imgSource.src = source;
-			if (selected)
-				selected.removeAttribute('selected');
-			Tool.setOutputCSS('source', 'url("' + source + '")');
-		};
-
-		var pickImage = function pickImage(e) {
-			if (e.target.className === 'image') {
-				selected = e.target;
-				selected.setAttribute('selected', 'true');
-				loadRemoteImage(e.target.src);
-				imgState = e.target.getAttribute('data-stateID');
-			}
-		};
-
-		var loadImageState = function loadImageState(stateID) {
-			if (properties[stateID] === undefined)
-				return;
-
-			var prop = properties[stateID];
-			var topic;
-			var unit_array;
-			var value_array;
-
-			for (var i in topics) {
-				for (var j=0; j&lt;4; j++) {
-					topic = topics[i] + '-' + positions[j];
-					unit_array = topics[i] + '_units';
-					value_array = topics[i] + '_values';
-					InputSliderManager.setValue(topic, prop[value_array][j]);
-					DropDownManager.setValue(topic, prop[unit_array][j]);
-				}
-			}
-
-			ButtonManager.setValue('slice-fill', prop['fill']);
-			DropDownManager.setValue('image-repeat-X', prop['repeat'][0]);
-			DropDownManager.setValue('image-repeat-Y', prop['repeat'][1]);
-			InputSliderManager.setValue('preview-width', prop['size'][0]);
-			InputSliderManager.setValue('preview-height', prop['size'][1]);
-			InputSliderManager.setValue('preview-area-height', prop['preview_area']);
-		};
-
-		var update = function update() {
-			scale =  Math.min(300, (30000 / this.width) | 0);
-			setScale(scale);
-			InputSliderManager.setValue('scale', scale, false);
-
-			subject.style.backgroundImage = 'url("' + this.src + '")';
-			preview.style.borderImageSource = 'url("' + this.src + '")';
-
-			guidelines['slice-top'].setMax(this.height);
-			guidelines['slice-right'].setMax(this.width);
-			guidelines['slice-bottom'].setMax(this.height);
-			guidelines['slice-left'].setMax(this.width);
-
-			if (imgState)
-				loadImageState(imgState);
-		};
-
-		var setScale = function setScale(value) {
-			scale = value;
-			var w = imgSource.width * scale / 100 | 0;
-			var h = imgSource.height * scale / 100 | 0;
-			subject.style.width = w + 'px';
-			subject.style.height = h + 'px';
-
-			for (var i = 0; i &lt; positions.length; i++)
-				guidelines['slice-' + positions[i]].updateGuidelinePos();
-		};
-
-		var getScale = function getScale() {
-			return scale/100;
-		};
-
-		var toggleGallery = function toggleGallery() {
-			var gallery = getElemById('image-gallery');
-			var button  = getElemById('toggle-gallery');
-			var state = 1;
-			button.addEventListener('click', function() {
-				state = 1 ^ state;
-				if (state === 0) {
-					gallery.setAttribute('data-collapsed', 'true');
-					button.setAttribute('data-action', 'show');
-				}
-				else {
-					gallery.removeAttribute('data-collapsed');
-					button.setAttribute('data-action', 'hide');
-				}
-			});
-		};
-
-		var init = function init() {
-			var gallery = getElemById('image-gallery');
-			var browse = getElemById('load-image');
-			var remote = getElemById('remote-url');
-			var load_remote = getElemById('load-remote');
-
-			remote.addEventListener('change', function(){
-				loadRemoteImage(this.value);
-			});
-
-			load_remote.addEventListener('click', function(){
-				loadRemoteImage(remote.value);
-			});
-
-			browse.addEventListener('click', ImageReader.load);
-			gallery.addEventListener('click', pickImage);
-			imgSource.addEventListener('load', update);
-
-			InputSliderManager.subscribe('scale', setScale);
-			InputSliderManager.setValue('scale', scale);
-			imgState = 'border1';
-			loadRemoteImage('https://mdn.mozillademos.org/files/6007/border-image-1.png');
-			toggleGallery();
-		};
-
-		return {
-			init: init,
-			getScale : getScale,
-			loadRemoteImage: loadRemoteImage
-		};
-
-	})();
-
-	var GuideLine = function GuideLine(node) {
-		var topic = node.getAttribute('data-topic');
-		var axis = node.getAttribute('data-axis');
-
-		this.node = node;
-		this.topic = topic;
-		this.axis = axis;
-		this.info = topic.split('-')[1];
-
-		this.position = 0;
-		this.value = 0;
-		this.unit = 0;
-		this.max = 0;
-		this.pos = positions.indexOf(this.info);
-
-		guidelines[topic] = this;
-
-		var relative_container = document.createElement('div');
-		var tooltip = document.createElement('div');
-		var tooltip2 = document.createElement('div');
-
-		tooltip.className = 'tooltip';
-		tooltip.setAttribute('data-info', this.info);
-
-		tooltip2.className = 'tooltip2';
-		tooltip2.textContent = this.info;
-		tooltip2.setAttribute('data-info', this.info);
-
-		this.tooltip = tooltip;
-
-		relative_container.appendChild(tooltip);
-		relative_container.appendChild(tooltip2);
-		node.appendChild(relative_container);
-
-		var startX = 0;
-		var startY = 0;
-		var start = 0;
-
-		var startDrag = function startDrag(e) {
-			startX = e.clientX;
-			startY = e.clientY;
-			start = guidelines[topic].position;
-			document.body.setAttribute('data-move', axis);
-			relative_container.setAttribute('data-active', '');
-			node.setAttribute('data-active', '');
-
-			document.addEventListener('mousemove', updateGuideline);
-			document.addEventListener('mouseup', endDrag);
-		};
-
-		var endDrag = function endDrag() {
-			document.body.removeAttribute('data-move');
-			relative_container.removeAttribute('data-active');
-			node.removeAttribute('data-active');
-
-			document.removeEventListener('mousemove', updateGuideline);
-		};
-
-		var updateGuideline = function updateGuideline(e) {
-			var value;
-			if (topic === 'slice-top')
-				value = e.clientY - startY + start;
-
-			if (topic === 'slice-right')
-				value = startX - e.clientX + start;
-
-			if (topic === 'slice-bottom')
-				value = startY - e.clientY + start;
-
-			if (topic === 'slice-left')
-				value = e.clientX - startX + start;
-
-			if (this.unit === 0)
-				InputSliderManager.setValue(topic, value * 1 / ImageControl.getScale() | 0);
-			else {
-				InputSliderManager.setValue(topic, (value * 100 / (this.max * ImageControl.getScale())) | 0);
-			}
-
-		}.bind(this);
-
-		node.addEventListener("mousedown", startDrag);
-
-		InputSliderManager.subscribe(topic, this.setPosition.bind(this));
-		InputSliderManager.setValue(topic, this.position);
-	};
-
-
-	GuideLine.prototype.updateGuidelinePos = function updateGuidelinePos() {
-		if (this.unit === 0)
-			this.position = this.value * ImageControl.getScale() | 0;
-		else
-			this.position = this.value * this.max * ImageControl.getScale() / 100 | 0;
-
-		this.node.style[this.info] = this.position + 'px';
-	};
-
-	GuideLine.prototype.setPosition = function setPosition(value) {
-		this.value = value;
-		this.tooltip.textContent = value;
-		this.updateGuidelinePos();
-		Tool.setBorderSlice(this.pos, value);
-	};
-
-	GuideLine.prototype.setMax = function setMax(max) {
-		this.max = max;
-		this.updateLimit();
-	};
-
-	GuideLine.prototype.updateLimit = function updateLimit() {
-		if (this.unit === 1)
-			InputSliderManager.setMax(this.topic, 100);
-		else
-			InputSliderManager.setMax(this.topic, this.max);
-	};
-
-	GuideLine.prototype.setUnit = function setUnit(type) {
-		if (type === '%')	this.unit = 1;
-		if (type === '')	this.unit = 0;
-		this.updateLimit();
-	};
-
-	/*
-	 * Unit panel
-	 */
-	var UnitPanel = (function UnitPanel () {
-
-		var panel;
-		var title;
-		var precision;
-		var step;
-		var unit_topic = null; // settings are made for this topic
-		var step_option = [1, 0.1, 0.01];
-
-		var updatePrecision = function updatePrecision(value) {
-			InputSliderManager.setPrecision('unit-step', value);
-			InputSliderManager.setStep('unit-step', step_option[value]);
-			InputSliderManager.setMin('unit-step', step_option[value]);
-
-			if (unit_topic)
-				InputSliderManager.setPrecision(unit_topic, value);
-		};
-
-		var updateUnitSettings = function updateUnitSettings(value) {
-			if (unit_topic)
-				InputSliderManager.setStep(unit_topic, value);
-		};
-
-		var show = function show(e) {
-			var topic = e.target.getAttribute('data-topic');
-			var precision = InputSliderManager.getPrecision(topic);
-			var step = InputSliderManager.getStep(topic);
-
-			unit_topic = topic;
-			title.textContent = topic;
-
-			panel.setAttribute('data-active', 'true');
-			panel.style.top = e.target.offsetTop - 40 + 'px';
-			panel.style.left = e.target.offsetLeft + 30 + 'px';
-
-			InputSliderManager.setValue('unit-precision', precision);
-			InputSliderManager.setValue('unit-step', step);
-		};
-
-		var init = function init() {
-			panel = document.createElement('div');
-			title = document.createElement('div');
-			var close = document.createElement('div');
-
-			step = InputSliderManager.createSlider('unit-step', 'step');
-			precision = InputSliderManager.createSlider('unit-precision', 'precision');
-
-			InputSliderManager.setStep('unit-precision', 1);
-			InputSliderManager.setMax('unit-precision', 2);
-			InputSliderManager.setValue('unit-precision', 2);
-			InputSliderManager.setSensivity('unit-precision', 20);
-
-			InputSliderManager.setValue('unit-step', 1);
-			InputSliderManager.setStep('unit-step', 0.01);
-			InputSliderManager.setPrecision('unit-step', 2);
-
-			InputSliderManager.subscribe('unit-precision', updatePrecision);
-			InputSliderManager.subscribe('unit-step', updateUnitSettings);
-
-			close.addEventListener('click', function () {
-				panel.setAttribute('data-active', 'false');
-			});
-
-			title.textContent = 'Properties';
-			title.className = 'title';
-			close.className = 'close';
-			panel.id = 'unit-settings';
-			panel.setAttribute('data-active', 'false');
-			panel.appendChild(title);
-			panel.appendChild(precision);
-			panel.appendChild(step);
-			panel.appendChild(close);
-			document.body.appendChild(panel);
-		};
-
-		return {
-			init : init,
-			show : show
-		};
-
-	})();
-
-	/**
-	 * Tool Manager
-	 */
-	var Tool = (function Tool() {
-		var preview_area;
-		var dropdown_unit_options = [
-			{ '' : '--', '%' : '%'},
-			{ 'px' : 'px', '%' : '%', 'em' : 'em'},
-			{ 'px' : 'px', 'em' : 'em'},
-		];
-
-		var border_slice = [];
-		var border_width = [];
-		var border_outset = [];
-
-		var border_slice_values = [];
-		var border_width_values = [];
-		var border_outset_values = [];
-
-		var border_slice_units = ['', '', '', ''];
-		var border_width_units = ['px', 'px', 'px', 'px'];
-		var border_outset_units = ['px', 'px', 'px', 'px'];
-
-		var border_fill = false;
-		var border_repeat = ['round', 'round'];
-		var CSS_code = {
-			'source' : null,
-			'slice' : null,
-			'width' : null,
-			'outset' : null,
-			'repeat' : null
-		};
-
-		var setBorderSlice = function setBorderSlice(positionID, value) {
-			border_slice[positionID] = value + border_slice_units[positionID];
-			updateBorderSlice();
-		};
-
-		var updateBorderSlice = function updateBorderSlice() {
-			var value = border_slice.join(' ');
-			if (border_fill === true)
-				value += ' fill';
-
-			preview.style.borderImageSlice = value;
-			setOutputCSS('slice', value);
-		};
-
-		var setBorderFill = function setBorderFill(value) {
-			border_fill = value;
-			var bimgslice = border_slice.join(' ');;
-			if (value === true)
-				bimgslice += ' fill';
-
-			preview.style.borderImageSlice = bimgslice;
-		};
-
-		var updateBorderWidth = function updateBorderWidth() {
-			var value = border_width.join(' ');
-			preview.style.borderImageWidth = value;
-			setOutputCSS('width', value);
-		};
-
-		var updateBorderOutset = function updateBorderOutset() {
-			var value = border_outset.join(' ');
-			preview.style.borderImageOutset = border_outset.join(' ');
-			setOutputCSS('outset', value);
-		};
-
-		var setBorderRepeat = function setBorderRepeat(obj) {
-			border_repeat[obj.value] = obj.name;
-			var value = border_repeat.join(' ');
-			preview.style.borderImageRepeat = value;
-			setOutputCSS('repeat', value);
-		};
-
-		var setOutputCSS = function setOutputCSS(topic, value) {
-			CSS_code[topic].textContent = value + ';';
-		};
-
-		var setPreviewFontSize = function setPreviewFontSize(value) {
-			preview.style.fontSize = value + 'px';
-		};
-
-		var setPreviewWidth = function setPreviewWidth(value) {
-			preview.style.width = value + 'px';
-		};
-
-		var setPreviewHeight = function setPreviewHeight(value) {
-			preview.style.height = value + 'px';
-		};
-
-		var setPreviewAreaHeight = function setPreviewAreaHeight(value) {
-			preview_area.style.height = value + 'px';
-		};
-
-		var updateDragOption = function updateDragOption(value) {
-			if (value === true)
-				subject.setAttribute('data-draggable', 'true');
-			else
-				subject.removeAttribute('data-draggable');
-		};
-
-		var createProperty = function createProperty(topic, labelID, optionsID) {
-
-			var slider = InputSliderManager.createSlider(topic, positions[labelID]);
-			var dropdown = DropDownManager.createDropDown(topic, dropdown_unit_options[optionsID]);
-
-			InputSliderManager.setSensivity(topic, 3);
-			InputSliderManager.setPrecision(topic, 1);
-
-			var property = document.createElement('div');
-			var config = document.createElement('div');
-
-			property.className = 'property';
-			config.className = 'config';
-			config.setAttribute('data-topic', topic);
-			config.addEventListener('click', UnitPanel.show);
-
-			property.appendChild(slider);
-			property.appendChild(dropdown);
-			property.appendChild(config);
-
-			return property;
-		};
-
-		var initBorderSliceControls = function initBorderSliceControls() {
-			var container = getElemById('border-slice-control');
-
-			var listenForChanges = function listenForChanges(topic, id) {
-				InputSliderManager.subscribe(topic, function(value) {
-					border_slice_values[id] = value;
-					border_slice[id] = value + border_slice_units[id];
-					updateBorderSlice();
-				});
-
-				DropDownManager.subscribe(topic, function(obj) {
-					guidelines[topic].setUnit(obj.value);
-					border_slice_units[id] = obj.value;
-					border_slice[id] = border_slice_values[id] + obj.value;
-					updateBorderSlice();
-				});
-			};
-
-			for (var i = 0; i &lt; positions.length; i++) {
-				var topic = 'slice-' + positions[i];
-				var property = createProperty(topic, i, 0);
-				listenForChanges(topic, i);
-
-				container.appendChild(property);
-			}
-
-			container.appendChild(container.children[1]);
-
-		};
-
-		var initBorderWidthControls = function initBorderWidthControls() {
-			var container = getElemById('border-width-control');
-
-			var listenForChanges = function listenForChanges(topic, id) {
-				InputSliderManager.subscribe(topic, function(value) {
-					border_width_values[id] = value;
-					border_width[id] = value + border_width_units[id];
-					updateBorderWidth();
-				});
-
-				DropDownManager.subscribe(topic, function(obj) {
-					if (obj.value === '%')
-						InputSliderManager.setMax(topic, 100);
-					else
-						InputSliderManager.setMax(topic, 1000);
-
-					border_width_units[id] = obj.value;
-					border_width[id] = border_width_values[id] + obj.value;
-					updateBorderWidth();
-				});
-			};
-
-			for (var i = 0; i &lt; positions.length; i++) {
-				var topic = 'width-' + positions[i];
-				var property = createProperty(topic, i, 1);
-				InputSliderManager.setMax(topic, 1000);
-				listenForChanges(topic, i);
-
-				container.appendChild(property);
-			}
-		};
-
-		var initBorderOutsetControls = function initBorderOutsetControls() {
-
-			var container = getElemById('border-outset-control');
-
-			var listenForChanges = function listenForChanges(topic, id) {
-				InputSliderManager.subscribe(topic, function(value) {
-					border_outset_values[id] = value;
-					border_outset[id] = value + border_outset_units[id];
-					updateBorderOutset();
-				});
-
-				DropDownManager.subscribe(topic, function(obj) {
-					border_outset_units[id] = obj.value;
-					border_outset[id] = border_outset_values[id] + obj.value;
-					updateBorderOutset();
-				});
-			};
-
-			for (var i = 0; i &lt; positions.length; i++) {
-				var topic = 'outset-' + positions[i];
-				var property = createProperty(topic, i, 2);
-				InputSliderManager.setMax(topic, 1000);
-				listenForChanges(topic, i);
-
-				container.appendChild(property);
-			}
-		};
-
-		var init = function init() {
-
-			var gallery =
-			subject = getElemById('subject');
-			preview = getElemById("preview");
-			preview_area = getElemById("preview_section");
-
-
-			CSS_code['source'] = getElemById("out-border-source");
-			CSS_code['slice'] = getElemById("out-border-slice");
-			CSS_code['width'] = getElemById("out-border-width");
-			CSS_code['outset'] = getElemById("out-border-outset");
-			CSS_code['repeat'] = getElemById("out-border-repeat");
-
-			initBorderSliceControls();
-			initBorderWidthControls();
-			initBorderOutsetControls();
-
-			var elem = document.querySelectorAll('.guideline');
-			var size = elem.length;
-			for (var i = 0; i &lt; size; i++)
-				new GuideLine(elem[i]);
-
-			PreviewControl.init();
-
-			ButtonManager.subscribe('slice-fill',setBorderFill);
-			ButtonManager.subscribe('drag-subject', updateDragOption);
-			ButtonManager.setValue('drag-subject', false);
-
-			DropDownManager.subscribe('image-repeat-X', setBorderRepeat);
-			DropDownManager.subscribe('image-repeat-Y', setBorderRepeat);
-
-			InputSliderManager.subscribe('preview-area-height', setPreviewAreaHeight);
-			InputSliderManager.subscribe('preview-width', setPreviewWidth);
-			InputSliderManager.subscribe('preview-height', setPreviewHeight);
-			InputSliderManager.subscribe('font-size', setPreviewFontSize);
-			InputSliderManager.setValue('preview-width', 300);
-			InputSliderManager.setValue('preview-height', 200);
-		};
-
-		return {
-			init: init,
-			setOutputCSS: setOutputCSS,
-			setBorderSlice: setBorderSlice
-		};
-
-	})();
-
-	/**
-	 * Init Tool
-	 */
-	var init = function init() {
-		InputSliderManager.init();
-		DropDownManager.init();
-		ButtonManager.init();
-		UnitPanel.init();
-		Tool.init();
-		ImageControl.init();
-	};
-
-	return {
-		init : init
-	};
-
-})();
-
-</pre>
-</div>
-
-<p>{{EmbedLiveSample('Border_Image_Generator', '100%', '1270px')}}</p>
diff --git a/files/fr/web/css/css_background_and_borders/border-radius_generator/index.html b/files/fr/web/css/css_background_and_borders/border-radius_generator/index.html
deleted file mode 100644
index ac9bc500aa..0000000000
--- a/files/fr/web/css/css_background_and_borders/border-radius_generator/index.html
+++ /dev/null
@@ -1,1601 +0,0 @@
----
-title: Générateur de border-radius
-slug: Web/CSS/CSS_Background_and_Borders/Border-radius_generator
-tags:
-  - CSS
-  - Outil
-translation_of: Web/CSS/CSS_Background_and_Borders/Border-radius_generator
-original_slug: Web/CSS/Arrière-plans_et_bordures_CSS/Générateur_border-radius
----
-<p>Cet outil peut être utilisé afin de générer du code pour la propriété {{cssxref("border-radius")}}.</p>
-
-<div class="hidden">
-<h2 id="border-radius-generator" name="border-radius-generator">border-radius</h2>
-
-<h3 id="Contenu_HTML">Contenu HTML</h3>
-
-<pre class="brush: html">&lt;div id="container"&gt;
-    &lt;div class="group section"&gt;
-        &lt;div id="preview" class="col span_12"&gt;
-            &lt;div id="subject"&gt;
-                &lt;div id="top-left" class="radius-container"
-                    data-X="left" data-Y="top"&gt;
-                &lt;/div&gt;
-                &lt;div id="top-right" class="radius-container"
-                    data-X="right" data-Y="top"&gt;
-                &lt;/div&gt;
-                &lt;div id="bottom-right" class="radius-container"
-                    data-X="right" data-Y="bottom"&gt;
-                &lt;/div&gt;
-                &lt;div id="bottom-left" class="radius-container"
-                    data-X="left" data-Y="bottom"&gt;
-                &lt;/div&gt;
-
-                &lt;div id="radius-ui-sliders"&gt;
-                    &lt;div id="tlr" class="ui-input-slider" data-topic="top-left"
-                         data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
-
-                    &lt;div id="tlw" class="ui-input-slider" data-topic="top-left-w"
-                         data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
-
-                    &lt;div id="tlh" class="ui-input-slider" data-topic="top-left-h"
-                        data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
-
-                    &lt;div id="trr" class="ui-input-slider" data-topic="top-right"
-                         data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
-
-                    &lt;div id="trw" class="ui-input-slider" data-topic="top-right-w"
-                         data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
-
-                    &lt;div id="trh" class="ui-input-slider" data-topic="top-right-h"
-                        data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
-
-                    &lt;div id="brr" class="ui-input-slider" data-topic="bottom-right"
-                         data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
-
-                    &lt;div id="brw" class="ui-input-slider" data-topic="bottom-right-w"
-                         data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
-
-                    &lt;div id="brh" class="ui-input-slider" data-topic="bottom-right-h"
-                        data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
-
-                    &lt;div id="blr" class="ui-input-slider" data-topic="bottom-left"
-                         data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
-
-                    &lt;div id="blw" class="ui-input-slider" data-topic="bottom-left-w"
-                         data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
-
-                    &lt;div id="blh" class="ui-input-slider" data-topic="bottom-left-h"
-                        data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
-                &lt;/div&gt;
-            &lt;/div&gt;
-        &lt;/div&gt;
-    &lt;/div&gt;
-    &lt;div id="controls" class="group section"&gt;
-
-        &lt;div class="group section"&gt;
-            &lt;div id="dimensions"&gt;
-                &lt;div class="ui-input-slider" data-topic="width" data-info="width"
-                     data-unit=" px" data-min="150" data-max="700" data-sensivity="1"&gt;&lt;/div&gt;
-
-                &lt;div class="ui-input-slider" data-topic="height" data-info="height"
-                    data-unit=" px" data-min="75" data-max="350" data-sensivity="1"&gt;&lt;/div&gt;
-            &lt;/div&gt;
-
-            &lt;div id="output"&gt;&lt;/div&gt;
-        &lt;/div&gt;
-
-        &lt;div class="group section"&gt;
-            &lt;div id="radius-lock"&gt;
-                &lt;div class="info"&gt; Coins arrondis &lt;/div&gt;
-                &lt;div class="ui-checkbox" data-topic='top-left'&gt;&lt;/div&gt;
-                &lt;div class="ui-checkbox" data-topic='top-right'&gt;&lt;/div&gt;
-                &lt;div class="ui-checkbox" data-topic='bottom-right'&gt;&lt;/div&gt;
-                &lt;div class="ui-checkbox" data-topic='bottom-left'&gt;&lt;/div&gt;
-            &lt;/div&gt;
-
-            &lt;div id="unit-selection"&gt;
-                &lt;div class="info"&gt; Unités pour la bordure &lt;/div&gt;
-            &lt;/div&gt;
-        &lt;/div&gt;
-
-    &lt;/div&gt;
-&lt;/div&gt;
-</pre>
-
-<h3 id="Contenu_CSS">Contenu CSS</h3>
-
-<pre class="brush: css">/*  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 &gt; 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 &gt; input {
- 	display: none;
-}
-
-.ui-checkbox &gt; 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 &gt; label:hover {
-	cursor: pointer;
-}
-
-.ui-checkbox &gt; 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 &gt; 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;
-}
-
-
-</pre>
-
-<h3 id="Contenu_JavaScript">Contenu JavaScript</h3>
-
-<pre class="brush: js"><code class="language-js">'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 &gt; 0 ? max : 100;
-		this.step = step === 0 ? 1 : step;
-		this.topic = topic;
-		this.node = node;
-		this.unit = unit;
-		this.sensivity = sensivity &gt; 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 &gt; slider.max) value = slider.max;
-		if (value &lt; slider.min)	value = slider.min;
-
-		slider.value = value;
-		slider.node.setAttribute('data-value', value);
-
-		if (send_notify !== undefined &amp;&amp; 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 &lt; 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 &lt; 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 &lt; 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' &amp;&amp; y == 'top') handle.className = 'handle handle-top-left'
-		if (x === 'right' &amp;&amp; y == 'top') handle.className = 'handle handle-top-right';
-		if (x === 'right' &amp;&amp; y == 'bottom') handle.className = 'handle handle-bottom-right';
-		if (x === 'left' &amp;&amp; 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 &amp;&amp; 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 &lt; 0)	this.size = 0;
-			if (this.size &gt; this.maxR)	this.size = this.maxR;
-			this.updateRadius();
-			this.updateBorderRadius();
-			return;
-		}
-
-		if (deltaX) {
-			this.width += this.resizeX * deltaX;
-			if (this.width &lt; 0)	this.width = 0;
-			if (this.width &gt; this.maxW)	this.width = this.maxW;
-			this.updateWidth();
-		}
-
-		if (deltaY) {
-			this.height += this.resizeY * deltaY;
-			if (this.height &lt; 0) this.height = 0;
-			if (this.height &gt; 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 &lt; 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 &lt; 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 &lt; 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
-	}
-
-})();
-
-
-</code></pre>
-</div>
-
-<p>{{EmbedLiveSample('border-radius-generator', '100%', '800px', '')}}</p>
diff --git a/files/fr/web/css/css_background_and_borders/box-shadow_generator/index.html b/files/fr/web/css/css_background_and_borders/box-shadow_generator/index.html
deleted file mode 100644
index 282a53d6e4..0000000000
--- a/files/fr/web/css/css_background_and_borders/box-shadow_generator/index.html
+++ /dev/null
@@ -1,2888 +0,0 @@
----
-title: Générateur de box-shadow
-slug: Web/CSS/CSS_Background_and_Borders/Box-shadow_generator
-tags:
-  - CSS
-  - Outil
-translation_of: Web/CSS/CSS_Background_and_Borders/Box-shadow_generator
-original_slug: Web/CSS/Modèle_de_boîte_CSS/Générateur_box-shadow
----
-<p>Cet outil visuel permet de construire des effets d'ombre et de générer du code pour la propriété {{cssxref("box-shadow")}} qui pourra être ajouté à votre feuille de style.</p>
-
-<div class="hidden">
-<h2 id="box-shadow_generator" name="box-shadow_generator">box-shadow generator</h2>
-
-<h3 id="HTML_Content">HTML Content</h3>
-
-<pre class="brush: html">&lt;div id="container"&gt;
-    &lt;div class="group section"&gt;
-        &lt;div id="layer_manager"&gt;
-            &lt;div class="group section"&gt;
-                &lt;div class="button" data-type="add"&gt; &lt;/div&gt;
-                &lt;div class="button" data-type="move-up"&gt; &lt;/div&gt;
-                &lt;div class="button" data-type="move-down"&gt; &lt;/div&gt;
-            &lt;/div&gt;
-            &lt;div id="stack_container"&gt;&lt;/div&gt;
-        &lt;/div&gt;
-
-        &lt;div id="preview_zone"&gt;
-            &lt;div id="layer_menu" class="col span_12"&gt;
-                &lt;div class="button" id="element" data-type="subject" data-title="element"&gt; element &lt;/div&gt;
-                &lt;div class="button" id="before" data-type="subject" data-title=":before"&gt;
-                    :before
-                    &lt;span class="delete" data-type="disable"&gt;&lt;/span&gt;
-                &lt;/div&gt;
-                &lt;div class="button" id="after" data-type="subject" data-title=":after"&gt;
-                    :after
-                    &lt;span class="delete" data-type="disable"&gt;&lt;/span&gt;
-                &lt;/div&gt;
-                &lt;div class="ui-checkbox" data-topic='before' data-label=":before"&gt;&lt;/div&gt;
-                &lt;div class="ui-checkbox" data-topic='after' data-label=":after"&gt;&lt;/div&gt;
-            &lt;/div&gt;
-
-            &lt;div id="preview"&gt;
-                &lt;div id="obj-element"&gt;
-                    &lt;div class="content"&gt; &lt;/div&gt;
-                    &lt;div id="obj-before"&gt; &lt;/div&gt;
-                    &lt;div id="obj-after"&gt; &lt;/div&gt;
-                &lt;/div&gt;
-            &lt;/div&gt;
-        &lt;/div&gt;
-    &lt;/div&gt;
-
-    &lt;div id="controls" class="group section"&gt;
-        &lt;div class="wrap-left"&gt;
-            &lt;div class="colorpicker category"&gt;
-                &lt;div class="title"&gt; &lt;/div&gt;
-                &lt;div id="colorpicker" class="group"&gt;
-                    &lt;div id="gradient" class="gradient"&gt;
-                        &lt;div id="gradient_picker"&gt; &lt;/div&gt;
-                    &lt;/div&gt;
-                    &lt;div id="hue" data-topic="hue" class="hue"&gt;
-                        &lt;div id="hue_selector"&gt; &lt;/div&gt;
-                    &lt;/div&gt;
-                    &lt;div class="info"&gt;
-                        &lt;div class="input" data-topic="hue" data-title='H:' data-action="HSV"&gt;&lt;/div&gt;
-                        &lt;div class="input" data-topic="saturation" data-title='S:' data-action="HSV"&gt;&lt;/div&gt;
-                        &lt;div class="input" data-topic="value" data-title='V:' data-action="HSV"&gt;&lt;/div&gt;
-                    &lt;/div&gt;
-                    &lt;div class="alpha"&gt;
-                        &lt;div id="alpha" data-topic="alpha"&gt;
-                            &lt;div id="alpha_selector"&gt; &lt;/div&gt;
-                        &lt;/div&gt;
-                    &lt;/div&gt;
-                    &lt;div class="info"&gt;
-                        &lt;div class="input" data-topic="r" data-title='R:' data-action="RGB"&gt;&lt;/div&gt;
-                        &lt;div class="input" data-topic="g" data-title='G:' data-action="RGB"&gt;&lt;/div&gt;
-                        &lt;div class="input" data-topic="b" data-title='B:' data-action="RGB"&gt;&lt;/div&gt;
-                    &lt;/div&gt;
-                    &lt;div class="preview block"&gt;
-                        &lt;div id="output_color"&gt; &lt;/div&gt;
-                    &lt;/div&gt;
-                    &lt;div class="block info"&gt;
-                        &lt;div class="input" data-topic="a" data-title='alpha:' data-action="alpha"&gt;&lt;/div&gt;
-                        &lt;div class="input" data-topic="hexa" data-title='' data-action="hexa"&gt;&lt;/div&gt;
-                    &lt;/div&gt;
-                &lt;/div&gt;
-            &lt;/div&gt;
-        &lt;/div&gt;
-
-        &lt;div class="wrap-right"&gt;
-
-            &lt;div id="shadow_properties" class="category"&gt;
-                &lt;div class="title"&gt; Propriétés d'ombre &lt;/div&gt;
-                &lt;div class="group"&gt;
-                    &lt;div class="group property"&gt;
-                        &lt;div class="ui-slider-name"&gt; inset &lt;/div&gt;
-                        &lt;div class="ui-checkbox" data-topic='inset'&gt;&lt;/div&gt;
-                    &lt;/div&gt;
-                    &lt;div class="slidergroup"&gt;
-                        &lt;div class="ui-slider-name"&gt; Position x &lt;/div&gt;
-                        &lt;div class="ui-slider-btn-set" data-topic="posX" data-type="sub"&gt;&lt;/div&gt;
-                        &lt;div class="ui-slider" data-topic="posX"
-                            data-min="-500" data-max="500" data-step="1"&gt; &lt;/div&gt;
-                        &lt;div class="ui-slider-btn-set" data-topic="posX" data-type="add"&gt;&lt;/div&gt;
-                        &lt;div class="ui-slider-input" data-topic="posX" data-unit="px"&gt;&lt;/div&gt;
-                    &lt;/div&gt;
-                    &lt;div class="slidergroup"&gt;
-                        &lt;div class="ui-slider-name"&gt; Position y &lt;/div&gt;
-                        &lt;div class="ui-slider-btn-set" data-topic="posY" data-type="sub"&gt;&lt;/div&gt;
-                        &lt;div class="ui-slider" data-topic="posY"
-                            data-min="-500" data-max="500" data-step="1"&gt; &lt;/div&gt;
-                        &lt;div class="ui-slider-btn-set" data-topic="posY" data-type="add"&gt;&lt;/div&gt;
-                        &lt;div class="ui-slider-input" data-topic="posY" data-unit="px"&gt;&lt;/div&gt;
-                    &lt;/div&gt;
-                    &lt;div class="slidergroup"&gt;
-                        &lt;div class="ui-slider-name"&gt; Blur &lt;/div&gt;
-                        &lt;div class="ui-slider-btn-set" data-topic="blur" data-type="sub"&gt;&lt;/div&gt;
-                        &lt;div class="ui-slider" data-topic="blur"
-                            data-min="0" data-max="200" data-step="1"&gt; &lt;/div&gt;
-                        &lt;div class="ui-slider-btn-set" data-topic="blur" data-type="add"&gt;&lt;/div&gt;
-                        &lt;div class="ui-slider-input" data-topic="blur" data-unit="px"&gt;&lt;/div&gt;
-                    &lt;/div&gt;
-                    &lt;div class="slidergroup"&gt;
-                        &lt;div class="ui-slider-name"&gt; Spread &lt;/div&gt;
-                        &lt;div class="ui-slider-btn-set" data-topic="spread" data-type="sub"&gt;&lt;/div&gt;
-                        &lt;div class="ui-slider" data-topic="spread"
-                            data-min="-100"    data-max="100" data-step="1" data-value="50"&gt;
-                        &lt;/div&gt;
-                        &lt;div class="ui-slider-btn-set" data-topic="spread" data-type="add"&gt;&lt;/div&gt;
-                        &lt;div class="ui-slider-input" data-topic="spread" data-unit="px"&gt;&lt;/div&gt;
-                    &lt;/div&gt;
-                &lt;/div&gt;
-            &lt;/div&gt;
-
-            &lt;div id="element_properties" class="category"&gt;
-                &lt;div class="title"&gt; Propriétés d'ombre &lt;/div&gt;
-                &lt;div class="group"&gt;
-                    &lt;div class="group property"&gt;
-                        &lt;div class="ui-slider-name"&gt; border &lt;/div&gt;
-                        &lt;div class="ui-checkbox" data-topic='border-state' data-state="true"&gt;&lt;/div&gt;
-                    &lt;/div&gt;
-                    &lt;div id="z-index" class="slidergroup"&gt;
-                        &lt;div class="ui-slider-name"&gt; z-index &lt;/div&gt;
-                        &lt;div class="ui-slider-btn-set" data-topic="z-index" data-type="sub"&gt;&lt;/div&gt;
-                        &lt;div class="ui-slider" data-topic="z-index"
-                            data-min="-10" data-max="10" data-step="1"&gt;&lt;/div&gt;
-                        &lt;div class="ui-slider-btn-set" data-topic="z-index" data-type="add"&gt;&lt;/div&gt;
-                        &lt;div class="ui-slider-input" data-topic="z-index"&gt;&lt;/div&gt;
-                    &lt;/div&gt;
-                    &lt;div class="slidergroup"&gt;
-                        &lt;div class="ui-slider-name"&gt; top &lt;/div&gt;
-                        &lt;div class="ui-slider-btn-set" data-topic="top" data-type="sub"&gt;&lt;/div&gt;
-                        &lt;div class="ui-slider" data-topic="top"
-                            data-min="-500" data-max="500" data-step="1"&gt; &lt;/div&gt;
-                        &lt;div class="ui-slider-btn-set" data-topic="top" data-type="add"&gt;&lt;/div&gt;
-                        &lt;div class="ui-slider-input" data-topic="top" data-unit="px"&gt;&lt;/div&gt;
-                    &lt;/div&gt;
-                    &lt;div class="slidergroup"&gt;
-                        &lt;div class="ui-slider-name"&gt; left &lt;/div&gt;
-                        &lt;div class="ui-slider-btn-set" data-topic="left" data-type="sub"&gt;&lt;/div&gt;
-                        &lt;div class="ui-slider" data-topic="left"
-                            data-min="-300" data-max="700" data-step="1"&gt; &lt;/div&gt;
-                        &lt;div class="ui-slider-btn-set" data-topic="left" data-type="add"&gt;&lt;/div&gt;
-                        &lt;div class="ui-slider-input" data-topic="left" data-unit="px"&gt;&lt;/div&gt;
-                    &lt;/div&gt;
-                    &lt;div id="transform_rotate" class="slidergroup"&gt;
-                        &lt;div class="ui-slider-name"&gt; Rotate &lt;/div&gt;
-                        &lt;div class="ui-slider-btn-set" data-topic="rotate" data-type="sub"&gt;&lt;/div&gt;
-                        &lt;div class="ui-slider" data-topic="rotate"
-                            data-min="-360" data-max="360" data-step="1" data-value="0"&gt;
-                        &lt;/div&gt;
-                        &lt;div class="ui-slider-btn-set" data-topic="rotate" data-type="add"&gt;&lt;/div&gt;
-                        &lt;div class="ui-slider-input" data-topic="rotate" data-unit="deg"&gt;&lt;/div&gt;
-                    &lt;/div&gt;
-                    &lt;div class="slidergroup"&gt;
-                        &lt;div class="ui-slider-name"&gt; Width &lt;/div&gt;
-                        &lt;div class="ui-slider-btn-set" data-topic="width" data-type="sub"&gt;&lt;/div&gt;
-                        &lt;div class="ui-slider" data-topic="width"
-                            data-min="0" data-max="1000" data-step="1" data-value="200"&gt;
-                        &lt;/div&gt;
-                        &lt;div class="ui-slider-btn-set" data-topic="width" data-type="add"&gt;&lt;/div&gt;
-                        &lt;div class="ui-slider-input" data-topic="width"  data-unit="px"&gt;&lt;/div&gt;
-                    &lt;/div&gt;
-                    &lt;div class="slidergroup"&gt;
-                        &lt;div class="ui-slider-name"&gt; Height &lt;/div&gt;
-                        &lt;div class="ui-slider-btn-set" data-topic="height" data-type="sub"&gt;&lt;/div&gt;
-                        &lt;div class="ui-slider" data-topic="height"
-                            data-min="0" data-max="400" data-step="1" data-value="200"&gt;
-                        &lt;/div&gt;
-                        &lt;div class="ui-slider-btn-set" data-topic="height" data-type="add"&gt;&lt;/div&gt;
-                        &lt;div class="ui-slider-input" data-topic="height" data-unit="px"&gt;&lt;/div&gt;
-                    &lt;/div&gt;
-                &lt;/div&gt;
-            &lt;/div&gt;
-
-            &lt;div id="output" class="category"&gt;
-                &lt;div id="menu" class="menu"&gt;&lt;/div&gt;
-                &lt;div class="title"&gt;    Code CSS &lt;/div&gt;
-                &lt;div class="group" style="border-top-left-radius: 0;"&gt;
-                    &lt;div class="output" data-topic="element" data-name="element"
-                        data-prop="width height background-color position=[relative] box-shadow"&gt;
-                    &lt;/div&gt;
-                    &lt;div class="output" data-topic="before" data-name="element:before"
-                        data-prop="content=[&amp;quot;&amp;quot;] position=[absolute] width height top left z-index background-color box-shadow transform -webkit-transform -ms-transform"&gt;
-                    &lt;/div&gt;
-                    &lt;div class="output" data-topic="after" data-name="element:after"
-                        data-prop="content=[&amp;quot;&amp;quot;] position=[absolute] width height top left z-index background-color box-shadow transform -webkit-transform -ms-transform"&gt;
-                    &lt;/div&gt;
-                &lt;/div&gt;
-            &lt;/div&gt;
-        &lt;/div&gt;
-    &lt;/div&gt;
-&lt;/div&gt;
-</pre>
-
-<h3 id="CSS_Content">CSS Content</h3>
-
-<pre class="brush: css">/*  GRID OF TWELVE
- * ========================================================================== */
-
-.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 Slider
- */
-
-.slidergroup {
-	height: 20px;
-	margin: 10px 0;
-	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
-	-moz-user-select: none;
-	user-select: none;
-}
-
-.slidergroup * {
-	float: left;
-	height: 100%;
-	line-height: 100%;
-}
-
-/* Slider */
-
-.ui-slider {
-	height: 10px;
-	width: 200px;
-	margin: 4px 10px;
-	display: block;
-	border: 1px solid #999;
-	border-radius: 3px;
-	background: #EEE;
-}
-
-.ui-slider:hover {
-	cursor: pointer;
-}
-
-.ui-slider-name {
-	width: 90px;
-	padding: 0 10px 0 0;
-	text-align: right;
-	text-transform: lowercase;
-}
-
-.ui-slider-pointer {
-	width: 13px;
-	height: 13px;
-	background-color: #EEE;
-	border: 1px solid #2C9FC9;
-	border-radius: 3px;
-	position: relative;
-	top: -3px;
-	left: 0%;
-}
-
-.ui-slider-btn-set {
-	width: 25px;
-	background-color: #2C9FC9;
-	border-radius: 3px;
-	color: #FFF;
-	font-weight: bold;
-	text-align: center;
-}
-
-.ui-slider-btn-set:hover {
-	background-color: #379B4A;
-	cursor: pointer;
-}
-
-.ui-slider-input &gt; input {
-	margin: 0 10px;
-	padding: 0;
-	width: 50px;
-	text-align: center;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-}
-
-/*
- * UI Button
- */
-
-/* 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 &gt; input {
- 	display: none;
-}
-
-.ui-checkbox &gt; 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 &gt; label:hover {
-	cursor: pointer;
-}
-
-.ui-checkbox &gt; input:checked + label {
-	background-image: url("https://mdn.mozillademos.org/files/5681/checked.png");
-	background-color: #379B4A;
-}
-
-/*
- * BOX SHADOW GENERATOR TOOL
- */
-
-body {
-	max-width: 1000px;
-	height: 800px;
-	margin: 20px auto 0;
-
-	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;
-}
-
-#container {
-	width: 100%;
-	padding: 2px;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-}
-
-
-/* container with shadows stacks */
-#stack_container {
-	height: 400px;
-	overflow: hidden;
-	position: relative;
-	border: 1px solid #CCC;
-	border-radius: 3px;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-}
-
-#stack_container .container {
-	height: 100%;
-	width: 100%;
-	position: absolute;
-	left: 100%;
-	transition-property: left;
-	transition-duration: 0.5s;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-}
-
-
-#stack_container .title {
-	text-align: center;
-	font-weight: bold;
-	line-height: 2em;
-	border-bottom: 1px solid #43A6E1;
-	color: #666;
-}
-
-
-/*
- * Stack of Layers for shadow
- */
-
-#layer_manager {
-	width: 17%;
-	background-color: #FEFEFE;
-	margin: 0 1% 0 0;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-	float: left;
-}
-
-
-#layer_manager .button {
-	width: 30%;
-	height: 25px;
-	margin:0 0 10px;
-	color: #333;
-	background-color: #EEE;
-	text-align: center;
-	font-size: 0.75em;
-	line-height: 1.5em;
-	border: 1px solid #CCC;
-	border-radius: 3px;
-
-	display: block;
-	background-position: center center;
-	background-repeat: no-repeat;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-	float: left;
-}
-
-#layer_manager .button:hover {
-	background-color: #3380C4;
-	border: 1px solid #3380C4;
-	cursor: pointer;
-}
-
-#layer_manager [data-type='add'] {
-	background-image: url("https://mdn.mozillademos.org/files/5685/add-black.png");
-}
-
-#layer_manager [data-type='add']:hover {
-	background-image: url("https://mdn.mozillademos.org/files/5687/add-white.png");
-}
-
-#layer_manager [data-type='move-up'] {
-	background-image: url("https://mdn.mozillademos.org/files/5697/up-black.png");
-	margin-left: 5%;
-	margin-right: 5%;
-}
-
-#layer_manager [data-type='move-up']:hover {
-	background-image: url("https://mdn.mozillademos.org/files/5709/up-white.png");
-}
-
-#layer_manager [data-type='move-down'] {
-	background-image: url("https://mdn.mozillademos.org/files/5693/down-black.png");
-}
-
-#layer_manager [data-type='move-down']:hover {
-	background-image: url("https://mdn.mozillademos.org/files/5695/down-white.png");
-}
-
-/* shadows classes */
-
-#layer_manager .node {
-	width: 100%;
-	margin: 5px 0;
-	padding: 5px;
-	text-align: center;
-	background-color: #EEE;
-	border: 1px solid #DDD;
-	font-size: 0.75em;
-	line-height: 1.5em;
-	color: #333;
-	border-radius: 3px;
-
-	position: relative;
-	display: block;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-}
-
-#layer_manager .node:hover {
-	color: #FFF;
-	background-color: #3380C4;
-	cursor: pointer;
-}
-
-/* active element styling */
-
-#layer_manager [data-active='layer'] {
-	color: #FFF;
-	border: none;
-	background-color: #379B4A;
-}
-
-#layer_manager [data-active='subject'] {
-	color: #FFF;
-	background-color: #467FC9;
-}
-
-/* delete button */
-
-#layer_manager .delete {
-	width: 1.5em;
-	height: 100%;
-	float: right;
-	border-radius: 3px;
-	background-image: url("https://mdn.mozillademos.org/files/5689/delete-white.png");
-	background-position: center center;
-	background-repeat: no-repeat;
-	position: absolute;
-	top: 0;
-	right: 10px;
-	display: none;
-}
-
-#layer_manager .delete:hover {
-	background-image: url("https://mdn.mozillademos.org/files/5691/delete-yellow.png");
-}
-
-#layer_manager .node:hover .delete {
-	display: block;
-}
-
-
-#layer_manager .stack {
-	padding: 0 5px;
-	max-height: 90%;
-	overflow: auto;
-	overflow-x: hidden;
-}
-
-
-/*
- * Layer Menu
- */
-
-#layer_menu {
-	margin: 0 0 10px 0;
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-}
-
-#layer_menu .button {
-	width: 100px;
-	margin: 0 5px 0 0;
-	padding: 2.5px;
-	color: #333;
-	background-color: #EEE;
-	border: 1px solid #CCC;
-	border-radius: 3px;
-	text-align: center;
-	font-size: 0.75em;
-	line-height: 1.5em;
-
-	position: relative;
-	display: block;
-	float: left;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-}
-
-#layer_menu .button:hover {
-	color: #FFF;
-	background-color: #3380C4;
-	border: 1px solid #3380C4;
-	cursor: pointer;
-}
-
-#layer_menu .delete {
-	width: 1.5em;
-	height: 100%;
-	float: right;
-	border-radius: 3px;
-	background-image: url("https://mdn.mozillademos.org/files/5689/delete-white.png");
-	background-position: center center;
-	background-repeat: no-repeat;
-	position: absolute;
-	top: 0;
-	right: 5px;
-	display: none;
-}
-
-#layer_menu .delete:hover {
-	background-image: url("https://mdn.mozillademos.org/files/5691/delete-yellow.png");
-}
-
-#layer_menu .button:hover .delete {
-	display: block;
-}
-
-
-/*
- * active element styling
- */
-
-#layer_menu [data-active='subject'] {
-	color: #FFF;
-	background-color: #379B4A;
-	border: 1px solid #379B4A;
-}
-
-
-/* Checkbox */
-
-#layer_menu .ui-checkbox &gt; label {
-	height: 15px;
-	line-height: 17px;
-	font-weight: normal;
-	width: 46px;
-	margin: 0 5px 0 0;
-}
-
-#layer_menu .ui-checkbox &gt; input:checked + label {
-	display: none;
-}
-
-
-/******************************************************************************/
-/******************************************************************************/
-/*
- * Preview Area
- */
-
-#preview_zone {
-	width: 82%;
-	float: left;
-
-}
-
-
-#preview {
-	width: 100%;
-	height: 400px;
-	border: 1px solid #CCC;
-	border-radius: 3px;
-	text-align: center;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-	cursor: move;
-	float: left;
-}
-
-#preview .content {
-	width: 100%;
-	height: 100%;
-	display: block;
-}
-
-#obj-element {
-	width: 300px;
-	height: 100px;
-	border: 1px solid #CCC;
-	background: #FFF;
-	position: relative;
-}
-
-
-#obj-before {
-	height: 100%;
-	width: 100%;
-	background: #999;
-	border: 1px solid #CCC;
-	text-align: left;
-	display : block;
-	position: absolute;
-	z-index: -1;
-}
-
-#obj-after {
-	height: 100%;
-	width: 100%;
-	background: #DDD;
-	border: 1px solid #CCC;
-	text-align: right;
-	display : block;
-	position: absolute;
-	z-index: -1;
-}
-
-
-/******************************************************************************/
-/******************************************************************************/
-
-/**
- * Controls
- */
-
-.wrap-left {
-	float: left;
-	overflow: hidden;
-}
-
-.wrap-right {
-	float: right;
-	overflow: hidden;
-}
-
-.wrap-left &gt; * {
-	float: left;
-}
-
-.wrap-right &gt; * {
-	float: right;
-}
-
-@media (min-width: 960px) {
-
-	.wrap-left {
-		width: 45%;
-	}
-
-	.wrap-right {
-		width: 55%;
-	}
-}
-
-
-@media (max-width: 959px) {
-
-	.wrap-left {
-		width: 30%;
-	}
-
-	.wrap-right {
-		width: 70%;
-	}
-}
-
-
-#controls {
-	color: #444;
-	margin: 10px 0 0 0;
-}
-
-
-#controls .category {
-	width: 500px;
-	margin: 0 auto 20px;
-	padding: 0;
-
-}
-
-#controls .category .title {
-	width: 100%;
-	height: 1.5em;
-	line-height: 1.5em;
-	color: #AAA;
-	text-align: right;
-}
-
-#controls .category &gt; .group {
-	border: 1px solid #CCC;
-	border-radius: 3px;
-}
-
-
-/**
- * 	Color Picker
- */
-
-@media (min-width: 960px) {
-	#controls .colorpicker {
-		width: 420px;
-	}
-}
-
-@media (max-width: 959px) {
-	#controls .colorpicker {
-		width: 210px;
-	}
-}
-
-#colorpicker {
-	width: 100%;
-	margin: 0 auto;
-}
-
-#colorpicker .gradient {
-	width: 200px;
-	height: 200px;
-	margin: 5px;
-	background: url("https://mdn.mozillademos.org/files/5707/picker_mask_200.png");
-	background: -moz-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
-				-moz-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
-	background: -webkit-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
-				-webkit-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
-	background-color: #F00;
-	float: left;
-}
-
-#colorpicker .hue {
-	width: 200px;
-	height: 30px;
-	margin: 5px;
-	background: url("https://mdn.mozillademos.org/files/5701/hue.png");
-	background: -moz-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
-				#00F 66.66%, #F0F 83.33%, #F00 100%);
-	background: -webkit-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
-				#00F 66.66%, #F0F 83.33%, #F00 100%);
-	float: left;
-}
-
-#colorpicker .alpha {
-	width: 200px;
-	height: 30px;
-	margin: 5px;
-	border: 1px solid #CCC;
-	float: left;
-	background: url("https://mdn.mozillademos.org/files/5705/alpha.png");
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-}
-
-#colorpicker #alpha {
-	width: 100%;
-	height: 100%;
-	background: url("https://mdn.mozillademos.org/files/5703/alpha_mask.png");
-	background: -moz-linear-gradient(left, rgba(255, 0, 0, 0) 0%, rgba(255, 0, 0, 1) 100%);
-}
-
-#colorpicker #gradient_picker {
-	width: 0.5em;
-	height: 0.5em;
-	border-radius: 0.4em;
-	border: 2px solid #CCC;
-	position: relative;
-	top: 20%;
-	left: 20%;
-}
-
-#colorpicker #hue_selector,
-#colorpicker #alpha_selector {
-	width: 3px;
-	height: 100%;
-	border: 1px solid #777;
-	background-color: #FFF;
-	position: relative;
-	top: -1px;
-	left: 0%;
-}
-
-/* input HSV and RGB */
-#colorpicker .info {
-	width: 200px;
-	margin: 5px;
-	float: left;
-}
-
-#colorpicker .info * {
-	float: left;
-}
-
-#colorpicker .info input {
-	margin: 0;
-	text-align: center;
-	width: 30px;
-	-moz-user-select: text;
-	-webkit-user-select: text;
-	-ms-user-select: text;
-}
-
-#colorpicker .info span {
-	height: 20px;
-	width: 30px;
-	text-align: center;
-	line-height: 20px;
-	display: block;
-}
-
-/* Preview color */
-#colorpicker .block {
-	width: 95px;
-	height: 54px;
-	float: left;
-	position: relative;
-}
-
-#colorpicker .preview {
-	margin: 5px;
-	border: 1px solid #CCC;
-	background-image: url("https://mdn.mozillademos.org/files/5705/alpha.png");
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-}
-
-#colorpicker .preview:before {
-	height: 100%;
-	width: 50%;
-	left: 50%;
-	content: "";
-	background: #FFF;
-	position: absolute;
-	z-index: 1;
-}
-
-#colorpicker .preview &gt; * {
-	width: 50%;
-	height: 100%;
-}
-
-#colorpicker #output_color {
-	width: 100%;
-	height: 100%;
-	position: absolute;
-	z-index: 2;
-}
-
-#colorpicker .block .input {
-	float: right;
-}
-
-#colorpicker [data-topic="a"] &gt; span {
-	width: 50px;
-}
-
-#colorpicker [data-topic="hexa"] {
-	float: right;
-	margin: 10px 0 0 0;
-}
-
-#colorpicker [data-topic="hexa"] &gt; span {
-	display: none;
-}
-
-#colorpicker [data-topic="hexa"] &gt; input {
-	width: 85px;
-	padding: 2px 0;
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-}
-
-
-/*
- * UI Components
- */
-
-/* Property */
-
-.property {
-	height: 20px;
-	margin: 10px 0;
-}
-
-.property * {
-	float: left;
-	height: 100%;
-	line-height: 100%;
-}
-
-/* Slider */
-
-#controls .ui-slider-name {
-	margin: 0 10px 0 0;
-}
-
-/*
- * Output code styling
- */
-
-#output {
-	position: relative;
-}
-
-#output .menu {
-	max-width: 70%;
-	height: 20px;
-	position: absolute;
-	top: 2px;
-}
-
-#output .button {
-	width: 90px;
-	height: 22px;
-	margin: 0 5px 0 0;
-	text-align: center;
-	line-height: 20px;
-	font-size: 14px;
-	color: #FFF;
-	background-color: #999;
-	border-top-left-radius: 3px;
-	border-top-right-radius: 3px;
-	bottom: -5px;
-	float:left;
-}
-
-#output .button:hover {
-	color: #FFF;
-	background-color: #666;
-	cursor: pointer;
-}
-
-#output .menu [data-active="true"] {
-	color: #777;
-	background-color: #FFF;
-	border: 1px solid #CCC;
-	border-bottom: none;
-}
-
-#output .menu [data-topic="before"] {
-	left: 100px;
-}
-
-#output .menu [data-topic="after"] {
-	left: 200px;
-}
-
-#output .output {
-	width: 480px;
-	margin: 10px;
-	padding: 10px;
-	overflow: hidden;
-	color: #555;
-	font-size: 14px;
-	border: 1px dashed #CCC;
-	border-radius: 3px;
-	display: none;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-
-	-moz-user-select: text;
-	-webkit-user-select: text;
-	-ms-user-select: text;
-}
-
-#output .css-property {
-	width: 100%;
-	float: left;
-	white-space: pre;
-}
-
-#output .name {
-	width: 35%;
-	float: left;
-}
-
-#output .value {
-	width: 65%;
-	float: left;
-}
-
-</pre>
-
-<h3 id="JavaScript_Content">JavaScript Content</h3>
-
-<pre class="brush: js"><code class="language-js">
-
-'use strict';
-
-/**
- * UI-SlidersManager
- */
-
-var SliderManager = (function SliderManager() {
-
-	var subscribers = {};
-	var sliders = [];
-
-	var Slider = 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 snap = node.getAttribute('data-snap');
-		var topic = node.getAttribute('data-topic');
-
-		this.min = min;
-		this.max = max &gt; 0 ? max : 100;
-		this.step = step === 0 ? 1 : step;
-		this.value = value &lt;= max &amp;&amp; value &gt;= min ? value : (min + max) / 2 | 0;
-		this.snap = snap === "true" ? true : false;
-		this.topic = topic;
-		this.node = node;
-
-		var pointer = document.createElement('div');
-		pointer.className = 'ui-slider-pointer';
-		node.appendChild(pointer);
-		this.pointer = pointer;
-
-		setMouseTracking(node, updateSlider.bind(this));
-
-		sliders[topic] = this;
-		setValue(topic, this.value);
-	}
-
-	var setButtonComponent = function setButtonComponent(node) {
-		var type = node.getAttribute('data-type');
-		var topic = node.getAttribute('data-topic');
-		if (type === "sub") {
-			node.textContent = '-';
-			node.addEventListener("click", function() {
-				decrement(topic);
-			});
-		}
-		if (type === "add") {
-			node.textContent = '+';
-			node.addEventListener("click", function() {
-				increment(topic);
-			});
-		}
-	}
-
-	var setInputComponent = function setInputComponent(node) {
-		var topic		= node.getAttribute('data-topic');
-		var unit_type	= node.getAttribute('data-unit');
-
-		var input = document.createElement('input');
-		var unit = document.createElement('span');
-		unit.textContent = unit_type;
-
-		input.setAttribute('type', 'text');
-		node.appendChild(input);
-		node.appendChild(unit);
-
-		input.addEventListener('click', function(e) {
-			this.select();
-		});
-
-		input.addEventListener('change', function(e) {
-			setValue(topic, e.target.value | 0);
-		});
-
-		subscribe(topic, function(value) {
-			node.children[0].value = value;
-		});
-	}
-
-	var increment = function increment(topic) {
-		var slider = sliders[topic];
-		if (slider === null || slider === undefined)
-			return;
-
-		if (slider.value + slider.step &lt;= slider.max) {
-			slider.value += slider.step;
-			setValue(slider.topic, slider.value)
-			notify.call(slider);
-		}
-	};
-
-	var decrement = function decrement(topic) {
-		var slider = sliders[topic];
-		if (slider === null || slider === undefined)
-			return;
-
-		if (slider.value - slider.step &gt;= slider.min) {
-			slider.value -= slider.step;
-			setValue(topic, slider.value)
-			notify.call(slider);
-		}
-	}
-
-	// this = Slider object
-	var updateSlider = function updateSlider(e) {
-		var node = this.node;
-		var pos = e.pageX - node.offsetLeft;
-		var width = node.clientWidth;
-		var delta = this.max - this.min;
-		var offset = this.pointer.clientWidth + 4; // border width * 2
-
-		if (pos &lt; 0) pos = 0;
-		if (pos &gt; width) pos = width;
-
-		var value = pos * delta / width | 0;
-		var precision = value % this.step;
-		value = value - precision + this.min;
-		if (precision &gt; this.step / 2)
-			value = value + this.step;
-
-		if (this.snap)
-			pos =  (value - this.min) * width / delta;
-
-		this.pointer.style.left = pos - offset/2 + "px";
-		this.value = value;
-		node.setAttribute('data-value', value);
-		notify.call(this);
-	}
-
-	var setValue = function setValue(topic, value) {
-		var slider = sliders[topic];
-
-		if (value &gt; slider.max || value &lt; slider.min)
-			return;
-
-		var delta = slider.max - slider.min;
-		var width = slider.node.clientWidth;
-		var offset = slider.pointer.clientWidth;
-		var pos =  (value - slider.min) * width / delta;
-		slider.value = value;
-		slider.pointer.style.left = pos - offset / 2 + "px";
-		slider.node.setAttribute('data-value', value);
-		notify.call(slider);
-	}
-
-	var setMouseTracking = function setMouseTracking(elem, callback) {
-		elem.addEventListener("mousedown", function(e) {
-			callback(e);
-			document.addEventListener("mousemove", callback);
-		});
-
-		document.addEventListener("mouseup", function(e) {
-			document.removeEventListener("mousemove", callback);
-		});
-	}
-
-	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() {
-		if (subscribers[this.topic] === undefined)
-			return;
-
-		for (var i in subscribers[this.topic]) {
-			subscribers[this.topic][i](this.value);
-		}
-	}
-
-	var init = function init() {
-		var elem, size;
-
-		elem = document.querySelectorAll('.ui-slider-btn-set');
-		size = elem.length;
-		for (var i = 0; i &lt; size; i++)
-			setButtonComponent(elem[i]);
-
-		elem = document.querySelectorAll('.ui-slider-input');
-		size = elem.length;
-		for (var i = 0; i &lt; size; i++)
-			setInputComponent(elem[i]);
-
-		elem = document.querySelectorAll('.ui-slider');
-		size = elem.length;
-		for (var i = 0; i &lt; size; i++)
-			new Slider(elem[i]);
-	}
-
-	return {
-		init : init,
-		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;
-			notify.call(buttons[topic]);
-		}
-		catch(error) {
-			console.log(error, topic, value);
-		}
-	}
-
-	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() {
-		if (subscribers[this.topic] === undefined)
-			return;
-		for (var i = 0; i &lt; 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 &lt; size; i++)
-			new CheckBox(elem[i]);
-	}
-
-	return {
-		init : init,
-		setValue : setValue,
-		subscribe : subscribe,
-		unsubscribe : unsubscribe
-	}
-
-})();
-
-
-window.addEventListener("load", function(){
-	BoxShadow.init();
-});
-
-var BoxShadow = (function BoxShadow() {
-
-	function getElemById(id) {
-		return document.getElementById(id);
-	}
-
-	/**
-	 * RGBA Color class
-	 */
-
-	function Color() {
-		this.r = 0;
-		this.g = 0;
-		this.b = 0;
-		this.a = 1;
-		this.hue = 0;
-		this.saturation = 0;
-		this.value = 0;
-	}
-
-	Color.prototype.copy = function copy(obj) {
-		if(obj instanceof Color !== true) {
-			console.log("Typeof instance not Color");
-			return;
-		}
-
-		this.r = obj.r;
-		this.g = obj.g;
-		this.b = obj.b;
-		this.a = obj.a;
-		this.hue = obj.hue;
-		this.saturation = obj.saturation;
-		this.value = obj.value;
-	}
-
-	Color.prototype.setRGBA = function setRGBA(red, green, blue, alpha) {
-		if (red != undefined)
-			this.r = red | 0;
-		if (green != undefined)
-			this.g = green | 0;
-		if (blue != undefined)
-			this.b = blue | 0;
-		if (alpha != undefined)
-			this.a = alpha | 0;
-	}
-
-	/**
-	 * HSV/HSB (hue, saturation, value / brightness)
-	 * @param hue			0-360
-	 * @param saturation	0-100
-	 * @param value 		0-100
-	 */
-	Color.prototype.setHSV = function setHSV(hue, saturation, value) {
-		this.hue = hue;
-		this.saturation = saturation;
-		this.value = value;
-		this.updateRGB();
-	}
-
-	Color.prototype.updateRGB = function updateRGB() {
-		var sat = this.saturation / 100;
-		var value = this.value / 100;
-		var C = sat * value;
-		var H = this.hue / 60;
-		var X = C * (1 - Math.abs(H % 2 - 1));
-		var m = value - C;
-		var precision = 255;
-
-		C = (C + m) * precision;
-		X = (X + m) * precision;
-		m = m * precision;
-
-		if (H &gt;= 0 &amp;&amp; H &lt; 1) {	this.setRGBA(C, X, m);	return; }
-		if (H &gt;= 1 &amp;&amp; H &lt; 2) {	this.setRGBA(X, C, m);	return; }
-		if (H &gt;= 2 &amp;&amp; H &lt; 3) {	this.setRGBA(m, C, X);	return; }
-		if (H &gt;= 3 &amp;&amp; H &lt; 4) {	this.setRGBA(m, X, C);	return; }
-		if (H &gt;= 4 &amp;&amp; H &lt; 5) {	this.setRGBA(X, m, C);	return; }
-		if (H &gt;= 5 &amp;&amp; H &lt; 6) {	this.setRGBA(C, m, X);	return; }
-	}
-
-	Color.prototype.updateHSV = function updateHSV() {
-		var red		= this.r / 255;
-		var green	= this.g / 255;
-		var blue	= this.b / 255;
-
-		var cmax = Math.max(red, green, blue);
-		var cmin = Math.min(red, green, blue);
-		var delta = cmax - cmin;
-		var hue = 0;
-		var saturation = 0;
-
-		if (delta) {
-			if (cmax === red ) { hue = ((green - blue) / delta); }
-			if (cmax === green ) { hue = 2 + (blue - red) / delta; }
-			if (cmax === blue ) { hue = 4 + (red - green) / delta; }
-			if (cmax) saturation = delta / cmax;
-		}
-
-		this.hue = 60 * hue | 0;
-		if (this.hue &lt; 0) this.hue += 360;
-		this.saturation = (saturation * 100) | 0;
-		this.value = (cmax * 100) | 0;
-	}
-
-	Color.prototype.setHexa = function setHexa(value) {
-		var valid  = /(^#{0,1}[0-9A-F]{6}$)|(^#{0,1}[0-9A-F]{3}$)/i.test(value)
-		if (valid !== true)
-			return;
-
-		if (value[0] === '#')
-			value = value.slice(1, value.length);
-
-		if (value.length === 3)
-			value = value.replace(/([0-9A-F])([0-9A-F])([0-9A-F])/i,"$1$1$2$2$3$3");
-
-		this.r = parseInt(value.substr(0, 2), 16);
-		this.g = parseInt(value.substr(2, 2), 16);
-		this.b = parseInt(value.substr(4, 2), 16);
-
-		this.alpha	= 1;
-	}
-
-	Color.prototype.getHexa = function getHexa() {
-		var r = this.r.toString(16);
-		var g = this.g.toString(16);
-		var b = this.b.toString(16);
-		if (this.r &lt; 16) r = '0' + r;
-		if (this.g &lt; 16) g = '0' + g;
-		if (this.b &lt; 16) b = '0' + b;
-		var value = '#' + r + g + b;
-		return value.toUpperCase();
-	}
-
-	Color.prototype.getRGBA = function getRGBA() {
-
-		var rgb = "(" + this.r + ", " + this.g + ", " + this.b;
-		var a = '';
-		var v = '';
-		if (this.a !== 1) {
-			a = 'a';
-			v = ', ' + this.a;
-		}
-
-		var value = "rgb" + a + rgb + v + ")";
-		return value;
-	}
-
-	Color.prototype.getColor = function getColor() {
-		if (this.a | 0 === 1)
-			return this.getHexa();
-		return this.getRGBA();
-	}
-
-	/**
-	 * Shadow Object
-	 */
-	function Shadow() {
-		this.inset  = false;
-		this.posX   = 5;
-		this.posY   = -5;
-		this.blur   = 5;
-		this.spread = 0;
-		this.color  = new Color();
-
-		var hue			= (Math.random() * 360) | 0;
-		var saturation	= (Math.random() * 75) | 0;
-		var value 		= (Math.random() * 50 + 50) | 0;
-		this.color.setHSV(hue, saturation, value, 1);
-	}
-
-	Shadow.prototype.computeCSS = function computeCSS() {
-		var value = "";
-		if (this.inset === true)
-			value += "inset ";
-		value += this.posX + "px ";
-		value += this.posY + "px ";
-		value += this.blur + "px ";
-		value += this.spread + "px ";
-		value += this.color.getColor();
-
-		return value;
-	}
-
-	Shadow.prototype.toggleInset = function toggleInset(value) {
-		if (value !== undefined || typeof value === "boolean")
-			this.inset = value;
-		else
-			this.inset = this.inset === true ? false : true;
-	}
-
-	Shadow.prototype.copy = function copy(obj) {
-		if(obj instanceof Shadow !== true) {
-			console.log("Typeof instance not Shadow");
-			return;
-		}
-
-		this.inset  = obj.inset;
-		this.posX   = obj.posX;
-		this.posY   = obj.posY;
-		this.blur   = obj.blur;
-		this.spread = obj.spread;
-		this.color.copy(obj.color);
-	}
-
-	/**
-	 * Color Picker
-	 */
-	var ColoPicker = (function ColoPicker() {
-
-		var colorpicker;
-		var hue_area;
-		var gradient_area;
-		var alpha_area;
-		var gradient_picker;
-		var hue_selector;
-		var alpha_selector;
-		var pick_object;
-		var info_rgb;
-		var info_hsv;
-		var info_hexa;
-		var output_color;
-		var color = new Color();
-		var subscribers = [];
-
-		var updateColor = function updateColor(e) {
-			var x = e.pageX - gradient_area.offsetLeft;
-			var y = e.pageY - gradient_area.offsetTop;
-
-			// width and height should be the same
-			var size = gradient_area.clientWidth;
-
-			if (x &gt; size)
-				x = size;
-			if (y &gt; size)
-				y = size;
-
-			if (x &lt; 0) x = 0;
-			if (y &lt; 0) y = 0;
-
-			var value = 100 - (y * 100 / size) | 0;
-			var saturation = x * 100 / size | 0;
-
-			color.setHSV(color.hue, saturation, value);
-			// should update just
-			// color pointer location
-			updateUI();
-			notify("color", color);
-		}
-
-		var updateHue = function updateHue(e) {
-			var x = e.pageX - hue_area.offsetLeft;
-			var width = hue_area.clientWidth;
-
-			if (x &lt; 0) x = 0;
-			if (x &gt; width) x = width;
-
-			var hue = ((360 * x) / width) | 0;
-			if (hue === 360) hue = 359;
-
-			color.setHSV(hue, color.saturation, color.value);
-
-			// should update just
-			// hue pointer location
-			// picker area background
-			// alpha area background
-			updateUI();
-			notify("color", color);
-		}
-
-		var updateAlpha = function updateAlpha(e) {
-			var x = e.pageX - alpha_area.offsetLeft;
-			var width = alpha_area.clientWidth;
-
-			if (x &lt; 0) x = 0;
-			if (x &gt; width) x = width;
-
-			color.a = (x / width).toFixed(2);
-
-			// should update just
-			// alpha pointer location
-			updateUI();
-			notify("color", color);
-		}
-
-		var setHueGfx = function setHueGfx(hue) {
-			var sat = color.saturation;
-			var val = color.value;
-			var alpha = color.a;
-
-			color.setHSV(hue, 100, 100);
-			gradient_area.style.backgroundColor = color.getHexa();
-
-			color.a = 0;
-			var start = color.getRGBA();
-			color.a = 1;
-			var end = color.getRGBA();
-			color.a = alpha;
-
-			var gradient = '-moz-linear-gradient(left, ' +	start + '0%, ' + end + ' 100%)';
-			alpha_area.style.background = gradient;
-		}
-
-		var updateUI = function updateUI() {
-			var x, y;		// coordinates
-			var size;		// size of the area
-			var offset;		// pointer graphic selector offset
-
-			// Set color pointer location
-			size = gradient_area.clientWidth;
-			offset = gradient_picker.clientWidth / 2 + 2;
-
-			x = (color.saturation * size / 100) | 0;
-			y = size - (color.value * size / 100) | 0;
-
-			gradient_picker.style.left = x - offset + "px";
-			gradient_picker.style.top = y - offset + "px";
-
-			// Set hue pointer location
-			size = hue_area.clientWidth;
-			offset = hue_selector.clientWidth/2;
-			x = (color.hue * size / 360 ) | 0;
-			hue_selector.style.left = x - offset + "px";
-
-			// Set alpha pointer location
-			size = alpha_area.clientWidth;
-			offset = alpha_selector.clientWidth/2;
-			x = (color.a * size) | 0;
-			alpha_selector.style.left = x - offset + "px";
-
-			// Set picker area background
-			var nc = new Color();
-			nc.copy(color);
-			if (nc.hue === 360) nc.hue = 0;
-			nc.setHSV(nc.hue, 100, 100);
-			gradient_area.style.backgroundColor = nc.getHexa();
-
-			// Set alpha area background
-			nc.copy(color);
-			nc.a = 0;
-			var start = nc.getRGBA();
-			nc.a = 1;
-			var end = nc.getRGBA();
-			var gradient = '-moz-linear-gradient(left, ' +	start + '0%, ' + end + ' 100%)';
-			alpha_area.style.background = gradient;
-
-			// Update color info
-			notify("color", color);
-			notify("hue", color.hue);
-			notify("saturation", color.saturation);
-			notify("value", color.value);
-			notify("r", color.r);
-			notify("g", color.g);
-			notify("b", color.b);
-			notify("a", color.a);
-			notify("hexa", color.getHexa());
-			output_color.style.backgroundColor = color.getRGBA();
-		}
-
-		var setInputComponent = function setInputComponent(node) {
-			var topic = node.getAttribute('data-topic');
-			var title = node.getAttribute('data-title');
-			var action = node.getAttribute('data-action');
-			title = title === null ? '' : title;
-
-			var input = document.createElement('input');
-			var info = document.createElement('span');
-			info.textContent = title;
-
-			input.setAttribute('type', 'text');
-			input.setAttribute('data-action', 'set-' + action + '-' + topic);
-			node.appendChild(info);
-			node.appendChild(input);
-
-			input.addEventListener('click', function(e) {
-				this.select();
-			});
-
-			input.addEventListener('change', function(e) {
-				if (action === 'HSV')
-					inputChangeHSV(topic);
-				if (action === 'RGB')
-					inputChangeRGB(topic);
-				if (action === 'alpha')
-					inputChangeAlpha(topic);
-				if (action === 'hexa')
-					inputChangeHexa(topic);
-			});
-
-			subscribe(topic, function(value) {
-				node.children[1].value = value;
-			});
-		}
-
-		var inputChangeHSV = function actionHSV(topic) {
-			var selector = "[data-action='set-HSV-" + topic + "']";
-			var node = document.querySelector("#colorpicker " + selector);
-			var value = parseInt(node.value);
-
-			if (typeof value === 'number' &amp;&amp; isNaN(value) === false &amp;&amp;
-				value &gt;= 0 &amp;&amp; value &lt; 360)
-				color[topic] = value;
-
-			color.updateRGB();
-			updateUI();
-		}
-
-		var inputChangeRGB = function inputChangeRGB(topic) {
-			var selector = "[data-action='set-RGB-" + topic + "']";
-			var node = document.querySelector("#colorpicker " + selector);
-			var value = parseInt(node.value);
-
-			if (typeof value === 'number' &amp;&amp; isNaN(value) === false &amp;&amp;
-				value &gt;= 0 &amp;&amp; value &lt;= 255)
-				color[topic] = value;
-
-			color.updateHSV();
-			updateUI();
-		}
-
-		var inputChangeAlpha = function inputChangeAlpha(topic) {
-			var selector = "[data-action='set-alpha-" + topic + "']";
-			var node = document.querySelector("#colorpicker " + selector);
-			var value = parseFloat(node.value);
-
-			if (typeof value === 'number' &amp;&amp; isNaN(value) === false &amp;&amp;
-				value &gt;= 0 &amp;&amp; value &lt;= 1)
-				color.a = value.toFixed(2);
-
-			updateUI();
-		}
-
-		var inputChangeHexa = function inputChangeHexa(topic) {
-			var selector = "[data-action='set-hexa-" + topic + "']";
-			var node = document.querySelector("#colorpicker " + selector);
-			var value = node.value;
-			color.setHexa(value);
-			color.updateHSV();
-			updateUI();
-		}
-
-		var setMouseTracking = function setMouseTracking(elem, callback) {
-
-			elem.addEventListener("mousedown", function(e) {
-				callback(e);
-				document.addEventListener("mousemove", callback);
-			});
-
-			document.addEventListener("mouseup", function(e) {
-				document.removeEventListener("mousemove", callback);
-			});
-		}
-
-		/*
-		 * Observer
-		 */
-		var setColor = function setColor(obj) {
-			if(obj instanceof Color !== true) {
-				console.log("Typeof instance not Color");
-				return;
-			}
-			color.copy(obj);
-			updateUI();
-		}
-
-		var subscribe = function subscribe(topic, callback) {
-			if (subscribers[topic] === undefined)
-				subscribers[topic] = [];
-
-			subscribers[topic].push(callback);
-		}
-
-		var unsubscribe = function unsubscribe(callback) {
-			subscribers.indexOf(callback);
-			subscribers.splice(index, 1);
-		}
-
-		var notify = function notify(topic, value) {
-			for (var i in subscribers[topic])
-				subscribers[topic][i](value);
-		}
-
-		var init = function init() {
-			colorpicker		= getElemById("colorpicker");
-			hue_area		= getElemById("hue");
-			gradient_area	= getElemById("gradient");
-			alpha_area		= getElemById("alpha");
-			gradient_picker	= getElemById("gradient_picker");
-			hue_selector	= getElemById("hue_selector");
-			alpha_selector	= getElemById("alpha_selector");
-			output_color	= getElemById("output_color");
-
-			var elem = document.querySelectorAll('#colorpicker .input');
-			var size = elem.length;
-			for (var i = 0; i &lt; size; i++)
-				setInputComponent(elem[i]);
-
-			setMouseTracking(gradient_area, updateColor);
-			setMouseTracking(hue_area, updateHue);
-			setMouseTracking(alpha_area, updateAlpha);
-
-		}
-
-		return {
-			init : init,
-			setColor : setColor,
-			subscribe : subscribe,
-			unsubscribe : unsubscribe
-		}
-
-	})();
-
-	/**
-	 * 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
-		}
-
-	})();
-
-	/*
-	 * Element Class
-	 */
-	var CssClass = function CssClass(id) {
-		this.left = 0;
-		this.top = 0;
-		this.rotate = 0;
-		this.width = 300;
-		this.height = 100;
-		this.display = true;
-		this.border = true;
-		this.zIndex = -1;
-		this.bgcolor = new Color();
-		this.id = id;
-		this.node = getElemById('obj-' + id);
-		this.object = getElemById(id);
-		this.shadowID = null;
-		this.shadows = []
-		this.render = [];
-		this.init();
-	}
-
-	CssClass.prototype.init = function init() {
-		this.left = ((this.node.parentNode.clientWidth - this.node.clientWidth) / 2) | 0;
-		this.top = ((this.node.parentNode.clientHeight - this.node.clientHeight) / 2) | 0;
-
-		this.setTop(this.top);
-		this.setLeft(this.left);
-		this.setHeight(this.height);
-		this.setWidth(this.width);
-		this.bgcolor.setHSV(0, 0, 100);
-		this.updateBgColor(this.bgcolor);
-	}
-
-	CssClass.prototype.updatePos = function updatePos(deltaX, deltaY) {
-		this.left += deltaX;
-		this.top += deltaY;
-		this.node.style.top = this.top + "px";
-		this.node.style.left = this.left + "px";
-		SliderManager.setValue("left", this.left);
-		SliderManager.setValue("top", this.top);
-	}
-
-	CssClass.prototype.setLeft = function setLeft(value) {
-		this.left = value;
-		this.node.style.left = this.left + "px";
-		OutputManager.updateProperty(this.id, 'left', this.left + 'px');
-	}
-
-	CssClass.prototype.setTop = function setTop(value) {
-		this.top = value;
-		this.node.style.top = this.top + 'px';
-		OutputManager.updateProperty(this.id, 'top', this.top + 'px');
-	}
-
-	CssClass.prototype.setWidth = function setWidth(value) {
-		this.width = value;
-		this.node.style.width = this.width + 'px';
-		OutputManager.updateProperty(this.id, 'width', this.width + 'px');
-	}
-
-	CssClass.prototype.setHeight = function setHeight(value) {
-		this.height = value;
-		this.node.style.height = this.height + 'px';
-		OutputManager.updateProperty(this.id, 'height', this.height + 'px');
-	}
-
-	// Browser support
-	CssClass.prototype.setRotate = function setRotate(value) {
-		var cssvalue = 'rotate(' + value +'deg)';
-
-		this.node.style.transform = cssvalue;
-		this.node.style.webkitTransform = cssvalue;
-		this.node.style.msTransform = cssvalue;
-
-		if (value !== 0) {
-			if (this.rotate === 0) {
-				OutputManager.toggleProperty(this.id, 'transform', true);
-				OutputManager.toggleProperty(this.id, '-webkit-transform', true);
-				OutputManager.toggleProperty(this.id, '-ms-transform', true);
-			}
-		}
-		else {
-			OutputManager.toggleProperty(this.id, 'transform', false);
-			OutputManager.toggleProperty(this.id, '-webkit-transform', false);
-			OutputManager.toggleProperty(this.id, '-ms-transform', false);
-		}
-
-		OutputManager.updateProperty(this.id, 'transform', cssvalue);
-		OutputManager.updateProperty(this.id, '-webkit-transform', cssvalue);
-		OutputManager.updateProperty(this.id, '-ms-transform', cssvalue);
-		this.rotate = value;
-	}
-
-	CssClass.prototype.setzIndex = function setzIndex(value) {
-		this.node.style.zIndex = value;
-		OutputManager.updateProperty(this.id, 'z-index', value);
-		this.zIndex = value;
-	}
-
-	CssClass.prototype.toggleDisplay = function toggleDisplay(value) {
-		if (typeof value !== "boolean" || this.display === value)
-			return;
-
-		this.display = value;
-		var display = this.display === true ? "block" : "none";
-		this.node.style.display = display;
-		this.object.style.display = display;
-	}
-
-	CssClass.prototype.toggleBorder = function toggleBorder(value) {
-		if (typeof value !== "boolean" || this.border === value)
-			return;
-
-		this.border = value;
-		var border = this.border === true ? "1px solid #CCC" : "none";
-		this.node.style.border = border;
-	}
-
-	CssClass.prototype.updateBgColor = function updateBgColor(color) {
-		this.bgcolor.copy(color);
-		this.node.style.backgroundColor = color.getColor();
-		OutputManager.updateProperty(this.id, 'background-color', color.getColor());
-	}
-
-	CssClass.prototype.updateShadows = function updateShadows() {
-		if (this.render.length === 0)
-			OutputManager.toggleProperty(this.id, 'box-shadow', false);
-		if (this.render.length === 1)
-			OutputManager.toggleProperty(this.id, 'box-shadow', true);
-
-		this.node.style.boxShadow = this.render.join(", ");
-		OutputManager.updateProperty(this.id, 'box-shadow', this.render.join(", \n"));
-
-	}
-
-
-	/**
-	 * Tool Manager
-	 */
-	var Tool = (function Tool() {
-
-		var preview;
-		var classes = [];
-		var active = null;
-		var animate = false;
-
-		/*
-		 * Toll actions
-		 */
-		var addCssClass = function addCssClass(id) {
-			classes[id] = new CssClass(id);
-		}
-
-		var setActiveClass = function setActiveClass(id) {
-			active = classes[id];
-			active.shadowID = null;
-			ColoPicker.setColor(classes[id].bgcolor);
-			SliderManager.setValue("top", active.top);
-			SliderManager.setValue("left", active.left);
-			SliderManager.setValue("rotate", active.rotate);
-			SliderManager.setValue("z-index", active.zIndex);
-			SliderManager.setValue("width", active.width);
-			SliderManager.setValue("height", active.height);
-			ButtonManager.setValue("border-state", active.border);
-			active.updateShadows();
-		}
-
-		var disableClass = function disableClass(topic) {
-			classes[topic].toggleDisplay(false);
-			ButtonManager.setValue(topic, false);
-		}
-
-		var addShadow = function addShadow(position) {
-			if (animate === true)
-				return -1;
-
-			active.shadows.splice(position, 0, new Shadow());
-			active.render.splice(position, 0, null);
-		}
-
-		var swapShadow = function swapShadow(id1, id2) {
-			var x = active.shadows[id1];
-			active.shadows[id1] = active.shadows[id2];
-			active.shadows[id2] = x;
-			updateShadowCSS(id1);
-			updateShadowCSS(id2);
-		}
-
-		var deleteShadow = function deleteShadow(position) {
-			active.shadows.splice(position, 1);
-			active.render.splice(position, 1);
-			active.updateShadows();
-		}
-
-		var setActiveShadow = function setActiveShadow(id, glow) {
-			active.shadowID = id;
-			ColoPicker.setColor(active.shadows[id].color);
-			ButtonManager.setValue("inset", active.shadows[id].inset);
-			SliderManager.setValue("blur", active.shadows[id].blur);
-			SliderManager.setValue("spread", active.shadows[id].spread);
-			SliderManager.setValue("posX", active.shadows[id].posX);
-			SliderManager.setValue("posY", active.shadows[id].posY);
-			if (glow === true)
-				addGlowEffect(id);
-		}
-
-		var addGlowEffect = function addGlowEffect(id) {
-			if (animate === true)
-				return;
-
-			animate = true;
-			var store = new Shadow();
-			var shadow = active.shadows[id];
-
-			store.copy(shadow);
-			shadow.color.setRGBA(40, 125, 200, 1);
-			shadow.blur = 10;
-			shadow.spread = 10;
-
-			active.node.style.transition = "box-shadow 0.2s";
-			updateShadowCSS(id);
-
-			setTimeout(function() {
-				shadow.copy(store);
-				updateShadowCSS(id);
-				setTimeout(function() {
-					active.node.style.removeProperty("transition");
-					animate = false;
-				}, 100);
-			}, 200);
-		}
-
-		var updateActivePos = function updateActivePos(deltaX, deltaY) {
-			if (active.shadowID === null)
-				active.updatePos(deltaX, deltaY);
-			else
-				updateShadowPos(deltaX, deltaY);
-		}
-
-		/*
-		 * Shadow properties
-		 */
-		var updateShadowCSS = function updateShadowCSS(id) {
-			active.render[id] = active.shadows[id].computeCSS();
-			active.updateShadows();
-		}
-
-		var toggleShadowInset = function toggleShadowInset(value) {
-			if (active.shadowID === null)
-				return;
-			active.shadows[active.shadowID].toggleInset(value);
-			updateShadowCSS(active.shadowID);
-		}
-
-		var updateShadowPos = function updateShadowPos(deltaX, deltaY) {
-			var shadow = active.shadows[active.shadowID];
-			shadow.posX += deltaX;
-			shadow.posY += deltaY;
-			SliderManager.setValue("posX", shadow.posX);
-			SliderManager.setValue("posY", shadow.posY);
-			updateShadowCSS(active.shadowID);
-		}
-
-		var setShadowPosX = function setShadowPosX(value) {
-			if (active.shadowID === null)
-				return;
-			active.shadows[active.shadowID].posX = value;
-			updateShadowCSS(active.shadowID);
-		}
-
-		var setShadowPosY = function setShadowPosY(value) {
-			if (active.shadowID === null)
-				return;
-			active.shadows[active.shadowID].posY = value;
-			updateShadowCSS(active.shadowID);
-		}
-
-		var setShadowBlur = function setShadowBlur(value) {
-			if (active.shadowID === null)
-				return;
-			active.shadows[active.shadowID].blur = value;
-			updateShadowCSS(active.shadowID);
-		}
-
-		var setShadowSpread = function setShadowSpread(value) {
-			if (active.shadowID === null)
-				return;
-			active.shadows[active.shadowID].spread = value;
-			updateShadowCSS(active.shadowID);
-		}
-
-		var updateShadowColor = function updateShadowColor(color) {
-			active.shadows[active.shadowID].color.copy(color);
-			updateShadowCSS(active.shadowID);
-		}
-
-		/*
-		 * Element Properties
-		 */
-		var updateColor = function updateColor(color) {
-			if (active.shadowID === null)
-				active.updateBgColor(color);
-			else
-				updateShadowColor(color);
-		}
-
-		var init = function init() {
-			preview = getElemById("preview");
-
-			ColoPicker.subscribe("color", updateColor);
-			PreviewMouseTracking.subscribe(updateActivePos);
-
-			// Affects shadows
-			ButtonManager.subscribe("inset", toggleShadowInset);
-			SliderManager.subscribe("posX", setShadowPosX);
-			SliderManager.subscribe("posY", setShadowPosY);
-			SliderManager.subscribe("blur", setShadowBlur);
-			SliderManager.subscribe("spread", setShadowSpread);
-
-			// Affects element
-			SliderManager.subscribe("top", function(value){
-				active.setTop(value);
-			});
-			SliderManager.subscribe("left", function(value){
-				active.setLeft(value);
-			});
-			SliderManager.subscribe("rotate", function(value) {
-				if (active == classes["element"])
-					return;
-				active.setRotate(value);
-			});
-
-			SliderManager.subscribe("z-index", function(value) {
-				if (active == classes["element"])
-					return;
-				active.setzIndex(value);
-			});
-
-			SliderManager.subscribe("width", function(value) {
-				active.setWidth(value)
-			});
-
-			SliderManager.subscribe("height", function(value) {
-				active.setHeight(value)
-			});
-
-			// Actions
-			classes['before'].top = -30;
-			classes['before'].left = -30;
-			classes['after'].top = 30;
-			classes['after'].left = 30;
-			classes['before'].toggleDisplay(false);
-			classes['after'].toggleDisplay(false);
-			ButtonManager.setValue('before', false);
-			ButtonManager.setValue('after', false);
-
-			ButtonManager.subscribe("before", classes['before'].toggleDisplay.bind(classes['before']));
-			ButtonManager.subscribe("after", classes['after'].toggleDisplay.bind(classes['after']));
-
-			ButtonManager.subscribe("border-state", function(value) {
-				active.toggleBorder(value);
-			});
-
-		}
-
-		return {
-			init 			: init,
-			addShadow		: addShadow,
-			swapShadow		: swapShadow,
-			addCssClass		: addCssClass,
-			disableClass	: disableClass,
-			deleteShadow	: deleteShadow,
-			setActiveClass	: setActiveClass,
-			setActiveShadow : setActiveShadow
-		}
-
-	})();
-
-	/**
-	 * Layer Manager
-	 */
-	var LayerManager = (function LayerManager() {
-		var stacks = [];
-		var active = {
-			node : null,
-			stack : null
-		}
-		var elements = {};
-
-		var mouseEvents = function mouseEvents(e) {
-			var node = e.target;
-			var type = node.getAttribute('data-type');
-
-			if (type === 'subject')
-				setActiveStack(stacks[node.id]);
-
-			if (type === 'disable') {
-				Tool.disableClass(node.parentNode.id);
-				setActiveStack(stacks['element']);
-			}
-
-			if (type === 'add')
-				active.stack.addLayer();
-
-			if (type === 'layer')
-				active.stack.setActiveLayer(node);
-
-			if (type === 'delete')
-				active.stack.deleteLayer(node.parentNode);
-
-			if (type === 'move-up')
-				active.stack.moveLayer(1);
-
-			if (type === 'move-down')
-				active.stack.moveLayer(-1);
-		}
-
-		var setActiveStack = function setActiveStack(stackObj) {
-			active.stack.hide();
-			active.stack = stackObj;
-			active.stack.show();
-		}
-
-		/*
-		 * Stack object
-		 */
-		var Stack = function Stack(subject) {
-			var S = document.createElement('div');
-			var title = document.createElement('div');
-			var stack = document.createElement('div');
-
-			S.className = 'container';
-			stack.className = 'stack';
-			title.className = 'title';
-			title.textContent = subject.getAttribute('data-title');
-			S.appendChild(title);
-			S.appendChild(stack);
-
-			this.id = subject.id;
-			this.container = S;
-			this.stack = stack;
-			this.subject = subject;
-			this.order = [];
-			this.uid = 0;
-			this.count = 0;
-			this.layer = null;
-			this.layerID = 0;
-		}
-
-		Stack.prototype.addLayer = function addLayer() {
-			if (Tool.addShadow(this.layerID) == -1)
-				return;
-
-			var uid = this.getUID();
-			var layer = this.createLayer(uid);
-
-			if (this.layer === null &amp;&amp; this.stack.children.length &gt;= 1)
-				this.layer = this.stack.children[0];
-
-			this.stack.insertBefore(layer, this.layer);
-			this.order.splice(this.layerID, 0, uid);
-			this.count++;
-			this.setActiveLayer(layer);
-		}
-
-		Stack.prototype.createLayer = function createLayer(uid) {
-			var layer = document.createElement('div');
-			var del = document.createElement('span');
-
-			layer.className = 'node';
-			layer.setAttribute('data-shid', uid);
-			layer.setAttribute('data-type', 'layer');
-			layer.textContent = 'Ombre ' + uid;
-
-			del.className = 'delete';
-			del.setAttribute('data-type', 'delete');
-
-			layer.appendChild(del);
-			return layer;
-		}
-
-		Stack.prototype.getUID = function getUID() {
-			return this.uid++;
-		}
-
-		// SOLVE IE BUG
-		Stack.prototype.moveLayer = function moveLayer(direction) {
-			if (this.count &lt;= 1 || this.layer === null)
-				return;
-			if (direction === -1 &amp;&amp; this.layerID === (this.count - 1) )
-				return;
-			if (direction === 1 &amp;&amp; this.layerID === 0 )
-				return;
-
-			if (direction === -1) {
-				var before = null;
-				Tool.swapShadow(this.layerID, this.layerID + 1);
-				this.swapOrder(this.layerID, this.layerID + 1);
-				this.layerID += 1;
-
-				if (this.layerID + 1 !== this.count)
-					before = this.stack.children[this.layerID + 1];
-
-				this.stack.insertBefore(this.layer, before);
-				Tool.setActiveShadow(this.layerID, false);
-			}
-
-			if (direction === 1) {
-				Tool.swapShadow(this.layerID, this.layerID - 1);
-				this.swapOrder(this.layerID, this.layerID - 1);
-				this.layerID -= 1;
-				this.stack.insertBefore(this.layer, this.stack.children[this.layerID]);
-				Tool.setActiveShadow(this.layerID, false);
-			}
-		}
-
-		Stack.prototype.swapOrder = function swapOrder(pos1, pos2) {
-			var x = this.order[pos1];
-			this.order[pos1] = this.order[pos2];
-			this.order[pos2] = x;
-		}
-
-		Stack.prototype.deleteLayer = function deleteLayer(node) {
-			var shadowID =  node.getAttribute('data-shid') | 0;
-			var index = this.order.indexOf(shadowID);
-			this.stack.removeChild(this.stack.children[index]);
-			this.order.splice(index, 1);
-			this.count--;
-
-			Tool.deleteShadow(index);
-
-			if (index &gt; this.layerID)
-				return;
-
-			if (index == this.layerID) {
-				if (this.count &gt;= 1) {
-					this.layerID = 0;
-					this.setActiveLayer(this.stack.children[0], true);
-				}
-				else {
-					this.layer = null;
-					this.show();
-				}
-			}
-
-			if (index &lt; this.layerID) {
-				this.layerID--;
-				Tool.setActiveShadow(this.layerID, true);
-			}
-
-		}
-
-		Stack.prototype.setActiveLayer = function setActiveLayer(node) {
-			elements.shadow_properties.style.display = 'block';
-			elements.element_properties.style.display = 'none';
-
-			if (this.layer)
-				this.layer.removeAttribute('data-active');
-
-			this.layer = node;
-			this.layer.setAttribute('data-active', 'layer');
-
-			var shadowID =  node.getAttribute('data-shid') | 0;
-			this.layerID = this.order.indexOf(shadowID);
-			Tool.setActiveShadow(this.layerID, true);
-		}
-
-		Stack.prototype.unsetActiveLayer = function unsetActiveLayer() {
-			if (this.layer)
-				this.layer.removeAttribute('data-active');
-
-			this.layer = null;
-			this.layerID = 0;
-		}
-
-		Stack.prototype.hide = function hide() {
-			this.unsetActiveLayer();
-			this.subject.removeAttribute('data-active');
-			var style = this.container.style;
-			style.left = '100%';
-			style.zIndex = '0';
-		}
-
-		Stack.prototype.show = function show() {
-			elements.shadow_properties.style.display = 'none';
-			elements.element_properties.style.display = 'block';
-
-			if (this.id === 'element') {
-				elements.zIndex.style.display = 'none';
-				elements.transform_rotate.style.display = 'none';
-			}
-			else {
-				elements.zIndex.style.display = 'block';
-				elements.transform_rotate.style.display = 'block';
-			}
-
-			this.subject.setAttribute('data-active', 'subject');
-			var style = this.container.style;
-			style.left = '0';
-			style.zIndex = '10';
-			Tool.setActiveClass(this.id);
-		}
-
-		function init() {
-
-			var elem, size;
-			var layerManager = getElemById("layer_manager");
-			var layerMenu = getElemById("layer_menu");
-			var container = getElemById("stack_container");
-
-			elements.shadow_properties = getElemById('shadow_properties');
-			elements.element_properties = getElemById('element_properties');
-			elements.transform_rotate = getElemById('transform_rotate');
-			elements.zIndex = getElemById('z-index');
-
-			elem = document.querySelectorAll('#layer_menu [data-type="subject"]');
-			size = elem.length;
-
-			for (var i = 0; i &lt; size; i++) {
-				var S = new Stack(elem[i]);
-				stacks[elem[i].id] = S;
-				container.appendChild(S.container);
-				Tool.addCssClass(elem[i].id);
-			}
-
-			active.stack = stacks['element'];
-			stacks['element'].show();
-
-			layerManager.addEventListener("click", mouseEvents);
-			layerMenu.addEventListener("click", mouseEvents);
-
-			ButtonManager.subscribe("before", function(value) {
-				if (value === false &amp;&amp; active.stack === stacks['before'])
-					setActiveStack(stacks['element'])
-				if (value === true &amp;&amp; active.stack !== stacks['before'])
-					setActiveStack(stacks['before'])
-			});
-
-			ButtonManager.subscribe("after", function(value) {
-				if (value === false &amp;&amp; active.stack === stacks['after'])
-					setActiveStack(stacks['element'])
-				if (value === true &amp;&amp; active.stack !== stacks['after'])
-					setActiveStack(stacks['after'])
-			});
-		}
-
-		return {
-			init : init
-		}
-	})();
-
-	/*
-	 * OutputManager
-	 */
-	var OutputManager = (function OutputManager() {
-		var classes = [];
-		var buttons = [];
-		var active = null;
-		var menu = null;
-		var button_offset = 0;
-
-		var crateOutputNode = function(topic, property) {
-
-			var prop = document.createElement('div');
-			var name = document.createElement('span');
-			var value = document.createElement('span');
-
-			var pmatch = property.match(/(^([a-z0-9\-]*)=\[([a-z0-9\-\"]*)\])|^([a-z0-9\-]*)/i);
-
-			name.textContent = '\t' + pmatch[4];
-
-			if (pmatch[3] !== undefined) {
-				name.textContent = '\t' + pmatch[2];
-				value.textContent = pmatch[3] + ';';
-			}
-
-			name.textContent += ': ';
-			prop.className = 'css-property';
-			name.className = 'name';
-			value.className = 'value';
-			prop.appendChild(name);
-			prop.appendChild(value);
-
-			classes[topic].node.appendChild(prop);
-			classes[topic].line[property] = prop;
-			classes[topic].prop[property] = value;
-		}
-
-		var OutputClass = function OutputClass(node) {
-			var topic = node.getAttribute('data-topic');
-			var prop = node.getAttribute('data-prop');
-			var name = node.getAttribute('data-name');
-			var properties = prop.split(' ');
-
-			classes[topic] = {};
-			classes[topic].node = node;
-			classes[topic].prop = [];
-			classes[topic].line = [];
-			classes[topic].button = new Button(topic);
-
-			var open_decl = document.createElement('div');
-			var end_decl = document.createElement('div');
-
-			open_decl.textContent = name + ' {';
-			end_decl.textContent = '}';
-			node.appendChild(open_decl);
-
-			for (var i in properties)
-				crateOutputNode(topic, properties[i]);
-
-			node.appendChild(end_decl);
-		}
-
-		var Button = function Button(topic) {
-			var button = document.createElement('div');
-
-			button.className = 'button';
-			button.textContent = topic;
-			button.style.left = button_offset + 'px';
-			button_offset += 100;
-
-			button.addEventListener("click", function() {
-				toggleDisplay(topic);
-			})
-
-			menu.appendChild(button);
-			return button;
-		}
-
-		var toggleDisplay = function toggleDisplay(topic) {
-			active.button.removeAttribute('data-active');
-			active.node.style.display = 'none';
-			active = classes[topic];
-			active.node.style.display = 'block';
-			active.button.setAttribute('data-active', 'true');
-		}
-
-		var toggleButton = function toggleButton(topic, value) {
-			var display = (value === true) ? 'block' : 'none';
-			classes[topic].button.style.display = display;
-
-			if (value === true)
-				toggleDisplay(topic);
-			else
-				toggleDisplay('element');
-		}
-
-		var updateProperty = function updateProperty(topic, property, data) {
-			try {
-				classes[topic].prop[property].textContent = data + ';';
-			}
-			catch(error) {
-				// console.log("ERROR undefined : ", topic, property, data);
-			}
-		}
-
-		var toggleProperty = function toggleProperty(topic, property, value) {
-			var display = (value === true) ? 'block' : 'none';
-			try {
-				classes[topic].line[property].style.display = display;
-			}
-			catch(error) {
-				// console.log("ERROR undefined : ",classes, topic, property, value);
-			}
-		}
-
-		var init = function init() {
-
-			menu = getElemById('menu');
-
-			var elem = document.querySelectorAll('#output .output');
-			var size = elem.length;
-			for (var i = 0; i &lt; size; i++)
-				OutputClass(elem[i]);
-
-			active = classes['element'];
-			toggleDisplay('element');
-
-			ButtonManager.subscribe("before", function(value) {
-				toggleButton('before', value);
-			});
-
-			ButtonManager.subscribe("after", function(value) {
-				toggleButton('after', value);
-			});
-		}
-
-		return {
-			init : init,
-			updateProperty : updateProperty,
-			toggleProperty : toggleProperty
-		}
-
-	})();
-
-
-	/**
-	 * Init Tool
-	 */
-	var init = function init() {
-		ButtonManager.init();
-		OutputManager.init();
-		ColoPicker.init();
-		SliderManager.init();
-		LayerManager.init();
-		PreviewMouseTracking.init("preview");
-		Tool.init();
-	}
-
-	return {
-		init : init
-	}
-
-})();
-
-
-</code></pre>
-</div>
-
-<div>{{EmbedLiveSample('box-shadow_generator', '100%', '1100px', '')}}</div>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="https://cssgenerator.org/box-shadow-css-generator.html">Le générateur d'ombres CSS</a></li>
-</ul>
diff --git a/files/fr/web/css/css_backgrounds_and_borders/border-image_generator/index.html b/files/fr/web/css/css_backgrounds_and_borders/border-image_generator/index.html
new file mode 100644
index 0000000000..9aa3cd49f6
--- /dev/null
+++ b/files/fr/web/css/css_backgrounds_and_borders/border-image_generator/index.html
@@ -0,0 +1,2627 @@
+---
+title: Générateur de border-image
+slug: Web/CSS/CSS_Backgrounds_and_Borders/Border-image_generator
+tags:
+  - CSS
+  - Outil
+translation_of: Web/CSS/CSS_Background_and_Borders/Border-image_generator
+original_slug: Web/CSS/CSS_Background_and_Borders/Border-image_generator
+---
+<p>Cet outil peut être utilisé afin de générer des valeurs pour la propriété {{cssxref("border-image")}}.</p>
+
+<div class="hidden">
+<h2 id="Border_Image_Generator" name="Border_Image_Generator">Générateur border-image</h2>
+
+<h3 id="Contenu_HTML">Contenu HTML</h3>
+
+<pre class="brush: html">    &lt;div id="container"&gt;
+
+        &lt;div id="gallery"&gt;
+            &lt;div id="image-gallery"&gt;
+                &lt;img class="image" src="https://mdn.mozillademos.org/files/6007/border-image-1.png" data-stateID="border1"/&gt;
+                &lt;img class="image" src="https://mdn.mozillademos.org/files/6009/border-image-2.png" data-stateID="border2"/&gt;
+                &lt;img class="image" src="https://mdn.mozillademos.org/files/6011/border-image-3.png" data-stateID="border3"/&gt;
+                &lt;img class="image" src="https://mdn.mozillademos.org/files/6013/border-image-4.png" data-stateID="border4"/&gt;
+                &lt;img class="image" src="https://mdn.mozillademos.org/files/6015/border-image-5.png" data-stateID="border5"/&gt;
+                &lt;img class="image" src="https://mdn.mozillademos.org/files/6017/border-image-6.svg" data-stateID="border6"/&gt;
+            &lt;/div&gt;
+        &lt;/div&gt;
+
+        &lt;div id="load-actions" class="group section"&gt;
+            &lt;div id="toggle-gallery" data-action="hide"&gt; &lt;/div&gt;
+            &lt;div id="load-image" class="button"&gt; Upload image &lt;/div&gt;
+            &lt;input id="remote-url" type="text" placeholder="Charger une image depuis une  URL"/&gt;
+            &lt;div id="load-remote" class="button"&gt; &lt;/div&gt;
+        &lt;/div&gt;
+
+        &lt;div id="general-controls" class="group section"&gt;
+            &lt;div class="name"&gt; Options &lt;/div&gt;
+            &lt;div class="separator"&gt;&lt;/div&gt;
+            &lt;div class="property"&gt;
+                &lt;div class="name"&gt;Échelle&lt;/div&gt;
+                &lt;div class="ui-input-slider" data-topic="scale"
+                    data-unit="%" data-max="300" data-sensivity="10"&gt;
+                &lt;/div&gt;
+            &lt;/div&gt;
+            &lt;div class="separator"&gt;&lt;/div&gt;
+            &lt;div class="property"&gt;
+                &lt;div class="name"&gt;Déplaçable&lt;/div&gt;
+                &lt;div class="ui-checkbox" data-topic='drag-subject'&gt;&lt;/div&gt;
+            &lt;/div&gt;
+            &lt;div class="property right"&gt;
+                &lt;div class="name"&gt;Hauteur de la section&lt;/div&gt;
+                &lt;div class="ui-input-slider" data-topic="preview-area-height"
+                    data-min="400" data-max="1000"&gt;
+                &lt;/div&gt;
+            &lt;/div&gt;
+        &lt;/div&gt;
+
+        &lt;div id="preview_section" class="group section"&gt;
+            &lt;div id="subject"&gt;
+                &lt;div class="guideline" data-axis="Y" data-topic="slice-top"&gt;&lt;/div&gt;
+                &lt;div class="guideline" data-axis="X" data-topic="slice-right"&gt;&lt;/div&gt;
+                &lt;div class="guideline" data-axis="Y" data-topic="slice-bottom"&gt;&lt;/div&gt;
+                &lt;div class="guideline" data-axis="X" data-topic="slice-left"&gt;&lt;/div&gt;
+            &lt;/div&gt;
+            &lt;div id="preview"&gt; &lt;/div&gt;
+        &lt;/div&gt;
+
+        &lt;!-- controls --&gt;
+        &lt;div id="controls" class="group section"&gt;
+
+            &lt;!-- border-image-slice --&gt;
+            &lt;div id="border-slice-control" class="category"&gt;
+                &lt;div class="title"&gt; border-image-slice &lt;/div&gt;
+                &lt;div class="property"&gt;
+                    &lt;div class="name"&gt;fill&lt;/div&gt;
+                    &lt;div class="ui-checkbox" data-topic='slice-fill'&gt;&lt;/div&gt;
+                &lt;/div&gt;
+            &lt;/div&gt;
+
+            &lt;!-- border-image-width --&gt;
+            &lt;div id="border-width-control" class="category"&gt;
+                &lt;div class="title"&gt; border-image-width &lt;/div&gt;
+            &lt;/div&gt;
+
+            &lt;!-- border-image-outset --&gt;
+            &lt;div id="border-outset-control" class="category"&gt;
+                &lt;div class="title"&gt; border-image-outset &lt;/div&gt;
+            &lt;/div&gt;
+
+            &lt;!-- other-settings --&gt;
+            &lt;div id="aditional-properties" class="category"&gt;
+                &lt;div class="title"&gt; Autres propriétés &lt;/div&gt;
+                &lt;div class="property"&gt;
+                    &lt;div class="name"&gt; repeat-x &lt;/div&gt;
+                    &lt;div class="ui-dropdown border-repeat" data-topic="image-repeat-X" data-selected="2"&gt;
+                        &lt;div data-value="0"&gt;repeat&lt;/div&gt;
+                        &lt;div data-value="0"&gt;stretch&lt;/div&gt;
+                        &lt;div data-value="0"&gt;round&lt;/div&gt;
+                    &lt;/div&gt;
+                &lt;/div&gt;
+                &lt;div class="property"&gt;
+                    &lt;div class="name"&gt; repeat-y &lt;/div&gt;
+                    &lt;div class="ui-dropdown border-repeat" data-topic="image-repeat-Y" data-selected="2"&gt;
+                        &lt;div data-value="1"&gt;repeat&lt;/div&gt;
+                        &lt;div data-value="1"&gt;stretch&lt;/div&gt;
+                        &lt;div data-value="1"&gt;round&lt;/div&gt;
+                    &lt;/div&gt;
+                &lt;/div&gt;
+                &lt;div class="property"&gt;
+                    &lt;div class="ui-input-slider" data-topic="font-size" data-info="em size"
+                        data-unit="px" data-value="12" data-sensivity="3"&gt;
+                    &lt;/div&gt;
+                &lt;/div&gt;
+
+                &lt;div class="property"&gt;
+                    &lt;div class="ui-input-slider" data-topic="preview-width" data-info="width"
+                         data-unit=" px" data-min="10" data-max="10000" data-sensivity="3"&gt;&lt;/div&gt;
+                &lt;/div&gt;
+                &lt;div class="property"&gt;
+                    &lt;div class="ui-input-slider" data-topic="preview-height" data-info="height"
+                        data-unit=" px" data-min="10" data-max="10000" data-sensivity="3"&gt;
+                    &lt;/div&gt;
+                &lt;/div&gt;
+            &lt;/div&gt;
+
+
+            &lt;div id="output" class="category"&gt;
+                &lt;div class="title"&gt; Code CSS &lt;/div&gt;
+                &lt;div class="css-property"&gt;
+                    &lt;span class="name"&gt; border-image-slice: &lt;/span&gt;
+                    &lt;span id="out-border-slice" class="value"&gt; &lt;/span&gt;
+                &lt;/div&gt;
+                &lt;div class="css-property"&gt;
+                    &lt;span class="name"&gt; border-image-width: &lt;/span&gt;
+                    &lt;span id="out-border-width" class="value"&gt; &lt;/span&gt;
+                &lt;/div&gt;
+                &lt;div class="css-property"&gt;
+                    &lt;span class="name"&gt; border-image-outset: &lt;/span&gt;
+                    &lt;span id="out-border-outset" class="value"&gt; &lt;/span&gt;
+                &lt;/div&gt;
+                &lt;div class="css-property"&gt;
+                    &lt;span class="name"&gt; border-image-repeat: &lt;/span&gt;
+                    &lt;span id="out-border-repeat" class="value"&gt; &lt;/span&gt;
+                &lt;/div&gt;
+                &lt;div class="css-property"&gt;
+                    &lt;span class="name"&gt; border-image-source: &lt;/span&gt;
+                    &lt;span id="out-border-source" class="value"&gt;  &lt;/span&gt;
+                &lt;/div&gt;
+            &lt;/div&gt;
+
+        &lt;/div&gt;
+    &lt;/div&gt;</pre>
+
+<h3 id="CSS_Content">CSS Content</h3>
+
+<pre class="brush: css">/*  GRID OF TWELVE
+ * ========================================================================== */
+
+.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 {
+	height: 20px;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	-moz-user-select: none;
+	user-select: none;
+}
+
+.ui-input-slider * {
+	float: left;
+	height: 100%;
+	line-height: 100%;
+}
+
+/* Input Slider */
+
+.ui-input-slider &gt; 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 DropDown
+ */
+
+/* Dropdown */
+
+.ui-dropdown {
+	height: 2em;
+	width: 120px;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	font-size: 12px;
+
+	background-image: url("https://mdn.mozillademos.org/files/6037/drop_arrow_icon.png");
+	background-position: right center;
+	background-repeat: no-repeat;
+	background-color: #359740;
+
+	position: relative;
+
+	-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;
+}
+
+.ui-dropdown:hover {
+	cursor: pointer;
+	background-color: #208B20;
+}
+
+/* Dropdown Select Button */
+
+.ui-dropdown-select {
+	height: inherit;
+	padding: 0 0.75em;
+	color: #FFF;
+	line-height: 2em;
+}
+
+/* Dropdown List */
+
+.ui-dropdown-list {
+	width: 100%;
+	height: 150px;
+	max-height: 150px;
+	margin: 0;
+	padding: 0 0.3em;
+
+	border: 3px solid #3490D2;
+	border-color: #208B20;
+	background: #666;
+	background-color: #EEF1F5;
+	color: #000;
+
+	position: absolute;
+	top: 2em;
+	left: 0;
+	z-index: 100;
+
+	overflow: hidden;
+	transition: all 0.3s;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+.ui-dropdown-list:hover {
+	overflow: auto;
+}
+
+.ui-dropdown-list[data-hidden='true'] {
+	height: 0 !important;
+	opacity: 0;
+	visibility: hidden;
+}
+
+.ui-dropdown[data-position='left'] .ui-dropdown-list {
+	left: -100%;
+	top: 0;
+}
+
+.ui-dropdown[data-position='right'] .ui-dropdown-list {
+	left: 100%;
+	top: 0;
+}
+
+.ui-dropdown-list &gt; div {
+	width: 100%;
+	height: 1.6em;
+	margin: 0.3em 0;
+	padding: 0.3em;
+	line-height: 1em;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+.ui-dropdown-list &gt; div:hover {
+	background: #3490D2;
+	color:#FFF;
+	border-radius: 2px;
+	cursor: pointer;
+}
+
+
+/*************************************************************************************/
+/*************************************************************************************/
+
+/*
+ * UI Button
+ */
+
+/* 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 &gt; input {
+ 	display: none;
+}
+
+.ui-checkbox &gt; 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: 2px;
+	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 &gt; label:hover {
+	cursor: pointer;
+}
+
+.ui-checkbox &gt; input:checked + label {
+	background-image: url("https://mdn.mozillademos.org/files/5681/checked.png");
+	background-color: #379B4A;
+}
+
+/*************************************************************************************/
+/*************************************************************************************/
+
+/*
+ * BORDER IMAGE GENERATOR TOOL
+ */
+
+body {
+	width: 100%;
+	margin: 0 auto;
+	padding: 0 0 20px 0;
+
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+
+	/*background: url("https://mdn.mozillademos.org/files/6025/grain.png");*/
+	border: 1px solid #EEE;
+
+	-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;
+}
+
+body[data-move='X'] {
+	cursor: w-resize !important;
+}
+
+body[data-move='Y'] {
+	cursor: s-resize !important;
+}
+
+#container {
+	width: 100%;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+[data-draggable='true']:hover {
+	cursor: move;
+}
+
+[data-draggable='true']:hover &gt; * {
+	cursor: default;
+}
+
+
+
+/******************************************************************************/
+/******************************************************************************/
+
+/*
+ * Border Image Picker
+ */
+
+#gallery {
+	box-shadow: 0 0 3px 0 #BABABA;
+}
+
+#image-gallery {
+	width: 600px;
+	height: 100px;
+	margin: 0 auto;
+	transition: margin 0.4s;
+}
+
+#image-gallery .image {
+	height: 80px;
+	float: left;
+	margin: 10px;
+	opacity: 0.5;
+	background-color: #FFF;
+	box-shadow: 0px 0px 3px 1px #BABABA;
+}
+
+#image-gallery .image[selected="true"] {
+	box-shadow: 0px 0px 3px 1px #3BBA52;
+	opacity: 1;
+}
+
+#image-gallery .image:hover {
+	cursor: pointer;
+	box-shadow: 0px 0px 3px 1px #30ACE5;
+	opacity: 1;
+}
+
+#image-gallery[data-collapsed='true'] {
+	margin-top: -100px;
+}
+
+/* Load Menu */
+
+#load-actions {
+	margin: 10px 0;
+}
+
+#toggle-gallery {
+	width: 30px;
+	height: 25px;
+	margin: 10px;
+	color: #FFF;
+
+	background-image: url('https://mdn.mozillademos.org/files/6005/arrow-up-white.png');
+	background-repeat: no-repeat;
+	background-position: top 4px center;
+	background-color: #888888 !important;
+
+	border-radius: 2px;
+	float: left;
+}
+
+#toggle-gallery:hover {
+	cursor: pointer;
+}
+
+#toggle-gallery[data-action='show'] {
+	background-image: url('https://mdn.mozillademos.org/files/6001/arrow-down-white.png');
+	background-color: #888888 !important;
+}
+
+#toggle-gallery[data-action='hide'] {
+	background-image: url('https://mdn.mozillademos.org/files/6005/arrow-up-white.png');
+}
+
+.button {
+	width: 100px;
+	height: 25px;
+	margin: 10px;
+	color: #FFF;
+	text-align: center;
+	font-size: 12px;
+	line-height: 25px;
+	background-color: #379B4A;
+	border-radius: 2px;
+	float: left;
+}
+
+.button:hover {
+	cursor: pointer;
+	background-color: #3380C4;
+}
+
+#load-image {
+	float: left;
+}
+
+#load-remote {
+	width: 30px;
+	background-image: url('https://mdn.mozillademos.org/files/6003/arrow-right-white.png');
+	background-repeat: no-repeat;
+	background-position: center center;
+}
+
+#remote-url {
+	width: 200px;
+	height: 23px;
+	margin: 10px;
+	padding: 0 5px;
+	border: 1px solid #379B4A;
+	border-radius: 2px;
+	float: left;
+
+	transition: width 0.5s;
+}
+
+#remote-url:focus {
+	box-shadow: 0px 0px 3px -1px #379B4A; /*#68ACE8; */
+	border-color: rgba(55, 155, 74, 0.5);
+	width: 450px;
+}
+
+/*
+ * Visible Area
+ */
+
+#preview_section {
+	position: relative;
+	min-height: 400px;
+}
+
+/* Image Control */
+
+#subject {
+	width: 300px;
+	height: 300px;
+	background-repeat: no-repeat;
+	background-size: 100%;
+	background-color: #FFF;
+	border: 1px solid #CCC;
+
+	position: absolute;
+	z-index: 10;
+	top: 15%;
+	left: 10%;
+
+	box-shadow: 0 0 3px 0 #BABABA;
+	transition-property: width, height;
+	transition-duration: 0.1s;
+}
+
+#subject .guideline {
+	background-color: rgba(255, 255, 255, 0.7);
+	border: 1px solid rgba(0, 0, 0, 0.3);
+	position: absolute;
+}
+
+#subject .guideline:hover {
+	background-color: #F00;
+}
+
+#subject .guideline[data-active] {
+	background-color: #F00;
+	z-index: 10;
+}
+
+#subject .guideline[data-axis='X'] {
+	width: 1px;
+	height: 100%;
+	top: -1px;
+}
+
+#subject .guideline[data-axis='Y'] {
+	width: 100%;
+	height: 1px;
+	left: -1px;
+}
+
+#subject .guideline[data-axis='X']:hover {
+	cursor: w-resize;
+}
+
+#subject .guideline[data-axis='Y']:hover {
+	cursor: s-resize;
+}
+
+
+#subject .relative {
+	position: relative;
+	font-size: 12px;
+}
+
+#subject .tooltip, #subject .tooltip2 {
+	width: 40px;
+	height: 20px;
+	line-height: 20px;
+	font-size: 12px;
+	text-align: center;
+
+	position: absolute;
+	opacity: 0.5;
+	transition: opacity 0.25s;
+}
+
+#subject .tooltip {
+	background: #EEE;
+	border-radius: 2px;
+	border: 1px solid #CCC;
+}
+
+#subject .tooltip2{
+	color: #555;
+}
+
+#subject [data-active] &gt; * {
+	opacity: 1;
+}
+
+#subject .tooltip[data-info='top'] {
+	top: -10px;
+	right: -50px;
+}
+
+#subject .tooltip[data-info='right'] {
+	bottom: -30px;
+	right: -20px;
+}
+
+#subject .tooltip[data-info='bottom'] {
+	top: -10px;
+	left: -50px;
+}
+
+#subject .tooltip[data-info='left'] {
+	top: -30px;
+	right: -20px;
+}
+
+#subject .tooltip2[data-info='top'] {
+	top: -10px;
+	left: -50px;
+}
+
+#subject .tooltip2[data-info='right'] {
+	top: -30px;
+	right: -20px;
+}
+
+#subject .tooltip2[data-info='bottom'] {
+	top: -10px;
+	right: -50px;
+}
+
+#subject .tooltip2[data-info='left'] {
+	bottom: -30px;
+	right: -20px;
+}
+
+/* Preview */
+
+#preview {
+	width: 30%;
+	height: 50%;
+	background-color: #FFF;
+	text-align: center;
+	overflow: hidden;
+	position: absolute;
+	z-index: 10;
+
+	left: 60%;
+	top: 15%;
+
+	border-radius: 2px;
+	border-image-width: 20px;
+	border-image-repeat: round;
+	box-shadow: 0 0 3px 0 #BABABA;
+}
+
+#preview .resize-handle {
+	width: 10px;
+	height: 10px;
+	background: url("https://mdn.mozillademos.org/files/6027/resize.png") center center no-repeat;
+	position: absolute;
+	bottom: 0;
+	right: 0;
+}
+
+#preview .resize-handle:hover {
+	cursor: nw-resize;
+}
+
+
+/*
+ * General controls MENU
+ */
+
+#general-controls {
+	padding: 10px 30px;
+	background-color: #FFF;
+	opacity: 0.95;
+	color: #888;
+	/*border-radius: 2px;*/
+	box-shadow: 0 0 3px 0 #BABABA;
+}
+
+#general-controls .property {
+	width: 130px;
+	float: left;
+}
+
+#general-controls .name {
+	height: 20px;
+	margin: 0 10px 0 0;
+	line-height: 100%;
+	text-align: right;
+	float: left;
+}
+
+#general-controls .right {
+	width: 200px;
+	float: right;
+}
+
+#general-controls .ui-checkbox label {
+	height: 10px;
+}
+
+#general-controls .separator {
+	height: 40px;
+	width: 1px;
+	margin: -10px 15px;
+	background-color: #EEE;
+	float: left;
+}
+
+/*
+ * Controls
+ */
+
+#controls {
+	color: #444;
+	margin: 10px 0 0 0;
+}
+
+#controls .category {
+	height: 190px;
+	min-width: 260px;
+	margin: 10px;
+	padding: 10px;
+	border: 1px solid #CCC;
+	border-radius: 3px;
+	float: left;
+
+	box-shadow: 0 0 3px 0 #BABABA;
+	transition: all 0.25s;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+@media (min-width: 880px) {
+	#controls .category {
+		width: 30%;
+		margin-left: 1.66%;
+		margin-right: 1.66%;
+	}
+}
+
+@media (max-width: 879px) {
+	#controls .category {
+		width: 37%;
+		margin-left: 6.5%;
+		margin-right: 6.5%;
+	}
+}
+
+#controls .category .title {
+	width: 100%;
+	height: 30px;
+	margin: 0 0 10px 0;
+	line-height: 25px;
+
+	text-align: center;
+	color: #AAA;
+}
+
+#controls .category:hover .title {
+	color: #777;
+}
+
+#controls .category &gt; .group {
+	border: 1px solid #CCC;
+	border-radius: 2px;
+}
+
+
+/* property */
+
+#controls .property {
+	width: 250px;
+	height: 20px;
+	margin: 5px auto;
+}
+
+#controls .property .ui-input-slider {
+	margin: 0;
+	float: left;
+}
+
+#controls .property .ui-input-slider-info {
+	width: 60px;
+}
+
+#controls .property .ui-input-slider-left {
+	transition: opacity 0.15s;
+    opacity: 0;
+}
+
+#controls .property .ui-input-slider-right {
+	transition: opacity 0.15s;
+    opacity: 0;
+}
+
+#controls .property .name {
+	width: 60px;
+	height: 20px;
+	padding: 0px 10px 0px 0px;
+	text-align: right;
+	line-height: 100%;
+	float: left;
+}
+
+#controls .property .config {
+	width: 20px;
+	height: 20px;
+	float: left;
+	background: url("https://mdn.mozillademos.org/files/6021/config.png") center center no-repeat;
+	opacity: 0.5;
+}
+
+#controls .property .config:hover {
+	cursor: pointer;
+	opacity: 1;
+}
+
+#controls .ui-input-slider:hover .ui-input-slider-right {
+    opacity: 1;
+}
+
+#controls .ui-input-slider:hover .ui-input-slider-left {
+    opacity: 1;
+}
+
+#controls .property .ui-dropdown {
+	margin: 0 10px;
+	float: left;
+}
+
+
+#controls .property .ui-checkbox {
+	margin: 0 0 0 16px;
+	float: left;
+}
+
+#controls .property .ui-checkbox label {
+	height: 0.85em;
+	width: 10px;
+}
+
+/* dropdowns */
+#controls .ui-dropdown {
+	width: 50px;
+	height: 1.7em;
+	border-radius: 2px;
+}
+
+#controls .ui-dropdown-select {
+	line-height: 1.6em;
+}
+
+#controls .ui-dropdown-list {
+	top: 20px;
+}
+
+#controls .ui-dropdown-list {
+	border-width: 1px;
+	text-align: center;
+}
+
+#controls .ui-dropdown-list:hover {
+	overflow: hidden;
+}
+
+#controls .border-repeat {
+	margin: 0 0 0 16px !important;
+	width: 80px;
+}
+
+#controls .border-repeat .ui-dropdown-list {
+	height: 6.2em;
+	border-width: 1px;
+	text-align: center;
+}
+
+/* border-image-slice */
+
+
+#border-slice-control .ui-dropdown-list {
+	height: 4.3em;
+}
+
+/* border-image-width */
+
+#border-width-control .ui-dropdown-list {
+	height: 6.2em;
+}
+
+/* border-image-outset */
+
+#border-outset-control .ui-dropdown-list {
+	height: 4.3em;
+}
+
+#aditional-properties .property {
+	width: 200px;
+}
+
+#aditional-properties .ui-input-slider &gt; input {
+	width: 80px !important;
+}
+
+/* unit settings panel */
+
+#unit-settings {
+	padding: 10px;
+	position: absolute;
+
+	background: #FFF;
+
+	font-size: 12px;
+	border-radius: 3px;
+	border: 1px solid #CCC;
+	text-align: center;
+	color: #555;
+
+	position: absolute;
+	z-index: 1000;
+
+	box-shadow: 0 0 3px 0 #BABABA;
+	transition: all 0.25s;
+}
+
+#unit-settings .title {
+	width: 100%;
+	margin: -5px auto 0;
+
+	color: #666;
+	font-size: 14px;
+	font-weight: bold;
+	line-height: 25px;
+	border-bottom: 1px solid #E5E5E5;
+}
+
+#unit-settings .ui-input-slider {
+	margin: 10px 0 0 0;
+}
+
+#unit-settings .ui-input-slider-info {
+	width: 50px;
+	line-height: 1.5em;
+}
+
+#unit-settings input {
+	font-size: 12px;
+	width: 40px !important;
+}
+
+#unit-settings .close {
+	width: 16px;
+	height: 16px;
+	background: url('https://mdn.mozillademos.org/files/6019/close.png') no-repeat center center;
+	background-size: 75%;
+
+	position: absolute;
+	top: 4px;
+	right: 4px;
+	opacity: 0.5;
+}
+
+#unit-settings .close:hover {
+	cursor: pointer;
+	opacity: 1;
+}
+
+#unit-settings[data-active='true'] {
+	opacity: 1;
+}
+
+#unit-settings[data-active='false'] {
+	opacity: 0;
+	top: -100px !important;
+}
+
+/*
+ * CSS Output Code
+ */
+
+#output {
+	padding: 10px;
+	border: 2px dashed #888 !important;
+	box-shadow: none !important;
+	border-radius: 3px;
+	overflow: hidden;
+
+	-moz-user-select: text;
+	-webkit-user-select: text;
+	-ms-user-select: text;
+	user-select: text;
+}
+
+
+@media (min-width: 880px) {
+	#output {
+		width: 63.33% !important;
+	}
+}
+
+@media (max-width: 879px) {
+	#output {
+		width: 87% !important;
+	}
+}
+
+
+#output .title {
+	width: 100%;
+	height: 30px;
+	margin: 0 0 10px 0;
+	line-height: 25px;
+
+	text-align: center;
+	color: #AAA;
+}
+
+#output .css-property {
+	width: 100%;
+	margin: 0;
+	color: #555;
+	font-size: 14px;
+	line-height: 18px;
+	float: left;
+}
+
+#output .css-property .name {
+	width: 30%;
+	font-weight: bold;
+	text-align: right;
+	float: left;
+}
+
+#output .css-property .value {
+	width: 65%;
+	padding: 0 2.5%;
+	word-break: break-all;
+	float: left;
+}
+
+</pre>
+
+<h3 id="JavaScript_Content">JavaScript Content</h3>
+
+<pre class="brush: js">'use strict';
+
+/**
+ * UI-SlidersManager
+ */
+
+var InputSliderManager = (function InputSliderManager() {
+
+	var subscribers = {};
+	var sliders = [];
+
+	var InputComponent = function InputComponent(obj) {
+		var input = document.createElement('input');
+		input.setAttribute('type', 'text');
+		input.style.width = 50 + obj.precision * 10 + 'px';
+
+		input.addEventListener('click', function(e) {
+			this.select();
+		});
+
+		input.addEventListener('change', function(e) {
+			var value = parseFloat(e.target.value);
+
+			if (isNaN(value) === true)
+				setValue(obj.topic, obj.value);
+			else
+				setValue(obj.topic, value);
+		});
+
+		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) {
+			document.removeEventListener("mousemove", sliderMotion);
+			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("mouseup", slideEnd);
+			document.addEventListener("mousemove", sliderMotion);
+		});
+
+		var slideEnd = function slideEnd(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		= parseFloat(node.getAttribute('data-min'));
+		var max		= parseFloat(node.getAttribute('data-max'));
+		var step	= parseFloat(node.getAttribute('data-step'));
+		var value	= parseFloat(node.getAttribute('data-value'));
+		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;
+		var precision = node.getAttribute('data-precision') | 0;
+
+		this.min = isNaN(min) ? 0 : min;
+		this.max = isNaN(max) ? 100 : max;
+		this.precision = precision &gt;= 0 ? precision : 0;
+		this.step = step &lt; 0 || isNaN(step) ? 1 : step.toFixed(precision);
+		this.topic = topic;
+		this.node = node;
+		this.unit = unit === null ? '' : unit;
+		this.sensivity = sensivity &gt; 0 ? sensivity : 5;
+		value = isNaN(value) ? this.min : value;
+
+		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);
+
+		this.input = input;
+		sliders[topic] = this;
+		setValue(topic, value);
+	};
+
+	InputSlider.prototype.setInputValue = function setInputValue() {
+		this.input.value = this.value.toFixed(this.precision) + this.unit;
+	};
+
+	var setValue = function setValue(topic, value, send_notify) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		value = parseFloat(value.toFixed(slider.precision));
+
+		if (value &gt; slider.max) value = slider.max;
+		if (value &lt; slider.min)	value = slider.min;
+
+		slider.value = value;
+		slider.node.setAttribute('data-value', value);
+
+		slider.setInputValue();
+
+		if (send_notify === false)
+			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 setStep = function setStep(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.step = parseFloat(value);
+		setValue(topic, slider.value);
+	};
+
+	var setPrecision = function setPrecision(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		value = value | 0;
+		slider.precision = value;
+
+		var step = parseFloat(slider.step.toFixed(value));
+		if (step === 0)
+			slider.step = 1 / Math.pow(10, value);
+
+		setValue(topic, slider.value);
+	};
+
+	var setSensivity = function setSensivity(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		value = value | 0;
+
+		slider.sensivity = value &gt; 0 ? value : 5;
+	};
+
+	var getNode =  function getNode(topic) {
+		return sliders[topic].node;
+	};
+
+	var getPrecision =  function getPrecision(topic) {
+		return sliders[topic].precision;
+	};
+
+	var getStep =  function getStep(topic) {
+		return sliders[topic].step;
+	};
+
+	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() {
+		if (subscribers[this.topic] === undefined)
+			return;
+		for (var i = 0; i &lt; subscribers[this.topic].length; i++)
+			subscribers[this.topic][i](this.value);
+	};
+
+	var createSlider = function createSlider(topic, label) {
+		var slider = document.createElement('div');
+		slider.className = 'ui-input-slider';
+		slider.setAttribute('data-topic', topic);
+
+		if (label !== undefined)
+			slider.setAttribute('data-info', label);
+
+		new InputSlider(slider);
+		return slider;
+	};
+
+	var init = function init() {
+		var elem = document.querySelectorAll('.ui-input-slider');
+		var size = elem.length;
+		for (var i = 0; i &lt; size; i++)
+			new InputSlider(elem[i]);
+	};
+
+	return {
+		init : init,
+		setMax : setMax,
+		setMin : setMin,
+		setUnit : setUnit,
+		setStep : setStep,
+		getNode : getNode,
+		getStep : getStep,
+		setValue : setValue,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe,
+		setPrecision : setPrecision,
+		setSensivity : setSensivity,
+		getPrecision : getPrecision,
+		createSlider : createSlider,
+	};
+
+})();
+
+
+/**
+ * UI-DropDown Select
+ */
+
+var DropDownManager = (function DropdownManager() {
+
+	var subscribers = {};
+	var dropdowns = [];
+	var active = null;
+
+	var visbility = ["hidden", "visible"];
+
+
+	var DropDown = function DropDown(node) {
+		var topic = node.getAttribute('data-topic');
+		var label = node.getAttribute('data-label');
+		var selected = node.getAttribute('data-selected') | 0;
+
+		var select = document.createElement('div');
+		var list = document.createElement('div');
+		var uval = 0;
+		var option = null;
+		var option_value = null;
+
+		list.className = 'ui-dropdown-list';
+		select.className = 'ui-dropdown-select';
+
+		while (node.firstElementChild !== null) {
+			option = node.firstElementChild;
+			option_value = option.getAttribute('data-value');
+
+			if (option_value === null)
+				option.setAttribute('data-value', uval);
+
+			list.appendChild(node.firstElementChild);
+			uval++;
+		}
+
+		node.appendChild(select);
+		node.appendChild(list);
+
+		select.onclick = this.toggle.bind(this);
+		list.onclick = this.updateValue.bind(this);
+		document.addEventListener('click', clickOut);
+
+		this.state = 0;
+		this.time = 0;
+		this.dropmenu = list;
+		this.select = select;
+		this.toggle(false);
+		this.value = {};
+		this.topic = topic;
+
+		if (label)
+			select.textContent = label;
+		else
+			this.setNodeValue(list.children[selected]);
+
+		dropdowns[topic] = this;
+
+	};
+
+	DropDown.prototype.toggle = function toggle(state) {
+		if (typeof(state) === 'boolean')
+			this.state = state === false ? 0 : 1;
+		else
+			this.state = 1 ^ this.state;
+
+		if (active !== this) {
+			if (active)
+				active.toggle(false);
+			active = this;
+		}
+
+		if (this.state === 0)
+			this.dropmenu.setAttribute('data-hidden', 'true');
+		else
+			this.dropmenu.removeAttribute('data-hidden');
+
+	};
+
+	var clickOut = function clickOut(e) {
+		if (active.state === 0 ||
+			e.target === active.dropmenu ||
+			e.target === active.select)
+			return;
+
+		active.toggle(false);
+	};
+
+	DropDown.prototype.updateValue = function updateValue(e) {
+
+		if (Date.now() - this.time &lt; 500)
+			return;
+
+		if (e.target.className !== "ui-dropdown-list") {
+			this.setNodeValue(e.target);
+			this.toggle(false);
+		}
+
+		this.time = Date.now();
+	};
+
+	DropDown.prototype.setNodeValue = function setNodeValue(node) {
+		this.value['name'] = node.textContent;
+		this.value['value'] = node.getAttribute('data-value');
+
+		this.select.textContent = node.textContent;
+		this.select.setAttribute('data-value', this.value['value']);
+
+		notify.call(this);
+	};
+
+	var createDropDown = function createDropDown(topic, options) {
+
+		var dropdown = document.createElement('div');
+		dropdown.setAttribute('data-topic', topic);
+		dropdown.className = 'ui-dropdown';
+
+		for (var i in options) {
+			var x = document.createElement('div');
+			x.setAttribute('data-value', i);
+			x.textContent = options[i];
+			dropdown.appendChild(x);
+		}
+
+		new DropDown(dropdown);
+
+		return dropdown;
+	};
+
+	var setValue = function setValue(topic, index) {
+		if (dropdowns[topic] === undefined ||
+			index &gt;= dropdowns[topic].dropmenu.children.length)
+			return;
+
+		dropdowns[topic].setNodeValue(dropdowns[topic].dropmenu.children[index]);
+	};
+
+	var subscribe = function subscribe(topic, callback) {
+		if (subscribers[topic] === undefined)
+			subscribers[topic] = [];
+		subscribers[topic].push(callback);
+	};
+
+	var unsubscribe = function unsubscribe(topic, callback) {
+		var index = subscribers[topic].indexOf(callback);
+		subscribers[topic].splice(index, 1);
+	};
+
+	var notify = function notify() {
+		if (subscribers[this.topic] === undefined)
+			return;
+
+		for (var i in subscribers[this.topic]) {
+			subscribers[this.topic][i](this.value);
+		}
+	};
+
+	var init = function init() {
+		var elem, size;
+
+		elem = document.querySelectorAll('.ui-dropdown');
+		size = elem.length;
+		for (var i = 0; i &lt; size; i++)
+			new DropDown(elem[i]);
+
+	};
+
+	return {
+		init : init,
+		setValue : setValue,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe,
+		createDropDown : createDropDown
+	};
+
+})();
+
+
+/**
+ * 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) {
+		var obj = buttons[topic];
+		if (obj === undefined)
+			return;
+
+		obj.checkbox.checked = value;
+		notify.call(obj);
+	};
+
+	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() {
+		if (subscribers[this.topic] === undefined)
+			return;
+		for (var i = 0; i &lt; 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 &lt; size; i++)
+			new CheckBox(elem[i]);
+	};
+
+	return {
+		init : init,
+		setValue : setValue,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe
+	};
+
+})();
+
+window.addEventListener("load", function() {
+	BorderImage.init();
+});
+
+var BorderImage = (function BorderImage() {
+
+	var getElemById = document.getElementById.bind(document);
+
+	var subject;
+	var preview;
+	var guidelines = [];
+	var positions = ['top', 'right', 'bottom', 'left'];
+
+	var makeDraggable = function makeDraggable(elem) {
+
+		var offsetTop;
+		var offsetLeft;
+
+		elem.setAttribute('data-draggable', 'true');
+
+		var dragStart = function dragStart(e) {
+			if (e.target.getAttribute('data-draggable') !== 'true' ||
+				e.target !== elem || e.button !== 0)
+				return;
+
+			offsetLeft = e.clientX - elem.offsetLeft;
+			offsetTop = e.clientY - elem.offsetTop;
+
+			document.addEventListener('mousemove', mouseDrag);
+			document.addEventListener('mouseup', dragEnd);
+		};
+
+		var dragEnd = function dragEnd(e) {
+			if (e.button !== 0)
+				return;
+
+			document.removeEventListener('mousemove', mouseDrag);
+			document.removeEventListener('mouseup', dragEnd);
+		};
+
+		var mouseDrag = function mouseDrag(e) {
+
+			elem.style.left = e.clientX - offsetLeft + 'px';
+			elem.style.top = e.clientY - offsetTop + 'px';
+		};
+
+		elem.addEventListener('mousedown', dragStart, false);
+	};
+
+	var PreviewControl = function PreviewControl() {
+
+		var dragging = false;
+		var valueX = null;
+		var valueY = null;
+
+		var dragStart = function dragStart(e) {
+			if (e.button !== 0)
+				return;
+
+			valueX = e.clientX - preview.clientWidth;
+			valueY = e.clientY - preview.clientHeight;
+			dragging = true;
+
+			document.addEventListener('mousemove', mouseDrag);
+		};
+
+		var dragEnd = function dragEnd(e) {
+			if (e.button !== 0 || dragging === false)
+				return;
+
+			document.removeEventListener('mousemove', mouseDrag);
+			dragging = false;
+		};
+
+		var mouseDrag = function mouseDrag(e) {
+			InputSliderManager.setValue('preview-width', e.clientX - valueX);
+			InputSliderManager.setValue('preview-height', e.clientY - valueY);
+		};
+
+		var init = function init() {
+
+			makeDraggable(preview);
+			makeDraggable(subject);
+
+			var handle = document.createElement('div');
+			handle.className = 'resize-handle';
+
+			handle.addEventListener('mousedown', dragStart);
+			document.addEventListener('mouseup', dragEnd);
+
+			preview.appendChild(handle);
+
+		};
+
+		return {
+			init: init
+		};
+
+	}();
+
+	var ImageReader = (function ImageReader() {
+
+		var fReader = new FileReader();
+		var browse = document.createElement('input');
+
+		var loadImage = function loadImage(e) {
+			if (browse.files.length === 0)
+				return;
+
+			var file = browse.files[0];
+
+			if (file.type.slice(0, 5) !== 'image')
+				return;
+
+			fReader.readAsDataURL(file);
+
+			return false;
+		};
+
+		fReader.onload = function(e) {
+			ImageControl.loadRemoteImage(e.target.result);
+		};
+
+		var load = function load() {
+			browse.click();
+		};
+
+		browse.setAttribute('type', 'file');
+		browse.style.display = 'none';
+		browse.onchange = loadImage;
+
+		return {
+			load: load
+		};
+
+	})();
+
+	var ImageControl = (function ImageControl() {
+
+		var scale = 0.5;
+		var imgSource = new Image();
+		var imgState = null;
+		var selected = null;
+
+
+		var topics = ['slice', 'width', 'outset'];
+		var properties = {};
+		properties['border1'] = {
+			fill			: false,
+
+			slice_values	: [27, 27, 27, 27],
+			width_values	: [20, 20, 20, 20],
+			outset_values	: [0, 0, 0, 0],
+
+			slice_units		: [0, 0, 0, 0],
+			width_units		: [0, 0, 0, 0],
+			outset_units	: [0, 0, 0, 0],
+
+			repeat			: [1, 1],
+			size			: [300, 200],
+			preview_area	: 400
+		};
+
+		properties['border2'] = {
+			fill			: false,
+
+			slice_values	: [33, 33, 33, 33],
+			width_values	: [1.5, 1.5, 1.5, 1.5],
+			outset_values	: [0, 0, 0, 0],
+
+			slice_units		: [1, 1, 1, 1],
+			width_units		: [2, 2, 2, 2],
+			outset_units	: [0, 0, 0, 0],
+
+			repeat			: [2, 2],
+			size			: [300, 200],
+			preview_area	: 400
+		};
+
+		properties['border3'] = {
+			fill			: true,
+
+			slice_values	: [15, 15, 15, 15],
+			width_values	: [10, 10, 10, 10],
+			outset_values	: [0, 0, 0, 0],
+
+			slice_units		: [0, 0, 0, 0],
+			width_units		: [0, 0, 0, 0],
+			outset_units	: [0, 0, 0, 0],
+
+			repeat			: [2, 2],
+			size			: [300, 200],
+			preview_area	: 400
+		};
+
+		properties['border4'] = {
+			fill			: false,
+
+			slice_values	: [13, 13, 13, 13],
+			width_values	: [13, 13, 13, 13],
+			outset_values	: [13, 13, 13, 13],
+
+			slice_units		: [0, 0, 0, 0],
+			width_units		: [0, 0, 0, 0],
+			outset_units	: [0, 0, 0, 0],
+
+			repeat			: [0, 0],
+			size			: [300, 200],
+			preview_area	: 400
+		};
+
+		properties['border5'] = {
+			fill			: false,
+
+			slice_values	: [0, 12, 0, 12],
+			width_values	: [0, 12, 0, 12],
+			outset_values	: [0, 0, 0, 0],
+
+			slice_units		: [0, 0, 0, 0],
+			width_units		: [0, 0, 0, 0],
+			outset_units	: [0, 0, 0, 0],
+
+			repeat			: [0, 0],
+			size			: [300, 200],
+			preview_area	: 400,
+		};
+
+		properties['border6'] = {
+			fill			: false,
+
+			slice_values	: [42, 42, 42, 42],
+			width_values	: [42, 42, 42, 42],
+			outset_values	: [0, 0, 0, 0],
+
+			slice_units		: [0, 0, 0, 0],
+			width_units		: [0, 0, 0, 0],
+			outset_units	: [0, 0, 0, 0],
+
+			repeat			: [2, 2],
+			size			: [350, 350],
+			preview_area	: 500,
+		};
+
+
+		var loadLocalImage = function loadLocalImage(source) {
+			var location = "images/" + source;
+			imgSource.src = location;
+		};
+
+		var loadRemoteImage = function loadRemoteImage(source) {
+			imgSource.src = source;
+			if (selected)
+				selected.removeAttribute('selected');
+			Tool.setOutputCSS('source', 'url("' + source + '")');
+		};
+
+		var pickImage = function pickImage(e) {
+			if (e.target.className === 'image') {
+				selected = e.target;
+				selected.setAttribute('selected', 'true');
+				loadRemoteImage(e.target.src);
+				imgState = e.target.getAttribute('data-stateID');
+			}
+		};
+
+		var loadImageState = function loadImageState(stateID) {
+			if (properties[stateID] === undefined)
+				return;
+
+			var prop = properties[stateID];
+			var topic;
+			var unit_array;
+			var value_array;
+
+			for (var i in topics) {
+				for (var j=0; j&lt;4; j++) {
+					topic = topics[i] + '-' + positions[j];
+					unit_array = topics[i] + '_units';
+					value_array = topics[i] + '_values';
+					InputSliderManager.setValue(topic, prop[value_array][j]);
+					DropDownManager.setValue(topic, prop[unit_array][j]);
+				}
+			}
+
+			ButtonManager.setValue('slice-fill', prop['fill']);
+			DropDownManager.setValue('image-repeat-X', prop['repeat'][0]);
+			DropDownManager.setValue('image-repeat-Y', prop['repeat'][1]);
+			InputSliderManager.setValue('preview-width', prop['size'][0]);
+			InputSliderManager.setValue('preview-height', prop['size'][1]);
+			InputSliderManager.setValue('preview-area-height', prop['preview_area']);
+		};
+
+		var update = function update() {
+			scale =  Math.min(300, (30000 / this.width) | 0);
+			setScale(scale);
+			InputSliderManager.setValue('scale', scale, false);
+
+			subject.style.backgroundImage = 'url("' + this.src + '")';
+			preview.style.borderImageSource = 'url("' + this.src + '")';
+
+			guidelines['slice-top'].setMax(this.height);
+			guidelines['slice-right'].setMax(this.width);
+			guidelines['slice-bottom'].setMax(this.height);
+			guidelines['slice-left'].setMax(this.width);
+
+			if (imgState)
+				loadImageState(imgState);
+		};
+
+		var setScale = function setScale(value) {
+			scale = value;
+			var w = imgSource.width * scale / 100 | 0;
+			var h = imgSource.height * scale / 100 | 0;
+			subject.style.width = w + 'px';
+			subject.style.height = h + 'px';
+
+			for (var i = 0; i &lt; positions.length; i++)
+				guidelines['slice-' + positions[i]].updateGuidelinePos();
+		};
+
+		var getScale = function getScale() {
+			return scale/100;
+		};
+
+		var toggleGallery = function toggleGallery() {
+			var gallery = getElemById('image-gallery');
+			var button  = getElemById('toggle-gallery');
+			var state = 1;
+			button.addEventListener('click', function() {
+				state = 1 ^ state;
+				if (state === 0) {
+					gallery.setAttribute('data-collapsed', 'true');
+					button.setAttribute('data-action', 'show');
+				}
+				else {
+					gallery.removeAttribute('data-collapsed');
+					button.setAttribute('data-action', 'hide');
+				}
+			});
+		};
+
+		var init = function init() {
+			var gallery = getElemById('image-gallery');
+			var browse = getElemById('load-image');
+			var remote = getElemById('remote-url');
+			var load_remote = getElemById('load-remote');
+
+			remote.addEventListener('change', function(){
+				loadRemoteImage(this.value);
+			});
+
+			load_remote.addEventListener('click', function(){
+				loadRemoteImage(remote.value);
+			});
+
+			browse.addEventListener('click', ImageReader.load);
+			gallery.addEventListener('click', pickImage);
+			imgSource.addEventListener('load', update);
+
+			InputSliderManager.subscribe('scale', setScale);
+			InputSliderManager.setValue('scale', scale);
+			imgState = 'border1';
+			loadRemoteImage('https://mdn.mozillademos.org/files/6007/border-image-1.png');
+			toggleGallery();
+		};
+
+		return {
+			init: init,
+			getScale : getScale,
+			loadRemoteImage: loadRemoteImage
+		};
+
+	})();
+
+	var GuideLine = function GuideLine(node) {
+		var topic = node.getAttribute('data-topic');
+		var axis = node.getAttribute('data-axis');
+
+		this.node = node;
+		this.topic = topic;
+		this.axis = axis;
+		this.info = topic.split('-')[1];
+
+		this.position = 0;
+		this.value = 0;
+		this.unit = 0;
+		this.max = 0;
+		this.pos = positions.indexOf(this.info);
+
+		guidelines[topic] = this;
+
+		var relative_container = document.createElement('div');
+		var tooltip = document.createElement('div');
+		var tooltip2 = document.createElement('div');
+
+		tooltip.className = 'tooltip';
+		tooltip.setAttribute('data-info', this.info);
+
+		tooltip2.className = 'tooltip2';
+		tooltip2.textContent = this.info;
+		tooltip2.setAttribute('data-info', this.info);
+
+		this.tooltip = tooltip;
+
+		relative_container.appendChild(tooltip);
+		relative_container.appendChild(tooltip2);
+		node.appendChild(relative_container);
+
+		var startX = 0;
+		var startY = 0;
+		var start = 0;
+
+		var startDrag = function startDrag(e) {
+			startX = e.clientX;
+			startY = e.clientY;
+			start = guidelines[topic].position;
+			document.body.setAttribute('data-move', axis);
+			relative_container.setAttribute('data-active', '');
+			node.setAttribute('data-active', '');
+
+			document.addEventListener('mousemove', updateGuideline);
+			document.addEventListener('mouseup', endDrag);
+		};
+
+		var endDrag = function endDrag() {
+			document.body.removeAttribute('data-move');
+			relative_container.removeAttribute('data-active');
+			node.removeAttribute('data-active');
+
+			document.removeEventListener('mousemove', updateGuideline);
+		};
+
+		var updateGuideline = function updateGuideline(e) {
+			var value;
+			if (topic === 'slice-top')
+				value = e.clientY - startY + start;
+
+			if (topic === 'slice-right')
+				value = startX - e.clientX + start;
+
+			if (topic === 'slice-bottom')
+				value = startY - e.clientY + start;
+
+			if (topic === 'slice-left')
+				value = e.clientX - startX + start;
+
+			if (this.unit === 0)
+				InputSliderManager.setValue(topic, value * 1 / ImageControl.getScale() | 0);
+			else {
+				InputSliderManager.setValue(topic, (value * 100 / (this.max * ImageControl.getScale())) | 0);
+			}
+
+		}.bind(this);
+
+		node.addEventListener("mousedown", startDrag);
+
+		InputSliderManager.subscribe(topic, this.setPosition.bind(this));
+		InputSliderManager.setValue(topic, this.position);
+	};
+
+
+	GuideLine.prototype.updateGuidelinePos = function updateGuidelinePos() {
+		if (this.unit === 0)
+			this.position = this.value * ImageControl.getScale() | 0;
+		else
+			this.position = this.value * this.max * ImageControl.getScale() / 100 | 0;
+
+		this.node.style[this.info] = this.position + 'px';
+	};
+
+	GuideLine.prototype.setPosition = function setPosition(value) {
+		this.value = value;
+		this.tooltip.textContent = value;
+		this.updateGuidelinePos();
+		Tool.setBorderSlice(this.pos, value);
+	};
+
+	GuideLine.prototype.setMax = function setMax(max) {
+		this.max = max;
+		this.updateLimit();
+	};
+
+	GuideLine.prototype.updateLimit = function updateLimit() {
+		if (this.unit === 1)
+			InputSliderManager.setMax(this.topic, 100);
+		else
+			InputSliderManager.setMax(this.topic, this.max);
+	};
+
+	GuideLine.prototype.setUnit = function setUnit(type) {
+		if (type === '%')	this.unit = 1;
+		if (type === '')	this.unit = 0;
+		this.updateLimit();
+	};
+
+	/*
+	 * Unit panel
+	 */
+	var UnitPanel = (function UnitPanel () {
+
+		var panel;
+		var title;
+		var precision;
+		var step;
+		var unit_topic = null; // settings are made for this topic
+		var step_option = [1, 0.1, 0.01];
+
+		var updatePrecision = function updatePrecision(value) {
+			InputSliderManager.setPrecision('unit-step', value);
+			InputSliderManager.setStep('unit-step', step_option[value]);
+			InputSliderManager.setMin('unit-step', step_option[value]);
+
+			if (unit_topic)
+				InputSliderManager.setPrecision(unit_topic, value);
+		};
+
+		var updateUnitSettings = function updateUnitSettings(value) {
+			if (unit_topic)
+				InputSliderManager.setStep(unit_topic, value);
+		};
+
+		var show = function show(e) {
+			var topic = e.target.getAttribute('data-topic');
+			var precision = InputSliderManager.getPrecision(topic);
+			var step = InputSliderManager.getStep(topic);
+
+			unit_topic = topic;
+			title.textContent = topic;
+
+			panel.setAttribute('data-active', 'true');
+			panel.style.top = e.target.offsetTop - 40 + 'px';
+			panel.style.left = e.target.offsetLeft + 30 + 'px';
+
+			InputSliderManager.setValue('unit-precision', precision);
+			InputSliderManager.setValue('unit-step', step);
+		};
+
+		var init = function init() {
+			panel = document.createElement('div');
+			title = document.createElement('div');
+			var close = document.createElement('div');
+
+			step = InputSliderManager.createSlider('unit-step', 'step');
+			precision = InputSliderManager.createSlider('unit-precision', 'precision');
+
+			InputSliderManager.setStep('unit-precision', 1);
+			InputSliderManager.setMax('unit-precision', 2);
+			InputSliderManager.setValue('unit-precision', 2);
+			InputSliderManager.setSensivity('unit-precision', 20);
+
+			InputSliderManager.setValue('unit-step', 1);
+			InputSliderManager.setStep('unit-step', 0.01);
+			InputSliderManager.setPrecision('unit-step', 2);
+
+			InputSliderManager.subscribe('unit-precision', updatePrecision);
+			InputSliderManager.subscribe('unit-step', updateUnitSettings);
+
+			close.addEventListener('click', function () {
+				panel.setAttribute('data-active', 'false');
+			});
+
+			title.textContent = 'Properties';
+			title.className = 'title';
+			close.className = 'close';
+			panel.id = 'unit-settings';
+			panel.setAttribute('data-active', 'false');
+			panel.appendChild(title);
+			panel.appendChild(precision);
+			panel.appendChild(step);
+			panel.appendChild(close);
+			document.body.appendChild(panel);
+		};
+
+		return {
+			init : init,
+			show : show
+		};
+
+	})();
+
+	/**
+	 * Tool Manager
+	 */
+	var Tool = (function Tool() {
+		var preview_area;
+		var dropdown_unit_options = [
+			{ '' : '--', '%' : '%'},
+			{ 'px' : 'px', '%' : '%', 'em' : 'em'},
+			{ 'px' : 'px', 'em' : 'em'},
+		];
+
+		var border_slice = [];
+		var border_width = [];
+		var border_outset = [];
+
+		var border_slice_values = [];
+		var border_width_values = [];
+		var border_outset_values = [];
+
+		var border_slice_units = ['', '', '', ''];
+		var border_width_units = ['px', 'px', 'px', 'px'];
+		var border_outset_units = ['px', 'px', 'px', 'px'];
+
+		var border_fill = false;
+		var border_repeat = ['round', 'round'];
+		var CSS_code = {
+			'source' : null,
+			'slice' : null,
+			'width' : null,
+			'outset' : null,
+			'repeat' : null
+		};
+
+		var setBorderSlice = function setBorderSlice(positionID, value) {
+			border_slice[positionID] = value + border_slice_units[positionID];
+			updateBorderSlice();
+		};
+
+		var updateBorderSlice = function updateBorderSlice() {
+			var value = border_slice.join(' ');
+			if (border_fill === true)
+				value += ' fill';
+
+			preview.style.borderImageSlice = value;
+			setOutputCSS('slice', value);
+		};
+
+		var setBorderFill = function setBorderFill(value) {
+			border_fill = value;
+			var bimgslice = border_slice.join(' ');;
+			if (value === true)
+				bimgslice += ' fill';
+
+			preview.style.borderImageSlice = bimgslice;
+		};
+
+		var updateBorderWidth = function updateBorderWidth() {
+			var value = border_width.join(' ');
+			preview.style.borderImageWidth = value;
+			setOutputCSS('width', value);
+		};
+
+		var updateBorderOutset = function updateBorderOutset() {
+			var value = border_outset.join(' ');
+			preview.style.borderImageOutset = border_outset.join(' ');
+			setOutputCSS('outset', value);
+		};
+
+		var setBorderRepeat = function setBorderRepeat(obj) {
+			border_repeat[obj.value] = obj.name;
+			var value = border_repeat.join(' ');
+			preview.style.borderImageRepeat = value;
+			setOutputCSS('repeat', value);
+		};
+
+		var setOutputCSS = function setOutputCSS(topic, value) {
+			CSS_code[topic].textContent = value + ';';
+		};
+
+		var setPreviewFontSize = function setPreviewFontSize(value) {
+			preview.style.fontSize = value + 'px';
+		};
+
+		var setPreviewWidth = function setPreviewWidth(value) {
+			preview.style.width = value + 'px';
+		};
+
+		var setPreviewHeight = function setPreviewHeight(value) {
+			preview.style.height = value + 'px';
+		};
+
+		var setPreviewAreaHeight = function setPreviewAreaHeight(value) {
+			preview_area.style.height = value + 'px';
+		};
+
+		var updateDragOption = function updateDragOption(value) {
+			if (value === true)
+				subject.setAttribute('data-draggable', 'true');
+			else
+				subject.removeAttribute('data-draggable');
+		};
+
+		var createProperty = function createProperty(topic, labelID, optionsID) {
+
+			var slider = InputSliderManager.createSlider(topic, positions[labelID]);
+			var dropdown = DropDownManager.createDropDown(topic, dropdown_unit_options[optionsID]);
+
+			InputSliderManager.setSensivity(topic, 3);
+			InputSliderManager.setPrecision(topic, 1);
+
+			var property = document.createElement('div');
+			var config = document.createElement('div');
+
+			property.className = 'property';
+			config.className = 'config';
+			config.setAttribute('data-topic', topic);
+			config.addEventListener('click', UnitPanel.show);
+
+			property.appendChild(slider);
+			property.appendChild(dropdown);
+			property.appendChild(config);
+
+			return property;
+		};
+
+		var initBorderSliceControls = function initBorderSliceControls() {
+			var container = getElemById('border-slice-control');
+
+			var listenForChanges = function listenForChanges(topic, id) {
+				InputSliderManager.subscribe(topic, function(value) {
+					border_slice_values[id] = value;
+					border_slice[id] = value + border_slice_units[id];
+					updateBorderSlice();
+				});
+
+				DropDownManager.subscribe(topic, function(obj) {
+					guidelines[topic].setUnit(obj.value);
+					border_slice_units[id] = obj.value;
+					border_slice[id] = border_slice_values[id] + obj.value;
+					updateBorderSlice();
+				});
+			};
+
+			for (var i = 0; i &lt; positions.length; i++) {
+				var topic = 'slice-' + positions[i];
+				var property = createProperty(topic, i, 0);
+				listenForChanges(topic, i);
+
+				container.appendChild(property);
+			}
+
+			container.appendChild(container.children[1]);
+
+		};
+
+		var initBorderWidthControls = function initBorderWidthControls() {
+			var container = getElemById('border-width-control');
+
+			var listenForChanges = function listenForChanges(topic, id) {
+				InputSliderManager.subscribe(topic, function(value) {
+					border_width_values[id] = value;
+					border_width[id] = value + border_width_units[id];
+					updateBorderWidth();
+				});
+
+				DropDownManager.subscribe(topic, function(obj) {
+					if (obj.value === '%')
+						InputSliderManager.setMax(topic, 100);
+					else
+						InputSliderManager.setMax(topic, 1000);
+
+					border_width_units[id] = obj.value;
+					border_width[id] = border_width_values[id] + obj.value;
+					updateBorderWidth();
+				});
+			};
+
+			for (var i = 0; i &lt; positions.length; i++) {
+				var topic = 'width-' + positions[i];
+				var property = createProperty(topic, i, 1);
+				InputSliderManager.setMax(topic, 1000);
+				listenForChanges(topic, i);
+
+				container.appendChild(property);
+			}
+		};
+
+		var initBorderOutsetControls = function initBorderOutsetControls() {
+
+			var container = getElemById('border-outset-control');
+
+			var listenForChanges = function listenForChanges(topic, id) {
+				InputSliderManager.subscribe(topic, function(value) {
+					border_outset_values[id] = value;
+					border_outset[id] = value + border_outset_units[id];
+					updateBorderOutset();
+				});
+
+				DropDownManager.subscribe(topic, function(obj) {
+					border_outset_units[id] = obj.value;
+					border_outset[id] = border_outset_values[id] + obj.value;
+					updateBorderOutset();
+				});
+			};
+
+			for (var i = 0; i &lt; positions.length; i++) {
+				var topic = 'outset-' + positions[i];
+				var property = createProperty(topic, i, 2);
+				InputSliderManager.setMax(topic, 1000);
+				listenForChanges(topic, i);
+
+				container.appendChild(property);
+			}
+		};
+
+		var init = function init() {
+
+			var gallery =
+			subject = getElemById('subject');
+			preview = getElemById("preview");
+			preview_area = getElemById("preview_section");
+
+
+			CSS_code['source'] = getElemById("out-border-source");
+			CSS_code['slice'] = getElemById("out-border-slice");
+			CSS_code['width'] = getElemById("out-border-width");
+			CSS_code['outset'] = getElemById("out-border-outset");
+			CSS_code['repeat'] = getElemById("out-border-repeat");
+
+			initBorderSliceControls();
+			initBorderWidthControls();
+			initBorderOutsetControls();
+
+			var elem = document.querySelectorAll('.guideline');
+			var size = elem.length;
+			for (var i = 0; i &lt; size; i++)
+				new GuideLine(elem[i]);
+
+			PreviewControl.init();
+
+			ButtonManager.subscribe('slice-fill',setBorderFill);
+			ButtonManager.subscribe('drag-subject', updateDragOption);
+			ButtonManager.setValue('drag-subject', false);
+
+			DropDownManager.subscribe('image-repeat-X', setBorderRepeat);
+			DropDownManager.subscribe('image-repeat-Y', setBorderRepeat);
+
+			InputSliderManager.subscribe('preview-area-height', setPreviewAreaHeight);
+			InputSliderManager.subscribe('preview-width', setPreviewWidth);
+			InputSliderManager.subscribe('preview-height', setPreviewHeight);
+			InputSliderManager.subscribe('font-size', setPreviewFontSize);
+			InputSliderManager.setValue('preview-width', 300);
+			InputSliderManager.setValue('preview-height', 200);
+		};
+
+		return {
+			init: init,
+			setOutputCSS: setOutputCSS,
+			setBorderSlice: setBorderSlice
+		};
+
+	})();
+
+	/**
+	 * Init Tool
+	 */
+	var init = function init() {
+		InputSliderManager.init();
+		DropDownManager.init();
+		ButtonManager.init();
+		UnitPanel.init();
+		Tool.init();
+		ImageControl.init();
+	};
+
+	return {
+		init : init
+	};
+
+})();
+
+</pre>
+</div>
+
+<p>{{EmbedLiveSample('Border_Image_Generator', '100%', '1270px')}}</p>
diff --git a/files/fr/web/css/css_backgrounds_and_borders/border-radius_generator/index.html b/files/fr/web/css/css_backgrounds_and_borders/border-radius_generator/index.html
new file mode 100644
index 0000000000..993940bcdc
--- /dev/null
+++ b/files/fr/web/css/css_backgrounds_and_borders/border-radius_generator/index.html
@@ -0,0 +1,1601 @@
+---
+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
+---
+<p>Cet outil peut être utilisé afin de générer du code pour la propriété {{cssxref("border-radius")}}.</p>
+
+<div class="hidden">
+<h2 id="border-radius-generator" name="border-radius-generator">border-radius</h2>
+
+<h3 id="Contenu_HTML">Contenu HTML</h3>
+
+<pre class="brush: html">&lt;div id="container"&gt;
+    &lt;div class="group section"&gt;
+        &lt;div id="preview" class="col span_12"&gt;
+            &lt;div id="subject"&gt;
+                &lt;div id="top-left" class="radius-container"
+                    data-X="left" data-Y="top"&gt;
+                &lt;/div&gt;
+                &lt;div id="top-right" class="radius-container"
+                    data-X="right" data-Y="top"&gt;
+                &lt;/div&gt;
+                &lt;div id="bottom-right" class="radius-container"
+                    data-X="right" data-Y="bottom"&gt;
+                &lt;/div&gt;
+                &lt;div id="bottom-left" class="radius-container"
+                    data-X="left" data-Y="bottom"&gt;
+                &lt;/div&gt;
+
+                &lt;div id="radius-ui-sliders"&gt;
+                    &lt;div id="tlr" class="ui-input-slider" data-topic="top-left"
+                         data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
+
+                    &lt;div id="tlw" class="ui-input-slider" data-topic="top-left-w"
+                         data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
+
+                    &lt;div id="tlh" class="ui-input-slider" data-topic="top-left-h"
+                        data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
+
+                    &lt;div id="trr" class="ui-input-slider" data-topic="top-right"
+                         data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
+
+                    &lt;div id="trw" class="ui-input-slider" data-topic="top-right-w"
+                         data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
+
+                    &lt;div id="trh" class="ui-input-slider" data-topic="top-right-h"
+                        data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
+
+                    &lt;div id="brr" class="ui-input-slider" data-topic="bottom-right"
+                         data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
+
+                    &lt;div id="brw" class="ui-input-slider" data-topic="bottom-right-w"
+                         data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
+
+                    &lt;div id="brh" class="ui-input-slider" data-topic="bottom-right-h"
+                        data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
+
+                    &lt;div id="blr" class="ui-input-slider" data-topic="bottom-left"
+                         data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
+
+                    &lt;div id="blw" class="ui-input-slider" data-topic="bottom-left-w"
+                         data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
+
+                    &lt;div id="blh" class="ui-input-slider" data-topic="bottom-left-h"
+                        data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
+                &lt;/div&gt;
+            &lt;/div&gt;
+        &lt;/div&gt;
+    &lt;/div&gt;
+    &lt;div id="controls" class="group section"&gt;
+
+        &lt;div class="group section"&gt;
+            &lt;div id="dimensions"&gt;
+                &lt;div class="ui-input-slider" data-topic="width" data-info="width"
+                     data-unit=" px" data-min="150" data-max="700" data-sensivity="1"&gt;&lt;/div&gt;
+
+                &lt;div class="ui-input-slider" data-topic="height" data-info="height"
+                    data-unit=" px" data-min="75" data-max="350" data-sensivity="1"&gt;&lt;/div&gt;
+            &lt;/div&gt;
+
+            &lt;div id="output"&gt;&lt;/div&gt;
+        &lt;/div&gt;
+
+        &lt;div class="group section"&gt;
+            &lt;div id="radius-lock"&gt;
+                &lt;div class="info"&gt; Coins arrondis &lt;/div&gt;
+                &lt;div class="ui-checkbox" data-topic='top-left'&gt;&lt;/div&gt;
+                &lt;div class="ui-checkbox" data-topic='top-right'&gt;&lt;/div&gt;
+                &lt;div class="ui-checkbox" data-topic='bottom-right'&gt;&lt;/div&gt;
+                &lt;div class="ui-checkbox" data-topic='bottom-left'&gt;&lt;/div&gt;
+            &lt;/div&gt;
+
+            &lt;div id="unit-selection"&gt;
+                &lt;div class="info"&gt; Unités pour la bordure &lt;/div&gt;
+            &lt;/div&gt;
+        &lt;/div&gt;
+
+    &lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="Contenu_CSS">Contenu CSS</h3>
+
+<pre class="brush: css">/*  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 &gt; 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 &gt; input {
+ 	display: none;
+}
+
+.ui-checkbox &gt; 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 &gt; label:hover {
+	cursor: pointer;
+}
+
+.ui-checkbox &gt; 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 &gt; 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;
+}
+
+
+</pre>
+
+<h3 id="Contenu_JavaScript">Contenu JavaScript</h3>
+
+<pre class="brush: js"><code class="language-js">'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 &gt; 0 ? max : 100;
+		this.step = step === 0 ? 1 : step;
+		this.topic = topic;
+		this.node = node;
+		this.unit = unit;
+		this.sensivity = sensivity &gt; 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 &gt; slider.max) value = slider.max;
+		if (value &lt; slider.min)	value = slider.min;
+
+		slider.value = value;
+		slider.node.setAttribute('data-value', value);
+
+		if (send_notify !== undefined &amp;&amp; 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 &lt; 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 &lt; 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 &lt; 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' &amp;&amp; y == 'top') handle.className = 'handle handle-top-left'
+		if (x === 'right' &amp;&amp; y == 'top') handle.className = 'handle handle-top-right';
+		if (x === 'right' &amp;&amp; y == 'bottom') handle.className = 'handle handle-bottom-right';
+		if (x === 'left' &amp;&amp; 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 &amp;&amp; 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 &lt; 0)	this.size = 0;
+			if (this.size &gt; this.maxR)	this.size = this.maxR;
+			this.updateRadius();
+			this.updateBorderRadius();
+			return;
+		}
+
+		if (deltaX) {
+			this.width += this.resizeX * deltaX;
+			if (this.width &lt; 0)	this.width = 0;
+			if (this.width &gt; this.maxW)	this.width = this.maxW;
+			this.updateWidth();
+		}
+
+		if (deltaY) {
+			this.height += this.resizeY * deltaY;
+			if (this.height &lt; 0) this.height = 0;
+			if (this.height &gt; 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 &lt; 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 &lt; 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 &lt; 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
+	}
+
+})();
+
+
+</code></pre>
+</div>
+
+<p>{{EmbedLiveSample('border-radius-generator', '100%', '800px', '')}}</p>
diff --git a/files/fr/web/css/css_backgrounds_and_borders/box-shadow_generator/index.html b/files/fr/web/css/css_backgrounds_and_borders/box-shadow_generator/index.html
new file mode 100644
index 0000000000..78e9288be3
--- /dev/null
+++ b/files/fr/web/css/css_backgrounds_and_borders/box-shadow_generator/index.html
@@ -0,0 +1,2888 @@
+---
+title: Générateur de box-shadow
+slug: Web/CSS/CSS_Backgrounds_and_Borders/Box-shadow_generator
+tags:
+  - CSS
+  - Outil
+translation_of: Web/CSS/CSS_Background_and_Borders/Box-shadow_generator
+original_slug: Web/CSS/CSS_Background_and_Borders/Box-shadow_generator
+---
+<p>Cet outil visuel permet de construire des effets d'ombre et de générer du code pour la propriété {{cssxref("box-shadow")}} qui pourra être ajouté à votre feuille de style.</p>
+
+<div class="hidden">
+<h2 id="box-shadow_generator" name="box-shadow_generator">box-shadow generator</h2>
+
+<h3 id="HTML_Content">HTML Content</h3>
+
+<pre class="brush: html">&lt;div id="container"&gt;
+    &lt;div class="group section"&gt;
+        &lt;div id="layer_manager"&gt;
+            &lt;div class="group section"&gt;
+                &lt;div class="button" data-type="add"&gt; &lt;/div&gt;
+                &lt;div class="button" data-type="move-up"&gt; &lt;/div&gt;
+                &lt;div class="button" data-type="move-down"&gt; &lt;/div&gt;
+            &lt;/div&gt;
+            &lt;div id="stack_container"&gt;&lt;/div&gt;
+        &lt;/div&gt;
+
+        &lt;div id="preview_zone"&gt;
+            &lt;div id="layer_menu" class="col span_12"&gt;
+                &lt;div class="button" id="element" data-type="subject" data-title="element"&gt; element &lt;/div&gt;
+                &lt;div class="button" id="before" data-type="subject" data-title=":before"&gt;
+                    :before
+                    &lt;span class="delete" data-type="disable"&gt;&lt;/span&gt;
+                &lt;/div&gt;
+                &lt;div class="button" id="after" data-type="subject" data-title=":after"&gt;
+                    :after
+                    &lt;span class="delete" data-type="disable"&gt;&lt;/span&gt;
+                &lt;/div&gt;
+                &lt;div class="ui-checkbox" data-topic='before' data-label=":before"&gt;&lt;/div&gt;
+                &lt;div class="ui-checkbox" data-topic='after' data-label=":after"&gt;&lt;/div&gt;
+            &lt;/div&gt;
+
+            &lt;div id="preview"&gt;
+                &lt;div id="obj-element"&gt;
+                    &lt;div class="content"&gt; &lt;/div&gt;
+                    &lt;div id="obj-before"&gt; &lt;/div&gt;
+                    &lt;div id="obj-after"&gt; &lt;/div&gt;
+                &lt;/div&gt;
+            &lt;/div&gt;
+        &lt;/div&gt;
+    &lt;/div&gt;
+
+    &lt;div id="controls" class="group section"&gt;
+        &lt;div class="wrap-left"&gt;
+            &lt;div class="colorpicker category"&gt;
+                &lt;div class="title"&gt; &lt;/div&gt;
+                &lt;div id="colorpicker" class="group"&gt;
+                    &lt;div id="gradient" class="gradient"&gt;
+                        &lt;div id="gradient_picker"&gt; &lt;/div&gt;
+                    &lt;/div&gt;
+                    &lt;div id="hue" data-topic="hue" class="hue"&gt;
+                        &lt;div id="hue_selector"&gt; &lt;/div&gt;
+                    &lt;/div&gt;
+                    &lt;div class="info"&gt;
+                        &lt;div class="input" data-topic="hue" data-title='H:' data-action="HSV"&gt;&lt;/div&gt;
+                        &lt;div class="input" data-topic="saturation" data-title='S:' data-action="HSV"&gt;&lt;/div&gt;
+                        &lt;div class="input" data-topic="value" data-title='V:' data-action="HSV"&gt;&lt;/div&gt;
+                    &lt;/div&gt;
+                    &lt;div class="alpha"&gt;
+                        &lt;div id="alpha" data-topic="alpha"&gt;
+                            &lt;div id="alpha_selector"&gt; &lt;/div&gt;
+                        &lt;/div&gt;
+                    &lt;/div&gt;
+                    &lt;div class="info"&gt;
+                        &lt;div class="input" data-topic="r" data-title='R:' data-action="RGB"&gt;&lt;/div&gt;
+                        &lt;div class="input" data-topic="g" data-title='G:' data-action="RGB"&gt;&lt;/div&gt;
+                        &lt;div class="input" data-topic="b" data-title='B:' data-action="RGB"&gt;&lt;/div&gt;
+                    &lt;/div&gt;
+                    &lt;div class="preview block"&gt;
+                        &lt;div id="output_color"&gt; &lt;/div&gt;
+                    &lt;/div&gt;
+                    &lt;div class="block info"&gt;
+                        &lt;div class="input" data-topic="a" data-title='alpha:' data-action="alpha"&gt;&lt;/div&gt;
+                        &lt;div class="input" data-topic="hexa" data-title='' data-action="hexa"&gt;&lt;/div&gt;
+                    &lt;/div&gt;
+                &lt;/div&gt;
+            &lt;/div&gt;
+        &lt;/div&gt;
+
+        &lt;div class="wrap-right"&gt;
+
+            &lt;div id="shadow_properties" class="category"&gt;
+                &lt;div class="title"&gt; Propriétés d'ombre &lt;/div&gt;
+                &lt;div class="group"&gt;
+                    &lt;div class="group property"&gt;
+                        &lt;div class="ui-slider-name"&gt; inset &lt;/div&gt;
+                        &lt;div class="ui-checkbox" data-topic='inset'&gt;&lt;/div&gt;
+                    &lt;/div&gt;
+                    &lt;div class="slidergroup"&gt;
+                        &lt;div class="ui-slider-name"&gt; Position x &lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="posX" data-type="sub"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider" data-topic="posX"
+                            data-min="-500" data-max="500" data-step="1"&gt; &lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="posX" data-type="add"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider-input" data-topic="posX" data-unit="px"&gt;&lt;/div&gt;
+                    &lt;/div&gt;
+                    &lt;div class="slidergroup"&gt;
+                        &lt;div class="ui-slider-name"&gt; Position y &lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="posY" data-type="sub"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider" data-topic="posY"
+                            data-min="-500" data-max="500" data-step="1"&gt; &lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="posY" data-type="add"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider-input" data-topic="posY" data-unit="px"&gt;&lt;/div&gt;
+                    &lt;/div&gt;
+                    &lt;div class="slidergroup"&gt;
+                        &lt;div class="ui-slider-name"&gt; Blur &lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="blur" data-type="sub"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider" data-topic="blur"
+                            data-min="0" data-max="200" data-step="1"&gt; &lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="blur" data-type="add"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider-input" data-topic="blur" data-unit="px"&gt;&lt;/div&gt;
+                    &lt;/div&gt;
+                    &lt;div class="slidergroup"&gt;
+                        &lt;div class="ui-slider-name"&gt; Spread &lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="spread" data-type="sub"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider" data-topic="spread"
+                            data-min="-100"    data-max="100" data-step="1" data-value="50"&gt;
+                        &lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="spread" data-type="add"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider-input" data-topic="spread" data-unit="px"&gt;&lt;/div&gt;
+                    &lt;/div&gt;
+                &lt;/div&gt;
+            &lt;/div&gt;
+
+            &lt;div id="element_properties" class="category"&gt;
+                &lt;div class="title"&gt; Propriétés d'ombre &lt;/div&gt;
+                &lt;div class="group"&gt;
+                    &lt;div class="group property"&gt;
+                        &lt;div class="ui-slider-name"&gt; border &lt;/div&gt;
+                        &lt;div class="ui-checkbox" data-topic='border-state' data-state="true"&gt;&lt;/div&gt;
+                    &lt;/div&gt;
+                    &lt;div id="z-index" class="slidergroup"&gt;
+                        &lt;div class="ui-slider-name"&gt; z-index &lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="z-index" data-type="sub"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider" data-topic="z-index"
+                            data-min="-10" data-max="10" data-step="1"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="z-index" data-type="add"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider-input" data-topic="z-index"&gt;&lt;/div&gt;
+                    &lt;/div&gt;
+                    &lt;div class="slidergroup"&gt;
+                        &lt;div class="ui-slider-name"&gt; top &lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="top" data-type="sub"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider" data-topic="top"
+                            data-min="-500" data-max="500" data-step="1"&gt; &lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="top" data-type="add"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider-input" data-topic="top" data-unit="px"&gt;&lt;/div&gt;
+                    &lt;/div&gt;
+                    &lt;div class="slidergroup"&gt;
+                        &lt;div class="ui-slider-name"&gt; left &lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="left" data-type="sub"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider" data-topic="left"
+                            data-min="-300" data-max="700" data-step="1"&gt; &lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="left" data-type="add"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider-input" data-topic="left" data-unit="px"&gt;&lt;/div&gt;
+                    &lt;/div&gt;
+                    &lt;div id="transform_rotate" class="slidergroup"&gt;
+                        &lt;div class="ui-slider-name"&gt; Rotate &lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="rotate" data-type="sub"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider" data-topic="rotate"
+                            data-min="-360" data-max="360" data-step="1" data-value="0"&gt;
+                        &lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="rotate" data-type="add"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider-input" data-topic="rotate" data-unit="deg"&gt;&lt;/div&gt;
+                    &lt;/div&gt;
+                    &lt;div class="slidergroup"&gt;
+                        &lt;div class="ui-slider-name"&gt; Width &lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="width" data-type="sub"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider" data-topic="width"
+                            data-min="0" data-max="1000" data-step="1" data-value="200"&gt;
+                        &lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="width" data-type="add"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider-input" data-topic="width"  data-unit="px"&gt;&lt;/div&gt;
+                    &lt;/div&gt;
+                    &lt;div class="slidergroup"&gt;
+                        &lt;div class="ui-slider-name"&gt; Height &lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="height" data-type="sub"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider" data-topic="height"
+                            data-min="0" data-max="400" data-step="1" data-value="200"&gt;
+                        &lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="height" data-type="add"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider-input" data-topic="height" data-unit="px"&gt;&lt;/div&gt;
+                    &lt;/div&gt;
+                &lt;/div&gt;
+            &lt;/div&gt;
+
+            &lt;div id="output" class="category"&gt;
+                &lt;div id="menu" class="menu"&gt;&lt;/div&gt;
+                &lt;div class="title"&gt;    Code CSS &lt;/div&gt;
+                &lt;div class="group" style="border-top-left-radius: 0;"&gt;
+                    &lt;div class="output" data-topic="element" data-name="element"
+                        data-prop="width height background-color position=[relative] box-shadow"&gt;
+                    &lt;/div&gt;
+                    &lt;div class="output" data-topic="before" data-name="element:before"
+                        data-prop="content=[&amp;quot;&amp;quot;] position=[absolute] width height top left z-index background-color box-shadow transform -webkit-transform -ms-transform"&gt;
+                    &lt;/div&gt;
+                    &lt;div class="output" data-topic="after" data-name="element:after"
+                        data-prop="content=[&amp;quot;&amp;quot;] position=[absolute] width height top left z-index background-color box-shadow transform -webkit-transform -ms-transform"&gt;
+                    &lt;/div&gt;
+                &lt;/div&gt;
+            &lt;/div&gt;
+        &lt;/div&gt;
+    &lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="CSS_Content">CSS Content</h3>
+
+<pre class="brush: css">/*  GRID OF TWELVE
+ * ========================================================================== */
+
+.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 Slider
+ */
+
+.slidergroup {
+	height: 20px;
+	margin: 10px 0;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	-moz-user-select: none;
+	user-select: none;
+}
+
+.slidergroup * {
+	float: left;
+	height: 100%;
+	line-height: 100%;
+}
+
+/* Slider */
+
+.ui-slider {
+	height: 10px;
+	width: 200px;
+	margin: 4px 10px;
+	display: block;
+	border: 1px solid #999;
+	border-radius: 3px;
+	background: #EEE;
+}
+
+.ui-slider:hover {
+	cursor: pointer;
+}
+
+.ui-slider-name {
+	width: 90px;
+	padding: 0 10px 0 0;
+	text-align: right;
+	text-transform: lowercase;
+}
+
+.ui-slider-pointer {
+	width: 13px;
+	height: 13px;
+	background-color: #EEE;
+	border: 1px solid #2C9FC9;
+	border-radius: 3px;
+	position: relative;
+	top: -3px;
+	left: 0%;
+}
+
+.ui-slider-btn-set {
+	width: 25px;
+	background-color: #2C9FC9;
+	border-radius: 3px;
+	color: #FFF;
+	font-weight: bold;
+	text-align: center;
+}
+
+.ui-slider-btn-set:hover {
+	background-color: #379B4A;
+	cursor: pointer;
+}
+
+.ui-slider-input &gt; input {
+	margin: 0 10px;
+	padding: 0;
+	width: 50px;
+	text-align: center;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+/*
+ * UI Button
+ */
+
+/* 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 &gt; input {
+ 	display: none;
+}
+
+.ui-checkbox &gt; 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 &gt; label:hover {
+	cursor: pointer;
+}
+
+.ui-checkbox &gt; input:checked + label {
+	background-image: url("https://mdn.mozillademos.org/files/5681/checked.png");
+	background-color: #379B4A;
+}
+
+/*
+ * BOX SHADOW GENERATOR TOOL
+ */
+
+body {
+	max-width: 1000px;
+	height: 800px;
+	margin: 20px auto 0;
+
+	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;
+}
+
+#container {
+	width: 100%;
+	padding: 2px;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+
+/* container with shadows stacks */
+#stack_container {
+	height: 400px;
+	overflow: hidden;
+	position: relative;
+	border: 1px solid #CCC;
+	border-radius: 3px;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+#stack_container .container {
+	height: 100%;
+	width: 100%;
+	position: absolute;
+	left: 100%;
+	transition-property: left;
+	transition-duration: 0.5s;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+
+#stack_container .title {
+	text-align: center;
+	font-weight: bold;
+	line-height: 2em;
+	border-bottom: 1px solid #43A6E1;
+	color: #666;
+}
+
+
+/*
+ * Stack of Layers for shadow
+ */
+
+#layer_manager {
+	width: 17%;
+	background-color: #FEFEFE;
+	margin: 0 1% 0 0;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+	float: left;
+}
+
+
+#layer_manager .button {
+	width: 30%;
+	height: 25px;
+	margin:0 0 10px;
+	color: #333;
+	background-color: #EEE;
+	text-align: center;
+	font-size: 0.75em;
+	line-height: 1.5em;
+	border: 1px solid #CCC;
+	border-radius: 3px;
+
+	display: block;
+	background-position: center center;
+	background-repeat: no-repeat;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+	float: left;
+}
+
+#layer_manager .button:hover {
+	background-color: #3380C4;
+	border: 1px solid #3380C4;
+	cursor: pointer;
+}
+
+#layer_manager [data-type='add'] {
+	background-image: url("https://mdn.mozillademos.org/files/5685/add-black.png");
+}
+
+#layer_manager [data-type='add']:hover {
+	background-image: url("https://mdn.mozillademos.org/files/5687/add-white.png");
+}
+
+#layer_manager [data-type='move-up'] {
+	background-image: url("https://mdn.mozillademos.org/files/5697/up-black.png");
+	margin-left: 5%;
+	margin-right: 5%;
+}
+
+#layer_manager [data-type='move-up']:hover {
+	background-image: url("https://mdn.mozillademos.org/files/5709/up-white.png");
+}
+
+#layer_manager [data-type='move-down'] {
+	background-image: url("https://mdn.mozillademos.org/files/5693/down-black.png");
+}
+
+#layer_manager [data-type='move-down']:hover {
+	background-image: url("https://mdn.mozillademos.org/files/5695/down-white.png");
+}
+
+/* shadows classes */
+
+#layer_manager .node {
+	width: 100%;
+	margin: 5px 0;
+	padding: 5px;
+	text-align: center;
+	background-color: #EEE;
+	border: 1px solid #DDD;
+	font-size: 0.75em;
+	line-height: 1.5em;
+	color: #333;
+	border-radius: 3px;
+
+	position: relative;
+	display: block;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+#layer_manager .node:hover {
+	color: #FFF;
+	background-color: #3380C4;
+	cursor: pointer;
+}
+
+/* active element styling */
+
+#layer_manager [data-active='layer'] {
+	color: #FFF;
+	border: none;
+	background-color: #379B4A;
+}
+
+#layer_manager [data-active='subject'] {
+	color: #FFF;
+	background-color: #467FC9;
+}
+
+/* delete button */
+
+#layer_manager .delete {
+	width: 1.5em;
+	height: 100%;
+	float: right;
+	border-radius: 3px;
+	background-image: url("https://mdn.mozillademos.org/files/5689/delete-white.png");
+	background-position: center center;
+	background-repeat: no-repeat;
+	position: absolute;
+	top: 0;
+	right: 10px;
+	display: none;
+}
+
+#layer_manager .delete:hover {
+	background-image: url("https://mdn.mozillademos.org/files/5691/delete-yellow.png");
+}
+
+#layer_manager .node:hover .delete {
+	display: block;
+}
+
+
+#layer_manager .stack {
+	padding: 0 5px;
+	max-height: 90%;
+	overflow: auto;
+	overflow-x: hidden;
+}
+
+
+/*
+ * Layer Menu
+ */
+
+#layer_menu {
+	margin: 0 0 10px 0;
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+#layer_menu .button {
+	width: 100px;
+	margin: 0 5px 0 0;
+	padding: 2.5px;
+	color: #333;
+	background-color: #EEE;
+	border: 1px solid #CCC;
+	border-radius: 3px;
+	text-align: center;
+	font-size: 0.75em;
+	line-height: 1.5em;
+
+	position: relative;
+	display: block;
+	float: left;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+#layer_menu .button:hover {
+	color: #FFF;
+	background-color: #3380C4;
+	border: 1px solid #3380C4;
+	cursor: pointer;
+}
+
+#layer_menu .delete {
+	width: 1.5em;
+	height: 100%;
+	float: right;
+	border-radius: 3px;
+	background-image: url("https://mdn.mozillademos.org/files/5689/delete-white.png");
+	background-position: center center;
+	background-repeat: no-repeat;
+	position: absolute;
+	top: 0;
+	right: 5px;
+	display: none;
+}
+
+#layer_menu .delete:hover {
+	background-image: url("https://mdn.mozillademos.org/files/5691/delete-yellow.png");
+}
+
+#layer_menu .button:hover .delete {
+	display: block;
+}
+
+
+/*
+ * active element styling
+ */
+
+#layer_menu [data-active='subject'] {
+	color: #FFF;
+	background-color: #379B4A;
+	border: 1px solid #379B4A;
+}
+
+
+/* Checkbox */
+
+#layer_menu .ui-checkbox &gt; label {
+	height: 15px;
+	line-height: 17px;
+	font-weight: normal;
+	width: 46px;
+	margin: 0 5px 0 0;
+}
+
+#layer_menu .ui-checkbox &gt; input:checked + label {
+	display: none;
+}
+
+
+/******************************************************************************/
+/******************************************************************************/
+/*
+ * Preview Area
+ */
+
+#preview_zone {
+	width: 82%;
+	float: left;
+
+}
+
+
+#preview {
+	width: 100%;
+	height: 400px;
+	border: 1px solid #CCC;
+	border-radius: 3px;
+	text-align: center;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+	cursor: move;
+	float: left;
+}
+
+#preview .content {
+	width: 100%;
+	height: 100%;
+	display: block;
+}
+
+#obj-element {
+	width: 300px;
+	height: 100px;
+	border: 1px solid #CCC;
+	background: #FFF;
+	position: relative;
+}
+
+
+#obj-before {
+	height: 100%;
+	width: 100%;
+	background: #999;
+	border: 1px solid #CCC;
+	text-align: left;
+	display : block;
+	position: absolute;
+	z-index: -1;
+}
+
+#obj-after {
+	height: 100%;
+	width: 100%;
+	background: #DDD;
+	border: 1px solid #CCC;
+	text-align: right;
+	display : block;
+	position: absolute;
+	z-index: -1;
+}
+
+
+/******************************************************************************/
+/******************************************************************************/
+
+/**
+ * Controls
+ */
+
+.wrap-left {
+	float: left;
+	overflow: hidden;
+}
+
+.wrap-right {
+	float: right;
+	overflow: hidden;
+}
+
+.wrap-left &gt; * {
+	float: left;
+}
+
+.wrap-right &gt; * {
+	float: right;
+}
+
+@media (min-width: 960px) {
+
+	.wrap-left {
+		width: 45%;
+	}
+
+	.wrap-right {
+		width: 55%;
+	}
+}
+
+
+@media (max-width: 959px) {
+
+	.wrap-left {
+		width: 30%;
+	}
+
+	.wrap-right {
+		width: 70%;
+	}
+}
+
+
+#controls {
+	color: #444;
+	margin: 10px 0 0 0;
+}
+
+
+#controls .category {
+	width: 500px;
+	margin: 0 auto 20px;
+	padding: 0;
+
+}
+
+#controls .category .title {
+	width: 100%;
+	height: 1.5em;
+	line-height: 1.5em;
+	color: #AAA;
+	text-align: right;
+}
+
+#controls .category &gt; .group {
+	border: 1px solid #CCC;
+	border-radius: 3px;
+}
+
+
+/**
+ * 	Color Picker
+ */
+
+@media (min-width: 960px) {
+	#controls .colorpicker {
+		width: 420px;
+	}
+}
+
+@media (max-width: 959px) {
+	#controls .colorpicker {
+		width: 210px;
+	}
+}
+
+#colorpicker {
+	width: 100%;
+	margin: 0 auto;
+}
+
+#colorpicker .gradient {
+	width: 200px;
+	height: 200px;
+	margin: 5px;
+	background: url("https://mdn.mozillademos.org/files/5707/picker_mask_200.png");
+	background: -moz-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
+				-moz-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
+	background: -webkit-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
+				-webkit-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
+	background-color: #F00;
+	float: left;
+}
+
+#colorpicker .hue {
+	width: 200px;
+	height: 30px;
+	margin: 5px;
+	background: url("https://mdn.mozillademos.org/files/5701/hue.png");
+	background: -moz-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
+				#00F 66.66%, #F0F 83.33%, #F00 100%);
+	background: -webkit-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
+				#00F 66.66%, #F0F 83.33%, #F00 100%);
+	float: left;
+}
+
+#colorpicker .alpha {
+	width: 200px;
+	height: 30px;
+	margin: 5px;
+	border: 1px solid #CCC;
+	float: left;
+	background: url("https://mdn.mozillademos.org/files/5705/alpha.png");
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+#colorpicker #alpha {
+	width: 100%;
+	height: 100%;
+	background: url("https://mdn.mozillademos.org/files/5703/alpha_mask.png");
+	background: -moz-linear-gradient(left, rgba(255, 0, 0, 0) 0%, rgba(255, 0, 0, 1) 100%);
+}
+
+#colorpicker #gradient_picker {
+	width: 0.5em;
+	height: 0.5em;
+	border-radius: 0.4em;
+	border: 2px solid #CCC;
+	position: relative;
+	top: 20%;
+	left: 20%;
+}
+
+#colorpicker #hue_selector,
+#colorpicker #alpha_selector {
+	width: 3px;
+	height: 100%;
+	border: 1px solid #777;
+	background-color: #FFF;
+	position: relative;
+	top: -1px;
+	left: 0%;
+}
+
+/* input HSV and RGB */
+#colorpicker .info {
+	width: 200px;
+	margin: 5px;
+	float: left;
+}
+
+#colorpicker .info * {
+	float: left;
+}
+
+#colorpicker .info input {
+	margin: 0;
+	text-align: center;
+	width: 30px;
+	-moz-user-select: text;
+	-webkit-user-select: text;
+	-ms-user-select: text;
+}
+
+#colorpicker .info span {
+	height: 20px;
+	width: 30px;
+	text-align: center;
+	line-height: 20px;
+	display: block;
+}
+
+/* Preview color */
+#colorpicker .block {
+	width: 95px;
+	height: 54px;
+	float: left;
+	position: relative;
+}
+
+#colorpicker .preview {
+	margin: 5px;
+	border: 1px solid #CCC;
+	background-image: url("https://mdn.mozillademos.org/files/5705/alpha.png");
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+#colorpicker .preview:before {
+	height: 100%;
+	width: 50%;
+	left: 50%;
+	content: "";
+	background: #FFF;
+	position: absolute;
+	z-index: 1;
+}
+
+#colorpicker .preview &gt; * {
+	width: 50%;
+	height: 100%;
+}
+
+#colorpicker #output_color {
+	width: 100%;
+	height: 100%;
+	position: absolute;
+	z-index: 2;
+}
+
+#colorpicker .block .input {
+	float: right;
+}
+
+#colorpicker [data-topic="a"] &gt; span {
+	width: 50px;
+}
+
+#colorpicker [data-topic="hexa"] {
+	float: right;
+	margin: 10px 0 0 0;
+}
+
+#colorpicker [data-topic="hexa"] &gt; span {
+	display: none;
+}
+
+#colorpicker [data-topic="hexa"] &gt; input {
+	width: 85px;
+	padding: 2px 0;
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+
+/*
+ * UI Components
+ */
+
+/* Property */
+
+.property {
+	height: 20px;
+	margin: 10px 0;
+}
+
+.property * {
+	float: left;
+	height: 100%;
+	line-height: 100%;
+}
+
+/* Slider */
+
+#controls .ui-slider-name {
+	margin: 0 10px 0 0;
+}
+
+/*
+ * Output code styling
+ */
+
+#output {
+	position: relative;
+}
+
+#output .menu {
+	max-width: 70%;
+	height: 20px;
+	position: absolute;
+	top: 2px;
+}
+
+#output .button {
+	width: 90px;
+	height: 22px;
+	margin: 0 5px 0 0;
+	text-align: center;
+	line-height: 20px;
+	font-size: 14px;
+	color: #FFF;
+	background-color: #999;
+	border-top-left-radius: 3px;
+	border-top-right-radius: 3px;
+	bottom: -5px;
+	float:left;
+}
+
+#output .button:hover {
+	color: #FFF;
+	background-color: #666;
+	cursor: pointer;
+}
+
+#output .menu [data-active="true"] {
+	color: #777;
+	background-color: #FFF;
+	border: 1px solid #CCC;
+	border-bottom: none;
+}
+
+#output .menu [data-topic="before"] {
+	left: 100px;
+}
+
+#output .menu [data-topic="after"] {
+	left: 200px;
+}
+
+#output .output {
+	width: 480px;
+	margin: 10px;
+	padding: 10px;
+	overflow: hidden;
+	color: #555;
+	font-size: 14px;
+	border: 1px dashed #CCC;
+	border-radius: 3px;
+	display: none;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+
+	-moz-user-select: text;
+	-webkit-user-select: text;
+	-ms-user-select: text;
+}
+
+#output .css-property {
+	width: 100%;
+	float: left;
+	white-space: pre;
+}
+
+#output .name {
+	width: 35%;
+	float: left;
+}
+
+#output .value {
+	width: 65%;
+	float: left;
+}
+
+</pre>
+
+<h3 id="JavaScript_Content">JavaScript Content</h3>
+
+<pre class="brush: js"><code class="language-js">
+
+'use strict';
+
+/**
+ * UI-SlidersManager
+ */
+
+var SliderManager = (function SliderManager() {
+
+	var subscribers = {};
+	var sliders = [];
+
+	var Slider = 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 snap = node.getAttribute('data-snap');
+		var topic = node.getAttribute('data-topic');
+
+		this.min = min;
+		this.max = max &gt; 0 ? max : 100;
+		this.step = step === 0 ? 1 : step;
+		this.value = value &lt;= max &amp;&amp; value &gt;= min ? value : (min + max) / 2 | 0;
+		this.snap = snap === "true" ? true : false;
+		this.topic = topic;
+		this.node = node;
+
+		var pointer = document.createElement('div');
+		pointer.className = 'ui-slider-pointer';
+		node.appendChild(pointer);
+		this.pointer = pointer;
+
+		setMouseTracking(node, updateSlider.bind(this));
+
+		sliders[topic] = this;
+		setValue(topic, this.value);
+	}
+
+	var setButtonComponent = function setButtonComponent(node) {
+		var type = node.getAttribute('data-type');
+		var topic = node.getAttribute('data-topic');
+		if (type === "sub") {
+			node.textContent = '-';
+			node.addEventListener("click", function() {
+				decrement(topic);
+			});
+		}
+		if (type === "add") {
+			node.textContent = '+';
+			node.addEventListener("click", function() {
+				increment(topic);
+			});
+		}
+	}
+
+	var setInputComponent = function setInputComponent(node) {
+		var topic		= node.getAttribute('data-topic');
+		var unit_type	= node.getAttribute('data-unit');
+
+		var input = document.createElement('input');
+		var unit = document.createElement('span');
+		unit.textContent = unit_type;
+
+		input.setAttribute('type', 'text');
+		node.appendChild(input);
+		node.appendChild(unit);
+
+		input.addEventListener('click', function(e) {
+			this.select();
+		});
+
+		input.addEventListener('change', function(e) {
+			setValue(topic, e.target.value | 0);
+		});
+
+		subscribe(topic, function(value) {
+			node.children[0].value = value;
+		});
+	}
+
+	var increment = function increment(topic) {
+		var slider = sliders[topic];
+		if (slider === null || slider === undefined)
+			return;
+
+		if (slider.value + slider.step &lt;= slider.max) {
+			slider.value += slider.step;
+			setValue(slider.topic, slider.value)
+			notify.call(slider);
+		}
+	};
+
+	var decrement = function decrement(topic) {
+		var slider = sliders[topic];
+		if (slider === null || slider === undefined)
+			return;
+
+		if (slider.value - slider.step &gt;= slider.min) {
+			slider.value -= slider.step;
+			setValue(topic, slider.value)
+			notify.call(slider);
+		}
+	}
+
+	// this = Slider object
+	var updateSlider = function updateSlider(e) {
+		var node = this.node;
+		var pos = e.pageX - node.offsetLeft;
+		var width = node.clientWidth;
+		var delta = this.max - this.min;
+		var offset = this.pointer.clientWidth + 4; // border width * 2
+
+		if (pos &lt; 0) pos = 0;
+		if (pos &gt; width) pos = width;
+
+		var value = pos * delta / width | 0;
+		var precision = value % this.step;
+		value = value - precision + this.min;
+		if (precision &gt; this.step / 2)
+			value = value + this.step;
+
+		if (this.snap)
+			pos =  (value - this.min) * width / delta;
+
+		this.pointer.style.left = pos - offset/2 + "px";
+		this.value = value;
+		node.setAttribute('data-value', value);
+		notify.call(this);
+	}
+
+	var setValue = function setValue(topic, value) {
+		var slider = sliders[topic];
+
+		if (value &gt; slider.max || value &lt; slider.min)
+			return;
+
+		var delta = slider.max - slider.min;
+		var width = slider.node.clientWidth;
+		var offset = slider.pointer.clientWidth;
+		var pos =  (value - slider.min) * width / delta;
+		slider.value = value;
+		slider.pointer.style.left = pos - offset / 2 + "px";
+		slider.node.setAttribute('data-value', value);
+		notify.call(slider);
+	}
+
+	var setMouseTracking = function setMouseTracking(elem, callback) {
+		elem.addEventListener("mousedown", function(e) {
+			callback(e);
+			document.addEventListener("mousemove", callback);
+		});
+
+		document.addEventListener("mouseup", function(e) {
+			document.removeEventListener("mousemove", callback);
+		});
+	}
+
+	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() {
+		if (subscribers[this.topic] === undefined)
+			return;
+
+		for (var i in subscribers[this.topic]) {
+			subscribers[this.topic][i](this.value);
+		}
+	}
+
+	var init = function init() {
+		var elem, size;
+
+		elem = document.querySelectorAll('.ui-slider-btn-set');
+		size = elem.length;
+		for (var i = 0; i &lt; size; i++)
+			setButtonComponent(elem[i]);
+
+		elem = document.querySelectorAll('.ui-slider-input');
+		size = elem.length;
+		for (var i = 0; i &lt; size; i++)
+			setInputComponent(elem[i]);
+
+		elem = document.querySelectorAll('.ui-slider');
+		size = elem.length;
+		for (var i = 0; i &lt; size; i++)
+			new Slider(elem[i]);
+	}
+
+	return {
+		init : init,
+		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;
+			notify.call(buttons[topic]);
+		}
+		catch(error) {
+			console.log(error, topic, value);
+		}
+	}
+
+	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() {
+		if (subscribers[this.topic] === undefined)
+			return;
+		for (var i = 0; i &lt; 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 &lt; size; i++)
+			new CheckBox(elem[i]);
+	}
+
+	return {
+		init : init,
+		setValue : setValue,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe
+	}
+
+})();
+
+
+window.addEventListener("load", function(){
+	BoxShadow.init();
+});
+
+var BoxShadow = (function BoxShadow() {
+
+	function getElemById(id) {
+		return document.getElementById(id);
+	}
+
+	/**
+	 * RGBA Color class
+	 */
+
+	function Color() {
+		this.r = 0;
+		this.g = 0;
+		this.b = 0;
+		this.a = 1;
+		this.hue = 0;
+		this.saturation = 0;
+		this.value = 0;
+	}
+
+	Color.prototype.copy = function copy(obj) {
+		if(obj instanceof Color !== true) {
+			console.log("Typeof instance not Color");
+			return;
+		}
+
+		this.r = obj.r;
+		this.g = obj.g;
+		this.b = obj.b;
+		this.a = obj.a;
+		this.hue = obj.hue;
+		this.saturation = obj.saturation;
+		this.value = obj.value;
+	}
+
+	Color.prototype.setRGBA = function setRGBA(red, green, blue, alpha) {
+		if (red != undefined)
+			this.r = red | 0;
+		if (green != undefined)
+			this.g = green | 0;
+		if (blue != undefined)
+			this.b = blue | 0;
+		if (alpha != undefined)
+			this.a = alpha | 0;
+	}
+
+	/**
+	 * HSV/HSB (hue, saturation, value / brightness)
+	 * @param hue			0-360
+	 * @param saturation	0-100
+	 * @param value 		0-100
+	 */
+	Color.prototype.setHSV = function setHSV(hue, saturation, value) {
+		this.hue = hue;
+		this.saturation = saturation;
+		this.value = value;
+		this.updateRGB();
+	}
+
+	Color.prototype.updateRGB = function updateRGB() {
+		var sat = this.saturation / 100;
+		var value = this.value / 100;
+		var C = sat * value;
+		var H = this.hue / 60;
+		var X = C * (1 - Math.abs(H % 2 - 1));
+		var m = value - C;
+		var precision = 255;
+
+		C = (C + m) * precision;
+		X = (X + m) * precision;
+		m = m * precision;
+
+		if (H &gt;= 0 &amp;&amp; H &lt; 1) {	this.setRGBA(C, X, m);	return; }
+		if (H &gt;= 1 &amp;&amp; H &lt; 2) {	this.setRGBA(X, C, m);	return; }
+		if (H &gt;= 2 &amp;&amp; H &lt; 3) {	this.setRGBA(m, C, X);	return; }
+		if (H &gt;= 3 &amp;&amp; H &lt; 4) {	this.setRGBA(m, X, C);	return; }
+		if (H &gt;= 4 &amp;&amp; H &lt; 5) {	this.setRGBA(X, m, C);	return; }
+		if (H &gt;= 5 &amp;&amp; H &lt; 6) {	this.setRGBA(C, m, X);	return; }
+	}
+
+	Color.prototype.updateHSV = function updateHSV() {
+		var red		= this.r / 255;
+		var green	= this.g / 255;
+		var blue	= this.b / 255;
+
+		var cmax = Math.max(red, green, blue);
+		var cmin = Math.min(red, green, blue);
+		var delta = cmax - cmin;
+		var hue = 0;
+		var saturation = 0;
+
+		if (delta) {
+			if (cmax === red ) { hue = ((green - blue) / delta); }
+			if (cmax === green ) { hue = 2 + (blue - red) / delta; }
+			if (cmax === blue ) { hue = 4 + (red - green) / delta; }
+			if (cmax) saturation = delta / cmax;
+		}
+
+		this.hue = 60 * hue | 0;
+		if (this.hue &lt; 0) this.hue += 360;
+		this.saturation = (saturation * 100) | 0;
+		this.value = (cmax * 100) | 0;
+	}
+
+	Color.prototype.setHexa = function setHexa(value) {
+		var valid  = /(^#{0,1}[0-9A-F]{6}$)|(^#{0,1}[0-9A-F]{3}$)/i.test(value)
+		if (valid !== true)
+			return;
+
+		if (value[0] === '#')
+			value = value.slice(1, value.length);
+
+		if (value.length === 3)
+			value = value.replace(/([0-9A-F])([0-9A-F])([0-9A-F])/i,"$1$1$2$2$3$3");
+
+		this.r = parseInt(value.substr(0, 2), 16);
+		this.g = parseInt(value.substr(2, 2), 16);
+		this.b = parseInt(value.substr(4, 2), 16);
+
+		this.alpha	= 1;
+	}
+
+	Color.prototype.getHexa = function getHexa() {
+		var r = this.r.toString(16);
+		var g = this.g.toString(16);
+		var b = this.b.toString(16);
+		if (this.r &lt; 16) r = '0' + r;
+		if (this.g &lt; 16) g = '0' + g;
+		if (this.b &lt; 16) b = '0' + b;
+		var value = '#' + r + g + b;
+		return value.toUpperCase();
+	}
+
+	Color.prototype.getRGBA = function getRGBA() {
+
+		var rgb = "(" + this.r + ", " + this.g + ", " + this.b;
+		var a = '';
+		var v = '';
+		if (this.a !== 1) {
+			a = 'a';
+			v = ', ' + this.a;
+		}
+
+		var value = "rgb" + a + rgb + v + ")";
+		return value;
+	}
+
+	Color.prototype.getColor = function getColor() {
+		if (this.a | 0 === 1)
+			return this.getHexa();
+		return this.getRGBA();
+	}
+
+	/**
+	 * Shadow Object
+	 */
+	function Shadow() {
+		this.inset  = false;
+		this.posX   = 5;
+		this.posY   = -5;
+		this.blur   = 5;
+		this.spread = 0;
+		this.color  = new Color();
+
+		var hue			= (Math.random() * 360) | 0;
+		var saturation	= (Math.random() * 75) | 0;
+		var value 		= (Math.random() * 50 + 50) | 0;
+		this.color.setHSV(hue, saturation, value, 1);
+	}
+
+	Shadow.prototype.computeCSS = function computeCSS() {
+		var value = "";
+		if (this.inset === true)
+			value += "inset ";
+		value += this.posX + "px ";
+		value += this.posY + "px ";
+		value += this.blur + "px ";
+		value += this.spread + "px ";
+		value += this.color.getColor();
+
+		return value;
+	}
+
+	Shadow.prototype.toggleInset = function toggleInset(value) {
+		if (value !== undefined || typeof value === "boolean")
+			this.inset = value;
+		else
+			this.inset = this.inset === true ? false : true;
+	}
+
+	Shadow.prototype.copy = function copy(obj) {
+		if(obj instanceof Shadow !== true) {
+			console.log("Typeof instance not Shadow");
+			return;
+		}
+
+		this.inset  = obj.inset;
+		this.posX   = obj.posX;
+		this.posY   = obj.posY;
+		this.blur   = obj.blur;
+		this.spread = obj.spread;
+		this.color.copy(obj.color);
+	}
+
+	/**
+	 * Color Picker
+	 */
+	var ColoPicker = (function ColoPicker() {
+
+		var colorpicker;
+		var hue_area;
+		var gradient_area;
+		var alpha_area;
+		var gradient_picker;
+		var hue_selector;
+		var alpha_selector;
+		var pick_object;
+		var info_rgb;
+		var info_hsv;
+		var info_hexa;
+		var output_color;
+		var color = new Color();
+		var subscribers = [];
+
+		var updateColor = function updateColor(e) {
+			var x = e.pageX - gradient_area.offsetLeft;
+			var y = e.pageY - gradient_area.offsetTop;
+
+			// width and height should be the same
+			var size = gradient_area.clientWidth;
+
+			if (x &gt; size)
+				x = size;
+			if (y &gt; size)
+				y = size;
+
+			if (x &lt; 0) x = 0;
+			if (y &lt; 0) y = 0;
+
+			var value = 100 - (y * 100 / size) | 0;
+			var saturation = x * 100 / size | 0;
+
+			color.setHSV(color.hue, saturation, value);
+			// should update just
+			// color pointer location
+			updateUI();
+			notify("color", color);
+		}
+
+		var updateHue = function updateHue(e) {
+			var x = e.pageX - hue_area.offsetLeft;
+			var width = hue_area.clientWidth;
+
+			if (x &lt; 0) x = 0;
+			if (x &gt; width) x = width;
+
+			var hue = ((360 * x) / width) | 0;
+			if (hue === 360) hue = 359;
+
+			color.setHSV(hue, color.saturation, color.value);
+
+			// should update just
+			// hue pointer location
+			// picker area background
+			// alpha area background
+			updateUI();
+			notify("color", color);
+		}
+
+		var updateAlpha = function updateAlpha(e) {
+			var x = e.pageX - alpha_area.offsetLeft;
+			var width = alpha_area.clientWidth;
+
+			if (x &lt; 0) x = 0;
+			if (x &gt; width) x = width;
+
+			color.a = (x / width).toFixed(2);
+
+			// should update just
+			// alpha pointer location
+			updateUI();
+			notify("color", color);
+		}
+
+		var setHueGfx = function setHueGfx(hue) {
+			var sat = color.saturation;
+			var val = color.value;
+			var alpha = color.a;
+
+			color.setHSV(hue, 100, 100);
+			gradient_area.style.backgroundColor = color.getHexa();
+
+			color.a = 0;
+			var start = color.getRGBA();
+			color.a = 1;
+			var end = color.getRGBA();
+			color.a = alpha;
+
+			var gradient = '-moz-linear-gradient(left, ' +	start + '0%, ' + end + ' 100%)';
+			alpha_area.style.background = gradient;
+		}
+
+		var updateUI = function updateUI() {
+			var x, y;		// coordinates
+			var size;		// size of the area
+			var offset;		// pointer graphic selector offset
+
+			// Set color pointer location
+			size = gradient_area.clientWidth;
+			offset = gradient_picker.clientWidth / 2 + 2;
+
+			x = (color.saturation * size / 100) | 0;
+			y = size - (color.value * size / 100) | 0;
+
+			gradient_picker.style.left = x - offset + "px";
+			gradient_picker.style.top = y - offset + "px";
+
+			// Set hue pointer location
+			size = hue_area.clientWidth;
+			offset = hue_selector.clientWidth/2;
+			x = (color.hue * size / 360 ) | 0;
+			hue_selector.style.left = x - offset + "px";
+
+			// Set alpha pointer location
+			size = alpha_area.clientWidth;
+			offset = alpha_selector.clientWidth/2;
+			x = (color.a * size) | 0;
+			alpha_selector.style.left = x - offset + "px";
+
+			// Set picker area background
+			var nc = new Color();
+			nc.copy(color);
+			if (nc.hue === 360) nc.hue = 0;
+			nc.setHSV(nc.hue, 100, 100);
+			gradient_area.style.backgroundColor = nc.getHexa();
+
+			// Set alpha area background
+			nc.copy(color);
+			nc.a = 0;
+			var start = nc.getRGBA();
+			nc.a = 1;
+			var end = nc.getRGBA();
+			var gradient = '-moz-linear-gradient(left, ' +	start + '0%, ' + end + ' 100%)';
+			alpha_area.style.background = gradient;
+
+			// Update color info
+			notify("color", color);
+			notify("hue", color.hue);
+			notify("saturation", color.saturation);
+			notify("value", color.value);
+			notify("r", color.r);
+			notify("g", color.g);
+			notify("b", color.b);
+			notify("a", color.a);
+			notify("hexa", color.getHexa());
+			output_color.style.backgroundColor = color.getRGBA();
+		}
+
+		var setInputComponent = function setInputComponent(node) {
+			var topic = node.getAttribute('data-topic');
+			var title = node.getAttribute('data-title');
+			var action = node.getAttribute('data-action');
+			title = title === null ? '' : title;
+
+			var input = document.createElement('input');
+			var info = document.createElement('span');
+			info.textContent = title;
+
+			input.setAttribute('type', 'text');
+			input.setAttribute('data-action', 'set-' + action + '-' + topic);
+			node.appendChild(info);
+			node.appendChild(input);
+
+			input.addEventListener('click', function(e) {
+				this.select();
+			});
+
+			input.addEventListener('change', function(e) {
+				if (action === 'HSV')
+					inputChangeHSV(topic);
+				if (action === 'RGB')
+					inputChangeRGB(topic);
+				if (action === 'alpha')
+					inputChangeAlpha(topic);
+				if (action === 'hexa')
+					inputChangeHexa(topic);
+			});
+
+			subscribe(topic, function(value) {
+				node.children[1].value = value;
+			});
+		}
+
+		var inputChangeHSV = function actionHSV(topic) {
+			var selector = "[data-action='set-HSV-" + topic + "']";
+			var node = document.querySelector("#colorpicker " + selector);
+			var value = parseInt(node.value);
+
+			if (typeof value === 'number' &amp;&amp; isNaN(value) === false &amp;&amp;
+				value &gt;= 0 &amp;&amp; value &lt; 360)
+				color[topic] = value;
+
+			color.updateRGB();
+			updateUI();
+		}
+
+		var inputChangeRGB = function inputChangeRGB(topic) {
+			var selector = "[data-action='set-RGB-" + topic + "']";
+			var node = document.querySelector("#colorpicker " + selector);
+			var value = parseInt(node.value);
+
+			if (typeof value === 'number' &amp;&amp; isNaN(value) === false &amp;&amp;
+				value &gt;= 0 &amp;&amp; value &lt;= 255)
+				color[topic] = value;
+
+			color.updateHSV();
+			updateUI();
+		}
+
+		var inputChangeAlpha = function inputChangeAlpha(topic) {
+			var selector = "[data-action='set-alpha-" + topic + "']";
+			var node = document.querySelector("#colorpicker " + selector);
+			var value = parseFloat(node.value);
+
+			if (typeof value === 'number' &amp;&amp; isNaN(value) === false &amp;&amp;
+				value &gt;= 0 &amp;&amp; value &lt;= 1)
+				color.a = value.toFixed(2);
+
+			updateUI();
+		}
+
+		var inputChangeHexa = function inputChangeHexa(topic) {
+			var selector = "[data-action='set-hexa-" + topic + "']";
+			var node = document.querySelector("#colorpicker " + selector);
+			var value = node.value;
+			color.setHexa(value);
+			color.updateHSV();
+			updateUI();
+		}
+
+		var setMouseTracking = function setMouseTracking(elem, callback) {
+
+			elem.addEventListener("mousedown", function(e) {
+				callback(e);
+				document.addEventListener("mousemove", callback);
+			});
+
+			document.addEventListener("mouseup", function(e) {
+				document.removeEventListener("mousemove", callback);
+			});
+		}
+
+		/*
+		 * Observer
+		 */
+		var setColor = function setColor(obj) {
+			if(obj instanceof Color !== true) {
+				console.log("Typeof instance not Color");
+				return;
+			}
+			color.copy(obj);
+			updateUI();
+		}
+
+		var subscribe = function subscribe(topic, callback) {
+			if (subscribers[topic] === undefined)
+				subscribers[topic] = [];
+
+			subscribers[topic].push(callback);
+		}
+
+		var unsubscribe = function unsubscribe(callback) {
+			subscribers.indexOf(callback);
+			subscribers.splice(index, 1);
+		}
+
+		var notify = function notify(topic, value) {
+			for (var i in subscribers[topic])
+				subscribers[topic][i](value);
+		}
+
+		var init = function init() {
+			colorpicker		= getElemById("colorpicker");
+			hue_area		= getElemById("hue");
+			gradient_area	= getElemById("gradient");
+			alpha_area		= getElemById("alpha");
+			gradient_picker	= getElemById("gradient_picker");
+			hue_selector	= getElemById("hue_selector");
+			alpha_selector	= getElemById("alpha_selector");
+			output_color	= getElemById("output_color");
+
+			var elem = document.querySelectorAll('#colorpicker .input');
+			var size = elem.length;
+			for (var i = 0; i &lt; size; i++)
+				setInputComponent(elem[i]);
+
+			setMouseTracking(gradient_area, updateColor);
+			setMouseTracking(hue_area, updateHue);
+			setMouseTracking(alpha_area, updateAlpha);
+
+		}
+
+		return {
+			init : init,
+			setColor : setColor,
+			subscribe : subscribe,
+			unsubscribe : unsubscribe
+		}
+
+	})();
+
+	/**
+	 * 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
+		}
+
+	})();
+
+	/*
+	 * Element Class
+	 */
+	var CssClass = function CssClass(id) {
+		this.left = 0;
+		this.top = 0;
+		this.rotate = 0;
+		this.width = 300;
+		this.height = 100;
+		this.display = true;
+		this.border = true;
+		this.zIndex = -1;
+		this.bgcolor = new Color();
+		this.id = id;
+		this.node = getElemById('obj-' + id);
+		this.object = getElemById(id);
+		this.shadowID = null;
+		this.shadows = []
+		this.render = [];
+		this.init();
+	}
+
+	CssClass.prototype.init = function init() {
+		this.left = ((this.node.parentNode.clientWidth - this.node.clientWidth) / 2) | 0;
+		this.top = ((this.node.parentNode.clientHeight - this.node.clientHeight) / 2) | 0;
+
+		this.setTop(this.top);
+		this.setLeft(this.left);
+		this.setHeight(this.height);
+		this.setWidth(this.width);
+		this.bgcolor.setHSV(0, 0, 100);
+		this.updateBgColor(this.bgcolor);
+	}
+
+	CssClass.prototype.updatePos = function updatePos(deltaX, deltaY) {
+		this.left += deltaX;
+		this.top += deltaY;
+		this.node.style.top = this.top + "px";
+		this.node.style.left = this.left + "px";
+		SliderManager.setValue("left", this.left);
+		SliderManager.setValue("top", this.top);
+	}
+
+	CssClass.prototype.setLeft = function setLeft(value) {
+		this.left = value;
+		this.node.style.left = this.left + "px";
+		OutputManager.updateProperty(this.id, 'left', this.left + 'px');
+	}
+
+	CssClass.prototype.setTop = function setTop(value) {
+		this.top = value;
+		this.node.style.top = this.top + 'px';
+		OutputManager.updateProperty(this.id, 'top', this.top + 'px');
+	}
+
+	CssClass.prototype.setWidth = function setWidth(value) {
+		this.width = value;
+		this.node.style.width = this.width + 'px';
+		OutputManager.updateProperty(this.id, 'width', this.width + 'px');
+	}
+
+	CssClass.prototype.setHeight = function setHeight(value) {
+		this.height = value;
+		this.node.style.height = this.height + 'px';
+		OutputManager.updateProperty(this.id, 'height', this.height + 'px');
+	}
+
+	// Browser support
+	CssClass.prototype.setRotate = function setRotate(value) {
+		var cssvalue = 'rotate(' + value +'deg)';
+
+		this.node.style.transform = cssvalue;
+		this.node.style.webkitTransform = cssvalue;
+		this.node.style.msTransform = cssvalue;
+
+		if (value !== 0) {
+			if (this.rotate === 0) {
+				OutputManager.toggleProperty(this.id, 'transform', true);
+				OutputManager.toggleProperty(this.id, '-webkit-transform', true);
+				OutputManager.toggleProperty(this.id, '-ms-transform', true);
+			}
+		}
+		else {
+			OutputManager.toggleProperty(this.id, 'transform', false);
+			OutputManager.toggleProperty(this.id, '-webkit-transform', false);
+			OutputManager.toggleProperty(this.id, '-ms-transform', false);
+		}
+
+		OutputManager.updateProperty(this.id, 'transform', cssvalue);
+		OutputManager.updateProperty(this.id, '-webkit-transform', cssvalue);
+		OutputManager.updateProperty(this.id, '-ms-transform', cssvalue);
+		this.rotate = value;
+	}
+
+	CssClass.prototype.setzIndex = function setzIndex(value) {
+		this.node.style.zIndex = value;
+		OutputManager.updateProperty(this.id, 'z-index', value);
+		this.zIndex = value;
+	}
+
+	CssClass.prototype.toggleDisplay = function toggleDisplay(value) {
+		if (typeof value !== "boolean" || this.display === value)
+			return;
+
+		this.display = value;
+		var display = this.display === true ? "block" : "none";
+		this.node.style.display = display;
+		this.object.style.display = display;
+	}
+
+	CssClass.prototype.toggleBorder = function toggleBorder(value) {
+		if (typeof value !== "boolean" || this.border === value)
+			return;
+
+		this.border = value;
+		var border = this.border === true ? "1px solid #CCC" : "none";
+		this.node.style.border = border;
+	}
+
+	CssClass.prototype.updateBgColor = function updateBgColor(color) {
+		this.bgcolor.copy(color);
+		this.node.style.backgroundColor = color.getColor();
+		OutputManager.updateProperty(this.id, 'background-color', color.getColor());
+	}
+
+	CssClass.prototype.updateShadows = function updateShadows() {
+		if (this.render.length === 0)
+			OutputManager.toggleProperty(this.id, 'box-shadow', false);
+		if (this.render.length === 1)
+			OutputManager.toggleProperty(this.id, 'box-shadow', true);
+
+		this.node.style.boxShadow = this.render.join(", ");
+		OutputManager.updateProperty(this.id, 'box-shadow', this.render.join(", \n"));
+
+	}
+
+
+	/**
+	 * Tool Manager
+	 */
+	var Tool = (function Tool() {
+
+		var preview;
+		var classes = [];
+		var active = null;
+		var animate = false;
+
+		/*
+		 * Toll actions
+		 */
+		var addCssClass = function addCssClass(id) {
+			classes[id] = new CssClass(id);
+		}
+
+		var setActiveClass = function setActiveClass(id) {
+			active = classes[id];
+			active.shadowID = null;
+			ColoPicker.setColor(classes[id].bgcolor);
+			SliderManager.setValue("top", active.top);
+			SliderManager.setValue("left", active.left);
+			SliderManager.setValue("rotate", active.rotate);
+			SliderManager.setValue("z-index", active.zIndex);
+			SliderManager.setValue("width", active.width);
+			SliderManager.setValue("height", active.height);
+			ButtonManager.setValue("border-state", active.border);
+			active.updateShadows();
+		}
+
+		var disableClass = function disableClass(topic) {
+			classes[topic].toggleDisplay(false);
+			ButtonManager.setValue(topic, false);
+		}
+
+		var addShadow = function addShadow(position) {
+			if (animate === true)
+				return -1;
+
+			active.shadows.splice(position, 0, new Shadow());
+			active.render.splice(position, 0, null);
+		}
+
+		var swapShadow = function swapShadow(id1, id2) {
+			var x = active.shadows[id1];
+			active.shadows[id1] = active.shadows[id2];
+			active.shadows[id2] = x;
+			updateShadowCSS(id1);
+			updateShadowCSS(id2);
+		}
+
+		var deleteShadow = function deleteShadow(position) {
+			active.shadows.splice(position, 1);
+			active.render.splice(position, 1);
+			active.updateShadows();
+		}
+
+		var setActiveShadow = function setActiveShadow(id, glow) {
+			active.shadowID = id;
+			ColoPicker.setColor(active.shadows[id].color);
+			ButtonManager.setValue("inset", active.shadows[id].inset);
+			SliderManager.setValue("blur", active.shadows[id].blur);
+			SliderManager.setValue("spread", active.shadows[id].spread);
+			SliderManager.setValue("posX", active.shadows[id].posX);
+			SliderManager.setValue("posY", active.shadows[id].posY);
+			if (glow === true)
+				addGlowEffect(id);
+		}
+
+		var addGlowEffect = function addGlowEffect(id) {
+			if (animate === true)
+				return;
+
+			animate = true;
+			var store = new Shadow();
+			var shadow = active.shadows[id];
+
+			store.copy(shadow);
+			shadow.color.setRGBA(40, 125, 200, 1);
+			shadow.blur = 10;
+			shadow.spread = 10;
+
+			active.node.style.transition = "box-shadow 0.2s";
+			updateShadowCSS(id);
+
+			setTimeout(function() {
+				shadow.copy(store);
+				updateShadowCSS(id);
+				setTimeout(function() {
+					active.node.style.removeProperty("transition");
+					animate = false;
+				}, 100);
+			}, 200);
+		}
+
+		var updateActivePos = function updateActivePos(deltaX, deltaY) {
+			if (active.shadowID === null)
+				active.updatePos(deltaX, deltaY);
+			else
+				updateShadowPos(deltaX, deltaY);
+		}
+
+		/*
+		 * Shadow properties
+		 */
+		var updateShadowCSS = function updateShadowCSS(id) {
+			active.render[id] = active.shadows[id].computeCSS();
+			active.updateShadows();
+		}
+
+		var toggleShadowInset = function toggleShadowInset(value) {
+			if (active.shadowID === null)
+				return;
+			active.shadows[active.shadowID].toggleInset(value);
+			updateShadowCSS(active.shadowID);
+		}
+
+		var updateShadowPos = function updateShadowPos(deltaX, deltaY) {
+			var shadow = active.shadows[active.shadowID];
+			shadow.posX += deltaX;
+			shadow.posY += deltaY;
+			SliderManager.setValue("posX", shadow.posX);
+			SliderManager.setValue("posY", shadow.posY);
+			updateShadowCSS(active.shadowID);
+		}
+
+		var setShadowPosX = function setShadowPosX(value) {
+			if (active.shadowID === null)
+				return;
+			active.shadows[active.shadowID].posX = value;
+			updateShadowCSS(active.shadowID);
+		}
+
+		var setShadowPosY = function setShadowPosY(value) {
+			if (active.shadowID === null)
+				return;
+			active.shadows[active.shadowID].posY = value;
+			updateShadowCSS(active.shadowID);
+		}
+
+		var setShadowBlur = function setShadowBlur(value) {
+			if (active.shadowID === null)
+				return;
+			active.shadows[active.shadowID].blur = value;
+			updateShadowCSS(active.shadowID);
+		}
+
+		var setShadowSpread = function setShadowSpread(value) {
+			if (active.shadowID === null)
+				return;
+			active.shadows[active.shadowID].spread = value;
+			updateShadowCSS(active.shadowID);
+		}
+
+		var updateShadowColor = function updateShadowColor(color) {
+			active.shadows[active.shadowID].color.copy(color);
+			updateShadowCSS(active.shadowID);
+		}
+
+		/*
+		 * Element Properties
+		 */
+		var updateColor = function updateColor(color) {
+			if (active.shadowID === null)
+				active.updateBgColor(color);
+			else
+				updateShadowColor(color);
+		}
+
+		var init = function init() {
+			preview = getElemById("preview");
+
+			ColoPicker.subscribe("color", updateColor);
+			PreviewMouseTracking.subscribe(updateActivePos);
+
+			// Affects shadows
+			ButtonManager.subscribe("inset", toggleShadowInset);
+			SliderManager.subscribe("posX", setShadowPosX);
+			SliderManager.subscribe("posY", setShadowPosY);
+			SliderManager.subscribe("blur", setShadowBlur);
+			SliderManager.subscribe("spread", setShadowSpread);
+
+			// Affects element
+			SliderManager.subscribe("top", function(value){
+				active.setTop(value);
+			});
+			SliderManager.subscribe("left", function(value){
+				active.setLeft(value);
+			});
+			SliderManager.subscribe("rotate", function(value) {
+				if (active == classes["element"])
+					return;
+				active.setRotate(value);
+			});
+
+			SliderManager.subscribe("z-index", function(value) {
+				if (active == classes["element"])
+					return;
+				active.setzIndex(value);
+			});
+
+			SliderManager.subscribe("width", function(value) {
+				active.setWidth(value)
+			});
+
+			SliderManager.subscribe("height", function(value) {
+				active.setHeight(value)
+			});
+
+			// Actions
+			classes['before'].top = -30;
+			classes['before'].left = -30;
+			classes['after'].top = 30;
+			classes['after'].left = 30;
+			classes['before'].toggleDisplay(false);
+			classes['after'].toggleDisplay(false);
+			ButtonManager.setValue('before', false);
+			ButtonManager.setValue('after', false);
+
+			ButtonManager.subscribe("before", classes['before'].toggleDisplay.bind(classes['before']));
+			ButtonManager.subscribe("after", classes['after'].toggleDisplay.bind(classes['after']));
+
+			ButtonManager.subscribe("border-state", function(value) {
+				active.toggleBorder(value);
+			});
+
+		}
+
+		return {
+			init 			: init,
+			addShadow		: addShadow,
+			swapShadow		: swapShadow,
+			addCssClass		: addCssClass,
+			disableClass	: disableClass,
+			deleteShadow	: deleteShadow,
+			setActiveClass	: setActiveClass,
+			setActiveShadow : setActiveShadow
+		}
+
+	})();
+
+	/**
+	 * Layer Manager
+	 */
+	var LayerManager = (function LayerManager() {
+		var stacks = [];
+		var active = {
+			node : null,
+			stack : null
+		}
+		var elements = {};
+
+		var mouseEvents = function mouseEvents(e) {
+			var node = e.target;
+			var type = node.getAttribute('data-type');
+
+			if (type === 'subject')
+				setActiveStack(stacks[node.id]);
+
+			if (type === 'disable') {
+				Tool.disableClass(node.parentNode.id);
+				setActiveStack(stacks['element']);
+			}
+
+			if (type === 'add')
+				active.stack.addLayer();
+
+			if (type === 'layer')
+				active.stack.setActiveLayer(node);
+
+			if (type === 'delete')
+				active.stack.deleteLayer(node.parentNode);
+
+			if (type === 'move-up')
+				active.stack.moveLayer(1);
+
+			if (type === 'move-down')
+				active.stack.moveLayer(-1);
+		}
+
+		var setActiveStack = function setActiveStack(stackObj) {
+			active.stack.hide();
+			active.stack = stackObj;
+			active.stack.show();
+		}
+
+		/*
+		 * Stack object
+		 */
+		var Stack = function Stack(subject) {
+			var S = document.createElement('div');
+			var title = document.createElement('div');
+			var stack = document.createElement('div');
+
+			S.className = 'container';
+			stack.className = 'stack';
+			title.className = 'title';
+			title.textContent = subject.getAttribute('data-title');
+			S.appendChild(title);
+			S.appendChild(stack);
+
+			this.id = subject.id;
+			this.container = S;
+			this.stack = stack;
+			this.subject = subject;
+			this.order = [];
+			this.uid = 0;
+			this.count = 0;
+			this.layer = null;
+			this.layerID = 0;
+		}
+
+		Stack.prototype.addLayer = function addLayer() {
+			if (Tool.addShadow(this.layerID) == -1)
+				return;
+
+			var uid = this.getUID();
+			var layer = this.createLayer(uid);
+
+			if (this.layer === null &amp;&amp; this.stack.children.length &gt;= 1)
+				this.layer = this.stack.children[0];
+
+			this.stack.insertBefore(layer, this.layer);
+			this.order.splice(this.layerID, 0, uid);
+			this.count++;
+			this.setActiveLayer(layer);
+		}
+
+		Stack.prototype.createLayer = function createLayer(uid) {
+			var layer = document.createElement('div');
+			var del = document.createElement('span');
+
+			layer.className = 'node';
+			layer.setAttribute('data-shid', uid);
+			layer.setAttribute('data-type', 'layer');
+			layer.textContent = 'Ombre ' + uid;
+
+			del.className = 'delete';
+			del.setAttribute('data-type', 'delete');
+
+			layer.appendChild(del);
+			return layer;
+		}
+
+		Stack.prototype.getUID = function getUID() {
+			return this.uid++;
+		}
+
+		// SOLVE IE BUG
+		Stack.prototype.moveLayer = function moveLayer(direction) {
+			if (this.count &lt;= 1 || this.layer === null)
+				return;
+			if (direction === -1 &amp;&amp; this.layerID === (this.count - 1) )
+				return;
+			if (direction === 1 &amp;&amp; this.layerID === 0 )
+				return;
+
+			if (direction === -1) {
+				var before = null;
+				Tool.swapShadow(this.layerID, this.layerID + 1);
+				this.swapOrder(this.layerID, this.layerID + 1);
+				this.layerID += 1;
+
+				if (this.layerID + 1 !== this.count)
+					before = this.stack.children[this.layerID + 1];
+
+				this.stack.insertBefore(this.layer, before);
+				Tool.setActiveShadow(this.layerID, false);
+			}
+
+			if (direction === 1) {
+				Tool.swapShadow(this.layerID, this.layerID - 1);
+				this.swapOrder(this.layerID, this.layerID - 1);
+				this.layerID -= 1;
+				this.stack.insertBefore(this.layer, this.stack.children[this.layerID]);
+				Tool.setActiveShadow(this.layerID, false);
+			}
+		}
+
+		Stack.prototype.swapOrder = function swapOrder(pos1, pos2) {
+			var x = this.order[pos1];
+			this.order[pos1] = this.order[pos2];
+			this.order[pos2] = x;
+		}
+
+		Stack.prototype.deleteLayer = function deleteLayer(node) {
+			var shadowID =  node.getAttribute('data-shid') | 0;
+			var index = this.order.indexOf(shadowID);
+			this.stack.removeChild(this.stack.children[index]);
+			this.order.splice(index, 1);
+			this.count--;
+
+			Tool.deleteShadow(index);
+
+			if (index &gt; this.layerID)
+				return;
+
+			if (index == this.layerID) {
+				if (this.count &gt;= 1) {
+					this.layerID = 0;
+					this.setActiveLayer(this.stack.children[0], true);
+				}
+				else {
+					this.layer = null;
+					this.show();
+				}
+			}
+
+			if (index &lt; this.layerID) {
+				this.layerID--;
+				Tool.setActiveShadow(this.layerID, true);
+			}
+
+		}
+
+		Stack.prototype.setActiveLayer = function setActiveLayer(node) {
+			elements.shadow_properties.style.display = 'block';
+			elements.element_properties.style.display = 'none';
+
+			if (this.layer)
+				this.layer.removeAttribute('data-active');
+
+			this.layer = node;
+			this.layer.setAttribute('data-active', 'layer');
+
+			var shadowID =  node.getAttribute('data-shid') | 0;
+			this.layerID = this.order.indexOf(shadowID);
+			Tool.setActiveShadow(this.layerID, true);
+		}
+
+		Stack.prototype.unsetActiveLayer = function unsetActiveLayer() {
+			if (this.layer)
+				this.layer.removeAttribute('data-active');
+
+			this.layer = null;
+			this.layerID = 0;
+		}
+
+		Stack.prototype.hide = function hide() {
+			this.unsetActiveLayer();
+			this.subject.removeAttribute('data-active');
+			var style = this.container.style;
+			style.left = '100%';
+			style.zIndex = '0';
+		}
+
+		Stack.prototype.show = function show() {
+			elements.shadow_properties.style.display = 'none';
+			elements.element_properties.style.display = 'block';
+
+			if (this.id === 'element') {
+				elements.zIndex.style.display = 'none';
+				elements.transform_rotate.style.display = 'none';
+			}
+			else {
+				elements.zIndex.style.display = 'block';
+				elements.transform_rotate.style.display = 'block';
+			}
+
+			this.subject.setAttribute('data-active', 'subject');
+			var style = this.container.style;
+			style.left = '0';
+			style.zIndex = '10';
+			Tool.setActiveClass(this.id);
+		}
+
+		function init() {
+
+			var elem, size;
+			var layerManager = getElemById("layer_manager");
+			var layerMenu = getElemById("layer_menu");
+			var container = getElemById("stack_container");
+
+			elements.shadow_properties = getElemById('shadow_properties');
+			elements.element_properties = getElemById('element_properties');
+			elements.transform_rotate = getElemById('transform_rotate');
+			elements.zIndex = getElemById('z-index');
+
+			elem = document.querySelectorAll('#layer_menu [data-type="subject"]');
+			size = elem.length;
+
+			for (var i = 0; i &lt; size; i++) {
+				var S = new Stack(elem[i]);
+				stacks[elem[i].id] = S;
+				container.appendChild(S.container);
+				Tool.addCssClass(elem[i].id);
+			}
+
+			active.stack = stacks['element'];
+			stacks['element'].show();
+
+			layerManager.addEventListener("click", mouseEvents);
+			layerMenu.addEventListener("click", mouseEvents);
+
+			ButtonManager.subscribe("before", function(value) {
+				if (value === false &amp;&amp; active.stack === stacks['before'])
+					setActiveStack(stacks['element'])
+				if (value === true &amp;&amp; active.stack !== stacks['before'])
+					setActiveStack(stacks['before'])
+			});
+
+			ButtonManager.subscribe("after", function(value) {
+				if (value === false &amp;&amp; active.stack === stacks['after'])
+					setActiveStack(stacks['element'])
+				if (value === true &amp;&amp; active.stack !== stacks['after'])
+					setActiveStack(stacks['after'])
+			});
+		}
+
+		return {
+			init : init
+		}
+	})();
+
+	/*
+	 * OutputManager
+	 */
+	var OutputManager = (function OutputManager() {
+		var classes = [];
+		var buttons = [];
+		var active = null;
+		var menu = null;
+		var button_offset = 0;
+
+		var crateOutputNode = function(topic, property) {
+
+			var prop = document.createElement('div');
+			var name = document.createElement('span');
+			var value = document.createElement('span');
+
+			var pmatch = property.match(/(^([a-z0-9\-]*)=\[([a-z0-9\-\"]*)\])|^([a-z0-9\-]*)/i);
+
+			name.textContent = '\t' + pmatch[4];
+
+			if (pmatch[3] !== undefined) {
+				name.textContent = '\t' + pmatch[2];
+				value.textContent = pmatch[3] + ';';
+			}
+
+			name.textContent += ': ';
+			prop.className = 'css-property';
+			name.className = 'name';
+			value.className = 'value';
+			prop.appendChild(name);
+			prop.appendChild(value);
+
+			classes[topic].node.appendChild(prop);
+			classes[topic].line[property] = prop;
+			classes[topic].prop[property] = value;
+		}
+
+		var OutputClass = function OutputClass(node) {
+			var topic = node.getAttribute('data-topic');
+			var prop = node.getAttribute('data-prop');
+			var name = node.getAttribute('data-name');
+			var properties = prop.split(' ');
+
+			classes[topic] = {};
+			classes[topic].node = node;
+			classes[topic].prop = [];
+			classes[topic].line = [];
+			classes[topic].button = new Button(topic);
+
+			var open_decl = document.createElement('div');
+			var end_decl = document.createElement('div');
+
+			open_decl.textContent = name + ' {';
+			end_decl.textContent = '}';
+			node.appendChild(open_decl);
+
+			for (var i in properties)
+				crateOutputNode(topic, properties[i]);
+
+			node.appendChild(end_decl);
+		}
+
+		var Button = function Button(topic) {
+			var button = document.createElement('div');
+
+			button.className = 'button';
+			button.textContent = topic;
+			button.style.left = button_offset + 'px';
+			button_offset += 100;
+
+			button.addEventListener("click", function() {
+				toggleDisplay(topic);
+			})
+
+			menu.appendChild(button);
+			return button;
+		}
+
+		var toggleDisplay = function toggleDisplay(topic) {
+			active.button.removeAttribute('data-active');
+			active.node.style.display = 'none';
+			active = classes[topic];
+			active.node.style.display = 'block';
+			active.button.setAttribute('data-active', 'true');
+		}
+
+		var toggleButton = function toggleButton(topic, value) {
+			var display = (value === true) ? 'block' : 'none';
+			classes[topic].button.style.display = display;
+
+			if (value === true)
+				toggleDisplay(topic);
+			else
+				toggleDisplay('element');
+		}
+
+		var updateProperty = function updateProperty(topic, property, data) {
+			try {
+				classes[topic].prop[property].textContent = data + ';';
+			}
+			catch(error) {
+				// console.log("ERROR undefined : ", topic, property, data);
+			}
+		}
+
+		var toggleProperty = function toggleProperty(topic, property, value) {
+			var display = (value === true) ? 'block' : 'none';
+			try {
+				classes[topic].line[property].style.display = display;
+			}
+			catch(error) {
+				// console.log("ERROR undefined : ",classes, topic, property, value);
+			}
+		}
+
+		var init = function init() {
+
+			menu = getElemById('menu');
+
+			var elem = document.querySelectorAll('#output .output');
+			var size = elem.length;
+			for (var i = 0; i &lt; size; i++)
+				OutputClass(elem[i]);
+
+			active = classes['element'];
+			toggleDisplay('element');
+
+			ButtonManager.subscribe("before", function(value) {
+				toggleButton('before', value);
+			});
+
+			ButtonManager.subscribe("after", function(value) {
+				toggleButton('after', value);
+			});
+		}
+
+		return {
+			init : init,
+			updateProperty : updateProperty,
+			toggleProperty : toggleProperty
+		}
+
+	})();
+
+
+	/**
+	 * Init Tool
+	 */
+	var init = function init() {
+		ButtonManager.init();
+		OutputManager.init();
+		ColoPicker.init();
+		SliderManager.init();
+		LayerManager.init();
+		PreviewMouseTracking.init("preview");
+		Tool.init();
+	}
+
+	return {
+		init : init
+	}
+
+})();
+
+
+</code></pre>
+</div>
+
+<div>{{EmbedLiveSample('box-shadow_generator', '100%', '1100px', '')}}</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://cssgenerator.org/box-shadow-css-generator.html">Le générateur d'ombres CSS</a></li>
+</ul>
diff --git a/files/fr/web/css/css_grid_layout/relationship_of_grid_layout/index.html b/files/fr/web/css/css_grid_layout/relationship_of_grid_layout/index.html
index 65525f21d4..6cfbf09b73 100644
--- a/files/fr/web/css/css_grid_layout/relationship_of_grid_layout/index.html
+++ b/files/fr/web/css/css_grid_layout/relationship_of_grid_layout/index.html
@@ -1,18 +1,11 @@
 ---
 title: Le modèle de grille et les autres modèles de disposition
 slug: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout
-tags:
-  - CSS
-  - CSS Grids
-  - Guide
-  - Intermédiaire
 translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout
 original_slug: Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_disposition
 ---
 <div>{{CSSRef}}</div>
 
-<p>{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_et_l_amélioration_progressive", "Web/CSS/CSS_Grid_Layout/Construire_des_dispositions_courantes_avec_des_grilles_CSS","Web/CSS/CSS_Grid_Layout")}}</p>
-
 <p>Le mode de disposition en grille a été conçu afin de pouvoir fonctionner avec les autres composantes de CSS pour construire un système complet de disposition. Dans ce guide, nous expliquerons comment intégrer une grille CSS parmi d'autres techniques que vous pourriez déjà utiliser.</p>
 
 <h2 id="Les_grilles_et_les_boîtes_flexibles_flexbox">Les grilles et les boîtes flexibles (<em>flexbox</em>)</h2>
@@ -29,7 +22,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_d
 
 <div id="onedtwod">
 <div class="hidden">
-<pre class="brush: css notranslate">* {box-sizing: border-box;}
+<pre class="brush: css">* {box-sizing: border-box;}
 
 .wrapper {
   border: 2px solid #f76707;
@@ -47,7 +40,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_d
 </pre>
 </div>
 
-<pre class="brush: html notranslate">&lt;div class="wrapper"&gt;
+<pre class="brush: html">&lt;div class="wrapper"&gt;
   &lt;div&gt;Un&lt;/div&gt;
   &lt;div&gt;Deux&lt;/div&gt;
   &lt;div&gt;Trois&lt;/div&gt;
@@ -56,7 +49,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_d
 &lt;/div&gt;
 </pre>
 
-<pre class="brush: css notranslate">.wrapper {
+<pre class="brush: css">.wrapper {
   width: 500px;
   display: flex;
   flex-wrap: wrap;
@@ -79,7 +72,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_d
 
 <div class="Two_Dimensional_With_Grid">
 <div class="hidden">
-<pre class="brush: css notranslate">* {box-sizing: border-box;}
+<pre class="brush: css">* {box-sizing: border-box;}
 
 .wrapper {
   border: 2px solid #f76707;
@@ -97,7 +90,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_d
 </pre>
 </div>
 
-<pre class="brush: html notranslate">&lt;div class="wrapper"&gt;
+<pre class="brush: html">&lt;div class="wrapper"&gt;
   &lt;div&gt;Un&lt;/div&gt;
   &lt;div&gt;Deux&lt;/div&gt;
   &lt;div&gt;Trois&lt;/div&gt;
@@ -106,14 +99,14 @@ original_slug: Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_d
 &lt;/div&gt;
 </pre>
 
-<pre class="brush: css notranslate">.wrapper {
+<pre class="brush: css">.wrapper {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
 }
 </pre>
 
-<p>{{EmbedLiveSample('Two_Dimensional_With_Grid', '300', '170')}}</p>
 </div>
+<p>{{EmbedLiveSample('La_même_disposition_avec_une_grille_CSS', '300', '170')}}</p>
 
 <p>Lorsqu'il s'agit de choisir entre les grilles ou les boîtes flexibles, vous pouvez vous poser les questions suivantes :</p>
 
@@ -141,7 +134,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_d
 <p>Dans le premier exemple, on utilise les boîtes flexibles avec un conteneur qui dispose de trois objets. La propriété {{cssxref("min-height")}} est définie et paramètre la hauteur du conteneur flexible. {{cssxref("align-items")}} vaut <code>flex-end</code> pour le conteneur flexible et les objets s'empileront donc jusqu'à l'extrémité du conteneur flexible. On utilise également la propriété {{cssxref("align-self")}} sur <code>box1</code> afin de surcharger la valeur par défaut et d'étirer jusqu'à la hauteur du conteneur et jusqu'à <code>box2</code> afin que <code>box1</code> soit alignée avec le début du conteneur flexible.</p>
 
 <div class="hidden">
-<pre class="brush: css notranslate">* {box-sizing: border-box;}
+<pre class="brush: css">* {box-sizing: border-box;}
 
 .wrapper {
   border: 2px solid #f76707;
@@ -159,14 +152,14 @@ original_slug: Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_d
 </pre>
 </div>
 
-<pre class="brush: html notranslate">&lt;div class="wrapper"&gt;
+<pre class="brush: html">&lt;div class="wrapper"&gt;
   &lt;div class="box1"&gt;Un&lt;/div&gt;
   &lt;div class="box2"&gt;Deux&lt;/div&gt;
   &lt;div class="box3"&gt;Trois&lt;/div&gt;
 &lt;/div&gt;
 </pre>
 
-<pre class="brush: css notranslate">.wrapper {
+<pre class="brush: css">.wrapper {
   display: flex;
   align-items: flex-end;
   min-height: 200px;
@@ -179,14 +172,14 @@ original_slug: Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_d
 }
 </pre>
 
-<p>{{EmbedLiveSample('Box_alignment', '300', '230')}}</p>
+<p>{{EmbedLiveSample('Lalignement_des_boîtes', '300', '230')}}</p>
 
 <h3 id="Lalignement_sur_les_grilles_CSS">L'alignement sur les grilles CSS</h3>
 
 <p>Dans cet exemple, on utilise une grille pour créer la même disposition. Cette fois on utilise les propriétés d'alignement des boîtes. On aligne donc par rapport à <code>start</code> et <code>end</code> plutôt que par rapport à <code>flex-start</code> et <code>flex-end</code>. Dans le cas d'une disposition en grille, on aligne les éléments à l'intérieur de leur zone de grille. Dans ce cas, il s'agit d'une seule cellule mais on pourrait très bien construire une zone composée de plusieurs cellules.</p>
 
 <div class="hidden">
-<pre class="brush: css notranslate">* {box-sizing: border-box;}
+<pre class="brush: css">* {box-sizing: border-box;}
 
 .wrapper {
   border: 2px solid #f76707;
@@ -204,14 +197,14 @@ original_slug: Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_d
 </pre>
 </div>
 
-<pre class="brush: html notranslate">&lt;div class="wrapper"&gt;
+<pre class="brush: html">&lt;div class="wrapper"&gt;
   &lt;div class="box1"&gt;Un&lt;/div&gt;
   &lt;div class="box2"&gt;Deux&lt;/div&gt;
   &lt;div class="box3"&gt;Trois&lt;/div&gt;
 &lt;/div&gt;
 </pre>
 
-<pre class="brush: css notranslate">.wrapper {
+<pre class="brush: css">.wrapper {
   display: grid;
   grid-template-columns: repeat(3,1fr);
   align-items: end;
@@ -224,7 +217,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_d
 }
 </pre>
 
-<p>{{EmbedLiveSample('Alignment_in_CSS_Grids', '200', '310')}}</p>
+<p>{{EmbedLiveSample('Lalignement_sur_les_grilles_CSS', '200', '310')}}</p>
 
 <h3 id="Lunité_fr_et_flex-basis">L'unité <code>fr</code> et <code>flex-basis</code></h3>
 
@@ -241,7 +234,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_d
 <p>Dans l'exemple qui suit, on utilise le mot-clé <code>auto-fill</code> à la place d'un entier dans la fonction <code>repeat</code> et on définit la taille d'une piste à 200 pixels. Cela signifie que la grille créera autant de pistes de 200 pixels en colonnes qu'il est possible d'en placer dans le conteneur.</p>
 
 <div class="hidden">
-<pre class="brush: css notranslate">* {box-sizing: border-box;}
+<pre class="brush: css">* {box-sizing: border-box;}
 
 .wrapper {
   border: 2px solid #f76707;
@@ -259,20 +252,20 @@ original_slug: Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_d
 </pre>
 </div>
 
-<pre class="brush: html notranslate">&lt;div class="wrapper"&gt;
+<pre class="brush: html">&lt;div class="wrapper"&gt;
   &lt;div&gt;Un&lt;/div&gt;
   &lt;div&gt;Deux&lt;/div&gt;
   &lt;div&gt;Trois&lt;/div&gt;
 &lt;/div&gt;
 </pre>
 
-<pre class="brush: css notranslate">.wrapper {
+<pre class="brush: css">.wrapper {
   display: grid;
   grid-template-columns: repeat(auto-fill, 200px);
 }
 </pre>
 
-<p>{{EmbedLiveSample('Auto-filling_grid_tracks', '500', '170')}}</p>
+<p>{{EmbedLiveSample('Des_pistes_qui_se_remplissent_automatiquement', '500', '170')}}</p>
 
 <h3 id="Avoir_un_nombre_de_pistes_flexible">Avoir un nombre de pistes flexible</h3>
 
@@ -281,7 +274,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_d
 <p>Dans l'exemple qui suit, on crée des pistes qui sont remplies automatiquement avec <code>minmax</code>. On souhaite que les pistes mesurent au moins 200 pixels, avec un maximum de <code>1fr</code>. Lorsque le navigateur a calculé la quantité de colonnes qui tiendraient dans le conteneur (en tenant compte des espaces), il utilisera le maximum <code>1fr</code> afin de répartir l'espace restant entre les objets.</p>
 
 <div class="hidden">
-<pre class="brush: css notranslate">* {box-sizing: border-box;}
+<pre class="brush: css">* {box-sizing: border-box;}
 
 .wrapper {
   border: 2px solid #f76707;
@@ -299,20 +292,20 @@ original_slug: Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_d
 </pre>
 </div>
 
-<pre class="brush: html notranslate">&lt;div class="wrapper"&gt;
+<pre class="brush: html">&lt;div class="wrapper"&gt;
   &lt;div&gt;Un&lt;/div&gt;
   &lt;div&gt;Deux&lt;/div&gt;
   &lt;div&gt;Trois&lt;/div&gt;
 &lt;/div&gt;
 </pre>
 
-<pre class="brush: css notranslate">.wrapper {
+<pre class="brush: css">.wrapper {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
 }
 </pre>
 
-<p>{{EmbedLiveSample('A_flexible_number_of_tracks', '500', '170')}}</p>
+<p>{{EmbedLiveSample('Avoir_un_nombre_de_pistes_flexible', '500', '170')}}</p>
 
 <p>On peut désormais créer une grille qui dispose d'un nombre flexible de pistes, elles-mêmes flexibles tout en ayant des éléments qui sont disposés sur la grille par rapport à des lignes et à des colonnes.</p>
 
@@ -327,7 +320,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_d
 <p>Dans l'exemple ci-après, on a un conteneur avec quatre enfants. Le troisième élément est positionné en absolu et est placé sur la grille. La grille, le conteneur, a <code>position:</code> <code>relative</code> et devient donc le contexte de positionnement pour cet objet.</p>
 
 <div class="hidden">
-<pre class="brush: css notranslate">* {box-sizing: border-box;}
+<pre class="brush: css">* {box-sizing: border-box;}
 
 .wrapper {
   border: 2px solid #f76707;
@@ -345,7 +338,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_d
 </pre>
 </div>
 
-<pre class="brush: html notranslate">&lt;div class="wrapper"&gt;
+<pre class="brush: html">&lt;div class="wrapper"&gt;
   &lt;div class="box1"&gt;Un&lt;/div&gt;
   &lt;div class="box2"&gt;Deux&lt;/div&gt;
   &lt;div class="box3"&gt;
@@ -358,7 +351,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_d
 &lt;/div&gt;
 </pre>
 
-<pre class="brush: css notranslate">.wrapper {
+<pre class="brush: css">.wrapper {
   display: grid;
   grid-template-columns: repeat(4,1fr);
   grid-auto-rows: 200px;
@@ -376,7 +369,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_d
 }
 </pre>
 
-<p>{{EmbedLiveSample('A_grid_container_as_containing_block', '500', '330')}}</p>
+<p>{{EmbedLiveSample('Avoir_une_grille_comme_bloc_englobant', '500', '330')}}</p>
 
 <p>On peut voir que l'élément prend la zone de la grille entre les lignes 2 et 4, après la ligne 1. Ensuite, il est décalé dans cette zone grâce aux propriétés <code>top</code> et <code>left</code>. Toutefois, il a été retiré du flux, comme d'habitude pour les éléments positionnés en absolu et les règles de placement automatique placent des objets dans la même zone. L'objet n'entraîne pas non plus la création d'une ligne supplémentaire sur la ligne 3.</p>
 
@@ -397,7 +390,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_d
 <p>On indique que <code>.box3</code> a une position relative puis on positionne l'élément avec des propriétés de décalage. Dans ce cas, le contexte de positionnement est la zone de la grille.</p>
 
 <div class="hidden">
-<pre class="brush: css notranslate">* {box-sizing: border-box;}
+<pre class="brush: css">* {box-sizing: border-box;}
 
 .wrapper {
   border: 2px solid #f76707;
@@ -415,7 +408,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_d
 </pre>
 </div>
 
-<pre class="brush: html notranslate">&lt;div class="wrapper"&gt;
+<pre class="brush: html">&lt;div class="wrapper"&gt;
   &lt;div class="box1"&gt;Un&lt;/div&gt;
   &lt;div class="box2"&gt;Deux&lt;/div&gt;
   &lt;div class="box3"&gt;Trois
@@ -429,7 +422,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_d
 &lt;/div&gt;
 </pre>
 
-<pre class="brush: css notranslate">.wrapper {
+<pre class="brush: css">.wrapper {
   display: grid;
   grid-template-columns: repeat(4,1fr);
   grid-auto-rows: 200px;
@@ -453,7 +446,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_d
 }
 </pre>
 
-<p>{{EmbedLiveSample('With_a_grid_area_as_the_parent', '500', '420')}}</p>
+<p>{{EmbedLiveSample('Utiliser_une_zone_de_grille_comme_parent', '500', '420')}}</p>
 
 <h2 id="Utiliser_une_grille_et_display_contents">Utiliser une grille et <code>display:</code> <code>contents</code></h2>
 
@@ -467,7 +460,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_d
 
 <div id="Display_Contents_Before">
 <div class="hidden">
-<pre class="brush: css notranslate">* {box-sizing: border-box;}
+<pre class="brush: css">* {box-sizing: border-box;}
 
 .wrapper {
   border: 2px solid #f76707;
@@ -491,7 +484,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_d
 </pre>
 </div>
 
-<pre class="brush: html notranslate">&lt;div class="wrapper"&gt;
+<pre class="brush: html">&lt;div class="wrapper"&gt;
   &lt;div class="box box1"&gt;
     &lt;div class="nested"&gt;a&lt;/div&gt;
     &lt;div class="nested"&gt;b&lt;/div&gt;
@@ -504,7 +497,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_d
 &lt;/div&gt;
 </pre>
 
-<pre class="brush: css notranslate">.wrapper {
+<pre class="brush: css">.wrapper {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   grid-auto-rows: minmax(100px, auto);
@@ -523,7 +516,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_d
 
 <div id="Display_Contents_After">
 <div class="hidden">
-<pre class="brush: css notranslate">* {box-sizing: border-box;}
+<pre class="brush: css">* {box-sizing: border-box;}
 
 .wrapper {
   border: 2px solid #f76707;
@@ -547,7 +540,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_d
 </pre>
 </div>
 
-<pre class="brush: html notranslate">&lt;div class="wrapper"&gt;
+<pre class="brush: html">&lt;div class="wrapper"&gt;
   &lt;div class="box box1"&gt;
     &lt;div class="nested"&gt;a&lt;/div&gt;
     &lt;div class="nested"&gt;b&lt;/div&gt;
@@ -560,7 +553,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_d
 &lt;/div&gt;
 </pre>
 
-<pre class="brush: css notranslate">.wrapper {
+<pre class="brush: css">.wrapper {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   grid-auto-rows: minmax(100px, auto);
@@ -585,5 +578,3 @@ original_slug: Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_d
  <li><a href="/fr/docs/Learn/CSS/CSS_layout/Flexbox">Guides sur <em>Flexbox</em></a></li>
  <li><a href="/fr/docs/Web/CSS/CSS_Columns">Guides sur la disposition multi-colonnes</a></li>
 </ul>
-
-<p>{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_et_l_amélioration_progressive", "Web/CSS/CSS_Grid_Layout/Construire_des_dispositions_courantes_avec_des_grilles_CSS","Web/CSS/CSS_Grid_Layout")}}</p>
diff --git a/files/fr/web/css/media_queries/index.html b/files/fr/web/css/media_queries/index.html
index 38aec3f36c..ad2a10fb01 100644
--- a/files/fr/web/css/media_queries/index.html
+++ b/files/fr/web/css/media_queries/index.html
@@ -83,5 +83,5 @@ original_slug: Web/CSS/Requêtes_média
 <h2 id="Voir_aussi">Voir aussi</h2>
 
 <ul>
- <li>La règle-@ {{cssxref("@supports")}} afin d'appliquer une mise en forme srlon que l'agent utilisateur prend ou non en charge certaines technologies CSS.</li>
+ <li>La règle-@ {{cssxref("@supports")}} afin d'appliquer une mise en forme selon que l'agent utilisateur prend ou non en charge certaines technologies CSS.</li>
 </ul>
diff --git a/files/fr/web/css/media_queries/using_media_queries/index.html b/files/fr/web/css/media_queries/using_media_queries/index.html
index ef57afbdfd..21228d0eaf 100644
--- a/files/fr/web/css/media_queries/using_media_queries/index.html
+++ b/files/fr/web/css/media_queries/using_media_queries/index.html
@@ -1,14 +1,6 @@
 ---
 title: Media queries
 slug: Web/CSS/Media_Queries/Using_media_queries
-tags:
-  - Avancé
-  - CSS
-  - CSS3
-  - Guide
-  - Media Queries
-  - Requêtes média
-  - Responsive Design
 translation_of: Web/CSS/Media_Queries/Using_media_queries
 original_slug: Web/CSS/Requêtes_média/Utiliser_les_Media_queries
 ---
@@ -19,26 +11,26 @@ original_slug: Web/CSS/Requêtes_média/Utiliser_les_Media_queries
 <p>Les requêtes média sont utilisées afin :</p>
 
 <ul>
- <li>D'appliquer certains styles de façon conditionnelle grâce <a href="/fr/docs/Web/CSS/R%C3%A8gles_@">aux règles @</a> {{cssxref("@media")}} et {{cssxref("@import")}}<a href="/fr/docs/Web/CSS/At-rule">.</a></li>
- <li>De cibler certains médias pour les éléments {{HTMLElement("style")}}, {{HTMLElement("link")}}, {{HTMLElement("source")}} et d'autres éléments <a href="/fr/docs/Web/HTML">HTML</a> grâce à l'attribut <code>media=</code>.</li>
- <li>De <a href="/fr/docs/Web/CSS/Requêtes_média/Tester_les_media_queries">tester et surveiller l'état d'un média</a> grâce aux méthodes {{domxref("Window.matchMedia()")}} et {{domxref("MediaQueryList.addListener()")}}.</li>
+ <li>D'appliquer certains styles de façon conditionnelle avec le <a href="/fr/docs/Web/CSS">CSS</a> grâce <a href="/fr/docs/Web/CSS/At-rule">aux règles @</a> <a href="/fr/docs/Web/CSS/@media"><code>@media</code></a> et <a href="/fr/docs/Web/CSS/@import"><code>@import</code></a>.</li>
+ <li>De cibler certains médias pour les éléments <a href="/fr/docs/Web/HTML/Element/style"><code>&lt;style&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/link"><code>&lt;link&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/Source"><code>&lt;source&gt;</code></a> et d'autres éléments <a href="/fr/docs/Web/HTML">HTML</a> grâce à l'attribut <code>media=</code>.</li>
+ <li>De <a href="/fr/docs/Web/CSS/Media_Queries/Testing_media_queries">tester et surveiller l'état d'un média</a> grâce aux méthodes <a href="/fr/docs/Web/API/Window/matchMedia"><code>Window.matchMedia()</code></a> et <a href="/fr/docs/Web/API/MediaQueryList/addListener"><code>MediaQueryList.addListener()</code></a>.</li>
 </ul>
 
 <div class="note">
 <p><strong>Note :</strong> Les exemples de cet article utilisent <code>@media</code> à des fins d'illustration. Toutefois, la syntaxe est la même pour les différents types de requêtes média.</p>
 </div>
 
-<h2 id="Syntaxe">Syntaxe</h2>
+<h2 id="syntax">Syntaxe</h2>
 
 <p>Une requête média se compose d'un <em>type de média</em> optionnel et d'une ou plusieurs expressions de <em>caractéristiques de média</em>. Plusieurs requêtes peuvent être combinées entre elles grâce à des opérateurs logiques. Les requêtes média ne sont pas sensibles à la casse.</p>
 
 <p>Une requête média vaut <code>true</code> si le type de média correspond à l'appareil utilisé pour l'affichage du document et si toutes les expressions relatives aux caractéristiques sont vraies. Les requêtes qui utilisent des types de média inconnus valent toujours <code>false</code>.</p>
 
 <div class="note">
-<p><strong>Note :</strong> Lorsqu'une feuille de style est attachée à un élément {{HTMLElement("link")}} comportant une requếte média, cette feuille de style <a href="http://scottjehl.github.com/CSS-Download-Tests/">sera toujours téléchargée</a>, même si la requête renvoie <code>false</code>. Toutefois, le contenu de cette feuille n'est pas appliquée tant que le résultat de la requête ne devient pas <code>true</code>.</p>
+<p><strong>Note :</strong> Lorsqu'une feuille de style est attachée à un élément <a href="/fr/docs/Web/HTML/Element/link"><code>&lt;link&gt;</code></a> comportant une requếte média, cette feuille de style <a href="http://scottjehl.github.com/CSS-Download-Tests/">sera toujours téléchargée</a>, même si la requête renvoie <code>false</code>. Toutefois, le contenu de cette feuille n'est pas appliquée tant que le résultat de la requête ne devient pas <code>true</code>.</p>
 </div>
 
-<h3 id="Types_de_média"><a id="types" name="types">Types de média</a></h3>
+<h3 id="media_types">Types de média</h3>
 
 <p>Un type de média définit une catégorie générale d'appareil. Le type de média est optionnel dans une requête média, sauf si celle-ci utilise les opérateurs logiques <code>not</code> ou <code>only</code>. Par défaut, le type de média utilisé est <code>all</code>.</p>
 
@@ -46,16 +38,16 @@ original_slug: Web/CSS/Requêtes_média/Utiliser_les_Media_queries
  <dt><code id="all">all</code></dt>
  <dd>Correspond pour tous les appareils.</dd>
  <dt><code id="print">print</code></dt>
- <dd>Correspond aux matériaux paginés et aux documents consultés en aperçu avant impression. Pour plus d'informations, voir l'article sur <a href="/fr/docs/Web/CSS/Média_paginés">les média paginés</a>.</dd>
+ <dd>Correspond aux matériaux paginés et aux documents consultés en aperçu avant impression. Pour plus d'informations, voir l'article sur <a href="/fr/docs/Web/CSS/Paged_Media">les médias paginés</a>.</dd>
  <dt><code id="screen">screen</code></dt>
  <dd>Correspond aux appareils dotés d'un écran.</dd>
  <dt><code id="speech">speech</code></dt>
  <dd>Correspond aux outils de synthèse vocale.</dd>
 </dl>
 
-<div class="note"><strong>Note : Les types de média dépréciés</strong> CSS2.1 et <a href="https://drafts.csswg.org/mediaqueries-3/#background">Media Queries 3</a> ont défini plusieurs types additionnels (<code>tty</code>, <code>tv</code>, <code>projection</code>, <code>handheld</code>, <code>braille</code>, <code>embossed</code>, and <code>aural</code>) qui ont ensuite été dépréciés avec <a href="http://dev.w3.org/csswg/mediaqueries/#media-types">Media Queries 4</a>. Ces types ne doivent donc plus être utilisés. Le type <code>aural</code> a été remplacé par le type <code>speech</code>.</div>
+<div class="note"><strong>Note : Les types de média dépréciés</strong> CSS2.1 et <a href="https://drafts.csswg.org/mediaqueries-3/#background">Media Queries 3</a> ont défini plusieurs types additionnels (<code>tty</code>, <code>tv</code>, <code>projection</code>, <code>handheld</code>, <code>braille</code>, <code>embossed</code>, and <code>aural</code>) qui ont ensuite été dépréciés avec <a href="https://dev.w3.org/csswg/mediaqueries/#media-types">Media Queries 4</a>. Ces types ne doivent donc plus être utilisés. Le type <code>aural</code> a été remplacé par le type <code>speech</code>.</div>
 
-<h3 id="Caractéristiques_média_media_features"><a id="caractéristiques" name="caractéristiques">Caractéristiques média (<em>media features</em>)</a></h3>
+<h3 id="media_features">Caractéristiques média (<i lang="en">media features</i>)</h3>
 
 <p>Les caractéristiques média décrivent certaines caractéristiques spécifiques de l'agent utilisateur, de l'appareil d'affichage ou de l'environnement. Les expressions de caractéristique média testent leur présence ou leur valeur. Chaque expression de caractéristique doit être entourée de parenthèses.</p>
 
@@ -185,7 +177,7 @@ original_slug: Web/CSS/Requêtes_média/Utiliser_les_Media_queries
   </tr>
   <tr>
    <td>{{cssxref("@media/prefers-contrast", "prefers-contrast")}}</td>
-   <td>L'utilisateur préfère que la contraste soit augmenté ou réduit entre des couleurs proches.</td>
+   <td>L'utilisateur préfère que le contraste soit augmenté ou réduit entre des couleurs proches.</td>
    <td>Ajoutée avec le niveau 5 du module de spécification <em>Media Queries</em>.</td>
   </tr>
   <tr>
@@ -221,7 +213,7 @@ original_slug: Web/CSS/Requêtes_média/Utiliser_les_Media_queries
  </tbody>
 </table>
 
-<h3 id="Opérateurs_logiques">Opérateurs logiques</h3>
+<h3 id="logical_operators">Opérateurs logiques</h3>
 
 <p>Les opérateurs logiques <code>not</code>, <code>and</code> et <code>only</code> peuvent être utilisés afin de construire une requête média complexe. Il est aussi possible de combiner plusieurs requêtes média en les séparant par des virgules.</p>
 
@@ -245,45 +237,45 @@ original_slug: Web/CSS/Requêtes_média/Utiliser_les_Media_queries
 
 <p>Les virgules permettent de combiner plusieurs requêtes en une. Chaque requête est traitée séparément. Autrement dit, si une des requêtes de la liste renvoie <code>true</code>, toute la requête combinée renverra <code>true</code>. En ce sens, l'opérateur <code>,</code> agit comme un opérateur booléen <code>or</code>.</p>
 
-<h2 id="Cibler_des_types_de_média">Cibler des types de média</h2>
+<h2 id="targeting_media_types">Cibler des types de média</h2>
 
-<p>Les types de média décrivent la catégorie générale de l'appareil utilisé. Bien que la plupart des sites web soient principalement conçus pour être affichés sur des écrans, il est possibles d'avoir des styles spécifiques pour les impressions ou pour les lecteurs d'écran. Voici une requête qui permet de cibler les imprimantes ou autres appareils imprimant le contenu sur plusieurs pages :</p>
+<p>Les types de média décrivent la catégorie générale de l'appareil utilisé. Bien que la plupart des sites web soient principalement conçus pour être affichés sur des écrans, il est possible d'avoir des styles spécifiques pour les impressions ou pour les lecteurs d'écran. Voici une requête qui permet de cibler les imprimantes ou autres appareils imprimant le contenu sur plusieurs pages :</p>
 
-<pre class="brush: css notranslate">@media print { ... }</pre>
+<pre class="brush: css">@media print { ... }</pre>
 
 <p>Il est possible de cibler plusieurs types à la fois. La règle suivante permet de cibler les écrans et les appareils d'impression :</p>
 
-<pre class="brush: css notranslate">@media screen, print { ... }</pre>
+<pre class="brush: css">@media screen, print { ... }</pre>
 
 <p>Pour une liste complète des types de média, voir <a class="internal" href="#types">ci-avant</a>. Ces types étant très génériques, peu de valeurs sont disponibles. Afin d'avoir un ciblage plus fin, on pourra utiliser les caractéristiques média.</p>
 
-<h2 id="Cibler_des_caractéristiques_média">Cibler des caractéristiques média</h2>
+<h2 id="targeting_media_features">Cibler des caractéristiques média</h2>
 
 <p>Les caractéristiques média décrivent les caractéristiques spécifiques d'un agent utilisateur, d'un appareil d'affichage ou de l'environnement. On peut ainsi cibler différents styles pour les écrans larges, pour les ordinateurs qui disposent d'une souris ou pour les appareils utilisés dans une faible luminosité. Dans l'exemple qui suit, on a une requête qui vérifie si le mécanisme de saisie principal de l'appareil peut survoler les éléments :</p>
 
-<pre class="brush: css notranslate">@media (hover: hover) { ... }</pre>
+<pre class="brush: css">@media (hover: hover) { ... }</pre>
 
 <p>De nombreuses caractéristiques média sont des caractéristiques portant sur un intervalle et peuvent être préfixées par <code>min-</code> ou <code>max-</code> afin d'exprimer des seuils de valeurs. Par exemple, la requête suivante permet d'appliquer des styles à condition que la largeur de la zone d'affichage (<em>viewport</em>) soit inférieure à 1250px :</p>
 
-<pre class="brush: css notranslate">@media (max-width: 1250px) { ... }</pre>
+<pre class="brush: css">@media (max-width: 1250px) { ... }</pre>
 
-<div class="blockIndicator note">
-<p>Selon la spécification du W3C, les barres de défilement font parties des dimensions de la page. Ainsi la barre de défilement vertical s'ajoute à la largeur du document tandis que la barre de défilement horizontal s'ajoute à la hauteur du document. Cependant tous les navigateurs n'ont pas adopté cette recommandation (Chrome par exemple) et tous n'ont pas opté pour la même taille de barre de défilement, ce qui mène à un développement plus difficile pour assurer une comptabilité sur tous les navigateurs.</p>
+<div class="note">
+<p>Selon la spécification du W3C, les barres de défilement font partie des dimensions de la page. Ainsi la barre de défilement vertical s'ajoute à la largeur du document tandis que la barre de défilement horizontal s'ajoute à la hauteur du document. Cependant tous les navigateurs n'ont pas adopté cette recommandation (Chrome par exemple) et tous n'ont pas opté pour la même taille de barre de défilement, ce qui mène à un développement plus difficile pour assurer une comptabilité sur tous les navigateurs.</p>
 </div>
 
 <p>Si on utilise une caractéristique média sans indiquer de valeur, la requête sera vérifiée tant que la valeur de cette caractéristique n'est pas nulle (ou <code>none</code> pour la spécification de niveau 4). Ainsi, la requête suivante permettra d'appliquer les styles qu'elle contient si l'appareil peut afficher des couleurs :</p>
 
-<pre class="brush: css notranslate">@media (color) { ... }</pre>
+<pre class="brush: css">@media (color) { ... }</pre>
 
 <p>Si une caractéristique ne s'applique pas à l'appareil, les expressions utilisant cette caractéristique renverront <code>false</code>. Ainsi, la requête suivante aura toujours la valeur <code>false</code> car aucun appareil de synthèse vocale ne possède de caractéristique relative à ses proportions d'écran :</p>
 
-<pre class="brush: css notranslate">@media speech and (aspect-ratio: 11/5) { ... }</pre>
+<pre class="brush: css">@media speech and (aspect-ratio: 11/5) { ... }</pre>
 
 <p>Pour plus d'exemples, voir les pages de référence de chacune de ces caractéristiques depuis <a href="#caractéristiques">le tableau ci-dessus</a>.</p>
 
-<h2 id="Créer_des_requêtes_média_complexes">Créer des requêtes média complexes</h2>
+<h2 id="creating_complex_media_queries">Créer des requêtes média complexes</h2>
 
-<p>Il est parfois nécessaire d'avoir une requête qui repose sur plusieurs conditions. Pour cela, on peut utiiliser les opérateurs logiques : <code>not</code>, <code>and</code>, <code>only</code> et la virgule (<code>,</code>) afin de combiner plusieurs requêtes média.</p>
+<p>Il est parfois nécessaire d'avoir une requête qui repose sur plusieurs conditions. Pour cela, on peut utiliser les opérateurs logiques : <code>not</code>, <code>and</code>, <code>only</code> et la virgule (<code>,</code>) afin de combiner plusieurs requêtes média.</p>
 
 <p>Dans l'exemple précédent, on a utilisé l'opérateur <code>and</code> afin de combiner un type de média et une caractéristique média. Cet opérateur peut également servir à assembler plusieurs requêtes média pour en former la conjonction logique. L'opérateur <code>not</code> permet d'obtenir la négation d'une requête média tandis que l'opérateur <code>only</code> empêche les anciens navigateurs d'appliquer les styles qu'une requête contient.</p>
 
@@ -291,95 +283,95 @@ original_slug: Web/CSS/Requêtes_média/Utiliser_les_Media_queries
 <p><strong>Note :</strong> Dans la plupart des cas, le type de média <code>all</code> est utilisé par défaut si aucun autre type n'est fourni. Toutefois, lorsqu'on utilise les opérateurs <code>not</code> ou <code>only</code>, il est nécessaire de fournir un type de média explicite.</p>
 </div>
 
-<h3 id="Combiner_plusieurs_types_ou_caractéristiques">Combiner plusieurs types ou caractéristiques</h3>
+<h3 id="combining_multiple_types_or_features">Combiner plusieurs types ou caractéristiques</h3>
 
 <p>Le mot-clé <code>and</code> permet de combiner une caractéristique média avec un type de média ou avec d'autres caractéristiques média. L'exemple suivant permet de restreindre l'application d'un style aux appareils orientés en mode paysage et dont la largeur mesure au moins 30ems :</p>
 
-<pre class="brush: css notranslate">@media (min-width: 30em) and (orientation: landscape) { ... }</pre>
+<pre class="brush: css">@media (min-width: 30em) and (orientation: landscape) { ... }</pre>
 
 <p>Si on souhaite restreindre ces règles aux écrans, on pourra ajouter une clause avec le type de média <code>screen</code> :</p>
 
-<pre class="brush: css notranslate">@media screen and (min-width: 30em) and (orientation: landscape) { ... }</pre>
+<pre class="brush: css">@media screen and (min-width: 30em) and (orientation: landscape) { ... }</pre>
 
-<h3 id="Tester_plusieurs_requêtes">Tester plusieurs requêtes</h3>
+<h3 id="testing_for_multiple_queries">Tester plusieurs requêtes</h3>
 
 <p>La virgule peut être utilisée afin de créer une disjonction (un OU logique) sur différentes clauses (types de média, caractéristiques ou états). Dans l'exemple qui suit, les styles de la requête sont appliqués si l'appareil possède une hauteur supérieure ou égale à 680 pixels ou si l'écran est en mode portrait :</p>
 
-<pre class="brush: css notranslate">@media (min-height: 680px), screen and (orientation: portrait) { ... }</pre>
+<pre class="brush: css">@media (min-height: 680px), screen and (orientation: portrait) { ... }</pre>
 
 <p>Avec cet exemple, si l'utilisateur utilise une imprimante et que la page mesure 800 pixels de haut, la requête média aurait été vérifiée. Il en aurait été de même si l'utilisateur avait utilisé un smartphone avec une zone d'affichage haute de 480 pixels en portrait car la deuxième clause aurait renvoyée <code>true</code>.</p>
 
-<h3 id="Opérer_une_négation">Opérer une négation</h3>
+<h3 id="inverting_a_querys_meaning">Opérer une négation</h3>
 
 <p>Le mot-clé <code>not</code> permet d'inverser le résultat d'une requête. Il inversera uniquement la requête sur laquelle il est appliqué (et non la liste des requêtes s'il est utilisé au sein de requêtes séparées par des virgules). Le mot-clé <code>not</code> ne peut pas être utilisé afin d'inverser une caractéristique média, il peut uniquement être utilisé pour une requête média complète. Dans la requête qui suit, l'opérateur <code>not</code> est évalué en dernier :</p>
 
-<pre class="brush: css notranslate">@media not all and (monochrome) { ... }
+<pre class="brush: css">@media not all and (monochrome) { ... }
 </pre>
 
 <p>La requête précédente est donc équivalente à :</p>
 
-<pre class="brush: css notranslate">@media not (all and (monochrome)) { ... }
+<pre class="brush: css">@media not (all and (monochrome)) { ... }
 </pre>
 
 <p>Mais elle n'est pas équivalente à :</p>
 
-<pre class="brush: css example-bad notranslate">@media (not all) and (monochrome) { ... }</pre>
+<pre class="brush: css example-bad">@media (not all) and (monochrome) { ... }</pre>
 
 <p>De même :</p>
 
-<pre class="brush: css notranslate">@media not screen and (color), print and (color) { ... }
+<pre class="brush: css">@media not screen and (color), print and (color) { ... }
 </pre>
 
 <p>sera évaluée comme :</p>
 
-<pre class="brush: css notranslate">@media (not (screen and (color))), print and (color) { ... }</pre>
+<pre class="brush: css">@media (not (screen and (color))), print and (color) { ... }</pre>
 
-<h3 id="Améliorer_la_compatibilité_avec_les_anciens_navigateurs">Améliorer la compatibilité avec les anciens navigateurs</h3>
+<h3 id="improving_compatibility_with_older_browsers">Améliorer la compatibilité avec les anciens navigateurs</h3>
 
 <p>Le mot-clé <code>only</code> empêche les navigateurs qui ne prennent pas en charge les requêtes média avec les caractéristiques média d'appliquer les styles concernés. Cet opérateur n'a aucun effet pour les navigateurs modernes<em>.</em></p>
 
-<pre class="brush: css notranslate">@media only screen and (color) { ... }
+<pre class="brush: css">@media only screen and (color) { ... }
 </pre>
 
-<h2 id="Améliorations_syntaxiques_avec_la_spécification_de_niveau_4">Améliorations syntaxiques avec la spécification de niveau 4</h2>
+<h2 id="syntax_improvements_in_level_4">Améliorations syntaxiques avec la spécification de niveau 4</h2>
 
 <p>La spécification de niveau 4 pour les requêtes média ajoute des améliorations syntaxiques pour les requêtes média qui portent sur un intervalle (par exemple les critères de largeur et de hauteur). On peut par exemple utiliser le préfixe <code>max-</code> pour les largeurs et écrire :</p>
 
-<pre class="brush: css notranslate">@media (max-width: 30em) { ... }</pre>
+<pre class="brush: css">@media (max-width: 30em) { ... }</pre>
 
 <p>Avec les requêtes média de niveau 4, on peut écrire :</p>
 
-<pre class="brush: css notranslate">@media (width &lt;= 30em) { ... }</pre>
+<pre class="brush: css">@media (width &lt;= 30em) { ... }</pre>
 
 <p>Si on utilise <code>min-</code> et <code>max-</code> conjointement, on peut tester l'appartenance d'une valeur à un intervalle :</p>
 
-<pre class="brush: css notranslate">@media (min-width: 30em) and (max-width: 50em) { ... }</pre>
+<pre class="brush: css">@media (min-width: 30em) and (max-width: 50em) { ... }</pre>
 
 <p>Avec les requêtes média de niveau 4, on peut écrire :</p>
 
-<pre class="brush: css notranslate">@media (30em &lt;= width &lt;= 50em ) { ... }
+<pre class="brush: css">@media (30em &lt;= width &lt;= 50em ) { ... }
 </pre>
 
 <p>Les requêtes média de niveau 4 permettent également d'utiliser une logique booléenne avec les opérateurs <code>and</code>, <code>not</code> et <code>or</code>.</p>
 
-<h3 id="Tester_labsence_dune_caractéristique_avec_not">Tester l'absence d'une caractéristique avec <code>not</code></h3>
+<h3 id="negating_a_feature_with_not">Tester l'absence d'une caractéristique avec <code>not</code></h3>
 
 <p>On peut utiliser l'opérateur <code>not()</code> autour d'une caractéristique média afin de tester l'absence de cette caractéristique. Ainsi, on peut <code>not(hover)</code> pour cibler les appareils qui ne permettent pas le survol d'un élément :</p>
 
-<pre class="brush: css notranslate">@media (not(hover)) { ... }</pre>
+<pre class="brush: css">@media (not(hover)) { ... }</pre>
 
-<h3 id="Tester_plusieurs_caractéristiques_avec_or">Tester plusieurs caractéristiques avec <code>or</code></h3>
+<h3 id="testing_for_multiple_features_with_or">Tester plusieurs caractéristiques avec <code>or</code></h3>
 
 <p>Il est possible d'utiliser l'opérateur <code>or</code> pour tester une correspondance sur plus d'une caractéristique. Dans l'exemple suivant, on cible les appareils qui ont un affichage monochrome (<code>not (color)</code>) ou qui permettent de survoler les éléments (<code>hover</code>) :</p>
 
-<pre class="brush: css notranslate">@media (not (color)) or (hover) { ... }
+<pre class="brush: css">@media (not (color)) or (hover) { ... }
 </pre>
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+<h2 id="see_also">Voir aussi</h2>
 
 <ul>
- <li><a href="/fr/docs/Web/CSS/Requêtes_média/Tester_les_media_queries">Tester des requêtes média en script</a></li>
- <li><a href="http://davidwalsh.name/animate-media-queries">Utiliser les animations CSS entre les requêtes média (en anglais)</a></li>
- <li><a href="/fr/docs/Web/CSS/Extensions_Mozilla#Caractéristiques">Les caractéristiques média spécifiques à Mozilla</a></li>
- <li><a href="/fr/docs/Web/CSS/Reference/Extensions_WebKit#Caractéristiques_média">Les caractéristiques média spécifiques à WebKit</a></li>
+ <li><a href="/fr/docs/Web/CSS/Media_Queries/Testing_media_queries">Tester des requêtes média en script</a></li>
+ <li><a href="https://davidwalsh.name/animate-media-queries">Utiliser les animations CSS entre les requêtes média (en anglais)</a></li>
+ <li><a href="/fr/docs/Web/CSS/Mozilla_Extensions#caract%c3%a9ristiques">Les caractéristiques média spécifiques à Mozilla</a></li>
+ <li><a href="/fr/docs/Web/CSS/WebKit_Extensions#caract%c3%a9ristiques_m%c3%a9dia">Les caractéristiques média spécifiques à WebKit</a></li>
 </ul>
diff --git a/files/fr/web/css/tools/index.html b/files/fr/web/css/tools/index.html
deleted file mode 100644
index ac24b6e9ee..0000000000
--- a/files/fr/web/css/tools/index.html
+++ /dev/null
@@ -1,21 +0,0 @@
----
-title: Outils
-slug: Web/CSS/Tools
-tags:
-  - CSS
-  - Outils
-translation_of: Web/CSS/Tools
-original_slug: Web/CSS/Outils
----
-<p>CSS fournit de nombreuses fonctionnalités qui peuvent être paramétrées avec différents facteurs. Il est donc utile de pouvoir visualiser ces paramètres lorsqu'on manipule ces propriétés. Cette page indique différents outils qui pourront vous être utiles lorsque vous construirez vos feuilles de style avec ces fonctionnalités.</p>
-
-<p>{{LandingPageListSubpages}}</p>
-
-<h2 id="Autres_outils">Autres outils</h2>
-
-<ul>
- <li><a href="http://jeremyckahn.github.io/stylie/">Stylie </a>pour les animations</li>
- <li>Connaître les informations d'affichage d'un appareil (utile pour la conception de sites adaptatifs) : <a href="http://mydevice.io">mydevice.io</a></li>
- <li>Construire des menus CSS - <a href="https://cssmenumaker.com/">cssmenumaker.com</a></li>
- <li>Un linter CSS qui permet de respecter des conventions homogènes et d'éviter des erreurs dans les feuilles de style - <a href="https://stylelint.io/">stylelint</a></li>
-</ul>
diff --git a/files/fr/web/demos/index.html b/files/fr/web/demos/index.html
new file mode 100644
index 0000000000..0b2ebd98a5
--- /dev/null
+++ b/files/fr/web/demos/index.html
@@ -0,0 +1,169 @@
+---
+title: Démos de technologies open web
+slug: Web/Demos
+translation_of: Web/Demos_of_open_web_technologies
+original_slug: Web/Demos_of_open_web_technologies
+---
+<p>Mozilla supporte une large gamme de technologies open web vraiment intéressantes, et nous encourageons leur utilisation. Cette page offre des liens vers d'intéressantes démonstrations de ces technologies. Si vous avez entendu parler d'une bonne démonstration ou d'une application de technologie open web, veuillez ajouter un lien vers la section appropriée ici.</p>
+
+<h2 id="Graphiques_2D">Graphiques 2D</h2>
+
+<h3 id="APNG" name="APNG">APNG</h3>
+
+<ul>
+ <li><a class="external" href="http://people.mozilla.com/~dolske/apng/demo.html">Démo de Justin</a> (marche quand il est sauvegardé en local)</li>
+</ul>
+
+<h3 id="SVG" name="SVG">Canvas</h3>
+
+<ul>
+ <li><a class="external" href="http://www.blobsallad.se/">Un blob interactif utilisant javascript et canvas (fun)</a></li>
+ <li><a class="external" href="http://blobsallad.se/article/">Démos de Blob</a></li>
+ <li><a class="external" href="http://glimr.rubyforge.org/cake/canvas.html">Kit d'Expérimentation d'Animation Canvas (KEAC)</a></li>
+ <li><a class="external" href="http://www.xs4all.nl/~peterned/3d/">Canvas3D &amp; Flickr</a></li>
+ <li><a class="external" href="http://arapehlivanian.com/wp-content/uploads/2007/02/canvas.html">Jouer avec Canvas</a></li>
+ <li><a class="external" href="http://langexplr.blogspot.com/2008/11/using-canvas-html-element.html">Utilisation de Canvas Html element5</a></li>
+ <li><a class="external" href="/samples/raycaster/RayCaster.html" title="https://developer.mozilla.org/editor/fckeditor/core/editor/samples/raycaster/RayCaster.html">RayCaster</a></li>
+ <li><a class="external" href="http://jsmsxdemo.googlepages.com/jsmsx.html">MSX Emulator</a></li>
+ <li><a class="external" href="http://processingjs.org/exhibition/">processing.js</a></li>
+ <li><a class="external" href="http://glimr.rubyforge.org/cake/missile_fleet.html">Missile fleet</a></li>
+ <li><a class="external" href="http://glimr.rubyforge.org/cake/demos/fireworks2.6rt.html">FireWorks</a></li>
+ <li><a class="external" href="http://glimr.rubyforge.org/cake/demos/canvas_ash.html">Canvas ash1</a></li>
+ <li><a class="external" href="http://glimr.rubyforge.org/cake/demos/canvas_ash2.html">Canvas ash2</a></li>
+ <li><a class="external" href="http://glimr.rubyforge.org/cake/demos/canvas_ash8.html">Canvas ash8</a></li>
+ <li><a class="external" href="http://gyu.que.jp/jscloth/">3D on 2D Canvas</a></li>
+ <li><a href="http://viliusle.github.io/miniPaint/">miniPaint - Image editor </a>(<a href="https://github.com/viliusle/miniPaint">source code</a>)</li>
+</ul>
+
+<h3 id="SVG" name="SVG">SVG</h3>
+
+<ul>
+ <li><a class="external" href="http://www.kde-look.org/CONTENT/content-files/19524-gearflowers.svg.gz">Gearflowers image</a> Ne pas oublier de zoomer (marche quand il est sauvegardé en local)</li>
+ <li><a class="external" href="http://people.mozilla.com/~vladimir/demos/photos.svg">démo photo SVG</a> (effets visuels et interaction)</li>
+ <li><a class="external" href="http://starkravingfinkle.org/projects/demo/svg-bubblemenu-in-html.xml">Bubblemenu</a> (effets visuels et interaction)</li>
+ <li><a class="external" href="http://starkravingfinkle.org/blog/2007/07/firefox-3-svg-foreignobject/">transformations HTML</a> using <code>foreignObject</code> (effets visuels et transformations)</li>
+ <li><a class="external" href="http://svg-whiz.com/svg/linguistics/theCreepyMouth.svg">Guide Phonétiques</a> (interactif)</li>
+ <li><a class="external" href="http://www.lutanho.net/svgvml3d/platonic.html">démo objets 3D</a> (interactif)</li>
+ <li><a class="external" href="http://www.themaninblue.com/experiment/Blobular/">Blobular</a> (interactif)</li>
+ <li><a class="external" href="http://www.double.co.nz/video_test/video.svg">Vidéo embarquées dans SVG</a> (ou utiliser le <a class="external" href="http://www.double.co.nz/video_test/video_svg.tar.bz2">téléchargement local</a>)</li>
+ <li><a href="http://summerstyle.github.io/summer/">Summer HTML image map creator</a> (<a href="https://github.com/summerstyle/summer">code source</a>)</li>
+ <li><a href="http://s.codepen.io/SoftwareRVG/debug/JRJZVW">démo firefox developer édition SVG/CSS </a>conçu par Rober Villar de chez Software RVG (<a href="https://github.com/SoftwareRVG/mde_design/blob/master/css_svg_dev">code source</a>) (<a href="http://s.codepen.io/SoftwareRVG/debug/JRJZVW">mode debug</a>)</li>
+</ul>
+
+<h3 id="Video" name="Video">Vidéos</h3>
+
+<ul>
+ <li><a href="https://vimeo.com/172328210">Vidéo Animation 3D "mozilla en constante évolution" Conçue par Rober Villar ,dévéloppeur chez SoftwareRVG.</a></li>
+ <li><a class="external external-icon" href="https://vimeo.com/173851395">Video animation 3D "Dance Flottante" . Conçue par Rober Villar , développeur chez SoftwareRVGdesignS.</a></li>
+ <li><a class="external" href="http://www.double.co.nz/video_test/test1.html">Diffusion anime, Bande annonce de Film et Interview</a></li>
+ <li><a class="external" href="http://www.double.co.nz/video_test/test2.html">Navigateur Firefox Flick de Billy</a></li>
+ <li><a class="external" href="http://www.double.co.nz/video_test/test3.html">Salon de coiffure virtuelle</a></li>
+ <li><a class="external" href="http://www.double.co.nz/video_test/test4.html">Bande annonce du Film Transformers</a></li>
+ <li><a class="external" href="http://www.double.co.nz/video_test/test5.html">Bande annonce du Film A Scanner Darkly</a> (avec commandes intégrées)</li>
+ <li><a class="external" href="http://www.double.co.nz/video_test/events.html">Events firing and volume control</a></li>
+ <li><a class="external" href="http://www.double.co.nz/video_test/video.svg">Vidéos traînable et rédimensionnable</a></li>
+</ul>
+
+<h2 id="Graphiques_3D">Graphiques 3D</h2>
+
+<h3 id="WebGL">WebGL</h3>
+
+<ul>
+ <li><a href="http://ondras.github.io/fireworks-webgl/">Web Audio Fireworks</a></li>
+ <li><a href="https://dl.dropboxusercontent.com/u/62064441/ioquake3.js/ioquake3.html">IoQuake3</a> (<a href="https://github.com/klaussilveira/ioquake3.js">code source</a>)</li>
+ <li><a href="http://micah.tech/demoscene/">Escher puzzle</a> (<a href="https://github.com/micahbolen/demoscene">code source</a>)</li>
+ <li><a href="http://collinhover.github.io/kaiopua/">Kai 'Opua</a> (<a href="https://github.com/collinhover/kaiopua">code source</a>)</li>
+</ul>
+
+<h3 id="Réalité_Virtuelle">Réalité Virtuelle</h3>
+
+<ul>
+ <li><a href="http://mozvr.com/demos/polarsea/">La Mer Polaire</a> (<a href="https://github.com/MozVR/polarsea">code source</a>)</li>
+ <li><a href="http://mozvr.github.io/sechelt/">Sechelt fly-through</a> (<a href="https://github.com/mozvr/sechelt">code source</a>)</li>
+</ul>
+
+<h3 id="Réalité_augmentée">Réalité augmentée</h3>
+
+<ul>
+ <li>
+  <p><a href="https://jeeliz.com/rayban">essayage virtuel de lunettes (webcam recquise)</a></p>
+ </li>
+</ul>
+
+<h2 id="CSS">CSS</h2>
+
+<ul>
+ <li><a class="external external-icon" href="http://s.codepen.io/SoftwareRVG/debug/OXkOWj">logo flottant " mozilla " CSS  développé par Rober Villar , de chez Software RVG. </a>(mode debug)</li>
+ <li><a class="external external-icon" href="http://codepen.io/SoftwareRVG/pen/OXkOWj/">logo flottant " mozilla " CSS développé par Rober Villar , from Software RVG. </a>(code source)</li>
+ <li><a href="http://webdeveloperbareilly.in/blog/html5/responsive-contact-form-bootstrap.php">Conception de Formulaire de Contact Bootstrap</a></li>
+ <li><a href="http://felixniklas.com/paperfold/">Paperfold</a></li>
+ <li><a href="http://ondras.github.io/blockout/">CSS Blockout</a></li>
+ <li><a href="http://ondras.zarovi.cz/demos/rubik/">Rubik's cube</a></li>
+ <li><a href="http://ondras.zarovi.cz/demos/nojs/">Pure CSS Slides</a></li>
+ <li>Planetarium (<a href="https://github.com/littleworkshop/planetarium">code source</a>)</li>
+ <li><a href="http://www.lesmoffat.co.uk/folio/forest/forest.html">CSS Paralax Forest</a></li>
+ <li><a href="http://webdeveloperbareilly.in/blog/html5/responsive-contact-form-bootstrap.php">Conception de Page A Propos dans Bootstrap</a></li>
+ <li><a href="http://webdeveloperbareilly.in/blog/css3/onepage-scroll-template.html" rel="bookmark" title="One Page Scroll Website Template Theme Free Download">Modèle de Site Web "One Page Scroll"</a></li>
+</ul>
+
+<h3 id="Transformations">Transformations</h3>
+
+<ul>
+ <li><a href="http://impress.github.io/impress.js">Impress.js</a> (<a href="https://github.com/impress/impress.js">code source</a>)</li>
+</ul>
+
+<h2 id="Jeux">Jeux</h2>
+
+<ul>
+ <li><a href="https://dl.dropboxusercontent.com/u/62064441/ioquake3.js/ioquake3.html">IoQuake3</a> (<a href="https://github.com/klaussilveira/ioquake3.js">code source</a>)</li>
+ <li><a href="http://collinhover.github.io/kaiopua/">Kai 'Opua</a> (<a href="https://github.com/collinhover/kaiopua">code source</a>)</li>
+</ul>
+
+<h2 id="HTML">HTML</h2>
+
+<ul>
+ <li> <a href="http://zenphoton.com">Zen Photon Garden </a>(<a href="https://github.com/scanlime/zenphoton">code source</a>)</li>
+ <li><a href="http://webdeveloperbareilly.in/blog/smo/html-meta-tags-for-social-media-optimization.html">HTMl Meta Tags For SMO</a></li>
+</ul>
+
+<h2 id="APIs_Web">APIs Web</h2>
+
+<ul>
+</ul>
+
+<h3 id="API_de_Notifications">API de Notifications</h3>
+
+<ul>
+ <li><a href="http://elfoxero.github.io/html5notifications/">Notifications HTML5</a> (<a href="https://github.com/elfoxero/html5notifications">code source</a>)</li>
+</ul>
+
+<ul>
+</ul>
+
+<h3 id="API_Web_Audio">API Web Audio</h3>
+
+<ul>
+ <li><a href="http://ondras.github.io/fireworks-webgl/">Web Audio Fireworks</a></li>
+ <li><a href="http://ondras.github.io/oscope/">oscope.js - Oscilloscope en JavaScript</a></li>
+ <li><a href="http://mdn.github.io/audio-buffer/">Démo Tampon Audio</a> (<a href="http://mdn.github.io/audio-buffer/">code source</a>)</li>
+ <li><a href="http://nipe-systems.de/webapps/html5-web-audio/">HTML5 Web Audio Showcase</a> (<a href="https://github.com/NIPE-SYSTEMS/html5-web-audio-showcase">code source</a>)</li>
+ <li><a href="http://wayou.github.io/HTML5_Audio_Visualizer/">Visualiseur Audio HTML5</a> (<a href="https://github.com/Wayou/HTML5_Audio_Visualizer">code source</a>)</li>
+ <li><a href="http://carlosrafaelgn.com.br/GraphicalFilterEditor/">Editeur et Visualiseur de Filtre Graphique et Visualiseur</a> (<a href="https://github.com/carlosrafaelgn/GraphicalFilterEditor">code source</a>)</li>
+</ul>
+
+<h3 id="API_de_Fichier">API de Fichier</h3>
+
+<ul>
+ <li><a href="http://palerdot.github.io/slide-my-text/">Slide My Text - Présentation à partir de fichiers texte</a></li>
+</ul>
+
+<h3 id="Unclassified" name="Unclassified">Ouvriers du Web</h3>
+
+<ul>
+ <li><a href="http://ondras.github.io/fractal/">Web Worker Fractals</a></li>
+ <li><a href="http://ondras.github.io/photo/">Editeur Photo</a></li>
+ <li><a href="http://ondras.github.io/coral/">Générateur de Corail</a></li>
+ <li><a class="external" href="http://nerget.com/rayjs-mt/rayjs.html">Raytracer</a></li>
+ <li><a href="http://palerdot.github.io/hotcold/">HotCold Touch Typing</a></li>
+ <li><a href="http://webdeveloperbareilly.in/blog/seo/leverage-browser-caching.html">Activer la mise en cache du navigateur</a></li>
+</ul>
diff --git a/files/fr/web/demos_of_open_web_technologies/index.html b/files/fr/web/demos_of_open_web_technologies/index.html
deleted file mode 100644
index 6b83bdd950..0000000000
--- a/files/fr/web/demos_of_open_web_technologies/index.html
+++ /dev/null
@@ -1,169 +0,0 @@
----
-title: Démos de technologies open web
-slug: Web/Demos_of_open_web_technologies
-translation_of: Web/Demos_of_open_web_technologies
-original_slug: Web/Démos_de_technologies_open_web
----
-<p>Mozilla supporte une large gamme de technologies open web vraiment intéressantes, et nous encourageons leur utilisation. Cette page offre des liens vers d'intéressantes démonstrations de ces technologies. Si vous avez entendu parler d'une bonne démonstration ou d'une application de technologie open web, veuillez ajouter un lien vers la section appropriée ici.</p>
-
-<h2 id="Graphiques_2D">Graphiques 2D</h2>
-
-<h3 id="APNG" name="APNG">APNG</h3>
-
-<ul>
- <li><a class="external" href="http://people.mozilla.com/~dolske/apng/demo.html">Démo de Justin</a> (marche quand il est sauvegardé en local)</li>
-</ul>
-
-<h3 id="SVG" name="SVG">Canvas</h3>
-
-<ul>
- <li><a class="external" href="http://www.blobsallad.se/">Un blob interactif utilisant javascript et canvas (fun)</a></li>
- <li><a class="external" href="http://blobsallad.se/article/">Démos de Blob</a></li>
- <li><a class="external" href="http://glimr.rubyforge.org/cake/canvas.html">Kit d'Expérimentation d'Animation Canvas (KEAC)</a></li>
- <li><a class="external" href="http://www.xs4all.nl/~peterned/3d/">Canvas3D &amp; Flickr</a></li>
- <li><a class="external" href="http://arapehlivanian.com/wp-content/uploads/2007/02/canvas.html">Jouer avec Canvas</a></li>
- <li><a class="external" href="http://langexplr.blogspot.com/2008/11/using-canvas-html-element.html">Utilisation de Canvas Html element5</a></li>
- <li><a class="external" href="/samples/raycaster/RayCaster.html" title="https://developer.mozilla.org/editor/fckeditor/core/editor/samples/raycaster/RayCaster.html">RayCaster</a></li>
- <li><a class="external" href="http://jsmsxdemo.googlepages.com/jsmsx.html">MSX Emulator</a></li>
- <li><a class="external" href="http://processingjs.org/exhibition/">processing.js</a></li>
- <li><a class="external" href="http://glimr.rubyforge.org/cake/missile_fleet.html">Missile fleet</a></li>
- <li><a class="external" href="http://glimr.rubyforge.org/cake/demos/fireworks2.6rt.html">FireWorks</a></li>
- <li><a class="external" href="http://glimr.rubyforge.org/cake/demos/canvas_ash.html">Canvas ash1</a></li>
- <li><a class="external" href="http://glimr.rubyforge.org/cake/demos/canvas_ash2.html">Canvas ash2</a></li>
- <li><a class="external" href="http://glimr.rubyforge.org/cake/demos/canvas_ash8.html">Canvas ash8</a></li>
- <li><a class="external" href="http://gyu.que.jp/jscloth/">3D on 2D Canvas</a></li>
- <li><a href="http://viliusle.github.io/miniPaint/">miniPaint - Image editor </a>(<a href="https://github.com/viliusle/miniPaint">source code</a>)</li>
-</ul>
-
-<h3 id="SVG" name="SVG">SVG</h3>
-
-<ul>
- <li><a class="external" href="http://www.kde-look.org/CONTENT/content-files/19524-gearflowers.svg.gz">Gearflowers image</a> Ne pas oublier de zoomer (marche quand il est sauvegardé en local)</li>
- <li><a class="external" href="http://people.mozilla.com/~vladimir/demos/photos.svg">démo photo SVG</a> (effets visuels et interaction)</li>
- <li><a class="external" href="http://starkravingfinkle.org/projects/demo/svg-bubblemenu-in-html.xml">Bubblemenu</a> (effets visuels et interaction)</li>
- <li><a class="external" href="http://starkravingfinkle.org/blog/2007/07/firefox-3-svg-foreignobject/">transformations HTML</a> using <code>foreignObject</code> (effets visuels et transformations)</li>
- <li><a class="external" href="http://svg-whiz.com/svg/linguistics/theCreepyMouth.svg">Guide Phonétiques</a> (interactif)</li>
- <li><a class="external" href="http://www.lutanho.net/svgvml3d/platonic.html">démo objets 3D</a> (interactif)</li>
- <li><a class="external" href="http://www.themaninblue.com/experiment/Blobular/">Blobular</a> (interactif)</li>
- <li><a class="external" href="http://www.double.co.nz/video_test/video.svg">Vidéo embarquées dans SVG</a> (ou utiliser le <a class="external" href="http://www.double.co.nz/video_test/video_svg.tar.bz2">téléchargement local</a>)</li>
- <li><a href="http://summerstyle.github.io/summer/">Summer HTML image map creator</a> (<a href="https://github.com/summerstyle/summer">code source</a>)</li>
- <li><a href="http://s.codepen.io/SoftwareRVG/debug/JRJZVW">démo firefox developer édition SVG/CSS </a>conçu par Rober Villar de chez Software RVG (<a href="https://github.com/SoftwareRVG/mde_design/blob/master/css_svg_dev">code source</a>) (<a href="http://s.codepen.io/SoftwareRVG/debug/JRJZVW">mode debug</a>)</li>
-</ul>
-
-<h3 id="Video" name="Video">Vidéos</h3>
-
-<ul>
- <li><a href="https://vimeo.com/172328210">Vidéo Animation 3D "mozilla en constante évolution" Conçue par Rober Villar ,dévéloppeur chez SoftwareRVG.</a></li>
- <li><a class="external external-icon" href="https://vimeo.com/173851395">Video animation 3D "Dance Flottante" . Conçue par Rober Villar , développeur chez SoftwareRVGdesignS.</a></li>
- <li><a class="external" href="http://www.double.co.nz/video_test/test1.html">Diffusion anime, Bande annonce de Film et Interview</a></li>
- <li><a class="external" href="http://www.double.co.nz/video_test/test2.html">Navigateur Firefox Flick de Billy</a></li>
- <li><a class="external" href="http://www.double.co.nz/video_test/test3.html">Salon de coiffure virtuelle</a></li>
- <li><a class="external" href="http://www.double.co.nz/video_test/test4.html">Bande annonce du Film Transformers</a></li>
- <li><a class="external" href="http://www.double.co.nz/video_test/test5.html">Bande annonce du Film A Scanner Darkly</a> (avec commandes intégrées)</li>
- <li><a class="external" href="http://www.double.co.nz/video_test/events.html">Events firing and volume control</a></li>
- <li><a class="external" href="http://www.double.co.nz/video_test/video.svg">Vidéos traînable et rédimensionnable</a></li>
-</ul>
-
-<h2 id="Graphiques_3D">Graphiques 3D</h2>
-
-<h3 id="WebGL">WebGL</h3>
-
-<ul>
- <li><a href="http://ondras.github.io/fireworks-webgl/">Web Audio Fireworks</a></li>
- <li><a href="https://dl.dropboxusercontent.com/u/62064441/ioquake3.js/ioquake3.html">IoQuake3</a> (<a href="https://github.com/klaussilveira/ioquake3.js">code source</a>)</li>
- <li><a href="http://micah.tech/demoscene/">Escher puzzle</a> (<a href="https://github.com/micahbolen/demoscene">code source</a>)</li>
- <li><a href="http://collinhover.github.io/kaiopua/">Kai 'Opua</a> (<a href="https://github.com/collinhover/kaiopua">code source</a>)</li>
-</ul>
-
-<h3 id="Réalité_Virtuelle">Réalité Virtuelle</h3>
-
-<ul>
- <li><a href="http://mozvr.com/demos/polarsea/">La Mer Polaire</a> (<a href="https://github.com/MozVR/polarsea">code source</a>)</li>
- <li><a href="http://mozvr.github.io/sechelt/">Sechelt fly-through</a> (<a href="https://github.com/mozvr/sechelt">code source</a>)</li>
-</ul>
-
-<h3 id="Réalité_augmentée">Réalité augmentée</h3>
-
-<ul>
- <li>
-  <p><a href="https://jeeliz.com/rayban">essayage virtuel de lunettes (webcam recquise)</a></p>
- </li>
-</ul>
-
-<h2 id="CSS">CSS</h2>
-
-<ul>
- <li><a class="external external-icon" href="http://s.codepen.io/SoftwareRVG/debug/OXkOWj">logo flottant " mozilla " CSS  développé par Rober Villar , de chez Software RVG. </a>(mode debug)</li>
- <li><a class="external external-icon" href="http://codepen.io/SoftwareRVG/pen/OXkOWj/">logo flottant " mozilla " CSS développé par Rober Villar , from Software RVG. </a>(code source)</li>
- <li><a href="http://webdeveloperbareilly.in/blog/html5/responsive-contact-form-bootstrap.php">Conception de Formulaire de Contact Bootstrap</a></li>
- <li><a href="http://felixniklas.com/paperfold/">Paperfold</a></li>
- <li><a href="http://ondras.github.io/blockout/">CSS Blockout</a></li>
- <li><a href="http://ondras.zarovi.cz/demos/rubik/">Rubik's cube</a></li>
- <li><a href="http://ondras.zarovi.cz/demos/nojs/">Pure CSS Slides</a></li>
- <li>Planetarium (<a href="https://github.com/littleworkshop/planetarium">code source</a>)</li>
- <li><a href="http://www.lesmoffat.co.uk/folio/forest/forest.html">CSS Paralax Forest</a></li>
- <li><a href="http://webdeveloperbareilly.in/blog/html5/responsive-contact-form-bootstrap.php">Conception de Page A Propos dans Bootstrap</a></li>
- <li><a href="http://webdeveloperbareilly.in/blog/css3/onepage-scroll-template.html" rel="bookmark" title="One Page Scroll Website Template Theme Free Download">Modèle de Site Web "One Page Scroll"</a></li>
-</ul>
-
-<h3 id="Transformations">Transformations</h3>
-
-<ul>
- <li><a href="http://impress.github.io/impress.js">Impress.js</a> (<a href="https://github.com/impress/impress.js">code source</a>)</li>
-</ul>
-
-<h2 id="Jeux">Jeux</h2>
-
-<ul>
- <li><a href="https://dl.dropboxusercontent.com/u/62064441/ioquake3.js/ioquake3.html">IoQuake3</a> (<a href="https://github.com/klaussilveira/ioquake3.js">code source</a>)</li>
- <li><a href="http://collinhover.github.io/kaiopua/">Kai 'Opua</a> (<a href="https://github.com/collinhover/kaiopua">code source</a>)</li>
-</ul>
-
-<h2 id="HTML">HTML</h2>
-
-<ul>
- <li> <a href="http://zenphoton.com">Zen Photon Garden </a>(<a href="https://github.com/scanlime/zenphoton">code source</a>)</li>
- <li><a href="http://webdeveloperbareilly.in/blog/smo/html-meta-tags-for-social-media-optimization.html">HTMl Meta Tags For SMO</a></li>
-</ul>
-
-<h2 id="APIs_Web">APIs Web</h2>
-
-<ul>
-</ul>
-
-<h3 id="API_de_Notifications">API de Notifications</h3>
-
-<ul>
- <li><a href="http://elfoxero.github.io/html5notifications/">Notifications HTML5</a> (<a href="https://github.com/elfoxero/html5notifications">code source</a>)</li>
-</ul>
-
-<ul>
-</ul>
-
-<h3 id="API_Web_Audio">API Web Audio</h3>
-
-<ul>
- <li><a href="http://ondras.github.io/fireworks-webgl/">Web Audio Fireworks</a></li>
- <li><a href="http://ondras.github.io/oscope/">oscope.js - Oscilloscope en JavaScript</a></li>
- <li><a href="http://mdn.github.io/audio-buffer/">Démo Tampon Audio</a> (<a href="http://mdn.github.io/audio-buffer/">code source</a>)</li>
- <li><a href="http://nipe-systems.de/webapps/html5-web-audio/">HTML5 Web Audio Showcase</a> (<a href="https://github.com/NIPE-SYSTEMS/html5-web-audio-showcase">code source</a>)</li>
- <li><a href="http://wayou.github.io/HTML5_Audio_Visualizer/">Visualiseur Audio HTML5</a> (<a href="https://github.com/Wayou/HTML5_Audio_Visualizer">code source</a>)</li>
- <li><a href="http://carlosrafaelgn.com.br/GraphicalFilterEditor/">Editeur et Visualiseur de Filtre Graphique et Visualiseur</a> (<a href="https://github.com/carlosrafaelgn/GraphicalFilterEditor">code source</a>)</li>
-</ul>
-
-<h3 id="API_de_Fichier">API de Fichier</h3>
-
-<ul>
- <li><a href="http://palerdot.github.io/slide-my-text/">Slide My Text - Présentation à partir de fichiers texte</a></li>
-</ul>
-
-<h3 id="Unclassified" name="Unclassified">Ouvriers du Web</h3>
-
-<ul>
- <li><a href="http://ondras.github.io/fractal/">Web Worker Fractals</a></li>
- <li><a href="http://ondras.github.io/photo/">Editeur Photo</a></li>
- <li><a href="http://ondras.github.io/coral/">Générateur de Corail</a></li>
- <li><a class="external" href="http://nerget.com/rayjs-mt/rayjs.html">Raytracer</a></li>
- <li><a href="http://palerdot.github.io/hotcold/">HotCold Touch Typing</a></li>
- <li><a href="http://webdeveloperbareilly.in/blog/seo/leverage-browser-caching.html">Activer la mise en cache du navigateur</a></li>
-</ul>
diff --git a/files/fr/web/guide/audio_and_video_delivery/index.html b/files/fr/web/guide/audio_and_video_delivery/index.html
index c52fe4bc8b..ec4ed3f773 100644
--- a/files/fr/web/guide/audio_and_video_delivery/index.html
+++ b/files/fr/web/guide/audio_and_video_delivery/index.html
@@ -1,36 +1,29 @@
 ---
-title: Intégration Audio et Vidéo
+title: Intégration audio et vidéo
 slug: Web/Guide/Audio_and_video_delivery
-tags:
-  - Audio
-  - HTML5
-  - Media
-  - Video
 translation_of: Web/Guide/Audio_and_video_delivery
 ---
-<div class="summary">
-<p>On peut délivrer de l'audio et vidéo sur le web de plusieurs manières, du fichier média statique au live stream (flux en direct) adaptatif. Cet article se veut être le point de départ pour explorer les différents mécanismes de diffusion de média sur le web et la compatiblité avec les navigateurs populaires.</p>
-</div>
+<p>On peut distribuer de l'audio et de la vidéo sur le web de plusieurs manières, du fichier média statique au <i lang="en">live stream</i> (flux en direct) adaptatif. Cet article se veut être le point de départ pour explorer les différents mécanismes de diffusion de média sur le web et la compatiblité avec les navigateurs populaires.</p>
 
-<h2 id="Les_éléments_Audio_et_Vidéo">Les éléments Audio et Vidéo</h2>
+<h2 id="the_audio_and_video_elements">Les éléments audio et vidéo</h2>
 
-<p>Que l'on traite des fichiers audio pré-enregistrés ou des live streams, le mécanisme pour les rendre disponibles à travers un navigateur reste à peu près le même — via les éléments {{ htmlelement("audio")}} et {{ htmlelement("video")}}. Actuellement, pour supporter tous les navigateurs, il est nécessaire de définir deux formats — bien qu'avec l'adoption des formats MP3 et MP4 dans Firefox et Opera, cela change rapidement. Vous pouvez trouver les informations de compatibilité des navigateurs aux endroits suivants:</p>
+<p>Que l'on traite des fichiers audio pré-enregistrés ou des flux en directs, le mécanisme pour les rendre disponibles à travers un navigateur reste à peu près le même —&nbsp;via les éléments <a href="/fr/docs/Web/HTML/Element/audio"><code>&lt;audio&gt;</code></a> et <a href="/fr/docs/Web/HTML/Element/video"><code>&lt;video&gt;</code></a>. Actuellement, pour prendre en charge tous les navigateurs, il est nécessaire de définir deux formats&nbsp;— bien qu'avec l'adoption des formats MP3 et MP4 dans Firefox et Opera, cela change rapidement. Vous pouvez trouver les informations de compatibilité des navigateurs aux endroits suivants&nbsp;:</p>
 
 <ul>
- <li><a href="/en-US/Apps/Build/Manipulating_media/Cross-browser_audio_basics#Audio_Codec_Support">Table de compatibilité des Codecs Audio</a></li>
- <li><a href="/en-US/docs/Web/HTML/Supported_media_formats#Browser_compatibility">Table de compatibilité des Codecs Audio/Video</a></li>
+  <li><a href="/fr/docs/Web/Apps/Build/Manipulating_media/Cross-browser_audio_basics#audio_codec_support">Tableau de compatibilité des codecs audio</a></li>
+  <li><a href="/fr/docs/Web/Media/Formats/Video_codecs">Guide sur les codecs pour les vidéos</a></li>
 </ul>
 
-<p>Pour délivrer du contenu audio et vidéo, le procédé général est comme suit:</p>
+<p>Pour distribuer du contenu audio et vidéo, le processus général se déroule comme suit&nbsp;:</p>
 
 <ol>
- <li>Vérifier quels formats sont pris en charge par le navigateur via la détection de fonctionnalité</li>
- <li>Si le navigateur ne lit pas nativement les formats fournis, utiliser un contenu de secours (comme une version Flash.)</li>
- <li>Définir comment vous voulez jouer/instancier le média (par exemple un élément {{ htmlelement("video") }}, ou peut-être <code>document.createElement('video')</code>)</li>
+ <li>Vérifier quels formats sont pris en charge par le navigateur via la détection de fonctionnalité&nbsp;;</li>
+ <li>Si le navigateur ne lit pas nativement les formats fournis, utiliser un contenu de secours dans un autre format&nbsp;;</li>
+ <li>Définir la façon dont vous voulez lire/instancier le média (par exemple un élément <a href="/fr/docs/Web/HTML/Element/video"><code>&lt;video&gt;</code></a>, ou peut-être via JavaScript avec <code>document.createElement('video')</code>)&nbsp;;</li>
  <li>Ajouter le fichier média au lecteur.</li>
 </ol>
 
-<h3 id="Audio_HTML">Audio HTML</h3>
+<h3 id="html_audio">Audio HTML</h3>
 
 <pre class="brush: html">&lt;audio controls preload="auto"&gt;
   &lt;source src="audiofile.mp3" type="audio/mpeg"&gt;
@@ -39,18 +32,18 @@ translation_of: Web/Guide/Audio_and_video_delivery
   &lt;source src="audiofile.ogg" type="audio/ogg"&gt;
 
   &lt;!-- fallback pour les navigateurs qui ne supportent pas la balise audio --&gt;
-  &lt;a href="audiofile.mp3"&gt;download audio&lt;/a&gt;
+  &lt;a href="audiofile.mp3"&gt;Télécharger l'audio&lt;/a&gt;
 &lt;/audio&gt;</pre>
 
-<p>Le code ci-dessus va créer un lecteur audio qui tente de précharger autant d'audio que possible pour une lecteur fluide.</p>
+<p>Le code ci-dessus va créer un lecteur audio qui tente de précharger autant d'audio que possible pour une lecture fluide.</p>
 
 <div class="note">
-<p><strong>Note</strong>: L'attribut <code>preload</code> peut être ignoré par certains navigateurs mobiles.</p>
+<p><strong>Note&nbsp;:</strong> l'attribut <code>preload</code> peut être ignoré par certains navigateurs mobiles.</p>
 </div>
 
-<p>Pour plus d'informations voir <a href="/en-US/Apps/Build/Manipulating_media/Cross-browser_audio_basics#HTML5_audio_in_detail">Les bases de l'Audio multi-navigateur (Audio HTML5 en détail)</a></p>
+<p>Pour plus d'informations voir <a href="/fr/docs/Web/Apps/Build/Manipulating_media/Cross-browser_audio_basics#html5_audio_in_detail">Les bases de l'audio multi-navigateur (Audio HTML5 en détails)</a></p>
 
-<h3 id="Vidéo_HTML">Vidéo HTML</h3>
+<h3 id="html_video">Vidéo HTML</h3>
 
 <pre class="brush: html">&lt;video controls width="640" height="480" poster="initialimage.png" autoplay muted&gt;
   &lt;source src="videofile.mp4" type="video/mp4"&gt;
@@ -63,39 +56,20 @@ translation_of: Web/Guide/Audio_and_video_delivery
   &lt;track src="subtitles_no.vtt" kind="subtitles" srclang="no" label="Norwegian"&gt;
 
   &lt;!-- fallback pour les navigateurs qui ne supportent pas la balise video --&gt;
-  &lt;a href="videofile.mp4"&gt;download video&lt;/a&gt;
+  &lt;a href="videofile.mp4"&gt;Télécharger la vidéo&lt;/a&gt;
 &lt;/video&gt;</pre>
 
-<p>Le code ci-dessus crée un lecteur vidéo de dimensions 640x480 pixels, affichant une image poster jusqu'à ce que la vidéo soit lue. On demande à la vidéo de passer en <code>autoplay</code> (jouer automatiquement) mais d'être <code>muted</code> (en sourdine) par défaut.</p>
+<p>Le code ci-dessus crée un lecteur vidéo de dimensions 640x480 pixels, affichant une vignette jusqu'à ce que la vidéo soit lue. On demande à la vidéo de passer en <code>autoplay</code> (jouer automatiquement) mais d'être <code>muted</code> (en sourdine) par défaut.</p>
 
 <div class="note">
-<p><strong>Note</strong>: L'attribut <code>autoplay</code> peut être ignoré par certains navigateurs mobiles.</p>
+  <p><strong>Note&nbsp;:</strong> l'attribut <code>autoplay</code> peut être ignoré par certains navigateurs mobiles et est sujet à controverse lorsqu'il est utilisé à mauvais escient. Il est recommandé de lire <a href="/fr/docs/Web/Media/Autoplay_guide">le guide à ce sujet</a> pour savoir comment l'utiliser pertinemment.</p>
 </div>
 
-<p>Pour plus d'informations voir {{ htmlelement("video", "l'élément vidéo") }} et <a href="/fr/Apps/Build/Manipulating_media/cross_browser_video_player">Créer un lecteur vidéo multi-navigateur</a>.</p>
-
-<h3 id="Contenu_de_secours_Audio_et_Vidéo">Contenu de secours Audio et Vidéo</h3>
-
-<p>On peut créer un contenu de secours en utilisant Flash. <a href="https://github.com/mediaelement/mediaelement/tree/master/build">Utiliser mediaelement.js</a> par exemple.</p>
-
-<pre class="brush: html">&lt;audio controls&gt;
-  &lt;source src="audiofile.mp3" type="audio/mpeg"&gt;
-  &lt;source src="audiofile.ogg" type="audio/ogg"&gt;
-  &lt;!-- fallback pour les navigateurs qui ne supportent pas le tag audio --&gt;
-  &lt;a href="audiofile.mp3"&gt;download audio&lt;/a&gt;
-  &lt;object width="320" height="30" type="application/x-shockwave-flash" data="mediaelement-flash-audio.swf"&gt;
-    &lt;param name="movie" value="mediaelement-flash-audio.swf" /&gt;
-    &lt;param name="flashvars" value="controls=true&amp;file=audiofile.mp3" /&gt;
-  &lt;/object&gt;
-&lt;/audio&gt;</pre>
-
-<p>Le procédé est très similaire avec {{ htmlelement("video") }} — il faut juste changer le SWF utilisé.<br>
- <br>
- <a href="/en-US/Apps/Build/Manipulating_media/Cross-browser_audio_basics#Fallbacks">Plus d'option de Fallbacks</a>.</p>
+<p>Pour plus d'informations voir <a href="/fr/docs/Web/HTML/Element/video">l'article de référence sur l'élément <code>&lt;video&gt;</code></a> et <a href="/fr/docs/Web/Apps/Build/Manipulating_media/cross_browser_video_player">la page sur la création d'un lecteur vidéo multi-navigateur</a>.</p>
 
-<h3 id="Audio_JavaScript">Audio JavaScript</h3>
+<h3 id="javascript_audio">Audio JavaScript</h3>
 
-<pre class="brush: js">var myAudio = document.createElement('audio');
+<pre class="brush: js">const myAudio = document.createElement('audio');
 
 if (myAudio.canPlayType('audio/mpeg')) {
   myAudio.setAttribute('src','audiofile.mp3');
@@ -106,21 +80,21 @@ if (myAudio.canPlayType('audio/mpeg')) {
 myAudio.currentTime = 5;
 myAudio.play();</pre>
 
-<p>On définit la source de l'audio en fonction du type de fichier audio pris en charge par le navigateur, puis on place la tête de lecture à 5 secondes et essayons de lire le fichier.</p>
+<p>On définit la source de l'audio en fonction du type de fichier audio pris en charge par le navigateur, puis nous plaçons la tête de lecture à 5 secondes et essayons de lire le fichier.</p>
 
 <div class="note">
-<p><strong>Note</strong>: <code>Play()</code> sera ignoré par certains navigateurs mobiles à moins que l'événement ne soit initié par une action utilisateur.</p>
+<p><strong>Note&nbsp;:</strong> <code>play()</code> sera ignoré par certains navigateurs mobiles à moins que l'événement ne soit initié par une action de la personne visitant le site.</p>
 </div>
 
-<p>Il est également possible de donner un fichier WAV encodé en base64 à l'élément {{ htmlelement("audio") }}, permettant ainsi de générer de l'audio à la volée:</p>
+<p>Il est également possible de donner un fichier WAV encodé en base64 à l'élément <a href="/fr/docs/Web/HTML/Element/audio"><code>&lt;audio&gt;</code></a>, permettant ainsi de générer de l'audio à la volée&nbsp;:</p>
 
 <pre class="brush: html">&lt;audio id="player" src="data:audio/x-wav;base64,UklGRvC..."&gt;&lt;/audio&gt;</pre>
 
-<p><a href="https://github.com/kripken/speak.js/">Speak.js</a> emploie cette technique. <a href="http://speak-demo.herokuapp.com">Essayez la démo</a>.</p>
+<p><a href="https://github.com/kripken/speak.js/">Speak.js</a> emploie cette technique. <a href="https://speak-demo.herokuapp.com">Essayez la démo</a>.</p>
 
-<h3 id="Vidéo_JavaScript">Vidéo JavaScript</h3>
+<h3 id="javascript_video">Vidéo JavaScript</h3>
 
-<pre class="brush: js">var myVideo = document.createElement('video');
+<pre class="brush: js">const myVideo = document.createElement('video');
 
 if (myVideo.canPlayType('video/mp4')) {
   myVideo.setAttribute('src','videofile.mp4');
@@ -133,207 +107,150 @@ myVideo.height = 320;</pre>
 
 <p>On définit la source de la vidéo en fonction du type de fichier vidéo pris en charge par le navigateur, puis on définit la largeur et la hauteur de la vidéo.</p>
 
-<h2 id="API_Web_Audio">API Web Audio</h2>
-
-<pre class="brush: js">  var context;
-  var request;
-  var source;
-
-  try {
-    context = new (window.AudioContext || window.webkitAudioContext)();
-    request = new XMLHttpRequest();
-    request.open("GET","http://jplayer.org/audio/mp3/RioMez-01-Sleep_together.mp3",true);
-    request.responseType = "arraybuffer";
-
-    request.onload = function() {
-      context.decodeAudioData(request.response, function(buffer) {
-        source = context.createBufferSource();
-        source.buffer = buffer;
-        source.connect(context.destination);
-        // auto play
-        source.start(0); // start was previously noteOn
-      });
-    };
+<h2 id="web_audio_api">API Web Audio</h2>
 
-    request.send();
+<pre class="brush: js">let context;
+let request;
+let source;
 
-  } catch(e) {
-    alert('web audio api not supported');
-  }</pre>
+try {
+  context = new AudioContext();
+  request = new XMLHttpRequest();
+  request.open("GET","https://jplayer.org/audio/mp3/RioMez-01-Sleep_together.mp3",true);
+  request.responseType = "arraybuffer";
 
-<p>Dans cet exemple, on récupère un fichier MP3 via XHR, on le charge et on le lit (<a href="http://jsbin.com/facutone/1/edit?js">Essayez par vous-même</a>). Pour en savoir plus sur l'API Web Audio voir <a href="/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Utiliser l'API Web Audio</a>.</p>
+  request.onload = function() {
+    context.decodeAudioData(request.response, function(buffer) {
+      source = context.createBufferSource();
+      source.buffer = buffer;
+      source.connect(context.destination);
+      // auto play
+      source.start(0); // start était précédemment intitulé noteOn
+    });
+  };
 
-<h2 id="getUserMedia_Stream_API">getUserMedia / Stream API</h2>
+  request.send();
 
-<p>Il est également possible de récupérer un live stream de la webcam et/ou du microphone de l'utilisateur avec <code>getUserMedia</code> et l'API Stream. Cela fait partie d'une technologie plus large connue sous le nom de WebRTC (Web Real-Time Communications) et est compatible avec les dernières versions de Chrome, Firefox et Opera.</p>
+} catch(e) {
+  console.error(`L'API Web Audio n'est pas prise en charge`);
+}</pre>
 
-<p>Pour récupérer un flux de la webcam, commencez par créer un élément {{htmlelement("video")}}:</p>
+<p>Dans cet exemple, on récupère un fichier MP3 via XHR, on le charge et on le lit (<a href="https://jsbin.com/facutone/1/edit?js">essayez par vous-même</a>). Pour en savoir plus sur l'API Web Audio voir <a href="/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Utiliser l'API Web Audio</a>.</p>
 
-<pre class="brush: html">&lt;video id="webcam" width="480" height="360"&gt;&lt;/video&gt;</pre>
+<h2 id="getusermedia_stream_api">getUserMedia / Stream API</h2>
 
-<p>Ensuite, si cette opération est prise en charge, connectez la webcam à l'élément video:</p>
+<p>Il est également possible de récupérer un <i lang="en">live stream</i> de la webcam et/ou du microphone de la personne consultant le site avec <code>getUserMedia</code> et l'API Stream. Cela fait partie d'une technologie plus largement connue sous le nom de WebRTC (Web Real-Time Communications) et est compatible avec les dernières versions de Chrome, Firefox et Opera.</p>
 
-<pre class="brush: js">navigator.getUserMedia ||
-  (navigator.getUserMedia = navigator.mozGetUserMedia ||
-  navigator.webkitGetUserMedia || navigator.msGetUserMedia);
+<p>Pour récupérer un flux de la webcam, commençons par créer un élément <a href="/fr/docs/Web/HTML/Element/video"><code>&lt;video&gt;</code></a>&nbsp;:</p>
 
-window.URL = window.URL || window.webkitURL || window.mozURL || window.msURL;
+<pre class="brush: html">&lt;video id="webcam" width="480" height="360"&gt;&lt;/video&gt;</pre>
 
-if (navigator.getUserMedia) {
-    navigator.getUserMedia({
-        video: true,
-        audio: false
-    }, onSuccess, onError);
-} else {
-    alert('getUserMedia is not supported in this browser.');
-}
+<p>Ensuite, si cette opération est prise en charge, nous connectons la webcam à l'élément video&nbsp;:</p>
 
-function onSuccess(stream) {
-    var video = document.getElementById('webcam');
+<pre class="brush: js">
+if (navigator.mediaDevices) {
+  navigator.mediaDevices.getUserMedia({ video: true, audio: false })
+  .then(function onSuccess(stream) {
+    const video = document.getElementById('webcam');
     video.autoplay = true;
-    video.src = window.URL.createObjectURL(stream);
+    video.srcObject = stream;
+  })
+  .catch(function onError() {
+    console.error(`Problème de récupération des flux : utilisez-vous une page avec file:/// ou avez-vous décliné la permission ?`);
+  });
+} else {
+  console.error(`getUserMedia n'est pas pris en charge par ce navigateur.`);
 }
+</pre>
 
-function onError() {
-    alert('There has been a problem retreiving the streams - are you running on file:/// or did you disallow access?');
-}</pre>
-
-<p>Pour en savoir plus, lisez la page <a href="/fr/docs/NavigatorUserMedia.getUserMedia">Navigator.getUserMedia</a>.</p>
+<p>Pour en savoir plus, lisez la page <a href="/fr/docs/Web/API/MediaDevices/getUserMedia"><code>MediaDevices.getUserMedia</code></a>.</p>
 
-<h2 id="Mediastream_Recording">Mediastream Recording</h2>
+<h2 id="mediastream_recording">Enregistrement de flux média</h2>
 
-<p>De nouveaux standards sont en cours de déploiement pour permettre au navigateur de récupérer le flux du micro ou de la webcam — en utilisant <code>getUserMedia</code> — et l'enregistrer directement avec la nouvelle API MediaRecorder. Pour ce faire, on prend le stream retourné par <code>getUserMedia</code>, on le donne en paramètre à un objet <code>MediaRecorder</code>, puis on utilise le résultat obtenu comme source audio ou video.<br>
- <br>
- Le principe de base est décrit ci-dessus:</p>
+<p>De nouveaux standards sont en cours de déploiement pour permettre au navigateur de récupérer le flux du micro ou de la webcam — en utilisant <code>getUserMedia</code> — et l'enregistrer directement avec la nouvelle API MediaRecorder. Pour ce faire, on prend le stream retourné par <code>getUserMedia</code>, on le donne en paramètre à un objet <code>MediaRecorder</code>, puis on utilise le résultat obtenu comme source audio ou video.</p>
 
-<pre class="brush: js">var onSuccess = function(stream) {
+<p>Le principe de base est décrit ci-après&nbsp;:</p>
 
-  var mediaRecorder = new MediaRecorder(stream);
+<pre class="brush: js">
+navigator.mediaDevices.getUserMedia({audio:true})
+  .then(function onSuccess(stream) {
+    const recorder = new MediaRecorder(stream);
 
-  mediaRecorder.ondataavailable = function(e) {
-    var audio = document.createElement('audio');
-    audio.src = window.URL.createObjectURL(e.data);
-  }
-}
-
-navigator.getUserMedia({audio:true}, onSuccess);</pre>
-
-<p>Voir <a href="/fr/docs/Web/API/MediaRecorder_API">MediaRecorder API</a> pour plus de détails.</p>
+    const data = [];
+    recorder.ondataavailable = function(e) {
+      data.push(e.data);
+    };
+    recorder.start();
+    recorder.onerror = function(e) {
+      throw e.error || new Error(e.name); // e.name est utilisé pour Firefox
+    }
+    recorder.onstop = function(e) {
+      const audio = document.createElement('audio');
+      audio.src = window.URL.createObjectURL(new Blob(data));
+    }
+    setTimeout(function() {
+      rec.stop();
+    }, 5000);
+  })
+  .catch(function onError(error) {
+    console.log(error.message);
+  });
+</pre>
 
-<div class="note">
-<p><strong>Note</strong>: MediaRecorder est actuellement uniquement supporté par Firefox et uniquement pour l'audio, mais il existe des solutions pour contourner ce problème, comme la bibliothèque <a href="https://github.com/muaz-khan/WebRTC-Experiment/tree/master/RecordRTC">RecordRTC</a>.</p>
-</div>
+<p>Voir <a href="/fr/docs/Web/API/MediaRecorder_API">l'API MediaRecorder</a> pour plus de détails.</p>
 
-<h2 id="Extensions_de_Source_Media">Extensions de Source Media</h2>
+<h2 id="media_source_extensions_mse">Media Source Extensions (MSE)</h2>
 
-<p><a href="https://dvcs.w3.org/hg/html-media/raw-file/tip/media-source/media-source.html">Media Source Extensions</a> (MSE) est un brouillon de travail de W3C qui prévoit d'étendre {{domxref("HTMLMediaElement")}} pour permettre à JavaScript de générer des flux média pour la lecture. Permettre à JavaScript de générer des streams facilite toute une variété de cas d'utilisations comme le straming adaptatif et le décalage temporel des live streams.</p>
+<p><a href="https://dvcs.w3.org/hg/html-media/raw-file/tip/media-source/media-source.html">Media Source Extensions</a> (MSE ou «&nbsp;extensions pour les sources de média&nbsp;») est un brouillon de travail (<i lang="en">Working Draft</i> en anglais) du W3C qui prévoit d'étendre <a href="/fr/docs/Web/API/HTMLMediaElement"><code>HTMLMediaElement</code></a> pour permettre à JavaScript de générer des flux média pour la lecture. Permettre à JavaScript de générer des flux facilite différents cas d'usage comme la diffusion en direct adaptative et le décalage temporel des flux de diffusion en direct.</p>
 
-<h3 id="Extensions_Media_Encrypté_(EME)">Extensions Media Encrypté (EME)</h3>
+<h3 id="encrypted_media_extensions_eme">Encrypted Media Extensions (EME)</h3>
 
-<p><a href="https://dvcs.w3.org/hg/html-media/raw-file/tip/encrypted-media/encrypted-media.html">Encrypted Media Extensions</a> est une proposition de W3C d'étendre {{domxref("HTMLMediaElement")}} en fournissant des APIs pour contrôler la lecture de contenu protégé.<br>
- <br>
- L'API supporte divers cas d'utiilisation, allant de la simple décryption par clé aux vidéos protégées par DRM (pourvu que le navigateur implémente ce système). L'échange de licence/clé est contrôlé par l'application, facilitant ainsi le développement d'applications de lecture robustes et qui supportent tout une gamme de technologies de décryptage et de protection de contenu.<br>
- <br>
- Un des principal usage d'EME est de permettre au navigateur d'implémenter le gestion des DRM (<a href="https://fr.wikipedia.org/wiki/Gestion_des_droits_num%C3%A9riques">Digital Rights Management</a>), rendant inutiles les modules extérieurs de type Flash ou Silverlight.</p>
+<p><a href="https://dvcs.w3.org/hg/html-media/raw-file/tip/encrypted-media/encrypted-media.html">Encrypted Media Extensions</a>  (EME ou « extensions pour les médias chiffrés ») est une proposition du W3C d'étendre <a href="/fr/docs/Web/API/HTMLMediaElement"><code>HTMLMediaElement</code></a> en fournissant des API pour contrôler la lecture de contenu protégé.</p>
 
-<div class="note">
-<p><strong>Note</strong>: Un DRM est un système permettant de restreindre l'accès à une ressource (particulièrement les vidéos), ce qui aide à en empêcher la copie.</p>
-</div>
+<p>L'API prend en charge divers cas d'utilisation, allant du simple déchiffrement par clé aux vidéos protégées par DRM (pourvu que le navigateur implémente ce système). L'échange de licence/clé est contrôlé par l'application, facilitant ainsi le développement d'applications de lecture robustes et qui prennent en charge différentes technologies de déchiffrement et de protection de contenu. Un des principaux usages d'EME est de permettre au navigateur d'implémenter la gestion des DRM (<a href="https://fr.wikipedia.org/wiki/Gestion_des_droits_num%C3%A9riques"><i lang="en">Digital Rights Management</i></a>).</p>
 
-<h3 id="Streaming_adaptatif">Streaming adaptatif</h3>
+<h3 id="adaptive_streaming">Diffusion adaptative</h3>
 
-<p>De nouveaux formats et protocoles ont été (et sont encore) deployés pour faciliter le streaming adaptatif. Un <em>streaming adaptatif</em> est un flux en direct qui s'adapte à la bande passante disponible de l'utilisateur, typiquement, la qualité du stream peut changer en temps réel pour utiliser plus ou moins de bande passante. Le streaming adaptatif est souvent utilisé en conjonction avec le live streaming, où une diffusion fluide de l'audio et vidéo est primordiale.</p>
+<p>De nouveaux formats et protocoles ont été (et sont encore) deployés pour faciliter la diffusion adaptative. Une diffusion adaptative est un flux en direct qui s'adapte à la bande passante disponible de la personne utilisant le site. Typiquement, la qualité du stream peut changer en temps réel pour utiliser plus ou moins de bande passante. La diffusion adaptative est souvent utilisée en conjonction avec le <i lang="en">live streaming</i>, où une diffusion fluide de l'audio et vidéo est primordiale.</p>
 
-<p>Les principaux encodages utilisés pour le streaming adaptatif sont <a href="/fr/Apps/Build/Audio_and_video_delivery/Live_streaming_web_audio_and_video#HLS">HLS</a> et <a href="/fr/Apps/Build/Audio_and_video_delivery/Live_streaming_web_audio_and_video#MPEG-DASH">MPEG-DASH</a>. MSE a été conçu avec DASH en tête, il définit les flux d'octets selon <a href="https://dvcs.w3.org/hg/html-media/raw-file/tip/media-source/isobmff-byte-stream-format.html">ISOBMFF</a> et <a href="http://en.wikipedia.org/wiki/M2ts">M2TS</a> (deux formats supportés par DASH, et le dernier par HLS aussi). Si vous êtes interessé par les différents standards, de manière générale, que vous cherchiez une certaine flexibilité ou souhaitiez supporter la plupart des navigateurs modernes, DASH est probablement la meilleure solution.</p>
+<p>Les principaux encodages utilisés pour le streaming adaptatif sont <a href="/fr/docs/Web/Guide/Audio_and_video_delivery/Live_streaming_web_audio_and_video#hls">HLS</a> et <a href="/fr/docs/Web/Guide/Audio_and_video_delivery/Live_streaming_web_audio_and_video#mpeg-dash">MPEG-DASH</a>. MSE a été conçu avec DASH en tête, il définit les flux d'octets selon <a href="https://dvcs.w3.org/hg/html-media/raw-file/tip/media-source/isobmff-byte-stream-format.html">ISOBMFF</a> et <a href="https://en.wikipedia.org/wiki/M2ts">M2TS</a> (deux formats pris en charge par DASH, le dernier étant également pris en charge par HLS). DASH est probablement la meilleure option en termes de compatibilité, standard et flexibilité.</p>
 
 <div class="note">
-<p><strong>Note</strong>: Actuellement, Safari ne prend pas en charge DASH, cependant dash.js marche sur les nouvelles versions de Safari prévues pour être publiées avec OSX Yosemite.</p>
+<p><strong>Note&nbsp;:</strong> actuellement, Safari ne prend pas en charge DASH, cependant dash.js marche sur les nouvelles versions de Safari prévues pour être publiées avec OSX Yosemite.</p>
 </div>
 
-<p>DASH fournit également un certain nombre de profils, y compris des profils <em>à la demande</em> simples, sans pré-traitement ni splitting des fichiers multimédia. Il existe un certain nombre de services en ligne qui vous permettront de convertir vos média en HLS ou DASH.<br>
- <br>
- Pour plus d'informations, voir <a href="/fr/Apps/Build/Audio_and_video_delivery/Live_streaming_web_audio_and_video">Live streaming web Audio et Vidéo</a>.</p>
-
-<h2 id="Débugger_les_problèmes_Audio_Vidéo">Débugger les problèmes Audio / Vidéo</h2>
+<p>DASH fournit également un certain nombre de profils, y compris des profils <em>à la demande</em> simples, sans pré-traitement ni séparation des fichiers multimédia. Il existe un certain nombre de services en ligne qui vous permettront de convertir vos média en HLS ou DASH.</p>
 
-<p>Vous avez des problèmes de lecture audio ou vidéo? Essayez la checklist suivante.</p>
+<p>Pour plus d'informations, voir <a href="/fr/docs/Web/Guide/Audio_and_video_delivery/Live_streaming_web_audio_and_video">Live streaming web Audio et Vidéo</a>.</p>
 
-<h3 id="Est-ce_que_le_navigateur_prend_en_charge_les_formats_fournis">Est-ce que le navigateur prend en charge les formats fournis?</h3>
-
-<p>Utilisez les fichiers suivants pour vérifier le support de votre format:</p>
-
-<ul>
- <li>Audio MP3 (<code>type="audio/mpeg"</code>):<a href="http://jPlayer.org/audio/mp3/Miaow-01-Tempered-song.mp3"> http://jPlayer.org/audio/mp3/Miaow-01-Tempered-song.mp3</a> (<a href="http://jsbin.com/gekatoge/1/edit">audio MP3 en direct</a>.)</li>
- <li>Audio MP4 (<code>type="audio/mp4"</code>):<a href="http://jPlayer.org/audio/m4a/Miaow-01-Tempered-song.m4a"> http://jPlayer.org/audio/m4a/Miaow-01-Tempered-song.m4a</a> (<a href="http://jsbin.com/gekatoge/2/edit">audio MP4 en direct</a>.)</li>
- <li>Audio Ogg (<code>type="audio/ogg"</code>):<a href="http://jPlayer.org/audio/ogg/Miaow-01-Tempered-song.ogg"> http://jPlayer.org/audio/ogg/Miaow-01-Tempered-song.ogg</a> (<a href="http://jsbin.com/gekatoge/4/edit">audio OGG en direct</a>.)</li>
- <li>Video MP4 (<code>type="video/mp4"</code>):<a href="http://jPlayer.org/video/m4v/Big_Buck_Bunny_Trailer.m4v"> http://jPlayer.org/video/m4v/Big_Buck_Bunny_Trailer.m4v</a> (<a href="http://jsbin.com/gekatoge/5/edit">vidéo MP4 en direct</a>.)</li>
- <li>Video WebM (<code>type="video/webm"</code>):<a href="http://jPlayer.org/video/webm/Big_Buck_Bunny_Trailer.webm"> http://jPlayer.org/video/webm/Big_Buck_Bunny_Trailer.webm</a> (<a href="http://jsbin.com/gekatoge/6/edit">vidéo WebM en direct</a>.)</li>
- <li>Video Ogg (<code>type="video/ogg"</code>):<a href="http://jPlayer.org/video/ogv/Big_Buck_Bunny_Trailer.ogv"> http://jPlayer.org/video/ogv/Big_Buck_Bunny_Trailer.ogv</a> (<a href="http://jsbin.com/gekatoge/7/edit">vidéo OGG en direct</a>.)</li>
-</ul>
-
-<p>Si un de ces fichier n'est pas lu, c'est que le navigateur que vous testez ne prend pas en charge le format correspondant. Considérez utiliser un format différent ou un contenu de secours (Flash).<br>
- <br>
- Si ces fichiers fonctionnent mais que votre fichier ne fonctionne pas, il y a deux problèmes possibles:</p>
-
-<h3 id="Le_serveur_ne_fournit_pas_le_type_MIME_correct_du_fichier">Le serveur ne fournit pas le type MIME correct du fichier</h3>
-
-<p>Bien que les serveurs les prennent généralement en charge, vous allez peut-être avoir besoin d'ajouter ce qui suit à votre fichier <code>.htaccess</code>:</p>
-
-<pre># AddType TYPE/SUBTYPE EXTENSION
-
-AddType audio/mpeg mp3
-AddType audio/mp4 m4a
-AddType audio/ogg ogg
-AddType audio/ogg oga
-
-AddType video/mp4 mp4
-AddType video/mp4 m4v
-AddType video/ogg ogv
-AddType video/webm webm
-AddType video/webm webmv</pre>
-
-<h3 id="Votre_fichier_n'est_pas_encodé_correctement">Votre fichier n'est pas encodé correctement</h3>
-
-<p>Votre fichier n'a peut-être pas été encodé correctement — essayez de l'encoder en utilisant un des outils souivants, qui se sont avérés être généralement fiables:</p>
-
-<ul>
- <li><a href="http://audacity.sourceforge.net/">Audacity</a> - Éditeur et enregistreur audio gratuit</li>
- <li><a href="http://www.getmiro.com/">Miro</a> - Lecteur audio et vidéo open-source et gratuit</li>
- <li><a href="http://handbrake.fr/">Handbrake</a> - Transcodeur vidéo open-source</li>
- <li><a href="http://firefogg.org/">Firefogg</a> - Encodage audio et vidéo pour Firefox</li>
- <li><a href="https://www.ffmpeg.org/">FFmpeg2</a> - Encodeur en ligne de commande complet</li>
- <li><a href="https://libav.org/">Libav</a> - Encodeur en ligne de commande complet</li>
- <li><a href="http://m.vid.ly/">Vid.ly</a> - Video player,transcoding and delivery</li>
- <li><a href="https://archive.org/">Internet Archive</a> - Transcodage et stockage gratuit</li>
-</ul>
-
-<h2 id="Customiser_votre_Lecteur_Media">Customiser votre Lecteur Media</h2>
+<h2 id="customizing_your_media_player">Personnaliser votre lecteur média</h2>
 
 <p>Vous pouvez vouloir un lecteur audio ou vidéo qui ait le même aspect sur tous les navigateurs, ou simplement vouloir l'adapter à votre site. La technique générale pour y parvenir est d'omettre l'attribut <code>controls</code> afin que les contrôles par défaut du navigateur ne s'affichent pas, et de créer vos propres contrôles en HTML et CSS, avec du JavaScript pour lier vos contrôles à l'API audio/vidéo.</p>
 
-<p>Si vous avez besoin de quelque chose en plus, il est possible d'ajouter des fonctionnalités qui ne sont pas présentes par défaut dans les lecteurs, tels que la vitesse de lecture, le choix de la qualité ou mêmes les spectres audio. Vous pouvez également décider de rendre votre lecteur responsive — par exemple, vous pouvez enlever la barre de progrès sous certaines conditions.</p>
+<p>Si vous avez besoin d'aller plus loin, il est possible d'ajouter des fonctionnalités qui ne sont pas présentes par défaut dans les lecteurs, tels que la vitesse de lecture, le choix de la qualité ou mêmes les spectres audio. Vous pouvez également décider de rendre votre lecteur responsive — par exemple, vous pouvez enlever la barre de progression sous certaines conditions.</p>
 
-<p>Vous pouvez détecter les événements de clic, de toucher et/ou de clavier pour déclencher des actions telles que lecture, pause et stop. Il est souvent souhaitable d'ajouter des raccourcis clavier pour plus de commodité et d'accessibilité pour l'utilisateur.</p>
+<p>Vous pouvez détecter les événements de clic, de toucher et/ou de clavier pour déclencher des actions telles que lecture, pause et stop. Il est souvent souhaitable d'ajouter des raccourcis clavier pour plus de commodité et d'accessibilité pour la personne utilisant le lecteur média.</p>
 
 <p>Un exemple rapide — d'abord, configurez votre audio et vos contrôles personnalisés en HTML:</p>
 
-<pre class="brush: html">  &lt;audio id="my-audio" src="http://jPlayer.org/audio/mp3/Miaow-01-Tempered-song.mp3"&gt;&lt;/audio&gt;
-  &lt;button id="my-control"&gt;play&lt;/button&gt;</pre>
+<pre class="brush: html">
+&lt;audio id="my-audio" src="https://jPlayer.org/audio/mp3/Miaow-01-Tempered-song.mp3"&gt;&lt;/audio&gt;
+&lt;button id="my-control"&gt;play&lt;/button&gt;</pre>
 
 <p>Ensuite, ajoutez un peu de JavaScript pour détecter les événements afin de lire et de mettre en pause l'audio:</p>
 
 <pre class="brush: js">window.onload = function() {
 
-  var myAudio = document.getElementById('my-audio');
-  var myControl = document.getElementById('my-control');
+  const myAudio = document.getElementById('my-audio');
+  const myControl = document.getElementById('my-control');
 
   function switchState() {
     if (myAudio.paused == true) {
       myAudio.play();
-      myControl.innerHTML = "pause";
+      myControl.textContent = "pause";
     } else {
       myAudio.pause();
-      myControl.innerHTML = "play";
+      myControl.textContent = "play";
     }
   }
 
@@ -350,99 +267,219 @@ AddType video/webm webmv</pre>
   window.addEventListener( "keypress", checkKey, false );
 }</pre>
 
-<p>Vous pouvez <a href="http://jsbin.com/jujeladu/2/edit">essayer cet exemple ici</a>. Pour plus d'informations, voir <a href="https://developer.mozilla.org/en-US/Apps/Build/Manipulating_media/Cross-browser_audio_basics#Creating_your_own_custom_audio_player">Customiser votre propre lecteur audio</a>.</p>
+<p>Vous pouvez <a href="https://jsbin.com/jujeladu/2/edit">essayer cet exemple ici</a>. Pour plus d'informations, voir <a href="/fr/docs/Web/Guide/Audio_and_video_delivery/Cross-browser_audio_basics#creating_your_own_custom_audio_player">Créer votre propre lecteur audio</a>.</p>
+
+<h2 id="other_tips_for_audiovideo">Autres conseils pour l'audio/video</h2>
 
-<h2 id="Bibliothèques_JavaScript_AudioVidéo">Bibliothèques JavaScript Audio/Vidéo</h2>
+<h3 id="stopping_the_download_of_media">Interrompre le téléchargement d'un média</h3>
 
-<p>Un certain nombre de bibliothèques JavaScript audio et vidéo existent. Les plus populaires permettent de choisir un design de lecteur cohérent sur tous les navigateurs et fournissent un contenu de secours pour les navigateurs qui ne prennent pas en charge l'audio et vidéo nativement. Le contenu de secours utilise souvent les plugins Adobe Flash ou Microsoft Silverlight. D'autres fonctionnalités telles que les éléments {{htmlelement("track")}} pour les sous-titres peuvent également être fournies par les bibliothèques média.</p>
+<p>Bien qu'il suffit d'utiliser la méthode <code>pause()</code> pour interrompre la lecture d'un média, le navigateur continue de télécharger le média jusqu'à ce que l'élément correspondant soit nettoyé par le ramasse-miettes.</p>
 
-<h3 id="Audio_uniquement">Audio uniquement</h3>
+<p>Voici une astuce qui permet d'arrêter le téléchargement :</p>
+
+<pre class="brush: js">const mediaElement = document.querySelector(&quot;#monIDdeMedia&quot;);
+mediaElement.removeAttribute(&quot;src&quot;);
+mediaElement.load();
+</pre>
+
+<p>En supprimant l'attribut <code>src</code> de l'élément et en invoquant la méthode <code>load()</code>, on libère les ressources associées à la vidéo, ce qui entraîne l'arrêt du téléchargement. Il est nécessaire d'invoquer <code>load()</code> après le retrait de l'attribut, car sa simple suppression ne relance pas l'algorithme chargement. Si l'élément <code>&lt;video&gt;</code> dispose également d'éléments descendants <code>&lt;source&gt;</code>, ceux-ci devraient également être supprimés avant l'appel à <code>load()</code>.</p>
+
+<p>Si on définit l'attribut <code>src</code> avec une chaîne vide, le navigateur considèrera la source comme un chemin relatif et cela déclenchera une tentative d'un autre téléchargement à partir d'une source qui n'est probablement pas une vidéo valide.</p>
+
+<h3 id="seeking_through_media">Parcourir la piste du média</h3>
+
+<p>Les éléments média permettent de placer le curseur de lecture à des instants spécifiques du contenu. Pour cela, on ajustera la propriété <code>currentTime</code> de l'élément (voir <a href="/fr/docs/Web/API/HTMLMediaElement"><code>HTMLMediaElement</code></a> pour plus de détails)</p>
+
+<p>La propriété <code>seekable</code> de l'élément peut être utilisée afin de déterminer les intervalles disponibles pour de tels déplacements. Cette propriété renvoie un objet <a href="/fr/docs/Web/API/TimeRanges"><code>TimeRanges</code></a> contenant les intervalles temporels accessibles.</p>
+
+<pre class="brush: js">const mediaElement = document.querySelector('#mediaElementID');
+mediaElement.seekable.start(0);  // Renvoie l'instant de départ (en secondes)
+mediaElement.seekable.end(0);    // Renvoie l'instant de fin (en secondes)
+mediaElement.currentTime = 122;  // Déplace la lecture à 122 secondes
+mediaElement.played.end(0);      // Renvoie le nombre de secondes lues par le navigateur
+</pre>
+
+<h3 id="specifying_playback_range">Définir des intervalles de lecture</h3>
+
+<p>Lors de la définition de l'URI du média d'un élément <a href="/fr/docs/Web/HTML/Element/audio"><code>&lt;audio&gt;</code></a> ou <a href="/fr/docs/Web/HTML/Element/video"><code>&lt;video&gt;</code></a>, il est possible d'ajouter des informations supplémentaires pour indiquer la portion du média qu'on souhaite lire. Pour cela, on ajoutera un dièse/croisillon («&nbsp;#&nbsp;») suivi de la description du fragment de média.</p>
+
+<p>Un intervalle temporel se définit avec la syntaxe suivante :</p>
+
+<pre>#t=[tempsdebut][,tempsfin]</pre>
+
+<p>La valeur temporelle peut être définie en nombre de secondes (avec une valeur décimale) ou avec un horodatage en heures/minutes/secondes avec un deux-points comme séparateur (par exemple 2:05:01 pour indiquer 2 heures, 5 minutes et 1 seconde).</p>
+
+<p>Voici quelques exemples :</p>
+
+<dl>
+ <dt><code>https://example.com/video.ogv#t=10,20</code></dt>
+ <dd>Indique que la vidéo devrait jouer l'intervalle compris entre 10 et 20 secondes.</dd>
+ <dt><code>https://example.com/video.ogv#t=,10.5</code></dt>
+ <dd>Indique que la vidéo devrait jouer l'intervalle depuis le début et jusqu'à 10,5 secondes.</dd>
+ <dt><code>https://example.com/video.ogv#t=,02:00:00</code></dt>
+ <dd>Indique que la vidéo devrait jouer depuis le début et jusqu'à deux heures.</dd>
+ <dt><code>https://example.com/video.ogv#t=60</code></dt>
+ <dd>Indique que la vidéo devrait commencer sa lecture à 60 secondes puis continuer jusqu'à la fin.</dd>
+</dl>
+
+<h2 id="error_handling">Déboguer les problèmes audio/vidéo</h2>
+
+<p>Vous rencontrez des problèmes de lecture audio ou vidéo ? Vérifiez les différents points qui suivent.</p>
+
+<h3 id="checking_whether_the_browser_supports_the_supplied_formats">Est-ce que le navigateur prend en charge les formats fournis ?</h3>
+
+<p>Utilisez les fichiers suivants pour vérifier le support de votre format:</p>
 
 <ul>
- <li><a href="http://www.schillmania.com/projects/soundmanager2/">SoundManager</a></li>
+ <li>Audio MP3 (<code>type="audio/mpeg"</code>)&nbsp;: <a href="https://jPlayer.org/audio/mp3/Miaow-01-Tempered-song.mp3"> https://jPlayer.org/audio/mp3/Miaow-01-Tempered-song.mp3</a> (<a href="https://jsbin.com/gekatoge/1/edit">audio&nbsp;MP3 en direct</a>)</li>
+ <li>Audio MP4 (<code>type="audio/mp4"</code>)&nbsp;: <a href="https://jPlayer.org/audio/m4a/Miaow-01-Tempered-song.m4a"> https://jPlayer.org/audio/m4a/Miaow-01-Tempered-song.m4a</a> (<a href="https://jsbin.com/gekatoge/2/edit">audio MP4 en direct</a>)</li>
+ <li>Audio Ogg (<code>type="audio/ogg"</code>)&nbsp;: <a href="https://jPlayer.org/audio/ogg/Miaow-01-Tempered-song.ogg"> https://jPlayer.org/audio/ogg/Miaow-01-Tempered-song.ogg</a> (<a href="https://jsbin.com/gekatoge/4/edit">audio OGG en direct</a>)</li>
+ <li>Video MP4 (<code>type="video/mp4"</code>)&nbsp;: <a href="https://jPlayer.org/video/m4v/Big_Buck_Bunny_Trailer.m4v"> https://jPlayer.org/video/m4v/Big_Buck_Bunny_Trailer.m4v</a> (<a href="https://jsbin.com/gekatoge/5/edit">vidéo MP4 en direct</a>)</li>
+ <li>Video WebM (<code>type="video/webm"</code>)&nbsp;: <a href="https://jPlayer.org/video/webm/Big_Buck_Bunny_Trailer.webm"> https://jPlayer.org/video/webm/Big_Buck_Bunny_Trailer.webm</a> (<a href="https://jsbin.com/gekatoge/6/edit">vidéo WebM en direct</a>)</li>
+ <li>Video Ogg (<code>type="video/ogg"</code>)&nbsp;: <a href="https://jPlayer.org/video/ogv/Big_Buck_Bunny_Trailer.ogv"> https://jPlayer.org/video/ogv/Big_Buck_Bunny_Trailer.ogv</a> (<a href="https://jsbin.com/gekatoge/7/edit">vidéo OGG en direct</a>)</li>
 </ul>
 
-<h3 id="Vidéo_uniquement">Vidéo uniquement</h3>
+<p>Si un de ces fichiers n'est pas lu, c'est que le navigateur que vous testez ne prend pas en charge le format correspondant. Vous pouvez utiliser un format différent ou un contenu de secours.</p>
+
+<p>Si ces fichiers fonctionnent mais que votre fichier ne fonctionne pas, il y a deux explications possibles, que nous verrons ci-après.</p>
+
+<h4 id="1._the_media_server_is_not_delivering_the_correct_mime_types_with_the_file">1. Le serveur ne fournit pas le type MIME correct du fichier</h4>
+
+<p>Bien que les serveurs les prennent généralement en charge, vous allez peut-être avoir besoin d'ajouter ce qui suit à votre fichier <code>.htaccess</code>&nbsp;:</p>
+
+<pre># AddType TYPE/SUBTYPE EXTENSION
+
+AddType audio/mpeg mp3
+AddType audio/mp4 m4a
+AddType audio/ogg ogg
+AddType audio/ogg oga
+
+AddType video/mp4 mp4
+AddType video/mp4 m4v
+AddType video/ogg ogv
+AddType video/webm webm
+AddType video/webm webmv</pre>
+
+<h4 id="2._Your_files_have_been_encoded_incorrectly">2. Votre fichier n'est pas encodé correctement</h4>
+
+<p>Votre fichier n'a peut-être pas été encodé correctement — essayez de l'encoder en utilisant un des outils suivants, qui sont plutôt fiables&nbsp;:</p>
+
+<ul>
+  <li><a href="https://audacity.sourceforge.net/">Audacity</a> - Éditeur et enregistreur audio gratuit</li>
+  <li><a href="https://www.getmiro.com/">Miro</a> - Lecteur audio et vidéo open-source et gratuit</li>
+  <li><a href="https://handbrake.fr/">Handbrake</a> - Transcodeur vidéo open-source</li>
+  <li><a href="https://firefogg.org/">Firefogg</a> - Encodage audio et vidéo pour Firefox</li>
+  <li><a href="https://www.ffmpeg.org/">FFmpeg2</a> - Encodeur en ligne de commande complet</li>
+  <li><a href="https://libav.org/">Libav</a> - Encodeur en ligne de commande complet</li>
+  <li><a href="https://m.vid.ly/">Vid.ly</a> - Lecteur Video player, transcodeur et outil de diffusion</li>
+  <li><a href="https://archive.org/">Internet Archive</a> - Transcodage et stockage gratuit</li>
+</ul>
+
+<h3 id="showing_fallback_content_when_no_source_could_be_decoded">Utiliser du contenu de substitution si la source n'a pu être décodée</h3>
+
+<p>Il existe une autre méthode pour présenter du contenu alternatif lorsqu'aucune des ressources n'a pu être décodée par le navigateur. Celle-ci consiste à ajouter un gestionnaire d'erreur sur le dernier élément source et d'utiliser celui-ci afin de remplacer l'élément par son contenu alternatif :</p>
+
+<pre class="brush: html">&lt;video controls&gt;
+  &lt;source src="dynamicsearch.mp4" type="video/mp4"&gt;&lt;/source&gt;
+  &lt;a href="dynamicsearch.mp4"&gt;
+    &lt;img src="dynamicsearch.jpg" alt="Recherche sur une application"&gt;
+  &lt;/a&gt;
+  &lt;p&gt;Cliquez sur l'image pour voir une vidéo de démonstration&lt;/p&gt;
+&lt;/video&gt;
+</pre>
+
+<pre class="brush: js">
+let v = document.querySelector('video'),
+    sources = v.querySelectorAll('source'),
+    lastsource = sources[sources.length-1];
+lastsource.addEventListener('error', function(ev) {
+  const d = document.createElement('div');
+  d.innerHTML = v.innerHTML;
+  v.parentNode.replaceChild(d, v);
+}, false);
+</pre>
+
+<h2 id="audiovideo_javascript_libraries">Bibliothèques JavaScript audio/vidéo</h2>
+
+<p>Un certain nombre de bibliothèques JavaScript audio et vidéo existent. Les plus populaires permettent de choisir un design de lecteur cohérent sur tous les navigateurs et fournissent un contenu de secours pour les navigateurs qui ne prennent pas en charge l'audio et vidéo nativement. Le contenu de secours utilise souvent les plugins Adobe Flash ou Microsoft Silverlight. D'autres fonctionnalités telles que les éléments <a href="/fr/docs/Web/HTML/Element/track"><code>&lt;track&gt;</code></a> pour les sous-titres peuvent également être fournies par les bibliothèques média.</p>
+
+<h3 id="audio_only">Audio uniquement</h3>
+
+<ul>
+  <li><a href="https://www.schillmania.com/projects/soundmanager2/">SoundManager</a></li>
+  <li><a href="https://521dimensions.com/open-source/amplitudejs">AmplitudeJS</a></li>
+  <li><a href="https://howlerjs.com/">HowlerJS</a></li>
+</ul>
+
+<h3 id="video_only">Vidéo uniquement</h3>
 
 <ul>
- <li><a href="https://flowplayer.org/">flowplayer</a>: Gratuit, avec un watermark du logo flowplayer. Open source (licence GPL.)</li>
- <li><a href="http://www.jwplayer.com">JWPlayer</a>: Nécessite de s'inscrire pour télécharger. Édition Open Source (Liecence Creative Commons.)</li>
- <li><a href="http://www.sublimevideo.net/">SublimeVideo</a>: Nécessite de s'inscrire. Configuration par formulaire avec lien vers des bibliothèques hébergées via CDN.</li>
- <li><a href="http://www.videojs.com/">Video.js</a>: Gratuit et Open Source (Licence Apache 2.)</li>
+  <li><a href="https://flowplayer.org/">flowplayer</a>&nbsp;: Gratuit, avec un filigrane du logo flowplayer. open source (licence GPL)</li>
+  <li><a href="https://www.jwplayer.com">JWPlayer</a>&nbsp;: Nécessite de s'inscrire pour télécharger. open source (licence Creative Commons)</li>
+  <li><a href="https://www.sublimevideo.net/">SublimeVideo</a>&nbsp;: Nécessite de s'inscrire. Configuration par formulaire avec lien vers des bibliothèques hébergées via CDN.</li>
+  <li><a href="https://www.videojs.com/">Video.js</a>&nbsp;: Gratuit et open source (licence Apache 2)</li>
 </ul>
 
-<h3 id="Audio_et_Vidéo">Audio et Vidéo</h3>
+<h3 id="audio_and_video">Audio et vidéo</h3>
 
 <ul>
- <li><a href="http://jPlayer.org">jPlayer</a>: Gratuit et Open Source (Licence MIT.)</li>
- <li><a href="http://mediaelementjs.com/">mediaelement.js</a>: Gratuit et Open Source (Licence MIT.)</li>
+  <li><a href="https://jPlayer.org">jPlayer</a>&nbsp;: Gratuit et open source (Licence MIT)</li>
+  <li><a href="https://mediaelementjs.com/">mediaelement.js</a>&nbsp;: Gratuit et open source (Licence MIT)</li>
 </ul>
 
-<h3 id="Web_Audio_API">Web Audio API</h3>
+<h3 id="web_audio_api_2">Web Audio API</h3>
 
 <ul>
- <li><a href="https://github.com/cwilso/AudioContext-MonkeyPatch">AudioContext monkeypatch</a>: Un polyfill pour les anciennes versions de Web Audio API; Open Source (Licence Apache 2.)</li>
+  <li><a href="https://github.com/cwilso/AudioContext-MonkeyPatch">AudioContext monkeypatch</a>&nbsp;: Une prothèse open source (licence Apache 2) pour les anciennes versions de l'API Web Audio</li>
 </ul>
 
-<h2 id="Tutoriels_Basiques">Tutoriels Basiques</h2>
+<h2 id="basic_tutorials">Tutoriels pour apprendre les bases</h2>
 
 <dl>
- <dt><a href="/en-US/Apps/Build/Manipulating_media/cross_browser_video_player">Creating a cross-browser video player</a></dt>
- <dd>A guide to creating a basic cross browser video player using the {{ htmlelement ("video") }} element.</dd>
- <dt><a href="/en-US/Apps/Build/Manipulating_media/Video_player_styling_basics">Video player styling basics</a></dt>
- <dd>With the cross-browser video player put in place in the previous article, this article now looks at providing some basic, reponsive styling for the player.</dd>
- <dt><a href="/en-US/Apps/Build/Manipulating_media/Cross-browser_audio_basics">Cross-browser audio basics</a></dt>
- <dd>
- <div>
- <p>This article provides a basic guide to creating an HTML5 audio player that works cross browser, with all the associated attributes, properties and events explained, and a quick guide to custom controls created using the Media API.</p>
- </div>
- </dd>
- <dt><a href="/en-US/Apps/Build/Manipulating_media/buffering_seeking_time_ranges">Media buffering, seeking, and time ranges</a></dt>
- <dd>Sometimes it's useful to know how much {{ htmlelement("audio") }} or {{ htmlelement("video") }} has downloaded or is playable without delay — a good example of this is the buffered progress bar of an audio or video player. This article discusses how to build a buffer/seek bar using <a href="/en-US/docs/Web/API/TimeRanges">TimeRanges</a>, and other features of the media API.</dd>
- <dt><a href="/en-US/Apps/Build/Manipulating_media/HTML5_playbackRate_explained">HTML5 playbackRate explained</a></dt>
- <dd>The <code>playbackRate</code> property allows us to change the speed or rate at which a piece of web audio or video is playing. This article explains it in detail.</dd>
- <dt><a href="/en-US/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></dt>
- <dd>Explains the basics of using the Web Audio API to grab, manipulate and play back an audio source.</dd>
+  <dt><a href="/fr/docs/Web/Apps/Build/Manipulating_media/cross_browser_video_player">Créer un lecteur vidéo fonctionnant sur tous les navigateurs (en anglais)</a></dt>
+  <dd>Guide pour créer un lecteur vidéo simple et fonctionnant sur tous les navigateurs en utilisant l'élément <a href="/fr/docs/Web/HTML/Element/video"><code>&lt;video&gt;</code></a></dd>
+  <dt><a href="/fr/docs/Web/Apps/Build/Manipulating_media/Video_player_styling_basics">Bases concernant la mise en forme des lecteurs vidéo (en anglais)</a></dt>
+  <dd>À l'aide du lecteur vidéo mis en place sur l'article précédent, cet article montre comment fournir une mise en forme basique et responsive (en anglais)</dd>
+  <dt><a href="/fr/docs/Web/Apps/Build/Manipulating_media/Cross-browser_audio_basics">Les bases pour créer un lecteur audio fonctionnant sur tous les navigateurs (en anglais)</a></dt>
+  <dd>Cet article propose un guide de base pour créer un lecteur audio HTML5 qui fonctionne sur tous les navigateurs, avec une explication pour tous les attributs, propriétés et évènements associés, ainsi qu'un guide introduisant rapidement les contrôles personnalisés créés avec l'API Media (en anglais)</dd>
+  <dt><a href="/fr/docs/Web/Apps/Build/Manipulating_media/buffering_seeking_time_ranges">Mise en tampon des fichiers médias, recherche et gestion des intervales de temps</a></dt>
+  <dd>Parfois, il est utile de savoir le temps de téléchargment et de lecture des éléments <a href="/fr/docs/Web/HTML/Element/audio"><code>&lt;audio&gt;</code></a> ou <a href="/fr/docs/Web/HTML/Element/video"><code>&lt;video&gt;</code></a> sans attendre — un bon exemple d'application est la barre de progression mise en mémoire tampon d'un fichier audio ou vidéo. Cet article présente la construction d'une barre de recherche et mise en mémoire tampon en utilisant l'API <a href="/fr/docs/Web/API/TimeRanges">TimeRanges</a> ainsi que d'autres fonctionnalités de l'API <code>Media</code>.</dd>
+  <dt><a href="/fr/docs/Web/Apps/Build/Manipulating_media/HTML5_playbackRate_explained">Explications concernant la propriété <code>playbackRate</code> proposée par HTML5</a></dt>
+  <dd>La propriété <code>playbackRate</code> permet de modifier la vitesse ou la fréquence à laquelle un morceau de fichier audio ou vidéo est joué. Cet article l'explique en détails.</dd>
+  <dt><a href="/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Utilisation de l'API Web Audio</a></dt>
+  <dd>Explique les bases de l'API Web Audio, afin de pouvoir atteindre, manipuler et jouer une ressource audio.</dd>
 </dl>
 
-<h2 id="Tutoriels_Streaming_de_médias">Tutoriels Streaming de médias</h2>
+<h2 id="streaming_media_tutorials">Tutoriels concernant la diffusion en direct (streaming)</h2>
 
 <dl>
- <dt><a href="/en-US/Apps/Build/Manipulating_media/Live_streaming_web_audio_and_video">Live streaming web audio and video</a></dt>
- <dd>Live streaming technology is often employed to relay live events such as sports, concerts and more generally TV and Radio programmes that are output live. Often shortened to just streaming, live streaming is the process of transmitting media 'live' to computers and devices. This is a fairly complex and nascent subject with a lot of variables, so in this article we'll introduce you to the subject and let you know how you can get started.</dd>
- <dt><a href="/en-US/Apps/Build/Manipulating_media/Setting_up_adaptive_streaming_media_sources">Setting up adaptive streaming media sources</a></dt>
- <dd>Let's say you want to set up an adaptive streaming media source on a server, to be consumed inside an HTML5 media element. How would you do that? This article explains how, looking at two of the most common formats: MPEG-DASH and HLS (HTTP Live Streaming.)</dd>
- <dt><a href="/en-US/docs/Web/HTML/DASH_Adaptive_Streaming_for_HTML_5_Video">DASH Adaptive Streaming for HTML 5 Video</a></dt>
- <dd>Details how to set up adaptive streaming using DASH and WebM.</dd>
+  <dt><a href="/fr/docs/Web/Apps/Build/Manipulating_media/Live_streaming_web_audio_and_video">Diffusion en direct de fichiers audio et vidéo sur le web</a></dt>
+  <dd>Les technologies de diffusion en direct sont souvent employées pour diffuser en direct des évènements sportifs, des concerts et plus généralement des programmes télévisuels ou radiophoniques qui se déroulent en direct. Le terme est souvent raccourci en parlant de «&nbsp;direct&nbsp;» ou en anglais de <i lang="en">streaming</i> ou de <i lang="en">live</i>. Il s'agit du processus de transmission en direct d'une source média. Cela est plutôt complexe et sujet à de nombreux paramètres. Cet article fait une présentation générale du sujet et indique comment débuter.</dd>
+  <dt><a href="/fr/docs/Web/Apps/Build/Manipulating_media/Setting_up_adaptive_streaming_media_sources">Mettre en place une ressource média diffusée en direct adaptative</a></dt>
+  <dd>Si vous avez besoin de mettre en place une ressource média diffusée en direct et adaptative sur un serveur, et que cette ressource doit être consommée au sein d'un élément média HTML5, cet article explique comment faire. Il détaille les deux principaux formats, MPEG-DASH et HLS (<i lang="en">HTTP Live Streaming</i>)</dd>
+  <dt><a href="/fr/docs/Web/Media/DASH_Adaptive_Streaming_for_HTML_5_Video">Diffusion en direct et adaptative DASH pour les vidéos HTML5</a></dt>
+  <dd>Informations concernant la mise en place d'une diffusion en direct adaptative avec les formats DASH et WebM.</dd>
 </dl>
 
-<h2 id="Tutoriels_Advancés">Tutoriels Advancés</h2>
+<h2 id="advanced_tutorials">Tutoriels avancés</h2>
 
 <dl>
- <dt><a href="/en-US/Apps/Build/Manipulating_media/Adding_captions_and_subtitles_to_HTML5_video">Adding captions and subtitles to HTML5 video</a></dt>
- <dd>This article explains how to add captions and subtitles to HTML5 {{ htmlelement("video") }}, using <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Video_Text_Tracks_Format" title="WebVTT is a format for displaying timed text tracks (e.g. subtitles) with the &lt;track> element. The primary purpose of WebVTT files is to add subtitles to a &lt;video>.">Web_Video_Text_Tracks_Format</a> and the {{ htmlelement("track") }} element.</dd>
- <dt><a href="/en-US/docs/Web/Apps/Developing/Manipulating_media/Web_Audio_API_cross_browser" title="/en-US/docs/Web/Apps/Developing/Manipulating_media/Web_Audio_API_cross_browser">Writing Web Audio API code that works in every browser</a></dt>
- <dd>A guide to writing cross browser Web Audio API code.</dd>
- <dt><a href="/en-US/Apps/Developing/Manipulating_media/H.264_support_in_Firefox">H.264 support in Firefox</a></dt>
- <dd>This article explains the state of support for the H.264 video format in Firefox/Firefox OS, including code examples, tips and tricks.</dd>
- <dt><a href="https://hacks.mozilla.org/2014/06/easy-audio-capture-with-the-mediarecorder-api/">Easy audio capture with the MediaRecorder API</a></dt>
- <dd>Explains the basics of using the MediaRecorder API to directly record a media stream.</dd>
+  <dt><a href="/fr/docs/Web/Apps/Build/Manipulating_media/Adding_captions_and_subtitles_to_HTML5_video">Ajout de légendes et de sous-titres aux vidéos HTML5</a></dt>
+  <dd>Cet article explique comment ajouter des légendes et des sous-titres à l'élément HTML5 <a href="/fr/docs/Web/HTML/Element/video"><code>&lt;video&gt;</code></a>, en utilisant le format <a href="/fr/docs/Web/API/WebVTT_API">VTT (<i lang="en">Video Text Tracks</i>)</a> et l'élément <a href="/fr/docs/Web/HTML/Element/track"><code>&lt;track&gt;</code></a>.</dd>
+  <dt><a href="/fr/docs/Web/Apps/Developing/Manipulating_media/Web_Audio_API_cross_browser">Utiliser l'API Audio de façon compatible</a></dt>
+  <dd>Un guide pour utiliser l'API Audio de façon compatible sur tous les navigateurs.</dd>
+  <dt><a href="https://hacks.mozilla.org/2014/06/easy-audio-capture-with-the-mediarecorder-api/">Capture audio simplifiée avec l'API MediaRecorder</a></dt>
+  <dd>Cet article montre les bases de l'utilisation de l'API MediaRecorder, utilisée afin d'enregistrer un flux média.</dd>
 </dl>
 
-<div class="note">
-<p><strong>Note</strong>: Les versions de Firefox OS 1.3 et plus supportent le protocole <a href="http://en.wikipedia.org/wiki/Real_Time_Streaming_Protocol">RTSP</a> pour diffuser des vidéos en streaming. Une solution de secours pour les anciennes versions serait d'utiliser <code>&lt;video&gt;</code> avec un format pris en charge par Gecko (comme WebM).</p>
-</div>
-
-<h2 id="Réferences">Réferences</h2>
+<h2 id="references">Références</h2>
 
 <ul>
- <li><a href="/en-US/docs/Web/HTML/Element/video">The video element</a></li>
- <li><a href="/en-US/docs/Web/Guide/Events/Media_events">Media events API</a></li>
- <li><a href="/en-US/docs/Web/API/HTMLVideoElement">HTMLVideoElement API</a></li>
- <li><a href="/en-US/docs/Web/API/MediaSource">MediaSource API</a></li>
- <li><a href="/en-US/docs/Web/API/Web_Audio_API">Web Audio API</a></li>
- <li><a href="/en-US/docs/Web/API/MediaRecorder_API">MediaRecorder API</a></li>
- <li><a href="/en-US/docs/Web/API/Navigator.getUserMedia">getUserMedia</a></li>
+  <li><a href="/fr/docs/Web/HTML/Element/video">L'élément <code>&lt;video&gt;</code></a></li>
+  <li><a href="/fr/docs/Web/API/HTMLVideoElement">L'API <code>HTMLVideoElement</code></a></li>
+  <li><a href="/fr/docs/Web/API/MediaSource">L'API <code>MediaSource</code></a></li>
+  <li><a href="/fr/docs/Web/API/Web_Audio_API">L'API Web Audio</a></li>
+  <li><a href="/fr/docs/Web/API/MediaStream_Recording_API">L'API <code>MediaRecorder</code></a></li>
+  <li><a href="/fr/docs/Web/API/MediaDevices/getUserMedia"><code>getUserMedia()</code></a></li>
+  <li><a href="/fr/docs/Web/Events#media">Référence des évènements relatifs aux médias</a></li>
 </ul>
-
-<p> </p>
diff --git a/files/fr/web/html/element/kbd/index.html b/files/fr/web/html/element/kbd/index.html
index 6f8cfd69de..b74e3870ae 100644
--- a/files/fr/web/html/element/kbd/index.html
+++ b/files/fr/web/html/element/kbd/index.html
@@ -120,7 +120,7 @@ translation_of: Web/HTML/Element/kbd
 
 <p>{{EmbedLiveSample("Saisie_restituée", 650, 100)}}</p>
 
-<h3 id="Représenter_les_options_de_saisies_à_l’écran">Représenter les options de saisies à l’écran</h3>
+<h3 id="Representer_les_options_de_saisies_a_l_ecran">Représenter les options de saisies à l’écran</h3>
 
 <p>Imbriquer un élément <code>&lt;samp&gt;</code> dans un élément <code>&lt;kbd&gt;</code>  représente une saisie basée sur du texte affiché par le système (par exemple des noms de menu, d'éléments de menu, des noms de boutons affichés à l'écran, etc.).</p>
 
@@ -144,7 +144,7 @@ translation_of: Web/HTML/Element/kbd
 
 <h4 id="Résultat_5">Résultat</h4>
 
-<p>{{EmbedLiveSample("Représenter_les_options_de_saisies_à_l’écran", 650, 120)}}</p>
+<p>{{EmbedLiveSample("Representer_les_options_de_saisies_a_l_ecran", 650, 120)}}</p>
 
 <h2 id="Résumé_technique">Résumé technique</h2>
 
diff --git a/files/fr/web/http/index.html b/files/fr/web/http/index.html
index b88da0690e..65d677103f 100644
--- a/files/fr/web/http/index.html
+++ b/files/fr/web/http/index.html
@@ -1,87 +1,65 @@
 ---
 title: HTTP
 slug: Web/HTTP
-tags:
-  - Accueil
-  - HTTP
-  - Reference
-  - TCP/IP
-  - Web
-  - Web Development
 translation_of: Web/HTTP
 ---
 <div>{{HTTPSidebar}}</div>
 
-<p class="summary"><strong><dfn>Hypertext Transfer Protocol (HTTP)</dfn></strong> est un protocole de <a class="external" href="https://fr.wikipedia.org/wiki/Couche_application">la couche application</a> servant à transmettre des documents hypermédia, comme HTML. Il a été conçu pour communiquer entre les navigateurs web et les serveurs web, bien qu'il puisse être utilisé à d'autres fins. Il suit le modèle classique <a class="external" href="https://fr.wikipedia.org/wiki/Client-serveur">client-serveur</a>, un client ouvre une connexion, effectue une requête et attend jusqu'à recevoir une réponse. Il s'agit aussi d'un <a class="external" href="https://fr.wikipedia.org/wiki/Protocole_sans_%C3%A9tat">protocole sans état</a>, ce qui signifie que le serveur ne conserve aucune donnée (on parle d'état) entre deux requêtes. Bien que généralement basé sur une couche TCP/IP, HTTP peut aussi être utilisé sur toute <a class="external" href="https://fr.wikipedia.org/wiki/Couche_transport">couche de transport</a> fiable, garantissant qu'aucune donnée ne peut être perdue en chemin, contrairement à UDP par exemple.</p>
+<p><strong><dfn><i lang="en">Hypertext Transfer Protocol</i> (HTTP) (ou protocole de transfert hypertexte en français)</dfn></strong> est un protocole de <a href="https://fr.wikipedia.org/wiki/Couche_application">la couche application</a> servant à transmettre des documents hypermédias, comme HTML. Il a été conçu la communication entre les navigateurs web et les serveurs web mais peut également être utilisé à d'autres fins. Il suit le modèle classique <a href="https://fr.wikipedia.org/wiki/Client-serveur">client-serveur</a>&nbsp;: un client ouvre une connexion, effectue une requête et attend jusqu'à recevoir une réponse. Il s'agit aussi d'un <a href="https://fr.wikipedia.org/wiki/Protocole_sans_%C3%A9tat">protocole sans état</a>, ce qui signifie que le serveur ne conserve aucune donnée (on parle d'état) entre deux requêtes.</p>
 
-<div class="column-container">
-<div class="column-half">
-<h2 id="Tutoriels">Tutoriels</h2>
+<h2 id="tutorials">Tutoriels</h2>
 
 <p>Apprenez comment utiliser HTTP avec des guides et des tutoriels.</p>
 
 <dl>
- <dt><a href="/fr/docs/Web/HTTP/Overview">Aperçu du protocole HTTP</a></dt>
- <dd>Les fonctionnalités de base de ce protocole client-serveur : ce qui est permis par HTTP ainsi que le cadre d'utilisation de ce protocole.</dd>
- <dt><a href="/fr/docs/Web/HTTP/Caching">La mise en cache avec HTTP</a></dt>
- <dd>La mise en cache est critique pour permettre aux sites web d'être rapides. Cet article décrit les différentes méthodes de mise en cache et comment utiliser les en-têtes HTTP afin de contrôler le cache.</dd>
- <dt><a href="/fr/docs/Web/HTTP/Cookies">Les cookies HTTP</a></dt>
- <dd>Le fonctionnement des cookies est décrit dans la <a href="https://tools.ietf.org/html/rfc6265">RFC 6265</a>. Lorsqu'un serveur répond à une requête HTTP, ce dernier peut envoyer un en-tête <code>Set-Cookie</code> avec la réponse. Le client retourne alors la valeur du cookie lors de chaque requête vers ce serveur via un en-tête <code>Cookie</code> dans la requête. Le cookie peut posséder une date d'expiration, être restreint à un domaine spécifique ou à un chemin d'accès donné.</dd>
- <dt><a href="/fr/docs/Web/HTTP/CORS">Cross-Origin Resource Sharing (CORS)</a></dt>
- <dd><strong>Les requêtes HTTP cross-sites</strong> sont des requêtes HTTP pour des ressources situées dans un <strong>domaine différent</strong> de celui dans lequel se situe la ressource qui effectue la requête. Par exemple, une page HTML d'un domaine A (<code>http://domainea.example/</code>) effectue une requête pour une image au sein du domaine B (<code>http://domaineb.foo/image.jpg</code>) à l'aide de la balise <code>img</code>. Les pages web actuelles effectuent souvent des requêtes cross-sites pour charger des éléments comme des feuilles de style CSS, des images, des scripts ou d'autres ressources. CORS permet aux développeurs web de contrôler comment leur site doit se comporter lorsqu'il reçoit des requêtes cross-sites.</dd>
+  <dt><a href="/fr/docs/Web/HTTP/Overview">Aperçu du protocole HTTP</a></dt>
+  <dd>Les fonctionnalités de base de ce protocole client-serveur : ce qui est permis par HTTP ainsi que le cadre d'utilisation de ce protocole.</dd>
+  <dt><a href="/fr/docs/Web/HTTP/Caching">Mise en cache avec HTTP</a></dt>
+  <dd>La mise en cache est critique pour permettre aux sites web d'être rapides. Cet article décrit les différentes méthodes de mise en cache et l'utilisation des en-têtes HTTP afin de contrôler le cache.</dd>
+  <dt><a href="/fr/docs/Web/HTTP/Cookies">Cookies HTTP</a></dt>
+  <dd>Le fonctionnement des cookies est décrit dans la <a href="https://tools.ietf.org/html/rfc6265">RFC 6265</a>. Lorsqu'un serveur répond à une requête HTTP, ce dernier peut envoyer un en-tête <code>Set-Cookie</code> avec la réponse. Le client retourne alors la valeur du cookie lors de chaque requête vers ce serveur via un en-tête <code>Cookie</code> dans la requête. Le cookie peut posséder une date d'expiration, être restreint à un domaine spécifique ou à un chemin d'accès donné.</dd>
+  <dt><a href="/fr/docs/Web/HTTP/CORS"><i lang="en">Cross-Origin Resource Sharing</i> (CORS ou partage des ressources entre différentes origines)</a></dt>
+  <dd><strong>Les requêtes HTTP cross-sites</strong> sont des requêtes HTTP pour des ressources situées dans un <strong>domaine différent</strong> de celui dans lequel se situe la ressource qui effectue la requête. Par exemple, une page HTML d'un domaine A (<code>http://domainea.example/</code>) effectue une requête pour une image au sein du domaine B (<code>http://domaineb.foo/image.jpg</code>) à l'aide de la balise <code>img</code>. Les pages web actuelles effectuent souvent des requêtes cross-sites pour charger des éléments comme des feuilles de style CSS, des images, des scripts ou d'autres ressources. CORS permet aux développeuses et développeurs web de contrôler la façon dont leur site doit se comporter lorsqu'il reçoit des requêtes d'une autre origine.</dd>
+  <dt><a href="/fr/docs/Web/HTTP/Basics_of_HTTP/Evolution_of_HTTP">Évolution du protocole HTTP</a></dt>
+  <dd>Une brève description des changements qui ont eu lieu entre les toutes premières versions de HTTP, HTTP/2, HTTP/3 plus récent voire au-delà.</dd>
+  <dt><a href="https://wiki.mozilla.org/Security/Guidelines/Web_Security">Guide de sécurité Mozilla pour le Web</a></dt>
+  <dd>Une liste d'astuces visant à aider les équipes opérationnelles afin de créer des applications web mieux sécurisées (en anglais).</dd>
+  <dt><a href="/fr/docs/Web/HTTP/Messages">Les messages HTTP</a></dt>
+  <dd>Une description des types et structures de chaque message pour HTTP/1.x et HTTP/2.</dd>
+  <dt><a href="/fr/docs/Web/HTTP/Session">Une session HTTP classique</a></dt>
+  <dd>Un exemple et l'explication du déroulement d'une session HTTP classique.</dd>
+  <dt><a href="/fr/docs/Web/HTTP/Connection_management_in_HTTP_1.x">Gestion des connexions en HTTP/1.x</a></dt>
+  <dd>Un aperçu des trois modèles de gestion de connexion disponibles pour HTTP/1.x ainsi que leurs forces et faiblesses respectives.</dd>
 </dl>
 
-<dl>
- <dt><a href="/fr/docs/Web/HTTP/Basics_of_HTTP/Evolution_of_HTTP">Évolution du protocole HTTP</a></dt>
- <dd>Une brève description des changements qui ont eu lieu entre les toutes premières versions de HTTP jusqu'à la version HTTP/2 et au-delà.</dd>
- <dt><a href="https://wiki.mozilla.org/Security/Guidelines/Web_Security">Guide de sécurité Mozilla pour le Web</a></dt>
- <dd>Une liste d'astuces visant à aider les équipes opérationnelles afin de créer des applications web mieux sécurisées (en anglais).</dd>
-</dl>
-
-<dl>
- <dt><a href="/fr/docs/Web/HTTP/Messages">Les messages HTTP</a></dt>
- <dd>Une description des types et structures de chaque message pour HTTP/1.x et HTTP/2.</dd>
- <dt><a href="/fr/docs/Web/HTTP/Session">Une session HTTP classique</a></dt>
- <dd>Un exemple et l'explication du déroulement d'une session HTTP classique.</dd>
- <dt><a href="/fr/docs/Web/HTTP/Connection_management_in_HTTP_1.x">La gestion des connexions pour HTTP/1.x</a></dt>
- <dd>Un aperçu des trois modèles de gestion de connexion disponibles pour HTTP/1.x ainsi que leurs forces et faiblesses respectives.</dd>
-</dl>
-</div>
-
-<div class="column-half">
-<h2 id="Référence">Référence</h2>
+<h2 id="reference">Référence</h2>
 
 <p>Naviguez dans la documentation détaillée de HTTP.</p>
 
 <dl>
- <dt><a href="/fr/docs/HTTP/Headers">Les en-têtes HTTP</a></dt>
- <dd>Les messages d'en-tête HTTP sont utilisés pour décrire précisément la ressource ou le comportement du client ou du serveur. Un en-tête propriétaire sur mesure peut être ajouté en utilisant le préfixe <code>X-</code> ; d'autres en-têtes sont disponibles dans le <a class="external" href="https://www.iana.org/assignments/message-headers/perm-headers.html">registre de l'IANA</a>, dont le contenu original a été défini dans le <a class="external" href="https://tools.ietf.org/html/rfc4229">RFC 4229</a>. L'IANA maintient aussi un <a class="external" href="https://www.iana.org/assignments/message-headers/prov-headers.html">registre des nouveaux messages d'en-tête HTTP qui sont proposés</a>.</dd>
- <dt><a href="/fr/docs/Web/HTTP/Methods">Les méthodes de requête HTTP</a></dt>
- <dd>Différentes opérations peuvent être effectuées avec HTTP : les plus connues {{HTTPMethod("GET")}}, {{HTTPMethod("POST")}}, mais aussi des requêtes comme {{HTTPMethod("OPTIONS")}}, {{HTTPMethod("DELETE")}} ou {{HTTPMethod("TRACE")}}.</dd>
- <dt><a href="/fr/docs/Web/HTTP/Response_codes">Les codes de réponse HTTP</a></dt>
- <dd>Les codes de réponses HTTP indiquent si une requête HTTP a été complétée avec succès. Les réponses sont regroupées en cinq classes : les réponses informationnelles, les réponses de succès, les redirections, les erreurs client et les erreurs serveur.</dd>
-</dl>
-
-<dl>
- <dt><a href="/fr/docs/Web/HTTP/Headers/Content-Security-Policy">Les directives CSP</a></dt>
- <dd>Les champs de l'en-tête de réponse {{HTTPHeader("Content-Security-Policy")}} permettent aux administrateurs de contrôler les ressources accessibles pour un agent utilisateur au sein d'une page donnée. De manière générale, il s'agit de directives relatives à l'origine du serveur ainsi qu'aux points de terminaison des scripts.</dd>
+  <dt><a href="/fr/docs/Web/HTTP/Headers">En-têtes HTTP</a></dt>
+  <dd>Les messages d'en-tête HTTP sont utilisés pour décrire précisément la ressource ou le comportement du client ou du serveur. Un en-tête propriétaire sur mesure peut être ajouté en utilisant le préfixe <code>X-</code> ; d'autres en-têtes sont disponibles dans le <a href="https://www.iana.org/assignments/message-headers/perm-headers.html">registre de l'IANA</a>, dont le contenu original a été défini dans la <a href="https://tools.ietf.org/html/rfc4229">RFC 4229</a>. L'IANA maintient aussi un <a href="https://www.iana.org/assignments/message-headers/prov-headers.html">registre des nouveaux messages d'en-tête HTTP qui sont proposés</a>.</dd>
+  <dt><a href="/fr/docs/Web/HTTP/Methods">Méthodes de requête HTTP</a></dt>
+  <dd>Différentes opérations peuvent être effectuées avec HTTP : les plus connues <a href="/fr/docs/Web/HTTP/Methods/GET"><code>GET</code></a>, <a href="/fr/docs/Web/HTTP/Methods/POST"><code>POST</code></a>, mais aussi des requêtes comme <a href="/fr/docs/Web/HTTP/Methods/OPTIONS"><code>OPTIONS</code></a>, <a href="/fr/docs/Web/HTTP/Methods/DELETE"><code>DELETE</code></a> ou <a href="/fr/docs/Web/HTTP/Methods/TRACE"><code>TRACE</code></a>.</dd>
+  <dt><a href="/fr/docs/Web/HTTP/Response_codes">Codes de réponse HTTP</a></dt>
+  <dd>Les codes de réponses HTTP indiquent si une requête HTTP a été effectuée avec succès. Les réponses sont regroupées en cinq classes : les réponses informationnelles, les réponses de succès, les redirections, les erreurs client et les erreurs serveur.</dd>
+  <dt><a href="/fr/docs/Web/HTTP/Headers/Content-Security-Policy">Directives CSP</a></dt>
+  <dd>Les champs de l'en-tête de réponse <a href="/fr/docs/Web/HTTP/Headers/Content-Security-Policy"><code>Content-Security-Policy</code></a> permettent aux administrateurs de contrôler les ressources accessibles pour un agent utilisateur au sein d'une page donnée. De manière générale, il s'agit de directives relatives à l'origine du serveur ainsi qu'aux points de terminaison des scripts.</dd>
 </dl>
 
-<h2 id="Outils_et_ressources">Outils et ressources</h2>
+<h2 id="tools_resources">Outils et ressources</h2>
 
-<p>Outils utiles pour utiliser et déboguer HTTP.</p>
+<p>Outils utiles pour comprendre et déboguer HTTP.</p>
 
 <dl>
- <dt><a href="/fr/docs/Tools">Firefox Developer Tools</a></dt>
- <dd><a href="/fr/docs/Tools/Network_Monitor">Moniteur réseau</a></dd>
- <dt><a href="https://observatory.mozilla.org/">Mozilla Observatory</a></dt>
- <dd>
- <p>Un projet conçu pour aider les développeurs, les administrateurs système ainsi que les professionnels de la sécurité à configurer leur site de manière sûre et sécurisée.</p>
- </dd>
- <dt><a class="external" href="https://redbot.org/">RedBot</a></dt>
- <dd>Des outils pour vérifier vos en-têtes liés à la gestion du cache.</dd>
- <dt><a href="https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/">How Browsers Work</a></dt>
- <dd>Un article détaillé sur le fonctionnement d'un navigateur et l'organisation des requêtes HTTP durant la navigation. Un article à lire pour tout développeur web (en anglais).</dd>
+  <dt><a href="/fr/docs/Tools">Les outils de développement de Firefox</a></dt>
+  <dd><a href="/fr/docs/Tools/Network_Monitor">Moniteur réseau</a></dd>
+  <dt><a href="https://observatory.mozilla.org/">Mozilla Observatory</a></dt>
+  <dd>
+  <p>Un projet conçu pour aider les développeuses et développeurs, les administratrices et administrateurs système ainsi que les professionnels de la sécurité à configurer leur site de manière sûre et sécurisée.</p>
+  </dd>
+  <dt><a href="https://redbot.org/">RedBot</a></dt>
+  <dd>Des outils pour vérifier vos en-têtes liés à la gestion du cache.</dd>
+  <dt><a href="https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/">How Browsers Work</a></dt>
+  <dd>Un article détaillé sur le fonctionnement d'un navigateur et l'organisation des requêtes HTTP durant la navigation.</dd>
 </dl>
-</div>
-</div>
diff --git a/files/fr/web/javascript/a_re-introduction_to_javascript/index.html b/files/fr/web/javascript/a_re-introduction_to_javascript/index.html
deleted file mode 100644
index 0724f02931..0000000000
--- a/files/fr/web/javascript/a_re-introduction_to_javascript/index.html
+++ /dev/null
@@ -1,1045 +0,0 @@
----
-title: Une réintroduction à JavaScript
-slug: Web/JavaScript/A_re-introduction_to_JavaScript
-tags:
-  - CodingScripting
-  - Guide
-  - Intermediate
-  - Intro
-  - JavaScript
-  - Learn
-translation_of: Web/JavaScript/A_re-introduction_to_JavaScript
-original_slug: Web/JavaScript/Une_réintroduction_à_JavaScript
----
-<div>{{jsSidebar}}</div>
-
-<p>Pourquoi une réintroduction ? Parce que JavaScript est connu pour être source d'incompréhensions. Bien que souvent raillé comme étant un simple jouet, derrière sa simplicité désarmante se cachent certaines fonctionnalités de langage très puissantes. JavaScript est maintenant utilisé par un nombre incroyable d'applications de haut rang, ce qui montre qu'une connaissance approfondie de cette technologie est une compétence importante pour toute développeuse ou développeur web ou mobile.</p>
-
-<p>Il peut être utile de commencer avec un aperçu de l'histoire de ce langage. JavaScript a été créé en 1995 par Brendan Eich, alors ingénieur à Netscape. Ce langage est sorti au grand jour pour la première fois avec Netscape 2 au début de l'année 1996. Il était au départ censé s'appeler LiveScript, mais a été renommé par une décision marketing mal avisée dans le but de capitaliser sur la popularité du langage Java de Sun Microsystems, malgré le fait qu'ils n'aient que très peu en commun. Cela n'a jamais cessé d'être une source de confusion.</p>
-
-<p>Quelques mois plus tard, Microsoft a lancé avec Internet Explorer 3 une version du langage globalement compatible, appelée JScript. Quelques mois après, Netscape a soumis le langage à l'<a href="https://www.ecma-international.org/">Ecma International</a>, une organisation de normalisation européenne, ce qui a permis d'aboutir à la première édition du standard <a href="/fr/docs/Glossary/ECMAScript">ECMAScript</a> en 1997. Ce standard a reçu une mise à jour importante appelée <a href="https://www.ecma-international.org/publications/standards/Ecma-262.htm">ECMAScript edition 3</a> en 1999, et est resté relativement stable depuis. La quatrième édition a été abandonnée suite à des différends portants sur la complexité du langage. De nombreuses sections de la quatrième édition ont été utilisées pour servir de fondation à la cinquième édition d'ECMAScript, publiée en décembre 2009. La sixième édition, qui apporte des nouveautés majeures, a été publiée en juin 2015.</p>
-
-<div class="note">
-  <p><strong>Note :</strong> Dans la suite de cet article et à des fins de simplicité, nous utiliserons les termes «&nbsp;JavaScript&nbsp;» et «&nbsp;ECMAScript&nbsp;» pour désigner la même chose.</p>
-</div>
-
-<p>Contrairement à la plupart des langages de programmation, JavaScript n'a pas de concept d'entrée ou de sortie. Il est conçu pour s'exécuter comme un langage de script dans un environnement hôte, et c'est à cet environnement de fournir des mécanismes de communication avec le monde extérieur. L'environnement hôte le plus commun est un navigateur, mais des interpréteurs JavaScript existent également dans Adobe Acrobat, Photoshop, les images SVG, le moteur de widgets de Yahoo!, et même au sein d'environnements côté serveur tels que <a href="https://nodejs.org/">Node.js</a>. Cette liste ne se limite pas qu'à ces éléments et on retrouve également JavaScript dans les bases de données NoSQL telles que <a href="https://couchdb.apache.org/">Apache CouchDB</a>, les ordinateurs embarqués ou encore des environnements de bureaux comme <a href="https://www.gnome.org/">GNOME</a> (l'une des interfaces graphiques les plus populaires des systèmes d'exploitation GNU/Linux), etc.</p>
-
-<h2 id="Overview">Aperçu</h2>
-
-<p>JavaScript est un langage dynamique multi-paradigme : il dispose de différents types, opérateurs, objets natifs et méthodes. Sa syntaxe s'inspire des langages Java et C et de nombreuses structures de ces langages s'appliquent également à JavaScript. JavaScript permet la programmation orientée objet avec les prototypes (voir <a href="/fr/docs/Web/JavaScript/Inheritance_and_the_prototype_chain">l'héritage et la chaîne de prototypes</a> et <a href="/fr/docs/Web/JavaScript/Reference/Classes">les classes</a> apparues avec ES6/ES2015). JavaScript permet également la programmation fonctionnelle car ses fonctions sont des objets et on peut donc stocker ces fonctions dans des variables et les transmettre comme n'importe quel objet.</p>
-
-<p>Commençons par nous intéresser aux briques de base de tout langage : les types. Les programmes en JavaScript manipulent des valeurs, et ces valeurs appartiennent toutes à un type. Les types JavaScript sont :</p>
-
-<ul>
-  <li>Les nombres : <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Number"><code>Number</code></a></li>
-  <li>Les grands entiers (<i>BigInt</i>) : <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/BigInt"><code>BigInt</code></a></li>
-  <li>Les chaînes de caractères : <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/String"><code>String</code></a></li>
-  <li>Les booléens : <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Boolean"><code>Boolean</code></a></li>
-  <li>Les fonctions : <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Function"><code>Function</code></a></li>
-  <li>Les objets : <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Object"><code>Object</code></a></li>
-  <li>Les symboles : <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Symbol"><code>Symbol</code></a> (apparus avec la sixième édition d'ECMAScript, ES2015)</li>
-</ul>
-
-<p>On aura également <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/undefined"><code>undefined</code></a> et <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/null"><code>null</code></a>, qui sont relativement étranges. Les <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Array">tableaux ou <code>Array</code></a> permettent d'organiser des séries d'objets au sein d'un même objet. Les <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Date">dates (<code>Date</code>)</a> et les <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/RegExp">expressions rationnelles (<code>RegExp</code>)</a> qui sont  également des objets nativement disponibles en JavaScript. Afin d'être tout à fait précis, les fonctions sont aussi une sorte particulière d'objets, de sorte que le diagramme de types ressemble plutôt à ceci :</p>
-
-<ul>
-  <li><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Number"><code>Number</code></a></li>
-  <li><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/BigInt"><code>BigInt</code></a></li>
-  <li><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/String"><code>String</code></a></li>
-  <li><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Boolean"><code>Boolean</code></a></li>
-  <li><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Symbol"><code>Symbol</code></a> (apparu avec la sixième édition d'ECMAScript, ES2015)</li>
-  <li><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Object"><code>Object</code></a>
-    <ul>
-      <li><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Function"><code>Function</code></a></li>
-      <li><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Array"><code>Array</code></a></li>
-      <li><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Date"><code>Date</code></a></li>
-      <li><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/RegExp"><code>RegExp</code></a></li>
-    </ul>
-  </li>
-  <li><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/null"><code>null</code></a></li>
-  <li><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/undefined"><code>undefined</code></a></li>
-</ul>
-
-<p>Enfin, il y a également quelques types natifs pour gérer les exceptions : <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Error"><code>Error</code></a>. Pour garder une approche simple, nous utiliserons la première de ces listes pour présenter les types.</p>
-
-<h2 id="numbers">Les nombres</h2>
-
-<p>ECMAScript possède deux types numériques intégrés : <strong>Number</strong> et <strong>BigInt</strong>.</p>
-
-<p>Les nombres en JavaScript sont « des valeurs <a href="https://en.wikipedia.org/wiki/Double_precision_floating-point_format">au format IEEE 754 en double précision 64 bits</a> », d'après la spécification. Cela permet de représenter les nombres entre -(2^53 − 1) et 2^53 − 1. Lorsqu'on fait référence (ici ou dans les autres articles) à des entiers, on parle généralement d'une représentation d'un entier avec une valeur de type Number. En effet, les valeurs Number ne sont pas strictement des entiers et il faut donc prendre quelques précautions :</p>
-
-<pre class="brush: js">
-console.log(3 / 2);             // 1.5 et pas 1
-console.log(Math.floor(3 / 2)); // 1
-</pre>
-
-<p>Ainsi, un <em>entier apparent</em> est en fait <em>implicitement un nombre à virgule flottante</em>.</p>
-
-<p>Aussi, faites attention à des choses comme :</p>
-
-<pre class="brush: js">0.1 + 0.2 == 0.30000000000000004;</pre>
-
-<p>Dans la pratique, les valeurs entières sont traitées comme des entiers représentés sur 32 bits (certaines implémentations les stockent même ainsi tant qu'il n'y a pas besoin d'effectuer une opération valide pour un nombre mais pas pour un entier sur 32 bits). Cette représentation peut être importante pour les opérations binaires.</p>
-
-<p>Les <a href="/fr/docs/Web/JavaScript/Reference/Operators#arithmetic_operators">opérateurs arithmétiques</a> standards sont gérés, dont l'addition, la soustraction, le reste arithmétique et ainsi de suite. Il existe également un objet natif, qui n'a pas été mentionné jusqu'à présent, appelé <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Math"><code>Math</code></a>, qui permet de gérer certaines fonctions et constantes mathématiques plus avancées :</p>
-
-<pre class="brush: js">
-Math.sin(3.5);
-let circonference = 2 * Math.PI * r;
-</pre>
-
-<p>On peut convertir une chaîne de caractères en un nombre entier à l'aide de la fonction intégrée <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/parseInt"><code>parseInt()</code></a>. Elle reçoit la base de conversion comme second paramètre, qui devrait toujours être fourni afin de lever une éventuelle ambiguïté :</p>
-
-<pre class="brush: js">
-parseInt("123", 10); // 123
-parseInt("010", 10); //10
-</pre>
-
-<p>Si la base n'est pas indiquée, les résultats peuvent être surprenants dans les anciens navigateurs qui datent de 2013 ou avant où les chaînes commençant par <code>0</code> pouvaient ne pas être considérées comme exprimées en notation octale. À moins que vous ne soyez certain du format de votre chaîne de caractères, vous pouvez obtenir des résultats surprenants sur ces anciens navigateurs :</p>
-
-<pre class="brush: js">
-parseInt("010");  //  8
-parseInt("0x10"); // 16
-</pre>
-
-<p>Cela se produit parce que la fonction <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/parseInt"><code>parseInt()</code></a> a été implémentée pour traiter la première chaîne comme un nombre octal à cause du zéro initial et la seconde comme une représentation hexadécimale car commençant avec <code>0x</code>. Une telle notation hexadécimale peut toujours être utilisée mais la notation octale a été retirée.</p>
-
-<p>Si on souhaite convertir un nombre binaire en un entier, il suffit de changer la base :</p>
-
-<pre class="brush: js">parseInt("11", 2); // 3</pre>
-
-<p>De la même manière, vous pouvez traiter les nombres à virgule flottante à l'aide de la fonction intégrée <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/parseFloat"><code>parseFloat()</code></a>, qui, à la différence de <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/parseInt"><code>parseInt()</code></a>, utilise toujours la base 10.</p>
-
-<p>On peut également utiliser l'opérateur unaire <code>+</code> pour convertir des valeurs en nombres :</p>
-
-<pre class="brush: js">
-+ "42";   // 42
-+ "010";  // 10
-+ "0x10"; // 16
-</pre>
-
-<p>Une valeur spéciale appelée <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/NaN"><code>NaN</code></a> (qui signifie « <em>Not a Number</em> », soit « pas un nombre ») est renvoyée si la chaîne est non numérique :</p>
-
-<pre class="brush: js">parseInt("coucou", 10); // NaN</pre>
-
-<p><code>NaN</code> est « toxique » : si cette valeur est fournie en entrée pour n'importe quelle opération mathématique, le résultat sera également <code>NaN</code> :</p>
-
-<pre class="brush: js">NaN + 5; // NaN</pre>
-
-<p>Cette valeur peut être détectée grâce à la fonction native <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Number/isNaN"><code>Number.isNaN()</code></a> (qui fait <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Number/isNaN#description">exactement ce que son nom indique</a>) :</p>
-
-<pre class="brush: js">
-Number.isNaN(NaN); // true
-Number.isNaN('bonjour'); // false
-Number.isNaN('1'); // false
-Number.isNaN(undefined); // false
-Number.isNaN({}); // false
-Number.isNaN([1]) // false
-Number.isNaN([1,2]) // false
-</pre>
-
-<p>Mais ne testez pas le <code>NaN</code> en utilisant la fonction globale <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/isNaN"><code>isNaN()</code></a>, <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/isNaN#confusing_special-case_behavior">qui a un comportement peu intuitif</a> :</p>
-
-<pre class="brush: js">
-isNaN('bonjour'); // true
-isNaN('1'); // false
-isNaN(undefined); // true
-isNaN({}); // true
-isNaN([1]) // false
-isNaN([1,2]) // true
-</pre>
-
-<p>JavaScript dispose également de valeur spéciales pour l'infini <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Infinity"><code>Infinity</code></a> et l'infini négatif (<code>-Infinity</code>)&nbsp;:</p>
-
-<pre class="brush: js">
-1 / 0; // Infinity
--1 / 0; // -Infinity
-</pre>
-
-<p>Il est possible de tester les valeurs <code>Infinity</code>, <code>-Infinity</code> et <code>NaN</code> à l'aide de la fonction native <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/isFinite"><code>isFinite()</code></a> :</p>
-
-<pre class="brush: js">
-isFinite(1/0); // false
-isFinite(-Infinity); // false
-isFinite(NaN); // false
-</pre>
-
-<div class="note">
-  <p><strong>Note :</strong> Les fonctions <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/parseFloat"><code>parseFloat()</code></a> et <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/parseInt"><code>parseInt()</code></a> traitent une chaîne de caractères jusqu'à ce qu'elles atteignent un caractère qui n'est pas valide pour le format numérique indiqué, puis renvoient le nombre traité jusqu'à ce point. Cependant, l'opérateur "+" convertit simplement la chaîne à <code>NaN</code> à partir du moment où la chaîne contient le moindre caractère non valide. Vous pouvez tester ce comportement en manipulant la chaîne "10.2abc" avec chaque méthode dans la console afin de mieux comprendre les différences.</p>
-</div>
-
-<h2 id="strings">Les chaînes de caractères</h2>
-
-<p>Les chaînes en JavaScript sont des séquences de <a href="/fr/docs/Web/JavaScript/Guide/Grammar_and_types#unicode">caractères Unicode</a>. Cette nouvelle devrait être bien accueillie par toute personne qui a déjà eu affaire à des problèmes d'internationalisation. Pour être plus précis, ce sont des séquences de codets UTF-16 : chaque codet est représenté par un nombre sur 16 bits et chaque caractère Unicode est représenté par 1 ou 2 codets.</p>
-
-<p>Si vous voulez représenter un seul caractère, il suffit d'utiliser une chaîne qui contient un seul caractère.</p>
-
-<p>Pour connaître la longueur d'une chaîne, utilisez sa propriété <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/String/length"><code>length</code></a> :</p>
-
-<pre class="brush: js">"bonjour".length; // 7</pre>
-
-<p>C'est notre première rencontre avec les objets JavaScript ! Les chaînes peuvent également être utilisées comme des <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Object">objets</a>. Elles possèdent aussi des <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/String#instance_methods">méthodes</a> permettant de manipuler la chaîne et d'accéder à certaines informations sur cette chaîne de caractères :</p>
-
-<pre class="brush: js">
-"bonjour".charAt(0); // "b"
-"coucou monde".replace("coucou", "bonjour"); // "bonjour monde"
-"bonjour".toUpperCase(); // "BONJOUR"
-</pre>
-
-<h2 id="other_types">Les autres types</h2>
-
-<p>JavaScript fait la distinction entre <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/null"><code>null</code></a>, qui est un objet de type <code>object</code> indiquant une absence délibérée de valeur, et <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/undefined"><code>undefined</code></a> qui est un objet de type <code>undefined</code> indiquant une variable non initialisée — c'est-à-dire qui n'a pas encore été assignée. Nous parlerons des variables plus tard, mais en JavaScript il est possible de déclarer une variable sans lui assigner de valeur. Si vous faites cela, le type de la variable sera <code>undefined</code> qui est une constante.</p>
-
-<p>JavaScript dispose d'un type booléen, dont les valeurs possibles sont <code>true</code> (vrai) et <code>false</code> (faux). L'un et l'autre sont des mots clés. Toute valeur peut être convertie en une valeur booléenne selon les règles suivantes :</p>
-
-<ol>
-  <li><code>false</code>, <code>0</code>, la chaîne vide (<code>""</code>), <code>NaN</code>, <code>null</code> et <code>undefined</code> deviennent toutes <code>false</code> </li>
-  <li>toutes les autres valeurs deviennent <code>true</code>.</li>
-</ol>
-
-<p>Cette conversion peut être faite de manière explicite à l'aide de la fonction <code>Boolean()</code> :</p>
-
-<pre class="brush: js">
-Boolean("");  // false
-Boolean(234); // true
-</pre>
-
-<p>Cependant, c'est rarement nécessaire, puisque JavaScript effectuera cette conversion silencieusement chaque fois qu'il attend une valeur booléenne, par exemple dans une instruction <code>if</code> (voir plus bas). Pour cette raison, on parle souvent simplement de valeurs « vraies » et « fausses » pour indiquer des valeurs devenant respectivement <code>true</code> et <code>false</code> lorsqu'elles sont converties en valeurs booléennes.</p>
-
-<p>Les opérations booléennes comme <code>&amp;&amp;</code> (<em>et</em> logique), <code>||</code> (<em>ou</em> logique) et <code>!</code> (<em>non</em> logique) sont également gérées, comme on le verra plus bas.</p>
-
-<h2 id="variables">Les variables</h2>
-
-<p>En JavaScript, on peut déclarer de nouvelles variables grâce à l'un de ces trois mots-clés : <a href="/fr/docs/Web/JavaScript/Reference/Statements/let"><code>let</code></a>, <a href="/fr/docs/Web/JavaScript/Reference/Statements/const"><code>const</code></a>, ou <code><a href="/fr/docs/Web/JavaScript/Reference/Statements/var" title="/en/JavaScript/Reference/Statements/var">var</a></code>.</p>
-
-<p><strong><code>let</code></strong> permet de déclarer des variables qui pourront être utilisées dans un bloc. La variable déclarée avec <code>let</code> est uniquement disponible dans le bloc qui contient la déclaration.</p>
-
-<pre class="brush: js">
-let a;
-let nom = "Simon";
-</pre>
-
-<p>Voici un exemple de <em>portée</em> avec <strong><code>let</code></strong> :</p>
-
-<pre class="brush: js">
-// variableLet n'est pas utilisable ici
-
-for (let variableLet = 0; variableLet &lt; 5; variableLet++) {
-  // variableLet peut être utilisée ici
-}
-
-// variableLet n'est pas utilisable ici
-</pre>
-
-<p><strong><code>const</code></strong> permet de déclarer des variables dont la valeur ne doit pas changer. Une variable déclarée avec <code>const</code> est disponible dans le bloc dans lequel elle est déclarée.</p>
-
-<pre class="brush: js">
-const Pi = 3.14; // la constante Pi est définie
-Pi = 1; // produira une erreur, car on ne peut pas modifier une variable constante.
-</pre>
-
-<p><strong><code>var</code></strong> est le mot-clé le plus fréquemment utilisé pour déclarer des variables. Ce mot-clé était disponible avant <code>let</code> et <code>const</code> (c'était alors le seul qui permettait de déclarer des variables). Une variable qu'on déclare avec <strong><code>var</code></strong> est disponible dans la <em>fonction</em> dans laquelle elle est déclarée.</p>
-
-<pre class="brush: js">
-var a;
-var nom = "simon";
-</pre>
-
-<p>Voici un exemple pour étudier la portée d'une variable déclarée avec <strong><code>var</code></strong> :</p>
-
-<pre class="brush: js">
-// variableVar *est* utilisable ici
-
-for (var variableVar = 0; variableVar &lt; 5; variableVar++) {
-  // variableVar *est* également disponible ici
-}
-
-// variableVar *est* toujours disponible ici</pre>
-
-<p>Si on déclare une variable sans lui affecter aucune valeur, son type sera alors <code>undefined</code>.</p>
-
-<p>JavaScript possède une différence importante quant aux autres langages de programmation comme Java&nbsp;: en JavaScript, les blocs ne créent pas de portées pour les variables déclarées avec <code>var</code>, c'est la fonction qui gère la portée d'une variable déclarée avec <code>var</code>. Aussi, si une variable est définie avec <code>var</code> au sein d'une instruction conditionnelle avec <code>if</code>, cette variable sera visible depuis l'ensemble de la fonction. Avec ECMAScript 2015, les instructions de déclarations, <a href="/fr/docs/Web/JavaScript/Reference/Statements/let"><code>let</code></a> et <a href="/fr/docs/Web/JavaScript/Reference/Statements/const"><code>const</code></a> permettent de créer des variables dont la portée est limitée à celle du bloc qui l'englobe.</p>
-
-<h2 id="operators">Les opérateurs</h2>
-
-<p>Les opérateurs numériques en JavaScript sont <code>+</code>, <code>-</code>, <code>*</code>, <code>/</code> et <code>%</code> (qui est <a href="/fr/docs/conflicting/Web/JavaScript/Reference/Operators#remainder_()">l'opérateur de reste, à ne pas confondre avec le « modulo » mathématique</a>). Les valeurs sont affectées à l'aide de <code>=</code> et il existe également des opérateurs d'affectation combinés comme <code>+=</code> et <code>-=</code>. Ils sont équivalents à <code>x = x <em>opérateur</em> y</code>.</p>
-
-<pre class="brush: js">
-x += 5;
-x = x + 5;
-</pre>
-
-<p>Vous pouvez utiliser <code>++</code> et <code>--</code> respectivement pour incrémenter et pour décrémenter. Ils peuvent être utilisés comme opérateurs préfixes ou suffixes.</p>
-
-<p>L'<a href="/fr/docs/conflicting/Web/JavaScript/Reference/Operators#addition_(.2b)">opérateur <code>+</code> </a> permet également de concaténer des chaînes :</p>
-
-<pre class="brush: js">"coucou" + " monde"; // "coucou monde"</pre>
-
-<p>Si vous additionnez une chaîne à un nombre (ou une autre valeur), tout est d'abord converti en une chaîne. Ceci pourrait vous surprendre :</p>
-
-<pre class="brush: js">
-"3" + 4 + 5; // "345"
-3 + 4 + "5"; // "75"
-</pre>
-
-<p>L'ajout d'une chaîne vide à une valeur est une manière utile de convertir cette valeur une chaîne de caractères.</p>
-
-<p>Les <a href="/fr/docs/Web/JavaScript/Reference/Operators">comparaisons</a> en JavaScript se font à l'aide des opérateurs <code>&lt;</code>, <code>&gt;</code>, <code>&lt;=</code> et <code>&gt;=</code>. Ceux-ci fonctionnent tant pour les chaînes que pour les nombres. L'égalité est un peu moins évidente. L'opérateur double égal effectue une équivalence si vous lui donnez des types différents, ce qui donne parfois des résultats intéressants :</p>
-
-<pre class="brush: js">
-123 == "123"; // true
-1 == true;    // true
-</pre>
-
-<p>Pour éviter les conversions implicites avant les comparaisons, utilisez l'opérateur triple égal :</p>
-
-<pre class="brush: js">
-123 === "123"; //false
-true === true; // true
-</pre>
-
-<p>Les opérateurs <code>!=</code> et <code>!==</code> existent également.</p>
-
-<p>JavaScript dispose également d'<a href="/fr/docs/Web/JavaScript/Reference/Operators">opérations bit à bit</a>.</p>
-
-<h2 id="control_structures">Les structures de contrôle</h2>
-
-<p>JavaScript dispose d'un ensemble de structures de contrôle similaires aux autres langages de la famille du langage C. Les structures conditionnelles sont présentes avec <code>if</code> et <code>else</code> ; lesquels peuvent être chaînés si nécessaire :</p>
-
-<pre class="brush: js">
-let nom = "des chatons";
-if (nom == "des chiots") {
-  nom += " !";
-} else if (nom == "des chatons") {
-  nom += " !!";
-} else {
-  nom = " !" + nom;
-}
-nom == "des chatons !!"
-</pre>
-
-<p>JavaScript dispose également de boucles <code>while</code> et <code>do-while</code>. Les premières permettent de former des boucles basiques ; les secondes permettent de construire des boucles qui seront exécutées au moins une fois :</p>
-
-<pre class="brush: js">
-while (true) {
-  // une boucle infinie !
-}
-
-let input;
-do {
-  input = getInput();
-} while (inputNonValide(input));
-</pre>
-
-<p>Les boucles <a href="/fr/docs/Web/JavaScript/Reference/Statements/for"><code>for</code></a> en JavaScript sont les mêmes qu'en C et en Java : elles permettent de fournir les informations de contrôle de la boucle en une seule ligne.</p>
-
-<pre class="brush: js">
-for (let i = 0; i &lt; 5; i++) {
-  // Sera exécutée cinq fois
-}
-</pre>
-
-<p>JavaScript permet également d'utiliser deux autres types de boucles : <a href="/fr/docs/Web/JavaScript/Reference/Statements/for...of"><code>for</code>...<code>of</code></a> :</p>
-
-<pre class="brush: js">
-for (let element of tableau) {
-  // utiliser des instructions
-  // pour manipuler la valeur element
-}
-</pre>
-
-<p>et <a href="/fr/docs/Web/JavaScript/Reference/Statements/for...in"><code>for</code>...<code>in</code></a> :</p>
-
-<pre class="brush: js">
-for (let propriete in objet) {
-  // utiliser des instructions
-  // pour manipuler la propriété de l'objet
-}
-</pre>
-
-<p>Les opérateurs <code>&amp;&amp;</code> et <code>||</code> utilisent une logique de court-circuit, ce qui signifie qu'ils exécuteront leur second opérande ou non selon la valeur du premier. C'est très utile pour vérifier qu'un objet n'est pas égal à <code>null</code> avant d'essayer d'accéder à ses attributs :</p>
-
-<pre class="brush: js">let nom = o &amp;&amp; o.getNom();</pre>
-
-<p>Ou pour définir des valeurs par défaut :</p>
-
-<pre class="brush: js">let nom = autreNom || "nomParDéfaut";</pre>
-
-<p>De la même façon, le OU peut être utilisé pour mettre en cache des valeurs (lorsque les valeurs équivalentes à faux sont invalides) :</p>
-
-<pre class="brush: js">let nom = nomEnCache || (nomEnCache = getNom());</pre>
-
-<p>JavaScript propose également un opérateur ternaire pour les assignations conditionnelles en une ligne :</p>
-
-<pre class="brush: js">let permis = (age &gt; 18) ? "oui" : "non";</pre>
-
-<p>L'instruction <code>switch</code> peut être utilisée pour différentes branches de code basées sur un nombre ou une chaîne :</p>
-
-<pre class="brush: js">
-switch (action) {
-  case 'dessiner':
-    dessine();
-    break;
-  case 'manger':
-    mange();
-    break;
-  default:
-    neRienFaire();
-}
-</pre>
-
-<p>Si vous n'ajoutez pas d'instruction <code>break</code>, l'exécution va se poursuivre au niveau suivant. C'est rarement ce qui est désiré, en fait ça vaut même la peine de préciser dans un commentaire si la poursuite au cas suivant est délibérée pour aider au débogage :</p>
-
-<pre class="brush: js">switch (a) {
-  case 1: // identique au cas 2
-  case 2:
-    mange();
-    break;
-  default:
-    nerienfaire();
-}</pre>
-
-<p>La clause <code>default</code> est optionnelle. Vous pouvez placer des expressions à la fois dans la partie <code>switch</code> et dans les cas à gérer si vous voulez ; les comparaisons entre les deux se font comme si on avait utilisé l'opérateur <code>===</code> :</p>
-
-<pre class="brush: js">switch (1 + 3){
-  case 2 + 2:
-    yay();
-    break;
-  default:
-    nArriveJamais();
-}</pre>
-
-<h2 id="objects">Les objets</h2>
-
-<p>Les objets en JavaScript sont simplement des collections de paires nom-valeur. Dans ce sens, ils sont similaires aux :</p>
-
-<ul>
-  <li>dictionnaires en Python,</li>
-  <li>hashs en Perl et Ruby,</li>
-  <li>tables de hachage en C et C++,</li>
-  <li>HashMaps en Java,</li>
-  <li>tableaux associatifs en PHP.</li>
-</ul>
-
-<p>Le fait que cette structure de données soit si largement utilisée est un témoignage de sa polyvalence. Puisque tout (sauf les types de base) est un objet en JavaScript, tout programme écrit dans ce langage implique naturellement un grand nombre de recherches dans des tables de hachage. C'est une bonne chose que ce soit si rapide !</p>
-
-<p>La partie « nom » est une chaîne JavaScript, tandis que la partie « valeur » peut être n'importe quelle valeur JavaScript, y compris d'autres objets. Cela permet de construire des structures de données de n'importe quel niveau de complexité.</p>
-
-<p>Il existe deux façons très simples pour créer un objet vide :</p>
-
-<pre class="brush: js">let obj = new Object();</pre>
-
-<p>Et :</p>
-
-<pre class="brush: js">let obj = {};</pre>
-
-<p>Ils sont sémantiquement équivalents ; la seconde écriture est appelée syntaxe littérale d'objet et est plus pratique. Cette syntaxe est également au cœur du format JSON et devrait être privilégiée à tout moment.</p>
-
-<p>La syntaxe littérale pour écrire un objet peut être utilisée afin d'initialiser tout un objet :</p>
-
-<pre class="brush: js">
-let obj = {
-  name: 'Carotte',
-  _for: 'Max', // Le mot "for" est un mot réservé, utilisez plutôt "_for".
-  details: {
-    color: 'orange',
-    size: 12
-  }
-};</pre>
-
-<p>L'accès aux attributs peut être enchaîné :</p>
-
-<pre class="brush: js">
-obj.details.color; // orange
-obj['details']['size']; // 12
-</pre>
-
-<p>L'exemple suivant crée un prototype d'objet (<code>Person</code>) et une instance de ce prototype (<code>you</code>).</p>
-
-<pre class="brush: js">
-function Person(name, age) {
-  this.name = name;
-  this.age = age;
-}
-
-// Définir un objet
-let you = new Person('You', 24);
-// Nous créons une nouvelle personne nommée "You" âgée de 24 ans.
-</pre>
-
-<p><strong>Une fois l'objet créé</strong>, on peut accéder à ses propriétés de l'une des deux manières suivantes :</p>
-
-<pre class="brush: js">
-// notation par points
-obj.name = 'Simon';
-let name = obj.name;
-</pre>
-
-<p>Et…</p>
-
-<pre class="brush: js">
-// notation entre crochets
-obj['name'] = 'Simon';
-let name = obj['name'];
-// on peut utiliser une variable pour définir une clé
-let user = prompt('quelle clé ?');
-obj[user] = prompt('quelle valeur ?');
-</pre>
-
-<p>Ces deux méthodes sont également sémantiquement équivalentes. La seconde méthode a l'avantage de fournir le nom de l'attribut de l'objet dans une chaîne, ce qui signifie qu'il peut être calculé au moment de l'exécution (mais ce qui peut empêcher certaines optimisations du moteur JavaScript). Elle peut également être utilisée pour définir et lire des propriétés dont les noms sont des <a href="/fr/docs/Web/JavaScript/Reference/Lexical_grammar#keywords">mots réservés</a> :</p>
-
-<pre class="brush: js">
-obj.for = "Simon"; // erreur de syntaxe, car "for" est un mot réservé
-obj["for"] = "Simon"; // fonctionne très bien
-</pre>
-
-<div class="note">
-  <p><strong>Note :</strong> À partir d'ECMAScript 5, les mots réservés peuvent être utilisés comme noms de propriétés d'objets « en vrac ». Cela signifie qu'ils n'ont pas besoin d'être « habillés » de guillemets lors de la définition des littéraux d'objet. Voir <a href="https://es5.github.io/#x7.6.1">la spécification ES5</a>.</p>
-</div>
-
-<p>Pour en savoir plus sur les objets et les prototypes, voir <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Object"><code>Object.prototype</code></a>. Pour une explication des prototypes d'objets et des chaînes de prototypes, voir <a href="/fr/docs/Web/JavaScript/Inheritance_and_the_prototype_chain">l'héritage et la chaîne de prototypes</a>.</p>
-
-<div class="note">
-  <p><strong>Note :</strong> À partir d'ECMAScript 2015, les clés des objets peuvent être définies par la variable en utilisant la notation entre parenthèses lors de sa création. <code>{[phoneType] : 12345}</code> est possible au lieu de simplement <code>var userPhone = {}; userPhone[phoneType] = 12345;</code>.</p>
-</div>
-
-<h2 id="arrays">Les tableaux</h2>
-
-<p>Les tableaux (<em>Arrays</em>) en JavaScript sont en fait un type spécial d'objets. Ils fonctionnent d'une façon tout à fait similaire aux objets normaux (on peut naturellement accéder aux propriétés numériques avec la syntaxe des crochets <code>[]</code>), mais ils ont également une propriété magique appelée <code>length</code>. Elle vaut toujours un de plus que le plus grand indice dans le tableau.</p>
-
-<p>L'ancienne manière de créer des tableaux est celle-ci :</p>
-
-<pre class="brush: js">
-let a = new Array();
-a[0] = "chien";
-a[1] = "chat";
-a[2] = "poule";
-a.length; // 3
-</pre>
-
-<p>Une notation plus pratique est la syntaxe littérale :</p>
-
-<pre class="brush: js">
-let a = ["chien", "chat", "poule"];
-a.length; // 3
-</pre>
-
-<p>Notez que <code>array.length</code> ne correspond pas nécessairement au nombre d'éléments dans le tableau. Observez le code suivant :</p>
-
-<pre class="brush: js">
-let a = ["chien", "chat", "poule"];
-a[100] = "renard";
-a.length // 101
-</pre>
-
-<p>Rappelez-vous : la longueur du tableau vaut simplement un de plus que l'indice le plus élevé.</p>
-
-<p>Si vous interrogez un élément de tableau non existant, vous obtenez <code>undefined</code> :</p>
-
-<pre class="brush: js">typeof(a[90]); // undefined</pre>
-
-<p>Si vous prenez cela en compte, il est possible de parcourir un tableau à l'aide de la boucle suivante :</p>
-
-<pre class="brush: js">
-for (let i = 0; i &lt; a.length; i++) {
-  // Faire quelque chose avec a[i]
-}
-</pre>
-
-<p>ES2015 a introduit la boucle plus concise <a href="/fr/docs/Web/JavaScript/Reference/Statements/for...of"><code>for</code>...<code>of</code></a> pour les objets itérables tels que les tableaux :</p>
-
-<pre class="brush: js">
-for (const currentValue of a) {
-  // Faire quelque chose avec currentValue
-}
-</pre>
-
-<p>Vous pourriez également itérer sur un tableau en utilisant une boucle <a href="/fr/docs/Web/JavaScript/Reference/Statements/for...in"><code>for</code>...<code>in</code></a>, cependant cela n'itère pas sur les éléments du tableau, mais sur les indices du tableau. De plus, si quelqu'un ajoutait de nouvelles propriétés à <code>Array.prototype</code>, elles seraient également parcourues par une telle boucle. Par conséquent, ce type de boucle n'est pas recommandé pour les tableaux.</p>
-
-<p>Une autre façon d'itérer sur un tableau qui a été ajoutée avec ECMAScript 5 est <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach"><code>forEach()</code></a> :</p>
-
-<pre class="brush: js">
-['chien', 'chat', 'poule'].forEach(function(currentValue, index, array) {
-  // Faire quelque chose avec currentValue ou array[index]
-});
-</pre>
-
-<p>Si vous voulez ajouter un élément à un tableau, procédez comme suit :</p>
-
-<pre class="brush: js">a.push(item);</pre>
-
-<p>Les tableaux sont accompagnés d'un certain nombre de méthodes. Voir également la <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Array">documentation complète sur les méthodes des tableaux</a>.</p>
-
-<table class="standard-table">
-  <thead>
-    <tr>
-      <th scope="col">Nom de la méthode</th>
-      <th scope="col">Description</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td><code>a.toString()</code></td>
-      <td>Renvoie une chaîne composée des différents éléments auxquels on a appliqué <code>toString()</code>, séparés par des virgules.</td>
-    </tr>
-    <tr>
-      <td><code>a.toLocaleString()</code></td>
-      <td>Renvoie une chaîne composée des différents éléments auxquels on a appliqué <code>toLocaleString()</code>, séparés par des virgules.</td>
-    </tr>
-    <tr>
-      <td><code>a.concat(item1[, item2[, ...[, itemN]]])</code></td>
-      <td>Renvoie un nouveau tableau auquel on a ajouté les éléments.</td>
-    </tr>
-    <tr>
-      <td><code>a.join(sep)</code></td>
-      <td>Convertit le tableau en une chaîne dont les valeurs sont séparées par le paramètre <code>sep</code>.</td>
-    </tr>
-    <tr>
-      <td><code>a.pop()</code></td>
-      <td>Renvoie le dernier élément du tableau et le retire du tableau.</td>
-    </tr>
-    <tr>
-      <td><code>a.push(item1, ..., itemN)</code></td>
-      <td>Ajoute un ou plusieurs éléments à la fin du tableau.</td>
-    </tr>
-    <tr>
-      <td><code>a.shift()</code></td>
-      <td>Renvoie le premier élément du tableau et le retire du tableau.</td>
-    </tr>
-    <tr>
-      <td><code>a.unshift(item1[, item2[, ...[, itemN]]])</code></td>
-      <td>Ajoute des éléments au début du tableau.</td>
-    </tr>
-    <tr>
-      <td><code>a.slice(start[, end])</code></td>
-      <td>Renvoie un sous-tableau.</td>
-    </tr>
-    <tr>
-      <td><code>a.sort([cmpfn])</code></td>
-      <td>Trie le tableau (avec une fonction de comparaison optionnelle).</td>
-    </tr>
-    <tr>
-      <td><code>a.splice(start, delcount[, item1[, ...[, itemN]]])</code></td>
-      <td>Permet de modifier un tableau en en supprimant une partie et en la remplaçant avec plus d'éléments.</td>
-    </tr>
-    <tr>
-      <td><code>a.reverse()</code></td>
-      <td>Retourne le tableau.</td>
-    </tr>
-  </tbody>
-</table>
-
-<h2 id="functions">Les fonctions</h2>
-
-<p>Avec les objets, les fonctions sont les composants de base d'une bonne compréhension de JavaScript. La fonction la plus basique n'a rien de compliqué :</p>
-
-<pre class="brush: js">
-function ajoute(x, y) {
-  let total = x + y;
-  return total;
-}
-</pre>
-
-<p>Ceci représente tout ce qu'il y a à savoir à propos des fonctions basiques. Une fonction JavaScript peut recevoir 0 paramètre nommé ou plus. Son corps peut contenir autant d'instructions que vous le voulez et permet de déclarer des variables qui sont locales à la fonction. L'instruction <code>return</code> peut être utilisée pour renvoyer une valeur à tout moment, mettant ainsi fin à la fonction. Si aucune instruction <code>return</code> n'est utilisée (ou que l'instruction <code>return</code> n'est suivie d'aucune valeur), JavaScript renvoie <code>undefined</code>.</p>
-
-<p>On se rendra compte que les paramètres sont plus des indications qu'autre chose. Il est en effet possible d'appeler une fonction sans lui fournir les paramètres qu'elle attend, auquel cas ils vaudront <code>undefined</code>.</p>
-
-<pre class="brush: js">
-ajoute(); // NaN 
-// Il n'est pas possible d'additionner des variables indéfinies
-</pre>
-
-<p>Il est également possible de fournir plus de paramètres que demandé par la fonction :</p>
-
-<pre class="brush: js">
-ajoute(2, 3, 4); // 5
-// les deux premiers sont additionnés ; 4 est ignoré
-</pre>
-
-<p>Par définition les fonctions ont accès à des variables supplémentaires à l'intérieur de leur corps, appelée <a href="/fr/docs/Web/JavaScript/Reference/Functions/arguments"><code>arguments</code></a>. Il s'agit d'un objet semblable à un tableau qui contient toutes les valeurs reçues par la fonction. Réécrivons la fonction <code>ajoute</code> pour recevoir autant de valeurs qu'on veut :</p>
-
-<pre class="brush: js">function ajoute() {
-  let somme = 0;
-  for (let i = 0, j = arguments.length; i &lt; j; i++) {
-    somme += arguments[i];
-  }
-  return somme;
-}
-
-ajoute(2, 3, 4, 5); // 14
-</pre>
-
-<p>Ce n'est cependant pas vraiment plus utile que d'écrire <code>2 + 3 + 4 + 5</code>. Écrivons plutôt une fonction de calcul de moyenne :</p>
-
-<pre class="brush: js">
-function moyenne() {
-  let somme = 0;
-  for (let i = 0, j = arguments.length; i &lt; j; i++) {
-    somme += arguments[i];
-  }
-  return somme / arguments.length;
-}
-moyenne(2, 3, 4, 5); // 3.5
-</pre>
-
-<p>C'est assez utile, mais cela semble un peu verbeux. Pour réduire un peu plus ce code, nous pouvons envisager de substituer l'utilisation du tableau d'arguments par <a href="/fr/docs/Web/JavaScript/Reference/Functions/rest_parameters">la syntaxe du reste des paramètres</a>. De cette façon, nous pouvons passer un nombre quelconque d'arguments dans la fonction tout en gardant notre code minimal. <strong>L'opérateur du reste des paramètres</strong> est utilisé dans les listes de paramètres de fonctions avec le format : <strong>...variable</strong> et il inclura dans cette variable la liste entière des arguments non capturés avec lesquels la fonction a été appelée. Nous remplacerons également la boucle <strong>for</strong> par une boucle <strong>for...of</strong> pour retourner les valeurs dans notre variable.</p>
-
-<pre class="brush: js">
-function moyenne(...args) {
-  let somme = 0;
-  for (let valeur of args) {
-    somme += valeur;
-  }
-  return somme / args.length;
-}
-moyenne(2, 3, 4, 5); // 3.5
-</pre>
-
-<p>Avec le reste des paramètres, dans l'exemple précédent, <code>args</code> contient tous les arguments passés à la fonction.</p>
-
-<p>Il est important de noter que, quel que soit l'endroit où est écrit l'opérateur du reste des paramètres au sein de la déclaration de fonction, il stockera tous les arguments écrits <em>après</em> mais pas avant. Autrement dit, <em>function avg(<strong>premiereValeur, </strong>...args)</em> stockera la première valeur passée à la fonction dans la variable <strong>firstValue</strong> et les autres arguments iront dans <strong>args</strong>.</p>
-
-<p>C'est très pratique, mais on rencontre un nouveau problème. La fonction <code>moyenne()</code> reçoit une liste de valeurs séparées par des virgules, mais comment fait-on si on souhaite trouver la moyenne des valeurs d'un tableau ?</p>
-
-<p>On pourrait simplement récrire la fonction comme ceci :</p>
-
-<pre class="brush: js">
-function moyenneTableau(arr) {
-  let somme = 0;
-  for (let i = 0, j = arr.length; i &lt; j; i++) {
-    somme += arr[i];
-  }
-  return somme / arr.length;
-}
-moyenneTableau([2, 3, 4, 5]); // 3.5
-</pre>
-
-<p>Mais ce serait bien si on pouvait réutiliser la fonction qu'on avait déjà créée. Par chance, JavaScript permet d'appeler une fonction et de lui donner un tableau de paramètres d'une longueur arbitraire, à l'aide de la méthode <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Function/apply"><code>apply()</code></a> de tout objet <code>Function</code>.</p>
-
-<pre class="brush: js">moyenne.apply(null, [2, 3, 4, 5]); // 3.5</pre>
-
-<p>Le second paramètre envoyé à <code>apply()</code> est le tableau à utiliser comme paramètre ; nous parlerons du premier plus tard. Cela permet de souligner le fait que les fonctions sont aussi des objets.</p>
-
-<p>On peut également utiliser <a href="/fr/docs/Web/JavaScript/Reference/Operators/Spread_syntax">l'opérateur de décomposition</a> pour l'appel et la définition de la fonction pour écrire, par exemple, <code>moyenne(...nombres)</code>.</p>
-
-<h3 id="anonymous_functions">Fonctions anonymes</h3>
-
-<p>JavaScript vous permet de créer des fonctions anonymes, c'est-à-dire des fonctions sans nom :</p>
-
-<pre class="brush: js">
-function() {
-  let somme = 0;
-  for (let i = 0, j = arguments.length; i &lt; j; i++) {
-    somme += arguments[i];
-  }
-  return somme / arguments.length;
-};
-</pre>
-
-<p>Mais une telle fonction anonyme n'est pas utile en soi, car sans nom, il n'y a aucun moyen d'appeler la fonction. En pratique, les fonctions anonymes sont donc généralement utilisées comme arguments pour d'autres fonctions ou sont rendues appelables en les assignant immédiatement à une variable qui peut être utilisée pour invoquer la fonction :</p>
-
-<pre class="brush: js">
-let moyenne = function() {
-  let somme = 0;
-  for (let i = 0, j = arguments.length; i &lt; j; i++) {
-    somme += arguments[i];
-  }
-  return somme / arguments.length;
-};
-</pre>
-
-<p>Cela rend la fonction anonyme invocable en appelant <code>moyenne()</code> avec des arguments — c'est-à-dire que c'est sémantiquement équivalent à déclarer la fonction en utilisant la forme nommée <code>fonction moyenne()</code>.</p>
-
-<p>Mais les fonctions anonymes peuvent être utiles même si elles ne sont jamais affectées à des variables ou transmises comme arguments à d'autres fonctions : JavaScript fournit un mécanisme permettant de déclarer et d'invoquer simultanément une fonction à l'aide d'une seule expression. Cela s'appelle une <a href="/fr/docs/Glossary/IIFE">expression de fonction invoquée immédiatement (<i>IIFE</i> pour l'acronyme anglais)</a>, et la syntaxe pour l'utiliser avec une fonction anonyme ressemble à ceci :</p>
-
-<pre class="brush: js">
-(function() {
-  // …
-})();
-</pre>
-
-<p>De plus amples détails sur les IIFE sont hors de portée de cet article d'introduction — mais un bon exemple de ce à quoi ils sont particulièrement utiles se trouve dans la section <a href="/fr/docs/Web/JavaScript/Closures#emulating_private_methods_with_closures">Émulation de méthodes privées avec des fermetures</a> de l'article <a href="/fr/docs/Web/JavaScript/Closures">Fermetures</a>.</p>
-
-<h3 id="recursive_functions">Fonctions récursives</h3>
-
-<p>JavaScript permet d'appeler des fonctions récursivement. C'est particulièrement utile lorsqu'on a affaire à des structures en arbre, comme c'est le cas dans le DOM du navigateur.</p>
-
-<pre class="brush: js">
-function countChars(elm) {
-  if (elm.nodeType == 3) { // TEXT_NODE
-    return elm.nodeValue.length;
-  }
-  let count = 0;
-  for (let i = 0, child; child = elm.childNodes[i]; i++) {
-    count += countChars(child);
-  }
-  return count;
-}
-</pre>
-
-<p>Cela met en évidence un problème potentiel avec les fonctions anonymes : comment les appeler de manière récursive si elles n'ont pas de nom ? JavaScript vous permet de nommer les expressions de fonctions pour cela. Vous pouvez utiliser des <a href="/fr/docs/Glossary/IIFE">IIFE (« Immediately Invoked Function Expressions » en anglais soit « Expressions de fonctions immédiatement invoquées » en français)</a> nommées, comme indiqué ci-dessous :</p>
-
-<pre class="brush: js">
-let charsInBody = (function counter(elm) {
-  if (elm.nodeType == 3) { // TEXT_NODE
-    return elm.nodeValue.length;
-  }
-  let count = 0;
-  for (let i = 0, child; child = elm.childNodes[i]; i++) {
-    count += counter(child);
-  }
-  return count;
-})(document.body);
-</pre>
-
-<p>Le nom fourni à l'expression de la fonction n'est disponible qu'au sein de la portée de la fonction. Cela permet au moteur JavaScript de faire des optimisations. Cela rend également le code plus lisible. Le nom apparaîtra également dans le débogueur et les piles d'appel, ce qui permettra de gagner du temps.</p>
-
-<p>En JavaScript, les fonctions sont également des objets. Il est donc possible de leur ajouter ou de modifier leurs propriétés.</p>
-
-<h2 id="custom_objects">Les objets personnalisés</h2>
-
-<div class="note">
-  <p><strong>Note :</strong> Pour une approche plus détaillée de la programmation orientée objet en JavaScript, voir l'<a href="/fr/docs/conflicting/Learn/JavaScript/Objects">Introduction à JavaScript orienté objet</a>.</p>
-</div>
-
-<p>Dans la programmation orientée objet classique, les objets sont des collections de données et de méthodes opérant sur ces données. Imaginons un objet personne avec les champs prénom et nom. Il y a deux manières d'afficher son nom complet : de la façon « prénom nom » ou de la façon « nom prénom ». À l'aide des fonctions et des objets vus précédemment, voici une manière de le faire :</p>
-
-<pre class="brush: js example-bad">
-function creerPersonne(prenom, nom) {
-  return {
-    prenom: prenom,
-    nom: nom
-  };
-}
-
-function personneNomComplet(personne) {
-  return personne.prenom + ' ' + personne.nom;
-}
-
-function personneNomCompletInverse(personne) {
-  return personne.nom + ' ' + personne.prenom;
-}
-
-let s = creerPersonne("Simon", "Willison");
-personneNomComplet(s); // Simon Willison
-personneNomCompletInverse(s); // Willison Simon
-</pre>
-
-<p>Ça fonctionne, mais c'est inutilement verbeux. On va se retrouver avec des dizaines de fonctions dans l'espace de noms global. Ce dont on aurait vraiment besoin, c'est d'une manière d'attacher une fonction à un objet. Comme les fonctions sont des objets, c'est facile :</p>
-
-<pre class="brush: js example-good">
-function creerPersonne(prenom, nom) {
-  return {
-    prenom: prenom,
-    nom: nom,
-    nomComplet: function() {
-      return this.prenom + ' ' + this.nom;
-    },
-    nomCompletInverse: function() {
-      return this.nom + ' ' + this.prenom;
-    }
-  };
-}
-
-let s = creerPersonne("Simon", "Willison")
-s.nomComplet(); // Simon Willison
-s.nomCompletInverse(); // Willison Simon
-</pre>
-
-<p>Il y a quelque chose que nous n'avons pas vu jusqu'à présent : le mot-clé <a href="/fr/docs/Web/JavaScript/Reference/Operators/this"><code>this</code></a>. Utilisé au sein d'une fonction, <code>this</code> fait référence à l'objet courant. Sa signification dépend de la façon dont la fonction a été appelée. Si elle a été appelée avec <a href="/fr/docs/Web/JavaScript/Reference/Operators/Object_initializer#accessing_properties">la notation utilisant le point ou les crochets</a> sur un objet, cet objet devient <code>this</code>. Si cette notation n'a pas été utilisée pour l'appel, <code>this</code> fera référence à l'objet global.</p>
-
-<p>C'est une source fréquente d'erreurs. Par exemple :</p>
-
-<pre class="brush: js">
-let s = creerPersonne("Simon", "Willison");
-let nomComplet = s.nomComplet;
-nomComplet(); // undefined undefined
-</pre>
-
-<p>Lorsqu'on appelle <code>nomComplet()</code> seul, sans utiliser <code>s.nomComplet()</code>, <code>this</code> est lié à l'objet global. Comme il n'y a pas de variables globales appelées <code>prenom</code> ou <code>nom</code>, on se retrouve avec <code>undefined</code> pour chacune.</p>
-
-<p>On peut se servir du mot-clé <code>this</code> pour améliorer notre fonction de construction :</p>
-
-<pre class="brush: js">
-function Personne(prenom, nom) {
-  this.prenom = prenom;
-  this.nom = nom;
-  this.nomComplet = function() {
-    return this.prenom + ' ' + this.nom;
-  }
-  this.nomCompletInverse = function() {
-    return this.nom + ' ' + this.prenom;
-  }
-}
-let s = new Personne("Simon", "Willison");
-</pre>
-
-<p>Nous avons utilisé un nouveau mot clé : <a href="/fr/docs/Web/JavaScript/Reference/Operators/new"><code>new</code></a>. <code>new</code> est très lié à <code>this</code>. Il crée un nouvel objet vide et appelle ensuite la fonction spécifiée, avec <code>this</code> pointant vers ce nouvel objet. On notera cependant que la fonction appelée avec ce <code>this</code> ne renvoie pas de valeur mais ne fait que modifier l'objet <code>this</code>. C'est l'opérateur <code>new</code> qui renvoie l'objet <code>this</code> à l'endroit de l'appel. Les fonctions prévues pour être appelées par <code>new</code> sont appelées des constructeurs. L'usage courant est de mettre la première lettre de ces fonctions en majuscule pour se souvenir de les appeler avec <code>new</code>.</p>
-
-<p>La fonction améliorée présente toujours le même écueil avec l'appel de <code>personneNomComplet()</code> seul.</p>
-
-<p>Nos objets <code>Personne</code> s'améliorent, mais il leur reste certaines aspérités pas très esthétiques. Chaque fois que l'on crée une personne, on crée deux nouveaux objets de fonctions en même temps. Ne serait-ce pas mieux si ce code était partagé ?</p>
-
-<pre class="brush: js">
-function personneNomComplet() {
-  return this.prenom + ' ' + this.nom;
-}
-
-function personneNomCompletInverse() {
-  return this.nom + ' ' + this.prenom;
-}
-
-function Personne(prenom, nom) {
-  this.prenom = prenom;
-  this.nom = nom;
-  this.nomComplet = personneNomComplet;
-  this.nomCompletInverse = personneNomCompletInverse;
-}
-</pre>
-
-<p>C'est mieux : on crée les fonctions une seule fois, et on leur assigne des références au sein du constructeur. Est-il possible de faire encore mieux que ça ? La réponse est oui :</p>
-
-<pre class="brush: js">
-function Personne(prenom, nom) {
-  this.prenom = prenom;
-  this.nom = nom;
-}
-
-Personne.prototype.nomComplet = function() {
-  return this.prenom + ', ' + this.nom;
-}
-
-Personne.prototype.nomCompletInverse = function() {
-  return this.nom + ', ' + this.prenom;
-}
-</pre>
-
-<p><code>Personne.prototype</code> est un objet partagé par toutes les instances de <code>Personne</code>. Il fait partie d'une chaîne de résolution (qui a un nom spécial, la « chaîne de prototypes ») : chaque fois que vous essayez d'accéder à une propriété de <code>Personne</code> qui n'est pas définie, JavaScript va vérifier <code>Personne.prototype</code> pour voir si cette propriété n'existe pas plutôt à cet endroit. Par conséquent, tout ce qui est assigné à <code>Personne.prototype</code> devient disponible à toutes les instances de ce constructeur via l'objet <code>this</code>.</p>
-
-<p>C'est un outil incroyablement puissant. JavaScript vous permet de modifier le prototype de quelque chose à tout moment dans votre programme, cela signifie qu'il est possible d'ajouter des méthodes supplémentaires à des objets existants lors de l'exécution :</p>
-
-<pre class="brush: js">
-let s = new Personne("Simon", "Willison");
-s.prenomEnMajuscules(); // TypeError on line 1: s.prenomEnMajuscules is not a function
-
-Personne.prototype.prenomEnMajuscules = function prenomEnMajuscules() {
-  return this.prenom.toUpperCase()
-}
-s.prenomEnMajuscules(); // "SIMON"
-</pre>
-
-<p>Il est également possible d'ajouter des choses aux prototypes de classes d'objets JavaScript prédéfinies. Ajoutons par exemple une méthode à <code>String</code> qui renvoie cette chaîne à l'envers :</p>
-
-<pre class="brush: js">
-let s = "Simon";
-s.inverse(); // TypeError on line 1: s.inverse is not a function
-
-String.prototype.inverse = function inverse() {
-  let r = "";
-  for (let i = this.length - 1; i &gt;= 0; i--) {
-    r += this[i];
-  }
-  return r;
-}
-s.inverse(); // "nomiS"
-</pre>
-
-<p>Notre nouvelle méthode fonctionne même sur les chaînes littérales !</p>
-
-<pre class="brush: js">"Ceci peut maintenant être inversé.".inverse() // ".ésrevni ertê tnanetniam tuep iceC"</pre>
-
-<p>Comme mentionné précédemment, le prototype fait partie d'une chaîne de prototypes. Le début de cette chaîne est <code>Object.prototype</code>, dont <code>toString()</code> fait partie des méthodes. C'est cette méthode qui est appelée quand vous essayez de représenter un objet sous la forme d'une chaîne. Elle sera utile pour déboguer nos objets <code>Personne</code> :</p>
-
-<pre class="brush: js">
-let s = new Personne("Simon", "Willison");
-s; // [object Object]
-
-Personne.prototype.toString = function() {
-  return '&lt;Personne : ' + this.nomComplet() + '&gt;';
-}
-s.toString(); // "&lt;Personne : Simon Willison&gt;"
-</pre>
-
-<p>Vous vous souvenez de la fonction <code>moyenne.apply()</code> qui avait un premier paramètre défini à <code>null</code> ? Nous pouvons en reparler à présent. Le premier paramètre d'<code>apply()</code> est l'objet qui doit être traité comme <code>this</code>. Par exemple, voici une implémentation de <code>new</code> :</p>
-
-<pre class="brush: js">
-function trivialNew(constructor, ...args) {
-  let o = {}; // Crée un objet
-  constructor.apply(o, ...args);
-  return o;
-}
-</pre>
-
-<p>Ce n'est pas une réplique exacte de <code>new</code> parce qu'elle n'initialise pas la chaîne de prototype. La méthode <code>apply()</code> est difficile à illustrer, ce n'est pas quelque chose qu'on utilise très souvent, mais c'est utile de savoir qu'elle existe. Dans ce fragment de code, on utilise le <a href="/fr/docs/Web/JavaScript/Reference/Functions/rest_parameters">reste des arguments</a>, représentés par <code>...args</code>. Comme son nom l'indique, cela représente le reste des arguments passés à la fonction.</p>
-
-<p>Appeler</p>
-
-<pre class="brush: js">let bill = trivialNew(Personne, ["William", "Orange"]);</pre>
-
-<p>est donc quasiment équivalent à :</p>
-
-<pre class="brush: js">let bill = new Personne("William", "Orange");</pre>
-
-<p><code>apply()</code> possède une fonction proche, appelée <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Function/call"><code>call</code></a>, qui permet de définir la valeur de <code>this</code> mais qui prend une liste d'arguments plutôt qu'un tableau.</p>
-
-<pre class="brush: js">
-function nomMajuscule() {
-  return this.nom.toUpperCase();
-}
-let s = new Personne("Simon", "Willison");
-nomMajuscule.call(s); // correspond à:
-s.nomMajuscule = nomMajuscule;
-s.nomMajuscule();
-</pre>
-
-<h3 id="inner_functions">Les fonctions internes</h3>
-
-<p>Comme nous l'avons déjà vu, les déclarations de fonctions JavaScript peuvent se trouver à l'intérieur d'autres fonctions. Un détail important des fonctions définies à l'intérieur d'autres fonctions est qu'elles peuvent accéder à des variables de leur fonction parente :</p>
-
-<pre class="brush: js">
-function parentFunc() {
-  let a = 1;
-  function fonctionImbriquee() {
-    let b = 4; // Inacessible depuis parentFunc()
-    return a + b;
-  }
-  return fonctionImbriquee(); // 5
-}</pre>
-
-<p>Cela peut s'avérer très utile dans l'écriture de code plus facilement maintenable. Si une fonction A dépend d'une ou deux autres fonctions B et C qui ne sont utiles à aucun autre endroit de votre code, on peut imbriquer ces fonctions utilitaires B et C à l'intérieur de la fonction A. Cela diminue le nombre de fonctions se trouvant dans la portée globale, ce qui est toujours une bonne chose.</p>
-
-<p>C'est également un bon moyen de se préserver de l'attrait trompeur des variables globales. Lorsqu'on écrit du code complexe, il est souvent tentant d'utiliser des variables globales pour partager des valeurs entre différentes fonctions, ce qui mène à du code difficile à maintenir. Les fonctions internes peuvent partager des variables avec leur parent, de sorte que vous pouvez utiliser ce mécanisme pour coupler des fonctions ensemble lorsque cela a un sens, sans pour autant polluer l'espace de noms global. Ce sont ainsi des «&nbsp;globales locales&nbsp;». Cette technique doit être utilisée parcimonieusement, mais il est utile de s'en souvenir.</p>
-
-<h2 id="closures">Les fermetures (<em>Closures</em>)</h2>
-
-<p>Cela nous amène à l'une des abstractions les plus spectaculaires que JavaScript a à nous offrir. C'est également un des concepts les plus déroutants. Que fait ce fragment de code ?</p>
-
-<pre class="brush: js">
-function creerAdditionneur(a) {
-  return function(b) {
-    return a + b;
-  }
-}
-let ajoute5 = creerAdditionneur(5);
-let ajoute20 = creerAdditionneur(20);
-ajoute5(6); // ?
-ajoute20(7); // ?
-</pre>
-
-<p>Le nom de la fonction <code>creerAdditionneur</code> devrait vous donner un indice : elle crée de nouveaux additionneurs sous forme de fonctions qui, quand elles sont appelées avec un paramètre, l'ajoutent à celui avec lequel elles ont été créées.</p>
-
-<p>Ce qui se passe ici est sensiblement la même chose qu'avec les fonctions internes dont nous avons parlé précédemment : une fonction définie à l'intérieur d'une autre fonction a accès aux variables de sa fonction extérieure. La seule différence ici est que la fonction extérieure a déjà renvoyé son résultat, et le bon sens semblerait vouloir être que ses variables locales n'existent plus. Mai<em>s</em> elles existent <em>encore</em> ; autrement les additionneurs présentés ci-dessus ne fonctionneraient pas. Ce n'est pas tout, il y a même deux « copies » différentes des variables locales de <code>creerAdditionneur</code> : une dans laquelle <code>a</code> vaut 5 et une autre dans laquelle <code>a</code> vaut 20. Quel est donc le résultat de ces appels de fonction ?</p>
-
-<pre class="brush: js">
-ajoute5(6); // renvoie 11
-ajoute20(7); // renvoie 27
-</pre>
-
-<p>Voici ce qui se passe en réalité. Lorsque JavaScript exécute une fonction, un objet de portée est créé pour conserver les variables locales créées au sein de cette fonction. Il est initialisé avec les variables passées en paramètres à la fonction. Cela ressemble à l'objet global dans lequel toutes les variables et fonctions globales se trouvent, mais avec quelques différences importantes : premièrement, un nouvel objet de portée est créé chaque fois qu'une fonction commence à s'exécuter, et deuxièmement, contrairement à l'objet global (qui est accessible via <code>this</code> et qui, dans le navigateur, correspond à l'objet <code>window</code>), on ne peut pas directement accéder à ces objets de portée depuis le code JavaScript. Il n'existe pas de mécanisme permettant de parcourir les propriétés de l'objet de la portée courante par exemple.</p>
-
-<p>Donc, quand <code>creerAdditionneur()</code> est appelée, une portée est créée avec une propriété : <code>a</code>, qui est l'argument passé à la fonction <code>creerAdditionneur()</code>. Celle-ci renvoie alors une fonction nouvellement créée. Normalement, le ramasse-miettes de JavaScript devrait supprimer l'objet de portée créé pour <code>creerAdditionneur()</code> à ce moment, mais la fonction renvoyée garde une référence vers cet objet de portée. Par conséquent, il ne sera pas supprimé par le ramasse-miettes tant qu'il y a toujours des références à l'objet de type fonction que <code>creerAdditionneur()</code> a renvoyé.</p>
-
-<p>Les objets de portée forment une chaîne appelée chaîne de portée, similaire à la chaîne de prototypes utilisée par le système d'objets de JavaScript.</p>
-
-<p>Une <strong>fermeture</strong> est la combinaison d'une fonction et de la portée de l'objet dans lequel elle a été créée. Les fermetures vous permettent de sauvegarder l'état — en tant que telles, elles peuvent souvent être utilisées à la place des objets. Vous pouvez trouver <a href="https://stackoverflow.com/questions/111102/how-do-javascript-closures-work">plusieurs excellentes introductions aux fermetures dans cet article</a>.</p>
diff --git a/files/fr/web/javascript/a_re-introduction_to_javascript/index.md b/files/fr/web/javascript/a_re-introduction_to_javascript/index.md
new file mode 100644
index 0000000000..962ace144f
--- /dev/null
+++ b/files/fr/web/javascript/a_re-introduction_to_javascript/index.md
@@ -0,0 +1,1026 @@
+---
+title: Une réintroduction à JavaScript
+slug: Web/JavaScript/A_re-introduction_to_JavaScript
+tags:
+  - CodingScripting
+  - Guide
+  - Intermediate
+  - Intro
+  - JavaScript
+  - Learn
+translation_of: Web/JavaScript/A_re-introduction_to_JavaScript
+original_slug: Web/JavaScript/Une_réintroduction_à_JavaScript
+---
+{{jsSidebar}}
+
+Pourquoi une réintroduction ? Parce que JavaScript est connu pour être source d'incompréhensions. Bien que souvent raillé comme étant un simple jouet, derrière sa simplicité désarmante se cachent certaines fonctionnalités de langage très puissantes. JavaScript est maintenant utilisé par un nombre incroyable d'applications de haut rang, ce qui montre qu'une connaissance approfondie de cette technologie est une compétence importante pour toute développeuse ou développeur web ou mobile.
+
+Il peut être utile de commencer avec un aperçu de l'histoire de ce langage. JavaScript a été créé en 1995 par Brendan Eich, alors ingénieur à Netscape. Ce langage est sorti au grand jour pour la première fois avec Netscape 2 au début de l'année 1996. Il était au départ censé s'appeler LiveScript, mais a été renommé par une décision marketing mal avisée dans le but de capitaliser sur la popularité du langage Java de Sun Microsystems, malgré le fait qu'ils n'aient que très peu en commun. Cela n'a jamais cessé d'être une source de confusion.
+
+Quelques mois plus tard, Microsoft a lancé avec Internet Explorer 3 une version du langage globalement compatible, appelée JScript. Quelques mois après, Netscape a soumis le langage à l'[Ecma International](https://www.ecma-international.org/), une organisation de normalisation européenne, ce qui a permis d'aboutir à la première édition du standard [ECMAScript](/fr/docs/Glossary/ECMAScript) en 1997. Ce standard a reçu une mise à jour importante appelée [ECMAScript edition 3](https://www.ecma-international.org/publications/standards/Ecma-262.htm) en 1999, et est resté relativement stable depuis. La quatrième édition a été abandonnée suite à des différends portants sur la complexité du langage. De nombreuses sections de la quatrième édition ont été utilisées pour servir de fondation à la cinquième édition d'ECMAScript, publiée en décembre 2009. La sixième édition, qui apporte des nouveautés majeures, a été publiée en juin 2015.
+
+> **Note :** Dans la suite de cet article et à des fins de simplicité, nous utiliserons les termes « JavaScript » et « ECMAScript » pour désigner la même chose.
+
+Contrairement à la plupart des langages de programmation, JavaScript n'a pas de concept d'entrée ou de sortie. Il est conçu pour s'exécuter comme un langage de script dans un environnement hôte, et c'est à cet environnement de fournir des mécanismes de communication avec le monde extérieur. L'environnement hôte le plus commun est un navigateur, mais des interpréteurs JavaScript existent également dans Adobe Acrobat, Photoshop, les images SVG, le moteur de widgets de Yahoo!, et même au sein d'environnements côté serveur tels que [Node.js](https://nodejs.org/). Cette liste ne se limite pas qu'à ces éléments et on retrouve également JavaScript dans les bases de données NoSQL telles que [Apache CouchDB](https://couchdb.apache.org/), les ordinateurs embarqués ou encore des environnements de bureaux comme [GNOME](https://www.gnome.org/) (l'une des interfaces graphiques les plus populaires des systèmes d'exploitation GNU/Linux), etc.
+
+## Aperçu
+
+JavaScript est un langage dynamique multi-paradigme : il dispose de différents types, opérateurs, objets natifs et méthodes. Sa syntaxe s'inspire des langages Java et C et de nombreuses structures de ces langages s'appliquent également à JavaScript. JavaScript permet la programmation orientée objet avec les prototypes (voir [l'héritage et la chaîne de prototypes](/fr/docs/Web/JavaScript/Inheritance_and_the_prototype_chain) et [les classes](/fr/docs/Web/JavaScript/Reference/Classes) apparues avec ES6/ES2015). JavaScript permet également la programmation fonctionnelle car ses fonctions sont des objets et on peut donc stocker ces fonctions dans des variables et les transmettre comme n'importe quel objet.
+
+Commençons par nous intéresser aux briques de base de tout langage : les types. Les programmes en JavaScript manipulent des valeurs, et ces valeurs appartiennent toutes à un type. Les types JavaScript sont :
+
+- Les nombres : [`Number`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Number)
+- Les grands entiers (_BigInt_) : [`BigInt`](/fr/docs/Web/JavaScript/Reference/Global_Objects/BigInt)
+- Les chaînes de caractères : [`String`](/fr/docs/Web/JavaScript/Reference/Global_Objects/String)
+- Les booléens : [`Boolean`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Boolean)
+- Les fonctions : [`Function`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Function)
+- Les objets : [`Object`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Object)
+- Les symboles : [`Symbol`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Symbol) (apparus avec la sixième édition d'ECMAScript, ES2015)
+
+On aura également [`undefined`](/fr/docs/Web/JavaScript/Reference/Global_Objects/undefined) et [`null`](/fr/docs/Web/JavaScript/Reference/Global_Objects/null), qui sont relativement étranges. Les [tableaux ou `Array`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array) permettent d'organiser des séries d'objets au sein d'un même objet. Les [dates (`Date`)](/fr/docs/Web/JavaScript/Reference/Global_Objects/Date) et les [expressions rationnelles (`RegExp`)](/fr/docs/Web/JavaScript/Reference/Global_Objects/RegExp) qui sont également des objets nativement disponibles en JavaScript. Afin d'être tout à fait précis, les fonctions sont aussi une sorte particulière d'objets, de sorte que le diagramme de types ressemble plutôt à ceci :
+
+- [`Number`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Number)
+- [`BigInt`](/fr/docs/Web/JavaScript/Reference/Global_Objects/BigInt)
+- [`String`](/fr/docs/Web/JavaScript/Reference/Global_Objects/String)
+- [`Boolean`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Boolean)
+- [`Symbol`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Symbol) (apparu avec la sixième édition d'ECMAScript, ES2015)
+- [`Object`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Object)
+
+  - [`Function`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Function)
+  - [`Array`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array)
+  - [`Date`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Date)
+  - [`RegExp`](/fr/docs/Web/JavaScript/Reference/Global_Objects/RegExp)
+
+- [`null`](/fr/docs/Web/JavaScript/Reference/Global_Objects/null)
+- [`undefined`](/fr/docs/Web/JavaScript/Reference/Global_Objects/undefined)
+
+Enfin, il y a également quelques types natifs pour gérer les exceptions : [`Error`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Error). Pour garder une approche simple, nous utiliserons la première de ces listes pour présenter les types.
+
+## Les nombres
+
+ECMAScript possède deux types numériques intégrés : **Number** et **BigInt**.
+
+Les nombres en JavaScript sont « des valeurs [au format IEEE 754 en double précision 64 bits](https://en.wikipedia.org/wiki/Double_precision_floating-point_format) », d'après la spécification. Cela permet de représenter les nombres entre -(2^53 − 1) et 2^53 − 1. Lorsqu'on fait référence (ici ou dans les autres articles) à des entiers, on parle généralement d'une représentation d'un entier avec une valeur de type Number. En effet, les valeurs Number ne sont pas strictement des entiers et il faut donc prendre quelques précautions :
+
+```js
+console.log(3 / 2);             // 1.5 et pas 1
+console.log(Math.floor(3 / 2)); // 1
+```
+
+Ainsi, un _entier apparent_ est en fait _implicitement un nombre à virgule flottante_.
+
+Aussi, faites attention à des choses comme :
+
+```js
+0.1 + 0.2 == 0.30000000000000004;
+```
+
+Dans la pratique, les valeurs entières sont traitées comme des entiers représentés sur 32 bits (certaines implémentations les stockent même ainsi tant qu'il n'y a pas besoin d'effectuer une opération valide pour un nombre mais pas pour un entier sur 32 bits). Cette représentation peut être importante pour les opérations binaires.
+
+Les [opérateurs arithmétiques](/fr/docs/Web/JavaScript/Reference/Operators#arithmetic_operators) standards sont gérés, dont l'addition, la soustraction, le reste arithmétique et ainsi de suite. Il existe également un objet natif, qui n'a pas été mentionné jusqu'à présent, appelé [`Math`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Math), qui permet de gérer certaines fonctions et constantes mathématiques plus avancées :
+
+```js
+Math.sin(3.5);
+let circonference = 2 * Math.PI * r;
+```
+
+On peut convertir une chaîne de caractères en un nombre entier à l'aide de la fonction intégrée [`parseInt()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/parseInt). Elle reçoit la base de conversion comme second paramètre, qui devrait toujours être fourni afin de lever une éventuelle ambiguïté :
+
+```js
+parseInt("123", 10); // 123
+parseInt("010", 10); //10
+```
+
+Si la base n'est pas indiquée, les résultats peuvent être surprenants dans les anciens navigateurs qui datent de 2013 ou avant où les chaînes commençant par `0` pouvaient ne pas être considérées comme exprimées en notation octale. À moins que vous ne soyez certain du format de votre chaîne de caractères, vous pouvez obtenir des résultats surprenants sur ces anciens navigateurs :
+
+```js
+parseInt("010");  //  8
+parseInt("0x10"); // 16
+```
+
+Cela se produit parce que la fonction [`parseInt()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/parseInt) a été implémentée pour traiter la première chaîne comme un nombre octal à cause du zéro initial et la seconde comme une représentation hexadécimale car commençant avec `0x`. Une telle notation hexadécimale peut toujours être utilisée mais la notation octale a été retirée.
+
+Si on souhaite convertir un nombre binaire en un entier, il suffit de changer la base :
+
+```js
+parseInt("11", 2); // 3
+```
+
+De la même manière, vous pouvez traiter les nombres à virgule flottante à l'aide de la fonction intégrée [`parseFloat()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/parseFloat), qui, à la différence de [`parseInt()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/parseInt), utilise toujours la base 10.
+
+On peut également utiliser l'opérateur unaire `+` pour convertir des valeurs en nombres :
+
+```js
++ "42";   // 42
++ "010";  // 10
++ "0x10"; // 16
+```
+
+Une valeur spéciale appelée [`NaN`](/fr/docs/Web/JavaScript/Reference/Global_Objects/NaN) (qui signifie « _Not a Number_ », soit « pas un nombre ») est renvoyée si la chaîne est non numérique :
+
+```js
+parseInt("coucou", 10); // NaN
+```
+
+`NaN` est « toxique » : si cette valeur est fournie en entrée pour n'importe quelle opération mathématique, le résultat sera également `NaN` :
+
+```js
+NaN + 5; // NaN
+```
+
+Cette valeur peut être détectée grâce à la fonction native [`Number.isNaN()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Number/isNaN) (qui fait [exactement ce que son nom indique](/fr/docs/Web/JavaScript/Reference/Global_Objects/Number/isNaN#description)) :
+
+```js
+Number.isNaN(NaN); // true
+Number.isNaN('bonjour'); // false
+Number.isNaN('1'); // false
+Number.isNaN(undefined); // false
+Number.isNaN({}); // false
+Number.isNaN([1]) // false
+Number.isNaN([1,2]) // false
+```
+
+Mais ne testez pas le `NaN` en utilisant la fonction globale [`isNaN()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/isNaN), [qui a un comportement peu intuitif](/fr/docs/Web/JavaScript/Reference/Global_Objects/isNaN#confusing_special-case_behavior) :
+
+```js
+isNaN('bonjour'); // true
+isNaN('1'); // false
+isNaN(undefined); // true
+isNaN({}); // true
+isNaN([1]) // false
+isNaN([1,2]) // true
+```
+
+JavaScript dispose également de valeur spéciales pour l'infini [`Infinity`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Infinity) et l'infini négatif (`-Infinity`) :
+
+```js
+1 / 0; // Infinity
+-1 / 0; // -Infinity
+```
+
+Il est possible de tester les valeurs `Infinity`, `-Infinity` et `NaN` à l'aide de la fonction native [`isFinite()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/isFinite) :
+
+```js
+isFinite(1/0); // false
+isFinite(-Infinity); // false
+isFinite(NaN); // false
+```
+
+> **Note :** Les fonctions [`parseFloat()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/parseFloat) et [`parseInt()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/parseInt) traitent une chaîne de caractères jusqu'à ce qu'elles atteignent un caractère qui n'est pas valide pour le format numérique indiqué, puis renvoient le nombre traité jusqu'à ce point. Cependant, l'opérateur "+" convertit simplement la chaîne à `NaN` à partir du moment où la chaîne contient le moindre caractère non valide. Vous pouvez tester ce comportement en manipulant la chaîne "10.2abc" avec chaque méthode dans la console afin de mieux comprendre les différences.
+
+## Les chaînes de caractères
+
+Les chaînes en JavaScript sont des séquences de [caractères Unicode](/fr/docs/Web/JavaScript/Guide/Grammar_and_types#unicode). Cette nouvelle devrait être bien accueillie par toute personne qui a déjà eu affaire à des problèmes d'internationalisation. Pour être plus précis, ce sont des séquences de codets UTF-16 : chaque codet est représenté par un nombre sur 16 bits et chaque caractère Unicode est représenté par 1 ou 2 codets.
+
+Si vous voulez représenter un seul caractère, il suffit d'utiliser une chaîne qui contient un seul caractère.
+
+Pour connaître la longueur d'une chaîne, utilisez sa propriété [`length`](/fr/docs/Web/JavaScript/Reference/Global_Objects/String/length) :
+
+```js
+"bonjour".length; // 7
+```
+
+C'est notre première rencontre avec les objets JavaScript ! Les chaînes peuvent également être utilisées comme des [objets](/fr/docs/Web/JavaScript/Reference/Global_Objects/Object). Elles possèdent aussi des [méthodes](/fr/docs/Web/JavaScript/Reference/Global_Objects/String#instance_methods) permettant de manipuler la chaîne et d'accéder à certaines informations sur cette chaîne de caractères :
+
+```js
+"bonjour".charAt(0); // "b"
+"coucou monde".replace("coucou", "bonjour"); // "bonjour monde"
+"bonjour".toUpperCase(); // "BONJOUR"
+```
+
+## Les autres types
+
+JavaScript fait la distinction entre [`null`](/fr/docs/Web/JavaScript/Reference/Global_Objects/null), qui est un objet de type `object` indiquant une absence délibérée de valeur, et [`undefined`](/fr/docs/Web/JavaScript/Reference/Global_Objects/undefined) qui est un objet de type `undefined` indiquant une variable non initialisée — c'est-à-dire qui n'a pas encore été assignée. Nous parlerons des variables plus tard, mais en JavaScript il est possible de déclarer une variable sans lui assigner de valeur. Si vous faites cela, le type de la variable sera `undefined` qui est une constante.
+
+JavaScript dispose d'un type booléen, dont les valeurs possibles sont `true` (vrai) et `false` (faux). L'un et l'autre sont des mots clés. Toute valeur peut être convertie en une valeur booléenne selon les règles suivantes :
+
+1.  `false`, `0`, la chaîne vide (`""`), `NaN`, `null` et `undefined` deviennent toutes `false`
+2.  toutes les autres valeurs deviennent `true`.
+
+Cette conversion peut être faite de manière explicite à l'aide de la fonction `Boolean()` :
+
+```js
+Boolean("");  // false
+Boolean(234); // true
+```
+
+Cependant, c'est rarement nécessaire, puisque JavaScript effectuera cette conversion silencieusement chaque fois qu'il attend une valeur booléenne, par exemple dans une instruction `if` (voir plus bas). Pour cette raison, on parle souvent simplement de valeurs « vraies » et « fausses » pour indiquer des valeurs devenant respectivement `true` et `false` lorsqu'elles sont converties en valeurs booléennes.
+
+Les opérations booléennes comme `&&` (_et_ logique), `||` (_ou_ logique) et `!` (_non_ logique) sont également gérées, comme on le verra plus bas.
+
+## Les variables
+
+En JavaScript, on peut déclarer de nouvelles variables grâce à l'un de ces trois mots-clés : [`let`](/fr/docs/Web/JavaScript/Reference/Statements/let), [`const`](/fr/docs/Web/JavaScript/Reference/Statements/const), ou [`var`](/fr/docs/Web/JavaScript/Reference/Statements/var "/en/JavaScript/Reference/Statements/var").
+
+**`let`** permet de déclarer des variables qui pourront être utilisées dans un bloc. La variable déclarée avec `let` est uniquement disponible dans le bloc qui contient la déclaration.
+
+```js
+let a;
+let nom = "Simon";
+```
+
+Voici un exemple de _portée_ avec **`let`** :
+
+```js
+// variableLet n'est pas utilisable ici
+
+for (let variableLet = 0; variableLet < 5; variableLet++) {
+  // variableLet peut être utilisée ici
+}
+
+// variableLet n'est pas utilisable ici
+```
+
+**`const`** permet de déclarer des variables dont la valeur ne doit pas changer. Une variable déclarée avec `const` est disponible dans le bloc dans lequel elle est déclarée.
+
+```js
+const Pi = 3.14; // la constante Pi est définie
+Pi = 1; // produira une erreur, car on ne peut pas modifier une variable constante.
+```
+
+**`var`** est le mot-clé le plus fréquemment utilisé pour déclarer des variables. Ce mot-clé était disponible avant `let` et `const` (c'était alors le seul qui permettait de déclarer des variables). Une variable qu'on déclare avec **`var`** est disponible dans la _fonction_ dans laquelle elle est déclarée.
+
+```js
+var a;
+var nom = "simon";
+```
+
+Voici un exemple pour étudier la portée d'une variable déclarée avec **`var`** :
+
+```js
+// variableVar *est* utilisable ici
+
+for (var variableVar = 0; variableVar < 5; variableVar++) {
+  // variableVar *est* également disponible ici
+}
+
+// variableVar *est* toujours disponible ici
+```
+
+Si on déclare une variable sans lui affecter aucune valeur, son type sera alors `undefined`.
+
+JavaScript possède une différence importante quant aux autres langages de programmation comme Java : en JavaScript, les blocs ne créent pas de portées pour les variables déclarées avec `var`, c'est la fonction qui gère la portée d'une variable déclarée avec `var`. Aussi, si une variable est définie avec `var` au sein d'une instruction conditionnelle avec `if`, cette variable sera visible depuis l'ensemble de la fonction. Avec ECMAScript 2015, les instructions de déclarations, [`let`](/fr/docs/Web/JavaScript/Reference/Statements/let) et [`const`](/fr/docs/Web/JavaScript/Reference/Statements/const) permettent de créer des variables dont la portée est limitée à celle du bloc qui l'englobe.
+
+## Les opérateurs
+
+Les opérateurs numériques en JavaScript sont `+`, `-`, `*`, `/` et `%` (qui est [l'opérateur de reste, à ne pas confondre avec le « modulo » mathématique](</fr/docs/conflicting/Web/JavaScript/Reference/Operators#remainder_()>)). Les valeurs sont affectées à l'aide de `=` et il existe également des opérateurs d'affectation combinés comme `+=` et `-=`. Ils sont équivalents à `x = x opérateur y`.
+
+```js
+x += 5;
+x = x + 5;
+```
+
+Vous pouvez utiliser `++` et `--` respectivement pour incrémenter et pour décrémenter. Ils peuvent être utilisés comme opérateurs préfixes ou suffixes.
+
+L'[opérateur `+` ](</fr/docs/conflicting/Web/JavaScript/Reference/Operators#addition_(.2b)>)permet également de concaténer des chaînes :
+
+```js
+"coucou" + " monde"; // "coucou monde"
+```
+
+Si vous additionnez une chaîne à un nombre (ou une autre valeur), tout est d'abord converti en une chaîne. Ceci pourrait vous surprendre :
+
+```js
+"3" + 4 + 5; // "345"
+3 + 4 + "5"; // "75"
+```
+
+L'ajout d'une chaîne vide à une valeur est une manière utile de convertir cette valeur une chaîne de caractères.
+
+Les [comparaisons](/fr/docs/Web/JavaScript/Reference/Operators) en JavaScript se font à l'aide des opérateurs `<`, `>`, `<=` et `>=`. Ceux-ci fonctionnent tant pour les chaînes que pour les nombres. L'égalité est un peu moins évidente. L'opérateur double égal effectue une équivalence si vous lui donnez des types différents, ce qui donne parfois des résultats intéressants :
+
+```js
+123 == "123"; // true
+1 == true;    // true
+```
+
+Pour éviter les conversions implicites avant les comparaisons, utilisez l'opérateur triple égal :
+
+```js
+123 === "123"; //false
+true === true; // true
+```
+
+Les opérateurs `!=` et `!==` existent également.
+
+JavaScript dispose également d'[opérations bit à bit](/fr/docs/Web/JavaScript/Reference/Operators).
+
+## Les structures de contrôle
+
+JavaScript dispose d'un ensemble de structures de contrôle similaires aux autres langages de la famille du langage C. Les structures conditionnelles sont présentes avec `if` et `else` ; lesquels peuvent être chaînés si nécessaire :
+
+```js
+let nom = "des chatons";
+if (nom == "des chiots") {
+  nom += " !";
+} else if (nom == "des chatons") {
+  nom += " !!";
+} else {
+  nom = " !" + nom;
+}
+nom == "des chatons !!"
+```
+
+JavaScript dispose également de boucles `while` et `do-while`. Les premières permettent de former des boucles basiques ; les secondes permettent de construire des boucles qui seront exécutées au moins une fois :
+
+```js
+while (true) {
+  // une boucle infinie !
+}
+
+let input;
+do {
+  input = getInput();
+} while (inputNonValide(input));
+```
+
+Les boucles [`for`](/fr/docs/Web/JavaScript/Reference/Statements/for) en JavaScript sont les mêmes qu'en C et en Java : elles permettent de fournir les informations de contrôle de la boucle en une seule ligne.
+
+```js
+for (let i = 0; i < 5; i++) {
+  // Sera exécutée cinq fois
+}
+```
+
+JavaScript permet également d'utiliser deux autres types de boucles : [`for`...`of`](/fr/docs/Web/JavaScript/Reference/Statements/for...of) :
+
+```js
+for (let element of tableau) {
+  // utiliser des instructions
+  // pour manipuler la valeur element
+}
+```
+
+et [`for`...`in`](/fr/docs/Web/JavaScript/Reference/Statements/for...in) :
+
+```js
+for (let propriete in objet) {
+  // utiliser des instructions
+  // pour manipuler la propriété de l'objet
+}
+```
+
+Les opérateurs `&&` et `||` utilisent une logique de court-circuit, ce qui signifie qu'ils exécuteront leur second opérande ou non selon la valeur du premier. C'est très utile pour vérifier qu'un objet n'est pas égal à `null` avant d'essayer d'accéder à ses attributs :
+
+```js
+let nom = o && o.getNom();
+```
+
+Ou pour définir des valeurs par défaut :
+
+```js
+let nom = autreNom || "nomParDéfaut";
+```
+
+De la même façon, le OU peut être utilisé pour mettre en cache des valeurs (lorsque les valeurs équivalentes à faux sont invalides) :
+
+```js
+let nom = nomEnCache || (nomEnCache = getNom());
+```
+
+JavaScript propose également un opérateur ternaire pour les assignations conditionnelles en une ligne :
+
+```js
+let permis = (age > 18) ? "oui" : "non";
+```
+
+L'instruction `switch` peut être utilisée pour différentes branches de code basées sur un nombre ou une chaîne :
+
+```js
+switch (action) {
+  case 'dessiner':
+    dessine();
+    break;
+  case 'manger':
+    mange();
+    break;
+  default:
+    neRienFaire();
+}
+```
+
+Si vous n'ajoutez pas d'instruction `break`, l'exécution va se poursuivre au niveau suivant. C'est rarement ce qui est désiré, en fait ça vaut même la peine de préciser dans un commentaire si la poursuite au cas suivant est délibérée pour aider au débogage :
+
+```js
+switch (a) {
+  case 1: // identique au cas 2
+  case 2:
+    mange();
+    break;
+  default:
+    nerienfaire();
+}
+```
+
+La clause `default` est optionnelle. Vous pouvez placer des expressions à la fois dans la partie `switch` et dans les cas à gérer si vous voulez ; les comparaisons entre les deux se font comme si on avait utilisé l'opérateur `===` :
+
+```js
+switch (1 + 3){
+  case 2 + 2:
+    yay();
+    break;
+  default:
+    nArriveJamais();
+}
+```
+
+## Les objets
+
+Les objets en JavaScript sont simplement des collections de paires nom-valeur. Dans ce sens, ils sont similaires aux :
+
+- dictionnaires en Python,
+- hashs en Perl et Ruby,
+- tables de hachage en C et C++,
+- HashMaps en Java,
+- tableaux associatifs en PHP.
+
+Le fait que cette structure de données soit si largement utilisée est un témoignage de sa polyvalence. Puisque tout (sauf les types de base) est un objet en JavaScript, tout programme écrit dans ce langage implique naturellement un grand nombre de recherches dans des tables de hachage. C'est une bonne chose que ce soit si rapide !
+
+La partie « nom » est une chaîne JavaScript, tandis que la partie « valeur » peut être n'importe quelle valeur JavaScript, y compris d'autres objets. Cela permet de construire des structures de données de n'importe quel niveau de complexité.
+
+Il existe deux façons très simples pour créer un objet vide :
+
+```js
+let obj = new Object();
+```
+
+Et :
+
+```js
+let obj = {};
+```
+
+Ils sont sémantiquement équivalents ; la seconde écriture est appelée syntaxe littérale d'objet et est plus pratique. Cette syntaxe est également au cœur du format JSON et devrait être privilégiée à tout moment.
+
+La syntaxe littérale pour écrire un objet peut être utilisée afin d'initialiser tout un objet :
+
+```js
+let obj = {
+  name: 'Carotte',
+  _for: 'Max', // Le mot "for" est un mot réservé, utilisez plutôt "_for".
+  details: {
+    color: 'orange',
+    size: 12
+  }
+};
+```
+
+L'accès aux attributs peut être enchaîné :
+
+```js
+obj.details.color; // orange
+obj['details']['size']; // 12
+```
+
+L'exemple suivant crée un prototype d'objet (`Person`) et une instance de ce prototype (`you`).
+
+```js
+function Person(name, age) {
+  this.name = name;
+  this.age = age;
+}
+
+// Définir un objet
+let you = new Person('You', 24);
+// Nous créons une nouvelle personne nommée "You" âgée de 24 ans.
+```
+
+**Une fois l'objet créé**, on peut accéder à ses propriétés de l'une des deux manières suivantes :
+
+```js
+// notation par points
+obj.name = 'Simon';
+let name = obj.name;
+```
+
+Et…
+
+```js
+// notation entre crochets
+obj['name'] = 'Simon';
+let name = obj['name'];
+// on peut utiliser une variable pour définir une clé
+let user = prompt('quelle clé ?');
+obj[user] = prompt('quelle valeur ?');
+```
+
+Ces deux méthodes sont également sémantiquement équivalentes. La seconde méthode a l'avantage de fournir le nom de l'attribut de l'objet dans une chaîne, ce qui signifie qu'il peut être calculé au moment de l'exécution (mais ce qui peut empêcher certaines optimisations du moteur JavaScript). Elle peut également être utilisée pour définir et lire des propriétés dont les noms sont des [mots réservés](/fr/docs/Web/JavaScript/Reference/Lexical_grammar#keywords) :
+
+```js
+obj.for = "Simon"; // erreur de syntaxe, car "for" est un mot réservé
+obj["for"] = "Simon"; // fonctionne très bien
+```
+
+> **Note :** À partir d'ECMAScript 5, les mots réservés peuvent être utilisés comme noms de propriétés d'objets « en vrac ». Cela signifie qu'ils n'ont pas besoin d'être « habillés » de guillemets lors de la définition des littéraux d'objet. Voir [la spécification ES5](https://es5.github.io/#x7.6.1).
+
+Pour en savoir plus sur les objets et les prototypes, voir [`Object.prototype`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Object). Pour une explication des prototypes d'objets et des chaînes de prototypes, voir [l'héritage et la chaîne de prototypes](/fr/docs/Web/JavaScript/Inheritance_and_the_prototype_chain).
+
+> **Note :** À partir d'ECMAScript 2015, les clés des objets peuvent être définies par la variable en utilisant la notation entre parenthèses lors de sa création. `{[phoneType] : 12345}` est possible au lieu de simplement `var userPhone = {}; userPhone[phoneType] = 12345;`.
+
+## Les tableaux
+
+Les tableaux (_Arrays_) en JavaScript sont en fait un type spécial d'objets. Ils fonctionnent d'une façon tout à fait similaire aux objets normaux (on peut naturellement accéder aux propriétés numériques avec la syntaxe des crochets `[]`), mais ils ont également une propriété magique appelée `length`. Elle vaut toujours un de plus que le plus grand indice dans le tableau.
+
+L'ancienne manière de créer des tableaux est celle-ci :
+
+```js
+let a = new Array();
+a[0] = "chien";
+a[1] = "chat";
+a[2] = "poule";
+a.length; // 3
+```
+
+Une notation plus pratique est la syntaxe littérale :
+
+```js
+let a = ["chien", "chat", "poule"];
+a.length; // 3
+```
+
+Notez que `array.length` ne correspond pas nécessairement au nombre d'éléments dans le tableau. Observez le code suivant :
+
+```js
+let a = ["chien", "chat", "poule"];
+a[100] = "renard";
+a.length // 101
+```
+
+Rappelez-vous : la longueur du tableau vaut simplement un de plus que l'indice le plus élevé.
+
+Si vous interrogez un élément de tableau non existant, vous obtenez `undefined` :
+
+```js
+typeof(a[90]); // undefined
+```
+
+Si vous prenez cela en compte, il est possible de parcourir un tableau à l'aide de la boucle suivante :
+
+```js
+for (let i = 0; i < a.length; i++) {
+  // Faire quelque chose avec a[i]
+}
+```
+
+ES2015 a introduit la boucle plus concise [`for`...`of`](/fr/docs/Web/JavaScript/Reference/Statements/for...of) pour les objets itérables tels que les tableaux :
+
+```js
+for (const currentValue of a) {
+  // Faire quelque chose avec currentValue
+}
+```
+
+Vous pourriez également itérer sur un tableau en utilisant une boucle [`for`...`in`](/fr/docs/Web/JavaScript/Reference/Statements/for...in), cependant cela n'itère pas sur les éléments du tableau, mais sur les indices du tableau. De plus, si quelqu'un ajoutait de nouvelles propriétés à `Array.prototype`, elles seraient également parcourues par une telle boucle. Par conséquent, ce type de boucle n'est pas recommandé pour les tableaux.
+
+Une autre façon d'itérer sur un tableau qui a été ajoutée avec ECMAScript 5 est [`forEach()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach) :
+
+```js
+['chien', 'chat', 'poule'].forEach(function(currentValue, index, array) {
+  // Faire quelque chose avec currentValue ou array[index]
+});
+```
+
+Si vous voulez ajouter un élément à un tableau, procédez comme suit :
+
+```js
+a.push(item);
+```
+
+Les tableaux sont accompagnés d'un certain nombre de méthodes. Voir également la [documentation complète sur les méthodes des tableaux](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array).
+
+| Nom de la méthode                                    | Description                                                                                                              |
+| ---------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------ |
+| `a.toString()`                                       | Renvoie une chaîne composée des différents éléments auxquels on a appliqué `toString()`, séparés par des virgules.       |
+| `a.toLocaleString()`                                 | Renvoie une chaîne composée des différents éléments auxquels on a appliqué `toLocaleString()`, séparés par des virgules. |
+| `a.concat(item1[, item2[, ...[, itemN]]])`           | Renvoie un nouveau tableau auquel on a ajouté les éléments.                                                              |
+| `a.join(sep)`                                        | Convertit le tableau en une chaîne dont les valeurs sont séparées par le paramètre `sep`.                                |
+| `a.pop()`                                            | Renvoie le dernier élément du tableau et le retire du tableau.                                                           |
+| `a.push(item1, ..., itemN)`                          | Ajoute un ou plusieurs éléments à la fin du tableau.                                                                     |
+| `a.shift()`                                          | Renvoie le premier élément du tableau et le retire du tableau.                                                           |
+| `a.unshift(item1[, item2[, ...[, itemN]]])`          | Ajoute des éléments au début du tableau.                                                                                 |
+| `a.slice(start[, end])`                              | Renvoie un sous-tableau.                                                                                                 |
+| `a.sort([cmpfn])`                                    | Trie le tableau (avec une fonction de comparaison optionnelle).                                                          |
+| `a.splice(start, delcount[, item1[, ...[, itemN]]])` | Permet de modifier un tableau en en supprimant une partie et en la remplaçant avec plus d'éléments.                      |
+| `a.reverse()`                                        | Retourne le tableau.                                                                                                     |
+
+## Les fonctions
+
+Avec les objets, les fonctions sont les composants de base d'une bonne compréhension de JavaScript. La fonction la plus basique n'a rien de compliqué :
+
+```js
+function ajoute(x, y) {
+  let total = x + y;
+  return total;
+}
+```
+
+Ceci représente tout ce qu'il y a à savoir à propos des fonctions basiques. Une fonction JavaScript peut recevoir 0 paramètre nommé ou plus. Son corps peut contenir autant d'instructions que vous le voulez et permet de déclarer des variables qui sont locales à la fonction. L'instruction `return` peut être utilisée pour renvoyer une valeur à tout moment, mettant ainsi fin à la fonction. Si aucune instruction `return` n'est utilisée (ou que l'instruction `return` n'est suivie d'aucune valeur), JavaScript renvoie `undefined`.
+
+On se rendra compte que les paramètres sont plus des indications qu'autre chose. Il est en effet possible d'appeler une fonction sans lui fournir les paramètres qu'elle attend, auquel cas ils vaudront `undefined`.
+
+```js
+ajoute(); // NaN 
+// Il n'est pas possible d'additionner des variables indéfinies
+```
+
+Il est également possible de fournir plus de paramètres que demandé par la fonction :
+
+```js
+ajoute(2, 3, 4); // 5
+// les deux premiers sont additionnés ; 4 est ignoré
+```
+
+Par définition les fonctions ont accès à des variables supplémentaires à l'intérieur de leur corps, appelée [`arguments`](/fr/docs/Web/JavaScript/Reference/Functions/arguments). Il s'agit d'un objet semblable à un tableau qui contient toutes les valeurs reçues par la fonction. Réécrivons la fonction `ajoute` pour recevoir autant de valeurs qu'on veut :
+
+```js
+function ajoute() {
+  let somme = 0;
+  for (let i = 0, j = arguments.length; i < j; i++) {
+    somme += arguments[i];
+  }
+  return somme;
+}
+
+ajoute(2, 3, 4, 5); // 14
+```
+
+Ce n'est cependant pas vraiment plus utile que d'écrire `2 + 3 + 4 + 5`. Écrivons plutôt une fonction de calcul de moyenne :
+
+```js
+function moyenne() {
+  let somme = 0;
+  for (let i = 0, j = arguments.length; i < j; i++) {
+    somme += arguments[i];
+  }
+  return somme / arguments.length;
+}
+moyenne(2, 3, 4, 5); // 3.5
+```
+
+C'est assez utile, mais cela semble un peu verbeux. Pour réduire un peu plus ce code, nous pouvons envisager de substituer l'utilisation du tableau d'arguments par [la syntaxe du reste des paramètres](/fr/docs/Web/JavaScript/Reference/Functions/rest_parameters). De cette façon, nous pouvons passer un nombre quelconque d'arguments dans la fonction tout en gardant notre code minimal. **L'opérateur du reste des paramètres** est utilisé dans les listes de paramètres de fonctions avec le format : **...variable** et il inclura dans cette variable la liste entière des arguments non capturés avec lesquels la fonction a été appelée. Nous remplacerons également la boucle **for** par une boucle **for...of** pour retourner les valeurs dans notre variable.
+
+```js
+function moyenne(...args) {
+  let somme = 0;
+  for (let valeur of args) {
+    somme += valeur;
+  }
+  return somme / args.length;
+}
+moyenne(2, 3, 4, 5); // 3.5
+```
+
+Avec le reste des paramètres, dans l'exemple précédent, `args` contient tous les arguments passés à la fonction.
+
+Il est important de noter que, quel que soit l'endroit où est écrit l'opérateur du reste des paramètres au sein de la déclaration de fonction, il stockera tous les arguments écrits _après_ mais pas avant. Autrement dit, _function avg(**premiereValeur,** ...args)_ stockera la première valeur passée à la fonction dans la variable **firstValue** et les autres arguments iront dans **args**.
+
+C'est très pratique, mais on rencontre un nouveau problème. La fonction `moyenne()` reçoit une liste de valeurs séparées par des virgules, mais comment fait-on si on souhaite trouver la moyenne des valeurs d'un tableau ?
+
+On pourrait simplement récrire la fonction comme ceci :
+
+```js
+function moyenneTableau(arr) {
+  let somme = 0;
+  for (let i = 0, j = arr.length; i < j; i++) {
+    somme += arr[i];
+  }
+  return somme / arr.length;
+}
+moyenneTableau([2, 3, 4, 5]); // 3.5
+```
+
+Mais ce serait bien si on pouvait réutiliser la fonction qu'on avait déjà créée. Par chance, JavaScript permet d'appeler une fonction et de lui donner un tableau de paramètres d'une longueur arbitraire, à l'aide de la méthode [`apply()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Function/apply) de tout objet `Function`.
+
+```js
+moyenne.apply(null, [2, 3, 4, 5]); // 3.5
+```
+
+Le second paramètre envoyé à `apply()` est le tableau à utiliser comme paramètre ; nous parlerons du premier plus tard. Cela permet de souligner le fait que les fonctions sont aussi des objets.
+
+On peut également utiliser [l'opérateur de décomposition](/fr/docs/Web/JavaScript/Reference/Operators/Spread_syntax) pour l'appel et la définition de la fonction pour écrire, par exemple, `moyenne(...nombres)`.
+
+### Fonctions anonymes
+
+JavaScript vous permet de créer des fonctions anonymes, c'est-à-dire des fonctions sans nom :
+
+```js
+function() {
+  let somme = 0;
+  for (let i = 0, j = arguments.length; i < j; i++) {
+    somme += arguments[i];
+  }
+  return somme / arguments.length;
+};
+```
+
+Mais une telle fonction anonyme n'est pas utile en soi, car sans nom, il n'y a aucun moyen d'appeler la fonction. En pratique, les fonctions anonymes sont donc généralement utilisées comme arguments pour d'autres fonctions ou sont rendues appelables en les assignant immédiatement à une variable qui peut être utilisée pour invoquer la fonction :
+
+```js
+let moyenne = function() {
+  let somme = 0;
+  for (let i = 0, j = arguments.length; i < j; i++) {
+    somme += arguments[i];
+  }
+  return somme / arguments.length;
+};
+```
+
+Cela rend la fonction anonyme invocable en appelant `moyenne()` avec des arguments — c'est-à-dire que c'est sémantiquement équivalent à déclarer la fonction en utilisant la forme nommée `fonction moyenne()`.
+
+Mais les fonctions anonymes peuvent être utiles même si elles ne sont jamais affectées à des variables ou transmises comme arguments à d'autres fonctions : JavaScript fournit un mécanisme permettant de déclarer et d'invoquer simultanément une fonction à l'aide d'une seule expression. Cela s'appelle une [expression de fonction invoquée immédiatement (_IIFE_ pour l'acronyme anglais)](/fr/docs/Glossary/IIFE), et la syntaxe pour l'utiliser avec une fonction anonyme ressemble à ceci :
+
+```js
+(function() {
+  // …
+})();
+```
+
+De plus amples détails sur les IIFE sont hors de portée de cet article d'introduction — mais un bon exemple de ce à quoi ils sont particulièrement utiles se trouve dans la section [Émulation de méthodes privées avec des fermetures](/fr/docs/Web/JavaScript/Closures#emulating_private_methods_with_closures) de l'article [Fermetures](/fr/docs/Web/JavaScript/Closures).
+
+### Fonctions récursives
+
+JavaScript permet d'appeler des fonctions récursivement. C'est particulièrement utile lorsqu'on a affaire à des structures en arbre, comme c'est le cas dans le DOM du navigateur.
+
+```js
+function countChars(elm) {
+  if (elm.nodeType == 3) { // TEXT_NODE
+    return elm.nodeValue.length;
+  }
+  let count = 0;
+  for (let i = 0, child; child = elm.childNodes[i]; i++) {
+    count += countChars(child);
+  }
+  return count;
+}
+```
+
+Cela met en évidence un problème potentiel avec les fonctions anonymes : comment les appeler de manière récursive si elles n'ont pas de nom ? JavaScript vous permet de nommer les expressions de fonctions pour cela. Vous pouvez utiliser des [IIFE (« Immediately Invoked Function Expressions » en anglais soit « Expressions de fonctions immédiatement invoquées » en français)](/fr/docs/Glossary/IIFE) nommées, comme indiqué ci-dessous :
+
+```js
+let charsInBody = (function counter(elm) {
+  if (elm.nodeType == 3) { // TEXT_NODE
+    return elm.nodeValue.length;
+  }
+  let count = 0;
+  for (let i = 0, child; child = elm.childNodes[i]; i++) {
+    count += counter(child);
+  }
+  return count;
+})(document.body);
+```
+
+Le nom fourni à l'expression de la fonction n'est disponible qu'au sein de la portée de la fonction. Cela permet au moteur JavaScript de faire des optimisations. Cela rend également le code plus lisible. Le nom apparaîtra également dans le débogueur et les piles d'appel, ce qui permettra de gagner du temps.
+
+En JavaScript, les fonctions sont également des objets. Il est donc possible de leur ajouter ou de modifier leurs propriétés.
+
+## Les objets personnalisés
+
+> **Note :** Pour une approche plus détaillée de la programmation orientée objet en JavaScript, voir l'[Introduction à JavaScript orienté objet](/fr/docs/conflicting/Learn/JavaScript/Objects).
+
+Dans la programmation orientée objet classique, les objets sont des collections de données et de méthodes opérant sur ces données. Imaginons un objet personne avec les champs prénom et nom. Il y a deux manières d'afficher son nom complet : de la façon « prénom nom » ou de la façon « nom prénom ». À l'aide des fonctions et des objets vus précédemment, voici une manière de le faire :
+
+```js example-bad
+function creerPersonne(prenom, nom) {
+  return {
+    prenom: prenom,
+    nom: nom
+  };
+}
+
+function personneNomComplet(personne) {
+  return personne.prenom + ' ' + personne.nom;
+}
+
+function personneNomCompletInverse(personne) {
+  return personne.nom + ' ' + personne.prenom;
+}
+
+let s = creerPersonne("Simon", "Willison");
+personneNomComplet(s); // Simon Willison
+personneNomCompletInverse(s); // Willison Simon
+```
+
+Ça fonctionne, mais c'est inutilement verbeux. On va se retrouver avec des dizaines de fonctions dans l'espace de noms global. Ce dont on aurait vraiment besoin, c'est d'une manière d'attacher une fonction à un objet. Comme les fonctions sont des objets, c'est facile :
+
+```js example-good
+function creerPersonne(prenom, nom) {
+  return {
+    prenom: prenom,
+    nom: nom,
+    nomComplet: function() {
+      return this.prenom + ' ' + this.nom;
+    },
+    nomCompletInverse: function() {
+      return this.nom + ' ' + this.prenom;
+    }
+  };
+}
+
+let s = creerPersonne("Simon", "Willison")
+s.nomComplet(); // Simon Willison
+s.nomCompletInverse(); // Willison Simon
+```
+
+Il y a quelque chose que nous n'avons pas vu jusqu'à présent : le mot-clé [`this`](/fr/docs/Web/JavaScript/Reference/Operators/this). Utilisé au sein d'une fonction, `this` fait référence à l'objet courant. Sa signification dépend de la façon dont la fonction a été appelée. Si elle a été appelée avec [la notation utilisant le point ou les crochets](/fr/docs/Web/JavaScript/Reference/Operators/Object_initializer#accessing_properties) sur un objet, cet objet devient `this`. Si cette notation n'a pas été utilisée pour l'appel, `this` fera référence à l'objet global.
+
+C'est une source fréquente d'erreurs. Par exemple :
+
+```js
+let s = creerPersonne("Simon", "Willison");
+let nomComplet = s.nomComplet;
+nomComplet(); // undefined undefined
+```
+
+Lorsqu'on appelle `nomComplet()` seul, sans utiliser `s.nomComplet()`, `this` est lié à l'objet global. Comme il n'y a pas de variables globales appelées `prenom` ou `nom`, on se retrouve avec `undefined` pour chacune.
+
+On peut se servir du mot-clé `this` pour améliorer notre fonction de construction :
+
+```js
+function Personne(prenom, nom) {
+  this.prenom = prenom;
+  this.nom = nom;
+  this.nomComplet = function() {
+    return this.prenom + ' ' + this.nom;
+  }
+  this.nomCompletInverse = function() {
+    return this.nom + ' ' + this.prenom;
+  }
+}
+let s = new Personne("Simon", "Willison");
+```
+
+Nous avons utilisé un nouveau mot clé : [`new`](/fr/docs/Web/JavaScript/Reference/Operators/new). `new` est très lié à `this`. Il crée un nouvel objet vide et appelle ensuite la fonction spécifiée, avec `this` pointant vers ce nouvel objet. On notera cependant que la fonction appelée avec ce `this` ne renvoie pas de valeur mais ne fait que modifier l'objet `this`. C'est l'opérateur `new` qui renvoie l'objet `this` à l'endroit de l'appel. Les fonctions prévues pour être appelées par `new` sont appelées des constructeurs. L'usage courant est de mettre la première lettre de ces fonctions en majuscule pour se souvenir de les appeler avec `new`.
+
+La fonction améliorée présente toujours le même écueil avec l'appel de `personneNomComplet()` seul.
+
+Nos objets `Personne` s'améliorent, mais il leur reste certaines aspérités pas très esthétiques. Chaque fois que l'on crée une personne, on crée deux nouveaux objets de fonctions en même temps. Ne serait-ce pas mieux si ce code était partagé ?
+
+```js
+function personneNomComplet() {
+  return this.prenom + ' ' + this.nom;
+}
+
+function personneNomCompletInverse() {
+  return this.nom + ' ' + this.prenom;
+}
+
+function Personne(prenom, nom) {
+  this.prenom = prenom;
+  this.nom = nom;
+  this.nomComplet = personneNomComplet;
+  this.nomCompletInverse = personneNomCompletInverse;
+}
+```
+
+C'est mieux : on crée les fonctions une seule fois, et on leur assigne des références au sein du constructeur. Est-il possible de faire encore mieux que ça ? La réponse est oui :
+
+```js
+function Personne(prenom, nom) {
+  this.prenom = prenom;
+  this.nom = nom;
+}
+
+Personne.prototype.nomComplet = function() {
+  return this.prenom + ', ' + this.nom;
+}
+
+Personne.prototype.nomCompletInverse = function() {
+  return this.nom + ', ' + this.prenom;
+}
+```
+
+`Personne.prototype` est un objet partagé par toutes les instances de `Personne`. Il fait partie d'une chaîne de résolution (qui a un nom spécial, la « chaîne de prototypes ») : chaque fois que vous essayez d'accéder à une propriété de `Personne` qui n'est pas définie, JavaScript va vérifier `Personne.prototype` pour voir si cette propriété n'existe pas plutôt à cet endroit. Par conséquent, tout ce qui est assigné à `Personne.prototype` devient disponible à toutes les instances de ce constructeur via l'objet `this`.
+
+C'est un outil incroyablement puissant. JavaScript vous permet de modifier le prototype de quelque chose à tout moment dans votre programme, cela signifie qu'il est possible d'ajouter des méthodes supplémentaires à des objets existants lors de l'exécution :
+
+```js
+let s = new Personne("Simon", "Willison");
+s.prenomEnMajuscules(); // TypeError on line 1: s.prenomEnMajuscules is not a function
+
+Personne.prototype.prenomEnMajuscules = function prenomEnMajuscules() {
+  return this.prenom.toUpperCase()
+}
+s.prenomEnMajuscules(); // "SIMON"
+```
+
+Il est également possible d'ajouter des choses aux prototypes de classes d'objets JavaScript prédéfinies. Ajoutons par exemple une méthode à `String` qui renvoie cette chaîne à l'envers :
+
+```js
+let s = "Simon";
+s.inverse(); // TypeError on line 1: s.inverse is not a function
+
+String.prototype.inverse = function inverse() {
+  let r = "";
+  for (let i = this.length - 1; i >= 0; i--) {
+    r += this[i];
+  }
+  return r;
+}
+s.inverse(); // "nomiS"
+```
+
+Notre nouvelle méthode fonctionne même sur les chaînes littérales !
+
+```js
+"Ceci peut maintenant être inversé.".inverse() // ".ésrevni ertê tnanetniam tuep iceC"
+```
+
+Comme mentionné précédemment, le prototype fait partie d'une chaîne de prototypes. Le début de cette chaîne est `Object.prototype`, dont `toString()` fait partie des méthodes. C'est cette méthode qui est appelée quand vous essayez de représenter un objet sous la forme d'une chaîne. Elle sera utile pour déboguer nos objets `Personne` :
+
+```js
+let s = new Personne("Simon", "Willison");
+s; // [object Object]
+
+Personne.prototype.toString = function() {
+  return '<Personne : ' + this.nomComplet() + '>';
+}
+s.toString(); // "<Personne : Simon Willison>"
+```
+
+Vous vous souvenez de la fonction `moyenne.apply()` qui avait un premier paramètre défini à `null` ? Nous pouvons en reparler à présent. Le premier paramètre d'`apply()` est l'objet qui doit être traité comme `this`. Par exemple, voici une implémentation de `new` :
+
+```js
+function trivialNew(constructor, ...args) {
+  let o = {}; // Crée un objet
+  constructor.apply(o, ...args);
+  return o;
+}
+```
+
+Ce n'est pas une réplique exacte de `new` parce qu'elle n'initialise pas la chaîne de prototype. La méthode `apply()` est difficile à illustrer, ce n'est pas quelque chose qu'on utilise très souvent, mais c'est utile de savoir qu'elle existe. Dans ce fragment de code, on utilise le [reste des arguments](/fr/docs/Web/JavaScript/Reference/Functions/rest_parameters), représentés par `...args`. Comme son nom l'indique, cela représente le reste des arguments passés à la fonction.
+
+Appeler
+
+```js
+let bill = trivialNew(Personne, ["William", "Orange"]);
+```
+
+est donc quasiment équivalent à :
+
+```js
+let bill = new Personne("William", "Orange");
+```
+
+`apply()` possède une fonction proche, appelée [`call`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Function/call), qui permet de définir la valeur de `this` mais qui prend une liste d'arguments plutôt qu'un tableau.
+
+```js
+function nomMajuscule() {
+  return this.nom.toUpperCase();
+}
+let s = new Personne("Simon", "Willison");
+nomMajuscule.call(s); // correspond à:
+s.nomMajuscule = nomMajuscule;
+s.nomMajuscule();
+```
+
+### Les fonctions internes
+
+Comme nous l'avons déjà vu, les déclarations de fonctions JavaScript peuvent se trouver à l'intérieur d'autres fonctions. Un détail important des fonctions définies à l'intérieur d'autres fonctions est qu'elles peuvent accéder à des variables de leur fonction parente :
+
+```js
+function parentFunc() {
+  let a = 1;
+  function fonctionImbriquee() {
+    let b = 4; // Inacessible depuis parentFunc()
+    return a + b;
+  }
+  return fonctionImbriquee(); // 5
+}
+```
+
+Cela peut s'avérer très utile dans l'écriture de code plus facilement maintenable. Si une fonction A dépend d'une ou deux autres fonctions B et C qui ne sont utiles à aucun autre endroit de votre code, on peut imbriquer ces fonctions utilitaires B et C à l'intérieur de la fonction A. Cela diminue le nombre de fonctions se trouvant dans la portée globale, ce qui est toujours une bonne chose.
+
+C'est également un bon moyen de se préserver de l'attrait trompeur des variables globales. Lorsqu'on écrit du code complexe, il est souvent tentant d'utiliser des variables globales pour partager des valeurs entre différentes fonctions, ce qui mène à du code difficile à maintenir. Les fonctions internes peuvent partager des variables avec leur parent, de sorte que vous pouvez utiliser ce mécanisme pour coupler des fonctions ensemble lorsque cela a un sens, sans pour autant polluer l'espace de noms global. Ce sont ainsi des « globales locales ». Cette technique doit être utilisée parcimonieusement, mais il est utile de s'en souvenir.
+
+## Les fermetures (_Closures_)
+
+Cela nous amène à l'une des abstractions les plus spectaculaires que JavaScript a à nous offrir. C'est également un des concepts les plus déroutants. Que fait ce fragment de code ?
+
+```js
+function creerAdditionneur(a) {
+  return function(b) {
+    return a + b;
+  }
+}
+let ajoute5 = creerAdditionneur(5);
+let ajoute20 = creerAdditionneur(20);
+ajoute5(6); // ?
+ajoute20(7); // ?
+```
+
+Le nom de la fonction `creerAdditionneur` devrait vous donner un indice : elle crée de nouveaux additionneurs sous forme de fonctions qui, quand elles sont appelées avec un paramètre, l'ajoutent à celui avec lequel elles ont été créées.
+
+Ce qui se passe ici est sensiblement la même chose qu'avec les fonctions internes dont nous avons parlé précédemment : une fonction définie à l'intérieur d'une autre fonction a accès aux variables de sa fonction extérieure. La seule différence ici est que la fonction extérieure a déjà renvoyé son résultat, et le bon sens semblerait vouloir être que ses variables locales n'existent plus. Mai*s* elles existent _encore_ ; autrement les additionneurs présentés ci-dessus ne fonctionneraient pas. Ce n'est pas tout, il y a même deux « copies » différentes des variables locales de `creerAdditionneur` : une dans laquelle `a` vaut 5 et une autre dans laquelle `a` vaut 20. Quel est donc le résultat de ces appels de fonction ?
+
+```js
+ajoute5(6); // renvoie 11
+ajoute20(7); // renvoie 27
+```
+
+Voici ce qui se passe en réalité. Lorsque JavaScript exécute une fonction, un objet de portée est créé pour conserver les variables locales créées au sein de cette fonction. Il est initialisé avec les variables passées en paramètres à la fonction. Cela ressemble à l'objet global dans lequel toutes les variables et fonctions globales se trouvent, mais avec quelques différences importantes : premièrement, un nouvel objet de portée est créé chaque fois qu'une fonction commence à s'exécuter, et deuxièmement, contrairement à l'objet global (qui est accessible via `this` et qui, dans le navigateur, correspond à l'objet `window`), on ne peut pas directement accéder à ces objets de portée depuis le code JavaScript. Il n'existe pas de mécanisme permettant de parcourir les propriétés de l'objet de la portée courante par exemple.
+
+Donc, quand `creerAdditionneur()` est appelée, une portée est créée avec une propriété : `a`, qui est l'argument passé à la fonction `creerAdditionneur()`. Celle-ci renvoie alors une fonction nouvellement créée. Normalement, le ramasse-miettes de JavaScript devrait supprimer l'objet de portée créé pour `creerAdditionneur()` à ce moment, mais la fonction renvoyée garde une référence vers cet objet de portée. Par conséquent, il ne sera pas supprimé par le ramasse-miettes tant qu'il y a toujours des références à l'objet de type fonction que `creerAdditionneur()` a renvoyé.
+
+Les objets de portée forment une chaîne appelée chaîne de portée, similaire à la chaîne de prototypes utilisée par le système d'objets de JavaScript.
+
+Une **fermeture** est la combinaison d'une fonction et de la portée de l'objet dans lequel elle a été créée. Les fermetures vous permettent de sauvegarder l'état — en tant que telles, elles peuvent souvent être utilisées à la place des objets. Vous pouvez trouver [plusieurs excellentes introductions aux fermetures dans cet article](https://stackoverflow.com/questions/111102/how-do-javascript-closures-work).
diff --git a/files/fr/web/javascript/about_javascript/index.html b/files/fr/web/javascript/about_javascript/index.html
deleted file mode 100644
index 3cdf73b473..0000000000
--- a/files/fr/web/javascript/about_javascript/index.html
+++ /dev/null
@@ -1,57 +0,0 @@
----
-title: À propos de JavaScript
-slug: Web/JavaScript/About_JavaScript
-tags:
-  - Débutant
-  - Intro
-  - JavaScript
-translation_of: Web/JavaScript/About_JavaScript
-original_slug: Web/JavaScript/A_propos
----
-<div>{{jsSidebar}}</div>
-
-<h2 id="Qu'est-ce_que_JavaScript">Qu'est-ce que JavaScript ?</h2>
-
-<p><a class="external" href="https://fr.wikipedia.org/wiki/JavaScript">JavaScript</a>®, souvent abrégé en JS, est le langage de script développé par Netscape utilisé dans des millions de pages web et d'applications serveur dans le monde entier. Le JavaScript de Netscape est une extension du langage de script standard ECMA-262 Edition 3 (ECMAScript), ne différant que légèrement des standards publiés. JavaScript est un langage léger, interprété, orienté objet (les fonctions étant des objets à part entière). Il est <a href="https://fr.wikipedia.org/wiki/Programmation_orient%C3%A9e_prototype">orienté prototype</a>, multi-paradigme étant dynamique, impératif et fonctionnel à la fois</p>
-
-<p>Contrairement à une conception populaire, <em>JavaScript n'est pas « du Java interprété »</em>. En quelques mots, JavaScript est un langage de script dynamique utilisant une construction d'objets basée sur des prototypes. La syntaxe de base est volontairement similaire à Java et à C++ pour réduire le nombre de concepts nouveaux à assimiler par un débutant. Les structures de contrôle, telles que les instructions <code>if</code>, les boucles <code>for</code> et <code>while</code>, les blocs <code>switch</code> et <code>try..catch</code> fonctionnent de la même manière que dans ces langages (ou presque).</p>
-
-<p>JavaScript peut être employé en tant que langage <a class="external" href="https://fr.wikipedia.org/wiki/Programmation_procédurale">procédural</a> ou <a class="external" href="https://fr.wikipedia.org/wiki/Programmation_orientée_objet">orienté objet</a>. Les objets sont créés par le programme et des méthodes et des propriétés lui sont attachés lors de l'exécution, contrairement aux définitions de classes courantes dans les langages compilés comme C++ et Java. Une fois qu'un objet a été construit, il peut servir de modèle (ou prototype) pour créer des objets similaires.</p>
-
-<p>Parmi les capacités dynamiques de JavaScript, on peut citer la construction d'objets à l'exécution, les listes de paramètres variables, les fonctions comme variables, la création des scripts dynamique (via <code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/eval">eval</a></code>), le parcours d'objets (via <a href="/fr/docs/Web/JavaScript/Reference/Instructions/for...in"><code>for ... in</code></a>), et la récupération du code source (les programmes JavaScript peuvent décompiler les corps de fonction pour retrouver le code source).</p>
-
-<p>Pour une description approfondie de la programation en JavaScript, consultez les liens de la section <a href="#Ressources_JavaScript">ressources JavaScript</a> ci-dessous.</p>
-
-<h2 id="Les_implémentations_de_JavaScript_disponibles">Les implémentations de JavaScript disponibles</h2>
-
-<p>Mozilla héberge deux implémentations de JavaScript. La première <strong>au monde</strong> est celle créée par Brendan Eich chez Netscape, et depuis mise à jour pour se conformer à la cinquième édition d'ECMA-262 (aussi appelé ECMAScript 5). Ce moteur, portant le nom de code <a href="/fr/docs/SpiderMonkey">SpiderMonkey</a>, est implémenté en C. Le moteur <a href="/fr/docs/Rhino">Rhino</a>, créé principalement par Norris Boyd (également chez Netscape) est une implémentation de JavaScript en Java. Comme SpiderMonkey, Rhino suit la spécification ECMA-262 Edition 5.</p>
-
-<p>Plusieurs optimisations ont été apportées au moteur JavaScript au fur et à mesure, parmi lesquelles on peut citer : TraceMonkey (Firefox 3.5), JägerMonkey (Firefox 4) et IonMonkey.</p>
-
-<p>En plus de ces implémentations, il existe d'autres moteurs JavaScript largement utilisés comme :</p>
-
-<ul>
- <li><a class="external external-icon" href="https://code.google.com/p/v8/" title="https://code.google.com/p/v8/">V8</a> de Google, qui est utilisé dans le navigateur Google Chrome et dans les versions récentes du navigateur Opéra.</li>
- <li><a class="external external-icon" href="https://www.webkit.org/projects/javascript/index.html" title="https://www.webkit.org/projects/javascript/index.html">JavaScriptCore</a> (SquirrelFish/Nitro) utilisé dans certains navigateurs WebKit tels que Safari, d'Apple.</li>
- <li><a class="external external-icon" href="https://my.opera.com/ODIN/blog/carakan-faq" title="https://my.opera.com/ODIN/blog/carakan-faq">Carakan</a> est utilisé dans les anciennes versions d'Opera.</li>
- <li>Le moteur <a class="external external-icon" href="https://en.wikipedia.org/wiki/Chakra_%28JScript_engine%29" title="https://en.wikipedia.org/wiki/Chakra_%28JScript_engine%29">Chakra</a> est utilisé dans Internet Explorer (bien que le langage qu'il implémente soit formellement appelé « JScript » pour des raisons de droits des marques).</li>
-</ul>
-
-<p>Chacun des moteurs JavaScript de Mozilla expose une API publique que les applications peuvent appeler pour utiliser JavaScript. L'environnement hôte le plus courant pour JavaScript est, de loin, un navigateur Web. Les navigateurs utilisent typiquement l'API publique pour créer des « objets hôtes », reflétant le <a href="/fr/docs/DOM">DOM</a> en JavaScript.</p>
-
-<p>Une autre utilisation courante de JavaScript est d'être un langage de script côté serveur (Web). Un serveur web JavaScript exposerait, lui, des objets hôtes représentant les requêtes HTTP et leurs réponses, qui peuvent ensuite être manipulées par un programme JavaScript pour générer dynamiquement des pages Web.</p>
-
-<h2 id="Ressources_JavaScript">Ressources JavaScript</h2>
-
-<dl>
- <dt><a href="/fr/docs/SpiderMonkey">SpiderMonkey</a></dt>
- <dd>Informations concernant l'intégration du moteur JavaScript en C/C++ (SpiderMonkey).</dd>
- <dt><a href="/fr/docs/Rhino">Rhino</a></dt>
- <dd>Informations concernant l'intégration du moteur JavaScript en Java (Rhino).</dd>
- <dt><a href="/fr/docs/Web/JavaScript/Language_Resources">Ressources sur le langage JavaScript</a></dt>
- <dd>Liens vers les standards JavaScript publiées.</dd>
- <dt><a href="/fr/docs/Web/JavaScript/Une_réintroduction_à_JavaScript">Une réintroduction à JavaScript</a></dt>
- <dd><a href="/fr/docs/Web/JavaScript/Guide">Le guide JavaScript</a> et <a href="/fr/docs/Web/JavaScript/Reference">la référence JavaScript</a></dd>
-</dl>
-
-<p>JavaScript® est une marque déposée d'Oracle aux États-Unis et dans d'autres pays.</p>
diff --git a/files/fr/web/javascript/about_javascript/index.md b/files/fr/web/javascript/about_javascript/index.md
new file mode 100644
index 0000000000..9df9e079ce
--- /dev/null
+++ b/files/fr/web/javascript/about_javascript/index.md
@@ -0,0 +1,53 @@
+---
+title: À propos de JavaScript
+slug: Web/JavaScript/About_JavaScript
+tags:
+  - Débutant
+  - Intro
+  - JavaScript
+translation_of: Web/JavaScript/About_JavaScript
+original_slug: Web/JavaScript/A_propos
+---
+{{jsSidebar}}
+
+## Qu'est-ce que JavaScript ?
+
+[JavaScript](https://fr.wikipedia.org/wiki/JavaScript)®, souvent abrégé en JS, est le langage de script développé par Netscape utilisé dans des millions de pages web et d'applications serveur dans le monde entier. Le JavaScript de Netscape est une extension du langage de script standard ECMA-262 Edition 3 (ECMAScript), ne différant que légèrement des standards publiés. JavaScript est un langage léger, interprété, orienté objet (les fonctions étant des objets à part entière). Il est [orienté prototype](https://fr.wikipedia.org/wiki/Programmation_orient%C3%A9e_prototype), multi-paradigme étant dynamique, impératif et fonctionnel à la fois
+
+Contrairement à une conception populaire, _JavaScript n'est pas « du Java interprété »_. En quelques mots, JavaScript est un langage de script dynamique utilisant une construction d'objets basée sur des prototypes. La syntaxe de base est volontairement similaire à Java et à C++ pour réduire le nombre de concepts nouveaux à assimiler par un débutant. Les structures de contrôle, telles que les instructions `if`, les boucles `for` et `while`, les blocs `switch` et `try..catch` fonctionnent de la même manière que dans ces langages (ou presque).
+
+JavaScript peut être employé en tant que langage [procédural](https://fr.wikipedia.org/wiki/Programmation_procédurale) ou [orienté objet](https://fr.wikipedia.org/wiki/Programmation_orientée_objet). Les objets sont créés par le programme et des méthodes et des propriétés lui sont attachés lors de l'exécution, contrairement aux définitions de classes courantes dans les langages compilés comme C++ et Java. Une fois qu'un objet a été construit, il peut servir de modèle (ou prototype) pour créer des objets similaires.
+
+Parmi les capacités dynamiques de JavaScript, on peut citer la construction d'objets à l'exécution, les listes de paramètres variables, les fonctions comme variables, la création des scripts dynamique (via [`eval`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/eval)), le parcours d'objets (via [`for ... in`](/fr/docs/Web/JavaScript/Reference/Instructions/for...in)), et la récupération du code source (les programmes JavaScript peuvent décompiler les corps de fonction pour retrouver le code source).
+
+Pour une description approfondie de la programation en JavaScript, consultez les liens de la section [ressources JavaScript](#Ressources_JavaScript) ci-dessous.
+
+## Les implémentations de JavaScript disponibles
+
+Mozilla héberge deux implémentations de JavaScript. La première **au monde** est celle créée par Brendan Eich chez Netscape, et depuis mise à jour pour se conformer à la cinquième édition d'ECMA-262 (aussi appelé ECMAScript 5). Ce moteur, portant le nom de code [SpiderMonkey](/fr/docs/SpiderMonkey), est implémenté en C. Le moteur [Rhino](/fr/docs/Rhino), créé principalement par Norris Boyd (également chez Netscape) est une implémentation de JavaScript en Java. Comme SpiderMonkey, Rhino suit la spécification ECMA-262 Edition 5.
+
+Plusieurs optimisations ont été apportées au moteur JavaScript au fur et à mesure, parmi lesquelles on peut citer : TraceMonkey (Firefox 3.5), JägerMonkey (Firefox 4) et IonMonkey.
+
+En plus de ces implémentations, il existe d'autres moteurs JavaScript largement utilisés comme :
+
+- [V8](https://code.google.com/p/v8/ "https://code.google.com/p/v8/") de Google, qui est utilisé dans le navigateur Google Chrome et dans les versions récentes du navigateur Opéra.
+- [JavaScriptCore](https://www.webkit.org/projects/javascript/index.html "https://www.webkit.org/projects/javascript/index.html") (SquirrelFish/Nitro) utilisé dans certains navigateurs WebKit tels que Safari, d'Apple.
+- [Carakan](https://my.opera.com/ODIN/blog/carakan-faq "https://my.opera.com/ODIN/blog/carakan-faq") est utilisé dans les anciennes versions d'Opera.
+- Le moteur [Chakra](https://en.wikipedia.org/wiki/Chakra_%28JScript_engine%29 "https://en.wikipedia.org/wiki/Chakra_%28JScript_engine%29") est utilisé dans Internet Explorer (bien que le langage qu'il implémente soit formellement appelé « JScript » pour des raisons de droits des marques).
+
+Chacun des moteurs JavaScript de Mozilla expose une API publique que les applications peuvent appeler pour utiliser JavaScript. L'environnement hôte le plus courant pour JavaScript est, de loin, un navigateur Web. Les navigateurs utilisent typiquement l'API publique pour créer des « objets hôtes », reflétant le [DOM](/fr/docs/DOM) en JavaScript.
+
+Une autre utilisation courante de JavaScript est d'être un langage de script côté serveur (Web). Un serveur web JavaScript exposerait, lui, des objets hôtes représentant les requêtes HTTP et leurs réponses, qui peuvent ensuite être manipulées par un programme JavaScript pour générer dynamiquement des pages Web.
+
+## Ressources JavaScript
+
+- [SpiderMonkey](/fr/docs/SpiderMonkey)
+  - : Informations concernant l'intégration du moteur JavaScript en C/C++ (SpiderMonkey).
+- [Rhino](/fr/docs/Rhino)
+  - : Informations concernant l'intégration du moteur JavaScript en Java (Rhino).
+- [Ressources sur le langage JavaScript](/fr/docs/Web/JavaScript/Language_Resources)
+  - : Liens vers les standards JavaScript publiées.
+- [Une réintroduction à JavaScript](/fr/docs/Web/JavaScript/Une_réintroduction_à_JavaScript)
+  - : [Le guide JavaScript](/fr/docs/Web/JavaScript/Guide) et [la référence JavaScript](/fr/docs/Web/JavaScript/Reference)
+
+JavaScript® est une marque déposée d'Oracle aux États-Unis et dans d'autres pays.
diff --git a/files/fr/web/javascript/closures/index.html b/files/fr/web/javascript/closures/index.html
deleted file mode 100644
index 85a39326f2..0000000000
--- a/files/fr/web/javascript/closures/index.html
+++ /dev/null
@@ -1,367 +0,0 @@
----
-title: Closures (Fermetures)
-slug: Web/JavaScript/Closures
-tags:
-  - Closure
-  - Intermédiaire
-  - JavaScript
-translation_of: Web/JavaScript/Closures
----
-<div>{{jsSidebar("Intermediate")}}</div>
-
-<p>Une <strong>fermeture </strong>est la paire formée d'une fonction et des références à son état environnant (<strong>l'environnement lexical</strong>). En d'autres termes, une fermeture donne accès à la portée d'une fonction externe à partir d'une fonction interne (on dit aussi que la fonction « capture son environnement »). En JavaScript, une fermeture est créée chaque fois qu'une fonction est créée.</p>
-
-<h2 id="Portée">Portée</h2>
-
-<p>Dans l'exemple suivant :</p>
-
-<pre class="brush: js">function init() {
-  var nom = "Mozilla"; // nom est une variable locale de init
-  function afficheNom() { // afficheNom est une fonction interne de init
-    console.log(nom); // ici nom est une variable libre (définie dans la fonction parente)
-  }
-  afficheNom();
-};
-init();</pre>
-
-<p>La fonction <code>init</code> créé une variable locale <code>nom</code> et une fonction interne <code>afficheNom</code>. La fonction interne est seulement visible de l'intérieur de <code>init</code>. Contrairement à <code>init</code>, <code>afficheNom</code> ne possède pas de variable locale propre, mais elle utilise la variable <code>nom</code> de la fonction parente (ceci dit <code>afficheNom</code> pourrait utiliser ses variables locales propres si elle en avait).</p>
-
-<p>{{JSFiddleEmbed("https://jsfiddle.net/78dg25ax/", "js,result", 250)}}</p>
-
-<p>Vous pouvez exécuter le code sur cette <a href="https://jsfiddle.net/4U5VD/">page</a> pour voir son fonctionnement. On a ici un exemple de portée lexicale : en JavaScript, la portée d'une variable est définie par son emplacement dans le code source (elle apparaît de façon <em>lexicale</em>), les fonctions imbriquées ont ainsi accès aux variables déclarées dans les portées parentes.</p>
-
-<h2 id="Fermeture">Fermeture</h2>
-
-<p>Étudions l'exemple suivant :</p>
-
-<pre class="brush: js">function creerFonction() {
-  var nom = "Mozilla";
-  function afficheNom() {
-    console.log(nom);
-  }
-  return afficheNom;
-}
-
-var maFonction = creerFonction();
-maFonction();
-</pre>
-
-<p>Ce code produit le même résultat que l'appel à <code>init()</code> étudié précédemment : "Mozilla" est affiché dans la console. L'intérêt de ce code est qu'une fermeture contenant la fonction <code>afficheNom</code> est renvoyée par la fonction parente, avant d'être exécutée.</p>
-
-<p>Le code continue à fonctionner, ce qui peut paraître contre-intuitif au regard de la syntaxe utilisée. Usuellement, les variables locales d'une fonction n'existent que pendant l'exécution d'une fonction. Une fois que <code>creerFonction()</code> a fini son exécution, on aurait pû penser que la variable <code>nom</code> n'est plus accessible. Cependant, le code fonctionne : en JavaScript, la variable est donc accessible d'une certaine façon.</p>
-
-<p>L'explication est la suivante : <code>maFonction</code> est une fermeture. La fermeture combine la fonction <code>afficheNom</code> et son environnement. Cet environnement est composé de toutes les variables locales accessibles (dans la portée) à la création de la fermeture. Ici <code>maFonction</code> est une fermeture qui contient la fonction <code>afficheNom</code> et une référence à la variable <code>var nom = "Mozilla"</code> qui existait lorsque la fermeture a été créée. L'instance de <code>afficheNom</code> conserve une référence à son environnement lexical, dans lequel <code>nom</code>  existe. Pour cette raison, lorsque <code>maFonction</code> est invoquée, la variable <code>nom</code> reste disponible et "Mozilla" est transmis à <code>console.log</code>.</p>
-
-<p>Voici un exemple un peu plus intéressant—une fonction <code>ajouterA</code> :</p>
-
-<pre class="brush: js">function ajouterA(x) {
-  return function(y) {
-    return x + y;
-  };
-};
-
-var ajouter_5 = ajouterA(5);
-var ajouter_10 = ajouterA(10);
-
-console.log(ajouter_5(2));  // 7
-console.log(ajouter_10(2)); // 12
-</pre>
-
-<p>On définit une fonction <code>ajouterA(x)</code> avec un seul argument <code>x</code> et qui renvoie une fonction anonyme. La fonction anonyme a un seul argument <code>y</code>, et renvoie la somme de <code>x</code> et <code>y</code>.</p>
-
-<p>La fonction <code>ajouterA</code> permet de créer des fermetures qui font la somme de leur argument et d'un nombre fixé. Dans l'exemple ci-dessus, on crée  <code>ajouter_5</code> et <code>ajouter_10</code>. Elles partagent la même fonction, mais des environnements différents. Dans <code>ajouter_5</code>, <code>x</code> vaut 5 ; dans <code>ajouter_10</code>, <code>x</code> vaut 10.</p>
-
-<h2 id="Les_fermetures_en_pratique">Les fermetures en pratique</h2>
-
-<p>On a vu la théorie décrivant les fermetures. Est-ce qu'elles sont utiles pour autant ? Une fermeture permet d'associer des données (l'environnement) avec une fonction qui agit sur ces données. On peut faire un parallèle avec la programmation orientée objet car les objets permettent d'associer des données (les propriétés) avec des méthodes.</p>
-
-<p>Ainsi, on peut utiliser une fermeture pour tout endroit où on utiliserait un objet et ce avec une seule méthode.</p>
-
-<p>Beaucoup de code JavaScript utilisé sur le Web gère des événements : on définit un comportement, puis on l'attache à un événement déclenché par l'utilisateur (tel un clic ou une frappe clavier). Notre code est généralement une fonction de rappel (ou <em>callback</em>) exécutée en réponse à l'événement.</p>
-
-<p>Voici un exemple concret : si on souhaite ajouter des boutons à une page afin d'ajuster la taille du texte, on pourrait définir la taille de police de l'élément <code>body</code> en pixels, et celles des autres éléments relativement à cette première taille grâce à l'unité <code>em</code> :</p>
-
-<pre class="brush: css">body {
-  font-family: Helvetica, Arial, sans-serif;
-  font-size: 12px;
-}
-
-h1 {
-  font-size: 1.5em;
-}
-h2 {
-  font-size: 1.2em;
-}
-</pre>
-
-<p>Les boutons vont ensuite changer la taille de la police de l'élément <code>body</code>, ce changement étant répercuté aux autres éléments grâce aux unités relatives.</p>
-
-<p>Voici le code JavaScript qui correspond :</p>
-
-<pre class="brush: js">function fabriqueRedimensionneur(taille) {
-  return function() {
-    document.body.style.fontSize = taille + 'px';
-  };
-};
-
-var taille12 = fabriqueRedimensionneur(12);
-var taille14 = fabriqueRedimensionneur(14);
-var taille16 = fabriqueRedimensionneur(16);
-</pre>
-
-<p><code>taille12</code>, <code>taille14</code>, et <code>taille16</code> sont désormais des fermetures qui peuvent, respectivement, redimensionner le texte de l'élément <code>body</code> à 12, 14, ou 16 pixels. On peut les attacher aux boutons de la façon suivantes :</p>
-
-<pre class="brush: js">document.getElementById('taille-12').onclick = taille12;
-document.getElementById('taille-14').onclick = taille14;
-document.getElementById('taille-16').onclick = taille16;
-</pre>
-
-<pre class="brush: html">&lt;a href="#" id="taille-12"&gt;12&lt;/a&gt;
-&lt;a href="#" id="taille-14"&gt;14&lt;/a&gt;
-&lt;a href="#" id="taille-16"&gt;16&lt;/a&gt;
-</pre>
-
-<p>{{JSFiddleEmbed("https://jsfiddle.net/vnkuZ/7726", "js,result", 200)}}</p>
-
-<h2 id="Émuler_des_méthodes_privées_avec_des_fermetures">Émuler des méthodes privées avec des fermetures</h2>
-
-<p>Certains langages de programmation, comme Java, permettent d'avoir des méthodes privées, c'est-à-dire qu'on ne peut les utiliser qu'au sein de la même classe.</p>
-
-<p>JavaScript ne permet pas de faire cela de façon native. En revanche, on peut émuler ce comportement grâce aux fermetures. Les méthodes privées ne sont pas seulement utiles en termes de restriction d'accès au code, elles permettent également de gérer un espace de nom (<em>namespace</em>) global qui isole les méthodes secondaires de l'interface publique du code ainsi rendu plus propre.</p>
-
-<p>Voici comment définir une fonction publique accédant à des fonctions et des variables privées en utilisant des fermetures. Cette façon de procéder est également connue comme le patron de conception <a href="https://en.wikipedia.org/wiki/Module_pattern">module</a> :</p>
-
-<pre class="brush: js">var compteur = (function() {
-  var compteurPrive = 0;
-  function changeValeur(val) {
-    compteurPrive += val;
-  }
-  return {
-    increment: function() {
-      changeValeur(1);
-    },
-    decrement: function() {
-      changeValeur(-1);
-    },
-    valeur: function() {
-      return compteurPrive;
-    }
-  };
-})();
-
-console.log(compteur.valeur()); /* Affiche 0 */
-compteur.increment();
-compteur.increment();
-console.log(compteur.valeur()); /* Affiche 2 */
-compteur.decrement();
-console.log(compteur.valeur()); /* Affiche 1 */
-</pre>
-
-<p>Il y a beaucoup de différences par rapport aux exemples précédents. Au lieu de retourner une simple fonction, on retourne un objet anonyme qui contient 3 fonctions. Et ces 3 fonctions partagent le même environnement. L'objet retourné est affecté à la variable <code>compteur</code>, et les 3 fonctions sont alors accessibles sous les noms <code>compteur.increment</code>, <code>compteur.decrement</code>, et <code>compteur.valeur</code>.</p>
-
-<p>L'environnement partagé vient du corps de la fonction anonyme qui est exécutée dès sa définition complète. L'environnement en question contient deux éléments privés : une variable <code>compteurPrive</code> et une fonction <code>changeValeur</code>. Aucun de ces deux éléments ne peut être utilisé en dehors de la fonction anonyme ; seules les trois fonctions renvoyées par la fonction anonyme sont publiques.</p>
-
-<p>Ces trois fonctions publiques sont des fermetures qui partagent le même environnement. Grâce à la portée lexicale, chacune a accès à<code> compteurPrive</code> et à <code>changeValeur</code>.</p>
-
-<p>On remarquera qu'on définit une fonction anonyme qui crée un compteur puis qu'on l'appelle immédiatement pour assigner le résultat à la variable <code>compteur</code>. On pourrait stocker cette fonction dans une variable puis l'appeler plusieurs fois afin de créer plusieurs compteurs.</p>
-
-<pre class="brush: js">var creerCompteur = function() {
-  var compteurPrive = 0;
-  function changeValeur(val) {
-    compteurPrive += val;
-  }
-  return {
-    increment: function() {
-      changeValeur(1);
-    },
-    decrement: function() {
-      changeValeur(-1);
-    },
-    valeur: function() {
-      return compteurPrive;
-    }
-  };
-};
-
-var compteur1 = creerCompteur();
-var compteur2 = creerCompteur();
-console.log(compteur1.valeur()); /* Affiche 0 */
-compteur1.increment();
-compteur1.increment();
-console.log(compteur1.valeur()); /* Affiche 2 */
-compteur1.decrement();
-console.log(compteur1.valeur()); /* Affiche 1 */
-console.log(compteur2.valeur()); /* Affiche 0 */
-</pre>
-
-<p>Ici on peut voir que chacun des deux compteurs est indépendant de l'autre. Un nouvel environnement est instancié à chaque appel <code>creerCompteur()</code>.</p>
-
-<p>L'utilisation de fermetures permet ainsi de bénéficier de certains concepts liés à la programmation orientée objet comme l'encapsulation et la dissimulation de données.</p>
-
-<h2 id="Les_fermetures_et_les_boucles_attention_au_mélange">Les fermetures et les boucles : attention au mélange</h2>
-
-<p>Avant que le mot clé <a href="/fr/docs/Web/JavaScript/Reference/Instructions/let"><code>let</code></a> ne soit introduit avec ECMAScript 2015, un problème se posait fréquemment lorsqu'on manipulait des fermetures au sein d'une boucle. Par exemple :</p>
-
-<pre class="brush: html">&lt;p id="aide"&gt;Des aides seront affichées ici&lt;/p&gt;
-&lt;p&gt;E-mail : &lt;input type="text" id="email" name="email"&gt;&lt;/p&gt;
-&lt;p&gt;Nom : &lt;input type="text" id="nom" name="nom"&gt;&lt;/p&gt;
-&lt;p&gt;Âge : &lt;input type="text" id="âge" name="âge"&gt;&lt;/p&gt;
-</pre>
-
-<pre class="brush: js">function afficherAide(aide) {
-  document.getElementById('aide').innerHTML = aide;
-}
-
-function preparerAide() {
-  var texteAide = [
-      {'id': 'email', 'aide': 'Votre adresse e-mail'},
-      {'id': 'nom', 'aide': 'Vos prénom et nom'},
-      {'id': 'âge', 'aide': 'Votre âge (plus de 16 ans requis)'}
-    ];
-
-  for (var i = 0; i &lt; texteAide.length; i++) {
-    var item = texteAide[i];
-    document.getElementById(item.id).onfocus = function() {
-      afficherAide(item.aide);
-    }
-  }
-}
-
-preparerAide();
-</pre>
-
-<p>{{JSFiddleEmbed("https://jsfiddle.net/v7gjv/8164/", "", 200)}}</p>
-
-<p>Lorsqu'on essaie ce code, on s'aperçoit qu'il ne fonctionne pas exactement comme on le souhaitait : en effet, quelque soit le champ sur lequel on se situe, c'est toujours le message d'aide concernant l'âge qui s'affiche.</p>
-
-<p>La cause de ce problème est que les fonctions attachées à <code>onfocus</code> sont des fermetures qui partagent le même environnement. À chaque itération de boucle, l'environnement de la fermeture créée contient une référence sur la même instance de la variable <code>item</code>. Ainsi, lorsque la fonction de rappel de <code>onfocus</code> est exécutée, la boucle a déjà été effectuée entièrement, et la variable <code>item</code> partagée par les trois fermetures pointe sur le dernier élément de <code>texteAide</code>.</p>
-
-<p>Une solution consiste à utiliser plus de fermetures et à appliquer une fabrique de fonction comme on a vu précédemment :</p>
-
-<pre class="brush: js">function afficheAide(aide) {
-  document.getElementById('aide').innerHTML = aide;
-}
-
-function creerCallbackAide(aide) {
-  return function() {
-    afficheAide(aide);
-  };
-}
-
-function prepareAide() {
-  var texteAide = [
-      {'id': 'email', 'aide': 'Votre adresse e-mail'},
-      {'id': 'nom', 'aide': 'Votre prénom et nom'},
-      {'id': 'âge', 'aide': 'Your age (you must be over 16)'}
-    ];
-
-  for (var i = 0; i &lt; texteAide.length; i++) {
-    var item = texteAide[i];
-    document.getElementById(item.id).onfocus = creerCallbackAide(item.aide);
-  }
-}
-
-prepareAide();
-</pre>
-
-<p>Voici une autre solution qui permet de ne pas utiliser plus de fermetures :</p>
-
-<pre class="brush: js">function afficheAide(aide) {
-  document.getElementById('aide').innerHTML = aide;
-}
-
-function prepareAide() {
-  var texteAide = [
-      {'id': 'email', 'aide': 'Votre adresse e-mail'},
-      {'id': 'nom', 'aide': 'Votre prénom et nom'},
-      {'id': 'âge', 'aide': 'Votre âge (vous devez être majeur)'}
-    ];
-
-  for (var i = 0; i &lt; texteAide.length; i++) {
-    let item = texteAide[i];
-    document.getElementById(item.id).onfocus = function() {
-      afficheAide(item.aide);
-    }
-  }
-}
-
-prepareAide();</pre>
-
-<p>Dans ce fragment de code, nous avons utilisé <code>let</code> au lieu de <code>var</code> afin que chaque fermeture soit liée avec les variable de bloc.</p>
-
-<p>{{JSFiddleEmbed("https://jsfiddle.net/v7gjv/9573/", "", 300)}}</p>
-
-<p>Autrement, on aurait pu utiliser <code>forEach()</code> afin de parcourir le tableau <code>texteAide</code> et attacher un gestionnaire d'évènement sur chaque {{htmlelement("div")}} :</p>
-
-<pre class="brush: js">function afficheAide(aide) {
-  document.getElementById('aide').innerHTML = aide;
-}
-
-function prepareAide() {
-  var texteAide = [
-      {'id': 'email', 'aide': 'Votre adresse e-mail'},
-      {'id': 'nom', 'aide': 'Votre prénom et nom'},
-      {'id': 'âge', 'aide': 'Votre âge (vous devez être majeur)'}
-    ];
-
-  texteAide.forEach(function(texte) {
-      document.getElementById(texte.id).onfocus = function() {
-        afficheAide(texte.help);
-      }
-  });
-}
-
-prepareAide();</pre>
-
-<h2 id="Les_performances_et_les_fermetures">Les performances et les fermetures</h2>
-
-<p>Il est mal avisé de créer des fonctions imbriquées et des fermetures sans utilité. En effet, cela peut dégrader les performances en termes de vitesse d'exécution et de consommation de mémoire.</p>
-
-<p>Quand, par exemple, on crée un nouvel objet, les méthodes devraient être associées au prototype de l'objet et non pas définies dans le constructeur de l'objet. De cette façon, on évite que les méthodes soient réassignées à chaque fois qu'un nouvel objet est créé.</p>
-
-<p>Voici un exemple de la mauvaise façon de procéder :</p>
-
-<pre class="example-bad brush: js">function MonObjet(nom, message) {
-  this.nom = nom.toString();
-  this.message = message.toString();
-  this.getNom = function() {
-    return this.nom;
-  };
-
-  this.getMessage = function() {
-    return this.message;
-  };
-}
-</pre>
-
-<p>Le fragment de code précédent ne tire pas partie des avantages des fermetures. Il pourrait être mieux écrit ainsi :</p>
-
-<pre class="brush: js">function MonObjet(nom, message) {
-  this.nom = nom.toString();
-  this.message = message.toString();
-}
-MonObjet.prototype = {
-  getNom: function() {
-    return this.nom;
-  },
-  getMessage: function() {
-    return this.message;
-  }
-};
-</pre>
-
-<p>Cependant, redéfinir le prototype est déconseillé, donc encore meilleur serait d'ajouter les méthodes :</p>
-
-<pre class="brush: js">function MonObjet(nom, message) {
-  this.nom = nom.toString();
-  this.message = message.toString();
-}
-MonObjet.prototype.getNom = function() {
-  return this.nom;
-};
-MonObjet.prototype.getMessage = function() {
-  return this.message;
-};
-</pre>
-
-<p>Les deux derniers exemples permettent de voir que le prototype hérité est partagé par tous les objets construits et que les méthodes n'ont pas besoin d'être reconstruites pour chaque création d'objet. Veuillez consulter la page sur <a href="/fr/docs/Web/JavaScript/Guide/Le_mod%C3%A8le_objet_JavaScript_en_d%C3%A9tails">le modèle objet JavaScript en détails</a> pour plus d'informations.</p>
diff --git a/files/fr/web/javascript/closures/index.md b/files/fr/web/javascript/closures/index.md
new file mode 100644
index 0000000000..08f3ae7970
--- /dev/null
+++ b/files/fr/web/javascript/closures/index.md
@@ -0,0 +1,387 @@
+---
+title: Closures (Fermetures)
+slug: Web/JavaScript/Closures
+tags:
+  - Closure
+  - Intermédiaire
+  - JavaScript
+translation_of: Web/JavaScript/Closures
+---
+{{jsSidebar("Intermediate")}}
+
+Une **fermeture** est la paire formée d'une fonction et des références à son état environnant (**l'environnement lexical**). En d'autres termes, une fermeture donne accès à la portée d'une fonction externe à partir d'une fonction interne (on dit aussi que la fonction « capture son environnement »). En JavaScript, une fermeture est créée chaque fois qu'une fonction est créée.
+
+## Portée
+
+Dans l'exemple suivant :
+
+```js
+function init() {
+  var nom = "Mozilla"; // nom est une variable locale de init
+  function afficheNom() { // afficheNom est une fonction interne de init
+    console.log(nom); // ici nom est une variable libre (définie dans la fonction parente)
+  }
+  afficheNom();
+};
+init();
+```
+
+La fonction `init` créé une variable locale `nom` et une fonction interne `afficheNom`. La fonction interne est seulement visible de l'intérieur de `init`. Contrairement à `init`, `afficheNom` ne possède pas de variable locale propre, mais elle utilise la variable `nom` de la fonction parente (ceci dit `afficheNom` pourrait utiliser ses variables locales propres si elle en avait).
+
+{{JSFiddleEmbed("https://jsfiddle.net/78dg25ax/", "js,result", 250)}}
+
+Vous pouvez exécuter le code sur cette [page](https://jsfiddle.net/4U5VD/) pour voir son fonctionnement. On a ici un exemple de portée lexicale : en JavaScript, la portée d'une variable est définie par son emplacement dans le code source (elle apparaît de façon _lexicale_), les fonctions imbriquées ont ainsi accès aux variables déclarées dans les portées parentes.
+
+## Fermeture
+
+Étudions l'exemple suivant :
+
+```js
+function creerFonction() {
+  var nom = "Mozilla";
+  function afficheNom() {
+    console.log(nom);
+  }
+  return afficheNom;
+}
+
+var maFonction = creerFonction();
+maFonction();
+```
+
+Ce code produit le même résultat que l'appel à `init()` étudié précédemment : "Mozilla" est affiché dans la console. L'intérêt de ce code est qu'une fermeture contenant la fonction `afficheNom` est renvoyée par la fonction parente, avant d'être exécutée.
+
+Le code continue à fonctionner, ce qui peut paraître contre-intuitif au regard de la syntaxe utilisée. Usuellement, les variables locales d'une fonction n'existent que pendant l'exécution d'une fonction. Une fois que `creerFonction()` a fini son exécution, on aurait pû penser que la variable `nom` n'est plus accessible. Cependant, le code fonctionne : en JavaScript, la variable est donc accessible d'une certaine façon.
+
+L'explication est la suivante : `maFonction` est une fermeture. La fermeture combine la fonction `afficheNom` et son environnement. Cet environnement est composé de toutes les variables locales accessibles (dans la portée) à la création de la fermeture. Ici `maFonction` est une fermeture qui contient la fonction `afficheNom` et une référence à la variable `var nom = "Mozilla"` qui existait lorsque la fermeture a été créée. L'instance de `afficheNom` conserve une référence à son environnement lexical, dans lequel `nom`  existe. Pour cette raison, lorsque `maFonction` est invoquée, la variable `nom` reste disponible et "Mozilla" est transmis à `console.log`.
+
+Voici un exemple un peu plus intéressant—une fonction `ajouterA` :
+
+```js
+function ajouterA(x) {
+  return function(y) {
+    return x + y;
+  };
+};
+
+var ajouter_5 = ajouterA(5);
+var ajouter_10 = ajouterA(10);
+
+console.log(ajouter_5(2));  // 7
+console.log(ajouter_10(2)); // 12
+```
+
+On définit une fonction `ajouterA(x)` avec un seul argument `x` et qui renvoie une fonction anonyme. La fonction anonyme a un seul argument `y`, et renvoie la somme de `x` et `y`.
+
+La fonction `ajouterA` permet de créer des fermetures qui font la somme de leur argument et d'un nombre fixé. Dans l'exemple ci-dessus, on crée  `ajouter_5` et `ajouter_10`. Elles partagent la même fonction, mais des environnements différents. Dans `ajouter_5`, `x` vaut 5 ; dans `ajouter_10`, `x` vaut 10.
+
+## Les fermetures en pratique
+
+On a vu la théorie décrivant les fermetures. Est-ce qu'elles sont utiles pour autant ? Une fermeture permet d'associer des données (l'environnement) avec une fonction qui agit sur ces données. On peut faire un parallèle avec la programmation orientée objet car les objets permettent d'associer des données (les propriétés) avec des méthodes.
+
+Ainsi, on peut utiliser une fermeture pour tout endroit où on utiliserait un objet et ce avec une seule méthode.
+
+Beaucoup de code JavaScript utilisé sur le Web gère des événements : on définit un comportement, puis on l'attache à un événement déclenché par l'utilisateur (tel un clic ou une frappe clavier). Notre code est généralement une fonction de rappel (ou _callback_) exécutée en réponse à l'événement.
+
+Voici un exemple concret : si on souhaite ajouter des boutons à une page afin d'ajuster la taille du texte, on pourrait définir la taille de police de l'élément `body` en pixels, et celles des autres éléments relativement à cette première taille grâce à l'unité `em` :
+
+```css
+body {
+  font-family: Helvetica, Arial, sans-serif;
+  font-size: 12px;
+}
+
+h1 {
+  font-size: 1.5em;
+}
+h2 {
+  font-size: 1.2em;
+}
+```
+
+Les boutons vont ensuite changer la taille de la police de l'élément `body`, ce changement étant répercuté aux autres éléments grâce aux unités relatives.
+
+Voici le code JavaScript qui correspond :
+
+```js
+function fabriqueRedimensionneur(taille) {
+  return function() {
+    document.body.style.fontSize = taille + 'px';
+  };
+};
+
+var taille12 = fabriqueRedimensionneur(12);
+var taille14 = fabriqueRedimensionneur(14);
+var taille16 = fabriqueRedimensionneur(16);
+```
+
+`taille12`, `taille14`, et `taille16` sont désormais des fermetures qui peuvent, respectivement, redimensionner le texte de l'élément `body` à 12, 14, ou 16 pixels. On peut les attacher aux boutons de la façon suivantes :
+
+```js
+document.getElementById('taille-12').onclick = taille12;
+document.getElementById('taille-14').onclick = taille14;
+document.getElementById('taille-16').onclick = taille16;
+```
+
+```html
+<a href="#" id="taille-12">12</a>
+<a href="#" id="taille-14">14</a>
+<a href="#" id="taille-16">16</a>
+```
+
+{{JSFiddleEmbed("https://jsfiddle.net/vnkuZ/7726", "js,result", 200)}}
+
+## Émuler des méthodes privées avec des fermetures
+
+Certains langages de programmation, comme Java, permettent d'avoir des méthodes privées, c'est-à-dire qu'on ne peut les utiliser qu'au sein de la même classe.
+
+JavaScript ne permet pas de faire cela de façon native. En revanche, on peut émuler ce comportement grâce aux fermetures. Les méthodes privées ne sont pas seulement utiles en termes de restriction d'accès au code, elles permettent également de gérer un espace de nom (_namespace_) global qui isole les méthodes secondaires de l'interface publique du code ainsi rendu plus propre.
+
+Voici comment définir une fonction publique accédant à des fonctions et des variables privées en utilisant des fermetures. Cette façon de procéder est également connue comme le patron de conception [module](https://en.wikipedia.org/wiki/Module_pattern) :
+
+```js
+var compteur = (function() {
+  var compteurPrive = 0;
+  function changeValeur(val) {
+    compteurPrive += val;
+  }
+  return {
+    increment: function() {
+      changeValeur(1);
+    },
+    decrement: function() {
+      changeValeur(-1);
+    },
+    valeur: function() {
+      return compteurPrive;
+    }
+  };
+})();
+
+console.log(compteur.valeur()); /* Affiche 0 */
+compteur.increment();
+compteur.increment();
+console.log(compteur.valeur()); /* Affiche 2 */
+compteur.decrement();
+console.log(compteur.valeur()); /* Affiche 1 */
+```
+
+Il y a beaucoup de différences par rapport aux exemples précédents. Au lieu de retourner une simple fonction, on retourne un objet anonyme qui contient 3 fonctions. Et ces 3 fonctions partagent le même environnement. L'objet retourné est affecté à la variable `compteur`, et les 3 fonctions sont alors accessibles sous les noms `compteur.increment`, `compteur.decrement`, et `compteur.valeur`.
+
+L'environnement partagé vient du corps de la fonction anonyme qui est exécutée dès sa définition complète. L'environnement en question contient deux éléments privés : une variable `compteurPrive` et une fonction `changeValeur`. Aucun de ces deux éléments ne peut être utilisé en dehors de la fonction anonyme ; seules les trois fonctions renvoyées par la fonction anonyme sont publiques.
+
+Ces trois fonctions publiques sont des fermetures qui partagent le même environnement. Grâce à la portée lexicale, chacune a accès à` compteurPrive` et à `changeValeur`.
+
+On remarquera qu'on définit une fonction anonyme qui crée un compteur puis qu'on l'appelle immédiatement pour assigner le résultat à la variable `compteur`. On pourrait stocker cette fonction dans une variable puis l'appeler plusieurs fois afin de créer plusieurs compteurs.
+
+```js
+var creerCompteur = function() {
+  var compteurPrive = 0;
+  function changeValeur(val) {
+    compteurPrive += val;
+  }
+  return {
+    increment: function() {
+      changeValeur(1);
+    },
+    decrement: function() {
+      changeValeur(-1);
+    },
+    valeur: function() {
+      return compteurPrive;
+    }
+  };
+};
+
+var compteur1 = creerCompteur();
+var compteur2 = creerCompteur();
+console.log(compteur1.valeur()); /* Affiche 0 */
+compteur1.increment();
+compteur1.increment();
+console.log(compteur1.valeur()); /* Affiche 2 */
+compteur1.decrement();
+console.log(compteur1.valeur()); /* Affiche 1 */
+console.log(compteur2.valeur()); /* Affiche 0 */
+```
+
+Ici on peut voir que chacun des deux compteurs est indépendant de l'autre. Un nouvel environnement est instancié à chaque appel `creerCompteur()`.
+
+L'utilisation de fermetures permet ainsi de bénéficier de certains concepts liés à la programmation orientée objet comme l'encapsulation et la dissimulation de données.
+
+## Les fermetures et les boucles : attention au mélange
+
+Avant que le mot clé [`let`](/fr/docs/Web/JavaScript/Reference/Instructions/let) ne soit introduit avec ECMAScript 2015, un problème se posait fréquemment lorsqu'on manipulait des fermetures au sein d'une boucle. Par exemple :
+
+```html
+<p id="aide">Des aides seront affichées ici</p>
+<p>E-mail : <input type="text" id="email" name="email"></p>
+<p>Nom : <input type="text" id="nom" name="nom"></p>
+<p>Âge : <input type="text" id="âge" name="âge"></p>
+```
+
+```js
+function afficherAide(aide) {
+  document.getElementById('aide').innerHTML = aide;
+}
+
+function preparerAide() {
+  var texteAide = [
+      {'id': 'email', 'aide': 'Votre adresse e-mail'},
+      {'id': 'nom', 'aide': 'Vos prénom et nom'},
+      {'id': 'âge', 'aide': 'Votre âge (plus de 16 ans requis)'}
+    ];
+
+  for (var i = 0; i < texteAide.length; i++) {
+    var item = texteAide[i];
+    document.getElementById(item.id).onfocus = function() {
+      afficherAide(item.aide);
+    }
+  }
+}
+
+preparerAide();
+```
+
+{{JSFiddleEmbed("https://jsfiddle.net/v7gjv/8164/", "", 200)}}
+
+Lorsqu'on essaie ce code, on s'aperçoit qu'il ne fonctionne pas exactement comme on le souhaitait : en effet, quelque soit le champ sur lequel on se situe, c'est toujours le message d'aide concernant l'âge qui s'affiche.
+
+La cause de ce problème est que les fonctions attachées à `onfocus` sont des fermetures qui partagent le même environnement. À chaque itération de boucle, l'environnement de la fermeture créée contient une référence sur la même instance de la variable `item`. Ainsi, lorsque la fonction de rappel de `onfocus` est exécutée, la boucle a déjà été effectuée entièrement, et la variable `item` partagée par les trois fermetures pointe sur le dernier élément de `texteAide`.
+
+Une solution consiste à utiliser plus de fermetures et à appliquer une fabrique de fonction comme on a vu précédemment :
+
+```js
+function afficheAide(aide) {
+  document.getElementById('aide').innerHTML = aide;
+}
+
+function creerCallbackAide(aide) {
+  return function() {
+    afficheAide(aide);
+  };
+}
+
+function prepareAide() {
+  var texteAide = [
+      {'id': 'email', 'aide': 'Votre adresse e-mail'},
+      {'id': 'nom', 'aide': 'Votre prénom et nom'},
+      {'id': 'âge', 'aide': 'Your age (you must be over 16)'}
+    ];
+
+  for (var i = 0; i < texteAide.length; i++) {
+    var item = texteAide[i];
+    document.getElementById(item.id).onfocus = creerCallbackAide(item.aide);
+  }
+}
+
+prepareAide();
+```
+
+Voici une autre solution qui permet de ne pas utiliser plus de fermetures :
+
+```js
+function afficheAide(aide) {
+  document.getElementById('aide').innerHTML = aide;
+}
+
+function prepareAide() {
+  var texteAide = [
+      {'id': 'email', 'aide': 'Votre adresse e-mail'},
+      {'id': 'nom', 'aide': 'Votre prénom et nom'},
+      {'id': 'âge', 'aide': 'Votre âge (vous devez être majeur)'}
+    ];
+
+  for (var i = 0; i < texteAide.length; i++) {
+    let item = texteAide[i];
+    document.getElementById(item.id).onfocus = function() {
+      afficheAide(item.aide);
+    }
+  }
+}
+
+prepareAide();
+```
+
+Dans ce fragment de code, nous avons utilisé `let` au lieu de `var` afin que chaque fermeture soit liée avec les variable de bloc.
+
+{{JSFiddleEmbed("https://jsfiddle.net/v7gjv/9573/", "", 300)}}
+
+Autrement, on aurait pu utiliser `forEach()` afin de parcourir le tableau `texteAide` et attacher un gestionnaire d'évènement sur chaque {{htmlelement("div")}} :
+
+```js
+function afficheAide(aide) {
+  document.getElementById('aide').innerHTML = aide;
+}
+
+function prepareAide() {
+  var texteAide = [
+      {'id': 'email', 'aide': 'Votre adresse e-mail'},
+      {'id': 'nom', 'aide': 'Votre prénom et nom'},
+      {'id': 'âge', 'aide': 'Votre âge (vous devez être majeur)'}
+    ];
+
+  texteAide.forEach(function(texte) {
+      document.getElementById(texte.id).onfocus = function() {
+        afficheAide(texte.help);
+      }
+  });
+}
+
+prepareAide();
+```
+
+## Les performances et les fermetures
+
+Il est mal avisé de créer des fonctions imbriquées et des fermetures sans utilité. En effet, cela peut dégrader les performances en termes de vitesse d'exécution et de consommation de mémoire.
+
+Quand, par exemple, on crée un nouvel objet, les méthodes devraient être associées au prototype de l'objet et non pas définies dans le constructeur de l'objet. De cette façon, on évite que les méthodes soient réassignées à chaque fois qu'un nouvel objet est créé.
+
+Voici un exemple de la mauvaise façon de procéder :
+
+```js example-bad
+function MonObjet(nom, message) {
+  this.nom = nom.toString();
+  this.message = message.toString();
+  this.getNom = function() {
+    return this.nom;
+  };
+
+  this.getMessage = function() {
+    return this.message;
+  };
+}
+```
+
+Le fragment de code précédent ne tire pas partie des avantages des fermetures. Il pourrait être mieux écrit ainsi :
+
+```js
+function MonObjet(nom, message) {
+  this.nom = nom.toString();
+  this.message = message.toString();
+}
+MonObjet.prototype = {
+  getNom: function() {
+    return this.nom;
+  },
+  getMessage: function() {
+    return this.message;
+  }
+};
+```
+
+Cependant, redéfinir le prototype est déconseillé, donc encore meilleur serait d'ajouter les méthodes :
+
+```js
+function MonObjet(nom, message) {
+  this.nom = nom.toString();
+  this.message = message.toString();
+}
+MonObjet.prototype.getNom = function() {
+  return this.nom;
+};
+MonObjet.prototype.getMessage = function() {
+  return this.message;
+};
+```
+
+Les deux derniers exemples permettent de voir que le prototype hérité est partagé par tous les objets construits et que les méthodes n'ont pas besoin d'être reconstruites pour chaque création d'objet. Veuillez consulter la page sur [le modèle objet JavaScript en détails](/fr/docs/Web/JavaScript/Guide/Le_mod%C3%A8le_objet_JavaScript_en_d%C3%A9tails) pour plus d'informations.
diff --git a/files/fr/web/javascript/data_structures/index.html b/files/fr/web/javascript/data_structures/index.html
deleted file mode 100644
index 7390a819aa..0000000000
--- a/files/fr/web/javascript/data_structures/index.html
+++ /dev/null
@@ -1,320 +0,0 @@
----
-title: Structures de données
-slug: Web/JavaScript/Data_structures
-tags:
-  - Débutant
-  - JavaScript
-  - Types
-translation_of: Web/JavaScript/Data_structures
-original_slug: Web/JavaScript/Structures_de_données
----
-<div>{{jsSidebar("More")}}</div>
-
-<p>Les langages de programmation disposent de structures de données natives. Selon les langages, les structures mises à disposition peuvent être différentes. Dans cet article, on listera les structures de données natives en JavaScript. On détaillera leurs propriétés et les façons de les utiliser voire de les combiner. Dans certains cas, on comparera ces structures avec celles d'autres langages.</p>
-
-<h2 id="Un_typage_dynamique">Un typage dynamique</h2>
-
-<p>JavaScript est un langage dont le typage est <em>faible</em> et <em>dynamique</em>. Cela signifie qu'il n'est pas nécessaire de déclarer le type d'une variable avant de l'utiliser. Le type de la variable sera automatiquement déterminé lorsque le programme sera exécuté. Cela signifie également que la même variable pourra avoir différents types au cours de son existence :</p>
-
-<pre class="brush: js">var toto = 42;       // toto est un nombre
-    toto = "machin"; // toto est une chaîne de caractères désormais
-    toto = true;     // et maintenant, toto est un booléen
-</pre>
-
-<h2 id="Les_types_de_données">Les types de données</h2>
-
-<p>Le dernier standard ECMAScript définit 8 types de données :</p>
-
-<ul>
- <li>Sept types de données {{Glossary("Primitive", "primitifs")}}:
-  <ul>
-   <li>{{Glossary("Boolean", "Booléen")}}</li>
-   <li>{{Glossary("Null")}}</li>
-   <li>{{Glossary("Undefined")}}</li>
-   <li>{{Glossary("Number", "Nombre")}}</li>
-   <li>{{Glossary("BigInt")}} (proposition pour ES2020)</li>
-   <li>{{Glossary("String", "Chaîne de caractères")}} (String)</li>
-   <li>{{Glossary("Symbol", "Symbole")}} (type introduit avec ECMAScript 6)</li>
-  </ul>
- </li>
- <li>et le type {{Glossary("Object", "Objet")}}</li>
-</ul>
-
-<h2 id="Les_valeurs_primitives">Les valeurs primitives</h2>
-
-<p>Tous les types, sauf les objets, définissent des valeurs immuables (qu'on ne peut modifier). Ainsi, contrairement au C, les chaînes de caractères sont immuables en JavaScript. Les valeurs immuables pour chacun de ces types sont appelées « valeurs primitives ».</p>
-
-<h3 id="Le_type_booléen">Le type booléen</h3>
-
-<p>Un booléen représente le résultat d'une assertion logique et peut avoir deux valeurs : <code>true</code> (pour le vrai logique) et <code>false</code> (pour le faux logique) (voir {{jsxref("Boolean")}} pour plus de détails sur la représentation objet de ce type).</p>
-
-<h3 id="Le_type_nul">Le type nul</h3>
-
-<p>Le type nul ne possède qu'une valeur : <code>null</code>. Voir {{jsxref("null")}} et {{Glossary("Null")}} pour plus d'informations.</p>
-
-<h3 id="Le_type_indéfini">Le type indéfini</h3>
-
-<p>Une variable à laquelle on n'a pas affecté de valeur vaudra <code>undefined</code>. Voir {{jsxref("undefined")}} et {{Glossary("Undefined")}} pour plus d'informations.</p>
-
-<h3 id="Le_type_nombre">Le type nombre</h3>
-
-<p>ECMAScript possède deux types numériques natifs : <code>Number</code> et <code>BigInt</code> (cf. ci-après)</p>
-
-<p>Le type <code>Number</code> est géré pour représenter les nombres : <a href="https://en.wikipedia.org/wiki/Double_precision_floating-point_format">les nombres flottants à précision double, représentés sur 64 bits, selon le format IEEE 754</a> (les nombres compris entre -(2^53 -1) et 2^53 -1). <strong>Il n'y a donc pas de type à part pour représenter les nombres entiers</strong>. En plus de sa capacité à représenter les nombres décimaux, le type nombre possède trois valeurs symboliques : <code>+<a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Infinity">Infinity</a></code>, <code>-Infinity</code>, et {{jsxref("NaN")}} (<em>Not A Number</em> en anglais, qui signifie « n'est pas un nombre »).</p>
-
-<p>Afin de vérifier que des valeurs sont supérieures/inférieures à <code>+/-Infinity</code>, on peut utiliser les constantes {{jsxref("Number.MAX_VALUE")}} et {{jsxref("Number.MIN_VALUE")}}. À partir d'ECMAScript 6, on peut également vérifier si un nombre est/sera compris dans l'intervalle de représentation pour les nombres flottants à précision double en utilisant la méthode {{jsxref("Number.isSafeInteger()")}} ainsi que les valeurs {{jsxref("Number.MAX_SAFE_INTEGER")}} et {{jsxref("Number.MIN_SAFE_INTEGER")}}. En dehors de cet intervalle et pour JavaScript, on considère que les nombres ne sont plus représentés correctement. On manipule alors une approximation de la valeur sous forme d'un nombre à virgule flottante à précision double.</p>
-
-<p>Le type nombre possède un seul entier pouvant être représenté de deux façons différentes : 0 qui peut être représenté par -0 et +0. ("0" étant un alias pour +0). En pratique, cela n'a généralement aucun impact et<code> +0 === -0</code> vaut bien <code>true</code>. Malgré tout, on peut observer certaines différences quand on divise par zéro :</p>
-
-<pre class="brush: js">42 / +0
-// Infinity
-
-42 / -0
-// -Infinity
-</pre>
-
-<p>Dans la plupart des cas, un nombre représente sa propre valeur, malgré tout les <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_binaires">opérateurs binaires</a> peuvent être utilisés pour représenter plusieurs valeurs booléennes grâce à un seul nombre (on parle alors de <a href="https://fr.wikipedia.org/wiki/Masquage">masque de bits</a>). Ceci est généralement une mauvaise pratique (lisibilité, maintenabilité) bien que ça puisse être utile lorsqu'on souhaite minimiser le nombre de bits qu'on utilise.</p>
-
-<h3 id="Le_type_BigInt">Le type <code>BigInt</code></h3>
-
-<p>Le type {{jsxref("BigInt")}} permet de représenter des entiers avec une précision arbitraire. Avec ce type, on peut donc manipuler des entiers plus grands que ceux représentables avec <em>Number</em>. Pour créer un grand entier, on ajoutera un <code>n</code> après l'entier ou on appellera le constructeur {{jsxref("BigInt")}}.</p>
-
-<p>La plus grande valeur représentable avec le type <em>Number</em> est accessible avec la constante {{jsxref("Number.MAX_VALUE")}}. Avec l'apparition de <code>BigInt</code>, on peut représenter et manipuler des entiers plus grands.</p>
-
-<pre class="brush: js">const x = 2n ** 53n;
-9007199254740992n;
-const y = x + 1n;
-9007199254740993n
-</pre>
-
-<p>À l'instar des nombres classiques, on peut utiliser les opérateurs <code>+</code>,  <code>*</code>, <code>-</code>, <code>**</code> et <code>%</code>. Un grand entier ne sera pas strictement égal à un nombre mais on pourra avoir une égalité faible.</p>
-
-<p>Un grand entier se comportera comme un nombre lorsqu'il est converti en booléen avec <code>if</code>, <code>||</code>, <code>&amp;&amp;</code>, <code>Boolean</code> et <code>!</code>.</p>
-
-<p>Il n'est pas possible d'utiliser des grands entiers et des nombres de façon interchangeable. Une exception {{jsxref("TypeError")}} sera déclenchée en cas d'incompatibilité.</p>
-
-<h3 id="Le_type_chaîne_de_caractères_String">Le type chaîne de caractères (<em>String</em>)</h3>
-
-<p>Ce type JavaScript est utilisé afin de représenter des données textuelles. C'est un ensemble d'« éléments » de valeurs entières non-signées représentées sur 16 bits. Chaque élément occupe une position au sein de cette chaîne de caractères. Le premier élément est situé à l'indice 0, le deuxième à l'indice 1 et ainsi de suite. La longueur d'une chaîne de caractères correspond au nombre d'éléments qu'elle contient.</p>
-
-<p>À la différence des chaînes de caractères dans le langage C, les chaînes de caractères JavaScript sont immuables. Cela signifie qu'une fois qu'une chaîne est créée, il est impossible de la modifier. En revanche, il est toujours possible de créer une autre chaîne basée sur la première grâce à des opérations. Par exemple :</p>
-
-<ul>
- <li>Un fragment de la chaîne originelle en sélectionnant certaines lettres ou en utilisant {{jsxref("String.substr()")}}.</li>
- <li>Une concaténation de deux chaînes de caractères en utilisant l'opérateur de concaténation (<code>+</code>) ou {{jsxref("String.concat()")}}.</li>
-</ul>
-
-<h4 id="Attention_à_ne_pas_utiliser_les_chaînes_pour_tout_et_nimporte_quoi_!">Attention à ne pas utiliser les chaînes pour tout et n'importe quoi !</h4>
-
-<p>Ça peut être tentant de vouloir utiliser des chaînes afin de représenter des données complexes. En revanche, les avantages de cette méthode ne sont que très superficiels :</p>
-
-<ul>
- <li>On peut facilement construire des chaînes complexes grâce à la concaténation.</li>
- <li>On peut déboguer rapidement le contenu des chaînes de caractères.</li>
- <li>Les chaînes de caractères sont utilisées à de multiples endroits dans beaucoup d'API (<a href="/fr/docs/Web/API/HTMLInputElement">champs de saisie</a>, valeurs en <a href="/fr/docs/Storage">stockage local</a>, réponses {{ domxref("XMLHttpRequest") }} avec <code>responseText</code>, etc.).</li>
-</ul>
-
-<p>En utilisant des conventions, il peut être possible de représenter n'importe quelle donnée sous forme d'une chaîne de caractères, en revanche cela n'est souvent pas la meilleure façon. (Par exemple, avec un séparateur, on pourrait émuler le comportement d'un tableau en « interdisant » que ce séparateur soit utilisé pour éléments, etc. on pourrait ensuite définir un caractère d'échappement, qui serait à son tour inutilisable dans les chaînes : toutes ces pseudo-conventions entraîneront de lourdes conséquences en termes de maintenance.)</p>
-
-<p>En résumé, les chaînes doivent être utilisées pour les données textuelles. Pour des données plus complexes, utilisez une abstraction adéquate et analysez/parsez les chaînes que vous recevez d'autres API.</p>
-
-<h3 id="Le_type_symbole">Le type symbole</h3>
-
-<p>Les symboles sont une nouveautés du langage, apportée par ECMAScript 6. Un symbole est une valeur primitive <strong>unique</strong> et <strong>immuable</strong> pouvant être utilisée comme clé pour propriété d'un objet (voir ci-après). Dans d'autres langages de programmation, les symboles sont appelés atomes. Pour plus de détails, voir les pages {{Glossary("Symbol","Symbole")}} et le constructeur {{jsxref("Symbol")}} JavaScript.</p>
-
-<h2 id="Les_objets">Les objets</h2>
-
-<p>En informatique, un objet est une valeur conservée en mémoire à laquelle on fait référence grâce à un {{Glossary("Identifier", "identifiant")}}.</p>
-
-<h3 id="Propriétés">Propriétés</h3>
-
-<p>En JavaScript, les objets peuvent être considérés comme des collections de propriétés. En utilisant <a href="/fr/docs/Web/JavaScript/Guide/Valeurs,_variables,_et_littéraux#Les_litt.C3.A9raux_objets">un littéral objet</a>, il est possible d'initialiser un ensemble limité de propriétés ; d'autres propriétés peuvent ensuite être ajoutées et/ou retirées. Les valeurs des propriétés peuvent être de n'importe quel type, y compris des objets. Cela permet de construire des structures de données complexes. Les propriétés sont identifiées grâce à une « clé ». Une clé peut être une chaîne de caractères ou un symbole.</p>
-
-<p>Il existe deux types de propriétés qui ont certains attributs : des propriétés de données (<em>data property</em>) et des propriétés d'accesseur.</p>
-
-<h4 id="Propriétés_de_données">Propriétés de données</h4>
-
-<p>Elles associent une clé avec une valeur et possèdent les attributs suivants :</p>
-
-<table class="standard-table">
- <caption>Attributs d'une propriété de données</caption>
- <tbody>
-  <tr>
-   <th>Attribut</th>
-   <th>Type</th>
-   <th>Description</th>
-   <th>Valeur par défaut</th>
-  </tr>
-  <tr>
-   <td>[[Value]]</td>
-   <td>N'importe quelle valeur JavaScript</td>
-   <td>La valeur obtenue lorsqu'on accède à la propriété.</td>
-   <td><code>undefined</code></td>
-  </tr>
-  <tr>
-   <td>[[Writable]]</td>
-   <td>Booléen</td>
-   <td>S'il vaut <code>false</code>, la valeur de la propriété (l'attribut [[Value]]) ne peut être changé.</td>
-   <td><code>false</code></td>
-  </tr>
-  <tr>
-   <td>[[Enumerable]]</td>
-   <td>Booléen</td>
-   <td>S'il vaut <code>true</code>, la propriété pourra être listée par une boucle <code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/for...in">for...in</a></code>. Voir également <a href="/fr/docs/Web/JavaScript/Caract%C3%A8re_%C3%A9num%C3%A9rable_des_propri%C3%A9t%C3%A9s_et_rattachement">l'article sur le caractère énumérable des propriétés</a>.</td>
-   <td><code>false</code></td>
-  </tr>
-  <tr>
-   <td>[[Configurable]]</td>
-   <td>Booléen</td>
-   <td>S'il vaut <code>false</code>, la propriété ne pourra pas être supprimée, elle ne pourra pas être changée en accesseur et les attributs autres que [[Value]] et [[Writable]] ne pourront pas être modifiés.</td>
-   <td><code>false</code></td>
-  </tr>
- </tbody>
-</table>
-
-<table class="standard-table">
- <caption>Attributes obsolètes (faisaient partie d'ECMAScript 3, renommés avec ECMAScript 5)</caption>
- <tbody>
-  <tr>
-   <th>Attribut</th>
-   <th>Type</th>
-   <th>Description</th>
-  </tr>
-  <tr>
-   <td>Read-only</td>
-   <td>Booléen</td>
-   <td>État symétrique pour l'attribut ES5 [[Writable]].</td>
-  </tr>
-  <tr>
-   <td>DontEnum</td>
-   <td>Booléen</td>
-   <td>État symétrique pour l'attribut ES5 [[Enumerable]].</td>
-  </tr>
-  <tr>
-   <td>DontDelete</td>
-   <td>Booléen</td>
-   <td>État symétrique pour l'attribut ES5 [[Configurable]].</td>
-  </tr>
- </tbody>
-</table>
-
-<h4 id="Propriétés_daccesseur">Propriétés d'accesseur</h4>
-
-<p>Ces propriétés associent une clé avec une ou deux fonctions accesseur et mutateur qui permettent de récupérer ou d'enregistrer une valeur. Elles possèdent les attributs suivants :</p>
-
-<table class="standard-table">
- <caption>Attributs d'une propriété d'accesseur</caption>
- <tbody>
-  <tr>
-   <th>Attribut</th>
-   <th>Type</th>
-   <th>Description</th>
-   <th>Valeur par défaut</th>
-  </tr>
-  <tr>
-   <td>[[Get]]</td>
-   <td>Un objet <code>Function</code> ou <code>undefined</code></td>
-   <td>La fonction qui est appelée sans argument afin de récupérer la valeur de la propriété quand on souhaite y accéder. Voir aussi la page sur <a href="/fr/docs/Web/JavaScript/Reference/Fonctions/get"><code>get</code></a>.</td>
-   <td><code>undefined</code></td>
-  </tr>
-  <tr>
-   <td>[[Set]]</td>
-   <td>Un objet <code>Function</code> ou <code>undefined</code></td>
-   <td>La fonction, appelée avec un argument qui contient la valeur qu'on souhaite affecter à la valeur et qui est exécutée à chaque fois qu'on souhaite modifier la valeur. Voir aussi la page sur <a href="/fr/docs/Web/JavaScript/Reference/Fonctions/set"><code>set</code></a>.</td>
-   <td><code>undefined</code></td>
-  </tr>
-  <tr>
-   <td>[[Enumerable]]</td>
-   <td>Booléen</td>
-   <td>S'il vaut <code>true</code>, la propriété sera listée dans les boucles <code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/for...in">for...in</a></code>.</td>
-   <td><code>false</code></td>
-  </tr>
-  <tr>
-   <td>[[Configurable]]</td>
-   <td>Booléen</td>
-   <td>S'il vaut <code>false</code>, la propriété ne pourra pas être supprimée et ne pourra pas être transformée en une propriété de données.</td>
-   <td><code>false</code></td>
-  </tr>
- </tbody>
-</table>
-
-<div class="note">
-<p><strong>Note :</strong> Les attributs sont généralement utilisés par le moteur JavaScript plutôt qu'explicitement dans les scripts. Il est impossible d'y accéder directement (plus d'informations sur {{jsxref("Object.defineProperty()")}}. C'est pour cela que l'attribut est décrit entre double crochets (comme dans la spécification ECMAScript) plutôt qu'entre crochets simples qui pourraient laisser penser à une propriété « classique ».</p>
-</div>
-
-<h3 id="Les_objets_«_normaux_»_et_les_fonctions">Les objets « normaux » et les fonctions</h3>
-
-<p>Un objet JavaScript est un ensemble de correspondances entre des clés et des valeurs. Les clés sont représentées par des chaînes ou des symboles ({{jsxref("Symbol")}}). Les valeurs peuvent être de n'importe quel type. Grâce à cela, les objets peuvent, naturellement, être utilisés comme<a class="external" href="https://fr.wikipedia.org/wiki/Table_de_hachage"> tables de hachage</a>.</p>
-
-<p>Les fonctions sont des objets classiques à la seule différence qu'on peut les appeler.</p>
-
-<h3 id="Les_dates">Les dates</h3>
-
-<p>Lorsqu'on souhaite représenter des dates, il est tout indiqué d'utiliser le type utilitaire natif <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Date"><code>Date</code></a> de JavaScript.</p>
-
-<h3 id="Les_collections_indexées_les_tableaux_Arrays_et_les_tableaux_typés_Typed_Arrays">Les collections indexées : les tableaux (<em>Arrays</em>) et les tableaux typés (<em>Typed Arrays</em>)</h3>
-
-<p><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array">Les tableaux</a> (ou <em>Arrays</em> en anglais) sont des objets natifs qui permettent d'organiser des valeurs numérotées et qui ont une relation particulière avec la propriété <code>length</code>. De plus, les tableaux héritent de <code>Array.prototype</code> qui permet de bénéficier de plusieurs méthodes pour manipuler les tableaux. Par exemple, <code><a href="/fr/docs/JavaScript/Reference/Objets_globaux/Array/indexOf">indexOf</a></code> qui permet de rechercher une valeur dans le tableau ou <code><a href="/fr/docs/JavaScript/Reference/Global_Objects/Array/push">push</a></code> qui permet d'ajouter un élément au tableau. Les tableaux sont donc indiqués quand on souhaite représenter des listes de valeurs ou d'objets.</p>
-
-<p><a href="/fr/docs/JavaScript/Tableaux_typ%C3%A9s">Les tableaux typés</a> (<em>Typed Arrays</em> en anglais) ont été ajoutés avec ECMAScript 6 et offrent une vue sous forme d'un tableau pour manipuler des tampons de données binaires. Le tableau qui suit illustre les types de données équivalents en C :</p>
-
-<p>{{page("fr/docs/Web/JavaScript/Reference/Objets_globaux/TypedArray", "Les_objets_TypedArray", "", 0, 3)}}</p>
-
-<h3 id="Les_collections_avec_clés_Maps_Sets_WeakMaps_WeakSets">Les collections avec clés : Maps, Sets, WeakMaps, WeakSets</h3>
-
-<p>Ces structures de données utilisent des clés pour référencer des objets. Elles ont été introduites avec ECMAScript 6. {{jsxref("Set")}} et {{jsxref("WeakSet")}} représentent des ensembles d'objets, {{jsxref("Map")}} et {{jsxref("WeakMap")}} associent une valeur à un objet. Il est possible d'énumérer les valeurs contenues dans un objet Map mais pas dans un objet WeakMap. Les WeakMaps quant à eux permettent certaines optimisations dans la gestion de la mémoire et le travail du ramasse-miettes.</p>
-
-<p>Il est possible d'implémenter les Maps et Sets grâce à ECMAScript 5. Cependant, comme les objets ne peuvent pas être comparés (avec une relation d'ordre par exemple), la complexité obtenue pour rechercher un élément serait nécessairement linéaire. Les implémentations natives (y compris celle des WeakMaps) permettent d'obtenir des performances logarithmiques voire constantes.</p>
-
-<p>Généralement, si on voulait lier des données à un nœud DOM, on pouvait utiliser les attributs <code>data-*</code> ou définir les propriétés à un même l'objet. Malheureusement, cela rendait les données disponibles à n'importe quel script fonctionnant dans le même contexte. Les Maps et WeakMaps permettent de gérer plus simplement une liaison « privée » entre des données et un objet.</p>
-
-<h3 id="Les_données_structurées_JSON">Les données structurées : JSON</h3>
-
-<p>JSON (JavaScript Object Notation) est un format d'échange de données léger, dérivé de JavaScript et utilisé par plusieurs langages de programmation. JSON permet ainsi de construire des structures de données universelles pouvant être échangées entre programmes. Pour plus d'informations, voir les pages {{Glossary("JSON")}} et {{jsxref("JSON")}}.</p>
-
-<h3 id="Les_autres_objets_de_la_bibliothèque_standard">Les autres objets de la bibliothèque standard</h3>
-
-<p>JavaScript possède une bibliothèque standard d'objets natifs. Veuillez lire la <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux">référence</a> pour en savoir plus sur ces objets.</p>
-
-<h2 id="Déterminer_le_type_des_objets_grâce_à_lopérateur_typeof">Déterminer le type des objets grâce à l'opérateur <code>typeof</code></h2>
-
-<p>L'opérateur <code>typeof</code> peut vous aider à déterminer le type d'une variable. Pour plus d'informations et sur les cas particuliers, voir la page de la référence sur <a href="/fr/docs/JavaScript/Reference/R%C3%A9f%C3%A9rence_JavaScript/Op%C3%A9rateurs/Op%C3%A9rateurs_sp%C3%A9ciaux/L'op%C3%A9rateur_typeof">cet opérateur</a>.</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES1')}}</td>
-   <td>{{Spec2('ES1')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-8', 'Types')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-ecmascript-data-types-and-values', 'ECMAScript Data Types and Values')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td>Ajout des symboles ({{jsxref("Symbol")}}).</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-ecmascript-data-types-and-values', 'ECMAScript Data Types and Values')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a class="link-https" href="https://github.com/nzakas/computer-science-in-javascript/">Un ensemble de structures de données usuelles et d'algorithmes classiques, en JavaScript, par Nicholas Zakas</a> (en anglais)</li>
- <li><a href="https://github.com/monmohan/DataStructures_In_Javascript">Implémentations de différentes structures de données et utilitaires de recherche en JavaScript</a> (en anglais)</li>
-</ul>
diff --git a/files/fr/web/javascript/data_structures/index.md b/files/fr/web/javascript/data_structures/index.md
new file mode 100644
index 0000000000..fc7e9c5b42
--- /dev/null
+++ b/files/fr/web/javascript/data_structures/index.md
@@ -0,0 +1,211 @@
+---
+title: Structures de données
+slug: Web/JavaScript/Data_structures
+tags:
+  - Débutant
+  - JavaScript
+  - Types
+translation_of: Web/JavaScript/Data_structures
+original_slug: Web/JavaScript/Structures_de_données
+---
+{{jsSidebar("More")}}
+
+Les langages de programmation disposent de structures de données natives. Selon les langages, les structures mises à disposition peuvent être différentes. Dans cet article, on listera les structures de données natives en JavaScript. On détaillera leurs propriétés et les façons de les utiliser voire de les combiner. Dans certains cas, on comparera ces structures avec celles d'autres langages.
+
+## Un typage dynamique
+
+JavaScript est un langage dont le typage est _faible_ et _dynamique_. Cela signifie qu'il n'est pas nécessaire de déclarer le type d'une variable avant de l'utiliser. Le type de la variable sera automatiquement déterminé lorsque le programme sera exécuté. Cela signifie également que la même variable pourra avoir différents types au cours de son existence :
+
+```js
+var toto = 42;       // toto est un nombre
+    toto = "machin"; // toto est une chaîne de caractères désormais
+    toto = true;     // et maintenant, toto est un booléen
+```
+
+## Les types de données
+
+Le dernier standard ECMAScript définit 8 types de données :
+
+- Sept types de données {{Glossary("Primitive", "primitifs")}}:
+
+  - {{Glossary("Boolean", "Booléen")}}
+  - {{Glossary("Null")}}
+  - {{Glossary("Undefined")}}
+  - {{Glossary("Number", "Nombre")}}
+  - {{Glossary("BigInt")}} (proposition pour ES2020)
+  - {{Glossary("String", "Chaîne de caractères")}} (String)
+  - {{Glossary("Symbol", "Symbole")}} (type introduit avec ECMAScript 6)
+
+- et le type {{Glossary("Object", "Objet")}}
+
+## Les valeurs primitives
+
+Tous les types, sauf les objets, définissent des valeurs immuables (qu'on ne peut modifier). Ainsi, contrairement au C, les chaînes de caractères sont immuables en JavaScript. Les valeurs immuables pour chacun de ces types sont appelées « valeurs primitives ».
+
+### Le type booléen
+
+Un booléen représente le résultat d'une assertion logique et peut avoir deux valeurs : `true` (pour le vrai logique) et `false` (pour le faux logique) (voir {{jsxref("Boolean")}} pour plus de détails sur la représentation objet de ce type).
+
+### Le type nul
+
+Le type nul ne possède qu'une valeur : `null`. Voir {{jsxref("null")}} et {{Glossary("Null")}} pour plus d'informations.
+
+### Le type indéfini
+
+Une variable à laquelle on n'a pas affecté de valeur vaudra `undefined`. Voir {{jsxref("undefined")}} et {{Glossary("Undefined")}} pour plus d'informations.
+
+### Le type nombre
+
+ECMAScript possède deux types numériques natifs : `Number` et `BigInt` (cf. ci-après)
+
+Le type `Number` est géré pour représenter les nombres : [les nombres flottants à précision double, représentés sur 64 bits, selon le format IEEE 754](https://en.wikipedia.org/wiki/Double_precision_floating-point_format) (les nombres compris entre -(2^53 -1) et 2^53 -1). **Il n'y a donc pas de type à part pour représenter les nombres entiers**. En plus de sa capacité à représenter les nombres décimaux, le type nombre possède trois valeurs symboliques : `+Infinity`, `-Infinity`, et {{jsxref("NaN")}} (_Not A Number_ en anglais, qui signifie « n'est pas un nombre »).
+
+Afin de vérifier que des valeurs sont supérieures/inférieures à `+/-Infinity`, on peut utiliser les constantes {{jsxref("Number.MAX_VALUE")}} et {{jsxref("Number.MIN_VALUE")}}. À partir d'ECMAScript 6, on peut également vérifier si un nombre est/sera compris dans l'intervalle de représentation pour les nombres flottants à précision double en utilisant la méthode {{jsxref("Number.isSafeInteger()")}} ainsi que les valeurs {{jsxref("Number.MAX_SAFE_INTEGER")}} et {{jsxref("Number.MIN_SAFE_INTEGER")}}. En dehors de cet intervalle et pour JavaScript, on considère que les nombres ne sont plus représentés correctement. On manipule alors une approximation de la valeur sous forme d'un nombre à virgule flottante à précision double.
+
+Le type nombre possède un seul entier pouvant être représenté de deux façons différentes : 0 qui peut être représenté par -0 et +0. ("0" étant un alias pour +0). En pratique, cela n'a généralement aucun impact et` +0 === -0` vaut bien `true`. Malgré tout, on peut observer certaines différences quand on divise par zéro :
+
+```js
+42 / +0
+// Infinity
+
+42 / -0
+// -Infinity
+```
+
+Dans la plupart des cas, un nombre représente sa propre valeur, malgré tout les [opérateurs binaires](/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_binaires) peuvent être utilisés pour représenter plusieurs valeurs booléennes grâce à un seul nombre (on parle alors de [masque de bits](https://fr.wikipedia.org/wiki/Masquage)). Ceci est généralement une mauvaise pratique (lisibilité, maintenabilité) bien que ça puisse être utile lorsqu'on souhaite minimiser le nombre de bits qu'on utilise.
+
+### Le type `BigInt`
+
+Le type {{jsxref("BigInt")}} permet de représenter des entiers avec une précision arbitraire. Avec ce type, on peut donc manipuler des entiers plus grands que ceux représentables avec _Number_. Pour créer un grand entier, on ajoutera un `n` après l'entier ou on appellera le constructeur {{jsxref("BigInt")}}.
+
+La plus grande valeur représentable avec le type _Number_ est accessible avec la constante {{jsxref("Number.MAX_VALUE")}}. Avec l'apparition de `BigInt`, on peut représenter et manipuler des entiers plus grands.
+
+```js
+const x = 2n ** 53n;
+9007199254740992n;
+const y = x + 1n;
+9007199254740993n
+```
+
+À l'instar des nombres classiques, on peut utiliser les opérateurs `+`,  `*`, `-`, `**` et `%`. Un grand entier ne sera pas strictement égal à un nombre mais on pourra avoir une égalité faible.
+
+Un grand entier se comportera comme un nombre lorsqu'il est converti en booléen avec `if`, `||`, `&&`, `Boolean` et `!`.
+
+Il n'est pas possible d'utiliser des grands entiers et des nombres de façon interchangeable. Une exception {{jsxref("TypeError")}} sera déclenchée en cas d'incompatibilité.
+
+### Le type chaîne de caractères (_String_)
+
+Ce type JavaScript est utilisé afin de représenter des données textuelles. C'est un ensemble d'« éléments » de valeurs entières non-signées représentées sur 16 bits. Chaque élément occupe une position au sein de cette chaîne de caractères. Le premier élément est situé à l'indice 0, le deuxième à l'indice 1 et ainsi de suite. La longueur d'une chaîne de caractères correspond au nombre d'éléments qu'elle contient.
+
+À la différence des chaînes de caractères dans le langage C, les chaînes de caractères JavaScript sont immuables. Cela signifie qu'une fois qu'une chaîne est créée, il est impossible de la modifier. En revanche, il est toujours possible de créer une autre chaîne basée sur la première grâce à des opérations. Par exemple :
+
+- Un fragment de la chaîne originelle en sélectionnant certaines lettres ou en utilisant {{jsxref("String.substr()")}}.
+- Une concaténation de deux chaînes de caractères en utilisant l'opérateur de concaténation (`+`) ou {{jsxref("String.concat()")}}.
+
+#### Attention à ne pas utiliser les chaînes pour tout et n'importe quoi !
+
+Ça peut être tentant de vouloir utiliser des chaînes afin de représenter des données complexes. En revanche, les avantages de cette méthode ne sont que très superficiels :
+
+- On peut facilement construire des chaînes complexes grâce à la concaténation.
+- On peut déboguer rapidement le contenu des chaînes de caractères.
+- Les chaînes de caractères sont utilisées à de multiples endroits dans beaucoup d'API ([champs de saisie](/fr/docs/Web/API/HTMLInputElement), valeurs en [stockage local](/fr/docs/Storage), réponses {{ domxref("XMLHttpRequest") }} avec `responseText`, etc.).
+
+En utilisant des conventions, il peut être possible de représenter n'importe quelle donnée sous forme d'une chaîne de caractères, en revanche cela n'est souvent pas la meilleure façon. (Par exemple, avec un séparateur, on pourrait émuler le comportement d'un tableau en « interdisant » que ce séparateur soit utilisé pour éléments, etc. on pourrait ensuite définir un caractère d'échappement, qui serait à son tour inutilisable dans les chaînes : toutes ces pseudo-conventions entraîneront de lourdes conséquences en termes de maintenance.)
+
+En résumé, les chaînes doivent être utilisées pour les données textuelles. Pour des données plus complexes, utilisez une abstraction adéquate et analysez/parsez les chaînes que vous recevez d'autres API.
+
+### Le type symbole
+
+Les symboles sont une nouveautés du langage, apportée par ECMAScript 6. Un symbole est une valeur primitive **unique** et **immuable** pouvant être utilisée comme clé pour propriété d'un objet (voir ci-après). Dans d'autres langages de programmation, les symboles sont appelés atomes. Pour plus de détails, voir les pages {{Glossary("Symbol","Symbole")}} et le constructeur {{jsxref("Symbol")}} JavaScript.
+
+## Les objets
+
+En informatique, un objet est une valeur conservée en mémoire à laquelle on fait référence grâce à un {{Glossary("Identifier", "identifiant")}}.
+
+### Propriétés
+
+En JavaScript, les objets peuvent être considérés comme des collections de propriétés. En utilisant [un littéral objet](/fr/docs/Web/JavaScript/Guide/Valeurs,_variables,_et_littéraux#Les_litt.C3.A9raux_objets), il est possible d'initialiser un ensemble limité de propriétés ; d'autres propriétés peuvent ensuite être ajoutées et/ou retirées. Les valeurs des propriétés peuvent être de n'importe quel type, y compris des objets. Cela permet de construire des structures de données complexes. Les propriétés sont identifiées grâce à une « clé ». Une clé peut être une chaîne de caractères ou un symbole.
+
+Il existe deux types de propriétés qui ont certains attributs : des propriétés de données (_data property_) et des propriétés d'accesseur.
+
+#### Propriétés de données
+
+Elles associent une clé avec une valeur et possèdent les attributs suivants :
+
+| Attribut         | Type                               | Description                                                                                                                                                                                                                                                                                                          | Valeur par défaut |
+| ---------------- | ---------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------- |
+| [[Value]]        | N'importe quelle valeur JavaScript | La valeur obtenue lorsqu'on accède à la propriété.                                                                                                                                                                                                                                                                   | `undefined`       |
+| [[Writable]]     | Booléen                            | S'il vaut `false`, la valeur de la propriété (l'attribut [[Value]]) ne peut être changé.                                                                                                                                                                                                                             | `false`           |
+| [[Enumerable]]   | Booléen                            | S'il vaut `true`, la propriété pourra être listée par une boucle [`for...in`](/fr/docs/Web/JavaScript/Reference/Instructions/for...in). Voir également [l'article sur le caractère énumérable des propriétés](/fr/docs/Web/JavaScript/Caract%C3%A8re_%C3%A9num%C3%A9rable_des_propri%C3%A9t%C3%A9s_et_rattachement). | `false`           |
+| [[Configurable]] | Booléen                            | S'il vaut `false`, la propriété ne pourra pas être supprimée, elle ne pourra pas être changée en accesseur et les attributs autres que [[Value]] et [[Writable]] ne pourront pas être modifiés.                                                                                                                      | `false`           |
+
+| Attribut   | Type    | Description                                           |
+| ---------- | ------- | ----------------------------------------------------- |
+| Read-only  | Booléen | État symétrique pour l'attribut ES5 [[Writable]].     |
+| DontEnum   | Booléen | État symétrique pour l'attribut ES5 [[Enumerable]].   |
+| DontDelete | Booléen | État symétrique pour l'attribut ES5 [[Configurable]]. |
+
+#### Propriétés d'accesseur
+
+Ces propriétés associent une clé avec une ou deux fonctions accesseur et mutateur qui permettent de récupérer ou d'enregistrer une valeur. Elles possèdent les attributs suivants :
+
+| Attribut         | Type                               | Description                                                                                                                                                                                                                                            | Valeur par défaut |
+| ---------------- | ---------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------------- |
+| [[Get]]          | Un objet `Function` ou `undefined` | La fonction qui est appelée sans argument afin de récupérer la valeur de la propriété quand on souhaite y accéder. Voir aussi la page sur [`get`](/fr/docs/Web/JavaScript/Reference/Fonctions/get).                                                    | `undefined`       |
+| [[Set]]          | Un objet `Function` ou `undefined` | La fonction, appelée avec un argument qui contient la valeur qu'on souhaite affecter à la valeur et qui est exécutée à chaque fois qu'on souhaite modifier la valeur. Voir aussi la page sur [`set`](/fr/docs/Web/JavaScript/Reference/Fonctions/set). | `undefined`       |
+| [[Enumerable]]   | Booléen                            | S'il vaut `true`, la propriété sera listée dans les boucles [`for...in`](/fr/docs/Web/JavaScript/Reference/Instructions/for...in).                                                                                                                     | `false`           |
+| [[Configurable]] | Booléen                            | S'il vaut `false`, la propriété ne pourra pas être supprimée et ne pourra pas être transformée en une propriété de données.                                                                                                                            | `false`           |
+
+> **Note :** Les attributs sont généralement utilisés par le moteur JavaScript plutôt qu'explicitement dans les scripts. Il est impossible d'y accéder directement (plus d'informations sur {{jsxref("Object.defineProperty()")}}. C'est pour cela que l'attribut est décrit entre double crochets (comme dans la spécification ECMAScript) plutôt qu'entre crochets simples qui pourraient laisser penser à une propriété « classique ».
+
+### Les objets « normaux » et les fonctions
+
+Un objet JavaScript est un ensemble de correspondances entre des clés et des valeurs. Les clés sont représentées par des chaînes ou des symboles ({{jsxref("Symbol")}}). Les valeurs peuvent être de n'importe quel type. Grâce à cela, les objets peuvent, naturellement, être utilisés comme[ tables de hachage](https://fr.wikipedia.org/wiki/Table_de_hachage).
+
+Les fonctions sont des objets classiques à la seule différence qu'on peut les appeler.
+
+### Les dates
+
+Lorsqu'on souhaite représenter des dates, il est tout indiqué d'utiliser le type utilitaire natif [`Date`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Date) de JavaScript.
+
+### Les collections indexées : les tableaux (_Arrays_) et les tableaux typés (_Typed Arrays_)
+
+[Les tableaux](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array) (ou _Arrays_ en anglais) sont des objets natifs qui permettent d'organiser des valeurs numérotées et qui ont une relation particulière avec la propriété `length`. De plus, les tableaux héritent de `Array.prototype` qui permet de bénéficier de plusieurs méthodes pour manipuler les tableaux. Par exemple, [`indexOf`](/fr/docs/JavaScript/Reference/Objets_globaux/Array/indexOf) qui permet de rechercher une valeur dans le tableau ou [`push`](/fr/docs/JavaScript/Reference/Global_Objects/Array/push) qui permet d'ajouter un élément au tableau. Les tableaux sont donc indiqués quand on souhaite représenter des listes de valeurs ou d'objets.
+
+[Les tableaux typés](/fr/docs/JavaScript/Tableaux_typ%C3%A9s) (_Typed Arrays_ en anglais) ont été ajoutés avec ECMAScript 6 et offrent une vue sous forme d'un tableau pour manipuler des tampons de données binaires. Le tableau qui suit illustre les types de données équivalents en C :
+
+{{page("fr/docs/Web/JavaScript/Reference/Objets_globaux/TypedArray", "Les_objets_TypedArray", "", 0, 3)}}
+
+### Les collections avec clés : Maps, Sets, WeakMaps, WeakSets
+
+Ces structures de données utilisent des clés pour référencer des objets. Elles ont été introduites avec ECMAScript 6. {{jsxref("Set")}} et {{jsxref("WeakSet")}} représentent des ensembles d'objets, {{jsxref("Map")}} et {{jsxref("WeakMap")}} associent une valeur à un objet. Il est possible d'énumérer les valeurs contenues dans un objet Map mais pas dans un objet WeakMap. Les WeakMaps quant à eux permettent certaines optimisations dans la gestion de la mémoire et le travail du ramasse-miettes.
+
+Il est possible d'implémenter les Maps et Sets grâce à ECMAScript 5. Cependant, comme les objets ne peuvent pas être comparés (avec une relation d'ordre par exemple), la complexité obtenue pour rechercher un élément serait nécessairement linéaire. Les implémentations natives (y compris celle des WeakMaps) permettent d'obtenir des performances logarithmiques voire constantes.
+
+Généralement, si on voulait lier des données à un nœud DOM, on pouvait utiliser les attributs `data-*` ou définir les propriétés à un même l'objet. Malheureusement, cela rendait les données disponibles à n'importe quel script fonctionnant dans le même contexte. Les Maps et WeakMaps permettent de gérer plus simplement une liaison « privée » entre des données et un objet.
+
+### Les données structurées : JSON
+
+JSON (JavaScript Object Notation) est un format d'échange de données léger, dérivé de JavaScript et utilisé par plusieurs langages de programmation. JSON permet ainsi de construire des structures de données universelles pouvant être échangées entre programmes. Pour plus d'informations, voir les pages {{Glossary("JSON")}} et {{jsxref("JSON")}}.
+
+### Les autres objets de la bibliothèque standard
+
+JavaScript possède une bibliothèque standard d'objets natifs. Veuillez lire la [référence](/fr/docs/Web/JavaScript/Reference/Objets_globaux) pour en savoir plus sur ces objets.
+
+## Déterminer le type des objets grâce à l'opérateur `typeof`
+
+L'opérateur `typeof` peut vous aider à déterminer le type d'une variable. Pour plus d'informations et sur les cas particuliers, voir la page de la référence sur [cet opérateur](/fr/docs/JavaScript/Reference/R%C3%A9f%C3%A9rence_JavaScript/Op%C3%A9rateurs/Op%C3%A9rateurs_sp%C3%A9ciaux/L'op%C3%A9rateur_typeof).
+
+## Spécifications
+
+| Spécification                                                                                                                        | État                         | Commentaires                                       |
+| ------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------- | -------------------------------------------------- |
+| {{SpecName('ES1')}}                                                                                                             | {{Spec2('ES1')}}         | Définition initiale.                               |
+| {{SpecName('ES5.1', '#sec-8', 'Types')}}                                                                                 | {{Spec2('ES5.1')}}     |                                                    |
+| {{SpecName('ES2015', '#sec-ecmascript-data-types-and-values', 'ECMAScript Data Types and Values')}} | {{Spec2('ES2015')}}     | Ajout des symboles ({{jsxref("Symbol")}}). |
+| {{SpecName('ESDraft', '#sec-ecmascript-data-types-and-values', 'ECMAScript Data Types and Values')}} | {{Spec2('ESDraft')}} |                                                    |
+
+## Voir aussi
+
+- [Un ensemble de structures de données usuelles et d'algorithmes classiques, en JavaScript, par Nicholas Zakas](https://github.com/nzakas/computer-science-in-javascript/) (en anglais)
+- [Implémentations de différentes structures de données et utilitaires de recherche en JavaScript](https://github.com/monmohan/DataStructures_In_Javascript) (en anglais)
diff --git a/files/fr/web/javascript/enumerability_and_ownership_of_properties/index.html b/files/fr/web/javascript/enumerability_and_ownership_of_properties/index.html
deleted file mode 100644
index a2a24711a8..0000000000
--- a/files/fr/web/javascript/enumerability_and_ownership_of_properties/index.html
+++ /dev/null
@@ -1,325 +0,0 @@
----
-title: Rattachement et caractère énumérable des propriétés
-slug: Web/JavaScript/Enumerability_and_ownership_of_properties
-tags:
-  - Guide
-  - Intermédiaire
-  - JavaScript
-translation_of: Web/JavaScript/Enumerability_and_ownership_of_properties
-original_slug: Web/JavaScript/Caractère_énumérable_des_propriétés_et_rattachement
----
-<div>{{JsSidebar("More")}}</div>
-
-<p>Les propriétés dites « énumérables » sont celles pour lesquelles la caractéristique interne <code>[[Enumerable]]</code> vaut <code>true</code>. C'est le cas par défaut pour les propriétés qui sont créées grâce à une affectation simple ou grâce à un initialisateur de propriété. Les propriétés définies avec des méthodes analogues à {{jsxref("Object.defineProperty()")}} auront <code>[[Enumerable]]</code> à <code>false</code>). Les propriétés énumérables sont celles qui seront parcourues dans une boucle {{jsxref("Instructions/for...in","for..in")}} (sauf si le nom de la propriété est un {{jsxref("Symbol")}}).</p>
-
-<p>Le rattachement des propriétés est détérminé selon que la propriété est directement rattachée à l'objet et non à sa chaîne de prototypes. Il est également possible de récupérer l'ensemble des propriétés d'un objet. Dans le tableau suivant, on détaille les moyens possibles pour détecter, parcourir, énumérer, récupérer les propriétés d'un objet.</p>
-
-<table>
- <caption>Caractère énumérable et rattachement - méthodes natives pour détecter, récupérer et parcourir les propriétés</caption>
- <tbody>
-  <tr>
-   <th>Fonctionnalité</th>
-   <th>Rattachement direct à l'objet</th>
-   <th>Rattachement direct à l'objet et sur la chaîne de prototypes</th>
-   <th>Uniquement sur la chaîne de prototypes</th>
-  </tr>
-  <tr>
-   <td>Détection</td>
-   <td>
-    <table>
-     <thead>
-      <tr>
-       <th scope="col">Énumérables</th>
-       <th scope="col">Non-énumérables</th>
-       <th scope="col">Toutes</th>
-      </tr>
-     </thead>
-     <tbody>
-      <tr>
-       <td>
-        <p><code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object/propertyIsEnumerable">propertyIsEnumerable()</a></code></p>
-
-        <p><code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object/hasOwnProperty">hasOwnProperty()</a></code></p>
-       </td>
-       <td><code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object/hasOwnProperty">hasOwnProperty()</a> - </code>en utilisant <code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object/propertyIsEnumerable">propertyIsEnumerable()</a></code> afin d'exclure les propriétés énumérables</td>
-       <td><code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object/hasOwnProperty">hasOwnProperty()</a></code></td>
-      </tr>
-     </tbody>
-    </table>
-   </td>
-   <td>
-    <table>
-     <thead>
-      <tr>
-       <th scope="col">Énumerables</th>
-       <th scope="col">Non-énumérables</th>
-       <th scope="col">Toutes</th>
-      </tr>
-     </thead>
-     <tbody>
-      <tr>
-       <td>Cette fonctionnalité n'est pas disponible sans code supplémentaire.</td>
-       <td>Cette fonctionnalité n'est pas disponible sans code supplémentaire.</td>
-       <td><code><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_in">in</a></code></td>
-      </tr>
-     </tbody>
-    </table>
-   </td>
-   <td>Cette fonctionnalité n'est pas disponible sans code supplémentaire.</td>
-  </tr>
-  <tr>
-   <td>Récupération</td>
-   <td>
-    <table>
-     <thead>
-      <tr>
-       <th scope="col">Énumérables</th>
-       <th scope="col">Non-énumérables</th>
-       <th scope="col">Toutes</th>
-      </tr>
-     </thead>
-     <tbody>
-      <tr>
-       <td>
-        <p><code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object/keys">Object.keys()</a></code></p>
-
-        <p><code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object/getOwnPropertyNames">getOwnPropertyNames()</a></code></p>
-
-        <p><code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object/getOwnPropertySymbols">getOwnPropertySymbols()</a></code></p>
-       </td>
-       <td><code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object/getOwnPropertyNames">getOwnPropertyNames()</a></code> <code>- <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object/getOwnPropertySymbols">getOwnPropertySymbols()</a> </code>en utilisant <code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object/propertyIsEnumerable">propertyIsEnumerable()</a></code> afin d'exclure les propriétés énumérables</td>
-       <td>
-        <p><code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object/getOwnPropertyNames">getOwnPropertyNames()</a></code></p>
-
-        <p><code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object/getOwnPropertySymbols">getOwnPropertySymbols()</a></code></p>
-       </td>
-      </tr>
-     </tbody>
-    </table>
-   </td>
-   <td>Cette fonctionnalité n'est pas disponible sans code supplémentaire.</td>
-   <td>Cette fonctionnalité n'est pas disponible sans code supplémentaire.</td>
-  </tr>
-  <tr>
-   <td>Parcours</td>
-   <td>
-    <table>
-     <thead>
-      <tr>
-       <th scope="col">Énumérables</th>
-       <th scope="col">Non-énumérables</th>
-       <th scope="col">Toutes</th>
-      </tr>
-     </thead>
-     <tbody>
-      <tr>
-       <td>
-        <p><code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object/keys">Object.keys()</a></code></p>
-
-        <p><code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object/getOwnPropertyNames">getOwnPropertyNames()</a></code></p>
-
-        <p><code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object/getOwnPropertySymbols">getOwnPropertySymbols()</a></code></p>
-       </td>
-       <td><code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object/getOwnPropertyNames">getOwnPropertyNames()</a> - <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object/getOwnPropertySymbols">getOwnPropertySymbols()</a></code>en utilisant <code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object/propertyIsEnumerable">propertyIsEnumerable()</a></code> afin d'exclure les propriétés énumérables</td>
-       <td>
-        <p><code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object/getOwnPropertyNames">getOwnPropertyNames()</a></code></p>
-
-        <p><code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object/getOwnPropertySymbols">getOwnPropertySymbols()</a></code></p>
-       </td>
-      </tr>
-     </tbody>
-    </table>
-   </td>
-   <td>
-    <table>
-     <thead>
-      <tr>
-       <th scope="col">Énumerables</th>
-       <th scope="col">Non-énumérables</th>
-       <th scope="col">Toutes</th>
-      </tr>
-     </thead>
-     <tbody>
-      <tr>
-       <td><code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/for...in">for..in</a></code></td>
-       <td>Cette fonctionnalité n'est pas disponible sans code supplémentaire.</td>
-       <td>Cette fonctionnalité n'est pas disponible sans code supplémentaire.</td>
-      </tr>
-     </tbody>
-    </table>
-   </td>
-   <td>Cette fonctionnalité n'est pas disponible sans code supplémentaire.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Obtenir_les_propriétés_selon_leur_caractère_énumérable_et_selon_leur_rattachement">Obtenir les propriétés selon leur caractère énumérable et selon leur rattachement</h2>
-
-<p>Dans la plupart des cas, ce n'est pas l'algorithme le plus efficace mais il est présenté ici à des fins explicatives.</p>
-
-<ul>
- <li>On peut détecter la présence d'une propriété grâce à <code>RecuperateurDePropriete.laMethodeSouhaitee(obj).indexOf(prop) &gt; -1</code></li>
- <li>On peut parcourir les propriétés souhaitées avec <code>RecuperateurDePropriete.laMethodeSouhaitee(obj).forEach(function (value, prop) {});</code> (on peut aussi utiliser <code>filter()</code>, <code>map()</code>, etc.)</li>
-</ul>
-
-<pre class="brush: js">var RecuperateurDePropriete = {
-    getOwnEnumerables: function (obj) {
-        return this._getPropertyNames(obj, true, false, this._enumerable);
-         // On pourrait également utiliser for..in qu'on filtre avec hasOwnProperty
-         // ou encore : return Object.keys(obj);
-    },
-    getOwnNonenumerables: function (obj) {
-        return this._getPropertyNames(obj, true, false, this._notEnumerable);
-    },
-    getOwnEnumerablesAndNonenumerables: function (obj) {
-        return this._getPropertyNames(obj, true, false, this._enumerableAndNotEnumerable);
-        // On peut également simplement utiliser : return Object.getOwnPropertyNames(obj);
-    },
-    getPrototypeEnumerables: function (obj) {
-        return this._getPropertyNames(obj, false, true, this._enumerable);
-    },
-    getPrototypeNonenumerables: function (obj) {
-        return this._getPropertyNames(obj, false, true, this._notEnumerable);
-    },
-    getPrototypeEnumerablesAndNonenumerables: function (obj) {
-        return this._getPropertyNames(obj, false, true, this._enumerableAndNotEnumerable);
-    },
-    getOwnAndPrototypeEnumerables: function (obj) {
-        return this._getPropertyNames(obj, true, true, this._enumerable);
-        // On pourra aussi utiliser for..in sans filtre
-    },
-    getOwnAndPrototypeNonenumerables: function (obj) {
-        return this._getPropertyNames(obj, true, true, this._notEnumerable);
-    },
-    getOwnAndPrototypeEnumerablesAndNonenumerables: function (obj) {
-        return this._getPropertyNames(obj, true, true, this._enumerableAndNotEnumerable);
-    },
-    // Fonctions de rappels statiques
-    _enumerable : function (obj, prop) {
-        return obj.propertyIsEnumerable(prop);
-    },
-    _notEnumerable : function (obj, prop) {
-        return !obj.propertyIsEnumerable(prop);
-    },
-    _enumerableAndNotEnumerable : function (obj, prop) {
-        return true;
-    },
-    // Inspirée par https://stackoverflow.com/a/8024294/271577
-    _getPropertyNames : function getAllPropertyNames(obj, iterateSelfBool, iteratePrototypeBool, includePropCb) {
-        var props = [];
-
-        do {
-            if (iterateSelfBool) {
-                Object.getOwnPropertyNames(obj).forEach(function (prop) {
-                    if (props.indexOf(prop) === -1 &amp;&amp; includePropCb(obj, prop)) {
-                        props.push(prop);
-                    }
-                });
-            }
-            if (!iteratePrototypeBool) {
-                break;
-            }
-            iterateSelfBool = true;
-        } while (obj = Object.getPrototypeOf(obj));
-
-        return props;
-    }
-};</pre>
-
-<h2 id="Tableau_de_détection">Tableau de détection</h2>
-
-<table>
- <thead>
-  <tr>
-   <th scope="row"></th>
-   <th scope="col"><code>in</code></th>
-   <th scope="col"><code>for..in</code></th>
-   <th scope="col"><code>obj.hasOwnProperty()</code></th>
-   <th scope="col"><code>obj.propertyIsEnumerable()</code></th>
-   <th scope="col"><code>Object.keys()</code></th>
-   <th scope="col"><code>Object.getOwnPropertyNames()</code></th>
-   <th scope="col"><code>Object.getOwnPropertyDescriptors()</code></th>
-   <th scope="col"><code>Reflect.ownKeys()</code></th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <th scope="row">Propriétés énumérables</th>
-   <td>true</td>
-   <td>true</td>
-   <td>true</td>
-   <td>true</td>
-   <td>true</td>
-   <td>true</td>
-   <td>true</td>
-   <td>true</td>
-  </tr>
-  <tr>
-   <th scope="row">Propriétés non-énumérables</th>
-   <td>true</td>
-   <td>false</td>
-   <td>true</td>
-   <td>false</td>
-   <td>false</td>
-   <td>true</td>
-   <td>true</td>
-   <td>true</td>
-  </tr>
-  <tr>
-   <th scope="row">Propriétés dont les clés sont des symboles</th>
-   <td>true</td>
-   <td>false</td>
-   <td>true</td>
-   <td>false</td>
-   <td>false</td>
-   <td>false</td>
-   <td>true</td>
-   <td>true</td>
-  </tr>
-  <tr>
-   <th scope="row">Propriétés héritées et énumérables</th>
-   <td>true</td>
-   <td>true</td>
-   <td>false</td>
-   <td>false</td>
-   <td>false</td>
-   <td>false</td>
-   <td>false</td>
-   <td>false</td>
-  </tr>
-  <tr>
-   <th scope="row">Propriétés héritées et non-énumérables</th>
-   <td>true</td>
-   <td>false</td>
-   <td>false</td>
-   <td>false</td>
-   <td>false</td>
-   <td>false</td>
-   <td>false</td>
-   <td>false</td>
-  </tr>
-  <tr>
-   <th scope="row">Propriétés héritées dont les clés sont des symboles</th>
-   <td>true</td>
-   <td>false</td>
-   <td>false</td>
-   <td>false</td>
-   <td>false</td>
-   <td>false</td>
-   <td>false</td>
-   <td>false</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><code><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_in">in</a></code></li>
- <li><code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/for...in">for..in</a></code></li>
- <li>{{jsxref("Object.hasOwnProperty()")}}</li>
- <li>{{jsxref("Object.propertyIsEnumerable()")}}</li>
- <li>{{jsxref("Object.getOwnPropertyNames()")}}</li>
- <li>{{jsxref("Object.keys()")}}</li>
- <li>{{jsxref("Object.getOwnPropertyDescriptors()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/enumerability_and_ownership_of_properties/index.md b/files/fr/web/javascript/enumerability_and_ownership_of_properties/index.md
new file mode 100644
index 0000000000..cad3505a3d
--- /dev/null
+++ b/files/fr/web/javascript/enumerability_and_ownership_of_properties/index.md
@@ -0,0 +1,495 @@
+---
+title: Rattachement et caractère énumérable des propriétés
+slug: Web/JavaScript/Enumerability_and_ownership_of_properties
+tags:
+  - Guide
+  - Intermédiaire
+  - JavaScript
+translation_of: Web/JavaScript/Enumerability_and_ownership_of_properties
+original_slug: Web/JavaScript/Caractère_énumérable_des_propriétés_et_rattachement
+---
+{{JsSidebar("More")}}
+
+Les propriétés dites « énumérables » sont celles pour lesquelles la caractéristique interne `[[Enumerable]]` vaut `true`. C'est le cas par défaut pour les propriétés qui sont créées grâce à une affectation simple ou grâce à un initialisateur de propriété. Les propriétés définies avec des méthodes analogues à {{jsxref("Object.defineProperty()")}} auront `[[Enumerable]]` à `false`). Les propriétés énumérables sont celles qui seront parcourues dans une boucle {{jsxref("Instructions/for...in","for..in")}} (sauf si le nom de la propriété est un {{jsxref("Symbol")}}).
+
+Le rattachement des propriétés est détérminé selon que la propriété est directement rattachée à l'objet et non à sa chaîne de prototypes. Il est également possible de récupérer l'ensemble des propriétés d'un objet. Dans le tableau suivant, on détaille les moyens possibles pour détecter, parcourir, énumérer, récupérer les propriétés d'un objet.
+
+<table>
+  <caption>
+    Caractère énumérable et rattachement - méthodes natives pour détecter,
+    récupérer et parcourir les propriétés
+  </caption>
+  <tbody>
+    <tr>
+      <th>Fonctionnalité</th>
+      <th>Rattachement direct à l'objet</th>
+      <th>Rattachement direct à l'objet et sur la chaîne de prototypes</th>
+      <th>Uniquement sur la chaîne de prototypes</th>
+    </tr>
+    <tr>
+      <td>Détection</td>
+      <td>
+        <table>
+          <thead>
+            <tr>
+              <th scope="col">Énumérables</th>
+              <th scope="col">Non-énumérables</th>
+              <th scope="col">Toutes</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td>
+                <p>
+                  <code
+                    ><a
+                      href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object/propertyIsEnumerable"
+                      >propertyIsEnumerable()</a
+                    ></code
+                  >
+                </p>
+                <p>
+                  <code
+                    ><a
+                      href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object/hasOwnProperty"
+                      >hasOwnProperty()</a
+                    ></code
+                  >
+                </p>
+              </td>
+              <td>
+                <code
+                  ><a
+                    href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object/hasOwnProperty"
+                    >hasOwnProperty()</a
+                  >
+                  - </code
+                >en utilisant <code
+                  ><a
+                    href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object/propertyIsEnumerable"
+                    >propertyIsEnumerable()</a
+                  ></code
+                >
+                afin d'exclure les propriétés énumérables
+              </td>
+              <td>
+                <code
+                  ><a
+                    href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object/hasOwnProperty"
+                    >hasOwnProperty()</a
+                  ></code
+                >
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </td>
+      <td>
+        <table>
+          <thead>
+            <tr>
+              <th scope="col">Énumerables</th>
+              <th scope="col">Non-énumérables</th>
+              <th scope="col">Toutes</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td>
+                Cette fonctionnalité n'est pas disponible sans code
+                supplémentaire.
+              </td>
+              <td>
+                Cette fonctionnalité n'est pas disponible sans code
+                supplémentaire.
+              </td>
+              <td>
+                <code
+                  ><a
+                    href="/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_in"
+                    >in</a
+                  ></code
+                >
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </td>
+      <td>
+        Cette fonctionnalité n'est pas disponible sans code supplémentaire.
+      </td>
+    </tr>
+    <tr>
+      <td>Récupération</td>
+      <td>
+        <table>
+          <thead>
+            <tr>
+              <th scope="col">Énumérables</th>
+              <th scope="col">Non-énumérables</th>
+              <th scope="col">Toutes</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td>
+                <p>
+                  <code
+                    ><a
+                      href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object/keys"
+                      >Object.keys()</a
+                    ></code
+                  >
+                </p>
+                <p>
+                  <code
+                    ><a
+                      href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object/getOwnPropertyNames"
+                      >getOwnPropertyNames()</a
+                    ></code
+                  >
+                </p>
+                <p>
+                  <code
+                    ><a
+                      href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object/getOwnPropertySymbols"
+                      >getOwnPropertySymbols()</a
+                    ></code
+                  >
+                </p>
+              </td>
+              <td>
+                <code
+                  ><a
+                    href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object/getOwnPropertyNames"
+                    >getOwnPropertyNames()</a
+                  ></code
+                >
+                <code
+                  >- <a
+                    href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object/getOwnPropertySymbols"
+                    >getOwnPropertySymbols()</a
+                  > </code
+                >en utilisant <code
+                  ><a
+                    href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object/propertyIsEnumerable"
+                    >propertyIsEnumerable()</a
+                  ></code
+                >
+                afin d'exclure les propriétés énumérables
+              </td>
+              <td>
+                <p>
+                  <code
+                    ><a
+                      href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object/getOwnPropertyNames"
+                      >getOwnPropertyNames()</a
+                    ></code
+                  >
+                </p>
+                <p>
+                  <code
+                    ><a
+                      href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object/getOwnPropertySymbols"
+                      >getOwnPropertySymbols()</a
+                    ></code
+                  >
+                </p>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </td>
+      <td>
+        Cette fonctionnalité n'est pas disponible sans code supplémentaire.
+      </td>
+      <td>
+        Cette fonctionnalité n'est pas disponible sans code supplémentaire.
+      </td>
+    </tr>
+    <tr>
+      <td>Parcours</td>
+      <td>
+        <table>
+          <thead>
+            <tr>
+              <th scope="col">Énumérables</th>
+              <th scope="col">Non-énumérables</th>
+              <th scope="col">Toutes</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td>
+                <p>
+                  <code
+                    ><a
+                      href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object/keys"
+                      >Object.keys()</a
+                    ></code
+                  >
+                </p>
+                <p>
+                  <code
+                    ><a
+                      href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object/getOwnPropertyNames"
+                      >getOwnPropertyNames()</a
+                    ></code
+                  >
+                </p>
+                <p>
+                  <code
+                    ><a
+                      href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object/getOwnPropertySymbols"
+                      >getOwnPropertySymbols()</a
+                    ></code
+                  >
+                </p>
+              </td>
+              <td>
+                <code
+                  ><a
+                    href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object/getOwnPropertyNames"
+                    >getOwnPropertyNames()</a
+                  >
+                  -
+                  <a
+                    href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object/getOwnPropertySymbols"
+                    >getOwnPropertySymbols()</a
+                  ></code
+                >en utilisant <code
+                  ><a
+                    href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object/propertyIsEnumerable"
+                    >propertyIsEnumerable()</a
+                  ></code
+                >
+                afin d'exclure les propriétés énumérables
+              </td>
+              <td>
+                <p>
+                  <code
+                    ><a
+                      href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object/getOwnPropertyNames"
+                      >getOwnPropertyNames()</a
+                    ></code
+                  >
+                </p>
+                <p>
+                  <code
+                    ><a
+                      href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object/getOwnPropertySymbols"
+                      >getOwnPropertySymbols()</a
+                    ></code
+                  >
+                </p>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </td>
+      <td>
+        <table>
+          <thead>
+            <tr>
+              <th scope="col">Énumerables</th>
+              <th scope="col">Non-énumérables</th>
+              <th scope="col">Toutes</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td>
+                <code
+                  ><a
+                    href="/fr/docs/Web/JavaScript/Reference/Instructions/for...in"
+                    >for..in</a
+                  ></code
+                >
+              </td>
+              <td>
+                Cette fonctionnalité n'est pas disponible sans code
+                supplémentaire.
+              </td>
+              <td>
+                Cette fonctionnalité n'est pas disponible sans code
+                supplémentaire.
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </td>
+      <td>
+        Cette fonctionnalité n'est pas disponible sans code supplémentaire.
+      </td>
+    </tr>
+  </tbody>
+</table>
+
+## Obtenir les propriétés selon leur caractère énumérable et selon leur rattachement
+
+Dans la plupart des cas, ce n'est pas l'algorithme le plus efficace mais il est présenté ici à des fins explicatives.
+
+- On peut détecter la présence d'une propriété grâce à `RecuperateurDePropriete.laMethodeSouhaitee(obj).indexOf(prop) > -1`
+- On peut parcourir les propriétés souhaitées avec `RecuperateurDePropriete.laMethodeSouhaitee(obj).forEach(function (value, prop) {});` (on peut aussi utiliser `filter()`, `map()`, etc.)
+
+```js
+var RecuperateurDePropriete = {
+    getOwnEnumerables: function (obj) {
+        return this._getPropertyNames(obj, true, false, this._enumerable);
+         // On pourrait également utiliser for..in qu'on filtre avec hasOwnProperty
+         // ou encore : return Object.keys(obj);
+    },
+    getOwnNonenumerables: function (obj) {
+        return this._getPropertyNames(obj, true, false, this._notEnumerable);
+    },
+    getOwnEnumerablesAndNonenumerables: function (obj) {
+        return this._getPropertyNames(obj, true, false, this._enumerableAndNotEnumerable);
+        // On peut également simplement utiliser : return Object.getOwnPropertyNames(obj);
+    },
+    getPrototypeEnumerables: function (obj) {
+        return this._getPropertyNames(obj, false, true, this._enumerable);
+    },
+    getPrototypeNonenumerables: function (obj) {
+        return this._getPropertyNames(obj, false, true, this._notEnumerable);
+    },
+    getPrototypeEnumerablesAndNonenumerables: function (obj) {
+        return this._getPropertyNames(obj, false, true, this._enumerableAndNotEnumerable);
+    },
+    getOwnAndPrototypeEnumerables: function (obj) {
+        return this._getPropertyNames(obj, true, true, this._enumerable);
+        // On pourra aussi utiliser for..in sans filtre
+    },
+    getOwnAndPrototypeNonenumerables: function (obj) {
+        return this._getPropertyNames(obj, true, true, this._notEnumerable);
+    },
+    getOwnAndPrototypeEnumerablesAndNonenumerables: function (obj) {
+        return this._getPropertyNames(obj, true, true, this._enumerableAndNotEnumerable);
+    },
+    // Fonctions de rappels statiques
+    _enumerable : function (obj, prop) {
+        return obj.propertyIsEnumerable(prop);
+    },
+    _notEnumerable : function (obj, prop) {
+        return !obj.propertyIsEnumerable(prop);
+    },
+    _enumerableAndNotEnumerable : function (obj, prop) {
+        return true;
+    },
+    // Inspirée par https://stackoverflow.com/a/8024294/271577
+    _getPropertyNames : function getAllPropertyNames(obj, iterateSelfBool, iteratePrototypeBool, includePropCb) {
+        var props = [];
+
+        do {
+            if (iterateSelfBool) {
+                Object.getOwnPropertyNames(obj).forEach(function (prop) {
+                    if (props.indexOf(prop) === -1 && includePropCb(obj, prop)) {
+                        props.push(prop);
+                    }
+                });
+            }
+            if (!iteratePrototypeBool) {
+                break;
+            }
+            iterateSelfBool = true;
+        } while (obj = Object.getPrototypeOf(obj));
+
+        return props;
+    }
+};
+```
+
+## Tableau de détection
+
+<table>
+  <thead>
+    <tr>
+      <th scope="row"></th>
+      <th scope="col"><code>in</code></th>
+      <th scope="col"><code>for..in</code></th>
+      <th scope="col"><code>obj.hasOwnProperty()</code></th>
+      <th scope="col"><code>obj.propertyIsEnumerable()</code></th>
+      <th scope="col"><code>Object.keys()</code></th>
+      <th scope="col"><code>Object.getOwnPropertyNames()</code></th>
+      <th scope="col"><code>Object.getOwnPropertyDescriptors()</code></th>
+      <th scope="col"><code>Reflect.ownKeys()</code></th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <th scope="row">Propriétés énumérables</th>
+      <td>true</td>
+      <td>true</td>
+      <td>true</td>
+      <td>true</td>
+      <td>true</td>
+      <td>true</td>
+      <td>true</td>
+      <td>true</td>
+    </tr>
+    <tr>
+      <th scope="row">Propriétés non-énumérables</th>
+      <td>true</td>
+      <td>false</td>
+      <td>true</td>
+      <td>false</td>
+      <td>false</td>
+      <td>true</td>
+      <td>true</td>
+      <td>true</td>
+    </tr>
+    <tr>
+      <th scope="row">Propriétés dont les clés sont des symboles</th>
+      <td>true</td>
+      <td>false</td>
+      <td>true</td>
+      <td>false</td>
+      <td>false</td>
+      <td>false</td>
+      <td>true</td>
+      <td>true</td>
+    </tr>
+    <tr>
+      <th scope="row">Propriétés héritées et énumérables</th>
+      <td>true</td>
+      <td>true</td>
+      <td>false</td>
+      <td>false</td>
+      <td>false</td>
+      <td>false</td>
+      <td>false</td>
+      <td>false</td>
+    </tr>
+    <tr>
+      <th scope="row">Propriétés héritées et non-énumérables</th>
+      <td>true</td>
+      <td>false</td>
+      <td>false</td>
+      <td>false</td>
+      <td>false</td>
+      <td>false</td>
+      <td>false</td>
+      <td>false</td>
+    </tr>
+    <tr>
+      <th scope="row">Propriétés héritées dont les clés sont des symboles</th>
+      <td>true</td>
+      <td>false</td>
+      <td>false</td>
+      <td>false</td>
+      <td>false</td>
+      <td>false</td>
+      <td>false</td>
+      <td>false</td>
+    </tr>
+  </tbody>
+</table>
+
+## Voir aussi
+
+- [`in`](/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_in)
+- [`for..in`](/fr/docs/Web/JavaScript/Reference/Instructions/for...in)
+- {{jsxref("Object.hasOwnProperty()")}}
+- {{jsxref("Object.propertyIsEnumerable()")}}
+- {{jsxref("Object.getOwnPropertyNames()")}}
+- {{jsxref("Object.keys()")}}
+- {{jsxref("Object.getOwnPropertyDescriptors()")}}
diff --git a/files/fr/web/javascript/equality_comparisons_and_sameness/index.html b/files/fr/web/javascript/equality_comparisons_and_sameness/index.html
deleted file mode 100644
index d61690d512..0000000000
--- a/files/fr/web/javascript/equality_comparisons_and_sameness/index.html
+++ /dev/null
@@ -1,461 +0,0 @@
----
-title: Utiliser les différents tests d'égalité
-slug: Web/JavaScript/Equality_comparisons_and_sameness
-tags:
-  - Guide
-  - Intermédiaire
-  - JavaScript
-translation_of: Web/JavaScript/Equality_comparisons_and_sameness
-original_slug: Web/JavaScript/Les_différents_tests_d_égalité
----
-<div>{{jsSidebar("Intermediate")}}</div>
-
-<p>JavaScript fournit trois opérations permettant de comparer des valeurs :</p>
-
-<ul>
- <li>L'égalité stricte (ou identité ou « triple égal ») utilisant <code><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_de_comparaison#.C3.89galit.C3.A9_stricte_(.3D.3D.3D)">===</a></code>,</li>
- <li>L'égalité faible (ou « double égal ») utilisant <code><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_de_comparaison#.C3.89galit.C3.A9_simple_(.3D.3D)">==</a></code>,</li>
- <li>{{jsxref("Object.is")}} (ajouté avec ECMAScript 2015).</li>
-</ul>
-
-<p>Ces trois opérations sont associées à quatre algorithmes d'égalité (depuis ES2015) :</p>
-
-<ul>
- <li><a href="#faible">La comparaison d'égalité abstraite (<code>==</code>)</a></li>
- <li><a href="#stricte">La comparaison d'égalité stricte (<code>===</code>)</a>
-  <ul>
-   <li>Utilisée par {{jsxref("Array.indexOf")}} et {{jsxref("Array.lastIndexOf")}} et la sensibilité à la casse</li>
-  </ul>
- </li>
- <li><a href="#SameValueZero"><em>SameValueZero</em> (l'égalité de valeurs nulles)</a>
-  <ul>
-   <li>Utilisée par les constructeurs {{jsxref("TypedArray")}} et {{jsxref("ArrayBuffer")}} et par les opérations associées à {{jsxref("Map")}} et {{jsxref("Set")}}. Depuis ES2016, cet algorithme est également utilisé par {{jsxref("String.includes")}} et {{jsxref("Array.includes")}}</li>
-  </ul>
- </li>
- <li><a href="#sameValue"><em>SameValue</em> (l'égalité de valeurs)</a>
-  <ul>
-   <li>Utilisée partout ailleurs</li>
-  </ul>
- </li>
-</ul>
-
-<p>Selon la comparaison qu'on souhaite effectuer, on choisira une de ces opérations.</p>
-
-<p>En résumé :</p>
-
-<ul>
- <li>L'égalité faible (<code>==</code>) effectuera une conversion des deux éléments à comparer avant d'effectuer la comparaison</li>
- <li>L'égalité stricte (<code>===</code>) effectuera la même comparaison mais sans conversion préalable (elle renverra toujours false si les types des deux valeurs comparées sont différents)</li>
- <li>Enfin <code>Object.is()</code> se comportera comme l'égalité stricte sauf pour les valeurs <code>NaN</code>, <code>-0</code> et <code>+0</code> : pour <code>Object.is()</code>, <code>-0</code> et <code>+0</code> seront différents mais on aura <code>Object.is(NaN, NaN)</code> qui sera <code>true</code>. (Généralement, quand on compare <code>NaN</code> avec <code>NaN</code> en utilisant l'égalité stricte ou l'égalité faible, cela donne <code>false</code> afin de respecter la norme IEEE 754.)</li>
-</ul>
-
-<p>On notera que pour ces trois opérations, la comparaison s'effectue sur les valeurs des éléments qu'on compare, aucune de ces opérations ne permet de comparer la structure des paramètres. Pour des objets non primitifs, <code>x</code> et <code>y</code> qui ont la même structure mais qui sont des objets distincs, chacune des opérations présentées ci-avant sera évaluée à <code>false</code>.</p>
-
-<h2 id="Légalité_stricte_avec">L'égalité stricte avec <code>===</code></h2>
-
-<p>L'égalité stricte compare deux valeurs et teste leur égalité. Aucune des valeurs n'est convertie implicitement en une autre valeur avant que la comparaison soit effectuée. Si les valeurs sont typées différemment, elles sont considérées comme différentes. Si les valeurs sont de même type et ne sont pas des nombres, elles sont considérées égales si elles ont la même valeur. Si les deux valeurs sont des nombres, elles sont égales si elles ont la même valeur et que cette valeur n'est pas NaN ou si l'une vaut +0 et l'autre -0.</p>
-
-<pre class="brush: js">var num = 0;
-var obj = new String("0");
-var str = "0";
-
-console.log(num === num); // true
-console.log(obj === obj); // true
-console.log(str === str); // true
-
-console.log(num === obj); // false
-console.log(num === str); // false
-console.log(obj === str); // false
-console.log(null === undefined); // false
-console.log(obj === null); // false
-console.log(obj === undefined); // false
-</pre>
-
-<p>Ce test d'égalité stricte est presque toujours la meilleure des opérations à considérer pour ces tests. Excepté pour les nombres, la sémantique utilisée est simple : une valeur est uniquement égale à elle-même. En ce qui concerne les nombres, il y a deux cas aux limites à considérer. Le premier cas concerne le nombre zéro positif ou négatif. Cela peut être utile dans la représentation de problèmes mathématiques mais ne constitue pas une différence pour de nombreuses situations : le test d'égalité stricte considère que ce sont les mêmes valeurs. Le second cas concerne la valeur « n'est pas un nombre », <code>NaN</code> (pour « not a number » en anglais) permettant de représenter certaines entités mathématiques : la somme des deux infinis (positif et négatif) par exemple. Le test d'égalité stricte considère que <code>NaN</code> est différent de toutes les valeurs, y compris lui-même. (N.B. : Le seul cas de figure pour lequel on a <code>(x !== x)</code> qui renvoie <code>true</code> est lorsque x vaut <code>NaN</code>.)</p>
-
-<h2 id="Légalité_faible_avec">L'égalité faible avec <code>==</code></h2>
-
-<p>Le test d'égalité faible compare deux valeurs <em>après</em> les avoir converties en valeurs d'un même type. Une fois converties (la conversion peut s'effectuer pour l'une ou les deux valeurs), la comparaison finale est la même que celle effectuée par <code>===</code>. L'égalité faible est <em>symétrique </em>: <code>A == B</code> aura toujours la même signification que <code>B == A</code> pour toute valeur de A et B.</p>
-
-<p>La comparaison d'égalité est effectuée comme suit pour des opérandes de différents types :</p>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="row"></th>
-   <th colspan="7" scope="col">Opérande B</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <th scope="row"></th>
-   <td></td>
-   <td>Undefined</td>
-   <td>Null</td>
-   <td>Number</td>
-   <td>String</td>
-   <td>Boolean</td>
-   <td>Object</td>
-  </tr>
-  <tr>
-   <th colspan="1" rowspan="6" scope="row">Opérande A</th>
-   <td>Undefined</td>
-   <td><code>true</code></td>
-   <td><code>true</code></td>
-   <td><code>false</code></td>
-   <td><code>false</code></td>
-   <td><code>false</code></td>
-   <td><code>false</code></td>
-  </tr>
-  <tr>
-   <td>Null</td>
-   <td><code>true</code></td>
-   <td><code>true</code></td>
-   <td><code>false</code></td>
-   <td><code>false</code></td>
-   <td><code>false</code></td>
-   <td><code>false</code></td>
-  </tr>
-  <tr>
-   <td>Number</td>
-   <td><code>false</code></td>
-   <td><code>false</code></td>
-   <td><code>A === B</code></td>
-   <td><code>A === ToNumber(B)</code></td>
-   <td><code>A === ToNumber(B)</code></td>
-   <td><code>A == ToPrimitive(B)</code></td>
-  </tr>
-  <tr>
-   <td>String</td>
-   <td><code>false</code></td>
-   <td><code>false</code></td>
-   <td><code>ToNumber(A) === B</code></td>
-   <td><code>A === B</code></td>
-   <td><code>ToNumber(A) === ToNumber(B)</code></td>
-   <td><code>A == ToPrimitive(B)</code></td>
-  </tr>
-  <tr>
-   <td>Boolean</td>
-   <td><code>false</code></td>
-   <td><code>false</code></td>
-   <td><code>ToNumber(A) === B</code></td>
-   <td><code>ToNumber(A) === ToNumber(B)</code></td>
-   <td><code>A === B</code></td>
-   <td><code>false</code></td>
-  </tr>
-  <tr>
-   <td>Object</td>
-   <td><code>false</code></td>
-   <td><code>false</code></td>
-   <td><code>ToPrimitive(A) == B</code></td>
-   <td><code>ToPrimitive(A) == B</code></td>
-   <td><code>ToPrimitive(A) == ToNumber(B)</code></td>
-   <td>
-    <p><code>A === B</code></p>
-   </td>
-  </tr>
- </tbody>
-</table>
-
-<p>Dans le tableau ci-dessus, l'expression <code>ToNumber(A)</code> correspond à une tentative de convertir l'argument en un nombre avant la comparaison. Le résultat obtenu est équivalent à <code>+A</code> (l'opérateur unaire +). <code>ToPrimitive(A)</code> correspond à une tentative de convertir l'argument en une valeur primitive grâce à plusieurs méthodes comme <code>A.toString</code> et <code>A.valueOf</code>.</p>
-
-<p>Selon ECMAScript, au sens de l'égalité faible, tous les objets sont différents de <code>undefined</code> et de <code>null</code>. Cependant, la plupart des navigateurs autorisent, dans certains contextes, unensemble restreint d'objets (notamment l'objet <code>document.all</code>), à agir comme s'ils émulaient la valeur <code>undefined</code>. L'égalité faible est un de ces contextes. Pour tous les autres cas, un objet ne sera jamais approximativement égal à <code>undefined</code> ou à <code>null</code>.</p>
-
-<pre class="brush: js">var num = 0;
-var obj = new String("0");
-var str = "0";
-
-console.log(num == num); // true
-console.log(obj == obj); // true
-console.log(str == str); // true
-
-console.log(num == obj); // true
-console.log(num == str); // true
-console.log(obj == str); // true
-console.log(null == undefined); // true
-
-// Les deux assertions qui suivent sont fausses
-// sauf dans certains cas exceptionnels
-console.log(obj == null);
-console.log(obj == undefined);
-</pre>
-
-<p>Certains développeurs considèrent que ce n'est jamais une bonne idée d'utiliser l'égalilté faible. Le résultat d'une comparaison utilisant l'égalité stricte est plus simple à appréhender et à prédire, de plus il n'y a aucune conversion implicite ce qui rend le test plus rapide.</p>
-
-<h2 id="Égalité_de_valeurs">Égalité de valeurs</h2>
-
-<p>L'égalité de valeurs répond à un dernier cas d'utilisation : savoir si deux valeurs sont fonctionnellement identiques pour tout contexte. (Ce cas d'utilisation est un exemple du <a href="https://fr.wikipedia.org/wiki/Principe_de_substitution_de_Liskov">principe de substitution de Liskov</a>). On retrouve ce cas lorsqu'on essaie de changer une propriété immuable :</p>
-
-<pre class="brush: js">// Ajouter la propriété immuable NEGATIVE_ZERO au constructor Number.
-Object.defineProperty(Number, "NEGATIVE_ZERO",
-                      { value: -0, writable: false, configurable: false, enumerable: false });
-
-function attemptMutation(v) {
-  Object.defineProperty(Number, "NEGATIVE_ZERO", { value: v });
-}
-</pre>
-
-<p><code>Object.defineProperty</code> lancera une exception pour tout changement de la propriété qui serait réellement un changement. Rien ne se passera si aucun changement n'est nécessaire. Ainsi, si <code>v</code> vaut <code>-0</code>, aucun changement n'est nécessaire et il n'y aura pas d'erreur. Mais si <code>v</code> vaut <code>+0</code>, <code>Number.NEGATIVE_ZERO</code> n'aurait plus la même valeur immuable. De façon interne à l'implémentation, la nouvelle valeur est comparée avec la valeur courante en utilisant une égalité de valeurs.</p>
-
-<p>L'égalité de valeurs peut être testée grâce à la méthode {{jsxref("Object.is")}}.</p>
-
-<h2 id="Égalité_de_valeurs_nulles">Égalité de valeurs nulles</h2>
-
-<p>On utilise la même égalité que l'égalité de valeur et on considère que <code>+0</code> et <code>-0</code> sont égaux.</p>
-
-<h2 id="Égalité_abstraite_égalité_stricte_et_valeurs_identiques_la_spécification">Égalité abstraite, égalité stricte et valeurs identiques : la spécification</h2>
-
-<p>Selon ES5, la comparaison effectuée par <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_de_comparaison#.C3.89galit.C3.A9_simple_(.3D.3D)"><code>==</code></a> est décrite dans <a href="https://ecma-international.org/ecma-262/5.1/#sec-11.9.3">la section 11.9.3 sur l'algorithme d'égalité abstraite (<em>Abstract Equality Algorithm</em>)</a>. La comparaison donnée par <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_de_comparaison#.C3.89galit.C3.A9_stricte_(.3D.3D.3D)"><code>===</code></a> est décrite dans <a href="https://ecma-international.org/ecma-262/5.1/#sec-11.9.6">la section 11.9.6 sur l'algorithme d'égalité stricte (<em>Strict Equality Algorithm</em>)</a>. Ces documents sont en anglais mais sont tout à fait abordables, ne pas hésiter à les consulter (conseil : d'abord commencer par l'algorithme d'égalité stricte). ES5 décrit également, dans <a href="https://ecma-international.org/ecma-262/5.1/#sec-9.12">la section 9.12 sur l'algorithme SameValue</a>, l'opération utilisée en interne par le moteur JavaScript. Cet algorithme est principalement basé sur l'algorithme d'égalité stricte : 11.9.6.4 et 9.12.4 diffèrent en ce qui concerne les nombres. ES6 (ECMAScript 2015) permet d'utiliser cet algorithme grâce à la méthode {{jsxref("Object.is")}}.</p>
-
-<p>Dans ces documents, on peut voir que l'algorithme d'égalité stricte est un sous-ensemble de l'algorithme d'égalité abstraite (exception faite de la vérification du type) car 11.9.6.2–7 correspond exactement à 11.9.3.1.a–f.</p>
-
-<h2 id="Un_modèle_pour_mieux_comprendre">Un modèle pour mieux comprendre ?</h2>
-
-<p>Avant ES6 (ECMAScript 2015), il était courant de dire que l'égalité stricte avec le triple égal était une version « améliorée » de l'égalité faible (double égal) et vice versa. En effet, l'égalité faible ajoute une étape de conversion des types qui n'est pas fournie par l'égalité stricte (ce qui permet d'avoir <code>6 == "6"</code>). On peut aussi dire que l'égalité stricte est une version améliorée de l'égalité simple car elle ajoute une fonctionnalité de vérification des types. Selon votre approche et votre problème, une de ces égalités se prêtera mieux à la résolution.</p>
-
-<p>Cependant, ce « modèle de pensées » ne peut pas être étendu avec l'arrivée d'{{jsxref("Object.is")}} avec ES6 (ECMAScript 2015). En effet <code>Object.is()</code> n'est pas plus « faible » que l'égalité faible ou plus « stricte » que l'égalité stricte et il n'est pas non plus quelque part entre les deux. Dans le tableau de comparaison ci-après, on voit que la différence provient avant tout de la façon dont {{jsxref("Object.is")}} gère {{jsxref("NaN")}}. On note ici que si <code>Object.is(NaN, NaN)</code> valait <code>false</code>, on pourrait dire qu'<code>Object.is()</code> est plus stricte que == ou === car elle distingue <code>-0</code> et <code>+0</code>. Cependant, ce n'est pas le cas et on a bien <code>Object.is(NaN,NaN)</code> qui vaut <code>true</code>. C'est pour cette raison qu'il faut considérer {{jsxref("Object.is")}} selon ses caractéristiques spécifiques plutôt que comme une version plus faible ou plus stricte des autres opérateurs d'égalité.</p>
-
-<table class="standard-table">
- <caption>Comparaisons d'égalité</caption>
- <thead>
-  <tr>
-   <th scope="col">x</th>
-   <th scope="col">y</th>
-   <th scope="col"><code>==</code></th>
-   <th scope="col"><code>===</code></th>
-   <th scope="col"><code>Object.is</code></th>
-   <th scope="col"><code>SameValueZero</code></th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><code>undefined</code></td>
-   <td><code>undefined</code></td>
-   <td><code>true</code></td>
-   <td><code>true</code></td>
-   <td><code>true</code></td>
-   <td><code>true</code></td>
-  </tr>
-  <tr>
-   <td><code>null</code></td>
-   <td><code>null</code></td>
-   <td><code>true</code></td>
-   <td><code>true</code></td>
-   <td><code>true</code></td>
-   <td><code>true</code></td>
-  </tr>
-  <tr>
-   <td><code>true</code></td>
-   <td><code>true</code></td>
-   <td><code>true</code></td>
-   <td><code>true</code></td>
-   <td><code>true</code></td>
-   <td><code>true</code></td>
-  </tr>
-  <tr>
-   <td><code>false</code></td>
-   <td><code>false</code></td>
-   <td><code>true</code></td>
-   <td><code>true</code></td>
-   <td><code>true</code></td>
-   <td><code>true</code></td>
-  </tr>
-  <tr>
-   <td><code>'toto'</code></td>
-   <td><code>'toto'</code></td>
-   <td><code>true</code></td>
-   <td><code>true</code></td>
-   <td><code>true</code></td>
-   <td><code>true</code></td>
-  </tr>
-  <tr>
-   <td><code>0</code></td>
-   <td><code>0</code></td>
-   <td><code>true</code></td>
-   <td><code>true</code></td>
-   <td><code>true</code></td>
-   <td><code>true</code></td>
-  </tr>
-  <tr>
-   <td><code>+0</code></td>
-   <td><code>-0</code></td>
-   <td><code>true</code></td>
-   <td><code>true</code></td>
-   <td><code>false</code></td>
-   <td><code>true</code></td>
-  </tr>
-  <tr>
-   <td><code>+0</code></td>
-   <td><code>0</code></td>
-   <td><code>true</code></td>
-   <td><code>true</code></td>
-   <td><code>true</code></td>
-   <td><code>true</code></td>
-  </tr>
-  <tr>
-   <td><code>-0</code></td>
-   <td><code>0</code></td>
-   <td><code>true</code></td>
-   <td><code>true</code></td>
-   <td><code>false</code></td>
-   <td><code>true</code></td>
-  </tr>
-  <tr>
-   <td><code>0</code></td>
-   <td><code>false</code></td>
-   <td><code>true</code></td>
-   <td><code>false</code></td>
-   <td><code>false</code></td>
-   <td><code>false</code></td>
-  </tr>
-  <tr>
-   <td><code>""</code></td>
-   <td><code>false</code></td>
-   <td><code>true</code></td>
-   <td><code>false</code></td>
-   <td><code>false</code></td>
-   <td><code>false</code></td>
-  </tr>
-  <tr>
-   <td><code>""</code></td>
-   <td><code>0</code></td>
-   <td><code>true</code></td>
-   <td><code>false</code></td>
-   <td><code>false</code></td>
-   <td><code>false</code></td>
-  </tr>
-  <tr>
-   <td><code>'0'</code></td>
-   <td><code>0</code></td>
-   <td><code>true</code></td>
-   <td><code>false</code></td>
-   <td><code>false</code></td>
-   <td><code>false</code></td>
-  </tr>
-  <tr>
-   <td><code>'17'</code></td>
-   <td><code>17</code></td>
-   <td><code>true</code></td>
-   <td><code>false</code></td>
-   <td><code>false</code></td>
-   <td><code>false</code></td>
-  </tr>
-  <tr>
-   <td><code>[1, 2]</code></td>
-   <td><code>'1,2'</code></td>
-   <td><code>true</code></td>
-   <td><code>false</code></td>
-   <td><code>false</code></td>
-   <td><code>false</code></td>
-  </tr>
-  <tr>
-   <td><code>new String('toto')</code></td>
-   <td><code>'toto'</code></td>
-   <td><code>true</code></td>
-   <td><code>false</code></td>
-   <td><code>false</code></td>
-   <td><code>false</code></td>
-  </tr>
-  <tr>
-   <td><code>null</code></td>
-   <td><code>undefined</code></td>
-   <td><code>true</code></td>
-   <td><code>false</code></td>
-   <td><code>false</code></td>
-   <td><code>false</code></td>
-  </tr>
-  <tr>
-   <td><code>null</code></td>
-   <td><code>false</code></td>
-   <td><code>false</code></td>
-   <td><code>false</code></td>
-   <td><code>false</code></td>
-   <td><code>false</code></td>
-  </tr>
-  <tr>
-   <td><code>undefined</code></td>
-   <td><code>false</code></td>
-   <td><code>false</code></td>
-   <td><code>false</code></td>
-   <td><code>false</code></td>
-   <td><code>false</code></td>
-  </tr>
-  <tr>
-   <td><code>{ toto: 'truc' }</code></td>
-   <td><code>{ toto: 'truc' }</code></td>
-   <td><code>false</code></td>
-   <td><code>false</code></td>
-   <td><code>false</code></td>
-   <td><code>false</code></td>
-  </tr>
-  <tr>
-   <td><code>new String('toto')</code></td>
-   <td><code>new String('toto')</code></td>
-   <td><code>false</code></td>
-   <td><code>false</code></td>
-   <td><code>false</code></td>
-   <td><code>false</code></td>
-  </tr>
-  <tr>
-   <td><code>0</code></td>
-   <td><code>null</code></td>
-   <td><code>false</code></td>
-   <td><code>false</code></td>
-   <td><code>false</code></td>
-   <td><code>false</code></td>
-  </tr>
-  <tr>
-   <td><code>0</code></td>
-   <td><code>NaN</code></td>
-   <td><code>false</code></td>
-   <td><code>false</code></td>
-   <td><code>false</code></td>
-   <td><code>false</code></td>
-  </tr>
-  <tr>
-   <td><code>'toto'</code></td>
-   <td><code>NaN</code></td>
-   <td><code>false</code></td>
-   <td><code>false</code></td>
-   <td><code>false</code></td>
-   <td><code>false</code></td>
-  </tr>
-  <tr>
-   <td><code>NaN</code></td>
-   <td><code>NaN</code></td>
-   <td><code>false</code></td>
-   <td><code>false</code></td>
-   <td><code>true</code></td>
-   <td><code>true</code></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Quand_utiliser_jsxrefObject.is_et_quand_utiliser_légalité_stricte">Quand utiliser {{jsxref("Object.is")}} et quand utiliser l'égalité stricte</h2>
-
-<p>En plus de la façon dont {{jsxref("Object.is")}} traite <code>NaN</code>, la spécificité d'<code>Object.is()</code> réside dans sa façon de traiter les valeurs proches de zéro. Dans des cas d'utilisation où on a besoin d'effectuer de la méta-programmation, notamment pour imiter certaines caractéristiques de {{jsxref("Object.defineProperty")}}. Si le scénario d'utilisation ne nécessite pas ce comportement, il est conseillé d'utiliser <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_de_comparaison#.C3.89galit.C3.A9_stricte_(.3D.3D.3D)"><code>===</code></a>. Même si on souhaite pouvoir comparer <code>NaN</code> avec lui-même et que ce test vaille <code>true</code>, il sera plus simple d'utiliser la méthode {{jsxref("isNaN")}} disponible avec les versions antérieures d'ECMAScript. En effet, cela évite d'avoir à traiter des cas plus complexes où il faudrait gérer les signes des zéros dans les différentes comparaisons.</p>
-
-<p>Voici une liste (non exhaustive) d'opérateurs et de méthodes natives qui peuvent entraîner l'apparition des valeurs <code>-0</code> et <code>+0</code> dans le code :</p>
-
-<dl>
- <dt><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_arithmétiques#Négation_unaire"><code>-</code> (négation unaire)</a></dt>
- <dd>
- <p>Si on prend l'opposé de <code>0</code>, on aura, bien entendu,<code>-0</code>. Cependant, avec les expressions, cela peut faire que la valeur <code>-0</code> se glisse dans les variables sans qu'on s'en rende compte. Par exemple :</p>
- <pre class="brush:js">let forceArrêt = obj.masse * -obj.vitesse</pre>
- <p>Si <code>obj.vitesse</code> vaut <code>0</code> (ou est évalué à <code>0</code>), un <code>-0</code> sera introduit, ce qui fera que <code>forceArrêt</code> pourra être négative.</p>
- </dd>
- <dt>{{jsxref("Math.atan2")}}, {{jsxref("Math.ceil")}}, {{jsxref("Math.pow")}}, {{jsxref("Math.round")}}</dt>
- <dd>Ces méthodes peuvent introduire <code>-0</code> dans une expression lors de leur évaluation, même si <code>-0</code> ne faisait pas partie des paramètres. Par exemple, si on utilise <code>Math.pow()</code> pour élever {{jsxref("Infinity", "-Infinity")}} à une puissance négative, on obtiendra <code>-0</code> pour une puissance impaire. Pour plus de détails, voir la documentation de chaque méthode.</dd>
- <dt>{{jsxref("Math.floor")}}, {{jsxref("Math.max")}}, {{jsxref("Math.min")}}, {{jsxref("Math.sin")}}, {{jsxref("Math.sqrt")}}, {{jsxref("Math.tan")}}</dt>
- <dd>Ces méthodes peuvent renvoyer <code>-0</code> dans certains cas où <code>-0</code> est passé en paramètre. Par exemple, <code>Math.min(-0, +0)</code> fournira <code>-0</code>. Pour plus de détails, voir la documentation de chaque méthode.</dd>
- <dt><code><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_binaires#.7E_.28NON_binaire.29">~</a></code>, <code><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_binaires#.3C.3C_.28d.C3.A9calage_.C3.A0_gauche.29">&lt;&lt;</a></code>, <code><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">&gt;&gt;</a></code></dt>
- <dd>Chacun de ces opérateurs utilise l'algorithme ToInt32 interne au moteur JavaScript. Étant donné qu'il n'y a qu'une seule représentation pour 0 sur les entiers exprimés avec le type interne sur 32 bits, <code>-0</code> ne sera pas invariant pour deux opérations symétriques : <code>Object.is(~~(-0), -0)</code> et <code>Object.is(-0 &lt;&lt; 2 &gt;&gt; 2, -0)</code> renverront tous les deux <code>false</code>.</dd>
-</dl>
-
-<p>Si on utilise {{jsxref("Object.is")}} et qu'on ne souhaite pas gérer les cas aux limites autour de zéro, cela peut avoir des effet indésirés. En revanche, si on souhaite effectivement comparer <code>-0</code> et <code>+0</code>, c'est la méthode à adopter.</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="https://dorey.github.io/JavaScript-Equality-Table/">Tableau des comparaisons en JavaScript</a></li>
-</ul>
diff --git a/files/fr/web/javascript/equality_comparisons_and_sameness/index.md b/files/fr/web/javascript/equality_comparisons_and_sameness/index.md
new file mode 100644
index 0000000000..7e47857033
--- /dev/null
+++ b/files/fr/web/javascript/equality_comparisons_and_sameness/index.md
@@ -0,0 +1,266 @@
+---
+title: Utiliser les différents tests d'égalité
+slug: Web/JavaScript/Equality_comparisons_and_sameness
+tags:
+  - Guide
+  - Intermédiaire
+  - JavaScript
+translation_of: Web/JavaScript/Equality_comparisons_and_sameness
+original_slug: Web/JavaScript/Les_différents_tests_d_égalité
+---
+{{jsSidebar("Intermediate")}}
+
+JavaScript fournit trois opérations permettant de comparer des valeurs :
+
+- L'égalité stricte (ou identité ou « triple égal ») utilisant [`===`](</fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_de_comparaison#.C3.89galit.C3.A9_stricte_(.3D.3D.3D)>),
+- L'égalité faible (ou « double égal ») utilisant [`==`](</fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_de_comparaison#.C3.89galit.C3.A9_simple_(.3D.3D)>),
+- {{jsxref("Object.is")}} (ajouté avec ECMAScript 2015).
+
+Ces trois opérations sont associées à quatre algorithmes d'égalité (depuis ES2015) :
+
+- [La comparaison d'égalité abstraite (`==`)](#faible)
+- [La comparaison d'égalité stricte (`===`)](#stricte)
+
+  - Utilisée par {{jsxref("Array.indexOf")}} et {{jsxref("Array.lastIndexOf")}} et la sensibilité à la casse
+
+- [_SameValueZero_ (l'égalité de valeurs nulles)](#SameValueZero)
+
+  - Utilisée par les constructeurs {{jsxref("TypedArray")}} et {{jsxref("ArrayBuffer")}} et par les opérations associées à {{jsxref("Map")}} et {{jsxref("Set")}}. Depuis ES2016, cet algorithme est également utilisé par {{jsxref("String.includes")}} et {{jsxref("Array.includes")}}
+
+- [_SameValue_ (l'égalité de valeurs)](#sameValue)
+
+  - Utilisée partout ailleurs
+
+Selon la comparaison qu'on souhaite effectuer, on choisira une de ces opérations.
+
+En résumé :
+
+- L'égalité faible (`==`) effectuera une conversion des deux éléments à comparer avant d'effectuer la comparaison
+- L'égalité stricte (`===`) effectuera la même comparaison mais sans conversion préalable (elle renverra toujours false si les types des deux valeurs comparées sont différents)
+- Enfin `Object.is()` se comportera comme l'égalité stricte sauf pour les valeurs `NaN`, `-0` et `+0` : pour `Object.is()`, `-0` et `+0` seront différents mais on aura `Object.is(NaN, NaN)` qui sera `true`. (Généralement, quand on compare `NaN` avec `NaN` en utilisant l'égalité stricte ou l'égalité faible, cela donne `false` afin de respecter la norme IEEE 754.)
+
+On notera que pour ces trois opérations, la comparaison s'effectue sur les valeurs des éléments qu'on compare, aucune de ces opérations ne permet de comparer la structure des paramètres. Pour des objets non primitifs, `x` et `y` qui ont la même structure mais qui sont des objets distincs, chacune des opérations présentées ci-avant sera évaluée à `false`.
+
+## L'égalité stricte avec `===`
+
+L'égalité stricte compare deux valeurs et teste leur égalité. Aucune des valeurs n'est convertie implicitement en une autre valeur avant que la comparaison soit effectuée. Si les valeurs sont typées différemment, elles sont considérées comme différentes. Si les valeurs sont de même type et ne sont pas des nombres, elles sont considérées égales si elles ont la même valeur. Si les deux valeurs sont des nombres, elles sont égales si elles ont la même valeur et que cette valeur n'est pas NaN ou si l'une vaut +0 et l'autre -0.
+
+```js
+var num = 0;
+var obj = new String("0");
+var str = "0";
+
+console.log(num === num); // true
+console.log(obj === obj); // true
+console.log(str === str); // true
+
+console.log(num === obj); // false
+console.log(num === str); // false
+console.log(obj === str); // false
+console.log(null === undefined); // false
+console.log(obj === null); // false
+console.log(obj === undefined); // false
+```
+
+Ce test d'égalité stricte est presque toujours la meilleure des opérations à considérer pour ces tests. Excepté pour les nombres, la sémantique utilisée est simple : une valeur est uniquement égale à elle-même. En ce qui concerne les nombres, il y a deux cas aux limites à considérer. Le premier cas concerne le nombre zéro positif ou négatif. Cela peut être utile dans la représentation de problèmes mathématiques mais ne constitue pas une différence pour de nombreuses situations : le test d'égalité stricte considère que ce sont les mêmes valeurs. Le second cas concerne la valeur « n'est pas un nombre », `NaN` (pour « not a number » en anglais) permettant de représenter certaines entités mathématiques : la somme des deux infinis (positif et négatif) par exemple. Le test d'égalité stricte considère que `NaN` est différent de toutes les valeurs, y compris lui-même. (N.B. : Le seul cas de figure pour lequel on a `(x !== x)` qui renvoie `true` est lorsque x vaut `NaN`.)
+
+## L'égalité faible avec `==`
+
+Le test d'égalité faible compare deux valeurs _après_ les avoir converties en valeurs d'un même type. Une fois converties (la conversion peut s'effectuer pour l'une ou les deux valeurs), la comparaison finale est la même que celle effectuée par `===`. L'égalité faible est _symétrique_ : `A == B` aura toujours la même signification que `B == A` pour toute valeur de A et B.
+
+La comparaison d'égalité est effectuée comme suit pour des opérandes de différents types :
+
+<table class="standard-table">
+  <thead>
+    <tr>
+      <th scope="row"></th>
+      <th colspan="7" scope="col">Opérande B</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <th scope="row"></th>
+      <td></td>
+      <td>Undefined</td>
+      <td>Null</td>
+      <td>Number</td>
+      <td>String</td>
+      <td>Boolean</td>
+      <td>Object</td>
+    </tr>
+    <tr>
+      <th colspan="1" rowspan="6" scope="row">Opérande A</th>
+      <td>Undefined</td>
+      <td><code>true</code></td>
+      <td><code>true</code></td>
+      <td><code>false</code></td>
+      <td><code>false</code></td>
+      <td><code>false</code></td>
+      <td><code>false</code></td>
+    </tr>
+    <tr>
+      <td>Null</td>
+      <td><code>true</code></td>
+      <td><code>true</code></td>
+      <td><code>false</code></td>
+      <td><code>false</code></td>
+      <td><code>false</code></td>
+      <td><code>false</code></td>
+    </tr>
+    <tr>
+      <td>Number</td>
+      <td><code>false</code></td>
+      <td><code>false</code></td>
+      <td><code>A === B</code></td>
+      <td><code>A === ToNumber(B)</code></td>
+      <td><code>A === ToNumber(B)</code></td>
+      <td><code>A == ToPrimitive(B)</code></td>
+    </tr>
+    <tr>
+      <td>String</td>
+      <td><code>false</code></td>
+      <td><code>false</code></td>
+      <td><code>ToNumber(A) === B</code></td>
+      <td><code>A === B</code></td>
+      <td><code>ToNumber(A) === ToNumber(B)</code></td>
+      <td><code>A == ToPrimitive(B)</code></td>
+    </tr>
+    <tr>
+      <td>Boolean</td>
+      <td><code>false</code></td>
+      <td><code>false</code></td>
+      <td><code>ToNumber(A) === B</code></td>
+      <td><code>ToNumber(A) === ToNumber(B)</code></td>
+      <td><code>A === B</code></td>
+      <td><code>false</code></td>
+    </tr>
+    <tr>
+      <td>Object</td>
+      <td><code>false</code></td>
+      <td><code>false</code></td>
+      <td><code>ToPrimitive(A) == B</code></td>
+      <td><code>ToPrimitive(A) == B</code></td>
+      <td><code>ToPrimitive(A) == ToNumber(B)</code></td>
+      <td>
+        <p><code>A === B</code></p>
+      </td>
+    </tr>
+  </tbody>
+</table>
+
+Dans le tableau ci-dessus, l'expression `ToNumber(A)` correspond à une tentative de convertir l'argument en un nombre avant la comparaison. Le résultat obtenu est équivalent à `+A` (l'opérateur unaire +). `ToPrimitive(A)` correspond à une tentative de convertir l'argument en une valeur primitive grâce à plusieurs méthodes comme `A.toString` et `A.valueOf`.
+
+Selon ECMAScript, au sens de l'égalité faible, tous les objets sont différents de `undefined` et de `null`. Cependant, la plupart des navigateurs autorisent, dans certains contextes, unensemble restreint d'objets (notamment l'objet `document.all`), à agir comme s'ils émulaient la valeur `undefined`. L'égalité faible est un de ces contextes. Pour tous les autres cas, un objet ne sera jamais approximativement égal à `undefined` ou à `null`.
+
+```js
+var num = 0;
+var obj = new String("0");
+var str = "0";
+
+console.log(num == num); // true
+console.log(obj == obj); // true
+console.log(str == str); // true
+
+console.log(num == obj); // true
+console.log(num == str); // true
+console.log(obj == str); // true
+console.log(null == undefined); // true
+
+// Les deux assertions qui suivent sont fausses
+// sauf dans certains cas exceptionnels
+console.log(obj == null);
+console.log(obj == undefined);
+```
+
+Certains développeurs considèrent que ce n'est jamais une bonne idée d'utiliser l'égalilté faible. Le résultat d'une comparaison utilisant l'égalité stricte est plus simple à appréhender et à prédire, de plus il n'y a aucune conversion implicite ce qui rend le test plus rapide.
+
+## Égalité de valeurs
+
+L'égalité de valeurs répond à un dernier cas d'utilisation : savoir si deux valeurs sont fonctionnellement identiques pour tout contexte. (Ce cas d'utilisation est un exemple du [principe de substitution de Liskov](https://fr.wikipedia.org/wiki/Principe_de_substitution_de_Liskov)). On retrouve ce cas lorsqu'on essaie de changer une propriété immuable :
+
+```js
+// Ajouter la propriété immuable NEGATIVE_ZERO au constructor Number.
+Object.defineProperty(Number, "NEGATIVE_ZERO",
+                      { value: -0, writable: false, configurable: false, enumerable: false });
+
+function attemptMutation(v) {
+  Object.defineProperty(Number, "NEGATIVE_ZERO", { value: v });
+}
+```
+
+`Object.defineProperty` lancera une exception pour tout changement de la propriété qui serait réellement un changement. Rien ne se passera si aucun changement n'est nécessaire. Ainsi, si `v` vaut `-0`, aucun changement n'est nécessaire et il n'y aura pas d'erreur. Mais si `v` vaut `+0`, `Number.NEGATIVE_ZERO` n'aurait plus la même valeur immuable. De façon interne à l'implémentation, la nouvelle valeur est comparée avec la valeur courante en utilisant une égalité de valeurs.
+
+L'égalité de valeurs peut être testée grâce à la méthode {{jsxref("Object.is")}}.
+
+## Égalité de valeurs nulles
+
+On utilise la même égalité que l'égalité de valeur et on considère que `+0` et `-0` sont égaux.
+
+## Égalité abstraite, égalité stricte et valeurs identiques : la spécification
+
+Selon ES5, la comparaison effectuée par [`==`](</fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_de_comparaison#.C3.89galit.C3.A9_simple_(.3D.3D)>) est décrite dans [la section 11.9.3 sur l'algorithme d'égalité abstraite (_Abstract Equality Algorithm_)](https://ecma-international.org/ecma-262/5.1/#sec-11.9.3). La comparaison donnée par [`===`](</fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_de_comparaison#.C3.89galit.C3.A9_stricte_(.3D.3D.3D)>) est décrite dans [la section 11.9.6 sur l'algorithme d'égalité stricte (_Strict Equality Algorithm_)](https://ecma-international.org/ecma-262/5.1/#sec-11.9.6). Ces documents sont en anglais mais sont tout à fait abordables, ne pas hésiter à les consulter (conseil : d'abord commencer par l'algorithme d'égalité stricte). ES5 décrit également, dans [la section 9.12 sur l'algorithme SameValue](https://ecma-international.org/ecma-262/5.1/#sec-9.12), l'opération utilisée en interne par le moteur JavaScript. Cet algorithme est principalement basé sur l'algorithme d'égalité stricte : 11.9.6.4 et 9.12.4 diffèrent en ce qui concerne les nombres. ES6 (ECMAScript 2015) permet d'utiliser cet algorithme grâce à la méthode {{jsxref("Object.is")}}.
+
+Dans ces documents, on peut voir que l'algorithme d'égalité stricte est un sous-ensemble de l'algorithme d'égalité abstraite (exception faite de la vérification du type) car 11.9.6.2–7 correspond exactement à 11.9.3.1.a–f.
+
+## Un modèle pour mieux comprendre ?
+
+Avant ES6 (ECMAScript 2015), il était courant de dire que l'égalité stricte avec le triple égal était une version « améliorée » de l'égalité faible (double égal) et vice versa. En effet, l'égalité faible ajoute une étape de conversion des types qui n'est pas fournie par l'égalité stricte (ce qui permet d'avoir `6 == "6"`). On peut aussi dire que l'égalité stricte est une version améliorée de l'égalité simple car elle ajoute une fonctionnalité de vérification des types. Selon votre approche et votre problème, une de ces égalités se prêtera mieux à la résolution.
+
+Cependant, ce « modèle de pensées » ne peut pas être étendu avec l'arrivée d'{{jsxref("Object.is")}} avec ES6 (ECMAScript 2015). En effet `Object.is()` n'est pas plus « faible » que l'égalité faible ou plus « stricte » que l'égalité stricte et il n'est pas non plus quelque part entre les deux. Dans le tableau de comparaison ci-après, on voit que la différence provient avant tout de la façon dont {{jsxref("Object.is")}} gère {{jsxref("NaN")}}. On note ici que si `Object.is(NaN, NaN)` valait `false`, on pourrait dire qu'`Object.is()` est plus stricte que == ou === car elle distingue `-0` et `+0`. Cependant, ce n'est pas le cas et on a bien `Object.is(NaN,NaN)` qui vaut `true`. C'est pour cette raison qu'il faut considérer {{jsxref("Object.is")}} selon ses caractéristiques spécifiques plutôt que comme une version plus faible ou plus stricte des autres opérateurs d'égalité.
+
+| x                    | y                    | `==`    | `===`   | `Object.is` | `SameValueZero` |
+| -------------------- | -------------------- | ------- | ------- | ----------- | --------------- |
+| `undefined`          | `undefined`          | `true`  | `true`  | `true`      | `true`          |
+| `null`               | `null`               | `true`  | `true`  | `true`      | `true`          |
+| `true`               | `true`               | `true`  | `true`  | `true`      | `true`          |
+| `false`              | `false`              | `true`  | `true`  | `true`      | `true`          |
+| `'toto'`             | `'toto'`             | `true`  | `true`  | `true`      | `true`          |
+| `0`                  | `0`                  | `true`  | `true`  | `true`      | `true`          |
+| `+0`                 | `-0`                 | `true`  | `true`  | `false`     | `true`          |
+| `+0`                 | `0`                  | `true`  | `true`  | `true`      | `true`          |
+| `-0`                 | `0`                  | `true`  | `true`  | `false`     | `true`          |
+| `0`                  | `false`              | `true`  | `false` | `false`     | `false`         |
+| `""`                 | `false`              | `true`  | `false` | `false`     | `false`         |
+| `""`                 | `0`                  | `true`  | `false` | `false`     | `false`         |
+| `'0'`                | `0`                  | `true`  | `false` | `false`     | `false`         |
+| `'17'`               | `17`                 | `true`  | `false` | `false`     | `false`         |
+| `[1, 2]`             | `'1,2'`              | `true`  | `false` | `false`     | `false`         |
+| `new String('toto')` | `'toto'`             | `true`  | `false` | `false`     | `false`         |
+| `null`               | `undefined`          | `true`  | `false` | `false`     | `false`         |
+| `null`               | `false`              | `false` | `false` | `false`     | `false`         |
+| `undefined`          | `false`              | `false` | `false` | `false`     | `false`         |
+| `{ toto: 'truc' }`   | `{ toto: 'truc' }`   | `false` | `false` | `false`     | `false`         |
+| `new String('toto')` | `new String('toto')` | `false` | `false` | `false`     | `false`         |
+| `0`                  | `null`               | `false` | `false` | `false`     | `false`         |
+| `0`                  | `NaN`                | `false` | `false` | `false`     | `false`         |
+| `'toto'`             | `NaN`                | `false` | `false` | `false`     | `false`         |
+| `NaN`                | `NaN`                | `false` | `false` | `true`      | `true`          |
+
+## Quand utiliser {{jsxref("Object.is")}} et quand utiliser l'égalité stricte
+
+En plus de la façon dont {{jsxref("Object.is")}} traite `NaN`, la spécificité d'`Object.is()` réside dans sa façon de traiter les valeurs proches de zéro. Dans des cas d'utilisation où on a besoin d'effectuer de la méta-programmation, notamment pour imiter certaines caractéristiques de {{jsxref("Object.defineProperty")}}. Si le scénario d'utilisation ne nécessite pas ce comportement, il est conseillé d'utiliser [`===`](</fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_de_comparaison#.C3.89galit.C3.A9_stricte_(.3D.3D.3D)>). Même si on souhaite pouvoir comparer `NaN` avec lui-même et que ce test vaille `true`, il sera plus simple d'utiliser la méthode {{jsxref("isNaN")}} disponible avec les versions antérieures d'ECMAScript. En effet, cela évite d'avoir à traiter des cas plus complexes où il faudrait gérer les signes des zéros dans les différentes comparaisons.
+
+Voici une liste (non exhaustive) d'opérateurs et de méthodes natives qui peuvent entraîner l'apparition des valeurs `-0` et `+0` dans le code :
+
+- [`-` (négation unaire)](/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_arithmétiques#Négation_unaire)
+
+  - : Si on prend l'opposé de `0`, on aura, bien entendu,`-0`. Cependant, avec les expressions, cela peut faire que la valeur `-0` se glisse dans les variables sans qu'on s'en rende compte. Par exemple :
+
+    ```js
+        let forceArrêt = obj.masse * -obj.vitesse
+        ```
+
+    Si `obj.vitesse` vaut `0` (ou est évalué à `0`), un `-0` sera introduit, ce qui fera que `forceArrêt` pourra être négative.
+
+- {{jsxref("Math.atan2")}}, {{jsxref("Math.ceil")}}, {{jsxref("Math.pow")}}, {{jsxref("Math.round")}}
+  - : Ces méthodes peuvent introduire `-0` dans une expression lors de leur évaluation, même si `-0` ne faisait pas partie des paramètres. Par exemple, si on utilise `Math.pow()` pour élever {{jsxref("Infinity", "-Infinity")}} à une puissance négative, on obtiendra `-0` pour une puissance impaire. Pour plus de détails, voir la documentation de chaque méthode.
+- {{jsxref("Math.floor")}}, {{jsxref("Math.max")}}, {{jsxref("Math.min")}}, {{jsxref("Math.sin")}}, {{jsxref("Math.sqrt")}}, {{jsxref("Math.tan")}}
+  - : Ces méthodes peuvent renvoyer `-0` dans certains cas où `-0` est passé en paramètre. Par exemple, `Math.min(-0, +0)` fournira `-0`. Pour plus de détails, voir la documentation de chaque méthode.
+- [`~`](/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_binaires#.7E_.28NON_binaire.29), [`<<`](/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_binaires#.3C.3C_.28d.C3.A9calage_.C3.A0_gauche.29), [`>>`](/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_binaires#.3E.3E_.28d.C3.A9calage_.C3.A0_droite_avec_propagation_du_signe.29)
+  - : Chacun de ces opérateurs utilise l'algorithme ToInt32 interne au moteur JavaScript. Étant donné qu'il n'y a qu'une seule représentation pour 0 sur les entiers exprimés avec le type interne sur 32 bits, `-0` ne sera pas invariant pour deux opérations symétriques : `Object.is(~~(-0), -0)` et `Object.is(-0 << 2 >> 2, -0)` renverront tous les deux `false`.
+
+Si on utilise {{jsxref("Object.is")}} et qu'on ne souhaite pas gérer les cas aux limites autour de zéro, cela peut avoir des effet indésirés. En revanche, si on souhaite effectivement comparer `-0` et `+0`, c'est la méthode à adopter.
+
+## Voir aussi
+
+- [Tableau des comparaisons en JavaScript](https://dorey.github.io/JavaScript-Equality-Table/)
diff --git a/files/fr/web/javascript/eventloop/index.html b/files/fr/web/javascript/eventloop/index.html
deleted file mode 100644
index d349d9d056..0000000000
--- a/files/fr/web/javascript/eventloop/index.html
+++ /dev/null
@@ -1,155 +0,0 @@
----
-title: Gestion de la concurrence et boucle des événements
-slug: Web/JavaScript/EventLoop
-tags:
-  - Avancé
-  - Guide
-  - JavaScript
-translation_of: Web/JavaScript/EventLoop
-original_slug: Web/JavaScript/Concurrence_et_boucle_des_événements
----
-<div>{{jsSidebar("Advanced")}}</div>
-
-<p>JavaScript gère la concurrence grâce à une « boucle d'événements ». Ce modèle est différent de la gestion faite par des langages comme C ou Java.</p>
-
-<h2 id="Notions_liées_à_lexécution">Notions liées à l'exécution</h2>
-
-<p>Les sections qui suivent décrivent un modèle théorique. En réalité, les moteurs JavaScript implémentent et optimisent fortement la sémantique décrite ici.</p>
-
-<h3 id="Représentation_visuelle">Représentation visuelle</h3>
-
-<p><img alt="Stack, heap, queue" src="the_javascript_runtime_environment_example.svg"></p>
-
-<h3 id="La_pile_dappels_stack">La pile d'appels (<em>stack</em>)</h3>
-
-<p>Les appels de fonction forment une pile de cadre (<em>frames</em>).</p>
-
-<pre class="brush: js notranslate">function f(b){
-  var a = 12;
-  return a + b + 35;
-}
-
-function g(x){
-  var m = 4;
-  return f(m * x);
-}
-
-console.log(g(21)); // affichera 131
-</pre>
-
-<p>Lors de l'appel à <code>g</code>, on crée un premier cadre contenant les arguments de <code>g</code> ainsi que les variables locales. Quand <code>g</code> appelle <code>f</code>, un deuxième cadre est créé et placé sur le premier et contient les arguments de <code>f</code> ainsi que les variables locales. Lorsque <code>f</code> a fini et renvoyé son résultat, le cadre correspondant (celui qui est sur le dessus) est retiré de la pile (il reste donc le cadre lié à l'appel de <code>g</code>). Quand <code>g</code> a fini grâce aux informations transmises, la pile devient vide.</p>
-
-<h3 id="Le_tas_heap">Le tas (<em>heap</em>)</h3>
-
-<p>Les objets sont alloués en mémoire dans un tas qui désigne une zone de la mémoire sans structure particulière.</p>
-
-<h3 id="La_file_queue">La file (<em>queue</em>)</h3>
-
-<p>Un environnement d'exécution JavaScript (<em>runtime</em>) contient une queue de messages à traiter. Chaque message est associé à une fonction. Lorsque la pile est vide ou a suffisamment d'espace, on retire un message de la queue et on le traite. Le traitement consiste à appeler la fonction associée au message (et donc à créer le cadre dans la pile d'appel). Le traitement d'un message est fini lorsque la pile d'appels redevient vide.</p>
-
-<h2 id="La_boucle_dévénements">La boucle d'événements</h2>
-
-<p>La boucle d'événement tire principalement son nom de son implémentation. Celle-ci ressemble à :</p>
-
-<pre class="brush: js notranslate">while (queue.attendreMessage()){
-  queue.traiterProchainMessage();
-}</pre>
-
-<p><code>queue.attendreMessage</code> est un fonction synchrone qui attend un message même s'il n'y en a aucun à traiter.</p>
-
-<h3 id="Traiter_de_A_à_Z_run-to-completion">Traiter de A à Z (<em>run-to-completion</em>)</h3>
-
-<p>Chaque message sera traité complètement avant tout autre message. Cela permet de savoir que, lorsqu'une fonction s'exécute, on ne peut pas observer l'exécution d'un autre code qui prendrait le pas (modifiant les données de la fonction par exemple). Le modèle de <em>thread</em> utilisé par le langage C, par exemple, que la fonction puisse être interrompue à tout moment pour permettre à un autre <em>thread</em> d'exécuter un autre code.</p>
-
-<p>Ce modèle possède un désavantage : lorsqu'un message prend trop de temps à être traité, l'application ne peut plus gérer les interactions utilisateur comme les clics ou le défilement. Généralement, le navigateur affiche alors « Le script met trop de temps à répondre ». Une bonne pratique consiste à rendre le traîtement de message le plus court possible et à découper le message problématique en plusieurs messages.</p>
-
-<h3 id="Lajout_de_messages">L'ajout de messages</h3>
-
-<p>Dans les navigateurs web, des messages sont ajoutés à chaque fois qu'un événement se produit et qu'un gestionnaire d'événements y est attaché. S'il n'y a pas d'écouteur (<em>listener</em>) pour intercepter l'événement, il est perdu. Ainsi, si on clique un élément qui possède un gestionnaire d'événements pour les clics, un message sera ajouté (il en va de même avec les autres événements).</p>
-
-<p>La fonction <code><a href="/fr/docs/DOM/window.setTimeout">setTimeout</a></code> est appelée avec deux arguments : un message à la suite de la queue et la durée à attendre (optionnelle, par défaut elle vaut 0). La durée représente le temps minimal à attendre avant que le message soit placé dans la queue. S'il n'y a pas d'autre message dans la queue, le message sera traîté directement. En revanche, s'il y a d'autres messages auparavant, le message de <code>setTimeout</code> devra attendre la fin du traîtement des messages précédents déjà présents dans la queue. C'est pourquoi le deuxième argument de cette fonction indique une durée minimum et non une durée garantie.</p>
-
-<div class="warning">
-<p><strong>Attention :</strong> L'argument passé pour le délai à <code>setTimeout</code> ne correspond pas au temps exact. Cela correspond au délai minimum et non à un délai garanti. Par exemple <code>setTimeout(maFonction(),100);</code> indique uniquement que <code>maFonction</code> sera lancé <strong>au moins</strong> après 100 millisecondes.</p>
-</div>
-
-<p>Voici un exemple qui illustre ce concept (<code>setTimeout</code> ne s'exécute pas immédiatement après la fin du <em>timer</em>) :</p>
-
-<pre class="brush: js notranslate">const s = new Date().getSeconds();
-
-setTimeout(function() {
-  // prints
-  console.log("Exécuté après " + (new Date().getSeconds() - s) + " secondes.");
-}, 500);
-
-while(true) {
-  if(new Date().getSeconds() - s &gt;= 2) {
-    console.log("Ouf, on a bouclé pendant 2 secondes");
-    break;
-  }
-}
-</pre>
-
-<h3 id="Zéro_délai">Zéro délai</h3>
-
-<p>Un délai à zéro ne signifie pas que le callback sera déclenché après zéro milliseconde. Appeler <code><a href="https://developer.mozilla.org/fr/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout" title="The documentation about this has not yet been written; please consider contributing!">setTimeout</a></code> avec un délai de <code>0</code> (zéro) milliseconde n'éxécute pas le callback après l'interval donné.</p>
-
-<p>L'exécution dépend du nombre de taches en attente dans la queue. Dans l'exemple ci-dessous, le message <code>'ceci est juste un message'</code> sera affiché dans la console avant que le message dans le callback soit traité, parce que le délai est le temps <em>minimum</em> requis par l'environnement d'exécution (runtime) pour traiter la demande (pas un temps <em>garanti</em>).</p>
-
-<p>Fondamentalement, <code>setTimeout</code> doit attendre la fin de tout le code pour les messages en file d'attente, même si vous avez spécifié une limite de temps particulière pour votre setTimeout.</p>
-
-<pre class="brush: js notranslate">(function() {
-
-  console.log('ceci est le début');
-
-  setTimeout(function cb() {
-    console.log('Callback 1: ceci est un msg depuis le callback');
-  }); // has a default time value of 0
-
-  console.log('ceci est juste un message');
-
-  setTimeout(function cb1() {
-    console.log('Callback 2: ceci est un msg depuis le callback');
-  }, 0);
-
-  console.log('ceci est la fin');
-
-})();
-
-// "ceci est le début"
-// "ceci est juste un message"
-// "ceci est la fin"
-// "Callback 1: ceci est un msg depuis le callback"
-// "Callback 2: ceci est un msg depuis le callback"</pre>
-
-<h3 id="La_communication_entre_plusieurs_environnements_dexécution">La communication entre plusieurs environnements d'exécution</h3>
-
-<p>Un web worker ou une <code>iframe</code> d'origine multiple (<em>cross origin</em>) possède sa propre pile, son propre tas et sa propre queue de messages. Deux environnements d'exécution distincts peuvent uniquement communiquer via des messages envoyés par la méthode <a href="/fr/docs/Web/API/window.postMessage"><code>postMessage</code></a>. Cette méthode permet d'ajouter un message à un autre environnement d'exécution si celui-ci « écoute » les événements <code>message</code>.</p>
-
-<h2 id="Non_bloquant">Non bloquant</h2>
-
-<p>Le modèle de la boucle d'événement possède une caractéristique intéressante : JavaScript, à  la différence d'autres langages, ne bloque jamais. La gestion des entrées-sorties (<em>I/O</em>) est généralement traitée par des événements et des callbacks. Ainsi, quand l'application attend le résultat d'une requête <a href="/fr/docs/IndexedDB">IndexedDB</a> ou d'une requête <a href="/fr/docs/XMLHttpRequest">XHR</a>, il reste possible de traiter d'autres éléments comme les saisies utilisateur.</p>
-
-<p>Il existe certaines exceptions historiques comme <code>alert</code> ou des appels XHR synchrones. C'est une bonne pratique que de les éviter. Attention, <a href="https://stackoverflow.com/questions/2734025/is-javascript-guaranteed-to-be-single-threaded/2734311#2734311">certaines exceptions existent</a> (mais relèvent généralement de bugs d'implémentation).</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">É tat</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', 'webappapis.html#event-loops', 'Event loops')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><a href="https://nodejs.org/en/docs/guides/event-loop-timers-and-nexttick/#what-is-the-event-loop">Boucle d'évènements pour Node.js</a></td>
-   <td>Standard évolutif</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
diff --git a/files/fr/web/javascript/eventloop/index.md b/files/fr/web/javascript/eventloop/index.md
new file mode 100644
index 0000000000..967b2e0ea8
--- /dev/null
+++ b/files/fr/web/javascript/eventloop/index.md
@@ -0,0 +1,144 @@
+---
+title: Gestion de la concurrence et boucle des événements
+slug: Web/JavaScript/EventLoop
+tags:
+  - Avancé
+  - Guide
+  - JavaScript
+translation_of: Web/JavaScript/EventLoop
+original_slug: Web/JavaScript/Concurrence_et_boucle_des_événements
+---
+{{jsSidebar("Advanced")}}
+
+JavaScript gère la concurrence grâce à une « boucle d'événements ». Ce modèle est différent de la gestion faite par des langages comme C ou Java.
+
+## Notions liées à l'exécution
+
+Les sections qui suivent décrivent un modèle théorique. En réalité, les moteurs JavaScript implémentent et optimisent fortement la sémantique décrite ici.
+
+### Représentation visuelle
+
+![Stack, heap, queue](the_javascript_runtime_environment_example.svg)
+
+### La pile d'appels (_stack_)
+
+Les appels de fonction forment une pile de cadre (_frames_).
+
+```js
+function f(b){
+  var a = 12;
+  return a + b + 35;
+}
+
+function g(x){
+  var m = 4;
+  return f(m * x);
+}
+
+console.log(g(21)); // affichera 131
+```
+
+Lors de l'appel à `g`, on crée un premier cadre contenant les arguments de `g` ainsi que les variables locales. Quand `g` appelle `f`, un deuxième cadre est créé et placé sur le premier et contient les arguments de `f` ainsi que les variables locales. Lorsque `f` a fini et renvoyé son résultat, le cadre correspondant (celui qui est sur le dessus) est retiré de la pile (il reste donc le cadre lié à l'appel de `g`). Quand `g` a fini grâce aux informations transmises, la pile devient vide.
+
+### Le tas (_heap_)
+
+Les objets sont alloués en mémoire dans un tas qui désigne une zone de la mémoire sans structure particulière.
+
+### La file (_queue_)
+
+Un environnement d'exécution JavaScript (_runtime_) contient une queue de messages à traiter. Chaque message est associé à une fonction. Lorsque la pile est vide ou a suffisamment d'espace, on retire un message de la queue et on le traite. Le traitement consiste à appeler la fonction associée au message (et donc à créer le cadre dans la pile d'appel). Le traitement d'un message est fini lorsque la pile d'appels redevient vide.
+
+## La boucle d'événements
+
+La boucle d'événement tire principalement son nom de son implémentation. Celle-ci ressemble à :
+
+```js
+while (queue.attendreMessage()){
+  queue.traiterProchainMessage();
+}
+```
+
+`queue.attendreMessage` est un fonction synchrone qui attend un message même s'il n'y en a aucun à traiter.
+
+### Traiter de A à Z (_run-to-completion_)
+
+Chaque message sera traité complètement avant tout autre message. Cela permet de savoir que, lorsqu'une fonction s'exécute, on ne peut pas observer l'exécution d'un autre code qui prendrait le pas (modifiant les données de la fonction par exemple). Le modèle de _thread_ utilisé par le langage C, par exemple, que la fonction puisse être interrompue à tout moment pour permettre à un autre _thread_ d'exécuter un autre code.
+
+Ce modèle possède un désavantage : lorsqu'un message prend trop de temps à être traité, l'application ne peut plus gérer les interactions utilisateur comme les clics ou le défilement. Généralement, le navigateur affiche alors « Le script met trop de temps à répondre ». Une bonne pratique consiste à rendre le traîtement de message le plus court possible et à découper le message problématique en plusieurs messages.
+
+### L'ajout de messages
+
+Dans les navigateurs web, des messages sont ajoutés à chaque fois qu'un événement se produit et qu'un gestionnaire d'événements y est attaché. S'il n'y a pas d'écouteur (_listener_) pour intercepter l'événement, il est perdu. Ainsi, si on clique un élément qui possède un gestionnaire d'événements pour les clics, un message sera ajouté (il en va de même avec les autres événements).
+
+La fonction [`setTimeout`](/fr/docs/DOM/window.setTimeout) est appelée avec deux arguments : un message à la suite de la queue et la durée à attendre (optionnelle, par défaut elle vaut 0). La durée représente le temps minimal à attendre avant que le message soit placé dans la queue. S'il n'y a pas d'autre message dans la queue, le message sera traîté directement. En revanche, s'il y a d'autres messages auparavant, le message de `setTimeout` devra attendre la fin du traîtement des messages précédents déjà présents dans la queue. C'est pourquoi le deuxième argument de cette fonction indique une durée minimum et non une durée garantie.
+
+> **Attention :** L'argument passé pour le délai à `setTimeout` ne correspond pas au temps exact. Cela correspond au délai minimum et non à un délai garanti. Par exemple `setTimeout(maFonction(),100);` indique uniquement que `maFonction` sera lancé **au moins** après 100 millisecondes.
+
+Voici un exemple qui illustre ce concept (`setTimeout` ne s'exécute pas immédiatement après la fin du _timer_) :
+
+```js
+const s = new Date().getSeconds();
+
+setTimeout(function() {
+  // prints
+  console.log("Exécuté après " + (new Date().getSeconds() - s) + " secondes.");
+}, 500);
+
+while(true) {
+  if(new Date().getSeconds() - s >= 2) {
+    console.log("Ouf, on a bouclé pendant 2 secondes");
+    break;
+  }
+}
+```
+
+### Zéro délai
+
+Un délai à zéro ne signifie pas que le callback sera déclenché après zéro milliseconde. Appeler [`setTimeout`](https://developer.mozilla.org/fr/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout "The documentation about this has not yet been written; please consider contributing!") avec un délai de `0` (zéro) milliseconde n'éxécute pas le callback après l'interval donné.
+
+L'exécution dépend du nombre de taches en attente dans la queue. Dans l'exemple ci-dessous, le message `'ceci est juste un message'` sera affiché dans la console avant que le message dans le callback soit traité, parce que le délai est le temps *minimum* requis par l'environnement d'exécution (runtime) pour traiter la demande (pas un temps _garanti_).
+
+Fondamentalement, `setTimeout` doit attendre la fin de tout le code pour les messages en file d'attente, même si vous avez spécifié une limite de temps particulière pour votre setTimeout.
+
+```js
+(function() {
+
+  console.log('ceci est le début');
+
+  setTimeout(function cb() {
+    console.log('Callback 1: ceci est un msg depuis le callback');
+  }); // has a default time value of 0
+
+  console.log('ceci est juste un message');
+
+  setTimeout(function cb1() {
+    console.log('Callback 2: ceci est un msg depuis le callback');
+  }, 0);
+
+  console.log('ceci est la fin');
+
+})();
+
+// "ceci est le début"
+// "ceci est juste un message"
+// "ceci est la fin"
+// "Callback 1: ceci est un msg depuis le callback"
+// "Callback 2: ceci est un msg depuis le callback"
+```
+
+### La communication entre plusieurs environnements d'exécution
+
+Un web worker ou une `iframe` d'origine multiple (_cross origin_) possède sa propre pile, son propre tas et sa propre queue de messages. Deux environnements d'exécution distincts peuvent uniquement communiquer via des messages envoyés par la méthode [`postMessage`](/fr/docs/Web/API/window.postMessage). Cette méthode permet d'ajouter un message à un autre environnement d'exécution si celui-ci « écoute » les événements `message`.
+
+## Non bloquant
+
+Le modèle de la boucle d'événement possède une caractéristique intéressante : JavaScript, à  la différence d'autres langages, ne bloque jamais. La gestion des entrées-sorties (_I/O_) est généralement traitée par des événements et des callbacks. Ainsi, quand l'application attend le résultat d'une requête [IndexedDB](/fr/docs/IndexedDB) ou d'une requête [XHR](/fr/docs/XMLHttpRequest), il reste possible de traiter d'autres éléments comme les saisies utilisateur.
+
+Il existe certaines exceptions historiques comme `alert` ou des appels XHR synchrones. C'est une bonne pratique que de les éviter. Attention, [certaines exceptions existent](https://stackoverflow.com/questions/2734025/is-javascript-guaranteed-to-be-single-threaded/2734311#2734311) (mais relèvent généralement de bugs d'implémentation).
+
+## Spécifications
+
+| Spécification                                                                                                                | É tat                            | Commentaires |
+| ---------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------ |
+| {{SpecName('HTML WHATWG', 'webappapis.html#event-loops', 'Event loops')}}                             | {{Spec2('HTML WHATWG')}} |              |
+| [Boucle d'évènements pour Node.js](https://nodejs.org/en/docs/guides/event-loop-timers-and-nexttick/#what-is-the-event-loop) | Standard évolutif                |              |
diff --git a/files/fr/web/javascript/guide/control_flow_and_error_handling/index.html b/files/fr/web/javascript/guide/control_flow_and_error_handling/index.html
deleted file mode 100644
index 59ec009395..0000000000
--- a/files/fr/web/javascript/guide/control_flow_and_error_handling/index.html
+++ /dev/null
@@ -1,430 +0,0 @@
----
-title: Contrôle du flux d'instructions et gestion des erreurs
-slug: Web/JavaScript/Guide/Control_flow_and_error_handling
-tags:
-  - Beginner
-  - Decision making
-  - Error Handling
-  - Flow control
-  - Guide
-  - JavaScript
-  - Logic
-  - control
-  - l10n:priority
-  - statements
-translation_of: Web/JavaScript/Guide/Control_flow_and_error_handling
-original_slug: Web/JavaScript/Guide/Contrôle_du_flux_Gestion_des_erreurs
----
-<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Grammar_and_types", "Web/JavaScript/Guide/Loops_and_iteration")}}</div>
-
-<p>JavaScript supporte nativement un ensemble d'instructions. Ces instructions permettent de définir les logiques des algorithmes, le flux des informations, etc. Ce chapitre fournit un aperçu sur le fonctionnement de ces différentes instructions JavaScript.</p>
-
-<p>Les <a href="/fr/docs/Web/JavaScript/Reference/Statements">Références de JavaScript</a> contiennent plus de détails sur les différentes instructions décrites dans ce chapitre.</p>
-
-<p>Toute expression est une instruction, voir la page <a href="/fr/docs/Web/JavaScript/Guide/Expressions_and_Operators">Expressions et opérateurs</a> pour plus d'informations sur les expressions. En JavaScript, le point-virgule (<code>;</code>) est utilisé afin de séparer des instructions dans le code.</p>
-
-<h2 id="block_statement">Les blocs d'instruction</h2>
-
-<p>L'instruction la plus simple est l'instruction de bloc qui permet de regrouper des instructions. Un bloc est délimité par une paire d'accolades :</p>
-
-<pre class="brush: js">{
-   instruction_1;
-   instruction_2;
-   ⋮
-   instruction_n;
-}</pre>
-
-<h3 id="example">Exemple</h3>
-
-<p>Les instructions de blocs sont souvent utilisées avec les instructions conditionnelles et itératives telles que <code>if</code>, <code>for</code>, <code>while</code>.</p>
-
-<pre class="brush: js">while (x &lt; 10) {
-  x++;
-}</pre>
-
-<p>Ici, <code>{ x++; }</code> représente le bloc.</p>
-
-<div class="note">
-  <p><strong>Note :</strong> En JavaScript, avant ECMAScript 2015 (aussi appelé ES6), les blocs <strong>n'introduisaient pas de nouvelles portées</strong>. Les variables introduites dans le bloc avec l'instruction <code>var</code> font partie de la portée de la fonction englobante ou du script. Les effets de leur définition persistent en dehors du bloc. Les blocs seuls utilisés avec <code>var</code> (et non <code>let</code>) pourront laisser penser que ce bloc se comportera comme en C ou en Java. Par exemple :</p>
-
-  <pre class="brush: js">var x = 1;
-{
-  var x = 2;
-}
-console.log(x); // affichera 2</pre>
-
-  <p>Cella affichera 2 car l'instruction <code>var x</code> contenue dans le bloc fait partie de la même portée que l'instruction <code>var x</code> écrite avant le bloc. En C ou en Java, le code équivalent à cet exemple aurait produit 1.</p>
-
-  <p>Cela a évolué avec ECMAScript 2015 (ES6). Les instructions <code>let</code>et <code>const</code> permettent de déclarer des variables dont la portée est celle du bloc courant. Voir les pages des références <a href="/fr/docs/Web/JavaScript/Reference/Statements/let"><code>let</code></a> et <a href="/fr/docs/Web/JavaScript/Reference/Statements/const"><code>const</code></a>.</p>
-</div>
-
-<h2 id="conditional_statements">Les instructions conditionnelles</h2>
-
-<p>Une instruction conditionnelle est un ensemble de commandes qui s'exécutent si une condition donnée est vérifiée. JavaScript possède deux instructions conditionnelles : <code>if...else</code> et <code>switch</code>.</p>
-
-<h3 id="if...else_statement">Instruction <code>if...else</code></h3>
-
-<p>On utilise l'instruction <code>if</code> lorsqu'on souhaite exécuter une instruction si une condition logique est vérifiée (vraie). La clause <code>else</code> est optionnelle et permet de préciser les instructions à exécuter si la condition logique n'est pas vérifiée (l'assertion est fausse). Voici un exemple qui illustre l'utilisation de l'instruction <code>if</code> :</p>
-
-<pre class="brush: js">if (condition) {
-  instruction_1;
-} else {
-  instruction_2;
-}</pre>
-
-<p><code>condition</code> peut correspondre à n'importe quelle expression qui est évaluée à <code>true</code> (vrai) ou <code>false</code> (faux). Voir la page sur les <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Boolean#description">booléens</a> pour plus d'informations sur les évaluations qui fournissent les valeurs <code>true</code> ou <code>false</code>. Si la <code>condition</code> vaut <code>true</code>, <code>instruction_1</code> est exécutée, sinon <code>instruction_2</code> sera exécutée. <code>instruction_1</code> et <code>instruction_2</code> peuvent correspondre à n'importe quelle instruction, y compris d'autres instructions <code>if</code>.</p>
-
-<p>Si on doit tester différentes conditions les unes à la suite des autres, il est possible d'utiliser <code>else if</code> pour lier les différents tests. On l'utilise de la façon suivante :</p>
-
-<pre class="brush: js">if (condition_1) {
-  instruction_1;
-} else if (condition_2) {
-  instruction_2;
-} else if (condition_n) {
-  instruction_n;
-} else {
-  dernière_instruction;
-}</pre>
-
-<p>Afin d'exécuter plusieurs instructions, on peut les regrouper grâce aux blocs (<code>{ ... }</code>) vus précédemment. C'est une bonne pratique que de les utiliser, surtout si on imbrique plusieurs instructions <code>if</code> les unes dans les autres:</p>
-
-<h4 id="best_practice">Meilleure pratique</h4>
-
-<p>En général, il est bon de toujours utiliser des instructions de type bloc —<em>surtout</em> lorsqu'on imbrique des instructions <code>if</code> :</p>
-
-<pre class="brush: js">if (condition) {
-  instruction_1_exécutée_si_condition_vraie;
-  instruction_2_exécutée_si_condition_vraie;
-} else {
-  instruction_3_exécutée_si_condition_fausse;
-  instruction_4_exécutée_si_condition_fausse;
-}</pre>
-
-<p>Attention à ne pas utiliser des instructions d'affectation dans les expressions conditionnelles. On peut, en effet, très facilement confondre l'affectation et le test d'égalité en lisant le code.</p>
-
-<p>Voici un exemple de ce qu'il ne faut <strong>pas</strong> faire :</p>
-
-<pre class="example-bad brush: js">if (x = y) {
-  /* exécuter des instructions */
-}</pre>
-
-<p>Ici, on ne teste pas si x vaut y, on affecte la valeur de y à x ! Si vous devez à tout prix utiliser une affectation dans une expression conditionnelle, une bonne pratique sera d'ajouter des parenthèses en plus autour de l'affectation. Par exemple :</p>
-
-<pre class="example-good brush: js">if ((x = y)) {
-  /* exécuter des instructions */
-}
-</pre>
-
-<h4 id="falsy_values">Valeurs équivalentes à false dans un contexte booléen (<em>falsy</em> values)</h4>
-
-<p>Les valeurs suivantes sont évaluées à <code>false</code> (également connues sous le nom de <a href="/fr/docs/Glossary/Falsy">valeurs Falsy</a>) :</p>
-
-<ul>
- <li><code>false</code></li>
- <li><code>undefined</code></li>
- <li><code>null</code></li>
- <li><code>0</code></li>
- <li><code>NaN</code></li>
- <li>la chaîne de caractères vide (<code>""</code>)</li>
-</ul>
-
-<p>Les autres valeurs, y compris les objets, seront équivalents à <code>true</code>.</p>
-
-<div class="warning">
-  <p><strong>Attention :</strong> Ne pas confondre les valeurs booléennes « primitives » <code>true</code> et <code>false</code> avec les valeurs créées grâce à un objet <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Boolean"><code>Boolean</code></a>.</p>
-  <p>Par exemple, on aura :</p>
-  
-  <pre class="brush: js">var b = new Boolean(false);
-  if (b) // cette condition est bien vérifiée !
-  if (b === true) // cette condition n'est pas vérifiée !</pre>
-</div>
-
-<h4 id="example_2">Exemple</h4>
-
-<p>Dans l'exemple qui suit, la fonction<code> checkData </code>renvoie <code>true</code> si une chaîne de caractères mesure trois caractères. Sinon, elle affiche une alerte et renvoie <code>false</code>.</p>
-
-<pre class="brush: js">function checkData(maChaîne) {
-  if (maChaîne.length == 3) {
-    return true;
-  } else {
-    alert("Veuillez saisir trois caractères. " +
-      maChaîne + " n'est pas valide.");
-    return false;
-  }
-}</pre>
-
-<h3 id="switch_statement">L'instruction <code>switch</code></h3>
-
-<p>L'instruction <code>switch</code> permet à un programme d'évaluer une expression et d'effectuer des instructions en fonction des différents cas de figures correspondants aux différentes valeurs. Si un cas correspond au résultat de l'évaluation, le programme exécute l'instruction associée.</p>
-
-<p>Voici un exemple utilisant une instruction <code>switch</code> :</p>
-
-<pre class="brush: js">switch (expression) {
-  case label_1:
-    instructions_1
-    [break;]
-  case label_2:
-    instructions_2
-    [break;]
-  ...
-  default:
-    instructions_par_defaut
-    [break;]
-}
-</pre>
-
-<p>JavaScript évalue l'instruction de commutation ci-dessus comme suit :</p>
-
-<ul>
-  <li>Le programme recherche d'abord une clause <code>case</code> dont l'étiquette correspond à la valeur de l'expression, puis il transfère le contrôle à cette clause, en exécutant les instructions associées.</li>
-  <li>Si aucune étiquette correspondante n'est trouvée, le programme recherche la clause optionnelle <code>default</code> :
-    <ul>
-      <li>Si une clause <code>default</code> est trouvée, le programme transfère le contrôle à cette clause, exécutant les déclarations associées.</li>
-      <li>Si aucune clause <code>default</code> n'est trouvée, le programme reprend l'exécution à l'instruction qui suit la fin de <code>switch</code>.</li>
-      <li>(Par convention, la clause <code>default</code> est écrite comme la dernière clause, mais il n'est pas nécessaire que ce soit le cas).</li>
-    </ul>
-  </li>
-</ul>
-
-<h4 id="break_statements">L'instruction break</h4>
-
-<p>L'instruction optionnelle <code>break</code>, éventuellement contenue pour chaque clause <code>case</code>, permet de ne pas exécuter les instructions pour les cas suivants. Si <code>break</code> n'est pas utilisé, le programme continuera son exécution avec les autres instructions contenues dans l'instruction <code>switch</code>.</p>
-
-<h5 id="example_3">Exemple</h5>
-
-<p>Dans l'exemple suivant, si <code>fruit</code> vaut "Banane", le programme exécutera les instructions associées. Quand <code>break</code> est rencontré, le programme passe aux instructions décrites après <code>switch</code>. Ici, si <code>break</code> n'était pas présent, les instructions pour le cas "Cerise" auraient également été exécutées.</p>
-
-<pre class="brush: js">switch (fruit) {
-  case "Orange":
-    console.log("Les oranges sont à 60 centimes le kilo.");
-    break;
-  case "Pomme":
-    console.log("Les pommes sont à 32 centimes le kilo.");
-    break;
-  case "Banane":
-    console.log("Les bananes sont à 48 centimes le kilo.");
-    break;
-  case "Cerise":
-    console.log("Les cerises sont à 3€ le kilo.");
-    break;
-  case "Mangue":
-    console.log("Les mangues sont à 50 centimes le kilo.");
-    break;
-  default:
-    console.log("Désolé, nous n'avons pas de " + fruittype + ".");
-}
-console.log("Souhaitez-vous autre chose ?");</pre>
-
-<h2 id="exception_handling_statements">Les instructions pour gérer les exceptions</h2>
-
-<p>Il est possible de lever des exceptions avec l'instruction <code>throw</code> et de les gérer (les intercepter) avec des instructions <code>try...catch</code>.</p>
-
-<ul>
-  <li><a href="#throw_statement">L'instruction throw</a></li>
-  <li><a href="#try...catch_statement">L'instruction <code>try...catch</code></a></li>
-</ul>
-
-<h3 id="exception_types">Les types d'exception</h3>
-
-<p>En JavaScript, n'importe quel objet peut être signalé comme une exception. Cependant, afin de respecter certaines conventions et de bénéficier de certaines informations, on pourra utiliser les types destinés à cet effet :</p>
-
-<ul>
- <li><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Error#error_types">Les exceptions ECMAScript</a></li>
- <li><a href="/fr/docs/Web/API/DOMException"><code>DOMException</code></a> et <a href="/fr/docs/Web/API/DOMError"><code>DOMError</code></a></li>
-</ul>
-
-<h3 id="throw_statement">L'instruction <code>throw</code></h3>
-
-<p>L'instruction <code>throw</code> est utilisée afin de signaler une exception. Lorsqu'on signale une exception, on définit une expression qui contient la valeur à renvoyer pour l'exception :</p>
-
-<pre class="brush: js">throw expression;</pre>
-
-<p>Il est possible d'utiliser n'importe quelle expression, sans restriction de type. Le fragment de code qui suit illustre les différentes possibilités :</p>
-
-<pre class="brush: js">throw "Erreur2";  //type String
-throw 42;         //type Number
-throw true;       //type Boolean
-throw {toString: function () { return "je suis un objet !"; } };
-</pre>
-
-<div class="note">
-  <p><strong>Note :</strong> Vous pouvez spécifier un objet lorsque vous lancez une exception. Vous pouvez alors faire référence aux propriétés de l'objet dans le bloc <code>catch</code>.</p>
-</div>
-
-<pre class="brush: js">// On crée le constructeur pour cet objet
-function ExceptionUtilisateur(message) {
-  this.message = message;
-  this.name = "ExceptionUtilisateur";
-}
-
-// On surcharge la méthode toString pour afficher
-// un message plus explicite (par exemple dans la console)
-ExceptionUtilisateur.prototype.toString = function() {
-  return this.name + ': "' + this.message + '"';
-}
-
-// On crée une instance pour ce type d'objet
-// et on renvoie une exception avec cette instance
-throw new ExceptionUtilisateur("La valeur fournie est trop élevée.");</pre>
-
-<h3 id="try...catch_statement">L'instruction <code>try...catch</code></h3>
-
-<p>L'instruction <code>try...catch</code> permet de définir un bloc d'instructions qu'on essaye (<em>try</em> en anglais) d'exécuter, ainsi qu'une ou plusieurs instructions à utiliser en cas d'erreur lorsqu'une exception se produit. Si une exception est signalée, l'instruction <code>try...catch</code> permettra de l' « attraper » (<em>catch</em> en anglais) et de définir ce qui se passe dans ce cas.</p>
-
-<p>L'instruction <code>try...catch</code> se compose d'un bloc <code>try</code> qui contient une ou plusieurs instructions et blocs <code>catch</code> qui contiennent les instructions à exécuter lorsqu'une exception se produit dans le bloc <code>try</code>.</p>
-
-<p>Autrement dit, dans la plupart des cas pour le programme, on veut que les instructions du bloc <code>try</code> se déroulent normalement et en cas de problème, on passe le contrôle au bloc <code>catch</code>. Si une instruction contenue dans le bloc <code>try</code> renvoie une exception, le contrôle sera immédiatement transféré au bloc <code>catch</code>. Si aucune exception n'est signalée au sein du bloc <code>try</code>, le bloc <code>catch</code> ne sera pas utilisé. Cette instruction peut comporter un bloc <code>finally</code> qui s'exécute après les blocs <code>try</code> et <code>catch</code> mais avant les instructions suivant l'instruction <code>try...catch</code>.</p>
-
-<p>Dans l'exemple qui suit, on utilise une instruction <code>try...catch</code>. On définit une fonction qui prend un nombre et renvoie le nom du mois correspondant à ce nombre. Si la valeur fournie n'est pas comprise entre 1 et 12, on signale une exception avec la valeur <code>"NuméroMoisInvalide"</code>. Lorsque cette exception est gérée dans le bloc <code>catch</code>, la variable <code>nomMois</code> recevra la valeur <code>"inconnu"</code>.</p>
-
-<pre class="brush: js">function getNomMois(numMois) {
-  numMois = numMois - 1; // On décale de 1 car les indices du tableaux commencent à 0
-  var mois = ["Janvier", "Février", "Mars", "Avril" ,"Mai", "Juin", "Juillet",
-              "Août", "Septembre", "Octobre", "Novembre", "Décembre"];
-  if (mois[numMois] != null) {
-    return mois[numMois];
-  } else {
-    throw "NuméroMoisInvalide";  // Ici on utilise l'instruction throw
-  }
-}
-
-try { // les instructions à essayer si tout se passe bien
-  nomMois = getNomMois(maVarMois); // La fonction peut renvoyer une exception
-} catch (e) {
-  nomMois = "inconnu";
-  gestionErreurLog(e); // on gère l'erreur avec une fonction
-}</pre>
-
-<h4 id="the_catch_block">Le bloc <code>catch</code></h4>
-
-<p>Un bloc <code>catch</code> peut être utilisé afin de gérer les exceptions pouvant être générées par les instructions du bloc <code>try</code>.</p>
-
-<pre class="brush: js">catch (ident) {
-  statements
-}</pre>
-
-<p>Le bloc <code>catch</code> définit un identifiant (<code>ident</code> dans le fragment de code précédent) qui contiendra la valeur passée par l'instruction <code>throw</code>. Cet identifiant peut être utilisé afin de récupérer des informations sur l'exception qui a été signalée.</p>
-
-<p>JavaScript crée cet identifiant lorsque le contrôle passe au bloc <code>catch</code>. L'identifiant ne « vit » qu'à l'intérieur du bloc <code>catch</code> et une fois que l'exécution du bloc <code>catch</code> est terminée, l'identifiant n'est plus disponible.</p>
-
-<p>Dans l'exemple suivant, le code renvoie une exception. Lorsque celle-ci est signalée, le contrôle passe au bloc <code>catch</code>.</p>
-
-<pre class="brush: js">try {
-  throw "monException"; // on génère une exception
-} catch (e) {
-  // les instructions utilisées pour gérer les exceptions
-  enregistrerErreurs(e); // on passe l'objet représentant l'exception à une fonction utilisée pour gérer les erreurs
-}</pre>
-
-<div class="note">
-  <p><strong>Note :</strong> Quand on souhaite afficher des erreurs dans la console, on privilégiera <a href="/fr/docs/Web/API/Console/error"><code>console.error()</code></a> plutôt que <a href="/fr/docs/Web/API/Console/log"><code>console.log()</code></a>. En effet, cette première méthode est plus adaptée et indiquera plus d'informations.</p>
-</div>
-
-<h4 id="the_finally_block">Le bloc <code>finally</code></h4>
-
-<p>Le bloc <code>finally</code> contient les instructions à exécuter après les blocs <code>try</code> et <code>catch</code> mais avant l'instruction suivant le <code>try...catch...finally</code>.</p>
-
-<p>Le bloc <code>finally</code> est exécuté dans tous les cas, <strong>qu'une exception ait été levée ou non</strong>. Si une exception est signalée et qu'il n'y a pas de bloc <code>catch</code> pour la gérer, les instructions du bloc <code>finally</code> seront tout de même exécutées.</p>
-
-<p>Le bloc <code>finally</code> peut être utilisé afin de finir proprement l'exécution malgré une exception. On peut, par exemple, devoir libérer une ressource, ou fermer un flux, etc.</p>
-
-<p>Dans l'exemple suivant, on écrit dans un fichier, si une exception se produit lors de l'écriture, on utilisera le bloc <code>finally</code> afin de bien fermer le flux vers le fichier avant la fin du script.</p>
-
-<pre class="brush: js">ouvrirFichier();
-try {
-  écrireFichier(données); // Une erreur peut se produire
-} catch(e) {
-  gérerException(e); // On gère le cas où on a une exception
-} finally {
-  fermerFichier(); // On n'oublie jamais de fermer le flux.
-}
-</pre>
-
-<p>Si le bloc <code>finally</code> renvoie une valeur, cette valeur sera considérée comme la valeur de retour pour tout l'ensemble <code>try-catch-finally</code>, quelles que soient les instructions <code>return</code> éventuellement utilisées dans les blocs <code>try</code> et <code>catch</code> :</p>
-
-<pre class="brush: js">function f() {
-  try {
-    console.log(0);
-    throw "bug";
-  } catch(e) {
-    console.log(1);
-    return true; // Cette instruction est bloquée jusqu'à la fin du bloc finally
-    console.log(2); // Ne pourra jamais être exécuté
-  } finally {
-    console.log(3);
-    return false; // On surcharge l'instruction "return" précédente
-    console.log(4); // Ne pourra jamais être exécuté
-  }
-  // "return false" est exécuté
-
-  console.log(5); // Ne pourra jamais être exécuté
-}
-f(); // affiche 0, 1, 3 puis renvoie false
-</pre>
-
-<p>Lorsqu'on surcharge les valeurs de retour avec le bloc <code>finally</code>, cela s'applique également aux exceptions qui sont levées (ou retransmises) au sein du bloc <code>catch</code> :</p>
-
-<pre class="brush: js">function f() {
-  try {
-    throw "problème";
-  } catch(e) {
-    console.log('"problème" interne intercepté');
-    throw e; // cette instruction est mise en attente
-             // tant que le bloc finally n'est pas fini
-  } finally {
-    return false; // surcharge le "throw" précédent
-  }
-  // "return false" est exécuté à ce moment
-}
-
-try {
-  f();
-} catch(e) {
-  // ce bloc n'est jamais utilisé car le throw
-  // utilisé dans le bloc catch a été surchargé
-  // par l'instruction return de finally
-  console.log('"problème" externe intercepté');
-}
-
-// Sortie
-// "problème" interne attrapé</pre>
-
-<h4 id="nesting_try...catch_statements">Imbriquer des instructions <code>try...catch</code></h4>
-
-<p>Il est possible d'imbriquer une ou plusieurs instructions <code>try...catch</code>.</p>
-
-<p>Si un bloc <code>try</code> interne n'a <em>pas</em> de bloc <code>catch</code> correspondant :</p>
-
-<ol>
-  <li>il <em>doit</em> contenir un bloc <code>finally</code>, et</li>
-  <li>le bloc <code>try...catch</code> de l'instruction <code>catch</code> englobante est vérifié pour une correspondance.</li>
-</ol>
-
-<p>Pour plus d'informations, voir <a href="/fr/docs/Web/JavaScript/Référence/Statements/try...catch#nested_try-blocks">nested try-blocks</a> sur la page de référence <code><a href="/fr/docs/Web/JavaScript/Référence/Statements/try...catch">try...catch</a></code>.</p>
-
-<h3 id="utilizing_error_objects">Utiliser les objets d'erreur</h3>
-
-<p>En fonction du type d'erreur qui est créée, on pourra utiliser les propriétés <code>name</code> et <code>message</code> afin d'obtenir plus d'informations.</p>
-
-<p>Généralement on a <code>name</code> qui fournit le type d'erreur rencontrée (ex : <code>DOMException</code> ou <code>Error</code>). La propriété <code>message</code>, quant à elle fournit un message descriptif de l'erreur (qu'on utilisera généralement lorsqu'on voudra convertir/afficher le texte correspondant à une erreur).</p>
-
-<p>Si vous construisez des erreurs, vous pouvez utiliser le constructeur <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Error"><code>Error</code></a> afin de disposer de ces propriétés.</p>
-
-<p>Ainsi, on pourra avoir :</p>
-
-<pre class="brush: js">function causerErreurs() {
-  if (toutEstSourceDErreurs()) {
-    throw (new Error('mon message'));
-  } else {
-    générerUneAutreErreur();
-  }
-}
-....
-try {
-  causerErreurs();
-} catch (e) {
-  console.error(e.name);// affiche 'Error'
-  console.error(e.message); // affiche 'mon message' ou un message d'erreur JavaScript
-}</pre>
-
-<div>{{PreviousNext("Web/JavaScript/Guide/Grammar_and_types", "Web/JavaScript/Guide/Loops_and_iteration")}}</div>
diff --git a/files/fr/web/javascript/guide/control_flow_and_error_handling/index.md b/files/fr/web/javascript/guide/control_flow_and_error_handling/index.md
new file mode 100644
index 0000000000..8e9f0a7d3a
--- /dev/null
+++ b/files/fr/web/javascript/guide/control_flow_and_error_handling/index.md
@@ -0,0 +1,450 @@
+---
+title: Contrôle du flux d'instructions et gestion des erreurs
+slug: Web/JavaScript/Guide/Control_flow_and_error_handling
+tags:
+  - Beginner
+  - Decision making
+  - Error Handling
+  - Flow control
+  - Guide
+  - JavaScript
+  - Logic
+  - control
+  - l10n:priority
+  - statements
+translation_of: Web/JavaScript/Guide/Control_flow_and_error_handling
+original_slug: Web/JavaScript/Guide/Contrôle_du_flux_Gestion_des_erreurs
+---
+{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Grammar_and_types", "Web/JavaScript/Guide/Loops_and_iteration")}}
+
+JavaScript supporte nativement un ensemble d'instructions. Ces instructions permettent de définir les logiques des algorithmes, le flux des informations, etc. Ce chapitre fournit un aperçu sur le fonctionnement de ces différentes instructions JavaScript.
+
+Les [Références de JavaScript](/fr/docs/Web/JavaScript/Reference/Statements) contiennent plus de détails sur les différentes instructions décrites dans ce chapitre.
+
+Toute expression est une instruction, voir la page [Expressions et opérateurs](/fr/docs/Web/JavaScript/Guide/Expressions_and_Operators) pour plus d'informations sur les expressions. En JavaScript, le point-virgule (`;`) est utilisé afin de séparer des instructions dans le code.
+
+## Les blocs d'instruction
+
+L'instruction la plus simple est l'instruction de bloc qui permet de regrouper des instructions. Un bloc est délimité par une paire d'accolades :
+
+```js
+{
+   instruction_1;
+   instruction_2;
+   ⋮
+   instruction_n;
+}
+```
+
+### Exemple
+
+Les instructions de blocs sont souvent utilisées avec les instructions conditionnelles et itératives telles que `if`, `for`, `while`.
+
+```js
+while (x < 10) {
+  x++;
+}
+```
+
+Ici, `{ x++; }` représente le bloc.
+
+> **Note :** En JavaScript, avant ECMAScript 2015 (aussi appelé ES6), les blocs **n'introduisaient pas de nouvelles portées**. Les variables introduites dans le bloc avec l'instruction `var` font partie de la portée de la fonction englobante ou du script. Les effets de leur définition persistent en dehors du bloc. Les blocs seuls utilisés avec `var` (et non `let`) pourront laisser penser que ce bloc se comportera comme en C ou en Java. Par exemple :
+>
+> ```js
+> var x = 1;
+> {
+>   var x = 2;
+> }
+> console.log(x); // affichera 2
+> ```
+>
+> Cella affichera 2 car l'instruction `var x` contenue dans le bloc fait partie de la même portée que l'instruction `var x` écrite avant le bloc. En C ou en Java, le code équivalent à cet exemple aurait produit 1.
+>
+> Cela a évolué avec ECMAScript 2015 (ES6). Les instructions `let`et `const` permettent de déclarer des variables dont la portée est celle du bloc courant. Voir les pages des références [`let`](/fr/docs/Web/JavaScript/Reference/Statements/let) et [`const`](/fr/docs/Web/JavaScript/Reference/Statements/const).
+
+## Les instructions conditionnelles
+
+Une instruction conditionnelle est un ensemble de commandes qui s'exécutent si une condition donnée est vérifiée. JavaScript possède deux instructions conditionnelles : `if...else` et `switch`.
+
+### Instruction `if...else`
+
+On utilise l'instruction `if` lorsqu'on souhaite exécuter une instruction si une condition logique est vérifiée (vraie). La clause `else` est optionnelle et permet de préciser les instructions à exécuter si la condition logique n'est pas vérifiée (l'assertion est fausse). Voici un exemple qui illustre l'utilisation de l'instruction `if` :
+
+```js
+if (condition) {
+  instruction_1;
+} else {
+  instruction_2;
+}
+```
+
+`condition` peut correspondre à n'importe quelle expression qui est évaluée à `true` (vrai) ou `false` (faux). Voir la page sur les [booléens](/fr/docs/Web/JavaScript/Reference/Global_Objects/Boolean#description) pour plus d'informations sur les évaluations qui fournissent les valeurs `true` ou `false`. Si la `condition` vaut `true`, `instruction_1` est exécutée, sinon `instruction_2` sera exécutée. `instruction_1` et `instruction_2` peuvent correspondre à n'importe quelle instruction, y compris d'autres instructions `if`.
+
+Si on doit tester différentes conditions les unes à la suite des autres, il est possible d'utiliser `else if` pour lier les différents tests. On l'utilise de la façon suivante :
+
+```js
+if (condition_1) {
+  instruction_1;
+} else if (condition_2) {
+  instruction_2;
+} else if (condition_n) {
+  instruction_n;
+} else {
+  dernière_instruction;
+}
+```
+
+Afin d'exécuter plusieurs instructions, on peut les regrouper grâce aux blocs (`{ ... }`) vus précédemment. C'est une bonne pratique que de les utiliser, surtout si on imbrique plusieurs instructions `if` les unes dans les autres:
+
+#### Meilleure pratique
+
+En général, il est bon de toujours utiliser des instructions de type bloc —_surtout_ lorsqu'on imbrique des instructions `if` :
+
+```js
+if (condition) {
+  instruction_1_exécutée_si_condition_vraie;
+  instruction_2_exécutée_si_condition_vraie;
+} else {
+  instruction_3_exécutée_si_condition_fausse;
+  instruction_4_exécutée_si_condition_fausse;
+}
+```
+
+Attention à ne pas utiliser des instructions d'affectation dans les expressions conditionnelles. On peut, en effet, très facilement confondre l'affectation et le test d'égalité en lisant le code.
+
+Voici un exemple de ce qu'il ne faut **pas** faire :
+
+```js example-bad
+if (x = y) {
+  /* exécuter des instructions */
+}
+```
+
+Ici, on ne teste pas si x vaut y, on affecte la valeur de y à x ! Si vous devez à tout prix utiliser une affectation dans une expression conditionnelle, une bonne pratique sera d'ajouter des parenthèses en plus autour de l'affectation. Par exemple :
+
+```js example-good
+if ((x = y)) {
+  /* exécuter des instructions */
+}
+```
+
+#### Valeurs équivalentes à false dans un contexte booléen (_falsy_ values)
+
+Les valeurs suivantes sont évaluées à `false` (également connues sous le nom de [valeurs Falsy](/fr/docs/Glossary/Falsy)) :
+
+- `false`
+- `undefined`
+- `null`
+- `0`
+- `NaN`
+- la chaîne de caractères vide (`""`)
+
+Les autres valeurs, y compris les objets, seront équivalents à `true`.
+
+> **Attention :** Ne pas confondre les valeurs booléennes « primitives » `true` et `false` avec les valeurs créées grâce à un objet [`Boolean`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Boolean).
+>
+> Par exemple, on aura :
+>
+> ```js
+> var b = new Boolean(false);
+>   if (b) // cette condition est bien vérifiée !
+>   if (b === true) // cette condition n'est pas vérifiée !
+> ```
+
+#### Exemple
+
+Dans l'exemple qui suit, la fonction` checkData `renvoie `true` si une chaîne de caractères mesure trois caractères. Sinon, elle affiche une alerte et renvoie `false`.
+
+```js
+function checkData(maChaîne) {
+  if (maChaîne.length == 3) {
+    return true;
+  } else {
+    alert("Veuillez saisir trois caractères. " +
+      maChaîne + " n'est pas valide.");
+    return false;
+  }
+}
+```
+
+### L'instruction `switch`
+
+L'instruction `switch` permet à un programme d'évaluer une expression et d'effectuer des instructions en fonction des différents cas de figures correspondants aux différentes valeurs. Si un cas correspond au résultat de l'évaluation, le programme exécute l'instruction associée.
+
+Voici un exemple utilisant une instruction `switch` :
+
+```js
+switch (expression) {
+  case label_1:
+    instructions_1
+    [break;]
+  case label_2:
+    instructions_2
+    [break;]
+  ...
+  default:
+    instructions_par_defaut
+    [break;]
+}
+```
+
+JavaScript évalue l'instruction de commutation ci-dessus comme suit :
+
+- Le programme recherche d'abord une clause `case` dont l'étiquette correspond à la valeur de l'expression, puis il transfère le contrôle à cette clause, en exécutant les instructions associées.
+- Si aucune étiquette correspondante n'est trouvée, le programme recherche la clause optionnelle `default` :
+
+  - Si une clause `default` est trouvée, le programme transfère le contrôle à cette clause, exécutant les déclarations associées.
+  - Si aucune clause `default` n'est trouvée, le programme reprend l'exécution à l'instruction qui suit la fin de `switch`.
+  - (Par convention, la clause `default` est écrite comme la dernière clause, mais il n'est pas nécessaire que ce soit le cas).
+
+#### L'instruction break
+
+L'instruction optionnelle `break`, éventuellement contenue pour chaque clause `case`, permet de ne pas exécuter les instructions pour les cas suivants. Si `break` n'est pas utilisé, le programme continuera son exécution avec les autres instructions contenues dans l'instruction `switch`.
+
+##### Exemple
+
+Dans l'exemple suivant, si `fruit` vaut "Banane", le programme exécutera les instructions associées. Quand `break` est rencontré, le programme passe aux instructions décrites après `switch`. Ici, si `break` n'était pas présent, les instructions pour le cas "Cerise" auraient également été exécutées.
+
+```js
+switch (fruit) {
+  case "Orange":
+    console.log("Les oranges sont à 60 centimes le kilo.");
+    break;
+  case "Pomme":
+    console.log("Les pommes sont à 32 centimes le kilo.");
+    break;
+  case "Banane":
+    console.log("Les bananes sont à 48 centimes le kilo.");
+    break;
+  case "Cerise":
+    console.log("Les cerises sont à 3€ le kilo.");
+    break;
+  case "Mangue":
+    console.log("Les mangues sont à 50 centimes le kilo.");
+    break;
+  default:
+    console.log("Désolé, nous n'avons pas de " + fruittype + ".");
+}
+console.log("Souhaitez-vous autre chose ?");
+```
+
+## Les instructions pour gérer les exceptions
+
+Il est possible de lever des exceptions avec l'instruction `throw` et de les gérer (les intercepter) avec des instructions `try...catch`.
+
+- [L'instruction throw](#throw_statement)
+- [L'instruction `try...catch`](#try...catch_statement)
+
+### Les types d'exception
+
+En JavaScript, n'importe quel objet peut être signalé comme une exception. Cependant, afin de respecter certaines conventions et de bénéficier de certaines informations, on pourra utiliser les types destinés à cet effet :
+
+- [Les exceptions ECMAScript](/fr/docs/Web/JavaScript/Reference/Global_Objects/Error#error_types)
+- [`DOMException`](/fr/docs/Web/API/DOMException) et [`DOMError`](/fr/docs/Web/API/DOMError)
+
+### L'instruction `throw`
+
+L'instruction `throw` est utilisée afin de signaler une exception. Lorsqu'on signale une exception, on définit une expression qui contient la valeur à renvoyer pour l'exception :
+
+```js
+throw expression;
+```
+
+Il est possible d'utiliser n'importe quelle expression, sans restriction de type. Le fragment de code qui suit illustre les différentes possibilités :
+
+```js
+throw "Erreur2";  //type String
+throw 42;         //type Number
+throw true;       //type Boolean
+throw {toString: function () { return "je suis un objet !"; } };
+```
+
+> **Note :** Vous pouvez spécifier un objet lorsque vous lancez une exception. Vous pouvez alors faire référence aux propriétés de l'objet dans le bloc `catch`.
+
+```js
+// On crée le constructeur pour cet objet
+function ExceptionUtilisateur(message) {
+  this.message = message;
+  this.name = "ExceptionUtilisateur";
+}
+
+// On surcharge la méthode toString pour afficher
+// un message plus explicite (par exemple dans la console)
+ExceptionUtilisateur.prototype.toString = function() {
+  return this.name + ': "' + this.message + '"';
+}
+
+// On crée une instance pour ce type d'objet
+// et on renvoie une exception avec cette instance
+throw new ExceptionUtilisateur("La valeur fournie est trop élevée.");
+```
+
+### L'instruction `try...catch`
+
+L'instruction `try...catch` permet de définir un bloc d'instructions qu'on essaye (_try_ en anglais) d'exécuter, ainsi qu'une ou plusieurs instructions à utiliser en cas d'erreur lorsqu'une exception se produit. Si une exception est signalée, l'instruction `try...catch` permettra de l' « attraper » (_catch_ en anglais) et de définir ce qui se passe dans ce cas.
+
+L'instruction `try...catch` se compose d'un bloc `try` qui contient une ou plusieurs instructions et blocs `catch` qui contiennent les instructions à exécuter lorsqu'une exception se produit dans le bloc `try`.
+
+Autrement dit, dans la plupart des cas pour le programme, on veut que les instructions du bloc `try` se déroulent normalement et en cas de problème, on passe le contrôle au bloc `catch`. Si une instruction contenue dans le bloc `try` renvoie une exception, le contrôle sera immédiatement transféré au bloc `catch`. Si aucune exception n'est signalée au sein du bloc `try`, le bloc `catch` ne sera pas utilisé. Cette instruction peut comporter un bloc `finally` qui s'exécute après les blocs `try` et `catch` mais avant les instructions suivant l'instruction `try...catch`.
+
+Dans l'exemple qui suit, on utilise une instruction `try...catch`. On définit une fonction qui prend un nombre et renvoie le nom du mois correspondant à ce nombre. Si la valeur fournie n'est pas comprise entre 1 et 12, on signale une exception avec la valeur `"NuméroMoisInvalide"`. Lorsque cette exception est gérée dans le bloc `catch`, la variable `nomMois` recevra la valeur `"inconnu"`.
+
+```js
+function getNomMois(numMois) {
+  numMois = numMois - 1; // On décale de 1 car les indices du tableaux commencent à 0
+  var mois = ["Janvier", "Février", "Mars", "Avril" ,"Mai", "Juin", "Juillet",
+              "Août", "Septembre", "Octobre", "Novembre", "Décembre"];
+  if (mois[numMois] != null) {
+    return mois[numMois];
+  } else {
+    throw "NuméroMoisInvalide";  // Ici on utilise l'instruction throw
+  }
+}
+
+try { // les instructions à essayer si tout se passe bien
+  nomMois = getNomMois(maVarMois); // La fonction peut renvoyer une exception
+} catch (e) {
+  nomMois = "inconnu";
+  gestionErreurLog(e); // on gère l'erreur avec une fonction
+}
+```
+
+#### Le bloc `catch`
+
+Un bloc `catch` peut être utilisé afin de gérer les exceptions pouvant être générées par les instructions du bloc `try`.
+
+```js
+catch (ident) {
+  statements
+}
+```
+
+Le bloc `catch` définit un identifiant (`ident` dans le fragment de code précédent) qui contiendra la valeur passée par l'instruction `throw`. Cet identifiant peut être utilisé afin de récupérer des informations sur l'exception qui a été signalée.
+
+JavaScript crée cet identifiant lorsque le contrôle passe au bloc `catch`. L'identifiant ne « vit » qu'à l'intérieur du bloc `catch` et une fois que l'exécution du bloc `catch` est terminée, l'identifiant n'est plus disponible.
+
+Dans l'exemple suivant, le code renvoie une exception. Lorsque celle-ci est signalée, le contrôle passe au bloc `catch`.
+
+```js
+try {
+  throw "monException"; // on génère une exception
+} catch (e) {
+  // les instructions utilisées pour gérer les exceptions
+  enregistrerErreurs(e); // on passe l'objet représentant l'exception à une fonction utilisée pour gérer les erreurs
+}
+```
+
+> **Note :** Quand on souhaite afficher des erreurs dans la console, on privilégiera [`console.error()`](/fr/docs/Web/API/Console/error) plutôt que [`console.log()`](/fr/docs/Web/API/Console/log). En effet, cette première méthode est plus adaptée et indiquera plus d'informations.
+
+#### Le bloc `finally`
+
+Le bloc `finally` contient les instructions à exécuter après les blocs `try` et `catch` mais avant l'instruction suivant le `try...catch...finally`.
+
+Le bloc `finally` est exécuté dans tous les cas, **qu'une exception ait été levée ou non**. Si une exception est signalée et qu'il n'y a pas de bloc `catch` pour la gérer, les instructions du bloc `finally` seront tout de même exécutées.
+
+Le bloc `finally` peut être utilisé afin de finir proprement l'exécution malgré une exception. On peut, par exemple, devoir libérer une ressource, ou fermer un flux, etc.
+
+Dans l'exemple suivant, on écrit dans un fichier, si une exception se produit lors de l'écriture, on utilisera le bloc `finally` afin de bien fermer le flux vers le fichier avant la fin du script.
+
+```js
+ouvrirFichier();
+try {
+  écrireFichier(données); // Une erreur peut se produire
+} catch(e) {
+  gérerException(e); // On gère le cas où on a une exception
+} finally {
+  fermerFichier(); // On n'oublie jamais de fermer le flux.
+}
+```
+
+Si le bloc `finally` renvoie une valeur, cette valeur sera considérée comme la valeur de retour pour tout l'ensemble `try-catch-finally`, quelles que soient les instructions `return` éventuellement utilisées dans les blocs `try` et `catch` :
+
+```js
+function f() {
+  try {
+    console.log(0);
+    throw "bug";
+  } catch(e) {
+    console.log(1);
+    return true; // Cette instruction est bloquée jusqu'à la fin du bloc finally
+    console.log(2); // Ne pourra jamais être exécuté
+  } finally {
+    console.log(3);
+    return false; // On surcharge l'instruction "return" précédente
+    console.log(4); // Ne pourra jamais être exécuté
+  }
+  // "return false" est exécuté
+
+  console.log(5); // Ne pourra jamais être exécuté
+}
+f(); // affiche 0, 1, 3 puis renvoie false
+```
+
+Lorsqu'on surcharge les valeurs de retour avec le bloc `finally`, cela s'applique également aux exceptions qui sont levées (ou retransmises) au sein du bloc `catch` :
+
+```js
+function f() {
+  try {
+    throw "problème";
+  } catch(e) {
+    console.log('"problème" interne intercepté');
+    throw e; // cette instruction est mise en attente
+             // tant que le bloc finally n'est pas fini
+  } finally {
+    return false; // surcharge le "throw" précédent
+  }
+  // "return false" est exécuté à ce moment
+}
+
+try {
+  f();
+} catch(e) {
+  // ce bloc n'est jamais utilisé car le throw
+  // utilisé dans le bloc catch a été surchargé
+  // par l'instruction return de finally
+  console.log('"problème" externe intercepté');
+}
+
+// Sortie
+// "problème" interne attrapé
+```
+
+#### Imbriquer des instructions `try...catch`
+
+Il est possible d'imbriquer une ou plusieurs instructions `try...catch`.
+
+Si un bloc `try` interne n'a _pas_ de bloc `catch` correspondant :
+
+1.  il _doit_ contenir un bloc `finally`, et
+2.  le bloc `try...catch` de l'instruction `catch` englobante est vérifié pour une correspondance.
+
+Pour plus d'informations, voir [nested try-blocks](/fr/docs/Web/JavaScript/Référence/Statements/try...catch#nested_try-blocks) sur la page de référence [`try...catch`](/fr/docs/Web/JavaScript/Référence/Statements/try...catch).
+
+### Utiliser les objets d'erreur
+
+En fonction du type d'erreur qui est créée, on pourra utiliser les propriétés `name` et `message` afin d'obtenir plus d'informations.
+
+Généralement on a `name` qui fournit le type d'erreur rencontrée (ex : `DOMException` ou `Error`). La propriété `message`, quant à elle fournit un message descriptif de l'erreur (qu'on utilisera généralement lorsqu'on voudra convertir/afficher le texte correspondant à une erreur).
+
+Si vous construisez des erreurs, vous pouvez utiliser le constructeur [`Error`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Error) afin de disposer de ces propriétés.
+
+Ainsi, on pourra avoir :
+
+```js
+function causerErreurs() {
+  if (toutEstSourceDErreurs()) {
+    throw (new Error('mon message'));
+  } else {
+    générerUneAutreErreur();
+  }
+}
+....
+try {
+  causerErreurs();
+} catch (e) {
+  console.error(e.name);// affiche 'Error'
+  console.error(e.message); // affiche 'mon message' ou un message d'erreur JavaScript
+}
+```
+
+{{PreviousNext("Web/JavaScript/Guide/Grammar_and_types", "Web/JavaScript/Guide/Loops_and_iteration")}}
diff --git a/files/fr/web/javascript/guide/details_of_the_object_model/index.html b/files/fr/web/javascript/guide/details_of_the_object_model/index.html
deleted file mode 100644
index 8cf9bf50ff..0000000000
--- a/files/fr/web/javascript/guide/details_of_the_object_model/index.html
+++ /dev/null
@@ -1,685 +0,0 @@
----
-title: Le modèle objet JavaScript en détails
-slug: Web/JavaScript/Guide/Details_of_the_Object_Model
-tags:
-  - Guide
-  - Intermediate
-  - JavaScript
-  - Object
-translation_of: Web/JavaScript/Guide/Details_of_the_Object_Model
-original_slug: Web/JavaScript/Guide/Le_modèle_objet_JavaScript_en_détails
----
-<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Working_with_Objects", "Web/JavaScript/Guide/Using_promises")}}</div>
-
-<p>JavaScript est un langage orienté objet basé sur des prototypes, plutôt que sur des classes. En raison de cette base différente, il peut être moins évident de comprendre comment JavaScript vous permet de créer des hiérarchies d'objets et d'avoir un héritage des propriétés et de leurs valeurs. Ce chapitre tente de clarifier la situation.</p>
-
-<p>Ce chapitre part du principe que vous avez déjà une certaine connaissance de JavaScript et que vous avez utilisé des fonctions JavaScript pour créer des objets simples.</p>
-
-<h2 id="class-based_vs._prototype-based_languages">Langages basés sur des classes ou des prototypes</h2>
-
-<p>Les langages orientés objets, basés sur des classes, tels que Java et C++, sont fondés sur le concept de deux entités distinctes : les classes et les instances.</p>
-
-<ul>
-  <li>Une <em>classe</em> définit toutes les propriétés qui caractérisent un certain ensemble d'objets (en considérant les méthodes et les champs en Java, ou les membres en C++, comme des propriétés). Une classe est abstraite par opposition à un membre particulier d'un ensemble d'objets qu'elle décrit. Par exemple, la classe <code>Employee</code> pourrait représenter l'ensemble de tous les employés.</li>
-  <li>Une <em>instance</em>, par contre, est l'instanciation d'une classe. Par exemple, <code>Victoria</code> pourrait être une instance de la classe <code>Employee</code>, représentant un individu particulier en tant qu'employé. Une instance possède exactement les mêmes propriétés que sa classe parente (ni plus, ni moins).</li>
-</ul>
-
-<p>Un langage basé sur des prototypes, tel que JavaScript, ne fait pas cette distinction : il a des objets. Un langage basé sur des prototypes possède la notion d'un <em>objet prototypique</em>, un objet utilisé comme modèle à partir duquel on peut obtenir les propriétés initiales d'un nouvel objet. Tout objet peut spécifier ses propres propriétés, soit lors de sa création, soit au moment de l'exécution. En outre, tout objet peut être associé en tant que <em>prototype</em> d'un autre objet, permettant au second objet de partager les propriétés du premier.</p>
-
-<h3 id="defining_a_class">La définition d'une classe</h3>
-
-<p>Dans les langages basés sur les classes, vous définissez une classe en utilisant une <em>définition de classe</em> distincte. Dans cette définition, vous pouvez spécifier des méthodes spéciales, appelées <em>constructeur</em> (et écrites « constructor »), pour créer des instances de la classe. Une méthode constructrice peut spécifier des valeurs initiales pour les propriétés de l'instance et effectuer d'autres traitements appropriés au moment de la création. Vous utilisez l'opérateur <code>new</code> en association avec la méthode constructrice pour créer des instances de la classe.</p>
-
-<p>JavaScript suit un modèle similaire, mais ne dispose pas d'une définition de classe distincte de celle du constructeur. Au lieu de cela, vous définissez une fonction de construction pour créer des objets avec un ensemble initial particulier de propriétés et de valeurs. Toute fonction JavaScript peut être utilisée comme constructeur. Vous utilisez l'opérateur <code>new</code> avec une fonction « constructor » pour créer un nouvel objet.</p>
-
-<div class="note">
-  <p><strong>Note :</strong> ECMAScript 2015 introduit une <a href="/fr/docs/Web/JavaScript/Reference/Classes">déclaration de classe</a> :</p>
-  
-  <blockquote>
-    <p>Les classes JavaScript, introduites dans ECMAScript 2015, sont principalement un enrichissement syntaxique de l'héritage basé sur les prototypes existant dans JavaScript. La syntaxe des classes n'introduit pas un nouveau modèle d'héritage orienté objet dans JavaScript.</p>
-  </blockquote>
-</div>
-
-<h3 id="subclasses_and_inheritance">Classes enfants et héritage</h3>
-
-<p>Dans un langage basé sur les classes, vous créez une hiérarchie de classes par le biais des définitions de classes. Dans une définition de classe, vous pouvez spécifier que la nouvelle classe est une <em>classe enfant</em> d'une classe déjà existante. La classe enfant hérite de toutes les propriétés de la classe parente et peut en plus ajouter de nouvelles propriétés ou modifier celles héritées. Par exemple, supposons que la classe <code>Employee</code> ne comprend que les propriétés <code>name</code> (« nom ») et <code>dept</code> (« département »), et que <code>Manager</code> est une classe enfant de <code>Employee</code> qui ajoute la propriété <code>reports</code> (« rapports »). Dans ce cas, une instance de la classe <code>Manager</code> aurait les trois propriétés : <code>name</code>, <code>dept</code>, et <code>reports</code>.</p>
-
-<p>JavaScript met en œuvre l'héritage en vous permettant d'associer un objet prototypique à n'importe quelle fonction de construction. Ainsi, vous pouvez créer exactement l'exemple <code>Employee</code> — <code>Manager</code>, mais vous utilisez une terminologie légèrement différente. D'abord, vous définissez la fonction du constructeur <code>Employee</code>, en spécifiant les propriétés <code>name</code> et <code>dept</code>. Ensuite, vous définissez la fonction du constructeur <code>Manager</code>, en appelant le constructeur <code>Employee</code> et en spécifiant la propriété <code>reports</code>. Enfin, vous attribuez un nouvel objet dérivé de <code>Employee.prototype</code> comme <code>prototype</code> pour la fonction du constructeur <code>Manager</code>. Ensuite, lorsque vous créez un nouveau <code>Manager</code>, il hérite des propriétés <code>name</code> et <code>dept</code> de l'objet <code>Employee</code>.</p>
-
-<h3 id="adding_and_removing_properties">Ajouter ou retirer des propriétés</h3>
-
-<p>Dans les langages basés sur les classes, vous créez généralement une classe au moment de la compilation, puis vous instanciez, des instances de la classe, soit au moment de la compilation, soit au moment de l'exécution. Vous ne pouvez pas modifier le nombre ou le type de propriétés d'une classe après avoir défini cette dernière. En JavaScript, cependant, au moment de l'exécution, vous pouvez ajouter ou supprimer des propriétés de tout objet. Si vous ajoutez une propriété à un objet qui est utilisé comme prototype pour un ensemble d'objets, les objets dont il est le prototype obtiennent également la nouvelle propriété.</p>
-
-<h3 id="summary_of_differences">Résumé des différences</h3>
-
-<p>Le tableau suivant donne un bref résumé de certaines de ces différences. Le reste de ce chapitre décrit les détails de l'utilisation des constructeurs et prototypes JavaScript pour créer une hiérarchie d'objets et les compare à la façon dont vous le feriez en Java.</p>
-
-<table class="standard-table">
-  <caption>Comparaison des systèmes d'objets basés sur des classes (Java) et des prototypes (JavaScript)</caption>
-  <thead>
-    <tr>
-      <th scope="row">Catégorie</th>
-      <th scope="col">Basé sur les classes (Java)</th>
-      <th scope="col">Basé sur des prototypes (JavaScript)</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <th scope="row">Classe et instance</th>
-      <td>La classe et l'instance sont des entités distinctes.</td>
-      <td>Tous les objets peuvent hériter d'un autre objet.</td>
-    </tr>
-    <tr>
-      <th scope="row">Définition</th>
-      <td>Définir une classe avec une définition de classe ; instancier une classe avec des méthodes de construction.</td>
-      <td>Définir et créer un ensemble d'objets avec des fonctions de construction.</td>
-    </tr>
-    <tr>
-      <th scope="row">Création d'un nouvel objet</th>
-      <td>Créer un objet unique avec l'opérateur <code>new</code>.</td>
-      <td>Pareil.</td>
-    </tr>
-    <tr>
-      <th scope="row">Construction de la hiérarchie des objets</th>
-      <td>Construire une hiérarchie d'objets en utilisant des définitions de classes pour définir des classes enfants à partir de classes existantes.</td>
-      <td>Construire une hiérarchie d'objets en assignant un objet comme prototype associé à une fonction de construction.</td>
-    </tr>
-    <tr>
-      <th scope="row">Modèle d'héritage</th>
-      <td>Hériter des propriétés en suivant la chaîne de classes.</td>
-      <td>Hériter des propriétés en suivant la chaîne des prototypes.</td>
-    </tr>
-    <tr>
-      <th scope="row">Extension des propriétés</th>
-      <td>La définition de la classe spécifie <em>toutes</em> les propriétés de toutes les instances d'une classe. Impossible d'ajouter des propriétés dynamiquement au moment de l'exécution.</td>
-      <td>La fonction ou le prototype du constructeur spécifie un <em>ensemble initial</em> de propriétés. On peut ajouter ou supprimer dynamiquement des propriétés à des objets individuels ou à l'ensemble des objets.</td>
-    </tr>
-  </tbody>
-</table>
-
-<h2 id="the_employee_example">L'exemple de l'employé</h2>
-
-<p>Le reste de ce chapitre utilise la hiérarchie des employés présentée dans la figure suivante.</p>
-
-<p><img alt="" src="figure8.1.png"></p>
-
-<p>Cela montre une hiérarchie d'objets avec les objets suivants :</p>
-
-<ul>
-  <li><code>Employee</code> possède les propriétés <code>name</code> (« le nom » dont la valeur par défaut est la chaîne de caractères vide) et <code>dept</code> (« le département » dont la valeur par défaut est « général »).</li>
-  <li><code>Manager</code> est basé sur <code>Employee</code>. Il ajoute la propriété <code>reports</code> (« les rapports » dont la valeur par défaut est un tableau vide, destiné à avoir pour valeur un tableau d'objets <code>Employee</code>).</li>
-  <li><code>WorkerBee</code> est également basé sur <code>Employee</code>. Il ajoute la propriété <code>projects</code> (« les projets » dont la valeur par défaut est un tableau vide, destiné à avoir pour valeur un tableau de chaînes de caractères).</li>
-  <li><code>SalesPerson</code> est basé sur <code>WorkerBee</code>. Il ajoute la propriété <code>quota</code> (dont la valeur par défaut est 100). Il surcharge la propriété <code>dept</code> avec la valeur « ventes », indiquant que tous les vendeurs sont dans le même département.</li>
-  <li><code>Engineer</code> est basé sur <code>WorkerBee</code>. Il ajoute la propriété <code>machine</code> (dont la valeur par défaut est une chaîne de caractères vide) et surcharge également la propriété <code>dept</code> avec la valeur «&nbsp;ingénierie&nbsp;».</li>
-</ul>
-
-<h2 id="creating_the_hierarchy">La création de la hiérarchie</h2>
-
-<p>Il existe plusieurs façons de définir des fonctions constructrices appropriées pour mettre en œuvre la hiérarchie des employés. La façon dont vous choisissez de les définir dépend en grande partie de ce que vous voulez être en mesure de faire dans votre application.</p>
-
-<p>Cette section montre comment utiliser des définitions très simples (et comparativement peu flexibles) pour démontrer comment faire fonctionner l'héritage. Dans ces définitions, vous ne pouvez spécifier aucune valeur de propriété lorsque vous créez un objet. L'objet nouvellement créé reçoit les valeurs par défaut, que vous pouvez modifier ultérieurement.</p>
-
-<p>Dans une application réelle, vous définiriez probablement des constructeurs qui vous permettent de fournir des valeurs de propriété au moment de la création de l'objet (voir <a href="#more_flexible_constructors">Des constructeurs plus flexibles</a> pour plus d'informations). Pour l'instant, ces définitions simples démontrent comment l'héritage se produit.</p>
-
-<p>Les définitions suivantes en Java et en JavaScript de <code>Employee</code> sont similaires. La seule différence est que vous devez spécifier le type de chaque propriété en Java mais pas en JavaScript (ceci est dû au fait que Java est un <a href="https://en.wikipedia.org/wiki/Strong_and_weak_typing">langage fortement typé</a> <small>(en anglais)</small> alors que JavaScript est un langage faiblement typé).</p>
-
-<h4 id="javascript_using_this_may_cause_an_error_for_the_following_examples">JavaScript (l'utilisation de cette option peut provoquer une erreur pour les exemples suivants)</h4>
-
-<pre class="brush: js">class Employee {
-  constructor() {
-    this.name = '';
-    this.dept = 'général';
-  }
-}</pre>
-
-<h4 id="javascript_**_use_this_instead">JavaScript ** (utilisez plutôt ceci)</h4>
-
-<pre class="brush: js">function Employee() {
-    this.name = '';
-    this.dept = 'général';
-}</pre>
-
-<h4 id="java">Java</h4>
-
-<pre class="brush: java">public class Employee {
-   public String name = "";
-   public String dept = "général";
-}</pre>
-
-<p>Les définitions de <code>Manager</code> et de <code>WorkerBee</code> montrent la différence dans la façon de spécifier l'objet immédiatement supérieur dans la chaîne d'héritage. En JavaScript, vous ajoutez une instance prototypique comme valeur de la propriété <code>prototype</code> de la fonction du constructeur, puis vous surchargez le <code>prototype.constructor</code> de la fonction du constructeur. Vous pouvez le faire à tout moment après avoir défini le constructeur. En Java, vous spécifiez la superclasse dans la définition de la classe. Vous ne pouvez pas modifier la superclasse en dehors de la définition de la classe.</p>
-
-<h4 id="javascript">JavaScript</h4>
-
-<pre class="brush: js">function Manager() {
-  Employee.call(this); // On étend l'objet parent
-  this.reports = []; // On définit une propriété unique à Manager
-}
-Manager.prototype = Object.create(Employee.prototype); // On définit le constructeur dans prototype
-Manager.prototype.constructor = Manager; // On surchage le constructeur
-
-function WorkerBee() {
-  Employee.call(this); // On étend l'objet parent
-  this.projects = []; // On définit une propriété unique à WorkerBee
-}
-WorkerBee.prototype = Object.create(Employee.prototype); // On définit le constructeur dans prototype
-WorkerBee.prototype.constructor = WorkerBee; // On surchage le constructeur
-</pre>
-
-<h4 id="java_2">Java</h4>
-
-<pre class="brush: java">// La classe Manager étend la classe parente Employee
-public class Manager extends Employee {
-   public Employee[] reports = new Employee[0]; // On définit une propriété unique à Manager
-}
-
-// La classe WorkerBee étend la classe parente Employee
-public class WorkerBee extends Employee {
-   public String[] projects = new String[0]; // On définit une propriété unique à WorkerBee
-}
-</pre>
-
-<p>Les définitions <code>Engineer</code> et <code>SalesPerson</code> créent des objets qui descendent de <code>WorkerBee</code> et donc de <code>Employee</code>. Un objet de ces types possède les propriétés de tous les objets situés au-dessus de lui dans la hiérarchie. En outre, ces définitions remplacent la valeur héritée de la propriété <code>dept</code> par de nouvelles valeurs spécifiques à ces objets.</p>
-
-<h4 id="javascript_2">JavaScript</h4>
-
-<pre class="brush: js">function SalesPerson() {
-   WorkerBee.call(this); // On étend l'objet WorkerBee
-   this.dept = 'ventes'; // On réécrit la valeur de « dept »
-   this.quota = 100; // On ajoute une propriété unique à SalesPerson
-}
-SalesPerson.prototype = Object.create(WorkerBee.prototype);
-SalesPerson.prototype.constructor = SalesPerson;
-
-function Engineer() {
-   WorkerBee.call(this); // On étend l'objet WorkerBee
-   this.dept = 'ingénierie'; // On réécrit la valeur de « dept »
-   this.machine = ''; // On ajoute une propriété unique à Engineer
-}
-Engineer.prototype = Object.create(WorkerBee.prototype);
-Engineer.prototype.constructor = Engineer;</pre>
-
-<h4 id="java_3">Java</h4>
-
-<pre class="brush: java">// La classe a pour classe parente WorkerBee
-public class SalesPerson extends WorkerBee {
-   public String dept = "ventes"; // On réécrit la valeur de « dept »
-   public double quota = 100.0; // On ajoute une propriété unique à SalesPerson
-}
-
-// La classe a pour classe parente WorkerBee
-public class Engineer extends WorkerBee {
-   public String dept = "ingénierie"; // On réécrit la valeur de « dept »
-   public String machine = ""; // On ajoute une propriété unique à Engineer
-}</pre>
-
-<p>À l'aide de ces définitions, vous pouvez créer des instances de ces objets qui obtiennent les valeurs par défaut de leurs propriétés. La figure suivante illustre l'utilisation de ces définitions JavaScript pour créer de nouveaux objets et montre les valeurs des propriétés de ces nouveaux objets.</p>
-
-<div class="note">
-  <p><strong>Note :</strong> Le terme <em>instance</em> a une signification technique spécifique dans les langages basés sur les classes. Dans ces langages, une instance est une instanciation individuelle d'une classe et est fondamentalement différente d'une classe. En JavaScript, « instance » n'a pas cette signification technique car JavaScript ne fait pas cette différence entre classes et instances. Toutefois, en parlant de JavaScript, le terme « instance » peut être utilisé de manière informelle pour désigner un objet créé à l'aide d'une fonction de construction particulière. Ainsi, dans cet exemple, vous pourriez dire de manière informelle que <code>jane</code> est une instance de <code>Engineer</code>. De même, bien que les termes <i>parent</i> (« Parent »), <i>child</i> (« Enfant »), <i>ancestor</i> (« Ancêtre ») et <i>descendant</i> (« Descendant ») n'aient pas de signification formelle en JavaScript ; vous pouvez les utiliser de manière informelle pour vous référer à des objets supérieurs ou inférieurs dans la chaîne des prototypes.</p>
-</div>
-
-<h3 id="creating_objects_with_simple_definitions">Création d'objets avec des définitions simples</h3>
-
-<h4 id="object_hierarchy">Hiérarchie des objets</h4>
-
-<p>La hiérarchie suivante est créée à l'aide du code situé ci-dessous.</p>
-
-<p><img src="figure8.3.png"></p>
-
-<h4 id="individual_objects_jim_sally_mark_fred_jane_etc._instances_created_from_constructor">Objets individuels = Jim, Sally, Mark, Fred, Jane, etc.<br>« Instances » créées à partir du constructeur</h4>
-
-<pre class="brush: js">let jim = new Employee;
-// Les parenthèses peuvent être omises si
-// le constructeur ne prend pas d'arguments.
-// jim.name correspond à ''
-// jim.dept correspond à 'général'.
-
-let sally = new Manager;
-// sally.name correspond à ''
-// sally.dept correspond à 'général'
-// sally.reports correspond à []
-
-let mark = new WorkerBee;
-// mark.name correspond à ''
-// mark.dept correspond à 'général'
-// mark.projects correspond à []
-
-let fred = new SalesPerson;
-// fred.name correspond à ''
-// fred.dept correspond à 'ventes'
-// fred.projects correspond à []
-// fred.quota correspond à 100
-
-let jane = new Engineer;
-// jane.name correspond à ''
-// jane.dept correspond à 'ingénierie'
-// jane.projects correspond à []
-// jane.machine correspond à ''
-</pre>
-
-<h2 id="object_properties">Les propriétés d'un objet</h2>
-
-<p>Cette section explique comment les objets héritent des propriétés d'autres objets dans la chaîne des prototypes et ce qui se passe lorsque vous ajoutez une propriété au moment de l'exécution.</p>
-
-<h3 id="inheriting_properties">L'héritage de propriétés</h3>
-
-<p>Supposons que vous créez l'objet <code>mark</code> comme un <code>WorkerBee</code> avec l'instruction suivante :</p>
-
-<pre class="brush: js">let mark = new WorkerBee;</pre>
-
-<p>Lorsque JavaScript voit l'opérateur <code>new</code>, il crée un nouvel objet générique et définit implicitement la valeur de la propriété interne [[Prototype]] à la valeur de <code>WorkerBee.prototype</code> et passe ce nouvel objet comme valeur du mot-clé <em><code>this</code></em> à la fonction du constructeur <code>WorkerBee</code>. La propriété interne [[Prototype]] détermine la chaîne de prototypes utilisée pour retourner les valeurs des propriétés. Une fois ces propriétés définies, JavaScript renvoie le nouvel objet et l'instruction d'affectation définit la variable <code>mark</code> à cet objet.</p>
-
-<p>Ce processus ne met pas explicitement des valeurs dans l'objet <code>mark</code> (valeurs <em>locales</em>) pour les propriétés que <code>mark</code> hérite de la chaîne de prototypes. Lorsque vous demandez la valeur d'une propriété, JavaScript vérifie d'abord si la valeur existe dans cet objet. Si c'est le cas, cette valeur est retournée. Si la valeur n'existe pas localement, JavaScript vérifie la chaîne des prototypes (en utilisant la propriété interne [[Prototype]]). Si un objet de la chaîne des prototypes possède une valeur pour la propriété, cette valeur est renvoyée. Si aucune propriété de ce type n'est trouvée, JavaScript indique que l'objet ne possède pas la propriété. Ainsi, l'objet <code>mark</code> possède les propriétés et valeurs suivantes :</p>
-
-<pre class="brush: js">mark.name = '';
-mark.dept = 'général';
-mark.projects = [];</pre>
-
-<p>L'objet <code>mark</code> se voit attribuer des valeurs locales pour les propriétés <code>name</code> et <code>dept</code> par le constructeur <code>Employee</code>. Une valeur locale lui est attribuée pour la propriété <code>projects</code> par le constructeur <code>WorkerBee</code>. On obtient ainsi l'héritage des propriétés et de leurs valeurs en JavaScript. Certaines subtilités de ce processus sont abordées dans <a href="#property_inheritance_revisited">L'héritage des propriétés, revisité</a>.</p>
-
-<p>Comme ces constructeurs ne vous permettent pas de fournir des valeurs spécifiques à une instance, ces informations sont génériques. Les valeurs des propriétés sont celles par défaut partagées par tous les nouveaux objets créés à partir de <code>WorkerBee</code>. Vous pouvez, bien sûr, modifier les valeurs de n'importe laquelle de ces propriétés. Ainsi, vous pourriez donner des informations spécifiques pour <code>mark</code> comme suit :</p>
-
-<pre class="brush: js">mark.name = 'Mark Eting';
-mark.dept = 'admin';
-mark.projects = ['navigateur'];</pre>
-
-<h3 id="adding_properties">L'ajout de propriétés</h3>
-
-<p>En JavaScript, vous pouvez ajouter des propriétés à tout objet au moment de l'exécution. Vous n'êtes pas contraint d'utiliser uniquement les propriétés fournies par la fonction du constructeur. Pour ajouter une propriété spécifique à un seul objet, vous attribuez une valeur à l'objet, comme suit :</p>
-
-<pre class="brush: js">mark.bonus = 3000;</pre>
-
-<p>Maintenant, l'objet <code>mark</code> possède une propriété <code>bonus</code>, mais aucun autre objet <code>WorkerBee</code> ne possède cette propriété.</p>
-
-<p>Si vous ajoutez une nouvelle propriété à un objet qui est utilisé comme prototype pour une fonction du constructeur, vous ajoutez cette propriété à tous les objets qui héritent des propriétés du prototype. Par exemple, vous pouvez ajouter une propriété <code>specialty</code> à tous les employés avec l'instruction suivante :</p>
-
-<pre class="brush: js">Employee.prototype.specialty = 'aucune';</pre>
-
-<p>Dès que JavaScript exécute cette instruction, l'objet <code>mark</code> possède également la propriété <code>specialty</code> avec la valeur <code>"aucune"</code>. La figure suivante montre l'effet de l'ajout de cette propriété au prototype <code>Employee</code>, puis de sa surcharge pour le prototype <code>Engineer</code>.</p>
-
-<p><img alt="Ajout de propriétés" src="figure8.4.png"></p>
-
-<h2 id="more_flexible_constructors">Des constructeurs plus flexibles</h2>
-
-<p>Les fonctions correctrices présentées jusqu'à présent ne vous permettent pas de spécifier les valeurs des propriétés lorsque vous créez une instance. Comme avec Java, vous pouvez fournir des arguments aux constructeurs pour initialiser les valeurs des propriétés des instances. La figure suivante montre une façon de le faire.</p>
-
-<p><img alt="Spécifier des propriétés dans un constructeur, prise 1" src="figure8.5.png"></p>
-
-<p>Les paires d'exemples suivantes montrent les définitions Java et JavaScript de ces objets.</p>
-
-<pre class="brush: js">// JavaScript
-function Employee(name, dept) {
-  this.name = name || ''; // L'argument donné OU la valeur par défaut
-  this.dept = dept || 'général'; // L'argument donné OU la valeur par défaut
-}</pre>
-
-<pre class="brush: java">// Java
-public class Employee {
-  public String name;
-  public String dept;
-  // On assigne les valeurs par défaut aux propriétés
-  public Employee () {
-    this("", "général");
-  }
-  // On assigne une valeur donnée et une par défaut aux propriétés
-  public Employee (String name) {
-    this(name, "général");
-  }
-  // On assigne les deux arguments donnés aux propriétés
-  public Employee (String name, String dept) {
-    this.name = name;
-    this.dept = dept;
-  }
-}</pre>
-
-<pre class="brush: js">// JavaScript
-function WorkerBee(projs) {
-  this.projects = projs || []; // L'argument donné OU la valeur par défaut
-}
-WorkerBee.prototype = new Employee;</pre>
-
-<pre class="brush: java">// Java
-public class WorkerBee extends Employee {
-   public String[] projects;
-   // On assigne une valeur par défaut à la propriété
-   public WorkerBee () {
-      this(new String[0]);
-   }
-   // On assigne l'argument donné à la propriété
-   public WorkerBee (String[] projs) {
-      projects = projs;
-   }
-}</pre>
-
-<pre class="brush: js">// JavaScript
-function Engineer(mach) {
-  this.dept = 'engineering'; // On réécrit la valeur de « dept »
-  this.machine = mach || ''; // L'argument donné OU la valeur par défaut
-}
-Engineer.prototype = new WorkerBee;</pre>
-
-<pre class="brush: java">// Java
-public class Engineer extends WorkerBee {
-   public String machine;
-   public Engineer () {
-      dept = "engineering"; // On réécrit la valeur de « dept »
-      machine = ""; // On assigne une valeur par défaut à la propriété
-   }
-   public Engineer (String mach) {
-      dept = "engineering"; // On réécrit la valeur de « dept »
-      machine = mach; // On assigne l'argument donné à la propriété
-   }
-}</pre>
-
-<p>Ces définitions JavaScript utilisent un idiome spécial pour définir les valeurs par défaut :</p>
-
-<pre class="brush: js">this.nom = nom || "";</pre>
-
-<p>L'opérateur logique OU de JavaScript (<code>||</code>) évalue son premier argument. Si cet argument se transforme en vrai, l'opérateur le retourne. Sinon, l'opérateur renvoie la valeur du deuxième argument. Par conséquent, cette ligne de code teste pour voir si <code>name</code> a une valeur utile pour la propriété <code>name</code>. Si c'est le cas, elle définit <code>this.name</code> à cette valeur. Sinon, elle définit <code>this.name</code> à la chaîne de caractères vide. Ce chapitre utilise cet idiome par souci de concision ; cependant, il peut être déroutant au premier abord.</p>
-
-<div class="note">
-  <p><strong>Note :</strong> Cela peut ne pas fonctionner comme prévu si la fonction du constructeur est appelée avec des arguments qui se convertissent en <code>false</code> (comme <code>0</code> (zéro) et la chaîne vide (<code>""</code>)). Dans ce cas, la valeur par défaut sera choisie.</p>
-</div>
-
-<p>Avec ces définitions, lorsque vous créez une instance d'un objet, vous pouvez spécifier des valeurs pour les propriétés définies localement. Vous pouvez utiliser l'instruction suivante pour créer un nouvel <code>Engineer</code> :</p>
-
-<pre class="brush: js">let jane = new Engineer('belau');</pre>
-
-<p>Les propriétés de <code>Jane</code> sont maintenant :</p>
-
-<pre class="brush: js">jane.name == '';
-jane.dept == 'engineering';
-jane.projects == [];
-jane.machine == 'belau';</pre>
-
-<p>Remarquez qu'avec ces définitions, vous ne pouvez pas spécifier une valeur initiale pour une propriété héritée telle que <code>name</code>. Si vous voulez spécifier une valeur initiale pour les propriétés héritées en JavaScript, vous devez ajouter du code supplémentaire à la fonction du constructeur.</p>
-
-<p>Jusqu'à présent, la fonction du constructeur a créé un objet générique, puis a spécifié les propriétés et valeurs locales du nouvel objet. Vous pouvez demander au constructeur d'ajouter d'autres propriétés en appelant directement la fonction du constructeur d'un objet situé plus haut dans la chaîne des prototypes. La figure suivante montre ces nouvelles définitions.</p>
-
-<p><img alt="Spécifier des propriétés dans un constructeur, prise 2" src="figure8.6.png"></p>
-
-<p>Examinons l'une de ces définitions en détails. Voici la nouvelle définition pour le constructeur <code>Engineer</code> :</p>
-
-<pre class="brush: js">function Engineer(name, projs, mach) {
-  this.base = WorkerBee;
-  this.base(name, 'ingénierie', projs);
-  this.machine = mach || '';
-}</pre>
-
-<p>Supposons que vous créez un nouvel objet <code>Engineer</code> comme suit :</p>
-
-<pre class="brush: js">let jane = new Engineer('Jane Dupont', ['navigateur', 'javascript'], 'belau');
-</pre>
-
-<p>JavaScript suit les étapes suivantes :</p>
-
-<ol>
-  <li>L'opérateur <code>new</code> crée un objet générique et définit sa propriété <code>__proto__</code> à <code>Engineer.prototype</code>.</li>
-  <li>L'opérateur <code>new</code> transmet le nouvel objet au constructeur <code>Engineer</code> comme valeur du mot clé <code>this</code>.</li>
-  <li>Le constructeur crée une nouvelle propriété appelée <code>base</code> pour cet objet et affecte la valeur du constructeur <code>WorkerBee</code> à la propriété <code>base</code>. Cela fait du constructeur <code>WorkerBee</code> une méthode de l'objet <code>Engineer</code>. Le nom de la propriété <code>base</code> n'est pas spécial. Vous pouvez utiliser n'importe quel nom de propriété légal ; <code>base</code> est évocateur de son but.</li>
-  <li>Le constructeur appelle la méthode <code>base</code>, en passant comme arguments deux des arguments passés au constructeur (<code>"Jane Dupont"</code> et <code>["navigateur", "javascript"]</code>) et également la chaîne <code>"ingénierie"</code>. L'utilisation explicite de <code>"ingénierie"</code> dans le constructeur indique que tous les objets <code>Engineer</code> ont la même valeur pour la propriété <code>dept</code> héritée, et cette valeur remplace la valeur héritée de <code>Employee</code>.</li>
-  <li>Parce que <code>base</code> est une méthode de <code>Engineer</code>, dans l'appel à <code>base</code>, JavaScript lie le mot-clé <code>this</code> à l'objet créé à l'étape 1. Ainsi, la fonction <code>WorkerBee</code> transmet à son tour les arguments <code>"Jane Dupont"</code> et <code>"ingénierie"</code> à la fonction du constructeur <code>Employee</code>. Au retour de la fonction du constructeur <code>Employee</code>, la fonction <code>WorkerBee</code> utilise l'argument restant pour définir la propriété <code>projects</code>.</li>
-  <li>Au retour de la méthode <code>base</code>, le constructeur <code>Engineer</code> initialise la propriété <code>machine</code> de l'objet à <code>"belau"</code>.</li>
-  <li>Au retour du constructeur, JavaScript affecte le nouvel objet à la variable <code>jane</code>.</li>
-</ol>
-
-<p>Vous pourriez penser que, ayant appelé le constructeur <code>WorkerBee</code> à partir de l'intérieur du constructeur <code>Engineer</code>, vous avez mis en place l'héritage de manière appropriée pour les objets <code>Engineer</code>. Ce n'est pas le cas. L'appel du constructeur <code>WorkerBee</code> garantit qu'un objet <code>Engineer</code> commence avec les propriétés spécifiées dans toutes les fonctions des constructeurs qui sont appelées. Cependant, si vous ajoutez ultérieurement des propriétés aux prototypes <code>Employee</code> ou <code>WorkerBee</code>, ces propriétés ne sont pas héritées par l'objet <code>Engineer</code>. Par exemple, supposons que vous ayez les déclarations suivantes :</p>
-
-<pre class="brush: js">function Engineer(name, projs, mach) {
-  this.base = WorkerBee;
-  this.base(name, 'ingénierie', projs);
-  this.machine = mach || '';
-}
-
-let jane = new Engineer('Jane Dupont', ['navigateur', 'javascript'], 'belau');
-Employee.prototype.specialty = 'aucune';</pre>
-
-<p>L'objet <code>jane</code> n'hérite pas de la propriété <code>specialty</code>. Vous devez encore configurer explicitement le prototype pour assurer un héritage dynamique. Supposons plutôt que vous ayez ces déclarations :</p>
-
-<pre class="brush: js">function Engineer(name, projs, mach) {
-  this.base = WorkerBee;
-  this.base(name, 'ingénierie', projs);
-  this.machine = mach || '';
-}
-
-Engineer.prototype = new WorkerBee;
-let jane = new Engineer('Jane Dupont', ['navigateur', 'javascript'], 'belau');
-Employee.prototype.specialty = 'aucune';</pre>
-
-<p>Maintenant la valeur de la propriété <code>jane</code> de l'objet <code>specialty</code> est « aucune ».</p>
-
-<p>Une autre façon d'hériter est d'utiliser les méthodes <code><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Function/call">call()</a></code> / <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Function/apply"><code>apply()</code></a>. Les méthodes ci-dessous sont équivalentes :</p>
-
-<pre class="brush: js">function Engineer(name, projs, mach) {
-  this.base = WorkerBee;
-  this.base(name, 'ingénierie', projs);
-  this.machine = mach || '';
-}</pre>
-
-<pre class="brush: js">function Engineer(name, projs, mach) {
-  WorkerBee.call(this, name, 'ingénierie', projs);
-  this.machine = mach || '';
-}</pre>
-
-<p>L'utilisation de la méthode JavaScript <code>call()</code> rend une implémentation plus propre car <code>base</code> n'est plus nécessaire.</p>
-
-<h2 id="property_inheritance_revisited">L'héritage des propriétés,  revisité</h2>
-
-<p>Les sections précédentes ont décrit comment les constructeurs et prototypes JavaScript fournissent des hiérarchies et de l'héritage. Cette section aborde certaines subtilités qui n'étaient pas nécessairement apparentes dans les discussions précédentes.</p>
-
-<h3 id="local_versus_inherited_values">Valeurs locales et valeurs héritées</h3>
-
-<p>Lorsque vous accédez à une propriété d'objet, JavaScript effectue les étapes suivantes, comme décrit précédemment dans ce chapitre :</p>
-
-<ol>
-  <li>Vérifiez si la valeur existe localement. Si c'est le cas, elle est retournée.</li>
-  <li>S'il n'y a pas de valeur locale, vérifiez la chaîne de prototypes (en utilisant la propriété <code>__proto__</code>).</li>
-  <li>Si un objet de la chaîne de prototypes possède une valeur pour la propriété spécifiée, renvoyer cette valeur.</li>
-  <li>Si aucune propriété de ce type n'est trouvée, l'objet ne possède pas cette propriété.</li>
-</ol>
-
-<p>Le résultat de ces étapes dépend de la façon dont vous définissez les choses en cours de route. L'exemple original avait ces définitions :</p>
-
-<pre class="brush: js">function Employee() {
-  this.name = '';
-  this.dept = 'général';
-}
-
-function WorkerBee() {
-  this.projects = [];
-}
-WorkerBee.prototype = new Employee;</pre>
-
-<p>Avec ces définitions, supposons que vous créez <code>amy</code> comme une instance de <code>WorkerBee</code> avec l'instruction suivante :</p>
-
-<pre class="brush: js">let amy = new WorkerBee;</pre>
-
-<p>L'objet <code>amy</code> possède une propriété locale, <code>projects</code>. Les valeurs des propriétés <code>name</code> et <code>dept</code> ne sont pas locales à <code>amy</code> et héritent donc dans la propriété <code>amy</code> de l'objet <code>__proto__</code>. Ainsi, <code>amy</code> possède ces valeurs de propriétés :</p>
-
-<pre class="brush: js">amy.name == '';
-amy.dept == 'général';
-amy.projects == [];</pre>
-
-<p>Supposons maintenant que vous modifiez la valeur de la propriété <code>name</code> dans le prototype associé à <code>Employee</code> :</p>
-
-<pre class="brush: js">Employee.prototype.name = 'Inconnu·e';</pre>
-
-<p>À première vue, on pourrait s'attendre à ce que cette nouvelle valeur se propage vers le bas à toutes les instances de <code>Employee</code>. Cependant, ce n'est pas le cas.</p>
-
-<p>Lorsque vous créez <em>n'importe quelle</em> instance de l'objet <code>Employee</code>, cette instance obtient une <strong>valeur locale</strong> pour la propriété <code>name</code> (la chaîne de caractères vide). Cela signifie que lorsque vous définissez le prototype de <code>WorkerBee</code> en créant un nouvel objet <code>Employee</code>, <code>WorkerBee.prototype</code> a une valeur locale pour la propriété <code>name</code>. Par conséquent, lorsque JavaScript recherche la propriété <code>name</code> de l'objet <code>amy</code> (une instance de <code>WorkerBee</code>), JavaScript trouve la valeur locale de cette propriété dans <code>WorkerBee.prototype</code>. Il ne cherche donc pas plus haut dans la chaîne jusqu'à <code>Employee.prototype</code>.</p>
-
-<p>Si vous souhaitez modifier la valeur d'une propriété d'un objet au moment de l'exécution et que la nouvelle valeur soit héritée par tous les descendants de l'objet, vous ne pouvez pas définir la propriété dans la fonction du constructeur de l'objet. Vous devez plutôt l'ajouter au prototype associé au constructeur. Par exemple, supposons que vous remplaciez le code précédent par le suivant :</p>
-
-<pre class="brush: js">function Employee() {
-  this.dept = 'général'; // Notez que this.name (une variable locale) n'apparaît pas ici
-}
-Employee.prototype.name = ''; // Un seul exemplaire
-
-function WorkerBee() {
-  this.projects = [];
-}
-WorkerBee.prototype = new Employee;
-
-let amy = new WorkerBee;
-
-Employee.prototype.name = 'Inconnu·e';</pre>
-
-<p>Dans ce cas, la propriété <code>name</code> de <code>amy</code> devient « Inconnu·e ».</p>
-
-<p>Comme le montrent ces exemples, si vous souhaitez définir des valeurs par défaut pour les propriétés d'un objet et que vous voulez pouvoir modifier ces valeurs au moment de l'exécution, vous devez définir les propriétés dans le prototype du constructeur, et non dans la fonction du constructeur elle-même.</p>
-
-<h3 id="determining_instance_relationships">Déterminer les relations entre les instances</h3>
-
-<p>La recherche de propriétés en JavaScript s'effectue dans les propriétés propres d'un objet et, si le nom de la propriété n'est pas trouvé, elle s'effectue dans la propriété spéciale de l'objet <code>__proto__</code>. Cette opération se poursuit de manière récursive ; le processus est appelé « recherche dans la chaîne des prototypes ».</p>
-
-<p>La propriété spéciale <code>__proto__</code> est définie lorsqu'un objet est construit ; elle prend la valeur de la propriété <code>prototype</code> du constructeur. Ainsi, l'expression <code>new Riri()</code> crée un objet avec <code>__proto__ == Riri.prototype</code>. Par conséquent, les modifications apportées aux propriétés de <code>Riri.prototype</code> modifient la recherche de propriétés pour tous les objets qui ont été créés par <code>new Riri()</code>.</p>
-
-<p>Chaque objet a une propriété <code>__proto__</code> (sauf <code>Object</code>) ; chaque fonction a une propriété <code>prototype</code>. Les objets peuvent donc être liés par « héritage de prototype » à d'autres objets. Vous pouvez tester l'héritage en comparant le <code>__proto__</code> d'un objet avec l'objet <code>prototype</code> d'une fonction. JavaScript fournit un raccourci : l'opérateur <code>instanceof</code> teste un objet par rapport à une fonction et renvoie vrai si l'objet hérite du prototype de la fonction. Par exemple,</p>
-
-<pre class="brush: js">let f = new Riri();
-let isTrue = (f instanceof Riri);</pre>
-  
-<p>Pour un exemple plus détaillé, supposons que vous ayez le même ensemble de définitions que celui présenté dans <a href="#inheriting_properties">Héritage des propriétés</a>. Créez un objet <code>Engineer</code> comme suit :</p>
-  
-<pre class="brush: js">let chris = new Engineer('Chris Anthème', ['jsd'], 'fiji');</pre>
-
-<p>Avec cet objet, les affirmations suivantes sont toutes vraies :</p>
-
-<pre class="brush: js">chris.__proto__ == Engineer.prototype;
-chris.__proto__.__proto__ == WorkerBee.prototype;
-chris.__proto__.__proto__.__proto__ == Employee.prototype;
-chris.__proto__.__proto__.__proto__.__proto__ == Object.prototype;
-chris.__proto__.__proto__.__proto__.__proto__.__proto__ == null;</pre>
-
-<p>Compte tenu de cela, vous pourriez écrire une fonction <code>instanceOf</code> comme suit :</p>
-
-<pre class="brush: js">function instanceOf(object, constructor) {
-   object = object.__proto__;
-   while (object != null) {
-      if (object == constructor.prototype)
-         return true;
-      if (typeof object == 'xml') {
-        return constructor.prototype == XML.prototype;
-      }
-      object = object.__proto__;
-   }
-   return false;
-}</pre>
-
-<div class="note">
-  <p><strong>Note :</strong> L'implémentation ci-dessus vérifie le type de l'objet par rapport à « xml » afin de contourner une bizarrerie de la façon dont les objets XML sont représentés dans les versions récentes de JavaScript. Voir <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=634150">bug 634150</a> si vous voulez connaître les détails.</p>
-</div>
-
-<p>En utilisant la fonction <code>instanceOf</code> définie ci-dessus, ces expressions sont vraies :</p>
-
-<pre class="brush: js">instanceOf(chris, Engineer)
-instanceOf(chris, WorkerBee)
-instanceOf(chris, Employee)
-instanceOf(chris, Object)</pre>
-
-<p>Mais l'expression suivante est fausse :</p>
-
-<pre class="brush: js">instanceOf(chris, SalesPerson)</pre>
-
-<h3 id="global_information_in_constructors">Les informations globales dans les constructeurs</h3>
-
-<p>Lorsque vous créez des constructeurs, vous devez faire attention si vous définissez des informations globales dans le constructeur. Par exemple, supposons que vous souhaitez qu'un identifiant unique soit automatiquement attribué à chaque nouvel employé. Vous pourriez utiliser la définition suivante pour <code>Employee</code> :</p>
-
-<pre class="brush: js">let idCounter = 1; // On définit un compteur d'identifiant
-
-function Employee(name, dept) {
-  this.name = name || '';
-  this.dept = dept || 'général';
-  this.id = idCounter++; // On assigne la valeur et on incrémente le compteur
-}</pre>
-
-<p>Avec cette définition, lorsque vous créez un nouvel <code>Employee</code>, le constructeur lui attribue l'ID suivant dans la séquence, puis incrémente le compteur d'ID global. Ainsi, si votre déclaration est la suivante, <code>victoria.id</code> vaut 1 et <code>harry.id</code> vaut 2 :</p>
-
-<pre class="brush: js">let victoria = new Employee('Victoria Lamar', 'pubs');
-let harry = new Employee('Harry Stocrate', 'ventes');</pre>
-
-<p>À première vue, cela semble correct. Cependant, <code>idCounter</code> est incrémenté à chaque fois qu'un objet <code>Employee</code> est créé, pour quelque raison que ce soit. Si vous créez toute la hiérarchie <code>Employee</code> présentée dans ce chapitre, le constructeur <code>Employee</code> est appelé chaque fois que vous mettez en place un prototype. Supposons que vous ayez le code suivant :</p>
-
-<pre class="brush: js">let idCounter = 1;
-
-function Employee(name, dept) {
-  this.name = name || '';
-  this.dept = dept || 'général';
-  this.id = idCounter++;
-}
-
-function Manager(name, dept, reports) {...}
-Manager.prototype = new Employee;
-
-function WorkerBee(name, dept, projs) {...}
-WorkerBee.prototype = new Employee;
-
-function Engineer(name, projs, mach) {...}
-Engineer.prototype = new WorkerBee;
-
-function SalesPerson(name, projs, quota) {...}
-SalesPerson.prototype = new WorkerBee;
-
-let mac = new Engineer('Mac Fly');</pre>
-
-<p>Supposons en outre que les définitions omises ici possèdent la propriété <code>base</code> et appellent le constructeur situé au-dessus d'elles dans la chaîne des prototypes. Dans ce cas, au moment où l'objet <code>mac</code> est créé, <code>mac.id</code> est 5.</p>
-
-<p>Selon l'application, il peut être important ou non que le compteur ait été incrémenté ces fois supplémentaires. Si vous vous souciez de la valeur exacte de ce compteur, une solution possible consiste à utiliser plutôt le constructeur suivant :</p>
-
-<pre class="brush: js">function Employee(name, dept) {
-  this.name = name || '';
-  this.dept = dept || 'general';
-  // Ceci est une écriture raccourcie de l'opérateur if
-  // Si « name » est défini, alors on assigne et on incrémente
-  if (name) {
-    this.id = idCounter++;
-  }
-}
-</pre>
-
-<p>Lorsque vous créez une instance de <code>Employee</code> pour l'utiliser comme prototype, vous ne fournissez pas d'arguments au constructeur. En utilisant cette définition du constructeur, lorsque vous ne fournissez pas d'arguments, le constructeur n'attribue pas de valeur à l'id et ne met pas à jour le compteur. Par conséquent, pour qu'un <code>Employee</code> obtienne un id, vous devez spécifier un nom pour l'employé. Dans cet exemple, <code>mac.id</code> serait 1.</p>
-
-<p>Vous pouvez également créer une copie de l'objet prototype de l'employé pour l'affecter à WorkerBee :</p>
-
-<pre class="brush: js">WorkerBee.prototype = Object.create(Employee.prototype);
-// au lieu de WorkerBee.prototype = new Employee</pre>
-
-<h3 id="no_multiple_inheritance">Pas d'héritage multiple</h3>
-
-<p>Certains langages orientés objets permettent l'héritage multiple. C'est-à-dire qu'un objet peut hériter des propriétés et des valeurs d'objets parents non apparentés. JavaScript ne prend pas en charge l'héritage multiple.</p>
-
-<p>L'héritage des valeurs des propriétés se produit au moment de l'exécution, lorsque JavaScript recherche une valeur dans la chaîne de prototypes d'un objet. Comme un objet n'a qu'un seul prototype associé, JavaScript ne peut pas hériter dynamiquement de plus d'une chaîne de prototypes.</p>
-
-<p>En JavaScript, vous pouvez faire en sorte qu'une fonction de construction appelle plusieurs autres fonctions de construction en son sein. Cela donne l'illusion d'un héritage multiple. Par exemple, considérez les déclarations suivantes :</p>
-
-<pre class="brush: js">function Hobbyist(hobby) {
-  this.hobby = hobby || 'plongée';
-}
-
-function Engineer(name, projs, mach, hobby) {
-  this.base1 = WorkerBee;
-  this.base1(name, 'ingénierie', projs);
-  this.base2 = Hobbyist;
-  this.base2(hobby);
-  this.machine = mach || '';
-}
-Engineer.prototype = new WorkerBee;
-
-let dennis = new Engineer('Dennis Ah', ['collaborateur'], 'hugo');
-</pre>
-
-<p>Supposons en outre que la définition de <code>WorkerBee</code> soit celle utilisée précédemment dans ce chapitre. Dans ce cas, l'objet <code>dennis</code> possède ces propriétés :</p>
-
-<pre class="brush: js">dennis.name == 'Dennis Ah';
-dennis.dept == 'ingénierie';
-dennis.projects == ['collaborateur'];
-dennis.machine == 'hugo';
-dennis.hobby == 'plongée';</pre>
-
-<p>Donc <code>dennis</code> obtient bien la propriété <code>hobby</code> du constructeur <code>Hobbyist</code>. Cependant, supposons que vous ajoutez ensuite une propriété au prototype du constructeur <code>Hobbyist</code> :</p>
-
-<pre class="brush: js">Hobbyist.prototype.equipment = ['masque', 'palmes', 'régulateur', 'bcd'];</pre>
-
-<p>L'objet <code>dennis</code> n'héritera pas de cette nouvelle propriété.</p>
-
-<div>{{PreviousNext("Web/JavaScript/Guide/Working_with_Objects", "Web/JavaScript/Guide/Using_promises")}}</div>
diff --git a/files/fr/web/javascript/guide/details_of_the_object_model/index.md b/files/fr/web/javascript/guide/details_of_the_object_model/index.md
new file mode 100644
index 0000000000..0176da2600
--- /dev/null
+++ b/files/fr/web/javascript/guide/details_of_the_object_model/index.md
@@ -0,0 +1,779 @@
+---
+title: Le modèle objet JavaScript en détails
+slug: Web/JavaScript/Guide/Details_of_the_Object_Model
+tags:
+  - Guide
+  - Intermediate
+  - JavaScript
+  - Object
+translation_of: Web/JavaScript/Guide/Details_of_the_Object_Model
+original_slug: Web/JavaScript/Guide/Le_modèle_objet_JavaScript_en_détails
+---
+{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Working_with_Objects", "Web/JavaScript/Guide/Using_promises")}}
+
+JavaScript est un langage orienté objet basé sur des prototypes, plutôt que sur des classes. En raison de cette base différente, il peut être moins évident de comprendre comment JavaScript vous permet de créer des hiérarchies d'objets et d'avoir un héritage des propriétés et de leurs valeurs. Ce chapitre tente de clarifier la situation.
+
+Ce chapitre part du principe que vous avez déjà une certaine connaissance de JavaScript et que vous avez utilisé des fonctions JavaScript pour créer des objets simples.
+
+## Langages basés sur des classes ou des prototypes
+
+Les langages orientés objets, basés sur des classes, tels que Java et C++, sont fondés sur le concept de deux entités distinctes : les classes et les instances.
+
+- Une _classe_ définit toutes les propriétés qui caractérisent un certain ensemble d'objets (en considérant les méthodes et les champs en Java, ou les membres en C++, comme des propriétés). Une classe est abstraite par opposition à un membre particulier d'un ensemble d'objets qu'elle décrit. Par exemple, la classe `Employee` pourrait représenter l'ensemble de tous les employés.
+- Une _instance_, par contre, est l'instanciation d'une classe. Par exemple, `Victoria` pourrait être une instance de la classe `Employee`, représentant un individu particulier en tant qu'employé. Une instance possède exactement les mêmes propriétés que sa classe parente (ni plus, ni moins).
+
+Un langage basé sur des prototypes, tel que JavaScript, ne fait pas cette distinction : il a des objets. Un langage basé sur des prototypes possède la notion d'un _objet prototypique_, un objet utilisé comme modèle à partir duquel on peut obtenir les propriétés initiales d'un nouvel objet. Tout objet peut spécifier ses propres propriétés, soit lors de sa création, soit au moment de l'exécution. En outre, tout objet peut être associé en tant que _prototype_ d'un autre objet, permettant au second objet de partager les propriétés du premier.
+
+### La définition d'une classe
+
+Dans les langages basés sur les classes, vous définissez une classe en utilisant une _définition de classe_ distincte. Dans cette définition, vous pouvez spécifier des méthodes spéciales, appelées _constructeur_ (et écrites « constructor »), pour créer des instances de la classe. Une méthode constructrice peut spécifier des valeurs initiales pour les propriétés de l'instance et effectuer d'autres traitements appropriés au moment de la création. Vous utilisez l'opérateur `new` en association avec la méthode constructrice pour créer des instances de la classe.
+
+JavaScript suit un modèle similaire, mais ne dispose pas d'une définition de classe distincte de celle du constructeur. Au lieu de cela, vous définissez une fonction de construction pour créer des objets avec un ensemble initial particulier de propriétés et de valeurs. Toute fonction JavaScript peut être utilisée comme constructeur. Vous utilisez l'opérateur `new` avec une fonction « constructor » pour créer un nouvel objet.
+
+> **Note :** ECMAScript 2015 introduit une [déclaration de classe](/fr/docs/Web/JavaScript/Reference/Classes) :
+>
+> > Les classes JavaScript, introduites dans ECMAScript 2015, sont principalement un enrichissement syntaxique de l'héritage basé sur les prototypes existant dans JavaScript. La syntaxe des classes n'introduit pas un nouveau modèle d'héritage orienté objet dans JavaScript.
+
+### Classes enfants et héritage
+
+Dans un langage basé sur les classes, vous créez une hiérarchie de classes par le biais des définitions de classes. Dans une définition de classe, vous pouvez spécifier que la nouvelle classe est une _classe enfant_ d'une classe déjà existante. La classe enfant hérite de toutes les propriétés de la classe parente et peut en plus ajouter de nouvelles propriétés ou modifier celles héritées. Par exemple, supposons que la classe `Employee` ne comprend que les propriétés `name` (« nom ») et `dept` (« département »), et que `Manager` est une classe enfant de `Employee` qui ajoute la propriété `reports` (« rapports »). Dans ce cas, une instance de la classe `Manager` aurait les trois propriétés : `name`, `dept`, et `reports`.
+
+JavaScript met en œuvre l'héritage en vous permettant d'associer un objet prototypique à n'importe quelle fonction de construction. Ainsi, vous pouvez créer exactement l'exemple `Employee` — `Manager`, mais vous utilisez une terminologie légèrement différente. D'abord, vous définissez la fonction du constructeur `Employee`, en spécifiant les propriétés `name` et `dept`. Ensuite, vous définissez la fonction du constructeur `Manager`, en appelant le constructeur `Employee` et en spécifiant la propriété `reports`. Enfin, vous attribuez un nouvel objet dérivé de `Employee.prototype` comme `prototype` pour la fonction du constructeur `Manager`. Ensuite, lorsque vous créez un nouveau `Manager`, il hérite des propriétés `name` et `dept` de l'objet `Employee`.
+
+### Ajouter ou retirer des propriétés
+
+Dans les langages basés sur les classes, vous créez généralement une classe au moment de la compilation, puis vous instanciez, des instances de la classe, soit au moment de la compilation, soit au moment de l'exécution. Vous ne pouvez pas modifier le nombre ou le type de propriétés d'une classe après avoir défini cette dernière. En JavaScript, cependant, au moment de l'exécution, vous pouvez ajouter ou supprimer des propriétés de tout objet. Si vous ajoutez une propriété à un objet qui est utilisé comme prototype pour un ensemble d'objets, les objets dont il est le prototype obtiennent également la nouvelle propriété.
+
+### Résumé des différences
+
+Le tableau suivant donne un bref résumé de certaines de ces différences. Le reste de ce chapitre décrit les détails de l'utilisation des constructeurs et prototypes JavaScript pour créer une hiérarchie d'objets et les compare à la façon dont vous le feriez en Java.
+
+<table class="standard-table">
+  <caption>
+    Comparaison des systèmes d'objets basés sur des classes (Java) et des
+    prototypes (JavaScript)
+  </caption>
+  <thead>
+    <tr>
+      <th scope="row">Catégorie</th>
+      <th scope="col">Basé sur les classes (Java)</th>
+      <th scope="col">Basé sur des prototypes (JavaScript)</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <th scope="row">Classe et instance</th>
+      <td>La classe et l'instance sont des entités distinctes.</td>
+      <td>Tous les objets peuvent hériter d'un autre objet.</td>
+    </tr>
+    <tr>
+      <th scope="row">Définition</th>
+      <td>
+        Définir une classe avec une définition de classe ; instancier une classe
+        avec des méthodes de construction.
+      </td>
+      <td>
+        Définir et créer un ensemble d'objets avec des fonctions de
+        construction.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Création d'un nouvel objet</th>
+      <td>Créer un objet unique avec l'opérateur <code>new</code>.</td>
+      <td>Pareil.</td>
+    </tr>
+    <tr>
+      <th scope="row">Construction de la hiérarchie des objets</th>
+      <td>
+        Construire une hiérarchie d'objets en utilisant des définitions de
+        classes pour définir des classes enfants à partir de classes existantes.
+      </td>
+      <td>
+        Construire une hiérarchie d'objets en assignant un objet comme prototype
+        associé à une fonction de construction.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Modèle d'héritage</th>
+      <td>Hériter des propriétés en suivant la chaîne de classes.</td>
+      <td>Hériter des propriétés en suivant la chaîne des prototypes.</td>
+    </tr>
+    <tr>
+      <th scope="row">Extension des propriétés</th>
+      <td>
+        La définition de la classe spécifie <em>toutes</em> les propriétés de
+        toutes les instances d'une classe. Impossible d'ajouter des propriétés
+        dynamiquement au moment de l'exécution.
+      </td>
+      <td>
+        La fonction ou le prototype du constructeur spécifie un
+        <em>ensemble initial</em> de propriétés. On peut ajouter ou supprimer
+        dynamiquement des propriétés à des objets individuels ou à l'ensemble
+        des objets.
+      </td>
+    </tr>
+  </tbody>
+</table>
+
+## L'exemple de l'employé
+
+Le reste de ce chapitre utilise la hiérarchie des employés présentée dans la figure suivante.
+
+![](figure8.1.png)
+
+Cela montre une hiérarchie d'objets avec les objets suivants :
+
+- `Employee` possède les propriétés `name` (« le nom » dont la valeur par défaut est la chaîne de caractères vide) et `dept` (« le département » dont la valeur par défaut est « général »).
+- `Manager` est basé sur `Employee`. Il ajoute la propriété `reports` (« les rapports » dont la valeur par défaut est un tableau vide, destiné à avoir pour valeur un tableau d'objets `Employee`).
+- `WorkerBee` est également basé sur `Employee`. Il ajoute la propriété `projects` (« les projets » dont la valeur par défaut est un tableau vide, destiné à avoir pour valeur un tableau de chaînes de caractères).
+- `SalesPerson` est basé sur `WorkerBee`. Il ajoute la propriété `quota` (dont la valeur par défaut est 100). Il surcharge la propriété `dept` avec la valeur « ventes », indiquant que tous les vendeurs sont dans le même département.
+- `Engineer` est basé sur `WorkerBee`. Il ajoute la propriété `machine` (dont la valeur par défaut est une chaîne de caractères vide) et surcharge également la propriété `dept` avec la valeur « ingénierie ».
+
+## La création de la hiérarchie
+
+Il existe plusieurs façons de définir des fonctions constructrices appropriées pour mettre en œuvre la hiérarchie des employés. La façon dont vous choisissez de les définir dépend en grande partie de ce que vous voulez être en mesure de faire dans votre application.
+
+Cette section montre comment utiliser des définitions très simples (et comparativement peu flexibles) pour démontrer comment faire fonctionner l'héritage. Dans ces définitions, vous ne pouvez spécifier aucune valeur de propriété lorsque vous créez un objet. L'objet nouvellement créé reçoit les valeurs par défaut, que vous pouvez modifier ultérieurement.
+
+Dans une application réelle, vous définiriez probablement des constructeurs qui vous permettent de fournir des valeurs de propriété au moment de la création de l'objet (voir [Des constructeurs plus flexibles](#more_flexible_constructors) pour plus d'informations). Pour l'instant, ces définitions simples démontrent comment l'héritage se produit.
+
+Les définitions suivantes en Java et en JavaScript de `Employee` sont similaires. La seule différence est que vous devez spécifier le type de chaque propriété en Java mais pas en JavaScript (ceci est dû au fait que Java est un [langage fortement typé](https://en.wikipedia.org/wiki/Strong_and_weak_typing) (en anglais) alors que JavaScript est un langage faiblement typé).
+
+#### JavaScript (l'utilisation de cette option peut provoquer une erreur pour les exemples suivants)
+
+```js
+class Employee {
+  constructor() {
+    this.name = '';
+    this.dept = 'général';
+  }
+}
+```
+
+#### JavaScript \*\* (utilisez plutôt ceci)
+
+```js
+function Employee() {
+    this.name = '';
+    this.dept = 'général';
+}
+```
+
+#### Java
+
+```java
+public class Employee {
+   public String name = "";
+   public String dept = "général";
+}
+```
+
+Les définitions de `Manager` et de `WorkerBee` montrent la différence dans la façon de spécifier l'objet immédiatement supérieur dans la chaîne d'héritage. En JavaScript, vous ajoutez une instance prototypique comme valeur de la propriété `prototype` de la fonction du constructeur, puis vous surchargez le `prototype.constructor` de la fonction du constructeur. Vous pouvez le faire à tout moment après avoir défini le constructeur. En Java, vous spécifiez la superclasse dans la définition de la classe. Vous ne pouvez pas modifier la superclasse en dehors de la définition de la classe.
+
+#### JavaScript
+
+```js
+function Manager() {
+  Employee.call(this); // On étend l'objet parent
+  this.reports = []; // On définit une propriété unique à Manager
+}
+Manager.prototype = Object.create(Employee.prototype); // On définit le constructeur dans prototype
+Manager.prototype.constructor = Manager; // On surchage le constructeur
+
+function WorkerBee() {
+  Employee.call(this); // On étend l'objet parent
+  this.projects = []; // On définit une propriété unique à WorkerBee
+}
+WorkerBee.prototype = Object.create(Employee.prototype); // On définit le constructeur dans prototype
+WorkerBee.prototype.constructor = WorkerBee; // On surchage le constructeur
+```
+
+#### Java
+
+```java
+// La classe Manager étend la classe parente Employee
+public class Manager extends Employee {
+   public Employee[] reports = new Employee[0]; // On définit une propriété unique à Manager
+}
+
+// La classe WorkerBee étend la classe parente Employee
+public class WorkerBee extends Employee {
+   public String[] projects = new String[0]; // On définit une propriété unique à WorkerBee
+}
+```
+
+Les définitions `Engineer` et `SalesPerson` créent des objets qui descendent de `WorkerBee` et donc de `Employee`. Un objet de ces types possède les propriétés de tous les objets situés au-dessus de lui dans la hiérarchie. En outre, ces définitions remplacent la valeur héritée de la propriété `dept` par de nouvelles valeurs spécifiques à ces objets.
+
+#### JavaScript
+
+```js
+function SalesPerson() {
+   WorkerBee.call(this); // On étend l'objet WorkerBee
+   this.dept = 'ventes'; // On réécrit la valeur de « dept »
+   this.quota = 100; // On ajoute une propriété unique à SalesPerson
+}
+SalesPerson.prototype = Object.create(WorkerBee.prototype);
+SalesPerson.prototype.constructor = SalesPerson;
+
+function Engineer() {
+   WorkerBee.call(this); // On étend l'objet WorkerBee
+   this.dept = 'ingénierie'; // On réécrit la valeur de « dept »
+   this.machine = ''; // On ajoute une propriété unique à Engineer
+}
+Engineer.prototype = Object.create(WorkerBee.prototype);
+Engineer.prototype.constructor = Engineer;
+```
+
+#### Java
+
+```java
+// La classe a pour classe parente WorkerBee
+public class SalesPerson extends WorkerBee {
+   public String dept = "ventes"; // On réécrit la valeur de « dept »
+   public double quota = 100.0; // On ajoute une propriété unique à SalesPerson
+}
+
+// La classe a pour classe parente WorkerBee
+public class Engineer extends WorkerBee {
+   public String dept = "ingénierie"; // On réécrit la valeur de « dept »
+   public String machine = ""; // On ajoute une propriété unique à Engineer
+}
+```
+
+À l'aide de ces définitions, vous pouvez créer des instances de ces objets qui obtiennent les valeurs par défaut de leurs propriétés. La figure suivante illustre l'utilisation de ces définitions JavaScript pour créer de nouveaux objets et montre les valeurs des propriétés de ces nouveaux objets.
+
+> **Note :** Le terme _instance_ a une signification technique spécifique dans les langages basés sur les classes. Dans ces langages, une instance est une instanciation individuelle d'une classe et est fondamentalement différente d'une classe. En JavaScript, « instance » n'a pas cette signification technique car JavaScript ne fait pas cette différence entre classes et instances. Toutefois, en parlant de JavaScript, le terme « instance » peut être utilisé de manière informelle pour désigner un objet créé à l'aide d'une fonction de construction particulière. Ainsi, dans cet exemple, vous pourriez dire de manière informelle que `jane` est une instance de `Engineer`. De même, bien que les termes _parent_ (« Parent »), _child_ (« Enfant »), _ancestor_ (« Ancêtre ») et _descendant_ (« Descendant ») n'aient pas de signification formelle en JavaScript ; vous pouvez les utiliser de manière informelle pour vous référer à des objets supérieurs ou inférieurs dans la chaîne des prototypes.
+
+### Création d'objets avec des définitions simples
+
+#### Hiérarchie des objets
+
+La hiérarchie suivante est créée à l'aide du code situé ci-dessous.
+
+![](figure8.3.png)
+
+#### Objets individuels = Jim, Sally, Mark, Fred, Jane, etc.<br>« Instances » créées à partir du constructeur
+
+```js
+let jim = new Employee;
+// Les parenthèses peuvent être omises si
+// le constructeur ne prend pas d'arguments.
+// jim.name correspond à ''
+// jim.dept correspond à 'général'.
+
+let sally = new Manager;
+// sally.name correspond à ''
+// sally.dept correspond à 'général'
+// sally.reports correspond à []
+
+let mark = new WorkerBee;
+// mark.name correspond à ''
+// mark.dept correspond à 'général'
+// mark.projects correspond à []
+
+let fred = new SalesPerson;
+// fred.name correspond à ''
+// fred.dept correspond à 'ventes'
+// fred.projects correspond à []
+// fred.quota correspond à 100
+
+let jane = new Engineer;
+// jane.name correspond à ''
+// jane.dept correspond à 'ingénierie'
+// jane.projects correspond à []
+// jane.machine correspond à ''
+```
+
+## Les propriétés d'un objet
+
+Cette section explique comment les objets héritent des propriétés d'autres objets dans la chaîne des prototypes et ce qui se passe lorsque vous ajoutez une propriété au moment de l'exécution.
+
+### L'héritage de propriétés
+
+Supposons que vous créez l'objet `mark` comme un `WorkerBee` avec l'instruction suivante :
+
+```js
+let mark = new WorkerBee;
+```
+
+Lorsque JavaScript voit l'opérateur `new`, il crée un nouvel objet générique et définit implicitement la valeur de la propriété interne \[\[Prototype]] à la valeur de `WorkerBee.prototype` et passe ce nouvel objet comme valeur du mot-clé _`this`_ à la fonction du constructeur `WorkerBee`. La propriété interne \[\[Prototype]] détermine la chaîne de prototypes utilisée pour retourner les valeurs des propriétés. Une fois ces propriétés définies, JavaScript renvoie le nouvel objet et l'instruction d'affectation définit la variable `mark` à cet objet.
+
+Ce processus ne met pas explicitement des valeurs dans l'objet `mark` (valeurs _locales_) pour les propriétés que `mark` hérite de la chaîne de prototypes. Lorsque vous demandez la valeur d'une propriété, JavaScript vérifie d'abord si la valeur existe dans cet objet. Si c'est le cas, cette valeur est retournée. Si la valeur n'existe pas localement, JavaScript vérifie la chaîne des prototypes (en utilisant la propriété interne \[\[Prototype]]). Si un objet de la chaîne des prototypes possède une valeur pour la propriété, cette valeur est renvoyée. Si aucune propriété de ce type n'est trouvée, JavaScript indique que l'objet ne possède pas la propriété. Ainsi, l'objet `mark` possède les propriétés et valeurs suivantes :
+
+```js
+mark.name = '';
+mark.dept = 'général';
+mark.projects = [];
+```
+
+L'objet `mark` se voit attribuer des valeurs locales pour les propriétés `name` et `dept` par le constructeur `Employee`. Une valeur locale lui est attribuée pour la propriété `projects` par le constructeur `WorkerBee`. On obtient ainsi l'héritage des propriétés et de leurs valeurs en JavaScript. Certaines subtilités de ce processus sont abordées dans [L'héritage des propriétés, revisité](#property_inheritance_revisited).
+
+Comme ces constructeurs ne vous permettent pas de fournir des valeurs spécifiques à une instance, ces informations sont génériques. Les valeurs des propriétés sont celles par défaut partagées par tous les nouveaux objets créés à partir de `WorkerBee`. Vous pouvez, bien sûr, modifier les valeurs de n'importe laquelle de ces propriétés. Ainsi, vous pourriez donner des informations spécifiques pour `mark` comme suit :
+
+```js
+mark.name = 'Mark Eting';
+mark.dept = 'admin';
+mark.projects = ['navigateur'];
+```
+
+### L'ajout de propriétés
+
+En JavaScript, vous pouvez ajouter des propriétés à tout objet au moment de l'exécution. Vous n'êtes pas contraint d'utiliser uniquement les propriétés fournies par la fonction du constructeur. Pour ajouter une propriété spécifique à un seul objet, vous attribuez une valeur à l'objet, comme suit :
+
+```js
+mark.bonus = 3000;
+```
+
+Maintenant, l'objet `mark` possède une propriété `bonus`, mais aucun autre objet `WorkerBee` ne possède cette propriété.
+
+Si vous ajoutez une nouvelle propriété à un objet qui est utilisé comme prototype pour une fonction du constructeur, vous ajoutez cette propriété à tous les objets qui héritent des propriétés du prototype. Par exemple, vous pouvez ajouter une propriété `specialty` à tous les employés avec l'instruction suivante :
+
+```js
+Employee.prototype.specialty = 'aucune';
+```
+
+Dès que JavaScript exécute cette instruction, l'objet `mark` possède également la propriété `specialty` avec la valeur `"aucune"`. La figure suivante montre l'effet de l'ajout de cette propriété au prototype `Employee`, puis de sa surcharge pour le prototype `Engineer`.
+
+![Ajout de propriétés](figure8.4.png)
+
+## Des constructeurs plus flexibles
+
+Les fonctions correctrices présentées jusqu'à présent ne vous permettent pas de spécifier les valeurs des propriétés lorsque vous créez une instance. Comme avec Java, vous pouvez fournir des arguments aux constructeurs pour initialiser les valeurs des propriétés des instances. La figure suivante montre une façon de le faire.
+
+![Spécifier des propriétés dans un constructeur, prise 1](figure8.5.png)
+
+Les paires d'exemples suivantes montrent les définitions Java et JavaScript de ces objets.
+
+```js
+// JavaScript
+function Employee(name, dept) {
+  this.name = name || ''; // L'argument donné OU la valeur par défaut
+  this.dept = dept || 'général'; // L'argument donné OU la valeur par défaut
+}
+```
+
+```java
+// Java
+public class Employee {
+  public String name;
+  public String dept;
+  // On assigne les valeurs par défaut aux propriétés
+  public Employee () {
+    this("", "général");
+  }
+  // On assigne une valeur donnée et une par défaut aux propriétés
+  public Employee (String name) {
+    this(name, "général");
+  }
+  // On assigne les deux arguments donnés aux propriétés
+  public Employee (String name, String dept) {
+    this.name = name;
+    this.dept = dept;
+  }
+}
+```
+
+```js
+// JavaScript
+function WorkerBee(projs) {
+  this.projects = projs || []; // L'argument donné OU la valeur par défaut
+}
+WorkerBee.prototype = new Employee;
+```
+
+```java
+// Java
+public class WorkerBee extends Employee {
+   public String[] projects;
+   // On assigne une valeur par défaut à la propriété
+   public WorkerBee () {
+      this(new String[0]);
+   }
+   // On assigne l'argument donné à la propriété
+   public WorkerBee (String[] projs) {
+      projects = projs;
+   }
+}
+```
+
+```js
+// JavaScript
+function Engineer(mach) {
+  this.dept = 'engineering'; // On réécrit la valeur de « dept »
+  this.machine = mach || ''; // L'argument donné OU la valeur par défaut
+}
+Engineer.prototype = new WorkerBee;
+```
+
+```java
+// Java
+public class Engineer extends WorkerBee {
+   public String machine;
+   public Engineer () {
+      dept = "engineering"; // On réécrit la valeur de « dept »
+      machine = ""; // On assigne une valeur par défaut à la propriété
+   }
+   public Engineer (String mach) {
+      dept = "engineering"; // On réécrit la valeur de « dept »
+      machine = mach; // On assigne l'argument donné à la propriété
+   }
+}
+```
+
+Ces définitions JavaScript utilisent un idiome spécial pour définir les valeurs par défaut :
+
+```js
+this.nom = nom || "";
+```
+
+L'opérateur logique OU de JavaScript (`||`) évalue son premier argument. Si cet argument se transforme en vrai, l'opérateur le retourne. Sinon, l'opérateur renvoie la valeur du deuxième argument. Par conséquent, cette ligne de code teste pour voir si `name` a une valeur utile pour la propriété `name`. Si c'est le cas, elle définit `this.name` à cette valeur. Sinon, elle définit `this.name` à la chaîne de caractères vide. Ce chapitre utilise cet idiome par souci de concision ; cependant, il peut être déroutant au premier abord.
+
+> **Note :** Cela peut ne pas fonctionner comme prévu si la fonction du constructeur est appelée avec des arguments qui se convertissent en `false` (comme `0` (zéro) et la chaîne vide (`""`)). Dans ce cas, la valeur par défaut sera choisie.
+
+Avec ces définitions, lorsque vous créez une instance d'un objet, vous pouvez spécifier des valeurs pour les propriétés définies localement. Vous pouvez utiliser l'instruction suivante pour créer un nouvel `Engineer` :
+
+```js
+let jane = new Engineer('belau');
+```
+
+Les propriétés de `Jane` sont maintenant :
+
+```js
+jane.name == '';
+jane.dept == 'engineering';
+jane.projects == [];
+jane.machine == 'belau';
+```
+
+Remarquez qu'avec ces définitions, vous ne pouvez pas spécifier une valeur initiale pour une propriété héritée telle que `name`. Si vous voulez spécifier une valeur initiale pour les propriétés héritées en JavaScript, vous devez ajouter du code supplémentaire à la fonction du constructeur.
+
+Jusqu'à présent, la fonction du constructeur a créé un objet générique, puis a spécifié les propriétés et valeurs locales du nouvel objet. Vous pouvez demander au constructeur d'ajouter d'autres propriétés en appelant directement la fonction du constructeur d'un objet situé plus haut dans la chaîne des prototypes. La figure suivante montre ces nouvelles définitions.
+
+![Spécifier des propriétés dans un constructeur, prise 2](figure8.6.png)
+
+Examinons l'une de ces définitions en détails. Voici la nouvelle définition pour le constructeur `Engineer` :
+
+```js
+function Engineer(name, projs, mach) {
+  this.base = WorkerBee;
+  this.base(name, 'ingénierie', projs);
+  this.machine = mach || '';
+}
+```
+
+Supposons que vous créez un nouvel objet `Engineer` comme suit :
+
+```js
+let jane = new Engineer('Jane Dupont', ['navigateur', 'javascript'], 'belau');
+```
+
+JavaScript suit les étapes suivantes :
+
+1.  L'opérateur `new` crée un objet générique et définit sa propriété `__proto__` à `Engineer.prototype`.
+2.  L'opérateur `new` transmet le nouvel objet au constructeur `Engineer` comme valeur du mot clé `this`.
+3.  Le constructeur crée une nouvelle propriété appelée `base` pour cet objet et affecte la valeur du constructeur `WorkerBee` à la propriété `base`. Cela fait du constructeur `WorkerBee` une méthode de l'objet `Engineer`. Le nom de la propriété `base` n'est pas spécial. Vous pouvez utiliser n'importe quel nom de propriété légal ; `base` est évocateur de son but.
+4.  Le constructeur appelle la méthode `base`, en passant comme arguments deux des arguments passés au constructeur (`"Jane Dupont"` et `["navigateur", "javascript"]`) et également la chaîne `"ingénierie"`. L'utilisation explicite de `"ingénierie"` dans le constructeur indique que tous les objets `Engineer` ont la même valeur pour la propriété `dept` héritée, et cette valeur remplace la valeur héritée de `Employee`.
+5.  Parce que `base` est une méthode de `Engineer`, dans l'appel à `base`, JavaScript lie le mot-clé `this` à l'objet créé à l'étape 1. Ainsi, la fonction `WorkerBee` transmet à son tour les arguments `"Jane Dupont"` et `"ingénierie"` à la fonction du constructeur `Employee`. Au retour de la fonction du constructeur `Employee`, la fonction `WorkerBee` utilise l'argument restant pour définir la propriété `projects`.
+6.  Au retour de la méthode `base`, le constructeur `Engineer` initialise la propriété `machine` de l'objet à `"belau"`.
+7.  Au retour du constructeur, JavaScript affecte le nouvel objet à la variable `jane`.
+
+Vous pourriez penser que, ayant appelé le constructeur `WorkerBee` à partir de l'intérieur du constructeur `Engineer`, vous avez mis en place l'héritage de manière appropriée pour les objets `Engineer`. Ce n'est pas le cas. L'appel du constructeur `WorkerBee` garantit qu'un objet `Engineer` commence avec les propriétés spécifiées dans toutes les fonctions des constructeurs qui sont appelées. Cependant, si vous ajoutez ultérieurement des propriétés aux prototypes `Employee` ou `WorkerBee`, ces propriétés ne sont pas héritées par l'objet `Engineer`. Par exemple, supposons que vous ayez les déclarations suivantes :
+
+```js
+function Engineer(name, projs, mach) {
+  this.base = WorkerBee;
+  this.base(name, 'ingénierie', projs);
+  this.machine = mach || '';
+}
+
+let jane = new Engineer('Jane Dupont', ['navigateur', 'javascript'], 'belau');
+Employee.prototype.specialty = 'aucune';
+```
+
+L'objet `jane` n'hérite pas de la propriété `specialty`. Vous devez encore configurer explicitement le prototype pour assurer un héritage dynamique. Supposons plutôt que vous ayez ces déclarations :
+
+```js
+function Engineer(name, projs, mach) {
+  this.base = WorkerBee;
+  this.base(name, 'ingénierie', projs);
+  this.machine = mach || '';
+}
+
+Engineer.prototype = new WorkerBee;
+let jane = new Engineer('Jane Dupont', ['navigateur', 'javascript'], 'belau');
+Employee.prototype.specialty = 'aucune';
+```
+
+Maintenant la valeur de la propriété `jane` de l'objet `specialty` est « aucune ».
+
+Une autre façon d'hériter est d'utiliser les méthodes [`call()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Function/call) / [`apply()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Function/apply). Les méthodes ci-dessous sont équivalentes :
+
+```js
+function Engineer(name, projs, mach) {
+  this.base = WorkerBee;
+  this.base(name, 'ingénierie', projs);
+  this.machine = mach || '';
+}
+```
+
+```js
+function Engineer(name, projs, mach) {
+  WorkerBee.call(this, name, 'ingénierie', projs);
+  this.machine = mach || '';
+}
+```
+
+L'utilisation de la méthode JavaScript `call()` rend une implémentation plus propre car `base` n'est plus nécessaire.
+
+## L'héritage des propriétés, revisité
+
+Les sections précédentes ont décrit comment les constructeurs et prototypes JavaScript fournissent des hiérarchies et de l'héritage. Cette section aborde certaines subtilités qui n'étaient pas nécessairement apparentes dans les discussions précédentes.
+
+### Valeurs locales et valeurs héritées
+
+Lorsque vous accédez à une propriété d'objet, JavaScript effectue les étapes suivantes, comme décrit précédemment dans ce chapitre :
+
+1.  Vérifiez si la valeur existe localement. Si c'est le cas, elle est retournée.
+2.  S'il n'y a pas de valeur locale, vérifiez la chaîne de prototypes (en utilisant la propriété `__proto__`).
+3.  Si un objet de la chaîne de prototypes possède une valeur pour la propriété spécifiée, renvoyer cette valeur.
+4.  Si aucune propriété de ce type n'est trouvée, l'objet ne possède pas cette propriété.
+
+Le résultat de ces étapes dépend de la façon dont vous définissez les choses en cours de route. L'exemple original avait ces définitions :
+
+```js
+function Employee() {
+  this.name = '';
+  this.dept = 'général';
+}
+
+function WorkerBee() {
+  this.projects = [];
+}
+WorkerBee.prototype = new Employee;
+```
+
+Avec ces définitions, supposons que vous créez `amy` comme une instance de `WorkerBee` avec l'instruction suivante :
+
+```js
+let amy = new WorkerBee;
+```
+
+L'objet `amy` possède une propriété locale, `projects`. Les valeurs des propriétés `name` et `dept` ne sont pas locales à `amy` et héritent donc dans la propriété `amy` de l'objet `__proto__`. Ainsi, `amy` possède ces valeurs de propriétés :
+
+```js
+amy.name == '';
+amy.dept == 'général';
+amy.projects == [];
+```
+
+Supposons maintenant que vous modifiez la valeur de la propriété `name` dans le prototype associé à `Employee` :
+
+```js
+Employee.prototype.name = 'Inconnu·e';
+```
+
+À première vue, on pourrait s'attendre à ce que cette nouvelle valeur se propage vers le bas à toutes les instances de `Employee`. Cependant, ce n'est pas le cas.
+
+Lorsque vous créez _n'importe quelle_ instance de l'objet `Employee`, cette instance obtient une **valeur locale** pour la propriété `name` (la chaîne de caractères vide). Cela signifie que lorsque vous définissez le prototype de `WorkerBee` en créant un nouvel objet `Employee`, `WorkerBee.prototype` a une valeur locale pour la propriété `name`. Par conséquent, lorsque JavaScript recherche la propriété `name` de l'objet `amy` (une instance de `WorkerBee`), JavaScript trouve la valeur locale de cette propriété dans `WorkerBee.prototype`. Il ne cherche donc pas plus haut dans la chaîne jusqu'à `Employee.prototype`.
+
+Si vous souhaitez modifier la valeur d'une propriété d'un objet au moment de l'exécution et que la nouvelle valeur soit héritée par tous les descendants de l'objet, vous ne pouvez pas définir la propriété dans la fonction du constructeur de l'objet. Vous devez plutôt l'ajouter au prototype associé au constructeur. Par exemple, supposons que vous remplaciez le code précédent par le suivant :
+
+```js
+function Employee() {
+  this.dept = 'général'; // Notez que this.name (une variable locale) n'apparaît pas ici
+}
+Employee.prototype.name = ''; // Un seul exemplaire
+
+function WorkerBee() {
+  this.projects = [];
+}
+WorkerBee.prototype = new Employee;
+
+let amy = new WorkerBee;
+
+Employee.prototype.name = 'Inconnu·e';
+```
+
+Dans ce cas, la propriété `name` de `amy` devient « Inconnu·e ».
+
+Comme le montrent ces exemples, si vous souhaitez définir des valeurs par défaut pour les propriétés d'un objet et que vous voulez pouvoir modifier ces valeurs au moment de l'exécution, vous devez définir les propriétés dans le prototype du constructeur, et non dans la fonction du constructeur elle-même.
+
+### Déterminer les relations entre les instances
+
+La recherche de propriétés en JavaScript s'effectue dans les propriétés propres d'un objet et, si le nom de la propriété n'est pas trouvé, elle s'effectue dans la propriété spéciale de l'objet `__proto__`. Cette opération se poursuit de manière récursive ; le processus est appelé « recherche dans la chaîne des prototypes ».
+
+La propriété spéciale `__proto__` est définie lorsqu'un objet est construit ; elle prend la valeur de la propriété `prototype` du constructeur. Ainsi, l'expression `new Riri()` crée un objet avec `__proto__ == Riri.prototype`. Par conséquent, les modifications apportées aux propriétés de `Riri.prototype` modifient la recherche de propriétés pour tous les objets qui ont été créés par `new Riri()`.
+
+Chaque objet a une propriété `__proto__` (sauf `Object`) ; chaque fonction a une propriété `prototype`. Les objets peuvent donc être liés par « héritage de prototype » à d'autres objets. Vous pouvez tester l'héritage en comparant le `__proto__` d'un objet avec l'objet `prototype` d'une fonction. JavaScript fournit un raccourci : l'opérateur `instanceof` teste un objet par rapport à une fonction et renvoie vrai si l'objet hérite du prototype de la fonction. Par exemple,
+
+```js
+let f = new Riri();
+let isTrue = (f instanceof Riri);
+```
+
+Pour un exemple plus détaillé, supposons que vous ayez le même ensemble de définitions que celui présenté dans [Héritage des propriétés](#inheriting_properties). Créez un objet `Engineer` comme suit :
+
+```js
+let chris = new Engineer('Chris Anthème', ['jsd'], 'fiji');
+```
+
+Avec cet objet, les affirmations suivantes sont toutes vraies :
+
+```js
+chris.__proto__ == Engineer.prototype;
+chris.__proto__.__proto__ == WorkerBee.prototype;
+chris.__proto__.__proto__.__proto__ == Employee.prototype;
+chris.__proto__.__proto__.__proto__.__proto__ == Object.prototype;
+chris.__proto__.__proto__.__proto__.__proto__.__proto__ == null;
+```
+
+Compte tenu de cela, vous pourriez écrire une fonction `instanceOf` comme suit :
+
+```js
+function instanceOf(object, constructor) {
+   object = object.__proto__;
+   while (object != null) {
+      if (object == constructor.prototype)
+         return true;
+      if (typeof object == 'xml') {
+        return constructor.prototype == XML.prototype;
+      }
+      object = object.__proto__;
+   }
+   return false;
+}
+```
+
+> **Note :** L'implémentation ci-dessus vérifie le type de l'objet par rapport à « xml » afin de contourner une bizarrerie de la façon dont les objets XML sont représentés dans les versions récentes de JavaScript. Voir [bug 634150](https://bugzilla.mozilla.org/show_bug.cgi?id=634150) si vous voulez connaître les détails.
+
+En utilisant la fonction `instanceOf` définie ci-dessus, ces expressions sont vraies :
+
+```js
+instanceOf(chris, Engineer)
+instanceOf(chris, WorkerBee)
+instanceOf(chris, Employee)
+instanceOf(chris, Object)
+```
+
+Mais l'expression suivante est fausse :
+
+```js
+instanceOf(chris, SalesPerson)
+```
+
+### Les informations globales dans les constructeurs
+
+Lorsque vous créez des constructeurs, vous devez faire attention si vous définissez des informations globales dans le constructeur. Par exemple, supposons que vous souhaitez qu'un identifiant unique soit automatiquement attribué à chaque nouvel employé. Vous pourriez utiliser la définition suivante pour `Employee` :
+
+```js
+let idCounter = 1; // On définit un compteur d'identifiant
+
+function Employee(name, dept) {
+  this.name = name || '';
+  this.dept = dept || 'général';
+  this.id = idCounter++; // On assigne la valeur et on incrémente le compteur
+}
+```
+
+Avec cette définition, lorsque vous créez un nouvel `Employee`, le constructeur lui attribue l'ID suivant dans la séquence, puis incrémente le compteur d'ID global. Ainsi, si votre déclaration est la suivante, `victoria.id` vaut 1 et `harry.id` vaut 2 :
+
+```js
+let victoria = new Employee('Victoria Lamar', 'pubs');
+let harry = new Employee('Harry Stocrate', 'ventes');
+```
+
+À première vue, cela semble correct. Cependant, `idCounter` est incrémenté à chaque fois qu'un objet `Employee` est créé, pour quelque raison que ce soit. Si vous créez toute la hiérarchie `Employee` présentée dans ce chapitre, le constructeur `Employee` est appelé chaque fois que vous mettez en place un prototype. Supposons que vous ayez le code suivant :
+
+```js
+let idCounter = 1;
+
+function Employee(name, dept) {
+  this.name = name || '';
+  this.dept = dept || 'général';
+  this.id = idCounter++;
+}
+
+function Manager(name, dept, reports) {...}
+Manager.prototype = new Employee;
+
+function WorkerBee(name, dept, projs) {...}
+WorkerBee.prototype = new Employee;
+
+function Engineer(name, projs, mach) {...}
+Engineer.prototype = new WorkerBee;
+
+function SalesPerson(name, projs, quota) {...}
+SalesPerson.prototype = new WorkerBee;
+
+let mac = new Engineer('Mac Fly');
+```
+
+Supposons en outre que les définitions omises ici possèdent la propriété `base` et appellent le constructeur situé au-dessus d'elles dans la chaîne des prototypes. Dans ce cas, au moment où l'objet `mac` est créé, `mac.id` est 5.
+
+Selon l'application, il peut être important ou non que le compteur ait été incrémenté ces fois supplémentaires. Si vous vous souciez de la valeur exacte de ce compteur, une solution possible consiste à utiliser plutôt le constructeur suivant :
+
+```js
+function Employee(name, dept) {
+  this.name = name || '';
+  this.dept = dept || 'general';
+  // Ceci est une écriture raccourcie de l'opérateur if
+  // Si « name » est défini, alors on assigne et on incrémente
+  if (name) {
+    this.id = idCounter++;
+  }
+}
+```
+
+Lorsque vous créez une instance de `Employee` pour l'utiliser comme prototype, vous ne fournissez pas d'arguments au constructeur. En utilisant cette définition du constructeur, lorsque vous ne fournissez pas d'arguments, le constructeur n'attribue pas de valeur à l'id et ne met pas à jour le compteur. Par conséquent, pour qu'un `Employee` obtienne un id, vous devez spécifier un nom pour l'employé. Dans cet exemple, `mac.id` serait 1.
+
+Vous pouvez également créer une copie de l'objet prototype de l'employé pour l'affecter à WorkerBee :
+
+```js
+WorkerBee.prototype = Object.create(Employee.prototype);
+// au lieu de WorkerBee.prototype = new Employee
+```
+
+### Pas d'héritage multiple
+
+Certains langages orientés objets permettent l'héritage multiple. C'est-à-dire qu'un objet peut hériter des propriétés et des valeurs d'objets parents non apparentés. JavaScript ne prend pas en charge l'héritage multiple.
+
+L'héritage des valeurs des propriétés se produit au moment de l'exécution, lorsque JavaScript recherche une valeur dans la chaîne de prototypes d'un objet. Comme un objet n'a qu'un seul prototype associé, JavaScript ne peut pas hériter dynamiquement de plus d'une chaîne de prototypes.
+
+En JavaScript, vous pouvez faire en sorte qu'une fonction de construction appelle plusieurs autres fonctions de construction en son sein. Cela donne l'illusion d'un héritage multiple. Par exemple, considérez les déclarations suivantes :
+
+```js
+function Hobbyist(hobby) {
+  this.hobby = hobby || 'plongée';
+}
+
+function Engineer(name, projs, mach, hobby) {
+  this.base1 = WorkerBee;
+  this.base1(name, 'ingénierie', projs);
+  this.base2 = Hobbyist;
+  this.base2(hobby);
+  this.machine = mach || '';
+}
+Engineer.prototype = new WorkerBee;
+
+let dennis = new Engineer('Dennis Ah', ['collaborateur'], 'hugo');
+```
+
+Supposons en outre que la définition de `WorkerBee` soit celle utilisée précédemment dans ce chapitre. Dans ce cas, l'objet `dennis` possède ces propriétés :
+
+```js
+dennis.name == 'Dennis Ah';
+dennis.dept == 'ingénierie';
+dennis.projects == ['collaborateur'];
+dennis.machine == 'hugo';
+dennis.hobby == 'plongée';
+```
+
+Donc `dennis` obtient bien la propriété `hobby` du constructeur `Hobbyist`. Cependant, supposons que vous ajoutez ensuite une propriété au prototype du constructeur `Hobbyist` :
+
+```js
+Hobbyist.prototype.equipment = ['masque', 'palmes', 'régulateur', 'bcd'];
+```
+
+L'objet `dennis` n'héritera pas de cette nouvelle propriété.
+
+{{PreviousNext("Web/JavaScript/Guide/Working_with_Objects", "Web/JavaScript/Guide/Using_promises")}}
diff --git a/files/fr/web/javascript/guide/expressions_and_operators/index.html b/files/fr/web/javascript/guide/expressions_and_operators/index.html
deleted file mode 100644
index d9837ef8e4..0000000000
--- a/files/fr/web/javascript/guide/expressions_and_operators/index.html
+++ /dev/null
@@ -1,935 +0,0 @@
----
-title: Expressions et opérateurs
-slug: Web/JavaScript/Guide/Expressions_and_Operators
-tags:
-  - Débutant
-  - Expressions
-  - Guide
-  - JavaScript
-  - Operators
-translation_of: Web/JavaScript/Guide/Expressions_and_Operators
-original_slug: Web/JavaScript/Guide/Expressions_et_Opérateurs
----
-<p>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Fonctions", "Web/JavaScript/Guide/Nombres_et_dates")}}</p>
-
-<p>Ce chapitre décrit les expressions et les opérateurs en JavaScript, il inclut des notions sur les opérateurs d'affectation, de comparaison, les opérateurs arithmétiques, binaires, logiques, ceux qui s'appliquent sur les chaînes de caractères ainsi que les opérateurs spéciaux.</p>
-
-<p>Une liste complète et détaillée des opérateurs JavaScript est disponible dans <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs">la référence JavaScript</a>.</p>
-
-<h2 id="Opérateurs">Opérateurs</h2>
-
-<p>JavaScript possède différents types d'opérateurs. Cette section décrit les opérateurs et certaines informations sur les priorités entre opérateurs.</p>
-
-<ul>
- <li><a href="/fr/docs/Web/JavaScript/Guide/Expressions_et_Opérateurs#Opérateurs_d'affectation">Les opérateurs d'affectation</a></li>
- <li><a href="/fr/docs/Web/JavaScript/Guide/Expressions_et_Opérateurs#Opérateurs_de_comparaison">Les opérateurs de comparaison</a></li>
- <li><a href="/fr/docs/Web/JavaScript/Guide/Expressions_et_Opérateurs#Opérateurs_arithmétiques">Les opérateurs arithmétiques</a></li>
- <li><a href="/fr/docs/Web/JavaScript/Guide/Expressions_et_Opérateurs#Opérateurs_binaires">Les opérateurs binaires</a></li>
- <li><a href="/fr/docs/Web/JavaScript/Guide/Expressions_et_Opérateurs#Opérateurs_logiques">Les opérateurs logiques</a></li>
- <li><a href="/fr/docs/Web/JavaScript/Guide/Expressions_et_Opérateurs#Opérateurs_de_chaînes_de_caractères">Les opérateurs de chaînes</a></li>
- <li><a href="/fr/docs/Web/JavaScript/Guide/Expressions_et_Opérateurs#Opérateur_conditionnel_ternaire">L'opérateur (ternaire) conditionnel</a></li>
- <li><a href="/fr/docs/Web/JavaScript/Guide/Expressions_et_Opérateurs#La_virgule_comme_opérateur">L'opérateur virgule</a></li>
- <li><a href="/fr/docs/Web/JavaScript/Guide/Expressions_et_Opérateurs#Opérateurs_unaires">Les opérateurs unaires</a></li>
- <li><a href="/fr/docs/Web/JavaScript/Guide/Expressions_et_Opérateurs#Opérateurs_relationnels">Les opérateurs relationnels</a></li>
-</ul>
-
-<p>JavaScript utilise des opérateurs <em>binaires</em> et <em>unaires</em>, ainsi qu'un opérateur ternaire spécial (l'opérateur conditionnel). Un opérateur binaire utilise deux opérandes, un précédant l'opérateur et un lui succédant :</p>
-
-<pre class="syntaxbox"><em>opérande1</em> <em>opérateur</em> <em>opérande2</em>
-</pre>
-
-<p>Par exemple : « <code>3+4</code> » ou « <code>x*y</code> ».</p>
-
-<p>Un opérateur unaire ne nécessite qu'un opérande, avant ou après l'opérateur :</p>
-
-<pre class="syntaxbox"><em>opérateur</em> <em>opérand</em>e</pre>
-
-<p>ou</p>
-
-<pre class="syntaxbox"><em>opérande</em> <em>opérateur</em></pre>
-
-<p>Comme « <code>x++</code> » ou « <code>++x</code> ».</p>
-
-<h3 id="Opérateurs_daffectation">Opérateurs d'affectation</h3>
-
-<p>Un <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_d_affectation">opérateur d'affectation</a> assigne une valeur à son opérande gauche, valeur basée sur celle de l'opérande droit. L'opérateur d'affectation simple est le signe égal (=), il assigne la valeur de l'opérande droit à l'opérande gauche. Autrement dit, avec « x = y » on affecte la valeur y à x.</p>
-
-<p>D'autres opérateurs d'affectation sont des raccourcis correspondant à certaines opérations composées, ils sont énumérés dans le tableau qui suit :</p>
-
-<table class="standard-table">
- <caption>Opérateurs d'affectation</caption>
- <thead>
-  <tr>
-   <th scope="col">Nom</th>
-   <th scope="col">Opérateur composé</th>
-   <th scope="col">Signification</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_d_affectation#Affectation">Affectation</a></td>
-   <td><code>x = y</code></td>
-   <td><code>x = y</code></td>
-  </tr>
-  <tr>
-   <td><a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_d_affectation#Affectation_apr%C3%A8s_addition">Affectation après addition</a></td>
-   <td><code>x += y</code></td>
-   <td><code>x = x + y</code></td>
-  </tr>
-  <tr>
-   <td><a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_d_affectation#Affectation_apr%C3%A8s_soustraction">Affectation après soustraction</a></td>
-   <td><code>x -= y</code></td>
-   <td><code>x = x - y</code></td>
-  </tr>
-  <tr>
-   <td><a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_d_affectation#Affectation_apr%C3%A8s_multiplication">Affectation après multiplication</a></td>
-   <td><code>x *= y</code></td>
-   <td><code>x = x * y</code></td>
-  </tr>
-  <tr>
-   <td><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_d_affectation#Affectation_après_division">Affectation après division</a></td>
-   <td><code>x /= y</code></td>
-   <td><code>x = x / y</code></td>
-  </tr>
-  <tr>
-   <td><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_d_affectation#Affectation_du_reste">Affectation du reste</a></td>
-   <td><code>x %= y</code></td>
-   <td><code>x = x % y</code></td>
-  </tr>
-  <tr>
-   <td><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_d_affectation#Affectation_après_exponentiation">Affectation après exponentiation</a>{{experimental_inline}}</td>
-   <td><code>x **=y</code></td>
-   <td><code>x = x ** y</code></td>
-  </tr>
-  <tr>
-   <td><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_d_affectation#Affectation_après_décalage_à_gauche">Affectation après décalage à gauche</a></td>
-   <td><code>x &lt;&lt;= y</code></td>
-   <td><code>x = x &lt;&lt; y</code></td>
-  </tr>
-  <tr>
-   <td><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_d_affectation#Affectation_après_décalage_à_droite">Affectation après décalage à droite</a></td>
-   <td><code>x &gt;&gt;= y</code></td>
-   <td><code>x = x &gt;&gt; y</code></td>
-  </tr>
-  <tr>
-   <td><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_d_affectation#Affectation_après_décalage_à_droite_non-signé">Affectation après décalage à droite non signé</a></td>
-   <td><code>x &gt;&gt;&gt;= y</code></td>
-   <td><code>x = x &gt;&gt;&gt; y</code></td>
-  </tr>
-  <tr>
-   <td><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_d_affectation#Affectation_après_ET_binaire">Affectation après ET binaire</a></td>
-   <td><code>x &amp;= y</code></td>
-   <td><code>x = x &amp; y</code></td>
-  </tr>
-  <tr>
-   <td><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_d_affectation#Affectation_après_OU_exclusif_(XOR)_binaire">Affectation après OU exclusif binaire</a></td>
-   <td><code>x ^= y</code></td>
-   <td><code>x = x ^ y</code></td>
-  </tr>
-  <tr>
-   <td><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_d_affectation#Affectation_après_OU_binaire">Affectation après OU binaire</a></td>
-   <td><code>x |= y</code></td>
-   <td><code>x = x | y</code></td>
-  </tr>
- </tbody>
-</table>
-
-<h4 id="Décomposition">Décomposition</h4>
-
-<p>Lors d'affectations plus complexes, on peut utiliser <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Affecter_par_décomposition">l'affectation par décomposition</a>. C'est une expression qui permet d'extraire des données depuis des tableaux ou des objets avec une syntaxe symétrique de littéraux de tableaux ou d'objets pour affecter des variables.</p>
-
-<pre class="brush: js">var toto = ["un", "deux", "trois"];
-
-// sans décomposition
-var un = toto[0];
-var deux = toto[1];
-var trois = toto[2];
-
-// avec la décomposition
-var [un, deux, trois] = toto;</pre>
-
-<h3 id="Opérateurs_de_comparaison">Opérateurs de comparaison</h3>
-
-<p>Un <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_de_comparaison">opérateur de comparaison</a> compare ses deux opérandes et renvoie un valeur booléenne correspondant au résultat de la comparaison (vraie ou fausse). Les opérandes peuvent être des nombres, des chaînes de caractères, des booléens ou des objets. Les chaînes de caractères sont comparées selon l'ordre lexicographique usuel en utilisant les valeurs Unicode. Dans la plupart des cas, si les deux opérandes ne sont pas du même type, JavaScript tentera de les convertir vers un type approprié. Cette méthode aboutira souvent à une comparaison numérique. Les seules exceptions à cette conversion implicite sont les opérateurs <code>===</code> et <code>!==</code> , qui testent des égalités et inégalités strictes. Ces opérateurs n'effectuent pas de conversion de type. Le tableau qui suit décrit les opérateurs de comparaisons relativement à ce fragment de code :</p>
-
-<pre class="brush: js">var var1 = 3;
-var var2 = 4;
-</pre>
-
-<table class="standard-table">
- <caption>Opérateurs de comparaison</caption>
- <thead>
-  <tr>
-   <th scope="col">Opérateur</th>
-   <th scope="col">Description</th>
-   <th scope="col">Exemples qui renvoient <code>true</code></th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_de_comparaison#.C3.89galit.C3.A9_simple_(.3D.3D)">Égalité</a> (<code>==</code>)</td>
-   <td>Renvoie <code>true</code> si les opérandes sont égaux après conversion en valeurs de mêmes types.</td>
-   <td><code>3 == var1</code>
-    <p><code>"3" == var1</code></p>
-    <code>3 == '3'</code></td>
-  </tr>
-  <tr>
-   <td><a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_de_comparaison#In.C3.A9galit.C3.A9_simple_(!.3D)">Inégalité</a> (<code>!=</code>)</td>
-   <td>Renvoie <code>true</code> si les opérandes sont différents.</td>
-   <td><code>var1 != 4<br>
-    var2 != "3"</code></td>
-  </tr>
-  <tr>
-   <td><a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_de_comparaison#.C3.89galit.C3.A9_stricte_(.3D.3D.3D)">Égalité stricte </a>(<code>===</code>)</td>
-   <td>Renvoie <code>true</code> si les opérandes sont égaux et de même type. Voir {{jsxref("Object.is","Object.is()")}} et <a href="/fr/docs/JavaScript/Guide/%C3%89galit%C3%A9_en_JavaScript">égalité de type en JavaScript</a>.</td>
-   <td><code>3 === var1</code></td>
-  </tr>
-  <tr>
-   <td><a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_de_comparaison#In.C3.A9galit.C3.A9_stricte_(!.3D.3D)">Inégalité stricte</a> (<code>!==</code>)</td>
-   <td>Renvoie <code>true</code> si les opérandes ne sont pas égaux ou s'ils ne sont pas de même type.</td>
-   <td><code>var1 !== "3"<br>
-    3 !== '3'</code></td>
-  </tr>
-  <tr>
-   <td><a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_de_comparaison#Sup.C3.A9rieur_strict_(%3E)">Supériorité stricte</a> (<code>&gt;</code>)</td>
-   <td>Renvoie <code>true</code> si l'opérande gauche est supérieur (strictement) à l'opérande droit.</td>
-   <td><code>var2 &gt; var1<br>
-    "12" &gt; 2</code></td>
-  </tr>
-  <tr>
-   <td><a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_de_comparaison#Sup.C3.A9rieur_ou_.C3.A9gal_(%3E.3D)">Supériorité ou égalité</a> (<code>&gt;=</code>)</td>
-   <td>Renvoie <code>true</code> si l'opérande gauche est supérieur ou égal à l'opérande droit.</td>
-   <td><code>var2 &gt;= var1<br>
-    var1 &gt;= 3</code></td>
-  </tr>
-  <tr>
-   <td><a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_de_comparaison#Inf.C3.A9rieur_strict_(%3C)">Infériorité stricte</a> (<code>&lt;</code>)</td>
-   <td>Renvoie <code>true</code> si l'opérande gauche est inférieur (strictement) à l'opérande droit.</td>
-   <td><code>var1 &lt; var2<br>
-    "2" &lt; "12"</code></td>
-  </tr>
-  <tr>
-   <td><a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_de_comparaison#Inf.C3.A9rieur_ou_.C3.A9gal_(%3C.3D)">Infériorité ou égalité</a> (<code>&lt;=</code>)</td>
-   <td>Renvoie <code>true</code> si l'opérande gauche est inférieur ou égal à l'opérande droit.</td>
-   <td><code>var1 &lt;= var2<br>
-    var2 &lt;= 5</code></td>
-  </tr>
- </tbody>
-</table>
-
-<div class="note">
-<p><strong>Note :</strong> <code>=&gt;</code> n'est pas un opérateur. Il s'agit de la notation utilisée pour <a href="/fr/docs/Web/JavaScript/Reference/Fonctions/Fonctions_fl%C3%A9ch%C3%A9es">les fonctions fléchées</a>.</p>
-</div>
-
-<h3 id="Opérateurs_arithmétiques">Opérateurs arithmétiques</h3>
-
-<p>Les <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_arithmétiques">opérateurs arithmétiques</a> ont pour opérandes des valeurs numériques (des littéraux ou des variables) et renvoient une valeur numérique. Les opérateurs arithmétiques standards sont l'addition (+), la soustraction (-), la multiplication (*), et la division (/). Ces opérateurs fonctionnent comme pour la plupart des langages de programmation lorsqu'ils sont utilisés avec des nombres décimaux (on notera que la division par zéro a pour résultat {{jsxref("Infinity")}}). Ainsi :</p>
-
-<pre class="brush: js">1 / 2; // 0.5
-1 / 2 == 1.0 / 2.0; // true
-</pre>
-
-<p>En plus des opérations arithmétiques standards (+,-,*,/), JavaScript fournit également d'autres opérateurs arithmétiques, listés dans le tableau qui suit :</p>
-
-<table class="fullwidth-table">
- <caption>Opérateurs arithmétiques</caption>
- <thead>
-  <tr>
-   <th scope="col">Opérateur</th>
-   <th scope="col">Description</th>
-   <th scope="col">Exemple</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_arithm%C3%A9tiques#Reste_(.25)">Reste</a> (<code>%</code>)<br>
-     </td>
-   <td>Opérateur binaire. Renvoie le reste entier de la division entre les deux opérandes.</td>
-   <td>12 % 5 renvoie 2.</td>
-  </tr>
-  <tr>
-   <td><a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_arithm%C3%A9tiques#Incr.C3.A9ment_(.2B.2B)">Incrément</a> (<code>++</code>)</td>
-   <td>Opérateur unaire. Ajoute un à son opérande. S'il est utilisé en préfixe (<code>++x</code>), il renvoie la valeur de l'opérande après avoir ajouté un, s'il est utilisé comme opérateur de suffixe (<code>x++</code>), il renvoie la valeur de l'opérande avant d'ajouter un.</td>
-   <td>Si <code>x</code> vaut 3, <code>++x</code> incrémente <code>x</code> à 4 et renvoie 4, <code>x++</code> renvoie 3 et seulement ensuite ajoute un à <code>x</code>.</td>
-  </tr>
-  <tr>
-   <td><a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_arithm%C3%A9tiques#D.C3.A9cr.C3.A9ment_(--)">Décrément</a> (<code>--</code>)</td>
-   <td>Opérateur unaire. Il soustrait un à son opérande. Il fonctionne de manière analogue à l'opérateur d'incrément.</td>
-   <td>Si <code>x</code> vaut 3, <code>--x</code> décrémente <code>x</code> à 2 puis renvoie2, <code>x--</code> renvoie 3 puis décrémente la valeur de <code>x</code>.</td>
-  </tr>
-  <tr>
-   <td><a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_arithm%C3%A9tiques#N.C3.A9gation_unaire_(-)">Négation unaire</a> (<code>-</code>)</td>
-   <td>Opérateur unaire. Renvoie la valeur opposée de l'opérande.</td>
-   <td>Si <code>x</code> vaut 3, alors <code>-x</code> renvoie -3.</td>
-  </tr>
-  <tr>
-   <td><a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_arithm%C3%A9tiques#Plus_unaire_(.2B)">Plus unaire </a>(<code>+</code>)</td>
-   <td>Opérateur unaire. Si l'opérande n'est pas un nombre, il tente de le convertir en une valeur numérique.</td>
-   <td>
-    <p><code>+"3"</code> renvoie <code>3</code>.</p>
-
-    <p><code>+true</code> renvoie <code>1</code>.</p>
-   </td>
-  </tr>
-  <tr>
-   <td><a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_arithm%C3%A9tiques#Exponentiation">Opérateur d'exponentiation</a> (**) (puissance) {{experimental_inline}}</td>
-   <td>Calcule un nombre (base) élevé à une puissance donnée (soit <code>base^puissance</code>)</td>
-   <td>
-    <p><code>2 ** 3</code> renvoie <code>8</code></p>
-
-    <p><code>10 ** -1</code> renvoie <code>0.1</code></p>
-   </td>
-  </tr>
- </tbody>
-</table>
-
-<h3 id="Opérateurs_binaires">Opérateurs binaires</h3>
-
-<p>Les <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_binaires">opérateurs binaires</a> voient leurs opérandes comme des ensembles de 32 bits (des zéros et des uns), et non pas comme des nombres décimaux, octaux ou hexadécimaux. Ainsi, le nombre décimal neuf aura une représentation binaire de 1001. Les opérateurs binaires effectuent des opérations sur des représentations binaires mais renvoies des valeurs numériques JavaScript standards.</p>
-
-<p>Le tableau qui suit résume les opérateurs binaires JavaScript :</p>
-
-<table class="standard-table">
- <caption>Opérateurs binaires</caption>
- <thead>
-  <tr>
-   <th scope="col">Opérateur</th>
-   <th scope="col">Utilisation</th>
-   <th scope="col">Description</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_binaires#&amp;_.28ET_binaire.29">AND (ET) binaire</a></td>
-   <td><code>a &amp; b</code></td>
-   <td>Renvoie un 1 à chaque position binaire pour laquelle les bits des deux opérandes sont à 1.</td>
-  </tr>
-  <tr>
-   <td><a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_binaires#|_.28OU_binaire.29">OR (OU) binaire</a></td>
-   <td><code>a | b</code></td>
-   <td>Renvoie un zéro à chaque position binaire pour laquelle les bits des deux opérandes sont à 0.</td>
-  </tr>
-  <tr>
-   <td><a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_binaires#.5E_.28XOR_binaire.29">XOR (OU exclusif) binaire</a></td>
-   <td><code>a ^ b</code></td>
-   <td>Renvoie un zéro à chaque position binaire pour laquelle les bits sont les mêmes (et un 1 pour chacun des bits qui est différent).</td>
-  </tr>
-  <tr>
-   <td><a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_binaires#.7E_.28NON_binaire.29">NOT (NON) binaire</a></td>
-   <td><code>~ a</code></td>
-   <td>Inverse les bits de l'opérande.</td>
-  </tr>
-  <tr>
-   <td><a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_binaires#.3C.3C_.28d.C3.A9calage_.C3.A0_gauche.29">Décalage binaire à gauche</a></td>
-   <td><code>a &lt;&lt; b</code></td>
-   <td>Décale la représentation binaire de <code>b</code> bits sur la gauche et complète avec des zéros à droite.</td>
-  </tr>
-  <tr>
-   <td><a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_binaires#.3E.3E_.28d.C3.A9calage_.C3.A0_droite_avec_propagation_du_signe.29">Décalage binaire à droite</a></td>
-   <td><code>a &gt;&gt; b</code></td>
-   <td>Décale la représentation binaire de <code>b</code> bits sur la droite en ignorant les bits perdus.</td>
-  </tr>
-  <tr>
-   <td><a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_binaires#.3E.3E.3E_.28d.C3.A9calage_.C3.A0_droite_avec_insertion_de_z.C3.A9ros.29">Décalage binaire à droite en complétant avec des zéros</a></td>
-   <td><code>a &gt;&gt;&gt; b</code></td>
-   <td>Décale la représentation binaire de <code>b</code> bits sur la droite en ignorant les bits perdus et ajoute des zéros sur la gauche.</td>
-  </tr>
- </tbody>
-</table>
-
-<h4 id="Opérateurs_binaires_logiques">Opérateurs binaires logiques</h4>
-
-<p>Les opérateurs binaires logiques fonctionnent de cette façon :</p>
-
-<ul>
- <li>Les opérandes sont convertis en entiers sur 32 bits et exprimés comme une série de bits (des 1 et des 0). Les nombres sur plus de 32 bits voient leurs bits supplémentaires supprimés :
-  <pre class="brush: js">Avant : 11100110111110100000000000000110000000000001
-Après :             10100000000000000110000000000001</pre>
- </li>
- <li>Chaque bit du premier opérande est associé avec le bit correspondant du second opérande (le premier bit du premier opérande avec le premier bit du second opérande, le second avec le second et ainsi de suite)</li>
- <li>L'opérateur est appliqué pour chaque paire de bits ainsi constituée et le résultat est reconstruit sous forme binaire.</li>
-</ul>
-
-<p>Le chiffre neuf est par exemple représenté comme 1001, et le nombre quinze comme 1111. Ainsi, quand les opérateurs binaires sont appliqués sur ces valeurs, on a les résultats qui suivent :</p>
-
-<table class="standard-table">
- <caption>Exemples utilisant les opérateurs binaires</caption>
- <thead>
-  <tr>
-   <th scope="col">Expression</th>
-   <th scope="col">Résultat</th>
-   <th scope="col">Description binaire</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><code>15 &amp; 9</code></td>
-   <td><code>9</code></td>
-   <td><code>1111 &amp; 1001 = 1001</code></td>
-  </tr>
-  <tr>
-   <td><code>15 | 9</code></td>
-   <td><code>15</code></td>
-   <td><code>1111 | 1001 = 1111</code></td>
-  </tr>
-  <tr>
-   <td><code>15 ^ 9</code></td>
-   <td><code>6</code></td>
-   <td><code>1111 ^ 1001 = 0110</code></td>
-  </tr>
-  <tr>
-   <td><code>~15</code></td>
-   <td><code>-16</code></td>
-   <td><code>~</code><code>00000000...</code><code>00001111 = </code><code>1111</code><code>1111</code><code>...</code><code>11110000</code></td>
-  </tr>
-  <tr>
-   <td><code>~9</code></td>
-   <td><code>-10</code></td>
-   <td><code>~</code><code>00000000</code><code>...</code><code>0000</code><code>1001 = </code><code>1111</code><code>1111</code><code>...</code><code>1111</code><code>0110</code></td>
-  </tr>
- </tbody>
-</table>
-
-<p>Il faut remarquer que tous les bits sont échangés lorsque l'opérateur binaire NOT est utilisé. Il est donc utile de savoir que les valeurs dont le bit le plus fort (le plus à gauche) vaut 1 sont des nombres négatifs (représentation en complément à deux). L'évaluation de <code>~x</code> aura le même résultat que l'évaluation de <code>-x - 1</code>.</p>
-
-<h4 id="Opérateurs_binaires_de_décalage">Opérateurs binaires de décalage</h4>
-
-<p>Les opérateurs binaires de décalage utilisent deux opérandes : le premier indiquant la quantité à décaler et le second indiquant de combien de bits on décale le premier opérande. La direction du décalage est spécifiée grâce à l'opérateur.</p>
-
-<p>Les opérateurs binaires de décalage convertissent leurs opérandes en entiers sur 32 bits et renvoient un résultat dont le type est le même que l'opérande gauche.</p>
-
-<p>Les opérateurs de décalage sont énumérés dans le tableau qui suit.</p>
-
-<table class="fullwidth-table">
- <caption>Opérateurs binaires de décalage</caption>
- <thead>
-  <tr>
-   <th scope="col">Opérateur</th>
-   <th scope="col">Description</th>
-   <th scope="col">Exemple</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_binaires#&lt;&lt;_(décalage_à_gauche)">Décalage à gauche (<code>&lt;&lt;</code>)</a></td>
-   <td>Cet opérateur décale le premier opérande d'un nombre de bits donné sur la gauche. Les bits en trop sont ignorés et des bits à zéro sont introduits à droite.</td>
-   <td><code>9&lt;&lt;2</code> renvoie 36, car 1001, décalé de 2 bits à gauche, devient  100100, dont la représentation en base 10 est  36.</td>
-  </tr>
-  <tr>
-   <td><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_binaires#>>_(décalage_à_droite_avec_propagation_du_signe)">Décalage à droite avec propagation du signe (<code>&gt;&gt;</code>)</a></td>
-   <td>Cet opérateur décale le premier opérande d'un nombre de bits donné sur la droite. Les bits en trop sont ignorés et des bits correspondants au bit de signe sont introduits à gauche.</td>
-   <td><code>9&gt;&gt;2</code> renvoie 2, car 1001, décalé de 2 bits à droite, devient 10 représentant 2. De même  <code>-9&gt;&gt;2</code> renvoie -3, car le signe est préservé.</td>
-  </tr>
-  <tr>
-   <td><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_binaires#>>>_(décalage_à_droite_avec_insertion_de_zéros)">Décalage à droite avec zéros (<code>&gt;&gt;&gt;</code>)</a></td>
-   <td>Cet opérateur décale le premier opérande d'un nombre de bits donné sur la droite. Les bits en trop sont ignorés et des bits à 0 sont introduits à gauche.</td>
-   <td><code>19&gt;&gt;&gt;2</code> renvoie 4, car 10011, décalé de 2 bits, devient 100 qui représente 4. Pour les nombres positifs, cet opérateur et l'opérateur précédent renvoient les mêmes résultats.</td>
-  </tr>
- </tbody>
-</table>
-
-<h3 id="Opérateurs_logiques">Opérateurs logiques</h3>
-
-<p>Les <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_logiques">opérateurs logiques</a> sont généralement utilisés avec des valeurs booléennes. Dans ce cas, il renvoient une valeur booléenne. Les opérateurs <code>&amp;&amp;</code> et <code>||</code> renvoient en fait une valeurs d'un des opérandes et si ces opérateurs sont utilisés avec des valeurs non-booléennées, ils pourront renvoyer une valeur non-booléenne. Les opérateurs logiques sont décrits dans le tableau qui suit.</p>
-
-<table class="fullwidth-table">
- <caption>Opérateurs logiques</caption>
- <thead>
-  <tr>
-   <th scope="col">Opérateur</th>
-   <th scope="col">Usage</th>
-   <th scope="col">Description</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_logiques#Logical_AND_.28&amp;&amp;.29">ET logique</a> (<code>&amp;&amp;</code>)</td>
-   <td><code>expr1 &amp;&amp; expr2</code></td>
-   <td>Renvoie <code>expr1</code> s'il peut être converti à false, sinon renvoie <code>expr2</code>. Dans le cas où on utilise des opérandes booléens, <code>&amp;&amp;</code> renvoie <code>true</code> si les deux opérandes valent <code>true</code>, <code>false</code> sinon.</td>
-  </tr>
-  <tr>
-   <td><a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_logiques#OU_logique_(.7C.7C)">OU logique</a> (<code>||</code>)</td>
-   <td><code>expr1 || expr2</code></td>
-   <td>Renvoie <code>expr1</code> s'il peut être converti à <code>true</code>, sinon renvoie <code>expr2</code>. Dans le cas où on utilise des opérandes booléens, <code>||</code> renvoie <code>true</code> si l'un des opérandes vaut <code>true</code>, si les deux valent <code>false</code>, il renvoie <code>false</code>.</td>
-  </tr>
-  <tr>
-   <td><a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_logiques#Logical_NOT_.28.21.29">NON logique </a>(<code>!</code>)</td>
-   <td><code>!expr</code></td>
-   <td>Renvoie <code>false</code> si son unique opérande peut être converti en <code>true</code>, sinon il renvoie <code>true</code>.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>Les exemples d'expressions qui peuvent être converties à <code>false</code> sont celles qui sont évaluées à <code>null</code>, 0, <code>NaN</code>, la chaîne de caractères vide (""), ou <code>undefined</code>.</p>
-
-<p>Le code qui suit montre des exemples de l'utilisation de l'opérateur logique ET (&amp;&amp;).</p>
-
-<pre class="brush: js">var a1 =   true &amp;&amp; true;     // t &amp;&amp; t renvoie true
-var a2 =   true &amp;&amp; false;    // t &amp;&amp; f renvoie false
-var a3 =  false &amp;&amp; true;     // f &amp;&amp; t renvoie false
-var a4 =  false &amp;&amp; (3 == 4); // f &amp;&amp; f renvoie false
-var a5 = "Chat" &amp;&amp; "Chien";  // t &amp;&amp; t renvoie Chien
-var a6 =  false &amp;&amp; "Chat";   // f &amp;&amp; t renvoie false
-var a7 = "Chat" &amp;&amp; false;    // t &amp;&amp; f renvoie false
-</pre>
-
-<p>Les exemples suivants montrent l'utilisation de l'opérateur logique OU (||).</p>
-
-<pre class="brush: js">var o1 =   true || true;     // t || t renvoie true
-var o2 =  false || true;     // f || t renvoie true
-var o3 =   true || false;    // t || f renvoie true
-var o4 =  false || (3 == 4); // f || f renvoie false
-var o5 = "Chat" || "Chien";  // t || t renvoie Chat
-var o6 =  false || "Chat";   // f || t renvoie Chat
-var o7 = "Chat" || false;    // t || f renvoie Chat
-</pre>
-
-<p>Les exemples suivants montrent l'utilisation de l'opérateur logique NON (!).</p>
-
-<pre class="brush: js">var n1 = !true;   // !t renvoie false
-var n2 = !false;  // !f renvoie true
-var n3 = !"Chat"; // !t renvoie false
-</pre>
-
-<h4 id="Evaluation_rapide">Evaluation rapide</h4>
-
-<p>Les expressions logiques sont évaluées de gauche à droite. Cette évaluation utilise des tests pour savoir s'il est possible d'utiliser des « raccourcis » correspondant aux règles suivantes :</p>
-
-<ul>
- <li><code>false</code> &amp;&amp; <em>n'importe quoi</em> sera évalué à <code>false</code>.</li>
- <li><code>true</code> || <em>n'importe quoi </em>sera évalué à <code>true</code>.</li>
-</ul>
-
-<p>Les règles logiques garantissent la validité de ces évaluations, il faut noter que le second opérande n'est pas du tout évalué, empêchant ainsi les effets de bords cachés, liés à cette évaluation.</p>
-
-<h3 id="Opérateurs_de_chaînes_de_caractères">Opérateurs de chaînes de caractères</h3>
-
-<p>En plus des opérateurs de comparaisons qui peuvent être utilisés sur des chaînes de caractères, il existe l'opérateur de concaténation (+) permettant de concaténer deux chaînes de caractères. Le résultat de cette opération est la fusion des deux opérandes en une même chaîne de caractères. Ainsi :</p>
-
-<pre class="brush: js">console.log("ma " + "chaîne"); // affichera "ma chaîne" dans la console</pre>
-
-<p>L'opérateur court += peut également être utilisé pour concaténer des chaînes. Par exemple :</p>
-
-<pre class="brush: js">var maChaîne = "alpha";
-maChaîne += "bet"; // l'expression sera évaluée en "alphabet"
-                   // et cette valeur sera affectée à maChaîne</pre>
-
-<h3 id="Opérateur_conditionnel_ternaire">Opérateur conditionnel ternaire</h3>
-
-<p>L'<a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_conditionnel">opérateur conditionnel</a> est le seul opérateur JavaScript qui utilise trois opérandes. L'expression utilisant l'opérateur peut prendre une valeur parmi deux selon une condition donnée. Cet opérateur s'utilise avec la syntaxe suivante :</p>
-
-<pre class="syntaxbox"><em>condition</em> ? <em>val1</em> : <em>val2</em>
-</pre>
-
-<p>Si <code>condition</code> vaut <code>true</code>, l'opérateur vaudra <code>val1</code>. Sinon il vaudra <code>val2</code>. Il est possible d'utiliser l'opérateur conditionnel aux mêmes endroits qu'un opérateur standard.</p>
-
-<p>On peut par exemple avoir :</p>
-
-<pre class="brush: js">var statut = (âge &gt;= 18) ? "adulte" : "mineur";
-</pre>
-
-<p>Cette instruction assigne la valeur "adulte" à la variable <code>status</code> si la variable <code>âge</code> est supérieure ou égale à 18. Sinon, on lui affecte la valeur "mineur".</p>
-
-<h3 id="La_virgule_comme_opérateur">La virgule comme opérateur</h3>
-
-<p>L'<a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_virgule">opérateur virgule</a> (<code>,</code>) évalue ses deux opérandes et renvoie la valeur du second opérande. Cet opérateur est principalement utilisé dans les boucles for pour permettre à plusieurs variables d'être modifiées à chaque itération de la boucle.</p>
-
-<p>Ainsi, si on a un tableau à 2 dimensions avec 10 lignes et colonnes, on peut utiliser la virgule comme opérateur pour incrémenter deux variables à la fois. Le code qui suit imprime les valeurs contenues sur la diagonale du tableau :</p>
-
-<pre class="brush: js">var x = [0,1,2,3,4,5,6,7,8,9]
-var a = [x, x, x, x, x];
-
-for (var i = 0, j = 9; i &lt;= j; i++, j--)
-  console.log("a[" + i + "][" + j + "]= " + a[i][j]);
-</pre>
-
-<h3 id="Opérateurs_unaires">Opérateurs unaires</h3>
-
-<h4 id="delete"><code>delete</code></h4>
-
-<p>L'opérateur <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_delete">delete</a> supprime un objet, une propriété d'un objet ou un élément d'un tableau à partir de sa position dans le tableau. La syntaxe de cet opérateur est la suivante :</p>
-
-<pre class="brush: js">delete monObjet;
-delete monObjet.propriété;
-delete monObjet[index];
-delete propriété; // uniquement valide au sein d'une instruction with
-</pre>
-
-<p>où on a <code>monObjet</code> qui est le nom de l'objet, <code>propriété</code> qui est une propriété existante et <code>index</code> un entier indiquant la position d'un élément dans un tableau.</p>
-
-<p>La quatrième instruction n'est valide qu'au sein d'une instruction <code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/with">with</a></code> et permet de supprimer une propriété d'un objet.</p>
-
-<p>Il est possible d'utiliser l'opérateur <code>delete</code> pour supprimer les variables déclarées implicitement mais pas celles déclarées avec <code>var</code>. Si l'opérateur fonctionne correctement, il change la propriété ou l'élément vers la valeur <code>undefined</code>. L'opérateur <code>delete</code> renvoie <code>true</code> si l'opération de suppression est possible, <code>false</code> sinon.</p>
-
-<pre class="brush: js">x = 42;
-var y = 43;
-monobj = new Number();
-monobj.h = 4;    // création de la propriété h
-delete x;        // renvoie true (suppression possible si déclaration implicite)
-delete y;        // renvoie false (suppression impossible si déclaration avec var si la variable n'est pas une propriété)
-delete Math.PI;  // renvoie false (suppression impossible pour les propriétés pré-définies)
-delete monobj.h; // renvoie true (suppression possible des propriétés définies par l'utilisateur)
-delete monobj;   // renvoie true (suppression possible si déclaration implicite)
-</pre>
-
-<h5 id="Suppression_déléments_dun_tableau">Suppression d'éléments d'un tableau</h5>
-
-<p>Lorsqu'on supprime un élément d'un tableau, la longueur du tableau n'est pas modifiée. Ainsi, si on supprime <code>a[3]</code>, <code>a[4]</code> restera <code>a[4]</code> (même position et valeur) alors que <code>a[3]</code> sera <code>undefined</code>.</p>
-
-<p>Lorsque l'opérateur <code>delete</code> supprime un élément d'un tableau, cet élément n'appartient plus au tableau. Dans l'exemple qui suit, <code>arbres[3]</code> est supprimé mais il est toujours accessible et renvoie <code>undefined</code>.</p>
-
-<pre class="brush: js">var arbres = new Array("sequoia", "laurier", "cèdre", "chêne", "érable");
-delete arbres[3];
-if (3 in arbres) {
-  // Ceci ne sera pas exécuté
-}
-</pre>
-
-<p>Pour qu'un élément continue à exister mais qu'il vaille <code>undefined</code>, on utilisera le mot-clé<code> undefined</code> plutôt que l'opérateur <code>delete</code>. Dans l'exemple qui suit, arbres<code>[3]</code> est modifié pour valoir <code>undefined</code> et l'élément du tableau continue à exister :</p>
-
-<pre class="brush: js">var arbres = new Array("sequoia", "laurier", "cèdre", "chêne", "érable");
-arbres[3] = undefined;
-if (3 in arbres) {
-  // Ceci sera exécuté
-}
-</pre>
-
-<h4 id="typeof"><code>typeof</code></h4>
-
-<p>L'<a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/L_op%C3%A9rateur_typeof">opérateur <code>typeof</code></a> peut être utilisé de deux façons distinctes :</p>
-
-<ol>
- <li>
-  <pre class="syntaxbox">typeof opérande</pre>
- </li>
- <li>
-  <pre class="syntaxbox">typeof (opérande)
-</pre>
- </li>
-</ol>
-
-<p>L'opérateur <code>typeof</code> renvoie une chaîne de caractères indiquant le type de l'opérande (qui n'est pas évalué). <code>opérande</code> correspond à la chaîne de caractère, la variable, le mot-clé ou l'objet dont on souhaite renvoyer le type. L'utilisation des parenthèses est facultative.</p>
-
-<p>Soient les définitions de variables suivantes :</p>
-
-<pre class="brush: js">var maFonction = new Function("5 + 2");
-var forme = "round";
-var taille = 1;
-var toto = ["Pomme", "Poire", "Orange"];
-var jour = new Date();
-</pre>
-
-<p>L'opérateur <code>typeof</code> renverra les résultats suivants :</p>
-
-<pre class="brush: js">typeof maFonction; // renvoie "function"
-typeof forme;      // renvoie "string"
-typeof taille;     // renvoie "number"
-typeof toto;       // renvoie "object"
-typeof jour;       // renvoie "object"
-typeof inexistant; // renvoie "undefined"
-</pre>
-
-<p>En ce qui concerne les mots-clés <code>true</code> et <code>null</code>, l'opérateur <code>typeof</code> renvoie les résultats suivants :</p>
-
-<pre class="brush: js">typeof true; // renvoie "boolean"
-typeof null; // renvoie "object"
-</pre>
-
-<p>Pour une chaîne de caractères ou un nombre, <code>typeof</code> renvoie les résultats suivants :</p>
-
-<pre class="brush: js">typeof 62;            // renvoie "number"
-typeof 'Hello world'; // renvoie "string"
-</pre>
-
-<p>L'opérateur <code>typeof</code>, lorsqu'il est utilisé avec des propriétés, renvoie le type de valeur contenue dans la propriété :</p>
-
-<pre class="brush: js">typeof document.lastModified; // renvoie "string"
-typeof window.length;         // renvoie "number"
-typeof Math.LN2;              // renvoie "number"
-</pre>
-
-<p>Pour les méthodes et les fonctions, l'opérateur <code>typeof</code> renvoie les résultats suivants :</p>
-
-<pre class="brush: js">typeof blur;        // renvoie "function"
-typeof eval;        // renvoie "function"
-typeof parseInt;    // renvoie "function"
-typeof shape.split; // renvoie "function"
-</pre>
-
-<p>Pour les objets pré-définis, l'opérateur <code>typeof</code> fonctionne ainsi :</p>
-
-<pre class="brush: js">typeof Date;     // renvoie "function"
-typeof Function; // renvoie "function"
-typeof Math;     // renvoie "object"
-typeof Option;   // renvoie "function"
-typeof String;   // renvoie "function"
-</pre>
-
-<h4 id="void"><code>void</code></h4>
-
-<p>L'<a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_void">opérateur <code>void</code></a> peut être utilisé de deux façons :</p>
-
-<ol>
- <li>
-  <pre class="syntaxbox">void (expression)
-</pre>
- </li>
- <li>
-  <pre class="syntaxbox">void expression
-</pre>
- </li>
-</ol>
-
-<p>L'opérateur <code>void</code> indique qu'une expression doit être évaluée sans retourner de valeur. <code>expression</code> étant une expression JavaScript à évaluer. Les parenthèses sont facultatives mais les utiliser permet d'avoir une meilleur lisibilité du code.</p>
-
-<p>L'opérateur <code>void</code> peut être utilisé pour spécifier une expression comme un lien hypertexte, l'expression est évaluée mais n'est pas chargée à la place du document actuel.</p>
-
-<p>Le fragment de code  qui suit crée un lien hypertexte qui ne fait rien lorsque l'utilisateur clique dessus. Lorsqu'on clique sur le lien, <code>void(0)</code> est évalué à <code>undefined</code>, n'ayant aucun effet.</p>
-
-<pre class="brush: html">&lt;A HREF="javascript:void(0)"&gt;Cliquer ici pour ne rien faire&lt;/A&gt;
-</pre>
-
-<p>Le code suivant crée un lien hypertexte qui envoie un formulaire lorsque l'utilisateur clique dessus.</p>
-
-<pre class="brush: html">&lt;A HREF="javascript:void(document.form.submit())"&gt;
-Cliquer ici pour envoyer&lt;/A&gt;</pre>
-
-<h3 id="Opérateurs_relationnels">Opérateurs relationnels</h3>
-
-<p>Un opérateur relationnel compare ses opérandes et renvoie une valeur booléenne selon que le résultat de la comparaison est vrai ou faux.</p>
-
-<h4 id="in"><code>in</code></h4>
-
-<p>L'<a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/L_op%C3%A9rateur_in">opérateur <code>in</code></a> renvoie <code>true</code> si la propriété indiquée fait partie de l'objet donné. Cet opérateur s'utilise avec la syntaxe suivante :</p>
-
-<pre class="syntaxbox">nomOuNumeroPropriete in monObjet
-</pre>
-
-<p>avec <code>nomOuNumeroPropriete</code> qui est une chaîne de caractères, une expression numérique ou un symbole correspondant au nom d'une propriété ou un indice de tableau, <code>monObjet</code> est le nom d'un objet.</p>
-
-<p>Les exemples qui suivent utilisent cet opérateur <code>in</code>.</p>
-
-<pre class="brush: js">// Tableaux
-var arbres = new Array("sequoia", "laurier", "cèdre", "chêne", "érable");
-0 in arbres;         // renvoie true
-3 in arbres;         // renvoie true
-6 in arbres;         // renvoie false
-"laurier" in arbres; // renvoie false (l'opérateur se base sur l'indice et pas
-                     // sur la valeur)
-"length" in arbres;  // renvoie true (length est une propriété d'un objet Array)
-
-// Objets pré-définis
-"PI" in Math;         // renvoie true
-var myString = new String("coral");
-"length" in myString; // renvoie true
-
-// Objets définis par l'utilisateur
-var maVoiture = {fabricant: "Honda", modèle: "Accord", year: 1998};
-"fabricant" in maVoiture; // renvoie true
-"modèle" in maVoiture;    // renvoie true
-</pre>
-
-<h4 id="instanceof"><code>instanceof</code></h4>
-
-<p>L'<a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/instanceof">opérateur instanceof</a> renvoie <code>true</code> si l'objet donné est du type spécifié. Cet opérateur s'utilise avec la syntaxe suivante :</p>
-
-<pre class="syntaxbox">nomObjet instanceof typeObjet
-</pre>
-
-<p>avec <code>nomObjet</code> qui est le nom de l'objet dont on souhaite comparer le type à <code>typeObjet</code>, <code>typeObjet</code> étant un type d'objet tel que {{jsxref("Date")}} ou {{jsxref("Array")}}.</p>
-
-<p><code>instanceof</code> peut être utilisé pour confirmer le type d'un objet pendant l'exécution. Ainsi, on peut gérer les exceptions en prévoyant différents cas pour différents types d'exception éventuellement levées.</p>
-
-<p>Dans l'exemple qui suit, le code utilise l'opérateur <code>instanceof</code> afin de déterminer si <code>jour</code> est un objet <code>Date</code>. C'est le cas, les instructions contenues dans le bloc après l'instruction <code>if</code> sont donc exécutées.</p>
-
-<pre class="brush: js">var jour = new Date(2007, 01, 22);
-if (jour instanceof Date) {
-  // instructions à exécuter
-}
-</pre>
-
-<h3 id="Précédence_des_opérateurs">Précédence des opérateurs</h3>
-
-<p>La <em>précédence</em> des opérateurs indique l'ordre dans lequel ils sont appliqués lors de l'évaluation d'une expression. L'utilisation de parenthèses permet de surcharger la relation de précédence.</p>
-
-<p>Le tableau qui suit décrit les précédences des opérateurs, dans l'ordre décroissant.</p>
-
-<table class="standard-table">
- <caption>Précédence des opérateurs</caption>
- <thead>
-  <tr>
-   <th scope="col">Type d'opérateur</th>
-   <th scope="col">Opérateurs individuels</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>membre</td>
-   <td><code>. []</code></td>
-  </tr>
-  <tr>
-   <td>appel/création d'instance</td>
-   <td><code>() new</code></td>
-  </tr>
-  <tr>
-   <td>négation/incrémentation</td>
-   <td><code>! ~ - + ++ -- typeof void delete</code></td>
-  </tr>
-  <tr>
-   <td>multiplication/division</td>
-   <td><code>* / %</code></td>
-  </tr>
-  <tr>
-   <td>addition/soustraction</td>
-   <td><code>+ -</code></td>
-  </tr>
-  <tr>
-   <td>décalage binaire</td>
-   <td><code>&lt;&lt; &gt;&gt; &gt;&gt;&gt;</code></td>
-  </tr>
-  <tr>
-   <td>relationnel</td>
-   <td><code>&lt; &lt;= &gt; &gt;= in instanceof</code></td>
-  </tr>
-  <tr>
-   <td>égalité</td>
-   <td><code>== != === !==</code></td>
-  </tr>
-  <tr>
-   <td>ET binaire</td>
-   <td><code>&amp;</code></td>
-  </tr>
-  <tr>
-   <td>OU exclusif binaire</td>
-   <td><code>^</code></td>
-  </tr>
-  <tr>
-   <td>OU binaire</td>
-   <td><code>|</code></td>
-  </tr>
-  <tr>
-   <td>ET logique</td>
-   <td><code>&amp;&amp;</code></td>
-  </tr>
-  <tr>
-   <td>OU logique</td>
-   <td><code>||</code></td>
-  </tr>
-  <tr>
-   <td>conditionnel</td>
-   <td><code>?:</code></td>
-  </tr>
-  <tr>
-   <td>assignation</td>
-   <td><code>= += -= *= /= %= &lt;&lt;= &gt;&gt;= &gt;&gt;&gt;= &amp;= ^= |=</code></td>
-  </tr>
-  <tr>
-   <td>virgule</td>
-   <td><code>,</code></td>
-  </tr>
- </tbody>
-</table>
-
-<p>Une version plus détaillée de cette table peut être trouvée dans la <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Précédence_des_opérateurs#Table">référence JavaScript</a>.</p>
-
-<h2 id="Expressions">Expressions</h2>
-
-<p>Un expression correspond à une unité de code valide qui est résolue en une valeur.</p>
-
-<p>D'un point de vue syntaxique, toute expression valide se résout en une valeur. D'un point de vue conceptuel cependant, il y a deux types d'expressions : celles avec des effets de bord (qui, par exemple, affectent une valeur à une variable) et celles qui, d'une certaine façon, sont évaluées et sont résolues en une valeur.</p>
-
-<p>L'expression <code>x = 7</code> affecte une valeur (premier type). Dans celle-ci, on utilise l'opérateur <code>=</code> pour affecter la valeur 7 à la variable <code>x</code>. L'expression elle-même est évaluée à 7.</p>
-
-<p>Le code <code>3 + 4</code> correspond au second type d'expression. On utilise ici l'opérateur <code>+</code> pour ajouter trois à quatre sans affecter le résultat (7) à une variable.</p>
-
-<p>Les expressions JavaScript peuvent être rangées selon différentes catégories :</p>
-
-<ul>
- <li>Arithmétiques : l'expression est évaluée en un nombre (par exemple 3.14159)</li>
- <li>Textuelles : l'expression est évaluée en une chaîne de caractères</li>
- <li>Logiques : l'expression est évaluée en <code>true</code> ou <code>false</code></li>
- <li>Primaires : Les mots-clés basiques et les expressions générales en JavaScript</li>
- <li>Expressions vers la gauche : Les valeurs à gauche sont la cible d'une affectation</li>
-</ul>
-
-<h3 id="Expressions_primaires">Expressions primaires</h3>
-
-<p>Ces expressions correspondent aux mots-clés et aux expressions générales en JavaScript.</p>
-
-<h4 id="this"><code>this</code></h4>
-
-<p>Le <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_this">mot-clé <code>this</code></a> permet de faire référence à l'objet courant. En général, on l'utilise au sein d'une méthode pour faire référence à l'objet qui a utilisé la méthode. Il s'utilise de cette façon :</p>
-
-<pre class="syntaxbox">this["nomPropriété"]
-this.nomPropriété</pre>
-
-<p>Soit une fonction qui valide un objet si sa propriété <code>value</code> est comprise entre deux valeurs :</p>
-
-<pre class="brush: js">function valide(obj, valMin, valMax){
-  if ((obj.value &lt; valMin) || (obj.value &gt; valMax))
-    console.log("Valeur incorrecte !");
-}
-</pre>
-
-<p>Il est possible d'appeler <code>valide</code> pour chaque gestionnaire d'événement <code>onChange</code> des éléments du formulaire, et d'utiliser le mot-clé <code>this</code> pour passer l'élément même en argument :</p>
-
-<pre class="brush: html">&lt;p&gt;Entrez un nombre entre 18 et 99 :&lt;/p&gt;
-&lt;input type="text" nom="age" size=3 onChange="valide(this, 18, 99);"&gt;
-</pre>
-
-<h4 id="Opérateur_de_groupement">Opérateur de groupement</h4>
-
-<p>L'opérateur de groupement <code>( )</code> permet de contrôler la précédence de l'évaluation dans les expressions. On peut ainsi forcer l'évaluation d'une addition avant l'évaluation d'une multiplication ou d'une division.</p>
-
-<pre class="brush: js">var a = 1;
-var b = 2;
-var c = 3;
-
-// précédence par défaut
-a + b * c;   // 7
-// ce qui correspond à :
-a + (b * c); // 7
-
-// on peut utiliser l'opérateur
-// pour effectuer l'addition en premier
-(a + b) * c;   // 9
-
-// ce qui équivaut à :
-a * c + b * c; // 9
-</pre>
-
-<h3 id="Expressions_vers_la_gauche">Expressions vers la gauche</h3>
-
-<p>Les valeurs à gauches de ces expressions sont la cible d'une affectation.</p>
-
-<h4 id="new"><code>new</code></h4>
-
-<p>L'<a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_new">opérateur <code>new</code></a> permet de créer une instance d'un objet défini par l'utilisateur ou d'un objet dont le type est un des types d'objets natifs. Cet opérateur utilise la syntaxe suivante :</p>
-
-<pre class="brush: js">var nomObjet = new typeObjet([param1, param2, ..., paramN]);
-</pre>
-
-<h4 id="super">super</h4>
-
-<p>Le <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/super">mot-clé <code>super</code></a> est utilisé afin d'appeler des fonctions disponibles sur un objet parent. Il peut notamment être utilisé avec les <a href="/fr/docs/Web/JavaScript/Reference/Classes">classes</a> pour appeler le constructeur parent.</p>
-
-<pre class="syntaxbox">super([arguments]); // invoque le constructeur parent
-super.functionParent([arguments]);
-</pre>
-
-<h4 id="Opérateur_de_décomposition">Opérateur de décomposition</h4>
-
-<p>L'<a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateur_de_décomposition">opérateur de décomposition</a> permet de développer une expression là où plusieurs argument (pour les appels de fonction) ou plusieurs éléments (pour les littéraux de tableaux) sont attendus.</p>
-
-<p>Par exemple, si on a tableau et qu'on souhaite créer un nouveau tableau qui contient l'ancien, on peut soit utiliser une combinaison des méthodes <code>push</code>, <code>splice</code>, <code>concat</code>, soit utiliser la syntaxe de décomposition qui s'avère plus concise :</p>
-
-<pre class="brush: js">var parts = ['shoulders', 'knees'];
-var lyrics = ['head', ...parts, 'and', 'toes'];</pre>
-
-<p>L'opérateur de décomposition fonctionne de façon semblable avec les appels de fonction :</p>
-
-<pre class="brush: js">function f(x, y, z) { }
-var args = [0, 1, 2];
-f(...args);</pre>
-
-<p>{{PreviousNext("Web/JavaScript/Guide/Fonctions", "Web/JavaScript/Guide/Nombres_et_dates")}}</p>
diff --git a/files/fr/web/javascript/guide/expressions_and_operators/index.md b/files/fr/web/javascript/guide/expressions_and_operators/index.md
new file mode 100644
index 0000000000..531199cc8a
--- /dev/null
+++ b/files/fr/web/javascript/guide/expressions_and_operators/index.md
@@ -0,0 +1,972 @@
+---
+title: Expressions et opérateurs
+slug: Web/JavaScript/Guide/Expressions_and_Operators
+tags:
+  - Débutant
+  - Expressions
+  - Guide
+  - JavaScript
+  - Operators
+translation_of: Web/JavaScript/Guide/Expressions_and_Operators
+original_slug: Web/JavaScript/Guide/Expressions_et_Opérateurs
+---
+{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Fonctions", "Web/JavaScript/Guide/Nombres_et_dates")}}
+
+Ce chapitre décrit les expressions et les opérateurs en JavaScript, il inclut des notions sur les opérateurs d'affectation, de comparaison, les opérateurs arithmétiques, binaires, logiques, ceux qui s'appliquent sur les chaînes de caractères ainsi que les opérateurs spéciaux.
+
+Une liste complète et détaillée des opérateurs JavaScript est disponible dans [la référence JavaScript](/fr/docs/Web/JavaScript/Reference/Opérateurs).
+
+## Opérateurs
+
+JavaScript possède différents types d'opérateurs. Cette section décrit les opérateurs et certaines informations sur les priorités entre opérateurs.
+
+- [Les opérateurs d'affectation](/fr/docs/Web/JavaScript/Guide/Expressions_et_Opérateurs#Opérateurs_d'affectation)
+- [Les opérateurs de comparaison](/fr/docs/Web/JavaScript/Guide/Expressions_et_Opérateurs#Opérateurs_de_comparaison)
+- [Les opérateurs arithmétiques](/fr/docs/Web/JavaScript/Guide/Expressions_et_Opérateurs#Opérateurs_arithmétiques)
+- [Les opérateurs binaires](/fr/docs/Web/JavaScript/Guide/Expressions_et_Opérateurs#Opérateurs_binaires)
+- [Les opérateurs logiques](/fr/docs/Web/JavaScript/Guide/Expressions_et_Opérateurs#Opérateurs_logiques)
+- [Les opérateurs de chaînes](/fr/docs/Web/JavaScript/Guide/Expressions_et_Opérateurs#Opérateurs_de_chaînes_de_caractères)
+- [L'opérateur (ternaire) conditionnel](/fr/docs/Web/JavaScript/Guide/Expressions_et_Opérateurs#Opérateur_conditionnel_ternaire)
+- [L'opérateur virgule](/fr/docs/Web/JavaScript/Guide/Expressions_et_Opérateurs#La_virgule_comme_opérateur)
+- [Les opérateurs unaires](/fr/docs/Web/JavaScript/Guide/Expressions_et_Opérateurs#Opérateurs_unaires)
+- [Les opérateurs relationnels](/fr/docs/Web/JavaScript/Guide/Expressions_et_Opérateurs#Opérateurs_relationnels)
+
+JavaScript utilise des opérateurs _binaires_ et _unaires_, ainsi qu'un opérateur ternaire spécial (l'opérateur conditionnel). Un opérateur binaire utilise deux opérandes, un précédant l'opérateur et un lui succédant :
+
+    opérande1 opérateur opérande2
+
+Par exemple : « `3+4` » ou « `x*y` ».
+
+Un opérateur unaire ne nécessite qu'un opérande, avant ou après l'opérateur :
+
+    opérateur opérande
+
+ou
+
+    opérande opérateur
+
+Comme « `x++` » ou « `++x` ».
+
+### Opérateurs d'affectation
+
+Un [opérateur d'affectation](/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_d_affectation) assigne une valeur à son opérande gauche, valeur basée sur celle de l'opérande droit. L'opérateur d'affectation simple est le signe égal (=), il assigne la valeur de l'opérande droit à l'opérande gauche. Autrement dit, avec « x = y » on affecte la valeur y à x.
+
+D'autres opérateurs d'affectation sont des raccourcis correspondant à certaines opérations composées, ils sont énumérés dans le tableau qui suit :
+
+| Nom                                                                                                                                                                        | Opérateur composé | Signification |
+| -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------- | ------------- |
+| [Affectation](/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_d_affectation#Affectation)                                                                 | `x = y`           | `x = y`       |
+| [Affectation après addition](/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_d_affectation#Affectation_apr%C3%A8s_addition)                              | `x += y`          | `x = x + y`   |
+| [Affectation après soustraction](/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_d_affectation#Affectation_apr%C3%A8s_soustraction)                      | `x -= y`          | `x = x - y`   |
+| [Affectation après multiplication](/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_d_affectation#Affectation_apr%C3%A8s_multiplication)                  | `x *= y`          | `x = x * y`   |
+| [Affectation après division](/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_d_affectation#Affectation_après_division)                                             | `x /= y`          | `x = x / y`   |
+| [Affectation du reste](/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_d_affectation#Affectation_du_reste)                                                         | `x %= y`          | `x = x % y`   |
+| [Affectation après exponentiation](/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_d_affectation#Affectation_après_exponentiation){{experimental_inline}} | `x **=y`          | `x = x ** y`  |
+| [Affectation après décalage à gauche](/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_d_affectation#Affectation_après_décalage_à_gauche)                           | `x <<= y`         | `x = x << y`  |
+| [Affectation après décalage à droite](/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_d_affectation#Affectation_après_décalage_à_droite)                           | `x >>= y`         | `x = x >> y`  |
+| [Affectation après décalage à droite non signé](/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_d_affectation#Affectation_après_décalage_à_droite_non-signé)       | `x >>>= y`        | `x = x >>> y` |
+| [Affectation après ET binaire](/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_d_affectation#Affectation_après_ET_binaire)                                         | `x &= y`          | `x = x & y`   |
+| [Affectation après OU exclusif binaire](</fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_d_affectation#Affectation_après_OU_exclusif_(XOR)_binaire>)               | `x ^= y`          | `x = x ^ y`   |
+| [Affectation après OU binaire](/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_d_affectation#Affectation_après_OU_binaire)                                         | `x \|= y`         | `x = x \| y`  |
+
+#### Décomposition
+
+Lors d'affectations plus complexes, on peut utiliser [l'affectation par décomposition](/fr/docs/Web/JavaScript/Reference/Opérateurs/Affecter_par_décomposition). C'est une expression qui permet d'extraire des données depuis des tableaux ou des objets avec une syntaxe symétrique de littéraux de tableaux ou d'objets pour affecter des variables.
+
+```js
+var toto = ["un", "deux", "trois"];
+
+// sans décomposition
+var un = toto[0];
+var deux = toto[1];
+var trois = toto[2];
+
+// avec la décomposition
+var [un, deux, trois] = toto;
+```
+
+### Opérateurs de comparaison
+
+Un [opérateur de comparaison](/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_de_comparaison) compare ses deux opérandes et renvoie un valeur booléenne correspondant au résultat de la comparaison (vraie ou fausse). Les opérandes peuvent être des nombres, des chaînes de caractères, des booléens ou des objets. Les chaînes de caractères sont comparées selon l'ordre lexicographique usuel en utilisant les valeurs Unicode. Dans la plupart des cas, si les deux opérandes ne sont pas du même type, JavaScript tentera de les convertir vers un type approprié. Cette méthode aboutira souvent à une comparaison numérique. Les seules exceptions à cette conversion implicite sont les opérateurs `===` et `!==` , qui testent des égalités et inégalités strictes. Ces opérateurs n'effectuent pas de conversion de type. Le tableau qui suit décrit les opérateurs de comparaisons relativement à ce fragment de code :
+
+```js
+var var1 = 3;
+var var2 = 4;
+```
+
+<table class="standard-table">
+  <caption>
+    Opérateurs de comparaison
+  </caption>
+  <thead>
+    <tr>
+      <th scope="col">Opérateur</th>
+      <th scope="col">Description</th>
+      <th scope="col">Exemples qui renvoient <code>true</code></th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>
+        <a
+          href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_de_comparaison#.C3.89galit.C3.A9_simple_(.3D.3D)"
+          >Égalité</a
+        >
+        (<code>==</code>)
+      </td>
+      <td>
+        Renvoie <code>true</code> si les opérandes sont égaux après conversion
+        en valeurs de mêmes types.
+      </td>
+      <td>
+        <code>3 == var1</code>
+        <p><code>"3" == var1</code></p>
+        <code>3 == '3'</code>
+      </td>
+    </tr>
+    <tr>
+      <td>
+        <a
+          href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_de_comparaison#In.C3.A9galit.C3.A9_simple_(!.3D)"
+          >Inégalité</a
+        >
+        (<code>!=</code>)
+      </td>
+      <td>Renvoie <code>true</code> si les opérandes sont différents.</td>
+      <td>
+        <code>var1 != 4<br />var2 != "3"</code>
+      </td>
+    </tr>
+    <tr>
+      <td>
+        <a
+          href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_de_comparaison#.C3.89galit.C3.A9_stricte_(.3D.3D.3D)"
+          >Égalité stricte </a
+        >(<code>===</code>)
+      </td>
+      <td>
+        Renvoie <code>true</code> si les opérandes sont égaux et de même type.
+        Voir {{jsxref("Object.is","Object.is()")}} et
+        <a href="/fr/docs/JavaScript/Guide/%C3%89galit%C3%A9_en_JavaScript"
+          >égalité de type en JavaScript</a
+        >.
+      </td>
+      <td><code>3 === var1</code></td>
+    </tr>
+    <tr>
+      <td>
+        <a
+          href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_de_comparaison#In.C3.A9galit.C3.A9_stricte_(!.3D.3D)"
+          >Inégalité stricte</a
+        >
+        (<code>!==</code>)
+      </td>
+      <td>
+        Renvoie <code>true</code> si les opérandes ne sont pas égaux ou s'ils ne
+        sont pas de même type.
+      </td>
+      <td>
+        <code>var1 !== "3"<br />3 !== '3'</code>
+      </td>
+    </tr>
+    <tr>
+      <td>
+        <a
+          href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_de_comparaison#Sup.C3.A9rieur_strict_(%3E)"
+          >Supériorité stricte</a
+        >
+        (<code>></code>)
+      </td>
+      <td>
+        Renvoie <code>true</code> si l'opérande gauche est supérieur
+        (strictement) à l'opérande droit.
+      </td>
+      <td>
+        <code>var2 > var1<br />"12" > 2</code>
+      </td>
+    </tr>
+    <tr>
+      <td>
+        <a
+          href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_de_comparaison#Sup.C3.A9rieur_ou_.C3.A9gal_(%3E.3D)"
+          >Supériorité ou égalité</a
+        >
+        (<code>>=</code>)
+      </td>
+      <td>
+        Renvoie <code>true</code> si l'opérande gauche est supérieur ou égal à
+        l'opérande droit.
+      </td>
+      <td>
+        <code>var2 >= var1<br />var1 >= 3</code>
+      </td>
+    </tr>
+    <tr>
+      <td>
+        <a
+          href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_de_comparaison#Inf.C3.A9rieur_strict_(%3C)"
+          >Infériorité stricte</a
+        >
+        (<code>&#x3C;</code>)
+      </td>
+      <td>
+        Renvoie <code>true</code> si l'opérande gauche est inférieur
+        (strictement) à l'opérande droit.
+      </td>
+      <td>
+        <code>var1 &#x3C; var2<br />"2" &#x3C; "12"</code>
+      </td>
+    </tr>
+    <tr>
+      <td>
+        <a
+          href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_de_comparaison#Inf.C3.A9rieur_ou_.C3.A9gal_(%3C.3D)"
+          >Infériorité ou égalité</a
+        >
+        (<code>&#x3C;=</code>)
+      </td>
+      <td>
+        Renvoie <code>true</code> si l'opérande gauche est inférieur ou égal à
+        l'opérande droit.
+      </td>
+      <td>
+        <code>var1 &#x3C;= var2<br />var2 &#x3C;= 5</code>
+      </td>
+    </tr>
+  </tbody>
+</table>
+
+> **Note :** `=>` n'est pas un opérateur. Il s'agit de la notation utilisée pour [les fonctions fléchées](/fr/docs/Web/JavaScript/Reference/Fonctions/Fonctions_fl%C3%A9ch%C3%A9es).
+
+### Opérateurs arithmétiques
+
+Les [opérateurs arithmétiques](/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_arithmétiques) ont pour opérandes des valeurs numériques (des littéraux ou des variables) et renvoient une valeur numérique. Les opérateurs arithmétiques standards sont l'addition (+), la soustraction (-), la multiplication (\*), et la division (/). Ces opérateurs fonctionnent comme pour la plupart des langages de programmation lorsqu'ils sont utilisés avec des nombres décimaux (on notera que la division par zéro a pour résultat {{jsxref("Infinity")}}). Ainsi :
+
+```js
+1 / 2; // 0.5
+1 / 2 == 1.0 / 2.0; // true
+```
+
+En plus des opérations arithmétiques standards (+,-,\*,/), JavaScript fournit également d'autres opérateurs arithmétiques, listés dans le tableau qui suit :
+
+<table class="fullwidth-table">
+  <caption>
+    Opérateurs arithmétiques
+  </caption>
+  <thead>
+    <tr>
+      <th scope="col">Opérateur</th>
+      <th scope="col">Description</th>
+      <th scope="col">Exemple</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>
+        <a
+          href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_arithm%C3%A9tiques#Reste_(.25)"
+          >Reste</a
+        >
+        (<code>%</code>)<br /> 
+      </td>
+      <td>
+        Opérateur binaire. Renvoie le reste entier de la division entre les deux
+        opérandes.
+      </td>
+      <td>12 % 5 renvoie 2.</td>
+    </tr>
+    <tr>
+      <td>
+        <a
+          href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_arithm%C3%A9tiques#Incr.C3.A9ment_(.2B.2B)"
+          >Incrément</a
+        >
+        (<code>++</code>)
+      </td>
+      <td>
+        Opérateur unaire. Ajoute un à son opérande. S'il est utilisé en préfixe
+        (<code>++x</code>), il renvoie la valeur de l'opérande après avoir
+        ajouté un, s'il est utilisé comme opérateur de suffixe
+        (<code>x++</code>), il renvoie la valeur de l'opérande avant d'ajouter
+        un.
+      </td>
+      <td>
+        Si <code>x</code> vaut 3, <code>++x</code> incrémente <code>x</code> à 4
+        et renvoie 4, <code>x++</code> renvoie 3 et seulement ensuite ajoute un
+        à <code>x</code>.
+      </td>
+    </tr>
+    <tr>
+      <td>
+        <a
+          href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_arithm%C3%A9tiques#D.C3.A9cr.C3.A9ment_(--)"
+          >Décrément</a
+        >
+        (<code>--</code>)
+      </td>
+      <td>
+        Opérateur unaire. Il soustrait un à son opérande. Il fonctionne de
+        manière analogue à l'opérateur d'incrément.
+      </td>
+      <td>
+        Si <code>x</code> vaut 3, <code>--x</code> décrémente <code>x</code> à 2
+        puis renvoie2, <code>x--</code> renvoie 3 puis décrémente la valeur de
+        <code>x</code>.
+      </td>
+    </tr>
+    <tr>
+      <td>
+        <a
+          href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_arithm%C3%A9tiques#N.C3.A9gation_unaire_(-)"
+          >Négation unaire</a
+        >
+        (<code>-</code>)
+      </td>
+      <td>Opérateur unaire. Renvoie la valeur opposée de l'opérande.</td>
+      <td>Si <code>x</code> vaut 3, alors <code>-x</code> renvoie -3.</td>
+    </tr>
+    <tr>
+      <td>
+        <a
+          href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_arithm%C3%A9tiques#Plus_unaire_(.2B)"
+          >Plus unaire </a
+        >(<code>+</code>)
+      </td>
+      <td>
+        Opérateur unaire. Si l'opérande n'est pas un nombre, il tente de le
+        convertir en une valeur numérique.
+      </td>
+      <td>
+        <p><code>+"3"</code> renvoie <code>3</code>.</p>
+        <p><code>+true</code> renvoie <code>1</code>.</p>
+      </td>
+    </tr>
+    <tr>
+      <td>
+        <a
+          href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_arithm%C3%A9tiques#Exponentiation"
+          >Opérateur d'exponentiation</a
+        >
+        (**) (puissance) {{experimental_inline}}
+      </td>
+      <td>
+        Calcule un nombre (base) élevé à une puissance donnée (soit
+        <code>base^puissance</code>)
+      </td>
+      <td>
+        <p><code>2 ** 3</code> renvoie <code>8</code></p>
+        <p><code>10 ** -1</code> renvoie <code>0.1</code></p>
+      </td>
+    </tr>
+  </tbody>
+</table>
+
+### Opérateurs binaires
+
+Les [opérateurs binaires](/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_binaires) voient leurs opérandes comme des ensembles de 32 bits (des zéros et des uns), et non pas comme des nombres décimaux, octaux ou hexadécimaux. Ainsi, le nombre décimal neuf aura une représentation binaire de 1001. Les opérateurs binaires effectuent des opérations sur des représentations binaires mais renvoies des valeurs numériques JavaScript standards.
+
+Le tableau qui suit résume les opérateurs binaires JavaScript :
+
+| Opérateur                                                                                                                                                                                                     | Utilisation | Description                                                                                                                       |
+| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | --------------------------------------------------------------------------------------------------------------------------------- |
+| [AND (ET) binaire](/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_binaires#&_.28ET_binaire.29)                                                                                             | `a & b`     | Renvoie un 1 à chaque position binaire pour laquelle les bits des deux opérandes sont à 1.                                        |
+| [OR (OU) binaire](/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_binaires#|_.28OU_binaire.29)                                                                                              | `a \| b`    | Renvoie un zéro à chaque position binaire pour laquelle les bits des deux opérandes sont à 0.                                     |
+| [XOR (OU exclusif) binaire](/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_binaires#.5E_.28XOR_binaire.29)                                                                                 | `a ^ b`     | Renvoie un zéro à chaque position binaire pour laquelle les bits sont les mêmes (et un 1 pour chacun des bits qui est différent). |
+| [NOT (NON) binaire](/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_binaires#.7E_.28NON_binaire.29)                                                                                         | `~ a`       | Inverse les bits de l'opérande.                                                                                                   |
+| [Décalage binaire à gauche](/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_binaires#.3C.3C_.28d.C3.A9calage_.C3.A0_gauche.29)                                                              | `a << b`    | Décale la représentation binaire de `b` bits sur la gauche et complète avec des zéros à droite.                                   |
+| [Décalage binaire à droite](/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_binaires#.3E.3E_.28d.C3.A9calage_.C3.A0_droite_avec_propagation_du_signe.29)                                    | `a >> b`    | Décale la représentation binaire de `b` bits sur la droite en ignorant les bits perdus.                                           |
+| [Décalage binaire à droite en complétant avec des zéros](/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_binaires#.3E.3E.3E_.28d.C3.A9calage_.C3.A0_droite_avec_insertion_de_z.C3.A9ros.29) | `a >>> b`   | Décale la représentation binaire de `b` bits sur la droite en ignorant les bits perdus et ajoute des zéros sur la gauche.         |
+
+#### Opérateurs binaires logiques
+
+Les opérateurs binaires logiques fonctionnent de cette façon :
+
+- Les opérandes sont convertis en entiers sur 32 bits et exprimés comme une série de bits (des 1 et des 0). Les nombres sur plus de 32 bits voient leurs bits supplémentaires supprimés :
+
+  ```js
+    Avant : 11100110111110100000000000000110000000000001
+    Après :             10100000000000000110000000000001
+    ```
+
+- Chaque bit du premier opérande est associé avec le bit correspondant du second opérande (le premier bit du premier opérande avec le premier bit du second opérande, le second avec le second et ainsi de suite)
+- L'opérateur est appliqué pour chaque paire de bits ainsi constituée et le résultat est reconstruit sous forme binaire.
+
+Le chiffre neuf est par exemple représenté comme 1001, et le nombre quinze comme 1111. Ainsi, quand les opérateurs binaires sont appliqués sur ces valeurs, on a les résultats qui suivent :
+
+| Expression | Résultat | Description binaire                                               |
+| ---------- | -------- | ----------------------------------------------------------------- |
+| `15 & 9`   | `9`      | `1111 & 1001 = 1001`                                              |
+| `15 \| 9`  | `15`     | `1111 \| 1001 = 1111`                                             |
+| `15 ^ 9`   | `6`      | `1111 ^ 1001 = 0110`                                              |
+| `~15`      | `-16`    | ` ~``00000000...`` 00001111 = ``1111``1111``...``11110000 `       |
+| `~9`       | `-10`    | ` ~``00000000``...``0000`` 1001 = ``1111``1111``...``1111``0110 ` |
+
+Il faut remarquer que tous les bits sont échangés lorsque l'opérateur binaire NOT est utilisé. Il est donc utile de savoir que les valeurs dont le bit le plus fort (le plus à gauche) vaut 1 sont des nombres négatifs (représentation en complément à deux). L'évaluation de `~x` aura le même résultat que l'évaluation de `-x - 1`.
+
+#### Opérateurs binaires de décalage
+
+Les opérateurs binaires de décalage utilisent deux opérandes : le premier indiquant la quantité à décaler et le second indiquant de combien de bits on décale le premier opérande. La direction du décalage est spécifiée grâce à l'opérateur.
+
+Les opérateurs binaires de décalage convertissent leurs opérandes en entiers sur 32 bits et renvoient un résultat dont le type est le même que l'opérande gauche.
+
+Les opérateurs de décalage sont énumérés dans le tableau qui suit.
+
+<table class="fullwidth-table">
+  <caption>
+    Opérateurs binaires de décalage
+  </caption>
+  <thead>
+    <tr>
+      <th scope="col">Opérateur</th>
+      <th scope="col">Description</th>
+      <th scope="col">Exemple</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>
+        <a
+          href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_binaires#<<_(décalage_à_gauche)"
+          >Décalage à gauche (<code>&#x3C;&#x3C;</code>)</a
+        >
+      </td>
+      <td>
+        Cet opérateur décale le premier opérande d'un nombre de bits donné sur
+        la gauche. Les bits en trop sont ignorés et des bits à zéro sont
+        introduits à droite.
+      </td>
+      <td>
+        <code>9&#x3C;&#x3C;2</code> renvoie 36, car 1001, décalé de 2 bits à
+        gauche, devient  100100, dont la représentation en base 10 est  36.
+      </td>
+    </tr>
+    <tr>
+      <td>
+        <a
+          href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_binaires#>>_(décalage_à_droite_avec_propagation_du_signe)"
+          >Décalage à droite avec propagation du signe (<code>>></code>)</a
+        >
+      </td>
+      <td>
+        Cet opérateur décale le premier opérande d'un nombre de bits donné sur
+        la droite. Les bits en trop sont ignorés et des bits correspondants au
+        bit de signe sont introduits à gauche.
+      </td>
+      <td>
+        <code>9>>2</code> renvoie 2, car 1001, décalé de 2 bits à droite,
+        devient 10 représentant 2. De même  <code>-9>>2</code> renvoie -3, car
+        le signe est préservé.
+      </td>
+    </tr>
+    <tr>
+      <td>
+        <a
+          href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_binaires#>>>_(décalage_à_droite_avec_insertion_de_zéros)"
+          >Décalage à droite avec zéros (<code>>>></code>)</a
+        >
+      </td>
+      <td>
+        Cet opérateur décale le premier opérande d'un nombre de bits donné sur
+        la droite. Les bits en trop sont ignorés et des bits à 0 sont introduits
+        à gauche.
+      </td>
+      <td>
+        <code>19>>>2</code> renvoie 4, car 10011, décalé de 2 bits, devient 100
+        qui représente 4. Pour les nombres positifs, cet opérateur et
+        l'opérateur précédent renvoient les mêmes résultats.
+      </td>
+    </tr>
+  </tbody>
+</table>
+
+### Opérateurs logiques
+
+Les [opérateurs logiques](/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_logiques) sont généralement utilisés avec des valeurs booléennes. Dans ce cas, il renvoient une valeur booléenne. Les opérateurs `&&` et `||` renvoient en fait une valeurs d'un des opérandes et si ces opérateurs sont utilisés avec des valeurs non-booléennées, ils pourront renvoyer une valeur non-booléenne. Les opérateurs logiques sont décrits dans le tableau qui suit.
+
+<table class="fullwidth-table">
+  <caption>
+    Opérateurs logiques
+  </caption>
+  <thead>
+    <tr>
+      <th scope="col">Opérateur</th>
+      <th scope="col">Usage</th>
+      <th scope="col">Description</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>
+        <a
+          href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_logiques#Logical_AND_.28&#x26;&#x26;.29"
+          >ET logique</a
+        >
+        (<code>&#x26;&#x26;</code>)
+      </td>
+      <td><code>expr1 &#x26;&#x26; expr2</code></td>
+      <td>
+        Renvoie <code>expr1</code> s'il peut être converti à false, sinon
+        renvoie <code>expr2</code>. Dans le cas où on utilise des opérandes
+        booléens, <code>&#x26;&#x26;</code> renvoie <code>true</code> si les
+        deux opérandes valent <code>true</code>, <code>false</code> sinon.
+      </td>
+    </tr>
+    <tr>
+      <td>
+        <a
+          href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_logiques#OU_logique_(.7C.7C)"
+          >OU logique</a
+        >
+        (<code>||</code>)
+      </td>
+      <td><code>expr1 || expr2</code></td>
+      <td>
+        Renvoie <code>expr1</code> s'il peut être converti à <code>true</code>,
+        sinon renvoie <code>expr2</code>. Dans le cas où on utilise des
+        opérandes booléens, <code>||</code> renvoie <code>true</code> si l'un
+        des opérandes vaut <code>true</code>, si les deux valent
+        <code>false</code>, il renvoie <code>false</code>.
+      </td>
+    </tr>
+    <tr>
+      <td>
+        <a
+          href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_logiques#Logical_NOT_.28.21.29"
+          >NON logique </a
+        >(<code>!</code>)
+      </td>
+      <td><code>!expr</code></td>
+      <td>
+        Renvoie <code>false</code> si son unique opérande peut être converti en
+        <code>true</code>, sinon il renvoie <code>true</code>.
+      </td>
+    </tr>
+  </tbody>
+</table>
+
+Les exemples d'expressions qui peuvent être converties à `false` sont celles qui sont évaluées à `null`, 0, `NaN`, la chaîne de caractères vide (""), ou `undefined`.
+
+Le code qui suit montre des exemples de l'utilisation de l'opérateur logique ET (&&).
+
+```js
+var a1 =   true && true;     // t && t renvoie true
+var a2 =   true && false;    // t && f renvoie false
+var a3 =  false && true;     // f && t renvoie false
+var a4 =  false && (3 == 4); // f && f renvoie false
+var a5 = "Chat" && "Chien";  // t && t renvoie Chien
+var a6 =  false && "Chat";   // f && t renvoie false
+var a7 = "Chat" && false;    // t && f renvoie false
+```
+
+Les exemples suivants montrent l'utilisation de l'opérateur logique OU (||).
+
+```js
+var o1 =   true || true;     // t || t renvoie true
+var o2 =  false || true;     // f || t renvoie true
+var o3 =   true || false;    // t || f renvoie true
+var o4 =  false || (3 == 4); // f || f renvoie false
+var o5 = "Chat" || "Chien";  // t || t renvoie Chat
+var o6 =  false || "Chat";   // f || t renvoie Chat
+var o7 = "Chat" || false;    // t || f renvoie Chat
+```
+
+Les exemples suivants montrent l'utilisation de l'opérateur logique NON (!).
+
+```js
+var n1 = !true;   // !t renvoie false
+var n2 = !false;  // !f renvoie true
+var n3 = !"Chat"; // !t renvoie false
+```
+
+#### Evaluation rapide
+
+Les expressions logiques sont évaluées de gauche à droite. Cette évaluation utilise des tests pour savoir s'il est possible d'utiliser des « raccourcis » correspondant aux règles suivantes :
+
+- `false` && _n'importe quoi_ sera évalué à `false`.
+- `true` || _n'importe quoi_ sera évalué à `true`.
+
+Les règles logiques garantissent la validité de ces évaluations, il faut noter que le second opérande n'est pas du tout évalué, empêchant ainsi les effets de bords cachés, liés à cette évaluation.
+
+### Opérateurs de chaînes de caractères
+
+En plus des opérateurs de comparaisons qui peuvent être utilisés sur des chaînes de caractères, il existe l'opérateur de concaténation (+) permettant de concaténer deux chaînes de caractères. Le résultat de cette opération est la fusion des deux opérandes en une même chaîne de caractères. Ainsi :
+
+```js
+console.log("ma " + "chaîne"); // affichera "ma chaîne" dans la console
+```
+
+L'opérateur court += peut également être utilisé pour concaténer des chaînes. Par exemple :
+
+```js
+var maChaîne = "alpha";
+maChaîne += "bet"; // l'expression sera évaluée en "alphabet"
+                   // et cette valeur sera affectée à maChaîne
+```
+
+### Opérateur conditionnel ternaire
+
+L'[opérateur conditionnel](/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_conditionnel) est le seul opérateur JavaScript qui utilise trois opérandes. L'expression utilisant l'opérateur peut prendre une valeur parmi deux selon une condition donnée. Cet opérateur s'utilise avec la syntaxe suivante :
+
+    condition ? val1 : val2
+
+Si `condition` vaut `true`, l'opérateur vaudra `val1`. Sinon il vaudra `val2`. Il est possible d'utiliser l'opérateur conditionnel aux mêmes endroits qu'un opérateur standard.
+
+On peut par exemple avoir :
+
+```js
+var statut = (âge >= 18) ? "adulte" : "mineur";
+```
+
+Cette instruction assigne la valeur "adulte" à la variable `status` si la variable `âge` est supérieure ou égale à 18. Sinon, on lui affecte la valeur "mineur".
+
+### La virgule comme opérateur
+
+L'[opérateur virgule](/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_virgule) (`,`) évalue ses deux opérandes et renvoie la valeur du second opérande. Cet opérateur est principalement utilisé dans les boucles for pour permettre à plusieurs variables d'être modifiées à chaque itération de la boucle.
+
+Ainsi, si on a un tableau à 2 dimensions avec 10 lignes et colonnes, on peut utiliser la virgule comme opérateur pour incrémenter deux variables à la fois. Le code qui suit imprime les valeurs contenues sur la diagonale du tableau :
+
+```js
+var x = [0,1,2,3,4,5,6,7,8,9]
+var a = [x, x, x, x, x];
+
+for (var i = 0, j = 9; i <= j; i++, j--)
+  console.log("a[" + i + "][" + j + "]= " + a[i][j]);
+```
+
+### Opérateurs unaires
+
+#### `delete`
+
+L'opérateur [delete](/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_delete) supprime un objet, une propriété d'un objet ou un élément d'un tableau à partir de sa position dans le tableau. La syntaxe de cet opérateur est la suivante :
+
+```js
+delete monObjet;
+delete monObjet.propriété;
+delete monObjet[index];
+delete propriété; // uniquement valide au sein d'une instruction with
+```
+
+où on a `monObjet` qui est le nom de l'objet, `propriété` qui est une propriété existante et `index` un entier indiquant la position d'un élément dans un tableau.
+
+La quatrième instruction n'est valide qu'au sein d'une instruction [`with`](/fr/docs/Web/JavaScript/Reference/Instructions/with) et permet de supprimer une propriété d'un objet.
+
+Il est possible d'utiliser l'opérateur `delete` pour supprimer les variables déclarées implicitement mais pas celles déclarées avec `var`. Si l'opérateur fonctionne correctement, il change la propriété ou l'élément vers la valeur `undefined`. L'opérateur `delete` renvoie `true` si l'opération de suppression est possible, `false` sinon.
+
+```js
+x = 42;
+var y = 43;
+monobj = new Number();
+monobj.h = 4;    // création de la propriété h
+delete x;        // renvoie true (suppression possible si déclaration implicite)
+delete y;        // renvoie false (suppression impossible si déclaration avec var si la variable n'est pas une propriété)
+delete Math.PI;  // renvoie false (suppression impossible pour les propriétés pré-définies)
+delete monobj.h; // renvoie true (suppression possible des propriétés définies par l'utilisateur)
+delete monobj;   // renvoie true (suppression possible si déclaration implicite)
+```
+
+##### Suppression d'éléments d'un tableau
+
+Lorsqu'on supprime un élément d'un tableau, la longueur du tableau n'est pas modifiée. Ainsi, si on supprime `a[3]`, `a[4]` restera `a[4]` (même position et valeur) alors que `a[3]` sera `undefined`.
+
+Lorsque l'opérateur `delete` supprime un élément d'un tableau, cet élément n'appartient plus au tableau. Dans l'exemple qui suit, `arbres[3]` est supprimé mais il est toujours accessible et renvoie `undefined`.
+
+```js
+var arbres = new Array("sequoia", "laurier", "cèdre", "chêne", "érable");
+delete arbres[3];
+if (3 in arbres) {
+  // Ceci ne sera pas exécuté
+}
+```
+
+Pour qu'un élément continue à exister mais qu'il vaille `undefined`, on utilisera le mot-clé` undefined` plutôt que l'opérateur `delete`. Dans l'exemple qui suit, arbres`[3]` est modifié pour valoir `undefined` et l'élément du tableau continue à exister :
+
+```js
+var arbres = new Array("sequoia", "laurier", "cèdre", "chêne", "érable");
+arbres[3] = undefined;
+if (3 in arbres) {
+  // Ceci sera exécuté
+}
+```
+
+#### `typeof`
+
+L'[opérateur `typeof`](/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/L_op%C3%A9rateur_typeof) peut être utilisé de deux façons distinctes :
+
+1.       typeof opérande
+2.       typeof (opérande)
+
+L'opérateur `typeof` renvoie une chaîne de caractères indiquant le type de l'opérande (qui n'est pas évalué). `opérande` correspond à la chaîne de caractère, la variable, le mot-clé ou l'objet dont on souhaite renvoyer le type. L'utilisation des parenthèses est facultative.
+
+Soient les définitions de variables suivantes :
+
+```js
+var maFonction = new Function("5 + 2");
+var forme = "round";
+var taille = 1;
+var toto = ["Pomme", "Poire", "Orange"];
+var jour = new Date();
+```
+
+L'opérateur `typeof` renverra les résultats suivants :
+
+```js
+typeof maFonction; // renvoie "function"
+typeof forme;      // renvoie "string"
+typeof taille;     // renvoie "number"
+typeof toto;       // renvoie "object"
+typeof jour;       // renvoie "object"
+typeof inexistant; // renvoie "undefined"
+```
+
+En ce qui concerne les mots-clés `true` et `null`, l'opérateur `typeof` renvoie les résultats suivants :
+
+```js
+typeof true; // renvoie "boolean"
+typeof null; // renvoie "object"
+```
+
+Pour une chaîne de caractères ou un nombre, `typeof` renvoie les résultats suivants :
+
+```js
+typeof 62;            // renvoie "number"
+typeof 'Hello world'; // renvoie "string"
+```
+
+L'opérateur `typeof`, lorsqu'il est utilisé avec des propriétés, renvoie le type de valeur contenue dans la propriété :
+
+```js
+typeof document.lastModified; // renvoie "string"
+typeof window.length;         // renvoie "number"
+typeof Math.LN2;              // renvoie "number"
+```
+
+Pour les méthodes et les fonctions, l'opérateur `typeof` renvoie les résultats suivants :
+
+```js
+typeof blur;        // renvoie "function"
+typeof eval;        // renvoie "function"
+typeof parseInt;    // renvoie "function"
+typeof shape.split; // renvoie "function"
+```
+
+Pour les objets pré-définis, l'opérateur `typeof` fonctionne ainsi :
+
+```js
+typeof Date;     // renvoie "function"
+typeof Function; // renvoie "function"
+typeof Math;     // renvoie "object"
+typeof Option;   // renvoie "function"
+typeof String;   // renvoie "function"
+```
+
+#### `void`
+
+L'[opérateur `void`](/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_void) peut être utilisé de deux façons :
+
+1.       void (expression)
+2.       void expression
+
+L'opérateur `void` indique qu'une expression doit être évaluée sans retourner de valeur. `expression` étant une expression JavaScript à évaluer. Les parenthèses sont facultatives mais les utiliser permet d'avoir une meilleur lisibilité du code.
+
+L'opérateur `void` peut être utilisé pour spécifier une expression comme un lien hypertexte, l'expression est évaluée mais n'est pas chargée à la place du document actuel.
+
+Le fragment de code  qui suit crée un lien hypertexte qui ne fait rien lorsque l'utilisateur clique dessus. Lorsqu'on clique sur le lien, `void(0)` est évalué à `undefined`, n'ayant aucun effet.
+
+```html
+<A HREF="javascript:void(0)">Cliquer ici pour ne rien faire</A>
+```
+
+Le code suivant crée un lien hypertexte qui envoie un formulaire lorsque l'utilisateur clique dessus.
+
+```html
+<A HREF="javascript:void(document.form.submit())">
+Cliquer ici pour envoyer</A>
+```
+
+### Opérateurs relationnels
+
+Un opérateur relationnel compare ses opérandes et renvoie une valeur booléenne selon que le résultat de la comparaison est vrai ou faux.
+
+#### `in`
+
+L'[opérateur `in`](/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/L_op%C3%A9rateur_in) renvoie `true` si la propriété indiquée fait partie de l'objet donné. Cet opérateur s'utilise avec la syntaxe suivante :
+
+    nomOuNumeroPropriete in monObjet
+
+avec `nomOuNumeroPropriete` qui est une chaîne de caractères, une expression numérique ou un symbole correspondant au nom d'une propriété ou un indice de tableau, `monObjet` est le nom d'un objet.
+
+Les exemples qui suivent utilisent cet opérateur `in`.
+
+```js
+// Tableaux
+var arbres = new Array("sequoia", "laurier", "cèdre", "chêne", "érable");
+0 in arbres;         // renvoie true
+3 in arbres;         // renvoie true
+6 in arbres;         // renvoie false
+"laurier" in arbres; // renvoie false (l'opérateur se base sur l'indice et pas
+                     // sur la valeur)
+"length" in arbres;  // renvoie true (length est une propriété d'un objet Array)
+
+// Objets pré-définis
+"PI" in Math;         // renvoie true
+var myString = new String("coral");
+"length" in myString; // renvoie true
+
+// Objets définis par l'utilisateur
+var maVoiture = {fabricant: "Honda", modèle: "Accord", year: 1998};
+"fabricant" in maVoiture; // renvoie true
+"modèle" in maVoiture;    // renvoie true
+```
+
+#### `instanceof`
+
+L'[opérateur instanceof](/fr/docs/Web/JavaScript/Reference/Opérateurs/instanceof) renvoie `true` si l'objet donné est du type spécifié. Cet opérateur s'utilise avec la syntaxe suivante :
+
+    nomObjet instanceof typeObjet
+
+avec `nomObjet` qui est le nom de l'objet dont on souhaite comparer le type à `typeObjet`, `typeObjet` étant un type d'objet tel que {{jsxref("Date")}} ou {{jsxref("Array")}}.
+
+`instanceof` peut être utilisé pour confirmer le type d'un objet pendant l'exécution. Ainsi, on peut gérer les exceptions en prévoyant différents cas pour différents types d'exception éventuellement levées.
+
+Dans l'exemple qui suit, le code utilise l'opérateur `instanceof` afin de déterminer si `jour` est un objet `Date`. C'est le cas, les instructions contenues dans le bloc après l'instruction `if` sont donc exécutées.
+
+```js
+var jour = new Date(2007, 01, 22);
+if (jour instanceof Date) {
+  // instructions à exécuter
+}
+```
+
+### Précédence des opérateurs
+
+La _précédence_ des opérateurs indique l'ordre dans lequel ils sont appliqués lors de l'évaluation d'une expression. L'utilisation de parenthèses permet de surcharger la relation de précédence.
+
+Le tableau qui suit décrit les précédences des opérateurs, dans l'ordre décroissant.
+
+| Type d'opérateur          | Opérateurs individuels                    |
+| ------------------------- | ----------------------------------------- |
+| membre                    | `. []`                                    |
+| appel/création d'instance | `() new`                                  |
+| négation/incrémentation   | `! ~ - + ++ -- typeof void delete`        |
+| multiplication/division   | `* / %`                                   |
+| addition/soustraction     | `+ -`                                     |
+| décalage binaire          | `<< >> >>>`                               |
+| relationnel               | `< <= > >= in instanceof`                 |
+| égalité                   | `== != === !==`                           |
+| ET binaire                | `&`                                       |
+| OU exclusif binaire       | `^`                                       |
+| OU binaire                | `\|`                                      |
+| ET logique                | `&&`                                      |
+| OU logique                | `\|\|`                                    |
+| conditionnel              | `?:`                                      |
+| assignation               | `= += -= *= /= %= <<= >>= >>>= &= ^= \|=` |
+| virgule                   | `,`                                       |
+
+Une version plus détaillée de cette table peut être trouvée dans la [référence JavaScript](/fr/docs/Web/JavaScript/Reference/Opérateurs/Précédence_des_opérateurs#Table).
+
+## Expressions
+
+Un expression correspond à une unité de code valide qui est résolue en une valeur.
+
+D'un point de vue syntaxique, toute expression valide se résout en une valeur. D'un point de vue conceptuel cependant, il y a deux types d'expressions : celles avec des effets de bord (qui, par exemple, affectent une valeur à une variable) et celles qui, d'une certaine façon, sont évaluées et sont résolues en une valeur.
+
+L'expression `x = 7` affecte une valeur (premier type). Dans celle-ci, on utilise l'opérateur `=` pour affecter la valeur 7 à la variable `x`. L'expression elle-même est évaluée à 7.
+
+Le code `3 + 4` correspond au second type d'expression. On utilise ici l'opérateur `+` pour ajouter trois à quatre sans affecter le résultat (7) à une variable.
+
+Les expressions JavaScript peuvent être rangées selon différentes catégories :
+
+- Arithmétiques : l'expression est évaluée en un nombre (par exemple 3.14159)
+- Textuelles : l'expression est évaluée en une chaîne de caractères
+- Logiques : l'expression est évaluée en `true` ou `false`
+- Primaires : Les mots-clés basiques et les expressions générales en JavaScript
+- Expressions vers la gauche : Les valeurs à gauche sont la cible d'une affectation
+
+### Expressions primaires
+
+Ces expressions correspondent aux mots-clés et aux expressions générales en JavaScript.
+
+#### `this`
+
+Le [mot-clé `this`](/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_this) permet de faire référence à l'objet courant. En général, on l'utilise au sein d'une méthode pour faire référence à l'objet qui a utilisé la méthode. Il s'utilise de cette façon :
+
+    this["nomPropriété"]
+    this.nomPropriété
+
+Soit une fonction qui valide un objet si sa propriété `value` est comprise entre deux valeurs :
+
+```js
+function valide(obj, valMin, valMax){
+  if ((obj.value < valMin) || (obj.value > valMax))
+    console.log("Valeur incorrecte !");
+}
+```
+
+Il est possible d'appeler `valide` pour chaque gestionnaire d'événement `onChange` des éléments du formulaire, et d'utiliser le mot-clé `this` pour passer l'élément même en argument :
+
+```html
+<p>Entrez un nombre entre 18 et 99 :</p>
+<input type="text" nom="age" size=3 onChange="valide(this, 18, 99);">
+```
+
+#### Opérateur de groupement
+
+L'opérateur de groupement `( )` permet de contrôler la précédence de l'évaluation dans les expressions. On peut ainsi forcer l'évaluation d'une addition avant l'évaluation d'une multiplication ou d'une division.
+
+```js
+var a = 1;
+var b = 2;
+var c = 3;
+
+// précédence par défaut
+a + b * c;   // 7
+// ce qui correspond à :
+a + (b * c); // 7
+
+// on peut utiliser l'opérateur
+// pour effectuer l'addition en premier
+(a + b) * c;   // 9
+
+// ce qui équivaut à :
+a * c + b * c; // 9
+```
+
+### Expressions vers la gauche
+
+Les valeurs à gauches de ces expressions sont la cible d'une affectation.
+
+#### `new`
+
+L'[opérateur `new`](/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_new) permet de créer une instance d'un objet défini par l'utilisateur ou d'un objet dont le type est un des types d'objets natifs. Cet opérateur utilise la syntaxe suivante :
+
+```js
+var nomObjet = new typeObjet([param1, param2, ..., paramN]);
+```
+
+#### super
+
+Le [mot-clé `super`](/fr/docs/Web/JavaScript/Reference/Opérateurs/super) est utilisé afin d'appeler des fonctions disponibles sur un objet parent. Il peut notamment être utilisé avec les [classes](/fr/docs/Web/JavaScript/Reference/Classes) pour appeler le constructeur parent.
+
+    super([arguments]); // invoque le constructeur parent
+    super.functionParent([arguments]);
+
+#### Opérateur de décomposition
+
+L'[opérateur de décomposition](/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateur_de_décomposition) permet de développer une expression là où plusieurs argument (pour les appels de fonction) ou plusieurs éléments (pour les littéraux de tableaux) sont attendus.
+
+Par exemple, si on a tableau et qu'on souhaite créer un nouveau tableau qui contient l'ancien, on peut soit utiliser une combinaison des méthodes `push`, `splice`, `concat`, soit utiliser la syntaxe de décomposition qui s'avère plus concise :
+
+```js
+var parts = ['shoulders', 'knees'];
+var lyrics = ['head', ...parts, 'and', 'toes'];
+```
+
+L'opérateur de décomposition fonctionne de façon semblable avec les appels de fonction :
+
+```js
+function f(x, y, z) { }
+var args = [0, 1, 2];
+f(...args);
+```
+
+{{PreviousNext("Web/JavaScript/Guide/Fonctions", "Web/JavaScript/Guide/Nombres_et_dates")}}
diff --git a/files/fr/web/javascript/guide/functions/index.html b/files/fr/web/javascript/guide/functions/index.html
deleted file mode 100644
index 972c9f6286..0000000000
--- a/files/fr/web/javascript/guide/functions/index.html
+++ /dev/null
@@ -1,671 +0,0 @@
----
-title: Fonctions
-slug: Web/JavaScript/Guide/Functions
-tags:
-  - Débutant
-  - Functions
-  - Guide
-  - JavaScript
-translation_of: Web/JavaScript/Guide/Functions
-original_slug: Web/JavaScript/Guide/Fonctions
----
-<p>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Boucles_et_it%C3%A9ration", "Web/JavaScript/Guide/Expressions_et_Op%C3%A9rateurs")}}</p>
-
-<p>Les fonctions font partie des briques fondamentales de JavaScript. Une fonction est une procédure JavaScript, un ensemble d'instructions effectuant une tâche ou calculant une valeur. Afin d'utiliser une fonction, il est nécessaire de l'avoir auparavant définie au sein de la portée dans laquelle on souhaite l'appeler.</p>
-
-<p>On pourra également lire <a href="/fr/docs/Web/JavaScript/Reference/Fonctions">le chapitre de la référence JavaScript sur les fonctions</a> pour étudier plus en détails ce concept</p>
-
-<h2 id="Définir_des_fonctions">Définir des fonctions</h2>
-
-<h3 id="Les_déclarations_de_fonctions">Les déclarations de fonctions</h3>
-
-<p>Une <strong>définition de fonction</strong> (aussi appelée <strong>déclaration de fonction</strong> ou <strong>instruction de fonction</strong>) est construite avec le mot-clé <a href="/fr/docs/Web/JavaScript/Reference/Instructions/function"><code>function</code></a>, suivi par :</p>
-
-<ul>
- <li>Le nom de la fonction.</li>
- <li>Une liste d'arguments à passer à la fonction, entre parenthèses et séparés par des virgules.</li>
- <li>Les instructions JavaScript définissant la fonction, entre accolades, <code>{ }</code>.</li>
-</ul>
-
-<p>Le code suivant, par exemple, définit une fonction intitulée <code>carré</code> :</p>
-
-<pre class="brush: js">function carré(nombre) {
-  return nombre * nombre;
-}
-</pre>
-
-<p>La fonction <code>carré</code> prend un seul argument, appelé <code>nombre</code>. La fonction est composée d'une seule instruction qui renvoie l'argument de la fonction (<code>nombre</code>) multiplié par lui-même. L'instruction <a href="/fr/docs/Web/JavaScript/Reference/Instructions/return"><code>return</code></a> spécifie la valeur qui est renvoyée par la fonction.</p>
-
-<pre class="brush: js">return nombre * nombre;
-</pre>
-
-<p>Les paramètres primitifs (comme les nombres) sont passés à la fonction <strong>par valeur</strong>. La valeur est passée à la fonction mais si cette dernière change la valeur du paramètre, cela n'aura pas d'impact au niveau global ou au niveau de ce qui a appelé la fonction.</p>
-
-<p>Si l'argument passé à la fonction est un objet (une valeur non-primitive, comme un objet {{jsxref("Array")}} ou un objet défini par l'utilisateur), et que la fonction change les propriétés de cet objet, ces changements seront visibles en dehors de la fonction. Par exemple :</p>
-
-<pre class="brush: js">function maFonction(monObjet) {
-  monObjet.fabricant = "Toyota";
-}
-
-var mavoiture = {fabricant: "Honda", modèle: "Accord", année: 1998};
-var x, y;
-
-x = mavoiture.fabricant;     // x aura la valeur "Honda"
-
-maFonction(mavoiture);
-y = mavoiture.fabricant; // y aura la valeur "Toyota"
-                         // (la propriété fabricant a été modifiée par la fonction)
-</pre>
-
-<div class="note">
-<p><strong>Note :</strong> Affecter un nouvel objet au paramètre n'aura <strong>pas</strong> d'effet en dehors de la fonction car cela revient à changer la valeur du paramètre plutôt que la valeur d'une des propriétés de l'objet. Par exemple :</p>
-</div>
-
-<pre class="brush: js">function maFonction(monObjet) {
-  monObjet = {fabricant: "Ford", modèle: "Focus", année: 2006};
-}
-
-var mavoiture = {fabricant: "Honda", modèle: "Accord", année: 1998};
-var x, y;
-
-x = mavoiture.fabricant;     // x reçoit la valeur "Honda"
-
-maFonction(mavoiture);
-y = mavoiture.fabricant;     // y reçoit la valeur "Honda"
-</pre>
-
-<p>Dans le premier exemple, l'objet <code>mavoiture </code>était passé à la fonction <code>maFonction</code> qui le modifiait. Dans le second exemple, la fonction n'a pas modifié l'objet qui avait été passé en argument, elle a créé une nouvelle variable locale, possédant le même nom que l'objet global passé en argument : il n'y a donc pas de modifications sur cet objet global.</p>
-
-<h3 id="Les_expressions_de_fonction">Les expressions de fonction</h3>
-
-<p>Syntaxiquement, la déclaration de fonction utilisée ci-dessus est une instruction. On peut également créer une fonction grâce à une <strong><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_function">expression de fonction</a></strong>. De telles fonctions peuvent être <strong>anonymes</strong> (ne pas avoir de nom correspondant). La fonction <code>carré </code>aurait pu être définie de la façon suivante :</p>
-
-<pre class="brush: js">var carré = function (nombre) { return nombre * nombre };
-var x = carré(4); //x reçoit la valeur 16</pre>
-
-<p>Cependant, un nom peut être utilisé dans une expression de fonction, ce afin de l'utiliser dans la fonction (récursivité) ou afin de l'identifier dans les appels tracés par un éventuel débogueur :</p>
-
-<pre class="brush: js">var factorielle = function fac(n) { return n &lt; 2 ? 1 : n * fac(n - 1) };
-
-console.log(factorielle(3));
-</pre>
-
-<p>Les expressions de fonction sont pratiques lorsqu'il s'agit de passer une fonction comme argument d'une autre fonction. Dans l'exemple qui suit, la fonction <code>map</code> est définie et appelée avec une fonction anonyme comme premier argument :</p>
-
-<pre class="brush: js">function map(f, a) {
-  var resultat = []; // Créer un nouveau tableau Array
-  for (var i = 0; i != a.length; i++)
-    resultat[i] = f(a[i]);
-  return resultat;
-}
-</pre>
-
-<p>Le code suivant applique la fonction <code>cube</code> sur chacun des éléments du tableau :</p>
-
-<pre class="brush: js">var cube = function(x) { return x * x * x}; // Une expression de fonction
-map(cube, [0, 1, 2, 5, 10]);
-</pre>
-
-<p>Le résultat de la dernière instruction est le tableau [0, 1, 8, 125, 1000].</p>
-
-<p>En JavaScript, une fonction peut être définie selon une condition. Le fragment de code qui suit définit une fonction seulement si <code>num</code> vaut 0 :</p>
-
-<pre class="brush: js">var maFonction;
-if (num === 0){
-  maFonction = function(monObjet) {
-    monObjet.fabricant = "Toyota"
-  }
-}</pre>
-
-<p>Une autre façon de définir des fonctions est d'utiliser le constructeur de l'objet {{jsxref("Function")}} afin de créer des fonctions à partir d'une chaîne lors de l'exécution, de la même façon que {{jsxref("Objets_globaux/eval", "eval()")}}.</p>
-
-<p>Une <strong>méthode</strong> est une fonction étant une propriété d'un objet. Vous trouverez plus de détails sur ces éléments dans le chapitre suivant du guide : <a href="/fr/docs/JavaScript/Guide/Utiliser_les_objets">Utiliser les objets</a>.</p>
-
-<h2 id="Appeler_des_fonctions">Appeler des fonctions</h2>
-
-<p>La seule définition d'une fonction ne permet pas d'exécuter la fonction. Cela permet de lui donner un nom et de définir ce qui doit être fait lorsque la fonction est appelée. <strong>Appeler</strong> la fonction permet d'effectuer les actions des instructions avec les paramètres indiqués. Par exemple, si on définit la fonction <code>carré</code>, on peut l'appeler de la façon suivante :</p>
-
-<pre class="brush: js">carré(5);
-</pre>
-
-<p>Cette instruction appellera la fonction avec un argument valant 5. La fonction exécute ses instructions et renvoie la valeur 25.</p>
-
-<p>Les fonctions doivent appartenir à la portée dans laquelle elles sont appelées. En revanche, la déclaration d'une fonction peut être faite après l'appel :</p>
-
-<pre class="brush: js">console.log(carré(5));
-/* ... */
-function carré(n) { return n*n }
-</pre>
-
-<p>La portée d'une fonction est la fonction dans laquelle elle est déclarée ou le programme entier si elle est déclarée au niveau le plus haut.</p>
-
-<div class="note">
-<p><strong>Note :</strong> Cela ne fonctionne que si la définition de la fonction utilise la syntaxe précédente (<code>function nomFonction(){}</code>). Le code ci-dessous ne fonctionnera pas :</p>
-</div>
-
-<pre class="example-bad brush: js">console.log(carré); // La fonction carré est remontée/hoisted mais vaut undefined
-console.log(carré(5)); // TypeError: carré is not a function
-var carré = function (n) {
-  return n * n;
-}
-
-// Et avec let...
-
-console.log(carré2); // ReferenceError: carré2 is not defined
-console.log(carré2(5)); // TypeError: carré2 is not a function
-
-let carré2 = function (n) {
-  return n * n;
-}
-</pre>
-
-<p>Les arguments d'une fonction ne sont pas limités aux chaînes de caractères et aux nombres. Il est possible de passer des objets. La fonction <code>show_props</code> (définie dans le chapitre sur <a href="/fr/docs/JavaScript/Guide/Utiliser_les_objets">l'utilisation des objets</a>) est un exemple de fonction utilisant un argument qui est un objet.</p>
-
-<p>Une fonction peut être récursive, c'est-à-dire qu'elle peut s'appeler elle-même. Voici la fonction qui calcule récursivement la factorielle d'un nombre :</p>
-
-<pre class="brush: js">function factorielle(n){
-  if ((n === 0) || (n === 1))
-    return 1;
-  else
-    return (n * factorielle(n - 1));
-}
-</pre>
-
-<p>On peut ensuite calculer les factorielles des nombres 1 à 5 :</p>
-
-<pre class="brush: js">var a, b, c, d, e;
-a = factorielle(1); // a reçoit la valeur 1
-b = factorielle(2); // b reçoit la valeur 2
-c = factorielle(3); // c reçoit la valeur 6
-d = factorielle(4); // d reçoit la valeur 24
-e = factorielle(5); // e reçoit la valeur 120
-</pre>
-
-<p>Il existe d'autres façons d'appeler des fonctions. Il existe souvent des cas où une fonction doit être appelée dynamiquement, où le nombre d'arguments peut varier, où le contexte de l'appel d'une fonction doit être créé en fonction d'un objet déterminé lors de l'exécution. Les fonctions sont des objets, en tant que tels, elles possèdent des méthodes (voir la page sur l'objet {{jsxref("Function")}}). L'une d'entre elles, {{jsxref("Function.apply","apply()")}} peut être utilisée pour réaliser le dernier cas de figure (exécution d'une fonction avec un objet déterminé à l'exécution).</p>
-
-<h2 id="Portée_d'une_fonction">Portée d'une fonction</h2>
-
-<p>On ne peut pas accéder aux variables définies dans une fonction en dehors de cette fonction : ces variables n'existent que dans la portée de la fonction. En revanche, une fonction peut accéder aux différentes variables et fonctions qui appartiennent à la portée dans laquelle elle est définie. Une fonction définie dans une autre fonction peut également accéder à toutes les variables de la fonction « parente » et à toute autre variable accessible depuis la fonction « parente ».</p>
-
-<pre class="brush: js">// Les variables suivantes sont globales
-var num1 = 20,
-    num2 = 3,
-    nom = "Licorne";
-
-// Cette fonction est définie dans la portée globale
-function multiplier() {
-  return num1 * num2;
-}
-
-multiplier(); // Renvoie 60
-
-// Un exemple de fonction imbriquée
-function getScore () {
-  var num1 = 2,
-      num2 = 3;
-
-  function ajoute() {
-    return nom + " a marqué " + (num1 + num2);
-  }
-
-  return ajoute();
-}
-
-getScore(); // Renvoie "Licorne a marqué 5"
-</pre>
-
-<h2 id="Portée_et_pile_de_fonctions">Portée et pile de fonctions</h2>
-
-<h3 id="La_récursivité">La récursivité</h3>
-
-<p>Une fonction peut faire référence à elle-même et s'appeler elle-même. Il existe trois moyens pour qu'une fonction fasse référence à elle-même :</p>
-
-<ol>
- <li>Le nom de la fonction</li>
- <li><code><a href="/fr/docs/Web/JavaScript/Reference/Fonctions/arguments/callee">arguments.callee</a></code></li>
- <li>Une variable de la portée qui fait référence à la fonction</li>
-</ol>
-
-<p>Par exemple, avec la définition de fonction suivante :</p>
-
-<pre class="brush: js">var toto = function truc() {
-   // les instructions de la fonction
-};</pre>
-
-<p>Dans le corps de la fonction, ces trois éléments seront équivalents :</p>
-
-<ol>
- <li><code>truc()</code></li>
- <li><code>arguments.callee()</code></li>
- <li><code>toto()</code></li>
-</ol>
-
-<p>Une fonction qui s'appelle elle-même est appelée une fonction <em>récursive</em>. Sous certains aspects, une récursion est semblable à une boucle : toutes les deux exécutent le même code plusieurs fois et toutes les deux requièrent une condition d'arrêt (pour éviter une boucle ou une récursion infinie). Par exemple, ce fragment de code utilisant une boucle :</p>
-
-<pre class="brush: js">var x = 0;
-while (x &lt; 10) { // "x &lt; 10" représente la condition d'arrêt
-  // faire quelque chose
-  x++;
-}</pre>
-
-<p>pourra être converti en une fonction récursive de la façon suivante :</p>
-
-<pre class="brush: js">function boucle(x) {
-  if (x &gt;= 10) // "x &gt;= 10" représente la condition d'arrêt (équivalent à "!(x &lt; 10)")
-    return;
-  // faire quelque chose
-  boucle(x + 1); // l'appel récursif
-}
-boucle(0);</pre>
-
-<p>Malgré cela, certains algorithmes ne peuvent pas être convertis en boucles itératives. Ainsi, récupérer l'ensemble des nœuds d'un arbre (le <a href="/fr/docs/Web/API/Référence_du_DOM_Gecko">DOM</a> par exemple) se fait plus simplement en utilisant la récursivité :</p>
-
-<pre class="brush: js">function parcourirArbre(noeud) {
-  if (noeud === null) //
-    return;
-  // faire quelque chose avec le noeud
-  for (var i = 0; i &lt; noeud.childNodes.length; i++) {
-    parcourirArbre(noeud.childNodes[i]);
-  }
-}</pre>
-
-<p>Contrairement à l'exemple précédent avec la fonction <code>boucle</code>, ici, chaque appel récursif entraîne lui-même plusieurs appels (et non un seul).</p>
-
-<p>Théoriquement, il est possible de convertir tout algorithme récursif en un algorithme non récursif (avec des boucles par exemple). Généralement, la logique obtenue est plus complexe et nécessite l'utilisation d'une <a href="https://fr.wikipedia.org/wiki/Pile_%28informatique%29">pile</a>. La récursivité utilise également une pile, la pile de fonction.</p>
-
-<p>Ce type de « comportement » peut-être observé avec l'exemple suivant :</p>
-
-<pre class="brush: js">function toto(i) {
-  if (i &lt; 0)
-    return;
-  console.log('début : ' + i);
-  toto(i - 1);
-  console.log('fin : ' + i);
-}
-toto(3);</pre>
-
-<p>qui affichera :</p>
-
-<pre class="brush: js">début : 3
-début : 2
-début : 1
-début : 0
-fin : 0
-fin : 1
-fin : 2
-fin : 3</pre>
-
-<h3 id="Fonctions_imbriquées_et_fermetures">Fonctions imbriquées et fermetures</h3>
-
-<p>Il est possible d'imbriquer une fonction dans une autre fonction. La portée de la fonction fille (celle qui est imbriquée) n'est pas contenue dans la portée de la fonction parente. En revanche, la fonction fille bénéficie bien des informations de la fonction parente grâce à sa portée. On a ce qu'on appelle une fermeture (<em>closure</em> en anglais). Une fermeture est une expression (généralement une fonction) qui accède à des variables libres ainsi qu'à un environnement qui lie ces variables (ce qui « ferme » l'expression).</p>
-
-<p>Une fonction imbriquée étant une fermeture, cela signifie qu'une fonction imbriquée peut en quelque sorte hériter des arguments et des variables de la fonction parente.</p>
-
-<p>En résumé :</p>
-
-<ul>
- <li>La fonction imbriquée ne peut être utilisée qu'à partir des instructions de la fonction parente.</li>
-</ul>
-
-<ul>
- <li>La fonction imbriquée forme une fermeture : elle peut utiliser les arguments et les variables de la fonction parente. En revanche, la fonction parente ne peut pas utiliser les arguments et les variables de la fonction fille.</li>
-</ul>
-
-<div class="note">
-<p><strong>Note :</strong> Sur les fermetures, voir également <a href="/fr/docs/Web/JavaScript/Closures">l'article à ce sujet</a>.</p>
-</div>
-
-<p>L'exemple qui suit illustre l'imbrication de fonctions :</p>
-
-<pre class="brush: js">function ajouteCarrés(a, b) {
-  function carré(x) {
-    return x * x;
-  }
-  return carré(a) + carré(b);
-}
-a = ajouteCarrés(2,3); // renvoie 13
-b = ajouteCarrés(3,4); // renvoie 25
-c = ajouteCarrés(4,5); // renvoie 41</pre>
-
-<p>La fonction interne étant une fermeture, on peut appeler la fonction parente afin de définir les arguments pour la fonction englobante et ceux de la fonction fille :</p>
-
-<pre class="brush: js">function parente(x) {
-  function fille(y) {
-    return x + y;
-  }
-  return fille;
-}
-fn_fille = parente(3); // Fournit une fonction qui ajoute 3 à ce qu'on lui donnera
-résultat = fn_fille(5); // renvoie 8
-
-résultat1 = parente(3)(5); // renvoie 8</pre>
-
-<h3 id="Préservation_des_variables">Préservation des variables</h3>
-
-<p>Dans l'exemple précédent, <code>x</code> a été « préservé » lorsque la fonction <code>fille</code> a été renvoyée. Une fermeture conserve les arguments et les variables de chaque portée qu'elle référence. Chaque appel à la fonction parente pouvant fournir un contexte différents selon les arguments, cela entraînera la création d'une nouvelle fermeture. La mémoire associée ne pourra être libérée que lorsque la fonction <code>fille</code> ne sera plus accessible.</p>
-
-<p>Ce mode de fonctionnement n'est pas différent de celui des références vers les objets. Cependant, il est souvent plus compliqué à détecter car les références ne sont pas définies explicitement dans le code et car il n'est pas possible de les inspecter.</p>
-
-<h3 id="Imbriquer_plusieurs_fonctions">Imbriquer plusieurs fonctions</h3>
-
-<p>Il est possible d'imbriquer des fonctions sur plus de deux niveaux, par exemple, on peut avoir une fonction A qui contient une fonction B qui contient une fonction C. Les fonctions B et C sont des fermetures et B peut accéder à la portée de A, C peut accéder à la portée de B. Ainsi, C accède à la portée de B qui lui accède à la portée de A, C accède donc à la portée de A (transitivité). Les fermetures peuvent donc contenir plusieurs portées, c'est ce qu'on appelle le <em>chaînage</em> de portées.</p>
-
-<p>Par exemple :</p>
-
-<pre class="brush: js">function A(x) {
-  function B(y) {
-    function C(z) {
-      console.log(x + y + z);
-    }
-    C(3);
-  }
-  B(2);
-}
-A(1); // affichera 6 (1 + 2 + 3)</pre>
-
-<p>Dans cet exemple <code>C</code> accède au <code>y</code> de <code>B</code> et au <code>x</code> de <code>A</code>. Ceci est rendu possible car :</p>
-
-<ol>
- <li><code>B</code> est une fermeture qui contient <code>A</code>, autrement dit <code>B</code> peut accéder aux arguments et aux variables de <code>A</code>.</li>
- <li><code>C</code> est une fermeture qui contient <code>B</code>.</li>
- <li>La fermeture de <code>B</code> contient <code>A</code> donc la fermeture de <code>C</code> contient <code>A</code>, <code>C</code> peut ainsi accéder aux arguments et aux variables de <code>B</code> <em>et</em> <code>A</code>. On dit que <code>C</code> <em>chaîne</em> les portées de <code>B</code> et de <code>A</code> (dans cet ordre).</li>
-</ol>
-
-<p>La réciproque n'est pas vraie. <code>A</code> ne peut pas accéder à <code>C</code>, car <code>A</code> ne peut pas accéder aux arguments ou aux variables de <code>B</code>, or <code>C</code> est une variable de <code>B</code>. De cette façon, <code>C</code> reste privée en dehors de <code>B</code>.</p>
-
-<h3 id="Conflits_de_nommage">Conflits de nommage</h3>
-
-<p>Lorsque deux arguments ou variables des portées d'une fermeture ont le même nom, il y a un conflit de noms. Dans ces cas, ce sera la portée la plus imbriquée qui prendra la priorité sur le nom, la portée la plus « externe » aura la priorité la plus faible pour les noms de variables. Du point de vue de la chaîne des portées, la première portée sur la chaîne est la portée la plus imbriquée et la dernière est la portée située le plus à l'extérieur :</p>
-
-<pre class="brush: js">function externe() {
-  var x = 10;
-  function interne(x) {
-    return x;
-  }
-  return interne;
-}
-résultat = externe()(20); // renvoie 20 et pas 10</pre>
-
-<p>Le conflit se produit à l'instruction <code>return x</code> entre le paramètre x de la fonction <code>interne</code> et la variable <code>x</code> de la fonction <code>externe</code>. La chaîne de portée est ici {<code>interne</code>, <code>externe</code>, objet global}. Ainsi, le paramètre <code>x</code> de <code>interne</code> a la priorité sur la variable <code>x</code> de la fonction <code>externe</code>, le résultat obtenu est donc 20 et non 10.</p>
-
-<h2 id="Fermetures_(closures)">Fermetures (<em>closures</em>)</h2>
-
-<p>Les fermetures sont l'une des fonctionnalités les plus intéressantes de JavaScript. Comme on l'a vu précédemment, JavaScript permet d'imbriquer des fonctions et la fonction interne aura accès aux variables et paramètres de la fonction parente. À l'inverse, la fonction parente ne pourra pas accéder aux variables liées à la fonction interne. Cela fournit une certaine sécurité pour les variables de la fonction interne. De plus, si la fonction interne peut exister plus longtemps que la fonction parente, les variables et fonctions de la fonction parente pourront exister au travers de la fonction interne. On crée une fermeture lorsque la fonction interne est disponible en dehors de la fonction parente.</p>
-
-<pre class="brush: js">var animal = function(nom) {   // La fonction externe utilise un paramètre "nom"
-  var getNom = function () {
-    return nom;                // La fonction interne accède à la variable "nom" de la fonction externe
-  }
-  return getNom;               // Renvoie la fonction interne pour la rendre disponible en dehors de la portée de la fonction parente
-}
-
-monAnimal = animal("Licorne");
-
-monAnimal();                   // Renvoie "Licorne"</pre>
-
-<p>Bien entendu, dans la pratique, les cas peuvent être plus complexes. On peut renvoyer un objet qui contient des méthodes manipulant les variables internes de la fonction parente.</p>
-
-<pre class="brush: js">var créerAnimal  = function (nom) {
-  var sexe;
-
-  return {
-    setNom: function(nouveauNom) {
-      nom = nouveauNom;
-    },
-
-    getNom: function () {
-      return nom;
-    },
-
-    getSexe: function () {
-      return sexe;
-    },
-
-    setSexe: function(nouveauSexe) {
-      if (typeof nouveauSexe == "string" &amp;&amp; (nouveauSexe.toLowerCase() == "mâle" || nouveauSexe.toLowerCase() == "femelle")) {
-        sexe = nouveauSexe;
-      }
-    }
-  }
-}
-
-var animal = créerAnimal("Licorne");
-animal.getNom();        // Licorne
-
-animal.setNom("Bobby");
-animal.setSexe("mâle");
-animal.getSexe();       // mâle
-animal.getNom();        // Bobby</pre>
-
-<p>Dans le code précédent, la variable <code>nom</code> est de la fonction externe est accessible depuis les fonctions internes. Il est impossible d'accéder aux variables internes en dehors des fonctions internes. Les variables internes agissent comme des coffres-forts pour les fonctions internes. Elles permettent d'avoir un accès persistent et encapsulé aux données internes. Pour les fonctions, il n'est pas nécessaire de les affecter à une variable ou même de les nommer.</p>
-
-<pre class="brush: js">var getCode = (function (){
-  var codeAPI = "0]Eal(eh&amp;2";    // Un code qu'on ne souhaite pas diffuser ni modifier
-
-  return function () {
-    return codeAPI;
-  };
-})();
-
-getCode();    // Renvoie la valeur du code</pre>
-
-<p>Il y a malgré tout quelques pièges auxquels il faut faire attention lorsqu'on utilise les fermetures. Si une fonction imbriquée définit une variable avec le même nom que le nom d'une variable de la portée externe, il n'y aura plus aucun moyen d'accéder à la variable.</p>
-
-<pre class="brush: js">var créerAnimal = function(nom) {  // La fonction externe définit une variable appelée "nom"
-  return {
-    setNom: function(nom) {    // La fonction imbriquée définit une variable appelée "nom"
-      nom = nom;               // ??? comment accéder à la variable "nom" définie par la fonction externe
-    }
-  }
-}</pre>
-
-<p>L<code>'opérateur </code><a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/L_op%C3%A9rateur_this"><code>this</code></a> doit être traité avec précaution dans les fermetures. Attention, <code>this</code> fait référence au contexte où la fonction est appelée et non à l'endroit où il est défini.</p>
-
-<h2 id="Utiliser_l'objet_arguments">Utiliser l'objet <code>arguments</code></h2>
-
-<p>Les arguments d'une fonction sont maintenus dans un objet semblable à un tableau. Dans une fonction, il est possible d'utiliser les arguments passés à la fonction de la façon suivante :</p>
-
-<pre class="brush: js">arguments[i]</pre>
-
-<p>où <code>i</code> représente l'index ordinal de l'argument (le premier argument ayant un indice à 0). On accède donc au premier argument avec <code>arguments[0]</code>. Le nombre total d'arguments est fourni grâce à <code>arguments.length</code>.</p>
-
-<p>En utilisant l'objet <code>arguments</code>, il est possible de recenser les arguments supplémentaires fournis à la fonction si jamais il y a plus d'arguments fournis que requis. Cet objet est souvent utile si on ne connaît pas le nombre d'arguments passés à la fonction. La propriété <code>arguments.length</code> permet de déterminer le nombre d'arguments réellement passés à la fonction. On peut donc ensuite accéder aux différents arguments en parcourant l'objet <code>arguments</code>.</p>
-
-<p>Par exemple, on peut construire une fonction qui concatène plusieurs chaînes. Le seul argument formellement défini sera la chaîne utilisée pour concaténer les différentes chaînes. On peut définir la fonction de la façon suivante :</p>
-
-<pre class="brush: js">function monConcat(séparateur) {
-   var result = ""; // on initialise la liste
-   var i;
-   // on parcourt les arguments
-   for (i = 1; i &lt; arguments.length; i++) {
-      result += arguments[i] + séparateur;
-   }
-   return result;
-}</pre>
-
-<p>On peut passer autant d'arguments que nécessaire à cette fonction. Ils seront tous concaténés dans une chaîne finale. Ainsi, on aura :</p>
-
-<pre class="brush: js">// renverra "rouge, orange, bleu, "
-monConcat(", ", "red", "orange", "blue");
-
-// renverra "éléphant; girafe; lion; singe; "
-monConcat("; ", "éléphant", "girafe", "lion", "singe");
-
-// renverra "sauge. basilic. origan. poivre. échalotte. "
-monConcat(". ", "sauge", "basilic", "origan", "poivre", "échalotte");</pre>
-
-<div class="note">
-<p><strong>Note :</strong> <code>arguments</code> est une variable « semblable » à un tableau. Mais ce n'est pas un tableau au sens strict. En effet, il possède un index numéroté ainsi qu'une propriété <code>length</code>. En revanche, il ne possède pas les méthodes classiques de manipulation des tableaux (Array).</p>
-</div>
-
-<p>Voir la page sur l'objet {{jsxref("Function")}} dans la référence JavaScript pour plus d'informations.</p>
-
-<h2 id="Paramètres_des_fonctions">Paramètres des fonctions</h2>
-
-<p>À partir d'ECMAScript 2015, deux sortes de paramètres sont introduites : les paramètres par défaut et les paramètres du reste.</p>
-
-<h3 id="Les_paramètres_par_défaut">Les paramètres par défaut</h3>
-
-<p>En JavaScript, par défaut, les paramètres des fonctions vaudront <code>undefined</code>. Il peut toutefois être utile de définir une valeur par défaut différente. Les paramètres par défaut permettent de répondre à ce besoin.</p>
-
-<p>Avant ECMAScript 2015, la stratégie pour manipuler des valeurs par défaut adaptées était de tester si la valeur du paramètre était indéfinie puis de lui affecter la valeur souhaitée si c'était le cas. Par exemple, dans le code qui suit, on ne fournit pas de valeur pour <code>b</code> dans l'appel, la valeur sera <code>undefined</code> lors de l'évaluation de <code>a*b</code> et l'appel à <code>multiplier</code> aurait renvoyé <code>NaN</code>. Pour éviter ça, la deuxième ligne définit une valeur par défaut au cas où <code>b</code> n'est pas renseigné :</p>
-
-<pre class="brush: js">function multiplier(a, b) {
-  b = typeof b !== 'undefined' ?  b : 1;
-
-  return a*b;
-}
-
-multiplier(5); // 5
-</pre>
-
-<p>Si on peut utiliser les paramètres par défaut, il n'est plus nécessaire de faire l'opération à l'intérieur du corps de la fonction, il suffit de déclarer que la valeur par défaut pour <code>b</code> est 1 dans la signature de la fonction :</p>
-
-<pre class="brush: js">function multiplier(a, b = 1) {
-  return a*b;
-}
-
-multiplier(5); // 5</pre>
-
-<p>Pour plus de détails, voir <a href="/fr/docs/Web/JavaScript/Reference/Fonctions/Valeurs_par_défaut_des_arguments">la page sur les paramètres par défaut</a> dans la référence.</p>
-
-<h3 id="Les_paramètres_du_reste">Les paramètres du reste</h3>
-
-<p>La syntaxe des <a href="/fr/docs/Web/JavaScript/Reference/Fonctions/paramètres_du_reste">paramètres du reste</a> permet de représenter un nombre indéfini d'arguments contenus dans un tableau. Dans l'exemple suivant, on utilise les paramètres du reste pour collecter les arguments à partir du deuxième et jusqu'au dernier. Ces arguments sont multipliés par le premier. Dans cet exemple, on utilise une fonction fléchée, concept qui est présenté et illustré dans la section qui suit.</p>
-
-<pre class="brush: js">function multiplier(facteur, ...lesArgs) {
-  return lesArgs.map(x =&gt; facteur * x);
-}
-
-var arr = multiplier(2, 1, 2, 3);
-console.log(arr); // [2, 4, 6]</pre>
-
-<h2 id="Fonctions_fléchées">Fonctions fléchées</h2>
-
-<p><a href="/fr/docs/Web/JavaScript/Reference/Fonctions/Fonctions_fléchées">Une expression de fonction fléchée</a> permet d'utiliser une syntaxe plus concise que les expressions de fonctions classiques. Une telle fonction ne possède alors pas de valeur propre pour <code><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_this">this</a></code>, <code><a href="/fr/docs/Web/JavaScript/Reference/Fonctions/arguments">arguments</a></code>, <code><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/super">super</a></code> ou <code><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/new.target">new.target</a></code>. Les fonctions fléchées sont nécessairement anonymes.</p>
-
-<p>Les fonctions fléchées ont été introduites pour deux raisons principales : une syntaxe plus courte et l'absence de <code>this</code> rattaché à la fonction. Voir aussi <a href="https://tech.mozfr.org/post/2015/06/10/ES6-en-details-%3A-les-fonctions-flechees">ce billet sur tech.mozfr.org sur les fonctions fléchées</a>.</p>
-
-<p> </p>
-
-<p> </p>
-
-<h3 id="Concision_de_la_syntaxe">Concision de la syntaxe</h3>
-
-<p>Dans certaines constructions fonctionnelles, on peut apprécier une syntaxe courte. Par exemple, si on compare les deux dernières lignes de ce fragment de code :</p>
-
-<pre class="brush: js">var a = [
-  "Hydrogen",
-  "Helium",
-  "Lithium",
-  "Beryl­lium"
-];
-
-var a2 = a.map(function(s){ return s.length });
-console.log(a2); // affiche [8, 6, 7, 9]
-var a3 = a.map( s =&gt; s.length );
-console.log(a3); // affiche [8, 6, 7, 9]</pre>
-
-<h3 id="Pas_de_this_distinct">Pas de <code>this</code> distinct</h3>
-
-<p>Avant les fonctions fléchées, chaque nouvelle fonction définissait sa propre valeur <code><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_this">this</a></code> (un nouvel objet dans le cas d'un constructeur, <code>undefined</code> lors des appels en <a href="/fr/docs/Web/JavaScript/Reference/Strict_mode">mode strict</a>, l'objet courant dans le cas d'une méthode, etc.). Cela pouvait poser quelques problèmes avec un style de programmation orienté objet.</p>
-
-<pre class="brush: js">function Personne() {
-  // Le constructeur Personne() utilise `this` comme lui-même.
-  this.âge = 0;
-
-  setInterval(function grandir() {
-    // En mode non-strict, la fonction grandir() définit `this`
-    // avec l'objet global, qui est donc différent du `this`
-    // défini par le constructeur Person().
-    this.âge++;
-  }, 1000);
-}
-
-var p = new Personne();</pre>
-
-<p>Avec ECMAScript 3/5, ce problème fut résolu avec l'affectation de la valeur de <code>this</code> dans une variable a variable that could be closed over.</p>
-
-<pre class="brush: js">function Personne() {
-  var self = this; // Certains utilisent `that`, d'autres `self`.
-                   // On utilisera l'un des deux et on pas
-                   // l'autre pour être cohérent.
-  self.âge = 0;
-
-  setInterval(function grandir() {
-    // La fonction callback fait référence à la variable `self`
-    // qui est bien la valeur attendue liée à l'objet.
-    self.âge++;
-  }, 1000);
-}</pre>
-
-<p>On aurait aussi pu créer une fonction liée afin que la « bonne » valeur de <code>this</code> soit passée à la fonction <code>grandir()</code>.</p>
-
-<p>Les fonctions fléchées capturent la valeur de <code>this</code> dans le contexte englobant et cela permet de manipuler la valeur pertinente ici :</p>
-
-<pre class="brush: js">function Personne(){
-  this.âge = 0;
-
-  setInterval(() =&gt; {
-    this.âge++; // this fait référence à l'objet personne
-  }, 1000);
-}
-
-var p = new Personne();</pre>
-
-<h2 id="Fonctions_prédéfinies">Fonctions prédéfinies</h2>
-
-<p>JavaScript possède plusieurs fonctions natives, disponibles au plus haut niveau :</p>
-
-<dl>
- <dt>{{jsxref("Objets_globaux/eval","eval()")}}</dt>
- <dd>
- <p>La fonction <code><strong>eval()</strong></code> permet d'évaluer du code JavaScript contenu dans une chaîne de caractères.</p>
- </dd>
- <dt>{{jsxref("Objets_globaux/uneval","uneval()")}} {{non-standard_inline}}</dt>
- <dd>
- <p>La fonction <code><strong>uneval()</strong></code> crée une représentation sous la forme d'une chaîne de caractères pour le code source d'un objet.</p>
- </dd>
- <dt>{{jsxref("Objets_globaux/isFinite","isFinite()")}}</dt>
- <dd>
- <p>La fonction <code><strong>isFinite()</strong></code> détermine si la valeur passée est un nombre fini. Si nécessaire, le paramètre sera converti en un nombre.</p>
- </dd>
- <dt>{{jsxref("Objets_globaux/isNaN","isNaN()")}}</dt>
- <dd>
- <p>La fonction <code><strong>isNaN()</strong></code> détermine si une valeur est {{jsxref("NaN")}} ou non. Note : On pourra également utiliser {{jsxref("Number.isNaN()")}} défini avec ECMAScript 6 ou utiliser <code><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_typeof">typeof</a></code> afin de déterminer si la valeur est <em><strong>N</strong>ot-<strong>A</strong>-<strong>N</strong>umber</em>.</p>
- </dd>
- <dt>{{jsxref("Objets_globaux/parseFloat","parseFloat()")}}</dt>
- <dd>
- <p>La fonction <code><strong>parseFloat()</strong></code> convertit une chaîne de caractères en un nombre flottant.</p>
- </dd>
- <dt>{{jsxref("Objets_globaux/parseInt","parseInt()")}}</dt>
- <dd>
- <p>La fonction <code><strong>parseInt()</strong></code> convertit une chaîne de caractères et renvoie un entier dans la base donnée.</p>
- </dd>
- <dt>{{jsxref("Objets_globaux/decodeURI","decodeURI()")}}</dt>
- <dd>
- <p>La fonction <code><strong>decodeURI()</strong></code> décode un Uniform Resource Identifier (URI) créé par {{jsxref("Objets_globaux/encodeURI","encodeURI()")}} ou une méthode similaire.</p>
- </dd>
- <dt>{{jsxref("Objets_globaux/decodeURIComponent","decodeURIComponent()")}}</dt>
- <dd>
- <p>La fonction <code><strong>decodeURIComponent()</strong></code> décode un composant d'un Uniform Resource Identifier (URI) créé par {{jsxref("Objets_globaux/encodeURIComponent","encodeURIComponent")}} ou une méthode similaire.</p>
- </dd>
- <dt>{{jsxref("Objets_globaux/encodeURI","encodeURI()")}}</dt>
- <dd>
- <p>La fonction <code><strong>encodeURI()</strong></code> encode un Uniform Resource Identifier (URI) en remplaçant chaque exemplaire de certains caractères par un, deux, trois voire quatre séquences d'échappement représentant l'encodage UTF-8 du caractères (quatre séquences seront utilisées uniquement lorsque le caractère est composé d'une paire de deux demi-codets).</p>
- </dd>
- <dt>{{jsxref("Objets_globaux/encodeURIComponent","encodeURIComponent()")}}</dt>
- <dd>
- <p>La fonction <code><strong>encodeURIComponent()</strong></code> encode un composant d'un Uniform Resource Identifier (URI) en remplaçant chaque exemplaire de certains caractères par un, deux, trois voire quatre séquences d'échappement représentant l'encodage UTF-8 du caractères (quatre séquences seront utilisées uniquement lorsque le caractère est composé d'une paire de deux demi-codets).</p>
- </dd>
- <dt>{{jsxref("Objets_globaux/escape","escape()")}} {{deprecated_inline}}</dt>
- <dd>
- <p>La fonction dépréciée <code><strong>escape()</strong></code> calcule une nouvelle chaîne de caractères pour laquelle certains caractères ont été remplacés par leur séquence d'échappement hexadécimale. Les fonctions {{jsxref("Objets_globaux/encodeURI","encodeURI()")}} ou {{jsxref("Objets_globaux/encodeURIComponent","encodeURIComponent()")}} doivent être utilisées à la place.</p>
- </dd>
- <dt>{{jsxref("Objets_globaux/unescape","unescape()")}} {{deprecated_inline}}</dt>
- <dd>
- <p>La fonction dépréciée <code><strong>unescape()</strong></code> calcule une nouvelle chaîne de caractères pour laquelle les séquences d'échappement hexadécimales sont remplacées par les caractères qu'elles représentent. Les séquences d'échappement introduites peuvent provenir d'une fonction telle que {{jsxref("Objets_globaux/escape","escape()")}}. <code>unescape</code> est dépréciée et doit être remplacée par {{jsxref("Objets_globaux/decodeURI","decodeURI()")}} ou {{jsxref("Objets_globaux/decodeURIComponent","decodeURIComponent()")}}.</p>
- </dd>
-</dl>
-
-<p>{{PreviousNext("Web/JavaScript/Guide/Boucles_et_it%C3%A9ration", "Web/JavaScript/Guide/Expressions_et_Op%C3%A9rateurs")}}</p>
diff --git a/files/fr/web/javascript/guide/functions/index.md b/files/fr/web/javascript/guide/functions/index.md
new file mode 100644
index 0000000000..3c909fba2c
--- /dev/null
+++ b/files/fr/web/javascript/guide/functions/index.md
@@ -0,0 +1,691 @@
+---
+title: Fonctions
+slug: Web/JavaScript/Guide/Functions
+tags:
+  - Débutant
+  - Functions
+  - Guide
+  - JavaScript
+translation_of: Web/JavaScript/Guide/Functions
+original_slug: Web/JavaScript/Guide/Fonctions
+---
+{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Boucles_et_it%C3%A9ration", "Web/JavaScript/Guide/Expressions_et_Op%C3%A9rateurs")}}
+
+Les fonctions font partie des briques fondamentales de JavaScript. Une fonction est une procédure JavaScript, un ensemble d'instructions effectuant une tâche ou calculant une valeur. Afin d'utiliser une fonction, il est nécessaire de l'avoir auparavant définie au sein de la portée dans laquelle on souhaite l'appeler.
+
+On pourra également lire [le chapitre de la référence JavaScript sur les fonctions](/fr/docs/Web/JavaScript/Reference/Fonctions) pour étudier plus en détails ce concept
+
+## Définir des fonctions
+
+### Les déclarations de fonctions
+
+Une **définition de fonction** (aussi appelée **déclaration de fonction** ou **instruction de fonction**) est construite avec le mot-clé [`function`](/fr/docs/Web/JavaScript/Reference/Instructions/function), suivi par :
+
+- Le nom de la fonction.
+- Une liste d'arguments à passer à la fonction, entre parenthèses et séparés par des virgules.
+- Les instructions JavaScript définissant la fonction, entre accolades, `{ }`.
+
+Le code suivant, par exemple, définit une fonction intitulée `carré` :
+
+```js
+function carré(nombre) {
+  return nombre * nombre;
+}
+```
+
+La fonction `carré` prend un seul argument, appelé `nombre`. La fonction est composée d'une seule instruction qui renvoie l'argument de la fonction (`nombre`) multiplié par lui-même. L'instruction [`return`](/fr/docs/Web/JavaScript/Reference/Instructions/return) spécifie la valeur qui est renvoyée par la fonction.
+
+```js
+return nombre * nombre;
+```
+
+Les paramètres primitifs (comme les nombres) sont passés à la fonction **par valeur**. La valeur est passée à la fonction mais si cette dernière change la valeur du paramètre, cela n'aura pas d'impact au niveau global ou au niveau de ce qui a appelé la fonction.
+
+Si l'argument passé à la fonction est un objet (une valeur non-primitive, comme un objet {{jsxref("Array")}} ou un objet défini par l'utilisateur), et que la fonction change les propriétés de cet objet, ces changements seront visibles en dehors de la fonction. Par exemple :
+
+```js
+function maFonction(monObjet) {
+  monObjet.fabricant = "Toyota";
+}
+
+var mavoiture = {fabricant: "Honda", modèle: "Accord", année: 1998};
+var x, y;
+
+x = mavoiture.fabricant;     // x aura la valeur "Honda"
+
+maFonction(mavoiture);
+y = mavoiture.fabricant; // y aura la valeur "Toyota"
+                         // (la propriété fabricant a été modifiée par la fonction)
+```
+
+> **Note :** Affecter un nouvel objet au paramètre n'aura **pas** d'effet en dehors de la fonction car cela revient à changer la valeur du paramètre plutôt que la valeur d'une des propriétés de l'objet. Par exemple :
+
+```js
+function maFonction(monObjet) {
+  monObjet = {fabricant: "Ford", modèle: "Focus", année: 2006};
+}
+
+var mavoiture = {fabricant: "Honda", modèle: "Accord", année: 1998};
+var x, y;
+
+x = mavoiture.fabricant;     // x reçoit la valeur "Honda"
+
+maFonction(mavoiture);
+y = mavoiture.fabricant;     // y reçoit la valeur "Honda"
+```
+
+Dans le premier exemple, l'objet `mavoiture `était passé à la fonction `maFonction` qui le modifiait. Dans le second exemple, la fonction n'a pas modifié l'objet qui avait été passé en argument, elle a créé une nouvelle variable locale, possédant le même nom que l'objet global passé en argument : il n'y a donc pas de modifications sur cet objet global.
+
+### Les expressions de fonction
+
+Syntaxiquement, la déclaration de fonction utilisée ci-dessus est une instruction. On peut également créer une fonction grâce à une **[expression de fonction](/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_function)**. De telles fonctions peuvent être **anonymes** (ne pas avoir de nom correspondant). La fonction `carré `aurait pu être définie de la façon suivante :
+
+```js
+var carré = function (nombre) { return nombre * nombre };
+var x = carré(4); //x reçoit la valeur 16
+```
+
+Cependant, un nom peut être utilisé dans une expression de fonction, ce afin de l'utiliser dans la fonction (récursivité) ou afin de l'identifier dans les appels tracés par un éventuel débogueur :
+
+```js
+var factorielle = function fac(n) { return n < 2 ? 1 : n * fac(n - 1) };
+
+console.log(factorielle(3));
+```
+
+Les expressions de fonction sont pratiques lorsqu'il s'agit de passer une fonction comme argument d'une autre fonction. Dans l'exemple qui suit, la fonction `map` est définie et appelée avec une fonction anonyme comme premier argument :
+
+```js
+function map(f, a) {
+  var resultat = []; // Créer un nouveau tableau Array
+  for (var i = 0; i != a.length; i++)
+    resultat[i] = f(a[i]);
+  return resultat;
+}
+```
+
+Le code suivant applique la fonction `cube` sur chacun des éléments du tableau :
+
+```js
+var cube = function(x) { return x * x * x}; // Une expression de fonction
+map(cube, [0, 1, 2, 5, 10]);
+```
+
+Le résultat de la dernière instruction est le tableau \[0, 1, 8, 125, 1000].
+
+En JavaScript, une fonction peut être définie selon une condition. Le fragment de code qui suit définit une fonction seulement si `num` vaut 0 :
+
+```js
+var maFonction;
+if (num === 0){
+  maFonction = function(monObjet) {
+    monObjet.fabricant = "Toyota"
+  }
+}
+```
+
+Une autre façon de définir des fonctions est d'utiliser le constructeur de l'objet {{jsxref("Function")}} afin de créer des fonctions à partir d'une chaîne lors de l'exécution, de la même façon que {{jsxref("Objets_globaux/eval", "eval()")}}.
+
+Une **méthode** est une fonction étant une propriété d'un objet. Vous trouverez plus de détails sur ces éléments dans le chapitre suivant du guide : [Utiliser les objets](/fr/docs/JavaScript/Guide/Utiliser_les_objets).
+
+## Appeler des fonctions
+
+La seule définition d'une fonction ne permet pas d'exécuter la fonction. Cela permet de lui donner un nom et de définir ce qui doit être fait lorsque la fonction est appelée. **Appeler** la fonction permet d'effectuer les actions des instructions avec les paramètres indiqués. Par exemple, si on définit la fonction `carré`, on peut l'appeler de la façon suivante :
+
+```js
+carré(5);
+```
+
+Cette instruction appellera la fonction avec un argument valant 5. La fonction exécute ses instructions et renvoie la valeur 25.
+
+Les fonctions doivent appartenir à la portée dans laquelle elles sont appelées. En revanche, la déclaration d'une fonction peut être faite après l'appel :
+
+```js
+console.log(carré(5));
+/* ... */
+function carré(n) { return n*n }
+```
+
+La portée d'une fonction est la fonction dans laquelle elle est déclarée ou le programme entier si elle est déclarée au niveau le plus haut.
+
+> **Note :** Cela ne fonctionne que si la définition de la fonction utilise la syntaxe précédente (`function nomFonction(){}`). Le code ci-dessous ne fonctionnera pas :
+
+```js example-bad
+console.log(carré); // La fonction carré est remontée/hoisted mais vaut undefined
+console.log(carré(5)); // TypeError: carré is not a function
+var carré = function (n) {
+  return n * n;
+}
+
+// Et avec let...
+
+console.log(carré2); // ReferenceError: carré2 is not defined
+console.log(carré2(5)); // TypeError: carré2 is not a function
+
+let carré2 = function (n) {
+  return n * n;
+}
+```
+
+Les arguments d'une fonction ne sont pas limités aux chaînes de caractères et aux nombres. Il est possible de passer des objets. La fonction `show_props` (définie dans le chapitre sur [l'utilisation des objets](/fr/docs/JavaScript/Guide/Utiliser_les_objets)) est un exemple de fonction utilisant un argument qui est un objet.
+
+Une fonction peut être récursive, c'est-à-dire qu'elle peut s'appeler elle-même. Voici la fonction qui calcule récursivement la factorielle d'un nombre :
+
+```js
+function factorielle(n){
+  if ((n === 0) || (n === 1))
+    return 1;
+  else
+    return (n * factorielle(n - 1));
+}
+```
+
+On peut ensuite calculer les factorielles des nombres 1 à 5 :
+
+```js
+var a, b, c, d, e;
+a = factorielle(1); // a reçoit la valeur 1
+b = factorielle(2); // b reçoit la valeur 2
+c = factorielle(3); // c reçoit la valeur 6
+d = factorielle(4); // d reçoit la valeur 24
+e = factorielle(5); // e reçoit la valeur 120
+```
+
+Il existe d'autres façons d'appeler des fonctions. Il existe souvent des cas où une fonction doit être appelée dynamiquement, où le nombre d'arguments peut varier, où le contexte de l'appel d'une fonction doit être créé en fonction d'un objet déterminé lors de l'exécution. Les fonctions sont des objets, en tant que tels, elles possèdent des méthodes (voir la page sur l'objet {{jsxref("Function")}}). L'une d'entre elles, {{jsxref("Function.apply","apply()")}} peut être utilisée pour réaliser le dernier cas de figure (exécution d'une fonction avec un objet déterminé à l'exécution).
+
+## Portée d'une fonction
+
+On ne peut pas accéder aux variables définies dans une fonction en dehors de cette fonction : ces variables n'existent que dans la portée de la fonction. En revanche, une fonction peut accéder aux différentes variables et fonctions qui appartiennent à la portée dans laquelle elle est définie. Une fonction définie dans une autre fonction peut également accéder à toutes les variables de la fonction « parente » et à toute autre variable accessible depuis la fonction « parente ».
+
+```js
+// Les variables suivantes sont globales
+var num1 = 20,
+    num2 = 3,
+    nom = "Licorne";
+
+// Cette fonction est définie dans la portée globale
+function multiplier() {
+  return num1 * num2;
+}
+
+multiplier(); // Renvoie 60
+
+// Un exemple de fonction imbriquée
+function getScore () {
+  var num1 = 2,
+      num2 = 3;
+
+  function ajoute() {
+    return nom + " a marqué " + (num1 + num2);
+  }
+
+  return ajoute();
+}
+
+getScore(); // Renvoie "Licorne a marqué 5"
+```
+
+## Portée et pile de fonctions
+
+### La récursivité
+
+Une fonction peut faire référence à elle-même et s'appeler elle-même. Il existe trois moyens pour qu'une fonction fasse référence à elle-même :
+
+1.  Le nom de la fonction
+2.  [`arguments.callee`](/fr/docs/Web/JavaScript/Reference/Fonctions/arguments/callee)
+3.  Une variable de la portée qui fait référence à la fonction
+
+Par exemple, avec la définition de fonction suivante :
+
+```js
+var toto = function truc() {
+   // les instructions de la fonction
+};
+```
+
+Dans le corps de la fonction, ces trois éléments seront équivalents :
+
+1.  `truc()`
+2.  `arguments.callee()`
+3.  `toto()`
+
+Une fonction qui s'appelle elle-même est appelée une fonction _récursive_. Sous certains aspects, une récursion est semblable à une boucle : toutes les deux exécutent le même code plusieurs fois et toutes les deux requièrent une condition d'arrêt (pour éviter une boucle ou une récursion infinie). Par exemple, ce fragment de code utilisant une boucle :
+
+```js
+var x = 0;
+while (x < 10) { // "x < 10" représente la condition d'arrêt
+  // faire quelque chose
+  x++;
+}
+```
+
+pourra être converti en une fonction récursive de la façon suivante :
+
+```js
+function boucle(x) {
+  if (x >= 10) // "x >= 10" représente la condition d'arrêt (équivalent à "!(x < 10)")
+    return;
+  // faire quelque chose
+  boucle(x + 1); // l'appel récursif
+}
+boucle(0);
+```
+
+Malgré cela, certains algorithmes ne peuvent pas être convertis en boucles itératives. Ainsi, récupérer l'ensemble des nœuds d'un arbre (le [DOM](/fr/docs/Web/API/Référence_du_DOM_Gecko) par exemple) se fait plus simplement en utilisant la récursivité :
+
+```js
+function parcourirArbre(noeud) {
+  if (noeud === null) //
+    return;
+  // faire quelque chose avec le noeud
+  for (var i = 0; i < noeud.childNodes.length; i++) {
+    parcourirArbre(noeud.childNodes[i]);
+  }
+}
+```
+
+Contrairement à l'exemple précédent avec la fonction `boucle`, ici, chaque appel récursif entraîne lui-même plusieurs appels (et non un seul).
+
+Théoriquement, il est possible de convertir tout algorithme récursif en un algorithme non récursif (avec des boucles par exemple). Généralement, la logique obtenue est plus complexe et nécessite l'utilisation d'une [pile](https://fr.wikipedia.org/wiki/Pile_%28informatique%29). La récursivité utilise également une pile, la pile de fonction.
+
+Ce type de « comportement » peut-être observé avec l'exemple suivant :
+
+```js
+function toto(i) {
+  if (i < 0)
+    return;
+  console.log('début : ' + i);
+  toto(i - 1);
+  console.log('fin : ' + i);
+}
+toto(3);
+```
+
+qui affichera :
+
+```js
+début : 3
+début : 2
+début : 1
+début : 0
+fin : 0
+fin : 1
+fin : 2
+fin : 3
+```
+
+### Fonctions imbriquées et fermetures
+
+Il est possible d'imbriquer une fonction dans une autre fonction. La portée de la fonction fille (celle qui est imbriquée) n'est pas contenue dans la portée de la fonction parente. En revanche, la fonction fille bénéficie bien des informations de la fonction parente grâce à sa portée. On a ce qu'on appelle une fermeture (_closure_ en anglais). Une fermeture est une expression (généralement une fonction) qui accède à des variables libres ainsi qu'à un environnement qui lie ces variables (ce qui « ferme » l'expression).
+
+Une fonction imbriquée étant une fermeture, cela signifie qu'une fonction imbriquée peut en quelque sorte hériter des arguments et des variables de la fonction parente.
+
+En résumé :
+
+- La fonction imbriquée ne peut être utilisée qu'à partir des instructions de la fonction parente.
+
+<!---->
+
+- La fonction imbriquée forme une fermeture : elle peut utiliser les arguments et les variables de la fonction parente. En revanche, la fonction parente ne peut pas utiliser les arguments et les variables de la fonction fille.
+
+> **Note :** Sur les fermetures, voir également [l'article à ce sujet](/fr/docs/Web/JavaScript/Closures).
+
+L'exemple qui suit illustre l'imbrication de fonctions :
+
+```js
+function ajouteCarrés(a, b) {
+  function carré(x) {
+    return x * x;
+  }
+  return carré(a) + carré(b);
+}
+a = ajouteCarrés(2,3); // renvoie 13
+b = ajouteCarrés(3,4); // renvoie 25
+c = ajouteCarrés(4,5); // renvoie 41
+```
+
+La fonction interne étant une fermeture, on peut appeler la fonction parente afin de définir les arguments pour la fonction englobante et ceux de la fonction fille :
+
+```js
+function parente(x) {
+  function fille(y) {
+    return x + y;
+  }
+  return fille;
+}
+fn_fille = parente(3); // Fournit une fonction qui ajoute 3 à ce qu'on lui donnera
+résultat = fn_fille(5); // renvoie 8
+
+résultat1 = parente(3)(5); // renvoie 8
+```
+
+### Préservation des variables
+
+Dans l'exemple précédent, `x` a été « préservé » lorsque la fonction `fille` a été renvoyée. Une fermeture conserve les arguments et les variables de chaque portée qu'elle référence. Chaque appel à la fonction parente pouvant fournir un contexte différents selon les arguments, cela entraînera la création d'une nouvelle fermeture. La mémoire associée ne pourra être libérée que lorsque la fonction `fille` ne sera plus accessible.
+
+Ce mode de fonctionnement n'est pas différent de celui des références vers les objets. Cependant, il est souvent plus compliqué à détecter car les références ne sont pas définies explicitement dans le code et car il n'est pas possible de les inspecter.
+
+### Imbriquer plusieurs fonctions
+
+Il est possible d'imbriquer des fonctions sur plus de deux niveaux, par exemple, on peut avoir une fonction A qui contient une fonction B qui contient une fonction C. Les fonctions B et C sont des fermetures et B peut accéder à la portée de A, C peut accéder à la portée de B. Ainsi, C accède à la portée de B qui lui accède à la portée de A, C accède donc à la portée de A (transitivité). Les fermetures peuvent donc contenir plusieurs portées, c'est ce qu'on appelle le _chaînage_ de portées.
+
+Par exemple :
+
+```js
+function A(x) {
+  function B(y) {
+    function C(z) {
+      console.log(x + y + z);
+    }
+    C(3);
+  }
+  B(2);
+}
+A(1); // affichera 6 (1 + 2 + 3)
+```
+
+Dans cet exemple `C` accède au `y` de `B` et au `x` de `A`. Ceci est rendu possible car :
+
+1.  `B` est une fermeture qui contient `A`, autrement dit `B` peut accéder aux arguments et aux variables de `A`.
+2.  `C` est une fermeture qui contient `B`.
+3.  La fermeture de `B` contient `A` donc la fermeture de `C` contient `A`, `C` peut ainsi accéder aux arguments et aux variables de `B` _et_ `A`. On dit que `C` _chaîne_ les portées de `B` et de `A` (dans cet ordre).
+
+La réciproque n'est pas vraie. `A` ne peut pas accéder à `C`, car `A` ne peut pas accéder aux arguments ou aux variables de `B`, or `C` est une variable de `B`. De cette façon, `C` reste privée en dehors de `B`.
+
+### Conflits de nommage
+
+Lorsque deux arguments ou variables des portées d'une fermeture ont le même nom, il y a un conflit de noms. Dans ces cas, ce sera la portée la plus imbriquée qui prendra la priorité sur le nom, la portée la plus « externe » aura la priorité la plus faible pour les noms de variables. Du point de vue de la chaîne des portées, la première portée sur la chaîne est la portée la plus imbriquée et la dernière est la portée située le plus à l'extérieur :
+
+```js
+function externe() {
+  var x = 10;
+  function interne(x) {
+    return x;
+  }
+  return interne;
+}
+résultat = externe()(20); // renvoie 20 et pas 10
+```
+
+Le conflit se produit à l'instruction `return x` entre le paramètre x de la fonction `interne` et la variable `x` de la fonction `externe`. La chaîne de portée est ici {`interne`, `externe`, objet global}. Ainsi, le paramètre `x` de `interne` a la priorité sur la variable `x` de la fonction `externe`, le résultat obtenu est donc 20 et non 10.
+
+## Fermetures (_closures_)
+
+Les fermetures sont l'une des fonctionnalités les plus intéressantes de JavaScript. Comme on l'a vu précédemment, JavaScript permet d'imbriquer des fonctions et la fonction interne aura accès aux variables et paramètres de la fonction parente. À l'inverse, la fonction parente ne pourra pas accéder aux variables liées à la fonction interne. Cela fournit une certaine sécurité pour les variables de la fonction interne. De plus, si la fonction interne peut exister plus longtemps que la fonction parente, les variables et fonctions de la fonction parente pourront exister au travers de la fonction interne. On crée une fermeture lorsque la fonction interne est disponible en dehors de la fonction parente.
+
+```js
+var animal = function(nom) {   // La fonction externe utilise un paramètre "nom"
+  var getNom = function () {
+    return nom;                // La fonction interne accède à la variable "nom" de la fonction externe
+  }
+  return getNom;               // Renvoie la fonction interne pour la rendre disponible en dehors de la portée de la fonction parente
+}
+
+monAnimal = animal("Licorne");
+
+monAnimal();                   // Renvoie "Licorne"
+```
+
+Bien entendu, dans la pratique, les cas peuvent être plus complexes. On peut renvoyer un objet qui contient des méthodes manipulant les variables internes de la fonction parente.
+
+```js
+var créerAnimal  = function (nom) {
+  var sexe;
+
+  return {
+    setNom: function(nouveauNom) {
+      nom = nouveauNom;
+    },
+
+    getNom: function () {
+      return nom;
+    },
+
+    getSexe: function () {
+      return sexe;
+    },
+
+    setSexe: function(nouveauSexe) {
+      if (typeof nouveauSexe == "string" && (nouveauSexe.toLowerCase() == "mâle" || nouveauSexe.toLowerCase() == "femelle")) {
+        sexe = nouveauSexe;
+      }
+    }
+  }
+}
+
+var animal = créerAnimal("Licorne");
+animal.getNom();        // Licorne
+
+animal.setNom("Bobby");
+animal.setSexe("mâle");
+animal.getSexe();       // mâle
+animal.getNom();        // Bobby
+```
+
+Dans le code précédent, la variable `nom` est de la fonction externe est accessible depuis les fonctions internes. Il est impossible d'accéder aux variables internes en dehors des fonctions internes. Les variables internes agissent comme des coffres-forts pour les fonctions internes. Elles permettent d'avoir un accès persistent et encapsulé aux données internes. Pour les fonctions, il n'est pas nécessaire de les affecter à une variable ou même de les nommer.
+
+```js
+var getCode = (function (){
+  var codeAPI = "0]Eal(eh&2";    // Un code qu'on ne souhaite pas diffuser ni modifier
+
+  return function () {
+    return codeAPI;
+  };
+})();
+
+getCode();    // Renvoie la valeur du code
+```
+
+Il y a malgré tout quelques pièges auxquels il faut faire attention lorsqu'on utilise les fermetures. Si une fonction imbriquée définit une variable avec le même nom que le nom d'une variable de la portée externe, il n'y aura plus aucun moyen d'accéder à la variable.
+
+```js
+var créerAnimal = function(nom) {  // La fonction externe définit une variable appelée "nom"
+  return {
+    setNom: function(nom) {    // La fonction imbriquée définit une variable appelée "nom"
+      nom = nom;               // ??? comment accéder à la variable "nom" définie par la fonction externe
+    }
+  }
+}
+```
+
+L`'opérateur `[`this`](/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/L_op%C3%A9rateur_this) doit être traité avec précaution dans les fermetures. Attention, `this` fait référence au contexte où la fonction est appelée et non à l'endroit où il est défini.
+
+## Utiliser l'objet `arguments`
+
+Les arguments d'une fonction sont maintenus dans un objet semblable à un tableau. Dans une fonction, il est possible d'utiliser les arguments passés à la fonction de la façon suivante :
+
+```js
+arguments[i]
+```
+
+où `i` représente l'index ordinal de l'argument (le premier argument ayant un indice à 0). On accède donc au premier argument avec `arguments[0]`. Le nombre total d'arguments est fourni grâce à `arguments.length`.
+
+En utilisant l'objet `arguments`, il est possible de recenser les arguments supplémentaires fournis à la fonction si jamais il y a plus d'arguments fournis que requis. Cet objet est souvent utile si on ne connaît pas le nombre d'arguments passés à la fonction. La propriété `arguments.length` permet de déterminer le nombre d'arguments réellement passés à la fonction. On peut donc ensuite accéder aux différents arguments en parcourant l'objet `arguments`.
+
+Par exemple, on peut construire une fonction qui concatène plusieurs chaînes. Le seul argument formellement défini sera la chaîne utilisée pour concaténer les différentes chaînes. On peut définir la fonction de la façon suivante :
+
+```js
+function monConcat(séparateur) {
+   var result = ""; // on initialise la liste
+   var i;
+   // on parcourt les arguments
+   for (i = 1; i < arguments.length; i++) {
+      result += arguments[i] + séparateur;
+   }
+   return result;
+}
+```
+
+On peut passer autant d'arguments que nécessaire à cette fonction. Ils seront tous concaténés dans une chaîne finale. Ainsi, on aura :
+
+```js
+// renverra "rouge, orange, bleu, "
+monConcat(", ", "red", "orange", "blue");
+
+// renverra "éléphant; girafe; lion; singe; "
+monConcat("; ", "éléphant", "girafe", "lion", "singe");
+
+// renverra "sauge. basilic. origan. poivre. échalotte. "
+monConcat(". ", "sauge", "basilic", "origan", "poivre", "échalotte");
+```
+
+> **Note :** `arguments` est une variable « semblable » à un tableau. Mais ce n'est pas un tableau au sens strict. En effet, il possède un index numéroté ainsi qu'une propriété `length`. En revanche, il ne possède pas les méthodes classiques de manipulation des tableaux (Array).
+
+Voir la page sur l'objet {{jsxref("Function")}} dans la référence JavaScript pour plus d'informations.
+
+## Paramètres des fonctions
+
+À partir d'ECMAScript 2015, deux sortes de paramètres sont introduites : les paramètres par défaut et les paramètres du reste.
+
+### Les paramètres par défaut
+
+En JavaScript, par défaut, les paramètres des fonctions vaudront `undefined`. Il peut toutefois être utile de définir une valeur par défaut différente. Les paramètres par défaut permettent de répondre à ce besoin.
+
+Avant ECMAScript 2015, la stratégie pour manipuler des valeurs par défaut adaptées était de tester si la valeur du paramètre était indéfinie puis de lui affecter la valeur souhaitée si c'était le cas. Par exemple, dans le code qui suit, on ne fournit pas de valeur pour `b` dans l'appel, la valeur sera `undefined` lors de l'évaluation de `a*b` et l'appel à `multiplier` aurait renvoyé `NaN`. Pour éviter ça, la deuxième ligne définit une valeur par défaut au cas où `b` n'est pas renseigné :
+
+```js
+function multiplier(a, b) {
+  b = typeof b !== 'undefined' ?  b : 1;
+
+  return a*b;
+}
+
+multiplier(5); // 5
+```
+
+Si on peut utiliser les paramètres par défaut, il n'est plus nécessaire de faire l'opération à l'intérieur du corps de la fonction, il suffit de déclarer que la valeur par défaut pour `b` est 1 dans la signature de la fonction :
+
+```js
+function multiplier(a, b = 1) {
+  return a*b;
+}
+
+multiplier(5); // 5
+```
+
+Pour plus de détails, voir [la page sur les paramètres par défaut](/fr/docs/Web/JavaScript/Reference/Fonctions/Valeurs_par_défaut_des_arguments) dans la référence.
+
+### Les paramètres du reste
+
+La syntaxe des [paramètres du reste](/fr/docs/Web/JavaScript/Reference/Fonctions/paramètres_du_reste) permet de représenter un nombre indéfini d'arguments contenus dans un tableau. Dans l'exemple suivant, on utilise les paramètres du reste pour collecter les arguments à partir du deuxième et jusqu'au dernier. Ces arguments sont multipliés par le premier. Dans cet exemple, on utilise une fonction fléchée, concept qui est présenté et illustré dans la section qui suit.
+
+```js
+function multiplier(facteur, ...lesArgs) {
+  return lesArgs.map(x => facteur * x);
+}
+
+var arr = multiplier(2, 1, 2, 3);
+console.log(arr); // [2, 4, 6]
+```
+
+## Fonctions fléchées
+
+[Une expression de fonction fléchée](/fr/docs/Web/JavaScript/Reference/Fonctions/Fonctions_fléchées) permet d'utiliser une syntaxe plus concise que les expressions de fonctions classiques. Une telle fonction ne possède alors pas de valeur propre pour [`this`](/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_this), [`arguments`](/fr/docs/Web/JavaScript/Reference/Fonctions/arguments), [`super`](/fr/docs/Web/JavaScript/Reference/Opérateurs/super) ou [`new.target`](/fr/docs/Web/JavaScript/Reference/Opérateurs/new.target). Les fonctions fléchées sont nécessairement anonymes.
+
+Les fonctions fléchées ont été introduites pour deux raisons principales : une syntaxe plus courte et l'absence de `this` rattaché à la fonction. Voir aussi [ce billet sur tech.mozfr.org sur les fonctions fléchées](https://tech.mozfr.org/post/2015/06/10/ES6-en-details-%3A-les-fonctions-flechees).
+
+
+
+
+
+### Concision de la syntaxe
+
+Dans certaines constructions fonctionnelles, on peut apprécier une syntaxe courte. Par exemple, si on compare les deux dernières lignes de ce fragment de code :
+
+```js
+var a = [
+  "Hydrogen",
+  "Helium",
+  "Lithium",
+  "Beryl­lium"
+];
+
+var a2 = a.map(function(s){ return s.length });
+console.log(a2); // affiche [8, 6, 7, 9]
+var a3 = a.map( s => s.length );
+console.log(a3); // affiche [8, 6, 7, 9]
+```
+
+### Pas de `this` distinct
+
+Avant les fonctions fléchées, chaque nouvelle fonction définissait sa propre valeur [`this`](/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_this) (un nouvel objet dans le cas d'un constructeur, `undefined` lors des appels en [mode strict](/fr/docs/Web/JavaScript/Reference/Strict_mode), l'objet courant dans le cas d'une méthode, etc.). Cela pouvait poser quelques problèmes avec un style de programmation orienté objet.
+
+```js
+function Personne() {
+  // Le constructeur Personne() utilise `this` comme lui-même.
+  this.âge = 0;
+
+  setInterval(function grandir() {
+    // En mode non-strict, la fonction grandir() définit `this`
+    // avec l'objet global, qui est donc différent du `this`
+    // défini par le constructeur Person().
+    this.âge++;
+  }, 1000);
+}
+
+var p = new Personne();
+```
+
+Avec ECMAScript 3/5, ce problème fut résolu avec l'affectation de la valeur de `this` dans une variable a variable that could be closed over.
+
+```js
+function Personne() {
+  var self = this; // Certains utilisent `that`, d'autres `self`.
+                   // On utilisera l'un des deux et on pas
+                   // l'autre pour être cohérent.
+  self.âge = 0;
+
+  setInterval(function grandir() {
+    // La fonction callback fait référence à la variable `self`
+    // qui est bien la valeur attendue liée à l'objet.
+    self.âge++;
+  }, 1000);
+}
+```
+
+On aurait aussi pu créer une fonction liée afin que la « bonne » valeur de `this` soit passée à la fonction `grandir()`.
+
+Les fonctions fléchées capturent la valeur de `this` dans le contexte englobant et cela permet de manipuler la valeur pertinente ici :
+
+```js
+function Personne(){
+  this.âge = 0;
+
+  setInterval(() => {
+    this.âge++; // this fait référence à l'objet personne
+  }, 1000);
+}
+
+var p = new Personne();
+```
+
+## Fonctions prédéfinies
+
+JavaScript possède plusieurs fonctions natives, disponibles au plus haut niveau :
+
+- {{jsxref("Objets_globaux/eval","eval()")}}
+  - : La fonction **`eval()`** permet d'évaluer du code JavaScript contenu dans une chaîne de caractères.
+- {{jsxref("Objets_globaux/uneval","uneval()")}} {{non-standard_inline}}
+  - : La fonction **`uneval()`** crée une représentation sous la forme d'une chaîne de caractères pour le code source d'un objet.
+- {{jsxref("Objets_globaux/isFinite","isFinite()")}}
+  - : La fonction **`isFinite()`** détermine si la valeur passée est un nombre fini. Si nécessaire, le paramètre sera converti en un nombre.
+- {{jsxref("Objets_globaux/isNaN","isNaN()")}}
+  - : La fonction **`isNaN()`** détermine si une valeur est {{jsxref("NaN")}} ou non. Note : On pourra également utiliser {{jsxref("Number.isNaN()")}} défini avec ECMAScript 6 ou utiliser [`typeof`](/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_typeof) afin de déterminer si la valeur est **\*N**ot-**A**-**N**umber\*.
+- {{jsxref("Objets_globaux/parseFloat","parseFloat()")}}
+  - : La fonction **`parseFloat()`** convertit une chaîne de caractères en un nombre flottant.
+- {{jsxref("Objets_globaux/parseInt","parseInt()")}}
+  - : La fonction **`parseInt()`** convertit une chaîne de caractères et renvoie un entier dans la base donnée.
+- {{jsxref("Objets_globaux/decodeURI","decodeURI()")}}
+  - : La fonction **`decodeURI()`** décode un Uniform Resource Identifier (URI) créé par {{jsxref("Objets_globaux/encodeURI","encodeURI()")}} ou une méthode similaire.
+- {{jsxref("Objets_globaux/decodeURIComponent","decodeURIComponent()")}}
+  - : La fonction **`decodeURIComponent()`** décode un composant d'un Uniform Resource Identifier (URI) créé par {{jsxref("Objets_globaux/encodeURIComponent","encodeURIComponent")}} ou une méthode similaire.
+- {{jsxref("Objets_globaux/encodeURI","encodeURI()")}}
+  - : La fonction **`encodeURI()`** encode un Uniform Resource Identifier (URI) en remplaçant chaque exemplaire de certains caractères par un, deux, trois voire quatre séquences d'échappement représentant l'encodage UTF-8 du caractères (quatre séquences seront utilisées uniquement lorsque le caractère est composé d'une paire de deux demi-codets).
+- {{jsxref("Objets_globaux/encodeURIComponent","encodeURIComponent()")}}
+  - : La fonction **`encodeURIComponent()`** encode un composant d'un Uniform Resource Identifier (URI) en remplaçant chaque exemplaire de certains caractères par un, deux, trois voire quatre séquences d'échappement représentant l'encodage UTF-8 du caractères (quatre séquences seront utilisées uniquement lorsque le caractère est composé d'une paire de deux demi-codets).
+- {{jsxref("Objets_globaux/escape","escape()")}} {{deprecated_inline}}
+  - : La fonction dépréciée **`escape()`** calcule une nouvelle chaîne de caractères pour laquelle certains caractères ont été remplacés par leur séquence d'échappement hexadécimale. Les fonctions {{jsxref("Objets_globaux/encodeURI","encodeURI()")}} ou {{jsxref("Objets_globaux/encodeURIComponent","encodeURIComponent()")}} doivent être utilisées à la place.
+- {{jsxref("Objets_globaux/unescape","unescape()")}} {{deprecated_inline}}
+  - : La fonction dépréciée **`unescape()`** calcule une nouvelle chaîne de caractères pour laquelle les séquences d'échappement hexadécimales sont remplacées par les caractères qu'elles représentent. Les séquences d'échappement introduites peuvent provenir d'une fonction telle que {{jsxref("Objets_globaux/escape","escape()")}}. `unescape` est dépréciée et doit être remplacée par {{jsxref("Objets_globaux/decodeURI","decodeURI()")}} ou {{jsxref("Objets_globaux/decodeURIComponent","decodeURIComponent()")}}.
+
+{{PreviousNext("Web/JavaScript/Guide/Boucles_et_it%C3%A9ration", "Web/JavaScript/Guide/Expressions_et_Op%C3%A9rateurs")}}
diff --git a/files/fr/web/javascript/guide/grammar_and_types/index.html b/files/fr/web/javascript/guide/grammar_and_types/index.html
deleted file mode 100644
index ce13618846..0000000000
--- a/files/fr/web/javascript/guide/grammar_and_types/index.html
+++ /dev/null
@@ -1,710 +0,0 @@
----
-title: Types et grammaire
-slug: Web/JavaScript/Guide/Grammar_and_types
-tags:
-  - Guide
-  - JavaScript
-translation_of: Web/JavaScript/Guide/Grammar_and_types
-original_slug: Web/JavaScript/Guide/Types_et_grammaire
----
-<div> {{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Introduction", "Web/JavaScript/Guide/Contrôle_du_flux_Gestion_des_erreurs")}}</div>
-
-<p>Ce chapitre décrit les bases de la grammaire et des types de données JavaScript.</p>
-
-<h2 id="Les_bases_du_langage">Les bases du langage</h2>
-
-<p>JavaScript emprunte la plupart des éléments de sa syntaxe à Java, C et C++ mais sa syntaxe est également influencée par Awk, Perl et Python.</p>
-
-<p>JavaScript est <strong>sensible à la casse</strong> et utilise l'ensemble de caractères <strong>Unicode</strong>. On pourrait donc tout à fait utiliser le mot früh comme nom de variable :</p>
-
-<pre class="brush: js">var früh = "toto";
-typeof Früh; // undefined car JavaScript est sensible à la casse
-</pre>
-
-<p>En JavaScript, les instructions sont appelées ({{Glossary("Statement", "statements")}}) et sont séparées par des points-virgules.</p>
-
-<p>Il n'est pas nécessaire d'inclure un point-virgule si l'on écrit une instruction sur une nouvelle ligne. Mais si vous voulez écrire plus d'une déclaration sur une seule ligne, alors elles doivent être séparées par un point-virgule. Ceci étant dit, la bonne pratique est d'inclure un point-virgule après chaque instruction. Les espaces, les tabulations et les caractères de nouvelles lignes sont considérés comme des blancs. Il existe aussi un ensemble de règles pour ajouter automatiquement des points-virgules à la fin des instructions (<a href="/fr/docs/Web/JavaScript/Reference/Grammaire_lexicale#Insertion_automatique_de_points-virgules">ASI</a> pour<em> Automatic Semicolon Insertion</em>). Cependant, il est conseillé de toujours ajouter des points-virgules à la fin des instructions afin d'éviter des effets de bord néfastes.</p>
-
-<p>Le texte d'un code source JavaScript est analysé de gauche à droite et est converti en une série d'unités lexicales, de caractères de contrôle, de fins de lignes, de commentaires et de blancs. ECMAScript définit également certains mots-clés et littéraux. Pour plus d'informations, voir la page sur <a href="/fr/docs/Web/JavaScript/Reference/Grammaire_lexicale">la grammaire lexicale de JavaScript</a> dans la référence JavaScript.</p>
-
-<h2 id="Commentaires">Commentaires</h2>
-
-<p>La syntaxe utilisée pour <strong>les commentaires</strong> est la même que celle utilisée par le C++ et d'autres langages :</p>
-
-<pre class="brush: js">// un commentaire sur une ligne
-
-/* un commentaire plus
-   long sur plusieurs lignes
- */
-
-/* Par contre on ne peut pas /* imbriquer des commentaires */ SyntaxError */
-</pre>
-
-<div class="blockIndicator note">
-<p><strong>Note :</strong> Vous pourrez également rencontrer une troisième forme de commentaires au début de certains fichiers JavaScript comme <code>#!/usr/bin/env node</code>. Ce type de commentaire indique le chemin d'un interpréteur JavaScript spécifique pour exécuter le script. Pour plus de détails, voir la page sur <a href="/fr/docs/Web/JavaScript/Reference/Grammaire_lexicale#Commentaire_d'environnement_(hashbang)">les commentaires d'environnement</a>.</p>
-</div>
-
-<h2 id="Déclarations">Déclarations</h2>
-
-<p>Il existe trois types de déclarations de variable en JavaScript.</p>
-
-<dl>
- <dt>{{jsxref("Instructions/var", "var")}}</dt>
- <dd>On déclare une variable, éventuellement en initialisant sa valeur.</dd>
- <dt>{{jsxref("Instructions/let", "let")}}</dt>
- <dd>On déclare une variable dont la portée est celle du bloc courant, éventuellement en initialisant sa valeur.</dd>
- <dt>{{jsxref("Instructions/const", "const")}}</dt>
- <dd>On déclare une constante nommée, dont la portée est celle du bloc courant, accessible en lecture seule.</dd>
-</dl>
-
-<h3 id="Variables">Variables</h3>
-
-<p>Les variables sont utilisées comme des noms symboliques désignant les valeurs utilisées dans l'application. Les noms des variables sont appelés <em>identifiants</em>. Ces identifiants doivent respecter certaines règles.</p>
-
-<p>Un identifiant JavaScript doit commencer par une lettre, un tiret bas (_) ou un symbole dollar ($). Les caractères qui suivent peuvent être des chiffres (0 à 9).<br>
-À noter : puisque Javascript est sensible aux majuscules et minuscules: les lettres peuvent comprendre les caractères de « A » à « Z » (en majuscule) mais aussi les caractères  de « a » à « z » (en minuscule).</p>
-
-<p>On peut aussi utiliser la plupart lettres Unicode ou ISO 8859-1 (comme å et ü, pour plus de détails, voir <a href="https://mathiasbynens.be/notes/javascript-identifiers-es6">ce billet de blog, en anglais</a>) au sein des identifiants. Il est également possible d'utiliser les \uXXXX <a href="#littéraux chaînes">séquences d'échappement Unicode</a> comme caractères dans les identifiants.</p>
-
-<p>Voici des exemples d'identifiants valides : <code>Nombre_touches</code>, <code>temp99</code>, <code>$credit</code>, et <code>_nom</code>.</p>
-
-<h3 id="Déclaration_de_variables">Déclaration de variables</h3>
-
-<p>Il est possible de déclarer des variables de plusieurs façons :</p>
-
-<ul>
- <li>En utilisant le mot-clé {{jsxref("Instructions/var","var")}}, par exemple : <code>var x = 42</code>. Cette syntaxe peut être utilisée pour déclarer des variables <a href="#Portées">locales ou globales</a> selon le contexte d'exécution.</li>
- <li>En utilisant le mot-clé {{jsxref("Instructions/const","const")}} ou le mot-clé {{jsxref("Instructions/let","let")}}, par exemple avec <code>let y = 13</code>. Cette syntaxe peut être utilisée pour déclarer une variable dont la portée sera celle du bloc. Voir le paragraphe sur <a href="#Portées">les portées des variables</a> ci-après.</li>
-</ul>
-
-<p>Il est également possible d'affecter une valeur à une variable sans utiliser de mot-clé (ex. <code>x = 42</code>). Cela créera une variable globale non-déclarée. Cette forme génèrera également un avertissement avec <a href="/fr/docs/Web/JavaScript/Reference/Strict_mode">le mode strict</a>. Attention, les variables globales non-déclarées peuvent mener à des comportements inattendus et sont considérées comme une mauvaise pratique.</p>
-
-<h3 id="Évaluation_de_variables">Évaluation de variables</h3>
-
-<p>Une variable déclarée grâce à l'instruction <code>var</code> ou <code>let</code> sans valeur initiale définie vaudra {{jsxref("undefined")}}.</p>
-
-<p>Tenter d'accéder à une variable qui n'a pas été déclarée ou tenter d'accéder à un identifiant déclaré avec <code>let</code> avant son initialisation provoquera l'envoi d'une exception {{jsxref("ReferenceError")}}.</p>
-
-<pre class="brush: js">var a;
-console.log("La valeur de a est " + a); // La valeur de a est undefined
-
-console.log("La valeur de b est " + b); // La valeur de b est undefined
-var b; // La déclaration de la variable est "remontée" (voir la section ci-après)
-
-console.log("La valeur de x est " + x); // signale une exception ReferenceError
-let x;
-let y;
-console.log("La valeur de y est " + y); // La valeur de y est undefined
-</pre>
-
-<p>Il est possible d'utiliser <code>undefined</code> pour déterminer si une variable possède une valeur. Dans l'exemple qui suit, la condition de l'instruction <code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/if...else">if</a></code> sera validée car la variable n'a pas été initialisée (elle a simplement été déclarée) :</p>
-
-<pre class="brush: js">var input;
-if (input === undefined){
-  faireCeci();
-} else {
-  faireCela();
-}
-</pre>
-
-<p>La valeur <code>undefined</code> se comporte comme le booléen <code>false</code> lorsqu'elle est utilisée dans un contexte booléen. Ainsi, le fragment de code qui suit exécutera la fonction <code>maFonction</code> puisque le premier élément de <code>monTableau</code> n'est pas défini :</p>
-
-<pre class="brush: js">var monTableau = new Array();
-if (!monTableau[0]){
-  maFunction();
-}
-</pre>
-
-<p>La valeur <code>undefined</code> est convertie en {{jsxref("NaN")}} (pour <em>Not a Number</em> : « n'est pas un nombre ») lorsqu'elle est utilisée dans un contexte numérique.</p>
-
-<pre class="brush: js">var a;
-a + 2; // NaN</pre>
-
-<p>Une variable valant <code>null</code> sera toujours considérée comme 0 dans un contexte numérique et comme <code>false</code> dans un contexte booléen. Par exemple, on aura :</p>
-
-<pre class="brush: js">var n = null;
-console.log(n * 32); // Le log affichera 0</pre>
-
-<h3 id="Les_portées_de_variables">Les portées de variables</h3>
-
-<p>Lorsqu'une variable est déclarée avec <code>var</code> en dehors des fonctions, elle est appelée variable <em>global</em>e car elle est disponible pour tout le code contenu dans le document. Lorsqu'une variable est déclarée dans une fonction, elle est appelée variable <em>locale</em> car elle n'est disponible qu'au sein de cette fonction.</p>
-
-<p>Avant ECMAScript 2015 (ES6), JavaScript ne définissait pas de portée pour une <a href="/fr/docs/Web/JavaScript/Reference/Instructions/bloc">instruction de bloc</a> ; les éléments du bloc seront locaux pour le code qui contient le bloc (que ce soit une fonction ou le contexte global). Ainsi, l'exemple qui suit affichera 5 car la portée de <code>x</code> est la fonction (ou le contexte global) dans lequel <code>x</code> est déclaré, pas le bloc (correspondant à l'instruction <code>if</code> dans ce cas) :</p>
-
-<pre class="brush: js">if (true) {
-  var x = 5;
-}
-console.log(x); // x vaut 5
-</pre>
-
-<p>La déclaration {{jsxref("Instructions/let","let")}}, introduite avec ECMAScript 2015, ajoute un nouveau comportement :</p>
-
-<pre class="brush: js">if (true) {
-  let y = 5;
-}
-console.log(y); // ReferenceError: y is not defined
-</pre>
-
-<h3 id="Remontée_de_variables_(hoisting)">Remontée de variables (<em>hoisting</em>)</h3>
-
-<p>Une autre chose peut paraître étrange en JavaScript : il est possible, sans recevoir d'exception, de faire référence à une variable qui est déclarée plus tard. Ce concept est appelé « remontée » (<em>hoisting</em> en anglais) car, d'une certaine façon, les variables sont remontées en haut de la fonction ou de l'instruction. En revanche, les variables qui n'ont pas encore été initialisées renverront la valeur <code>undefined</code>. Ainsi, même si on déclare une variable et qu'on l'initialise après l'avoir utilisée ou y avoir fait référence, la valeur utilisée « la plus haute » sera toujours <code>undefined</code>.</p>
-
-<pre class="brush: js">/**
- * Exemple 1
- */
-console.log(x === undefined); // donne "true"
-var x = 3;
-
-/**
- * Exemple 2
- */
-// renverra undefined
-var maVar = "ma valeur";
-
-(function () {
-  console.log(maVar); // undefined
-  var maVar = "valeur locale";
-})();
-</pre>
-
-<p>Les exemples précédents peuvent être reformulés plus explicitement ainsi :</p>
-
-<pre class="brush: js">/**
- * Exemple 1
- */
-var x;
-console.log(x === undefined); // donne "true"
-x = 3;
-
-/**
- * Exemple 2
- */
-var maVar = "ma valeur";
-
-(function () {
-  var maVar;
-  console.log(maVar); // undefined
-  maVar = "valeur locale";
-})();
-</pre>
-
-<p>C'est pourquoi il est conseillé de placer les instructions <code>var</code> dès que possible dans le code. De plus, cette bonne pratique aide à rendre le code plus lisible.</p>
-
-<p>Avec ECMAScript 2015, <code>let (const)</code> <strong>remontera la variable en haut du bloc mais ne l'initialisera pas</strong>. Aussi, si on fait référence à la variable dans le bloc avant la déclaration, on obtient une {{jsxref("ReferenceError")}} car la variable est dans une « zone morte temporelle ». entre le début du bloc et le traitement de la déclaration</p>
-
-<pre class="brush: js">function faire_quelquechose() {
-  console.log(toto); // ReferenceError
-  let toto = 2;
-}</pre>
-
-<h3 id="Remontée_de_fonctions">Remontée de fonctions</h3>
-
-<p>En ce qui concerne les fonctions, seules les déclarations de fonctions sont remontées. Pour les expressions de fonctions, il n'y a pas de telle remontée car la variable associée n'a pas encore été affectée avec la valeur finale (comme vu avant) :</p>
-
-<pre class="brush: js">/* Déclaration de fonction */
-toto();  // "truc"
-function toto(){
-  console.log("truc");
-}
-
-/* Expression de fonction */
-machin();      // erreur TypeError : machin n'est pas une fonction
-var machin = function() {
-  console.log("titi");
-}
-</pre>
-
-<h3 id="Les_variables_globales">Les variables globales</h3>
-
-<p>Les variables globales sont en réalité des propriétés de l'<em>objet global</em>. Dans les pages web, l'objet global est {{domxref("window")}}, et on peut donc accéder ou modifier la valeur de variables globales en utilisant la syntaxe suivante : <code>window.<em>variable</em></code> .</p>
-
-<p>Ainsi, il est possible d'accéder à des variables déclarées dans une fenêtre ou dans un cadre depuis une autre fenêtre ou depuis un autre cadre (<em>frame</em>) en spécifiant son nom. Si, par exemple, une variable appelée <code>numTéléphone</code> est déclarée dans un document <code>FRAMESET</code>, il est possible d'y faire référence, depuis un cadre fils, avec la syntaxe <code>parent.numTéléphone</code>.</p>
-
-<h3 id="Constantes">Constantes</h3>
-
-<p>Il est possible de créer des constantes en lecture seule en utilisant le mot-clé {{jsxref("Instructions/const","const")}}. La syntaxe d'un identifiant pour une constante est la même que pour les variables (elle doit débuter avec une lettre, un tiret du bas, un symbole dollar et peut contenir des caractères numériques, alphabétiques et des tirets bas voire des caractères Unicode).</p>
-
-<pre class="brush: js">const préfixe = '212';
-</pre>
-
-<p>Une constante ne peut pas changer de valeur grâce à une affectation ou être re-déclarée pendant l'exécution du script.</p>
-
-<p>Les règles de portée des constantes sont les mêmes que pour les variables, à l'exception du mot-clé <code>const</code> qui est obligatoire. S'il est oublié, l'identifiant sera considéré comme celui d'une variable.</p>
-
-<p>Il est impossible de déclarer une constante avec le même nom qu'une autre variable ou fonction dans la même portée.</p>
-
-<pre class="example-bad brush: js">// Renverra une erreur
-function f() {};
-const f = 5;
-
-// Renverra également une erreur
-function f() {
-  const g = 5;
-  var g;
-
-  //instructions
-}
-</pre>
-
-<p>Cependant, les propriétés des objets qui sont affectés comme constantes ne sont pas protégées, on pourra ainsi exécuter sans problème le code suivant :</p>
-
-<pre class="brush: js">const MON_OBJET = {"clé": "valeur"};
-MON_OBJET.clé = "autreValeur";</pre>
-
-<p>De même, le contenu d'un tableau peut être modifié sans alerte :</p>
-
-<pre class="brush: js">const MON_TABLEAU = ["HTML", "CSS"];
-MON_TABLEAU.push("JavaScript");
-console.log(MON_TABLEAU); // ["HTML", "CSS", "JavaScript"]
-</pre>
-
-<h2 id="Structures_de_données_et_types">Structures de données et types</h2>
-
-<h3 id="Types_de_données">Types de données</h3>
-
-<p>La dernière version du standard ECMAScript définit sept types de données :</p>
-
-<ul>
- <li>Six types de données primitifs :
-  <ul>
-   <li>Type booléen : <code>true</code> et <code>false</code>.</li>
-   <li>Type nul (<code>null</code>), un mot-clé spécial pour indiquer une valeur nulle (au sens informatique). JavaScript étant sensible à la casse, <code>null</code> n'est pas <code>Null</code>, <code>NULL</code>, ou toute autre variante.</li>
-   <li>Un type pour les valeurs indéfinies (<code>undefined</code>).</li>
-   <li>Un type pour les nombres entiers ou décimaux. Par exemple : <code>42</code> ou <code>3.14159</code>.</li>
-   <li>Un type pour représenter les grands nombres entiers <code>BigInt</code>, par exemple <code>9007199254740992n</code>.</li>
-   <li>Un type pour les chaînes de caractères, une séquence de caractères qui représente une valeur textuelle. Par exemple : "Coucou"</li>
-   <li>Un type pour les symboles, apparus avec ECMAScript 2015 (ES6). Ce type est utilisé pour représenter des données immuables et uniques.</li>
-  </ul>
- </li>
- <li>et un type pour les objets (<em>Object</em>)</li>
-</ul>
-
-<p>Bien que cette description couvre peu de types de données, ceux-ci vous permettent d'implémenter une grande variété de fonctions au sein de vos applications. <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object">Les objets</a> et <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Function">les fonctions</a> sont parmi les briques fondamentales du langage. On peut considérer, à première vue, les objets comme des conteneurs de valeurs et de fonctions pour une application.</p>
-
-<h3 id="Conversion_de_types_de_données">Conversion de types de données</h3>
-
-<p>JavaScript est un langage à typage dynamique. Cela signifie qu'il n'est pas nécessaire de spécifier le type de données d'une variable lors de sa déclaration. Les types de données sont convertis automatiquement durant l'exécution du script. Ainsi, il est possible de définir une variable de cette façon :</p>
-
-<div>
-<pre class="brush: js">var réponse = 42;
-</pre>
-</div>
-
-<p>Et plus tard, d'affecter une chaîne de caractères à cette même variable :</p>
-
-<div>
-<pre class="brush: js">réponse = "Merci pour le dîner...";
-</pre>
-</div>
-
-<p>JavaScript utilisant un typage dynamique, cette dernière instruction ne renverra pas d'erreur.</p>
-
-<p>Lorsque des expressions impliquent des chaînes de caractères et des valeurs numériques ainsi que l'opérateur +, JavaScript convertit les nombres en chaînes de caractères :</p>
-
-<pre class="brush: js">x = "La réponse est " + 42; // "La réponse est 42"
-y = 42 + " est la réponse"; // "42 est la réponse"
-</pre>
-
-<p>Avec des instructions impliquant d'autres opérateurs, JavaScript ne convertit pas nécessairement les valeurs numériques en chaînes de caractères. Ainsi, on aura :</p>
-
-<pre class="brush: js">"37" - 7; // 30
-"37" + 7; // "377"
-</pre>
-
-<h3 id="Conversion_de_chaînes_de_caractères_en_nombres">Conversion de chaînes de caractères en nombres</h3>
-
-<p>Si un nombre est représenté en mémoire par une chaîne de caractères, il y a des méthodes pour effectuer la bonne conversion :</p>
-
-<ul>
- <li>{{jsxref("Objets_globaux/parseInt", "parseInt()")}}</li>
- <li>{{jsxref("Objets_globaux/parseFloat", "parseFloat()")}}</li>
-</ul>
-
-<p><code>parseInt</code> renverra uniquement des nombres entiers, étant ainsi inappropriée pour la manipulation de nombre décimaux. Une bonne pratique pour cette fonction est de toujours inclure l'argument qui indique dans quelle base numérique le résultat doit être renvoyé (base 2, base 10...).</p>
-
-<pre class="brush: js">parseInt("101", 2); // 5</pre>
-
-<h4 id="L'opérateur_unaire">L'opérateur + unaire</h4>
-
-<p>Une autre méthode pour récupérer un nombre à partir d'une chaîne de caractères consiste à utiliser l'opérateur +.</p>
-
-<pre class="brush: js">"1.1" + "1.1" = "1.11.1"
-+"1.1" = 1.1 // fonctionne seulement avec le + unaire
-</pre>
-
-<h2 id="Littéraux">Littéraux</h2>
-
-<p>Les littéraux sont utilisés pour représenter des valeurs en JavaScript. Ce sont des valeurs fixes, pas des variables, qui sont fournies <em>littéralement</em> au script. Cette section décrit les différents types de littéraux :</p>
-
-<ul>
- <li><a href="#littéraux tableaux">Littéraux de tableaux</a></li>
- <li><a href="#littéraux booléens">Littéraux booléens</a></li>
- <li><a href="#littéraux décimaux">Littéraux de nombres flottants</a></li>
- <li><a href="#littéraux numériques">Littéraux numériques</a></li>
- <li><a href="#littéraux objets">Littéraux d'objets</a></li>
- <li><a href="#regexp">Littéraux d'expressions rationnelles</a></li>
- <li><a href="#littéraux chaînes">Littéraux de chaînes de caractères</a></li>
-</ul>
-
-<h3 id="Les_littéraux_de_tableaux">Les littéraux de tableaux</h3>
-
-<p>Un littéral de tableau est une liste de zéro ou plusieurs expressions, dont chacune représente l'élément d'un tableau, encadrées par des crochets (<code>[]</code>). Lorsqu'un tableau est créé à partir d'un littéral, il est initialisé avec les valeurs spécifiées qui sont ses éléments, sa longueur correspondant au nombre d'arguments donnés.</p>
-
-<p>L'exemple suivant crée ainsi le tableau <code>cafés</code> avec trois éléments et une taille égale à 3 :</p>
-
-<pre class="brush: js">var cafés = ["Brésilien", "Colombien", "Kona"];
-</pre>
-
-<div class="note">
-<p><strong>Note :</strong> Un littéral de tableau est du type d'un initialisateur d'objets. Voir <a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Initialisateur_objet">l'utilisation d'initialisateurs d'objets</a>.</p>
-</div>
-
-<p>Si un tableau est créé en utilisant un littéral dans un script du plus haut niveau, JavaScript interprète le tableau chaque fois qu'il évalue l'expression contenant le littéral. De plus, un littéral utilisé dans une fonction est créé chaque fois que la fonction est appelée.</p>
-
-<p>Les littéraux de tableaux sont également des objets <code>Array</code>. Voir la page sur l'objet <code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array">Array</a></code> pour plus de détails.</p>
-
-<h4 id="Les_virgules_supplémentaires">Les virgules supplémentaires</h4>
-
-<p>Il n'est pas nécessaire de définir tous les éléments dans un littéral de tableau. Si vous utilisez deux virgules, l'une à la suite de l'autre, le tableau utilisera la valeur <code>undefined</code> pour les éléments non définis. L'exemple qui suit utilise le tableau poisson :</p>
-
-<pre class="brush: js">var poisson = ["Clown", , "Chat"];
-</pre>
-
-<p>Ce tableau possède deux éléments ayant une valeur et un élément vide (<code>poisson[0]</code> vaut "Clown", <code>poisson[1]</code> vaut <code>undefined</code>, et <code>poisson[2]</code> vaut "Chat").</p>
-
-<p>Si une virgule est ajoutée à la fin de la liste des éléments, elle est ignorée. Dans le prochain exemple, la longueur du tableau est égale à 3. Il n'y a pas d'élément <code>maListe[3]</code>. Les autres virgules indiquent un nouvel élément.</p>
-
-<div class="note">
-<p><strong>Note :</strong> Avec d'anciennes versions de navigateurs, les virgules de fin peuvent causer des erreurs, il est fortement conseillé de les retirer.</p>
-</div>
-
-<pre class="brush: js">var maListe = ['maison', , 'école', ];
-</pre>
-
-<p>Dans l'exemple qui suit, la longueur du tableau est égale à 4 et <code>maListe[0]</code> et <code>maListe[2]</code> sont manquants.</p>
-
-<pre class="brush: js">var maListe = [ , 'maison', , 'école'];
-</pre>
-
-<p>Dans l'exemple qui suit, la longueur du tableau est égale à 4 et <code>maListe[1]</code> et <code>maListe[3]</code> sont manquants.</p>
-
-<pre class="brush: js">var maListe = ['maison', , 'école', , ];
-</pre>
-
-<p>Comprendre le fonctionnement des virgules supplémentaires est important. Cependant, lorsque vous écrivez du code, veillez, dès que c'est possible, à déclarer les éléments manquants avec <code>undefined</code> : cela améliorera la lisibilité de votre code et il sera ainsi plus facile à maintenir.</p>
-
-<h3 id="Les_littéraux_booléens">Les littéraux booléens</h3>
-
-<p>Le type booléen possède deux valeurs littérales : <code>true</code> et <code>false</code>.</p>
-
-<p>Il ne faut pas confondre les valeurs <code>true</code> et <code>false</code> du type primitif booléen et les valeurs true et false de l'objet <code>Boolean</code>. L'objet <code>Boolean</code> permet de créer un objet autour du type de donnée booléen. Voir la page sur l'objet<a href="/fr/docs/JavaScript/Reference/Objets_globaux/Boolean"> <code>Boolean</code></a> pour plus d'informations.</p>
-
-<h3 id="Les_littéraux_numériques">Les littéraux numériques</h3>
-
-<p>Les nombres {{jsxref("Number")}} et les grands entiers {{jsxref("BigInt")}} peuvent être exprimés en notation décimale (base 10), hexadécimale (base 16), octale (base 8) et binaire (base 2).</p>
-
-<ul>
- <li>Les littéraux représentant des entiers décimaux sont une suite de chiffres qui ne commence pas par un 0 (zéro)</li>
- <li>Un 0 (zéro) en préfixe indique que le littéral est en notation octale. Ces nombres ne peuvent être composés que des chiffres de 0 (zéro) à 7 (sept).</li>
- <li>Un préfixe 0x (ou 0X) indique une notation hexadécimale. Les nombres hexadécimaux peuvent être composés de chiffres (0-9) et des lettres A à F (minuscules et majuscules) (la casse d'un caractère ne modifie pas sa valeur : <code>0xa = 0xA = 10</code> et <code>0xf = 0xF = 15</code>).</li>
- <li>Un préfixe 0b (ou 0B) indique une notation binaire. Les nombres binaires peuvent être composés de 0 ou de 1 uniquement.</li>
-</ul>
-
-<p>Voici des exemples pour ces littéraux :</p>
-
-<pre class="eval">0, 117, -345, 123456789123456789n (notation décimale, base 10)
-015, 0001, -077, 0o7777777777777n (notation octale, base 8)
-0x1123, 0x00111, -0xF1A7, 0x123456789ABCDEFn (notation hexadécimale, base 16)
-0b11, 0B0011, -0b11, 0b11101001010101010101n (notation binaire, base 2)
-</pre>
-
-<p>Pour plus d'informations, voir <a href="/fr/docs/Web/JavaScript/Reference/Grammaire_lexicale#Littéraux_numériques">les littéraux numériques dans la grammaire lexicale de JavaScript</a>.</p>
-
-<h3 id="Les_littéraux_de_nombres_décimaux">Les littéraux de nombres décimaux</h3>
-
-<p>Un littéral de nombre décimal peut être composé de ces différentes parties :</p>
-
-<ul>
- <li>Un entier, pouvant être signé (précédé d'un « + » ou d'un « - »),</li>
- <li>Un point, séparateur décimal (« . »),</li>
- <li>La partie décimale (un autre nombre)</li>
- <li>Un exposant.</li>
-</ul>
-
-<p>L'exposant est la partie du nombre décimal commençant par un « e » ou un « E », suivie d'un entier pouvant être signé (précédé d'un « + » ou d'un « - »). Un littéral de nombre décimal doit comporter au moins un chiffre et soit un point (séparateur décimal) soit un « e » ou un « E ».</p>
-
-<p>Des exemples sont : 3.1415, -3.1E12, .1e12, et 2E-12.</p>
-
-<p>On peut raccourcir cette syntaxe en :</p>
-
-<pre class="eval">[(+|-)][chiffres].[chiffres][(E|e)[(+|-)]chiffres]
-</pre>
-
-<p>Par exemple :</p>
-
-<pre class="eval">3.14
-2345.789
-.3333333333333333333
-</pre>
-
-<h3 id="Les_littéraux_d'objets">Les littéraux d'objets</h3>
-
-<p>Un littéral d'objet - ou 'objet littéral' - est une liste de zéro ou plusieurs propriétés définies par des paires de noms/valeurs. Ces paires sont délimitées par des accolades (<code>{}</code>). N'utilisez pas un tel littéral en début d'instruction. En effet, l'accolade ouvrante sera mal interprétée (début de bloc) et causera une erreur ou un comportement incohérent.</p>
-
-<p>L'exemple qui suit montre l'utilisation d'un littéral d'objet. Le premier élément de l'objet <code>voiture</code> définit une propriété <code>maVoiture</code>, le deuxième élément : la propriété <code>getVoiture</code> invoque une fonction <code>(carTypes("Honda")),</code> le troisième élément, la propriété <code>special</code> utilise une variable existante (<code>soldes</code>).</p>
-
-<pre class="brush: js">var soldes = "Toyota";
-
-function carTypes(nom) {
-  return (nom === "Honda") ?
-    nom :
-    "Désolé, nous ne vendons pas de " + nom + "." ;
-}
-
-var voiture = { maVoiture: "Saturn", getVoiture: carTypes("Honda"), spécial: soldes };
-
-console.log(voiture.maVoiture);   // Saturn
-console.log(voiture.getVoiture);  // Honda
-console.log(voiture.spécial); // Toyota
-</pre>
-
-<p>Il est également possible d'utiliser un littéral numérique ou un littéral de chaîne de caractères pour désigner le nom d'une propriété ou pour imbriquer un objet dans un autre. L'exemple qui suit illustre cette possibilité :</p>
-
-<pre class="brush: js">var voiture = { plusieursVoitures: {a: "Saab", b: "Jeep"}, 7: "Mazda" };
-
-console.log(voiture.plusieursVoitures.b); // Jeep
-console.log(voiture[7]); // Mazda
-</pre>
-
-<p>Les noms des propriétés d'objets peuvent être n'importe quelle chaîne de caractères, y compris la chaîne vide. Si le nom de la propriété n'est pas un <a href="/fr/docs/Web/JavaScript/Guide/Types_et_grammaire#Variables">identifiant</a> valide, il faudra qu'il soit placé entre guillemets. Les noms de propriétés qui ne sont pas des identifiants valides ne peuvent pas être utilisés pour accéder à la valeur en utilisant la notation pointée (objet.propriété). En revanche, il est possible d'y accéder avec la notation utilisant les crochets ("<code>[]</code>") comme pour les tableaux.</p>
-
-<pre class="brush: js">var nomsBizarres = {
-  "": "Chaîne vide",
-  "!": "Bang !"
-}
-console.log(nomsBizarres."");   // SyntaxError: Unexpected string
-console.log(nomsBizarres[""]);  // Chaîne vide
-console.log(nomsBizarres.!);    // SyntaxError: Unexpected token !
-console.log(nomsBizarres["!"]); // Bang !
-
-</pre>
-
-<h4 id="Augmentation_des_littéraux_d'objets_avec_ES2015ES6">Augmentation des littéraux d'objets avec ES2015/ES6</h4>
-
-<p>Avec ES2015, les littéraux d'objets permettent de définir le prototype lors de la construction de l'objet, permettent d'utiliser les affectations en notation raccourcie : <code>toto: toto</code>, de définir des méthodes, d'appeler les méthodes de l'objet parent avec <code>super</code> et d'utiliser des noms de propriétés calculées.</p>
-
-<pre class="brush: js">var obj = {
-    // __proto__
-    __proto__: lePrototypeDeLObjet,
-    // Notation raccourcie pour ‘handler: handler’
-    handler,
-    // Méthodes
-    toString() {
-     // Appelle les méthodes de l'objet parent
-     return "d " + super.toString();
-    },
-    // Noms de propriétés calculés dynamiquement
-    [ 'prop_' + (() =&gt; 42)() ]: 42
-};</pre>
-
-<p>Attention :</p>
-
-<pre class="brush: js">var toto = {a: "alpha", 2: "deux"};
-console.log(toto.a);    // alpha
-console.log(toto[2]);   // deux
-//console.log(toto.2);  // Erreur: parenthèse ) manquante après la liste d'argument
-//console.log(toto[a]); // Erreur: a n'est pas défini
-console.log(toto["a"]); // alpha
-console.log(toto["2"]); // deux
-</pre>
-
-<h3 id="Les_littéraux_d'expressions_rationnelles">Les littéraux d'expressions rationnelles</h3>
-
-<p>Un littéral d'<a href="/fr/docs/Web/JavaScript/Guide/Expressions_r%C3%A9guli%C3%A8res">expression rationnelle</a> est un motif encadré par deux barres obliques. Par exemple :</p>
-
-<pre class="brush: js">var re = /ab+c/;</pre>
-
-<h3 id="Les_littéraux_de_chaînes_de_caractères">Les littéraux de chaînes de caractères</h3>
-
-<p>Un littéral de chaîne de caractères consiste en zéro ou plusieurs caractères encadrés par des guillemets droits doubles (<code>"</code>) ou des guillemets droits simples (<code>'</code>). Une chaîne de caractères doit être encadrée par des symboles du même type (guillemets droits doubles ou guillemets droits simples) :</p>
-
-<ul>
- <li><code>"toto"</code></li>
- <li><code>'truc'</code></li>
- <li><code>"1234"</code></li>
- <li><code>"Une ligne \n une autre ligne"</code></li>
- <li><code>"Aujourd'hui j'ai mangé une pomme"</code></li>
-</ul>
-
-<p>Il est possible d'utiliser les méthodes de <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String"><code>String</code></a> sur un tel littéral. JavaScript convertira automatiquement le littéral en un objet <code>String</code>, appellera la méthode puis détruira l'objet <code>String</code>. On peut également utiliser la propriété <code>String.length</code> sur un littéral de chaîne de caractère :</p>
-
-<pre class="brush: js">console.log("j'ai mangé une pomme".length)
-// Affichera le nombre de caractères (y compris les blancs).
-// Dans ce cas, 20.
-</pre>
-
-<p>Il est préférable d'utiliser des littéraux de chaînes de caractères s'il n'est pas spécifiquement nécessaire d'utiliser un objet <code>String</code>. Voir la page sur l'objet <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String"><code>String</code></a> pour plus de détails sur les objets <code>String</code>.</p>
-
-<p>Avec ECMAScript 2015, on peut également utiliser des littéraux sous forme de <em>gabarits</em> (<em>templates</em>) en utilisant le caractère accent grave (`) comme séparateur. Les gabarits de chaînes de caractères sont semblables aux fonctionnalités d'interpolation existantes en Python, Perl, etc. Ces gabarits permettent d'utiliser des balises afin d'adapter la construction de chaînes.</p>
-
-<pre class="brush: js">// Littéral simple pour une chaîne
-`Un saut de ligne '\n' en JavaScript.`
-
-// On peut écrire une chaîne sur plusieurs
-// lignes
-`Dans les gabarits, on peut écrire
-  sur plusieurs lignes. `
-
-// Interpolation de chaîne
-var nom = "Robert", jour = "aujourd'hui";
-`Bonjour ${nom}, comment allez-vous ${jour} ?`
-
-// On peut construire un préfixe HTTP
-// afin de construire plus facilement
-// des requêtes via des substitutions
-POST`http://toto.org/truc?a=${a}&amp;b=${b}
-     Content-Type: application/json
-     X-Credentials: ${credentials}
-     { "toto": ${toto},
-       "truc": ${truc}}`(myOnReadyStateChangeHandler);</pre>
-
-<h4 id="Utilisation_des_caractères_spéciaux">Utilisation des caractères spéciaux</h4>
-
-<p>En plus des caractères « classiques », il est possible d'insérer des caractères spéciaux dans les chaînes de caractères. Voici un exemple :</p>
-
-<pre class="brush: js">"une ligne \n une autre ligne"
-</pre>
-
-<p>Voici un tableau listant les caractères spéciaux qu'il est possible d'utiliser dans les chaînes de caractères JavaScript :</p>
-
-<table class="standard-table">
- <caption>Caractères spéciaux en JavaScript</caption>
- <thead>
-  <tr>
-   <th scope="col">Caractère</th>
-   <th scope="col">Signification</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><code>\0</code></td>
-   <td>Octet null</td>
-  </tr>
-  <tr>
-   <td><code>\b</code></td>
-   <td>Retour arrière</td>
-  </tr>
-  <tr>
-   <td><code>\f</code></td>
-   <td>Saut de page</td>
-  </tr>
-  <tr>
-   <td><code>\n</code></td>
-   <td>Nouvelle ligne</td>
-  </tr>
-  <tr>
-   <td><code>\r</code></td>
-   <td>Retour chariot</td>
-  </tr>
-  <tr>
-   <td><code>\t</code></td>
-   <td>Tabulation</td>
-  </tr>
-  <tr>
-   <td><code>\v</code></td>
-   <td>Tabulation verticale</td>
-  </tr>
-  <tr>
-   <td><code>\'</code></td>
-   <td>Apostrophe ou guillemet droit simple</td>
-  </tr>
-  <tr>
-   <td><code>\"</code></td>
-   <td>Guillemet droit double</td>
-  </tr>
-  <tr>
-   <td><code>\\</code></td>
-   <td>Barre oblique inversée</td>
-  </tr>
-  <tr>
-   <td><code>\<em>XXX</em></code></td>
-   <td>Le caractère dont l'encodage Latin-1 est spécifié grâce à, au plus, 3 chiffres octaux<em> XXX</em> entre 0 et 377. \251, par exemple représente le caractère copyright.</td>
-  </tr>
-  <tr>
-  </tr>
-  <tr>
-   <td><code>\x<em>XX</em></code></td>
-   <td>Le caractère dont l'encodage Latin-1 est spécifié par deux chiffres hexadécimaux entre 00 et FF. Ainsi, \xA9 correspond à la séquence hexadécimale pour le caractère copyright.</td>
-  </tr>
-  <tr>
-  </tr>
-  <tr>
-   <td><code>\u<em>XXXX</em></code></td>
-   <td>Le caractère Unicode spécifié par quatre chiffres hexadécimaux <em>XXXX</em>. Ainsi, \u00A9 correspondra à la séquence Unicode du symbole copyright. Voir {{anch("Unicode escape sequences")}}.</td>
-  </tr>
-  <tr>
-   <td><code>\u{<em>XXXXX}</em></code></td>
-   <td>Échappement de codes Unicode. Par exemple, \u{2F804} est équivalent à la combinaison d'échappements « simples » \uD87E\uDC04.</td>
-  </tr>
- </tbody>
-</table>
-
-<h4 id="Les_caractères_d'échappement">Les caractères d'échappement</h4>
-
-<p>Pour les caractères qui ne font pas partie du tableau précédent, les barres obliques inversées (<em>backslash</em>) les précédant sont ignorées. Cependant, cet usage est obsolète et devrait être évité.</p>
-
-<p>En précédant d'une barre oblique inversée les guillemets droits doubles, on <em>échappe </em>ces caractères. Voici un exemple :</p>
-
-<pre class="brush: js">var citation = "Il lit \"Bug Jargal\" de V. Hugo.";
-console.log(citation);
-</pre>
-
-<p>Le résultat serait alors</p>
-
-<pre class="eval">Il lit "Bug Jargal" de V. Hugo.</pre>
-
-<p>Pour inclure une barre oblique inversée dans une chaîne de caractères, il faut aussi l'échapper. Par exemple, pour stocker le chemin <code>c:\temp</code> dans une chaîne de caractères, on utilisera le code suivant :</p>
-
-<pre class="brush: js">var chemin = "c:\\temp";
-</pre>
-
-<p>Il est également possible d'échapper des sauts de lignes de la même façon. La barre oblique inversée et le saut de ligne seront alors ignorés dans la valeur de la chaîne de caractères.</p>
-
-<pre class="brush: js">var str = "cette chaîne \
-est cassée \
-sur plusieurs \
-lignes."
-console.log(str);   // cette chaîne est cassée sur plusieurs lignes.
-</pre>
-
-<p>Avant ECMAScript 2015 (ES6), JavaScript ne disposait pas d'une syntaxe permettant de traiter les chaînes de caractères comme des contenus de fichier, il est possible d'ajouter un caractère de saut de ligne échappé et un saut de ligne en fin de ligne en utilisant cette façon :</p>
-
-<pre class="brush: js">var poème =
-"Les roses sont rouges,\n\
-Les violettes sont bleues.\n\
-Le miel est sucré,\n\
-Et moi je suis."
-</pre>
-
-<p>Grâce à ES6, on peut utiliser des <a href="https://tech.mozfr.org/post/2015/05/27/ES6-en-details-%3A-les-gabarits-de-chaines-de-caracteres">littéraux de gabarits qui offrent de nouvelles fonctionnalités</a> dont une qui permet d'avoir des chaînes de caractères écrites sur plusieurs lignes :</p>
-
-<pre class="brush: js">var poème =
-`Les roses sont rouges,
-Les violettes sont bleues,
-Le miel est sucré,
-Et moi je suis.`</pre>
-
-<h2 id="En_savoir_plus">En savoir plus</h2>
-
-<p>Ce chapitre est centré sur les bases de la syntaxe, les déclarations et les types utilisés en JavaScript. Pour en savoir plus sur les différents composants du langage, voir les chapitres suivants du guide:</p>
-
-<ul>
- <li><a href="/fr/docs/Web/JavaScript/Guide/Contrôle_du_flux_Gestion_des_erreurs">Contrôle du flux et gestion des erreurs</a></li>
- <li><a href="/fr/docs/Web/JavaScript/Guide/Boucles_et_itération">Boucles et itération</a></li>
- <li><a href="/fr/docs/Web/JavaScript/Guide/Fonctions">Fonctions</a></li>
- <li><a href="/fr/docs/Web/JavaScript/Guide/Expressions_et_Opérateurs">Expressions et opérateurs</a></li>
-</ul>
-
-<p>Dans le chapitre suivant, on abordera les structures conditionnelles, permettant de diriger le flux d'instructions et la gestion des erreurs.</p>
-
-<p>{{PreviousNext("Web/JavaScript/Guide/Introduction", "Web/JavaScript/Guide/Contrôle_du_flux_Gestion_des_erreurs")}}</p>
diff --git a/files/fr/web/javascript/guide/grammar_and_types/index.md b/files/fr/web/javascript/guide/grammar_and_types/index.md
new file mode 100644
index 0000000000..2205e65b20
--- /dev/null
+++ b/files/fr/web/javascript/guide/grammar_and_types/index.md
@@ -0,0 +1,675 @@
+---
+title: Types et grammaire
+slug: Web/JavaScript/Guide/Grammar_and_types
+tags:
+  - Guide
+  - JavaScript
+translation_of: Web/JavaScript/Guide/Grammar_and_types
+original_slug: Web/JavaScript/Guide/Types_et_grammaire
+---
+{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Introduction", "Web/JavaScript/Guide/Contrôle_du_flux_Gestion_des_erreurs")}}
+
+Ce chapitre décrit les bases de la grammaire et des types de données JavaScript.
+
+## Les bases du langage
+
+JavaScript emprunte la plupart des éléments de sa syntaxe à Java, C et C++ mais sa syntaxe est également influencée par Awk, Perl et Python.
+
+JavaScript est **sensible à la casse** et utilise l'ensemble de caractères **Unicode**. On pourrait donc tout à fait utiliser le mot früh comme nom de variable :
+
+```js
+var früh = "toto";
+typeof Früh; // undefined car JavaScript est sensible à la casse
+```
+
+En JavaScript, les instructions sont appelées ({{Glossary("Statement", "statements")}}) et sont séparées par des points-virgules.
+
+Il n'est pas nécessaire d'inclure un point-virgule si l'on écrit une instruction sur une nouvelle ligne. Mais si vous voulez écrire plus d'une déclaration sur une seule ligne, alors elles doivent être séparées par un point-virgule. Ceci étant dit, la bonne pratique est d'inclure un point-virgule après chaque instruction. Les espaces, les tabulations et les caractères de nouvelles lignes sont considérés comme des blancs. Il existe aussi un ensemble de règles pour ajouter automatiquement des points-virgules à la fin des instructions ([ASI](/fr/docs/Web/JavaScript/Reference/Grammaire_lexicale#Insertion_automatique_de_points-virgules) pour _Automatic Semicolon Insertion_). Cependant, il est conseillé de toujours ajouter des points-virgules à la fin des instructions afin d'éviter des effets de bord néfastes.
+
+Le texte d'un code source JavaScript est analysé de gauche à droite et est converti en une série d'unités lexicales, de caractères de contrôle, de fins de lignes, de commentaires et de blancs. ECMAScript définit également certains mots-clés et littéraux. Pour plus d'informations, voir la page sur [la grammaire lexicale de JavaScript](/fr/docs/Web/JavaScript/Reference/Grammaire_lexicale) dans la référence JavaScript.
+
+## Commentaires
+
+La syntaxe utilisée pour **les commentaires** est la même que celle utilisée par le C++ et d'autres langages :
+
+```js
+// un commentaire sur une ligne
+
+/* un commentaire plus
+   long sur plusieurs lignes
+ */
+
+/* Par contre on ne peut pas /* imbriquer des commentaires */ SyntaxError */
+```
+
+> **Note :** Vous pourrez également rencontrer une troisième forme de commentaires au début de certains fichiers JavaScript comme `#!/usr/bin/env node`. Ce type de commentaire indique le chemin d'un interpréteur JavaScript spécifique pour exécuter le script. Pour plus de détails, voir la page sur [les commentaires d'environnement](</fr/docs/Web/JavaScript/Reference/Grammaire_lexicale#Commentaire_d'environnement_(hashbang)>).
+
+## Déclarations
+
+Il existe trois types de déclarations de variable en JavaScript.
+
+- {{jsxref("Instructions/var", "var")}}
+  - : On déclare une variable, éventuellement en initialisant sa valeur.
+- {{jsxref("Instructions/let", "let")}}
+  - : On déclare une variable dont la portée est celle du bloc courant, éventuellement en initialisant sa valeur.
+- {{jsxref("Instructions/const", "const")}}
+  - : On déclare une constante nommée, dont la portée est celle du bloc courant, accessible en lecture seule.
+
+### Variables
+
+Les variables sont utilisées comme des noms symboliques désignant les valeurs utilisées dans l'application. Les noms des variables sont appelés _identifiants_. Ces identifiants doivent respecter certaines règles.
+
+Un identifiant JavaScript doit commencer par une lettre, un tiret bas (\_) ou un symbole dollar ($). Les caractères qui suivent peuvent être des chiffres (0 à 9).
+À noter : puisque Javascript est sensible aux majuscules et minuscules: les lettres peuvent comprendre les caractères de « A » à « Z » (en majuscule) mais aussi les caractères  de « a » à « z » (en minuscule).
+
+On peut aussi utiliser la plupart lettres Unicode ou ISO 8859-1 (comme å et ü, pour plus de détails, voir [ce billet de blog, en anglais](https://mathiasbynens.be/notes/javascript-identifiers-es6)) au sein des identifiants. Il est également possible d'utiliser les \uXXXX [séquences d'échappement Unicode](<#littéraux chaînes>) comme caractères dans les identifiants.
+
+Voici des exemples d'identifiants valides : `Nombre_touches`, `temp99`, `$credit`, et `_nom`.
+
+### Déclaration de variables
+
+Il est possible de déclarer des variables de plusieurs façons :
+
+- En utilisant le mot-clé {{jsxref("Instructions/var","var")}}, par exemple : `var x = 42`. Cette syntaxe peut être utilisée pour déclarer des variables [locales ou globales](#Portées) selon le contexte d'exécution.
+- En utilisant le mot-clé {{jsxref("Instructions/const","const")}} ou le mot-clé {{jsxref("Instructions/let","let")}}, par exemple avec `let y = 13`. Cette syntaxe peut être utilisée pour déclarer une variable dont la portée sera celle du bloc. Voir le paragraphe sur [les portées des variables](#Portées) ci-après.
+
+Il est également possible d'affecter une valeur à une variable sans utiliser de mot-clé (ex. `x = 42`). Cela créera une variable globale non-déclarée. Cette forme génèrera également un avertissement avec [le mode strict](/fr/docs/Web/JavaScript/Reference/Strict_mode). Attention, les variables globales non-déclarées peuvent mener à des comportements inattendus et sont considérées comme une mauvaise pratique.
+
+### Évaluation de variables
+
+Une variable déclarée grâce à l'instruction `var` ou `let` sans valeur initiale définie vaudra {{jsxref("undefined")}}.
+
+Tenter d'accéder à une variable qui n'a pas été déclarée ou tenter d'accéder à un identifiant déclaré avec `let` avant son initialisation provoquera l'envoi d'une exception {{jsxref("ReferenceError")}}.
+
+```js
+var a;
+console.log("La valeur de a est " + a); // La valeur de a est undefined
+
+console.log("La valeur de b est " + b); // La valeur de b est undefined
+var b; // La déclaration de la variable est "remontée" (voir la section ci-après)
+
+console.log("La valeur de x est " + x); // signale une exception ReferenceError
+let x;
+let y;
+console.log("La valeur de y est " + y); // La valeur de y est undefined
+```
+
+Il est possible d'utiliser `undefined` pour déterminer si une variable possède une valeur. Dans l'exemple qui suit, la condition de l'instruction [`if`](/fr/docs/Web/JavaScript/Reference/Instructions/if...else) sera validée car la variable n'a pas été initialisée (elle a simplement été déclarée) :
+
+```js
+var input;
+if (input === undefined){
+  faireCeci();
+} else {
+  faireCela();
+}
+```
+
+La valeur `undefined` se comporte comme le booléen `false` lorsqu'elle est utilisée dans un contexte booléen. Ainsi, le fragment de code qui suit exécutera la fonction `maFonction` puisque le premier élément de `monTableau` n'est pas défini :
+
+```js
+var monTableau = new Array();
+if (!monTableau[0]){
+  maFunction();
+}
+```
+
+La valeur `undefined` est convertie en {{jsxref("NaN")}} (pour _Not a Number_ : « n'est pas un nombre ») lorsqu'elle est utilisée dans un contexte numérique.
+
+```js
+var a;
+a + 2; // NaN
+```
+
+Une variable valant `null` sera toujours considérée comme 0 dans un contexte numérique et comme `false` dans un contexte booléen. Par exemple, on aura :
+
+```js
+var n = null;
+console.log(n * 32); // Le log affichera 0
+```
+
+### Les portées de variables
+
+Lorsqu'une variable est déclarée avec `var` en dehors des fonctions, elle est appelée variable *global*e car elle est disponible pour tout le code contenu dans le document. Lorsqu'une variable est déclarée dans une fonction, elle est appelée variable _locale_ car elle n'est disponible qu'au sein de cette fonction.
+
+Avant ECMAScript 2015 (ES6), JavaScript ne définissait pas de portée pour une [instruction de bloc](/fr/docs/Web/JavaScript/Reference/Instructions/bloc) ; les éléments du bloc seront locaux pour le code qui contient le bloc (que ce soit une fonction ou le contexte global). Ainsi, l'exemple qui suit affichera 5 car la portée de `x` est la fonction (ou le contexte global) dans lequel `x` est déclaré, pas le bloc (correspondant à l'instruction `if` dans ce cas) :
+
+```js
+if (true) {
+  var x = 5;
+}
+console.log(x); // x vaut 5
+```
+
+La déclaration {{jsxref("Instructions/let","let")}}, introduite avec ECMAScript 2015, ajoute un nouveau comportement :
+
+```js
+if (true) {
+  let y = 5;
+}
+console.log(y); // ReferenceError: y is not defined
+```
+
+### Remontée de variables (_hoisting_)
+
+Une autre chose peut paraître étrange en JavaScript : il est possible, sans recevoir d'exception, de faire référence à une variable qui est déclarée plus tard. Ce concept est appelé « remontée » (_hoisting_ en anglais) car, d'une certaine façon, les variables sont remontées en haut de la fonction ou de l'instruction. En revanche, les variables qui n'ont pas encore été initialisées renverront la valeur `undefined`. Ainsi, même si on déclare une variable et qu'on l'initialise après l'avoir utilisée ou y avoir fait référence, la valeur utilisée « la plus haute » sera toujours `undefined`.
+
+```js
+/**
+ * Exemple 1
+ */
+console.log(x === undefined); // donne "true"
+var x = 3;
+
+/**
+ * Exemple 2
+ */
+// renverra undefined
+var maVar = "ma valeur";
+
+(function () {
+  console.log(maVar); // undefined
+  var maVar = "valeur locale";
+})();
+```
+
+Les exemples précédents peuvent être reformulés plus explicitement ainsi :
+
+```js
+/**
+ * Exemple 1
+ */
+var x;
+console.log(x === undefined); // donne "true"
+x = 3;
+
+/**
+ * Exemple 2
+ */
+var maVar = "ma valeur";
+
+(function () {
+  var maVar;
+  console.log(maVar); // undefined
+  maVar = "valeur locale";
+})();
+```
+
+C'est pourquoi il est conseillé de placer les instructions `var` dès que possible dans le code. De plus, cette bonne pratique aide à rendre le code plus lisible.
+
+Avec ECMAScript 2015, `let (const)` **remontera la variable en haut du bloc mais ne l'initialisera pas**. Aussi, si on fait référence à la variable dans le bloc avant la déclaration, on obtient une {{jsxref("ReferenceError")}} car la variable est dans une « zone morte temporelle ». entre le début du bloc et le traitement de la déclaration
+
+```js
+function faire_quelquechose() {
+  console.log(toto); // ReferenceError
+  let toto = 2;
+}
+```
+
+### Remontée de fonctions
+
+En ce qui concerne les fonctions, seules les déclarations de fonctions sont remontées. Pour les expressions de fonctions, il n'y a pas de telle remontée car la variable associée n'a pas encore été affectée avec la valeur finale (comme vu avant) :
+
+```js
+/* Déclaration de fonction */
+toto();  // "truc"
+function toto(){
+  console.log("truc");
+}
+
+/* Expression de fonction */
+machin();      // erreur TypeError : machin n'est pas une fonction
+var machin = function() {
+  console.log("titi");
+}
+```
+
+### Les variables globales
+
+Les variables globales sont en réalité des propriétés de l'_objet global_. Dans les pages web, l'objet global est {{domxref("window")}}, et on peut donc accéder ou modifier la valeur de variables globales en utilisant la syntaxe suivante : `window.variable` .
+
+Ainsi, il est possible d'accéder à des variables déclarées dans une fenêtre ou dans un cadre depuis une autre fenêtre ou depuis un autre cadre (_frame_) en spécifiant son nom. Si, par exemple, une variable appelée `numTéléphone` est déclarée dans un document `FRAMESET`, il est possible d'y faire référence, depuis un cadre fils, avec la syntaxe `parent.numTéléphone`.
+
+### Constantes
+
+Il est possible de créer des constantes en lecture seule en utilisant le mot-clé {{jsxref("Instructions/const","const")}}. La syntaxe d'un identifiant pour une constante est la même que pour les variables (elle doit débuter avec une lettre, un tiret du bas, un symbole dollar et peut contenir des caractères numériques, alphabétiques et des tirets bas voire des caractères Unicode).
+
+```js
+const préfixe = '212';
+```
+
+Une constante ne peut pas changer de valeur grâce à une affectation ou être re-déclarée pendant l'exécution du script.
+
+Les règles de portée des constantes sont les mêmes que pour les variables, à l'exception du mot-clé `const` qui est obligatoire. S'il est oublié, l'identifiant sera considéré comme celui d'une variable.
+
+Il est impossible de déclarer une constante avec le même nom qu'une autre variable ou fonction dans la même portée.
+
+```js example-bad
+// Renverra une erreur
+function f() {};
+const f = 5;
+
+// Renverra également une erreur
+function f() {
+  const g = 5;
+  var g;
+
+  //instructions
+}
+```
+
+Cependant, les propriétés des objets qui sont affectés comme constantes ne sont pas protégées, on pourra ainsi exécuter sans problème le code suivant :
+
+```js
+const MON_OBJET = {"clé": "valeur"};
+MON_OBJET.clé = "autreValeur";
+```
+
+De même, le contenu d'un tableau peut être modifié sans alerte :
+
+```js
+const MON_TABLEAU = ["HTML", "CSS"];
+MON_TABLEAU.push("JavaScript");
+console.log(MON_TABLEAU); // ["HTML", "CSS", "JavaScript"]
+```
+
+## Structures de données et types
+
+### Types de données
+
+La dernière version du standard ECMAScript définit sept types de données :
+
+- Six types de données primitifs :
+
+  - Type booléen : `true` et `false`.
+  - Type nul (`null`), un mot-clé spécial pour indiquer une valeur nulle (au sens informatique). JavaScript étant sensible à la casse, `null` n'est pas `Null`, `NULL`, ou toute autre variante.
+  - Un type pour les valeurs indéfinies (`undefined`).
+  - Un type pour les nombres entiers ou décimaux. Par exemple : `42` ou `3.14159`.
+  - Un type pour représenter les grands nombres entiers `BigInt`, par exemple `9007199254740992n`.
+  - Un type pour les chaînes de caractères, une séquence de caractères qui représente une valeur textuelle. Par exemple : "Coucou"
+  - Un type pour les symboles, apparus avec ECMAScript 2015 (ES6). Ce type est utilisé pour représenter des données immuables et uniques.
+
+- et un type pour les objets (_Object_)
+
+Bien que cette description couvre peu de types de données, ceux-ci vous permettent d'implémenter une grande variété de fonctions au sein de vos applications. [Les objets](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object) et [les fonctions](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Function) sont parmi les briques fondamentales du langage. On peut considérer, à première vue, les objets comme des conteneurs de valeurs et de fonctions pour une application.
+
+### Conversion de types de données
+
+JavaScript est un langage à typage dynamique. Cela signifie qu'il n'est pas nécessaire de spécifier le type de données d'une variable lors de sa déclaration. Les types de données sont convertis automatiquement durant l'exécution du script. Ainsi, il est possible de définir une variable de cette façon :
+
+```js
+var réponse = 42;
+```
+
+Et plus tard, d'affecter une chaîne de caractères à cette même variable :
+
+```js
+réponse = "Merci pour le dîner...";
+```
+
+JavaScript utilisant un typage dynamique, cette dernière instruction ne renverra pas d'erreur.
+
+Lorsque des expressions impliquent des chaînes de caractères et des valeurs numériques ainsi que l'opérateur +, JavaScript convertit les nombres en chaînes de caractères :
+
+```js
+x = "La réponse est " + 42; // "La réponse est 42"
+y = 42 + " est la réponse"; // "42 est la réponse"
+```
+
+Avec des instructions impliquant d'autres opérateurs, JavaScript ne convertit pas nécessairement les valeurs numériques en chaînes de caractères. Ainsi, on aura :
+
+```js
+"37" - 7; // 30
+"37" + 7; // "377"
+```
+
+### Conversion de chaînes de caractères en nombres
+
+Si un nombre est représenté en mémoire par une chaîne de caractères, il y a des méthodes pour effectuer la bonne conversion :
+
+- {{jsxref("Objets_globaux/parseInt", "parseInt()")}}
+- {{jsxref("Objets_globaux/parseFloat", "parseFloat()")}}
+
+`parseInt` renverra uniquement des nombres entiers, étant ainsi inappropriée pour la manipulation de nombre décimaux. Une bonne pratique pour cette fonction est de toujours inclure l'argument qui indique dans quelle base numérique le résultat doit être renvoyé (base 2, base 10...).
+
+```js
+parseInt("101", 2); // 5
+```
+
+#### L'opérateur + unaire
+
+Une autre méthode pour récupérer un nombre à partir d'une chaîne de caractères consiste à utiliser l'opérateur +.
+
+```js
+"1.1" + "1.1" = "1.11.1"
++"1.1" = 1.1 // fonctionne seulement avec le + unaire
+```
+
+## Littéraux
+
+Les littéraux sont utilisés pour représenter des valeurs en JavaScript. Ce sont des valeurs fixes, pas des variables, qui sont fournies _littéralement_ au script. Cette section décrit les différents types de littéraux :
+
+- [Littéraux de tableaux](<#littéraux tableaux>)
+- [Littéraux booléens](<#littéraux booléens>)
+- [Littéraux de nombres flottants](<#littéraux décimaux>)
+- [Littéraux numériques](<#littéraux numériques>)
+- [Littéraux d'objets](<#littéraux objets>)
+- [Littéraux d'expressions rationnelles](#regexp)
+- [Littéraux de chaînes de caractères](<#littéraux chaînes>)
+
+### Les littéraux de tableaux
+
+Un littéral de tableau est une liste de zéro ou plusieurs expressions, dont chacune représente l'élément d'un tableau, encadrées par des crochets (`[]`). Lorsqu'un tableau est créé à partir d'un littéral, il est initialisé avec les valeurs spécifiées qui sont ses éléments, sa longueur correspondant au nombre d'arguments donnés.
+
+L'exemple suivant crée ainsi le tableau `cafés` avec trois éléments et une taille égale à 3 :
+
+```js
+var cafés = ["Brésilien", "Colombien", "Kona"];
+```
+
+> **Note :** Un littéral de tableau est du type d'un initialisateur d'objets. Voir [l'utilisation d'initialisateurs d'objets](/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Initialisateur_objet).
+
+Si un tableau est créé en utilisant un littéral dans un script du plus haut niveau, JavaScript interprète le tableau chaque fois qu'il évalue l'expression contenant le littéral. De plus, un littéral utilisé dans une fonction est créé chaque fois que la fonction est appelée.
+
+Les littéraux de tableaux sont également des objets `Array`. Voir la page sur l'objet [`Array`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array) pour plus de détails.
+
+#### Les virgules supplémentaires
+
+Il n'est pas nécessaire de définir tous les éléments dans un littéral de tableau. Si vous utilisez deux virgules, l'une à la suite de l'autre, le tableau utilisera la valeur `undefined` pour les éléments non définis. L'exemple qui suit utilise le tableau poisson :
+
+```js
+var poisson = ["Clown", , "Chat"];
+```
+
+Ce tableau possède deux éléments ayant une valeur et un élément vide (`poisson[0]` vaut "Clown", `poisson[1]` vaut `undefined`, et `poisson[2]` vaut "Chat").
+
+Si une virgule est ajoutée à la fin de la liste des éléments, elle est ignorée. Dans le prochain exemple, la longueur du tableau est égale à 3. Il n'y a pas d'élément `maListe[3]`. Les autres virgules indiquent un nouvel élément.
+
+> **Note :** Avec d'anciennes versions de navigateurs, les virgules de fin peuvent causer des erreurs, il est fortement conseillé de les retirer.
+
+```js
+var maListe = ['maison', , 'école', ];
+```
+
+Dans l'exemple qui suit, la longueur du tableau est égale à 4 et `maListe[0]` et `maListe[2]` sont manquants.
+
+```js
+var maListe = [ , 'maison', , 'école'];
+```
+
+Dans l'exemple qui suit, la longueur du tableau est égale à 4 et `maListe[1]` et `maListe[3]` sont manquants.
+
+```js
+var maListe = ['maison', , 'école', , ];
+```
+
+Comprendre le fonctionnement des virgules supplémentaires est important. Cependant, lorsque vous écrivez du code, veillez, dès que c'est possible, à déclarer les éléments manquants avec `undefined` : cela améliorera la lisibilité de votre code et il sera ainsi plus facile à maintenir.
+
+### Les littéraux booléens
+
+Le type booléen possède deux valeurs littérales : `true` et `false`.
+
+Il ne faut pas confondre les valeurs `true` et `false` du type primitif booléen et les valeurs true et false de l'objet `Boolean`. L'objet `Boolean` permet de créer un objet autour du type de donnée booléen. Voir la page sur l'objet[ `Boolean`](/fr/docs/JavaScript/Reference/Objets_globaux/Boolean) pour plus d'informations.
+
+### Les littéraux numériques
+
+Les nombres {{jsxref("Number")}} et les grands entiers {{jsxref("BigInt")}} peuvent être exprimés en notation décimale (base 10), hexadécimale (base 16), octale (base 8) et binaire (base 2).
+
+- Les littéraux représentant des entiers décimaux sont une suite de chiffres qui ne commence pas par un 0 (zéro)
+- Un 0 (zéro) en préfixe indique que le littéral est en notation octale. Ces nombres ne peuvent être composés que des chiffres de 0 (zéro) à 7 (sept).
+- Un préfixe 0x (ou 0X) indique une notation hexadécimale. Les nombres hexadécimaux peuvent être composés de chiffres (0-9) et des lettres A à F (minuscules et majuscules) (la casse d'un caractère ne modifie pas sa valeur : `0xa = 0xA = 10` et `0xf = 0xF = 15`).
+- Un préfixe 0b (ou 0B) indique une notation binaire. Les nombres binaires peuvent être composés de 0 ou de 1 uniquement.
+
+Voici des exemples pour ces littéraux :
+
+    0, 117, -345, 123456789123456789n (notation décimale, base 10)
+    015, 0001, -077, 0o7777777777777n (notation octale, base 8)
+    0x1123, 0x00111, -0xF1A7, 0x123456789ABCDEFn (notation hexadécimale, base 16)
+    0b11, 0B0011, -0b11, 0b11101001010101010101n (notation binaire, base 2)
+
+Pour plus d'informations, voir [les littéraux numériques dans la grammaire lexicale de JavaScript](/fr/docs/Web/JavaScript/Reference/Grammaire_lexicale#Littéraux_numériques).
+
+### Les littéraux de nombres décimaux
+
+Un littéral de nombre décimal peut être composé de ces différentes parties :
+
+- Un entier, pouvant être signé (précédé d'un « + » ou d'un « - »),
+- Un point, séparateur décimal (« . »),
+- La partie décimale (un autre nombre)
+- Un exposant.
+
+L'exposant est la partie du nombre décimal commençant par un « e » ou un « E », suivie d'un entier pouvant être signé (précédé d'un « + » ou d'un « - »). Un littéral de nombre décimal doit comporter au moins un chiffre et soit un point (séparateur décimal) soit un « e » ou un « E ».
+
+Des exemples sont : 3.1415, -3.1E12, .1e12, et 2E-12.
+
+On peut raccourcir cette syntaxe en :
+
+    [(+|-)][chiffres].[chiffres][(E|e)[(+|-)]chiffres]
+
+Par exemple :
+
+    3.14
+    2345.789
+    .3333333333333333333
+
+### Les littéraux d'objets
+
+Un littéral d'objet - ou 'objet littéral' - est une liste de zéro ou plusieurs propriétés définies par des paires de noms/valeurs. Ces paires sont délimitées par des accolades (`{}`). N'utilisez pas un tel littéral en début d'instruction. En effet, l'accolade ouvrante sera mal interprétée (début de bloc) et causera une erreur ou un comportement incohérent.
+
+L'exemple qui suit montre l'utilisation d'un littéral d'objet. Le premier élément de l'objet `voiture` définit une propriété `maVoiture`, le deuxième élément : la propriété `getVoiture` invoque une fonction `(carTypes("Honda")),` le troisième élément, la propriété `special` utilise une variable existante (`soldes`).
+
+```js
+var soldes = "Toyota";
+
+function carTypes(nom) {
+  return (nom === "Honda") ?
+    nom :
+    "Désolé, nous ne vendons pas de " + nom + "." ;
+}
+
+var voiture = { maVoiture: "Saturn", getVoiture: carTypes("Honda"), spécial: soldes };
+
+console.log(voiture.maVoiture);   // Saturn
+console.log(voiture.getVoiture);  // Honda
+console.log(voiture.spécial); // Toyota
+```
+
+Il est également possible d'utiliser un littéral numérique ou un littéral de chaîne de caractères pour désigner le nom d'une propriété ou pour imbriquer un objet dans un autre. L'exemple qui suit illustre cette possibilité :
+
+```js
+var voiture = { plusieursVoitures: {a: "Saab", b: "Jeep"}, 7: "Mazda" };
+
+console.log(voiture.plusieursVoitures.b); // Jeep
+console.log(voiture[7]); // Mazda
+```
+
+Les noms des propriétés d'objets peuvent être n'importe quelle chaîne de caractères, y compris la chaîne vide. Si le nom de la propriété n'est pas un [identifiant](/fr/docs/Web/JavaScript/Guide/Types_et_grammaire#Variables) valide, il faudra qu'il soit placé entre guillemets. Les noms de propriétés qui ne sont pas des identifiants valides ne peuvent pas être utilisés pour accéder à la valeur en utilisant la notation pointée (objet.propriété). En revanche, il est possible d'y accéder avec la notation utilisant les crochets ("`[]`") comme pour les tableaux.
+
+```js
+var nomsBizarres = {
+  "": "Chaîne vide",
+  "!": "Bang !"
+}
+console.log(nomsBizarres."");   // SyntaxError: Unexpected string
+console.log(nomsBizarres[""]);  // Chaîne vide
+console.log(nomsBizarres.!);    // SyntaxError: Unexpected token !
+console.log(nomsBizarres["!"]); // Bang !
+```
+
+#### Augmentation des littéraux d'objets avec ES2015/ES6
+
+Avec ES2015, les littéraux d'objets permettent de définir le prototype lors de la construction de l'objet, permettent d'utiliser les affectations en notation raccourcie : `toto: toto`, de définir des méthodes, d'appeler les méthodes de l'objet parent avec `super` et d'utiliser des noms de propriétés calculées.
+
+```js
+var obj = {
+    // __proto__
+    __proto__: lePrototypeDeLObjet,
+    // Notation raccourcie pour ‘handler: handler’
+    handler,
+    // Méthodes
+    toString() {
+     // Appelle les méthodes de l'objet parent
+     return "d " + super.toString();
+    },
+    // Noms de propriétés calculés dynamiquement
+    [ 'prop_' + (() => 42)() ]: 42
+};
+```
+
+Attention :
+
+```js
+var toto = {a: "alpha", 2: "deux"};
+console.log(toto.a);    // alpha
+console.log(toto[2]);   // deux
+//console.log(toto.2);  // Erreur: parenthèse ) manquante après la liste d'argument
+//console.log(toto[a]); // Erreur: a n'est pas défini
+console.log(toto["a"]); // alpha
+console.log(toto["2"]); // deux
+```
+
+### Les littéraux d'expressions rationnelles
+
+Un littéral d'[expression rationnelle](/fr/docs/Web/JavaScript/Guide/Expressions_r%C3%A9guli%C3%A8res) est un motif encadré par deux barres obliques. Par exemple :
+
+```js
+var re = /ab+c/;
+```
+
+### Les littéraux de chaînes de caractères
+
+Un littéral de chaîne de caractères consiste en zéro ou plusieurs caractères encadrés par des guillemets droits doubles (`"`) ou des guillemets droits simples (`'`). Une chaîne de caractères doit être encadrée par des symboles du même type (guillemets droits doubles ou guillemets droits simples) :
+
+- `"toto"`
+- `'truc'`
+- `"1234"`
+- `"Une ligne \n une autre ligne"`
+- `"Aujourd'hui j'ai mangé une pomme"`
+
+Il est possible d'utiliser les méthodes de [`String`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/String) sur un tel littéral. JavaScript convertira automatiquement le littéral en un objet `String`, appellera la méthode puis détruira l'objet `String`. On peut également utiliser la propriété `String.length` sur un littéral de chaîne de caractère :
+
+```js
+console.log("j'ai mangé une pomme".length)
+// Affichera le nombre de caractères (y compris les blancs).
+// Dans ce cas, 20.
+```
+
+Il est préférable d'utiliser des littéraux de chaînes de caractères s'il n'est pas spécifiquement nécessaire d'utiliser un objet `String`. Voir la page sur l'objet [`String`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/String) pour plus de détails sur les objets `String`.
+
+Avec ECMAScript 2015, on peut également utiliser des littéraux sous forme de _gabarits_ (_templates_) en utilisant le caractère accent grave (\`) comme séparateur. Les gabarits de chaînes de caractères sont semblables aux fonctionnalités d'interpolation existantes en Python, Perl, etc. Ces gabarits permettent d'utiliser des balises afin d'adapter la construction de chaînes.
+
+```js
+// Littéral simple pour une chaîne
+`Un saut de ligne '\n' en JavaScript.`
+
+// On peut écrire une chaîne sur plusieurs
+// lignes
+`Dans les gabarits, on peut écrire
+  sur plusieurs lignes. `
+
+// Interpolation de chaîne
+var nom = "Robert", jour = "aujourd'hui";
+`Bonjour ${nom}, comment allez-vous ${jour} ?`
+
+// On peut construire un préfixe HTTP
+// afin de construire plus facilement
+// des requêtes via des substitutions
+POST`http://toto.org/truc?a=${a}&b=${b}
+     Content-Type: application/json
+     X-Credentials: ${credentials}
+     { "toto": ${toto},
+       "truc": ${truc}}`(myOnReadyStateChangeHandler);
+```
+
+#### Utilisation des caractères spéciaux
+
+En plus des caractères « classiques », il est possible d'insérer des caractères spéciaux dans les chaînes de caractères. Voici un exemple :
+
+```js
+"une ligne \n une autre ligne"
+```
+
+Voici un tableau listant les caractères spéciaux qu'il est possible d'utiliser dans les chaînes de caractères JavaScript :
+
+| Caractère   | Signification                                                                                                                                                                                        |
+| ----------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `\0`        | Octet null                                                                                                                                                                                           |
+| `\b`        | Retour arrière                                                                                                                                                                                       |
+| `\f`        | Saut de page                                                                                                                                                                                         |
+| `\n`        | Nouvelle ligne                                                                                                                                                                                       |
+| `\r`        | Retour chariot                                                                                                                                                                                       |
+| `\t`        | Tabulation                                                                                                                                                                                           |
+| `\v`        | Tabulation verticale                                                                                                                                                                                 |
+| `\'`        | Apostrophe ou guillemet droit simple                                                                                                                                                                 |
+| `\"`        | Guillemet droit double                                                                                                                                                                               |
+| `\\`        | Barre oblique inversée                                                                                                                                                                               |
+| `\XXX`      | Le caractère dont l'encodage Latin-1 est spécifié grâce à, au plus, 3 chiffres octaux _XXX_ entre 0 et 377. \251, par exemple représente le caractère copyright.                                     |
+|             |                                                                                                                                                                                                      |
+| `\xXX`      | Le caractère dont l'encodage Latin-1 est spécifié par deux chiffres hexadécimaux entre 00 et FF. Ainsi, \xA9 correspond à la séquence hexadécimale pour le caractère copyright.                      |
+|             |                                                                                                                                                                                                      |
+| `\uXXXX`    | Le caractère Unicode spécifié par quatre chiffres hexadécimaux _XXXX_. Ainsi, \u00A9 correspondra à la séquence Unicode du symbole copyright. Voir {{anch("Unicode escape sequences")}}. |
+| `\u{XXXXX}` | Échappement de codes Unicode. Par exemple, \u{2F804} est équivalent à la combinaison d'échappements « simples » \uD87E\uDC04.                                                                        |
+
+#### Les caractères d'échappement
+
+Pour les caractères qui ne font pas partie du tableau précédent, les barres obliques inversées (_backslash_) les précédant sont ignorées. Cependant, cet usage est obsolète et devrait être évité.
+
+En précédant d'une barre oblique inversée les guillemets droits doubles, on _échappe_ ces caractères. Voici un exemple :
+
+```js
+var citation = "Il lit \"Bug Jargal\" de V. Hugo.";
+console.log(citation);
+```
+
+Le résultat serait alors
+
+    Il lit "Bug Jargal" de V. Hugo.
+
+Pour inclure une barre oblique inversée dans une chaîne de caractères, il faut aussi l'échapper. Par exemple, pour stocker le chemin `c:\temp` dans une chaîne de caractères, on utilisera le code suivant :
+
+```js
+var chemin = "c:\\temp";
+```
+
+Il est également possible d'échapper des sauts de lignes de la même façon. La barre oblique inversée et le saut de ligne seront alors ignorés dans la valeur de la chaîne de caractères.
+
+```js
+var str = "cette chaîne \
+est cassée \
+sur plusieurs \
+lignes."
+console.log(str);   // cette chaîne est cassée sur plusieurs lignes.
+```
+
+Avant ECMAScript 2015 (ES6), JavaScript ne disposait pas d'une syntaxe permettant de traiter les chaînes de caractères comme des contenus de fichier, il est possible d'ajouter un caractère de saut de ligne échappé et un saut de ligne en fin de ligne en utilisant cette façon :
+
+```js
+var poème =
+"Les roses sont rouges,\n\
+Les violettes sont bleues.\n\
+Le miel est sucré,\n\
+Et moi je suis."
+```
+
+Grâce à ES6, on peut utiliser des [littéraux de gabarits qui offrent de nouvelles fonctionnalités](https://tech.mozfr.org/post/2015/05/27/ES6-en-details-%3A-les-gabarits-de-chaines-de-caracteres) dont une qui permet d'avoir des chaînes de caractères écrites sur plusieurs lignes :
+
+```js
+var poème =
+`Les roses sont rouges,
+Les violettes sont bleues,
+Le miel est sucré,
+Et moi je suis.`
+```
+
+## En savoir plus
+
+Ce chapitre est centré sur les bases de la syntaxe, les déclarations et les types utilisés en JavaScript. Pour en savoir plus sur les différents composants du langage, voir les chapitres suivants du guide:
+
+- [Contrôle du flux et gestion des erreurs](/fr/docs/Web/JavaScript/Guide/Contrôle_du_flux_Gestion_des_erreurs)
+- [Boucles et itération](/fr/docs/Web/JavaScript/Guide/Boucles_et_itération)
+- [Fonctions](/fr/docs/Web/JavaScript/Guide/Fonctions)
+- [Expressions et opérateurs](/fr/docs/Web/JavaScript/Guide/Expressions_et_Opérateurs)
+
+Dans le chapitre suivant, on abordera les structures conditionnelles, permettant de diriger le flux d'instructions et la gestion des erreurs.
+
+{{PreviousNext("Web/JavaScript/Guide/Introduction", "Web/JavaScript/Guide/Contrôle_du_flux_Gestion_des_erreurs")}}
diff --git a/files/fr/web/javascript/guide/index.html b/files/fr/web/javascript/guide/index.html
deleted file mode 100644
index ef708eef08..0000000000
--- a/files/fr/web/javascript/guide/index.html
+++ /dev/null
@@ -1,169 +0,0 @@
----
-title: Guide JavaScript
-slug: Web/JavaScript/Guide
-tags:
-  - Guide
-  - JavaScript
-translation_of: Web/JavaScript/Guide
----
-<div>{{jsSidebar("JavaScript Guide")}}</div>
-
-<p>Le guide JavaScript illustre comment utiliser <a href="/fr/docs/Web/JavaScript">JavaScript</a> et fournit un aperçu des fonctionnalités du langage. Pour des informations exhaustives à propos des fonctionnalités du langage, voir la <a href="/fr/docs/Web/JavaScript/Reference">référence JavaScript</a>.</p>
-
-<h2 id="Chapitres">Chapitres</h2>
-
-<p>Ce guide est divisé en plusieurs chapitres :</p>
-
-<h2 id="Introduction"><a href="/fr/docs/Web/JavaScript/Guide/Introduction">Introduction</a></h2>
-
-<ul>
-  <li><a href="/fr/docs/Web/JavaScript/Guide/Introduction#o.c3.b9_trouver_des_informations_concernant_javascript">À propos de ce guide</a></li>
-  <li><a href="/fr/docs/Web/JavaScript/Guide/Introduction#qu'est-ce_que_javascript_.3f">À propos de JavaScript</a></li>
-  <li><a href="/fr/docs/Web/JavaScript/Guide/Introduction#javascript_and_java">JavaScript et Java</a></li>
-  <li><a href="/fr/docs/Web/JavaScript/Guide/Introduction#javascript_and_the_ecmascript_specification">ECMAScript</a></li>
-  <li><a href="/fr/docs/Web/JavaScript/Guide/Introduction#d.c3.a9marrer_avec_javascript">Les outils</a></li>
-  <li><a href="/fr/docs/Web/JavaScript/Guide/Introduction#coucou_monde_(hello_world)">Hello World</a></li>
-</ul>
-
-<h2><a href="/fr/docs/Web/JavaScript/Guide/Grammar_and_types">Grammaire et types</a></h2>
-
-<ul>
-  <li><a href="/fr/docs/Web/JavaScript/Guide/Grammar_and_types#les_bases_du_langage">Syntaxe de base et commentaires</a></li>
-  <li><a href="/fr/docs/Web/JavaScript/Guide/Grammar_and_types#d.c3.a9clarations">Déclarations</a></li>
-  <li><a href="/fr/docs/Web/JavaScript/Guide/Grammar_and_types#les_port.c3.a9es_de_variables">Portées des variables</a></li>
-  <li><a href="/fr/docs/Web/JavaScript/Guide/Grammar_and_types#remont.c3.a9e_de_variables_(hoisting)">Remontée des variables</a></li>
-  <li><a href="/fr/docs/Web/JavaScript/Guide/Grammar_and_types#structures_de_donn.c3.a9es_et_types">Structures de données et types</a></li>
-  <li><a href="/fr/docs/Web/JavaScript/Guide/Grammar_and_types#litt.c3.a9raux">Littéraux</a></li>
-</ul>
-
-<h2><a href="/fr/docs/Web/JavaScript/Guide/Control_flow_and_error_handling">Contrôle du flux et gestion des erreurs</a></h2>
-
-<ul>
-  <li><a href="/fr/docs/Web/JavaScript/Guide/Contr%C3%B4le_du_flux_Gestion_des_erreurs#Instruction_if...else"><code>if...else</a></code></li>
-  <li><a href="/fr/docs/Web/JavaScript/Guide/Contr%C3%B4le_du_flux_Gestion_des_erreurs#L%27instruction_switch"><code>switch</a></code></li>
-  <li><a href="/fr/docs/Web/JavaScript/Guide/Contr%C3%B4le_du_flux_Gestion_des_erreurs#L%27instruction_try...catch"><code>try/catch/throw</a></code></li>
-  <li><a href="/fr/docs/Web/JavaScript/Guide/Contr%C3%B4le_du_flux_Gestion_des_erreurs#Utiliser_les_objets_Error">Objets <code>Error</code></a></li>
-</ul>
-
-<h2><a href="/fr/docs/Web/JavaScript/Guide/Loops_and_iteration">Itération et boucles</a></h2>
-
-<ul>
-  <li><a href="/fr/docs/Web/JavaScript/Guide/Boucles_et_it%C3%A9ration#L%27instruction_for"><code>for</code></a></li>
-  <li><a href="/fr/docs/Web/JavaScript/Guide/Boucles_et_it%C3%A9ration#L%27instruction_while"><code>while</code></a></li>
-  <li><a href="/fr/docs/Web/JavaScript/Guide/Boucles_et_it%C3%A9ration#L%27instruction_do...while"><code>do...while</code></a></li>
-  <li><a href="/fr/docs/Web/JavaScript/Guide/Boucles_et_it%C3%A9ration#L%27instruction_break"><code>break</code></a>/<a href="/fr/docs/Web/JavaScript/Guide/Boucles_et_it%C3%A9ration#L%27instruction_continue">continue</code></a></li>
-  <li><a href="/fr/docs/Web/JavaScript/Guide/Boucles_et_it%C3%A9ration#L%27instruction_for...in"><code>for..in</code></a></li>
-  <li><a href="/fr/docs/Web/JavaScript/Guide/Loops_and_iteration#l'instruction_for...of"><code>for..of</code></a></li>
-</ul>
-
-<h2><a href="/fr/docs/Web/JavaScript/Guide/Functions">Fonctions</a></h2>
-
-<ul>
-  <li><a href="/fr/docs/Web/JavaScript/Guide/Functions#d.c3.a9finir_des_fonctions">Définir des fonctions</a></li>
-  <li><a href="/fr/docs/Web/JavaScript/Guide/Functions#appeler_des_fonctions">Appeler des fonctions</a></li>
-  <li><a href="/fr/docs/Web/JavaScript/Guide/Functions#port.c3.a9e_d'une_fonction">Portées des fonctions</a></li>
-  <li><a href="/fr/docs/Web/JavaScript/Guide/Functions#fermetures_(closures)">Fermetures (<em>closures</em>)</a></li>
-  <li><a href="/fr/docs/Web/JavaScript/Guide/Functions#utiliser_l'objet_arguments">Arguments</a> et <a href="/fr/docs/Web/JavaScript/Guide/Functions#param.c3.a8tres_des_fonctions">paramètres</a></li>
-  <li><a href="/fr/docs/Web/JavaScript/Guide/Functions#fonctions_fl.c3.a9ch.c3.a9es">Fonctions fléchées</a></li>
-</ul>
-
-<h2><a href="/fr/docs/Web/JavaScript/Guide/Expressions_and_Operators">Expressions et opérateurs</a></h2>
-
-<ul>
-  <li><a href="/fr/docs/Web/JavaScript/Guide/Expressions_et_Op%C3%A9rateurs#Op.C3.A9rateurs_d%27affectation">Affectation</a> et <a href="/fr/docs/Web/JavaScript/Guide/Expressions_et_Op%C3%A9rateurs#Op.C3.A9rateurs_de_comparaison">comparaisons</a></li>
-  <li><a href="/fr/docs/Web/JavaScript/Guide/Expressions_and_Operators#op.c3.a9rateurs_arithm.c3.a9tiques">Opérateurs arithmétiques</a></li>
-  <li><a href="/fr/docs/Web/JavaScript/Guide/Expressions_et_Op%C3%A9rateurs#Op.C3.A9rateurs_binaires">Opérateurs binaires</a> et <a href="/fr/docs/Web/JavaScript/Guide/Expressions_et_Op%C3%A9rateurs#Op.C3.A9rateurs_logiques">logiques</a></li>
-  <li><a href="/fr/docs/Web/JavaScript/Guide/Expressions_et_Op%C3%A9rateurs#Op.C3.A9rateur_conditionnel_ternaire">Opérateur conditionnel</a></li>
-</ul>
-
-<h2><a href="/fr/docs/Web/JavaScript/Guide/Numbers_and_dates">Nombres et dates</a></h2>
-
-<ul>
-  <li><a href="/fr/docs/Web/JavaScript/Guide/Numbers_and_dates#nombres">Littéraux numériques</a></li>
-  <li><a href="/fr/docs/Web/JavaScript/Guide/Numbers_and_dates#l'objet_number">Objet <code>Number</code></a></li>
-  <li><a href="/fr/docs/Web/JavaScript/Guide/Numbers_and_dates#l'objet_math">Objet <code>Math</code></a></li>
-  <li><a href="/fr/docs/Web/JavaScript/Guide/Numbers_and_dates#l'objet_date">Objet <code>Date</code></a></li>
-</ul>
-
-<h2><a href="/fr/docs/Web/JavaScript/Guide/Text_formatting">Formatage du texte</a></h2>
-
-<ul>
-  <li><a href="/fr/docs/Web/JavaScript/Guide/Text_formatting#les_litt.c3.a9raux_de_cha.c3.aenes_de_caract.c3.a8res">Littéraux de chaînes de caractères</a></li>
-  <li><a href="/fr/docs/Web/JavaScript/Guide/Text_formatting#les_objets_string">Objet <code>String</code></a></li>
-  <li><a href="/fr/docs/Web/JavaScript/Guide/Text_formatting#les_litt%c3%a9raux_de_gabarits">Littéraux de gabarits</a></li>
-  <li><a href="/fr/docs/Web/JavaScript/Guide/Text_formatting#internationalisation">Internationalisation</a></li>
-  <li><a href="/fr/docs/Web/JavaScript/Guide/Text_formatting#les_expressions_rationnelles">Expressions rationnelles</a></li>
-</ul>
-
-
-<h2><a href="/fr/docs/Web/JavaScript/Guide/Indexed_collections#le_type_array">Collections indexées</a></h2>
-
-<ul>
-  <li><a href="/en-US/docs/Web/JavaScript/Guide/Indexed_collections#array_object">Tableaux</a></li>
-  <li><a href="/fr/docs/Web/JavaScript/Guide/Indexed_collections#les_tableaux_typ.c3.a9s">Tableaux typés</a></li>
-</ul>
-
-<h2><a href="/fr/docs/Web/JavaScript/Guide/Keyed_collections">Collections avec clés</a> - <code><a href="/fr/docs/Web/JavaScript/Guide/Keyed_collections#le_type_map">Map</a></code></h2>
-
-<ul>
-  <li><a href="/en-US/docs/Web/JavaScript/Guide/Keyed_collections#weakmap_object"><code>WeakMap</code></a></li>
-  <li><a href="/fr/docs/Web/JavaScript/Guide/Keyed_collections#le_type_set"><code>Set</code></a></li>
-  <li><a href="/fr/docs/Web/JavaScript/Guide/Keyed_collections#le_type_weakset"><code>WeakSet</code></a></li>
-</ul>
-
-<h2><a href="/fr/docs/Web/JavaScript/Guide/Working_with_Objects">Utiliser les objets</a></h2>
-
-<ul>
-  <li><a href="/fr/docs/Web/JavaScript/Guide/Working_with_Objects#les_objets_et_les_propri.c3.a9t.c3.a9s">Objets et propriétés</a></li>
-  <li><a href="/fr/docs/Web/JavaScript/Guide/Working_with_Objects#cr.c3.a9er_de_nouveaux_objets">Création d'objets</a></li>
-  <li><a href="/fr/docs/Web/JavaScript/Guide/Working_with_Objects#d.c3.a9finir_des_m.c3.a9thodes">Définition de méthodes</a></li>
-  <li><a href="/fr/docs/Web/JavaScript/Guide/Working_with_Objects#d.c3.a9finir_des_accesseurs_et_des_mutateurs_(getters_et_setters)">Accesseurs et mutateurs</a></li>
-</ul>
-
-<h2><a href="/fr/docs/Web/JavaScript/Guide/Details_of_the_Object_Model">Le modèle objet JavaScript en détails</a></h2>
-
-<ul>
-  <li><a href="/fr/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#langages_de_prototypes_.2f_langages_de_classes">Modèle à base de prototypes</a></li>
-  <li><a href="/fr/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#la_cr.c3.a9ation_de_la_hi.c3.a9rarchie">Créer des hiérarchies d'objets</a></li>
-  <li><a href="/fr/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#l'h.c3.a9ritage_de_propri.c3.a9t.c3.a9s_.3a_les_subtilit.c3.a9s">Héritage</a></li>
-</ul>
-
-<h2><a href="/fr/docs/Web/JavaScript/Guide/Using_promises">Promesses</a></h2>
-
-<ul>
-  <li><a href="/fr/docs/Web/JavaScript/Guide/Using_promises#garanties">Garanties</a></li>
-  <li><a href="/fr/docs/Web/JavaScript/Guide/Using_promises#cha%c3%aenage_des_promesses">Chaînage</a></li>
-  <li><a href="/fr/docs/Web/JavaScript/Guide/Using_promises#propagation_des_erreurs">Propagation des erreurs</a></li>
-  <li><a href="/fr/docs/Web/JavaScript/Guide/Using_promises#composition">Composition</a></li>
-  <li><a href="/fr/docs/Web/JavaScript/Guide/Using_promises#gestion_du_temps">Gestion du temps</a></li>
-</ul>
-
-<h2><a href="/fr/docs/Web/JavaScript/Guide/Iterators_and_Generators">Itérateurs et générateurs</a></h2>
-
-<ul>
-  <li><a href="/fr/docs/Web/JavaScript/Guide/Iterators_and_Generators#it.c3.a9rateurs">Itérateurs</a></li>
-  <li><a href="/fr/docs/Web/JavaScript/Guide/Iterators_and_Generators#it.c3.a9rables">Itérables</a></li>
-  <li><a href="/fr/docs/Web/JavaScript/Guide/Iterators_and_Generators#g.c3.a9n.c3.a9rateurs">Générateurs</a></li>
-</ul>
-
-<h2><a href="/fr/docs/Web/JavaScript/Guide/Meta_programming">Métaprogrammation</a></h2>
-
-<ul>
-  <li><a href="/fr/docs/Web/JavaScript/Guide/Meta_programming#les_proxies"><code>Proxy</code></a></li>
-  <li><a href="/fr/docs/Web/JavaScript/Guide/Meta_programming#les_gestionnaires_et_les_trappes">Gestionnaires et trappes</a></li>
-  <li><a href="/fr/docs/Web/JavaScript/Guide/Meta_programming#proxies_r.c3.a9vocables">Proxy révocable</a></li>
-  <li><a href="/fr/docs/Web/JavaScript/Guide/Meta_programming#r.c3.a9flexion"><code>Reflect</code></a></li>
-</ul>
-
-<h2><a href="/fr/docs/Web/JavaScript/Guide/Modules">Modules JavaScript</a></h2>
-
-<ul>
-  <li><a href="/fr/docs/Web/JavaScript/Guide/Modules#exporting_module_features">Exporter</a></li>
-  <li><a href="/fr/docs/Web/JavaScript/Guide/Modules#importing_features_into_your_script">Importer</a></li>
-  <li><a href="/fr/docs/Web/JavaScript/Guide/Modules#default_exports_versus_named_exports">Exports par défaut</a></li>
-  <li><a href="/fr/docs/Web/JavaScript/Guide/Modules#renaming_imports_and_exports">Renommage</a></li>
-  <li><a href="/fr/docs/Web/JavaScript/Guide/Modules#aggregating_modules">Agrégation de modules</a></li>
-  <li><a href="/fr/docs/Web/JavaScript/Guide/Modules#dynamic_module_loading">Chargement dynamique de modules</a></li>
-</ul>
-
-<p>{{Next("Web/JavaScript/Guide/Introduction")}}</p>
diff --git a/files/fr/web/javascript/guide/index.md b/files/fr/web/javascript/guide/index.md
new file mode 100644
index 0000000000..bcf109d502
--- /dev/null
+++ b/files/fr/web/javascript/guide/index.md
@@ -0,0 +1,136 @@
+---
+title: Guide JavaScript
+slug: Web/JavaScript/Guide
+tags:
+  - Guide
+  - JavaScript
+translation_of: Web/JavaScript/Guide
+---
+{{jsSidebar("JavaScript Guide")}}
+
+Le guide JavaScript illustre comment utiliser [JavaScript](/fr/docs/Web/JavaScript) et fournit un aperçu des fonctionnalités du langage. Pour des informations exhaustives à propos des fonctionnalités du langage, voir la [référence JavaScript](/fr/docs/Web/JavaScript/Reference).
+
+## Chapitres
+
+Ce guide est divisé en plusieurs chapitres :
+
+## [Introduction](/fr/docs/Web/JavaScript/Guide/Introduction)
+
+- [À propos de ce guide](/fr/docs/Web/JavaScript/Guide/Introduction#o.c3.b9_trouver_des_informations_concernant_javascript)
+- [À propos de JavaScript](/fr/docs/Web/JavaScript/Guide/Introduction#qu'est-ce_que_javascript_.3f)
+- [JavaScript et Java](/fr/docs/Web/JavaScript/Guide/Introduction#javascript_and_java)
+- [ECMAScript](/fr/docs/Web/JavaScript/Guide/Introduction#javascript_and_the_ecmascript_specification)
+- [Les outils](/fr/docs/Web/JavaScript/Guide/Introduction#d.c3.a9marrer_avec_javascript)
+- [Hello World](</fr/docs/Web/JavaScript/Guide/Introduction#coucou_monde_(hello_world)>)
+
+## [Grammaire et types](/fr/docs/Web/JavaScript/Guide/Grammar_and_types)
+
+- [Syntaxe de base et commentaires](/fr/docs/Web/JavaScript/Guide/Grammar_and_types#les_bases_du_langage)
+- [Déclarations](/fr/docs/Web/JavaScript/Guide/Grammar_and_types#d.c3.a9clarations)
+- [Portées des variables](/fr/docs/Web/JavaScript/Guide/Grammar_and_types#les_port.c3.a9es_de_variables)
+- [Remontée des variables](</fr/docs/Web/JavaScript/Guide/Grammar_and_types#remont.c3.a9e_de_variables_(hoisting)>)
+- [Structures de données et types](/fr/docs/Web/JavaScript/Guide/Grammar_and_types#structures_de_donn.c3.a9es_et_types)
+- [Littéraux](/fr/docs/Web/JavaScript/Guide/Grammar_and_types#litt.c3.a9raux)
+
+## [Contrôle du flux et gestion des erreurs](/fr/docs/Web/JavaScript/Guide/Control_flow_and_error_handling)
+
+- [`if...else`](/fr/docs/Web/JavaScript/Guide/Contr%C3%B4le_du_flux_Gestion_des_erreurs#Instruction_if...else)
+- [`switch`](/fr/docs/Web/JavaScript/Guide/Contr%C3%B4le_du_flux_Gestion_des_erreurs#L%27instruction_switch)
+- [`try/catch/throw`](/fr/docs/Web/JavaScript/Guide/Contr%C3%B4le_du_flux_Gestion_des_erreurs#L%27instruction_try...catch)
+- [Objets `Error`](/fr/docs/Web/JavaScript/Guide/Contr%C3%B4le_du_flux_Gestion_des_erreurs#Utiliser_les_objets_Error)
+
+## [Itération et boucles](/fr/docs/Web/JavaScript/Guide/Loops_and_iteration)
+
+- [`for`](/fr/docs/Web/JavaScript/Guide/Boucles_et_it%C3%A9ration#L%27instruction_for)
+- [`while`](/fr/docs/Web/JavaScript/Guide/Boucles_et_it%C3%A9ration#L%27instruction_while)
+- [`do...while`](/fr/docs/Web/JavaScript/Guide/Boucles_et_it%C3%A9ration#L%27instruction_do...while)
+- [`break`](/fr/docs/Web/JavaScript/Guide/Boucles_et_it%C3%A9ration#L%27instruction_break)/[continue](/fr/docs/Web/JavaScript/Guide/Boucles_et_it%C3%A9ration#L%27instruction_continue)
+- [`for..in`](/fr/docs/Web/JavaScript/Guide/Boucles_et_it%C3%A9ration#L%27instruction_for...in)
+- [`for..of`](/fr/docs/Web/JavaScript/Guide/Loops_and_iteration#l'instruction_for...of)
+
+## [Fonctions](/fr/docs/Web/JavaScript/Guide/Functions)
+
+- [Définir des fonctions](/fr/docs/Web/JavaScript/Guide/Functions#d.c3.a9finir_des_fonctions)
+- [Appeler des fonctions](/fr/docs/Web/JavaScript/Guide/Functions#appeler_des_fonctions)
+- [Portées des fonctions](/fr/docs/Web/JavaScript/Guide/Functions#port.c3.a9e_d'une_fonction)
+- [Fermetures (_closures_)](</fr/docs/Web/JavaScript/Guide/Functions#fermetures_(closures)>)
+- [Arguments](/fr/docs/Web/JavaScript/Guide/Functions#utiliser_l'objet_arguments) et [paramètres](/fr/docs/Web/JavaScript/Guide/Functions#param.c3.a8tres_des_fonctions)
+- [Fonctions fléchées](/fr/docs/Web/JavaScript/Guide/Functions#fonctions_fl.c3.a9ch.c3.a9es)
+
+## [Expressions et opérateurs](/fr/docs/Web/JavaScript/Guide/Expressions_and_Operators)
+
+- [Affectation](/fr/docs/Web/JavaScript/Guide/Expressions_et_Op%C3%A9rateurs#Op.C3.A9rateurs_d%27affectation) et [comparaisons](/fr/docs/Web/JavaScript/Guide/Expressions_et_Op%C3%A9rateurs#Op.C3.A9rateurs_de_comparaison)
+- [Opérateurs arithmétiques](/fr/docs/Web/JavaScript/Guide/Expressions_and_Operators#op.c3.a9rateurs_arithm.c3.a9tiques)
+- [Opérateurs binaires](/fr/docs/Web/JavaScript/Guide/Expressions_et_Op%C3%A9rateurs#Op.C3.A9rateurs_binaires) et [logiques](/fr/docs/Web/JavaScript/Guide/Expressions_et_Op%C3%A9rateurs#Op.C3.A9rateurs_logiques)
+- [Opérateur conditionnel](/fr/docs/Web/JavaScript/Guide/Expressions_et_Op%C3%A9rateurs#Op.C3.A9rateur_conditionnel_ternaire)
+
+## [Nombres et dates](/fr/docs/Web/JavaScript/Guide/Numbers_and_dates)
+
+- [Littéraux numériques](/fr/docs/Web/JavaScript/Guide/Numbers_and_dates#nombres)
+- [Objet `Number`](/fr/docs/Web/JavaScript/Guide/Numbers_and_dates#l'objet_number)
+- [Objet `Math`](/fr/docs/Web/JavaScript/Guide/Numbers_and_dates#l'objet_math)
+- [Objet `Date`](/fr/docs/Web/JavaScript/Guide/Numbers_and_dates#l'objet_date)
+
+## [Formatage du texte](/fr/docs/Web/JavaScript/Guide/Text_formatting)
+
+- [Littéraux de chaînes de caractères](/fr/docs/Web/JavaScript/Guide/Text_formatting#les_litt.c3.a9raux_de_cha.c3.aenes_de_caract.c3.a8res)
+- [Objet `String`](/fr/docs/Web/JavaScript/Guide/Text_formatting#les_objets_string)
+- [Littéraux de gabarits](/fr/docs/Web/JavaScript/Guide/Text_formatting#les_litt%c3%a9raux_de_gabarits)
+- [Internationalisation](/fr/docs/Web/JavaScript/Guide/Text_formatting#internationalisation)
+- [Expressions rationnelles](/fr/docs/Web/JavaScript/Guide/Text_formatting#les_expressions_rationnelles)
+
+## [Collections indexées](/fr/docs/Web/JavaScript/Guide/Indexed_collections#le_type_array)
+
+- [Tableaux](/en-US/docs/Web/JavaScript/Guide/Indexed_collections#array_object)
+- [Tableaux typés](/fr/docs/Web/JavaScript/Guide/Indexed_collections#les_tableaux_typ.c3.a9s)
+
+## [Collections avec clés](/fr/docs/Web/JavaScript/Guide/Keyed_collections) - [`Map`](/fr/docs/Web/JavaScript/Guide/Keyed_collections#le_type_map)
+
+- [`WeakMap`](/en-US/docs/Web/JavaScript/Guide/Keyed_collections#weakmap_object)
+- [`Set`](/fr/docs/Web/JavaScript/Guide/Keyed_collections#le_type_set)
+- [`WeakSet`](/fr/docs/Web/JavaScript/Guide/Keyed_collections#le_type_weakset)
+
+## [Utiliser les objets](/fr/docs/Web/JavaScript/Guide/Working_with_Objects)
+
+- [Objets et propriétés](/fr/docs/Web/JavaScript/Guide/Working_with_Objects#les_objets_et_les_propri.c3.a9t.c3.a9s)
+- [Création d'objets](/fr/docs/Web/JavaScript/Guide/Working_with_Objects#cr.c3.a9er_de_nouveaux_objets)
+- [Définition de méthodes](/fr/docs/Web/JavaScript/Guide/Working_with_Objects#d.c3.a9finir_des_m.c3.a9thodes)
+- [Accesseurs et mutateurs](</fr/docs/Web/JavaScript/Guide/Working_with_Objects#d.c3.a9finir_des_accesseurs_et_des_mutateurs_(getters_et_setters)>)
+
+## [Le modèle objet JavaScript en détails](/fr/docs/Web/JavaScript/Guide/Details_of_the_Object_Model)
+
+- [Modèle à base de prototypes](/fr/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#langages_de_prototypes_.2f_langages_de_classes)
+- [Créer des hiérarchies d'objets](/fr/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#la_cr.c3.a9ation_de_la_hi.c3.a9rarchie)
+- [Héritage](/fr/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#l'h.c3.a9ritage_de_propri.c3.a9t.c3.a9s_.3a_les_subtilit.c3.a9s)
+
+## [Promesses](/fr/docs/Web/JavaScript/Guide/Using_promises)
+
+- [Garanties](/fr/docs/Web/JavaScript/Guide/Using_promises#garanties)
+- [Chaînage](/fr/docs/Web/JavaScript/Guide/Using_promises#cha%c3%aenage_des_promesses)
+- [Propagation des erreurs](/fr/docs/Web/JavaScript/Guide/Using_promises#propagation_des_erreurs)
+- [Composition](/fr/docs/Web/JavaScript/Guide/Using_promises#composition)
+- [Gestion du temps](/fr/docs/Web/JavaScript/Guide/Using_promises#gestion_du_temps)
+
+## [Itérateurs et générateurs](/fr/docs/Web/JavaScript/Guide/Iterators_and_Generators)
+
+- [Itérateurs](/fr/docs/Web/JavaScript/Guide/Iterators_and_Generators#it.c3.a9rateurs)
+- [Itérables](/fr/docs/Web/JavaScript/Guide/Iterators_and_Generators#it.c3.a9rables)
+- [Générateurs](/fr/docs/Web/JavaScript/Guide/Iterators_and_Generators#g.c3.a9n.c3.a9rateurs)
+
+## [Métaprogrammation](/fr/docs/Web/JavaScript/Guide/Meta_programming)
+
+- [`Proxy`](/fr/docs/Web/JavaScript/Guide/Meta_programming#les_proxies)
+- [Gestionnaires et trappes](/fr/docs/Web/JavaScript/Guide/Meta_programming#les_gestionnaires_et_les_trappes)
+- [Proxy révocable](/fr/docs/Web/JavaScript/Guide/Meta_programming#proxies_r.c3.a9vocables)
+- [`Reflect`](/fr/docs/Web/JavaScript/Guide/Meta_programming#r.c3.a9flexion)
+
+## [Modules JavaScript](/fr/docs/Web/JavaScript/Guide/Modules)
+
+- [Exporter](/fr/docs/Web/JavaScript/Guide/Modules#exporting_module_features)
+- [Importer](/fr/docs/Web/JavaScript/Guide/Modules#importing_features_into_your_script)
+- [Exports par défaut](/fr/docs/Web/JavaScript/Guide/Modules#default_exports_versus_named_exports)
+- [Renommage](/fr/docs/Web/JavaScript/Guide/Modules#renaming_imports_and_exports)
+- [Agrégation de modules](/fr/docs/Web/JavaScript/Guide/Modules#aggregating_modules)
+- [Chargement dynamique de modules](/fr/docs/Web/JavaScript/Guide/Modules#dynamic_module_loading)
+
+{{Next("Web/JavaScript/Guide/Introduction")}}
diff --git a/files/fr/web/javascript/guide/indexed_collections/index.html b/files/fr/web/javascript/guide/indexed_collections/index.html
deleted file mode 100644
index 739de18bcc..0000000000
--- a/files/fr/web/javascript/guide/indexed_collections/index.html
+++ /dev/null
@@ -1,426 +0,0 @@
----
-title: Collections indexées
-slug: Web/JavaScript/Guide/Indexed_collections
-tags:
-  - Array
-  - Guide
-  - JavaScript
-translation_of: Web/JavaScript/Guide/Indexed_collections
-original_slug: Web/JavaScript/Guide/Collections_indexées
----
-<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Expressions_régulières", "Web/JavaScript/Guide/Collections_avec_clés")}}</div>
-
-<p>Ce chapitre présente les collections de données qui sont ordonnées par un indice. Cela inclue les tableaux et les objets semblables à des tableaux que sont les objets {{jsxref("Array")}} et les objets {{jsxref("TypedArray")}}.</p>
-
-<h2 id="Le_type_Array">Le type <code>Array</code></h2>
-
-<p>Un <em>tableau</em> (<em>array</em> en anglais) est un ensemble ordonné de valeurs auxquelles on peut faire référence avec un nom et un indice. Par exemple, si on a un tableau <code>emp</code> qui contient les noms d'employés indexés par leurs numéros d'employé, on pourrait utiliser <code>emp[1]</code> pour accéder à l'employé n°1, <code>emp[2]</code> pour accéder au deuxième et ainsi de suite.</p>
-
-<p>JavaScript ne possède pas de type particulier pour représenter un tableau de données. En revanche, il est possible d'utiliser l'objet natif <code>Array</code> ainsi que ses méthodes pour manipuler des tableaux. L'objet <code>Array</code> possède plusieurs méthodes qui permettent de manipuler les tableaux pour les fusionner, les inverser, les trier, etc. Il possède une propriété de longueur ainsi que d'autres propriétés qui peuvent être utilisées avec les expressions rationnelles.</p>
-
-<h3 id="Créer_un_tableau">Créer un tableau</h3>
-
-<p>Les instructions qui suivent sont équivalentes et permettent de créer le même tableau :</p>
-
-<pre class="brush: js notranslate">var arr = new Array(élément0, élément1, ..., élémentN);
-var arr = Array(élément0, élément1, ..., élémentN);
-var arr = [élément0, élément1, ..., élémentN];
-</pre>
-
-<p><code>élément0, élément1, ..., élémentN</code> est une liste de valeurs qui formeront les éléments du tableau. Lorsque ces valeurs sont définies, le tableau initialisera la valeur des éléments correspondants. La propriété <code>length</code> du tableau permet de connaître le nombre d'arguments du tableau.</p>
-
-<p>Parmi les instructions précédentes, une utilise des crochets, on appelle ceci un « littéral de tableau » ou un « initialisateur de tableau ». Cette notation est plus courte que les autres et est souvent préférée pour sa lisibilité. Pour plus d'informations sur cette notation, voir la page sur <a href="/fr/docs/Web/JavaScript/Guide/Types_et_grammaire">les littéraux de tableaux</a> pour plus détails.</p>
-
-<p>Afin de créer un tableau de longueur non nulle mais sans aucun élément initialisé, on peut utiliser l'une des deux instructions suivantes :</p>
-
-<pre class="brush: js notranslate">var arr = new Array(longueurTableau);
-var arr = Array(longueurTableau);
-
-// Cela aura le même effet que :
-var arr = [];
-arr.length = longueurTableau;
-</pre>
-
-<div class="note">
-<p><strong>Note :</strong> Dans le code ci-dessus <code>longueurTableau</code> doit être un nombre. Si ce n'est pas le cas, un tableau d'un seul élément (ayant la valeur fournie) sera créé. <code>arr.length</code> renverra <code>longueurTableau</code>, mais le tableau ne contiendra que des éléments « vides » non définis. Si on utilise une boucle {{jsxref("Instructions/for...in")}} sur ce tableau, on ne trouvera aucun élément.</p>
-</div>
-
-<p>On a vu comment créer un tableau, il est aussi possible d'affecter des tableaux à des propriétés d'objets (que ce soit lors de leur création ou pour les modifier) :</p>
-
-<pre class="brush: js notranslate">var obj = {};
-// ...
-obj.prop = [élément0, élément1, ..., élémentN];
-
-// OU
-var obj = {prop: [élément0, élément1, ...., élémentN]}
-</pre>
-
-<p>Si on souhaite initialiser un tableau avec un seul élément et que cet élément est un nombre, il est nécessaire d'utiliser la notation littérale. En effet, si un nombre est passé à la fonction <code>Array()</code> pour construire le tableau, celui-ci sera interprété comme une longueur et non comme la valeur d'un élément.</p>
-
-<pre class="brush: js notranslate">var arr1 = [42];      // Le tableau créé contient bien un élément qui vaut 42
-var arr2 = Array(42); // Crée un tableau sans élément
-                      // mais dont arr.length vaut 42
-
-// Le code ci-dessus est équivalent à
-var arr = [];
-arr.length = 42 ;
-</pre>
-
-<p>Si N est un nombre décimal dont la partie fractionnaire n'est pas nulle, tout appel à <code>Array(N)</code> renverra une exception <code>RangeError</code>. Par exemple :</p>
-
-<pre class="brush: js notranslate">var arr = Array(9.3);  // RangeError: Invalid array length
-</pre>
-
-<p>Si on souhaite créer un tableau d'un seul élément et ce quel que soit le type de données, il sera préférable d'utiliser les littéraux de tableaux. Sinon, on peut créer un tableau vide puis lui ajouter un seul élément.</p>
-
-<p>Avec ES2015 (anciennement ECMAScript 6), on peut utiliser la méthode {{jsxref("Array.of")}} afin de créer un tableau composé d'un seul élément :</p>
-
-<pre class="brush: js notranslate">let monTableau = Array.of("Joconde"); // monTableau contient uniquement "Joconde"</pre>
-
-<h3 id="Remplir_un_tableau">Remplir un tableau</h3>
-
-<p>Il est possible de remplir un tableau en affectant des valeurs à ses éléments. Par exemple :</p>
-
-<pre class="brush: js notranslate">var emp = [];
-emp[0] = "Casey Jones";
-emp[1] = "Phil Lesh";
-emp[2] = "August West";
-</pre>
-
-<div class="note">
-<p><strong>Note :</strong> Si on utilise une valeur non entière pour désigner un élément du tableau, cela créera une propriété sur l'objet plutôt qu'un élément du tableau :</p>
-
-<pre class="brush: js notranslate">var arr = [];
-arr[3.4] = "Oranges";
-console.log(arr.length);                // 0
-console.log(arr.hasOwnProperty(3.4));   // true
-</pre>
-</div>
-
-<p>Il est aussi possible de remplir un tableau directement lors de sa création :</p>
-
-<pre class="brush: js notranslate">var monTableau = new Array("Coucou", maVar, 3.14159);
-var monTableau = ["Mangue", "Pomme", "Orange"]
-</pre>
-
-<h3 id="Faire_référence_aux_éléments_dun_tableau">Faire référence aux éléments d'un tableau</h3>
-
-<p>Il est possible de faire référence aux éléments d'un tableau en utilisant un nombre ordinal lié à l'élément. Ainsi, si on définit le tableau suivant :</p>
-
-<pre class="brush: js notranslate">var monTableau = ["Air", "Eau", "Feu"];
-</pre>
-
-<p>On pourra accéder au premier élément du tableau en utilisant <code>monTableau[0]</code>, on accèdera au deuxième élément avec <code>monTableau[1]</code>. Les indices des éléments sont comptés à partir de 0.</p>
-
-<div class="note">
-<p><strong>Note :</strong> Les crochets peuvent également être utilisés pour faire référence aux propriétés du tableau (les tableaux sont des objets JavaScript à part entière). On pourra donc avoir :</p>
-
-<pre class="brush: js notranslate">var arr = ["un", "deux", "trois"];
-arr[2];         // "trois" - on accède à un élément du tableau
-arr["length"];  // 3 - on accède à une propriété du tableau
-</pre>
-</div>
-
-<h3 id="Comprendre_la_propriété_length">Comprendre la propriété <code>length</code></h3>
-
-<p>En termes d'implémentation, les tableaux JavaScript stockent leurs éléments comme des propriétés normales, l'indice étant utilisé comme nom pour désigner la valeur de la propriété. La propriété <code>length</code> est elle un peu spéciale : elle renvoie toujours la valeur du plus grand indice du tableau plus 1. Dans l'exemple suivant, "Biduche" est placé à l'indice 30, <code>chats.length</code> renvoie donc 30 + 1). On rappelle que les indices des tableaux JavaScript commencent à partir de 0 et pas à partir de 1. Cela signifie que la valeur de la propriété <code><code>length</code></code> sera plus grande, de 1, par rapport à l'indice le plus élevé :</p>
-
-<pre class="brush: js notranslate">var chats = [];
-chats[30] = ['Biduche'];
-console.log(chats.length); // 31
-</pre>
-
-<p>Il est aussi possible d'affecter une valeur à la propriété <code>length</code>. Si la valeur fournie est inférieure au nombre d'éléments stockés, cela tronquera la tableau. Si la valeur est 0, cela videra le tableau :</p>
-
-<pre class="brush: js notranslate">var chats = ['Marie', 'Toulouse', 'Berlioz'];
-console.log(chats.length); // 3
-
-chats.length = 2;
-console.log(chats); // affiche "Marie,Toulouse" - Berlioz a été retiré
-
-chats.length = 0;
-console.log(chats); // affiche [], le tableau est vide
-
-chats.length = 3;
-console.log(chats); // [ &lt;3 empty slots&gt; ]
-</pre>
-
-<h3 id="Parcourir_un_tableau">Parcourir un tableau</h3>
-
-<p>Un tableau est une structure de données qui se prête particulièrement aux boucles, on pourra utiliser ces dernières pour parcourir les éléments du tableau de façon itérative. Voici un exemple de parcours simple :</p>
-
-<pre class="brush: js notranslate">var couleurs = ['rouge', 'vert', 'bleu'];
-for (var i = 0; i &lt; couleurs.length; i++) {
-  console.log(couleurs[i]);
-}
-</pre>
-
-<p>Si on sait qu'aucun des éléments ne vaut <code>false</code> dans un contexte booléen (par exemple, si le tableau contient des nœuds du <a href="/fr/docs/Web/API/Référence_du_DOM_Gecko">DOM</a>), on peut utiliser une formulation encore plus concise :</p>
-
-<pre class="brush: js notranslate">var divs = document.getElementsByTagName('div');
-for (var i = 0, div; div = divs[i]; i++) {
-  /* On effectue un traitement sur les  div */
-}
-</pre>
-
-<p>Cette syntaxe permet d'éviter d'avoir à vérifier la longueur du tableau et de gérer l'affectation de la variable <code>div</code> pour chaque élément du tableau.</p>
-
-<p>La méthode {{jsxref("Array.forEach", "forEach()")}} fournit une autre méthode pour parcourir un tableau :</p>
-
-<pre class="brush: js notranslate">var couleurs = ['rouge', 'vert', 'bleu'];
-couleurs.forEach(function(couleur) {
-  console.log(couleur);
-});
-</pre>
-
-<p>Avec les fonctions fléchées (apparues avec ES6 / ECMAScript 2015), on peut obtenir un code plus concis :</p>
-
-<pre class="brush: js notranslate">var couleurs = ['rouge', 'vert', 'bleu'];
-couleurs.forEach(couleur =&gt; console.log(couleur));</pre>
-
-<p>La fonction passée comme argument à <code>forEach()</code> est exécutée une fois pour chacun des éléments du tableau (l'élément du tableau sera passé comme argument de cette fonction). Les éléments qui n'ont pas de valeur affectée ne sont pas parcourus lors d'une boucle <code>forEach</code>.</p>
-
-<p>On notera que les éléments ne sont pas parcourus lorsqu'ils n'ont pas eu de valeur d'affectée. Cependant, si on a affecté la valeur {{jsxref("undefined")}} de façon explicite à un élément, il sera pris en compte lors de la boucle :</p>
-
-<pre class="brush: js notranslate">var tableau = ['premier', 'deuxième', , 'quatrième'];
-
-// affiche ['premier', 'deuxième', 'quatrième'];
-tableau.forEach(function(élément) {
-  console.log(élément);
-});
-
-if(tableau[2] === undefined) { console.log('tableau[2] vaut undefined'); } // true
-
-var tableau = ['premier', 'deuxième', undefined, 'quatrième'];
-
-// renvoie ['premier', 'deuxième', undefined, 'quatrième'];
-tableau.forEach(function(élément) {
-  console.log(élément);
-})</pre>
-
-<p>Étant donné que les éléments des tableaux sont stockés comme des propriétés classiques, il n'est pas conseillé d'utiliser des boucles {{jsxref("Instructions/for...in")}} pour parcourir les tableaux car cela listerait également les propriétés énumérables (en plus des éléments).</p>
-
-<h3 id="Méthodes_des_tableaux">Méthodes des tableaux</h3>
-
-<p>L'objet <code>Array</code> possède les méthodes suivantes :</p>
-
-<ul>
- <li>{{jsxref("Array.concat", "concat()")}} permet de fusionner deux ou plusieurs tableaux et de renvoyer le résultat dans un nouveau tableau :
-  <pre class="brush: js notranslate">var monTableau = new Array("1", "2", "3");
-monTableau = monTableau.concat("a", "b", "c"); // monTableau is now ["1", "2", "3", "a", "b", "c"]
-</pre>
- </li>
- <li>{{jsxref("Array.join", "join(délimiteur = ',')")}} permet de fusionner les éléments du tableau en une chaîne de caractères :
-  <pre class="brush: js notranslate">var monTableau = new Array("Air", "Eau", "Feu");
-var list = monTableau.join(" - "); // list sera "Air - Eau - Feu"
-</pre>
- </li>
- <li>{{jsxref("Array.push", "push()")}} permet d'ajouter un ou plusieurs éléments à la fin d'un tableau et renvoie la longueur du tableau :
-  <pre class="brush: js notranslate">var monTableau = new Array("1", "2");
-monTableau.push("3"); // monTableau vaut désormais ["1", "2", "3"]
-</pre>
- </li>
- <li>{{jsxref("Array.pop", "pop()")}} permet de retirer le dernier élément (le plus à droite) du tableau et renvoie cet élément :
-  <pre class="brush: js notranslate">var monTableau = new Array("1", "2", "3");
-var dernier = monTableau.pop(); // monTableau vaut désormais ["1", "2"], dernier = "3"
-</pre>
- </li>
- <li>{{jsxref("Array.shift", "shift()")}} retire le premier élément d'un tableau (le plus à gauche) et renvoie cet élément :
-  <pre class="brush: js notranslate">var monTableau = new Array("1", "2", "3");
-var premier = monTableau.shift(); // monTableau vaut désormais ["2", "3"], premier vaut "1"
-</pre>
- </li>
- <li>{{jsxref("Array.unshift", "unshift()")}} ajoute un ou plusieurs éléments au début du tableau et renvoie la longueur du tableau ainsi modifié :
-  <pre class="brush: js notranslate">var monTableau = new Array("1", "2", "3");
-monTableau.unshift("4", "5"); // monTableau devient ["4", "5", "1", "2", "3"]</pre>
- </li>
- <li>{{jsxref("Array.slice", "slice(indice_début, indice_fin)")}} extrait une portion d'un tableau et renvoie un nouveau tableau avec ce fragment :
-  <pre class="brush: js notranslate">var monTableau = new Array ("a", "b", "c", "d", "e");
-monTableau = monTableau.slice(1, 4); // extrait les éléments entre l'indice 1 et jusqu'à
-                                     // celui d'indice 3 (4-1), elle renvoie
-                                     // [ "b", "c", "d"]
-</pre>
- </li>
- <li>{{jsxref("Array.splice", "splice(indice, nbASupprimer, ajouterElement1, ajouterElement2, ...)")}} retire des éléments du tableau et (éventuellement) les remplace :
-  <pre class="brush: js notranslate">var monTableau = new Array ("1", "2", "3", "4", "5");
-monTableau.splice(1, 3, "a", "b", "c", "d"); // monTableau vaut désormais ["1", "a", "b", "c", "d", "5"]
-  // Le code remplace à partir de l'indice 1 (où il y avait la valeur "2"), supprime trois éléments puis
-  // insère les arguments fournis à la suite.
-</pre>
- </li>
- <li>{{jsxref("Array.reverse", "reverse()")}} transpose les éléments du tableau à même ce tableau : le premier élément devient le dernier, le dernier devient le premier et ainsi de suite :
-  <pre class="brush: js notranslate">var monTableau = new Array ("1", "2", "3");
-monTableau.reverse(); // monTableau vaut maintenant [ "3", "2", "1" ]
-</pre>
- </li>
- <li>{{jsxref("Array.sort", "sort()")}} trie les éléments d'un tableau à même ce tableau :
-  <pre class="brush: js notranslate">var monTableau = new Array("Air", "Feu", "Eau");
-monTableau.sort(); // trie le tableau [ "Air", "Eau", "Feu" ]
-</pre>
-
-  <p><code>sort()</code> peut également utiliser une fonction de rappel (<em>callback</em>) qui détermine comment les éléments sont comparés. La fonction compare deux arguments et renvoie une valeur selon les règles suivantes :</p>
-
-  <ul>
-   <li>Si <code>a</code> est inférieur à <code>b</code> selon l'ordre, renvoie -1 (ou un autre nombre négatif)</li>
-   <li>Si <code>a</code> est supérieur à <code>b</code> selon l'ordre, renvoie 1 (ou un autre nombre positif)</li>
-   <li>Si <code>a</code> et <code>b</code> sont considérés égaux, renvoie 0.</li>
-  </ul>
-
-  <p>Par exemple, on peut utilise la fonction suivante pour trier par rapport à la dernière lettre du mot :</p>
-
-  <pre class="brush: js notranslate">var sortFn = function(a, b){
-  if (a[a.length - 1] &lt; b[b.length - 1]) return -1;
-  if (a[a.length - 1] &gt; b[b.length - 1]) return 1;
-  if (a[a.length - 1] == b[b.length - 1]) return 0;
-}
-monTableau.sort(sortFn); // le tableau devient = ["Air","Feu","Eau"]</pre>
- </li>
-</ul>
-
-<p>Du code permettant d'émuler ces fonctions est disponible sur chacune des pages (<em>polyfill</em>). Le support natif de ces fonctionnalités dans les différents navigateurs peut être trouvé <a href="http://www.robertnyman.com/javascript/">ici</a><a href="http://www.robertnyman.com/javascript/">.</a></p>
-
-<ul>
- <li>{{jsxref("Array.indexOf", "indexOf(élémentRecherché[, indiceDépart])")}} recherche la valeur <code>élémentRecherché</code> dans le tableau et renvoie l'indice du premier élément qui correspond :
-
-  <pre class="brush: js notranslate">var a = ['a', 'b', 'a', 'b', 'a'];
-console.log(a.indexOf('b'));    // Affiche 1
-// On recherche après la première correspondance :
-console.log(a.indexOf('b', 2)); // Affiche 3
-console.log(a.indexOf('z'));    // Affiche -1 car 'z' n'a pas été trouvé
-</pre>
- </li>
- <li>{{jsxref("Array.lastIndexOf", "lastIndexOf(élémentRecherché[, fromIndex])")}} fonctionne comme <code>indexOf</code>, mais recherche à partir de la fin du tableau :
-  <pre class="brush: js notranslate">var a = ['a', 'b', 'c', 'd', 'a', 'b'];
-console.log(a.lastIndexOf('b'));    // Affiche 5
-// On continue la recherche après la première correspondance en fin de tableau
-console.log(a.lastIndexOf('b', 4)); // Affiche 1
-console.log(a.lastIndexOf('z'));    // Affiche -1
-</pre>
- </li>
- <li>{{jsxref("Array.forEach", "forEach(callback[, objetThis])")}} exécute la fonction <code>callback</code> sur chaque élément du tableau.
-  <pre class="brush: js notranslate">var a = ['a', 'b', 'c'];
-a.forEach(console.log); // Affichera la valeur de chaque élément dans la console
-</pre>
- </li>
- <li>{{jsxref("Array.map", "map(callback[, objetThis])")}} renvoie un nouveau tableau dont les éléments sont les images des éléments du tableau courant par la fonction <code>callback</code> :
-  <pre class="brush: js notranslate">var a1 = ['a', 'b', 'c'];
-var a2 = a1.map(function(item) { return item.toUpperCase(); });
-console.log(a2); // affichera A,B,C dans la console
-</pre>
- </li>
- <li>{{jsxref("Array.filter", "filter(callback[, objetThis])")}} renvoie un nouveau tableau qui contient les éléments du tableau courant pour lesquels <code>callback</code> a renvoyé <code>true</code>.
-  <pre class="brush: js notranslate">var a1 = ['a', 10, 'b', 20, 'c', 30];
-var a2 = a1.filter(function(item) { return typeof item == 'number'; });
-console.log(a2); // Affichera 10,20,30 dans la console
-</pre>
- </li>
- <li>{{jsxref("Array.every", "every(callback[, objetThis])")}} renvoie <code>true</code> si <code>callback</code> renvoie <code>true</code> pour chaque élément du tableau.
-  <pre class="brush: js notranslate">function isNumber(value){
-  return typeof value === 'number';
-}
-var a1 = [1, 2, 3];
-console.log(a1.every(isNumber)); // affiche true
-var a2 = [1, '2', 3];
-console.log(a2.every(isNumber)); // affiche false
-</pre>
- </li>
- <li>{{jsxref("Array.some", "some(callback[, objetThis])")}} renvoie <code>true</code> si <code>callback</code> renvoie <code>true</code> pour au moins un élément du tableau.
-  <pre class="brush: js notranslate">function isNumber(value){
-  return typeof value === 'number';
-}
-var a1 = [1, 2, 3];
-console.log(a1.some(isNumber)); // Affiche true
-var a2 = [1, '2', 3];
-console.log(a2.some(isNumber)); // Affiche true
-var a3 = ['1', '2', '3'];
-console.log(a3.some(isNumber)); // Affiche false
-</pre>
- </li>
-</ul>
-
-<p>Les méthodes présentées ci-avant qui prennent une fonction de rappel (<em>callback</em>) en argument sont appelées méthodes itératives car elles parcourent le tableau de façon itérative. Chacune de ces méthodes peut prendre en compte un deuxième argument (optionnel) qui sera l'objet <code>this</code> pris en compte par le <em>callback</em>. Si ce deuxième argument n'est pas fourni, <code>this</code> vaudra la valeur de l'objet global.</p>
-
-<p>La fonction de rappel est appelée avec trois arguments : le premier étant la valeur de l'élément courant, le deuxième est l'indice de cet élément et le troisième représente le tableau lui-même. Les fonctions JavaScript ignorent les arguments supplémentaires qui ne sont pas déclarés explicitement dans la liste des paramètres, on peut donc utiliser une fonction prenant un seul argument comme fonction de rappel.</p>
-
-<ul>
- <li>{{jsxref("Array.reduce", "reduce(callback[, valeurInitiale])")}} applique <code>callback(premièreValeur, secondeValeur)</code> au fur et à mesure sur le tableau pour le réduire en une seule valeur, c'est cette valeur qui est renvoyée par la fonction :
-
-  <pre class="brush: js notranslate">var a = [10, 20, 30];
-var total = a.reduce(function(premier, deuxième) { return premier + deuxième; }, 0);
-console.log(total) // Affiche 60
-</pre>
- </li>
- <li>{{jsxref("Array.reduceRight", "reduceRight(callback[, valeurInitiale])")}} fonctionne comme <code>reduce()</code>, mais débute avec le dernier élément (parcourt le tableau de droite à gauche).</li>
-</ul>
-
-<p><code>reduce()</code> et <code>reduceRight()</code> sont à utiliser lorsqu'on souhaite n'obtenir qu'une seule valeur, récursivement, à partir des différents éléments du tableau. Pour plus d'informations sur l'utilisation d'une valeur d'initialisation pour ces deux fonctions, se référer à leurs pages : {{jsxref("Array.reduceRight")}} et {{jsxref("Array.reduce")}}</p>
-
-<h3 id="Tableaux_multi-dimensionnels">Tableaux multi-dimensionnels</h3>
-
-<p>Les tableaux peuvent être imbriqués les uns dans les autres. Cela signifie qu'un tableau peut avoir un élément dont la valeur est un tableau. En utilisant ce comportement, on peut donc créer des matrices, voire des tableaux à plusieurs dimensions.</p>
-
-<p>Par exemple, avec le code suivant :</p>
-
-<pre class="brush: js notranslate">var a = new Array(4);
-for (i = 0; i &lt; 4; i++) {
-  a[i] = new Array(4);
-  for (j = 0; j &lt; 4; j++) {
-    a[i][j] = "[" + i + "," + j + "]";
-  }
-}
-</pre>
-
-<p>On pourra avoir le tableau suivant sur deux dimensions :</p>
-
-<pre class="brush: js notranslate">Ligne 0 : [0,0] [0,1] [0,2] [0,3]
-Ligne 1 : [1,0] [1,1] [1,2] [1,3]
-Ligne 2 : [2,0] [2,1] [2,2] [2,3]
-Ligne 3 : [3,0] [3,1] [3,2] [3,3]
-</pre>
-
-<h3 id="Les_tableaux_et_les_expressions_rationnelles">Les tableaux et les expressions rationnelles</h3>
-
-<p>Lorsqu'un tableau est le résultat d'une correspondance entre une expression rationnelle et une chaîne de caractères, les éléments et propriétés du tableau fournissent des informations sur la correspondance. Les méthodes suivantes peuvent renvoyer un tableau : {{jsxref("Objets_globaux/RegExp/exec","RegExp.exec()")}}, {{jsxref("Objets_globaux/String/match/exec","String.match()")}},  {{jsxref("Objets_globaux/String/split","String.split()")}}. Pour plus d'informations sur les tableaux et les expressions rationnelles, voir le chapitre du guide JavaScript sur <a href="/fr/docs/Web/JavaScript/Guide/Expressions_régulières">les expressions rationnelles</a>.</p>
-
-<h3 id="Manipuler_des_objets_semblables_à_des_tableaux">Manipuler des objets semblables à des tableaux</h3>
-
-<p>Certains objets JavaScript tels que {{domxref("NodeList")}} (renvoyé par {{domxref("document.getElementsByTagName()")}}) ou l'objet <a href="/fr/docs/Web/JavaScript/Reference/Fonctions/arguments"><code>arguments</code></a> (disponible au sein d'une fonction) ressemblent à des tableaux mais n'en sont pas (ils n'ont pas toutes les méthodes décrites ci-avant par exemple). Ainsi, l'objet <code>arguments</code> fournit une propriété {{jsxref("Objets_globaux/Function/length","length")}} mais n'implémente pas la méthode {{jsxref("Array.forEach", "forEach()")}}.</p>
-
-<p>Les méthodes du prototype des tableaux permettent d'utiliser les méthodes d'objets <code>Array</code> sur des objets semblables à des tableaux :</p>
-
-<pre class="brush: js notranslate"> function alertArguments() {
-   Array.prototype.forEach.call(arguments, function(item) {
-     console.log(item);
-   });
- }
-</pre>
-
-<p>Il est possible d'utiliser ces méthodes génériques sur des chaînes de caractères :</p>
-
-<pre class="brush: js notranslate">Array.prototype.forEach.call("une chaîne", function(chr) {
-   console.log(chr);
-});</pre>
-
-<h2 id="Les_tableaux_typés">Les tableaux typés</h2>
-
-<p><a href="/fr/docs/Web/JavaScript/Tableaux_typés">Les tableaux typés JavaScript</a> sont des objets semblables à des tableaux qui fournissent un moyen d'accéder à des données binaires. Comme on l'a vu ci-avant, les objets {{jsxref("Array")}} grandissent et rétrécissent dynamiquement et peuvent contenir n'importe quelle valeur JavaScript. Les moteurs JavaScript effectuent des optimisations afin que les tableaux puissent être utilisés rapidement. Cependant, avec le développement des applications web, les applications viennent à manipuler des données audio, vidéo, binaires et accèdent à des données brutes via les <a href="/fr/docs/WebSockets">WebSockets</a> d'autres outils. Il apparaît donc nécessaire d'avoir les outils JavaScript pertinents pour manipuler efficacement des données binaires, organisées au sein de tableaux typés.</p>
-
-<h3 id="Les_vues_et_les_tampons_de_mémoire_buffers_larchitecture_des_tableaux_typés">Les vues et les tampons de mémoire (<em>buffers</em>) : l'architecture des tableaux typés</h3>
-
-<p>Afin de permettre un maximum de flexibilité et d'efficacité, les tableaux typés JavaScript séparent l'implémentation entre <strong>les tampons (<em>buffers</em>)</strong> et <strong>les vues (<em>views</em>)</strong>. Un tampon de mémoire, implémenté par l'objet {{jsxref("ArrayBuffer")}}, est un objet représentant un fragment de données. Un tampon n'a pas de format a proprement parler et il ne fournit aucun mécanisme pour accéder à son contenu. Afin d'accéder à la mémoire contenu dans le tampon, on a besoin d'utiliser une vue. Une vue fournit un contexte, c'est-à-dire un type de donnée, un indice de départ et un nombre d'éléments, qui permet de traiter les données initiales comme un vrai tableau typé.</p>
-
-<p><img alt="Typed arrays in an ArrayBuffer" src="https://mdn.mozillademos.org/files/8629/typed_arrays.png"></p>
-
-<h3 id="ArrayBuffer"><code>ArrayBuffer</code></h3>
-
-<p>Le type {{jsxref("ArrayBuffer")}} est un type de donnée utilisé pour représenter un tampon de données binaire générique dont la longueur est fixée. Un tampon de données ne peut pas être manipulé directement. Pour manipuler les données, il faut créer une vue sur le tableau typé ou un objet {{jsxref("DataView")}} qui représente le tampon dans un format spécifique et qui pourra être utilisé pour lire et écrire des informations du tampon.</p>
-
-<h3 id="Les_vues_qui_sont_des_tableaux_typés">Les vues qui sont des tableaux typés</h3>
-
-<p>Les vues de tableaux typés possèdent des noms explicites et fournissent des vues pour les types numériques usuels tels que <code>Int8</code>, <code>Uint32</code>, <code>Float64</code> et ainsi de suite. Il existe un type de vue spécial qui est <code>Uint8ClampedArray</code>. Ce type ramène les différentes valeurs exploitées entre 0 et 255. Cela peut notamment être utile pour <a href="/fr/docs/Web/API/ImageData">le traitement des données d'un canvas</a>.</p>
-
-<p>{{page("/fr/docs/Web/JavaScript/Reference/Objets_globaux/TypedArray", "Les_objets_TypedArray")}}</p>
-
-<p>Pour plus d'informations sur les tableaux typés, voir <a href="/fr/docs/Web/JavaScript/Tableaux_typés">l'article de la référence</a> sur les différents objets {{jsxref("TypedArray")}}.</p>
-
-<p>{{PreviousNext("Web/JavaScript/Guide/Expressions_régulières", "Web/JavaScript/Guide/Collections_avec_clés")}}</p>
diff --git a/files/fr/web/javascript/guide/indexed_collections/index.md b/files/fr/web/javascript/guide/indexed_collections/index.md
new file mode 100644
index 0000000000..8e1f789563
--- /dev/null
+++ b/files/fr/web/javascript/guide/indexed_collections/index.md
@@ -0,0 +1,473 @@
+---
+title: Collections indexées
+slug: Web/JavaScript/Guide/Indexed_collections
+tags:
+  - Array
+  - Guide
+  - JavaScript
+translation_of: Web/JavaScript/Guide/Indexed_collections
+original_slug: Web/JavaScript/Guide/Collections_indexées
+---
+{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Expressions_régulières", "Web/JavaScript/Guide/Collections_avec_clés")}}
+
+Ce chapitre présente les collections de données qui sont ordonnées par un indice. Cela inclue les tableaux et les objets semblables à des tableaux que sont les objets {{jsxref("Array")}} et les objets {{jsxref("TypedArray")}}.
+
+## Le type `Array`
+
+Un _tableau_ (_array_ en anglais) est un ensemble ordonné de valeurs auxquelles on peut faire référence avec un nom et un indice. Par exemple, si on a un tableau `emp` qui contient les noms d'employés indexés par leurs numéros d'employé, on pourrait utiliser `emp[1]` pour accéder à l'employé n°1, `emp[2]` pour accéder au deuxième et ainsi de suite.
+
+JavaScript ne possède pas de type particulier pour représenter un tableau de données. En revanche, il est possible d'utiliser l'objet natif `Array` ainsi que ses méthodes pour manipuler des tableaux. L'objet `Array` possède plusieurs méthodes qui permettent de manipuler les tableaux pour les fusionner, les inverser, les trier, etc. Il possède une propriété de longueur ainsi que d'autres propriétés qui peuvent être utilisées avec les expressions rationnelles.
+
+### Créer un tableau
+
+Les instructions qui suivent sont équivalentes et permettent de créer le même tableau :
+
+```js
+var arr = new Array(élément0, élément1, ..., élémentN);
+var arr = Array(élément0, élément1, ..., élémentN);
+var arr = [élément0, élément1, ..., élémentN];
+```
+
+`élément0, élément1, ..., élémentN` est une liste de valeurs qui formeront les éléments du tableau. Lorsque ces valeurs sont définies, le tableau initialisera la valeur des éléments correspondants. La propriété `length` du tableau permet de connaître le nombre d'arguments du tableau.
+
+Parmi les instructions précédentes, une utilise des crochets, on appelle ceci un « littéral de tableau » ou un « initialisateur de tableau ». Cette notation est plus courte que les autres et est souvent préférée pour sa lisibilité. Pour plus d'informations sur cette notation, voir la page sur [les littéraux de tableaux](/fr/docs/Web/JavaScript/Guide/Types_et_grammaire) pour plus détails.
+
+Afin de créer un tableau de longueur non nulle mais sans aucun élément initialisé, on peut utiliser l'une des deux instructions suivantes :
+
+```js
+var arr = new Array(longueurTableau);
+var arr = Array(longueurTableau);
+
+// Cela aura le même effet que :
+var arr = [];
+arr.length = longueurTableau;
+```
+
+> **Note :** Dans le code ci-dessus `longueurTableau` doit être un nombre. Si ce n'est pas le cas, un tableau d'un seul élément (ayant la valeur fournie) sera créé. `arr.length` renverra `longueurTableau`, mais le tableau ne contiendra que des éléments « vides » non définis. Si on utilise une boucle {{jsxref("Instructions/for...in")}} sur ce tableau, on ne trouvera aucun élément.
+
+On a vu comment créer un tableau, il est aussi possible d'affecter des tableaux à des propriétés d'objets (que ce soit lors de leur création ou pour les modifier) :
+
+```js
+var obj = {};
+// ...
+obj.prop = [élément0, élément1, ..., élémentN];
+
+// OU
+var obj = {prop: [élément0, élément1, ...., élémentN]}
+```
+
+Si on souhaite initialiser un tableau avec un seul élément et que cet élément est un nombre, il est nécessaire d'utiliser la notation littérale. En effet, si un nombre est passé à la fonction `Array()` pour construire le tableau, celui-ci sera interprété comme une longueur et non comme la valeur d'un élément.
+
+```js
+var arr1 = [42];      // Le tableau créé contient bien un élément qui vaut 42
+var arr2 = Array(42); // Crée un tableau sans élément
+                      // mais dont arr.length vaut 42
+
+// Le code ci-dessus est équivalent à
+var arr = [];
+arr.length = 42 ;
+```
+
+Si N est un nombre décimal dont la partie fractionnaire n'est pas nulle, tout appel à `Array(N)` renverra une exception `RangeError`. Par exemple :
+
+```js
+var arr = Array(9.3);  // RangeError: Invalid array length
+```
+
+Si on souhaite créer un tableau d'un seul élément et ce quel que soit le type de données, il sera préférable d'utiliser les littéraux de tableaux. Sinon, on peut créer un tableau vide puis lui ajouter un seul élément.
+
+Avec ES2015 (anciennement ECMAScript 6), on peut utiliser la méthode {{jsxref("Array.of")}} afin de créer un tableau composé d'un seul élément :
+
+```js
+let monTableau = Array.of("Joconde"); // monTableau contient uniquement "Joconde"
+```
+
+### Remplir un tableau
+
+Il est possible de remplir un tableau en affectant des valeurs à ses éléments. Par exemple :
+
+```js
+var emp = [];
+emp[0] = "Casey Jones";
+emp[1] = "Phil Lesh";
+emp[2] = "August West";
+```
+
+> **Note :** Si on utilise une valeur non entière pour désigner un élément du tableau, cela créera une propriété sur l'objet plutôt qu'un élément du tableau :
+>
+> ```js
+> var arr = [];
+> arr[3.4] = "Oranges";
+> console.log(arr.length);                // 0
+> console.log(arr.hasOwnProperty(3.4));   // true
+> ```
+
+Il est aussi possible de remplir un tableau directement lors de sa création :
+
+```js
+var monTableau = new Array("Coucou", maVar, 3.14159);
+var monTableau = ["Mangue", "Pomme", "Orange"]
+```
+
+### Faire référence aux éléments d'un tableau
+
+Il est possible de faire référence aux éléments d'un tableau en utilisant un nombre ordinal lié à l'élément. Ainsi, si on définit le tableau suivant :
+
+```js
+var monTableau = ["Air", "Eau", "Feu"];
+```
+
+On pourra accéder au premier élément du tableau en utilisant `monTableau[0]`, on accèdera au deuxième élément avec `monTableau[1]`. Les indices des éléments sont comptés à partir de 0.
+
+> **Note :** Les crochets peuvent également être utilisés pour faire référence aux propriétés du tableau (les tableaux sont des objets JavaScript à part entière). On pourra donc avoir :
+>
+> ```js
+> var arr = ["un", "deux", "trois"];
+> arr[2];         // "trois" - on accède à un élément du tableau
+> arr["length"];  // 3 - on accède à une propriété du tableau
+> ```
+
+### Comprendre la propriété `length`
+
+En termes d'implémentation, les tableaux JavaScript stockent leurs éléments comme des propriétés normales, l'indice étant utilisé comme nom pour désigner la valeur de la propriété. La propriété `length` est elle un peu spéciale : elle renvoie toujours la valeur du plus grand indice du tableau plus 1. Dans l'exemple suivant, "Biduche" est placé à l'indice 30, `chats.length` renvoie donc 30 + 1). On rappelle que les indices des tableaux JavaScript commencent à partir de 0 et pas à partir de 1. Cela signifie que la valeur de la propriété `length` sera plus grande, de 1, par rapport à l'indice le plus élevé :
+
+```js
+var chats = [];
+chats[30] = ['Biduche'];
+console.log(chats.length); // 31
+```
+
+Il est aussi possible d'affecter une valeur à la propriété `length`. Si la valeur fournie est inférieure au nombre d'éléments stockés, cela tronquera la tableau. Si la valeur est 0, cela videra le tableau :
+
+```js
+var chats = ['Marie', 'Toulouse', 'Berlioz'];
+console.log(chats.length); // 3
+
+chats.length = 2;
+console.log(chats); // affiche "Marie,Toulouse" - Berlioz a été retiré
+
+chats.length = 0;
+console.log(chats); // affiche [], le tableau est vide
+
+chats.length = 3;
+console.log(chats); // [ <3 empty slots> ]
+```
+
+### Parcourir un tableau
+
+Un tableau est une structure de données qui se prête particulièrement aux boucles, on pourra utiliser ces dernières pour parcourir les éléments du tableau de façon itérative. Voici un exemple de parcours simple :
+
+```js
+var couleurs = ['rouge', 'vert', 'bleu'];
+for (var i = 0; i < couleurs.length; i++) {
+  console.log(couleurs[i]);
+}
+```
+
+Si on sait qu'aucun des éléments ne vaut `false` dans un contexte booléen (par exemple, si le tableau contient des nœuds du [DOM](/fr/docs/Web/API/Référence_du_DOM_Gecko)), on peut utiliser une formulation encore plus concise :
+
+```js
+var divs = document.getElementsByTagName('div');
+for (var i = 0, div; div = divs[i]; i++) {
+  /* On effectue un traitement sur les  div */
+}
+```
+
+Cette syntaxe permet d'éviter d'avoir à vérifier la longueur du tableau et de gérer l'affectation de la variable `div` pour chaque élément du tableau.
+
+La méthode {{jsxref("Array.forEach", "forEach()")}} fournit une autre méthode pour parcourir un tableau :
+
+```js
+var couleurs = ['rouge', 'vert', 'bleu'];
+couleurs.forEach(function(couleur) {
+  console.log(couleur);
+});
+```
+
+Avec les fonctions fléchées (apparues avec ES6 / ECMAScript 2015), on peut obtenir un code plus concis :
+
+```js
+var couleurs = ['rouge', 'vert', 'bleu'];
+couleurs.forEach(couleur => console.log(couleur));
+```
+
+La fonction passée comme argument à `forEach()` est exécutée une fois pour chacun des éléments du tableau (l'élément du tableau sera passé comme argument de cette fonction). Les éléments qui n'ont pas de valeur affectée ne sont pas parcourus lors d'une boucle `forEach`.
+
+On notera que les éléments ne sont pas parcourus lorsqu'ils n'ont pas eu de valeur d'affectée. Cependant, si on a affecté la valeur {{jsxref("undefined")}} de façon explicite à un élément, il sera pris en compte lors de la boucle :
+
+```js
+var tableau = ['premier', 'deuxième', , 'quatrième'];
+
+// affiche ['premier', 'deuxième', 'quatrième'];
+tableau.forEach(function(élément) {
+  console.log(élément);
+});
+
+if(tableau[2] === undefined) { console.log('tableau[2] vaut undefined'); } // true
+
+var tableau = ['premier', 'deuxième', undefined, 'quatrième'];
+
+// renvoie ['premier', 'deuxième', undefined, 'quatrième'];
+tableau.forEach(function(élément) {
+  console.log(élément);
+})
+```
+
+Étant donné que les éléments des tableaux sont stockés comme des propriétés classiques, il n'est pas conseillé d'utiliser des boucles {{jsxref("Instructions/for...in")}} pour parcourir les tableaux car cela listerait également les propriétés énumérables (en plus des éléments).
+
+### Méthodes des tableaux
+
+L'objet `Array` possède les méthodes suivantes :
+
+- {{jsxref("Array.concat", "concat()")}} permet de fusionner deux ou plusieurs tableaux et de renvoyer le résultat dans un nouveau tableau :
+
+  ```js
+    var monTableau = new Array("1", "2", "3");
+    monTableau = monTableau.concat("a", "b", "c"); // monTableau is now ["1", "2", "3", "a", "b", "c"]
+    ```
+
+- {{jsxref("Array.join", "join(délimiteur = ',')")}} permet de fusionner les éléments du tableau en une chaîne de caractères :
+
+  ```js
+    var monTableau = new Array("Air", "Eau", "Feu");
+    var list = monTableau.join(" - "); // list sera "Air - Eau - Feu"
+    ```
+
+- {{jsxref("Array.push", "push()")}} permet d'ajouter un ou plusieurs éléments à la fin d'un tableau et renvoie la longueur du tableau :
+
+  ```js
+    var monTableau = new Array("1", "2");
+    monTableau.push("3"); // monTableau vaut désormais ["1", "2", "3"]
+    ```
+
+- {{jsxref("Array.pop", "pop()")}} permet de retirer le dernier élément (le plus à droite) du tableau et renvoie cet élément :
+
+  ```js
+    var monTableau = new Array("1", "2", "3");
+    var dernier = monTableau.pop(); // monTableau vaut désormais ["1", "2"], dernier = "3"
+    ```
+
+- {{jsxref("Array.shift", "shift()")}} retire le premier élément d'un tableau (le plus à gauche) et renvoie cet élément :
+
+  ```js
+    var monTableau = new Array("1", "2", "3");
+    var premier = monTableau.shift(); // monTableau vaut désormais ["2", "3"], premier vaut "1"
+    ```
+
+- {{jsxref("Array.unshift", "unshift()")}} ajoute un ou plusieurs éléments au début du tableau et renvoie la longueur du tableau ainsi modifié :
+
+  ```js
+    var monTableau = new Array("1", "2", "3");
+    monTableau.unshift("4", "5"); // monTableau devient ["4", "5", "1", "2", "3"]
+    ```
+
+- {{jsxref("Array.slice", "slice(indice_début, indice_fin)")}} extrait une portion d'un tableau et renvoie un nouveau tableau avec ce fragment :
+
+  ```js
+    var monTableau = new Array ("a", "b", "c", "d", "e");
+    monTableau = monTableau.slice(1, 4); // extrait les éléments entre l'indice 1 et jusqu'à
+                                         // celui d'indice 3 (4-1), elle renvoie
+                                         // [ "b", "c", "d"]
+    ```
+
+- {{jsxref("Array.splice", "splice(indice, nbASupprimer, ajouterElement1, ajouterElement2, ...)")}} retire des éléments du tableau et (éventuellement) les remplace :
+
+  ```js
+    var monTableau = new Array ("1", "2", "3", "4", "5");
+    monTableau.splice(1, 3, "a", "b", "c", "d"); // monTableau vaut désormais ["1", "a", "b", "c", "d", "5"]
+      // Le code remplace à partir de l'indice 1 (où il y avait la valeur "2"), supprime trois éléments puis
+      // insère les arguments fournis à la suite.
+    ```
+
+- {{jsxref("Array.reverse", "reverse()")}} transpose les éléments du tableau à même ce tableau : le premier élément devient le dernier, le dernier devient le premier et ainsi de suite :
+
+  ```js
+    var monTableau = new Array ("1", "2", "3");
+    monTableau.reverse(); // monTableau vaut maintenant [ "3", "2", "1" ]
+    ```
+
+- {{jsxref("Array.sort", "sort()")}} trie les éléments d'un tableau à même ce tableau :
+
+  ```js
+    var monTableau = new Array("Air", "Feu", "Eau");
+    monTableau.sort(); // trie le tableau [ "Air", "Eau", "Feu" ]
+    ```
+
+  `sort()` peut également utiliser une fonction de rappel (_callback_) qui détermine comment les éléments sont comparés. La fonction compare deux arguments et renvoie une valeur selon les règles suivantes :
+
+  - Si `a` est inférieur à `b` selon l'ordre, renvoie -1 (ou un autre nombre négatif)
+  - Si `a` est supérieur à `b` selon l'ordre, renvoie 1 (ou un autre nombre positif)
+  - Si `a` et `b` sont considérés égaux, renvoie 0.
+
+  Par exemple, on peut utilise la fonction suivante pour trier par rapport à la dernière lettre du mot :
+
+  ```js
+    var sortFn = function(a, b){
+      if (a[a.length - 1] < b[b.length - 1]) return -1;
+      if (a[a.length - 1] > b[b.length - 1]) return 1;
+      if (a[a.length - 1] == b[b.length - 1]) return 0;
+    }
+    monTableau.sort(sortFn); // le tableau devient = ["Air","Feu","Eau"]
+    ```
+
+Du code permettant d'émuler ces fonctions est disponible sur chacune des pages (_polyfill_). Le support natif de ces fonctionnalités dans les différents navigateurs peut être trouvé [ici](http://www.robertnyman.com/javascript/)[.](http://www.robertnyman.com/javascript/)
+
+- {{jsxref("Array.indexOf", "indexOf(élémentRecherché[, indiceDépart])")}} recherche la valeur `élémentRecherché` dans le tableau et renvoie l'indice du premier élément qui correspond :
+
+  ```js
+    var a = ['a', 'b', 'a', 'b', 'a'];
+    console.log(a.indexOf('b'));    // Affiche 1
+    // On recherche après la première correspondance :
+    console.log(a.indexOf('b', 2)); // Affiche 3
+    console.log(a.indexOf('z'));    // Affiche -1 car 'z' n'a pas été trouvé
+    ```
+
+- {{jsxref("Array.lastIndexOf", "lastIndexOf(élémentRecherché[, fromIndex])")}} fonctionne comme `indexOf`, mais recherche à partir de la fin du tableau :
+
+  ```js
+    var a = ['a', 'b', 'c', 'd', 'a', 'b'];
+    console.log(a.lastIndexOf('b'));    // Affiche 5
+    // On continue la recherche après la première correspondance en fin de tableau
+    console.log(a.lastIndexOf('b', 4)); // Affiche 1
+    console.log(a.lastIndexOf('z'));    // Affiche -1
+    ```
+
+- {{jsxref("Array.forEach", "forEach(callback[, objetThis])")}} exécute la fonction `callback` sur chaque élément du tableau.
+
+  ```js
+    var a = ['a', 'b', 'c'];
+    a.forEach(console.log); // Affichera la valeur de chaque élément dans la console
+    ```
+
+- {{jsxref("Array.map", "map(callback[, objetThis])")}} renvoie un nouveau tableau dont les éléments sont les images des éléments du tableau courant par la fonction `callback` :
+
+  ```js
+    var a1 = ['a', 'b', 'c'];
+    var a2 = a1.map(function(item) { return item.toUpperCase(); });
+    console.log(a2); // affichera A,B,C dans la console
+    ```
+
+- {{jsxref("Array.filter", "filter(callback[, objetThis])")}} renvoie un nouveau tableau qui contient les éléments du tableau courant pour lesquels `callback` a renvoyé `true`.
+
+  ```js
+    var a1 = ['a', 10, 'b', 20, 'c', 30];
+    var a2 = a1.filter(function(item) { return typeof item == 'number'; });
+    console.log(a2); // Affichera 10,20,30 dans la console
+    ```
+
+- {{jsxref("Array.every", "every(callback[, objetThis])")}} renvoie `true` si `callback` renvoie `true` pour chaque élément du tableau.
+
+  ```js
+    function isNumber(value){
+      return typeof value === 'number';
+    }
+    var a1 = [1, 2, 3];
+    console.log(a1.every(isNumber)); // affiche true
+    var a2 = [1, '2', 3];
+    console.log(a2.every(isNumber)); // affiche false
+    ```
+
+- {{jsxref("Array.some", "some(callback[, objetThis])")}} renvoie `true` si `callback` renvoie `true` pour au moins un élément du tableau.
+
+  ```js
+    function isNumber(value){
+      return typeof value === 'number';
+    }
+    var a1 = [1, 2, 3];
+    console.log(a1.some(isNumber)); // Affiche true
+    var a2 = [1, '2', 3];
+    console.log(a2.some(isNumber)); // Affiche true
+    var a3 = ['1', '2', '3'];
+    console.log(a3.some(isNumber)); // Affiche false
+    ```
+
+Les méthodes présentées ci-avant qui prennent une fonction de rappel (_callback_) en argument sont appelées méthodes itératives car elles parcourent le tableau de façon itérative. Chacune de ces méthodes peut prendre en compte un deuxième argument (optionnel) qui sera l'objet `this` pris en compte par le _callback_. Si ce deuxième argument n'est pas fourni, `this` vaudra la valeur de l'objet global.
+
+La fonction de rappel est appelée avec trois arguments : le premier étant la valeur de l'élément courant, le deuxième est l'indice de cet élément et le troisième représente le tableau lui-même. Les fonctions JavaScript ignorent les arguments supplémentaires qui ne sont pas déclarés explicitement dans la liste des paramètres, on peut donc utiliser une fonction prenant un seul argument comme fonction de rappel.
+
+- {{jsxref("Array.reduce", "reduce(callback[, valeurInitiale])")}} applique `callback(premièreValeur, secondeValeur)` au fur et à mesure sur le tableau pour le réduire en une seule valeur, c'est cette valeur qui est renvoyée par la fonction :
+
+  ```js
+    var a = [10, 20, 30];
+    var total = a.reduce(function(premier, deuxième) { return premier + deuxième; }, 0);
+    console.log(total) // Affiche 60
+    ```
+
+- {{jsxref("Array.reduceRight", "reduceRight(callback[, valeurInitiale])")}} fonctionne comme `reduce()`, mais débute avec le dernier élément (parcourt le tableau de droite à gauche).
+
+`reduce()` et `reduceRight()` sont à utiliser lorsqu'on souhaite n'obtenir qu'une seule valeur, récursivement, à partir des différents éléments du tableau. Pour plus d'informations sur l'utilisation d'une valeur d'initialisation pour ces deux fonctions, se référer à leurs pages : {{jsxref("Array.reduceRight")}} et {{jsxref("Array.reduce")}}
+
+### Tableaux multi-dimensionnels
+
+Les tableaux peuvent être imbriqués les uns dans les autres. Cela signifie qu'un tableau peut avoir un élément dont la valeur est un tableau. En utilisant ce comportement, on peut donc créer des matrices, voire des tableaux à plusieurs dimensions.
+
+Par exemple, avec le code suivant :
+
+```js
+var a = new Array(4);
+for (i = 0; i < 4; i++) {
+  a[i] = new Array(4);
+  for (j = 0; j < 4; j++) {
+    a[i][j] = "[" + i + "," + j + "]";
+  }
+}
+```
+
+On pourra avoir le tableau suivant sur deux dimensions :
+
+```js
+Ligne 0 : [0,0] [0,1] [0,2] [0,3]
+Ligne 1 : [1,0] [1,1] [1,2] [1,3]
+Ligne 2 : [2,0] [2,1] [2,2] [2,3]
+Ligne 3 : [3,0] [3,1] [3,2] [3,3]
+```
+
+### Les tableaux et les expressions rationnelles
+
+Lorsqu'un tableau est le résultat d'une correspondance entre une expression rationnelle et une chaîne de caractères, les éléments et propriétés du tableau fournissent des informations sur la correspondance. Les méthodes suivantes peuvent renvoyer un tableau : {{jsxref("Objets_globaux/RegExp/exec","RegExp.exec()")}}, {{jsxref("Objets_globaux/String/match/exec","String.match()")}},  {{jsxref("Objets_globaux/String/split","String.split()")}}. Pour plus d'informations sur les tableaux et les expressions rationnelles, voir le chapitre du guide JavaScript sur [les expressions rationnelles](/fr/docs/Web/JavaScript/Guide/Expressions_régulières).
+
+### Manipuler des objets semblables à des tableaux
+
+Certains objets JavaScript tels que {{domxref("NodeList")}} (renvoyé par {{domxref("document.getElementsByTagName()")}}) ou l'objet [`arguments`](/fr/docs/Web/JavaScript/Reference/Fonctions/arguments) (disponible au sein d'une fonction) ressemblent à des tableaux mais n'en sont pas (ils n'ont pas toutes les méthodes décrites ci-avant par exemple). Ainsi, l'objet `arguments` fournit une propriété {{jsxref("Objets_globaux/Function/length","length")}} mais n'implémente pas la méthode {{jsxref("Array.forEach", "forEach()")}}.
+
+Les méthodes du prototype des tableaux permettent d'utiliser les méthodes d'objets `Array` sur des objets semblables à des tableaux :
+
+```js
+ function alertArguments() {
+   Array.prototype.forEach.call(arguments, function(item) {
+     console.log(item);
+   });
+ }
+```
+
+Il est possible d'utiliser ces méthodes génériques sur des chaînes de caractères :
+
+```js
+Array.prototype.forEach.call("une chaîne", function(chr) {
+   console.log(chr);
+});
+```
+
+## Les tableaux typés
+
+[Les tableaux typés JavaScript](/fr/docs/Web/JavaScript/Tableaux_typés) sont des objets semblables à des tableaux qui fournissent un moyen d'accéder à des données binaires. Comme on l'a vu ci-avant, les objets {{jsxref("Array")}} grandissent et rétrécissent dynamiquement et peuvent contenir n'importe quelle valeur JavaScript. Les moteurs JavaScript effectuent des optimisations afin que les tableaux puissent être utilisés rapidement. Cependant, avec le développement des applications web, les applications viennent à manipuler des données audio, vidéo, binaires et accèdent à des données brutes via les [WebSockets](/fr/docs/WebSockets) d'autres outils. Il apparaît donc nécessaire d'avoir les outils JavaScript pertinents pour manipuler efficacement des données binaires, organisées au sein de tableaux typés.
+
+### Les vues et les tampons de mémoire (_buffers_) : l'architecture des tableaux typés
+
+Afin de permettre un maximum de flexibilité et d'efficacité, les tableaux typés JavaScript séparent l'implémentation entre **les tampons (_buffers_)** et **les vues (_views_)**. Un tampon de mémoire, implémenté par l'objet {{jsxref("ArrayBuffer")}}, est un objet représentant un fragment de données. Un tampon n'a pas de format a proprement parler et il ne fournit aucun mécanisme pour accéder à son contenu. Afin d'accéder à la mémoire contenu dans le tampon, on a besoin d'utiliser une vue. Une vue fournit un contexte, c'est-à-dire un type de donnée, un indice de départ et un nombre d'éléments, qui permet de traiter les données initiales comme un vrai tableau typé.
+
+![Typed arrays in an ArrayBuffer](https://mdn.mozillademos.org/files/8629/typed_arrays.png)
+
+### `ArrayBuffer`
+
+Le type {{jsxref("ArrayBuffer")}} est un type de donnée utilisé pour représenter un tampon de données binaire générique dont la longueur est fixée. Un tampon de données ne peut pas être manipulé directement. Pour manipuler les données, il faut créer une vue sur le tableau typé ou un objet {{jsxref("DataView")}} qui représente le tampon dans un format spécifique et qui pourra être utilisé pour lire et écrire des informations du tampon.
+
+### Les vues qui sont des tableaux typés
+
+Les vues de tableaux typés possèdent des noms explicites et fournissent des vues pour les types numériques usuels tels que `Int8`, `Uint32`, `Float64` et ainsi de suite. Il existe un type de vue spécial qui est `Uint8ClampedArray`. Ce type ramène les différentes valeurs exploitées entre 0 et 255. Cela peut notamment être utile pour [le traitement des données d'un canvas](/fr/docs/Web/API/ImageData).
+
+{{page("/fr/docs/Web/JavaScript/Reference/Objets_globaux/TypedArray", "Les_objets_TypedArray")}}
+
+Pour plus d'informations sur les tableaux typés, voir [l'article de la référence](/fr/docs/Web/JavaScript/Tableaux_typés) sur les différents objets {{jsxref("TypedArray")}}.
+
+{{PreviousNext("Web/JavaScript/Guide/Expressions_régulières", "Web/JavaScript/Guide/Collections_avec_clés")}}
diff --git a/files/fr/web/javascript/guide/introduction/index.html b/files/fr/web/javascript/guide/introduction/index.html
deleted file mode 100644
index 7d99c7a165..0000000000
--- a/files/fr/web/javascript/guide/introduction/index.html
+++ /dev/null
@@ -1,138 +0,0 @@
----
-title: Introduction
-slug: Web/JavaScript/Guide/Introduction
-tags:
-  - Débutant
-  - Guide
-  - Intro
-  - JavaScript
-translation_of: Web/JavaScript/Guide/Introduction
----
-<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide", "Web/JavaScript/Guide/Types_et_grammaire")}}</div>
-
-<p>Ce chapitre introduit JavaScript et présente certains de ses concepts fondamentaux.</p>
-
-<h2 id="Ce_que_vous_devriez_déjà_savoir">Ce que vous devriez déjà savoir</h2>
-
-<p>Pour lire ce guide, il est conseillé d'avoir :</p>
-
-<ul>
- <li>Une compréhension générale du fonctionnement d'Internet et du <a href="https://developer.mozilla.org/fr/docs/Glossaire/World_Wide_Web">World Wide Web</a> .</li>
- <li>Une connaissance élémentaire du <em>HyperText Markup Language</em> ({{Glossary("HTML")}}).</li>
- <li>Une expérience préalable en programmation. Si vous débutez la programmation, vous pouvez utiliser l'un des tutoriels listés sur la page <a href="/fr/docs/Web/JavaScript">JavaScript</a>.</li>
-</ul>
-
-<h2 id="Où_trouver_des_informations_concernant_JavaScript">Où trouver des informations concernant JavaScript</h2>
-
-<p>La documentation MDN pour JavaScript comprend :</p>
-
-<ul>
- <li><a href="/fr/docs/Apprendre">Apprendre le Web</a> : cette section fournit des informations destinées aux débutants et présente les concepts de bases autour de la programmation et d'Internet.</li>
- <li><a href="/fr/docs/Web/JavaScript/Guide">Le guide JavaScript</a> (ce guide) fournit un aperçu du langage JavaScript et de ses objets.</li>
- <li><a href="/fr/docs/Web/JavaScript/Reference">La référence JavaScript</a> fournit une référence détaillée sur les fonctionnalités de JavaScript.</li>
-</ul>
-
-<p>Si vous débutez en JavaScript, vous pouvez commencer par les articles de la section <a href="/fr/docs/Apprendre">Apprendre</a> et du <a href="/fr/docs/Web/JavaScript/Guide">Guide JavaScript</a>. Une fois que vous maîtrisez les briques de bases, vous pourrez utiliser <a href="/fr/docs/Web/JavaScript/Reference">la référence JavaScript</a> pour obtenir des informations détaillées sur chacun des objets natifs et des instructions.</p>
-
-<h2 id="Quest-ce_que_JavaScript">Qu'est-ce que JavaScript ?</h2>
-
-<p>JavaScript est un langage de script, multi-plateforme et orienté objet. C'est un langage léger qui doit faire partie d'un environnement hôte (un navigateur web par exemple) pour qu'il puisse être utilisé sur les objets de cet environnement.</p>
-
-<p>JavaScript contient une bibliothèque standard d'objets tels que <code>Array</code>, <code>Date</code>, et <code>Math</code>, ainsi qu'un ensemble d'éléments de langage tels que les opérateurs, les structures de contrôles et les instructions. Ces fonctionnalités centrales et natives de JavaScript peuvent être étendues de plusieurs façons en fournissant d'autres objets, par exemple :</p>
-
-<ul>
- <li><em>JavaScript côté client</em> étend ces éléments de base en fournissant des objets pour contrôler le navigateur et le <em>Document Object Model</em> (DOM). Par exemple, les extensions du langage côté client permettent de placer des éléments dans un formulaire HTML, de réagir aux événements déclenchés par l'utilisateur (les clics, la saisie d'un formulaire, les actions de navigation, etc.).</li>
- <li><em>JavaScript côte serveur</em> étend ces éléments de base avec des objets utiles pour le fonctionnement sur un serveur tels que la possibilité de communiquer avec une base de données, manipuler des fichiers, passer d'une application à une autre, etc.</li>
-</ul>
-
-<h2 id="JavaScript_et_Java">JavaScript et Java</h2>
-
-<p>JavaScript et Java se ressemblent sur certains aspects mais ils sont fondamentalement différents l'un de l'autre. Le langage JavaScript ressemble à Java mais n'est pas typé statiquement et le typage de JavaScript est faible (alors qu'il est fort en Java). La syntaxe des expressions JavaScript est très proche de celle du Java avec les conventions de nommage et les constructions conditionnelles par exemple : c'est une des raisons qui a fait que le langage LiveScript a été renommé en JavaScript.</p>
-
-<p>À la différence de Java qui est un système compilé et dont les classes sont déclarées, JavaScript est traité lors de l'exécution et possède quelques types de données pour représenter les nombres, les booléens et les chaînes de caractères (entre autres). JavaScript utilise un modèle basé sur les prototypes pour représenter les liens entre les objets alors que Java utilise un modèle plus courant basé sur les classes. Les prototypes permettent d'avoir un héritage dynamique. Ainsi, les caractéristiques héritées par un objet peuvent varier dans le temps. JavaScript supporte également les fonctions qui sont des objets à part entière et qui peuvent être des propriétés d'autres objets.</p>
-
-<p>JavaScript est un langage plutôt « libre » comparé au Java. Il n'est pas nécessaire de déclarer toutes les variables, classes et méthodes. Il n'est pas nécessaire de savoir si une méthode est publique, privée ou protégée et il n'y a pas d'interfaces à implémenter. Les variables, les paramètres et les valeurs de retour des fonctions ne sont pas explicitement typés.</p>
-
-<p>Java est un langage de programmation utilisant les classes, conçus pour être exécuté rapidement et garantir la sûreté du typage. Cela signifie par exemple qu'il n'est pas possible de transformer un entier Java en un objet ou qu'on ne peut pas accéder à des caractéristiques privées en corrompant le bytecode Java. Le modèle de classes utilisé par Java signifie qu'un programme n'est constitué que de classes et de méthodes. Cet héritage à base de classes, associé au typage fort font qu'on obtient des structures et des hiérarchies d'objets fortement couplées. Pour ces raisons, Java peut apparaître comme un langage plus complexe que JavaScript.</p>
-
-<p>À l'inverse, JavaScript est un descendant de langages plus légers, dynamiquement typés tels que HyperTalk et dBASE. Ces langages de scripts visent un public plus large avec une syntaxe plus simple, des fonctionnalités natives spécialisées et des prérequis minimaux pour pouvoir créer des objets.</p>
-
-<table class="standard-table">
- <caption>Comparaison synthétique entre JavaScript et Java</caption>
- <thead>
-  <tr>
-   <th scope="col">JavaScript</th>
-   <th scope="col">Java</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>Orienté objet. Aucune distinction entre les types et les objets. L'héritage est basé sur un mécanisme utilisant les prototypes et les propriétés et méthodes peuvent être ajoutées dynamiquement à n'importe quel objet.</td>
-   <td>Orienté objet, utilisant un modèle de classes. Les objets sont divisés entre les classes et les instances, l'héritage s'effectue via la hiérarchie des classes. Les classes et les instances ne peuvent pas recevoir de nouvelles propriétés ou méthodes dynamiquement.</td>
-  </tr>
-  <tr>
-   <td>Le type de données des variables n'est pas déclaré (typage dynamique).</td>
-   <td>Le type de données des variables doit être déclaré (typage statique).</td>
-  </tr>
- </tbody>
-</table>
-
-<p>Pour plus d'informations sur les différences entre JavaScript et Java, voir le chapitre sur <a href="/fr/docs/Web/JavaScript/Guide/Le_modèle_objet_JavaScript_en_détails">les détails du modèle objet JavaScript</a>.</p>
-
-<h2 id="JavaScript_et_la_spécification_ECMAScript">JavaScript et la spécification ECMAScript</h2>
-
-<p>JavaScript est standardisé par <a href="https://www.ecma-international.org/">Ecma International</a> — une association européenne de standardisation des systèmes d'information et de communication (ECMA étant historiquement un acronyme pour <em>European Computer Manufacturers Association</em>) qui délivre un langage de programmation standardisé, international appelé ECMAScript. Ce langage se comporte de la même façon pour toutes les applications qui supportent ce standard. Les entreprises peuvent utiliser ce langage standard afin de développer leur implémentation de JavaScript. Le standard ECMAScript est documenté avec la spécification ECMA-262. Voir la page <a href="/fr/docs/Web/JavaScript/Nouveautés_et_historique_de_JavaScript">Nouveautés de JavaScript</a> pour en savoir plus sur les différentes versions de JavaScript et les différentes éditions de la spécification ECMAScript.</p>
-
-<p>Le standard ECMA-262 est également approuvé par l'<a href="https://www.iso.ch/">ISO</a> (<em>International Organization for Standardization</em>) sous ISO-16262. La spécification peut également être trouvée sur <a href="https://www.ecma-international.org/publications/standards/Ecma-262.htm">le site web d'Ecma International</a>. La spécification ECMAScript ne décrit pas le <em>Document Object Model</em> (DOM) qui est standardisé par le <a href="https://www.w3.org/">World Wide Web Consortium (W3C)</a> et <a href="https://whatwg.org">le WHATWG (Web Hypertext Application Technology Working Group)</a>. Le DOM définit la façon dont les documents HTML sont exposés aux scripts. Pour mieux comprendre les différentes technologies gravitant autour de JavaScript, voir l'article <a href="/fr/docs/Web/JavaScript/JavaScript_technologies_overview">Aperçu des technologies JavaScript</a>.</p>
-
-<h3 id="Documentation_JavaScript_et_spécification_ECMAScript">Documentation JavaScript et spécification ECMAScript</h3>
-
-<p>La spécification ECMAScript est un ensemble de conditions à respecter pour implémenter ECMAScript : cela est utile lorsqu'on souhaite implémenter des fonctionnalités standard du langage au sein d'une implémentation ou d'un moteur ECMAScript (tel que SpiderMonkey pour Firefox, ou V8 pour Chrome).</p>
-
-<p>La spécification ECMAScript n'a pas pour but d'aider les développeurs à écrire des scripts. La documentation JavaScript permet d'obtenir des informations pour écrire des scripts JavaScript.</p>
-
-<p>La spécification ECMAScript utilise parfois une terminologie et une syntaxe qui peuvent sembler étranges aux yeux d'un développeur JavaScript. Bien que la description du langage diffère entre ECMAScript et la documentation JavaScript, le langage lui-même reste le même. JavaScript supporte l'ensemble des fonctionnalités mises en avant dans la spécification ECMAScript.</p>
-
-<p>La documentation JavaScript décrit les aspects du langage qui pourront être utilisés par les développeurs JavaScript.</p>
-
-<h2 id="Démarrer_avec_JavaScript">Démarrer avec JavaScript</h2>
-
-<p>Pour commencer à développer en JavaScript, c'est très simple : il suffit d'avoir un navigateur web récent. Ce guide inclut certaines fonctionnalités de JavaScript qui ne sont disponibles que dans les dernières versions de Firefox, il est donc recommandé d'utiliser une version de Firefox à jour pour essayer les exemples fournis.</p>
-
-<p>L'outil Web Console intégré à Firefox est utile pour expérimenter avec JavaScript. Vous pouvez l'utiliser selon deux modes : le mode de saisie à une ligne et le mode de saisie multiligne.</p>
-
-<h3 id="La_console_web">La console web</h3>
-
-<p>La <a href="/fr/docs/Outils/Web_Console">console web</a> affiche des informations sur la page actuellement chargée, elle dispose également d'une <a href="/fr/docs/Outils/Web_Console#L'interpr.C3.A9teur_de_lignes_de_commande">ligne de commande</a> qui peut être utilisée pour exécuter des expressions JavaScript dans la page actuelle.</p>
-
-<p>Pour ouvrir la console, dans le menu, sélectionner « Développement » puis « Console web » (en passant par la barre d'outils, ce sera « Outils » puis « Développement web » puis « Console web »). Avec le clavier, on pourra utiliser la combinaison de touche <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>K</kbd> sur Windows et Linux ou <kbd>Cmd</kbd>-<kbd>Option</kbd>-<kbd>K</kbd> sur Mac. Une fois lancée, la console apparaît en base de la fenêtre du navigateur. En bas de la zone occupée par la console, il y a une ligne de commande qui peut être utilisée pour saisir des instructions JavaScript, le résultat de ces instructions sera affiché dans le panneau au dessus :</p>
-
-<p><img alt="Console web" src="https://mdn.mozillademos.org/files/16569/2019-04-04_00-15-29.png"></p>
-
-
-<p>La console fonctionne exactement de la même manière que <code>eval</code> : la dernière expression saisie est retournée. Pour simplifier, on peut imaginer que chaque fois qu'une expression est saisie dans la console, elle est en fait entourée de <code>console.log</code> autour de <code>eval</code>, comme suit:</p>
-
-<pre class="brush: js">function saluer(votreNom) {
-  alert(&quot;Hello &quot; + votreNom)
-}
-console.log(eval('3 + 5'))
-</pre>
-
-<h3 id="EditeurMultiligne">Le mode éditeur multiligne</h3>
-
-<p>La console est pratique quand il s'agit d'exécuter des instructions ligne par ligne. Cependant dès qu'on souhaite exécuter un script plus complexe de plusieurs lignes, la console devient vite limitée. Pour ça, on pourra utiliser <a href="/fr/docs/Tools/Web_Console/The_command_line_interpreter#le_mode_%C3%A9diteur_multiligne">le mode éditeur multiligne</a>.</p>
-
-<h3 id="Coucou_monde_hello_world">Coucou monde (<em>hello world</em>)</h3>
-
-<p>Pour commencer à écrire du JavaScript, ouvrez votre console web en mode éditeur multiligne et écrivez votre premier « <em>Hello world</em> » en JavaScript.</p>
-
-<pre class="brush: js">function saluer(utilisateur) {
-  return "Bonjour " + utilisateur;
-}
-
-saluer("Alice"); // "Bonjour Alice"
-</pre>
-
-<p>Dans les pages qui suivent, ce guide introduira la syntaxe du langage JavaScript ainsi que ses fonctionnalités ; vous pourrez ainsi écrire des applications plus complexes.</p>
-
-<p>{{PreviousNext("Web/JavaScript/Guide", "Web/JavaScript/Guide/Types_et_grammaire")}}</p>
diff --git a/files/fr/web/javascript/guide/introduction/index.md b/files/fr/web/javascript/guide/introduction/index.md
new file mode 100644
index 0000000000..cc8794cc3e
--- /dev/null
+++ b/files/fr/web/javascript/guide/introduction/index.md
@@ -0,0 +1,118 @@
+---
+title: Introduction
+slug: Web/JavaScript/Guide/Introduction
+tags:
+  - Débutant
+  - Guide
+  - Intro
+  - JavaScript
+translation_of: Web/JavaScript/Guide/Introduction
+---
+{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide", "Web/JavaScript/Guide/Types_et_grammaire")}}
+
+Ce chapitre introduit JavaScript et présente certains de ses concepts fondamentaux.
+
+## Ce que vous devriez déjà savoir
+
+Pour lire ce guide, il est conseillé d'avoir :
+
+- Une compréhension générale du fonctionnement d'Internet et du [World Wide Web](https://developer.mozilla.org/fr/docs/Glossaire/World_Wide_Web) .
+- Une connaissance élémentaire du _HyperText Markup Language_ ({{Glossary("HTML")}}).
+- Une expérience préalable en programmation. Si vous débutez la programmation, vous pouvez utiliser l'un des tutoriels listés sur la page [JavaScript](/fr/docs/Web/JavaScript).
+
+## Où trouver des informations concernant JavaScript
+
+La documentation MDN pour JavaScript comprend :
+
+- [Apprendre le Web](/fr/docs/Apprendre) : cette section fournit des informations destinées aux débutants et présente les concepts de bases autour de la programmation et d'Internet.
+- [Le guide JavaScript](/fr/docs/Web/JavaScript/Guide) (ce guide) fournit un aperçu du langage JavaScript et de ses objets.
+- [La référence JavaScript](/fr/docs/Web/JavaScript/Reference) fournit une référence détaillée sur les fonctionnalités de JavaScript.
+
+Si vous débutez en JavaScript, vous pouvez commencer par les articles de la section [Apprendre](/fr/docs/Apprendre) et du [Guide JavaScript](/fr/docs/Web/JavaScript/Guide). Une fois que vous maîtrisez les briques de bases, vous pourrez utiliser [la référence JavaScript](/fr/docs/Web/JavaScript/Reference) pour obtenir des informations détaillées sur chacun des objets natifs et des instructions.
+
+## Qu'est-ce que JavaScript ?
+
+JavaScript est un langage de script, multi-plateforme et orienté objet. C'est un langage léger qui doit faire partie d'un environnement hôte (un navigateur web par exemple) pour qu'il puisse être utilisé sur les objets de cet environnement.
+
+JavaScript contient une bibliothèque standard d'objets tels que `Array`, `Date`, et `Math`, ainsi qu'un ensemble d'éléments de langage tels que les opérateurs, les structures de contrôles et les instructions. Ces fonctionnalités centrales et natives de JavaScript peuvent être étendues de plusieurs façons en fournissant d'autres objets, par exemple :
+
+- _JavaScript côté client_ étend ces éléments de base en fournissant des objets pour contrôler le navigateur et le _Document Object Model_ (DOM). Par exemple, les extensions du langage côté client permettent de placer des éléments dans un formulaire HTML, de réagir aux événements déclenchés par l'utilisateur (les clics, la saisie d'un formulaire, les actions de navigation, etc.).
+- _JavaScript côte serveur_ étend ces éléments de base avec des objets utiles pour le fonctionnement sur un serveur tels que la possibilité de communiquer avec une base de données, manipuler des fichiers, passer d'une application à une autre, etc.
+
+## JavaScript et Java
+
+JavaScript et Java se ressemblent sur certains aspects mais ils sont fondamentalement différents l'un de l'autre. Le langage JavaScript ressemble à Java mais n'est pas typé statiquement et le typage de JavaScript est faible (alors qu'il est fort en Java). La syntaxe des expressions JavaScript est très proche de celle du Java avec les conventions de nommage et les constructions conditionnelles par exemple : c'est une des raisons qui a fait que le langage LiveScript a été renommé en JavaScript.
+
+À la différence de Java qui est un système compilé et dont les classes sont déclarées, JavaScript est traité lors de l'exécution et possède quelques types de données pour représenter les nombres, les booléens et les chaînes de caractères (entre autres). JavaScript utilise un modèle basé sur les prototypes pour représenter les liens entre les objets alors que Java utilise un modèle plus courant basé sur les classes. Les prototypes permettent d'avoir un héritage dynamique. Ainsi, les caractéristiques héritées par un objet peuvent varier dans le temps. JavaScript supporte également les fonctions qui sont des objets à part entière et qui peuvent être des propriétés d'autres objets.
+
+JavaScript est un langage plutôt « libre » comparé au Java. Il n'est pas nécessaire de déclarer toutes les variables, classes et méthodes. Il n'est pas nécessaire de savoir si une méthode est publique, privée ou protégée et il n'y a pas d'interfaces à implémenter. Les variables, les paramètres et les valeurs de retour des fonctions ne sont pas explicitement typés.
+
+Java est un langage de programmation utilisant les classes, conçus pour être exécuté rapidement et garantir la sûreté du typage. Cela signifie par exemple qu'il n'est pas possible de transformer un entier Java en un objet ou qu'on ne peut pas accéder à des caractéristiques privées en corrompant le bytecode Java. Le modèle de classes utilisé par Java signifie qu'un programme n'est constitué que de classes et de méthodes. Cet héritage à base de classes, associé au typage fort font qu'on obtient des structures et des hiérarchies d'objets fortement couplées. Pour ces raisons, Java peut apparaître comme un langage plus complexe que JavaScript.
+
+À l'inverse, JavaScript est un descendant de langages plus légers, dynamiquement typés tels que HyperTalk et dBASE. Ces langages de scripts visent un public plus large avec une syntaxe plus simple, des fonctionnalités natives spécialisées et des prérequis minimaux pour pouvoir créer des objets.
+
+| JavaScript                                                                                                                                                                                                               | Java                                                                                                                                                                                                                                                                    |
+| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Orienté objet. Aucune distinction entre les types et les objets. L'héritage est basé sur un mécanisme utilisant les prototypes et les propriétés et méthodes peuvent être ajoutées dynamiquement à n'importe quel objet. | Orienté objet, utilisant un modèle de classes. Les objets sont divisés entre les classes et les instances, l'héritage s'effectue via la hiérarchie des classes. Les classes et les instances ne peuvent pas recevoir de nouvelles propriétés ou méthodes dynamiquement. |
+| Le type de données des variables n'est pas déclaré (typage dynamique).                                                                                                                                                   | Le type de données des variables doit être déclaré (typage statique).                                                                                                                                                                                                   |
+
+Pour plus d'informations sur les différences entre JavaScript et Java, voir le chapitre sur [les détails du modèle objet JavaScript](/fr/docs/Web/JavaScript/Guide/Le_modèle_objet_JavaScript_en_détails).
+
+## JavaScript et la spécification ECMAScript
+
+JavaScript est standardisé par [Ecma International](https://www.ecma-international.org/) — une association européenne de standardisation des systèmes d'information et de communication (ECMA étant historiquement un acronyme pour _European Computer Manufacturers Association_) qui délivre un langage de programmation standardisé, international appelé ECMAScript. Ce langage se comporte de la même façon pour toutes les applications qui supportent ce standard. Les entreprises peuvent utiliser ce langage standard afin de développer leur implémentation de JavaScript. Le standard ECMAScript est documenté avec la spécification ECMA-262. Voir la page [Nouveautés de JavaScript](/fr/docs/Web/JavaScript/Nouveautés_et_historique_de_JavaScript) pour en savoir plus sur les différentes versions de JavaScript et les différentes éditions de la spécification ECMAScript.
+
+Le standard ECMA-262 est également approuvé par l'[ISO](https://www.iso.ch/) (_International Organization for Standardization_) sous ISO-16262. La spécification peut également être trouvée sur [le site web d'Ecma International](https://www.ecma-international.org/publications/standards/Ecma-262.htm). La spécification ECMAScript ne décrit pas le _Document Object Model_ (DOM) qui est standardisé par le [World Wide Web Consortium (W3C)](https://www.w3.org/) et [le WHATWG (Web Hypertext Application Technology Working Group)](https://whatwg.org). Le DOM définit la façon dont les documents HTML sont exposés aux scripts. Pour mieux comprendre les différentes technologies gravitant autour de JavaScript, voir l'article [Aperçu des technologies JavaScript](/fr/docs/Web/JavaScript/JavaScript_technologies_overview).
+
+### Documentation JavaScript et spécification ECMAScript
+
+La spécification ECMAScript est un ensemble de conditions à respecter pour implémenter ECMAScript : cela est utile lorsqu'on souhaite implémenter des fonctionnalités standard du langage au sein d'une implémentation ou d'un moteur ECMAScript (tel que SpiderMonkey pour Firefox, ou V8 pour Chrome).
+
+La spécification ECMAScript n'a pas pour but d'aider les développeurs à écrire des scripts. La documentation JavaScript permet d'obtenir des informations pour écrire des scripts JavaScript.
+
+La spécification ECMAScript utilise parfois une terminologie et une syntaxe qui peuvent sembler étranges aux yeux d'un développeur JavaScript. Bien que la description du langage diffère entre ECMAScript et la documentation JavaScript, le langage lui-même reste le même. JavaScript supporte l'ensemble des fonctionnalités mises en avant dans la spécification ECMAScript.
+
+La documentation JavaScript décrit les aspects du langage qui pourront être utilisés par les développeurs JavaScript.
+
+## Démarrer avec JavaScript
+
+Pour commencer à développer en JavaScript, c'est très simple : il suffit d'avoir un navigateur web récent. Ce guide inclut certaines fonctionnalités de JavaScript qui ne sont disponibles que dans les dernières versions de Firefox, il est donc recommandé d'utiliser une version de Firefox à jour pour essayer les exemples fournis.
+
+L'outil Web Console intégré à Firefox est utile pour expérimenter avec JavaScript. Vous pouvez l'utiliser selon deux modes : le mode de saisie à une ligne et le mode de saisie multiligne.
+
+### La console web
+
+La [console web](/fr/docs/Outils/Web_Console) affiche des informations sur la page actuellement chargée, elle dispose également d'une [ligne de commande](/fr/docs/Outils/Web_Console#L'interpr.C3.A9teur_de_lignes_de_commande) qui peut être utilisée pour exécuter des expressions JavaScript dans la page actuelle.
+
+Pour ouvrir la console, dans le menu, sélectionner « Développement » puis « Console web » (en passant par la barre d'outils, ce sera « Outils » puis « Développement web » puis « Console web »). Avec le clavier, on pourra utiliser la combinaison de touche <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>K</kbd> sur Windows et Linux ou <kbd>Cmd</kbd>-<kbd>Option</kbd>-<kbd>K</kbd> sur Mac. Une fois lancée, la console apparaît en base de la fenêtre du navigateur. En bas de la zone occupée par la console, il y a une ligne de commande qui peut être utilisée pour saisir des instructions JavaScript, le résultat de ces instructions sera affiché dans le panneau au dessus :
+
+![Console web](https://mdn.mozillademos.org/files/16569/2019-04-04_00-15-29.png)
+
+La console fonctionne exactement de la même manière que `eval` : la dernière expression saisie est retournée. Pour simplifier, on peut imaginer que chaque fois qu'une expression est saisie dans la console, elle est en fait entourée de `console.log` autour de `eval`, comme suit:
+
+```js
+function saluer(votreNom) {
+  alert("Hello " + votreNom)
+}
+console.log(eval('3 + 5'))
+```
+
+### Le mode éditeur multiligne
+
+La console est pratique quand il s'agit d'exécuter des instructions ligne par ligne. Cependant dès qu'on souhaite exécuter un script plus complexe de plusieurs lignes, la console devient vite limitée. Pour ça, on pourra utiliser [le mode éditeur multiligne](/fr/docs/Tools/Web_Console/The_command_line_interpreter#le_mode_%C3%A9diteur_multiligne).
+
+### Coucou monde (_hello world_)
+
+Pour commencer à écrire du JavaScript, ouvrez votre console web en mode éditeur multiligne et écrivez votre premier « _Hello world_ » en JavaScript.
+
+```js
+function saluer(utilisateur) {
+  return "Bonjour " + utilisateur;
+}
+
+saluer("Alice"); // "Bonjour Alice"
+```
+
+Dans les pages qui suivent, ce guide introduira la syntaxe du langage JavaScript ainsi que ses fonctionnalités ; vous pourrez ainsi écrire des applications plus complexes.
+
+{{PreviousNext("Web/JavaScript/Guide", "Web/JavaScript/Guide/Types_et_grammaire")}}
diff --git a/files/fr/web/javascript/guide/iterators_and_generators/index.html b/files/fr/web/javascript/guide/iterators_and_generators/index.html
deleted file mode 100644
index 87d1a5c28a..0000000000
--- a/files/fr/web/javascript/guide/iterators_and_generators/index.html
+++ /dev/null
@@ -1,176 +0,0 @@
----
-title: Itérateurs et générateurs
-slug: Web/JavaScript/Guide/Iterators_and_Generators
-tags:
-  - Guide
-  - Intermediate
-  - JavaScript
-translation_of: Web/JavaScript/Guide/Iterators_and_Generators
-original_slug: Web/JavaScript/Guide/iterateurs_et_generateurs
----
-<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Utiliser_les_promesses", "Web/JavaScript/Guide/Métaprogrammation")}}</div>
-
-<p>Effectuer des traitements sur chacun des éléments d'une collection est une opération très fréquente. Il existe plusieurs outils natifs dans JavaScript pour parcourir une collection, les boucles <code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/for">for</a></code>, <code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/map">map()</a></code>, <code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/filter">filter()</a></code>. Les itérateurs et les générateurs font de ce concept d'itération une fonctionnalité principale du langage et permettent d'adapter et de personnaliser le comportement des boucles <code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/for...of">for...of</a></code>.</p>
-
-<p>Pour plus de détails sur les mécanismes d'itération, voir les pages suivantes :</p>
-
-<ul>
- <li><a href="/fr/docs/Web/JavaScript/Reference/Les_protocoles_iteration">Les protocoles d'itération</a></li>
- <li>{{jsxref("Instructions/for...of","for...of")}}</li>
- <li>{{jsxref("Instructions/function*","function*")}} et {{jsxref("Generator")}}</li>
- <li>{{jsxref("Opérateurs/yield","yield")}} et {{jsxref("Opérateurs/yield*","yield*")}}</li>
-</ul>
-
-<h2 id="Itérateurs">Itérateurs</h2>
-
-<p>Un itérateur est un objet sachant comment accéder aux éléments d'une collection un par un et qui connait leur position dans la collection. En JavaScript, un itérateur expose une méthode <code>next()</code> qui retourne l'élément suivant dans la séquence. Cette méthode renvoie un objet possédant deux propriétés : <code>done</code> et <code>value</code>.</p>
-
-<p>Un itérateur est "terminé" lorsque l'appel à la méthode <code>next()</code> renvoie un objet dont la propriété <code>done</code> vaut <code>true</code>.</p>
-
-<p>Une fois créé, un itérateur peut être utilisé explicitement en appelant sa méthode <code>next()</code>, ou implicitement en utilisant la boucle <code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/for...in">for...in</a></code>.</p>
-
-<p>Voici un exemple d'une fonction créant un itérateur qui parcourt l'intervalle défini par ses arguments (depuis <code>debut</code> (inclus) jusqu'à <code>end</code> (exclus) et avec <code>pas</code> comme incrément. La valeur finale qui est renvoyée correspond à la taille de la séquence créée</p>
-
-<pre class="brush: js">function creerIterateurIntervalle(debut = 0, fin = Infinity, pas = 1) {
-  let prochainIndex = debut;
-  let nbIterations = 0;
-
-  const rangeIterator = {
-    next: function() {
-      let resultat;
-      if (prochainIndex &lt; fin) {
-        resultat = { value: prochainIndex, done: false };
-        prochainIndex += pas;
-        nbIterations++;
-        return resultat;
-      }
-      return { value: nbIterations, done: true }
-    }
-  };
-  return rangeIterator;
-}</pre>
-
-<p>On pourra alors utiliser cette fonction et l'itérateur de la façon suivante :</p>
-
-<pre class="brush: js">let it = creerIterateurIntervalle(1, 10, 2);
-
-let resultat = it.next();
-while (!resultat.done) {
- console.log(resultat.value); // 1 3 5 7 9
- resultat = it.next();
-}
-
-console.log("La séquence parcourue contenait ", result.value, " éléments.");
-</pre>
-
-<h2 id="Itérables">Itérables</h2>
-
-<p>Un objet est considéré comme <strong>itérable</strong> s'il définit le comportement qu'il aura lors de l'itération (par exemple les valeurs qui seront utilisées dans une boucle {{jsxref("Instructions/for...of", "for...of")}}). Certains types natifs, tels qu'{{jsxref("Array")}} ou {{jsxref("Map")}}, possède un comportement par défaut pour les itérations, cependant d'autres types comme les Objets, ne possèdent pas ce comportement.</p>
-
-<p>Pour qu'un objet soit <strong>itérable</strong>, un objet doit implémenter la méthode <strong>@@iterator</strong>, cela signifie que l'objet (ou un des objets de la <a href="/fr/docs/Web/JavaScript/Héritage_et_chaîne_de_prototypes">chaîne de prototypes</a>) doit avoir une propriété avec la clé {{jsxref("Symbol.iterator")}}. Cette fonction doit également, même si ce n'est pas une obligation, renvoyer une nouvel opérateur à chaque appel.</p>
-
-<h3 id="Itérables_personnalisés">Itérables personnalisés</h3>
-
-<p>Il est possible de définir ses propres itérables de cette façon :</p>
-
-<pre class="brush: js">var monItérable = {};
-monItérable[Symbol.iterator] = function* () {
-    yield 1;
-    yield 2;
-    yield 3;
-};
-[...monItérable] // [1, 2, 3]
-</pre>
-
-<h3 id="Itérables_natifs">Itérables natifs</h3>
-
-<p>{{jsxref("String")}}, {{jsxref("Array")}}, {{jsxref("TypedArray")}}, {{jsxref("Map")}} et {{jsxref("Set")}} sont des itérables natifs car les prototypes de chacun ont tous une méthode {{jsxref("Symbol.iterator")}}.</p>
-
-<h3 id="Les_éléments_de_syntaxe_utilisant_des_itérables">Les éléments de syntaxe utilisant des itérables</h3>
-
-<p>Certaines instructions ou expressions utilisent des itérables, par exemple les boucles {{jsxref("Instructions/for...of","for...of")}} et {{jsxref("Opérateurs/yield*","yield*")}}.</p>
-
-<pre class="brush: js">for(let value of ["a", "b", "c"]){
-    console.log(value)
-}
-// "a"
-// "b"
-// "c"
-
-[..."abc"] // ["a", "b", "c"]
-
-function* gen(){
-  yield* ["a", "b", "c"]
-}
-
-gen().next() // { value:"a", done:false }
-
-[a, b, c] = new Set(["a", "b", "c"])
-a // "a"
-
-</pre>
-
-<h2 id="Générateurs">Générateurs</h2>
-
-<p>Les itérateurs personnalisés sont un outil utile mais leur création peut s'avérer complexe et il faut maintenir leur état interne. Avec les générateurs, on peut définir une seule fonction qui est un algorithme itératif et qui peut maintenir son état.</p>
-
-<p>Un générateur est un type de fonction spécial qui fonctionne comme une fabrique (<em>factory</em>) d'itérateurs. Une fonction devient un générateur lorsqu'elle contient une ou plusieurs expressions <code>yield</code> et qu'elle utilise la syntaxe <code>function*</code>.</p>
-
-<pre class="brush: js">function* idMaker(){
-  var index = 0;
-  while(true)
-    yield index++;
-}
-
-var gen = idMaker();
-
-console.log(gen.next().value); // 0
-console.log(gen.next().value); // 1
-console.log(gen.next().value); // 2
-// ...</pre>
-
-<h2 id="Générateurs_avancés">Générateurs avancés</h2>
-
-<p>Les générateurs calculent les valeurs à fournir à la demande, ce qui leur permet de représenter efficacement des suites complexes à calculer, voire des séries infinies (comme vu dans l'exemple précédent).</p>
-
-<p>La méthode <code>next()</code> accepte également un argument qui pourra être utilisé pour modifier l'état interne du générateur. Une valeur passée à <code>next()</code> sera traitée comme le résultat de la dernière expression <code>yield</code> qui a interrompu le générateur. Une valeur passée au premier appel de <code>next()</code> sera toujours ignorée.</p>
-
-<p>Par exemple, on peut avoir un générateur pour la suite de Fibonnaci et utiliser <code>next(x)</code> pour redémarrer la série :</p>
-
-<pre class="brush: js">function* fibonacci(){
-  var fn1 = 0;
-  var fn2 = 1;
-  while (true){
-    var current = fn1;
-    fn1 = fn2;
-    fn2 = fn1 + current;
-    var reset = yield current;
-    if (reset){
-        fn1 = 0;
-        fn2 = 1;
-    }
-  }
-}
-
-var sequence = fibonacci();
-console.log(sequence.next().value);     // 0
-console.log(sequence.next().value);     // 1
-console.log(sequence.next().value);     // 1
-console.log(sequence.next().value);     // 2
-console.log(sequence.next().value);     // 3
-console.log(sequence.next().value);     // 5
-console.log(sequence.next().value);     // 8
-console.log(sequence.next(true).value); // 0
-console.log(sequence.next().value);     // 1
-console.log(sequence.next().value);     // 1
-console.log(sequence.next().value);     // 2</pre>
-
-<p>Il est possible de forcer un générateur à lever une exception en utilisant la méthode <code>throw()</code> en lui passant la valeur de l'exception en argument. Cette exception sera levée depuis l'état actuel du générateur, comme si le <code>yield</code> qui était en attente avait été une instruction <code>throw <em>valeur</em></code>.</p>
-
-<p>Si le mot-clé <code>yield</code> n'est pas trouvé lors de la levée de l'exception, l'exception sera propagée jusqu'à l'appel de <code>throw()</code>, les appels à <code>next()</code> qui suivent renverront une valeur dont la propriété <code>done</code> sera <code>true</code>.</p>
-
-<p>Si l'exception n'est pas interceptée dans le générateur, elle se propagera jusqu'à l'appel de <code>throw()</code> et les appels suivants de <code>next()</code> renverront un objet dont la propriété <code>done </code>vaut <code>true</code>.</p>
-
-<p>Les générateurs possèdent une méthode <code>return(valeur)</code> qui permet de renvoyer une valeur donnée et de terminer le générateur.</p>
-
-<p>{{PreviousNext("Web/JavaScript/Guide/Utiliser_les_promesses", "Web/JavaScript/Guide/Métaprogrammation")}}</p>
diff --git a/files/fr/web/javascript/guide/iterators_and_generators/index.md b/files/fr/web/javascript/guide/iterators_and_generators/index.md
new file mode 100644
index 0000000000..19d2248042
--- /dev/null
+++ b/files/fr/web/javascript/guide/iterators_and_generators/index.md
@@ -0,0 +1,182 @@
+---
+title: Itérateurs et générateurs
+slug: Web/JavaScript/Guide/Iterators_and_Generators
+tags:
+  - Guide
+  - Intermediate
+  - JavaScript
+translation_of: Web/JavaScript/Guide/Iterators_and_Generators
+original_slug: Web/JavaScript/Guide/iterateurs_et_generateurs
+---
+{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Utiliser_les_promesses", "Web/JavaScript/Guide/Métaprogrammation")}}
+
+Effectuer des traitements sur chacun des éléments d'une collection est une opération très fréquente. Il existe plusieurs outils natifs dans JavaScript pour parcourir une collection, les boucles [`for`](/fr/docs/Web/JavaScript/Reference/Instructions/for), [`map()`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/map), [`filter()`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/filter). Les itérateurs et les générateurs font de ce concept d'itération une fonctionnalité principale du langage et permettent d'adapter et de personnaliser le comportement des boucles [`for...of`](/fr/docs/Web/JavaScript/Reference/Instructions/for...of).
+
+Pour plus de détails sur les mécanismes d'itération, voir les pages suivantes :
+
+- [Les protocoles d'itération](/fr/docs/Web/JavaScript/Reference/Les_protocoles_iteration)
+- {{jsxref("Instructions/for...of","for...of")}}
+- {{jsxref("Instructions/function*","function*")}} et {{jsxref("Generator")}}
+- {{jsxref("Opérateurs/yield","yield")}} et {{jsxref("Opérateurs/yield*","yield*")}}
+
+## Itérateurs
+
+Un itérateur est un objet sachant comment accéder aux éléments d'une collection un par un et qui connait leur position dans la collection. En JavaScript, un itérateur expose une méthode `next()` qui retourne l'élément suivant dans la séquence. Cette méthode renvoie un objet possédant deux propriétés : `done` et `value`.
+
+Un itérateur est "terminé" lorsque l'appel à la méthode `next()` renvoie un objet dont la propriété `done` vaut `true`.
+
+Une fois créé, un itérateur peut être utilisé explicitement en appelant sa méthode `next()`, ou implicitement en utilisant la boucle [`for...in`](/fr/docs/Web/JavaScript/Reference/Instructions/for...in).
+
+Voici un exemple d'une fonction créant un itérateur qui parcourt l'intervalle défini par ses arguments (depuis `debut` (inclus) jusqu'à `end` (exclus) et avec `pas` comme incrément. La valeur finale qui est renvoyée correspond à la taille de la séquence créée
+
+```js
+function creerIterateurIntervalle(debut = 0, fin = Infinity, pas = 1) {
+  let prochainIndex = debut;
+  let nbIterations = 0;
+
+  const rangeIterator = {
+    next: function() {
+      let resultat;
+      if (prochainIndex < fin) {
+        resultat = { value: prochainIndex, done: false };
+        prochainIndex += pas;
+        nbIterations++;
+        return resultat;
+      }
+      return { value: nbIterations, done: true }
+    }
+  };
+  return rangeIterator;
+}
+```
+
+On pourra alors utiliser cette fonction et l'itérateur de la façon suivante :
+
+```js
+let it = creerIterateurIntervalle(1, 10, 2);
+
+let resultat = it.next();
+while (!resultat.done) {
+ console.log(resultat.value); // 1 3 5 7 9
+ resultat = it.next();
+}
+
+console.log("La séquence parcourue contenait ", result.value, " éléments.");
+```
+
+## Itérables
+
+Un objet est considéré comme **itérable** s'il définit le comportement qu'il aura lors de l'itération (par exemple les valeurs qui seront utilisées dans une boucle {{jsxref("Instructions/for...of", "for...of")}}). Certains types natifs, tels qu'{{jsxref("Array")}} ou {{jsxref("Map")}}, possède un comportement par défaut pour les itérations, cependant d'autres types comme les Objets, ne possèdent pas ce comportement.
+
+Pour qu'un objet soit **itérable**, un objet doit implémenter la méthode **@@iterator**, cela signifie que l'objet (ou un des objets de la [chaîne de prototypes](/fr/docs/Web/JavaScript/Héritage_et_chaîne_de_prototypes)) doit avoir une propriété avec la clé {{jsxref("Symbol.iterator")}}. Cette fonction doit également, même si ce n'est pas une obligation, renvoyer une nouvel opérateur à chaque appel.
+
+### Itérables personnalisés
+
+Il est possible de définir ses propres itérables de cette façon :
+
+```js
+var monItérable = {};
+monItérable[Symbol.iterator] = function* () {
+    yield 1;
+    yield 2;
+    yield 3;
+};
+[...monItérable] // [1, 2, 3]
+```
+
+### Itérables natifs
+
+{{jsxref("String")}}, {{jsxref("Array")}}, {{jsxref("TypedArray")}}, {{jsxref("Map")}} et {{jsxref("Set")}} sont des itérables natifs car les prototypes de chacun ont tous une méthode {{jsxref("Symbol.iterator")}}.
+
+### Les éléments de syntaxe utilisant des itérables
+
+Certaines instructions ou expressions utilisent des itérables, par exemple les boucles {{jsxref("Instructions/for...of","for...of")}} et {{jsxref("Opérateurs/yield*","yield*")}}.
+
+```js
+for(let value of ["a", "b", "c"]){
+    console.log(value)
+}
+// "a"
+// "b"
+// "c"
+
+[..."abc"] // ["a", "b", "c"]
+
+function* gen(){
+  yield* ["a", "b", "c"]
+}
+
+gen().next() // { value:"a", done:false }
+
+[a, b, c] = new Set(["a", "b", "c"])
+a // "a"
+```
+
+## Générateurs
+
+Les itérateurs personnalisés sont un outil utile mais leur création peut s'avérer complexe et il faut maintenir leur état interne. Avec les générateurs, on peut définir une seule fonction qui est un algorithme itératif et qui peut maintenir son état.
+
+Un générateur est un type de fonction spécial qui fonctionne comme une fabrique (_factory_) d'itérateurs. Une fonction devient un générateur lorsqu'elle contient une ou plusieurs expressions `yield` et qu'elle utilise la syntaxe `function*`.
+
+```js
+function* idMaker(){
+  var index = 0;
+  while(true)
+    yield index++;
+}
+
+var gen = idMaker();
+
+console.log(gen.next().value); // 0
+console.log(gen.next().value); // 1
+console.log(gen.next().value); // 2
+// ...
+```
+
+## Générateurs avancés
+
+Les générateurs calculent les valeurs à fournir à la demande, ce qui leur permet de représenter efficacement des suites complexes à calculer, voire des séries infinies (comme vu dans l'exemple précédent).
+
+La méthode `next()` accepte également un argument qui pourra être utilisé pour modifier l'état interne du générateur. Une valeur passée à `next()` sera traitée comme le résultat de la dernière expression `yield` qui a interrompu le générateur. Une valeur passée au premier appel de `next()` sera toujours ignorée.
+
+Par exemple, on peut avoir un générateur pour la suite de Fibonnaci et utiliser `next(x)` pour redémarrer la série :
+
+```js
+function* fibonacci(){
+  var fn1 = 0;
+  var fn2 = 1;
+  while (true){
+    var current = fn1;
+    fn1 = fn2;
+    fn2 = fn1 + current;
+    var reset = yield current;
+    if (reset){
+        fn1 = 0;
+        fn2 = 1;
+    }
+  }
+}
+
+var sequence = fibonacci();
+console.log(sequence.next().value);     // 0
+console.log(sequence.next().value);     // 1
+console.log(sequence.next().value);     // 1
+console.log(sequence.next().value);     // 2
+console.log(sequence.next().value);     // 3
+console.log(sequence.next().value);     // 5
+console.log(sequence.next().value);     // 8
+console.log(sequence.next(true).value); // 0
+console.log(sequence.next().value);     // 1
+console.log(sequence.next().value);     // 1
+console.log(sequence.next().value);     // 2
+```
+
+Il est possible de forcer un générateur à lever une exception en utilisant la méthode `throw()` en lui passant la valeur de l'exception en argument. Cette exception sera levée depuis l'état actuel du générateur, comme si le `yield` qui était en attente avait été une instruction `throw valeur`.
+
+Si le mot-clé `yield` n'est pas trouvé lors de la levée de l'exception, l'exception sera propagée jusqu'à l'appel de `throw()`, les appels à `next()` qui suivent renverront une valeur dont la propriété `done` sera `true`.
+
+Si l'exception n'est pas interceptée dans le générateur, elle se propagera jusqu'à l'appel de `throw()` et les appels suivants de `next()` renverront un objet dont la propriété `done `vaut `true`.
+
+Les générateurs possèdent une méthode `return(valeur)` qui permet de renvoyer une valeur donnée et de terminer le générateur.
+
+{{PreviousNext("Web/JavaScript/Guide/Utiliser_les_promesses", "Web/JavaScript/Guide/Métaprogrammation")}}
diff --git a/files/fr/web/javascript/guide/keyed_collections/index.html b/files/fr/web/javascript/guide/keyed_collections/index.html
deleted file mode 100644
index 9b93b1cc67..0000000000
--- a/files/fr/web/javascript/guide/keyed_collections/index.html
+++ /dev/null
@@ -1,153 +0,0 @@
----
-title: Collections avec clés
-slug: Web/JavaScript/Guide/Keyed_collections
-tags:
-  - Collections
-  - Guide
-  - JavaScript
-  - Map
-  - set
-translation_of: Web/JavaScript/Guide/Keyed_collections
-original_slug: Web/JavaScript/Guide/Collections_avec_clés
----
-<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Collections_indexées", "Web/JavaScript/Guide/Utiliser_les_objets")}}</div>
-
-<p>Ce chapitre présente les collections de données qui sont ordonnées avec une clé. Les objets <code>Map</code> et <code>Set</code> contiennent des éléments sur lesquels on peut itérer dans leur ordre d'insertion.</p>
-
-<h2 id="Maps">Maps</h2>
-
-<h3 id="Le_type_Map">Le type <code>Map</code></h3>
-
-<p>ECMAScript 2015 introduit une nouvelle structure de données pour faire correspondre des données entre elle. Un objet {{jsxref("Map")}} représente une collection de données qui sont des correspondances entre des clés ou valeurs et pour lequel on peut itérer dans l'ordre d'insertion pour lister les différentes clés / valeurs.</p>
-
-<p>Le code suivant illustre certaines opérations basiques avec <code>Map</code>. Pour plus d'informations sur cet objet, voir également la page de référence {{jsxref("Map")}}. Il est possible d'utiliser une boucle {{jsxref("Instructions/for...of","for...of")}} pour renvoyer un tableau <code>[clé, valeur]</code> à chaque itération.</p>
-
-<pre class="brush: js">var sayings = new Map();
-sayings.set("dog", "woof");
-sayings.set("cat", "meow");
-sayings.set("elephant", "toot");
-sayings.size; // 3
-sayings.get("fox"); // undefined
-sayings.has("bird"); // false
-sayings.delete("dog");
-
-for (var [key, value] of sayings) {
-  console.log(key + " goes " + value);
-}
-// "cat goes meow"
-// "elephant goes toot"
-</pre>
-
-<h3 id="Comparaison_entre_les_types_Object_et_Map">Comparaison entre les types <code>Object</code> et <code>Map</code></h3>
-
-<p>Habituellement, les objets {{jsxref("Object", "objets", "", 1)}} ont été utilisés pour faire correspondre des chaînes avec des valeurs. Les objets permettent d'associer des clés avec des valeurs, de récupérer ces valeurs, de supprimer des clés, de détecter si quelque chose est enregistré dans une clé. Le type <code>Map</code> possède cependant certains avantages pour être utilisés comme <em>maps</em>.</p>
-
-<ul>
- <li>Les clés d'un objet de type <code>Object</code> sont des chaînes de caractères. Pour <code>Map</code>, une clé peut être une valeur de n'importe quel type.</li>
- <li>On peut simplement obtenir la taille d'un objet <code>Map</code> alors qu'il faut tenir compte manuellement du nombre de clés contenue dans un objet <code>Object</code>.</li>
- <li>Les itérations sur les <em>maps</em> se font dans l'ordre d'insertion des éléments.</li>
- <li>Un objet de type <code>Object</code> possède un prototype, il y a donc des clés par défaut déjà présentes dans l'objet. (cela peut être surchargé en utilisant <code>map = Object.create(null)</code>).</li>
-</ul>
-
-<p>Pour savoir si on doit utiliser le type <code>Map</code> ou le type <code>Object</code>, on peut considérer les aspects suivants :</p>
-
-<ul>
- <li>On utilisera des <em>maps</em> plutôt que des objets lorsque les clés sont inconnues avant l'exécution et lorsque toutes les clés sont de même type et que les valeurs sont de même type.</li>
- <li>On utilisera des <em>maps</em> lorsque les clés peuvent être des valeurs primitives autres que des chaînes de caractères (en effet, les objets considèrent toutes leurs clés comme des chaînes en convertissant les valeurs).</li>
- <li>On utilisera des objets lorsqu'il y a une logique propre à des éléments individuels.</li>
-</ul>
-
-<h3 id="Le_type_WeakMap">Le type <code>WeakMap</code></h3>
-
-<p>L'objet {{jsxref("WeakMap")}} est une collection de paires clés/valeurs pour lesquelles <strong>les clés sont uniquement des objets</strong> (les valeurs peuvent être d'un type arbitraire). Les références vers les objets sont des références « faibles ». Cela signifie qu'elles seront collectées par le ramasse-miettes s'il n'y a pas d'autres références vers cet objet. L'API <code>WeakMap</code> offre les mêmes fonctionnalités que l'API <code>Map</code>.</p>
-
-<p>La différence entre le type <code>Map</code> et le type <code>WeakMap</code> est que les clés d'un objet <code>WeakMap</code> ne sont pas énumérables (c'est-à-dire qu'on n'a pas de méthode pour donner la liste des clés). S'il en existait une, la liste dépendrait de l'état d'avancement du ramasse-miettes, ce qui introduirait un non-déterminisme.</p>
-
-<p>Pour plus d'informations et d'exemples, voir également le paragraphe « Pourquoi WeakMap ? » sur l'article {{jsxref("WeakMap")}} de la référence.</p>
-
-<p>Un cas d'utilisation des objets <code>WeakMap</code> est le stockage de données privées d'un objet ou pour cacher certains détails d'implémentation. L'exemple qui suit est tiré du billet de blog de Nick Fitzgerald <a href="http://fitzgeraldnick.com/weblog/53/">« Masquer des détails d'implémentation avec les WeakMaps ECMAScript 6 »</a>. Les données et méthodes privées sont stockées dans l'objet WeakMap <code>privates</code>. Tout ce qui est exposé par l'instance et le prototype est public. Tout ce qui est en dehors est inaccessible car <code>privates</code> n'est pas exporté depuis le module :</p>
-
-<pre class="brush: js">const privates = new WeakMap();
-
-function Public() {
-  const me = {
-    // Les données privées ici
-  };
-  privates.set(this, me);
-}
-
-Public.prototype.method = function () {
-  const me = privates.get(this);
-  // On fait des choses avec les données privées dans `me`...
-};
-
-module.exports = Public;
-</pre>
-
-<h2 id="Les_ensembles">Les ensembles</h2>
-
-<h3 id="Le_type_Set">Le type <code>Set</code></h3>
-
-<p>Les objets {{jsxref("Set")}} sont des ensembles de valeurs. Il est possible de les parcourir dans l'ordre d'insertion des éléments. Une valeur d'un élément <code>Set</code> ne peut y apparaître qu'une seule fois, il est unique pour cette instance de <code>Set</code>.</p>
-
-<p>Le code suivant illustre certaines opérations basiques avec <code>Set</code>. Voir aussi la page {{jsxref("Set")}} pour plus d'exemples et l'API complète.</p>
-
-<pre class="brush: js">var monEnsemble = new Set();
-monEnsemble.add(1);
-monEnsemble.add("du texte");
-monEnsemble.add("toto");
-
-monEnsemble.has(1); // true
-monEnsemble.delete("toto");
-monEnsemble.size; // 2
-
-for (let item of monEnsemble) console.log(item);
-// 1
-// "du texte"
-</pre>
-
-<h3 id="Convertir_des_tableaux_(Array)_en_ensembles_(Set)">Convertir des tableaux (<code>Array</code>) en ensembles (<code>Set</code>)</h3>
-
-<p>Il est possible de créer un {{jsxref("Array")}} à partir d'un <code>Set</code> grâce à {{jsxref("Array.from")}} ou l'<a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateur_de_décomposition">opérateur de décomposition</a>. Pour effectuer la conversion dans l'autre sens, on peut utiliser le constructeur <code>Set</code> avec un argument de type <code>Array</code>. Encore une fois, les objets <code>Set</code> stockent des valeurs uniques, les éléments dupliqués dans un tableau seront supprimés lors de la conversion.</p>
-
-<pre class="brush: js">Array.from(monSet);
-[...monSet2];
-
-monSet2 = new Set([1,2,3,4]);
-</pre>
-
-<h3 id="Comparaison_entre_Array_et_Set">Comparaison entre <code>Array</code> et <code>Set</code></h3>
-
-<p>Historiquement, on représentait des ensembles avec des tableaux JavaScript. Ce nouveau type, <code>Set</code>, possède certains avantages :</p>
-
-<ul>
- <li>Lorsqu'on souhaite vérifier si un élément existe déjà dans un tableau, on est obligé d'utiliser {{jsxref("Array.indexOf", "indexOf")}} ce qui peut diminuer les performances.</li>
- <li>Les objets <code>Set</code> permettent de supprimer les éléments avec leur valeur. Avec un tableau, il faudrait « découper » le tableau sur l'indice de l'élément.</li>
- <li>Dans un tableau, la valeur {{jsxref("NaN")}} ne peut pas être trouvée avec la méthode <code>indexOf</code>.</li>
- <li>Les objets <code>Set</code> permettent de stocker des valeurs uniques, il n'est pas nécessaire d'effectuer des vérifications manuellement.</li>
-</ul>
-
-<h3 id="Le_type_WeakSet">Le type <code>WeakSet</code></h3>
-
-<p>Les objets {{jsxref("WeakSet")}} sont des ensembles d'objets. Un objet d'un <code>WeakSet</code> ne peut y apparaître qu'une seule fois maximum. On ne peut pas itérer sur les objets <code>WeakSet</code> (ils ne sont pas énumérables).</p>
-
-<p>Les principales différences avec l'objet {{jsxref("Set")}} sont :</p>
-
-<ul>
- <li>Contrairement aux objets <code>Set</code>, les objets <code>WeakSet</code> sont des ensembles qui ne comprennent <strong>que des objets</strong>, les valeurs ne peuvent pas être d'un type arbitraire.</li>
- <li>Les objets <code>WeakSet</code> utilisent des références faibles vers les objets. Ainsi, s'il n'y a pas d'autres références vers l'objet stocké dans le <code>WeakSet</code>, celui-ci pourra être collecté par le ramasse-miettes pour libérer de la mémoire. Cela signifie également qu'on ne peut pas maintenir une liste des différents objets contenus dans l'ensemble : les objets <code>WeakSet</code> ne sont pas énumérables.</li>
-</ul>
-
-<p>Les cas d'utilisations pour les objets <code>WeakSet</code> objects sont relativement limités. Ils empêcheront toute fuite mémoire donc on pourra, de façon sécurisée, les utiliser avec des éléments DOM qui pourront être des clés (pour les utiliser par ailleurs, etc.).</p>
-
-<h2 id="Égalité_des_clés_et_des_valeurs_avec_Map_et_Set">Égalité des clés et des valeurs avec <code>Map</code> et <code>Set</code></h2>
-
-<p>L'égalité utilisée pour les clés des objets <code>Map</code> et celle utilisée pour les valeurs des objets <code>Set</code> sont les mêmes : elles sont basées sur <a href="https://tc39.github.io/ecma262/#sec-samevaluezero">l'algorithme suivant</a> :</p>
-
-<ul>
- <li>L'égalité fonctionne de la même façon qu'avec l'opérateur d'égalité stricte <code>===</code>.</li>
- <li><code>-0</code> et <code>+0</code> sont considérés égaux.</li>
- <li>{{jsxref("NaN")}} est considéré égal à lui-même (contrairement à ce qu'on obtient avec <code>===</code>).</li>
-</ul>
-
-<p>{{PreviousNext("Web/JavaScript/Guide/Collections_indexées", "Web/JavaScript/Guide/Utiliser_les_objets")}}</p>
diff --git a/files/fr/web/javascript/guide/keyed_collections/index.md b/files/fr/web/javascript/guide/keyed_collections/index.md
new file mode 100644
index 0000000000..bef70f4b38
--- /dev/null
+++ b/files/fr/web/javascript/guide/keyed_collections/index.md
@@ -0,0 +1,147 @@
+---
+title: Collections avec clés
+slug: Web/JavaScript/Guide/Keyed_collections
+tags:
+  - Collections
+  - Guide
+  - JavaScript
+  - Map
+  - set
+translation_of: Web/JavaScript/Guide/Keyed_collections
+original_slug: Web/JavaScript/Guide/Collections_avec_clés
+---
+{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Collections_indexées", "Web/JavaScript/Guide/Utiliser_les_objets")}}
+
+Ce chapitre présente les collections de données qui sont ordonnées avec une clé. Les objets `Map` et `Set` contiennent des éléments sur lesquels on peut itérer dans leur ordre d'insertion.
+
+## Maps
+
+### Le type `Map`
+
+ECMAScript 2015 introduit une nouvelle structure de données pour faire correspondre des données entre elle. Un objet {{jsxref("Map")}} représente une collection de données qui sont des correspondances entre des clés ou valeurs et pour lequel on peut itérer dans l'ordre d'insertion pour lister les différentes clés / valeurs.
+
+Le code suivant illustre certaines opérations basiques avec `Map`. Pour plus d'informations sur cet objet, voir également la page de référence {{jsxref("Map")}}. Il est possible d'utiliser une boucle {{jsxref("Instructions/for...of","for...of")}} pour renvoyer un tableau `[clé, valeur]` à chaque itération.
+
+```js
+var sayings = new Map();
+sayings.set("dog", "woof");
+sayings.set("cat", "meow");
+sayings.set("elephant", "toot");
+sayings.size; // 3
+sayings.get("fox"); // undefined
+sayings.has("bird"); // false
+sayings.delete("dog");
+
+for (var [key, value] of sayings) {
+  console.log(key + " goes " + value);
+}
+// "cat goes meow"
+// "elephant goes toot"
+```
+
+### Comparaison entre les types `Object` et `Map`
+
+Habituellement, les objets {{jsxref("Object", "objets", "", 1)}} ont été utilisés pour faire correspondre des chaînes avec des valeurs. Les objets permettent d'associer des clés avec des valeurs, de récupérer ces valeurs, de supprimer des clés, de détecter si quelque chose est enregistré dans une clé. Le type `Map` possède cependant certains avantages pour être utilisés comme _maps_.
+
+- Les clés d'un objet de type `Object` sont des chaînes de caractères. Pour `Map`, une clé peut être une valeur de n'importe quel type.
+- On peut simplement obtenir la taille d'un objet `Map` alors qu'il faut tenir compte manuellement du nombre de clés contenue dans un objet `Object`.
+- Les itérations sur les _maps_ se font dans l'ordre d'insertion des éléments.
+- Un objet de type `Object` possède un prototype, il y a donc des clés par défaut déjà présentes dans l'objet. (cela peut être surchargé en utilisant `map = Object.create(null)`).
+
+Pour savoir si on doit utiliser le type `Map` ou le type `Object`, on peut considérer les aspects suivants :
+
+- On utilisera des _maps_ plutôt que des objets lorsque les clés sont inconnues avant l'exécution et lorsque toutes les clés sont de même type et que les valeurs sont de même type.
+- On utilisera des _maps_ lorsque les clés peuvent être des valeurs primitives autres que des chaînes de caractères (en effet, les objets considèrent toutes leurs clés comme des chaînes en convertissant les valeurs).
+- On utilisera des objets lorsqu'il y a une logique propre à des éléments individuels.
+
+### Le type `WeakMap`
+
+L'objet {{jsxref("WeakMap")}} est une collection de paires clés/valeurs pour lesquelles **les clés sont uniquement des objets** (les valeurs peuvent être d'un type arbitraire). Les références vers les objets sont des références « faibles ». Cela signifie qu'elles seront collectées par le ramasse-miettes s'il n'y a pas d'autres références vers cet objet. L'API `WeakMap` offre les mêmes fonctionnalités que l'API `Map`.
+
+La différence entre le type `Map` et le type `WeakMap` est que les clés d'un objet `WeakMap` ne sont pas énumérables (c'est-à-dire qu'on n'a pas de méthode pour donner la liste des clés). S'il en existait une, la liste dépendrait de l'état d'avancement du ramasse-miettes, ce qui introduirait un non-déterminisme.
+
+Pour plus d'informations et d'exemples, voir également le paragraphe « Pourquoi WeakMap ? » sur l'article {{jsxref("WeakMap")}} de la référence.
+
+Un cas d'utilisation des objets `WeakMap` est le stockage de données privées d'un objet ou pour cacher certains détails d'implémentation. L'exemple qui suit est tiré du billet de blog de Nick Fitzgerald [« Masquer des détails d'implémentation avec les WeakMaps ECMAScript 6 »](http://fitzgeraldnick.com/weblog/53/). Les données et méthodes privées sont stockées dans l'objet WeakMap `privates`. Tout ce qui est exposé par l'instance et le prototype est public. Tout ce qui est en dehors est inaccessible car `privates` n'est pas exporté depuis le module :
+
+```js
+const privates = new WeakMap();
+
+function Public() {
+  const me = {
+    // Les données privées ici
+  };
+  privates.set(this, me);
+}
+
+Public.prototype.method = function () {
+  const me = privates.get(this);
+  // On fait des choses avec les données privées dans `me`...
+};
+
+module.exports = Public;
+```
+
+## Les ensembles
+
+### Le type `Set`
+
+Les objets {{jsxref("Set")}} sont des ensembles de valeurs. Il est possible de les parcourir dans l'ordre d'insertion des éléments. Une valeur d'un élément `Set` ne peut y apparaître qu'une seule fois, il est unique pour cette instance de `Set`.
+
+Le code suivant illustre certaines opérations basiques avec `Set`. Voir aussi la page {{jsxref("Set")}} pour plus d'exemples et l'API complète.
+
+```js
+var monEnsemble = new Set();
+monEnsemble.add(1);
+monEnsemble.add("du texte");
+monEnsemble.add("toto");
+
+monEnsemble.has(1); // true
+monEnsemble.delete("toto");
+monEnsemble.size; // 2
+
+for (let item of monEnsemble) console.log(item);
+// 1
+// "du texte"
+```
+
+### Convertir des tableaux (`Array`) en ensembles (`Set`)
+
+Il est possible de créer un {{jsxref("Array")}} à partir d'un `Set` grâce à {{jsxref("Array.from")}} ou l'[opérateur de décomposition](/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateur_de_décomposition). Pour effectuer la conversion dans l'autre sens, on peut utiliser le constructeur `Set` avec un argument de type `Array`. Encore une fois, les objets `Set` stockent des valeurs uniques, les éléments dupliqués dans un tableau seront supprimés lors de la conversion.
+
+```js
+Array.from(monSet);
+[...monSet2];
+
+monSet2 = new Set([1,2,3,4]);
+```
+
+### Comparaison entre `Array` et `Set`
+
+Historiquement, on représentait des ensembles avec des tableaux JavaScript. Ce nouveau type, `Set`, possède certains avantages :
+
+- Lorsqu'on souhaite vérifier si un élément existe déjà dans un tableau, on est obligé d'utiliser {{jsxref("Array.indexOf", "indexOf")}} ce qui peut diminuer les performances.
+- Les objets `Set` permettent de supprimer les éléments avec leur valeur. Avec un tableau, il faudrait « découper » le tableau sur l'indice de l'élément.
+- Dans un tableau, la valeur {{jsxref("NaN")}} ne peut pas être trouvée avec la méthode `indexOf`.
+- Les objets `Set` permettent de stocker des valeurs uniques, il n'est pas nécessaire d'effectuer des vérifications manuellement.
+
+### Le type `WeakSet`
+
+Les objets {{jsxref("WeakSet")}} sont des ensembles d'objets. Un objet d'un `WeakSet` ne peut y apparaître qu'une seule fois maximum. On ne peut pas itérer sur les objets `WeakSet` (ils ne sont pas énumérables).
+
+Les principales différences avec l'objet {{jsxref("Set")}} sont :
+
+- Contrairement aux objets `Set`, les objets `WeakSet` sont des ensembles qui ne comprennent **que des objets**, les valeurs ne peuvent pas être d'un type arbitraire.
+- Les objets `WeakSet` utilisent des références faibles vers les objets. Ainsi, s'il n'y a pas d'autres références vers l'objet stocké dans le `WeakSet`, celui-ci pourra être collecté par le ramasse-miettes pour libérer de la mémoire. Cela signifie également qu'on ne peut pas maintenir une liste des différents objets contenus dans l'ensemble : les objets `WeakSet` ne sont pas énumérables.
+
+Les cas d'utilisations pour les objets `WeakSet` objects sont relativement limités. Ils empêcheront toute fuite mémoire donc on pourra, de façon sécurisée, les utiliser avec des éléments DOM qui pourront être des clés (pour les utiliser par ailleurs, etc.).
+
+## Égalité des clés et des valeurs avec `Map` et `Set`
+
+L'égalité utilisée pour les clés des objets `Map` et celle utilisée pour les valeurs des objets `Set` sont les mêmes : elles sont basées sur [l'algorithme suivant](https://tc39.github.io/ecma262/#sec-samevaluezero) :
+
+- L'égalité fonctionne de la même façon qu'avec l'opérateur d'égalité stricte `===`.
+- `-0` et `+0` sont considérés égaux.
+- {{jsxref("NaN")}} est considéré égal à lui-même (contrairement à ce qu'on obtient avec `===`).
+
+{{PreviousNext("Web/JavaScript/Guide/Collections_indexées", "Web/JavaScript/Guide/Utiliser_les_objets")}}
diff --git a/files/fr/web/javascript/guide/loops_and_iteration/index.html b/files/fr/web/javascript/guide/loops_and_iteration/index.html
deleted file mode 100644
index b3a7c80e31..0000000000
--- a/files/fr/web/javascript/guide/loops_and_iteration/index.html
+++ /dev/null
@@ -1,350 +0,0 @@
----
-title: Boucles et itérations
-slug: Web/JavaScript/Guide/Loops_and_iteration
-tags:
-  - Guide
-  - JavaScript
-  - Syntax
-translation_of: Web/JavaScript/Guide/Loops_and_iteration
-original_slug: Web/JavaScript/Guide/Boucles_et_itération
----
-<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Contr%C3%B4le_du_flux_Gestion_des_erreurs", "Web/JavaScript/Guide/Fonctions")}}</div>
-
-<p>Les boucles permettent de répéter des actions simplement et rapidement. Ce chapitre du<a href="/fr/docs/Web/JavaScript/Guide"> guide JavaScript</a> présente les différentes instructions qu'il est possible d'utiliser en JavaScript pour effectuer des itérations.</p>
-
-<p>Les boucles permettent de répéter des actions simplement et rapidement. Une boucle peut être vue comme une version informatique de « copier N lignes » ou de « faire X fois quelque chose ». Par exemple, en JavaScript, on pourrait traduire « Faire 5 pas vers l'est » avec cette boucle :</p>
-
-<pre class="brush: js">for (let pas = 0; pas &lt; 5; pas++) {
-  // Ceci sera exécuté 5 fois
-  // À chaque éxécution, la variable "pas" augmentera de 1
-  // Lorsque'elle sera arrivée à 5, le boucle se terminera.
-  console.log('Faire ' + pas + ' pas vers l\'est');
-}
-</pre>
-
-<p>Il y a différents types de boucles mais elles se ressemblent toutes au sens où elles répètent une action un certain nombre de fois (ce nombre peut éventuellement être zéro). Les différents types de boucles permettent d'utiliser différentes façon de commencer et de terminer une boucle. Chaque type de boucle pourra être utilisé en fonction de la situation et du problème que l'on cherche à résoudre.</p>
-
-<p>Voici les différentes boucles fournies par JavaScript :</p>
-
-<ul>
- <li>{{anch("Linstruction for")}}</li>
- <li>{{anch("Linstruction do...while")}}</li>
- <li>{{anch("Linstruction while")}}</li>
- <li>{{anch("Linstruction label")}}</li>
- <li>{{anch("Linstruction break")}}</li>
- <li>{{anch("Linstruction continue")}}</li>
- <li>{{anch("Linstruction for...in")}}</li>
- <li>{{anch("Linstruction for...of")}}</li>
-</ul>
-
-<h2 id="Linstruction_for">L'instruction for</h2>
-
-<p>Une boucle {{jsxref("statements/for", "for")}} répète des instructions jusqu'à ce qu'une condition donnée ne soit plus vérifiée. La boucle <code>for</code> JavaScript ressemble beaucoup à celle utilisée en C ou en Java. Une boucle <code>for</code> s'utilise de la façon suivante :</p>
-
-<pre class="syntaxbox">for ([expressionInitiale]; [condition]; [expressionIncrément])
-  instruction
-</pre>
-
-<p>Voici ce qui se passe quand une boucle <code>for</code> s'exécute :</p>
-
-<ol>
- <li>L'expression initiale <code>expressionInitiale</code> est exécutée si elle est présente. Généralement, on utilise cette expression pour initialiser un ou plusieurs compteurs dont on se servira dans la boucle. Il est possible d'utiliser des expressions plus complexes si besoin. Elle peut servir à déclarer des variables.</li>
- <li>L'expression <code>condition</code> est évaluée, si elle vaut <code>true</code>, les instructions contenues dans la boucle sont exécutées. Si la valeur de <code>condition</code> est <code>false</code>, la boucle <code>for</code> se termine. Si la condition est absente, elle est considérée comme <code>true</code>.</li>
- <li>L'instruction <code>instruction</code> est exécutée. Si l'on souhaite exécuter plusieurs instructions, on utilisera un bloc d'instructions (<code>{ ... }</code>) afin de les grouper.</li>
- <li>Si elle est présente, l'expression de mise à jour<code> expressionIncrément</code> est exécutée.</li>
- <li>On retourne ensuite à l'étape 2.</li>
-</ol>
-
-<h3 id="Exemple"><strong>Exemple</strong></h3>
-
-<p>La fonction suivante contient une instruction <code>for</code> qui compte le nombre d'options sélectionnées dans une liste déroulante (ici, un objet {{HTMLElement("select")}} permettant une sélection multiple). L'instruction <code>for</code> déclare une variable <code>i</code> et l'initialise à zéro. Elle vérifie que <code>i</code> est bien inférieur au nombre d'options et, pour chaque option, effectue un test conditionnel pour savoir si l'option est sélectionnée puis passe à l'option suivante en incrémentant la variable <code>i</code> pour chaque itération.</p>
-
-<pre class="brush: html">&lt;form name="selectForm"&gt;
-  &lt;p&gt;
-    &lt;label for="typesMusique"&gt;Veuillez choisir des genres musicaux, puis cliquez :&lt;/label&gt;
-    &lt;select id="typesMusique" name="typesMusique" multiple="multiple"&gt;
-      &lt;option selected="selected"&gt;R&amp;B&lt;/option&gt;
-      &lt;option&gt;Jazz&lt;/option&gt;
-      &lt;option&gt;Blues&lt;/option&gt;
-      &lt;option&gt;New Age&lt;/option&gt;
-      &lt;option&gt;Classique&lt;/option&gt;
-      &lt;option&gt;Opera&lt;/option&gt;
-    &lt;/select&gt;
-  &lt;/p&gt;
-  &lt;p&gt;&lt;button id="btn" type="button"&gt;Combien sont sélectionnés ?&lt;/button&gt;&lt;/p&gt;
-&lt;/form&gt;
-
-&lt;script&gt;
-function quantité(selectObject) {
-  let qtéSélectionnée = 0;
-  for (let i = 0; i &lt; selectObject.options.length; i++) {
-    if (selectObject.options[i].selected) {
-      qtéSélectionnée++;
-    }
-  }
-  return qtéSélectionnée;
-}
-
-let btn = document.getElementById("btn");
-btn.addEventListener("click", function(){
-  alert('Nombre d\'options choisies : ' + quantité(document.selectForm.typesMusique))
-});
-&lt;/script&gt;
-
-</pre>
-
-<h2 id="Linstruction_do...while">L'instruction <code>do...while</code></h2>
-
-<p>L'instruction {{jsxref("statements/do...while", "do...while")}} permet de répéter un ensemble d'instructions jusqu'à ce qu'une condition donnée ne soit plus vérifiée. (<em>NdT</em> : littéralement « do...while » signifie « faire... tant que »). Une instruction <code>do...while</code> s'utilise de la façon suivante :</p>
-
-<pre class="syntaxbox">do
-  instruction
-while (condition);
-</pre>
-
-<p><code>instruction</code> est exécutée au moins une fois avant que la condition soit vérifiée. Pour utiliser plusieurs instructions à cet endroit, on utilisera une instruction de bloc (<code>{ ... }</code>) pour regrouper différentes instructions. Si la <code>condition</code> est vérifiée, l'instruction est à nouveau exécutée. À la fin de chaque exécution, la condition est vérifiée. Quand la condition n'est plus vérifiée (vaut <code>false</code> ou une valeur équivalente), l'exécution de l'instruction<code> do...while</code> est stoppée et le contrôle passe à l'instruction suivante.</p>
-
-<h3 id="Exemple_2">Exemple</h3>
-
-<p>Dans l'exemple qui suit, la boucle <code>do</code> est exécutée au moins une fois et répétée jusqu'à ce que <code>i</code> ne soit plus inférieur à 5.</p>
-
-<pre class="brush: js">let i = 0;
-do {
-  i += 1;
-  console.log(i);
-} while (i &lt; 5);</pre>
-
-<h2 id="Linstruction_while">L'instruction <code>while</code></h2>
-
-<p>Une instruction {{jsxref("statements/while", "while")}} permet d'exécuter une instruction tant qu'une condition donnée est vérifiée. Cette instruction <code>while</code> s'utilise de la façon suivante :</p>
-
-<pre class="syntaxbox">while (condition)
-  instruction
-</pre>
-
-<p>Si la condition n'est pas vérifiée, l'instruction<code> instruction</code> n'est pas exécutée et le contrôle passe directement à l'instruction suivant la boucle.</p>
-
-<p>Le test de la condition s'effectue avant d'exécuter <code>instruction</code>. Si la condition renvoie <code>true</code> (ou une valeur équivalente), <code>instruction</code> sera exécutée et la condition sera testée à nouveau. Si la condition renvoie <code>false</code> (ou une valeur équivalente), l'exécution s'arrête et le contrôle est passé à l'instruction qui suit <code>while</code>.</p>
-
-<p>Pour pouvoir utiliser plusieurs instructions dans la boucle, on utilisera une instruction de bloc (<code>{ ... }</code>) afin de les regrouper.</p>
-
-<h3 id="Exemple_1">Exemple 1</h3>
-
-<p>La boucle <code>while</code> qui suit permet d'effectuer des itérations tant que <code>n</code> est inférieur à 3 :</p>
-
-<pre class="brush: js">let n = 0;
-let x = 0;
-while (n &lt; 3) {
-  n++;
-  x += n;
-}
-</pre>
-
-<p>À chaque itération, la boucle incrémente <code>n</code> et ajoute la valeur de <code>n</code> à <code>x</code>. <code>x</code> et <code>n</code> prendront ainsi les valeurs suivantes :</p>
-
-<ul>
- <li>Après la première itération : <code>n</code> = 1 et <code>x</code> = 1</li>
- <li>Après la deuxième itération : <code>n</code> = 2 et <code>x</code> = 3</li>
- <li>Après la troisième itération : <code>n</code> = 3 et <code>x</code> = 6</li>
-</ul>
-
-<p>Une fois la troisième itération effectuée, la condition <code>n &lt; 3</code> n'est plus vérifiée, par conséquent, la boucle se termine.</p>
-
-<h3 id="Exemple_2_2">Exemple 2</h3>
-
-<p>Attention à éviter les boucles infinies. Il faut bien s'assurer que la condition utilisée dans la boucle ne soit plus vérifiée à un moment donné. Si la condition est toujours vérifiée, la boucle se répétera sans jamais s'arrêter. Dans l'exemple qui suit, les instructions contenues dans la boucle <code>while</code> s'exécutent sans discontinuer car la condition est toujours vérifiée :</p>
-
-<pre class="brush: js">while (true) {
-  console.log("Coucou monde !");
-}</pre>
-
-<h2 id="Linstruction_label">L'instruction <code>label</code></h2>
-
-<p>Un {{jsxref("statements/label","label")}} (ou étiquette) permet de fournir un identifiant pour une instruction afin d'y faire référence depuis un autre endroit dans le programme. On peut ainsi identifier une boucle grâce à un label puis utiliser les instructions <code>break</code> ou <code>continue</code> pour indiquer si le programme doit interrompre ou poursuivre l'exécution de cette boucle.</p>
-
-<p>On utilise un label de la façon suivante :</p>
-
-<pre class="syntaxbox">label:
-  instruction
-</pre>
-
-<p>La valeur de <code><em>label</em></code> peut être n'importe quel identifiant JavaScript valide (et ne doit pas être un mot réservé pour le langage). L'<code><em>instruction</em></code> peut être n'importe quelle instruction JavaScript valide (y compris un bloc).</p>
-
-<h3 id="Exemple_3">Exemple</h3>
-
-<p>Dans cet exemple, on utilise un label <code>memoBoucle</code> pour identifier une boucle <code>while</code>.</p>
-
-<pre class="brush: js">memoBoucle:
-while (memo == true) {
-  faireQQC();
-}</pre>
-
-<div class="note">
-<p><strong>Note :</strong> Pour plus de détails sur cette instruction, voir la page de la référence JavaScript pour <a href="/fr/docs/Web/JavaScript/Reference/Instructions/label"><code>label</code></a>.</p>
-</div>
-
-<h2 id="Linstruction_break">L'instruction <code>break</code></h2>
-
-<p>L'instruction {{jsxref("statements/break","break")}} est utilisée pour finir l'exécution d'une boucle, d'une instruction <code>switch</code>, ou avec un label.</p>
-
-<ul>
- <li>Lorsque <code>break</code> est utilisé sans label, il provoque la fin de l'instruction <code>while</code>, <code>do-while</code>, <code>for</code>, ou <code>switch</code> dans laquelle il est inscrit (on finit l'instruction la plus imbriquée), le contrôle est ensuite passé à l'instruction suivante.</li>
- <li>Lorsque <code>break</code> est utilisé avec un label, il provoque la fin de l'instruction correspondante.</li>
-</ul>
-
-<p>La syntaxe de cette instruction possède donc deux formes :</p>
-
-<ol>
- <li><code>break;</code></li>
- <li><code>break <em>label</em>;</code></li>
-</ol>
-
-<p>La première forme permet d'interrompre la boucle la plus imbriquée (ou le <code>switch</code>) dans laquelle on se trouve. La seconde forme interrompt l'exécution d'une instruction identifiée par un label.</p>
-
-<h3 id="Exemple_1_2">Exemple <strong>1</strong></h3>
-
-<p>Dans l'exemple qui suit, on itère sur un tableau grâce à une boucle jusqu'à trouver un élément dont la valeur est <code>valeurTest </code>:</p>
-
-<pre class="brush: js">for (i = 0; i &lt; a.length; i++) {
-  if (a[i] === valeurTest) {
-    break;
-  }
-}</pre>
-
-<h3 id="Exemple_2_3">Exemple 2</h3>
-
-<p>Ici, on utilise <code>break</code> des deux façons : avec une instruction représentée par un label et sans.</p>
-
-<pre class="brush: js">let x = 0;
-let z = 0;
-labelAnnuleBoucle: while (true) {
-  console.log("Boucle externe : " + x);
-  x += 1;
-  z = 1;
-  while (true) {
-    console.log("Boucle interne : " + z);
-    z += 1;
-    if (z === 10 &amp;&amp; x === 10) {
-      break labelAnnuleBoucle;
-    } else if (z === 10) {
-      break;
-    }
-  }
-}
-</pre>
-
-<h2 id="Linstruction_continue">L'instruction <code>continue</code></h2>
-
-<p>L'instruction {{jsxref("statements/continue","continue")}} permet de reprendre une boucle <code>while</code>, <code>do-while</code>, <code>for</code>, ou une instruction <code>label</code>.</p>
-
-<ul>
- <li>Lorsque <code>continue</code> est utilisé sans label, l'itération courante de la boucle (celle la plus imbriquée) est terminée et la boucle passe à l'exécution de la prochaine itération. À la différence de l'instruction <code>break</code>, <code>continue</code> ne stoppe pas entièrement l'exécution de la boucle. Si elle est utilisée dans une boucle <code>while</code>, l'itération reprend au niveau de la condition d'arrêt. Dans une boucle <code>for</code>, l'itération reprend au niveau de l'expression d'incrément pour la boucle.</li>
- <li>Lorsque <code>continue</code> est utilisé avec un label, il est appliqué à l'instruction de boucle correspondante.</li>
-</ul>
-
-<p>L'instruction <code>continue</code> s'utilise donc de la façon suivante :</p>
-
-<ol>
- <li><code>continue;</code></li>
- <li><code>continue </code><em><code>label;</code></em></li>
-</ol>
-
-<h3 id="Exemple_1_3">Exemple 1</h3>
-
-<p>Dans l'exemple qui suit, on utilise une boucle <code>while</code> avec une instruction <code>continue</code> qui est exécutée lorsque <code>i</code> vaut 3. Ici, <code>n</code> prendra donc les valeurs 1, 3, 7 et 12.</p>
-
-<pre class="brush: js">let i = 0;
-let n = 0;
-while (i &lt; 5) {
-  i++;
-  if (i === 3) {
-    continue;
-  }
-  n += i;
-  console.log(n);
-}
-// 1, 3, 7, 12
-
-</pre>
-
-<h3 id="Exemple_2_4">Exemple 2</h3>
-
-<p>Dans l'exemple suivant, on a une instruction étiquetée <code>vérifIetJ</code> qui contient une autre instruction étiquetée <code>vérifJ</code>. Si l'instruction <code>continue</code> est utilisée, le programme reprend l'exécution au début de l'instruction <code>vérifJ</code>. Chaque fois que <code>continue</code> est utilisé, <code>vérifJ</code> réitère jusqu'à ce que sa condition renvoie <code>false</code>. Lorsque c'est le cas, le reste de l'instruction <code>vérifIetJ</code> est exécuté.</p>
-
-<p>Si <code>continue</code> utilisait l'étiquette <code>vérifIetJ</code>, le programme continuerait au début de l'instruction <code>vérifIetJ</code></p>
-
-<pre class="brush: js">let i = 0;
-let j = 8;
-
-vérifIetJ: while (i &lt; 4) {
-  console.log("i : " + i);
-  i += 1;
-
-  vérifJ: while (j &gt; 4) {
-    console.log("j : "+ j);
-    j -= 1;
-    if ((j % 2) === 0){
-      continue vérifJ;
-    }
-    console.log(j + " est impaire.");
-   }
-   console.log("i = " + i);
-   console.log("j = " + j);
-}</pre>
-
-<h2 id="Linstruction_for...in">L'instruction <code>for...in</code></h2>
-
-<p>L'instruction {{jsxref("statements/for...in","for...in")}} permet d'itérer sur l'ensemble des propriétés énumérables d'un objet. Pour chaque propriété, JavaScript exécutera l'instruction indiquée. Cette instruction s'utilise de la façon suivante :</p>
-
-<pre class="syntaxbox">for (variable in objet) {
-  instruction
-}
-</pre>
-
-<h3 id="Exemple_4">Exemple</h3>
-
-<p>La fonction suivante prend comme argument un objet et le nom de cet objet. Elle parcourt ensuite les propriétés de l'objet et renvoie une chaîne de caractères qui liste les propriétés avec leurs noms et leurs valeurs respectives :</p>
-
-<pre class="brush: js">function afficherProps(obj, nomObj) {
-  var result = "";
-  for (var i in obj) {
-    result += nomObj + "." + i + " = " + obj[i] + "\n";
-  }
-  result += "\n";
-  return result;
-}
-</pre>
-
-<p>Pour un objet <code>voiture</code> dont les propriétés sont <code>fabricant</code> et <code>modèle</code>, <code>result</code> serait :</p>
-
-<pre class="brush: js">voiture.fabricant = Ford
-voiture.modèle = Mustang
-</pre>
-
-<h3 id="Les_tableaux_arrays_et_for...in">Les tableaux (arrays) et <code>for...in</code></h3>
-
-<p>Bien qu'il soit tentant d'utiliser cette instruction pour parcourir les éléments d'un objet <code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array">Array</a></code> , cela peut avoir des comportements inattendus. En effet, <code>for...in</code> permet de parcourir les propriétés définies par l'utilisateur ainsi que les éléments de tableau. Ainsi, si l'on modifie un objet <code>Array</code> en lui ajoutant des propriétés et/ou des méthodes, la boucle <code>for...in</code> renverra le nom de ces nouvelles propriétés en plus des indices des éléments du tableau. C'est pourquoi, il est préférable d'utiliser une boucle <code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/for">for</a></code> avec les indices du tableau pour parcourir ses éléments.</p>
-
-<h2 id="Linstruction_for...of">L'instruction <code>for...of</code></h2>
-
-<p>L'instruction {{jsxref("statements/for...of","for...of")}} crée une boucle qui fonctionne avec <a href="/fr/docs/Web/JavaScript/Reference/Les_protocoles_iteration">les objets itérables</a> (qui incluent {{jsxref("Array")}}, {{jsxref("Map")}}, {{jsxref("Set")}}, l'objet <code><a href="/fr/docs/Web/JavaScript/Reference/Fonctions/arguments">arguments</a></code>, etc.). La boucle appelle un mécanisme d'itération propre à l'objet utilisé et elle parcourt l'objet et les valeurs de ses différentes propriétés.</p>
-
-<pre class="syntaxbox">for (<em>variable</em> of <em>objet</em>) {
-  <em>instruction
-</em>}</pre>
-
-<p>Dans l'exemple suivant, on illustre la différence entre une boucle <code>for...of</code> et une boucle <code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/for...in">for...in</a></code>.  <code>for...in</code> parcourt les noms des propriétés d'un objet alors que <code>for...of</code> parcourt les <strong>valeurs</strong> des propriétés :</p>
-
-<pre class="brush:js">let arr = [3, 5, 7];
-arr.toto = "coucou";
-
-for (let i in arr) {
-  console.log(i); // affiche 0, 1, 2, "toto" dans la console
-}
-
-for (let i of arr) {
-  console.log(i); // affiche 3, 5, 7 dans la console
-}
-</pre>
-
-<p>{{PreviousNext("Web/JavaScript/Guide/Contr%C3%B4le_du_flux_Gestion_des_erreurs", "Web/JavaScript/Guide/Fonctions")}}</p>
diff --git a/files/fr/web/javascript/guide/loops_and_iteration/index.md b/files/fr/web/javascript/guide/loops_and_iteration/index.md
new file mode 100644
index 0000000000..c7b999b8b4
--- /dev/null
+++ b/files/fr/web/javascript/guide/loops_and_iteration/index.md
@@ -0,0 +1,345 @@
+---
+title: Boucles et itérations
+slug: Web/JavaScript/Guide/Loops_and_iteration
+tags:
+  - Guide
+  - JavaScript
+  - Syntax
+translation_of: Web/JavaScript/Guide/Loops_and_iteration
+original_slug: Web/JavaScript/Guide/Boucles_et_itération
+---
+{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Contr%C3%B4le_du_flux_Gestion_des_erreurs", "Web/JavaScript/Guide/Fonctions")}}
+
+Les boucles permettent de répéter des actions simplement et rapidement. Ce chapitre du[ guide JavaScript](/fr/docs/Web/JavaScript/Guide) présente les différentes instructions qu'il est possible d'utiliser en JavaScript pour effectuer des itérations.
+
+Les boucles permettent de répéter des actions simplement et rapidement. Une boucle peut être vue comme une version informatique de « copier N lignes » ou de « faire X fois quelque chose ». Par exemple, en JavaScript, on pourrait traduire « Faire 5 pas vers l'est » avec cette boucle :
+
+```js
+for (let pas = 0; pas < 5; pas++) {
+  // Ceci sera exécuté 5 fois
+  // À chaque éxécution, la variable "pas" augmentera de 1
+  // Lorsque'elle sera arrivée à 5, le boucle se terminera.
+  console.log('Faire ' + pas + ' pas vers l\'est');
+}
+```
+
+Il y a différents types de boucles mais elles se ressemblent toutes au sens où elles répètent une action un certain nombre de fois (ce nombre peut éventuellement être zéro). Les différents types de boucles permettent d'utiliser différentes façon de commencer et de terminer une boucle. Chaque type de boucle pourra être utilisé en fonction de la situation et du problème que l'on cherche à résoudre.
+
+Voici les différentes boucles fournies par JavaScript :
+
+- {{anch("Linstruction for")}}
+- {{anch("Linstruction do...while")}}
+- {{anch("Linstruction while")}}
+- {{anch("Linstruction label")}}
+- {{anch("Linstruction break")}}
+- {{anch("Linstruction continue")}}
+- {{anch("Linstruction for...in")}}
+- {{anch("Linstruction for...of")}}
+
+## L'instruction for
+
+Une boucle {{jsxref("statements/for", "for")}} répète des instructions jusqu'à ce qu'une condition donnée ne soit plus vérifiée. La boucle `for` JavaScript ressemble beaucoup à celle utilisée en C ou en Java. Une boucle `for` s'utilise de la façon suivante :
+
+    for ([expressionInitiale]; [condition]; [expressionIncrément])
+      instruction
+
+Voici ce qui se passe quand une boucle `for` s'exécute :
+
+1.  L'expression initiale `expressionInitiale` est exécutée si elle est présente. Généralement, on utilise cette expression pour initialiser un ou plusieurs compteurs dont on se servira dans la boucle. Il est possible d'utiliser des expressions plus complexes si besoin. Elle peut servir à déclarer des variables.
+2.  L'expression `condition` est évaluée, si elle vaut `true`, les instructions contenues dans la boucle sont exécutées. Si la valeur de `condition` est `false`, la boucle `for` se termine. Si la condition est absente, elle est considérée comme `true`.
+3.  L'instruction `instruction` est exécutée. Si l'on souhaite exécuter plusieurs instructions, on utilisera un bloc d'instructions (`{ ... }`) afin de les grouper.
+4.  Si elle est présente, l'expression de mise à jour` expressionIncrément` est exécutée.
+5.  On retourne ensuite à l'étape 2.
+
+### **Exemple**
+
+La fonction suivante contient une instruction `for` qui compte le nombre d'options sélectionnées dans une liste déroulante (ici, un objet {{HTMLElement("select")}} permettant une sélection multiple). L'instruction `for` déclare une variable `i` et l'initialise à zéro. Elle vérifie que `i` est bien inférieur au nombre d'options et, pour chaque option, effectue un test conditionnel pour savoir si l'option est sélectionnée puis passe à l'option suivante en incrémentant la variable `i` pour chaque itération.
+
+```html
+<form name="selectForm">
+  <p>
+    <label for="typesMusique">Veuillez choisir des genres musicaux, puis cliquez :</label>
+    <select id="typesMusique" name="typesMusique" multiple="multiple">
+      <option selected="selected">R&B</option>
+      <option>Jazz</option>
+      <option>Blues</option>
+      <option>New Age</option>
+      <option>Classique</option>
+      <option>Opera</option>
+    </select>
+  </p>
+  <p><button id="btn" type="button">Combien sont sélectionnés ?</button></p>
+</form>
+
+<script>
+function quantité(selectObject) {
+  let qtéSélectionnée = 0;
+  for (let i = 0; i < selectObject.options.length; i++) {
+    if (selectObject.options[i].selected) {
+      qtéSélectionnée++;
+    }
+  }
+  return qtéSélectionnée;
+}
+
+let btn = document.getElementById("btn");
+btn.addEventListener("click", function(){
+  alert('Nombre d\'options choisies : ' + quantité(document.selectForm.typesMusique))
+});
+</script>
+```
+
+## L'instruction `do...while`
+
+L'instruction {{jsxref("statements/do...while", "do...while")}} permet de répéter un ensemble d'instructions jusqu'à ce qu'une condition donnée ne soit plus vérifiée. (_NdT_ : littéralement « do...while » signifie « faire... tant que »). Une instruction `do...while` s'utilise de la façon suivante :
+
+    do
+      instruction
+    while (condition);
+
+`instruction` est exécutée au moins une fois avant que la condition soit vérifiée. Pour utiliser plusieurs instructions à cet endroit, on utilisera une instruction de bloc (`{ ... }`) pour regrouper différentes instructions. Si la `condition` est vérifiée, l'instruction est à nouveau exécutée. À la fin de chaque exécution, la condition est vérifiée. Quand la condition n'est plus vérifiée (vaut `false` ou une valeur équivalente), l'exécution de l'instruction` do...while` est stoppée et le contrôle passe à l'instruction suivante.
+
+### Exemple
+
+Dans l'exemple qui suit, la boucle `do` est exécutée au moins une fois et répétée jusqu'à ce que `i` ne soit plus inférieur à 5.
+
+```js
+let i = 0;
+do {
+  i += 1;
+  console.log(i);
+} while (i < 5);
+```
+
+## L'instruction `while`
+
+Une instruction {{jsxref("statements/while", "while")}} permet d'exécuter une instruction tant qu'une condition donnée est vérifiée. Cette instruction `while` s'utilise de la façon suivante :
+
+    while (condition)
+      instruction
+
+Si la condition n'est pas vérifiée, l'instruction` instruction` n'est pas exécutée et le contrôle passe directement à l'instruction suivant la boucle.
+
+Le test de la condition s'effectue avant d'exécuter `instruction`. Si la condition renvoie `true` (ou une valeur équivalente), `instruction` sera exécutée et la condition sera testée à nouveau. Si la condition renvoie `false` (ou une valeur équivalente), l'exécution s'arrête et le contrôle est passé à l'instruction qui suit `while`.
+
+Pour pouvoir utiliser plusieurs instructions dans la boucle, on utilisera une instruction de bloc (`{ ... }`) afin de les regrouper.
+
+### Exemple 1
+
+La boucle `while` qui suit permet d'effectuer des itérations tant que `n` est inférieur à 3 :
+
+```js
+let n = 0;
+let x = 0;
+while (n < 3) {
+  n++;
+  x += n;
+}
+```
+
+À chaque itération, la boucle incrémente `n` et ajoute la valeur de `n` à `x`. `x` et `n` prendront ainsi les valeurs suivantes :
+
+- Après la première itération : `n` = 1 et `x` = 1
+- Après la deuxième itération : `n` = 2 et `x` = 3
+- Après la troisième itération : `n` = 3 et `x` = 6
+
+Une fois la troisième itération effectuée, la condition `n < 3` n'est plus vérifiée, par conséquent, la boucle se termine.
+
+### Exemple 2
+
+Attention à éviter les boucles infinies. Il faut bien s'assurer que la condition utilisée dans la boucle ne soit plus vérifiée à un moment donné. Si la condition est toujours vérifiée, la boucle se répétera sans jamais s'arrêter. Dans l'exemple qui suit, les instructions contenues dans la boucle `while` s'exécutent sans discontinuer car la condition est toujours vérifiée :
+
+```js
+while (true) {
+  console.log("Coucou monde !");
+}
+```
+
+## L'instruction `label`
+
+Un {{jsxref("statements/label","label")}} (ou étiquette) permet de fournir un identifiant pour une instruction afin d'y faire référence depuis un autre endroit dans le programme. On peut ainsi identifier une boucle grâce à un label puis utiliser les instructions `break` ou `continue` pour indiquer si le programme doit interrompre ou poursuivre l'exécution de cette boucle.
+
+On utilise un label de la façon suivante :
+
+    label:
+      instruction
+
+La valeur de `label` peut être n'importe quel identifiant JavaScript valide (et ne doit pas être un mot réservé pour le langage). L'`instruction` peut être n'importe quelle instruction JavaScript valide (y compris un bloc).
+
+### Exemple
+
+Dans cet exemple, on utilise un label `memoBoucle` pour identifier une boucle `while`.
+
+```js
+memoBoucle:
+while (memo == true) {
+  faireQQC();
+}
+```
+
+> **Note :** Pour plus de détails sur cette instruction, voir la page de la référence JavaScript pour [`label`](/fr/docs/Web/JavaScript/Reference/Instructions/label).
+
+## L'instruction `break`
+
+L'instruction {{jsxref("statements/break","break")}} est utilisée pour finir l'exécution d'une boucle, d'une instruction `switch`, ou avec un label.
+
+- Lorsque `break` est utilisé sans label, il provoque la fin de l'instruction `while`, `do-while`, `for`, ou `switch` dans laquelle il est inscrit (on finit l'instruction la plus imbriquée), le contrôle est ensuite passé à l'instruction suivante.
+- Lorsque `break` est utilisé avec un label, il provoque la fin de l'instruction correspondante.
+
+La syntaxe de cette instruction possède donc deux formes :
+
+1.  `break;`
+2.  `break label;`
+
+La première forme permet d'interrompre la boucle la plus imbriquée (ou le `switch`) dans laquelle on se trouve. La seconde forme interrompt l'exécution d'une instruction identifiée par un label.
+
+### Exemple **1**
+
+Dans l'exemple qui suit, on itère sur un tableau grâce à une boucle jusqu'à trouver un élément dont la valeur est `valeurTest `:
+
+```js
+for (i = 0; i < a.length; i++) {
+  if (a[i] === valeurTest) {
+    break;
+  }
+}
+```
+
+### Exemple 2
+
+Ici, on utilise `break` des deux façons : avec une instruction représentée par un label et sans.
+
+```js
+let x = 0;
+let z = 0;
+labelAnnuleBoucle: while (true) {
+  console.log("Boucle externe : " + x);
+  x += 1;
+  z = 1;
+  while (true) {
+    console.log("Boucle interne : " + z);
+    z += 1;
+    if (z === 10 && x === 10) {
+      break labelAnnuleBoucle;
+    } else if (z === 10) {
+      break;
+    }
+  }
+}
+```
+
+## L'instruction `continue`
+
+L'instruction {{jsxref("statements/continue","continue")}} permet de reprendre une boucle `while`, `do-while`, `for`, ou une instruction `label`.
+
+- Lorsque `continue` est utilisé sans label, l'itération courante de la boucle (celle la plus imbriquée) est terminée et la boucle passe à l'exécution de la prochaine itération. À la différence de l'instruction `break`, `continue` ne stoppe pas entièrement l'exécution de la boucle. Si elle est utilisée dans une boucle `while`, l'itération reprend au niveau de la condition d'arrêt. Dans une boucle `for`, l'itération reprend au niveau de l'expression d'incrément pour la boucle.
+- Lorsque `continue` est utilisé avec un label, il est appliqué à l'instruction de boucle correspondante.
+
+L'instruction `continue` s'utilise donc de la façon suivante :
+
+1.  `continue;`
+2.  `continue `_`label;`_
+
+### Exemple 1
+
+Dans l'exemple qui suit, on utilise une boucle `while` avec une instruction `continue` qui est exécutée lorsque `i` vaut 3. Ici, `n` prendra donc les valeurs 1, 3, 7 et 12.
+
+```js
+let i = 0;
+let n = 0;
+while (i < 5) {
+  i++;
+  if (i === 3) {
+    continue;
+  }
+  n += i;
+  console.log(n);
+}
+// 1, 3, 7, 12
+```
+
+### Exemple 2
+
+Dans l'exemple suivant, on a une instruction étiquetée `vérifIetJ` qui contient une autre instruction étiquetée `vérifJ`. Si l'instruction `continue` est utilisée, le programme reprend l'exécution au début de l'instruction `vérifJ`. Chaque fois que `continue` est utilisé, `vérifJ` réitère jusqu'à ce que sa condition renvoie `false`. Lorsque c'est le cas, le reste de l'instruction `vérifIetJ` est exécuté.
+
+Si `continue` utilisait l'étiquette `vérifIetJ`, le programme continuerait au début de l'instruction `vérifIetJ`
+
+```js
+let i = 0;
+let j = 8;
+
+vérifIetJ: while (i < 4) {
+  console.log("i : " + i);
+  i += 1;
+
+  vérifJ: while (j > 4) {
+    console.log("j : "+ j);
+    j -= 1;
+    if ((j % 2) === 0){
+      continue vérifJ;
+    }
+    console.log(j + " est impaire.");
+   }
+   console.log("i = " + i);
+   console.log("j = " + j);
+}
+```
+
+## L'instruction `for...in`
+
+L'instruction {{jsxref("statements/for...in","for...in")}} permet d'itérer sur l'ensemble des propriétés énumérables d'un objet. Pour chaque propriété, JavaScript exécutera l'instruction indiquée. Cette instruction s'utilise de la façon suivante :
+
+    for (variable in objet) {
+      instruction
+    }
+
+### Exemple
+
+La fonction suivante prend comme argument un objet et le nom de cet objet. Elle parcourt ensuite les propriétés de l'objet et renvoie une chaîne de caractères qui liste les propriétés avec leurs noms et leurs valeurs respectives :
+
+```js
+function afficherProps(obj, nomObj) {
+  var result = "";
+  for (var i in obj) {
+    result += nomObj + "." + i + " = " + obj[i] + "\n";
+  }
+  result += "\n";
+  return result;
+}
+```
+
+Pour un objet `voiture` dont les propriétés sont `fabricant` et `modèle`, `result` serait :
+
+```js
+voiture.fabricant = Ford
+voiture.modèle = Mustang
+```
+
+### Les tableaux (arrays) et `for...in`
+
+Bien qu'il soit tentant d'utiliser cette instruction pour parcourir les éléments d'un objet [`Array`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array) , cela peut avoir des comportements inattendus. En effet, `for...in` permet de parcourir les propriétés définies par l'utilisateur ainsi que les éléments de tableau. Ainsi, si l'on modifie un objet `Array` en lui ajoutant des propriétés et/ou des méthodes, la boucle `for...in` renverra le nom de ces nouvelles propriétés en plus des indices des éléments du tableau. C'est pourquoi, il est préférable d'utiliser une boucle [`for`](/fr/docs/Web/JavaScript/Reference/Instructions/for) avec les indices du tableau pour parcourir ses éléments.
+
+## L'instruction `for...of`
+
+L'instruction {{jsxref("statements/for...of","for...of")}} crée une boucle qui fonctionne avec [les objets itérables](/fr/docs/Web/JavaScript/Reference/Les_protocoles_iteration) (qui incluent {{jsxref("Array")}}, {{jsxref("Map")}}, {{jsxref("Set")}}, l'objet [`arguments`](/fr/docs/Web/JavaScript/Reference/Fonctions/arguments), etc.). La boucle appelle un mécanisme d'itération propre à l'objet utilisé et elle parcourt l'objet et les valeurs de ses différentes propriétés.
+
+    for (variable of objet) {
+      instruction
+    }
+
+Dans l'exemple suivant, on illustre la différence entre une boucle `for...of` et une boucle [`for...in`](/fr/docs/Web/JavaScript/Reference/Instructions/for...in).  `for...in` parcourt les noms des propriétés d'un objet alors que `for...of` parcourt les **valeurs** des propriétés :
+
+```js
+let arr = [3, 5, 7];
+arr.toto = "coucou";
+
+for (let i in arr) {
+  console.log(i); // affiche 0, 1, 2, "toto" dans la console
+}
+
+for (let i of arr) {
+  console.log(i); // affiche 3, 5, 7 dans la console
+}
+```
+
+{{PreviousNext("Web/JavaScript/Guide/Contr%C3%B4le_du_flux_Gestion_des_erreurs", "Web/JavaScript/Guide/Fonctions")}}
diff --git a/files/fr/web/javascript/guide/meta_programming/index.html b/files/fr/web/javascript/guide/meta_programming/index.html
deleted file mode 100644
index c126f53d88..0000000000
--- a/files/fr/web/javascript/guide/meta_programming/index.html
+++ /dev/null
@@ -1,279 +0,0 @@
----
-title: Métaprogrammation
-slug: Web/JavaScript/Guide/Meta_programming
-tags:
-  - Guide
-  - JavaScript
-  - Proxy
-  - Reflect
-translation_of: Web/JavaScript/Guide/Meta_programming
-original_slug: Web/JavaScript/Guide/Métaprogrammation
----
-<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/iterateurs_et_generateurs","Web/JavaScript/Guide/Modules")}}</div>
-
-<p>À partir d'ECMAScript 2015, JavaScript fournit les objets natifs {{jsxref("Proxy")}} et {{jsxref("Reflect")}}. Ces objets permettent d'intercepter et de définir des comportements spécifiques pour certaines opérations fondamentales du langage (par exemple la recherche d'une propriété, l'affectation, l'énumération, l'appel d'une fonction, etc.). Grâce à ces deux objets, il est possible d'interagir avec le langage lui-même (on parle alors de métaprogrammation).</p>
-
-<h2 id="Les_proxies">Les proxies</h2>
-
-<p>Introduits avec ECMAScript 2015, les objets {{jsxref("Proxy")}} permettent d'intercepter certaines opérations JavaScript et de définir le comportement à avoir quand celles-ci se produisent. Par exemple, on peut intercepter l'accès à une propriété d'un objet :</p>
-
-<pre class="brush: js">var handler = {
-  get: function(cible, nom){
-    return nom in cible ? cible[nom] : 42;
-}};
-var p = new Proxy({}, handler);
-p.a = 1;
-console.log(p.a, p.b); // 1, 42
-</pre>
-
-<p>Ici, l'objet <code>Proxy</code> définit une <em>cible</em> (ici c'est un objet vide) et un gestionnaire (<em>handler</em>) qui implémente une <em>trappe</em> pour l'opération <em>get</em>. Ainsi, l'objet qui est « proxyfié » ne renverra pas <code>undefined</code> lorsqu'on tentera d'accéder à une propriété qui n'est pas définie, à la place le nombre 42 sera renvoyé.</p>
-
-<div class="note">
-<p><strong>Note :</strong> D'autres exemples sont disponibles sur la page de l'objet {{jsxref("Proxy")}}.</p>
-</div>
-
-<h3 id="Terminologie">Terminologie</h3>
-
-<p>Lorsqu'on utilise les proxies et leurs fonctionnalités, on utilisera les termes suivants :</p>
-
-<dl>
- <dt>{{jsxref("Objets_globaux/Proxy/handler","gestionnaire (handler)","","true")}}</dt>
- <dd>L'objet qui contient les trappes.</dd>
- <dt>trappes</dt>
- <dd>Les méthodes qui fournissent l'accès aux propriétés. Ce concept est analogue aux trappes utilisées dans les systèmes d'exploitations.</dd>
- <dt>cible</dt>
- <dd>L'objet que le proxy virtualise. C'est généralement un objet utilisé en arrière-plan pour stocker les informations. Les invariants (c'est-à-dire les éléments sémantiques qui doivent rester inchangés) concernant le caractère non-extensible de l'objet ou l'aspect non-configurable des propriétés sont vérifiés par rapport à cet objet cible.</dd>
- <dt>invariants</dt>
- <dd>Les éléments sémantiques qui ne doivent pas être modifiés par les opérations définies dans les proxies. Si un invariant n'est pas respecté au sein d'un gestionnaire, cela provoquera une exception {{jsxref("TypeError")}}.</dd>
-</dl>
-
-<h2 id="Les_gestionnaires_et_les_trappes">Les gestionnaires et les trappes</h2>
-
-<p>Le tableau suivant résume les différentes trappes disponibles pour les objets <code>Proxy</code>. Pour plus d'explications et de détails, voir les différents <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Proxy/handler">pages de la référence</a> sur chacun de ces concepts.</p>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th>Gestionnaires / Trappes</th>
-   <th>Opérations interceptées</th>
-   <th>Invariants</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{jsxref("Objets_globaux/Proxy/handler/getPrototypeOf", "handler.getPrototypeOf()")}}</td>
-   <td>{{jsxref("Object.getPrototypeOf()")}}<br>
-    {{jsxref("Reflect.getPrototypeOf()")}}<br>
-    {{jsxref("Object/proto", "__proto__")}}<br>
-    {{jsxref("Object.prototype.isPrototypeOf()")}}<br>
-    {{jsxref("Operators/instanceof", "instanceof")}}</td>
-   <td><code>getPrototypeOf</code> doit renvoyer un objet ou <code>null</code>.<br>
-    <br>
-    Si <code>cible</code> n'est pas extensible, <code>Object.getPrototypeOf(proxy)</code> doit renvoyer le même objet que <code>Object.getPrototypeOf(cible)</code>.</td>
-  </tr>
-  <tr>
-   <td>{{jsxref("Objets_globaux/Proxy/handler/setPrototypeOf", "handler.setPrototypeOf()")}}</td>
-   <td>{{jsxref("Object.setPrototypeOf()")}}<br>
-    {{jsxref("Reflect.setPrototypeOf()")}}</td>
-   <td>
-    <p>Si <code>cible</code> n'est pas extensible, le paramètre <code>prototype</code> doit être la même valeur que <code>Object.getPrototypeOf(cible)</code>.</p>
-   </td>
-  </tr>
-  <tr>
-   <td>{{jsxref("Objets_globaux/Proxy/handler/isExtensible", "handler.isExtensible()")}}</td>
-   <td>
-    <p>{{jsxref("Object.isExtensible()")}}</p>
-
-    <p>{{jsxref("Reflect.isExtensible()")}}</p>
-   </td>
-   <td>
-    <p><code>Object.isExtensible(proxy)</code> doit renvoyer la même valeur que <code>Object.isExtensible(target)</code>.</p>
-   </td>
-  </tr>
-  <tr>
-   <td>{{jsxref("Objets_globaux/Proxy/handler/preventExtensions", "handler.preventExtensions()")}}</td>
-   <td>
-    <p>{{jsxref("Object.preventExtensions()")}}</p>
-
-    <p>{{jsxref("Reflect.preventExtensions()")}}</p>
-   </td>
-   <td>
-    <p><code>Object.preventExtensions(proxy)</code> ne renvoie <code>true</code> que si <code>Object.isExtensible(proxy)</code> vaut <code>false</code>.</p>
-   </td>
-  </tr>
-  <tr>
-   <td>{{jsxref("Objets_globaux/Proxy/handler/getOwnPropertyDescriptor", "handler.getOwnPropertyDescriptor()")}}</td>
-   <td>
-    <p>{{jsxref("Object.getOwnPropertyDescriptor()")}}</p>
-
-    <p>{{jsxref("Reflect.getOwnPropertyDescriptor()")}}</p>
-   </td>
-   <td>
-    <p><code>getOwnPropertyDescriptor</code> doit renvoyer un objet ou <code>undefined</code>.</p>
-
-    <p>Une propriété ne peut pas être vue comme non-existante si elle existe comme une propriété propre non-configurable de l'objet cible.</p>
-
-    <p>Une propriété ne peut pas être vue comme non-existante si elle existe comme une propriété propre de la cible et que l'objet cible n'est pas extensible.</p>
-
-    <p>Une propriété ne peut pas être vue comme existante si elle n'existe pas comme une propriété propre de l'objet cible et que l'objet cible n'est pas extensible.</p>
-
-    <p>Une propriété ne peut pas être vue comme non-configurable si elle n'existe pas comme une propriété propre de l'objet cible ou si elle existe comme une propriété configurable propre de l'objet cible.</p>
-
-    <p>Le résultat de <code>Object.getOwnPropertyDescriptor(cible)</code> peut être appliqué à la cible en utilisant <code>Object.defineProperty</code> sans que cela ne lève d'exception.</p>
-   </td>
-  </tr>
-  <tr>
-   <td>{{jsxref("Objets_globaux/Proxy/handler/defineProperty", "handler.defineProperty()")}}</td>
-   <td>
-    <p>{{jsxref("Object.defineProperty()")}}</p>
-
-    <p>{{jsxref("Reflect.defineProperty()")}}</p>
-   </td>
-   <td>
-    <p>Une propriété ne peut pas être ajoutée si l'objet cible n'est pas extensible.</p>
-
-    <p>Une propriété ne peut pas être ajoutée ou être modifiée afin d'être non-configurable si elle n'existe pas comme une propriété propre de l'objet cible et qu'elle n'est pas non-configurable.</p>
-
-    <p>Une propriété peut ne pas être non-configurable si une propriété correspondante configurable existe sur l'objet cible.</p>
-
-    <p>Si une propriété possède une propriété correspondante sur l'objet cible, <code>Object.defineProperty(cible, prop, descripteur)</code> ne doit pas renvoyer d'exception.</p>
-
-    <p>En mode strict, si la valeur de retour de <code>defineProperty</code> est <code>false</code>, cela entraînera une exception {{jsxref("TypeError")}} exception.</p>
-   </td>
-  </tr>
-  <tr>
-   <td>{{jsxref("Objets_globaux/Proxy/handler/has", "handler.has()")}}</td>
-   <td>
-    <p>Requête d'une propriété : <code>toto in proxy</code></p>
-
-    <p>Requête d'une propriété héritée : <code>toto in Object.create(proxy)</code></p>
-
-    <p>{{jsxref("Reflect.has()")}}</p>
-   </td>
-   <td>
-    <p>Une propriété ne peut pas être vue comme non-existante si elle existe comme propriété propre non-configurable de l'objet cible.</p>
-
-    <p>Une propriété ne peut pas être vue comme non-existante si elle existe comme propriété propre de l'objet cible et que l'objet cible n'est pas extensible.</p>
-   </td>
-  </tr>
-  <tr>
-   <td>{{jsxref("Objets_globaux/Proxy/handler/get", "handler.get()")}}</td>
-   <td>
-    <p>Accès à une propriété : <code>proxy[toto]</code> et <code>proxy.truc</code></p>
-
-    <p>Accès à une propriété héritée : <code>Object.create(proxy)[toto]</code></p>
-
-    <p>{{jsxref("Reflect.get()")}}</p>
-   </td>
-   <td>
-    <p>La valeur rapportée pour la propriété doit être la même que la valeur de la propriété correspondante sur l'objet cible si celle-ci est une propriété de donnée non accessible en écriture et non-configurable..</p>
-
-    <p>La valeur rapportée pour une propriété doit être <code>undefined</code> si la propriété correspondante de l'objet cible est une propriété d'accesseur dont l'attribut [[Get]] vaut <code>undefined</code>.</p>
-   </td>
-  </tr>
-  <tr>
-   <td>{{jsxref("Objets_globaux/Proxy/handler/set", "handler.set()")}}</td>
-   <td>
-    <p>Affection d'une propriété : <code>proxy[toto] = truc</code> et <code>proxy.toto = truc</code><br>
-     <br>
-     Affectation d'une propriété héritée : <code>Object.create(proxy)[toto] = truc</code><br>
-     <br>
-     {{jsxref("Reflect.set()")}}</p>
-   </td>
-   <td>
-    <p>Il est impossible de modifier la valeur d'une propriété pour que celle-ci soit différente de la valeur de la propriété correspondante de l'objet cible si la propriété de l'objet cible est une propriété de donnée qui n'est pas accessible en écriture et qui n'est pas configurable.</p>
-
-    <p>Il est impossible de modifier la valeur d'une propriété si la propriété correspondante de l'objet cible est une propriété d'accesseur non-configurable dont l'attribut [[Set]] vaut <code>undefined</code>.</p>
-
-    <p>En mode strict, si le gestionnaire pour <code>set</code> renvoie <code>false</code>, cela provoquera une exception {{jsxref("TypeError")}}.</p>
-   </td>
-  </tr>
-  <tr>
-   <td>{{jsxref("Objets_globaux/Proxy/handler/deleteProperty", "handler.deleteProperty()")}}</td>
-   <td>
-    <p>Suppression d'une propriété : <code>delete proxy[toto]</code> et <code>delete proxy.toto</code><br>
-     <br>
-     {{jsxref("Reflect.deleteProperty()")}}</p>
-   </td>
-   <td>Une propriété ne peut pas être supprimée si elle existe comme une propriété propre non-configurable de l'objet cible.</td>
-  </tr>
-  <tr>
-   <td>{{jsxref("Objets_globaux/Proxy/handler/enumerate", "handler.enumerate()")}}</td>
-   <td>
-    <p>Lister les propriétés avec <code>for...in</code> : <code>for (var nom in proxy) {...}</code><br>
-     <br>
-     {{jsxref("Reflect.enumerate()")}}</p>
-   </td>
-   <td>La méthode <code>enumerate</code> doit renvoyer un objet.</td>
-  </tr>
-  <tr>
-   <td>{{jsxref("Objets_globaux/Proxy/handler/ownKeys", "handler.ownKeys()")}}</td>
-   <td>
-    <p>{{jsxref("Object.getOwnPropertyNames()")}}<br>
-     {{jsxref("Object.getOwnPropertySymbols()")}}<br>
-     {{jsxref("Object.keys()")}}<br>
-     {{jsxref("Reflect.ownKeys()")}}</p>
-   </td>
-   <td>
-    <p>Le résultat de <code>ownKeys</code> est une liste.<br>
-     <br>
-     Le type de chaque élément de la liste est soit une {{jsxref("String")}} soit un  {{jsxref("Symbol")}}.<br>
-     <br>
-     La liste résultatnte doit contenir les clés de toutes les propriétés non-configurables de l'objet cible.<br>
-     <br>
-     Si l'objet cible n'est pas extensible, la liste résultante doit contenir toutes les clés des propriétés propres de l'objet cibles et aucune autre valeur.</p>
-   </td>
-  </tr>
-  <tr>
-   <td>{{jsxref("Objets_globaux/Proxy/handler/apply", "handler.apply()")}}</td>
-   <td>
-    <p><code>proxy(..args)</code><br>
-     <br>
-     {{jsxref("Function.prototype.apply()")}} and {{jsxref("Function.prototype.call()")}}<br>
-     <br>
-     {{jsxref("Reflect.apply()")}}</p>
-   </td>
-   <td>Il n'y a pas d'invariant pour la méthode <code>handler.apply</code>.</td>
-  </tr>
-  <tr>
-   <td>{{jsxref("Objets_globaux/Proxy/handler/construct", "handler.construct()")}}</td>
-   <td>
-    <p><code>new proxy(...args)</code><br>
-     {{jsxref("Reflect.construct()")}}</p>
-   </td>
-   <td>Le résultat doit être un <code>Objet</code>.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Proxies_révocables">Proxies révocables</h2>
-
-<p>La méthode {{jsxref("Proxy.revocable()")}} est utilisée pour créer un objet <code>Proxy</code> qui puisse être révoqué. Cela signifie que que le proxy pourra être révoqué avec la fonction <code>revoke</code> et arrêtera le proxy. Après cet arrêt, toute opération sur le proxy entraînera une exception {{jsxref("TypeError")}}.</p>
-
-<pre class="brush: js">var revocable = Proxy.revocable({}, {
-  get: function(cible, nom) {
-    return "[[" + nom + "]]";
-  }
-});
-var proxy = revocable.proxy;
-console.log(proxy.toto); // "[[toto]]"
-
-revocable.revoke();
-
-console.log(proxy.toto); // déclenche une TypeError
-proxy.toto = 1;          // une TypeError encore
-delete proxy.toto;       // toujours une TypeError
-typeof proxy             // "object", typeof ne déclenche aucune trappe</pre>
-
-<h2 id="Réflexion">Réflexion</h2>
-
-<p>{{jsxref("Reflect")}} est un objet natif qui fournit des méthodes pour les opérations JavaScript qui peuvent être interceptées. Ces méthodes sont les mêmes que celles gérées par les {{jsxref("Objets_globaux/Proxy/handler","gestionnaires de proxy","","true")}}. <code>Reflect</code> n'est pas un constructeur et ne peut pas être utilisé comme une fonction !</p>
-
-<p><code>Reflect</code> aide à transférer les opérations par défaut depuis le gestionnaire vers la cible.</p>
-
-<p>Par exemple, avec {{jsxref("Reflect.has()")}}, on obtient le comportement de l'opérateur <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_in"><code>in</code></a> sous forme d'une fonction :</p>
-
-<pre class="brush: js">Reflect.has(Object, "assign"); // true
-</pre>
-
-<p>{{PreviousNext("Web/JavaScript/Guide/iterateurs_et_generateurs","Web/JavaScript/Guide/Modules")}}</p>
diff --git a/files/fr/web/javascript/guide/meta_programming/index.md b/files/fr/web/javascript/guide/meta_programming/index.md
new file mode 100644
index 0000000000..8564629cd6
--- /dev/null
+++ b/files/fr/web/javascript/guide/meta_programming/index.md
@@ -0,0 +1,393 @@
+---
+title: Métaprogrammation
+slug: Web/JavaScript/Guide/Meta_programming
+tags:
+  - Guide
+  - JavaScript
+  - Proxy
+  - Reflect
+translation_of: Web/JavaScript/Guide/Meta_programming
+original_slug: Web/JavaScript/Guide/Métaprogrammation
+---
+{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/iterateurs_et_generateurs","Web/JavaScript/Guide/Modules")}}
+
+À partir d'ECMAScript 2015, JavaScript fournit les objets natifs {{jsxref("Proxy")}} et {{jsxref("Reflect")}}. Ces objets permettent d'intercepter et de définir des comportements spécifiques pour certaines opérations fondamentales du langage (par exemple la recherche d'une propriété, l'affectation, l'énumération, l'appel d'une fonction, etc.). Grâce à ces deux objets, il est possible d'interagir avec le langage lui-même (on parle alors de métaprogrammation).
+
+## Les proxies
+
+Introduits avec ECMAScript 2015, les objets {{jsxref("Proxy")}} permettent d'intercepter certaines opérations JavaScript et de définir le comportement à avoir quand celles-ci se produisent. Par exemple, on peut intercepter l'accès à une propriété d'un objet :
+
+```js
+var handler = {
+  get: function(cible, nom){
+    return nom in cible ? cible[nom] : 42;
+}};
+var p = new Proxy({}, handler);
+p.a = 1;
+console.log(p.a, p.b); // 1, 42
+```
+
+Ici, l'objet `Proxy` définit une _cible_ (ici c'est un objet vide) et un gestionnaire (_handler_) qui implémente une _trappe_ pour l'opération _get_. Ainsi, l'objet qui est « proxyfié » ne renverra pas `undefined` lorsqu'on tentera d'accéder à une propriété qui n'est pas définie, à la place le nombre 42 sera renvoyé.
+
+> **Note :** D'autres exemples sont disponibles sur la page de l'objet {{jsxref("Proxy")}}.
+
+### Terminologie
+
+Lorsqu'on utilise les proxies et leurs fonctionnalités, on utilisera les termes suivants :
+
+- {{jsxref("Objets_globaux/Proxy/handler","gestionnaire (handler)","","true")}}
+  - : L'objet qui contient les trappes.
+- trappes
+  - : Les méthodes qui fournissent l'accès aux propriétés. Ce concept est analogue aux trappes utilisées dans les systèmes d'exploitations.
+- cible
+  - : L'objet que le proxy virtualise. C'est généralement un objet utilisé en arrière-plan pour stocker les informations. Les invariants (c'est-à-dire les éléments sémantiques qui doivent rester inchangés) concernant le caractère non-extensible de l'objet ou l'aspect non-configurable des propriétés sont vérifiés par rapport à cet objet cible.
+- invariants
+  - : Les éléments sémantiques qui ne doivent pas être modifiés par les opérations définies dans les proxies. Si un invariant n'est pas respecté au sein d'un gestionnaire, cela provoquera une exception {{jsxref("TypeError")}}.
+
+## Les gestionnaires et les trappes
+
+Le tableau suivant résume les différentes trappes disponibles pour les objets `Proxy`. Pour plus d'explications et de détails, voir les différents [pages de la référence](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Proxy/handler) sur chacun de ces concepts.
+
+<table class="standard-table">
+  <thead>
+    <tr>
+      <th>Gestionnaires / Trappes</th>
+      <th>Opérations interceptées</th>
+      <th>Invariants</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>
+        {{jsxref("Objets_globaux/Proxy/handler/getPrototypeOf", "handler.getPrototypeOf()")}}
+      </td>
+      <td>
+        {{jsxref("Object.getPrototypeOf()")}}<br />{{jsxref("Reflect.getPrototypeOf()")}}<br />{{jsxref("Object/proto", "__proto__")}}<br />{{jsxref("Object.prototype.isPrototypeOf()")}}<br />{{jsxref("Operators/instanceof", "instanceof")}}
+      </td>
+      <td>
+        <code>getPrototypeOf</code> doit renvoyer un objet ou
+        <code>null</code>.<br /><br />Si <code>cible</code> n'est pas
+        extensible, <code>Object.getPrototypeOf(proxy)</code> doit renvoyer le
+        même objet que <code>Object.getPrototypeOf(cible)</code>.
+      </td>
+    </tr>
+    <tr>
+      <td>
+        {{jsxref("Objets_globaux/Proxy/handler/setPrototypeOf", "handler.setPrototypeOf()")}}
+      </td>
+      <td>
+        {{jsxref("Object.setPrototypeOf()")}}<br />{{jsxref("Reflect.setPrototypeOf()")}}
+      </td>
+      <td>
+        <p>
+          Si <code>cible</code> n'est pas extensible, le paramètre
+          <code>prototype</code> doit être la même valeur que
+          <code>Object.getPrototypeOf(cible)</code>.
+        </p>
+      </td>
+    </tr>
+    <tr>
+      <td>
+        {{jsxref("Objets_globaux/Proxy/handler/isExtensible", "handler.isExtensible()")}}
+      </td>
+      <td>
+        <p>{{jsxref("Object.isExtensible()")}}</p>
+        <p>{{jsxref("Reflect.isExtensible()")}}</p>
+      </td>
+      <td>
+        <p>
+          <code>Object.isExtensible(proxy)</code> doit renvoyer la même valeur
+          que <code>Object.isExtensible(target)</code>.
+        </p>
+      </td>
+    </tr>
+    <tr>
+      <td>
+        {{jsxref("Objets_globaux/Proxy/handler/preventExtensions", "handler.preventExtensions()")}}
+      </td>
+      <td>
+        <p>{{jsxref("Object.preventExtensions()")}}</p>
+        <p>{{jsxref("Reflect.preventExtensions()")}}</p>
+      </td>
+      <td>
+        <p>
+          <code>Object.preventExtensions(proxy)</code> ne renvoie
+          <code>true</code> que si <code>Object.isExtensible(proxy)</code> vaut
+          <code>false</code>.
+        </p>
+      </td>
+    </tr>
+    <tr>
+      <td>
+        {{jsxref("Objets_globaux/Proxy/handler/getOwnPropertyDescriptor", "handler.getOwnPropertyDescriptor()")}}
+      </td>
+      <td>
+        <p>{{jsxref("Object.getOwnPropertyDescriptor()")}}</p>
+        <p>{{jsxref("Reflect.getOwnPropertyDescriptor()")}}</p>
+      </td>
+      <td>
+        <p>
+          <code>getOwnPropertyDescriptor</code> doit renvoyer un objet ou
+          <code>undefined</code>.
+        </p>
+        <p>
+          Une propriété ne peut pas être vue comme non-existante si elle existe
+          comme une propriété propre non-configurable de l'objet cible.
+        </p>
+        <p>
+          Une propriété ne peut pas être vue comme non-existante si elle existe
+          comme une propriété propre de la cible et que l'objet cible n'est pas
+          extensible.
+        </p>
+        <p>
+          Une propriété ne peut pas être vue comme existante si elle n'existe
+          pas comme une propriété propre de l'objet cible et que l'objet cible
+          n'est pas extensible.
+        </p>
+        <p>
+          Une propriété ne peut pas être vue comme non-configurable si elle
+          n'existe pas comme une propriété propre de l'objet cible ou si elle
+          existe comme une propriété configurable propre de l'objet cible.
+        </p>
+        <p>
+          Le résultat de
+          <code>Object.getOwnPropertyDescriptor(cible)</code> peut être appliqué
+          à la cible en utilisant <code>Object.defineProperty</code> sans que
+          cela ne lève d'exception.
+        </p>
+      </td>
+    </tr>
+    <tr>
+      <td>
+        {{jsxref("Objets_globaux/Proxy/handler/defineProperty", "handler.defineProperty()")}}
+      </td>
+      <td>
+        <p>{{jsxref("Object.defineProperty()")}}</p>
+        <p>{{jsxref("Reflect.defineProperty()")}}</p>
+      </td>
+      <td>
+        <p>
+          Une propriété ne peut pas être ajoutée si l'objet cible n'est pas
+          extensible.
+        </p>
+        <p>
+          Une propriété ne peut pas être ajoutée ou être modifiée afin d'être
+          non-configurable si elle n'existe pas comme une propriété propre de
+          l'objet cible et qu'elle n'est pas non-configurable.
+        </p>
+        <p>
+          Une propriété peut ne pas être non-configurable si une propriété
+          correspondante configurable existe sur l'objet cible.
+        </p>
+        <p>
+          Si une propriété possède une propriété correspondante sur l'objet
+          cible, <code>Object.defineProperty(cible, prop, descripteur)</code> ne
+          doit pas renvoyer d'exception.
+        </p>
+        <p>
+          En mode strict, si la valeur de retour de
+          <code>defineProperty</code> est <code>false</code>, cela entraînera
+          une exception {{jsxref("TypeError")}} exception.
+        </p>
+      </td>
+    </tr>
+    <tr>
+      <td>
+        {{jsxref("Objets_globaux/Proxy/handler/has", "handler.has()")}}
+      </td>
+      <td>
+        <p>Requête d'une propriété : <code>toto in proxy</code></p>
+        <p>
+          Requête d'une propriété héritée :
+          <code>toto in Object.create(proxy)</code>
+        </p>
+        <p>{{jsxref("Reflect.has()")}}</p>
+      </td>
+      <td>
+        <p>
+          Une propriété ne peut pas être vue comme non-existante si elle existe
+          comme propriété propre non-configurable de l'objet cible.
+        </p>
+        <p>
+          Une propriété ne peut pas être vue comme non-existante si elle existe
+          comme propriété propre de l'objet cible et que l'objet cible n'est pas
+          extensible.
+        </p>
+      </td>
+    </tr>
+    <tr>
+      <td>
+        {{jsxref("Objets_globaux/Proxy/handler/get", "handler.get()")}}
+      </td>
+      <td>
+        <p>
+          Accès à une propriété : <code>proxy[toto]</code> et
+          <code>proxy.truc</code>
+        </p>
+        <p>
+          Accès à une propriété héritée :
+          <code>Object.create(proxy)[toto]</code>
+        </p>
+        <p>{{jsxref("Reflect.get()")}}</p>
+      </td>
+      <td>
+        <p>
+          La valeur rapportée pour la propriété doit être la même que la valeur
+          de la propriété correspondante sur l'objet cible si celle-ci est une
+          propriété de donnée non accessible en écriture et non-configurable..
+        </p>
+        <p>
+          La valeur rapportée pour une propriété doit être
+          <code>undefined</code> si la propriété correspondante de l'objet cible
+          est une propriété d'accesseur dont l'attribut [[Get]] vaut
+          <code>undefined</code>.
+        </p>
+      </td>
+    </tr>
+    <tr>
+      <td>
+        {{jsxref("Objets_globaux/Proxy/handler/set", "handler.set()")}}
+      </td>
+      <td>
+        <p>
+          Affection d'une propriété : <code>proxy[toto] = truc</code> et
+          <code>proxy.toto = truc</code><br /><br />Affectation d'une propriété
+          héritée : <code>Object.create(proxy)[toto] = truc</code
+          ><br /><br />{{jsxref("Reflect.set()")}}
+        </p>
+      </td>
+      <td>
+        <p>
+          Il est impossible de modifier la valeur d'une propriété pour que
+          celle-ci soit différente de la valeur de la propriété correspondante
+          de l'objet cible si la propriété de l'objet cible est une propriété de
+          donnée qui n'est pas accessible en écriture et qui n'est pas
+          configurable.
+        </p>
+        <p>
+          Il est impossible de modifier la valeur d'une propriété si la
+          propriété correspondante de l'objet cible est une propriété
+          d'accesseur non-configurable dont l'attribut [[Set]] vaut
+          <code>undefined</code>.
+        </p>
+        <p>
+          En mode strict, si le gestionnaire pour <code>set</code> renvoie
+          <code>false</code>, cela provoquera une exception
+          {{jsxref("TypeError")}}.
+        </p>
+      </td>
+    </tr>
+    <tr>
+      <td>
+        {{jsxref("Objets_globaux/Proxy/handler/deleteProperty", "handler.deleteProperty()")}}
+      </td>
+      <td>
+        <p>
+          Suppression d'une propriété : <code>delete proxy[toto]</code> et
+          <code>delete proxy.toto</code
+          ><br /><br />{{jsxref("Reflect.deleteProperty()")}}
+        </p>
+      </td>
+      <td>
+        Une propriété ne peut pas être supprimée si elle existe comme une
+        propriété propre non-configurable de l'objet cible.
+      </td>
+    </tr>
+    <tr>
+      <td>
+        {{jsxref("Objets_globaux/Proxy/handler/enumerate", "handler.enumerate()")}}
+      </td>
+      <td>
+        <p>
+          Lister les propriétés avec <code>for...in</code> :
+          <code>for (var nom in proxy) {...}</code
+          ><br /><br />{{jsxref("Reflect.enumerate()")}}
+        </p>
+      </td>
+      <td>La méthode <code>enumerate</code> doit renvoyer un objet.</td>
+    </tr>
+    <tr>
+      <td>
+        {{jsxref("Objets_globaux/Proxy/handler/ownKeys", "handler.ownKeys()")}}
+      </td>
+      <td>
+        <p>
+          {{jsxref("Object.getOwnPropertyNames()")}}<br />{{jsxref("Object.getOwnPropertySymbols()")}}<br />{{jsxref("Object.keys()")}}<br />{{jsxref("Reflect.ownKeys()")}}
+        </p>
+      </td>
+      <td>
+        <p>
+          Le résultat de <code>ownKeys</code> est une liste.<br /><br />Le type
+          de chaque élément de la liste est soit une
+          {{jsxref("String")}} soit un  {{jsxref("Symbol")}}.<br /><br />La
+          liste résultatnte doit contenir les clés de toutes les propriétés
+          non-configurables de l'objet cible.<br /><br />Si l'objet cible n'est
+          pas extensible, la liste résultante doit contenir toutes les clés des
+          propriétés propres de l'objet cibles et aucune autre valeur.
+        </p>
+      </td>
+    </tr>
+    <tr>
+      <td>
+        {{jsxref("Objets_globaux/Proxy/handler/apply", "handler.apply()")}}
+      </td>
+      <td>
+        <p>
+          <code>proxy(..args)</code
+          ><br /><br />{{jsxref("Function.prototype.apply()")}} and
+          {{jsxref("Function.prototype.call()")}}<br /><br />{{jsxref("Reflect.apply()")}}
+        </p>
+      </td>
+      <td>
+        Il n'y a pas d'invariant pour la méthode <code>handler.apply</code>.
+      </td>
+    </tr>
+    <tr>
+      <td>
+        {{jsxref("Objets_globaux/Proxy/handler/construct", "handler.construct()")}}
+      </td>
+      <td>
+        <p>
+          <code>new proxy(...args)</code
+          ><br />{{jsxref("Reflect.construct()")}}
+        </p>
+      </td>
+      <td>Le résultat doit être un <code>Objet</code>.</td>
+    </tr>
+  </tbody>
+</table>
+
+## Proxies révocables
+
+La méthode {{jsxref("Proxy.revocable()")}} est utilisée pour créer un objet `Proxy` qui puisse être révoqué. Cela signifie que que le proxy pourra être révoqué avec la fonction `revoke` et arrêtera le proxy. Après cet arrêt, toute opération sur le proxy entraînera une exception {{jsxref("TypeError")}}.
+
+```js
+var revocable = Proxy.revocable({}, {
+  get: function(cible, nom) {
+    return "[[" + nom + "]]";
+  }
+});
+var proxy = revocable.proxy;
+console.log(proxy.toto); // "[[toto]]"
+
+revocable.revoke();
+
+console.log(proxy.toto); // déclenche une TypeError
+proxy.toto = 1;          // une TypeError encore
+delete proxy.toto;       // toujours une TypeError
+typeof proxy             // "object", typeof ne déclenche aucune trappe
+```
+
+## Réflexion
+
+{{jsxref("Reflect")}} est un objet natif qui fournit des méthodes pour les opérations JavaScript qui peuvent être interceptées. Ces méthodes sont les mêmes que celles gérées par les {{jsxref("Objets_globaux/Proxy/handler","gestionnaires de proxy","","true")}}. `Reflect` n'est pas un constructeur et ne peut pas être utilisé comme une fonction !
+
+`Reflect` aide à transférer les opérations par défaut depuis le gestionnaire vers la cible.
+
+Par exemple, avec {{jsxref("Reflect.has()")}}, on obtient le comportement de l'opérateur [`in`](/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_in) sous forme d'une fonction :
+
+```js
+Reflect.has(Object, "assign"); // true
+```
+
+{{PreviousNext("Web/JavaScript/Guide/iterateurs_et_generateurs","Web/JavaScript/Guide/Modules")}}
diff --git a/files/fr/web/javascript/guide/modules/index.html b/files/fr/web/javascript/guide/modules/index.html
deleted file mode 100644
index aab9361aa6..0000000000
--- a/files/fr/web/javascript/guide/modules/index.html
+++ /dev/null
@@ -1,432 +0,0 @@
----
-title: Les modules JavaScript
-slug: Web/JavaScript/Guide/Modules
-tags:
-  - Guide
-  - JavaScript
-  - Modules
-  - export
-  - import
-translation_of: Web/JavaScript/Guide/Modules
----
-<div>{{jsSidebar("JavaScript Guide")}}{{Previous("Web/JavaScript/Guide/Métaprogrammation")}}</div>
-
-<p>Ce guide aborde l'ensemble des notions vous permettant d'utiliser la syntaxe des modules en JavaScript.</p>
-
-<h2 id="Un_peu_de_contexte">Un peu de contexte</h2>
-
-<p>Les programmes JavaScript ont commencé par être assez petits, réalisant des tâches isolées uniquement là où l'interactivité était nécessaire. Après plusieurs années, nous avons maintenant des applications complètes qui sont exécutées dans les navigateurs avec des codes complexes et volumineux. Des programmes JavaScript sont également exécutés dans d'autres contextes (<a href="/fr/docs/Glossaire/Node.js">Node.js</a> par exemple).</p>
-
-<p>Il a donc été question de fournir un mécanisme pour diviser les programmes JavaScript en plusieurs modules qu'on pourrait importer les uns dans les autres. Cette fonctionnalité était présente dans Node.js depuis longtemps et plusieurs bibliothèques et <em>frameworks</em> JavaScript ont permis l'utilisation de modules (<a href="https://en.wikipedia.org/wiki/CommonJS">CommonJS</a>, <a href="https://github.com/amdjs/amdjs-api/blob/master/AMD.md">AMD</a>, <a href="https://requirejs.org/">RequireJS</a> ou, plus récemment, <a href="https://webpack.github.io/">Webpack</a> et <a href="https://babeljs.io/">Babel</a>).</p>
-
-<p>Bonne nouvelle, les navigateurs ont également commencé à prendre en charge ces fonctionnalités nativement. C'est le sujet de ce guide.</p>
-
-<p>Cette implémentation permettra aux navigateurs d'optimiser le chargement des modules, rendant le fonctionnement plus efficace qu'une bibliothèque tierce avec un traitement côté client des allers-retours sur le réseau.</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>L'utilisation des modules natifs JavaScript repose sur les instructions <code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/import">import</a></code> and <code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/export">export</a></code> dont vous pouvez voir l'état de la compatibilité ici :</p>
-
-<h3 id="import"><code>import</code></h3>
-
-<p>{{Compat("javascript.statements.import")}}</p>
-
-<h3 id="export"><code>export</code></h3>
-
-<p>{{Compat("javascript.statements.export")}}</p>
-
-<h2 id="Commençons_par_un_exemple">Commençons par un exemple</h2>
-
-<p>Pour illustrer le fonctionnement des modules, nous avons créé <a href="https://github.com/mdn/js-examples/tree/master/modules">un ensemble d'exemples disponibles sur GitHub</a>. Ces exemples illustrent un ensemble de modules pour créer un élément {{htmlelement("canvas")}} sur une page web puis dessiner (et afficher des informations) sur les différentes formes du canevas.</p>
-
-<p>Ces opérations sont assez simples mais nous les avons choisies pour nous concentrer plutôt sur le fonctionnement des modules.</p>
-
-<div class="note">
-<p><strong>Note :</strong> Si vous souhaitez télécharger les exemples et les exécuter en local, vous devrez utiliser un serveur web local.</p>
-</div>
-
-<h2 id="Structure_de_lexemple">Structure de l'exemple</h2>
-
-<p>Dans notre premier exemple (cf. <a href="https://github.com/mdn/js-examples/tree/master/modules/basic-modules">basic-modules</a>), nous avons l'arborescence de fichier suivante :</p>
-
-<pre>index.html
-main.mjs
-modules/
-    canvas.mjs
-    square.mjs</pre>
-
-<div class="note">
-<p><strong>Note :</strong> Tous les exemples de ce guide suivent la même structure.</p>
-</div>
-
-<p>Le répertoire dédié aux modules contient deux modules :</p>
-
-<ul>
- <li><code>canvas.mjs</code> — responsable de fonctions pour gérer le canevas
-
-  <ul>
-   <li><code>create()</code> — crée un canevas avec les dimensions souhaitées (<code>width</code> /  <code>height</code>) à l'intérieur d'un élément {{htmlelement("div")}} doté d'un identifiant et qui est ajouté à l'intérieur d'un élément indiqué. Cette fonction renvoie l'objet contenant le contexte du canevas et l'identifiant du conteneur.</li>
-   <li><code>createReportList()</code> — crée une liste non ordonnée à l'intérieur d'un élément indiqué et dans lequel on affiche des données. Cette fonction renvoie l'identifiant de la liste.</li>
-  </ul>
- </li>
- <li><code>square.mjs</code> :
-  <ul>
-   <li><code>name</code> — une constante qui est une chaîne de caractères : <code>"square"</code>.</li>
-   <li><code>draw()</code> — dessine un carré avec une taille/position/couleur données sur le canevas indiqué. Cette fonction renvoie un objet contenant la taille du carré, sa position et sa couleur.</li>
-   <li><code>reportArea()</code> — écrit la surface d'un carré dans une liste donnée en fonction de la longueur de son côté.</li>
-   <li><code>reportPerimeter()</code> — écrit le périmètre d'un carré dans une liste donnée en fonction de la longueur de son côté.</li>
-  </ul>
- </li>
-</ul>
-
-<div class="note">
-<p><strong>Note :</strong> Pour les modules JavaScript natifs, l'extension <code>.mjs</code> a son importance car elle permet d'importer des fichiers avec un type MIME <code>javascript/esm</code> (on pourra utiliser une autre extension qui fournira le type MIME <code>application/javascript</code>) afin d'éviter les erreurs liées à la vérification des types MIME. L'extension <code>.mjs</code> est notamment utile afin de distinguer plus clairement les scripts « classiques » des modules et pourra être exploitée par d'autres outils. Pour plus de détails, voir <a href="https://v8.dev/features/modules#mjs">cette note de Google</a>.</p>
-</div>
-
-<h2 id="Exporter_des_fonctionnalités">Exporter des fonctionnalités</h2>
-
-<p>Pour commencer et afin d'utiliser les fonctionnalités d'un module, on devra les exporter. Pour cela, on utilisera l'instruction <code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/export">export</a></code>.</p>
-
-<p>La méthode la plus simple consiste à placer cette instruction devant chaque valeur qu'on souhaite exporter, par exemple :</p>
-
-<pre class="brush: js">export const name = 'square';
-
-export function draw(ctx, length, x, y, color) {
-  ctx.fillStyle = color;
-  ctx.fillRect(x, y, length, length);
-
-  return {
-    length: length,
-    x: x,
-    y: y,
-    color: color
-  };
-}</pre>
-
-<p>Il est possible d'exporter des fonctions, des variables (qu'elles soient définies avec <code>var</code>, <code>let</code> ou <code>const</code>) et aussi des classes (que nous verrons par la suite). Les valeurs exportées doivent être présentes au plus haut niveau du script, il n'est pas possible d'utiliser <code>export</code> dans une fonction.</p>
-
-<p>Une méthode plus concise consiste à exporter l'ensemble des valeurs grâce à une seule instruction située à la fin du fichier : les valeurs sont séparées par des virgules et la liste est délimitée entre accolades :</p>
-
-<pre class="brush: js">export { name, draw, reportArea, reportPerimeter };</pre>
-
-<h2 id="Importer_des_fonctionnalités">Importer des fonctionnalités</h2>
-
-<p>Lorsque des fonctionnalités sont exportées par un premier module, on peut les importer dans un script afin de les utiliser. Voici la méthode la plus simple pour ce faire :</p>
-
-<pre class="brush: js">import { name, draw, reportArea, reportPerimeter } from './modules/square.mjs';</pre>
-
-<p>On utilise ici l'instruction <code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/import">import</a></code>, suivi d'une liste d'identifiants séparées par des virgules et délimitée par des accolades, suivie du mot-clé <code>from</code> puis du chemin vers le fichier du module. Le chemin est relatif à la racine du site. Dans notre cas, pour <code>basic-module</code>, on écrira <code>/js-examples/modules/basic-modules</code>.</p>
-
-<p>Ici, nous avons écrit le chemin d'une façon légèrement différente : on utilise le point (<code>.</code>) afin d'indiquer « l'emplacement courant », suivi du chemin vers le fichier. Cela permet d'éviter d'avoir à écrire l'intégralité du chemin à chaque fois, c'est aussi plus court et cela permet de déplacer le script et le modules sans avoir à modifier les scripts.</p>
-
-<p>Ainsi :</p>
-
-<pre>/js-examples/modules/basic-modules/modules/square.mjs</pre>
-
-<p>devient :</p>
-
-<pre>./modules/square.mjs</pre>
-
-<p>Vous pouvez voir ces lignes dans <code><a href="https://github.com/mdn/js-examples/blob/master/modules/basic-modules/main.js">main.mjs</a></code>.</p>
-
-<div class="note">
-<p><strong>Note :</strong> Pour certains systèmes de module, on peut omettre l'extension de fichier et le point (c'est-à-dire qu'on peut écrire <code>'/modules/square'</code>). Cela ne fonctionne pas pour les modules JavaScript !</p>
-</div>
-
-<p>Une fois les fonctionnalités importées dans le script, vous pouvez utiliser les valeurs dans votre script. Dans <code>main.mjs</code>, après les lignes d'import, on trouvera :</p>
-
-<pre class="brush: js">let myCanvas = create('myCanvas', document.body, 480, 320);
-let reportList = createReportList(myCanvas.id);
-
-let square1 = draw(myCanvas.ctx, 50, 50, 100, 'blue');
-reportArea(square1.length, reportList);
-reportPerimeter(square1.length, reportList);
-</pre>
-
-<h2 id="Charger_le_module_via_le_document_HTML">Charger le module via le document HTML</h2>
-
-<p>Il faut ensuite pouvoir charger le script <code>main.mjs</code> sur la page HTML. Pour cela, nous allons voir qu'il y a quelques différences avec le chargement d'un script « classique ».</p>
-
-<p>Tout d'abord, il est nécessaire d'indiquer <code>type="module"</code> dans l'élément {{htmlelement("script")}} afin d'indiquer qu'on charge des modules :</p>
-
-<pre class="brush: js">&lt;script type="module" src="main.mjs"&gt;&lt;/script&gt;</pre>
-
-<p>Le script qu'on importe ici agit comme le module de plus haut niveau. Si on oublie ce type, Firefox déclenchera une erreur "<em>SyntaxError: import declarations may only appear at top level of a module</em>".</p>
-
-<p>Les instructions <code>import</code> et <code>export</code> ne peuvent être utilisées qu'à l'intérieur de modules et pas à l'intérieur de scripts « classiques ».</p>
-
-<div class="note">
-<p><strong>Note :</strong> Il est aussi possible d'importer des modules dans des scripts qui sont déclarés en incise si on indique bien <code>type="module"</code>. On pourra donc écrire <code>&lt;script type="module"&gt; //code du script utilisant les modules ici &lt;/script&gt;</code>.</p>
-</div>
-
-<h2 id="Différences_entre_les_modules_et_les_scripts_«_classiques_»">Différences entre les modules et les scripts « classiques »</h2>
-
-<ul>
- <li>Attention aux tests sur un environnement local : 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 <code>file://</code>), vous rencontrerez des erreurs CORS pour des raisons de sécurité. Il faut donc un serveur local afin de pouvoir tester.</li>
- <li>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 <a href="/fr/docs/Web/JavaScript/Reference/Strict_mode">le mode strict</a>.</li>
- <li>Il n'est pas nécessaire d'utiliser l'attribut <code>defer</code> (voir <a href="/fr/docs/Web/HTML/Element/script#Attributs">les attributs de <code>&lt;script&gt;</code></a>) lors du chargement d'un module, ceux-ci sont automatiquement chargés à la demande.</li>
- <li>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.</li>
-</ul>
-
-<h2 id="Exports_par_défaut_et_exports_nommés">Exports par défaut et exports nommés</h2>
-
-<p>Jusqu'à présent, nous avons utilisé des <strong>exports nommés</strong> — chaque valeur est exportée avec un nom et c'est ce nom qui est également utilisé lorsqu'on réalise l'import.</p>
-
-<p>Il existe également un <strong>export par défaut</strong> — conçu pour simplifier l'export d'une fonction par module et pour faciliter l'interopérabilité avec les systèmes de module CommonJS et AMD (pour plus d'informations, voir <a href="https://tech.mozfr.org/post/2015/08/21/ES6-en-details-%3A-les-modules">ES6 en détails : les modules</a>).</p>
-
-<p>Prenons un exemple pour comprendre le fonctionnement des exports par défaut. Dans <code>square.mjs</code>, on a une fonction intitulée <code>randomSquare()</code> qui crée un carré avec une taille/couleur/position aléatoires. On souhaite exporter cette fonction par défaut et on écrit donc ceci à la fin du fichier :</p>
-
-<pre class="brush: js">export default randomSquare;</pre>
-
-<p>On notera ici l'absence d'accolades.</p>
-
-<p>On aurait également pu ajouter <code>export default</code> devant le mot-clé <code>function</code> et la définir comme fonction anonyme :</p>
-
-<pre class="brush: js">export default function(ctx) {
-  ...
-}</pre>
-
-<p>Dans le fichier <code>main.mjs</code>, on importe la fonction par défaut avec cette ligne</p>
-
-<pre class="brush: js">import randomSquare from './modules/square.mjs';</pre>
-
-<p>On voit ici aussi l'absence d'accolade car il n'y a qu'un seul export par défaut possible par module (et ici, on sait qu'il s'agit de <code>randomSquare</code>). La ligne ci-avant est en fait une notation raccourcie équivalente à :</p>
-
-<pre class="brush: js">import {default as randomSquare} from './modules/square.mjs';</pre>
-
-<div class="note">
-<p><strong>Note :</strong> Pour en savoir plus sur le renommage des objets exportés, voir ci-après {{anch("Renommage des imports et des exports")}}.</p>
-</div>
-
-<h2 id="Gestion_des_conflits_de_nommage">Gestion des conflits de nommage</h2>
-
-<p>Jusqu'à présent, notre exemple fonctionne. Mais que se passerait-il si nous ajoutions un module permettant de dessiner une autre forme comme un cercle ou un triangle ? Ces formes disposeraient sans doute également de fonctions telles que <code>draw()</code>, <code>reportArea()</code>, etc. Si on essaie d'importer ces fonctions avec les mêmes noms dans le module de plus haut niveau, nous allons avoir des conflits et des erreurs.</p>
-
-<p>Heureusement, il existe différentes façons de résoudre ce problème.</p>
-
-<h3 id="Renommage_des_imports_et_des_exports">Renommage des imports et des exports</h3>
-
-<p>Entre les accolades utilisées pour les instructions <code>import</code> et <code>export</code>, on peut utiliser le mot-clé <code>as</code> avec un autre nom afin de modifier le nom par lequel on souhaite identifier la fonctionnalité.</p>
-
-<p>Ainsi, les deux fragments qui suivent permettraient d'obtenir le même résultat de façons différentes :</p>
-
-<pre class="brush: js">// dans module.mjs
-export {
-  fonction1 as nouveauNomDeFonction,
-  fonction2 as autreNouveauNomDeFonction
-};
-
-// dans main.mjs
-import { nouveauNomDeFonction, autreNouveauNomDeFonction } from './modules/module.mjs';</pre>
-
-<pre class="brush: js">// dans module.mjs
-export { fonction1, fonction2 };
-
-// dans main.mjs
-import { fonction1 as nouveauNomDeFonction,
-         fonction2 as autreNouveauNomDeFonction } from './modules/module.mjs';</pre>
-
-<p>Prenons un exemple concret. Dans le répertoire <code><a href="https://github.com/mdn/js-examples/tree/master/modules/renaming">renaming</a></code>, vous verrez le même système de modules que précédemment auquel nous avons ajouté <code>circle.mjs</code> et <code>triangle.mjs</code> afin de dessiner et d'écrire des informations sur des cercles et des triangles.</p>
-
-<p>Dans chaque module, on exporte les fonctionnalités avec des noms identiques : l'instruction  <code>export</code> utilisée est la même à chaque fin de fichier :</p>
-
-<pre class="brush: js">export { name, draw, reportArea, reportPerimeter };</pre>
-
-<p>Lorsqu'on importe les valeurs dans <code>main.mjs</code>, si on essaie d'utiliser</p>
-
-<pre class="brush: js">import { name, draw, reportArea, reportPerimeter } from './modules/square.mjs';
-import { name, draw, reportArea, reportPerimeter } from './modules/circle.mjs';
-import { name, draw, reportArea, reportPerimeter } from './modules/triangle.mjs';</pre>
-
-<p>Le navigateur déclenchera une erreur telle que "<em>SyntaxError: redeclaration of import name</em>" (Firefox).</p>
-
-<p>Pour éviter ce problème, on renomme les imports afin qu'ils soient uniques :</p>
-
-<pre class="brush: js">import { name as squareName,
-         draw as drawSquare,
-         reportArea as reportSquareArea,
-         reportPerimeter as reportSquarePerimeter } from './modules/square.mjs';
-
-import { name as circleName,
-         draw as drawCircle,
-         reportArea as reportCircleArea,
-         reportPerimeter as reportCirclePerimeter } from './modules/circle.mjs';
-
-import { name as triangleName,
-        draw as drawTriangle,
-        reportArea as reportTriangleArea,
-        reportPerimeter as reportTrianglePerimeter } from './modules/triangle.mjs';</pre>
-
-<p>On aurait pu également résoudre le problème dans les fichiers de chaque module.</p>
-
-<pre class="brush: js">// dans square.mjs
-export { name as squareName,
-         draw as drawSquare,
-         reportArea as reportSquareArea,
-         reportPerimeter as reportSquarePerimeter };</pre>
-
-<pre class="brush: js">// dans main.mjs
-import { squareName, drawSquare, reportSquareArea, reportSquarePerimeter } from './modules/square.mjs';</pre>
-
-<p>Les deux approches fonctionnent. C'est à vous de choisir le style. Toutefois, il est souvent plus pratique d'effectuer le renommage à l'import, notamment lorsqu'on importe des fonctionnalités de modules tiers sur lesquels on n'a pas le contrôle.</p>
-
-<h3 id="Créer_un_objet_module">Créer un objet module</h3>
-
-<p>La méthode précédente fonctionne mais reste « brouillonne ». Pour faire mieux, on peut importer l'ensemble des fonctionnalités de chaque module dans un objet, de la façon suivante :</p>
-
-<pre class="brush: js">import * as Module from './modules/module.mjs';</pre>
-
-<p>Cela récupère tous les exports disponibles depuis <code>module.mjs</code> et les transforme en propriétés et méthodes rattachées à l'objet <code>Module</code> qui fournit alors un espace de noms (<em>namespace</em>) :</p>
-
-<pre class="brush: js">Module.function1()
-Module.function2()
-etc.</pre>
-
-<p>Là encore, prenons un exemple concret avec le répertoire <a href="https://github.com/mdn/js-examples/tree/master/modules/module-objects">module-objects</a>. Il s'agit du même exemple que précédemment mais qui a été réécrit afin de tirer parti de cette syntaxe. Dans les modules, les exports sont tous écrits ainsi :</p>
-
-<pre class="brush: js">export { name, draw, reportArea, reportPerimeter };</pre>
-
-<p>En revanche, pour les imports, on les récupère ainsi :</p>
-
-<pre class="brush: js">import * as Canvas from './modules/canvas.mjs';
-
-import * as Square from './modules/square.mjs';
-import * as Circle from './modules/circle.mjs';
-import * as Triangle from './modules/triangle.mjs';</pre>
-
-<p>Dans chaque cas, on peut accéder aux imports comme propriétés des objets ainsi créés :</p>
-
-<pre class="brush: js">let square1 = Square.draw(myCanvas.ctx, 50, 50, 100, 'blue');
-Square.reportArea(square1.length, reportList);
-Square.reportPerimeter(square1.length, reportList);</pre>
-
-<p>On obtient alors un code plus lisible.</p>
-
-<h2 id="Classes_et_modules">Classes et modules</h2>
-
-<p>Comme mentionné avant, il est possible d'importer et d'exporter des classes. Cette méthode peut aussi être utilisée afin d'éviter les conflits de nommage. Elle s'avère notamment utile lorsque vous utilisez déjà des classes pour construire vos objets (cela permet de garder une certaine cohérence dans le style).</p>
-
-<p>Pour voir le résultat obtenu, vous pouvez consulter le répertoire <a href="https://github.com/mdn/js-examples/tree/master/modules/classes">classes</a> du dépôt où l'ensemble a été réécrit pour tirer parti des classes ECMAScript. Ainsi, <code><a href="https://github.com/mdn/js-examples/blob/master/modules/classes/modules/square.js">square.mjs</a></code> contient désormais l'ensemble des fonctionnalités via une classe :</p>
-
-<pre class="brush: js">class Square {
-  constructor(ctx, listId, length, x, y, color) {
-    ...
-  }
-
-  draw() {
-    ...
-  }
-
-  ...
-}</pre>
-
-<p>Il suffit d'exporter cette classe :</p>
-
-<pre class="brush: js">export { Square };</pre>
-
-<p>Puis de l'importer ainsi dans <code><a href="https://github.com/mdn/js-examples/blob/master/modules/classes/main.js">main.mjs</a></code> :</p>
-
-<pre class="brush: js">import { Square } from './modules/square.mjs';</pre>
-
-<p>Ensuite, on peut utiliser cette classe afin de dessiner le carré :</p>
-
-<pre class="brush: js">let square1 = new Square(myCanvas.ctx, myCanvas.listId, 50, 50, 100, 'blue');
-square1.draw();
-square1.reportArea();
-square1.reportPerimeter();</pre>
-
-<h2 id="Agréger_des_modules">Agréger des modules</h2>
-
-<p>Il arrivera qu'on veuille agréger des modules entre eux. On peut avoir plusieurs niveaux de dépendances et vouloir simplifier les choses en combinant différents sous-modules en un seul module parent. Pour cela, on pourra utiliser la notation raccourcie suivante :</p>
-
-<pre class="brush: js">export * from 'x.mjs'
-export { name } from 'x.mjs'</pre>
-
-<p>Pour voir cela en pratique, vous pouvez consulter le répertoire <a href="https://github.com/mdn/js-examples/tree/master/modules/module-aggregation">module-aggregation</a>. Dans cet exemple (construit sur le précédent qui utilise les classes), on a un module supplémentaire intitulé <code>shapes.mjs</code> qui agrège les fonctionnalités fournies par <code>circle.mjs</code>, <code>square.mjs</code> et <code>triangle.mjs</code>. Les sous-modules ont également été déplacés dans un répertoire <code>shapes</code> situé dans un répertoire <code>modules</code>. L'arborescence utilisée est donc :</p>
-
-<pre>modules/
-  canvas.mjs
-  shapes.mjs
-  shapes/
-    circle.mjs
-    square.mjs
-    triangle.mjs</pre>
-
-<p>Dans chaque sous-module, l'export aura la même forme :</p>
-
-<pre class="brush: js">export { Square };</pre>
-
-<p>Pour l'agrégation au sein de <code><a href="https://github.com/mdn/js-examples/blob/master/modules/module-aggregation/modules/shapes.js">shapes.mjs</a></code>, on écrit les lignes suivantes :</p>
-
-<pre class="brush: js">export { Square } from './shapes/square.mjs';
-export { Triangle } from './shapes/triangle.mjs';
-export { Circle } from './shapes/circle.mjs';</pre>
-
-<p>On récupère ainsi l'ensemble des exports de chaque module et on les rend disponibles via <code>shapes.mjs</code>.</p>
-
-<div class="note">
-<p><strong>Note :</strong> Cette notation ne permet que de rediriger les exports via le fichier. Les objets importés/exportés n'existent pas vraiment dans <code>shapes.mjs</code> et on ne peut donc pas écrire de code <em>utile</em> qui les manipule.</p>
-</div>
-
-<p>Dans le fichier <code>main.mjs</code>, on pourra alors remplacer :</p>
-
-<pre class="brush: js">import { Square } from './modules/square.mjs';
-import { Circle } from './modules/circle.mjs';
-import { Triangle } from './modules/triangle.mjs';</pre>
-
-<p>par :</p>
-
-<pre class="brush: js">import { Square, Circle, Triangle } from './modules/shapes.mjs';</pre>
-
-<h2 id="Chargement_dynamique_de_modules">Chargement dynamique de modules</h2>
-
-<p>Cette nouvelle fonctionnalité permet aux navigateurs de charger les modules lorsqu'ils sont nécessaires plutôt que de tout précharger en avance de phase. Cette méthode offre de nombreux avantages quant aux performances. Voyons comment cela fonctionne.</p>
-
-<p>Pour utiliser cette fonctionnalité, on pourra utiliser <code>import()</code> comme une fonction et lui passer le chemin du module en argument. Cette fonction renverra <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise">une promesse</a>, qui sera résolue en un module objet donnant accès aux exports.</p>
-
-<pre class="brush: js">import('./modules/monModule.mjs')
-  .then((module) =&gt; {
-    // Faire qqc avec le module.
-  });</pre>
-
-<p>Dans nos exemples, regardons le répertoire <a href="https://github.com/mdn/js-examples/tree/master/modules/dynamic-module-imports">dynamic-module-imports</a>, également basé sur les classes. Cette fois, on ne dessine rien au chargement de l'exemple mais on ajoute trois boutons — "Circle", "Square" et "Triangle" — qui, lorsqu'ils seront utilisés, chargeront dynamiquement les modules nécessaires et les utiliseront pour charger la forme associée.</p>
-
-<p>Dans cet exemple, nous avons uniquement modifié <a href="https://github.com/mdn/js-examples/blob/master/modules/dynamic-module-imports/index.html">index.html</a> et <a href="https://github.com/mdn/js-examples/blob/master/modules/dynamic-module-imports/main.js">main.js</a> — les exports restent les mêmes.</p>
-
-<p>Dans <code>main.js</code>, on récupère une référence à chaque bouton en utilisant <code><a href="/fr/docs/Web/API/Document/querySelector">document.querySelector()</a></code>. Par exemple :</p>
-
-<pre class="brush: js">let squareBtn = document.querySelector('.square');</pre>
-
-<p>Ensuite, on attache un gestionnaire d'évènement à chaque bouton afin qu'on puisse appuyer dessus. Le module correspondant est alors chargé dynamiquement et utilisé pour dessiner la forme :</p>
-
-<pre class="brush: js">squareBtn.addEventListener('click', () =&gt; {
-  import('./modules/square.mjs').then((Module) =&gt; {
-    let square1 = new Module.Square(myCanvas.ctx, myCanvas.listId, 50, 50, 100, 'blue');
-    square1.draw();
-    square1.reportArea();
-    square1.reportPerimeter();
-  })
-});</pre>
-
-<p>On voit ici que, parce que la promesse renvoie un objet module à la résolution, la classe est une propriété de cet objet et qu'il faut ajouter cet espace de nom devant le constructeur exporté pour l'utiliser. Autrement dit, avec cette méthode, on doit ajouter <code>Module.</code> devant <code>Square</code> (plutôt que d'utiliser uniquement <code>Square</code>).</p>
-
-<h2 id="Diagnostiquer_les_problèmes_avec_les_modules">Diagnostiquer les problèmes avec les modules</h2>
-
-<p>Voici quelques notes pour aider à comprendre et à diagnostiquer les problèmes parfois rencontrés avec les modules. N'hésitez pas à ajouter vos conseils à cette liste si vous en avez.</p>
-
-<ul>
- <li>Comme indiqué ci-avant, les fichiers <code>.mjs</code> doivent être chargés avec le type MIME <code>javascript/esm</code> (ou avec un autre type MIME compatible JavaScript tel que <code>application/javascript</code>), sinon on aura une erreur lors de la vérification du type MIME.</li>
- <li>Si on essaie de charger des fichiers HTML en local à l'aide d'une URL <code>file://</code>, on aura des erreurs CORS relatives à la sécurité. Pour tester les modules, on doit donc mettre en place un serveur (ou, par exemple, utiliser les pages GitHub).</li>
- <li><code>.mjs</code> est une extension relativement récente et certains systèmes d'exploitation ne la reconnaîtront pas et/ou tenteront de la remplacer (ex. macOS pourra silencieusement ajouter un <code>.js</code> après le <code>.mjs</code>). Dans ce cas, afficher les extensions de tous les fichiers par défaut pourra permettre de vérifier.</li>
-</ul>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="https://tech.mozfr.org/post/2018/04/06/Une-plongee-illustree-dans-les-modules-ECMAScript">Une plongée illustrée dans les modules ECMAScript</a></li>
- <li><a href="https://tech.mozfr.org/post/2015/08/21/ES6-en-details-%3A-les-modules">ES6 en détails : les modules</a></li>
- <li><a href="https://developers.google.com/web/fundamentals/primers/modules#mjs">Utiliser les modules JavaScript sur le Web</a>, un article par Addy Osmani et Mathias Bynens (en anglais)</li>
- <li>Livre de Axel Rauschmayer (en anglais) : <a href="http://exploringjs.com/es6/ch_modules.html">Exploring JS: Modules</a></li>
-</ul>
-
-<p>{{Previous("Web/JavaScript/Guide/Métaprogrammation")}}</p>
diff --git a/files/fr/web/javascript/guide/modules/index.md b/files/fr/web/javascript/guide/modules/index.md
new file mode 100644
index 0000000000..1411ef6c26
--- /dev/null
+++ b/files/fr/web/javascript/guide/modules/index.md
@@ -0,0 +1,471 @@
+---
+title: Les modules JavaScript
+slug: Web/JavaScript/Guide/Modules
+tags:
+  - Guide
+  - JavaScript
+  - Modules
+  - export
+  - import
+translation_of: Web/JavaScript/Guide/Modules
+---
+{{jsSidebar("JavaScript Guide")}}{{Previous("Web/JavaScript/Guide/Métaprogrammation")}}
+
+Ce guide aborde l'ensemble des notions vous permettant d'utiliser la syntaxe des modules en JavaScript.
+
+## Un peu de contexte
+
+Les programmes JavaScript ont commencé par être assez petits, réalisant des tâches isolées uniquement là où l'interactivité était nécessaire. Après plusieurs années, nous avons maintenant des applications complètes qui sont exécutées dans les navigateurs avec des codes complexes et volumineux. Des programmes JavaScript sont également exécutés dans d'autres contextes ([Node.js](/fr/docs/Glossaire/Node.js) par exemple).
+
+Il a donc été question de fournir un mécanisme pour diviser les programmes JavaScript en plusieurs modules qu'on pourrait importer les uns dans les autres. Cette fonctionnalité était présente dans Node.js depuis longtemps et plusieurs bibliothèques et _frameworks_ JavaScript ont permis l'utilisation de modules ([CommonJS](https://en.wikipedia.org/wiki/CommonJS), [AMD](https://github.com/amdjs/amdjs-api/blob/master/AMD.md), [RequireJS](https://requirejs.org/) ou, plus récemment, [Webpack](https://webpack.github.io/) et [Babel](https://babeljs.io/)).
+
+Bonne nouvelle, les navigateurs ont également commencé à prendre en charge ces fonctionnalités nativement. C'est le sujet de ce guide.
+
+Cette implémentation permettra aux navigateurs d'optimiser le chargement des modules, rendant le fonctionnement plus efficace qu'une bibliothèque tierce avec un traitement côté client des allers-retours sur le réseau.
+
+## Compatibilité des navigateurs
+
+L'utilisation des modules natifs JavaScript repose sur les instructions [`import`](/fr/docs/Web/JavaScript/Reference/Instructions/import) and [`export`](/fr/docs/Web/JavaScript/Reference/Instructions/export) dont vous pouvez voir l'état de la compatibilité ici :
+
+### `import`
+
+{{Compat("javascript.statements.import")}}
+
+### `export`
+
+{{Compat("javascript.statements.export")}}
+
+## Commençons par un exemple
+
+Pour illustrer le fonctionnement des modules, nous avons créé [un ensemble d'exemples disponibles sur GitHub](https://github.com/mdn/js-examples/tree/master/modules). Ces exemples illustrent un ensemble de modules pour créer un élément {{htmlelement("canvas")}} sur une page web puis dessiner (et afficher des informations) sur les différentes formes du canevas.
+
+Ces opérations sont assez simples mais nous les avons choisies pour nous concentrer plutôt sur le fonctionnement des modules.
+
+> **Note :** Si vous souhaitez télécharger les exemples et les exécuter en local, vous devrez utiliser un serveur web local.
+
+## Structure de l'exemple
+
+Dans notre premier exemple (cf. [basic-modules](https://github.com/mdn/js-examples/tree/master/modules/basic-modules)), nous avons l'arborescence de fichier suivante :
+
+    index.html
+    main.mjs
+    modules/
+        canvas.mjs
+        square.mjs
+
+> **Note :** Tous les exemples de ce guide suivent la même structure.
+
+Le répertoire dédié aux modules contient deux modules :
+
+- `canvas.mjs` — responsable de fonctions pour gérer le canevas
+
+  - `create()` — crée un canevas avec les dimensions souhaitées (`width` /  `height`) à l'intérieur d'un élément {{htmlelement("div")}} doté d'un identifiant et qui est ajouté à l'intérieur d'un élément indiqué. Cette fonction renvoie l'objet contenant le contexte du canevas et l'identifiant du conteneur.
+  - `createReportList()` — crée une liste non ordonnée à l'intérieur d'un élément indiqué et dans lequel on affiche des données. Cette fonction renvoie l'identifiant de la liste.
+
+- `square.mjs` :
+
+  - `name` — une constante qui est une chaîne de caractères : `"square"`.
+  - `draw()` — dessine un carré avec une taille/position/couleur données sur le canevas indiqué. Cette fonction renvoie un objet contenant la taille du carré, sa position et sa couleur.
+  - `reportArea()` — écrit la surface d'un carré dans une liste donnée en fonction de la longueur de son côté.
+  - `reportPerimeter()` — écrit le périmètre d'un carré dans une liste donnée en fonction de la longueur de son côté.
+
+> **Note :** Pour les modules JavaScript natifs, l'extension `.mjs` a son importance car elle permet d'importer des fichiers avec un type MIME `javascript/esm` (on pourra utiliser une autre extension qui fournira le type MIME `application/javascript`) afin d'éviter les erreurs liées à la vérification des types MIME. L'extension `.mjs` est notamment utile afin de distinguer plus clairement les scripts « classiques » des modules et pourra être exploitée par d'autres outils. Pour plus de détails, voir [cette note de Google](https://v8.dev/features/modules#mjs).
+
+## Exporter des fonctionnalités
+
+Pour commencer et afin d'utiliser les fonctionnalités d'un module, on devra les exporter. Pour cela, on utilisera l'instruction [`export`](/fr/docs/Web/JavaScript/Reference/Instructions/export).
+
+La méthode la plus simple consiste à placer cette instruction devant chaque valeur qu'on souhaite exporter, par exemple :
+
+```js
+export const name = 'square';
+
+export function draw(ctx, length, x, y, color) {
+  ctx.fillStyle = color;
+  ctx.fillRect(x, y, length, length);
+
+  return {
+    length: length,
+    x: x,
+    y: y,
+    color: color
+  };
+}
+```
+
+Il est possible d'exporter des fonctions, des variables (qu'elles soient définies avec `var`, `let` ou `const`) et aussi des classes (que nous verrons par la suite). Les valeurs exportées doivent être présentes au plus haut niveau du script, il n'est pas possible d'utiliser `export` dans une fonction.
+
+Une méthode plus concise consiste à exporter l'ensemble des valeurs grâce à une seule instruction située à la fin du fichier : les valeurs sont séparées par des virgules et la liste est délimitée entre accolades :
+
+```js
+export { name, draw, reportArea, reportPerimeter };
+```
+
+## Importer des fonctionnalités
+
+Lorsque des fonctionnalités sont exportées par un premier module, on peut les importer dans un script afin de les utiliser. Voici la méthode la plus simple pour ce faire :
+
+```js
+import { name, draw, reportArea, reportPerimeter } from './modules/square.mjs';
+```
+
+On utilise ici l'instruction [`import`](/fr/docs/Web/JavaScript/Reference/Instructions/import), suivi d'une liste d'identifiants séparées par des virgules et délimitée par des accolades, suivie du mot-clé `from` puis du chemin vers le fichier du module. Le chemin est relatif à la racine du site. Dans notre cas, pour `basic-module`, on écrira `/js-examples/modules/basic-modules`.
+
+Ici, nous avons écrit le chemin d'une façon légèrement différente : on utilise le point (`.`) afin d'indiquer « l'emplacement courant », suivi du chemin vers le fichier. Cela permet d'éviter d'avoir à écrire l'intégralité du chemin à chaque fois, c'est aussi plus court et cela permet de déplacer le script et le modules sans avoir à modifier les scripts.
+
+Ainsi :
+
+    /js-examples/modules/basic-modules/modules/square.mjs
+
+devient :
+
+    ./modules/square.mjs
+
+Vous pouvez voir ces lignes dans [`main.mjs`](https://github.com/mdn/js-examples/blob/master/modules/basic-modules/main.js).
+
+> **Note :** Pour certains systèmes de module, on peut omettre l'extension de fichier et le point (c'est-à-dire qu'on peut écrire `'/modules/square'`). Cela ne fonctionne pas pour les modules JavaScript !
+
+Une fois les fonctionnalités importées dans le script, vous pouvez utiliser les valeurs dans votre script. Dans `main.mjs`, après les lignes d'import, on trouvera :
+
+```js
+let myCanvas = create('myCanvas', document.body, 480, 320);
+let reportList = createReportList(myCanvas.id);
+
+let square1 = draw(myCanvas.ctx, 50, 50, 100, 'blue');
+reportArea(square1.length, reportList);
+reportPerimeter(square1.length, reportList);
+```
+
+## Charger le module via le document HTML
+
+Il faut ensuite pouvoir charger le script `main.mjs` sur la page HTML. Pour cela, nous allons voir qu'il y a quelques différences avec le chargement d'un script « classique ».
+
+Tout d'abord, il est nécessaire d'indiquer `type="module"` dans l'élément {{htmlelement("script")}} afin d'indiquer qu'on charge des modules :
+
+```js
+<script type="module" src="main.mjs"></script>
+```
+
+Le script qu'on importe ici agit comme le module de plus haut niveau. Si on oublie ce type, Firefox déclenchera une erreur "_SyntaxError: import declarations may only appear at top level of a module_".
+
+Les instructions `import` et `export` ne peuvent être utilisées qu'à l'intérieur de modules et pas à l'intérieur de scripts « classiques ».
+
+> **Note :** Il est aussi possible d'importer des modules dans des scripts qui sont déclarés en incise si on indique bien `type="module"`. On pourra donc écrire `<script type="module"> //code du script utilisant les modules ici </script>`.
+
+## Différences entre les modules et les scripts « classiques »
+
+- Attention aux tests sur un environnement local : 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.
+- 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.
+
+## Exports par défaut et exports nommés
+
+Jusqu'à présent, nous avons utilisé des **exports nommés** — chaque valeur est exportée avec un nom et c'est ce nom qui est également utilisé lorsqu'on réalise l'import.
+
+Il existe également un **export par défaut** — conçu pour simplifier l'export d'une fonction par module et pour faciliter l'interopérabilité avec les systèmes de module CommonJS et AMD (pour plus d'informations, voir [ES6 en détails : les modules](https://tech.mozfr.org/post/2015/08/21/ES6-en-details-%3A-les-modules)).
+
+Prenons un exemple pour comprendre le fonctionnement des exports par défaut. Dans `square.mjs`, on a une fonction intitulée `randomSquare()` qui crée un carré avec une taille/couleur/position aléatoires. On souhaite exporter cette fonction par défaut et on écrit donc ceci à la fin du fichier :
+
+```js
+export default randomSquare;
+```
+
+On notera ici l'absence d'accolades.
+
+On aurait également pu ajouter `export default` devant le mot-clé `function` et la définir comme fonction anonyme :
+
+```js
+export default function(ctx) {
+  ...
+}
+```
+
+Dans le fichier `main.mjs`, on importe la fonction par défaut avec cette ligne
+
+```js
+import randomSquare from './modules/square.mjs';
+```
+
+On voit ici aussi l'absence d'accolade car il n'y a qu'un seul export par défaut possible par module (et ici, on sait qu'il s'agit de `randomSquare`). La ligne ci-avant est en fait une notation raccourcie équivalente à :
+
+```js
+import {default as randomSquare} from './modules/square.mjs';
+```
+
+> **Note :** Pour en savoir plus sur le renommage des objets exportés, voir ci-après {{anch("Renommage des imports et des exports")}}.
+
+## Gestion des conflits de nommage
+
+Jusqu'à présent, notre exemple fonctionne. Mais que se passerait-il si nous ajoutions un module permettant de dessiner une autre forme comme un cercle ou un triangle ? Ces formes disposeraient sans doute également de fonctions telles que `draw()`, `reportArea()`, etc. Si on essaie d'importer ces fonctions avec les mêmes noms dans le module de plus haut niveau, nous allons avoir des conflits et des erreurs.
+
+Heureusement, il existe différentes façons de résoudre ce problème.
+
+### Renommage des imports et des exports
+
+Entre les accolades utilisées pour les instructions `import` et `export`, on peut utiliser le mot-clé `as` avec un autre nom afin de modifier le nom par lequel on souhaite identifier la fonctionnalité.
+
+Ainsi, les deux fragments qui suivent permettraient d'obtenir le même résultat de façons différentes :
+
+```js
+// dans module.mjs
+export {
+  fonction1 as nouveauNomDeFonction,
+  fonction2 as autreNouveauNomDeFonction
+};
+
+// dans main.mjs
+import { nouveauNomDeFonction, autreNouveauNomDeFonction } from './modules/module.mjs';
+```
+
+```js
+// dans module.mjs
+export { fonction1, fonction2 };
+
+// dans main.mjs
+import { fonction1 as nouveauNomDeFonction,
+         fonction2 as autreNouveauNomDeFonction } from './modules/module.mjs';
+```
+
+Prenons un exemple concret. Dans le répertoire [`renaming`](https://github.com/mdn/js-examples/tree/master/modules/renaming), vous verrez le même système de modules que précédemment auquel nous avons ajouté `circle.mjs` et `triangle.mjs` afin de dessiner et d'écrire des informations sur des cercles et des triangles.
+
+Dans chaque module, on exporte les fonctionnalités avec des noms identiques : l'instruction  `export` utilisée est la même à chaque fin de fichier :
+
+```js
+export { name, draw, reportArea, reportPerimeter };
+```
+
+Lorsqu'on importe les valeurs dans `main.mjs`, si on essaie d'utiliser
+
+```js
+import { name, draw, reportArea, reportPerimeter } from './modules/square.mjs';
+import { name, draw, reportArea, reportPerimeter } from './modules/circle.mjs';
+import { name, draw, reportArea, reportPerimeter } from './modules/triangle.mjs';
+```
+
+Le navigateur déclenchera une erreur telle que "_SyntaxError: redeclaration of import name_" (Firefox).
+
+Pour éviter ce problème, on renomme les imports afin qu'ils soient uniques :
+
+```js
+import { name as squareName,
+         draw as drawSquare,
+         reportArea as reportSquareArea,
+         reportPerimeter as reportSquarePerimeter } from './modules/square.mjs';
+
+import { name as circleName,
+         draw as drawCircle,
+         reportArea as reportCircleArea,
+         reportPerimeter as reportCirclePerimeter } from './modules/circle.mjs';
+
+import { name as triangleName,
+        draw as drawTriangle,
+        reportArea as reportTriangleArea,
+        reportPerimeter as reportTrianglePerimeter } from './modules/triangle.mjs';
+```
+
+On aurait pu également résoudre le problème dans les fichiers de chaque module.
+
+```js
+// dans square.mjs
+export { name as squareName,
+         draw as drawSquare,
+         reportArea as reportSquareArea,
+         reportPerimeter as reportSquarePerimeter };
+```
+
+```js
+// dans main.mjs
+import { squareName, drawSquare, reportSquareArea, reportSquarePerimeter } from './modules/square.mjs';
+```
+
+Les deux approches fonctionnent. C'est à vous de choisir le style. Toutefois, il est souvent plus pratique d'effectuer le renommage à l'import, notamment lorsqu'on importe des fonctionnalités de modules tiers sur lesquels on n'a pas le contrôle.
+
+### Créer un objet module
+
+La méthode précédente fonctionne mais reste « brouillonne ». Pour faire mieux, on peut importer l'ensemble des fonctionnalités de chaque module dans un objet, de la façon suivante :
+
+```js
+import * as Module from './modules/module.mjs';
+```
+
+Cela récupère tous les exports disponibles depuis `module.mjs` et les transforme en propriétés et méthodes rattachées à l'objet `Module` qui fournit alors un espace de noms (_namespace_) :
+
+```js
+Module.function1()
+Module.function2()
+etc.
+```
+
+Là encore, prenons un exemple concret avec le répertoire [module-objects](https://github.com/mdn/js-examples/tree/master/modules/module-objects). Il s'agit du même exemple que précédemment mais qui a été réécrit afin de tirer parti de cette syntaxe. Dans les modules, les exports sont tous écrits ainsi :
+
+```js
+export { name, draw, reportArea, reportPerimeter };
+```
+
+En revanche, pour les imports, on les récupère ainsi :
+
+```js
+import * as Canvas from './modules/canvas.mjs';
+
+import * as Square from './modules/square.mjs';
+import * as Circle from './modules/circle.mjs';
+import * as Triangle from './modules/triangle.mjs';
+```
+
+Dans chaque cas, on peut accéder aux imports comme propriétés des objets ainsi créés :
+
+```js
+let square1 = Square.draw(myCanvas.ctx, 50, 50, 100, 'blue');
+Square.reportArea(square1.length, reportList);
+Square.reportPerimeter(square1.length, reportList);
+```
+
+On obtient alors un code plus lisible.
+
+## Classes et modules
+
+Comme mentionné avant, il est possible d'importer et d'exporter des classes. Cette méthode peut aussi être utilisée afin d'éviter les conflits de nommage. Elle s'avère notamment utile lorsque vous utilisez déjà des classes pour construire vos objets (cela permet de garder une certaine cohérence dans le style).
+
+Pour voir le résultat obtenu, vous pouvez consulter le répertoire [classes](https://github.com/mdn/js-examples/tree/master/modules/classes) du dépôt où l'ensemble a été réécrit pour tirer parti des classes ECMAScript. Ainsi, [`square.mjs`](https://github.com/mdn/js-examples/blob/master/modules/classes/modules/square.js) contient désormais l'ensemble des fonctionnalités via une classe :
+
+```js
+class Square {
+  constructor(ctx, listId, length, x, y, color) {
+    ...
+  }
+
+  draw() {
+    ...
+  }
+
+  ...
+}
+```
+
+Il suffit d'exporter cette classe :
+
+```js
+export { Square };
+```
+
+Puis de l'importer ainsi dans [`main.mjs`](https://github.com/mdn/js-examples/blob/master/modules/classes/main.js) :
+
+```js
+import { Square } from './modules/square.mjs';
+```
+
+Ensuite, on peut utiliser cette classe afin de dessiner le carré :
+
+```js
+let square1 = new Square(myCanvas.ctx, myCanvas.listId, 50, 50, 100, 'blue');
+square1.draw();
+square1.reportArea();
+square1.reportPerimeter();
+```
+
+## Agréger des modules
+
+Il arrivera qu'on veuille agréger des modules entre eux. On peut avoir plusieurs niveaux de dépendances et vouloir simplifier les choses en combinant différents sous-modules en un seul module parent. Pour cela, on pourra utiliser la notation raccourcie suivante :
+
+```js
+export * from 'x.mjs'
+export { name } from 'x.mjs'
+```
+
+Pour voir cela en pratique, vous pouvez consulter le répertoire [module-aggregation](https://github.com/mdn/js-examples/tree/master/modules/module-aggregation). Dans cet exemple (construit sur le précédent qui utilise les classes), on a un module supplémentaire intitulé `shapes.mjs` qui agrège les fonctionnalités fournies par `circle.mjs`, `square.mjs` et `triangle.mjs`. Les sous-modules ont également été déplacés dans un répertoire `shapes` situé dans un répertoire `modules`. L'arborescence utilisée est donc :
+
+    modules/
+      canvas.mjs
+      shapes.mjs
+      shapes/
+        circle.mjs
+        square.mjs
+        triangle.mjs
+
+Dans chaque sous-module, l'export aura la même forme :
+
+```js
+export { Square };
+```
+
+Pour l'agrégation au sein de [`shapes.mjs`](https://github.com/mdn/js-examples/blob/master/modules/module-aggregation/modules/shapes.js), on écrit les lignes suivantes :
+
+```js
+export { Square } from './shapes/square.mjs';
+export { Triangle } from './shapes/triangle.mjs';
+export { Circle } from './shapes/circle.mjs';
+```
+
+On récupère ainsi l'ensemble des exports de chaque module et on les rend disponibles via `shapes.mjs`.
+
+> **Note :** Cette notation ne permet que de rediriger les exports via le fichier. Les objets importés/exportés n'existent pas vraiment dans `shapes.mjs` et on ne peut donc pas écrire de code _utile_ qui les manipule.
+
+Dans le fichier `main.mjs`, on pourra alors remplacer :
+
+```js
+import { Square } from './modules/square.mjs';
+import { Circle } from './modules/circle.mjs';
+import { Triangle } from './modules/triangle.mjs';
+```
+
+par :
+
+```js
+import { Square, Circle, Triangle } from './modules/shapes.mjs';
+```
+
+## Chargement dynamique de modules
+
+Cette nouvelle fonctionnalité permet aux navigateurs de charger les modules lorsqu'ils sont nécessaires plutôt que de tout précharger en avance de phase. Cette méthode offre de nombreux avantages quant aux performances. Voyons comment cela fonctionne.
+
+Pour utiliser cette fonctionnalité, on pourra utiliser `import()` comme une fonction et lui passer le chemin du module en argument. Cette fonction renverra [une promesse](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise), qui sera résolue en un module objet donnant accès aux exports.
+
+```js
+import('./modules/monModule.mjs')
+  .then((module) => {
+    // Faire qqc avec le module.
+  });
+```
+
+Dans nos exemples, regardons le répertoire [dynamic-module-imports](https://github.com/mdn/js-examples/tree/master/modules/dynamic-module-imports), également basé sur les classes. Cette fois, on ne dessine rien au chargement de l'exemple mais on ajoute trois boutons — "Circle", "Square" et "Triangle" — qui, lorsqu'ils seront utilisés, chargeront dynamiquement les modules nécessaires et les utiliseront pour charger la forme associée.
+
+Dans cet exemple, nous avons uniquement modifié [index.html](https://github.com/mdn/js-examples/blob/master/modules/dynamic-module-imports/index.html) et [main.js](https://github.com/mdn/js-examples/blob/master/modules/dynamic-module-imports/main.js) — les exports restent les mêmes.
+
+Dans `main.js`, on récupère une référence à chaque bouton en utilisant [`document.querySelector()`](/fr/docs/Web/API/Document/querySelector). Par exemple :
+
+```js
+let squareBtn = document.querySelector('.square');
+```
+
+Ensuite, on attache un gestionnaire d'évènement à chaque bouton afin qu'on puisse appuyer dessus. Le module correspondant est alors chargé dynamiquement et utilisé pour dessiner la forme :
+
+```js
+squareBtn.addEventListener('click', () => {
+  import('./modules/square.mjs').then((Module) => {
+    let square1 = new Module.Square(myCanvas.ctx, myCanvas.listId, 50, 50, 100, 'blue');
+    square1.draw();
+    square1.reportArea();
+    square1.reportPerimeter();
+  })
+});
+```
+
+On voit ici que, parce que la promesse renvoie un objet module à la résolution, la classe est une propriété de cet objet et qu'il faut ajouter cet espace de nom devant le constructeur exporté pour l'utiliser. Autrement dit, avec cette méthode, on doit ajouter `Module.` devant `Square` (plutôt que d'utiliser uniquement `Square`).
+
+## Diagnostiquer les problèmes avec les modules
+
+Voici quelques notes pour aider à comprendre et à diagnostiquer les problèmes parfois rencontrés avec les modules. N'hésitez pas à ajouter vos conseils à cette liste si vous en avez.
+
+- Comme indiqué ci-avant, les fichiers `.mjs` doivent être chargés avec le type MIME `javascript/esm` (ou avec un autre type MIME compatible JavaScript tel que `application/javascript`), sinon on aura une erreur lors de la vérification du type MIME.
+- Si on essaie de charger des fichiers HTML en local à l'aide d'une URL `file://`, on aura des erreurs CORS relatives à la sécurité. Pour tester les modules, on doit donc mettre en place un serveur (ou, par exemple, utiliser les pages GitHub).
+- `.mjs` est une extension relativement récente et certains systèmes d'exploitation ne la reconnaîtront pas et/ou tenteront de la remplacer (ex. macOS pourra silencieusement ajouter un `.js` après le `.mjs`). Dans ce cas, afficher les extensions de tous les fichiers par défaut pourra permettre de vérifier.
+
+## Voir aussi
+
+- [Une plongée illustrée dans les modules ECMAScript](https://tech.mozfr.org/post/2018/04/06/Une-plongee-illustree-dans-les-modules-ECMAScript)
+- [ES6 en détails : les modules](https://tech.mozfr.org/post/2015/08/21/ES6-en-details-%3A-les-modules)
+- [Utiliser les modules JavaScript sur le Web](https://developers.google.com/web/fundamentals/primers/modules#mjs), un article par Addy Osmani et Mathias Bynens (en anglais)
+- Livre de Axel Rauschmayer (en anglais) : [Exploring JS: Modules](http://exploringjs.com/es6/ch_modules.html)
+
+{{Previous("Web/JavaScript/Guide/Métaprogrammation")}}
diff --git a/files/fr/web/javascript/guide/numbers_and_dates/index.html b/files/fr/web/javascript/guide/numbers_and_dates/index.html
deleted file mode 100644
index c80c7ce65e..0000000000
--- a/files/fr/web/javascript/guide/numbers_and_dates/index.html
+++ /dev/null
@@ -1,392 +0,0 @@
----
-title: Nombres et dates
-slug: Web/JavaScript/Guide/Numbers_and_dates
-tags:
-  - Guide
-  - JavaScript
-translation_of: Web/JavaScript/Guide/Numbers_and_dates
-original_slug: Web/JavaScript/Guide/Nombres_et_dates
----
-<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Expressions_et_Op%C3%A9rateurs", "Web/JavaScript/Guide/Formatage_du_texte")}}</div>
-
-<p>Ce chapitre illustre le fonctionnement des nombres et des dates en JavaScript grâce aux concepts, objets et fonctions utilisables avec ce langage. Cela inclut notamment l'écriture de nombre selon différentes bases (décimale, binaire, hexadécimale) et l'utilisation de l'objet global {{jsxref("Math")}}.</p>
-
-<h2 id="Nombres">Nombres</h2>
-
-<p>Les nombres en JavaScript sont implémentés comme des <a href="https://en.wikipedia.org/wiki/Double-precision_floating-point_format">nombres sur 64 bits à précision double selon le format IEEE-754</a> qui est un standard pour la représentation des nombres flottants et qui permet d'avoir jusqu'à 16 chiffres significatifs. Le type numérique possède également trois valeurs spéciales symboliques : +{{jsxref("Infinity")}}, -{{jsxref("Infinity")}} et {{jsxref("NaN")}} (pour désigner une valeur qui n'est pas un nombre).</p>
-
-<p>Le format IEEE-754 permet de représenter des valeurs entre ±2^−1022 et ±2^+1023, ce qui correspond à des valeurs entre ±10^−308 et ±10^+308 avec une précision sur 53 bits. Les nombres entiers compris sur l'intervalle ±2^53 − 1 peuvent être représentés exactement.</p>
-
-<p>Le type {{jsxref("BigInt")}} est une addition récente à JavaScript qui permet de représenter de grands entiers. Toutefois, il n'est pas possible de mélanger les <code>BigInt</code> et les nombres ({{jsxref("Number")}}) dans les mêmes opérations et on ne peut pas utiliser l'objet {{jsxref("Math")}} avec les valeurs <code>BigInt</code>.</p>
-
-<p>Voir également <a href="/fr/docs/Web/JavaScript/Structures_de_données">les types de données et structures JavaScript</a> pour l'articulation des types primitifs en JavaScript.</p>
-
-<p>Il est possible d'utiliser quatre types de littéraux numériques : décimal, binaire, octal et hexadécimal.</p>
-
-<h3 id="Les_nombres_décimaux">Les nombres décimaux</h3>
-
-<pre class="brush: js">1234567980;
-42;
-
-// Attention à l'utilisation des zéros
-// en début de nombre
-
-0888; // 888 analysé en base décimale
-0777; // en mode non-strict, analysé en base octale,
-      // ce qui correspond
-      // à 511 en base décimale
-</pre>
-
-<p>On voit ici que les littéraux numériques qui commencent par un zéro (<code>0</code>) et contiennent un chiffre strictement inférieur à 8 après ce 0 sont analysés comme étant exprimés en base octale.</p>
-
-<h3 id="Les_nombres_binaires">Les nombres binaires</h3>
-
-<p>Pour utiliser des nombres binaires, on utilise un littéral qui commence par un 0 suivi d'un b minuscule ou majuscule (<code>0b</code> ou <code>0B</code>). Si les chiffres qui suivent ce préfixe ne sont pas des 0 ou des 1, une exception {{jsxref("SyntaxError")}} sera levée.</p>
-
-<pre class="brush: js">var FLT_BITSIGNE = 0b10000000000000000000000000000000; // 2147483648
-var FLT_EXPOSANT = 0b01111111100000000000000000000000; // 2139095040
-var FLT_MANTISSE = 0B00000000011111111111111111111111; // 8388607
-</pre>
-
-<h3 id="Les_nombres_octaux">Les nombres octaux</h3>
-
-<p>Pour utiliser des nombres en base octale, on utilisera un préfixe avec un <code>0</code>. Si les nombres qui suivent ce 0 ne sont pas compris entre 0 et 7 (au sens strict), le nombre sera interprété comme un nombre décimal.</p>
-
-<pre class="brush: js">var n = 0755; // 493 en base 10
-var m = 0644; // 420 en base 10
-</pre>
-
-<p>En mode strict, ECMAScript 5 interdit cette syntaxe octale. Cette syntaxe ne fait pas partie d'ECMAScript 5 mais est supportée par la majorité des navigateurs. Avec ECMAScript 2015 (ES6), il est possible de représenter un nombre en notation octale grâce au préfixe "<code>0o</code>" :</p>
-
-<pre class="brush: js">var a = 0o10; // Notation octale pour ES2015</pre>
-
-<h3 id="Les_nombres_hexadécimaux">Les nombres hexadécimaux</h3>
-
-<p>Pour utiliser des nombres exprimés en base hexadécimale, on utilisera un préfixe avec un zéro suivi d'un x majuscule ou minuscule (<code>0x</code> ou <code>0X</code>). Si les chiffres qui suivent ce préfixe ne sont pas 0123456789ABCDEF, cela provoquera une exception {{jsxref("SyntaxError")}}.</p>
-
-<pre class="brush: js">0xFFFFFFFFFFFFFFFFF // 295147905179352830000
-0x123456789ABCDEF   // 81985529216486900
-0XA                 // 10
-</pre>
-
-<h3 id="Notation_scientifique">Notation scientifique</h3>
-
-<pre class="brush: js">1E3   // 100
-2e6   // 2000000
-0.1e2 // 10
-</pre>
-
-<h2 id="Lobjet_Number">L'objet <code>Number</code></h2>
-
-<p>L'objet {{jsxref("Number")}} possède certaines propriétés représentant les constantes numériques telles que : la valeur maximale représentable en JavaScript, une valeur spéciale pour dire que la valeur numérique n'est pas un nombre et l'infini. Ces valeurs ne peuvent pas être modifiées, on pourra les utiliser de la façon suivante :</p>
-
-<pre class="brush: js">var plusGrandNombre = Number.MAX_VALUE;
-var plusPetitNombre = Number.MIN_VALUE;
-var infini = Number.POSITIVE_INFINITY;
-var infiniNégatif = Number.NEGATIVE_INFINITY;
-var pasUnNombre = Number.NaN;
-</pre>
-
-<p>On utilisera toujours ces valeurs directement avec l'objet natif <code>Number</code> (et non pas avec les propriétés d'une instance d'un objet <code>Number</code> qu'on aurait créé).</p>
-
-<p>Le tableau qui suit liste certaines des propriétés de <code>Number</code>.</p>
-
-<table class="standard-table">
- <caption>Propriétés de <code>Number</code></caption>
- <tbody>
-  <tr>
-   <th scope="col">Propriété</th>
-   <th scope="col">Description</th>
-  </tr>
-  <tr>
-   <td>{{jsxref("Number.MAX_VALUE")}}</td>
-   <td>Le plus grand nombre qu'on peut représenter en JavaScript (<code>±1.7976931348623157e+308</code>).</td>
-  </tr>
-  <tr>
-   <td>{{jsxref("Number.MIN_VALUE")}}</td>
-   <td>Le plus petit nombre qu'on peut représenter en JavaScript (<code>±5e-324</code>).</td>
-  </tr>
-  <tr>
-   <td>{{jsxref("Number.NaN")}}</td>
-   <td>Une valeur spéciale signifiant que la valeur n'est pas un nombre.</td>
-  </tr>
-  <tr>
-   <td>{{jsxref("Number.NEGATIVE_INFINITY")}}</td>
-   <td>L'infini négatif, renvoyé lorsqu'on dépasse la valeur minimale.</td>
-  </tr>
-  <tr>
-   <td>{{jsxref("Number.POSITIVE_INFINITY")}}</td>
-   <td>L'infini positif, renvoyé lorsqu'on dépasse la valeur maximale.</td>
-  </tr>
-  <tr>
-   <td>{{jsxref("Number.EPSILON")}}</td>
-   <td>La différence entre 1 et la première valeur supérieure à 1 qui puisse être représentée comme {{jsxref("Number")}}. (<code>2.220446049250313e-16</code>)</td>
-  </tr>
-  <tr>
-   <td>{{jsxref("Number.MIN_SAFE_INTEGER")}}</td>
-   <td>Le plus petit entier qu'on puisse représenter en JavaScript. (−2^53 + 1 ou <code>−9007199254740991</code>)</td>
-  </tr>
-  <tr>
-   <td>{{jsxref("Number.MAX_SAFE_INTEGER")}}</td>
-   <td>
-    <p>L'entier le plus grand qu'on puisse représenter en JavaScript (+2^53 − 1 ou <code>+9007199254740991</code>)</p>
-   </td>
-  </tr>
- </tbody>
-</table>
-
-<table class="standard-table">
- <caption>Méthodes de <code>Number</code></caption>
- <tbody>
-  <tr>
-   <th>Méthode</th>
-   <th>Description</th>
-  </tr>
-  <tr>
-   <td>{{jsxref("Number.parseFloat()")}}</td>
-   <td>Analyse un argument qui est une chaîne de caractères et renvoie un nombre décimal. Cette méthode est équivalente à la fonction {{jsxref("parseFloat", "parseFloat()")}}.</td>
-  </tr>
-  <tr>
-   <td>{{jsxref("Number.parseInt()")}}</td>
-   <td>Analyse un argument qui est une chaîne de caractères et renvoie un entier exprimé dans une base donnée. Cette méthode est équivalente à la fonction {{jsxref("parseInt", "parseInt()")}}.</td>
-  </tr>
-  <tr>
-   <td>{{jsxref("Number.isFinite()")}}</td>
-   <td>Détermine si la valeur passée en argument est un nombre fini.</td>
-  </tr>
-  <tr>
-   <td>{{jsxref("Number.isInteger()")}}</td>
-   <td>Détermine si la valeur passée en argument est un nombre entier.</td>
-  </tr>
-  <tr>
-   <td>{{jsxref("Number.isNaN()")}}</td>
-   <td>Détermine si la valeur passée en argument est {{jsxref("NaN")}}. Cette version est plus robuste que la fonction globale {{jsxref("Objets_globaux/isNaN", "isNaN()")}}.</td>
-  </tr>
-  <tr>
-   <td>{{jsxref("Number.isSafeInteger()")}}</td>
-   <td>Détermine si la valeur fournie est un nombre qu'il est possible de représenter comme un entier sans perdre d'information.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>Le prototype de <code>Number</code> fournit certaines méthodes pour exprimer les valeurs représentées par les objets <code>Number</code> dans différents formats. Le tableau suivant liste certaines de ces méthodes de <code>Number.prototype</code>.</p>
-
-<table class="standard-table">
- <caption>Méthodes of <code>Number.prototype</code></caption>
- <thead>
-  <tr>
-   <th scope="col">Méthode</th>
-   <th scope="col">Description</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{jsxref("Number.toExponential", "toExponential()")}}</td>
-   <td>Renvoie une chaîne de caractères représentant le nombre en notation exponentielle.</td>
-  </tr>
-  <tr>
-   <td>{{jsxref("Number.toFixed", "toFixed()")}}</td>
-   <td>Renvoie une chaîne de caractères représentant le nombre en notation à point fixe.</td>
-  </tr>
-  <tr>
-   <td>{{jsxref("Number.toPrecision", "toPrecision()")}}</td>
-   <td>Renvoie une chaîne de caractères représentant le nombre en notation à point fixe avec une précision donnée.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Lobjet_Math">L'objet <code>Math</code></h2>
-
-<p>L'objet natif {{jsxref("Math")}} possède des propriétés et des méthodes statiques pour représenter des constantes et des fonctions mathématiques. Ainsi, la propriété <code>PI</code> de l'objet <code>Math</code> représente la valeur de la constante <math><semantics><mi>π</mi><annotation encoding="TeX">\pi</annotation></semantics></math> (3.141...), on peut l'utiliser dans les applications avec :</p>
-
-<pre class="brush: js">Math.PI
-</pre>
-
-<p>De la même façon, les fonctions mathématiques usuelles sont des méthodes de <code>Math</code>. On retrouve par exemple les fonctions trigonométriques, logarithmiques et exponentielles ainsi que d'autres fonctions. Si on souhaite utiliser la fonction sinus, on pourra écrire :</p>
-
-<pre class="brush: js">Math.sin(1.56)
-</pre>
-
-<div class="note">
-<p><strong>Note :</strong> Les méthodes trigonométriques de <code>Math</code> prennent des arguments exprimés en radians.</p>
-</div>
-
-<p>Le tableau suivant liste les méthodes de l'objet <code>Math</code>.</p>
-
-<table class="standard-table">
- <caption>Méthodes de <code>Math</code></caption>
- <tbody>
-  <tr>
-   <th scope="col">Méthode</th>
-   <th scope="col">Description</th>
-  </tr>
-  <tr>
-   <td>{{jsxref("Math.abs", "abs()")}}</td>
-   <td>Valeur absolue</td>
-  </tr>
-  <tr>
-   <td>{{jsxref("Math.sin", "sin()")}}, {{jsxref("Math.cos", "cos()")}}, {{jsxref("Math.tan", "tan()")}}</td>
-   <td>Fonctions trigonométriques standards (les arguments sont exprimés en radians)</td>
-  </tr>
-  <tr>
-   <td>{{jsxref("Math.asin", "asin()")}}, {{jsxref("Math.acos", "acos()")}}, {{jsxref("Math.atan", "atan()")}}, {{jsxref("Math.atan2", "atan2()")}}</td>
-   <td>Fonctions trigonométriques inverses (les valeurs renvoyées sont exprimées en radians)</td>
-  </tr>
-  <tr>
-   <td>{{jsxref("Math.sinh", "sinh()")}}, {{jsxref("Math.cosh", "cosh()")}}, {{jsxref("Math.tanh", "tanh()")}}</td>
-   <td>Fonctions trigonométriques hyperboliques (les arguments sont exprimés en radians)</td>
-  </tr>
-  <tr>
-   <td>{{jsxref("Math.asinh", "asinh()")}}, {{jsxref("Math.acosh", "acosh()")}}, {{jsxref("Math.atanh", "atanh()")}}</td>
-   <td>Fonctions trigonométriques hyperboliques inverses (les valeurs renvoyées sont exprimées en radians).</td>
-  </tr>
-  <tr>
-   <td>{{jsxref("Math.pow", "pow()")}}, {{jsxref("Math.exp", "exp()")}}, {{jsxref("Math.expm1", "expm1()")}}, {{jsxref("Math.log10", "log10()")}}, {{jsxref("Math.log1p", "log1p()")}}, {{jsxref("Math.log2", "log2()")}}</td>
-   <td>Fonctions exponentielles et logarithmiques</td>
-  </tr>
-  <tr>
-   <td>{{jsxref("Math.floor", "floor()")}}, {{jsxref("Math.ceil", "ceil()")}}</td>
-   <td>Renvoie le plus petit/grand entier inférieur/supérieur ou égal à l'argument donné</td>
-  </tr>
-  <tr>
-   <td>{{jsxref("Math.min", "min()")}}, {{jsxref("Math.max", "max()")}}</td>
-   <td>Renvoie le plus petit (resp. grand) nombre d'une liste de nombres séparés par des virgules</td>
-  </tr>
-  <tr>
-   <td>{{jsxref("Math.random", "random()")}}</td>
-   <td>Renvoie un nombre aléatoire compris entre 0 et 1</td>
-  </tr>
-  <tr>
-   <td>{{jsxref("Math.round", "round()")}}, {{jsxref("Math.fround", "fround()")}}, {{jsxref("Math.trunc", "trunc()")}},</td>
-   <td>Fonctions d'arrondis et de troncature</td>
-  </tr>
-  <tr>
-   <td>{{jsxref("Math.sqrt", "sqrt()")}}, {{jsxref("Math.cbrt", "cbrt()")}}, {{jsxref("Math.hypot", "hypot()")}}</td>
-   <td>Racine carrée, cubique et racine carrée de la somme des carrés des arguments</td>
-  </tr>
-  <tr>
-   <td>{{jsxref("Math.sign", "sign()")}}</td>
-   <td>Renvoie le signe d'un nombre et indique si la valeur est négative, positive ou nulle</td>
-  </tr>
-  <tr>
-   <td>{{jsxref("Math.clz32", "clz32()")}},<br>
-    {{jsxref("Math.imul", "imul()")}}</td>
-   <td>Le nombre de zéros qui commencent un nombre sur 32 bits en représentation binaire.<br>
-    La résultat de la multiplication de deux arguments sur 32 bits effectuée comme en C.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>À la différence des autres objets, on ne crée pas d'objet de type <code>Math</code>. Ses propriétés sont statiques, on les appelle donc toujours depuis l'objet <code>Math</code>.</p>
-
-<h2 id="Lobjet_Date">L'objet <code>Date</code></h2>
-
-<p>JavaScript ne possède pas de type primitif pour représenter des dates. Cependant l'objet {{jsxref("Date")}} et ses méthodes permettent de manipuler des dates et des heures au sein d'une application. L'objet <code>Date</code> possède de nombreuses méthodes pour définir, modifier, obtenir des dates. Il ne possède pas de propriétés.</p>
-
-<p>JavaScript gère les dates de façon similaire à Java. Les deux langages possèdent de nombreuses méthodes en commun et les deux langages stockent les dates selon les nombres de millisecondes écoulées depuis le premier janvier 1970 à 00h00:00.</p>
-
-<p>L'objet <code>Date</code> permet de représenter des dates allant de -100 000 000 jours jusqu'à +100 000 000 jours par rapport au premier janvier 1970 UTC.</p>
-
-<p>Pour créer un objet <code>Date</code>, on utilisera la syntaxe suivante :</p>
-
-<pre class="brush: js">var monObjetDate = new Date([paramètres]);
-</pre>
-
-<p>avec <code>monObjetDate</code> étant le nom de l'objet à créer, cela peut être un nouvel objet ou une propriété d'un objet existant.</p>
-
-<p>Lorsqu'on appelle <code>Date</code> sans le mot-clé <code>new</code>, cela renvoie la date fournie sous la forme d'une chaîne de caractères.</p>
-
-<p>Les <code>paramètres</code> qui peuvent être utilisés sont :</p>
-
-<ul>
- <li>Aucun paramètre : l'objet créé représentera la date et l'heure courante.</li>
- <li>Une chaîne de caractères représentant une date au format suivant : "jour, année heures:minutes:secondes". Par exemple <code>var noël95 = new Date("December 25, 1995 13:30:00")</code>. Si les valeurs pour les heures, minutes ou secondes sont absentes, elles vaudront 0 par défaut.</li>
- <li>Un ensemble de valeurs entières pour l'année, le mois et le jour : <code>var noël95 = new Date(1995, 11, 25)</code>.</li>
- <li>Un ensemble de valeurs entières pour l'année, le mois, le jour, l'heure, les minutes et les secondes : <code>var noël95 = new Date(1995, 11, 25, 9, 30, 0);</code>.</li>
-</ul>
-
-<h3 id="Méthodes_de_lobjet_Date">Méthodes de l'objet <code>Date</code></h3>
-
-<p>Les méthodes de l'objet <code>Date</code> se répartissent en différentes catégories :</p>
-
-<ul>
- <li>celles utilisées pour définir et modifier les valeurs des objets <code>Date</code> (mutateurs).</li>
- <li>celles utilisées pour obtenir des informations à partir des objets <code>Date</code> (accesseurs).</li>
- <li>celles utilisées pour convertir les objets <code>Date</code> sous différents formats (souvent en chaînes de caractères).</li>
- <li>celles utilisées pour analyser et convertir des chaînes de caractères représentant des dates.</li>
-</ul>
-
-<p>Avec les accesseurs et les mutateurs, il est possible d'obtenir ou de modifier séparément les secondes, les minutes, les heures, le jour du mois ou de la semaine, le mois et l'année. Il existe une méthode <code>getDay</code> qui renvoie le jour de la semaine mais il n'existe pas de méthode réciproque <code>setDay</code> car le jour de la semaine est automatiquement déterminé. Ces méthodes utilisent des entiers pour représenter les valeurs utilisées :</p>
-
-<ul>
- <li>Pour les secondes et les minutes : 0 à 59</li>
- <li>Pour les heures : 0 à 23</li>
- <li>Pour les jours : 0 (dimanche) à 6 (samedi)</li>
- <li>Pour les dates : 1 à 31 (jour du mois)</li>
- <li>Pour les mois : 0 (janvier) à 11 (décembre)</li>
- <li>Pour les années : les années à partir de 1900</li>
-</ul>
-
-<p>Ainsi, si on définit la date suivante :</p>
-
-<pre class="brush: js">var noël95 = new Date("December 25, 1995");
-</pre>
-
-<p><code>noël95.getMonth()</code> renverra 11, et <code>noël95.getFullYear()</code> renverra 1995.</p>
-
-<p>Les méthodes <code>getTime</code> et <code>setTime</code> peuvent être utiles pour comparer des dates entre elles. La méthode <code>getTime</code> renvoie le nombre de millisecondes écoulées depuis le premier janvier 1970 à 00:00:00 pour l'objet <code>Date</code>.</p>
-
-<p>Par exemple, les instructions suivantes affichent le nombre de jours qui restent pour l'année courante :</p>
-
-<pre class="brush: js">var aujourdhui = new Date();
-
-// On définit le jour et le mois
-var finAnnée = new Date(1995, 11, 31, 23, 59, 59, 999);
-
-// On définit l'année avec l'année courante
-finAnnée.setFullYear(aujourdhui.getFullYear());
-
-// On calcule le nombre de millisecondes par jour
-var msParJour = 24 * 60 * 60 * 1000;
-
-// On renvoie le nombre de jours restants dans l'année
-var joursRestants = (finAnnée.getTime() - aujourdhui.getTime()) / msParJour;
-
-joursRestants = Math.round(joursRestants);</pre>
-
-<p>Cet exemple crée un objet <code>Date</code> nommé <code>aujourdhui</code> qui contient la date du jour. On crée ensuite un objet <code>Date</code> nommé <code>finAnnée</code> pour lequel on définit ensuite l'année avec l'année courante. Après, on calcule le nombre de millisecondes qui s'écoulent dans une journée. Enfin, on calcule le nombre de jours entre <code>aujourdhui</code> et <code>finAnnée</code> en utilisant <code>getTime</code> puis on arrondit le tout pour avoir un nombre de jours.</p>
-
-<p>La méthode <code>parse</code> est utile lorsqu'on souhaite affecter des valeurs temporelles à partir de chaînes de caractères. Par exemple, dans le code qui suit, on utilise les méthodes <code>parse</code> et <code>setTime</code> pour affecter la valeur d'une date à un objet <code>IPOdate</code> :</p>
-
-<pre class="brush: js">var IPOdate = new Date();
-IPOdate.setTime(Date.parse("Aug 9, 1995"));
-</pre>
-
-<h3 id="Exemple_dutilisation_de_lobjet_Date">Exemple d'utilisation de l'objet <code>Date</code></h3>
-
-<p>Dans l'exemple qui suit, la fonction <code>JSClock()</code> renvoie le temps au format d'une horloge numérique représentant les heures sur 12 heures :</p>
-
-<pre class="brush: js">function JSClock() {
-  var temps = new Date();
-  var heures = temps.getHours();
-  var minutes = temps.getMinutes();
-  var secondes = temps.getSeconds();
-  var calc = "" + (heures &gt; 12) ? heures - 12 : heures);
-  if (heures == 0)
-    calc = "12";
-  calc += ((minutes &lt; 10) ? ":0" : ":") + minutes;
-  calc += ((secondes &lt; 10) ? ":0" : ":") + secondes;
-  calc += (heures &gt;= 12) ? " P.M." : " A.M.";
-  return calc;
-}
-</pre>
-
-<p>Pour commencer, la fonction <code>JSClock</code> crée un objet <code>Date</code> appelé <code>temps</code> qui représente la date et l'heure à l'instant où la fonction est exécutée. Ensuite, les méthodes <code>getHours</code>, <code>getMinutes</code>, et <code>getSeconds</code> sont appelées afin d'affecter les valeurs correspondantes à <code>heures</code>, <code>minute</code>s, et <code>secondes</code>.</p>
-
-<p>Les quatre instructions suivantes permettent de construire une chaîne de caractères à partir de la valeur temporelle. La première instruction crée une variable <code>calc</code> et lui affecte une valeur avec une expression conditionnelle : si <code>heures</code> est supérieure à 12, on affichera (<code>heures - 12</code>), sinon on affichera l'heure sauf si c'est 0 auquel cas on affichera 12.</p>
-
-<p>L'instruction qui suit concatène la valeur de <code>minutes</code> à <code>calc</code>. Si la valeur de <code>minutes</code> est inférieure à 10, l'expression conditionnelle ajoutera une chaîne avec un zéro pour que la valeur soit affichée avec deux chiffres. De la même façon, l'instruction qui suit concatène la valeur de <code>calc</code> avec les secondes.</p>
-
-<p>Enfin, une expression conditionnelle est utilisée pour ajouter "P.M." à <code>calc</code> si <code>heures</code> vaut 12 ou plus, sinon ce sera la chaîne "A.M." qui sera ajoutée à la fin de <code>calc</code>.</p>
-
-<p>{{PreviousNext("Web/JavaScript/Guide/Expressions_et_Op%C3%A9rateurs", "Web/JavaScript/Guide/Formatage_du_texte")}}</p>
diff --git a/files/fr/web/javascript/guide/numbers_and_dates/index.md b/files/fr/web/javascript/guide/numbers_and_dates/index.md
new file mode 100644
index 0000000000..33d7e90ae3
--- /dev/null
+++ b/files/fr/web/javascript/guide/numbers_and_dates/index.md
@@ -0,0 +1,328 @@
+---
+title: Nombres et dates
+slug: Web/JavaScript/Guide/Numbers_and_dates
+tags:
+  - Guide
+  - JavaScript
+translation_of: Web/JavaScript/Guide/Numbers_and_dates
+original_slug: Web/JavaScript/Guide/Nombres_et_dates
+---
+{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Expressions_et_Op%C3%A9rateurs", "Web/JavaScript/Guide/Formatage_du_texte")}}
+
+Ce chapitre illustre le fonctionnement des nombres et des dates en JavaScript grâce aux concepts, objets et fonctions utilisables avec ce langage. Cela inclut notamment l'écriture de nombre selon différentes bases (décimale, binaire, hexadécimale) et l'utilisation de l'objet global {{jsxref("Math")}}.
+
+## Nombres
+
+Les nombres en JavaScript sont implémentés comme des [nombres sur 64 bits à précision double selon le format IEEE-754](https://en.wikipedia.org/wiki/Double-precision_floating-point_format) qui est un standard pour la représentation des nombres flottants et qui permet d'avoir jusqu'à 16 chiffres significatifs. Le type numérique possède également trois valeurs spéciales symboliques : +{{jsxref("Infinity")}}, -{{jsxref("Infinity")}} et {{jsxref("NaN")}} (pour désigner une valeur qui n'est pas un nombre).
+
+Le format IEEE-754 permet de représenter des valeurs entre ±2^−1022 et ±2^+1023, ce qui correspond à des valeurs entre ±10^−308 et ±10^+308 avec une précision sur 53 bits. Les nombres entiers compris sur l'intervalle ±2^53 − 1 peuvent être représentés exactement.
+
+Le type {{jsxref("BigInt")}} est une addition récente à JavaScript qui permet de représenter de grands entiers. Toutefois, il n'est pas possible de mélanger les `BigInt` et les nombres ({{jsxref("Number")}}) dans les mêmes opérations et on ne peut pas utiliser l'objet {{jsxref("Math")}} avec les valeurs `BigInt`.
+
+Voir également [les types de données et structures JavaScript](/fr/docs/Web/JavaScript/Structures_de_données) pour l'articulation des types primitifs en JavaScript.
+
+Il est possible d'utiliser quatre types de littéraux numériques : décimal, binaire, octal et hexadécimal.
+
+### Les nombres décimaux
+
+```js
+1234567980;
+42;
+
+// Attention à l'utilisation des zéros
+// en début de nombre
+
+0888; // 888 analysé en base décimale
+0777; // en mode non-strict, analysé en base octale,
+      // ce qui correspond
+      // à 511 en base décimale
+```
+
+On voit ici que les littéraux numériques qui commencent par un zéro (`0`) et contiennent un chiffre strictement inférieur à 8 après ce 0 sont analysés comme étant exprimés en base octale.
+
+### Les nombres binaires
+
+Pour utiliser des nombres binaires, on utilise un littéral qui commence par un 0 suivi d'un b minuscule ou majuscule (`0b` ou `0B`). Si les chiffres qui suivent ce préfixe ne sont pas des 0 ou des 1, une exception {{jsxref("SyntaxError")}} sera levée.
+
+```js
+var FLT_BITSIGNE = 0b10000000000000000000000000000000; // 2147483648
+var FLT_EXPOSANT = 0b01111111100000000000000000000000; // 2139095040
+var FLT_MANTISSE = 0B00000000011111111111111111111111; // 8388607
+```
+
+### Les nombres octaux
+
+Pour utiliser des nombres en base octale, on utilisera un préfixe avec un `0`. Si les nombres qui suivent ce 0 ne sont pas compris entre 0 et 7 (au sens strict), le nombre sera interprété comme un nombre décimal.
+
+```js
+var n = 0755; // 493 en base 10
+var m = 0644; // 420 en base 10
+```
+
+En mode strict, ECMAScript 5 interdit cette syntaxe octale. Cette syntaxe ne fait pas partie d'ECMAScript 5 mais est supportée par la majorité des navigateurs. Avec ECMAScript 2015 (ES6), il est possible de représenter un nombre en notation octale grâce au préfixe "`0o`" :
+
+```js
+var a = 0o10; // Notation octale pour ES2015
+```
+
+### Les nombres hexadécimaux
+
+Pour utiliser des nombres exprimés en base hexadécimale, on utilisera un préfixe avec un zéro suivi d'un x majuscule ou minuscule (`0x` ou `0X`). Si les chiffres qui suivent ce préfixe ne sont pas 0123456789ABCDEF, cela provoquera une exception {{jsxref("SyntaxError")}}.
+
+```js
+0xFFFFFFFFFFFFFFFFF // 295147905179352830000
+0x123456789ABCDEF   // 81985529216486900
+0XA                 // 10
+```
+
+### Notation scientifique
+
+```js
+1E3   // 100
+2e6   // 2000000
+0.1e2 // 10
+```
+
+## L'objet `Number`
+
+L'objet {{jsxref("Number")}} possède certaines propriétés représentant les constantes numériques telles que : la valeur maximale représentable en JavaScript, une valeur spéciale pour dire que la valeur numérique n'est pas un nombre et l'infini. Ces valeurs ne peuvent pas être modifiées, on pourra les utiliser de la façon suivante :
+
+```js
+var plusGrandNombre = Number.MAX_VALUE;
+var plusPetitNombre = Number.MIN_VALUE;
+var infini = Number.POSITIVE_INFINITY;
+var infiniNégatif = Number.NEGATIVE_INFINITY;
+var pasUnNombre = Number.NaN;
+```
+
+On utilisera toujours ces valeurs directement avec l'objet natif `Number` (et non pas avec les propriétés d'une instance d'un objet `Number` qu'on aurait créé).
+
+Le tableau qui suit liste certaines des propriétés de `Number`.
+
+<table class="standard-table">
+  <caption>
+    Propriétés de
+    <code>Number</code>
+  </caption>
+  <tbody>
+    <tr>
+      <th scope="col">Propriété</th>
+      <th scope="col">Description</th>
+    </tr>
+    <tr>
+      <td>{{jsxref("Number.MAX_VALUE")}}</td>
+      <td>
+        Le plus grand nombre qu'on peut représenter en JavaScript
+        (<code>±1.7976931348623157e+308</code>).
+      </td>
+    </tr>
+    <tr>
+      <td>{{jsxref("Number.MIN_VALUE")}}</td>
+      <td>
+        Le plus petit nombre qu'on peut représenter en JavaScript
+        (<code>±5e-324</code>).
+      </td>
+    </tr>
+    <tr>
+      <td>{{jsxref("Number.NaN")}}</td>
+      <td>Une valeur spéciale signifiant que la valeur n'est pas un nombre.</td>
+    </tr>
+    <tr>
+      <td>{{jsxref("Number.NEGATIVE_INFINITY")}}</td>
+      <td>L'infini négatif, renvoyé lorsqu'on dépasse la valeur minimale.</td>
+    </tr>
+    <tr>
+      <td>{{jsxref("Number.POSITIVE_INFINITY")}}</td>
+      <td>L'infini positif, renvoyé lorsqu'on dépasse la valeur maximale.</td>
+    </tr>
+    <tr>
+      <td>{{jsxref("Number.EPSILON")}}</td>
+      <td>
+        La différence entre 1 et la première valeur supérieure à 1 qui puisse
+        être représentée comme {{jsxref("Number")}}.
+        (<code>2.220446049250313e-16</code>)
+      </td>
+    </tr>
+    <tr>
+      <td>{{jsxref("Number.MIN_SAFE_INTEGER")}}</td>
+      <td>
+        Le plus petit entier qu'on puisse représenter en JavaScript. (−2^53 + 1
+        ou <code>−9007199254740991</code>)
+      </td>
+    </tr>
+    <tr>
+      <td>{{jsxref("Number.MAX_SAFE_INTEGER")}}</td>
+      <td>
+        <p>
+          L'entier le plus grand qu'on puisse représenter en JavaScript (+2^53 −
+          1 ou <code>+9007199254740991</code>)
+        </p>
+      </td>
+    </tr>
+  </tbody>
+</table>
+
+| Méthode                                          | Description                                                                                                                                                                                           |
+| ------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| {{jsxref("Number.parseFloat()")}}     | Analyse un argument qui est une chaîne de caractères et renvoie un nombre décimal. Cette méthode est équivalente à la fonction {{jsxref("parseFloat", "parseFloat()")}}.                  |
+| {{jsxref("Number.parseInt()")}}         | Analyse un argument qui est une chaîne de caractères et renvoie un entier exprimé dans une base donnée. Cette méthode est équivalente à la fonction {{jsxref("parseInt", "parseInt()")}}. |
+| {{jsxref("Number.isFinite()")}}         | Détermine si la valeur passée en argument est un nombre fini.                                                                                                                                         |
+| {{jsxref("Number.isInteger()")}}     | Détermine si la valeur passée en argument est un nombre entier.                                                                                                                                       |
+| {{jsxref("Number.isNaN()")}}             | Détermine si la valeur passée en argument est {{jsxref("NaN")}}. Cette version est plus robuste que la fonction globale {{jsxref("Objets_globaux/isNaN", "isNaN()")}}.          |
+| {{jsxref("Number.isSafeInteger()")}} | Détermine si la valeur fournie est un nombre qu'il est possible de représenter comme un entier sans perdre d'information.                                                                             |
+
+Le prototype de `Number` fournit certaines méthodes pour exprimer les valeurs représentées par les objets `Number` dans différents formats. Le tableau suivant liste certaines de ces méthodes de `Number.prototype`.
+
+| Méthode                                                                  | Description                                                                                                 |
+| ------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------- |
+| {{jsxref("Number.toExponential", "toExponential()")}} | Renvoie une chaîne de caractères représentant le nombre en notation exponentielle.                          |
+| {{jsxref("Number.toFixed", "toFixed()")}}                 | Renvoie une chaîne de caractères représentant le nombre en notation à point fixe.                           |
+| {{jsxref("Number.toPrecision", "toPrecision()")}}         | Renvoie une chaîne de caractères représentant le nombre en notation à point fixe avec une précision donnée. |
+
+## L'objet `Math`
+
+L'objet natif {{jsxref("Math")}} possède des propriétés et des méthodes statiques pour représenter des constantes et des fonctions mathématiques. Ainsi, la propriété `PI` de l'objet `Math` représente la valeur de la constante <math><semantics><mi>π</mi><annotation encoding="TeX">\pi</annotation></semantics></math> (3.141...), on peut l'utiliser dans les applications avec :
+
+```js
+Math.PI
+```
+
+De la même façon, les fonctions mathématiques usuelles sont des méthodes de `Math`. On retrouve par exemple les fonctions trigonométriques, logarithmiques et exponentielles ainsi que d'autres fonctions. Si on souhaite utiliser la fonction sinus, on pourra écrire :
+
+```js
+Math.sin(1.56)
+```
+
+> **Note :** Les méthodes trigonométriques de `Math` prennent des arguments exprimés en radians.
+
+Le tableau suivant liste les méthodes de l'objet `Math`.
+
+| Méthode                                                                                                                                                                                                                                                                                | Description                                                                                                                                                             |
+| -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| {{jsxref("Math.abs", "abs()")}}                                                                                                                                                                                                                                               | Valeur absolue                                                                                                                                                          |
+| {{jsxref("Math.sin", "sin()")}}, {{jsxref("Math.cos", "cos()")}}, {{jsxref("Math.tan", "tan()")}}                                                                                                                                                           | Fonctions trigonométriques standards (les arguments sont exprimés en radians)                                                                                           |
+| {{jsxref("Math.asin", "asin()")}}, {{jsxref("Math.acos", "acos()")}}, {{jsxref("Math.atan", "atan()")}}, {{jsxref("Math.atan2", "atan2()")}}                                                                                             | Fonctions trigonométriques inverses (les valeurs renvoyées sont exprimées en radians)                                                                                   |
+| {{jsxref("Math.sinh", "sinh()")}}, {{jsxref("Math.cosh", "cosh()")}}, {{jsxref("Math.tanh", "tanh()")}}                                                                                                                                               | Fonctions trigonométriques hyperboliques (les arguments sont exprimés en radians)                                                                                       |
+| {{jsxref("Math.asinh", "asinh()")}}, {{jsxref("Math.acosh", "acosh()")}}, {{jsxref("Math.atanh", "atanh()")}}                                                                                                                                   | Fonctions trigonométriques hyperboliques inverses (les valeurs renvoyées sont exprimées en radians).                                                                    |
+| {{jsxref("Math.pow", "pow()")}}, {{jsxref("Math.exp", "exp()")}}, {{jsxref("Math.expm1", "expm1()")}}, {{jsxref("Math.log10", "log10()")}}, {{jsxref("Math.log1p", "log1p()")}}, {{jsxref("Math.log2", "log2()")}} | Fonctions exponentielles et logarithmiques                                                                                                                              |
+| {{jsxref("Math.floor", "floor()")}}, {{jsxref("Math.ceil", "ceil()")}}                                                                                                                                                                                         | Renvoie le plus petit/grand entier inférieur/supérieur ou égal à l'argument donné                                                                                       |
+| {{jsxref("Math.min", "min()")}}, {{jsxref("Math.max", "max()")}}                                                                                                                                                                                                     | Renvoie le plus petit (resp. grand) nombre d'une liste de nombres séparés par des virgules                                                                              |
+| {{jsxref("Math.random", "random()")}}                                                                                                                                                                                                                                       | Renvoie un nombre aléatoire compris entre 0 et 1                                                                                                                        |
+| {{jsxref("Math.round", "round()")}}, {{jsxref("Math.fround", "fround()")}}, {{jsxref("Math.trunc", "trunc()")}},                                                                                                                                  | Fonctions d'arrondis et de troncature                                                                                                                                   |
+| {{jsxref("Math.sqrt", "sqrt()")}}, {{jsxref("Math.cbrt", "cbrt()")}}, {{jsxref("Math.hypot", "hypot()")}}                                                                                                                                           | Racine carrée, cubique et racine carrée de la somme des carrés des arguments                                                                                            |
+| {{jsxref("Math.sign", "sign()")}}                                                                                                                                                                                                                                           | Renvoie le signe d'un nombre et indique si la valeur est négative, positive ou nulle                                                                                    |
+| {{jsxref("Math.clz32", "clz32()")}}, {{jsxref("Math.imul", "imul()")}}                                                                                                                                                                                         | Le nombre de zéros qui commencent un nombre sur 32 bits en représentation binaire. La résultat de la multiplication de deux arguments sur 32 bits effectuée comme en C. |
+
+À la différence des autres objets, on ne crée pas d'objet de type `Math`. Ses propriétés sont statiques, on les appelle donc toujours depuis l'objet `Math`.
+
+## L'objet `Date`
+
+JavaScript ne possède pas de type primitif pour représenter des dates. Cependant l'objet {{jsxref("Date")}} et ses méthodes permettent de manipuler des dates et des heures au sein d'une application. L'objet `Date` possède de nombreuses méthodes pour définir, modifier, obtenir des dates. Il ne possède pas de propriétés.
+
+JavaScript gère les dates de façon similaire à Java. Les deux langages possèdent de nombreuses méthodes en commun et les deux langages stockent les dates selon les nombres de millisecondes écoulées depuis le premier janvier 1970 à 00h00:00.
+
+L'objet `Date` permet de représenter des dates allant de -100 000 000 jours jusqu'à +100 000 000 jours par rapport au premier janvier 1970 UTC.
+
+Pour créer un objet `Date`, on utilisera la syntaxe suivante :
+
+```js
+var monObjetDate = new Date([paramètres]);
+```
+
+avec `monObjetDate` étant le nom de l'objet à créer, cela peut être un nouvel objet ou une propriété d'un objet existant.
+
+Lorsqu'on appelle `Date` sans le mot-clé `new`, cela renvoie la date fournie sous la forme d'une chaîne de caractères.
+
+Les `paramètres` qui peuvent être utilisés sont :
+
+- Aucun paramètre : l'objet créé représentera la date et l'heure courante.
+- Une chaîne de caractères représentant une date au format suivant : "jour, année heures:minutes:secondes". Par exemple `var noël95 = new Date("December 25, 1995 13:30:00")`. Si les valeurs pour les heures, minutes ou secondes sont absentes, elles vaudront 0 par défaut.
+- Un ensemble de valeurs entières pour l'année, le mois et le jour : `var noël95 = new Date(1995, 11, 25)`.
+- Un ensemble de valeurs entières pour l'année, le mois, le jour, l'heure, les minutes et les secondes : `var noël95 = new Date(1995, 11, 25, 9, 30, 0);`.
+
+### Méthodes de l'objet `Date`
+
+Les méthodes de l'objet `Date` se répartissent en différentes catégories :
+
+- celles utilisées pour définir et modifier les valeurs des objets `Date` (mutateurs).
+- celles utilisées pour obtenir des informations à partir des objets `Date` (accesseurs).
+- celles utilisées pour convertir les objets `Date` sous différents formats (souvent en chaînes de caractères).
+- celles utilisées pour analyser et convertir des chaînes de caractères représentant des dates.
+
+Avec les accesseurs et les mutateurs, il est possible d'obtenir ou de modifier séparément les secondes, les minutes, les heures, le jour du mois ou de la semaine, le mois et l'année. Il existe une méthode `getDay` qui renvoie le jour de la semaine mais il n'existe pas de méthode réciproque `setDay` car le jour de la semaine est automatiquement déterminé. Ces méthodes utilisent des entiers pour représenter les valeurs utilisées :
+
+- Pour les secondes et les minutes : 0 à 59
+- Pour les heures : 0 à 23
+- Pour les jours : 0 (dimanche) à 6 (samedi)
+- Pour les dates : 1 à 31 (jour du mois)
+- Pour les mois : 0 (janvier) à 11 (décembre)
+- Pour les années : les années à partir de 1900
+
+Ainsi, si on définit la date suivante :
+
+```js
+var noël95 = new Date("December 25, 1995");
+```
+
+`noël95.getMonth()` renverra 11, et `noël95.getFullYear()` renverra 1995.
+
+Les méthodes `getTime` et `setTime` peuvent être utiles pour comparer des dates entre elles. La méthode `getTime` renvoie le nombre de millisecondes écoulées depuis le premier janvier 1970 à 00:00:00 pour l'objet `Date`.
+
+Par exemple, les instructions suivantes affichent le nombre de jours qui restent pour l'année courante :
+
+```js
+var aujourdhui = new Date();
+
+// On définit le jour et le mois
+var finAnnée = new Date(1995, 11, 31, 23, 59, 59, 999);
+
+// On définit l'année avec l'année courante
+finAnnée.setFullYear(aujourdhui.getFullYear());
+
+// On calcule le nombre de millisecondes par jour
+var msParJour = 24 * 60 * 60 * 1000;
+
+// On renvoie le nombre de jours restants dans l'année
+var joursRestants = (finAnnée.getTime() - aujourdhui.getTime()) / msParJour;
+
+joursRestants = Math.round(joursRestants);
+```
+
+Cet exemple crée un objet `Date` nommé `aujourdhui` qui contient la date du jour. On crée ensuite un objet `Date` nommé `finAnnée` pour lequel on définit ensuite l'année avec l'année courante. Après, on calcule le nombre de millisecondes qui s'écoulent dans une journée. Enfin, on calcule le nombre de jours entre `aujourdhui` et `finAnnée` en utilisant `getTime` puis on arrondit le tout pour avoir un nombre de jours.
+
+La méthode `parse` est utile lorsqu'on souhaite affecter des valeurs temporelles à partir de chaînes de caractères. Par exemple, dans le code qui suit, on utilise les méthodes `parse` et `setTime` pour affecter la valeur d'une date à un objet `IPOdate` :
+
+```js
+var IPOdate = new Date();
+IPOdate.setTime(Date.parse("Aug 9, 1995"));
+```
+
+### Exemple d'utilisation de l'objet `Date`
+
+Dans l'exemple qui suit, la fonction `JSClock()` renvoie le temps au format d'une horloge numérique représentant les heures sur 12 heures :
+
+```js
+function JSClock() {
+  var temps = new Date();
+  var heures = temps.getHours();
+  var minutes = temps.getMinutes();
+  var secondes = temps.getSeconds();
+  var calc = "" + (heures > 12) ? heures - 12 : heures);
+  if (heures == 0)
+    calc = "12";
+  calc += ((minutes < 10) ? ":0" : ":") + minutes;
+  calc += ((secondes < 10) ? ":0" : ":") + secondes;
+  calc += (heures >= 12) ? " P.M." : " A.M.";
+  return calc;
+}
+```
+
+Pour commencer, la fonction `JSClock` crée un objet `Date` appelé `temps` qui représente la date et l'heure à l'instant où la fonction est exécutée. Ensuite, les méthodes `getHours`, `getMinutes`, et `getSeconds` sont appelées afin d'affecter les valeurs correspondantes à `heures`, `minute`s, et `secondes`.
+
+Les quatre instructions suivantes permettent de construire une chaîne de caractères à partir de la valeur temporelle. La première instruction crée une variable `calc` et lui affecte une valeur avec une expression conditionnelle : si `heures` est supérieure à 12, on affichera (`heures - 12`), sinon on affichera l'heure sauf si c'est 0 auquel cas on affichera 12.
+
+L'instruction qui suit concatène la valeur de `minutes` à `calc`. Si la valeur de `minutes` est inférieure à 10, l'expression conditionnelle ajoutera une chaîne avec un zéro pour que la valeur soit affichée avec deux chiffres. De la même façon, l'instruction qui suit concatène la valeur de `calc` avec les secondes.
+
+Enfin, une expression conditionnelle est utilisée pour ajouter "P.M." à `calc` si `heures` vaut 12 ou plus, sinon ce sera la chaîne "A.M." qui sera ajoutée à la fin de `calc`.
+
+{{PreviousNext("Web/JavaScript/Guide/Expressions_et_Op%C3%A9rateurs", "Web/JavaScript/Guide/Formatage_du_texte")}}
diff --git a/files/fr/web/javascript/guide/regular_expressions/assertions/index.html b/files/fr/web/javascript/guide/regular_expressions/assertions/index.html
deleted file mode 100644
index a16c6b48ce..0000000000
--- a/files/fr/web/javascript/guide/regular_expressions/assertions/index.html
+++ /dev/null
@@ -1,107 +0,0 @@
----
-title: Assertions
-slug: Web/JavaScript/Guide/Regular_Expressions/Assertions
-tags:
-  - Assertions
-  - Guide
-  - JavaScript
-  - RegExp
-translation_of: Web/JavaScript/Guide/Regular_Expressions/Assertions
-original_slug: Web/JavaScript/Guide/Expressions_régulières/Assertions
----
-<p>{{jsSidebar("JavaScript Guide")}}{{draft}}</p>
-
-<p>Les assertions indiquent les conditions selon lesquelles il est possible d'avoir une correspondance (contenu situé avant la correspondance, situé après ou expressions conditionnelles).</p>
-
-<h2 id="Types">Types</h2>
-
-<div class="blockIndicator note">
-<p><strong>Note :</strong> Le caractère <code>?</code> peut également être utilisé comme quantificateur.</p>
-</div>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Caractères</th>
-   <th scope="col">Signification</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><code>x(?=y)</code></td>
-   <td>
-    <p>Correspond à 'x' seulement s'il est suivi de 'y'. On appelle cela un test de succession (<em>lookahead</em>).</p>
-
-    <p>Ainsi, <code>/Jack(?=Sparrow)/</code> correspond à 'Jack' seulement s'il est suivi de 'Sparrow'. <code>/Jack(?=Sparrow|Bauer)/</code> correspond à 'Jack' seulement s'il est suivi de 'Sparrow' ou de 'Bauer'. Cependant, ni 'Sparrow' ni 'Bauer' ne feront partie de la correspondance.</p>
-   </td>
-  </tr>
-  <tr>
-   <td><code>x(?!y)</code></td>
-   <td>
-    <p>Correspond à 'x' seulement si 'x' n'est pas suivi de 'y'.</p>
-
-    <p>Ainsi, <code>/\d+(?!\.)/</code> correspond à un nombre qui n'est pas suivi par un point, cette expression utilisée avec <code>la chaîne 3.141</code> correspondra pour '141' mais pas pour '3.141'.</p>
-   </td>
-  </tr>
-  <tr>
-   <td><code>(?&lt;=y)x</code></td>
-   <td>
-    <p>Correspond à <code><em>x</em></code> seulement si <code><em>x</em></code> est précédé par <code><em>y</em></code>. C'est ce qu'on appelle une recherche arrière (<em>lookbehind</em>).</p>
-
-    <p>Ainsi /<code>(?&lt;=Jack)Sprat/</code> correspond à "Sprat" seulement s'il est précédé de "Jack".<br>
-     <code>/(?&lt;=Jack|Tom)Sprat/</code> correspond à "Sprat" seulement s'il est précédé de "Jack" ou "Tom".<br>
-     Toutefois, "Jack" et "Tom" ne feront pas partie de la correspondance.</p>
-   </td>
-  </tr>
-  <tr>
-   <td><code>(?&lt;!y)x</code></td>
-   <td>
-    <p>Correspond à <code><em>x</em></code> uniquement si <code><em>x</em></code> n'est pas précédé par <code><em>y</em></code> (parfois appelée en anglais <em>negated lookbehind</em>)<em>.</em></p>
-
-    <p>Ainsi, <code>/(?&lt;!-)\d+/</code> correspondra à un nombre seulement si celui-ci n'est pas précédé d'un signe moins.<br>
-     <code>/(?&lt;!-)\d+/.exec('3')</code> cible "3".<br>
-      <code>/(?&lt;!-)\d+/.exec('-3')</code>  ne trouve aucune correspondance car le nombre est précédé d'un signe</p>
-   </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Assertion_avant_(lookahead)">Assertion avant (<em>lookahead</em>)</h3>
-
-<pre class="brush: js">let regex = /Premier(?= test)/g;
-
-console.log('Premier test'.match(regex)); // [ 'Premier' ]
-console.log('Premier truc'.match(regex)); // null
-console.log("Voici le Premier test de l'année.".match(regex)); // [ 'Premier' ]
-console.log('Voici le Premier truc du mois.'.match(regex)); // null
-</pre>
-
-<h3 id="Assertion_avant_négative">Assertion avant négative</h3>
-
-<p>L'expression rationnelle <code>/\d+(?!\.)/</code> permettra de rechercher plusieurs chiffres si ceux-ci ne sont pas suivis d'un point décimal. Ainsi, <code>/\d+(?!\.)/.exec('3.141')</code> trouvera la sous-chaîne "141" mais pas "3."</p>
-
-<pre class="brush: js">console.log(/\d+(?!\.)/g.exec('3.141')); // [ '141', index: 2, input: '3.141' ]
-</pre>
-
-<h3 id="Signification_différente_de_'!'_entre_les_assertions_et_les_intervalles">Signification différente de <code>'?!'</code> entre les assertions et les intervalles</h3>
-
-<p>La combinaison de caractères <code>?!</code> a un sens différent entre les <a href="/fr/docs/Web/JavaScript/Guide/Expressions_régulières/Assertions">assertions</a> <code>/x(?!y)/</code> et les <a href="/fr/docs/Web/JavaScript/Guide/Expressions_régulières/Groupes_et_intervalles">intervalles</a> <code>[^?!]</code>.</p>
-
-<pre class="brush: js">let orangePasCitron = "Voulez-vous avoir une orange? Oui, je ne veux pas avoir de citron!";
-
-let choixPasCitron = /[^?!]+avoir(?! un citron)[^?!]+[?!]/gi
-console.log(orangePasCitron.match(choixPasCitron)); // [ 'Voulez-vous avoir une orange?' ]
-
-let choixPasOrange = /[^?!]+avoir(?! une orange)[^?!]+[?!]/gi
-console.log(orangePasCitron.match(choixPasOrange)); // [ 'Oui, je ne veux pas avoir de citron!' ]
-</pre>
-
-<h3 id="Assertion_arrière_(lookbehind)">Assertion arrière (<em>lookbehind</em>)</h3>
-
-<pre class="brush: js">let oranges = ['espèce orange A ', 'sorte orange B', 'espèce orange C',];
-
-let especesOranges = oranges.filter( fruit =&gt; fruit.match(/(?&lt;=espèce )orange/));
-console.log(especesOranges); // [ 'espèce orange A ', 'espèce orange C' ]
-</pre>
diff --git a/files/fr/web/javascript/guide/regular_expressions/assertions/index.md b/files/fr/web/javascript/guide/regular_expressions/assertions/index.md
new file mode 100644
index 0000000000..1e1dbb1a9d
--- /dev/null
+++ b/files/fr/web/javascript/guide/regular_expressions/assertions/index.md
@@ -0,0 +1,138 @@
+---
+title: Assertions
+slug: Web/JavaScript/Guide/Regular_Expressions/Assertions
+tags:
+  - Assertions
+  - Guide
+  - JavaScript
+  - RegExp
+translation_of: Web/JavaScript/Guide/Regular_Expressions/Assertions
+original_slug: Web/JavaScript/Guide/Expressions_régulières/Assertions
+---
+{{jsSidebar("JavaScript Guide")}}{{draft}}
+
+Les assertions indiquent les conditions selon lesquelles il est possible d'avoir une correspondance (contenu situé avant la correspondance, situé après ou expressions conditionnelles).
+
+## Types
+
+> **Note :** Le caractère `?` peut également être utilisé comme quantificateur.
+
+<table class="standard-table">
+  <thead>
+    <tr>
+      <th scope="col">Caractères</th>
+      <th scope="col">Signification</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td><code>x(?=y)</code></td>
+      <td>
+        <p>
+          Correspond à 'x' seulement s'il est suivi de 'y'. On appelle cela un
+          test de succession (<em>lookahead</em>).
+        </p>
+        <p>
+          Ainsi, <code>/Jack(?=Sparrow)/</code> correspond à 'Jack' seulement
+          s'il est suivi de 'Sparrow'.
+          <code>/Jack(?=Sparrow|Bauer)/</code> correspond à 'Jack' seulement
+          s'il est suivi de 'Sparrow' ou de 'Bauer'. Cependant, ni 'Sparrow' ni
+          'Bauer' ne feront partie de la correspondance.
+        </p>
+      </td>
+    </tr>
+    <tr>
+      <td><code>x(?!y)</code></td>
+      <td>
+        <p>Correspond à 'x' seulement si 'x' n'est pas suivi de 'y'.</p>
+        <p>
+          Ainsi, <code>/\d+(?!\.)/</code> correspond à un nombre qui n'est pas
+          suivi par un point, cette expression utilisée avec
+          <code>la chaîne 3.141</code> correspondra pour '141' mais pas pour
+          '3.141'.
+        </p>
+      </td>
+    </tr>
+    <tr>
+      <td><code>(?&#x3C;=y)x</code></td>
+      <td>
+        <p>
+          Correspond à <code><em>x</em></code> seulement si
+          <code><em>x</em></code> est précédé par <code><em>y</em></code
+          >. C'est ce qu'on appelle une recherche arrière (<em>lookbehind</em>).
+        </p>
+        <p>
+          Ainsi /<code>(?&#x3C;=Jack)Sprat/</code> correspond à "Sprat"
+          seulement s'il est précédé de "Jack".<br /><code
+            >/(?&#x3C;=Jack|Tom)Sprat/</code
+          >
+          correspond à "Sprat" seulement s'il est précédé de "Jack" ou "Tom".<br />Toutefois,
+          "Jack" et "Tom" ne feront pas partie de la correspondance.
+        </p>
+      </td>
+    </tr>
+    <tr>
+      <td><code>(?&#x3C;!y)x</code></td>
+      <td>
+        <p>
+          Correspond à <code><em>x</em></code> uniquement si
+          <code><em>x</em></code> n'est pas précédé par
+          <code><em>y</em></code> (parfois appelée en anglais
+          <em>negated lookbehind</em>)<em>.</em>
+        </p>
+        <p>
+          Ainsi, <code>/(?&#x3C;!-)\d+/</code> correspondra à un nombre
+          seulement si celui-ci n'est pas précédé d'un signe moins.<br /><code
+            >/(?&#x3C;!-)\d+/.exec('3')</code
+          >
+          cible "3".<br /> <code>/(?&#x3C;!-)\d+/.exec('-3')</code>  ne trouve
+          aucune correspondance car le nombre est précédé d'un signe
+        </p>
+      </td>
+    </tr>
+  </tbody>
+</table>
+
+## Exemples
+
+### Assertion avant (_lookahead_)
+
+```js
+let regex = /Premier(?= test)/g;
+
+console.log('Premier test'.match(regex)); // [ 'Premier' ]
+console.log('Premier truc'.match(regex)); // null
+console.log("Voici le Premier test de l'année.".match(regex)); // [ 'Premier' ]
+console.log('Voici le Premier truc du mois.'.match(regex)); // null
+```
+
+### Assertion avant négative
+
+L'expression rationnelle `/\d+(?!\.)/` permettra de rechercher plusieurs chiffres si ceux-ci ne sont pas suivis d'un point décimal. Ainsi, `/\d+(?!\.)/.exec('3.141')` trouvera la sous-chaîne "141" mais pas "3."
+
+```js
+console.log(/\d+(?!\.)/g.exec('3.141')); // [ '141', index: 2, input: '3.141' ]
+```
+
+### Signification différente de `'?!'` entre les assertions et les intervalles
+
+La combinaison de caractères `?!` a un sens différent entre les [assertions](/fr/docs/Web/JavaScript/Guide/Expressions_régulières/Assertions) `/x(?!y)/` et les [intervalles](/fr/docs/Web/JavaScript/Guide/Expressions_régulières/Groupes_et_intervalles) `[^?!]`.
+
+```js
+let orangePasCitron = "Voulez-vous avoir une orange? Oui, je ne veux pas avoir de citron!";
+
+let choixPasCitron = /[^?!]+avoir(?! un citron)[^?!]+[?!]/gi
+console.log(orangePasCitron.match(choixPasCitron)); // [ 'Voulez-vous avoir une orange?' ]
+
+let choixPasOrange = /[^?!]+avoir(?! une orange)[^?!]+[?!]/gi
+console.log(orangePasCitron.match(choixPasOrange)); // [ 'Oui, je ne veux pas avoir de citron!' ]
+```
+
+### Assertion arrière (_lookbehind_)
+
+```js
+let oranges = ['espèce orange A ', 'sorte orange B', 'espèce orange C',];
+
+let especesOranges = oranges.filter( fruit => fruit.match(/(?<=espèce )orange/));
+console.log(especesOranges); // [ 'espèce orange A ', 'espèce orange C' ]
+```
diff --git a/files/fr/web/javascript/guide/regular_expressions/character_classes/index.html b/files/fr/web/javascript/guide/regular_expressions/character_classes/index.html
deleted file mode 100644
index ba3e075bce..0000000000
--- a/files/fr/web/javascript/guide/regular_expressions/character_classes/index.html
+++ /dev/null
@@ -1,181 +0,0 @@
----
-title: Classes de caractères
-slug: Web/JavaScript/Guide/Regular_Expressions/Character_Classes
-tags:
-  - Classes
-  - Guide
-  - JavaScript
-  - RegExp
-translation_of: Web/JavaScript/Guide/Regular_Expressions/Character_Classes
-original_slug: Web/JavaScript/Guide/Expressions_régulières/Classes_de_caractères
----
-<p>{{jsSidebar("JavaScript Guide")}}{{draft}}</p>
-
-<p>Les classes de caractères permettent de distinguer différents ensembles de caractères dans les expressions rationnelles (par exemple les chiffres d'une part et les lettres d'autre part).</p>
-
-<h2 id="Types">Types</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Caractères</th>
-   <th scope="col">Signification</th>
-  </tr>
- </thead>
- <tbody>
- </tbody>
- <tbody>
-  <tr>
-   <td><code>.</code></td>
-   <td>
-    <p>Par défaut, (Le point) correspond à n'importe quel caractère excepté un caractère de saut de ligne.</p>
-
-    <p>Ainsi, <code>/.n/</code> correspond à  'un' et 'en' dans "Un baobab nain en cours de  croissance" mais pas à 'nain'.</p>
-
-    <p>Si le marqueur <code>s</code> (<em>dotAll</em>) est utilisé, le point correspondra également aux caractères de saut de ligne.</p>
-
-    <p>Le marqueur <code>m</code> ne modifie pas le comportement du point.</p>
-
-    <p>Attention, si on utilise le point dans <a href="/fr/docs/Web/JavaScript/Guide/Expressions_régulières/Groupes_et_intervalles">un intervalle de caractères</a>, il n'aura plus cette signification spéciale.</p>
-   </td>
-  </tr>
-  <tr>
-   <td><code>\d</code></td>
-   <td>
-    <p>Correspond à un chiffre et est équivalent à <code>[0-9]</code>.</p>
-
-    <p>Ainsi, <code>/\d/</code> ou <code>/[0-9]/</code> correspond à '2' dans "H2O est la molécule de l'eau".</p>
-   </td>
-  </tr>
-  <tr>
-   <td><code>\D</code></td>
-   <td>
-    <p>Correspond à tout caractère qui n'est pas un chiffre et est équivalent à<code> [^0-9]</code>.</p>
-
-    <p>Ainsi, <code>/\D/</code> ou <code>/[^0-9]/</code> correspond à 'H' dans "H2O est la molécule de l'eau".</p>
-   </td>
-  </tr>
-  <tr>
-   <td><code>\w</code></td>
-   <td>
-    <p>Correspond à n'importe quel caractère alphanumérique de l'alphabet latin, y compris le tiret bas. C'est équivalent à <code>[A-Za-z0-9_]</code>.</p>
-
-    <p>Ainsi, <code>/\w/</code> correspond à 'l' dans "licorne", à '5' dans "5,28€", et à '3' dans "3D."</p>
-   </td>
-  </tr>
-  <tr>
-   <td><code>\W</code></td>
-   <td>
-    <p>Correspond à n'importe quel caractère n'étant pas un caractère de l'alphabet latin ou le tiret bas. Cela est équivalent à <code>[^A-Za-z0-9_]</code>.</p>
-
-    <p>Ainsi, <code>/\W/</code> ou <code>/[^A-Za-z0-9_]/</code> correspond à '%' dans "50%."</p>
-   </td>
-  </tr>
-  <tr>
-   <td><code>\s</code></td>
-   <td>
-    <p>Correspond à un blanc (cela comprend les espace, tabulation, saut de ligne ou saut de page). C'est équivalent à <code>[ \f\n\r\t\v\u00a0\u1680\u2000-\u200a\u2028\u2029\u202f\u205f\u3000\ufeff]</code>.</p>
-
-    <p>Ainsi, <code>/\s\w*/</code> correspond à ' toto' dans "truc toto".</p>
-   </td>
-  </tr>
-  <tr>
-   <td><code>\S</code></td>
-   <td>
-    <p>Correspond à un caractère qui n'est pas un blanc. C'est équivalent à <code>[^ \f\n\r\t\v\u00a0\u1680\u2000-\u200a\u2028\u2029\u202f\u205f\u3000\ufeff]</code>.</p>
-
-    <p>Ainsi, <code>/\S\w*/</code> correspond à 'truc' dans "truc toto".</p>
-   </td>
-  </tr>
-  <tr>
-   <td><code>\t</code></td>
-   <td>Correspond à une tabulation (U+0009).</td>
-  </tr>
-  <tr>
-   <td><code>\r</code></td>
-   <td>Correspond à un retour chariot (U+000D).</td>
-  </tr>
-  <tr>
-   <td><code>\n</code></td>
-   <td>Correspond à un saut de ligne (U+000A).</td>
-  </tr>
-  <tr>
-   <td><code>\v</code></td>
-   <td>Correspond à une tabulation verticale (U+000B).</td>
-  </tr>
-  <tr>
-   <td><code>\f</code></td>
-   <td>Correspond à un saut de page (U+000C).</td>
-  </tr>
-  <tr>
-   <td><code>[\b]</code></td>
-   <td>Correspond pour un retour arrière (U+0008). (À ne pas confondre avec <code>\b</code>, voir <a href="/fr/docs/Web/JavaScript/Guide/Expressions_régulières/Limites">les limites</a>).</td>
-  </tr>
-  <tr>
-   <td><code>\0</code></td>
-   <td>Correspond au caractère NULL (U+0000). Il ne doit pas être suivi d'un autre chiffre car <code>\0&lt;chiffres&gt;</code> est une <a href="/fr/docs/Web/JavaScript/Guide/Types_et_grammaire#Les_caractères_d'échappement">séquence d'échappement</a> pour les nombres en notation octale (si besoin d'utiliser un chiffre ensuite, on pourra utiliser la forme <code>\x00</code>, cf. ci-après).</td>
-  </tr>
-  <tr>
-   <td><code>\cX</code></td>
-   <td>
-    <p>Correspond au caractère de contrôle où <code><em>X</em></code> est une lettre entre A et Z. Correspond au caractèlres de contrôle correspondant entre <code>U+0001</code>-<code>U+001F</code>. Ainsi, <code>/\cM/</code> correspondra au caractère controle-M au sein d'une chaîne de caractères soit <code>"\r"</code> pour <code>"\r\n"</code>.</p>
-   </td>
-  </tr>
-  <tr>
-   <td><code>\xhh</code></td>
-   <td>Correspond au caractère dont le code hexadécimal est hh (deux chiffres hexadécimaux).</td>
-  </tr>
-  <tr>
-   <td><code>\uhhhh</code></td>
-   <td>Correspond au caractère dont le code est hhhh (quatre chiffres hexadécimaux).</td>
-  </tr>
-  <tr>
-   <td><code>\u{hhhh}</code> ou <code>\u{hhhhh}</code></td>
-   <td>(Uniquement actif quand le marqueur <code>u</code> est activé) Correspond au caractère dont la valeur Unicode est <code>hhhh</code> (en chiffre hexadécimaux).</td>
-  </tr>
-  <tr>
-   <td><code>\</code></td>
-   <td>
-    <p>La barre oblique inversée indique que le prochain caractère doit être traité spécifiquement ou échappé. Elle se comporte d'une de ces façons :</p>
-
-    <ul>
-     <li>Pour les caractères normalement traités littéralement, cela indique que le prochain caractère est spécial et qu'il ne doit pas être interprété littéralement. Ainsi, <code>/b/</code> correspondra à la lettre "b" mais en utilisant la barre oblique inversée devant <code>/\b/</code>, on cherchera une limite de mot.</li>
-     <li>Pour les caractères spéciaux, la barre indique que le caractère doit être interprété littéralement. Ainsi, "*" est un caractère spécial (un quantificateur qui signifie que le caractère précédent doit être présent 0 ou plusieurs fois) : <code>/a*/</code> cherchera une correspondance avec 0 ou plusieurs "a". Si on souhaite trouver le caractère <code>*</code> dans une chaîne, on placera la barre oblique inversée devant : on a ainsi <code>/a\*/</code> qui permet de trouver "a*" dans une chaîne.</li>
-    </ul>
-
-    <div class="blockIndicator note">
-    <p><strong>Note :</strong> L'échappement vaut également avec la barre oblique inversée. Autrement dit, si on cherche la présence de <code>\</code> dans une chaîne, on pourra utiliser l'expression <code>/\\/</code> (où la première barre oblique échape la seconde).</p>
-    </div>
-   </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('ES3')}}</td>
-   <td>{{Spec2('ES3')}}</td>
-   <td>Définition initiale. Implémentée avec JavaScript 1.1.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.RegExp.property_escapes")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{JSxRef("RegExp")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/guide/regular_expressions/character_classes/index.md b/files/fr/web/javascript/guide/regular_expressions/character_classes/index.md
new file mode 100644
index 0000000000..1d37d5b70d
--- /dev/null
+++ b/files/fr/web/javascript/guide/regular_expressions/character_classes/index.md
@@ -0,0 +1,263 @@
+---
+title: Classes de caractères
+slug: Web/JavaScript/Guide/Regular_Expressions/Character_Classes
+tags:
+  - Classes
+  - Guide
+  - JavaScript
+  - RegExp
+translation_of: Web/JavaScript/Guide/Regular_Expressions/Character_Classes
+original_slug: Web/JavaScript/Guide/Expressions_régulières/Classes_de_caractères
+---
+{{jsSidebar("JavaScript Guide")}}{{draft}}
+
+Les classes de caractères permettent de distinguer différents ensembles de caractères dans les expressions rationnelles (par exemple les chiffres d'une part et les lettres d'autre part).
+
+## Types
+
+<table class="standard-table">
+  <thead>
+    <tr>
+      <th scope="col">Caractères</th>
+      <th scope="col">Signification</th>
+    </tr>
+  </thead>
+  <tbody></tbody>
+  <tbody>
+    <tr>
+      <td><code>.</code></td>
+      <td>
+        <p>
+          Par défaut, (Le point) correspond à n'importe quel caractère excepté
+          un caractère de saut de ligne.
+        </p>
+        <p>
+          Ainsi, <code>/.n/</code> correspond à  'un' et 'en' dans "Un baobab
+          nain en cours de  croissance" mais pas à 'nain'.
+        </p>
+        <p>
+          Si le marqueur <code>s</code> (<em>dotAll</em>) est utilisé, le point
+          correspondra également aux caractères de saut de ligne.
+        </p>
+        <p>
+          Le marqueur <code>m</code> ne modifie pas le comportement du point.
+        </p>
+        <p>
+          Attention, si on utilise le point dans
+          <a
+            href="/fr/docs/Web/JavaScript/Guide/Expressions_régulières/Groupes_et_intervalles"
+            >un intervalle de caractères</a
+          >, il n'aura plus cette signification spéciale.
+        </p>
+      </td>
+    </tr>
+    <tr>
+      <td><code>\d</code></td>
+      <td>
+        <p>Correspond à un chiffre et est équivalent à <code>[0-9]</code>.</p>
+        <p>
+          Ainsi, <code>/\d/</code> ou <code>/[0-9]/</code> correspond à '2' dans
+          "H2O est la molécule de l'eau".
+        </p>
+      </td>
+    </tr>
+    <tr>
+      <td><code>\D</code></td>
+      <td>
+        <p>
+          Correspond à tout caractère qui n'est pas un chiffre et est équivalent
+          à<code> [^0-9]</code>.
+        </p>
+        <p>
+          Ainsi, <code>/\D/</code> ou <code>/[^0-9]/</code> correspond à 'H'
+          dans "H2O est la molécule de l'eau".
+        </p>
+      </td>
+    </tr>
+    <tr>
+      <td><code>\w</code></td>
+      <td>
+        <p>
+          Correspond à n'importe quel caractère alphanumérique de l'alphabet
+          latin, y compris le tiret bas. C'est équivalent à
+          <code>[A-Za-z0-9_]</code>.
+        </p>
+        <p>
+          Ainsi, <code>/\w/</code> correspond à 'l' dans "licorne", à '5' dans
+          "5,28€", et à '3' dans "3D."
+        </p>
+      </td>
+    </tr>
+    <tr>
+      <td><code>\W</code></td>
+      <td>
+        <p>
+          Correspond à n'importe quel caractère n'étant pas un caractère de
+          l'alphabet latin ou le tiret bas. Cela est équivalent à
+          <code>[^A-Za-z0-9_]</code>.
+        </p>
+        <p>
+          Ainsi, <code>/\W/</code> ou <code>/[^A-Za-z0-9_]/</code> correspond à
+          '%' dans "50%."
+        </p>
+      </td>
+    </tr>
+    <tr>
+      <td><code>\s</code></td>
+      <td>
+        <p>
+          Correspond à un blanc (cela comprend les espace, tabulation, saut de
+          ligne ou saut de page). C'est équivalent à
+          <code
+            >[
+            \f\n\r\t\v\u00a0\u1680\u2000-\u200a\u2028\u2029\u202f\u205f\u3000\ufeff]</code
+          >.
+        </p>
+        <p>
+          Ainsi, <code>/\s\w*/</code> correspond à ' toto' dans "truc toto".
+        </p>
+      </td>
+    </tr>
+    <tr>
+      <td><code>\S</code></td>
+      <td>
+        <p>
+          Correspond à un caractère qui n'est pas un blanc. C'est équivalent à
+          <code
+            >[^
+            \f\n\r\t\v\u00a0\u1680\u2000-\u200a\u2028\u2029\u202f\u205f\u3000\ufeff]</code
+          >.
+        </p>
+        <p>Ainsi, <code>/\S\w*/</code> correspond à 'truc' dans "truc toto".</p>
+      </td>
+    </tr>
+    <tr>
+      <td><code>\t</code></td>
+      <td>Correspond à une tabulation (U+0009).</td>
+    </tr>
+    <tr>
+      <td><code>\r</code></td>
+      <td>Correspond à un retour chariot (U+000D).</td>
+    </tr>
+    <tr>
+      <td><code>\n</code></td>
+      <td>Correspond à un saut de ligne (U+000A).</td>
+    </tr>
+    <tr>
+      <td><code>\v</code></td>
+      <td>Correspond à une tabulation verticale (U+000B).</td>
+    </tr>
+    <tr>
+      <td><code>\f</code></td>
+      <td>Correspond à un saut de page (U+000C).</td>
+    </tr>
+    <tr>
+      <td><code>[\b]</code></td>
+      <td>
+        Correspond pour un retour arrière (U+0008). (À ne pas confondre avec
+        <code>\b</code>, voir
+        <a href="/fr/docs/Web/JavaScript/Guide/Expressions_régulières/Limites"
+          >les limites</a
+        >).
+      </td>
+    </tr>
+    <tr>
+      <td><code>\0</code></td>
+      <td>
+        Correspond au caractère NULL (U+0000). Il ne doit pas être suivi d'un
+        autre chiffre car <code>\0&#x3C;chiffres></code> est une
+        <a
+          href="/fr/docs/Web/JavaScript/Guide/Types_et_grammaire#Les_caractères_d&#x27;échappement"
+          >séquence d'échappement</a
+        >
+        pour les nombres en notation octale (si besoin d'utiliser un chiffre
+        ensuite, on pourra utiliser la forme <code>\x00</code>, cf. ci-après).
+      </td>
+    </tr>
+    <tr>
+      <td><code>\cX</code></td>
+      <td>
+        <p>
+          Correspond au caractère de contrôle où <code><em>X</em></code> est une
+          lettre entre A et Z. Correspond au caractèlres de contrôle
+          correspondant entre <code>U+0001</code>-<code>U+001F</code>. Ainsi,
+          <code>/\cM/</code> correspondra au caractère controle-M au sein d'une
+          chaîne de caractères soit <code>"\r"</code> pour <code>"\r\n"</code>.
+        </p>
+      </td>
+    </tr>
+    <tr>
+      <td><code>\xhh</code></td>
+      <td>
+        Correspond au caractère dont le code hexadécimal est hh (deux chiffres
+        hexadécimaux).
+      </td>
+    </tr>
+    <tr>
+      <td><code>\uhhhh</code></td>
+      <td>
+        Correspond au caractère dont le code est hhhh (quatre chiffres
+        hexadécimaux).
+      </td>
+    </tr>
+    <tr>
+      <td><code>\u{hhhh}</code> ou <code>\u{hhhhh}</code></td>
+      <td>
+        (Uniquement actif quand le marqueur <code>u</code> est activé)
+        Correspond au caractère dont la valeur Unicode est <code>hhhh</code> (en
+        chiffre hexadécimaux).
+      </td>
+    </tr>
+    <tr>
+      <td><code>\</code></td>
+      <td>
+        <p>
+          La barre oblique inversée indique que le prochain caractère doit être
+          traité spécifiquement ou échappé. Elle se comporte d'une de ces façons
+          :
+        </p>
+        <ul>
+          <li>
+            Pour les caractères normalement traités littéralement, cela indique
+            que le prochain caractère est spécial et qu'il ne doit pas être
+            interprété littéralement. Ainsi, <code>/b/</code> correspondra à la
+            lettre "b" mais en utilisant la barre oblique inversée devant
+            <code>/\b/</code>, on cherchera une limite de mot.
+          </li>
+          <li>
+            Pour les caractères spéciaux, la barre indique que le caractère doit
+            être interprété littéralement. Ainsi, "*" est un caractère spécial
+            (un quantificateur qui signifie que le caractère précédent doit être
+            présent 0 ou plusieurs fois) : <code>/a*/</code> cherchera une
+            correspondance avec 0 ou plusieurs "a". Si on souhaite trouver le
+            caractère <code>*</code> dans une chaîne, on placera la barre
+            oblique inversée devant : on a ainsi <code>/a\*/</code> qui permet
+            de trouver "a*" dans une chaîne.
+          </li>
+        </ul>
+        <div class="blockIndicator note">
+          <p>
+            <strong>Note :</strong> L'échappement vaut également avec la barre
+            oblique inversée. Autrement dit, si on cherche la présence de
+            <code>\</code> dans une chaîne, on pourra utiliser l'expression
+            <code>/\\/</code> (où la première barre oblique échape la seconde).
+          </p>
+        </div>
+      </td>
+    </tr>
+  </tbody>
+</table>
+
+## Spécifications
+
+| Spécification            | État                 | Commentaires                                          |
+| ------------------------ | -------------------- | ----------------------------------------------------- |
+| {{SpecName('ES3')}} | {{Spec2('ES3')}} | Définition initiale. Implémentée avec JavaScript 1.1. |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.RegExp.property_escapes")}}
+
+## Voir aussi
+
+- {{JSxRef("RegExp")}}
diff --git a/files/fr/web/javascript/guide/regular_expressions/groups_and_ranges/index.html b/files/fr/web/javascript/guide/regular_expressions/groups_and_ranges/index.html
deleted file mode 100644
index 498e9e7ce8..0000000000
--- a/files/fr/web/javascript/guide/regular_expressions/groups_and_ranges/index.html
+++ /dev/null
@@ -1,92 +0,0 @@
----
-title: Groupes et intervalles
-slug: Web/JavaScript/Guide/Regular_Expressions/Groups_and_Ranges
-tags:
-  - Groupes
-  - Guide
-  - Intervalles
-  - JavaScript
-  - RegExp
-translation_of: Web/JavaScript/Guide/Regular_Expressions/Groups_and_Ranges
-original_slug: Web/JavaScript/Guide/Expressions_régulières/Groupes_et_intervalles
----
-<p>{{jsSidebar("JavaScript Guide")}}{{draft}}</p>
-
-<p>Les groupes et intervalles permettent de représenter des groupes ou des intervalles de caractères dans des expressions rationnelles.</p>
-
-<h2 id="Types">Types</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Caractères</th>
-   <th scope="col">Signification</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><code>x|y</code></td>
-   <td>
-    <p>Correspond à 'x' ou 'y'.</p>
-
-    <p>Ainsi, <code>/vert|rouge/</code> correspond à 'vert' dans "feu vert" et à 'rouge' dans "feu rouge".</p>
-   </td>
-  </tr>
-  <tr>
-   <td><code>[xyz]</code> ou <code>[a-c]</code></td>
-   <td>Un ensemble de caractère. Ce type de motif correspond pour n'importe quel caractètre présent entre les crochets, y compris les <a href="/fr/docs/Web/JavaScript/Guide/Types_et_grammaire#Les_caractères_d'échappement">séquences d'échappement</a>. Les caractères spéciaux comme le point (.) et l'astérisque ne sont pas considérés comme spéciaux au sein d'un ensemble et n'ont donc pas besoin d'être échappés. Il est possible de donner un ensemble sur un intervalle de caractères en utilisant un tiret (-), comme le montre l'exemple qui suit.<br>
-    <br>
-    Le motif <code>[a-d]</code>,  aura les mêmes correspondances que <code>[abcd]</code>, correspondant au 'b' de "bulle" et au 'c' de "ciel". Les motifis <code>/[a-z.]+/ </code>et <code>/[\w.]+/</code> correspondront pour la chaîne entirère : "Adre.ss.e".</td>
-  </tr>
-  <tr>
-   <td>
-    <p><code>[^xyz]</code> ou <code>[^a-c]</code></p>
-   </td>
-   <td>
-
-
-    <p>Exclusion d'un ensemble de caractères. Cela correspond à tout ce qui n'est pas compris entre crochets. Il est possible de fournir un intervalle de caractères en utilisant un tiret (-). Les autres règles qui s'appliquent pour l'ensemble de caractères (ci-avant) s'appliquent également ici.</p>
-
-    <p>Par exemple, <code>[^abc]</code> est équivalent à <code>[^a-c]</code>. Ils correspondent à 'u' dans "bulle" et à 'i' dans "ciel".</p>
-
-    <div class="note">
-    <p><strong>Note :</strong> Le caractère <code>^</code> peut également être utilisé afin d'indiquer le <a href="/fr/docs/Web/JavaScript/Guide/Expressions_régulières/Limites">début d'un champ</a>.</p>
-    </div>
-   </td>
-  </tr>
-  <tr>
-   <td><code>(x)</code></td>
-   <td>
-    <p>Correspond à 'x' et garde la correspondance en mémoire. Les parenthèses permettent de <em>capturer </em>l'expression dans un « groupe ».<br>
-     <br>
-     Les '<code>(toto)</code>' et '<code>(truc)</code>', dans le motif <code>/(toto) (truc) \1 \2/</code> correspondent et gardent en mémoire les deux premiers mots de la chaîne de caractère "toto truc toto truc". Les <code>\1</code> et <code>\2</code> du motif correspondent respectivement à la première et à la deuxième correspondances pour les sous-chaînes entre parenthèses. Lorsqu'on souhaite effectuer un remplacement, on utilisera <code>$1</code> et <code>$2</code> pour faire référence au premier et second groupe et <code>$</code><code>n </code>pour faire référence au n-ième groupe capturé (ex. <code>('toto truc'.replace(/(...) (...)/, '$2 $1').</code> <code>$&amp;</code> fera référence à la chaîne entière).</p>
-
-    <p>Capturing groups have a performance penalty. If you don't need the matched substring to be recalled, prefer non-capturing parentheses (see below).</p>
-
-    <p><code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/match">String.match()</a></code> won't return groups if the <code>/.../g</code> flag is set. However, you can still use <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/matchAll">String.matchAll()</a></code> to get all matches.</p>
-   </td>
-  </tr>
-  <tr>
-   <td><code>\n</code></td>
-   <td>
-    <p>Avec <code><em>n</em></code> un entier positif. Cela permet de faire référence à la dernière sous-chaîne qui correspond au n-ième groupe entre parenthèses de l'expression rationnelle (en comptant les parenthèses gauche). Ainsi, <code>/apple(,)\sorange\1/</code> correspondra à "apple, orange," dans "apple, orange, cherry, peach".</p>
-   </td>
-  </tr>
-  <tr>
-   <td><code>(?&lt;Nom&gt;x)</code></td>
-   <td>
-    <p>Correspond à <code>x</code> et nomme la correspondance. Les correspondances associées pourront être retrouvées via le nom indiqué. Les chevrons (<code>'&lt;'</code> et <code>'&gt;'</code>) sont obligatoires pour encadrer le nom.</p>
-
-    <p>Ainsi, si on veut extraire la composante de zone d'un numéro de téléphone aux États-Unis, on pourra écrire <code>/\((?&lt;area&gt;\d\d\d)\)/</code> et récupérer le nombre voulu avec <code>matches.groups.area</code>.</p>
-   </td>
-  </tr>
-  <tr>
-   <td><code>(?:<em>x</em>)</code></td>
-   <td>Correspond à 'x' mais ne garde pas la correspondance en mémoire. Les parenthèses ne <em>capturent</em> pas l'expression et permettent d'utiliser des sous-expressions d'une expression régulière pour travailler plus finement. L'expression <code>/(?:zoo){1,2}/</code> sans parenthèes non-capturantes <code>les caractères {1,2}</code> ne s'appliqueraient qu'au dernier 'o' de 'zoo'. Avec les parenthèses capturantes, <code>{1,2}</code> s'applique au mot entier 'zoo'.</td>
-  </tr>
- </tbody>
-</table>
-
-<div class="note">
-<p><strong>Note :</strong> Firefox ne prend pas en charge les groupes nommés. Pour plus d'informations, voir <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1362154">le bug correspondant</a>.</p>
-</div>
diff --git a/files/fr/web/javascript/guide/regular_expressions/groups_and_ranges/index.md b/files/fr/web/javascript/guide/regular_expressions/groups_and_ranges/index.md
new file mode 100644
index 0000000000..1233a65060
--- /dev/null
+++ b/files/fr/web/javascript/guide/regular_expressions/groups_and_ranges/index.md
@@ -0,0 +1,172 @@
+---
+title: Groupes et intervalles
+slug: Web/JavaScript/Guide/Regular_Expressions/Groups_and_Ranges
+tags:
+  - Groupes
+  - Guide
+  - Intervalles
+  - JavaScript
+  - RegExp
+translation_of: Web/JavaScript/Guide/Regular_Expressions/Groups_and_Ranges
+original_slug: Web/JavaScript/Guide/Expressions_régulières/Groupes_et_intervalles
+---
+{{jsSidebar("JavaScript Guide")}}{{draft}}
+
+Les groupes et intervalles permettent de représenter des groupes ou des intervalles de caractères dans des expressions rationnelles.
+
+## Types
+
+<table class="standard-table">
+  <thead>
+    <tr>
+      <th scope="col">Caractères</th>
+      <th scope="col">Signification</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td><code>x|y</code></td>
+      <td>
+        <p>Correspond à 'x' ou 'y'.</p>
+        <p>
+          Ainsi, <code>/vert|rouge/</code> correspond à 'vert' dans "feu vert"
+          et à 'rouge' dans "feu rouge".
+        </p>
+      </td>
+    </tr>
+    <tr>
+      <td><code>[xyz]</code> ou <code>[a-c]</code></td>
+      <td>
+        Un ensemble de caractère. Ce type de motif correspond pour n'importe
+        quel caractètre présent entre les crochets, y compris les
+        <a
+          href="/fr/docs/Web/JavaScript/Guide/Types_et_grammaire#Les_caractères_d&#x27;échappement"
+          >séquences d'échappement</a
+        >. Les caractères spéciaux comme le point (.) et l'astérisque ne sont
+        pas considérés comme spéciaux au sein d'un ensemble et n'ont donc pas
+        besoin d'être échappés. Il est possible de donner un ensemble sur un
+        intervalle de caractères en utilisant un tiret (-), comme le montre
+        l'exemple qui suit.<br /><br />Le motif <code>[a-d]</code>,  aura les
+        mêmes correspondances que <code>[abcd]</code>, correspondant au 'b' de
+        "bulle" et au 'c' de "ciel". Les motifis <code>/[a-z.]+/ </code>et
+        <code>/[\w.]+/</code> correspondront pour la chaîne entirère :
+        "Adre.ss.e".
+      </td>
+    </tr>
+    <tr>
+      <td>
+        <p><code>[^xyz]</code> ou <code>[^a-c]</code></p>
+      </td>
+      <td>
+        <p>
+          Exclusion d'un ensemble de caractères. Cela correspond à tout ce qui
+          n'est pas compris entre crochets. Il est possible de fournir un
+          intervalle de caractères en utilisant un tiret (-). Les autres règles
+          qui s'appliquent pour l'ensemble de caractères (ci-avant) s'appliquent
+          également ici.
+        </p>
+        <p>
+          Par exemple, <code>[^abc]</code> est équivalent à <code>[^a-c]</code>.
+          Ils correspondent à 'u' dans "bulle" et à 'i' dans "ciel".
+        </p>
+        <div class="note">
+          <p>
+            <strong>Note :</strong> Le caractère <code>^</code> peut également
+            être utilisé afin d'indiquer le
+            <a
+              href="/fr/docs/Web/JavaScript/Guide/Expressions_régulières/Limites"
+              >début d'un champ</a
+            >.
+          </p>
+        </div>
+      </td>
+    </tr>
+    <tr>
+      <td><code>(x)</code></td>
+      <td>
+        <p>
+          Correspond à 'x' et garde la correspondance en mémoire. Les
+          parenthèses permettent de <em>capturer </em>l'expression dans un «
+          groupe ».<br /><br />Les '<code>(toto)</code>' et
+          '<code>(truc)</code>', dans le motif
+          <code>/(toto) (truc) \1 \2/</code> correspondent et gardent en mémoire
+          les deux premiers mots de la chaîne de caractère "toto truc toto
+          truc". Les <code>\1</code> et <code>\2</code> du motif correspondent
+          respectivement à la première et à la deuxième correspondances pour les
+          sous-chaînes entre parenthèses. Lorsqu'on souhaite effectuer un
+          remplacement, on utilisera <code>$1</code> et <code>$2</code> pour
+          faire référence au premier et second groupe et <code>$</code
+          ><code>n </code>pour faire référence au n-ième groupe capturé (ex.
+          <code>('toto truc'.replace(/(...) (...)/, '$2 $1').</code>
+          <code>$&#x26;</code> fera référence à la chaîne entière).
+        </p>
+        <p>
+          Capturing groups have a performance penalty. If you don't need the
+          matched substring to be recalled, prefer non-capturing parentheses
+          (see below).
+        </p>
+        <p>
+          <code
+            ><a
+              href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/match"
+              >String.match()</a
+            ></code
+          >
+          won't return groups if the <code>/.../g</code> flag is set. However,
+          you can still use
+          <code
+            ><a
+              href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/matchAll"
+              >String.matchAll()</a
+            ></code
+          >
+          to get all matches.
+        </p>
+      </td>
+    </tr>
+    <tr>
+      <td><code>\n</code></td>
+      <td>
+        <p>
+          Avec <code><em>n</em></code> un entier positif. Cela permet de faire
+          référence à la dernière sous-chaîne qui correspond au n-ième groupe
+          entre parenthèses de l'expression rationnelle (en comptant les
+          parenthèses gauche). Ainsi,
+          <code>/apple(,)\sorange\1/</code> correspondra à "apple, orange," dans
+          "apple, orange, cherry, peach".
+        </p>
+      </td>
+    </tr>
+    <tr>
+      <td><code>(?&#x3C;Nom>x)</code></td>
+      <td>
+        <p>
+          Correspond à <code>x</code> et nomme la correspondance. Les
+          correspondances associées pourront être retrouvées via le nom indiqué.
+          Les chevrons (<code>'&#x3C;'</code> et <code>'>'</code>) sont
+          obligatoires pour encadrer le nom.
+        </p>
+        <p>
+          Ainsi, si on veut extraire la composante de zone d'un numéro de
+          téléphone aux États-Unis, on pourra écrire
+          <code>/\((?&#x3C;area>\d\d\d)\)/</code> et récupérer le nombre voulu
+          avec <code>matches.groups.area</code>.
+        </p>
+      </td>
+    </tr>
+    <tr>
+      <td><code>(?:<em>x</em>)</code></td>
+      <td>
+        Correspond à 'x' mais ne garde pas la correspondance en mémoire. Les
+        parenthèses ne <em>capturent</em> pas l'expression et permettent
+        d'utiliser des sous-expressions d'une expression régulière pour
+        travailler plus finement. L'expression <code>/(?:zoo){1,2}/</code> sans
+        parenthèes non-capturantes <code>les caractères {1,2}</code> ne
+        s'appliqueraient qu'au dernier 'o' de 'zoo'. Avec les parenthèses
+        capturantes, <code>{1,2}</code> s'applique au mot entier 'zoo'.
+      </td>
+    </tr>
+  </tbody>
+</table>
+
+> **Note :** Firefox ne prend pas en charge les groupes nommés. Pour plus d'informations, voir [le bug correspondant](https://bugzilla.mozilla.org/show_bug.cgi?id=1362154).
diff --git a/files/fr/web/javascript/guide/regular_expressions/index.html b/files/fr/web/javascript/guide/regular_expressions/index.html
deleted file mode 100644
index dda529fffd..0000000000
--- a/files/fr/web/javascript/guide/regular_expressions/index.html
+++ /dev/null
@@ -1,746 +0,0 @@
----
-title: Expressions rationnelles
-slug: Web/JavaScript/Guide/Regular_Expressions
-tags:
-  - Guide
-  - Intermédiaire
-  - JavaScript
-  - RegExp
-translation_of: Web/JavaScript/Guide/Regular_Expressions
-original_slug: Web/JavaScript/Guide/Expressions_régulières
----
-<p>{{jsSidebar("JavaScript Guide")}}{{PreviousNext("Web/JavaScript/Guide/Formatage_du_texte", "Web/JavaScript/Guide/Collections_indexées")}}</p>
-
-<p>Les expressions rationnelles sont des motifs utilisés pour correspondre à certaines combinaisons de caractères au sein de chaînes de caractères. En JavaScript, les expressions rationnelles sont également des objets. Ces motifs sont utilisés avec les méthodes {{jsxref("RegExp.exec", "exec")}} et {{jsxref("RegExp.test", "test")}} de {{jsxref("RegExp")}}, et avec les méthodes {{jsxref("String.match", "match")}}, {{jsxref("String.matchAll", "matchAll")}}, {{jsxref("String.replace", "replace")}}, {{jsxref("String.search", "search")}} et {{jsxref("String.split", "split")}} de {{jsxref("String")}}. Ce chapitre explique comment utiliser les expressions rationnelles en JavaScript (aussi appelées expressions régulières ou « <em>RegExp</em> »).</p>
-
-<h2 id="Créer_une_expression_rationnelle">Créer une expression rationnelle</h2>
-
-<p>Il est possible de construire une expression rationnelle de deux façons :</p>
-
-<ul>
- <li>Utiliser un littéral d'expression régulière, qui correspond à un motif contenu entre deux barres obliques, par exemple :
-  <pre class="brush: js notranslate">var re = /ab+c/;
-</pre>
-
-  <p>Lorsque les littéraux d'expression régulière sont utilisés, l'expression est compilée lors du chargement du script. Il est préférable d'utiliser cette méthode lorsque l'expression régulière reste constante, afin d'avoir de meilleurs performances.</p>
- </li>
- <li>Appeler le constructeur de l'objet {{jsxref("RegExp")}}, par exemple :
-  <pre class="brush: js notranslate">var re = new RegExp("ab+c");
-</pre>
-
-  <p>Avec cette méthode, l'expression rationnelle est compilée lors de l'exécution. On utilisera cette méthode lorsque le motif utilisé est variable ou provient d'une autre source (par exemple une interaction utilisateur).</p>
- </li>
-</ul>
-
-<h2 id="Écrire_une_expression_rationnelle">Écrire une expression rationnelle</h2>
-
-<p>Le motif d'une expression rationnelle est composé de caractères simples (comme <code>/abc/</code>), ou de caractères simples et spéciaux, comme <code>/ab*c/</code> ou <code>/Chapitre (\d+)\.\d*/ </code>. Le dernier exemple utilise des parenthèses qui permettent d'avoir une « mémoire ». La correspondance avec le motif contenu entre parenthèses pourra être utilisée par la suite. Ceci est décrit avec <a href="#parentheses">ce paragraphe</a>.</p>
-
-<h3 id="Utiliser_des_motifs_simples">Utiliser des motifs simples</h3>
-
-<p>Les motifs simples sont construits à partir de caractères pour lesquels on souhaite avoir une correspondance directe. Le motif <code>/des/</code> correspond lorsqu'on observe exactement les caractères 'des' ensemble et dans cet ordre précis. On pourrait utiliser ce motif et détecter une correspondance dans les chaînes suivantes : "J'ai vu des licornes ?" et "Sa description de licorne était superbe" car la chaîne de caractères 'des' y est présente (dans le mot description pour le second exemple). Il n'y aura pas de correspondance avec la chaîne de caractères "Toc toc" car 'des' n'est pas présente.</p>
-
-<h3 id="Utiliser_des_caractères_spéciaux">Utiliser des caractères spéciaux</h3>
-
-<p>Lorsque le motif à trouver est plus complexe qu'une simple égalité (trouver tous les B, les blancs...), le motif devra contenir des caractères spéciaux. Ainsi, le motif <code>/ab*c/</code> correspond à toutes les combinaisons de caractères qui possèdent un seul 'a' suivi de zéro ou plusieurs 'b' (l'astérisque utilisée ici signifie que l'élément qui la précède doit être présent zéro ou plusieurs fois) qui sont immédiatement suivis d'un 'c'. Par exemple, la chaîne de caractère "cbbabbbbcdebc" correspond au motif avec la chaîne de caractères 'abbbbc'.</p>
-
-<p>Les pages suivantes décrivent en détail les caractères spéciaux qui peuvent être utilisés afin de composer une expression rationnelle.</p>
-
-<dl>
- <dt><a href="/fr/docs/Web/JavaScript/Guide/Expressions_régulières/Assertions">Assertions</a></dt>
- <dd>Une assertion caractérisant la façon dont la correspondance peut se produire (en recherchant un motif avant, après ou avec une expression conditionnelle).</dd>
- <dt><a href="/fr/docs/Web/JavaScript/Guide/Expressions_régulières/Limites">Limites</a></dt>
- <dd>Permet d'indiquer le début ou la fin d'une ligne ou d'un mot.</dd>
- <dt><a href="/fr/docs/Web/JavaScript/Guide/Expressions_régulières/Classes_de_caractères">Classes de caractère</a></dt>
- <dd>Les classes permettent de distinguer différents caractères selon différents groupes (par exemple les lettres et les chiffres).</dd>
- <dt><a href="/fr/docs/Web/JavaScript/Guide/Expressions_régulières/Groupes_et_intervalles">Groupes et intervalles</a></dt>
- <dd>Permet d'indiquer un groupe ou un intervalle de caractères.</dd>
- <dt><a href="/fr/docs/Web/JavaScript/Guide/Expressions_régulières/Quantificateurs">Quantificateurs</a></dt>
- <dd>Permet d'indiquer un nombre de caractères ou d'expressions qui doivent correspondre.</dd>
- <dt><a href="/fr/docs/Web/JavaScript/Guide/Expressions_régulières/Unicode_Properties">Propriétés Unicode</a></dt>
- <dd>Permet de distinguer les caractères en fonction de leurs caractéristiques Unicode (majuscule/minuscule, symbole mathématique, ponctuation).</dd>
-</dl>
-
-<h3 id="Échapper_des_caractères">Échapper des caractères</h3>
-
-<p>SI on souhaite rechercher certains caractères dans une chaîne de caractères et que ceux-ci ont une signification spéciale lorsqu'ils font partie d'une expression rationnelle (ex. "*"), il faudra échapper ces caractères spéciaux en plaçant une barre oblique inversée (<em>backslash</em> "\") devant. Ainsi, si on souhaite trouver un "a" suivi d'un astérisque ("*") suivi d'un "b", on pourra composer l'expression rationnelle : <code>/a\*b/</code> où la barre oblique inversée échappe l'astérisque afin de lui enlever sa signification particulière.</p>
-
-<p>De même si on écrit un littéral d'expression rationnelle et qu'on souhaite rechercher une barre oblique ("/") dans la chaîne cible, on pourra échapper ce caractère (sinon, il aura sa signification particulière aux expressions rationnelles et indiquera la fin du motif). Si on cherche la présence de "/exemple/" dans une chaîne de caractères, on pourra utiliser le littéral <code>/\/exemple\//</code>.</p>
-
-<p>Il en va de même avec la barre oblique inversée (dont la signification spécifique est justement l'échappement) : si on veut rechercher la chaîne "C:\", on pourra utiliser le motif <code>/C:\\/</code> (la première barre oblique inversée sert à échapper la seconde).</p>
-
-<p>Lorsqu'on utilise le constructeur {{jsxref("RegExp")}} avec une chaîne de caractères en paramètre (plutôt qu'un littéral), il faudra échapper la barre oblique inversée qui a un sens particulier dans les chaînes de caractères. Ainsi, le littéral <code>/a\*b/</code> et <code>new RegExp("a\\*b")</code> créeront la même expression (qui permet de chercher la lettre "a", suivie d'un astérisque, suivi de la lettre "b").</p>
-
-<p>La tableau qui suit fournit une liste complète des caractères spéciaux pouvant être utilisés dans les expressions régulières ainsi que leur signification.</p>
-
-<table class="standard-table">
- <caption>Caractères spéciaux utilisables pour les expressions rationnelles.</caption>
- <thead>
-  <tr>
-   <th scope="col">Caractère</th>
-   <th scope="col">Signification</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><code>\</code></td>
-   <td>
-    <p>Correspond selon les règles suivantes :<br>
-     <br>
-     Une barre oblique inversée (<em>backslash</em>) précédant un caractère non spécial indique que le caractère qui suit est spécial et qu'il ne doit pas être interprété directement. Ainsi, un '<code>b</code>', sans <code>\</code> avant, correspondra pour les 'b' minuscules quel que soit leur position. En revanche '<code>\b</code>' ne correspondra à aucun caractère mais indique <a href="#special-word-boundary">un caractère de fin de mot</a>.<br>
-     <br>
-     Un <em>backslash</em> précédant un caractère spécial indique que le caractère qui suit doit être interprété littéralement (et non pas comme un caractère spécial). Ainsi, le motif <code>/a*/</code> utilise le caractère spécial '<code>*</code>' pour correspondre à 0 ou plusieurs 'a'. Le motif <code>/a\*/</code>, au contraire, rend '<code>*</code>' non-spécial pour correspondre aux chaînes de caractères qui comportent la lettre a et une astérisque, comme 'a*'.<br>
-     <br>
-     Il ne faut pas oublier d'échapper le caractère <code>\</code> car lui-même est un caractère d'échappement dans les chaînes de caractères. Cela est utile lorsqu'on utilise la notation RegExp("motif").</p>
-   </td>
-  </tr>
-  <tr>
-   <td><code>^</code></td>
-   <td>Correspond au début la séquence. Si le marqueur (<em>flag</em>) de lignes multiples vaut <code>true</code>, il correspondra également immédiatement après un caractère de saut de ligne.<br>
-    <br>
-    Ainsi, <code>/^A/</code> ne correspond pas au 'A' de "un A", mais correspond au 'A' de "Arceau".<br>
-    <br>
-    Le caractère '<code>^</code>' possède un sens différent lorsqu'il est utilisé dans un motif d'ensemble de caractères. Voir les <a href="#special-negated-character-set">compléments sur les ensembles de caractères </a>pour plus de détails et d'exemples.</td>
-  </tr>
-  <tr>
-   <td><code>$</code></td>
-   <td>
-    <p>Correspond à la fin de la séquence. Si le marqueur (<em>flag</em>) de lignes multiples vaut true, il correspondra également immédiatement avant un caractère de saut de ligne.</p>
-
-    <p>Ainsi, <code>/t$/</code> ne correspond pas au 't' de "printemps", mais correspond au 't' de "aliment".</p>
-   </td>
-  </tr>
-  <tr>
-   <td><code>*</code></td>
-   <td>
-    <p>Correspond à l'expression précédente qui est répétée 0 ou plusieurs fois. Équivalent à <code>{0,}</code></p>
-
-    <p>Ainsi, <code>/bo*/</code> correspond à 'boo' dans "Un booléen" et à 'b' dans "Un bateau bleu", mais ne correspond à rien dans "Ce matin".</p>
-   </td>
-  </tr>
-  <tr>
-   <td><code>+</code></td>
-   <td>
-    <p>Correspond à l'expression précédente qui est répétée une ou plusieurs fois. C'est équivalent à <code>{1,}</code>.</p>
-
-    <p>Ainsi, <code>/a+/</code> correspond au 'a' dans "maison" et à tous les 'a' dans "maaaaaaison" mais ne correspond à rien dans "mission".</p>
-   </td>
-  </tr>
-  <tr>
-   <td><code>?</code></td>
-   <td>Correspond à l'expression précédente qui est présente une fois ou pas du tout. C'est équivalent à <code>{0,1}</code>.<br>
-    <br>
-    Ainsi, <code>/e?le?/</code> correspond au 'el' dans "gel" et au 'le' dans "angle" mais aussi au 'l' dans "Oslo".<br>
-    <br>
-    S'il est utilisé immédiatement après l'un des quantificateurs : *, +, ?, ou {}, il rend le quantificateur moins « gourmand » auquel cas le moins de caractères correspond (le comportement par défaut, « gourmand », permettant de faire correspondre le plus de caractères possible). Par exemple <code>/\d+/</code> utilisée avec "123abc" fait correspondre "123". Utiliser <code>/\d+?/</code> à la même chaîne de caractères fait correspondre "1".<br>
-    <br>
-    Ce symbole est également utilisé dans les tests de présence autour de l'expression, décrits par les lignes <code>x(?=y)</code> et <code>x(?!y)</code> de ce tableau.</td>
-  </tr>
-  <tr>
-   <td><code>.</code></td>
-   <td>
-    <p>Par défaut, (Le point) correspond à n'importe quel caractère excepté un caractère de saut de ligne.</p>
-
-    <p>Ainsi, <code>/.n/</code> correspond à 'un' et 'en' dans "Un baobab nain en cours de croissance" mais pas à 'nain'.</p>
-
-    <p>Si le marqueur <code>s</code> (<em>dotAll</em>) est utilisé, le point correspondra également aux caractères de saut de ligne.</p>
-   </td>
-  </tr>
-  <tr>
-   <td><code>(x)</code></td>
-   <td>
-    <p>Correspond à 'x' et garde la correspondance en mémoire. Les parenthèses permettent de <em>capturer </em>l'expression dans un « groupe ».<br>
-     <br>
-     Les '<code>(toto)</code>' et '<code>(truc)</code>', dans le motif <code>/(toto) (truc) \1 \2/</code> correspondent et gardent en mémoire les deux premiers mots de la chaîne de caractère "toto truc toto truc". Les <code>\1</code> et <code>\2</code> du motif correspondent respectivement à la première et à la deuxième correspondances pour les sous-chaînes entre parenthèses. Lorsqu'on souhaite effectuer un remplacement, on utilisera <code>$1</code> et <code>$2</code> pour faire référence au premier et second groupe et <code>$</code><code>n </code>pour faire référence au n-ième groupe capturé (ex. <code>('toto truc'.replace(/(...) (...)/, '$2 $1').</code> <code>$&amp;</code> fera référence à la chaîne entière).</p>
-   </td>
-  </tr>
-  <tr>
-   <td><code>(?:x)</code></td>
-   <td>Correspond à 'x' mais ne garde pas la correspondance en mémoire. Les parenthèses ne <em>capturent</em> pas l'expression et permettent d'utiliser des sous-expressions d'une expression régulière pour travailler plus finement. L'expression <code>/(?:zoo){1,2}/</code> sans parenthèses non-capturantes <code>les caractères {1,2}</code> ne s'appliqueraient qu'au dernier 'o' de 'zoo'. Avec les parenthèses capturantes, <code>{1,2}</code> s'applique au mot entier 'zoo'. Pour plus d'informations, voir <a href="#parentheses">Utiliser les parenthèses</a> ci-après.</td>
-  </tr>
-  <tr>
-   <td><code>x(?=y)</code></td>
-   <td>
-    <p>Correspond à 'x' seulement s'il est suivi de 'y'. On appelle cela un test de succession (<em>lookahead</em>).</p>
-
-    <p>Ainsi, <code>/Jack(?=Sparrow)/</code> correspond à 'Jack' seulement s'il est suivi de 'Sparrow'. <code>/Jack(?=Sparrow|Bauer)/</code> correspond à 'Jack' seulement s'il est suivi de 'Sparrow' ou de 'Bauer'. Cependant, ni 'Sparrow' ni 'Bauer' ne feront partie de la correspondance.</p>
-   </td>
-  </tr>
-  <tr>
-   <td><code>x(?!y)</code></td>
-   <td>
-    <p>Correspond à 'x' seulement si 'x' n'est pas suivi de 'y'.</p>
-
-    <p>Ainsi, <code>/\d+(?!\.)/</code> correspond à un nombre qui n'est pas suivi par un point, cette expression utilisée avec <code>la chaîne 3.141</code> correspondra pour '141' mais pas pour '3.141'.</p>
-   </td>
-  </tr>
-  <tr>
-   <td><code>(?&lt;=<em>y</em>)<em>x</em></code></td>
-   <td>
-    <p>Correspond à <code><em>x</em></code> seulement si <code><em>x</em></code> est précédé par <code><em>y</em></code>. C'est ce qu'on appelle une recherche arrière (<em>lookbehind</em>).</p>
-
-    <p>Ainsi /<code>(?&lt;=Jack)Sprat/</code> correspond à "Sprat" seulement s'il est précédé de "Jack".<br>
-     <code>/(?&lt;=Jack|Tom)Sprat/</code> correspond à "Sprat" seulement s'il est précédé de "Jack" ou "Tom".<br>
-     Toutefois, "Jack" et "Tom" ne feront pas partie de la correspondance.</p>
-   </td>
-  </tr>
-  <tr>
-   <td><code>(?&lt;!<em>y</em>)<em>x</em></code></td>
-   <td>
-    <p>Correspond à <code><em>x</em></code> uniquement si <code><em>x</em></code> n'est pas précédé par <code><em>y</em></code> (parfois appelée en anglais <em>negated lookbehind</em>)<em>.</em></p>
-
-    <p>Ainsi, <code>/(?&lt;!-)\d+/</code> correspondra à un nombre seulement si celui-ci n'est pas précédé d'un signe moins.<br>
-     <code>/(?&lt;!-)\d+/.exec('3')</code> cible "3".<br>
-     <code>/(?&lt;!-)\d+/.exec('-3')</code> ne trouve aucune correspondance car le nombre est précédé d'un signe.</p>
-   </td>
-  </tr>
-  <tr>
-   <td><code>x|y</code></td>
-   <td>
-    <p>Correspond à 'x' ou 'y'.</p>
-
-    <p>Ainsi, <code>/vert|rouge/</code> correspond à 'vert' dans "feu vert" et à 'rouge' dans "feu rouge".</p>
-   </td>
-  </tr>
-  <tr>
-   <td><code>{n}</code></td>
-   <td>Correspond pour exactement n occurences de l'expression précédente. N doit être un entier positif.<br>
-    <br>
-    Ainsi, <code>/a{2}/</code> ne correspond pas au 'a' de "Mozilla" mais correspond à tous les 'a' de "Mozilaa" et aux deux premiers 'a' de "Mozillaaa".</td>
-  </tr>
-  <tr>
-   <td><code>{n,}</code></td>
-   <td>
-    <p>Correspond lorsqu'il y a au moins <code>n</code> occurences de l'expression précédente. <code>n</code> doit être un entier positif.</p>
-
-    <p>Par exemple <code>/a{2,}/</code> correspondra à <code>"aa"</code> ou à <code>"aaa"</code> ou encore à <code>"aaaa"</code> mais pas à <code>"a"</code>.</p>
-   </td>
-  </tr>
-  <tr>
-   <td><code>{n,m}</code></td>
-   <td>
-    <p>Lorsque <code>n</code> et <code>m</code> sont des entiers positifs, cela correspond à au moins <code>n</code> occurences de l'expression précédente et à au plus <code>m</code> occurrences. Lorsque <code>m</code> n'est pas utilisé, la valeur par défaut correspondante sera l'infini.</p>
-
-    <p>Ainsi, <code>/a{1,3}/</code> ne correspond à rien dans "Mozill", au 'a' de "Mozilla", au deux premiers 'a' de "Mozillaa" et au trois premiers 'a' de "Mozillaaaaa". Pour ce dernier exemple, on doit noter que le correspondance ne se fait que sur "aaa" bien qu'il y ait plus de 'a' dans la chaîne de caractères.</p>
-   </td>
-  </tr>
-  <tr>
-   <td><code>[xyz]</code></td>
-   <td>Un ensemble de caractère. Ce type de motif correspond pour n'importe quel caractètre présent entre les crochets, y compris les <a href="/fr/docs/Web/JavaScript/Guide/Types_et_grammaire#Les_caractères_d'échappement">séquences d'échappement</a>. Les caractères spéciaux comme le point (.) et l'astérisque ne sont pas considérés comme spéciaux au sein d'un ensemble et n'ont donc pas besoin d'être échappés. Il est possible de donner un ensemble sur un intervalle de caractères en utilisant un tiret (-), comme le montre l'exemple qui suit.<br>
-    <br>
-    Le motif <code>[a-d]</code>, aura les mêmes correspondances que <code>[abcd]</code>, correspondant au 'b' de "bulle" et au 'c' de "ciel". Les motifis <code>/[a-z.]+/ </code>et <code>/[\w.]+/</code> correspondront pour la chaîne entirère : "Adre.ss.e".</td>
-  </tr>
-  <tr>
-   <td><code>[^xyz]</code></td>
-   <td>
-    <p>Exclusion d'un ensemble de caractères. Cela correspond à tout ce qui n'est pas compris entre crochets. Il est possible de fournir un intervalle de caractères en utilisant un tiret (-). Les autres règles qui s'appliquent pour l'ensemble de caractères (ci-avant) s'appliquent également ici.</p>
-
-    <p>Par exemple, <code>[^abc]</code> est équivalent à <code>[^a-c]</code>. Ils correspondent à 'u' dans "bulle" et à 'i' dans "ciel".</p>
-   </td>
-  </tr>
-  <tr>
-   <td><code>[\b]</code></td>
-   <td>Correspond pour un retour arrière (U+0008). (À ne pas confondre avec <code>\b</code>.)</td>
-  </tr>
-  <tr>
-   <td><code>\b</code></td>
-   <td>
-    <p>Correspond à la position d'uneAfter the <em>limite de mot</em>. Une limite de mot correspond à la position où un caractère d'un mot n'est pas suivi ou précédé d'un autre caractère de mot. Il faut savoir que la limite correspondante n'est pas incluse dans le résultat. Autrement dit, la longueur d'une telle correspondance est nulle. (À ne pas confondre avec <code>[\b]</code>.)</p>
-
-    <p>Exemples :<br>
-     <code>/\bm/</code> correspond au 'm' dans "mignon" ;<br>
-     <code>/no\b/</code> ne correspond pas au 'no' de "mignon" car 'no' est suivi de 'n' qui n'est pas un caractère de limite de mot;<br>
-     <code>/non\b/</code> correspond au 'non' de "mignon" car 'non' représente la fin de la chaîne de caractère et n'est donc pas suivi par un caractère de mot.<br>
-     <code>/\w\b\w/</code> ne correspondra jamais à quoi que ce soit car un caractère de mot ne peut pas être suivi à la fois par un caractère de mot et un caractère n'étant pas un caractère de mot.</p>
-
-    <div class="note">
-    <p><strong>Note :</strong> Le moteur d'expressions rationnelles JavaScript définit <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-15.10.2.6">un ensemble de caractères spécifiques</a> qui doivent être considérés comme des caractères de mot. Tout caractère qui n'est pas dans cet ensemble est considéré comme une limite de mot. Cet ensemble de caractères est relativement limité car constitué uniquement des caractères de l'alphabet romain en minuscules et en majuscules, des chiffres décimaux et du tiret-bas (<em>underscore</em>). Les autres caractères, comme les caractères accentués (é ou ü par exemple), sont donc considérés comme des limites de mots.</p>
-    </div>
-   </td>
-  </tr>
-  <tr>
-   <td><code>\B</code></td>
-   <td>
-    <p>Correspond à une "non-<em>limite de mot</em>". Cela correspond pour les cas suivants :</p>
-
-    <ul>
-     <li>Avant le premier caractère d'une chaîne de caractères</li>
-     <li>Après le dernier caractère d'une chaîne de caractères</li>
-     <li>Entre deux caractères de mot</li>
-     <li>Entre deux caractères qui ne sont pas des caractères de mot</li>
-     <li>Avec la chaîne vide.</li>
-    </ul>
-
-    <p>Ainsi, <code>/\B../</code> correspond au 'oo' de "football" (et <code>/e\B./</code> correspond au 'er' dans "une mer "</p>
-   </td>
-  </tr>
-  <tr>
-   <td><code>\c<em>X</em></code></td>
-   <td>
-    <p>Étant donné un caractère <em>X</em> compris entre A et Z, cela correspond au caractère de contrôle dans une chaîne de caractères.</p>
-
-    <p>Ainsi, <code>/\cM/</code> correspond au caractère de contrôle M (U+000D) d'une chaîne de caractère.</p>
-   </td>
-  </tr>
-  <tr>
-   <td><code>\d</code></td>
-   <td>
-    <p>Correspond à un chiffre et est équivalent à <code>[0-9]</code>.</p>
-
-    <p>Ainsi, <code>/\d/</code> ou <code>/[0-9]/</code> correspond à '2' dans "H2O est la molécule de l'eau".</p>
-   </td>
-  </tr>
-  <tr>
-   <td><code>\D</code></td>
-   <td>
-    <p>Correspond à tout caractère qui n'est pas un chiffre et est équivalent à<code> [^0-9]</code>.</p>
-
-    <p>Ainsi, <code>/\D/</code> ou <code>/[^0-9]/</code> correspond à 'H' dans "H2O est la molécule de l'eau".</p>
-   </td>
-  </tr>
-  <tr>
-   <td><code>\f</code></td>
-   <td>Correspond à un saut de page (U+000C).</td>
-  </tr>
-  <tr>
-   <td><code>\n</code></td>
-   <td>Correspond à un saut de ligne (U+000A).</td>
-  </tr>
-  <tr>
-   <td><code>\r</code></td>
-   <td>Correspond à un retour chariot (U+000D).</td>
-  </tr>
-  <tr>
-   <td><code>\s</code></td>
-   <td>
-    <p>Correspond à un blanc (cela comprend les espace, tabulation, saut de ligne ou saut de page). C'est équivalent à <code>[ \f\n\r\t\v\u00a0\u1680\u2000-\u200a\u2028\u2029\u202f\u205f\u3000\ufeff]</code>.</p>
-
-    <p>Ainsi, <code>/\s\w*/</code> correspond à ' toto' dans "truc toto".</p>
-   </td>
-  </tr>
-  <tr>
-   <td><code>\S</code></td>
-   <td>
-    <p>Correspond à un caractère qui n'est pas un blanc. C'est équivalent à <code>[^ \f\n\r\t\v\u00a0\u1680\u2000-\u200a\u2028\u2029\u202f\u205f\u3000\ufeff]</code>.</p>
-
-    <p>Ainsi, <code>/\S\w*/</code> correspond à 'truc' dans "truc toto".</p>
-   </td>
-  </tr>
-  <tr>
-   <td><code>\t</code></td>
-   <td>Correspond à une tabulation (U+0009).</td>
-  </tr>
-  <tr>
-   <td><code>\v</code></td>
-   <td>Correspond à une tabulation verticale (U+000B).</td>
-  </tr>
-  <tr>
-   <td><code>\w</code></td>
-   <td>
-    <p>Correspond à n'importe quel caractère alphanumérique, y compris le tiret bas. C'est équivalent à <code>[A-Za-z0-9_]</code>.</p>
-
-    <p>Ainsi, <code>/\w/</code> correspond à 'l' dans "licorne", à '5' dans "5,28€", et à '3' dans "3D."</p>
-   </td>
-  </tr>
-  <tr>
-   <td><code>\W</code></td>
-   <td>
-    <p>Correspond à n'importe quel caractère n'étant pas un caractère de mot. Cela est équivalent à <code>[^A-Za-z0-9_]</code>.</p>
-
-    <p>Ainsi, <code>/\W/</code> ou <code>/[^A-Za-z0-9_]/</code> correspond à '%' dans "50%."</p>
-   </td>
-  </tr>
-  <tr>
-   <td><code>\n</code></td>
-   <td>
-    <p>Soit <em>n</em> un entier strictement positif, cela fait référence au groupe de la n-ième expression entre parenthèses (en comptant les parenthèses ouvrantes).</p>
-
-    <p>Ainsi, <code>/pomme(,)\spoire\1/</code> correspond à 'pomme, poire,' dans "pomme, poire, cerise, pêche".</p>
-   </td>
-  </tr>
-  <tr>
-   <td><code>\0</code></td>
-   <td>Correspond au caractère NULL (U+0000). Il ne doit pas être suivi d'un autre chiffre car <code>\0&lt;chiffres&gt;</code> est une <a href="/fr/docs/Web/JavaScript/Guide/Types_et_grammaire#Les_caractères_d'échappement">séquence d'échappement</a> pour les nombres en notation octale (si besoin d'utiliser un chiffre ensuite, on pourra utiliser la forme <code>\x00</code>, cf. ci-après).</td>
-  </tr>
-  <tr>
-   <td><code>\xhh</code></td>
-   <td>Correspond au caractère dont le code hexadécimal est hh (deux chiffres hexadécimaux).</td>
-  </tr>
-  <tr>
-   <td><code>\uhhhh</code></td>
-   <td>Correspond au caractère dont le code est hhhh (quatre chiffres hexadécimaux).</td>
-  </tr>
-  <tr>
-   <td><code>\u{hhhh}</code></td>
-   <td>(Uniquement actif quand le marqueur <code>u</code> est activé) Correspond au caractère dont la valeur Unicode est <code>hhhh</code> (en chiffre hexadécimaux).</td>
-  </tr>
- </tbody>
-</table>
-
-<p>Afin d'échapper les informations saisies par l'utilisateur et de traîter les chaînes de caractères pour les utiliser au sein d'un expression régulière correspondante, il est possible d'utiliser le remplacement suivant :</p>
-
-<pre class="brush: js notranslate">function escapeRegExp(string){
-  // $&amp; correspond à la chaîne correspondante
-  // dans son intégralité
-  return string.replace(/[.*+?^${}()|[\]\\]/g, "\\$&amp;");
-}</pre>
-
-<p>Le marqueur <code>g</code> situé en fin d'expression permet d'effectuer une recherche globale, qui parcoure toute la chaîne et renvoie l'ensemble des correspondances trouvées (voir <a href="#recherches_flag">Utiliser les marqueurs</a> ci-après).</p>
-
-<div class="note">
-<p><strong>Note :</strong> Voir la page sur la méthode <code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/replace">String.replace</a></code> pour plus d'informations.</p>
-</div>
-
-<h3 id="Utiliser_les_parenthèses">Utiliser les parenthèses</h3>
-
-<p>Les parenthèses encadrant une partie du motif de l'expression régulière peuvent être utilisées pour garder en mémoire les correspondances. Cela pourra être utile pour réutiliser la correspondance trouvée.</p>
-
-<p>Ainsi, le motif <code>/Chapitre (\d+)\.\d*/</code> utilise des caractères échappés et spéciaux et indique une partie du motif à garder en mémoire. Ce motif correspond aux caractères 'Chapitre ' suivi par un ou plusieurs caractères numériques (<code>\d</code> correspond à un chiffre et <code>+</code> indiquant que une série de 1 ou plusieurs chiffres), suivis par un point (qu'il est nécessaire d'échapper car c'est un caractère spécial, on utilise donc '\' pour indiquer qu'on souhaite reconnaître le caractère '.'), suivi par 0 ou plusieurs chiffres (<code>\d</code> correspondant à un chiffre et l'astérisque indiquant que le caractère est présent 0 ou plusieurs fois). Les parenthèses sont utilisées pour garder en mémoire les premiers chiffres correspondant.</p>
-
-<p>Ce motif est trouvé dans "Ouvrir le Chapitre 4.3 au paragraphe 6" et le chiffre '4' est gardé en mémoire. Le motif n'est pas trouvé dans  "Chapitre 3 et 4", car la chaîne de caractères ne comporte pas de point après le '3'.</p>
-
-<p>Pour qu'une partie de la chaîne de caractère corresponde mais que la correspondance ne soit pas gardée en mémoire, on pourra utiliser <code>?:</code>. Ainsi, <code>(?:\d+)</code> correspondra pour une séquence de chiffres (1 ou plusieurs chiffres) mais on ne gardera pas en mémoire les caractères correspondants.</p>
-
-<h2 id="Utiliser_les_expressions_rationnelles">Utiliser les expressions rationnelles</h2>
-
-<p>Les expresssions régulières sont utilisées avec les méthodes <code>test</code><code> </code>et<code> exec</code> de l'objet<code> RegExp</code> et avec les méthodes <code>match</code>, <code>replace</code>, <code>search</code>, et <code>split</code> de l'objet <code>String</code>. Ces méthodes sont expliquées en détail dans la <a href="/fr/docs/Web/JavaScript/Reference">Référence JavaScript</a>.</p>
-
-<table class="standard-table">
- <caption>Méthodes utilisant les expressions régulières</caption>
- <thead>
-  <tr>
-   <th scope="col">Méthode</th>
-   <th scope="col">Description</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{jsxref("RegExp.exec", "exec")}}</td>
-   <td>Une méthode de l'objet <code>RegExp</code> qui exécute une recherche de correspondance dans une chaîne de caractères. Elle renvoie un tableau d'informations ou <code>null</code> lorsqu'il n'y a pas de correspondance.</td>
-  </tr>
-  <tr>
-   <td>{{jsxref("RegExp.test", "test")}}</td>
-   <td>Une méthode de l'objet <code>RegExp</code> testant la présence d'une correspondance dans une chaîne de caractères. Elle renvoie true ou false.</td>
-  </tr>
-  <tr>
-   <td>{{jsxref("String.match", "match")}}</td>
-   <td>Une méthode de l'objet <code>String</code> qui exécute une recherche de correspondance dans une chaîne de caractères. Elle renvoie un tableau d'informations ou <code>null</code> lorsqu'il n'y a pas de correspondance.</td>
-  </tr>
-  <tr>
-   <td>{{jsxref("String.matchAll", "matchAll")}}</td>
-   <td>Une méthode de l'objet <code>String</code> qui renvoie un itérateur contenant l'ensemble des correspondances, y compris les groupes capturants.</td>
-  </tr>
-  <tr>
-   <td>{{jsxref("String.search", "search")}}</td>
-   <td>Une méthode de l'objet <code>String</code> qui teste la présence d'une correspondance dans une chaîne de correspondance. Elle renvoie la position de la correspondance ou -1 s'il n'y en a pas.</td>
-  </tr>
-  <tr>
-   <td>{{jsxref("String.replace", "replace")}}</td>
-   <td>Une méthode de l'objet <code>String</code> qui recherche une correspondance dans une chaîne de caractères et qui remplace la correspondance par une chaîne de substitution.</td>
-  </tr>
-  <tr>
-   <td>{{jsxref("String.split", "split")}}</td>
-   <td>Une méthode de l'objet <code>String</code> qui utilise une expression régulière ou une chaîne de caractères pour découper une chaîne de caractères en un tableau comprenant les fragments résultants.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>Pour savoir si un motif est présent au sein d'une chaîne de caractères, utiliser les méthodes<code> test</code> ou <code>search</code>. Pour obtenir plus d'informations (moins rapidement) on utilisera les méthodes <code>exec</code> ou <code>match</code>. Si on utilise <code>exec</code> ou <code>match</code> et qu'une correspondance est trouvée, ces méthodes renverront un tableau et mettront à jour des propriétés de l'objet global <code>RegExp</code> et aussi de l'instance de <code>RegExp</code> associée à l'expression rationnelle. Si aucune correspondance n'est trouvée, la méthode <code>exec</code> renverra <code>null</code> (qui est automatiquement converti à <code>false</code> lors d'un test conditionnel).</p>
-
-<p>Dans l'exemple qui suit, le script utilise la méthode <code>exec</code> pour trouver une correspondance dans une chaîne de caractères.</p>
-
-<pre class="brush: js notranslate">var monExpressionReguliere = /d(b+)d/g;
-var monTableau = monExpressionReguliere.exec("cdbbdbsbz");
-</pre>
-
-<p>S'il n'est pas nécessaire d'accéder aux propriétés de l'expression régulière, une autre façon de récupérer <code>monTableau</code> peut être :</p>
-
-<pre class="brush: js notranslate">var monTableau = /d(b+)d/g.exec("cdbbdbsbz");
-// équivalent à "cdbbdbsbz".match(/d(b+)d/g);
-</pre>
-
-<p>Si on souhaite construire une expression régulière à partir d'une chaîne de caractères, on peut utiliser le script suivant :</p>
-
-<pre class="brush: js notranslate">var monExpressionReguliere = new RegExp("d(b+)d", "g");
-var monTableau = monExpressionReguliere.exec("cdbbdbsbz");
-</pre>
-
-<p>Avec ces scripts, on obtient bien une correspondance, la méthode renvoie un tableau et met à jour les propriétés listées dans le tableau qui suit.</p>
-
-<table class="standard-table">
- <caption>Résultats dûs à l'exécution d'une expression rationnelle.</caption>
- <thead>
-  <tr>
-   <th scope="col">Objet</th>
-   <th scope="col">Propriété ou indice</th>
-   <th scope="col">Description</th>
-   <th scope="col">Pour cet exemple</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td rowspan="4"><code>monTableau</code></td>
-   <td></td>
-   <td>La chaîne de caractères correspondante et les fragments de chaînes gardés en mémoire.</td>
-   <td><code>["dbbd", "bb"]</code></td>
-  </tr>
-  <tr>
-   <td><code>index</code></td>
-   <td>L'indice (débute à partir de 0) de la correspondance, compté dans la chaîne de caractère initiale.</td>
-   <td><code>1</code></td>
-  </tr>
-  <tr>
-   <td><code>input</code></td>
-   <td>La chaîne de caractères initiale.</td>
-   <td><code>"cdbbdbsbz"</code></td>
-  </tr>
-  <tr>
-   <td><code>[0]</code></td>
-   <td>Les derniers caractères qui correspondent.</td>
-   <td><code>"dbbd"</code></td>
-  </tr>
-  <tr>
-   <td rowspan="2"><code>monExpressionRégulière</code></td>
-   <td><code>lastIndex</code></td>
-   <td>L'indice auquel débuter la prochaine correspondance. (Cette propriété n'est utilisée que si l'expression régulière utilise l'option g, décrite dans « <a href="#recherches_flag">Effectuer des recherches avancées avec les marqueurs</a> ».</td>
-   <td><code>5</code></td>
-  </tr>
-  <tr>
-   <td><code>source</code></td>
-   <td>Le texte du motif, mis à jour à la création de l'expression régulière mais pas lors de son exécution.</td>
-   <td><code>"d(b+)d"</code></td>
-  </tr>
- </tbody>
-</table>
-
-<p>Comme le montre la seconde formulation de cet exemple, il est possible d'utiliser une expression rationnelle, créée avec un objet initialisé sans l'affecter à une variable. Cela implique qu'à chaque utilisation, on aura une nouvelle expression régulière distincte et qu'on ne pourra pas, pour cette raison, accéder aux propriétés de l'expression régulière. Avec le script suivant :</p>
-
-<pre class="brush: js notranslate">var monExpressionReguliere = /d(b+)d/g;
-var monTableau = monExpressionReguliere.exec("cdbbdbsbz");
-console.log("La valeur de lastIndex est " + monExpressionReguliere.lastIndex);
-
-// "La valeur de lastIndex est 5"
-</pre>
-
-<p>Si le script utilisé est :</p>
-
-<pre class="brush: js notranslate">var monTableau = /d(b+)d/g.exec("cdbbdbsbz");
-console.log("La valeur de lastIndex est " + /d(b+)d/g.lastIndex);
-
-// "La valeur de lastIndex est 0"
-</pre>
-
-<p>Les occurences de <code>/d(b+)d/g</code> dans les deux instructions sont des objets différents. Leurs propriétés <code>lastIndex</code> respectives ont donc des valeurs différentes. Quand il est nécessaire d'accéder aux propriétés d'un objet décrivant une expression rationnelle, il faudra d'abord l'affecter à une variable.</p>
-
-<h3 id="Utiliser_les_correspondances_de_groupes_avec_les_parenthèses">Utiliser les correspondances de groupes avec les parenthèses</h3>
-
-<p>Les parenthèses, utilisées dans un motif d'expression régulière, permettent de garder en mémoire un groupe (ou fragment) d'une correspondance. Ainsi, <code>/a(b)c/</code> correspond aux caractères 'abc' et garde 'b' en mémoire. Pour récupérer ces fragments mémorisés, on peut utiliser les éléments du tableau <code>array</code> <code>[1]</code>, ..., <code>[n]</code>.</p>
-
-<p>Le nombre de fragments qu'il est possible de garder entre parenthèses n'est pas limité. Le tableau renvoyé contiendra tout ce qui aura été trouvé. Les exemples qui suivent montrent comment utiliser cette syntaxe.</p>
-
-<p>Le script qui suit utilise la méthode {{jsxref("String.replace", "replace()")}} pour échanger les mots d'une chaîne de caractères. Pour remplacer le texte, le script utilise <code>$1</code> et <code>$2</code> qui correspondent au premier et deuxième groupe correspondant.</p>
-
-<pre class="brush: js notranslate">var re = /(\w+)\s(\w+)/;
-var str = "Titi toto";
-var newstr = str.replace(re, "$2, $1");
-console.log(newstr);
-</pre>
-
-<p>Cela affichera "toto, Titi".</p>
-
-<h3 id="Effectuer_des_recherches_avancées_en_utilisant_les_marqueurs_flags">Effectuer des recherches avancées en utilisant les marqueurs (<em>flags</em>)</h3>
-
-<p>Les expressions rationnelles peuvent être utilisées avec des marqueurs optionnels permettant des recherches globales et/ou ne respectant pas la casse. Ces marqueurs peuvent être utilisés séparement ou ensemble, quel que soit l'ordre. Ils font partie de l'expression régulière.</p>
-
-<table class="standard-table">
- <caption>Drapeaux utilisés avec les expressions régulières.</caption>
- <thead>
-  <tr>
-   <th scope="col">Drapeau (<em>Flag</em>)</th>
-   <th scope="col">Description</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><code>g</code></td>
-   <td>Recherche globale</td>
-  </tr>
-  <tr>
-   <td><code>i</code></td>
-   <td>Recherche ne respectant pas la casse</td>
-  </tr>
-  <tr>
-   <td><code>m</code></td>
-   <td>Recherche sur plusieurs lignes</td>
-  </tr>
-  <tr>
-   <td><code>s</code></td>
-   <td>Le point peut correspondre aux caractères de saut de ligne.</td>
-  </tr>
-  <tr>
-   <td><code>u</code></td>
-   <td>Unicode. Le motif de recherche est interprété comme une séquence de codets Unicode.</td>
-  </tr>
-  <tr>
-   <td><code>y</code></td>
-   <td>Effectue une recherche qui « adhère », en partant de la position courante de la chaîne de caractères sur laquelle la recherche est effectuée. Voir la page sur {{jsxref("RegExp.sticky","sticky")}}.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>Pour utiliser un marqueur avec une expression régulière, on utilisera la syntaxe suivante :</p>
-
-<pre class="brush: js notranslate">var re = /motif/marqueurs;
-</pre>
-
-<p>ou</p>
-
-<pre class="brush: js notranslate">var re = new RegExp("motif", "marqueurs");
-</pre>
-
-<p>Les marqueurs font partie intégrante d'une expression régulière, ils ne peuvent pas être ajoutés ou supprimés ensuite.</p>
-
-<p>Ainsi, <code>re = /\w+\s/g</code> permet de créer une expression régulière pour trouver un ou plusieurs caractères suivis d'un espace, la recherche est effectuée globalement, sur toute la chaîne de caractères.</p>
-
-<pre class="brush: js notranslate">var re = /\w+\s/g;
-var str = "un deux trois quatre";
-var monTableau = str.match(re);
-console.log(monTableau);
-</pre>
-
-<p>Cela affichera ["un ", "deux ", "trois "]. On pourrait remplacer la ligne :</p>
-
-<pre class="brush: js notranslate">var re = /\w+\s/g;
-</pre>
-
-<p>avec la ligne :</p>
-
-<pre class="brush: js notranslate">var re = new RegExp("\\w+\\s", "g");
-</pre>
-
-<p>pour obtenir le même résultat.</p>
-
-<p>Le comportement du marqueur <code>'g'</code> est différent selon qu'il est utilisé avec <code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/RegExp/exec">exec()</a></code> ou avec <code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/match">match()</a></code>. Pour <code>match()</code>, c'est la chaîne de caractères qui invoque la méthode et l'expression rationnelle est alors un argument. Pour <code>exec()</code>, c'est l'expression rationnelle qui invoque la méthode et c'est la chaîne de caractères qui est passée en argument. Dans l'appel à <code>exec()</code>, le marqueur <code>'g'</code> permet d'avoir une progression itérative.</p>
-
-<p>Le marqueur <code>m</code> pourra être utilisé pour traiter une chaîne de caractères de plusieurs lignes comme plusieurs lignes distinctes. Si ce marqueur est utilisé, les caractères spéciaux <code>^</code> et <code>$</code> correspondront au début ou à la fin de n'importe quelle ligne appartenant à la chaîne de caractères au lieu de correspondre simplement au début ou à la fin de la chaîne.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<p>Les exemples qui suivent utilisent les expressions régulières dans différents cas.</p>
-
-<h3 id="Changer_lordre_dune_saisie">Changer l'ordre d'une saisie</h3>
-
-<p>L'exemple qui suit utilise les expressions régulières et <code>string.split()</code> et <code>string.replace()</code>. Le script nettoie la chaîne de caractères saisie qui contient des noms (prénom puis nom) séparés par des blancs, tabulations et points-virgules. Enfin il inverse les noms et prénoms puis trie la liste.</p>
-
-<pre class="brush: js notranslate">// La chaîne des noms contient plusieurs blancs et tabulations,
-// il peut y avoir plusieurs espaces entre le nom et le prénom.
-var noms = "Harry Trump ;Fred Barney; Helen Rigby ; Bill Abel ; Chris Hand ";
-
-var output = ["---------- Chaîne originale\n", noms + "\n"];
-
-// Préparer deux expressions régulières pour stocker un tableau.
-// et découper les chaînes dans ce tableau.
-
-// motif: on peut avoir des blancs, un point virgule puis d'autres blancs
-var motif = /\s*;\s*/;
-
-// Découper la chaîne de caractères en morceaux séparés par le précédent motif
-// Stocker ces morceaux dans un tableau listeNoms
-var listeNoms = noms.split(motif);
-
-// nouveau motif : un ou plusieurs caractères, des blancs puis des caractères.
-// On utilise des parenthèses pour garder en mémoire les groupes du motif.
-// On utilisera ces groupes par la suite.
-motif = /(\w+)\s+(\w+)/;
-
-// Nouveau tableau pour enregistrer les noms traités.
-var listeParNomFamille = [];
-
-// Afficher le tableau des noms et remplir le nouveau tableau
-// avec les noms et prénoms séparés par des virgules, le nom
-// de famille étant écrit en premier
-//
-// La méthode replace supprime tout ce qui correspond au motif
-// et le remplace par le nom (mémorisé), une virgule, un espace
-// et le prénom (mémorisé).
-//
-// Les variables $1 et $2 font références aux fragments gardés
-// en mémoire lors de l'utilisation du motif.
-
-output.push("---------- Après découpage avec l'expression régulière");
-
-var i, len;
-for (i = 0, len = listeNoms.length; i &lt; len; i++){
-  output.push(listeNoms[i]);
-  listeParNomFamille[i] = listeNoms[i].replace(motif, "$2, $1");
-}
-
-// Afficher le nouveau tableau
-output.push("---------- Noms et prénoms inversés");
-for (i = 0, len = listeParNomFamille.length; i &lt; len; i++){
-  output.push(listeParNomFamille[i]);
-}
-
-// Trier par le nom de famille puis afficher le tableau trié
-listeParNomFamille.sort();
-output.push("---------- Triée");
-for (i = 0, len = listeParNomFamille.length; i &lt; len; i++){
-  output.push(listeParNomFamille[i]);
-}
-
-output.push("---------- Fin");
-
-console.log(output.join("\n"));
-</pre>
-
-<h3 id="Utiliser_les_caractères_spéciaux_pour_vérifier_la_saisie">Utiliser les caractères spéciaux pour vérifier la saisie</h3>
-
-<p>Dans l'exemple suivant, on s'attend à ce que l'utilisateur saisissent un numéro de téléphone. Quand l'utilisateur appuie sur le bouton "Vérifier", le script vérifie la validité du numéro. Si le numéro est valide (il correspond à la séquence de caractères fournie par l'expression régulière), le script affiche un message remerciant l'utilisateur et confirmant le numéro. S'il est invalide, le script informe l'utilisateur et lui signifie que les informations saisies ne sont pas valides.</p>
-
-<p>Dans les parenthèses sans mémoire <code>(?:</code> , l'expression régulière cherche les deux premiers chiffres ou l'indicatif du pays suivi d'un blanc et du premier chiffre, ce qui correspond à</p>
-
-<pre class="brush: html notranslate">\d{2}|\+\d{2}[ ]\d</pre>
-
-<p>Cette partie signifie : deux chiffres OU un signe '+' suivi de deux chiffres, un blanc et un autre chiffre.</p>
-
-<p>Ensuite, on a un groupe qui est mémorisé (entre parenthèses) :</p>
-
-<pre class="brush: html notranslate">([- ])</pre>
-
-<p>Ce groupe correspond à ce qui va être utilisé pour séparer les différentes composantes du numéro de téléphone.</p>
-
-<p>Ensuite,</p>
-
-<pre class="brush: html notranslate">\d{2}\1</pre>
-
-<p>signifie qu'on a deux chiffres suivi du premier groupe qui est celui qui définit le séparateur. Le reste est composé de la même façon. Ainsi les numéros de téléphone +33 1 23 45 67 89 et 01 23 45 67 89 seront tous les deux valides.</p>
-
-<p>L'événement <code>Change</code>, provoqué quand l'utilisateur appuie sur Entrée, renseigne la valeur <code>RegExp.input</code>.</p>
-
-<pre class="brush: html notranslate">&lt;!DOCTYPE html&gt;
-&lt;html&gt;
-  &lt;head&gt;
-    &lt;meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"&gt;
-    &lt;meta http-equiv="Content-Script-Type" content="text/javascript"&gt;
-    &lt;script type="text/javascript"&gt;
-      var re = /(?:\d{2}|\+\d{2}[ ]\d)([- ])\d{2}\1\d{2}\1\d{2}\1\d{2}/;
-      function testInfo(phoneInput){
-        var OK = re.exec(phoneInput.value);
-        if (!OK)
-          window.alert(phone.input + " n'est pas un numéro de téléphone valide!");
-        else
-          window.alert("Merci, votre numéro est : " + OK[0]);
-      }
-    &lt;/script&gt;
-  &lt;/head&gt;
-  &lt;body&gt;
-    &lt;p&gt;Saisissez votre numéro de téléphone (avec indicatif) puis cliquez sur "Vérifier".
-        &lt;br&gt;Le format attendu est ## ## ## ## ## ou +## # ## ## ## ##.&lt;/p&gt;
-    &lt;form action="#"&gt;
-      &lt;input id="phone"&gt;&lt;button onclick="testInfo(document.getElementById('phone'));"&gt;Vérifier&lt;/button&gt;
-    &lt;/form&gt;
-  &lt;/body&gt;
-&lt;/html&gt;
-</pre>
-
-<p>{{PreviousNext("Web/JavaScript/Guide/Formatage_du_texte", "Web/JavaScript/Guide/Collections_indexées")}}</p>
diff --git a/files/fr/web/javascript/guide/regular_expressions/index.md b/files/fr/web/javascript/guide/regular_expressions/index.md
new file mode 100644
index 0000000000..a5314a2a4c
--- /dev/null
+++ b/files/fr/web/javascript/guide/regular_expressions/index.md
@@ -0,0 +1,975 @@
+---
+title: Expressions rationnelles
+slug: Web/JavaScript/Guide/Regular_Expressions
+tags:
+  - Guide
+  - Intermédiaire
+  - JavaScript
+  - RegExp
+translation_of: Web/JavaScript/Guide/Regular_Expressions
+original_slug: Web/JavaScript/Guide/Expressions_régulières
+---
+{{jsSidebar("JavaScript Guide")}}{{PreviousNext("Web/JavaScript/Guide/Formatage_du_texte", "Web/JavaScript/Guide/Collections_indexées")}}
+
+Les expressions rationnelles sont des motifs utilisés pour correspondre à certaines combinaisons de caractères au sein de chaînes de caractères. En JavaScript, les expressions rationnelles sont également des objets. Ces motifs sont utilisés avec les méthodes {{jsxref("RegExp.exec", "exec")}} et {{jsxref("RegExp.test", "test")}} de {{jsxref("RegExp")}}, et avec les méthodes {{jsxref("String.match", "match")}}, {{jsxref("String.matchAll", "matchAll")}}, {{jsxref("String.replace", "replace")}}, {{jsxref("String.search", "search")}} et {{jsxref("String.split", "split")}} de {{jsxref("String")}}. Ce chapitre explique comment utiliser les expressions rationnelles en JavaScript (aussi appelées expressions régulières ou « _RegExp_ »).
+
+## Créer une expression rationnelle
+
+Il est possible de construire une expression rationnelle de deux façons :
+
+- Utiliser un littéral d'expression régulière, qui correspond à un motif contenu entre deux barres obliques, par exemple :
+
+  ```js
+    var re = /ab+c/;
+    ```
+
+  Lorsque les littéraux d'expression régulière sont utilisés, l'expression est compilée lors du chargement du script. Il est préférable d'utiliser cette méthode lorsque l'expression régulière reste constante, afin d'avoir de meilleurs performances.
+
+- Appeler le constructeur de l'objet {{jsxref("RegExp")}}, par exemple :
+
+  ```js
+    var re = new RegExp("ab+c");
+    ```
+
+  Avec cette méthode, l'expression rationnelle est compilée lors de l'exécution. On utilisera cette méthode lorsque le motif utilisé est variable ou provient d'une autre source (par exemple une interaction utilisateur).
+
+## Écrire une expression rationnelle
+
+Le motif d'une expression rationnelle est composé de caractères simples (comme `/abc/`), ou de caractères simples et spéciaux, comme `/ab*c/` ou `/Chapitre (\d+)\.\d*/ `. Le dernier exemple utilise des parenthèses qui permettent d'avoir une « mémoire ». La correspondance avec le motif contenu entre parenthèses pourra être utilisée par la suite. Ceci est décrit avec [ce paragraphe](#parentheses).
+
+### Utiliser des motifs simples
+
+Les motifs simples sont construits à partir de caractères pour lesquels on souhaite avoir une correspondance directe. Le motif `/des/` correspond lorsqu'on observe exactement les caractères 'des' ensemble et dans cet ordre précis. On pourrait utiliser ce motif et détecter une correspondance dans les chaînes suivantes : "J'ai vu des licornes ?" et "Sa description de licorne était superbe" car la chaîne de caractères 'des' y est présente (dans le mot description pour le second exemple). Il n'y aura pas de correspondance avec la chaîne de caractères "Toc toc" car 'des' n'est pas présente.
+
+### Utiliser des caractères spéciaux
+
+Lorsque le motif à trouver est plus complexe qu'une simple égalité (trouver tous les B, les blancs...), le motif devra contenir des caractères spéciaux. Ainsi, le motif `/ab*c/` correspond à toutes les combinaisons de caractères qui possèdent un seul 'a' suivi de zéro ou plusieurs 'b' (l'astérisque utilisée ici signifie que l'élément qui la précède doit être présent zéro ou plusieurs fois) qui sont immédiatement suivis d'un 'c'. Par exemple, la chaîne de caractère "cbbabbbbcdebc" correspond au motif avec la chaîne de caractères 'abbbbc'.
+
+Les pages suivantes décrivent en détail les caractères spéciaux qui peuvent être utilisés afin de composer une expression rationnelle.
+
+- [Assertions](/fr/docs/Web/JavaScript/Guide/Expressions_régulières/Assertions)
+  - : Une assertion caractérisant la façon dont la correspondance peut se produire (en recherchant un motif avant, après ou avec une expression conditionnelle).
+- [Limites](/fr/docs/Web/JavaScript/Guide/Expressions_régulières/Limites)
+  - : Permet d'indiquer le début ou la fin d'une ligne ou d'un mot.
+- [Classes de caractère](/fr/docs/Web/JavaScript/Guide/Expressions_régulières/Classes_de_caractères)
+  - : Les classes permettent de distinguer différents caractères selon différents groupes (par exemple les lettres et les chiffres).
+- [Groupes et intervalles](/fr/docs/Web/JavaScript/Guide/Expressions_régulières/Groupes_et_intervalles)
+  - : Permet d'indiquer un groupe ou un intervalle de caractères.
+- [Quantificateurs](/fr/docs/Web/JavaScript/Guide/Expressions_régulières/Quantificateurs)
+  - : Permet d'indiquer un nombre de caractères ou d'expressions qui doivent correspondre.
+- [Propriétés Unicode](/fr/docs/Web/JavaScript/Guide/Expressions_régulières/Unicode_Properties)
+  - : Permet de distinguer les caractères en fonction de leurs caractéristiques Unicode (majuscule/minuscule, symbole mathématique, ponctuation).
+
+### Échapper des caractères
+
+SI on souhaite rechercher certains caractères dans une chaîne de caractères et que ceux-ci ont une signification spéciale lorsqu'ils font partie d'une expression rationnelle (ex. "\*"), il faudra échapper ces caractères spéciaux en plaçant une barre oblique inversée (_backslash_ "\\") devant. Ainsi, si on souhaite trouver un "a" suivi d'un astérisque ("\*") suivi d'un "b", on pourra composer l'expression rationnelle : `/a\*b/` où la barre oblique inversée échappe l'astérisque afin de lui enlever sa signification particulière.
+
+De même si on écrit un littéral d'expression rationnelle et qu'on souhaite rechercher une barre oblique ("/") dans la chaîne cible, on pourra échapper ce caractère (sinon, il aura sa signification particulière aux expressions rationnelles et indiquera la fin du motif). Si on cherche la présence de "/exemple/" dans une chaîne de caractères, on pourra utiliser le littéral `/\/exemple\//`.
+
+Il en va de même avec la barre oblique inversée (dont la signification spécifique est justement l'échappement) : si on veut rechercher la chaîne "C:\\", on pourra utiliser le motif `/C:\\/` (la première barre oblique inversée sert à échapper la seconde).
+
+Lorsqu'on utilise le constructeur {{jsxref("RegExp")}} avec une chaîne de caractères en paramètre (plutôt qu'un littéral), il faudra échapper la barre oblique inversée qui a un sens particulier dans les chaînes de caractères. Ainsi, le littéral `/a\*b/` et `new RegExp("a\\*b")` créeront la même expression (qui permet de chercher la lettre "a", suivie d'un astérisque, suivi de la lettre "b").
+
+La tableau qui suit fournit une liste complète des caractères spéciaux pouvant être utilisés dans les expressions régulières ainsi que leur signification.
+
+<table class="standard-table">
+  <caption>
+    Caractères spéciaux utilisables pour les expressions rationnelles.
+  </caption>
+  <thead>
+    <tr>
+      <th scope="col">Caractère</th>
+      <th scope="col">Signification</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td><code>\</code></td>
+      <td>
+        <p>
+          Correspond selon les règles suivantes :<br /><br />Une barre oblique
+          inversée (<em>backslash</em>) précédant un caractère non spécial
+          indique que le caractère qui suit est spécial et qu'il ne doit pas
+          être interprété directement. Ainsi, un '<code>b</code>', sans
+          <code>\</code> avant, correspondra pour les 'b' minuscules quel que
+          soit leur position. En revanche '<code>\b</code>' ne correspondra à
+          aucun caractère mais indique
+          <a href="#special-word-boundary">un caractère de fin de mot</a
+          >.<br /><br />Un <em>backslash</em> précédant un caractère spécial
+          indique que le caractère qui suit doit être interprété littéralement
+          (et non pas comme un caractère spécial). Ainsi, le motif
+          <code>/a*/</code> utilise le caractère spécial '<code>*</code>' pour
+          correspondre à 0 ou plusieurs 'a'. Le motif <code>/a\*/</code>, au
+          contraire, rend '<code>*</code>' non-spécial pour correspondre aux
+          chaînes de caractères qui comportent la lettre a et une astérisque,
+          comme 'a*'.<br /><br />Il ne faut pas oublier d'échapper le caractère
+          <code>\</code> car lui-même est un caractère d'échappement dans les
+          chaînes de caractères. Cela est utile lorsqu'on utilise la notation
+          RegExp("motif").
+        </p>
+      </td>
+    </tr>
+    <tr>
+      <td><code>^</code></td>
+      <td>
+        Correspond au début la séquence. Si le marqueur (<em>flag</em>) de
+        lignes multiples vaut <code>true</code>, il correspondra également
+        immédiatement après un caractère de saut de ligne.<br /><br />Ainsi,
+        <code>/^A/</code> ne correspond pas au 'A' de "un A", mais correspond au
+        'A' de "Arceau".<br /><br />Le caractère '<code>^</code>' possède un
+        sens différent lorsqu'il est utilisé dans un motif d'ensemble de
+        caractères. Voir les
+        <a href="#special-negated-character-set"
+          >compléments sur les ensembles de caractères </a
+        >pour plus de détails et d'exemples.
+      </td>
+    </tr>
+    <tr>
+      <td><code>$</code></td>
+      <td>
+        <p>
+          Correspond à la fin de la séquence. Si le marqueur (<em>flag</em>) de
+          lignes multiples vaut true, il correspondra également immédiatement
+          avant un caractère de saut de ligne.
+        </p>
+        <p>
+          Ainsi, <code>/t$/</code> ne correspond pas au 't' de "printemps", mais
+          correspond au 't' de "aliment".
+        </p>
+      </td>
+    </tr>
+    <tr>
+      <td><code>*</code></td>
+      <td>
+        <p>
+          Correspond à l'expression précédente qui est répétée 0 ou plusieurs
+          fois. Équivalent à <code>{0,}</code>
+        </p>
+        <p>
+          Ainsi, <code>/bo*/</code> correspond à 'boo' dans "Un booléen" et à
+          'b' dans "Un bateau bleu", mais ne correspond à rien dans "Ce matin".
+        </p>
+      </td>
+    </tr>
+    <tr>
+      <td><code>+</code></td>
+      <td>
+        <p>
+          Correspond à l'expression précédente qui est répétée une ou plusieurs
+          fois. C'est équivalent à <code>{1,}</code>.
+        </p>
+        <p>
+          Ainsi, <code>/a+/</code> correspond au 'a' dans "maison" et à tous les
+          'a' dans "maaaaaaison" mais ne correspond à rien dans "mission".
+        </p>
+      </td>
+    </tr>
+    <tr>
+      <td><code>?</code></td>
+      <td>
+        Correspond à l'expression précédente qui est présente une fois ou pas du
+        tout. C'est équivalent à <code>{0,1}</code>.<br /><br />Ainsi,
+        <code>/e?le?/</code> correspond au 'el' dans "gel" et au 'le' dans
+        "angle" mais aussi au 'l' dans "Oslo".<br /><br />S'il est utilisé
+        immédiatement après l'un des quantificateurs : *, +, ?, ou {}, il rend
+        le quantificateur moins « gourmand » auquel cas le moins de caractères
+        correspond (le comportement par défaut, « gourmand », permettant de
+        faire correspondre le plus de caractères possible). Par exemple
+        <code>/\d+/</code> utilisée avec "123abc" fait correspondre "123".
+        Utiliser <code>/\d+?/</code> à la même chaîne de caractères fait
+        correspondre "1".<br /><br />Ce symbole est également utilisé dans les
+        tests de présence autour de l'expression, décrits par les lignes
+        <code>x(?=y)</code> et <code>x(?!y)</code> de ce tableau.
+      </td>
+    </tr>
+    <tr>
+      <td><code>.</code></td>
+      <td>
+        <p>
+          Par défaut, (Le point) correspond à n'importe quel caractère excepté
+          un caractère de saut de ligne.
+        </p>
+        <p>
+          Ainsi, <code>/.n/</code> correspond à 'un' et 'en' dans "Un baobab
+          nain en cours de croissance" mais pas à 'nain'.
+        </p>
+        <p>
+          Si le marqueur <code>s</code> (<em>dotAll</em>) est utilisé, le point
+          correspondra également aux caractères de saut de ligne.
+        </p>
+      </td>
+    </tr>
+    <tr>
+      <td><code>(x)</code></td>
+      <td>
+        <p>
+          Correspond à 'x' et garde la correspondance en mémoire. Les
+          parenthèses permettent de <em>capturer </em>l'expression dans un «
+          groupe ».<br /><br />Les '<code>(toto)</code>' et
+          '<code>(truc)</code>', dans le motif
+          <code>/(toto) (truc) \1 \2/</code> correspondent et gardent en mémoire
+          les deux premiers mots de la chaîne de caractère "toto truc toto
+          truc". Les <code>\1</code> et <code>\2</code> du motif correspondent
+          respectivement à la première et à la deuxième correspondances pour les
+          sous-chaînes entre parenthèses. Lorsqu'on souhaite effectuer un
+          remplacement, on utilisera <code>$1</code> et <code>$2</code> pour
+          faire référence au premier et second groupe et <code>$</code
+          ><code>n </code>pour faire référence au n-ième groupe capturé (ex.
+          <code>('toto truc'.replace(/(...) (...)/, '$2 $1').</code>
+          <code>$&#x26;</code> fera référence à la chaîne entière).
+        </p>
+      </td>
+    </tr>
+    <tr>
+      <td><code>(?:x)</code></td>
+      <td>
+        Correspond à 'x' mais ne garde pas la correspondance en mémoire. Les
+        parenthèses ne <em>capturent</em> pas l'expression et permettent
+        d'utiliser des sous-expressions d'une expression régulière pour
+        travailler plus finement. L'expression <code>/(?:zoo){1,2}/</code> sans
+        parenthèses non-capturantes <code>les caractères {1,2}</code> ne
+        s'appliqueraient qu'au dernier 'o' de 'zoo'. Avec les parenthèses
+        capturantes, <code>{1,2}</code> s'applique au mot entier 'zoo'. Pour
+        plus d'informations, voir
+        <a href="#parentheses">Utiliser les parenthèses</a> ci-après.
+      </td>
+    </tr>
+    <tr>
+      <td><code>x(?=y)</code></td>
+      <td>
+        <p>
+          Correspond à 'x' seulement s'il est suivi de 'y'. On appelle cela un
+          test de succession (<em>lookahead</em>).
+        </p>
+        <p>
+          Ainsi, <code>/Jack(?=Sparrow)/</code> correspond à 'Jack' seulement
+          s'il est suivi de 'Sparrow'.
+          <code>/Jack(?=Sparrow|Bauer)/</code> correspond à 'Jack' seulement
+          s'il est suivi de 'Sparrow' ou de 'Bauer'. Cependant, ni 'Sparrow' ni
+          'Bauer' ne feront partie de la correspondance.
+        </p>
+      </td>
+    </tr>
+    <tr>
+      <td><code>x(?!y)</code></td>
+      <td>
+        <p>Correspond à 'x' seulement si 'x' n'est pas suivi de 'y'.</p>
+        <p>
+          Ainsi, <code>/\d+(?!\.)/</code> correspond à un nombre qui n'est pas
+          suivi par un point, cette expression utilisée avec
+          <code>la chaîne 3.141</code> correspondra pour '141' mais pas pour
+          '3.141'.
+        </p>
+      </td>
+    </tr>
+    <tr>
+      <td>
+        <code>(?&#x3C;=<em>y</em>)<em>x</em></code>
+      </td>
+      <td>
+        <p>
+          Correspond à <code><em>x</em></code> seulement si
+          <code><em>x</em></code> est précédé par <code><em>y</em></code
+          >. C'est ce qu'on appelle une recherche arrière (<em>lookbehind</em>).
+        </p>
+        <p>
+          Ainsi /<code>(?&#x3C;=Jack)Sprat/</code> correspond à "Sprat"
+          seulement s'il est précédé de "Jack".<br /><code
+            >/(?&#x3C;=Jack|Tom)Sprat/</code
+          >
+          correspond à "Sprat" seulement s'il est précédé de "Jack" ou "Tom".<br />Toutefois,
+          "Jack" et "Tom" ne feront pas partie de la correspondance.
+        </p>
+      </td>
+    </tr>
+    <tr>
+      <td>
+        <code>(?&#x3C;!<em>y</em>)<em>x</em></code>
+      </td>
+      <td>
+        <p>
+          Correspond à <code><em>x</em></code> uniquement si
+          <code><em>x</em></code> n'est pas précédé par
+          <code><em>y</em></code> (parfois appelée en anglais
+          <em>negated lookbehind</em>)<em>.</em>
+        </p>
+        <p>
+          Ainsi, <code>/(?&#x3C;!-)\d+/</code> correspondra à un nombre
+          seulement si celui-ci n'est pas précédé d'un signe moins.<br /><code
+            >/(?&#x3C;!-)\d+/.exec('3')</code
+          >
+          cible "3".<br /><code>/(?&#x3C;!-)\d+/.exec('-3')</code> ne trouve
+          aucune correspondance car le nombre est précédé d'un signe.
+        </p>
+      </td>
+    </tr>
+    <tr>
+      <td><code>x|y</code></td>
+      <td>
+        <p>Correspond à 'x' ou 'y'.</p>
+        <p>
+          Ainsi, <code>/vert|rouge/</code> correspond à 'vert' dans "feu vert"
+          et à 'rouge' dans "feu rouge".
+        </p>
+      </td>
+    </tr>
+    <tr>
+      <td><code>{n}</code></td>
+      <td>
+        Correspond pour exactement n occurences de l'expression précédente. N
+        doit être un entier positif.<br /><br />Ainsi, <code>/a{2}/</code> ne
+        correspond pas au 'a' de "Mozilla" mais correspond à tous les 'a' de
+        "Mozilaa" et aux deux premiers 'a' de "Mozillaaa".
+      </td>
+    </tr>
+    <tr>
+      <td><code>{n,}</code></td>
+      <td>
+        <p>
+          Correspond lorsqu'il y a au moins <code>n</code> occurences de
+          l'expression précédente. <code>n</code> doit être un entier positif.
+        </p>
+        <p>
+          Par exemple <code>/a{2,}/</code> correspondra à <code>"aa"</code> ou à
+          <code>"aaa"</code> ou encore à <code>"aaaa"</code> mais pas à
+          <code>"a"</code>.
+        </p>
+      </td>
+    </tr>
+    <tr>
+      <td><code>{n,m}</code></td>
+      <td>
+        <p>
+          Lorsque <code>n</code> et <code>m</code> sont des entiers positifs,
+          cela correspond à au moins <code>n</code> occurences de l'expression
+          précédente et à au plus <code>m</code> occurrences. Lorsque
+          <code>m</code> n'est pas utilisé, la valeur par défaut correspondante
+          sera l'infini.
+        </p>
+        <p>
+          Ainsi, <code>/a{1,3}/</code> ne correspond à rien dans "Mozill", au
+          'a' de "Mozilla", au deux premiers 'a' de "Mozillaa" et au trois
+          premiers 'a' de "Mozillaaaaa". Pour ce dernier exemple, on doit noter
+          que le correspondance ne se fait que sur "aaa" bien qu'il y ait plus
+          de 'a' dans la chaîne de caractères.
+        </p>
+      </td>
+    </tr>
+    <tr>
+      <td><code>[xyz]</code></td>
+      <td>
+        Un ensemble de caractère. Ce type de motif correspond pour n'importe
+        quel caractètre présent entre les crochets, y compris les
+        <a
+          href="/fr/docs/Web/JavaScript/Guide/Types_et_grammaire#Les_caractères_d&#x27;échappement"
+          >séquences d'échappement</a
+        >. Les caractères spéciaux comme le point (.) et l'astérisque ne sont
+        pas considérés comme spéciaux au sein d'un ensemble et n'ont donc pas
+        besoin d'être échappés. Il est possible de donner un ensemble sur un
+        intervalle de caractères en utilisant un tiret (-), comme le montre
+        l'exemple qui suit.<br /><br />Le motif <code>[a-d]</code>, aura les
+        mêmes correspondances que <code>[abcd]</code>, correspondant au 'b' de
+        "bulle" et au 'c' de "ciel". Les motifis <code>/[a-z.]+/ </code>et
+        <code>/[\w.]+/</code> correspondront pour la chaîne entirère :
+        "Adre.ss.e".
+      </td>
+    </tr>
+    <tr>
+      <td><code>[^xyz]</code></td>
+      <td>
+        <p>
+          Exclusion d'un ensemble de caractères. Cela correspond à tout ce qui
+          n'est pas compris entre crochets. Il est possible de fournir un
+          intervalle de caractères en utilisant un tiret (-). Les autres règles
+          qui s'appliquent pour l'ensemble de caractères (ci-avant) s'appliquent
+          également ici.
+        </p>
+        <p>
+          Par exemple, <code>[^abc]</code> est équivalent à <code>[^a-c]</code>.
+          Ils correspondent à 'u' dans "bulle" et à 'i' dans "ciel".
+        </p>
+      </td>
+    </tr>
+    <tr>
+      <td><code>[\b]</code></td>
+      <td>
+        Correspond pour un retour arrière (U+0008). (À ne pas confondre avec
+        <code>\b</code>.)
+      </td>
+    </tr>
+    <tr>
+      <td><code>\b</code></td>
+      <td>
+        <p>
+          Correspond à la position d'uneAfter the <em>limite de mot</em>. Une
+          limite de mot correspond à la position où un caractère d'un mot n'est
+          pas suivi ou précédé d'un autre caractère de mot. Il faut savoir que
+          la limite correspondante n'est pas incluse dans le résultat. Autrement
+          dit, la longueur d'une telle correspondance est nulle. (À ne pas
+          confondre avec <code>[\b]</code>.)
+        </p>
+        <p>
+          Exemples :<br /><code>/\bm/</code> correspond au 'm' dans "mignon"
+          ;<br /><code>/no\b/</code> ne correspond pas au 'no' de "mignon" car
+          'no' est suivi de 'n' qui n'est pas un caractère de limite de mot;<br /><code
+            >/non\b/</code
+          >
+          correspond au 'non' de "mignon" car 'non' représente la fin de la
+          chaîne de caractère et n'est donc pas suivi par un caractère de
+          mot.<br /><code>/\w\b\w/</code> ne correspondra jamais à quoi que ce
+          soit car un caractère de mot ne peut pas être suivi à la fois par un
+          caractère de mot et un caractère n'étant pas un caractère de mot.
+        </p>
+        <div class="note">
+          <p>
+            <strong>Note :</strong> Le moteur d'expressions rationnelles
+            JavaScript définit
+            <a
+              href="http://www.ecma-international.org/ecma-262/5.1/#sec-15.10.2.6"
+              >un ensemble de caractères spécifiques</a
+            >
+            qui doivent être considérés comme des caractères de mot. Tout
+            caractère qui n'est pas dans cet ensemble est considéré comme une
+            limite de mot. Cet ensemble de caractères est relativement limité
+            car constitué uniquement des caractères de l'alphabet romain en
+            minuscules et en majuscules, des chiffres décimaux et du tiret-bas
+            (<em>underscore</em>). Les autres caractères, comme les caractères
+            accentués (é ou ü par exemple), sont donc considérés comme des
+            limites de mots.
+          </p>
+        </div>
+      </td>
+    </tr>
+    <tr>
+      <td><code>\B</code></td>
+      <td>
+        <p>
+          Correspond à une "non-<em>limite de mot</em>". Cela correspond pour
+          les cas suivants :
+        </p>
+        <ul>
+          <li>Avant le premier caractère d'une chaîne de caractères</li>
+          <li>Après le dernier caractère d'une chaîne de caractères</li>
+          <li>Entre deux caractères de mot</li>
+          <li>Entre deux caractères qui ne sont pas des caractères de mot</li>
+          <li>Avec la chaîne vide.</li>
+        </ul>
+        <p>
+          Ainsi, <code>/\B../</code> correspond au 'oo' de "football" (et
+          <code>/e\B./</code> correspond au 'er' dans "une mer "
+        </p>
+      </td>
+    </tr>
+    <tr>
+      <td>
+        <code>\c<em>X</em></code>
+      </td>
+      <td>
+        <p>
+          Étant donné un caractère <em>X</em> compris entre A et Z, cela
+          correspond au caractère de contrôle dans une chaîne de caractères.
+        </p>
+        <p>
+          Ainsi, <code>/\cM/</code> correspond au caractère de contrôle M
+          (U+000D) d'une chaîne de caractère.
+        </p>
+      </td>
+    </tr>
+    <tr>
+      <td><code>\d</code></td>
+      <td>
+        <p>Correspond à un chiffre et est équivalent à <code>[0-9]</code>.</p>
+        <p>
+          Ainsi, <code>/\d/</code> ou <code>/[0-9]/</code> correspond à '2' dans
+          "H2O est la molécule de l'eau".
+        </p>
+      </td>
+    </tr>
+    <tr>
+      <td><code>\D</code></td>
+      <td>
+        <p>
+          Correspond à tout caractère qui n'est pas un chiffre et est équivalent
+          à<code> [^0-9]</code>.
+        </p>
+        <p>
+          Ainsi, <code>/\D/</code> ou <code>/[^0-9]/</code> correspond à 'H'
+          dans "H2O est la molécule de l'eau".
+        </p>
+      </td>
+    </tr>
+    <tr>
+      <td><code>\f</code></td>
+      <td>Correspond à un saut de page (U+000C).</td>
+    </tr>
+    <tr>
+      <td><code>\n</code></td>
+      <td>Correspond à un saut de ligne (U+000A).</td>
+    </tr>
+    <tr>
+      <td><code>\r</code></td>
+      <td>Correspond à un retour chariot (U+000D).</td>
+    </tr>
+    <tr>
+      <td><code>\s</code></td>
+      <td>
+        <p>
+          Correspond à un blanc (cela comprend les espace, tabulation, saut de
+          ligne ou saut de page). C'est équivalent à
+          <code
+            >[
+            \f\n\r\t\v\u00a0\u1680\u2000-\u200a\u2028\u2029\u202f\u205f\u3000\ufeff]</code
+          >.
+        </p>
+        <p>
+          Ainsi, <code>/\s\w*/</code> correspond à ' toto' dans "truc toto".
+        </p>
+      </td>
+    </tr>
+    <tr>
+      <td><code>\S</code></td>
+      <td>
+        <p>
+          Correspond à un caractère qui n'est pas un blanc. C'est équivalent à
+          <code
+            >[^
+            \f\n\r\t\v\u00a0\u1680\u2000-\u200a\u2028\u2029\u202f\u205f\u3000\ufeff]</code
+          >.
+        </p>
+        <p>Ainsi, <code>/\S\w*/</code> correspond à 'truc' dans "truc toto".</p>
+      </td>
+    </tr>
+    <tr>
+      <td><code>\t</code></td>
+      <td>Correspond à une tabulation (U+0009).</td>
+    </tr>
+    <tr>
+      <td><code>\v</code></td>
+      <td>Correspond à une tabulation verticale (U+000B).</td>
+    </tr>
+    <tr>
+      <td><code>\w</code></td>
+      <td>
+        <p>
+          Correspond à n'importe quel caractère alphanumérique, y compris le
+          tiret bas. C'est équivalent à <code>[A-Za-z0-9_]</code>.
+        </p>
+        <p>
+          Ainsi, <code>/\w/</code> correspond à 'l' dans "licorne", à '5' dans
+          "5,28€", et à '3' dans "3D."
+        </p>
+      </td>
+    </tr>
+    <tr>
+      <td><code>\W</code></td>
+      <td>
+        <p>
+          Correspond à n'importe quel caractère n'étant pas un caractère de mot.
+          Cela est équivalent à <code>[^A-Za-z0-9_]</code>.
+        </p>
+        <p>
+          Ainsi, <code>/\W/</code> ou <code>/[^A-Za-z0-9_]/</code> correspond à
+          '%' dans "50%."
+        </p>
+      </td>
+    </tr>
+    <tr>
+      <td><code>\n</code></td>
+      <td>
+        <p>
+          Soit <em>n</em> un entier strictement positif, cela fait référence au
+          groupe de la n-ième expression entre parenthèses (en comptant les
+          parenthèses ouvrantes).
+        </p>
+        <p>
+          Ainsi, <code>/pomme(,)\spoire\1/</code> correspond à 'pomme, poire,'
+          dans "pomme, poire, cerise, pêche".
+        </p>
+      </td>
+    </tr>
+    <tr>
+      <td><code>\0</code></td>
+      <td>
+        Correspond au caractère NULL (U+0000). Il ne doit pas être suivi d'un
+        autre chiffre car <code>\0&#x3C;chiffres></code> est une
+        <a
+          href="/fr/docs/Web/JavaScript/Guide/Types_et_grammaire#Les_caractères_d&#x27;échappement"
+          >séquence d'échappement</a
+        >
+        pour les nombres en notation octale (si besoin d'utiliser un chiffre
+        ensuite, on pourra utiliser la forme <code>\x00</code>, cf. ci-après).
+      </td>
+    </tr>
+    <tr>
+      <td><code>\xhh</code></td>
+      <td>
+        Correspond au caractère dont le code hexadécimal est hh (deux chiffres
+        hexadécimaux).
+      </td>
+    </tr>
+    <tr>
+      <td><code>\uhhhh</code></td>
+      <td>
+        Correspond au caractère dont le code est hhhh (quatre chiffres
+        hexadécimaux).
+      </td>
+    </tr>
+    <tr>
+      <td><code>\u{hhhh}</code></td>
+      <td>
+        (Uniquement actif quand le marqueur <code>u</code> est activé)
+        Correspond au caractère dont la valeur Unicode est <code>hhhh</code> (en
+        chiffre hexadécimaux).
+      </td>
+    </tr>
+  </tbody>
+</table>
+
+Afin d'échapper les informations saisies par l'utilisateur et de traîter les chaînes de caractères pour les utiliser au sein d'un expression régulière correspondante, il est possible d'utiliser le remplacement suivant :
+
+```js
+function escapeRegExp(string){
+  // $& correspond à la chaîne correspondante
+  // dans son intégralité
+  return string.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}
+```
+
+Le marqueur `g` situé en fin d'expression permet d'effectuer une recherche globale, qui parcoure toute la chaîne et renvoie l'ensemble des correspondances trouvées (voir [Utiliser les marqueurs](#recherches_flag) ci-après).
+
+> **Note :** Voir la page sur la méthode [`String.replace`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/replace) pour plus d'informations.
+
+### Utiliser les parenthèses
+
+Les parenthèses encadrant une partie du motif de l'expression régulière peuvent être utilisées pour garder en mémoire les correspondances. Cela pourra être utile pour réutiliser la correspondance trouvée.
+
+Ainsi, le motif `/Chapitre (\d+)\.\d*/` utilise des caractères échappés et spéciaux et indique une partie du motif à garder en mémoire. Ce motif correspond aux caractères 'Chapitre ' suivi par un ou plusieurs caractères numériques (`\d` correspond à un chiffre et `+` indiquant que une série de 1 ou plusieurs chiffres), suivis par un point (qu'il est nécessaire d'échapper car c'est un caractère spécial, on utilise donc '\\' pour indiquer qu'on souhaite reconnaître le caractère '.'), suivi par 0 ou plusieurs chiffres (`\d` correspondant à un chiffre et l'astérisque indiquant que le caractère est présent 0 ou plusieurs fois). Les parenthèses sont utilisées pour garder en mémoire les premiers chiffres correspondant.
+
+Ce motif est trouvé dans "Ouvrir le Chapitre 4.3 au paragraphe 6" et le chiffre '4' est gardé en mémoire. Le motif n'est pas trouvé dans  "Chapitre 3 et 4", car la chaîne de caractères ne comporte pas de point après le '3'.
+
+Pour qu'une partie de la chaîne de caractère corresponde mais que la correspondance ne soit pas gardée en mémoire, on pourra utiliser `?:`. Ainsi, `(?:\d+)` correspondra pour une séquence de chiffres (1 ou plusieurs chiffres) mais on ne gardera pas en mémoire les caractères correspondants.
+
+## Utiliser les expressions rationnelles
+
+Les expresssions régulières sont utilisées avec les méthodes ` test``  `et` exec` de l'objet` RegExp` et avec les méthodes `match`, `replace`, `search`, et `split` de l'objet `String`. Ces méthodes sont expliquées en détail dans la [Référence JavaScript](/fr/docs/Web/JavaScript/Reference).
+
+| Méthode                                                  | Description                                                                                                                                                                                        |
+| -------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| {{jsxref("RegExp.exec", "exec")}}             | Une méthode de l'objet `RegExp` qui exécute une recherche de correspondance dans une chaîne de caractères. Elle renvoie un tableau d'informations ou `null` lorsqu'il n'y a pas de correspondance. |
+| {{jsxref("RegExp.test", "test")}}             | Une méthode de l'objet `RegExp` testant la présence d'une correspondance dans une chaîne de caractères. Elle renvoie true ou false.                                                                |
+| {{jsxref("String.match", "match")}}         | Une méthode de l'objet `String` qui exécute une recherche de correspondance dans une chaîne de caractères. Elle renvoie un tableau d'informations ou `null` lorsqu'il n'y a pas de correspondance. |
+| {{jsxref("String.matchAll", "matchAll")}} | Une méthode de l'objet `String` qui renvoie un itérateur contenant l'ensemble des correspondances, y compris les groupes capturants.                                                               |
+| {{jsxref("String.search", "search")}}         | Une méthode de l'objet `String` qui teste la présence d'une correspondance dans une chaîne de correspondance. Elle renvoie la position de la correspondance ou -1 s'il n'y en a pas.               |
+| {{jsxref("String.replace", "replace")}}     | Une méthode de l'objet `String` qui recherche une correspondance dans une chaîne de caractères et qui remplace la correspondance par une chaîne de substitution.                                   |
+| {{jsxref("String.split", "split")}}         | Une méthode de l'objet `String` qui utilise une expression régulière ou une chaîne de caractères pour découper une chaîne de caractères en un tableau comprenant les fragments résultants.         |
+
+Pour savoir si un motif est présent au sein d'une chaîne de caractères, utiliser les méthodes` test` ou `search`. Pour obtenir plus d'informations (moins rapidement) on utilisera les méthodes `exec` ou `match`. Si on utilise `exec` ou `match` et qu'une correspondance est trouvée, ces méthodes renverront un tableau et mettront à jour des propriétés de l'objet global `RegExp` et aussi de l'instance de `RegExp` associée à l'expression rationnelle. Si aucune correspondance n'est trouvée, la méthode `exec` renverra `null` (qui est automatiquement converti à `false` lors d'un test conditionnel).
+
+Dans l'exemple qui suit, le script utilise la méthode `exec` pour trouver une correspondance dans une chaîne de caractères.
+
+```js
+var monExpressionReguliere = /d(b+)d/g;
+var monTableau = monExpressionReguliere.exec("cdbbdbsbz");
+```
+
+S'il n'est pas nécessaire d'accéder aux propriétés de l'expression régulière, une autre façon de récupérer `monTableau` peut être :
+
+```js
+var monTableau = /d(b+)d/g.exec("cdbbdbsbz");
+// équivalent à "cdbbdbsbz".match(/d(b+)d/g);
+```
+
+Si on souhaite construire une expression régulière à partir d'une chaîne de caractères, on peut utiliser le script suivant :
+
+```js
+var monExpressionReguliere = new RegExp("d(b+)d", "g");
+var monTableau = monExpressionReguliere.exec("cdbbdbsbz");
+```
+
+Avec ces scripts, on obtient bien une correspondance, la méthode renvoie un tableau et met à jour les propriétés listées dans le tableau qui suit.
+
+<table class="standard-table">
+  <caption>
+    Résultats dûs à l'exécution d'une expression rationnelle.
+  </caption>
+  <thead>
+    <tr>
+      <th scope="col">Objet</th>
+      <th scope="col">Propriété ou indice</th>
+      <th scope="col">Description</th>
+      <th scope="col">Pour cet exemple</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td rowspan="4"><code>monTableau</code></td>
+      <td></td>
+      <td>
+        La chaîne de caractères correspondante et les fragments de chaînes
+        gardés en mémoire.
+      </td>
+      <td><code>["dbbd", "bb"]</code></td>
+    </tr>
+    <tr>
+      <td><code>index</code></td>
+      <td>
+        L'indice (débute à partir de 0) de la correspondance, compté dans la
+        chaîne de caractère initiale.
+      </td>
+      <td><code>1</code></td>
+    </tr>
+    <tr>
+      <td><code>input</code></td>
+      <td>La chaîne de caractères initiale.</td>
+      <td><code>"cdbbdbsbz"</code></td>
+    </tr>
+    <tr>
+      <td><code>[0]</code></td>
+      <td>Les derniers caractères qui correspondent.</td>
+      <td><code>"dbbd"</code></td>
+    </tr>
+    <tr>
+      <td rowspan="2"><code>monExpressionRégulière</code></td>
+      <td><code>lastIndex</code></td>
+      <td>
+        L'indice auquel débuter la prochaine correspondance. (Cette propriété
+        n'est utilisée que si l'expression régulière utilise l'option g, décrite
+        dans «
+        <a href="#recherches_flag"
+          >Effectuer des recherches avancées avec les marqueurs</a
+        >
+        ».
+      </td>
+      <td><code>5</code></td>
+    </tr>
+    <tr>
+      <td><code>source</code></td>
+      <td>
+        Le texte du motif, mis à jour à la création de l'expression régulière
+        mais pas lors de son exécution.
+      </td>
+      <td><code>"d(b+)d"</code></td>
+    </tr>
+  </tbody>
+</table>
+
+Comme le montre la seconde formulation de cet exemple, il est possible d'utiliser une expression rationnelle, créée avec un objet initialisé sans l'affecter à une variable. Cela implique qu'à chaque utilisation, on aura une nouvelle expression régulière distincte et qu'on ne pourra pas, pour cette raison, accéder aux propriétés de l'expression régulière. Avec le script suivant :
+
+```js
+var monExpressionReguliere = /d(b+)d/g;
+var monTableau = monExpressionReguliere.exec("cdbbdbsbz");
+console.log("La valeur de lastIndex est " + monExpressionReguliere.lastIndex);
+
+// "La valeur de lastIndex est 5"
+```
+
+Si le script utilisé est :
+
+```js
+var monTableau = /d(b+)d/g.exec("cdbbdbsbz");
+console.log("La valeur de lastIndex est " + /d(b+)d/g.lastIndex);
+
+// "La valeur de lastIndex est 0"
+```
+
+Les occurences de `/d(b+)d/g` dans les deux instructions sont des objets différents. Leurs propriétés `lastIndex` respectives ont donc des valeurs différentes. Quand il est nécessaire d'accéder aux propriétés d'un objet décrivant une expression rationnelle, il faudra d'abord l'affecter à une variable.
+
+### Utiliser les correspondances de groupes avec les parenthèses
+
+Les parenthèses, utilisées dans un motif d'expression régulière, permettent de garder en mémoire un groupe (ou fragment) d'une correspondance. Ainsi, `/a(b)c/` correspond aux caractères 'abc' et garde 'b' en mémoire. Pour récupérer ces fragments mémorisés, on peut utiliser les éléments du tableau `array` `[1]`, ..., `[n]`.
+
+Le nombre de fragments qu'il est possible de garder entre parenthèses n'est pas limité. Le tableau renvoyé contiendra tout ce qui aura été trouvé. Les exemples qui suivent montrent comment utiliser cette syntaxe.
+
+Le script qui suit utilise la méthode {{jsxref("String.replace", "replace()")}} pour échanger les mots d'une chaîne de caractères. Pour remplacer le texte, le script utilise `$1` et `$2` qui correspondent au premier et deuxième groupe correspondant.
+
+```js
+var re = /(\w+)\s(\w+)/;
+var str = "Titi toto";
+var newstr = str.replace(re, "$2, $1");
+console.log(newstr);
+```
+
+Cela affichera "toto, Titi".
+
+### Effectuer des recherches avancées en utilisant les marqueurs (_flags_)
+
+Les expressions rationnelles peuvent être utilisées avec des marqueurs optionnels permettant des recherches globales et/ou ne respectant pas la casse. Ces marqueurs peuvent être utilisés séparement ou ensemble, quel que soit l'ordre. Ils font partie de l'expression régulière.
+
+| Drapeau (_Flag_) | Description                                                                                                                                                                                                      |
+| ---------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `g`              | Recherche globale                                                                                                                                                                                                |
+| `i`              | Recherche ne respectant pas la casse                                                                                                                                                                             |
+| `m`              | Recherche sur plusieurs lignes                                                                                                                                                                                   |
+| `s`              | Le point peut correspondre aux caractères de saut de ligne.                                                                                                                                                      |
+| `u`              | Unicode. Le motif de recherche est interprété comme une séquence de codets Unicode.                                                                                                                              |
+| `y`              | Effectue une recherche qui « adhère », en partant de la position courante de la chaîne de caractères sur laquelle la recherche est effectuée. Voir la page sur {{jsxref("RegExp.sticky","sticky")}}. |
+
+Pour utiliser un marqueur avec une expression régulière, on utilisera la syntaxe suivante :
+
+```js
+var re = /motif/marqueurs;
+```
+
+ou
+
+```js
+var re = new RegExp("motif", "marqueurs");
+```
+
+Les marqueurs font partie intégrante d'une expression régulière, ils ne peuvent pas être ajoutés ou supprimés ensuite.
+
+Ainsi, `re = /\w+\s/g` permet de créer une expression régulière pour trouver un ou plusieurs caractères suivis d'un espace, la recherche est effectuée globalement, sur toute la chaîne de caractères.
+
+```js
+var re = /\w+\s/g;
+var str = "un deux trois quatre";
+var monTableau = str.match(re);
+console.log(monTableau);
+```
+
+Cela affichera \["un ", "deux ", "trois "]. On pourrait remplacer la ligne :
+
+```js
+var re = /\w+\s/g;
+```
+
+avec la ligne :
+
+```js
+var re = new RegExp("\\w+\\s", "g");
+```
+
+pour obtenir le même résultat.
+
+Le comportement du marqueur `'g'` est différent selon qu'il est utilisé avec [`exec()`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/RegExp/exec) ou avec [`match()`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/match). Pour `match()`, c'est la chaîne de caractères qui invoque la méthode et l'expression rationnelle est alors un argument. Pour `exec()`, c'est l'expression rationnelle qui invoque la méthode et c'est la chaîne de caractères qui est passée en argument. Dans l'appel à `exec()`, le marqueur `'g'` permet d'avoir une progression itérative.
+
+Le marqueur `m` pourra être utilisé pour traiter une chaîne de caractères de plusieurs lignes comme plusieurs lignes distinctes. Si ce marqueur est utilisé, les caractères spéciaux `^` et `$` correspondront au début ou à la fin de n'importe quelle ligne appartenant à la chaîne de caractères au lieu de correspondre simplement au début ou à la fin de la chaîne.
+
+## Exemples
+
+Les exemples qui suivent utilisent les expressions régulières dans différents cas.
+
+### Changer l'ordre d'une saisie
+
+L'exemple qui suit utilise les expressions régulières et `string.split()` et `string.replace()`. Le script nettoie la chaîne de caractères saisie qui contient des noms (prénom puis nom) séparés par des blancs, tabulations et points-virgules. Enfin il inverse les noms et prénoms puis trie la liste.
+
+```js
+// La chaîne des noms contient plusieurs blancs et tabulations,
+// il peut y avoir plusieurs espaces entre le nom et le prénom.
+var noms = "Harry Trump ;Fred Barney; Helen Rigby ; Bill Abel ; Chris Hand ";
+
+var output = ["---------- Chaîne originale\n", noms + "\n"];
+
+// Préparer deux expressions régulières pour stocker un tableau.
+// et découper les chaînes dans ce tableau.
+
+// motif: on peut avoir des blancs, un point virgule puis d'autres blancs
+var motif = /\s*;\s*/;
+
+// Découper la chaîne de caractères en morceaux séparés par le précédent motif
+// Stocker ces morceaux dans un tableau listeNoms
+var listeNoms = noms.split(motif);
+
+// nouveau motif : un ou plusieurs caractères, des blancs puis des caractères.
+// On utilise des parenthèses pour garder en mémoire les groupes du motif.
+// On utilisera ces groupes par la suite.
+motif = /(\w+)\s+(\w+)/;
+
+// Nouveau tableau pour enregistrer les noms traités.
+var listeParNomFamille = [];
+
+// Afficher le tableau des noms et remplir le nouveau tableau
+// avec les noms et prénoms séparés par des virgules, le nom
+// de famille étant écrit en premier
+//
+// La méthode replace supprime tout ce qui correspond au motif
+// et le remplace par le nom (mémorisé), une virgule, un espace
+// et le prénom (mémorisé).
+//
+// Les variables $1 et $2 font références aux fragments gardés
+// en mémoire lors de l'utilisation du motif.
+
+output.push("---------- Après découpage avec l'expression régulière");
+
+var i, len;
+for (i = 0, len = listeNoms.length; i < len; i++){
+  output.push(listeNoms[i]);
+  listeParNomFamille[i] = listeNoms[i].replace(motif, "$2, $1");
+}
+
+// Afficher le nouveau tableau
+output.push("---------- Noms et prénoms inversés");
+for (i = 0, len = listeParNomFamille.length; i < len; i++){
+  output.push(listeParNomFamille[i]);
+}
+
+// Trier par le nom de famille puis afficher le tableau trié
+listeParNomFamille.sort();
+output.push("---------- Triée");
+for (i = 0, len = listeParNomFamille.length; i < len; i++){
+  output.push(listeParNomFamille[i]);
+}
+
+output.push("---------- Fin");
+
+console.log(output.join("\n"));
+```
+
+### Utiliser les caractères spéciaux pour vérifier la saisie
+
+Dans l'exemple suivant, on s'attend à ce que l'utilisateur saisissent un numéro de téléphone. Quand l'utilisateur appuie sur le bouton "Vérifier", le script vérifie la validité du numéro. Si le numéro est valide (il correspond à la séquence de caractères fournie par l'expression régulière), le script affiche un message remerciant l'utilisateur et confirmant le numéro. S'il est invalide, le script informe l'utilisateur et lui signifie que les informations saisies ne sont pas valides.
+
+Dans les parenthèses sans mémoire `(?:` , l'expression régulière cherche les deux premiers chiffres ou l'indicatif du pays suivi d'un blanc et du premier chiffre, ce qui correspond à
+
+```html
+\d{2}|\+\d{2}[ ]\d
+```
+
+Cette partie signifie : deux chiffres OU un signe '+' suivi de deux chiffres, un blanc et un autre chiffre.
+
+Ensuite, on a un groupe qui est mémorisé (entre parenthèses) :
+
+```html
+([- ])
+```
+
+Ce groupe correspond à ce qui va être utilisé pour séparer les différentes composantes du numéro de téléphone.
+
+Ensuite,
+
+```html
+\d{2}\1
+```
+
+signifie qu'on a deux chiffres suivi du premier groupe qui est celui qui définit le séparateur. Le reste est composé de la même façon. Ainsi les numéros de téléphone +33 1 23 45 67 89 et 01 23 45 67 89 seront tous les deux valides.
+
+L'événement `Change`, provoqué quand l'utilisateur appuie sur Entrée, renseigne la valeur `RegExp.input`.
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
+    <meta http-equiv="Content-Script-Type" content="text/javascript">
+    <script type="text/javascript">
+      var re = /(?:\d{2}|\+\d{2}[ ]\d)([- ])\d{2}\1\d{2}\1\d{2}\1\d{2}/;
+      function testInfo(phoneInput){
+        var OK = re.exec(phoneInput.value);
+        if (!OK)
+          window.alert(phone.input + " n'est pas un numéro de téléphone valide!");
+        else
+          window.alert("Merci, votre numéro est : " + OK[0]);
+      }
+    </script>
+  </head>
+  <body>
+    <p>Saisissez votre numéro de téléphone (avec indicatif) puis cliquez sur "Vérifier".
+        <br>Le format attendu est ## ## ## ## ## ou +## # ## ## ## ##.</p>
+    <form action="#">
+      <input id="phone"><button onclick="testInfo(document.getElementById('phone'));">Vérifier</button>
+    </form>
+  </body>
+</html>
+```
+
+{{PreviousNext("Web/JavaScript/Guide/Formatage_du_texte", "Web/JavaScript/Guide/Collections_indexées")}}
diff --git a/files/fr/web/javascript/guide/regular_expressions/quantifiers/index.html b/files/fr/web/javascript/guide/regular_expressions/quantifiers/index.html
deleted file mode 100644
index f27dfa250b..0000000000
--- a/files/fr/web/javascript/guide/regular_expressions/quantifiers/index.html
+++ /dev/null
@@ -1,98 +0,0 @@
----
-title: Quantificateurs
-slug: Web/JavaScript/Guide/Regular_Expressions/Quantifiers
-tags:
-  - Guide
-  - JavaScript
-  - Quantificateurs
-  - RegExp
-translation_of: Web/JavaScript/Guide/Regular_Expressions/Quantifiers
-original_slug: Web/JavaScript/Guide/Expressions_régulières/Quantificateurs
----
-<p>{{jsSidebar("JavaScript Guide")}}{{draft}}</p>
-
-<p>Les quantificateurs indiquent le nombre de caractères ou d'expressions qu'il faut pour une correspondance.</p>
-
-<h2 id="Types">Types</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Caractères</th>
-   <th scope="col">Signification</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><code>x*</code></td>
-   <td>
-    <p>Correspond à l'expression précédente qui est répétée 0 ou plusieurs fois. Équivalent à <code>{0,}</code></p>
-
-    <p>Ainsi, <code>/bo*/</code> correspond à 'boo' dans "Un booléen" et à 'b' dans "Un bateau bleu", mais ne correspond à rien dans "Ce matin".</p>
-   </td>
-  </tr>
-  <tr>
-   <td><code>x+</code></td>
-   <td>
-    <p>Correspond à l'expression précédente qui est répétée une ou plusieurs fois. C'est équivalent à <code>{1,}</code>.</p>
-
-    <p>Ainsi, <code>/a+/</code> correspond au 'a' dans "maison" et à tous les 'a' dans "maaaaaaison" mais ne correspond à rien dans "mission".</p>
-   </td>
-  </tr>
-  <tr>
-   <td><code>x?</code></td>
-   <td>
-    <p>Correspond à l'expression précédente qui est présente une fois ou pas du tout. C'est équivalent à <code>{0,1}</code>.<br>
-     <br>
-     Ainsi, <code>/e?le?/</code> correspond au 'el' dans "gel" et au 'le' dans "angle" mais aussi au 'l' dans "Oslo".<br>
-     <br>
-     S'il est utilisé immédiatement après l'un des quantificateurs : *, +, ?, ou {}, il rend le quantificateur moins « gourmand » auquel cas le moins de caractères correspond (le comportement par défaut, « gourmand », permettant de faire correspondre le plus de caractères possible). Par exemple <code>/\d+/</code> utilisée avec "123abc" fait correspondre "123". Utiliser <code>/\d+?/</code> à la même chaîne de caractères fait correspondre "1".<br>
-     <br>
-     Ce symbole est également utilisé dans les tests de présence autour de l'expression, décrits par les lignes <code>x(?=y)</code> et <code>x(?!y)</code> de ce tableau.</p>
-   </td>
-  </tr>
-  <tr>
-   <td><code>x{n}</code></td>
-   <td>
-    <p>Correspond pour exactement n occurences de l'expression précédente. N doit être un entier positif.<br>
-     <br>
-     Ainsi, <code>/a{2}/</code> ne correspond pas au 'a' de "Mozilla" mais correspond à tous les 'a' de "Mozilaa" et aux deux premiers 'a' de "Mozillaaa".</p>
-   </td>
-  </tr>
-  <tr>
-   <td><code>x{n,}</code></td>
-   <td>
-    <p>Correspond lorsqu'il y a au moins <code>n</code> occurences de l'expression précédente. <code>n</code> doit être un entier positif.</p>
-
-    <p>Par exemple <code>/a{2,}/</code> correspondra à <code>"aa"</code> ou à <code>"aaa"</code> ou encore à <code>"aaaa"</code> mais pas à <code>"a"</code>.</p>
-   </td>
-  </tr>
-  <tr>
-   <td><code>x{n,m}</code></td>
-   <td>
-    <p>Lorsque <code>n</code> et <code>m</code> sont des entiers positifs, cela correspond à au moins <code>n</code> occurences de l'expression précédente et à au plus <code>m</code> occurrences. Lorsque <code>m</code> n'est pas utilisé, la valeur par défaut correspondante sera l'infini.</p>
-
-    <p>Ainsi, <code>/a{1,3}/</code> ne correspond à rien dans "Mozill", au 'a' de "Mozilla", au deux premiers 'a' de "Mozillaa" et au trois premiers 'a' de "Mozillaaaaa". Pour ce dernier exemple, on doit noter que le correspondance ne se fait que sur "aaa" bien qu'il y ait plus de 'a' dans la chaîne de caractères.</p>
-   </td>
-  </tr>
-  <tr>
-   <td>
-    <p><code>x*?</code><br>
-     <code>x+?</code><br>
-     <code>x??</code><br>
-     <code>x{n}?</code><br>
-     <code>x{n,}?</code><br>
-     <code>x{n,m}?</code></p>
-   </td>
-   <td>
-    <p>Correspond à l'expression précédente qui est présente une fois ou pas du tout. C'est équivalent à <code>{0,1}</code>.<br>
-     <br>
-     Ainsi, <code>/e?le?/</code> correspond au 'el' dans "gel" et au 'le' dans "angle" mais aussi au 'l' dans "Oslo".<br>
-     <br>
-     S'il est utilisé immédiatement après l'un des quantificateurs : *, +, ?, ou {}, il rend le quantificateur moins « gourmand » auquel cas le moins de caractères correspond (le comportement par défaut, « gourmand », permettant de faire correspondre le plus de caractères possible). Par exemple <code>/\d+/</code> utilisée avec "123abc" fait correspondre "123". Utiliser <code>/\d+?/</code> à la même chaîne de caractères fait correspondre "1".<br>
-     <br>
-     Ce symbole est également utilisé dans les tests de présence autour de l'expression, décrits par les lignes <code>x(?=y)</code> et <code>x(?!y)</code> de ce tableau.</p>
-   </td>
-  </tr>
- </tbody>
-</table>
diff --git a/files/fr/web/javascript/guide/regular_expressions/quantifiers/index.md b/files/fr/web/javascript/guide/regular_expressions/quantifiers/index.md
new file mode 100644
index 0000000000..f94599fde7
--- /dev/null
+++ b/files/fr/web/javascript/guide/regular_expressions/quantifiers/index.md
@@ -0,0 +1,144 @@
+---
+title: Quantificateurs
+slug: Web/JavaScript/Guide/Regular_Expressions/Quantifiers
+tags:
+  - Guide
+  - JavaScript
+  - Quantificateurs
+  - RegExp
+translation_of: Web/JavaScript/Guide/Regular_Expressions/Quantifiers
+original_slug: Web/JavaScript/Guide/Expressions_régulières/Quantificateurs
+---
+{{jsSidebar("JavaScript Guide")}}{{draft}}
+
+Les quantificateurs indiquent le nombre de caractères ou d'expressions qu'il faut pour une correspondance.
+
+## Types
+
+<table class="standard-table">
+  <thead>
+    <tr>
+      <th scope="col">Caractères</th>
+      <th scope="col">Signification</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td><code>x*</code></td>
+      <td>
+        <p>
+          Correspond à l'expression précédente qui est répétée 0 ou plusieurs
+          fois. Équivalent à <code>{0,}</code>
+        </p>
+        <p>
+          Ainsi, <code>/bo*/</code> correspond à 'boo' dans "Un booléen" et à
+          'b' dans "Un bateau bleu", mais ne correspond à rien dans "Ce matin".
+        </p>
+      </td>
+    </tr>
+    <tr>
+      <td><code>x+</code></td>
+      <td>
+        <p>
+          Correspond à l'expression précédente qui est répétée une ou plusieurs
+          fois. C'est équivalent à <code>{1,}</code>.
+        </p>
+        <p>
+          Ainsi, <code>/a+/</code> correspond au 'a' dans "maison" et à tous les
+          'a' dans "maaaaaaison" mais ne correspond à rien dans "mission".
+        </p>
+      </td>
+    </tr>
+    <tr>
+      <td><code>x?</code></td>
+      <td>
+        <p>
+          Correspond à l'expression précédente qui est présente une fois ou pas
+          du tout. C'est équivalent à <code>{0,1}</code>.<br /><br />Ainsi,
+          <code>/e?le?/</code> correspond au 'el' dans "gel" et au 'le' dans
+          "angle" mais aussi au 'l' dans "Oslo".<br /><br />S'il est utilisé
+          immédiatement après l'un des quantificateurs : *, +, ?, ou {}, il rend
+          le quantificateur moins « gourmand » auquel cas le moins de caractères
+          correspond (le comportement par défaut, « gourmand », permettant de
+          faire correspondre le plus de caractères possible). Par exemple
+          <code>/\d+/</code> utilisée avec "123abc" fait correspondre "123".
+          Utiliser <code>/\d+?/</code> à la même chaîne de caractères fait
+          correspondre "1".<br /><br />Ce symbole est également utilisé dans les
+          tests de présence autour de l'expression, décrits par les lignes
+          <code>x(?=y)</code> et <code>x(?!y)</code> de ce tableau.
+        </p>
+      </td>
+    </tr>
+    <tr>
+      <td><code>x{n}</code></td>
+      <td>
+        <p>
+          Correspond pour exactement n occurences de l'expression précédente. N
+          doit être un entier positif.<br /><br />Ainsi, <code>/a{2}/</code> ne
+          correspond pas au 'a' de "Mozilla" mais correspond à tous les 'a' de
+          "Mozilaa" et aux deux premiers 'a' de "Mozillaaa".
+        </p>
+      </td>
+    </tr>
+    <tr>
+      <td><code>x{n,}</code></td>
+      <td>
+        <p>
+          Correspond lorsqu'il y a au moins <code>n</code> occurences de
+          l'expression précédente. <code>n</code> doit être un entier positif.
+        </p>
+        <p>
+          Par exemple <code>/a{2,}/</code> correspondra à <code>"aa"</code> ou à
+          <code>"aaa"</code> ou encore à <code>"aaaa"</code> mais pas à
+          <code>"a"</code>.
+        </p>
+      </td>
+    </tr>
+    <tr>
+      <td><code>x{n,m}</code></td>
+      <td>
+        <p>
+          Lorsque <code>n</code> et <code>m</code> sont des entiers positifs,
+          cela correspond à au moins <code>n</code> occurences de l'expression
+          précédente et à au plus <code>m</code> occurrences. Lorsque
+          <code>m</code> n'est pas utilisé, la valeur par défaut correspondante
+          sera l'infini.
+        </p>
+        <p>
+          Ainsi, <code>/a{1,3}/</code> ne correspond à rien dans "Mozill", au
+          'a' de "Mozilla", au deux premiers 'a' de "Mozillaa" et au trois
+          premiers 'a' de "Mozillaaaaa". Pour ce dernier exemple, on doit noter
+          que le correspondance ne se fait que sur "aaa" bien qu'il y ait plus
+          de 'a' dans la chaîne de caractères.
+        </p>
+      </td>
+    </tr>
+    <tr>
+      <td>
+        <p>
+          <code>x*?</code><br /><code>x+?</code><br /><code>x??</code
+          ><br /><code>x{n}?</code><br /><code>x{n,}?</code><br /><code
+            >x{n,m}?</code
+          >
+        </p>
+      </td>
+      <td>
+        <p>
+          Correspond à l'expression précédente qui est présente une fois ou pas
+          du tout. C'est équivalent à <code>{0,1}</code>.<br /><br />Ainsi,
+          <code>/e?le?/</code> correspond au 'el' dans "gel" et au 'le' dans
+          "angle" mais aussi au 'l' dans "Oslo".<br /><br />S'il est utilisé
+          immédiatement après l'un des quantificateurs : *, +, ?, ou {}, il rend
+          le quantificateur moins « gourmand » auquel cas le moins de caractères
+          correspond (le comportement par défaut, « gourmand », permettant de
+          faire correspondre le plus de caractères possible). Par exemple
+          <code>/\d+/</code> utilisée avec "123abc" fait correspondre "123".
+          Utiliser <code>/\d+?/</code> à la même chaîne de caractères fait
+          correspondre "1".<br /><br />Ce symbole est également utilisé dans les
+          tests de présence autour de l'expression, décrits par les lignes
+          <code>x(?=y)</code> et <code>x(?!y)</code> de ce tableau.
+        </p>
+      </td>
+    </tr>
+  </tbody>
+</table>
diff --git a/files/fr/web/javascript/guide/regular_expressions/unicode_property_escapes/index.html b/files/fr/web/javascript/guide/regular_expressions/unicode_property_escapes/index.html
deleted file mode 100644
index 04b21810ae..0000000000
--- a/files/fr/web/javascript/guide/regular_expressions/unicode_property_escapes/index.html
+++ /dev/null
@@ -1,431 +0,0 @@
----
-title: Échappement des propriétés Unicode
-slug: Web/JavaScript/Guide/Regular_Expressions/Unicode_Property_Escapes
-tags:
-  - Expressions rationnelles
-  - Expressions régulières
-  - Guide
-  - JavaScript
-  - regex
-translation_of: Web/JavaScript/Guide/Regular_Expressions/Unicode_Property_Escapes
-original_slug: Web/JavaScript/Guide/Expressions_régulières/Échappement_propriétés_Unicode
----
-<p>{{jsSidebar("JavaScript Guide")}}{{draft}}</p>
-
-<p>Les séquences d'échappement pour les propriétés Unicode permettent de distinguer les caractères Unicodes en fonction de leurs propriétés : majuscules, minuscules, symboles mathématiques, ponctuation, etc.</p>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="brush: js">// Valeurs non-binaires
-\p{UnicodePropertyName=<em>ValeurPropriétéUnicode</em>}
-\p{UnicodePropertyName}
-
-// Valeurs binaires et non-binaires
-\p{UnicodePropertyName}
-</pre>
-
-<dl>
- <dt><code>ValeurPropriétéUnicode</code></dt>
- <dd>Une des valeurs listées ci-après. Pour certaines valeurs, le mot-clé <code>NomPropriétéUnicode</code> et le signe égal peuvent être omis.</dd>
-</dl>
-
-<h2 id="Valeurs">Valeurs</h2>
-
-<h3 id="Non-binaires">Non-binaires</h3>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Échappements</th>
-   <th scope="col">Signification</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><code>\p{LC}<br>
-    \p{Cased_Letter}<br>
-    \p{UnicodePropertyName=Cased_Letter}</code></td>
-   <td>N'importe quelle lettre avec la version minuscule et la version majuscule. Équivalent à <code>\p{Lu}|\p{Ll}|p{Lt}</code>.</td>
-  </tr>
-  <tr>
-   <td><code>\p{Close_Punctuation}<br>
-    \p{UnicodePropertyName=Close_Punctuation}</code></td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>\p{Connector_Punctuation}<br>
-    \p{UnicodePropertyName=Connector_Punctuation}</code></td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>\p{Control}<br>
-    \p{UnicodePropertyName=Control}</code></td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>\p{Currency_Symbol}<br>
-    \p{UnicodePropertyName=Currency_Symbol}</code></td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>\p{Dash_Punctuation}<br>
-    \p{UnicodePropertyName=Dash_Punctuation}</code></td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>\p{Decimal_Number}<br>
-    \p{UnicodePropertyName=Decimal_Number}</code></td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>\p{Enclosing_Mark}<br>
-    \p{UnicodePropertyName=Enclosing_Mark}</code></td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>\p{Final_Punctuation}<br>
-    ​​​​​​​\p{UnicodePropertyName=Final_Punctuation}</code></td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>\p{Format}<br>
-    ​​​​​​​\p{UnicodePropertyName=Format}</code></td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>\p{Initial_Punctuation}<br>
-    ​​​​​​​\p{UnicodePropertyName=Initial_Punctuation}</code></td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>\p{Letter}<br>
-    ​​​​​​​\p{UnicodePropertyName=Letter}</code></td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>\p{Letter_Number}<br>
-    ​​​​​​​\p{UnicodePropertyName=Line_Separator}</code></td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>\p{Lowercase_Letter}<br>
-    ​​​​​​​\p{UnicodePropertyName=Lowercase_Letter}</code></td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>\p{Mark}<br>
-    ​​​​​​​\p{UnicodePropertyName=Mark}</code></td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>\p{Math_Symbol;}<br>
-    ​​​​​​​\p{UnicodePropertyName=Math_Symbol}</code></td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>\p{Modifier_Letter}<br>
-    ​​​​​​​\p{UnicodePropertyName=Modifier_Letter}</code></td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>\p{Modifier_Symbol}<br>
-    ​​​​​​​\p{UnicodePropertyName=Modifier_Symbol}</code></td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>\p{Nonspacing_Mark}<br>
-    ​​​​​​​\p{UnicodePropertyName=Nonspacing_Mark}</code></td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>\p{Number}<br>
-    ​​​​​​​\p{UnicodePropertyName=Number}</code></td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>\p{Open_Punctuation}<br>
-    ​​​​​​​\p{UnicodePropertyName=Open_Punctuation}</code></td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>\p{Other}<br>
-    ​​​​​​​\p{UnicodePropertyName=Other_Letter}</code></td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>\p{Other_Letter}<br>
-    ​​​​​​​\p{UnicodePropertyName=Other_Letter}</code></td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>\p{Other_Number}<br>
-    ​​​​​​​\p{UnicodePropertyName=Other_Number}</code></td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>\p{Other_Punctuation}<br>
-    ​​​​​​​\p{UnicodePropertyName=Other_Punctuation}</code></td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>\p{Paragraph_Separator}<br>
-    ​​​​​​​\p{UnicodePropertyName=Paragraph_Separator}</code></td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>\p{Private_Use}</code>Meaning<br>
-    <code>​​​​​​​\p{UnicodePropertyName=Private_Use}</code></td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>\p{Punctuation}<br>
-    ​​​​​​​\p{UnicodePropertyName=Punctuation}</code></td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>\p{Separator}<br>
-    ​​​​​​​\p{UnicodePropertyName=Separator}</code></td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>\p{Space_Separator}<br>
-    ​​​​​​​\p{UnicodePropertyName=Space_Separator}</code></td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>\p{Spaceing_Mark}<br>
-    ​​​​​​​\p{UnicodePropertyName=Spacing_Mark}</code></td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>\p{Surrogate}<br>
-    ​​​​​​​\p{UnicodePropertyName=Surrogate}</code></td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>\p{Symbol}<br>
-    ​​​​​​​\p{UnicodePropertyName=Symbol}</code></td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>\p{Titlecase_Letter}<br>
-    ​​​​​​​\p{UnicodePropertyName=Titlecase_Letter}</code></td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>\p{Unassigned}<br>
-    ​​​​​​​\p{UnicodePropertyName=Unassigned}</code></td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>\p{Uppercase_Letter}<br>
-    ​​​​​​​\p{UnicodePropertyName=UppercaseLetter}</code></td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h3 id="Binaires">Binaires</h3>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Échappement</th>
-   <th scope="col">Signification</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><code>\p{Alphabetic}</code></td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>\p{Bidi_Control}</code></td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>\p{Bidi_Mirrored}</code></td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>\p{Case_Ignorable}</code></td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>\p{Cased}</code></td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>\p{Changes_When_Casefolded}</code></td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>\p{Changes_When_Casemapped}</code></td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>\p{Changes_When_Lowercased}</code></td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>\p{Changes_When_NFKC_Casefolded}</code></td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>\p{Changes_When_Titlecased}</code></td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>\p{Changes_When_Uppercased}</code></td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>\p{Dash}</code></td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>\p{Default_Ignorable_Code_Point}</code></td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>\p{Deprecated}</code></td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>\p{Diacritic}</code></td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>\p{Emoji}</code></td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>\p{Emoji_Component}</code></td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>\p{Emoji_Modifier}</code></td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>\p{Emoji_Modifier_Base}</code></td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>\p{Emoji_Presentation}</code></td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>\p{Extender}</code></td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>\p{Grapheme_Base}</code></td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>\p{Grapheme_Extend}</code></td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>\p{Hex_Digit}</code></td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>\p{ID_Continue}</code></td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>\p{ID_Start}</code></td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>\p{Ideographic}</code></td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>\p{IDS_Binary_Operator}</code></td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>\p{IDS_Trinary_Operator}</code></td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>\p{Join_Control}</code></td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>\p{Logical_Order_Exception}</code></td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>\p{Lowercase}</code></td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>\p{Math}</code></td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>\p{Noncharacter_Code_Point}</code></td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>\p{Pattern_Syntax}</code></td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>\p{Pattern_White_Space}</code></td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>\p{Quotation_Mark}</code></td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>\p{Radical}</code></td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>\p{RegionalIndicator}</code></td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>\p{Sentence_Terminal}</code></td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>\p{Soft_Dotted}</code></td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>\p{Terminal_Punctuation}</code></td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>\p{Unified_Ideograph}</code></td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>\p{Uppercase}</code></td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>\p{Variation_Selector}</code></td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>\p{White_Space}</code></td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>\p{XID_Continue}</code></td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>\p{XID_Start}</code></td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
diff --git a/files/fr/web/javascript/guide/regular_expressions/unicode_property_escapes/index.md b/files/fr/web/javascript/guide/regular_expressions/unicode_property_escapes/index.md
new file mode 100644
index 0000000000..f7b7b5c99c
--- /dev/null
+++ b/files/fr/web/javascript/guide/regular_expressions/unicode_property_escapes/index.md
@@ -0,0 +1,125 @@
+---
+title: Échappement des propriétés Unicode
+slug: Web/JavaScript/Guide/Regular_Expressions/Unicode_Property_Escapes
+tags:
+  - Expressions rationnelles
+  - Expressions régulières
+  - Guide
+  - JavaScript
+  - regex
+translation_of: Web/JavaScript/Guide/Regular_Expressions/Unicode_Property_Escapes
+original_slug: Web/JavaScript/Guide/Expressions_régulières/Échappement_propriétés_Unicode
+---
+{{jsSidebar("JavaScript Guide")}}{{draft}}
+
+Les séquences d'échappement pour les propriétés Unicode permettent de distinguer les caractères Unicodes en fonction de leurs propriétés : majuscules, minuscules, symboles mathématiques, ponctuation, etc.
+
+## Syntaxe
+
+```js
+// Valeurs non-binaires
+\p{UnicodePropertyName=ValeurPropriétéUnicode}
+\p{UnicodePropertyName}
+
+// Valeurs binaires et non-binaires
+\p{UnicodePropertyName}
+```
+
+- `ValeurPropriétéUnicode`
+  - : Une des valeurs listées ci-après. Pour certaines valeurs, le mot-clé `NomPropriétéUnicode` et le signe égal peuvent être omis.
+
+## Valeurs
+
+### Non-binaires
+
+| Échappements                                                                 | Signification                                                                                                    |
+| ---------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------- |
+| `\p{LC} \p{Cased_Letter} \p{UnicodePropertyName=Cased_Letter}`               | N'importe quelle lettre avec la version minuscule et la version majuscule. Équivalent à `\p{Lu}\|\p{Ll}\|p{Lt}`. |
+| `\p{Close_Punctuation} \p{UnicodePropertyName=Close_Punctuation}`            |                                                                                                                  |
+| `\p{Connector_Punctuation} \p{UnicodePropertyName=Connector_Punctuation}`    |                                                                                                                  |
+| `\p{Control} \p{UnicodePropertyName=Control}`                                |                                                                                                                  |
+| `\p{Currency_Symbol} \p{UnicodePropertyName=Currency_Symbol}`                |                                                                                                                  |
+| `\p{Dash_Punctuation} \p{UnicodePropertyName=Dash_Punctuation}`              |                                                                                                                  |
+| `\p{Decimal_Number} \p{UnicodePropertyName=Decimal_Number}`                  |                                                                                                                  |
+| `\p{Enclosing_Mark} \p{UnicodePropertyName=Enclosing_Mark}`                  |                                                                                                                  |
+| `\p{Final_Punctuation} ​​​​​​​\p{UnicodePropertyName=Final_Punctuation}`     |                                                                                                                  |
+| `\p{Format} ​​​​​​​\p{UnicodePropertyName=Format}`                           |                                                                                                                  |
+| `\p{Initial_Punctuation} ​​​​​​​\p{UnicodePropertyName=Initial_Punctuation}` |                                                                                                                  |
+| `\p{Letter} ​​​​​​​\p{UnicodePropertyName=Letter}`                           |                                                                                                                  |
+| `\p{Letter_Number} ​​​​​​​\p{UnicodePropertyName=Line_Separator}`            |                                                                                                                  |
+| `\p{Lowercase_Letter} ​​​​​​​\p{UnicodePropertyName=Lowercase_Letter}`       |                                                                                                                  |
+| `\p{Mark} ​​​​​​​\p{UnicodePropertyName=Mark}`                               |                                                                                                                  |
+| `\p{Math_Symbol;} ​​​​​​​\p{UnicodePropertyName=Math_Symbol}`                |                                                                                                                  |
+| `\p{Modifier_Letter} ​​​​​​​\p{UnicodePropertyName=Modifier_Letter}`         |                                                                                                                  |
+| `\p{Modifier_Symbol} ​​​​​​​\p{UnicodePropertyName=Modifier_Symbol}`         |                                                                                                                  |
+| `\p{Nonspacing_Mark} ​​​​​​​\p{UnicodePropertyName=Nonspacing_Mark}`         |                                                                                                                  |
+| `\p{Number} ​​​​​​​\p{UnicodePropertyName=Number}`                           |                                                                                                                  |
+| `\p{Open_Punctuation} ​​​​​​​\p{UnicodePropertyName=Open_Punctuation}`       |                                                                                                                  |
+| `\p{Other} ​​​​​​​\p{UnicodePropertyName=Other_Letter}`                      |                                                                                                                  |
+| `\p{Other_Letter} ​​​​​​​\p{UnicodePropertyName=Other_Letter}`               |                                                                                                                  |
+| `\p{Other_Number} ​​​​​​​\p{UnicodePropertyName=Other_Number}`               |                                                                                                                  |
+| `\p{Other_Punctuation} ​​​​​​​\p{UnicodePropertyName=Other_Punctuation}`     |                                                                                                                  |
+| `\p{Paragraph_Separator} ​​​​​​​\p{UnicodePropertyName=Paragraph_Separator}` |                                                                                                                  |
+| `\p{Private_Use}`Meaning `​​​​​​​\p{UnicodePropertyName=Private_Use}`        |                                                                                                                  |
+| `\p{Punctuation} ​​​​​​​\p{UnicodePropertyName=Punctuation}`                 |                                                                                                                  |
+| `\p{Separator} ​​​​​​​\p{UnicodePropertyName=Separator}`                     |                                                                                                                  |
+| `\p{Space_Separator} ​​​​​​​\p{UnicodePropertyName=Space_Separator}`         |                                                                                                                  |
+| `\p{Spaceing_Mark} ​​​​​​​\p{UnicodePropertyName=Spacing_Mark}`              |                                                                                                                  |
+| `\p{Surrogate} ​​​​​​​\p{UnicodePropertyName=Surrogate}`                     |                                                                                                                  |
+| `\p{Symbol} ​​​​​​​\p{UnicodePropertyName=Symbol}`                           |                                                                                                                  |
+| `\p{Titlecase_Letter} ​​​​​​​\p{UnicodePropertyName=Titlecase_Letter}`       |                                                                                                                  |
+| `\p{Unassigned} ​​​​​​​\p{UnicodePropertyName=Unassigned}`                   |                                                                                                                  |
+| `\p{Uppercase_Letter} ​​​​​​​\p{UnicodePropertyName=UppercaseLetter}`        |                                                                                                                  |
+
+### Binaires
+
+| Échappement                        | Signification |
+| ---------------------------------- | ------------- |
+| `\p{Alphabetic}`                   |               |
+| `\p{Bidi_Control}`                 |               |
+| `\p{Bidi_Mirrored}`                |               |
+| `\p{Case_Ignorable}`               |               |
+| `\p{Cased}`                        |               |
+| `\p{Changes_When_Casefolded}`      |               |
+| `\p{Changes_When_Casemapped}`      |               |
+| `\p{Changes_When_Lowercased}`      |               |
+| `\p{Changes_When_NFKC_Casefolded}` |               |
+| `\p{Changes_When_Titlecased}`      |               |
+| `\p{Changes_When_Uppercased}`      |               |
+| `\p{Dash}`                         |               |
+| `\p{Default_Ignorable_Code_Point}` |               |
+| `\p{Deprecated}`                   |               |
+| `\p{Diacritic}`                    |               |
+| `\p{Emoji}`                        |               |
+| `\p{Emoji_Component}`              |               |
+| `\p{Emoji_Modifier}`               |               |
+| `\p{Emoji_Modifier_Base}`          |               |
+| `\p{Emoji_Presentation}`           |               |
+| `\p{Extender}`                     |               |
+| `\p{Grapheme_Base}`                |               |
+| `\p{Grapheme_Extend}`              |               |
+| `\p{Hex_Digit}`                    |               |
+| `\p{ID_Continue}`                  |               |
+| `\p{ID_Start}`                     |               |
+| `\p{Ideographic}`                  |               |
+| `\p{IDS_Binary_Operator}`          |               |
+| `\p{IDS_Trinary_Operator}`         |               |
+| `\p{Join_Control}`                 |               |
+| `\p{Logical_Order_Exception}`      |               |
+| `\p{Lowercase}`                    |               |
+| `\p{Math}`                         |               |
+| `\p{Noncharacter_Code_Point}`      |               |
+| `\p{Pattern_Syntax}`               |               |
+| `\p{Pattern_White_Space}`          |               |
+| `\p{Quotation_Mark}`               |               |
+| `\p{Radical}`                      |               |
+| `\p{RegionalIndicator}`            |               |
+| `\p{Sentence_Terminal}`            |               |
+| `\p{Soft_Dotted}`                  |               |
+| `\p{Terminal_Punctuation}`         |               |
+| `\p{Unified_Ideograph}`            |               |
+| `\p{Uppercase}`                    |               |
+| `\p{Variation_Selector}`           |               |
+| `\p{White_Space}`                  |               |
+| `\p{XID_Continue}`                 |               |
+| `\p{XID_Start}`                    |               |
diff --git a/files/fr/web/javascript/guide/text_formatting/index.html b/files/fr/web/javascript/guide/text_formatting/index.html
deleted file mode 100644
index 0049f8f7ac..0000000000
--- a/files/fr/web/javascript/guide/text_formatting/index.html
+++ /dev/null
@@ -1,254 +0,0 @@
----
-title: Formatage de texte
-slug: Web/JavaScript/Guide/Text_formatting
-tags:
-  - Guide
-  - JavaScript
-  - l10n:priority
-translation_of: Web/JavaScript/Guide/Text_formatting
-original_slug: Web/JavaScript/Guide/Formatage_du_texte
----
-<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Numbers_and_dates", "Web/JavaScript/Guide/Regular_Expressions")}}</div>
-
-<p>Ce chapitre présente comment travailler avec les chaînes de caractères et le texte en JavaScript.</p>
-
-<h2 id="Les_chaînes_de_caractères">Les chaînes de caractères</h2>
-
-<p>Le type {{Glossary("String")}} de JavaScript est utilisé pour représenter des données textuelles. C'est un ensemble d'"éléments" de valeurs non signées sur 16 bits (unités de codage UTF-16). Chaque élément dans la chaîne de caractères occupe une position dans la chaîne de caractères. Le premier élément se trouve à l'indice 0, le suivant à l'indice 1 et ainsi de suite. La longueur d'une chaîne de caractères est le nombre d'éléments qu'elle contient. Vous pouvez créer des chaînes de caractères en utilisant des littéraux de chaîne de caractères ou des objets chaîne de caractères.</p>
-
-<h3 id="Les_littéraux_de_chaînes_de_caractères">Les littéraux de chaînes de caractères</h3>
-
-<p>Vous pouvez créer des chaînes de caractères simple en utilisant des apostrophes simples ou doubles :</p>
-
-<pre class="brush: js">'machin'
-"truc"</pre>
-
-<p>Des chaînes plus avancées peuvent être créées en utilisant des séquences d'échappement.</p>
-
-<h4 id="Les_séquences_déchappement_hexadécimales">Les séquences d'échappement hexadécimales</h4>
-
-<p>Le nombre situé après \x est interprété comme un nombre <a href="https://fr.wikipedia.org/wiki/Syst%C3%A8me_hexad%C3%A9cimal">hexadécimal</a> :</p>
-
-<pre class="brush: js">'\xA9' // "©"</pre>
-
-<h4 id="Les_séquences_déchappement_Unicode">Les séquences d'échappement Unicode</h4>
-
-<p>Les séquences d'échappement Unicode requièrent au moins quatres caractères hexadécimaux après \u.</p>
-
-<pre class="brush: js">'\u00A9' // "©"</pre>
-
-<h4 id="Léchappement_dunités_de_codage_Unicode">L'échappement d'unités de codage Unicode</h4>
-
-<p>Nouveau dans ECMAScript 2015. Avec les échappements d'unités de codage Unicode, tout caractère peut être échappé en utilisant des nombres hexadécimaux, de sorte qu'il est possible de d'utiliser des unités de codage Unicode jusqu'à <code>0x10FFFF</code>. Avec les échappements Unicode simples, il est souvent nécessaire d'écrire les moitiés de remplacement séparément pour obtenir le même résultat.</p>
-
-<p>Voir aussi {{jsxref("String.fromCodePoint()")}} ou {{jsxref("String.prototype.codePointAt()")}}.</p>
-
-<pre class="brush: js">'\u{2F804}'
-
-// Le même avec des échappements Unicode simples
-'\uD87E\uDC04'
-</pre>
-
-<h3 id="Les_objets_String">Les objets String</h3>
-
-<p>L'objet {{jsxref("String")}} est un conteneur autour du type de donnée primitif chaîne de caractères.</p>
-
-<pre><code>var s = new String('foo'); // crée un objet String
-console.log(s); // affiche : {'0': 'f', '1': 'o', '2': 'o'}
-typeof s; // retourne 'object'</code></pre>
-
-<p>Vous pouvez appeler chacune des méthodes de l'objet <code>String</code> avec une valeur littérale de chaîne de caractères : JavaScript convertira automatiquement le littéral en un objet <code>String</code> temporaire, appellera la méthode, puis supprimera l'objet <code>String</code> temporaire. Vous pouvez aussi utiliser la propriété <code>String.length</code> sur un littéral de chaîne de caractères.</p>
-
-<p>Vous devriez utiliser des littéraux de chaîne de caractères, à moins que vous n'ayez spécifiquement besoin d'un objet <code>String</code>, parce que les objets <code>String</code> peuvent avoir un comportement contre-intuitif :</p>
-
-<pre class="brush: js">var s1 = '2 + 2'; // crée une valeur de chaîne de caractères
-var s2 = new String('2 + 2'); // crée un objet String
-eval(s1); // renvoie le nombre 4
-eval(s2); // renvoie la chaîne "2 + 2"</pre>
-
-<p>Un objet <code>String</code> possède une propriété, <code>length</code>, qui indique le nombre d'unités de codage UTF-16 dans la chaîne de caractères. Par exemple, le code suivant affecte à <code>x</code> la valeur 16, parce que la chaîne "Bonjour, Monde !" contient 16 caractères, chacun représenté par une unité de codage UTF-16. Vous pouvez accéder à chaque unité de codage en utilisant une syntaxe de tableau entre crochets. Vous ne pouvez pas changer les caractères, du fait que les chaînes sont des objets immuables (semblables à des tableaux) :</p>
-
-<pre class="brush: js">var machaine = 'Bonjour, Monde !';
-var x = machaine.length;
-machaine[0] = 'L'; // cela n'a aucun effet car les chaînes sont immuables
-machaine[0]; // cela renvoie "B"
-</pre>
-
-<p>Les caractères dont les valeurs scalaires sont supérieures à U+FFFF (comme certains rares caractères chinois/japonais/coréens/vietnamiens et certains emojis) sont stockés en UTF-16 via deux unités de codage de remplacement. Par exemple, une chaîne de caractères contenant le seul caractère U+1F600 ("Emoji grinning face") aura une longueur de 2. Le fait d'accéder aux unités de codage individuelles dans une telle chaîne de caractères en utilisant des crochets peut avoir des conséquences indésirables telles que la génération d'unité de codage de remplacement non conformes, en violation du standard Unicode. (Des exemples devraient être ajoutés à cette page après que le bug MDN 857438 sera corrigé. Voir aussi {{jsxref("String.fromCodePoint()")}} ou {{jsxref("String.prototype.codePointAt()")}}.</p>
-
-<p>Un objet String a une grande variété de méthodes : par exemple, celles qui retournent une variation de la chaîne de caractères elle-même, telles que <code>substring</code> et <code>toUpperCase</code>.</p>
-
-<p>Le tableau suivant résume les méthodes des objets {{jsxref("String")}}.</p>
-
-<h4 id="Méthodes_de_String">Méthodes de <code>String</code></h4>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Méthode</th>
-   <th scope="col">Description</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{jsxref("String.charAt", "charAt")}}, {{jsxref("String.charCodeAt", "charCodeAt")}}, {{jsxref("String.codePointAt", "codePointAt")}}</td>
-   <td>Retourne le caractère ou le code de caractère à la position spécifiée de la chaîne de caractères.</td>
-  </tr>
-  <tr>
-   <td>{{jsxref("String.indexOf", "indexOf")}}, {{jsxref("String.lastIndexOf", "lastIndexOf")}}</td>
-   <td>Retourne la position de la sous-chaîne spécifiée dans la chaîne de caractères, ou la dernière position de la sous-chaîne spécifiée, respectivement.</td>
-  </tr>
-  <tr>
-   <td>{{jsxref("String.startsWith", "startsWith")}}, {{jsxref("String.endsWith", "endsWith")}}, {{jsxref("String.includes", "includes")}}</td>
-   <td>Retourne le fait de savoir si la chaîne de caractères courante commence ou non par, finit ou non par, ou contient ou non, la chaîne spécifiée.</td>
-  </tr>
-  <tr>
-   <td>{{jsxref("String.concat", "concat")}}</td>
-   <td>Combine le texte de deux chaînes de caractères et retourne une nouvelle chaîne de caractères.</td>
-  </tr>
-  <tr>
-   <td>{{jsxref("String.fromCharCode", "fromCharCode")}}, {{jsxref("String.fromCodePoint", "fromCodePoint")}},</td>
-   <td>Construit une chaîne de caractères à partir de la séquence de valeurs Unicode fournie. Cette méthode est une méthode de la classe String et non une instance de String.</td>
-  </tr>
-  <tr>
-   <td>{{jsxref("String.split", "split")}}</td>
-   <td>Découpe un objet <code>String</code> en un tableau de chaînes de caractères en découpant la chaîne de caractères en sous-chaînes.</td>
-  </tr>
-  <tr>
-   <td>{{jsxref("String.slice", "slice")}}</td>
-   <td>Extrait une partie de la chaîne de caractères et retourne une nouvelle chaîne de caractères.</td>
-  </tr>
-  <tr>
-   <td>{{jsxref("String.substring", "substring")}}, {{jsxref("String.substr", "substr")}}</td>
-   <td>Retourne le sous-ensemble spécifié de la chaîne de caractères, en spécifiant soit des indices de début et de fin, soit l'indice de début et une longueur.</td>
-  </tr>
-  <tr>
-   <td>{{jsxref("String.match", "match")}}, {{jsxref("String.matchAll", "matchAll")}}, {{jsxref("String.replace", "replace")}}, {{jsxref("String.search", "search")}}</td>
-   <td>Ces fonctions utilisent des expressions rationnelles.</td>
-  </tr>
-  <tr>
-   <td>{{jsxref("String.toLowerCase", "toLowerCase")}}, {{jsxref("String.toUpperCase", "toUpperCase")}}</td>
-   <td>
-    <p>Retourne la chaîne tout en minuscules ou tout en majuscules, respectivement.</p>
-   </td>
-  </tr>
-  <tr>
-   <td>{{jsxref("String.normalize", "normalize")}}</td>
-   <td>Retourne la Forme Normalisée Unicode de la chaîne de caractères appelante.</td>
-  </tr>
-  <tr>
-   <td>{{jsxref("String.repeat", "repeat")}}</td>
-   <td>Retourne une chaîne constituée des éléments de l'objet répétés le nombre de fois donné.</td>
-  </tr>
-  <tr>
-   <td>{{jsxref("String.trim", "trim")}}</td>
-   <td>Retire les blancs en début et en fin de chaîne.</td>
-  </tr>
- </tbody>
-</table>
-
-<h3 id="Les_littéraux_de_modèle_multi-lignes">Les littéraux de modèle multi-lignes</h3>
-
-<p>Le <a href="/fr/docs/Web/JavaScript/Reference/Litt%C3%A9raux_gabarits">littéraux de modèle</a> sont des littéraux de chaîne de caractères permettant des expressions intégrées. Avec eux, vous pouvez utiliser des chaînes de caractères multi-lignes et des fonctionnalités d'interpolation de chaînes.</p>
-
-<p>Les littéraux de gabarits sont délimités par des <a href="https://fr.wikipedia.org/wiki/Accent_grave">accents graves</a> (ou <em>backticks` `</em> en anglais), au lieu des apostrophes simples ou doubles. Les littéraux de modèle peuvent contenir des marque-places. Ceux-ci sont indiqués par le signe dollar et des accolades (<code>${expression}</code>).</p>
-
-<h4 id="Multi-lignes">Multi-lignes</h4>
-
-<p>Tout caractère de passage à la ligne inséré dans le source fait partie du littéral de modèle. En utilisant les chaînes de caractères normales, vous auriez eu à utiliser la syntaxe suivante afin d'avoir des chaînes de caractères multi-lignes :</p>
-
-<pre class="brush: js">console.log('chaîne ligne de texte 1\n\
-chaîne ligne de texte 2');
-// "chaîne ligne de texte 1
-// chaîne ligne de texte 2"</pre>
-
-<p>Pour obtenir le même effet avec des chaînes de caractères multi-lignes, vous pouvez maintenant écrire :</p>
-
-<pre class="brush: js">console.log(`chaîne ligne de texte 1
-chaîne ligne de texte 2`);
-// "chaîne ligne de texte 1
-// chaîne ligne de texte 2"</pre>
-
-<h4 id="Expressions_intégrées">Expressions intégrées</h4>
-
-<p>Pour intégrer des expressions dans des chaînes normales, vous devriez utiliser la syntaxe suivante :</p>
-
-<pre class="brush: js">var a = 5;
-var b = 10;
-console.log('Quinze vaut ' + (a + b) + ' et\npas ' + (2 * a + b) + '.');
-// "Quinze vaut 15 et
-// pas 20."</pre>
-
-<p>Maintenant, avec les modèles, vous pouvez utiliser du sucre syntaxique rendant plus lisibles les substitutions comme celle-ci :</p>
-
-<pre class="brush: js">var a = 5;
-var b = 10;
-console.log(`Quinze vaut ${a + b} et\npas ${2 * a + b}.`);
-// "Quinze vaut 15 et
-// pas 20."</pre>
-
-<p>Pour plus d'informations, voir les <a href="/fr/docs/Web/JavaScript/Reference/Littéraux_gabarits">Littéraux de modèles</a> dans la <a href="/fr/docs/Web/JavaScript/Reference">Référence JavaScript</a>.</p>
-
-<h2 id="Internationalisation">Internationalisation</h2>
-
-<p>L'objet {{jsxref("Intl")}} est l'espace de noms pour l'API d'Internationalisation de l'ECMAScript, qui fournit des fonctionnalités de comparaison de chaînes de caractères, de formatage de nombres, et de formatage des dates et heures prenant en compte la langue. Les constructeurs pour les objets {{jsxref("Collator")}}, {{jsxref("NumberFormat")}} et {{jsxref("DateTimeFormat")}} sont des propriétés de l'objet <code>Intl</code>.</p>
-
-<h3 id="Formatage_date_et_heure">Formatage date et heure</h3>
-
-<p>L'objet {{jsxref("DateTimeFormat")}} est utile pour formater la date et l'heure. Ce qui suit formate une date en anglais telle qu'utilisée aux États-Unis (le résultat sera différent dans une autre zone horaire).</p>
-
-<pre class="brush: js">var msParJour = 24 * 60 * 60 * 1000;
-
-// 17 juillet 2014 00:00:00 UTC.
-var _17juillet2014 = new Date(msParJour * (44 * 365 + 11 + 197));
-
-var options = { year: "2-digit", month: "2-digit", day: "2-digit",
-                hour: "2-digit", minute: "2-digit", timeZoneName: "short" };
-var dateHeureAmericaine = new Intl.DateTimeFormat("en-US", options).format;
-
-console.log(dateHeureAmericaine(_17juillet2014)); // 07/16/14, 5:00 PM PDT
-</pre>
-
-<h3 id="Formatage_des_nombres">Formatage des nombres</h3>
-
-<p>L'objet {{jsxref("NumberFormat")}} est utile pour formater les nombres, par exemple, les devises :</p>
-
-<pre class="brush: js">var prixDeLEssence = new Intl.NumberFormat("en-US",
-                        { style: "currency", currency: "USD",
-                          minimumFractionDigits: 3 });
-
-console.log(prixDeLEssence.format(5.259)); // $5.259
-
-var decimalesHanRMBEnChine = new Intl.NumberFormat("zh-CN-u-nu-hanidec",
-                        { style: "currency", currency: "CNY" });
-
-console.log(decimalesHanRMBEnChine.format(1314.25)); // ￥ 一,三一四.二五
-</pre>
-
-<h3 id="Ordonnancement">Ordonnancement</h3>
-
-<p>L'objet {{jsxref("Collator")}} est utile pour comparer et trier des chaînes de caractères.</p>
-
-<p>Par exemple, il y a en fait deux ordres de tri en allemand, <em>annuaire</em> et <em>dictionnaire</em>. Annuaire met l'accent sur le son, et c'est comme si "ä", "ö", etc. étaient étendus en "ae", "oe", etc. avant le tri :</p>
-
-<pre class="brush: js">var noms = ['Hochberg', 'Hönigswald', 'Holzman'];
-
-var annuaireAllemand = new Intl.Collator('de-DE-u-co-phonebk');
-
-// Comme si tri de ['Hochberg', 'Hoenigswald', 'Holzman']:
-console.log(noms.sort(annuaireAllemand.compare).join(', '));
-// Affiche "Hochberg, Hönigswald, Holzman"
-</pre>
-
-<p>Certains mots allemands se conjuguent avec des umlauts supplémentaires, de sorte que dans les dictionnaires, le fait d'ignorer les umlauts pour le tri  est perceptible (sauf lors du tri de mots ne différant <em>que</em> par des umlauts, comme <em>schon</em> avant <em>schön</em>).</p>
-
-<pre class="brush: js">var dictionnaireAllemand = new Intl.Collator('de-DE-u-co-dict');
-
-// Comme si tri de ["Hochberg", "Honigswald", "Holzman"]:
-console.log(nom.sort(dictionnaireAllemand.compare).join(', '));
-// Affiche "Hochberg, Holzman, Hönigswald"
-</pre>
-
-<p>Pour plus d'informations sur l'API {{jsxref("Intl")}}, voir aussi <a href="https://hacks.mozilla.org/2014/12/introducing-the-javascript-internationalization-api/">Introducing the JavaScript Internationalization API</a>.</p>
-
-<p>{{PreviousNext("Web/JavaScript/Guide/Numbers_and_dates", "Web/JavaScript/Guide/Regular_Expressions")}}</p>
diff --git a/files/fr/web/javascript/guide/text_formatting/index.md b/files/fr/web/javascript/guide/text_formatting/index.md
new file mode 100644
index 0000000000..b67205a859
--- /dev/null
+++ b/files/fr/web/javascript/guide/text_formatting/index.md
@@ -0,0 +1,336 @@
+---
+title: Formatage de texte
+slug: Web/JavaScript/Guide/Text_formatting
+tags:
+  - Guide
+  - JavaScript
+  - l10n:priority
+translation_of: Web/JavaScript/Guide/Text_formatting
+original_slug: Web/JavaScript/Guide/Formatage_du_texte
+---
+{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Numbers_and_dates", "Web/JavaScript/Guide/Regular_Expressions")}}
+
+Ce chapitre présente comment travailler avec les chaînes de caractères et le texte en JavaScript.
+
+## Les chaînes de caractères
+
+Le type {{Glossary("String")}} de JavaScript est utilisé pour représenter des données textuelles. C'est un ensemble d'"éléments" de valeurs non signées sur 16 bits (unités de codage UTF-16). Chaque élément dans la chaîne de caractères occupe une position dans la chaîne de caractères. Le premier élément se trouve à l'indice 0, le suivant à l'indice 1 et ainsi de suite. La longueur d'une chaîne de caractères est le nombre d'éléments qu'elle contient. Vous pouvez créer des chaînes de caractères en utilisant des littéraux de chaîne de caractères ou des objets chaîne de caractères.
+
+### Les littéraux de chaînes de caractères
+
+Vous pouvez créer des chaînes de caractères simple en utilisant des apostrophes simples ou doubles :
+
+```js
+'machin'
+"truc"
+```
+
+Des chaînes plus avancées peuvent être créées en utilisant des séquences d'échappement.
+
+#### Les séquences d'échappement hexadécimales
+
+Le nombre situé après \x est interprété comme un nombre [hexadécimal](https://fr.wikipedia.org/wiki/Syst%C3%A8me_hexad%C3%A9cimal) :
+
+```js
+'\xA9' // "©"
+```
+
+#### Les séquences d'échappement Unicode
+
+Les séquences d'échappement Unicode requièrent au moins quatres caractères hexadécimaux après \u.
+
+```js
+'\u00A9' // "©"
+```
+
+#### L'échappement d'unités de codage Unicode
+
+Nouveau dans ECMAScript 2015. Avec les échappements d'unités de codage Unicode, tout caractère peut être échappé en utilisant des nombres hexadécimaux, de sorte qu'il est possible de d'utiliser des unités de codage Unicode jusqu'à `0x10FFFF`. Avec les échappements Unicode simples, il est souvent nécessaire d'écrire les moitiés de remplacement séparément pour obtenir le même résultat.
+
+Voir aussi {{jsxref("String.fromCodePoint()")}} ou {{jsxref("String.prototype.codePointAt()")}}.
+
+```js
+'\u{2F804}'
+
+// Le même avec des échappements Unicode simples
+'\uD87E\uDC04'
+```
+
+### Les objets String
+
+L'objet {{jsxref("String")}} est un conteneur autour du type de donnée primitif chaîne de caractères.
+
+    var s = new String('foo'); // crée un objet String
+    console.log(s); // affiche : {'0': 'f', '1': 'o', '2': 'o'}
+    typeof s; // retourne 'object'
+
+Vous pouvez appeler chacune des méthodes de l'objet `String` avec une valeur littérale de chaîne de caractères : JavaScript convertira automatiquement le littéral en un objet `String` temporaire, appellera la méthode, puis supprimera l'objet `String` temporaire. Vous pouvez aussi utiliser la propriété `String.length` sur un littéral de chaîne de caractères.
+
+Vous devriez utiliser des littéraux de chaîne de caractères, à moins que vous n'ayez spécifiquement besoin d'un objet `String`, parce que les objets `String` peuvent avoir un comportement contre-intuitif :
+
+```js
+var s1 = '2 + 2'; // crée une valeur de chaîne de caractères
+var s2 = new String('2 + 2'); // crée un objet String
+eval(s1); // renvoie le nombre 4
+eval(s2); // renvoie la chaîne "2 + 2"
+```
+
+Un objet `String` possède une propriété, `length`, qui indique le nombre d'unités de codage UTF-16 dans la chaîne de caractères. Par exemple, le code suivant affecte à `x` la valeur 16, parce que la chaîne "Bonjour, Monde !" contient 16 caractères, chacun représenté par une unité de codage UTF-16. Vous pouvez accéder à chaque unité de codage en utilisant une syntaxe de tableau entre crochets. Vous ne pouvez pas changer les caractères, du fait que les chaînes sont des objets immuables (semblables à des tableaux) :
+
+```js
+var machaine = 'Bonjour, Monde !';
+var x = machaine.length;
+machaine[0] = 'L'; // cela n'a aucun effet car les chaînes sont immuables
+machaine[0]; // cela renvoie "B"
+```
+
+Les caractères dont les valeurs scalaires sont supérieures à U+FFFF (comme certains rares caractères chinois/japonais/coréens/vietnamiens et certains emojis) sont stockés en UTF-16 via deux unités de codage de remplacement. Par exemple, une chaîne de caractères contenant le seul caractère U+1F600 ("Emoji grinning face") aura une longueur de 2. Le fait d'accéder aux unités de codage individuelles dans une telle chaîne de caractères en utilisant des crochets peut avoir des conséquences indésirables telles que la génération d'unité de codage de remplacement non conformes, en violation du standard Unicode. (Des exemples devraient être ajoutés à cette page après que le bug MDN 857438 sera corrigé. Voir aussi {{jsxref("String.fromCodePoint()")}} ou {{jsxref("String.prototype.codePointAt()")}}.
+
+Un objet String a une grande variété de méthodes : par exemple, celles qui retournent une variation de la chaîne de caractères elle-même, telles que `substring` et `toUpperCase`.
+
+Le tableau suivant résume les méthodes des objets {{jsxref("String")}}.
+
+#### Méthodes de `String`
+
+<table class="standard-table">
+  <thead>
+    <tr>
+      <th scope="col">Méthode</th>
+      <th scope="col">Description</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>
+        {{jsxref("String.charAt", "charAt")}},
+        {{jsxref("String.charCodeAt", "charCodeAt")}},
+        {{jsxref("String.codePointAt", "codePointAt")}}
+      </td>
+      <td>
+        Retourne le caractère ou le code de caractère à la position spécifiée de
+        la chaîne de caractères.
+      </td>
+    </tr>
+    <tr>
+      <td>
+        {{jsxref("String.indexOf", "indexOf")}},
+        {{jsxref("String.lastIndexOf", "lastIndexOf")}}
+      </td>
+      <td>
+        Retourne la position de la sous-chaîne spécifiée dans la chaîne de
+        caractères, ou la dernière position de la sous-chaîne spécifiée,
+        respectivement.
+      </td>
+    </tr>
+    <tr>
+      <td>
+        {{jsxref("String.startsWith", "startsWith")}},
+        {{jsxref("String.endsWith", "endsWith")}},
+        {{jsxref("String.includes", "includes")}}
+      </td>
+      <td>
+        Retourne le fait de savoir si la chaîne de caractères courante commence
+        ou non par, finit ou non par, ou contient ou non, la chaîne spécifiée.
+      </td>
+    </tr>
+    <tr>
+      <td>{{jsxref("String.concat", "concat")}}</td>
+      <td>
+        Combine le texte de deux chaînes de caractères et retourne une nouvelle
+        chaîne de caractères.
+      </td>
+    </tr>
+    <tr>
+      <td>
+        {{jsxref("String.fromCharCode", "fromCharCode")}},
+        {{jsxref("String.fromCodePoint", "fromCodePoint")}},
+      </td>
+      <td>
+        Construit une chaîne de caractères à partir de la séquence de valeurs
+        Unicode fournie. Cette méthode est une méthode de la classe String et
+        non une instance de String.
+      </td>
+    </tr>
+    <tr>
+      <td>{{jsxref("String.split", "split")}}</td>
+      <td>
+        Découpe un objet <code>String</code> en un tableau de chaînes de
+        caractères en découpant la chaîne de caractères en sous-chaînes.
+      </td>
+    </tr>
+    <tr>
+      <td>{{jsxref("String.slice", "slice")}}</td>
+      <td>
+        Extrait une partie de la chaîne de caractères et retourne une nouvelle
+        chaîne de caractères.
+      </td>
+    </tr>
+    <tr>
+      <td>
+        {{jsxref("String.substring", "substring")}},
+        {{jsxref("String.substr", "substr")}}
+      </td>
+      <td>
+        Retourne le sous-ensemble spécifié de la chaîne de caractères, en
+        spécifiant soit des indices de début et de fin, soit l'indice de début
+        et une longueur.
+      </td>
+    </tr>
+    <tr>
+      <td>
+        {{jsxref("String.match", "match")}}, {{jsxref("String.matchAll", "matchAll")}},
+        {{jsxref("String.replace", "replace")}},
+        {{jsxref("String.search", "search")}}
+      </td>
+      <td>Ces fonctions utilisent des expressions rationnelles.</td>
+    </tr>
+    <tr>
+      <td>
+        {{jsxref("String.toLowerCase", "toLowerCase")}},
+        {{jsxref("String.toUpperCase", "toUpperCase")}}
+      </td>
+      <td>
+        <p>
+          Retourne la chaîne tout en minuscules ou tout en majuscules,
+          respectivement.
+        </p>
+      </td>
+    </tr>
+    <tr>
+      <td>{{jsxref("String.normalize", "normalize")}}</td>
+      <td>
+        Retourne la Forme Normalisée Unicode de la chaîne de caractères
+        appelante.
+      </td>
+    </tr>
+    <tr>
+      <td>{{jsxref("String.repeat", "repeat")}}</td>
+      <td>
+        Retourne une chaîne constituée des éléments de l'objet répétés le nombre
+        de fois donné.
+      </td>
+    </tr>
+    <tr>
+      <td>{{jsxref("String.trim", "trim")}}</td>
+      <td>Retire les blancs en début et en fin de chaîne.</td>
+    </tr>
+  </tbody>
+</table>
+
+### Les littéraux de modèle multi-lignes
+
+Le [littéraux de modèle](/fr/docs/Web/JavaScript/Reference/Litt%C3%A9raux_gabarits) sont des littéraux de chaîne de caractères permettant des expressions intégrées. Avec eux, vous pouvez utiliser des chaînes de caractères multi-lignes et des fonctionnalités d'interpolation de chaînes.
+
+Les littéraux de gabarits sont délimités par des [accents graves](https://fr.wikipedia.org/wiki/Accent_grave) (ou _backticks\` \`_ en anglais), au lieu des apostrophes simples ou doubles. Les littéraux de modèle peuvent contenir des marque-places. Ceux-ci sont indiqués par le signe dollar et des accolades (`${expression}`).
+
+#### Multi-lignes
+
+Tout caractère de passage à la ligne inséré dans le source fait partie du littéral de modèle. En utilisant les chaînes de caractères normales, vous auriez eu à utiliser la syntaxe suivante afin d'avoir des chaînes de caractères multi-lignes :
+
+```js
+console.log('chaîne ligne de texte 1\n\
+chaîne ligne de texte 2');
+// "chaîne ligne de texte 1
+// chaîne ligne de texte 2"
+```
+
+Pour obtenir le même effet avec des chaînes de caractères multi-lignes, vous pouvez maintenant écrire :
+
+```js
+console.log(`chaîne ligne de texte 1
+chaîne ligne de texte 2`);
+// "chaîne ligne de texte 1
+// chaîne ligne de texte 2"
+```
+
+#### Expressions intégrées
+
+Pour intégrer des expressions dans des chaînes normales, vous devriez utiliser la syntaxe suivante :
+
+```js
+var a = 5;
+var b = 10;
+console.log('Quinze vaut ' + (a + b) + ' et\npas ' + (2 * a + b) + '.');
+// "Quinze vaut 15 et
+// pas 20."
+```
+
+Maintenant, avec les modèles, vous pouvez utiliser du sucre syntaxique rendant plus lisibles les substitutions comme celle-ci :
+
+```js
+var a = 5;
+var b = 10;
+console.log(`Quinze vaut ${a + b} et\npas ${2 * a + b}.`);
+// "Quinze vaut 15 et
+// pas 20."
+```
+
+Pour plus d'informations, voir les [Littéraux de modèles](/fr/docs/Web/JavaScript/Reference/Littéraux_gabarits) dans la [Référence JavaScript](/fr/docs/Web/JavaScript/Reference).
+
+## Internationalisation
+
+L'objet {{jsxref("Intl")}} est l'espace de noms pour l'API d'Internationalisation de l'ECMAScript, qui fournit des fonctionnalités de comparaison de chaînes de caractères, de formatage de nombres, et de formatage des dates et heures prenant en compte la langue. Les constructeurs pour les objets {{jsxref("Collator")}}, {{jsxref("NumberFormat")}} et {{jsxref("DateTimeFormat")}} sont des propriétés de l'objet `Intl`.
+
+### Formatage date et heure
+
+L'objet {{jsxref("DateTimeFormat")}} est utile pour formater la date et l'heure. Ce qui suit formate une date en anglais telle qu'utilisée aux États-Unis (le résultat sera différent dans une autre zone horaire).
+
+```js
+var msParJour = 24 * 60 * 60 * 1000;
+
+// 17 juillet 2014 00:00:00 UTC.
+var _17juillet2014 = new Date(msParJour * (44 * 365 + 11 + 197));
+
+var options = { year: "2-digit", month: "2-digit", day: "2-digit",
+                hour: "2-digit", minute: "2-digit", timeZoneName: "short" };
+var dateHeureAmericaine = new Intl.DateTimeFormat("en-US", options).format;
+
+console.log(dateHeureAmericaine(_17juillet2014)); // 07/16/14, 5:00 PM PDT
+```
+
+### Formatage des nombres
+
+L'objet {{jsxref("NumberFormat")}} est utile pour formater les nombres, par exemple, les devises :
+
+```js
+var prixDeLEssence = new Intl.NumberFormat("en-US",
+                        { style: "currency", currency: "USD",
+                          minimumFractionDigits: 3 });
+
+console.log(prixDeLEssence.format(5.259)); // $5.259
+
+var decimalesHanRMBEnChine = new Intl.NumberFormat("zh-CN-u-nu-hanidec",
+                        { style: "currency", currency: "CNY" });
+
+console.log(decimalesHanRMBEnChine.format(1314.25)); // ￥ 一,三一四.二五
+```
+
+### Ordonnancement
+
+L'objet {{jsxref("Collator")}} est utile pour comparer et trier des chaînes de caractères.
+
+Par exemple, il y a en fait deux ordres de tri en allemand, _annuaire_ et _dictionnaire_. Annuaire met l'accent sur le son, et c'est comme si "ä", "ö", etc. étaient étendus en "ae", "oe", etc. avant le tri :
+
+```js
+var noms = ['Hochberg', 'Hönigswald', 'Holzman'];
+
+var annuaireAllemand = new Intl.Collator('de-DE-u-co-phonebk');
+
+// Comme si tri de ['Hochberg', 'Hoenigswald', 'Holzman']:
+console.log(noms.sort(annuaireAllemand.compare).join(', '));
+// Affiche "Hochberg, Hönigswald, Holzman"
+```
+
+Certains mots allemands se conjuguent avec des umlauts supplémentaires, de sorte que dans les dictionnaires, le fait d'ignorer les umlauts pour le tri  est perceptible (sauf lors du tri de mots ne différant _que_ par des umlauts, comme *schon* avant _schön_).
+
+```js
+var dictionnaireAllemand = new Intl.Collator('de-DE-u-co-dict');
+
+// Comme si tri de ["Hochberg", "Honigswald", "Holzman"]:
+console.log(nom.sort(dictionnaireAllemand.compare).join(', '));
+// Affiche "Hochberg, Holzman, Hönigswald"
+```
+
+Pour plus d'informations sur l'API {{jsxref("Intl")}}, voir aussi [Introducing the JavaScript Internationalization API](https://hacks.mozilla.org/2014/12/introducing-the-javascript-internationalization-api/).
+
+{{PreviousNext("Web/JavaScript/Guide/Numbers_and_dates", "Web/JavaScript/Guide/Regular_Expressions")}}
diff --git a/files/fr/web/javascript/guide/using_promises/index.html b/files/fr/web/javascript/guide/using_promises/index.html
deleted file mode 100644
index 5f30035f51..0000000000
--- a/files/fr/web/javascript/guide/using_promises/index.html
+++ /dev/null
@@ -1,315 +0,0 @@
----
-title: Utiliser les promesses
-slug: Web/JavaScript/Guide/Using_promises
-tags:
-  - Guide
-  - Intermédiaire
-  - JavaScript
-  - Promesses
-  - Promise
-translation_of: Web/JavaScript/Guide/Using_promises
-original_slug: Web/JavaScript/Guide/Utiliser_les_promesses
----
-<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Le_modèle_objet_JavaScript_en_détails", "Web/JavaScript/Guide/iterateurs_et_generateurs")}}</div>
-
-<p>Une promesse est un objet ({{jsxref("Promise")}}) qui représente la complétion ou l'échec d'une opération asynchrone. La plupart du temps, on « consomme » des promesses et c'est donc ce que nous verrons dans la première partie de ce guide pour ensuite expliquer comment les créer.</p>
-
-<p>En résumé, une promesse est un objet qui est renvoyé et auquel on attache des <em>callbacks</em> plutôt que de passer des <em>callbacks</em> à une fonction. Ainsi, au lieu d'avoir une fonction qui prend deux <em>callbacks</em> en arguments :</p>
-
-<pre class="brush: js">function faireQqcALAncienne(successCallback, failureCallback){
-  console.log("C'est fait");
-  // réussir une fois sur deux
-  if (Math.random() &gt; .5) {
-    successCallback("Réussite");
-  } else {
-    failureCallback("Échec");
-  }
-}
-
-function successCallback(résultat) {
-  console.log("L'opération a réussi avec le message : " + résultat);
-}
-
-
-function failureCallback(erreur) {
-  console.error("L'opération a échoué avec le message : " + erreur);
-}
-
-faireQqcALAncienne(successCallback, failureCallback);
-
-</pre>
-
-<p>On aura une fonction qui renvoie une promesse et on attachera les callbacks sur cette promesse :</p>
-
-<pre class="brush: js">function faireQqc() {
-  return new Promise((successCallback, failureCallback) =&gt; {
-    console.log("C'est fait");
-    // réussir une fois sur deux
-    if (Math.random() &gt; .5) {
-      successCallback("Réussite");
-    } else {
-      failureCallback("Échec");
-    }
-  })
-}
-
-const promise = faireQqc();
-promise.then(successCallback, failureCallback);
-</pre>
-
-<p>ou encore :</p>
-
-<pre class="brush: js">faireQqc().then(successCallback, failureCallback);
-</pre>
-
-<p>Cette dernière forme est ce qu'on appelle <em>un appel de fonction asynchrone</em>. Cette convention possède différents avantages dont le premier est <em>le chaînage</em>.</p>
-
-<h2 id="Garanties">Garanties</h2>
-
-<p>À la différence des imbrications de <em>callbacks</em>, une promesse apporte certaines garanties :</p>
-
-<ul>
- <li>Les <em>callbacks</em> ne seront jamais appelés avant la fin du parcours de la boucle d'évènements JavaScript courante</li>
- <li>Les <em>callbacks</em> ajoutés grâce à <code>then</code> seront appelés, y compris après le succès ou l'échec de l'opération asynchrone</li>
- <li>Plusieurs <em>callbacks</em> peuvent être ajoutés en appelant <code>then</code> plusieurs fois, ils seront alors exécutés l'un après l'autre selon l'ordre dans lequel ils ont été insérés.</li>
-</ul>
-
-<h2 id="Chaînage_des_promesses">Chaînage des promesses</h2>
-
-<p>Un besoin fréquent est d'exécuter deux ou plus d'opérations asynchrones les unes à la suite des autres, avec chaque opération qui démarre lorsque la précédente a réussi et en utilisant le résultat de l'étape précédente. Ceci peut être réalisé en créant une chaîne de promesses.</p>
-
-<p>La méthode <code>then()</code> renvoie une <em>nouvelle</em> promesse, différente de la première :</p>
-
-<pre class="brush: js">const promise = faireQqc();
-const promise2 = promise.then(successCallback, failureCallback);
-</pre>
-
-<p>ou encore :</p>
-
-<pre class="brush: js">const promise2 = faireQqc().then(successCallback, failureCallback);
-</pre>
-
-<p>La deuxième promesse (<code>promise2</code>) indique l'état de complétion, pas uniquement pour <code>faireQqc()</code> mais aussi pour le callback qui lui a été passé (<code>successCallback</code> ou <code>failureCallback</code>) qui peut aussi être une fonction asynchrone qui renvoie une promesse. Lorsque c'est le cas, tous les <em>callbacks</em> ajoutés à <code>promise2</code> forment une file derrière la promesse renvoyée par <code>successCallback</code> ou <code>failureCallback</code>.</p>
-
-<p>Autrement dit, chaque promesse représente l'état de complétion d'une étape asynchrone au sein de cette succession d'étapes.</p>
-
-<p>Auparavant, l'enchaînement de plusieurs opérations asynchrones déclenchait une pyramide dantesque de <em>callbacks</em> :</p>
-
-<pre class="brush: js">faireQqc(function(result) {
-  faireAutreChose(result, function(newResult) {
-    faireUnTroisiemeTruc(newResult, function(finalResult) {
-      console.log('Résultat final :' + finalResult);
-    }, failureCallback);
-  }, failureCallback);
-}, failureCallback);
-</pre>
-
-<p>Grâce à des fonctions plus modernes et aux promesses, on attache les <em>callbacks</em> aux promesses qui sont renvoyées. On peut ainsi construire une <em>chaîne de promesses</em> :</p>
-
-<pre class="brush: js">faireQqc().then(function(result) {
-  return faireAutreChose(result);
-})
-.then(function(newResult) {
-  return faireUnTroisiemeTruc(newResult);
-})
-.then(function(finalResult) {
-  console.log('Résultat final : ' + finalResult);
-})
-.catch(failureCallback);
-</pre>
-
-<p>Les arguments passés à <code>then</code> sont optionnels. La forme <code>catch(failureCallback)</code> est un alias plus court pour <code>then(null, failureCallback)</code>. Ces chaînes de promesses sont parfois construites avec <a href="/fr/docs/Web/JavaScript/Reference/Fonctions/Fonctions_fléchées">des fonctions fléchées</a> :</p>
-
-<pre class="brush: js">faireQqc()
-.then(result =&gt; faireAutreChose(result))
-.then(newResult =&gt; faireUnTroisiemeTruc(newResult))
-.then(finalResult =&gt; {
-  console.log('Résultat final : ' + finalResult);
-})
-.catch(failureCallback);
-</pre>
-
-<div class="warning">
-<p><strong>Attention :</strong> cela implique que les fonctions asynchrones renvoient toutes des promesses, sinon les <em>callbacks</em> ne pourront être chaînés et les erreurs ne seront pas interceptées (les fonctions fléchées ont une valeur de retour implicite si les accolades ne sont pas utilisées : <code>() =&gt; x</code> est synonyme de <code>() =&gt; { return x; }</code>).</p>
-</div>
-
-<h3 id="Chaînage_après_un_catch">Chaînage après un catch</h3>
-
-<p>Il est possible de chaîner de nouvelles actions <em>après</em> un rejet, c'est-à-dire un <code>catch</code>. C'est utile pour accomplir de nouvelles actions après qu'une action ait échoué dans la chaine. Par exemple :</p>
-
-<pre class="brush: js">new Promise((resolve, reject) =&gt; {
-    console.log('Initial');
-
-    resolve();
-})
-.then(() =&gt; {
-    throw new Error('Something failed');
-
-    console.log('Do this');
-})
-.catch(() =&gt; {
-    console.error('Do that');
-})
-.then(() =&gt; {
-    console.log('Do this whatever happened before');
-});
-</pre>
-
-<p>Cela va produire la sortie suivante :</p>
-
-<pre>Initial
-Do that
-Do this whatever happened before
-</pre>
-
-<p>Notez que le texte <q>Do this</q> n'est pas affiché car l'erreur <q>Something failed</q> a produit un rejet.</p>
-
-<h2 id="Propagation_des_erreurs">Propagation des erreurs</h2>
-
-<p>Dans les exemples précédents, <code>failureCallback</code> était présent trois fois dans la pyramide de <em>callbacks</em> et une seule fois, à la fin, dans la chaîne des promesses :</p>
-
-<pre class="brush: js">faireQqc()
-.then(result =&gt; faireAutreChose(result))
-.then(newResult =&gt; faireUnTroisiemeTruc(newResult))
-.then(finalResult =&gt; console.log('Résultat final : ' + finalResult))
-.catch(failureCallback);
-</pre>
-
-<p>En fait, dès qu'une exception est levée, la chaîne de promesses utilisera le premier <code>catch()</code> ou <code>onRejected</code> disponible. Ce fonctionnement est assez proche de ce qu'on peut trouver pour du code synchrone :</p>
-
-<pre class="brush: js">try {
-  const result = syncFaireQqc();
-  const newResult = syncFaireQqcAutre(result);
-  const finalResult = syncFaireUnTroisiemeTruc(newResult);
-  console.log('Résultat final : ' + finalResult);
-} catch(error) {
-  failureCallback(error);
-}
-</pre>
-
-<p>Cette symétrie entre le code asynchrone et le code synchrone atteint son paroxysme avec le couple d'opérateurs <a href="/fr/docs/Web/JavaScript/Reference/Instructions/async_function"><code>async</code>/<code>await</code></a> d'ECMAScript 2017:</p>
-
-<pre class="brush: js">async function toto() {
-  try {
-    const result = await faireQqc();
-    const newResult = await faireQqcAutre(result);
-    const finalResult = await faireUnTroisiemeTruc(newResult);
-    console.log('Résultat final : ' + finalResult);
-  } catch(error) {
-    failureCallback(error);
-  }
-}
-</pre>
-
-<p>Ce fonctionnement est construit sur les promesses et <code>faireQqc()</code> est la même fonction que celle utilisée dans les exemples précédents.</p>
-
-<p>Les promesses permettent de résoudre les problèmes de cascades infernales de <em>callbacks</em> notamment en interceptant les différentes erreurs (exceptions et erreurs de programmation). Ceci est essentiel pour obtenir une composition fonctionnelle des opérations asynchrones.</p>
-
-<h2 id="Évènements_liés_à_la_rupture_dune_promesse">Évènements liés à la rupture d'une promesse</h2>
-
-<p>Lorsqu'une promesse est rompue/rejetée, un des deux évènements suivants est envoyé au niveau de la portée globale ({{domxref("window")}} ou {{domxref("Worker")}} si le script est utilisé dans un <em>worker</em>) :</p>
-
-<dl>
- <dt>{{domxref("Window.rejectionhandled_event","rejectionhandled")}}</dt>
- <dd>Cet évènement est envoyé lorsqu'une promesse est rompue et après que le rejet ai été traité par la fonction <code>reject</code> associée à la promesse.</dd>
- <dt>{{domxref("Window.unhandledrejection_event","unhandledrejection")}}</dt>
- <dd>Cet évènement est envoyé lorsque la promesse est rompue et qu'aucune fonction n'a été définie pour gérer le rejet de la promesse.</dd>
-</dl>
-
-<p>Dans les deux cas, l'évènement (dont le type est {{domxref("PromiseRejectionEvent")}}) aura deux propriétés :</p>
-
-<dl>
- <dt>{{domxref("PromiseRejectionEvent.promise","promise")}}</dt>
- <dd>La promesse qui a été rompue.</dd>
- <dt>{{domxref("PromiseRejectionEvent.reason","reason")}}</dt>
- <dd>La raison pour laquelle la promesse a été rompue.</dd>
-</dl>
-
-<p>Gérer ces évènements permet d'avoir une ultime méthode pour gérer le rejet des promesses. Cela peut notamment s'avérer utile pour le débogage. Ces évènements sont déclenchés au niveau global et permettent ainsi d'intercepter les erreurs pour chaque contexte (fenêtre ou <em>worker</em>)</p>
-
-<pre class="brush: js">window.addEventListener("unhandledrejection", event =&gt; {
-  // Examiner la ou les promesse(s) qui posent problème en debug
-  // Nettoyer ce qui doit l'être quand ça se produit en réel
-
-}, false);</pre>
-
-<h2 id="Envelopper_les_callbacks_des_API">Envelopper les <em>callbacks</em> des API</h2>
-
-<p>Il est possible de créer un objet  {{jsxref("Promise")}} grâce à son constructeur. Et même si, idéalement, cela ne devrait pas être nécessaire, certaines API fonctionnent toujours avec des <em>callbacks</em> passés en arguments. C'est notamment le cas de la méthode  {{domxref("WindowTimers.setTimeout", "setTimeout()")}} :</p>
-
-<pre class="brush: js">setTimeout(() =&gt; saySomething("10 seconds passed"), 10 * 1000);
-</pre>
-
-<p>Si on mélange des <em>callbacks</em> et des promesses, cela sera problématique. Si  <code>saySomething</code> échoue ou contient des erreurs, rien n'interceptera l'erreur.</p>
-
-<p>Pour ces fonctions, la meilleure pratique consiste à les <em>envelopper</em> dans des promesses au plus bas niveau possible et de ne plus les appeler directement :</p>
-
-<pre class="brush: js">const wait = ms =&gt; new Promise(resolve =&gt; setTimeout(resolve, ms));
-
-wait(10 * 1000).then(() =&gt; saySomething("10 seconds")).catch(failureCallback);
-</pre>
-
-<p>Le constructeur <code>Promise</code> prend en argument une fonction et nous permet de la convertir manuellement en une promesse. Ici, vu que <code>setTimeout</code> n'échoue pas vraiment, on laisse de côté la gestion de l'échec.</p>
-
-<h2 id="Composition">Composition</h2>
-
-<p>{{jsxref("Promise.resolve()")}} et {{jsxref("Promise.reject()")}} sont des méthodes qui permettent de créer des promesses déjà tenues ou rompues.</p>
-
-<p>{{jsxref("Promise.all()")}} et {{jsxref("Promise.race()")}} sont deux outils de composition qui permettent de mener des opérations asynchrones en parallèle.</p>
-
-<p>On peut lancer des opérations en parallèles et attendre qu'elles soient toutes finies de cette façon :</p>
-
-<pre class="brush: js">Promise.all([func1(), func2(), func3()])
-.then(([resultat1, resultat2, resultat3]) =&gt; { /* où on utilise resultat1/2/3 */ });</pre>
-
-<p>Il est possible de construire une composition séquentielle de la façon suivante :</p>
-
-<pre class="brush: js">[func1, func2].reduce((p, f) =&gt; p.then(f), Promise.resolve());
-</pre>
-
-<p>Dans ce fragment de code, on réduit un tableau de fonctions asynchrones en une chaîne de promesse équivalente à : <code>Promise.resolve().then(func1).then(func2);</code></p>
-
-<p>On peut également accomplir cela avec une fonction de composition réutilisable  :</p>
-
-<pre class="brush: js">const applyAsync = (acc, val) =&gt; acc.then(val);
-const composeAsync = (...funcs) =&gt; x =&gt; funcs.reduce(applyAsync, Promise.resolve(x));</pre>
-
-<p>La fonction <code>composeAsync</code> accepte autant de fonctions que nécessaire comme arguments et renvoie une nouvelle fonction qui prend une valeur initiale pour la passer à travers ces étapes de compositions. Cette façon de faire garantit que les fonctions, qu'elles soient synchrones ou asynchrones, sont exécutées dans le bon ordre :</p>
-
-<pre class="brush: js">const transformData = composeAsync(func1, asyncFunc1, asyncFunc2, func2);
-transformData(data);</pre>
-
-<p>Avec ECMAScript 2017, on peut obtenir une composition séquentielle plus simplement avec les opérateurs <code>await</code>/<code>async</code> :</p>
-
-<pre class="brush: js">let result;
-for(const f of [func1, func2, func3]) {
-  result = await f(result);
-} </pre>
-
-<h2 id="Gestion_du_temps">Gestion du temps</h2>
-
-<p>Pour éviter de mauvaises surprises, les fonctions passées à <code>then()</code> ne seront jamais appelées de façon synchrone, y compris lorsqu'il s'agit d'une promesse déjà résolue :</p>
-
-<pre class="brush: js">Promise.resolve().then(() =&gt; console.log(2));
-console.log(1); // 1, 2
-</pre>
-
-<p>En fait, la fonction passée à <code>then</code><code>()</code> est placée dans une file de micro-tâches qui sont exécutées lorsque cette file est vidée à la fin de la boucle d'évènements JavaScript :</p>
-
-<pre class="brush: js">var wait = ms =&gt; new Promise(resolve =&gt; setTimeout(resolve, ms));
-
-wait().then(() =&gt; console.log(4));
-Promise.resolve().then(() =&gt; console.log(2)).then(() =&gt; console.log(3));
-console.log(1); // 1, 2, 3, 4
-</pre>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Promise.then()")}}</li>
- <li><a href="/fr/docs/Web/JavaScript/Reference/Instructions/async_function"><code>async</code>/<code>await</code></a></li>
- <li><a href="http://promisesaplus.com/">La spécification Promises/A+</a></li>
- <li><a href="http://pouchdb.com/2015/05/18/we-have-a-problem-with-promises.html">Nolan Lawson : We have a problem with promises — Common mistakes with promises (article en anglais)</a></li>
-</ul>
-
-<p>{{PreviousNext("Web/JavaScript/Guide/Le_modèle_objet_JavaScript_en_détails", "Web/JavaScript/Guide/iterateurs_et_generateurs")}}</p>
diff --git a/files/fr/web/javascript/guide/using_promises/index.md b/files/fr/web/javascript/guide/using_promises/index.md
new file mode 100644
index 0000000000..95b35d1884
--- /dev/null
+++ b/files/fr/web/javascript/guide/using_promises/index.md
@@ -0,0 +1,330 @@
+---
+title: Utiliser les promesses
+slug: Web/JavaScript/Guide/Using_promises
+tags:
+  - Guide
+  - Intermédiaire
+  - JavaScript
+  - Promesses
+  - Promise
+translation_of: Web/JavaScript/Guide/Using_promises
+original_slug: Web/JavaScript/Guide/Utiliser_les_promesses
+---
+{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Le_modèle_objet_JavaScript_en_détails", "Web/JavaScript/Guide/iterateurs_et_generateurs")}}
+
+Une promesse est un objet ({{jsxref("Promise")}}) qui représente la complétion ou l'échec d'une opération asynchrone. La plupart du temps, on « consomme » des promesses et c'est donc ce que nous verrons dans la première partie de ce guide pour ensuite expliquer comment les créer.
+
+En résumé, une promesse est un objet qui est renvoyé et auquel on attache des _callbacks_ plutôt que de passer des _callbacks_ à une fonction. Ainsi, au lieu d'avoir une fonction qui prend deux _callbacks_ en arguments :
+
+```js
+function faireQqcALAncienne(successCallback, failureCallback){
+  console.log("C'est fait");
+  // réussir une fois sur deux
+  if (Math.random() > .5) {
+    successCallback("Réussite");
+  } else {
+    failureCallback("Échec");
+  }
+}
+
+function successCallback(résultat) {
+  console.log("L'opération a réussi avec le message : " + résultat);
+}
+
+
+function failureCallback(erreur) {
+  console.error("L'opération a échoué avec le message : " + erreur);
+}
+
+faireQqcALAncienne(successCallback, failureCallback);
+```
+
+On aura une fonction qui renvoie une promesse et on attachera les callbacks sur cette promesse :
+
+```js
+function faireQqc() {
+  return new Promise((successCallback, failureCallback) => {
+    console.log("C'est fait");
+    // réussir une fois sur deux
+    if (Math.random() > .5) {
+      successCallback("Réussite");
+    } else {
+      failureCallback("Échec");
+    }
+  })
+}
+
+const promise = faireQqc();
+promise.then(successCallback, failureCallback);
+```
+
+ou encore :
+
+```js
+faireQqc().then(successCallback, failureCallback);
+```
+
+Cette dernière forme est ce qu'on appelle _un appel de fonction asynchrone_. Cette convention possède différents avantages dont le premier est _le chaînage_.
+
+## Garanties
+
+À la différence des imbrications de _callbacks_, une promesse apporte certaines garanties :
+
+- Les _callbacks_ ne seront jamais appelés avant la fin du parcours de la boucle d'évènements JavaScript courante
+- Les _callbacks_ ajoutés grâce à `then` seront appelés, y compris après le succès ou l'échec de l'opération asynchrone
+- Plusieurs _callbacks_ peuvent être ajoutés en appelant `then` plusieurs fois, ils seront alors exécutés l'un après l'autre selon l'ordre dans lequel ils ont été insérés.
+
+## Chaînage des promesses
+
+Un besoin fréquent est d'exécuter deux ou plus d'opérations asynchrones les unes à la suite des autres, avec chaque opération qui démarre lorsque la précédente a réussi et en utilisant le résultat de l'étape précédente. Ceci peut être réalisé en créant une chaîne de promesses.
+
+La méthode `then()` renvoie une _nouvelle_ promesse, différente de la première :
+
+```js
+const promise = faireQqc();
+const promise2 = promise.then(successCallback, failureCallback);
+```
+
+ou encore :
+
+```js
+const promise2 = faireQqc().then(successCallback, failureCallback);
+```
+
+La deuxième promesse (`promise2`) indique l'état de complétion, pas uniquement pour `faireQqc()` mais aussi pour le callback qui lui a été passé (`successCallback` ou `failureCallback`) qui peut aussi être une fonction asynchrone qui renvoie une promesse. Lorsque c'est le cas, tous les _callbacks_ ajoutés à `promise2` forment une file derrière la promesse renvoyée par `successCallback` ou `failureCallback`.
+
+Autrement dit, chaque promesse représente l'état de complétion d'une étape asynchrone au sein de cette succession d'étapes.
+
+Auparavant, l'enchaînement de plusieurs opérations asynchrones déclenchait une pyramide dantesque de _callbacks_ :
+
+```js
+faireQqc(function(result) {
+  faireAutreChose(result, function(newResult) {
+    faireUnTroisiemeTruc(newResult, function(finalResult) {
+      console.log('Résultat final :' + finalResult);
+    }, failureCallback);
+  }, failureCallback);
+}, failureCallback);
+```
+
+Grâce à des fonctions plus modernes et aux promesses, on attache les _callbacks_ aux promesses qui sont renvoyées. On peut ainsi construire une _chaîne de promesses_ :
+
+```js
+faireQqc().then(function(result) {
+  return faireAutreChose(result);
+})
+.then(function(newResult) {
+  return faireUnTroisiemeTruc(newResult);
+})
+.then(function(finalResult) {
+  console.log('Résultat final : ' + finalResult);
+})
+.catch(failureCallback);
+```
+
+Les arguments passés à `then` sont optionnels. La forme `catch(failureCallback)` est un alias plus court pour `then(null, failureCallback)`. Ces chaînes de promesses sont parfois construites avec [des fonctions fléchées](/fr/docs/Web/JavaScript/Reference/Fonctions/Fonctions_fléchées) :
+
+```js
+faireQqc()
+.then(result => faireAutreChose(result))
+.then(newResult => faireUnTroisiemeTruc(newResult))
+.then(finalResult => {
+  console.log('Résultat final : ' + finalResult);
+})
+.catch(failureCallback);
+```
+
+> **Attention :** cela implique que les fonctions asynchrones renvoient toutes des promesses, sinon les _callbacks_ ne pourront être chaînés et les erreurs ne seront pas interceptées (les fonctions fléchées ont une valeur de retour implicite si les accolades ne sont pas utilisées : `() => x` est synonyme de `() => { return x; }`).
+
+### Chaînage après un catch
+
+Il est possible de chaîner de nouvelles actions _après_ un rejet, c'est-à-dire un `catch`. C'est utile pour accomplir de nouvelles actions après qu'une action ait échoué dans la chaine. Par exemple :
+
+```js
+new Promise((resolve, reject) => {
+    console.log('Initial');
+
+    resolve();
+})
+.then(() => {
+    throw new Error('Something failed');
+
+    console.log('Do this');
+})
+.catch(() => {
+    console.error('Do that');
+})
+.then(() => {
+    console.log('Do this whatever happened before');
+});
+```
+
+Cela va produire la sortie suivante :
+
+    Initial
+    Do that
+    Do this whatever happened before
+
+Notez que le texte "Do this" n'est pas affiché car l'erreur "Something failed" a produit un rejet.
+
+## Propagation des erreurs
+
+Dans les exemples précédents, `failureCallback` était présent trois fois dans la pyramide de _callbacks_ et une seule fois, à la fin, dans la chaîne des promesses :
+
+```js
+faireQqc()
+.then(result => faireAutreChose(result))
+.then(newResult => faireUnTroisiemeTruc(newResult))
+.then(finalResult => console.log('Résultat final : ' + finalResult))
+.catch(failureCallback);
+```
+
+En fait, dès qu'une exception est levée, la chaîne de promesses utilisera le premier `catch()` ou `onRejected` disponible. Ce fonctionnement est assez proche de ce qu'on peut trouver pour du code synchrone :
+
+```js
+try {
+  const result = syncFaireQqc();
+  const newResult = syncFaireQqcAutre(result);
+  const finalResult = syncFaireUnTroisiemeTruc(newResult);
+  console.log('Résultat final : ' + finalResult);
+} catch(error) {
+  failureCallback(error);
+}
+```
+
+Cette symétrie entre le code asynchrone et le code synchrone atteint son paroxysme avec le couple d'opérateurs [`async`/`await`](/fr/docs/Web/JavaScript/Reference/Instructions/async_function) d'ECMAScript 2017:
+
+```js
+async function toto() {
+  try {
+    const result = await faireQqc();
+    const newResult = await faireQqcAutre(result);
+    const finalResult = await faireUnTroisiemeTruc(newResult);
+    console.log('Résultat final : ' + finalResult);
+  } catch(error) {
+    failureCallback(error);
+  }
+}
+```
+
+Ce fonctionnement est construit sur les promesses et `faireQqc()` est la même fonction que celle utilisée dans les exemples précédents.
+
+Les promesses permettent de résoudre les problèmes de cascades infernales de _callbacks_ notamment en interceptant les différentes erreurs (exceptions et erreurs de programmation). Ceci est essentiel pour obtenir une composition fonctionnelle des opérations asynchrones.
+
+## Évènements liés à la rupture d'une promesse
+
+Lorsqu'une promesse est rompue/rejetée, un des deux évènements suivants est envoyé au niveau de la portée globale ({{domxref("window")}} ou {{domxref("Worker")}} si le script est utilisé dans un _worker_) :
+
+- {{domxref("Window.rejectionhandled_event","rejectionhandled")}}
+  - : Cet évènement est envoyé lorsqu'une promesse est rompue et après que le rejet ai été traité par la fonction `reject` associée à la promesse.
+- {{domxref("Window.unhandledrejection_event","unhandledrejection")}}
+  - : Cet évènement est envoyé lorsque la promesse est rompue et qu'aucune fonction n'a été définie pour gérer le rejet de la promesse.
+
+Dans les deux cas, l'évènement (dont le type est {{domxref("PromiseRejectionEvent")}}) aura deux propriétés :
+
+- {{domxref("PromiseRejectionEvent.promise","promise")}}
+  - : La promesse qui a été rompue.
+- {{domxref("PromiseRejectionEvent.reason","reason")}}
+  - : La raison pour laquelle la promesse a été rompue.
+
+Gérer ces évènements permet d'avoir une ultime méthode pour gérer le rejet des promesses. Cela peut notamment s'avérer utile pour le débogage. Ces évènements sont déclenchés au niveau global et permettent ainsi d'intercepter les erreurs pour chaque contexte (fenêtre ou _worker_)
+
+```js
+window.addEventListener("unhandledrejection", event => {
+  // Examiner la ou les promesse(s) qui posent problème en debug
+  // Nettoyer ce qui doit l'être quand ça se produit en réel
+
+}, false);
+```
+
+## Envelopper les _callbacks_ des API
+
+Il est possible de créer un objet  {{jsxref("Promise")}} grâce à son constructeur. Et même si, idéalement, cela ne devrait pas être nécessaire, certaines API fonctionnent toujours avec des _callbacks_ passés en arguments. C'est notamment le cas de la méthode  {{domxref("WindowTimers.setTimeout", "setTimeout()")}} :
+
+```js
+setTimeout(() => saySomething("10 seconds passed"), 10 * 1000);
+```
+
+Si on mélange des _callbacks_ et des promesses, cela sera problématique. Si  `saySomething` échoue ou contient des erreurs, rien n'interceptera l'erreur.
+
+Pour ces fonctions, la meilleure pratique consiste à les _envelopper_ dans des promesses au plus bas niveau possible et de ne plus les appeler directement :
+
+```js
+const wait = ms => new Promise(resolve => setTimeout(resolve, ms));
+
+wait(10 * 1000).then(() => saySomething("10 seconds")).catch(failureCallback);
+```
+
+Le constructeur `Promise` prend en argument une fonction et nous permet de la convertir manuellement en une promesse. Ici, vu que `setTimeout` n'échoue pas vraiment, on laisse de côté la gestion de l'échec.
+
+## Composition
+
+{{jsxref("Promise.resolve()")}} et {{jsxref("Promise.reject()")}} sont des méthodes qui permettent de créer des promesses déjà tenues ou rompues.
+
+{{jsxref("Promise.all()")}} et {{jsxref("Promise.race()")}} sont deux outils de composition qui permettent de mener des opérations asynchrones en parallèle.
+
+On peut lancer des opérations en parallèles et attendre qu'elles soient toutes finies de cette façon :
+
+```js
+Promise.all([func1(), func2(), func3()])
+.then(([resultat1, resultat2, resultat3]) => { /* où on utilise resultat1/2/3 */ });
+```
+
+Il est possible de construire une composition séquentielle de la façon suivante :
+
+```js
+[func1, func2].reduce((p, f) => p.then(f), Promise.resolve());
+```
+
+Dans ce fragment de code, on réduit un tableau de fonctions asynchrones en une chaîne de promesse équivalente à : `Promise.resolve().then(func1).then(func2);`
+
+On peut également accomplir cela avec une fonction de composition réutilisable  :
+
+```js
+const applyAsync = (acc, val) => acc.then(val);
+const composeAsync = (...funcs) => x => funcs.reduce(applyAsync, Promise.resolve(x));
+```
+
+La fonction `composeAsync` accepte autant de fonctions que nécessaire comme arguments et renvoie une nouvelle fonction qui prend une valeur initiale pour la passer à travers ces étapes de compositions. Cette façon de faire garantit que les fonctions, qu'elles soient synchrones ou asynchrones, sont exécutées dans le bon ordre :
+
+```js
+const transformData = composeAsync(func1, asyncFunc1, asyncFunc2, func2);
+transformData(data);
+```
+
+Avec ECMAScript 2017, on peut obtenir une composition séquentielle plus simplement avec les opérateurs `await`/`async` :
+
+```js
+let result;
+for(const f of [func1, func2, func3]) {
+  result = await f(result);
+} 
+```
+
+## Gestion du temps
+
+Pour éviter de mauvaises surprises, les fonctions passées à `then()` ne seront jamais appelées de façon synchrone, y compris lorsqu'il s'agit d'une promesse déjà résolue :
+
+```js
+Promise.resolve().then(() => console.log(2));
+console.log(1); // 1, 2
+```
+
+En fait, la fonction passée à ` then``() ` est placée dans une file de micro-tâches qui sont exécutées lorsque cette file est vidée à la fin de la boucle d'évènements JavaScript :
+
+```js
+var wait = ms => new Promise(resolve => setTimeout(resolve, ms));
+
+wait().then(() => console.log(4));
+Promise.resolve().then(() => console.log(2)).then(() => console.log(3));
+console.log(1); // 1, 2, 3, 4
+```
+
+## Voir aussi
+
+- {{jsxref("Promise.then()")}}
+- [`async`/`await`](/fr/docs/Web/JavaScript/Reference/Instructions/async_function)
+- [La spécification Promises/A+](http://promisesaplus.com/)
+- [Nolan Lawson : We have a problem with promises — Common mistakes with promises (article en anglais)](http://pouchdb.com/2015/05/18/we-have-a-problem-with-promises.html)
+
+{{PreviousNext("Web/JavaScript/Guide/Le_modèle_objet_JavaScript_en_détails", "Web/JavaScript/Guide/iterateurs_et_generateurs")}}
diff --git a/files/fr/web/javascript/guide/working_with_objects/index.html b/files/fr/web/javascript/guide/working_with_objects/index.html
deleted file mode 100644
index f02ca6ff02..0000000000
--- a/files/fr/web/javascript/guide/working_with_objects/index.html
+++ /dev/null
@@ -1,532 +0,0 @@
----
-title: Utiliser les objets
-slug: Web/JavaScript/Guide/Working_with_Objects
-tags:
-  - Beginner
-  - Comparing object
-  - Document
-  - Guide
-  - JavaScript
-  - Object
-  - l10n:priority
-translation_of: Web/JavaScript/Guide/Working_with_Objects
-original_slug: Web/JavaScript/Guide/Utiliser_les_objets
----
-<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Keyed_collections", "Web/JavaScript/Guide/Details_of_the_Object_Model")}}</div>
-
-<p>JavaScript est conçu autour d'un paradigme simple, basé sur les objets. Un objet est un ensemble de propriétés et une propriété est une association entre un nom (aussi appelé <em>clé</em>) et une valeur. La valeur d'une propriété peut être une fonction, auquel cas la propriété peut être appelée « méthode ». En plus des objets natifs fournis par l'environnement, il est possible de construire ses propres objets. Ce chapitre aborde la manipulation d'objets, l'utilisation des propriétés, fonctions et méthodes, il explique également comment créer ses objets.</p>
-
-<h2 id="objects_overview">Un aperçu des objets</h2>
-
-<p>À l'instar de nombreux autres langages de programmation, on peut comparer les objets JavaScript aux objets du monde réel.</p>
-
-<p>En JavaScript, un objet est une entité à part entière qui possède des propriétés et un type. Si on effectue cette comparaison avec une tasse par exemple, on pourra dire qu'une tasse est un objet avec des propriétés. Ces propriétés pourront être la couleur, la forme, le poids, le matériau qui la constitue, etc. De la même façon, un objet JavaScript possède des propriétés, chacune définissant une caractéristique.</p>
-
-<h2 id="objects_and_properties">Les objets et les propriétés</h2>
-
-<p>Un objet JavaScript possède donc plusieurs propriétés qui lui sont associées. Une propriété peut être vue comme une variable attachée à l'objet. Les propriétés d'un objet sont des variables tout ce qu'il y a de plus classiques, exception faite qu'elles sont attachées à des objets. Les propriétés d'un objet représentent ses caractéristiques et on peut y accéder avec une notation utilisant le point « . », de la façon suivante :</p>
-
-<pre class="brush: js">nomObjet.nomPropriete</pre>
-
-<p>Comme pour les variables JavaScript en général, le nom de l'objet (qui peut être une variable) et le nom des propriétés sont sensibles à la casse (une lettre minuscule ne sera pas équivalente à une lettre majuscule). On peut définir une propriété en lui affectant une valeur. Ainsi, si on crée un objet <code>maVoiture</code> et qu'on lui donne les propriétés <code>fabricant</code>, <code>modèle</code>, et <code>année</code> :</p>
-
-<pre class="brush: js">
-let maVoiture = new Object();
-maVoiture.fabricant = "Ford";
-maVoiture.modele = "Mustang";
-maVoiture.annee = 1969;
-</pre>
-
-<p>L'exemple précédent peut également s'écrire avec <strong><a href="#object_initializers">la syntaxe littérale pour initialiser les objets</a></strong> : on fournit une liste, délimitée par des virgules, qui contient des paires de noms et de valeurs décrivant les propriétés et où le tout est encadré d'accolades (<code>{}</code>) :</p>
-
-<pre class="brush: js">
-let maVoiture = {
-  make: 'Ford',
-  model: 'Mustang',
-  year: 1969
-};
-</pre>
-
-<p>Les propriétés d'un objet qui n'ont pas été affectées auront la valeur <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/undefined"><code>undefined</code></a> (et non <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/null"><code>null</code></a>).</p>
-
-<pre class="brush: js">maVoiture.color; // undefined</pre>
-
-<p>On peut aussi définir ou accéder à des propriétés JavaScript en utilisant une notation avec les crochets (voir la page sur <a href="/fr/docs/Web/JavaScript/Reference/Operators/Property_Accessors">les accesseurs de propriétés</a> pour plus de détails). Les objets sont parfois appelés «&nbsp;tableaux associatifs&nbsp;». Cela peut se comprendre, car chaque propriété est associée avec une chaîne de caractères qui permet d'y accéder. Ainsi, par exemple, on peut accéder aux propriétés de l'objet <code>maVoiture</code> de la façon suivante :</p>
-
-<pre class="brush: js">
-maVoiture["fabricant"] = "Ford";
-maVoiture["modèle"] = "Mustang";
-maVoiture["année"] = 1969;
-</pre>
-
-<p>Le nom d'une propriété d'un objet peut être n'importe quelle chaîne JavaScript valide (ou n'importe quelle valeur qui puisse être convertie en une chaîne de caractères), y compris la chaîne vide. Cependant, n'importe quel nom de propriété qui n'est pas un identifiant valide (par exemple si le nom d'une propriété contient un tiret, un espace ou débute par un chiffre) devra être utilisé avec la notation à crochets. Cette notation s'avère également utile quand les noms des propriétés sont déterminés de façon dynamique (c'est-à-dire qu'on ne sait pas le nom de la propriété avant l'exécution). Par exemple :</p>
-
-<pre class="brush: js">
-// on crée quatre variables avec une même instruction
-let monObj = new Object();
-let str = "maChaîne";
-let rand = Math.random();
-let obj = new Object();
-
-monObj.type              = "Syntaxe point";
-monObj["date created"]   = "Chaîne avec un espace";
-monObj[str]              = "Une valeur qui est une chaîne";
-monObj[rand]             = "Nombre aléatoire";
-monObj[obj]              = "Objet";
-monObj[""]               = "Une chaîne vide";
-
-console.log(monObj);
-</pre>
-
-<p>On notera que les valeurs utilisées entre les crochets sont automatiquement converties en chaînes de caractères grâce à la méthode <code><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Object/toString">toString()</a></code> sauf si ces valeurs sont des symboles (cf. <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Symbol"><code>Symbol</code></a>). En effet, les noms des propriétés pour les objets JavaScript peuvent être des chaînes de caractères ou des symboles. Ainsi, dans l'exemple précédent, lorsqu'on ajoute la clé <code>obj</code> sur <code>monObj</code>, le moteur JavaScript appelle la méthode <code>obj.toString()</code> et utilise la chaîne de caractères renvoyée par cette méthode comme nom pour la propriété.</p>
-
-<p>On peut également accéder aux propriétés d'un objet en utilisant une valeur qui est une chaîne de caractères enregistrée dans une variable :</p>
-
-<pre class="brush: js">
-let nomPropriété = "fabricant";
-maVoiture[nomPropriété] = "Ford";
-
-nomPropriété = "modèle";
-maVoiture[nomPropriété] = "Mustang";
-</pre>
-
-<p>La notation avec les crochets peut être utilisée dans une boucle <code><a href="/fr/docs/Web/JavaScript/Reference/Statements/for...in">for...in</a></code> afin de parcourir les propriétés énumérables d'un objet. Pour illustrer comment cela fonctionne, on définit la fonction suivante qui affiche les propriétés d'un objet qu'on lui a passé en argument avec le nom associé :</p>
-
-<pre class="brush: js">
-function afficherProps(obj, nomObjet) {
-  let resultat = "";
-  for (let i in obj) {
-    if (obj.hasOwnProperty(i)) {
-        resultat += `${nomObjet}.${i} = ${obj[i]}\n`;
-    }
-  }
-  return resultat;
-}
-</pre>
-
-<p>Si on appelle la fonction avec <code>afficherProps(maVoiture, "maVoiture")</code>, cela affichera le contenu suivant dans la console :</p>
-
-<pre class="brush: js">
-maVoiture.fabricant = Ford
-maVoiture.modele = Mustang
-maVoiture.annee = 1969
-</pre>
-
-<h2 id="enumerate_the_properties_of_an_object">Lister les propriétés d'un objet</h2>
-
-<p>À partir d'ECMAScript 5, il existe trois méthodes natives pour lister/parcourir les propriétés d'un objet :</p>
-
-<ul>
- <li>Les boucles <code><a href="/fr/docs/Web/JavaScript/Reference/Statements/for...in">for...in</a></code> qui permettent de parcourir l'ensemble des propriétés énumérables d'un objet et de sa chaîne de prototypes.</li>
- <li><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Object/keys"><code>Object.keys(o)</code></a> qui permet de renvoyer un tableau contenant les noms (clés ou <em>keys</em>) des propriétés propres (celles qui ne sont pas héritées via la chaîne de prototypes) d'un objet <code>o</code> pour les propriétés énumérables.</li>
- <li><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyNames"><code>Object.getOwnPropertyNames(o)</code></a> qui permet de renvoyer un tableau contenant les noms des propriétés propres (énumérables ou non) d'un objet <code>o</code>.</li>
-</ul>
-
-<p>Avant ECMAScript 5, il n'existait aucune méthode native pour lister l'ensemble des propriétés d'un objet. Cependant, on pouvait utiliser le code suivant pour y parvenir :</p>
-
-<pre class="brush: js">
-function listerToutesLesProprietes(o){
-  let objectToInspect;
-  let resultat = [];
-
-  for(objectToInspect = o;
-      objectToInspect !== null;
-      objectToInspect = Object.getPrototypeOf(objectToInspect)){
-    resultat = resultat.concat(Object.getOwnPropertyNames(objectToInspect));
-  }
-  return resultat;
-}
-</pre>
-
-<p>Cela peut être utile pour révéler les propriétés « cachées » où leur nom est réutilisé dans la chaîne de prototypes. Pour lister les propriétés accessibles, il suffit de retirer les duplicatas du tableau.</p>
-
-<h2 id="creating_new_objects">Créer de nouveaux objets</h2>
-
-<p>Un environnement JavaScript possède certains objets natifs prédéfinis. En plus de ces objets, il est possible de créer ses propres objets. Pour cela, on peut utiliser un <a href="/fr/docs/Web/JavaScript/Reference/Operators/Object_initializer">initialisateur d'objet</a>. On peut aussi créer un constructeur puis instancier un objet avec cette fonction en utilisant l'opérateur <code>new</code>.</p>
-
-<h3 id="using_object_initializers">Utiliser les initialisateurs d'objets</h3>
-
-<p>On peut créer des objets avec une fonction qui est un constructeur, mais on peut aussi créer des objets avec des <a href="/fr/docs/Web/JavaScript/Reference/Operators/Object_initializer">initialisateurs d'objets</a>. On appelle parfois cette syntaxe la notation <em>littérale</em>.</p>
-
-<p>La syntaxe utilisée avec les initialisateurs d'objets est la suivante :</p>
-
-<pre class="brush: js">
-let obj = { 
-  propriete_1:   valeur_1,   // propriete_# peut être un identifiant
-            2:   valeur_2,   // ou un nombre
-            // ...,
-  "propriete n": valeur_n
-  }; // ou une chaîne
-</pre>
-
-<p>où on a <code>obj</code> le nom de l'objet qu'on souhaite créer et chaque <code>propriete_<em>i</em></code> un identifiant (que ce soit un nom, un nombre ou une chaîne de caractères) et chaque <code>valeur_<em>i</em></code> une expression dont la valeur sera affectée à la propriété <code>propriete_<em>i</em></code>. S'il n'est pas nécessaire d'utiliser l'objet <code>obj</code> par la suite, il n'est pas nécessaire de réaliser l'affectation à une variable (attention alors à l'encadrer dans des parenthèses pour que le littéral objet soit bien interprété comme une instruction et non pas comme un bloc.)</p>
-
-<p>Les initialisateurs d'objets sont des expressions et chaque initialisateur entraîne la création d'un nouvel objet dans l'instruction pour laquelle il est exécuté. Des initialisateurs d'objets identiques créeront des objets distincts qui ne seront pas équivalents. Les objets sont créés de la même façon qu'avec <code>new Object()</code>, les objets créés à partir d'une expression littérale seront des instances d'<code>Object</code>.</p>
-
-<p>L'instruction suivante crée un objet et l'affecte à une variable <code>x</code> si et seulement si l'expression <code>cond</code> est vraie :</p>
-
-<pre class="brush: js">if (cond) let x = {emplacement: "le monde"};
-</pre>
-
-<p>Dans l'exemple suivant, on crée un objet <code>maHonda</code> avec trois propriétés. La propriété <code>moteur</code> est également un objet avec ses propres propriétés.</p>
-
-<pre class="brush: js">
-let maHonda = {
-  couleur: "rouge",
-  roue: 4,
-  moteur: {
-    cylindres: 4,
-    taille: 2.2
-  }
-};
-</pre>
-
-<p>De la même façon, on pourra utiliser des initialisateurs pour créer des tableaux. Pour plus d'informations à ce sujet, voir <a href="/fr/docs/Web/JavaScript/Guide/Grammar_and_types#les_litt.c3.a9raux_de_tableaux">les littéraux de tableaux</a>.</p>
-
-<h3 id="using_a_constructor_function">Utiliser les constructeurs</h3>
-
-<p>On peut aussi créer des objets d'une autre façon, en suivant deux étapes :</p>
-
-<ol>
- <li>On définit une fonction qui sera un constructeur définissant le type de l'objet. La convention, pour nommer les constructeurs, est d'utiliser une majuscule comme première lettre pour l'identifiant de la fonction.</li>
- <li>On crée une instance de l'objet avec <code>new</code>.</li>
-</ol>
-
-<p>Pour définir le type d'un objet, on crée une fonction qui définit le nom de ce type et les propriétés et méthodes des instances. Ainsi, si on souhaite créer un type d'objet pour représenter des voitures, on pourra nommer ce type <code>voiture</code>, et il pourra avoir des propriétés pour le fabricant, le modèle et l'année. Pour ce faire, on pourra écrire la fonction suivante :</p>
-
-<pre class="brush: js">
-function Voiture(fabricant, modele, annee) {
-  this.fabricant = fabricant;
-  this.modele = modele;
-  this.annee = annee;
-}
-</pre>
-
-<p>On voit ici qu'on utilise le mot-clé <code>this</code> pour affecter des valeurs aux propriétés d'un objet en fonction des valeurs passées en arguments de la fonction.</p>
-
-<p>On peut désormais créer un objet <code>maVoiture</code> de la façon suivante :</p>
-
-<pre class="brush: js">
-let maVoiture = new Voiture("Eagle", "Talon TSi", 1993);
-</pre>
-
-<p>Cette instruction crée un objet <code>maVoiture</code> et lui affecte les valeurs fournies pour ses propriétés. On obtient donc <code>maVoiture.fabricant</code> qui sera la chaîne de caractères "Eagle", <code>maVoiture.annee</code> qui sera l'entier 1993, et ainsi de suite.</p>
-
-<p>Grâce à ce constructeur, on peut ensuite créer autant d'objets <code>Voiture</code> que nécessaire. Par exemple :</p>
-
-<pre class="brush: js">
-let voitureMorgan = new Voiture("Audi", "A3", 2005);
-let voitureMax = new Voiture("Mazda", "Miata", 1990);
-</pre>
-
-<p>Un objet peut avoir une propriété qui est elle-même un objet. Ainsi, si on définit un type d'objet <code>personne</code> de cette façon :</p>
-
-<pre class="brush: js">
-function Personne(nom, age, sexe) {
-  this.nom = nom;
-  this.age = age;
-  this.sexe = sexe;
-}
-</pre>
-
-<p>et qu'on instancie deux nouveaux objets <code>personne</code> avec</p>
-
-<pre class="brush: js">
-let max = new Personne("Max Gun", 33, "M");
-let morgan = new Personne("Morgan Sousbrouille", 39, "M");
-</pre>
-
-<p>On pourra réécrire la fonction de définition pour le type <code>Voiture</code> pour inclure une propriété <code>proprietaire</code> qui est représentée par un objet <code>personne</code> :</p>
-
-<pre class="brush: js">
-function Voiture(fabricant, modele, annee, proprietaire) {
-  this.fabricant = fabricant;
-  this.modele = modele;
-  this.annee = annee;
-  this.proprietaire = proprietaire;
-}
-</pre>
-
-<p>Pour instancier des nouveaux objets, on pourra donc utiliser :</p>
-
-<pre class="brush: js">
-let voiture1 = new Voiture("Mazda", "Miata", 1993, max);
-let voiture2 = new Voiture("Audi", "A3", 2005, morgan);
-</pre>
-
-<p>On notera que le dernier argument n'est pas une chaîne de caractères ou une valeur numérique mais bien un objet. Les objets <code>max</code> et <code>morgan</code> sont passés en arguments pour représenter les propriétaires. Ainsi, si on veut obtenir le nom du propriétaire pour <code>voiture2</code>, on peut accéder à la propriété de la façon suivante :</p>
-
-<pre class="brush: js">
-voiture2.proprietaire.nom
-</pre>
-
-<p>Il est toujours possible d'ajouter une propriété à un objet défini précédemment. Par exemple, on peut ajouter une propriété à l'objet <code>voiture1</code> avec l'instruction :</p>
-
-<pre class="brush: js">voiture1.couleur = "noir";
-</pre>
-
-<p>Ici, on ajoute une propriété <code>couleur</code> à <code>voiture1</code>, et on lui affecte une valeur "noir". Cependant, cela n'affecte pas les autres objets <code>voiture</code>. Pour ajouter une nouvelle propriété à tous les objets, il faudra ajouter la propriété au constructeur <code>voiture</code>.</p>
-
-<h3 id="using_the_object.create_method">Utiliser la méthode <code>Object.create()</code></h3>
-
-<p>Les objets peuvent également être créés en utilisant la méthode <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Object/create"><code>Object.create()</code></a>. Cette méthode peut s'avérer très utile, car elle permet de choisir le prototype pour l'objet qu'on souhaite créer, sans avoir à définir un constructeur.</p>
-
-<pre class="brush: js">
-// Propriétés pour animal et encapsulation des méthodes
-let Animal = {
-  type: "Invertébrés",        // Valeur par défaut  value of properties
-  afficherType : function() {  // Une méthode pour afficher le type Animal
-    console.log(this.type);
-  }
-}
-
-// On crée un nouveau type d'animal, animal1
-let animal1 = Object.create(Animal);
-animal1.afficherType(); // affichera Invertébrés
-
-// On crée un type d'animal "Poisson"
-let poisson = Object.create(Animal);
-poisson.type = "Poisson";
-poisson.afficherType(); // affichera Poisson
-</pre>
-
-<h2 id="inheritance">L'héritage</h2>
-
-<p>Tous les objets JavaScript héritent d'un autre objet. L'objet dont on hérite est appelé <em>prototype</em> et les propriétés héritées peuvent être accédées via l'objet <code>prototype</code> du constructeur. Pour plus d'informations sur le fonctionnement de l'héritage, voir la page sur <a href="/fr/docs/Web/JavaScript/Inheritance_and_the_prototype_chain">l'héritage et la chaîne de prototypes</a>.</p>
-
-<h2 id="indexing_object_properties">Indexer les propriétés d'un objet</h2>
-
-<p>Il est possible d'accéder à une propriété via son nom et via son indice (ordinal). Si on définit une propriété grâce à un nom, on accédera toujours à la valeur via le nom. De même, si on définit une propriété grâce à un indice, on y accèdera toujours via son indice.</p>
-
-<p>Cette restriction s'applique lorsqu'on crée un objet et ses propriétés via un constructeur et lorsqu'on déclare les propriétés explicitement (par exemple avec <code>maVoiture.couleur = "rouge"</code>). Si on définit une propriété d'un objet avec <code>maVoiture[5] = "25 kmh"</code>, on pourra faire référence à cette propriété grâce à <code>maVoiture[5]</code>.</p>
-
-<p>Il existe une exception à cette règle lorsqu'on manipule des objets "semblables à des tableaux" provenant d'API Web telles que l'objet <code>forms</code>. Pour ces objets semblables à des tableaux, on peut accéder à une propriété de l'objet grâce à son nom (si l'attribut <a href="/fr/docs/Web/HTML/Global_attributes#name"><code>name</code></a> est utilisé sur l'élément HTML) ou grâce à son index selon l'ordre dans le document. Ainsi, si on souhaite cibler un élément <code>&lt;form&gt;</code> du document possédant un attribut <code>name</code> qui vaut <code>monForm</code> et que cet élément est le deuxième élément du document, on pourra y accéder avec <code>document.forms[1]</code>, <code>document.forms["monForm"]</code> ou encore avec <code>document.forms.monForm</code>.</p>
-
-<h2 id="defining_properties_for_an_object_type">Définir des propriétés pour un type d'objet</h2>
-
-<p>On peut ajouter une propriété à un type précédemment défini en utilisant la propriété <code>prototype</code>. Cela permettra de définir une propriété qui sera partagée par tous les objets d'un même type plutôt qu'elle ne soit définie que pour un seul objet. Le code suivant permet d'ajouter une propriété <code>couleur</code> à tous les objets de type <code>voiture</code>. On affecte ensuite une valeur à cette propriété pour l'objet <code>voiture1</code>.</p>
-
-<pre class="brush: js">
-Voiture.prototype.couleur = null;
-voiture1.couleur = "noir";
-</pre>
-
-<p>Pour plus d'informations, voir l'article sur <a href="/fr/docs/conflicting/Web/JavaScript/Reference/Global_Objects/Function">la propriété <code>prototype</code></a> de l'objet <code>Function</code> de la <a href="/fr/docs/Web/JavaScript/Reference">référence JavaScript</a>.</p>
-
-<h2 id="defining_methods">Définir des méthodes</h2>
-
-<p>Une <em>méthode</em> est une fonction associée à un objet. Autrement dit, une méthode est une propriété d'un objet qui est une fonction. Les méthodes sont définies comme des fonctions normales et sont affectées à des propriétés d'un objet. Voir la page sur <a href="/fr/docs/Web/JavaScript/Reference/Functions/Method_definitions">les définitions de méthodes</a> pour plus d'informations. Par exemple :</p>
-
-<pre class="brush: js">
-nomObjet.nomMethode = nomFonction;
-
-let monObj = {
-  maMethode: function(params) {
-    // …faire quelque chose
-  }
-
-  // la forme suivante fonctionne aussi
-
-  monAutreMethode(params) {
-    // …faire autre chose
-  }
-};
-</pre>
-
-<p>avec <code>nomObjet</code> qui est un objet existant, <code>nomMethode</code> est le nom de la propriété à laquelle on souhaite affecter la méthode et <code>nomFonction</code> le nom de la fonction.</p>
-
-<p>On peut ensuite appeler la méthode sur l'objet :</p>
-
-<pre class="brush: js">
-object.nomMethode(parametres);
-</pre>
-
-<p>On peut définir des méthodes pour un type d'objet en incluant la définition de la méthode dans le constructeur. Par exemple, on peut définir une fonction qui mettrait en forme et qui afficherait les propriétés d'un objet <code>voiture</code>. Par exemple :</p>
-
-<pre class="brush: js">
-function afficheVoiture() {
-  let resultat = `Une belle ${this.modele}, fabriquée en ${this.annee} par ${this.fabricant}`;
-  console.log(résultat);
-}
-</pre>
-
-<p>On peut ensuite ajouter cette fonction comme méthode dans le constructeur avec cette instruction :</p>
-
-<pre class="brush: js">
-this.afficheVoiture = afficheVoiture;
-</pre>
-
-<p>La définition complète de <code>Voiture</code> serait donc :</p>
-
-<pre class="brush: js">
-function Voiture(fabricant, modele, annee, proprietaire) {
-  this.fabricant = fabricant;
-  this.modele = modele;
-  this.annee = annee;
-  this.proprietaire = proprietaire;
-  this.afficheVoiture = afficheVoiture;
-}
-</pre>
-
-<p>On pourra donc ensuite appeler la méthode <code>afficheVoiture</code> pour chaque objet de ce type :</p>
-
-<pre class="brush: js">voiture1.afficheVoiture();
-voiture2.afficheVoiture();
-</pre>
-
-<h2 id="using_this_for_object_references">Utiliser <code>this</code> pour les références aux objets</h2>
-
-<p>JavaScript possède un mot-clé spécial <code><a href="/fr/docs/Web/JavaScript/Reference/Operators/this">this</a></code>, qui peut être utilisé à l'intérieur d'une méthode pour faire référence à l'objet courant.</p>
-
-<p>Par exemple, supposons qu'on ait deux objets, <code>responsable</code> et <code>stagiaire</code>. Chaque objet possède son propre <code>nom</code>, <code>age</code> et <code>poste</code>. Dans la fonction <code>direBonjour()</code>, on remarque qu'on utilise <code>this.nom</code>. Lorsqu'on ajoute cette méthode aux deux objets, on peut alors appeler cette fonction depuis les deux objets et celle-ci affichera <code>'Bonjour, mon nom est '</code> suivi de la valeur de la propriété <code>nom</code> rattaché à l'objet indiqué.</p>
-
-<pre class="brush: js">
-const responsable = {
- nom: "Jean",
- age: 27,
- poste: "Ingénieur logiciel"
-};
-
-const stagiaire = {
- nom: "Ben",
- age: 21,
- poste: "Stagiaire ingénieur logiciel"
-};
-
-function direBonjour() {
- console.log('Bonjour, mon nom est', this.nom)
-};
-
-// on ajoute direBonjour aux deux objets
-responsable.direBonjour = direBonjour;
-stagiaire.direBonjour = direBonjour;
-
-responsable.direBonjour(); // Bonjour, mon nom est John'
-stagiaire.direBonjour();   // Bonjour, mon nom est Ben'
-</pre>
-
-<p>Ici, <code>this</code> fait référence à l'objet courant. On peut également créer une fonction <code>direMonAge()</code> qui affiche une phrase indiquant l'age.</p>
-
-<pre class="brush: js">
-function direMonAge(){
-  console.log("J'ai " + this.age + " ans.");
-};
-
-responsable.direMonAge = direMonAge;
-responsable.direMonAge(); // J'ai 27 ans.
-</pre>
-
-<h2 id="defining_getters_and_setters">Définir des accesseurs et des mutateurs (<em>getters</em> et <em>setters</em>)</h2>
-
-<p>Un <a href="/fr/docs/Web/JavaScript/Reference/Functions/get">accesseur</a> (<em>getter</em>) est une méthode qui permet de récupérer la valeur d'une propriété donnée. Un <a href="/fr/docs/Web/JavaScript/Reference/Functions/set">mutateur</a> (<em>setter</em>) est une méthode qui permet de définir la valeur d'une propriété donnée. Il est possible de définir des accesseurs et des mutateurs sur chaque objet (qu'il soit natif ou défini par l'utilisateur) qui supporte l'ajout de nouvelles propriétés.</p>
-
-<p>Les accesseurs et mutateurs peuvent être :</p>
-
-<ul>
- <li>définis avec <a href="#object_initializers">les initialisateurs d'objet</a>, ou</li>
- <li>ajoutés après la construction en utilisant une méthode pour ajouter un accesseur ou un mutateur.</li>
-</ul>
-
-<p>Lorsqu'on définit des accesseurs et des mutateurs <a href="#object_initializers">en utilisant la syntaxe littérale des initialisateurs d'objet</a>, il suffit d'ajouter un préfixe <code>get</code> devant une fonction pour un accesseur et un préfixe <code>set</code> devant une fonction pour un mutateur. La méthode pour l'accesseur ne doit pas utiliser de paramètre tandis que la méthode pour le mutateur doit utiliser un seul paramètre (la nouvelle valeur à définir). Ainsi :</p>
-
-<pre class="brush: js">
-let o = {
-  a: 7,
-  get b() {
-    return this.a + 1;
-  },
-  set c(x) {
-    this.a = x / 2;
-  }
-};
-
-console.log(o.a); // 7
-console.log(o.b); // 8 &lt;-- À ce moment, la méthode get b() est invoquée
-o.c = 50;         //   &lt;-- À ce moment, la méthode set c(x) est invoquée
-console.log(o.a); // 25
-</pre>
-
-<p>Les propriétés de l'objet <code>o</code> sont :</p>
-
-<ul>
- <li><code>o.a</code> — un nombre</li>
- <li><code>o.b</code> — un accesseur qui renvoie la valeur de <code>o.a</code> plus 1</li>
- <li><code>o.c</code> — un mutateur qui définit la valeur de <code>o.a</code> avec la moitié de la valeur passée pour <code>o.c</code></li>
-</ul>
-
-<p>On notera que les noms des fonctions pour les accesseurs et les mutateurs définis dans un initialisateur d'objet avec la forme <code>[gs]et <em>propriete</em>()</code> ne sont pas les noms des accesseurs/mutateurs eux-mêmes malgré ce que pourrait laisser croire la syntaxe.</p>
-
-<p>Les accesseurs et mutateurs peuvent également être ajoutés à un objet après sa création via la méthode <code>Object.defineProperties()</code> (ou <code>Object.defineProperty()</code>). Le premier paramètre de cette méthode est l'objet sur lequel on souhaite ajouter les fonctions. Le deuxième paramètre est un objet dont les noms des propriétés sont les noms des accesseurs et/ou des mutateurs et les valeurs de ces propriétés sont les objets qui définissent les fonctions correspondantes. Voici un exemple qui définit un accesseur et un mutateur pour obtenir un résultat équivalent à l'exemple précédent :</p>
-
-<pre class="brush: js">
-let o = { a: 0 };
-
-Object.defineProperties(o, {
- 'b': { get: function() { return this.a + 1; } },
- 'c': { set: function(x) { this.a = x / 2; } }
-});
-
-o.c = 10; // Exécute le mutateur qui affecte 10 / 2 (5) à la propriété 'a'
-console.log(o.b); // Exécute l'accesseur qui renvoie a + 1, soit 6
-</pre>
-
-<p>Le choix de l'une ou l'autre de ces formes dépend de votre style et du type de tâche à réaliser. Si vous utilisez déjà un initialisateur d'objet lors de la définition d'un prototype, vous choisirez probablement la première forme, plus concise et plus naturelle. Toutefois, si vous avez besoin d'ajouter des accesseurs/mutateurs plus tard, parce que vous n'avez pas écrit le prototype ou la définition de l'objet, seule la seconde forme sera possible. Cette dernière représente mieux la nature dynamique de JavaScript mais peut rendre la lecture et la compréhension du code plus difficiles.</p>
-
-<h2 id="deleting_properties">Supprimer des propriétés</h2>
-
-<p>Il est possible de retirer des propriétés propres (celles qui ne sont pas héritées) grâce à l'opérateur <code><a href="/fr/docs/Web/JavaScript/Reference/Operators/delete">delete</a></code>. Le code suivant montre comment retirer une propriété :</p>
-
-<pre class="brush: js">
-// On crée un nouvel objet, monObj, avec deux propriétés a et b.
-let monObj = new Object;
-monObj.a = 5;
-monObj.b = 12;
-
-// On retire la propriété a, monObj a donc uniquement la propriété b
-delete monObj.a;
-console.log("a" in monObj) // produit "false"
-</pre>
-
-<p>Il est aussi possible de supprimer une propriété de l'objet global avec <code>delete</code> si aucun mot-clé comme <code>var</code>, <code>let</code> ou <code>const</code> n'avait été utilisé :</p>
-
-<pre class="brush: js">
-g = 17;
-delete g;
-</pre>
-
-<h2 id="comparing_objects">Comparer des objets</h2>
-
-<p>En JavaScript, les objets fonctionnent par référence. Deux objets distincts ne sont jamais égaux, même s'ils ont les mêmes valeurs pour les mêmes propriétés. On aura une équivalence uniquement si on compare deux références vers un seul et même objet donné.</p>
-
-<pre class="brush: js">
-// Deux variables avec deux objets distincts
-// qui ont les mêmes propriétés
-let fruit = {nom: "pomme"};
-let fruit2 = {nom: "pomme"};
-
-fruit == fruit2  // renvoie false
-fruit === fruit2 // renvoie false</pre>
-
-<pre class="brush: js">
-// Deux variables référençant un même objet
-let fruit = {nom: "pomme"};
-let fruit2 = fruit;  // On affecte la même référence
-
-// dans ce cas fruit et fruit2 pointent vers le même objet
-fruit == fruit2  // renvoie true
-fruit === fruit2 // renvoie true
-
-fruit.nom = "raisin";
-console.log(fruit2); // affiche {nom: "raisin"} et non {nom: "pomme"}
-</pre>
-
-<p>Pour plus d'informations sur les opérateurs de comparaisons, voir <a href="/fr/docs/Web/JavaScript/Reference/Operators">cet article</a>.</p>
-
-<h2 id="see_also">Voir aussi</h2>
-
-<ul>
- <li>Pour aller plus loin, voir <a href="/fr/docs/Web/JavaScript/Guide/Details_of_the_Object_Model">les détails du modèle objet javaScript</a></li>
- <li>Pour en savoir plus sur les classes ECMAScript 2015 (une nouvelle façon de créer des objets), lire le chapitre sur les <a href="/fr/docs/Web/JavaScript/Reference/Classes">classes JavaScript</a>.</li>
-</ul>
-
-<p>{{PreviousNext("Web/JavaScript/Guide/Keyed_collections", "Web/JavaScript/Guide/Details_of_the_Object_Model")}}</p>
diff --git a/files/fr/web/javascript/guide/working_with_objects/index.md b/files/fr/web/javascript/guide/working_with_objects/index.md
new file mode 100644
index 0000000000..214902c6dd
--- /dev/null
+++ b/files/fr/web/javascript/guide/working_with_objects/index.md
@@ -0,0 +1,530 @@
+---
+title: Utiliser les objets
+slug: Web/JavaScript/Guide/Working_with_Objects
+tags:
+  - Beginner
+  - Comparing object
+  - Document
+  - Guide
+  - JavaScript
+  - Object
+  - l10n:priority
+translation_of: Web/JavaScript/Guide/Working_with_Objects
+original_slug: Web/JavaScript/Guide/Utiliser_les_objets
+---
+{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Keyed_collections", "Web/JavaScript/Guide/Details_of_the_Object_Model")}}
+
+JavaScript est conçu autour d'un paradigme simple, basé sur les objets. Un objet est un ensemble de propriétés et une propriété est une association entre un nom (aussi appelé _clé_) et une valeur. La valeur d'une propriété peut être une fonction, auquel cas la propriété peut être appelée « méthode ». En plus des objets natifs fournis par l'environnement, il est possible de construire ses propres objets. Ce chapitre aborde la manipulation d'objets, l'utilisation des propriétés, fonctions et méthodes, il explique également comment créer ses objets.
+
+## Un aperçu des objets
+
+À l'instar de nombreux autres langages de programmation, on peut comparer les objets JavaScript aux objets du monde réel.
+
+En JavaScript, un objet est une entité à part entière qui possède des propriétés et un type. Si on effectue cette comparaison avec une tasse par exemple, on pourra dire qu'une tasse est un objet avec des propriétés. Ces propriétés pourront être la couleur, la forme, le poids, le matériau qui la constitue, etc. De la même façon, un objet JavaScript possède des propriétés, chacune définissant une caractéristique.
+
+## Les objets et les propriétés
+
+Un objet JavaScript possède donc plusieurs propriétés qui lui sont associées. Une propriété peut être vue comme une variable attachée à l'objet. Les propriétés d'un objet sont des variables tout ce qu'il y a de plus classiques, exception faite qu'elles sont attachées à des objets. Les propriétés d'un objet représentent ses caractéristiques et on peut y accéder avec une notation utilisant le point « . », de la façon suivante :
+
+```js
+nomObjet.nomPropriete
+```
+
+Comme pour les variables JavaScript en général, le nom de l'objet (qui peut être une variable) et le nom des propriétés sont sensibles à la casse (une lettre minuscule ne sera pas équivalente à une lettre majuscule). On peut définir une propriété en lui affectant une valeur. Ainsi, si on crée un objet `maVoiture` et qu'on lui donne les propriétés `fabricant`, `modèle`, et `année` :
+
+```js
+let maVoiture = new Object();
+maVoiture.fabricant = "Ford";
+maVoiture.modele = "Mustang";
+maVoiture.annee = 1969;
+```
+
+L'exemple précédent peut également s'écrire avec **[la syntaxe littérale pour initialiser les objets](#object_initializers)** : on fournit une liste, délimitée par des virgules, qui contient des paires de noms et de valeurs décrivant les propriétés et où le tout est encadré d'accolades (`{}`) :
+
+```js
+let maVoiture = {
+  make: 'Ford',
+  model: 'Mustang',
+  year: 1969
+};
+```
+
+Les propriétés d'un objet qui n'ont pas été affectées auront la valeur [`undefined`](/fr/docs/Web/JavaScript/Reference/Global_Objects/undefined) (et non [`null`](/fr/docs/Web/JavaScript/Reference/Global_Objects/null)).
+
+```js
+maVoiture.color; // undefined
+```
+
+On peut aussi définir ou accéder à des propriétés JavaScript en utilisant une notation avec les crochets (voir la page sur [les accesseurs de propriétés](/fr/docs/Web/JavaScript/Reference/Operators/Property_Accessors) pour plus de détails). Les objets sont parfois appelés « tableaux associatifs ». Cela peut se comprendre, car chaque propriété est associée avec une chaîne de caractères qui permet d'y accéder. Ainsi, par exemple, on peut accéder aux propriétés de l'objet `maVoiture` de la façon suivante :
+
+```js
+maVoiture["fabricant"] = "Ford";
+maVoiture["modèle"] = "Mustang";
+maVoiture["année"] = 1969;
+```
+
+Le nom d'une propriété d'un objet peut être n'importe quelle chaîne JavaScript valide (ou n'importe quelle valeur qui puisse être convertie en une chaîne de caractères), y compris la chaîne vide. Cependant, n'importe quel nom de propriété qui n'est pas un identifiant valide (par exemple si le nom d'une propriété contient un tiret, un espace ou débute par un chiffre) devra être utilisé avec la notation à crochets. Cette notation s'avère également utile quand les noms des propriétés sont déterminés de façon dynamique (c'est-à-dire qu'on ne sait pas le nom de la propriété avant l'exécution). Par exemple :
+
+```js
+// on crée quatre variables avec une même instruction
+let monObj = new Object();
+let str = "maChaîne";
+let rand = Math.random();
+let obj = new Object();
+
+monObj.type              = "Syntaxe point";
+monObj["date created"]   = "Chaîne avec un espace";
+monObj[str]              = "Une valeur qui est une chaîne";
+monObj[rand]             = "Nombre aléatoire";
+monObj[obj]              = "Objet";
+monObj[""]               = "Une chaîne vide";
+
+console.log(monObj);
+```
+
+On notera que les valeurs utilisées entre les crochets sont automatiquement converties en chaînes de caractères grâce à la méthode [`toString()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Object/toString) sauf si ces valeurs sont des symboles (cf. [`Symbol`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Symbol)). En effet, les noms des propriétés pour les objets JavaScript peuvent être des chaînes de caractères ou des symboles. Ainsi, dans l'exemple précédent, lorsqu'on ajoute la clé `obj` sur `monObj`, le moteur JavaScript appelle la méthode `obj.toString()` et utilise la chaîne de caractères renvoyée par cette méthode comme nom pour la propriété.
+
+On peut également accéder aux propriétés d'un objet en utilisant une valeur qui est une chaîne de caractères enregistrée dans une variable :
+
+```js
+let nomPropriété = "fabricant";
+maVoiture[nomPropriété] = "Ford";
+
+nomPropriété = "modèle";
+maVoiture[nomPropriété] = "Mustang";
+```
+
+La notation avec les crochets peut être utilisée dans une boucle [`for...in`](/fr/docs/Web/JavaScript/Reference/Statements/for...in) afin de parcourir les propriétés énumérables d'un objet. Pour illustrer comment cela fonctionne, on définit la fonction suivante qui affiche les propriétés d'un objet qu'on lui a passé en argument avec le nom associé :
+
+```js
+function afficherProps(obj, nomObjet) {
+  let resultat = "";
+  for (let i in obj) {
+    if (obj.hasOwnProperty(i)) {
+        resultat += `${nomObjet}.${i} = ${obj[i]}\n`;
+    }
+  }
+  return resultat;
+}
+```
+
+Si on appelle la fonction avec `afficherProps(maVoiture, "maVoiture")`, cela affichera le contenu suivant dans la console :
+
+```js
+maVoiture.fabricant = Ford
+maVoiture.modele = Mustang
+maVoiture.annee = 1969
+```
+
+## Lister les propriétés d'un objet
+
+À partir d'ECMAScript 5, il existe trois méthodes natives pour lister/parcourir les propriétés d'un objet :
+
+- Les boucles [`for...in`](/fr/docs/Web/JavaScript/Reference/Statements/for...in) qui permettent de parcourir l'ensemble des propriétés énumérables d'un objet et de sa chaîne de prototypes.
+- [`Object.keys(o)`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Object/keys) qui permet de renvoyer un tableau contenant les noms (clés ou _keys_) des propriétés propres (celles qui ne sont pas héritées via la chaîne de prototypes) d'un objet `o` pour les propriétés énumérables.
+- [`Object.getOwnPropertyNames(o)`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyNames) qui permet de renvoyer un tableau contenant les noms des propriétés propres (énumérables ou non) d'un objet `o`.
+
+Avant ECMAScript 5, il n'existait aucune méthode native pour lister l'ensemble des propriétés d'un objet. Cependant, on pouvait utiliser le code suivant pour y parvenir :
+
+```js
+function listerToutesLesProprietes(o){
+  let objectToInspect;
+  let resultat = [];
+
+  for(objectToInspect = o;
+      objectToInspect !== null;
+      objectToInspect = Object.getPrototypeOf(objectToInspect)){
+    resultat = resultat.concat(Object.getOwnPropertyNames(objectToInspect));
+  }
+  return resultat;
+}
+```
+
+Cela peut être utile pour révéler les propriétés « cachées » où leur nom est réutilisé dans la chaîne de prototypes. Pour lister les propriétés accessibles, il suffit de retirer les duplicatas du tableau.
+
+## Créer de nouveaux objets
+
+Un environnement JavaScript possède certains objets natifs prédéfinis. En plus de ces objets, il est possible de créer ses propres objets. Pour cela, on peut utiliser un [initialisateur d'objet](/fr/docs/Web/JavaScript/Reference/Operators/Object_initializer). On peut aussi créer un constructeur puis instancier un objet avec cette fonction en utilisant l'opérateur `new`.
+
+### Utiliser les initialisateurs d'objets
+
+On peut créer des objets avec une fonction qui est un constructeur, mais on peut aussi créer des objets avec des [initialisateurs d'objets](/fr/docs/Web/JavaScript/Reference/Operators/Object_initializer). On appelle parfois cette syntaxe la notation _littérale_.
+
+La syntaxe utilisée avec les initialisateurs d'objets est la suivante :
+
+```js
+let obj = { 
+  propriete_1:   valeur_1,   // propriete_# peut être un identifiant
+            2:   valeur_2,   // ou un nombre
+            // ...,
+  "propriete n": valeur_n
+  }; // ou une chaîne
+```
+
+où on a `obj` le nom de l'objet qu'on souhaite créer et chaque `propriete_i` un identifiant (que ce soit un nom, un nombre ou une chaîne de caractères) et chaque `valeur_i` une expression dont la valeur sera affectée à la propriété `propriete_i`. S'il n'est pas nécessaire d'utiliser l'objet `obj` par la suite, il n'est pas nécessaire de réaliser l'affectation à une variable (attention alors à l'encadrer dans des parenthèses pour que le littéral objet soit bien interprété comme une instruction et non pas comme un bloc.)
+
+Les initialisateurs d'objets sont des expressions et chaque initialisateur entraîne la création d'un nouvel objet dans l'instruction pour laquelle il est exécuté. Des initialisateurs d'objets identiques créeront des objets distincts qui ne seront pas équivalents. Les objets sont créés de la même façon qu'avec `new Object()`, les objets créés à partir d'une expression littérale seront des instances d'`Object`.
+
+L'instruction suivante crée un objet et l'affecte à une variable `x` si et seulement si l'expression `cond` est vraie :
+
+```js
+if (cond) let x = {emplacement: "le monde"};
+```
+
+Dans l'exemple suivant, on crée un objet `maHonda` avec trois propriétés. La propriété `moteur` est également un objet avec ses propres propriétés.
+
+```js
+let maHonda = {
+  couleur: "rouge",
+  roue: 4,
+  moteur: {
+    cylindres: 4,
+    taille: 2.2
+  }
+};
+```
+
+De la même façon, on pourra utiliser des initialisateurs pour créer des tableaux. Pour plus d'informations à ce sujet, voir [les littéraux de tableaux](/fr/docs/Web/JavaScript/Guide/Grammar_and_types#les_litt.c3.a9raux_de_tableaux).
+
+### Utiliser les constructeurs
+
+On peut aussi créer des objets d'une autre façon, en suivant deux étapes :
+
+1.  On définit une fonction qui sera un constructeur définissant le type de l'objet. La convention, pour nommer les constructeurs, est d'utiliser une majuscule comme première lettre pour l'identifiant de la fonction.
+2.  On crée une instance de l'objet avec `new`.
+
+Pour définir le type d'un objet, on crée une fonction qui définit le nom de ce type et les propriétés et méthodes des instances. Ainsi, si on souhaite créer un type d'objet pour représenter des voitures, on pourra nommer ce type `voiture`, et il pourra avoir des propriétés pour le fabricant, le modèle et l'année. Pour ce faire, on pourra écrire la fonction suivante :
+
+```js
+function Voiture(fabricant, modele, annee) {
+  this.fabricant = fabricant;
+  this.modele = modele;
+  this.annee = annee;
+}
+```
+
+On voit ici qu'on utilise le mot-clé `this` pour affecter des valeurs aux propriétés d'un objet en fonction des valeurs passées en arguments de la fonction.
+
+On peut désormais créer un objet `maVoiture` de la façon suivante :
+
+```js
+let maVoiture = new Voiture("Eagle", "Talon TSi", 1993);
+```
+
+Cette instruction crée un objet `maVoiture` et lui affecte les valeurs fournies pour ses propriétés. On obtient donc `maVoiture.fabricant` qui sera la chaîne de caractères "Eagle", `maVoiture.annee` qui sera l'entier 1993, et ainsi de suite.
+
+Grâce à ce constructeur, on peut ensuite créer autant d'objets `Voiture` que nécessaire. Par exemple :
+
+```js
+let voitureMorgan = new Voiture("Audi", "A3", 2005);
+let voitureMax = new Voiture("Mazda", "Miata", 1990);
+```
+
+Un objet peut avoir une propriété qui est elle-même un objet. Ainsi, si on définit un type d'objet `personne` de cette façon :
+
+```js
+function Personne(nom, age, sexe) {
+  this.nom = nom;
+  this.age = age;
+  this.sexe = sexe;
+}
+```
+
+et qu'on instancie deux nouveaux objets `personne` avec
+
+```js
+let max = new Personne("Max Gun", 33, "M");
+let morgan = new Personne("Morgan Sousbrouille", 39, "M");
+```
+
+On pourra réécrire la fonction de définition pour le type `Voiture` pour inclure une propriété `proprietaire` qui est représentée par un objet `personne` :
+
+```js
+function Voiture(fabricant, modele, annee, proprietaire) {
+  this.fabricant = fabricant;
+  this.modele = modele;
+  this.annee = annee;
+  this.proprietaire = proprietaire;
+}
+```
+
+Pour instancier des nouveaux objets, on pourra donc utiliser :
+
+```js
+let voiture1 = new Voiture("Mazda", "Miata", 1993, max);
+let voiture2 = new Voiture("Audi", "A3", 2005, morgan);
+```
+
+On notera que le dernier argument n'est pas une chaîne de caractères ou une valeur numérique mais bien un objet. Les objets `max` et `morgan` sont passés en arguments pour représenter les propriétaires. Ainsi, si on veut obtenir le nom du propriétaire pour `voiture2`, on peut accéder à la propriété de la façon suivante :
+
+```js
+voiture2.proprietaire.nom
+```
+
+Il est toujours possible d'ajouter une propriété à un objet défini précédemment. Par exemple, on peut ajouter une propriété à l'objet `voiture1` avec l'instruction :
+
+```js
+voiture1.couleur = "noir";
+```
+
+Ici, on ajoute une propriété `couleur` à `voiture1`, et on lui affecte une valeur "noir". Cependant, cela n'affecte pas les autres objets `voiture`. Pour ajouter une nouvelle propriété à tous les objets, il faudra ajouter la propriété au constructeur `voiture`.
+
+### Utiliser la méthode `Object.create()`
+
+Les objets peuvent également être créés en utilisant la méthode [`Object.create()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Object/create). Cette méthode peut s'avérer très utile, car elle permet de choisir le prototype pour l'objet qu'on souhaite créer, sans avoir à définir un constructeur.
+
+```js
+// Propriétés pour animal et encapsulation des méthodes
+let Animal = {
+  type: "Invertébrés",        // Valeur par défaut  value of properties
+  afficherType : function() {  // Une méthode pour afficher le type Animal
+    console.log(this.type);
+  }
+}
+
+// On crée un nouveau type d'animal, animal1
+let animal1 = Object.create(Animal);
+animal1.afficherType(); // affichera Invertébrés
+
+// On crée un type d'animal "Poisson"
+let poisson = Object.create(Animal);
+poisson.type = "Poisson";
+poisson.afficherType(); // affichera Poisson
+```
+
+## L'héritage
+
+Tous les objets JavaScript héritent d'un autre objet. L'objet dont on hérite est appelé _prototype_ et les propriétés héritées peuvent être accédées via l'objet `prototype` du constructeur. Pour plus d'informations sur le fonctionnement de l'héritage, voir la page sur [l'héritage et la chaîne de prototypes](/fr/docs/Web/JavaScript/Inheritance_and_the_prototype_chain).
+
+## Indexer les propriétés d'un objet
+
+Il est possible d'accéder à une propriété via son nom et via son indice (ordinal). Si on définit une propriété grâce à un nom, on accédera toujours à la valeur via le nom. De même, si on définit une propriété grâce à un indice, on y accèdera toujours via son indice.
+
+Cette restriction s'applique lorsqu'on crée un objet et ses propriétés via un constructeur et lorsqu'on déclare les propriétés explicitement (par exemple avec `maVoiture.couleur = "rouge"`). Si on définit une propriété d'un objet avec `maVoiture[5] = "25 kmh"`, on pourra faire référence à cette propriété grâce à `maVoiture[5]`.
+
+Il existe une exception à cette règle lorsqu'on manipule des objets "semblables à des tableaux" provenant d'API Web telles que l'objet `forms`. Pour ces objets semblables à des tableaux, on peut accéder à une propriété de l'objet grâce à son nom (si l'attribut [`name`](/fr/docs/Web/HTML/Global_attributes#name) est utilisé sur l'élément HTML) ou grâce à son index selon l'ordre dans le document. Ainsi, si on souhaite cibler un élément `<form>` du document possédant un attribut `name` qui vaut `monForm` et que cet élément est le deuxième élément du document, on pourra y accéder avec `document.forms[1]`, `document.forms["monForm"]` ou encore avec `document.forms.monForm`.
+
+## Définir des propriétés pour un type d'objet
+
+On peut ajouter une propriété à un type précédemment défini en utilisant la propriété `prototype`. Cela permettra de définir une propriété qui sera partagée par tous les objets d'un même type plutôt qu'elle ne soit définie que pour un seul objet. Le code suivant permet d'ajouter une propriété `couleur` à tous les objets de type `voiture`. On affecte ensuite une valeur à cette propriété pour l'objet `voiture1`.
+
+```js
+Voiture.prototype.couleur = null;
+voiture1.couleur = "noir";
+```
+
+Pour plus d'informations, voir l'article sur [la propriété `prototype`](/fr/docs/conflicting/Web/JavaScript/Reference/Global_Objects/Function) de l'objet `Function` de la [référence JavaScript](/fr/docs/Web/JavaScript/Reference).
+
+## Définir des méthodes
+
+Une _méthode_ est une fonction associée à un objet. Autrement dit, une méthode est une propriété d'un objet qui est une fonction. Les méthodes sont définies comme des fonctions normales et sont affectées à des propriétés d'un objet. Voir la page sur [les définitions de méthodes](/fr/docs/Web/JavaScript/Reference/Functions/Method_definitions) pour plus d'informations. Par exemple :
+
+```js
+nomObjet.nomMethode = nomFonction;
+
+let monObj = {
+  maMethode: function(params) {
+    // …faire quelque chose
+  }
+
+  // la forme suivante fonctionne aussi
+
+  monAutreMethode(params) {
+    // …faire autre chose
+  }
+};
+```
+
+avec `nomObjet` qui est un objet existant, `nomMethode` est le nom de la propriété à laquelle on souhaite affecter la méthode et `nomFonction` le nom de la fonction.
+
+On peut ensuite appeler la méthode sur l'objet :
+
+```js
+object.nomMethode(parametres);
+```
+
+On peut définir des méthodes pour un type d'objet en incluant la définition de la méthode dans le constructeur. Par exemple, on peut définir une fonction qui mettrait en forme et qui afficherait les propriétés d'un objet `voiture`. Par exemple :
+
+```js
+function afficheVoiture() {
+  let resultat = `Une belle ${this.modele}, fabriquée en ${this.annee} par ${this.fabricant}`;
+  console.log(résultat);
+}
+```
+
+On peut ensuite ajouter cette fonction comme méthode dans le constructeur avec cette instruction :
+
+```js
+this.afficheVoiture = afficheVoiture;
+```
+
+La définition complète de `Voiture` serait donc :
+
+```js
+function Voiture(fabricant, modele, annee, proprietaire) {
+  this.fabricant = fabricant;
+  this.modele = modele;
+  this.annee = annee;
+  this.proprietaire = proprietaire;
+  this.afficheVoiture = afficheVoiture;
+}
+```
+
+On pourra donc ensuite appeler la méthode `afficheVoiture` pour chaque objet de ce type :
+
+```js
+voiture1.afficheVoiture();
+voiture2.afficheVoiture();
+```
+
+## Utiliser `this` pour les références aux objets
+
+JavaScript possède un mot-clé spécial [`this`](/fr/docs/Web/JavaScript/Reference/Operators/this), qui peut être utilisé à l'intérieur d'une méthode pour faire référence à l'objet courant.
+
+Par exemple, supposons qu'on ait deux objets, `responsable` et `stagiaire`. Chaque objet possède son propre `nom`, `age` et `poste`. Dans la fonction `direBonjour()`, on remarque qu'on utilise `this.nom`. Lorsqu'on ajoute cette méthode aux deux objets, on peut alors appeler cette fonction depuis les deux objets et celle-ci affichera `'Bonjour, mon nom est '` suivi de la valeur de la propriété `nom` rattaché à l'objet indiqué.
+
+```js
+const responsable = {
+ nom: "Jean",
+ age: 27,
+ poste: "Ingénieur logiciel"
+};
+
+const stagiaire = {
+ nom: "Ben",
+ age: 21,
+ poste: "Stagiaire ingénieur logiciel"
+};
+
+function direBonjour() {
+ console.log('Bonjour, mon nom est', this.nom)
+};
+
+// on ajoute direBonjour aux deux objets
+responsable.direBonjour = direBonjour;
+stagiaire.direBonjour = direBonjour;
+
+responsable.direBonjour(); // Bonjour, mon nom est John'
+stagiaire.direBonjour();   // Bonjour, mon nom est Ben'
+```
+
+Ici, `this` fait référence à l'objet courant. On peut également créer une fonction `direMonAge()` qui affiche une phrase indiquant l'age.
+
+```js
+function direMonAge(){
+  console.log("J'ai " + this.age + " ans.");
+};
+
+responsable.direMonAge = direMonAge;
+responsable.direMonAge(); // J'ai 27 ans.
+```
+
+## Définir des accesseurs et des mutateurs (_getters_ et _setters_)
+
+Un [accesseur](/fr/docs/Web/JavaScript/Reference/Functions/get) (_getter_) est une méthode qui permet de récupérer la valeur d'une propriété donnée. Un [mutateur](/fr/docs/Web/JavaScript/Reference/Functions/set) (_setter_) est une méthode qui permet de définir la valeur d'une propriété donnée. Il est possible de définir des accesseurs et des mutateurs sur chaque objet (qu'il soit natif ou défini par l'utilisateur) qui supporte l'ajout de nouvelles propriétés.
+
+Les accesseurs et mutateurs peuvent être :
+
+- définis avec [les initialisateurs d'objet](#object_initializers), ou
+- ajoutés après la construction en utilisant une méthode pour ajouter un accesseur ou un mutateur.
+
+Lorsqu'on définit des accesseurs et des mutateurs [en utilisant la syntaxe littérale des initialisateurs d'objet](#object_initializers), il suffit d'ajouter un préfixe `get` devant une fonction pour un accesseur et un préfixe `set` devant une fonction pour un mutateur. La méthode pour l'accesseur ne doit pas utiliser de paramètre tandis que la méthode pour le mutateur doit utiliser un seul paramètre (la nouvelle valeur à définir). Ainsi :
+
+```js
+let o = {
+  a: 7,
+  get b() {
+    return this.a + 1;
+  },
+  set c(x) {
+    this.a = x / 2;
+  }
+};
+
+console.log(o.a); // 7
+console.log(o.b); // 8 <-- À ce moment, la méthode get b() est invoquée
+o.c = 50;         //   <-- À ce moment, la méthode set c(x) est invoquée
+console.log(o.a); // 25
+```
+
+Les propriétés de l'objet `o` sont :
+
+- `o.a` — un nombre
+- `o.b` — un accesseur qui renvoie la valeur de `o.a` plus 1
+- `o.c` — un mutateur qui définit la valeur de `o.a` avec la moitié de la valeur passée pour `o.c`
+
+On notera que les noms des fonctions pour les accesseurs et les mutateurs définis dans un initialisateur d'objet avec la forme `[gs]et propriete()` ne sont pas les noms des accesseurs/mutateurs eux-mêmes malgré ce que pourrait laisser croire la syntaxe.
+
+Les accesseurs et mutateurs peuvent également être ajoutés à un objet après sa création via la méthode `Object.defineProperties()` (ou `Object.defineProperty()`). Le premier paramètre de cette méthode est l'objet sur lequel on souhaite ajouter les fonctions. Le deuxième paramètre est un objet dont les noms des propriétés sont les noms des accesseurs et/ou des mutateurs et les valeurs de ces propriétés sont les objets qui définissent les fonctions correspondantes. Voici un exemple qui définit un accesseur et un mutateur pour obtenir un résultat équivalent à l'exemple précédent :
+
+```js
+let o = { a: 0 };
+
+Object.defineProperties(o, {
+ 'b': { get: function() { return this.a + 1; } },
+ 'c': { set: function(x) { this.a = x / 2; } }
+});
+
+o.c = 10; // Exécute le mutateur qui affecte 10 / 2 (5) à la propriété 'a'
+console.log(o.b); // Exécute l'accesseur qui renvoie a + 1, soit 6
+```
+
+Le choix de l'une ou l'autre de ces formes dépend de votre style et du type de tâche à réaliser. Si vous utilisez déjà un initialisateur d'objet lors de la définition d'un prototype, vous choisirez probablement la première forme, plus concise et plus naturelle. Toutefois, si vous avez besoin d'ajouter des accesseurs/mutateurs plus tard, parce que vous n'avez pas écrit le prototype ou la définition de l'objet, seule la seconde forme sera possible. Cette dernière représente mieux la nature dynamique de JavaScript mais peut rendre la lecture et la compréhension du code plus difficiles.
+
+## Supprimer des propriétés
+
+Il est possible de retirer des propriétés propres (celles qui ne sont pas héritées) grâce à l'opérateur [`delete`](/fr/docs/Web/JavaScript/Reference/Operators/delete). Le code suivant montre comment retirer une propriété :
+
+```js
+// On crée un nouvel objet, monObj, avec deux propriétés a et b.
+let monObj = new Object;
+monObj.a = 5;
+monObj.b = 12;
+
+// On retire la propriété a, monObj a donc uniquement la propriété b
+delete monObj.a;
+console.log("a" in monObj) // produit "false"
+```
+
+Il est aussi possible de supprimer une propriété de l'objet global avec `delete` si aucun mot-clé comme `var`, `let` ou `const` n'avait été utilisé :
+
+```js
+g = 17;
+delete g;
+```
+
+## Comparer des objets
+
+En JavaScript, les objets fonctionnent par référence. Deux objets distincts ne sont jamais égaux, même s'ils ont les mêmes valeurs pour les mêmes propriétés. On aura une équivalence uniquement si on compare deux références vers un seul et même objet donné.
+
+```js
+// Deux variables avec deux objets distincts
+// qui ont les mêmes propriétés
+let fruit = {nom: "pomme"};
+let fruit2 = {nom: "pomme"};
+
+fruit == fruit2  // renvoie false
+fruit === fruit2 // renvoie false
+```
+
+```js
+// Deux variables référençant un même objet
+let fruit = {nom: "pomme"};
+let fruit2 = fruit;  // On affecte la même référence
+
+// dans ce cas fruit et fruit2 pointent vers le même objet
+fruit == fruit2  // renvoie true
+fruit === fruit2 // renvoie true
+
+fruit.nom = "raisin";
+console.log(fruit2); // affiche {nom: "raisin"} et non {nom: "pomme"}
+```
+
+Pour plus d'informations sur les opérateurs de comparaisons, voir [cet article](/fr/docs/Web/JavaScript/Reference/Operators).
+
+## Voir aussi
+
+- Pour aller plus loin, voir [les détails du modèle objet javaScript](/fr/docs/Web/JavaScript/Guide/Details_of_the_Object_Model)
+- Pour en savoir plus sur les classes ECMAScript 2015 (une nouvelle façon de créer des objets), lire le chapitre sur les [classes JavaScript](/fr/docs/Web/JavaScript/Reference/Classes).
+
+{{PreviousNext("Web/JavaScript/Guide/Keyed_collections", "Web/JavaScript/Guide/Details_of_the_Object_Model")}}
diff --git a/files/fr/web/javascript/index.html b/files/fr/web/javascript/index.html
deleted file mode 100644
index bb77718a93..0000000000
--- a/files/fr/web/javascript/index.html
+++ /dev/null
@@ -1,129 +0,0 @@
----
-title: JavaScript
-slug: Web/JavaScript
-tags:
-  - JavaScript
-  - Landing
-  - Landing page
-  - Learn
-translation_of: Web/JavaScript
----
-<div>{{JsSidebar}}</div>
-
-<p><strong>JavaScript</strong> (souvent abrégé en « JS ») est un langage de script léger, orienté objet, principalement connu comme le langage de script des pages web. Mais il est aussi <a href="https://fr.wikipedia.org/wiki/JavaScript#Autres_utilisations">utilisé dans de nombreux environnements extérieurs aux navigateurs web</a> tels que <a href="https://nodejs.org/">Node.js</a>, <a href="https://couchdb.apache.org/">Apache CouchDB</a> voire <a href="https://www.adobe.com/devnet/acrobat/javascript.html">Adobe Acrobat</a>. Le code JavaScript est interprété ou compilé à la volée (<a href="https://fr.wikipedia.org/wiki/Compilation_%C3%A0_la_vol%C3%A9e">JIT</a>). C'est un langage à objets utilisant le concept de <a href="https://fr.wikipedia.org/wiki/Programmation_orient%C3%A9e_prototype">prototype</a>, disposant d'un typage faible et dynamique qui permet de programmer suivant plusieurs paradigmes de programmation : fonctionnelle, impérative et orientée objet. <a href="/fr/docs/Web/JavaScript/About_JavaScript">Apprenez-en plus sur JavaScript</a>.</p>
-
-<p>Cette section de MDN est dédiée au langage JavaScript. Pour des informations sur l'utilisation de JavaScript avec les <a href="/fr/docs/Glossary/API">API</a> spécifiques des navigateurs web pour les pages web, veuillez consulter les sections sur les <a href="/fr/docs/Web/API">API Web</a> (<em>Web API</em> en anglais) et le <a href="/fr/docs/Web/API/Document_Object_Model">DOM</a>.</p>
-
-<p>Le standard qui spécifie JavaScript est <a href="/fr/docs/Web/JavaScript/Language_Resources">ECMAScript</a>. En 2012, tous les navigateurs modernes supportent complètement ECMAScript 5.1. Les anciens navigateurs supportent au minimum ECMAScript 3. Une sixième version majeure du standard a été finalisée et publiée le 17 juin 2015. Cette version s'intitule officiellement ECMAScript 2015 mais est encore fréquemment appelée ECMAScript 6 ou ES6. Étant donné que les standards ECMAScript sont désormais édités sur un rythme annuel, cette documentation fait référence à la dernière version en cours de rédaction, actuellement c'est <a href="https://tc39.github.io/ecma262/">ECMAScript 2020</a>.</p>
-
-<p>JavaScript ne doit pas être confondu avec le <a href="https://fr.wikipedia.org/wiki/Java_%28langage%29">langage de programmation Java</a>. Java et JavaScript sont deux marques déposées par Oracle dans de nombreux pays mais ces deux langages de programmation ont chacun une syntaxe, une sémantique et des usages différents.</p>
-
-<div class="callout">
-  <h4 id="Looking_to_become_a_front-end_web_developer">Vous cherchez à devenir un développeur web front-end ?</h4>
-  <p>Nous avons élaboré un cours qui comprend toutes les informations essentielles dont vous avez besoin pour atteindre votre objectif.</p>
-  <p><a href="/fr/docs/Learn/Front-end_web_developer">Commencer</a></p>
-</div>
-
-<h2 id="Tutorials">Tutoriels</h2>
-
-<p>Apprenez comment programmer en JavaScript.</p>
-
-<h3 id="For_complete_beginners">Ressources pour commencer</h3>
-
-<p>Si vous souhaitez apprendre JavaScript et que vous débutez en programmation ou en JavaScript, <a href="/fr/docs/Learn/JavaScript">la section JavaScript de la zone d'apprentissage de MDN (<em>learning area</em>)</a> est le meilleur endroit où commencer. Cette section contient les modules suivants :</p>
-
-<dl>
-  <dt><a href="/fr/docs/Learn/JavaScript/First_steps">Les premiers pas en JavaScript</a></dt>
-  <dd>Cet ensemble de chapitres répond à des questions telles que « qu'est-ce que JavaScript ? », « à quoi ressemble-t-il ? », « que puis-je faire avec ? » et présente des éléments clés du langage tels que les variables, les chaînes de caractères, les nombres et les tableaux.</dd>
-  <dt><a href="/fr/docs/Learn/JavaScript/Building_blocks">Les principaux blocs de JavaScript</a></dt>
-  <dd>On poursuit ici la présentation des fonctionnalités importantes de JavaScript, notamment celle des blocs de codes fréquemment utilisés comme les instructions conditionnelles, les boucles, les fonctions et les évènements.</dd>
-  <dt><a href="/fr/docs/Learn/JavaScript/Objects">Une introduction aux objets JavaScript</a></dt>
-  <dd>JavaScript est un langage de programmation « orienté objet » et ce concept est primordial pour utiliser JavaScript au mieux, écrire du code plus efficace et comprendre son fonctionnement. Ce module présente les bases de ces concepts.</dd>
-  <dt><a href="/fr/docs/Learn/JavaScript/Asynchronous">La programmation asynchrone en JavaScript</a></dt>
-  <dd>Dans cet article, on aborde les fonctionnalités asynchrones de JavaScript, en quoi elles sont importantes et la façon dont elles peuvent être utilisées lors d'opérations bloquantes comme la récupération de ressources provenant d'un serveur.</dd>
-  <dt><a href="/fr/docs/Learn/JavaScript/Client-side_web_APIs">Les API Web utilisées côté client</a></dt>
-  <dd>Lorsqu'on écrit du JavaScript pour un site web ou une application, il est rapidement nécessaire de manipuler les API : des interfaces qui permettent de manipuler différents aspects du navigateur, des données provenant d'autres sites ou services, etc. Dans ce module, nous verrons ce que sont les API, et comment utiliser les API les plus fréquemment utilisées.</dd>
-</dl>
-
-<h3 id="JavaScript_guide">Guide JavaScript</h3>
-
-<dl>
-  <dt><a href="/fr/docs/Web/JavaScript/Guide">Guide JavaScript</a></dt>
-  <dd>Un guide détaillé de JavaScript, destiné aux personnes qui ont déjà développé en JavaScript ou avec un autre langage.</dd>
-</dl>
-
-<h3 id="Intermediate">Niveau intermédiaire</h3>
-
-<dl>
-  <dt><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks">Comprendre les <i>frameworks</i> JavaScript côté client</a></dt>
-  <dd>Les <i>frameworks</i> JavaScript font partie de l'écosystème du développement web côté client. Les outils qu'ils fournissent permettent de construire des applications dynamiques sur des bases robustes. Dans ce module, on présente les notions principales de leur fonctionnement et comment ces outils peuvent rejoindre votre panoplie. Des tutoriels sur les frameworks les plus répandus suivront cet article.</dd>
-  <dt><a href="/fr/docs/Web/JavaScript/A_re-introduction_to_JavaScript">Une réintroduction à JavaScript</a></dt>
-  <dd>Un aperçu pour ceux qui <em>pensent</em> s'y connaître en JavaScript.</dd>
-  <dt><a href="/fr/docs/Web/JavaScript/Data_structures">Structures de données JavaScript</a></dt>
-  <dd>Aperçu des structures de données disponibles en JavaScript.</dd>
-  <dt><a href="/fr/docs/Web/JavaScript/Equality_comparisons_and_sameness">Égalité, comparaison et similarité</a></dt>
-  <dd>JavaScript propose trois opérations de comparaison de valeurs différentes : l'égalité stricte à l'aide de <code>===</code>, l'égalité souple à l'aide de <code>==</code> et la méthode <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Object/is"><code>Object.is()</code></a>.</dd>
-  <dt><a href="/fr/docs/Web/JavaScript/Closures">Closures</a></dt>
-  <dd>
-  <p>Une <i>closure</i> est la combinaison d'une fonction et de l'environnement lexical dans lequel cette fonction a été déclarée.</p>
-  </dd>
-</dl>
-
-<h3 id="Advanced">Niveau avancé</h3>
-
-<dl>
-  <dt><a href="/fr/docs/Web/JavaScript/Inheritance_and_the_prototype_chain">Héritage et chaîne de prototypes</a></dt>
-  <dd>Cette page explique l'héritage à base de prototype, un concept souvent incompris et sous-estimé.</dd>
-  <dt><a href="/fr/docs/Web/JavaScript/Reference/Strict_mode">Le mode strict</a></dt>
-  <dd>Une variante plus restreinte de JavaScript (par exemple, on ne peut pas utiliser de variable avant de l'avoir définie). Elle permet d'obtenir de meilleures performances et de faciliter le débogage.</dd>
-  <dt><a href="/fr/docs/Web/JavaScript/Typed_arrays">Les tableaux typés en JavaScript</a></dt>
-  <dd>Les tableaux typés permettent d'accéder à des données binaires brutes, de façon organisée.</dd>
-  <dt><a href="/fr/docs/Web/JavaScript/Memory_Management">La gestion de la mémoire en JavaScript</a></dt>
-  <dd>Cet article décrit le cycle de vie des objets et de la mémoire en JavaScript, ainsi que le mécanisme du ramasse-miettes.</dd>
-  <dt><a href="/fr/docs/Web/JavaScript/EventLoop">Gestion de la concurrence et boucle des événements</a></dt>
-  <dd>Le modèle de concurrence utilisé par JavaScript est basé sur une « boucle d'événements »</dd>
-</dl>
-
-<h2 id="Reference">Référence</h2>
-
-<p>Parcourez la documentation complète de la <a href="/fr/docs/Web/JavaScript/Reference">référence JavaScript</a>.</p>
-
-<dl>
-  <dt><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects">Les objets standard</a></dt>
-  <dd>Apprenez à connaître les objets natifs standard tels que <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Array"><code>Array</code></a>, <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Boolean"><code>Boolean</code></a>, <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Date"><code>Date</code></a>, <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Error"><code>Error</code></a>, <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Function"><code>Function</code></a>, <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/JSON"><code>JSON</code></a>, <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Math"><code>Math</code></a>, <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Number"><code>Number</code></a>, <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Object"><code>Object</code></a>, <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/RegExp"><code>RegExp</code></a>, <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/String"><code>String</code></a>, <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Map"><code>Map</code></a>, <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Set"><code>Set</code></a>, <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/WeakMap"><code>WeakMap</code></a>, <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/WeakSet"><code>WeakSet</code></a>, et d'autres.</dd>
-  <dt><a href="/fr/docs/Web/JavaScript/Reference/Operators">Les expressions et les opérateurs</a></dt>
-  <dd>Apprenez à connaître comment fonctionnent les opérateurs JavaScript comme <a href="/fr/docs/Web/JavaScript/Reference/Operators/instanceof"><code>instanceof</code></a>, <a href="/fr/docs/Web/JavaScript/Reference/Operators/typeof"><code>typeof</code></a>, <a href="/fr/docs/Web/JavaScript/Reference/Operators/new"><code>new</code></a>, <a href="/fr/docs/Web/JavaScript/Reference/Operators/this"><code>this</code></a> et bien d'autres notions comme <a href="/fr/docs/Web/JavaScript/Reference/Operators/Operator_Precedence">la précédence des opérateurs</a>.</dd>
-  <dt><a href="/fr/docs/Web/JavaScript/Reference/Statements">Les instructions et les déclarations</a></dt>
-  <dd>Apprenez à connaître comment utiliser <a href="/fr/docs/Web/JavaScript/Reference/Statements/do...while"><code>do...while</code></a>, <a href="/fr/docs/Web/JavaScript/Reference/Statements/for...in"><code>for...in</code></a>, <a href="/fr/docs/Web/JavaScript/Reference/Statements/for...of"><code>for...of</code></a>, <a href="/fr/docs/Web/JavaScript/Reference/Statements/try...catch"><code>try...catch</code></a>, <a href="/fr/docs/Web/JavaScript/Reference/Statements/let"><code>let</code></a>, <a href="/fr/docs/Web/JavaScript/Reference/Statements/var"><code>var</code></a>, <a href="/fr/docs/Web/JavaScript/Reference/Statements/const"><code>const</code></a>, <a href="/fr/docs/Web/JavaScript/Reference/Statements/if...else"><code>if...else</code></a>, <a href="/fr/docs/Web/JavaScript/Reference/Statements/switch"><code>switch</code></a> et les autres mots-clés et instructions JavaScript.</dd>
-  <dt><a href="/fr/docs/Web/JavaScript/Reference/Functions">Les fonctions</a></dt>
-  <dd>Apprenez à utiliser les fonctions en JavaScript pour développer vos applications.</dd>
-</dl>
-
-<h2 id="Tools_resources">Outils &amp; ressources</h2>
-
-<p>Voici une liste d'outils utiles pour écrire et déboguer du code <strong>JavaScript</strong>.</p>
-
-<dl>
-  <dt><a href="/fr/docs/Tools">Outils de développement de Firefox</a></dt>
-  <dd><a href="/fr/docs/Tools/Web_Console">Console web</a>, <a href="/fr/docs/Tools/Performance">profileur JavaScript</a>, <a href="/fr/docs/Tools/Debugger">débogueur</a>, et plus.</dd>
-  <dt><a href="/fr/docs/Web/JavaScript/Shells">Invites de commande JavaScript</a></dt>
-  <dd>Un interpréteur de commandes JavaScript vous permet de tester rapidement des extraits de code JavaScript.</dd>
-  <dt><a href="https://learnjavascript.online/">Apprendre le JavaScript (en anglais)</a></dt>
-  <dd>Une excellente ressource pour les développeurs web en herbe - Apprenez JavaScript dans un environnement interactif, avec des leçons courtes et des tests interactifs, guidés par une évaluation automatique. Les 40 premières leçons sont gratuites, et le cours complet est disponible moyennant un petit paiement unique.</dd>
-  <dt><a href="https://togetherjs.com/">TogetherJS</a></dt>
-  <dd>La collaboration rendue facile. En ajoutant TogetherJS à votre site, vos utilisateurs peuvent s'entraider sur un site web en temps réel !</dd>
-  <dt><a href="https://stackoverflow.com/questions/tagged/javascript">Stack Overflow</a></dt>
-  <dd>Questions Stack Overflow portant le tag « JavaScript ».</dd>
-  <dt><a href="https://jsfiddle.net/">JSFiddle</a></dt>
-  <dd>Modifiez votre code JavaScript, CSS, HTML et obtenez des résultats en direct. Utilisez des ressources externes et collaborez avec votre équipe en ligne.</dd>
-  <dt><a href="https://plnkr.co/">Plunker</a></dt>
-  <dd>Plunker est une communauté en ligne pour créer, collaborer et partager vos idées de développement web. Modifiez vos fichiers JavaScript, CSS, HTML et obtenez des résultats en direct et la structure des fichiers.</dd>
-  <dt><a href="https://jsbin.com/">JSBin</a></dt>
-  <dd>JS Bin est un outil de débogage collaboratif open-source pour le développement web.</dd>
-  <dt><a href="https://codepen.io/">Codepen</a></dt>
-  <dd>Codepen est un autre outil de développement web collaboratif utilisé comme un terrain de jeu pour des résultats en direct.</dd>
-  <dt><a href="https://stackblitz.com/">StackBlitz</a></dt>
-  <dd>StackBlitz est un autre terrain de jeu/outil de débogage en ligne, qui peut héberger et déployer des applications full-stack utilisant React, Angular, etc.</dd>
-  <dt><a href="https://runjs.app/">RunJS</a></dt>
-  <dd>RunJS est un outil de bureau de type bac-à-sable/ardoise, qui fournit des résultats en direct et un accès aux API Node.JS et à celles du navigateur.</dd>
-</dl>
diff --git a/files/fr/web/javascript/index.md b/files/fr/web/javascript/index.md
new file mode 100644
index 0000000000..b8888103f5
--- /dev/null
+++ b/files/fr/web/javascript/index.md
@@ -0,0 +1,115 @@
+---
+title: JavaScript
+slug: Web/JavaScript
+tags:
+  - JavaScript
+  - Landing
+  - Landing page
+  - Learn
+translation_of: Web/JavaScript
+---
+{{JsSidebar}}
+
+**JavaScript** (souvent abrégé en « JS ») est un langage de script léger, orienté objet, principalement connu comme le langage de script des pages web. Mais il est aussi [utilisé dans de nombreux environnements extérieurs aux navigateurs web](https://fr.wikipedia.org/wiki/JavaScript#Autres_utilisations) tels que [Node.js](https://nodejs.org/), [Apache CouchDB](https://couchdb.apache.org/) voire [Adobe Acrobat](https://www.adobe.com/devnet/acrobat/javascript.html). Le code JavaScript est interprété ou compilé à la volée ([JIT](https://fr.wikipedia.org/wiki/Compilation_%C3%A0_la_vol%C3%A9e)). C'est un langage à objets utilisant le concept de [prototype](https://fr.wikipedia.org/wiki/Programmation_orient%C3%A9e_prototype), disposant d'un typage faible et dynamique qui permet de programmer suivant plusieurs paradigmes de programmation : fonctionnelle, impérative et orientée objet. [Apprenez-en plus sur JavaScript](/fr/docs/Web/JavaScript/About_JavaScript).
+
+Cette section de MDN est dédiée au langage JavaScript. Pour des informations sur l'utilisation de JavaScript avec les [API](/fr/docs/Glossary/API) spécifiques des navigateurs web pour les pages web, veuillez consulter les sections sur les [API Web](/fr/docs/Web/API) (_Web API_ en anglais) et le [DOM](/fr/docs/Web/API/Document_Object_Model).
+
+Le standard qui spécifie JavaScript est [ECMAScript](/fr/docs/Web/JavaScript/Language_Resources). En 2012, tous les navigateurs modernes supportent complètement ECMAScript 5.1. Les anciens navigateurs supportent au minimum ECMAScript 3. Une sixième version majeure du standard a été finalisée et publiée le 17 juin 2015. Cette version s'intitule officiellement ECMAScript 2015 mais est encore fréquemment appelée ECMAScript 6 ou ES6. Étant donné que les standards ECMAScript sont désormais édités sur un rythme annuel, cette documentation fait référence à la dernière version en cours de rédaction, actuellement c'est [ECMAScript 2020](https://tc39.github.io/ecma262/).
+
+JavaScript ne doit pas être confondu avec le [langage de programmation Java](https://fr.wikipedia.org/wiki/Java_%28langage%29). Java et JavaScript sont deux marques déposées par Oracle dans de nombreux pays mais ces deux langages de programmation ont chacun une syntaxe, une sémantique et des usages différents.
+
+> **Remarque :** **Vous cherchez à devenir un développeur web front-end ?**
+>
+> Nous avons élaboré un cours qui comprend toutes les informations essentielles dont vous avez besoin pour atteindre votre objectif.
+>
+> [Commencer](/fr/docs/Learn/Front-end_web_developer)
+
+## Tutoriels
+
+Apprenez comment programmer en JavaScript.
+
+### Ressources pour commencer
+
+Si vous souhaitez apprendre JavaScript et que vous débutez en programmation ou en JavaScript, [la section JavaScript de la zone d'apprentissage de MDN (_learning area_)](/fr/docs/Learn/JavaScript) est le meilleur endroit où commencer. Cette section contient les modules suivants :
+
+- [Les premiers pas en JavaScript](/fr/docs/Learn/JavaScript/First_steps)
+  - : Cet ensemble de chapitres répond à des questions telles que « qu'est-ce que JavaScript ? », « à quoi ressemble-t-il ? », « que puis-je faire avec ? » et présente des éléments clés du langage tels que les variables, les chaînes de caractères, les nombres et les tableaux.
+- [Les principaux blocs de JavaScript](/fr/docs/Learn/JavaScript/Building_blocks)
+  - : On poursuit ici la présentation des fonctionnalités importantes de JavaScript, notamment celle des blocs de codes fréquemment utilisés comme les instructions conditionnelles, les boucles, les fonctions et les évènements.
+- [Une introduction aux objets JavaScript](/fr/docs/Learn/JavaScript/Objects)
+  - : JavaScript est un langage de programmation « orienté objet » et ce concept est primordial pour utiliser JavaScript au mieux, écrire du code plus efficace et comprendre son fonctionnement. Ce module présente les bases de ces concepts.
+- [La programmation asynchrone en JavaScript](/fr/docs/Learn/JavaScript/Asynchronous)
+  - : Dans cet article, on aborde les fonctionnalités asynchrones de JavaScript, en quoi elles sont importantes et la façon dont elles peuvent être utilisées lors d'opérations bloquantes comme la récupération de ressources provenant d'un serveur.
+- [Les API Web utilisées côté client](/fr/docs/Learn/JavaScript/Client-side_web_APIs)
+  - : Lorsqu'on écrit du JavaScript pour un site web ou une application, il est rapidement nécessaire de manipuler les API : des interfaces qui permettent de manipuler différents aspects du navigateur, des données provenant d'autres sites ou services, etc. Dans ce module, nous verrons ce que sont les API, et comment utiliser les API les plus fréquemment utilisées.
+
+### Guide JavaScript
+
+- [Guide JavaScript](/fr/docs/Web/JavaScript/Guide)
+  - : Un guide détaillé de JavaScript, destiné aux personnes qui ont déjà développé en JavaScript ou avec un autre langage.
+
+### Niveau intermédiaire
+
+- [Comprendre les _frameworks_ JavaScript côté client](/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks)
+  - : Les _frameworks_ JavaScript font partie de l'écosystème du développement web côté client. Les outils qu'ils fournissent permettent de construire des applications dynamiques sur des bases robustes. Dans ce module, on présente les notions principales de leur fonctionnement et comment ces outils peuvent rejoindre votre panoplie. Des tutoriels sur les frameworks les plus répandus suivront cet article.
+- [Une réintroduction à JavaScript](/fr/docs/Web/JavaScript/A_re-introduction_to_JavaScript)
+  - : Un aperçu pour ceux qui _pensent_ s'y connaître en JavaScript.
+- [Structures de données JavaScript](/fr/docs/Web/JavaScript/Data_structures)
+  - : Aperçu des structures de données disponibles en JavaScript.
+- [Égalité, comparaison et similarité](/fr/docs/Web/JavaScript/Equality_comparisons_and_sameness)
+  - : JavaScript propose trois opérations de comparaison de valeurs différentes : l'égalité stricte à l'aide de `===`, l'égalité souple à l'aide de `==` et la méthode [`Object.is()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Object/is).
+- [Closures](/fr/docs/Web/JavaScript/Closures)
+  - : Une _closure_ est la combinaison d'une fonction et de l'environnement lexical dans lequel cette fonction a été déclarée.
+
+### Niveau avancé
+
+- [Héritage et chaîne de prototypes](/fr/docs/Web/JavaScript/Inheritance_and_the_prototype_chain)
+  - : Cette page explique l'héritage à base de prototype, un concept souvent incompris et sous-estimé.
+- [Le mode strict](/fr/docs/Web/JavaScript/Reference/Strict_mode)
+  - : Une variante plus restreinte de JavaScript (par exemple, on ne peut pas utiliser de variable avant de l'avoir définie). Elle permet d'obtenir de meilleures performances et de faciliter le débogage.
+- [Les tableaux typés en JavaScript](/fr/docs/Web/JavaScript/Typed_arrays)
+  - : Les tableaux typés permettent d'accéder à des données binaires brutes, de façon organisée.
+- [La gestion de la mémoire en JavaScript](/fr/docs/Web/JavaScript/Memory_Management)
+  - : Cet article décrit le cycle de vie des objets et de la mémoire en JavaScript, ainsi que le mécanisme du ramasse-miettes.
+- [Gestion de la concurrence et boucle des événements](/fr/docs/Web/JavaScript/EventLoop)
+  - : Le modèle de concurrence utilisé par JavaScript est basé sur une « boucle d'événements »
+
+## Référence
+
+Parcourez la documentation complète de la [référence JavaScript](/fr/docs/Web/JavaScript/Reference).
+
+- [Les objets standard](/fr/docs/Web/JavaScript/Reference/Global_Objects)
+  - : Apprenez à connaître les objets natifs standard tels que [`Array`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array), [`Boolean`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Boolean), [`Date`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Date), [`Error`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Error), [`Function`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Function), [`JSON`](/fr/docs/Web/JavaScript/Reference/Global_Objects/JSON), [`Math`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Math), [`Number`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Number), [`Object`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Object), [`RegExp`](/fr/docs/Web/JavaScript/Reference/Global_Objects/RegExp), [`String`](/fr/docs/Web/JavaScript/Reference/Global_Objects/String), [`Map`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Map), [`Set`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Set), [`WeakMap`](/fr/docs/Web/JavaScript/Reference/Global_Objects/WeakMap), [`WeakSet`](/fr/docs/Web/JavaScript/Reference/Global_Objects/WeakSet), et d'autres.
+- [Les expressions et les opérateurs](/fr/docs/Web/JavaScript/Reference/Operators)
+  - : Apprenez à connaître comment fonctionnent les opérateurs JavaScript comme [`instanceof`](/fr/docs/Web/JavaScript/Reference/Operators/instanceof), [`typeof`](/fr/docs/Web/JavaScript/Reference/Operators/typeof), [`new`](/fr/docs/Web/JavaScript/Reference/Operators/new), [`this`](/fr/docs/Web/JavaScript/Reference/Operators/this) et bien d'autres notions comme [la précédence des opérateurs](/fr/docs/Web/JavaScript/Reference/Operators/Operator_Precedence).
+- [Les instructions et les déclarations](/fr/docs/Web/JavaScript/Reference/Statements)
+  - : Apprenez à connaître comment utiliser [`do...while`](/fr/docs/Web/JavaScript/Reference/Statements/do...while), [`for...in`](/fr/docs/Web/JavaScript/Reference/Statements/for...in), [`for...of`](/fr/docs/Web/JavaScript/Reference/Statements/for...of), [`try...catch`](/fr/docs/Web/JavaScript/Reference/Statements/try...catch), [`let`](/fr/docs/Web/JavaScript/Reference/Statements/let), [`var`](/fr/docs/Web/JavaScript/Reference/Statements/var), [`const`](/fr/docs/Web/JavaScript/Reference/Statements/const), [`if...else`](/fr/docs/Web/JavaScript/Reference/Statements/if...else), [`switch`](/fr/docs/Web/JavaScript/Reference/Statements/switch) et les autres mots-clés et instructions JavaScript.
+- [Les fonctions](/fr/docs/Web/JavaScript/Reference/Functions)
+  - : Apprenez à utiliser les fonctions en JavaScript pour développer vos applications.
+
+## Outils & ressources
+
+Voici une liste d'outils utiles pour écrire et déboguer du code **JavaScript**.
+
+- [Outils de développement de Firefox](/fr/docs/Tools)
+  - : [Console web](/fr/docs/Tools/Web_Console), [profileur JavaScript](/fr/docs/Tools/Performance), [débogueur](/fr/docs/Tools/Debugger), et plus.
+- [Invites de commande JavaScript](/fr/docs/Web/JavaScript/Shells)
+  - : Un interpréteur de commandes JavaScript vous permet de tester rapidement des extraits de code JavaScript.
+- [Apprendre le JavaScript (en anglais)](https://learnjavascript.online/)
+  - : Une excellente ressource pour les développeurs web en herbe - Apprenez JavaScript dans un environnement interactif, avec des leçons courtes et des tests interactifs, guidés par une évaluation automatique. Les 40 premières leçons sont gratuites, et le cours complet est disponible moyennant un petit paiement unique.
+- [TogetherJS](https://togetherjs.com/)
+  - : La collaboration rendue facile. En ajoutant TogetherJS à votre site, vos utilisateurs peuvent s'entraider sur un site web en temps réel !
+- [Stack Overflow](https://stackoverflow.com/questions/tagged/javascript)
+  - : Questions Stack Overflow portant le tag « JavaScript ».
+- [JSFiddle](https://jsfiddle.net/)
+  - : Modifiez votre code JavaScript, CSS, HTML et obtenez des résultats en direct. Utilisez des ressources externes et collaborez avec votre équipe en ligne.
+- [Plunker](https://plnkr.co/)
+  - : Plunker est une communauté en ligne pour créer, collaborer et partager vos idées de développement web. Modifiez vos fichiers JavaScript, CSS, HTML et obtenez des résultats en direct et la structure des fichiers.
+- [JSBin](https://jsbin.com/)
+  - : JS Bin est un outil de débogage collaboratif open-source pour le développement web.
+- [Codepen](https://codepen.io/)
+  - : Codepen est un autre outil de développement web collaboratif utilisé comme un terrain de jeu pour des résultats en direct.
+- [StackBlitz](https://stackblitz.com/)
+  - : StackBlitz est un autre terrain de jeu/outil de débogage en ligne, qui peut héberger et déployer des applications full-stack utilisant React, Angular, etc.
+- [RunJS](https://runjs.app/)
+  - : RunJS est un outil de bureau de type bac-à-sable/ardoise, qui fournit des résultats en direct et un accès aux API Node.JS et à celles du navigateur.
diff --git a/files/fr/web/javascript/inheritance_and_the_prototype_chain/index.html b/files/fr/web/javascript/inheritance_and_the_prototype_chain/index.html
deleted file mode 100644
index 1b21ea0232..0000000000
--- a/files/fr/web/javascript/inheritance_and_the_prototype_chain/index.html
+++ /dev/null
@@ -1,574 +0,0 @@
----
-title: Héritage et chaîne de prototype
-slug: Web/JavaScript/Inheritance_and_the_prototype_chain
-tags:
-  - Guide
-  - Héritage
-  - Intermédiaire
-  - JavaScript
-  - OOP
-translation_of: Web/JavaScript/Inheritance_and_the_prototype_chain
-original_slug: Web/JavaScript/Héritage_et_chaîne_de_prototypes
----
-<div>{{jsSidebar("Advanced")}}</div>
-
-<p>JavaScript peut prêter à confusion losqu'on est habitué à manipuler des langages de programmation manipulant les classes (tels que Java ou C++). En effet, JavaScript est un langage dynamique et ne possède pas de concept de classe à part entière (le mot-clé <code>class</code> a certes été ajouté avec ES2015 mais il s'agit uniquement de sucre syntaxique, JavaScript continue de reposer sur l'héritage prototypique).</p>
-
-<p>En ce qui concerne l'héritage, JavaScript n'utilise qu'une seule structure : les objets. Chaque objet possède une propriété privée qui contient un lien vers un autre objet appelé le <strong>prototype</strong>. Ce prototype possède également son prototype et ainsi de suite, jusqu'à ce qu'un objet ait {{jsxref("null")}} comme prototype. Par définition, <code>null</code> ne possède pas de prototype et est ainsi le dernier maillon de la <strong>chaîne de prototype</strong>.</p>
-
-<p>La majorité des objets JavaScript sont des instances de {{jsxref("Object")}} qui est l'avant dernier maillon de la chaîne de prototype.</p>
-
-<p>Bien que cette confusion (entre classe et prototype) soit souvent avancée comme l'une des faiblesses de JavaScript, le modèle prototypique est plus puissant que le modèle classique et il est notamment possible de construire un modèle classique à partir d'un modèle prototypique.</p>
-
-<h2 id="Héritage_et_chaîne_de_prototype">Héritage et chaîne de prototype</h2>
-
-<h3 id="Propriété_héritées">Propriété héritées</h3>
-
-<p>Les objets JavaScript sont des ensembles dynamiques de propriétés (les propriétés directement rattachées à un objet sont appelées <strong>propriétés en propre (<em>own properties</em>)</strong>). Les objets JavaScript possèdent également un lien vers un objet qui est leur prototype. Lorsqu'on tente d'accéder aux propriétés d'un objet, la propriété sera recherchée d'abord sur l'objet même, puis sur son prototype, puis sur le prototype du prototype et ainsi de suite jusqu'à ce qu'elle soit trouvée ou que la fin de la chaîne de prototype ait été atteinte.</p>
-
-<div class="note">
-<p><strong>Note :</strong> Dans la spécification ECMAScript, on utilise la notation <code>unObjet.[[Prototype]]</code> pour faire référence au prototype de <code>unObjet</code>. Depuis ECMAScript 2015, on peut accéder à <code>[[Prototype]]</code> grâce aux accesseurs {{jsxref("Object.getPrototypeOf()")}} et {{jsxref("Object.setPrototypeOf()")}}. Cela est équivalent à la propriété JavaScript <code>__proto__</code> qui était non-standard avant ES2015 mais qui était de fait implémentée par la majorité des navigateurs.</p>
-
-<p>Cette propriété ne devrait pas être confondue avec la propriété <code><em>func</em>.prototype</code> des fonctions qui définissent le <code>[[Prototype]]</code> à affecter aux instances des objets créés par cette fonction lorsqu'elle est utilisée comme constructeur. La propriété <code><strong>Object.prototype</strong></code> représente le prototype de {{jsxref("Object")}}.</p>
-</div>
-
-<p>Voici ce qui se produit lorsqu'on tente d'accéder à une propriété :</p>
-
-<pre class="brush: js">// On commence par créer un objet o pour lequel la fonction f sera
-// son constructeur et lui créera deux propriétés en propre
-// a et b :
-let f = function () {
-   this.a = 1;
-   this.b = 2;
-}
-let o = new f(); // {a: 1, b: 2}
-
-// on ajoute des propriétés au prototype de la fonction
-// f
-f.prototype.b = 3;
-f.prototype.c = 4;
-
-// Note : on ne définit pas le prototype de f avec f.prototype = {b:3,c:4};
-// car cela briserait la chaîne de prototype
-
-// o.[[Prototype]] possède les propriétés b and c.
-// o.[[Prototype]].[[Prototype]] est Object.prototype.
-// Enfin, o.[[Prototype]].[[Prototype]].[[Prototype]] vaut null.
-// On a alors atteint la fin de la chaîne de prototype car,
-// par définition, null n'a pas de [[Prototype]].
-// Ainsi, la chaîne complète est ici :
-// {a: 1, b: 2} ---&gt; {b: 3, c: 4} ---&gt; Object.prototype ---&gt; null
-
-console.log(o.a); // 1
-// Existe-t-il une propriété 'a' en propre sur o ? Oui, elle vaut 1.
-
-console.log(o.b); // 2
-// Existe-t-il une propriété 'b' en propre sur o ? Oui, elle vaut 2.
-// Le prototype possède également une propriété 'b' mais elle n'est pas
-// utilisée.
-// C'est ce qu'on appelle l'ombrage (shadowing en anglais)
-
-console.log(o.c); // 4
-// Existe-t-il une propriété 'c' en propre sur o ? Non, on vérifie le
-// prototype.
-// Existe-t-il une propriété 'c' en propre sur o.[[Prototype]] ?
-// Oui, elle vaut 4.
-
-console.log(o.d); // undefined
-// Existe-t-il une propriété 'd' en propre sur o ? Non, on vérifie le
-// prototype.
-// Existe-t-il une propriété 'd' en propre sur o.[[Prototype]] ? Non, on vérifie le
-// prototype.
-// o.[[Prototype]].[[Prototype]] est Object.prototype et ne contient pas
-// de propriété 'd' par défaut. On vérifie son prototype.
-// o.[[Prototype]].[[Prototype]].[[Prototype]] est null, on arrête la recherche
-// aucune propriété n'est trouvée, le moteur renvoie undefined.
-</pre>
-
-<p>Lorsquon définit une propriété sur un objet, cela définit une propriété en propre. La seule exception se produit lorsqu'on définit <a href="/fr/docs/Web/JavaScript/Guide/Utiliser_les_objets#Définir_des_accesseurs_et_des_mutateurs_(getters_et_setters)">un accesseur et/ou un mutateur</a> sur une propriété héritée.</p>
-
-<h3 id="Méthodes_héritées">Méthodes héritées</h3>
-
-<p>JavaScript ne possède pas de méthodes au sens des langages de classe. En effet, en JavaScript, toute fonction associée à un objet est également une propriété. Une fonction héritée se comportera comme n'importe quelle autre propriété (y compris pour l'ombrage mentionné ci-avant où on pourra parler de surcharge).</p>
-
-<p>Lorsqu'une fonction héritée est exécutée, la valeur de <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_this"><code>this</code></a> pointe vers l'objet hérité et non vers l'objet prototype qui possède la fonction comme propriété en propre.</p>
-
-<pre class="brush: js">var o = {
-  a: 2,
-  m: function() {
-    return this.a + 1;
-  }
-};
-
-console.log(o.m()); // 3
-// Quand on appelle o.m ici, 'this' fera référence à o
-
-var p = Object.create(o);
-// p est un objet qui hérite de o
-
-p.a = 4; // on crée une propriété 'a' en propre sur p
-console.log(p.m()); // 5
-// lorsque p.m est appelée, 'this' fait référence à p.
-// Ainsi quand p hérite de m via o,
-// 'this.a' signifie p.a, soit la propriété 'a' de p
-
-
-</pre>
-
-<h2 id="Utiliser_les_prototypes_avec_JavaScript">Utiliser les prototypes avec JavaScript</h2>
-
-<p>Regardons un peu plus en détail ce qui se déroule en arrière-plan.</p>
-
-<div class="blockIndicator note">
-<p><strong>Note :</strong> Pour tous les exempls suivants, nous vous invitons à ouvrir la "console" de votre navigateur pour y copier/coller/éditer les fragments de code. Pour savoir comment lancer cette console, vous pouvez lire la documentation des navigateurs : <a href="/fr/docs/Tools">Firefox</a>, <a href="https://developers.google.com/web/tools/chrome-devtools/">Chrome</a>, <a href="https://docs.microsoft.com/en-us/microsoft-edge/devtools-guide">Edge</a>.</p>
-</div>
-
-<p>En JavaScript, comme mentionné ci-dessus, les fonctions peuvent avoir des propriétés. Toutes les fonctions ont une propriété spéciale intitulée <code>prototype</code>.</p>
-
-<pre class="brush: js">function faireUnTruc(){}
-console.log( faireUnTruc.prototype ); // Object {...}
-// Peu importe comment vous déclarez la fonction.
-// une fonction en JavaScript aura toujours une propriété
-// prototype par défaut.
-var faireUnTruc= function(){};
-console.log(faireUnTruc.prototype); // Object {...}
-</pre>
-
-<p>Comme mentionné avant, <code>faireUnTruc()</code> possède une propriété par défaut <code>prototype</code>. Après avoir exécuté ce code dans une console, la console devrait afficher un objet semblable à :</p>
-
-<pre class="brush: js">{
-    constructor: ƒ faireUnTruc(),
-    __proto__: {
-        constructor: ƒ Object(),
-        hasOwnProperty: ƒ hasOwnProperty(),
-        isPrototypeOf: ƒ isPrototypeOf(),
-        propertyIsEnumerable: ƒ propertyIsEnumerable(),
-        toLocaleString: ƒ toLocaleString(),
-        toString: ƒ toString(),
-        valueOf: ƒ valueOf()
-    }
-}</pre>
-
-<p>On peut ajouter des propriétés au prototype de <code>faireUnTruc()</code> comme suit :</p>
-
-<pre class="brush: js">function faireUnTruc(){}
-faireUnTruc.prototype.toto = "truc";
-console.log( faireUnTruc.prototype );</pre>
-
-<p>Produira le résultat suivant :</p>
-
-<pre class="brush: js">{
-    toto: "truc",
-    constructor: ƒ faireUnTruc(),
-    __proto__: {
-        constructor: ƒ Object(),
-        hasOwnProperty: ƒ hasOwnProperty(),
-        isPrototypeOf: ƒ isPrototypeOf(),
-        propertyIsEnumerable: ƒ propertyIsEnumerable(),
-        toLocaleString: ƒ toLocaleString(),
-        toString: ƒ toString(),
-        valueOf: ƒ valueOf()
-    }
-}
-</pre>
-
-<p>On peut utiliser l'opérateur <code>new</code> afin de créer une instance de <code>faireUnTruc()</code> basée sur ce prototype. Pour utiliser l'opérateur <code>new</code>, il suffira d'appeler la fonction et de précéder cet appel avec le mot-clé <code>new</code>. Lorsqu'on appelle une fonction avec un opérateur <code>new</code>, celle-ci renvoie un objet qui est une instance de la fonction. On peut ensuite ajouter des propriétés sur cet objet.</p>
-
-<p>Voyons le code qui suit :</p>
-
-<pre class="brush: js">function faireUnTruc(){}
-faireUnTruc.prototype.toto = "truc"; // on ajoute une propriété au prototype
-var uneInstance = new faireUnTruc();
-uneInstance.prop = "une valeur"; // on ajoute une propriété sur l'objet
-console.log(uneInstance);</pre>
-
-<p>Exécuté, ce code produira le résultat suivant dans la console :</p>
-
-<pre class="brush: js">{
-    prop: "une valeur",
-    __proto__: {
-        toto: "truc",
-        constructor: ƒ faireUnTruc(),
-        __proto__: {
-            constructor: ƒ Object(),
-            hasOwnProperty: ƒ hasOwnProperty(),
-            isPrototypeOf: ƒ isPrototypeOf(),
-            propertyIsEnumerable: ƒ propertyIsEnumerable(),
-            toLocaleString: ƒ toLocaleString(),
-            toString: ƒ toString(),
-            valueOf: ƒ valueOf()
-        }
-    }
-}</pre>
-
-<p>Comme nous l'avons vu avant, la valeur de <code>__proto__</code> pour <code>uneInstance</code> est <code>faireUnTruc.prototype</code>. Mais quel est l'intérêt ? Lorsqu'on accède à une propriété de <code>uneInstance</code>, le moteur contrôle d'abord si <code>uneInstance</code> possède cette propriété.</p>
-
-<p>Si <code>uneInstance</code> ne possède pas cette propriété, le moteur contrôlera la propriété sur la propriété <code>__proto__</code> de <code>uneInstance</code> (c'est-à-dire <code>faireUnTruc.prototype</code>). Si la propriété <code>__proto__</code> de <code>uneInstance</code> possède la propriété qu'on recherche, ce sera celle-ci qui sera utilisée.</p>
-
-<p>Si <code>__proto__</code> de <code>unTruc</code> ne possède pas la propriété recherchée, le moteur contrôle la propriété <code>__proto__</code> de la propriété <code>__proto__</code> de <code>uneInstance</code>. Par défaut, la propriété <code>__proto__</code> de n'importe quel propriété <code>prototype</code>d'une fonction est  <code>window.Object.prototype</code>. Ainsi, la propriété <code>__proto__</code> de la propriété <code>__proto__</code> de  <code>uneInstance</code> (c'est-à-dire <code>__proto__</code> de <code>faireUnTruc.prototype</code> (c'est-à-dire. <code>Object.prototype</code>)) est contrôlée pour vérifier si la propriété y est présente.</p>
-
-<p>Si la propriété n'est pas trouvée sur la propriété <code>__proto__</code> de la propriété <code>__proto__</code> de <code>uneInstance</code>, c'est la proriété <code>__proto__</code> de la propriété <code>__proto__</code> de la propriété <code>__proto__</code> de <code>uneInstance</code> qui est contrôlée. Cependant il y a un problème car la propriété <code>__proto__</code> de la propriété <code>__proto__</code> de la propriété <code>__proto__</code> de <code>unTruc</code> n'existe pas. Autrement dit, toute la chaîne de prototype a été parcouru et on ne peut pas remonter d'un cran sur un autre <code>__proto__</code> et le moteur peut conclure que la propriété n'existe pas pour cet objet et renvoyer <code>undefined</code>.</p>
-
-<p>Regardons ce qui se produit dans la console avec un peu de code :</p>
-
-<pre class="brush: js">function faireUnTruc(){}
-faireUnTruc.prototype.toto = "truc";
-var uneInstance = new faireUnTruc();
-uneInstance.prop = "une valeur";
-console.log("uneInstance.prop: " + uneInstance.prop);
-console.log("uneInstance.toto: " + uneInstance.toto);
-console.log("faireUnTruc.prop: " + faireUnTruc.prop);
-console.log("faireUnTruc.toto: " + faireUnTruc.toto);
-console.log("faireUnTruc.prototype.prop: " + faireUnTruc.prototype.prop);
-console.log("faireUnTruc.prototype.toto:  " + faireUnTruc.prototype.toto);</pre>
-
-<p>Le résultat est le suivant :</p>
-
-<pre class="brush: js">uneInstance.prop: une valeur
-uneInstance.toto: truc
-faireUnTruc.prop: undefined
-faireUnTruc.toto: undefined
-faireUnTruc.prototype.prop: undefined
-faireUnTruc.prototype.toto: truc</pre>
-
-<h2 id="Les_différentes_façons_de_créer_des_objets_et_les_impacts_sur_la_chaîne_de_prototype">Les différentes façons de créer des objets et les impacts sur la chaîne de prototype</h2>
-
-<h3 id="Objets_créés_avec_les_raccourcis_syntaxiques_littéraux">Objets créés avec les raccourcis syntaxiques (littéraux)</h3>
-
-<pre class="brush: js">var o = {a: 1};
-
-// Le nouvel objet possède Object.prototype comme [[Prototype]]
-// o ne possède pas de propriété 'hasOwnProperty' en propre
-// hasOwnProperty est une propriété en propre de Object.prototype.
-// o hérite de hasOwnProperty via Object.prototype
-// Object.prototype possède null comme prototype.
-// o ---&gt; Object.prototype ---&gt; null
-
-var b = ['coucou', 'ça va', '?'];
-
-// Les tableaux (Array) héritent de Array.prototype
-// (qui possède les méthodes indexOf, forEach, etc.)
-// La chaîne de prototype est donc :
-// b ---&gt; Array.prototype ---&gt; Object.prototype ---&gt; null
-
-function f() {
-  return 2;
-}
-
-// Les fonctions héritent de Function.prototype
-// (qui possède les méthodes call, bind, etc.)
-// La chaîne de prototype est donc
-// f ---&gt; Function.prototype ---&gt; Object.prototype ---&gt; null
-</pre>
-
-<h3 id="Objets_créés_avec_un_constructeur">Objets créés avec un constructeur</h3>
-
-<p>En JavaScript, un constructeur est <em>juste</em> une fonction que l'on invoque avec l'opérateur <code><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_new">new</a></code>.</p>
-
-<pre class="brush: js">function Graphe() {
-  this.sommets = [];
-  this.arêtes = [];
-}
-
-Graphe.prototype = {
-  ajoutSommet: function(v) {
-    this.sommets.push(v);
-  }
-};
-
-var g = new Graphe();
-// g est un objet qui possède les propriétés 'sommets' and 'arêtes' en propre.
-// g.[[Prototype]] est la valeur de Graphe.prototype lorsque "new Graphe()" est exécuté.
-</pre>
-
-<h3 id="Objets_créés_avec_Object.create">Objets créés avec <code>Object.create()</code></h3>
-
-<p>ECMAScript 5 a introduit une nouvelle méthode : {{jsxref("Object.create()")}}. Appeler cette méthode crée un nouvel objet et le prototype de cet objet est le premier argument de cette fonction :</p>
-
-<pre class="brush: js">var a = {a: 1};
-// a ---&gt; Object.prototype ---&gt; null
-
-var b = Object.create(a);
-// b ---&gt; a ---&gt; Object.prototype ---&gt; null
-console.log(b.a); // 1 (héritée)
-
-var c = Object.create(b);
-// c ---&gt; b ---&gt; a ---&gt; Object.prototype ---&gt; null
-
-var d = Object.create(null);
-// d ---&gt; null
-console.log(d.hasOwnProperty);
-// undefined, car d n'hérite pas de Object.prototype
-</pre>
-
-<h4 id="Suppression_des_propriétés_avec_delete">Suppression des propriétés avec <code>delete</code></h4>
-
-<p>L'opérateur <code><a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/L_op%C3%A9rateur_delete">delete</a></code> permet de supprimer une propriété directement rattachée à un objet. En revanche, il n'empêchera pas l'exploration de la chaîne de prototype :</p>
-
-<pre class="brush: js">let a = {toto: 1};
-let b = Object.create(a);
-
-console.log(b.toto); // Affiche 1 car c'est une propriété disponible via le prototype
-b.toto = 5;
-console.log(b.toto); // Affiche 5, désormais cette propriété existe sur l'objet
-
-delete b.toto;
-console.log(b.toto); // Affiche 1 : la propriété n'est plus disponible sur l'objet mais
-                     // on peut toujours la récupérer via le prototype</pre>
-
-<h3 id="Objets_créés_avec_le_mot-clé_class">Objets créés avec le mot-clé <code>class</code></h3>
-
-<p>ECMAScript 2015 introduit plusieurs mots-clés destinés à créer du sucre syntaxique pour manipuler des <a href="/fr/docs/Web/JavaScript/Reference/Classes">classes</a>. Ces mots-clés sont {{jsxref("Instructions/class", "class")}}, {{jsxref("Classes/constructor", "constructor")}}, {{jsxref("Classes/static", "static")}}, {{jsxref("Classes/extends", "extends")}} et {{jsxref("Opérateurs/super", "super")}}.</p>
-
-<pre class="brush: js">'use strict';
-
-class Polygone {
-  constructor(hauteur, largeur) {
-    this.hauteur = hauteur;
-    this.largeur = largeur;
-  }
-}
-
-class Carré extends Polygone {
-  constructor(longueurCôté) {
-    super(longueurCôté, longueurCôté);
-  }
-  get aire() {
-    return this.hauteur * this.largeur;
-  }
-  set longueurCôté(nouvelleLongueur) {
-    this.hauteur = nouvelleLongueur;
-    this.largeur = nouvelleLongueur;
-  }
-}
-
-var carré = new Carré(2);
-</pre>
-
-<h3 id="Performance">Performance</h3>
-
-<p>Le temps de recherche des propriétés sera plus élevé si ces propriétés sont situées plus loin dans la chaîne de prototype. Tenter d'accéder à ces propriétés éloignées pourra avoir un impact négatif sur les performances. De plus, tenter d'accéder à des propriétés inexistantes entraîntera toujours le parcours de l'ensemble de la chaîne de prototype.</p>
-
-<p>Lorsqu'on parcourt les propriétés d'un objet, <strong>toutes</strong> les propriétés énumérables situées sur la chaîne de prototype seront parcourues. Pour vérifier si un objet possède une propriété en propre plus que via sa chaîne de prototype, on devra utiliser la méthode <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object/hasOwnProperty"><code>hasOwnProperty()</code></a> qui est héritée grâce à <code>Object.prototype</code>. Prenons un exemple concret avec le cas du graphe traité dans un exemple précédent :</p>
-
-<pre class="brush: js">console.log(g.hasOwnProperty('arêtes'));
-// true
-
-console.log(g.hasOwnProperty('nononon'));
-// false
-
-console.log(g.hasOwnProperty('ajoutSommet'));
-// false
-
-console.log(g.__proto__.hasOwnProperty('ajoutSommet'));
-// true
-</pre>
-
-<div class="blockIndicator note">
-<p><strong>Note :</strong> Tester si une propriété vaut {{jsxref("undefined")}} ne suffit pas à vérifier la présence de la propriété sur un objet : une propriété peut très bien exister sur un objet mais valoir <code>undefined</code>.</p>
-</div>
-
-<h3 id="Mauvaise_pratique_étendre_les_prototypes_natifs">Mauvaise pratique : étendre les prototypes natifs</h3>
-
-<p>On peut parfois voir du code qui étend <code>Object.prototype</code> ou l'un des prototypes natifs.</p>
-
-<p>Cette technique est intitulée <em>monkey patching </em>et brise l'encapsulation. Bien qu'elle soit utilisée par certains <em>frameworks</em>, il n'existe pas de raison suffisante pour étendre les objets natifs avec des fonctionnalités non-standard.</p>
-
-<p>La<strong> seule</strong> raison qui peut prévaloir pour l'extension de prototypes natifs est l'ajout de fonctionnalités JavaScript apparues avec les nouvelles versions des spécifications et moteurs afin d'en disposer dans de plus anciens environnements.</p>
-
-<h3 id="Résumé_des_méthodes_pour_étendre_la_chaîne_de_prototype">Résumé des méthodes pour étendre la chaîne de prototype</h3>
-
-<p>Voici un tableau avec les quatre outils qui permettent d'étendre une chaîne de prototypes avec chacun leurs avantages et leurs inconvénients. Tous les exemples mentionnés permettent de créer le même objet <code>inst</code> (et affichant donc le même résultat dans la console) mais de façon différente.</p>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <td style="width: 1%;">Nom</td>
-   <td>Exemples</td>
-   <td>Avantages</td>
-   <td style="vertical-align: top; width: 60%;">Inconvénients</td>
-  </tr>
-  <tr>
-   <td>Initialisation</td>
-   <td>
-    <pre class="brush: js">
-function toto(){}
-toto.prototype = {
-  toto_prop: "toto val"
-};
-function truc(){}
-var proto = new toto;
-proto.truc_prop = "truc val";
-truc.prototype = proto;
-var inst = new truc();
-console.log(inst.toto_prop);
-console.log(inst.truc_prop);
-</pre>
-   </td>
-   <td style="vertical-align: top;">Prise en charge par l'ensemble des navigateurs. Cette méthode est très rapide, standard et facilement optimisable.</td>
-   <td>
-    <p>Afin d'utiliser cette méthode, il faut que la fonction ait été initialisée. Pendant cette initialisation, le constructeur peut enregistrer des informations uniques qui doivent être générées pour chaque objet.</p>
-
-    <p>Toutefois, il est possible que ces informations uniques ne soient générées qu'une seule fois.</p>
-
-    <p>De plus, l'initialisation du constructeur peut ajouter des méthodes non souhaitées sur l'objet.</p>
-
-    <p>Cela dit, ces problèmes ne se révèlent que rarement.</p>
-   </td>
-  </tr>
-  <tr>
-   <td><code>Object.create()</code></td>
-   <td style="vertical-align: top;">
-    <pre class="brush: js">
-function toto(){}
-toto.prototype = {
-  toto_prop: "toto val"
-};
-function truc(){}
-var proto = Object.create(
-  toto.prototype
-);
-proto.truc_prop = "truc val";
-truc.prototype = proto;
-var inst = new truc();
-console.log(inst.toto_prop);
-console.log(inst.truc_prop);
-</pre>
-
-    <pre class="brush: js">
-function toto(){}
-toto.prototype = {
-  toto_prop: "toto val"
-};
-function truc(){}
-var proto = Object.create(
-  toto.prototype,
-  {
-    truc_prop: {
-      value: "truc val"
-    }
-  }
-);
-truc.prototype = proto;
-var inst = new truc();
-console.log(inst.toto_prop);
-console.log(inst.truc_prop)</pre>
-   </td>
-   <td>Prise en charge par la majorité des navigateurs actuels. Elle permet de définir directement <code>__proto__</code> en une seule fois et le navigateur peut mieux optimiser l'objet. Elle permet aussi de créer des objets sans prototype avec <code>Object.create(null)</code>.</td>
-   <td style="vertical-align: top;">
-    <p>Cette méthode n'est pas prise en charge par IE8 et les versions antérieures. Toutefois, Microsoft ayant mis un terme au support des systèmes qui utilisent ces navigateurs, ce ne devrait pas être un problème pour la plupart des navigation.</p>
-
-    <p>De plus, la lenteur de l'initialisation de l'objet peut être causer des soucis de performances lorsqu'on utilise un deuxième argument car descripteur de propriété possède un objet rattaché. Lorsqu'on gère des centaines de milliers de descripteurs, cela peut entraîner un certain <em>lag</em>.</p>
-   </td>
-  </tr>
-  <tr>
-   <td>
-    <p><code>Object.setPrototypeOf()</code></p>
-   </td>
-   <td>
-    <pre class="brush: js">
-function toto(){}
-toto.prototype = {
-  toto_prop: "toto val"
-};
-function truc(){}
-var proto = {
-  truc_prop: "truc val"
-};
-Object.setPrototypeOf(
-  proto, toto.prototype
-);
-truc.prototype = proto;
-var inst = new truc();
-console.log(inst.toto_prop);
-console.log(inst.truc_prop);
-</pre>
-
-    <pre class="brush: js">
-function toto(){}
-toto.prototype = {
-  toto_prop: "toto val"
-};
-function truc(){}
-var proto;
-proto=Object.setPrototypeOf(
-  { truc_prop: "truc val" },
-  toto.prototype
-);
-truc.prototype = proto;
-var inst = new truc();
-console.log(inst.toto_prop);
-console.log(inst.truc_prop)</pre>
-   </td>
-   <td style="vertical-align: top;">Prise en charge par l'ensemble des navigateurs actuels. Elle permet de manipuler dynamiquement le prototype d'un objet et également de rattacher un prototype à un objet qui n'aurait pas de prototype.</td>
-   <td>Cette méthode devrait être dépréciée et possède des performances faibles. En effet, les moteurs tenteront d'optimiser la connaissance de la structure du prototype et cette méthode viendra à l'enconte de ces hypothèses et certains navigateurs pourront même recompiler le code pour le faire fonctionner selon les spécifications. Cette méthode n'est pas prise en charge par IE8 et les versions antérieures.</td>
-  </tr>
-  <tr>
-   <td><code>__proto__</code></td>
-   <td style="vertical-align: top;">
-    <pre class="brush: js">
-function toto(){}
-toto.prototype = {
-  toto_prop: "toto val"
-};
-function truc(){}
-var proto = {
-  truc_prop: "truc val",
-  __proto__: toto.prototype
-};
-truc.prototype = proto;
-var inst = new truc();
-console.log(inst.toto_prop);
-console.log(inst.truc_prop);
-</pre>
-
-    <pre class="brush: js">
-var inst = {
-  __proto__: {
-    truc_prop: "truc val",
-    __proto__: {
-      toto_prop: "toto val",
-      __proto__: Object.prototype
-    }
-  }
-};
-console.log(inst.toto_prop);
-console.log(inst.truc_prop)</pre>
-   </td>
-   <td>Prise en charge par l'ensemble des navigateurs actuels (y compris IE11 et ultérieurs). Défiinir __proto__ sur quelque chose qui n'est pas un objet échouera silencieusement.</td>
-   <td>Cette méthode est dépréciée et n'est pas performante car les moteurs tentent d'optimiser les prototypes. Aussi, le modifier ainsi dynamiquement bloque ces optimisations et peut causer la recompilation du code pour qu'il fonctionne selon les spécifications. Cette méthode n'est pas prise en charge par IE10 et les versions antérieures.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="prototype_et_Object.getPrototypeOf"><code>prototype</code> et <code>Object.getPrototypeOf()</code></h2>
-
-<p>JavaScript peut prêter à confusion pour les développeurs utilisant Java ou C++. JavaScript est un langage dynamique et les structures peuvent évoluer lors de l'exécution.</p>
-
-<p>Vous avez peut-être remarqué que la fonction <code>A</code> possède une propriété spéciale intitulée <code>prototype</code>. Cette propriété spéciale fonctionne avec l'opérateur <code>new</code> Elle permet de copier la référence  l'objet prototype sur la propriété interne <code>[[Prototype]]</code> de la nouvelle instance créée. Ainsi, avec <code>var a1 = new A()</code>, Le moteur JavaScript définira <code>a1.[[Prototype]] = A.prototype</code>. Quand on tente d'accéder à une des propriétés de l'instance, JavaScript vérifie la présence sur l'instance puis analyse son prototype <code>[[Prototype]]</code>. Cela signifie que tout ce qui est défini sur <code>prototype</code> est effectivement partagé par l'ensemble des instances et on peut même modifier <code>prototype</code> en cours de route afin de modifier indirectement l'ensemble des instances.</p>
-
-<p>Dans l'exemple précédent, si on avait eu <code>var a1 = new A(); var a2 = new A();</code> alors <code>a1.faireUnTruc</code> aurait fait référence à <code>Object.getPrototypeOf(a1).faireUntruc</code> qui est identique à <code>A.prototype.faireUnTruc</code>. Autrement dit <code>Object.getPrototypeOf(a1).faireUnTruc == Object.getPrototypeOf(a2).faireUnTruc == A.prototype.faireUnTruc</code>.</p>
-
-<p>Autrement dit <code>prototype</code> peut être utilisé pour les types et <code>Object.getPrototypeOf()</code> pour les instances.</p>
-
-<p><code>[[Prototype]]</code> est analysé de façon récursive. Ainsi, <code>a1.faireUnTruc</code> correspondra à chercher <code>Object.getPrototypeOf(a1).faireUnTruc</code> puis <code>Object.getPrototypeOf(Object.getPrototypeOf(a1)).faireUnTruc</code> etc., jusqu'à ce qu'elle soit trouvée ou que <code>Object.getPrototypeOf</code>renvoie <code>null</code>.</p>
-
-<p>Ainsi, quand on appelle :</p>
-
-<pre class="brush: js">var o = new Toto();</pre>
-
-<p>Le moteur JavaScript effectue les étapes suivantes :</p>
-
-<pre class="brush: js">var o = new Object();
-o.[[Prototype]] = Toto.prototype;
-Toto.call(o);</pre>
-
-<p>(ou quelque chose qui y ressemble) et si on écrit ensuite :</p>
-
-<pre class="brush: js">o.unePropriété;</pre>
-
-<p>Le moteur vérifie si <code>o</code> possède une propriété <code>unePropriété</code> en propre. Si ce n'est pas le cas, il vérifie <code>Object.getPrototypeOf(o).unePropriété</code> et ainsi de suite.</p>
-
-<h2 id="Conclusion">Conclusion</h2>
-
-<p>Il est essentiel de comprendre le modèle d'héritage prototypique avant d'écrire du code complexe qui repose sur ces notions. Il est également préférable d'avoir une idée de la longueur de la chaîne de prototype utilisée pour les différents objets et de fragmenter cette chaîne si besoin afin d'éviter des écueils de performances. Enfin, on veillera à ne pas étendre les prototypes natifs sauf afin d'émuler des nouvelles fonctionnalités qui ne seraient pas disponibles dans l'environnement utilisé.</p>
diff --git a/files/fr/web/javascript/inheritance_and_the_prototype_chain/index.md b/files/fr/web/javascript/inheritance_and_the_prototype_chain/index.md
new file mode 100644
index 0000000000..160e5aa03e
--- /dev/null
+++ b/files/fr/web/javascript/inheritance_and_the_prototype_chain/index.md
@@ -0,0 +1,646 @@
+---
+title: Héritage et chaîne de prototype
+slug: Web/JavaScript/Inheritance_and_the_prototype_chain
+tags:
+  - Guide
+  - Héritage
+  - Intermédiaire
+  - JavaScript
+  - OOP
+translation_of: Web/JavaScript/Inheritance_and_the_prototype_chain
+original_slug: Web/JavaScript/Héritage_et_chaîne_de_prototypes
+---
+{{jsSidebar("Advanced")}}
+
+JavaScript peut prêter à confusion losqu'on est habitué à manipuler des langages de programmation manipulant les classes (tels que Java ou C++). En effet, JavaScript est un langage dynamique et ne possède pas de concept de classe à part entière (le mot-clé `class` a certes été ajouté avec ES2015 mais il s'agit uniquement de sucre syntaxique, JavaScript continue de reposer sur l'héritage prototypique).
+
+En ce qui concerne l'héritage, JavaScript n'utilise qu'une seule structure : les objets. Chaque objet possède une propriété privée qui contient un lien vers un autre objet appelé le **prototype**. Ce prototype possède également son prototype et ainsi de suite, jusqu'à ce qu'un objet ait {{jsxref("null")}} comme prototype. Par définition, `null` ne possède pas de prototype et est ainsi le dernier maillon de la **chaîne de prototype**.
+
+La majorité des objets JavaScript sont des instances de {{jsxref("Object")}} qui est l'avant dernier maillon de la chaîne de prototype.
+
+Bien que cette confusion (entre classe et prototype) soit souvent avancée comme l'une des faiblesses de JavaScript, le modèle prototypique est plus puissant que le modèle classique et il est notamment possible de construire un modèle classique à partir d'un modèle prototypique.
+
+## Héritage et chaîne de prototype
+
+### Propriété héritées
+
+Les objets JavaScript sont des ensembles dynamiques de propriétés (les propriétés directement rattachées à un objet sont appelées **propriétés en propre (_own properties_)**). Les objets JavaScript possèdent également un lien vers un objet qui est leur prototype. Lorsqu'on tente d'accéder aux propriétés d'un objet, la propriété sera recherchée d'abord sur l'objet même, puis sur son prototype, puis sur le prototype du prototype et ainsi de suite jusqu'à ce qu'elle soit trouvée ou que la fin de la chaîne de prototype ait été atteinte.
+
+> **Note :** Dans la spécification ECMAScript, on utilise la notation `unObjet.[[Prototype]]` pour faire référence au prototype de `unObjet`. Depuis ECMAScript 2015, on peut accéder à `[[Prototype]]` grâce aux accesseurs {{jsxref("Object.getPrototypeOf()")}} et {{jsxref("Object.setPrototypeOf()")}}. Cela est équivalent à la propriété JavaScript `__proto__` qui était non-standard avant ES2015 mais qui était de fait implémentée par la majorité des navigateurs.
+>
+> Cette propriété ne devrait pas être confondue avec la propriété `func.prototype` des fonctions qui définissent le `[[Prototype]]` à affecter aux instances des objets créés par cette fonction lorsqu'elle est utilisée comme constructeur. La propriété **`Object.prototype`** représente le prototype de {{jsxref("Object")}}.
+
+Voici ce qui se produit lorsqu'on tente d'accéder à une propriété :
+
+```js
+// On commence par créer un objet o pour lequel la fonction f sera
+// son constructeur et lui créera deux propriétés en propre
+// a et b :
+let f = function () {
+   this.a = 1;
+   this.b = 2;
+}
+let o = new f(); // {a: 1, b: 2}
+
+// on ajoute des propriétés au prototype de la fonction
+// f
+f.prototype.b = 3;
+f.prototype.c = 4;
+
+// Note : on ne définit pas le prototype de f avec f.prototype = {b:3,c:4};
+// car cela briserait la chaîne de prototype
+
+// o.[[Prototype]] possède les propriétés b and c.
+// o.[[Prototype]].[[Prototype]] est Object.prototype.
+// Enfin, o.[[Prototype]].[[Prototype]].[[Prototype]] vaut null.
+// On a alors atteint la fin de la chaîne de prototype car,
+// par définition, null n'a pas de [[Prototype]].
+// Ainsi, la chaîne complète est ici :
+// {a: 1, b: 2} ---> {b: 3, c: 4} ---> Object.prototype ---> null
+
+console.log(o.a); // 1
+// Existe-t-il une propriété 'a' en propre sur o ? Oui, elle vaut 1.
+
+console.log(o.b); // 2
+// Existe-t-il une propriété 'b' en propre sur o ? Oui, elle vaut 2.
+// Le prototype possède également une propriété 'b' mais elle n'est pas
+// utilisée.
+// C'est ce qu'on appelle l'ombrage (shadowing en anglais)
+
+console.log(o.c); // 4
+// Existe-t-il une propriété 'c' en propre sur o ? Non, on vérifie le
+// prototype.
+// Existe-t-il une propriété 'c' en propre sur o.[[Prototype]] ?
+// Oui, elle vaut 4.
+
+console.log(o.d); // undefined
+// Existe-t-il une propriété 'd' en propre sur o ? Non, on vérifie le
+// prototype.
+// Existe-t-il une propriété 'd' en propre sur o.[[Prototype]] ? Non, on vérifie le
+// prototype.
+// o.[[Prototype]].[[Prototype]] est Object.prototype et ne contient pas
+// de propriété 'd' par défaut. On vérifie son prototype.
+// o.[[Prototype]].[[Prototype]].[[Prototype]] est null, on arrête la recherche
+// aucune propriété n'est trouvée, le moteur renvoie undefined.
+```
+
+Lorsquon définit une propriété sur un objet, cela définit une propriété en propre. La seule exception se produit lorsqu'on définit [un accesseur et/ou un mutateur](</fr/docs/Web/JavaScript/Guide/Utiliser_les_objets#Définir_des_accesseurs_et_des_mutateurs_(getters_et_setters)>) sur une propriété héritée.
+
+### Méthodes héritées
+
+JavaScript ne possède pas de méthodes au sens des langages de classe. En effet, en JavaScript, toute fonction associée à un objet est également une propriété. Une fonction héritée se comportera comme n'importe quelle autre propriété (y compris pour l'ombrage mentionné ci-avant où on pourra parler de surcharge).
+
+Lorsqu'une fonction héritée est exécutée, la valeur de [`this`](/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_this) pointe vers l'objet hérité et non vers l'objet prototype qui possède la fonction comme propriété en propre.
+
+```js
+var o = {
+  a: 2,
+  m: function() {
+    return this.a + 1;
+  }
+};
+
+console.log(o.m()); // 3
+// Quand on appelle o.m ici, 'this' fera référence à o
+
+var p = Object.create(o);
+// p est un objet qui hérite de o
+
+p.a = 4; // on crée une propriété 'a' en propre sur p
+console.log(p.m()); // 5
+// lorsque p.m est appelée, 'this' fait référence à p.
+// Ainsi quand p hérite de m via o,
+// 'this.a' signifie p.a, soit la propriété 'a' de p
+```
+
+## Utiliser les prototypes avec JavaScript
+
+Regardons un peu plus en détail ce qui se déroule en arrière-plan.
+
+> **Note :** Pour tous les exempls suivants, nous vous invitons à ouvrir la "console" de votre navigateur pour y copier/coller/éditer les fragments de code. Pour savoir comment lancer cette console, vous pouvez lire la documentation des navigateurs : [Firefox](/fr/docs/Tools), [Chrome](https://developers.google.com/web/tools/chrome-devtools/), [Edge](https://docs.microsoft.com/en-us/microsoft-edge/devtools-guide).
+
+En JavaScript, comme mentionné ci-dessus, les fonctions peuvent avoir des propriétés. Toutes les fonctions ont une propriété spéciale intitulée `prototype`.
+
+```js
+function faireUnTruc(){}
+console.log( faireUnTruc.prototype ); // Object {...}
+// Peu importe comment vous déclarez la fonction.
+// une fonction en JavaScript aura toujours une propriété
+// prototype par défaut.
+var faireUnTruc= function(){};
+console.log(faireUnTruc.prototype); // Object {...}
+```
+
+Comme mentionné avant, `faireUnTruc()` possède une propriété par défaut `prototype`. Après avoir exécuté ce code dans une console, la console devrait afficher un objet semblable à :
+
+```js
+{
+    constructor: ƒ faireUnTruc(),
+    __proto__: {
+        constructor: ƒ Object(),
+        hasOwnProperty: ƒ hasOwnProperty(),
+        isPrototypeOf: ƒ isPrototypeOf(),
+        propertyIsEnumerable: ƒ propertyIsEnumerable(),
+        toLocaleString: ƒ toLocaleString(),
+        toString: ƒ toString(),
+        valueOf: ƒ valueOf()
+    }
+}
+```
+
+On peut ajouter des propriétés au prototype de `faireUnTruc()` comme suit :
+
+```js
+function faireUnTruc(){}
+faireUnTruc.prototype.toto = "truc";
+console.log( faireUnTruc.prototype );
+```
+
+Produira le résultat suivant :
+
+```js
+{
+    toto: "truc",
+    constructor: ƒ faireUnTruc(),
+    __proto__: {
+        constructor: ƒ Object(),
+        hasOwnProperty: ƒ hasOwnProperty(),
+        isPrototypeOf: ƒ isPrototypeOf(),
+        propertyIsEnumerable: ƒ propertyIsEnumerable(),
+        toLocaleString: ƒ toLocaleString(),
+        toString: ƒ toString(),
+        valueOf: ƒ valueOf()
+    }
+}
+```
+
+On peut utiliser l'opérateur `new` afin de créer une instance de `faireUnTruc()` basée sur ce prototype. Pour utiliser l'opérateur `new`, il suffira d'appeler la fonction et de précéder cet appel avec le mot-clé `new`. Lorsqu'on appelle une fonction avec un opérateur `new`, celle-ci renvoie un objet qui est une instance de la fonction. On peut ensuite ajouter des propriétés sur cet objet.
+
+Voyons le code qui suit :
+
+```js
+function faireUnTruc(){}
+faireUnTruc.prototype.toto = "truc"; // on ajoute une propriété au prototype
+var uneInstance = new faireUnTruc();
+uneInstance.prop = "une valeur"; // on ajoute une propriété sur l'objet
+console.log(uneInstance);
+```
+
+Exécuté, ce code produira le résultat suivant dans la console :
+
+```js
+{
+    prop: "une valeur",
+    __proto__: {
+        toto: "truc",
+        constructor: ƒ faireUnTruc(),
+        __proto__: {
+            constructor: ƒ Object(),
+            hasOwnProperty: ƒ hasOwnProperty(),
+            isPrototypeOf: ƒ isPrototypeOf(),
+            propertyIsEnumerable: ƒ propertyIsEnumerable(),
+            toLocaleString: ƒ toLocaleString(),
+            toString: ƒ toString(),
+            valueOf: ƒ valueOf()
+        }
+    }
+}
+```
+
+Comme nous l'avons vu avant, la valeur de `__proto__` pour `uneInstance` est `faireUnTruc.prototype`. Mais quel est l'intérêt ? Lorsqu'on accède à une propriété de `uneInstance`, le moteur contrôle d'abord si `uneInstance` possède cette propriété.
+
+Si `uneInstance` ne possède pas cette propriété, le moteur contrôlera la propriété sur la propriété `__proto__` de `uneInstance` (c'est-à-dire `faireUnTruc.prototype`). Si la propriété `__proto__` de `uneInstance` possède la propriété qu'on recherche, ce sera celle-ci qui sera utilisée.
+
+Si `__proto__` de `unTruc` ne possède pas la propriété recherchée, le moteur contrôle la propriété `__proto__` de la propriété `__proto__` de `uneInstance`. Par défaut, la propriété `__proto__` de n'importe quel propriété `prototype`d'une fonction est  `window.Object.prototype`. Ainsi, la propriété `__proto__` de la propriété `__proto__` de  `uneInstance` (c'est-à-dire `__proto__` de `faireUnTruc.prototype` (c'est-à-dire. `Object.prototype`)) est contrôlée pour vérifier si la propriété y est présente.
+
+Si la propriété n'est pas trouvée sur la propriété `__proto__` de la propriété `__proto__` de `uneInstance`, c'est la proriété `__proto__` de la propriété `__proto__` de la propriété `__proto__` de `uneInstance` qui est contrôlée. Cependant il y a un problème car la propriété `__proto__` de la propriété `__proto__` de la propriété `__proto__` de `unTruc` n'existe pas. Autrement dit, toute la chaîne de prototype a été parcouru et on ne peut pas remonter d'un cran sur un autre `__proto__` et le moteur peut conclure que la propriété n'existe pas pour cet objet et renvoyer `undefined`.
+
+Regardons ce qui se produit dans la console avec un peu de code :
+
+```js
+function faireUnTruc(){}
+faireUnTruc.prototype.toto = "truc";
+var uneInstance = new faireUnTruc();
+uneInstance.prop = "une valeur";
+console.log("uneInstance.prop: " + uneInstance.prop);
+console.log("uneInstance.toto: " + uneInstance.toto);
+console.log("faireUnTruc.prop: " + faireUnTruc.prop);
+console.log("faireUnTruc.toto: " + faireUnTruc.toto);
+console.log("faireUnTruc.prototype.prop: " + faireUnTruc.prototype.prop);
+console.log("faireUnTruc.prototype.toto:  " + faireUnTruc.prototype.toto);
+```
+
+Le résultat est le suivant :
+
+```js
+uneInstance.prop: une valeur
+uneInstance.toto: truc
+faireUnTruc.prop: undefined
+faireUnTruc.toto: undefined
+faireUnTruc.prototype.prop: undefined
+faireUnTruc.prototype.toto: truc
+```
+
+## Les différentes façons de créer des objets et les impacts sur la chaîne de prototype
+
+### Objets créés avec les raccourcis syntaxiques (littéraux)
+
+```js
+var o = {a: 1};
+
+// Le nouvel objet possède Object.prototype comme [[Prototype]]
+// o ne possède pas de propriété 'hasOwnProperty' en propre
+// hasOwnProperty est une propriété en propre de Object.prototype.
+// o hérite de hasOwnProperty via Object.prototype
+// Object.prototype possède null comme prototype.
+// o ---> Object.prototype ---> null
+
+var b = ['coucou', 'ça va', '?'];
+
+// Les tableaux (Array) héritent de Array.prototype
+// (qui possède les méthodes indexOf, forEach, etc.)
+// La chaîne de prototype est donc :
+// b ---> Array.prototype ---> Object.prototype ---> null
+
+function f() {
+  return 2;
+}
+
+// Les fonctions héritent de Function.prototype
+// (qui possède les méthodes call, bind, etc.)
+// La chaîne de prototype est donc
+// f ---> Function.prototype ---> Object.prototype ---> null
+```
+
+### Objets créés avec un constructeur
+
+En JavaScript, un constructeur est _juste_ une fonction que l'on invoque avec l'opérateur [`new`](/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_new).
+
+```js
+function Graphe() {
+  this.sommets = [];
+  this.arêtes = [];
+}
+
+Graphe.prototype = {
+  ajoutSommet: function(v) {
+    this.sommets.push(v);
+  }
+};
+
+var g = new Graphe();
+// g est un objet qui possède les propriétés 'sommets' and 'arêtes' en propre.
+// g.[[Prototype]] est la valeur de Graphe.prototype lorsque "new Graphe()" est exécuté.
+```
+
+### Objets créés avec `Object.create()`
+
+ECMAScript 5 a introduit une nouvelle méthode : {{jsxref("Object.create()")}}. Appeler cette méthode crée un nouvel objet et le prototype de cet objet est le premier argument de cette fonction :
+
+```js
+var a = {a: 1};
+// a ---> Object.prototype ---> null
+
+var b = Object.create(a);
+// b ---> a ---> Object.prototype ---> null
+console.log(b.a); // 1 (héritée)
+
+var c = Object.create(b);
+// c ---> b ---> a ---> Object.prototype ---> null
+
+var d = Object.create(null);
+// d ---> null
+console.log(d.hasOwnProperty);
+// undefined, car d n'hérite pas de Object.prototype
+```
+
+#### Suppression des propriétés avec `delete`
+
+L'opérateur [`delete`](/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/L_op%C3%A9rateur_delete) permet de supprimer une propriété directement rattachée à un objet. En revanche, il n'empêchera pas l'exploration de la chaîne de prototype :
+
+```js
+let a = {toto: 1};
+let b = Object.create(a);
+
+console.log(b.toto); // Affiche 1 car c'est une propriété disponible via le prototype
+b.toto = 5;
+console.log(b.toto); // Affiche 5, désormais cette propriété existe sur l'objet
+
+delete b.toto;
+console.log(b.toto); // Affiche 1 : la propriété n'est plus disponible sur l'objet mais
+                     // on peut toujours la récupérer via le prototype
+```
+
+### Objets créés avec le mot-clé `class`
+
+ECMAScript 2015 introduit plusieurs mots-clés destinés à créer du sucre syntaxique pour manipuler des [classes](/fr/docs/Web/JavaScript/Reference/Classes). Ces mots-clés sont {{jsxref("Instructions/class", "class")}}, {{jsxref("Classes/constructor", "constructor")}}, {{jsxref("Classes/static", "static")}}, {{jsxref("Classes/extends", "extends")}} et {{jsxref("Opérateurs/super", "super")}}.
+
+```js
+'use strict';
+
+class Polygone {
+  constructor(hauteur, largeur) {
+    this.hauteur = hauteur;
+    this.largeur = largeur;
+  }
+}
+
+class Carré extends Polygone {
+  constructor(longueurCôté) {
+    super(longueurCôté, longueurCôté);
+  }
+  get aire() {
+    return this.hauteur * this.largeur;
+  }
+  set longueurCôté(nouvelleLongueur) {
+    this.hauteur = nouvelleLongueur;
+    this.largeur = nouvelleLongueur;
+  }
+}
+
+var carré = new Carré(2);
+```
+
+### Performance
+
+Le temps de recherche des propriétés sera plus élevé si ces propriétés sont situées plus loin dans la chaîne de prototype. Tenter d'accéder à ces propriétés éloignées pourra avoir un impact négatif sur les performances. De plus, tenter d'accéder à des propriétés inexistantes entraîntera toujours le parcours de l'ensemble de la chaîne de prototype.
+
+Lorsqu'on parcourt les propriétés d'un objet, **toutes** les propriétés énumérables situées sur la chaîne de prototype seront parcourues. Pour vérifier si un objet possède une propriété en propre plus que via sa chaîne de prototype, on devra utiliser la méthode [`hasOwnProperty()`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object/hasOwnProperty) qui est héritée grâce à `Object.prototype`. Prenons un exemple concret avec le cas du graphe traité dans un exemple précédent :
+
+```js
+console.log(g.hasOwnProperty('arêtes'));
+// true
+
+console.log(g.hasOwnProperty('nononon'));
+// false
+
+console.log(g.hasOwnProperty('ajoutSommet'));
+// false
+
+console.log(g.__proto__.hasOwnProperty('ajoutSommet'));
+// true
+```
+
+> **Note :** Tester si une propriété vaut {{jsxref("undefined")}} ne suffit pas à vérifier la présence de la propriété sur un objet : une propriété peut très bien exister sur un objet mais valoir `undefined`.
+
+### Mauvaise pratique : étendre les prototypes natifs
+
+On peut parfois voir du code qui étend `Object.prototype` ou l'un des prototypes natifs.
+
+Cette technique est intitulée _monkey patching_ et brise l'encapsulation. Bien qu'elle soit utilisée par certains _frameworks_, il n'existe pas de raison suffisante pour étendre les objets natifs avec des fonctionnalités non-standard.
+
+La **seule** raison qui peut prévaloir pour l'extension de prototypes natifs est l'ajout de fonctionnalités JavaScript apparues avec les nouvelles versions des spécifications et moteurs afin d'en disposer dans de plus anciens environnements.
+
+### Résumé des méthodes pour étendre la chaîne de prototype
+
+Voici un tableau avec les quatre outils qui permettent d'étendre une chaîne de prototypes avec chacun leurs avantages et leurs inconvénients. Tous les exemples mentionnés permettent de créer le même objet `inst` (et affichant donc le même résultat dans la console) mais de façon différente.
+
+<table class="standard-table">
+  <tbody>
+    <tr>
+      <td style="width: 1%">Nom</td>
+      <td>Exemples</td>
+      <td>Avantages</td>
+      <td style="vertical-align: top; width: 60%">Inconvénients</td>
+    </tr>
+    <tr>
+      <td>Initialisation</td>
+      <td>
+        <pre class="brush: js">
+function toto(){}
+toto.prototype = {
+  toto_prop: "toto val"
+};
+function truc(){}
+var proto = new toto;
+proto.truc_prop = "truc val";
+truc.prototype = proto;
+var inst = new truc();
+console.log(inst.toto_prop);
+console.log(inst.truc_prop);
+</pre
+        >
+      </td>
+      <td style="vertical-align: top">
+        Prise en charge par l'ensemble des navigateurs. Cette méthode est très
+        rapide, standard et facilement optimisable.
+      </td>
+      <td>
+        <p>
+          Afin d'utiliser cette méthode, il faut que la fonction ait été
+          initialisée. Pendant cette initialisation, le constructeur peut
+          enregistrer des informations uniques qui doivent être générées pour
+          chaque objet.
+        </p>
+        <p>
+          Toutefois, il est possible que ces informations uniques ne soient
+          générées qu'une seule fois.
+        </p>
+        <p>
+          De plus, l'initialisation du constructeur peut ajouter des méthodes
+          non souhaitées sur l'objet.
+        </p>
+        <p>Cela dit, ces problèmes ne se révèlent que rarement.</p>
+      </td>
+    </tr>
+    <tr>
+      <td><code>Object.create()</code></td>
+      <td style="vertical-align: top">
+        <pre class="brush: js">
+function toto(){}
+toto.prototype = {
+  toto_prop: "toto val"
+};
+function truc(){}
+var proto = Object.create(
+  toto.prototype
+);
+proto.truc_prop = "truc val";
+truc.prototype = proto;
+var inst = new truc();
+console.log(inst.toto_prop);
+console.log(inst.truc_prop);
+</pre
+        >
+        <pre class="brush: js">
+function toto(){}
+toto.prototype = {
+  toto_prop: "toto val"
+};
+function truc(){}
+var proto = Object.create(
+  toto.prototype,
+  {
+    truc_prop: {
+      value: "truc val"
+    }
+  }
+);
+truc.prototype = proto;
+var inst = new truc();
+console.log(inst.toto_prop);
+console.log(inst.truc_prop)</pre
+        >
+      </td>
+      <td>
+        Prise en charge par la majorité des navigateurs actuels. Elle permet de
+        définir directement <code>__proto__</code> en une seule fois et le
+        navigateur peut mieux optimiser l'objet. Elle permet aussi de créer des
+        objets sans prototype avec <code>Object.create(null)</code>.
+      </td>
+      <td style="vertical-align: top">
+        <p>
+          Cette méthode n'est pas prise en charge par IE8 et les versions
+          antérieures. Toutefois, Microsoft ayant mis un terme au support des
+          systèmes qui utilisent ces navigateurs, ce ne devrait pas être un
+          problème pour la plupart des navigation.
+        </p>
+        <p>
+          De plus, la lenteur de l'initialisation de l'objet peut être causer
+          des soucis de performances lorsqu'on utilise un deuxième argument car
+          descripteur de propriété possède un objet rattaché. Lorsqu'on gère des
+          centaines de milliers de descripteurs, cela peut entraîner un certain
+          <em>lag</em>.
+        </p>
+      </td>
+    </tr>
+    <tr>
+      <td>
+        <p><code>Object.setPrototypeOf()</code></p>
+      </td>
+      <td>
+        <pre class="brush: js">
+function toto(){}
+toto.prototype = {
+  toto_prop: "toto val"
+};
+function truc(){}
+var proto = {
+  truc_prop: "truc val"
+};
+Object.setPrototypeOf(
+  proto, toto.prototype
+);
+truc.prototype = proto;
+var inst = new truc();
+console.log(inst.toto_prop);
+console.log(inst.truc_prop);
+</pre
+        >
+        <pre class="brush: js">
+function toto(){}
+toto.prototype = {
+  toto_prop: "toto val"
+};
+function truc(){}
+var proto;
+proto=Object.setPrototypeOf(
+  { truc_prop: "truc val" },
+  toto.prototype
+);
+truc.prototype = proto;
+var inst = new truc();
+console.log(inst.toto_prop);
+console.log(inst.truc_prop)</pre
+        >
+      </td>
+      <td style="vertical-align: top">
+        Prise en charge par l'ensemble des navigateurs actuels. Elle permet de
+        manipuler dynamiquement le prototype d'un objet et également de
+        rattacher un prototype à un objet qui n'aurait pas de prototype.
+      </td>
+      <td>
+        Cette méthode devrait être dépréciée et possède des performances
+        faibles. En effet, les moteurs tenteront d'optimiser la connaissance de
+        la structure du prototype et cette méthode viendra à l'enconte de ces
+        hypothèses et certains navigateurs pourront même recompiler le code pour
+        le faire fonctionner selon les spécifications. Cette méthode n'est pas
+        prise en charge par IE8 et les versions antérieures.
+      </td>
+    </tr>
+    <tr>
+      <td><code>__proto__</code></td>
+      <td style="vertical-align: top">
+        <pre class="brush: js">
+function toto(){}
+toto.prototype = {
+  toto_prop: "toto val"
+};
+function truc(){}
+var proto = {
+  truc_prop: "truc val",
+  __proto__: toto.prototype
+};
+truc.prototype = proto;
+var inst = new truc();
+console.log(inst.toto_prop);
+console.log(inst.truc_prop);
+</pre
+        >
+        <pre class="brush: js">
+var inst = {
+  __proto__: {
+    truc_prop: "truc val",
+    __proto__: {
+      toto_prop: "toto val",
+      __proto__: Object.prototype
+    }
+  }
+};
+console.log(inst.toto_prop);
+console.log(inst.truc_prop)</pre
+        >
+      </td>
+      <td>
+        Prise en charge par l'ensemble des navigateurs actuels (y compris IE11
+        et ultérieurs). Défiinir __proto__ sur quelque chose qui n'est pas un
+        objet échouera silencieusement.
+      </td>
+      <td>
+        Cette méthode est dépréciée et n'est pas performante car les moteurs
+        tentent d'optimiser les prototypes. Aussi, le modifier ainsi
+        dynamiquement bloque ces optimisations et peut causer la recompilation
+        du code pour qu'il fonctionne selon les spécifications. Cette méthode
+        n'est pas prise en charge par IE10 et les versions antérieures.
+      </td>
+    </tr>
+  </tbody>
+</table>
+
+## `prototype` et `Object.getPrototypeOf()`
+
+JavaScript peut prêter à confusion pour les développeurs utilisant Java ou C++. JavaScript est un langage dynamique et les structures peuvent évoluer lors de l'exécution.
+
+Vous avez peut-être remarqué que la fonction `A` possède une propriété spéciale intitulée `prototype`. Cette propriété spéciale fonctionne avec l'opérateur `new` Elle permet de copier la référence  l'objet prototype sur la propriété interne `[[Prototype]]` de la nouvelle instance créée. Ainsi, avec `var a1 = new A()`, Le moteur JavaScript définira `a1.[[Prototype]] = A.prototype`. Quand on tente d'accéder à une des propriétés de l'instance, JavaScript vérifie la présence sur l'instance puis analyse son prototype `[[Prototype]]`. Cela signifie que tout ce qui est défini sur `prototype` est effectivement partagé par l'ensemble des instances et on peut même modifier `prototype` en cours de route afin de modifier indirectement l'ensemble des instances.
+
+Dans l'exemple précédent, si on avait eu `var a1 = new A(); var a2 = new A();` alors `a1.faireUnTruc` aurait fait référence à `Object.getPrototypeOf(a1).faireUntruc` qui est identique à `A.prototype.faireUnTruc`. Autrement dit `Object.getPrototypeOf(a1).faireUnTruc == Object.getPrototypeOf(a2).faireUnTruc == A.prototype.faireUnTruc`.
+
+Autrement dit `prototype` peut être utilisé pour les types et `Object.getPrototypeOf()` pour les instances.
+
+`[[Prototype]]` est analysé de façon récursive. Ainsi, `a1.faireUnTruc` correspondra à chercher `Object.getPrototypeOf(a1).faireUnTruc` puis `Object.getPrototypeOf(Object.getPrototypeOf(a1)).faireUnTruc` etc., jusqu'à ce qu'elle soit trouvée ou que `Object.getPrototypeOf`renvoie `null`.
+
+Ainsi, quand on appelle :
+
+```js
+var o = new Toto();
+```
+
+Le moteur JavaScript effectue les étapes suivantes :
+
+```js
+var o = new Object();
+o.[[Prototype]] = Toto.prototype;
+Toto.call(o);
+```
+
+(ou quelque chose qui y ressemble) et si on écrit ensuite :
+
+```js
+o.unePropriété;
+```
+
+Le moteur vérifie si `o` possède une propriété `unePropriété` en propre. Si ce n'est pas le cas, il vérifie `Object.getPrototypeOf(o).unePropriété` et ainsi de suite.
+
+## Conclusion
+
+Il est essentiel de comprendre le modèle d'héritage prototypique avant d'écrire du code complexe qui repose sur ces notions. Il est également préférable d'avoir une idée de la longueur de la chaîne de prototype utilisée pour les différents objets et de fragmenter cette chaîne si besoin afin d'éviter des écueils de performances. Enfin, on veillera à ne pas étendre les prototypes natifs sauf afin d'émuler des nouvelles fonctionnalités qui ne seraient pas disponibles dans l'environnement utilisé.
diff --git a/files/fr/web/javascript/javascript_technologies_overview/index.html b/files/fr/web/javascript/javascript_technologies_overview/index.html
deleted file mode 100644
index 7e9491ec06..0000000000
--- a/files/fr/web/javascript/javascript_technologies_overview/index.html
+++ /dev/null
@@ -1,85 +0,0 @@
----
-title: Survol des technologies JavaScript
-slug: Web/JavaScript/JavaScript_technologies_overview
-tags:
-  - Beginner
-  - DOM
-  - JavaScript
-translation_of: Web/JavaScript/JavaScript_technologies_overview
----
-<div>{{JsSidebar("Introductory")}}</div>
-
-<h2 id="Introduction">Introduction</h2>
-
-<p><a href="/fr/docs/Web/HTML">HTML</a> est utilisé pour définir la structure et le contenu d'une page web, <a href="/fr/docs/Web/CSS">CSS</a> permet de définir la mise en forme, le style graphique avec lequel afficher le contenu. <a href="/fr/docs/Web/JavaScript">JavaScript</a> permet quant à lui d'ajouter des fonctionnalités d'interaction pour créer des applications web riches en contenu.</p>
-
-<p>Cependant, le terme « JavaScript » au sens large regroupe divers éléments très différents : le langage cœur (ECMAScript) d'une part et les <a href="/fr/docs/Web/Reference/API">API Web</a> d'autre part et notamment le DOM (Document Object Model, ou Modèle d'Objet du Document).</p>
-
-<h2 id="JavaScript_le_langage_(ECMAScript)">JavaScript, le langage (ECMAScript)</h2>
-
-<p>Le langage JavaScript (au sens strict) est standardisé par le comité ECMA TC39 sous la forme d'un langage intitulé <a href="/fr/docs/Web/JavaScript/Language_Resources">ECMAScript</a>.</p>
-
-<p>Ce langage est aussi utilisé dans des environnements différents des navigateurs web, comme par exemple dans <a href="https://nodejs.org/">node.js</a>.</p>
-
-<h3 id="Quelles_sont_les_caractéristiques_d'ECMAScript">Quelles sont les caractéristiques d'ECMAScript?</h3>
-
-<p>Entre autres choses, ECMAScript définit :</p>
-
-<ul>
- <li><a href="/fr/docs/Web/JavaScript/Reference/Grammaire_lexicale">La syntaxe du langage</a> (règles d'interprétation (parsing), mots-clés, flux d'instructions, initialisation littérale d'objets...)</li>
- <li>Le mécanisme de traitement d'erreurs ({{jsxref("Instructions/throw","throw")}}, {{jsxref("Instructions/try...catch","try...catch")}} capacité qu'a l'utilisateur de créer des types d'erreurs personnalisés)</li>
- <li>Les types de variables (booléen, nombre, chaîne de caractères, fonction, objet...)</li>
- <li>L'objet global. Dans l'environnement d'un navigateur, cet objet global est l'objet {{domxref("Window","window")}}. ECMAScript ne définit ici que les API accessibles depuis l'objet global (peu importe l'environnement qui peut être différent d'un navigateur) (par exemple {{jsxref("parseInt","parseInt()")}}, {{jsxref("parseFloat","parseFloat()")}}, {{jsxref("decodeURI","decodeURI()")}}, {{jsxref("encodeURI","encodeURI()")}}...)</li>
- <li><a href="/fr/docs/Web/JavaScript/Guide/Inheritance_and_the_prototype_chain">Le mécanisme d'héritage</a> basé sur le concept de prototype</li>
- <li>Les objets et fonctions natifs ({{jsxref("JSON")}}, {{jsxref("Math")}}, méthodes de<code> </code> {{jsxref("Array.prototype")}}, méthodes d'introspection d'<code>Object</code>...)</li>
- <li><a href="/fr/docs/Web/JavaScript/Reference/Strict_mode">Le mode strict</a>.</li>
-</ul>
-
-<h3 id="Support_des_navigateurs">Support des navigateurs</h3>
-
-<p>En octobre 2016, les versions actuelles des principaux navigateurs web supportent <a href="/fr/docs/Web/JavaScript/New_in_JavaScript/ECMAScript_5_support_in_Mozilla">ECMAScript 5.1</a> et <a href="/fr/docs/Web/JavaScript/Nouveaut%C3%A9s_et_historique_de_JavaScript/Support_ECMAScript_6_par_Mozilla">ECMAScript 2015 (aussi appelé ES6)</a> mais certaines anciennes versions n'implémentent que ECMAScript 5.</p>
-
-<h3 id="Futur">Futur</h3>
-
-<p>La sixième édition majeure d'ECMAScript a été officiellement approuvée et publiée en tant que standard le 17 juin 2015 par l'assemblée générale ECMA. Depuis cette édition, les éditions ECMAScript sont publiées à un rythme annuel.</p>
-
-<h3 id="API_d'internationalisation">API d'internationalisation</h3>
-
-<p>La <a href="http://ecma-international.org/ecma-402/1.0/">spécification ECMAScript pour l'API d'internationalisation</a> est un ajout à la spécification du langage ECMAScript, également standardisée par ECMA TC39. L'API d'internationalisation ajoute la collation (c'est-à-dire la comparaison entre chaînes de caractères), le formatage de nombres, dates et heures dans les applications JavaScript en prenant en compte la locale de l'utilisateur pour fournir le meilleur format. Le standard initial a été aprouvé en décembre 2012 ; le statut de son implémentation dans les différents navigateurs est disponible sur la page de l'objet {{jsxref("Intl")}}. La spécification d'internationalisation est également ratifiée annuellement et les navigateurs améliorent leur implémentation au fur et à mesure.</p>
-
-<h2 id="Les_API_du_DOM_(Document_Object_Model)">Les API du DOM (<em>Document Object Model</em>)</h2>
-
-<h3 id="WebIDL">WebIDL</h3>
-
-<p>La <a href="http://www.w3.org/TR/WebIDL/">spécification WebIDL</a> fournit le lien entre les technologies DOM et ECMAScript.</p>
-
-<h3 id="Le_cœur_du_DOM">Le cœur du DOM</h3>
-
-<p>Le Modèle d'Objet du Document (<em>Document Object Model</em> ou DOM en anglais) est une convention multi-plateforme, indépendante du langage utilisée pour représenter et interagir avec les objets dans les documents HTML, XHTML et XML. Les objets de <strong>l'arbre du DOM</strong> peuvent être accédés et manipulés en utilisant des méthodes sur les objets. Les fonctionnalités principales du DOM sont standardisées par le {{Glossary("W3C")}}. Il définit les interfaces offertes par les documents HTML et XML sans cibler un langage de manipulation précis. Parmi les éléments définis par le DOM, on peut trouver:</p>
-
-<ul>
- <li>La structure du document, un modèle d'arbre et l'architecture d'événements DOM dans le <a href="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html">noyau DOM</a> : {{domxref("Node")}}, {{domxref("Element")}}, {{domxref("DocumentFragment")}}, {{domxref("Document")}}, {{domxref("DOMImplementation")}}, {{domxref("Event")}}, {{domxref("EventTarget")}}, …</li>
- <li>Une définition moins rigoureuse de l'architecture d'événements DOM, ainsi que des événements spécifiques avec <a href="http://dev.w3.org/2006/webapi/DOM-Level-3-Events/html/DOM3-Events.html">les événements DOM</a>.</li>
- <li>D'autres éléments tels que le <a href="http://www.w3.org/TR/DOM-Level-2-Traversal-Range/traversal.html">DOM Traversal</a> et le <a href="http://html5.org/specs/dom-range.html">DOM Range</a>.</li>
-</ul>
-
-<p>Du point de vue d'ECMAScript, les objets définis dans la spécification DOM sont appelés des « objets hôtes ».</p>
-
-<h3 id="Le_DOM_HTML">Le DOM HTML</h3>
-
-<p><a href="/fr/docs/Web/HTML">HTML</a>, le langage de balisage du Web, est spécifié en termes de DOM. Comme une couche au-dessus des concepts abstraits définis dans DOM Core, HTML définit également la <em>signification </em>des éléments. Le DOM HTML inclut des choses telles que la propriété <code>className</code> sur des éléments HTML, or des API telles que {{domxref("document.body")}}.<br>
- <br>
- La spécification HTML définit aussi les restrictions sur les documents ; par exemple, elle requiert que tous les enfants d'un élément {{HTMLRef("ul")}} (une liste non-ordonnée) soient des éléments {{HTMLRef("li")}}, puisqu'ils représentent les éléments d'une liste. En général, cela interdit aussi l'utilisation d'éléments et d'attributs qui ne sont pas définis dans un certain standard.<br>
- <br>
- Si vous cherchez la documentation sur l'objet {{domxref("Document")}}, l'objet {{domxref("Window")}} ou sur les autres éléments du DOM, vous pouvez lire <a href="/fr/docs/Web/API/Référence_du_DOM_Gecko">la documentation relative au DOM</a>.</p>
-
-<h2 id="D'autres_API_fréquemment_utilisées">D'autres API fréquemment utilisées</h2>
-
-<ul>
- <li>Les fonctions {{domxref("WindowTimers.setTimeout", "setTimeout")}} et {{domxref("WindowTimers.setInterval", "setInterval")}} ont d'abord été spécifiées dans l'interface {{domxref("Window")}} du standard HTML.</li>
- <li><a href="https://dvcs.w3.org/hg/xhr/raw-file/tip/Overview.html" title="http://dev.w3.org/2006/webapi/XMLHttpRequest-2/">XMLHttpRequest</a> : une API qui permet d'envoyer des requêtes HTTP asynchrones (voir aussi : <a href="/fr/docs/Web/API/XMLHttpRequest">la page MDN sur XMLHttpRequest</a>)</li>
- <li><a href="http://dev.w3.org/csswg/cssom/">CSS Object Model</a> : le CSSOM est utilisé pour abstraire les règles CSS sous forme d'objets. (voir aussi : <a href="/fr/docs/Web/API/CSS_Object_Model">la page MDN sur CSSOM</a>)</li>
- <li><a href="https://html.spec.whatwg.org/multipage/workers.html">WebWorkers</a> : une API qui permet d'effectuer des calculs parallèles (voir aussi : <a href="/fr/docs/Web/API/Web_Workers_API">la page MDN sur cette API</a>)</li>
- <li><a href="https://html.spec.whatwg.org/multipage//#network">WebSockets</a> : une API qui permet d'effectuer des communications bi-directionnelles de bas-niveau (voir aussi : <a href="/fr/docs/WebSockets">la page MDN sur cette API</a>)</li>
- <li><code><a href="https://html.spec.whatwg.org/multipage/scripting.html#2dcontext">Canvas2DContext</a></code> : Une API de dessin pour l'élément {{htmlelement("canvas")}}.</li>
-</ul>
diff --git a/files/fr/web/javascript/javascript_technologies_overview/index.md b/files/fr/web/javascript/javascript_technologies_overview/index.md
new file mode 100644
index 0000000000..95e2f5bcd5
--- /dev/null
+++ b/files/fr/web/javascript/javascript_technologies_overview/index.md
@@ -0,0 +1,79 @@
+---
+title: Survol des technologies JavaScript
+slug: Web/JavaScript/JavaScript_technologies_overview
+tags:
+  - Beginner
+  - DOM
+  - JavaScript
+translation_of: Web/JavaScript/JavaScript_technologies_overview
+---
+{{JsSidebar("Introductory")}}
+
+## Introduction
+
+[HTML](/fr/docs/Web/HTML) est utilisé pour définir la structure et le contenu d'une page web, [CSS](/fr/docs/Web/CSS) permet de définir la mise en forme, le style graphique avec lequel afficher le contenu. [JavaScript](/fr/docs/Web/JavaScript) permet quant à lui d'ajouter des fonctionnalités d'interaction pour créer des applications web riches en contenu.
+
+Cependant, le terme « JavaScript » au sens large regroupe divers éléments très différents : le langage cœur (ECMAScript) d'une part et les [API Web](/fr/docs/Web/Reference/API) d'autre part et notamment le DOM (Document Object Model, ou Modèle d'Objet du Document).
+
+## JavaScript, le langage (ECMAScript)
+
+Le langage JavaScript (au sens strict) est standardisé par le comité ECMA TC39 sous la forme d'un langage intitulé [ECMAScript](/fr/docs/Web/JavaScript/Language_Resources).
+
+Ce langage est aussi utilisé dans des environnements différents des navigateurs web, comme par exemple dans [node.js](https://nodejs.org/).
+
+### Quelles sont les caractéristiques d'ECMAScript?
+
+Entre autres choses, ECMAScript définit :
+
+- [La syntaxe du langage](/fr/docs/Web/JavaScript/Reference/Grammaire_lexicale) (règles d'interprétation (parsing), mots-clés, flux d'instructions, initialisation littérale d'objets...)
+- Le mécanisme de traitement d'erreurs ({{jsxref("Instructions/throw","throw")}}, {{jsxref("Instructions/try...catch","try...catch")}} capacité qu'a l'utilisateur de créer des types d'erreurs personnalisés)
+- Les types de variables (booléen, nombre, chaîne de caractères, fonction, objet...)
+- L'objet global. Dans l'environnement d'un navigateur, cet objet global est l'objet {{domxref("Window","window")}}. ECMAScript ne définit ici que les API accessibles depuis l'objet global (peu importe l'environnement qui peut être différent d'un navigateur) (par exemple {{jsxref("parseInt","parseInt()")}}, {{jsxref("parseFloat","parseFloat()")}}, {{jsxref("decodeURI","decodeURI()")}}, {{jsxref("encodeURI","encodeURI()")}}...)
+- [Le mécanisme d'héritage](/fr/docs/Web/JavaScript/Guide/Inheritance_and_the_prototype_chain) basé sur le concept de prototype
+- Les objets et fonctions natifs ({{jsxref("JSON")}}, {{jsxref("Math")}}, méthodes de` `{{jsxref("Array.prototype")}}, méthodes d'introspection d'`Object`...)
+- [Le mode strict](/fr/docs/Web/JavaScript/Reference/Strict_mode).
+
+### Support des navigateurs
+
+En octobre 2016, les versions actuelles des principaux navigateurs web supportent [ECMAScript 5.1](/fr/docs/Web/JavaScript/New_in_JavaScript/ECMAScript_5_support_in_Mozilla) et [ECMAScript 2015 (aussi appelé ES6)](/fr/docs/Web/JavaScript/Nouveaut%C3%A9s_et_historique_de_JavaScript/Support_ECMAScript_6_par_Mozilla) mais certaines anciennes versions n'implémentent que ECMAScript 5.
+
+### Futur
+
+La sixième édition majeure d'ECMAScript a été officiellement approuvée et publiée en tant que standard le 17 juin 2015 par l'assemblée générale ECMA. Depuis cette édition, les éditions ECMAScript sont publiées à un rythme annuel.
+
+### API d'internationalisation
+
+La [spécification ECMAScript pour l'API d'internationalisation](http://ecma-international.org/ecma-402/1.0/) est un ajout à la spécification du langage ECMAScript, également standardisée par ECMA TC39. L'API d'internationalisation ajoute la collation (c'est-à-dire la comparaison entre chaînes de caractères), le formatage de nombres, dates et heures dans les applications JavaScript en prenant en compte la locale de l'utilisateur pour fournir le meilleur format. Le standard initial a été aprouvé en décembre 2012 ; le statut de son implémentation dans les différents navigateurs est disponible sur la page de l'objet {{jsxref("Intl")}}. La spécification d'internationalisation est également ratifiée annuellement et les navigateurs améliorent leur implémentation au fur et à mesure.
+
+## Les API du DOM (_Document Object Model_)
+
+### WebIDL
+
+La [spécification WebIDL](http://www.w3.org/TR/WebIDL/) fournit le lien entre les technologies DOM et ECMAScript.
+
+### Le cœur du DOM
+
+Le Modèle d'Objet du Document (_Document Object Model_ ou DOM en anglais) est une convention multi-plateforme, indépendante du langage utilisée pour représenter et interagir avec les objets dans les documents HTML, XHTML et XML. Les objets de **l'arbre du DOM** peuvent être accédés et manipulés en utilisant des méthodes sur les objets. Les fonctionnalités principales du DOM sont standardisées par le {{Glossary("W3C")}}. Il définit les interfaces offertes par les documents HTML et XML sans cibler un langage de manipulation précis. Parmi les éléments définis par le DOM, on peut trouver:
+
+- La structure du document, un modèle d'arbre et l'architecture d'événements DOM dans le [noyau DOM](http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html) : {{domxref("Node")}}, {{domxref("Element")}}, {{domxref("DocumentFragment")}}, {{domxref("Document")}}, {{domxref("DOMImplementation")}}, {{domxref("Event")}}, {{domxref("EventTarget")}}, …
+- Une définition moins rigoureuse de l'architecture d'événements DOM, ainsi que des événements spécifiques avec [les événements DOM](http://dev.w3.org/2006/webapi/DOM-Level-3-Events/html/DOM3-Events.html).
+- D'autres éléments tels que le [DOM Traversal](http://www.w3.org/TR/DOM-Level-2-Traversal-Range/traversal.html) et le [DOM Range](http://html5.org/specs/dom-range.html).
+
+Du point de vue d'ECMAScript, les objets définis dans la spécification DOM sont appelés des « objets hôtes ».
+
+### Le DOM HTML
+
+[HTML](/fr/docs/Web/HTML), le langage de balisage du Web, est spécifié en termes de DOM. Comme une couche au-dessus des concepts abstraits définis dans DOM Core, HTML définit également la _signification_ des éléments. Le DOM HTML inclut des choses telles que la propriété `className` sur des éléments HTML, or des API telles que {{domxref("document.body")}}.
+
+La spécification HTML définit aussi les restrictions sur les documents ; par exemple, elle requiert que tous les enfants d'un élément {{HTMLRef("ul")}} (une liste non-ordonnée) soient des éléments {{HTMLRef("li")}}, puisqu'ils représentent les éléments d'une liste. En général, cela interdit aussi l'utilisation d'éléments et d'attributs qui ne sont pas définis dans un certain standard.
+
+Si vous cherchez la documentation sur l'objet {{domxref("Document")}}, l'objet {{domxref("Window")}} ou sur les autres éléments du DOM, vous pouvez lire [la documentation relative au DOM](/fr/docs/Web/API/Référence_du_DOM_Gecko).
+
+## D'autres API fréquemment utilisées
+
+- Les fonctions {{domxref("WindowTimers.setTimeout", "setTimeout")}} et {{domxref("WindowTimers.setInterval", "setInterval")}} ont d'abord été spécifiées dans l'interface {{domxref("Window")}} du standard HTML.
+- [XMLHttpRequest](https://dvcs.w3.org/hg/xhr/raw-file/tip/Overview.html "http://dev.w3.org/2006/webapi/XMLHttpRequest-2/") : une API qui permet d'envoyer des requêtes HTTP asynchrones (voir aussi : [la page MDN sur XMLHttpRequest](/fr/docs/Web/API/XMLHttpRequest))
+- [CSS Object Model](http://dev.w3.org/csswg/cssom/) : le CSSOM est utilisé pour abstraire les règles CSS sous forme d'objets. (voir aussi : [la page MDN sur CSSOM](/fr/docs/Web/API/CSS_Object_Model))
+- [WebWorkers](https://html.spec.whatwg.org/multipage/workers.html) : une API qui permet d'effectuer des calculs parallèles (voir aussi : [la page MDN sur cette API](/fr/docs/Web/API/Web_Workers_API))
+- [WebSockets](https://html.spec.whatwg.org/multipage//#network) : une API qui permet d'effectuer des communications bi-directionnelles de bas-niveau (voir aussi : [la page MDN sur cette API](/fr/docs/WebSockets))
+- [`Canvas2DContext`](https://html.spec.whatwg.org/multipage/scripting.html#2dcontext) : Une API de dessin pour l'élément {{htmlelement("canvas")}}.
diff --git a/files/fr/web/javascript/language_resources/index.html b/files/fr/web/javascript/language_resources/index.html
deleted file mode 100644
index 7e47a0d08b..0000000000
--- a/files/fr/web/javascript/language_resources/index.html
+++ /dev/null
@@ -1,151 +0,0 @@
----
-title: ECMAScript
-slug: Web/JavaScript/Language_Resources
-tags:
-  - Avancé
-  - JavaScript
-translation_of: Web/JavaScript/Language_Resources
----
-<div>{{JsSidebar}}</div>
-
-<p><strong>ECMAScript</strong> est un langage de script qui forme la base de <a href="/fr/docs/Web/JavaScript">JavaScript</a>. ECMAScript est standardisé par l'organisation <a href="https://www.ecma-international.org/">ECMA International</a> grâce aux spécifications <strong>ECMA-262 et ECMA-402</strong>. Les standards ECMAScript suivants ont été approuvés ou sont en cours de rédaction:</p>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th>Nom</th>
-   <th>Lien</th>
-   <th>Date de publication</th>
-   <th>Description</th>
-  </tr>
-  <tr>
-   <th colspan="4">Éditions actuelles</th>
-  </tr>
-  <tr>
-   <td>ECMA-262 10e édition</td>
-   <td><a href="https://tc39.github.io/ecma262/">Brouillon de travail</a></td>
-   <td>2019</td>
-   <td>Spécification du langage ECMAScript 2019</td>
-  </tr>
-  <tr>
-   <td>ECMA-262, 9e édition</td>
-   <td><a href="http://ecma-international.org/publications/files/ECMA-ST/Ecma-262.pdf">PDF</a>, <a href="http://ecma-international.org/ecma-262/9.0/index.html#Title">HTML</a>, <br>
-    <a href="https://tc39.github.io/ecma262/">Brouillon de travail</a>, <a href="https://github.com/tc39/ecma262">dépôt</a></td>
-   <td>2018</td>
-   <td>Spécification du langage ECMAScript 2018</td>
-  </tr>
-  <tr>
-   <td>ECMA-402 5e édition</td>
-   <td><a href="https://tc39.github.io/ecma402/">Brouillon de la spécification</a>, <a href="https://github.com/tc39/ecma402">dépôt</a></td>
-   <td>2018</td>
-   <td>Spécification pour l'API d'internationalisation ECMAScript 2018</td>
-  </tr>
-  <tr>
-   <th colspan="4">Éditions historiques/obsolètes</th>
-  </tr>
-  <tr>
-   <td>ECMA-262</td>
-   <td><a href="https://www.ecma-international.org/publications/files/ECMA-ST-ARCH/ECMA-262,%201st%20edition,%20June%201997.pdf">PDF</a></td>
-   <td>Juin 1997</td>
-   <td>ECMAScript : un langage de programmation générique, multi-plateforme. C'est la première version du standard ECMAScript.</td>
-  </tr>
-  <tr>
-   <td>ECMA-262, 2e édition</td>
-   <td><a href="https://www.ecma-international.org/publications/files/ECMA-ST-ARCH/ECMA-262,%202nd%20edition,%20August%201998.pdf">PDF</a></td>
-   <td>Août 1998</td>
-   <td>Spécification du langage ECMAScript. C'est la deuxième révision du standard. Elle correspond aussi au standard ISO 16262.</td>
-  </tr>
-  <tr>
-   <td>ECMA-262 3e édition</td>
-   <td><a href="https://www.ecma-international.org/publications/files/ECMA-ST-ARCH/ECMA-262,%203rd%20edition,%20December%201999.pdf">PDF</a></td>
-   <td>Décembre 1999</td>
-   <td>Spécification du langage ECMAScript. C'est la troisième révision du standard. Elle correspond à JavaScript 1.5.<br>
-    Voir aussi <a href="https://www.mozilla.org/js/language/E262-3-errata.html">l'errata</a> à ce propos.</td>
-  </tr>
-  <tr>
-   <td>ECMA-262 5e édition</td>
-   <td><a href="https://www.ecma-international.org/publications/files/ECMA-ST-ARCH/ECMA-262%205th%20edition%20December%202009.pdf">PDF</a></td>
-   <td>Décembre 2009</td>
-   <td>Spécification du langage ECMAScript. C'est la cinquième révision du standard.<br>
-    Voir aussi <a href="https://wiki.ecmascript.org/doku.php?id=es3.1:es3.1_proposal_working_draft">l'errata pour ES5</a> et <a href="/fr/DOcs/JavaScript/ECMAScript_5_support_in_Mozilla">la prise en charge d'ECMAScript 5 par Mozilla</a></td>
-  </tr>
-  <tr>
-   <td>ECMA-357</td>
-   <td><a href="https://www.ecma-international.org/publications/files/ECMA-ST-WITHDRAWN/ECMA-357,%201st%20edition,%20June%202004.pdf">PDF</a></td>
-   <td>Juin 2004</td>
-   <td><a href="/fr/DOcs/E4X">ECMAScript pour XML (E4X)</a>.<br>
-    Voir aussi<a class="link-https" href="https://bugzilla.mozilla.org/attachment.cgi?id=169406"> l'errata pour E4X</a>.</td>
-  </tr>
-  <tr>
-   <td>ECMA-262, édition 5.1</td>
-   <td><a href="https://www.ecma-international.org/ecma-262/5.1/Ecma-262.pdf">PDF</a>, <a href="https://www.ecma-international.org/ecma-262/5.1/">HTML</a></td>
-   <td>Juin 2011</td>
-   <td>Cette version correspond complètement à la troisième édition du standard international <a href="https://www.iso.org/iso/iso_catalogue/catalogue_tc/catalogue_detail.htm?csnumber=55755">ISO/IEC 16262:2011</a>.<br>
-    Elle inclut les correctifs lié à l'errata pour ES5, elle ne contient pas de nouvelles fonctionnalités.</td>
-  </tr>
-  <tr>
-   <td>ECMA-402 1ère édition</td>
-   <td><a href="https://ecma-international.org/ecma-402/1.0/ECMA-402.pdf">PDF</a>, <a href="https://ecma-international.org/ecma-402/1.0/index.html">HTML</a></td>
-   <td>Décembre 2012</td>
-   <td>Spécification pour l'API d'internationalisation ECMAScript</td>
-  </tr>
-  <tr>
-   <td>ECMA-262 6e édition</td>
-   <td><a href="https://www.ecma-international.org/publications/files/ECMA-ST/Ecma-262.pdf">PDF</a>, <a href="https://www.ecma-international.org/ecma-262/6.0/index.html">HTML</a></td>
-   <td>Juin 2015</td>
-   <td>Spécification 2015 pour le langage ECMAScript (sixième édition)</td>
-  </tr>
-  <tr>
-   <td>ECMA-402 2e édition</td>
-   <td><a href="https://www.ecma-international.org/ecma-402/2.0/ECMA-402.pdf">PDF</a></td>
-   <td>Juin 2015</td>
-   <td>Spécification pour l'API d'internationalisation ECMAScript 2015</td>
-  </tr>
-  <tr>
-   <td>ECMA-262 7e édition</td>
-   <td><a href="https://www.ecma-international.org/ecma-262/7.0/">HTML</a></td>
-   <td>Juin 2016</td>
-   <td>Spécification 2016 pour le langage ECMAScript (septième édition)</td>
-  </tr>
-  <tr>
-   <td>ECMA-402 3e édition</td>
-   <td><a href="https://www.ecma-international.org/ecma-402/3.0/">HTML</a></td>
-   <td>Juin 2016</td>
-   <td>Spécification pour l'API d'internationalisation ECMAScript 2016</td>
-  </tr>
-  <tr>
-   <td>ECMA-262 8e édition</td>
-   <td><a href="https://www.ecma-international.org/ecma-262/8.0/">HTML</a></td>
-   <td>Juin 2017</td>
-   <td>Spécification 2017 pour le langage ECMAScript (huitième édition)</td>
-  </tr>
-  <tr>
-   <td>ECMA-402 4e édition</td>
-   <td><a href="https://www.ecma-international.org/ecma-402/4.0/">HTML</a></td>
-   <td>Juin 2017</td>
-   <td>Spécification pour l'API d'internationalisation ECMAScript 2017</td>
-  </tr>
- </tbody>
-</table>
-
-<p>ES.Next est un nom dynamique qui fait toujours référence à la prochaine version d'ECMAScript, en cours de rédaction. Les fonctionnalités d'ES.Next sont plutôt considérées comme des propositions car la spécification n'a pas encore été finalisée.</p>
-
-<p>Pour plus d'informations sur l'histoire d'ECMAScript, voir <a href="https://fr.wikipedia.org/wiki/ECMAScript">la page Wikipédia sur ECMAScript</a>.</p>
-
-<p>Il est possible de participer ou de suivre les travaux concernant la prochaine révision de la spécification sur le langage ECMAScript, appelée « Harmony », ainsi que pour la spécification de l'API d'internationalisation grâce au wiki public et à la liste de diffusion<a class="link-https" href="https://mail.mozilla.org/listinfo/es-discuss"> es-discuss</a> accessibles depuis <a href="https://www.ecmascript.org/community.php">ecmascript.org</a>.</p>
-
-<h2 id="Implémentations">Implémentations</h2>
-
-<ul>
- <li><a href="/fr/docs/SpiderMonkey">SpiderMonkey</a> : le moteur JavaScript utilisé dans Firefox et les autres produits Mozilla</li>
- <li><a href="/fr/docs/Rhino">Rhino</a> : un moteur JavaScript écrit en Java</li>
- <li><a href="/fr/docs/Tamarin">Tamarin</a> : la machine virtuelle ActionScript (utilisée par Adobe® Flash® Player)</li>
- <li><a href="https://en.wikipedia.org/wiki/List_of_ECMAScript_engines">Autres implémentations</a> (Wikipédia).</li>
-</ul>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="https://brendaneich.com/">Le blog de Brendan Eich</a> (en anglais). Brendan Eich est le créateur de JavaScript et du moteur SpiderMonkey. Il continue de travailler avec le groupe de travail ECMA pour faire évoluer le langage.</li>
- <li><a href="https://dmitrysoshnikov.com/">L'analyse de Dmitry Soshnikov sur les troisième et cinquième édition d'ECMA-262</a></li>
-</ul>
diff --git a/files/fr/web/javascript/language_resources/index.md b/files/fr/web/javascript/language_resources/index.md
new file mode 100644
index 0000000000..f992cd5ffe
--- /dev/null
+++ b/files/fr/web/javascript/language_resources/index.md
@@ -0,0 +1,253 @@
+---
+title: ECMAScript
+slug: Web/JavaScript/Language_Resources
+tags:
+  - Avancé
+  - JavaScript
+translation_of: Web/JavaScript/Language_Resources
+---
+{{JsSidebar}}
+
+**ECMAScript** est un langage de script qui forme la base de [JavaScript](/fr/docs/Web/JavaScript). ECMAScript est standardisé par l'organisation [ECMA International](https://www.ecma-international.org/) grâce aux spécifications **ECMA-262 et ECMA-402**. Les standards ECMAScript suivants ont été approuvés ou sont en cours de rédaction:
+
+<table class="standard-table">
+  <tbody>
+    <tr>
+      <th>Nom</th>
+      <th>Lien</th>
+      <th>Date de publication</th>
+      <th>Description</th>
+    </tr>
+    <tr>
+      <th colspan="4">Éditions actuelles</th>
+    </tr>
+    <tr>
+      <td>ECMA-262 10e édition</td>
+      <td>
+        <a href="https://tc39.github.io/ecma262/">Brouillon de travail</a>
+      </td>
+      <td>2019</td>
+      <td>Spécification du langage ECMAScript 2019</td>
+    </tr>
+    <tr>
+      <td>ECMA-262, 9e édition</td>
+      <td>
+        <a
+          href="http://ecma-international.org/publications/files/ECMA-ST/Ecma-262.pdf"
+          >PDF</a
+        >,
+        <a href="http://ecma-international.org/ecma-262/9.0/index.html#Title"
+          >HTML</a
+        >, <br /><a href="https://tc39.github.io/ecma262/"
+          >Brouillon de travail</a
+        >, <a href="https://github.com/tc39/ecma262">dépôt</a>
+      </td>
+      <td>2018</td>
+      <td>Spécification du langage ECMAScript 2018</td>
+    </tr>
+    <tr>
+      <td>ECMA-402 5e édition</td>
+      <td>
+        <a href="https://tc39.github.io/ecma402/"
+          >Brouillon de la spécification</a
+        >, <a href="https://github.com/tc39/ecma402">dépôt</a>
+      </td>
+      <td>2018</td>
+      <td>Spécification pour l'API d'internationalisation ECMAScript 2018</td>
+    </tr>
+    <tr>
+      <th colspan="4">Éditions historiques/obsolètes</th>
+    </tr>
+    <tr>
+      <td>ECMA-262</td>
+      <td>
+        <a
+          href="https://www.ecma-international.org/publications/files/ECMA-ST-ARCH/ECMA-262,%201st%20edition,%20June%201997.pdf"
+          >PDF</a
+        >
+      </td>
+      <td>Juin 1997</td>
+      <td>
+        ECMAScript : un langage de programmation générique, multi-plateforme.
+        C'est la première version du standard ECMAScript.
+      </td>
+    </tr>
+    <tr>
+      <td>ECMA-262, 2e édition</td>
+      <td>
+        <a
+          href="https://www.ecma-international.org/publications/files/ECMA-ST-ARCH/ECMA-262,%202nd%20edition,%20August%201998.pdf"
+          >PDF</a
+        >
+      </td>
+      <td>Août 1998</td>
+      <td>
+        Spécification du langage ECMAScript. C'est la deuxième révision du
+        standard. Elle correspond aussi au standard ISO 16262.
+      </td>
+    </tr>
+    <tr>
+      <td>ECMA-262 3e édition</td>
+      <td>
+        <a
+          href="https://www.ecma-international.org/publications/files/ECMA-ST-ARCH/ECMA-262,%203rd%20edition,%20December%201999.pdf"
+          >PDF</a
+        >
+      </td>
+      <td>Décembre 1999</td>
+      <td>
+        Spécification du langage ECMAScript. C'est la troisième révision du
+        standard. Elle correspond à JavaScript 1.5.<br />Voir aussi
+        <a href="https://www.mozilla.org/js/language/E262-3-errata.html"
+          >l'errata</a
+        >
+        à ce propos.
+      </td>
+    </tr>
+    <tr>
+      <td>ECMA-262 5e édition</td>
+      <td>
+        <a
+          href="https://www.ecma-international.org/publications/files/ECMA-ST-ARCH/ECMA-262%205th%20edition%20December%202009.pdf"
+          >PDF</a
+        >
+      </td>
+      <td>Décembre 2009</td>
+      <td>
+        Spécification du langage ECMAScript. C'est la cinquième révision du
+        standard.<br />Voir aussi
+        <a
+          href="https://wiki.ecmascript.org/doku.php?id=es3.1:es3.1_proposal_working_draft"
+          >l'errata pour ES5</a
+        >
+        et
+        <a href="/fr/DOcs/JavaScript/ECMAScript_5_support_in_Mozilla"
+          >la prise en charge d'ECMAScript 5 par Mozilla</a
+        >
+      </td>
+    </tr>
+    <tr>
+      <td>ECMA-357</td>
+      <td>
+        <a
+          href="https://www.ecma-international.org/publications/files/ECMA-ST-WITHDRAWN/ECMA-357,%201st%20edition,%20June%202004.pdf"
+          >PDF</a
+        >
+      </td>
+      <td>Juin 2004</td>
+      <td>
+        <a href="/fr/DOcs/E4X">ECMAScript pour XML (E4X)</a>.<br />Voir aussi<a
+          class="link-https"
+          href="https://bugzilla.mozilla.org/attachment.cgi?id=169406"
+        >
+          l'errata pour E4X</a
+        >.
+      </td>
+    </tr>
+    <tr>
+      <td>ECMA-262, édition 5.1</td>
+      <td>
+        <a href="https://www.ecma-international.org/ecma-262/5.1/Ecma-262.pdf"
+          >PDF</a
+        >, <a href="https://www.ecma-international.org/ecma-262/5.1/">HTML</a>
+      </td>
+      <td>Juin 2011</td>
+      <td>
+        Cette version correspond complètement à la troisième édition du standard
+        international
+        <a
+          href="https://www.iso.org/iso/iso_catalogue/catalogue_tc/catalogue_detail.htm?csnumber=55755"
+          >ISO/IEC 16262:2011</a
+        >.<br />Elle inclut les correctifs lié à l'errata pour ES5, elle ne
+        contient pas de nouvelles fonctionnalités.
+      </td>
+    </tr>
+    <tr>
+      <td>ECMA-402 1ère édition</td>
+      <td>
+        <a href="https://ecma-international.org/ecma-402/1.0/ECMA-402.pdf"
+          >PDF</a
+        >,
+        <a href="https://ecma-international.org/ecma-402/1.0/index.html"
+          >HTML</a
+        >
+      </td>
+      <td>Décembre 2012</td>
+      <td>Spécification pour l'API d'internationalisation ECMAScript</td>
+    </tr>
+    <tr>
+      <td>ECMA-262 6e édition</td>
+      <td>
+        <a
+          href="https://www.ecma-international.org/publications/files/ECMA-ST/Ecma-262.pdf"
+          >PDF</a
+        >,
+        <a href="https://www.ecma-international.org/ecma-262/6.0/index.html"
+          >HTML</a
+        >
+      </td>
+      <td>Juin 2015</td>
+      <td>Spécification 2015 pour le langage ECMAScript (sixième édition)</td>
+    </tr>
+    <tr>
+      <td>ECMA-402 2e édition</td>
+      <td>
+        <a href="https://www.ecma-international.org/ecma-402/2.0/ECMA-402.pdf"
+          >PDF</a
+        >
+      </td>
+      <td>Juin 2015</td>
+      <td>Spécification pour l'API d'internationalisation ECMAScript 2015</td>
+    </tr>
+    <tr>
+      <td>ECMA-262 7e édition</td>
+      <td>
+        <a href="https://www.ecma-international.org/ecma-262/7.0/">HTML</a>
+      </td>
+      <td>Juin 2016</td>
+      <td>Spécification 2016 pour le langage ECMAScript (septième édition)</td>
+    </tr>
+    <tr>
+      <td>ECMA-402 3e édition</td>
+      <td>
+        <a href="https://www.ecma-international.org/ecma-402/3.0/">HTML</a>
+      </td>
+      <td>Juin 2016</td>
+      <td>Spécification pour l'API d'internationalisation ECMAScript 2016</td>
+    </tr>
+    <tr>
+      <td>ECMA-262 8e édition</td>
+      <td>
+        <a href="https://www.ecma-international.org/ecma-262/8.0/">HTML</a>
+      </td>
+      <td>Juin 2017</td>
+      <td>Spécification 2017 pour le langage ECMAScript (huitième édition)</td>
+    </tr>
+    <tr>
+      <td>ECMA-402 4e édition</td>
+      <td>
+        <a href="https://www.ecma-international.org/ecma-402/4.0/">HTML</a>
+      </td>
+      <td>Juin 2017</td>
+      <td>Spécification pour l'API d'internationalisation ECMAScript 2017</td>
+    </tr>
+  </tbody>
+</table>
+
+ES.Next est un nom dynamique qui fait toujours référence à la prochaine version d'ECMAScript, en cours de rédaction. Les fonctionnalités d'ES.Next sont plutôt considérées comme des propositions car la spécification n'a pas encore été finalisée.
+
+Pour plus d'informations sur l'histoire d'ECMAScript, voir [la page Wikipédia sur ECMAScript](https://fr.wikipedia.org/wiki/ECMAScript).
+
+Il est possible de participer ou de suivre les travaux concernant la prochaine révision de la spécification sur le langage ECMAScript, appelée « Harmony », ainsi que pour la spécification de l'API d'internationalisation grâce au wiki public et à la liste de diffusion[ es-discuss](https://mail.mozilla.org/listinfo/es-discuss) accessibles depuis [ecmascript.org](https://www.ecmascript.org/community.php).
+
+## Implémentations
+
+- [SpiderMonkey](/fr/docs/SpiderMonkey) : le moteur JavaScript utilisé dans Firefox et les autres produits Mozilla
+- [Rhino](/fr/docs/Rhino) : un moteur JavaScript écrit en Java
+- [Tamarin](/fr/docs/Tamarin) : la machine virtuelle ActionScript (utilisée par Adobe® Flash® Player)
+- [Autres implémentations](https://en.wikipedia.org/wiki/List_of_ECMAScript_engines) (Wikipédia).
+
+## Voir aussi
+
+- [Le blog de Brendan Eich](https://brendaneich.com/) (en anglais). Brendan Eich est le créateur de JavaScript et du moteur SpiderMonkey. Il continue de travailler avec le groupe de travail ECMA pour faire évoluer le langage.
+- [L'analyse de Dmitry Soshnikov sur les troisième et cinquième édition d'ECMA-262](https://dmitrysoshnikov.com/)
diff --git a/files/fr/web/javascript/memory_management/index.html b/files/fr/web/javascript/memory_management/index.html
deleted file mode 100644
index 1e42785cde..0000000000
--- a/files/fr/web/javascript/memory_management/index.html
+++ /dev/null
@@ -1,208 +0,0 @@
----
-title: Gestion de la mémoire
-slug: Web/JavaScript/Memory_Management
-tags:
-  - JavaScript
-  - Mémoire
-  - Performance
-translation_of: Web/JavaScript/Memory_Management
-original_slug: Web/JavaScript/Gestion_de_la_mémoire
----
-<div>{{JsSidebar("Advanced")}}</div>
-
-<p>Les langages de bas niveau, tels que C, possèdent des primitives permettant de gérer la mémoire : <code><a href="https://pubs.opengroup.org/onlinepubs/009695399/functions/malloc.html">malloc()</a></code> et <code><a href="https://en.wikipedia.org/wiki/C_dynamic_memory_allocation#Overview_of_functions">free()</a></code> par exemple. En revanche, lorsqu'on utilise JavaScript, la mémoire est allouée lors de la création des objets puis libérée « automatiquement » lorsque ceux-ci ne sont plus utilisés. Cette libération automatique est appelée <em>garbage collection </em>en anglais ou ramasse-miettes. Le fait que ce processus soit automatique est souvent source de confusion et donne parfois l'impression que JavaScript (ou d'autres langages de haut niveau) ne permet pas de gérer la mémoire : nous allons voir que ce n'est pas le cas.</p>
-
-<h2 id="Le_cycle_de_vie_de_la_mémoire">Le cycle de vie de la mémoire</h2>
-
-<p>Quel que soit le langage de programmation, le cycle de vie de la mémoire ressemblera à :</p>
-
-<ol>
- <li>Allouer la mémoire dont on a besoin</li>
- <li>Utiliser cette mémoire allouée (lecture, écriture)</li>
- <li>Libérer la mémoire allouée lorsqu'on n'en a plus besoin</li>
-</ol>
-
-<p>Le deuxième point est explicite, au niveau du code, pour tous les langages de programmation. Le premier et le troisième points sont explicites pour les langages de bas niveau mais souvent implicites pour les langages de haut niveau tels que JavaScript.</p>
-
-<h3 id="Allocation_de_la_mémoire_en_JavaScript">Allocation de la mémoire en JavaScript</h3>
-
-<h4 id="Initialisation_des_valeurs">Initialisation des valeurs</h4>
-
-<p>Afin de simplifier l'écriture de code, JavaScript alloue la mémoire lors de la déclaration des variables :</p>
-
-<pre class="brush: js">// alloue de la mémoire pour un nombre
-var n = 123;
-// alloue de la mémoire pour une chaîne de caractères
-var s = "azerty";
-
-// alloue de la mémoire pour un objet et les valeurs qu'il contient
-var o = {
-  a: 1,
-  b: null
-};
-
-// alloue de la mémoire pour un tableau et les valeurs qu'il contient
-var a = [1, null, "abra"];
-
-// alloue de la mémoire pour une fonction
-// une fonction est un objet qui peut être appelé
-function f(a) {
-  return a + 2;
-}
-
-// les expressions de fonction allouent aussi de la mémoire
-unElement.addEventListener('click', function(){
-  unElement.style.backgroundColor = 'blue';
-}, false);
-</pre>
-
-<h4 id="Allocation_par_appels_de_fonctions">Allocation par appels de fonctions</h4>
-
-<p>Certains appels de fonctions entraînent l'allocation mémoire d'un objet.</p>
-
-<pre class="brush: js">// Alloue la mémoire pour un objet date
-var d = new Date();
-
-// Alloue de la mémoire pour un objet représentant un élément du DOM
-var e = document.createElement('div');
-</pre>
-
-<p>Certaines méthodes allouent de la mémoire pour des nouveaux objets ou de nouvelles valeurs.</p>
-
-<pre class="brush: js">var s = "azerty";
-var s2 = s.substr(0, 3); // s2 est une nouvelle chaîne de caractères
-// Les chaînes étant immuables, JavaScript peut choisir
-// de ne pas allouer de mémoire mais seulement
-// de stocker l'intervalle [0, 3].
-
-var a = ["ouais ouais", "nan nan"];
-var a2 = ["génération", "nan nan"];
-var a3 = a.concat(a2);
-// nouveau tableau de 4 éléments
-// (résultat de la concaténation de a et a2)
-</pre>
-
-<h3 id="Utilisation_des_variables">Utilisation des variables</h3>
-
-<p>Utiliser des variables revient à lire et écrire la mémoire allouée. Cela peut être effectué lorsqu'on lit ou modifie la valeur d'une variable ou d'une propriété d'un objet ou encore lorsqu'on passe un argument à une fonction.</p>
-
-<h3 id="Libérer_la_mémoire_qui_n'est_plus_nécessaire">Libérer la mémoire qui n'est plus nécessaire</h3>
-
-<p>La plupart des problèmes concernant la gestion de la mémoire surviennent à cet endroit. Le plus difficile est de savoir « quand » la mémoire allouée n'est plus utilisée. Pour les langages « bas niveau », il faut donc que le développeur détermine quelle partie de la mémoire n'est plus utilisée à tel endroit du code et la libère.</p>
-
-<p>Les interpréteurs des langages de haut niveau intègrent un composant logiciel, appelé « ramasse-miettes » qui a pour but de surveiller l'utilisation de la mémoire afin de déterminer quand une partie de la mémoire allouée n'est plus utilisée afin de la libérer automatiquement. Ce procédé ne peut être qu'une approximation car savoir si tel ou tel fragment de mémoire est nécessaire est un problème <a href="https://fr.wikipedia.org/wiki/D%C3%A9cidabilit%C3%A9">indécidable</a> (autrement dit, ce problème ne peut être résolu par un algorithme).</p>
-
-<h2 id="Le_ramasse-miettes_ou_garbage_collection">Le ramasse-miettes ou <em>garbage collection</em></h2>
-
-<p>Comme on vient de le voir, savoir si de la mémoire peut être libérée demeure un problème indécidable. Les ramasses-miettes ne sont donc que des solutions restreintes pour ce problème. La section qui suit détaille les notions importantes pour comprendre ce mécanisme, ainsi que ses limitations.</p>
-
-<h3 id="Références">Références</h3>
-
-<p>Le concept principal utilisé par les algorithmes de ramasse-miettes est celui de <em>référence</em>. Dans ce contexte, un objet en référence un autre lorsqu'il a accès à lui (implicitement ou explicitement). Ainsi, un objet JavaScript référencera son <a href="/fr/docs/Web/JavaScript/Guide/Inheritance_and_the_prototype_chain">prototype</a> (référence implicite) et ses propriétés (référence explicite).</p>
-
-<p>Dans ce contexte, la notion d'objet s'étend et dépasse celle utilisée pour décrire les objets JavaScript, elle contiendra notamment les portées de fonctions (ou la portée globale).</p>
-
-<h3 id="Compter_les_références">Compter les références</h3>
-
-<p>L'algorithme le plus simple consiste à faire l'équivalence entre « un objet n'est plus nécessaire » et « un objet n'a pas d'objet le référençant ». Ainsi un objet peut être « ramassé » par le ramasse-miettes quand il n'y a plus de références pointant vers lui.</p>
-
-<h4 id="Exemple">Exemple</h4>
-
-<pre class="brush: js">var o = {
-  a: {
-    b: 2
-  }
-};
-// 2 objets sont créés. L'un est référencé par l'autre en tant que propriété.
-// L'autre est référencé car assigné à la variable 'o'.
-// Aucun des deux ne peut être ramassé par le ramasse-miettes.
-
-
-var o2 = o; // la variable 'o2' est le deuxième élément qui
-            // référence l'objet o
-o = 1;      // désormais, l'objet qui était dans 'o' possède
-            // une seule référence de o2 vers lui
-
-var oa = o2.a; // référence la propriété 'a' de l'objet
-               // cet objet a donc 2 références : une
-               // par une propriété, l'autre par la variable 'oa'
-
-o2 = "yo"; // L'objet 'o' ne possède plus de références vers lui
-           // Il peut être ramassé.
-           // Cependant sa propriété 'a' est toujours référencé.
-           // La mémoire ne peut donc pas être libérée.
-
-oa = null; // la propriété 'a' ne possède plus de références
-           // vers elle. L'objet peut être ramassé et la mémoire
-           // libérée.
-</pre>
-
-<h4 id="Une_limitation_les_cycles">Une limitation : les cycles</h4>
-
-<p>Cet algorithme est limité car il ne peut pas gérer les cycles (exemple : A référence B et B référence A, ce qui forme un cycle). Avec les cycles, des objets pourraient très bien ne plus être nécessaires et cependant il serait impossible de les ramasser pour libérer la mémoire en utilisant l'algorithme précédent car chaque objet serait référencé au moins une fois et aucun ne pourrait être « ramassé ». Les références circulaires peuvent parfois entraîner des fuites mémoire.</p>
-
-<pre class="brush: js">function f() {
-  var o = {};
-  var o2 = {};
-  o.a = o2; // o référence o2
-  o2.a = o; // o2 référence o
-
-  return "azerty";
-}
-
-f();
-</pre>
-
-<h4 id="Exemple_réel">Exemple réel</h4>
-
-<p>Les navigateurs Internet Explorer 6 et 7 utilisent cet algorithme pour gérer les objets du DOM. Certains codes peuvent donc entraîner des fuites de mémoires, en voici un exemple :</p>
-
-<pre class="brush: js">var div;
-window.onload = function() {
-  div = document.getElementById("monElementDiv");
-  div.referenceCirculaire = div;
-  div.desDonnees = new Array(10000).join("*");
-};
-</pre>
-
-<p>Dans cet exemple, l'élément du DOM <code>monElementDiv</code> possède une référence circulaire vers lui-même via la propriété <code>referenceCirculaire</code>. Si la propriété n'est pas retirée ou modifiée de façon explicite, un ramasse-miettes qui compte les références aura toujours au moins une référence comptée, ce qui gardera l'élément DOM en mémoire et ce même s'il a été retiré de l'arbre du DOM. Si l'élément du DOM contient beaucoup de données (ce qui est illustré ici avec la propriétés <code>desDonnées</code>), la mémoire consommée par ces données ne sera jamais libérée.</p>
-
-<h3 id="Algorithme_«_marquer_et_balayer_»_(mark-and-sweep)">Algorithme « marquer et balayer » (<em>mark-and-sweep</em>)</h3>
-
-<p>Cet algorithme réduit la définition « un objet n'est plus nécessaire » à « un objet ne peut être atteint ».</p>
-
-<p>L'utilisation de cet algorithme implique de savoir quels sont les objets racines (en JavaScript, la racine est l'objet global). De façon périodique, le ramasse-miettes commencera par ces racines, listera tous les objets référencés par ces racines, puis les objets référencés par eux etc. Le ramasse-miettes pourra ainsi construire une liste de tous les objets accessibles et collecter ceux qui ne sont plus accessibles.</p>
-
-<p>Cet algorithme est meilleur que le précédent car la proposition « un objet possède 0 référence » implique « un objet ne peut être atteint ». En revanche, la réciproque n'est pas vraie comme nous avons pu le voir avec les cycles.</p>
-
-<p>En 2012, l'ensemble des navigateurs web modernes disposent d'un ramasse-miettes implémentant cet algorithme <em>mark-and-sweep</em>. L'ensemble des améliorations apportées dans ce domaine de JavaScript représentent des améliorations basées sur cet algorithme, ce ne sont pas de nouveaux algorithmes ou une nouvelle définition pour les objets à supprimer.</p>
-
-<h4 id="Les_cycles_ne_posent_plus_problème">Les cycles ne posent plus problème</h4>
-
-<p>Dans l'exemple ci-dessus, après le retour de la fonction, les deux objets ne sont plus référencés par quelque chose d'accessible depuis l'objet global. L'algorithme les marquera donc comme « non-accessibles ».</p>
-
-<h4 id="Limitation_libérer_la_mémoire_manuellement">Limitation : libérer la mémoire manuellement</h4>
-
-<p>On pourrait parfois avoir envie de décider quand libérer la mémoire. En 2019, il n'est pas possible de déclencher le ramasse miettes en JavaScript.</p>
-
-<h2 id="Node.js">Node.js</h2>
-
-<p>Node.js propose certaines options et outils pour configurer et déboguer des problèmes mémoires. Ces fonctionnalités peuvent ne pas être disponibles dans les environnements navigateur.</p>
-
-<h3 id="Options_d'exécution">Options d'exécution</h3>
-
-<p>La quantité de mémoire pour la mémoire du tas (<em>heap</em>) peut être augmentée avec une option :</p>
-
-<pre class="brush: bash">node --max-old-space-size=6000 index.js</pre>
-
-<p>On peut également exposer le ramasse-miettes afin de déboguer des problèmes mémoires. Cela s'active via une option et s'utilise avec le débogueur Chrome :</p>
-
-<pre class="brush: bash">node --expose-gc --inspect index.js</pre>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a class="external" href="https://www.ibm.com/developerworks/web/library/wa-memleak/">Article d'IBM sur les pratiques menant aux fuites mémoires en JavaScript (2007)</a> (en anglais)</li>
- <li><a class="external" href="https://msdn.microsoft.com/en-us/magazine/ff728624.aspx">Billet de Kangax sur les méthodes à utiliser pour enregistrer les gestionnaires d'événements et éviter les fuites mémoires (2010)</a> (en anglais)</li>
- <li><a href="/fr/docs/Performance">La performance pour les logiciels Mozilla et les modules complémentaires</a></li>
-</ul>
diff --git a/files/fr/web/javascript/memory_management/index.md b/files/fr/web/javascript/memory_management/index.md
new file mode 100644
index 0000000000..2f02a5edec
--- /dev/null
+++ b/files/fr/web/javascript/memory_management/index.md
@@ -0,0 +1,214 @@
+---
+title: Gestion de la mémoire
+slug: Web/JavaScript/Memory_Management
+tags:
+  - JavaScript
+  - Mémoire
+  - Performance
+translation_of: Web/JavaScript/Memory_Management
+original_slug: Web/JavaScript/Gestion_de_la_mémoire
+---
+{{JsSidebar("Advanced")}}
+
+Les langages de bas niveau, tels que C, possèdent des primitives permettant de gérer la mémoire : [`malloc()`](https://pubs.opengroup.org/onlinepubs/009695399/functions/malloc.html) et [`free()`](https://en.wikipedia.org/wiki/C_dynamic_memory_allocation#Overview_of_functions) par exemple. En revanche, lorsqu'on utilise JavaScript, la mémoire est allouée lors de la création des objets puis libérée « automatiquement » lorsque ceux-ci ne sont plus utilisés. Cette libération automatique est appelée _garbage collection_ en anglais ou ramasse-miettes. Le fait que ce processus soit automatique est souvent source de confusion et donne parfois l'impression que JavaScript (ou d'autres langages de haut niveau) ne permet pas de gérer la mémoire : nous allons voir que ce n'est pas le cas.
+
+## Le cycle de vie de la mémoire
+
+Quel que soit le langage de programmation, le cycle de vie de la mémoire ressemblera à :
+
+1.  Allouer la mémoire dont on a besoin
+2.  Utiliser cette mémoire allouée (lecture, écriture)
+3.  Libérer la mémoire allouée lorsqu'on n'en a plus besoin
+
+Le deuxième point est explicite, au niveau du code, pour tous les langages de programmation. Le premier et le troisième points sont explicites pour les langages de bas niveau mais souvent implicites pour les langages de haut niveau tels que JavaScript.
+
+### Allocation de la mémoire en JavaScript
+
+#### Initialisation des valeurs
+
+Afin de simplifier l'écriture de code, JavaScript alloue la mémoire lors de la déclaration des variables :
+
+```js
+// alloue de la mémoire pour un nombre
+var n = 123;
+// alloue de la mémoire pour une chaîne de caractères
+var s = "azerty";
+
+// alloue de la mémoire pour un objet et les valeurs qu'il contient
+var o = {
+  a: 1,
+  b: null
+};
+
+// alloue de la mémoire pour un tableau et les valeurs qu'il contient
+var a = [1, null, "abra"];
+
+// alloue de la mémoire pour une fonction
+// une fonction est un objet qui peut être appelé
+function f(a) {
+  return a + 2;
+}
+
+// les expressions de fonction allouent aussi de la mémoire
+unElement.addEventListener('click', function(){
+  unElement.style.backgroundColor = 'blue';
+}, false);
+```
+
+#### Allocation par appels de fonctions
+
+Certains appels de fonctions entraînent l'allocation mémoire d'un objet.
+
+```js
+// Alloue la mémoire pour un objet date
+var d = new Date();
+
+// Alloue de la mémoire pour un objet représentant un élément du DOM
+var e = document.createElement('div');
+```
+
+Certaines méthodes allouent de la mémoire pour des nouveaux objets ou de nouvelles valeurs.
+
+```js
+var s = "azerty";
+var s2 = s.substr(0, 3); // s2 est une nouvelle chaîne de caractères
+// Les chaînes étant immuables, JavaScript peut choisir
+// de ne pas allouer de mémoire mais seulement
+// de stocker l'intervalle [0, 3].
+
+var a = ["ouais ouais", "nan nan"];
+var a2 = ["génération", "nan nan"];
+var a3 = a.concat(a2);
+// nouveau tableau de 4 éléments
+// (résultat de la concaténation de a et a2)
+```
+
+### Utilisation des variables
+
+Utiliser des variables revient à lire et écrire la mémoire allouée. Cela peut être effectué lorsqu'on lit ou modifie la valeur d'une variable ou d'une propriété d'un objet ou encore lorsqu'on passe un argument à une fonction.
+
+### Libérer la mémoire qui n'est plus nécessaire
+
+La plupart des problèmes concernant la gestion de la mémoire surviennent à cet endroit. Le plus difficile est de savoir « quand » la mémoire allouée n'est plus utilisée. Pour les langages « bas niveau », il faut donc que le développeur détermine quelle partie de la mémoire n'est plus utilisée à tel endroit du code et la libère.
+
+Les interpréteurs des langages de haut niveau intègrent un composant logiciel, appelé « ramasse-miettes » qui a pour but de surveiller l'utilisation de la mémoire afin de déterminer quand une partie de la mémoire allouée n'est plus utilisée afin de la libérer automatiquement. Ce procédé ne peut être qu'une approximation car savoir si tel ou tel fragment de mémoire est nécessaire est un problème [indécidable](https://fr.wikipedia.org/wiki/D%C3%A9cidabilit%C3%A9) (autrement dit, ce problème ne peut être résolu par un algorithme).
+
+## Le ramasse-miettes ou _garbage collection_
+
+Comme on vient de le voir, savoir si de la mémoire peut être libérée demeure un problème indécidable. Les ramasses-miettes ne sont donc que des solutions restreintes pour ce problème. La section qui suit détaille les notions importantes pour comprendre ce mécanisme, ainsi que ses limitations.
+
+### Références
+
+Le concept principal utilisé par les algorithmes de ramasse-miettes est celui de _référence_. Dans ce contexte, un objet en référence un autre lorsqu'il a accès à lui (implicitement ou explicitement). Ainsi, un objet JavaScript référencera son [prototype](/fr/docs/Web/JavaScript/Guide/Inheritance_and_the_prototype_chain) (référence implicite) et ses propriétés (référence explicite).
+
+Dans ce contexte, la notion d'objet s'étend et dépasse celle utilisée pour décrire les objets JavaScript, elle contiendra notamment les portées de fonctions (ou la portée globale).
+
+### Compter les références
+
+L'algorithme le plus simple consiste à faire l'équivalence entre « un objet n'est plus nécessaire » et « un objet n'a pas d'objet le référençant ». Ainsi un objet peut être « ramassé » par le ramasse-miettes quand il n'y a plus de références pointant vers lui.
+
+#### Exemple
+
+```js
+var o = {
+  a: {
+    b: 2
+  }
+};
+// 2 objets sont créés. L'un est référencé par l'autre en tant que propriété.
+// L'autre est référencé car assigné à la variable 'o'.
+// Aucun des deux ne peut être ramassé par le ramasse-miettes.
+
+
+var o2 = o; // la variable 'o2' est le deuxième élément qui
+            // référence l'objet o
+o = 1;      // désormais, l'objet qui était dans 'o' possède
+            // une seule référence de o2 vers lui
+
+var oa = o2.a; // référence la propriété 'a' de l'objet
+               // cet objet a donc 2 références : une
+               // par une propriété, l'autre par la variable 'oa'
+
+o2 = "yo"; // L'objet 'o' ne possède plus de références vers lui
+           // Il peut être ramassé.
+           // Cependant sa propriété 'a' est toujours référencé.
+           // La mémoire ne peut donc pas être libérée.
+
+oa = null; // la propriété 'a' ne possède plus de références
+           // vers elle. L'objet peut être ramassé et la mémoire
+           // libérée.
+```
+
+#### Une limitation : les cycles
+
+Cet algorithme est limité car il ne peut pas gérer les cycles (exemple : A référence B et B référence A, ce qui forme un cycle). Avec les cycles, des objets pourraient très bien ne plus être nécessaires et cependant il serait impossible de les ramasser pour libérer la mémoire en utilisant l'algorithme précédent car chaque objet serait référencé au moins une fois et aucun ne pourrait être « ramassé ». Les références circulaires peuvent parfois entraîner des fuites mémoire.
+
+```js
+function f() {
+  var o = {};
+  var o2 = {};
+  o.a = o2; // o référence o2
+  o2.a = o; // o2 référence o
+
+  return "azerty";
+}
+
+f();
+```
+
+#### Exemple réel
+
+Les navigateurs Internet Explorer 6 et 7 utilisent cet algorithme pour gérer les objets du DOM. Certains codes peuvent donc entraîner des fuites de mémoires, en voici un exemple :
+
+```js
+var div;
+window.onload = function() {
+  div = document.getElementById("monElementDiv");
+  div.referenceCirculaire = div;
+  div.desDonnees = new Array(10000).join("*");
+};
+```
+
+Dans cet exemple, l'élément du DOM `monElementDiv` possède une référence circulaire vers lui-même via la propriété `referenceCirculaire`. Si la propriété n'est pas retirée ou modifiée de façon explicite, un ramasse-miettes qui compte les références aura toujours au moins une référence comptée, ce qui gardera l'élément DOM en mémoire et ce même s'il a été retiré de l'arbre du DOM. Si l'élément du DOM contient beaucoup de données (ce qui est illustré ici avec la propriétés `desDonnées`), la mémoire consommée par ces données ne sera jamais libérée.
+
+### Algorithme « marquer et balayer » (_mark-and-sweep_)
+
+Cet algorithme réduit la définition « un objet n'est plus nécessaire » à « un objet ne peut être atteint ».
+
+L'utilisation de cet algorithme implique de savoir quels sont les objets racines (en JavaScript, la racine est l'objet global). De façon périodique, le ramasse-miettes commencera par ces racines, listera tous les objets référencés par ces racines, puis les objets référencés par eux etc. Le ramasse-miettes pourra ainsi construire une liste de tous les objets accessibles et collecter ceux qui ne sont plus accessibles.
+
+Cet algorithme est meilleur que le précédent car la proposition « un objet possède 0 référence » implique « un objet ne peut être atteint ». En revanche, la réciproque n'est pas vraie comme nous avons pu le voir avec les cycles.
+
+En 2012, l'ensemble des navigateurs web modernes disposent d'un ramasse-miettes implémentant cet algorithme _mark-and-sweep_. L'ensemble des améliorations apportées dans ce domaine de JavaScript représentent des améliorations basées sur cet algorithme, ce ne sont pas de nouveaux algorithmes ou une nouvelle définition pour les objets à supprimer.
+
+#### Les cycles ne posent plus problème
+
+Dans l'exemple ci-dessus, après le retour de la fonction, les deux objets ne sont plus référencés par quelque chose d'accessible depuis l'objet global. L'algorithme les marquera donc comme « non-accessibles ».
+
+#### Limitation : libérer la mémoire manuellement
+
+On pourrait parfois avoir envie de décider quand libérer la mémoire. En 2019, il n'est pas possible de déclencher le ramasse miettes en JavaScript.
+
+## Node.js
+
+Node.js propose certaines options et outils pour configurer et déboguer des problèmes mémoires. Ces fonctionnalités peuvent ne pas être disponibles dans les environnements navigateur.
+
+### Options d'exécution
+
+La quantité de mémoire pour la mémoire du tas (_heap_) peut être augmentée avec une option :
+
+```bash
+node --max-old-space-size=6000 index.js
+```
+
+On peut également exposer le ramasse-miettes afin de déboguer des problèmes mémoires. Cela s'active via une option et s'utilise avec le débogueur Chrome :
+
+```bash
+node --expose-gc --inspect index.js
+```
+
+## Voir aussi
+
+- [Article d'IBM sur les pratiques menant aux fuites mémoires en JavaScript (2007)](https://www.ibm.com/developerworks/web/library/wa-memleak/) (en anglais)
+- [Billet de Kangax sur les méthodes à utiliser pour enregistrer les gestionnaires d'événements et éviter les fuites mémoires (2010)](https://msdn.microsoft.com/en-us/magazine/ff728624.aspx) (en anglais)
+- [La performance pour les logiciels Mozilla et les modules complémentaires](/fr/docs/Performance)
diff --git a/files/fr/web/javascript/reference/about/index.html b/files/fr/web/javascript/reference/about/index.html
deleted file mode 100644
index 4f2bfd5e74..0000000000
--- a/files/fr/web/javascript/reference/about/index.html
+++ /dev/null
@@ -1,54 +0,0 @@
----
-title: À propos de cette référence
-slug: Web/JavaScript/Reference/About
-tags:
-  - JavaScript
-  - Reference
-translation_of: Web/JavaScript/Reference/About
-original_slug: Web/JavaScript/Reference/A_propos
----
-<div>{{JsSidebar}}</div>
-
-<p>La référence JavaScript regroupe les différentes notions autour du langage JavaScript. L'ensemble du langage y est détaillé. Si vous développez une application JavaScript, vous pourrez utiliser ces différentes pages (d'où le titre de « référence »). Si vous apprenez JavaScript ou que vous souhaitez comprendre comment fonctionnent certains de ses composants, vous pouvez lire le <a href="/fr/docs/Web/JavaScript/Guide">Guide JavaScript</a>.</p>
-
-<p>Le langage JavaScript a été conçu pour être utilisé dans un environnement dans lequel il s'intègre : un navigateur, des scripts côté serveur, etc. De façon générale, cette référence ne cible pas un environnement en particulier et tente de rester le plus « agnostique » possible.</p>
-
-<h2 id="Où_trouver_des_informations_sur_JavaScript">Où trouver des informations sur JavaScript</h2>
-
-<p>La documentation JavaScript sur les fonctionnalités essentielles du langage (qui correspondent à <a href="/fr/docs/Web/JavaScript/Language_Resources">ECMAScript</a> pour la plupart) se trouve dans les sections suivantes :</p>
-
-<ul>
- <li>Le <a href="/fr/docs/Web/JavaScript/Guide">Guide JavaScript</a></li>
- <li>La <a href="/fr/docs/Web/JavaScript/Reference">Référence JavaScript</a></li>
-</ul>
-
-<p>Si vous découvrez JavaScript, vous pouvez débuter votre lecture avec le <a href="/fr/docs/Web/JavaScript/Guide">guide</a>. Une fois les fondamentaux acquis, vous pourrez utiliser la <a href="/fr/docs/Web/JavaScript/Reference">référence</a> pour obtenir plus d'informations sur les différents objets et éléments du langage.</p>
-
-<h2 id="Structure_de_cette_référence">Structure de cette référence</h2>
-
-<p>La référence JavaScript s'organise autour de différents chapitres :</p>
-
-<dl>
- <dt><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux">Les objets natifs standards</a></dt>
- <dd>Ce chapitre aborde l'ensemble des objets natifs standards JavaScript, ainsi que leurs méthodes et propriétés.</dd>
- <dt><a href="/fr/docs/Web/JavaScript/Reference/Instructions">Les instructions et déclarations</a></dt>
- <dd>Les applications JavaScript sont composées d'instructions organisées grâce à une syntaxe. Une instruction peut s'étaler sur plusieurs lignes et plusieurs instructions peuvent être présentes sur une ligne si elles sont séparées par des points-virugles.</dd>
- <dt><a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs">Les expressions et opérateurs</a></dt>
- <dd>Ce chapitre traite des opérateurs présents en JavaScript ainsi que des expressions et des mots-clés du langage.</dd>
- <dt><a href="/fr/docs/Web/JavaScript/Reference/Fonctions">Les fonctions</a></dt>
- <dd>Ce chapitre aborde les concepts sur les fonctions en JavaScript.</dd>
- <dt><a href="/fr/docs/Web/JavaScript/Reference/Classes">Les classes</a></dt>
- <dd>Ce chapitre présente les classes, un sucre syntaxique pour les objets ajouté avec ECMAScript 2015.</dd>
- <dt><a href="/fr/docs/Web/JavaScript/Reference/Erreurs">Les erreurs</a></dt>
- <dd>Un chapitre sur les erreurs, les exceptions et les avertissements utilisées en JavaScript.</dd>
- <dt><a href="/fr/docs/Web/JavaScript/New_in_JavaScript">Les nouveautés en JavaScript</a></dt>
- <dd>Ce chapitre aborde les différentes versions de JavaScript et les changements qui ont eu lieu.</dd>
-</dl>
-
-<h3 id="D'autres_pages_de_la_référence">D'autres pages de la référence</h3>
-
-<ul>
- <li><a href="/fr/docs/JavaScript/R%C3%A9f%C3%A9rence_JavaScript/Annexes/Fonctionnalit%C3%A9s_d%C3%A9pr%C3%A9ci%C3%A9es">Les fonctionnalités dépréciées et obsolètes</a></li>
- <li><a href="/fr/docs/Web/JavaScript/Reference/Grammaire_lexicale">La grammaire lexicale de JavaScript</a></li>
- <li><a href="/fr/docs/Web/JavaScript/Structures_de_donn%C3%A9es">Les types de données et les structures de données</a></li>
-</ul>
diff --git a/files/fr/web/javascript/reference/about/index.md b/files/fr/web/javascript/reference/about/index.md
new file mode 100644
index 0000000000..d51cc9129f
--- /dev/null
+++ b/files/fr/web/javascript/reference/about/index.md
@@ -0,0 +1,48 @@
+---
+title: À propos de cette référence
+slug: Web/JavaScript/Reference/About
+tags:
+  - JavaScript
+  - Reference
+translation_of: Web/JavaScript/Reference/About
+original_slug: Web/JavaScript/Reference/A_propos
+---
+{{JsSidebar}}
+
+La référence JavaScript regroupe les différentes notions autour du langage JavaScript. L'ensemble du langage y est détaillé. Si vous développez une application JavaScript, vous pourrez utiliser ces différentes pages (d'où le titre de « référence »). Si vous apprenez JavaScript ou que vous souhaitez comprendre comment fonctionnent certains de ses composants, vous pouvez lire le [Guide JavaScript](/fr/docs/Web/JavaScript/Guide).
+
+Le langage JavaScript a été conçu pour être utilisé dans un environnement dans lequel il s'intègre : un navigateur, des scripts côté serveur, etc. De façon générale, cette référence ne cible pas un environnement en particulier et tente de rester le plus « agnostique » possible.
+
+## Où trouver des informations sur JavaScript
+
+La documentation JavaScript sur les fonctionnalités essentielles du langage (qui correspondent à [ECMAScript](/fr/docs/Web/JavaScript/Language_Resources) pour la plupart) se trouve dans les sections suivantes :
+
+- Le [Guide JavaScript](/fr/docs/Web/JavaScript/Guide)
+- La [Référence JavaScript](/fr/docs/Web/JavaScript/Reference)
+
+Si vous découvrez JavaScript, vous pouvez débuter votre lecture avec le [guide](/fr/docs/Web/JavaScript/Guide). Une fois les fondamentaux acquis, vous pourrez utiliser la [référence](/fr/docs/Web/JavaScript/Reference) pour obtenir plus d'informations sur les différents objets et éléments du langage.
+
+## Structure de cette référence
+
+La référence JavaScript s'organise autour de différents chapitres :
+
+- [Les objets natifs standards](/fr/docs/Web/JavaScript/Reference/Objets_globaux)
+  - : Ce chapitre aborde l'ensemble des objets natifs standards JavaScript, ainsi que leurs méthodes et propriétés.
+- [Les instructions et déclarations](/fr/docs/Web/JavaScript/Reference/Instructions)
+  - : Les applications JavaScript sont composées d'instructions organisées grâce à une syntaxe. Une instruction peut s'étaler sur plusieurs lignes et plusieurs instructions peuvent être présentes sur une ligne si elles sont séparées par des points-virugles.
+- [Les expressions et opérateurs](/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs)
+  - : Ce chapitre traite des opérateurs présents en JavaScript ainsi que des expressions et des mots-clés du langage.
+- [Les fonctions](/fr/docs/Web/JavaScript/Reference/Fonctions)
+  - : Ce chapitre aborde les concepts sur les fonctions en JavaScript.
+- [Les classes](/fr/docs/Web/JavaScript/Reference/Classes)
+  - : Ce chapitre présente les classes, un sucre syntaxique pour les objets ajouté avec ECMAScript 2015.
+- [Les erreurs](/fr/docs/Web/JavaScript/Reference/Erreurs)
+  - : Un chapitre sur les erreurs, les exceptions et les avertissements utilisées en JavaScript.
+- [Les nouveautés en JavaScript](/fr/docs/Web/JavaScript/New_in_JavaScript)
+  - : Ce chapitre aborde les différentes versions de JavaScript et les changements qui ont eu lieu.
+
+### D'autres pages de la référence
+
+- [Les fonctionnalités dépréciées et obsolètes](/fr/docs/JavaScript/R%C3%A9f%C3%A9rence_JavaScript/Annexes/Fonctionnalit%C3%A9s_d%C3%A9pr%C3%A9ci%C3%A9es)
+- [La grammaire lexicale de JavaScript](/fr/docs/Web/JavaScript/Reference/Grammaire_lexicale)
+- [Les types de données et les structures de données](/fr/docs/Web/JavaScript/Structures_de_donn%C3%A9es)
diff --git a/files/fr/web/javascript/reference/classes/constructor/index.html b/files/fr/web/javascript/reference/classes/constructor/index.html
deleted file mode 100644
index f488f06dc5..0000000000
--- a/files/fr/web/javascript/reference/classes/constructor/index.html
+++ /dev/null
@@ -1,172 +0,0 @@
----
-title: constructor
-slug: Web/JavaScript/Reference/Classes/constructor
-tags:
-  - Classes
-  - ECMAScript 2015
-  - JavaScript
-  - Language feature
-translation_of: Web/JavaScript/Reference/Classes/constructor
-browser-compat: javascript.classes.constructor
----
-<div>{{jsSidebar("Classes")}}</div>
-
-<p>La méthode <strong><code>constructor</code></strong> est une méthode qui est utilisée pour créer et initialiser un objet lorsqu'on utilise le mot clé <a href="/fr/docs/Web/JavaScript/Reference/Statements/class"><code>class</code></a>.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/classes-constructor.html")}}</div>
-
-<h2 id="syntax">Syntaxe</h2>
-
-<pre class="brush: js">constructor() { ... }
-constructor(argument0) { ... }
-constructor(argument0, argument1) { ... }
-constructor(argument0, argument1, ... , argumentN) { ... }</pre>
-
-<h2 id="description">Description</h2>
-
-<p>Un constructeur vous permet de fournir toute initialisation personnalisée qui doit être effectuée avant que toute autre méthode puisse être appelée sur un objet instancié.</p>
-
-<pre class="brush: js">class Person {
-  constructor(name) {
-    this.name = name;
-  }
-
-  introduce() {
-    console.log(`Hello, my name is ${this.name}`);
-  }
-}
-
-const otto = new Person('Otto');
-
-otto.introduce();</pre>
-
-<p>Si vous ne fournissez pas votre propre constructeur, alors un constructeur par défaut sera fourni pour vous. Si votre classe est une classe de base, le constructeur par défaut est vide :</p>
-
-<pre class="brush: js">constructor() {}</pre>
-
-<p>Si votre classe est une classe dérivée, le constructeur par défaut appelle le constructeur parent, en transmettant tous les arguments qui ont été fournis :</p>
-
-<pre class="brush: js">constructor(...args) {
-  super(...args);
-}</pre>
-
-<p>Cela permet à un code comme celui-ci de fonctionner :</p>
-
-<pre class="brush: js">class ValidationError extends Error {
-  printCustomerMessage() {
-    return `La validation a échoué :-( (détails : ${this.message})`;
-  }
-}
-
-try {
-  throw new ValidationError("Numéro de téléphone invalide");
-} catch (error) {
-   if (error instanceof ValidationError) {
-    console.log(error.name); // Il s'agit d'une erreur au lieu de ValidationError !
-    console.log(error.printCustomerMessage());
-  } else {
-    console.log('Erreur inconnue', error);
-    throw error;
-  }
-}</pre>
-
-<p>La classe <code>ValidationError</code> n'a pas besoin d'un constructeur explicite, car elle n'a pas besoin de faire d'initialisation personnalisée. Le constructeur par défaut se charge alors d'initialiser le parent <code>Error</code> à partir de l'argument qui lui est fourni.</p>
-
-<p>Cependant, si vous fournissez votre propre constructeur, et que votre classe dérive d'une certaine classe parente, alors vous devez appeler explicitement le constructeur de la classe parente en utilisant <code>super</code>. Par exemple :</p>
-
-<pre class="brush: js">class ValidationError extends Error {
-  constructor(message) {
-    super(message);  // appelle le constructeur de la classe parent
-    this.name = 'ValidationError';
-    this.code = '42';
-  }
-
-  printCustomerMessage() {
-     return `La validation a échoué :-( (détails : ${this.message}, code : ${this.code})`;
-  }
-}
-
-try {
-  throw new ValidationError("Numéro de téléphone invalide");
-} catch (error) {
-   if (error instanceof ValidationError) {
-    console.log(error.name); // Maintenant, c'est une ValidationError !
-    console.log(error.printCustomerMessage());
-  } else {
-    console.log('Unknown error', error);
-    throw error;
-  }
-}</pre>
-
-<p>Il ne peut y avoir qu'une seule méthode spéciale portant le nom « <code>constructor</code> » dans une classe. Avoir plus d'une occurrence d'une méthode <code>constructor</code> dans une classe lancera une erreur <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/SyntaxError"><code>SyntaxError</code></a>.</p>
-
-<h2 id="examples">Exemples</h2>
-
-<h3 id="using_the_constructor_method">Utilisation de la méthode du <code>constructor</code></h3>
-
-<p>Cet extrait de code est tiré de l'<a href="https://github.com/GoogleChrome/samples/blob/gh-pages/classes-es6/index.html">échantillon de classes</a> (<a href="https://googlechrome.github.io/samples/classes-es6/index.html">démo en direct</a>).</p>
-
-<pre class="brush: js">class Square extends Polygon {
-  constructor(length) {
-    // Ici, on appelle le constructeur de la classe parente avec des longueurs
-    // fournies pour la largeur et la hauteur du polygone.
-    super(length, length);
-    // NOTE : Dans les classes dérivées, `super()` doit être appelé avant de pouvoir
-    // utiliser `this`. Si vous ne le faites pas, cela provoquera une ReferenceError.
-    this.name = 'Carré';
-  }
-
-  get area() {
-    return this.height * this.width;
-  }
-
-  set area(value) {
-    this.height = value**0.5;
-    this.width = value**0.5;
-  }
-}</pre>
-
-<h3 id="another_example">Un autre exemple</h3>
-
-<p>Ici, le prototype de la classe <code>Square</code> est modifié — mais le constructeur de sa classe de base <code>Polygon</code> est toujours appelé lorsqu'une nouvelle instance d'un carré est créée.</p>
-
-<pre class="brush: js">class Polygon {
-    constructor() {
-        this.name = "Polygone";
-    }
-}
-
-class Square extends Polygon {
-    constructor() {
-        super();
-    }
-}
-
-class Rectangle {}
-
-Object.setPrototypeOf(Square.prototype, Rectangle.prototype);
-
-console.log(Object.getPrototypeOf(Square.prototype) === Polygon.prototype); //false
-console.log(Object.getPrototypeOf(Square.prototype) === Rectangle.prototype); //true
-
-let newInstance = new Square();
-console.log(newInstance.name); // Polygone</pre>
-
-<h2 id="specifications">Spécifications</h2>
-
-<p>{{Specifications}}</p>
-
-<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
-
-<p>{{Compat}}</p>
-
-<h2 id="see_also">Voir aussi</h2>
-
-<ul>
-  <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/super"><code>super()</code></a></li>
-  <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/class">Expression <code>class</code></a></li>
-  <li><a href="/fr/docs/Web/JavaScript/Reference/Statements/class">Déclaration <code>class</code></a></li>
-  <li><a href="/fr/docs/Web/JavaScript/Reference/Classes"><code>Classes</code></a></li>
-  <li><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Object/constructor">Object.prototype.constructor</a>
-  </li>
-</ul>
diff --git a/files/fr/web/javascript/reference/classes/constructor/index.md b/files/fr/web/javascript/reference/classes/constructor/index.md
new file mode 100644
index 0000000000..ea9682c80d
--- /dev/null
+++ b/files/fr/web/javascript/reference/classes/constructor/index.md
@@ -0,0 +1,185 @@
+---
+title: constructor
+slug: Web/JavaScript/Reference/Classes/constructor
+tags:
+  - Classes
+  - ECMAScript 2015
+  - JavaScript
+  - Language feature
+translation_of: Web/JavaScript/Reference/Classes/constructor
+browser-compat: javascript.classes.constructor
+---
+{{jsSidebar("Classes")}}
+
+La méthode **`constructor`** est une méthode qui est utilisée pour créer et initialiser un objet lorsqu'on utilise le mot clé [`class`](/fr/docs/Web/JavaScript/Reference/Statements/class).
+
+{{EmbedInteractiveExample("pages/js/classes-constructor.html")}}
+
+## Syntaxe
+
+```js
+constructor() { ... }
+constructor(argument0) { ... }
+constructor(argument0, argument1) { ... }
+constructor(argument0, argument1, ... , argumentN) { ... }
+```
+
+## Description
+
+Un constructeur vous permet de fournir toute initialisation personnalisée qui doit être effectuée avant que toute autre méthode puisse être appelée sur un objet instancié.
+
+```js
+class Person {
+  constructor(name) {
+    this.name = name;
+  }
+
+  introduce() {
+    console.log(`Hello, my name is ${this.name}`);
+  }
+}
+
+const otto = new Person('Otto');
+
+otto.introduce();
+```
+
+Si vous ne fournissez pas votre propre constructeur, alors un constructeur par défaut sera fourni pour vous. Si votre classe est une classe de base, le constructeur par défaut est vide :
+
+```js
+constructor() {}
+```
+
+Si votre classe est une classe dérivée, le constructeur par défaut appelle le constructeur parent, en transmettant tous les arguments qui ont été fournis :
+
+```js
+constructor(...args) {
+  super(...args);
+}
+```
+
+Cela permet à un code comme celui-ci de fonctionner :
+
+```js
+class ValidationError extends Error {
+  printCustomerMessage() {
+    return `La validation a échoué :-( (détails : ${this.message})`;
+  }
+}
+
+try {
+  throw new ValidationError("Numéro de téléphone invalide");
+} catch (error) {
+   if (error instanceof ValidationError) {
+    console.log(error.name); // Il s'agit d'une erreur au lieu de ValidationError !
+    console.log(error.printCustomerMessage());
+  } else {
+    console.log('Erreur inconnue', error);
+    throw error;
+  }
+}
+```
+
+La classe `ValidationError` n'a pas besoin d'un constructeur explicite, car elle n'a pas besoin de faire d'initialisation personnalisée. Le constructeur par défaut se charge alors d'initialiser le parent `Error` à partir de l'argument qui lui est fourni.
+
+Cependant, si vous fournissez votre propre constructeur, et que votre classe dérive d'une certaine classe parente, alors vous devez appeler explicitement le constructeur de la classe parente en utilisant `super`. Par exemple :
+
+```js
+class ValidationError extends Error {
+  constructor(message) {
+    super(message);  // appelle le constructeur de la classe parent
+    this.name = 'ValidationError';
+    this.code = '42';
+  }
+
+  printCustomerMessage() {
+     return `La validation a échoué :-( (détails : ${this.message}, code : ${this.code})`;
+  }
+}
+
+try {
+  throw new ValidationError("Numéro de téléphone invalide");
+} catch (error) {
+   if (error instanceof ValidationError) {
+    console.log(error.name); // Maintenant, c'est une ValidationError !
+    console.log(error.printCustomerMessage());
+  } else {
+    console.log('Unknown error', error);
+    throw error;
+  }
+}
+```
+
+Il ne peut y avoir qu'une seule méthode spéciale portant le nom « `constructor` » dans une classe. Avoir plus d'une occurrence d'une méthode `constructor` dans une classe lancera une erreur [`SyntaxError`](/fr/docs/Web/JavaScript/Reference/Global_Objects/SyntaxError).
+
+## Exemples
+
+### Utilisation de la méthode du `constructor`
+
+Cet extrait de code est tiré de l'[échantillon de classes](https://github.com/GoogleChrome/samples/blob/gh-pages/classes-es6/index.html) ([démo en direct](https://googlechrome.github.io/samples/classes-es6/index.html)).
+
+```js
+class Square extends Polygon {
+  constructor(length) {
+    // Ici, on appelle le constructeur de la classe parente avec des longueurs
+    // fournies pour la largeur et la hauteur du polygone.
+    super(length, length);
+    // NOTE : Dans les classes dérivées, `super()` doit être appelé avant de pouvoir
+    // utiliser `this`. Si vous ne le faites pas, cela provoquera une ReferenceError.
+    this.name = 'Carré';
+  }
+
+  get area() {
+    return this.height * this.width;
+  }
+
+  set area(value) {
+    this.height = value**0.5;
+    this.width = value**0.5;
+  }
+}
+```
+
+### Un autre exemple
+
+Ici, le prototype de la classe `Square` est modifié — mais le constructeur de sa classe de base `Polygon` est toujours appelé lorsqu'une nouvelle instance d'un carré est créée.
+
+```js
+class Polygon {
+    constructor() {
+        this.name = "Polygone";
+    }
+}
+
+class Square extends Polygon {
+    constructor() {
+        super();
+    }
+}
+
+class Rectangle {}
+
+Object.setPrototypeOf(Square.prototype, Rectangle.prototype);
+
+console.log(Object.getPrototypeOf(Square.prototype) === Polygon.prototype); //false
+console.log(Object.getPrototypeOf(Square.prototype) === Rectangle.prototype); //true
+
+let newInstance = new Square();
+console.log(newInstance.name); // Polygone
+```
+
+## Spécifications
+
+{{Specifications}}
+
+## Compatibilité des navigateurs
+
+{{Compat}}
+
+## Voir aussi
+
+- [`super()`](/fr/docs/Web/JavaScript/Reference/Operators/super)
+- [Expression `class`](/fr/docs/Web/JavaScript/Reference/Operators/class)
+- [Déclaration `class`](/fr/docs/Web/JavaScript/Reference/Statements/class)
+- [`Classes`](/fr/docs/Web/JavaScript/Reference/Classes)
+- [Object.prototype.constructor](/fr/docs/Web/JavaScript/Reference/Global_Objects/Object/constructor)
diff --git a/files/fr/web/javascript/reference/classes/extends/index.html b/files/fr/web/javascript/reference/classes/extends/index.html
deleted file mode 100644
index 8e3af50594..0000000000
--- a/files/fr/web/javascript/reference/classes/extends/index.html
+++ /dev/null
@@ -1,114 +0,0 @@
----
-title: extends
-slug: Web/JavaScript/Reference/Classes/extends
-tags:
-  - ECMAScript 2015
-  - JavaScript
-  - Reference
-translation_of: Web/JavaScript/Reference/Classes/extends
----
-<div>{{jsSidebar("Classes")}}</div>
-
-<p>Le mot-clé <strong><code>extends</code></strong> est utilisé dans les <a href="/fr/docs/Web/JavaScript/Reference/Instructions/class">déclarations</a> et <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/class">expressions de classes</a> afin de signifier qu'un type représenté par une classe hérite d'un autre type.</p>
-
-
-
-<div>{{EmbedInteractiveExample("pages/js/classes-extends.html", "taller")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">class ClasseFille extends ClasseParente { ... }
-</pre>
-
-<h2 id="Description">Description</h2>
-
-<p>Le mot-clé <code>extends</code> peut être utilisé pour créer des sous-classes de classes existantes (natives ou non).</p>
-
-<p>La propriété <code>.prototype</code> d'une classe fille (aussi appelée une <em>extension</em>) doit être un {{jsxref("Object")}} ou {{jsxref("null")}}.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Utiliser_extends">Utiliser <code>extends</code></h3>
-
-<p>Ce fragment de code est tiré de <a href="https://github.com/GoogleChrome/samples/blob/gh-pages/classes-es6/index.html">cet exemple</a> et crée une classe <code>Carré</code> qui hérite de <code>Polygone</code> :</p>
-
-<pre class="brush: js">class Carré extends Polygone {
-  constructor(longueur) {
-    // On utilise le constructeur de la classe parente
-    // avec le mot-clé super
-    super(longueur, longueur);
-    // Pour les classes dérivées, super() doit être appelé avant de
-    // pouvoir utiliser 'this' sinon cela provoque une exception
-    // ReferenceError
-    this.nom = 'Carré';
-  }
-
-  get aire() {
-    return this.hauteur * this.largeur;
-  }
-
-}</pre>
-
-<h3 id="Utiliser_extends_avec_des_objets_natifs">Utiliser <code>extends</code> avec des objets natifs</h3>
-
-<p>Dans l'exemple suivant, on crée l'équivalent d'une sous-classe pour {{jsxref("Date")}} :</p>
-
-<pre class="brush: js">class maDate extends Date {
-  constructor() {
-    super();
-  }
-
-  getFormattedDate() {
-    var mois = ['Jan','Fév','Mar','Avr','Mai','Juin','Juil','Août','Sep','Oct','Nov','Déc'];
-    return this.getDate() + "-" + mois[this.getMonth()] + "-" + this.getFullYear();
-  }
-}</pre>
-
-<p>Ces exemples sont extraits de ces deux pages : <a href="https://googlechrome.github.io/samples/classes-es6/index.html">démonstration</a>, <a href="https://github.com/GoogleChrome/samples/blob/gh-pages/classes-es6/index.html">source</a>.</p>
-
-<h3 id="Étendre_null">Étendre <code>null</code></h3>
-
-<p>Étendre {{jsxref("null")}} se fait comme avec une classe normale sauf que l'objet prototype n'hérite pas de {{jsxref("Object.prototype")}}.</p>
-
-<pre class="brush: js">class extensionNull extends null {
-  constructor() {}
-}
-
-Object.getPrototypeOf(extensionNull); // Function.prototype
-Object.getPrototypeOf(extensionNull.prototype); // null
-
-new extensionNull(); // ReferenceError
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-class-definitions', 'extends')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-class-definitions', 'extends')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.classes.extends")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/JavaScript/Reference/Classes">Les classes</a></li>
- <li><code><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/super">super</a></code></li>
-</ul>
diff --git a/files/fr/web/javascript/reference/classes/extends/index.md b/files/fr/web/javascript/reference/classes/extends/index.md
new file mode 100644
index 0000000000..2dee751c38
--- /dev/null
+++ b/files/fr/web/javascript/reference/classes/extends/index.md
@@ -0,0 +1,99 @@
+---
+title: extends
+slug: Web/JavaScript/Reference/Classes/extends
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Reference
+translation_of: Web/JavaScript/Reference/Classes/extends
+---
+{{jsSidebar("Classes")}}
+
+Le mot-clé **`extends`** est utilisé dans les [déclarations](/fr/docs/Web/JavaScript/Reference/Instructions/class) et [expressions de classes](/fr/docs/Web/JavaScript/Reference/Opérateurs/class) afin de signifier qu'un type représenté par une classe hérite d'un autre type.
+
+{{EmbedInteractiveExample("pages/js/classes-extends.html", "taller")}}
+
+## Syntaxe
+
+    class ClasseFille extends ClasseParente { ... }
+
+## Description
+
+Le mot-clé `extends` peut être utilisé pour créer des sous-classes de classes existantes (natives ou non).
+
+La propriété `.prototype` d'une classe fille (aussi appelée une _extension_) doit être un {{jsxref("Object")}} ou {{jsxref("null")}}.
+
+## Exemples
+
+### Utiliser `extends`
+
+Ce fragment de code est tiré de [cet exemple](https://github.com/GoogleChrome/samples/blob/gh-pages/classes-es6/index.html) et crée une classe `Carré` qui hérite de `Polygone` :
+
+```js
+class Carré extends Polygone {
+  constructor(longueur) {
+    // On utilise le constructeur de la classe parente
+    // avec le mot-clé super
+    super(longueur, longueur);
+    // Pour les classes dérivées, super() doit être appelé avant de
+    // pouvoir utiliser 'this' sinon cela provoque une exception
+    // ReferenceError
+    this.nom = 'Carré';
+  }
+
+  get aire() {
+    return this.hauteur * this.largeur;
+  }
+
+}
+```
+
+### Utiliser `extends` avec des objets natifs
+
+Dans l'exemple suivant, on crée l'équivalent d'une sous-classe pour {{jsxref("Date")}} :
+
+```js
+class maDate extends Date {
+  constructor() {
+    super();
+  }
+
+  getFormattedDate() {
+    var mois = ['Jan','Fév','Mar','Avr','Mai','Juin','Juil','Août','Sep','Oct','Nov','Déc'];
+    return this.getDate() + "-" + mois[this.getMonth()] + "-" + this.getFullYear();
+  }
+}
+```
+
+Ces exemples sont extraits de ces deux pages : [démonstration](https://googlechrome.github.io/samples/classes-es6/index.html), [source](https://github.com/GoogleChrome/samples/blob/gh-pages/classes-es6/index.html).
+
+### Étendre `null`
+
+Étendre {{jsxref("null")}} se fait comme avec une classe normale sauf que l'objet prototype n'hérite pas de {{jsxref("Object.prototype")}}.
+
+```js
+class extensionNull extends null {
+  constructor() {}
+}
+
+Object.getPrototypeOf(extensionNull); // Function.prototype
+Object.getPrototypeOf(extensionNull.prototype); // null
+
+new extensionNull(); // ReferenceError
+```
+
+## Spécifications
+
+| Spécification                                                                    | État                         | Commentaires         |
+| -------------------------------------------------------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName('ES2015', '#sec-class-definitions', 'extends')}} | {{Spec2('ES2015')}}     | Définition initiale. |
+| {{SpecName('ESDraft', '#sec-class-definitions', 'extends')}} | {{Spec2('ESDraft')}} |                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.classes.extends")}}
+
+## Voir aussi
+
+- [Les classes](/fr/docs/Web/JavaScript/Reference/Classes)
+- [`super`](/fr/docs/Web/JavaScript/Reference/Opérateurs/super)
diff --git a/files/fr/web/javascript/reference/classes/index.html b/files/fr/web/javascript/reference/classes/index.html
deleted file mode 100644
index 33721a3faa..0000000000
--- a/files/fr/web/javascript/reference/classes/index.html
+++ /dev/null
@@ -1,411 +0,0 @@
----
-title: Classes
-slug: Web/JavaScript/Reference/Classes
-tags:
-  - Classes
-  - ECMAScript 2015
-  - Intermédiaire
-  - JavaScript
-  - Reference
-translation_of: Web/JavaScript/Reference/Classes
----
-<div>{{JsSidebar("Classes")}}</div>
-
-<p>Les classes JavaScript ont été introduites avec ECMAScript 2015. Elles sont un « sucre syntaxique » par rapport à l'héritage prototypal. En effet, cette syntaxe n'introduit pas un nouveau modèle d'héritage dans JavaScript ! Elle fournit uniquement une syntaxe plus simple pour créer des objets et manipuler l'héritage.</p>
-
-<h2 id="Définir_des_classes">Définir des classes</h2>
-
-<p>En réalité, les classes sont juste des <a href="/fr/docs/Web/JavaScript/Reference/Fonctions">fonctions</a> spéciales. Ainsi, les classes sont définies de la même façon que les fonctions : par déclaration, ou par expression.</p>
-
-<h3 id="Les_déclarations_de_classes">Les déclarations de classes</h3>
-
-<p>Pour utiliser une déclaration de classe simple, on utilisera le mot-clé <code>class</code>, suivi par le nom de la classe que l'on déclare (ici « Rectangle »).</p>
-
-<pre class="brush: js">class Rectangle {
-  constructor(hauteur, largeur) {
-    this.hauteur = hauteur;
-    this.largeur = largeur;
-  }
-}</pre>
-
-<h4 id="Remontée_des_déclarations_(hoisting)">Remontée des déclarations (<em>hoisting</em>)</h4>
-
-<p><a href="/fr/docs/Web/JavaScript/Reference/Instructions/function">Les déclarations de fonctions</a> sont remontées dans le code. En revanche, ce n'est pas le cas pour les déclarations de classes. Ainsi, il est nécessaire de déclarer la classe avant de l'instancier. Dans le cas contraire, on obtient une {{jsxref("ReferenceError")}} :</p>
-
-<pre class="brush: js example-bad">const p = new Rectangle(); // ReferenceError
-
-class Rectangle {}
-</pre>
-
-<h3 id="Les_expressions_de_classes">Les expressions de classes</h3>
-
-<p>Il est possible d'utiliser des expressions de classes, nommées ou anonymes. Si on utilise un nom dans l'expression, ce nom ne sera accessible que depuis le corps de la classe via la propriété {{jsxref("Function.name", "name")}} (cette valeur ne sera pas directement accessible pour les instances).</p>
-
-<pre class="brush: js">// anonyme
-let Rectangle = class {
-  constructor(hauteur, largeur) {
-    this.hauteur = hauteur;
-    this.largeur = largeur;
-  }
-};
-
-// nommée
-let Rectangle = class Rectangle {
-  constructor(hauteur, largeur) {
-    this.hauteur = hauteur;
-    this.largeur = largeur;
-  }
-};
-</pre>
-
-<div class="note">
-<p><strong>Note :</strong> Les mêmes règles s'appliquent aux expressions de classes en ce qui concerne la remontée (<em>hoisting</em>) des classes (cf. le paragraphe précédent sur les remontées des déclarations de classe).</p>
-</div>
-
-<h2 id="Corps_d'une_classe_et_définition_des_méthodes">Corps d'une classe et définition des méthodes</h2>
-
-<p>Le corps d'une classe est la partie contenue entre les accolades. C'est dans cette partie que l'on définit les propriétés d'une classe comme ses méthodes et son constructeur.</p>
-
-<h3 id="Mode_strict">Mode strict</h3>
-
-<p>Le corps des classes, pour les expressions et pour les déclarations de classes, est exécuté en <a href="/fr/docs/Web/JavaScript/Reference/Strict_mode">mode strict</a> (autrement dit, le constructeur, les méthodes statiques, le prototype, les accesseurs (<em>getters</em>) et mutateurs (<em>setters</em>) sont exécutés en mode strict).</p>
-
-<h3 id="Constructeur">Constructeur</h3>
-
-<p>La méthode <code><a href="/fr/docs/Web/JavaScript/Reference/Classes/constructor">constructor</a></code> est une méthode spéciale qui permet de créer et d'initialiser les objet créés avec une classe. Il ne peut y avoir qu'une seule méthode avec le nom "constructor" pour une classe donnée. Si la classe contient plusieurs occurences d'une méthode <code>constructor</code>, cela provoquera une exception {{jsxref("SyntaxError")}}.</p>
-
-<p>Le constructeur ainsi déclaré peut utiliser le mot-clé <code>super</code> afin d'appeler le constructeur de la classe parente.</p>
-
-<h3 id="Méthodes_de_prototype">Méthodes de prototype</h3>
-
-<p>Voir aussi les définitions de méthode.</p>
-
-<pre class="brush: js">class Rectangle {
-  constructor(hauteur, largeur) {
-    this.hauteur = hauteur;
-    this.largeur = largeur;
-  }
-
-  get area() {
-    return this.calcArea();
-  }
-
-  calcArea() {
-    return this.largeur * this.hauteur;
-  }
-}
-
-const carré = new Rectangle(10, 10);
-
-console.log(carré.area);</pre>
-
-<h3 id="Méthodes_statiques">Méthodes statiques</h3>
-
-<p>Le mot-clé <code><a href="/fr/docs/Web/JavaScript/Reference/Classes/static">static</a></code> permet de définir une méthode statique pour une classe. Les méthodes statiques sont appelées par rapport à la classe entière et non par rapport à une <a href="/fr/docs/Web/JavaScript/Introduction_à_JavaScript_orienté_objet#L'instance">instance</a> donnée (ces méthodes ne peuvent pas être appelées « depuis » une instance). Ces méthodes sont généralement utilisées sous formes d'utilitaires au sein d'applications.</p>
-
-<pre class="brush: js">class Point {
-  constructor(x, y) {
-    this.x = x;
-    this.y = y;
-  }
-
-  static distance(a, b) {
-    const dx = a.x - b.x;
-    const dy = a.y - b.y;
-    return Math.hypot(dx, dy);
-  }
-}
-
-const p1 = new Point(5, 5);
-const p2 = new Point(10, 10);
-
-console.log(Point.distance(p1, p2));</pre>
-
-<h3 id="Gestion_de_this_pour_le_prototype_et_les_méthodes_statiques">Gestion de <code>this</code> pour le prototype et les méthodes statiques</h3>
-
-<p>Lorsqu'une méthode statique ou une méthode liée au prototype est appelée sans valeur <code>this</code>, celle-ci vaudra <code>undefined</code> au sein de la fonction. Il n'y aura pas d'autodétermination de <code>this</code> (<em>autoboxing</em> en anglais). On aura le même résultat si on invoque ces fonctions dans du code non-strict car les fonctions liées aux classes sont exécutées en mode strict.</p>
-
-<pre class="brush: js">class Animal {
-  crie() {
-    return this;
-  }
-  static mange() {
-    return this;
-  }
-}
-
-let obj = new Animal();
-obj.crie(); // Animal {}
-let crie = obj.crie;
-crie(); // undefined
-
-Animal.mange(); // class Animal
-let mange = Animal.mange;
-mange(); // undefined</pre>
-
-<p>Si on écrit le code avec des fonctions traditionnelles plutôt qu'avec des classes et qu'on utilise le mode non-strict, l'autodétermination de <code>this</code> sera faite en fonction du contexte dans lequel la fonction a été appelée. Si la valeur initiale est <code>undefined</code>, <code>this</code> correspondra à l'objet global.</p>
-
-<p>L'autodétermination de <code>this</code> n'a pas lieu en mode strict, la valeur <code>this</code> est passée telle quelle.</p>
-
-<pre class="brush: js">function Animal() { }
-
-Animal.prototype.crie = function() {
-  return this;
-}
-
-Animal.mange = function() {
-  return this;
-}
-
-let obj = new Animal();
-let crie = obj.crie;
-crie(); // l'objet global
-
-let mange = Animal.mange;
-mange(); // l'objet global
-</pre>
-
-<h3 id="Propriétés_des_instances">Propriétés des instances</h3>
-
-<p>Les propriétés des instances doivent être définies dans les méthodes de la classe :</p>
-
-<pre class="brush: js">class Rectangle {
-  constructor(hauteur, largeur) {
-    this.hauteur = hauteur;
-    this.largeur = largeur;
-  }
-}</pre>
-
-<p>Les propriétés statiques ou les données relatives au prototype doivent être définies en dehors de la déclaration comportant le corps de la classe :</p>
-
-<pre class="brush: js">Rectangle.largeurStatique = 20;
-Rectangle.prototype.largeurProto = 25;</pre>
-
-<h3 id="Déclarations_de_champs">Déclarations de champs</h3>
-
-<p>{{SeeCompatTable}}</p>
-
-<div class="warning">
-<p><strong>Attention :</strong> Les déclarations de champs publics et privés sont une <a href="https://github.com/tc39/proposal-class-fields">fonctionnalité expérimentale actuellement proposée pour être intégrée dans le standard ECMAScript</a>. Elle n'est pas implémentée par la majorité des navigateurs mais on peut émuler cette fonctionnalité en utilisant un système de compilation tel que <a href="https://babeljs.io/">Babel</a>.</p>
-</div>
-
-<h4 id="Déclarations_de_champs_publics">Déclarations de champs publics</h4>
-
-<p>En utilisant la syntaxe pour la déclaration des champs, on peut réécrire l'exemple précédent de la façon suivante :</p>
-
-<pre class="brush: js">class Rectangle {
-  hauteur = 0;
-  largeur;
-  constructor(hauteur, largeur) {
-    this.hauteur = hauteur;
-    this.largeur = largeur;
-  }
-}</pre>
-
-<p>En déclarant les champs en préalable, il est plus facile de comprendre la classe dans son ensemble. De plus, on s'assure que les champs soient toujours présents.</p>
-
-<p>Comme on peut le voir dans cet exemple, les champs peuvent éventuellement être déclarés avec une valeur par défaut.</p>
-
-<h4 id="Déclarations_de_champs_privés">Déclarations de champs privés</h4>
-
-<p>En utilisant des champs privés, on peut revoir la définition de la façon suivante :</p>
-
-<pre class="brush: js">class Rectangle {
-  #hauteur = 0;
-  #largeur;
-  constructor(hauteur, largeur){
-    this.#hauteur = hauteur;
-    this.#largeur = largeur;
-  }
-}</pre>
-
-<p>Si on utilise les champs privés hors de la classe, cela génèrera une erreur. Ces champs ne peuvent être lus ou modifiés que depuis le corps de la classe. En évitant d'exposer des éléments à l'extérieur, on s'assure que les portions de code qui consomment cette classe n'utilise pas ses détails internes et on peut alors maintenir la classe dans son ensemble et modifier les détails internes si besoin.</p>
-
-<div class="note">
-<p><strong>Note :</strong> Les champs privés doivent nécessairement être déclarés en premier dans les déclarations de champ.</p>
-</div>
-
-<p>Il n'est pas possible de créer des champs privés <em>a posteriori</em> au moment où on leur affecterait une valeur. Autrement dit, il est possible de déclarer une variable normale au moment voulu lorsqu'on lui affecte une valeur tandis que pour les champs privés, ces derniers doivent être déclarés (éventuellement initialisés) en amont, au début du corps de la classe.</p>
-
-<h2 id="Créer_une_sous-classe_avec_extends">Créer une sous-classe avec <code>extends</code></h2>
-
-<p>Le mot-clé <code><a href="/fr/docs/Web/JavaScript/Reference/Classes/extends">extends</a></code>, utilisé dans les déclarations ou les expressions de classes, permet de créer une classe qui hérite d'une autre classe (on parle aussi de « sous-classe » ou de « classe-fille »).</p>
-
-<pre class="brush: js">class Animal {
-  constructor(nom) {
-    this.nom = nom;
-  }
-
-  parle() {
-    console.log(`${this.nom} fait du bruit.`);
-  }
-}
-
-class Chien extends Animal {
-  constructor(nom) {
-    super(nom); // appelle le constructeur parent avec le paramètre
-  }
-  parle() {
-    console.log(`${this.nom} aboie.`);
-  }
-}</pre>
-
-<p>Si on déclare un constructeur dans une classe fille, on doit utiliser <code>super()</code> avant <code>this</code>.</p>
-
-<p>On peut également étendre des classes plus <em>traditionnelles</em> basées sur des constructeurs fonctionnels :</p>
-
-<pre class="brush: js">function Animal (nom) {
-  this.nom = nom;
-}
-Animal.prototype.crie = function () {
-  console.log(`${this.nom} fait du bruit.`);
-}
-
-class Chien extends Animal {
-  crie() {
-    super.crie();
-    console.log(`${this.nom} aboie.`);
-  }
-}
-
-let c = new Chien('Ida');
-c.crie();
-// Ida fait du bruit.
-// Ida aboie.</pre>
-
-<p>En revanche, les classes ne permettent pas d'étendre des objets classiques non-constructibles. Si on souhaite créer un lien d'héritage en un objet et une classe, on utilisera {{jsxref("Object.setPrototypeOf()")}} :</p>
-
-<pre class="brush: js">const Animal = {
-  crie() {
-    console.log(`${this.nom} fait du bruit.`);
-  }
-};
-
-class Chien {
-  constructor(nom) {
-    this.nom = nom;
-  }
-  crie() {
-    super.crie();
-    console.log(`${this.nom} aboie.`);
-  }
-}
-Object.setPrototypeOf(Chien.prototype, Animal);
-
-let d = new Chien('Ida');
-d.crie();
-// Ida fait du bruit
-// Ida aboie.</pre>
-
-<h2 id="Le_symbole_species">Le symbole <code>species</code></h2>
-
-<p>Lorsqu'on souhaite renvoyer des objets {{jsxref("Array")}} avec une sous-classe <code>MonArray</code>, on peut utiliser symbole <code>species</code> pour surcharger le constructeur par défaut.</p>
-
-<p>Par exemple, si, lorsqu'on utilise des méthodes comme {{jsxref("Array.map","map()")}} qui renvoient le constructeur par défaut et qu'on veut qu'elles renvoient <code>Array</code> plutôt que <code>MonArray</code>, on utilisera {{jsxref("Symbol.species")}} :</p>
-
-<pre class="brush: js">class MonArray extends Array {
-  // On surcharge species
-  // avec le constructeur Array du parent
-  static get [Symbol.species]() { return Array; }
-}
-let a = new MonArray(1,2,3);
-let mapped = a.map(x =&gt; x * x);
-
-console.log(mapped instanceof MonArray); // false
-console.log(mapped instanceof Array);    // true</pre>
-
-<h2 id="Utiliser_super_pour_la_classe_parente">Utiliser super pour la classe parente</h2>
-
-<p>Le mot-clé <code><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/super">super</a></code> est utilisé pour appeler les fonctions rattachées à un objet parent.</p>
-
-<pre class="brush: js">class Chat {
-  constructor(nom) {
-    this.nom = nom;
-  }
-
-  parler() {
-    console.log(`${this.nom} fait du bruit.`);
-  }
-}
-
-class Lion extends Chat {
-  parler() {
-    super.parler();
-    console.log(`${this.nom} rugit.`);
-  }
-}
-</pre>
-
-<h2 id="Les_mix-ins">Les <em>mix-ins</em></h2>
-
-<p>Les sous-classes abstraites ou <em>mix-ins</em> sont des modèles (<em>templates</em>) pour des classes. Une classe ECMAScript ne peut avoir qu'une seule classe parente et il n'est donc pas possible, par exemple, d'hériter de plusieurs classes dont une classe abstraite. La fonctionnalité dont on souhaite disposer doit être fournie par la classe parente.</p>
-
-<p>Une fonction peut prendre une classe parente en entrée et renvoyer une classe fille qui étend cette classe parente. Cela peut permettre d'émuler les <em>mix-ins</em> avec ECMAScript.</p>
-
-<pre class="brush: js">let calculetteMixin = Base =&gt; class extends Base {
-  calc() { }
-};
-
-let aleatoireMixin = Base =&gt; class extends Base {
-  randomiseur() { }
-};
-</pre>
-
-<p>Une classe utilisant ces <em>mix-ins</em> peut alors être écrite de cette façon :</p>
-
-<pre class="brush: js">class Toto { }
-class Truc extends calculetteMixin(aleatoireMixin(Toto)) { }
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-class-definitions', 'Class definitions')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2016', '#sec-class-definitions', 'Class definitions')}}</td>
-   <td>{{Spec2('ES2016')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2017', '#sec-class-definitions', 'Class definitions')}}</td>
-   <td>{{Spec2('ES2017')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-class-definitions', 'Class definitions')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.classes")}}</p>
-
-<h2 id="Utilisation_via_l'éditeur_multiligne_dans_Firefox">Utilisation via l'éditeur multiligne dans Firefox</h2>
-
-<p>Une classe ne peut pas être redéfinie. Si vous testez votre code via l'éditeur multiligne JavaScript de Firefox (Outils &gt; Développement web &gt; Editeur multiligne JavaScript) et que vous exécutez à plusieurs reprises votre code avec la définition d'une classe, vous obtiendrez une exception SyntaxError : <em>redeclaration of let &lt;class-name&gt;</em>.</p>
-
-<p>Pour relancer une définition, il faut utiliser le menu Exécuter &gt; Recharger et exécuter. À ce sujet, voir le bug {{bug("1428672")}}.</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/JavaScript/Reference/Fonctions">Les fonctions</a></li>
- <li>{{jsxref("Instructions/class", "Les déclarations de classes","",1)}}</li>
- <li>{{jsxref("Opérateurs/class", "Les expressions de classes","",1)}}</li>
- <li>{{jsxref("Opérateurs/super", "super")}}</li>
- <li><a href="https://tech.mozfr.org/post/2015/07/29/ES6-en-details-%3A-les-classes">Billet sur les classes (traduction en français)</a></li>
- <li><a href="https://github.com/tc39/proposal-class-fields">Champs publics et privés pour les classes (proposition de niveau 3)</a></li>
-</ul>
diff --git a/files/fr/web/javascript/reference/classes/index.md b/files/fr/web/javascript/reference/classes/index.md
new file mode 100644
index 0000000000..2808bc1d39
--- /dev/null
+++ b/files/fr/web/javascript/reference/classes/index.md
@@ -0,0 +1,410 @@
+---
+title: Classes
+slug: Web/JavaScript/Reference/Classes
+tags:
+  - Classes
+  - ECMAScript 2015
+  - Intermédiaire
+  - JavaScript
+  - Reference
+translation_of: Web/JavaScript/Reference/Classes
+---
+{{JsSidebar("Classes")}}
+
+Les classes JavaScript ont été introduites avec ECMAScript 2015. Elles sont un « sucre syntaxique » par rapport à l'héritage prototypal. En effet, cette syntaxe n'introduit pas un nouveau modèle d'héritage dans JavaScript ! Elle fournit uniquement une syntaxe plus simple pour créer des objets et manipuler l'héritage.
+
+## Définir des classes
+
+En réalité, les classes sont juste des [fonctions](/fr/docs/Web/JavaScript/Reference/Fonctions) spéciales. Ainsi, les classes sont définies de la même façon que les fonctions : par déclaration, ou par expression.
+
+### Les déclarations de classes
+
+Pour utiliser une déclaration de classe simple, on utilisera le mot-clé `class`, suivi par le nom de la classe que l'on déclare (ici « Rectangle »).
+
+```js
+class Rectangle {
+  constructor(hauteur, largeur) {
+    this.hauteur = hauteur;
+    this.largeur = largeur;
+  }
+}
+```
+
+#### Remontée des déclarations (_hoisting_)
+
+[Les déclarations de fonctions](/fr/docs/Web/JavaScript/Reference/Instructions/function) sont remontées dans le code. En revanche, ce n'est pas le cas pour les déclarations de classes. Ainsi, il est nécessaire de déclarer la classe avant de l'instancier. Dans le cas contraire, on obtient une {{jsxref("ReferenceError")}} :
+
+```js example-bad
+const p = new Rectangle(); // ReferenceError
+
+class Rectangle {}
+```
+
+### Les expressions de classes
+
+Il est possible d'utiliser des expressions de classes, nommées ou anonymes. Si on utilise un nom dans l'expression, ce nom ne sera accessible que depuis le corps de la classe via la propriété {{jsxref("Function.name", "name")}} (cette valeur ne sera pas directement accessible pour les instances).
+
+```js
+// anonyme
+let Rectangle = class {
+  constructor(hauteur, largeur) {
+    this.hauteur = hauteur;
+    this.largeur = largeur;
+  }
+};
+
+// nommée
+let Rectangle = class Rectangle {
+  constructor(hauteur, largeur) {
+    this.hauteur = hauteur;
+    this.largeur = largeur;
+  }
+};
+```
+
+> **Note :** Les mêmes règles s'appliquent aux expressions de classes en ce qui concerne la remontée (_hoisting_) des classes (cf. le paragraphe précédent sur les remontées des déclarations de classe).
+
+## Corps d'une classe et définition des méthodes
+
+Le corps d'une classe est la partie contenue entre les accolades. C'est dans cette partie que l'on définit les propriétés d'une classe comme ses méthodes et son constructeur.
+
+### Mode strict
+
+Le corps des classes, pour les expressions et pour les déclarations de classes, est exécuté en [mode strict](/fr/docs/Web/JavaScript/Reference/Strict_mode) (autrement dit, le constructeur, les méthodes statiques, le prototype, les accesseurs (_getters_) et mutateurs (_setters_) sont exécutés en mode strict).
+
+### Constructeur
+
+La méthode [`constructor`](/fr/docs/Web/JavaScript/Reference/Classes/constructor) est une méthode spéciale qui permet de créer et d'initialiser les objet créés avec une classe. Il ne peut y avoir qu'une seule méthode avec le nom "constructor" pour une classe donnée. Si la classe contient plusieurs occurences d'une méthode `constructor`, cela provoquera une exception {{jsxref("SyntaxError")}}.
+
+Le constructeur ainsi déclaré peut utiliser le mot-clé `super` afin d'appeler le constructeur de la classe parente.
+
+### Méthodes de prototype
+
+Voir aussi les définitions de méthode.
+
+```js
+class Rectangle {
+  constructor(hauteur, largeur) {
+    this.hauteur = hauteur;
+    this.largeur = largeur;
+  }
+
+  get area() {
+    return this.calcArea();
+  }
+
+  calcArea() {
+    return this.largeur * this.hauteur;
+  }
+}
+
+const carré = new Rectangle(10, 10);
+
+console.log(carré.area);
+```
+
+### Méthodes statiques
+
+Le mot-clé [`static`](/fr/docs/Web/JavaScript/Reference/Classes/static) permet de définir une méthode statique pour une classe. Les méthodes statiques sont appelées par rapport à la classe entière et non par rapport à une [instance](/fr/docs/Web/JavaScript/Introduction_à_JavaScript_orienté_objet#L'instance) donnée (ces méthodes ne peuvent pas être appelées « depuis » une instance). Ces méthodes sont généralement utilisées sous formes d'utilitaires au sein d'applications.
+
+```js
+class Point {
+  constructor(x, y) {
+    this.x = x;
+    this.y = y;
+  }
+
+  static distance(a, b) {
+    const dx = a.x - b.x;
+    const dy = a.y - b.y;
+    return Math.hypot(dx, dy);
+  }
+}
+
+const p1 = new Point(5, 5);
+const p2 = new Point(10, 10);
+
+console.log(Point.distance(p1, p2));
+```
+
+### Gestion de `this` pour le prototype et les méthodes statiques
+
+Lorsqu'une méthode statique ou une méthode liée au prototype est appelée sans valeur `this`, celle-ci vaudra `undefined` au sein de la fonction. Il n'y aura pas d'autodétermination de `this` (_autoboxing_ en anglais). On aura le même résultat si on invoque ces fonctions dans du code non-strict car les fonctions liées aux classes sont exécutées en mode strict.
+
+```js
+class Animal {
+  crie() {
+    return this;
+  }
+  static mange() {
+    return this;
+  }
+}
+
+let obj = new Animal();
+obj.crie(); // Animal {}
+let crie = obj.crie;
+crie(); // undefined
+
+Animal.mange(); // class Animal
+let mange = Animal.mange;
+mange(); // undefined
+```
+
+Si on écrit le code avec des fonctions traditionnelles plutôt qu'avec des classes et qu'on utilise le mode non-strict, l'autodétermination de `this` sera faite en fonction du contexte dans lequel la fonction a été appelée. Si la valeur initiale est `undefined`, `this` correspondra à l'objet global.
+
+L'autodétermination de `this` n'a pas lieu en mode strict, la valeur `this` est passée telle quelle.
+
+```js
+function Animal() { }
+
+Animal.prototype.crie = function() {
+  return this;
+}
+
+Animal.mange = function() {
+  return this;
+}
+
+let obj = new Animal();
+let crie = obj.crie;
+crie(); // l'objet global
+
+let mange = Animal.mange;
+mange(); // l'objet global
+```
+
+### Propriétés des instances
+
+Les propriétés des instances doivent être définies dans les méthodes de la classe :
+
+```js
+class Rectangle {
+  constructor(hauteur, largeur) {
+    this.hauteur = hauteur;
+    this.largeur = largeur;
+  }
+}
+```
+
+Les propriétés statiques ou les données relatives au prototype doivent être définies en dehors de la déclaration comportant le corps de la classe :
+
+```js
+Rectangle.largeurStatique = 20;
+Rectangle.prototype.largeurProto = 25;
+```
+
+### Déclarations de champs
+
+{{SeeCompatTable}}
+
+> **Attention :** Les déclarations de champs publics et privés sont une [fonctionnalité expérimentale actuellement proposée pour être intégrée dans le standard ECMAScript](https://github.com/tc39/proposal-class-fields). Elle n'est pas implémentée par la majorité des navigateurs mais on peut émuler cette fonctionnalité en utilisant un système de compilation tel que [Babel](https://babeljs.io/).
+
+#### Déclarations de champs publics
+
+En utilisant la syntaxe pour la déclaration des champs, on peut réécrire l'exemple précédent de la façon suivante :
+
+```js
+class Rectangle {
+  hauteur = 0;
+  largeur;
+  constructor(hauteur, largeur) {
+    this.hauteur = hauteur;
+    this.largeur = largeur;
+  }
+}
+```
+
+En déclarant les champs en préalable, il est plus facile de comprendre la classe dans son ensemble. De plus, on s'assure que les champs soient toujours présents.
+
+Comme on peut le voir dans cet exemple, les champs peuvent éventuellement être déclarés avec une valeur par défaut.
+
+#### Déclarations de champs privés
+
+En utilisant des champs privés, on peut revoir la définition de la façon suivante :
+
+```js
+class Rectangle {
+  #hauteur = 0;
+  #largeur;
+  constructor(hauteur, largeur){
+    this.#hauteur = hauteur;
+    this.#largeur = largeur;
+  }
+}
+```
+
+Si on utilise les champs privés hors de la classe, cela génèrera une erreur. Ces champs ne peuvent être lus ou modifiés que depuis le corps de la classe. En évitant d'exposer des éléments à l'extérieur, on s'assure que les portions de code qui consomment cette classe n'utilise pas ses détails internes et on peut alors maintenir la classe dans son ensemble et modifier les détails internes si besoin.
+
+> **Note :** Les champs privés doivent nécessairement être déclarés en premier dans les déclarations de champ.
+
+Il n'est pas possible de créer des champs privés _a posteriori_ au moment où on leur affecterait une valeur. Autrement dit, il est possible de déclarer une variable normale au moment voulu lorsqu'on lui affecte une valeur tandis que pour les champs privés, ces derniers doivent être déclarés (éventuellement initialisés) en amont, au début du corps de la classe.
+
+## Créer une sous-classe avec `extends`
+
+Le mot-clé [`extends`](/fr/docs/Web/JavaScript/Reference/Classes/extends), utilisé dans les déclarations ou les expressions de classes, permet de créer une classe qui hérite d'une autre classe (on parle aussi de « sous-classe » ou de « classe-fille »).
+
+```js
+class Animal {
+  constructor(nom) {
+    this.nom = nom;
+  }
+
+  parle() {
+    console.log(`${this.nom} fait du bruit.`);
+  }
+}
+
+class Chien extends Animal {
+  constructor(nom) {
+    super(nom); // appelle le constructeur parent avec le paramètre
+  }
+  parle() {
+    console.log(`${this.nom} aboie.`);
+  }
+}
+```
+
+Si on déclare un constructeur dans une classe fille, on doit utiliser `super()` avant `this`.
+
+On peut également étendre des classes plus _traditionnelles_ basées sur des constructeurs fonctionnels :
+
+```js
+function Animal (nom) {
+  this.nom = nom;
+}
+Animal.prototype.crie = function () {
+  console.log(`${this.nom} fait du bruit.`);
+}
+
+class Chien extends Animal {
+  crie() {
+    super.crie();
+    console.log(`${this.nom} aboie.`);
+  }
+}
+
+let c = new Chien('Ida');
+c.crie();
+// Ida fait du bruit.
+// Ida aboie.
+```
+
+En revanche, les classes ne permettent pas d'étendre des objets classiques non-constructibles. Si on souhaite créer un lien d'héritage en un objet et une classe, on utilisera {{jsxref("Object.setPrototypeOf()")}} :
+
+```js
+const Animal = {
+  crie() {
+    console.log(`${this.nom} fait du bruit.`);
+  }
+};
+
+class Chien {
+  constructor(nom) {
+    this.nom = nom;
+  }
+  crie() {
+    super.crie();
+    console.log(`${this.nom} aboie.`);
+  }
+}
+Object.setPrototypeOf(Chien.prototype, Animal);
+
+let d = new Chien('Ida');
+d.crie();
+// Ida fait du bruit
+// Ida aboie.
+```
+
+## Le symbole `species`
+
+Lorsqu'on souhaite renvoyer des objets {{jsxref("Array")}} avec une sous-classe `MonArray`, on peut utiliser symbole `species` pour surcharger le constructeur par défaut.
+
+Par exemple, si, lorsqu'on utilise des méthodes comme {{jsxref("Array.map","map()")}} qui renvoient le constructeur par défaut et qu'on veut qu'elles renvoient `Array` plutôt que `MonArray`, on utilisera {{jsxref("Symbol.species")}} :
+
+```js
+class MonArray extends Array {
+  // On surcharge species
+  // avec le constructeur Array du parent
+  static get [Symbol.species]() { return Array; }
+}
+let a = new MonArray(1,2,3);
+let mapped = a.map(x => x * x);
+
+console.log(mapped instanceof MonArray); // false
+console.log(mapped instanceof Array);    // true
+```
+
+## Utiliser super pour la classe parente
+
+Le mot-clé [`super`](/fr/docs/Web/JavaScript/Reference/Opérateurs/super) est utilisé pour appeler les fonctions rattachées à un objet parent.
+
+```js
+class Chat {
+  constructor(nom) {
+    this.nom = nom;
+  }
+
+  parler() {
+    console.log(`${this.nom} fait du bruit.`);
+  }
+}
+
+class Lion extends Chat {
+  parler() {
+    super.parler();
+    console.log(`${this.nom} rugit.`);
+  }
+}
+```
+
+## Les _mix-ins_
+
+Les sous-classes abstraites ou _mix-ins_ sont des modèles (_templates_) pour des classes. Une classe ECMAScript ne peut avoir qu'une seule classe parente et il n'est donc pas possible, par exemple, d'hériter de plusieurs classes dont une classe abstraite. La fonctionnalité dont on souhaite disposer doit être fournie par la classe parente.
+
+Une fonction peut prendre une classe parente en entrée et renvoyer une classe fille qui étend cette classe parente. Cela peut permettre d'émuler les _mix-ins_ avec ECMAScript.
+
+```js
+let calculetteMixin = Base => class extends Base {
+  calc() { }
+};
+
+let aleatoireMixin = Base => class extends Base {
+  randomiseur() { }
+};
+```
+
+Une classe utilisant ces _mix-ins_ peut alors être écrite de cette façon :
+
+```js
+class Toto { }
+class Truc extends calculetteMixin(aleatoireMixin(Toto)) { }
+```
+
+## Spécifications
+
+| Spécification                                                                                | État                         | Commentaires         |
+| -------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName('ES2015', '#sec-class-definitions', 'Class definitions')}} | {{Spec2('ES2015')}}     | Définition initiale. |
+| {{SpecName('ES2016', '#sec-class-definitions', 'Class definitions')}} | {{Spec2('ES2016')}}     |                      |
+| {{SpecName('ES2017', '#sec-class-definitions', 'Class definitions')}} | {{Spec2('ES2017')}}     |                      |
+| {{SpecName('ESDraft', '#sec-class-definitions', 'Class definitions')}} | {{Spec2('ESDraft')}} |                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.classes")}}
+
+## Utilisation via l'éditeur multiligne dans Firefox
+
+Une classe ne peut pas être redéfinie. Si vous testez votre code via l'éditeur multiligne JavaScript de Firefox (Outils > Développement web > Editeur multiligne JavaScript) et que vous exécutez à plusieurs reprises votre code avec la définition d'une classe, vous obtiendrez une exception SyntaxError : _redeclaration of let \<class-name>_.
+
+Pour relancer une définition, il faut utiliser le menu Exécuter > Recharger et exécuter. À ce sujet, voir le bug {{bug("1428672")}}.
+
+## Voir aussi
+
+- [Les fonctions](/fr/docs/Web/JavaScript/Reference/Fonctions)
+- {{jsxref("Instructions/class", "Les déclarations de classes","",1)}}
+- {{jsxref("Opérateurs/class", "Les expressions de classes","",1)}}
+- {{jsxref("Opérateurs/super", "super")}}
+- [Billet sur les classes (traduction en français)](https://tech.mozfr.org/post/2015/07/29/ES6-en-details-%3A-les-classes)
+- [Champs publics et privés pour les classes (proposition de niveau 3)](https://github.com/tc39/proposal-class-fields)
diff --git a/files/fr/web/javascript/reference/classes/private_class_fields/index.html b/files/fr/web/javascript/reference/classes/private_class_fields/index.html
deleted file mode 100644
index 9d1187b01d..0000000000
--- a/files/fr/web/javascript/reference/classes/private_class_fields/index.html
+++ /dev/null
@@ -1,207 +0,0 @@
----
-title: Variables de classe privés
-slug: Web/JavaScript/Reference/Classes/Private_class_fields
-tags:
-  - Classe
-  - Fonctionnalité du langage
-  - JavaScript
-translation_of: Web/JavaScript/Reference/Classes/Private_class_fields
----
-<div>{{JsSidebar("Classes")}}</div>
-
-<div>Les propriétés de classe sont publiques par défaut et peuvent être lues et modifiées à l'extérieur de la classe. Cependant, <a href="https://github.com/tc39/proposal-class-fields">une proposition expérimentale</a>, permettant de définir des variables privées dans une classe avec le préfixe <code>#</code>, est disponible.</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox notranslate">class ClassWithPrivateField {
-  #privateField
-}
-
-class ClassWithPrivateMethod {
-  #privateMethod() {
-    return 'hello world'
- }
-}
-
-class ClassWithPrivateStaticField {
-  static #PRIVATE_STATIC_FIELD
-}
-</pre>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Champs_privés_statiques">Champs privés statiques</h3>
-
-<p>Les champs privés sont accessibles depuis le constructeur et depuis l'intérieur de la déclaration de la classe elle-même.</p>
-
-<p>La limitation des variables statiques ne pouvant être appelées que par des méthodes statiques tient toujours.</p>
-
-<pre class="brush: js notranslate">class ClassWithPrivateStaticField {
-  static #PRIVATE_STATIC_FIELD
-
-  static publicStaticMethod() {
-    ClassWithPrivateStaticField.#PRIVATE_STATIC_FIELD = 42
-    return ClassWithPrivateStaticField.#PRIVATE_STATIC_FIELD
-  }
-}
-
-console.assert(ClassWithPrivateStaticField.publicStaticMethod() === 42)</pre>
-
-<p>Les champs statiques privés sont ajoutés au constructeur de la classe au moment de l'évaluation de classe..</p>
-
-<p>Il y a une restriction de provenance sur les champs statiques privés. Seule la classe qui a défini un champ statique privé peut y accéder.</p>
-
-<p>Ceci peut conduire à un comportement inattendu lors de l'utilisation de <strong><code>this</code></strong>.</p>
-
-<pre class="brush: js notranslate">class BaseClassWithPrivateStaticField {
-  static #PRIVATE_STATIC_FIELD
-
-  static basePublicStaticMethod() {
-    this.#PRIVATE_STATIC_FIELD = 42
-    return this.#PRIVATE_STATIC_FIELD
-  }
-}
-
-class SubClass extends BaseClassWithPrivateStaticField { }
-
-let error = null
-
-try {
-  SubClass.basePublicStaticMethod()
-} catch(e) { error = e}
-
-console.assert(error instanceof TypeError)
-</pre>
-
-<h3 id="Champs_dinstance_privés">Champs d'instance privés</h3>
-
-<p>Les champs d'instance privés sont déclarés avec des <strong>noms</strong> à <strong># </strong>(prononcés "<em>noms à hash</em>", "<em>hash names</em>" en anglais), qui sont des identifieurs préfixés par <code>#</code>. Le <code>#</code> fait partie du nom lui-même. Il est utilisé tant pour la déclaration que pour l'accès.</p>
-
-<p>L'encapsulation est forcée par le langage. C'est une erreur de syntaxe que de faire référence aux noms à <code>#</code> en dehors de leur portée.</p>
-
-<pre class="brush: js notranslate">class ClassWithPrivateField {
-  #privateField
-
-  constructor() {
-    this.#privateField = 42
-    this.#randomField = 666 // Erreur de syntaxe
-  }
-}
-
-const instance = new ClassWithPrivateField()
-instance.#privateField === 42 // Erreur de syntaxe
-</pre>
-
-<h3 id="Méthodes_Privées">Méthodes Privées</h3>
-
-<h4 id="Méthodes_statiques_privées">Méthodes statiques privées</h4>
-
-<p>Comme leur équivalents publics, les méthodes statiques privées sont appelées dans la classe elle-même, pas dans les instances de la classe. Comme les champs statiques privés, elles ne sont accessibles que depuis l'intérieur de la déclaration de la classe.</p>
-
-<p>Les méthodes statiques privées peuvent être des fonctions génératrices, asynchrones et génératrices asynchrones.</p>
-
-<pre class="brush: js notranslate">class ClassWithPrivateStaticMethod {
-    static #privateStaticMethod() {
-        return 42
-    }
-
-    static publicStaticMethod1() {
-        return ClassWithPrivateStaticMethod.#privateStaticMethod();
-    }
-
-    static publicStaticMethod2() {
-        return this.#privateStaticMethod();
-    }
-}
-
-console.assert(ClassWithPrivateStaticMethod.publicStaticMethod1() === 42);
-console.assert(ClassWithPrivateStaticMethod.publicStaticMethod2() === 42);
-</pre>
-
-<p>Cela peut conduire à un comportement inattendu lors de l'utilisation de <strong><code>this</code></strong>. Dans l'exemple suivant, <code>this</code> fait référence à la classe <code>Derived</code> (pas à la classe <code>Base</code>) lorsqu'on essaie d'appeler <code>Derived.publicStaticMethod2()</code>, et fait ainsi apparaître la même "restriction de provenance" que mentionné ci-dessus :</p>
-
-<pre class="brush: js notranslate">class Base {
-    static #privateStaticMethod() {
-        return 42;
-    }
-    static publicStaticMethod1() {
-        return Base.#privateStaticMethod();
-    }
-    static publicStaticMethod2() {
-        return this.#privateStaticMethod();
-    }
-}
-
-class Derived extends Base {}
-
-console.log(Derived.publicStaticMethod1()); // 42
-console.log(Derived.publicStaticMethod2()); // TypeError
-</pre>
-
-<h4 id="Méthodes_dinstance_privées">Méthodes d'instance privées</h4>
-
-<p>Les méthodes d'instance privées sont des méthodes disponibles dans les instances de classe privées, dont l'accès est restreint de la même manière que les champs d'instance privés.</p>
-
-<pre class="brush: js notranslate">class ClassWithPrivateMethod {
-  #privateMethod() {
-    return 'hello world'
-  }
-
-  getPrivateMessage() {
-      return this.#privateMethod()
-  }
-}
-
-const instance = new ClassWithPrivateMethod()
-console.log(instance.getPrivateMessage())
-// expected output: "hello worl​d"</pre>
-
-<p>Les méthodes d'instance privées peuvent être des fonctions génératrices, asynchones ou génératrices asynchrones. Des accesseurs (getters) et des mutateurs (setters) privés sont aussi posibles :</p>
-
-<pre class="brush: js notranslate">class ClassWithPrivateAccessor {
-  #message
-
-  get #decoratedMessage() {
-    return `✨${this.#message}✨`
-  }
-  set #decoratedMessage(msg) {
-    this.#message = msg
-  }
-
-  constructor() {
-    this.#decoratedMessage = 'hello world'
-    console.log(this.#decoratedMessage)
-  }
-}
-
-new ClassWithPrivateAccessor();
-// expected output: "✨hello worl​d✨"
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('Public and private instance fields', '#prod-FieldDefinition', 'FieldDefinition')}}</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-
-
-<p>{{Compat("javascript.classes.private_class_fields")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/JavaScript/Reference/Classes/Class_fields">Champs de classe publiques</a></li>
- <li><a href="https://rfrn.org/~shu/2018/05/02/the-semantics-of-all-js-class-elements.html">The Semantics of All JS Class Elements</a></li>
-</ul>
diff --git a/files/fr/web/javascript/reference/classes/private_class_fields/index.md b/files/fr/web/javascript/reference/classes/private_class_fields/index.md
new file mode 100644
index 0000000000..45ad084074
--- /dev/null
+++ b/files/fr/web/javascript/reference/classes/private_class_fields/index.md
@@ -0,0 +1,200 @@
+---
+title: Variables de classe privés
+slug: Web/JavaScript/Reference/Classes/Private_class_fields
+tags:
+  - Classe
+  - Fonctionnalité du langage
+  - JavaScript
+translation_of: Web/JavaScript/Reference/Classes/Private_class_fields
+---
+{{JsSidebar("Classes")}}Les propriétés de classe sont publiques par défaut et peuvent être lues et modifiées à l'extérieur de la classe. Cependant, [une proposition expérimentale](https://github.com/tc39/proposal-class-fields), permettant de définir des variables privées dans une classe avec le préfixe `#`, est disponible.
+
+## Syntaxe
+
+    class ClassWithPrivateField {
+      #privateField
+    }
+
+    class ClassWithPrivateMethod {
+      #privateMethod() {
+        return 'hello world'
+     }
+    }
+
+    class ClassWithPrivateStaticField {
+      static #PRIVATE_STATIC_FIELD
+    }
+
+## Exemples
+
+### Champs privés statiques
+
+Les champs privés sont accessibles depuis le constructeur et depuis l'intérieur de la déclaration de la classe elle-même.
+
+La limitation des variables statiques ne pouvant être appelées que par des méthodes statiques tient toujours.
+
+```js
+class ClassWithPrivateStaticField {
+  static #PRIVATE_STATIC_FIELD
+
+  static publicStaticMethod() {
+    ClassWithPrivateStaticField.#PRIVATE_STATIC_FIELD = 42
+    return ClassWithPrivateStaticField.#PRIVATE_STATIC_FIELD
+  }
+}
+
+console.assert(ClassWithPrivateStaticField.publicStaticMethod() === 42)
+```
+
+Les champs statiques privés sont ajoutés au constructeur de la classe au moment de l'évaluation de classe..
+
+Il y a une restriction de provenance sur les champs statiques privés. Seule la classe qui a défini un champ statique privé peut y accéder.
+
+Ceci peut conduire à un comportement inattendu lors de l'utilisation de **`this`**.
+
+```js
+class BaseClassWithPrivateStaticField {
+  static #PRIVATE_STATIC_FIELD
+
+  static basePublicStaticMethod() {
+    this.#PRIVATE_STATIC_FIELD = 42
+    return this.#PRIVATE_STATIC_FIELD
+  }
+}
+
+class SubClass extends BaseClassWithPrivateStaticField { }
+
+let error = null
+
+try {
+  SubClass.basePublicStaticMethod()
+} catch(e) { error = e}
+
+console.assert(error instanceof TypeError)
+```
+
+### Champs d'instance privés
+
+Les champs d'instance privés sont déclarés avec des **noms** à **#** (prononcés "_noms à hash_", "_hash names_" en anglais), qui sont des identifieurs préfixés par `#`. Le `#` fait partie du nom lui-même. Il est utilisé tant pour la déclaration que pour l'accès.
+
+L'encapsulation est forcée par le langage. C'est une erreur de syntaxe que de faire référence aux noms à `#` en dehors de leur portée.
+
+```js
+class ClassWithPrivateField {
+  #privateField
+
+  constructor() {
+    this.#privateField = 42
+    this.#randomField = 666 // Erreur de syntaxe
+  }
+}
+
+const instance = new ClassWithPrivateField()
+instance.#privateField === 42 // Erreur de syntaxe
+```
+
+### Méthodes Privées
+
+#### Méthodes statiques privées
+
+Comme leur équivalents publics, les méthodes statiques privées sont appelées dans la classe elle-même, pas dans les instances de la classe. Comme les champs statiques privés, elles ne sont accessibles que depuis l'intérieur de la déclaration de la classe.
+
+Les méthodes statiques privées peuvent être des fonctions génératrices, asynchrones et génératrices asynchrones.
+
+```js
+class ClassWithPrivateStaticMethod {
+    static #privateStaticMethod() {
+        return 42
+    }
+
+    static publicStaticMethod1() {
+        return ClassWithPrivateStaticMethod.#privateStaticMethod();
+    }
+
+    static publicStaticMethod2() {
+        return this.#privateStaticMethod();
+    }
+}
+
+console.assert(ClassWithPrivateStaticMethod.publicStaticMethod1() === 42);
+console.assert(ClassWithPrivateStaticMethod.publicStaticMethod2() === 42);
+```
+
+Cela peut conduire à un comportement inattendu lors de l'utilisation de **`this`**. Dans l'exemple suivant, `this` fait référence à la classe `Derived` (pas à la classe `Base`) lorsqu'on essaie d'appeler `Derived.publicStaticMethod2()`, et fait ainsi apparaître la même "restriction de provenance" que mentionné ci-dessus :
+
+```js
+class Base {
+    static #privateStaticMethod() {
+        return 42;
+    }
+    static publicStaticMethod1() {
+        return Base.#privateStaticMethod();
+    }
+    static publicStaticMethod2() {
+        return this.#privateStaticMethod();
+    }
+}
+
+class Derived extends Base {}
+
+console.log(Derived.publicStaticMethod1()); // 42
+console.log(Derived.publicStaticMethod2()); // TypeError
+```
+
+#### Méthodes d'instance privées
+
+Les méthodes d'instance privées sont des méthodes disponibles dans les instances de classe privées, dont l'accès est restreint de la même manière que les champs d'instance privés.
+
+```js
+class ClassWithPrivateMethod {
+  #privateMethod() {
+    return 'hello world'
+  }
+
+  getPrivateMessage() {
+      return this.#privateMethod()
+  }
+}
+
+const instance = new ClassWithPrivateMethod()
+console.log(instance.getPrivateMessage())
+// expected output: "hello worl​d"
+```
+
+Les méthodes d'instance privées peuvent être des fonctions génératrices, asynchones ou génératrices asynchrones. Des accesseurs (getters) et des mutateurs (setters) privés sont aussi posibles :
+
+```js
+class ClassWithPrivateAccessor {
+  #message
+
+  get #decoratedMessage() {
+    return `✨${this.#message}✨`
+  }
+  set #decoratedMessage(msg) {
+    this.#message = msg
+  }
+
+  constructor() {
+    this.#decoratedMessage = 'hello world'
+    console.log(this.#decoratedMessage)
+  }
+}
+
+new ClassWithPrivateAccessor();
+// expected output: "✨hello worl​d✨"
+```
+
+## Spécifications
+
+| Spécification                                                                                                                |
+| ---------------------------------------------------------------------------------------------------------------------------- |
+| {{SpecName('Public and private instance fields', '#prod-FieldDefinition', 'FieldDefinition')}} |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.classes.private_class_fields")}}
+
+## Voir aussi
+
+- [Champs de classe publiques](/fr/docs/Web/JavaScript/Reference/Classes/Class_fields)
+- [The Semantics of All JS Class Elements](https://rfrn.org/~shu/2018/05/02/the-semantics-of-all-js-class-elements.html)
diff --git a/files/fr/web/javascript/reference/classes/public_class_fields/index.html b/files/fr/web/javascript/reference/classes/public_class_fields/index.html
deleted file mode 100644
index 80b3096c8a..0000000000
--- a/files/fr/web/javascript/reference/classes/public_class_fields/index.html
+++ /dev/null
@@ -1,265 +0,0 @@
----
-title: Champs de classe publics
-slug: Web/JavaScript/Reference/Classes/Public_class_fields
-tags:
-  - Classes
-  - Fonctionnalité du langage
-  - JavaScript
-translation_of: Web/JavaScript/Reference/Classes/Public_class_fields
-original_slug: Web/JavaScript/Reference/Classes/Class_fields
----
-<div>{{JsSidebar("Classes")}}{{SeeCompatTable}}</div>
-
-<div class="note">
-<p><strong>Note :</strong> Cette page décrit des fonctionnalités expérimentales.</p>
-
-<p>Les déclarations de champs, tant publics que privés, sont <a href="https://github.com/tc39/proposal-class-fields">une fonctionnalité expérimentale (étape 3)</a> proposée au <a href="https://tc39.github.io/beta/">TC39</a>, le comité des standards JavaScript.</p>
-
-<p>La prise en charge dans les navigateurs est limitée, mais cette fonctionnalité peut être utilisée à travers une étape de contruction avec des systèmes tels que <a href="https://babeljs.io/">Babel</a>. Voir <a href="/fr/docs/Web/JavaScript/Reference/Classes/Class_fields$edit#Browser_compatibility">l'information de compatibilité</a> ci-dessous.</p>
-</div>
-
-<p>Les champs publics, tant statiques que d'instance, sont des propriétés qui peuvent être écrites, et qui sont énumérables et configurables. En tant que telles, à la différence de leurs contreparties privées, elles participent à l'héritage du prototype.</p>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox notranslate">class ClasseAvecChampDInstance {
-  champDInstance = 'champ d\'instance'
-}
-
-class ClasseAvecChampStatique {
-  static champStatique = 'champ statique'
-}
-
-class ClasseAvecMethodeDInstancePublique {
-  methodePublique() {
-    return 'hello world'
-  }
-}
-</pre>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Champs_statiques_publics">Champs statiques publics</h3>
-
-<p>Les champs statiques publics sont utiles lorsque vous voulez qu'un champ n'existe qu'une seule fois par classe, pas dans chaque instance que vous créez. Cela est utile pour des caches, une configuration fixe, ou tout autres données dont vous n'avez pas besoin qu'elles soient répliquées à travers les instances.</p>
-
-<p>Les champs statiques publics sont déclarés en utilisant le mot-clé <code>static</code>. Ils sont ajoutés au constructeur de la classe au moment de l'évaluation de la classe en utilisant {{jsxref("Global_Objects/Object/defineProperty", "Object.defineProperty()")}}. On y accède à nouveau à partir du constructeur de la classe.</p>
-
-<pre class="brush: js notranslate">class ClasseAvecChampStatique {
-  static champStatique = 'champ statique'
-}
-
-console.log(ClasseAvecChampStatique.champStatique)
-// affichage attendu : "champ statique"​
-</pre>
-
-<p>Les champs sans initialiseur sont initialisés à <code>undefined</code>.</p>
-
-<pre class="brush: js notranslate">class ClasseAvecChampStatique {
-  static champStatique
-}
-
-console.assert(ClasseAvecChampStatique.hasOwnProperty('champStatique'))
-console.log(ClasseAvecChampStatique.champStatique)
-// affichage attendu : "undefined"</pre>
-
-<p>Les champs statiques publics ne sont pas réinitialisés dans les sous-classes, mais on peut y accéder via la chaîne de prototypes.</p>
-
-<pre class="brush: js notranslate">class ClasseAvecChampStatique {
-  static champStatiqueDeBase = 'champ de base'
-}
-
-class SousClasseAvecChampStatique extends ClasseAvecChampStatique {
-  static sousChampStatique = 'champ de la sous-classe'
-}
-
-console.log(SousClasseAvecChampStatique.sousChampStatique)
-// affichage attendu : "champ de la sous-classe"
-
-console.log(SousClasseAvecChampStatique.champStatiqueDeBase)
-// affichage attendu : "champ de base"</pre>
-
-<p>Lors de l'initialisation des champs, <code>this</code> fait référence au constructeur de la classe. Vous pouvez aussi le référencer par son nom, et utiliser <code>super</code> pour obtenir le constructeur de la superclasse (s'il en existe un) :</p>
-
-<pre class="brush: js notranslate">class ClasseAvecChampStatique {
-  static champStatiqueDeBase = 'champ statique de base'
-  static autreChampStatiqueDeBase = this.champStatiqueDeBase
-
-  static methodeStatiqueDeBase() { return 'affichage de la méthode statique de base' }
-}
-
-class SousClasseAvecChampStatique extends ClasseAvecChampStatique {
-  static sousChampStatique = super.methodeStatiqueDeBase()
-}
-
-console.log(ClasseAvecChampStatique.autreChampStatiqueDeBase)
-// affichage attendu : "champ statique de base"
-
-console.log(SousClasseAvecChampStatique.sousChampStatique)
-// affichage attendu : "affichage de la méthode statique de base"
-</pre>
-
-<h3 id="Champs_dinstance_publics">Champs d'instance publics</h3>
-
-<p>Les champs d'instance publics existent dans chaque instance créée d'une classe. En déclarant un champ public, vous pouvez vous assurer que le champ est toujours présent, et que la définition de la classe est davantage auto-documentée.</p>
-
-<p>Les champs d'instance publics sont ajoutés grâce à {{jsxref("Global_Objects/Object/defineProperty", "Object.defineProperty()")}}, soit au moment de la construction dans la classe de base (avant que le corps du constructeur ne soit exécuté), soit juste après le retour de <code>super()</code> dans une sous-classe.</p>
-
-<pre class="brush: js notranslate">class ClasseAvecChampDInstance {
-  champDInstance = 'champ d\'instance'
-}
-
-const instance = new ClasseAvecChampDInstance()
-console.log(instance.champDInstance)
-// affichage attendu : "champ d'instance"</pre>
-
-<p>Les champs sans initialiseur sont initialisés à <code>undefined</code>.</p>
-
-<pre class="brush: js notranslate">class ClasseAvecChampDInstance {
-  champdDInstance
-}
-
-const instance = new ClasseAvecChampDInstance()
-console.assert(instance.hasOwnProperty('champDInstance'))
-console.log(instance.champDInstance);
-// affichage attendu : "undefined"</pre>
-
-<p>À l'instar des propriétés, les noms de champ peuvent être calculés :</p>
-
-<pre class="brush: js notranslate">const PREFIXE = 'prefixe';
-
-class ClasseAvecNomDeChampCalcule {
-    [`${PREFIXE}Champ`] = 'champ préfixé'
-}
-
-const instance = new ClasseAvecNomDeChampCalcule()
-console.log(instance.prefixeChamp)
-// affichage attendu : "champ préfixé"</pre>
-
-<p>Lors de l'initialisation des champs, <code>this</code> fait référence à l'instance en cours de construction. Tout comme dans les méthodes d'instance publiques, si vous êtes dans une sous-classe, vous pouvez accéder au prototype de la superclasse en utilisant <code>super</code>.</p>
-
-<pre class="brush: js notranslate">class ClasseAvecChampDInstance {
-  champDInstanceDeBase = 'champ de base'
-  autreChampDInstanceDeBase = this.champDInstanceDeBase
-  methodeDInstanceDeBase() { return 'affichage de la méthode de base' }
-}
-
-class SousClasseAvecChampDInstance extends ClasseAvecChampDInstance {
-  sousChampDInstance = super.methodeDInstanceDeBase()
-}
-
-const base = new ClasseAvecChampDInstance()
-const sous = new SousClasseAvecChampDInstance()
-
-console.log(base.autreChampDInstanceDeBase)
-// affichage attendu : "champ de base"
-
-console.log(sous.sousChampDInstance)
-// affichage attendu : "affichage de la méthode de base"</pre>
-
-<h3 id="Méthodes_publiques">Méthodes publiques</h3>
-
-<h4 id="Méthodes_statiques_publiques">Méthodes statiques publiques</h4>
-
-<p>Le mot-clé <code><strong>static</strong></code> définit une méthode statique pour une classe. Les méthodes statiques ne sont pas appelées dans les instances de la classe. A la place, elles le sont dans la classe elle-même. Ce sont souvent des méthodes utilitaires, comme des fonctions pour créer ou cloner des objets.</p>
-
-<pre class="brush: js notranslate">class ClasseAvecMethodeStatique {
-  static methodeStatique() {
-    return 'la méthode statique a été appelée.';
-  }
-}
-
-console.log(ClasseAvecMethodeStatique.methodeStatique());
-// affichage attendu : "la méthode statique a été appelée."</pre>
-
-<p>Les méthodes statiques sont ajoutées au constructeur de la classe grâce à {{jsxref("Global_Objects/Object/defineProperty", "Object.defineProperty()")}} au moment de l'évaluation de la classe. Ces méthodes peuvent être écrites, ne sont pas énumérables et sont configurables.</p>
-
-<h4 id="Méthodes_dinstance_publiques">Méthodes d'instance publiques</h4>
-
-<p>Comme leur nom l'implique, les méthodes d'instance publiques sont des fonctions disponibles dans les instances de la classe.</p>
-
-<pre class="brush: js notranslate">class ClasseAvecMethodeDInstancePublique {
-  methodePublique() {
-    return 'hello world'
-  }
-}
-
-const instance = new ClasseAvecMethodeDInstancePublique()
-console.log(instance.methodePublique())
-// affichage attendu : "hello worl​d"</pre>
-
-<p>Les méthodes d'instance publiques sont ajoutées au prototype au moment de l'évaluation de la classe en utilisant {{jsxref("Global_Objects/Object/defineProperty", "Object.defineProperty()")}}. Elles peuvent être écrites, ne sont pas énumérables et sont configurables.</p>
-
-<p>Vous pouvez utiliser des fonctions génératrices, asynchrones et génératrices asynchrones.</p>
-
-<pre class="brush: js notranslate">class ClasseAvecMethodesFantaisie {
-  *methodeGeneratrice() { }
-  async methodeAsynchrone() { }
-  async *methodeGeneratriceAsynchrone() { }
-}</pre>
-
-<p>A l'intérieur des méthodes d'instance, <code>this</code> fait référence à l'instance elle-même. Dans les sous-classes, <code>super</code> vous donne accès au prototype de la superclasse, ce qui vous permet d'appeler les méthodes de la superclasse.</p>
-
-<pre class="brush: js notranslate">class ClasseDeBase {
-  msg = 'hello world'
-  methodePubliqueDeBase() {
-    return this.msg
-  }
-}
-
-class SousClasse extends ClasseDeBase {
-  sousMethodePublique() {
-    return super.methodePubliqueDeBase()
-  }
-}
-
-const instance = new SousClasse()
-console.log(instance.sousMethodePublique())
-// affichage attendu : "hello worl​d"
-</pre>
-
-<p>Les accesseurs et les mutateurs sont des méthodes spéciales qui sont liées à une propriété de classe, et sont appelées lorsqu'on accède à cette propriété ou qu'on la définit. Utilisez la syntaxe <a href="https://developer.mozilla.org/fr-FR/docs/Web/JavaScript/Reference/Functions/get">get</a> et <a href="https://developer.mozilla.org/fr-FR/docs/Web/JavaScript/Reference/Functions/set">set</a> pour déclarer un accesseur ou un mutateur publique d'une instance.</p>
-
-<pre class="brush: js notranslate">class ClasseAvecGetSet {
-  #msg = 'hello world'
-  get msg() {
-    return this.#msg
-  }
-  set msg(x) {
-    this.#msg = `hello ${x}`
-  }
-}
-
-const instance = new ClasseAvecGetSet();
-console.log(instance.msg);
-// affichage attendu : "hello worl​d"
-
-instance.msg = 'gâteau';
-console.log(instance.msg);
-// affichage attendu : "hello gâteau"
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('Public and private instance fields', '#prod-FieldDefinition', 'FieldDefinition')}}</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.classes.public_class_fields")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="https://rfrn.org/~shu/2018/05/02/the-semantics-of-all-js-class-elements.html">The Semantics of All JS Class Elements</a></li>
-</ul>
diff --git a/files/fr/web/javascript/reference/classes/public_class_fields/index.md b/files/fr/web/javascript/reference/classes/public_class_fields/index.md
new file mode 100644
index 0000000000..8630e5e473
--- /dev/null
+++ b/files/fr/web/javascript/reference/classes/public_class_fields/index.md
@@ -0,0 +1,273 @@
+---
+title: Champs de classe publics
+slug: Web/JavaScript/Reference/Classes/Public_class_fields
+tags:
+  - Classes
+  - Fonctionnalité du langage
+  - JavaScript
+translation_of: Web/JavaScript/Reference/Classes/Public_class_fields
+original_slug: Web/JavaScript/Reference/Classes/Class_fields
+---
+{{JsSidebar("Classes")}}{{SeeCompatTable}}
+
+> **Note :** Cette page décrit des fonctionnalités expérimentales.
+>
+> Les déclarations de champs, tant publics que privés, sont [une fonctionnalité expérimentale (étape 3)](https://github.com/tc39/proposal-class-fields) proposée au [TC39](https://tc39.github.io/beta/), le comité des standards JavaScript.
+>
+> La prise en charge dans les navigateurs est limitée, mais cette fonctionnalité peut être utilisée à travers une étape de contruction avec des systèmes tels que [Babel](https://babeljs.io/). Voir [l'information de compatibilité](/fr/docs/Web/JavaScript/Reference/Classes/Class_fields$edit#Browser_compatibility) ci-dessous.
+
+Les champs publics, tant statiques que d'instance, sont des propriétés qui peuvent être écrites, et qui sont énumérables et configurables. En tant que telles, à la différence de leurs contreparties privées, elles participent à l'héritage du prototype.
+
+## Syntaxe
+
+    class ClasseAvecChampDInstance {
+      champDInstance = 'champ d\'instance'
+    }
+
+    class ClasseAvecChampStatique {
+      static champStatique = 'champ statique'
+    }
+
+    class ClasseAvecMethodeDInstancePublique {
+      methodePublique() {
+        return 'hello world'
+      }
+    }
+
+## Exemples
+
+### Champs statiques publics
+
+Les champs statiques publics sont utiles lorsque vous voulez qu'un champ n'existe qu'une seule fois par classe, pas dans chaque instance que vous créez. Cela est utile pour des caches, une configuration fixe, ou tout autres données dont vous n'avez pas besoin qu'elles soient répliquées à travers les instances.
+
+Les champs statiques publics sont déclarés en utilisant le mot-clé `static`. Ils sont ajoutés au constructeur de la classe au moment de l'évaluation de la classe en utilisant {{jsxref("Global_Objects/Object/defineProperty", "Object.defineProperty()")}}. On y accède à nouveau à partir du constructeur de la classe.
+
+```js
+class ClasseAvecChampStatique {
+  static champStatique = 'champ statique'
+}
+
+console.log(ClasseAvecChampStatique.champStatique)
+// affichage attendu : "champ statique"​
+```
+
+Les champs sans initialiseur sont initialisés à `undefined`.
+
+```js
+class ClasseAvecChampStatique {
+  static champStatique
+}
+
+console.assert(ClasseAvecChampStatique.hasOwnProperty('champStatique'))
+console.log(ClasseAvecChampStatique.champStatique)
+// affichage attendu : "undefined"
+```
+
+Les champs statiques publics ne sont pas réinitialisés dans les sous-classes, mais on peut y accéder via la chaîne de prototypes.
+
+```js
+class ClasseAvecChampStatique {
+  static champStatiqueDeBase = 'champ de base'
+}
+
+class SousClasseAvecChampStatique extends ClasseAvecChampStatique {
+  static sousChampStatique = 'champ de la sous-classe'
+}
+
+console.log(SousClasseAvecChampStatique.sousChampStatique)
+// affichage attendu : "champ de la sous-classe"
+
+console.log(SousClasseAvecChampStatique.champStatiqueDeBase)
+// affichage attendu : "champ de base"
+```
+
+Lors de l'initialisation des champs, `this` fait référence au constructeur de la classe. Vous pouvez aussi le référencer par son nom, et utiliser `super` pour obtenir le constructeur de la superclasse (s'il en existe un) :
+
+```js
+class ClasseAvecChampStatique {
+  static champStatiqueDeBase = 'champ statique de base'
+  static autreChampStatiqueDeBase = this.champStatiqueDeBase
+
+  static methodeStatiqueDeBase() { return 'affichage de la méthode statique de base' }
+}
+
+class SousClasseAvecChampStatique extends ClasseAvecChampStatique {
+  static sousChampStatique = super.methodeStatiqueDeBase()
+}
+
+console.log(ClasseAvecChampStatique.autreChampStatiqueDeBase)
+// affichage attendu : "champ statique de base"
+
+console.log(SousClasseAvecChampStatique.sousChampStatique)
+// affichage attendu : "affichage de la méthode statique de base"
+```
+
+### Champs d'instance publics
+
+Les champs d'instance publics existent dans chaque instance créée d'une classe. En déclarant un champ public, vous pouvez vous assurer que le champ est toujours présent, et que la définition de la classe est davantage auto-documentée.
+
+Les champs d'instance publics sont ajoutés grâce à {{jsxref("Global_Objects/Object/defineProperty", "Object.defineProperty()")}}, soit au moment de la construction dans la classe de base (avant que le corps du constructeur ne soit exécuté), soit juste après le retour de `super()` dans une sous-classe.
+
+```js
+class ClasseAvecChampDInstance {
+  champDInstance = 'champ d\'instance'
+}
+
+const instance = new ClasseAvecChampDInstance()
+console.log(instance.champDInstance)
+// affichage attendu : "champ d'instance"
+```
+
+Les champs sans initialiseur sont initialisés à `undefined`.
+
+```js
+class ClasseAvecChampDInstance {
+  champdDInstance
+}
+
+const instance = new ClasseAvecChampDInstance()
+console.assert(instance.hasOwnProperty('champDInstance'))
+console.log(instance.champDInstance);
+// affichage attendu : "undefined"
+```
+
+À l'instar des propriétés, les noms de champ peuvent être calculés :
+
+```js
+const PREFIXE = 'prefixe';
+
+class ClasseAvecNomDeChampCalcule {
+    [`${PREFIXE}Champ`] = 'champ préfixé'
+}
+
+const instance = new ClasseAvecNomDeChampCalcule()
+console.log(instance.prefixeChamp)
+// affichage attendu : "champ préfixé"
+```
+
+Lors de l'initialisation des champs, `this` fait référence à l'instance en cours de construction. Tout comme dans les méthodes d'instance publiques, si vous êtes dans une sous-classe, vous pouvez accéder au prototype de la superclasse en utilisant `super`.
+
+```js
+class ClasseAvecChampDInstance {
+  champDInstanceDeBase = 'champ de base'
+  autreChampDInstanceDeBase = this.champDInstanceDeBase
+  methodeDInstanceDeBase() { return 'affichage de la méthode de base' }
+}
+
+class SousClasseAvecChampDInstance extends ClasseAvecChampDInstance {
+  sousChampDInstance = super.methodeDInstanceDeBase()
+}
+
+const base = new ClasseAvecChampDInstance()
+const sous = new SousClasseAvecChampDInstance()
+
+console.log(base.autreChampDInstanceDeBase)
+// affichage attendu : "champ de base"
+
+console.log(sous.sousChampDInstance)
+// affichage attendu : "affichage de la méthode de base"
+```
+
+### Méthodes publiques
+
+#### Méthodes statiques publiques
+
+Le mot-clé **`static`** définit une méthode statique pour une classe. Les méthodes statiques ne sont pas appelées dans les instances de la classe. A la place, elles le sont dans la classe elle-même. Ce sont souvent des méthodes utilitaires, comme des fonctions pour créer ou cloner des objets.
+
+```js
+class ClasseAvecMethodeStatique {
+  static methodeStatique() {
+    return 'la méthode statique a été appelée.';
+  }
+}
+
+console.log(ClasseAvecMethodeStatique.methodeStatique());
+// affichage attendu : "la méthode statique a été appelée."
+```
+
+Les méthodes statiques sont ajoutées au constructeur de la classe grâce à {{jsxref("Global_Objects/Object/defineProperty", "Object.defineProperty()")}} au moment de l'évaluation de la classe. Ces méthodes peuvent être écrites, ne sont pas énumérables et sont configurables.
+
+#### Méthodes d'instance publiques
+
+Comme leur nom l'implique, les méthodes d'instance publiques sont des fonctions disponibles dans les instances de la classe.
+
+```js
+class ClasseAvecMethodeDInstancePublique {
+  methodePublique() {
+    return 'hello world'
+  }
+}
+
+const instance = new ClasseAvecMethodeDInstancePublique()
+console.log(instance.methodePublique())
+// affichage attendu : "hello worl​d"
+```
+
+Les méthodes d'instance publiques sont ajoutées au prototype au moment de l'évaluation de la classe en utilisant {{jsxref("Global_Objects/Object/defineProperty", "Object.defineProperty()")}}. Elles peuvent être écrites, ne sont pas énumérables et sont configurables.
+
+Vous pouvez utiliser des fonctions génératrices, asynchrones et génératrices asynchrones.
+
+```js
+class ClasseAvecMethodesFantaisie {
+  *methodeGeneratrice() { }
+  async methodeAsynchrone() { }
+  async *methodeGeneratriceAsynchrone() { }
+}
+```
+
+A l'intérieur des méthodes d'instance, `this` fait référence à l'instance elle-même. Dans les sous-classes, `super` vous donne accès au prototype de la superclasse, ce qui vous permet d'appeler les méthodes de la superclasse.
+
+```js
+class ClasseDeBase {
+  msg = 'hello world'
+  methodePubliqueDeBase() {
+    return this.msg
+  }
+}
+
+class SousClasse extends ClasseDeBase {
+  sousMethodePublique() {
+    return super.methodePubliqueDeBase()
+  }
+}
+
+const instance = new SousClasse()
+console.log(instance.sousMethodePublique())
+// affichage attendu : "hello worl​d"
+```
+
+Les accesseurs et les mutateurs sont des méthodes spéciales qui sont liées à une propriété de classe, et sont appelées lorsqu'on accède à cette propriété ou qu'on la définit. Utilisez la syntaxe [get](https://developer.mozilla.org/fr-FR/docs/Web/JavaScript/Reference/Functions/get) et [set](https://developer.mozilla.org/fr-FR/docs/Web/JavaScript/Reference/Functions/set) pour déclarer un accesseur ou un mutateur publique d'une instance.
+
+```js
+class ClasseAvecGetSet {
+  #msg = 'hello world'
+  get msg() {
+    return this.#msg
+  }
+  set msg(x) {
+    this.#msg = `hello ${x}`
+  }
+}
+
+const instance = new ClasseAvecGetSet();
+console.log(instance.msg);
+// affichage attendu : "hello worl​d"
+
+instance.msg = 'gâteau';
+console.log(instance.msg);
+// affichage attendu : "hello gâteau"
+```
+
+## Spécifications
+
+| Spécification                                                                                                                |
+| ---------------------------------------------------------------------------------------------------------------------------- |
+| {{SpecName('Public and private instance fields', '#prod-FieldDefinition', 'FieldDefinition')}} |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.classes.public_class_fields")}}
+
+## Voir aussi
+
+- [The Semantics of All JS Class Elements](https://rfrn.org/~shu/2018/05/02/the-semantics-of-all-js-class-elements.html)
diff --git a/files/fr/web/javascript/reference/classes/static/index.html b/files/fr/web/javascript/reference/classes/static/index.html
deleted file mode 100644
index f93abc7411..0000000000
--- a/files/fr/web/javascript/reference/classes/static/index.html
+++ /dev/null
@@ -1,127 +0,0 @@
----
-title: static
-slug: Web/JavaScript/Reference/Classes/static
-tags:
-  - Classes
-  - ECMAScript 2015
-  - JavaScript
-  - Reference
-translation_of: Web/JavaScript/Reference/Classes/static
----
-<div>{{jsSidebar("Classes")}}</div>
-
-<p>Le mot-clé <code><strong>static</strong></code> permet de définir une méthode statique d'une classe. Les méthodes statiques ne sont pas disponibles sur les instances d'une classe mais sont appelées sur la classe elle-même. Les méthodes statiques sont généralement des fonctions utilitaires (qui peuvent permettre de créer ou de cloner des objets par exemple).</p>
-
-<div>{{EmbedInteractiveExample("pages/js/classes-static.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">static <em>nomMéthode()</em> { ... }</pre>
-
-<h2 id="Description">Description</h2>
-
-<p>Les méthodes statiques sont utilisées lorsque la méthode ne s'applique qu'à la classe elle-même et pas à ses instances. Les méthodes statiques sont généralement utilisées pour créer des fonctions utilitaires.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Exemple_classique">Exemple classique</h3>
-
-<p>Dans l'exemple qui suit, on illustre :</p>
-
-<ul>
- <li>comment une classe implémente une méthode statique</li>
- <li>comment une classe avec une propriété statique peut être déclinée avec une sous-classe</li>
- <li>comment une méthode statique peut ou ne peut pas être appelé</li>
-</ul>
-
-<pre class="brush: js">class Triple {
-  static triple(n) {
-    if (n === undefined) {
-      n = 1;
-    }
-    return n * 3;
-  }
-}
-
-class SuperTriple extends Triple {
-  static triple(n) {
-    return super.triple(n) * super.triple(n);
-  }
-}
-
-console.log(Triple.triple());       // 3
-console.log(Triple.triple(6));      // 18
-console.log(SuperTriple.triple(4)); // 144
-var tp = new Triple();
-console.log(SuperTriple.triple(4)); // 144 (pas d'impact de l'affectation du parent)
-console.log(tp.triple()); // tp.triple n'est pas une fonction
-</pre>
-
-<h3 id="Utilisation_depuis_une_autre_méthode_statique">Utilisation depuis une autre méthode statique</h3>
-
-<p>Afin d'appeler une autre méthode statique dans une méthode statique, on pourra utiliser {{jsxref("Opérateurs/L_opérateur_this","this")}}.</p>
-
-<pre class="brush: js">class StaticMethodCall {
-  static staticMethod() {
-    return 'Méthode statique appelée';
-  }
-  static anotherStaticMethod() {
-    return this.staticMethod() + ' depuis une autre statique';
-  }
-}
-StaticMethodCall.staticMethod();
-// 'Méthode statique appelée'
-StaticMethodCall.anotherStaticMethod();
-// 'Méthode statique appelée depuis une autre statique'</pre>
-
-<h3 id="Depuis_les_constructeurs_de_classes_et_les_autres_méthodes">Depuis les constructeurs de classes et les autres méthodes</h3>
-
-<p>Les méthodes statiques ne sont pas directement accessibles via le mot-clé <code><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_this">this</a></code>. Il faut les appeler avec le nom de la classe qui préfixe le nom de la méthode statique <code>NomDeClasse.MéthodeStatique()</code> (comme pour les autres appels en dehors de la classe) ou avec la propriété <code>constructor</code>  : <code>this.constructor.MéthodeStatique()</code>.</p>
-
-<pre class="brush: js">class StaticMethodCall{
-  constructor(){
-    console.log(StaticMethodCall.staticMethod());
-    // 'appel de la méthode statique'
-
-    console.log(this.constructor.staticMethod());
-    // 'appel de la méthode statique'
-  }
-
-  static  staticMethod(){
-    return 'appel de la méthode statique.';
-  }
-}</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-class-definitions', 'Class definitions')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-class-definitions', 'Class definitions')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.classes.static")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/class">Expression <code>class</code></a></li>
- <li><a href="/fr/docs/Web/JavaScript/Reference/Instructions/class">Déclaration <code>class</code></a></li>
- <li><a href="/fr/docs/Web/JavaScript/Reference/Classes">Les classes</a></li>
-</ul>
diff --git a/files/fr/web/javascript/reference/classes/static/index.md b/files/fr/web/javascript/reference/classes/static/index.md
new file mode 100644
index 0000000000..f08b2b5a94
--- /dev/null
+++ b/files/fr/web/javascript/reference/classes/static/index.md
@@ -0,0 +1,113 @@
+---
+title: static
+slug: Web/JavaScript/Reference/Classes/static
+tags:
+  - Classes
+  - ECMAScript 2015
+  - JavaScript
+  - Reference
+translation_of: Web/JavaScript/Reference/Classes/static
+---
+{{jsSidebar("Classes")}}
+
+Le mot-clé **`static`** permet de définir une méthode statique d'une classe. Les méthodes statiques ne sont pas disponibles sur les instances d'une classe mais sont appelées sur la classe elle-même. Les méthodes statiques sont généralement des fonctions utilitaires (qui peuvent permettre de créer ou de cloner des objets par exemple).
+
+{{EmbedInteractiveExample("pages/js/classes-static.html")}}
+
+## Syntaxe
+
+    static nomMéthode() { ... }
+
+## Description
+
+Les méthodes statiques sont utilisées lorsque la méthode ne s'applique qu'à la classe elle-même et pas à ses instances. Les méthodes statiques sont généralement utilisées pour créer des fonctions utilitaires.
+
+## Exemples
+
+### Exemple classique
+
+Dans l'exemple qui suit, on illustre :
+
+- comment une classe implémente une méthode statique
+- comment une classe avec une propriété statique peut être déclinée avec une sous-classe
+- comment une méthode statique peut ou ne peut pas être appelé
+
+```js
+class Triple {
+  static triple(n) {
+    if (n === undefined) {
+      n = 1;
+    }
+    return n * 3;
+  }
+}
+
+class SuperTriple extends Triple {
+  static triple(n) {
+    return super.triple(n) * super.triple(n);
+  }
+}
+
+console.log(Triple.triple());       // 3
+console.log(Triple.triple(6));      // 18
+console.log(SuperTriple.triple(4)); // 144
+var tp = new Triple();
+console.log(SuperTriple.triple(4)); // 144 (pas d'impact de l'affectation du parent)
+console.log(tp.triple()); // tp.triple n'est pas une fonction
+```
+
+### Utilisation depuis une autre méthode statique
+
+Afin d'appeler une autre méthode statique dans une méthode statique, on pourra utiliser {{jsxref("Opérateurs/L_opérateur_this","this")}}.
+
+```js
+class StaticMethodCall {
+  static staticMethod() {
+    return 'Méthode statique appelée';
+  }
+  static anotherStaticMethod() {
+    return this.staticMethod() + ' depuis une autre statique';
+  }
+}
+StaticMethodCall.staticMethod();
+// 'Méthode statique appelée'
+StaticMethodCall.anotherStaticMethod();
+// 'Méthode statique appelée depuis une autre statique'
+```
+
+### Depuis les constructeurs de classes et les autres méthodes
+
+Les méthodes statiques ne sont pas directement accessibles via le mot-clé [`this`](/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_this). Il faut les appeler avec le nom de la classe qui préfixe le nom de la méthode statique `NomDeClasse.MéthodeStatique()` (comme pour les autres appels en dehors de la classe) ou avec la propriété `constructor`  : `this.constructor.MéthodeStatique()`.
+
+```js
+class StaticMethodCall{
+  constructor(){
+    console.log(StaticMethodCall.staticMethod());
+    // 'appel de la méthode statique'
+
+    console.log(this.constructor.staticMethod());
+    // 'appel de la méthode statique'
+  }
+
+  static  staticMethod(){
+    return 'appel de la méthode statique.';
+  }
+}
+```
+
+## Spécifications
+
+| Spécification                                                                                | État                         | Commentaires         |
+| -------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName('ES2015', '#sec-class-definitions', 'Class definitions')}} | {{Spec2('ES2015')}}     | Définition initiale. |
+| {{SpecName('ESDraft', '#sec-class-definitions', 'Class definitions')}} | {{Spec2('ESDraft')}} |                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.classes.static")}}
+
+## Voir aussi
+
+- [Expression `class`](/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/class)
+- [Déclaration `class`](/fr/docs/Web/JavaScript/Reference/Instructions/class)
+- [Les classes](/fr/docs/Web/JavaScript/Reference/Classes)
diff --git a/files/fr/web/javascript/reference/deprecated_and_obsolete_features/index.html b/files/fr/web/javascript/reference/deprecated_and_obsolete_features/index.html
deleted file mode 100644
index 54f3bd85dd..0000000000
--- a/files/fr/web/javascript/reference/deprecated_and_obsolete_features/index.html
+++ /dev/null
@@ -1,293 +0,0 @@
----
-title: Fonctionnalités dépréciées
-slug: Web/JavaScript/Reference/Deprecated_and_obsolete_features
-tags:
-  - Deprecated
-  - JavaScript
-  - Obsolete
-  - Reference
-translation_of: Web/JavaScript/Reference/Deprecated_and_obsolete_features
-original_slug: JavaScript/Reference/Annexes/Fonctionnalités_dépréciées
----
-<div>{{JsSidebar("More")}}</div>
-
-<p>Cette page liste les fonctionnalités de JavaScript qui sont dépréciées (<em>deprecated</em>) (c'est-à-dire que ces fonctionnalités sont toujours disponibles mais qu'il est prévu de les retirer) et les fonctionnalités obsolètes (celles qui ne sont plus utilisables).</p>
-
-<h2 id="Fonctionnalités_dépréciées">Fonctionnalités dépréciées</h2>
-
-<p>Ces fonctionnalités dépréciées peuvent toujours être utilisées mais avec une grande attention car elles pourront être supprimées complètements à l'avenir. En règle général, il faut les retirer du code qui les utilise.</p>
-
-<h3 id="RegExp_Properties">Propriétés de <code>RegExp</code></h3>
-
-<p>Les propriétés suivantes sont dépréciées. Cela n'affecte pas le comportement de {{jsxref("Objets_globaux/String/replace", "replace", "Specifying_a_string_as_a_parameter")}} lorsqu'on utilise une chaîne de caractères en paramètre de remplacement :</p>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th>Propriété</th>
-   <th>Description</th>
-  </tr>
-  <tr>
-   <td>{{jsxref("RegExp.n", "$1-$9")}}</td>
-   <td>
-    <p>Les sous-chaînes correspondantes s'il y en a.<br>
-     <strong>Attention : </strong>Utiliser ces propriétés peut causer certains problèmes car les extensions des navigateurs peuvent les modifier. À éviter !</p>
-   </td>
-  </tr>
-  <tr>
-   <td>{{jsxref("RegExp.input", "$_")}}</td>
-   <td>Voir <code>input</code>.</td>
-  </tr>
-  <tr>
-   <td>{{jsxref("RegExp.multiline", "$*")}}</td>
-   <td>Voir <code>multiline</code>.</td>
-  </tr>
-  <tr>
-   <td>{{jsxref("RegExp.lastMatch", "$&amp;")}}</td>
-   <td>Voir <code>lastMatch</code>.</td>
-  </tr>
-  <tr>
-   <td>{{jsxref("RegExp.lastMatch", "$&amp;")}}</td>
-   <td>Voir <code>lastParen</code>.</td>
-  </tr>
-  <tr>
-   <td>{{jsxref("RegExp.leftContext", "$`")}}</td>
-   <td>Voir <code>leftContext</code>.</td>
-  </tr>
-  <tr>
-   <td>{{jsxref("RegExp.rightContext", "$'")}}</td>
-   <td>Voir <code>rightContext</code>.</td>
-  </tr>
-  <tr>
-   <td>{{jsxref("RegExp.input", "input")}}</td>
-   <td>La chaîne par rapport à laquelle on recherche une correspondance grâce à l'expression rationnelle.</td>
-  </tr>
-  <tr>
-   <td>{{jsxref("RegExp.lastMatch", "lastMatch")}}</td>
-   <td>Les derniers caractères correspondants.</td>
-  </tr>
-  <tr>
-   <td>{{jsxref("RegExp.lastParen", "lastParen")}}</td>
-   <td>La dernière sous-chaîne (groupe entre parenthèses) correspondante si elle existe.</td>
-  </tr>
-  <tr>
-   <td>{{jsxref("RegExp.leftContext", "leftContext")}}</td>
-   <td>La sous-chaîne qui précède la correspondance la plus récente.</td>
-  </tr>
-  <tr>
-   <td>{{jsxref("RegExp.rightContext", "rightContext")}}</td>
-   <td>La sous-chaîne qui suit la correspondance la plus récente.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>Les propriétés qui suivent sont désormais des propriétés des instances de <code>RegExp</code> et ne sont plus des propriétés de l'objet <code>RegExp</code> :</p>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th>Propriété</th>
-   <th>Description</th>
-  </tr>
-  <tr>
-   <td>{{jsxref("RegExp.global", "global")}}</td>
-   <td>Permet d'utiliser une expression rationnelle pour relever l'ensemble des correspondances ou uniquement la première.</td>
-  </tr>
-  <tr>
-   <td>{{jsxref("RegExp.ignoreCase", "ignoreCase")}}</td>
-   <td>Définit si la casse doit être ignorée ou non lors de la recherche d'une correspondance.</td>
-  </tr>
-  <tr>
-   <td>{{jsxref("RegExp.lastIndex", "lastIndex")}}</td>
-   <td>L'index à partir duquel chercher la prochaine correspondance.</td>
-  </tr>
-  <tr>
-   <td>{{jsxref("RegExp.multiline", "multiline")}}</td>
-   <td>Définit si la recherche doit s'effectuer sur une seule ligne ou plusieurs.</td>
-  </tr>
-  <tr>
-   <td>{{jsxref("RegExp.source", "source")}}</td>
-   <td>Le texte du motif.</td>
-  </tr>
- </tbody>
-</table>
-
-<h3 id="RegExp_Methods">Méthodes de <code>RegExp</code></h3>
-
-<ul>
- <li>La méthode <code>compile</code> est dépréciée.</li>
- <li>La méthode <code>valueOf</code> n'est plus spécifiquement liée à <code>RegExp</code>. Utilisez {{jsxref("Object.valueOf()")}}.</li>
-</ul>
-
-<h3 id="Propriétés_de_Function">Propriétés de <code>Function</code></h3>
-
-<ul>
- <li>Les propriétés {{jsxref("Objets_globaux/Function/caller", "caller")}} et {{jsxref("Objets_globaux/Function/arguments", "arguments")}} sont dépréciées car elles permettaient de fuiter l'appelant de la fonction. En lieu et place de la propriété <code>arguments</code>, c'est l'objet {{jsxref("Fonctions/arguments", "arguments")}} qui doit être utilisée (notamment dans les fermetures).</li>
-</ul>
-
-<h3 id="Générateur_historique">Générateur historique</h3>
-
-<ul>
- <li>{{jsxref("Instructions/Legacy_generator_function", "L'instruction pour le générateur historique")}} et {{jsxref("Opérateurs/Legacy_generator_function", "l'expression de fonction du générateur historique")}} sont dépréciées. Il faut utiliser {{jsxref("Instructions/function*", "L'instruction function* ")}} et {{jsxref("Opérateurs/function*", "l'expression function*")}} à la place.</li>
- <li>{{jsxref("Opérateurs/Compréhensions_de_tableau", "Les compréhensions de tableaux JS1.7/JS1.8", "#Diff.C3.A9rences_avec_les_compr.C3.A9hensions_pr.C3.A9c.C3.A9dentes_JS1.7.2FJS1.8")}} et {{jsxref("Opérateurs/Compréhensions_de_générateur", "les compréhensions de générateurs JS1.7/JS1.8", "#Differences_to_the_older_JS1.7.2FJS1.8_comprehensions")}} sont dépréciées.</li>
-</ul>
-
-<h3 id="Itérateur">Itérateur</h3>
-
-<ul>
- <li>{{jsxref("Objets_globaux/StopIteration", "StopIteration")}} est déprécié.</li>
- <li>{{jsxref("Objets_globaux/Iterator", "Iterator")}} est déprécié.</li>
-</ul>
-
-<h3 id="Méthode_d'Object">Méthode d'<code>Object</code></h3>
-
-<ul>
- <li>{{jsxref("Object.watch", "watch")}} et {{jsxref("Object.unwatch", "unwatch")}} sont dépréciés. L'objet {{jsxref("Proxy")}} doit être utilisé à la place.</li>
- <li><code>__iterator__</code> est déprécié.</li>
- <li>{{jsxref("Object.noSuchMethod", "__noSuchMethod__")}} est déprécié. {{jsxref("Proxy")}} doit être utilisé à la place.</li>
-</ul>
-
-<h3 id="Méthodes_de_Date">Méthodes de <code>Date</code></h3>
-
-<ul>
- <li>{{jsxref("Objets_globaux/Date/getYear", "getYear")}} et {{jsxref("Objets_globaux/Date/setYear", "setYear")}} sont impactés par le « bug de l'an 2000 » et ont été remplacés par {{jsxref("Objets_globaux/Date/getFullYear", "getFullYear")}} et {{jsxref("Objets_globaux/Date/setFullYear", "setFullYear")}}.</li>
- <li>{{jsxref("Objets_globaux/Date/toISOString", "toISOString")}} doit être utilisé à la place de la méthode {{jsxref("Global_Objects/Date/toGMTString", "toGMTString")}} qui est dépréciée.</li>
- <li>{{jsxref("Objets_globaux/Date/toLocaleFormat", "toLocaleFormat")}} est dépréciée.</li>
-</ul>
-
-<h3 id="Fonctions">Fonctions</h3>
-
-<ul>
- <li>{{jsxref("Opérateurs/Expression_de_fermetures", "Les expressions de fermetures", "", 1)}} sont dépréciées. Il faut utiliser {{jsxref("Opérateurs/L_opérateur_function", "function")}} ou {{jsxref("Fonctions/Fonctions_fléchées", "les fonctions fléchées", "", 1)}} à la place.</li>
-</ul>
-
-<h3 id="Proxy">Proxy</h3>
-
-<ul>
- <li><a href="/en-US/docs/Archive/Web/Old_Proxy_API">Proxy.create</a> et <a href="/en-US/docs/Archive/Web/Old_Proxy_API">Proxy.createFunction</a> sont dépréciées. L'API {{jsxref("Objets_globaux/Proxy", "Proxy")}} doit être utilisée à la place.</li>
- <li>Les trappes de captures suivantes sont obsolètes :
-  <ul>
-   <li><code>hasOwn</code> ({{bug(980565)}}, Firefox 33).</li>
-   <li><code>getEnumerablePropertyKeys</code> ({{bug(783829)}}, Firefox 37)</li>
-   <li><code>getOwnPropertyNames</code> ({{bug(1007334)}}, Firefox 33)</li>
-   <li><code>keys</code> ({{bug(1007334)}}, Firefox 33)</li>
-  </ul>
- </li>
-</ul>
-
-<h3 id="Escape_Sequences">Séquences d'échappement</h3>
-
-<ul>
- <li>Les séquences d'échappement octales (\ suivi par un, deux ou trois chiffres octaux) sont dépréciées pour les chaînes de caractères et les littéraux d'expressions rationnelles.</li>
- <li>Les fonctions {{jsxref("Objets_globaux/escape", "escape")}} et {{jsxref("Objets_globaux/unescape", "unescape")}} sont dépréciées. Ce sont les méthodes et objets {{jsxref("Objets_globaux/encodeURI", "encodeURI")}}, {{jsxref("Objets_globaux/encodeURIComponent", "encodeURIComponent")}}, {{jsxref("Objets_globaux/decodeURI", "decodeURI")}} ou {{jsxref("Objets_globaux/decodeURIComponent", "decodeURIComponent")}} qui doivent être utilisées pour encoder/décoder les séquences d'échappement des caractères spéciaux.</li>
-</ul>
-
-<h3 id="Méthodes_de_String">Méthodes de <code>String</code></h3>
-
-<ul>
- <li><a href="/fr/docs/tag/HTML%20wrapper%20methods">Les méthodes d'enrobage HTML</a> telles que {{jsxref("String.prototype.fontsize")}} et {{jsxref("String.prototype.big")}} sont dépréciées.</li>
- <li>{{jsxref("String.prototype.quote")}} a été retiré de Firefox 37.</li>
- <li>Le paramètre non-standard <code>flags</code> de {{jsxref("String.prototype.search")}}, {{jsxref("String.prototype.match")}}, et {{jsxref("String.prototype.replace")}} sont dépréciés.</li>
- <li>{{jsxref("String.prototype.substr")}} ne sera sans doute pas retiré prochainement mais il est défini dans l'<a href="https://www.ecma-international.org/ecma-262/9.0/index.html#sec-string.prototype.substr">annexe B du standard ECMA-262</a> dont l'introduction précise clairement que « les développeurs ne devraient pass utiliser ou présupposer l'existence de ces fonctionnalités et de ces comportements lors de l'écriture de nouveau code ECMAScript ».</li>
-</ul>
-
-<h2 id="Fonctionnalités_obsolètes">Fonctionnalités obsolètes</h2>
-
-<p>Ces fonctionnalités sont obsolètes et ont intégralement été retirées de JavaScript. Elles ne peuvent plus être utilisées.</p>
-
-<h3 id="Object">Object</h3>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th>Propriété</th>
-   <th>Description</th>
-  </tr>
-  <tr>
-   <td>{{jsxref("Objets_globaux/Object/count", "__count__")}}</td>
-   <td>Renvoie le nombre de propriétés énumérables d'un objet défini par l'utillisateur.</td>
-  </tr>
-  <tr>
-   <td>{{jsxref("Objets_globaux/Object/Parent", "__parent__")}}</td>
-   <td>Pointe vers le contexte d'un objet.</td>
-  </tr>
-  <tr>
-   <td>{{jsxref("Global_Objects/Object/eval", "Object.prototype.eval()")}}</td>
-   <td>Évalue une chaine de caractères étant du code JavaScript, dans le contexte de l'objet indiqué.</td>
-  </tr>
-  <tr>
-   <td>{{jsxref("Object.observe()")}}</td>
-   <td>Observe les modifications apportées à un objet de façon asynchrone.</td>
-  </tr>
-  <tr>
-   <td>{{jsxref("Object.unobserve()")}}</td>
-   <td>Retire les observateurs ajoutés à un objet.</td>
-  </tr>
-  <tr>
-   <td>{{jsxref("Object.getNotifier()")}}</td>
-   <td>Crée un objet qui permet de déclencher un changement de façon synthétique.</td>
-  </tr>
- </tbody>
-</table>
-
-<h3 id="Function"><code>Function</code></h3>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th>Propriété</th>
-   <th>Description</th>
-  </tr>
-  <tr>
-   <td>{{jsxref("Objets_globaux/Function/arity", "arity")}}</td>
-   <td>Nombre d'arguments déclarés pour une fonction.</td>
-  </tr>
- </tbody>
-</table>
-
-<h3 id="Array"><code>Array</code></h3>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th>Propriété</th>
-   <th>Description</th>
-  </tr>
-  <tr>
-   <td>{{jsxref("Array.observe()")}}</td>
-   <td>Observe les modifications apportées à un tableau de façon asynchrone.</td>
-  </tr>
-  <tr>
-   <td>{{jsxref("Array.unobserve()")}}</td>
-   <td>Retire les observateurs ajoutés à un tableau.</td>
-  </tr>
- </tbody>
-</table>
-
-<h3 id="Number"><code>Number</code></h3>
-
-<ul>
- <li>{{jsxref("Number.toInteger()")}}</li>
-</ul>
-
-<h3 id="ParallelArray"><code>ParallelArray</code></h3>
-
-<ul>
- <li>{{jsxref("ParallelArray")}}</li>
-</ul>
-
-<h3 id="Instructions">Instructions</h3>
-
-<ul>
- <li>{{jsxref("Instructions/for_each...in", "for each...in")}}, utiliser {{jsxref("Instructions/for...of", "for...of")}} à la place.</li>
- <li>La décomposition de variables dans {{jsxref("Instructions/for...in", "for...in")}}, utiliser {{jsxref("Instructions/for...of", "for...of")}} à la place.</li>
- <li>Les blocs et expressions <code>let</code> sont obsolètes.</li>
-</ul>
-
-<h3 id="E4X">E4X</h3>
-
-<p>Voir la page <a href="/fr/docs/E4X">E4X</a> pour plus d'informations.</p>
-
-<h3 id="Sharp_variables">Sharp variables</h3>
-
-<p>Voir la page <a href="/en-US/docs/Archive/Web/Sharp_variables_in_JavaScript">sur les variables « Sharp » en JavaScript</a> pour plus d'informations.</p>
diff --git a/files/fr/web/javascript/reference/deprecated_and_obsolete_features/index.md b/files/fr/web/javascript/reference/deprecated_and_obsolete_features/index.md
new file mode 100644
index 0000000000..bed483b8a9
--- /dev/null
+++ b/files/fr/web/javascript/reference/deprecated_and_obsolete_features/index.md
@@ -0,0 +1,209 @@
+---
+title: Fonctionnalités dépréciées
+slug: Web/JavaScript/Reference/Deprecated_and_obsolete_features
+tags:
+  - Deprecated
+  - JavaScript
+  - Obsolete
+  - Reference
+translation_of: Web/JavaScript/Reference/Deprecated_and_obsolete_features
+original_slug: JavaScript/Reference/Annexes/Fonctionnalités_dépréciées
+---
+{{JsSidebar("More")}}
+
+Cette page liste les fonctionnalités de JavaScript qui sont dépréciées (_deprecated_) (c'est-à-dire que ces fonctionnalités sont toujours disponibles mais qu'il est prévu de les retirer) et les fonctionnalités obsolètes (celles qui ne sont plus utilisables).
+
+## Fonctionnalités dépréciées
+
+Ces fonctionnalités dépréciées peuvent toujours être utilisées mais avec une grande attention car elles pourront être supprimées complètements à l'avenir. En règle général, il faut les retirer du code qui les utilise.
+
+### Propriétés de `RegExp`
+
+Les propriétés suivantes sont dépréciées. Cela n'affecte pas le comportement de {{jsxref("Objets_globaux/String/replace", "replace", "Specifying_a_string_as_a_parameter")}} lorsqu'on utilise une chaîne de caractères en paramètre de remplacement :
+
+<table class="standard-table">
+  <tbody>
+    <tr>
+      <th>Propriété</th>
+      <th>Description</th>
+    </tr>
+    <tr>
+      <td>{{jsxref("RegExp.n", "$1-$9")}}</td>
+      <td>
+        <p>
+          Les sous-chaînes correspondantes s'il y en a.<br /><strong
+            >Attention : </strong
+          >Utiliser ces propriétés peut causer certains problèmes car les
+          extensions des navigateurs peuvent les modifier. À éviter !
+        </p>
+      </td>
+    </tr>
+    <tr>
+      <td>{{jsxref("RegExp.input", "$_")}}</td>
+      <td>Voir <code>input</code>.</td>
+    </tr>
+    <tr>
+      <td>{{jsxref("RegExp.multiline", "$*")}}</td>
+      <td>Voir <code>multiline</code>.</td>
+    </tr>
+    <tr>
+      <td>{{jsxref("RegExp.lastMatch", "$&amp;")}}</td>
+      <td>Voir <code>lastMatch</code>.</td>
+    </tr>
+    <tr>
+      <td>{{jsxref("RegExp.lastMatch", "$&amp;")}}</td>
+      <td>Voir <code>lastParen</code>.</td>
+    </tr>
+    <tr>
+      <td>{{jsxref("RegExp.leftContext", "$`")}}</td>
+      <td>Voir <code>leftContext</code>.</td>
+    </tr>
+    <tr>
+      <td>{{jsxref("RegExp.rightContext", "$'")}}</td>
+      <td>Voir <code>rightContext</code>.</td>
+    </tr>
+    <tr>
+      <td>{{jsxref("RegExp.input", "input")}}</td>
+      <td>
+        La chaîne par rapport à laquelle on recherche une correspondance grâce à
+        l'expression rationnelle.
+      </td>
+    </tr>
+    <tr>
+      <td>{{jsxref("RegExp.lastMatch", "lastMatch")}}</td>
+      <td>Les derniers caractères correspondants.</td>
+    </tr>
+    <tr>
+      <td>{{jsxref("RegExp.lastParen", "lastParen")}}</td>
+      <td>
+        La dernière sous-chaîne (groupe entre parenthèses) correspondante si
+        elle existe.
+      </td>
+    </tr>
+    <tr>
+      <td>{{jsxref("RegExp.leftContext", "leftContext")}}</td>
+      <td>La sous-chaîne qui précède la correspondance la plus récente.</td>
+    </tr>
+    <tr>
+      <td>{{jsxref("RegExp.rightContext", "rightContext")}}</td>
+      <td>La sous-chaîne qui suit la correspondance la plus récente.</td>
+    </tr>
+  </tbody>
+</table>
+
+Les propriétés qui suivent sont désormais des propriétés des instances de `RegExp` et ne sont plus des propriétés de l'objet `RegExp` :
+
+| Propriété                                                    | Description                                                                                                         |
+| ------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------- |
+| {{jsxref("RegExp.global", "global")}}             | Permet d'utiliser une expression rationnelle pour relever l'ensemble des correspondances ou uniquement la première. |
+| {{jsxref("RegExp.ignoreCase", "ignoreCase")}} | Définit si la casse doit être ignorée ou non lors de la recherche d'une correspondance.                             |
+| {{jsxref("RegExp.lastIndex", "lastIndex")}}     | L'index à partir duquel chercher la prochaine correspondance.                                                       |
+| {{jsxref("RegExp.multiline", "multiline")}}     | Définit si la recherche doit s'effectuer sur une seule ligne ou plusieurs.                                          |
+| {{jsxref("RegExp.source", "source")}}             | Le texte du motif.                                                                                                  |
+
+### Méthodes de `RegExp`
+
+- La méthode `compile` est dépréciée.
+- La méthode `valueOf` n'est plus spécifiquement liée à `RegExp`. Utilisez {{jsxref("Object.valueOf()")}}.
+
+### Propriétés de `Function`
+
+- Les propriétés {{jsxref("Objets_globaux/Function/caller", "caller")}} et {{jsxref("Objets_globaux/Function/arguments", "arguments")}} sont dépréciées car elles permettaient de fuiter l'appelant de la fonction. En lieu et place de la propriété `arguments`, c'est l'objet {{jsxref("Fonctions/arguments", "arguments")}} qui doit être utilisée (notamment dans les fermetures).
+
+### Générateur historique
+
+- {{jsxref("Instructions/Legacy_generator_function", "L'instruction pour le générateur historique")}} et {{jsxref("Opérateurs/Legacy_generator_function", "l'expression de fonction du générateur historique")}} sont dépréciées. Il faut utiliser {{jsxref("Instructions/function*", "L'instruction function* ")}} et {{jsxref("Opérateurs/function*", "l'expression function*")}} à la place.
+- {{jsxref("Opérateurs/Compréhensions_de_tableau", "Les compréhensions de tableaux JS1.7/JS1.8", "#Diff.C3.A9rences_avec_les_compr.C3.A9hensions_pr.C3.A9c.C3.A9dentes_JS1.7.2FJS1.8")}} et {{jsxref("Opérateurs/Compréhensions_de_générateur", "les compréhensions de générateurs JS1.7/JS1.8", "#Differences_to_the_older_JS1.7.2FJS1.8_comprehensions")}} sont dépréciées.
+
+### Itérateur
+
+- {{jsxref("Objets_globaux/StopIteration", "StopIteration")}} est déprécié.
+- {{jsxref("Objets_globaux/Iterator", "Iterator")}} est déprécié.
+
+### Méthode d'`Object`
+
+- {{jsxref("Object.watch", "watch")}} et {{jsxref("Object.unwatch", "unwatch")}} sont dépréciés. L'objet {{jsxref("Proxy")}} doit être utilisé à la place.
+- `__iterator__` est déprécié.
+- {{jsxref("Object.noSuchMethod", "__noSuchMethod__")}} est déprécié. {{jsxref("Proxy")}} doit être utilisé à la place.
+
+### Méthodes de `Date`
+
+- {{jsxref("Objets_globaux/Date/getYear", "getYear")}} et {{jsxref("Objets_globaux/Date/setYear", "setYear")}} sont impactés par le « bug de l'an 2000 » et ont été remplacés par {{jsxref("Objets_globaux/Date/getFullYear", "getFullYear")}} et {{jsxref("Objets_globaux/Date/setFullYear", "setFullYear")}}.
+- {{jsxref("Objets_globaux/Date/toISOString", "toISOString")}} doit être utilisé à la place de la méthode {{jsxref("Global_Objects/Date/toGMTString", "toGMTString")}} qui est dépréciée.
+- {{jsxref("Objets_globaux/Date/toLocaleFormat", "toLocaleFormat")}} est dépréciée.
+
+### Fonctions
+
+- {{jsxref("Opérateurs/Expression_de_fermetures", "Les expressions de fermetures", "", 1)}} sont dépréciées. Il faut utiliser {{jsxref("Opérateurs/L_opérateur_function", "function")}} ou {{jsxref("Fonctions/Fonctions_fléchées", "les fonctions fléchées", "", 1)}} à la place.
+
+### Proxy
+
+- [Proxy.create](/en-US/docs/Archive/Web/Old_Proxy_API) et [Proxy.createFunction](/en-US/docs/Archive/Web/Old_Proxy_API) sont dépréciées. L'API {{jsxref("Objets_globaux/Proxy", "Proxy")}} doit être utilisée à la place.
+- Les trappes de captures suivantes sont obsolètes :
+
+  - `hasOwn` ({{bug(980565)}}, Firefox 33).
+  - `getEnumerablePropertyKeys` ({{bug(783829)}}, Firefox 37)
+  - `getOwnPropertyNames` ({{bug(1007334)}}, Firefox 33)
+  - `keys` ({{bug(1007334)}}, Firefox 33)
+
+### Séquences d'échappement
+
+- Les séquences d'échappement octales (\ suivi par un, deux ou trois chiffres octaux) sont dépréciées pour les chaînes de caractères et les littéraux d'expressions rationnelles.
+- Les fonctions {{jsxref("Objets_globaux/escape", "escape")}} et {{jsxref("Objets_globaux/unescape", "unescape")}} sont dépréciées. Ce sont les méthodes et objets {{jsxref("Objets_globaux/encodeURI", "encodeURI")}}, {{jsxref("Objets_globaux/encodeURIComponent", "encodeURIComponent")}}, {{jsxref("Objets_globaux/decodeURI", "decodeURI")}} ou {{jsxref("Objets_globaux/decodeURIComponent", "decodeURIComponent")}} qui doivent être utilisées pour encoder/décoder les séquences d'échappement des caractères spéciaux.
+
+### Méthodes de `String`
+
+- [Les méthodes d'enrobage HTML](/fr/docs/tag/HTML%20wrapper%20methods) telles que {{jsxref("String.prototype.fontsize")}} et {{jsxref("String.prototype.big")}} sont dépréciées.
+- {{jsxref("String.prototype.quote")}} a été retiré de Firefox 37.
+- Le paramètre non-standard `flags` de {{jsxref("String.prototype.search")}}, {{jsxref("String.prototype.match")}}, et {{jsxref("String.prototype.replace")}} sont dépréciés.
+- {{jsxref("String.prototype.substr")}} ne sera sans doute pas retiré prochainement mais il est défini dans l'[annexe B du standard ECMA-262](https://www.ecma-international.org/ecma-262/9.0/index.html#sec-string.prototype.substr) dont l'introduction précise clairement que « les développeurs ne devraient pass utiliser ou présupposer l'existence de ces fonctionnalités et de ces comportements lors de l'écriture de nouveau code ECMAScript ».
+
+## Fonctionnalités obsolètes
+
+Ces fonctionnalités sont obsolètes et ont intégralement été retirées de JavaScript. Elles ne peuvent plus être utilisées.
+
+### Object
+
+| Propriété                                                                                | Description                                                                                    |
+| ---------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------- |
+| {{jsxref("Objets_globaux/Object/count", "__count__")}}                 | Renvoie le nombre de propriétés énumérables d'un objet défini par l'utillisateur.              |
+| {{jsxref("Objets_globaux/Object/Parent", "__parent__")}}             | Pointe vers le contexte d'un objet.                                                            |
+| {{jsxref("Global_Objects/Object/eval", "Object.prototype.eval()")}} | Évalue une chaine de caractères étant du code JavaScript, dans le contexte de l'objet indiqué. |
+| {{jsxref("Object.observe()")}}                                                 | Observe les modifications apportées à un objet de façon asynchrone.                            |
+| {{jsxref("Object.unobserve()")}}                                             | Retire les observateurs ajoutés à un objet.                                                    |
+| {{jsxref("Object.getNotifier()")}}                                             | Crée un objet qui permet de déclencher un changement de façon synthétique.                     |
+
+### `Function`
+
+| Propriété                                                            | Description                                    |
+| -------------------------------------------------------------------- | ---------------------------------------------- |
+| {{jsxref("Objets_globaux/Function/arity", "arity")}} | Nombre d'arguments déclarés pour une fonction. |
+
+### `Array`
+
+| Propriété                                | Description                                                           |
+| ---------------------------------------- | --------------------------------------------------------------------- |
+| {{jsxref("Array.observe()")}} | Observe les modifications apportées à un tableau de façon asynchrone. |
+| {{jsxref("Array.unobserve()")}} | Retire les observateurs ajoutés à un tableau.                         |
+
+### `Number`
+
+- {{jsxref("Number.toInteger()")}}
+
+### `ParallelArray`
+
+- {{jsxref("ParallelArray")}}
+
+### Instructions
+
+- {{jsxref("Instructions/for_each...in", "for each...in")}}, utiliser {{jsxref("Instructions/for...of", "for...of")}} à la place.
+- La décomposition de variables dans {{jsxref("Instructions/for...in", "for...in")}}, utiliser {{jsxref("Instructions/for...of", "for...of")}} à la place.
+- Les blocs et expressions `let` sont obsolètes.
+
+### E4X
+
+Voir la page [E4X](/fr/docs/E4X) pour plus d'informations.
+
+### Sharp variables
+
+Voir la page [sur les variables « Sharp » en JavaScript](/en-US/docs/Archive/Web/Sharp_variables_in_JavaScript) pour plus d'informations.
diff --git a/files/fr/web/javascript/reference/deprecated_and_obsolete_features/the_legacy_iterator_protocol/index.html b/files/fr/web/javascript/reference/deprecated_and_obsolete_features/the_legacy_iterator_protocol/index.html
deleted file mode 100644
index 22c6e16c0b..0000000000
--- a/files/fr/web/javascript/reference/deprecated_and_obsolete_features/the_legacy_iterator_protocol/index.html
+++ /dev/null
@@ -1,80 +0,0 @@
----
-title: Le protocole itérateur historique
-slug: >-
-  Web/JavaScript/Reference/Deprecated_and_obsolete_features/The_legacy_Iterator_protocol
-tags:
-  - JavaScript
-  - Legacy Iterator
-translation_of: >-
-  Web/JavaScript/Reference/Deprecated_and_obsolete_features/The_legacy_Iterator_protocol
-original_slug: Web/JavaScript/Guide/Le_protocole_itérateur_historique
----
-<div>{{JSSideBar("More")}}</div>
-
-<div class="warning"><p><strong>Attention :</strong> Ce protocole historique était une fonctionnalité spécifique à SpiderMonkey et est supprimé à partir de Firefox 58. Pour utiliser des itérations par la suite, veuillez utiliser des boucles <a href="/fr/docs/Web/JavaScript/Reference/Instructions/for...of">for..of</a> ainsi que le <a href="/fr/docs/Web/JavaScript/Guide/Le_protocole_iterator">protocole itérateur</a>.</p></div>
-
-<h2 id="Le_protocole_itérateur_obsolète_spécifique_à_Firefox">Le protocole itérateur obsolète, spécifique à Firefox</h2>
-
-<p>Avant la version 26, Firefox implémentait un autre protocole d'itération semblable à celui défini par <a href="/fr/docs/Web/JavaScript/Guide/Le_protocole_iterator">ES2015</a>.</p>
-
-<p>Un objet est un itérateur historique lorsqu'il implémente une méthode <code>next()</code> avec la sémantique suivante et lorsqu'il renvoie une exception {{jsxref("Objets_globaux/StopIteration", "StopIteration")}} à la fin de l'itération :</p>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Propriété</th>
-   <th scope="col">Valeur</th>
-  </tr>
-  <tr>
-   <td><code>next</code></td>
-   <td>
-    <p>Une fonction sans argument qui renvoie une valeur.</p>
-   </td>
-  </tr>
- </tbody>
-</table>
-
-<h3 id="Les_différences_entre_le_protocole_historique_et_celui_d'ES2015">Les différences entre le protocole historique et celui d'ES2015</h3>
-
-<ul>
- <li>La valeur était directement renvoyée par la fonction <code>next</code> alors qu'avec le protocole ES2015, elle est contenue dans une propriété <code>value</code></li>
- <li>La fin de l'itération était signalée par un objet {{jsxref("Objets-globaux/StopIteration", "StopIteration")}}.</li>
-</ul>
-
-<h3 id="Un_exemple_simple_utilisant_l'ancien_protocole">Un exemple simple utilisant l'ancien protocole</h3>
-
-<h4 id="Exemple">Exemple</h4>
-
-<pre class="brush: js">function créerItérateur(tableau){
-    var nextIndex = 0;
-
-    return {
-       next: function(){
-           if(nextIndex &lt; tableau.length){
-               return tableau[nextIndex++];
-           else
-               throw new StopIteration();
-       }
-    }
-}
-
-var it = créerItérateur(['yo', 'ya']);
-
-console.log(it.next()); // 'yo'
-console.log(it.next()); // 'ya'
-try{
-    console.log(it.next());
-}
-catch(e){
-    if(e instanceof StopIteration){
-         // fin de l'itération
-    }
-}
-</pre>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/JavaScript/Guide/iterateurs_et_generateurs">Les itérateurs et générateurs</a></li>
- <li><a href="/fr/docs/JavaScript/Reference/Annexes/Fonctionnalités_dépréciées">D'autres fonctionnalités dépréciées et obsolètes</a></li>
-</ul>
diff --git a/files/fr/web/javascript/reference/deprecated_and_obsolete_features/the_legacy_iterator_protocol/index.md b/files/fr/web/javascript/reference/deprecated_and_obsolete_features/the_legacy_iterator_protocol/index.md
new file mode 100644
index 0000000000..8a6de2d8e6
--- /dev/null
+++ b/files/fr/web/javascript/reference/deprecated_and_obsolete_features/the_legacy_iterator_protocol/index.md
@@ -0,0 +1,75 @@
+---
+title: Le protocole itérateur historique
+slug: >-
+  Web/JavaScript/Reference/Deprecated_and_obsolete_features/The_legacy_Iterator_protocol
+tags:
+  - JavaScript
+  - Legacy Iterator
+translation_of: >-
+  Web/JavaScript/Reference/Deprecated_and_obsolete_features/The_legacy_Iterator_protocol
+original_slug: Web/JavaScript/Guide/Le_protocole_itérateur_historique
+---
+{{JSSideBar("More")}}
+
+> **Attention :** Ce protocole historique était une fonctionnalité spécifique à SpiderMonkey et est supprimé à partir de Firefox 58. Pour utiliser des itérations par la suite, veuillez utiliser des boucles [for..of](/fr/docs/Web/JavaScript/Reference/Instructions/for...of) ainsi que le [protocole itérateur](/fr/docs/Web/JavaScript/Guide/Le_protocole_iterator).
+
+## Le protocole itérateur obsolète, spécifique à Firefox
+
+Avant la version 26, Firefox implémentait un autre protocole d'itération semblable à celui défini par [ES2015](/fr/docs/Web/JavaScript/Guide/Le_protocole_iterator).
+
+Un objet est un itérateur historique lorsqu'il implémente une méthode `next()` avec la sémantique suivante et lorsqu'il renvoie une exception {{jsxref("Objets_globaux/StopIteration", "StopIteration")}} à la fin de l'itération :
+
+<table class="standard-table">
+  <tbody>
+    <tr>
+      <th scope="col">Propriété</th>
+      <th scope="col">Valeur</th>
+    </tr>
+    <tr>
+      <td><code>next</code></td>
+      <td><p>Une fonction sans argument qui renvoie une valeur.</p></td>
+    </tr>
+  </tbody>
+</table>
+
+### Les différences entre le protocole historique et celui d'ES2015
+
+- La valeur était directement renvoyée par la fonction `next` alors qu'avec le protocole ES2015, elle est contenue dans une propriété `value`
+- La fin de l'itération était signalée par un objet {{jsxref("Objets-globaux/StopIteration", "StopIteration")}}.
+
+### Un exemple simple utilisant l'ancien protocole
+
+#### Exemple
+
+```js
+function créerItérateur(tableau){
+    var nextIndex = 0;
+
+    return {
+       next: function(){
+           if(nextIndex < tableau.length){
+               return tableau[nextIndex++];
+           else
+               throw new StopIteration();
+       }
+    }
+}
+
+var it = créerItérateur(['yo', 'ya']);
+
+console.log(it.next()); // 'yo'
+console.log(it.next()); // 'ya'
+try{
+    console.log(it.next());
+}
+catch(e){
+    if(e instanceof StopIteration){
+         // fin de l'itération
+    }
+}
+```
+
+## Voir aussi
+
+- [Les itérateurs et générateurs](/fr/docs/Web/JavaScript/Guide/iterateurs_et_generateurs)
+- [D'autres fonctionnalités dépréciées et obsolètes](/fr/docs/JavaScript/Reference/Annexes/Fonctionnalités_dépréciées)
diff --git a/files/fr/web/javascript/reference/errors/already_has_pragma/index.html b/files/fr/web/javascript/reference/errors/already_has_pragma/index.html
deleted file mode 100644
index 506c6bc246..0000000000
--- a/files/fr/web/javascript/reference/errors/already_has_pragma/index.html
+++ /dev/null
@@ -1,42 +0,0 @@
----
-title: 'Warning: -file- is being assigned a //# sourceMappingURL, but already has one'
-slug: Web/JavaScript/Reference/Errors/Already_has_pragma
-tags:
-  - Avertissement
-  - Erreurs
-  - JavaScript
-translation_of: Web/JavaScript/Reference/Errors/Already_has_pragma
-original_slug: Web/JavaScript/Reference/Erreurs/Already_has_pragma
----
-<div>{{jsSidebar("Errors")}}</div>
-
-<h2 id="Message">Message</h2>
-
-<pre class="syntaxbox">Warning: -fichier- is being assigned a //# sourceMappingURL, but already has one.</pre>
-
-<h2 id="Type_d'erreur">Type d'erreur</h2>
-
-<p>Un avertissement. L'exécution du script JavaScript n'est pas interrompue.</p>
-
-<h2 id="Quel_est_le_problème">Quel est le problème ?</h2>
-
-<p>Un fichier <em>source map</em> a été défini plus d'une fois pour un fichier source JavaScript donné.</p>
-
-<p>La plupart du temps, les fichiers sources des scripts JavaScript sont fusionnés et minifiés afin que les transferts de fichiers du serveur vers le navigateur soient plus efficaces. Grâce <a href="http://www.html5rocks.com/en/tutorials/developertools/sourcemaps/">aux fichiers de correspondance des sources (<em>source maps</em>)</a>, il est possible d'indiquer au débogueur le code original correspondant. Il existe deux méthodes pour déclarer une correspondance de sources : en utilisant un commentaire ou définissant un en-tête pour le fichier JavaScript.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<p>Voici une correspondance de source déclarée via un commentaire dans le fichier :</p>
-
-<pre class="brush: js example-good">//# sourceMappingURL=http://exemple.com/chemin/vers/la/sourcemap.map</pre>
-
-<p>Une autre méthode consiste à indiquer la source originale dans l'en-tête du fichier JavaScript :</p>
-
-<pre class="brush: js example-good">X-SourceMap: /chemin/vers/le/fichier.js.map</pre>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Outils/Débogueur/Comment/Utiliser_une_source_map">Comment utiliser une correspondance de source - Les outils de développement Firefox</a></li>
- <li><a href="http://www.html5rocks.com/en/tutorials/developertools/sourcemaps/">Une introduction aux correspondances de sources – HTML5 Rocks (en anglais)</a></li>
-</ul>
diff --git a/files/fr/web/javascript/reference/errors/already_has_pragma/index.md b/files/fr/web/javascript/reference/errors/already_has_pragma/index.md
new file mode 100644
index 0000000000..a9aa355462
--- /dev/null
+++ b/files/fr/web/javascript/reference/errors/already_has_pragma/index.md
@@ -0,0 +1,44 @@
+---
+title: 'Warning: -file- is being assigned a //# sourceMappingURL, but already has one'
+slug: Web/JavaScript/Reference/Errors/Already_has_pragma
+tags:
+  - Avertissement
+  - Erreurs
+  - JavaScript
+translation_of: Web/JavaScript/Reference/Errors/Already_has_pragma
+original_slug: Web/JavaScript/Reference/Erreurs/Already_has_pragma
+---
+{{jsSidebar("Errors")}}
+
+## Message
+
+    Warning: -fichier- is being assigned a //# sourceMappingURL, but already has one.
+
+## Type d'erreur
+
+Un avertissement. L'exécution du script JavaScript n'est pas interrompue.
+
+## Quel est le problème ?
+
+Un fichier _source map_ a été défini plus d'une fois pour un fichier source JavaScript donné.
+
+La plupart du temps, les fichiers sources des scripts JavaScript sont fusionnés et minifiés afin que les transferts de fichiers du serveur vers le navigateur soient plus efficaces. Grâce [aux fichiers de correspondance des sources (_source maps_)](http://www.html5rocks.com/en/tutorials/developertools/sourcemaps/), il est possible d'indiquer au débogueur le code original correspondant. Il existe deux méthodes pour déclarer une correspondance de sources : en utilisant un commentaire ou définissant un en-tête pour le fichier JavaScript.
+
+## Exemples
+
+Voici une correspondance de source déclarée via un commentaire dans le fichier :
+
+```js example-good
+//# sourceMappingURL=http://exemple.com/chemin/vers/la/sourcemap.map
+```
+
+Une autre méthode consiste à indiquer la source originale dans l'en-tête du fichier JavaScript :
+
+```js example-good
+X-SourceMap: /chemin/vers/le/fichier.js.map
+```
+
+## Voir aussi
+
+- [Comment utiliser une correspondance de source - Les outils de développement Firefox](/fr/docs/Outils/Débogueur/Comment/Utiliser_une_source_map)
+- [Une introduction aux correspondances de sources – HTML5 Rocks (en anglais)](http://www.html5rocks.com/en/tutorials/developertools/sourcemaps/)
diff --git a/files/fr/web/javascript/reference/errors/array_sort_argument/index.html b/files/fr/web/javascript/reference/errors/array_sort_argument/index.html
deleted file mode 100644
index 6f7c3d07f2..0000000000
--- a/files/fr/web/javascript/reference/errors/array_sort_argument/index.html
+++ /dev/null
@@ -1,48 +0,0 @@
----
-title: 'TypeError: invalid Array.prototype.sort argument'
-slug: Web/JavaScript/Reference/Errors/Array_sort_argument
-tags:
-  - Erreurs
-  - JavaScript
-  - Reference
-translation_of: Web/JavaScript/Reference/Errors/Array_sort_argument
-original_slug: Web/JavaScript/Reference/Erreurs/Array_sort_argument
----
-<div>{{jsSidebar("Errors")}}</div>
-
-<h2 id="Message">Message</h2>
-
-<pre class="syntaxbox">TypeError: argument is not a function object (Edge)
-TypeError: invalid Array.prototype.sort argument (Firefox)
-</pre>
-
-<h2 id="Type_d'erreur">Type d'erreur</h2>
-
-<p>{{jsxref("TypeError")}}</p>
-
-<h2 id="Que_s'est-il_passé">Que s'est-il passé ?</h2>
-
-<p>L'argument passé à {{jsxref("Array.prototype.sort()")}} devrait être {{jsxref("undefined")}} ou être une fonction comparant ses opérandes.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Cas_invalides">Cas invalides</h3>
-
-<pre class="brush: js example-bad">[1, 3, 2].sort(5);  // TypeError
-
-var cmp = { asc: (x, y) =&gt; x &gt;= y, dsc : (x, y) =&gt; x &lt;= y };
-[1, 3, 2].sort(cmp[this.key] || 'asc');  // TypeError
-</pre>
-
-<h3 id="Cas_valides">Cas valides</h3>
-
-<pre class="brush: js example-good">[1, 3, 2].sort();   // [1, 2, 3]
-
-var cmp = { asc: (x, y) =&gt; x &gt;= y, dsc : (x, y) =&gt; x &lt;= y };
-[1, 3, 2].sort(cmp[this.key || 'asc']); // [1, 2, 3]</pre>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Array.prototype.sort()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/errors/array_sort_argument/index.md b/files/fr/web/javascript/reference/errors/array_sort_argument/index.md
new file mode 100644
index 0000000000..b39add1b92
--- /dev/null
+++ b/files/fr/web/javascript/reference/errors/array_sort_argument/index.md
@@ -0,0 +1,48 @@
+---
+title: 'TypeError: invalid Array.prototype.sort argument'
+slug: Web/JavaScript/Reference/Errors/Array_sort_argument
+tags:
+  - Erreurs
+  - JavaScript
+  - Reference
+translation_of: Web/JavaScript/Reference/Errors/Array_sort_argument
+original_slug: Web/JavaScript/Reference/Erreurs/Array_sort_argument
+---
+{{jsSidebar("Errors")}}
+
+## Message
+
+    TypeError: argument is not a function object (Edge)
+    TypeError: invalid Array.prototype.sort argument (Firefox)
+
+## Type d'erreur
+
+{{jsxref("TypeError")}}
+
+## Que s'est-il passé ?
+
+L'argument passé à {{jsxref("Array.prototype.sort()")}} devrait être {{jsxref("undefined")}} ou être une fonction comparant ses opérandes.
+
+## Exemples
+
+### Cas invalides
+
+```js example-bad
+[1, 3, 2].sort(5);  // TypeError
+
+var cmp = { asc: (x, y) => x >= y, dsc : (x, y) => x <= y };
+[1, 3, 2].sort(cmp[this.key] || 'asc');  // TypeError
+```
+
+### Cas valides
+
+```js example-good
+[1, 3, 2].sort();   // [1, 2, 3]
+
+var cmp = { asc: (x, y) => x >= y, dsc : (x, y) => x <= y };
+[1, 3, 2].sort(cmp[this.key || 'asc']); // [1, 2, 3]
+```
+
+## Voir aussi
+
+- {{jsxref("Array.prototype.sort()")}}
diff --git a/files/fr/web/javascript/reference/errors/bad_octal/index.html b/files/fr/web/javascript/reference/errors/bad_octal/index.html
deleted file mode 100644
index 4b14545161..0000000000
--- a/files/fr/web/javascript/reference/errors/bad_octal/index.html
+++ /dev/null
@@ -1,53 +0,0 @@
----
-title: 'SyntaxError: "x" is not a legal ECMA-262 octal constant'
-slug: Web/JavaScript/Reference/Errors/Bad_octal
-tags:
-  - Erreurs
-  - JavaScript
-  - Mode strict
-  - Reference
-  - SyntaxError
-translation_of: Web/JavaScript/Reference/Errors/Bad_octal
-original_slug: Web/JavaScript/Reference/Erreurs/Bad_octal
----
-<div>{{jsSidebar("Errors")}}</div>
-
-<h2 id="Message">Message</h2>
-
-<pre class="syntaxbox">Warning: SyntaxError: 08 is not a legal ECMA-262 octal constant.
-Warning: SyntaxError: 09 is not a legal ECMA-262 octal constant.
-</pre>
-
-<h2 id="Type_d'erreur">Type d'erreur</h2>
-
-<p>Un avertissement, l'exécution du script JavaScript ne sera pas interrompue.</p>
-
-<h2 id="Quel_est_le_problème">Quel est le problème ?</h2>
-
-<p>Les littéraux de nombres décimaux peuvent démarrer par un zéro suivi d'un autre chiffre. Si tous les chiffres après le 0 de tête sont inférieurs à 8, le nombre est interprété comme un nombre en notation octale. Or, cela ne peut pas être le cas avec <code>08</code> et <code>09</code> et JavaScript produit un avertissement.</p>
-
-<p>Les littéraux en notation octale et les séquences d'échappement octales sont désormais dépréciées (il y a aura donc un avertissement complémentaire sur la dépréciation de ces notations). Avec ECMAScript 6 et les versions ultérieures, la syntaxe utilise un zéro initial, suivi de la lettre latine « o » en majuscule ou en minuscule ((<code>0o</code> ou <code>0O)</code>. Pour plus d'informations à ce sujet, voir la page sur <a href="/fr/docs/Web/JavaScript/Reference/Grammaire_lexicale#Octaux">la grammaire lexicale JavaScript</a>.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Nombres_invalides_en_notation_octale">Nombres invalides en notation octale</h3>
-
-<pre class="brush: js example-bad">08;
-09;
-// SyntaxError: 08 is not a legal ECMA-262 octal constant
-// SyntaxError: "0"-prefixed octal literals and octal escape sequences are deprecated</pre>
-
-<h3 id="Nombres_valides_en_notation_octale">Nombres valides en notation octale</h3>
-
-<p>On utilisera un zéro suivi de la lettre « o » pour indiquer un nombre exprimé en notation octale :</p>
-
-<pre class="brush: js example-good">0O755;
-0o644;
-</pre>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/JavaScript/Reference/Grammaire_lexicale#Octaux">La grammaire lexicale de JavaScript</a></li>
- <li><a href="/fr/docs/Web/JavaScript/Reference/Errors/Deprecated_octal">SyntaxError: "0"-prefixed octal literals and octal escape seq. are deprecated</a></li>
-</ul>
diff --git a/files/fr/web/javascript/reference/errors/bad_octal/index.md b/files/fr/web/javascript/reference/errors/bad_octal/index.md
new file mode 100644
index 0000000000..eeea43f7ac
--- /dev/null
+++ b/files/fr/web/javascript/reference/errors/bad_octal/index.md
@@ -0,0 +1,53 @@
+---
+title: 'SyntaxError: "x" is not a legal ECMA-262 octal constant'
+slug: Web/JavaScript/Reference/Errors/Bad_octal
+tags:
+  - Erreurs
+  - JavaScript
+  - Mode strict
+  - Reference
+  - SyntaxError
+translation_of: Web/JavaScript/Reference/Errors/Bad_octal
+original_slug: Web/JavaScript/Reference/Erreurs/Bad_octal
+---
+{{jsSidebar("Errors")}}
+
+## Message
+
+    Warning: SyntaxError: 08 is not a legal ECMA-262 octal constant.
+    Warning: SyntaxError: 09 is not a legal ECMA-262 octal constant.
+
+## Type d'erreur
+
+Un avertissement, l'exécution du script JavaScript ne sera pas interrompue.
+
+## Quel est le problème ?
+
+Les littéraux de nombres décimaux peuvent démarrer par un zéro suivi d'un autre chiffre. Si tous les chiffres après le 0 de tête sont inférieurs à 8, le nombre est interprété comme un nombre en notation octale. Or, cela ne peut pas être le cas avec `08` et `09` et JavaScript produit un avertissement.
+
+Les littéraux en notation octale et les séquences d'échappement octales sont désormais dépréciées (il y a aura donc un avertissement complémentaire sur la dépréciation de ces notations). Avec ECMAScript 6 et les versions ultérieures, la syntaxe utilise un zéro initial, suivi de la lettre latine « o » en majuscule ou en minuscule ((`0o` ou `0O)`. Pour plus d'informations à ce sujet, voir la page sur [la grammaire lexicale JavaScript](/fr/docs/Web/JavaScript/Reference/Grammaire_lexicale#Octaux).
+
+## Exemples
+
+### Nombres invalides en notation octale
+
+```js example-bad
+08;
+09;
+// SyntaxError: 08 is not a legal ECMA-262 octal constant
+// SyntaxError: "0"-prefixed octal literals and octal escape sequences are deprecated
+```
+
+### Nombres valides en notation octale
+
+On utilisera un zéro suivi de la lettre « o » pour indiquer un nombre exprimé en notation octale :
+
+```js example-good
+0O755;
+0o644;
+```
+
+## Voir aussi
+
+- [La grammaire lexicale de JavaScript](/fr/docs/Web/JavaScript/Reference/Grammaire_lexicale#Octaux)
+- [SyntaxError: "0"-prefixed octal literals and octal escape seq. are deprecated](/fr/docs/Web/JavaScript/Reference/Errors/Deprecated_octal)
diff --git a/files/fr/web/javascript/reference/errors/bad_radix/index.html b/files/fr/web/javascript/reference/errors/bad_radix/index.html
deleted file mode 100644
index c620439cae..0000000000
--- a/files/fr/web/javascript/reference/errors/bad_radix/index.html
+++ /dev/null
@@ -1,64 +0,0 @@
----
-title: 'RangeError: radix must be an integer'
-slug: Web/JavaScript/Reference/Errors/Bad_radix
-tags:
-  - Erreurs
-  - JavaScript
-  - RangeError
-translation_of: Web/JavaScript/Reference/Errors/Bad_radix
-original_slug: Web/JavaScript/Reference/Erreurs/Bad_radix
----
-<div>{{jsSidebar("Errors")}}</div>
-
-<h2 id="Message">Message</h2>
-
-<pre class="syntaxbox">RangeError: invalid argument (Edge)
-RangeError: radix must be an integer at least 2 and no greater than 36 (Firefox)
-RangeError: toString() radix argument must be between 2 and 36 (Chrome)
-</pre>
-
-<h2 id="Type_d'erreur">Type d'erreur</h2>
-
-<p>{{jsxref("RangeError")}}</p>
-
-<h2 id="Quel_est_le_problème">Quel est le problème ?</h2>
-
-<p>C'est le paramètre utilisé avec la méthode {{jsxref("Number.prototype.toString()")}} ou avec la méthode {{jsxref("BigInt.prototype.toString()")}} pour indiquer la base de conversion qui est en cause. Ce paramètre, optionnel, doit être un nombre entier, compris entre 2 et 36 qui inique la base du système numérique dans lequel on veut représenter les valeurs numériques.</p>
-
-<p>Pourquoi limiter la base à 36 ? Lorsqu'une base est supérieure à 10, on utilise les caractères de l'alphabet pour représenter les chiffres. Or, l'alphabet latin ne possède que 26 caractères. En utilisant donc les 10 chiffres arabes et ces caractères, on possède 36 caractères pour représenter les chiffres d'un nombre.</p>
-
-<p>Généralement, on emploie cette méthode avec des bases fréquemment utilisées :</p>
-
-<ul>
- <li>2 pour <a href="https://fr.wikipedia.org/wiki/Syst%C3%A8me_binaire">les nombres binaires</a>,</li>
- <li>8 pour <a href="https://fr.wikipedia.org/wiki/Syst%C3%A8me_octal">les nombres octaux</a>,</li>
- <li>10 pour <a href="https://fr.wikipedia.org/wiki/Syst%C3%A8me_d%C3%A9cimal">les nombres décimaux</a>,</li>
- <li>16 pour <a href="https://fr.wikipedia.org/wiki/Syst%C3%A8me_hexad%C3%A9cimal">les nombres hexadécimaux</a>.</li>
-</ul>
-
-<h2 id="Examples">Examples</h2>
-
-<h3 id="Exemples_invalides">Exemples invalides</h3>
-
-<pre class="brush: js example-bad">(42).toString(0);
-(42).toString(1);
-(42).toString(37);
-(42).toString(150);
-// On ne peut pas utiliser une telle
-// chaîne pour du formatage :
-(12071989).toString("MM-dd-yyyy");
-</pre>
-
-<h3 id="Exemples_valides">Exemples valides</h3>
-
-<pre class="brush: js example-good">(42).toString(2);     // "101010" (binary)
-(13).toString(8);     // "15"     (octal)
-(0x42).toString(10);  // "66"     (decimal)
-(100000).toString(16) // "186a0"  (hexadecimal)
-</pre>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Number.prototype.toString()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/errors/bad_radix/index.md b/files/fr/web/javascript/reference/errors/bad_radix/index.md
new file mode 100644
index 0000000000..ecc2b20a37
--- /dev/null
+++ b/files/fr/web/javascript/reference/errors/bad_radix/index.md
@@ -0,0 +1,61 @@
+---
+title: 'RangeError: radix must be an integer'
+slug: Web/JavaScript/Reference/Errors/Bad_radix
+tags:
+  - Erreurs
+  - JavaScript
+  - RangeError
+translation_of: Web/JavaScript/Reference/Errors/Bad_radix
+original_slug: Web/JavaScript/Reference/Erreurs/Bad_radix
+---
+{{jsSidebar("Errors")}}
+
+## Message
+
+    RangeError: invalid argument (Edge)
+    RangeError: radix must be an integer at least 2 and no greater than 36 (Firefox)
+    RangeError: toString() radix argument must be between 2 and 36 (Chrome)
+
+## Type d'erreur
+
+{{jsxref("RangeError")}}
+
+## Quel est le problème ?
+
+C'est le paramètre utilisé avec la méthode {{jsxref("Number.prototype.toString()")}} ou avec la méthode {{jsxref("BigInt.prototype.toString()")}} pour indiquer la base de conversion qui est en cause. Ce paramètre, optionnel, doit être un nombre entier, compris entre 2 et 36 qui inique la base du système numérique dans lequel on veut représenter les valeurs numériques.
+
+Pourquoi limiter la base à 36 ? Lorsqu'une base est supérieure à 10, on utilise les caractères de l'alphabet pour représenter les chiffres. Or, l'alphabet latin ne possède que 26 caractères. En utilisant donc les 10 chiffres arabes et ces caractères, on possède 36 caractères pour représenter les chiffres d'un nombre.
+
+Généralement, on emploie cette méthode avec des bases fréquemment utilisées :
+
+- 2 pour [les nombres binaires](https://fr.wikipedia.org/wiki/Syst%C3%A8me_binaire),
+- 8 pour [les nombres octaux](https://fr.wikipedia.org/wiki/Syst%C3%A8me_octal),
+- 10 pour [les nombres décimaux](https://fr.wikipedia.org/wiki/Syst%C3%A8me_d%C3%A9cimal),
+- 16 pour [les nombres hexadécimaux](https://fr.wikipedia.org/wiki/Syst%C3%A8me_hexad%C3%A9cimal).
+
+## Examples
+
+### Exemples invalides
+
+```js example-bad
+(42).toString(0);
+(42).toString(1);
+(42).toString(37);
+(42).toString(150);
+// On ne peut pas utiliser une telle
+// chaîne pour du formatage :
+(12071989).toString("MM-dd-yyyy");
+```
+
+### Exemples valides
+
+```js example-good
+(42).toString(2);     // "101010" (binary)
+(13).toString(8);     // "15"     (octal)
+(0x42).toString(10);  // "66"     (decimal)
+(100000).toString(16) // "186a0"  (hexadecimal)
+```
+
+## Voir aussi
+
+- {{jsxref("Number.prototype.toString()")}}
diff --git a/files/fr/web/javascript/reference/errors/bad_regexp_flag/index.html b/files/fr/web/javascript/reference/errors/bad_regexp_flag/index.html
deleted file mode 100644
index 9f1632d1a0..0000000000
--- a/files/fr/web/javascript/reference/errors/bad_regexp_flag/index.html
+++ /dev/null
@@ -1,107 +0,0 @@
----
-title: 'SyntaxError: invalid regular expression flag "x"'
-slug: Web/JavaScript/Reference/Errors/Bad_regexp_flag
-tags:
-  - Erreurs
-  - JavaScript
-  - SyntaxError
-translation_of: Web/JavaScript/Reference/Errors/Bad_regexp_flag
-original_slug: Web/JavaScript/Reference/Erreurs/Bad_regexp_flag
----
-<div>{{jsSidebar("Errors")}}</div>
-
-<h2 id="Message">Message</h2>
-
-<pre class="syntaxbox">SyntaxError: Syntax error in regular expression (Edge)
-SyntaxError: invalid regular expression flag "x" (Firefox)
-SyntaxError: Invalid regular expression flags (Chrome)
-</pre>
-
-<h2 id="Type_d'erreur">Type d'erreur</h2>
-
-<p>{{jsxref("SyntaxError")}}</p>
-
-<h2 id="Quel_est_le_problème">Quel est le problème ?</h2>
-
-<p>Un marqueur (<em>flag</em>) invalide est utilisé dans une expression rationnelle. Un littéral d'expression rationnelle se compose d'un motif entouré de deux barres obliques, les marqueurs sont ajoutés après la seconde barre oblique. On peut également les indiquer dans le deuxième paramètre du constructeur {{jsxref("RegExp")}}. Les marqueurs d'une expression rationnelle peuvent être utilisés séparément ou combinés, dans n'importe quel ordre. Il existe uniquement cinq marqueurs autorisés en ECMAScript.</p>
-
-<p>Pour ajouter un marqueur sur une expression rationnelle, on utilisera cette syntaxe :</p>
-
-<pre class="brush: js">var re = /motif/marqueurs;
-</pre>
-
-<p>ou encore :</p>
-
-<pre class="brush: js">var re = new RegExp('motif', 'marqueurs');</pre>
-
-<table class="standard-table">
- <caption>Marqueurs autorisés pour les expressions rationnelles</caption>
- <thead>
-  <tr>
-   <th scope="col">Marqueur</th>
-   <th scope="col">Description</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><code>g</code></td>
-   <td>Recherche globale.</td>
-  </tr>
-  <tr>
-   <td>i</td>
-   <td>Recherche non-sensible à la casse.</td>
-  </tr>
-  <tr>
-   <td>m</td>
-   <td>Recherche sur plusieurs lignes.</td>
-  </tr>
-  <tr>
-   <td>u</td>
-   <td>Unicode : le motif est interprété comme une suite de codets Unicode.</td>
-  </tr>
-  <tr>
-   <td>y</td>
-   <td>La recherche effectuée est « adhérente » et recherche une correspondance à la position indiquée dans la chaîne cible (cf. {{jsxref("RegExp.sticky", "sticky")}}).</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Exemples">Exemples</h2>
-
-<p>Seuls cinq marqueurs d'expression rationnelle sont valides :</p>
-
-<pre class="brush: js example-bad">/toto/truc;
-
-// SyntaxError: invalid regular expression flag "t"
-</pre>
-
-<p>Peut-être souhaitiez-vous créer une expression rationnelle ? Une expression qui contient deux barres obliques est interprétée comme un littéral d'expression rationnelle :</p>
-
-<pre class="brush: js example-bad">let obj = {
-  url: /docs/Web
-};
-
-// SyntaxError: invalid regular expression flag "W"
-</pre>
-
-<p>Peut-être souhaitiez-vous créer une chaîne de caractères ? Dans ce cas, il faut ajouter des quotes (simples ou doubles) afin de former un littéral de chaîne de caractères :</p>
-
-<pre class="brush: js example-good">let obj = {
-  url: '/docs/Web'
-};</pre>
-
-<h3 id="Marqueurs_valides">Marqueurs valides</h3>
-
-<p>Voir le tableau ci-avant pour la liste des marqueurs autorisés pour manipuler les expressions rationnelles en JavaScript.</p>
-
-<pre class="brush: js example-good">/toto/g;
-/toto/gim;
-/toto/uy;
-</pre>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/JavaScript/Guide/Expressions_régulières">Les expressions rationnelles</a></li>
- <li><a href="http://xregexp.com/flags/">XRegEx</a> – une bibliothèque relative aux expressions rationnelles qui fournit quatre nouveaux marqueurs (<em>flags</em>) (<code>n</code>, <code>s</code>, <code>x</code>, <code>A</code>)</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/errors/bad_regexp_flag/index.md b/files/fr/web/javascript/reference/errors/bad_regexp_flag/index.md
new file mode 100644
index 0000000000..17657e237b
--- /dev/null
+++ b/files/fr/web/javascript/reference/errors/bad_regexp_flag/index.md
@@ -0,0 +1,88 @@
+---
+title: 'SyntaxError: invalid regular expression flag "x"'
+slug: Web/JavaScript/Reference/Errors/Bad_regexp_flag
+tags:
+  - Erreurs
+  - JavaScript
+  - SyntaxError
+translation_of: Web/JavaScript/Reference/Errors/Bad_regexp_flag
+original_slug: Web/JavaScript/Reference/Erreurs/Bad_regexp_flag
+---
+{{jsSidebar("Errors")}}
+
+## Message
+
+    SyntaxError: Syntax error in regular expression (Edge)
+    SyntaxError: invalid regular expression flag "x" (Firefox)
+    SyntaxError: Invalid regular expression flags (Chrome)
+
+## Type d'erreur
+
+{{jsxref("SyntaxError")}}
+
+## Quel est le problème ?
+
+Un marqueur (_flag_) invalide est utilisé dans une expression rationnelle. Un littéral d'expression rationnelle se compose d'un motif entouré de deux barres obliques, les marqueurs sont ajoutés après la seconde barre oblique. On peut également les indiquer dans le deuxième paramètre du constructeur {{jsxref("RegExp")}}. Les marqueurs d'une expression rationnelle peuvent être utilisés séparément ou combinés, dans n'importe quel ordre. Il existe uniquement cinq marqueurs autorisés en ECMAScript.
+
+Pour ajouter un marqueur sur une expression rationnelle, on utilisera cette syntaxe :
+
+```js
+var re = /motif/marqueurs;
+```
+
+ou encore :
+
+```js
+var re = new RegExp('motif', 'marqueurs');
+```
+
+| Marqueur | Description                                                                                                                                                                  |
+| -------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `g`      | Recherche globale.                                                                                                                                                           |
+| i        | Recherche non-sensible à la casse.                                                                                                                                           |
+| m        | Recherche sur plusieurs lignes.                                                                                                                                              |
+| u        | Unicode : le motif est interprété comme une suite de codets Unicode.                                                                                                         |
+| y        | La recherche effectuée est « adhérente » et recherche une correspondance à la position indiquée dans la chaîne cible (cf. {{jsxref("RegExp.sticky", "sticky")}}). |
+
+## Exemples
+
+Seuls cinq marqueurs d'expression rationnelle sont valides :
+
+```js example-bad
+/toto/truc;
+
+// SyntaxError: invalid regular expression flag "t"
+```
+
+Peut-être souhaitiez-vous créer une expression rationnelle ? Une expression qui contient deux barres obliques est interprétée comme un littéral d'expression rationnelle :
+
+```js example-bad
+let obj = {
+  url: /docs/Web
+};
+
+// SyntaxError: invalid regular expression flag "W"
+```
+
+Peut-être souhaitiez-vous créer une chaîne de caractères ? Dans ce cas, il faut ajouter des quotes (simples ou doubles) afin de former un littéral de chaîne de caractères :
+
+```js example-good
+let obj = {
+  url: '/docs/Web'
+};
+```
+
+### Marqueurs valides
+
+Voir le tableau ci-avant pour la liste des marqueurs autorisés pour manipuler les expressions rationnelles en JavaScript.
+
+```js example-good
+/toto/g;
+/toto/gim;
+/toto/uy;
+```
+
+## Voir aussi
+
+- [Les expressions rationnelles](/fr/docs/Web/JavaScript/Guide/Expressions_régulières)
+- [XRegEx](http://xregexp.com/flags/) – une bibliothèque relative aux expressions rationnelles qui fournit quatre nouveaux marqueurs (_flags_) (`n`, `s`, `x`, `A`)
diff --git a/files/fr/web/javascript/reference/errors/bad_return_or_yield/index.html b/files/fr/web/javascript/reference/errors/bad_return_or_yield/index.html
deleted file mode 100644
index 787f099067..0000000000
--- a/files/fr/web/javascript/reference/errors/bad_return_or_yield/index.html
+++ /dev/null
@@ -1,58 +0,0 @@
----
-title: 'SyntaxError: return not in function'
-slug: Web/JavaScript/Reference/Errors/Bad_return_or_yield
-tags:
-  - Erreurs
-  - JavaScript
-  - Reference
-  - SyntaxError
-translation_of: Web/JavaScript/Reference/Errors/Bad_return_or_yield
-original_slug: Web/JavaScript/Reference/Erreurs/Bad_return_or_yield
----
-<div>{{jsSidebar("Errors")}}</div>
-
-<h2 id="Message">Message</h2>
-
-<pre class="syntaxbox">SyntaxError: 'return' statement outside of function (Edge)
-SyntaxError: return not in function (Firefox)
-SyntaxError: yield not in function (Firefox)
-</pre>
-
-<h2 id="Type_d'erreur">Type d'erreur</h2>
-
-<p>{{jsxref("SyntaxError")}}.</p>
-
-<h2 id="Quel_est_le_problème">Quel est le problème ?</h2>
-
-<p>Une instruction <code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/return">return</a></code> ou <code><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/yield">yield</a></code> est utilisée en dehors d'une <a href="/fr/docs/Web/JavaScript/Guide/Fonctions">fonction</a>. Il est possible que des accolades soient manquantes. Les mots-clés <code>return</code> et <code>yield</code> doivent être utilisés dans une fonction car ils permettent de terminer ou d'arrêter/reprendre l'exécution d'une fonction et de définir une valeur qui doit être renvoyée à l'appelant de la fonction.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<pre class="brush: js example-bad">var encouragement = function(score) {
-  if (score === 147)
-    return "Super !";
-  };
-  if (score &gt; 100) {
-    return "Un record!";
-  }
-}
-
-// SyntaxError: return not in function</pre>
-
-<p>À première vue, les accolades semblent correctes mais en regardant de plus près, on voit qu'il manque une accolade ouvrante ("{") après la première instruction <code>if</code>. La version correcte serait :</p>
-
-<pre class="brush: js example-good">var encouragement = function(score) {
-  if (score === 147) {
-    return "Maximum!";
-  }
-  if (score &gt; 100) {
-    return "Century!";
-  }
-};</pre>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/return">return</a></code></li>
- <li><code><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/yield">yield</a></code></li>
-</ul>
diff --git a/files/fr/web/javascript/reference/errors/bad_return_or_yield/index.md b/files/fr/web/javascript/reference/errors/bad_return_or_yield/index.md
new file mode 100644
index 0000000000..f50090e6ec
--- /dev/null
+++ b/files/fr/web/javascript/reference/errors/bad_return_or_yield/index.md
@@ -0,0 +1,59 @@
+---
+title: 'SyntaxError: return not in function'
+slug: Web/JavaScript/Reference/Errors/Bad_return_or_yield
+tags:
+  - Erreurs
+  - JavaScript
+  - Reference
+  - SyntaxError
+translation_of: Web/JavaScript/Reference/Errors/Bad_return_or_yield
+original_slug: Web/JavaScript/Reference/Erreurs/Bad_return_or_yield
+---
+{{jsSidebar("Errors")}}
+
+## Message
+
+    SyntaxError: 'return' statement outside of function (Edge)
+    SyntaxError: return not in function (Firefox)
+    SyntaxError: yield not in function (Firefox)
+
+## Type d'erreur
+
+{{jsxref("SyntaxError")}}.
+
+## Quel est le problème ?
+
+Une instruction [`return`](/fr/docs/Web/JavaScript/Reference/Instructions/return) ou [`yield`](/fr/docs/Web/JavaScript/Reference/Opérateurs/yield) est utilisée en dehors d'une [fonction](/fr/docs/Web/JavaScript/Guide/Fonctions). Il est possible que des accolades soient manquantes. Les mots-clés `return` et `yield` doivent être utilisés dans une fonction car ils permettent de terminer ou d'arrêter/reprendre l'exécution d'une fonction et de définir une valeur qui doit être renvoyée à l'appelant de la fonction.
+
+## Exemples
+
+```js example-bad
+var encouragement = function(score) {
+  if (score === 147)
+    return "Super !";
+  };
+  if (score > 100) {
+    return "Un record!";
+  }
+}
+
+// SyntaxError: return not in function
+```
+
+À première vue, les accolades semblent correctes mais en regardant de plus près, on voit qu'il manque une accolade ouvrante ("{") après la première instruction `if`. La version correcte serait :
+
+```js example-good
+var encouragement = function(score) {
+  if (score === 147) {
+    return "Maximum!";
+  }
+  if (score > 100) {
+    return "Century!";
+  }
+};
+```
+
+## Voir aussi
+
+- [`return`](/fr/docs/Web/JavaScript/Reference/Instructions/return)
+- [`yield`](/fr/docs/Web/JavaScript/Reference/Opérateurs/yield)
diff --git a/files/fr/web/javascript/reference/errors/called_on_incompatible_type/index.html b/files/fr/web/javascript/reference/errors/called_on_incompatible_type/index.html
deleted file mode 100644
index 35fcf07a52..0000000000
--- a/files/fr/web/javascript/reference/errors/called_on_incompatible_type/index.html
+++ /dev/null
@@ -1,76 +0,0 @@
----
-title: 'TypeError: X.prototype.y called on incompatible type'
-slug: Web/JavaScript/Reference/Errors/Called_on_incompatible_type
-tags:
-  - Erreurs
-  - JavaScript
-  - TypeError
-translation_of: Web/JavaScript/Reference/Errors/Called_on_incompatible_type
-original_slug: Web/JavaScript/Reference/Erreurs/Called_on_incompatible_type
----
-<div>{{jsSidebar("Errors")}}</div>
-
-<h2 id="Message">Message</h2>
-
-<pre class="syntaxbox">TypeError: 'this' is not a Set object (Edge)
-TypeError: Function.prototype.toString called on incompatible object (Firefox)
-TypeError: Function.prototype.bind called on incompatible target (Firefox)
-TypeError: Method Set.prototype.add called on incompatible receiver undefined (Chrome)
-TypeError: Bind must be called on a function (Chrome)
-</pre>
-
-<h2 id="Type_d'erreur">Type d'erreur</h2>
-
-<p>{{jsxref("TypeError")}}</p>
-
-<h2 id="Quel_est_le_problème">Quel est le problème ?</h2>
-
-<p>Lorsque cette erreur est levée, cela signifie qu'une fonction (d'un objet donné) est appelé avec une valeur <code>this</code> qui ne correspond pas au type attendu par la fonction.</p>
-
-<p>Cela peut se produire lorsqu'on utilise les méthodes {{jsxref("Function.prototype.call()")}} ou {{jsxref("Function.prototype.apply()")}} et qu'on fournit un argument <code>this</code> dont le type n'est pas celui attendu.</p>
-
-<p>Cela peut également se produire quand on fournit une fonction (sous la forme d'un objet) comme argument d'une autre fonction. Dans ce cas, l'objet ne sera pas capturé comme valeur <code>this</code> pour la fonction. Pour contourner ce problème, on peut fournir une fonction lambda qui effectue l'appel ou utiliser la fonction {{jsxref("Function.prototype.bind()")}} afin que <code>this</code> soit l'objet attendu.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Exemples_invalides">Exemples invalides</h3>
-
-<pre class="brush: js example-bad">var monSet = new Set;
-['truc', 'bidule'].forEach(monSet.add);
-// monSet.add est une fonction mais
-// "monSet" n'est pas capturé en tant que this.
-
-var maFonction = function () {
-  console.log(this);
-};
-['truc', 'bidule'].forEach(maFonction.bind);
-// maFonction.bind est une fonction
-// mais "maFonction" n'est pas capturé en tant
-// que this.
-
-</pre>
-
-<h3 id="Exemples_valides">Exemples valides</h3>
-
-<pre class="brush: js example-good">var monSet = new Set;
-['truc', 'bidule'].forEach(monSet.add.bind(monSet));
-// Cela fonctionne car on lie "monSet" avec this.
-
-var maFonction = function () {
-  console.log(this)
-};
-['truc', 'bidule'].forEach(x =&gt; maFonction.bind(x));
-// Cela fonctionne car on utilise
-// la fonction "bind" ce qui permet de
-// créer une fonction lambda qui propage
-// l'argument.
-
-</pre>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Function.prototype.call()")}}</li>
- <li>{{jsxref("Function.prototype.apply()")}}</li>
- <li>{{jsxref("Function.prototype.bind()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/errors/called_on_incompatible_type/index.md b/files/fr/web/javascript/reference/errors/called_on_incompatible_type/index.md
new file mode 100644
index 0000000000..a560955088
--- /dev/null
+++ b/files/fr/web/javascript/reference/errors/called_on_incompatible_type/index.md
@@ -0,0 +1,73 @@
+---
+title: 'TypeError: X.prototype.y called on incompatible type'
+slug: Web/JavaScript/Reference/Errors/Called_on_incompatible_type
+tags:
+  - Erreurs
+  - JavaScript
+  - TypeError
+translation_of: Web/JavaScript/Reference/Errors/Called_on_incompatible_type
+original_slug: Web/JavaScript/Reference/Erreurs/Called_on_incompatible_type
+---
+{{jsSidebar("Errors")}}
+
+## Message
+
+    TypeError: 'this' is not a Set object (Edge)
+    TypeError: Function.prototype.toString called on incompatible object (Firefox)
+    TypeError: Function.prototype.bind called on incompatible target (Firefox)
+    TypeError: Method Set.prototype.add called on incompatible receiver undefined (Chrome)
+    TypeError: Bind must be called on a function (Chrome)
+
+## Type d'erreur
+
+{{jsxref("TypeError")}}
+
+## Quel est le problème ?
+
+Lorsque cette erreur est levée, cela signifie qu'une fonction (d'un objet donné) est appelé avec une valeur `this` qui ne correspond pas au type attendu par la fonction.
+
+Cela peut se produire lorsqu'on utilise les méthodes {{jsxref("Function.prototype.call()")}} ou {{jsxref("Function.prototype.apply()")}} et qu'on fournit un argument `this` dont le type n'est pas celui attendu.
+
+Cela peut également se produire quand on fournit une fonction (sous la forme d'un objet) comme argument d'une autre fonction. Dans ce cas, l'objet ne sera pas capturé comme valeur `this` pour la fonction. Pour contourner ce problème, on peut fournir une fonction lambda qui effectue l'appel ou utiliser la fonction {{jsxref("Function.prototype.bind()")}} afin que `this` soit l'objet attendu.
+
+## Exemples
+
+### Exemples invalides
+
+```js example-bad
+var monSet = new Set;
+['truc', 'bidule'].forEach(monSet.add);
+// monSet.add est une fonction mais
+// "monSet" n'est pas capturé en tant que this.
+
+var maFonction = function () {
+  console.log(this);
+};
+['truc', 'bidule'].forEach(maFonction.bind);
+// maFonction.bind est une fonction
+// mais "maFonction" n'est pas capturé en tant
+// que this.
+```
+
+### Exemples valides
+
+```js example-good
+var monSet = new Set;
+['truc', 'bidule'].forEach(monSet.add.bind(monSet));
+// Cela fonctionne car on lie "monSet" avec this.
+
+var maFonction = function () {
+  console.log(this)
+};
+['truc', 'bidule'].forEach(x => maFonction.bind(x));
+// Cela fonctionne car on utilise
+// la fonction "bind" ce qui permet de
+// créer une fonction lambda qui propage
+// l'argument.
+```
+
+## Voir aussi
+
+- {{jsxref("Function.prototype.call()")}}
+- {{jsxref("Function.prototype.apply()")}}
+- {{jsxref("Function.prototype.bind()")}}
diff --git a/files/fr/web/javascript/reference/errors/cant_access_lexical_declaration_before_init/index.html b/files/fr/web/javascript/reference/errors/cant_access_lexical_declaration_before_init/index.html
deleted file mode 100644
index 1ac434163b..0000000000
--- a/files/fr/web/javascript/reference/errors/cant_access_lexical_declaration_before_init/index.html
+++ /dev/null
@@ -1,63 +0,0 @@
----
-title: 'ReferenceError: can''t access lexical declaration`X'' before initialization'
-slug: Web/JavaScript/Reference/Errors/Cant_access_lexical_declaration_before_init
-tags:
-  - Erreur
-  - JavaScript
-  - Reference
-  - ReferenceError
-translation_of: Web/JavaScript/Reference/Errors/Cant_access_lexical_declaration_before_init
-original_slug: Web/JavaScript/Reference/Erreurs/Cant_access_lexical_declaration_before_init
----
-<div>{{jsSidebar("Errors")}}</div>
-
-<h2 id="Message">Message</h2>
-
-<pre class="syntaxbox">ReferenceError: Use before delaration (Edge)
-ReferenceError: can't access lexical declaration `X' before initialization (Firefox)
-ReferenceError: 'x' is not defined (Chrome)
-</pre>
-
-<h2 id="Type_d'erreur">Type d'erreur</h2>
-
-<p>{{jsxref("ReferenceError")}}</p>
-
-<h2 id="Quel_est_le_problème">Quel est le problème ?</h2>
-
-<p>Il y a eu un accès à une variable déclarée avec <code>let</code> ou <code>const</code> avant que celle-ci ait été initialisée. Cela peut se produire dans n'importe quelle instruction de bloc avec une variable déclarée avec <code>let</code> ou <code>const</code> et qui est utilisée avant son initialisation.</p>
-
-<h2 id="Exemple">Exemple</h2>
-
-<h3 id="Exemples_invalides">Exemples invalides</h3>
-
-<p>Dans l'exemple qui suit, la variable <code>toto</code> est redéclarée dans le bloc avec un second <code>let</code> et elle n'est donc pas initialisée.</p>
-
-<pre class="brush: js example-bad">function test(){
-   let toto = 33;
-   if (true) {
-      let toto = (toto + 55);
-      // ReferenceError: can't access lexical
-      // declaration `toto` before initialization
-   }
-}
-test();
-</pre>
-
-<h3 id="Exemples_valides">Exemples valides</h3>
-
-<p>Afin que <code>toto</code> puisse être modifiée au sein de l'instruction <code>if</code>, on enlèvera la redéclaration dans ce bloc :</p>
-
-<pre class="brush: js example-good">function test(){
-   let toto = 33;
-   if (true) {
-      toto = (toto + 55);
-   }
-}
-test();
-</pre>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/JavaScript/Reference/Instructions/let#Zone_morte_temporaire_(Temporal_Dead_Zone_TDZ)_et_les_erreurs_liées_à_let">La « zone morte temporelle » (ou TDZ pour « <em>Temporal Dead Zone</em> ») et les erreurs avec <code>let</code></a></li>
-</ul>
diff --git a/files/fr/web/javascript/reference/errors/cant_access_lexical_declaration_before_init/index.md b/files/fr/web/javascript/reference/errors/cant_access_lexical_declaration_before_init/index.md
new file mode 100644
index 0000000000..351754cba4
--- /dev/null
+++ b/files/fr/web/javascript/reference/errors/cant_access_lexical_declaration_before_init/index.md
@@ -0,0 +1,62 @@
+---
+title: 'ReferenceError: can''t access lexical declaration`X'' before initialization'
+slug: Web/JavaScript/Reference/Errors/Cant_access_lexical_declaration_before_init
+tags:
+  - Erreur
+  - JavaScript
+  - Reference
+  - ReferenceError
+translation_of: Web/JavaScript/Reference/Errors/Cant_access_lexical_declaration_before_init
+original_slug: Web/JavaScript/Reference/Erreurs/Cant_access_lexical_declaration_before_init
+---
+{{jsSidebar("Errors")}}
+
+## Message
+
+    ReferenceError: Use before delaration (Edge)
+    ReferenceError: can't access lexical declaration `X' before initialization (Firefox)
+    ReferenceError: 'x' is not defined (Chrome)
+
+## Type d'erreur
+
+{{jsxref("ReferenceError")}}
+
+## Quel est le problème ?
+
+Il y a eu un accès à une variable déclarée avec `let` ou `const` avant que celle-ci ait été initialisée. Cela peut se produire dans n'importe quelle instruction de bloc avec une variable déclarée avec `let` ou `const` et qui est utilisée avant son initialisation.
+
+## Exemple
+
+### Exemples invalides
+
+Dans l'exemple qui suit, la variable `toto` est redéclarée dans le bloc avec un second `let` et elle n'est donc pas initialisée.
+
+```js example-bad
+function test(){
+   let toto = 33;
+   if (true) {
+      let toto = (toto + 55);
+      // ReferenceError: can't access lexical
+      // declaration `toto` before initialization
+   }
+}
+test();
+```
+
+### Exemples valides
+
+Afin que `toto` puisse être modifiée au sein de l'instruction `if`, on enlèvera la redéclaration dans ce bloc :
+
+```js example-good
+function test(){
+   let toto = 33;
+   if (true) {
+      toto = (toto + 55);
+   }
+}
+test();
+```
+
+## Voir aussi
+
+- [La « zone morte temporelle » (ou TDZ pour « _Temporal Dead Zone_ ») et les erreurs avec `let`](</fr/docs/Web/JavaScript/Reference/Instructions/let#Zone_morte_temporaire_(Temporal_Dead_Zone_TDZ)_et_les_erreurs_liées_à_let>)
diff --git a/files/fr/web/javascript/reference/errors/cant_access_property/index.html b/files/fr/web/javascript/reference/errors/cant_access_property/index.html
deleted file mode 100644
index e9ea7c5e0c..0000000000
--- a/files/fr/web/javascript/reference/errors/cant_access_property/index.html
+++ /dev/null
@@ -1,60 +0,0 @@
----
-title: 'TypeError: can''t access property "x" of "y"'
-slug: Web/JavaScript/Reference/Errors/Cant_access_property
-tags:
-  - Erreurs
-  - JavaScript
-  - TypeError
-translation_of: Web/JavaScript/Reference/Errors/Cant_access_property
-original_slug: Web/JavaScript/Reference/Erreurs/Cant_access_property
----
-<div>{{jsSidebar("Errors")}}</div>
-
-<h2 id="Message">Message</h2>
-
-<pre class="syntaxbox">TypeError: Unable to get property {x} of undefined or null reference (Edge)
-TypeError: can't access property {x} of {y} (Firefox)
-TypeError: {y} is undefined, can't access property {x} of it (Firefox)
-TypeError: {y} is null, can't access property {x} of it (Firefox)
-
-Exemples
-TypeError: x is undefined, can't access property "prop" of it
-TypeError: x is null, can't access property "prop" of it
-TypeError: can't access property "prop" of undefined
-TypeError: can't access property "prop" of null
-</pre>
-
-<h2 id="Types_d'erreur">Types d'erreur</h2>
-
-<p>{{jsxref("TypeError")}}.</p>
-
-<h2 id="Quel_est_le_problème">Quel est le problème ?</h2>
-
-<p>On a tenté d'accéder à une propriété sur la valeur {{jsxref("undefined")}} ou {{jsxref("null")}}.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Cas_invalides">Cas invalides</h3>
-
-<pre class="brush: js example-bad">// undefined et null ne possèdent aucune propriété et aucune méthode substring
-var toto = undefined;
-toto.substring(1); // TypeError: x is undefined, can't access property "substring" of it
-
-var toto = null;
-toto.substring(1); // TypeError: x is null, can't access property "substring" of it
-</pre>
-
-<h3 id="Corriger_le_problème">Corriger le problème</h3>
-
-<p>Pour détecter le cas où la valeur utilisée est <code>undefined</code> ou <code>null</code>, on peut utiliser l'opérateur <code><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_typeof">typeof</a></code>. Par exemple :</p>
-
-<pre class="brush: js">if (typeof toto !== 'undefined') {
-  // On sait alors que toto est bien défini et on peut utiliser ses propriétés s'il en a.
-}</pre>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("undefined")}}</li>
- <li>{{jsxref("null")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/errors/cant_access_property/index.md b/files/fr/web/javascript/reference/errors/cant_access_property/index.md
new file mode 100644
index 0000000000..20c4ffd4a6
--- /dev/null
+++ b/files/fr/web/javascript/reference/errors/cant_access_property/index.md
@@ -0,0 +1,60 @@
+---
+title: 'TypeError: can''t access property "x" of "y"'
+slug: Web/JavaScript/Reference/Errors/Cant_access_property
+tags:
+  - Erreurs
+  - JavaScript
+  - TypeError
+translation_of: Web/JavaScript/Reference/Errors/Cant_access_property
+original_slug: Web/JavaScript/Reference/Erreurs/Cant_access_property
+---
+{{jsSidebar("Errors")}}
+
+## Message
+
+    TypeError: Unable to get property {x} of undefined or null reference (Edge)
+    TypeError: can't access property {x} of {y} (Firefox)
+    TypeError: {y} is undefined, can't access property {x} of it (Firefox)
+    TypeError: {y} is null, can't access property {x} of it (Firefox)
+
+    Exemples
+    TypeError: x is undefined, can't access property "prop" of it
+    TypeError: x is null, can't access property "prop" of it
+    TypeError: can't access property "prop" of undefined
+    TypeError: can't access property "prop" of null
+
+## Types d'erreur
+
+{{jsxref("TypeError")}}.
+
+## Quel est le problème ?
+
+On a tenté d'accéder à une propriété sur la valeur {{jsxref("undefined")}} ou {{jsxref("null")}}.
+
+## Exemples
+
+### Cas invalides
+
+```js example-bad
+// undefined et null ne possèdent aucune propriété et aucune méthode substring
+var toto = undefined;
+toto.substring(1); // TypeError: x is undefined, can't access property "substring" of it
+
+var toto = null;
+toto.substring(1); // TypeError: x is null, can't access property "substring" of it
+```
+
+### Corriger le problème
+
+Pour détecter le cas où la valeur utilisée est `undefined` ou `null`, on peut utiliser l'opérateur [`typeof`](/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_typeof). Par exemple :
+
+```js
+if (typeof toto !== 'undefined') {
+  // On sait alors que toto est bien défini et on peut utiliser ses propriétés s'il en a.
+}
+```
+
+## Voir aussi
+
+- {{jsxref("undefined")}}
+- {{jsxref("null")}}
diff --git a/files/fr/web/javascript/reference/errors/cant_assign_to_property/index.html b/files/fr/web/javascript/reference/errors/cant_assign_to_property/index.html
deleted file mode 100644
index 29b72aaa47..0000000000
--- a/files/fr/web/javascript/reference/errors/cant_assign_to_property/index.html
+++ /dev/null
@@ -1,56 +0,0 @@
----
-title: 'TypeError: can''t assign to property "x" on "y": not an object'
-slug: Web/JavaScript/Reference/Errors/Cant_assign_to_property
-tags:
-  - Error
-  - Errors
-  - JavaScript
-  - TypeError
-translation_of: Web/JavaScript/Reference/Errors/Cant_assign_to_property
-original_slug: Web/JavaScript/Reference/Erreurs/Cant_assign_to_property
----
-<div>{{jsSidebar("Errors")}}</div>
-
-<h2 id="Message">Message</h2>
-
-<pre class="syntaxbox">TypeError: can't assign to property "x" on {y}: not an object (Firefox)
-TypeError: Cannot create property 'x' on {y} (Chrome)
-</pre>
-
-<h2 id="Type_d'erreur">Type d'erreur</h2>
-
-<p>{{jsxref("TypeError")}}.</p>
-
-<h2 id="Quel_est_le_problème">Quel est le problème ?</h2>
-
-<p>En <a href="/fr/docs/Web/JavaScript/Reference/Strict_mode">mode strict</a>, une exception {{jsxref("TypeError")}} est déclenchée lorsqu'on tente de créer une propriété sur <a href="/fr/docs/Web/JavaScript/Structures_de_données#Les_valeurs_primitives">une valeur primitive</a> telle qu'un symbole, une chaîne de caractères, un nombre ou un booleén.</p>
-
-<p>Le problème peut être lié à une valeur qui se trouve à un endroit inattendu ou qu'un équivalent objet d'une valeur primitive est attendu (ex. {{jsxref("String")}} pour la chaîne de caractères ou {{jsxref("Number")}} pour un nombre).</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Exemple_invalide">Exemple invalide</h3>
-
-<pre class="brush: js example-bad">'use strict';
-
-var foo = "my string";
-// The following line does nothing if not in strict mode.
-foo.bar = {}; // TypeError: can't assign to property "bar" on "my string": not an object
-</pre>
-
-<h3 id="Exemple_valide">Exemple valide</h3>
-
-<p>On pourra corriger le problème en convertissant la valeur primitive en sont équivalent objet avec un constructeur (ici {{jsxref("String")}} pour .</p>
-
-<pre class="brush: js example-good">'use strict';
-
-var foo = new String("my string");
-foo.bar = {};
-</pre>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Strict_mode")}}</li>
- <li>{{Glossary("primitive")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/errors/cant_assign_to_property/index.md b/files/fr/web/javascript/reference/errors/cant_assign_to_property/index.md
new file mode 100644
index 0000000000..771d329791
--- /dev/null
+++ b/files/fr/web/javascript/reference/errors/cant_assign_to_property/index.md
@@ -0,0 +1,55 @@
+---
+title: 'TypeError: can''t assign to property "x" on "y": not an object'
+slug: Web/JavaScript/Reference/Errors/Cant_assign_to_property
+tags:
+  - Error
+  - Errors
+  - JavaScript
+  - TypeError
+translation_of: Web/JavaScript/Reference/Errors/Cant_assign_to_property
+original_slug: Web/JavaScript/Reference/Erreurs/Cant_assign_to_property
+---
+{{jsSidebar("Errors")}}
+
+## Message
+
+    TypeError: can't assign to property "x" on {y}: not an object (Firefox)
+    TypeError: Cannot create property 'x' on {y} (Chrome)
+
+## Type d'erreur
+
+{{jsxref("TypeError")}}.
+
+## Quel est le problème ?
+
+En [mode strict](/fr/docs/Web/JavaScript/Reference/Strict_mode), une exception {{jsxref("TypeError")}} est déclenchée lorsqu'on tente de créer une propriété sur [une valeur primitive](/fr/docs/Web/JavaScript/Structures_de_données#Les_valeurs_primitives) telle qu'un symbole, une chaîne de caractères, un nombre ou un booleén.
+
+Le problème peut être lié à une valeur qui se trouve à un endroit inattendu ou qu'un équivalent objet d'une valeur primitive est attendu (ex. {{jsxref("String")}} pour la chaîne de caractères ou {{jsxref("Number")}} pour un nombre).
+
+## Exemples
+
+### Exemple invalide
+
+```js example-bad
+'use strict';
+
+var foo = "my string";
+// The following line does nothing if not in strict mode.
+foo.bar = {}; // TypeError: can't assign to property "bar" on "my string": not an object
+```
+
+### Exemple valide
+
+On pourra corriger le problème en convertissant la valeur primitive en sont équivalent objet avec un constructeur (ici {{jsxref("String")}} pour .
+
+```js example-good
+'use strict';
+
+var foo = new String("my string");
+foo.bar = {};
+```
+
+## Voir aussi
+
+- {{jsxref("Strict_mode")}}
+- {{Glossary("primitive")}}
diff --git a/files/fr/web/javascript/reference/errors/cant_define_property_object_not_extensible/index.html b/files/fr/web/javascript/reference/errors/cant_define_property_object_not_extensible/index.html
deleted file mode 100644
index 674ffd0138..0000000000
--- a/files/fr/web/javascript/reference/errors/cant_define_property_object_not_extensible/index.html
+++ /dev/null
@@ -1,66 +0,0 @@
----
-title: 'TypeError: can''t define property "x": "obj" is not extensible'
-slug: Web/JavaScript/Reference/Errors/Cant_define_property_object_not_extensible
-tags:
-  - Erreurs
-  - JavaScript
-  - TypeError
-translation_of: Web/JavaScript/Reference/Errors/Cant_define_property_object_not_extensible
-original_slug: Web/JavaScript/Reference/Erreurs/Cant_define_property_object_not_extensible
----
-<div>{{jsSidebar("Errors")}}</div>
-
-<h2 id="Message">Message</h2>
-
-<pre class="syntaxbox">TypeError: Cannot create property for a non-extensible object (Edge)
-TypeError: can't define property "x": "obj" is not extensible (Firefox)
-TypeError: Cannot define property: "x", object is not extensible. (Chrome)
-</pre>
-
-<h2 id="Type_d'erreur">Type d'erreur</h2>
-
-<p>{{jsxref("TypeError")}}</p>
-
-<h2 id="Quel_est_le_problème">Quel est le problème ?</h2>
-
-<p>La plupart du temps, un objet est extensible, ce qui signifie qu'on peut lui ajouter de nouvelles propriétés. Cependant, dans ce cas, on a utilisé la méthode {{jsxref("Object.preventExtensions()")}} afin de marquer l'objet comme non-extensible. Celui-ci ne pourra donc pas recevoir de nouvelles propriétés en plus de celles dont il dispose déjà.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<p>En <a href="/fr/docs/Web/JavaScript/Reference/Strict_mode">mode strict</a>, si on essaie d'ajouter une nouvelle propriété sur un objet non-extensible, on obtient une exception <code>TypeError</code>. En mode non-strict, l'ajout de la nouvelle propriété est ignoré silencieusement.</p>
-
-<pre class="brush: js example-bad">'use strict';
-
-var obj = {};
-Object.preventExtensions(obj);
-
-obj.x = 'toto';
-// TypeError: can't define property "x": "obj" is not extensible
-</pre>
-
-<p>Pour le mode strict ete le mode non-strict, un appel à {{jsxref("Object.defineProperty()")}} déclenchera une exception lorsqu'on utilisera cette méthode pour ajouter une nouvelle propriété à un objet non-extenssible.</p>
-
-<pre class="brush: js example-bad">var obj = { };
-Object.preventExtensions(obj);
-
-Object.defineProperty(obj,
-  'x', { value: "toto" }
-);
-// TypeError: can't define property "x": "obj" is not extensible
-</pre>
-
-<p>Pour corriger cet erreur, il faut retirer l'appel à {{jsxref("Object.preventExtensions()")}} pour que l'objet soit extensible, soit ajouter la propriété avant que l'objet devienne non-extensible, soit retirer l'ajout de cette propriété si elle n'est pas nécessaire.</p>
-
-<pre class="brush: js example-good">'use strict';
-
-var obj = {};
-obj.x = 'toto'; // On ajoute la propriété avant de
-               // bloquer l'ajout d'autres propriétés
-
-Object.preventExtensions(obj);</pre>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Object.preventExtensions()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/errors/cant_define_property_object_not_extensible/index.md b/files/fr/web/javascript/reference/errors/cant_define_property_object_not_extensible/index.md
new file mode 100644
index 0000000000..8849cda16d
--- /dev/null
+++ b/files/fr/web/javascript/reference/errors/cant_define_property_object_not_extensible/index.md
@@ -0,0 +1,67 @@
+---
+title: 'TypeError: can''t define property "x": "obj" is not extensible'
+slug: Web/JavaScript/Reference/Errors/Cant_define_property_object_not_extensible
+tags:
+  - Erreurs
+  - JavaScript
+  - TypeError
+translation_of: Web/JavaScript/Reference/Errors/Cant_define_property_object_not_extensible
+original_slug: Web/JavaScript/Reference/Erreurs/Cant_define_property_object_not_extensible
+---
+{{jsSidebar("Errors")}}
+
+## Message
+
+    TypeError: Cannot create property for a non-extensible object (Edge)
+    TypeError: can't define property "x": "obj" is not extensible (Firefox)
+    TypeError: Cannot define property: "x", object is not extensible. (Chrome)
+
+## Type d'erreur
+
+{{jsxref("TypeError")}}
+
+## Quel est le problème ?
+
+La plupart du temps, un objet est extensible, ce qui signifie qu'on peut lui ajouter de nouvelles propriétés. Cependant, dans ce cas, on a utilisé la méthode {{jsxref("Object.preventExtensions()")}} afin de marquer l'objet comme non-extensible. Celui-ci ne pourra donc pas recevoir de nouvelles propriétés en plus de celles dont il dispose déjà.
+
+## Exemples
+
+En [mode strict](/fr/docs/Web/JavaScript/Reference/Strict_mode), si on essaie d'ajouter une nouvelle propriété sur un objet non-extensible, on obtient une exception `TypeError`. En mode non-strict, l'ajout de la nouvelle propriété est ignoré silencieusement.
+
+```js example-bad
+'use strict';
+
+var obj = {};
+Object.preventExtensions(obj);
+
+obj.x = 'toto';
+// TypeError: can't define property "x": "obj" is not extensible
+```
+
+Pour le mode strict ete le mode non-strict, un appel à {{jsxref("Object.defineProperty()")}} déclenchera une exception lorsqu'on utilisera cette méthode pour ajouter une nouvelle propriété à un objet non-extenssible.
+
+```js example-bad
+var obj = { };
+Object.preventExtensions(obj);
+
+Object.defineProperty(obj,
+  'x', { value: "toto" }
+);
+// TypeError: can't define property "x": "obj" is not extensible
+```
+
+Pour corriger cet erreur, il faut retirer l'appel à {{jsxref("Object.preventExtensions()")}} pour que l'objet soit extensible, soit ajouter la propriété avant que l'objet devienne non-extensible, soit retirer l'ajout de cette propriété si elle n'est pas nécessaire.
+
+```js example-good
+'use strict';
+
+var obj = {};
+obj.x = 'toto'; // On ajoute la propriété avant de
+               // bloquer l'ajout d'autres propriétés
+
+Object.preventExtensions(obj);
+```
+
+## Voir aussi
+
+- {{jsxref("Object.preventExtensions()")}}
diff --git a/files/fr/web/javascript/reference/errors/cant_delete/index.html b/files/fr/web/javascript/reference/errors/cant_delete/index.html
deleted file mode 100644
index 7ec2b3bac8..0000000000
--- a/files/fr/web/javascript/reference/errors/cant_delete/index.html
+++ /dev/null
@@ -1,60 +0,0 @@
----
-title: 'TypeError: property "x" is non-configurable and can''t be deleted'
-slug: Web/JavaScript/Reference/Errors/Cant_delete
-tags:
-  - Erreurs
-  - JavaScript
-  - Mode strict
-  - TypeError
-translation_of: Web/JavaScript/Reference/Errors/Cant_delete
-original_slug: Web/JavaScript/Reference/Erreurs/Cant_delete
----
-<div>{{jsSidebar("Errors")}}</div>
-
-<h2 id="Message">Message</h2>
-
-<pre class="syntaxbox">TypeError: Calling delete on 'x' is not allowed in strict mode (Edge)
-TypeError: property "x" is non-configurable and can't be deleted. (Firefox)
-TypeError: Cannot delete property 'x' of #&lt;Object&gt; (Chrome)
-</pre>
-
-<h2 id="Type_d'erreur">Type d'erreur</h2>
-
-<p>{{jsxref("TypeError")}} in strict mode only.</p>
-
-<h2 id="Quel_est_le_problème">Quel est le problème ?</h2>
-
-<p>Une instruction demande la suppression d'une propriété <a href="/fr/docs/Web/JavaScript/Structures_de_données#Propriétés">non-configurable</a>. L'attribut <code>configurable</code> permet de contrôler si la propriété peut être supprimée de l'objet auquel elle est rattachée et si ces attributs (en dehors de <code>writable</code>) peuvent être modifiés.</p>
-
-<p>Cette erreur ne se produit qu'en <a href="/fr/docs/Web/JavaScript/Reference/Strict_mode">mode strict</a>. En mode non-strict, l'opération de suppression renverra <code>false</code>.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<p>Les propriétés non-configurables ne sont pas très fréquentes mais il est possible d'en créer grâce à {{jsxref("Object.defineProperty()")}} ou à  {{jsxref("Object.freeze()")}}.</p>
-
-<pre class="brush: js example-bad">"use strict";
-var obj = Object.freeze({name: "Elsa", score: 157});
-delete obj.score;  // TypeError
-
-"use strict";
-var obj = {};
-Object.defineProperty(obj, "toto", {value: 2, configurable: false});
-delete obj.toto;  // TypeError
-
-"use strict";
-var frozenArray = Object.freeze([0, 1, 2]);
-frozenArray.pop();  // TypeError
-</pre>
-
-<p>Certaines propriétés natives de JavaScript sont non-configurables. Peut-être que le code tente de supprimer une constante mathématique :</p>
-
-<pre class="brush: js example-bad">"use strict";
-delete Math.PI;  // TypeError</pre>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_delete">L'opérateur <code>delete</code></a></li>
- <li>{{jsxref("Object.defineProperty()")}}</li>
- <li>{{jsxref("Object.freeze()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/errors/cant_delete/index.md b/files/fr/web/javascript/reference/errors/cant_delete/index.md
new file mode 100644
index 0000000000..c2e807eecf
--- /dev/null
+++ b/files/fr/web/javascript/reference/errors/cant_delete/index.md
@@ -0,0 +1,60 @@
+---
+title: 'TypeError: property "x" is non-configurable and can''t be deleted'
+slug: Web/JavaScript/Reference/Errors/Cant_delete
+tags:
+  - Erreurs
+  - JavaScript
+  - Mode strict
+  - TypeError
+translation_of: Web/JavaScript/Reference/Errors/Cant_delete
+original_slug: Web/JavaScript/Reference/Erreurs/Cant_delete
+---
+{{jsSidebar("Errors")}}
+
+## Message
+
+    TypeError: Calling delete on 'x' is not allowed in strict mode (Edge)
+    TypeError: property "x" is non-configurable and can't be deleted. (Firefox)
+    TypeError: Cannot delete property 'x' of #<Object> (Chrome)
+
+## Type d'erreur
+
+{{jsxref("TypeError")}} in strict mode only.
+
+## Quel est le problème ?
+
+Une instruction demande la suppression d'une propriété [non-configurable](/fr/docs/Web/JavaScript/Structures_de_données#Propriétés). L'attribut `configurable` permet de contrôler si la propriété peut être supprimée de l'objet auquel elle est rattachée et si ces attributs (en dehors de `writable`) peuvent être modifiés.
+
+Cette erreur ne se produit qu'en [mode strict](/fr/docs/Web/JavaScript/Reference/Strict_mode). En mode non-strict, l'opération de suppression renverra `false`.
+
+## Exemples
+
+Les propriétés non-configurables ne sont pas très fréquentes mais il est possible d'en créer grâce à {{jsxref("Object.defineProperty()")}} ou à  {{jsxref("Object.freeze()")}}.
+
+```js example-bad
+"use strict";
+var obj = Object.freeze({name: "Elsa", score: 157});
+delete obj.score;  // TypeError
+
+"use strict";
+var obj = {};
+Object.defineProperty(obj, "toto", {value: 2, configurable: false});
+delete obj.toto;  // TypeError
+
+"use strict";
+var frozenArray = Object.freeze([0, 1, 2]);
+frozenArray.pop();  // TypeError
+```
+
+Certaines propriétés natives de JavaScript sont non-configurables. Peut-être que le code tente de supprimer une constante mathématique :
+
+```js example-bad
+"use strict";
+delete Math.PI;  // TypeError
+```
+
+## Voir aussi
+
+- [L'opérateur `delete`](/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_delete)
+- {{jsxref("Object.defineProperty()")}}
+- {{jsxref("Object.freeze()")}}
diff --git a/files/fr/web/javascript/reference/errors/cant_redefine_property/index.html b/files/fr/web/javascript/reference/errors/cant_redefine_property/index.html
deleted file mode 100644
index 5311f957a5..0000000000
--- a/files/fr/web/javascript/reference/errors/cant_redefine_property/index.html
+++ /dev/null
@@ -1,52 +0,0 @@
----
-title: 'TypeError: can''t redefine non-configurable property "x"'
-slug: Web/JavaScript/Reference/Errors/Cant_redefine_property
-tags:
-  - Erreurs
-  - JavaScript
-  - TypeError
-translation_of: Web/JavaScript/Reference/Errors/Cant_redefine_property
-original_slug: Web/JavaScript/Reference/Erreurs/Cant_redefine_property
----
-<div>{{jsSidebar("Errors")}}</div>
-
-<h2 id="Message">Message</h2>
-
-<pre class="syntaxbox">TypeError: Cannot modify non-writable property {x} (Edge)
-TypeError: can't redefine non-configurable property "x" (Firefox)
-TypeError: Cannot redefine property: "x" (Chrome)
-</pre>
-
-<h2 id="Type_d'erreur">Type d'erreur</h2>
-
-<p>{{jsxref("TypeError")}}</p>
-
-<h2 id="Quel_est_le_problème">Quel est le problème ?</h2>
-
-<p>On essaie de redéfinir une propriété alors que celle-ci est <a href="/fr/docs/Web/JavaScript/Structures_de_données#Propriétés">non-configurable</a>. L'attribut <code>configurable</code> permet d'indiquer si la propriété peut être supprimée d'un objet et si ses attributs (en dehors de <code>writable</code>) peuvent être modifiés. Généralement, les propriétés d'un objet créées avec un <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Initialisateur_objet">initialisateur d'objet</a> sont configurables. Cependant, lorsqu'on utilise la méthode {{jsxref("Object.defineProperty()")}}, la propriété n'est pas configurable par défaut.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Propriétés_non-configurables_créées_avec_Object.defineProperty()">Propriétés non-configurables créées avec <code>Object.defineProperty()</code></h3>
-
-<p>La méthode {{jsxref("Object.defineProperty()")}} crée des propriétés non-configurables si on n'indique pas le contraire :</p>
-
-<pre class="brush: js example-bad">var obj = Object.create({});
-Object.defineProperty(obj, "toto", {value: "machin"});
-
-Object.defineProperty(obj, "toto", {value: "bidule"});
-// TypeError: can't redefine non-configurable property "toto"
-</pre>
-
-<p>Si on veut pouvoir redéfinir la propriété "toto" dans la suite du code, il faudra la créer comme étant configurable.</p>
-
-<pre class="brush: js example-good">var obj = Object.create({});
-Object.defineProperty(obj, "toto", {value: "machin", configurable: true});
-Object.defineProperty(obj, "toto", {value: "bidule", configurable: true});</pre>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/JavaScript/Structures_de_données#Propriétés">[[Configurable]]</a></li>
- <li>{{jsxref("Object.defineProperty()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/errors/cant_redefine_property/index.md b/files/fr/web/javascript/reference/errors/cant_redefine_property/index.md
new file mode 100644
index 0000000000..0c445fd4a6
--- /dev/null
+++ b/files/fr/web/javascript/reference/errors/cant_redefine_property/index.md
@@ -0,0 +1,52 @@
+---
+title: 'TypeError: can''t redefine non-configurable property "x"'
+slug: Web/JavaScript/Reference/Errors/Cant_redefine_property
+tags:
+  - Erreurs
+  - JavaScript
+  - TypeError
+translation_of: Web/JavaScript/Reference/Errors/Cant_redefine_property
+original_slug: Web/JavaScript/Reference/Erreurs/Cant_redefine_property
+---
+{{jsSidebar("Errors")}}
+
+## Message
+
+    TypeError: Cannot modify non-writable property {x} (Edge)
+    TypeError: can't redefine non-configurable property "x" (Firefox)
+    TypeError: Cannot redefine property: "x" (Chrome)
+
+## Type d'erreur
+
+{{jsxref("TypeError")}}
+
+## Quel est le problème ?
+
+On essaie de redéfinir une propriété alors que celle-ci est [non-configurable](/fr/docs/Web/JavaScript/Structures_de_données#Propriétés). L'attribut `configurable` permet d'indiquer si la propriété peut être supprimée d'un objet et si ses attributs (en dehors de `writable`) peuvent être modifiés. Généralement, les propriétés d'un objet créées avec un [initialisateur d'objet](/fr/docs/Web/JavaScript/Reference/Opérateurs/Initialisateur_objet) sont configurables. Cependant, lorsqu'on utilise la méthode {{jsxref("Object.defineProperty()")}}, la propriété n'est pas configurable par défaut.
+
+## Exemples
+
+### Propriétés non-configurables créées avec `Object.defineProperty()`
+
+La méthode {{jsxref("Object.defineProperty()")}} crée des propriétés non-configurables si on n'indique pas le contraire :
+
+```js example-bad
+var obj = Object.create({});
+Object.defineProperty(obj, "toto", {value: "machin"});
+
+Object.defineProperty(obj, "toto", {value: "bidule"});
+// TypeError: can't redefine non-configurable property "toto"
+```
+
+Si on veut pouvoir redéfinir la propriété "toto" dans la suite du code, il faudra la créer comme étant configurable.
+
+```js example-good
+var obj = Object.create({});
+Object.defineProperty(obj, "toto", {value: "machin", configurable: true});
+Object.defineProperty(obj, "toto", {value: "bidule", configurable: true});
+```
+
+## Voir aussi
+
+- [\[\[Configurable\]\]](/fr/docs/Web/JavaScript/Structures_de_données#Propriétés)
+- {{jsxref("Object.defineProperty()")}}
diff --git a/files/fr/web/javascript/reference/errors/cyclic_object_value/index.html b/files/fr/web/javascript/reference/errors/cyclic_object_value/index.html
deleted file mode 100644
index aa50f933f9..0000000000
--- a/files/fr/web/javascript/reference/errors/cyclic_object_value/index.html
+++ /dev/null
@@ -1,69 +0,0 @@
----
-title: 'TypeError: cyclic object value'
-slug: Web/JavaScript/Reference/Errors/Cyclic_object_value
-tags:
-  - Erreurs
-  - JavaScript
-  - TypeError
-translation_of: Web/JavaScript/Reference/Errors/Cyclic_object_value
-original_slug: Web/JavaScript/Reference/Erreurs/Cyclic_object_value
----
-<div>{{jsSidebar("Errors")}}</div>
-
-<h2 id="Message">Message</h2>
-
-<pre class="syntaxbox">TypeError: cyclic object value (Firefox)
-TypeError: Converting circular structure to JSON (Chrome and Opera)
-TypeError: Circular reference in value argument not supported (Edge)
-</pre>
-
-<h2 id="Type_d'erreur">Type d'erreur</h2>
-
-<p>{{jsxref("TypeError")}}</p>
-
-<h2 id="Quel_est_le_problème">Quel est le problème ?</h2>
-
-<p>Lorsqu'on appelle la méthode {{jsxref("JSON.stringify()")}}, les structures de références cycliques ne peuvent pas être converties en chaîne de caractères car <a href="https://www.json.org/">le format JSON</a> ne prend pas en charge les références (bien qu'<a href="http://tools.ietf.org/html/draft-pbryan-zyp-json-ref-03">un brouillon IETF existe</a>).</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<p>Avec une structure circulaire comme la suivante :</p>
-
-<pre class="brush: js">var a = {};
-var b = {};
-a.child = b;
-b.child = a;
-</pre>
-
-<p>{{jsxref("JSON.stringify()")}} échouera :</p>
-
-<pre class="brush: js example-bad">JSON.stringify(a);
-// TypeError: cyclic object value
-</pre>
-
-<p>Il est nécessaire de contrôler l'existence de cycles avant la conversion en chaîne de caractères. On peut par exemple fournir une fonction de remplacement comme deuxième argument de la fonction {{jsxref("JSON.stringify()")}}.</p>
-
-<pre class="brush: js">const getCircularReplacer = () =&gt; {
-  const seen = new WeakSet();
-  return (key, value) =&gt; {
-    if (typeof value === "object" &amp;&amp; value !== null) {
-      if (seen.has(value)) {
-        return;
-      }
-      seen.add(value);
-    }
-    return value;
-  };
-};
-
-JSON.stringify(circularReference, getCircularReplacer());
-// {"otherData":123}</pre>
-
-<p>On peut également utiliser une bibliothèque ou une fonction utilitaire pour ce scénario. comme <a href="https://github.com/douglascrockford/JSON-js/blob/master/cycle.js">cycle.js</a>.</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("JSON.stringify")}}</li>
- <li><a href="https://github.com/douglascrockford/JSON-js/blob/master/cycle.js">cycle.js</a> qui introduit deux fonctions : <code>JSON.decycle</code> <code>et JSON.retrocycle</code> qui permettent d'encoder et de décoder des structures cycliques en JSON.</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/errors/cyclic_object_value/index.md b/files/fr/web/javascript/reference/errors/cyclic_object_value/index.md
new file mode 100644
index 0000000000..58de02ab6d
--- /dev/null
+++ b/files/fr/web/javascript/reference/errors/cyclic_object_value/index.md
@@ -0,0 +1,70 @@
+---
+title: 'TypeError: cyclic object value'
+slug: Web/JavaScript/Reference/Errors/Cyclic_object_value
+tags:
+  - Erreurs
+  - JavaScript
+  - TypeError
+translation_of: Web/JavaScript/Reference/Errors/Cyclic_object_value
+original_slug: Web/JavaScript/Reference/Erreurs/Cyclic_object_value
+---
+{{jsSidebar("Errors")}}
+
+## Message
+
+    TypeError: cyclic object value (Firefox)
+    TypeError: Converting circular structure to JSON (Chrome and Opera)
+    TypeError: Circular reference in value argument not supported (Edge)
+
+## Type d'erreur
+
+{{jsxref("TypeError")}}
+
+## Quel est le problème ?
+
+Lorsqu'on appelle la méthode {{jsxref("JSON.stringify()")}}, les structures de références cycliques ne peuvent pas être converties en chaîne de caractères car [le format JSON](https://www.json.org/) ne prend pas en charge les références (bien qu'[un brouillon IETF existe](http://tools.ietf.org/html/draft-pbryan-zyp-json-ref-03)).
+
+## Exemples
+
+Avec une structure circulaire comme la suivante :
+
+```js
+var a = {};
+var b = {};
+a.child = b;
+b.child = a;
+```
+
+{{jsxref("JSON.stringify()")}} échouera :
+
+```js example-bad
+JSON.stringify(a);
+// TypeError: cyclic object value
+```
+
+Il est nécessaire de contrôler l'existence de cycles avant la conversion en chaîne de caractères. On peut par exemple fournir une fonction de remplacement comme deuxième argument de la fonction {{jsxref("JSON.stringify()")}}.
+
+```js
+const getCircularReplacer = () => {
+  const seen = new WeakSet();
+  return (key, value) => {
+    if (typeof value === "object" && value !== null) {
+      if (seen.has(value)) {
+        return;
+      }
+      seen.add(value);
+    }
+    return value;
+  };
+};
+
+JSON.stringify(circularReference, getCircularReplacer());
+// {"otherData":123}
+```
+
+On peut également utiliser une bibliothèque ou une fonction utilitaire pour ce scénario. comme [cycle.js](https://github.com/douglascrockford/JSON-js/blob/master/cycle.js).
+
+## Voir aussi
+
+- {{jsxref("JSON.stringify")}}
+- [cycle.js](https://github.com/douglascrockford/JSON-js/blob/master/cycle.js) qui introduit deux fonctions : `JSON.decycle` `et JSON.retrocycle` qui permettent d'encoder et de décoder des structures cycliques en JSON.
diff --git a/files/fr/web/javascript/reference/errors/dead_object/index.html b/files/fr/web/javascript/reference/errors/dead_object/index.html
deleted file mode 100644
index ba4498fd26..0000000000
--- a/files/fr/web/javascript/reference/errors/dead_object/index.html
+++ /dev/null
@@ -1,50 +0,0 @@
----
-title: 'TypeError: can''t access dead object'
-slug: Web/JavaScript/Reference/Errors/Dead_object
-tags:
-  - Erreurs
-  - JavaScript
-  - TypeError
-translation_of: Web/JavaScript/Reference/Errors/Dead_object
-original_slug: Web/JavaScript/Reference/Erreurs/Dead_object
----
-<div>{{JSSidebar("Errors")}}</div>
-
-<h2 id="Message">Message</h2>
-
-<pre class="syntaxbox">TypeError: can't access dead object
-</pre>
-
-<h2 id="Type_d'erreur">Type d'erreur</h2>
-
-<p>{{jsxref("TypeError")}}</p>
-
-<h2 id="Quel_est_le_problème">Quel est le problème ?</h2>
-
-<p>Afin d'améliorer l'utilisation de la mémoire et de prévenir les fuites mémoire, Firefox empêche les modules complémentaires de conserver des références fortes vers les objets du DOM après que leur document parent a été détruit. Un objet mort (<em>dead</em>) est un objet qui contient une référence forte vers un éléments du DOM, même après que celui-ci a été détruit dans le DOM. Pour éviter ces problèmes, les références aux objets du DOM d'un document étranger devraient être enregistrées dans un objet spécifique à ce document et être nettoyées lors de la suppression du document. On peut également utiliser les objets qui permettent d'enregistrer <a href="/fr/docs/Mozilla/Tech/XPCOM/Language_Bindings/Components.utils.getWeakReference">des références faibles</a>.</p>
-
-<h2 id="Vérifier_si_un_objet_est_mort">Vérifier si un objet est mort</h2>
-
-<p><code><a href="/fr/docs/Components.utils">Components.utils</a></code> fournit une méthode <code>isDeadWrapper()</code> qui peut être utilisée par du code privilégié :</p>
-
-<pre class="brush: js">if (Components.utils.isDeadWrapper(window)) {
-  // dead
-}</pre>
-
-<p>Du code sans privilège ne pourra pas accéder à <code>Component.utils</code> et pourra simplement intercepter l'exception :</p>
-
-<pre class="brush: js">try {
-  String(window);
-}
-catch (e) {
-  console.log("window est problablement mort ");
-}</pre>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="https://blog.mozilla.org/addons/2012/09/12/what-does-cant-access-dead-object-mean/">Que signifie “can’t access dead object” ? (en anglais)</a></li>
- <li><a href="/fr/docs/Extensions/Common_causes_of_memory_leaks_in_extensions">Les causes principales des fuites mémoire dans les extensions</a></li>
- <li><code><a href="/fr/docs/Components.utils">Components.utils</a></code></li>
- <li><a href="/en-US/docs/Mozilla/Zombie_compartments#Zombie_compartments">Compartiments zombies</a></li>
-</ul>
diff --git a/files/fr/web/javascript/reference/errors/dead_object/index.md b/files/fr/web/javascript/reference/errors/dead_object/index.md
new file mode 100644
index 0000000000..0f65953ae7
--- /dev/null
+++ b/files/fr/web/javascript/reference/errors/dead_object/index.md
@@ -0,0 +1,51 @@
+---
+title: 'TypeError: can''t access dead object'
+slug: Web/JavaScript/Reference/Errors/Dead_object
+tags:
+  - Erreurs
+  - JavaScript
+  - TypeError
+translation_of: Web/JavaScript/Reference/Errors/Dead_object
+original_slug: Web/JavaScript/Reference/Erreurs/Dead_object
+---
+{{JSSidebar("Errors")}}
+
+## Message
+
+    TypeError: can't access dead object
+
+## Type d'erreur
+
+{{jsxref("TypeError")}}
+
+## Quel est le problème ?
+
+Afin d'améliorer l'utilisation de la mémoire et de prévenir les fuites mémoire, Firefox empêche les modules complémentaires de conserver des références fortes vers les objets du DOM après que leur document parent a été détruit. Un objet mort (_dead_) est un objet qui contient une référence forte vers un éléments du DOM, même après que celui-ci a été détruit dans le DOM. Pour éviter ces problèmes, les références aux objets du DOM d'un document étranger devraient être enregistrées dans un objet spécifique à ce document et être nettoyées lors de la suppression du document. On peut également utiliser les objets qui permettent d'enregistrer [des références faibles](/fr/docs/Mozilla/Tech/XPCOM/Language_Bindings/Components.utils.getWeakReference).
+
+## Vérifier si un objet est mort
+
+[`Components.utils`](/fr/docs/Components.utils) fournit une méthode `isDeadWrapper()` qui peut être utilisée par du code privilégié :
+
+```js
+if (Components.utils.isDeadWrapper(window)) {
+  // dead
+}
+```
+
+Du code sans privilège ne pourra pas accéder à `Component.utils` et pourra simplement intercepter l'exception :
+
+```js
+try {
+  String(window);
+}
+catch (e) {
+  console.log("window est problablement mort ");
+}
+```
+
+## Voir aussi
+
+- [Que signifie “can’t access dead object” ? (en anglais)](https://blog.mozilla.org/addons/2012/09/12/what-does-cant-access-dead-object-mean/)
+- [Les causes principales des fuites mémoire dans les extensions](/fr/docs/Extensions/Common_causes_of_memory_leaks_in_extensions)
+- [`Components.utils`](/fr/docs/Components.utils)
+- [Compartiments zombies](/en-US/docs/Mozilla/Zombie_compartments#Zombie_compartments)
diff --git a/files/fr/web/javascript/reference/errors/delete_in_strict_mode/index.html b/files/fr/web/javascript/reference/errors/delete_in_strict_mode/index.html
deleted file mode 100644
index 4451a729be..0000000000
--- a/files/fr/web/javascript/reference/errors/delete_in_strict_mode/index.html
+++ /dev/null
@@ -1,69 +0,0 @@
----
-title: >-
-  SyntaxError: applying the 'delete' operator to an unqualified name is
-  deprecated
-slug: Web/JavaScript/Reference/Errors/Delete_in_strict_mode
-tags:
-  - Erreurs
-  - JavaScript
-  - SyntaxError
-translation_of: Web/JavaScript/Reference/Errors/Delete_in_strict_mode
-original_slug: Web/JavaScript/Reference/Erreurs/Delete_in_strict_mode
----
-<div>{{jsSidebar("Errors")}}</div>
-
-<h2 id="Message">Message</h2>
-
-<pre class="syntaxbox">SyntaxError: Calling delete on expression not allowed in strict mode (Edge)
-SyntaxError: applying the 'delete' operator to an unqualified name is deprecated (Firefox)
-SyntaxError: Delete of an unqualified identifier in strict mode. (Chrome)
-</pre>
-
-<h2 id="Type_d'erreur">Type d'erreur</h2>
-
-<p>{{jsxref("SyntaxError")}}, uniquement en <a href="/fr/docs/Web/JavaScript/Reference/Strict_mode">mode strict</a>.</p>
-
-<h2 id="Quel_est_le_problème">Quel est le problème ?</h2>
-
-<p>Les variables JavaScript ne peuvent pas être supprimées grâce à l'opérateur <code><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_delete">delete</a></code>. En mode strict, toute tentative de suppression d'une variable lèvera une exception.</p>
-
-<p>L'opérateur <code>delete</code> sert uniquement à supprimer des propriétés sur un objet. Les propriétés d'un objet sont « qualifiées » si elles sont configurables.</p>
-
-<p>Contrairement à ce qu'on pourrait penser, l'opérateur <code>delete</code> n'a rien à voir avec la libération de la mémoire. La gestion de la mémoire se fait indirectement en cassant les références utilisées. Pour plus d'informations, consulter les pages sur <code><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_delete">delete</a></code> et <a href="/fr/docs/Web/JavaScript/Gestion_de_la_mémoire">la gestion de la mémoire en JavaScript</a>.</p>
-
-<p>Cette erreur ne se produit qu'en <a href="/fr/docs/Web/JavaScript/Reference/Strict_mode">mode strict</a>. En mode non-strict, l'opération renvoie simplement <code>false</code>.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<p>Essayer de supprimer une variable normale avec <code>delete</code> ne fonctionne pas, voire lève une exception en mode strict :</p>
-
-<pre class="brush: js example-bad">'use strict';
-
-var x;
-
-// ...
-
-delete x;
-
-// SyntaxError: applying the 'delete' operator to
-// an unqualified name is deprecated
-</pre>
-
-<p>Pour libérer le contenu d'une variable, on peut la passer à {{jsxref("null")}} :</p>
-
-<pre class="brush: js example-good">'use strict';
-
-var x;
-// ...
-x = null;
-
-// x peut être ramassée par le ramasse-miettes
-</pre>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><code><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_delete">delete</a></code></li>
- <li><a href="/fr/docs/Web/JavaScript/Gestion_de_la_mémoire">La gestion de la mémoire en JavaScript</a></li>
- <li><a href="/en-US/docs/Web/JavaScript/Reference/Errors/Cant_delete">TypeError: property "x" is non-configurable and can't be deleted</a></li>
-</ul>
diff --git a/files/fr/web/javascript/reference/errors/delete_in_strict_mode/index.md b/files/fr/web/javascript/reference/errors/delete_in_strict_mode/index.md
new file mode 100644
index 0000000000..19d3f9b747
--- /dev/null
+++ b/files/fr/web/javascript/reference/errors/delete_in_strict_mode/index.md
@@ -0,0 +1,68 @@
+---
+title: >-
+  SyntaxError: applying the 'delete' operator to an unqualified name is
+  deprecated
+slug: Web/JavaScript/Reference/Errors/Delete_in_strict_mode
+tags:
+  - Erreurs
+  - JavaScript
+  - SyntaxError
+translation_of: Web/JavaScript/Reference/Errors/Delete_in_strict_mode
+original_slug: Web/JavaScript/Reference/Erreurs/Delete_in_strict_mode
+---
+{{jsSidebar("Errors")}}
+
+## Message
+
+    SyntaxError: Calling delete on expression not allowed in strict mode (Edge)
+    SyntaxError: applying the 'delete' operator to an unqualified name is deprecated (Firefox)
+    SyntaxError: Delete of an unqualified identifier in strict mode. (Chrome)
+
+## Type d'erreur
+
+{{jsxref("SyntaxError")}}, uniquement en [mode strict](/fr/docs/Web/JavaScript/Reference/Strict_mode).
+
+## Quel est le problème ?
+
+Les variables JavaScript ne peuvent pas être supprimées grâce à l'opérateur [`delete`](/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_delete). En mode strict, toute tentative de suppression d'une variable lèvera une exception.
+
+L'opérateur `delete` sert uniquement à supprimer des propriétés sur un objet. Les propriétés d'un objet sont « qualifiées » si elles sont configurables.
+
+Contrairement à ce qu'on pourrait penser, l'opérateur `delete` n'a rien à voir avec la libération de la mémoire. La gestion de la mémoire se fait indirectement en cassant les références utilisées. Pour plus d'informations, consulter les pages sur [`delete`](/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_delete) et [la gestion de la mémoire en JavaScript](/fr/docs/Web/JavaScript/Gestion_de_la_mémoire).
+
+Cette erreur ne se produit qu'en [mode strict](/fr/docs/Web/JavaScript/Reference/Strict_mode). En mode non-strict, l'opération renvoie simplement `false`.
+
+## Exemples
+
+Essayer de supprimer une variable normale avec `delete` ne fonctionne pas, voire lève une exception en mode strict :
+
+```js example-bad
+'use strict';
+
+var x;
+
+// ...
+
+delete x;
+
+// SyntaxError: applying the 'delete' operator to
+// an unqualified name is deprecated
+```
+
+Pour libérer le contenu d'une variable, on peut la passer à {{jsxref("null")}} :
+
+```js example-good
+'use strict';
+
+var x;
+// ...
+x = null;
+
+// x peut être ramassée par le ramasse-miettes
+```
+
+## Voir aussi
+
+- [`delete`](/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_delete)
+- [La gestion de la mémoire en JavaScript](/fr/docs/Web/JavaScript/Gestion_de_la_mémoire)
+- [TypeError: property "x" is non-configurable and can't be deleted](/en-US/docs/Web/JavaScript/Reference/Errors/Cant_delete)
diff --git a/files/fr/web/javascript/reference/errors/deprecated_caller_or_arguments_usage/index.html b/files/fr/web/javascript/reference/errors/deprecated_caller_or_arguments_usage/index.html
deleted file mode 100644
index 669f4903a9..0000000000
--- a/files/fr/web/javascript/reference/errors/deprecated_caller_or_arguments_usage/index.html
+++ /dev/null
@@ -1,76 +0,0 @@
----
-title: 'ReferenceError: deprecated caller or arguments usage'
-slug: Web/JavaScript/Reference/Errors/Deprecated_caller_or_arguments_usage
-tags:
-  - Erreur
-  - JavaScript
-  - ReferenceError
-translation_of: Web/JavaScript/Reference/Errors/Deprecated_caller_or_arguments_usage
-original_slug: Web/JavaScript/Reference/Erreurs/Deprecated_caller_or_arguments_usage
----
-<div>{{jsSidebar("Errors")}}</div>
-
-<h2 id="Message">Message</h2>
-
-<pre class="syntaxbox">TypeError: 'arguments', 'callee' and 'caller' are restricted function properties and cannot be accessed in this context (Edge)
-Warning: ReferenceError: deprecated caller usage (Firefox)
-Warning: ReferenceError: deprecated arguments usage (Firefox)
-TypeError: 'callee' and 'caller' cannot be accessed in strict mode. (Safari)
-</pre>
-
-<h2 id="Type_d'erreur">Type d'erreur</h2>
-
-<p>Un avertissement uniquement affiché en mode strict qui prend la forme d'une {{jsxref("ReferenceError")}}. L'exécution du script JavaScript n'est pas interrompue.</p>
-
-<h2 id="Quel_est_le_problème">Quel est le problème ?</h2>
-
-<p><a href="/fr/docs/Web/JavaScript/Reference/Strict_mode">En mode strict</a>, les propriétés {{jsxref("Function.caller")}} et/ou {{jsxref("Function.arguments")}} sont utilisées alors qu'elles ne devraient pas l'être. Ces propriétés sont dépréciées car elles font fuiter des informations sur l'appelant de la fonction et ne sont pas standards. De plus, ces propriétés rendent certaines optimisations plus complexe et peuvent nuire aux performances.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Utilisation_de_function.caller_ou_de_arguments.callee.caller">Utilisation de <code>function.caller</code> ou de <code>arguments.callee.caller</code></h3>
-
-<p>{{jsxref("Function.caller")}} et <code><a href="/fr/docs/Web/JavaScript/Reference/Fonctions/arguments/callee">arguments.callee.caller</a></code> sont dépréciées (se référer aux articles de la référence pour plus d'informations).</p>
-
-<pre class="brush: js example-bad">"use strict";
-
-function myFunc() {
-  if (myFunc.caller == null) {
-    return 'La fonction a été appelée depuis la portée globale !';
-  } else {
-    return 'L\'appelant est ' + myFunc.caller;
-  }
-}
-
-myFunc();
-// Warning: ReferenceError: deprecated caller usage
-// "La fonction a été appelée depuis la portée globale !"</pre>
-
-<h3 id="Function.arguments"><code>Function.arguments</code></h3>
-
-<p>{{jsxref("Function.arguments")}} est dépréciée (se référer à l'article sur cette propriété pour plus d'informations).</p>
-
-<pre class="brush: js example-bad">"use strict";
-
-function f(n) { g(n - 1); }
-
-function g(n) {
-  console.log('before: ' + g.arguments[0]);
-  if (n &gt; 0) { f(n); }
-  console.log('after: ' + g.arguments[0]);
-}
-
-f(2);
-
-console.log('returned: ' + g.arguments);
-// Warning: ReferenceError: deprecated arguments usage
-</pre>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/JavaScript/Reference/Annexes/Fonctionnalités_dépréciées">Les fonctionnalités obsolètes et dépréciées</a></li>
- <li><a href="/fr/docs/Web/JavaScript/Reference/Strict_mode">Le mode strict</a></li>
- <li>{{jsxref("Function.arguments")}}</li>
- <li>{{jsxref("Function.caller")}} and <code><a href="/fr/docs/Web/JavaScript/Reference/Functions/arguments/callee">arguments.callee.caller</a></code></li>
-</ul>
diff --git a/files/fr/web/javascript/reference/errors/deprecated_caller_or_arguments_usage/index.md b/files/fr/web/javascript/reference/errors/deprecated_caller_or_arguments_usage/index.md
new file mode 100644
index 0000000000..d9aba3fe1e
--- /dev/null
+++ b/files/fr/web/javascript/reference/errors/deprecated_caller_or_arguments_usage/index.md
@@ -0,0 +1,76 @@
+---
+title: 'ReferenceError: deprecated caller or arguments usage'
+slug: Web/JavaScript/Reference/Errors/Deprecated_caller_or_arguments_usage
+tags:
+  - Erreur
+  - JavaScript
+  - ReferenceError
+translation_of: Web/JavaScript/Reference/Errors/Deprecated_caller_or_arguments_usage
+original_slug: Web/JavaScript/Reference/Erreurs/Deprecated_caller_or_arguments_usage
+---
+{{jsSidebar("Errors")}}
+
+## Message
+
+    TypeError: 'arguments', 'callee' and 'caller' are restricted function properties and cannot be accessed in this context (Edge)
+    Warning: ReferenceError: deprecated caller usage (Firefox)
+    Warning: ReferenceError: deprecated arguments usage (Firefox)
+    TypeError: 'callee' and 'caller' cannot be accessed in strict mode. (Safari)
+
+## Type d'erreur
+
+Un avertissement uniquement affiché en mode strict qui prend la forme d'une {{jsxref("ReferenceError")}}. L'exécution du script JavaScript n'est pas interrompue.
+
+## Quel est le problème ?
+
+[En mode strict](/fr/docs/Web/JavaScript/Reference/Strict_mode), les propriétés {{jsxref("Function.caller")}} et/ou {{jsxref("Function.arguments")}} sont utilisées alors qu'elles ne devraient pas l'être. Ces propriétés sont dépréciées car elles font fuiter des informations sur l'appelant de la fonction et ne sont pas standards. De plus, ces propriétés rendent certaines optimisations plus complexe et peuvent nuire aux performances.
+
+## Exemples
+
+### Utilisation de `function.caller` ou de `arguments.callee.caller`
+
+{{jsxref("Function.caller")}} et [`arguments.callee.caller`](/fr/docs/Web/JavaScript/Reference/Fonctions/arguments/callee) sont dépréciées (se référer aux articles de la référence pour plus d'informations).
+
+```js example-bad
+"use strict";
+
+function myFunc() {
+  if (myFunc.caller == null) {
+    return 'La fonction a été appelée depuis la portée globale !';
+  } else {
+    return 'L\'appelant est ' + myFunc.caller;
+  }
+}
+
+myFunc();
+// Warning: ReferenceError: deprecated caller usage
+// "La fonction a été appelée depuis la portée globale !"
+```
+
+### `Function.arguments`
+
+{{jsxref("Function.arguments")}} est dépréciée (se référer à l'article sur cette propriété pour plus d'informations).
+
+```js example-bad
+"use strict";
+
+function f(n) { g(n - 1); }
+
+function g(n) {
+  console.log('before: ' + g.arguments[0]);
+  if (n > 0) { f(n); }
+  console.log('after: ' + g.arguments[0]);
+}
+
+f(2);
+
+console.log('returned: ' + g.arguments);
+// Warning: ReferenceError: deprecated arguments usage
+```
+
+## Voir aussi
+
+- [Les fonctionnalités obsolètes et dépréciées](/fr/docs/JavaScript/Reference/Annexes/Fonctionnalités_dépréciées)
+- [Le mode strict](/fr/docs/Web/JavaScript/Reference/Strict_mode)
+- {{jsxref("Function.arguments")}}
+- {{jsxref("Function.caller")}} and [`arguments.callee.caller`](/fr/docs/Web/JavaScript/Reference/Functions/arguments/callee)
diff --git a/files/fr/web/javascript/reference/errors/deprecated_expression_closures/index.html b/files/fr/web/javascript/reference/errors/deprecated_expression_closures/index.html
deleted file mode 100644
index 5cd6889b74..0000000000
--- a/files/fr/web/javascript/reference/errors/deprecated_expression_closures/index.html
+++ /dev/null
@@ -1,80 +0,0 @@
----
-title: 'Warning: expression closures are deprecated'
-slug: Web/JavaScript/Reference/Errors/Deprecated_expression_closures
-tags:
-  - Avertissement
-  - JavaScript
-  - Warning
-translation_of: Web/JavaScript/Reference/Errors/Deprecated_expression_closures
-original_slug: Web/JavaScript/Reference/Erreurs/Deprecated_expression_closures
----
-<div>{{jsSidebar("Errors")}}</div>
-
-<h2 id="Message">Message</h2>
-
-<pre class="syntaxbox">Warning: expression closures are deprecated
-</pre>
-
-<h2 id="Type_d'erreur">Type d'erreur</h2>
-
-<p>Un avertissement, l'exécution du code JavaScript ne sera pas interrompue.</p>
-
-<h2 id="Quel_est_le_problème">Quel est le problème ?</h2>
-
-<p>La syntaxe non-standard avec <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Expression_closures">une expression de fermeture</a> est dépréciée et ne devrait plus être utilisée. Cette syntaxe sera complètement retirée avec le bug {{bug(1083458)}} et les scripts qui l'utilisent déclencheront alors une exception {{jsxref("SyntaxError")}}.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Syntaxe_dépréciée">Syntaxe dépréciée</h3>
-
-<p>Les expression de fermeture permettent de ne pas utiliser les accolades ou les instructions <code>return</code> au sein d'une déclaration de fonction ou pour une définition de méthode dans un objet.</p>
-
-<pre class="brush: js example-bad">var x = function() 1;
-
-var obj = {
-  count: function() 1
-};
-</pre>
-
-<h3 id="Syntaxe_standard">Syntaxe standard</h3>
-
-<p>Pour convertir cette syntaxe non-standard en une syntaxe standard, il suffit d'ajouter des accolades et l'instruction return.</p>
-
-<pre class="brush: js example-good">var x = function() { return 1; }
-
-var obj = {
-  count: function() { return 1; }
-};
-</pre>
-
-<h3 id="Syntaxe_standard_avec_les_fonctions_fléchées">Syntaxe standard avec les fonctions fléchées</h3>
-
-<p>On peut aussi utiliser <a href="/fr/docs/Web/JavaScript/Reference/Fonctions/Fonctions_fléchées">les fonctions fléchées</a> :</p>
-
-<pre class="brush: js example-good">var x = () =&gt; 1;</pre>
-
-<h3 id="Syntaxe_standard_avec_la_notation_raccourcie_pour_les_méthodes">Syntaxe standard avec la notation raccourcie pour les méthodes</h3>
-
-<p>On retrouve parfois les expressions de fermeture dans les accesseurs et les mutateurs, par exemple :</p>
-
-<pre class="brush: js example-bad">var obj = {
-  get x() 1,
-  set x(v) this.v = v
-};
-</pre>
-
-<p>Grâce aux <a href="/fr/docs/Web/JavaScript/Reference/Fonctions/Définition_de_méthode">définitions de méthodes</a> ES2015, on peut convertir le fragment de code précédent en :</p>
-
-<pre class="brush: js example-good">var obj = {
-  get x() { return 1 },
-  set x(v) { this.v = v }
-};
-</pre>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Expression_closures">Les expressions de fermeture</a></li>
- <li><a href="/fr/docs/Web/JavaScript/Reference/Fonctions/Fonctions_fléchées">Les fonctions fléchées</a></li>
- <li><a href="/fr/docs/Web/JavaScript/Reference/Fonctions/Définition_de_méthode">Les définitions de méthode</a></li>
-</ul>
diff --git a/files/fr/web/javascript/reference/errors/deprecated_expression_closures/index.md b/files/fr/web/javascript/reference/errors/deprecated_expression_closures/index.md
new file mode 100644
index 0000000000..8f709e61a9
--- /dev/null
+++ b/files/fr/web/javascript/reference/errors/deprecated_expression_closures/index.md
@@ -0,0 +1,83 @@
+---
+title: 'Warning: expression closures are deprecated'
+slug: Web/JavaScript/Reference/Errors/Deprecated_expression_closures
+tags:
+  - Avertissement
+  - JavaScript
+  - Warning
+translation_of: Web/JavaScript/Reference/Errors/Deprecated_expression_closures
+original_slug: Web/JavaScript/Reference/Erreurs/Deprecated_expression_closures
+---
+{{jsSidebar("Errors")}}
+
+## Message
+
+    Warning: expression closures are deprecated
+
+## Type d'erreur
+
+Un avertissement, l'exécution du code JavaScript ne sera pas interrompue.
+
+## Quel est le problème ?
+
+La syntaxe non-standard avec [une expression de fermeture](/fr/docs/Web/JavaScript/Reference/Opérateurs/Expression_closures) est dépréciée et ne devrait plus être utilisée. Cette syntaxe sera complètement retirée avec le bug {{bug(1083458)}} et les scripts qui l'utilisent déclencheront alors une exception {{jsxref("SyntaxError")}}.
+
+## Exemples
+
+### Syntaxe dépréciée
+
+Les expression de fermeture permettent de ne pas utiliser les accolades ou les instructions `return` au sein d'une déclaration de fonction ou pour une définition de méthode dans un objet.
+
+```js example-bad
+var x = function() 1;
+
+var obj = {
+  count: function() 1
+};
+```
+
+### Syntaxe standard
+
+Pour convertir cette syntaxe non-standard en une syntaxe standard, il suffit d'ajouter des accolades et l'instruction return.
+
+```js example-good
+var x = function() { return 1; }
+
+var obj = {
+  count: function() { return 1; }
+};
+```
+
+### Syntaxe standard avec les fonctions fléchées
+
+On peut aussi utiliser [les fonctions fléchées](/fr/docs/Web/JavaScript/Reference/Fonctions/Fonctions_fléchées) :
+
+```js example-good
+var x = () => 1;
+```
+
+### Syntaxe standard avec la notation raccourcie pour les méthodes
+
+On retrouve parfois les expressions de fermeture dans les accesseurs et les mutateurs, par exemple :
+
+```js example-bad
+var obj = {
+  get x() 1,
+  set x(v) this.v = v
+};
+```
+
+Grâce aux [définitions de méthodes](/fr/docs/Web/JavaScript/Reference/Fonctions/Définition_de_méthode) ES2015, on peut convertir le fragment de code précédent en :
+
+```js example-good
+var obj = {
+  get x() { return 1 },
+  set x(v) { this.v = v }
+};
+```
+
+## Voir aussi
+
+- [Les expressions de fermeture](/fr/docs/Web/JavaScript/Reference/Opérateurs/Expression_closures)
+- [Les fonctions fléchées](/fr/docs/Web/JavaScript/Reference/Fonctions/Fonctions_fléchées)
+- [Les définitions de méthode](/fr/docs/Web/JavaScript/Reference/Fonctions/Définition_de_méthode)
diff --git a/files/fr/web/javascript/reference/errors/deprecated_octal/index.html b/files/fr/web/javascript/reference/errors/deprecated_octal/index.html
deleted file mode 100644
index 067c0a363a..0000000000
--- a/files/fr/web/javascript/reference/errors/deprecated_octal/index.html
+++ /dev/null
@@ -1,69 +0,0 @@
----
-title: 'SyntaxError: "0"-prefixed octal literals and octal escape seq. are deprecated'
-slug: Web/JavaScript/Reference/Errors/Deprecated_octal
-tags:
-  - Erreurs
-  - JavaScript
-  - Mode strict
-  - SyntaxError
-translation_of: Web/JavaScript/Reference/Errors/Deprecated_octal
-original_slug: Web/JavaScript/Reference/Erreurs/Deprecated_octal
----
-<div>{{jsSidebar("Errors")}}</div>
-
-<h2 id="Message">Message</h2>
-
-<pre class="syntaxbox">SyntaxError: Octal numeric literals and escape characters not allowed in strict mode (Edge)
-SyntaxError:
-"0"-prefixed octal literals and octal escape sequences are deprecated;
-for octal literals use the "0o" prefix instead
-</pre>
-
-<h2 id="Type_d'erreur">Type d'erreur</h2>
-
-<p>{{jsxref("SyntaxError")}}, uniquement en <a href="/fr/docs/Web/JavaScript/Reference/Strict_mode">mode strict</a>.</p>
-
-<h2 id="Quel_est_le_problème">Quel est le problème ?</h2>
-
-<p>Les littéraux en base octale et les séquences d'échappement octales sont dépréciées et lèvent une exception {{jsxref("SyntaxError")}} en mode strict. À partir d'ECMAScript 2015, la syntaxe standard utilise un zéro suivi de la lettre « o » (en minuscule ou en majuscule) (<code>0o</code> or <code>0O)</code>.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Littéraux_en_base_octale_préfixés_par_0">Littéraux en base octale préfixés par 0</h3>
-
-<pre class="brush: js example-bad">"use strict";
-
-03;
-
-// SyntaxError: "0"-prefixed octal literals and octal escape sequences
-// are deprecated</pre>
-
-<h3 id="Séquences_d'échappement_en_base_octale">Séquences d'échappement en base octale</h3>
-
-<pre class="brush: js example-bad">"use strict";
-
-"\251";
-
-// SyntaxError: "0"-prefixed octal literals and octal escape sequences
-// are deprecated
-</pre>
-
-<h3 id="Littéraux_valides">Littéraux valides</h3>
-
-<p>Pour former un littéral en base octal, on pourra utiliser un zéro suivi de la lettre « o » :</p>
-
-<pre class="brush: js example-good">0o3;
-</pre>
-
-<p>Pour former une séquence d'échappement en base octale, on écrira une séquence d'échappement en base hexadécimale :</p>
-
-<pre class="brush: js example-good">'\xA9';</pre>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/JavaScript/Reference/Grammaire_lexicale#Octaux">La grammaire lexicale JavaScript</a></li>
- <li>
-  <p><a href="/fr/docs/Web/JavaScript/Reference/Erreurs/Bad_octal">Warning: 08/09 is not a legal ECMA-262 octal constant</a></p>
- </li>
-</ul>
diff --git a/files/fr/web/javascript/reference/errors/deprecated_octal/index.md b/files/fr/web/javascript/reference/errors/deprecated_octal/index.md
new file mode 100644
index 0000000000..9b9b9c92f6
--- /dev/null
+++ b/files/fr/web/javascript/reference/errors/deprecated_octal/index.md
@@ -0,0 +1,70 @@
+---
+title: 'SyntaxError: "0"-prefixed octal literals and octal escape seq. are deprecated'
+slug: Web/JavaScript/Reference/Errors/Deprecated_octal
+tags:
+  - Erreurs
+  - JavaScript
+  - Mode strict
+  - SyntaxError
+translation_of: Web/JavaScript/Reference/Errors/Deprecated_octal
+original_slug: Web/JavaScript/Reference/Erreurs/Deprecated_octal
+---
+{{jsSidebar("Errors")}}
+
+## Message
+
+    SyntaxError: Octal numeric literals and escape characters not allowed in strict mode (Edge)
+    SyntaxError:
+    "0"-prefixed octal literals and octal escape sequences are deprecated;
+    for octal literals use the "0o" prefix instead
+
+## Type d'erreur
+
+{{jsxref("SyntaxError")}}, uniquement en [mode strict](/fr/docs/Web/JavaScript/Reference/Strict_mode).
+
+## Quel est le problème ?
+
+Les littéraux en base octale et les séquences d'échappement octales sont dépréciées et lèvent une exception {{jsxref("SyntaxError")}} en mode strict. À partir d'ECMAScript 2015, la syntaxe standard utilise un zéro suivi de la lettre « o » (en minuscule ou en majuscule) (`0o` or `0O)`.
+
+## Exemples
+
+### Littéraux en base octale préfixés par 0
+
+```js example-bad
+"use strict";
+
+03;
+
+// SyntaxError: "0"-prefixed octal literals and octal escape sequences
+// are deprecated
+```
+
+### Séquences d'échappement en base octale
+
+```js example-bad
+"use strict";
+
+"\251";
+
+// SyntaxError: "0"-prefixed octal literals and octal escape sequences
+// are deprecated
+```
+
+### Littéraux valides
+
+Pour former un littéral en base octal, on pourra utiliser un zéro suivi de la lettre « o » :
+
+```js example-good
+0o3;
+```
+
+Pour former une séquence d'échappement en base octale, on écrira une séquence d'échappement en base hexadécimale :
+
+```js example-good
+'\xA9';
+```
+
+## Voir aussi
+
+- [La grammaire lexicale JavaScript](/fr/docs/Web/JavaScript/Reference/Grammaire_lexicale#Octaux)
+- [Warning: 08/09 is not a legal ECMA-262 octal constant](/fr/docs/Web/JavaScript/Reference/Erreurs/Bad_octal)
diff --git a/files/fr/web/javascript/reference/errors/deprecated_source_map_pragma/index.html b/files/fr/web/javascript/reference/errors/deprecated_source_map_pragma/index.html
deleted file mode 100644
index 8d36de23af..0000000000
--- a/files/fr/web/javascript/reference/errors/deprecated_source_map_pragma/index.html
+++ /dev/null
@@ -1,59 +0,0 @@
----
-title: >-
-  SyntaxError: Using //@ to indicate sourceURL pragmas is deprecated. Use //#
-  instead
-slug: Web/JavaScript/Reference/Errors/Deprecated_source_map_pragma
-tags:
-  - Erreurs
-  - JavaScript
-  - SyntaxError
-translation_of: Web/JavaScript/Reference/Errors/Deprecated_source_map_pragma
-original_slug: Web/JavaScript/Reference/Erreurs/Deprecated_source_map_pragma
----
-<div>{{jsSidebar("Errors")}}</div>
-
-<h2 id="Message">Message</h2>
-
-<pre class="syntaxbox">Warning: SyntaxError: Using //@ to indicate sourceURL pragmas is deprecated. Use //# instead
-
-Warning: SyntaxError: Using //@ to indicate sourceMappingURL pragmas is deprecated. Use //# instead
-</pre>
-
-<h2 id="Type_d'erreur">Type d'erreur</h2>
-
-<p>Un avertissement prenant la forme d'une exception {{jsxref("SyntaxError")}}. L'exécution du code JavaScript n'est pas interrompue.</p>
-
-<h2 id="Quel_est_le_problème">Quel est le problème ?</h2>
-
-<p>Une syntaxe dépréciée a été utilisée pour indiquer une correspondance de source (<em>source map</em>) dans le code JavaScript.</p>
-
-<p>Il arrive souvent que les fichiers sources JavaScript soient combinés et minifiés afin que le transfert depuis le serveur vers le client soit plus efficace. Grâce <a href="http://www.html5rocks.com/en/tutorials/developertools/sourcemaps/">aux correspondances de source (ou <em>source maps</em>)</a>, le débogueur peut utiliser les sources des fichiers correspondants aux fichiers minifiés.</p>
-
-<p>La spécification sur cet outil a évolué car il existait un conflit de syntaxe avec IE (après <code>//@cc_on</code>, la correspondance était interprétée comme un test conditionnel de compilation du moteur JScript).<a href="https://msdn.microsoft.com/en-us/library/8ka90k2e%28v=vs.94%29.aspx"> Ce commentaire de compilation conditionnelle</a> pour IE est peu connu mais son existence entraînait des erreurs avec <a href="https://bugs.jquery.com/ticket/13274">jQuery</a> et d'autres bibliothèques.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Syntaxe_dépréciée">Syntaxe dépréciée</h3>
-
-<p>La syntaxe utilisant l'arobase (@) est dépréciée :</p>
-
-<pre class="brush: js example-bad">//@ sourceMappingURL=http://exemple.com/chemin/vers/la/sourcemap.map
-</pre>
-
-<h3 id="Syntaxe_standard">Syntaxe standard</h3>
-
-<p>Il faut utiliser le dièse (#) :</p>
-
-<pre class="brush: js example-good">//# sourceMappingURL=http://exemple.com/chemin/vers/la/sourcemap.map</pre>
-
-<p>Autrement, on peut indiquer la correspondance dans un en-tête {{HTTPHeader("SourceMap")}} pour servir le fichier JavaScript afin d'éviter tout commentaire :</p>
-
-<pre class="brush: js example-good">X-SourceMap: /path/to/file.js.map</pre>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Outils/Débogueur/Comment/Utiliser_une_source_map">Comment utiliser les <em>source map</em> – Documentation des outils Firefox</a></li>
- <li><a href="http://www.html5rocks.com/en/tutorials/developertools/sourcemaps/">Introduction to source maps – HTML5 rocks</a></li>
- <li>{{HTTPHeader("SourceMap")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/errors/deprecated_source_map_pragma/index.md b/files/fr/web/javascript/reference/errors/deprecated_source_map_pragma/index.md
new file mode 100644
index 0000000000..f08481d96a
--- /dev/null
+++ b/files/fr/web/javascript/reference/errors/deprecated_source_map_pragma/index.md
@@ -0,0 +1,61 @@
+---
+title: >-
+  SyntaxError: Using //@ to indicate sourceURL pragmas is deprecated. Use //#
+  instead
+slug: Web/JavaScript/Reference/Errors/Deprecated_source_map_pragma
+tags:
+  - Erreurs
+  - JavaScript
+  - SyntaxError
+translation_of: Web/JavaScript/Reference/Errors/Deprecated_source_map_pragma
+original_slug: Web/JavaScript/Reference/Erreurs/Deprecated_source_map_pragma
+---
+{{jsSidebar("Errors")}}
+
+## Message
+
+    Warning: SyntaxError: Using //@ to indicate sourceURL pragmas is deprecated. Use //# instead
+
+    Warning: SyntaxError: Using //@ to indicate sourceMappingURL pragmas is deprecated. Use //# instead
+
+## Type d'erreur
+
+Un avertissement prenant la forme d'une exception {{jsxref("SyntaxError")}}. L'exécution du code JavaScript n'est pas interrompue.
+
+## Quel est le problème ?
+
+Une syntaxe dépréciée a été utilisée pour indiquer une correspondance de source (_source map_) dans le code JavaScript.
+
+Il arrive souvent que les fichiers sources JavaScript soient combinés et minifiés afin que le transfert depuis le serveur vers le client soit plus efficace. Grâce [aux correspondances de source (ou _source maps_)](http://www.html5rocks.com/en/tutorials/developertools/sourcemaps/), le débogueur peut utiliser les sources des fichiers correspondants aux fichiers minifiés.
+
+La spécification sur cet outil a évolué car il existait un conflit de syntaxe avec IE (après `//@cc_on`, la correspondance était interprétée comme un test conditionnel de compilation du moteur JScript).[ Ce commentaire de compilation conditionnelle](https://msdn.microsoft.com/en-us/library/8ka90k2e%28v=vs.94%29.aspx) pour IE est peu connu mais son existence entraînait des erreurs avec [jQuery](https://bugs.jquery.com/ticket/13274) et d'autres bibliothèques.
+
+## Exemples
+
+### Syntaxe dépréciée
+
+La syntaxe utilisant l'arobase (@) est dépréciée :
+
+```js example-bad
+//@ sourceMappingURL=http://exemple.com/chemin/vers/la/sourcemap.map
+```
+
+### Syntaxe standard
+
+Il faut utiliser le dièse (#) :
+
+```js example-good
+//# sourceMappingURL=http://exemple.com/chemin/vers/la/sourcemap.map
+```
+
+Autrement, on peut indiquer la correspondance dans un en-tête {{HTTPHeader("SourceMap")}} pour servir le fichier JavaScript afin d'éviter tout commentaire :
+
+```js example-good
+X-SourceMap: /path/to/file.js.map
+```
+
+## Voir aussi
+
+- [Comment utiliser les _source map_ – Documentation des outils Firefox](/fr/docs/Outils/Débogueur/Comment/Utiliser_une_source_map)
+- [Introduction to source maps – HTML5 rocks](http://www.html5rocks.com/en/tutorials/developertools/sourcemaps/)
+- {{HTTPHeader("SourceMap")}}
diff --git a/files/fr/web/javascript/reference/errors/deprecated_string_generics/index.html b/files/fr/web/javascript/reference/errors/deprecated_string_generics/index.html
deleted file mode 100644
index f348c0b4d8..0000000000
--- a/files/fr/web/javascript/reference/errors/deprecated_string_generics/index.html
+++ /dev/null
@@ -1,106 +0,0 @@
----
-title: 'Warning: String.x is deprecated; use String.prototype.x instead'
-slug: Web/JavaScript/Reference/Errors/Deprecated_String_generics
-tags:
-  - Avertissement
-  - JavaScript
-  - Warning
-translation_of: Web/JavaScript/Reference/Errors/Deprecated_String_generics
-original_slug: Web/JavaScript/Reference/Erreurs/Deprecated_String_generics
----
-<div>{{jsSidebar("Errors")}}</div>
-
-<div>Les méthodes génériques pour les chaînes de caractères ont été retirées à partir de Firefox 68.</div>
-
-<h2 id="Message">Message</h2>
-
-<pre class="syntaxbox">Warning: String.charAt            is deprecated; use String.prototype.charAt            instead
-Warning: String.charCodeAt        is deprecated; use String.prototype.charCodeAt        instead
-Warning: String.concat            is deprecated; use String.prototype.concat            instead
-Warning: String.contains          is deprecated; use String.prototype.contains          instead
-Warning: String.endsWith          is deprecated; use String.prototype.endsWith          instead
-Warning: String.includes          is deprecated; use String.prototype.includes          instead
-Warning: String.indexOf           is deprecated; use String.prototype.indexOf           instead
-Warning: String.lastIndexOf       is deprecated; use String.prototype.lastIndexOf       instead
-Warning: String.localeCompare     is deprecated; use String.prototype.localeCompare     instead
-Warning: String.match             is deprecated; use String.prototype.match             instead
-Warning: String.normalize         is deprecated; use String.prototype.normalize         instead
-Warning: String.replace           is deprecated; use String.prototype.replace           instead
-Warning: String.search            is deprecated; use String.prototype.search            instead
-Warning: String.slice             is deprecated; use String.prototype.slice             instead
-Warning: String.split             is deprecated; use String.prototype.split             instead
-Warning: String.startsWith        is deprecated; use String.prototype.startsWith        instead
-Warning: String.substr            is deprecated; use String.prototype.substr            instead
-Warning: String.substring         is deprecated; use String.prototype.substring         instead
-Warning: String.toLocaleLowerCase is deprecated; use String.prototype.toLocaleLowerCase instead
-Warning: String.toLocaleUpperCase is deprecated; use String.prototype.toLocaleUpperCase instead
-Warning: String.toLowerCase       is deprecated; use String.prototype.toLowerCase       instead
-Warning: String.toUpperCase       is deprecated; use String.prototype.toUpperCase       instead
-Warning: String.trim              is deprecated; use String.prototype.trim              instead
-Warning: String.trimLeft          is deprecated; use String.prototype.trimLeft          instead
-Warning: String.trimRight         is deprecated; use String.prototype.trimRight         instead
-</pre>
-
-<h2 id="Type_d'erreur">Type d'erreur</h2>
-
-<p>Un avertissement, l'exécution du script n'est pas interrompue.</p>
-
-<h2 id="Quel_est_le_problème">Quel est le problème ?</h2>
-
-<p>Les méthodes génériques non-standards de {{jsxref("String")}} sont dépréciées et ont été retirées à partir de Firefox 68 (il n'y a pas de prise en charge des navigateurs en dehors de Firefox). Les méthodes génériques sont des méthodes utilisées pour manipuler les instances de ce type d'objet et qui sont disponibles sur l'objet <code>String</code>, ce qui permet de les appliquer à n'importe quel objet.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Syntaxe_dépréciée">Syntaxe dépréciée</h3>
-
-<pre class="brush: js example-bad">var num = 15;
-String.replace(num, /5/, '2');</pre>
-
-<h3 id="Syntaxe_standard">Syntaxe standard</h3>
-
-<pre class="brush: js example-good">var num = 15;
-String(num).replace(/5/, '2');
-</pre>
-
-<h2 id="Shim">Shim</h2>
-
-<p>Voici une méthode qui permet d'avoir les méthodes génériques au sein des navigateurs qui ne les prennent pas en charge :</p>
-
-<pre class="brush: js">/*globals define*/
-// Assumes all supplied String instance methods already present
-// (one may use shims for these if not available)
-(function() {
-  'use strict';
-
-  var i,
-    // We could also build the array of methods with the following, but the
-    //   getOwnPropertyNames() method is non-shimable:
-    // Object.getOwnPropertyNames(String).filter(function(methodName) {
-    //   return typeof String[methodName] === 'function';
-    // });
-    methods = [
-      'contains', 'substring', 'toLowerCase', 'toUpperCase', 'charAt',
-      'charCodeAt', 'indexOf', 'lastIndexOf', 'startsWith', 'endsWith',
-      'trim', 'trimLeft', 'trimRight', 'toLocaleLowerCase', 'normalize',
-      'toLocaleUpperCase', 'localeCompare', 'match', 'search', 'slice',
-      'replace', 'split', 'substr', 'concat', 'localeCompare'
-    ],
-    methodCount = methods.length,
-    assignStringGeneric = function(methodName) {
-      var method = String.prototype[methodName];
-      String[methodName] = function(arg1) {
-        return method.apply(arg1, Array.prototype.slice.call(arguments, 1));
-      };
-    };
-
-  for (i = 0; i &lt; methodCount; i++) {
-    assignStringGeneric(methods[i]);
-  }
-}());</pre>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("String")}}</li>
- <li><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array#Les_méthodes_génériques_de_manipulation_de_tableaux">Les méthodes génériques pour les tableaux</a> (également dépréciées).</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/errors/deprecated_string_generics/index.md b/files/fr/web/javascript/reference/errors/deprecated_string_generics/index.md
new file mode 100644
index 0000000000..fa9305c553
--- /dev/null
+++ b/files/fr/web/javascript/reference/errors/deprecated_string_generics/index.md
@@ -0,0 +1,106 @@
+---
+title: 'Warning: String.x is deprecated; use String.prototype.x instead'
+slug: Web/JavaScript/Reference/Errors/Deprecated_String_generics
+tags:
+  - Avertissement
+  - JavaScript
+  - Warning
+translation_of: Web/JavaScript/Reference/Errors/Deprecated_String_generics
+original_slug: Web/JavaScript/Reference/Erreurs/Deprecated_String_generics
+---
+{{jsSidebar("Errors")}}Les méthodes génériques pour les chaînes de caractères ont été retirées à partir de Firefox 68.
+
+## Message
+
+    Warning: String.charAt            is deprecated; use String.prototype.charAt            instead
+    Warning: String.charCodeAt        is deprecated; use String.prototype.charCodeAt        instead
+    Warning: String.concat            is deprecated; use String.prototype.concat            instead
+    Warning: String.contains          is deprecated; use String.prototype.contains          instead
+    Warning: String.endsWith          is deprecated; use String.prototype.endsWith          instead
+    Warning: String.includes          is deprecated; use String.prototype.includes          instead
+    Warning: String.indexOf           is deprecated; use String.prototype.indexOf           instead
+    Warning: String.lastIndexOf       is deprecated; use String.prototype.lastIndexOf       instead
+    Warning: String.localeCompare     is deprecated; use String.prototype.localeCompare     instead
+    Warning: String.match             is deprecated; use String.prototype.match             instead
+    Warning: String.normalize         is deprecated; use String.prototype.normalize         instead
+    Warning: String.replace           is deprecated; use String.prototype.replace           instead
+    Warning: String.search            is deprecated; use String.prototype.search            instead
+    Warning: String.slice             is deprecated; use String.prototype.slice             instead
+    Warning: String.split             is deprecated; use String.prototype.split             instead
+    Warning: String.startsWith        is deprecated; use String.prototype.startsWith        instead
+    Warning: String.substr            is deprecated; use String.prototype.substr            instead
+    Warning: String.substring         is deprecated; use String.prototype.substring         instead
+    Warning: String.toLocaleLowerCase is deprecated; use String.prototype.toLocaleLowerCase instead
+    Warning: String.toLocaleUpperCase is deprecated; use String.prototype.toLocaleUpperCase instead
+    Warning: String.toLowerCase       is deprecated; use String.prototype.toLowerCase       instead
+    Warning: String.toUpperCase       is deprecated; use String.prototype.toUpperCase       instead
+    Warning: String.trim              is deprecated; use String.prototype.trim              instead
+    Warning: String.trimLeft          is deprecated; use String.prototype.trimLeft          instead
+    Warning: String.trimRight         is deprecated; use String.prototype.trimRight         instead
+
+## Type d'erreur
+
+Un avertissement, l'exécution du script n'est pas interrompue.
+
+## Quel est le problème ?
+
+Les méthodes génériques non-standards de {{jsxref("String")}} sont dépréciées et ont été retirées à partir de Firefox 68 (il n'y a pas de prise en charge des navigateurs en dehors de Firefox). Les méthodes génériques sont des méthodes utilisées pour manipuler les instances de ce type d'objet et qui sont disponibles sur l'objet `String`, ce qui permet de les appliquer à n'importe quel objet.
+
+## Exemples
+
+### Syntaxe dépréciée
+
+```js example-bad
+var num = 15;
+String.replace(num, /5/, '2');
+```
+
+### Syntaxe standard
+
+```js example-good
+var num = 15;
+String(num).replace(/5/, '2');
+```
+
+## Shim
+
+Voici une méthode qui permet d'avoir les méthodes génériques au sein des navigateurs qui ne les prennent pas en charge :
+
+```js
+/*globals define*/
+// Assumes all supplied String instance methods already present
+// (one may use shims for these if not available)
+(function() {
+  'use strict';
+
+  var i,
+    // We could also build the array of methods with the following, but the
+    //   getOwnPropertyNames() method is non-shimable:
+    // Object.getOwnPropertyNames(String).filter(function(methodName) {
+    //   return typeof String[methodName] === 'function';
+    // });
+    methods = [
+      'contains', 'substring', 'toLowerCase', 'toUpperCase', 'charAt',
+      'charCodeAt', 'indexOf', 'lastIndexOf', 'startsWith', 'endsWith',
+      'trim', 'trimLeft', 'trimRight', 'toLocaleLowerCase', 'normalize',
+      'toLocaleUpperCase', 'localeCompare', 'match', 'search', 'slice',
+      'replace', 'split', 'substr', 'concat', 'localeCompare'
+    ],
+    methodCount = methods.length,
+    assignStringGeneric = function(methodName) {
+      var method = String.prototype[methodName];
+      String[methodName] = function(arg1) {
+        return method.apply(arg1, Array.prototype.slice.call(arguments, 1));
+      };
+    };
+
+  for (i = 0; i < methodCount; i++) {
+    assignStringGeneric(methods[i]);
+  }
+}());
+```
+
+## Voir aussi
+
+- {{jsxref("String")}}
+- [Les méthodes génériques pour les tableaux](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array#Les_méthodes_génériques_de_manipulation_de_tableaux) (également dépréciées).
diff --git a/files/fr/web/javascript/reference/errors/deprecated_tolocaleformat/index.html b/files/fr/web/javascript/reference/errors/deprecated_tolocaleformat/index.html
deleted file mode 100644
index 444295566c..0000000000
--- a/files/fr/web/javascript/reference/errors/deprecated_tolocaleformat/index.html
+++ /dev/null
@@ -1,92 +0,0 @@
----
-title: 'Warning: Date.prototype.toLocaleFormat is deprecated'
-slug: Web/JavaScript/Reference/Errors/Deprecated_toLocaleFormat
-tags:
-  - Avertissement
-  - JavaScript
-  - Warning
-translation_of: Web/JavaScript/Reference/Errors/Deprecated_toLocaleFormat
-original_slug: Web/JavaScript/Reference/Erreurs/Deprecated_toLocaleFormat
----
-<div>{{jsSidebar("Errors")}}</div>
-
-<h2 id="Message">Message</h2>
-
-<pre class="syntaxbox">Warning: Date.prototype.toLocaleFormat is deprecated; consider using Intl.DateTimeFormat instead
-</pre>
-
-<h2 id="Type_d'erreur">Type d'erreur</h2>
-
-<p>Un avertissement, l'exécution du script JavaScript n'est pas interrompue.</p>
-
-<h2 id="Quel_est_le_problème">Quel est le problème ?</h2>
-
-<p>La méthode non-standard {{jsxref("Date.prototype.toLocaleFormat")}} est dépréciée et ne devrait plus être utilisée. Elle utilise une chaîne de caractères qui indique le format avec la même syntaxe que la fonction <code>strftime()</code> en C. Cette fonction n'est plus disponible à partir de Firefox 58.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Syntaxe_dépréciée">Syntaxe dépréciée</h3>
-
-<p>La méthode {{jsxref("Date.prototype.toLocaleFormat")}} est dépréciée et sera retirée (aucune prise en charge par les autres navigateurs en dehors de Firefox).</p>
-
-<pre class="brush: js example-bad">var today = new Date();
-var date = today.toLocaleFormat('%A %e %B %Y');
-
-console.log(date);
-// En français
-// "Vendredi 10 mars 2017"</pre>
-
-<h3 id="Utiliser_une_syntaxe_standard_grâce_à_l'API_ECMAScript_Intl">Utiliser une syntaxe standard grâce à l'API ECMAScript Intl</h3>
-
-<p>Le standard ECMA-402 (l'API ECMAScript Intl) définit des objets et méthodes standards qui permettent de mettre en forme des dates et heures (disponible à partir de Chrome 24, de Firefox 29, d'IE11 et de  Safari10).</p>
-
-<p>Si on souhaite uniquement formater une date, on pourra utiliser la méthode {{jsxref("Date.prototype.toLocaleDateString")}}.</p>
-
-<pre class="brush: js example-good">var today = new Date();
-var options = { weekday: 'long', year: 'numeric',
-                month: 'long', day: 'numeric' };
-var date = today.toLocaleDateString('fr-FR', options);
-
-console.log(date);
-// "Vendredi 10 mars 2017"
-</pre>
-
-<p>Si on manipule plus de dates, on peut utiliser l'objet {{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}} qui permet de mettre en cache certains des calculs afin d'avoir une mise en forme rapide (ce qui s'avère utile lorsqu'on a une boucle par exemple) :</p>
-
-<pre class="brush: js example-good">var options = { weekday: 'long', year: 'numeric',
-                month: 'long', day: 'numeric' };
-var dateFormatter = new Intl.DateTimeFormat('de-DE', options)
-
-var dates = [Date.UTC(2012, 11, 20, 3, 0, 0),
-             Date.UTC(2014, 04, 12, 8, 0, 0)];
-
-dates.forEach(date =&gt; console.log(dateFormatter.format(date)));
-
-// "Donnerstag, 20. Dezember 2012"
-// "Montag, 12. Mai 2014"
-</pre>
-
-<h3 id="Utiliser_les_méthodes_de_l'objet_Date">Utiliser les méthodes de l'objet <code>Date</code></h3>
-
-<p>L'objet {{jsxref("Date")}} dispose de plusieurs méthodes qui permettent de construire une chaîne de caractères pour une date donnée. Ainsi</p>
-
-<pre class="brush: js example-bad">(new Date()).toLocaleFormat("%Y%m%d");
-// "20170310"
-</pre>
-
-<p>Pourra être converti en :</p>
-
-<pre class="brush: js example-good">let now = new Date();
-let date = now.getFullYear() * 10000 +
-          (now.getMonth() + 1) * 100 + now.getDate();
-
-console.log(date);
-// "20170310"</pre>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Date.prototype.toLocaleFormat")}}</li>
- <li>{{jsxref("Date.prototype.toLocaleDateString")}}</li>
- <li>{{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/errors/deprecated_tolocaleformat/index.md b/files/fr/web/javascript/reference/errors/deprecated_tolocaleformat/index.md
new file mode 100644
index 0000000000..362fb57677
--- /dev/null
+++ b/files/fr/web/javascript/reference/errors/deprecated_tolocaleformat/index.md
@@ -0,0 +1,96 @@
+---
+title: 'Warning: Date.prototype.toLocaleFormat is deprecated'
+slug: Web/JavaScript/Reference/Errors/Deprecated_toLocaleFormat
+tags:
+  - Avertissement
+  - JavaScript
+  - Warning
+translation_of: Web/JavaScript/Reference/Errors/Deprecated_toLocaleFormat
+original_slug: Web/JavaScript/Reference/Erreurs/Deprecated_toLocaleFormat
+---
+{{jsSidebar("Errors")}}
+
+## Message
+
+    Warning: Date.prototype.toLocaleFormat is deprecated; consider using Intl.DateTimeFormat instead
+
+## Type d'erreur
+
+Un avertissement, l'exécution du script JavaScript n'est pas interrompue.
+
+## Quel est le problème ?
+
+La méthode non-standard {{jsxref("Date.prototype.toLocaleFormat")}} est dépréciée et ne devrait plus être utilisée. Elle utilise une chaîne de caractères qui indique le format avec la même syntaxe que la fonction `strftime()` en C. Cette fonction n'est plus disponible à partir de Firefox 58.
+
+## Exemples
+
+### Syntaxe dépréciée
+
+La méthode {{jsxref("Date.prototype.toLocaleFormat")}} est dépréciée et sera retirée (aucune prise en charge par les autres navigateurs en dehors de Firefox).
+
+```js example-bad
+var today = new Date();
+var date = today.toLocaleFormat('%A %e %B %Y');
+
+console.log(date);
+// En français
+// "Vendredi 10 mars 2017"
+```
+
+### Utiliser une syntaxe standard grâce à l'API ECMAScript Intl
+
+Le standard ECMA-402 (l'API ECMAScript Intl) définit des objets et méthodes standards qui permettent de mettre en forme des dates et heures (disponible à partir de Chrome 24, de Firefox 29, d'IE11 et de  Safari10).
+
+Si on souhaite uniquement formater une date, on pourra utiliser la méthode {{jsxref("Date.prototype.toLocaleDateString")}}.
+
+```js example-good
+var today = new Date();
+var options = { weekday: 'long', year: 'numeric',
+                month: 'long', day: 'numeric' };
+var date = today.toLocaleDateString('fr-FR', options);
+
+console.log(date);
+// "Vendredi 10 mars 2017"
+```
+
+Si on manipule plus de dates, on peut utiliser l'objet {{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}} qui permet de mettre en cache certains des calculs afin d'avoir une mise en forme rapide (ce qui s'avère utile lorsqu'on a une boucle par exemple) :
+
+```js example-good
+var options = { weekday: 'long', year: 'numeric',
+                month: 'long', day: 'numeric' };
+var dateFormatter = new Intl.DateTimeFormat('de-DE', options)
+
+var dates = [Date.UTC(2012, 11, 20, 3, 0, 0),
+             Date.UTC(2014, 04, 12, 8, 0, 0)];
+
+dates.forEach(date => console.log(dateFormatter.format(date)));
+
+// "Donnerstag, 20. Dezember 2012"
+// "Montag, 12. Mai 2014"
+```
+
+### Utiliser les méthodes de l'objet `Date`
+
+L'objet {{jsxref("Date")}} dispose de plusieurs méthodes qui permettent de construire une chaîne de caractères pour une date donnée. Ainsi
+
+```js example-bad
+(new Date()).toLocaleFormat("%Y%m%d");
+// "20170310"
+```
+
+Pourra être converti en :
+
+```js example-good
+let now = new Date();
+let date = now.getFullYear() * 10000 +
+          (now.getMonth() + 1) * 100 + now.getDate();
+
+console.log(date);
+// "20170310"
+```
+
+## Voir aussi
+
+- {{jsxref("Date.prototype.toLocaleFormat")}}
+- {{jsxref("Date.prototype.toLocaleDateString")}}
+- {{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}}
diff --git a/files/fr/web/javascript/reference/errors/equal_as_assign/index.html b/files/fr/web/javascript/reference/errors/equal_as_assign/index.html
deleted file mode 100644
index 2e420be691..0000000000
--- a/files/fr/web/javascript/reference/errors/equal_as_assign/index.html
+++ /dev/null
@@ -1,54 +0,0 @@
----
-title: 'SyntaxError: test for equality (==) mistyped as assignment (=)?'
-slug: Web/JavaScript/Reference/Errors/Equal_as_assign
-tags:
-  - Erreurs
-  - JavaScript
-  - SyntaxError
-translation_of: Web/JavaScript/Reference/Errors/Equal_as_assign
-original_slug: Web/JavaScript/Reference/Erreurs/Equal_as_assign
----
-<div>{{jsSidebar("Errors")}}</div>
-
-<h2 id="Message">Message</h2>
-
-<pre class="syntaxbox">Warning: SyntaxError: test for equality (==) mistyped as assignment (=)?
-</pre>
-
-<h2 id="Type_d'erreur">Type d'erreur</h2>
-
-<p>Uniquement pour Firefox. Un avertissement sous la forme d'une exception {{jsxref("SyntaxError")}}, généré uniquement si la préférence <code>javascript.options.strict</code> vaut <code>true</code>.</p>
-
-<h2 id="Quel_est_le_problème">Quel est le problème ?</h2>
-
-<p>Le code utilise une affectation (<code>=</code>) là où on attendrait un test d'égalité (<code>==</code>). Afin d'aider au débogage, le moteur JavaScript déclenche des avertissements lorsqu'il détecte ce motif.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Des_affectations_utilisées_au_sein_d'expressions_conditionnelles">Des affectations utilisées au sein d'expressions conditionnelles</h3>
-
-<p>Il est conseillé de ne pas utiliser d'affectations simples dans des expressions conditionnelles (comme le test effectué avec <code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/if...else">if...else</a></code>) car on peut confondre les deux à la lecture du code. Ainsi, on n'utilisera pas la forme suivante :</p>
-
-<pre class="brush: js example-bad">if (x = y) {
-  // do the right thing
-}
-</pre>
-
-<p>Si on doit effectivement affecter une variable dans une expression conditionnelle, on entourera l'affectation d'une paire de parenthèses supplémentaires afin de montrer qu'on veut bien effectuer une affectation, comme ceci :</p>
-
-<pre class="brush: js">if ((x = y)) {
-  // exécuter le code
-}</pre>
-
-<p>Autrement (généralement), on veut plutôt utiliser un opérateur de comparaison (<code>==</code> ou <code>===</code> par exemple) :</p>
-
-<pre class="brush: js">if (x == y) {
-  // exécuter le code
-}</pre>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/if...else">if...else</a></code></li>
- <li><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_de_comparaison">Les opérateurs de comparaison</a></li>
-</ul>
diff --git a/files/fr/web/javascript/reference/errors/equal_as_assign/index.md b/files/fr/web/javascript/reference/errors/equal_as_assign/index.md
new file mode 100644
index 0000000000..400fb4a797
--- /dev/null
+++ b/files/fr/web/javascript/reference/errors/equal_as_assign/index.md
@@ -0,0 +1,56 @@
+---
+title: 'SyntaxError: test for equality (==) mistyped as assignment (=)?'
+slug: Web/JavaScript/Reference/Errors/Equal_as_assign
+tags:
+  - Erreurs
+  - JavaScript
+  - SyntaxError
+translation_of: Web/JavaScript/Reference/Errors/Equal_as_assign
+original_slug: Web/JavaScript/Reference/Erreurs/Equal_as_assign
+---
+{{jsSidebar("Errors")}}
+
+## Message
+
+    Warning: SyntaxError: test for equality (==) mistyped as assignment (=)?
+
+## Type d'erreur
+
+Uniquement pour Firefox. Un avertissement sous la forme d'une exception {{jsxref("SyntaxError")}}, généré uniquement si la préférence `javascript.options.strict` vaut `true`.
+
+## Quel est le problème ?
+
+Le code utilise une affectation (`=`) là où on attendrait un test d'égalité (`==`). Afin d'aider au débogage, le moteur JavaScript déclenche des avertissements lorsqu'il détecte ce motif.
+
+## Exemples
+
+### Des affectations utilisées au sein d'expressions conditionnelles
+
+Il est conseillé de ne pas utiliser d'affectations simples dans des expressions conditionnelles (comme le test effectué avec [`if...else`](/fr/docs/Web/JavaScript/Reference/Instructions/if...else)) car on peut confondre les deux à la lecture du code. Ainsi, on n'utilisera pas la forme suivante :
+
+```js example-bad
+if (x = y) {
+  // do the right thing
+}
+```
+
+Si on doit effectivement affecter une variable dans une expression conditionnelle, on entourera l'affectation d'une paire de parenthèses supplémentaires afin de montrer qu'on veut bien effectuer une affectation, comme ceci :
+
+```js
+if ((x = y)) {
+  // exécuter le code
+}
+```
+
+Autrement (généralement), on veut plutôt utiliser un opérateur de comparaison (`==` ou `===` par exemple) :
+
+```js
+if (x == y) {
+  // exécuter le code
+}
+```
+
+## Voir aussi
+
+- [`if...else`](/fr/docs/Web/JavaScript/Reference/Instructions/if...else)
+- [Les opérateurs de comparaison](/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_de_comparaison)
diff --git a/files/fr/web/javascript/reference/errors/for-each-in_loops_are_deprecated/index.html b/files/fr/web/javascript/reference/errors/for-each-in_loops_are_deprecated/index.html
deleted file mode 100644
index 26954d8e79..0000000000
--- a/files/fr/web/javascript/reference/errors/for-each-in_loops_are_deprecated/index.html
+++ /dev/null
@@ -1,169 +0,0 @@
----
-title: 'Warning: JavaScript 1.6''s for-each-in loops are deprecated'
-slug: Web/JavaScript/Reference/Errors/For-each-in_loops_are_deprecated
-tags:
-  - Avertissement
-  - JavaScript
-translation_of: Web/JavaScript/Reference/Errors/For-each-in_loops_are_deprecated
-original_slug: Web/JavaScript/Reference/Erreurs/For-each-in_loops_are_deprecated
----
-<div>{{jsSidebar("Errors")}}</div>
-
-<h2 id="Message">Message</h2>
-
-<pre class="syntaxbox">Warning: JavaScript 1.6's for-each-in loops are deprecated; consider using ES6 for-of instead
-</pre>
-
-<h2 id="Type_d'erreur">Type d'erreur</h2>
-
-<p>Avertissement.</p>
-
-<h2 id="Quel_est_le_problème">Quel est le problème ?</h2>
-
-<p>L'instruction {{jsxref("Instructions/for_each...in", "for each (variable in obj)")}} présente à partir de JavaScript 1.6 est une instruction dépréciée et est amenée à disparaître dans un avenir proche.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Itérer_sur_un_objet">Itérer sur un objet</h3>
-
-<p>{{jsxref("Instructions/for_each...in", "for each...in")}} pouvait être utilisé pour parcourir les valeurs contenues dans un objet.</p>
-
-<h4 id="Syntaxe_dépréciée">Syntaxe dépréciée</h4>
-
-<pre class="brush: js example-bad">var objet = { a: 10, b: 20 };
-
-for each (var x in objet) {
-  console.log(x);        // 10
-                         // 20
-}
-</pre>
-
-<h4 id="Syntaxe_alternative_standard">Syntaxe alternative, standard</h4>
-
-<p>On peut désormais utilisé l'instruction de boucle standard {{jsxref("Instructions/for...in", "for...in")}} afin d'itérer sur les clés d'un objet et de récupérer les valeurs des propriétés :</p>
-
-<pre class="brush: js example-good">var objet = { a: 10, b: 20 };
-
-for (var key in objet) {
-  var x = objet[key];
-  console.log(x);        // 10
-                         // 20
-}
-</pre>
-
-<p>Ou alors, on peut utiliser {{jsxref("Instructions/for...of", "for...of")}} (ES2015) et {{jsxref("Object.values")}} (ES2017) afin d'obtenir un tableau des valeurs associées à un objet pour ensuite le parcourir :</p>
-
-<pre class="brush: js example-good">var objet = { a: 10, b: 20 };
-
-for (var x of Object.values(objet)) {
-  console.log(x);        // 10
-                         // 20
-}
-</pre>
-
-<h3 id="Itérer_sur_un_tableau">Itérer sur un tableau</h3>
-
-<p>{{jsxref("Instructions/for_each...in", "for each...in")}} pouvait être utilisée afin de parcourir les éléments d'un tableau.</p>
-
-<h4 id="Syntaxe_dépréciée_2">Syntaxe dépréciée</h4>
-
-<pre class="brush: js example-bad">var array = [10, 20, 30];
-
-for each (var x in array) {
-  console.log(x);        // 10
-                         // 20
-                         // 30
-}
-</pre>
-
-<h4 id="Syntaxe_alternative_standard_2">Syntaxe alternative, standard</h4>
-
-<p>On peut obtenir le même effet avec les boucles {{jsxref("Instructions/for...of", "for...of")}} (ES2015).</p>
-
-<pre class="brush: js example-good">var array = [10, 20, 30];
-
-for (var x of array) {
-  console.log(x);        // 10
-                         // 20
-                         // 30
-}
-</pre>
-
-<h3 id="Parcourir_un_tableau_qui_vaille_null_ou_undefined">Parcourir un tableau qui vaille <code>null</code> ou <code>undefined</code></h3>
-
-<p>{{jsxref("Instructions/for_each...in", "for each...in")}} ne fera rien si la valeur fournie est <code>null</code> ou <code>undefined</code>. En revanche, {{jsxref("Instructions/for...of", "for...of")}} lèvera une exception dans ces cas.</p>
-
-<h4 id="Syntaxe_dépréciée_3">Syntaxe dépréciée</h4>
-
-<pre class="brush: js example-bad">function func(array) {
-  for each (var x in array) {
-    console.log(x);
-  }
-}
-func([10, 20]);        // 10
-                       // 20
-func(null);            // rien ne s'affiche
-func(undefined);       // rien ne s'affiche
-</pre>
-
-<h4 id="Syntaxe_alternative_standard_3">Syntaxe alternative, standard</h4>
-
-<p>Pour réécrire les instructions {{jsxref("Instructions/for_each...in", "for each...in")}} afin que les valeurs <code>null</code> ou <code>undefined</code> puissent être gérées avec {{jsxref("Instructions/for...of", "for...of")}}, il faudra rajouter une protection :</p>
-
-<pre class="brush: js example-good">function func(array) {
-  if (array) {
-    for (var x of array) {
-      console.log(x);
-    }
-  }
-}
-func([10, 20]);        // 10
-                       // 20
-func(null);            // rien ne s'affiche
-func(undefined);       // rien ne s'affiche
-</pre>
-
-<h3 id="Itérer_sur_les_tuples_clé-valeur_d'un_objet">Itérer sur les tuples clé-valeur d'un objet</h3>
-
-<h4 id="Syntaxe_dépréciée_4">Syntaxe dépréciée</h4>
-
-<p>On pouvait utiliser une forme syntaxique particulière, désormais dépréciée, qui combine {{jsxref("Instructions/for_each...in", "for each...in")}} et l'objet déprécié {{jsxref("Iterator")}}.</p>
-
-<pre class="brush: js example-bad">var object = { a: 10, b: 20 };
-
-for each (var [key, value] in Iterator(object)) {
-  console.log(key, value);  // "a", 10
-                            // "b", 20
-}
-</pre>
-
-<h4 id="Syntaxe_alternative_standard_4">Syntaxe alternative, standard</h4>
-
-<p>On peut désormais utiliser la boucle {{jsxref("Instructions/for...in", "for...in")}} afin de parcourir les différentes clés d'un objet pour ensuite récupérer les valeurs associées :</p>
-
-<pre class="brush: js example-good">var object = { a: 10, b: 20 };
-
-for (var key in object) {
-  var value = object[key];
-  console.log(key, value);  // "a", 10
-                            // "b", 20
-}
-</pre>
-
-<p>Ou encore, on peut utiliser {{jsxref("Instructions/for...of", "for...of")}} (ES2015) et {{jsxref("Object.entries")}} (ES2017) pour récupérer un tableau contenant les clés et les valeurs d'un objet qu'on pourra ensuite parcourir :</p>
-
-<pre class="brush: js example-good">var object = { a: 10, b: 20 };
-
-for (var [key, value] of Object.entries(object)) {
-  console.log(key, value);  // "a", 10
-                            // "b", 20
-}
-</pre>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Instructions/for...of", "for...of")}}</li>
- <li>{{jsxref("Object.values")}}</li>
- <li>{{jsxref("Object.entries")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/errors/for-each-in_loops_are_deprecated/index.md b/files/fr/web/javascript/reference/errors/for-each-in_loops_are_deprecated/index.md
new file mode 100644
index 0000000000..7d1e4dc118
--- /dev/null
+++ b/files/fr/web/javascript/reference/errors/for-each-in_loops_are_deprecated/index.md
@@ -0,0 +1,176 @@
+---
+title: 'Warning: JavaScript 1.6''s for-each-in loops are deprecated'
+slug: Web/JavaScript/Reference/Errors/For-each-in_loops_are_deprecated
+tags:
+  - Avertissement
+  - JavaScript
+translation_of: Web/JavaScript/Reference/Errors/For-each-in_loops_are_deprecated
+original_slug: Web/JavaScript/Reference/Erreurs/For-each-in_loops_are_deprecated
+---
+{{jsSidebar("Errors")}}
+
+## Message
+
+    Warning: JavaScript 1.6's for-each-in loops are deprecated; consider using ES6 for-of instead
+
+## Type d'erreur
+
+Avertissement.
+
+## Quel est le problème ?
+
+L'instruction {{jsxref("Instructions/for_each...in", "for each (variable in obj)")}} présente à partir de JavaScript 1.6 est une instruction dépréciée et est amenée à disparaître dans un avenir proche.
+
+## Exemples
+
+### Itérer sur un objet
+
+{{jsxref("Instructions/for_each...in", "for each...in")}} pouvait être utilisé pour parcourir les valeurs contenues dans un objet.
+
+#### Syntaxe dépréciée
+
+```js example-bad
+var objet = { a: 10, b: 20 };
+
+for each (var x in objet) {
+  console.log(x);        // 10
+                         // 20
+}
+```
+
+#### Syntaxe alternative, standard
+
+On peut désormais utilisé l'instruction de boucle standard {{jsxref("Instructions/for...in", "for...in")}} afin d'itérer sur les clés d'un objet et de récupérer les valeurs des propriétés :
+
+```js example-good
+var objet = { a: 10, b: 20 };
+
+for (var key in objet) {
+  var x = objet[key];
+  console.log(x);        // 10
+                         // 20
+}
+```
+
+Ou alors, on peut utiliser {{jsxref("Instructions/for...of", "for...of")}} (ES2015) et {{jsxref("Object.values")}} (ES2017) afin d'obtenir un tableau des valeurs associées à un objet pour ensuite le parcourir :
+
+```js example-good
+var objet = { a: 10, b: 20 };
+
+for (var x of Object.values(objet)) {
+  console.log(x);        // 10
+                         // 20
+}
+```
+
+### Itérer sur un tableau
+
+{{jsxref("Instructions/for_each...in", "for each...in")}} pouvait être utilisée afin de parcourir les éléments d'un tableau.
+
+#### Syntaxe dépréciée
+
+```js example-bad
+var array = [10, 20, 30];
+
+for each (var x in array) {
+  console.log(x);        // 10
+                         // 20
+                         // 30
+}
+```
+
+#### Syntaxe alternative, standard
+
+On peut obtenir le même effet avec les boucles {{jsxref("Instructions/for...of", "for...of")}} (ES2015).
+
+```js example-good
+var array = [10, 20, 30];
+
+for (var x of array) {
+  console.log(x);        // 10
+                         // 20
+                         // 30
+}
+```
+
+### Parcourir un tableau qui vaille `null` ou `undefined`
+
+{{jsxref("Instructions/for_each...in", "for each...in")}} ne fera rien si la valeur fournie est `null` ou `undefined`. En revanche, {{jsxref("Instructions/for...of", "for...of")}} lèvera une exception dans ces cas.
+
+#### Syntaxe dépréciée
+
+```js example-bad
+function func(array) {
+  for each (var x in array) {
+    console.log(x);
+  }
+}
+func([10, 20]);        // 10
+                       // 20
+func(null);            // rien ne s'affiche
+func(undefined);       // rien ne s'affiche
+```
+
+#### Syntaxe alternative, standard
+
+Pour réécrire les instructions {{jsxref("Instructions/for_each...in", "for each...in")}} afin que les valeurs `null` ou `undefined` puissent être gérées avec {{jsxref("Instructions/for...of", "for...of")}}, il faudra rajouter une protection :
+
+```js example-good
+function func(array) {
+  if (array) {
+    for (var x of array) {
+      console.log(x);
+    }
+  }
+}
+func([10, 20]);        // 10
+                       // 20
+func(null);            // rien ne s'affiche
+func(undefined);       // rien ne s'affiche
+```
+
+### Itérer sur les tuples clé-valeur d'un objet
+
+#### Syntaxe dépréciée
+
+On pouvait utiliser une forme syntaxique particulière, désormais dépréciée, qui combine {{jsxref("Instructions/for_each...in", "for each...in")}} et l'objet déprécié {{jsxref("Iterator")}}.
+
+```js example-bad
+var object = { a: 10, b: 20 };
+
+for each (var [key, value] in Iterator(object)) {
+  console.log(key, value);  // "a", 10
+                            // "b", 20
+}
+```
+
+#### Syntaxe alternative, standard
+
+On peut désormais utiliser la boucle {{jsxref("Instructions/for...in", "for...in")}} afin de parcourir les différentes clés d'un objet pour ensuite récupérer les valeurs associées :
+
+```js example-good
+var object = { a: 10, b: 20 };
+
+for (var key in object) {
+  var value = object[key];
+  console.log(key, value);  // "a", 10
+                            // "b", 20
+}
+```
+
+Ou encore, on peut utiliser {{jsxref("Instructions/for...of", "for...of")}} (ES2015) et {{jsxref("Object.entries")}} (ES2017) pour récupérer un tableau contenant les clés et les valeurs d'un objet qu'on pourra ensuite parcourir :
+
+```js example-good
+var object = { a: 10, b: 20 };
+
+for (var [key, value] of Object.entries(object)) {
+  console.log(key, value);  // "a", 10
+                            // "b", 20
+}
+```
+
+## Voir aussi
+
+- {{jsxref("Instructions/for...of", "for...of")}}
+- {{jsxref("Object.values")}}
+- {{jsxref("Object.entries")}}
diff --git a/files/fr/web/javascript/reference/errors/getter_only/index.html b/files/fr/web/javascript/reference/errors/getter_only/index.html
deleted file mode 100644
index 01fd2c0e14..0000000000
--- a/files/fr/web/javascript/reference/errors/getter_only/index.html
+++ /dev/null
@@ -1,85 +0,0 @@
----
-title: 'TypeError: setting a property that has only a getter'
-slug: Web/JavaScript/Reference/Errors/Getter_only
-tags:
-  - Erreurs
-  - JavaScript
-  - Mode strict
-  - TypeError
-translation_of: Web/JavaScript/Reference/Errors/Getter_only
-original_slug: Web/JavaScript/Reference/Erreurs/Getter_only
----
-<div>{{jsSidebar("Errors")}}</div>
-
-<h2 id="Message">Message</h2>
-
-<pre class="syntaxbox">TypeError: Assignment to read-only properties is not allowed in strict mode (Edge)
-TypeError: setting getter-only property "x" (Firefox)
-TypeError: Cannot set property "prop" of #&lt;Object&gt; which has only a getter (Chrome)
-</pre>
-
-<h2 id="Type_d'erreur">Type d'erreur</h2>
-
-<p>{{jsxref("TypeError")}}, uniquement en <a href="/en-US/docs/Web/JavaScript/Reference/Strict_mode">mode strict</a>.</p>
-
-<h2 id="Quel_est_le_problème">Quel est le problème ?</h2>
-
-<p>On essaie de fournir une nouvelle valeur pour une propriété qui ne dispose que d'un <a href="/fr/docs/Web/JavaScript/Reference/Fonctions/get">accesseur</a>. Ceci échouera en mode non-strict mais lèvera une exception {{jsxref("TypeError")}} en <a href="/fr/docs/Web/JavaScript/Reference/Strict_mode">mode strict</a>.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<p>Dans l'exemple qui suit, on voit comment créer un accesseur sur une propriété. En revanche, dans la définition de l'objet, on n'inclut aucun <a href="/fr/docs/Web/JavaScript/Reference/Fonctions/set">mutateur</a> et une exception <code>TypeError</code> sera déclenchée lorsqu'on voudra modifier la propriété <code>temperature</code> pour la passer à <code>30</code>. Pour plus de détails, on pourra consulter la page {{jsxref("Object.defineProperty()")}}.</p>
-
-<pre class="brush: js example-bad">"use strict";
-
-function Archiver() {
-  var temperature = null;
-  Object.defineProperty(this, 'temperature', {
-    get: function() {
-      console.log('get!');
-      return temperature;
-    }
-  });
-}
-
-var arc = new Archiver();
-arc.temperature; // 'get!'
-
-arc.temperature = 30;
-// TypeError: setting a property that has only a getter
-</pre>
-
-<p>Pour corriger cette erreur, soit on retire la ligne 16 (où on tente de modifier la propriété) soit on implémente un mutateur, comme ceci :</p>
-
-<pre class="brush: js example-good highlight[12]">"use strict";
-
-function Archiver() {
-  var temperature = null;
-  var archive = [];
-
-  Object.defineProperty(this, 'temperature', {
-    get: function() {
-      console.log('get!');
-      return temperature;
-    },
-    set: function(value) {
-      temperature = value;
-      archive.push({ val: temperature });
-    }
-  });
-
-  this.getArchive = function() { return archive; };
-}
-
-var arc = new Archiver();
-arc.temperature; // 'get!'
-arc.temperature = 11;
-arc.temperature = 13;
-arc.getArchive(); // [{ val: 11 }, { val: 13 }]</pre>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Object.defineProperty()")}}</li>
- <li>{{jsxref("Object.defineProperties()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/errors/getter_only/index.md b/files/fr/web/javascript/reference/errors/getter_only/index.md
new file mode 100644
index 0000000000..d308e5b583
--- /dev/null
+++ b/files/fr/web/javascript/reference/errors/getter_only/index.md
@@ -0,0 +1,85 @@
+---
+title: 'TypeError: setting a property that has only a getter'
+slug: Web/JavaScript/Reference/Errors/Getter_only
+tags:
+  - Erreurs
+  - JavaScript
+  - Mode strict
+  - TypeError
+translation_of: Web/JavaScript/Reference/Errors/Getter_only
+original_slug: Web/JavaScript/Reference/Erreurs/Getter_only
+---
+{{jsSidebar("Errors")}}
+
+## Message
+
+    TypeError: Assignment to read-only properties is not allowed in strict mode (Edge)
+    TypeError: setting getter-only property "x" (Firefox)
+    TypeError: Cannot set property "prop" of #<Object> which has only a getter (Chrome)
+
+## Type d'erreur
+
+{{jsxref("TypeError")}}, uniquement en [mode strict](/en-US/docs/Web/JavaScript/Reference/Strict_mode).
+
+## Quel est le problème ?
+
+On essaie de fournir une nouvelle valeur pour une propriété qui ne dispose que d'un [accesseur](/fr/docs/Web/JavaScript/Reference/Fonctions/get). Ceci échouera en mode non-strict mais lèvera une exception {{jsxref("TypeError")}} en [mode strict](/fr/docs/Web/JavaScript/Reference/Strict_mode).
+
+## Exemples
+
+Dans l'exemple qui suit, on voit comment créer un accesseur sur une propriété. En revanche, dans la définition de l'objet, on n'inclut aucun [mutateur](/fr/docs/Web/JavaScript/Reference/Fonctions/set) et une exception `TypeError` sera déclenchée lorsqu'on voudra modifier la propriété `temperature` pour la passer à `30`. Pour plus de détails, on pourra consulter la page {{jsxref("Object.defineProperty()")}}.
+
+```js example-bad
+"use strict";
+
+function Archiver() {
+  var temperature = null;
+  Object.defineProperty(this, 'temperature', {
+    get: function() {
+      console.log('get!');
+      return temperature;
+    }
+  });
+}
+
+var arc = new Archiver();
+arc.temperature; // 'get!'
+
+arc.temperature = 30;
+// TypeError: setting a property that has only a getter
+```
+
+Pour corriger cette erreur, soit on retire la ligne 16 (où on tente de modifier la propriété) soit on implémente un mutateur, comme ceci :
+
+```js example-good
+"use strict";
+
+function Archiver() {
+  var temperature = null;
+  var archive = [];
+
+  Object.defineProperty(this, 'temperature', {
+    get: function() {
+      console.log('get!');
+      return temperature;
+    },
+    set: function(value) {
+      temperature = value;
+      archive.push({ val: temperature });
+    }
+  });
+
+  this.getArchive = function() { return archive; };
+}
+
+var arc = new Archiver();
+arc.temperature; // 'get!'
+arc.temperature = 11;
+arc.temperature = 13;
+arc.getArchive(); // [{ val: 11 }, { val: 13 }]
+```
+
+## Voir aussi
+
+- {{jsxref("Object.defineProperty()")}}
+- {{jsxref("Object.defineProperties()")}}
diff --git a/files/fr/web/javascript/reference/errors/identifier_after_number/index.html b/files/fr/web/javascript/reference/errors/identifier_after_number/index.html
deleted file mode 100644
index 1401b41432..0000000000
--- a/files/fr/web/javascript/reference/errors/identifier_after_number/index.html
+++ /dev/null
@@ -1,57 +0,0 @@
----
-title: 'SyntaxError: identifier starts immediately after numeric literal'
-slug: Web/JavaScript/Reference/Errors/Identifier_after_number
-tags:
-  - Erreurs
-  - JavaScript
-  - SyntaxError
-translation_of: Web/JavaScript/Reference/Errors/Identifier_after_number
-original_slug: Web/JavaScript/Reference/Erreurs/Identifier_after_number
----
-<div>{{JSSidebar("Errors")}}</div>
-
-<h2 id="Message">Message</h2>
-
-<pre class="syntaxbox">SyntaxError: Unexpected identifier after numeric literal (Edge)
-SyntaxError: identifier starts immediately after numeric literal (Firefox)
-SyntaxError: Unexpected number (Chrome)
-</pre>
-
-<h2 id="Type_d'erreur">Type d'erreur</h2>
-
-<p>{{jsxref("SyntaxError")}}</p>
-
-<h2 id="Quel_est_le_problème">Quel est le problème ?</h2>
-
-<p>Les noms qu'on donne aux variables (aussi appelés « identifiants ») doivent respecter certaines règles…</p>
-
-<p>En JavaScript, un identifiant doit commencer par une lettre, un tiret bas (_) ou un dollar ($), il ne peut pas commencer par un chiffre. Seuls les caractères après le premier peuvent être des chiffres.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Des_variables_dont_le_nom_commence_par_un_chiffre">Des variables dont le nom commence par un chiffre</h3>
-
-<p>En JavaScript, les noms des variables ne peuvent pas commencer par un chiffre. Aussi, le script suivant provoquera des erreurs :</p>
-
-<pre class="brush: js example-bad">var 1vie = 'toto';
-// SyntaxError: identifier starts immediately after numeric literal
-
-var toto = 1vie;
-// SyntaxError: identifier starts immediately after numeric literal
-
-alert(1.toto);
-// SyntaxError: identifier starts immediately after numeric literal
-</pre>
-
-<p>Pour éviter ce problème, il faudra renommer les variables afin d'éviter d'utiliser un chiffre au début :</p>
-
-<pre class="brush: js example-good">var vie1 = 'toto';
-var toto = vie1;
-</pre>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/JavaScript/Reference/Grammaire_lexicale">La grammaire lexicale de JavaScript</a></li>
- <li><a href="/fr/docs/Web/JavaScript/Guide/Types_et_grammaire#Variables">Les variables</a> dans le <a href="/fr/docs/Web/JavaScript/Guide">Guide JavaScript</a></li>
-</ul>
diff --git a/files/fr/web/javascript/reference/errors/identifier_after_number/index.md b/files/fr/web/javascript/reference/errors/identifier_after_number/index.md
new file mode 100644
index 0000000000..b2ca711e5a
--- /dev/null
+++ b/files/fr/web/javascript/reference/errors/identifier_after_number/index.md
@@ -0,0 +1,56 @@
+---
+title: 'SyntaxError: identifier starts immediately after numeric literal'
+slug: Web/JavaScript/Reference/Errors/Identifier_after_number
+tags:
+  - Erreurs
+  - JavaScript
+  - SyntaxError
+translation_of: Web/JavaScript/Reference/Errors/Identifier_after_number
+original_slug: Web/JavaScript/Reference/Erreurs/Identifier_after_number
+---
+{{JSSidebar("Errors")}}
+
+## Message
+
+    SyntaxError: Unexpected identifier after numeric literal (Edge)
+    SyntaxError: identifier starts immediately after numeric literal (Firefox)
+    SyntaxError: Unexpected number (Chrome)
+
+## Type d'erreur
+
+{{jsxref("SyntaxError")}}
+
+## Quel est le problème ?
+
+Les noms qu'on donne aux variables (aussi appelés « identifiants ») doivent respecter certaines règles…
+
+En JavaScript, un identifiant doit commencer par une lettre, un tiret bas (\_) ou un dollar ($), il ne peut pas commencer par un chiffre. Seuls les caractères après le premier peuvent être des chiffres.
+
+## Exemples
+
+### Des variables dont le nom commence par un chiffre
+
+En JavaScript, les noms des variables ne peuvent pas commencer par un chiffre. Aussi, le script suivant provoquera des erreurs :
+
+```js example-bad
+var 1vie = 'toto';
+// SyntaxError: identifier starts immediately after numeric literal
+
+var toto = 1vie;
+// SyntaxError: identifier starts immediately after numeric literal
+
+alert(1.toto);
+// SyntaxError: identifier starts immediately after numeric literal
+```
+
+Pour éviter ce problème, il faudra renommer les variables afin d'éviter d'utiliser un chiffre au début :
+
+```js example-good
+var vie1 = 'toto';
+var toto = vie1;
+```
+
+## Voir aussi
+
+- [La grammaire lexicale de JavaScript](/fr/docs/Web/JavaScript/Reference/Grammaire_lexicale)
+- [Les variables](/fr/docs/Web/JavaScript/Guide/Types_et_grammaire#Variables) dans le [Guide JavaScript](/fr/docs/Web/JavaScript/Guide)
diff --git a/files/fr/web/javascript/reference/errors/illegal_character/index.html b/files/fr/web/javascript/reference/errors/illegal_character/index.html
deleted file mode 100644
index 9c886718f5..0000000000
--- a/files/fr/web/javascript/reference/errors/illegal_character/index.html
+++ /dev/null
@@ -1,84 +0,0 @@
----
-title: 'SyntaxError: illegal character'
-slug: Web/JavaScript/Reference/Errors/Illegal_character
-tags:
-  - Erreurs
-  - JavaScript
-  - SyntaxError
-translation_of: Web/JavaScript/Reference/Errors/Illegal_character
-original_slug: Web/JavaScript/Reference/Erreurs/Illegal_character
----
-<div>{{jsSidebar("Errors")}}</div>
-
-<h2 id="Message">Message</h2>
-
-<pre class="syntaxbox">SyntaxError: Invalid character (Edge)
-SyntaxError: illegal character (Firefox)
-SyntaxError: Invalid or unexpected token (Chrome)
-</pre>
-
-<h2 id="Type_d'erreur">Type d'erreur</h2>
-
-<p>{{jsxref("SyntaxError")}}</p>
-
-<h2 id="Quel_est_le_problème">Quel est le problème ?</h2>
-
-<p>Dans le code, il y a un élément de la syntaxe qui n'est pas à la bonne place. Pour détecter les erreurs de ce type, vous pouvez utiliser un éditeur de texte qui prend en charge la coloration syntaxique et qui met en évidence les caractères problématiques (par exemple si on a utilisé un tiret (<code> – </code>) au lieu d'un moins ( - ) ou des guillemets anglais (<code> “ </code>) à la place de doubles quotes ( " ).</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Caractères_ressemblants">Caractères ressemblants</h3>
-
-<p>Certains caractères ressemblent à des caractères spéciaux en JavaScript mais n'en sont pas. Dans ce cas, lorsque le moteur analysera le code, il échouera.</p>
-
-<pre class="brush: js example-bad">“Ceci ressemble à une chaîne de caractères.”;
-// “ n'est pas le caractère "
-// SyntaxError: illegal character
-
-42 – 13;
-// – n'est pas le caractère -
-// SyntaxError: illegal character
-
-var toto = "truc";
-// ; (&lt;37e&gt;) n'est pas le caractère ;
-// SyntaxError: illegal character
-</pre>
-
-<p>On peut corriger ce point en utilisant les bons caractères :</p>
-
-<pre class="brush: js example-good">"Ceci est vraiment une chaîne de caractères.";
-42 - 13;
-var toto = "truc";
-</pre>
-
-<p>Certains éditeurs et environnements de développement intégrés indiqueront la présence de tels caractères avec une coloration syntaxique différente. Toutefois, tous les éditeurs n'ont pas une telle fonctionnalité et si vous n'arrivez pas à déterminer l'origine du problème, il vaudra sans doute mieux supprimer la ligne incriminée et la resaisir manuellement.</p>
-
-<h3 id="Caractères_oubliés">Caractères oubliés</h3>
-
-<p>On oublie parfois un caractère.</p>
-
-<pre class="brush: js example-bad">var couleurs = ['#000', #333', '#666'];
-// SyntaxError: illegal character
-</pre>
-
-<p>Dans ce cas, il suffit de rajouter la quote pour <code>'#333'</code>.</p>
-
-<pre class="brush: js example-good">var couleurs = ['#000', '#333', '#666'];</pre>
-
-<h3 id="Caractères_cachés">Caractères cachés</h3>
-
-<p>Lorsque vous copiez/collez du code depuis des sources externes, celles-ci peuvent contenir des caractères invalides difficiles à discerner.</p>
-
-<pre class="brush: js example-bad">var toto = 'truc';​
-// SyntaxError: illegal character
-</pre>
-
-<p>Lorsqu'on inspecte ce code grâce à un éditeur de texte (par exemple Vim), on peut voir qu'il y en fait un <a href="https://fr.wikipedia.org/wiki/Espace_sans_chasse">espace sans chasse (ZWSP) (U+200B)</a>.</p>
-
-<pre class="brush: js">var toto = 'truc';​&lt;200b&gt;</pre>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/JavaScript/Reference/Grammaire_lexicale">La grammaire lexicale de JavaScript</a></li>
-</ul>
diff --git a/files/fr/web/javascript/reference/errors/illegal_character/index.md b/files/fr/web/javascript/reference/errors/illegal_character/index.md
new file mode 100644
index 0000000000..d1da414713
--- /dev/null
+++ b/files/fr/web/javascript/reference/errors/illegal_character/index.md
@@ -0,0 +1,89 @@
+---
+title: 'SyntaxError: illegal character'
+slug: Web/JavaScript/Reference/Errors/Illegal_character
+tags:
+  - Erreurs
+  - JavaScript
+  - SyntaxError
+translation_of: Web/JavaScript/Reference/Errors/Illegal_character
+original_slug: Web/JavaScript/Reference/Erreurs/Illegal_character
+---
+{{jsSidebar("Errors")}}
+
+## Message
+
+    SyntaxError: Invalid character (Edge)
+    SyntaxError: illegal character (Firefox)
+    SyntaxError: Invalid or unexpected token (Chrome)
+
+## Type d'erreur
+
+{{jsxref("SyntaxError")}}
+
+## Quel est le problème ?
+
+Dans le code, il y a un élément de la syntaxe qui n'est pas à la bonne place. Pour détecter les erreurs de ce type, vous pouvez utiliser un éditeur de texte qui prend en charge la coloration syntaxique et qui met en évidence les caractères problématiques (par exemple si on a utilisé un tiret (` – `) au lieu d'un moins ( - ) ou des guillemets anglais (` “ `) à la place de doubles quotes ( " ).
+
+## Exemples
+
+### Caractères ressemblants
+
+Certains caractères ressemblent à des caractères spéciaux en JavaScript mais n'en sont pas. Dans ce cas, lorsque le moteur analysera le code, il échouera.
+
+```js example-bad
+“Ceci ressemble à une chaîne de caractères.”;
+// “ n'est pas le caractère "
+// SyntaxError: illegal character
+
+42 – 13;
+// – n'est pas le caractère -
+// SyntaxError: illegal character
+
+var toto = "truc";
+// ; (<37e>) n'est pas le caractère ;
+// SyntaxError: illegal character
+```
+
+On peut corriger ce point en utilisant les bons caractères :
+
+```js example-good
+"Ceci est vraiment une chaîne de caractères.";
+42 - 13;
+var toto = "truc";
+```
+
+Certains éditeurs et environnements de développement intégrés indiqueront la présence de tels caractères avec une coloration syntaxique différente. Toutefois, tous les éditeurs n'ont pas une telle fonctionnalité et si vous n'arrivez pas à déterminer l'origine du problème, il vaudra sans doute mieux supprimer la ligne incriminée et la resaisir manuellement.
+
+### Caractères oubliés
+
+On oublie parfois un caractère.
+
+```js example-bad
+var couleurs = ['#000', #333', '#666'];
+// SyntaxError: illegal character
+```
+
+Dans ce cas, il suffit de rajouter la quote pour `'#333'`.
+
+```js example-good
+var couleurs = ['#000', '#333', '#666'];
+```
+
+### Caractères cachés
+
+Lorsque vous copiez/collez du code depuis des sources externes, celles-ci peuvent contenir des caractères invalides difficiles à discerner.
+
+```js example-bad
+var toto = 'truc';​
+// SyntaxError: illegal character
+```
+
+Lorsqu'on inspecte ce code grâce à un éditeur de texte (par exemple Vim), on peut voir qu'il y en fait un [espace sans chasse (ZWSP) (U+200B)](https://fr.wikipedia.org/wiki/Espace_sans_chasse).
+
+```js
+var toto = 'truc';​<200b>
+```
+
+## Voir aussi
+
+- [La grammaire lexicale de JavaScript](/fr/docs/Web/JavaScript/Reference/Grammaire_lexicale)
diff --git a/files/fr/web/javascript/reference/errors/in_operator_no_object/index.html b/files/fr/web/javascript/reference/errors/in_operator_no_object/index.html
deleted file mode 100644
index 104971982d..0000000000
--- a/files/fr/web/javascript/reference/errors/in_operator_no_object/index.html
+++ /dev/null
@@ -1,74 +0,0 @@
----
-title: 'TypeError: invalid ''in'' operand "x"'
-slug: Web/JavaScript/Reference/Errors/in_operator_no_object
-tags:
-  - Erreurs
-  - JavaScript
-  - TypeError
-translation_of: Web/JavaScript/Reference/Errors/in_operator_no_object
-original_slug: Web/JavaScript/Reference/Erreurs/in_operator_no_object
----
-<div>{{jsSidebar("Errors")}}</div>
-
-<h2 id="Message">Message</h2>
-
-<pre class="syntaxbox">TypeError: Invalid operand to 'in' (Edge)
-TypeError: right-hand side of 'in' should be an object, got 'x' (Firefox)
-TypeError: cannot use 'in' operator to search for 'x' in 'y' (Firefox, Chrome)
-</pre>
-
-<h2 id="Type_d'erreur">Type d'erreur</h2>
-
-<p>{{jsxref("TypeError")}}</p>
-
-<h2 id="Quel_est_le_problème">Quel est le problème ?</h2>
-
-<p>L'<a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_in">opérateur <code>in</code></a> peut uniquement être utilisé pour vérifier qu'une propriété appartient à un objet. Il ne peut pas être utilisé pour rechercher des caractères dans des chaînes de caractères, des nombres ou dans d'autres types de données en dehors des objets.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Rechercher_un_texte_dans_une_chaîne_de_caractères">Rechercher un texte dans une chaîne de caractères</h3>
-
-<p>À la différence de certains langages de programmation (Python par exemple), JavaScript ne permet pas de chercher des textes dans une chaîne de caractères grâce à l'opérateur <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_in"><code>in</code></a>.</p>
-
-<pre class="brush: js example-bad">"Coucou" in "Coucou monde";
-// TypeError: cannot use 'in' operator to search for 'Coucou' in 'Coucou monde'
-</pre>
-
-<p>On utilisera plutôt la méthode {{jsxref("String.prototype.indexOf()")}} :</p>
-
-<pre class="brush: js example-good">"Coucou monde".indexOf("Coucou") !== -1;
-// true</pre>
-
-<h3 id="null_ou_undefined_ne_fonctionnent_pas"><code>null</code> ou <code>undefined</code> ne fonctionnent pas</h3>
-
-<p>Avant d'utiliser <code>in</code>, il faut s'assurer que la valeur qu'on inspecte n'est pas {{jsxref("null")}} ou {{jsxref("undefined")}}.</p>
-
-<pre class="brush: js example-bad">var toto = null;
-"truc" in toto;
-// TypeError: cannot use 'in' operator to search for 'truc' in 'toto" (Chrome)
-// TypeError: right-hand side of 'in' should be an object, got null (Firefox)
-</pre>
-
-<p>L'opérateur <code>in</code> doit être utilisé avec un objet.</p>
-
-<pre class="brush: js example-good">var toto = { machin: "bidule" };
-"truc" in toto; // false
-
-"PI" in Math; // true
-"pi" in Math; // false
-</pre>
-
-<h3 id="Rechercher_dans_un_tableau">Rechercher dans un tableau</h3>
-
-<p>Attention lorsqu'on utilise l'opérateur <code>in</code> quand on recherche une valeur dans un objet {{jsxref("Array")}}. L'opérateur <code>in</code> vérifie la présence de l'index mais pas la valeur présente à cet index.</p>
-
-<pre class="brush: js">var arbres = ['cèdre', 'bouleau', 'pin', 'sapin', 'érable'];
-3 in arbres; // true
-"pin" in arbres; // false</pre>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_in">L'opérateur <code>in</code></a></li>
-</ul>
diff --git a/files/fr/web/javascript/reference/errors/in_operator_no_object/index.md b/files/fr/web/javascript/reference/errors/in_operator_no_object/index.md
new file mode 100644
index 0000000000..4a07499692
--- /dev/null
+++ b/files/fr/web/javascript/reference/errors/in_operator_no_object/index.md
@@ -0,0 +1,78 @@
+---
+title: 'TypeError: invalid ''in'' operand "x"'
+slug: Web/JavaScript/Reference/Errors/in_operator_no_object
+tags:
+  - Erreurs
+  - JavaScript
+  - TypeError
+translation_of: Web/JavaScript/Reference/Errors/in_operator_no_object
+original_slug: Web/JavaScript/Reference/Erreurs/in_operator_no_object
+---
+{{jsSidebar("Errors")}}
+
+## Message
+
+    TypeError: Invalid operand to 'in' (Edge)
+    TypeError: right-hand side of 'in' should be an object, got 'x' (Firefox)
+    TypeError: cannot use 'in' operator to search for 'x' in 'y' (Firefox, Chrome)
+
+## Type d'erreur
+
+{{jsxref("TypeError")}}
+
+## Quel est le problème ?
+
+L'[opérateur `in`](/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_in) peut uniquement être utilisé pour vérifier qu'une propriété appartient à un objet. Il ne peut pas être utilisé pour rechercher des caractères dans des chaînes de caractères, des nombres ou dans d'autres types de données en dehors des objets.
+
+## Exemples
+
+### Rechercher un texte dans une chaîne de caractères
+
+À la différence de certains langages de programmation (Python par exemple), JavaScript ne permet pas de chercher des textes dans une chaîne de caractères grâce à l'opérateur [`in`](/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_in).
+
+```js example-bad
+"Coucou" in "Coucou monde";
+// TypeError: cannot use 'in' operator to search for 'Coucou' in 'Coucou monde'
+```
+
+On utilisera plutôt la méthode {{jsxref("String.prototype.indexOf()")}} :
+
+```js example-good
+"Coucou monde".indexOf("Coucou") !== -1;
+// true
+```
+
+### `null` ou `undefined` ne fonctionnent pas
+
+Avant d'utiliser `in`, il faut s'assurer que la valeur qu'on inspecte n'est pas {{jsxref("null")}} ou {{jsxref("undefined")}}.
+
+```js example-bad
+var toto = null;
+"truc" in toto;
+// TypeError: cannot use 'in' operator to search for 'truc' in 'toto" (Chrome)
+// TypeError: right-hand side of 'in' should be an object, got null (Firefox)
+```
+
+L'opérateur `in` doit être utilisé avec un objet.
+
+```js example-good
+var toto = { machin: "bidule" };
+"truc" in toto; // false
+
+"PI" in Math; // true
+"pi" in Math; // false
+```
+
+### Rechercher dans un tableau
+
+Attention lorsqu'on utilise l'opérateur `in` quand on recherche une valeur dans un objet {{jsxref("Array")}}. L'opérateur `in` vérifie la présence de l'index mais pas la valeur présente à cet index.
+
+```js
+var arbres = ['cèdre', 'bouleau', 'pin', 'sapin', 'érable'];
+3 in arbres; // true
+"pin" in arbres; // false
+```
+
+## Voir aussi
+
+- [L'opérateur `in`](/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_in)
diff --git a/files/fr/web/javascript/reference/errors/index.html b/files/fr/web/javascript/reference/errors/index.html
deleted file mode 100644
index 7110b7682a..0000000000
--- a/files/fr/web/javascript/reference/errors/index.html
+++ /dev/null
@@ -1,24 +0,0 @@
----
-title: Référence des erreurs JavaScript
-slug: Web/JavaScript/Reference/Errors
-tags:
-  - JavaScript
-translation_of: Web/JavaScript/Reference/Errors
-original_slug: Web/JavaScript/Reference/Erreurs
----
-<p>{{jsSidebar("Errors")}}</p>
-
-<p><em>Errare ECMAScript est</em>…<br>
- Vous trouverez ci-après une liste d'erreurs causées par le moteur JavaScript. Ces erreurs peuvent aider à déboguer certains problèmes mais leur signification n'est pas toujours claire. Chacune de ces pages fournit donc des explications et informations supplémentaires à propos de ces erreurs.</p>
-
-<p>D'un point de vue technique, chaque erreur est un objet {{jsxref("Error")}} et possède une propriété <code>name</code> (son nom) et une propriété <code>message</code>.</p>
-
-<h2 id="Liste_d'erreurs">Liste d'erreurs</h2>
-
-<p>{{ListSubPages("/fr/docs/Web/JavaScript/Reference/Erreurs")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Learn/JavaScript/First_steps/What_went_wrong">Qu'est-ce qui a cloché ? Diagnostiquer un problème JavaScript</a> : un tutoriel introductif pour réparer les erreurs JavaScript</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/errors/index.md b/files/fr/web/javascript/reference/errors/index.md
new file mode 100644
index 0000000000..aeaeeb5519
--- /dev/null
+++ b/files/fr/web/javascript/reference/errors/index.md
@@ -0,0 +1,22 @@
+---
+title: Référence des erreurs JavaScript
+slug: Web/JavaScript/Reference/Errors
+tags:
+  - JavaScript
+translation_of: Web/JavaScript/Reference/Errors
+original_slug: Web/JavaScript/Reference/Erreurs
+---
+{{jsSidebar("Errors")}}
+
+_Errare ECMAScript est_…
+Vous trouverez ci-après une liste d'erreurs causées par le moteur JavaScript. Ces erreurs peuvent aider à déboguer certains problèmes mais leur signification n'est pas toujours claire. Chacune de ces pages fournit donc des explications et informations supplémentaires à propos de ces erreurs.
+
+D'un point de vue technique, chaque erreur est un objet {{jsxref("Error")}} et possède une propriété `name` (son nom) et une propriété `message`.
+
+## Liste d'erreurs
+
+{{ListSubPages("/fr/docs/Web/JavaScript/Reference/Erreurs")}}
+
+## Voir aussi
+
+- [Qu'est-ce qui a cloché ? Diagnostiquer un problème JavaScript](/fr/docs/Learn/JavaScript/First_steps/What_went_wrong) : un tutoriel introductif pour réparer les erreurs JavaScript
diff --git a/files/fr/web/javascript/reference/errors/invalid_array_length/index.html b/files/fr/web/javascript/reference/errors/invalid_array_length/index.html
deleted file mode 100644
index aa5fd0d701..0000000000
--- a/files/fr/web/javascript/reference/errors/invalid_array_length/index.html
+++ /dev/null
@@ -1,80 +0,0 @@
----
-title: 'RangeError: invalid array length'
-slug: Web/JavaScript/Reference/Errors/Invalid_array_length
-tags:
-  - Erreurs
-  - JavaScript
-  - RangeError
-translation_of: Web/JavaScript/Reference/Errors/Invalid_array_length
-original_slug: Web/JavaScript/Reference/Erreurs/Invalid_array_length
----
-<div>{{jsSidebar("Erreurs")}}</div>
-
-<h2 id="Message">Message</h2>
-
-<pre class="syntaxbox">RangeError: Array length must be a finite positive integer (Edge)
-RangeError: invalid array length (Firefox)
-RangeError: Invalid array length (Chrome)
-RangeError: Invalid array buffer length (Chrome)
-</pre>
-
-<h2 id="Type_d'erreur">Type d'erreur</h2>
-
-<p>{{jsxref("RangeError")}}</p>
-
-<h2 id="Quel_est_le_problème">Quel est le problème ?</h2>
-
-<p>Deux cas de figures peuvent causer cette erreur :</p>
-
-<ul>
- <li>La création d'un tableau {{jsxref("Array")}} ou {{jsxref("ArrayBuffer")}} dont la longueur est négative ou supérieure ou égale à 2^32</li>
- <li>La modification de la propriété {{jsxref("Array.length")}} pour que celle-ci ait une valeur négative ou supérieure ou égale à 2^32.</li>
-</ul>
-
-<p>Les tailles des objets <code>Array</code> et <code>ArrayBuffer</code> sont limitées car leurs longueurs (<code>length</code>) sont représentées par des entiers non-signés sur 32 bits. Ces valeurs sont donc nécessairement comprises dans l'intervalle allant de 0 à 2^32-1.</p>
-
-<p>Si vous utilisez le constructeur pour <code>Array</code>, il est probable que vous souhaitiez utiliser la notation littérale plutôt que le constructeur. En effet, le premier argument de ce constructeur correspond à la longueur du tableau.</p>
-
-<p>Sinon, vous pouvez réduire la longueur utilisée afin que celle-ci soit dans l'intervalle valide avant de l'utiliser pour une telle création ou modification.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Exemples_invalides">Exemples invalides</h3>
-
-<pre class="brush: js example-bad">new Array(Math.pow(2, 40))
-new Array(-1)
-new ArrayBuffer(Math.pow(2, 32))
-new ArrayBuffer(-1)
-
-let a = [];
-a.length = a.length - 1;         // set -1 to the length property
-
-let b = new Array(Math.pow(2, 32) - 1);
-b.length = b.length + 1;         // set 2^32 to the length property
-</pre>
-
-<h3 id="Exemples_valides">Exemples valides</h3>
-
-<pre class="brush: js example-good">[ Math.pow(2, 40) ]                     // [ 1099511627776 ]
-[ -1 ]                                  // [ -1 ]
-new ArrayBuffer(Math.pow(2, 32) - 1)
-new ArrayBuffer(0)
-
-let a = [];
-a.length = Math.max(0, a.length - 1);
-
-let b = new Array(Math.pow(2, 32) - 1);
-b.length = Math.min(0xffffffff, b.length + 1);
-
-// 0xffffffff est la notation hexadécimale
-// pour 2^32 - 1
-// ce qu'on peut également écrire (-1 &gt;&gt;&gt; 0)
-</pre>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Array")}}</li>
- <li>{{jsxref("Array.length")}}</li>
- <li>{{jsxref("ArrayBuffer")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/errors/invalid_array_length/index.md b/files/fr/web/javascript/reference/errors/invalid_array_length/index.md
new file mode 100644
index 0000000000..b8db76535a
--- /dev/null
+++ b/files/fr/web/javascript/reference/errors/invalid_array_length/index.md
@@ -0,0 +1,77 @@
+---
+title: 'RangeError: invalid array length'
+slug: Web/JavaScript/Reference/Errors/Invalid_array_length
+tags:
+  - Erreurs
+  - JavaScript
+  - RangeError
+translation_of: Web/JavaScript/Reference/Errors/Invalid_array_length
+original_slug: Web/JavaScript/Reference/Erreurs/Invalid_array_length
+---
+{{jsSidebar("Erreurs")}}
+
+## Message
+
+    RangeError: Array length must be a finite positive integer (Edge)
+    RangeError: invalid array length (Firefox)
+    RangeError: Invalid array length (Chrome)
+    RangeError: Invalid array buffer length (Chrome)
+
+## Type d'erreur
+
+{{jsxref("RangeError")}}
+
+## Quel est le problème ?
+
+Deux cas de figures peuvent causer cette erreur :
+
+- La création d'un tableau {{jsxref("Array")}} ou {{jsxref("ArrayBuffer")}} dont la longueur est négative ou supérieure ou égale à 2^32
+- La modification de la propriété {{jsxref("Array.length")}} pour que celle-ci ait une valeur négative ou supérieure ou égale à 2^32.
+
+Les tailles des objets `Array` et `ArrayBuffer` sont limitées car leurs longueurs (`length`) sont représentées par des entiers non-signés sur 32 bits. Ces valeurs sont donc nécessairement comprises dans l'intervalle allant de 0 à 2^32-1.
+
+Si vous utilisez le constructeur pour `Array`, il est probable que vous souhaitiez utiliser la notation littérale plutôt que le constructeur. En effet, le premier argument de ce constructeur correspond à la longueur du tableau.
+
+Sinon, vous pouvez réduire la longueur utilisée afin que celle-ci soit dans l'intervalle valide avant de l'utiliser pour une telle création ou modification.
+
+## Exemples
+
+### Exemples invalides
+
+```js example-bad
+new Array(Math.pow(2, 40))
+new Array(-1)
+new ArrayBuffer(Math.pow(2, 32))
+new ArrayBuffer(-1)
+
+let a = [];
+a.length = a.length - 1;         // set -1 to the length property
+
+let b = new Array(Math.pow(2, 32) - 1);
+b.length = b.length + 1;         // set 2^32 to the length property
+```
+
+### Exemples valides
+
+```js example-good
+[ Math.pow(2, 40) ]                     // [ 1099511627776 ]
+[ -1 ]                                  // [ -1 ]
+new ArrayBuffer(Math.pow(2, 32) - 1)
+new ArrayBuffer(0)
+
+let a = [];
+a.length = Math.max(0, a.length - 1);
+
+let b = new Array(Math.pow(2, 32) - 1);
+b.length = Math.min(0xffffffff, b.length + 1);
+
+// 0xffffffff est la notation hexadécimale
+// pour 2^32 - 1
+// ce qu'on peut également écrire (-1 >>> 0)
+```
+
+## Voir aussi
+
+- {{jsxref("Array")}}
+- {{jsxref("Array.length")}}
+- {{jsxref("ArrayBuffer")}}
diff --git a/files/fr/web/javascript/reference/errors/invalid_assignment_left-hand_side/index.html b/files/fr/web/javascript/reference/errors/invalid_assignment_left-hand_side/index.html
deleted file mode 100644
index 5a441e32a9..0000000000
--- a/files/fr/web/javascript/reference/errors/invalid_assignment_left-hand_side/index.html
+++ /dev/null
@@ -1,55 +0,0 @@
----
-title: 'ReferenceError: invalid assignment left-hand side'
-slug: Web/JavaScript/Reference/Errors/Invalid_assignment_left-hand_side
-tags:
-  - Erreurs
-  - JavaScript
-  - ReferenceError
-translation_of: Web/JavaScript/Reference/Errors/Invalid_assignment_left-hand_side
-original_slug: Web/JavaScript/Reference/Erreurs/Invalid_assignment_left-hand_side
----
-<div>{{jsSidebar("Errors")}}</div>
-
-<h2 id="Message">Message</h2>
-
-<pre class="syntaxbox">ReferenceError: invalid assignment left-hand side
-</pre>
-
-<h2 id="Type_d'erreur">Type d'erreur</h2>
-
-<p>{{jsxref("ReferenceError")}}.</p>
-
-<h2 id="Quel_est_le_problème">Quel est le problème ?</h2>
-
-<p>Un affectation inattendue a eu lieu. Cela peut être dû à un mélange entre <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_d_affectation">un opérateur d'affectation</a> et <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_de_comparaison">un opérateur de comparaison</a>. Un seul signe égal affectera une valeur à une variable alors que les opérateurs <code>==</code> ou <code>===</code> comparent des valeurs entre elles.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<pre class="brush: js example-bad">if (Math.PI = 3 || Math.PI = 4) {
-  console.log('Nope !');
-}
-// ReferenceError: invalid assignment left-hand side
-
-var str = 'Hello, '
-+= 'is it me '
-+= 'you\'re looking for?';
-// ReferenceError: invalid assignment left-hand side
-</pre>
-
-<p>Dans l'instruction <code>if</code>, plutôt qu'une affectation, on voudra plutôt utiliser un opérateur <code>==</code> ou <code>===</code> et l'opérateur de concaténation (+) à la place pour la chaîne.</p>
-
-<pre class="brush: js example-good">if (Math.PI == 3 || Math.PI == 4) {
-  console.log('no way!');
-}
-
-var str = 'Hello, '
-+ 'from the '
-+ 'other side!';
-</pre>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_d_affectation">Opérateurs d'affectation</a></li>
- <li><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_de_comparaison">Opérateurs de comparaison</a></li>
-</ul>
diff --git a/files/fr/web/javascript/reference/errors/invalid_assignment_left-hand_side/index.md b/files/fr/web/javascript/reference/errors/invalid_assignment_left-hand_side/index.md
new file mode 100644
index 0000000000..b35d7cdcc1
--- /dev/null
+++ b/files/fr/web/javascript/reference/errors/invalid_assignment_left-hand_side/index.md
@@ -0,0 +1,54 @@
+---
+title: 'ReferenceError: invalid assignment left-hand side'
+slug: Web/JavaScript/Reference/Errors/Invalid_assignment_left-hand_side
+tags:
+  - Erreurs
+  - JavaScript
+  - ReferenceError
+translation_of: Web/JavaScript/Reference/Errors/Invalid_assignment_left-hand_side
+original_slug: Web/JavaScript/Reference/Erreurs/Invalid_assignment_left-hand_side
+---
+{{jsSidebar("Errors")}}
+
+## Message
+
+    ReferenceError: invalid assignment left-hand side
+
+## Type d'erreur
+
+{{jsxref("ReferenceError")}}.
+
+## Quel est le problème ?
+
+Un affectation inattendue a eu lieu. Cela peut être dû à un mélange entre [un opérateur d'affectation](/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_d_affectation) et [un opérateur de comparaison](/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_de_comparaison). Un seul signe égal affectera une valeur à une variable alors que les opérateurs `==` ou `===` comparent des valeurs entre elles.
+
+## Exemples
+
+```js example-bad
+if (Math.PI = 3 || Math.PI = 4) {
+  console.log('Nope !');
+}
+// ReferenceError: invalid assignment left-hand side
+
+var str = 'Hello, '
++= 'is it me '
++= 'you\'re looking for?';
+// ReferenceError: invalid assignment left-hand side
+```
+
+Dans l'instruction `if`, plutôt qu'une affectation, on voudra plutôt utiliser un opérateur `==` ou `===` et l'opérateur de concaténation (+) à la place pour la chaîne.
+
+```js example-good
+if (Math.PI == 3 || Math.PI == 4) {
+  console.log('no way!');
+}
+
+var str = 'Hello, '
++ 'from the '
++ 'other side!';
+```
+
+## Voir aussi
+
+- [Opérateurs d'affectation](/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_d_affectation)
+- [Opérateurs de comparaison](/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_de_comparaison)
diff --git a/files/fr/web/javascript/reference/errors/invalid_const_assignment/index.html b/files/fr/web/javascript/reference/errors/invalid_const_assignment/index.html
deleted file mode 100644
index 76219c8d9f..0000000000
--- a/files/fr/web/javascript/reference/errors/invalid_const_assignment/index.html
+++ /dev/null
@@ -1,91 +0,0 @@
----
-title: 'TypeError: invalid assignment to const "x"'
-slug: Web/JavaScript/Reference/Errors/Invalid_const_assignment
-tags:
-  - Erreurs
-  - JavaScript
-  - TypeError
-translation_of: Web/JavaScript/Reference/Errors/Invalid_const_assignment
-original_slug: Web/JavaScript/Reference/Erreurs/Invalid_const_assignment
----
-<div>{{jsSidebar("Errors")}}</div>
-
-<h2 id="Message">Message</h2>
-
-<pre class="syntaxbox">TypeError: invalid assignment to const "x" (Firefox)
-TypeError: Assignment to constant variable. (Chrome)
-TypeError: Redeclaration of const 'x' (Edge)
-</pre>
-
-<h2 id="Type_d'erreur">Type d'erreur</h2>
-
-<p>{{jsxref("TypeError")}}</p>
-
-<h2 id="Quel_est_le_problème">Quel est le problème ?</h2>
-
-<p>Une constante est une valeur qui ne peut pas être modifiée lors de l'exécution du programme. Elle ne peut pas être modifiée grâce à une réaffectation ou grâce à une redéclaration. En JavaScript, les constantes sont déclarées grâce au mot-clé <code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/const">const</a></code>.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Redéclaration_invalide">Redéclaration invalide</h3>
-
-<p>Si on affecte une valeur à une constante dans la même portée de bloc que celui qui contient l'affectation initiale, une exception sera levée :</p>
-
-<pre class="brush: js example-bad">const COLUMNS = 80;
-
-// ...
-
-COLUMNS = 120; // TypeError: invalid assignment to const `COLUMNS'</pre>
-
-<h3 id="Résoudre_le_problème">Résoudre le problème</h3>
-
-<p>Il existe plusieurs façons de résoudre ce problème et il faut au préalable comprendre le rôle de la constante en question.</p>
-
-<h4 id="Utiliser_un_autre_nom">Utiliser un autre nom</h4>
-
-<p>Si on souhaite déclarer une autre constante, on peut utiliser un autre nom que celui qui est déjà pris dans cette portée :</p>
-
-<pre class="brush: js example-good">const COLUMNS = 80;
-const WIDE_COLUMNS = 120;</pre>
-
-<h4 id="const_let_ou_var"><code>const</code>, <code>let</code> ou <code>var</code> ?</h4>
-
-<p><code>const</code> ne doit pas être utilisé si on ne souhaite pas déclarer de constante. Peut-être qu'on souhaite simplement déclarer une variable avec une portée de bloc grâce à <code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/let">let</a></code> ou une variable globale avec <code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/var">var</a></code>.</p>
-
-<pre class="brush: js example-good">let columns = 80;
-
-// ...
-
-let columns = 120;
-</pre>
-
-<h4 id="Gérer_les_portées">Gérer les portées</h4>
-
-<p>On peut également vérifier qu'on est dans la bonne portée. Est-ce que la constante devait apparaître dans la portée en question ou devait être utilisée dans une fonction ?</p>
-
-<pre class="brush: js example-good">const COLUMNS = 80;
-
-function setupBigScreenEnvironment() {
-  const COLUMNS = 120;
-}</pre>
-
-<h3 id="const_et_l'immuabilité"><code>const</code> et l'immuabilité</h3>
-
-<p>La déclaration <code>const</code> crée une référence en lecture seule vers une valeur. Elle ne signifie pas que la valeur en question est immuable mais uniquement que l'identifiant de la référence ne peut pas recevoir de nouvelle valeur. Ainsi, si le contenu est un objet, celui-ci pourra toujours être modifié :</p>
-
-<pre class="brush: js example-bad">const obj = {toto: 'truc'};
-obj = {toto: 'bidule'}; // TypeError: invalid assignment to const `obj'
-</pre>
-
-<p>En revanche, on peut modifier les propriétés :</p>
-
-<pre class="brush: js example-good">obj.toto = 'bidule';
-obj; // Object { toto: "bidule" }</pre>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/const">const</a></code></li>
- <li><code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/let">let</a></code></li>
- <li><code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/var">var</a></code></li>
-</ul>
diff --git a/files/fr/web/javascript/reference/errors/invalid_const_assignment/index.md b/files/fr/web/javascript/reference/errors/invalid_const_assignment/index.md
new file mode 100644
index 0000000000..8205bb266e
--- /dev/null
+++ b/files/fr/web/javascript/reference/errors/invalid_const_assignment/index.md
@@ -0,0 +1,98 @@
+---
+title: 'TypeError: invalid assignment to const "x"'
+slug: Web/JavaScript/Reference/Errors/Invalid_const_assignment
+tags:
+  - Erreurs
+  - JavaScript
+  - TypeError
+translation_of: Web/JavaScript/Reference/Errors/Invalid_const_assignment
+original_slug: Web/JavaScript/Reference/Erreurs/Invalid_const_assignment
+---
+{{jsSidebar("Errors")}}
+
+## Message
+
+    TypeError: invalid assignment to const "x" (Firefox)
+    TypeError: Assignment to constant variable. (Chrome)
+    TypeError: Redeclaration of const 'x' (Edge)
+
+## Type d'erreur
+
+{{jsxref("TypeError")}}
+
+## Quel est le problème ?
+
+Une constante est une valeur qui ne peut pas être modifiée lors de l'exécution du programme. Elle ne peut pas être modifiée grâce à une réaffectation ou grâce à une redéclaration. En JavaScript, les constantes sont déclarées grâce au mot-clé [`const`](/fr/docs/Web/JavaScript/Reference/Instructions/const).
+
+## Exemples
+
+### Redéclaration invalide
+
+Si on affecte une valeur à une constante dans la même portée de bloc que celui qui contient l'affectation initiale, une exception sera levée :
+
+```js example-bad
+const COLUMNS = 80;
+
+// ...
+
+COLUMNS = 120; // TypeError: invalid assignment to const `COLUMNS'
+```
+
+### Résoudre le problème
+
+Il existe plusieurs façons de résoudre ce problème et il faut au préalable comprendre le rôle de la constante en question.
+
+#### Utiliser un autre nom
+
+Si on souhaite déclarer une autre constante, on peut utiliser un autre nom que celui qui est déjà pris dans cette portée :
+
+```js example-good
+const COLUMNS = 80;
+const WIDE_COLUMNS = 120;
+```
+
+#### `const`, `let` ou `var` ?
+
+`const` ne doit pas être utilisé si on ne souhaite pas déclarer de constante. Peut-être qu'on souhaite simplement déclarer une variable avec une portée de bloc grâce à [`let`](/fr/docs/Web/JavaScript/Reference/Instructions/let) ou une variable globale avec [`var`](/fr/docs/Web/JavaScript/Reference/Instructions/var).
+
+```js example-good
+let columns = 80;
+
+// ...
+
+let columns = 120;
+```
+
+#### Gérer les portées
+
+On peut également vérifier qu'on est dans la bonne portée. Est-ce que la constante devait apparaître dans la portée en question ou devait être utilisée dans une fonction ?
+
+```js example-good
+const COLUMNS = 80;
+
+function setupBigScreenEnvironment() {
+  const COLUMNS = 120;
+}
+```
+
+### `const` et l'immuabilité
+
+La déclaration `const` crée une référence en lecture seule vers une valeur. Elle ne signifie pas que la valeur en question est immuable mais uniquement que l'identifiant de la référence ne peut pas recevoir de nouvelle valeur. Ainsi, si le contenu est un objet, celui-ci pourra toujours être modifié :
+
+```js example-bad
+const obj = {toto: 'truc'};
+obj = {toto: 'bidule'}; // TypeError: invalid assignment to const `obj'
+```
+
+En revanche, on peut modifier les propriétés :
+
+```js example-good
+obj.toto = 'bidule';
+obj; // Object { toto: "bidule" }
+```
+
+## Voir aussi
+
+- [`const`](/fr/docs/Web/JavaScript/Reference/Instructions/const)
+- [`let`](/fr/docs/Web/JavaScript/Reference/Instructions/let)
+- [`var`](/fr/docs/Web/JavaScript/Reference/Instructions/var)
diff --git a/files/fr/web/javascript/reference/errors/invalid_date/index.html b/files/fr/web/javascript/reference/errors/invalid_date/index.html
deleted file mode 100644
index a89f979fbc..0000000000
--- a/files/fr/web/javascript/reference/errors/invalid_date/index.html
+++ /dev/null
@@ -1,57 +0,0 @@
----
-title: 'RangeError: invalid date'
-slug: Web/JavaScript/Reference/Errors/Invalid_date
-tags:
-  - Erreurs
-  - JavaScript
-  - RangeError
-translation_of: Web/JavaScript/Reference/Errors/Invalid_date
-original_slug: Web/JavaScript/Reference/Erreurs/Invalid_date
----
-<div>{{jsSidebar("Errors")}}</div>
-
-<h2 id="Message">Message</h2>
-
-<pre class="syntaxbox">RangeError: invalid date (Edge)
-RangeError: invalid date (Firefox)
-RangeError: invalid time value (Chrome)
-RangeError: Provided date is not in valid range (Chrome)
-</pre>
-
-<h2 id="Type_d'erreur">Type d'erreur</h2>
-
-<p>{{jsxref("RangeError")}}</p>
-
-<h2 id="Quel_est_le_problème">Quel est le problème ?</h2>
-
-<p>Une chaîne de caractères indiquant une date invalide a été fournie comme argument au constructeur {{jsxref("Date")}} ou à la méthode {{jsxref("Date.parse()")}}.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Exemples_invalides">Exemples invalides</h3>
-
-<p>Les chaînes de caractères qui ne peuvent pas être converties en date ou les dates qui contiennent des éléments illégaux pour le format ISO renvoient généralement {{jsxref("NaN")}}. Cependant, selon l'implémentation, les chaînes de caractères qui ne respectent pas le format ISO pour les dates peuvent déclencher une exception <code>RangeError: invalid date</code>. Les instructions suivantes déclencheront cette erreur dans Firefox :</p>
-
-<pre class="brush: js example-bad">new Date('toto-truc 2014');
-new Date('2014-25-23').toISOString();
-new Date('toto-truc 2014').toString();
-</pre>
-
-<p>En revanche, cette instruction renverra {{jsxref("NaN")}} dans Firefox :</p>
-
-<pre class="brush: js example-bad">Date.parse('toto-truc 2014'); // NaN</pre>
-
-<p>Pour plus de détails, consulter la documentation sur {{jsxref("Date.parse()")}}.</p>
-
-<h3 id="Exemples_valides">Exemples valides</h3>
-
-<pre class="brush: js example-good">new Date('05 October 2011 14:48 UTC');
-new Date(1317826080); // timestamp Unix pour le 5 octobre 2011 14:48:00 UTC</pre>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Date")}}</li>
- <li>{{jsxref("Date.prototype.parse()")}}</li>
- <li>{{jsxref("Date.prototype.toISOString()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/errors/invalid_date/index.md b/files/fr/web/javascript/reference/errors/invalid_date/index.md
new file mode 100644
index 0000000000..ab0905ac9f
--- /dev/null
+++ b/files/fr/web/javascript/reference/errors/invalid_date/index.md
@@ -0,0 +1,59 @@
+---
+title: 'RangeError: invalid date'
+slug: Web/JavaScript/Reference/Errors/Invalid_date
+tags:
+  - Erreurs
+  - JavaScript
+  - RangeError
+translation_of: Web/JavaScript/Reference/Errors/Invalid_date
+original_slug: Web/JavaScript/Reference/Erreurs/Invalid_date
+---
+{{jsSidebar("Errors")}}
+
+## Message
+
+    RangeError: invalid date (Edge)
+    RangeError: invalid date (Firefox)
+    RangeError: invalid time value (Chrome)
+    RangeError: Provided date is not in valid range (Chrome)
+
+## Type d'erreur
+
+{{jsxref("RangeError")}}
+
+## Quel est le problème ?
+
+Une chaîne de caractères indiquant une date invalide a été fournie comme argument au constructeur {{jsxref("Date")}} ou à la méthode {{jsxref("Date.parse()")}}.
+
+## Exemples
+
+### Exemples invalides
+
+Les chaînes de caractères qui ne peuvent pas être converties en date ou les dates qui contiennent des éléments illégaux pour le format ISO renvoient généralement {{jsxref("NaN")}}. Cependant, selon l'implémentation, les chaînes de caractères qui ne respectent pas le format ISO pour les dates peuvent déclencher une exception `RangeError: invalid date`. Les instructions suivantes déclencheront cette erreur dans Firefox :
+
+```js example-bad
+new Date('toto-truc 2014');
+new Date('2014-25-23').toISOString();
+new Date('toto-truc 2014').toString();
+```
+
+En revanche, cette instruction renverra {{jsxref("NaN")}} dans Firefox :
+
+```js example-bad
+Date.parse('toto-truc 2014'); // NaN
+```
+
+Pour plus de détails, consulter la documentation sur {{jsxref("Date.parse()")}}.
+
+### Exemples valides
+
+```js example-good
+new Date('05 October 2011 14:48 UTC');
+new Date(1317826080); // timestamp Unix pour le 5 octobre 2011 14:48:00 UTC
+```
+
+## Voir aussi
+
+- {{jsxref("Date")}}
+- {{jsxref("Date.prototype.parse()")}}
+- {{jsxref("Date.prototype.toISOString()")}}
diff --git a/files/fr/web/javascript/reference/errors/invalid_for-in_initializer/index.html b/files/fr/web/javascript/reference/errors/invalid_for-in_initializer/index.html
deleted file mode 100644
index 2ae766aadc..0000000000
--- a/files/fr/web/javascript/reference/errors/invalid_for-in_initializer/index.html
+++ /dev/null
@@ -1,75 +0,0 @@
----
-title: 'SyntaxError: for-in loop head declarations may not have initializers'
-slug: Web/JavaScript/Reference/Errors/Invalid_for-in_initializer
-tags:
-  - Erreurs
-  - JavaScript
-  - Mode strict
-  - SyntaxError
-translation_of: Web/JavaScript/Reference/Errors/Invalid_for-in_initializer
-original_slug: Web/JavaScript/Reference/Erreurs/Invalid_for-in_initializer
----
-<div>{{jsSidebar("Errors")}}</div>
-
-<h2 id="Message">Message</h2>
-
-<pre class="syntaxbox">SyntaxError: for-in loop head declarations cannot have an initializer (Edge)
-SyntaxError: for-in loop head declarations may not have initializers (Firefox)
-SyntaxError: for-in loop variable declaration may not have an initializer. (Chrome)
-</pre>
-
-<h2 id="Type_d'erreur">Type d'erreur</h2>
-
-<p>{{jsxref("SyntaxError")}}, uniquement en <a href="/fr/docs/Web/JavaScript/Reference/Strict_mode">mode strict</a>.</p>
-
-<h2 id="Quel_est_le_problème">Quel est le problème ?</h2>
-
-<p>L'en-tête d'une boucle <code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/for...in">for...in</a></code> contient une expression d'initialisation, c'est-à-dire qu'une variable est déclarée et qu'on lui affecte une valeur. Ceci n'est pas autorisé en mode strict (et ignoré en mode non-strict).</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<p>Cet exemple déclenchera une exception <code>SyntaxError</code> :</p>
-
-<pre class="brush: js example-bad">"use strict";
-
-var obj = {a: 1, b: 2, c: 3 };
-
-for (var i = 0 in obj) {
-  console.log(obj[i]);
-}
-
-// SyntaxError: for-in loop head declarations may not have initializers
-</pre>
-
-<h3 id="Boucle_for-in_valide">Boucle for-in valide</h3>
-
-<p>On peut retirer l'initialisateur de l'en-tête de la boucle :</p>
-
-<pre class="brush: js example-good">"use strict";
-
-var obj = {a: 1, b: 2, c: 3 };
-
-for (var i in obj) {
-  console.log(obj[i]);
-}
-</pre>
-
-<h3 id="Parcours_d'un_tableau">Parcours d'un tableau</h3>
-
-<p><a href="/fr/docs/Web/JavaScript/Reference/Instructions/for...in#Utiliser_for...in_et_parcourir_un_tableau">Il ne faut pas utiliser de boucle <code>for...in</code> pour parcourir un tableau (<code>Array</code>)</a>. Peut-être souhaitiez-vous utiliser une boucle <code>for</code> pour parcourir le tableau ? Cette boucle <code>for</code> permet également d'utiliser un initialisateur :</p>
-
-<pre class="brush: js example-good">var arr = [ "a", "b", "c" ]
-
-for (var i = 2; i &lt; arr.length; i++) {
-  console.log(arr[i]);
-}
-
-// "c"</pre>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/for...in">for...in</a></code></li>
- <li><code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/for...of">for...of</a></code> interdit également d'utiliser un initialisateur en mode strict et non-strict</li>
- <li><code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/for">for</a></code> permet de définir un initialisateur lors de l'itération et doit être privilégié pour parcourir un tableau</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/errors/invalid_for-in_initializer/index.md b/files/fr/web/javascript/reference/errors/invalid_for-in_initializer/index.md
new file mode 100644
index 0000000000..64160b2884
--- /dev/null
+++ b/files/fr/web/javascript/reference/errors/invalid_for-in_initializer/index.md
@@ -0,0 +1,76 @@
+---
+title: 'SyntaxError: for-in loop head declarations may not have initializers'
+slug: Web/JavaScript/Reference/Errors/Invalid_for-in_initializer
+tags:
+  - Erreurs
+  - JavaScript
+  - Mode strict
+  - SyntaxError
+translation_of: Web/JavaScript/Reference/Errors/Invalid_for-in_initializer
+original_slug: Web/JavaScript/Reference/Erreurs/Invalid_for-in_initializer
+---
+{{jsSidebar("Errors")}}
+
+## Message
+
+    SyntaxError: for-in loop head declarations cannot have an initializer (Edge)
+    SyntaxError: for-in loop head declarations may not have initializers (Firefox)
+    SyntaxError: for-in loop variable declaration may not have an initializer. (Chrome)
+
+## Type d'erreur
+
+{{jsxref("SyntaxError")}}, uniquement en [mode strict](/fr/docs/Web/JavaScript/Reference/Strict_mode).
+
+## Quel est le problème ?
+
+L'en-tête d'une boucle [`for...in`](/fr/docs/Web/JavaScript/Reference/Instructions/for...in) contient une expression d'initialisation, c'est-à-dire qu'une variable est déclarée et qu'on lui affecte une valeur. Ceci n'est pas autorisé en mode strict (et ignoré en mode non-strict).
+
+## Exemples
+
+Cet exemple déclenchera une exception `SyntaxError` :
+
+```js example-bad
+"use strict";
+
+var obj = {a: 1, b: 2, c: 3 };
+
+for (var i = 0 in obj) {
+  console.log(obj[i]);
+}
+
+// SyntaxError: for-in loop head declarations may not have initializers
+```
+
+### Boucle for-in valide
+
+On peut retirer l'initialisateur de l'en-tête de la boucle :
+
+```js example-good
+"use strict";
+
+var obj = {a: 1, b: 2, c: 3 };
+
+for (var i in obj) {
+  console.log(obj[i]);
+}
+```
+
+### Parcours d'un tableau
+
+[Il ne faut pas utiliser de boucle `for...in` pour parcourir un tableau (`Array`)](/fr/docs/Web/JavaScript/Reference/Instructions/for...in#Utiliser_for...in_et_parcourir_un_tableau). Peut-être souhaitiez-vous utiliser une boucle `for` pour parcourir le tableau ? Cette boucle `for` permet également d'utiliser un initialisateur :
+
+```js example-good
+var arr = [ "a", "b", "c" ]
+
+for (var i = 2; i < arr.length; i++) {
+  console.log(arr[i]);
+}
+
+// "c"
+```
+
+## Voir aussi
+
+- [`for...in`](/fr/docs/Web/JavaScript/Reference/Instructions/for...in)
+- [`for...of`](/fr/docs/Web/JavaScript/Reference/Instructions/for...of) interdit également d'utiliser un initialisateur en mode strict et non-strict
+- [`for`](/fr/docs/Web/JavaScript/Reference/Instructions/for) permet de définir un initialisateur lors de l'itération et doit être privilégié pour parcourir un tableau
diff --git a/files/fr/web/javascript/reference/errors/invalid_for-of_initializer/index.html b/files/fr/web/javascript/reference/errors/invalid_for-of_initializer/index.html
deleted file mode 100644
index 943b5399fc..0000000000
--- a/files/fr/web/javascript/reference/errors/invalid_for-of_initializer/index.html
+++ /dev/null
@@ -1,64 +0,0 @@
----
-title: >-
-  SyntaxError: a declaration in the head of a for-of loop can't have an
-  initializer
-slug: Web/JavaScript/Reference/Errors/Invalid_for-of_initializer
-tags:
-  - Erreurs
-  - JavaScript
-  - SyntaxError
-translation_of: Web/JavaScript/Reference/Errors/Invalid_for-of_initializer
-original_slug: Web/JavaScript/Reference/Erreurs/Invalid_for-of_initializer
----
-<div>{{jsSidebar("Errors")}}</div>
-
-<h2 id="Message">Message</h2>
-
-<pre class="syntaxbox">SyntaxError: for-of loop head declarations cannot have an initializer (Edge)
-SyntaxError: a declaration in the head of a for-of loop can't have an initializer (Firefox)
-SyntaxError: for-of loop variable declaration may not have an initializer. (Chrome)
-</pre>
-
-<h2 id="Type_d'erreur">Type d'erreur</h2>
-
-<p>{{jsxref("SyntaxError")}}</p>
-
-<h2 id="Quel_est_le_problème">Quel est le problème ?</h2>
-
-<p>L'en-tête d'une boucle <code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/for...of">for...of</a></code> contient une expression d'initialisation, c'est-à-dire qu'une variable est déclarée et qu'on lui affecte une valeur. Ceci n'est pas autorisé pour les boucles <code>for-of</code>. En revanche, les boucles <code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/for">for</a></code> permettent d'avoir un initialisateur.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Boucles_for-of_invalides">Boucles <code>for-of</code> invalides</h3>
-
-<pre class="brush: js example-bad">let iterable = [10, 20, 30];
-
-for (let value = 50 of iterable) {
-  console.log(value);
-}
-
-// SyntaxError: a declaration in the head of a for-of loop can't
-// have an initializer</pre>
-
-<h3 id="Boucles_for-of_valides">Boucles <code>for-of</code> valides</h3>
-
-<p>Il faut retirer l'initialisateur de l'en-tête de la boucle pour ne plus avoir l'erreur. Si cette valeur devait servir d'incrément, on peut ajouter l'addition dans le corps de la boucle.</p>
-
-<pre class="brush: js example-good">let iterable = [10, 20, 30];
-
-for (let value of iterable) {
-  value += 50;
-  console.log(value);
-}
-// 60
-// 70
-// 80
-</pre>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/for...of">for...of</a></code></li>
- <li><code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/for...in">for...in</a></code> interdit également d'utiliser un initialisateur en mode strict (<a href="/fr/docs/Web/JavaScript/Reference/Errors/Invalid_for-in_initializer">SyntaxError: for-in loop head declarations may not have initializers</a>)</li>
- <li><code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/for">for</a></code> permet de définir un initialisateur lors de l'itération</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/errors/invalid_for-of_initializer/index.md b/files/fr/web/javascript/reference/errors/invalid_for-of_initializer/index.md
new file mode 100644
index 0000000000..932f1f44ce
--- /dev/null
+++ b/files/fr/web/javascript/reference/errors/invalid_for-of_initializer/index.md
@@ -0,0 +1,64 @@
+---
+title: >-
+  SyntaxError: a declaration in the head of a for-of loop can't have an
+  initializer
+slug: Web/JavaScript/Reference/Errors/Invalid_for-of_initializer
+tags:
+  - Erreurs
+  - JavaScript
+  - SyntaxError
+translation_of: Web/JavaScript/Reference/Errors/Invalid_for-of_initializer
+original_slug: Web/JavaScript/Reference/Erreurs/Invalid_for-of_initializer
+---
+{{jsSidebar("Errors")}}
+
+## Message
+
+    SyntaxError: for-of loop head declarations cannot have an initializer (Edge)
+    SyntaxError: a declaration in the head of a for-of loop can't have an initializer (Firefox)
+    SyntaxError: for-of loop variable declaration may not have an initializer. (Chrome)
+
+## Type d'erreur
+
+{{jsxref("SyntaxError")}}
+
+## Quel est le problème ?
+
+L'en-tête d'une boucle [`for...of`](/fr/docs/Web/JavaScript/Reference/Instructions/for...of) contient une expression d'initialisation, c'est-à-dire qu'une variable est déclarée et qu'on lui affecte une valeur. Ceci n'est pas autorisé pour les boucles `for-of`. En revanche, les boucles [`for`](/fr/docs/Web/JavaScript/Reference/Instructions/for) permettent d'avoir un initialisateur.
+
+## Exemples
+
+### Boucles `for-of` invalides
+
+```js example-bad
+let iterable = [10, 20, 30];
+
+for (let value = 50 of iterable) {
+  console.log(value);
+}
+
+// SyntaxError: a declaration in the head of a for-of loop can't
+// have an initializer
+```
+
+### Boucles `for-of` valides
+
+Il faut retirer l'initialisateur de l'en-tête de la boucle pour ne plus avoir l'erreur. Si cette valeur devait servir d'incrément, on peut ajouter l'addition dans le corps de la boucle.
+
+```js example-good
+let iterable = [10, 20, 30];
+
+for (let value of iterable) {
+  value += 50;
+  console.log(value);
+}
+// 60
+// 70
+// 80
+```
+
+## Voir aussi
+
+- [`for...of`](/fr/docs/Web/JavaScript/Reference/Instructions/for...of)
+- [`for...in`](/fr/docs/Web/JavaScript/Reference/Instructions/for...in) interdit également d'utiliser un initialisateur en mode strict ([SyntaxError: for-in loop head declarations may not have initializers](/fr/docs/Web/JavaScript/Reference/Errors/Invalid_for-in_initializer))
+- [`for`](/fr/docs/Web/JavaScript/Reference/Instructions/for) permet de définir un initialisateur lors de l'itération
diff --git a/files/fr/web/javascript/reference/errors/invalid_right_hand_side_instanceof_operand/index.html b/files/fr/web/javascript/reference/errors/invalid_right_hand_side_instanceof_operand/index.html
deleted file mode 100644
index a9fe80e977..0000000000
--- a/files/fr/web/javascript/reference/errors/invalid_right_hand_side_instanceof_operand/index.html
+++ /dev/null
@@ -1,63 +0,0 @@
----
-title: 'TypeError: invalid ''instanceof'' operand ''x'''
-slug: Web/JavaScript/Reference/Errors/invalid_right_hand_side_instanceof_operand
-tags:
-  - Error
-  - Errors
-  - JavaScript
-  - Reference
-  - TypeError
-translation_of: Web/JavaScript/Reference/Errors/invalid_right_hand_side_instanceof_operand
-original_slug: Web/JavaScript/Reference/Erreurs/invalid_right_hand_side_instanceof_operand
----
-<div>{{jsSidebar("Errors")}}</div>
-
-<h2 id="Message">Message</h2>
-
-<pre class="syntaxbox">TypeError: invalid 'instanceof' operand "x" (Firefox)
-TypeError: "x" is not a function (Firefox)
-TypeError: Right-hand side of 'instanceof' is not an object (Chrome)
-TypeError: Right-hand side of 'instanceof' is not callable (Chrome)</pre>
-
-<h2 id="Type_d'erreur">Type d'erreur</h2>
-
-<p>{{jsxref("TypeError")}}</p>
-
-<h2 id="Quel_est_le_problème">Quel est le problème ?</h2>
-
-<p>L'opérateur <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/instanceof"><code>instanceof</code></a> attend un opérande droit qui soit un objet constructeur, c'est-à-dire un objet possédant une propriété <code>prototype</code> et qui puisse être appelé.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<pre class="brush: js example-bad">"test" instanceof ""; // TypeError: invalid 'instanceof' operand ""
-42 instanceof 0;      // TypeError: invalid 'instanceof' operand 0
-
-function Toto() {}
-var f = Toto();        // Toto() est appelé et renvoie undefined
-var x = new Toto();
-
-x instanceof f;       // TypeError: invalid 'instanceof' operand f
-x instanceof x;       // TypeError: x is not a function
-</pre>
-
-<p>Pour corriger ces erreurs, il faut remplacer l'opérateur <code>instanceof</code> avec l'opérateur <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_typeof"><code>typeof</code></a> ou s'assurer que l'opérande droit est la fonction et non le résultat de son évaluation.</p>
-
-<pre class="brush: js example-good">typeof "test" == "string";  // true
-typeof 42 == "number"       // true
-
-function Toto() {}
-var f = Toto;               // On n'appelle pas Toto.
-var x = new Toto();
-
-x instanceof f;             // true
-x instanceof Toto;          // true
-</pre>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>L'opérateur <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/instanceof"><code>instanceof</code></a></li>
- <li>L'opérateur <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_typeof"><code>typeof</code></a></li>
-</ul>
-
-<p> </p>
diff --git a/files/fr/web/javascript/reference/errors/invalid_right_hand_side_instanceof_operand/index.md b/files/fr/web/javascript/reference/errors/invalid_right_hand_side_instanceof_operand/index.md
new file mode 100644
index 0000000000..12e1bc3e14
--- /dev/null
+++ b/files/fr/web/javascript/reference/errors/invalid_right_hand_side_instanceof_operand/index.md
@@ -0,0 +1,61 @@
+---
+title: 'TypeError: invalid ''instanceof'' operand ''x'''
+slug: Web/JavaScript/Reference/Errors/invalid_right_hand_side_instanceof_operand
+tags:
+  - Error
+  - Errors
+  - JavaScript
+  - Reference
+  - TypeError
+translation_of: Web/JavaScript/Reference/Errors/invalid_right_hand_side_instanceof_operand
+original_slug: Web/JavaScript/Reference/Erreurs/invalid_right_hand_side_instanceof_operand
+---
+{{jsSidebar("Errors")}}
+
+## Message
+
+    TypeError: invalid 'instanceof' operand "x" (Firefox)
+    TypeError: "x" is not a function (Firefox)
+    TypeError: Right-hand side of 'instanceof' is not an object (Chrome)
+    TypeError: Right-hand side of 'instanceof' is not callable (Chrome)
+
+## Type d'erreur
+
+{{jsxref("TypeError")}}
+
+## Quel est le problème ?
+
+L'opérateur [`instanceof`](/fr/docs/Web/JavaScript/Reference/Opérateurs/instanceof) attend un opérande droit qui soit un objet constructeur, c'est-à-dire un objet possédant une propriété `prototype` et qui puisse être appelé.
+
+## Exemples
+
+```js example-bad
+"test" instanceof ""; // TypeError: invalid 'instanceof' operand ""
+42 instanceof 0;      // TypeError: invalid 'instanceof' operand 0
+
+function Toto() {}
+var f = Toto();        // Toto() est appelé et renvoie undefined
+var x = new Toto();
+
+x instanceof f;       // TypeError: invalid 'instanceof' operand f
+x instanceof x;       // TypeError: x is not a function
+```
+
+Pour corriger ces erreurs, il faut remplacer l'opérateur `instanceof` avec l'opérateur [`typeof`](/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_typeof) ou s'assurer que l'opérande droit est la fonction et non le résultat de son évaluation.
+
+```js example-good
+typeof "test" == "string";  // true
+typeof 42 == "number"       // true
+
+function Toto() {}
+var f = Toto;               // On n'appelle pas Toto.
+var x = new Toto();
+
+x instanceof f;             // true
+x instanceof Toto;          // true
+```
+
+## Voir aussi
+
+- L'opérateur [`instanceof`](/fr/docs/Web/JavaScript/Reference/Opérateurs/instanceof)
+- L'opérateur [`typeof`](/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_typeof)
diff --git a/files/fr/web/javascript/reference/errors/is_not_iterable/index.html b/files/fr/web/javascript/reference/errors/is_not_iterable/index.html
deleted file mode 100644
index 1aba992ca7..0000000000
--- a/files/fr/web/javascript/reference/errors/is_not_iterable/index.html
+++ /dev/null
@@ -1,129 +0,0 @@
----
-title: 'TypeError: ''x'' is not iterable'
-slug: Web/JavaScript/Reference/Errors/is_not_iterable
-tags:
-  - Error
-  - JavaScript
-  - Reference
-  - TypeError
-translation_of: Web/JavaScript/Reference/Errors/is_not_iterable
-original_slug: Web/JavaScript/Reference/Erreurs/is_not_iterable
----
-<div>{{jsSidebar("Errors")}}</div>
-
-<h2 id="Message">Message</h2>
-
-<pre class="syntaxbox">TypeError: 'x' is not iterable (Firefox, Chrome)
-TypeError: 'x' is not a function or its return value is not iterable (Chrome)
-</pre>
-
-<h2 id="Type_d'erreur">Type d'erreur</h2>
-
-<p>{{jsxref("TypeError")}}</p>
-
-<h2 id="Quel_est_le_problème">Quel est le problème ?</h2>
-
-<p>La valeur passée comme opérande droit de <a href="/fr/docs/Web/JavaScript/Reference/Instructions/for...of"><code>for…of</code> </a>ou comme argument d'une fonction telle que {{jsxref("Promise.all")}} ou {{jsxref("TypedArray.from")}} n'est pas <a href="/fr/docs/Web/JavaScript/Reference/Les_protocoles_iteration">un objet itérable</a>.  Un objet itérable peut être un objet itérable natif tel qu'un objet {{jsxref("Array")}}, {{jsxref("String")}} ou {{jsxref("Map")}} ou le résultat d'un générateur ou un objet qui implémente <a href="/fr/docs/Web/JavaScript/Reference/Les_protocoles_iteration#Le_protocole_«_itérable_»">le protocole itérable</a>.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Parcourir_les_propriétés_d'un_objet">Parcourir les propriétés d'un objet</h3>
-
-<p>En JavaScript, les objets ne sont pas itérables car ils n'implémentent pas le <a href="/fr/docs/Web/JavaScript/Reference/Les_protocoles_iteration#Le_protocole_«_itérable_»">protocole itérable</a>. On ne peut donc pas utiliser <code>for...of</code> afin d'en parcourir les propriétés.</p>
-
-<pre class="brush: js example-bad">var obj = { 'France': 'Paris', 'England': 'London' };
-for (let p of obj) { // TypeError: obj is not iterable
-    // …
-}
-</pre>
-
-<p>Si on souhaite utiliser un itérateur pour parcourir les propriétés (leurs noms ou leurs valeurs), on pourra utiliser les méthodes {{jsxref("Object.keys")}} ou {{jsxref("Object.entries")}} qui fournissent des itérateurs :</p>
-
-<pre class="brush: js example-good">var obj = { 'France': 'Paris', 'England': 'London' };
-// On parcourt les noms des propriétés
-for (let country of Object.keys(obj)) {
-    var capital = obj[country];
-    console.log(country, capital);
-}
-
-for (const [country, capital] of Object.entries(obj))
-    console.log(country, capital);
-</pre>
-
-<p>On pourrait également utiliser un objet {{jsxref("Map")}} :</p>
-
-<pre class="brush: js example-good">var map = new Map;
-map.set('France', 'Paris');
-map.set('England', 'London');
-// On parcourt les noms des propriétés
-for (let country of map.keys()) {
-    let capital = map[country];
-    console.log(country, capital);
-}
-
-for (let capital of map.values())
-    console.log(capital);
-
-for (const [country, capital] of map.entries())
-    console.log(country, capital);
-</pre>
-
-<h3 id="Itérer_grâce_à_un_générateur">Itérer grâce à un générateur</h3>
-
-<p><a href="/fr/docs/Web/JavaScript/Guide/iterateurs_et_generateurs">Les générateurs</a> sont des fonctions qui, lorsqu'elles sont appelées, produisent des objets itérables.</p>
-
-<pre class="brush: js example-bad">function* generate(a, b) {
-  yield a;
-  yield b;
-}
-
-for (let x of generate) // TypeError: generate is not iterable
-    console.log(x);
-</pre>
-
-<p>Lorsqu'elles ne sont pas appelées, l'objet {{jsxref("Function")}} correspondant au générateur peut être appelé mais il n'est pass itérable. Il ne faut donc pas oublier d'invoquer le générateur afin de parcourir les valeurs de l'itérateur qu'il produit.</p>
-
-<pre class="brush: js example-good">function* generate(a, b) {
-    yield a;
-    yield b;
-}
-
-for (let x of generate(1,2))
-    console.log(x);
-</pre>
-
-<h3 id="Parcourir_un_itérable_spécifique">Parcourir un itérable spécifique</h3>
-
-<p>Les itérables spécifiques (<em>custom iterables</em>) peuvent être créés en implémentant la méthode {{jsxref("Symbol.iterator")}}. En implémentant cette méthode, il faut s'assurer que la valeur renvoyée est un objet qui est un itérateur. Autrement dit, l'objet renvoyé doit posséder une méthode <code>next()</code>.</p>
-
-<pre class="brush: js example-bad">const monIterableVide = {
-    [Symbol.iterator]() {
-        return [] // [] est un iterable mais pas un itérateur
-                  // car il n'a pas de méthode next
-    }
-}
-
-Array.from(monIterableVide);  // TypeError: monIterableVide is not iterable
-</pre>
-
-<p>Voici une implémentation correcte :</p>
-
-<pre class="brush: js example-good">const monIterableVide = {
-    [Symbol.iterator]() {
-        return [][Symbol.iterator]()
-    }
-}
-
-Array.from(monIterableVide);  // []
-</pre>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/JavaScript/Reference/Les_protocoles_iteration#Le_protocole_«_itérable_»">Le protocole itérable</a></li>
- <li>{{jsxref("Object.keys")}}</li>
- <li>{{jsxref("Object.entries")}}</li>
- <li>{{jsxref("Map")}}</li>
- <li><a href="/fr/docs/Web/JavaScript/Guide/iterateurs_et_generateurs#Générateurs">Les générateurs</a></li>
- <li><code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/for...of">for…of</a></code></li>
-</ul>
diff --git a/files/fr/web/javascript/reference/errors/is_not_iterable/index.md b/files/fr/web/javascript/reference/errors/is_not_iterable/index.md
new file mode 100644
index 0000000000..f2c751c136
--- /dev/null
+++ b/files/fr/web/javascript/reference/errors/is_not_iterable/index.md
@@ -0,0 +1,133 @@
+---
+title: 'TypeError: ''x'' is not iterable'
+slug: Web/JavaScript/Reference/Errors/is_not_iterable
+tags:
+  - Error
+  - JavaScript
+  - Reference
+  - TypeError
+translation_of: Web/JavaScript/Reference/Errors/is_not_iterable
+original_slug: Web/JavaScript/Reference/Erreurs/is_not_iterable
+---
+{{jsSidebar("Errors")}}
+
+## Message
+
+    TypeError: 'x' is not iterable (Firefox, Chrome)
+    TypeError: 'x' is not a function or its return value is not iterable (Chrome)
+
+## Type d'erreur
+
+{{jsxref("TypeError")}}
+
+## Quel est le problème ?
+
+La valeur passée comme opérande droit de [`for…of` ](/fr/docs/Web/JavaScript/Reference/Instructions/for...of)ou comme argument d'une fonction telle que {{jsxref("Promise.all")}} ou {{jsxref("TypedArray.from")}} n'est pas [un objet itérable](/fr/docs/Web/JavaScript/Reference/Les_protocoles_iteration).  Un objet itérable peut être un objet itérable natif tel qu'un objet {{jsxref("Array")}}, {{jsxref("String")}} ou {{jsxref("Map")}} ou le résultat d'un générateur ou un objet qui implémente [le protocole itérable](/fr/docs/Web/JavaScript/Reference/Les_protocoles_iteration#Le_protocole_«_itérable_»).
+
+## Exemples
+
+### Parcourir les propriétés d'un objet
+
+En JavaScript, les objets ne sont pas itérables car ils n'implémentent pas le [protocole itérable](/fr/docs/Web/JavaScript/Reference/Les_protocoles_iteration#Le_protocole_«_itérable_»). On ne peut donc pas utiliser `for...of` afin d'en parcourir les propriétés.
+
+```js example-bad
+var obj = { 'France': 'Paris', 'England': 'London' };
+for (let p of obj) { // TypeError: obj is not iterable
+    // …
+}
+```
+
+Si on souhaite utiliser un itérateur pour parcourir les propriétés (leurs noms ou leurs valeurs), on pourra utiliser les méthodes {{jsxref("Object.keys")}} ou {{jsxref("Object.entries")}} qui fournissent des itérateurs :
+
+```js example-good
+var obj = { 'France': 'Paris', 'England': 'London' };
+// On parcourt les noms des propriétés
+for (let country of Object.keys(obj)) {
+    var capital = obj[country];
+    console.log(country, capital);
+}
+
+for (const [country, capital] of Object.entries(obj))
+    console.log(country, capital);
+```
+
+On pourrait également utiliser un objet {{jsxref("Map")}} :
+
+```js example-good
+var map = new Map;
+map.set('France', 'Paris');
+map.set('England', 'London');
+// On parcourt les noms des propriétés
+for (let country of map.keys()) {
+    let capital = map[country];
+    console.log(country, capital);
+}
+
+for (let capital of map.values())
+    console.log(capital);
+
+for (const [country, capital] of map.entries())
+    console.log(country, capital);
+```
+
+### Itérer grâce à un générateur
+
+[Les générateurs](/fr/docs/Web/JavaScript/Guide/iterateurs_et_generateurs) sont des fonctions qui, lorsqu'elles sont appelées, produisent des objets itérables.
+
+```js example-bad
+function* generate(a, b) {
+  yield a;
+  yield b;
+}
+
+for (let x of generate) // TypeError: generate is not iterable
+    console.log(x);
+```
+
+Lorsqu'elles ne sont pas appelées, l'objet {{jsxref("Function")}} correspondant au générateur peut être appelé mais il n'est pass itérable. Il ne faut donc pas oublier d'invoquer le générateur afin de parcourir les valeurs de l'itérateur qu'il produit.
+
+```js example-good
+function* generate(a, b) {
+    yield a;
+    yield b;
+}
+
+for (let x of generate(1,2))
+    console.log(x);
+```
+
+### Parcourir un itérable spécifique
+
+Les itérables spécifiques (_custom iterables_) peuvent être créés en implémentant la méthode {{jsxref("Symbol.iterator")}}. En implémentant cette méthode, il faut s'assurer que la valeur renvoyée est un objet qui est un itérateur. Autrement dit, l'objet renvoyé doit posséder une méthode `next()`.
+
+```js example-bad
+const monIterableVide = {
+    [Symbol.iterator]() {
+        return [] // [] est un iterable mais pas un itérateur
+                  // car il n'a pas de méthode next
+    }
+}
+
+Array.from(monIterableVide);  // TypeError: monIterableVide is not iterable
+```
+
+Voici une implémentation correcte :
+
+```js example-good
+const monIterableVide = {
+    [Symbol.iterator]() {
+        return [][Symbol.iterator]()
+    }
+}
+
+Array.from(monIterableVide);  // []
+```
+
+## Voir aussi
+
+- [Le protocole itérable](/fr/docs/Web/JavaScript/Reference/Les_protocoles_iteration#Le_protocole_«_itérable_»)
+- {{jsxref("Object.keys")}}
+- {{jsxref("Object.entries")}}
+- {{jsxref("Map")}}
+- [Les générateurs](/fr/docs/Web/JavaScript/Guide/iterateurs_et_generateurs#Générateurs)
+- [`for…of`](/fr/docs/Web/JavaScript/Reference/Instructions/for...of)
diff --git a/files/fr/web/javascript/reference/errors/json_bad_parse/index.html b/files/fr/web/javascript/reference/errors/json_bad_parse/index.html
deleted file mode 100644
index 800d8fd05f..0000000000
--- a/files/fr/web/javascript/reference/errors/json_bad_parse/index.html
+++ /dev/null
@@ -1,113 +0,0 @@
----
-title: 'SyntaxError: JSON.parse: bad parsing'
-slug: Web/JavaScript/Reference/Errors/JSON_bad_parse
-tags:
-  - Erreurs
-  - JSON
-  - JavaScript
-  - NeedsExample
-  - SyntaxError
-translation_of: Web/JavaScript/Reference/Errors/JSON_bad_parse
-original_slug: Web/JavaScript/Reference/Erreurs/JSON_bad_parse
----
-<div>{{jsSidebar("Errors")}}</div>
-
-<h2 id="Message">Message</h2>
-
-<pre class="syntaxbox">SyntaxError: JSON.parse: unterminated string literal
-SyntaxError: JSON.parse: bad control character in string literal
-SyntaxError: JSON.parse: bad character in string literal
-SyntaxError: JSON.parse: bad Unicode escape
-SyntaxError: JSON.parse: bad escape character
-SyntaxError: JSON.parse: unterminated string
-SyntaxError: JSON.parse: no number after minus sign
-SyntaxError: JSON.parse: unexpected non-digit
-SyntaxError: JSON.parse: missing digits after decimal point
-SyntaxError: JSON.parse: unterminated fractional number
-SyntaxError: JSON.parse: missing digits after exponent indicator
-SyntaxError: JSON.parse: missing digits after exponent sign
-SyntaxError: JSON.parse: exponent part is missing a number
-SyntaxError: JSON.parse: unexpected end of data
-SyntaxError: JSON.parse: unexpected keyword
-SyntaxError: JSON.parse: unexpected character
-SyntaxError: JSON.parse: end of data while reading object contents
-SyntaxError: JSON.parse: expected property name or '}'
-SyntaxError: JSON.parse: end of data when ',' or ']' was expected
-SyntaxError: JSON.parse: expected ',' or ']' after array element
-SyntaxError: JSON.parse: end of data when property name was expected
-SyntaxError: JSON.parse: expected double-quoted property name
-SyntaxError: JSON.parse: end of data after property name when ':' was expected
-SyntaxError: JSON.parse: expected ':' after property name in object
-SyntaxError: JSON.parse: end of data after property value in object
-SyntaxError: JSON.parse: expected ',' or '}' after property value in object
-SyntaxError: JSON.parse: expected ',' or '}' after property-value pair in object literal
-SyntaxError: JSON.parse: property names must be double-quoted strings
-SyntaxError: JSON.parse: expected property name or '}'
-SyntaxError: JSON.parse: unexpected character
-SyntaxError: JSON.parse: unexpected non-whitespace character after JSON data
-SyntaxError: JSON.parse Error: Invalid character at position {0} (Edge)
-</pre>
-
-<h2 id="Type_d'erreur">Type d'erreur</h2>
-
-<p>{{jsxref("SyntaxError")}}</p>
-
-<h2 id="Quel_est_le_problème">Quel est le problème ?</h2>
-
-<p>Lorsque la méthode {{jsxref("JSON.parse()")}} analyse (<em>parse</em>) une chaîne de caractères en JSON, cette chaîne doit être du JSON valide et une exception sera levée si la syntaxe est incorrecte.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="JSON.parse()_n'accepte_pas_les_virgules_en_fin_de_tableau"><code>JSON.parse()</code> n'accepte pas les virgules en fin de tableau</h3>
-
-<p>Les deux lignes qui suivent déclencheront une exception <code>SyntaxError</code> :</p>
-
-<pre class="brush: js example-bad">JSON.parse('[1, 2, 3, 4, ]');
-JSON.parse('{"foo" : 1, }');
-// SyntaxError JSON.parse: unexpected character
-// at line 1 column 14 of the JSON data
-</pre>
-
-<p>Pour que la méthode puisse analyser le JSON correctement, on évitera les virgules en fin de tableau :</p>
-
-<pre class="brush: js example-good">JSON.parse('[1, 2, 3, 4 ]');
-JSON.parse('{"foo" : 1 }');</pre>
-
-<h3 id="Les_noms_des_propriétés_doivent_être_entre_double_quotes">Les noms des propriétés doivent être entre double quotes</h3>
-
-<p>On ne peut pas utiliser de quotes simples pour indiquer le nom d'une propriété (ex. <code>'toto'</code>).</p>
-
-<pre class="brush: js example-bad">JSON.parse("{'toto' : 1 }");
-// SyntaxError: JSON.parse: expected property name or '}'
-// at line 1 column 2 of the JSON data</pre>
-
-<p>À la place, on écrira <code>"toto"</code> :</p>
-
-<pre class="brush: js example-good">JSON.parse('{"toto" : 1 }');</pre>
-
-<h3 id="Zéros_en_début_de_nombres_et_points_décimaux">Zéros en début de nombres et points décimaux</h3>
-
-<p>On ne peut pas utiliser de zéros en début de nombre (ex. 01). Par ailleurs, les nombres décimaux doivent avoir une partie décimale, on ne peut pas terminer un nombre par un point.</p>
-
-<pre class="brush: js example-bad">JSON.parse('{"toto" : 01 }');
-// SyntaxError: JSON.parse: expected ',' or '}' after property value
-// in object at line 1 column 2 of the JSON data
-
-JSON.parse('{"toto" : 1. }');
-// SyntaxError: JSON.parse: unterminated fractional number
-// at line 1 column 2 of the JSON data
-</pre>
-
-<p>Pour que cela fonctionne, on écrira simplement 1 sans 0 devant et au moins un chiffre après le séparateur décimal :</p>
-
-<pre class="brush: js example-good">JSON.parse('{"toto" : 1 }');
-JSON.parse('{"toto" : 1.0 }');
-</pre>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("JSON")}}</li>
- <li>{{jsxref("JSON.parse()")}}</li>
- <li>{{jsxref("JSON.stringify()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/errors/json_bad_parse/index.md b/files/fr/web/javascript/reference/errors/json_bad_parse/index.md
new file mode 100644
index 0000000000..870dc1812b
--- /dev/null
+++ b/files/fr/web/javascript/reference/errors/json_bad_parse/index.md
@@ -0,0 +1,119 @@
+---
+title: 'SyntaxError: JSON.parse: bad parsing'
+slug: Web/JavaScript/Reference/Errors/JSON_bad_parse
+tags:
+  - Erreurs
+  - JSON
+  - JavaScript
+  - NeedsExample
+  - SyntaxError
+translation_of: Web/JavaScript/Reference/Errors/JSON_bad_parse
+original_slug: Web/JavaScript/Reference/Erreurs/JSON_bad_parse
+---
+{{jsSidebar("Errors")}}
+
+## Message
+
+    SyntaxError: JSON.parse: unterminated string literal
+    SyntaxError: JSON.parse: bad control character in string literal
+    SyntaxError: JSON.parse: bad character in string literal
+    SyntaxError: JSON.parse: bad Unicode escape
+    SyntaxError: JSON.parse: bad escape character
+    SyntaxError: JSON.parse: unterminated string
+    SyntaxError: JSON.parse: no number after minus sign
+    SyntaxError: JSON.parse: unexpected non-digit
+    SyntaxError: JSON.parse: missing digits after decimal point
+    SyntaxError: JSON.parse: unterminated fractional number
+    SyntaxError: JSON.parse: missing digits after exponent indicator
+    SyntaxError: JSON.parse: missing digits after exponent sign
+    SyntaxError: JSON.parse: exponent part is missing a number
+    SyntaxError: JSON.parse: unexpected end of data
+    SyntaxError: JSON.parse: unexpected keyword
+    SyntaxError: JSON.parse: unexpected character
+    SyntaxError: JSON.parse: end of data while reading object contents
+    SyntaxError: JSON.parse: expected property name or '}'
+    SyntaxError: JSON.parse: end of data when ',' or ']' was expected
+    SyntaxError: JSON.parse: expected ',' or ']' after array element
+    SyntaxError: JSON.parse: end of data when property name was expected
+    SyntaxError: JSON.parse: expected double-quoted property name
+    SyntaxError: JSON.parse: end of data after property name when ':' was expected
+    SyntaxError: JSON.parse: expected ':' after property name in object
+    SyntaxError: JSON.parse: end of data after property value in object
+    SyntaxError: JSON.parse: expected ',' or '}' after property value in object
+    SyntaxError: JSON.parse: expected ',' or '}' after property-value pair in object literal
+    SyntaxError: JSON.parse: property names must be double-quoted strings
+    SyntaxError: JSON.parse: expected property name or '}'
+    SyntaxError: JSON.parse: unexpected character
+    SyntaxError: JSON.parse: unexpected non-whitespace character after JSON data
+    SyntaxError: JSON.parse Error: Invalid character at position {0} (Edge)
+
+## Type d'erreur
+
+{{jsxref("SyntaxError")}}
+
+## Quel est le problème ?
+
+Lorsque la méthode {{jsxref("JSON.parse()")}} analyse (_parse_) une chaîne de caractères en JSON, cette chaîne doit être du JSON valide et une exception sera levée si la syntaxe est incorrecte.
+
+## Exemples
+
+### `JSON.parse()` n'accepte pas les virgules en fin de tableau
+
+Les deux lignes qui suivent déclencheront une exception `SyntaxError` :
+
+```js example-bad
+JSON.parse('[1, 2, 3, 4, ]');
+JSON.parse('{"foo" : 1, }');
+// SyntaxError JSON.parse: unexpected character
+// at line 1 column 14 of the JSON data
+```
+
+Pour que la méthode puisse analyser le JSON correctement, on évitera les virgules en fin de tableau :
+
+```js example-good
+JSON.parse('[1, 2, 3, 4 ]');
+JSON.parse('{"foo" : 1 }');
+```
+
+### Les noms des propriétés doivent être entre double quotes
+
+On ne peut pas utiliser de quotes simples pour indiquer le nom d'une propriété (ex. `'toto'`).
+
+```js example-bad
+JSON.parse("{'toto' : 1 }");
+// SyntaxError: JSON.parse: expected property name or '}'
+// at line 1 column 2 of the JSON data
+```
+
+À la place, on écrira `"toto"` :
+
+```js example-good
+JSON.parse('{"toto" : 1 }');
+```
+
+### Zéros en début de nombres et points décimaux
+
+On ne peut pas utiliser de zéros en début de nombre (ex. 01). Par ailleurs, les nombres décimaux doivent avoir une partie décimale, on ne peut pas terminer un nombre par un point.
+
+```js example-bad
+JSON.parse('{"toto" : 01 }');
+// SyntaxError: JSON.parse: expected ',' or '}' after property value
+// in object at line 1 column 2 of the JSON data
+
+JSON.parse('{"toto" : 1. }');
+// SyntaxError: JSON.parse: unterminated fractional number
+// at line 1 column 2 of the JSON data
+```
+
+Pour que cela fonctionne, on écrira simplement 1 sans 0 devant et au moins un chiffre après le séparateur décimal :
+
+```js example-good
+JSON.parse('{"toto" : 1 }');
+JSON.parse('{"toto" : 1.0 }');
+```
+
+## Voir aussi
+
+- {{jsxref("JSON")}}
+- {{jsxref("JSON.parse()")}}
+- {{jsxref("JSON.stringify()")}}
diff --git a/files/fr/web/javascript/reference/errors/malformed_formal_parameter/index.html b/files/fr/web/javascript/reference/errors/malformed_formal_parameter/index.html
deleted file mode 100644
index a06f5cc5c9..0000000000
--- a/files/fr/web/javascript/reference/errors/malformed_formal_parameter/index.html
+++ /dev/null
@@ -1,65 +0,0 @@
----
-title: 'SyntaxError: Malformed formal parameter'
-slug: Web/JavaScript/Reference/Errors/Malformed_formal_parameter
-tags:
-  - Erreurs
-  - JavaScript
-  - SyntaxError
-translation_of: Web/JavaScript/Reference/Errors/Malformed_formal_parameter
-original_slug: Web/JavaScript/Reference/Erreurs/Malformed_formal_parameter
----
-<div>{{jsSidebar("Errors")}}</div>
-
-<h2 id="Message">Message</h2>
-
-<pre class="syntaxbox">SyntaxError: Expected {x} (Edge)
-SyntaxError: malformed formal parameter (Firefox)
-</pre>
-
-<h2 id="Type_d'erreur">Type d'erreur</h2>
-
-<p>{{jsxref("SyntaxError")}}</p>
-
-<h2 id="Quel_est_le_problème">Quel est le problème ?</h2>
-
-<p>La méthode {{jsxref("Function()")}} a été utilisée avec au moins deux arguments. Le dernier argument correspond au code source de la nouvelle fonction qui est créée. Les autres arguments sont la liste des arguments passés à la fonction.</p>
-
-<p>C'est cette liste d'arguments qui est, pour une certaine raison, invalide. Il s'agit peut-être d'un mot-clé (<code>if</code> ou <code>var</code> par exemple) utilisé comme un nom d'argument, ou d'un signe de ponctuation mal placé. Il peut également s'agir d'une valeur invalide comme un nombre ou un objet.</p>
-
-<h2 id="OK_mais_pourquoi_cette_formulation_étrange">OK mais pourquoi cette formulation étrange ?</h2>
-
-<p>En effet, "Formal parameter" est une manière étrange de dire  « argument de fonction ». Le mot "malformed" (malformé) est utilisé car les ingénieurs travaillant sur Firefox engineers apprécient énormément les romans gothiques du XIXe.</p>
-
-<h2 id="Examples">Examples</h2>
-
-<h3 id="Exemples_invalides">Exemples invalides</h3>
-
-<pre class="brush: js example-bad">var f = Function("x y", "return x + y;");
-// SyntaxError (virgule manquante)
-
-var f = Function("x,", "return x;");
-// SyntaxError (virgule mal placée)
-
-var f = Function(37, "console.log('OK')");
-// SyntaxError (des nombres ne peuvent être des noms)
-</pre>
-
-<h3 id="Exemples_valides">Exemples valides</h3>
-
-<pre class="brush: js example-good"> // Ponctuation correcte
-var f = Function("x, y", "return x + y;");
-
-var f = Function("x", "return x;");
-
-// Voici une alternative plus rapide
-// si vous pouvez éviter Function
-var f = function (x) { return x; };
-</pre>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Function()")}}</li>
- <li><a href="/fr/docs/Web/JavaScript/Guide/Fonctions">Le chapitre du Guide JavaScript sur les fonctions</a></li>
- <li><a href="https://www.gutenberg.org/ebooks/84"><em>Frankenstein</em> par Mary Wollstonecraft Shelley</a> ("<em>Cursed (although I curse myself) be the hands that formed you! You have made me wretched beyond expression. You have left me no power to consider whether I am just to you or not. Begone! Relieve me from the sight of your detested form.</em>")</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/errors/malformed_formal_parameter/index.md b/files/fr/web/javascript/reference/errors/malformed_formal_parameter/index.md
new file mode 100644
index 0000000000..bc5d9e5ba0
--- /dev/null
+++ b/files/fr/web/javascript/reference/errors/malformed_formal_parameter/index.md
@@ -0,0 +1,64 @@
+---
+title: 'SyntaxError: Malformed formal parameter'
+slug: Web/JavaScript/Reference/Errors/Malformed_formal_parameter
+tags:
+  - Erreurs
+  - JavaScript
+  - SyntaxError
+translation_of: Web/JavaScript/Reference/Errors/Malformed_formal_parameter
+original_slug: Web/JavaScript/Reference/Erreurs/Malformed_formal_parameter
+---
+{{jsSidebar("Errors")}}
+
+## Message
+
+    SyntaxError: Expected {x} (Edge)
+    SyntaxError: malformed formal parameter (Firefox)
+
+## Type d'erreur
+
+{{jsxref("SyntaxError")}}
+
+## Quel est le problème ?
+
+La méthode {{jsxref("Function()")}} a été utilisée avec au moins deux arguments. Le dernier argument correspond au code source de la nouvelle fonction qui est créée. Les autres arguments sont la liste des arguments passés à la fonction.
+
+C'est cette liste d'arguments qui est, pour une certaine raison, invalide. Il s'agit peut-être d'un mot-clé (`if` ou `var` par exemple) utilisé comme un nom d'argument, ou d'un signe de ponctuation mal placé. Il peut également s'agir d'une valeur invalide comme un nombre ou un objet.
+
+## OK mais pourquoi cette formulation étrange ?
+
+En effet, "Formal parameter" est une manière étrange de dire  « argument de fonction ». Le mot "malformed" (malformé) est utilisé car les ingénieurs travaillant sur Firefox engineers apprécient énormément les romans gothiques du XIXe.
+
+## Examples
+
+### Exemples invalides
+
+```js example-bad
+var f = Function("x y", "return x + y;");
+// SyntaxError (virgule manquante)
+
+var f = Function("x,", "return x;");
+// SyntaxError (virgule mal placée)
+
+var f = Function(37, "console.log('OK')");
+// SyntaxError (des nombres ne peuvent être des noms)
+```
+
+### Exemples valides
+
+```js example-good
+ // Ponctuation correcte
+var f = Function("x, y", "return x + y;");
+
+var f = Function("x", "return x;");
+
+// Voici une alternative plus rapide
+// si vous pouvez éviter Function
+var f = function (x) { return x; };
+```
+
+## Voir aussi
+
+- {{jsxref("Function()")}}
+- [Le chapitre du Guide JavaScript sur les fonctions](/fr/docs/Web/JavaScript/Guide/Fonctions)
+- [_Frankenstein_ par Mary Wollstonecraft Shelley](https://www.gutenberg.org/ebooks/84) ("_Cursed (although I curse myself) be the hands that formed you! You have made me wretched beyond expression. You have left me no power to consider whether I am just to you or not. Begone! Relieve me from the sight of your detested form._")
diff --git a/files/fr/web/javascript/reference/errors/malformed_uri/index.html b/files/fr/web/javascript/reference/errors/malformed_uri/index.html
deleted file mode 100644
index dfe037e1aa..0000000000
--- a/files/fr/web/javascript/reference/errors/malformed_uri/index.html
+++ /dev/null
@@ -1,67 +0,0 @@
----
-title: 'URIError: malformed URI sequence'
-slug: Web/JavaScript/Reference/Errors/Malformed_URI
-tags:
-  - Erreurs
-  - JavaScript
-  - URIError
-translation_of: Web/JavaScript/Reference/Errors/Malformed_URI
-original_slug: Web/JavaScript/Reference/Erreurs/Malformed_URI
----
-<div>{{jsSidebar("Errors")}}</div>
-
-<h2 id="Message">Message</h2>
-
-<pre class="syntaxbox">URIError: The URI to be encoded contains invalid character (Edge)
-URIError: malformed URI sequence (Firefox)
-URIError: URI malformed (Chrome)
-</pre>
-
-<h2 id="Type_d'erreur">Type d'erreur</h2>
-
-<p>{{jsxref("URIError")}}</p>
-
-<h2 id="Quel_est_le_problème">Quel est le problème ?</h2>
-
-<p>Il y a eu une erreur lors de l'encodage ou du décodage de l'URI. Un argument fourni à {{jsxref("decodeURI")}}, {{jsxref("encodeURI")}}, {{jsxref("encodeURIComponent")}} ou à {{jsxref("decodeURIComponent")}} n'était pas valide et la fonction concernée n'a pas pu encoder ou décoder la valeur correctement.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Encodage">Encodage</h3>
-
-<p>L'encodage permet de remplacer certains caractères par une, deux, trois voire quatre séquences d'échappement qui représente l'encodage UTF-8 du caractère. Une exception {{jsxref("URIError")}} sera levée si on tente d'encoder un caractère <em>surrogate</em> qui ne fait pas partie d'une paire de codets :</p>
-
-<pre class="brush: js example-bad">encodeURI('\uD800');
-// "URIError: malformed URI sequence"
-
-encodeURI('\uDFFF');
-// "URIError: malformed URI sequence"
-</pre>
-
-<p>En revanche, si on dispose de la paire de codets :</p>
-
-<pre class="brush: js example-good">encodeURI('\uD800\uDFFF');
-// "%F0%90%8F%BF"</pre>
-
-<h3 id="Décodage">Décodage</h3>
-
-<p>Le décodage permet de remplacer chaque séquence d'échappement dans le composant encodé par le caractère qu'elle représente. S'il n'existe aucun caractère correspondant, une exception sera déclenchée :</p>
-
-<pre class="brush: js example-bad">decodeURIComponent('%E0%A4%A');
-// "URIError: malformed URI sequence"
-</pre>
-
-<p>Avec la valeur d'entrée correcte, on a généralement quelque chose qui ressemble à :</p>
-
-<pre class="brush: js example-good">decodeURIComponent('JavaScript_%D1%88%D0%B5%D0%BB%D0%BB%D1%8B');
-// "JavaScript_шеллы"</pre>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("URIError")}}</li>
- <li>{{jsxref("decodeURI")}}</li>
- <li>{{jsxref("encodeURI")}}</li>
- <li>{{jsxref("encodeURIComponent")}}</li>
- <li>{{jsxref("decodeURIComponent")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/errors/malformed_uri/index.md b/files/fr/web/javascript/reference/errors/malformed_uri/index.md
new file mode 100644
index 0000000000..3a4c4f4d08
--- /dev/null
+++ b/files/fr/web/javascript/reference/errors/malformed_uri/index.md
@@ -0,0 +1,70 @@
+---
+title: 'URIError: malformed URI sequence'
+slug: Web/JavaScript/Reference/Errors/Malformed_URI
+tags:
+  - Erreurs
+  - JavaScript
+  - URIError
+translation_of: Web/JavaScript/Reference/Errors/Malformed_URI
+original_slug: Web/JavaScript/Reference/Erreurs/Malformed_URI
+---
+{{jsSidebar("Errors")}}
+
+## Message
+
+    URIError: The URI to be encoded contains invalid character (Edge)
+    URIError: malformed URI sequence (Firefox)
+    URIError: URI malformed (Chrome)
+
+## Type d'erreur
+
+{{jsxref("URIError")}}
+
+## Quel est le problème ?
+
+Il y a eu une erreur lors de l'encodage ou du décodage de l'URI. Un argument fourni à {{jsxref("decodeURI")}}, {{jsxref("encodeURI")}}, {{jsxref("encodeURIComponent")}} ou à {{jsxref("decodeURIComponent")}} n'était pas valide et la fonction concernée n'a pas pu encoder ou décoder la valeur correctement.
+
+## Exemples
+
+### Encodage
+
+L'encodage permet de remplacer certains caractères par une, deux, trois voire quatre séquences d'échappement qui représente l'encodage UTF-8 du caractère. Une exception {{jsxref("URIError")}} sera levée si on tente d'encoder un caractère _surrogate_ qui ne fait pas partie d'une paire de codets :
+
+```js example-bad
+encodeURI('\uD800');
+// "URIError: malformed URI sequence"
+
+encodeURI('\uDFFF');
+// "URIError: malformed URI sequence"
+```
+
+En revanche, si on dispose de la paire de codets :
+
+```js example-good
+encodeURI('\uD800\uDFFF');
+// "%F0%90%8F%BF"
+```
+
+### Décodage
+
+Le décodage permet de remplacer chaque séquence d'échappement dans le composant encodé par le caractère qu'elle représente. S'il n'existe aucun caractère correspondant, une exception sera déclenchée :
+
+```js example-bad
+decodeURIComponent('%E0%A4%A');
+// "URIError: malformed URI sequence"
+```
+
+Avec la valeur d'entrée correcte, on a généralement quelque chose qui ressemble à :
+
+```js example-good
+decodeURIComponent('JavaScript_%D1%88%D0%B5%D0%BB%D0%BB%D1%8B');
+// "JavaScript_шеллы"
+```
+
+## Voir aussi
+
+- {{jsxref("URIError")}}
+- {{jsxref("decodeURI")}}
+- {{jsxref("encodeURI")}}
+- {{jsxref("encodeURIComponent")}}
+- {{jsxref("decodeURIComponent")}}
diff --git a/files/fr/web/javascript/reference/errors/missing_bracket_after_list/index.html b/files/fr/web/javascript/reference/errors/missing_bracket_after_list/index.html
deleted file mode 100644
index c51fef7551..0000000000
--- a/files/fr/web/javascript/reference/errors/missing_bracket_after_list/index.html
+++ /dev/null
@@ -1,58 +0,0 @@
----
-title: 'SyntaxError: missing ] after element list'
-slug: Web/JavaScript/Reference/Errors/Missing_bracket_after_list
-tags:
-  - Erreurs
-  - JavaScript
-  - Reference
-  - SyntaxError
-translation_of: Web/JavaScript/Reference/Errors/Missing_bracket_after_list
-original_slug: Web/JavaScript/Reference/Erreurs/Missing_bracket_after_list
----
-<div>{{jsSidebar("Errors")}}</div>
-
-<h2 id="Message">Message</h2>
-
-<pre class="syntaxbox">SyntaxError: missing ] after element list
-</pre>
-
-<h2 id="Type_d'erreur">Type d'erreur</h2>
-
-<p>{{jsxref("SyntaxError")}}.</p>
-
-<h2 id="Quel_est_le_problème">Quel est le problème ?</h2>
-
-<p>Il y a une erreur dans le littéral de tableau qui est uilisé. Il manque un crochet fermant ("<code>]</code>") ou une virgule qui sépare les éléments.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Littéraux_de_tableaux_incomplets">Littéraux de tableaux incomplets</h3>
-
-<pre class="brush: js example-bad">var liste = [1, 2,
-
-var instruments = [
-  "Ukulele",
-  "Guitare",
-  "Piano"
-};
-
-var data = [{toto: "truc"} {titi: "bidule"}];
-</pre>
-
-<p>Les versions correctes seraient :</p>
-
-<pre class="brush: js example-good">var liste = [1, 2];
-
-var instruments = [
- "Ukulele",
- "Guitare",
- "Piano"
-];
-
-var data = [{toto: "truc"}, {titi: "bidule"}];</pre>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Array")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/errors/missing_bracket_after_list/index.md b/files/fr/web/javascript/reference/errors/missing_bracket_after_list/index.md
new file mode 100644
index 0000000000..1aa8577010
--- /dev/null
+++ b/files/fr/web/javascript/reference/errors/missing_bracket_after_list/index.md
@@ -0,0 +1,58 @@
+---
+title: 'SyntaxError: missing ] after element list'
+slug: Web/JavaScript/Reference/Errors/Missing_bracket_after_list
+tags:
+  - Erreurs
+  - JavaScript
+  - Reference
+  - SyntaxError
+translation_of: Web/JavaScript/Reference/Errors/Missing_bracket_after_list
+original_slug: Web/JavaScript/Reference/Erreurs/Missing_bracket_after_list
+---
+{{jsSidebar("Errors")}}
+
+## Message
+
+    SyntaxError: missing ] after element list
+
+## Type d'erreur
+
+{{jsxref("SyntaxError")}}.
+
+## Quel est le problème ?
+
+Il y a une erreur dans le littéral de tableau qui est uilisé. Il manque un crochet fermant ("`]`") ou une virgule qui sépare les éléments.
+
+## Exemples
+
+### Littéraux de tableaux incomplets
+
+```js example-bad
+var liste = [1, 2,
+
+var instruments = [
+  "Ukulele",
+  "Guitare",
+  "Piano"
+};
+
+var data = [{toto: "truc"} {titi: "bidule"}];
+```
+
+Les versions correctes seraient :
+
+```js example-good
+var liste = [1, 2];
+
+var instruments = [
+ "Ukulele",
+ "Guitare",
+ "Piano"
+];
+
+var data = [{toto: "truc"}, {titi: "bidule"}];
+```
+
+## Voir aussi
+
+- {{jsxref("Array")}}
diff --git a/files/fr/web/javascript/reference/errors/missing_colon_after_property_id/index.html b/files/fr/web/javascript/reference/errors/missing_colon_after_property_id/index.html
deleted file mode 100644
index 9e6595726c..0000000000
--- a/files/fr/web/javascript/reference/errors/missing_colon_after_property_id/index.html
+++ /dev/null
@@ -1,78 +0,0 @@
----
-title: 'SyntaxError: missing : after property id'
-slug: Web/JavaScript/Reference/Errors/Missing_colon_after_property_id
-tags:
-  - Erreurs
-  - JavaScript
-  - SyntaxError
-translation_of: Web/JavaScript/Reference/Errors/Missing_colon_after_property_id
-original_slug: Web/JavaScript/Reference/Erreurs/Missing_colon_after_property_id
----
-<div>{{jsSidebar("Errors")}}</div>
-
-<h2 id="Message">Message</h2>
-
-<pre class="syntaxbox">SyntaxError: Expected ':' (Edge)
-SyntaxError: missing : after property id (Firefox)
-</pre>
-
-<h2 id="Type_d'erreur">Type d'erreur</h2>
-
-<p>{{jsxref("SyntaxError")}}</p>
-
-<h2 id="Quel_est_le_problème">Quel est le problème ?</h2>
-
-<p>Lorsqu'on crée un objet en utilisant un <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Initialisateur_objet">initialisateur d'objet</a>, il faut utiliser un deux-points ( : ) afin de séparer les clés des valeurs pour les propriétés de l'objet.</p>
-
-<pre class="brush: js">var obj = { cleDeLaPropriete: 'valeur' };
-</pre>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Deux-points_et_signe_égal">Deux-points et signe égal</h3>
-
-<p>Le code qui suit provoquera une erreur car on utilise un signe égal (=) à la place du deux-points.</p>
-
-<pre class="brush: js example-bad">var obj = { cleDeLaPropriete = 'valeur' };
-// SyntaxError: missing : after property id
-</pre>
-
-<p>Pour corriger ce problème, on peut utiliser un deux-points ou bien affecter la nouvelle propriété après avoir créé l'objet :</p>
-
-<pre class="brush: js example-good">var obj = { cleDeLaPropriete: 'valeur' };
-
-// ou encore :
-
-var obj = { };
-obj['cleDeLaPropriete'] = 'valeur';
-</pre>
-
-<h3 id="Propriétés_vides">Propriétés vides</h3>
-
-<p>On ne peut pas créer de propriétés vides de cette façon :</p>
-
-<pre class="brush: js example-bad">var obj = { cleDeLaPropriete; };
-// SyntaxError: missing : after property id
-</pre>
-
-<p>Si vous souhaitez définir une propriété sans valeur, vous pouvez utiliser le mot-clé {{jsxref("null")}} :</p>
-
-<pre class="brush: js example-good">var obj = { cleDeLaPropriete: null };</pre>
-
-<h3 id="Propriétés_calculées">Propriétés calculées</h3>
-
-<p>Si vous souhaitez créer une clé de propriété à partir d'une expression, il faudra utiliser des crochets pour encadrer l'expression (sinon le nom de la propriété ne pourra pas être calculé) :</p>
-
-<pre class="brush: js example-bad">var obj = { 'tr'+'uc': 'toto' };
-// SyntaxError: missing : after property id
-</pre>
-
-<p>Pour corriger l'erreur, il faudra placer l'expression entre crochets :</p>
-
-<pre class="brush: js example-good">var obj = { ['tr'+'uc']: 'toto' };</pre>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Initialisateur_objet">Initialisateur d'objet</a></li>
-</ul>
diff --git a/files/fr/web/javascript/reference/errors/missing_colon_after_property_id/index.md b/files/fr/web/javascript/reference/errors/missing_colon_after_property_id/index.md
new file mode 100644
index 0000000000..d5170353ac
--- /dev/null
+++ b/files/fr/web/javascript/reference/errors/missing_colon_after_property_id/index.md
@@ -0,0 +1,84 @@
+---
+title: 'SyntaxError: missing : after property id'
+slug: Web/JavaScript/Reference/Errors/Missing_colon_after_property_id
+tags:
+  - Erreurs
+  - JavaScript
+  - SyntaxError
+translation_of: Web/JavaScript/Reference/Errors/Missing_colon_after_property_id
+original_slug: Web/JavaScript/Reference/Erreurs/Missing_colon_after_property_id
+---
+{{jsSidebar("Errors")}}
+
+## Message
+
+    SyntaxError: Expected ':' (Edge)
+    SyntaxError: missing : after property id (Firefox)
+
+## Type d'erreur
+
+{{jsxref("SyntaxError")}}
+
+## Quel est le problème ?
+
+Lorsqu'on crée un objet en utilisant un [initialisateur d'objet](/fr/docs/Web/JavaScript/Reference/Opérateurs/Initialisateur_objet), il faut utiliser un deux-points ( : ) afin de séparer les clés des valeurs pour les propriétés de l'objet.
+
+```js
+var obj = { cleDeLaPropriete: 'valeur' };
+```
+
+## Exemples
+
+### Deux-points et signe égal
+
+Le code qui suit provoquera une erreur car on utilise un signe égal (=) à la place du deux-points.
+
+```js example-bad
+var obj = { cleDeLaPropriete = 'valeur' };
+// SyntaxError: missing : after property id
+```
+
+Pour corriger ce problème, on peut utiliser un deux-points ou bien affecter la nouvelle propriété après avoir créé l'objet :
+
+```js example-good
+var obj = { cleDeLaPropriete: 'valeur' };
+
+// ou encore :
+
+var obj = { };
+obj['cleDeLaPropriete'] = 'valeur';
+```
+
+### Propriétés vides
+
+On ne peut pas créer de propriétés vides de cette façon :
+
+```js example-bad
+var obj = { cleDeLaPropriete; };
+// SyntaxError: missing : after property id
+```
+
+Si vous souhaitez définir une propriété sans valeur, vous pouvez utiliser le mot-clé {{jsxref("null")}} :
+
+```js example-good
+var obj = { cleDeLaPropriete: null };
+```
+
+### Propriétés calculées
+
+Si vous souhaitez créer une clé de propriété à partir d'une expression, il faudra utiliser des crochets pour encadrer l'expression (sinon le nom de la propriété ne pourra pas être calculé) :
+
+```js example-bad
+var obj = { 'tr'+'uc': 'toto' };
+// SyntaxError: missing : after property id
+```
+
+Pour corriger l'erreur, il faudra placer l'expression entre crochets :
+
+```js example-good
+var obj = { ['tr'+'uc']: 'toto' };
+```
+
+## Voir aussi
+
+- [Initialisateur d'objet](/fr/docs/Web/JavaScript/Reference/Opérateurs/Initialisateur_objet)
diff --git a/files/fr/web/javascript/reference/errors/missing_curly_after_function_body/index.html b/files/fr/web/javascript/reference/errors/missing_curly_after_function_body/index.html
deleted file mode 100644
index c8ee04b3c8..0000000000
--- a/files/fr/web/javascript/reference/errors/missing_curly_after_function_body/index.html
+++ /dev/null
@@ -1,68 +0,0 @@
----
-title: 'SyntaxError: missing } after function body'
-slug: Web/JavaScript/Reference/Errors/Missing_curly_after_function_body
-tags:
-  - Erreurs
-  - JavaScript
-  - SyntaxError
-translation_of: Web/JavaScript/Reference/Errors/Missing_curly_after_function_body
-original_slug: Web/JavaScript/Reference/Erreurs/Missing_curly_after_function_body
----
-<div>{{jsSidebar("Errors")}}</div>
-
-<h2 id="Message">Message</h2>
-
-<pre class="syntaxbox">SyntaxError: Expected '}' (Edge)
-SyntaxError: missing } after function body (Firefox)
-</pre>
-
-<h2 id="Type_d'erreur">Type d'erreur</h2>
-
-<p>{{jsxref("SyntaxError")}}</p>
-
-<h2 id="Quel_est_le_problème">Quel est le problème ?</h2>
-
-<p>Il y a une erreur de syntaxe près d'une création de fonction. Dans ce cas, il est préférable de vérifier que les parenthèses et accolades fermantes sont bien présentes et dans le bon ordre. Indenter et formater le code peut vous aider à vous y retrouver parmi les éventuels différents niveaux d'imbrication.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Oubli_d'une_accolade_fermante">Oubli d'une accolade fermante</h3>
-
-<p>La plupart du temps, il s'agit d'une accolade manquante dans le code de la fonction :</p>
-
-<pre class="brush: js example-bad">var charge = function() {
-  if (soleil) {
-    utiliserPanneauSolaire();
-  } else {
-    utiliserVelo();
-};
-</pre>
-
-<p>La forme correcte est :</p>
-
-<pre class="brush: js example-good">var charge = function() {
-  if (soleil) {
-    utiliserPanneauSolaire();
-  } else {
-    utiliserVelo();
-  }
-};</pre>
-
-<p>Une erreur de ce type peut être moins visible lorsqu'on utilise les fonctions qui sont appelées immédiatement, <a href="/fr/docs/Web/JavaScript/Closures">les fermetures</a> ou d'autres formes qui utilisent de nombreuses parenthèses et/ou accolades comme par exemple :</p>
-
-<pre class="brush: js example-bad">(function() { if (true) { return false; } );
-</pre>
-
-<p>Généralement, mettre en forme et vérifier l'indentation permet de repérer ces erreurs.</p>
-
-<pre class="brush: js example-good">(function() {
-  if (true) {
-    return false;
-  }
-});</pre>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/JavaScript/Guide/Fonctions">Les fonctions</a></li>
-</ul>
diff --git a/files/fr/web/javascript/reference/errors/missing_curly_after_function_body/index.md b/files/fr/web/javascript/reference/errors/missing_curly_after_function_body/index.md
new file mode 100644
index 0000000000..89f612ede3
--- /dev/null
+++ b/files/fr/web/javascript/reference/errors/missing_curly_after_function_body/index.md
@@ -0,0 +1,71 @@
+---
+title: 'SyntaxError: missing } after function body'
+slug: Web/JavaScript/Reference/Errors/Missing_curly_after_function_body
+tags:
+  - Erreurs
+  - JavaScript
+  - SyntaxError
+translation_of: Web/JavaScript/Reference/Errors/Missing_curly_after_function_body
+original_slug: Web/JavaScript/Reference/Erreurs/Missing_curly_after_function_body
+---
+{{jsSidebar("Errors")}}
+
+## Message
+
+    SyntaxError: Expected '}' (Edge)
+    SyntaxError: missing } after function body (Firefox)
+
+## Type d'erreur
+
+{{jsxref("SyntaxError")}}
+
+## Quel est le problème ?
+
+Il y a une erreur de syntaxe près d'une création de fonction. Dans ce cas, il est préférable de vérifier que les parenthèses et accolades fermantes sont bien présentes et dans le bon ordre. Indenter et formater le code peut vous aider à vous y retrouver parmi les éventuels différents niveaux d'imbrication.
+
+## Exemples
+
+### Oubli d'une accolade fermante
+
+La plupart du temps, il s'agit d'une accolade manquante dans le code de la fonction :
+
+```js example-bad
+var charge = function() {
+  if (soleil) {
+    utiliserPanneauSolaire();
+  } else {
+    utiliserVelo();
+};
+```
+
+La forme correcte est :
+
+```js example-good
+var charge = function() {
+  if (soleil) {
+    utiliserPanneauSolaire();
+  } else {
+    utiliserVelo();
+  }
+};
+```
+
+Une erreur de ce type peut être moins visible lorsqu'on utilise les fonctions qui sont appelées immédiatement, [les fermetures](/fr/docs/Web/JavaScript/Closures) ou d'autres formes qui utilisent de nombreuses parenthèses et/ou accolades comme par exemple :
+
+```js example-bad
+(function() { if (true) { return false; } );
+```
+
+Généralement, mettre en forme et vérifier l'indentation permet de repérer ces erreurs.
+
+```js example-good
+(function() {
+  if (true) {
+    return false;
+  }
+});
+```
+
+## Voir aussi
+
+- [Les fonctions](/fr/docs/Web/JavaScript/Guide/Fonctions)
diff --git a/files/fr/web/javascript/reference/errors/missing_curly_after_property_list/index.html b/files/fr/web/javascript/reference/errors/missing_curly_after_property_list/index.html
deleted file mode 100644
index f845a673c6..0000000000
--- a/files/fr/web/javascript/reference/errors/missing_curly_after_property_list/index.html
+++ /dev/null
@@ -1,53 +0,0 @@
----
-title: 'SyntaxError: missing } after property list'
-slug: Web/JavaScript/Reference/Errors/Missing_curly_after_property_list
-tags:
-  - Erreurs
-  - JavaScript
-  - SyntaxError
-translation_of: Web/JavaScript/Reference/Errors/Missing_curly_after_property_list
-original_slug: Web/JavaScript/Reference/Erreurs/Missing_curly_after_property_list
----
-<div>{{jsSidebar("Errors")}}</div>
-
-<h2 id="Message">Message</h2>
-
-<pre class="syntaxbox">SyntaxError: Expected '}' (Edge)
-SyntaxError: missing } after property list (Firefox)
-</pre>
-
-<h2 id="Type_d'erreur">Type d'erreur</h2>
-
-<p>{{jsxref("SyntaxError")}}</p>
-
-<h2 id="Quel_est_le_problème">Quel est le problème ?</h2>
-
-<p>Il y a une coquille dans le <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Initialisateur_objet">littéral objet</a> utilisé. Cela peut être dû à une accolade manquante ou à une virgule manquante. Il est aussi utile de vérifier que les accolades et les parenthèses sont bien ordonnées. Pour ce type d'erreur, une bonne indentation permet de repérer plus facilement la coquille parmi les lignes de code.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Une_virgule_oubliée">Une virgule oubliée</h3>
-
-<p>Il arrive parfois que ce soit une virgule absente dans le littéral qui entraîne cette erreur :</p>
-
-<pre class="brush: js example-bad">var obj = {
-  a: 1,
-  b: { maProp: 2 }
-  c: 3
-};
-</pre>
-
-<p>La version correcte correspondante est :</p>
-
-<pre class="brush: js example-good">var obj = {
-  a: 1,
-  b: { maProp: 2 },
-  c: 3
-};
-</pre>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Initialisateur_objet">Les littéraux objets</a></li>
-</ul>
diff --git a/files/fr/web/javascript/reference/errors/missing_curly_after_property_list/index.md b/files/fr/web/javascript/reference/errors/missing_curly_after_property_list/index.md
new file mode 100644
index 0000000000..720e6c5cd4
--- /dev/null
+++ b/files/fr/web/javascript/reference/errors/missing_curly_after_property_list/index.md
@@ -0,0 +1,52 @@
+---
+title: 'SyntaxError: missing } after property list'
+slug: Web/JavaScript/Reference/Errors/Missing_curly_after_property_list
+tags:
+  - Erreurs
+  - JavaScript
+  - SyntaxError
+translation_of: Web/JavaScript/Reference/Errors/Missing_curly_after_property_list
+original_slug: Web/JavaScript/Reference/Erreurs/Missing_curly_after_property_list
+---
+{{jsSidebar("Errors")}}
+
+## Message
+
+    SyntaxError: Expected '}' (Edge)
+    SyntaxError: missing } after property list (Firefox)
+
+## Type d'erreur
+
+{{jsxref("SyntaxError")}}
+
+## Quel est le problème ?
+
+Il y a une coquille dans le [littéral objet](/fr/docs/Web/JavaScript/Reference/Opérateurs/Initialisateur_objet) utilisé. Cela peut être dû à une accolade manquante ou à une virgule manquante. Il est aussi utile de vérifier que les accolades et les parenthèses sont bien ordonnées. Pour ce type d'erreur, une bonne indentation permet de repérer plus facilement la coquille parmi les lignes de code.
+
+## Exemples
+
+### Une virgule oubliée
+
+Il arrive parfois que ce soit une virgule absente dans le littéral qui entraîne cette erreur :
+
+```js example-bad
+var obj = {
+  a: 1,
+  b: { maProp: 2 }
+  c: 3
+};
+```
+
+La version correcte correspondante est :
+
+```js example-good
+var obj = {
+  a: 1,
+  b: { maProp: 2 },
+  c: 3
+};
+```
+
+## Voir aussi
+
+- [Les littéraux objets](/fr/docs/Web/JavaScript/Reference/Opérateurs/Initialisateur_objet)
diff --git a/files/fr/web/javascript/reference/errors/missing_formal_parameter/index.html b/files/fr/web/javascript/reference/errors/missing_formal_parameter/index.html
deleted file mode 100644
index e5956f0f04..0000000000
--- a/files/fr/web/javascript/reference/errors/missing_formal_parameter/index.html
+++ /dev/null
@@ -1,78 +0,0 @@
----
-title: 'SyntaxError: missing formal parameter'
-slug: Web/JavaScript/Reference/Errors/Missing_formal_parameter
-tags:
-  - Erreurs
-  - JavaScript
-  - SyntaxError
-translation_of: Web/JavaScript/Reference/Errors/Missing_formal_parameter
-original_slug: Web/JavaScript/Reference/Erreurs/Missing_formal_parameter
----
-<div>{{jsSidebar("Errors")}}</div>
-
-<h2 id="Message">Message</h2>
-
-<pre class="syntaxbox">SyntaxError: missing formal parameter (Firefox)
-</pre>
-
-<h2 id="Type_d'erreur">Type d'erreur</h2>
-
-<p>{{jsxref("SyntaxError")}}</p>
-
-<h2 id="Quel_est_le_problème">Quel est le problème ?</h2>
-
-<p>« <em>Formal parameter</em> » (ou « paramètre formel ») est une façon de désigner un paramètre d'une fonction. Ici, certains des paramètres de la fonction sont invalides. Lorsqu'on déclare une fonction, les paramètres doivent être des identifiants et non des valeurs (telles que des nombres, des chaînes de caractères ou des objets). La déclaration et l'appel de la fonction forment deux étapes distinctes. Les déclarations utilisent uniquement des identifiants comme paramètres. Lorsqu'on appelle une fonction, on fournit les valeurs à utiliser.</p>
-
-<p>En JavaScript, les identifiants peuvent contenir n'importe quel caractère alphanumérique (ou "$" or "_") et ne doivent pas commencer par un nombre. Un identifiant n'est pas une chaîne de caractères, une chaîne de caractères est une donnée alors qu'un identifiant fait partie du code.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<p>Lorsqu'on définit une fonction, les paramètres doivent être des identifiants. Aucune des fonctions suivantes ne répond à ce critère (elles lèvent donc toutes une erreur) car elles utilisent des valeurs :</p>
-
-<pre class="brush: js example-bad highlight:[1,6,11]">function carre(3) {
-  return nombre * nombre;
-};
-// SyntaxError: missing formal parameter
-
-function salutation("Coucou") {
-  return salut;
-};
-// SyntaxError: missing formal parameter
-
-function log({ obj: "value"}) {
-  console.log(arg)
-};
-// SyntaxError: missing formal parameter
-</pre>
-
-<p>Il faut utiliser des identifiants lors de la déclaration des fonctions :</p>
-
-<pre class="brush: js example-good highlight:[1,5,9]">function carre(nombre) {
-  return nombre * nombre;
-};
-
-function salutation(salut) {
-  return salut;
-};
-
-function log(arg) {
-  console.log(arg)
-};</pre>
-
-<p>Ensuite, on pourra appeler ces fonctions avec les arguments voulus :</p>
-
-<pre class="brush: js">carre(2); // 4
-salutation("Coucou"); // "Coucou"
-log({obj: "value"});  // Object { obj: "value" }
-</pre>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>Les autres erreurs relatives aux paramètres formels :
-  <ul>
-   <li><a href="/fr/docs/Web/JavaScript/Reference/Errors/Malformed_formal_parameter">SyntaxError: Malformed formal parameter</a></li>
-   <li><a href="/fr/docs/Web/JavaScript/Reference/Errors/Redeclared_parameter">SyntaxError: redeclaration of formal parameter "x"</a></li>
-  </ul>
- </li>
-</ul>
diff --git a/files/fr/web/javascript/reference/errors/missing_formal_parameter/index.md b/files/fr/web/javascript/reference/errors/missing_formal_parameter/index.md
new file mode 100644
index 0000000000..635c238646
--- /dev/null
+++ b/files/fr/web/javascript/reference/errors/missing_formal_parameter/index.md
@@ -0,0 +1,77 @@
+---
+title: 'SyntaxError: missing formal parameter'
+slug: Web/JavaScript/Reference/Errors/Missing_formal_parameter
+tags:
+  - Erreurs
+  - JavaScript
+  - SyntaxError
+translation_of: Web/JavaScript/Reference/Errors/Missing_formal_parameter
+original_slug: Web/JavaScript/Reference/Erreurs/Missing_formal_parameter
+---
+{{jsSidebar("Errors")}}
+
+## Message
+
+    SyntaxError: missing formal parameter (Firefox)
+
+## Type d'erreur
+
+{{jsxref("SyntaxError")}}
+
+## Quel est le problème ?
+
+« _Formal parameter_ » (ou « paramètre formel ») est une façon de désigner un paramètre d'une fonction. Ici, certains des paramètres de la fonction sont invalides. Lorsqu'on déclare une fonction, les paramètres doivent être des identifiants et non des valeurs (telles que des nombres, des chaînes de caractères ou des objets). La déclaration et l'appel de la fonction forment deux étapes distinctes. Les déclarations utilisent uniquement des identifiants comme paramètres. Lorsqu'on appelle une fonction, on fournit les valeurs à utiliser.
+
+En JavaScript, les identifiants peuvent contenir n'importe quel caractère alphanumérique (ou "$" or "\_") et ne doivent pas commencer par un nombre. Un identifiant n'est pas une chaîne de caractères, une chaîne de caractères est une donnée alors qu'un identifiant fait partie du code.
+
+## Exemples
+
+Lorsqu'on définit une fonction, les paramètres doivent être des identifiants. Aucune des fonctions suivantes ne répond à ce critère (elles lèvent donc toutes une erreur) car elles utilisent des valeurs :
+
+```js example-bad
+function carre(3) {
+  return nombre * nombre;
+};
+// SyntaxError: missing formal parameter
+
+function salutation("Coucou") {
+  return salut;
+};
+// SyntaxError: missing formal parameter
+
+function log({ obj: "value"}) {
+  console.log(arg)
+};
+// SyntaxError: missing formal parameter
+```
+
+Il faut utiliser des identifiants lors de la déclaration des fonctions :
+
+```js example-good
+function carre(nombre) {
+  return nombre * nombre;
+};
+
+function salutation(salut) {
+  return salut;
+};
+
+function log(arg) {
+  console.log(arg)
+};
+```
+
+Ensuite, on pourra appeler ces fonctions avec les arguments voulus :
+
+```js
+carre(2); // 4
+salutation("Coucou"); // "Coucou"
+log({obj: "value"});  // Object { obj: "value" }
+```
+
+## Voir aussi
+
+- Les autres erreurs relatives aux paramètres formels :
+
+  - [SyntaxError: Malformed formal parameter](/fr/docs/Web/JavaScript/Reference/Errors/Malformed_formal_parameter)
+  - [SyntaxError: redeclaration of formal parameter "x"](/fr/docs/Web/JavaScript/Reference/Errors/Redeclared_parameter)
diff --git a/files/fr/web/javascript/reference/errors/missing_initializer_in_const/index.html b/files/fr/web/javascript/reference/errors/missing_initializer_in_const/index.html
deleted file mode 100644
index e368d0982c..0000000000
--- a/files/fr/web/javascript/reference/errors/missing_initializer_in_const/index.html
+++ /dev/null
@@ -1,60 +0,0 @@
----
-title: 'SyntaxError: missing = in const declaration'
-slug: Web/JavaScript/Reference/Errors/Missing_initializer_in_const
-tags:
-  - Erreurs
-  - JavaScript
-  - SyntaxError
-translation_of: Web/JavaScript/Reference/Errors/Missing_initializer_in_const
-original_slug: Web/JavaScript/Reference/Erreurs/Missing_initializer_in_const
----
-<div>{{jsSidebar("Errors")}}</div>
-
-<h2 id="Message">Message</h2>
-
-<pre class="syntaxbox">SyntaxError: Const must be initalized (Edge)
-SyntaxError: missing = in const declaration (Firefox)
-SyntaxError: Missing initializer in const declaration (Chrome)
-</pre>
-
-<h2 id="Type_d'erreur">Type d'erreur</h2>
-
-<p>{{jsxref("SyntaxError")}}</p>
-
-<h2 id="Quel_est_le_problème">Quel est le problème ?</h2>
-
-<p>Une constante est une valeur qui ne peut pas être modifiée par le programme pendant l'exécution. Elle ne peut pas être changée avec une réaffectation ou une redéclaration. En JavaScript, les constantes sont déclarées grâce au mot-clé <code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/const">const</a></code>. Il est également nécessaire de fournir une valeur d'initialisation dans l'instruction où on déclare la constante (ce qui est logique vu qu'on ne peut pas la modifier ensuite).</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Valeur_d'initialisation_manquante">Valeur d'initialisation manquante</h3>
-
-<p>À la différence de <code>var</code> ou de <code>let</code>, il est nécessaire d'indiquer une valeur lors de la déclaration. Si aucune valeur n'est indiquée, une exception sera levée :</p>
-
-<pre class="brush: js example-bad">const COLUMNS;
-// SyntaxError: missing = in const declaration</pre>
-
-<h3 id="Résoudre_le_problème">Résoudre le problème</h3>
-
-<p>On a le choix entre plusieurs options pour résoudre ce problème. Il faut comprendre le rôle de la constante en question.</p>
-
-<h4 id="Ajouter_une_valeur_constante">Ajouter une valeur constante</h4>
-
-<p>On peut indiquer la valeur de la constante dans la même instruction :</p>
-
-<pre class="brush: js example-good">const COLONNES = 80;</pre>
-
-<h4 id="const_let_ou_var"><code>const</code>, <code>let</code> ou <code>var</code> ?</h4>
-
-<p><code>const</code> ne doit pas être utilisé si on ne souhaite pas déclarer de constante. Peut-être qu'on souhaite simplement déclarer une variable avec une portée de bloc grâce à <code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/let">let</a></code> ou une variable globale avec <code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/var">var</a></code>. Ces deux instructions ne nécessitent pas de valeur initiale.</p>
-
-<pre class="brush: js example-good">let colonnes;
-</pre>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/const">const</a></code></li>
- <li><code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/let">let</a></code></li>
- <li><code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/var">var</a></code></li>
-</ul>
diff --git a/files/fr/web/javascript/reference/errors/missing_initializer_in_const/index.md b/files/fr/web/javascript/reference/errors/missing_initializer_in_const/index.md
new file mode 100644
index 0000000000..5110b755a0
--- /dev/null
+++ b/files/fr/web/javascript/reference/errors/missing_initializer_in_const/index.md
@@ -0,0 +1,62 @@
+---
+title: 'SyntaxError: missing = in const declaration'
+slug: Web/JavaScript/Reference/Errors/Missing_initializer_in_const
+tags:
+  - Erreurs
+  - JavaScript
+  - SyntaxError
+translation_of: Web/JavaScript/Reference/Errors/Missing_initializer_in_const
+original_slug: Web/JavaScript/Reference/Erreurs/Missing_initializer_in_const
+---
+{{jsSidebar("Errors")}}
+
+## Message
+
+    SyntaxError: Const must be initalized (Edge)
+    SyntaxError: missing = in const declaration (Firefox)
+    SyntaxError: Missing initializer in const declaration (Chrome)
+
+## Type d'erreur
+
+{{jsxref("SyntaxError")}}
+
+## Quel est le problème ?
+
+Une constante est une valeur qui ne peut pas être modifiée par le programme pendant l'exécution. Elle ne peut pas être changée avec une réaffectation ou une redéclaration. En JavaScript, les constantes sont déclarées grâce au mot-clé [`const`](/fr/docs/Web/JavaScript/Reference/Instructions/const). Il est également nécessaire de fournir une valeur d'initialisation dans l'instruction où on déclare la constante (ce qui est logique vu qu'on ne peut pas la modifier ensuite).
+
+## Exemples
+
+### Valeur d'initialisation manquante
+
+À la différence de `var` ou de `let`, il est nécessaire d'indiquer une valeur lors de la déclaration. Si aucune valeur n'est indiquée, une exception sera levée :
+
+```js example-bad
+const COLUMNS;
+// SyntaxError: missing = in const declaration
+```
+
+### Résoudre le problème
+
+On a le choix entre plusieurs options pour résoudre ce problème. Il faut comprendre le rôle de la constante en question.
+
+#### Ajouter une valeur constante
+
+On peut indiquer la valeur de la constante dans la même instruction :
+
+```js example-good
+const COLONNES = 80;
+```
+
+#### `const`, `let` ou `var` ?
+
+`const` ne doit pas être utilisé si on ne souhaite pas déclarer de constante. Peut-être qu'on souhaite simplement déclarer une variable avec une portée de bloc grâce à [`let`](/fr/docs/Web/JavaScript/Reference/Instructions/let) ou une variable globale avec [`var`](/fr/docs/Web/JavaScript/Reference/Instructions/var). Ces deux instructions ne nécessitent pas de valeur initiale.
+
+```js example-good
+let colonnes;
+```
+
+## Voir aussi
+
+- [`const`](/fr/docs/Web/JavaScript/Reference/Instructions/const)
+- [`let`](/fr/docs/Web/JavaScript/Reference/Instructions/let)
+- [`var`](/fr/docs/Web/JavaScript/Reference/Instructions/var)
diff --git a/files/fr/web/javascript/reference/errors/missing_name_after_dot_operator/index.html b/files/fr/web/javascript/reference/errors/missing_name_after_dot_operator/index.html
deleted file mode 100644
index d46591c96f..0000000000
--- a/files/fr/web/javascript/reference/errors/missing_name_after_dot_operator/index.html
+++ /dev/null
@@ -1,70 +0,0 @@
----
-title: 'SyntaxError: missing name after . operator'
-slug: Web/JavaScript/Reference/Errors/Missing_name_after_dot_operator
-tags:
-  - Erreurs
-  - JavaScript
-  - SyntaxError
-translation_of: Web/JavaScript/Reference/Errors/Missing_name_after_dot_operator
-original_slug: Web/JavaScript/Reference/Erreurs/Missing_name_after_dot_operator
----
-<div>{{jsSidebar("Errors")}}</div>
-
-<h2 id="Message">Message</h2>
-
-<pre class="syntaxbox">SyntaxError: missing name after . operator
-</pre>
-
-<h2 id="Type_d'erreur">Type d'erreur</h2>
-
-<p>{{jsxref("SyntaxError")}}</p>
-
-<h2 id="Quel_est_le_problème">Quel est le problème ?</h2>
-
-<p>L'opérateur <code>.</code> (le point) est utilisé pour <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_de_membres">accéder aux propriétés d'un objet</a>. Il est nécessaire d'indiquer le nom de la propriété à laquelle on souhaite accéder. Pour les propriétés dont le nom est calculé, il est préférable d'utiliser les crochets pour encadrer le nom. Cela permet de calculer une expression dont le résultat sera le nom de la propriété recherchée. Peut-être cherchiez-vous à utiliser l'opérateur de concaténation ? C'est l'opérateur <code>+</code> qu'il faut utiliser dans ce cas. Pour plus de détails, voir les exemples ci-après.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Accéder_à_une_propriété">Accéder à une propriété</h3>
-
-<p><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_de_membres">Pour accéder à une propriété</a> en JavaScript, on utilise le point (.) ou les crochets (<code>[]</code>) mais pas une combinaison des deux. Les crochets sont notamment utiles lorsqu'on souhaite accéder à des propriétés dont le nom est calculé.</p>
-
-<pre class="brush: js example-bad">var obj = { toto: { truc: "bidule", machin2: "bidule2" } };
-var i = 2;
-
-obj.[toto].[truc]
-// SyntaxError: missing name after . operator
-
-obj.toto."machin"+i;
-// SyntaxError: missing name after . operator
-</pre>
-
-<p>Pour corriger ce fragment de code, on pourra accéder aux propriétés de la façon suivante :</p>
-
-<pre class="brush: js example-good">obj.toto.truc; // "bidule"
-// ou autrement
-obj["toto"]["truc"]; // "bidule"
-
-// pour les propriétés dont le
-// nom est calculé, il faut les
-// crochets
-obj.toto["machin" + i]; // "bidule2"
-</pre>
-
-<h3 id="Accéder_à_une_propriété_ou_concaténer">Accéder à une propriété ou concaténer ?</h3>
-
-<p>Si vous avez l'habitude de développer en utilisant un autre langage de programmation tel que {{Glossary("PHP")}}, il est possible de mélanger certains opérateurs et d'utiliser le point comme opérateur de concaténation, qui est l'opérateur <code>+</code> en JavaScript :</p>
-
-<pre class="brush: js example-bad">console.log("Coucou " . "monde");
-
-// SyntaxError: missing name after . operator</pre>
-
-<p>À la place, on écrira :</p>
-
-<pre class="brush: js example-good">console.log("Coucou " + "monde");</pre>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_de_membres">Les accesseurs de propriété</a></li>
-</ul>
diff --git a/files/fr/web/javascript/reference/errors/missing_name_after_dot_operator/index.md b/files/fr/web/javascript/reference/errors/missing_name_after_dot_operator/index.md
new file mode 100644
index 0000000000..d777c273e3
--- /dev/null
+++ b/files/fr/web/javascript/reference/errors/missing_name_after_dot_operator/index.md
@@ -0,0 +1,73 @@
+---
+title: 'SyntaxError: missing name after . operator'
+slug: Web/JavaScript/Reference/Errors/Missing_name_after_dot_operator
+tags:
+  - Erreurs
+  - JavaScript
+  - SyntaxError
+translation_of: Web/JavaScript/Reference/Errors/Missing_name_after_dot_operator
+original_slug: Web/JavaScript/Reference/Erreurs/Missing_name_after_dot_operator
+---
+{{jsSidebar("Errors")}}
+
+## Message
+
+    SyntaxError: missing name after . operator
+
+## Type d'erreur
+
+{{jsxref("SyntaxError")}}
+
+## Quel est le problème ?
+
+L'opérateur `.` (le point) est utilisé pour [accéder aux propriétés d'un objet](/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_de_membres). Il est nécessaire d'indiquer le nom de la propriété à laquelle on souhaite accéder. Pour les propriétés dont le nom est calculé, il est préférable d'utiliser les crochets pour encadrer le nom. Cela permet de calculer une expression dont le résultat sera le nom de la propriété recherchée. Peut-être cherchiez-vous à utiliser l'opérateur de concaténation ? C'est l'opérateur `+` qu'il faut utiliser dans ce cas. Pour plus de détails, voir les exemples ci-après.
+
+## Exemples
+
+### Accéder à une propriété
+
+[Pour accéder à une propriété](/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_de_membres) en JavaScript, on utilise le point (.) ou les crochets (`[]`) mais pas une combinaison des deux. Les crochets sont notamment utiles lorsqu'on souhaite accéder à des propriétés dont le nom est calculé.
+
+```js example-bad
+var obj = { toto: { truc: "bidule", machin2: "bidule2" } };
+var i = 2;
+
+obj.[toto].[truc]
+// SyntaxError: missing name after . operator
+
+obj.toto."machin"+i;
+// SyntaxError: missing name after . operator
+```
+
+Pour corriger ce fragment de code, on pourra accéder aux propriétés de la façon suivante :
+
+```js example-good
+obj.toto.truc; // "bidule"
+// ou autrement
+obj["toto"]["truc"]; // "bidule"
+
+// pour les propriétés dont le
+// nom est calculé, il faut les
+// crochets
+obj.toto["machin" + i]; // "bidule2"
+```
+
+### Accéder à une propriété ou concaténer ?
+
+Si vous avez l'habitude de développer en utilisant un autre langage de programmation tel que {{Glossary("PHP")}}, il est possible de mélanger certains opérateurs et d'utiliser le point comme opérateur de concaténation, qui est l'opérateur `+` en JavaScript :
+
+```js example-bad
+console.log("Coucou " . "monde");
+
+// SyntaxError: missing name after . operator
+```
+
+À la place, on écrira :
+
+```js example-good
+console.log("Coucou " + "monde");
+```
+
+## Voir aussi
+
+- [Les accesseurs de propriété](/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_de_membres)
diff --git a/files/fr/web/javascript/reference/errors/missing_parenthesis_after_argument_list/index.html b/files/fr/web/javascript/reference/errors/missing_parenthesis_after_argument_list/index.html
deleted file mode 100644
index f59707b152..0000000000
--- a/files/fr/web/javascript/reference/errors/missing_parenthesis_after_argument_list/index.html
+++ /dev/null
@@ -1,57 +0,0 @@
----
-title: 'SyntaxError: missing ) after argument list'
-slug: Web/JavaScript/Reference/Errors/Missing_parenthesis_after_argument_list
-tags:
-  - Erreurs
-  - JavaScript
-  - SyntaxError
-translation_of: Web/JavaScript/Reference/Errors/Missing_parenthesis_after_argument_list
-original_slug: Web/JavaScript/Reference/Erreurs/Missing_parenthesis_after_argument_list
----
-<div>{{jsSidebar("Errors")}}</div>
-
-<h2 id="Message">Message</h2>
-
-<pre class="syntaxbox">SyntaxError: Expected ')' (Edge)
-SyntaxError: missing ) after argument list (Firefox)
-</pre>
-
-<h2 id="Type_d'erreur">Type d'erreur</h2>
-
-<p>{{jsxref("SyntaxError")}}.</p>
-
-<h2 id="Quel_est_le_problème">Quel est le problème ?</h2>
-
-<p> </p>
-
-<p>Il y a une erreur avec la façon dont une fonction est appelée . Cela peut être une faute de frappe, un opérateur manquant, ou une chaîne non-échappée, par exemple .</p>
-
-<h2 id="Exemple">Exemple</h2>
-
-<p>Parce qu'il n'y a pas d'opérateur "+" pour concaténer la chaîne de caractères, JavaScript s'attend à trouver une parenthèse après "PI : ", qu'il considère comme  l'argument de la fonction <code>log. </code></p>
-
-<pre class="brush: js example-bad">console.log("PI: " Math.PI);
-// SyntaxError: missing ) after argument list
-</pre>
-
-<p>La fonction <code>log</code> peut être corrigée en ajoutant un opérateur "+".</p>
-
-<pre class="brush: js example-good">console.log("PI: " + Math.PI);
-// "PI: 3.141592653589793"</pre>
-
-<h3 id="Chaînes_non_terminées">Chaînes non terminées</h3>
-
-<pre class="brush: js example-bad">console.log('"Java" + "Script" = \"' + 'Java' + 'Script\");
-// SyntaxError: missing ) after argument list</pre>
-
-<p>Dans cet exemple, le moteur JavaScript considère qu'on souhaitait avoir <code>);</code> dans la chaîne de caractères et l'ignore. Aussi, le moteur considère que l'appelle à <code>console.log</code> n'est pas terminé et qu'il manque une parenthèse fermante. Pour corriger ce problème, on peut rajouter une quote <code>'</code> après la chaîne de caractères <code>"Script"</code> :</p>
-
-<pre class="brush: js example-good">console.log('"Java" + "Script" = \"' + 'Java' + 'Script\"');
-// '"Java" + "Script" = "JavaScript"'
-</pre>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/JavaScript/Guide/Functions">Functions</a></li>
-</ul>
diff --git a/files/fr/web/javascript/reference/errors/missing_parenthesis_after_argument_list/index.md b/files/fr/web/javascript/reference/errors/missing_parenthesis_after_argument_list/index.md
new file mode 100644
index 0000000000..b9bf2d9afb
--- /dev/null
+++ b/files/fr/web/javascript/reference/errors/missing_parenthesis_after_argument_list/index.md
@@ -0,0 +1,60 @@
+---
+title: 'SyntaxError: missing ) after argument list'
+slug: Web/JavaScript/Reference/Errors/Missing_parenthesis_after_argument_list
+tags:
+  - Erreurs
+  - JavaScript
+  - SyntaxError
+translation_of: Web/JavaScript/Reference/Errors/Missing_parenthesis_after_argument_list
+original_slug: Web/JavaScript/Reference/Erreurs/Missing_parenthesis_after_argument_list
+---
+{{jsSidebar("Errors")}}
+
+## Message
+
+    SyntaxError: Expected ')' (Edge)
+    SyntaxError: missing ) after argument list (Firefox)
+
+## Type d'erreur
+
+{{jsxref("SyntaxError")}}.
+
+## Quel est le problème ?
+
+
+
+Il y a une erreur avec la façon dont une fonction est appelée . Cela peut être une faute de frappe, un opérateur manquant, ou une chaîne non-échappée, par exemple .
+
+## Exemple
+
+Parce qu'il n'y a pas d'opérateur "+" pour concaténer la chaîne de caractères, JavaScript s'attend à trouver une parenthèse après "PI : ", qu'il considère comme  l'argument de la fonction `log. `
+
+```js example-bad
+console.log("PI: " Math.PI);
+// SyntaxError: missing ) after argument list
+```
+
+La fonction `log` peut être corrigée en ajoutant un opérateur "+".
+
+```js example-good
+console.log("PI: " + Math.PI);
+// "PI: 3.141592653589793"
+```
+
+### Chaînes non terminées
+
+```js example-bad
+console.log('"Java" + "Script" = \"' + 'Java' + 'Script\");
+// SyntaxError: missing ) after argument list
+```
+
+Dans cet exemple, le moteur JavaScript considère qu'on souhaitait avoir `);` dans la chaîne de caractères et l'ignore. Aussi, le moteur considère que l'appelle à `console.log` n'est pas terminé et qu'il manque une parenthèse fermante. Pour corriger ce problème, on peut rajouter une quote `'` après la chaîne de caractères `"Script"` :
+
+```js example-good
+console.log('"Java" + "Script" = \"' + 'Java' + 'Script\"');
+// '"Java" + "Script" = "JavaScript"'
+```
+
+## Voir aussi
+
+- [Functions](/fr/docs/Web/JavaScript/Guide/Functions)
diff --git a/files/fr/web/javascript/reference/errors/missing_parenthesis_after_condition/index.html b/files/fr/web/javascript/reference/errors/missing_parenthesis_after_condition/index.html
deleted file mode 100644
index 52018f1d8d..0000000000
--- a/files/fr/web/javascript/reference/errors/missing_parenthesis_after_condition/index.html
+++ /dev/null
@@ -1,71 +0,0 @@
----
-title: 'SyntaxError: missing ) after condition'
-slug: Web/JavaScript/Reference/Errors/Missing_parenthesis_after_condition
-tags:
-  - Erreurs
-  - JavaScript
-  - SyntaxError
-translation_of: Web/JavaScript/Reference/Errors/Missing_parenthesis_after_condition
-original_slug: Web/JavaScript/Reference/Erreurs/Missing_parenthesis_after_condition
----
-<div>{{jsSidebar("Errors")}}</div>
-
-<h2 id="Message">Message</h2>
-
-<pre class="syntaxbox">SyntaxError: Expected ')' (Edge)
-SyntaxError: missing ) after condition (Firefox)
-</pre>
-
-<h2 id="Type_d'erreur">Type d'erreur</h2>
-
-<p>{{jsxref("SyntaxError")}}</p>
-
-<h2 id="Quel_est_le_problème">Quel est le problème ?</h2>
-
-<p>Il y a une erreur pour la condition écrite dans l'instruction <code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/if...else">if</a></code>. Pour chaque langage de programmation, on utilise des instructions pour choisir quel bloc d'instructions exécuter selon les différentes entrées. L'instruction <code>if</code> permet d'exécuter une instruction si une condition donnée est vérifiée. En JavaScript, il faut que cette condition apparaisse entre parenthèses après le mot-clé  <code>if</code> :</p>
-
-<pre class="brush: js">if (condition) {
-  // faire quelque chose si la condition est vraie
-}</pre>
-
-<h2 id="Exemples">Exemples</h2>
-
-<p>Il s'agit peut-être simplement d'une coquille et il suffit alors de vérifier les parenthèses (ou plutôt leur absence) :</p>
-
-<pre class="brush: js example-bad">if (3 &gt; Math.PI {
-  console.log("Pardon ?");
-}
-
-// SyntaxError: missing ) after condition
-</pre>
-
-<p>Pour corriger ce fragment de code, on ajoutera une parenthèse pour fermer la condition :</p>
-
-<pre class="brush: js example-good">if (3 &gt; Math.PI) {
-  console.log("Pardon ?");
-}</pre>
-
-<p>Si vous avez l'habitude d'utiliser un autre langage de programmation, peut-être avez-vous utilisé un mot-clé qui n'existe pas en JavaScript ?</p>
-
-<pre class="brush: js example-bad">if (done is true) {
- console.log("we are done!");
-}
-
-// SyntaxError: missing ) after condition
-</pre>
-
-<p>Pour corriger cette erreur, on utilisera <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_de_comparaison">un opérateur de comparaison</a> correct :</p>
-
-<pre class="brush: js example-good">if (done === true) {
- console.log("Et voilà !");
-}</pre>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/if...else">if...else</a></code></li>
- <li><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_de_comparaison">Les opérateurs de comparaisons</a></li>
- <li>
-  <p><a href="/fr/docs/Learn/JavaScript/Building_blocks/conditionals">Choisir quel code exécuter : les structures conditionnelles</a></p>
- </li>
-</ul>
diff --git a/files/fr/web/javascript/reference/errors/missing_parenthesis_after_condition/index.md b/files/fr/web/javascript/reference/errors/missing_parenthesis_after_condition/index.md
new file mode 100644
index 0000000000..f1afdee5d9
--- /dev/null
+++ b/files/fr/web/javascript/reference/errors/missing_parenthesis_after_condition/index.md
@@ -0,0 +1,74 @@
+---
+title: 'SyntaxError: missing ) after condition'
+slug: Web/JavaScript/Reference/Errors/Missing_parenthesis_after_condition
+tags:
+  - Erreurs
+  - JavaScript
+  - SyntaxError
+translation_of: Web/JavaScript/Reference/Errors/Missing_parenthesis_after_condition
+original_slug: Web/JavaScript/Reference/Erreurs/Missing_parenthesis_after_condition
+---
+{{jsSidebar("Errors")}}
+
+## Message
+
+    SyntaxError: Expected ')' (Edge)
+    SyntaxError: missing ) after condition (Firefox)
+
+## Type d'erreur
+
+{{jsxref("SyntaxError")}}
+
+## Quel est le problème ?
+
+Il y a une erreur pour la condition écrite dans l'instruction [`if`](/fr/docs/Web/JavaScript/Reference/Instructions/if...else). Pour chaque langage de programmation, on utilise des instructions pour choisir quel bloc d'instructions exécuter selon les différentes entrées. L'instruction `if` permet d'exécuter une instruction si une condition donnée est vérifiée. En JavaScript, il faut que cette condition apparaisse entre parenthèses après le mot-clé  `if` :
+
+```js
+if (condition) {
+  // faire quelque chose si la condition est vraie
+}
+```
+
+## Exemples
+
+Il s'agit peut-être simplement d'une coquille et il suffit alors de vérifier les parenthèses (ou plutôt leur absence) :
+
+```js example-bad
+if (3 > Math.PI {
+  console.log("Pardon ?");
+}
+
+// SyntaxError: missing ) after condition
+```
+
+Pour corriger ce fragment de code, on ajoutera une parenthèse pour fermer la condition :
+
+```js example-good
+if (3 > Math.PI) {
+  console.log("Pardon ?");
+}
+```
+
+Si vous avez l'habitude d'utiliser un autre langage de programmation, peut-être avez-vous utilisé un mot-clé qui n'existe pas en JavaScript ?
+
+```js example-bad
+if (done is true) {
+ console.log("we are done!");
+}
+
+// SyntaxError: missing ) after condition
+```
+
+Pour corriger cette erreur, on utilisera [un opérateur de comparaison](/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_de_comparaison) correct :
+
+```js example-good
+if (done === true) {
+ console.log("Et voilà !");
+}
+```
+
+## Voir aussi
+
+- [`if...else`](/fr/docs/Web/JavaScript/Reference/Instructions/if...else)
+- [Les opérateurs de comparaisons](/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_de_comparaison)
+- [Choisir quel code exécuter : les structures conditionnelles](/fr/docs/Learn/JavaScript/Building_blocks/conditionals)
diff --git a/files/fr/web/javascript/reference/errors/missing_semicolon_before_statement/index.html b/files/fr/web/javascript/reference/errors/missing_semicolon_before_statement/index.html
deleted file mode 100644
index cb9e5c0312..0000000000
--- a/files/fr/web/javascript/reference/errors/missing_semicolon_before_statement/index.html
+++ /dev/null
@@ -1,84 +0,0 @@
----
-title: 'SyntaxError: missing ; before statement'
-slug: Web/JavaScript/Reference/Errors/Missing_semicolon_before_statement
-tags:
-  - Erreurs
-  - JavaScript
-  - Reference
-  - SyntaxError
-translation_of: Web/JavaScript/Reference/Errors/Missing_semicolon_before_statement
-original_slug: Web/JavaScript/Reference/Erreurs/Missing_semicolon_before_statement
----
-<div>{{jsSidebar("Errors")}}</div>
-
-<h2 id="Message">Message</h2>
-
-<pre class="syntaxbox">SyntaxError: Expected ';' (Edge)
-SyntaxError: missing ; before statement (Firefox)
-</pre>
-
-<h2 id="Type_d'erreur">Type d'erreur</h2>
-
-<p>{{jsxref("SyntaxError")}}.</p>
-
-<h2 id="Quel_est_le_problème">Quel est le problème ?</h2>
-
-<p>Un point-virgule est absent quelque part. En JavaScript, <a href="/fr/docs/Web/JavaScript/Reference/Instructions">les instructions doivent se terminer par des points-virgules</a>. Certaines de ces instructions sont traitées par <a href="/fr/docs/Web/JavaScript/Reference/Grammaire_lexicale#Insertion_automatique_de_points-virgules">l'insertion automatique de point-virgule (<em>ASI</em> pour <em>Automatic Semicolon Insertion)</em></a>, mais pour le code qui provoque l'erreur, un point-virgule est nécessaire afin que le moteur JavaScript puisse analyser le code source correctement.</p>
-
-<p>La plupart du temps, cette erreur est la conséquence d'une autre erreur : ne pas « fermer » les chaînes de caractères correctement ou utiliser <code>var</code> de façon incorrecte. Il peut également y avoir trop de parenthèses à un endroit. Lorsque cette erreur apparaît, faites attention à la syntaxe du code environnant.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Les_chaînes_laissées_ouvertes">Les chaînes laissées ouvertes</h3>
-
-<p>Cette erreur est parfois simplement provoquée par une chaîne dont les quotes ne sont pas échappées correctement ou qui ne sont pas correctement délimitées. Le moteur JavaScript s'attend donc à trouver la fin de la chaîne. Par exemple :</p>
-
-<pre class="brush: js example-bad">var toto = 'Ouvrir l'œil';
-// SyntaxError: missing ; before statement</pre>
-
-<p>Pour éviter cela, on pourra utiliser des doubles quotes ou échapper l'apostrophe :</p>
-
-<pre class="brush: js example-good">var toto = "Ouvrir l'œil";
-var toto = 'Ouvrir l\'œil';
-</pre>
-
-<h3 id="Déclarer_des_propriétés_avec_var">Déclarer des propriétés avec <code>var</code></h3>
-
-<p>On <strong>ne peut pas</strong> déclarer de propriétés sur un objet ou un tableau avec une déclaration <code>var</code>.</p>
-
-<pre class="brush: js example-bad">var obj = {};
-var obj.toto = "coucou"; // SyntaxError missing ; before statement
-
-var array = [];
-var array[0] = "monde"; // SyntaxError missing ; before statement
-</pre>
-
-<p>Pour éviter cela, on n'utilisera pas le mot-clé <code>var</code> qui est inutile dans ces cas :</p>
-
-<pre class="brush: js example-good">var obj = {};
-obj.toto = "coucou";
-
-var array = [];
-array[0] = "monde";
-</pre>
-
-<h3 id="Mauvais_mots-clés">Mauvais mots-clés</h3>
-
-<p>Il peut arriver, notamment lorsqu'on provient d'un autre langage de programmation, d'utiliser des mots-clés qui n'ont pas du tout le même sens en JavaScript :</p>
-
-<pre class="brush: js example-bad">def print(info){
-  console.log(info);
-}; // SyntaxError missing ; before statement</pre>
-
-<p>À la place de <code>def</code>, on utilisera le mot-clé <code>function</code> :</p>
-
-<pre class="brush: js example-good">function print(info){
-  console.log(info);
-};</pre>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/JavaScript/Reference/Grammaire_lexicale#Insertion_automatique_de_points-virgules">L'insertion automatique de points-virgules</a></li>
- <li><a href="/fr/docs/Web/JavaScript/Reference/Instructions">Les instructions JavaScript</a></li>
-</ul>
diff --git a/files/fr/web/javascript/reference/errors/missing_semicolon_before_statement/index.md b/files/fr/web/javascript/reference/errors/missing_semicolon_before_statement/index.md
new file mode 100644
index 0000000000..9ef0310199
--- /dev/null
+++ b/files/fr/web/javascript/reference/errors/missing_semicolon_before_statement/index.md
@@ -0,0 +1,90 @@
+---
+title: 'SyntaxError: missing ; before statement'
+slug: Web/JavaScript/Reference/Errors/Missing_semicolon_before_statement
+tags:
+  - Erreurs
+  - JavaScript
+  - Reference
+  - SyntaxError
+translation_of: Web/JavaScript/Reference/Errors/Missing_semicolon_before_statement
+original_slug: Web/JavaScript/Reference/Erreurs/Missing_semicolon_before_statement
+---
+{{jsSidebar("Errors")}}
+
+## Message
+
+    SyntaxError: Expected ';' (Edge)
+    SyntaxError: missing ; before statement (Firefox)
+
+## Type d'erreur
+
+{{jsxref("SyntaxError")}}.
+
+## Quel est le problème ?
+
+Un point-virgule est absent quelque part. En JavaScript, [les instructions doivent se terminer par des points-virgules](/fr/docs/Web/JavaScript/Reference/Instructions). Certaines de ces instructions sont traitées par [l'insertion automatique de point-virgule (_ASI_ pour _Automatic Semicolon Insertion)_](/fr/docs/Web/JavaScript/Reference/Grammaire_lexicale#Insertion_automatique_de_points-virgules), mais pour le code qui provoque l'erreur, un point-virgule est nécessaire afin que le moteur JavaScript puisse analyser le code source correctement.
+
+La plupart du temps, cette erreur est la conséquence d'une autre erreur : ne pas « fermer » les chaînes de caractères correctement ou utiliser `var` de façon incorrecte. Il peut également y avoir trop de parenthèses à un endroit. Lorsque cette erreur apparaît, faites attention à la syntaxe du code environnant.
+
+## Exemples
+
+### Les chaînes laissées ouvertes
+
+Cette erreur est parfois simplement provoquée par une chaîne dont les quotes ne sont pas échappées correctement ou qui ne sont pas correctement délimitées. Le moteur JavaScript s'attend donc à trouver la fin de la chaîne. Par exemple :
+
+```js example-bad
+var toto = 'Ouvrir l'œil';
+// SyntaxError: missing ; before statement
+```
+
+Pour éviter cela, on pourra utiliser des doubles quotes ou échapper l'apostrophe :
+
+```js example-good
+var toto = "Ouvrir l'œil";
+var toto = 'Ouvrir l\'œil';
+```
+
+### Déclarer des propriétés avec `var`
+
+On **ne peut pas** déclarer de propriétés sur un objet ou un tableau avec une déclaration `var`.
+
+```js example-bad
+var obj = {};
+var obj.toto = "coucou"; // SyntaxError missing ; before statement
+
+var array = [];
+var array[0] = "monde"; // SyntaxError missing ; before statement
+```
+
+Pour éviter cela, on n'utilisera pas le mot-clé `var` qui est inutile dans ces cas :
+
+```js example-good
+var obj = {};
+obj.toto = "coucou";
+
+var array = [];
+array[0] = "monde";
+```
+
+### Mauvais mots-clés
+
+Il peut arriver, notamment lorsqu'on provient d'un autre langage de programmation, d'utiliser des mots-clés qui n'ont pas du tout le même sens en JavaScript :
+
+```js example-bad
+def print(info){
+  console.log(info);
+}; // SyntaxError missing ; before statement
+```
+
+À la place de `def`, on utilisera le mot-clé `function` :
+
+```js example-good
+function print(info){
+  console.log(info);
+};
+```
+
+## Voir aussi
+
+- [L'insertion automatique de points-virgules](/fr/docs/Web/JavaScript/Reference/Grammaire_lexicale#Insertion_automatique_de_points-virgules)
+- [Les instructions JavaScript](/fr/docs/Web/JavaScript/Reference/Instructions)
diff --git a/files/fr/web/javascript/reference/errors/more_arguments_needed/index.html b/files/fr/web/javascript/reference/errors/more_arguments_needed/index.html
deleted file mode 100644
index 3417499581..0000000000
--- a/files/fr/web/javascript/reference/errors/more_arguments_needed/index.html
+++ /dev/null
@@ -1,50 +0,0 @@
----
-title: 'TypeError: More arguments needed'
-slug: Web/JavaScript/Reference/Errors/More_arguments_needed
-tags:
-  - Erreurs
-  - JavaScript
-  - TypeError
-translation_of: Web/JavaScript/Reference/Errors/More_arguments_needed
-original_slug: Web/JavaScript/Reference/Erreurs/More_arguments_needed
----
-<div>{{jsSidebar("Errors")}}</div>
-
-<h2 id="Message">Message</h2>
-
-<pre class="syntaxbox">TypeError: argument is not an Object and is not null (Edge)
-TypeError: Object.create requires at least 1 argument, but only 0 were passed
-TypeError: Object.setPrototypeOf requires at least 2 arguments, but only 0 were passed
-TypeError: Object.defineProperties requires at least 1 argument, but only 0 were passed
-</pre>
-
-<h2 id="Type_d'erreur">Type d'erreur</h2>
-
-<p>{{jsxref("TypeError")}}.</p>
-
-<h2 id="Quel_est_le_problème">Quel est le problème ?</h2>
-
-<p>Lors de l'appel de la fonction, il y a eu une erreur due au manque d'argument. La fonction doit recevoir plus de paramètres afin de pouvoir fonctionner.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<p>La méthode {{jsxref("Object.create()")}} nécessite au moins un argument et {{jsxref("Object.setPrototypeOf()")}} requiert deux paramètres :</p>
-
-<pre class="brush: js example-bad">var obj = Object.create();
-// TypeError: Object.create requires more than 0 arguments
-
-var obj = Object.setPrototypeOf({});
-// TypeError: Object.setPrototypeOf requires more than 1 argument
-</pre>
-
-<p>On peut corriger cet exemple en utilisant {{jsxref("null")}} comme prototype :</p>
-
-<pre class="brush: js example-good">var obj = Object.create(null);
-
-var obj = Object.setPrototypeOf({}, null);</pre>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/JavaScript/Guide/Fonctions">Les fonctions</a></li>
-</ul>
diff --git a/files/fr/web/javascript/reference/errors/more_arguments_needed/index.md b/files/fr/web/javascript/reference/errors/more_arguments_needed/index.md
new file mode 100644
index 0000000000..7175be5198
--- /dev/null
+++ b/files/fr/web/javascript/reference/errors/more_arguments_needed/index.md
@@ -0,0 +1,50 @@
+---
+title: 'TypeError: More arguments needed'
+slug: Web/JavaScript/Reference/Errors/More_arguments_needed
+tags:
+  - Erreurs
+  - JavaScript
+  - TypeError
+translation_of: Web/JavaScript/Reference/Errors/More_arguments_needed
+original_slug: Web/JavaScript/Reference/Erreurs/More_arguments_needed
+---
+{{jsSidebar("Errors")}}
+
+## Message
+
+    TypeError: argument is not an Object and is not null (Edge)
+    TypeError: Object.create requires at least 1 argument, but only 0 were passed
+    TypeError: Object.setPrototypeOf requires at least 2 arguments, but only 0 were passed
+    TypeError: Object.defineProperties requires at least 1 argument, but only 0 were passed
+
+## Type d'erreur
+
+{{jsxref("TypeError")}}.
+
+## Quel est le problème ?
+
+Lors de l'appel de la fonction, il y a eu une erreur due au manque d'argument. La fonction doit recevoir plus de paramètres afin de pouvoir fonctionner.
+
+## Exemples
+
+La méthode {{jsxref("Object.create()")}} nécessite au moins un argument et {{jsxref("Object.setPrototypeOf()")}} requiert deux paramètres :
+
+```js example-bad
+var obj = Object.create();
+// TypeError: Object.create requires more than 0 arguments
+
+var obj = Object.setPrototypeOf({});
+// TypeError: Object.setPrototypeOf requires more than 1 argument
+```
+
+On peut corriger cet exemple en utilisant {{jsxref("null")}} comme prototype :
+
+```js example-good
+var obj = Object.create(null);
+
+var obj = Object.setPrototypeOf({}, null);
+```
+
+## Voir aussi
+
+- [Les fonctions](/fr/docs/Web/JavaScript/Guide/Fonctions)
diff --git a/files/fr/web/javascript/reference/errors/negative_repetition_count/index.html b/files/fr/web/javascript/reference/errors/negative_repetition_count/index.html
deleted file mode 100644
index 2b653b11f0..0000000000
--- a/files/fr/web/javascript/reference/errors/negative_repetition_count/index.html
+++ /dev/null
@@ -1,46 +0,0 @@
----
-title: 'RangeError: repeat count must be non-negative'
-slug: Web/JavaScript/Reference/Errors/Negative_repetition_count
-tags:
-  - Erreurs
-  - JavaScript
-  - RangeError
-translation_of: Web/JavaScript/Reference/Errors/Negative_repetition_count
-original_slug: Web/JavaScript/Reference/Erreurs/Negative_repetition_count
----
-<div>{{jsSidebar("Errors")}}</div>
-
-<h2 id="Message">Message</h2>
-
-<pre class="syntaxbox">RangeError: argument out of range (Edge)
-RangeError: repeat count must be non-negative (Firefox)
-RangeError: Invalid count value (Chrome)
-</pre>
-
-<h2 id="Type_d'erreur">Type d'erreur</h2>
-
-<p>{{jsxref("RangeError")}}</p>
-
-<h2 id="Quel_est_le_problème">Quel est le problème ?</h2>
-
-<p>La méthode {{jsxref("String.prototype.repeat()")}} a été utilisée avec un argument négatif. Or, cet argument doit être compris dans l'intervalle [0, +∞).</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Exemples_invalides">Exemples invalides</h3>
-
-<pre class="brush: js example-bad">'abc'.repeat(-1); // RangeError </pre>
-
-<h3 id="Exemples_valides">Exemples valides</h3>
-
-<pre class="brush: js example-good">'abc'.repeat(0);    // ''
-'abc'.repeat(1);    // 'abc'
-'abc'.repeat(2);    // 'abcabc'
-'abc'.repeat(3.5);  // 'abcabcabc' (converti en entier)
-</pre>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("String.prototype.repeat()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/errors/negative_repetition_count/index.md b/files/fr/web/javascript/reference/errors/negative_repetition_count/index.md
new file mode 100644
index 0000000000..e4f0865fbe
--- /dev/null
+++ b/files/fr/web/javascript/reference/errors/negative_repetition_count/index.md
@@ -0,0 +1,46 @@
+---
+title: 'RangeError: repeat count must be non-negative'
+slug: Web/JavaScript/Reference/Errors/Negative_repetition_count
+tags:
+  - Erreurs
+  - JavaScript
+  - RangeError
+translation_of: Web/JavaScript/Reference/Errors/Negative_repetition_count
+original_slug: Web/JavaScript/Reference/Erreurs/Negative_repetition_count
+---
+{{jsSidebar("Errors")}}
+
+## Message
+
+    RangeError: argument out of range (Edge)
+    RangeError: repeat count must be non-negative (Firefox)
+    RangeError: Invalid count value (Chrome)
+
+## Type d'erreur
+
+{{jsxref("RangeError")}}
+
+## Quel est le problème ?
+
+La méthode {{jsxref("String.prototype.repeat()")}} a été utilisée avec un argument négatif. Or, cet argument doit être compris dans l'intervalle \[0, +∞).
+
+## Exemples
+
+### Exemples invalides
+
+```js example-bad
+'abc'.repeat(-1); // RangeError 
+```
+
+### Exemples valides
+
+```js example-good
+'abc'.repeat(0);    // ''
+'abc'.repeat(1);    // 'abc'
+'abc'.repeat(2);    // 'abcabc'
+'abc'.repeat(3.5);  // 'abcabcabc' (converti en entier)
+```
+
+## Voir aussi
+
+- {{jsxref("String.prototype.repeat()")}}
diff --git a/files/fr/web/javascript/reference/errors/no_non-null_object/index.html b/files/fr/web/javascript/reference/errors/no_non-null_object/index.html
deleted file mode 100644
index 2dd59d1667..0000000000
--- a/files/fr/web/javascript/reference/errors/no_non-null_object/index.html
+++ /dev/null
@@ -1,67 +0,0 @@
----
-title: 'TypeError: "x" is not a non-null object'
-slug: Web/JavaScript/Reference/Errors/No_non-null_object
-tags:
-  - Erreurs
-  - JavaScript
-  - TypeError
-translation_of: Web/JavaScript/Reference/Errors/No_non-null_object
-original_slug: Web/JavaScript/Reference/Erreurs/No_non-null_object
----
-<div>{{JSSidebar("Errors")}}</div>
-
-<h2 id="Message">Message</h2>
-
-<pre class="syntaxbox">TypeError: Invalid descriptor for property {x} (Edge)
-TypeError: "x" is not a non-null object (Firefox)
-TypeError: Property description must be an object: "x" (Chrome)
-TypeError: Invalid value used in weak set (Chrome)
-</pre>
-
-<h2 id="Type_d'erreur">Type d'erreur</h2>
-
-<p>{{jsxref("TypeError")}}</p>
-
-<h2 id="Quel_est_le_problème">Quel est le problème ?</h2>
-
-<p>Un objet devrait être trouvé et n'est pas fourni. La valeur {{jsxref("null")}} n'est pas un objet et ne fonctionnera pas, il est nécessaire de fournir un véritable objet pour que le code en question fonctionne.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Absence_d'un_descripteur_de_propriété">Absence d'un descripteur de propriété</h3>
-
-<p>Lorsqu'on utilise des méthodes telles que {{jsxref("Object.create()")}}, {{jsxref("Object.defineProperty()")}} ou {{jsxref("Object.defineProperties()")}}, le paramètre optionnel de description des propriétés doit être un descripteur sous la forme d'un objet. Si la valeur fournie n'est pas un objet (mais par exemple un nombre), l'appel à la méthode déclenchera une erreur :</p>
-
-<pre class="brush: js example-bad">Object.defineProperty({}, 'cle', 1);
-// TypeError: 1 is not a non-null object
-
-Object.defineProperty({}, 'cle', null);
-// TypeError: null is not a non-null object
-</pre>
-
-<p>Un descripteur de propriété valide aura la structure suivante :</p>
-
-<pre class="brush: js example-good">Object.defineProperty({}, 'cle', { value: 'toto', writable: false });
-</pre>
-
-<h3 id="Les_clés_de_WeakMap_et_WeakSet_sont_des_objets">Les clés de <code>WeakMap</code> et <code>WeakSet</code> sont des objets</h3>
-
-<p>Les objets {{jsxref("WeakMap")}} et {{jsxref("WeakSet")}} utilisent des objets comme clé. On ne peut pas utiliser d'autres types de valeurs pour les clés de ces objets.</p>
-
-<pre class="brush: js example-bad">var ws = new WeakSet();
-ws.add('toto');
-// TypeError: "toto" is not a non-null object</pre>
-
-<p>À la place, on utilisera des objets :</p>
-
-<pre class="brush: js example-good">ws.add({toto: 'truc'});
-ws.add(window);
-</pre>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Object.create()")}}</li>
- <li>{{jsxref("Object.defineProperty()")}}, {{jsxref("Object.defineProperties()")}}</li>
- <li>{{jsxref("WeakMap")}}, {{jsxref("WeakSet")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/errors/no_non-null_object/index.md b/files/fr/web/javascript/reference/errors/no_non-null_object/index.md
new file mode 100644
index 0000000000..d635131c4b
--- /dev/null
+++ b/files/fr/web/javascript/reference/errors/no_non-null_object/index.md
@@ -0,0 +1,69 @@
+---
+title: 'TypeError: "x" is not a non-null object'
+slug: Web/JavaScript/Reference/Errors/No_non-null_object
+tags:
+  - Erreurs
+  - JavaScript
+  - TypeError
+translation_of: Web/JavaScript/Reference/Errors/No_non-null_object
+original_slug: Web/JavaScript/Reference/Erreurs/No_non-null_object
+---
+{{JSSidebar("Errors")}}
+
+## Message
+
+    TypeError: Invalid descriptor for property {x} (Edge)
+    TypeError: "x" is not a non-null object (Firefox)
+    TypeError: Property description must be an object: "x" (Chrome)
+    TypeError: Invalid value used in weak set (Chrome)
+
+## Type d'erreur
+
+{{jsxref("TypeError")}}
+
+## Quel est le problème ?
+
+Un objet devrait être trouvé et n'est pas fourni. La valeur {{jsxref("null")}} n'est pas un objet et ne fonctionnera pas, il est nécessaire de fournir un véritable objet pour que le code en question fonctionne.
+
+## Exemples
+
+### Absence d'un descripteur de propriété
+
+Lorsqu'on utilise des méthodes telles que {{jsxref("Object.create()")}}, {{jsxref("Object.defineProperty()")}} ou {{jsxref("Object.defineProperties()")}}, le paramètre optionnel de description des propriétés doit être un descripteur sous la forme d'un objet. Si la valeur fournie n'est pas un objet (mais par exemple un nombre), l'appel à la méthode déclenchera une erreur :
+
+```js example-bad
+Object.defineProperty({}, 'cle', 1);
+// TypeError: 1 is not a non-null object
+
+Object.defineProperty({}, 'cle', null);
+// TypeError: null is not a non-null object
+```
+
+Un descripteur de propriété valide aura la structure suivante :
+
+```js example-good
+Object.defineProperty({}, 'cle', { value: 'toto', writable: false });
+```
+
+### Les clés de `WeakMap` et `WeakSet` sont des objets
+
+Les objets {{jsxref("WeakMap")}} et {{jsxref("WeakSet")}} utilisent des objets comme clé. On ne peut pas utiliser d'autres types de valeurs pour les clés de ces objets.
+
+```js example-bad
+var ws = new WeakSet();
+ws.add('toto');
+// TypeError: "toto" is not a non-null object
+```
+
+À la place, on utilisera des objets :
+
+```js example-good
+ws.add({toto: 'truc'});
+ws.add(window);
+```
+
+## Voir aussi
+
+- {{jsxref("Object.create()")}}
+- {{jsxref("Object.defineProperty()")}}, {{jsxref("Object.defineProperties()")}}
+- {{jsxref("WeakMap")}}, {{jsxref("WeakSet")}}
diff --git a/files/fr/web/javascript/reference/errors/no_properties/index.html b/files/fr/web/javascript/reference/errors/no_properties/index.html
deleted file mode 100644
index d45bd65c93..0000000000
--- a/files/fr/web/javascript/reference/errors/no_properties/index.html
+++ /dev/null
@@ -1,43 +0,0 @@
----
-title: 'TypeError: "x" has no properties'
-slug: Web/JavaScript/Reference/Errors/No_properties
-tags:
-  - Erreurs
-  - JavaScript
-  - Reference
-  - TypeError
-translation_of: Web/JavaScript/Reference/Errors/No_properties
-original_slug: Web/JavaScript/Reference/Erreurs/No_properties
----
-<div>{{jsSidebar("Errors")}}</div>
-
-<h2 id="Message">Message</h2>
-
-<pre class="syntaxbox">TypeError: Unable to get property {x} of undefined or null reference (Edge)
-TypeError: null has no properties (Firefox)
-TypeError: undefined has no properties (Firefox)
-</pre>
-
-<h2 id="Type_d'erreur">Type d'erreur</h2>
-
-<p>{{jsxref("TypeError")}}.</p>
-
-<h2 id="Quel_est_le_problème">Quel est le problème ?</h2>
-
-<p>Les valeurs {{jsxref("null")}} et {{jsxref("undefined")}} n'ont aucunes propriétés auxquelles accéder.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<pre class="brush: js example-bad">null.toto;
-// TypeError: null has no properties
-
-undefined.truc;
-// TypeError: undefined has no properties
-</pre>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("null")}}</li>
- <li>{{jsxref("undefined")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/errors/no_properties/index.md b/files/fr/web/javascript/reference/errors/no_properties/index.md
new file mode 100644
index 0000000000..8309c98d5e
--- /dev/null
+++ b/files/fr/web/javascript/reference/errors/no_properties/index.md
@@ -0,0 +1,41 @@
+---
+title: 'TypeError: "x" has no properties'
+slug: Web/JavaScript/Reference/Errors/No_properties
+tags:
+  - Erreurs
+  - JavaScript
+  - Reference
+  - TypeError
+translation_of: Web/JavaScript/Reference/Errors/No_properties
+original_slug: Web/JavaScript/Reference/Erreurs/No_properties
+---
+{{jsSidebar("Errors")}}
+
+## Message
+
+    TypeError: Unable to get property {x} of undefined or null reference (Edge)
+    TypeError: null has no properties (Firefox)
+    TypeError: undefined has no properties (Firefox)
+
+## Type d'erreur
+
+{{jsxref("TypeError")}}.
+
+## Quel est le problème ?
+
+Les valeurs {{jsxref("null")}} et {{jsxref("undefined")}} n'ont aucunes propriétés auxquelles accéder.
+
+## Exemples
+
+```js example-bad
+null.toto;
+// TypeError: null has no properties
+
+undefined.truc;
+// TypeError: undefined has no properties
+```
+
+## Voir aussi
+
+- {{jsxref("null")}}
+- {{jsxref("undefined")}}
diff --git a/files/fr/web/javascript/reference/errors/no_variable_name/index.html b/files/fr/web/javascript/reference/errors/no_variable_name/index.html
deleted file mode 100644
index 035c83faa9..0000000000
--- a/files/fr/web/javascript/reference/errors/no_variable_name/index.html
+++ /dev/null
@@ -1,84 +0,0 @@
----
-title: 'SyntaxError: missing variable name'
-slug: Web/JavaScript/Reference/Errors/No_variable_name
-tags:
-  - Erreurs
-  - JavaScript
-  - SyntaxError
-translation_of: Web/JavaScript/Reference/Errors/No_variable_name
-original_slug: Web/JavaScript/Reference/Erreurs/No_variable_name
----
-<div>{{jsSidebar("Errors")}}</div>
-
-<h2 id="Message">Message</h2>
-
-<pre class="syntaxbox">SyntaxError: missing variable name (Firefox)
-SyntaxError: Unexpected token = (Chrome)</pre>
-
-<h2 id="Type_d'erreur">Type d'erreur</h2>
-
-<p>{{jsxref("SyntaxError")}}</p>
-
-<h2 id="Quel_est_le_problème">Quel est le problème ?</h2>
-
-<p>Il manque un nom pour une variable. Cela est probablement dû à une erreur de syntaxe dans le code. Peut-être qu'une variable est placée au mauvais endroit ou peut-être qu'il manque un nom car on n'a pas trouvé de nom pertinent… (ce qui est souvent assez difficile).</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Absence_d'un_nom_pour_une_variable">Absence d'un nom pour une variable</h3>
-
-<pre class="brush: js example-bad">var = "toto";
-</pre>
-
-<p>Il est souvent compliqué de trouver le bon nom pour une variable…</p>
-
-<pre class="brush: js example-good">var àDéfautDeMieux = "toto";</pre>
-
-<h3 id="Les_mots-clés_réservés_ne_peuvent_pas_être_utilisés_comme_noms_de_variables">Les mots-clés réservés ne peuvent pas être utilisés comme noms de variables</h3>
-
-<p>Quelques mots-clés sont <a href="/fr/docs/Web/JavaScript/Reference/Grammaire_lexicale#Mots-clés">réservés</a> et ne peuvent pas être utilisés comme noms de variable :</p>
-
-<pre class="brush: js example-bad">var debugger = "zuuuuut";
-// SyntaxError: missing variable name
-</pre>
-
-<h3 id="Déclarer_plusieurs_variables">Déclarer plusieurs variables</h3>
-
-<p>Attention aux virgules lorsqu'on déclare plusieurs variables… Y a-t-il plus de virgules que nécessairee ? Une virgule est-elle utilisée à la place d'un point-virgule ?</p>
-
-<pre class="brush: js example-bad">var x, y = "toto",
-var x, = "toto"
-
-var un = document.getElementById('un'),
-var deux = document.getElementById('deux'),
-
-// SyntaxError: missing variable name
-</pre>
-
-<p>Voici une version corrigée :</p>
-
-<pre class="brush: js example-good">var x, y = "toto";
-var x = "toto";
-
-var un = document.getElementById('un');
-var deux = document.getElementById('deux');</pre>
-
-<h3 id="Tableaux">Tableaux</h3>
-
-<p>Pour former un littéral de tableau ({{jsxref("Array")}}), il est nécessaire d'ajouter des crochets autour des valeurs des éléments. Le fragment de code suivant ne fonctionnera pas :</p>
-
-<pre class="brush: js example-bad">var arr = 1,2,3,4,5;
-// SyntaxError: missing variable name
-</pre>
-
-<p>Voici la forme équivalente correcte :</p>
-
-<pre class="brush: js example-good">var arr = [1,2,3,4,5];</pre>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="http://wiki.c2.com/?GoodVariableNames">Choisir de bons noms de variable (en anglais)</a></li>
- <li><code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/var">var</a></code></li>
- <li><a href="/fr/docs/Web/JavaScript/Guide/Types_et_grammaire#Déclarations">Guide JavaScript : Les déclarations de variable</a></li>
-</ul>
diff --git a/files/fr/web/javascript/reference/errors/no_variable_name/index.md b/files/fr/web/javascript/reference/errors/no_variable_name/index.md
new file mode 100644
index 0000000000..def7f7fc2f
--- /dev/null
+++ b/files/fr/web/javascript/reference/errors/no_variable_name/index.md
@@ -0,0 +1,92 @@
+---
+title: 'SyntaxError: missing variable name'
+slug: Web/JavaScript/Reference/Errors/No_variable_name
+tags:
+  - Erreurs
+  - JavaScript
+  - SyntaxError
+translation_of: Web/JavaScript/Reference/Errors/No_variable_name
+original_slug: Web/JavaScript/Reference/Erreurs/No_variable_name
+---
+{{jsSidebar("Errors")}}
+
+## Message
+
+    SyntaxError: missing variable name (Firefox)
+    SyntaxError: Unexpected token = (Chrome)
+
+## Type d'erreur
+
+{{jsxref("SyntaxError")}}
+
+## Quel est le problème ?
+
+Il manque un nom pour une variable. Cela est probablement dû à une erreur de syntaxe dans le code. Peut-être qu'une variable est placée au mauvais endroit ou peut-être qu'il manque un nom car on n'a pas trouvé de nom pertinent… (ce qui est souvent assez difficile).
+
+## Exemples
+
+### Absence d'un nom pour une variable
+
+```js example-bad
+var = "toto";
+```
+
+Il est souvent compliqué de trouver le bon nom pour une variable…
+
+```js example-good
+var àDéfautDeMieux = "toto";
+```
+
+### Les mots-clés réservés ne peuvent pas être utilisés comme noms de variables
+
+Quelques mots-clés sont [réservés](/fr/docs/Web/JavaScript/Reference/Grammaire_lexicale#Mots-clés) et ne peuvent pas être utilisés comme noms de variable :
+
+```js example-bad
+var debugger = "zuuuuut";
+// SyntaxError: missing variable name
+```
+
+### Déclarer plusieurs variables
+
+Attention aux virgules lorsqu'on déclare plusieurs variables… Y a-t-il plus de virgules que nécessairee ? Une virgule est-elle utilisée à la place d'un point-virgule ?
+
+```js example-bad
+var x, y = "toto",
+var x, = "toto"
+
+var un = document.getElementById('un'),
+var deux = document.getElementById('deux'),
+
+// SyntaxError: missing variable name
+```
+
+Voici une version corrigée :
+
+```js example-good
+var x, y = "toto";
+var x = "toto";
+
+var un = document.getElementById('un');
+var deux = document.getElementById('deux');
+```
+
+### Tableaux
+
+Pour former un littéral de tableau ({{jsxref("Array")}}), il est nécessaire d'ajouter des crochets autour des valeurs des éléments. Le fragment de code suivant ne fonctionnera pas :
+
+```js example-bad
+var arr = 1,2,3,4,5;
+// SyntaxError: missing variable name
+```
+
+Voici la forme équivalente correcte :
+
+```js example-good
+var arr = [1,2,3,4,5];
+```
+
+## Voir aussi
+
+- [Choisir de bons noms de variable (en anglais)](http://wiki.c2.com/?GoodVariableNames)
+- [`var`](/fr/docs/Web/JavaScript/Reference/Instructions/var)
+- [Guide JavaScript : Les déclarations de variable](/fr/docs/Web/JavaScript/Guide/Types_et_grammaire#Déclarations)
diff --git a/files/fr/web/javascript/reference/errors/non_configurable_array_element/index.html b/files/fr/web/javascript/reference/errors/non_configurable_array_element/index.html
deleted file mode 100644
index bbb5b3569c..0000000000
--- a/files/fr/web/javascript/reference/errors/non_configurable_array_element/index.html
+++ /dev/null
@@ -1,84 +0,0 @@
----
-title: 'TypeError: can''t delete non-configurable array element'
-slug: Web/JavaScript/Reference/Errors/Non_configurable_array_element
-tags:
-  - Erreur
-  - Erreurs
-  - JavaScript
-  - TypeError
-translation_of: Web/JavaScript/Reference/Errors/Non_configurable_array_element
-original_slug: Web/JavaScript/Reference/Erreurs/Non_configurable_array_element
----
-<div>{{jsSidebar("Errors")}}</div>
-
-<h2 id="Message">Message</h2>
-
-<pre class="syntaxbox">TypeError: can't delete non-configurable array element (Firefox)
-TypeError: Cannot delete property '2' of [object Array] (Chrome)
-</pre>
-
-<h2 id="Type_d'erreur">Type d'erreur</h2>
-
-<p>{{jsxref("TypeError")}}</p>
-
-<h2 id="Quel_est_le_problème">Quel est le problème ?</h2>
-
-<p>On a voulu <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/length#Tronquer_un_tableau">raccourcir la longueur d'un tableau</a> mais l'un des éléments de ce tableau est <a href="/fr/docs/Web/JavaScript/Structures_de_données#Propriétés">non-configurable</a>. Lorsqu'on tronque un tableau, les éléments situés au-delà de la nouvelle longueur seront supprimés. Dans ce cas, c'est cette suppression qui n'a pas pu être effectuée.</p>
-
-<p>L'attribut <code>configurable</code> permet de contrôler si la propriété peut être supprimée d'un objet et si ses attributs (en dehors de <code>writable</code>) peuvent être modifiés.</p>
-
-<p>La plupart du temps, les propriétés d'un objet créé avec <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array#Syntaxe">un littéral de tableau</a> sont configurables. Toutefois, si on utilise {{jsxref("Object.defineProperty()")}} par exemple, la propriété n'est pas configurable par défaut.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Propriétés_non-configurables_créées_avec_Object.defineProperty">Propriétés non-configurables créées avec  <code>Object.defineProperty</code></h3>
-
-<p>Par défaut, la méthode {{jsxref("Object.defineProperty()")}} crée des propriétés non-configurables si on n'indique pas expressément le contraire :</p>
-
-<pre class="brush: js example-bad">var arr = [];
-Object.defineProperty(arr, 0, {value: 0});
-Object.defineProperty(arr, 1, {value: "1"});
-
-arr.length = 1;
-// TypeError: can't delete non-configurable array element
-</pre>
-
-<p>Si on veut tronquer le tableau, il faut que les éléments excédants soient configurables :</p>
-
-<pre class="brush: js example-good">var arr = [];
-Object.defineProperty(arr, 0, {value: 0, configurable: true});
-Object.defineProperty(arr, 1, {value: "1", configurable: true});
-
-arr.length = 1;
-</pre>
-
-<h3 id="Tableaux_scellés_(seal)">Tableaux scellés (<code>seal</code>)</h3>
-
-<p>La méthode {{jsxref("Object.seal()")}} permet de marquer l'ensemble des propriétés (ici les éléments du tableau) comme non-configurables :</p>
-
-<pre class="brush: js example-bad">var arr = [1,2,3];
-Object.seal(arr);
-
-arr.length = 1;
-// TypeError: can't delete non-configurable array element
-</pre>
-
-<p>Pour corriger l'erreur, il faut retirer l'appel à {{jsxref("Object.seal()")}} ou réaliser une copie du tableau. Dans ce dernier cas, on notera que tronquer la copie du tableau ne modifie pas la longueur du tableau original.</p>
-
-<pre class="brush: js example-good">var arr = [1,2,3];
-Object.seal(arr);
-
-// On copie le tableau initial pour tronquer cette copie
-var copie = Array.from(arr);
-copie.length = 1;
-// arr.length == 3
-</pre>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/JavaScript/Structures_de_données#Propriétés">La propriété interne <code>[[Configurable]]</code></a></li>
- <li>{{jsxref("Array.length")}}</li>
- <li>{{jsxref("Object.defineProperty()")}}</li>
- <li>{{jsxref("Object.seal()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/errors/non_configurable_array_element/index.md b/files/fr/web/javascript/reference/errors/non_configurable_array_element/index.md
new file mode 100644
index 0000000000..720a30d67c
--- /dev/null
+++ b/files/fr/web/javascript/reference/errors/non_configurable_array_element/index.md
@@ -0,0 +1,85 @@
+---
+title: 'TypeError: can''t delete non-configurable array element'
+slug: Web/JavaScript/Reference/Errors/Non_configurable_array_element
+tags:
+  - Erreur
+  - Erreurs
+  - JavaScript
+  - TypeError
+translation_of: Web/JavaScript/Reference/Errors/Non_configurable_array_element
+original_slug: Web/JavaScript/Reference/Erreurs/Non_configurable_array_element
+---
+{{jsSidebar("Errors")}}
+
+## Message
+
+    TypeError: can't delete non-configurable array element (Firefox)
+    TypeError: Cannot delete property '2' of [object Array] (Chrome)
+
+## Type d'erreur
+
+{{jsxref("TypeError")}}
+
+## Quel est le problème ?
+
+On a voulu [raccourcir la longueur d'un tableau](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/length#Tronquer_un_tableau) mais l'un des éléments de ce tableau est [non-configurable](/fr/docs/Web/JavaScript/Structures_de_données#Propriétés). Lorsqu'on tronque un tableau, les éléments situés au-delà de la nouvelle longueur seront supprimés. Dans ce cas, c'est cette suppression qui n'a pas pu être effectuée.
+
+L'attribut `configurable` permet de contrôler si la propriété peut être supprimée d'un objet et si ses attributs (en dehors de `writable`) peuvent être modifiés.
+
+La plupart du temps, les propriétés d'un objet créé avec [un littéral de tableau](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array#Syntaxe) sont configurables. Toutefois, si on utilise {{jsxref("Object.defineProperty()")}} par exemple, la propriété n'est pas configurable par défaut.
+
+## Exemples
+
+### Propriétés non-configurables créées avec  `Object.defineProperty`
+
+Par défaut, la méthode {{jsxref("Object.defineProperty()")}} crée des propriétés non-configurables si on n'indique pas expressément le contraire :
+
+```js example-bad
+var arr = [];
+Object.defineProperty(arr, 0, {value: 0});
+Object.defineProperty(arr, 1, {value: "1"});
+
+arr.length = 1;
+// TypeError: can't delete non-configurable array element
+```
+
+Si on veut tronquer le tableau, il faut que les éléments excédants soient configurables :
+
+```js example-good
+var arr = [];
+Object.defineProperty(arr, 0, {value: 0, configurable: true});
+Object.defineProperty(arr, 1, {value: "1", configurable: true});
+
+arr.length = 1;
+```
+
+### Tableaux scellés (`seal`)
+
+La méthode {{jsxref("Object.seal()")}} permet de marquer l'ensemble des propriétés (ici les éléments du tableau) comme non-configurables :
+
+```js example-bad
+var arr = [1,2,3];
+Object.seal(arr);
+
+arr.length = 1;
+// TypeError: can't delete non-configurable array element
+```
+
+Pour corriger l'erreur, il faut retirer l'appel à {{jsxref("Object.seal()")}} ou réaliser une copie du tableau. Dans ce dernier cas, on notera que tronquer la copie du tableau ne modifie pas la longueur du tableau original.
+
+```js example-good
+var arr = [1,2,3];
+Object.seal(arr);
+
+// On copie le tableau initial pour tronquer cette copie
+var copie = Array.from(arr);
+copie.length = 1;
+// arr.length == 3
+```
+
+## Voir aussi
+
+- [La propriété interne `[[Configurable]]`](/fr/docs/Web/JavaScript/Structures_de_données#Propriétés)
+- {{jsxref("Array.length")}}
+- {{jsxref("Object.defineProperty()")}}
+- {{jsxref("Object.seal()")}}
diff --git a/files/fr/web/javascript/reference/errors/not_a_codepoint/index.html b/files/fr/web/javascript/reference/errors/not_a_codepoint/index.html
deleted file mode 100644
index 2da0d021ee..0000000000
--- a/files/fr/web/javascript/reference/errors/not_a_codepoint/index.html
+++ /dev/null
@@ -1,57 +0,0 @@
----
-title: 'RangeError: argument is not a valid code point'
-slug: Web/JavaScript/Reference/Errors/Not_a_codepoint
-tags:
-  - Erreurs
-  - JavaScript
-  - RangeError
-translation_of: Web/JavaScript/Reference/Errors/Not_a_codepoint
-original_slug: Web/JavaScript/Reference/Erreurs/Not_a_codepoint
----
-<div>{{jsSidebar("Errors")}}</div>
-
-<h2 id="Message">Message</h2>
-
-<pre class="syntaxbox">RangeError: Invalid code point {0} (Edge)
-RangeError: {0} is not a valid code point (Firefox)
-RangeError: Invalid code point {0} (Chrome)
-</pre>
-
-<h2 id="Type_d'erreur">Type d'erreur</h2>
-
-<p>{{jsxref("RangeError")}}</p>
-
-<h2 id="Quel_est_le_problème">Quel est le problème ?</h2>
-
-<p>La méthode {{jsxref("String.fromCodePoint()")}} a été utilisée mais elle n'accepte que les points de code valides (<em>code points</em>) et la valeur fournie en argument n'est pas un point de code valide (ex. <code>NaN</code>, <code>-1</code>).</p>
-
-<p>Un <a href="https://fr.wikipedia.org/wiki/Point_de_code">point de code</a> est une valeur de code Unicode et s'inscrit dans un intervalle allant de <code>0</code> à <code>0x10FFFF</code>.</p>
-
-<p>Les valeurs {{jsxref("NaN")}}, les entiers négatifs (<code>-1</code>), les flottants (<code>3.14</code>) ou les valeur supérieures à <code>0x10FFFF</code> (<code>1114111</code>) ne peuvent pas être utilisées avec cette méthode.</p>
-
-<h2 id="Examples">Examples</h2>
-
-<h3 id="Exemples_invalides">Exemples invalides</h3>
-
-<pre class="brush: js example-bad">String.fromCodePoint('_');      // RangeError
-String.fromCodePoint(Infinity); // RangeError
-String.fromCodePoint(-1);       // RangeError
-String.fromCodePoint(3.14);     // RangeError
-String.fromCodePoint(3e-2);     // RangeError
-String.fromCodePoint(NaN);      // RangeError</pre>
-
-<h3 id="Exemples_valides">Exemples valides</h3>
-
-<pre class="brush: js example-good">String.fromCodePoint(42);       // "*"
-String.fromCodePoint(65, 90);   // "AZ"
-String.fromCodePoint(0x404);    // "\u0404"
-String.fromCodePoint(0x2F804);  // "\uD87E\uDC04"
-String.fromCodePoint(194564);   // "\uD87E\uDC04"
-String.fromCodePoint(0x1D306, 0x61, 0x1D307) // "\uD834\uDF06a\uD834\uDF07"
-</pre>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("String.fromCodePoint()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/errors/not_a_codepoint/index.md b/files/fr/web/javascript/reference/errors/not_a_codepoint/index.md
new file mode 100644
index 0000000000..5f8bcf650b
--- /dev/null
+++ b/files/fr/web/javascript/reference/errors/not_a_codepoint/index.md
@@ -0,0 +1,57 @@
+---
+title: 'RangeError: argument is not a valid code point'
+slug: Web/JavaScript/Reference/Errors/Not_a_codepoint
+tags:
+  - Erreurs
+  - JavaScript
+  - RangeError
+translation_of: Web/JavaScript/Reference/Errors/Not_a_codepoint
+original_slug: Web/JavaScript/Reference/Erreurs/Not_a_codepoint
+---
+{{jsSidebar("Errors")}}
+
+## Message
+
+    RangeError: Invalid code point {0} (Edge)
+    RangeError: {0} is not a valid code point (Firefox)
+    RangeError: Invalid code point {0} (Chrome)
+
+## Type d'erreur
+
+{{jsxref("RangeError")}}
+
+## Quel est le problème ?
+
+La méthode {{jsxref("String.fromCodePoint()")}} a été utilisée mais elle n'accepte que les points de code valides (_code points_) et la valeur fournie en argument n'est pas un point de code valide (ex. `NaN`, `-1`).
+
+Un [point de code](https://fr.wikipedia.org/wiki/Point_de_code) est une valeur de code Unicode et s'inscrit dans un intervalle allant de `0` à `0x10FFFF`.
+
+Les valeurs {{jsxref("NaN")}}, les entiers négatifs (`-1`), les flottants (`3.14`) ou les valeur supérieures à `0x10FFFF` (`1114111`) ne peuvent pas être utilisées avec cette méthode.
+
+## Examples
+
+### Exemples invalides
+
+```js example-bad
+String.fromCodePoint('_');      // RangeError
+String.fromCodePoint(Infinity); // RangeError
+String.fromCodePoint(-1);       // RangeError
+String.fromCodePoint(3.14);     // RangeError
+String.fromCodePoint(3e-2);     // RangeError
+String.fromCodePoint(NaN);      // RangeError
+```
+
+### Exemples valides
+
+```js example-good
+String.fromCodePoint(42);       // "*"
+String.fromCodePoint(65, 90);   // "AZ"
+String.fromCodePoint(0x404);    // "\u0404"
+String.fromCodePoint(0x2F804);  // "\uD87E\uDC04"
+String.fromCodePoint(194564);   // "\uD87E\uDC04"
+String.fromCodePoint(0x1D306, 0x61, 0x1D307) // "\uD834\uDF06a\uD834\uDF07"
+```
+
+## Voir aussi
+
+- {{jsxref("String.fromCodePoint()")}}
diff --git a/files/fr/web/javascript/reference/errors/not_a_constructor/index.html b/files/fr/web/javascript/reference/errors/not_a_constructor/index.html
deleted file mode 100644
index 211e4e952c..0000000000
--- a/files/fr/web/javascript/reference/errors/not_a_constructor/index.html
+++ /dev/null
@@ -1,97 +0,0 @@
----
-title: 'TypeError: "x" is not a constructor'
-slug: Web/JavaScript/Reference/Errors/Not_a_constructor
-tags:
-  - Erreurs
-  - JavaScript
-  - TypeError
-translation_of: Web/JavaScript/Reference/Errors/Not_a_constructor
-original_slug: Web/JavaScript/Reference/Erreurs/Not_a_constructor
----
-<div>{{jsSidebar("Errors")}}</div>
-
-<h2 id="Message">Message</h2>
-
-<pre class="syntaxbox">TypeError: Object doesn't support this action (Edge)
-TypeError: "x" is not a constructor
-
-TypeError: Math is not a constructor
-TypeError: JSON is not a constructor
-TypeError: Symbol is not a constructor
-TypeError: Reflect is not a constructor
-TypeError: Intl is not a constructor
-TypeError: SIMD is not a constructor
-TypeError: Atomics is not a constructor
-</pre>
-
-<h2 id="Type_d'erreur">Type d'erreur</h2>
-
-<p>{{jsxref("TypeError")}}</p>
-
-<h2 id="Quel_est_le_problème">Quel est le problème ?</h2>
-
-<p>Une variable ou un objet a été utilisé comme un constructeur alors que cet objet ou cette variable n'est pas un constructeur. Pour plus d'informations sur les constructeurs, voir la page sur <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_new">l'opérateur <code>new</code></a>.</p>
-
-<p>De nombreux objets globaux tels que {{jsxref("String")}} ou {{jsxref("Array")}}, sont constructibles avec <code>new</code>. Cependant, d'autres objets globaux ne le sont pas (leurs propriétés et méthodes sont statiques). Les objets standards natifs suivants ne sont pas des constructeur : {{jsxref("Math")}}, {{jsxref("JSON")}}, {{jsxref("Symbol")}}, {{jsxref("Reflect")}}, {{jsxref("Intl")}}, {{jsxref("SIMD")}}, {{jsxref("Atomics")}}.</p>
-
-<p><a href="/fr/docs/Web/JavaScript/Reference/Instructions/function*">Les fonctions génératrices</a> ne peuvent pas non plus être utilisées comme des constructeurs.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Exemples_invalides">Exemples invalides</h3>
-
-<pre class="brush: js example-bad">var Voiture = 1;
-new Voiture();
-// TypeError: Voiture is not a constructor
-
-new Math();
-// TypeError: Math is not a constructor
-
-new Symbol();
-// TypeError: Symbol is not a constructor
-
-function* f() {};
-var obj = new f;
-// TypeError: f is not a constructor
-</pre>
-
-<h3 id="Créer_un_constructeur_voiture">Créer un constructeur <code>voiture</code></h3>
-
-<p>Imaginons qu'on veuille représenter des voitures sous forme d'objets. On appellera ce type <code>voiture</code> et on lui ajoutera des propriétés pour le fabricant, le modèle et l'année. Pour cela, on pourra écrire la fonction suivante :</p>
-
-<pre class="brush: js">function Voiture(fabriquant, modèle, année) {
-  this.fabriquant = fabriquant;
-  this.modèle = modèle;
-  this.année = année;
-}
-</pre>
-
-<p>On peut désormais créer un objet <code>maVoiture</code> comme ceci :</p>
-
-<pre class="brush: js">var maVoiture = new Voiture("Renault", "Twingo", 2006);</pre>
-
-<h3 id="Avec_les_promesses">Avec les promesses</h3>
-
-<p>Lorsqu'on renvoie une promesse immédiatement tenue ou rompue, il n'est pas nécessaire d'utiliser <code>new Promise()</code> pour la manipuler. Il faut plutôt utiliser les méthodes statiques {{jsxref("Promise.resolve()")}} ou {{jsxref("Promise.reject()")}} :</p>
-
-<pre class="brush: js example-bad">// Dans ce cas on aura une exception
-// "this is not a constructor"
-return new Promise.resolve(true);
-</pre>
-
-<pre class="brush: js">// Cette formulation fonctionne mais
-// est inutilement longue
-return new Promise((resolve, reject) =&gt; { resolve(true); });
-
-// On pourra autrement utiliser les
-// méthodes statiques
-return Promise.resolve(true);
-return Promise.reject(false);
-</pre>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{Glossary("constructor")}}</li>
- <li><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_new">L'opérateur <code>new</code></a></li>
-</ul>
diff --git a/files/fr/web/javascript/reference/errors/not_a_constructor/index.md b/files/fr/web/javascript/reference/errors/not_a_constructor/index.md
new file mode 100644
index 0000000000..a6c6372d7d
--- /dev/null
+++ b/files/fr/web/javascript/reference/errors/not_a_constructor/index.md
@@ -0,0 +1,100 @@
+---
+title: 'TypeError: "x" is not a constructor'
+slug: Web/JavaScript/Reference/Errors/Not_a_constructor
+tags:
+  - Erreurs
+  - JavaScript
+  - TypeError
+translation_of: Web/JavaScript/Reference/Errors/Not_a_constructor
+original_slug: Web/JavaScript/Reference/Erreurs/Not_a_constructor
+---
+{{jsSidebar("Errors")}}
+
+## Message
+
+    TypeError: Object doesn't support this action (Edge)
+    TypeError: "x" is not a constructor
+
+    TypeError: Math is not a constructor
+    TypeError: JSON is not a constructor
+    TypeError: Symbol is not a constructor
+    TypeError: Reflect is not a constructor
+    TypeError: Intl is not a constructor
+    TypeError: SIMD is not a constructor
+    TypeError: Atomics is not a constructor
+
+## Type d'erreur
+
+{{jsxref("TypeError")}}
+
+## Quel est le problème ?
+
+Une variable ou un objet a été utilisé comme un constructeur alors que cet objet ou cette variable n'est pas un constructeur. Pour plus d'informations sur les constructeurs, voir la page sur [l'opérateur `new`](/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_new).
+
+De nombreux objets globaux tels que {{jsxref("String")}} ou {{jsxref("Array")}}, sont constructibles avec `new`. Cependant, d'autres objets globaux ne le sont pas (leurs propriétés et méthodes sont statiques). Les objets standards natifs suivants ne sont pas des constructeur : {{jsxref("Math")}}, {{jsxref("JSON")}}, {{jsxref("Symbol")}}, {{jsxref("Reflect")}}, {{jsxref("Intl")}}, {{jsxref("SIMD")}}, {{jsxref("Atomics")}}.
+
+[Les fonctions génératrices](/fr/docs/Web/JavaScript/Reference/Instructions/function*) ne peuvent pas non plus être utilisées comme des constructeurs.
+
+## Exemples
+
+### Exemples invalides
+
+```js example-bad
+var Voiture = 1;
+new Voiture();
+// TypeError: Voiture is not a constructor
+
+new Math();
+// TypeError: Math is not a constructor
+
+new Symbol();
+// TypeError: Symbol is not a constructor
+
+function* f() {};
+var obj = new f;
+// TypeError: f is not a constructor
+```
+
+### Créer un constructeur `voiture`
+
+Imaginons qu'on veuille représenter des voitures sous forme d'objets. On appellera ce type `voiture` et on lui ajoutera des propriétés pour le fabricant, le modèle et l'année. Pour cela, on pourra écrire la fonction suivante :
+
+```js
+function Voiture(fabriquant, modèle, année) {
+  this.fabriquant = fabriquant;
+  this.modèle = modèle;
+  this.année = année;
+}
+```
+
+On peut désormais créer un objet `maVoiture` comme ceci :
+
+```js
+var maVoiture = new Voiture("Renault", "Twingo", 2006);
+```
+
+### Avec les promesses
+
+Lorsqu'on renvoie une promesse immédiatement tenue ou rompue, il n'est pas nécessaire d'utiliser `new Promise()` pour la manipuler. Il faut plutôt utiliser les méthodes statiques {{jsxref("Promise.resolve()")}} ou {{jsxref("Promise.reject()")}} :
+
+```js example-bad
+// Dans ce cas on aura une exception
+// "this is not a constructor"
+return new Promise.resolve(true);
+```
+
+```js
+// Cette formulation fonctionne mais
+// est inutilement longue
+return new Promise((resolve, reject) => { resolve(true); });
+
+// On pourra autrement utiliser les
+// méthodes statiques
+return Promise.resolve(true);
+return Promise.reject(false);
+```
+
+## Voir aussi
+
+- {{Glossary("constructor")}}
+- [L'opérateur `new`](/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_new)
diff --git a/files/fr/web/javascript/reference/errors/not_a_function/index.html b/files/fr/web/javascript/reference/errors/not_a_function/index.html
deleted file mode 100644
index 8675a249ae..0000000000
--- a/files/fr/web/javascript/reference/errors/not_a_function/index.html
+++ /dev/null
@@ -1,156 +0,0 @@
----
-title: 'TypeError: "x" is not a function'
-slug: Web/JavaScript/Reference/Errors/Not_a_function
-tags:
-  - Erreurs
-  - JavaScript
-  - TypeError
-translation_of: Web/JavaScript/Reference/Errors/Not_a_function
-original_slug: Web/JavaScript/Reference/Erreurs/Not_a_function
----
-<div>{{jsSidebar("Errors")}}</div>
-
-<h2 id="Message">Message</h2>
-
-<pre class="syntaxbox">TypeError: Object doesn't support property or method {x} (Edge)
-TypeError: "x" is not a function
-</pre>
-
-<h2 id="Type_d'erreur">Type d'erreur</h2>
-
-<p>{{jsxref("TypeError")}}.</p>
-
-<h2 id="Quel_est_le_problème">Quel est le problème ?</h2>
-
-<p>Une valeur a été utilisée pour un appel de fonction alors que cette valeur n'est pas une fonction. Autrement dit, un fragment de code attendait une fonction mais a reçu des valeurs d'un autre type.</p>
-
-<p>Il est possible qu'il y ait une coquille dans le nom de la fonction. Peut être que l'objet sur lequel la méthode est invoquée ne possède pas cette fonction (par exemple, les objets <code>Array</code> possèdent une fonction <code>map()</code> mais d'autres objets ne l'ont pas).</p>
-
-<p>Il existe de nombreuses fonctions natives qui fonctionnent à l'aide d'une fonction (<em>callback</em>) passée en argument :</p>
-
-<ul>
- <li>Pour les objets {{jsxref("Array")}} ou {{jsxref("TypedArray")}}, voici les fonctions qui utilisent une fonction en argument :
-  <ul>
-   <li>{{jsxref("Array.prototype.every()")}}, {{jsxref("Array.prototype.some()")}}, {{jsxref("Array.prototype.forEach()")}}, {{jsxref("Array.prototype.map()")}}, {{jsxref("Array.prototype.filter()")}},  {{jsxref("Array.prototype.reduce()")}}, {{jsxref("Array.prototype.reduceRight()")}}, {{jsxref("Array.prototype.find()")}}</li>
-  </ul>
- </li>
- <li>Pour les objets {{jsxref("Map")}} et {{jsxref("Set")}}, voici les méthodes concernées :
-  <ul>
-   <li>{{jsxref("Map.prototype.forEach()")}} and {{jsxref("Set.prototype.forEach()")}}</li>
-  </ul>
- </li>
-</ul>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Une_coquille_dans_le_nom_de_la_fonction">Une coquille dans le nom de la fonction</h3>
-
-<p>Dans ce cas, qui arrive bien trop souvent, il y a une faute d'orthographe dans le nom de la fonction utilisée :</p>
-
-<pre class="brush: js example-bad">var x = document.getElementByID("toto");
-// TypeError: document.getElementByID is not a function
-</pre>
-
-<p>Le nom de la fonction est (dans cet exemple) <code>getElementByI<strong>d</strong></code> (attention à la casse pour les noms en JavaScript) :</p>
-
-<pre class="brush: js example-good">var x = document.getElementById("toto");
-</pre>
-
-<h3 id="Appeler_une_fonction_sur_le_mauvais_objet">Appeler une fonction sur le mauvais objet</h3>
-
-<p>Certaines méthodes ne fonctionnent que pour certains types d'objet et utilisent une fonction en argument. Ainsi, dans cet exemple, on utilise {{jsxref("Array.prototype.map()")}} qui ne fonctionne que sur les objets {{jsxref("Array")}}.</p>
-
-<pre class="brush: js example-bad">var obj = { a: 13, b: 37, c: 42 };
-
-obj.map(function(num) {
-  return num * 2;
-});
-
-// TypeError: obj.map is not a function</pre>
-
-<p>Il faudra utiliser un tableau à la place :</p>
-
-<pre class="brush: js example-good">var nombres = [1, 4, 9];
-
-nombres.map(function(num) {
-  return num * 2;
-});
-
-// Array [ 2, 8, 18 ]
-</pre>
-
-<h3 id="Utiliser_le_même_nom_pour_une_méthode_et_une_propriété">Utiliser le même nom pour une méthode et une propriété</h3>
-
-<p>Lorsqu'on écrit une classe, on peut malheureusement utiliser le même nom pour une propriété et une méthode. Lorsqu'on appellera la fonction, celle-ci aura été remplacée par la propriété et cela déclenchera une erreur :</p>
-
-<pre class="brush: js example-bad">var Chien = function () {
- this.age = 11;
- this.couleur = "noir";
- this.nom = "Ralph";
- return this;
-}
-
-Chien.prototype.nom = function(nom) {
- this.nom = nom;
- return this;
-}
-
-
-var monNouveauChien = new Chien();
-monNouveauChien.nom("Cassidy"); // Uncaught TypeError: monNouveauChien.nom is not a function
-</pre>
-
-<p>Pour résoudre le problème, on utilisera deux noms distincts pour la propriété et la méthode :</p>
-
-<pre class="brush: js example-good">var Chien = function () {
- this.age = 11;
- this.couleur = "noir";
- this.nomChien = "Ralph";
- return this;
-}
-
-Chien.prototype.nom = function(nom) {
- this.nomChien = nom;
- return this;
-}
-
-
-var monNouveauChien = new Chien();
-monNouveauChien.nom("Cassidy"); // Chien { age: 11, couleur: "noir", nomChien: "Cassidy" }
-</pre>
-
-<h3 id="Utiliser_des_parenthèses_pour_la_multiplication">Utiliser des parenthèses pour la multiplication</h3>
-
-<p>En notation mathématique, on peut écrire 2(3+5) pour indiquer qu'on souhaite multiplier 2 par 3 + 5. Toutefois, une telle écriture n'est pas valide en JavaScript car il faut préciser l'opérateur de multiplication :</p>
-
-<pre class="js example-bad">var seize = 2(3 + 5);
-console.log('2 x (3 + 5) vaut ' + String(seize));
-// Uncaught TypeError: 2 is not a function</pre>
-
-<p>Pour corriger, il suffit d'ajouter l'opérateur <code>*</code> :</p>
-
-<pre class="js example-good">var seize = 2 * (3 + 5);
-console.log('2 x (3 + 5) is ' + String(seize));
-//2 x (3 + 5) is 16
-</pre>
-
-<h3 id="Importer_un_module_exporté_correctement">Importer un module exporté correctement</h3>
-
-<p>Assurez-vous d'importer le module correctement. Si par exemple, on dispose d'une bibliothèque <code>helpers.js</code> avec le code suivant :</p>
-
-<pre class="brush: js">let helpers = function () { };
-helpers.log = function(msg) {
-  console.log(msg);
-};
-
-export default helpers;</pre>
-
-<p>Pour l'importer côté application, on écrira :</p>
-
-<pre class="brush: js">import helpers from './helpers'</pre>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/JavaScript/Reference/Fonctions">Les fonctions</a></li>
-</ul>
diff --git a/files/fr/web/javascript/reference/errors/not_a_function/index.md b/files/fr/web/javascript/reference/errors/not_a_function/index.md
new file mode 100644
index 0000000000..e6b948eebe
--- /dev/null
+++ b/files/fr/web/javascript/reference/errors/not_a_function/index.md
@@ -0,0 +1,162 @@
+---
+title: 'TypeError: "x" is not a function'
+slug: Web/JavaScript/Reference/Errors/Not_a_function
+tags:
+  - Erreurs
+  - JavaScript
+  - TypeError
+translation_of: Web/JavaScript/Reference/Errors/Not_a_function
+original_slug: Web/JavaScript/Reference/Erreurs/Not_a_function
+---
+{{jsSidebar("Errors")}}
+
+## Message
+
+    TypeError: Object doesn't support property or method {x} (Edge)
+    TypeError: "x" is not a function
+
+## Type d'erreur
+
+{{jsxref("TypeError")}}.
+
+## Quel est le problème ?
+
+Une valeur a été utilisée pour un appel de fonction alors que cette valeur n'est pas une fonction. Autrement dit, un fragment de code attendait une fonction mais a reçu des valeurs d'un autre type.
+
+Il est possible qu'il y ait une coquille dans le nom de la fonction. Peut être que l'objet sur lequel la méthode est invoquée ne possède pas cette fonction (par exemple, les objets `Array` possèdent une fonction `map()` mais d'autres objets ne l'ont pas).
+
+Il existe de nombreuses fonctions natives qui fonctionnent à l'aide d'une fonction (_callback_) passée en argument :
+
+- Pour les objets {{jsxref("Array")}} ou {{jsxref("TypedArray")}}, voici les fonctions qui utilisent une fonction en argument :
+
+  - {{jsxref("Array.prototype.every()")}}, {{jsxref("Array.prototype.some()")}}, {{jsxref("Array.prototype.forEach()")}}, {{jsxref("Array.prototype.map()")}}, {{jsxref("Array.prototype.filter()")}},  {{jsxref("Array.prototype.reduce()")}}, {{jsxref("Array.prototype.reduceRight()")}}, {{jsxref("Array.prototype.find()")}}
+
+- Pour les objets {{jsxref("Map")}} et {{jsxref("Set")}}, voici les méthodes concernées :
+
+  - {{jsxref("Map.prototype.forEach()")}} and {{jsxref("Set.prototype.forEach()")}}
+
+## Exemples
+
+### Une coquille dans le nom de la fonction
+
+Dans ce cas, qui arrive bien trop souvent, il y a une faute d'orthographe dans le nom de la fonction utilisée :
+
+```js example-bad
+var x = document.getElementByID("toto");
+// TypeError: document.getElementByID is not a function
+```
+
+Le nom de la fonction est (dans cet exemple) `getElementById` (attention à la casse pour les noms en JavaScript) :
+
+```js example-good
+var x = document.getElementById("toto");
+```
+
+### Appeler une fonction sur le mauvais objet
+
+Certaines méthodes ne fonctionnent que pour certains types d'objet et utilisent une fonction en argument. Ainsi, dans cet exemple, on utilise {{jsxref("Array.prototype.map()")}} qui ne fonctionne que sur les objets {{jsxref("Array")}}.
+
+```js example-bad
+var obj = { a: 13, b: 37, c: 42 };
+
+obj.map(function(num) {
+  return num * 2;
+});
+
+// TypeError: obj.map is not a function
+```
+
+Il faudra utiliser un tableau à la place :
+
+```js example-good
+var nombres = [1, 4, 9];
+
+nombres.map(function(num) {
+  return num * 2;
+});
+
+// Array [ 2, 8, 18 ]
+```
+
+### Utiliser le même nom pour une méthode et une propriété
+
+Lorsqu'on écrit une classe, on peut malheureusement utiliser le même nom pour une propriété et une méthode. Lorsqu'on appellera la fonction, celle-ci aura été remplacée par la propriété et cela déclenchera une erreur :
+
+```js example-bad
+var Chien = function () {
+ this.age = 11;
+ this.couleur = "noir";
+ this.nom = "Ralph";
+ return this;
+}
+
+Chien.prototype.nom = function(nom) {
+ this.nom = nom;
+ return this;
+}
+
+
+var monNouveauChien = new Chien();
+monNouveauChien.nom("Cassidy"); // Uncaught TypeError: monNouveauChien.nom is not a function
+```
+
+Pour résoudre le problème, on utilisera deux noms distincts pour la propriété et la méthode :
+
+```js example-good
+var Chien = function () {
+ this.age = 11;
+ this.couleur = "noir";
+ this.nomChien = "Ralph";
+ return this;
+}
+
+Chien.prototype.nom = function(nom) {
+ this.nomChien = nom;
+ return this;
+}
+
+
+var monNouveauChien = new Chien();
+monNouveauChien.nom("Cassidy"); // Chien { age: 11, couleur: "noir", nomChien: "Cassidy" }
+```
+
+### Utiliser des parenthèses pour la multiplication
+
+En notation mathématique, on peut écrire 2(3+5) pour indiquer qu'on souhaite multiplier 2 par 3 + 5. Toutefois, une telle écriture n'est pas valide en JavaScript car il faut préciser l'opérateur de multiplication :
+
+```js example-bad
+var seize = 2(3 + 5);
+console.log('2 x (3 + 5) vaut ' + String(seize));
+// Uncaught TypeError: 2 is not a function
+```
+
+Pour corriger, il suffit d'ajouter l'opérateur `*` :
+
+```js example-good
+var seize = 2 * (3 + 5);
+console.log('2 x (3 + 5) is ' + String(seize));
+//2 x (3 + 5) is 16
+```
+
+### Importer un module exporté correctement
+
+Assurez-vous d'importer le module correctement. Si par exemple, on dispose d'une bibliothèque `helpers.js` avec le code suivant :
+
+```js
+let helpers = function () { };
+helpers.log = function(msg) {
+  console.log(msg);
+};
+
+export default helpers;
+```
+
+Pour l'importer côté application, on écrira :
+
+```js
+import helpers from './helpers'
+```
+
+## Voir aussi
+
+- [Les fonctions](/fr/docs/Web/JavaScript/Reference/Fonctions)
diff --git a/files/fr/web/javascript/reference/errors/not_defined/index.html b/files/fr/web/javascript/reference/errors/not_defined/index.html
deleted file mode 100644
index d88edd4f04..0000000000
--- a/files/fr/web/javascript/reference/errors/not_defined/index.html
+++ /dev/null
@@ -1,71 +0,0 @@
----
-title: 'ReferenceError: "x" is not defined'
-slug: Web/JavaScript/Reference/Errors/Not_defined
-tags:
-  - Erreur
-  - JavaScript
-  - Reference
-  - ReferenceError
-translation_of: Web/JavaScript/Reference/Errors/Not_defined
-original_slug: Web/JavaScript/Reference/Erreurs/Not_defined
----
-<div>{{jsSidebar("Errors")}}</div>
-
-<h2 id="Message">Message</h2>
-
-<pre class="syntaxbox">ReferenceError: "x" is not defined
-</pre>
-
-<h2 id="Type_d'erreur">Type d'erreur</h2>
-
-<p>{{jsxref("ReferenceError")}}.</p>
-
-<h2 id="Quel_est_le_problème">Quel est le problème ?</h2>
-
-<p>Une variable qui n'existe pas est référencée quelque part. Cette variable doit être déclarée ou il faut vérifier qu'elle est disponible dans le script concerné ou dans la portée utilisée.</p>
-
-<div class="note">
-<p><strong>Note :</strong> Lors du chargement d'une bibliothèque comme jQuery, assurez-vous de bien charger la bibliothèque avant d'accéder aux variables comme <code>$</code>. La balise {{HTMLElement("script")}} utilisée pour charger la bibliothèque doit être présente avant le code qui l'utilise.</p>
-</div>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Exemple_de_variable_non_déclarée">Exemple de variable non déclarée</h3>
-
-<pre class="brush: js example-bad">toto.substring(1); // ReferenceError: toto is not defined
-</pre>
-
-<p>La variable <code>toto</code> n'est définie nulle part. De plus, il faut qu'elle soit une chaîne de caractères afin que la méthode {{jsxref("String.prototype.substring()")}} puisse fonctionner.</p>
-
-<pre class="brush: js example-good">var toto = "truc";
-toto.substring(1); // "ruc"</pre>
-
-<h3 id="Exemple_de_portée_invalide">Exemple de portée invalide</h3>
-
-<p>Une variable doit être disponible dans le contexte d'exécution où elle est utilisée. Les variables définies au sein d'une fonction ne peuvent pas être utilisées en dehors de cette fonction car la variable appartient à la <em>portée</em> de la fonction.</p>
-
-<pre class="brush: js example-bad">function numbers () {
-  var num1 = 2,
-      num2 = 3;
-  return num1 + num2;
-}
-
-console.log(num1); // ReferenceError num1 is not defined.</pre>
-
-<p>Toutefois, une fonction peut accéder aux variables et aux fonctions définies dans la portée dans laquelle elle s'inscrit. Ainsi, une fonction définie dans la portée globale peut utiliser toutes les variables définies dans la portée globale.</p>
-
-<pre class="brush: js example-good">var num1 = 2,
-    num2 = 3;
-
-function numbers () {
-  return num1 + num2;
-}
-
-console.log(num1); // 2</pre>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/JavaScript/Guide/Types_et_grammaire#Déclaration_de_variables">La déclaration de variables dans le guide JavaScript</a></li>
- <li><a href="/fr/docs/Web/JavaScript/Guide/Fonctions#Portée_d'une_fonction">Les notions de portées dans le guide JavaScript</a></li>
-</ul>
diff --git a/files/fr/web/javascript/reference/errors/not_defined/index.md b/files/fr/web/javascript/reference/errors/not_defined/index.md
new file mode 100644
index 0000000000..51fa9d1bff
--- /dev/null
+++ b/files/fr/web/javascript/reference/errors/not_defined/index.md
@@ -0,0 +1,73 @@
+---
+title: 'ReferenceError: "x" is not defined'
+slug: Web/JavaScript/Reference/Errors/Not_defined
+tags:
+  - Erreur
+  - JavaScript
+  - Reference
+  - ReferenceError
+translation_of: Web/JavaScript/Reference/Errors/Not_defined
+original_slug: Web/JavaScript/Reference/Erreurs/Not_defined
+---
+{{jsSidebar("Errors")}}
+
+## Message
+
+    ReferenceError: "x" is not defined
+
+## Type d'erreur
+
+{{jsxref("ReferenceError")}}.
+
+## Quel est le problème ?
+
+Une variable qui n'existe pas est référencée quelque part. Cette variable doit être déclarée ou il faut vérifier qu'elle est disponible dans le script concerné ou dans la portée utilisée.
+
+> **Note :** Lors du chargement d'une bibliothèque comme jQuery, assurez-vous de bien charger la bibliothèque avant d'accéder aux variables comme `$`. La balise {{HTMLElement("script")}} utilisée pour charger la bibliothèque doit être présente avant le code qui l'utilise.
+
+## Exemples
+
+### Exemple de variable non déclarée
+
+```js example-bad
+toto.substring(1); // ReferenceError: toto is not defined
+```
+
+La variable `toto` n'est définie nulle part. De plus, il faut qu'elle soit une chaîne de caractères afin que la méthode {{jsxref("String.prototype.substring()")}} puisse fonctionner.
+
+```js example-good
+var toto = "truc";
+toto.substring(1); // "ruc"
+```
+
+### Exemple de portée invalide
+
+Une variable doit être disponible dans le contexte d'exécution où elle est utilisée. Les variables définies au sein d'une fonction ne peuvent pas être utilisées en dehors de cette fonction car la variable appartient à la _portée_ de la fonction.
+
+```js example-bad
+function numbers () {
+  var num1 = 2,
+      num2 = 3;
+  return num1 + num2;
+}
+
+console.log(num1); // ReferenceError num1 is not defined.
+```
+
+Toutefois, une fonction peut accéder aux variables et aux fonctions définies dans la portée dans laquelle elle s'inscrit. Ainsi, une fonction définie dans la portée globale peut utiliser toutes les variables définies dans la portée globale.
+
+```js example-good
+var num1 = 2,
+    num2 = 3;
+
+function numbers () {
+  return num1 + num2;
+}
+
+console.log(num1); // 2
+```
+
+## Voir aussi
+
+- [La déclaration de variables dans le guide JavaScript](/fr/docs/Web/JavaScript/Guide/Types_et_grammaire#Déclaration_de_variables)
+- [Les notions de portées dans le guide JavaScript](/fr/docs/Web/JavaScript/Guide/Fonctions#Portée_d'une_fonction)
diff --git a/files/fr/web/javascript/reference/errors/precision_range/index.html b/files/fr/web/javascript/reference/errors/precision_range/index.html
deleted file mode 100644
index 52adf5bcd1..0000000000
--- a/files/fr/web/javascript/reference/errors/precision_range/index.html
+++ /dev/null
@@ -1,99 +0,0 @@
----
-title: 'RangeError: precision is out of range'
-slug: Web/JavaScript/Reference/Errors/Precision_range
-tags:
-  - Erreurs
-  - JavaScript
-  - RangeError
-translation_of: Web/JavaScript/Reference/Errors/Precision_range
-original_slug: Web/JavaScript/Reference/Erreurs/Precision_range
----
-<div>{{jsSidebar("Errors")}}</div>
-
-<h2 id="Message">Message</h2>
-
-<pre class="syntaxbox">RangeError: The number of fractional digits is out of range (Edge)
-RangeError: The precision is out of range (Edge)
-RangeError: precision {0} out of range (Firefox)
-RangeError: toExponential() argument must be between 0 and 20 (Chrome)
-RangeError: toFixed() digits argument must be between 0 and 20 (Chrome)
-RangeError: toPrecision() argument must be between 1 and 21 (Chrome)
-</pre>
-
-<h2 id="Type_d'erreur">Type d'erreur</h2>
-
-<p>{{jsxref("RangeError")}}</p>
-
-<h2 id="Quel_est_le_problème">Quel est le problème ?</h2>
-
-<p>Un argument dont la précision est en dehors de l'intervalle valide, prévu par le moteur JavaScript, a été utilisé pour une de ces méthodes :</p>
-
-<ul>
- <li>{{jsxref("Number.prototype.toExponential()")}}</li>
- <li>{{jsxref("Number.prototype.toFixed()")}}</li>
- <li>{{jsxref("Number.prototype.toPrecision()")}}</li>
-</ul>
-
-<p>Généralement, ces méthodes acceptent des arguments de précision compris entre 0 et 20 (voire 21). Cependant, la spécification ECMAScript permet de gérer des valeurs en dehors de cet intervalle.</p>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Méthode</th>
-   <th scope="col">Firefox (SpiderMonkey)</th>
-   <th scope="col">Chrome, Opera (V8)</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{jsxref("Number.prototype.toExponential()")}}</td>
-   <td>0 to 100</td>
-   <td>0 to 20</td>
-  </tr>
-  <tr>
-   <td>{{jsxref("Number.prototype.toFixed()")}}</td>
-   <td>-20 to 100</td>
-   <td>0 to 20</td>
-  </tr>
-  <tr>
-   <td>{{jsxref("Number.prototype.toPrecision()")}}</td>
-   <td>1 to 100</td>
-   <td>1 to 21</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Exemples_invalides">Exemples invalides</h3>
-
-<pre class="brush: js example-bad">77.1234.toExponential(-1);  // RangeError
-77.1234.toExponential(101); // RangeError
-
-2.34.toFixed(-100);         // RangeError
-2.34.toFixed(1001);         // RangeError
-
-1234.5.toPrecision(-1);     // RangeError
-1234.5.toPrecision(101);    // RangeError
-</pre>
-
-<h3 id="Exemples_valides">Exemples valides</h3>
-
-<pre class="brush: js example-good">77.1234.toExponential(4); // 7.7123e+1
-77.1234.toExponential(2); // 7.71e+1
-
-2.34.toFixed(1); // 2.3
-2.35.toFixed(1); // 2.4 (note that it rounds up in this case)
-
-5.123456.toPrecision(5); // 5.1235
-5.123456.toPrecision(2); // 5.1
-5.123456.toPrecision(1); // 5
-</pre>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Number.prototype.toExponential()")}}</li>
- <li>{{jsxref("Number.prototype.toFixed()")}}</li>
- <li>{{jsxref("Number.prototype.toPrecision()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/errors/precision_range/index.md b/files/fr/web/javascript/reference/errors/precision_range/index.md
new file mode 100644
index 0000000000..7b5ee16527
--- /dev/null
+++ b/files/fr/web/javascript/reference/errors/precision_range/index.md
@@ -0,0 +1,75 @@
+---
+title: 'RangeError: precision is out of range'
+slug: Web/JavaScript/Reference/Errors/Precision_range
+tags:
+  - Erreurs
+  - JavaScript
+  - RangeError
+translation_of: Web/JavaScript/Reference/Errors/Precision_range
+original_slug: Web/JavaScript/Reference/Erreurs/Precision_range
+---
+{{jsSidebar("Errors")}}
+
+## Message
+
+    RangeError: The number of fractional digits is out of range (Edge)
+    RangeError: The precision is out of range (Edge)
+    RangeError: precision {0} out of range (Firefox)
+    RangeError: toExponential() argument must be between 0 and 20 (Chrome)
+    RangeError: toFixed() digits argument must be between 0 and 20 (Chrome)
+    RangeError: toPrecision() argument must be between 1 and 21 (Chrome)
+
+## Type d'erreur
+
+{{jsxref("RangeError")}}
+
+## Quel est le problème ?
+
+Un argument dont la précision est en dehors de l'intervalle valide, prévu par le moteur JavaScript, a été utilisé pour une de ces méthodes :
+
+- {{jsxref("Number.prototype.toExponential()")}}
+- {{jsxref("Number.prototype.toFixed()")}}
+- {{jsxref("Number.prototype.toPrecision()")}}
+
+Généralement, ces méthodes acceptent des arguments de précision compris entre 0 et 20 (voire 21). Cependant, la spécification ECMAScript permet de gérer des valeurs en dehors de cet intervalle.
+
+| Méthode                                                      | Firefox (SpiderMonkey) | Chrome, Opera (V8) |
+| ------------------------------------------------------------ | ---------------------- | ------------------ |
+| {{jsxref("Number.prototype.toExponential()")}} | 0 to 100               | 0 to 20            |
+| {{jsxref("Number.prototype.toFixed()")}}         | -20 to 100             | 0 to 20            |
+| {{jsxref("Number.prototype.toPrecision()")}} | 1 to 100               | 1 to 21            |
+
+## Exemples
+
+### Exemples invalides
+
+```js example-bad
+77.1234.toExponential(-1);  // RangeError
+77.1234.toExponential(101); // RangeError
+
+2.34.toFixed(-100);         // RangeError
+2.34.toFixed(1001);         // RangeError
+
+1234.5.toPrecision(-1);     // RangeError
+1234.5.toPrecision(101);    // RangeError
+```
+
+### Exemples valides
+
+```js example-good
+77.1234.toExponential(4); // 7.7123e+1
+77.1234.toExponential(2); // 7.71e+1
+
+2.34.toFixed(1); // 2.3
+2.35.toFixed(1); // 2.4 (note that it rounds up in this case)
+
+5.123456.toPrecision(5); // 5.1235
+5.123456.toPrecision(2); // 5.1
+5.123456.toPrecision(1); // 5
+```
+
+## Voir aussi
+
+- {{jsxref("Number.prototype.toExponential()")}}
+- {{jsxref("Number.prototype.toFixed()")}}
+- {{jsxref("Number.prototype.toPrecision()")}}
diff --git a/files/fr/web/javascript/reference/errors/property_access_denied/index.html b/files/fr/web/javascript/reference/errors/property_access_denied/index.html
deleted file mode 100644
index cb7818d3c3..0000000000
--- a/files/fr/web/javascript/reference/errors/property_access_denied/index.html
+++ /dev/null
@@ -1,48 +0,0 @@
----
-title: 'Error: Permission denied to access property "x"'
-slug: Web/JavaScript/Reference/Errors/Property_access_denied
-tags:
-  - Erreurs
-  - Error
-  - JavaScript
-  - Sécurité
-translation_of: Web/JavaScript/Reference/Errors/Property_access_denied
-original_slug: Web/JavaScript/Reference/Erreurs/Property_access_denied
----
-<div>{{jsSidebar("Errors")}}</div>
-
-<h2 id="Message">Message</h2>
-
-<pre class="syntaxbox">Error: Permission denied to access property "x"
-</pre>
-
-<h2 id="Type_d'erreur">Type d'erreur</h2>
-
-<p>{{jsxref("Error")}}.</p>
-
-<h2 id="Quel_est_le_problème">Quel est le problème ?</h2>
-
-<p><span class="seoSummary">Il y a eu une tentative d'accès non-autorisée à un objet sur lequel vous n'avez pas de permissions. Généralement, cela se produit lorsqu'un élément {{HTMLElement("iframe")}} est chargée depuis un domaine différent et que <a href="/fr/docs/Web/JavaScript/Same_origin_policy_for_JavaScript">la condition de même origine</a> n'est pas respectée.</span></p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<pre class="brush: html">&lt;!DOCTYPE html&gt;
-&lt;html&gt;
-  &lt;head&gt;
-    &lt;iframe id="myframe" src="http://www1.w3c-test.org/common/blank.html"&gt;&lt;/iframe&gt;
-    &lt;script&gt;
-      onload = function() {
-        console.log(frames[0].document);
-        // Error: Permission denied to access property "document"
-      }
-    &lt;/script&gt;
-  &lt;/head&gt;
-  &lt;body&gt;&lt;/body&gt;
-&lt;/html&gt;</pre>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{HTMLElement("iframe")}}</li>
- <li><a href="/fr/docs/Web/JavaScript/Same_origin_policy_for_JavaScript">Condition d'origine (<em>same-origin policy</em>)</a></li>
-</ul>
diff --git a/files/fr/web/javascript/reference/errors/property_access_denied/index.md b/files/fr/web/javascript/reference/errors/property_access_denied/index.md
new file mode 100644
index 0000000000..2e8b3fc24d
--- /dev/null
+++ b/files/fr/web/javascript/reference/errors/property_access_denied/index.md
@@ -0,0 +1,47 @@
+---
+title: 'Error: Permission denied to access property "x"'
+slug: Web/JavaScript/Reference/Errors/Property_access_denied
+tags:
+  - Erreurs
+  - Error
+  - JavaScript
+  - Sécurité
+translation_of: Web/JavaScript/Reference/Errors/Property_access_denied
+original_slug: Web/JavaScript/Reference/Erreurs/Property_access_denied
+---
+{{jsSidebar("Errors")}}
+
+## Message
+
+    Error: Permission denied to access property "x"
+
+## Type d'erreur
+
+{{jsxref("Error")}}.
+
+## Quel est le problème ?
+
+Il y a eu une tentative d'accès non-autorisée à un objet sur lequel vous n'avez pas de permissions. Généralement, cela se produit lorsqu'un élément {{HTMLElement("iframe")}} est chargée depuis un domaine différent et que [la condition de même origine](/fr/docs/Web/JavaScript/Same_origin_policy_for_JavaScript) n'est pas respectée.
+
+## Exemples
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <iframe id="myframe" src="http://www1.w3c-test.org/common/blank.html"></iframe>
+    <script>
+      onload = function() {
+        console.log(frames[0].document);
+        // Error: Permission denied to access property "document"
+      }
+    </script>
+  </head>
+  <body></body>
+</html>
+```
+
+## Voir aussi
+
+- {{HTMLElement("iframe")}}
+- [Condition d'origine (_same-origin policy_)](/fr/docs/Web/JavaScript/Same_origin_policy_for_JavaScript)
diff --git a/files/fr/web/javascript/reference/errors/read-only/index.html b/files/fr/web/javascript/reference/errors/read-only/index.html
deleted file mode 100644
index d46e5a80e7..0000000000
--- a/files/fr/web/javascript/reference/errors/read-only/index.html
+++ /dev/null
@@ -1,81 +0,0 @@
----
-title: 'TypeError: "x" is read-only'
-slug: Web/JavaScript/Reference/Errors/Read-only
-tags:
-  - Erreurs
-  - JavaScript
-  - TypeError
-translation_of: Web/JavaScript/Reference/Errors/Read-only
-original_slug: Web/JavaScript/Reference/Erreurs/Read-only
----
-<div>{{jsSidebar("Errors")}}</div>
-
-<h2 id="Message">Message</h2>
-
-<pre class="syntaxbox">TypeError: Assignment to read-only properties is not allowed in strict mode (Edge)
-TypeError: "x" is read-only (Firefox)
-TypeError: 0 is read-only (Firefox)
-TypeError: Cannot assign to read only property 'x' of #&lt;Object&gt; (Chrome)
-TypeError: Cannot assign to read only property '0' of [object Array] (Chrome)
-</pre>
-
-<h2 id="Type_d'erreur">Type d'erreur</h2>
-
-<p>{{jsxref("TypeError")}}</p>
-
-<h2 id="Quel_est_le_problème">Quel est le problème ?</h2>
-
-<p>La variable globale ou la propriété ne peut pas recevoir de valeur ou être modifiée car elle est en lecture seule (d'un point de vue technique, il s'agit d'<a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object/defineProperty#Attribut_writable">une propriété de donnée en lecture seule</a>).</p>
-
-<p>Cette erreur ne se produit qu'avec <a href="/fr/docs/Web/JavaScript/Reference/Strict_mode">le mode strict</a>. En mode non-strict, l'affectation est ignorée silencieusement.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Exemples_invalides">Exemples invalides</h3>
-
-<p>Les propriétés en lecture seule ne sont pas fréquemment utilisées mais on peut en créer en utilisant les méthodes {{jsxref("Object.defineProperty()")}} ou {{jsxref("Object.freeze()")}}.</p>
-
-<pre class="brush: js example-bad">"use strict";
-var obj = Object.freeze({name: "Elsa", score: 157});
-obj.score = 0;  // TypeError
-
-"use strict";
-Object.defineProperty(this, "NB_POUMONS", {value: 2, writable: false});
-NB_POUMONS = 3;  // TypeError
-
-"use strict";
-var frozenArray = Object.freeze([0, 1, 2]);
-frozenArray[0]++;  // TypeError
-</pre>
-
-<p>Quelques propriétés natives JavaScript sont également en lecture seule. Par exemple, on obtient cette erreur lorsqu'on souhaite redéfinir une constante mathématique.</p>
-
-<pre class="brush: js example-bad">"use strict";
-Math.PI = 4;  // TypeError
-</pre>
-
-<p>La variable globale <code>undefined</code> est également en lecture seule. On ne peut donc pas faire disparaître la fameuse erreur "<em>undefined is not a function</em>" avec ce code :</p>
-
-<pre class="brush: js example-bad">"use strict";
-undefined = function () {};
-// TypeError: "undefined" is read-only
-</pre>
-
-<h3 id="Exemples_valides">Exemples valides</h3>
-
-<pre class="brush: js example-good">"use strict";
-var obj = Object.freeze({name: "Score", points: 157});
-obj = {name: obj.name, points: 0};
-// En changeant d'objet, ça fonctionne
-
-"use strict";
-var NB_POUMONS = 2;  // `var` fonctionne
-NB_POUMONS = 3;  // ok
-</pre>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Object.defineProperty()")}}</li>
- <li>{{jsxref("Object.freeze()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/errors/read-only/index.md b/files/fr/web/javascript/reference/errors/read-only/index.md
new file mode 100644
index 0000000000..e207e6dc2a
--- /dev/null
+++ b/files/fr/web/javascript/reference/errors/read-only/index.md
@@ -0,0 +1,82 @@
+---
+title: 'TypeError: "x" is read-only'
+slug: Web/JavaScript/Reference/Errors/Read-only
+tags:
+  - Erreurs
+  - JavaScript
+  - TypeError
+translation_of: Web/JavaScript/Reference/Errors/Read-only
+original_slug: Web/JavaScript/Reference/Erreurs/Read-only
+---
+{{jsSidebar("Errors")}}
+
+## Message
+
+    TypeError: Assignment to read-only properties is not allowed in strict mode (Edge)
+    TypeError: "x" is read-only (Firefox)
+    TypeError: 0 is read-only (Firefox)
+    TypeError: Cannot assign to read only property 'x' of #<Object> (Chrome)
+    TypeError: Cannot assign to read only property '0' of [object Array] (Chrome)
+
+## Type d'erreur
+
+{{jsxref("TypeError")}}
+
+## Quel est le problème ?
+
+La variable globale ou la propriété ne peut pas recevoir de valeur ou être modifiée car elle est en lecture seule (d'un point de vue technique, il s'agit d'[une propriété de donnée en lecture seule](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object/defineProperty#Attribut_writable)).
+
+Cette erreur ne se produit qu'avec [le mode strict](/fr/docs/Web/JavaScript/Reference/Strict_mode). En mode non-strict, l'affectation est ignorée silencieusement.
+
+## Exemples
+
+### Exemples invalides
+
+Les propriétés en lecture seule ne sont pas fréquemment utilisées mais on peut en créer en utilisant les méthodes {{jsxref("Object.defineProperty()")}} ou {{jsxref("Object.freeze()")}}.
+
+```js example-bad
+"use strict";
+var obj = Object.freeze({name: "Elsa", score: 157});
+obj.score = 0;  // TypeError
+
+"use strict";
+Object.defineProperty(this, "NB_POUMONS", {value: 2, writable: false});
+NB_POUMONS = 3;  // TypeError
+
+"use strict";
+var frozenArray = Object.freeze([0, 1, 2]);
+frozenArray[0]++;  // TypeError
+```
+
+Quelques propriétés natives JavaScript sont également en lecture seule. Par exemple, on obtient cette erreur lorsqu'on souhaite redéfinir une constante mathématique.
+
+```js example-bad
+"use strict";
+Math.PI = 4;  // TypeError
+```
+
+La variable globale `undefined` est également en lecture seule. On ne peut donc pas faire disparaître la fameuse erreur "_undefined is not a function_" avec ce code :
+
+```js example-bad
+"use strict";
+undefined = function () {};
+// TypeError: "undefined" is read-only
+```
+
+### Exemples valides
+
+```js example-good
+"use strict";
+var obj = Object.freeze({name: "Score", points: 157});
+obj = {name: obj.name, points: 0};
+// En changeant d'objet, ça fonctionne
+
+"use strict";
+var NB_POUMONS = 2;  // `var` fonctionne
+NB_POUMONS = 3;  // ok
+```
+
+## Voir aussi
+
+- {{jsxref("Object.defineProperty()")}}
+- {{jsxref("Object.freeze()")}}
diff --git a/files/fr/web/javascript/reference/errors/redeclared_parameter/index.html b/files/fr/web/javascript/reference/errors/redeclared_parameter/index.html
deleted file mode 100644
index 55c0e38653..0000000000
--- a/files/fr/web/javascript/reference/errors/redeclared_parameter/index.html
+++ /dev/null
@@ -1,63 +0,0 @@
----
-title: 'SyntaxError: redeclaration of formal parameter "x"'
-slug: Web/JavaScript/Reference/Errors/Redeclared_parameter
-tags:
-  - Erreurs
-  - JavaScript
-  - SyntaxError
-translation_of: Web/JavaScript/Reference/Errors/Redeclared_parameter
-original_slug: Web/JavaScript/Reference/Erreurs/Redeclared_parameter
----
-<div>{{jsSidebar("Errors")}}</div>
-
-<h2 id="Message">Message</h2>
-
-<pre class="syntaxbox">SyntaxError: Let/Const redeclaration (Edge)
-SyntaxError: redeclaration of formal parameter "x" (Firefox)
-SyntaxError: Identifier "x" has already been declared (Chrome)
-</pre>
-
-<h2 id="Type_d'erreur">Type d'erreur</h2>
-
-<p>{{jsxref("SyntaxError")}}</p>
-
-<h2 id="Quel_est_le_problème">Quel est le problème ?</h2>
-
-<p>Le même nom de variable est présent comme paramètre de la fonction et dans une affectation <code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/let">let</a></code> au sein du corps de cette fonction et il n'est pas possible de redéclarer la même variable dans la même fonction ou dans le même bloc avec <code>let</code>.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<p>Dans le fragment de code qui suit, la variable <code>arg</code> redéclare l'argument passé à la fonction.</p>
-
-<pre class="brush: js example-bad">function f(arg) {
-  let arg = "toto";
-}
-
-// SyntaxError: redeclaration of formal parameter "arg"
-</pre>
-
-<p>Si on souhaite changer la valeur de <code>arg</code> dans le corps de la fonction, c'est possible mais il ne faut pas la redéclarer. Autrement dit, on peut retirer le mot-clé <code>let</code>. Si on souhaite plutôt créer une nouvelle variable, mieux vaudra utiliser un autre nom afin d'éviter les conflits avec les noms des paramètres existants.</p>
-
-<pre class="brush: js example-good">function f(arg) {
-  arg = "toto";
-}
-
-function f(arg) {
-  let truc = "toto";
-}
-</pre>
-
-<h2 id="Notes_de_compatibilité">Notes de compatibilité</h2>
-
-<ul>
- <li>Avant Firefox 49 {{geckoRelease(49)}}, cela provoquait une exception {{jsxref("TypeError")}} ({{bug(1275240)}}).</li>
-</ul>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/let">let</a></code></li>
- <li><code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/const">const</a></code></li>
- <li><code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/var">var</a></code></li>
- <li><a href="/fr/docs/Web/JavaScript/Guide/Types_et_grammaire#Déclarations">Déclarer des variables</a> dans le <a href="/fr/docs/Web/JavaScript/Guide">guide JavaScript</a></li>
-</ul>
diff --git a/files/fr/web/javascript/reference/errors/redeclared_parameter/index.md b/files/fr/web/javascript/reference/errors/redeclared_parameter/index.md
new file mode 100644
index 0000000000..947a60aae8
--- /dev/null
+++ b/files/fr/web/javascript/reference/errors/redeclared_parameter/index.md
@@ -0,0 +1,60 @@
+---
+title: 'SyntaxError: redeclaration of formal parameter "x"'
+slug: Web/JavaScript/Reference/Errors/Redeclared_parameter
+tags:
+  - Erreurs
+  - JavaScript
+  - SyntaxError
+translation_of: Web/JavaScript/Reference/Errors/Redeclared_parameter
+original_slug: Web/JavaScript/Reference/Erreurs/Redeclared_parameter
+---
+{{jsSidebar("Errors")}}
+
+## Message
+
+    SyntaxError: Let/Const redeclaration (Edge)
+    SyntaxError: redeclaration of formal parameter "x" (Firefox)
+    SyntaxError: Identifier "x" has already been declared (Chrome)
+
+## Type d'erreur
+
+{{jsxref("SyntaxError")}}
+
+## Quel est le problème ?
+
+Le même nom de variable est présent comme paramètre de la fonction et dans une affectation [`let`](/fr/docs/Web/JavaScript/Reference/Instructions/let) au sein du corps de cette fonction et il n'est pas possible de redéclarer la même variable dans la même fonction ou dans le même bloc avec `let`.
+
+## Exemples
+
+Dans le fragment de code qui suit, la variable `arg` redéclare l'argument passé à la fonction.
+
+```js example-bad
+function f(arg) {
+  let arg = "toto";
+}
+
+// SyntaxError: redeclaration of formal parameter "arg"
+```
+
+Si on souhaite changer la valeur de `arg` dans le corps de la fonction, c'est possible mais il ne faut pas la redéclarer. Autrement dit, on peut retirer le mot-clé `let`. Si on souhaite plutôt créer une nouvelle variable, mieux vaudra utiliser un autre nom afin d'éviter les conflits avec les noms des paramètres existants.
+
+```js example-good
+function f(arg) {
+  arg = "toto";
+}
+
+function f(arg) {
+  let truc = "toto";
+}
+```
+
+## Notes de compatibilité
+
+- Avant Firefox 49 {{geckoRelease(49)}}, cela provoquait une exception {{jsxref("TypeError")}} ({{bug(1275240)}}).
+
+## Voir aussi
+
+- [`let`](/fr/docs/Web/JavaScript/Reference/Instructions/let)
+- [`const`](/fr/docs/Web/JavaScript/Reference/Instructions/const)
+- [`var`](/fr/docs/Web/JavaScript/Reference/Instructions/var)
+- [Déclarer des variables](/fr/docs/Web/JavaScript/Guide/Types_et_grammaire#Déclarations) dans le [guide JavaScript](/fr/docs/Web/JavaScript/Guide)
diff --git a/files/fr/web/javascript/reference/errors/reduce_of_empty_array_with_no_initial_value/index.html b/files/fr/web/javascript/reference/errors/reduce_of_empty_array_with_no_initial_value/index.html
deleted file mode 100644
index 4afa3f08ed..0000000000
--- a/files/fr/web/javascript/reference/errors/reduce_of_empty_array_with_no_initial_value/index.html
+++ /dev/null
@@ -1,89 +0,0 @@
----
-title: 'TypeError: Reduce of empty array with no initial value'
-slug: Web/JavaScript/Reference/Errors/Reduce_of_empty_array_with_no_initial_value
-tags:
-  - Error
-  - JavaScript
-  - Reference
-  - TypeError
-translation_of: Web/JavaScript/Reference/Errors/Reduce_of_empty_array_with_no_initial_value
-original_slug: Web/JavaScript/Reference/Erreurs/Reduce_of_empty_array_with_no_initial_value
----
-<div>{{jsSidebar("Errors")}}</div>
-
-<h2 id="Message">Message</h2>
-
-<pre class="syntaxbox">TypeError: reduce of empty array with no initial value
-</pre>
-
-<h2 id="Type_d'erreur">Type d'erreur</h2>
-
-<p>{{jsxref("TypeError")}}</p>
-
-<h2 id="Quel_est_le_problème">Quel est le problème ?</h2>
-
-<p>En JavaScript, il existe plusieurs fonctions qui permettent de réduire un tableau :</p>
-
-<ul>
- <li>{{jsxref("Array.prototype.reduce()")}}, {{jsxref("Array.prototype.reduceRight()")}} ainsi que</li>
- <li>{{jsxref("TypedArray.prototype.reduce()")}},  {{jsxref("TypedArray.prototype.reduceRight()")}}).</li>
-</ul>
-
-<p>Ces fonctions utilisent un argument optionnel <code>valeurInitiale</code> (qui sera utilisée comme premier argument pour le premier appel du <code>callback</code>). Toutefois, si aucune valeur initiale explicite est fournie, la méthode utilisera le premier élément de l'objet  {{jsxref("Array")}} / {{jsxref("TypedArray")}} comme valeur initiale. Cette exception est déclenchée lorsqu'on souhaite réduire un tableau vide car aucune valeur initiale n'a été fournie.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Exemples_invalides">Exemples invalides</h3>
-
-<p>Ce problème se produit lorsqu'on combine une méthode de filtrage ({{jsxref("Array.prototype.filter()")}}, {{jsxref("TypedArray.prototype.filter()")}}) qui retire tous les éléments du tableau. Si on applique ensuite une réduction, il n'y aura pas de valeur initiale.</p>
-
-<pre class="brush: js example-bad">var ints = [0, -1, -2, -3, -4, -5];
-ints.filter(x =&gt; x &gt; 0)         // cet appel retire tous les éléments
-    .reduce((x, y) =&gt; x + y)    // aucun ne peut alors être utilisé comme valeur initiale</pre>
-
-<p>Cela peut également se produire si on utilise un sélecteur avec une coquille ou que la liste contient un nombre d'élément inattendu:</p>
-
-<pre class="brush: js example-bad">var names = document.getElementsByClassName("names");
-var name_list = Array.prototype.reduce.call(names, (acc, name) =&gt; acc + ", " + name);
-</pre>
-
-<h3 id="Exemples_valides">Exemples valides</h3>
-
-<p>On peut résoudre ces problèmes de deux façons.</p>
-
-<p>On peut fournir une valeur initiale qui soit l'élément neutre de la réduction (par exemple 0 si on additionne, 1 si on multiplie ou la chaîne vide si on concatène du texte).</p>
-
-<pre class="brush: js example-good">var ints = [0, -1, -2, -3, -4, -5];
-ints.filter(x =&gt; x &gt; 0)         // removes all elements
-    .reduce((x, y) =&gt; x + y, 0) // the initial value is the neutral element of the addition
-</pre>
-
-<p>On peut également gérer le cas où le tableau est vide, avant d'appeler <code>reduce</code> ou dans le <em>callback</em> après avoir ajouté une valeur initiale.</p>
-
-<pre class="brush: js example-good">var names = document.getElementsByClassName("names");
-
-var nameList1 = "";
-if (names1.length &gt;= 1)
-  nameList1 = Array.prototype.reduce.call(names, (acc, name) =&gt; acc + ", " + name);
-// nameList1 == "" lorsque names est vide
-
-var nameList2 = Array.prototype.reduce.call(names, (acc, name) =&gt; {
-  if (acc == "") // la valeur initiale
-    return name;
-  return acc + ", " + name;
-}, "");
-// nameList2 == "" lorsque names est vide
-</pre>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Array.prototype.reduce()")}}</li>
- <li>{{jsxref("Array.prototype.reduceRight()")}}</li>
- <li>{{jsxref("TypedArray.prototype.reduce()")}}</li>
- <li>{{jsxref("TypedArray.prototype.reduceRight()")}}</li>
- <li>{{jsxref("Array")}}</li>
- <li>{{jsxref("TypedArray")}}</li>
- <li>{{jsxref("Array.prototype.filter()")}}</li>
- <li>{{jsxref("TypedArray.prototype.filter()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/errors/reduce_of_empty_array_with_no_initial_value/index.md b/files/fr/web/javascript/reference/errors/reduce_of_empty_array_with_no_initial_value/index.md
new file mode 100644
index 0000000000..aae211ac07
--- /dev/null
+++ b/files/fr/web/javascript/reference/errors/reduce_of_empty_array_with_no_initial_value/index.md
@@ -0,0 +1,89 @@
+---
+title: 'TypeError: Reduce of empty array with no initial value'
+slug: Web/JavaScript/Reference/Errors/Reduce_of_empty_array_with_no_initial_value
+tags:
+  - Error
+  - JavaScript
+  - Reference
+  - TypeError
+translation_of: Web/JavaScript/Reference/Errors/Reduce_of_empty_array_with_no_initial_value
+original_slug: Web/JavaScript/Reference/Erreurs/Reduce_of_empty_array_with_no_initial_value
+---
+{{jsSidebar("Errors")}}
+
+## Message
+
+    TypeError: reduce of empty array with no initial value
+
+## Type d'erreur
+
+{{jsxref("TypeError")}}
+
+## Quel est le problème ?
+
+En JavaScript, il existe plusieurs fonctions qui permettent de réduire un tableau :
+
+- {{jsxref("Array.prototype.reduce()")}}, {{jsxref("Array.prototype.reduceRight()")}} ainsi que
+- {{jsxref("TypedArray.prototype.reduce()")}},  {{jsxref("TypedArray.prototype.reduceRight()")}}).
+
+Ces fonctions utilisent un argument optionnel `valeurInitiale` (qui sera utilisée comme premier argument pour le premier appel du `callback`). Toutefois, si aucune valeur initiale explicite est fournie, la méthode utilisera le premier élément de l'objet  {{jsxref("Array")}} / {{jsxref("TypedArray")}} comme valeur initiale. Cette exception est déclenchée lorsqu'on souhaite réduire un tableau vide car aucune valeur initiale n'a été fournie.
+
+## Exemples
+
+### Exemples invalides
+
+Ce problème se produit lorsqu'on combine une méthode de filtrage ({{jsxref("Array.prototype.filter()")}}, {{jsxref("TypedArray.prototype.filter()")}}) qui retire tous les éléments du tableau. Si on applique ensuite une réduction, il n'y aura pas de valeur initiale.
+
+```js example-bad
+var ints = [0, -1, -2, -3, -4, -5];
+ints.filter(x => x > 0)         // cet appel retire tous les éléments
+    .reduce((x, y) => x + y)    // aucun ne peut alors être utilisé comme valeur initiale
+```
+
+Cela peut également se produire si on utilise un sélecteur avec une coquille ou que la liste contient un nombre d'élément inattendu:
+
+```js example-bad
+var names = document.getElementsByClassName("names");
+var name_list = Array.prototype.reduce.call(names, (acc, name) => acc + ", " + name);
+```
+
+### Exemples valides
+
+On peut résoudre ces problèmes de deux façons.
+
+On peut fournir une valeur initiale qui soit l'élément neutre de la réduction (par exemple 0 si on additionne, 1 si on multiplie ou la chaîne vide si on concatène du texte).
+
+```js example-good
+var ints = [0, -1, -2, -3, -4, -5];
+ints.filter(x => x > 0)         // removes all elements
+    .reduce((x, y) => x + y, 0) // the initial value is the neutral element of the addition
+```
+
+On peut également gérer le cas où le tableau est vide, avant d'appeler `reduce` ou dans le _callback_ après avoir ajouté une valeur initiale.
+
+```js example-good
+var names = document.getElementsByClassName("names");
+
+var nameList1 = "";
+if (names1.length >= 1)
+  nameList1 = Array.prototype.reduce.call(names, (acc, name) => acc + ", " + name);
+// nameList1 == "" lorsque names est vide
+
+var nameList2 = Array.prototype.reduce.call(names, (acc, name) => {
+  if (acc == "") // la valeur initiale
+    return name;
+  return acc + ", " + name;
+}, "");
+// nameList2 == "" lorsque names est vide
+```
+
+## Voir aussi
+
+- {{jsxref("Array.prototype.reduce()")}}
+- {{jsxref("Array.prototype.reduceRight()")}}
+- {{jsxref("TypedArray.prototype.reduce()")}}
+- {{jsxref("TypedArray.prototype.reduceRight()")}}
+- {{jsxref("Array")}}
+- {{jsxref("TypedArray")}}
+- {{jsxref("Array.prototype.filter()")}}
+- {{jsxref("TypedArray.prototype.filter()")}}
diff --git a/files/fr/web/javascript/reference/errors/reserved_identifier/index.html b/files/fr/web/javascript/reference/errors/reserved_identifier/index.html
deleted file mode 100644
index f632ea336e..0000000000
--- a/files/fr/web/javascript/reference/errors/reserved_identifier/index.html
+++ /dev/null
@@ -1,82 +0,0 @@
----
-title: 'SyntaxError: "x" is a reserved identifier'
-slug: Web/JavaScript/Reference/Errors/Reserved_identifier
-tags:
-  - Erreurs
-  - JavaScript
-  - SyntaxError
-translation_of: Web/JavaScript/Reference/Errors/Reserved_identifier
-original_slug: Web/JavaScript/Reference/Erreurs/Reserved_identifier
----
-<div>{{jsSidebar("Errors")}}</div>
-
-<h2 id="Message">Message</h2>
-
-<pre class="syntaxbox">SyntaxError: The use of a future reserved word for an identifier is invalid (Edge)
-SyntaxError: "x" is a reserved identifier (Firefox)
-SyntaxError: Unexpected reserved word (Chrome)</pre>
-
-<h2 id="Type_d'erreur">Type d'erreur</h2>
-
-<p>{{jsxref("SyntaxError")}}</p>
-
-<h2 id="Quel_est_le_problème">Quel est le problème ?</h2>
-
-<p><a href="/fr/docs/Web/JavaScript/Reference/Grammaire_lexicale#Mots-clés_réservés_selon_ECMAScript_2015">Les mots-clés réservés</a> lèveront une exception s'ils sont utilisés en tant qu'identifiants. Voici les mots-clés réservés en mode strict et en mode <em>sloppy</em> :</p>
-
-<ul>
- <li><code>enum</code></li>
-</ul>
-
-<p>Voici les mots-clés uniquement réservés en mode strict :</p>
-
-<ul class="threecolumns">
- <li><code>implements</code></li>
- <li><code>interface</code></li>
- <li>{{jsxref("Statements/let", "let")}}</li>
- <li><code>package</code></li>
- <li><code>private</code></li>
- <li><code>protected</code></li>
- <li><code>public</code></li>
- <li><code>static</code></li>
-</ul>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Mots-clés_réservés_en_modes_strict_et_non-strict">Mots-clés réservés en modes strict et non-strict</h3>
-
-<p>L'identifiant <code>enum</code> est réservé dans les différents cas :</p>
-
-<pre class="brush: js example-bad">var enum = { RED: 0, GREEN: 1, BLUE: 2 };
-// SyntaxError: enum is a reserved identifier
-</pre>
-
-<p>En mode strict, d'autres mots-clés sont réservés :</p>
-
-<pre class="brush: js example-bad">"use strict";
-var package = ["pomme", "poire", "pêches"];
-// SyntaxError: package is a reserved identifier
-</pre>
-
-<p>Pour ne pas avoir l'erreur, il faudra renommer les variables :</p>
-
-<pre class="brush: js example-good">var enumCouleurs = { RED: 0, GREEN: 1, BLUE: 2 };
-var liste = ["pomme", "poire", "pêches"];</pre>
-
-<h3 id="Mettre_à_jour_les_anciens_navigateurs">Mettre à jour les anciens navigateurs</h3>
-
-<p>Si vous utilisez un ancien navigateur qui n'implémente pas <code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/let">let</a></code> ou <code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/class">class</a></code>, vous devrez mettre à jour votre navigateur :</p>
-
-<pre class="brush: js">"use strict";
-class DocArchiver {}
-
-// SyntaxError: class is a reserved identifier
-// (lève une exception dans les anciens navigateurs
-// tels que Firefox 44 et les versions antérieures)
-</pre>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="https://wiki.c2.com/?GoodVariableNames">Utiliser de bons noms de variable</a></li>
-</ul>
diff --git a/files/fr/web/javascript/reference/errors/reserved_identifier/index.md b/files/fr/web/javascript/reference/errors/reserved_identifier/index.md
new file mode 100644
index 0000000000..e911418f06
--- /dev/null
+++ b/files/fr/web/javascript/reference/errors/reserved_identifier/index.md
@@ -0,0 +1,81 @@
+---
+title: 'SyntaxError: "x" is a reserved identifier'
+slug: Web/JavaScript/Reference/Errors/Reserved_identifier
+tags:
+  - Erreurs
+  - JavaScript
+  - SyntaxError
+translation_of: Web/JavaScript/Reference/Errors/Reserved_identifier
+original_slug: Web/JavaScript/Reference/Erreurs/Reserved_identifier
+---
+{{jsSidebar("Errors")}}
+
+## Message
+
+    SyntaxError: The use of a future reserved word for an identifier is invalid (Edge)
+    SyntaxError: "x" is a reserved identifier (Firefox)
+    SyntaxError: Unexpected reserved word (Chrome)
+
+## Type d'erreur
+
+{{jsxref("SyntaxError")}}
+
+## Quel est le problème ?
+
+[Les mots-clés réservés](/fr/docs/Web/JavaScript/Reference/Grammaire_lexicale#Mots-clés_réservés_selon_ECMAScript_2015) lèveront une exception s'ils sont utilisés en tant qu'identifiants. Voici les mots-clés réservés en mode strict et en mode _sloppy_ :
+
+- `enum`
+
+Voici les mots-clés uniquement réservés en mode strict :
+
+- `implements`
+- `interface`
+- {{jsxref("Statements/let", "let")}}
+- `package`
+- `private`
+- `protected`
+- `public`
+- `static`
+
+## Exemples
+
+### Mots-clés réservés en modes strict et non-strict
+
+L'identifiant `enum` est réservé dans les différents cas :
+
+```js example-bad
+var enum = { RED: 0, GREEN: 1, BLUE: 2 };
+// SyntaxError: enum is a reserved identifier
+```
+
+En mode strict, d'autres mots-clés sont réservés :
+
+```js example-bad
+"use strict";
+var package = ["pomme", "poire", "pêches"];
+// SyntaxError: package is a reserved identifier
+```
+
+Pour ne pas avoir l'erreur, il faudra renommer les variables :
+
+```js example-good
+var enumCouleurs = { RED: 0, GREEN: 1, BLUE: 2 };
+var liste = ["pomme", "poire", "pêches"];
+```
+
+### Mettre à jour les anciens navigateurs
+
+Si vous utilisez un ancien navigateur qui n'implémente pas [`let`](/fr/docs/Web/JavaScript/Reference/Instructions/let) ou [`class`](/fr/docs/Web/JavaScript/Reference/Instructions/class), vous devrez mettre à jour votre navigateur :
+
+```js
+"use strict";
+class DocArchiver {}
+
+// SyntaxError: class is a reserved identifier
+// (lève une exception dans les anciens navigateurs
+// tels que Firefox 44 et les versions antérieures)
+```
+
+## Voir aussi
+
+- [Utiliser de bons noms de variable](https://wiki.c2.com/?GoodVariableNames)
diff --git a/files/fr/web/javascript/reference/errors/resulting_string_too_large/index.html b/files/fr/web/javascript/reference/errors/resulting_string_too_large/index.html
deleted file mode 100644
index 78ad63d9f3..0000000000
--- a/files/fr/web/javascript/reference/errors/resulting_string_too_large/index.html
+++ /dev/null
@@ -1,50 +0,0 @@
----
-title: 'RangeError: repeat count must be less than infinity'
-slug: Web/JavaScript/Reference/Errors/Resulting_string_too_large
-tags:
-  - Erreurs
-  - JavaScript
-  - RangeError
-translation_of: Web/JavaScript/Reference/Errors/Resulting_string_too_large
-original_slug: Web/JavaScript/Reference/Erreurs/Resulting_string_too_large
----
-<div>{{jsSidebar("Errors")}}</div>
-
-<h2 id="Message">Message</h2>
-
-<pre class="syntaxbox">RangeError: argument out of range (Edge)
-RangeError: repeat count must be less than infinity and not overflow maximum string size (Firefox)
-RangeError: Invalid count value (Chrome)
-</pre>
-
-<h2 id="Type_d'erreur">Type d'erreur</h2>
-
-<p>{{jsxref("RangeError")}}</p>
-
-<h2 id="Quel_est_le_problème">Quel est le problème ?</h2>
-
-<p>La méthode {{jsxref("String.prototype.repeat()")}}, qui permet de répéter une chaîne de caractères, a été utilisée avec un argument qui n'est pas compris entre 0 et {{jsxref("Infinity")}} (exclue) (ce qui correspond à l'intervalle [0, +∞))</p>
-
-<p>La chaîne de caractères crée par cette méthode ne doit pas dépasser la taille maximale d'une chaîne. Cette taille varie selon le moteur JavaScript. Pour Firefox (SpiderMonkey), la taille maximale d'une chaîne de caractères vaut 2^28-1 (<code>0xFFFFFFF</code>).</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Exemples_invalides">Exemples invalides</h3>
-
-<pre class="brush: js example-bad">'abc'.repeat(Infinity); // RangeError
-'a'.repeat(2**28);      // RangeError
-</pre>
-
-<h3 id="Exemples_valides">Exemples valides</h3>
-
-<pre class="brush: js example-good">'abc'.repeat(0);    // ''
-'abc'.repeat(1);    // 'abc'
-'abc'.repeat(2);    // 'abcabc'
-'abc'.repeat(3.5);  // 'abcabcabc' (count will be converted to integer)
-</pre>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("String.prototype.repeat()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/errors/resulting_string_too_large/index.md b/files/fr/web/javascript/reference/errors/resulting_string_too_large/index.md
new file mode 100644
index 0000000000..1c4eddce51
--- /dev/null
+++ b/files/fr/web/javascript/reference/errors/resulting_string_too_large/index.md
@@ -0,0 +1,49 @@
+---
+title: 'RangeError: repeat count must be less than infinity'
+slug: Web/JavaScript/Reference/Errors/Resulting_string_too_large
+tags:
+  - Erreurs
+  - JavaScript
+  - RangeError
+translation_of: Web/JavaScript/Reference/Errors/Resulting_string_too_large
+original_slug: Web/JavaScript/Reference/Erreurs/Resulting_string_too_large
+---
+{{jsSidebar("Errors")}}
+
+## Message
+
+    RangeError: argument out of range (Edge)
+    RangeError: repeat count must be less than infinity and not overflow maximum string size (Firefox)
+    RangeError: Invalid count value (Chrome)
+
+## Type d'erreur
+
+{{jsxref("RangeError")}}
+
+## Quel est le problème ?
+
+La méthode {{jsxref("String.prototype.repeat()")}}, qui permet de répéter une chaîne de caractères, a été utilisée avec un argument qui n'est pas compris entre 0 et {{jsxref("Infinity")}} (exclue) (ce qui correspond à l'intervalle \[0, +∞))
+
+La chaîne de caractères crée par cette méthode ne doit pas dépasser la taille maximale d'une chaîne. Cette taille varie selon le moteur JavaScript. Pour Firefox (SpiderMonkey), la taille maximale d'une chaîne de caractères vaut 2^28-1 (`0xFFFFFFF`).
+
+## Exemples
+
+### Exemples invalides
+
+```js example-bad
+'abc'.repeat(Infinity); // RangeError
+'a'.repeat(2**28);      // RangeError
+```
+
+### Exemples valides
+
+```js example-good
+'abc'.repeat(0);    // ''
+'abc'.repeat(1);    // 'abc'
+'abc'.repeat(2);    // 'abcabc'
+'abc'.repeat(3.5);  // 'abcabcabc' (count will be converted to integer)
+```
+
+## Voir aussi
+
+- {{jsxref("String.prototype.repeat()")}}
diff --git a/files/fr/web/javascript/reference/errors/stmt_after_return/index.html b/files/fr/web/javascript/reference/errors/stmt_after_return/index.html
deleted file mode 100644
index 4d506a6285..0000000000
--- a/files/fr/web/javascript/reference/errors/stmt_after_return/index.html
+++ /dev/null
@@ -1,80 +0,0 @@
----
-title: 'Warning: unreachable code after return statement'
-slug: Web/JavaScript/Reference/Errors/Stmt_after_return
-tags:
-  - JavaScript
-  - Warning
-translation_of: Web/JavaScript/Reference/Errors/Stmt_after_return
-original_slug: Web/JavaScript/Reference/Erreurs/Stmt_after_return
----
-<div>{{jsSidebar("Errors")}}</div>
-
-<h2 id="Message">Message</h2>
-
-<pre class="syntaxbox">Warning: unreachable code after return statement (Firefox)
-</pre>
-
-<h2 id="Type_derreur">Type d'erreur</h2>
-
-<p>Avertissement</p>
-
-<h2 id="Quel_est_le_problème">Quel est le problème ?</h2>
-
-<p>Ce problème peut avoir deux origines :</p>
-
-<ul>
- <li>Une expression a été utilisée après l'instruction {{jsxref("Instructions/return", "return")}}</li>
- <li>Une instruction <code>return</code> a été utilisée sans point virgule mais une expression suivait cette instruction.</li>
-</ul>
-
-<p>Lorsqu'une expression existe après une instruction <code>return</code> valide, un avertissement est produit pour alerter qu'une portion du code ne peut pas être atteinte et ne sera donc jamais lue et exécutée.</p>
-
-<p>Pourquoi est-il préférable d'ajouter des points-virgules après les instructions <code>return</code> ? Si on utilise une instruction <code>return</code> sans point-virgule, cela peut créer une ambiguïté : est-ce que le développeur souhaite que le code qui suit sur la ligne d'après soit exécuté ou non ? L'avertissement relève cette ambiguïté afin de mieux la percevoir pour la lever.</p>
-
-<p>Les avertissements ne seront pas affichés pour les <code>return</code> sans point-virgule si ces instructions suivent :</p>
-
-<ul>
- <li>{{jsxref("Instructions/throw", "throw")}}</li>
- <li>{{jsxref("Instructions/break", "break")}}</li>
- <li>{{jsxref("Instructions/var", "var")}}</li>
- <li>{{jsxref("Instructions/function", "function")}}</li>
-</ul>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Exemples_invalides">Exemples invalides</h3>
-
-<pre class="brush: js example-bad">function f() {
-  var x = 3;
-  x += 4;
-  return x;   // return permet de finir la fonction sur le champ
-  x -= 3;     // Cette ligne ne sera jamais lue donc exécutée
-}
-
-function f() {
-  return     // Cette instruction est traitée `return;`
-    3 + 4;   // La fonction termine et cette ligne n'est jamais traitée
-}
-</pre>
-
-<h3 id="Exemples_valides">Exemples valides</h3>
-
-<pre class="brush: js example-good">function f() {
-  var x = 3;
-  x += 4;
-  x -= 3;
-  return x;  // OK : return est après
-             // toutes les autres instructions
-}
-
-function f() {
-  return 3 + 4  // OK : un return sans point-virgule
-                // avec une expression sur la même ligne
-}
-</pre>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Instructions/return", "L'ajout automatique de point-virgule", "#Ajout_automatique_de_point-virgule", 1)}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/errors/stmt_after_return/index.md b/files/fr/web/javascript/reference/errors/stmt_after_return/index.md
new file mode 100644
index 0000000000..0105e66e3a
--- /dev/null
+++ b/files/fr/web/javascript/reference/errors/stmt_after_return/index.md
@@ -0,0 +1,75 @@
+---
+title: 'Warning: unreachable code after return statement'
+slug: Web/JavaScript/Reference/Errors/Stmt_after_return
+tags:
+  - JavaScript
+  - Warning
+translation_of: Web/JavaScript/Reference/Errors/Stmt_after_return
+original_slug: Web/JavaScript/Reference/Erreurs/Stmt_after_return
+---
+{{jsSidebar("Errors")}}
+
+## Message
+
+    Warning: unreachable code after return statement (Firefox)
+
+## Type d'erreur
+
+Avertissement
+
+## Quel est le problème ?
+
+Ce problème peut avoir deux origines :
+
+- Une expression a été utilisée après l'instruction {{jsxref("Instructions/return", "return")}}
+- Une instruction `return` a été utilisée sans point virgule mais une expression suivait cette instruction.
+
+Lorsqu'une expression existe après une instruction `return` valide, un avertissement est produit pour alerter qu'une portion du code ne peut pas être atteinte et ne sera donc jamais lue et exécutée.
+
+Pourquoi est-il préférable d'ajouter des points-virgules après les instructions `return` ? Si on utilise une instruction `return` sans point-virgule, cela peut créer une ambiguïté : est-ce que le développeur souhaite que le code qui suit sur la ligne d'après soit exécuté ou non ? L'avertissement relève cette ambiguïté afin de mieux la percevoir pour la lever.
+
+Les avertissements ne seront pas affichés pour les `return` sans point-virgule si ces instructions suivent :
+
+- {{jsxref("Instructions/throw", "throw")}}
+- {{jsxref("Instructions/break", "break")}}
+- {{jsxref("Instructions/var", "var")}}
+- {{jsxref("Instructions/function", "function")}}
+
+## Exemples
+
+### Exemples invalides
+
+```js example-bad
+function f() {
+  var x = 3;
+  x += 4;
+  return x;   // return permet de finir la fonction sur le champ
+  x -= 3;     // Cette ligne ne sera jamais lue donc exécutée
+}
+
+function f() {
+  return     // Cette instruction est traitée `return;`
+    3 + 4;   // La fonction termine et cette ligne n'est jamais traitée
+}
+```
+
+### Exemples valides
+
+```js example-good
+function f() {
+  var x = 3;
+  x += 4;
+  x -= 3;
+  return x;  // OK : return est après
+             // toutes les autres instructions
+}
+
+function f() {
+  return 3 + 4  // OK : un return sans point-virgule
+                // avec une expression sur la même ligne
+}
+```
+
+## Voir aussi
+
+- {{jsxref("Instructions/return", "L'ajout automatique de point-virgule", "#Ajout_automatique_de_point-virgule", 1)}}
diff --git a/files/fr/web/javascript/reference/errors/strict_non_simple_params/index.html b/files/fr/web/javascript/reference/errors/strict_non_simple_params/index.html
deleted file mode 100644
index 26abbf3a40..0000000000
--- a/files/fr/web/javascript/reference/errors/strict_non_simple_params/index.html
+++ /dev/null
@@ -1,116 +0,0 @@
----
-title: 'SyntaxError: "use strict" not allowed in function with "x" parameter'
-slug: Web/JavaScript/Reference/Errors/Strict_Non_Simple_Params
-tags:
-  - Erreurs
-  - JavaScript
-  - Reference
-  - TypeError
-translation_of: Web/JavaScript/Reference/Errors/Strict_Non_Simple_Params
-original_slug: Web/JavaScript/Reference/Erreurs/Strict_Non_Simple_Params
----
-<div>{{jsSidebar("Errors")}}</div>
-
-<h2 id="Message">Message</h2>
-
-<pre class="syntaxbox">Edge:
-Cannot apply strict mode on functions with non-simple parameter list
-
-Firefox:
-SyntaxError: "use strict" not allowed in function with default parameter
-SyntaxError: "use strict" not allowed in function with rest parameter
-SyntaxError: "use strict" not allowed in function with destructuring parameter
-
-Chrome:
-SyntaxError: Illegal 'use strict' directive in function with non-simple parameter list
-</pre>
-
-<h2 id="Type_d'erreur">Type d'erreur</h2>
-
-<p>{{jsxref("SyntaxError")}}.</p>
-
-<h2 id="Quel_est_le_problème">Quel est le problème ?</h2>
-
-<p>Une directive <code>"use strict"</code> apparaît au début d'une fonction qui possède l'un des paramètres suivants :</p>
-
-<ul>
- <li>{{jsxref("Fonctions/Valeurs_par_défaut_des_arguments", "Des paramètres par défaut", "", 1)}}</li>
- <li>{{jsxref("Fonctions/paramètres_du_reste", "Des paramètres du reste", "", 1)}}</li>
- <li>{{jsxref("Opérateurs/Affecter_par_décomposition", "Des paramètres décomposés", "", 1)}}</li>
-</ul>
-
-<p>Selon la spécification ECMAScript, une directive <code>"use strict"</code> ne peut pas être utilisée pour de telles fonctions.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Déclaration_de_fonction">Déclaration de fonction</h3>
-
-<p>Dans l'exemple qui suit, la fonction <code>somme</code> possède deux paramètres par défaut <code>a=1</code> et <code>b=2</code>.</p>
-
-<pre class="brush: js example-bad">function somme(a = 1, b = 2) {
-  // SyntaxError: "use strict" not allowed in function with default parameter
-  "use strict";
-  return a + b;
-}
-</pre>
-
-<p>Si on veut que la fonction soit en mode strict et que le script entier ou que la fonction englobante peut être en mode strict, il suffira de déplacer l'instruction <code>"use strict"</code> en dehors du corps de la méthode.</p>
-
-<pre class="brush: js example-good">"use strict";
-function somme(a = 1, b = 2) {
-  return a + b;
-}
-</pre>
-
-<h3 id="Expression_de_fonction">Expression de fonction</h3>
-
-<p>Il est également possible d'utiliser les expressions de fonction pour résoudre ce problème :</p>
-
-<pre class="brush: js example-bad">var somme = function somme([a, b]) {
-  // SyntaxError: "use strict" not allowed in function with destructuring parameter
-  "use strict";
-  return a + b;
-};
-</pre>
-
-<p>On peut convertir le fragment de code précédent avec l'expression suivante :</p>
-
-<pre class="brush: js example-good">var somme = (function() {
-  "use strict";
-  return function somme([a, b]) {
-    return a + b;
-  };
-})();
-</pre>
-
-<h3 id="Fonction_fléchée">Fonction fléchée</h3>
-
-<p>Si on a une fonction fléchée qui doit accéder à la variable <code>this</code> on peut utiliser une fonction fléchée comme fonction englobante :</p>
-
-<pre class="brush: js example-bad">var callback = (...args) =&gt; {
-  // SyntaxError: "use strict" not allowed in function with rest parameter
-  "use strict";
-  return this.run(args);
-};
-</pre>
-
-<p>This can be converted into following expression.</p>
-
-<pre class="brush: js example-good">var callback = (() =&gt; {
-  "use strict";
-  return (...args) =&gt; {
-    return this.run(args);
-  };
-})();
-</pre>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Strict_mode", "Le mode strict", "", 1)}}</li>
- <li>{{jsxref("Instructions/function", "L'instruction function", "", 1)}}</li>
- <li>{{jsxref("Op%C3%A9rateurs/L_op%C3%A9rateur_function", "Les expressions de fonction", "", 1)}}</li>
- <li>{{jsxref("Fonctions/Valeurs_par_d%C3%A9faut_des_arguments", "Les paramètres par défaut", "", 1)}}</li>
- <li>{{jsxref("Fonctions/paramètres_du_reste", "Les paramètres du reste", "", 1)}}</li>
- <li>{{jsxref("Opérateurs/Affecter_par_décomposition", "Les paramètres décomposés", "", 1)}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/errors/strict_non_simple_params/index.md b/files/fr/web/javascript/reference/errors/strict_non_simple_params/index.md
new file mode 100644
index 0000000000..22d30809a4
--- /dev/null
+++ b/files/fr/web/javascript/reference/errors/strict_non_simple_params/index.md
@@ -0,0 +1,117 @@
+---
+title: 'SyntaxError: "use strict" not allowed in function with "x" parameter'
+slug: Web/JavaScript/Reference/Errors/Strict_Non_Simple_Params
+tags:
+  - Erreurs
+  - JavaScript
+  - Reference
+  - TypeError
+translation_of: Web/JavaScript/Reference/Errors/Strict_Non_Simple_Params
+original_slug: Web/JavaScript/Reference/Erreurs/Strict_Non_Simple_Params
+---
+{{jsSidebar("Errors")}}
+
+## Message
+
+    Edge:
+    Cannot apply strict mode on functions with non-simple parameter list
+
+    Firefox:
+    SyntaxError: "use strict" not allowed in function with default parameter
+    SyntaxError: "use strict" not allowed in function with rest parameter
+    SyntaxError: "use strict" not allowed in function with destructuring parameter
+
+    Chrome:
+    SyntaxError: Illegal 'use strict' directive in function with non-simple parameter list
+
+## Type d'erreur
+
+{{jsxref("SyntaxError")}}.
+
+## Quel est le problème ?
+
+Une directive `"use strict"` apparaît au début d'une fonction qui possède l'un des paramètres suivants :
+
+- {{jsxref("Fonctions/Valeurs_par_défaut_des_arguments", "Des paramètres par défaut", "", 1)}}
+- {{jsxref("Fonctions/paramètres_du_reste", "Des paramètres du reste", "", 1)}}
+- {{jsxref("Opérateurs/Affecter_par_décomposition", "Des paramètres décomposés", "", 1)}}
+
+Selon la spécification ECMAScript, une directive `"use strict"` ne peut pas être utilisée pour de telles fonctions.
+
+## Exemples
+
+### Déclaration de fonction
+
+Dans l'exemple qui suit, la fonction `somme` possède deux paramètres par défaut `a=1` et `b=2`.
+
+```js example-bad
+function somme(a = 1, b = 2) {
+  // SyntaxError: "use strict" not allowed in function with default parameter
+  "use strict";
+  return a + b;
+}
+```
+
+Si on veut que la fonction soit en mode strict et que le script entier ou que la fonction englobante peut être en mode strict, il suffira de déplacer l'instruction `"use strict"` en dehors du corps de la méthode.
+
+```js example-good
+"use strict";
+function somme(a = 1, b = 2) {
+  return a + b;
+}
+```
+
+### Expression de fonction
+
+Il est également possible d'utiliser les expressions de fonction pour résoudre ce problème :
+
+```js example-bad
+var somme = function somme([a, b]) {
+  // SyntaxError: "use strict" not allowed in function with destructuring parameter
+  "use strict";
+  return a + b;
+};
+```
+
+On peut convertir le fragment de code précédent avec l'expression suivante :
+
+```js example-good
+var somme = (function() {
+  "use strict";
+  return function somme([a, b]) {
+    return a + b;
+  };
+})();
+```
+
+### Fonction fléchée
+
+Si on a une fonction fléchée qui doit accéder à la variable `this` on peut utiliser une fonction fléchée comme fonction englobante :
+
+```js example-bad
+var callback = (...args) => {
+  // SyntaxError: "use strict" not allowed in function with rest parameter
+  "use strict";
+  return this.run(args);
+};
+```
+
+This can be converted into following expression.
+
+```js example-good
+var callback = (() => {
+  "use strict";
+  return (...args) => {
+    return this.run(args);
+  };
+})();
+```
+
+## Voir aussi
+
+- {{jsxref("Strict_mode", "Le mode strict", "", 1)}}
+- {{jsxref("Instructions/function", "L'instruction function", "", 1)}}
+- {{jsxref("Op%C3%A9rateurs/L_op%C3%A9rateur_function", "Les expressions de fonction", "", 1)}}
+- {{jsxref("Fonctions/Valeurs_par_d%C3%A9faut_des_arguments", "Les paramètres par défaut", "", 1)}}
+- {{jsxref("Fonctions/paramètres_du_reste", "Les paramètres du reste", "", 1)}}
+- {{jsxref("Opérateurs/Affecter_par_décomposition", "Les paramètres décomposés", "", 1)}}
diff --git a/files/fr/web/javascript/reference/errors/too_much_recursion/index.html b/files/fr/web/javascript/reference/errors/too_much_recursion/index.html
deleted file mode 100644
index 097eff25b7..0000000000
--- a/files/fr/web/javascript/reference/errors/too_much_recursion/index.html
+++ /dev/null
@@ -1,70 +0,0 @@
----
-title: 'InternalError: too much recursion'
-slug: Web/JavaScript/Reference/Errors/Too_much_recursion
-tags:
-  - Erreurs
-  - InternalError
-  - JavaScript
-  - Reference
-translation_of: Web/JavaScript/Reference/Errors/Too_much_recursion
-original_slug: Web/JavaScript/Reference/Erreurs/Too_much_recursion
----
-<div>{{jsSidebar("Errors")}}</div>
-
-<h2 id="Message">Message</h2>
-
-<pre class="syntaxbox">Error: Out of stack space (Edge)
-InternalError: too much recursion (Firefox)
-RangeError: Maximum call stack size exceeded (Chrome)
-</pre>
-
-<h2 id="Type_d'erreur">Type d'erreur</h2>
-
-<p>{{jsxref("InternalError")}}.</p>
-
-<h2 id="Quel_est_le_problème">Quel est le problème ?</h2>
-
-<p>Une fonction qui s'appelle elle-même est une fonction <em>recursive</em>. Lorsqu'une certaine condition est respectée, la fonction arrête de s'appeler elle-même, c'est ce qu'on appelle le cas initial.</p>
-
-<p>D'une certaine façon, une récursion est semblable à une boucle. Les deux exécutent le même code plusieurs fois, et les deux ont besoin d'une condition d'arrêt afin d'éviter une boucle infinie ou une récursion infinie. Lorsqu'il y a trop de niveaux de récursion ou une récursion infinie, JavaScript lèvera cette erreur.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<p>Cette fonction récursive est exécutée 10 fois comme l'indique la condition de sortie :</p>
-
-<pre class="brush: js">function loop(x) {
-  if (x &gt;= 10) // "x &gt;= 10" is the exit condition
-    return;
-  // do stuff
-  loop(x + 1); // the recursive call
-}
-loop(0);</pre>
-
-<p>Si la condition d'arrêt est beaucoup trop grande, cela ne fonctionnera pas :</p>
-
-<pre class="brush: js example-bad">function loop(x) {
-  if (x &gt;= 1000000000000)
-    return;
-  // do stuff
-  loop(x + 1);
-}
-loop(0);
-
-// InternalError: too much recursion</pre>
-
-<p>Si la fonction récursive ne possède pas de cas initial, il n'y aura pas de condition de sortie et la fonction continuera de s'appeler indéfiniment.</p>
-
-<pre class="brush: js example-bad">function boucle(x) {
-  boucle(x + 1);
-  // il n'y a pas de cas initial
-}
-
-boucle(0);
-</pre>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{Glossary("Récursion")}}</li>
- <li><a href="/fr/docs/Web/JavaScript/Guide/Fonctions#La_récursivité">Les fonctions récursives</a></li>
-</ul>
diff --git a/files/fr/web/javascript/reference/errors/too_much_recursion/index.md b/files/fr/web/javascript/reference/errors/too_much_recursion/index.md
new file mode 100644
index 0000000000..62e269f74a
--- /dev/null
+++ b/files/fr/web/javascript/reference/errors/too_much_recursion/index.md
@@ -0,0 +1,72 @@
+---
+title: 'InternalError: too much recursion'
+slug: Web/JavaScript/Reference/Errors/Too_much_recursion
+tags:
+  - Erreurs
+  - InternalError
+  - JavaScript
+  - Reference
+translation_of: Web/JavaScript/Reference/Errors/Too_much_recursion
+original_slug: Web/JavaScript/Reference/Erreurs/Too_much_recursion
+---
+{{jsSidebar("Errors")}}
+
+## Message
+
+    Error: Out of stack space (Edge)
+    InternalError: too much recursion (Firefox)
+    RangeError: Maximum call stack size exceeded (Chrome)
+
+## Type d'erreur
+
+{{jsxref("InternalError")}}.
+
+## Quel est le problème ?
+
+Une fonction qui s'appelle elle-même est une fonction _recursive_. Lorsqu'une certaine condition est respectée, la fonction arrête de s'appeler elle-même, c'est ce qu'on appelle le cas initial.
+
+D'une certaine façon, une récursion est semblable à une boucle. Les deux exécutent le même code plusieurs fois, et les deux ont besoin d'une condition d'arrêt afin d'éviter une boucle infinie ou une récursion infinie. Lorsqu'il y a trop de niveaux de récursion ou une récursion infinie, JavaScript lèvera cette erreur.
+
+## Exemples
+
+Cette fonction récursive est exécutée 10 fois comme l'indique la condition de sortie :
+
+```js
+function loop(x) {
+  if (x >= 10) // "x >= 10" is the exit condition
+    return;
+  // do stuff
+  loop(x + 1); // the recursive call
+}
+loop(0);
+```
+
+Si la condition d'arrêt est beaucoup trop grande, cela ne fonctionnera pas :
+
+```js example-bad
+function loop(x) {
+  if (x >= 1000000000000)
+    return;
+  // do stuff
+  loop(x + 1);
+}
+loop(0);
+
+// InternalError: too much recursion
+```
+
+Si la fonction récursive ne possède pas de cas initial, il n'y aura pas de condition de sortie et la fonction continuera de s'appeler indéfiniment.
+
+```js example-bad
+function boucle(x) {
+  boucle(x + 1);
+  // il n'y a pas de cas initial
+}
+
+boucle(0);
+```
+
+## Voir aussi
+
+- {{Glossary("Récursion")}}
+- [Les fonctions récursives](/fr/docs/Web/JavaScript/Guide/Fonctions#La_récursivité)
diff --git a/files/fr/web/javascript/reference/errors/undeclared_var/index.html b/files/fr/web/javascript/reference/errors/undeclared_var/index.html
deleted file mode 100644
index 26293dc271..0000000000
--- a/files/fr/web/javascript/reference/errors/undeclared_var/index.html
+++ /dev/null
@@ -1,67 +0,0 @@
----
-title: 'ReferenceError: assignment to undeclared variable "x"'
-slug: Web/JavaScript/Reference/Errors/Undeclared_var
-tags:
-  - Erreurs
-  - JavaScript
-  - ReferenceError
-translation_of: Web/JavaScript/Reference/Errors/Undeclared_var
-original_slug: Web/JavaScript/Reference/Erreurs/Undeclared_var
----
-<div>{{jsSidebar("Errors")}}</div>
-
-<h2 id="Message">Message</h2>
-
-<pre class="syntaxbox">ReferenceError: assignment to undeclared variable "x" (Firefox)
-ReferenceError: "x" is not defined (Chrome)
-ReferenceError: Variable undefined in strict mode (Edge)
-</pre>
-
-<h2 id="Type_d'erreur">Type d'erreur</h2>
-
-<p>Une erreur {{jsxref("ReferenceError")}}, uniquement <a href="/fr/docs/Web/JavaScript/Reference/Strict_mode">en mode strict</a>.</p>
-
-<h2 id="Quel_est_le_problème">Quel est le problème ?</h2>
-
-<p>Une valeur a été affectée à une variable non-déclarée. Autrement dit, il y a eu une affectation qui n'utilise pas le mot-clé <code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/var">var</a></code>. Il existe certaines différences entre les variables déclarées et les variables non déclarées ce qui peut entraîner des résultats étranges. C'est pour cette raison que le moteur affiche une erreur en mode strict.</p>
-
-<p>Trois choses à noter lorsqu'on évoque les variables déclarées/non déclarées :</p>
-
-<ul>
- <li>Les variables déclarées sont contraintes dans le contexte d'exécution dans lequel elles sont déclarées. Les variables non déclarées sont toujours globales.</li>
- <li>Les variables déclarées sont créées avant que le code soit exécuté. Les variables non déclarées n'existent pas tant que le code qui leur est affecté est exécuté.</li>
- <li>Les variables déclarées sont des propriétés non-configurables de leur contexte d'exécution (la fonction ou l'espace global). Les variables non-déclarées sont configurables (elles peuvent être supprimées).</li>
-</ul>
-
-<p>Pour plus de détails et d'exemple, se référer à la page sur <code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/var">var</a></code>.</p>
-
-<p>Les erreurs à propos des affectations sur les variables non déclarées se produisent uniquement <a href="/fr/docs/Web/JavaScript/Reference/Strict_mode">en mode strict</a>. En mode non-strict, elles sont ignorées silencieusement.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Exemples_invalides">Exemples invalides</h3>
-
-<p>Ici, la variable <code>truc</code> n'est pas déclarée :</p>
-
-<pre class="brush: js example-bad">function toto() {
-  "use strict";
-  truc = true;
-}
-toto(); // ReferenceError: assignment to undeclared variable truc
-</pre>
-
-<h3 id="Exemples_valides">Exemples valides</h3>
-
-<p>Afin de déclarer <code>truc</code>, on peut ajouter le mot-clé <code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/var">var</a></code> devant.</p>
-
-<pre class="brush: js example-good">function toto() {
-  "use strict";
-  var truc = true;
-}
-toto();</pre>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/JavaScript/Reference/Strict_mode">Le mode strict</a></li>
-</ul>
diff --git a/files/fr/web/javascript/reference/errors/undeclared_var/index.md b/files/fr/web/javascript/reference/errors/undeclared_var/index.md
new file mode 100644
index 0000000000..8344607e21
--- /dev/null
+++ b/files/fr/web/javascript/reference/errors/undeclared_var/index.md
@@ -0,0 +1,65 @@
+---
+title: 'ReferenceError: assignment to undeclared variable "x"'
+slug: Web/JavaScript/Reference/Errors/Undeclared_var
+tags:
+  - Erreurs
+  - JavaScript
+  - ReferenceError
+translation_of: Web/JavaScript/Reference/Errors/Undeclared_var
+original_slug: Web/JavaScript/Reference/Erreurs/Undeclared_var
+---
+{{jsSidebar("Errors")}}
+
+## Message
+
+    ReferenceError: assignment to undeclared variable "x" (Firefox)
+    ReferenceError: "x" is not defined (Chrome)
+    ReferenceError: Variable undefined in strict mode (Edge)
+
+## Type d'erreur
+
+Une erreur {{jsxref("ReferenceError")}}, uniquement [en mode strict](/fr/docs/Web/JavaScript/Reference/Strict_mode).
+
+## Quel est le problème ?
+
+Une valeur a été affectée à une variable non-déclarée. Autrement dit, il y a eu une affectation qui n'utilise pas le mot-clé [`var`](/fr/docs/Web/JavaScript/Reference/Instructions/var). Il existe certaines différences entre les variables déclarées et les variables non déclarées ce qui peut entraîner des résultats étranges. C'est pour cette raison que le moteur affiche une erreur en mode strict.
+
+Trois choses à noter lorsqu'on évoque les variables déclarées/non déclarées :
+
+- Les variables déclarées sont contraintes dans le contexte d'exécution dans lequel elles sont déclarées. Les variables non déclarées sont toujours globales.
+- Les variables déclarées sont créées avant que le code soit exécuté. Les variables non déclarées n'existent pas tant que le code qui leur est affecté est exécuté.
+- Les variables déclarées sont des propriétés non-configurables de leur contexte d'exécution (la fonction ou l'espace global). Les variables non-déclarées sont configurables (elles peuvent être supprimées).
+
+Pour plus de détails et d'exemple, se référer à la page sur [`var`](/fr/docs/Web/JavaScript/Reference/Instructions/var).
+
+Les erreurs à propos des affectations sur les variables non déclarées se produisent uniquement [en mode strict](/fr/docs/Web/JavaScript/Reference/Strict_mode). En mode non-strict, elles sont ignorées silencieusement.
+
+## Exemples
+
+### Exemples invalides
+
+Ici, la variable `truc` n'est pas déclarée :
+
+```js example-bad
+function toto() {
+  "use strict";
+  truc = true;
+}
+toto(); // ReferenceError: assignment to undeclared variable truc
+```
+
+### Exemples valides
+
+Afin de déclarer `truc`, on peut ajouter le mot-clé [`var`](/fr/docs/Web/JavaScript/Reference/Instructions/var) devant.
+
+```js example-good
+function toto() {
+  "use strict";
+  var truc = true;
+}
+toto();
+```
+
+## Voir aussi
+
+- [Le mode strict](/fr/docs/Web/JavaScript/Reference/Strict_mode)
diff --git a/files/fr/web/javascript/reference/errors/undefined_prop/index.html b/files/fr/web/javascript/reference/errors/undefined_prop/index.html
deleted file mode 100644
index b3b000d302..0000000000
--- a/files/fr/web/javascript/reference/errors/undefined_prop/index.html
+++ /dev/null
@@ -1,58 +0,0 @@
----
-title: 'ReferenceError: reference to undefined property "x"'
-slug: Web/JavaScript/Reference/Errors/Undefined_prop
-tags:
-  - Erreurs
-  - JavaScript
-  - Reference
-  - ReferenceError
-translation_of: Web/JavaScript/Reference/Errors/Undefined_prop
-original_slug: Web/JavaScript/Reference/Erreurs/Undefined_prop
----
-<div>{{jsSidebar("Errors")}}</div>
-
-<h2 id="Message">Message</h2>
-
-<pre class="syntaxbox">ReferenceError: reference to undefined property "x" (Firefox)
-</pre>
-
-<h2 id="Type_d'erreur">Type d'erreur</h2>
-
-<p>Uniquement pour Firefox. Une erreur {{jsxref("ReferenceError")}} lancée en avertissement, uniquement si la préférence <code>javascript.options.strict</code> vaut <code>true</code>.</p>
-
-<h2 id="Quel_est_le_problème">Quel est le problème ?</h2>
-
-<p>Le code tente d'accéder à une propriété inexistante d'un objet. Il existe deux méthodes pour accéder aux propriétés. Pour plus de détails, on pourra lire la page de la référence sur <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_de_membres">les accesseurs de propriété</a>.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Exemples_invalides">Exemples invalides</h3>
-
-<p>Ici, la propriété <code>truc</code> n'est pas une propriété définie et on obtient alors une <code>ReferenceError</code>.</p>
-
-<pre class="brush: js example-bad">"use strict";
-
-var toto = {};
-toto.truc; // ReferenceError: reference to undefined property "bar"
-</pre>
-
-<h3 id="Exemples_valides">Exemples valides</h3>
-
-<p>Pour éviter cette erreur, il faut que <code>truc</code> soit une variable  « définie » ou vérifier son existence avant de l'utiliser (en utilisant par exemple la méthode {{jsxref("Object.prototype.hasOwnProperty()")}}).</p>
-
-<pre class="brush: js example-good">"use strict";
-
-var toto = {};
-
-toto.truc = "lune";
-console.log(toto.truc); // "lune"
-
-if (foo.hasOwnProperty("truc")) {
-  console.log(toto.truc);
-}</pre>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Opérateurs/Opérateurs_de_membres", "Accesseurs de propriété", 0, 1)}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/errors/undefined_prop/index.md b/files/fr/web/javascript/reference/errors/undefined_prop/index.md
new file mode 100644
index 0000000000..3577d40eb6
--- /dev/null
+++ b/files/fr/web/javascript/reference/errors/undefined_prop/index.md
@@ -0,0 +1,58 @@
+---
+title: 'ReferenceError: reference to undefined property "x"'
+slug: Web/JavaScript/Reference/Errors/Undefined_prop
+tags:
+  - Erreurs
+  - JavaScript
+  - Reference
+  - ReferenceError
+translation_of: Web/JavaScript/Reference/Errors/Undefined_prop
+original_slug: Web/JavaScript/Reference/Erreurs/Undefined_prop
+---
+{{jsSidebar("Errors")}}
+
+## Message
+
+    ReferenceError: reference to undefined property "x" (Firefox)
+
+## Type d'erreur
+
+Uniquement pour Firefox. Une erreur {{jsxref("ReferenceError")}} lancée en avertissement, uniquement si la préférence `javascript.options.strict` vaut `true`.
+
+## Quel est le problème ?
+
+Le code tente d'accéder à une propriété inexistante d'un objet. Il existe deux méthodes pour accéder aux propriétés. Pour plus de détails, on pourra lire la page de la référence sur [les accesseurs de propriété](/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_de_membres).
+
+## Exemples
+
+### Exemples invalides
+
+Ici, la propriété `truc` n'est pas une propriété définie et on obtient alors une `ReferenceError`.
+
+```js example-bad
+"use strict";
+
+var toto = {};
+toto.truc; // ReferenceError: reference to undefined property "bar"
+```
+
+### Exemples valides
+
+Pour éviter cette erreur, il faut que `truc` soit une variable  « définie » ou vérifier son existence avant de l'utiliser (en utilisant par exemple la méthode {{jsxref("Object.prototype.hasOwnProperty()")}}).
+
+```js example-good
+"use strict";
+
+var toto = {};
+
+toto.truc = "lune";
+console.log(toto.truc); // "lune"
+
+if (foo.hasOwnProperty("truc")) {
+  console.log(toto.truc);
+}
+```
+
+## Voir aussi
+
+- {{jsxref("Opérateurs/Opérateurs_de_membres", "Accesseurs de propriété", 0, 1)}}
diff --git a/files/fr/web/javascript/reference/errors/unexpected_token/index.html b/files/fr/web/javascript/reference/errors/unexpected_token/index.html
deleted file mode 100644
index 771455c514..0000000000
--- a/files/fr/web/javascript/reference/errors/unexpected_token/index.html
+++ /dev/null
@@ -1,78 +0,0 @@
----
-title: 'SyntaxError: Unexpected token'
-slug: Web/JavaScript/Reference/Errors/Unexpected_token
-tags:
-  - Erreurs
-  - JavaScript
-  - Reference
-  - SyntaxError
-translation_of: Web/JavaScript/Reference/Errors/Unexpected_token
-original_slug: Web/JavaScript/Reference/Erreurs/Unexpected_token
----
-<div>{{jsSidebar("Errors")}}</div>
-
-<h2 id="Message">Message</h2>
-
-<pre class="syntaxbox">SyntaxError: expected expression, got "x"
-SyntaxError: expected property name, got "x"
-SyntaxError: expected target, got "x"
-SyntaxError: expected rest argument name, got "x"
-SyntaxError: expected closing parenthesis, got "x"
-SyntaxError: expected '=&gt;' after argument list, got "x"
-</pre>
-
-<h2 id="Type_d'erreur">Type d'erreur</h2>
-
-<p>{{jsxref("SyntaxError")}}</p>
-
-<h2 id="Quel_est_le_problème">Quel est le problème ?</h2>
-
-<p>La syntaxe du langage « attendait » un élément mais quelque chose d'autre est écrit à la place dans le script. Cela peut simplement être dû à une coquille dans le code.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Expression_attendue">Expression attendue</h3>
-
-<p>Lorsqu'on enchaîne des expressions, par exemple, les virgules ne sont pas autorisées en fin d'expression :</p>
-
-<pre class="brush: js example-bad">for (let i = 0; i &lt; 5,; ++i) {
-  console.log(i);
-}
-// SyntaxError: expected expression, got ')'
-</pre>
-
-<p>Pour corriger cette erreur, on peut retirer la virgule superflue ou bien ajouter une autre expression :</p>
-
-<pre class="brush: js example-good">for (let i = 0; i &lt; 5; ++i) {
-  console.log(i);
-}
-</pre>
-
-<h3 id="Parenthèses_manquantes">Parenthèses manquantes</h3>
-
-<p>Il peut également arriver que des parenthèses manquent autour des instructions <code>if</code> :</p>
-
-<pre class="brush: js example-bad">function round(n, upperBound, lowerBound){
-  if(n &gt; upperBound) || (n &lt; lowerBound){
-    throw 'Number ' + String(n) + ' is more than ' + String(upperBound) + ' or less than ' + String(lowerBound);
-  }else if(n &lt; ((upperBound + lowerBound)/2)){
-    return lowerBound;
-  }else{
-    return upperBound;
-  }
-} // SyntaxError: expected expression, got '||'</pre>
-
-<p>Si on compte les parenthèses ouvrantes et fermantes, c'est correct mais on peut voir que le OU logique (<code>||</code>) n'est contenu au sein d'aucune paire de parenthèses.</p>
-
-<p>Pour corriger ce problème, il suffit d'ajouter une paire de parenthèses englobante :</p>
-
-<pre class="brush: js example-good">function round(n, upperBound, lowerBound){
-  if((n &gt; upperBound) || (n &lt; lowerBound)){
-    throw 'Number ' + String(n) + ' is more than ' + String(upperBound) + ' or less than ' + String(lowerBound);
-  }else if(n &lt; ((upperBound + lowerBound)/2)){
-    return lowerBound;
-  }else{
-    return upperBound;
-  }
-}
-</pre>
diff --git a/files/fr/web/javascript/reference/errors/unexpected_token/index.md b/files/fr/web/javascript/reference/errors/unexpected_token/index.md
new file mode 100644
index 0000000000..f2a9fb865a
--- /dev/null
+++ b/files/fr/web/javascript/reference/errors/unexpected_token/index.md
@@ -0,0 +1,82 @@
+---
+title: 'SyntaxError: Unexpected token'
+slug: Web/JavaScript/Reference/Errors/Unexpected_token
+tags:
+  - Erreurs
+  - JavaScript
+  - Reference
+  - SyntaxError
+translation_of: Web/JavaScript/Reference/Errors/Unexpected_token
+original_slug: Web/JavaScript/Reference/Erreurs/Unexpected_token
+---
+{{jsSidebar("Errors")}}
+
+## Message
+
+    SyntaxError: expected expression, got "x"
+    SyntaxError: expected property name, got "x"
+    SyntaxError: expected target, got "x"
+    SyntaxError: expected rest argument name, got "x"
+    SyntaxError: expected closing parenthesis, got "x"
+    SyntaxError: expected '=>' after argument list, got "x"
+
+## Type d'erreur
+
+{{jsxref("SyntaxError")}}
+
+## Quel est le problème ?
+
+La syntaxe du langage « attendait » un élément mais quelque chose d'autre est écrit à la place dans le script. Cela peut simplement être dû à une coquille dans le code.
+
+## Exemples
+
+### Expression attendue
+
+Lorsqu'on enchaîne des expressions, par exemple, les virgules ne sont pas autorisées en fin d'expression :
+
+```js example-bad
+for (let i = 0; i < 5,; ++i) {
+  console.log(i);
+}
+// SyntaxError: expected expression, got ')'
+```
+
+Pour corriger cette erreur, on peut retirer la virgule superflue ou bien ajouter une autre expression :
+
+```js example-good
+for (let i = 0; i < 5; ++i) {
+  console.log(i);
+}
+```
+
+### Parenthèses manquantes
+
+Il peut également arriver que des parenthèses manquent autour des instructions `if` :
+
+```js example-bad
+function round(n, upperBound, lowerBound){
+  if(n > upperBound) || (n < lowerBound){
+    throw 'Number ' + String(n) + ' is more than ' + String(upperBound) + ' or less than ' + String(lowerBound);
+  }else if(n < ((upperBound + lowerBound)/2)){
+    return lowerBound;
+  }else{
+    return upperBound;
+  }
+} // SyntaxError: expected expression, got '||'
+```
+
+Si on compte les parenthèses ouvrantes et fermantes, c'est correct mais on peut voir que le OU logique (`||`) n'est contenu au sein d'aucune paire de parenthèses.
+
+Pour corriger ce problème, il suffit d'ajouter une paire de parenthèses englobante :
+
+```js example-good
+function round(n, upperBound, lowerBound){
+  if((n > upperBound) || (n < lowerBound)){
+    throw 'Number ' + String(n) + ' is more than ' + String(upperBound) + ' or less than ' + String(lowerBound);
+  }else if(n < ((upperBound + lowerBound)/2)){
+    return lowerBound;
+  }else{
+    return upperBound;
+  }
+}
+```
diff --git a/files/fr/web/javascript/reference/errors/unexpected_type/index.html b/files/fr/web/javascript/reference/errors/unexpected_type/index.html
deleted file mode 100644
index 6b54febd7b..0000000000
--- a/files/fr/web/javascript/reference/errors/unexpected_type/index.html
+++ /dev/null
@@ -1,74 +0,0 @@
----
-title: 'TypeError: "x" is (not) "y"'
-slug: Web/JavaScript/Reference/Errors/Unexpected_type
-tags:
-  - Erreurs
-  - JavaScript
-  - Reference
-  - TypeError
-translation_of: Web/JavaScript/Reference/Errors/Unexpected_type
-original_slug: Web/JavaScript/Reference/Erreurs/Unexpected_type
----
-<div>{{jsSidebar("Errors")}}</div>
-
-<h2 id="Message">Message</h2>
-
-<pre class="syntaxbox">TypeError: Unable to get property {x} of undefined or null reference (Edge)
-TypeError: "x" is (not) "y" (Firefox)
-
-Examples:
-TypeError: "x" is undefined
-TypeError: "x" is null
-TypeError: "undefined" is not an object
-TypeError: "x" is not an object or null
-TypeError: "x" is not a symbol
-</pre>
-
-<h2 id="Type_d'erreur">Type d'erreur</h2>
-
-<p>{{jsxref("TypeError")}}.</p>
-
-<h2 id="Quel_est_le_problème">Quel est le problème ?</h2>
-
-<p>Un type inattendu a été rencontré. Cela se produit la plupart du temps avec les valeurs {{jsxref("undefined")}} ou {{jsxref("null")}}.</p>
-
-<p>Certaines méthodes comme {{jsxref("Object.create()")}} ou {{jsxref("Symbol.keyFor()")}} ont des contraintes sur le type de valeur qui peut être passé en argument.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Exemples_invalides">Exemples invalides</h3>
-
-<pre class="brush: js example-bad">// undefined et null : des valeurs
-// sur lesquelles la méthode substring
-// ne fonctionnera pas
-var toto = undefined;
-toto.substring(1); // TypeError: toto is undefined
-
-var toto = null;
-toto.substring(1); // TypeError: toto is null
-
-
-// Certaines méthodes nécessitent une valeur
-// d'un type spécifique
-var toto = {}
-Symbol.keyFor(toto); // TypeError: toto is not a symbol
-
-var toto = "truc"
-Object.create(toto); // TypeError: "toto" is not an object or null
-</pre>
-
-<h3 id="Résoudre_le_problème">Résoudre le problème</h3>
-
-<p>Pour résoudre ce problème et écarter les cas où la valeur vaut <code>undefined</code>, on peut par exemple utiliser l'opérateur <code><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_typeof">typeof</a></code>.</p>
-
-<pre class="brush: js">if (typeof toto !== 'undefined') {
-  // Désormais, on sait que toto est bien
-  // défini et on peut poursuivre.
-}</pre>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("undefined")}}</li>
- <li>{{jsxref("null")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/errors/unexpected_type/index.md b/files/fr/web/javascript/reference/errors/unexpected_type/index.md
new file mode 100644
index 0000000000..31477ea2b2
--- /dev/null
+++ b/files/fr/web/javascript/reference/errors/unexpected_type/index.md
@@ -0,0 +1,74 @@
+---
+title: 'TypeError: "x" is (not) "y"'
+slug: Web/JavaScript/Reference/Errors/Unexpected_type
+tags:
+  - Erreurs
+  - JavaScript
+  - Reference
+  - TypeError
+translation_of: Web/JavaScript/Reference/Errors/Unexpected_type
+original_slug: Web/JavaScript/Reference/Erreurs/Unexpected_type
+---
+{{jsSidebar("Errors")}}
+
+## Message
+
+    TypeError: Unable to get property {x} of undefined or null reference (Edge)
+    TypeError: "x" is (not) "y" (Firefox)
+
+    Examples:
+    TypeError: "x" is undefined
+    TypeError: "x" is null
+    TypeError: "undefined" is not an object
+    TypeError: "x" is not an object or null
+    TypeError: "x" is not a symbol
+
+## Type d'erreur
+
+{{jsxref("TypeError")}}.
+
+## Quel est le problème ?
+
+Un type inattendu a été rencontré. Cela se produit la plupart du temps avec les valeurs {{jsxref("undefined")}} ou {{jsxref("null")}}.
+
+Certaines méthodes comme {{jsxref("Object.create()")}} ou {{jsxref("Symbol.keyFor()")}} ont des contraintes sur le type de valeur qui peut être passé en argument.
+
+## Exemples
+
+### Exemples invalides
+
+```js example-bad
+// undefined et null : des valeurs
+// sur lesquelles la méthode substring
+// ne fonctionnera pas
+var toto = undefined;
+toto.substring(1); // TypeError: toto is undefined
+
+var toto = null;
+toto.substring(1); // TypeError: toto is null
+
+
+// Certaines méthodes nécessitent une valeur
+// d'un type spécifique
+var toto = {}
+Symbol.keyFor(toto); // TypeError: toto is not a symbol
+
+var toto = "truc"
+Object.create(toto); // TypeError: "toto" is not an object or null
+```
+
+### Résoudre le problème
+
+Pour résoudre ce problème et écarter les cas où la valeur vaut `undefined`, on peut par exemple utiliser l'opérateur [`typeof`](/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_typeof).
+
+```js
+if (typeof toto !== 'undefined') {
+  // Désormais, on sait que toto est bien
+  // défini et on peut poursuivre.
+}
+```
+
+## Voir aussi
+
+- {{jsxref("undefined")}}
+- {{jsxref("null")}}
diff --git a/files/fr/web/javascript/reference/errors/unnamed_function_statement/index.html b/files/fr/web/javascript/reference/errors/unnamed_function_statement/index.html
deleted file mode 100644
index 286bd78e7e..0000000000
--- a/files/fr/web/javascript/reference/errors/unnamed_function_statement/index.html
+++ /dev/null
@@ -1,116 +0,0 @@
----
-title: 'SyntaxError: function statement requires a name'
-slug: Web/JavaScript/Reference/Errors/Unnamed_function_statement
-tags:
-  - Erreurs
-  - JavaScript
-  - SyntaxError
-translation_of: Web/JavaScript/Reference/Errors/Unnamed_function_statement
-original_slug: Web/JavaScript/Reference/Erreurs/Unnamed_function_statement
----
-<div>{{jsSidebar("Errors")}}</div>
-
-<h2 id="Message">Message</h2>
-
-<pre class="syntaxbox">Syntax Error: Expected identifier (Edge)
-SyntaxError: function statement requires a name [Firefox]
-SyntaxError: Unexpected token ( [Chrome]
-</pre>
-
-<h2 id="Type_d'erreur">Type d'erreur</h2>
-
-<p>{{jsxref("SyntaxError")}}</p>
-
-<h2 id="Quel_est_le_problème">Quel est le problème ?</h2>
-
-<p><a href="/fr/docs/Web/JavaScript/Reference/Instructions/function">Une déclaration de fonction</a> présente dans le code requiert un nom. Il faut alors vérifier la façon dont la fonction est définie et s'il est nécessaire de lui fournir un nom ou si la fonction en question est une expression de fonction, une fonction immédiatement invoquée ou si le code de la fonction est simplement bien placé dans son contexte.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Déclaration_Expression">Déclaration / Expression</h3>
-
-<p>Une déclaration de fonction requiert un nom. Le fragment de code suivant ne fonctionnera pas :</p>
-
-<pre class="brush: js example-bad">function () {
-  return 'Coucou monde :)';
-}
-// SyntaxError: function statement requires a name
-</pre>
-
-<p>On peut utiliser <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_function">une expression de fonction</a> à la place :</p>
-
-<pre class="brush: js example-good">var salutations = function() {
-  return 'Coucou monde :)';
-};</pre>
-
-<p>Si la fonction devait être appelé immédiatement, il suffit d'ajouter des parenthèses autour :</p>
-
-<pre class="brush: js example-good">(function () {
-
-})();</pre>
-
-<h3 id="Fonctions_étiquetées">Fonctions étiquetées</h3>
-
-<p>Si vous utilisez des <a href="/fr/docs/Web/JavaScript/Reference/Instructions/label">fonctions étiquetées</a>, il faut toujours fournir un nom après le mot-clé <code>function</code>. Le code suivant ne fonctionnera pas :</p>
-
-<pre class="brush: js example-bad">function Greeter() {
-  german: function () {
-    return "Moin";
-  }
-}
-// SyntaxError: function statement requires a name
-</pre>
-
-<p>En revanche, ceci fonctionnera :</p>
-
-<pre class="brush: js example-good">function Greeter() {
-  german: function g() {
-    return "Moin";
-  }
-}</pre>
-
-<h3 id="Méthodes_d'un_objet">Méthodes d'un objet</h3>
-
-<p>Si vous souhaitez construire une méthode d'un objet, il faudra d'abord créer l'objet. Dans ce cas, la syntaxe sans le nom après le mot-clé <code>function</code> sera valide :</p>
-
-<pre class="brush: js example-good">var greeter = {
-  german: function () {
-    return "Moin";
-  }
-};</pre>
-
-<h3 id="Syntaxe_et_fonctions_de_rappel_(callbacks)">Syntaxe et fonctions de rappel (<em>callbacks</em>)</h3>
-
-<p>Lorsqu'on utilise les <em>callbacks</em>, il est facile de s'emmêler les pinceaux entre les parenthèses et les virgules :</p>
-
-<pre class="brush: js example-bad">promise.then(
-  function() {
-    console.log("success");
-  });
-  function() {
-    console.log("error");
-}
-// SyntaxError: function statement requires a name
-</pre>
-
-<p>La forme correcte serait :</p>
-
-<pre class="brush: json example-good">promise.then(
-  function() {
-    console.log("success");
-  },
-  function() {
-    console.log("error");
-  }
-);
-</pre>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/JavaScript/Guide/Fonctions">Les fonctions dans le guide JavaScript</a></li>
- <li><a href="/fr/docs/Web/JavaScript/Reference/Instructions/function">Les déclarations de fonction</a></li>
- <li><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_function">Les expressions de fonction</a></li>
- <li><a href="https://en.wikipedia.org/wiki/Immediately-invoked_function_expression">Les fonctions immédiatement invoquées (ou <em>IIFE</em> en anglais)</a></li>
- <li><code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/label">label</a></code></li>
-</ul>
diff --git a/files/fr/web/javascript/reference/errors/unnamed_function_statement/index.md b/files/fr/web/javascript/reference/errors/unnamed_function_statement/index.md
new file mode 100644
index 0000000000..42417c4f4d
--- /dev/null
+++ b/files/fr/web/javascript/reference/errors/unnamed_function_statement/index.md
@@ -0,0 +1,125 @@
+---
+title: 'SyntaxError: function statement requires a name'
+slug: Web/JavaScript/Reference/Errors/Unnamed_function_statement
+tags:
+  - Erreurs
+  - JavaScript
+  - SyntaxError
+translation_of: Web/JavaScript/Reference/Errors/Unnamed_function_statement
+original_slug: Web/JavaScript/Reference/Erreurs/Unnamed_function_statement
+---
+{{jsSidebar("Errors")}}
+
+## Message
+
+    Syntax Error: Expected identifier (Edge)
+    SyntaxError: function statement requires a name [Firefox]
+    SyntaxError: Unexpected token ( [Chrome]
+
+## Type d'erreur
+
+{{jsxref("SyntaxError")}}
+
+## Quel est le problème ?
+
+[Une déclaration de fonction](/fr/docs/Web/JavaScript/Reference/Instructions/function) présente dans le code requiert un nom. Il faut alors vérifier la façon dont la fonction est définie et s'il est nécessaire de lui fournir un nom ou si la fonction en question est une expression de fonction, une fonction immédiatement invoquée ou si le code de la fonction est simplement bien placé dans son contexte.
+
+## Exemples
+
+### Déclaration / Expression
+
+Une déclaration de fonction requiert un nom. Le fragment de code suivant ne fonctionnera pas :
+
+```js example-bad
+function () {
+  return 'Coucou monde :)';
+}
+// SyntaxError: function statement requires a name
+```
+
+On peut utiliser [une expression de fonction](/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_function) à la place :
+
+```js example-good
+var salutations = function() {
+  return 'Coucou monde :)';
+};
+```
+
+Si la fonction devait être appelé immédiatement, il suffit d'ajouter des parenthèses autour :
+
+```js example-good
+(function () {
+
+})();
+```
+
+### Fonctions étiquetées
+
+Si vous utilisez des [fonctions étiquetées](/fr/docs/Web/JavaScript/Reference/Instructions/label), il faut toujours fournir un nom après le mot-clé `function`. Le code suivant ne fonctionnera pas :
+
+```js example-bad
+function Greeter() {
+  german: function () {
+    return "Moin";
+  }
+}
+// SyntaxError: function statement requires a name
+```
+
+En revanche, ceci fonctionnera :
+
+```js example-good
+function Greeter() {
+  german: function g() {
+    return "Moin";
+  }
+}
+```
+
+### Méthodes d'un objet
+
+Si vous souhaitez construire une méthode d'un objet, il faudra d'abord créer l'objet. Dans ce cas, la syntaxe sans le nom après le mot-clé `function` sera valide :
+
+```js example-good
+var greeter = {
+  german: function () {
+    return "Moin";
+  }
+};
+```
+
+### Syntaxe et fonctions de rappel (_callbacks_)
+
+Lorsqu'on utilise les _callbacks_, il est facile de s'emmêler les pinceaux entre les parenthèses et les virgules :
+
+```js example-bad
+promise.then(
+  function() {
+    console.log("success");
+  });
+  function() {
+    console.log("error");
+}
+// SyntaxError: function statement requires a name
+```
+
+La forme correcte serait :
+
+```json example-good
+promise.then(
+  function() {
+    console.log("success");
+  },
+  function() {
+    console.log("error");
+  }
+);
+```
+
+## Voir aussi
+
+- [Les fonctions dans le guide JavaScript](/fr/docs/Web/JavaScript/Guide/Fonctions)
+- [Les déclarations de fonction](/fr/docs/Web/JavaScript/Reference/Instructions/function)
+- [Les expressions de fonction](/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_function)
+- [Les fonctions immédiatement invoquées (ou _IIFE_ en anglais)](https://en.wikipedia.org/wiki/Immediately-invoked_function_expression)
+- [`label`](/fr/docs/Web/JavaScript/Reference/Instructions/label)
diff --git a/files/fr/web/javascript/reference/errors/unterminated_string_literal/index.html b/files/fr/web/javascript/reference/errors/unterminated_string_literal/index.html
deleted file mode 100644
index f6ad8afa09..0000000000
--- a/files/fr/web/javascript/reference/errors/unterminated_string_literal/index.html
+++ /dev/null
@@ -1,78 +0,0 @@
----
-title: 'SyntaxError: unterminated string literal'
-slug: Web/JavaScript/Reference/Errors/Unterminated_string_literal
-tags:
-  - Erreurs
-  - JavaScript
-  - Reference
-  - SyntaxError
-translation_of: Web/JavaScript/Reference/Errors/Unterminated_string_literal
-original_slug: Web/JavaScript/Reference/Erreurs/Unterminated_string_literal
----
-<div>{{jsSidebar("Errors")}}</div>
-
-<h2 id="Message">Message</h2>
-
-<pre class="syntaxbox">SyntaxError: Unterminated string constant (Edge)
-SyntaxError: unterminated string literal (Firefox)
-</pre>
-
-<h2 id="Type_d'erreur">Type d'erreur</h2>
-
-<p>{{jsxref("SyntaxError")}}</p>
-
-<h2 id="Quel_est_le_problème">Quel est le problème ?</h2>
-
-<p>Une chaîne de caractères ({{jsxref("String")}}) n'est pas bien délimitée quelque part. Les littéraux de chaînes de caractères doivent être délimités par des simples quotes (') ou par des doubles quotes ("). <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String#Échappement_des_caractères">Les séquences d'échappement</a> permet de représenter dans ces chaînes de caractères. Pour réparer cette erreur :</p>
-
-<ul>
- <li>Vérifiez que la chaîne est bien délimitée au début et à la fin par des doubles quotes ou par des simples quotes,</li>
- <li>Vérifiez que les caractères spéciaux de la chaîne ont bien été échappés,</li>
- <li>Vérifiez que le littéral est bien découpé pour gérer plusieurs lignes (si c'est le cas).</li>
-</ul>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Gérer_plusieurs_lignes">Gérer plusieurs lignes</h3>
-
-<p>En JavaScript, on ne peut pas écrire une chaîne simple sur plusieurs lignes comme ceci :</p>
-
-<pre class="brush: js example-bad">var longString = "This is a very long string which needs
-                  to wrap across multiple lines because
-                  otherwise my code is unreadable.";
-// SyntaxError: unterminated string literal</pre>
-
-<p>Pour écrire une chaîne sur plusieurs lignes, on pourra utiliser :</p>
-
-<ul>
- <li><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_arithmétiques#Addition_()">L'opérateur +</a>,</li>
- <li>Une barre oblique inversée ("\")</li>
- <li><a href="/fr/docs/Web/JavaScript/Reference/Littéraux_gabarits">Des littéraux de gabarits</a></li>
-</ul>
-
-<p>Voici la première variante avec l'opérateur de concaténation :</p>
-
-<pre class="brush: js example-good">var longString = "This is a very long string which needs " +
-                 "to wrap across multiple lines because " +
-                 "otherwise my code is unreadable.";
-</pre>
-
-<p>Sinon, on peut utiliser une barre oblique inversée à la fin de chaque ligne pour indiquer qu'elle continue sur la ligne suivante. Attention, il faudra qu'il n'y ait aucun espace ou autre caractère après la barre oblique (il peut bien entendu y avoir un saut de ligne) :</p>
-
-<pre class="brush: js example-good">var longString = "This is a very long string which needs \
-to wrap across multiple lines because \
-otherwise my code is unreadable.";
-</pre>
-
-<p>On pourra également utiliser <a href="/fr/docs/Web/JavaScript/Reference/Littéraux_gabarits">les littéraux de gabarits</a> qui sont pris en charge par les environnement ECMAScript 2015 :</p>
-
-<pre class="brush: js example-good">var longString = `This is a very long string which needs
-                  to wrap across multiple lines because
-                  otherwise my code is unreadable.`;</pre>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("String")}}</li>
- <li><a href="/fr/docs/Web/JavaScript/Reference/Littéraux_gabarits">Les littéraux de gabarits</a></li>
-</ul>
diff --git a/files/fr/web/javascript/reference/errors/unterminated_string_literal/index.md b/files/fr/web/javascript/reference/errors/unterminated_string_literal/index.md
new file mode 100644
index 0000000000..5797276cdb
--- /dev/null
+++ b/files/fr/web/javascript/reference/errors/unterminated_string_literal/index.md
@@ -0,0 +1,77 @@
+---
+title: 'SyntaxError: unterminated string literal'
+slug: Web/JavaScript/Reference/Errors/Unterminated_string_literal
+tags:
+  - Erreurs
+  - JavaScript
+  - Reference
+  - SyntaxError
+translation_of: Web/JavaScript/Reference/Errors/Unterminated_string_literal
+original_slug: Web/JavaScript/Reference/Erreurs/Unterminated_string_literal
+---
+{{jsSidebar("Errors")}}
+
+## Message
+
+    SyntaxError: Unterminated string constant (Edge)
+    SyntaxError: unterminated string literal (Firefox)
+
+## Type d'erreur
+
+{{jsxref("SyntaxError")}}
+
+## Quel est le problème ?
+
+Une chaîne de caractères ({{jsxref("String")}}) n'est pas bien délimitée quelque part. Les littéraux de chaînes de caractères doivent être délimités par des simples quotes (') ou par des doubles quotes ("). [Les séquences d'échappement](/fr/docs/Web/JavaScript/Reference/Objets_globaux/String#Échappement_des_caractères) permet de représenter dans ces chaînes de caractères. Pour réparer cette erreur :
+
+- Vérifiez que la chaîne est bien délimitée au début et à la fin par des doubles quotes ou par des simples quotes,
+- Vérifiez que les caractères spéciaux de la chaîne ont bien été échappés,
+- Vérifiez que le littéral est bien découpé pour gérer plusieurs lignes (si c'est le cas).
+
+## Exemples
+
+### Gérer plusieurs lignes
+
+En JavaScript, on ne peut pas écrire une chaîne simple sur plusieurs lignes comme ceci :
+
+```js example-bad
+var longString = "This is a very long string which needs
+                  to wrap across multiple lines because
+                  otherwise my code is unreadable.";
+// SyntaxError: unterminated string literal
+```
+
+Pour écrire une chaîne sur plusieurs lignes, on pourra utiliser :
+
+- [L'opérateur +](</fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_arithmétiques#Addition_()>),
+- Une barre oblique inversée ("\\")
+- [Des littéraux de gabarits](/fr/docs/Web/JavaScript/Reference/Littéraux_gabarits)
+
+Voici la première variante avec l'opérateur de concaténation :
+
+```js example-good
+var longString = "This is a very long string which needs " +
+                 "to wrap across multiple lines because " +
+                 "otherwise my code is unreadable.";
+```
+
+Sinon, on peut utiliser une barre oblique inversée à la fin de chaque ligne pour indiquer qu'elle continue sur la ligne suivante. Attention, il faudra qu'il n'y ait aucun espace ou autre caractère après la barre oblique (il peut bien entendu y avoir un saut de ligne) :
+
+```js example-good
+var longString = "This is a very long string which needs \
+to wrap across multiple lines because \
+otherwise my code is unreadable.";
+```
+
+On pourra également utiliser [les littéraux de gabarits](/fr/docs/Web/JavaScript/Reference/Littéraux_gabarits) qui sont pris en charge par les environnement ECMAScript 2015 :
+
+```js example-good
+var longString = `This is a very long string which needs
+                  to wrap across multiple lines because
+                  otherwise my code is unreadable.`;
+```
+
+## Voir aussi
+
+- {{jsxref("String")}}
+- [Les littéraux de gabarits](/fr/docs/Web/JavaScript/Reference/Littéraux_gabarits)
diff --git a/files/fr/web/javascript/reference/errors/var_hides_argument/index.html b/files/fr/web/javascript/reference/errors/var_hides_argument/index.html
deleted file mode 100644
index dda8687316..0000000000
--- a/files/fr/web/javascript/reference/errors/var_hides_argument/index.html
+++ /dev/null
@@ -1,56 +0,0 @@
----
-title: 'TypeError: variable "x" redeclares argument'
-slug: Web/JavaScript/Reference/Errors/Var_hides_argument
-tags:
-  - Erreurs
-  - JavaScript
-  - TypeError
-translation_of: Web/JavaScript/Reference/Errors/Var_hides_argument
-original_slug: Web/JavaScript/Reference/Erreurs/Var_hides_argument
----
-<div>{{jsSidebar("Errors")}}</div>
-
-<h2 id="Message">Message</h2>
-
-<pre class="syntaxbox">TypeError: variable "x" redeclares argument (Firefox)
-</pre>
-
-<h2 id="Type_d'erreur">Type d'erreur</h2>
-
-<p>Une erreur {{jsxref("TypeError")}}, uniquement <a href="/fr/docs/Web/JavaScript/Reference/Strict_mode">en mode strict</a>.</p>
-
-<h2 id="Quel_est_le_problème">Quel est le problème ?</h2>
-
-<p>Le même nom de variable est utilisé comme nom pour un paramètre et comme nom de variable via une affectation <code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/var">var</a></code>. Cela peut être lié à un conflit de nommage et le moteur envoie un avertissement.</p>
-
-<p>Cette erreur ne se produit qu'en mode strict. Pour du code non-strict, la redéclaration est ignorée silencieusement..</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Exemples_invalides">Exemples invalides</h3>
-
-<p>Ici, la variable <code>arg</code> redéclare l'argument de la fonction :</p>
-
-<pre class="brush: js example-bad">"use strict";
-
-function f(arg) {
-  var arg = "foo";
-}
-</pre>
-
-<h3 id="Exemples_valides">Exemples valides</h3>
-
-<p>Pour résoudre ce problème, on pourra généralement retirer l'instruction <code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/var">var</a></code> car la variable existe déjà et peut être utilisée. Si on ne veut pas utiliser cette même variable, mieux vaudra renommer le paramètre ou la variable interne afin de lever l'ambiguïté.</p>
-
-<pre class="brush: js example-good">"use strict";
-
-function f(arg) {
-  arg = "foo";
-}
-</pre>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/JavaScript/Reference/Strict_mode">Le mode strict</a></li>
-</ul>
diff --git a/files/fr/web/javascript/reference/errors/var_hides_argument/index.md b/files/fr/web/javascript/reference/errors/var_hides_argument/index.md
new file mode 100644
index 0000000000..8e98669ddf
--- /dev/null
+++ b/files/fr/web/javascript/reference/errors/var_hides_argument/index.md
@@ -0,0 +1,55 @@
+---
+title: 'TypeError: variable "x" redeclares argument'
+slug: Web/JavaScript/Reference/Errors/Var_hides_argument
+tags:
+  - Erreurs
+  - JavaScript
+  - TypeError
+translation_of: Web/JavaScript/Reference/Errors/Var_hides_argument
+original_slug: Web/JavaScript/Reference/Erreurs/Var_hides_argument
+---
+{{jsSidebar("Errors")}}
+
+## Message
+
+    TypeError: variable "x" redeclares argument (Firefox)
+
+## Type d'erreur
+
+Une erreur {{jsxref("TypeError")}}, uniquement [en mode strict](/fr/docs/Web/JavaScript/Reference/Strict_mode).
+
+## Quel est le problème ?
+
+Le même nom de variable est utilisé comme nom pour un paramètre et comme nom de variable via une affectation [`var`](/fr/docs/Web/JavaScript/Reference/Instructions/var). Cela peut être lié à un conflit de nommage et le moteur envoie un avertissement.
+
+Cette erreur ne se produit qu'en mode strict. Pour du code non-strict, la redéclaration est ignorée silencieusement..
+
+## Exemples
+
+### Exemples invalides
+
+Ici, la variable `arg` redéclare l'argument de la fonction :
+
+```js example-bad
+"use strict";
+
+function f(arg) {
+  var arg = "foo";
+}
+```
+
+### Exemples valides
+
+Pour résoudre ce problème, on pourra généralement retirer l'instruction [`var`](/fr/docs/Web/JavaScript/Reference/Instructions/var) car la variable existe déjà et peut être utilisée. Si on ne veut pas utiliser cette même variable, mieux vaudra renommer le paramètre ou la variable interne afin de lever l'ambiguïté.
+
+```js example-good
+"use strict";
+
+function f(arg) {
+  arg = "foo";
+}
+```
+
+## Voir aussi
+
+- [Le mode strict](/fr/docs/Web/JavaScript/Reference/Strict_mode)
diff --git a/files/fr/web/javascript/reference/functions/arguments/@@iterator/index.html b/files/fr/web/javascript/reference/functions/arguments/@@iterator/index.html
deleted file mode 100644
index 406eb7bcdc..0000000000
--- a/files/fr/web/javascript/reference/functions/arguments/@@iterator/index.html
+++ /dev/null
@@ -1,78 +0,0 @@
----
-title: arguments[@@iterator]()
-slug: Web/JavaScript/Reference/Functions/arguments/@@iterator
-tags:
-  - Déprécié
-  - Fonctions
-  - JavaScript
-  - Propriété
-  - Reference
-  - arguments
-translation_of: Web/JavaScript/Reference/Functions/arguments/@@iterator
-original_slug: Web/JavaScript/Reference/Fonctions/arguments/@@iterator
----
-<div>{{jsSidebar("Functions")}}</div>
-
-<p>La valeur initiale de la propriété <code><strong>@@iterator</strong></code> est le même objet que la fonction utilisée pour la valeur initiale de la propriété {{jsxref("Array.prototype.values")}}.</p>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>arguments</var>[Symbol.iterator]()</pre>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Utiliser_une_boucle_for...of">Utiliser une boucle <code>for...of</code></h3>
-
-<pre class="brush: js">function f() {
-  // votre environnement doit supporter les
-  // boucles for..of et les variables
-  // définies avec let dans les boucles
-  for (let letter of arguments) {
-    console.log(letter);
-  }
-}
-f('w', 'y', 'k', 'o', 'p');
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-createunmappedargumentsobject', ' CreateUnmappedArgumentsObject')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-createmappedargumentsobject', ' CreateMappedArgumentsObject')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-createunmappedargumentsobject', 'CreateUnmappedArgumentsObject')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-createmappedargumentsobject', 'CreateMappedArgumentsObject')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-
-<p>{{Compat("javascript.functions.arguments.@@iterator")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Array.prototype.values()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/functions/arguments/@@iterator/index.md b/files/fr/web/javascript/reference/functions/arguments/@@iterator/index.md
new file mode 100644
index 0000000000..e6f4715714
--- /dev/null
+++ b/files/fr/web/javascript/reference/functions/arguments/@@iterator/index.md
@@ -0,0 +1,53 @@
+---
+title: arguments[@@iterator]()
+slug: Web/JavaScript/Reference/Functions/arguments/@@iterator
+tags:
+  - Déprécié
+  - Fonctions
+  - JavaScript
+  - Propriété
+  - Reference
+  - arguments
+translation_of: Web/JavaScript/Reference/Functions/arguments/@@iterator
+original_slug: Web/JavaScript/Reference/Fonctions/arguments/@@iterator
+---
+{{jsSidebar("Functions")}}
+
+La valeur initiale de la propriété **`@@iterator`** est le même objet que la fonction utilisée pour la valeur initiale de la propriété {{jsxref("Array.prototype.values")}}.
+
+## Syntaxe
+
+    arguments[Symbol.iterator]()
+
+## Exemples
+
+### Utiliser une boucle `for...of`
+
+```js
+function f() {
+  // votre environnement doit supporter les
+  // boucles for..of et les variables
+  // définies avec let dans les boucles
+  for (let letter of arguments) {
+    console.log(letter);
+  }
+}
+f('w', 'y', 'k', 'o', 'p');
+```
+
+## Spécifications
+
+| Spécification                                                                                                                | Statut                       | Commentaires         |
+| ---------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName('ES6', '#sec-createunmappedargumentsobject', ' CreateUnmappedArgumentsObject')}}     | {{Spec2('ES6')}}         | Définition initiale. |
+| {{SpecName('ES6', '#sec-createmappedargumentsobject', ' CreateMappedArgumentsObject')}}         | {{Spec2('ES6')}}         | Définition initiale. |
+| {{SpecName('ESDraft', '#sec-createunmappedargumentsobject', 'CreateUnmappedArgumentsObject')}} | {{Spec2('ESDraft')}} |                      |
+| {{SpecName('ESDraft', '#sec-createmappedargumentsobject', 'CreateMappedArgumentsObject')}}     | {{Spec2('ESDraft')}} |                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.functions.arguments.@@iterator")}}
+
+## Voir aussi
+
+- {{jsxref("Array.prototype.values()")}}
diff --git a/files/fr/web/javascript/reference/functions/arguments/callee/index.html b/files/fr/web/javascript/reference/functions/arguments/callee/index.html
deleted file mode 100644
index 4f69ce4490..0000000000
--- a/files/fr/web/javascript/reference/functions/arguments/callee/index.html
+++ /dev/null
@@ -1,157 +0,0 @@
----
-title: callee
-slug: Web/JavaScript/Reference/Functions/arguments/callee
-tags:
-  - Déprécié
-  - Fonctions
-  - JavaScript
-  - Propriété
-  - Reference
-  - arguments
-translation_of: Web/JavaScript/Reference/Functions/arguments/callee
-original_slug: Web/JavaScript/Reference/Fonctions/arguments/callee
----
-<div>{{jsSidebar("Functions")}}{{deprecated_header}}</div>
-
-<p>La propriété <strong><code>arguments.callee</code></strong> contient la fonction en cours d'exécution.</p>
-
-<h2 id="Description">Description</h2>
-
-<p><code>callee</code> est une propriété de l'objet <code>arguments</code>. Elle peut être utilisée afin de faire référence à la fonction en cours d'exécution à l'intérieur de cette fonction. Cette propriété peut etre utile lorsqu'on ne connait pas le nom de la fonction (fonction anonyme par exemple).</p>
-
-<div class="warning"><p><strong>Attention :</strong> En <a href="/fr/docs/Web/JavaScript/Reference/Strict_mode">mode strict</a>, ECMAScript 5 interdit la fonction <code>arguments.callee()</code>. Éviter de l'utiliser en utilisant un nom de fonction dans les expressions ou en utilisant une déclaration de fonction où la fonction s'appelle elle-même.</p></div>
-
-<h3 id="Pourquoi_arguments.callee_a-t-il_été_retiré_du_mode_strict_ES5">Pourquoi <code>arguments.callee</code> a-t-il été retiré du mode strict ES5 ?</h3>
-
-<p>(adapté d'une réponse<a href="http://stackoverflow.com/a/235760/578288" title="http://stackoverflow.com/a/235760/578288"> Stack Overflow par olliej</a>)</p>
-
-<p>Aux débuts de JavaScript, il n'était pas possible d'utiliser des expressions de fonction avec des noms. Il était donc impossible de faire une expression de fonction récursive.</p>
-
-<p>Cette syntaxe produisait le résultat escompté :</p>
-
-<pre class="brush: js">function factorielle (n) {
-    return !(n &gt; 1) ? 1 : factorielle(n - 1) * n;
-}
-
-[1,2,3,4,5].map(factorielle);</pre>
-
-<p>mais :</p>
-
-<pre class="brush: js">[1,2,3,4,5].map(function (n) {
-    return !(n &gt; 1) ? 1 : /* que met-on ici ? */ (n - 1) * n;
-});</pre>
-
-<p>ne fonctionnait pas. Pour que cela puisse fonctionner, on ajouta <code>arguments.callee</code> :</p>
-
-<pre class="brush: js">[1,2,3,4,5].map(function (n) {
-    return !(n &gt; 1) ? 1 : arguments.callee(n - 1) * n;
-});</pre>
-
-<p>Cependant, ce fut une mauvaise solution (avec <code>caller</code> également) car elle rendit impossible l'<a href="https://fr.wikipedia.org/wiki/Extension_inline">extension inline</a> et la <a href="https://fr.wikipedia.org/wiki/R%C3%A9cursion_terminale">récursion terminale</a> de façon générale (il est possible d'y arriver de certaines façons mais cela entraînerait nécessairement un code moins efficace). Le second problème que cela entraîne est que l'appel récursif aura une autre valeur <code>this</code> :</p>
-
-<pre class="brush: js">var global = this;
-
-var fonctionTruc = function (recursed) {
-    if (!recursed) { return arguments.callee(true); }
-    if (this !== global) {
-        console.log("this est : " + this);
-    } else {
-        console.log("this est la variable globale");
-    }
-}
-
-fonctionTruc();</pre>
-
-<p>ECMAScript 3 a introduit les expressions de fonctions nommées pour résoudre le problème. On peut désormais utiliser :</p>
-
-<pre class="brush: js">[1,2,3,4,5].map(function factorielle (n) {
-    return !(n &gt; 1) ? 1 : factorielle(n - 1)*n;
-});</pre>
-
-<p>Cette méthode possède plusieurs avantages :</p>
-
-<ul>
- <li>La fonction peut être appelée comme n'importe quelle autre fonction nommée dans le code</li>
- <li>Cela ne crée pas une variable dans la portée extérieure (<a href="http://kangax.github.io/nfe/#example_1_function_expression_identifier_leaks_into_an_enclosing_scope">sauf pour IE 8 et les versions antérieures</a>)</li>
- <li>Cela entraîne de meilleures performances que d'accéder aux propriétés de l'objet <code>arguments</code></li>
-</ul>
-
-<p>Une autre fonctionnalité qui a été déprécié est : <code>arguments.callee.caller</code>, ou plus précisément <code>Function.caller</code>. Pourquoi cela ? Parce que ça permet d'avoir accès à tout moment à la fonction appelante la plus loin dans la pile d'appels. Or, comme évoqué ci-avant, cela a un effet de bord considérable : ça rend beaucoup plus complexes voire impossibles certaines optimisations. Ainsi, on ne peut pas garantir qu'une fonction <code>f</code> n'appellera pas une autre fonction inconnue, ce qui signifie qu'on ne peut pas utiliser l'extension inline. En résumé, cela signifie que n'importe quel site d'appel de fonction (<em>call site</em>) qui aurait pu être développé inline très simplement devra subir de nombreux tests :</p>
-
-<pre class="brush: js">function f (a, b, c, d, e) { return a ? b * c : d * e; }</pre>
-
-<p>Si l'interpréteur JavaScript ne peut pas garantir que l'ensemble des arguments fournis ici sont des nombres à l'instant de l'appel de la fonction, il devra insérer des vérifications pour chaque argument avant le code inline, sinon il ne pourra pas développer la fonction inline. On notera que, dans ce cas, un interpréteur intelligent devrait pouvoir réarranger les vérifications à faire afin qu'elles soient optimales et de se débarrasser des valeurs inutiles. Malgré tout, une telle optimisation ne sera pas possible dans d'autres cas, ce qui signifie que le développement inline n'est pas possible.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Utiliser_arguments.callee_pour_une_fonction_anonyme_récursive">Utiliser <code>arguments.callee</code> pour une fonction anonyme récursive</h3>
-
-<p>Une fonction récursive, par définition, s'appelle elle-même. Elle fait donc généralement référence à elle-même grâce à son nom. Cependant, une fonction anonyme (créée grâce ) une <a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/L_op%C3%A9rateur_function">expression de fonction</a> ou au constructeur {{jsxref("Function")}}) n'a pas de nom et la seule façon d'y faire référence est donc d'utiliser <code>arguments.callee</code>.</p>
-
-<p>L'exemple qui suit illustre une fonction qui définit et renvoie une fonction factorielle. Cet exemple n'a qu'un but démonstratif et ne correspond certainement pas à ce qui serait utilisé en pratique (les expressions de fonctions pouvant être <a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/L_op%C3%A9rateur_function">nommées</a>).</p>
-
-<pre class="brush: js">function créer() {
-   return function(n) {
-      if (n &lt;= 1)
-         return 1;
-      return n * arguments.callee(n - 1);
-   };
-}
-
-var résultat = create()(5); // renvoie 120 (5 * 4 * 3 * 2 * 1)</pre>
-
-<h3 id="Une_utilisation_d'arguments.callee_qui_ne_possède_pas_de_solution_de_remplacement">Une utilisation d'<code>arguments.callee</code> qui ne possède pas de solution de remplacement</h3>
-
-<p>Malgré tout, dans un cas comme le suivant, il n'existe pas d'équivalent pour <code>arguments.callee</code>, c'est pourquoi sa déprécation pourrait être un bug (voir {{Bug("725398")}}):</p>
-
-<pre class="brush: js">function créerPersonne (sIdentité) {
-    var oPersonne = new Function("alert(arguments.callee.identité);");
-    oPersonne.identité = sIdentité;
-    return oPersonne;
-}
-
-var jean = créerPersonne("Jean Biche");
-
-jean();</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES1')}}</td>
-   <td>{{Spec2('ES1')}}</td>
-   <td>Définition initiale. Implémentée avec JavaScript 1.2</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-10.6', 'Arguments Object')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-arguments-exotic-objects', 'Arguments Exotic Objects')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-arguments-exotic-objects', 'Arguments Exotic Objects')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.functions.arguments.callee")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Function")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/functions/arguments/callee/index.md b/files/fr/web/javascript/reference/functions/arguments/callee/index.md
new file mode 100644
index 0000000000..bb8c7d6fa3
--- /dev/null
+++ b/files/fr/web/javascript/reference/functions/arguments/callee/index.md
@@ -0,0 +1,146 @@
+---
+title: callee
+slug: Web/JavaScript/Reference/Functions/arguments/callee
+tags:
+  - Déprécié
+  - Fonctions
+  - JavaScript
+  - Propriété
+  - Reference
+  - arguments
+translation_of: Web/JavaScript/Reference/Functions/arguments/callee
+original_slug: Web/JavaScript/Reference/Fonctions/arguments/callee
+---
+{{jsSidebar("Functions")}}{{deprecated_header}}
+
+La propriété **`arguments.callee`** contient la fonction en cours d'exécution.
+
+## Description
+
+`callee` est une propriété de l'objet `arguments`. Elle peut être utilisée afin de faire référence à la fonction en cours d'exécution à l'intérieur de cette fonction. Cette propriété peut etre utile lorsqu'on ne connait pas le nom de la fonction (fonction anonyme par exemple).
+
+> **Attention :** En [mode strict](/fr/docs/Web/JavaScript/Reference/Strict_mode), ECMAScript 5 interdit la fonction `arguments.callee()`. Éviter de l'utiliser en utilisant un nom de fonction dans les expressions ou en utilisant une déclaration de fonction où la fonction s'appelle elle-même.
+
+### Pourquoi `arguments.callee` a-t-il été retiré du mode strict ES5 ?
+
+(adapté d'une réponse[ Stack Overflow par olliej](http://stackoverflow.com/a/235760/578288 "http://stackoverflow.com/a/235760/578288"))
+
+Aux débuts de JavaScript, il n'était pas possible d'utiliser des expressions de fonction avec des noms. Il était donc impossible de faire une expression de fonction récursive.
+
+Cette syntaxe produisait le résultat escompté :
+
+```js
+function factorielle (n) {
+    return !(n > 1) ? 1 : factorielle(n - 1) * n;
+}
+
+[1,2,3,4,5].map(factorielle);
+```
+
+mais :
+
+```js
+[1,2,3,4,5].map(function (n) {
+    return !(n > 1) ? 1 : /* que met-on ici ? */ (n - 1) * n;
+});
+```
+
+ne fonctionnait pas. Pour que cela puisse fonctionner, on ajouta `arguments.callee` :
+
+```js
+[1,2,3,4,5].map(function (n) {
+    return !(n > 1) ? 1 : arguments.callee(n - 1) * n;
+});
+```
+
+Cependant, ce fut une mauvaise solution (avec `caller` également) car elle rendit impossible l'[extension inline](https://fr.wikipedia.org/wiki/Extension_inline) et la [récursion terminale](https://fr.wikipedia.org/wiki/R%C3%A9cursion_terminale) de façon générale (il est possible d'y arriver de certaines façons mais cela entraînerait nécessairement un code moins efficace). Le second problème que cela entraîne est que l'appel récursif aura une autre valeur `this` :
+
+```js
+var global = this;
+
+var fonctionTruc = function (recursed) {
+    if (!recursed) { return arguments.callee(true); }
+    if (this !== global) {
+        console.log("this est : " + this);
+    } else {
+        console.log("this est la variable globale");
+    }
+}
+
+fonctionTruc();
+```
+
+ECMAScript 3 a introduit les expressions de fonctions nommées pour résoudre le problème. On peut désormais utiliser :
+
+```js
+[1,2,3,4,5].map(function factorielle (n) {
+    return !(n > 1) ? 1 : factorielle(n - 1)*n;
+});
+```
+
+Cette méthode possède plusieurs avantages :
+
+- La fonction peut être appelée comme n'importe quelle autre fonction nommée dans le code
+- Cela ne crée pas une variable dans la portée extérieure ([sauf pour IE 8 et les versions antérieures](http://kangax.github.io/nfe/#example_1_function_expression_identifier_leaks_into_an_enclosing_scope))
+- Cela entraîne de meilleures performances que d'accéder aux propriétés de l'objet `arguments`
+
+Une autre fonctionnalité qui a été déprécié est : `arguments.callee.caller`, ou plus précisément `Function.caller`. Pourquoi cela ? Parce que ça permet d'avoir accès à tout moment à la fonction appelante la plus loin dans la pile d'appels. Or, comme évoqué ci-avant, cela a un effet de bord considérable : ça rend beaucoup plus complexes voire impossibles certaines optimisations. Ainsi, on ne peut pas garantir qu'une fonction `f` n'appellera pas une autre fonction inconnue, ce qui signifie qu'on ne peut pas utiliser l'extension inline. En résumé, cela signifie que n'importe quel site d'appel de fonction (_call site_) qui aurait pu être développé inline très simplement devra subir de nombreux tests :
+
+```js
+function f (a, b, c, d, e) { return a ? b * c : d * e; }
+```
+
+Si l'interpréteur JavaScript ne peut pas garantir que l'ensemble des arguments fournis ici sont des nombres à l'instant de l'appel de la fonction, il devra insérer des vérifications pour chaque argument avant le code inline, sinon il ne pourra pas développer la fonction inline. On notera que, dans ce cas, un interpréteur intelligent devrait pouvoir réarranger les vérifications à faire afin qu'elles soient optimales et de se débarrasser des valeurs inutiles. Malgré tout, une telle optimisation ne sera pas possible dans d'autres cas, ce qui signifie que le développement inline n'est pas possible.
+
+## Exemples
+
+### Utiliser `arguments.callee` pour une fonction anonyme récursive
+
+Une fonction récursive, par définition, s'appelle elle-même. Elle fait donc généralement référence à elle-même grâce à son nom. Cependant, une fonction anonyme (créée grâce ) une [expression de fonction](/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/L_op%C3%A9rateur_function) ou au constructeur {{jsxref("Function")}}) n'a pas de nom et la seule façon d'y faire référence est donc d'utiliser `arguments.callee`.
+
+L'exemple qui suit illustre une fonction qui définit et renvoie une fonction factorielle. Cet exemple n'a qu'un but démonstratif et ne correspond certainement pas à ce qui serait utilisé en pratique (les expressions de fonctions pouvant être [nommées](/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/L_op%C3%A9rateur_function)).
+
+```js
+function créer() {
+   return function(n) {
+      if (n <= 1)
+         return 1;
+      return n * arguments.callee(n - 1);
+   };
+}
+
+var résultat = create()(5); // renvoie 120 (5 * 4 * 3 * 2 * 1)
+```
+
+### Une utilisation d'`arguments.callee` qui ne possède pas de solution de remplacement
+
+Malgré tout, dans un cas comme le suivant, il n'existe pas d'équivalent pour `arguments.callee`, c'est pourquoi sa déprécation pourrait être un bug (voir {{Bug("725398")}}):
+
+```js
+function créerPersonne (sIdentité) {
+    var oPersonne = new Function("alert(arguments.callee.identité);");
+    oPersonne.identité = sIdentité;
+    return oPersonne;
+}
+
+var jean = créerPersonne("Jean Biche");
+
+jean();
+```
+
+## Spécifications
+
+| Spécification                                                                                                    | État                         | Commentaires                                         |
+| ---------------------------------------------------------------------------------------------------------------- | ---------------------------- | ---------------------------------------------------- |
+| {{SpecName('ES1')}}                                                                                         | {{Spec2('ES1')}}         | Définition initiale. Implémentée avec JavaScript 1.2 |
+| {{SpecName('ES5.1', '#sec-10.6', 'Arguments Object')}}                                         | {{Spec2('ES5.1')}}     |                                                      |
+| {{SpecName('ES6', '#sec-arguments-exotic-objects', 'Arguments Exotic Objects')}}     | {{Spec2('ES6')}}         |                                                      |
+| {{SpecName('ESDraft', '#sec-arguments-exotic-objects', 'Arguments Exotic Objects')}} | {{Spec2('ESDraft')}} |                                                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.functions.arguments.callee")}}
+
+## Voir aussi
+
+- {{jsxref("Function")}}
diff --git a/files/fr/web/javascript/reference/functions/arguments/index.html b/files/fr/web/javascript/reference/functions/arguments/index.html
deleted file mode 100644
index c996b904d3..0000000000
--- a/files/fr/web/javascript/reference/functions/arguments/index.html
+++ /dev/null
@@ -1,247 +0,0 @@
----
-title: arguments
-slug: Web/JavaScript/Reference/Functions/arguments
-tags:
-  - Fonctions
-  - Functions
-  - JavaScript
-  - Reference
-  - arguments
-translation_of: Web/JavaScript/Reference/Functions/arguments
-original_slug: Web/JavaScript/Reference/Fonctions/arguments
----
-<div>{{jsSidebar("Fonctions")}}</div>
-
-<p>L'objet <strong><code>arguments</code></strong> est un objet, <strong>semblable</strong> à un tableau, correspondant aux arguments passés à une fonction.</p>
-
-<div class="note">
-<p><strong>Note :</strong> Si vous pouvez utiliser les fonctionnalités ECMAScript 2015/ES6, il est préférable de manipuler les arguments avec <a href="/fr/docs/Web/JavaScript/Reference/Fonctions/paramètres_du_reste">les paramètres du reste</a>.</p>
-</div>
-
-<div class="note">
-<p><strong>Note :</strong> Par « objet semblable à un tableau », on indique que l'objet <code>arguments</code> possède une propriété {{jsxref("Fonctions/arguments.length", "length")}} et que ses propriétés sont indexées à partir de 0 mais qu'il ne possède aucune des méthodes natives de {{jsxref("Array")}} telles que {{jsxref("Array.forEach", "forEach()")}} et {{jsxref("Array.map", "map()")}}.</p>
-</div>
-
-<div>{{EmbedInteractiveExample("pages/js/functions-arguments.html")}}</div>
-
-
-
-<div class="note">
-<p><strong>Note :</strong> « Variable ayant la fonction pour portée » correspond à la traduction de « Variable of the function scope » qu'il serait incorrect de traduire par « Variable de la portée de la fonction » car la portée de la fonction est la portée dans laquelle on peut appeler la fonction. Une variable locale de la fonction pourrait quant à elle avoir une portée strictement incluse dans le corps de la fonction (variable définie dans un bloc de la fonction même si cette subtilité n'existe pas en Javascript). Toute suggestion pour éviter cette tournure un peu longue sans altérer le sens est la bienvenue. (variable intrinsèque)</p>
-</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">arguments</pre>
-
-<h2 id="Description">Description</h2>
-
-<p>L'objet <code>arguments</code> est une variable locale (intrinsèque et inhérente aux fonctions) disponible dans toutes les fonctions (qui ne sont pas <a href="/fr/docs/Web/JavaScript/Reference/Fonctions/Fonctions_fl%C3%A9ch%C3%A9es">des fonctions fléchées</a>).</p>
-
-<p>Vous pouvez accéder aux arguments d'une fonction à l'intérieur de celle-ci en utilisant l'objet <code>arguments</code>. Cet objet contient une entrée pour chaque argument passé à la fonction, l'indice de la première entrée commençant à 0. Par exemple, si une fonction est appelée avec trois arguments, on accède à ceux-ci comme suit :</p>
-
-<pre class="brush: js">arguments[0]
-arguments[1]
-arguments[2]</pre>
-
-<p>Les arguments peuvent aussi être modifiés :</p>
-
-<pre class="brush: js">arguments[1] = 'nouvelle valeur';</pre>
-
-<h3 id="Type_de_l'objet_arguments_et_liens_avec_Array">Type de l'objet <code>arguments</code> et liens avec <code>Array</code></h3>
-
-<p>L'objet <code>arguments</code> n'est pas un {{jsxref("Array")}}. Il est similaire à un <code>Array</code>, mais il n'a pas les propriétés d'un <code>Array,</code> exceptée la propriété {{jsxref("Array.length", "length")}}. Par exemple, il n'a pas la méthode {{jsxref("Array.pop", "pop()")}}. Néanmoins, il peut être converti en un vrai objet de type <code>Array</code> :</p>
-
-<pre class="brush: js">console.log(typeof arguments); // 'object'
-var args = Array.prototype.slice.call(arguments);
-
-// Avec ECMAScript 2015 / ES6
-var args = Array.from(arguments);
-</pre>
-
-<h3 id="Utilisation_de_la_décomposition_avec_les_arguments">Utilisation de la décomposition avec les arguments</h3>
-
-<p>On peut utiliser la méthode {{jsxref("Array.from()")}} ou encore <a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateur_de_d%C3%A9composition">l'opérateur de décomposition</a> afin de convertir cet objet en un <em>vrai</em> <code>Array</code> :</p>
-
-<pre class="brush: js">var args = Array.from(arguments);
-var args = [...arguments];</pre>
-
-<div class="warning">
-<p><strong>Attention :</strong> Il est déconseillé d'utiliser <code>slice</code> sur les arguments car cela peut empêcher certaines optimisations des moteurs JavaScript. Pour ce scénario, on peut par exemple construire un nouveau tableau en parcourant l'objet arguments (à ce sujet, voir <a href="https://github.com/petkaantonov/bluebird/wiki/Optimization-killers#3-managing-arguments">cette page</a> sur les contraintes d'optimisations liées à V8). Pour cet exemple, on pourra utiliser <code>Array.apply</code> :</p>
-
-<pre class="brush: js">var args = (arguments.length === 1 ? [arguments[0]] : Array.apply(null, arguments));</pre>
-</div>
-
-<p>L'objet <code>arguments</code> est disponible uniquement dans le corps d'une fonction. Tenter d'accéder à l'objet <code>arguments</code> en dehors de la déclaration d'une fonction renvoie une erreur.</p>
-
-<p>Vous pouvez utiliser l'objet <code>arguments</code> si vous appelez une fonction avec plus de paramètres que ceux déclarés dans sa signature. Cette technique est utile pour les fonctions qui acceptent un nombre variable d'arguments. Vous pouvez utiliser  {{jsxref("Fonctions/arguments/length", "arguments.length")}} pour déterminer le nombre de paramètres passés à la fonction, puis utiliser chaque argument en utilisant l'objet <code>arguments</code>. (Pour déterminer le nombre d'arguments déclarés à la définition de la fonction, il faut utiliser la propriété {{jsxref("Function.length", "length")}}.)</p>
-
-<h3 id="Utiliser_typeof_sur_arguments">Utiliser <code>typeof</code> sur <code>arguments</code></h3>
-
-<p>L'opérateur {{jsxref("Opérateurs/L_opérateur_typeof","typeof")}} renvoie <code>"object"</code> lorsqu'on l'utilise sur <code>arguments</code></p>
-
-<pre class="brush: js">console.log(typeof arguments); // "object"</pre>
-
-<p>On peut tout à fait utiliser <code>typeof</code> sur chacun des arguments afin de connaître leur type respectif</p>
-
-<pre class="brush: js">console.log(typeof arguments[0]); // renvoie le type du premier argument</pre>
-
-<h2 id="Propriétés">Propriétés</h2>
-
-<dl>
- <dt>{{jsxref("Fonctions/arguments/callee", "arguments.callee")}} {{Deprecated_inline}}</dt>
- <dd>Référence à la fonction en cours d'exécution.</dd>
- <dt>{{jsxref("Fonctions/arguments/caller", "arguments.caller")}} {{Obsolete_inline}}</dt>
- <dd>Référence à la fonction appelante.</dd>
- <dt>{{jsxref("Fonctions/arguments/length", "arguments.length")}}</dt>
- <dd>Référence au nombre d'arguments passés à la fonction.</dd>
- <dt>{{jsxref("Fonctions/arguments/@@iterator", "arguments[@@iterator]")}}</dt>
- <dd>Renvoie un nouvel <a href="/fr/docs/Web/JavaScript/Guide/iterateurs_et_generateurs#Itérateurs">itérateur</a> qui contient les valeurs pour chaque indice d'<code>arguments</code>.</dd>
-</dl>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Définir_une_fonction_de_concaténation_d'un_nombre_variable_de_chaînes">Définir une fonction de concaténation d'un nombre variable de chaînes</h3>
-
-<p>Cet exemple définit une fonction qui concatène un nombre variable de chaînes. Le seul argument formel de la fonction est une chaîne spécifiant un séparateur inséré entre les chaînes concaténées. La fonction est définie comme suit :</p>
-
-<pre class="brush:js">function myConcat(separateur) {
-  var args = Array.prototype.slice.call(arguments, 1);
-  return args.join(separateur);
-}</pre>
-
-<p>Vous pouvez passer n'importe quel nombre d'arguments à cette fonction ; elle créera une liste en utilisant chaque argument comme un élément de la liste.</p>
-
-<pre class="brush:js">// renvoie "rouge, orange, bleu"
-myConcat(", ", "rouge", "orange", "bleu");
-
-// renvoie "éléphant ; giraffe ; lion ; guépard"
-myConcat(" ; ", "elephant", "giraffe", "lion", "guépard");
-</pre>
-
-<h3 id="Définir_une_fonction_de_création_de_listes_HTML">Définir une fonction de création de listes HTML</h3>
-
-<p>Cet exemple définit une fonction qui crée des chaînes définissant des listes HTML. Le seul argument formel de la fonction est une chaîne pouvant valoir "<code>u</code>" (unordered), si la liste doit être sans numérotation (avec des puces), ou "<code>o</code>" (ordered), si la liste doit être numérotée. La fonction est définie comme suit :</p>
-
-<pre class="brush:js">function liste(type) {
-  var resultat = "&lt;" + type + "l&gt;&lt;li&gt;";
-  var args = Array.prototype.slice.call(arguments, 1);
-  resultat += args.join("&lt;/li&gt;&lt;li&gt;");
-  resultat += "&lt;/li&gt;&lt;/" + type + "l&gt;"; // end list
-
-  return resultat;
-}</pre>
-
-<p>Vous pouvez passer n'importe quel nombre d'arguments à cette fonction ; elle créera une liste du type indiqué en ajoutant chaque argument comme élément dans la liste. Exemple :</p>
-
-<pre class="brush:js">var listeHTML = liste("u", "Un", "Deux", "Trois");
-
-/* listeHTML vaut  :
-
-"&lt;ul&gt;&lt;li&gt;Un&lt;/li&gt;&lt;li&gt;Deux&lt;/li&gt;&lt;li&gt;Trois&lt;/li&gt;&lt;/ul&gt;"
-
-*/</pre>
-
-<h3 id="Paramètres_du_reste_paramètres_par_défaut_et_décomposition">Paramètres du reste, paramètres par défaut et décomposition</h3>
-
-<p>L'objet <code>arguments</code> peut être utilisé en combinaison avec <a href="/fr/docs/Web/JavaScript/Reference/Fonctions/paramètres_du_reste">les paramètres du reste</a>, <a href="/fr/docs/Web/JavaScript/Reference/Fonctions/Valeurs_par_défaut_des_arguments">les paramètres par défaut</a> ou <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Affecter_par_décomposition">les paramètres décomposés</a>.</p>
-
-<pre class="brush: js">function toto(...args) {
-  return args;
-}
-toto(1, 2, 3); // [1, 2, 3]
-</pre>
-
-<p>Toutefois, pour les fonctions utilisées en mode non-strict, un<strong> objet <code>arguments</code></strong> n'est fourni à l'intérieur de la fonction uniquement si celle-ci n'utilise pas de <a href="/fr/docs/Web/JavaScript/Reference/Fonctions/paramètres_du_reste">paramètres du reste</a>, pas de <a href="/fr/docs/Web/JavaScript/Reference/Fonctions/Valeurs_par_défaut_des_arguments">paramètres par défaut</a> ou de <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Affecter_par_décomposition">paramètre décomposé</a>. Par exemple, dans la fonction suivante, qui utilise un paramètre par défaut, ce sera 10 qui sera renvoyé (et non 100) :</p>
-
-<pre class="brush: js">function truc(a=1) {
-  arguments[0] = 100;
-  return a;
-}
-truc(10); // 10
-</pre>
-
-<p>Si l'objet <code>arguments</code> est modifié dans la fonction, cela modifiera la valeur du paramètre passé. Dans cet exemple où il n'y a ni <a href="/fr/docs/Web/JavaScript/Reference/Fonctions/param%C3%A8tres_du_reste">paramètres du reste</a>, ni <a href="/fr/docs/Web/JavaScript/Reference/Fonctions/Valeurs_par_défaut_des_arguments">paramètres par défaut</a>, ni <a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateur_de_d%C3%A9composition">décomposition</a>, le résultat sera 100 :</p>
-
-<pre class="brush: js">fonction truc(a) {
-  arguments[0] = 100;
-  return a;
-}
-truc(10); // 100</pre>
-
-<p>En fait, lorsqu'il n'y a aucun paramètre du reste, paramètre par défaut ou aucune décomposition, les arguments formels feront références aux valeurs de l'objet <code>arguments</code>. Lorsqu'on aura besoin d'accéder à ces valeurs, on accèdera aux valeurs contenues dans <code>arguments</code> et à l'inverse, lorsqu'on modifiera ces valeurs, cela modifiera le contenu d'<code>arguments</code>. Par exemple</p>
-
-<pre class="brush: js">function func(a, b) {
-  arguments[0] = 99;
-  arguments[1] = 99;
-  console.log(a + " " +b);
-}
-
-func(1, 2); // 99 99
-</pre>
-
-<p>ou encore :</p>
-
-<pre class="brush: js">function func(a, b) {
-  a = 9;
-  b = 99;
-  console.log(arguments[0] + " " + arguments[1]);
-}
-
-func(3, 4); // 9 99
-</pre>
-
-<p>En revanche, dès qu'on utilise des paramètres du reste, des paramètres par défaut ou la décomposition, c'est le comportement normal qui sera appliqué :</p>
-
-<pre class="brush: js">function func(a, b, c = 9) {
-  arguments[0] = 99;
-  arguments[1] = 98;
-  console.log(a + " " + b);
-}
-
-func(3, 4); // 3 4
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES1')}}</td>
-   <td>{{Spec2('ES1')}}</td>
-   <td>Définition initiale. Implémentée par JavaScript 1.1</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-10.6', 'Arguments Object')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-arguments-exotic-objects', 'Arguments Exotic Objects')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-arguments-exotic-objects', 'Arguments Exotic Objects')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.functions.arguments")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Function")}}</li>
- <li><a href="/fr/docs/Web/JavaScript/Reference/Fonctions/paramètres_du_reste">Les paramètres du reste</a></li>
- <li><a href="https://github.com/petkaantonov/bluebird/wiki/Optimization-killers#3-managing-arguments">Contraintes d'optimisations sous V8 en relation avec <code>arguments</code></a></li>
-</ul>
diff --git a/files/fr/web/javascript/reference/functions/arguments/index.md b/files/fr/web/javascript/reference/functions/arguments/index.md
new file mode 100644
index 0000000000..84b1939b72
--- /dev/null
+++ b/files/fr/web/javascript/reference/functions/arguments/index.md
@@ -0,0 +1,237 @@
+---
+title: arguments
+slug: Web/JavaScript/Reference/Functions/arguments
+tags:
+  - Fonctions
+  - Functions
+  - JavaScript
+  - Reference
+  - arguments
+translation_of: Web/JavaScript/Reference/Functions/arguments
+original_slug: Web/JavaScript/Reference/Fonctions/arguments
+---
+{{jsSidebar("Fonctions")}}
+
+L'objet **`arguments`** est un objet, **semblable** à un tableau, correspondant aux arguments passés à une fonction.
+
+> **Note :** Si vous pouvez utiliser les fonctionnalités ECMAScript 2015/ES6, il est préférable de manipuler les arguments avec [les paramètres du reste](/fr/docs/Web/JavaScript/Reference/Fonctions/paramètres_du_reste).
+
+> **Note :** Par « objet semblable à un tableau », on indique que l'objet `arguments` possède une propriété {{jsxref("Fonctions/arguments.length", "length")}} et que ses propriétés sont indexées à partir de 0 mais qu'il ne possède aucune des méthodes natives de {{jsxref("Array")}} telles que {{jsxref("Array.forEach", "forEach()")}} et {{jsxref("Array.map", "map()")}}.
+
+{{EmbedInteractiveExample("pages/js/functions-arguments.html")}}
+
+> **Note :** « Variable ayant la fonction pour portée » correspond à la traduction de « Variable of the function scope » qu'il serait incorrect de traduire par « Variable de la portée de la fonction » car la portée de la fonction est la portée dans laquelle on peut appeler la fonction. Une variable locale de la fonction pourrait quant à elle avoir une portée strictement incluse dans le corps de la fonction (variable définie dans un bloc de la fonction même si cette subtilité n'existe pas en Javascript). Toute suggestion pour éviter cette tournure un peu longue sans altérer le sens est la bienvenue. (variable intrinsèque)
+
+## Syntaxe
+
+    arguments
+
+## Description
+
+L'objet `arguments` est une variable locale (intrinsèque et inhérente aux fonctions) disponible dans toutes les fonctions (qui ne sont pas [des fonctions fléchées](/fr/docs/Web/JavaScript/Reference/Fonctions/Fonctions_fl%C3%A9ch%C3%A9es)).
+
+Vous pouvez accéder aux arguments d'une fonction à l'intérieur de celle-ci en utilisant l'objet `arguments`. Cet objet contient une entrée pour chaque argument passé à la fonction, l'indice de la première entrée commençant à 0. Par exemple, si une fonction est appelée avec trois arguments, on accède à ceux-ci comme suit :
+
+```js
+arguments[0]
+arguments[1]
+arguments[2]
+```
+
+Les arguments peuvent aussi être modifiés :
+
+```js
+arguments[1] = 'nouvelle valeur';
+```
+
+### Type de l'objet `arguments` et liens avec `Array`
+
+L'objet `arguments` n'est pas un {{jsxref("Array")}}. Il est similaire à un `Array`, mais il n'a pas les propriétés d'un `Array,` exceptée la propriété {{jsxref("Array.length", "length")}}. Par exemple, il n'a pas la méthode {{jsxref("Array.pop", "pop()")}}. Néanmoins, il peut être converti en un vrai objet de type `Array` :
+
+```js
+console.log(typeof arguments); // 'object'
+var args = Array.prototype.slice.call(arguments);
+
+// Avec ECMAScript 2015 / ES6
+var args = Array.from(arguments);
+```
+
+### Utilisation de la décomposition avec les arguments
+
+On peut utiliser la méthode {{jsxref("Array.from()")}} ou encore [l'opérateur de décomposition](/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateur_de_d%C3%A9composition) afin de convertir cet objet en un _vrai_ `Array` :
+
+```js
+var args = Array.from(arguments);
+var args = [...arguments];
+```
+
+> **Attention :** Il est déconseillé d'utiliser `slice` sur les arguments car cela peut empêcher certaines optimisations des moteurs JavaScript. Pour ce scénario, on peut par exemple construire un nouveau tableau en parcourant l'objet arguments (à ce sujet, voir [cette page](https://github.com/petkaantonov/bluebird/wiki/Optimization-killers#3-managing-arguments) sur les contraintes d'optimisations liées à V8). Pour cet exemple, on pourra utiliser `Array.apply` :
+>
+> ```js
+> var args = (arguments.length === 1 ? [arguments[0]] : Array.apply(null, arguments));
+> ```
+
+L'objet `arguments` est disponible uniquement dans le corps d'une fonction. Tenter d'accéder à l'objet `arguments` en dehors de la déclaration d'une fonction renvoie une erreur.
+
+Vous pouvez utiliser l'objet `arguments` si vous appelez une fonction avec plus de paramètres que ceux déclarés dans sa signature. Cette technique est utile pour les fonctions qui acceptent un nombre variable d'arguments. Vous pouvez utiliser  {{jsxref("Fonctions/arguments/length", "arguments.length")}} pour déterminer le nombre de paramètres passés à la fonction, puis utiliser chaque argument en utilisant l'objet `arguments`. (Pour déterminer le nombre d'arguments déclarés à la définition de la fonction, il faut utiliser la propriété {{jsxref("Function.length", "length")}}.)
+
+### Utiliser `typeof` sur `arguments`
+
+L'opérateur {{jsxref("Opérateurs/L_opérateur_typeof","typeof")}} renvoie `"object"` lorsqu'on l'utilise sur `arguments`
+
+```js
+console.log(typeof arguments); // "object"
+```
+
+On peut tout à fait utiliser `typeof` sur chacun des arguments afin de connaître leur type respectif
+
+```js
+console.log(typeof arguments[0]); // renvoie le type du premier argument
+```
+
+## Propriétés
+
+- {{jsxref("Fonctions/arguments/callee", "arguments.callee")}} {{Deprecated_inline}}
+  - : Référence à la fonction en cours d'exécution.
+- {{jsxref("Fonctions/arguments/caller", "arguments.caller")}} {{Obsolete_inline}}
+  - : Référence à la fonction appelante.
+- {{jsxref("Fonctions/arguments/length", "arguments.length")}}
+  - : Référence au nombre d'arguments passés à la fonction.
+- {{jsxref("Fonctions/arguments/@@iterator", "arguments[@@iterator]")}}
+  - : Renvoie un nouvel [itérateur](/fr/docs/Web/JavaScript/Guide/iterateurs_et_generateurs#Itérateurs) qui contient les valeurs pour chaque indice d'`arguments`.
+
+## Exemples
+
+### Définir une fonction de concaténation d'un nombre variable de chaînes
+
+Cet exemple définit une fonction qui concatène un nombre variable de chaînes. Le seul argument formel de la fonction est une chaîne spécifiant un séparateur inséré entre les chaînes concaténées. La fonction est définie comme suit :
+
+```js
+function myConcat(separateur) {
+  var args = Array.prototype.slice.call(arguments, 1);
+  return args.join(separateur);
+}
+```
+
+Vous pouvez passer n'importe quel nombre d'arguments à cette fonction ; elle créera une liste en utilisant chaque argument comme un élément de la liste.
+
+```js
+// renvoie "rouge, orange, bleu"
+myConcat(", ", "rouge", "orange", "bleu");
+
+// renvoie "éléphant ; giraffe ; lion ; guépard"
+myConcat(" ; ", "elephant", "giraffe", "lion", "guépard");
+```
+
+### Définir une fonction de création de listes HTML
+
+Cet exemple définit une fonction qui crée des chaînes définissant des listes HTML. Le seul argument formel de la fonction est une chaîne pouvant valoir "`u`" (unordered), si la liste doit être sans numérotation (avec des puces), ou "`o`" (ordered), si la liste doit être numérotée. La fonction est définie comme suit :
+
+```js
+function liste(type) {
+  var resultat = "<" + type + "l><li>";
+  var args = Array.prototype.slice.call(arguments, 1);
+  resultat += args.join("</li><li>");
+  resultat += "</li></" + type + "l>"; // end list
+
+  return resultat;
+}
+```
+
+Vous pouvez passer n'importe quel nombre d'arguments à cette fonction ; elle créera une liste du type indiqué en ajoutant chaque argument comme élément dans la liste. Exemple :
+
+```js
+var listeHTML = liste("u", "Un", "Deux", "Trois");
+
+/* listeHTML vaut  :
+
+"<ul><li>Un</li><li>Deux</li><li>Trois</li></ul>"
+
+*/
+```
+
+### Paramètres du reste, paramètres par défaut et décomposition
+
+L'objet `arguments` peut être utilisé en combinaison avec [les paramètres du reste](/fr/docs/Web/JavaScript/Reference/Fonctions/paramètres_du_reste), [les paramètres par défaut](/fr/docs/Web/JavaScript/Reference/Fonctions/Valeurs_par_défaut_des_arguments) ou [les paramètres décomposés](/fr/docs/Web/JavaScript/Reference/Opérateurs/Affecter_par_décomposition).
+
+```js
+function toto(...args) {
+  return args;
+}
+toto(1, 2, 3); // [1, 2, 3]
+```
+
+Toutefois, pour les fonctions utilisées en mode non-strict, un **objet `arguments`** n'est fourni à l'intérieur de la fonction uniquement si celle-ci n'utilise pas de [paramètres du reste](/fr/docs/Web/JavaScript/Reference/Fonctions/paramètres_du_reste), pas de [paramètres par défaut](/fr/docs/Web/JavaScript/Reference/Fonctions/Valeurs_par_défaut_des_arguments) ou de [paramètre décomposé](/fr/docs/Web/JavaScript/Reference/Opérateurs/Affecter_par_décomposition). Par exemple, dans la fonction suivante, qui utilise un paramètre par défaut, ce sera 10 qui sera renvoyé (et non 100) :
+
+```js
+function truc(a=1) {
+  arguments[0] = 100;
+  return a;
+}
+truc(10); // 10
+```
+
+Si l'objet `arguments` est modifié dans la fonction, cela modifiera la valeur du paramètre passé. Dans cet exemple où il n'y a ni [paramètres du reste](/fr/docs/Web/JavaScript/Reference/Fonctions/param%C3%A8tres_du_reste), ni [paramètres par défaut](/fr/docs/Web/JavaScript/Reference/Fonctions/Valeurs_par_défaut_des_arguments), ni [décomposition](/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateur_de_d%C3%A9composition), le résultat sera 100 :
+
+```js
+fonction truc(a) {
+  arguments[0] = 100;
+  return a;
+}
+truc(10); // 100
+```
+
+En fait, lorsqu'il n'y a aucun paramètre du reste, paramètre par défaut ou aucune décomposition, les arguments formels feront références aux valeurs de l'objet `arguments`. Lorsqu'on aura besoin d'accéder à ces valeurs, on accèdera aux valeurs contenues dans `arguments` et à l'inverse, lorsqu'on modifiera ces valeurs, cela modifiera le contenu d'`arguments`. Par exemple
+
+```js
+function func(a, b) {
+  arguments[0] = 99;
+  arguments[1] = 99;
+  console.log(a + " " +b);
+}
+
+func(1, 2); // 99 99
+```
+
+ou encore :
+
+```js
+function func(a, b) {
+  a = 9;
+  b = 99;
+  console.log(arguments[0] + " " + arguments[1]);
+}
+
+func(3, 4); // 9 99
+```
+
+En revanche, dès qu'on utilise des paramètres du reste, des paramètres par défaut ou la décomposition, c'est le comportement normal qui sera appliqué :
+
+```js
+function func(a, b, c = 9) {
+  arguments[0] = 99;
+  arguments[1] = 98;
+  console.log(a + " " + b);
+}
+
+func(3, 4); // 3 4
+```
+
+## Spécifications
+
+| Spécification                                                                                                    | État                         | Commentaires                                        |
+| ---------------------------------------------------------------------------------------------------------------- | ---------------------------- | --------------------------------------------------- |
+| {{SpecName('ES1')}}                                                                                         | {{Spec2('ES1')}}         | Définition initiale. Implémentée par JavaScript 1.1 |
+| {{SpecName('ES5.1', '#sec-10.6', 'Arguments Object')}}                                         | {{Spec2('ES5.1')}}     |                                                     |
+| {{SpecName('ES2015', '#sec-arguments-exotic-objects', 'Arguments Exotic Objects')}} | {{Spec2('ES2015')}}     |                                                     |
+| {{SpecName('ESDraft', '#sec-arguments-exotic-objects', 'Arguments Exotic Objects')}} | {{Spec2('ESDraft')}} |                                                     |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.functions.arguments")}}
+
+## Voir aussi
+
+- {{jsxref("Function")}}
+- [Les paramètres du reste](/fr/docs/Web/JavaScript/Reference/Fonctions/paramètres_du_reste)
+- [Contraintes d'optimisations sous V8 en relation avec `arguments`](https://github.com/petkaantonov/bluebird/wiki/Optimization-killers#3-managing-arguments)
diff --git a/files/fr/web/javascript/reference/functions/arguments/length/index.html b/files/fr/web/javascript/reference/functions/arguments/length/index.html
deleted file mode 100644
index 495b0e6f20..0000000000
--- a/files/fr/web/javascript/reference/functions/arguments/length/index.html
+++ /dev/null
@@ -1,91 +0,0 @@
----
-title: length
-slug: Web/JavaScript/Reference/Functions/arguments/length
-tags:
-  - Functions
-  - JavaScript
-  - Propriété
-  - Reference
-  - arguments
-translation_of: Web/JavaScript/Reference/Functions/arguments/length
-original_slug: Web/JavaScript/Reference/Fonctions/arguments/length
----
-<div>{{jsSideBar("Functions")}}</div>
-
-<p>La propriété <strong><code>arguments.length</code></strong> contient le nombre d'arguments passés à la fonction.</p>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">arguments.length</pre>
-
-<h2 id="Description">Description</h2>
-
-<p>La propriété <code>arguments.length</code> fournit le nombre d'arguments qui ont été passés à la fonction. Cette quantité peut être inférieure ou supérieure au nombre de paramètres explicitement déclarés dans la définition de la fonction (voir également {{jsxref("Function.length")}}).</p>
-
-<h2 id="Exemple">Exemple</h2>
-
-<h3 id="Utiliser_arguments.length">Utiliser <code>arguments.length</code></h3>
-
-<p>Dans cet exemple, on définit une fonction qui permet d'additionner plusieurs nombres.</p>
-
-<pre class="brush: js">function somme(x /*, y, z, ...*/) {
-   x = Number(x);
-   for (var i = 1; i &lt; arguments.length; i++) {
-      x += Number(arguments[i]);
-   }
-   return x;
-}
-</pre>
-
-<pre class="brush: js">résultat = somme(3, 4, 5);        // renvoie 12
-résultat = somme(3, 4);           // renvoie 7
-résultat = somme(103, 104, 105);  // renvoie 312
-</pre>
-
-<div class="note">
-<p><strong>Note :</strong> <code>arguments.length</code> ne doit pas être confondu avec {{jsxref("Function.length")}}.</p>
-</div>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES1')}}</td>
-   <td>{{Spec2('ES1')}}</td>
-   <td>Définition initiale. Implémentée par JavaScript 1.1</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-10.6', 'Arguments Object')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-arguments-exotic-objects', 'Arguments Exotic Objects')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-arguments-exotic-objects', 'Arguments Exotic Objects')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-
-<p>{{Compat("javascript.functions.arguments.length")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Function")}}</li>
- <li>{{jsxref("Function.length")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/functions/arguments/length/index.md b/files/fr/web/javascript/reference/functions/arguments/length/index.md
new file mode 100644
index 0000000000..7deb32f457
--- /dev/null
+++ b/files/fr/web/javascript/reference/functions/arguments/length/index.md
@@ -0,0 +1,65 @@
+---
+title: length
+slug: Web/JavaScript/Reference/Functions/arguments/length
+tags:
+  - Functions
+  - JavaScript
+  - Propriété
+  - Reference
+  - arguments
+translation_of: Web/JavaScript/Reference/Functions/arguments/length
+original_slug: Web/JavaScript/Reference/Fonctions/arguments/length
+---
+{{jsSideBar("Functions")}}
+
+La propriété **`arguments.length`** contient le nombre d'arguments passés à la fonction.
+
+## Syntaxe
+
+    arguments.length
+
+## Description
+
+La propriété `arguments.length` fournit le nombre d'arguments qui ont été passés à la fonction. Cette quantité peut être inférieure ou supérieure au nombre de paramètres explicitement déclarés dans la définition de la fonction (voir également {{jsxref("Function.length")}}).
+
+## Exemple
+
+### Utiliser `arguments.length`
+
+Dans cet exemple, on définit une fonction qui permet d'additionner plusieurs nombres.
+
+```js
+function somme(x /*, y, z, ...*/) {
+   x = Number(x);
+   for (var i = 1; i < arguments.length; i++) {
+      x += Number(arguments[i]);
+   }
+   return x;
+}
+```
+
+```js
+résultat = somme(3, 4, 5);        // renvoie 12
+résultat = somme(3, 4);           // renvoie 7
+résultat = somme(103, 104, 105);  // renvoie 312
+```
+
+> **Note :** `arguments.length` ne doit pas être confondu avec {{jsxref("Function.length")}}.
+
+## Spécifications
+
+| Spécification                                                                                                    | État                         | Commentaires                                        |
+| ---------------------------------------------------------------------------------------------------------------- | ---------------------------- | --------------------------------------------------- |
+| {{SpecName('ES1')}}                                                                                         | {{Spec2('ES1')}}         | Définition initiale. Implémentée par JavaScript 1.1 |
+| {{SpecName('ES5.1', '#sec-10.6', 'Arguments Object')}}                                         | {{Spec2('ES5.1')}}     |                                                     |
+| {{SpecName('ES6', '#sec-arguments-exotic-objects', 'Arguments Exotic Objects')}}     | {{Spec2('ES6')}}         |                                                     |
+| {{SpecName('ESDraft', '#sec-arguments-exotic-objects', 'Arguments Exotic Objects')}} | {{Spec2('ESDraft')}} |                                                     |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.functions.arguments.length")}}
+
+## Voir aussi
+
+- {{jsxref("Function")}}
+- {{jsxref("Function.length")}}
diff --git a/files/fr/web/javascript/reference/functions/arrow_functions/index.html b/files/fr/web/javascript/reference/functions/arrow_functions/index.html
deleted file mode 100644
index 8beaaa3098..0000000000
--- a/files/fr/web/javascript/reference/functions/arrow_functions/index.html
+++ /dev/null
@@ -1,374 +0,0 @@
----
-title: Fonctions fléchées
-slug: Web/JavaScript/Reference/Functions/Arrow_functions
-tags:
-  - ECMAScript 2015
-  - Fonctions
-  - JavaScript
-  - Reference
-translation_of: Web/JavaScript/Reference/Functions/Arrow_functions
-original_slug: Web/JavaScript/Reference/Fonctions/Fonctions_fléchées
----
-<div>{{jsSidebar("Functions")}}</div>
-
-<p>Une <strong>expression de fonction fléchée</strong> (<em>arrow function</em> en anglais) permet d’avoir une syntaxe plus courte que <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_function">les expressions de fonction</a> et ne possède pas ses propres valeurs pour <code><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_this">this</a></code>, <code><a href="/fr/docs/Web/JavaScript/Reference/Fonctions/arguments">arguments</a></code>, <code><a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/super">super</a></code>, ou <code><a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/new.target">new.target</a></code>. Les fonctions fléchées sont souvent <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Function/name">anonymes</a> et ne sont pas destinées à être utilisées pour déclarer des méthodes.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/functions-arrow.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">([param] [, param]) =&gt; {
-   instructions
-}
-
-(param1, param2, …, param2) =&gt; expression
-// équivalent à
-(param1, param2, …, param2) =&gt; {
-  return expression;
-}
-
-// Parenthèses non nécessaires quand il n'y a qu'un seul argument
-param =&gt; expression
-
-// Une fonction sans paramètre peut s'écrire avec un couple
-// de parenthèses
-() =&gt; {
-  instructions
-}
-
-// Gestion des <a href="/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters">paramètres du reste</a> et <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Default_parameters">paramètres par défaut</a>
-(param1, param2, ...reste) =&gt; {
-  instructions
-}
-(param1 = valeurDefaut1, param2, …, paramN = valeurDefautN) =&gt; {
-  instructions
-}
-
-// Gestion de la décomposition pour la liste des paramètres
-let f = ([a, b] = [1, 2], {x: c} = {x: a + b}) =&gt; a + b + c;
-f();
-</pre>
-
-<dl>
- <dt><code>param</code></dt>
- <dd>Le nom d’un argument. S’il n'y a aucun argument, cela doit être indiqué par une paire de parenthèses <code>()</code>. S’il n'y a qu’un argument, les parenthèses ne sont pas nécessaires (ex. : <code>toto =&gt; 1</code>).</dd>
- <dt><code>instructions</code> ou <code>expression</code></dt>
- <dd>Plusieurs instructions doivent être encadrées par des accolades, {}. Une expression simple ne nécessite pas d’accolades. L’expression est également la valeur de retour implicite pour cette fonction.</dd>
-</dl>
-
-<h2 id="Description">Description</h2>
-
-<p>Deux facteurs sont à l’origine de la conception des fonctions fléchées : une syntaxe plus courte et l’absence de <code>this</code> spécifique à la fonction. Sur ce dernier point, cela signifie qu’une fonction fléchée ne lie pas son propre {{jsxref("Opérateurs/L_opérateur_this","this")}} au sein de la fonction (il en va de même avec {{jsxref("Fonctions/arguments","arguments")}}, {{jsxref("Opérateurs/super","super")}} ou {{jsxref("Opérateurs/new.target","new.target")}}).</p>
-
-<div class="note">
-<p><strong>Note :</strong> Voir aussi l’article sur les fonctions fléchées présent sur <a href="https://tech.mozfr.org/post/2015/06/10/ES6-en-details-%3A-les-fonctions-flechees">https://tech.mozfr.org/post/2015/06/10/ES6-en-details-%3A-les-fonctions-flechees</a> (l’article original en anglais est disponible <a href="https://hacks.mozilla.org/2015/06/es6-in-depth-arrow-functions/">ici</a>).</p>
-</div>
-
-<h3 id="Syntaxe_plus_courte">Syntaxe plus courte</h3>
-
-<p>Pour des aspects fonctionnels, la légèreté de la syntaxe est bienvenue. Par exemple :</p>
-
-<pre class="brush: js">var a = [
-  "We're up all night 'til the sun",
-  "We're up all night to get some",
-  "We're up all night for good fun",
-  "We're up all night to get lucky"
-];
-
-// Sans la syntaxe des fonctions fléchées
-var a2 = a.map(function (s) { return s.length });
-// [31, 30, 31, 31]
-
-// Avec, on a quelque chose de plus concis
-var a3 = a.map( s =&gt; s.length);
-// [31, 30, 31, 31]</pre>
-
-<h3 id="Pas_de_this_lié_à_la_fonction">Pas de <code>this</code> lié à la fonction</h3>
-
-<p>Jusqu’a l’apparition des fonctions fléchées, chaque nouvelle fonction définissait son propre {{jsxref("Opérateurs/L_opérateur_this","this")}} :</p>
-
-<ul>
- <li>un nouvel objet dans le cas d’un constructeur</li>
- <li><code>undefined</code> dans les appels de fonctions en <a href="/fr/docs/Web/JavaScript/Reference/Strict_mode">mode strict</a></li>
- <li>l’objet courant si la fonction est appelée comme une méthode, etc.</li>
-</ul>
-
-<p>Cela a pu entraîner des confusions lorsqu’on utilisait un style de programmation orientée objet.</p>
-
-<pre class="brush: js">function Personne () {
-  // Le constructeur Personne() définit `this` comme lui-même.
-  this.age = 0;
-
-  setInterval(function grandir () {
-    // En mode non strict, la fonction grandir() définit `this`
-    // comme l'objet global et pas comme le `this` defini
-    // par le constructeur Personne().
-    this.age++;
-  }, 1000);
-}
-
-var p = new Personne();</pre>
-
-<p>Avec ECMAScript 3/5, ce problème a pu être résolu en affectant la valeur de <code>this</code> à une autre variable :</p>
-
-<pre class="brush: js">function Personne () {
-  var that = this;
-  that.age = 0;
-
-  setInterval(function grandir () {
-    // La fonction callback se réfère à la variable `that`
-    // qui est le contexte souhaité
-    that.age++;
-  }, 1000);
-}</pre>
-
-<p>Autrement, on aurait pu utiliser une <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Function/bind">fonction de liaison</a> afin que la bonne valeur <code>this</code> soit passée à la fonction <code>grandir</code>.</p>
-
-<p>Les fonctions fléchées ne créent pas de nouveau contexte, elles utilisent la valeur <code>this</code> de leur contexte. Aussi, si le mot-clé <code>this</code> est utilisé dans le corps de la fonction, le moteur recherchera la référence à cette valeur dans une portée parente. Le code qui suit fonctionne ainsi de la façon attendue car le <code>this</code> utilisé dans <code>setInterval</code> est le <code>this</code>de la portée de <code>Personne</code> :</p>
-
-<pre class="brush: js">function Personne () {
-  this.age = 0;
-
-  setInterval(() =&gt; {
-    this.age++;
-    // |this| fait bien référence à l'objet personne
-  }, 1000);
-}
-
-var p = new Personne();</pre>
-
-<h4 id="Liens_avec_le_mode_strict">Liens avec le mode strict</h4>
-
-<p>Ici <code>this</code> provient du contexte englobant, les règles du <a href="/fr/docs/Web/JavaScript/Reference/Fonctions_et_portee_des_fonctions/Strict_mode">mode strict</a> sont donc ignorées pour ce qui concerne <code>this</code>.</p>
-
-<pre class="brush: js">var f = () =&gt; {'use strict'; return this};
-f() === window; // ou l'objet global</pre>
-
-<p>Le reste des règles du mode strict sont appliquées normalement.</p>
-
-<h4 id="Appel_via_jsxref(Function.prototype.call())_ou_jsxref(Function.prototype.apply())">Appel via {{jsxref("Function.prototype.call()")}} ou {{jsxref("Function.prototype.apply()")}}</h4>
-
-<p>Étant donné que <code>this</code> provient du contexte englobant, si on invoque une fonction via la méthode <code>call</code> ou <code>apply</code>, cela ne passera que des arguments mais n’aura aucun effet sur <code>this</code> :</p>
-
-<pre class="brush: js">var ajouter = {
-  base: 1,
-
-  add : function (a) {
-    var f = v =&gt; v + this.base;
-    return f(a);
-  },
-
-  addViaCall: function (a) {
-    var f = v =&gt; v + this.base;
-    var b = {
-      base: 2
-    };
-    return f.call(b, a);
-  }
-};
-
-console.log(ajouter.add(1));
-// Cela affichera 2 dans la console
-
-console.log(ajouter.addViaCall(1));
-// Cela affichera toujours 2
-</pre>
-
-<h4 id="Pas_de_liaison_pour_arguments">Pas de liaison pour <code>arguments</code></h4>
-
-<p>Les fonctions fléchées n’exposent pas d’objet <a href="/fr/docs/Web/JavaScript/Reference/Fonctions/arguments"><code>arguments</code></a> : <code>arguments.length</code>, <code>arguments[0]</code>, <code>arguments[1]</code>, et autres ne font donc pas référence aux arguments passés à la fonction fléchés. Dans ce cas <code>arguments</code> est simplement une référence à la variable de même nom si elle est présente dans la portée englobante :</p>
-
-<pre class="brush: js">var arguments = [1, 2, 3];
-var arr = () =&gt; arguments[0];
-
-arr(); // 1
-
-function toto () {
-  var f = (i) =&gt; arguments[0] + i;
-  // lien implicite avec arguments de toto
-  return f(2);
-}
-
-toto(3); // 5</pre>
-
-<p>Les fonctions fléchées n’ont donc pas leur propre objet <code>arguments</code>, mais dans la plupart des cas, <a href="/fr/docs/Web/JavaScript/Reference/Fonctions/paramètres_du_reste">les paramètres du reste</a> représentent une bonne alternative :</p>
-
-<pre class="brush: js">function toto () {
-  var f = (...args) =&gt; args[0];
-  return f(2);
-}
-
-toto(1); // 2</pre>
-
-<h4 id="Les_fonctions_fléchées_comme_méthodes">Les fonctions fléchées comme méthodes</h4>
-
-<p>Comme indiqué précédemment, les fonctions fléchées sont mieux indiquées pour les fonctions qui ne sont pas des méthodes. Prenons un exemple pour illustrer ce point</p>
-
-<pre class="brush: js">'use strict';
-var objet = {
-  i: 10,
-  b: () =&gt; console.log(this.i, this),
-  c: function() {
-    console.log(this.i, this);
-  }
-}
-
-objet.b();
-// affiche undefined, Window (ou l'objet global de l'environnement)
-
-objet.c();
-// affiche 10, Object {...}</pre>
-
-<h4 id="Utiliser_prototype">Utiliser <code>prototype</code></h4>
-
-<p>Les fonctions fléchées ne possèdent pas de prototype :</p>
-
-<pre class="brush: js">var Toto = () =&gt; {};
-console.log(Toto.prototype);
-</pre>
-
-<h4 id="Utiliser_le_mot-clé_yield">Utiliser le mot-clé <code>yield</code></h4>
-
-<p>Le mot-clé <code><a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/yield">yield</a></code> ne peut pas être utilisé dans le corps d’une fonction fléchée (sauf si cela intervient dans une autre fonction, imbriquée dans la fonction fléchée). De fait, les fonctions fléchéees ne peuvent donc pas être utilisées comme générateurs.</p>
-
-<h4 id="Utiliser_le_mot-clé_new">Utiliser le mot-clé <code>new</code></h4>
-
-<p>Les fonctions fléchées ne peuvent pas être utilisées comme constructeurs et lèveront une exception si elles sont utilisées avec le mot-clé <code>new</code>.</p>
-
-<pre class="brush: js">var Toto = () =&gt; {};
-var toto = new Toto();
-// TypeError: Toto is not a constructor</pre>
-
-<h2 id="Gestion_du_corps_de_la_fonction">Gestion du corps de la fonction</h2>
-
-<p>Les fonctions fléchées peuvent avoir une syntaxe concise ou utiliser un bloc d’instructions classique. Cette dernière syntaxe n’a pas de valeur de retour implicite et il faut donc employer l’instruction <code>return</code>.</p>
-
-<pre class="brush: js">// méthode concise, retour implicite
-var fonction = x =&gt; x * x;
-
-// bloc classique, retour explicite
-var fonction = (x, y) =&gt; { return x + y; }
-</pre>
-
-<h2 id="Renvoyer_des_littéraux_objets">Renvoyer des littéraux objets</h2>
-
-<p>Attention à bien utiliser les parenthèses lorsqu’on souhaite renvoyer des objets avec des littéraux :</p>
-
-<pre class="brush: js">// fonction() renverra undefined !
-var fonction = () =&gt; { toto: 1 };
-
-// SyntaxError
-var fonction2 = () =&gt;  { toto: function () {} };
-</pre>
-
-<p>En effet, ici, l’analyse de l’expression trouve des blocs d’instructions au lieu de littéraux objets. Pour éviter cet effet indésirable, on pourra encadrer le littéral objet :</p>
-
-<pre class="brush: js">var fonction = () =&gt; ({ toto: 1 });</pre>
-
-<h2 id="Sauts_de_ligne">Sauts de ligne</h2>
-
-<p>Il ne peut pas y avoir de saut de ligne entre les paramètres et la flèche d’une fonction fléchée.</p>
-
-<pre class="brush: js">var func = ()
-            =&gt; 1; // SyntaxError: expected expression,
-                  //              got '=&gt;'
-</pre>
-
-<h2 id="Ordre_syntaxique">Ordre syntaxique</h2>
-
-<p>La flèche utilisée pour une fonction fléchée n’est pas un opérateur. Les fonctions fléchées ont des règles spécifiques quant à leur place dans la syntaxe et interagissent différemment de la précédence des opérateurs par rapport à une fonction classique :</p>
-
-<pre class="brush: js">let fonctionRappel;
-
-fonctionRappel = fonctionRappel || function () {};
-// OK
-
-fonctionRappel = fonctionRappel || () =&gt; {};
-// SyntaxError: invalid arrow-function arguments
-
-fonctionRappel = fonctionRappel || (() =&gt; {});
-// OK
-</pre>
-
-<h2 id="Exemples">Exemples</h2>
-
-<pre class="brush: js">// Une fonction fléchée vide renvoie undefined
-let vide = () =&gt; {};
-
-(() =&gt; "tototruc")()
-// exemple d'une fonction immédiatement
-// invoquée (IIFE en anglais) qui renvoie
-// "tototruc"
-
-var simple = a =&gt; a &gt; 15 ? 15 : a;
-simple(16); // 15
-simple(10); // 10
-
-var complexe = (a, b) =&gt; {
-    if (a &gt; b) {
-        return a;
-    } else {
-        return b;
-    }
-}
-
-var arr = [5, 6, 13, 0, 1, 18, 23];
-
-var sum = arr.reduce((a, b) =&gt; a + b);
-// 66
-
-var even = arr.filter(v =&gt; v % 2 == 0);
-// [6, 0, 18]
-
-var double = arr.map(v =&gt; v * 2);
-// [10, 12, 26, 0, 2, 36, 46]
-
-// On peut aussi construire des chaînes
-// de promesses plus concises
-promise.then(a =&gt; {
-    // ...
-}).then(b =&gt; {
-    // ...
-});
-
-// Cela permet de visualiser les
-// fonctions sans paramètres
-setTimeout( () =&gt; {
-    console.log("Et voilà");
-    setTimeout( () =&gt; {
-        console.log("ensuite…");
-    }, 1);
-}, 1);
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-arrow-function-definitions', 'Arrow Function Definitions')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-arrow-function-definitions', 'Arrow Function Definitions')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.functions.arrow_functions")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>L’article sur les fonctions fléchées présent sur <a href="https://tech.mozfr.org">https ://tech.mozfr.org</a> (l’article original en anglais est disponible <a href="https://hacks.mozilla.org/2015/06/es6-in-depth-arrow-functions/">ici</a>).</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/functions/arrow_functions/index.md b/files/fr/web/javascript/reference/functions/arrow_functions/index.md
new file mode 100644
index 0000000000..c40336f008
--- /dev/null
+++ b/files/fr/web/javascript/reference/functions/arrow_functions/index.md
@@ -0,0 +1,377 @@
+---
+title: Fonctions fléchées
+slug: Web/JavaScript/Reference/Functions/Arrow_functions
+tags:
+  - ECMAScript 2015
+  - Fonctions
+  - JavaScript
+  - Reference
+translation_of: Web/JavaScript/Reference/Functions/Arrow_functions
+original_slug: Web/JavaScript/Reference/Fonctions/Fonctions_fléchées
+---
+{{jsSidebar("Functions")}}
+
+Une **expression de fonction fléchée** (_arrow function_ en anglais) permet d’avoir une syntaxe plus courte que [les expressions de fonction](/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_function) et ne possède pas ses propres valeurs pour [`this`](/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_this), [`arguments`](/fr/docs/Web/JavaScript/Reference/Fonctions/arguments), [`super`](/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/super), ou [`new.target`](/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/new.target). Les fonctions fléchées sont souvent [anonymes](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Function/name) et ne sont pas destinées à être utilisées pour déclarer des méthodes.
+
+{{EmbedInteractiveExample("pages/js/functions-arrow.html")}}
+
+## Syntaxe
+
+    ([param] [, param]) => {
+       instructions
+    }
+
+    (param1, param2, …, param2) => expression
+    // équivalent à
+    (param1, param2, …, param2) => {
+      return expression;
+    }
+
+    // Parenthèses non nécessaires quand il n'y a qu'un seul argument
+    param => expression
+
+    // Une fonction sans paramètre peut s'écrire avec un couple
+    // de parenthèses
+    () => {
+      instructions
+    }
+
+    // Gestion des paramètres du reste et paramètres par défaut
+    (param1, param2, ...reste) => {
+      instructions
+    }
+    (param1 = valeurDefaut1, param2, …, paramN = valeurDefautN) => {
+      instructions
+    }
+
+    // Gestion de la décomposition pour la liste des paramètres
+    let f = ([a, b] = [1, 2], {x: c} = {x: a + b}) => a + b + c;
+    f();
+
+- `param`
+  - : Le nom d’un argument. S’il n'y a aucun argument, cela doit être indiqué par une paire de parenthèses `()`. S’il n'y a qu’un argument, les parenthèses ne sont pas nécessaires (ex. : `toto => 1`).
+- `instructions` ou `expression`
+  - : Plusieurs instructions doivent être encadrées par des accolades, {}. Une expression simple ne nécessite pas d’accolades. L’expression est également la valeur de retour implicite pour cette fonction.
+
+## Description
+
+Deux facteurs sont à l’origine de la conception des fonctions fléchées : une syntaxe plus courte et l’absence de `this` spécifique à la fonction. Sur ce dernier point, cela signifie qu’une fonction fléchée ne lie pas son propre {{jsxref("Opérateurs/L_opérateur_this","this")}} au sein de la fonction (il en va de même avec {{jsxref("Fonctions/arguments","arguments")}}, {{jsxref("Opérateurs/super","super")}} ou {{jsxref("Opérateurs/new.target","new.target")}}).
+
+> **Note :** Voir aussi l’article sur les fonctions fléchées présent sur <https://tech.mozfr.org/post/2015/06/10/ES6-en-details-%3A-les-fonctions-flechees> (l’article original en anglais est disponible [ici](https://hacks.mozilla.org/2015/06/es6-in-depth-arrow-functions/)).
+
+### Syntaxe plus courte
+
+Pour des aspects fonctionnels, la légèreté de la syntaxe est bienvenue. Par exemple :
+
+```js
+var a = [
+  "We're up all night 'til the sun",
+  "We're up all night to get some",
+  "We're up all night for good fun",
+  "We're up all night to get lucky"
+];
+
+// Sans la syntaxe des fonctions fléchées
+var a2 = a.map(function (s) { return s.length });
+// [31, 30, 31, 31]
+
+// Avec, on a quelque chose de plus concis
+var a3 = a.map( s => s.length);
+// [31, 30, 31, 31]
+```
+
+### Pas de `this` lié à la fonction
+
+Jusqu’a l’apparition des fonctions fléchées, chaque nouvelle fonction définissait son propre {{jsxref("Opérateurs/L_opérateur_this","this")}} :
+
+- un nouvel objet dans le cas d’un constructeur
+- `undefined` dans les appels de fonctions en [mode strict](/fr/docs/Web/JavaScript/Reference/Strict_mode)
+- l’objet courant si la fonction est appelée comme une méthode, etc.
+
+Cela a pu entraîner des confusions lorsqu’on utilisait un style de programmation orientée objet.
+
+```js
+function Personne () {
+  // Le constructeur Personne() définit `this` comme lui-même.
+  this.age = 0;
+
+  setInterval(function grandir () {
+    // En mode non strict, la fonction grandir() définit `this`
+    // comme l'objet global et pas comme le `this` defini
+    // par le constructeur Personne().
+    this.age++;
+  }, 1000);
+}
+
+var p = new Personne();
+```
+
+Avec ECMAScript 3/5, ce problème a pu être résolu en affectant la valeur de `this` à une autre variable :
+
+```js
+function Personne () {
+  var that = this;
+  that.age = 0;
+
+  setInterval(function grandir () {
+    // La fonction callback se réfère à la variable `that`
+    // qui est le contexte souhaité
+    that.age++;
+  }, 1000);
+}
+```
+
+Autrement, on aurait pu utiliser une [fonction de liaison](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Function/bind) afin que la bonne valeur `this` soit passée à la fonction `grandir`.
+
+Les fonctions fléchées ne créent pas de nouveau contexte, elles utilisent la valeur `this` de leur contexte. Aussi, si le mot-clé `this` est utilisé dans le corps de la fonction, le moteur recherchera la référence à cette valeur dans une portée parente. Le code qui suit fonctionne ainsi de la façon attendue car le `this` utilisé dans `setInterval` est le `this`de la portée de `Personne` :
+
+```js
+function Personne () {
+  this.age = 0;
+
+  setInterval(() => {
+    this.age++;
+    // |this| fait bien référence à l'objet personne
+  }, 1000);
+}
+
+var p = new Personne();
+```
+
+#### Liens avec le mode strict
+
+Ici `this` provient du contexte englobant, les règles du [mode strict](/fr/docs/Web/JavaScript/Reference/Fonctions_et_portee_des_fonctions/Strict_mode) sont donc ignorées pour ce qui concerne `this`.
+
+```js
+var f = () => {'use strict'; return this};
+f() === window; // ou l'objet global
+```
+
+Le reste des règles du mode strict sont appliquées normalement.
+
+#### Appel via {{jsxref("Function.prototype.call()")}} ou {{jsxref("Function.prototype.apply()")}}
+
+Étant donné que `this` provient du contexte englobant, si on invoque une fonction via la méthode `call` ou `apply`, cela ne passera que des arguments mais n’aura aucun effet sur `this` :
+
+```js
+var ajouter = {
+  base: 1,
+
+  add : function (a) {
+    var f = v => v + this.base;
+    return f(a);
+  },
+
+  addViaCall: function (a) {
+    var f = v => v + this.base;
+    var b = {
+      base: 2
+    };
+    return f.call(b, a);
+  }
+};
+
+console.log(ajouter.add(1));
+// Cela affichera 2 dans la console
+
+console.log(ajouter.addViaCall(1));
+// Cela affichera toujours 2
+```
+
+#### Pas de liaison pour `arguments`
+
+Les fonctions fléchées n’exposent pas d’objet [`arguments`](/fr/docs/Web/JavaScript/Reference/Fonctions/arguments) : `arguments.length`, `arguments[0]`, `arguments[1]`, et autres ne font donc pas référence aux arguments passés à la fonction fléchés. Dans ce cas `arguments` est simplement une référence à la variable de même nom si elle est présente dans la portée englobante :
+
+```js
+var arguments = [1, 2, 3];
+var arr = () => arguments[0];
+
+arr(); // 1
+
+function toto () {
+  var f = (i) => arguments[0] + i;
+  // lien implicite avec arguments de toto
+  return f(2);
+}
+
+toto(3); // 5
+```
+
+Les fonctions fléchées n’ont donc pas leur propre objet `arguments`, mais dans la plupart des cas, [les paramètres du reste](/fr/docs/Web/JavaScript/Reference/Fonctions/paramètres_du_reste) représentent une bonne alternative :
+
+```js
+function toto () {
+  var f = (...args) => args[0];
+  return f(2);
+}
+
+toto(1); // 2
+```
+
+#### Les fonctions fléchées comme méthodes
+
+Comme indiqué précédemment, les fonctions fléchées sont mieux indiquées pour les fonctions qui ne sont pas des méthodes. Prenons un exemple pour illustrer ce point
+
+```js
+'use strict';
+var objet = {
+  i: 10,
+  b: () => console.log(this.i, this),
+  c: function() {
+    console.log(this.i, this);
+  }
+}
+
+objet.b();
+// affiche undefined, Window (ou l'objet global de l'environnement)
+
+objet.c();
+// affiche 10, Object {...}
+```
+
+#### Utiliser `prototype`
+
+Les fonctions fléchées ne possèdent pas de prototype :
+
+```js
+var Toto = () => {};
+console.log(Toto.prototype);
+```
+
+#### Utiliser le mot-clé `yield`
+
+Le mot-clé [`yield`](/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/yield) ne peut pas être utilisé dans le corps d’une fonction fléchée (sauf si cela intervient dans une autre fonction, imbriquée dans la fonction fléchée). De fait, les fonctions fléchéees ne peuvent donc pas être utilisées comme générateurs.
+
+#### Utiliser le mot-clé `new`
+
+Les fonctions fléchées ne peuvent pas être utilisées comme constructeurs et lèveront une exception si elles sont utilisées avec le mot-clé `new`.
+
+```js
+var Toto = () => {};
+var toto = new Toto();
+// TypeError: Toto is not a constructor
+```
+
+## Gestion du corps de la fonction
+
+Les fonctions fléchées peuvent avoir une syntaxe concise ou utiliser un bloc d’instructions classique. Cette dernière syntaxe n’a pas de valeur de retour implicite et il faut donc employer l’instruction `return`.
+
+```js
+// méthode concise, retour implicite
+var fonction = x => x * x;
+
+// bloc classique, retour explicite
+var fonction = (x, y) => { return x + y; }
+```
+
+## Renvoyer des littéraux objets
+
+Attention à bien utiliser les parenthèses lorsqu’on souhaite renvoyer des objets avec des littéraux :
+
+```js
+// fonction() renverra undefined !
+var fonction = () => { toto: 1 };
+
+// SyntaxError
+var fonction2 = () =>  { toto: function () {} };
+```
+
+En effet, ici, l’analyse de l’expression trouve des blocs d’instructions au lieu de littéraux objets. Pour éviter cet effet indésirable, on pourra encadrer le littéral objet :
+
+```js
+var fonction = () => ({ toto: 1 });
+```
+
+## Sauts de ligne
+
+Il ne peut pas y avoir de saut de ligne entre les paramètres et la flèche d’une fonction fléchée.
+
+```js
+var func = ()
+            => 1; // SyntaxError: expected expression,
+                  //              got '=>'
+```
+
+## Ordre syntaxique
+
+La flèche utilisée pour une fonction fléchée n’est pas un opérateur. Les fonctions fléchées ont des règles spécifiques quant à leur place dans la syntaxe et interagissent différemment de la précédence des opérateurs par rapport à une fonction classique :
+
+```js
+let fonctionRappel;
+
+fonctionRappel = fonctionRappel || function () {};
+// OK
+
+fonctionRappel = fonctionRappel || () => {};
+// SyntaxError: invalid arrow-function arguments
+
+fonctionRappel = fonctionRappel || (() => {});
+// OK
+```
+
+## Exemples
+
+```js
+// Une fonction fléchée vide renvoie undefined
+let vide = () => {};
+
+(() => "tototruc")()
+// exemple d'une fonction immédiatement
+// invoquée (IIFE en anglais) qui renvoie
+// "tototruc"
+
+var simple = a => a > 15 ? 15 : a;
+simple(16); // 15
+simple(10); // 10
+
+var complexe = (a, b) => {
+    if (a > b) {
+        return a;
+    } else {
+        return b;
+    }
+}
+
+var arr = [5, 6, 13, 0, 1, 18, 23];
+
+var sum = arr.reduce((a, b) => a + b);
+// 66
+
+var even = arr.filter(v => v % 2 == 0);
+// [6, 0, 18]
+
+var double = arr.map(v => v * 2);
+// [10, 12, 26, 0, 2, 36, 46]
+
+// On peut aussi construire des chaînes
+// de promesses plus concises
+promise.then(a => {
+    // ...
+}).then(b => {
+    // ...
+});
+
+// Cela permet de visualiser les
+// fonctions sans paramètres
+setTimeout( () => {
+    console.log("Et voilà");
+    setTimeout( () => {
+        console.log("ensuite…");
+    }, 1);
+}, 1);
+```
+
+## Spécifications
+
+| Spécification                                                                                                        | État                         | Commentaires         |
+| -------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName('ES2015', '#sec-arrow-function-definitions', 'Arrow Function Definitions')}} | {{Spec2('ES2015')}}     | Définition initiale. |
+| {{SpecName('ESDraft', '#sec-arrow-function-definitions', 'Arrow Function Definitions')}} | {{Spec2('ESDraft')}} |                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.functions.arrow_functions")}}
+
+## Voir aussi
+
+- L’article sur les fonctions fléchées présent sur [https ://tech.mozfr.org](https://tech.mozfr.org) (l’article original en anglais est disponible [ici](https://hacks.mozilla.org/2015/06/es6-in-depth-arrow-functions/)).
diff --git a/files/fr/web/javascript/reference/functions/default_parameters/index.html b/files/fr/web/javascript/reference/functions/default_parameters/index.html
deleted file mode 100644
index abcdcae567..0000000000
--- a/files/fr/web/javascript/reference/functions/default_parameters/index.html
+++ /dev/null
@@ -1,211 +0,0 @@
----
-title: Valeurs par défaut des arguments
-slug: Web/JavaScript/Reference/Functions/Default_parameters
-tags:
-  - ECMAScript 2015
-  - Fonctions
-  - JavaScript
-  - Reference
-translation_of: Web/JavaScript/Reference/Functions/Default_parameters
-original_slug: Web/JavaScript/Reference/Fonctions/Valeurs_par_défaut_des_arguments
----
-<div>{{jsSidebar("Functions")}}</div>
-
-<p>Cette syntaxe permet d'initialiser des paramètres lors de l'appel de la fonction si aucune valeur n'est passée ou si c'est la valeur {{jsxref("undefined")}} qui est passée.</p>
-
-
-
-<div>{{EmbedInteractiveExample("pages/js/functions-default.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">function [<em>nom</em>]([<em>param1</em>[ = valeurParDéfaut1 ][, ..., <em>paramN</em>[ = valeurParDéfautN ]]]) {
-   instructions
-}
-</pre>
-
-<h2 id="Description">Description</h2>
-
-<p>En JavaScript, par défaut, la valeur des paramètres d'une fonction sera <code>undefined</code>. Malgré tout, il peut être assez utile de pouvoir définir d'autres valeurs par défaut.</p>
-
-<p>Auparavant, pour définir une valeur par défaut pour un paramètre, il fallait tester s'il valait <code>undefined</code> et lui affecter une valeur choisie le cas échéant. Dans l'exemple qui suit, le paramètre <code>b</code> n'a pas de valeur fournie lors de l'appel, aussi si on avait utilisé <code>undefined</code> dans la multiplication, la valeur retournée aurait été <code>NaN</code>. Aussi, dans la deuxième ligne du code, on prévoit ce cas :</p>
-
-<pre class="brush: js">function multiplier(a, b) {
-  var b = (typeof b !== 'undefined') ? b : 1;
-
-  return a * b;
-}
-
-multiplier(5, 2); // 10
-multiplier(5, 1); // 5
-multiplier(5);    // 5
-</pre>
-
-<p>Grâce aux paramètres par défaut qui existent depuis ECMAScript 2015 (ES6), on peut se passer de cette vérification et alléger le code de la fonction :</p>
-
-<pre class="brush: js">function multiplier(a, b = 1) {
-  return a * b;
-}
-
-multiplier(5, 2); // 10
-multiplier(5, 1); // 5
-multiplier(5, undefined); // 5
-multiplier(5); // 5</pre>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Passer_undefined_en_paramètre">Passer <code>undefined</code> en paramètre</h3>
-
-<p>Dans l'exemple qui suit, le deuxième appel à la fonction fait explicitement appel à <code>undefined</code>. La valeur par défaut sera utilisée, y compris dans ce cas (en revanche, ce ne serait pas vrai pour <code>null</code> ou les autres valeurs équivalentes à <code>false</code> dans un contexte booléen).</p>
-
-<pre class="brush: js">function test(num = 1) {
-  console.log(typeof num);
-}
-
-test();           // number (num vaut 1)
-test(undefined);  // number (num vaut 1 également)
-test("");         // string (num vaut "")
-test(null);       // object (num vaut null)
-</pre>
-
-<h3 id="Évaluation_à_l'appel">Évaluation à l'appel</h3>
-
-<p>L'argument par défaut est évalué à l'instant de l'appel. Ainsi, à la différence d'autres langages comme Python, un nouvel objet est créé à chaque appel de la fonction.</p>
-
-<pre class="brush: js">function append(valeur, tableau = []) {
-  tableau.push(valeur);
-  return tableau;
-}
-
-append(1); //[1]
-append(2); //[2], et non [1, 2]
-
-</pre>
-
-<p>Cela est également valable pour les fonctions et les variables</p>
-
-<pre class="brush: js">function appelQqc(truc = qqc()) { return truc }
-
-appelQqc(); //lève une ReferenceError
-
-let qqc = () =&gt; "machin"
-
-appelQqc(); // "machin"
-</pre>
-
-<h3 id="Les_paramètres_par_défaut_sont_disponibles_à_la_suite">Les paramètres par défaut sont disponibles à la suite</h3>
-
-<p>Les paramètres déjà rencontrés dans la définition peuvent être utilisés comme paramètres par défaut dans la suite de la définition :</p>
-
-<pre class="brush: js">function salutation(nom, salut, message = salut + ' ' + nom){
-    return [nom, salut, message];
-}
-
-salutation('David', 'Coucou');
-// ["David", "Coucou", "Coucou David"]
-
-salutation('David', 'Coucou', 'Bon anniversaire !');
-// ["David", "Coucou", "Bon anniversaire !"]</pre>
-
-<p>On peut utiliser cette fonctionnalité afin de gérer beaucoup de cas aux limites :</p>
-
-<pre class="brush: js">function go() {
-  return ":P"
-}
-
-function avecDéfaut(a, b = 5, c = b, d = go(), e = this,
-                      f = arguments, g = this.value) {
-  return [a,b,c,d,e,f,g];
-}
-function sansDéfaut(a, b, c, d, e, f, g){
-  switch(arguments.length){
-    case 0:
-      a
-    case 1:
-      b = 5
-    case 2:
-      c = b
-    case 3:
-      d = go();
-    case 4:
-      e = this
-    case 5:
-      f = arguments
-    case 6:
-      g = this.value;
-    default:
-  }
-  return [a,b,c,d,e,f,g];
-}
-
-avecDéfaut.call({value:"=^_^="});
-// [undefined, 5, 5, ":P", {value:"=^_^="}, arguments, "=^_^="]
-
-
-sansDéfaut.call({value:"=^_^="});
-// [undefined, 5, 5, ":P", {value:"=^_^="}, arguments, "=^_^="]
-</pre>
-
-<h3 id="Les_fonctions_définies_dans_le_corps_d'une_fonction">Les fonctions définies dans le corps d'une fonction</h3>
-
-<p>À partir de Gecko 33 {{geckoRelease(33)}}. Les fonctions déclarées dans le corps de la fonction ne peuvent pas servir comme valeurs par défaut, cela lèvera une exception {{jsxref("ReferenceError")}} (plus précisément une {{jsxref("TypeError")}} avec SpiderMonkey, voir le {{bug(1022967)}}). Les paramètres par défaut sont exécutés en premier, les déclarations de fonctions présentes dans le corps de la fonction sont évaluées ensuite.</p>
-
-<pre class="brush: js">// Ne fonctionnera pas, entraîne une ReferenceError.
-function f(a = go()) {
-  function go(){return ":P"}
-}
-</pre>
-
-<h3 id="Utilisation_de_paramètres_sans_valeur_par_défaut_après_les_paramètres_par_défaut">Utilisation de paramètres sans valeur par défaut après les paramètres par défaut</h3>
-
-<p>Avant Gecko 26 ({{geckoRelease(26)}}, le code suivant aurait entraîné une exception {{jsxref("SyntaxError")}}. Cela a été corrigé avec le bug {{bug(777060)}}. Les paramètres sont toujours ordonnés de gauche à droite et les valeurs par défaut sont surchargées s'ils viennent avant les autres paramètres :</p>
-
-<pre class="brush: js">function f(x=1, y) {
-  return [x, y];
-}
-
-f();  // [1, undefined]
-f(2); // [2, undefined]
-</pre>
-
-<h3 id="Paramètre_par_défaut_et_décomposition_des_paramètres">Paramètre par défaut et décomposition des paramètres</h3>
-
-<p>Il est possible d'utiliser les valeurs par défaut avec <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Affecter_par_décomposition">la syntaxe de décomposition</a> :</p>
-
-<pre class="brush: js">function f([x, y] = [1, 2], {z: z} = {z: 3}) {
-  return x + y + z;
-}
-
-f(); // 6</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-function-definitions', 'Function Definitions')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-function-definitions', 'Function Definitions')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.functions.default_parameters")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="https://wiki.ecmascript.org/doku.php?id=harmony:parameter_default_values">La proposition originale sur ecmascript.org</a></li>
-</ul>
diff --git a/files/fr/web/javascript/reference/functions/default_parameters/index.md b/files/fr/web/javascript/reference/functions/default_parameters/index.md
new file mode 100644
index 0000000000..92a5187cf6
--- /dev/null
+++ b/files/fr/web/javascript/reference/functions/default_parameters/index.md
@@ -0,0 +1,203 @@
+---
+title: Valeurs par défaut des arguments
+slug: Web/JavaScript/Reference/Functions/Default_parameters
+tags:
+  - ECMAScript 2015
+  - Fonctions
+  - JavaScript
+  - Reference
+translation_of: Web/JavaScript/Reference/Functions/Default_parameters
+original_slug: Web/JavaScript/Reference/Fonctions/Valeurs_par_défaut_des_arguments
+---
+{{jsSidebar("Functions")}}
+
+Cette syntaxe permet d'initialiser des paramètres lors de l'appel de la fonction si aucune valeur n'est passée ou si c'est la valeur {{jsxref("undefined")}} qui est passée.
+
+{{EmbedInteractiveExample("pages/js/functions-default.html")}}
+
+## Syntaxe
+
+    function [nom]([param1[ = valeurParDéfaut1 ][, ..., paramN[ = valeurParDéfautN ]]]) {
+       instructions
+    }
+
+## Description
+
+En JavaScript, par défaut, la valeur des paramètres d'une fonction sera `undefined`. Malgré tout, il peut être assez utile de pouvoir définir d'autres valeurs par défaut.
+
+Auparavant, pour définir une valeur par défaut pour un paramètre, il fallait tester s'il valait `undefined` et lui affecter une valeur choisie le cas échéant. Dans l'exemple qui suit, le paramètre `b` n'a pas de valeur fournie lors de l'appel, aussi si on avait utilisé `undefined` dans la multiplication, la valeur retournée aurait été `NaN`. Aussi, dans la deuxième ligne du code, on prévoit ce cas :
+
+```js
+function multiplier(a, b) {
+  var b = (typeof b !== 'undefined') ? b : 1;
+
+  return a * b;
+}
+
+multiplier(5, 2); // 10
+multiplier(5, 1); // 5
+multiplier(5);    // 5
+```
+
+Grâce aux paramètres par défaut qui existent depuis ECMAScript 2015 (ES6), on peut se passer de cette vérification et alléger le code de la fonction :
+
+```js
+function multiplier(a, b = 1) {
+  return a * b;
+}
+
+multiplier(5, 2); // 10
+multiplier(5, 1); // 5
+multiplier(5, undefined); // 5
+multiplier(5); // 5
+```
+
+## Exemples
+
+### Passer `undefined` en paramètre
+
+Dans l'exemple qui suit, le deuxième appel à la fonction fait explicitement appel à `undefined`. La valeur par défaut sera utilisée, y compris dans ce cas (en revanche, ce ne serait pas vrai pour `null` ou les autres valeurs équivalentes à `false` dans un contexte booléen).
+
+```js
+function test(num = 1) {
+  console.log(typeof num);
+}
+
+test();           // number (num vaut 1)
+test(undefined);  // number (num vaut 1 également)
+test("");         // string (num vaut "")
+test(null);       // object (num vaut null)
+```
+
+### Évaluation à l'appel
+
+L'argument par défaut est évalué à l'instant de l'appel. Ainsi, à la différence d'autres langages comme Python, un nouvel objet est créé à chaque appel de la fonction.
+
+```js
+function append(valeur, tableau = []) {
+  tableau.push(valeur);
+  return tableau;
+}
+
+append(1); //[1]
+append(2); //[2], et non [1, 2]
+```
+
+Cela est également valable pour les fonctions et les variables
+
+```js
+function appelQqc(truc = qqc()) { return truc }
+
+appelQqc(); //lève une ReferenceError
+
+let qqc = () => "machin"
+
+appelQqc(); // "machin"
+```
+
+### Les paramètres par défaut sont disponibles à la suite
+
+Les paramètres déjà rencontrés dans la définition peuvent être utilisés comme paramètres par défaut dans la suite de la définition :
+
+```js
+function salutation(nom, salut, message = salut + ' ' + nom){
+    return [nom, salut, message];
+}
+
+salutation('David', 'Coucou');
+// ["David", "Coucou", "Coucou David"]
+
+salutation('David', 'Coucou', 'Bon anniversaire !');
+// ["David", "Coucou", "Bon anniversaire !"]
+```
+
+On peut utiliser cette fonctionnalité afin de gérer beaucoup de cas aux limites :
+
+```js
+function go() {
+  return ":P"
+}
+
+function avecDéfaut(a, b = 5, c = b, d = go(), e = this,
+                      f = arguments, g = this.value) {
+  return [a,b,c,d,e,f,g];
+}
+function sansDéfaut(a, b, c, d, e, f, g){
+  switch(arguments.length){
+    case 0:
+      a
+    case 1:
+      b = 5
+    case 2:
+      c = b
+    case 3:
+      d = go();
+    case 4:
+      e = this
+    case 5:
+      f = arguments
+    case 6:
+      g = this.value;
+    default:
+  }
+  return [a,b,c,d,e,f,g];
+}
+
+avecDéfaut.call({value:"=^_^="});
+// [undefined, 5, 5, ":P", {value:"=^_^="}, arguments, "=^_^="]
+
+
+sansDéfaut.call({value:"=^_^="});
+// [undefined, 5, 5, ":P", {value:"=^_^="}, arguments, "=^_^="]
+```
+
+### Les fonctions définies dans le corps d'une fonction
+
+À partir de Gecko 33 {{geckoRelease(33)}}. Les fonctions déclarées dans le corps de la fonction ne peuvent pas servir comme valeurs par défaut, cela lèvera une exception {{jsxref("ReferenceError")}} (plus précisément une {{jsxref("TypeError")}} avec SpiderMonkey, voir le {{bug(1022967)}}). Les paramètres par défaut sont exécutés en premier, les déclarations de fonctions présentes dans le corps de la fonction sont évaluées ensuite.
+
+```js
+// Ne fonctionnera pas, entraîne une ReferenceError.
+function f(a = go()) {
+  function go(){return ":P"}
+}
+```
+
+### Utilisation de paramètres sans valeur par défaut après les paramètres par défaut
+
+Avant Gecko 26 ({{geckoRelease(26)}}, le code suivant aurait entraîné une exception {{jsxref("SyntaxError")}}. Cela a été corrigé avec le bug {{bug(777060)}}. Les paramètres sont toujours ordonnés de gauche à droite et les valeurs par défaut sont surchargées s'ils viennent avant les autres paramètres :
+
+```js
+function f(x=1, y) {
+  return [x, y];
+}
+
+f();  // [1, undefined]
+f(2); // [2, undefined]
+```
+
+### Paramètre par défaut et décomposition des paramètres
+
+Il est possible d'utiliser les valeurs par défaut avec [la syntaxe de décomposition](/fr/docs/Web/JavaScript/Reference/Opérateurs/Affecter_par_décomposition) :
+
+```js
+function f([x, y] = [1, 2], {z: z} = {z: 3}) {
+  return x + y + z;
+}
+
+f(); // 6
+```
+
+## Spécifications
+
+| Spécification                                                                                        | État                         | Commentaires         |
+| ---------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName('ES2015', '#sec-function-definitions', 'Function Definitions')}} | {{Spec2('ES2015')}}     | Définition initiale. |
+| {{SpecName('ESDraft', '#sec-function-definitions', 'Function Definitions')}} | {{Spec2('ESDraft')}} |                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.functions.default_parameters")}}
+
+## Voir aussi
+
+- [La proposition originale sur ecmascript.org](https://wiki.ecmascript.org/doku.php?id=harmony:parameter_default_values)
diff --git a/files/fr/web/javascript/reference/functions/get/index.html b/files/fr/web/javascript/reference/functions/get/index.html
deleted file mode 100644
index b999d2d36a..0000000000
--- a/files/fr/web/javascript/reference/functions/get/index.html
+++ /dev/null
@@ -1,177 +0,0 @@
----
-title: L'opérateur get
-slug: Web/JavaScript/Reference/Functions/get
-tags:
-  - ECMAScript 2015
-  - ECMAScript 5
-  - Functions
-  - JavaScript
-  - Reference
-translation_of: Web/JavaScript/Reference/Functions/get
-original_slug: Web/JavaScript/Reference/Fonctions/get
----
-<div>{{jsSidebar("Functions")}}</div>
-
-<p>La syntaxe <strong><code>get</code></strong> permet de lier une propriété d'un objet à une fonction qui sera appelée lorsqu'on accédera à la propriété.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/functions-getter.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">{get <em>prop</em>() { ... } }
-{get [<em>expression</em>]() { ... } }</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>prop</code></dt>
- <dd>Le nom de la propriété à lier à la fonction.</dd>
- <dt><code>expression</code></dt>
- <dd>Avec ECMAScript 2015, il est également possible d'utiliser des expressions renvoyant un nom de propriété calculé pour le lier à une fonction.</dd>
-</dl>
-
-<h2 id="Description">Description</h2>
-
-<p>Il est parfois utile de créer une propriété qui renvoie une valeur dynamique calculée, ou de ne pas avoir recours à l'appel explicite d'une méthode pour renvoyer le statut d'une variable interne. En JavaScript, il est possible de faire cela en utilisant un <em>accesseur</em>. Il n'est pas possible d'avoir simultanément un <em>accesseur</em> assimilé à une propriété et d'avoir cette propriété initialisée à une valeur, mais il est possible d'utiliser un <em>accesseur</em> et un {{jsxref("Fonctions/set","mutateur","",1)}} pour créer une sorte de pseudo-propriété.</p>
-
-<p>On notera que l'opérateur <code>get</code> :</p>
-
-<ul>
- <li>peut être identifié par un nombre ou une chaîne de caractères</li>
- <li>ne doit pas posséder de paramètre (lire la page <a class="external" href="https://whereswalden.com/2010/08/22/incompatible-es5-change-literal-getter-and-setter-functions-must-now-have-exactly-zero-or-one-arguments/" rel="external nofollow">Changement <abbr title="ECMAScript 5th edition">ES5</abbr> : les fonctions <em>d'accession</em> et <em>de mutation</em> littérales doivent avoir maintenant zéro ou un paramètre.</a> <em>(en anglais)</em> pour plus d'informations)</li>
- <li>ne doit pas apparaître dans un littéral objet avec un autre <code>get</code> ou une autre propriété avec le même identifiant (les codes suivants : <code>{ get x() { }, get x() { } }</code> et <code>{ x: ..., get x() { } }</code> sont interdits).</li>
-</ul>
-
-<p>Un <em>accesseur</em> peut être supprimé grâce à l'opérateur {{jsxref("Opérateurs/L_opérateur_delete","delete")}}.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Définir_un_accesseur_avec_l'opérateur_get">Définir un accesseur avec l'opérateur <code>get</code></h3>
-
-<p>Ce code va créer une pseudo-propriété <code>dernier</code> de l'objet <code>o</code> qui va retourner la dernière entrée du tableau <code>o.journal </code>:</p>
-
-<pre class="brush: js">var o = {
-  get dernier() {
-    if (this.journal.length &gt; 0) {
-      return this.journal[this.journal.length - 1];
-    }
-    else {
-      return null;
-    }
-  },
-  journal: ["toto","actu"]
-}
-console.log(o.dernier); // "actu"
-</pre>
-
-<p>Notez qu'essayer d'assigner à <code>dernier</code> une valeur ne le modifiera pas.</p>
-
-<h3 id="Supprimer_un_accesseur_avec_l'opérateur_delete">Supprimer un accesseur avec l'opérateur <code>delete</code></h3>
-
-<pre class="brush: js">delete o.dernier;
-</pre>
-
-<h3 id="Définir_un_accesseur_sur_des_objets_existants_grâce_à_defineProperty">Définir un accesseur sur des objets existants grâce à <code>defineProperty</code></h3>
-
-<p>Afin d'ajouter un accesseur à un objet qui existe déjà, on peut utiliser la méthode {{jsxref("Object.defineProperty()")}}.</p>
-
-<pre class="brush: js">var o = { a:0 }
-
-Object.defineProperty(o, "b", { get: function () { return this.a + 1; } });
-
-console.log(o.b) // Utilise l'accesseur qui génère a + 1 (qui correspond à 1)</pre>
-
-<h3 id="Utiliser_un_nom_de_propriété_calculé">Utiliser un nom de propriété calculé</h3>
-
-<pre class="brush: js">var expr = "toto";
-
-var obj = {
-  get [expr]() { return "truc"; }
-};
-
-console.log(obj.toto); // "truc"</pre>
-
-<h3 id="Accesseurs_mémoïsés">Accesseurs mémoïsés</h3>
-
-<p>Les accesseurs permettent de définir des propriétés sur un objet mais ils ne calculent pas la valeur de la propriété tant qu'il n'y a pas d'accès envers celle-ci. Un accesseur délègue le coût de calcul jusqu'au moment où la valeur est vraiment nécessaire (si cette dernière n'est jamais utilisée, cela ne coûte alors rien).</p>
-
-<p>Une technique supplémentaire pour optimiser ou retarder le calcul d'une valeur d'une propriété et de la mettre en cache pour les accès ultérieurs consiste à utiliser <strong>des accesseurs intelligents « <a href="https://fr.wikipedia.org/wiki/M%C3%A9mo%C3%AFsation">mémoïsés</a> »</strong>. La valeur est calculée lors du premier appel de l'accesseur puis est mise en cache afin que les appels ultérieurs renvoient la valeur en cache sans la recalculer. Cette méthode peut s'avérer utile dans plusieurs situations :</p>
-
-<ul>
- <li>Si le calcul de la valeur est coûteux (il consomme beaucoup de RAM ou de temps CPU, il crée de nouveaux <em>threads</em>, il utilise des fichiers distants, etc.).</li>
- <li>Si la valeur est utilisée plus tard ou, dans certains cas, n'est pas utilisée du tout.</li>
- <li>Si elle est utilisée plusieurs fois, il n'est pas nécessaire de la recalculer car sa valeur ne changera pas.</li>
-</ul>
-
-<p>Cela signifie qu'un tel accesseur ne doit pas être utilisé si la valeur peut être modifiée au cours du temps. En effet, avec la définition qu'on vient de lui donner, un tel accesseur ne recalculera pas la valeur.</p>
-
-<p>Dans l'exemple suivant, l'objet possède un accesseur en propriété propre. Lors de l'accès à la propriété, la propriété est retirée de l'objet puis réajoutée mais sous forme d'une propriété de donnée (et non d'un accesseur). Enfin, la valeur est renvoyée :</p>
-
-<pre class="brush: js">get notifier() {
-  delete this.notifier;
-  return this.notifier = document.getElementById("bookmarked-notification-anchor");
-},</pre>
-
-<p>Cet exemple est utilisé dans le code de Firefox, notamment dans le code du module XPCOMUtils.jsm qui définit la fonction <code><a href="/fr/docs/Mozilla/JavaScript_code_modules/XPCOMUtils.jsm#defineLazyGetter()">defineLazyGetter()</a></code>.</p>
-
-<h3 id="get_ou_defineProperty"><code>get</code> ou <code>defineProperty</code> ?</h3>
-
-<p>Bien que le mot-clé <code>get</code> et la méthode {{jsxref("Object.defineProperty()")}} aient des résultats similaires, il subsiste une différence lorsqu'on utilise <a href="/fr/docs/Web/JavaScript/Reference/Instructions/class">les classes</a>.</p>
-
-<p>Lorsqu'on utilise <code>get</code>, la propriété sera définie sur le prototype de l'objet. Avec {{jsxref("Object.defineProperty()")}}, la propriété sera définie sur l'instance à laquelle la méthode s'applique.</p>
-
-<pre class="brush: js">class Exemple {
-  get coucou() {
-    return 'monde';
-  }
-}
-
-const obj = new Exemple();
-console.log(obj.coucou);
-// "monde"
-console.log(Object.getOwnPropertyDescriptor(obj, 'coucou'));
-// undefined
-console.log(Object.getOwnPropertyDescriptor(Object.getPrototypeOf(obj), 'coucou'));
-// { configurable: true, enumerable: false, get: function get coucou() { return 'monde'; }, set: undefined }</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-11.1.5', 'Object Initializer')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td>Définition initiale</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-method-definitions', 'Method definitions')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td>Ajout des noms de propriétés calculés.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-method-definitions', 'Method definitions')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.functions.get")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><code><a href="/fr/docs/Web/JavaScript/Reference/Fonctions/set">set</a></code></li>
- <li>{{jsxref("Opérateurs/L_opérateur_delete", "delete")}}</li>
- <li>{{jsxref("Object.defineProperty()")}}</li>
- <li>{{jsxref("Object.defineGetter", "__defineGetter__")}}</li>
- <li>{{jsxref("Object.defineSetter", "__defineSetter__")}}</li>
- <li><a href="/fr/docs/Web/JavaScript/Guide/Utiliser_les_objets#D.C3.A9finir_des_getters_et_setters">Définir des accesseurs et mutateurs</a>, un chapitre du Guide JavaScript</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/functions/get/index.md b/files/fr/web/javascript/reference/functions/get/index.md
new file mode 100644
index 0000000000..76fa285ff7
--- /dev/null
+++ b/files/fr/web/javascript/reference/functions/get/index.md
@@ -0,0 +1,160 @@
+---
+title: L'opérateur get
+slug: Web/JavaScript/Reference/Functions/get
+tags:
+  - ECMAScript 2015
+  - ECMAScript 5
+  - Functions
+  - JavaScript
+  - Reference
+translation_of: Web/JavaScript/Reference/Functions/get
+original_slug: Web/JavaScript/Reference/Fonctions/get
+---
+{{jsSidebar("Functions")}}
+
+La syntaxe **`get`** permet de lier une propriété d'un objet à une fonction qui sera appelée lorsqu'on accédera à la propriété.
+
+{{EmbedInteractiveExample("pages/js/functions-getter.html")}}
+
+## Syntaxe
+
+    {get prop() { ... } }
+    {get [expression]() { ... } }
+
+### Paramètres
+
+- `prop`
+  - : Le nom de la propriété à lier à la fonction.
+- `expression`
+  - : Avec ECMAScript 2015, il est également possible d'utiliser des expressions renvoyant un nom de propriété calculé pour le lier à une fonction.
+
+## Description
+
+Il est parfois utile de créer une propriété qui renvoie une valeur dynamique calculée, ou de ne pas avoir recours à l'appel explicite d'une méthode pour renvoyer le statut d'une variable interne. En JavaScript, il est possible de faire cela en utilisant un _accesseur_. Il n'est pas possible d'avoir simultanément un _accesseur_ assimilé à une propriété et d'avoir cette propriété initialisée à une valeur, mais il est possible d'utiliser un _accesseur_ et un {{jsxref("Fonctions/set","mutateur","",1)}} pour créer une sorte de pseudo-propriété.
+
+On notera que l'opérateur `get` :
+
+- peut être identifié par un nombre ou une chaîne de caractères
+- ne doit pas posséder de paramètre (lire la page [Changement ES5 : les fonctions _d'accession_ et _de mutation_ littérales doivent avoir maintenant zéro ou un paramètre.](https://whereswalden.com/2010/08/22/incompatible-es5-change-literal-getter-and-setter-functions-must-now-have-exactly-zero-or-one-arguments/) _(en anglais)_ pour plus d'informations)
+- ne doit pas apparaître dans un littéral objet avec un autre `get` ou une autre propriété avec le même identifiant (les codes suivants : `{ get x() { }, get x() { } }` et `{ x: ..., get x() { } }` sont interdits).
+
+Un _accesseur_ peut être supprimé grâce à l'opérateur {{jsxref("Opérateurs/L_opérateur_delete","delete")}}.
+
+## Exemples
+
+### Définir un accesseur avec l'opérateur `get`
+
+Ce code va créer une pseudo-propriété `dernier` de l'objet `o` qui va retourner la dernière entrée du tableau `o.journal `:
+
+```js
+var o = {
+  get dernier() {
+    if (this.journal.length > 0) {
+      return this.journal[this.journal.length - 1];
+    }
+    else {
+      return null;
+    }
+  },
+  journal: ["toto","actu"]
+}
+console.log(o.dernier); // "actu"
+```
+
+Notez qu'essayer d'assigner à `dernier` une valeur ne le modifiera pas.
+
+### Supprimer un accesseur avec l'opérateur `delete`
+
+```js
+delete o.dernier;
+```
+
+### Définir un accesseur sur des objets existants grâce à `defineProperty`
+
+Afin d'ajouter un accesseur à un objet qui existe déjà, on peut utiliser la méthode {{jsxref("Object.defineProperty()")}}.
+
+```js
+var o = { a:0 }
+
+Object.defineProperty(o, "b", { get: function () { return this.a + 1; } });
+
+console.log(o.b) // Utilise l'accesseur qui génère a + 1 (qui correspond à 1)
+```
+
+### Utiliser un nom de propriété calculé
+
+```js
+var expr = "toto";
+
+var obj = {
+  get [expr]() { return "truc"; }
+};
+
+console.log(obj.toto); // "truc"
+```
+
+### Accesseurs mémoïsés
+
+Les accesseurs permettent de définir des propriétés sur un objet mais ils ne calculent pas la valeur de la propriété tant qu'il n'y a pas d'accès envers celle-ci. Un accesseur délègue le coût de calcul jusqu'au moment où la valeur est vraiment nécessaire (si cette dernière n'est jamais utilisée, cela ne coûte alors rien).
+
+Une technique supplémentaire pour optimiser ou retarder le calcul d'une valeur d'une propriété et de la mettre en cache pour les accès ultérieurs consiste à utiliser **des accesseurs intelligents « [mémoïsés](https://fr.wikipedia.org/wiki/M%C3%A9mo%C3%AFsation) »**. La valeur est calculée lors du premier appel de l'accesseur puis est mise en cache afin que les appels ultérieurs renvoient la valeur en cache sans la recalculer. Cette méthode peut s'avérer utile dans plusieurs situations :
+
+- Si le calcul de la valeur est coûteux (il consomme beaucoup de RAM ou de temps CPU, il crée de nouveaux _threads_, il utilise des fichiers distants, etc.).
+- Si la valeur est utilisée plus tard ou, dans certains cas, n'est pas utilisée du tout.
+- Si elle est utilisée plusieurs fois, il n'est pas nécessaire de la recalculer car sa valeur ne changera pas.
+
+Cela signifie qu'un tel accesseur ne doit pas être utilisé si la valeur peut être modifiée au cours du temps. En effet, avec la définition qu'on vient de lui donner, un tel accesseur ne recalculera pas la valeur.
+
+Dans l'exemple suivant, l'objet possède un accesseur en propriété propre. Lors de l'accès à la propriété, la propriété est retirée de l'objet puis réajoutée mais sous forme d'une propriété de donnée (et non d'un accesseur). Enfin, la valeur est renvoyée :
+
+```js
+get notifier() {
+  delete this.notifier;
+  return this.notifier = document.getElementById("bookmarked-notification-anchor");
+},
+```
+
+Cet exemple est utilisé dans le code de Firefox, notamment dans le code du module XPCOMUtils.jsm qui définit la fonction [`defineLazyGetter()`](</fr/docs/Mozilla/JavaScript_code_modules/XPCOMUtils.jsm#defineLazyGetter()>).
+
+### `get` ou `defineProperty` ?
+
+Bien que le mot-clé `get` et la méthode {{jsxref("Object.defineProperty()")}} aient des résultats similaires, il subsiste une différence lorsqu'on utilise [les classes](/fr/docs/Web/JavaScript/Reference/Instructions/class).
+
+Lorsqu'on utilise `get`, la propriété sera définie sur le prototype de l'objet. Avec {{jsxref("Object.defineProperty()")}}, la propriété sera définie sur l'instance à laquelle la méthode s'applique.
+
+```js
+class Exemple {
+  get coucou() {
+    return 'monde';
+  }
+}
+
+const obj = new Exemple();
+console.log(obj.coucou);
+// "monde"
+console.log(Object.getOwnPropertyDescriptor(obj, 'coucou'));
+// undefined
+console.log(Object.getOwnPropertyDescriptor(Object.getPrototypeOf(obj), 'coucou'));
+// { configurable: true, enumerable: false, get: function get coucou() { return 'monde'; }, set: undefined }
+```
+
+## Spécifications
+
+| Spécification                                                                                    | État                         | Commentaires                           |
+| ------------------------------------------------------------------------------------------------ | ---------------------------- | -------------------------------------- |
+| {{SpecName('ES5.1', '#sec-11.1.5', 'Object Initializer')}}                     | {{Spec2('ES5.1')}}     | Définition initiale                    |
+| {{SpecName('ES2015', '#sec-method-definitions', 'Method definitions')}} | {{Spec2('ES2015')}}     | Ajout des noms de propriétés calculés. |
+| {{SpecName('ESDraft', '#sec-method-definitions', 'Method definitions')}} | {{Spec2('ESDraft')}} |                                        |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.functions.get")}}
+
+## Voir aussi
+
+- [`set`](/fr/docs/Web/JavaScript/Reference/Fonctions/set)
+- {{jsxref("Opérateurs/L_opérateur_delete", "delete")}}
+- {{jsxref("Object.defineProperty()")}}
+- {{jsxref("Object.defineGetter", "__defineGetter__")}}
+- {{jsxref("Object.defineSetter", "__defineSetter__")}}
+- [Définir des accesseurs et mutateurs](/fr/docs/Web/JavaScript/Guide/Utiliser_les_objets#D.C3.A9finir_des_getters_et_setters), un chapitre du Guide JavaScript
diff --git a/files/fr/web/javascript/reference/functions/index.html b/files/fr/web/javascript/reference/functions/index.html
deleted file mode 100644
index cfdd7e95b1..0000000000
--- a/files/fr/web/javascript/reference/functions/index.html
+++ /dev/null
@@ -1,825 +0,0 @@
----
-title: Fonctions et portée des fonctions
-slug: Web/JavaScript/Reference/Functions
-tags:
-  - Function
-  - JavaScript
-  - Reference
-translation_of: Web/JavaScript/Reference/Functions
-original_slug: Web/JavaScript/Reference/Fonctions
----
-<div>{{jsSidebar("Functions")}}</div>
-
-<p>De manière générale, une fonction est un « sous-programme » qui peut être appelé par du code extérieur à la fonction (ou du code interne dans le cas d'une récursion). Comme le programme, une fonction est composée d'une suite d'instructions qui forment le <em>corps de la fonction</em>. Il est parfois possible de <em>passer</em> des valeurs à une fonction et une fonction peut éventuellement <em>retourner </em>(ou <em>renvoyer</em>) une valeur.</p>
-
-<p>En JavaScript, les fonctions sont des objets de première classe. Cela signifie qu'elles peuvent être manipulées et échangées, qu'elles peuvent avoir des propriétés et des méthodes, comme tous les autres objets JavaScript. Les fonctions sont des objets {{jsxref("Objets_globaux/Function","Function")}}.</p>
-
-<p>Pour plus d'informations et d'exemples, on pourra également consulter le <a href="/fr/docs/Web/JavaScript/Guide/Fonctions">chapitre du Guide JavaScript sur les fonctions.</a></p>
-
-<h2 id="Description">Description</h2>
-
-<p>Toute fonction JavaScript est en fait un objet <code>Function</code>. Voir la page {{jsxref("Objets_globaux/Function","Function")}} pour des informations sur les propriétés et les méthodes de ces objets.</p>
-
-<p>Afin de renvoyer une valeur, la fonction doit comporter une instruction {{jsxref("Instructions/return","return")}} qui définit la valeur à renvoyer (sauf dans le cas d'un <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object/constructor">constructeur</a> qui a été appelé avec le mot-clé {{jsxref("Opérateurs/L_opérateur_new")}}). Une fonction qui ne renvoie pas de valeur retourne {{jsxref("undefined")}}.</p>
-
-<p>Les paramètres donnés lors de l'appel d'une fonction sont appelés les <em>arguments</em> de la fonction. Les arguments sont passés <em>par valeur</em> (<em>by value </em>en anglais). Si la fonction modifie la valeur d'un argument, ce changement ne se répercute pas en dehors de la fonction. Il existe cependant les <em>références</em> d'objets qui sont aussi des valeurs mais qui possèdent la particularité suivante : si la fonction modifie les propriété de l'objet de la référence, ce(s) changement(s) seront perceptibles en dehors de la fonction. Prenons l'exemple suivant :</p>
-
-<pre class="brush: js"> /* Déclaration de la fonction 'maFonction' */
- function maFonction(monObjet)
- {
-   monObjet.marque = "Toyota";
- }
-
- /*
-  * Déclaration de la variable 'mavoiture';
-  * création et initialisation d'un nouvel objet;
-  * assigner une référence à 'mavoiture'
-  */
- var mavoiture = {
-   marque: "Honda",
-   modele: "Accord",
-   annee: 1998
- };
-
- /* Affiche 'Honda' */
- console.log(mavoiture.marque);
-
- /* Passer la référence de l'objet à la fonction */
- maFonction(mavoiture);
-
- /*
-  * Affiche 'Toyota' pour valeur de la propriété 'marque'
-  * de l'objet. C'est ce que la fonction a changé.
-  */
- console.log(mavoiture.marque);
-</pre>
-
-<p>Le mot-clé <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_this"><code>this</code></a> ne fait pas référence à la fonction en cours d'exécution. Il faut donc faire référence aux objets <code>Function</code> par leurs noms, et ce même au sein du corps de la fonction.</p>
-
-<h2 id="Définir_des_fonctions">Définir des fonctions</h2>
-
-<p>Il y a plusieurs façons de définir des fonctions</p>
-
-<h3 id="Déclarer_une_fonction_linstruction_function">Déclarer une fonction (l'instruction <code>function</code>)</h3>
-
-<p>Il existe une syntaxe spécifique pour la déclaration des fonctions (vous pouvez consulter la page de l'instruction {{jsxref("Instructions/function","function")}} pour plus de détails) :</p>
-
-<pre class="syntaxbox">function <em>nom</em>([<em>param</em>[, <em>param</em>[, ... <em>param</em>]]]) {
-   <em>instructions</em>
-}
-</pre>
-
-<dl>
- <dt><code>nom</code></dt>
- <dd>Le nom de la fonction.</dd>
- <dt><code>param</code></dt>
- <dd>Le nom d'un argument à passer à la fonction (une fonction pouvant avoir jusqu'à 255 arguments).</dd>
- <dt><code>instructions</code></dt>
- <dd>Les instructions qui forment le corps de la fonction.</dd>
-</dl>
-
-<h3 id="Utiliser_une_expression_de_fonction_lexpression_function">Utiliser une expression de fonction (l'expression <code>function</code>)</h3>
-
-<p>L'expression d'une fonction se fait d'une façon similaire à la déclaration (veuillez consulter la page de l'expression {{jsxref("Opérateurs/L_opérateur_function","function")}} pour plus d'informations) :</p>
-
-<pre class="syntaxbox">function [<em>nom</em>]([<em>param</em>] [, <em>param</em>] [..., <em>param</em>]) {
-   <em>instructions</em>
-}
-</pre>
-
-<dl>
- <dt><code>nom</code></dt>
- <dd>Le nom de la fonction. Il est facultatif, auquel cas la fonction devient une fonction anonyme.</dd>
- <dt><code>param</code></dt>
- <dd>Le nom d'un argument à passer à la fonction.</dd>
- <dt><code>instructions</code></dt>
- <dd>Les instructions qui forment le corps de la fonction.</dd>
-</dl>
-
-<p>Voici un exemple d'expression de fonction <strong>anonyme</strong> (il n'y a pas de nom utilisé) :</p>
-
-<pre class="brush: js">var maFonction = function() {
-  /* instructions */
-}</pre>
-
-<p>Il est également possible de fournir un nom lors de la définition afin de créer une expression de fonction <strong>nommée</strong> :</p>
-
-<pre class="brush: js">var maFonction = function fonctionNommée(){
-  /* instructions */
-}
-</pre>
-
-<p>L'un des bénéfices d'utiliser une expression de fonction nommée est que son nom sera utilisé dans la pile d'appel lors qu'on aura une erreur. Avec le nom de la fonction, il sera plus facile de repérer l'origine de l'erreur.</p>
-
-<p>Comme on peut le voir, ces deux derniers exemples ne commencent pas avec le mot-clé <code>function</code>. Les instructions qui déclarent des fonctions mais qui ne commencent pas avec <code>function</code> sont des expressions de fonction.</p>
-
-<p>Lorsque les fonctions sont utilisées une unique fois, on peut utiliser une <a href="/fr/docs/Glossaire/IIFE">« expression de fonction immédiatement invoquée » (ou plus généralement appelée <em>IIFE</em> pour <em>Immediately Invokable Function Expression</em> en anglais)</a>.</p>
-
-<pre class="brush: js">(function() {
-    /* instruction */
-})();</pre>
-
-<p>Les <em>IIFE</em> sont des expressions de fonction appelées dès que la fonction est déclarée.</p>
-
-<h3 id="Utiliser_une_déclaration_de_fonction_génératrice_linstruction_function*">Utiliser une déclaration de fonction génératrice (l'instruction <code>function*</code>)</h3>
-
-<p>Il existe une syntaxe spéciale pour déclarer des générateurs (voir la page sur l'instruction {{jsxref('Instructions/function*', 'function*')}} pour plus de détails) :</p>
-
-<pre class="syntaxbox">function* <em>nom</em>([<em>param</em>[, <em>param</em>[, ... <em>param</em>]]]) {
-   <em>instructions</em>
-}</pre>
-
-<dl>
- <dt><code>nom</code></dt>
- <dd>Le nom de la fonction.</dd>
- <dt><code>param</code></dt>
- <dd>Le nom d'un argument à passer à la fonction.</dd>
- <dt><code>instructions</code></dt>
- <dd>Les instructions qui forment le corps de la fonction.</dd>
-</dl>
-
-<h3 id="Utiliser_une_expression_de_générateur_lexpression_function*">Utiliser une expression de générateur (l'expression <code>function*</code>)</h3>
-
-<p>Une expression de générateur est similaire à une déclaration de fonction génératrice et possède presque la même syntaxe (pour plus de détails, consulter la page sur l'expression {{jsxref('Opérateurs/function*', 'function*')}}) :</p>
-
-<pre class="syntaxbox">function* [<em>nom</em>]([<em>param</em>[, <em>param</em>[, ... <em>param</em>]]]) {
-   <em>instructions</em>
-}</pre>
-
-<dl>
- <dt><code>nom</code></dt>
- <dd>Le nom de la fonction. Ce paramètre peut être omis, auquel cas la fonction sera une fonction anonyme.</dd>
- <dt><code>param</code></dt>
- <dd>Le nom d'un argument à passer à la fonction.</dd>
- <dt><code>instructions</code></dt>
- <dd>Les instructions qui composent le corps de la fonction.</dd>
-</dl>
-
-<h3 id="Utiliser_une_expression_de_fonction_fléchée_>">Utiliser une expression de fonction fléchée (=&gt;)</h3>
-
-<p>Une expression de fonction fléchée possède une syntaxe plus courte et est liée, de façon lexicale, à sa valeur (voir la page sur les <a href="/fr/docs/Web/JavaScript/Reference/Fonctions/Fonctions_fl%C3%A9ch%C3%A9es">fonctions fléchées</a> pour plus de détails) :</p>
-
-<pre class="syntaxbox">([param[, param]]) =&gt; {
-   instructions
-}
-
-param =&gt; expression
-</pre>
-
-<dl>
- <dt><code>param</code></dt>
- <dd>Le nom d'un argument. S'il n'y a pas d'arguments, cela doit être indiqué par <code>()</code>.  S'il y a un seul argument, les parenthèses ne sont pas obligatoires (par exemple :  <code>toto =&gt; 1</code>).</dd>
- <dt><code>instructions </code>ou<code> expression</code></dt>
- <dd>S'il y a plusieurs instructions, elles doivent être encadrées par des accolades. Une expression unique ne doit pas obligatoirement être entourée d'accolades. L'expression est également la valeur de retour implicite de la fonction.</dd>
-</dl>
-
-<h3 id="Le_constructeur_Function">Le constructeur <code>Function</code></h3>
-
-<div class="note">
-<p><strong>Note :</strong> L'utilisation du constructeur <code>Function</code> afin de créer des fonction n'est pas recommandée. En effet, il utilise une chaîne pour former le corps de la fonction et cela peut empêcher certaines optimisations du moteur JavaScript ainsi que provoquer d'autres problèmes.</p>
-</div>
-
-<p>Comme tous les autres objets, les objets {{jsxref("Function")}} peuvent être créés grâce à l'opérateur <code>new</code> :</p>
-
-<pre class="syntaxbox">new Function (<em>arg1</em>, <em>arg2</em>, ... <em>argN</em>, <em>corpsDeLaFonction</em>)
-</pre>
-
-<dl>
- <dt><code>arg1, arg2, ... argN</code></dt>
- <dd>Plusieurs (zéro ou plus) noms qui seront utilisés par la fonction comme noms d'arguments formels. Chaque nom doit être une chaîne de caractères valide au sens d'un identifiant JavaScript ou alors être une liste de telles chaînes séparées par des virgules. On aura les exemples suivants : "<code>x</code>", "<code>laValeur</code>", ou "<code>a,b</code>".</dd>
- <dt><code>corpsDeLaFonction</code></dt>
- <dd>Une chaîne de caractères contenant les instructions JavaScript définissant la fonction.</dd>
-</dl>
-
-<p>L'invocation du constructeur <code>Function</code> en tant que fonction (sans utiliser l'opérateur <code>new</code>) a le même effet que son invocation en tant que constructeur.</p>
-
-<h3 id="Le_constructeur_GeneratorFunction">Le constructeur <code>GeneratorFunction</code></h3>
-
-<div class="note">
-<p><strong>Note :</strong> <code>GeneratorFunction</code> n'est pas un objet global mais pourrait être obtenu à partir de l'instance de la fonction génératrice (voir la page {{jsxref("GeneratorFunction")}} pour plus de détails).</p>
-</div>
-
-<div class="note">
-<p><strong>Note :</strong> Le constructeur <code>GeneratorFunction</code> ne doit pas être utilisé pour créer des fonctions. En effet, il utilise une chaîne pour former le corps de la fonction et cela peut empêcher certaines optimisations du moteur JavaScript ainsi que provoquer d'autres problèmes.</p>
-</div>
-
-<p>Comme pour tous les autres objets, les objets {{jsxref("GeneratorFunction")}} peuvent être créés grâce à l'opérateur <code>new</code> :</p>
-
-<pre class="syntaxbox">new GeneratorFunction (<em>arg1</em>, <em>arg2</em>, ... <em>argN</em>, <em>corpsFonction</em>)</pre>
-
-<dl>
- <dt><code>arg1, arg2, ... arg<em>N</em></code></dt>
- <dd>Plusieurs (zéro ou plus) noms qui seront utilisés par la fonction comme noms d'arguments formels. Chaque nom doit être une chaîne de caractères valide au sens d'un identifiant JavaScript ou alors être une liste de telles chaînes séparées par des virgules. On aura les exemples suivants : "<code>x</code>", "<code>theValue</code>", ou "<code>a,b</code>".</dd>
- <dt><code>corpsFonction</code></dt>
- <dd>Une chaîne de caractères contenant les instructions JavaScript définissant la fonction.</dd>
-</dl>
-
-<h2 id="Les_paramètres_dune_fonction">Les paramètres d'une fonction</h2>
-
-<h3 id="Les_paramètres_par_défaut">Les paramètres par défaut</h3>
-
-<p>Les paramètres par défaut permettent aux paramètres déclarés d'une fonction de pouvoir être initialisés avec des valeurs par défaut s'ils ne sont pas fournis à la fonction ou s'ils valent <code>undefined</code>. Pour plus de détails, voir la page de la référence sur <a href="/fr/docs/Web/JavaScript/Reference/Fonctions/Valeurs_par_défaut_des_arguments">les paramètres par défaut</a>.</p>
-
-<h3 id="Les_paramètres_du_reste">Les paramètres du reste</h3>
-
-<p>Cette syntaxe permet de représenter un nombre indéfini d'arguments sous forme d'un tableau. Pour plus de détails, voir la page sur <a href="/fr/docs/Web/JavaScript/Reference/Fonctions/param%C3%A8tres_du_reste">les paramètres du reste</a>.</p>
-
-<h2 id="Lobjet_arguments">L'objet <code>arguments</code></h2>
-
-<p>Il est possible de faire référence aux arguments d'une fonction au sein de cette fonction en utilisant l'objet <code>arguments</code>. Consulter la page <a href="/fr/docs/Web/JavaScript/Reference/Fonctions/arguments">arguments</a> pour plus d'informations.</p>
-
-<ul>
- <li><code><a href="/fr/docs/Web/JavaScript/Reference/Fonctions/arguments">arguments</a></code> : Un objet semblable à un tableau qui contient les arguments passés à la fonction qui est exécutée.</li>
- <li><code><a href="/fr/docs/Web/JavaScript/Reference/Fonctions/arguments/callee">arguments.callee</a></code> {{Deprecated_inline}} : La fonction en cours d'exécution.</li>
- <li><code><a href="/fr/docs/Web/JavaScript/Reference/Fonctions/arguments/caller">arguments.caller</a></code> {{Obsolete_inline}} : La fonction qui a appelé la fonction courante.</li>
- <li><code><a href="/fr/docs/Web/JavaScript/Reference/Fonctions/arguments/length">arguments.length</a></code> : Le nombre d'arguments passés à la fonction.</li>
-</ul>
-
-<h2 id="Récursion">Récursion</h2>
-
-<p>Une fonction peut faire référence à elle-même et s'appeler elle-même. Il y a trois façons pour qu'une fonction fasse appel à elle-même :</p>
-
-<ol>
- <li>le nom de la fonction</li>
- <li><code><a href="/fr/docs/Web/JavaScript/Reference/Fonctions/arguments/callee">arguments.callee</a></code></li>
- <li>une variable interne faisant référence à la fonction</li>
-</ol>
-
-<p>Avec l'exemple suivant :</p>
-
-<pre class="brush: js">var truc = function toto() {
-   // instructions
-};
-</pre>
-
-<p>Ce qui suit sera équivalent au sein de la fonction :</p>
-
-<ol>
- <li><code>toto()</code></li>
- <li><code>arguments.callee()</code></li>
- <li><code>truc()</code></li>
-</ol>
-
-<p>Une fonction qui s'appelle elle-même est appelée une fonction récursive. D'une certaine manière, une récursion est semblable à une boucle. Une récursion et une boucle exécutent le même code plusieurs fois et s'appuient sur une condition (afin d'éviter une boucle infinie, ou plutôt une récursion infinie ici). Ainsi la boucle suivante :</p>
-
-<pre class="brush: js">var x = 0;
-// "x &lt; 10" est la condition de la boucle
-while (x &lt; 10) {
-   // faire des choses
-   x++;
-}
-</pre>
-
-<p>peut être convertie en une fonction récursive et un appel à cette fonction :</p>
-
-<pre class="brush: js">function boucle(x) {
-   // "x &gt;= 10" est la condition de sortie
-   // (et équivaut à "!(x &lt; 10)")
-   if (x &gt;= 10)
-      return;
-   // faire des choses
-   boucle(x + 1); // l'appel récursif
-}
-boucle(0);
-</pre>
-
-<p>Cependant, certains algorithmes ne peuvent pas être traduits sous forme de boucles itératives. Ainsi, obtenir tous les nœuds d'un arbre (par exemple le DOM), est beaucoup plus facile à faire de manière récursive.</p>
-
-<pre class="brush: js">function parcoursArbre(noeud) {
-   if (noeud == null) //
-      return;
-   // faire quelque chose avec le noeud
-   for (var i = 0; i &lt; noeud.childNodes.length; i++) {
-      parcoursArbre(noeud.childNodes[i]);
-   }
-}
-</pre>
-
-<p>Par rapport à la fonction <code>boucle</code>, chaque appel récursif enchaîne ici plusieurs appels récursifs successifs.</p>
-
-<p>Il est théoriquement possible de convertir tout algorithme récursif en un algorithme non-récursif. Cependant, la logique du problème est souvent beaucoup plus complexe et l'on doit faire recours à une pile pour le résoudre. Mais la récursion n'est en fait rien d'autre que l'utilisation d'une pile : la pile de la fonction.</p>
-
-<p>La comportement de la récursion en tant que pile peut être observée avec cet exemple :</p>
-
-<pre class="brush: js">function truc(i) {
-   if (i &lt; 0)
-      return;
-   console.log('début :' + i);
-   toto(i - 1);
-   console.log('fin :' + i);
-}
-truc(3);
-</pre>
-
-<p>Elle produira le résultat suivant :</p>
-
-<pre class="brush: js">début :3
-début :2
-début :1
-début :0
-fin :0
-fin :1
-fin :2
-fin :3
-</pre>
-
-<h2 id="Fonctions_imbriquées_et_fermetures">Fonctions imbriquées et fermetures</h2>
-
-<p>Il est possible d'imbriquer une fonction au sein d'une fonction. La fonction imbriquée (interne) est privée par rapport à la fonction (externe) qui la contient. Cela forme ce qu'on appelle une fermeture (<em>closure</em> en anglais).</p>
-
-<p>Une fermeture est une expression (généralement une fonction) possédant des variables libres ainsi qu'un environnement qui lie ces variable (autrement dit qui « ferme » l'expression).</p>
-
-<p>Étant donné qu'une fonction imbriquée est une fermeture, cela signifie que la fonction imbriquée peut « hériter » des arguments et des variables de la fonction qui la contient. En d'autres termes, la fonction interne contient la portée de la fonction externe.</p>
-
-<p>Pour résumer :</p>
-
-<ul>
- <li>on ne peut accéder à la fonction interne seulement avec des instructions contenues dans la fonction externe,</li>
-</ul>
-
-<ul>
- <li>la fonction interne est une fermeture : la fonction interne peut utiliser des arguments et des variables de la fonction externe alors que la fonction externe ne peut pas utiliser de variables et d'arguments de la fonction interne.</li>
-</ul>
-
-<p>L'exemple suivant, montre le cas de fonctions imbriquées :</p>
-
-<pre class="brush: js">function ajouteCarres(a,b) {
-   function carre(x) {
-      return x * x;
-   }
-   return carre(a) + carre(b);
-}
-var a = ajouteCarres(2,3); // renvoie 13
-var b = ajouteCarres(3,4); // renvoie 25
-var c = ajouteCarres(4,5); // renvoie 41
-</pre>
-
-<p>Étant donné que la fonction interne est une fermeture, il est possible d'appeler la fonction externe et de définir des arguments pour la fonction externe mais aussi pour la fonction interne :</p>
-
-<pre class="brush: js">function externe(x) {
-   function interne(y) {
-      return x + y;
-   }
-   return interne;
-}
-var fn_interne = externe(3);
-var resultat = fn_interne(5); // renvoie 8
-
-var resultat1 = externe(3)(5); // renvoie 8
-</pre>
-
-<h3 id="Conservation_des_variables">Conservation des variables</h3>
-
-<p>On voit alors que <code>x</code> est conservé lorsqu'<code>interne</code> est renvoyé. Une fermeture doit conserver les arguments et les variables au sein de toutes les portées auxquelles elle fait référence. Étant donné qu'éventuellement, chaque appel fournira des arguments différents, une nouvelle fermeture est créée pour chaque appel externe. La mémoire peut donc être libérée seulement lorsque <code>inside</code> n'est plus accessible.</p>
-
-<p>Cela n'est pas différent du stockage de références avec d'autres objets, mais ça reste plus délicat à observer puisqu'on ne peut inspecter ou définir soi-même les références en question.</p>
-
-<h3 id="Imbrication_multiple_de_fonctions">Imbrication multiple de fonctions</h3>
-
-<p>On peut imbriquer plusieurs fonctions : une fonction (A) contien une fonction (B) qui contient une fonction (C). Ici les fonctions B et C forment des fermetures et aisni B peut accéder à A et C peut accéder à B. On peut donc en déduire, puisque C accède à B qui accède à A que C peut accéder à A. On voit donc que les fermetures peuvent contenir différentes portées. Elles peuvent, récursivement, contenir la portée des fonctions qui la contiennent. Ce mécanisme est appelé « chaînage de portée »  (<em>scope chaining</em> en anglais). (Cette dénomination sera expliquée par la suite.)</p>
-
-<p>On peut l'observer avec l'exemple suivant :</p>
-
-<pre class="brush: js">function A(x) {
-   function B(y) {
-      function C(z) {
-         console.log(x + y + z);
-      }
-      C(3);
-   }
-   B(2);
-}
-A(1); // crée un message d'alerte avec 6 (= 1 + 2 + 3)
-</pre>
-
-<p>Dans cet exemple, C accède à la variable y de B et à la variable x de A. Cela est possible parce que :</p>
-
-<ol>
- <li><code>B</code> est une fermeture qui contient <code>A</code>, autrement dit <code>B</code> peut accéder aux arguments et aux variables de <code>A</code></li>
- <li><code>C</code> est une fermeture qui contient <code>B</code></li>
- <li>Étant donné que la fermeture de <code>B</code> contient <code>A</code> et que celle de <code>C</code> contient <code>B</code>, <code>C</code> peut accéder à la fois aux arguments et variables de <code>B</code> <em>et</em> <code>A</code>. Autrement dit, <code>C</code> <em>enchaîne les portées de </em> <code>B</code> et <code>A</code> dans cet ordre.</li>
-</ol>
-
-<p>La réciproque n'est pas vraie. <code>A</code> ne peut avoir accès à <code>C</code>, parce que <code>A</code> ne peut accéder ni aux variables ni aux arguments de <code>B</code>, or <code>C</code> est une variable de <code>B. C</code> est donc privé et seulement pour <code>B</code>.</p>
-
-<h3 id="Conflits_de_noms">Conflits de noms</h3>
-
-<p>Lorsque deux arguments ou variables appartenant aux portées d'une fermeture ont le même nom, il y a un <em>conflit de noms</em>. La portée la plus interne l'emportera par rapport à la portée la plus externe. C'est ce qu'on appelle la chaîne de portée (<em>scope chain</em> en anglais). Le premier maillon de cette chaîne est la portée la plus interne tandis que le dernier maillon est représenté par la portée la plus externe. Regardons l'exemple suivant :</p>
-
-<pre class="brush: js">function externe() {
-   var x = 10;
-   function interne(x) {
-      return x;
-   }
-   return interne;
-}
-resultat = externe()(20); // renvoie 20 et non pas 10
-</pre>
-
-<p>Le conflit de nom apparaît avec l'instruction <code>return x</code> et vient de la dénomination commune de l'argument <code>x </code>de la fonction<code> interne</code> et la variable <code>x </code>de la fonction <code>externe</code>. La chaîne de portée est, pour cet exemple : {<code>interne</code>, <code>externe</code>, objet globalt}. On voit alors que le  <code>x</code> de la fonction interne l'emporte sur le <code>x </code>de la fonction externe. 20 (<code>x</code> de la fonction <code>interne</code>) est donc renvoyé plutôt que 10 (<code>x</code> de la fonction <code>externe</code>).</p>
-
-<h2 id="Définition_des_méthodes">Définition des méthodes</h2>
-
-<h3 id="Les_accesseurs_et_mutateurs_getter_et_setter">Les accesseurs et mutateurs (<em>getter</em> et <em>setter</em>)</h3>
-
-<p>Il est possible de définir des méthodes qui sont accesseurs ou des mutateurs sur n'importe quel objet qui peut avoir de nouvelles propriétés. La syntaxe utilisée pour définir les <em>getters</em> et <em>setters</em> est celle utilisée avec les littéraux objets.</p>
-
-<dl>
- <dt><a href="/fr/docs/Web/JavaScript/Reference/Fonctions/get">get</a></dt>
- <dd>
- <p>Permet de lier une propriété d'un objet à une fonction qui sera appelée lorsqu'on accèdera à la propriété.</p>
- </dd>
- <dt><a href="/fr/docs/Web/JavaScript/Reference/Fonctions/set">set</a></dt>
- <dd>Permet de lier une propriété d'un objet à une fonction qui sera appelée lorsqu'on tentera de modifier cette propriété.</dd>
-</dl>
-
-<h3 id="Syntaxe_des_définitions_de_méthode_ECMAScript_2015">Syntaxe des définitions de méthode ECMAScript <strong>2015</strong></h3>
-
-<p>Avec ECMAScript 2015, il est possible de définir des méthodes de façon plus concise (à la façon de ce qui est déjà possible pour les getters et setters). Voir la page sur <a href="/fr/docs/Web/JavaScript/Reference/Fonctions/Définition_de_méthode">les définitions de méthodes</a> pour plus d'informations.</p>
-
-<pre class="brush: js">var obj = {
-  toto() {},
-  truc() {}
-};</pre>
-
-<h2 id="Constructeur_déclaration_expression">Constructeur, déclaration, expression ?</h2>
-
-<p>Comparons les exemples suivants :</p>
-
-<ol>
- <li>une fonction définie grâce au constructeur <code>Function</code> assignée à la variable <code>multiplier</code>
-
-  <pre class="brush: js">var multiplier = new Function("x", "y", "return x * y;");
-</pre>
- </li>
- <li>une déclaration de fonction d'une fonction appelée <code>multiplier</code>
-  <pre class="brush: js">function multiplier(x, y) {
-   return x * y;
-}
-</pre>
- </li>
- <li>une expression de fonction d'une fonction anonyme assignée à la variable <code>multiplier</code>
-  <pre class="brush: js">var multiplier = function(x, y) {
-   return x * y;
-};
-</pre>
- </li>
- <li>une expression de fonction d'une fonction nommée <code>fonction_nom</code> assignée à la variable <code>multiplier</code>
-  <pre class="brush: js">var multiplier = function function_nom(x, y) {
-   return x * y;
-};
-</pre>
- </li>
-</ol>
-
-<p>Tous ces exemples effectuent à peu près la même chose, mais différent sur quelques points :</p>
-
-<ul>
- <li>Il y a une distinction entre le nom de la fonction et la variable à laquelle elle est affectée :
-  <ul>
-   <li>le nom de la fonction ne peut être changé alors que la variable à laquelle la fonction a été assignée peut être réassignée.</li>
-   <li>le nom de la fonction ne peut-être utilisé qu'à l'intérieur du corps de la fonction. Toute tentative d'utilisation en dehors du corps de la fonction entraînera une erreur (ou <code>undefined</code> si le nom de la fonction a été déclaré auparavant avec une instruction <code>var</code>). Ainsi :
-    <pre class="brush: js">var y = function x() {};
-console.log(x); // renvoie une erreur
-</pre>
-
-    <p>Le nom de la fonction apparaît également lorsque la fonction est sérialisée avec la <a href="/fr/docs/JavaScript/Reference/R%C3%A9f%C3%A9rence_JavaScript/Objets_globaux/Function/toString">méthode toString de l'objet <code>Function</code></a>.</p>
-
-    <p>La variable à laquelle est assignée la fonction est seulement limitée par rapport à la portée. La portée au sein de laquelle la fonction est déclarée est donc garantie d'être dans la portée de la variable.</p>
-   </li>
-   <li>Comme le montre le quatrième exemple, le nom de la fonction peut être différent du nom de la variable à laquelle a été assignée la fonction. Les deux noms n'ont aucune relation entre eux.</li>
-  </ul>
- </li>
- <li>Une déclaration de fonction peut aussi créer une variable avec le même nom que la fonction. Ainsi, contrairement une expression de fonction, une déclaration de fonction permet d'accéder à la fonction grâce à son nom au sein de la portée dans laquelle elle a été définie :
-  <pre class="brush: js">function x() {}
-console.log(x); // affichera la fonction x sérialisée en une chaîne de caractères
-</pre>
-
-  <p>L'exemple qui suit montre que les noms de fonctions ne sont par liées aux variables auxquelles sont assignées les fonctions. Si une variable de fonction est assignée à une autre valeur, elle aura toujours le même nom de fonction :</p>
-
-  <pre class="brush: js">function toto() {}
-console.log(toto); // message affichant la chaine de caractères "toto"
-var truc = toto;
-console.log(truc); // message affichant la chaine de caractères "toto"
-</pre>
- </li>
- <li>Une fonction définie grâce à « <code>new Function »</code> n'aura pas de nom de fonction. Cependant, le moteur JavaScript <a href="/fr/docs/SpiderMonkey">SpiderMonkey</a>, la forme sérialisée de la fonction apparaît comme si la fonction avait le nom « anonymous ». Le code <code>console.log(new Function())</code> produira :
-  <pre class="brush: js">function anonymous() {
-}
-</pre>
-
-  <p>La fonction n'ayant pas de nom effectif, <code>anonymous</code> n'est pas une variable à laquelle on pourra accéder au sein de la fonction. Par exemple, le code qui suit produira une erreur :</p>
-
-  <pre class="brush: js">var toto = new Function("console.log(anonymous);");
-toto();
-</pre>
- </li>
- <li>À la différence des fonctions définies par les expressions de fonction ou par le constructeur <code>Function</code>, une fonction définie par une déclaration de fonction pourra être utilisée avant la déclaration. Ainsi :
-  <pre class="brush: js">toto(); // affichera TOTO !
-function toto() {
-   console.log('TOTO !');
-}
-</pre>
- </li>
- <li>Une fonction définie par une expression de fonction hérite de la portée courante. La fonction forme donc une fermeture. En revanche, les fonctions définies par le constructeur <code>Function</code> n'héritent que de la portée globale (portée héritée par toutes les fonctions).</li>
- <li>Les fonctions définies par les expressions et les déclarations de fonctions ne sont analysées (parsées) qu'une seule fois. Celles définies grâce au constructeur <code>Function</code> ne le sont pas. Cela signifie que la chaîne de caractère représentant le corps de la fonction doit être analysée à chaque fois qu'elle est évaluée. Bien qu'une expression de fonction crée obligatoirement une fermeture, le corps de la fonction n'est pas parsé à nouveau. Les expressions de fonctions sont donc plus rapides que « <code>new Function(...)</code> ». Il faut donc éviter le constructeur <code>Function</code> autant que possible.<br>
-  Il faut cependant noter que les expressions et les déclarations imbriquées au sein d'une chaîne de caractère pour un constructeur <code>Function</code> ne sont analysées qu'une seule fois. On aura l'exemple suivant :
-  <pre class="brush: js">var toto = (new Function("var truc = \'TOTO !\';\nreturn(function() {\n\tconsole.log(truc);\n});"))();
-toto(); //La partie « function() {\n\tconsole.log(truc);\n} » de la chaîne de caractères n'est pas analysée à nouveau.</pre>
- </li>
-</ul>
-
-<p>Une déclaration de fonction peut très facilement (et souvent involontairement) être transformée en une expression de fonction. Une déclaration de fonction cesse d'en être une lorsque :</p>
-
-<ul>
- <li>elle fait partie d'une expression</li>
- <li>ou elle n'est plus un « élément source » de la fonction ou du script. Un « élément source » est une instruction non-imbriquée du script ou d'un corps de fonction.
-  <pre class="brush: js">var x = 0;                 // élément source
-if (x === 0) {              // élément source
-   x = 10;                 // pas un élément source
-   function titi() {}      // pas un élément source
-}
-function toto() {          // élément source
-   var y = 20;             // élément source
-   function truc() {}      // élément source
-   while (y === 10) {       // élément source
-      function machin() {} // pas un élément source
-      y++;                 // pas un élément source
-   }
-}
-</pre>
- </li>
-</ul>
-
-<h3 id="Exemples">Exemples :</h3>
-
-<ul>
- <li>
-  <pre class="brush: js">// déclaration de fonction
-function toto() {}
-
-// expression de fonction
-(function truc() {})
-
-// expression de fonction
-var x = function bonjour() {}</pre>
- </li>
- <li>
-  <pre class="brush: js">if (x) {
-   // expression de fonction
-   function monde() {}
-}
-</pre>
- </li>
- <li>
-  <pre class="brush: js">// déclaration de fonction
-function a() {
-   // déclaration de fonction
-   function b() {}
-   if (0) {
-      // expression de fonction
-      function c() {}
-   }
-}
-</pre>
- </li>
-</ul>
-
-<h2 id="Définir_une_fonction_de_façon_conditionnelle">Définir une fonction de façon conditionnelle</h2>
-
-<p>Il est possible de définir des fonctions de manière conditionnelle en utilisant soit : //function statements// (une extension autorisée par le standard <a href="https://www.ecma-international.org/publications/standards/Ecma-262.htm">ECMA-262 Edition 3</a>) soit le constructeur <code>Function</code>. Il faut noter que de telles instructions ne sont plus autorisées dans le standard <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=609832">ES5 strict</a>. Il faut également savoir que cela ne fonctionne pas de manière homogène sur les différents navigateurs. Il est donc déconseillé d'utiliser cette fonctionnalité.</p>
-
-<p>Dans le script qui suit, la fonction <code>zero</code> n'est jamais définie et ne peut donc être appelée car le test « <code>if (0)</code> » est toujours faux :</p>
-
-<pre class="brush: js">if (0) {
-   function zero() {
-      console.log("C'est zero.");
-   }
-}
-</pre>
-
-<p>Si le script est changé et que la condition devient « <code>if (1)</code> », la fonction <code>zero</code> sera alors définie.</p>
-
-<p>Bien que cette fonction ressemble à une déclaration de fonction, il s'agit en fait d'une expression (ou instruction) de fonction, car celle-ci est imbriquée au sein d'une autre instruction. (Consulter le paragraphe précédent pour une explication à ce sujet).</p>
-
-<div class="note">
-<p><strong>Note :</strong> À la différence de <a href="/fr/docs/SpiderMonkey">SpiderMonkey</a>, certains moteurs JavaScript traîtent incorrectement les expressions de fonction avec un nom comme des définitions de fonction. Cela conduirait à la définition de la fonction <code>zero</code> et ce même avec la condition <code>if</code> valant faux. Une façon plus sûre de définir des fonctions de manière conditionnelle est de définir la fonction et de l'assigner à une variable :</p>
-
-<pre class="brush: js">if (0) {
-   var zero = function() {
-      console.log("C'est zero");
-   }
-}
-</pre>
-</div>
-
-<h2 id="Les_fonctions_en_tant_que_gestionnaires_dévénements">Les fonctions en tant que gestionnaires d'événements</h2>
-
-<p>En JavaScript, les gestionnaires d'événements <a href="/fr/docs/DOM">DOM</a> (<em>event handlers</em> en anglais) sont des fonctions (différentes des objets contenant une méthode <code>handleEvent</code> dans d'autres langages de liaison avec le DOM -<em>binding languages</em> en anglais). Les fontions ont l'objet <a href="/fr/docs/DOM/event">event</a> comme seul et unique paramètre. Comme tous les autres paramètres, si l'objet événement, n'a pas besoin d'être utilisé, il peut être absent de la liste des paramètres formels.</p>
-
-<p>Les objets d'un document HTML susceptibles de recevoir des événements peuvent être par exemple : <code>window</code> (objets<code> Window</code>, y compris les objets frames), <code>document</code> (les objets <code>HTMLDocument</code>), et les éléments (les objets <code>Element</code>). Au sein du <a href="https://www.w3.org/TR/DOM-Level-2-HTML/">DOM HTML</a>, les objets recevant des événements possède des propriétés gestionnaires d'événements. Ces propriétés sont les noms des événements en minuscules préfixés par « on » (par exemple <code>onfocus</code>). Une autre façon, plus fiable, d'ajouter des auditeurs d'événements, est offert par les <a href="https://www.w3.org/TR/DOM-Level-2-Events/">événements DOM de niveau 2</a>.</p>
-
-<p>Note : Les événements font partie de la logique DOM et non de celle de JavaScript. (JavaScript n'est qu'un langage permettant de manipuler le DOM.)</p>
-
-<p>L'exemple suivant assigne une fonction au gestionnaire de l'événement « focus ».</p>
-
-<pre class="brush: js">window.onfocus = function() {
-   document.body.style.backgroundColor = 'white';
-};
-</pre>
-
-<p>Si une fonction est assignée à une variable, il est possible d'assigner la variable à un gestionnaire d'événement. Le fragment de code qui suit assigne une fonction à la variable <code>setBGColor</code>.</p>
-
-<pre class="brush: js">var setBGColor = new Function("document.body.style.backgroundColor = 'white';");
-</pre>
-
-<p>Il est alors possible d'utiliser cette variable pour assigner une fonction à un gestionnaire d'événement. Cela peut se faire de plusieurs manières, en voici deux décrites ici :</p>
-
-<ol>
- <li>écrire dans les propriétés de l'évément DOM HTML
-  <pre class="brush: js">document.form1.colorButton.onclick = setBGColor;
-</pre>
- </li>
- <li>l'attribut de l'événement HTML
-  <pre class="brush: html">&lt;input type="button"
-   value="Changer la couleur de fond"
-   onclick="setBGColor();"/&gt;
-</pre>
-
-  <p>Un gestionnaire d'événement défini de cette manière sera une fonction, nommée selon l'attribut, encadré du code spécifique nécessaire. C'est pourquoi les parenthèses sont ici nécessaires (<code>setBGColor()</code> et non pas <code>setBGColor</code>). Cela est équivalent à :</p>
-
-  <pre class="brush: js">document.form1.colorButton.onclick = function onclick(event) {
-   setBGColor();
-};
-</pre>
-
-  <p>Il faut noter la façon dont l'objet événement est passé à la fonction en tant que paramètre <code>event</code>. Cela permet au code d'utiliser l'objet <code>Event</code> :</p>
-
-  <pre class="brush: html">&lt;input ...
-    onclick="console.log(event.target.tagName);"/&gt;
-</pre>
- </li>
-</ol>
-
-<p>Tout comme les autres propriétés faisant référence à une fonction, le gestionnaire d'événement peut agir come une méthode et <code>this</code> ferait alors référence à l'élément contenant le gestionnaire d'événement. Dans l'exemple suivant, la fonction à laquelle <code>onfocus</code> fait référence est appelée avec <code>this</code> qui a la valeur <code>window</code>.</p>
-
-<pre class="brush: js">window.onfocus();
-</pre>
-
-<p>Une erreur faite souvent lorsque l'on commence à utiliser JavaScript est d'ajouter des parenthèses et/ou des paramètres à la fin de la variable. Cela revient à appeler le gestionnaire d'événement lorsqu'on l'assigne. Le fait d'ajouter ces parenthèses assignera la valeur de retour du gestionnaire d'événement. Cette valeur sera souvent<code> undefined </code>dans ces cas alors que l'on aurait souhaité obtenir le gestionnaire d'événement.</p>
-
-<pre class="brush: js">document.form1.button1.onclick = setBGColor();
-</pre>
-
-<p>Afin de passer des paramètres à un gestionnaire d'événements, le gestionnaire doit être enveloppé dans une autre fonction, comme dans l'exemple suivant :</p>
-
-<pre class="brush: js">document.form1.button1.onclick = function() {
-   setBGColor('une valeur');
-};
-</pre>
-
-<h2 id="Les_fonctions_de_bloc">Les fonctions de bloc</h2>
-
-<p>En <a href="/fr/docs/Web/JavaScript/Reference/Strict_mode">mode strict</a>, à partir d'ES2015 (ES6), la portée des fonctions définies dans un bloc est limitée à ce bloc. Avant ES2015, il était interdit d'utiliser les fonctions de bloc en mode strict..</p>
-
-<pre class="brush: js">'use strict';
-
-function f() {
-  return 1;
-}
-
-{
-  function f() {
-    return 2;
-  }
-}
-
-f() === 1; // true
-
-// f() === 2 en mode non-strict
-</pre>
-
-<h3 id="Les_fonctions_de_bloc_dans_du_code_non-strict">Les fonctions de bloc dans du code non-strict</h3>
-
-<p>Non.</p>
-
-<p>Dans du code non-strict, les déclarations de fonctions placées dans des blocs peuvent se comporter de façon étrange :</p>
-
-<pre class="brush: js">if (onDevraitDéfinirZéro) {
-   function zéro() { // DANGER: risque de compatibilité
-      console.log("Voici zéro.");
-   }
-}
-</pre>
-
-<p>ES2015 indique que si <code>onDevraitDéfinirZéro</code> vaut <code>false</code>, <code>zéro</code> ne devrait jamais être défini car le bloc n'est jamais exécuté. En revanche, c'est une nouveauté liée à cette version du standard, non spécifiée auparavant. Certains navigateurs définissent <code>zéro</code> que le bloc soit exécuté ou non.</p>
-
-<p>En <a href="/fr/docs/Web/JavaScript/Reference/Strict_mode">mode strict</a>, tous les navigateurs qui prennent en charge ES2015 gère cela de la même façon : <code>zéro</code> est uniquement défini si <code>onDevraitDéfinirZéro</code> vaut <code>true</code> et uniquement dans la portée du bloc induit par <code>if</code>.</p>
-
-<p>Une méthode plus sûre est d'utiliser des expressions de fonction :</p>
-
-<pre class="brush: js">var zéro;
-if (0) {
-   zéro = function() {
-      console.log("Voici zéro.");
-   };
-}
-</pre>
-
-<h2 id="Exemples_2">Exemples</h2>
-
-<h3 id="Renvoyer_un_nombre_formaté">Renvoyer un nombre formaté</h3>
-
-<p>La fonction qui suit renvoie une chaîne de caractères contenant la représentation formatée d'un nombre avec un certain nombre de zéros préfixant le nombre.</p>
-
-<pre class="brush: js">// Cette fonction renvoie une chaîne de caractères complétée par un préfixe composé de zéros
-function padZeros(num, totalLen) {
-   var numStr = num.toString();             // On initialise la valeur à renvoyer en chaîne de caractères
-   var numZeros = totalLen - numStr.length; // On calcule le nombre de zéros
-   for (var i = 1; i &lt;= numZeros; i++) {
-      numStr = "0" + numStr;
-   }
-   return numStr;
-}
-</pre>
-
-<p>Les instructions qui suivent utilisent cette fonction</p>
-
-<pre class="brush: js">var resultat;
-resultat = padZeros(42,4); // renvoie "0042"
-resultat = padZeros(42,2); // renvoie "42"
-resultat = padZeros(5,4);  // renvoie "0005"
-</pre>
-
-<h3 id="Déterminer_si_une_fonction_existe">Déterminer si une fonction existe</h3>
-
-<p>Il est possible de déterminer si oui ou non une fonction existe en utilisant l'opérateur <code>typeof</code>. Dans l'exemple qui suit, on teste pour savoir si l'objet<code> window</code> possède une propriété appelé <code>noFunc</code> qui serait une fonction. Si c'est le cas, elle sera utilisée, sinon on fera autre chose.</p>
-
-<pre class="brush: js"> if ('function' === typeof window.noFunc) {
-   // utilisation de noFunc()
- } else {
-   // faire autre chose
- }
-</pre>
-
-<p>Il est à noter que, dans le test <code>if</code>, on utilise une référence à <code>noFunc</code> - il n'y a pas de parenthèses après le nom de la fonction, la fonction n'est donc pas appelée.</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES1')}}</td>
-   <td>{{Spec2('ES1')}}</td>
-   <td>Définition initiale. Implémentée avec JavaScript 1.0</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-13', 'Function Definition')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-function-definitions', 'Function definitions')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td>Nouveautés : fonctions fléchées, générateurs, paramètres par défaut, paramètres du reste</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#', 'function*')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-arrow-function-definitions', 'Arrow Function Definitions')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.functions")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>L'instruction {{jsxref("Instructions/function", "function")}}</li>
- <li>L'expression {{jsxref("Opérateurs/L_opérateur_function", "function")}}</li>
- <li>L'instruction {{jsxref("Instructions/function*", "function*")}}</li>
- <li>L'expression {{jsxref("Opérateurs/function*", "function*")}}</li>
- <li>{{jsxref("Function")}}</li>
- <li>{{jsxref("GeneratorFunction")}}</li>
- <li>{{jsxref("Fonctions/Fonctions_fléchées", "Les fonctions fléchées")}}</li>
- <li>{{jsxref("Fonctions/Valeurs_par_défaut_des_arguments", "Les paramètres par défaut","",1)}}</li>
- <li>{{jsxref("Fonctions/paramètres_du_reste", "Les paramètres du reste","",1)}}</li>
- <li>L'objet {{jsxref("Fonctions/arguments", "arguments")}}</li>
- <li>{{jsxref("Fonctions/get", "getter")}}</li>
- <li>{{jsxref("Fonctions/set", "setter")}}</li>
- <li>{{jsxref("Fonctions/Définition_de_méthode", "Les définitions de méthodes","",1)}}</li>
- <li><a href="/fr/docs/Web/JavaScript/Reference/Fonctions">Fonctions et portée des fonctions</a></li>
-</ul>
diff --git a/files/fr/web/javascript/reference/functions/index.md b/files/fr/web/javascript/reference/functions/index.md
new file mode 100644
index 0000000000..90e9f5aa72
--- /dev/null
+++ b/files/fr/web/javascript/reference/functions/index.md
@@ -0,0 +1,800 @@
+---
+title: Fonctions et portée des fonctions
+slug: Web/JavaScript/Reference/Functions
+tags:
+  - Function
+  - JavaScript
+  - Reference
+translation_of: Web/JavaScript/Reference/Functions
+original_slug: Web/JavaScript/Reference/Fonctions
+---
+{{jsSidebar("Functions")}}
+
+De manière générale, une fonction est un « sous-programme » qui peut être appelé par du code extérieur à la fonction (ou du code interne dans le cas d'une récursion). Comme le programme, une fonction est composée d'une suite d'instructions qui forment le _corps de la fonction_. Il est parfois possible de _passer_ des valeurs à une fonction et une fonction peut éventuellement _retourner_ (ou _renvoyer_) une valeur.
+
+En JavaScript, les fonctions sont des objets de première classe. Cela signifie qu'elles peuvent être manipulées et échangées, qu'elles peuvent avoir des propriétés et des méthodes, comme tous les autres objets JavaScript. Les fonctions sont des objets {{jsxref("Objets_globaux/Function","Function")}}.
+
+Pour plus d'informations et d'exemples, on pourra également consulter le [chapitre du Guide JavaScript sur les fonctions.](/fr/docs/Web/JavaScript/Guide/Fonctions)
+
+## Description
+
+Toute fonction JavaScript est en fait un objet `Function`. Voir la page {{jsxref("Objets_globaux/Function","Function")}} pour des informations sur les propriétés et les méthodes de ces objets.
+
+Afin de renvoyer une valeur, la fonction doit comporter une instruction {{jsxref("Instructions/return","return")}} qui définit la valeur à renvoyer (sauf dans le cas d'un [constructeur](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object/constructor) qui a été appelé avec le mot-clé {{jsxref("Opérateurs/L_opérateur_new")}}). Une fonction qui ne renvoie pas de valeur retourne {{jsxref("undefined")}}.
+
+Les paramètres donnés lors de l'appel d'une fonction sont appelés les _arguments_ de la fonction. Les arguments sont passés _par valeur_ (_by value_ en anglais). Si la fonction modifie la valeur d'un argument, ce changement ne se répercute pas en dehors de la fonction. Il existe cependant les _références_ d'objets qui sont aussi des valeurs mais qui possèdent la particularité suivante : si la fonction modifie les propriété de l'objet de la référence, ce(s) changement(s) seront perceptibles en dehors de la fonction. Prenons l'exemple suivant :
+
+```js
+ /* Déclaration de la fonction 'maFonction' */
+ function maFonction(monObjet)
+ {
+   monObjet.marque = "Toyota";
+ }
+
+ /*
+  * Déclaration de la variable 'mavoiture';
+  * création et initialisation d'un nouvel objet;
+  * assigner une référence à 'mavoiture'
+  */
+ var mavoiture = {
+   marque: "Honda",
+   modele: "Accord",
+   annee: 1998
+ };
+
+ /* Affiche 'Honda' */
+ console.log(mavoiture.marque);
+
+ /* Passer la référence de l'objet à la fonction */
+ maFonction(mavoiture);
+
+ /*
+  * Affiche 'Toyota' pour valeur de la propriété 'marque'
+  * de l'objet. C'est ce que la fonction a changé.
+  */
+ console.log(mavoiture.marque);
+```
+
+Le mot-clé [`this`](/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_this) ne fait pas référence à la fonction en cours d'exécution. Il faut donc faire référence aux objets `Function` par leurs noms, et ce même au sein du corps de la fonction.
+
+## Définir des fonctions
+
+Il y a plusieurs façons de définir des fonctions
+
+### Déclarer une fonction (l'instruction `function`)
+
+Il existe une syntaxe spécifique pour la déclaration des fonctions (vous pouvez consulter la page de l'instruction {{jsxref("Instructions/function","function")}} pour plus de détails) :
+
+    function nom([param[, param[, ... param]]]) {
+       instructions
+    }
+
+- `nom`
+  - : Le nom de la fonction.
+- `param`
+  - : Le nom d'un argument à passer à la fonction (une fonction pouvant avoir jusqu'à 255 arguments).
+- `instructions`
+  - : Les instructions qui forment le corps de la fonction.
+
+### Utiliser une expression de fonction (l'expression `function`)
+
+L'expression d'une fonction se fait d'une façon similaire à la déclaration (veuillez consulter la page de l'expression {{jsxref("Opérateurs/L_opérateur_function","function")}} pour plus d'informations) :
+
+    function [nom]([param] [, param] [..., param]) {
+       instructions
+    }
+
+- `nom`
+  - : Le nom de la fonction. Il est facultatif, auquel cas la fonction devient une fonction anonyme.
+- `param`
+  - : Le nom d'un argument à passer à la fonction.
+- `instructions`
+  - : Les instructions qui forment le corps de la fonction.
+
+Voici un exemple d'expression de fonction **anonyme** (il n'y a pas de nom utilisé) :
+
+```js
+var maFonction = function() {
+  /* instructions */
+}
+```
+
+Il est également possible de fournir un nom lors de la définition afin de créer une expression de fonction **nommée** :
+
+```js
+var maFonction = function fonctionNommée(){
+  /* instructions */
+}
+```
+
+L'un des bénéfices d'utiliser une expression de fonction nommée est que son nom sera utilisé dans la pile d'appel lors qu'on aura une erreur. Avec le nom de la fonction, il sera plus facile de repérer l'origine de l'erreur.
+
+Comme on peut le voir, ces deux derniers exemples ne commencent pas avec le mot-clé `function`. Les instructions qui déclarent des fonctions mais qui ne commencent pas avec `function` sont des expressions de fonction.
+
+Lorsque les fonctions sont utilisées une unique fois, on peut utiliser une [« expression de fonction immédiatement invoquée » (ou plus généralement appelée _IIFE_ pour _Immediately Invokable Function Expression_ en anglais)](/fr/docs/Glossaire/IIFE).
+
+```js
+(function() {
+    /* instruction */
+})();
+```
+
+Les _IIFE_ sont des expressions de fonction appelées dès que la fonction est déclarée.
+
+### Utiliser une déclaration de fonction génératrice (l'instruction `function*`)
+
+Il existe une syntaxe spéciale pour déclarer des générateurs (voir la page sur l'instruction {{jsxref('Instructions/function*', 'function*')}} pour plus de détails) :
+
+    function* nom([param[, param[, ... param]]]) {
+       instructions
+    }
+
+- `nom`
+  - : Le nom de la fonction.
+- `param`
+  - : Le nom d'un argument à passer à la fonction.
+- `instructions`
+  - : Les instructions qui forment le corps de la fonction.
+
+### Utiliser une expression de générateur (l'expression `function*`)
+
+Une expression de générateur est similaire à une déclaration de fonction génératrice et possède presque la même syntaxe (pour plus de détails, consulter la page sur l'expression {{jsxref('Opérateurs/function*', 'function*')}}) :
+
+    function* [nom]([param[, param[, ... param]]]) {
+       instructions
+    }
+
+- `nom`
+  - : Le nom de la fonction. Ce paramètre peut être omis, auquel cas la fonction sera une fonction anonyme.
+- `param`
+  - : Le nom d'un argument à passer à la fonction.
+- `instructions`
+  - : Les instructions qui composent le corps de la fonction.
+
+### Utiliser une expression de fonction fléchée (=>)
+
+Une expression de fonction fléchée possède une syntaxe plus courte et est liée, de façon lexicale, à sa valeur (voir la page sur les [fonctions fléchées](/fr/docs/Web/JavaScript/Reference/Fonctions/Fonctions_fl%C3%A9ch%C3%A9es) pour plus de détails) :
+
+    ([param[, param]]) => {
+       instructions
+    }
+
+    param => expression
+
+- `param`
+  - : Le nom d'un argument. S'il n'y a pas d'arguments, cela doit être indiqué par `()`.  S'il y a un seul argument, les parenthèses ne sont pas obligatoires (par exemple :  `toto => 1`).
+- `instructions `ou` expression`
+  - : S'il y a plusieurs instructions, elles doivent être encadrées par des accolades. Une expression unique ne doit pas obligatoirement être entourée d'accolades. L'expression est également la valeur de retour implicite de la fonction.
+
+### Le constructeur `Function`
+
+> **Note :** L'utilisation du constructeur `Function` afin de créer des fonction n'est pas recommandée. En effet, il utilise une chaîne pour former le corps de la fonction et cela peut empêcher certaines optimisations du moteur JavaScript ainsi que provoquer d'autres problèmes.
+
+Comme tous les autres objets, les objets {{jsxref("Function")}} peuvent être créés grâce à l'opérateur `new` :
+
+    new Function (arg1, arg2, ... argN, corpsDeLaFonction)
+
+- `arg1, arg2, ... argN`
+  - : Plusieurs (zéro ou plus) noms qui seront utilisés par la fonction comme noms d'arguments formels. Chaque nom doit être une chaîne de caractères valide au sens d'un identifiant JavaScript ou alors être une liste de telles chaînes séparées par des virgules. On aura les exemples suivants : "`x`", "`laValeur`", ou "`a,b`".
+- `corpsDeLaFonction`
+  - : Une chaîne de caractères contenant les instructions JavaScript définissant la fonction.
+
+L'invocation du constructeur `Function` en tant que fonction (sans utiliser l'opérateur `new`) a le même effet que son invocation en tant que constructeur.
+
+### Le constructeur `GeneratorFunction`
+
+> **Note :** `GeneratorFunction` n'est pas un objet global mais pourrait être obtenu à partir de l'instance de la fonction génératrice (voir la page {{jsxref("GeneratorFunction")}} pour plus de détails).
+
+> **Note :** Le constructeur `GeneratorFunction` ne doit pas être utilisé pour créer des fonctions. En effet, il utilise une chaîne pour former le corps de la fonction et cela peut empêcher certaines optimisations du moteur JavaScript ainsi que provoquer d'autres problèmes.
+
+Comme pour tous les autres objets, les objets {{jsxref("GeneratorFunction")}} peuvent être créés grâce à l'opérateur `new` :
+
+    new GeneratorFunction (arg1, arg2, ... argN, corpsFonction)
+
+- `arg1, arg2, ... argN`
+  - : Plusieurs (zéro ou plus) noms qui seront utilisés par la fonction comme noms d'arguments formels. Chaque nom doit être une chaîne de caractères valide au sens d'un identifiant JavaScript ou alors être une liste de telles chaînes séparées par des virgules. On aura les exemples suivants : "`x`", "`theValue`", ou "`a,b`".
+- `corpsFonction`
+  - : Une chaîne de caractères contenant les instructions JavaScript définissant la fonction.
+
+## Les paramètres d'une fonction
+
+### Les paramètres par défaut
+
+Les paramètres par défaut permettent aux paramètres déclarés d'une fonction de pouvoir être initialisés avec des valeurs par défaut s'ils ne sont pas fournis à la fonction ou s'ils valent `undefined`. Pour plus de détails, voir la page de la référence sur [les paramètres par défaut](/fr/docs/Web/JavaScript/Reference/Fonctions/Valeurs_par_défaut_des_arguments).
+
+### Les paramètres du reste
+
+Cette syntaxe permet de représenter un nombre indéfini d'arguments sous forme d'un tableau. Pour plus de détails, voir la page sur [les paramètres du reste](/fr/docs/Web/JavaScript/Reference/Fonctions/param%C3%A8tres_du_reste).
+
+## L'objet `arguments`
+
+Il est possible de faire référence aux arguments d'une fonction au sein de cette fonction en utilisant l'objet `arguments`. Consulter la page [arguments](/fr/docs/Web/JavaScript/Reference/Fonctions/arguments) pour plus d'informations.
+
+- [`arguments`](/fr/docs/Web/JavaScript/Reference/Fonctions/arguments) : Un objet semblable à un tableau qui contient les arguments passés à la fonction qui est exécutée.
+- [`arguments.callee`](/fr/docs/Web/JavaScript/Reference/Fonctions/arguments/callee) {{Deprecated_inline}} : La fonction en cours d'exécution.
+- [`arguments.caller`](/fr/docs/Web/JavaScript/Reference/Fonctions/arguments/caller) {{Obsolete_inline}} : La fonction qui a appelé la fonction courante.
+- [`arguments.length`](/fr/docs/Web/JavaScript/Reference/Fonctions/arguments/length) : Le nombre d'arguments passés à la fonction.
+
+## Récursion
+
+Une fonction peut faire référence à elle-même et s'appeler elle-même. Il y a trois façons pour qu'une fonction fasse appel à elle-même :
+
+1.  le nom de la fonction
+2.  [`arguments.callee`](/fr/docs/Web/JavaScript/Reference/Fonctions/arguments/callee)
+3.  une variable interne faisant référence à la fonction
+
+Avec l'exemple suivant :
+
+```js
+var truc = function toto() {
+   // instructions
+};
+```
+
+Ce qui suit sera équivalent au sein de la fonction :
+
+1.  `toto()`
+2.  `arguments.callee()`
+3.  `truc()`
+
+Une fonction qui s'appelle elle-même est appelée une fonction récursive. D'une certaine manière, une récursion est semblable à une boucle. Une récursion et une boucle exécutent le même code plusieurs fois et s'appuient sur une condition (afin d'éviter une boucle infinie, ou plutôt une récursion infinie ici). Ainsi la boucle suivante :
+
+```js
+var x = 0;
+// "x < 10" est la condition de la boucle
+while (x < 10) {
+   // faire des choses
+   x++;
+}
+```
+
+peut être convertie en une fonction récursive et un appel à cette fonction :
+
+```js
+function boucle(x) {
+   // "x >= 10" est la condition de sortie
+   // (et équivaut à "!(x < 10)")
+   if (x >= 10)
+      return;
+   // faire des choses
+   boucle(x + 1); // l'appel récursif
+}
+boucle(0);
+```
+
+Cependant, certains algorithmes ne peuvent pas être traduits sous forme de boucles itératives. Ainsi, obtenir tous les nœuds d'un arbre (par exemple le DOM), est beaucoup plus facile à faire de manière récursive.
+
+```js
+function parcoursArbre(noeud) {
+   if (noeud == null) //
+      return;
+   // faire quelque chose avec le noeud
+   for (var i = 0; i < noeud.childNodes.length; i++) {
+      parcoursArbre(noeud.childNodes[i]);
+   }
+}
+```
+
+Par rapport à la fonction `boucle`, chaque appel récursif enchaîne ici plusieurs appels récursifs successifs.
+
+Il est théoriquement possible de convertir tout algorithme récursif en un algorithme non-récursif. Cependant, la logique du problème est souvent beaucoup plus complexe et l'on doit faire recours à une pile pour le résoudre. Mais la récursion n'est en fait rien d'autre que l'utilisation d'une pile : la pile de la fonction.
+
+La comportement de la récursion en tant que pile peut être observée avec cet exemple :
+
+```js
+function truc(i) {
+   if (i < 0)
+      return;
+   console.log('début :' + i);
+   toto(i - 1);
+   console.log('fin :' + i);
+}
+truc(3);
+```
+
+Elle produira le résultat suivant :
+
+```js
+début :3
+début :2
+début :1
+début :0
+fin :0
+fin :1
+fin :2
+fin :3
+```
+
+## Fonctions imbriquées et fermetures
+
+Il est possible d'imbriquer une fonction au sein d'une fonction. La fonction imbriquée (interne) est privée par rapport à la fonction (externe) qui la contient. Cela forme ce qu'on appelle une fermeture (_closure_ en anglais).
+
+Une fermeture est une expression (généralement une fonction) possédant des variables libres ainsi qu'un environnement qui lie ces variable (autrement dit qui « ferme » l'expression).
+
+Étant donné qu'une fonction imbriquée est une fermeture, cela signifie que la fonction imbriquée peut « hériter » des arguments et des variables de la fonction qui la contient. En d'autres termes, la fonction interne contient la portée de la fonction externe.
+
+Pour résumer :
+
+- on ne peut accéder à la fonction interne seulement avec des instructions contenues dans la fonction externe,
+
+<!---->
+
+- la fonction interne est une fermeture : la fonction interne peut utiliser des arguments et des variables de la fonction externe alors que la fonction externe ne peut pas utiliser de variables et d'arguments de la fonction interne.
+
+L'exemple suivant, montre le cas de fonctions imbriquées :
+
+```js
+function ajouteCarres(a,b) {
+   function carre(x) {
+      return x * x;
+   }
+   return carre(a) + carre(b);
+}
+var a = ajouteCarres(2,3); // renvoie 13
+var b = ajouteCarres(3,4); // renvoie 25
+var c = ajouteCarres(4,5); // renvoie 41
+```
+
+Étant donné que la fonction interne est une fermeture, il est possible d'appeler la fonction externe et de définir des arguments pour la fonction externe mais aussi pour la fonction interne :
+
+```js
+function externe(x) {
+   function interne(y) {
+      return x + y;
+   }
+   return interne;
+}
+var fn_interne = externe(3);
+var resultat = fn_interne(5); // renvoie 8
+
+var resultat1 = externe(3)(5); // renvoie 8
+```
+
+### Conservation des variables
+
+On voit alors que `x` est conservé lorsqu'`interne` est renvoyé. Une fermeture doit conserver les arguments et les variables au sein de toutes les portées auxquelles elle fait référence. Étant donné qu'éventuellement, chaque appel fournira des arguments différents, une nouvelle fermeture est créée pour chaque appel externe. La mémoire peut donc être libérée seulement lorsque `inside` n'est plus accessible.
+
+Cela n'est pas différent du stockage de références avec d'autres objets, mais ça reste plus délicat à observer puisqu'on ne peut inspecter ou définir soi-même les références en question.
+
+### Imbrication multiple de fonctions
+
+On peut imbriquer plusieurs fonctions : une fonction (A) contien une fonction (B) qui contient une fonction (C). Ici les fonctions B et C forment des fermetures et aisni B peut accéder à A et C peut accéder à B. On peut donc en déduire, puisque C accède à B qui accède à A que C peut accéder à A. On voit donc que les fermetures peuvent contenir différentes portées. Elles peuvent, récursivement, contenir la portée des fonctions qui la contiennent. Ce mécanisme est appelé « chaînage de portée »  (_scope chaining_ en anglais). (Cette dénomination sera expliquée par la suite.)
+
+On peut l'observer avec l'exemple suivant :
+
+```js
+function A(x) {
+   function B(y) {
+      function C(z) {
+         console.log(x + y + z);
+      }
+      C(3);
+   }
+   B(2);
+}
+A(1); // crée un message d'alerte avec 6 (= 1 + 2 + 3)
+```
+
+Dans cet exemple, C accède à la variable y de B et à la variable x de A. Cela est possible parce que :
+
+1.  `B` est une fermeture qui contient `A`, autrement dit `B` peut accéder aux arguments et aux variables de `A`
+2.  `C` est une fermeture qui contient `B`
+3.  Étant donné que la fermeture de `B` contient `A` et que celle de `C` contient `B`, `C` peut accéder à la fois aux arguments et variables de `B` _et_ `A`. Autrement dit, `C` *enchaîne les portées de*  `B` et `A` dans cet ordre.
+
+La réciproque n'est pas vraie. `A` ne peut avoir accès à `C`, parce que `A` ne peut accéder ni aux variables ni aux arguments de `B`, or `C` est une variable de `B. C` est donc privé et seulement pour `B`.
+
+### Conflits de noms
+
+Lorsque deux arguments ou variables appartenant aux portées d'une fermeture ont le même nom, il y a un _conflit de noms_. La portée la plus interne l'emportera par rapport à la portée la plus externe. C'est ce qu'on appelle la chaîne de portée (_scope chain_ en anglais). Le premier maillon de cette chaîne est la portée la plus interne tandis que le dernier maillon est représenté par la portée la plus externe. Regardons l'exemple suivant :
+
+```js
+function externe() {
+   var x = 10;
+   function interne(x) {
+      return x;
+   }
+   return interne;
+}
+resultat = externe()(20); // renvoie 20 et non pas 10
+```
+
+Le conflit de nom apparaît avec l'instruction `return x` et vient de la dénomination commune de l'argument `x `de la fonction` interne` et la variable `x `de la fonction `externe`. La chaîne de portée est, pour cet exemple : {`interne`, `externe`, objet globalt}. On voit alors que le  `x` de la fonction interne l'emporte sur le `x `de la fonction externe. 20 (`x` de la fonction `interne`) est donc renvoyé plutôt que 10 (`x` de la fonction `externe`).
+
+## Définition des méthodes
+
+### Les accesseurs et mutateurs (_getter_ et _setter_)
+
+Il est possible de définir des méthodes qui sont accesseurs ou des mutateurs sur n'importe quel objet qui peut avoir de nouvelles propriétés. La syntaxe utilisée pour définir les _getters_ et _setters_ est celle utilisée avec les littéraux objets.
+
+- [get](/fr/docs/Web/JavaScript/Reference/Fonctions/get)
+  - : Permet de lier une propriété d'un objet à une fonction qui sera appelée lorsqu'on accèdera à la propriété.
+- [set](/fr/docs/Web/JavaScript/Reference/Fonctions/set)
+  - : Permet de lier une propriété d'un objet à une fonction qui sera appelée lorsqu'on tentera de modifier cette propriété.
+
+### Syntaxe des définitions de méthode ECMAScript **2015**
+
+Avec ECMAScript 2015, il est possible de définir des méthodes de façon plus concise (à la façon de ce qui est déjà possible pour les getters et setters). Voir la page sur [les définitions de méthodes](/fr/docs/Web/JavaScript/Reference/Fonctions/Définition_de_méthode) pour plus d'informations.
+
+```js
+var obj = {
+  toto() {},
+  truc() {}
+};
+```
+
+## Constructeur, déclaration, expression ?
+
+Comparons les exemples suivants :
+
+1.  une fonction définie grâce au constructeur `Function` assignée à la variable `multiplier`
+
+    ```js
+    var multiplier = new Function("x", "y", "return x * y;");
+    ```
+
+2.  une déclaration de fonction d'une fonction appelée `multiplier`
+
+    ```js
+    function multiplier(x, y) {
+       return x * y;
+    }
+    ```
+
+3.  une expression de fonction d'une fonction anonyme assignée à la variable `multiplier`
+
+    ```js
+    var multiplier = function(x, y) {
+       return x * y;
+    };
+    ```
+
+4.  une expression de fonction d'une fonction nommée `fonction_nom` assignée à la variable `multiplier`
+
+    ```js
+    var multiplier = function function_nom(x, y) {
+       return x * y;
+    };
+    ```
+
+Tous ces exemples effectuent à peu près la même chose, mais différent sur quelques points :
+
+- Il y a une distinction entre le nom de la fonction et la variable à laquelle elle est affectée :
+
+  - le nom de la fonction ne peut être changé alors que la variable à laquelle la fonction a été assignée peut être réassignée.
+  - le nom de la fonction ne peut-être utilisé qu'à l'intérieur du corps de la fonction. Toute tentative d'utilisation en dehors du corps de la fonction entraînera une erreur (ou `undefined` si le nom de la fonction a été déclaré auparavant avec une instruction `var`). Ainsi :
+
+    ```js
+        var y = function x() {};
+        console.log(x); // renvoie une erreur
+        ```
+
+    Le nom de la fonction apparaît également lorsque la fonction est sérialisée avec la [méthode toString de l'objet `Function`](/fr/docs/JavaScript/Reference/R%C3%A9f%C3%A9rence_JavaScript/Objets_globaux/Function/toString).
+
+    La variable à laquelle est assignée la fonction est seulement limitée par rapport à la portée. La portée au sein de laquelle la fonction est déclarée est donc garantie d'être dans la portée de la variable.
+
+  - Comme le montre le quatrième exemple, le nom de la fonction peut être différent du nom de la variable à laquelle a été assignée la fonction. Les deux noms n'ont aucune relation entre eux.
+
+- Une déclaration de fonction peut aussi créer une variable avec le même nom que la fonction. Ainsi, contrairement une expression de fonction, une déclaration de fonction permet d'accéder à la fonction grâce à son nom au sein de la portée dans laquelle elle a été définie :
+
+  ```js
+    function x() {}
+    console.log(x); // affichera la fonction x sérialisée en une chaîne de caractères
+    ```
+
+  L'exemple qui suit montre que les noms de fonctions ne sont par liées aux variables auxquelles sont assignées les fonctions. Si une variable de fonction est assignée à une autre valeur, elle aura toujours le même nom de fonction :
+
+  ```js
+    function toto() {}
+    console.log(toto); // message affichant la chaine de caractères "toto"
+    var truc = toto;
+    console.log(truc); // message affichant la chaine de caractères "toto"
+    ```
+
+- Une fonction définie grâce à « `new Function »` n'aura pas de nom de fonction. Cependant, le moteur JavaScript [SpiderMonkey](/fr/docs/SpiderMonkey), la forme sérialisée de la fonction apparaît comme si la fonction avait le nom « anonymous ». Le code `console.log(new Function())` produira :
+
+  ```js
+    function anonymous() {
+    }
+    ```
+
+  La fonction n'ayant pas de nom effectif, `anonymous` n'est pas une variable à laquelle on pourra accéder au sein de la fonction. Par exemple, le code qui suit produira une erreur :
+
+  ```js
+    var toto = new Function("console.log(anonymous);");
+    toto();
+    ```
+
+- À la différence des fonctions définies par les expressions de fonction ou par le constructeur `Function`, une fonction définie par une déclaration de fonction pourra être utilisée avant la déclaration. Ainsi :
+
+  ```js
+    toto(); // affichera TOTO !
+    function toto() {
+       console.log('TOTO !');
+    }
+    ```
+
+- Une fonction définie par une expression de fonction hérite de la portée courante. La fonction forme donc une fermeture. En revanche, les fonctions définies par le constructeur `Function` n'héritent que de la portée globale (portée héritée par toutes les fonctions).
+- Les fonctions définies par les expressions et les déclarations de fonctions ne sont analysées (parsées) qu'une seule fois. Celles définies grâce au constructeur `Function` ne le sont pas. Cela signifie que la chaîne de caractère représentant le corps de la fonction doit être analysée à chaque fois qu'elle est évaluée. Bien qu'une expression de fonction crée obligatoirement une fermeture, le corps de la fonction n'est pas parsé à nouveau. Les expressions de fonctions sont donc plus rapides que « `new Function(...)` ». Il faut donc éviter le constructeur `Function` autant que possible.
+  Il faut cependant noter que les expressions et les déclarations imbriquées au sein d'une chaîne de caractère pour un constructeur `Function` ne sont analysées qu'une seule fois. On aura l'exemple suivant :
+
+  ```js
+    var toto = (new Function("var truc = \'TOTO !\';\nreturn(function() {\n\tconsole.log(truc);\n});"))();
+    toto(); //La partie « function() {\n\tconsole.log(truc);\n} » de la chaîne de caractères n'est pas analysée à nouveau.
+    ```
+
+Une déclaration de fonction peut très facilement (et souvent involontairement) être transformée en une expression de fonction. Une déclaration de fonction cesse d'en être une lorsque :
+
+- elle fait partie d'une expression
+- ou elle n'est plus un « élément source » de la fonction ou du script. Un « élément source » est une instruction non-imbriquée du script ou d'un corps de fonction.
+
+  ```js
+    var x = 0;                 // élément source
+    if (x === 0) {              // élément source
+       x = 10;                 // pas un élément source
+       function titi() {}      // pas un élément source
+    }
+    function toto() {          // élément source
+       var y = 20;             // élément source
+       function truc() {}      // élément source
+       while (y === 10) {       // élément source
+          function machin() {} // pas un élément source
+          y++;                 // pas un élément source
+       }
+    }
+    ```
+
+### Exemples :
+
+- ```js
+    // déclaration de fonction
+    function toto() {}
+
+    // expression de fonction
+    (function truc() {})
+
+    // expression de fonction
+    var x = function bonjour() {}
+    ```
+
+- ```js
+    if (x) {
+       // expression de fonction
+       function monde() {}
+    }
+    ```
+
+- ```js
+    // déclaration de fonction
+    function a() {
+       // déclaration de fonction
+       function b() {}
+       if (0) {
+          // expression de fonction
+          function c() {}
+       }
+    }
+    ```
+
+## Définir une fonction de façon conditionnelle
+
+Il est possible de définir des fonctions de manière conditionnelle en utilisant soit : //function statements// (une extension autorisée par le standard [ECMA-262 Edition 3](https://www.ecma-international.org/publications/standards/Ecma-262.htm)) soit le constructeur `Function`. Il faut noter que de telles instructions ne sont plus autorisées dans le standard [ES5 strict](https://bugzilla.mozilla.org/show_bug.cgi?id=609832). Il faut également savoir que cela ne fonctionne pas de manière homogène sur les différents navigateurs. Il est donc déconseillé d'utiliser cette fonctionnalité.
+
+Dans le script qui suit, la fonction `zero` n'est jamais définie et ne peut donc être appelée car le test « `if (0)` » est toujours faux :
+
+```js
+if (0) {
+   function zero() {
+      console.log("C'est zero.");
+   }
+}
+```
+
+Si le script est changé et que la condition devient « `if (1)` », la fonction `zero` sera alors définie.
+
+Bien que cette fonction ressemble à une déclaration de fonction, il s'agit en fait d'une expression (ou instruction) de fonction, car celle-ci est imbriquée au sein d'une autre instruction. (Consulter le paragraphe précédent pour une explication à ce sujet).
+
+> **Note :** À la différence de [SpiderMonkey](/fr/docs/SpiderMonkey), certains moteurs JavaScript traîtent incorrectement les expressions de fonction avec un nom comme des définitions de fonction. Cela conduirait à la définition de la fonction `zero` et ce même avec la condition `if` valant faux. Une façon plus sûre de définir des fonctions de manière conditionnelle est de définir la fonction et de l'assigner à une variable :
+>
+> ```js
+> if (0) {
+>    var zero = function() {
+>       console.log("C'est zero");
+>    }
+> }
+> ```
+
+## Les fonctions en tant que gestionnaires d'événements
+
+En JavaScript, les gestionnaires d'événements [DOM](/fr/docs/DOM) (_event handlers_ en anglais) sont des fonctions (différentes des objets contenant une méthode `handleEvent` dans d'autres langages de liaison avec le DOM -_binding languages_ en anglais). Les fontions ont l'objet [event](/fr/docs/DOM/event) comme seul et unique paramètre. Comme tous les autres paramètres, si l'objet événement, n'a pas besoin d'être utilisé, il peut être absent de la liste des paramètres formels.
+
+Les objets d'un document HTML susceptibles de recevoir des événements peuvent être par exemple : `window` (objets` Window`, y compris les objets frames), `document` (les objets `HTMLDocument`), et les éléments (les objets `Element`). Au sein du [DOM HTML](https://www.w3.org/TR/DOM-Level-2-HTML/), les objets recevant des événements possède des propriétés gestionnaires d'événements. Ces propriétés sont les noms des événements en minuscules préfixés par « on » (par exemple `onfocus`). Une autre façon, plus fiable, d'ajouter des auditeurs d'événements, est offert par les [événements DOM de niveau 2](https://www.w3.org/TR/DOM-Level-2-Events/).
+
+Note : Les événements font partie de la logique DOM et non de celle de JavaScript. (JavaScript n'est qu'un langage permettant de manipuler le DOM.)
+
+L'exemple suivant assigne une fonction au gestionnaire de l'événement « focus ».
+
+```js
+window.onfocus = function() {
+   document.body.style.backgroundColor = 'white';
+};
+```
+
+Si une fonction est assignée à une variable, il est possible d'assigner la variable à un gestionnaire d'événement. Le fragment de code qui suit assigne une fonction à la variable `setBGColor`.
+
+```js
+var setBGColor = new Function("document.body.style.backgroundColor = 'white';");
+```
+
+Il est alors possible d'utiliser cette variable pour assigner une fonction à un gestionnaire d'événement. Cela peut se faire de plusieurs manières, en voici deux décrites ici :
+
+1.  écrire dans les propriétés de l'évément DOM HTML
+
+    ```js
+    document.form1.colorButton.onclick = setBGColor;
+    ```
+
+2.  l'attribut de l'événement HTML
+
+    ```html
+    <input type="button"
+       value="Changer la couleur de fond"
+       onclick="setBGColor();"/>
+    ```
+
+    Un gestionnaire d'événement défini de cette manière sera une fonction, nommée selon l'attribut, encadré du code spécifique nécessaire. C'est pourquoi les parenthèses sont ici nécessaires (`setBGColor()` et non pas `setBGColor`). Cela est équivalent à :
+
+    ```js
+    document.form1.colorButton.onclick = function onclick(event) {
+       setBGColor();
+    };
+    ```
+
+    Il faut noter la façon dont l'objet événement est passé à la fonction en tant que paramètre `event`. Cela permet au code d'utiliser l'objet `Event` :
+
+    ```html
+    <input ...
+        onclick="console.log(event.target.tagName);"/>
+    ```
+
+Tout comme les autres propriétés faisant référence à une fonction, le gestionnaire d'événement peut agir come une méthode et `this` ferait alors référence à l'élément contenant le gestionnaire d'événement. Dans l'exemple suivant, la fonction à laquelle `onfocus` fait référence est appelée avec `this` qui a la valeur `window`.
+
+```js
+window.onfocus();
+```
+
+Une erreur faite souvent lorsque l'on commence à utiliser JavaScript est d'ajouter des parenthèses et/ou des paramètres à la fin de la variable. Cela revient à appeler le gestionnaire d'événement lorsqu'on l'assigne. Le fait d'ajouter ces parenthèses assignera la valeur de retour du gestionnaire d'événement. Cette valeur sera souvent` undefined `dans ces cas alors que l'on aurait souhaité obtenir le gestionnaire d'événement.
+
+```js
+document.form1.button1.onclick = setBGColor();
+```
+
+Afin de passer des paramètres à un gestionnaire d'événements, le gestionnaire doit être enveloppé dans une autre fonction, comme dans l'exemple suivant :
+
+```js
+document.form1.button1.onclick = function() {
+   setBGColor('une valeur');
+};
+```
+
+## Les fonctions de bloc
+
+En [mode strict](/fr/docs/Web/JavaScript/Reference/Strict_mode), à partir d'ES2015 (ES6), la portée des fonctions définies dans un bloc est limitée à ce bloc. Avant ES2015, il était interdit d'utiliser les fonctions de bloc en mode strict..
+
+```js
+'use strict';
+
+function f() {
+  return 1;
+}
+
+{
+  function f() {
+    return 2;
+  }
+}
+
+f() === 1; // true
+
+// f() === 2 en mode non-strict
+```
+
+### Les fonctions de bloc dans du code non-strict
+
+Non.
+
+Dans du code non-strict, les déclarations de fonctions placées dans des blocs peuvent se comporter de façon étrange :
+
+```js
+if (onDevraitDéfinirZéro) {
+   function zéro() { // DANGER: risque de compatibilité
+      console.log("Voici zéro.");
+   }
+}
+```
+
+ES2015 indique que si `onDevraitDéfinirZéro` vaut `false`, `zéro` ne devrait jamais être défini car le bloc n'est jamais exécuté. En revanche, c'est une nouveauté liée à cette version du standard, non spécifiée auparavant. Certains navigateurs définissent `zéro` que le bloc soit exécuté ou non.
+
+En [mode strict](/fr/docs/Web/JavaScript/Reference/Strict_mode), tous les navigateurs qui prennent en charge ES2015 gère cela de la même façon : `zéro` est uniquement défini si `onDevraitDéfinirZéro` vaut `true` et uniquement dans la portée du bloc induit par `if`.
+
+Une méthode plus sûre est d'utiliser des expressions de fonction :
+
+```js
+var zéro;
+if (0) {
+   zéro = function() {
+      console.log("Voici zéro.");
+   };
+}
+```
+
+## Exemples
+
+### Renvoyer un nombre formaté
+
+La fonction qui suit renvoie une chaîne de caractères contenant la représentation formatée d'un nombre avec un certain nombre de zéros préfixant le nombre.
+
+```js
+// Cette fonction renvoie une chaîne de caractères complétée par un préfixe composé de zéros
+function padZeros(num, totalLen) {
+   var numStr = num.toString();             // On initialise la valeur à renvoyer en chaîne de caractères
+   var numZeros = totalLen - numStr.length; // On calcule le nombre de zéros
+   for (var i = 1; i <= numZeros; i++) {
+      numStr = "0" + numStr;
+   }
+   return numStr;
+}
+```
+
+Les instructions qui suivent utilisent cette fonction
+
+```js
+var resultat;
+resultat = padZeros(42,4); // renvoie "0042"
+resultat = padZeros(42,2); // renvoie "42"
+resultat = padZeros(5,4);  // renvoie "0005"
+```
+
+### Déterminer si une fonction existe
+
+Il est possible de déterminer si oui ou non une fonction existe en utilisant l'opérateur `typeof`. Dans l'exemple qui suit, on teste pour savoir si l'objet` window` possède une propriété appelé `noFunc` qui serait une fonction. Si c'est le cas, elle sera utilisée, sinon on fera autre chose.
+
+```js
+ if ('function' === typeof window.noFunc) {
+   // utilisation de noFunc()
+ } else {
+   // faire autre chose
+ }
+```
+
+Il est à noter que, dans le test `if`, on utilise une référence à `noFunc` - il n'y a pas de parenthèses après le nom de la fonction, la fonction n'est donc pas appelée.
+
+## Spécifications
+
+| Spécification                                                                                                    | État                     | Commentaires                                                                             |
+| ---------------------------------------------------------------------------------------------------------------- | ------------------------ | ---------------------------------------------------------------------------------------- |
+| {{SpecName('ES1')}}                                                                                         | {{Spec2('ES1')}}     | Définition initiale. Implémentée avec JavaScript 1.0                                     |
+| {{SpecName('ES5.1', '#sec-13', 'Function Definition')}}                                         | {{Spec2('ES5.1')}} |                                                                                          |
+| {{SpecName('ES6', '#sec-function-definitions', 'Function definitions')}}                 | {{Spec2('ES6')}}     | Nouveautés : fonctions fléchées, générateurs, paramètres par défaut, paramètres du reste |
+| {{SpecName('ES6', '#', 'function*')}}                                                                 | {{Spec2('ES6')}}     | Définition initiale.                                                                     |
+| {{SpecName('ES6', '#sec-arrow-function-definitions', 'Arrow Function Definitions')}} | {{Spec2('ES6')}}     | Définition initiale.                                                                     |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.functions")}}
+
+## Voir aussi
+
+- L'instruction {{jsxref("Instructions/function", "function")}}
+- L'expression {{jsxref("Opérateurs/L_opérateur_function", "function")}}
+- L'instruction {{jsxref("Instructions/function*", "function*")}}
+- L'expression {{jsxref("Opérateurs/function*", "function*")}}
+- {{jsxref("Function")}}
+- {{jsxref("GeneratorFunction")}}
+- {{jsxref("Fonctions/Fonctions_fléchées", "Les fonctions fléchées")}}
+- {{jsxref("Fonctions/Valeurs_par_défaut_des_arguments", "Les paramètres par défaut","",1)}}
+- {{jsxref("Fonctions/paramètres_du_reste", "Les paramètres du reste","",1)}}
+- L'objet {{jsxref("Fonctions/arguments", "arguments")}}
+- {{jsxref("Fonctions/get", "getter")}}
+- {{jsxref("Fonctions/set", "setter")}}
+- {{jsxref("Fonctions/Définition_de_méthode", "Les définitions de méthodes","",1)}}
+- [Fonctions et portée des fonctions](/fr/docs/Web/JavaScript/Reference/Fonctions)
diff --git a/files/fr/web/javascript/reference/functions/method_definitions/index.html b/files/fr/web/javascript/reference/functions/method_definitions/index.html
deleted file mode 100644
index 13c6fdf0fa..0000000000
--- a/files/fr/web/javascript/reference/functions/method_definitions/index.html
+++ /dev/null
@@ -1,216 +0,0 @@
----
-title: Définir une méthode
-slug: Web/JavaScript/Reference/Functions/Method_definitions
-tags:
-  - ECMAScript 2015
-  - Fonctions
-  - JavaScript
-  - Object
-  - Reference
-  - Syntaxe
-translation_of: Web/JavaScript/Reference/Functions/Method_definitions
-original_slug: Web/JavaScript/Reference/Fonctions/Définition_de_méthode
----
-<div>{{JsSidebar("Functions")}}</div>
-
-<p>Avec ECMAScript 2015 (ES6), il est possible d'utiliser une notation plus courte pour définir des méthodes au sein des littéraux objets. On peut ainsi définir plus rapidement une fonction qui sera utilisée comme méthode.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/functions-definitions.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">var obj = {
-  <var>property</var>( <var>parameters…</var> ) {},
-  *<var>generator</var>( <var>parameters…</var> ) {},
-  async property( <var>parameters…</var> ) {},
-  async* generator( <var>parameters…</var> ) {},
-
-  // avec les noms calculés :
-  [property]( <var>parameters…</var> ) {},
-  *[generator]( <var>parameters…</var> ) {},
-  async [property]( <var>parameters…</var> ) {},
-
-  // avec la syntaxe pour les accesseurs
-  // mutateurs :
-  get <var>property</var>() {},
-  set <var>property</var>(<var>value</var>) {}
-};
-</pre>
-
-<h2 id="Description">Description</h2>
-
-<p>La notation raccourcie est semblable à la syntaxe introduite par ECMAScript 5 pour les <a href="/fr/docs/Web/JavaScript/Reference/Fonctions/get">accesseurs</a> et <a href="/fr/docs/Web/JavaScript/Reference/Fonctions/set">mutateurs</a>.</p>
-
-<p>Le code suivant :</p>
-
-<pre class="brush: js">var obj = {
-  toto: function() {
-    /* du code */
-  },
-  truc: function() {
-    /* du code */
-  }
-};</pre>
-
-<p>Peut désormais être raccourci en :</p>
-
-<pre class="brush: js">var obj = {
-  toto() {
-    /* du code */
-  },
-  truc() {
-    /* du code */
-  }
-};</pre>
-
-<h3 id="Notation_raccourcie_pour_les_générateurs">Notation raccourcie pour les générateurs</h3>
-
-<p><a href="/fr/docs/Web/JavaScript/Reference/Instructions/function*">Les générateurs</a> sont des méthodes et peuvent donc être définis en utilisant la notation raccourci. Lorsqu'on les utilise :</p>
-
-<ul>
- <li>L'astérisque de la notation raccourcie doit être située avant le nom de la propriété pour le générateur. Autrement dit, <code>* g(){}</code> fonctionnera mais <code>g*(){}</code> ne fonctionnera pas.</li>
- <li>Les définitions des méthodes qui ne sont pas des générateurs ne peuvent pas contenir le mot-clé <code>yield</code>. Cela signifie que <a href="/fr/docs/Web/JavaScript/Reference/Instructions/Fonction_génératrice_historique">l'ancienne syntaxe pour les générateurs</a> ne fonctionnera pas et déclenchera une exception {{jsxref("SyntaxError")}}. Il faut toujours utiliser <code>yield</code> avec l'astérisque (<code>*</code>).</li>
-</ul>
-
-<pre class="brush: js">// Notation utilisant une propriété nommée (avant-ES2015)
-var obj2 = {
-  g: function*() {
-    var index = 0;
-    while(true)
-      yield index++;
-  }
-};
-
-// La même définition, en utilisant la notation raccourcie
-var obj2 = {
-  * g() {
-    var index = 0;
-    while(true)
-      yield index++;
-  }
-};
-
-var it = obj2.g();
-console.log(it.next().value); // 0
-console.log(it.next().value); // 1</pre>
-
-<h3 id="Méthodes_asynchrones_avec_notation_raccourcie">Méthodes asynchrones avec notation raccourcie</h3>
-
-<p><a href="/fr/docs/Web/JavaScript/Reference/Instructions/async_function">Les méthodes asynchrones</a> peuvent également être définies grâce à une syntaxe raccourcie.</p>
-
-<pre class="brush: js">// On utilise une propriété nommée
-var obj3 = {
-  f: async function () {
-    await une_promesse;
-  }
-};
-
-// Ici, on obtient le même résultat
-// avec la notation raccourcie
-var obj3 = {
-  async f() {
-    await une_promesse;
-  }
-};
-</pre>
-
-<h3 id="Méthodes_génératrices_asynchrones">Méthodes génératrices asynchrones</h3>
-
-<p>Les méthodes génératrices peuvent également être asynchrones (cf. <code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/async_function">async</a></code>) :</p>
-
-<pre class="brush: js">var obj4 = {
-  f: async function* () {
-    yield 1;
-    yield 2;
-    yield 3;
-  }
-};
-
-// Le code équivalent avec la
-// notation raccourcie
-var obj4 = {
-  async* f() {
-    yield 1;
-    yield 2;
-    yield 3;
-  }
-};</pre>
-
-<h3 id="Les_définitions_de_méthodes_ne_sont_pas_constructibles">Les définitions de méthodes ne sont pas constructibles</h3>
-
-<p>Les définitions de méthodes ne sont pas des constructeurs et si on tente de les instancier, cela provoquera une exception {{jsxref("TypeError")}}.</p>
-
-<pre class="brush: js">var obj = {
-  méthode() {},
-};
-new obj.méthode; // TypeError: obj.méthode is not a constructor
-
-var obj = {
-  * g() {}
-};
-new obj.g; // TypeError: obj.g is not a constructuer (changé avec ES2016)
-</pre>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Cas_de_test">Cas de test</h3>
-
-<pre class="brush: js">var obj = {
-  a : "toto",
-  b(){ return this.a; }
-};
-console.log(obj.b()); // "toto"
-</pre>
-
-<h3 id="Noms_de_propriétés_calculés">Noms de propriétés calculés</h3>
-
-<p>Cette notation raccourcie peut également être utilisée avec des noms de propriétés calculés.</p>
-
-<pre class="brush: js">var bar = {
-  toto0 : function (){return 0;},
-  toto1(){return 1;},
-  ["toto" + 2](){return 2;},
-};
-
-console.log(bar.toto0()); // 0
-console.log(bar.toto1()); // 1
-console.log(bar.toto2()); // 2</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-method-definitions', 'Method definitions')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2016', '#sec-method-definitions', 'Method definitions')}}</td>
-   <td>{{Spec2('ES2016')}}</td>
-   <td>Les méthodes génératrices ne doivent pas implémenter la trappe [[Construct]] et déclencher une exception lorsqu'elles sont utilisées avec <code>new</code>.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-method-definitions', 'Method definitions')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.functions.method_definitions")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><code><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_get">get</a></code></li>
- <li><code><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_set">set</a></code></li>
- <li><a href="/fr/docs/Web/JavaScript/Reference/Grammaire_lexicale">Grammaire lexicale de JavaScript</a></li>
-</ul>
diff --git a/files/fr/web/javascript/reference/functions/method_definitions/index.md b/files/fr/web/javascript/reference/functions/method_definitions/index.md
new file mode 100644
index 0000000000..a0e36dc8e0
--- /dev/null
+++ b/files/fr/web/javascript/reference/functions/method_definitions/index.md
@@ -0,0 +1,205 @@
+---
+title: Définir une méthode
+slug: Web/JavaScript/Reference/Functions/Method_definitions
+tags:
+  - ECMAScript 2015
+  - Fonctions
+  - JavaScript
+  - Object
+  - Reference
+  - Syntaxe
+translation_of: Web/JavaScript/Reference/Functions/Method_definitions
+original_slug: Web/JavaScript/Reference/Fonctions/Définition_de_méthode
+---
+{{JsSidebar("Functions")}}
+
+Avec ECMAScript 2015 (ES6), il est possible d'utiliser une notation plus courte pour définir des méthodes au sein des littéraux objets. On peut ainsi définir plus rapidement une fonction qui sera utilisée comme méthode.
+
+{{EmbedInteractiveExample("pages/js/functions-definitions.html")}}
+
+## Syntaxe
+
+    var obj = {
+      property( parameters… ) {},
+      *generator( parameters… ) {},
+      async property( parameters… ) {},
+      async* generator( parameters… ) {},
+
+      // avec les noms calculés :
+      [property]( parameters… ) {},
+      *[generator]( parameters… ) {},
+      async [property]( parameters… ) {},
+
+      // avec la syntaxe pour les accesseurs
+      // mutateurs :
+      get property() {},
+      set property(value) {}
+    };
+
+## Description
+
+La notation raccourcie est semblable à la syntaxe introduite par ECMAScript 5 pour les [accesseurs](/fr/docs/Web/JavaScript/Reference/Fonctions/get) et [mutateurs](/fr/docs/Web/JavaScript/Reference/Fonctions/set).
+
+Le code suivant :
+
+```js
+var obj = {
+  toto: function() {
+    /* du code */
+  },
+  truc: function() {
+    /* du code */
+  }
+};
+```
+
+Peut désormais être raccourci en :
+
+```js
+var obj = {
+  toto() {
+    /* du code */
+  },
+  truc() {
+    /* du code */
+  }
+};
+```
+
+### Notation raccourcie pour les générateurs
+
+[Les générateurs](/fr/docs/Web/JavaScript/Reference/Instructions/function*) sont des méthodes et peuvent donc être définis en utilisant la notation raccourci. Lorsqu'on les utilise :
+
+- L'astérisque de la notation raccourcie doit être située avant le nom de la propriété pour le générateur. Autrement dit, `* g(){}` fonctionnera mais `g*(){}` ne fonctionnera pas.
+- Les définitions des méthodes qui ne sont pas des générateurs ne peuvent pas contenir le mot-clé `yield`. Cela signifie que [l'ancienne syntaxe pour les générateurs](/fr/docs/Web/JavaScript/Reference/Instructions/Fonction_génératrice_historique) ne fonctionnera pas et déclenchera une exception {{jsxref("SyntaxError")}}. Il faut toujours utiliser `yield` avec l'astérisque (`*`).
+
+```js
+// Notation utilisant une propriété nommée (avant-ES2015)
+var obj2 = {
+  g: function*() {
+    var index = 0;
+    while(true)
+      yield index++;
+  }
+};
+
+// La même définition, en utilisant la notation raccourcie
+var obj2 = {
+  * g() {
+    var index = 0;
+    while(true)
+      yield index++;
+  }
+};
+
+var it = obj2.g();
+console.log(it.next().value); // 0
+console.log(it.next().value); // 1
+```
+
+### Méthodes asynchrones avec notation raccourcie
+
+[Les méthodes asynchrones](/fr/docs/Web/JavaScript/Reference/Instructions/async_function) peuvent également être définies grâce à une syntaxe raccourcie.
+
+```js
+// On utilise une propriété nommée
+var obj3 = {
+  f: async function () {
+    await une_promesse;
+  }
+};
+
+// Ici, on obtient le même résultat
+// avec la notation raccourcie
+var obj3 = {
+  async f() {
+    await une_promesse;
+  }
+};
+```
+
+### Méthodes génératrices asynchrones
+
+Les méthodes génératrices peuvent également être asynchrones (cf. [`async`](/fr/docs/Web/JavaScript/Reference/Instructions/async_function)) :
+
+```js
+var obj4 = {
+  f: async function* () {
+    yield 1;
+    yield 2;
+    yield 3;
+  }
+};
+
+// Le code équivalent avec la
+// notation raccourcie
+var obj4 = {
+  async* f() {
+    yield 1;
+    yield 2;
+    yield 3;
+  }
+};
+```
+
+### Les définitions de méthodes ne sont pas constructibles
+
+Les définitions de méthodes ne sont pas des constructeurs et si on tente de les instancier, cela provoquera une exception {{jsxref("TypeError")}}.
+
+```js
+var obj = {
+  méthode() {},
+};
+new obj.méthode; // TypeError: obj.méthode is not a constructor
+
+var obj = {
+  * g() {}
+};
+new obj.g; // TypeError: obj.g is not a constructuer (changé avec ES2016)
+```
+
+## Exemples
+
+### Cas de test
+
+```js
+var obj = {
+  a : "toto",
+  b(){ return this.a; }
+};
+console.log(obj.b()); // "toto"
+```
+
+### Noms de propriétés calculés
+
+Cette notation raccourcie peut également être utilisée avec des noms de propriétés calculés.
+
+```js
+var bar = {
+  toto0 : function (){return 0;},
+  toto1(){return 1;},
+  ["toto" + 2](){return 2;},
+};
+
+console.log(bar.toto0()); // 0
+console.log(bar.toto1()); // 1
+console.log(bar.toto2()); // 2
+```
+
+## Spécifications
+
+| Spécification                                                                                    | État                         | Commentaires                                                                                                                                     |
+| ------------------------------------------------------------------------------------------------ | ---------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
+| {{SpecName('ES2015', '#sec-method-definitions', 'Method definitions')}} | {{Spec2('ES2015')}}     | Définition initiale.                                                                                                                             |
+| {{SpecName('ES2016', '#sec-method-definitions', 'Method definitions')}} | {{Spec2('ES2016')}}     | Les méthodes génératrices ne doivent pas implémenter la trappe [[Construct]] et déclencher une exception lorsqu'elles sont utilisées avec `new`. |
+| {{SpecName('ESDraft', '#sec-method-definitions', 'Method definitions')}} | {{Spec2('ESDraft')}} |                                                                                                                                                  |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.functions.method_definitions")}}
+
+## Voir aussi
+
+- [`get`](/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_get)
+- [`set`](/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_set)
+- [Grammaire lexicale de JavaScript](/fr/docs/Web/JavaScript/Reference/Grammaire_lexicale)
diff --git a/files/fr/web/javascript/reference/functions/rest_parameters/index.html b/files/fr/web/javascript/reference/functions/rest_parameters/index.html
deleted file mode 100644
index 90984a9267..0000000000
--- a/files/fr/web/javascript/reference/functions/rest_parameters/index.html
+++ /dev/null
@@ -1,216 +0,0 @@
----
-title: Paramètres du reste (Rest parameters)
-slug: Web/JavaScript/Reference/Functions/rest_parameters
-tags:
-  - ECMAScript 2015
-  - Functions
-  - JavaScript
-  - Reference
-translation_of: Web/JavaScript/Reference/Functions/rest_parameters
-original_slug: Web/JavaScript/Reference/Fonctions/paramètres_du_reste
----
-<div>{{jsSidebar("Functions")}}</div>
-
-<p>Cette syntaxe permet de représenter un nombre indéfini d'arguments sous forme d'un tableau.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/functions-restparameters.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="brush: js">function f(a, b, ...lesArguments) {
-  // ...
-}
-</pre>
-
-<h2 id="Description">Description</h2>
-
-<p>Si le dernier paramètre nommé fourni à la fonction est préfixé de <code>...</code> (trois points), il devient un tableau dont les éléments entre <code>0</code> (inclus) et <code>lesArguments.length</code> (exclus) sont fournis comme autres arguments à la fonction.</p>
-
-<pre class="brush: js">function maFonction(a, b, ...plusDArguments) {
-  console.log("a", a);
-  console.log("b", b);
-  console.log("plusDArguments", plusDArguments);
-}
-
-maFonction("un", "deux", "trois", "quatre", "cinq");
-// affichera ceci dans la console :
-// a, "un"
-// b, "deux"
-// plusDArguments, ["trois", "quatre", "cinq"]</pre>
-
-<h3 id="Les_différences_entre_les_paramètres_du_reste_et_l'objet_arguments">Les différences entre les paramètres du reste et l'objet <code>arguments</code></h3>
-
-<p>Il y a trois principales différences entre les paramètres du reste et l'objet {{jsxref("Fonctions/arguments","arguments")}} :</p>
-
-<ul>
- <li>les paramètres du reste sont uniquement ceux qui ne possèdent pas de noms à part entière (autrement dit ceux qui ne sont pas formellement définis dans l'expression de fonction), l'objet <code>arguments</code> contient chaque argument passé à la fonction</li>
- <li>l'objet <code>arguments</code> n'est pas, à strictement parler, un tableau. Le paramètre représentant les arguments restant est une instance d'{{jsxref("Array","Array")}} à laquelle on peut appliquer directement des méthodes comme {{jsxref("Array/sort","sort")}}, {{jsxref("Array/map","map")}}, {{jsxref("Array/forEach","forEach")}} ou {{jsxref("Array/pop","pop")}}</li>
- <li>l'objet <code>arguments</code> possède des fonctionnalités spécifiques (comme, par exemple, la propriété <code>callee</code>)</li>
-</ul>
-
-<h3 id="Convertir_arguments_en_un_tableau">Convertir <code>arguments</code> en un tableau</h3>
-
-<p>Ces paramètres ont été introduits afin de réduire le code passe-partout souvent induit par les arguments.</p>
-
-<pre class="brush: js">// Avant les paramètres du reste, on observait souvent ce style de code :
-function f(a, b){
-  var args = Array.prototype.slice.call(arguments, f.length);
-  // ou encore
-  var args = [].slice.call(arguments);
-  // ou encore
-  var args = Array.from(arguments);
-
-  // et on pouvait alors écrire
-  var premier = args.shift(); // OK
-  // mais pas
-  var premier = arguments.shift(); // erreur car arguments n'est pas un tableau
-}
-
-// ce qui est l'équivalent de
-function f(...args) {
-  var tabNormal = args;
-  var premier = tabNormal.shift();
-}
-</pre>
-
-<h3 id="La_décomposition_sur_les_paramètres_du_reste">La décomposition sur les paramètres du reste</h3>
-
-<p>On peut également décomposer les paramètres du reste en variables distinctes :</p>
-
-<pre class="brush: js">function f(...[a, b, c]) {
-  return a + b + c;
-}
-
-f(1);          // NaN (b et c valent undefined)
-f(1, 2, 3);    // 6
-f(1, 2, 3, 4); // 6, le dernier paramètre n'est pas décomposé
-</pre>
-
-<p>Vous pouvez également accéder aux éléments des paramètres du reste :</p>
-
-<pre class="brush: js">function fun1(...lesArguments) {
-    console.log("valeur", lesArguments[0][0]);
-}
-
-fun1([5, 2], [5, 4]); // 5
-fun1([8, 2]); // 8
-fun1([9, 6, 7]); // 9</pre>
-
-<h2 id="Exemples">Exemples</h2>
-
-<p>S'il n'y a qu'un seul argument qui est décomposé par la syntaxe, la valeur sera toujours un tableau :</p>
-
-<pre class="brush: js">function maFonction(a, b, ...autres);
-  console.log(a);
-  console.log(b);
-  console.log(autres);
-}
-
-maFonction("un", "deux", "trois");
-// affichera ceci dans la console
-// "un"
-// "deux"
-// ["trois"]
-</pre>
-
-<p>De même, s'il n'y a pas suffisamment d'arguments, ce sera un tableau vide :</p>
-
-<pre class="brush: js">function maFonction(a, b, ...autres);
-  console.log(a);
-  console.log(b);
-  console.log(autres);
-}
-
-maFonction("un", "deux");
-// affichera ceci dans la console
-// "un"
-// "deux"
-// []</pre>
-
-<p><code>lesArguments</code> est un tableau et dispose donc d'une propriété <code>length</code> permettant de compter ses éléments :</p>
-
-<pre class="brush: js">function fun1(...lesArguments) {
-  console.log(lesArguments.length);
-}
-
-fun1();  // 0
-fun1(5); // 1
-fun1(5, 6, 7); // 3
-</pre>
-
-<p>Dans l'exemple qui suit, on utilise le paramètre Rest pour collecter les arguments après le premier pour les multiplier par le premier :</p>
-
-<pre class="brush: js">function multiplier(facteur, ...lesArguments) {
-  return lesArguments.map(function (element) {
-    return facteur * element;
-  });
-}
-
-var arr = multiplier(2, 1, 2, 3);
-console.log(arr); // [2, 4, 6]
-</pre>
-
-<p>L'exemple qui suit illustre comment on peut utiliser des méthodes de <code>Array</code> sur le paramètre Rest mais pas sur l'objet <code>arguments</code> :</p>
-
-<pre class="brush: js">function trierParamRest(...lesArguments) {
-  var argumentsTriés = lesArguments.sort();
-  return argumentsTriés;
-}
-
-console.log(trierParamRest(5,3,7,1)); // shows 1,3,5,7
-
-function trierArguments() {
-  var argumentsTriés = arguments.sort();
-  return argumentsTriés; // cela ne sera jamais appelé
-}
-
-// renvoie une exception TypeError: arguments.sort n'est pas une function
-console.log(trierArguments(5,3,7,1));
-</pre>
-
-<p>Pour utiliser les méthodes propres aux instances d'<code>Array</code> sur l'objet <code>arguments</code>, il est nécessaire de le convertir.</p>
-
-<pre class="brush: js">function trierAguments() {
-  var args = Array.from(arguments);
-  var argumentsTriés = args.sort();
-  return argumentsTriés;
-}
-console.log(trierArguments(5, 3, 7, 1)); // [1, 3, 5, 7]
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-function-definitions', 'Function Definitions')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-function-definitions', 'Function Definitions')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.functions.rest_parameters")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>L'objet {{jsxref("Fonctions/arguments","arguments")}}</li>
- <li>{{jsxref("Array","Array")}}</li>
- <li>{{jsxref("Fonctions","Les fonctions et leurs portées","",1)}}</li>
- <li>{{jsxref("Opérateurs/Syntaxe_décomposition","L'opérateur de décomposition","",1)}}</li>
- <li><a class="external" href="https://wiki.ecmascript.org/doku.php?id=harmony:rest_parameters">Proposition originale sur ecmascript.org</a> (en anglais)</li>
- <li><a class="external" href="https://javascriptweblog.wordpress.com/2011/01/18/javascripts-arguments-object-and-beyond/">JavaScript arguments object and beyond</a> (article en anglais)</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/functions/rest_parameters/index.md b/files/fr/web/javascript/reference/functions/rest_parameters/index.md
new file mode 100644
index 0000000000..6597da94f3
--- /dev/null
+++ b/files/fr/web/javascript/reference/functions/rest_parameters/index.md
@@ -0,0 +1,211 @@
+---
+title: Paramètres du reste (Rest parameters)
+slug: Web/JavaScript/Reference/Functions/rest_parameters
+tags:
+  - ECMAScript 2015
+  - Functions
+  - JavaScript
+  - Reference
+translation_of: Web/JavaScript/Reference/Functions/rest_parameters
+original_slug: Web/JavaScript/Reference/Fonctions/paramètres_du_reste
+---
+{{jsSidebar("Functions")}}
+
+Cette syntaxe permet de représenter un nombre indéfini d'arguments sous forme d'un tableau.
+
+{{EmbedInteractiveExample("pages/js/functions-restparameters.html")}}
+
+## Syntaxe
+
+```js
+function f(a, b, ...lesArguments) {
+  // ...
+}
+```
+
+## Description
+
+Si le dernier paramètre nommé fourni à la fonction est préfixé de `...` (trois points), il devient un tableau dont les éléments entre `0` (inclus) et `lesArguments.length` (exclus) sont fournis comme autres arguments à la fonction.
+
+```js
+function maFonction(a, b, ...plusDArguments) {
+  console.log("a", a);
+  console.log("b", b);
+  console.log("plusDArguments", plusDArguments);
+}
+
+maFonction("un", "deux", "trois", "quatre", "cinq");
+// affichera ceci dans la console :
+// a, "un"
+// b, "deux"
+// plusDArguments, ["trois", "quatre", "cinq"]
+```
+
+### Les différences entre les paramètres du reste et l'objet `arguments`
+
+Il y a trois principales différences entre les paramètres du reste et l'objet {{jsxref("Fonctions/arguments","arguments")}} :
+
+- les paramètres du reste sont uniquement ceux qui ne possèdent pas de noms à part entière (autrement dit ceux qui ne sont pas formellement définis dans l'expression de fonction), l'objet `arguments` contient chaque argument passé à la fonction
+- l'objet `arguments` n'est pas, à strictement parler, un tableau. Le paramètre représentant les arguments restant est une instance d'{{jsxref("Array","Array")}} à laquelle on peut appliquer directement des méthodes comme {{jsxref("Array/sort","sort")}}, {{jsxref("Array/map","map")}}, {{jsxref("Array/forEach","forEach")}} ou {{jsxref("Array/pop","pop")}}
+- l'objet `arguments` possède des fonctionnalités spécifiques (comme, par exemple, la propriété `callee`)
+
+### Convertir `arguments` en un tableau
+
+Ces paramètres ont été introduits afin de réduire le code passe-partout souvent induit par les arguments.
+
+```js
+// Avant les paramètres du reste, on observait souvent ce style de code :
+function f(a, b){
+  var args = Array.prototype.slice.call(arguments, f.length);
+  // ou encore
+  var args = [].slice.call(arguments);
+  // ou encore
+  var args = Array.from(arguments);
+
+  // et on pouvait alors écrire
+  var premier = args.shift(); // OK
+  // mais pas
+  var premier = arguments.shift(); // erreur car arguments n'est pas un tableau
+}
+
+// ce qui est l'équivalent de
+function f(...args) {
+  var tabNormal = args;
+  var premier = tabNormal.shift();
+}
+```
+
+### La décomposition sur les paramètres du reste
+
+On peut également décomposer les paramètres du reste en variables distinctes :
+
+```js
+function f(...[a, b, c]) {
+  return a + b + c;
+}
+
+f(1);          // NaN (b et c valent undefined)
+f(1, 2, 3);    // 6
+f(1, 2, 3, 4); // 6, le dernier paramètre n'est pas décomposé
+```
+
+Vous pouvez également accéder aux éléments des paramètres du reste :
+
+```js
+function fun1(...lesArguments) {
+    console.log("valeur", lesArguments[0][0]);
+}
+
+fun1([5, 2], [5, 4]); // 5
+fun1([8, 2]); // 8
+fun1([9, 6, 7]); // 9
+```
+
+## Exemples
+
+S'il n'y a qu'un seul argument qui est décomposé par la syntaxe, la valeur sera toujours un tableau :
+
+```js
+function maFonction(a, b, ...autres);
+  console.log(a);
+  console.log(b);
+  console.log(autres);
+}
+
+maFonction("un", "deux", "trois");
+// affichera ceci dans la console
+// "un"
+// "deux"
+// ["trois"]
+```
+
+De même, s'il n'y a pas suffisamment d'arguments, ce sera un tableau vide :
+
+```js
+function maFonction(a, b, ...autres);
+  console.log(a);
+  console.log(b);
+  console.log(autres);
+}
+
+maFonction("un", "deux");
+// affichera ceci dans la console
+// "un"
+// "deux"
+// []
+```
+
+`lesArguments` est un tableau et dispose donc d'une propriété `length` permettant de compter ses éléments :
+
+```js
+function fun1(...lesArguments) {
+  console.log(lesArguments.length);
+}
+
+fun1();  // 0
+fun1(5); // 1
+fun1(5, 6, 7); // 3
+```
+
+Dans l'exemple qui suit, on utilise le paramètre Rest pour collecter les arguments après le premier pour les multiplier par le premier :
+
+```js
+function multiplier(facteur, ...lesArguments) {
+  return lesArguments.map(function (element) {
+    return facteur * element;
+  });
+}
+
+var arr = multiplier(2, 1, 2, 3);
+console.log(arr); // [2, 4, 6]
+```
+
+L'exemple qui suit illustre comment on peut utiliser des méthodes de `Array` sur le paramètre Rest mais pas sur l'objet `arguments` :
+
+```js
+function trierParamRest(...lesArguments) {
+  var argumentsTriés = lesArguments.sort();
+  return argumentsTriés;
+}
+
+console.log(trierParamRest(5,3,7,1)); // shows 1,3,5,7
+
+function trierArguments() {
+  var argumentsTriés = arguments.sort();
+  return argumentsTriés; // cela ne sera jamais appelé
+}
+
+// renvoie une exception TypeError: arguments.sort n'est pas une function
+console.log(trierArguments(5,3,7,1));
+```
+
+Pour utiliser les méthodes propres aux instances d'`Array` sur l'objet `arguments`, il est nécessaire de le convertir.
+
+```js
+function trierAguments() {
+  var args = Array.from(arguments);
+  var argumentsTriés = args.sort();
+  return argumentsTriés;
+}
+console.log(trierArguments(5, 3, 7, 1)); // [1, 3, 5, 7]
+```
+
+## Spécifications
+
+| Spécification                                                                                        | État                         | Commentaires         |
+| ---------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName('ES6', '#sec-function-definitions', 'Function Definitions')}}     | {{Spec2('ES6')}}         | Définition initiale. |
+| {{SpecName('ESDraft', '#sec-function-definitions', 'Function Definitions')}} | {{Spec2('ESDraft')}} |                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.functions.rest_parameters")}}
+
+## Voir aussi
+
+- L'objet {{jsxref("Fonctions/arguments","arguments")}}
+- {{jsxref("Array","Array")}}
+- {{jsxref("Fonctions","Les fonctions et leurs portées","",1)}}
+- {{jsxref("Opérateurs/Syntaxe_décomposition","L'opérateur de décomposition","",1)}}
+- [Proposition originale sur ecmascript.org](https://wiki.ecmascript.org/doku.php?id=harmony:rest_parameters) (en anglais)
+- [JavaScript arguments object and beyond](https://javascriptweblog.wordpress.com/2011/01/18/javascripts-arguments-object-and-beyond/) (article en anglais)
diff --git a/files/fr/web/javascript/reference/functions/set/index.html b/files/fr/web/javascript/reference/functions/set/index.html
deleted file mode 100644
index 2e7778875e..0000000000
--- a/files/fr/web/javascript/reference/functions/set/index.html
+++ /dev/null
@@ -1,139 +0,0 @@
----
-title: L'opérateur set
-slug: Web/JavaScript/Reference/Functions/set
-tags:
-  - ECMAScript 5
-  - Functions
-  - JavaScript
-  - Reference
-translation_of: Web/JavaScript/Reference/Functions/set
-original_slug: Web/JavaScript/Reference/Fonctions/set
----
-<div>{{jsSidebar("Functions")}}</div>
-
-<p>La syntaxe <strong><code>set</code></strong> permet de lier une propriété d'un objet à une fonction qui sera appelée à chaque tentative de modification de cette propriété.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/functions-setter.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">{set <em>prop</em>(<em>val</em>) { . . .}}
-{set [expression](<em>val</em>) { . . .}}</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>prop</code></dt>
- <dd>Le nom de la propriété à lier à la fonction.</dd>
- <dt><code>val</code></dt>
- <dd>Un alias pour la variable qui contient la valeur qu'on souhaiterait affecter à <code>prop.</code></dd>
- <dt><code>expression</code></dt>
- <dd>Avec ECMAScript 2015, il est également possible d'utiliser des expressions pour utiliser un nom de propriété calculé à lier à la fonction.</dd>
-</dl>
-
-<h2 id="Description">Description</h2>
-
-<p>En JavaScript, un mutateur (ou <em>setter</em> en anglais) peut être utiisé afin d'exécuter une fonction à chaque fois qu'on souhaite modifier la valeur d'une propriété donnée. La plupart du temps, les mutateurs sont utilisés avec les accesseurs (<em>getters</em>) afin de créer une pseudo-propriété. Il n'est pas possible d'avoir à la fois un mutateur et une valeur donnée pour une même propriété.</p>
-
-<p>On notera que <code>set</code> :</p>
-
-<div>
-<ul>
- <li>peut avoir un identifiant qui est soit un nombre soit une chaîne de caractères</li>
- <li>doit avoir exactement un paramètre (voir l'article « <a class="external" href="https://whereswalden.com/2010/08/22/incompatible-es5-change-literal-getter-and-setter-functions-must-now-have-exactly-zero-or-one-arguments/" rel="external nofollow">Incompatible <abbr title="ECMAScript 5th edition">ES5</abbr> change: literal getter and setter functions must now have exactly zero or one arguments</a> » (en anglais) pour plus d'informations)</li>
- <li>ne doit pas apparaître dans un littéral objet qui possède un autre <code>set</code> ou une autre propriété avec la même clé :<br>
-  ( <code>{ set x(v) { }, set x(v) { } }</code> et <code>{ x: ..., set x(v) { } }</code> seront interdits)</li>
-</ul>
-</div>
-
-<p>On peut retirer un mutateur d'un objet grâce à l'opérateur {{jsxref("Opérateurs/L_opérateur_delete","delete")}}.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Définir_un_mutateur_sur_de_nouveaux_objets_avec_un_littéral_objet">Définir un mutateur sur de nouveaux objets avec un littéral objet</h3>
-
-<p>Dans l'exemple qui suit, on définit une pseudo-propriété <code>courant</code> pour un objet <code>o</code> qui, lorsqu'elle recevra une valeur, mettra à jour la propriété <code>log</code> avec la valeur reçue :</p>
-
-<pre class="brush: js">var o = {
-  set courant (str) {
-    this.log[this.log.length] = str;
-  },
-  log: []
-}
-</pre>
-
-<p>On notera que <code>courant</code> n'est pas défini. Toute tentative pour y accéder renverra <code>undefined</code>.</p>
-
-<h3 id="Supprimer_un_mutateur_grâce_à_l'opérateur_delete">Supprimer un mutateur grâce à l'opérateur <code>delete</code></h3>
-
-<p>Si on souhaite retirer un mutateur, on peut simplement utiliser l'opérateur {{jsxref("Opérateurs/L_opérateur_delete","delete")}} :</p>
-
-<pre class="brush: js">delete o.courant;
-</pre>
-
-<h3 id="Définir_un_mutateur_sur_un_objet_existant_avec_defineProperty">Définir un mutateur sur un objet existant avec <code>defineProperty</code></h3>
-
-<p>On peut également ajouter un mutateur sur un objet d'ores et déjà créé. Pour cela, on utilisera la méthode {{jsxref("Object.defineProperty()")}}.</p>
-
-<pre class="brush: js">var o = { a:0 };
-
-Object.defineProperty(o, "b", { set: function (x) { this.a = x / 2; } });
-
-o.b = 10; // On utilise le setter, qui affecte 10 / 2 (5) à 'a'
-console.log(o.a) // 5</pre>
-
-<h3 id="Utiliser_un_nom_de_propriété_calculé">Utiliser un nom de propriété calculé</h3>
-
-<pre class="brush: js">var expr = "toto";
-
-var obj = {
-  bidule: "truc",
-  set [expr](v) { this.bidule = v; }
-};
-
-console.log(obj.bidule); // "truc"
-obj.toto = "bidule";      // le mutateur est utilisé
-console.log(obj.bidule); // "bidule"
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-11.1.5', 'Object Initializer')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td>Définition initiale</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-method-definitions', 'Method definitions')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td>Ajout des noms de propriétés calculés</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-method-definitions', 'Method definitions')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.functions.set")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Fonctions/get","get")}}</li>
- <li>{{jsxref("Opérateurs/L_opérateur_delete","delete")}}</li>
- <li>{{jsxref("Object.defineProperty()")}}</li>
- <li>{{jsxref("Object.defineGetter", "__defineGetter__")}}</li>
- <li>{{jsxref("Object.defineSetter", "__defineSetter__")}}</li>
- <li><a href="/fr/docs/Web/JavaScript/Guide/Utiliser_les_objets#D.C3.A9finir_des_getters_et_setters">Définir des accesseurs et des mutateurs</a>, dans le Guide JavaScript</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/functions/set/index.md b/files/fr/web/javascript/reference/functions/set/index.md
new file mode 100644
index 0000000000..4ef288d7bc
--- /dev/null
+++ b/files/fr/web/javascript/reference/functions/set/index.md
@@ -0,0 +1,117 @@
+---
+title: L'opérateur set
+slug: Web/JavaScript/Reference/Functions/set
+tags:
+  - ECMAScript 5
+  - Functions
+  - JavaScript
+  - Reference
+translation_of: Web/JavaScript/Reference/Functions/set
+original_slug: Web/JavaScript/Reference/Fonctions/set
+---
+{{jsSidebar("Functions")}}
+
+La syntaxe **`set`** permet de lier une propriété d'un objet à une fonction qui sera appelée à chaque tentative de modification de cette propriété.
+
+{{EmbedInteractiveExample("pages/js/functions-setter.html")}}
+
+## Syntaxe
+
+    {set prop(val) { . . .}}
+    {set [expression](val) { . . .}}
+
+### Paramètres
+
+- `prop`
+  - : Le nom de la propriété à lier à la fonction.
+- `val`
+  - : Un alias pour la variable qui contient la valeur qu'on souhaiterait affecter à `prop.`
+- `expression`
+  - : Avec ECMAScript 2015, il est également possible d'utiliser des expressions pour utiliser un nom de propriété calculé à lier à la fonction.
+
+## Description
+
+En JavaScript, un mutateur (ou _setter_ en anglais) peut être utiisé afin d'exécuter une fonction à chaque fois qu'on souhaite modifier la valeur d'une propriété donnée. La plupart du temps, les mutateurs sont utilisés avec les accesseurs (_getters_) afin de créer une pseudo-propriété. Il n'est pas possible d'avoir à la fois un mutateur et une valeur donnée pour une même propriété.
+
+On notera que `set` :
+
+- peut avoir un identifiant qui est soit un nombre soit une chaîne de caractères
+- doit avoir exactement un paramètre (voir l'article « [Incompatible ES5 change: literal getter and setter functions must now have exactly zero or one arguments](https://whereswalden.com/2010/08/22/incompatible-es5-change-literal-getter-and-setter-functions-must-now-have-exactly-zero-or-one-arguments/) » (en anglais) pour plus d'informations)
+- ne doit pas apparaître dans un littéral objet qui possède un autre `set` ou une autre propriété avec la même clé :
+  ( `{ set x(v) { }, set x(v) { } }` et `{ x: ..., set x(v) { } }` seront interdits)
+
+On peut retirer un mutateur d'un objet grâce à l'opérateur {{jsxref("Opérateurs/L_opérateur_delete","delete")}}.
+
+## Exemples
+
+### Définir un mutateur sur de nouveaux objets avec un littéral objet
+
+Dans l'exemple qui suit, on définit une pseudo-propriété `courant` pour un objet `o` qui, lorsqu'elle recevra une valeur, mettra à jour la propriété `log` avec la valeur reçue :
+
+```js
+var o = {
+  set courant (str) {
+    this.log[this.log.length] = str;
+  },
+  log: []
+}
+```
+
+On notera que `courant` n'est pas défini. Toute tentative pour y accéder renverra `undefined`.
+
+### Supprimer un mutateur grâce à l'opérateur `delete`
+
+Si on souhaite retirer un mutateur, on peut simplement utiliser l'opérateur {{jsxref("Opérateurs/L_opérateur_delete","delete")}} :
+
+```js
+delete o.courant;
+```
+
+### Définir un mutateur sur un objet existant avec `defineProperty`
+
+On peut également ajouter un mutateur sur un objet d'ores et déjà créé. Pour cela, on utilisera la méthode {{jsxref("Object.defineProperty()")}}.
+
+```js
+var o = { a:0 };
+
+Object.defineProperty(o, "b", { set: function (x) { this.a = x / 2; } });
+
+o.b = 10; // On utilise le setter, qui affecte 10 / 2 (5) à 'a'
+console.log(o.a) // 5
+```
+
+### Utiliser un nom de propriété calculé
+
+```js
+var expr = "toto";
+
+var obj = {
+  bidule: "truc",
+  set [expr](v) { this.bidule = v; }
+};
+
+console.log(obj.bidule); // "truc"
+obj.toto = "bidule";      // le mutateur est utilisé
+console.log(obj.bidule); // "bidule"
+```
+
+## Spécifications
+
+| Spécification                                                                                    | État                         | Commentaires                          |
+| ------------------------------------------------------------------------------------------------ | ---------------------------- | ------------------------------------- |
+| {{SpecName('ES5.1', '#sec-11.1.5', 'Object Initializer')}}                     | {{Spec2('ES5.1')}}     | Définition initiale                   |
+| {{SpecName('ES6', '#sec-method-definitions', 'Method definitions')}}     | {{Spec2('ES6')}}         | Ajout des noms de propriétés calculés |
+| {{SpecName('ESDraft', '#sec-method-definitions', 'Method definitions')}} | {{Spec2('ESDraft')}} |                                       |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.functions.set")}}
+
+## Voir aussi
+
+- {{jsxref("Fonctions/get","get")}}
+- {{jsxref("Opérateurs/L_opérateur_delete","delete")}}
+- {{jsxref("Object.defineProperty()")}}
+- {{jsxref("Object.defineGetter", "__defineGetter__")}}
+- {{jsxref("Object.defineSetter", "__defineSetter__")}}
+- [Définir des accesseurs et des mutateurs](/fr/docs/Web/JavaScript/Guide/Utiliser_les_objets#D.C3.A9finir_des_getters_et_setters), dans le Guide JavaScript
diff --git a/files/fr/web/javascript/reference/global_objects/aggregateerror/index.html b/files/fr/web/javascript/reference/global_objects/aggregateerror/index.html
deleted file mode 100644
index 408d49a007..0000000000
--- a/files/fr/web/javascript/reference/global_objects/aggregateerror/index.html
+++ /dev/null
@@ -1,84 +0,0 @@
----
-title: AggregateError
-slug: Web/JavaScript/Reference/Global_Objects/AggregateError
-tags:
-  - AggregateError
-  - Classe
-  - Experimental
-  - Interface
-  - JavaScript
-translation_of: Web/JavaScript/Reference/Global_Objects/AggregateError
-original_slug: Web/JavaScript/Reference/Objets_globaux/AggregateError
----
-<div>{{JSRef}}</div>
-
-<p>Un objet <code><strong>AggregateError</strong></code> représente une erreur lorsque plusieurs erreurs doivent être agrégées en une seule. Ce type d'exception est levée lorsque plusieurs erreurs sont rapportées par une opération, par exemple avec {{JSxRef("Promise.any()")}} lorsque l'ensemble des promesses qui lui sont passées échouent.</p>
-
-<h2 id="Constructeur">Constructeur</h2>
-
-<dl>
- <dt><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/AggregateError/AggregateError"><code>AggregateError()</code></a></dt>
- <dd>Crée un nouvel objet <code>AggregateError</code>.</dd>
-</dl>
-
-<h2 id="Propriétés_des_instances">Propriétés des instances</h2>
-
-<dl>
- <dt>{{JSxRef("Error.prototype.message", "AggregateError.prototype.message")}}</dt>
- <dd>Le message d'erreur. La valeur par défaut est <code>""</code>.</dd>
- <dt>{{JSxRef("Error.prototype.name", "AggregateError.prototype.name")}}</dt>
- <dd>Le nom de l'erreur. La valeur par défaut est <code>"AggregateError"</code>.</dd>
-</dl>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Intercepter_une_erreur_AggregateError">Intercepter une erreur <code>AggregateError</code></h3>
-
-<pre class="brush: js; notranslate">Promise.any([
-  Promise.reject(new Error("une erreur")),
-]).catch(e =&gt; {
-  console.log(e instanceof AggregateError); // true
-  console.log(e.message);                   // "All Promises rejected"
-  console.log(e.name);                      // "AggregateError"
-  console.log(e.errors);                    // [ Error: "une erreur" ]
-});
-</pre>
-
-<h3 id="Créer_un_objet_AggregateError">Créer un objet <code>AggregateError</code></h3>
-
-<pre class="brush: js; notranslate">try {
-  throw new AggregateError([
-    new Error("une erreur"),
-  ], 'Coucou');
-} catch (e) {
-  console.log(e instanceof AggregateError); // true
-  console.log(e.message);                   // "Coucou"
-  console.log(e.name);                      // "AggregateError"
-  console.log(e.errors);                    // [ Error: "une erreur" ]
-}
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('Promise.any', '#sec-aggregate-error-object-structure', 'AggregateError')}}</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.AggregateError")}}</p>
-
-<h2 id="Voir">Voir</h2>
-
-<ul>
- <li>{{JSxRef("Error")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/aggregateerror/index.md b/files/fr/web/javascript/reference/global_objects/aggregateerror/index.md
new file mode 100644
index 0000000000..c649d30c9a
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/aggregateerror/index.md
@@ -0,0 +1,71 @@
+---
+title: AggregateError
+slug: Web/JavaScript/Reference/Global_Objects/AggregateError
+tags:
+  - AggregateError
+  - Classe
+  - Experimental
+  - Interface
+  - JavaScript
+translation_of: Web/JavaScript/Reference/Global_Objects/AggregateError
+original_slug: Web/JavaScript/Reference/Objets_globaux/AggregateError
+---
+{{JSRef}}
+
+Un objet **`AggregateError`** représente une erreur lorsque plusieurs erreurs doivent être agrégées en une seule. Ce type d'exception est levée lorsque plusieurs erreurs sont rapportées par une opération, par exemple avec {{JSxRef("Promise.any()")}} lorsque l'ensemble des promesses qui lui sont passées échouent.
+
+## Constructeur
+
+- [`AggregateError()`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/AggregateError/AggregateError)
+  - : Crée un nouvel objet `AggregateError`.
+
+## Propriétés des instances
+
+- {{JSxRef("Error.prototype.message", "AggregateError.prototype.message")}}
+  - : Le message d'erreur. La valeur par défaut est `""`.
+- {{JSxRef("Error.prototype.name", "AggregateError.prototype.name")}}
+  - : Le nom de l'erreur. La valeur par défaut est `"AggregateError"`.
+
+## Exemples
+
+### Intercepter une erreur `AggregateError`
+
+```js
+Promise.any([
+  Promise.reject(new Error("une erreur")),
+]).catch(e => {
+  console.log(e instanceof AggregateError); // true
+  console.log(e.message);                   // "All Promises rejected"
+  console.log(e.name);                      // "AggregateError"
+  console.log(e.errors);                    // [ Error: "une erreur" ]
+});
+```
+
+### Créer un objet `AggregateError`
+
+```js
+try {
+  throw new AggregateError([
+    new Error("une erreur"),
+  ], 'Coucou');
+} catch (e) {
+  console.log(e instanceof AggregateError); // true
+  console.log(e.message);                   // "Coucou"
+  console.log(e.name);                      // "AggregateError"
+  console.log(e.errors);                    // [ Error: "une erreur" ]
+}
+```
+
+## Spécifications
+
+| Spécification                                                                                                        |
+| -------------------------------------------------------------------------------------------------------------------- |
+| {{SpecName('Promise.any', '#sec-aggregate-error-object-structure', 'AggregateError')}} |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.AggregateError")}}
+
+## Voir
+
+- {{JSxRef("Error")}}
diff --git a/files/fr/web/javascript/reference/global_objects/array/@@iterator/index.html b/files/fr/web/javascript/reference/global_objects/array/@@iterator/index.html
deleted file mode 100644
index 44665dcba8..0000000000
--- a/files/fr/web/javascript/reference/global_objects/array/@@iterator/index.html
+++ /dev/null
@@ -1,89 +0,0 @@
----
-title: Array.prototype[@@iterator]()
-slug: Web/JavaScript/Reference/Global_Objects/Array/@@iterator
-tags:
-  - Array
-  - ECMAScript 2015
-  - Iterator
-  - JavaScript
-  - Méthode
-  - Prototype
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Array/@@iterator
-original_slug: Web/JavaScript/Reference/Objets_globaux/Array/@@iterator
----
-<div>{{JSRef}}</div>
-
-<p>La valeur initiale de la propriété <code><strong>@@iterator</strong></code> correspond à la valeur initiale fournie par l'itérateur {{jsxref("Array.prototype.values()", "values")}}.</p>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>arr</var>[Symbol.iterator]()</pre>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>La première valeur fournie par {{jsxref("Array.prototype.values()","values()")}}. Si on utilise <code>arr[Symbol.iterator]</code> (sans les parenthèses) le navigateur renverra par défaut la fonction {{jsxref("Array.prototype.values()", "values()")}}.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Parcourir_un_tableau_avec_une_boucle_for...of">Parcourir un tableau avec une boucle <code>for...of</code></h3>
-
-<pre class="brush: js">var arr = ['w', 'y', 'k', 'o', 'p'];
-var eArr  = arr[Symbol.iterator]();
-// il est nécessaire que l'environnement supporte
-// les boucles for..of et les variables
-// utilisées avec let ou const ou var
-for (let letter of eArr) {
-  console.log(letter);
-}
-</pre>
-
-<h3 id="Parcourir_un_tableau_avec_next">Parcourir un tableau avec <code>next</code></h3>
-
-<pre class="brush: js">var arr = ['w', 'y', 'k', 'o', 'p'];
-var eArr = arr[Symbol.iterator]();
-console.log(eArr.next().value); // w
-console.log(eArr.next().value); // y
-console.log(eArr.next().value); // k
-console.log(eArr.next().value); // o
-console.log(eArr.next().value); // p
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-array.prototype-@@iterator', 'Array.prototype[@@iterator]()')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-array.prototype-@@iterator', 'Array.prototype[@@iterator]()')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Array.@@iterator")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Array.prototype.keys()")}}</li>
- <li>{{jsxref("Array.prototype.entries()")}}</li>
- <li>{{jsxref("Array.prototype.forEach()")}}</li>
- <li>{{jsxref("Array.prototype.every()")}}</li>
- <li>{{jsxref("Array.prototype.some()")}}</li>
- <li>{{jsxref("Array.prototype.values()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/array/@@iterator/index.md b/files/fr/web/javascript/reference/global_objects/array/@@iterator/index.md
new file mode 100644
index 0000000000..c2ae826291
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/array/@@iterator/index.md
@@ -0,0 +1,72 @@
+---
+title: Array.prototype[@@iterator]()
+slug: Web/JavaScript/Reference/Global_Objects/Array/@@iterator
+tags:
+  - Array
+  - ECMAScript 2015
+  - Iterator
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/@@iterator
+original_slug: Web/JavaScript/Reference/Objets_globaux/Array/@@iterator
+---
+{{JSRef}}
+
+La valeur initiale de la propriété **`@@iterator`** correspond à la valeur initiale fournie par l'itérateur {{jsxref("Array.prototype.values()", "values")}}.
+
+## Syntaxe
+
+    arr[Symbol.iterator]()
+
+### Valeur de retour
+
+La première valeur fournie par {{jsxref("Array.prototype.values()","values()")}}. Si on utilise `arr[Symbol.iterator]` (sans les parenthèses) le navigateur renverra par défaut la fonction {{jsxref("Array.prototype.values()", "values()")}}.
+
+## Exemples
+
+### Parcourir un tableau avec une boucle `for...of`
+
+```js
+var arr = ['w', 'y', 'k', 'o', 'p'];
+var eArr  = arr[Symbol.iterator]();
+// il est nécessaire que l'environnement supporte
+// les boucles for..of et les variables
+// utilisées avec let ou const ou var
+for (let letter of eArr) {
+  console.log(letter);
+}
+```
+
+### Parcourir un tableau avec `next`
+
+```js
+var arr = ['w', 'y', 'k', 'o', 'p'];
+var eArr = arr[Symbol.iterator]();
+console.log(eArr.next().value); // w
+console.log(eArr.next().value); // y
+console.log(eArr.next().value); // k
+console.log(eArr.next().value); // o
+console.log(eArr.next().value); // p
+```
+
+## Spécifications
+
+| Spécification                                                                                                            | État                         | Commentaires         |
+| ------------------------------------------------------------------------------------------------------------------------ | ---------------------------- | -------------------- |
+| {{SpecName('ES2015', '#sec-array.prototype-@@iterator', 'Array.prototype[@@iterator]()')}} | {{Spec2('ES2015')}}     | Définition initiale. |
+| {{SpecName('ESDraft', '#sec-array.prototype-@@iterator', 'Array.prototype[@@iterator]()')}} | {{Spec2('ESDraft')}} |                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Array.@@iterator")}}
+
+## Voir aussi
+
+- {{jsxref("Array.prototype.keys()")}}
+- {{jsxref("Array.prototype.entries()")}}
+- {{jsxref("Array.prototype.forEach()")}}
+- {{jsxref("Array.prototype.every()")}}
+- {{jsxref("Array.prototype.some()")}}
+- {{jsxref("Array.prototype.values()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/array/@@species/index.html b/files/fr/web/javascript/reference/global_objects/array/@@species/index.html
deleted file mode 100644
index 8275c5757d..0000000000
--- a/files/fr/web/javascript/reference/global_objects/array/@@species/index.html
+++ /dev/null
@@ -1,75 +0,0 @@
----
-title: get Array[@@species]
-slug: Web/JavaScript/Reference/Global_Objects/Array/@@species
-tags:
-  - Array
-  - JavaScript
-  - Méthode
-  - Prototype
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Array/@@species
-original_slug: Web/JavaScript/Reference/Objets_globaux/Array/@@species
----
-<div>{{JSRef}}</div>
-
-<p>La propriété d'accesseur <code><strong>Array[@@species]</strong></code> renvoie le constructeur <code>Array</code>.</p>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">Array[Symbol.species]
-</pre>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Le constructeur {{jsxref("Array")}}.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>L'accesseur <code>species</code> renvoie le constructeur par défaut pour les objets <code>Array</code>. Les constructeurs des sous-classes peuvent le surcharger afin de modifier l'affectation du constructeur.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<p>La propriété renvoie le constructeur par défaut, dans le cas des objets <code>Array</code>, c'est le constructeur <code>Array</code> :</p>
-
-<pre class="brush: js">Array[Symbol.species]; // function Array()</pre>
-
-<p>Pour un objet dérivé, la valeur de <code>species</code> pour une classe <code>MonArray</code> sera le constructeur de cette classe. Vous pouvez surcharger ce comportement afin de renvoyer le constructeur <code>Array</code> :</p>
-
-<pre class="brush: js">class MonArray extends Array {
-  // On surcharge le symbole species
-  // pour renvoyer le constructeur Array parent
-  static get [Symbol.species]() { return Array; }
-}</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-get-array-@@species', 'get Array [ @@species ]')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-get-array-@@species', 'get Array [ @@species ]')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Array.@@species")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Array")}}</li>
- <li>{{jsxref("Symbol.species")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/array/@@species/index.md b/files/fr/web/javascript/reference/global_objects/array/@@species/index.md
new file mode 100644
index 0000000000..1a4970e0f7
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/array/@@species/index.md
@@ -0,0 +1,61 @@
+---
+title: get Array[@@species]
+slug: Web/JavaScript/Reference/Global_Objects/Array/@@species
+tags:
+  - Array
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/@@species
+original_slug: Web/JavaScript/Reference/Objets_globaux/Array/@@species
+---
+{{JSRef}}
+
+La propriété d'accesseur **`Array[@@species]`** renvoie le constructeur `Array`.
+
+## Syntaxe
+
+    Array[Symbol.species]
+
+### Valeur de retour
+
+Le constructeur {{jsxref("Array")}}.
+
+## Description
+
+L'accesseur `species` renvoie le constructeur par défaut pour les objets `Array`. Les constructeurs des sous-classes peuvent le surcharger afin de modifier l'affectation du constructeur.
+
+## Exemples
+
+La propriété renvoie le constructeur par défaut, dans le cas des objets `Array`, c'est le constructeur `Array` :
+
+```js
+Array[Symbol.species]; // function Array()
+```
+
+Pour un objet dérivé, la valeur de `species` pour une classe `MonArray` sera le constructeur de cette classe. Vous pouvez surcharger ce comportement afin de renvoyer le constructeur `Array` :
+
+```js
+class MonArray extends Array {
+  // On surcharge le symbole species
+  // pour renvoyer le constructeur Array parent
+  static get [Symbol.species]() { return Array; }
+}
+```
+
+## Spécifications
+
+| Spécification                                                                                            | État                         | Commentaires         |
+| -------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName('ES6', '#sec-get-array-@@species', 'get Array [ @@species ]')}}     | {{Spec2('ES6')}}         | Définition initiale. |
+| {{SpecName('ESDraft', '#sec-get-array-@@species', 'get Array [ @@species ]')}} | {{Spec2('ESDraft')}} |                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Array.@@species")}}
+
+## Voir aussi
+
+- {{jsxref("Array")}}
+- {{jsxref("Symbol.species")}}
diff --git a/files/fr/web/javascript/reference/global_objects/array/@@unscopables/index.html b/files/fr/web/javascript/reference/global_objects/array/@@unscopables/index.html
deleted file mode 100644
index c0f9883779..0000000000
--- a/files/fr/web/javascript/reference/global_objects/array/@@unscopables/index.html
+++ /dev/null
@@ -1,73 +0,0 @@
----
-title: Array.prototype[@@unscopables]
-slug: Web/JavaScript/Reference/Global_Objects/Array/@@unscopables
-tags:
-  - Array
-  - ECMAScript 2015
-  - JavaScript
-  - Propriété
-  - Prototype
-translation_of: Web/JavaScript/Reference/Global_Objects/Array/@@unscopables
-original_slug: Web/JavaScript/Reference/Objets_globaux/Array/@@unscopables
----
-<div>{{JSRef}}</div>
-
-<p>La propriété symbol <code><strong>@@unscopable</strong></code> contient les noms des propriétés qui ne faisait pas partie du standard ECMAScript avant ES2015 (ES6). Ces propriétés sont exclues lors de liaisons effectuée via l'instruction <code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/with">with</a></code>.</p>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>arr</var>[Symbol.unscopables]</pre>
-
-<h2 id="Description">Description</h2>
-
-<p>Les propriétés natives d'un objet <code>Array</code> qui sont exclues lorsqu'on utilise <code>with</code> sont <code>copyWithin</code>, <code>entries</code>, <code>fill</code>, <code>find</code>, <code>findIndex</code>, <code>includes</code>, <code>keys</code> et <code>values</code>.</p>
-
-<p>Voir la page sur le symbole {{jsxref("Symbol.unscopables")}} pour manipuler <code>unscopables</code> sur des objets personnalisés.</p>
-
-<p>{{js_property_attributes(0,0,1)}}</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<p>Le code qui suit fonctionne bien pour ES5 et les versions antérieures. En revanche, pour ECMAScript 2015 (ES6) et les versions ultérieures où la méthode  {{jsxref("Array.prototype.keys()")}} existe, lorsqu'on utilise un environnement créé avec <code>with</code>, <code>"keys"</code> serait désormais la méthode et non la variable. C'est là que le symbole natif <code>@@unscopables</code> <code>Array.prototype[@@unscopables]</code> intervient et empêche d'explorer ces méthodes avec <code>with</code>.</p>
-
-<pre class="brush: js">var keys = [];
-
-with(Array.prototype) {
-  keys.push("something");
-}
-
-Object.keys(Array.prototype[Symbol.unscopables]);
-// ["copyWithin", "entries", "fill", "find", "findIndex",
-//  "includes", "keys", "values"]</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-array.prototype-@@unscopables', 'Array.prototype[@@unscopables]')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-array.prototype-@@unscopables', 'Array.prototype[@@unscopables]')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Array.@@unscopables")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Symbol.unscopables")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/array/@@unscopables/index.md b/files/fr/web/javascript/reference/global_objects/array/@@unscopables/index.md
new file mode 100644
index 0000000000..0b5f7a4aee
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/array/@@unscopables/index.md
@@ -0,0 +1,58 @@
+---
+title: Array.prototype[@@unscopables]
+slug: Web/JavaScript/Reference/Global_Objects/Array/@@unscopables
+tags:
+  - Array
+  - ECMAScript 2015
+  - JavaScript
+  - Propriété
+  - Prototype
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/@@unscopables
+original_slug: Web/JavaScript/Reference/Objets_globaux/Array/@@unscopables
+---
+{{JSRef}}
+
+La propriété symbol **`@@unscopable`** contient les noms des propriétés qui ne faisait pas partie du standard ECMAScript avant ES2015 (ES6). Ces propriétés sont exclues lors de liaisons effectuée via l'instruction [`with`](/fr/docs/Web/JavaScript/Reference/Instructions/with).
+
+## Syntaxe
+
+    arr[Symbol.unscopables]
+
+## Description
+
+Les propriétés natives d'un objet `Array` qui sont exclues lorsqu'on utilise `with` sont `copyWithin`, `entries`, `fill`, `find`, `findIndex`, `includes`, `keys` et `values`.
+
+Voir la page sur le symbole {{jsxref("Symbol.unscopables")}} pour manipuler `unscopables` sur des objets personnalisés.
+
+{{js_property_attributes(0,0,1)}}
+
+## Exemples
+
+Le code qui suit fonctionne bien pour ES5 et les versions antérieures. En revanche, pour ECMAScript 2015 (ES6) et les versions ultérieures où la méthode  {{jsxref("Array.prototype.keys()")}} existe, lorsqu'on utilise un environnement créé avec `with`, `"keys"` serait désormais la méthode et non la variable. C'est là que le symbole natif `@@unscopables` `Array.prototype[@@unscopables]` intervient et empêche d'explorer ces méthodes avec `with`.
+
+```js
+var keys = [];
+
+with(Array.prototype) {
+  keys.push("something");
+}
+
+Object.keys(Array.prototype[Symbol.unscopables]);
+// ["copyWithin", "entries", "fill", "find", "findIndex",
+//  "includes", "keys", "values"]
+```
+
+## Spécifications
+
+| Spécification                                                                                                                    | État                         | Commentaires         |
+| -------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName('ES2015', '#sec-array.prototype-@@unscopables', 'Array.prototype[@@unscopables]')}}     | {{Spec2('ES2015')}}     | Définition initiale. |
+| {{SpecName('ESDraft', '#sec-array.prototype-@@unscopables', 'Array.prototype[@@unscopables]')}} | {{Spec2('ESDraft')}} |                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Array.@@unscopables")}}
+
+## Voir aussi
+
+- {{jsxref("Symbol.unscopables")}}
diff --git a/files/fr/web/javascript/reference/global_objects/array/array/index.html b/files/fr/web/javascript/reference/global_objects/array/array/index.html
deleted file mode 100644
index c00ef0c0b3..0000000000
--- a/files/fr/web/javascript/reference/global_objects/array/array/index.html
+++ /dev/null
@@ -1,85 +0,0 @@
----
-title: Constructeur Array()
-slug: Web/JavaScript/Reference/Global_Objects/Array/Array
-tags:
-  - Array
-  - Constructeur
-  - JavaScript
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Array/Array
-original_slug: Web/JavaScript/Reference/Objets_globaux/Array/Array
----
-<div>{{JSRef}}</div>
-
-<p>Le constructeur <strong><code>Array()</code></strong> permet de créer des objets {{jsxref("Array")}}.</p>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox notranslate">[<var>element0</var>, <var>element1</var>, ..., <var>elementN</var>]
-
-new Array(<var>element0</var>, <var>element1</var>[, ...[, <var>elementN</var>]])
-new Array(<var>longueurTableau</var>)</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>elementN</code></dt>
- <dd>Un tableau JavaScript est initialisé avec les éléments indiqués à moins qu'un seul argument ne soit passé (cf. <code>longueurTableau</code> ci-après). On notera que ce cas au limite ne s'applique qu'avec le constructeur <code>Array</code>. Si on utilise la forme littérale (avec les crochets), on peut initialiser un tableau avec un seul élément.</dd>
- <dt><code>longueurTableau</code></dt>
- <dd>Si le seul argument passé au constructeur <code>Array</code> est un entier entre 0 et 2^32-1 (inclus), le constructeur renverra un tableau dont la propriété <code>length</code> vaut ce nombre. <strong>Note :</strong> le tableau contiendra des éléments vides (à ne pas confondre avec des éléments qui vaudraient <code>undefined</code>). Si l'argument est un autre nombre, une exception {{jsxref("RangeError")}} sera levée.</dd>
-</dl>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Utilisation_de_la_notation_littérale">Utilisation de la notation littérale</h3>
-
-<p>Les tableaux peuvent être créés avec une notation <a href="/fr/docs/Web/JavaScript/Reference/Grammaire_lexicale#Litt%C3%A9raux_de_tableaux">littérale</a> :</p>
-
-<pre class="brush: js notranslate">let fruits = ['Pomme', 'Banane'];
-
-console.log(fruits.length); // 2
-console.log(fruits[0]);     // "Pomme"
-</pre>
-
-<h3 id="Utilisation_du_constructeur_avec_un_seul_paramètre">Utilisation du constructeur avec un seul paramètre</h3>
-
-<p>On peut créer des tableaux grâce au constructeur avec un seul paramètre numérique. On crée alors un tableau dont la propriété <code>length</code> vaut le nombre passé en argument et dont les éléments sont vides.</p>
-
-<pre class="brush: js notranslate">let fruits = new Array(2);
-
-console.log(fruits.length); // 2
-console.log(fruits[0]);     // undefined
-</pre>
-
-<h3 id="Utilisation_du_constructeur_avec_plusieurs_paramètres">Utilisation du constructeur avec plusieurs paramètres</h3>
-
-<p>Si on utilise plus d'un argument, un nouveau tableau ({{jsxref("Array")}}) sera construit avec les éléments passés en arguments.</p>
-
-<pre class="brush: js notranslate">let fruits = new Array('Pomme', 'Banane');
-
-console.log(fruits.length); // 2
-console.log(fruits[0]);     // "Pomme"
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-array-constructor', 'Array constructor')}}</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Array.Array")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>La classe {{jsxref("Array")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/array/array/index.md b/files/fr/web/javascript/reference/global_objects/array/array/index.md
new file mode 100644
index 0000000000..c1958d3879
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/array/array/index.md
@@ -0,0 +1,77 @@
+---
+title: Constructeur Array()
+slug: Web/JavaScript/Reference/Global_Objects/Array/Array
+tags:
+  - Array
+  - Constructeur
+  - JavaScript
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/Array
+original_slug: Web/JavaScript/Reference/Objets_globaux/Array/Array
+---
+{{JSRef}}
+
+Le constructeur **`Array()`** permet de créer des objets {{jsxref("Array")}}.
+
+## Syntaxe
+
+    [element0, element1, ..., elementN]
+
+    new Array(element0, element1[, ...[, elementN]])
+    new Array(longueurTableau)
+
+### Paramètres
+
+- `elementN`
+  - : Un tableau JavaScript est initialisé avec les éléments indiqués à moins qu'un seul argument ne soit passé (cf. `longueurTableau` ci-après). On notera que ce cas au limite ne s'applique qu'avec le constructeur `Array`. Si on utilise la forme littérale (avec les crochets), on peut initialiser un tableau avec un seul élément.
+- `longueurTableau`
+  - : Si le seul argument passé au constructeur `Array` est un entier entre 0 et 2^32-1 (inclus), le constructeur renverra un tableau dont la propriété `length` vaut ce nombre. **Note :** le tableau contiendra des éléments vides (à ne pas confondre avec des éléments qui vaudraient `undefined`). Si l'argument est un autre nombre, une exception {{jsxref("RangeError")}} sera levée.
+
+## Exemples
+
+### Utilisation de la notation littérale
+
+Les tableaux peuvent être créés avec une notation [littérale](/fr/docs/Web/JavaScript/Reference/Grammaire_lexicale#Litt%C3%A9raux_de_tableaux) :
+
+```js
+let fruits = ['Pomme', 'Banane'];
+
+console.log(fruits.length); // 2
+console.log(fruits[0]);     // "Pomme"
+```
+
+### Utilisation du constructeur avec un seul paramètre
+
+On peut créer des tableaux grâce au constructeur avec un seul paramètre numérique. On crée alors un tableau dont la propriété `length` vaut le nombre passé en argument et dont les éléments sont vides.
+
+```js
+let fruits = new Array(2);
+
+console.log(fruits.length); // 2
+console.log(fruits[0]);     // undefined
+```
+
+### Utilisation du constructeur avec plusieurs paramètres
+
+Si on utilise plus d'un argument, un nouveau tableau ({{jsxref("Array")}}) sera construit avec les éléments passés en arguments.
+
+```js
+let fruits = new Array('Pomme', 'Banane');
+
+console.log(fruits.length); // 2
+console.log(fruits[0]);     // "Pomme"
+```
+
+## Spécifications
+
+| Spécification                                                                                |
+| -------------------------------------------------------------------------------------------- |
+| {{SpecName('ESDraft', '#sec-array-constructor', 'Array constructor')}} |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Array.Array")}}
+
+## Voir aussi
+
+- La classe {{jsxref("Array")}}
diff --git a/files/fr/web/javascript/reference/global_objects/array/concat/index.html b/files/fr/web/javascript/reference/global_objects/array/concat/index.html
deleted file mode 100644
index e39788b6a0..0000000000
--- a/files/fr/web/javascript/reference/global_objects/array/concat/index.html
+++ /dev/null
@@ -1,155 +0,0 @@
----
-title: Array.prototype.concat()
-slug: Web/JavaScript/Reference/Global_Objects/Array/concat
-tags:
-  - Array
-  - JavaScript
-  - Méthode
-  - Prototype
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Array/concat
-original_slug: Web/JavaScript/Reference/Objets_globaux/Array/concat
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <code><strong>concat()</strong></code> est utilisée afin de fusionner un ou plusieurs tableaux en les concaténant. Cette méthode ne modifie pas les tableaux existants, elle renvoie un nouveau tableau qui est le résultat de l'opération.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/array-concat.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">let <var>nouveau_tableau</var> = <var>ancien_tableau</var>.concat(<var>valeur1</var>[, <var>valeur2</var>[, ...[, <var>valeurN</var>]]])</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>valeurN</code>{{optional_inline}}</dt>
- <dd>Des tableaux et/ou des valeurs à concaténer dans le nouveau tableau. Si tous les arguments <code>valeurN</code> valent <code>undefined</code>, <code>concat</code> renverra une copie superficielle du tableau sur lequel elle est appelée. Voir ci-après pour plus de détails.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Une nouvelle instance de {{jsxref("Array")}}.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>La méthode <code>concat</code> permet de créer un nouveau tableau constitué des éléments de l'objet <code>this</code> sur lequel elle a été appelée, suivis dans l'ordre par, pour chaque paramètre, les éléments de ce paramètre (s'il s'agit d'un tableau) ou le paramètre lui-même (s'il ne s'agit pas d'un tableau). La concaténation ne « déplie » pas les tableaux imbriqués.</p>
-
-<p>La méthode <code>concat</code> ne modifie pas <code>this</code> ni aucun des tableaux passés en paramètres, mais renvoie une copie qui contient des copies des mêmes éléments combinées que ceux des tableaux originaux. Les éléments des tableaux originaux sont copiés dans le nouveau tableau comme suit :</p>
-
-<ul>
- <li>Pour les références à des objets (et non les objets eux-mêmes) : <code>concat</code> copie ces références dans le nouveaux tableau. Le tableau original et le nouveau tableau feront référence au même objet. C'est-à-dire que si un objet référencé est modifié, ces changements seront visibles tant dans le nouveau que dans les tableaux originaux.</li>
-</ul>
-
-<ul>
- <li>Pour les chaînes, les booléens et les nombres « primitifs » (c'est-à-dire pas les objets {{jsxref("String", "String")}}, {{jsxref("Boolean")}} et {{jsxref("Number", "Number")}}) : <code>concat</code> copie les valeurs des chaînes et des nombres dans le nouveau tableau. (voir <a href="/fr/docs/Web/JavaScript/Structures_de_donn%C3%A9es#Les_types_de_donn%C3%A9es">Les types de données en JavaScript</a>).</li>
-</ul>
-
-<div class="note">
-<p><strong>Note :</strong> La concaténation n'impactera pas les tableaux originaux. Par la suite, toute opération sur le nouveau tableau n'aura aucun effet sur les tableaux d'origine, et vice versa.</p>
-</div>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Concaténer_deux_tableaux">Concaténer deux tableaux</h3>
-
-<p>Le code qui suit concatène deux tableaux :</p>
-
-<pre class="brush: js">let alpha = ["a", "b", "c"];
-let numerique = [1, 2, 3];
-
-alpha.concat(numerique);
-// donne : ["a", "b", "c", 1, 2, 3]
-</pre>
-
-<h3 id="Concaténer_trois_tableaux">Concaténer trois tableaux</h3>
-
-<p>Le code qui suit concatène trois tableaux :</p>
-
-<pre class="brush: js">let num1 = [1, 2, 3];
-let num2 = [4, 5, 6];
-let num3 = [7, 8, 9];
-
-let nums = num1.concat(num2, num3);
-
-console.log(nums);
-// [1, 2, 3, 4, 5, 6, 7, 8, 9]
-</pre>
-
-<h3 id="Concaténer_des_valeurs_avec_un_tableau">Concaténer des valeurs avec un tableau</h3>
-
-<p>Le code qui suit ajoute trois valeurs à un tableau :</p>
-
-<pre class="brush: js">let alpha = ['a', 'b', 'c'];
-
-let alphanumerique = alpha.concat(1, [2, 3]);
-
-console.log(alphanumerique);
-// ['a', 'b', 'c', 1, 2, 3]
-</pre>
-
-<h3 id="Concaténer_des_tableaux_imbriqués">Concaténer des tableaux imbriqués</h3>
-
-<p>Dans le code qui suit, on concatène deux tableaux qui ont plusieurs dimensions et on illustre la conservation des références :</p>
-
-<pre class="brush: js">let num1 = [[1]];
-let num2 = [2, [3]];
-
-let nums = num1.concat(num2);
-
-console.log(nums);
-// affichera [[1], 2, [3]]
-
-// Ici, on modifie le premier élément de num1
-num1[0].push(4);
-
-console.log(nums);
-// affichera [[1, 4], 2, [3]]</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('ES3')}}</td>
-   <td>{{Spec2('ES3')}}</td>
-   <td>Définition initiale. Implémentée avec JavaScript 1.2.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-15.4.4.4', 'Array.prototype.concat')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-array.prototype.concat', 'Array.prototype.concat')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-array.prototype.concat', 'Array.prototype.concat')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Array.concat")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Array.push", "push")}} / {{jsxref("Array.pop", "pop")}} qui permettent d'ajouter/retirer des éléments à partir de la fin du tableau</li>
- <li>{{jsxref("Array.unshift", "unshift")}} / {{jsxref("Array.shift", "shift")}} qui permettent d'ajouter/retirer des éléments à partir du début du tableau</li>
- <li>{{jsxref("Array.splice", "splice")}} qui permet d'ajouter/retirer des éléments à un endroit donné du tableau</li>
- <li>{{jsxref("String.prototype.concat()")}}</li>
- <li>{{jsxref("Symbol.isConcatSpreadable")}} (permet de contrôler la façon dont un tableau est ramené à une valeur)</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/array/concat/index.md b/files/fr/web/javascript/reference/global_objects/array/concat/index.md
new file mode 100644
index 0000000000..3a68c4f55e
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/array/concat/index.md
@@ -0,0 +1,127 @@
+---
+title: Array.prototype.concat()
+slug: Web/JavaScript/Reference/Global_Objects/Array/concat
+tags:
+  - Array
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/concat
+original_slug: Web/JavaScript/Reference/Objets_globaux/Array/concat
+---
+{{JSRef}}
+
+La méthode **`concat()`** est utilisée afin de fusionner un ou plusieurs tableaux en les concaténant. Cette méthode ne modifie pas les tableaux existants, elle renvoie un nouveau tableau qui est le résultat de l'opération.
+
+{{EmbedInteractiveExample("pages/js/array-concat.html")}}
+
+## Syntaxe
+
+    let nouveau_tableau = ancien_tableau.concat(valeur1[, valeur2[, ...[, valeurN]]])
+
+### Paramètres
+
+- `valeurN`{{optional_inline}}
+  - : Des tableaux et/ou des valeurs à concaténer dans le nouveau tableau. Si tous les arguments `valeurN` valent `undefined`, `concat` renverra une copie superficielle du tableau sur lequel elle est appelée. Voir ci-après pour plus de détails.
+
+### Valeur de retour
+
+Une nouvelle instance de {{jsxref("Array")}}.
+
+## Description
+
+La méthode `concat` permet de créer un nouveau tableau constitué des éléments de l'objet `this` sur lequel elle a été appelée, suivis dans l'ordre par, pour chaque paramètre, les éléments de ce paramètre (s'il s'agit d'un tableau) ou le paramètre lui-même (s'il ne s'agit pas d'un tableau). La concaténation ne « déplie » pas les tableaux imbriqués.
+
+La méthode `concat` ne modifie pas `this` ni aucun des tableaux passés en paramètres, mais renvoie une copie qui contient des copies des mêmes éléments combinées que ceux des tableaux originaux. Les éléments des tableaux originaux sont copiés dans le nouveau tableau comme suit :
+
+- Pour les références à des objets (et non les objets eux-mêmes) : `concat` copie ces références dans le nouveaux tableau. Le tableau original et le nouveau tableau feront référence au même objet. C'est-à-dire que si un objet référencé est modifié, ces changements seront visibles tant dans le nouveau que dans les tableaux originaux.
+
+<!---->
+
+- Pour les chaînes, les booléens et les nombres « primitifs » (c'est-à-dire pas les objets {{jsxref("String", "String")}}, {{jsxref("Boolean")}} et {{jsxref("Number", "Number")}}) : `concat` copie les valeurs des chaînes et des nombres dans le nouveau tableau. (voir [Les types de données en JavaScript](/fr/docs/Web/JavaScript/Structures_de_donn%C3%A9es#Les_types_de_donn%C3%A9es)).
+
+> **Note :** La concaténation n'impactera pas les tableaux originaux. Par la suite, toute opération sur le nouveau tableau n'aura aucun effet sur les tableaux d'origine, et vice versa.
+
+## Exemples
+
+### Concaténer deux tableaux
+
+Le code qui suit concatène deux tableaux :
+
+```js
+let alpha = ["a", "b", "c"];
+let numerique = [1, 2, 3];
+
+alpha.concat(numerique);
+// donne : ["a", "b", "c", 1, 2, 3]
+```
+
+### Concaténer trois tableaux
+
+Le code qui suit concatène trois tableaux :
+
+```js
+let num1 = [1, 2, 3];
+let num2 = [4, 5, 6];
+let num3 = [7, 8, 9];
+
+let nums = num1.concat(num2, num3);
+
+console.log(nums);
+// [1, 2, 3, 4, 5, 6, 7, 8, 9]
+```
+
+### Concaténer des valeurs avec un tableau
+
+Le code qui suit ajoute trois valeurs à un tableau :
+
+```js
+let alpha = ['a', 'b', 'c'];
+
+let alphanumerique = alpha.concat(1, [2, 3]);
+
+console.log(alphanumerique);
+// ['a', 'b', 'c', 1, 2, 3]
+```
+
+### Concaténer des tableaux imbriqués
+
+Dans le code qui suit, on concatène deux tableaux qui ont plusieurs dimensions et on illustre la conservation des références :
+
+```js
+let num1 = [[1]];
+let num2 = [2, [3]];
+
+let nums = num1.concat(num2);
+
+console.log(nums);
+// affichera [[1], 2, [3]]
+
+// Ici, on modifie le premier élément de num1
+num1[0].push(4);
+
+console.log(nums);
+// affichera [[1, 4], 2, [3]]
+```
+
+## Spécifications
+
+| Spécification                                                                                                | État                         | Commentaires                                          |
+| ------------------------------------------------------------------------------------------------------------ | ---------------------------- | ----------------------------------------------------- |
+| {{SpecName('ES3')}}                                                                                     | {{Spec2('ES3')}}         | Définition initiale. Implémentée avec JavaScript 1.2. |
+| {{SpecName('ES5.1', '#sec-15.4.4.4', 'Array.prototype.concat')}}                         | {{Spec2('ES5.1')}}     |                                                       |
+| {{SpecName('ES6', '#sec-array.prototype.concat', 'Array.prototype.concat')}}         | {{Spec2('ES6')}}         |                                                       |
+| {{SpecName('ESDraft', '#sec-array.prototype.concat', 'Array.prototype.concat')}} | {{Spec2('ESDraft')}} |                                                       |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Array.concat")}}
+
+## Voir aussi
+
+- {{jsxref("Array.push", "push")}} / {{jsxref("Array.pop", "pop")}} qui permettent d'ajouter/retirer des éléments à partir de la fin du tableau
+- {{jsxref("Array.unshift", "unshift")}} / {{jsxref("Array.shift", "shift")}} qui permettent d'ajouter/retirer des éléments à partir du début du tableau
+- {{jsxref("Array.splice", "splice")}} qui permet d'ajouter/retirer des éléments à un endroit donné du tableau
+- {{jsxref("String.prototype.concat()")}}
+- {{jsxref("Symbol.isConcatSpreadable")}} (permet de contrôler la façon dont un tableau est ramené à une valeur)
diff --git a/files/fr/web/javascript/reference/global_objects/array/copywithin/index.html b/files/fr/web/javascript/reference/global_objects/array/copywithin/index.html
deleted file mode 100644
index befc06152e..0000000000
--- a/files/fr/web/javascript/reference/global_objects/array/copywithin/index.html
+++ /dev/null
@@ -1,192 +0,0 @@
----
-title: Array.prototype.copyWithin()
-slug: Web/JavaScript/Reference/Global_Objects/Array/copyWithin
-tags:
-  - Array
-  - ECMAScript 2015
-  - JavaScript
-  - Méthode
-  - Prototype
-  - Reference
-  - polyfill
-translation_of: Web/JavaScript/Reference/Global_Objects/Array/copyWithin
-original_slug: Web/JavaScript/Reference/Objets_globaux/Array/copyWithin
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <code><strong>copyWithin()</strong></code> effectue une copie superficielle (<em>shallow copy</em>) d'une partie d'un tableau sur ce même tableau et le renvoie, sans modifier sa taille.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/array-copywithin.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">arr.copyWithin(cible)
-arr.copyWithin(cible, début)
-arr.copyWithin(cible, début, fin)
-</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>cible</code></dt>
- <dd>
- <p>Indice à partir duquel la séquence sera copiée. Si la valeur est négative, <code>cible </code>sera compté à partir de la fin du tableau.</p>
-
- <p>Si <code>cible </code>est supérieur ou égal à <code>arr.length</code>, rien ne sera copié. Si <code>cible</code> est positionné apès <code>début</code>, la séquence copiée sera réduite pour correspondre à <code>arr.length</code>.</p>
- </dd>
- <dt><code>début</code> {{optional_inline}}</dt>
- <dd>Indice de début de la séquence a copier. Si la valeur est négative, <code>début</code> sera compté à partir de la fin du tableau. Si <code>début</code> est omis, <code>copyWithin</code> copiera à partir du début du tableau (par défaut 0).</dd>
- <dt><code>fin</code> {{optional_inline}}</dt>
- <dd>Indice de fin de la séquence a copier. <code>copyWithin</code> copie jusqu'à <code>fin</code> (non-inclusif). Si la valeur est négative, <code>end</code> sera compté à partir de la fin du tableau. Si <code>end</code> est omis, <code>copyWithin</code> copiera jusqu'à la fin du tableau (par défaut <code>arr.length</code>).</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Le tableau modifié par la méthode.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>La fonction <code>copyWithin()</code> fonctionne de la même façon que <code>memmove</code> en C/C++. C'est une méthode très performante pour décaler les données d'un {{jsxref("Array")}} ou d'un {{jsxref("TypedArray")}} (dans ce cas, on pourra utiliser {{jsxref("TypedArray/copyWithin", "TypedArray.copyWithin()")}}). La séquence est copiée et collée en une opération. La séquence collée aura les valeurs copiées même si les zones de copiage et de collage se chevauchent.</p>
-
-<p>La fonction <code>copyWithin()</code> est intentionnellement générique, il n'est pas nécessaire que <code>this</code> soit un objet {{jsxref("Array", "Array")}}.</p>
-
-<p>De plus, <code>copyWithin()</code> est une méthode qui modifie l'objet courant. Elle ne modifie pas la longueur de <code>this</code>, mais change son contenu et créé de nouvelles propriétés si nécessaire.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<pre class="brush: js">[1, 2, 3, 4, 5].copyWithin(-2);
-// [1, 2, 3, 1, 2]
-
-[1, 2, 3, 4, 5].copyWithin(0, 3);
-// [4, 5, 3, 4, 5]
-
-[1, 2, 3, 4, 5].copyWithin(0, 3, 4);
-// [4, 2, 3, 4, 5]
-
-[1, 2, 3, 4, 5].copyWithin(-2, -3, -1);
-// [1, 2, 3, 3, 4]
-
-[].copyWithin.call({length: 5, 3: 1}, 0, 3);
-// {0: 1, 3: 1, length: 5}
-
-// Les tableaux typés ES2015 sont des sous-classes d'Array
-var i32a = new Int32Array([1, 2, 3, 4, 5]);
-
-i32a.copyWithin(0, 2);
-// Int32Array [3, 4, 5, 4, 5]
-
-// Sur les plates-formes qui ne supportent pas encore ES2015 :
-[].copyWithin.call(new Int32Array([1, 2, 3, 4, 5]), 0, 3, 4);
-// Int32Array [4, 2, 3, 4, 5]
-</pre>
-
-<h2 id="Prothèse_d'émulation_(polyfill)">Prothèse d'émulation (<em>polyfill</em>)</h2>
-
-<p>Cette méthode a été ajoutée à la spécification ECMAScript 6 et peut ne pas être utilisable dans tous les environnements. Voici un fragment de code qui permet d'émuler cette méthode :</p>
-
-<pre class="brush: js">if (!Array.prototype.copyWithin) {
-  Object.defineProperty(Array.prototype, 'copyWithin', {
-    value: function(target, start/*, end*/) {
-    // Steps 1-2.
-    if (this == null) {
-      throw new TypeError('this is null or not defined');
-    }
-
-    var O = Object(this);
-
-    // Steps 3-5.
-    var len = O.length &gt;&gt;&gt; 0;
-
-    // Steps 6-8.
-    var relativeTarget = target &gt;&gt; 0;
-
-    var to = relativeTarget &lt; 0 ?
-      Math.max(len + relativeTarget, 0) :
-      Math.min(relativeTarget, len);
-
-    // Steps 9-11.
-    var relativeStart = start &gt;&gt; 0;
-
-    var from = relativeStart &lt; 0 ?
-      Math.max(len + relativeStart, 0) :
-      Math.min(relativeStart, len);
-
-    // Steps 12-14.
-    var end = arguments[2];
-    var relativeEnd = end === undefined ? len : end &gt;&gt; 0;
-
-    var final = relativeEnd &lt; 0 ?
-      Math.max(len + relativeEnd, 0) :
-      Math.min(relativeEnd, len);
-
-    // Step 15.
-    var count = Math.min(final - from, len - to);
-
-    // Steps 16-17.
-    var direction = 1;
-
-    if (from &lt; to &amp;&amp; to &lt; (from + count)) {
-      direction = -1;
-      from += count - 1;
-      to += count - 1;
-    }
-
-    // Step 18.
-    while (count &gt; 0) {
-      if (from in O) {
-        O[to] = O[from];
-      } else {
-        delete O[to];
-      }
-
-      from += direction;
-      to += direction;
-      count--;
-    }
-
-    // Step 19.
-    return O;
-  },
-  configurable: true,
-  writable: true
-  });
-}</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-array.prototype.copywithin', 'Array.prototype.copyWithin')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2016', '#sec-array.prototype.copywithin', 'Array.prototype.copyWithin')}}</td>
-   <td>{{Spec2('ES2016')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-array.prototype.copywithin', 'Array.prototype.copyWithin')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Array.copyWithin")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Array", "Array")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/array/copywithin/index.md b/files/fr/web/javascript/reference/global_objects/array/copywithin/index.md
new file mode 100644
index 0000000000..e28200ab55
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/array/copywithin/index.md
@@ -0,0 +1,169 @@
+---
+title: Array.prototype.copyWithin()
+slug: Web/JavaScript/Reference/Global_Objects/Array/copyWithin
+tags:
+  - Array
+  - ECMAScript 2015
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - polyfill
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/copyWithin
+original_slug: Web/JavaScript/Reference/Objets_globaux/Array/copyWithin
+---
+{{JSRef}}
+
+La méthode **`copyWithin()`** effectue une copie superficielle (_shallow copy_) d'une partie d'un tableau sur ce même tableau et le renvoie, sans modifier sa taille.
+
+{{EmbedInteractiveExample("pages/js/array-copywithin.html")}}
+
+## Syntaxe
+
+    arr.copyWithin(cible)
+    arr.copyWithin(cible, début)
+    arr.copyWithin(cible, début, fin)
+
+### Paramètres
+
+- `cible`
+
+  - : Indice à partir duquel la séquence sera copiée. Si la valeur est négative, `cible `sera compté à partir de la fin du tableau.
+
+    Si `cible `est supérieur ou égal à `arr.length`, rien ne sera copié. Si `cible` est positionné apès `début`, la séquence copiée sera réduite pour correspondre à `arr.length`.
+
+- `début` {{optional_inline}}
+  - : Indice de début de la séquence a copier. Si la valeur est négative, `début` sera compté à partir de la fin du tableau. Si `début` est omis, `copyWithin` copiera à partir du début du tableau (par défaut 0).
+- `fin` {{optional_inline}}
+  - : Indice de fin de la séquence a copier. `copyWithin` copie jusqu'à `fin` (non-inclusif). Si la valeur est négative, `end` sera compté à partir de la fin du tableau. Si `end` est omis, `copyWithin` copiera jusqu'à la fin du tableau (par défaut `arr.length`).
+
+### Valeur de retour
+
+Le tableau modifié par la méthode.
+
+## Description
+
+La fonction `copyWithin()` fonctionne de la même façon que `memmove` en C/C++. C'est une méthode très performante pour décaler les données d'un {{jsxref("Array")}} ou d'un {{jsxref("TypedArray")}} (dans ce cas, on pourra utiliser {{jsxref("TypedArray/copyWithin", "TypedArray.copyWithin()")}}). La séquence est copiée et collée en une opération. La séquence collée aura les valeurs copiées même si les zones de copiage et de collage se chevauchent.
+
+La fonction `copyWithin()` est intentionnellement générique, il n'est pas nécessaire que `this` soit un objet {{jsxref("Array", "Array")}}.
+
+De plus, `copyWithin()` est une méthode qui modifie l'objet courant. Elle ne modifie pas la longueur de `this`, mais change son contenu et créé de nouvelles propriétés si nécessaire.
+
+## Exemples
+
+```js
+[1, 2, 3, 4, 5].copyWithin(-2);
+// [1, 2, 3, 1, 2]
+
+[1, 2, 3, 4, 5].copyWithin(0, 3);
+// [4, 5, 3, 4, 5]
+
+[1, 2, 3, 4, 5].copyWithin(0, 3, 4);
+// [4, 2, 3, 4, 5]
+
+[1, 2, 3, 4, 5].copyWithin(-2, -3, -1);
+// [1, 2, 3, 3, 4]
+
+[].copyWithin.call({length: 5, 3: 1}, 0, 3);
+// {0: 1, 3: 1, length: 5}
+
+// Les tableaux typés ES2015 sont des sous-classes d'Array
+var i32a = new Int32Array([1, 2, 3, 4, 5]);
+
+i32a.copyWithin(0, 2);
+// Int32Array [3, 4, 5, 4, 5]
+
+// Sur les plates-formes qui ne supportent pas encore ES2015 :
+[].copyWithin.call(new Int32Array([1, 2, 3, 4, 5]), 0, 3, 4);
+// Int32Array [4, 2, 3, 4, 5]
+```
+
+## Prothèse d'émulation (_polyfill_)
+
+Cette méthode a été ajoutée à la spécification ECMAScript 6 et peut ne pas être utilisable dans tous les environnements. Voici un fragment de code qui permet d'émuler cette méthode :
+
+```js
+if (!Array.prototype.copyWithin) {
+  Object.defineProperty(Array.prototype, 'copyWithin', {
+    value: function(target, start/*, end*/) {
+    // Steps 1-2.
+    if (this == null) {
+      throw new TypeError('this is null or not defined');
+    }
+
+    var O = Object(this);
+
+    // Steps 3-5.
+    var len = O.length >>> 0;
+
+    // Steps 6-8.
+    var relativeTarget = target >> 0;
+
+    var to = relativeTarget < 0 ?
+      Math.max(len + relativeTarget, 0) :
+      Math.min(relativeTarget, len);
+
+    // Steps 9-11.
+    var relativeStart = start >> 0;
+
+    var from = relativeStart < 0 ?
+      Math.max(len + relativeStart, 0) :
+      Math.min(relativeStart, len);
+
+    // Steps 12-14.
+    var end = arguments[2];
+    var relativeEnd = end === undefined ? len : end >> 0;
+
+    var final = relativeEnd < 0 ?
+      Math.max(len + relativeEnd, 0) :
+      Math.min(relativeEnd, len);
+
+    // Step 15.
+    var count = Math.min(final - from, len - to);
+
+    // Steps 16-17.
+    var direction = 1;
+
+    if (from < to && to < (from + count)) {
+      direction = -1;
+      from += count - 1;
+      to += count - 1;
+    }
+
+    // Step 18.
+    while (count > 0) {
+      if (from in O) {
+        O[to] = O[from];
+      } else {
+        delete O[to];
+      }
+
+      from += direction;
+      to += direction;
+      count--;
+    }
+
+    // Step 19.
+    return O;
+  },
+  configurable: true,
+  writable: true
+  });
+}
+```
+
+## Spécifications
+
+| Spécification                                                                                                        | État                         | Commentaires         |
+| -------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName('ES2015', '#sec-array.prototype.copywithin', 'Array.prototype.copyWithin')}} | {{Spec2('ES2015')}}     | Définition initiale. |
+| {{SpecName('ES2016', '#sec-array.prototype.copywithin', 'Array.prototype.copyWithin')}} | {{Spec2('ES2016')}}     |                      |
+| {{SpecName('ESDraft', '#sec-array.prototype.copywithin', 'Array.prototype.copyWithin')}} | {{Spec2('ESDraft')}} |                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Array.copyWithin")}}
+
+## Voir aussi
+
+- {{jsxref("Array", "Array")}}
diff --git a/files/fr/web/javascript/reference/global_objects/array/entries/index.html b/files/fr/web/javascript/reference/global_objects/array/entries/index.html
deleted file mode 100644
index 5ab8acec51..0000000000
--- a/files/fr/web/javascript/reference/global_objects/array/entries/index.html
+++ /dev/null
@@ -1,92 +0,0 @@
----
-title: Array.prototype.entries()
-slug: Web/JavaScript/Reference/Global_Objects/Array/entries
-tags:
-  - Array
-  - ECMAScript 2015
-  - Iterator
-  - JavaScript
-  - Méthode
-  - Prototype
-translation_of: Web/JavaScript/Reference/Global_Objects/Array/entries
-original_slug: Web/JavaScript/Reference/Objets_globaux/Array/entries
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <code><strong>entries()</strong></code> renvoie un nouvel objet de type  <code><strong>Array Iterator</strong></code> qui contient le couple clef/valeur pour chaque éléments du tableau.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/array-entries.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>arr</var>.entries()</pre>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Un nouvel objet qui est un itérateur pour {{jsxref("Array")}}.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Parcourir_un_tableau_avec_ses_index_et_éléments">Parcourir un tableau avec ses index et éléments</h3>
-
-<pre class="brush:js">const arr = ["a", "b", "c"];
-for (const [index, element] of arr.entries()) {
-  console.log(index, element);
-}
-// 0 "a"
-// 1 "b"
-// 2 "c"
-</pre>
-
-<h3 id="Boucle_for...of">Boucle <code>for...of</code></h3>
-
-<p>On peut avoir le même résultat en utilisant une boucle <a href="/fr/docs/Web/JavaScript/Reference/Instructions/for...of">for...of</a> :</p>
-
-<pre class="brush: js">var arr = ['a', 'b', 'c'];
-var eArr = arr.entries();
-
-for (let e of eArr) {
-  console.log(e);
-}
-// [0, 'a']
-// [1, 'b']
-// [2, 'c']
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-array.prototype.entries', 'Array.prototype.entries')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-array.prototype.entries', 'Array.prototype.entries')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Array.entries")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Array.prototype.keys()")}}</li>
- <li>{{jsxref("Array.prototype.values()")}}</li>
- <li>{{jsxref("Array.prototype.forEach()")}}</li>
- <li>{{jsxref("Array.prototype.every()")}}</li>
- <li>{{jsxref("Array.prototype.some()")}}</li>
- <li><code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/for...of">for...of</a></code></li>
- <li><a href="/fr/docs/Web/JavaScript/Reference/Les_protocoles_iteration">Les protocoles d'itération</a></li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/array/entries/index.md b/files/fr/web/javascript/reference/global_objects/array/entries/index.md
new file mode 100644
index 0000000000..9bfa9f7ca7
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/array/entries/index.md
@@ -0,0 +1,77 @@
+---
+title: Array.prototype.entries()
+slug: Web/JavaScript/Reference/Global_Objects/Array/entries
+tags:
+  - Array
+  - ECMAScript 2015
+  - Iterator
+  - JavaScript
+  - Méthode
+  - Prototype
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/entries
+original_slug: Web/JavaScript/Reference/Objets_globaux/Array/entries
+---
+{{JSRef}}
+
+La méthode **`entries()`** renvoie un nouvel objet de type  **`Array Iterator`** qui contient le couple clef/valeur pour chaque éléments du tableau.
+
+{{EmbedInteractiveExample("pages/js/array-entries.html")}}
+
+## Syntaxe
+
+    arr.entries()
+
+### Valeur de retour
+
+Un nouvel objet qui est un itérateur pour {{jsxref("Array")}}.
+
+## Exemples
+
+### Parcourir un tableau avec ses index et éléments
+
+```js
+const arr = ["a", "b", "c"];
+for (const [index, element] of arr.entries()) {
+  console.log(index, element);
+}
+// 0 "a"
+// 1 "b"
+// 2 "c"
+```
+
+### Boucle `for...of`
+
+On peut avoir le même résultat en utilisant une boucle [for...of](/fr/docs/Web/JavaScript/Reference/Instructions/for...of) :
+
+```js
+var arr = ['a', 'b', 'c'];
+var eArr = arr.entries();
+
+for (let e of eArr) {
+  console.log(e);
+}
+// [0, 'a']
+// [1, 'b']
+// [2, 'c']
+```
+
+## Spécifications
+
+| Spécification                                                                                                | État                         | Commentaires         |
+| ------------------------------------------------------------------------------------------------------------ | ---------------------------- | -------------------- |
+| {{SpecName('ES2015', '#sec-array.prototype.entries', 'Array.prototype.entries')}} | {{Spec2('ES2015')}}     | Définition initiale. |
+| {{SpecName('ESDraft', '#sec-array.prototype.entries', 'Array.prototype.entries')}} | {{Spec2('ESDraft')}} |                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Array.entries")}}
+
+## Voir aussi
+
+- {{jsxref("Array.prototype.keys()")}}
+- {{jsxref("Array.prototype.values()")}}
+- {{jsxref("Array.prototype.forEach()")}}
+- {{jsxref("Array.prototype.every()")}}
+- {{jsxref("Array.prototype.some()")}}
+- [`for...of`](/fr/docs/Web/JavaScript/Reference/Instructions/for...of)
+- [Les protocoles d'itération](/fr/docs/Web/JavaScript/Reference/Les_protocoles_iteration)
diff --git a/files/fr/web/javascript/reference/global_objects/array/every/index.html b/files/fr/web/javascript/reference/global_objects/array/every/index.html
deleted file mode 100644
index 65dfaf3c44..0000000000
--- a/files/fr/web/javascript/reference/global_objects/array/every/index.html
+++ /dev/null
@@ -1,196 +0,0 @@
----
-title: Array.prototype.every()
-slug: Web/JavaScript/Reference/Global_Objects/Array/every
-tags:
-  - Array
-  - ECMAScript 5
-  - JavaScript
-  - Méthode
-  - Prototype
-  - Reference
-  - polyfill
-translation_of: Web/JavaScript/Reference/Global_Objects/Array/every
-original_slug: Web/JavaScript/Reference/Objets_globaux/Array/every
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <code><strong>every()</strong></code> permet de tester si tous les éléments d'un tableau vérifient une condition donnée par une fonction en argument. Cette méthode renvoie un booléen pour le résultat du test.</p>
-
-<div class="note">
-<p><strong>Note :</strong> Cette méthode renvoie <code>true</code> pour n'importe quelle condition utilisée sur un tableau vide.</p>
-</div>
-
-<div>{{EmbedInteractiveExample("pages/js/array-every.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>arr</var>.every(<var>callback</var>[, <var>thisArg</var>])</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>callback</code></dt>
- <dd>La fonction sur laquelle on souhaite tester chaque élément du tableau. Elle prend en compte trois arguments :
- <dl>
-  <dt><code>currentValue</code></dt>
-  <dd>La valeur de l'élément à traiter.</dd>
-  <dt><code>index</code>{{Optional_inline}}</dt>
-  <dd>L'indice de l'élément du tableau à tester.</dd>
-  <dt><code>array</code>{{Optional_inline}}</dt>
-  <dd>Le tableau sur lequel on a appelé la méthode <code>every</code>.</dd>
- </dl>
- </dd>
- <dt><code>thisArg</code>{{Optional_inline}}</dt>
- <dd>Paramètre optionnel. La valeur à utiliser pour <code>this</code> lors de l'exécution de la fonction.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p><code>true</code> si la fonction de rappel obtient une valeur équivalente à vrai (<em>truthy</em>) pour chaque élément du tableau et <code>false</code> sinon.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>La méthode <code>every</code> exécute la fonction <code>callback</code> fournie sur chacun des éléments contenus dans le tableau jusqu'à ce qu'un élément pour lequel la fonction <code>callback</code> renvoie une valeur fausse (<em>falsy value</em>) soit trouvé. Si un tel élément est trouvé, la méthode <code>every</code> renvoie directement <code>false</code>. Sinon, si la fonction <code>callback</code> a renvoyé une valeur vraie pour tous les éléments, la méthode <code>every</code> renverra <code>true</code>. La fonction <code>callback</code> n'est appelée que pour les indices du tableau pour lesquels il existe des valeurs affectées. Elle n'est pas appelée pour les indices supprimés ou ceux qui n'ont jamais reçu de valeur.</p>
-
-<p><code>callback</code> est appelée avec trois arguments : la valeur de l'élément en cours de traitement, l'indice de l'élément dans le tableau et le tableau qui est parcouru.</p>
-
-<p>Si un paramètre <code>thisArg</code> est fourni à la méthode <code>every</code>, ce sera la valeur <code>this</code> de la fonction <code>callback</code>. Si ce paramètre n'est pas fourni, la valeur <code>undefined</code> sera utilisée comme valeur pour <code>this</code>. La valeur <code>this</code> « définitivement » utilisée par la fonction <code>callback</code> est déterminée selon <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_this">les règles usuelles de détermination de <code>this</code></a>.</p>
-
-<p><code>every</code> ne modifie pas le tableau sur lequel elle a été appelée.</p>
-
-<p>Les éléments traités par la méthode <code>every</code> sont définis lors du premier appel à <code>callback</code>. Les éléments ajoutés au tableau après que l'appel à <code>every</code> ait commencé ne seront pas traités par la fonction <code>callback</code>. Si des éléments du tableau sont modifiés, la valeur passée à la fonction <code>callback</code> sera celle qu'ils ont au moment où <code>every</code> les traitera. Les éléments qui sont supprimés ne sont pas traités par la fonction <code>every</code>.</p>
-
-<p><code>every</code> agit de la même façon que le quantificateur mathématiques « pour tous », notamment pour le cas au limite d'un tableau vide pour lequel elle renvoie <code>true</code> (on dit qu'il est trivialement vrai que tous les éléments d'un <a href="https://fr.wikipedia.org/wiki/Ensemble_vide#Difficult.C3.A9s_de_la_notion_d.27ensemble_vide">ensemble vide</a> respectent n'importe quelle condition).</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Tester_la_valeur_des_éléments_d'un_tableau">Tester la valeur des éléments d'un tableau</h3>
-
-<p>Dans l'exemple suivant, on teste si tous les éléments du tableau sont supérieurs à 10.</p>
-
-<pre class="brush: js">function estAssezGrand(element, index, array) {
-  return element &gt;= 10;
-}
-[12, 5, 8, 130, 44].every(estAssezGrand);   // false
-[12, 54, 18, 130, 44].every(estAssezGrand); // true
-</pre>
-
-<h3 id="Utiliser_les_fonctions_fléchées_avec_every">Utiliser les fonctions fléchées avec <code>every</code></h3>
-
-<p>{{jsxref("Fonctions/Fonctions_fl%C3%A9ch%C3%A9es","Les fonctions fléchées","","1")}} permettent d'utiliser une syntaxe plus concise pour effectuer le même test.</p>
-
-<pre class="brush: js">[12, 5, 8, 130, 44].every(elem =&gt; elem &gt;= 10); // false
-[12, 54, 18, 130, 44].every(elem =&gt; elem &gt;= 10); // true
-[{a:1, b:2}, {a:1, b:3}].every(elem =&gt; elem.a === 1); // true
-[{a:2, b:2}, {a:1, b:3}].every(elem =&gt; elem.a === 1); // false
-</pre>
-
-<h2 id="Prothèse_d'émulation_(polyfill)">Prothèse d'émulation (<em>polyfill</em>)</h2>
-
-<p><code>every</code> fut ajouté avec la cinquième édition du standard ECMA-262. Pour cette raison, il n'est pas nécessairement présent dans les différentes implémentations de ce standard. Afin de faire fonctionner du code dans un environnement qui ne possède pas cette fonctionnalité, on pourra utiliser le fragment de code suivant au début des scripts. Cet algorithme correspond exactement à celui défini dans la cinquième édition du standard ECMA-262. On prend l'hypothèse que <code>Object</code> et <code>TypeError</code> ont leurs valeurs originales (n'ont pas été modifiés) et que <code>callbackfn.call</code> correspond bien à la valeur originale de {{jsxref("Function.prototype.call")}}</p>
-
-<pre class="brush: js">if (!Array.prototype.every) {
-  Array.prototype.every = function(callbackfn, thisArg) {
-    'use strict';
-    var T, k;
-
-    if (this == null) {
-      throw new TypeError('this vaut null ou n est pas défini');
-    }
-
-    // 1. Soit O le résultat de l'appel à ToObject auquel on a
-    // passé this comme argument
-    var O = Object(this);
-
-    // 2. Soit lenValue le résultat de l'appel de la méthode interne
-    //   Get sur O avec l'argument "length".
-    // 3. Soit len le résultat de ToUint32(lenValue).
-    var len = O.length &gt;&gt;&gt; 0;
-
-    // 4. Si IsCallable(callbackfn) est faux, on lève une exception
-    // TypeError.
-    if (typeof callbackfn !== 'function') {
-      throw new TypeError();
-    }
-
-    // 5. Si thisArg a été fourni : soit T cette valeur thisArg, undefined sinon.
-    if (arguments.length &gt; 1) {
-      T = thisArg;
-    }
-
-    // 6. Soit k égal à 0.
-    k = 0;
-
-    // 7. On répète tant que k &lt; len
-    while (k &lt; len) {
-
-      var kValue;
-
-      // a. Soit Pk la valeur de ToString(k).
-      //   (ce qui est implicite pour les opérandes gauche de in)
-      // b. Soit kPresent le résultat de l'appel de la méthode
-      //    interne de O avec l'argument Pk.
-      //    Cette étape peut être combinée avec l'étape c
-      // c. Si kPresent vaut true, alors
-      if (k in O) {
-
-        // i. Soit kValue le résultat de l'appel de la méthode
-        //    interne Get de O avec l'argument Pk.
-        kValue = O[k];
-
-        // ii. Soit testResult le résultat de l'appel de la méthode
-        //     interne Call de callbackfn avec T comme valeur this et
-        //     la liste d'argument contenant kValue, k, et O.
-        var testResult = callbackfn.call(T, kValue, k, O);
-
-        // iii. Si ToBoolean(testResult) vaut false, on renvoie false.
-        if (!testResult) {
-          return false;
-        }
-      }
-      k++;
-    }
-    return true;
-  };
-}
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-15.4.4.16', 'Array.prototype.every')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td>Définition initiale. Implémentée avec JavaScript 1.6.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-array.prototype.every', 'Array.prototype.every')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-array.prototype.every', 'Array.prototype.every')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Array.every")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Array.prototype.forEach()")}}</li>
- <li>{{jsxref("Array.prototype.some()")}}</li>
- <li>{{jsxref("Array.prototype.find()")}}</li>
- <li>{{jsxref("TypedArray.prototype.every()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/array/every/index.md b/files/fr/web/javascript/reference/global_objects/array/every/index.md
new file mode 100644
index 0000000000..030fb9e115
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/array/every/index.md
@@ -0,0 +1,174 @@
+---
+title: Array.prototype.every()
+slug: Web/JavaScript/Reference/Global_Objects/Array/every
+tags:
+  - Array
+  - ECMAScript 5
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - polyfill
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/every
+original_slug: Web/JavaScript/Reference/Objets_globaux/Array/every
+---
+{{JSRef}}
+
+La méthode **`every()`** permet de tester si tous les éléments d'un tableau vérifient une condition donnée par une fonction en argument. Cette méthode renvoie un booléen pour le résultat du test.
+
+> **Note :** Cette méthode renvoie `true` pour n'importe quelle condition utilisée sur un tableau vide.
+
+{{EmbedInteractiveExample("pages/js/array-every.html")}}
+
+## Syntaxe
+
+    arr.every(callback[, thisArg])
+
+### Paramètres
+
+- `callback`
+
+  - : La fonction sur laquelle on souhaite tester chaque élément du tableau. Elle prend en compte trois arguments :
+
+    - `currentValue`
+      - : La valeur de l'élément à traiter.
+    - `index`{{Optional_inline}}
+      - : L'indice de l'élément du tableau à tester.
+    - `array`{{Optional_inline}}
+      - : Le tableau sur lequel on a appelé la méthode `every`.
+
+- `thisArg`{{Optional_inline}}
+  - : Paramètre optionnel. La valeur à utiliser pour `this` lors de l'exécution de la fonction.
+
+### Valeur de retour
+
+`true` si la fonction de rappel obtient une valeur équivalente à vrai (_truthy_) pour chaque élément du tableau et `false` sinon.
+
+## Description
+
+La méthode `every` exécute la fonction `callback` fournie sur chacun des éléments contenus dans le tableau jusqu'à ce qu'un élément pour lequel la fonction `callback` renvoie une valeur fausse (_falsy value_) soit trouvé. Si un tel élément est trouvé, la méthode `every` renvoie directement `false`. Sinon, si la fonction `callback` a renvoyé une valeur vraie pour tous les éléments, la méthode `every` renverra `true`. La fonction `callback` n'est appelée que pour les indices du tableau pour lesquels il existe des valeurs affectées. Elle n'est pas appelée pour les indices supprimés ou ceux qui n'ont jamais reçu de valeur.
+
+`callback` est appelée avec trois arguments : la valeur de l'élément en cours de traitement, l'indice de l'élément dans le tableau et le tableau qui est parcouru.
+
+Si un paramètre `thisArg` est fourni à la méthode `every`, ce sera la valeur `this` de la fonction `callback`. Si ce paramètre n'est pas fourni, la valeur `undefined` sera utilisée comme valeur pour `this`. La valeur `this` « définitivement » utilisée par la fonction `callback` est déterminée selon [les règles usuelles de détermination de `this`](/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_this).
+
+`every` ne modifie pas le tableau sur lequel elle a été appelée.
+
+Les éléments traités par la méthode `every` sont définis lors du premier appel à `callback`. Les éléments ajoutés au tableau après que l'appel à `every` ait commencé ne seront pas traités par la fonction `callback`. Si des éléments du tableau sont modifiés, la valeur passée à la fonction `callback` sera celle qu'ils ont au moment où `every` les traitera. Les éléments qui sont supprimés ne sont pas traités par la fonction `every`.
+
+`every` agit de la même façon que le quantificateur mathématiques « pour tous », notamment pour le cas au limite d'un tableau vide pour lequel elle renvoie `true` (on dit qu'il est trivialement vrai que tous les éléments d'un [ensemble vide](https://fr.wikipedia.org/wiki/Ensemble_vide#Difficult.C3.A9s_de_la_notion_d.27ensemble_vide) respectent n'importe quelle condition).
+
+## Exemples
+
+### Tester la valeur des éléments d'un tableau
+
+Dans l'exemple suivant, on teste si tous les éléments du tableau sont supérieurs à 10.
+
+```js
+function estAssezGrand(element, index, array) {
+  return element >= 10;
+}
+[12, 5, 8, 130, 44].every(estAssezGrand);   // false
+[12, 54, 18, 130, 44].every(estAssezGrand); // true
+```
+
+### Utiliser les fonctions fléchées avec `every`
+
+{{jsxref("Fonctions/Fonctions_fl%C3%A9ch%C3%A9es","Les fonctions fléchées","","1")}} permettent d'utiliser une syntaxe plus concise pour effectuer le même test.
+
+```js
+[12, 5, 8, 130, 44].every(elem => elem >= 10); // false
+[12, 54, 18, 130, 44].every(elem => elem >= 10); // true
+[{a:1, b:2}, {a:1, b:3}].every(elem => elem.a === 1); // true
+[{a:2, b:2}, {a:1, b:3}].every(elem => elem.a === 1); // false
+```
+
+## Prothèse d'émulation (_polyfill_)
+
+`every` fut ajouté avec la cinquième édition du standard ECMA-262. Pour cette raison, il n'est pas nécessairement présent dans les différentes implémentations de ce standard. Afin de faire fonctionner du code dans un environnement qui ne possède pas cette fonctionnalité, on pourra utiliser le fragment de code suivant au début des scripts. Cet algorithme correspond exactement à celui défini dans la cinquième édition du standard ECMA-262. On prend l'hypothèse que `Object` et `TypeError` ont leurs valeurs originales (n'ont pas été modifiés) et que `callbackfn.call` correspond bien à la valeur originale de {{jsxref("Function.prototype.call")}}
+
+```js
+if (!Array.prototype.every) {
+  Array.prototype.every = function(callbackfn, thisArg) {
+    'use strict';
+    var T, k;
+
+    if (this == null) {
+      throw new TypeError('this vaut null ou n est pas défini');
+    }
+
+    // 1. Soit O le résultat de l'appel à ToObject auquel on a
+    // passé this comme argument
+    var O = Object(this);
+
+    // 2. Soit lenValue le résultat de l'appel de la méthode interne
+    //   Get sur O avec l'argument "length".
+    // 3. Soit len le résultat de ToUint32(lenValue).
+    var len = O.length >>> 0;
+
+    // 4. Si IsCallable(callbackfn) est faux, on lève une exception
+    // TypeError.
+    if (typeof callbackfn !== 'function') {
+      throw new TypeError();
+    }
+
+    // 5. Si thisArg a été fourni : soit T cette valeur thisArg, undefined sinon.
+    if (arguments.length > 1) {
+      T = thisArg;
+    }
+
+    // 6. Soit k égal à 0.
+    k = 0;
+
+    // 7. On répète tant que k < len
+    while (k < len) {
+
+      var kValue;
+
+      // a. Soit Pk la valeur de ToString(k).
+      //   (ce qui est implicite pour les opérandes gauche de in)
+      // b. Soit kPresent le résultat de l'appel de la méthode
+      //    interne de O avec l'argument Pk.
+      //    Cette étape peut être combinée avec l'étape c
+      // c. Si kPresent vaut true, alors
+      if (k in O) {
+
+        // i. Soit kValue le résultat de l'appel de la méthode
+        //    interne Get de O avec l'argument Pk.
+        kValue = O[k];
+
+        // ii. Soit testResult le résultat de l'appel de la méthode
+        //     interne Call de callbackfn avec T comme valeur this et
+        //     la liste d'argument contenant kValue, k, et O.
+        var testResult = callbackfn.call(T, kValue, k, O);
+
+        // iii. Si ToBoolean(testResult) vaut false, on renvoie false.
+        if (!testResult) {
+          return false;
+        }
+      }
+      k++;
+    }
+    return true;
+  };
+}
+```
+
+## Spécifications
+
+| Spécification                                                                                            | État                         | Commentaires                                          |
+| -------------------------------------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- |
+| {{SpecName('ES5.1', '#sec-15.4.4.16', 'Array.prototype.every')}}                     | {{Spec2('ES5.1')}}     | Définition initiale. Implémentée avec JavaScript 1.6. |
+| {{SpecName('ES6', '#sec-array.prototype.every', 'Array.prototype.every')}}     | {{Spec2('ES6')}}         |                                                       |
+| {{SpecName('ESDraft', '#sec-array.prototype.every', 'Array.prototype.every')}} | {{Spec2('ESDraft')}} |                                                       |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Array.every")}}
+
+## Voir aussi
+
+- {{jsxref("Array.prototype.forEach()")}}
+- {{jsxref("Array.prototype.some()")}}
+- {{jsxref("Array.prototype.find()")}}
+- {{jsxref("TypedArray.prototype.every()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/array/fill/index.html b/files/fr/web/javascript/reference/global_objects/array/fill/index.html
deleted file mode 100644
index dc4d155415..0000000000
--- a/files/fr/web/javascript/reference/global_objects/array/fill/index.html
+++ /dev/null
@@ -1,150 +0,0 @@
----
-title: Array.prototype.fill()
-slug: Web/JavaScript/Reference/Global_Objects/Array/fill
-tags:
-  - Array
-  - ECMAScript 2015
-  - JavaScript
-  - Méthode
-  - Prototype
-  - Reference
-  - polyfill
-translation_of: Web/JavaScript/Reference/Global_Objects/Array/fill
-original_slug: Web/JavaScript/Reference/Objets_globaux/Array/fill
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <strong><code>fill()</code></strong> remplit tous les éléments d'un tableau entre deux index avec une valeur statique. La valeur de l'index de fin n'est pas incluse. Cette méthode renvoie le tableau modifié.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/array-fill.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>arr</var>.fill(valeur<var><var>)
-</var>arr</var>.fill(valeur, <var>début<var>)
-</var>arr</var>.fill(valeur, <var>début<var>, <var>fin</var>)</var></var>
-</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>valeur</code></dt>
- <dd>Valeur avec laquelle remplir le tableau.</dd>
- <dt><code>début</code> {{optional_inline}}</dt>
- <dd>Index de début, la valeur par défaut est 0.</dd>
- <dt><code>fin</code> {{optional_inline}}</dt>
- <dd>Index de fin, la valeur par défaut est <code>this.length</code>.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Le tableau modifié par la méthode.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>Les éléments pour lesquels on utilisera la valeur sont ceux contenus dans l'intervalle de positions [<code>début</code>, <code>fin</code>].</p>
-
-<p>La méthode <code>fill()</code> prend jusqu'à trois arguments : <code>valeur</code>, <code>début</code> et <code>fin</code>. Les arguments <code>début</code> et <code>fin</code> sont optionnels. Leurs valeurs par défaut sont respectivement <code>0</code> et la taille <code>length</code> de l'objet <code>this</code>.</p>
-
-<p>Si <code>début</code> est négatif, il sera traité comme <code>length+début</code> où <code>length</code> est la taille du tableau. Si <code>fin</code> est négatif, il est traité comme <code>length+fin</code>.</p>
-
-<p>La fonction <code>fill()</code> est intentionnellement générique, il n'est pas nécessaire que sa valeur <code>this</code> soit un objet <code>Array</code>.</p>
-
-<p>La méthode <code>fill()</code> est une méthode de modification, elle changera l'objet <code>this</code> lui-même, et renverra l'objet modifié. Elle ne crée pas de copie. Lorsque cette méthode reçoit un objet comme valeur, elle copiera l'objet passé et remplira le tableau avec une référence vers cette copie.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<pre class="brush: js">[1, 2, 3].fill(4);            // [4, 4, 4]
-[1, 2, 3].fill(4, 1);         // [1, 4, 4]
-[1, 2, 3].fill(4, 1, 2);      // [1, 4, 3]
-[1, 2, 3].fill(4, 1, 1);      // [1, 2, 3]
-[1, 2, 3].fill(4, -3, -2);    // [4, 2, 3]
-[1, 2, 3].fill(4, 3, 3);      // [1, 2, 3]
-[1, 2, 3].fill(4, NaN, NaN);  // [1, 2, 3]
-Array(3).fill(4);             // [4, 4, 4]
-[].fill.call({length: 3}, 4); // {0: 4, 1: 4, 2: 4, length: 3}
-
-// Les objets sont copiés via une référence
-var arr = Array(3).fill({}); // [{}, {}, {}];
-arr[0].yop = "yop"; // [{yop: "yop"}, {yop: "yop"}, {yop: "yop"}]
-</pre>
-
-<h2 id="Prothèse_d'émulation_(polyfill)">Prothèse d'émulation (<em>polyfill</em>)</h2>
-
-<pre class="brush: js">if (!Array.prototype.fill) {
-  Object.defineProperty(Array.prototype, 'fill', {
-    value: function(value) {
-
-      // Steps 1-2.
-      if (this == null) {
-        throw new TypeError('this is null or not defined');
-      }
-
-      var O = Object(this);
-
-      // Steps 3-5.
-      var len = O.length &gt;&gt;&gt; 0;
-
-      // Steps 6-7.
-      var start = arguments[1];
-      var relativeStart = start &gt;&gt; 0;
-
-      // Step 8.
-      var k = relativeStart &lt; 0 ?
-        Math.max(len + relativeStart, 0) :
-        Math.min(relativeStart, len);
-
-      // Steps 9-10.
-      var end = arguments[2];
-      var relativeEnd = end === undefined ?
-        len : end &gt;&gt; 0;
-
-      // Step 11.
-      var final = relativeEnd &lt; 0 ?
-        Math.max(len + relativeEnd, 0) :
-        Math.min(relativeEnd, len);
-
-      // Step 12.
-      while (k &lt; final) {
-        O[k] = value;
-        k++;
-      }
-
-      // Step 13.
-      return O;
-    }
-  });
-}</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-array.prototype.fill', 'Array.prototype.fill')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-array.prototype.fill', 'Array.prototype.fill')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Array.fill")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Array")}}</li>
- <li>{{jsxref("TypedArray.prototype.fill()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/array/fill/index.md b/files/fr/web/javascript/reference/global_objects/array/fill/index.md
new file mode 100644
index 0000000000..7b9928f46d
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/array/fill/index.md
@@ -0,0 +1,133 @@
+---
+title: Array.prototype.fill()
+slug: Web/JavaScript/Reference/Global_Objects/Array/fill
+tags:
+  - Array
+  - ECMAScript 2015
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - polyfill
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/fill
+original_slug: Web/JavaScript/Reference/Objets_globaux/Array/fill
+---
+{{JSRef}}
+
+La méthode **`fill()`** remplit tous les éléments d'un tableau entre deux index avec une valeur statique. La valeur de l'index de fin n'est pas incluse. Cette méthode renvoie le tableau modifié.
+
+{{EmbedInteractiveExample("pages/js/array-fill.html")}}
+
+## Syntaxe
+
+    arr.fill(valeur)
+    arr.fill(valeur, début)
+    arr.fill(valeur, début, fin)
+
+### Paramètres
+
+- `valeur`
+  - : Valeur avec laquelle remplir le tableau.
+- `début` {{optional_inline}}
+  - : Index de début, la valeur par défaut est 0.
+- `fin` {{optional_inline}}
+  - : Index de fin, la valeur par défaut est `this.length`.
+
+### Valeur de retour
+
+Le tableau modifié par la méthode.
+
+## Description
+
+Les éléments pour lesquels on utilisera la valeur sont ceux contenus dans l'intervalle de positions \[`début`, `fin`].
+
+La méthode `fill()` prend jusqu'à trois arguments : `valeur`, `début` et `fin`. Les arguments `début` et `fin` sont optionnels. Leurs valeurs par défaut sont respectivement `0` et la taille `length` de l'objet `this`.
+
+Si `début` est négatif, il sera traité comme `length+début` où `length` est la taille du tableau. Si `fin` est négatif, il est traité comme `length+fin`.
+
+La fonction `fill()` est intentionnellement générique, il n'est pas nécessaire que sa valeur `this` soit un objet `Array`.
+
+La méthode `fill()` est une méthode de modification, elle changera l'objet `this` lui-même, et renverra l'objet modifié. Elle ne crée pas de copie. Lorsque cette méthode reçoit un objet comme valeur, elle copiera l'objet passé et remplira le tableau avec une référence vers cette copie.
+
+## Exemples
+
+```js
+[1, 2, 3].fill(4);            // [4, 4, 4]
+[1, 2, 3].fill(4, 1);         // [1, 4, 4]
+[1, 2, 3].fill(4, 1, 2);      // [1, 4, 3]
+[1, 2, 3].fill(4, 1, 1);      // [1, 2, 3]
+[1, 2, 3].fill(4, -3, -2);    // [4, 2, 3]
+[1, 2, 3].fill(4, 3, 3);      // [1, 2, 3]
+[1, 2, 3].fill(4, NaN, NaN);  // [1, 2, 3]
+Array(3).fill(4);             // [4, 4, 4]
+[].fill.call({length: 3}, 4); // {0: 4, 1: 4, 2: 4, length: 3}
+
+// Les objets sont copiés via une référence
+var arr = Array(3).fill({}); // [{}, {}, {}];
+arr[0].yop = "yop"; // [{yop: "yop"}, {yop: "yop"}, {yop: "yop"}]
+```
+
+## Prothèse d'émulation (_polyfill_)
+
+```js
+if (!Array.prototype.fill) {
+  Object.defineProperty(Array.prototype, 'fill', {
+    value: function(value) {
+
+      // Steps 1-2.
+      if (this == null) {
+        throw new TypeError('this is null or not defined');
+      }
+
+      var O = Object(this);
+
+      // Steps 3-5.
+      var len = O.length >>> 0;
+
+      // Steps 6-7.
+      var start = arguments[1];
+      var relativeStart = start >> 0;
+
+      // Step 8.
+      var k = relativeStart < 0 ?
+        Math.max(len + relativeStart, 0) :
+        Math.min(relativeStart, len);
+
+      // Steps 9-10.
+      var end = arguments[2];
+      var relativeEnd = end === undefined ?
+        len : end >> 0;
+
+      // Step 11.
+      var final = relativeEnd < 0 ?
+        Math.max(len + relativeEnd, 0) :
+        Math.min(relativeEnd, len);
+
+      // Step 12.
+      while (k < final) {
+        O[k] = value;
+        k++;
+      }
+
+      // Step 13.
+      return O;
+    }
+  });
+}
+```
+
+## Spécifications
+
+| Spécification                                                                                        | État                         | Commentaires         |
+| ---------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName('ES2015', '#sec-array.prototype.fill', 'Array.prototype.fill')}} | {{Spec2('ES2015')}}     | Définition initiale. |
+| {{SpecName('ESDraft', '#sec-array.prototype.fill', 'Array.prototype.fill')}} | {{Spec2('ESDraft')}} |                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Array.fill")}}
+
+## Voir aussi
+
+- {{jsxref("Array")}}
+- {{jsxref("TypedArray.prototype.fill()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/array/filter/index.html b/files/fr/web/javascript/reference/global_objects/array/filter/index.html
deleted file mode 100644
index 1894ac6f4c..0000000000
--- a/files/fr/web/javascript/reference/global_objects/array/filter/index.html
+++ /dev/null
@@ -1,223 +0,0 @@
----
-title: Array.prototype.filter()
-slug: Web/JavaScript/Reference/Global_Objects/Array/filter
-tags:
-  - Array
-  - ECMAScript 5
-  - JavaScript
-  - Méthode
-  - Prototype
-  - Reference
-  - polyfill
-translation_of: Web/JavaScript/Reference/Global_Objects/Array/filter
-original_slug: Web/JavaScript/Reference/Objets_globaux/Array/filter
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <code><strong>filter()</strong></code> crée et retourne un nouveau tableau contenant tous les éléments du tableau d'origine qui remplissent une condition déterminée par la fonction <code>callback</code>.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/array-filter.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>arr</var>.filter(<var>callback)</var>; // callback(elementCourant[, index[, tableauEntier]])
-var nouveauTableau = arr.filter(callback, <var>thisArg</var>);
-</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>callback</code></dt>
- <dd>La fonction de test (ou <em>prédicat</em>) à appliquer à chaque élément du tableau. Cette fonction est appelée avec les arguments suivants :
- <dl>
-  <dt><code>elementCourant</code></dt>
-  <dd>L'élément à traiter</dd>
-  <dt><code>index</code></dt>
-  <dd>Son indice.</dd>
-  <dt><code>array</code></dt>
-  <dd>Le tableau complet</dd>
- </dl>
- Cette fonction renvoie <code>true</code> — ou une valeur équivalente — si l'élément doit être conservé pour le tableau résultat et <code>false</code> dans le cas contraire.</dd>
- <dt><code>thisArg</code> {{optional_inline}}</dt>
- <dd>Objet à utiliser en tant que <code>this</code> quand la fonction <code>callback</code> est exécutée.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Un nouveau tableau contenant les éléments qui respectent la condition du filtre. Si aucun élément ne respecte la condition, c'est un tableau vide qui est renvoyé.</p>
-
-<h2 id="Description">Description</h2>
-
-<p><code>filter()</code> appelle la fonction <code>callback</code> fournie pour chacun des éléments d'un tableau, et construit un nouveau tableau contenant tous les éléments pour lesquels l'appel de <code>callback</code> retourne <code>true</code> ou une valeur équivalente à <code>true</code> dans un contexte booléen. La fonction <code>callback</code> n'est utilisée que pour les éléments du tableau ayant une valeur assignée — les index supprimés ou pour lesquels il n'y a jamais eu de valeur ne sont pas pris en compte. Les éléments du tableau qui ne passent pas le test effectué par la fonction <code>callback</code> sont ignorés, ils ne sont pas inclus dans le nouveau tableau.</p>
-
-<p>La fonction <code>callback</code> est appelée avec trois arguments :</p>
-
-<ol>
- <li>la valeur de l'élément courant,</li>
- <li>l'index de l'élément courant,</li>
- <li>l'objet <code>Array</code> parcouru.</li>
-</ol>
-
-<p>Si le paramètre <code>thisArg</code> est fourni, il sera utilisé comme valeur <code>this</code> lors de l'appel de la fonction <code>callback</code>. S'il n'est pas fourni, la valeur <code>undefined</code> sera utilisée à la place. La valeur de <code>this</code> qui est finalement utilisée par la fonction <code>callback</code> est déterminée selon <a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/L_op%C3%A9rateur_this">les règles usuelles pour déterminer la valeur <code>this</code> au sein d'une fonction</a>.</p>
-
-<p>Noter que <code>filter()</code> ne modifie pas le tableau d'origine.</p>
-
-<p>La liste des éléments parcourus par <code>filter()</code> est définie avant la première invocation de la fonction <code>callback</code>. Les éléments qui sont ajoutés à la liste après le début de l'appel de <code>filter()</code> (grâce à la fonction <code>callback</code> par exemple) ne seront pas concernés par le filtre. Si des éléments de la liste sont modifiés ou supprimés au cours du traitement, la valeur fournie à la fonction <code>callback</code> sera la valeur de ces éléments au moment où <code>filter()</code> les traite — les éléments supprimés ne seront pas traités par la fonction.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Filtrer_les_petites_valeurs">Filtrer les petites valeurs</h3>
-
-<p>L'exemple suivant utilise <code>filter</code> pour créer une nouvelle liste où tous les éléments dont la valeur est inférieure à 10 ont été retirés.</p>
-
-<pre class="brush: js">function suffisammentGrand(element) {
-  return element &gt;= 10;
-}
-var filtre = [12, 5, 8, 130, 44].filter(suffisammentGrand);
-// filtre vaut [12, 130, 44]
-</pre>
-
-<h3 id="Filtrer_des_éléments_JSON_invalides_et_les_trier_en_fonction_d'un_identifiant_avec_filter()">Filtrer des éléments JSON invalides et les trier en fonction d'un identifiant avec <code>filter()</code></h3>
-
-<p>Dans l'exemple qui suit, on utilise <code>filter()</code> pour créer un objet JSON qui contient des éléments dont l'<code>id</code> est un entier.</p>
-
-<pre class="brush: js">var arr = [
-  { id: 15 },
-  { id: -1 },
-  { id: 0 },
-  { id: 3 },
-  { id: 12.2 },
-  { },
-  { id: null },
-  { id: NaN },
-  { id: 'undefined' }
-];
-
-var elementsInvalides = 0;
-
-function filtrerParID(obj) {
-  // Si c'est un nombre
-  if (obj.id !== undefined &amp;&amp; typeof(obj.id) === 'number' &amp;&amp; !isNaN(obj.id)) {
-    return true;
-  } else {
-    elementsInvalides++;
-    return false;
-  }
-}
-
-var arrByID = arr.filter(filtrerParID);
-
-console.log('Tableau filtré\n', arrByID);
-// Le tableau filtré est :
-// [{ id: 15 }, { id: -1 }, { id: 0 }, { id: 3 }, { id: 12.2 }]
-
-console.log('Nombre d\'éléments invalides = ', elementsInvalides);
-// Nombre d'éléments invalides 4</pre>
-
-<h3 id="Recherche_dans_un_tableau">Recherche dans un tableau</h3>
-
-<p>Dans l'exemple qui suit, on utilise <code>filter()</code> pour filtrer le contenu d'un tableau selon un critère donné.</p>
-
-<pre class="brush: js">var fruits = ['pomme', 'banane', 'raisin', 'mangue'];
-
-function filtreTexte(arr, requete) {
-  return arr.filter(function (el) {
-    return el.toLowerCase().indexOf(requete.toLowerCase()) !== -1;
-  })
-}
-
-console.log(filtreTexte(fruits, 'an')); // ['banane', 'mangue'];
-console.log(filtreTexte(fruits, 'm')); // ['pomme', 'mangue'];
-</pre>
-
-<h3 id="Implémentation_avec_la_syntaxe_ECMAScript_2015_(ES6)">Implémentation avec la syntaxe ECMAScript 2015 (ES6)</h3>
-
-<p>L'exemple suivant utilise <a href="/fr/docs/Web/JavaScript/Reference/Fonctions/Fonctions_fléchées">les fonctions fléchées</a>, et le mot clé <a href="/fr/docs/Web/JavaScript/Reference/Instructions/const"><code>const</code> </a>disponible en ES6.</p>
-
-<pre class="brush: js">const fruits = ['pomme', 'banane', 'raisin', 'mangue'];
-
-const filtreTexte = (arr, requete) =&gt; {
-  return arr.filter(el =&gt;  el.toLowerCase().indexOf(requete.toLowerCase()) !== -1);
-}
-
-console.log(filtreTexte(fruits, 'an')); // ['banane', 'mangue'];
-console.log(filtreTexte(fruits, 'm')); // ['pomme', 'mangue'];</pre>
-
-<h2 id="Prothèse_d'émulation_(polyfill)">Prothèse d'émulation (<em>polyfill</em>)</h2>
-
-<p><code>Array.prototype.filter()</code> a été ajoutée avec la cinquième édition du standard ECMA-262 — ainsi elle pourrait ne pas être présente dans toutes les implémentations du standard. Ce problème peut être contourné en ajoutant le code suivant au début des scripts et permettra d'utiliser <code>filter</code> au sein d'implémentations qui n'en bénéficient pas nativement. Cet algorithme est strictement celui spécifié par la cinquième édition d'ECMA-262, en considérant que <code>callbackfn.call</code> est évaluée avec la valeur d'origine de {{jsxref("Function.prototype.call")}} et que {{jsxref("Array.prototype.push")}} a sa valeur d'origine.</p>
-
-<pre class="brush: js">if (!Array.prototype.filter){
-  Array.prototype.filter = function(func, thisArg) {
-    'use strict';
-    if ( ! ((typeof func === 'Function' || typeof func === 'function') &amp;&amp; this) )
-        throw new TypeError();
-
-    var len = this.length &gt;&gt;&gt; 0,
-        res = new Array(len), // preallocate array
-        t = this, c = 0, i = -1;
-    if (thisArg === undefined){
-      while (++i !== len){
-        // checks to see if the key was set
-        if (i in this){
-          if (func(t[i], i, t)){
-            res[c++] = t[i];
-          }
-        }
-      }
-    }
-    else{
-      while (++i !== len){
-        // checks to see if the key was set
-        if (i in this){
-          if (func.call(thisArg, t[i], i, t)){
-            res[c++] = t[i];
-          }
-        }
-      }
-    }
-
-    res.length = c; // shrink down array to proper size
-    return res;
-  };
-}</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-15.4.4.20', 'Array.prototype.filter')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td>Définition initiale. Implémentée avec JavaScript 1.6.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-array.prototype.filter', 'Array.prototype.filter')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-array.prototype.filter', 'Array.prototype.filter')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Array.filter")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Array.prototype.forEach()")}}</li>
- <li>{{jsxref("Array.prototype.every()")}}</li>
- <li>{{jsxref("Array.prototype.some()")}}</li>
- <li>{{jsxref("Array.prototype.reduce()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/array/filter/index.md b/files/fr/web/javascript/reference/global_objects/array/filter/index.md
new file mode 100644
index 0000000000..d6f1b51909
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/array/filter/index.md
@@ -0,0 +1,207 @@
+---
+title: Array.prototype.filter()
+slug: Web/JavaScript/Reference/Global_Objects/Array/filter
+tags:
+  - Array
+  - ECMAScript 5
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - polyfill
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/filter
+original_slug: Web/JavaScript/Reference/Objets_globaux/Array/filter
+---
+{{JSRef}}
+
+La méthode **`filter()`** crée et retourne un nouveau tableau contenant tous les éléments du tableau d'origine qui remplissent une condition déterminée par la fonction `callback`.
+
+{{EmbedInteractiveExample("pages/js/array-filter.html")}}
+
+## Syntaxe
+
+    arr.filter(callback); // callback(elementCourant[, index[, tableauEntier]])
+    var nouveauTableau = arr.filter(callback, thisArg);
+
+### Paramètres
+
+- `callback`
+
+  - : La fonction de test (ou _prédicat_) à appliquer à chaque élément du tableau. Cette fonction est appelée avec les arguments suivants :
+
+    - `elementCourant`
+      - : L'élément à traiter
+    - `index`
+      - : Son indice.
+    - `array`
+      - : Le tableau complet
+
+    Cette fonction renvoie `true` — ou une valeur équivalente — si l'élément doit être conservé pour le tableau résultat et `false` dans le cas contraire.
+
+- `thisArg` {{optional_inline}}
+  - : Objet à utiliser en tant que `this` quand la fonction `callback` est exécutée.
+
+### Valeur de retour
+
+Un nouveau tableau contenant les éléments qui respectent la condition du filtre. Si aucun élément ne respecte la condition, c'est un tableau vide qui est renvoyé.
+
+## Description
+
+`filter()` appelle la fonction `callback` fournie pour chacun des éléments d'un tableau, et construit un nouveau tableau contenant tous les éléments pour lesquels l'appel de `callback` retourne `true` ou une valeur équivalente à `true` dans un contexte booléen. La fonction `callback` n'est utilisée que pour les éléments du tableau ayant une valeur assignée — les index supprimés ou pour lesquels il n'y a jamais eu de valeur ne sont pas pris en compte. Les éléments du tableau qui ne passent pas le test effectué par la fonction `callback` sont ignorés, ils ne sont pas inclus dans le nouveau tableau.
+
+La fonction `callback` est appelée avec trois arguments :
+
+1.  la valeur de l'élément courant,
+2.  l'index de l'élément courant,
+3.  l'objet `Array` parcouru.
+
+Si le paramètre `thisArg` est fourni, il sera utilisé comme valeur `this` lors de l'appel de la fonction `callback`. S'il n'est pas fourni, la valeur `undefined` sera utilisée à la place. La valeur de `this` qui est finalement utilisée par la fonction `callback` est déterminée selon [les règles usuelles pour déterminer la valeur `this` au sein d'une fonction](/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/L_op%C3%A9rateur_this).
+
+Noter que `filter()` ne modifie pas le tableau d'origine.
+
+La liste des éléments parcourus par `filter()` est définie avant la première invocation de la fonction `callback`. Les éléments qui sont ajoutés à la liste après le début de l'appel de `filter()` (grâce à la fonction `callback` par exemple) ne seront pas concernés par le filtre. Si des éléments de la liste sont modifiés ou supprimés au cours du traitement, la valeur fournie à la fonction `callback` sera la valeur de ces éléments au moment où `filter()` les traite — les éléments supprimés ne seront pas traités par la fonction.
+
+## Exemples
+
+### Filtrer les petites valeurs
+
+L'exemple suivant utilise `filter` pour créer une nouvelle liste où tous les éléments dont la valeur est inférieure à 10 ont été retirés.
+
+```js
+function suffisammentGrand(element) {
+  return element >= 10;
+}
+var filtre = [12, 5, 8, 130, 44].filter(suffisammentGrand);
+// filtre vaut [12, 130, 44]
+```
+
+### Filtrer des éléments JSON invalides et les trier en fonction d'un identifiant avec `filter()`
+
+Dans l'exemple qui suit, on utilise `filter()` pour créer un objet JSON qui contient des éléments dont l'`id` est un entier.
+
+```js
+var arr = [
+  { id: 15 },
+  { id: -1 },
+  { id: 0 },
+  { id: 3 },
+  { id: 12.2 },
+  { },
+  { id: null },
+  { id: NaN },
+  { id: 'undefined' }
+];
+
+var elementsInvalides = 0;
+
+function filtrerParID(obj) {
+  // Si c'est un nombre
+  if (obj.id !== undefined && typeof(obj.id) === 'number' && !isNaN(obj.id)) {
+    return true;
+  } else {
+    elementsInvalides++;
+    return false;
+  }
+}
+
+var arrByID = arr.filter(filtrerParID);
+
+console.log('Tableau filtré\n', arrByID);
+// Le tableau filtré est :
+// [{ id: 15 }, { id: -1 }, { id: 0 }, { id: 3 }, { id: 12.2 }]
+
+console.log('Nombre d\'éléments invalides = ', elementsInvalides);
+// Nombre d'éléments invalides 4
+```
+
+### Recherche dans un tableau
+
+Dans l'exemple qui suit, on utilise `filter()` pour filtrer le contenu d'un tableau selon un critère donné.
+
+```js
+var fruits = ['pomme', 'banane', 'raisin', 'mangue'];
+
+function filtreTexte(arr, requete) {
+  return arr.filter(function (el) {
+    return el.toLowerCase().indexOf(requete.toLowerCase()) !== -1;
+  })
+}
+
+console.log(filtreTexte(fruits, 'an')); // ['banane', 'mangue'];
+console.log(filtreTexte(fruits, 'm')); // ['pomme', 'mangue'];
+```
+
+### Implémentation avec la syntaxe ECMAScript 2015 (ES6)
+
+L'exemple suivant utilise [les fonctions fléchées](/fr/docs/Web/JavaScript/Reference/Fonctions/Fonctions_fléchées), et le mot clé [`const` ](/fr/docs/Web/JavaScript/Reference/Instructions/const)disponible en ES6.
+
+```js
+const fruits = ['pomme', 'banane', 'raisin', 'mangue'];
+
+const filtreTexte = (arr, requete) => {
+  return arr.filter(el =>  el.toLowerCase().indexOf(requete.toLowerCase()) !== -1);
+}
+
+console.log(filtreTexte(fruits, 'an')); // ['banane', 'mangue'];
+console.log(filtreTexte(fruits, 'm')); // ['pomme', 'mangue'];
+```
+
+## Prothèse d'émulation (_polyfill_)
+
+`Array.prototype.filter()` a été ajoutée avec la cinquième édition du standard ECMA-262 — ainsi elle pourrait ne pas être présente dans toutes les implémentations du standard. Ce problème peut être contourné en ajoutant le code suivant au début des scripts et permettra d'utiliser `filter` au sein d'implémentations qui n'en bénéficient pas nativement. Cet algorithme est strictement celui spécifié par la cinquième édition d'ECMA-262, en considérant que `callbackfn.call` est évaluée avec la valeur d'origine de {{jsxref("Function.prototype.call")}} et que {{jsxref("Array.prototype.push")}} a sa valeur d'origine.
+
+```js
+if (!Array.prototype.filter){
+  Array.prototype.filter = function(func, thisArg) {
+    'use strict';
+    if ( ! ((typeof func === 'Function' || typeof func === 'function') && this) )
+        throw new TypeError();
+
+    var len = this.length >>> 0,
+        res = new Array(len), // preallocate array
+        t = this, c = 0, i = -1;
+    if (thisArg === undefined){
+      while (++i !== len){
+        // checks to see if the key was set
+        if (i in this){
+          if (func(t[i], i, t)){
+            res[c++] = t[i];
+          }
+        }
+      }
+    }
+    else{
+      while (++i !== len){
+        // checks to see if the key was set
+        if (i in this){
+          if (func.call(thisArg, t[i], i, t)){
+            res[c++] = t[i];
+          }
+        }
+      }
+    }
+
+    res.length = c; // shrink down array to proper size
+    return res;
+  };
+}
+```
+
+## Spécifications
+
+| Spécification                                                                                                | État                         | Commentaires                                          |
+| ------------------------------------------------------------------------------------------------------------ | ---------------------------- | ----------------------------------------------------- |
+| {{SpecName('ES5.1', '#sec-15.4.4.20', 'Array.prototype.filter')}}                     | {{Spec2('ES5.1')}}     | Définition initiale. Implémentée avec JavaScript 1.6. |
+| {{SpecName('ES2015', '#sec-array.prototype.filter', 'Array.prototype.filter')}}     | {{Spec2('ES2015')}}     |                                                       |
+| {{SpecName('ESDraft', '#sec-array.prototype.filter', 'Array.prototype.filter')}} | {{Spec2('ESDraft')}} |                                                       |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Array.filter")}}
+
+## Voir aussi
+
+- {{jsxref("Array.prototype.forEach()")}}
+- {{jsxref("Array.prototype.every()")}}
+- {{jsxref("Array.prototype.some()")}}
+- {{jsxref("Array.prototype.reduce()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/array/find/index.html b/files/fr/web/javascript/reference/global_objects/array/find/index.html
deleted file mode 100644
index 19ef805ebd..0000000000
--- a/files/fr/web/javascript/reference/global_objects/array/find/index.html
+++ /dev/null
@@ -1,142 +0,0 @@
----
-title: Array.prototype.find()
-slug: Web/JavaScript/Reference/Global_Objects/Array/find
-tags:
-  - Array
-  - ECMAScript 2015
-  - JavaScript
-  - Méthode
-  - Prototype
-  - Reference
-  - polyfill
-translation_of: Web/JavaScript/Reference/Global_Objects/Array/find
-original_slug: Web/JavaScript/Reference/Objets_globaux/Array/find
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <code><strong>find()</strong></code> renvoie la <strong>valeur</strong> du <strong>premier élément trouvé </strong>dans le tableau qui respecte la condition donnée par la fonction de test passée en argument. Sinon, la valeur {{jsxref("undefined")}} est renvoyée.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/array-find.html")}}</div>
-
-
-
-<p>Voir aussi la méthode {{jsxref("Array.findIndex", "findIndex()")}} qui renvoie l'<strong>index</strong> de l'élément trouvé et non sa valeur. Si on souhaite repérer la position d'un élément donné dans le tableau, on pourra utiliser {{jsxref("Array.prototype.indexOf()")}}. Si on souhaite déterminer si un tableau contient un élément donné, on pourra utiliser la méthode {{jsxref("Array.prototype.includes()")}}.</p>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>arr</var>.find(<var>callback</var>(element[, index[, tableau]])[, <var>thisArg</var>])</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>callback</code></dt>
- <dd>Fonction à exécuter sur chaque valeur du tableau, elle prend 3 arguments :
- <dl>
-  <dt><code>element</code></dt>
-  <dd>L'élément actuellement traité dans le tableau.</dd>
-  <dt><code>index</code>{{optional_inline}}</dt>
-  <dd>L'index de l'élément actuellement traité dans le tableau</dd>
-  <dt><code>array</code>{{optional_inline}}</dt>
-  <dd>Le tableau pour lequel la méthode <code>find</code> a été appelée.</dd>
- </dl>
- </dd>
- <dt><code>thisArg</code> {{optional_inline}}</dt>
- <dd>Ce paramètre est optionnel. Objet à utiliser en tant que <code>this</code> lorsque la fonction <code>callback</code> est exécutée.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>La valeur du premier élément du tableau qui réussit le test, sinon {{jsxref("undefined")}}.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>La méthode <code>find</code> exécute la fonction <code>callback</code> une fois pour chaque élément présent dans le tableau jusqu'à ce qu'elle retourne une valeur vraie (qui peut être convertie en <code>true</code>). Si un élément est trouvé, <code>find</code> retourne immédiatement la valeur de l'élément. Autrement, <code>find</code> retourne <code>undefined</code>. La méthode <code>callback</code> est seulement appelée pour les index du tableau pour lesquels on dispose d'une valeur. Elle n'est pas appelée pour les index supprimés ou pour ceux qui n'ont pas de valeur.</p>
-
-<p>La méthode <code>callback</code> est appelée avec trois arguments : la valeur de l'élément, l'index de l'élément, et l'objet correspondant au tableau traversé.</p>
-
-<p>Si le paramètre <code>thisArg</code> est fourni à <code>find</code>, il sera utilisé comme le <code>this</code> pour chaque exécution de la fonction <code>callback</code>. S'il n'est pas fourni, alors {{jsxref("undefined")}} sera utilisé.</p>
-
-<p><code>find</code> ne modifie pas le tableau à partir duquel elle est appelée.</p>
-
-<p>L'intervalle des éléments inspectés par <code>find</code> est défini avant la première exécution de <code>callback</code>. Les éléments ajoutés au tableau après l'appel à <code>find</code> ne seront pas inspectés par la fonction <code>callback</code>. Si un élément existant est modifié avant le passage du <code>callback</code>, alors la valeur traitée par le <code>callback</code> sera celle présente lors du passage de <code>find</code> sur son index. Les éléments supprimés ne seront pas traités.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Trouver_un_objet_dans_un_tableau_grâce_à_une_de_ses_propriétés">Trouver un objet dans un tableau grâce à une de ses propriétés</h3>
-
-<pre class="brush: js">const inventaire = [
-  {nom: 'pommes', quantité: 2},
-  {nom: 'bananes', quantité: 0},
-  {nom: 'cerises', quantité: 5}
-];
-
-function estCerises(fruit) {
-  return fruit.nom === 'cerises';
-}
-
-console.log(inventaire.find(estCerises));
-// { nom: 'cerises', quantité: 5}</pre>
-
-<h4 id="Utiliser_les_fonctions_fléchées_ES6ES2015">Utiliser les fonctions fléchées ES6/ES2015</h4>
-
-<pre class="brush: js">const inventaire = [
-                     {nom: 'pommes', quantité: 2},
-                     {nom: 'bananes', quantité: 0},
-                     {nom: 'cerises', quantité: 5}
-                   ];
-
-const resultat = inventaire.find( fruit =&gt; fruit.nom === 'cerises');
-console.log(resultat);
-// { nom: 'cerises', quantité: 5}</pre>
-
-<h3 id="Trouver_un_nombre_premier_dans_un_tableau">Trouver un nombre premier dans un tableau</h3>
-
-<p>Dans l'exemple suivant, on cherche un nombre premier parmi les éléments d'un tableau (ou retourne <code>undefined</code> s'il n'y en a pas ).</p>
-
-<pre class="brush: js">function estPremier(element, index, array) {
-    let début = 2;
-    while (début &lt;= Math.sqrt(element)) {
-        if (element % début ++ &lt; 1) return false;
-    }
-    return (element &gt; 1);
-}
-
-console.log( [4, 6, 8, 12].find(estPremier) ); // undefined, rien trouvé
-console.log( [4, 5, 8, 12].find(estPremier) ); // 5
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-array.prototype.find', 'Array.prototype.find')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td>Définition initiale</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-array.prototype.find', 'Array.prototype.find')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Array.find")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Array.prototype.findIndex()")}} – trouver et renvoyer un index</li>
- <li>{{jsxref("Array.prototype.includes()")}} – tester si une valeur existe dans le tableau</li>
- <li>{{jsxref("Array.prototype.filter()")}} – trouver tous les éléments correspondants</li>
- <li>{{jsxref("Array.prototype.every()")}} – tester l'ensemble des éléments d'un tableau</li>
- <li>{{jsxref("Array.prototype.some()")}} – tester si au moins un élément du tableau respecte un critère</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/array/find/index.md b/files/fr/web/javascript/reference/global_objects/array/find/index.md
new file mode 100644
index 0000000000..c66c0ac9db
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/array/find/index.md
@@ -0,0 +1,126 @@
+---
+title: Array.prototype.find()
+slug: Web/JavaScript/Reference/Global_Objects/Array/find
+tags:
+  - Array
+  - ECMAScript 2015
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - polyfill
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/find
+original_slug: Web/JavaScript/Reference/Objets_globaux/Array/find
+---
+{{JSRef}}
+
+La méthode **`find()`** renvoie la **valeur** du **premier élément trouvé** dans le tableau qui respecte la condition donnée par la fonction de test passée en argument. Sinon, la valeur {{jsxref("undefined")}} est renvoyée.
+
+{{EmbedInteractiveExample("pages/js/array-find.html")}}
+
+Voir aussi la méthode {{jsxref("Array.findIndex", "findIndex()")}} qui renvoie l'**index** de l'élément trouvé et non sa valeur. Si on souhaite repérer la position d'un élément donné dans le tableau, on pourra utiliser {{jsxref("Array.prototype.indexOf()")}}. Si on souhaite déterminer si un tableau contient un élément donné, on pourra utiliser la méthode {{jsxref("Array.prototype.includes()")}}.
+
+## Syntaxe
+
+    arr.find(callback(element[, index[, tableau]])[, thisArg])
+
+### Paramètres
+
+- `callback`
+
+  - : Fonction à exécuter sur chaque valeur du tableau, elle prend 3 arguments :
+
+    - `element`
+      - : L'élément actuellement traité dans le tableau.
+    - `index`{{optional_inline}}
+      - : L'index de l'élément actuellement traité dans le tableau
+    - `array`{{optional_inline}}
+      - : Le tableau pour lequel la méthode `find` a été appelée.
+
+- `thisArg` {{optional_inline}}
+  - : Ce paramètre est optionnel. Objet à utiliser en tant que `this` lorsque la fonction `callback` est exécutée.
+
+### Valeur de retour
+
+La valeur du premier élément du tableau qui réussit le test, sinon {{jsxref("undefined")}}.
+
+## Description
+
+La méthode `find` exécute la fonction `callback` une fois pour chaque élément présent dans le tableau jusqu'à ce qu'elle retourne une valeur vraie (qui peut être convertie en `true`). Si un élément est trouvé, `find` retourne immédiatement la valeur de l'élément. Autrement, `find` retourne `undefined`. La méthode `callback` est seulement appelée pour les index du tableau pour lesquels on dispose d'une valeur. Elle n'est pas appelée pour les index supprimés ou pour ceux qui n'ont pas de valeur.
+
+La méthode `callback` est appelée avec trois arguments : la valeur de l'élément, l'index de l'élément, et l'objet correspondant au tableau traversé.
+
+Si le paramètre `thisArg` est fourni à `find`, il sera utilisé comme le `this` pour chaque exécution de la fonction `callback`. S'il n'est pas fourni, alors {{jsxref("undefined")}} sera utilisé.
+
+`find` ne modifie pas le tableau à partir duquel elle est appelée.
+
+L'intervalle des éléments inspectés par `find` est défini avant la première exécution de `callback`. Les éléments ajoutés au tableau après l'appel à `find` ne seront pas inspectés par la fonction `callback`. Si un élément existant est modifié avant le passage du `callback`, alors la valeur traitée par le `callback` sera celle présente lors du passage de `find` sur son index. Les éléments supprimés ne seront pas traités.
+
+## Exemples
+
+### Trouver un objet dans un tableau grâce à une de ses propriétés
+
+```js
+const inventaire = [
+  {nom: 'pommes', quantité: 2},
+  {nom: 'bananes', quantité: 0},
+  {nom: 'cerises', quantité: 5}
+];
+
+function estCerises(fruit) {
+  return fruit.nom === 'cerises';
+}
+
+console.log(inventaire.find(estCerises));
+// { nom: 'cerises', quantité: 5}
+```
+
+#### Utiliser les fonctions fléchées ES6/ES2015
+
+```js
+const inventaire = [
+                     {nom: 'pommes', quantité: 2},
+                     {nom: 'bananes', quantité: 0},
+                     {nom: 'cerises', quantité: 5}
+                   ];
+
+const resultat = inventaire.find( fruit => fruit.nom === 'cerises');
+console.log(resultat);
+// { nom: 'cerises', quantité: 5}
+```
+
+### Trouver un nombre premier dans un tableau
+
+Dans l'exemple suivant, on cherche un nombre premier parmi les éléments d'un tableau (ou retourne `undefined` s'il n'y en a pas ).
+
+```js
+function estPremier(element, index, array) {
+    let début = 2;
+    while (début <= Math.sqrt(element)) {
+        if (element % début ++ < 1) return false;
+    }
+    return (element > 1);
+}
+
+console.log( [4, 6, 8, 12].find(estPremier) ); // undefined, rien trouvé
+console.log( [4, 5, 8, 12].find(estPremier) ); // 5
+```
+
+## Spécifications
+
+| Spécification                                                                                        | État                         | Commentaires        |
+| ---------------------------------------------------------------------------------------------------- | ---------------------------- | ------------------- |
+| {{SpecName('ES2015', '#sec-array.prototype.find', 'Array.prototype.find')}} | {{Spec2('ES2015')}}     | Définition initiale |
+| {{SpecName('ESDraft', '#sec-array.prototype.find', 'Array.prototype.find')}} | {{Spec2('ESDraft')}} |                     |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Array.find")}}
+
+## Voir aussi
+
+- {{jsxref("Array.prototype.findIndex()")}} – trouver et renvoyer un index
+- {{jsxref("Array.prototype.includes()")}} – tester si une valeur existe dans le tableau
+- {{jsxref("Array.prototype.filter()")}} – trouver tous les éléments correspondants
+- {{jsxref("Array.prototype.every()")}} – tester l'ensemble des éléments d'un tableau
+- {{jsxref("Array.prototype.some()")}} – tester si au moins un élément du tableau respecte un critère
diff --git a/files/fr/web/javascript/reference/global_objects/array/findindex/index.html b/files/fr/web/javascript/reference/global_objects/array/findindex/index.html
deleted file mode 100644
index 9564b24021..0000000000
--- a/files/fr/web/javascript/reference/global_objects/array/findindex/index.html
+++ /dev/null
@@ -1,176 +0,0 @@
----
-title: Array.prototype.findIndex()
-slug: Web/JavaScript/Reference/Global_Objects/Array/findIndex
-tags:
-  - Array
-  - ECMAScript6
-  - JavaScript
-  - Méthode
-  - Prototype
-  - Reference
-  - polyfill
-translation_of: Web/JavaScript/Reference/Global_Objects/Array/findIndex
-original_slug: Web/JavaScript/Reference/Objets_globaux/Array/findIndex
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <code><strong>findIndex()</strong></code> renvoie l'<strong>indice</strong> du <strong>premier élément</strong> du tableau qui satisfait une condition donnée par une fonction. Si la fonction renvoie faux pour tous les éléments du tableau, le résultat vaut -1.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/array-findindex.html")}}</div>
-
-
-
-<p>Voir également la méthode {{jsxref("Array.find", "find()")}} qui renvoie la <strong>valeur</strong> (et non l'indice) d'un des éléments trouvés.</p>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>arr</var>.findIndex(<var>callback</var>(element[, index[, tableau]])[, <var>thisArg</var>])</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>callback</code></dt>
- <dd>Une fonction à exécuter sur chaque valeur du tableau jusqu'à ce que celle-ci renvoie <code>true</code>. Cette fonction prend trois arguments :
- <dl>
-  <dt><code>élément</code></dt>
-  <dd>L'élément du tableau qui doit être traité.</dd>
-  <dt><code>indice</code>{{optional_inline}}</dt>
-  <dd>L'indice de l'élément du tableau en cours de traitement.</dd>
-  <dt><code>tableau</code>{{optional_inline}}</dt>
-  <dd>Le tableau sur lequel a été appelé <code>findIndex</code>.</dd>
- </dl>
- </dd>
- <dt><code>argumentThis</code>{{optional_inline}}</dt>
- <dd>L'objet à utiliser comme contexte <code>this</code> lorsque le <code>callback</code> est exécuté.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Un indice d'un élément du tableau qui réussit le test décrit, -1 sinon.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>La méthode <code>findIndex</code> exécute la fonction <code>callback</code> une fois pour chaque élément présent dans le tableau (le tableau est parcouru entre les indices <code>0</code> et <code>length-1</code> compris) jusqu'à ce que <code>callback</code> renvoie une valeur vraie.</p>
-
-<p>S'il existe un tel élément, <code>findIndex</code> renverra immédiatement l'indice de l'élément concerné. Sinon, <code>findIndex</code> renverra -1. À la différence des autres méthodes liées aux tableaux comme <code>some()</code>, <code>callback</code> est également appelée pour les indices du tableau pour lesquels aucun élément n'est défini.</p>
-
-<p><code>callback</code> possède trois arguments : la valeur de l'élément, l'indice de l'élément et l'objet Array qui est parcouru</p>
-
-<p>Si l'argument <code>argumentThis</code> est fourni à la méthode <code>findIndex</code>, il sera utilisé comme « contexte » <code><a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/L_op%C3%A9rateur_this">this</a></code> pour chaque appel de <code>callback</code>. S'il n'est pas fourni, {{jsxref("undefined")}} sera utilisé.</p>
-
-<p><code>findIndex</code> ne modifie pas le tableau sur laquelle elle est appelée. Les éléments qui seront traités par <code>findIndex</code> sont « récoltés » avant le premier appel de <code>callback</code>. Tout élément qui sera ajouté au tableau après l'appel de <code>findIndex</code> ne sera pas utilisé avec <code>callback</code>. Si un élément existant, pas encore visité, est modifié par <code>callback</code>, la valeur qui sera passé au <code>callback</code> pour cet élément modifié sera celle que <code>findIndex</code> utilise lorsqu'elle utilise l'indice de l'élément en question. Les éléments supprimés sont bien parcourus.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Trouver_l'indice_d'un_nombre_premier_dans_un_tableau">Trouver l'indice d'un nombre premier dans un tableau</h3>
-
-<p>L'exemple qui suit illustre comment trouver l'indice d'un élément qui est un nombre premier dans un tableau (ou qui renvoie -1 s'il n'y a pas de nombre premier).</p>
-
-<pre class="brush: js">function estPremier(élément, index, array) {
-  var début = 2;
-  while (début &lt;= Math.sqrt(élément)) {
-    if (élément % début &lt; 1) {
-      return false;
-    } else {
-      début++;
-    }
-  }
-  return élément &gt; 1;
-}
-
-console.log([4, 6, 8, 12].findIndex(estPremier)); // -1, aucun trouvé
-console.log([4, 6, 7, 12].findIndex(estPremier)); // 2</pre>
-
-<h3 id="Trouver_un_indice_avec_une_fonction_fléchée">Trouver un indice avec une fonction fléchée</h3>
-
-<p>Dans cet exemple, on utilise <a href="/fr/docs/Web/JavaScript/Reference/Fonctions/Fonctions_fléchées">une fonction fléchée</a> pour trouver l'indice d'un élément :</p>
-
-<pre class="brush: js">const fruits = ["pomme", "banane", "melon", "fraise", "raisin"];
-
-const indice = fruits.findIndex(fruit =&gt; fruit === "fraise");
-console.log(indice); // 3
-console.log(fruits[indice]); // fraise </pre>
-
-<h2 id="Prothèse_d'émulation_(polyfill)">Prothèse d'émulation (<em>polyfill</em>)</h2>
-
-<pre class="brush: js">// https://tc39.github.io/ecma262/#sec-array.prototype.findindex
-if (!Array.prototype.findIndex) {
-  Object.defineProperty(Array.prototype, 'findIndex', {
-    value: function(predicate) {
-     // 1. Let O be ? ToObject(this value).
-      if (this == null) {
-        throw new TypeError('"this" is null or not defined');
-      }
-
-      var o = Object(this);
-
-      // 2. Let len be ? ToLength(? Get(O, "length")).
-      var len = o.length &gt;&gt;&gt; 0;
-
-      // 3. If IsCallable(predicate) is false, throw a TypeError exception.
-      if (typeof predicate !== 'function') {
-        throw new TypeError('predicate must be a function');
-      }
-
-      // 4. If thisArg was supplied, let T be thisArg; else let T be undefined.
-      var thisArg = arguments[1];
-
-      // 5. Let k be 0.
-      var k = 0;
-
-      // 6. Repeat, while k &lt; len
-      while (k &lt; len) {
-        // a. Let Pk be ! ToString(k).
-        // b. Let kValue be ? Get(O, Pk).
-        // c. Let testResult be ToBoolean(? Call(predicate, T, « kValue, k, O »)).
-        // d. If testResult is true, return k.
-        var kValue = o[k];
-        if (predicate.call(thisArg, kValue, k, o)) {
-          return k;
-        }
-        // e. Increase k by 1.
-        k++;
-      }
-
-      // 7. Return -1.
-      return -1;
-    },
-    configurable: true,
-    writable: true
-  });
-}</pre>
-
-<p>S'il est vraiment nécessaire de prendre en charge les moteurs JavaScript qui ne prennent pas en charge {{jsxref("Object.defineProperty()")}}, mieux vaut ne pas ajouter de prothèse aux méthodes d'<code>Array.prototype</code> car on ne peut pas les rendre non-énumérables.</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-array.prototype.findindex', 'Array.prototype.findIndex')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-array.prototype.findIndex', 'Array.prototype.findIndex')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Array.findIndex")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Array.prototype.find()")}}</li>
- <li>{{jsxref("Array.prototype.indexOf()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/array/findindex/index.md b/files/fr/web/javascript/reference/global_objects/array/findindex/index.md
new file mode 100644
index 0000000000..5a4a20328c
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/array/findindex/index.md
@@ -0,0 +1,161 @@
+---
+title: Array.prototype.findIndex()
+slug: Web/JavaScript/Reference/Global_Objects/Array/findIndex
+tags:
+  - Array
+  - ECMAScript6
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - polyfill
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/findIndex
+original_slug: Web/JavaScript/Reference/Objets_globaux/Array/findIndex
+---
+{{JSRef}}
+
+La méthode **`findIndex()`** renvoie l'**indice** du **premier élément** du tableau qui satisfait une condition donnée par une fonction. Si la fonction renvoie faux pour tous les éléments du tableau, le résultat vaut -1.
+
+{{EmbedInteractiveExample("pages/js/array-findindex.html")}}
+
+Voir également la méthode {{jsxref("Array.find", "find()")}} qui renvoie la **valeur** (et non l'indice) d'un des éléments trouvés.
+
+## Syntaxe
+
+    arr.findIndex(callback(element[, index[, tableau]])[, thisArg])
+
+### Paramètres
+
+- `callback`
+
+  - : Une fonction à exécuter sur chaque valeur du tableau jusqu'à ce que celle-ci renvoie `true`. Cette fonction prend trois arguments :
+
+    - `élément`
+      - : L'élément du tableau qui doit être traité.
+    - `indice`{{optional_inline}}
+      - : L'indice de l'élément du tableau en cours de traitement.
+    - `tableau`{{optional_inline}}
+      - : Le tableau sur lequel a été appelé `findIndex`.
+
+- `argumentThis`{{optional_inline}}
+  - : L'objet à utiliser comme contexte `this` lorsque le `callback` est exécuté.
+
+### Valeur de retour
+
+Un indice d'un élément du tableau qui réussit le test décrit, -1 sinon.
+
+## Description
+
+La méthode `findIndex` exécute la fonction `callback` une fois pour chaque élément présent dans le tableau (le tableau est parcouru entre les indices `0` et `length-1` compris) jusqu'à ce que `callback` renvoie une valeur vraie.
+
+S'il existe un tel élément, `findIndex` renverra immédiatement l'indice de l'élément concerné. Sinon, `findIndex` renverra -1. À la différence des autres méthodes liées aux tableaux comme `some()`, `callback` est également appelée pour les indices du tableau pour lesquels aucun élément n'est défini.
+
+`callback` possède trois arguments : la valeur de l'élément, l'indice de l'élément et l'objet Array qui est parcouru
+
+Si l'argument `argumentThis` est fourni à la méthode `findIndex`, il sera utilisé comme « contexte » [`this`](/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/L_op%C3%A9rateur_this) pour chaque appel de `callback`. S'il n'est pas fourni, {{jsxref("undefined")}} sera utilisé.
+
+`findIndex` ne modifie pas le tableau sur laquelle elle est appelée. Les éléments qui seront traités par `findIndex` sont « récoltés » avant le premier appel de `callback`. Tout élément qui sera ajouté au tableau après l'appel de `findIndex` ne sera pas utilisé avec `callback`. Si un élément existant, pas encore visité, est modifié par `callback`, la valeur qui sera passé au `callback` pour cet élément modifié sera celle que `findIndex` utilise lorsqu'elle utilise l'indice de l'élément en question. Les éléments supprimés sont bien parcourus.
+
+## Exemples
+
+### Trouver l'indice d'un nombre premier dans un tableau
+
+L'exemple qui suit illustre comment trouver l'indice d'un élément qui est un nombre premier dans un tableau (ou qui renvoie -1 s'il n'y a pas de nombre premier).
+
+```js
+function estPremier(élément, index, array) {
+  var début = 2;
+  while (début <= Math.sqrt(élément)) {
+    if (élément % début < 1) {
+      return false;
+    } else {
+      début++;
+    }
+  }
+  return élément > 1;
+}
+
+console.log([4, 6, 8, 12].findIndex(estPremier)); // -1, aucun trouvé
+console.log([4, 6, 7, 12].findIndex(estPremier)); // 2
+```
+
+### Trouver un indice avec une fonction fléchée
+
+Dans cet exemple, on utilise [une fonction fléchée](/fr/docs/Web/JavaScript/Reference/Fonctions/Fonctions_fléchées) pour trouver l'indice d'un élément :
+
+```js
+const fruits = ["pomme", "banane", "melon", "fraise", "raisin"];
+
+const indice = fruits.findIndex(fruit => fruit === "fraise");
+console.log(indice); // 3
+console.log(fruits[indice]); // fraise 
+```
+
+## Prothèse d'émulation (_polyfill_)
+
+```js
+// https://tc39.github.io/ecma262/#sec-array.prototype.findindex
+if (!Array.prototype.findIndex) {
+  Object.defineProperty(Array.prototype, 'findIndex', {
+    value: function(predicate) {
+     // 1. Let O be ? ToObject(this value).
+      if (this == null) {
+        throw new TypeError('"this" is null or not defined');
+      }
+
+      var o = Object(this);
+
+      // 2. Let len be ? ToLength(? Get(O, "length")).
+      var len = o.length >>> 0;
+
+      // 3. If IsCallable(predicate) is false, throw a TypeError exception.
+      if (typeof predicate !== 'function') {
+        throw new TypeError('predicate must be a function');
+      }
+
+      // 4. If thisArg was supplied, let T be thisArg; else let T be undefined.
+      var thisArg = arguments[1];
+
+      // 5. Let k be 0.
+      var k = 0;
+
+      // 6. Repeat, while k < len
+      while (k < len) {
+        // a. Let Pk be ! ToString(k).
+        // b. Let kValue be ? Get(O, Pk).
+        // c. Let testResult be ToBoolean(? Call(predicate, T, « kValue, k, O »)).
+        // d. If testResult is true, return k.
+        var kValue = o[k];
+        if (predicate.call(thisArg, kValue, k, o)) {
+          return k;
+        }
+        // e. Increase k by 1.
+        k++;
+      }
+
+      // 7. Return -1.
+      return -1;
+    },
+    configurable: true,
+    writable: true
+  });
+}
+```
+
+S'il est vraiment nécessaire de prendre en charge les moteurs JavaScript qui ne prennent pas en charge {{jsxref("Object.defineProperty()")}}, mieux vaut ne pas ajouter de prothèse aux méthodes d'`Array.prototype` car on ne peut pas les rendre non-énumérables.
+
+## Spécifications
+
+| Spécification                                                                                                        | État                         | Commentaires         |
+| -------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName('ES2015', '#sec-array.prototype.findindex', 'Array.prototype.findIndex')}}     | {{Spec2('ES2015')}}     | Définition initiale. |
+| {{SpecName('ESDraft', '#sec-array.prototype.findIndex', 'Array.prototype.findIndex')}} | {{Spec2('ESDraft')}} |                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Array.findIndex")}}
+
+## Voir aussi
+
+- {{jsxref("Array.prototype.find()")}}
+- {{jsxref("Array.prototype.indexOf()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/array/flat/index.html b/files/fr/web/javascript/reference/global_objects/array/flat/index.html
deleted file mode 100644
index 160e1c350b..0000000000
--- a/files/fr/web/javascript/reference/global_objects/array/flat/index.html
+++ /dev/null
@@ -1,143 +0,0 @@
----
-title: Array.prototype.flat()
-slug: Web/JavaScript/Reference/Global_Objects/Array/flat
-tags:
-  - Array
-  - JavaScript
-  - Méthode
-  - Prototype
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Array/flat
-original_slug: Web/JavaScript/Reference/Objets_globaux/Array/flat
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <code><strong>flat()</strong></code> permet de créer un nouveau tableau contenant les éléments des sous-tableaux du tableau passé en argument, qui sont concaténés récursivement pour atteindre une profondeur donnée.</p>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>var nouveauTableau = monTableau</var>.flat([<var>profondeur</var>]);</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>profondeur</code> {{optional_inline}}</dt>
- <dd>Le niveau de profondeur en termes d'imbrication de tableau. Autrement dit, jusqu'à quel niveau d'imbrication un tableau imbriqué doit il être aplati. La valeur par défaut est 1.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Un nouveau tableau qui contient la concaténation des éléments des sous-tableaux du tableau passé en argument.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Aplatir_des_tableaux_imbriqués">Aplatir des tableaux imbriqués</h3>
-
-<pre class="brush: js">var arr1 = [1, 2, [3, 4]];
-arr1.flat();
-// [1, 2, 3, 4]
-
-var arr2 = [1, 2, [3, 4, [5, 6]]];
-arr2.flat();
-// [1, 2, 3, 4, [5, 6]]
-
-var arr3 = [1, 2, [3, 4, [5, 6]]];
-arr3.flat(2);
-// [1, 2, 3, 4, 5, 6]
-</pre>
-
-<h3 id="Aplatir_et_combler_les_trous">Aplatir et combler les trous</h3>
-
-<p>La méthode <code>flat()</code> permet également de retirer les « trous » d'un tableau :</p>
-
-<pre class="brush: js">var arr4 = [1, 2, , 4, 5];
-arr4.flat();
-// [1, 2, 4, 5]</pre>
-
-<h2 id="Équivalent">Équivalent</h2>
-
-<h3 id="reduce_et_concat"><code>reduce</code> et <code>concat</code></h3>
-
-<pre class="brush: js">var arr = [1, 2, [3, 4]];
-
-// pour un tableau avec un seul niveau de profondeur
-arr.flat();
-// est équivalent à
-arr.reduce((acc, val) =&gt; acc.concat(val), []);
-// [1, 2, 3, 4]
-
-// avec la décomposition et les compositions flechées, on peut écrire :
-const flat = arr =&gt; [].concat(...arr);
-</pre>
-
-<h3 id="reduce_concat_isArray_récursivité"><code>reduce</code> + <code>concat</code> + <code>isArray</code> + récursivité</h3>
-
-<pre class="brush: js">var arr = [1, 2, [3, 4, [5, 6]]];
-
-// Pour gérer plusieurs niveaux, on pourra utiliser
-// une méthode récursive avec reduce et concat
-function flatDeep(arr) {
-   return arr.reduce((acc, val) =&gt; acc.concat(Array.isArray(val) ? flatDeep(val) : val), []);
-};
-
-flatDeep(arr);
-// [1, 2, 3, 4, 5, 6]
-</pre>
-
-<h3 id="Utiliser_une_pile">Utiliser une pile</h3>
-
-<pre class="brush: js">var arr = [1, 2, [3, 4]];
-
-// Version non récursive utilisant une pile
-function flatStack(input) {
-  const stack = [...input];
-  const res = [];
-  while (stack.length) {
-    // On sort une valeur de la pile
-    const next = stack.pop();
-    if (Array.isArray(next)) {
-      // On place les éléments qui sont des tableaux dans
-      // la pile sans modifier l'entrée
-      stack.push(...next);
-    } else {
-      res.push(next);
-    }
-  }
-  // On inverse le résultat pour revenir
-  // à l 'ordre de l'entrée
-  return res.reverse();
-}
-
-flatStack(arr);
-// [1, 2, 3, 4]
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td><a href="https://www.ecma-international.org/ecma-262/10.0/index.html#sec-array.prototype.flat">ECMAScript 2019</a></td>
-   <td>Finalisé</td>
-   <td>Proposition initiale</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Array.flat")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Array.prototype.flatMap()")}}</li>
- <li>{{jsxref("Array.prototype.map()")}}</li>
- <li>{{jsxref("Array.prototype.reduce()")}}</li>
- <li>{{jsxref("Array.prototype.concat()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/array/flat/index.md b/files/fr/web/javascript/reference/global_objects/array/flat/index.md
new file mode 100644
index 0000000000..e9ee2df63b
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/array/flat/index.md
@@ -0,0 +1,134 @@
+---
+title: Array.prototype.flat()
+slug: Web/JavaScript/Reference/Global_Objects/Array/flat
+tags:
+  - Array
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/flat
+original_slug: Web/JavaScript/Reference/Objets_globaux/Array/flat
+---
+{{JSRef}}
+
+La méthode **`flat()`** permet de créer un nouveau tableau contenant les éléments des sous-tableaux du tableau passé en argument, qui sont concaténés récursivement pour atteindre une profondeur donnée.
+
+## Syntaxe
+
+    var nouveauTableau = monTableau.flat([profondeur]);
+
+### Paramètres
+
+- `profondeur` {{optional_inline}}
+  - : Le niveau de profondeur en termes d'imbrication de tableau. Autrement dit, jusqu'à quel niveau d'imbrication un tableau imbriqué doit il être aplati. La valeur par défaut est 1.
+
+### Valeur de retour
+
+Un nouveau tableau qui contient la concaténation des éléments des sous-tableaux du tableau passé en argument.
+
+## Exemples
+
+### Aplatir des tableaux imbriqués
+
+```js
+var arr1 = [1, 2, [3, 4]];
+arr1.flat();
+// [1, 2, 3, 4]
+
+var arr2 = [1, 2, [3, 4, [5, 6]]];
+arr2.flat();
+// [1, 2, 3, 4, [5, 6]]
+
+var arr3 = [1, 2, [3, 4, [5, 6]]];
+arr3.flat(2);
+// [1, 2, 3, 4, 5, 6]
+```
+
+### Aplatir et combler les trous
+
+La méthode `flat()` permet également de retirer les « trous » d'un tableau :
+
+```js
+var arr4 = [1, 2, , 4, 5];
+arr4.flat();
+// [1, 2, 4, 5]
+```
+
+## Équivalent
+
+### `reduce` et `concat`
+
+```js
+var arr = [1, 2, [3, 4]];
+
+// pour un tableau avec un seul niveau de profondeur
+arr.flat();
+// est équivalent à
+arr.reduce((acc, val) => acc.concat(val), []);
+// [1, 2, 3, 4]
+
+// avec la décomposition et les compositions flechées, on peut écrire :
+const flat = arr => [].concat(...arr);
+```
+
+### `reduce` + `concat` + `isArray` + récursivité
+
+```js
+var arr = [1, 2, [3, 4, [5, 6]]];
+
+// Pour gérer plusieurs niveaux, on pourra utiliser
+// une méthode récursive avec reduce et concat
+function flatDeep(arr) {
+   return arr.reduce((acc, val) => acc.concat(Array.isArray(val) ? flatDeep(val) : val), []);
+};
+
+flatDeep(arr);
+// [1, 2, 3, 4, 5, 6]
+```
+
+### Utiliser une pile
+
+```js
+var arr = [1, 2, [3, 4]];
+
+// Version non récursive utilisant une pile
+function flatStack(input) {
+  const stack = [...input];
+  const res = [];
+  while (stack.length) {
+    // On sort une valeur de la pile
+    const next = stack.pop();
+    if (Array.isArray(next)) {
+      // On place les éléments qui sont des tableaux dans
+      // la pile sans modifier l'entrée
+      stack.push(...next);
+    } else {
+      res.push(next);
+    }
+  }
+  // On inverse le résultat pour revenir
+  // à l 'ordre de l'entrée
+  return res.reverse();
+}
+
+flatStack(arr);
+// [1, 2, 3, 4]
+```
+
+## Spécifications
+
+| Spécification                                                                                           | État     | Commentaires         |
+| ------------------------------------------------------------------------------------------------------- | -------- | -------------------- |
+| [ECMAScript 2019](https://www.ecma-international.org/ecma-262/10.0/index.html#sec-array.prototype.flat) | Finalisé | Proposition initiale |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Array.flat")}}
+
+## Voir aussi
+
+- {{jsxref("Array.prototype.flatMap()")}}
+- {{jsxref("Array.prototype.map()")}}
+- {{jsxref("Array.prototype.reduce()")}}
+- {{jsxref("Array.prototype.concat()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/array/flatmap/index.html b/files/fr/web/javascript/reference/global_objects/array/flatmap/index.html
deleted file mode 100644
index 4117829f18..0000000000
--- a/files/fr/web/javascript/reference/global_objects/array/flatmap/index.html
+++ /dev/null
@@ -1,120 +0,0 @@
----
-title: Array.prototype.flatMap()
-slug: Web/JavaScript/Reference/Global_Objects/Array/flatMap
-tags:
-  - Array
-  - JavaScript
-  - Méthode
-  - Prototype
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Array/flatMap
-original_slug: Web/JavaScript/Reference/Objets_globaux/Array/flatMap
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <code><strong>flatMap()</strong></code> permet d'appliquer une fonction à chaque élément du tableau puis d'aplatir le résultat en un tableau. Cela correspond à l'enchaînement de {{jsxref("Array.prototype.map()")}} suivi de {{jsxref("Array.prototype.flat()")}} de profondeur 1. <code>flatMap</code> est plus efficace que la combinaison de ces deux opérations, souvent réalisées conjointement.</p>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>var new_array = arr</var>.flatMap(function <var>callback(currentValue[, index[, array]]) {
-    // return element for new_array
-}</var>[, <var>thisArg</var>])</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>callback</code></dt>
- <dd>La fonction qui produit un élément du nouveau tableau et qui prend trois arguments :
- <dl>
-  <dt><code>currentValue</code></dt>
-  <dd>La valeur du tableau qui est traitée.</dd>
-  <dt><code>index</code>{{optional_inline}}</dt>
-  <dd>L'indice de l'élément du tableau qui est traitée.</dd>
-  <dt><code>array</code>{{optional_inline}}</dt>
-  <dd>Le tableau sur lequel <code>flatMap</code> a été appelée.</dd>
- </dl>
- </dd>
- <dt><code>thisArg</code>{{optional_inline}}</dt>
- <dd>La valeur à utiliser comme contexte <code>this</code> lors de l'exécution de <code>callback</code>.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Un nouveau tableau composé d'éléments résultants de la fonction de rappel (<em>callback</em>) et aplati d'un niveau de profondeur.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>Pour la fonction de rappel, voir {{jsxref("Array.prototype.map()")}}. La méthode <code>flatMap()</code> est identique à un appel de {{jsxref("Array.prototype.map()")}} suivi d'un appel de {{jsxref("Array.prototype.flat()")}} avec la profondeur 1.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="map_et_flatMap"><code>map()</code> et <code>flatMap()</code></h3>
-
-<pre class="brush: js">var arr1 = [1, 2, 3, 4];
-
-arr1.map(x =&gt; [x * 2]);
-// [[2], [4], [6], [8]]
-
-arr1.flatMap(x =&gt; [x * 2]);
-// [2, 4, 6, 8]
-
-// seul un niveau est aplati
-arr1.flatMap(x =&gt; [[x * 2]]);
-// [[2], [4], [6], [8]]
-</pre>
-
-<p>On peut utiliser un autre exemple où on génère une liste de mots à partir d'une liste de phrases :</p>
-
-<pre class="brush: js">let tableau1 = ["Coucou comment", "", "ça va ?"];
-
-tableau1.map(x =&gt; x.split(" "));
-// [["Coucou", "comment"], [""], ["ça", "va", "?"]]
-
-tableau1.flatMap(x =&gt; x.split(" "));
-// ["Coucou", "comment", "", "ça", "va", "?"]
-</pre>
-
-<p>On notera que la longueur de la liste obtenue avec <code>flatMap</code> est différente de la longueur de la liste originale.</p>
-
-<pre>//=&gt; [1, 2, 3, 4, 5, 6, 7, 8, 9]</pre>
-
-<h2 id="Équivalent">Équivalent</h2>
-
-<h3 id="reduce_et_concat"><code>reduce()</code> et <code>concat()</code></h3>
-
-<pre class="brush: js">var arr = [1, 2, 3, 4];
-
-arr.flatMap(x =&gt; [x, x * 2]);
-// est équivalent à
-arr.reduce((acc, x) =&gt; acc.concat([x, x * 2]), []);
-// [1, 2, 2, 4, 3, 6, 4, 8]</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td><a href="https://www.ecma-international.org/ecma-262/10.0/index.html#sec-array.prototype.flatmap">ECMAScript 2019</a></td>
-   <td>Finalisé</td>
-   <td>Proposition initiale</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Array.flatMap")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Array.prototype.flat()")}}</li>
- <li>{{jsxref("Array.prototype.map()")}}</li>
- <li>{{jsxref("Array.prototype.reduce()")}}</li>
- <li>{{jsxref("Array.prototype.concat()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/array/flatmap/index.md b/files/fr/web/javascript/reference/global_objects/array/flatmap/index.md
new file mode 100644
index 0000000000..1c95114d1d
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/array/flatmap/index.md
@@ -0,0 +1,109 @@
+---
+title: Array.prototype.flatMap()
+slug: Web/JavaScript/Reference/Global_Objects/Array/flatMap
+tags:
+  - Array
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/flatMap
+original_slug: Web/JavaScript/Reference/Objets_globaux/Array/flatMap
+---
+{{JSRef}}
+
+La méthode **`flatMap()`** permet d'appliquer une fonction à chaque élément du tableau puis d'aplatir le résultat en un tableau. Cela correspond à l'enchaînement de {{jsxref("Array.prototype.map()")}} suivi de {{jsxref("Array.prototype.flat()")}} de profondeur 1. `flatMap` est plus efficace que la combinaison de ces deux opérations, souvent réalisées conjointement.
+
+## Syntaxe
+
+    var new_array = arr.flatMap(function callback(currentValue[, index[, array]]) {
+        // return element for new_array
+    }[, thisArg])
+
+### Paramètres
+
+- `callback`
+
+  - : La fonction qui produit un élément du nouveau tableau et qui prend trois arguments :
+
+    - `currentValue`
+      - : La valeur du tableau qui est traitée.
+    - `index`{{optional_inline}}
+      - : L'indice de l'élément du tableau qui est traitée.
+    - `array`{{optional_inline}}
+      - : Le tableau sur lequel `flatMap` a été appelée.
+
+- `thisArg`{{optional_inline}}
+  - : La valeur à utiliser comme contexte `this` lors de l'exécution de `callback`.
+
+### Valeur de retour
+
+Un nouveau tableau composé d'éléments résultants de la fonction de rappel (_callback_) et aplati d'un niveau de profondeur.
+
+## Description
+
+Pour la fonction de rappel, voir {{jsxref("Array.prototype.map()")}}. La méthode `flatMap()` est identique à un appel de {{jsxref("Array.prototype.map()")}} suivi d'un appel de {{jsxref("Array.prototype.flat()")}} avec la profondeur 1.
+
+## Exemples
+
+### `map()` et `flatMap()`
+
+```js
+var arr1 = [1, 2, 3, 4];
+
+arr1.map(x => [x * 2]);
+// [[2], [4], [6], [8]]
+
+arr1.flatMap(x => [x * 2]);
+// [2, 4, 6, 8]
+
+// seul un niveau est aplati
+arr1.flatMap(x => [[x * 2]]);
+// [[2], [4], [6], [8]]
+```
+
+On peut utiliser un autre exemple où on génère une liste de mots à partir d'une liste de phrases :
+
+```js
+let tableau1 = ["Coucou comment", "", "ça va ?"];
+
+tableau1.map(x => x.split(" "));
+// [["Coucou", "comment"], [""], ["ça", "va", "?"]]
+
+tableau1.flatMap(x => x.split(" "));
+// ["Coucou", "comment", "", "ça", "va", "?"]
+```
+
+On notera que la longueur de la liste obtenue avec `flatMap` est différente de la longueur de la liste originale.
+
+    //=> [1, 2, 3, 4, 5, 6, 7, 8, 9]
+
+## Équivalent
+
+### `reduce()` et `concat()`
+
+```js
+var arr = [1, 2, 3, 4];
+
+arr.flatMap(x => [x, x * 2]);
+// est équivalent à
+arr.reduce((acc, x) => acc.concat([x, x * 2]), []);
+// [1, 2, 2, 4, 3, 6, 4, 8]
+```
+
+## Spécifications
+
+| Spécification                                                                                              | État     | Commentaires         |
+| ---------------------------------------------------------------------------------------------------------- | -------- | -------------------- |
+| [ECMAScript 2019](https://www.ecma-international.org/ecma-262/10.0/index.html#sec-array.prototype.flatmap) | Finalisé | Proposition initiale |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Array.flatMap")}}
+
+## Voir aussi
+
+- {{jsxref("Array.prototype.flat()")}}
+- {{jsxref("Array.prototype.map()")}}
+- {{jsxref("Array.prototype.reduce()")}}
+- {{jsxref("Array.prototype.concat()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/array/foreach/index.html b/files/fr/web/javascript/reference/global_objects/array/foreach/index.html
deleted file mode 100644
index 1b10baec33..0000000000
--- a/files/fr/web/javascript/reference/global_objects/array/foreach/index.html
+++ /dev/null
@@ -1,271 +0,0 @@
----
-title: Array.prototype.forEach()
-slug: Web/JavaScript/Reference/Global_Objects/Array/forEach
-tags:
-  - Array
-  - ECMAScript 5
-  - JavaScript
-  - Méthode
-  - Prototype
-  - Reference
-  - polyfill
-translation_of: Web/JavaScript/Reference/Global_Objects/Array/forEach
-original_slug: Web/JavaScript/Reference/Objets_globaux/Array/forEach
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <code><strong>forEach()</strong></code> permet d'exécuter une fonction donnée sur chaque élément du tableau.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/array-foreach.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>arr</var>.forEach(<var>callback</var>);
-arr.forEach(callback, <var>thisArg</var>);</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>callback</code></dt>
- <dd>La fonction à utiliser pour chaque élément du tableau. Elle prend en compte trois arguments :
- <dl>
-  <dt><code>valeurCourante</code></dt>
-  <dd>La valeur de l'élément du tableau en cours de traitement.</dd>
-  <dt><code>index</code> {{optional_inline}}</dt>
-  <dd>L'indice de l'élément du tableau en cours de traitement.</dd>
-  <dt><code>array</code> {{optional_inline}}</dt>
-  <dd>Le tableau sur lequel la méthode <code>forEach</code> est appliquée.</dd>
- </dl>
- </dd>
- <dt><code>thisArg</code> {{optional_inline}}</dt>
- <dd>Paramètre optionnel. La valeur à utiliser pour <code>this</code> lors de l'exécution de <code>callback</code>.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>{{jsxref("undefined")}}.</p>
-
-<h2 id="Description">Description</h2>
-
-<p><code>forEach()</code> exécute la fonction <code><em>callback</em></code> une fois pour chaque élément du tableau, dans l'ordre croissant des indices. Cette fonction n'est pas appelée pour les indices pour lesquels les éléments ont été supprimés ou qui n'ont pas été définis. Attention, en revanche elle est appelée pour les éléments qui sont présents et qui valent {{jsxref("undefined")}}.</p>
-
-<p><code>callback</code> est appelé avec trois arguments :</p>
-
-<ul>
- <li>la valeur de l'élément</li>
- <li>l'index de l'élément</li>
- <li>le tableau utilisé</li>
-</ul>
-
-<p>Si un paramètre <code>thisArg</code> est fourni à la méthode <code>forEach</code>, il sera utilisé en tant que valeur <code>this</code> pour chaque appel de <code>callback</code>. Sinon, ce sera la valeur <code>undefined</code> qui sera utilisée comme valeur <code>this</code>. La valeur <code>this</code> finalement prise en compte par la fonction <code>callback</code> est déterminée selon <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_this">les règles usuelles pour déterminer la valeur de <code>this</code> utilisée dans une fonction</a>.</p>
-
-<p>L'ensemble des éléments traités par <code>forEach</code> est défini avant le premier appel à <code>callback</code>. Les éléments ajoutés au tableau après que l'appel à <code>forEach</code> ait commencé ne seront pas visités par <code>callback</code>. Si des éléments déjà présents dans le tableau sont modifiés, leur valeur telle qu'elle est passée au <code>callback</code> sera la valeur au moment du passage du <code>forEach</code> ; les éléments supprimés ne sont pas parcourus. Voir <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/forEach#Attention_aux_modifications_en_cours">l'exemple ci-après</a>.</p>
-
-<p><code>forEach()</code> exécute la fonction <code>callback</code> une fois pour chaque élément. À la différence de {{jsxref("Array.prototype.map()", "map()")}} ou de {{jsxref("Array.prototype.reduce()", "reduce()")}} il renvoie toujours la valeur {{jsxref("undefined")}} et ne peut donc pas être « enchaîné ». Généralement, l'effet voulu est de déclencher des effets de bord en fin de chaîne.</p>
-
-<p><code>forEach()</code> ne modifie pas le tableau sur lequel elle est appelée, en revanche, la fonction de retour (<em>callback</em>) utilisée peut modifier le tableau.</p>
-
-<div class="note"><p><strong>Note :</strong> Il n'existe aucun moyen d'arrêter une boucle <code>forEach</code> en dehors de lever une exception. Si vous avez besoin d'arrêter la boucle, étudiez plutôt :</p>
-
-<ul>
- <li>Une boucle <code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/for">for</a></code> classique</li>
- <li>Une boucle <code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/for...in">for...in</a></code> ou <code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/for...of">for...of</a></code></li>
- <li>{{jsxref("Array.prototype.every()")}}</li>
- <li>{{jsxref("Array.prototype.some()")}}</li>
- <li>{{jsxref("Array.prototype.find()")}}</li>
- <li>{{jsxref("Array.prototype.findIndex()")}}</li>
-</ul>
-
-<p>Les autres méthodes associées aux tableaux ({{jsxref("Array.prototype.every()")}}, {{jsxref("Array.prototype.some()")}}, {{jsxref("Array.prototype.find()")}}, {{jsxref("Array.prototype.findIndex()")}}) utilisent une fonction de texte qui permet de renvoyer une valeur équivalente à <code>true</code> si besoin de poursuivre la boucle.</p>
-</div>
-
-<p><code>forEach</code> exécute la fonction <code>callback</code> une fois pour chaque élément ; contrairement à <code>every</code> et <code><code>some</code></code>, cette méthode renvoie toujours <code>undefined</code> et ne peut pas être enchaînée.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Équivalence_entre_une_boucle_for_et_une_boucle_forEach">Équivalence entre une boucle <code>for</code> et une boucle <code>forEach</code></h3>
-
-<p>Voici un fragment de code simple qui utilise une boucle <code>for</code></p>
-
-<pre class="brush: js">var items = ["item1", "item2", "item3"];
-var copie = [];
-
-for (var i = 0; i &lt; items.length; i++) {
-  copie.push(items[i]);
-}
-</pre>
-
-<p>Et voici un fragment de code équivalent qui utilise <code>forEach</code> :</p>
-
-<pre class="brush: js">var items = ["item1", "item2", "item3"]
-var copie = [];
-
-items.forEach(function(item){
-  copie.push(item);
-});</pre>
-
-<h3 id="Afficher_le_contenu_d'un_tableau">Afficher le contenu d'un tableau</h3>
-
-<div class="note">
-<p><strong>Note :</strong> Pour afficher le contenu d'un tableau, on pourra utiliser <code><a href="/fr/docs/Web/API/Console/table">console.table()</a></code> qui met en forme les éléments du tableau. L'exemple suivant est laissé à titre d'illustration pour <code>forEach()</code>.</p>
-</div>
-
-<p>Le code suivant affiche une ligne pour chaque élément du tableau :</p>
-
-<pre class="brush:js">function logArrayElements(element, index, array) {
-    console.log("a[" + index + "] = " + element);
-}
-[2, 5, , 9].forEach(logArrayElements);
-// logs:
-// a[0] = 2
-// a[1] = 5
-// a[3] = 9
-
-</pre>
-
-<h3 id="Utiliser_l'argument_pour_this">Utiliser l'argument pour <code>this</code></h3>
-
-<p>Dans l'exemple qui suit, on met à jour les propriétés d'un objet à partir des éléments d'un tableau :</p>
-
-<pre class="brush: js">function Compteur() {
-  this.somme = 0;
-  this.compte = 0;
-}
-
-Compteur.prototype.ajouter = function(tableau) {
-  tableau.forEach(function(element) {
-    this.somme += element;
-    ++this.compte;
-  },  this);
-  //  ^---- On a ajouté l'argument this ici.
-};
-
-var obj = new Compteur();
-obj.ajouter([2, 5, 9]);
-console.log(obj.compte); // 3
-console.log(obj.somme);  // 16
-</pre>
-
-<div class="note">
-<p><strong>Note :</strong> Le paramètre pour <code>this</code> est passé à la méthode <code>forEach()</code>, à chaque appel du callback, celui-ci sera utilisé comme valeur pour <code>this</code>.</p>
-</div>
-
-<div class="note">
-<p><strong>Note :</strong> Si la fonction passée en argument est <a href="/fr/docs/Web/JavaScript/Reference/Fonctions/Fonctions_fléchées">une fonction fléchée</a>, il n'est pas nécessaire d'ajouter le paramètre <code>this</code> car les fonctions fléchées utilisent le <code><a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/L_op%C3%A9rateur_this">this</a></code> fourni par le contexte lexical.</p>
-</div>
-
-<h3 id="Stopper_une_boucle">Stopper une boucle</h3>
-
-<p>Le code qui suit utilise la méthode {{jsxref("Array.prototype.every")}} pour afficher le contenu d'un tableau et s'arrêter lorsqu'il atteint une valeur supérieure à <code>SEUIL_MAX</code>.</p>
-
-<pre class="brush: js">var SEUIL_MAX = 12;
-var v = [5, 2, 16, 4, 3, 18, 20];
-var res;
-
-res = v.every(function(element, index, array) {
-  console.log('élément :', element);
-  if (element &gt;= SEUIL_MAX) {
-    return false;
-  }
-
-  return true;
-});
-console.log('res:', res);
-// affiche :
-// élément : 5
-// élément : 2
-// élément : 16
-// res : false
-
-res = v.some(function(element, index, array) {
-  console.log('élément:', element);
-  if (element &gt;= SEUIL_MAX) {
-    return true;
-  }
-
-  return false;
-});
-console.log('res:', res);
-// affiche :
-// élément : 5
-// élément : 2
-// élément : 16
-// res: true</pre>
-
-<h3 id="Une_fonction_de_copie_d'objet">Une fonction de copie d'objet</h3>
-
-<p>Le code qui suit permet de créer une copie d'un objet donné. Il existe différentes façons pour créer une copie d'un objet. L'exemple suivant illustre une de ces façons afin d'expliquer le fonctionnement d'<code>Array.prototype.forEach</code> et d'utiliser les fonctions ECMAScript 5 <code>Object.*</code>.</p>
-
-<pre class="brush: js">function copie(obj) {
-  var copie = Object.create(Object.getPrototypeOf(obj));
-  var propNames = Object.getOwnPropertyNames(obj);
-
-  propNames.forEach(function(nom) {
-    var desc = Object.getOwnPropertyDescriptor(obj, nom);
-    Object.defineProperty(copie, nom, desc);
-  });
-
-  return copie;
-}
-
-var obj1 = { a: 1, b: 2 };
-var obj2 = copie(obj1); // obj2 ressemble désormais à obj1</pre>
-
-<h3 id="Attention_aux_modifications_en_cours">Attention aux modifications en cours</h3>
-
-<p>Dans l'exemple qui suit, on utilise un tableau qui contient quatre élément : <code>"un"</code>, <code>"deux"</code>, <code>"trois"</code>, <code>"quatre"</code>. Lorsque le parcours du tableau arrive à l'élément <code>"deux"</code>, on décale le tableau d'un cran vers les premiers éléments. Aussi, l'élément <code>"quatre"</code> est décalé à la place de <code>"trois"</code> et <code>"trois"</code> est déplacé à la place de <code>"deux"</code>. Pour cette raison, lorsque <code>forEach</code> poursuit son parcours, elle saute la valeur "trois". Autrement dit, <code>forEach</code> n'utilise pas une copie du tableau au moment où elle est appelée, elle manipule le tableau directement. On voit aussi dans cet exemple que les éléments non initialisés ne sont pas traités par la fonction de rappel.</p>
-
-<pre class="brush: js">var mots = ["un", "deux", "trois",, "quatre"];
-mots.forEach(function(mot) {
-  console.log(mot);
-  if (mot === "deux") {
-    mots.shift();
-  }
-});
-// un
-// deux
-// quatre</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-15.4.4.18', 'Array.prototype.forEach')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td>Définition initiale. Implémentée avec JavaScript 1.6.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-array.prototype.foreach', 'Array.prototype.forEach')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-array.prototype.foreach', 'Array.prototype.forEach')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Array.forEach")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Array.prototype.filter()")}}</li>
- <li>{{jsxref("Array.prototype.find()")}}</li>
- <li>{{jsxref("Array.prototype.findIndex()")}}</li>
- <li>{{jsxref("Array.prototype.map()")}}</li>
- <li>{{jsxref("Array.prototype.every()")}}</li>
- <li>{{jsxref("Array.prototype.some()")}}</li>
- <li>{{jsxref("Map.prototype.forEach()")}}</li>
- <li>{{jsxref("Set.prototype.forEach()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/array/foreach/index.md b/files/fr/web/javascript/reference/global_objects/array/foreach/index.md
new file mode 100644
index 0000000000..13b7cf4a13
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/array/foreach/index.md
@@ -0,0 +1,247 @@
+---
+title: Array.prototype.forEach()
+slug: Web/JavaScript/Reference/Global_Objects/Array/forEach
+tags:
+  - Array
+  - ECMAScript 5
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - polyfill
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/forEach
+original_slug: Web/JavaScript/Reference/Objets_globaux/Array/forEach
+---
+{{JSRef}}
+
+La méthode **`forEach()`** permet d'exécuter une fonction donnée sur chaque élément du tableau.
+
+{{EmbedInteractiveExample("pages/js/array-foreach.html")}}
+
+## Syntaxe
+
+    arr.forEach(callback);
+    arr.forEach(callback, thisArg);
+
+### Paramètres
+
+- `callback`
+
+  - : La fonction à utiliser pour chaque élément du tableau. Elle prend en compte trois arguments :
+
+    - `valeurCourante`
+      - : La valeur de l'élément du tableau en cours de traitement.
+    - `index` {{optional_inline}}
+      - : L'indice de l'élément du tableau en cours de traitement.
+    - `array` {{optional_inline}}
+      - : Le tableau sur lequel la méthode `forEach` est appliquée.
+
+- `thisArg` {{optional_inline}}
+  - : Paramètre optionnel. La valeur à utiliser pour `this` lors de l'exécution de `callback`.
+
+### Valeur de retour
+
+{{jsxref("undefined")}}.
+
+## Description
+
+`forEach()` exécute la fonction `callback` une fois pour chaque élément du tableau, dans l'ordre croissant des indices. Cette fonction n'est pas appelée pour les indices pour lesquels les éléments ont été supprimés ou qui n'ont pas été définis. Attention, en revanche elle est appelée pour les éléments qui sont présents et qui valent {{jsxref("undefined")}}.
+
+`callback` est appelé avec trois arguments :
+
+- la valeur de l'élément
+- l'index de l'élément
+- le tableau utilisé
+
+Si un paramètre `thisArg` est fourni à la méthode `forEach`, il sera utilisé en tant que valeur `this` pour chaque appel de `callback`. Sinon, ce sera la valeur `undefined` qui sera utilisée comme valeur `this`. La valeur `this` finalement prise en compte par la fonction `callback` est déterminée selon [les règles usuelles pour déterminer la valeur de `this` utilisée dans une fonction](/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_this).
+
+L'ensemble des éléments traités par `forEach` est défini avant le premier appel à `callback`. Les éléments ajoutés au tableau après que l'appel à `forEach` ait commencé ne seront pas visités par `callback`. Si des éléments déjà présents dans le tableau sont modifiés, leur valeur telle qu'elle est passée au `callback` sera la valeur au moment du passage du `forEach` ; les éléments supprimés ne sont pas parcourus. Voir [l'exemple ci-après](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/forEach#Attention_aux_modifications_en_cours).
+
+`forEach()` exécute la fonction `callback` une fois pour chaque élément. À la différence de {{jsxref("Array.prototype.map()", "map()")}} ou de {{jsxref("Array.prototype.reduce()", "reduce()")}} il renvoie toujours la valeur {{jsxref("undefined")}} et ne peut donc pas être « enchaîné ». Généralement, l'effet voulu est de déclencher des effets de bord en fin de chaîne.
+
+`forEach()` ne modifie pas le tableau sur lequel elle est appelée, en revanche, la fonction de retour (_callback_) utilisée peut modifier le tableau.
+
+> **Note :** Il n'existe aucun moyen d'arrêter une boucle `forEach` en dehors de lever une exception. Si vous avez besoin d'arrêter la boucle, étudiez plutôt :
+>
+> - Une boucle [`for`](/fr/docs/Web/JavaScript/Reference/Instructions/for) classique
+> - Une boucle [`for...in`](/fr/docs/Web/JavaScript/Reference/Instructions/for...in) ou [`for...of`](/fr/docs/Web/JavaScript/Reference/Instructions/for...of)
+> - {{jsxref("Array.prototype.every()")}}
+> - {{jsxref("Array.prototype.some()")}}
+> - {{jsxref("Array.prototype.find()")}}
+> - {{jsxref("Array.prototype.findIndex()")}}
+>
+> Les autres méthodes associées aux tableaux ({{jsxref("Array.prototype.every()")}}, {{jsxref("Array.prototype.some()")}}, {{jsxref("Array.prototype.find()")}}, {{jsxref("Array.prototype.findIndex()")}}) utilisent une fonction de texte qui permet de renvoyer une valeur équivalente à `true` si besoin de poursuivre la boucle.
+
+`forEach` exécute la fonction `callback` une fois pour chaque élément ; contrairement à `every` et `some`, cette méthode renvoie toujours `undefined` et ne peut pas être enchaînée.
+
+## Exemples
+
+### Équivalence entre une boucle `for` et une boucle `forEach`
+
+Voici un fragment de code simple qui utilise une boucle `for`
+
+```js
+var items = ["item1", "item2", "item3"];
+var copie = [];
+
+for (var i = 0; i < items.length; i++) {
+  copie.push(items[i]);
+}
+```
+
+Et voici un fragment de code équivalent qui utilise `forEach` :
+
+```js
+var items = ["item1", "item2", "item3"]
+var copie = [];
+
+items.forEach(function(item){
+  copie.push(item);
+});
+```
+
+### Afficher le contenu d'un tableau
+
+> **Note :** Pour afficher le contenu d'un tableau, on pourra utiliser [`console.table()`](/fr/docs/Web/API/Console/table) qui met en forme les éléments du tableau. L'exemple suivant est laissé à titre d'illustration pour `forEach()`.
+
+Le code suivant affiche une ligne pour chaque élément du tableau :
+
+```js
+function logArrayElements(element, index, array) {
+    console.log("a[" + index + "] = " + element);
+}
+[2, 5, , 9].forEach(logArrayElements);
+// logs:
+// a[0] = 2
+// a[1] = 5
+// a[3] = 9
+```
+
+### Utiliser l'argument pour `this`
+
+Dans l'exemple qui suit, on met à jour les propriétés d'un objet à partir des éléments d'un tableau :
+
+```js
+function Compteur() {
+  this.somme = 0;
+  this.compte = 0;
+}
+
+Compteur.prototype.ajouter = function(tableau) {
+  tableau.forEach(function(element) {
+    this.somme += element;
+    ++this.compte;
+  },  this);
+  //  ^---- On a ajouté l'argument this ici.
+};
+
+var obj = new Compteur();
+obj.ajouter([2, 5, 9]);
+console.log(obj.compte); // 3
+console.log(obj.somme);  // 16
+```
+
+> **Note :** Le paramètre pour `this` est passé à la méthode `forEach()`, à chaque appel du callback, celui-ci sera utilisé comme valeur pour `this`.
+
+> **Note :** Si la fonction passée en argument est [une fonction fléchée](/fr/docs/Web/JavaScript/Reference/Fonctions/Fonctions_fléchées), il n'est pas nécessaire d'ajouter le paramètre `this` car les fonctions fléchées utilisent le [`this`](/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/L_op%C3%A9rateur_this) fourni par le contexte lexical.
+
+### Stopper une boucle
+
+Le code qui suit utilise la méthode {{jsxref("Array.prototype.every")}} pour afficher le contenu d'un tableau et s'arrêter lorsqu'il atteint une valeur supérieure à `SEUIL_MAX`.
+
+```js
+var SEUIL_MAX = 12;
+var v = [5, 2, 16, 4, 3, 18, 20];
+var res;
+
+res = v.every(function(element, index, array) {
+  console.log('élément :', element);
+  if (element >= SEUIL_MAX) {
+    return false;
+  }
+
+  return true;
+});
+console.log('res:', res);
+// affiche :
+// élément : 5
+// élément : 2
+// élément : 16
+// res : false
+
+res = v.some(function(element, index, array) {
+  console.log('élément:', element);
+  if (element >= SEUIL_MAX) {
+    return true;
+  }
+
+  return false;
+});
+console.log('res:', res);
+// affiche :
+// élément : 5
+// élément : 2
+// élément : 16
+// res: true
+```
+
+### Une fonction de copie d'objet
+
+Le code qui suit permet de créer une copie d'un objet donné. Il existe différentes façons pour créer une copie d'un objet. L'exemple suivant illustre une de ces façons afin d'expliquer le fonctionnement d'`Array.prototype.forEach` et d'utiliser les fonctions ECMAScript 5 `Object.*`.
+
+```js
+function copie(obj) {
+  var copie = Object.create(Object.getPrototypeOf(obj));
+  var propNames = Object.getOwnPropertyNames(obj);
+
+  propNames.forEach(function(nom) {
+    var desc = Object.getOwnPropertyDescriptor(obj, nom);
+    Object.defineProperty(copie, nom, desc);
+  });
+
+  return copie;
+}
+
+var obj1 = { a: 1, b: 2 };
+var obj2 = copie(obj1); // obj2 ressemble désormais à obj1
+```
+
+### Attention aux modifications en cours
+
+Dans l'exemple qui suit, on utilise un tableau qui contient quatre élément : `"un"`, `"deux"`, `"trois"`, `"quatre"`. Lorsque le parcours du tableau arrive à l'élément `"deux"`, on décale le tableau d'un cran vers les premiers éléments. Aussi, l'élément `"quatre"` est décalé à la place de `"trois"` et `"trois"` est déplacé à la place de `"deux"`. Pour cette raison, lorsque `forEach` poursuit son parcours, elle saute la valeur "trois". Autrement dit, `forEach` n'utilise pas une copie du tableau au moment où elle est appelée, elle manipule le tableau directement. On voit aussi dans cet exemple que les éléments non initialisés ne sont pas traités par la fonction de rappel.
+
+```js
+var mots = ["un", "deux", "trois",, "quatre"];
+mots.forEach(function(mot) {
+  console.log(mot);
+  if (mot === "deux") {
+    mots.shift();
+  }
+});
+// un
+// deux
+// quatre
+```
+
+## Spécifications
+
+| Spécification                                                                                                | État                         | Commentaires                                          |
+| ------------------------------------------------------------------------------------------------------------ | ---------------------------- | ----------------------------------------------------- |
+| {{SpecName('ES5.1', '#sec-15.4.4.18', 'Array.prototype.forEach')}}                     | {{Spec2('ES5.1')}}     | Définition initiale. Implémentée avec JavaScript 1.6. |
+| {{SpecName('ES6', '#sec-array.prototype.foreach', 'Array.prototype.forEach')}}     | {{Spec2('ES6')}}         |                                                       |
+| {{SpecName('ESDraft', '#sec-array.prototype.foreach', 'Array.prototype.forEach')}} | {{Spec2('ESDraft')}} |                                                       |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Array.forEach")}}
+
+## Voir aussi
+
+- {{jsxref("Array.prototype.filter()")}}
+- {{jsxref("Array.prototype.find()")}}
+- {{jsxref("Array.prototype.findIndex()")}}
+- {{jsxref("Array.prototype.map()")}}
+- {{jsxref("Array.prototype.every()")}}
+- {{jsxref("Array.prototype.some()")}}
+- {{jsxref("Map.prototype.forEach()")}}
+- {{jsxref("Set.prototype.forEach()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/array/from/index.html b/files/fr/web/javascript/reference/global_objects/array/from/index.html
deleted file mode 100644
index de22e8feea..0000000000
--- a/files/fr/web/javascript/reference/global_objects/array/from/index.html
+++ /dev/null
@@ -1,135 +0,0 @@
----
-title: Array.from()
-slug: Web/JavaScript/Reference/Global_Objects/Array/from
-tags:
-  - Array
-  - ECMAScript 2015
-  - JavaScript
-  - Méthode
-  - Reference
-  - polyfill
-translation_of: Web/JavaScript/Reference/Global_Objects/Array/from
-original_slug: Web/JavaScript/Reference/Objets_globaux/Array/from
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <code><strong>Array.from()</strong></code> permet de créer une nouvelle instance d'<code>Array</code> (une copie superficielle) à partir d'un objet itérable ou semblable à un tableau.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/array-from.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">Array.from(arrayLike [, fonctionMap[, thisArg]])</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>arrayLike</code></dt>
- <dd>Un objet semblable à un tableau ou bien un objet itérable dont on souhaite créer un tableau, instance d'<code>Array</code>.</dd>
- <dt><code>fonctionMap</code> {{optional_inline}}</dt>
- <dd>Argument optionnel, une fonction à appliquer à chacun des éléments du tableau.</dd>
- <dt><code>thisArg</code> {{optional_inline}}</dt>
- <dd>Argument optionnel. La valeur à utiliser pour <code>this</code> lors de l'exécution de la fonction <code>fonctionMap</code>.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Une nouvelle instance de {{jsxref("Array")}}.</p>
-
-<h2 id="Description">Description</h2>
-
-<p><code>Array.from()</code> permet de créer des instances d'<code>Array</code> à partir :</p>
-
-<ul>
- <li>d'objets semblables à des tableaux (qui disposent d'une propriété <code>length</code> et d'éléments indexés) ou</li>
- <li><a href="/fr/docs/Web/JavaScript/Guide/iterable">d'objets itérables</a> (des objets dont on peut avoir les éléments comme {{jsxref("Map")}} et {{jsxref("Set")}}).</li>
-</ul>
-
-<p><code>Array.from()</code> possède un paramètre optionnel <code>fonctionMap</code>, qui permet d'exécuter une fonction {{jsxref("Array.prototype.map", "map")}} sur chacun des éléments du tableau (ou de l'instance de la classe fille) qui est créé. Autrement dit<code> Array.from(obj, mapFn, thisArg)</code> correspond exactement à <code>Array.from(obj).map(mapFn, thisArg)</code>, sauf qu'il n'y a pas de tableau intermédiaire de créé. Cet aspect est notamment important pour certaines classes filles, comme les <a href="/fr/docs/JavaScript/Tableaux_typ%C3%A9s">tableaux typés</a> (en effet, un tableau intermédiaire aurait eu ses valeurs tronquées pour qu'elles soient du type approprié).</p>
-
-<p>La propriété <code>length</code> de la méthode <code>from()</code> est 1.</p>
-
-<p>Avec ES6, la syntaxe de classe permet d'avoir des sous-classes pour les objets natifs comme pour les objets définis par l'utilisateur. Ainsi, les méthodes statiques de classe comme <code>Array.from()</code> sont héritées par les sous-classes d'<code>Array</code> et créent de nouvelles instances de la sous-classe d'<code>Array</code>.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<pre class="brush: js">// créer une instance d'Array à partir de l'objet arguments qui est semblable à un tableau
-function f() {
-  return Array.from(arguments);
-}
-
-f(1, 2, 3);
-// [1, 2, 3]
-
-
-// Ça fonctionne avec tous les objets itérables...
-// Set
-const s = new Set(["toto", "truc", "truc", "bidule"]);
-Array.from(s);
-// ["toto", "truc", "bidule"]
-
-
-// Map
-const m = new Map([[1, 2], [2, 4], [4, 8]]);
-Array.from(m);
-// [[1, 2], [2, 4], [4, 8]]
-
-const mapper = new Map([["1", "a"], ["2", "b"]]);
-Array.from(mapper.values());
-// ["a", "b"]
-
-Array.from(mapper.keys());
-// ["1", "2"]
-
-// String
-Array.from("toto");
-// ["t", "o", "t", "o"]
-
-
-// En utilisant une fonction fléchée pour remplacer map
-// et manipuler des éléments
-Array.from([1, 2, 3], x =&gt; x + x);
-// [2, 4, 6]
-
-
-// Pour générer une séquence de nombres
-Array.from({length: 5}, (v, k) =&gt; k);
-// [0, 1, 2, 3, 4]
-
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-array.from', 'Array.from')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-array.from', 'Array.from')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Array.from")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Array")}}</li>
- <li>{{jsxref("Array.prototype.map()")}}</li>
- <li>{{jsxref("TypedArray.from()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/array/from/index.md b/files/fr/web/javascript/reference/global_objects/array/from/index.md
new file mode 100644
index 0000000000..cf80abb37e
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/array/from/index.md
@@ -0,0 +1,112 @@
+---
+title: Array.from()
+slug: Web/JavaScript/Reference/Global_Objects/Array/from
+tags:
+  - Array
+  - ECMAScript 2015
+  - JavaScript
+  - Méthode
+  - Reference
+  - polyfill
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/from
+original_slug: Web/JavaScript/Reference/Objets_globaux/Array/from
+---
+{{JSRef}}
+
+La méthode **`Array.from()`** permet de créer une nouvelle instance d'`Array` (une copie superficielle) à partir d'un objet itérable ou semblable à un tableau.
+
+{{EmbedInteractiveExample("pages/js/array-from.html")}}
+
+## Syntaxe
+
+    Array.from(arrayLike [, fonctionMap[, thisArg]])
+
+### Paramètres
+
+- `arrayLike`
+  - : Un objet semblable à un tableau ou bien un objet itérable dont on souhaite créer un tableau, instance d'`Array`.
+- `fonctionMap` {{optional_inline}}
+  - : Argument optionnel, une fonction à appliquer à chacun des éléments du tableau.
+- `thisArg` {{optional_inline}}
+  - : Argument optionnel. La valeur à utiliser pour `this` lors de l'exécution de la fonction `fonctionMap`.
+
+### Valeur de retour
+
+Une nouvelle instance de {{jsxref("Array")}}.
+
+## Description
+
+`Array.from()` permet de créer des instances d'`Array` à partir :
+
+- d'objets semblables à des tableaux (qui disposent d'une propriété `length` et d'éléments indexés) ou
+- [d'objets itérables](/fr/docs/Web/JavaScript/Guide/iterable) (des objets dont on peut avoir les éléments comme {{jsxref("Map")}} et {{jsxref("Set")}}).
+
+`Array.from()` possède un paramètre optionnel `fonctionMap`, qui permet d'exécuter une fonction {{jsxref("Array.prototype.map", "map")}} sur chacun des éléments du tableau (ou de l'instance de la classe fille) qui est créé. Autrement dit` Array.from(obj, mapFn, thisArg)` correspond exactement à `Array.from(obj).map(mapFn, thisArg)`, sauf qu'il n'y a pas de tableau intermédiaire de créé. Cet aspect est notamment important pour certaines classes filles, comme les [tableaux typés](/fr/docs/JavaScript/Tableaux_typ%C3%A9s) (en effet, un tableau intermédiaire aurait eu ses valeurs tronquées pour qu'elles soient du type approprié).
+
+La propriété `length` de la méthode `from()` est 1.
+
+Avec ES6, la syntaxe de classe permet d'avoir des sous-classes pour les objets natifs comme pour les objets définis par l'utilisateur. Ainsi, les méthodes statiques de classe comme `Array.from()` sont héritées par les sous-classes d'`Array` et créent de nouvelles instances de la sous-classe d'`Array`.
+
+## Exemples
+
+```js
+// créer une instance d'Array à partir de l'objet arguments qui est semblable à un tableau
+function f() {
+  return Array.from(arguments);
+}
+
+f(1, 2, 3);
+// [1, 2, 3]
+
+
+// Ça fonctionne avec tous les objets itérables...
+// Set
+const s = new Set(["toto", "truc", "truc", "bidule"]);
+Array.from(s);
+// ["toto", "truc", "bidule"]
+
+
+// Map
+const m = new Map([[1, 2], [2, 4], [4, 8]]);
+Array.from(m);
+// [[1, 2], [2, 4], [4, 8]]
+
+const mapper = new Map([["1", "a"], ["2", "b"]]);
+Array.from(mapper.values());
+// ["a", "b"]
+
+Array.from(mapper.keys());
+// ["1", "2"]
+
+// String
+Array.from("toto");
+// ["t", "o", "t", "o"]
+
+
+// En utilisant une fonction fléchée pour remplacer map
+// et manipuler des éléments
+Array.from([1, 2, 3], x => x + x);
+// [2, 4, 6]
+
+
+// Pour générer une séquence de nombres
+Array.from({length: 5}, (v, k) => k);
+// [0, 1, 2, 3, 4]
+```
+
+## Spécifications
+
+| Spécification                                                                | État                         | Commentaires         |
+| ---------------------------------------------------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName('ES2015', '#sec-array.from', 'Array.from')}}     | {{Spec2('ES2015')}}     | Définition initiale. |
+| {{SpecName('ESDraft', '#sec-array.from', 'Array.from')}} | {{Spec2('ESDraft')}} |                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Array.from")}}
+
+## Voir aussi
+
+- {{jsxref("Array")}}
+- {{jsxref("Array.prototype.map()")}}
+- {{jsxref("TypedArray.from()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/array/includes/index.html b/files/fr/web/javascript/reference/global_objects/array/includes/index.html
deleted file mode 100644
index e63134919f..0000000000
--- a/files/fr/web/javascript/reference/global_objects/array/includes/index.html
+++ /dev/null
@@ -1,134 +0,0 @@
----
-title: Array.prototype.includes()
-slug: Web/JavaScript/Reference/Global_Objects/Array/includes
-tags:
-  - Array
-  - JavaScript
-  - Méthode
-  - Prototype
-  - Reference
-  - polyfill
-translation_of: Web/JavaScript/Reference/Global_Objects/Array/includes
-original_slug: Web/JavaScript/Reference/Objets_globaux/Array/includes
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <code><strong>includes()</strong></code> permet de déterminer si un tableau contient une valeur et renvoie <code>true</code> si c'est le cas, <code>false</code> sinon.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/array-includes.html")}}</div>
-
-
-
-<div class="note">
-<p><strong>Note :</strong> Cette méthode utilise l'algorithme de comparaison <em><a href="/fr/docs/Web/JavaScript/Les_différents_tests_d_égalité#Un_modèle_pour_mieux_comprendre">SameValueZero</a></em> qui fonctionne comme l'égalité stricte, à la différence que <code>NaN</code> est ici égal à lui même.</p>
-</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">array.includes(élémentRecherché)
-array.includes(élémentRecherché, indiceDépart)
-</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>élémentRecherché</code></dt>
- <dd>La valeur qu'on souhaite trouver dans le tableau (lorsqu'on manipule des caractères et des chaînes, la comparaison est sensible à la casse).</dd>
- <dt><code>indiceDépart</code> {{optional_inline}}</dt>
- <dd>La position du tableau à partir de laquelle commencer à chercher <code>élémentRecherché</code>. Si on utilise une valeur négative, la recherche commencera à partir de la fin du tableau (autrement dit à l'indice <code>array.length - indiceDépart</code>). La valeur par défaut est 0.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Un {{jsxref("Boolean","booléen","",1)}} qui vaut <code>true</code> si <code>élémentRecherché</code> est trouvé dans le tableau (à partir de l'<code>indiceDépart</code> si celui-ci est indiqué). Les valeurs -0, +0 et 0 sont considérées comme équivalentes mais <code>false</code> n'est pas considéré comme équivalent à 0.</p>
-
-<div class="note">
-<p><strong>Note :</strong> Pour être tout à fait précis, <code>includes()</code> utilise l'algorithme <em><a href="/fr/docs/Web/JavaScript/Les_différents_tests_d_égalité#Un_modèle_pour_mieux_comprendre">SameValueZero</a></em> afin de déterminer si un élément donné est trouvé.</p>
-</div>
-
-<h2 id="Exemples">Exemples</h2>
-
-<pre class="brush: js">[1, 2, 3].includes(2);     // true
-[1, 2, 3].includes(4);     // false
-[1, 2, 3].includes(3, 3);  // false
-[1, 2, 3].includes(3, -1); // true
-[1, 2, NaN].includes(NaN); // true
-
-['a', 'b', 'c'].includes('c', 5);    // false
-['a', 'b', 'c'].includes('c', -100); // true
-</pre>
-
-<h3 id="indiceDépart_supérieur_ou_égal_à_la_longueur_du_tableau"><code>indiceDépart</code> supérieur ou égal à la longueur du tableau</h3>
-
-<p>SI <code>indiceDépart</code> est supérieur ou égal à la longueur du tableau, la méthode retourne <code>false</code>. Le tableau n'est pas parcouru.</p>
-
-<pre class="brush: js">var arr = ['a', 'b', 'c'];
-
-arr.includes('c', 3);   // false
-arr.includes('c', 100); // false
-</pre>
-
-<h3 id="indiceDépart_strictement_négatif"><code>indiceDépart</code> strictement négatif</h3>
-
-<p>Si <code>indiceDépart</code> est strictement négatif, l'indice de départ effectif est la somme entre la taille du tableau et <code>indiceDépart</code>. Si cette somme est toujours négative, le tableau est intégralement parcouru.</p>
-
-<pre class="brush: js">// Le tableau a une taille de 3
-// indiceDépart vaut -2
-// L'indice de départ effectif vaut is 3 + (-2) = 1
-
-var arr = ['a', 'b', 'c'];
-
-arr.includes('a', -2); // false
-arr.includes('b', -2); // true
-arr.includes('c', -100); // true
-</pre>
-
-<h3 id="Utilisation_d'includes()_comme_méthode_générique">Utilisation d'<code>includes()</code> comme méthode générique</h3>
-
-<p><code>includes()</code> est une méhtode générique : l'objet sur lequel elle est appelée ne doit pas nécessairement être un tableau. On peut l'utiliser sur des objets semblables à des tableaux (ex. <code><a href="/fr/docs/Web/JavaScript/Reference/Fonctions/arguments">arguments</a></code> ou des chaînes de caractères) :</p>
-
-<pre class="brush: js">function argumentsContientA(){
-  return [].includes.call(arguments, 'a');
-}
-
-console.log(argumentsContientA('a','b','c')); // true
-console.log(argumentsContientA('d','e','f')); // false
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('ES7', '#sec-array.prototype.includes', 'Array.prototype.includes')}}</td>
-   <td>{{Spec2('ES7')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-array.prototype.includes', 'Array.prototype.includes')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Array.includes")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("TypedArray.prototype.includes()")}}</li>
- <li>{{jsxref("String.prototype.includes()")}}</li>
- <li>{{jsxref("Array.prototype.indexOf()")}}</li>
- <li>{{jsxref("Array.prototype.find()")}}</li>
- <li>{{jsxref("Array.prototype.findIndex()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/array/includes/index.md b/files/fr/web/javascript/reference/global_objects/array/includes/index.md
new file mode 100644
index 0000000000..16ebf55be4
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/array/includes/index.md
@@ -0,0 +1,110 @@
+---
+title: Array.prototype.includes()
+slug: Web/JavaScript/Reference/Global_Objects/Array/includes
+tags:
+  - Array
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - polyfill
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/includes
+original_slug: Web/JavaScript/Reference/Objets_globaux/Array/includes
+---
+{{JSRef}}
+
+La méthode **`includes()`** permet de déterminer si un tableau contient une valeur et renvoie `true` si c'est le cas, `false` sinon.
+
+{{EmbedInteractiveExample("pages/js/array-includes.html")}}
+
+> **Note :** Cette méthode utilise l'algorithme de comparaison _[SameValueZero](/fr/docs/Web/JavaScript/Les_différents_tests_d_égalité#Un_modèle_pour_mieux_comprendre)_ qui fonctionne comme l'égalité stricte, à la différence que `NaN` est ici égal à lui même.
+
+## Syntaxe
+
+    array.includes(élémentRecherché)
+    array.includes(élémentRecherché, indiceDépart)
+
+### Paramètres
+
+- `élémentRecherché`
+  - : La valeur qu'on souhaite trouver dans le tableau (lorsqu'on manipule des caractères et des chaînes, la comparaison est sensible à la casse).
+- `indiceDépart` {{optional_inline}}
+  - : La position du tableau à partir de laquelle commencer à chercher `élémentRecherché`. Si on utilise une valeur négative, la recherche commencera à partir de la fin du tableau (autrement dit à l'indice `array.length - indiceDépart`). La valeur par défaut est 0.
+
+### Valeur de retour
+
+Un {{jsxref("Boolean","booléen","",1)}} qui vaut `true` si `élémentRecherché` est trouvé dans le tableau (à partir de l'`indiceDépart` si celui-ci est indiqué). Les valeurs -0, +0 et 0 sont considérées comme équivalentes mais `false` n'est pas considéré comme équivalent à 0.
+
+> **Note :** Pour être tout à fait précis, `includes()` utilise l'algorithme _[SameValueZero](/fr/docs/Web/JavaScript/Les_différents_tests_d_égalité#Un_modèle_pour_mieux_comprendre)_ afin de déterminer si un élément donné est trouvé.
+
+## Exemples
+
+```js
+[1, 2, 3].includes(2);     // true
+[1, 2, 3].includes(4);     // false
+[1, 2, 3].includes(3, 3);  // false
+[1, 2, 3].includes(3, -1); // true
+[1, 2, NaN].includes(NaN); // true
+
+['a', 'b', 'c'].includes('c', 5);    // false
+['a', 'b', 'c'].includes('c', -100); // true
+```
+
+### `indiceDépart` supérieur ou égal à la longueur du tableau
+
+SI `indiceDépart` est supérieur ou égal à la longueur du tableau, la méthode retourne `false`. Le tableau n'est pas parcouru.
+
+```js
+var arr = ['a', 'b', 'c'];
+
+arr.includes('c', 3);   // false
+arr.includes('c', 100); // false
+```
+
+### `indiceDépart` strictement négatif
+
+Si `indiceDépart` est strictement négatif, l'indice de départ effectif est la somme entre la taille du tableau et `indiceDépart`. Si cette somme est toujours négative, le tableau est intégralement parcouru.
+
+```js
+// Le tableau a une taille de 3
+// indiceDépart vaut -2
+// L'indice de départ effectif vaut is 3 + (-2) = 1
+
+var arr = ['a', 'b', 'c'];
+
+arr.includes('a', -2); // false
+arr.includes('b', -2); // true
+arr.includes('c', -100); // true
+```
+
+### Utilisation d'`includes()` comme méthode générique
+
+`includes()` est une méhtode générique : l'objet sur lequel elle est appelée ne doit pas nécessairement être un tableau. On peut l'utiliser sur des objets semblables à des tableaux (ex. [`arguments`](/fr/docs/Web/JavaScript/Reference/Fonctions/arguments) ou des chaînes de caractères) :
+
+```js
+function argumentsContientA(){
+  return [].includes.call(arguments, 'a');
+}
+
+console.log(argumentsContientA('a','b','c')); // true
+console.log(argumentsContientA('d','e','f')); // false
+```
+
+## Spécifications
+
+| Spécification                                                                                                    | État                         | Commentaires         |
+| ---------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName('ES7', '#sec-array.prototype.includes', 'Array.prototype.includes')}}     | {{Spec2('ES7')}}         | Définition initiale. |
+| {{SpecName('ESDraft', '#sec-array.prototype.includes', 'Array.prototype.includes')}} | {{Spec2('ESDraft')}} |                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Array.includes")}}
+
+## Voir aussi
+
+- {{jsxref("TypedArray.prototype.includes()")}}
+- {{jsxref("String.prototype.includes()")}}
+- {{jsxref("Array.prototype.indexOf()")}}
+- {{jsxref("Array.prototype.find()")}}
+- {{jsxref("Array.prototype.findIndex()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/array/index.html b/files/fr/web/javascript/reference/global_objects/array/index.html
deleted file mode 100644
index 3604ce3910..0000000000
--- a/files/fr/web/javascript/reference/global_objects/array/index.html
+++ /dev/null
@@ -1,456 +0,0 @@
----
-title: Array
-slug: Web/JavaScript/Reference/Global_Objects/Array
-tags:
-  - Array
-  - JavaScript
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Array
-original_slug: Web/JavaScript/Reference/Objets_globaux/Array
----
-<div>{{JSRef}}</div>
-
-<p>L'objet global <strong><code>Array</code></strong> est utilisé pour créer des tableaux. Les tableaux sont des objets de haut-niveau (en termes de complexité homme-machine) semblables à des listes.</p>
-
-<p><strong>Créer un tableau</strong></p>
-
-<pre class="brush: js">var fruits = ['Apple', 'Banana'];
-
-console.log(fruits.length);
-// 2
-</pre>
-
-<p><strong>Accéder (via son index) à un élément du tableau</strong></p>
-
-<pre class="brush: js">var first = fruits[0];
-// Apple
-
-var last = fruits[fruits.length - 1];
-// Banana
-</pre>
-
-<p><strong>Boucler sur un tableau</strong></p>
-
-<pre class="brush: js">fruits.forEach(function(item, index, array) {
-  console.log(item, index);
-});
-// Apple 0
-// Banana 1
-</pre>
-
-<p><strong>Ajouter à la fin du tableau</strong></p>
-
-<pre class="brush: js">var newLength = fruits.push('Orange');
-// ["Apple", "Banana", "Orange"]
-</pre>
-
-<p><strong>Supprimer le dernier élément du tableau</strong></p>
-
-<pre class="brush: js">var last = fruits.pop(); // supprime Orange (à la fin)
-// ["Apple", "Banana"];
-</pre>
-
-<p><strong>Supprimer le premier élément du tableau</strong></p>
-
-<pre class="brush: js">var first = fruits.shift(); // supprime Apple (au début)
-// ["Banana"];
-</pre>
-
-<p><strong>Ajouter au début du tableau</strong></p>
-
-<pre class="brush: js">var newLength = fruits.unshift('Strawberry') // ajoute au début
-// ["Strawberry", "Banana"];
-</pre>
-
-<p><strong>Trouver l'index d'un élément dans le tableau</strong></p>
-
-<pre class="brush: js">fruits.push('Mango');
-// ["Strawberry", "Banana", "Mango"]
-
-var pos = fruits.indexOf('Banana');
-// 1
-</pre>
-
-<p><strong>Supprimer un élément par son index</strong></p>
-
-<pre class="brush: js">var removedItem = fruits.splice(pos, 1); // supprime 1 élément à la position pos
-
-// ["Strawberry", "Mango"]
-</pre>
-
-<p><strong>Supprimer des éléments à partir d'un index</strong></p>
-
-<pre class="brush: js">var vegetables = ['Cabbage', 'Turnip', 'Radish', 'Carrot'];
-console.log(vegetables);
-// ["Cabbage", "Turnip", "Radish", "Carrot"]
-
-var pos = 1, n = 2;
-
-var removedItems = vegetables.splice(pos, n);
-// n définit le nombre d'éléments à supprimer,
-// à partir de la position pos
-
-console.log(vegetables);
-// ["Cabbage", "Carrot"] (le tableau d'origine est changé)
-
-console.log(removedItems);
-// ["Turnip", "Radish"] (splice retourne la liste des éléments supprimés)
-</pre>
-
-<p><strong>Copier un tableau</strong></p>
-
-<pre class="brush: js">var shallowCopy = fruits.slice(); // crée un nouveau tableau qui contient les éléments de fruits
-// ["Strawberry", "Mango"]
-</pre>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox notranslate">[<var>element0</var>, <var>element1</var>, ..., <var>elementN</var>]
-new Array(<var>element0</var>, <var>element1</var>[, ...[, <var>elementN</var>]])
-new Array(<var>arrayLength</var>)</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-<dl>
- <dt><code><var>element0</var>, <var>element1</var>, ..., <var>elementN</var> </code></dt>
- <dd>Un tableau est initialisé avec les éléments donnés, sauf dans le cas où un seul argument est passé au constructeur <code>Array</code> et que cet argument est un nombre. (Voir ci-après.) Notez que ce cas spécial s'applique aux tableaux créés avec le constructeur <code>Array</code>, et non aux tableaux créés avec la syntaxe crochets.</dd>
- <dt><code><var>arrayLength</var></code></dt>
- <dd>Si le seul argument passé au constructeur <code>Array</code> est un entier entre 0 et 2^32-1 (inclus), un nouveau tableau sera créé avec ce nombre d'éléments (note : le tableau sera créé avec <code>arrayLength</code> emplacements vides, et non avec de véritables valeurs <code>undefined</code>). Si l'argument est un nombre en dehors de la plage autorisée, une exception {{jsxref("RangeError")}} est levée.</dd>
-</dl>
-
-<h2 id="Description">Description</h2>
-
-<p>Les tableaux sont des objets qui servent de liste et possèdent plusieurs méthodes incorporées pour exécuter des opérations de parcours et de modification.</p>
-
-<p>Ni la taille d'un tableau ni le types de ses éléments n'est fixé. Puisque la dimension d'un tableau peut augmenter ou diminuer à tout moment, et que les éléments du tableau peuvent être stockés à des emplacements non contigus, les tableaux ne sont pas garantis d'être compacts. En général, ce sont des caractéristiques pratiques, mais si ces fonctionnalités ne sont pas souhaitables pour votre cas d'utilisation, vous pouvez envisager d'utiliser des tableaux typés.</p>
-
-<p>Les tableaux ne peuvent pas utiliser de chaîne de caractères comme indice (comme dans un <a href="https://fr.wikipedia.org/wiki/Tableau_associatif">tableau associatif</a>) mais des entiers. Utiliser ou accéder à des index non entiers, en utilisant la <a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Guide/Utiliser_les_objets#Les_objets_et_les_propri%C3%A9t%C3%A9s">notation avec crochets</a> (ou <a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_de_membres">avec point</a>) ne va pas définir ou récupérer un élément sur le tableau lui-même, mais une variable associée à la  <a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Structures_de_donn%C3%A9es#Propri%C3%A9t%C3%A9s">collection de propriétés d'objet</a> de ce tableau.  Les propriétés du tableau et la liste de ses éléments sont séparées, et les <a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Guide/Collections_index%C3%A9es#M%C3%A9thodes_des_tableaux">opérations de parcours et de modification</a> ne s'appliquent pas à ces propriétés.</p>
-
-<h3 id="Accéder_aux_éléments_dun_tableau">Accéder aux éléments d'un tableau</h3>
-
-<p>Les tableaux sont indexés à partir de zéro: le premier élément d'un tableau a pour indice <code>0</code>, et la position du dernier élément est donnée par {{jsxref("Array.length", "length")}} moins 1. Si on utilise un indice en dehors de cet intervalle, le résultat sera {{jsxref("undefined")}} (sous réserve qu'aucune propriété n'ait été ajoutée au préalable avec cet indice).</p>
-
-<pre class="brush: js notranslate">var arr = ["le premier élément", "le deuxième élément", "le dernier élément"];
-console.log(arr[0]);             // affiche "le premier élément"
-console.log(arr[1]);             // affiche "le deuxième élément"
-console.log(arr[arr.length - 1]);// affiche "le dernier élément"</pre>
-
-<p>Les éléments d'un tableau sont des propriétés d'objets de la même manière que <code>toString</code> est une propriété. Cependant, essayer d'accéder à un élément du tableau comme suit renverra une erreur car le nom de la propriété utilisé est invalide :</p>
-
-<pre class="brush: js notranslate">console.log(arr.0); // erreur de syntaxe</pre>
-
-<p>Ce comportement est tout à fait normal. En effet, il n'est pas possible d'accéder aux propriétés dont le nom commence par un chiffre avec cette notation (le point). Il est nécessaire d'utiliser la syntaxe avec les crochets pour accéder à ces propriétés. Ainsi, si pour un objet quelconque, on avait une propriété nommée '<code>3d</code>', on ne pourra y faire référence qu'en utilisant les crochets. Exemple :</p>
-
-<pre class="brush: js notranslate">var années = [1950, 1960, 1970, 1980, 1990, 2000, 2010];
-
-console.log(années.0);  // erreur de syntaxe
-console.log(années[0]); // fonctionne correctement</pre>
-
-<pre class="brush: js notranslate">renderer.3d.setTexture(model, "personnage.png");   // erreur de syntaxe
-renderer["3d"].setTexture(model, "personnage.png");// fonctionne correctement </pre>
-
-<p>Dans cet exemple, on utilise des doubles quotes autour de <code>3d</code>. On peut aussi utiliser les doubles quotes pour accéder aux éléments d'un tableau (ex. : <code>années["2"]</code> au lieu de <code>années[2]</code>), mais ce n'est pas obligatoire. Dans l'instruction <code>années[2]</code>, le nombre sera converti en une chaîne de caractères par le moteur JavaScript. Pour cette raison, si on utilise les noms de propriété "2" et "02", on fera référence à deux propriétés différentes, et le fragment de code suivant renvoie donc <code>true</code>:</p>
-
-<pre class="brush: js notranslate">console.log(années["2"] != années["02"]); </pre>
-
-<p>De manière similaire, les propriétés nommées avec des mots-clés réservés ne peuvent être consultées qu'en utilisant la syntaxe avec crochets :</p>
-
-<pre class="brush: js notranslate">var promise = {
-  'var' : 'text',
-  'array': [1, 2, 3, 4]
-};
-
-console.log(promise['var']);</pre>
-
-<div class="note">
-<p><strong>Note :</strong> Depuis Firefox 40.0a2, il est possible d'utiliser la notation avec le point pour accéder aux propriétés dont les noms ne sont pas des identifiants valides.</p>
-</div>
-
-<h3 id="Relation_entre_length_et_les_propriétés_numériques">Relation entre <code>length</code> et les propriétés numériques</h3>
-
-<p>La propriété {{jsxref("Array.length", "length")}} d'un tableau est liée aux propriétés numériques du tableau. Plusieurs méthodes natives utilisent cette propriété : {{jsxref("Array.join", "join()")}}, {{jsxref("Array.slice", "slice()")}}, {{jsxref("Array.indexOf", "indexOf()")}}, etc. D'autres méthodes comme {{jsxref("Array.push", "push()")}} et {{jsxref("Array.splice", "splice()")}} modifient le tableau et la propriété {{jsxref("Array.length", "length")}}.</p>
-
-<pre class="brush: js notranslate">var fruits = [];
-fruits.push("banane", "pomme", "pêche");
-
-console.log(fruits.length); // 3</pre>
-
-<p>Lorsqu'on définit une nouvelle propriété numérique pour un tableau, que l'index utilisé est valide et que celui-ci est dehors des limites actuelles du tableau, le moteur JavaScript mettra à jour la propriété {{jsxref("Array.length", "length")}} :</p>
-
-<pre class="brush: js notranslate">fruits[5] = "mangue";
-console.log(fruits[5]);  // "mangue"
-console.log(Object.keys(fruits)); // ['0', '1', '2', '5']
-console.log(fruits.length); // 6 </pre>
-
-<p>On peut également modifier la propriété directement (cela n'ajoutera pas de nouveaux éléments) :</p>
-
-<pre class="brush: js notranslate">fruits.length = 10;
-console.log(Object.keys(fruits)); // ['0', '1', '2', '5']
-console.log(fruits.length);  // 10</pre>
-
-<p>En revanche, si on diminue la valeur de {{jsxref("Array.length", "length")}}, cela supprimera des éléments :</p>
-
-<pre class="brush: js notranslate">fruits.length = 2;
-console.log(Object.keys(fruits)); // ['0', '1']
-console.log(fruits.length); // 2</pre>
-
-<p>Pour plus d'informations sur le comportement de cette propriété, voir la page {{jsxref("Array.length")}}.</p>
-
-<h3 id="Création_dun_tableau_utilisant_le_résultat_dune_correspondance">Création d'un tableau utilisant le résultat d'une correspondance</h3>
-
-<p>Le résultat d'une correspondance entre une expression rationnelle et une chaîne peut créer un tableau. Ce tableau possède des propriétés et des éléments qui fournissent des informations sur cette correspondance. Il est possible d'obtenir un tableau grâce aux méthodes {{jsxref("RegExp.exec")}}, {{jsxref("String.match")}}, and {{jsxref("String.replace")}}. Pour mieux comprendre le fonctionnement de ces propriétés et de ces éléments, on pourra utiliser l'exemple et le tableau qui suivent :</p>
-
-<pre class="brush: js notranslate">// Matche un "d" suivit par un ou plusieurs "b" et suivit d'un "d"
-// Capture les "b" et le "d" qui suit
-// Ignore la casse
-
-var maRegexp = /d(b+)(d)/i;
-var monTableau = maRegexp.exec("cdbBdbsbz");
-
-console.log(monTableau);
-// [ 0:"dbBd", 1:"bB", 2:"d", index:1, input:"cdbBdbsbz", length:3 ]</pre>
-
-<p>Les propriétés et les éléments retournés depuis cette correspondance sont les suivants :</p>
-
-<table class="fullwidth-table">
- <tbody>
-  <tr>
-   <td class="header">Propriété/Élément</td>
-   <td class="header">Description</td>
-   <td class="header">Exemple</td>
-  </tr>
-  <tr>
-   <td><code>input</code></td>
-   <td>Une propriété en lecture seule qui reflète la chaîne originale sur laquelle l'expression rationnelle a été appliquée.</td>
-   <td>cdbBdbsbz</td>
-  </tr>
-  <tr>
-   <td><code>index</code></td>
-   <td>Une propriété en lecture seule qui est l'indice de la correspondance dans la chaîne (les indices commencent à 0)</td>
-   <td>1</td>
-  </tr>
-  <tr>
-   <td><code>[0]</code></td>
-   <td>Une propriété en lecture seule qui spécifie les derniers caractères correspondants.</td>
-   <td>dbBd</td>
-  </tr>
-  <tr>
-   <td><code>[1], ...[n]</code></td>
-   <td>Des éléments en lecture seule qui contiennent les groupes capturés, s'il y en a dans l'expression régulière. Le nombre de groupes capturés possibles est illimité.</td>
-   <td>[1]: bB<br>
-    [2]: d</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Propriétés">Propriétés</h2>
-
-<dl>
- <dt>{{jsxref("Array.prototype.length")}}</dt>
- <dd>La propriété de longueur pour le constructeur <code>Array</code>, elle vaut 1.</dd>
- <dt>{{jsxref("Array.@@species", "get Array[@@species]")}}</dt>
- <dd>La fonction de construction utilisée pour créer les objets dérivés.</dd>
- <dt>{{jsxref("Array.prototype")}}</dt>
- <dd>Cette propriété permet d'ajouter des propriétés à tous les tableaux.</dd>
-</dl>
-
-<h2 id="Méthodes">Méthodes</h2>
-
-<dl>
- <dt>{{jsxref("Array.from()")}}</dt>
- <dd>Cette méthode permet de créer une nouvelle instance d'<code>Array</code> à partir d'un objet semblable à un tableau ou d'un itérable.</dd>
- <dt>{{jsxref("Array.isArray()")}}</dt>
- <dd>Cette méthode renvoie <code>true</code> si la variable est un tableau, <code>false</code> sinon.</dd>
- <dt>{{jsxref("Array.of()")}}</dt>
- <dd>Cette méthode permet de créer une nouvelle instance d'<code>Array</code> à partir d'un nombre variable d'arguments (peu importe la quantité ou le type des arguments utilisés).</dd>
-</dl>
-
-<h2 id="Instances_dArray">Instances d'<code>Array</code></h2>
-
-<p>Toutes les instances d'<code>Array</code> héritent de {{jsxref("Array.prototype")}}. Le prototype du constructeur <code>Array</code> peut être modifié afin d'affecter l'ensemble des instances grâce à l'héritage.</p>
-
-<h3 id="Les_propriétés">Les propriétés</h3>
-
-<div>{{page('fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/prototype', 'Propriétés')}}</div>
-
-<h3 id="Les_méthodes">Les méthodes</h3>
-
-<h4 id="Les_mutateurs">Les mutateurs</h4>
-
-<div>{{page('fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/prototype', 'Mutateurs')}}</div>
-
-<h4 id="Les_accesseurs">Les accesseurs</h4>
-
-<div>{{page('fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/prototype', 'Accesseurs')}}</div>
-
-<h4 id="Les_méthodes_ditération">Les méthodes d'itération</h4>
-
-<div>{{page('/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/prototype', 'Méthodes_itératives')}}</div>
-
-<h2 id="Les_méthodes_génériques_de_manipulation_de_tableaux">Les méthodes génériques de manipulation de tableaux</h2>
-
-<div class="warning">
-<p><strong>Attention :</strong> Ces méthodes génériques ne sont pas standard. Elles sont dépréciées et seront retirées dans un avenir proche. Celles-ci ne peuvent être utilisées sur tous les navigateurs. Toutefois, il existe <a href="https://github.com/plusdude/array-generics">un <em>shim</em> disponible sur GitHub</a>.</p>
-</div>
-
-<p>Parfois, on peut vouloir appliquer des méthodes pour les tableaux sur des chaînes ou d'autres objets semblables aux tableaux (ex. : l'objet {{jsxref("Fonctions/arguments", "arguments", "", 1)}}). Une chaîne sera donc traitée comme un tableau de caractères. Ainsi, si on souhaite vérifier que chaque caractère d'une chaîne <code><var>str</var></code> est bien une lettre comprise entre 'a' et 'z', on pourra utiliser :</p>
-
-<pre class="brush: js notranslate">function estUneLettre(caractère) {
-  return caractère &gt;= 'a' &amp;&amp; caractère &lt;= 'z';
-}
-
-if (Array.prototype.every.call(str, estUneLettre)) {
-  console.log("La chaîne '" + str + "' ne contient que des lettres entre a et z!");
-}
-</pre>
-
-<p>Cette notation étant plutôt verbeuse, une notation raccourcie a été introduite avec JavaScript 1.6 :</p>
-
-<pre class="brush: js notranslate">if (Array.every(str,estUneLettre)) {
-  console.log("La chaîne '" + str + "' ne contient que des lettres entre a et z !");
-}
-</pre>
-
-<p>Des {{jsxref("Objets_globaux/String", "méthodes génériques", "#Méthodes_génériques_de_String", 1)}} sont également disponibles pour les {{jsxref("Objets_globaux/String", "String")}}.</p>
-
-<p>Cette fonctionnalité ne fait pas partie du standard ECMAScript et n'est pas prise en charge par les navigateurs qui ne sont pas basés sur Gecko. Comme alternative standard, vous pouvez convertir votre objet en véritable tableau grâce à la méthode {{jsxref("Array.from()")}} (attention, cette méthode n'est pas supportée dans les anciens navigateurs) :</p>
-
-<pre class="brush: js notranslate">if (Array.from(str).every(estUneLettre)) {
-  console.log("La chaîne '" + str + "' contient uniquement des lettres !");
-}</pre>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Créer_un_tableau">Créer un tableau</h3>
-
-<p>Dans l'exemple suivant, on crée un tableau <code>tableauMsg</code>, d'une longueur nulle. Ensuite, on lui affecte des valeurs pour <code>tableauMsg[0]</code> et <code>tableauMsg[99]</code>, ce qui aura pour effet de modifier la propriété <code>length</code> (qui vaudra alors 100).</p>
-
-<pre class="brush: js notranslate">var tableauMsg = [];
-tableauMsg[0] = 'Coucou';
-tableauMsg[99] = 'monde';
-
-if (tableauMsg.length === 100) {
-  console.log('La longueur du tableau vaut 100.');
-}
-</pre>
-
-<h3 id="Créer_un_tableau_à_deux_dimensions">Créer un tableau à deux dimensions</h3>
-
-<p>Dans l'exemple qui suit, on crée un plateau d'échec grâce à un tableau en deux dimensions qui contient des caractères. Le premier mouvement est effectué en copiant 'p' de (6,4) vers (4,4). La position anciennement occupée par le pion (6,4) devient vide.</p>
-
-<pre class="brush: js notranslate">var plateau = [
-  ['T','C','F','R','K','F','C','T'],
-  ['P','P','P','P','P','P','P','P'],
-  [' ',' ',' ',' ',' ',' ',' ',' '],
-  [' ',' ',' ',' ',' ',' ',' ',' '],
-  [' ',' ',' ',' ',' ',' ',' ',' '],
-  [' ',' ',' ',' ',' ',' ',' ',' '],
-  ['p','p','p','p','p','p','p','p'],
-  ['t','c','f','k','r','f','c','t'] ];
-
-console.log(plateau.join('\n') + '\n\n');
-
-// On déplace le pion de deux cases en avant 2
-plateau[4][4] = plateau[6][4];
-plateau[6][4] = ' ';
-console.log(plateau.join('\n'));
-</pre>
-
-<p>Voici le résultat affiché :</p>
-
-<pre class="eval notranslate">T,C,F,R,K,F,C,T
-P,P,P,P,P,P,P,P
- , , , , , , ,
- , , , , , , ,
- , , , , , , ,
- , , , , , , ,
-p,p,p,p,p,p,p,p
-t,c,f,k,r,f,c,t
-
-T,C,F,R,K,F,C,T
-P,P,P,P,P,P,P,P
- , , , , , , ,
- , , , , , , ,
- , , , ,p, , ,
- , , , , , , ,
-p,p,p,p, ,p,p,p
-t,c,f,k,r,f,c,t
-</pre>
-
-<h3 id="Utiliser_un_tableau_pour_tabuler_un_ensemble_de_valeurs">Utiliser un tableau pour tabuler un ensemble de valeurs</h3>
-
-<pre class="brush: js">values = [];
-for (var x = 0; x &lt; 10; x++){
- values.push([
-  2 ** x,
-  2 * x ** 2
- ])
-};
-console.table(values)
-</pre>
-
-<p>Résulte en</p>
-
-<pre class="brush: plain">0	1	0
-1	2	2
-2	4	8
-3	8	18
-4	16	32
-5	32	50
-6	64	72
-7	128	98
-8	256	128
-9	512	162
-</pre>
-
-<p>(Le première colonne est l'index)</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES1')}}</td>
-   <td>{{Spec2('ES1')}}</td>
-   <td>Définition initiale</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-15.4', 'Array')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td>Ajout de nouvelles méthodes : {{jsxref("Array.isArray")}}, {{jsxref("Array.prototype.indexOf", "indexOf")}}, {{jsxref("Array.prototype.lastIndexOf", "lastIndexOf")}}, {{jsxref("Array.prototype.every", "every")}}, {{jsxref("Array.prototype.some", "some")}}, {{jsxref("Array.prototype.forEach", "forEach")}}, {{jsxref("Array.prototype.map", "map")}}, {{jsxref("Array.prototype.filter", "filter")}}, {{jsxref("Array.prototype.reduce", "reduce")}}, {{jsxref("Array.prototype.reduceRight", "reduceRight")}}</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-array-objects', 'Array')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td>Ajout de nouvelles méthodes : {{jsxref("Array.from")}}, {{jsxref("Array.of")}}, {{jsxref("Array.prototype.find", "find")}}, {{jsxref("Array.prototype.findIndex", "findIndex")}}, {{jsxref("Array.prototype.fill", "fill")}}, {{jsxref("Array.prototype.copyWithin", "copyWithin")}}</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES7', '#sec-array-objects', 'Array')}}</td>
-   <td>{{Spec2('ES7')}}</td>
-   <td>Ajout de la méthode {{jsxref("Array.prototype.includes()")}}.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-array-objects', 'Array')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Array")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/JavaScript/Guide/Utiliser_les_objets#Indexer_les_propri.C3.A9t.C3.A9s_d'un_objet">Guide JavaScript : indexer les propriétés d'un objet</a></li>
- <li><a href="/fr/docs/Web/JavaScript/Guide/Objets_élémentaires_JavaScript#Les_tableaux_.3A_objet_Array">Guide JavaScript : Les objets natifs : l'objet <code>Array</code></a></li>
- <li><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Compréhensions_de_tableau">Les compréhensions de tableau</a></li>
- <li><a href="https://github.com/plusdude/array-generics">Émulation pour les méthodes génériques et autres fonctionnalités ECMAScript 5 pour les tableaux</a> (en anglais)</li>
- <li><a href="/fr/docs/Web/JavaScript/Tableaux_typés">Les tableaux typés</a></li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/array/index.md b/files/fr/web/javascript/reference/global_objects/array/index.md
new file mode 100644
index 0000000000..ad6c63e298
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/array/index.md
@@ -0,0 +1,470 @@
+---
+title: Array
+slug: Web/JavaScript/Reference/Global_Objects/Array
+tags:
+  - Array
+  - JavaScript
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Array
+original_slug: Web/JavaScript/Reference/Objets_globaux/Array
+---
+{{JSRef}}
+
+L'objet global **`Array`** est utilisé pour créer des tableaux. Les tableaux sont des objets de haut-niveau (en termes de complexité homme-machine) semblables à des listes.
+
+**Créer un tableau**
+
+```js
+var fruits = ['Apple', 'Banana'];
+
+console.log(fruits.length);
+// 2
+```
+
+**Accéder (via son index) à un élément du tableau**
+
+```js
+var first = fruits[0];
+// Apple
+
+var last = fruits[fruits.length - 1];
+// Banana
+```
+
+**Boucler sur un tableau**
+
+```js
+fruits.forEach(function(item, index, array) {
+  console.log(item, index);
+});
+// Apple 0
+// Banana 1
+```
+
+**Ajouter à la fin du tableau**
+
+```js
+var newLength = fruits.push('Orange');
+// ["Apple", "Banana", "Orange"]
+```
+
+**Supprimer le dernier élément du tableau**
+
+```js
+var last = fruits.pop(); // supprime Orange (à la fin)
+// ["Apple", "Banana"];
+```
+
+**Supprimer le premier élément du tableau**
+
+```js
+var first = fruits.shift(); // supprime Apple (au début)
+// ["Banana"];
+```
+
+**Ajouter au début du tableau**
+
+```js
+var newLength = fruits.unshift('Strawberry') // ajoute au début
+// ["Strawberry", "Banana"];
+```
+
+**Trouver l'index d'un élément dans le tableau**
+
+```js
+fruits.push('Mango');
+// ["Strawberry", "Banana", "Mango"]
+
+var pos = fruits.indexOf('Banana');
+// 1
+```
+
+**Supprimer un élément par son index**
+
+```js
+var removedItem = fruits.splice(pos, 1); // supprime 1 élément à la position pos
+
+// ["Strawberry", "Mango"]
+```
+
+**Supprimer des éléments à partir d'un index**
+
+```js
+var vegetables = ['Cabbage', 'Turnip', 'Radish', 'Carrot'];
+console.log(vegetables);
+// ["Cabbage", "Turnip", "Radish", "Carrot"]
+
+var pos = 1, n = 2;
+
+var removedItems = vegetables.splice(pos, n);
+// n définit le nombre d'éléments à supprimer,
+// à partir de la position pos
+
+console.log(vegetables);
+// ["Cabbage", "Carrot"] (le tableau d'origine est changé)
+
+console.log(removedItems);
+// ["Turnip", "Radish"] (splice retourne la liste des éléments supprimés)
+```
+
+**Copier un tableau**
+
+```js
+var shallowCopy = fruits.slice(); // crée un nouveau tableau qui contient les éléments de fruits
+// ["Strawberry", "Mango"]
+```
+
+## Syntaxe
+
+    [element0, element1, ..., elementN]
+    new Array(element0, element1[, ...[, elementN]])
+    new Array(arrayLength)
+
+### Paramètres
+
+- `element0, element1, ..., elementN`
+  - : Un tableau est initialisé avec les éléments donnés, sauf dans le cas où un seul argument est passé au constructeur `Array` et que cet argument est un nombre. (Voir ci-après.) Notez que ce cas spécial s'applique aux tableaux créés avec le constructeur `Array`, et non aux tableaux créés avec la syntaxe crochets.
+- `arrayLength`
+  - : Si le seul argument passé au constructeur `Array` est un entier entre 0 et 2^32-1 (inclus), un nouveau tableau sera créé avec ce nombre d'éléments (note : le tableau sera créé avec `arrayLength` emplacements vides, et non avec de véritables valeurs `undefined`). Si l'argument est un nombre en dehors de la plage autorisée, une exception {{jsxref("RangeError")}} est levée.
+
+## Description
+
+Les tableaux sont des objets qui servent de liste et possèdent plusieurs méthodes incorporées pour exécuter des opérations de parcours et de modification.
+
+Ni la taille d'un tableau ni le types de ses éléments n'est fixé. Puisque la dimension d'un tableau peut augmenter ou diminuer à tout moment, et que les éléments du tableau peuvent être stockés à des emplacements non contigus, les tableaux ne sont pas garantis d'être compacts. En général, ce sont des caractéristiques pratiques, mais si ces fonctionnalités ne sont pas souhaitables pour votre cas d'utilisation, vous pouvez envisager d'utiliser des tableaux typés.
+
+Les tableaux ne peuvent pas utiliser de chaîne de caractères comme indice (comme dans un [tableau associatif](https://fr.wikipedia.org/wiki/Tableau_associatif)) mais des entiers. Utiliser ou accéder à des index non entiers, en utilisant la [notation avec crochets](https://developer.mozilla.org/fr/docs/Web/JavaScript/Guide/Utiliser_les_objets#Les_objets_et_les_propri%C3%A9t%C3%A9s) (ou [avec point](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_de_membres)) ne va pas définir ou récupérer un élément sur le tableau lui-même, mais une variable associée à la  [collection de propriétés d'objet](https://developer.mozilla.org/fr/docs/Web/JavaScript/Structures_de_donn%C3%A9es#Propri%C3%A9t%C3%A9s) de ce tableau.  Les propriétés du tableau et la liste de ses éléments sont séparées, et les [opérations de parcours et de modification](https://developer.mozilla.org/fr/docs/Web/JavaScript/Guide/Collections_index%C3%A9es#M%C3%A9thodes_des_tableaux) ne s'appliquent pas à ces propriétés.
+
+### Accéder aux éléments d'un tableau
+
+Les tableaux sont indexés à partir de zéro: le premier élément d'un tableau a pour indice `0`, et la position du dernier élément est donnée par {{jsxref("Array.length", "length")}} moins 1. Si on utilise un indice en dehors de cet intervalle, le résultat sera {{jsxref("undefined")}} (sous réserve qu'aucune propriété n'ait été ajoutée au préalable avec cet indice).
+
+```js
+var arr = ["le premier élément", "le deuxième élément", "le dernier élément"];
+console.log(arr[0]);             // affiche "le premier élément"
+console.log(arr[1]);             // affiche "le deuxième élément"
+console.log(arr[arr.length - 1]);// affiche "le dernier élément"
+```
+
+Les éléments d'un tableau sont des propriétés d'objets de la même manière que `toString` est une propriété. Cependant, essayer d'accéder à un élément du tableau comme suit renverra une erreur car le nom de la propriété utilisé est invalide :
+
+```js
+console.log(arr.0); // erreur de syntaxe
+```
+
+Ce comportement est tout à fait normal. En effet, il n'est pas possible d'accéder aux propriétés dont le nom commence par un chiffre avec cette notation (le point). Il est nécessaire d'utiliser la syntaxe avec les crochets pour accéder à ces propriétés. Ainsi, si pour un objet quelconque, on avait une propriété nommée '`3d`', on ne pourra y faire référence qu'en utilisant les crochets. Exemple :
+
+```js
+var années = [1950, 1960, 1970, 1980, 1990, 2000, 2010];
+
+console.log(années.0);  // erreur de syntaxe
+console.log(années[0]); // fonctionne correctement
+```
+
+```js
+renderer.3d.setTexture(model, "personnage.png");   // erreur de syntaxe
+renderer["3d"].setTexture(model, "personnage.png");// fonctionne correctement 
+```
+
+Dans cet exemple, on utilise des doubles quotes autour de `3d`. On peut aussi utiliser les doubles quotes pour accéder aux éléments d'un tableau (ex. : `années["2"]` au lieu de `années[2]`), mais ce n'est pas obligatoire. Dans l'instruction `années[2]`, le nombre sera converti en une chaîne de caractères par le moteur JavaScript. Pour cette raison, si on utilise les noms de propriété "2" et "02", on fera référence à deux propriétés différentes, et le fragment de code suivant renvoie donc `true`:
+
+```js
+console.log(années["2"] != années["02"]); 
+```
+
+De manière similaire, les propriétés nommées avec des mots-clés réservés ne peuvent être consultées qu'en utilisant la syntaxe avec crochets :
+
+```js
+var promise = {
+  'var' : 'text',
+  'array': [1, 2, 3, 4]
+};
+
+console.log(promise['var']);
+```
+
+> **Note :** Depuis Firefox 40.0a2, il est possible d'utiliser la notation avec le point pour accéder aux propriétés dont les noms ne sont pas des identifiants valides.
+
+### Relation entre `length` et les propriétés numériques
+
+La propriété {{jsxref("Array.length", "length")}} d'un tableau est liée aux propriétés numériques du tableau. Plusieurs méthodes natives utilisent cette propriété : {{jsxref("Array.join", "join()")}}, {{jsxref("Array.slice", "slice()")}}, {{jsxref("Array.indexOf", "indexOf()")}}, etc. D'autres méthodes comme {{jsxref("Array.push", "push()")}} et {{jsxref("Array.splice", "splice()")}} modifient le tableau et la propriété {{jsxref("Array.length", "length")}}.
+
+```js
+var fruits = [];
+fruits.push("banane", "pomme", "pêche");
+
+console.log(fruits.length); // 3
+```
+
+Lorsqu'on définit une nouvelle propriété numérique pour un tableau, que l'index utilisé est valide et que celui-ci est dehors des limites actuelles du tableau, le moteur JavaScript mettra à jour la propriété {{jsxref("Array.length", "length")}} :
+
+```js
+fruits[5] = "mangue";
+console.log(fruits[5]);  // "mangue"
+console.log(Object.keys(fruits)); // ['0', '1', '2', '5']
+console.log(fruits.length); // 6 
+```
+
+On peut également modifier la propriété directement (cela n'ajoutera pas de nouveaux éléments) :
+
+```js
+fruits.length = 10;
+console.log(Object.keys(fruits)); // ['0', '1', '2', '5']
+console.log(fruits.length);  // 10
+```
+
+En revanche, si on diminue la valeur de {{jsxref("Array.length", "length")}}, cela supprimera des éléments :
+
+```js
+fruits.length = 2;
+console.log(Object.keys(fruits)); // ['0', '1']
+console.log(fruits.length); // 2
+```
+
+Pour plus d'informations sur le comportement de cette propriété, voir la page {{jsxref("Array.length")}}.
+
+### Création d'un tableau utilisant le résultat d'une correspondance
+
+Le résultat d'une correspondance entre une expression rationnelle et une chaîne peut créer un tableau. Ce tableau possède des propriétés et des éléments qui fournissent des informations sur cette correspondance. Il est possible d'obtenir un tableau grâce aux méthodes {{jsxref("RegExp.exec")}}, {{jsxref("String.match")}}, and {{jsxref("String.replace")}}. Pour mieux comprendre le fonctionnement de ces propriétés et de ces éléments, on pourra utiliser l'exemple et le tableau qui suivent :
+
+```js
+// Matche un "d" suivit par un ou plusieurs "b" et suivit d'un "d"
+// Capture les "b" et le "d" qui suit
+// Ignore la casse
+
+var maRegexp = /d(b+)(d)/i;
+var monTableau = maRegexp.exec("cdbBdbsbz");
+
+console.log(monTableau);
+// [ 0:"dbBd", 1:"bB", 2:"d", index:1, input:"cdbBdbsbz", length:3 ]
+```
+
+Les propriétés et les éléments retournés depuis cette correspondance sont les suivants :
+
+<table class="fullwidth-table">
+  <tbody>
+    <tr>
+      <td class="header">Propriété/Élément</td>
+      <td class="header">Description</td>
+      <td class="header">Exemple</td>
+    </tr>
+    <tr>
+      <td><code>input</code></td>
+      <td>
+        Une propriété en lecture seule qui reflète la chaîne originale sur
+        laquelle l'expression rationnelle a été appliquée.
+      </td>
+      <td>cdbBdbsbz</td>
+    </tr>
+    <tr>
+      <td><code>index</code></td>
+      <td>
+        Une propriété en lecture seule qui est l'indice de la correspondance
+        dans la chaîne (les indices commencent à 0)
+      </td>
+      <td>1</td>
+    </tr>
+    <tr>
+      <td><code>[0]</code></td>
+      <td>
+        Une propriété en lecture seule qui spécifie les derniers caractères
+        correspondants.
+      </td>
+      <td>dbBd</td>
+    </tr>
+    <tr>
+      <td><code>[1], ...[n]</code></td>
+      <td>
+        Des éléments en lecture seule qui contiennent les groupes capturés, s'il
+        y en a dans l'expression régulière. Le nombre de groupes capturés
+        possibles est illimité.
+      </td>
+      <td>[1]: bB<br />[2]: d</td>
+    </tr>
+  </tbody>
+</table>
+
+## Propriétés
+
+- {{jsxref("Array.prototype.length")}}
+  - : La propriété de longueur pour le constructeur `Array`, elle vaut 1.
+- {{jsxref("Array.@@species", "get Array[@@species]")}}
+  - : La fonction de construction utilisée pour créer les objets dérivés.
+- {{jsxref("Array.prototype")}}
+  - : Cette propriété permet d'ajouter des propriétés à tous les tableaux.
+
+## Méthodes
+
+- {{jsxref("Array.from()")}}
+  - : Cette méthode permet de créer une nouvelle instance d'`Array` à partir d'un objet semblable à un tableau ou d'un itérable.
+- {{jsxref("Array.isArray()")}}
+  - : Cette méthode renvoie `true` si la variable est un tableau, `false` sinon.
+- {{jsxref("Array.of()")}}
+  - : Cette méthode permet de créer une nouvelle instance d'`Array` à partir d'un nombre variable d'arguments (peu importe la quantité ou le type des arguments utilisés).
+
+## Instances d'`Array`
+
+Toutes les instances d'`Array` héritent de {{jsxref("Array.prototype")}}. Le prototype du constructeur `Array` peut être modifié afin d'affecter l'ensemble des instances grâce à l'héritage.
+
+### Les propriétés
+
+{{page('fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/prototype', 'Propriétés')}}
+
+### Les méthodes
+
+#### Les mutateurs
+
+{{page('fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/prototype', 'Mutateurs')}}
+
+#### Les accesseurs
+
+{{page('fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/prototype', 'Accesseurs')}}
+
+#### Les méthodes d'itération
+
+{{page('/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/prototype', 'Méthodes_itératives')}}
+
+## Les méthodes génériques de manipulation de tableaux
+
+> **Attention :** Ces méthodes génériques ne sont pas standard. Elles sont dépréciées et seront retirées dans un avenir proche. Celles-ci ne peuvent être utilisées sur tous les navigateurs. Toutefois, il existe [un _shim_ disponible sur GitHub](https://github.com/plusdude/array-generics).
+
+Parfois, on peut vouloir appliquer des méthodes pour les tableaux sur des chaînes ou d'autres objets semblables aux tableaux (ex. : l'objet {{jsxref("Fonctions/arguments", "arguments", "", 1)}}). Une chaîne sera donc traitée comme un tableau de caractères. Ainsi, si on souhaite vérifier que chaque caractère d'une chaîne `str` est bien une lettre comprise entre 'a' et 'z', on pourra utiliser :
+
+```js
+function estUneLettre(caractère) {
+  return caractère >= 'a' && caractère <= 'z';
+}
+
+if (Array.prototype.every.call(str, estUneLettre)) {
+  console.log("La chaîne '" + str + "' ne contient que des lettres entre a et z!");
+}
+```
+
+Cette notation étant plutôt verbeuse, une notation raccourcie a été introduite avec JavaScript 1.6 :
+
+```js
+if (Array.every(str,estUneLettre)) {
+  console.log("La chaîne '" + str + "' ne contient que des lettres entre a et z !");
+}
+```
+
+Des {{jsxref("Objets_globaux/String", "méthodes génériques", "#Méthodes_génériques_de_String", 1)}} sont également disponibles pour les {{jsxref("Objets_globaux/String", "String")}}.
+
+Cette fonctionnalité ne fait pas partie du standard ECMAScript et n'est pas prise en charge par les navigateurs qui ne sont pas basés sur Gecko. Comme alternative standard, vous pouvez convertir votre objet en véritable tableau grâce à la méthode {{jsxref("Array.from()")}} (attention, cette méthode n'est pas supportée dans les anciens navigateurs) :
+
+```js
+if (Array.from(str).every(estUneLettre)) {
+  console.log("La chaîne '" + str + "' contient uniquement des lettres !");
+}
+```
+
+## Exemples
+
+### Créer un tableau
+
+Dans l'exemple suivant, on crée un tableau `tableauMsg`, d'une longueur nulle. Ensuite, on lui affecte des valeurs pour `tableauMsg[0]` et `tableauMsg[99]`, ce qui aura pour effet de modifier la propriété `length` (qui vaudra alors 100).
+
+```js
+var tableauMsg = [];
+tableauMsg[0] = 'Coucou';
+tableauMsg[99] = 'monde';
+
+if (tableauMsg.length === 100) {
+  console.log('La longueur du tableau vaut 100.');
+}
+```
+
+### Créer un tableau à deux dimensions
+
+Dans l'exemple qui suit, on crée un plateau d'échec grâce à un tableau en deux dimensions qui contient des caractères. Le premier mouvement est effectué en copiant 'p' de (6,4) vers (4,4). La position anciennement occupée par le pion (6,4) devient vide.
+
+```js
+var plateau = [
+  ['T','C','F','R','K','F','C','T'],
+  ['P','P','P','P','P','P','P','P'],
+  [' ',' ',' ',' ',' ',' ',' ',' '],
+  [' ',' ',' ',' ',' ',' ',' ',' '],
+  [' ',' ',' ',' ',' ',' ',' ',' '],
+  [' ',' ',' ',' ',' ',' ',' ',' '],
+  ['p','p','p','p','p','p','p','p'],
+  ['t','c','f','k','r','f','c','t'] ];
+
+console.log(plateau.join('\n') + '\n\n');
+
+// On déplace le pion de deux cases en avant 2
+plateau[4][4] = plateau[6][4];
+plateau[6][4] = ' ';
+console.log(plateau.join('\n'));
+```
+
+Voici le résultat affiché :
+
+    T,C,F,R,K,F,C,T
+    P,P,P,P,P,P,P,P
+     , , , , , , ,
+     , , , , , , ,
+     , , , , , , ,
+     , , , , , , ,
+    p,p,p,p,p,p,p,p
+    t,c,f,k,r,f,c,t
+
+    T,C,F,R,K,F,C,T
+    P,P,P,P,P,P,P,P
+     , , , , , , ,
+     , , , , , , ,
+     , , , ,p, , ,
+     , , , , , , ,
+    p,p,p,p, ,p,p,p
+    t,c,f,k,r,f,c,t
+
+### Utiliser un tableau pour tabuler un ensemble de valeurs
+
+```js
+values = [];
+for (var x = 0; x < 10; x++){
+ values.push([
+  2 ** x,
+  2 * x ** 2
+ ])
+};
+console.table(values)
+```
+
+Résulte en
+
+```plain
+0	1	0
+1	2	2
+2	4	8
+3	8	18
+4	16	32
+5	32	50
+6	64	72
+7	128	98
+8	256	128
+9	512	162
+```
+
+(Le première colonne est l'index)
+
+## Spécifications
+
+| Spécification                                                            | État                         | Commentaires                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| ------------------------------------------------------------------------ | ---------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| {{SpecName('ES1')}}                                                 | {{Spec2('ES1')}}         | Définition initiale                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
+| {{SpecName('ES5.1', '#sec-15.4', 'Array')}}                 | {{Spec2('ES5.1')}}     | Ajout de nouvelles méthodes : {{jsxref("Array.isArray")}}, {{jsxref("Array.prototype.indexOf", "indexOf")}}, {{jsxref("Array.prototype.lastIndexOf", "lastIndexOf")}}, {{jsxref("Array.prototype.every", "every")}}, {{jsxref("Array.prototype.some", "some")}}, {{jsxref("Array.prototype.forEach", "forEach")}}, {{jsxref("Array.prototype.map", "map")}}, {{jsxref("Array.prototype.filter", "filter")}}, {{jsxref("Array.prototype.reduce", "reduce")}}, {{jsxref("Array.prototype.reduceRight", "reduceRight")}} |
+| {{SpecName('ES6', '#sec-array-objects', 'Array')}}     | {{Spec2('ES6')}}         | Ajout de nouvelles méthodes : {{jsxref("Array.from")}}, {{jsxref("Array.of")}}, {{jsxref("Array.prototype.find", "find")}}, {{jsxref("Array.prototype.findIndex", "findIndex")}}, {{jsxref("Array.prototype.fill", "fill")}}, {{jsxref("Array.prototype.copyWithin", "copyWithin")}}                                                                                                                                                                                                                                                                                                             |
+| {{SpecName('ES7', '#sec-array-objects', 'Array')}}     | {{Spec2('ES7')}}         | Ajout de la méthode {{jsxref("Array.prototype.includes()")}}.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
+| {{SpecName('ESDraft', '#sec-array-objects', 'Array')}} | {{Spec2('ESDraft')}} |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Array")}}
+
+## Voir aussi
+
+- [Guide JavaScript : indexer les propriétés d'un objet](/fr/docs/Web/JavaScript/Guide/Utiliser_les_objets#Indexer_les_propri.C3.A9t.C3.A9s_d'un_objet)
+- [Guide JavaScript : Les objets natifs : l'objet `Array`](/fr/docs/Web/JavaScript/Guide/Objets_élémentaires_JavaScript#Les_tableaux_.3A_objet_Array)
+- [Les compréhensions de tableau](/fr/docs/Web/JavaScript/Reference/Opérateurs/Compréhensions_de_tableau)
+- [Émulation pour les méthodes génériques et autres fonctionnalités ECMAScript 5 pour les tableaux](https://github.com/plusdude/array-generics) (en anglais)
+- [Les tableaux typés](/fr/docs/Web/JavaScript/Tableaux_typés)
diff --git a/files/fr/web/javascript/reference/global_objects/array/indexof/index.html b/files/fr/web/javascript/reference/global_objects/array/indexof/index.html
deleted file mode 100644
index cdd545abc9..0000000000
--- a/files/fr/web/javascript/reference/global_objects/array/indexof/index.html
+++ /dev/null
@@ -1,209 +0,0 @@
----
-title: Array.prototype.indexOf()
-slug: Web/JavaScript/Reference/Global_Objects/Array/indexOf
-tags:
-  - Array
-  - JavaScript
-  - Méthode
-  - Prototype
-  - Reference
-  - polyfill
-translation_of: Web/JavaScript/Reference/Global_Objects/Array/indexOf
-original_slug: Web/JavaScript/Reference/Objets_globaux/Array/indexOf
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <code><strong>indexOf()</strong></code> renvoie le premier indice pour lequel on trouve un élément donné dans un tableau. Si l'élément cherché n'est pas présent dans le tableau, la méthode renverra -1.</p>
-
-<div class="note">
-<p><strong>Note :</strong> pour la méthode associée aux chaînes de caractères, voir la page {{jsxref("String.prototype.indexOf()")}}.</p>
-</div>
-
-<div>{{EmbedInteractiveExample("pages/js/array-indexof.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>arr</var>.indexOf(<var>élémentRecherché</var>)
-<var>arr</var>.indexOf(<var>élémentRecherché</var>, indiceDébut)
-</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>élémentRecherché</code></dt>
- <dd>L'élément qu'on cherche dans le tableau</dd>
- <dt><code>indiceDébut</code> {{optional_inline}}</dt>
- <dd>L'index à partir duquel commencer la recherche. La valeur par défaut est 0 (le tableau sera parcouru dans sa totalité). Si l'index est plus grand ou égal à la longueur du tableau, la méthode renverra -1. Si l'index est négatif, la recherche commencera d'autant d'éléments, à partir de la fin du tableau. À noter que même si l'index est négatif, la recherche s'effectue toujours du début jusqu'à la fin du tableau. Si l'index fourni est inférieur à 0, le tableau sera entièrement parcouru.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Le premier index de l'élément dans le tableau ou -1 si la valeur n'est pas trouvée.</p>
-
-<h2 id="Description">Description</h2>
-
-<p><code>indexOf</code> compare <code>élémentRecherché</code> aux éléments contenus dans le tableau en utilisant une <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_de_comparaison#.C3.89galit.C3.A9_stricte_(.3D.3D.3D)">égalité stricte</a> (la même méthode utilisée par l'opérateur <code>===</code>).</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Utiliser_indexOf()">Utiliser <code>indexOf()</code></h3>
-
-<p>Dans l'exemple qui suit, on peut utiliser <code>indexOf</code> afin de trouver l'emplacement d'un élément dans un tableau.</p>
-
-<pre class="brush: js">var tableau = [2, 9, 9];
-tableau.indexOf(2);     // 0
-tableau.indexOf(7);     // -1
-tableau.indexOf(9, 2);  // 2
-tableau.indexOf(2, -1); // -1
-tableau.indexOf(2, -3); // 0</pre>
-
-<h3 id="Trouver_toutes_les_occurences_d'un_élément">Trouver toutes les occurences d'un élément</h3>
-
-<p>Dans l'exemple qui suit, on utilise <code>indexOf()</code> afin de trouver tous les indices d'un élément dans un tableau. On peut utiliser la méthode {{jsxref("Array.prototype.push", "push")}} afin d'ajouter ces indices dans un autre tableau.</p>
-
-<pre class="brush: js">var indices = [];
-var tableau = ['a', 'b', 'a', 'c', 'a', 'd'];
-var élément = 'a';
-var idx = tableau.indexOf(élément);
-while (idx != -1) {
-  indices.push(idx);
-  idx = tableau.indexOf(élément, idx + 1);
-}
-console.log(indices);
-// [0, 2, 4]</pre>
-
-<h3 id="Trouver_si_un_élément_existe_et_l'ajouter_dans_le_tableau_si_ce_n'est_pas_le_cas">Trouver si un élément existe et l'ajouter dans le tableau si ce n'est pas le cas</h3>
-
-<pre class="brush: js">function mettreAJourLegumes(tabLégumes, légume) {
-    if (tabLégumes.indexOf(légume) === -1) {
-        tabLégumes.push(légume);
-        console.log('Le nouveau tableau est : ' + tabLégumes);
-    } else if (tabLégumes.indexOf(légume) &gt; -1) {
-        console.log(légume + ' existe déjà dans le tableau.');
-    }
-}
-
-var tabLégumes = ['pomme de terre', 'tomate', 'poivron'];
-
-mettreAJourLegumes(tabLégumes, 'épinard');
-// Le nouveau tableau est : pomme de terre,tomate,poivron,épinard
-mettreAJourLegumes(tabLégumes, 'épinard');
-// épinard existe déjà dans le tableau.</pre>
-
-<h2 id="Prothèse_d'émulation_(polyfill)">Prothèse d'émulation (<em>polyfill</em>)</h2>
-
-<p><code>indexOf</code> fut ajouté avec la cinquième édition du standard ECMA-262 ; il peut donc ne pas être présent dans tous les navigateurs web. Vous pouvez contourner ce problème en insérant le code suivant au début de vos scripts. Il permet d'utiliser <code>indexOf</code> dans les environnements qui ne le supportent pas nativement. L'algorithme est le même que celui spécifié dans ECMAScript 5 si on a bien {{jsxref("TypeError", "TypeError")}} et {{jsxref("Math.abs")}} qui ont leurs valeurs originales :</p>
-
-<pre class="brush: js">// Production steps of ECMA-262, Edition 5, 15.4.4.14
-// Référence : http://es5.github.io/#x15.4.4.14
-if (!Array.prototype.indexOf) {
-  Array.prototype.indexOf = function(searchElement, fromIndex) {
-
-    var k;
-
-    // 1. Soit O le résultat de l'appel à ToObject avec
-    //    this en argument.
-    if (this == null) {
-      throw new TypeError('"this" vaut null ou n est pas défini');
-    }
-
-    var O = Object(this);
-
-    // 2. Soit lenValue le résultat de l'appel de la
-    //    méthode interne Get de O avec l'argument
-    //    "length".
-    // 3. Soit len le résultat de ToUint32(lenValue).
-    var len = O.length &gt;&gt;&gt; 0;
-
-    // 4. Si len vaut 0, on renvoie -1.
-    if (len === 0) {
-      return -1;
-    }
-
-    // 5. Si l'argument fromIndex a été utilisé, soit
-    //    n le résultat de ToInteger(fromIndex)
-    //    0 sinon
-    var n = +fromIndex || 0;
-
-    if (Math.abs(n) === Infinity) {
-      n = 0;
-    }
-
-    // 6. Si n &gt;= len, on renvoie -1.
-    if (n &gt;= len) {
-      return -1;
-    }
-
-    // 7. Si n &gt;= 0, soit k égal à n.
-    // 8. Sinon, si n&lt;0, soit k égal à len - abs(n).
-    //    Si k est inférieur à 0, on ramène k égal à 0.
-    k = Math.max(n &gt;= 0 ? n : len - Math.abs(n), 0);
-
-    // 9. On répète tant que k &lt; len
-    while (k &lt; len) {
-      // a. Soit Pk égal à ToString(k).
-      //    Ceci est implicite pour l'opérande gauche de in
-      // b. Soit kPresent le résultat de l'appel de la
-      //    méthode interne HasProperty de O avec Pk en
-      //    argument. Cette étape peut être combinée avec
-      //    l'étape c
-      // c. Si kPresent vaut true, alors
-      //    i.  soit elementK le résultat de l'appel de la
-      //        méthode interne Get de O avec ToString(k) en
-      //        argument
-      //   ii.  Soit same le résultat de l'application de
-      //        l'algorithme d'égalité stricte entre
-      //        searchElement et elementK.
-      //  iii.  Si same vaut true, on renvoie k.
-      if (k in O &amp;&amp; O[k] === searchElement) {
-        return k;
-      }
-      k++;
-    }
-    return -1;
-  };
-}</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-15.4.4.14', 'Array.prototype.indexOf')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td>Définition initiale. Implémentée avec JavaScript 1.6.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-array.prototype.indexof', 'Array.prototype.indexOf')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-array.prototype.indexof', 'Array.prototype.indexOf')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Array.indexOf")}}</p>
-
-<h2 id="Notes_de_compatibilité">Notes de compatibilité</h2>
-
-<ul>
- <li>À partir de Firefox 47 ({{geckoRelease(47)}}), cette méthode ne renverra plus <code>-0</code>. Ainsi, <code>[0].indexOf(0, -0)</code> renverra toujours <code>+0</code> (cf. {{bug(1242043)}}).</li>
-</ul>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Array.prototype.lastIndexOf()")}}</li>
- <li>{{jsxref("TypedArray.prototype.indexOf()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/array/indexof/index.md b/files/fr/web/javascript/reference/global_objects/array/indexof/index.md
new file mode 100644
index 0000000000..14d8d2e1f4
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/array/indexof/index.md
@@ -0,0 +1,189 @@
+---
+title: Array.prototype.indexOf()
+slug: Web/JavaScript/Reference/Global_Objects/Array/indexOf
+tags:
+  - Array
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - polyfill
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/indexOf
+original_slug: Web/JavaScript/Reference/Objets_globaux/Array/indexOf
+---
+{{JSRef}}
+
+La méthode **`indexOf()`** renvoie le premier indice pour lequel on trouve un élément donné dans un tableau. Si l'élément cherché n'est pas présent dans le tableau, la méthode renverra -1.
+
+> **Note :** pour la méthode associée aux chaînes de caractères, voir la page {{jsxref("String.prototype.indexOf()")}}.
+
+{{EmbedInteractiveExample("pages/js/array-indexof.html")}}
+
+## Syntaxe
+
+    arr.indexOf(élémentRecherché)
+    arr.indexOf(élémentRecherché, indiceDébut)
+
+### Paramètres
+
+- `élémentRecherché`
+  - : L'élément qu'on cherche dans le tableau
+- `indiceDébut` {{optional_inline}}
+  - : L'index à partir duquel commencer la recherche. La valeur par défaut est 0 (le tableau sera parcouru dans sa totalité). Si l'index est plus grand ou égal à la longueur du tableau, la méthode renverra -1. Si l'index est négatif, la recherche commencera d'autant d'éléments, à partir de la fin du tableau. À noter que même si l'index est négatif, la recherche s'effectue toujours du début jusqu'à la fin du tableau. Si l'index fourni est inférieur à 0, le tableau sera entièrement parcouru.
+
+### Valeur de retour
+
+Le premier index de l'élément dans le tableau ou -1 si la valeur n'est pas trouvée.
+
+## Description
+
+`indexOf` compare `élémentRecherché` aux éléments contenus dans le tableau en utilisant une [égalité stricte](</fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_de_comparaison#.C3.89galit.C3.A9_stricte_(.3D.3D.3D)>) (la même méthode utilisée par l'opérateur `===`).
+
+## Exemples
+
+### Utiliser `indexOf()`
+
+Dans l'exemple qui suit, on peut utiliser `indexOf` afin de trouver l'emplacement d'un élément dans un tableau.
+
+```js
+var tableau = [2, 9, 9];
+tableau.indexOf(2);     // 0
+tableau.indexOf(7);     // -1
+tableau.indexOf(9, 2);  // 2
+tableau.indexOf(2, -1); // -1
+tableau.indexOf(2, -3); // 0
+```
+
+### Trouver toutes les occurences d'un élément
+
+Dans l'exemple qui suit, on utilise `indexOf()` afin de trouver tous les indices d'un élément dans un tableau. On peut utiliser la méthode {{jsxref("Array.prototype.push", "push")}} afin d'ajouter ces indices dans un autre tableau.
+
+```js
+var indices = [];
+var tableau = ['a', 'b', 'a', 'c', 'a', 'd'];
+var élément = 'a';
+var idx = tableau.indexOf(élément);
+while (idx != -1) {
+  indices.push(idx);
+  idx = tableau.indexOf(élément, idx + 1);
+}
+console.log(indices);
+// [0, 2, 4]
+```
+
+### Trouver si un élément existe et l'ajouter dans le tableau si ce n'est pas le cas
+
+```js
+function mettreAJourLegumes(tabLégumes, légume) {
+    if (tabLégumes.indexOf(légume) === -1) {
+        tabLégumes.push(légume);
+        console.log('Le nouveau tableau est : ' + tabLégumes);
+    } else if (tabLégumes.indexOf(légume) > -1) {
+        console.log(légume + ' existe déjà dans le tableau.');
+    }
+}
+
+var tabLégumes = ['pomme de terre', 'tomate', 'poivron'];
+
+mettreAJourLegumes(tabLégumes, 'épinard');
+// Le nouveau tableau est : pomme de terre,tomate,poivron,épinard
+mettreAJourLegumes(tabLégumes, 'épinard');
+// épinard existe déjà dans le tableau.
+```
+
+## Prothèse d'émulation (_polyfill_)
+
+`indexOf` fut ajouté avec la cinquième édition du standard ECMA-262 ; il peut donc ne pas être présent dans tous les navigateurs web. Vous pouvez contourner ce problème en insérant le code suivant au début de vos scripts. Il permet d'utiliser `indexOf` dans les environnements qui ne le supportent pas nativement. L'algorithme est le même que celui spécifié dans ECMAScript 5 si on a bien {{jsxref("TypeError", "TypeError")}} et {{jsxref("Math.abs")}} qui ont leurs valeurs originales :
+
+```js
+// Production steps of ECMA-262, Edition 5, 15.4.4.14
+// Référence : http://es5.github.io/#x15.4.4.14
+if (!Array.prototype.indexOf) {
+  Array.prototype.indexOf = function(searchElement, fromIndex) {
+
+    var k;
+
+    // 1. Soit O le résultat de l'appel à ToObject avec
+    //    this en argument.
+    if (this == null) {
+      throw new TypeError('"this" vaut null ou n est pas défini');
+    }
+
+    var O = Object(this);
+
+    // 2. Soit lenValue le résultat de l'appel de la
+    //    méthode interne Get de O avec l'argument
+    //    "length".
+    // 3. Soit len le résultat de ToUint32(lenValue).
+    var len = O.length >>> 0;
+
+    // 4. Si len vaut 0, on renvoie -1.
+    if (len === 0) {
+      return -1;
+    }
+
+    // 5. Si l'argument fromIndex a été utilisé, soit
+    //    n le résultat de ToInteger(fromIndex)
+    //    0 sinon
+    var n = +fromIndex || 0;
+
+    if (Math.abs(n) === Infinity) {
+      n = 0;
+    }
+
+    // 6. Si n >= len, on renvoie -1.
+    if (n >= len) {
+      return -1;
+    }
+
+    // 7. Si n >= 0, soit k égal à n.
+    // 8. Sinon, si n<0, soit k égal à len - abs(n).
+    //    Si k est inférieur à 0, on ramène k égal à 0.
+    k = Math.max(n >= 0 ? n : len - Math.abs(n), 0);
+
+    // 9. On répète tant que k < len
+    while (k < len) {
+      // a. Soit Pk égal à ToString(k).
+      //    Ceci est implicite pour l'opérande gauche de in
+      // b. Soit kPresent le résultat de l'appel de la
+      //    méthode interne HasProperty de O avec Pk en
+      //    argument. Cette étape peut être combinée avec
+      //    l'étape c
+      // c. Si kPresent vaut true, alors
+      //    i.  soit elementK le résultat de l'appel de la
+      //        méthode interne Get de O avec ToString(k) en
+      //        argument
+      //   ii.  Soit same le résultat de l'application de
+      //        l'algorithme d'égalité stricte entre
+      //        searchElement et elementK.
+      //  iii.  Si same vaut true, on renvoie k.
+      if (k in O && O[k] === searchElement) {
+        return k;
+      }
+      k++;
+    }
+    return -1;
+  };
+}
+```
+
+## Spécifications
+
+| Spécification                                                                                                | État                         | Commentaires                                          |
+| ------------------------------------------------------------------------------------------------------------ | ---------------------------- | ----------------------------------------------------- |
+| {{SpecName('ES5.1', '#sec-15.4.4.14', 'Array.prototype.indexOf')}}                     | {{Spec2('ES5.1')}}     | Définition initiale. Implémentée avec JavaScript 1.6. |
+| {{SpecName('ES6', '#sec-array.prototype.indexof', 'Array.prototype.indexOf')}}     | {{Spec2('ES6')}}         |                                                       |
+| {{SpecName('ESDraft', '#sec-array.prototype.indexof', 'Array.prototype.indexOf')}} | {{Spec2('ESDraft')}} |                                                       |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Array.indexOf")}}
+
+## Notes de compatibilité
+
+- À partir de Firefox 47 ({{geckoRelease(47)}}), cette méthode ne renverra plus `-0`. Ainsi, `[0].indexOf(0, -0)` renverra toujours `+0` (cf. {{bug(1242043)}}).
+
+## Voir aussi
+
+- {{jsxref("Array.prototype.lastIndexOf()")}}
+- {{jsxref("TypedArray.prototype.indexOf()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/array/isarray/index.html b/files/fr/web/javascript/reference/global_objects/array/isarray/index.html
deleted file mode 100644
index f57266afff..0000000000
--- a/files/fr/web/javascript/reference/global_objects/array/isarray/index.html
+++ /dev/null
@@ -1,114 +0,0 @@
----
-title: Array.isArray()
-slug: Web/JavaScript/Reference/Global_Objects/Array/isArray
-tags:
-  - Array
-  - ECMAScript 5
-  - JavaScript
-  - Méthode
-  - Reference
-  - polyfill
-translation_of: Web/JavaScript/Reference/Global_Objects/Array/isArray
-original_slug: Web/JavaScript/Reference/Objets_globaux/Array/isArray
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <code><strong>Array.isArray()</strong></code> permet de déterminer si l'objet passé en argument est un objet {{jsxref("Array")}}, elle renvoie <code>true</code> si le paramètre passé à la fonction est de type <code>Array</code> et <code>false</code> dans le cas contraire.</p>
-
-<pre class="brush: js">Array.isArray([1, 2, 3]);   // true
-Array.isArray({toto: 123}); // false
-Array.isArray("tototruc");  // false
-Array.isArray(undefined);   // false
-</pre>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">Array.isArray(<var>value</var>)</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>value</code></dt>
- <dd>La valeur dont on veut vérifier le type</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p><code>true</code> si la valeur est un tableau (une instance de {{jsxref("Array")}}), <code>false</code> sinon.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>Si l'objet indiqué en paramètre est un {{jsxref("Array")}}, la méthode renvoie <code>true</code>, sinon, elle renvoie <code>false</code>.</p>
-
-<p>Voir aussi : « <a href="http://web.mit.edu/jwalden/www/isArray.html">Determining with absolute accuracy whether or not a JavaScript object is an array</a> » (en anglais) pour avoir plus de détails. Si on passe un objet {{jsxref("TypedArray")}} en argument, ce sera toujours la valeur <code>false</code> qui sera renvoyée.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<pre class="brush: js">// Tous les appels suivant renvoient true
-Array.isArray([]);
-Array.isArray([1]);
-Array.isArray(new Array());
-Array.isArray(new Array('a', 'b', 'c'));
-Array.isArray(new Array(3));
-// Une petite anecdote: Array.prototype lui même est un Array
-Array.isArray( Array.prototype );
-
-// Tous les appels suivant renvoient false
-Array.isArray();
-Array.isArray({});
-Array.isArray(null);
-Array.isArray(undefined);
-Array.isArray(17);
-Array.isArray("Array");
-Array.isArray(true);
-Array.isArray(false);
-Array.isArray(new Uint8Array(32));
-Array.isArray({ __proto__ : Array.prototype });
-</pre>
-
-<h2 id="Prothèse_d'émulation_(polyfill)">Prothèse d'émulation (<em>polyfill</em>)</h2>
-
-<p>Exécuter ce code avant tout les autres aboutira à la création de la méthode <code>Array.isArray()</code>si elle n'est pas nativement prise en charge par le navigateur.</p>
-
-<pre class="brush: js">if(!Array.isArray) {
-  Array.isArray = function(arg) {
-    return Object.prototype.toString.call(arg) === '[object Array]';
-  };
-}</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-15.4.3.2', 'Array.isArray')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td>Définition initiale. Implémentée avec JavaScript 1.8.5.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-array.isarray', 'Array.isArray')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-array.isarray', 'Array.isArray')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Array.isArray")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Array")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/array/isarray/index.md b/files/fr/web/javascript/reference/global_objects/array/isarray/index.md
new file mode 100644
index 0000000000..c4b10b3082
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/array/isarray/index.md
@@ -0,0 +1,95 @@
+---
+title: Array.isArray()
+slug: Web/JavaScript/Reference/Global_Objects/Array/isArray
+tags:
+  - Array
+  - ECMAScript 5
+  - JavaScript
+  - Méthode
+  - Reference
+  - polyfill
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/isArray
+original_slug: Web/JavaScript/Reference/Objets_globaux/Array/isArray
+---
+{{JSRef}}
+
+La méthode **`Array.isArray()`** permet de déterminer si l'objet passé en argument est un objet {{jsxref("Array")}}, elle renvoie `true` si le paramètre passé à la fonction est de type `Array` et `false` dans le cas contraire.
+
+```js
+Array.isArray([1, 2, 3]);   // true
+Array.isArray({toto: 123}); // false
+Array.isArray("tototruc");  // false
+Array.isArray(undefined);   // false
+```
+
+## Syntaxe
+
+    Array.isArray(value)
+
+### Paramètres
+
+- `value`
+  - : La valeur dont on veut vérifier le type
+
+### Valeur de retour
+
+`true` si la valeur est un tableau (une instance de {{jsxref("Array")}}), `false` sinon.
+
+## Description
+
+Si l'objet indiqué en paramètre est un {{jsxref("Array")}}, la méthode renvoie `true`, sinon, elle renvoie `false`.
+
+Voir aussi : « [Determining with absolute accuracy whether or not a JavaScript object is an array](http://web.mit.edu/jwalden/www/isArray.html) » (en anglais) pour avoir plus de détails. Si on passe un objet {{jsxref("TypedArray")}} en argument, ce sera toujours la valeur `false` qui sera renvoyée.
+
+## Exemples
+
+```js
+// Tous les appels suivant renvoient true
+Array.isArray([]);
+Array.isArray([1]);
+Array.isArray(new Array());
+Array.isArray(new Array('a', 'b', 'c'));
+Array.isArray(new Array(3));
+// Une petite anecdote: Array.prototype lui même est un Array
+Array.isArray( Array.prototype );
+
+// Tous les appels suivant renvoient false
+Array.isArray();
+Array.isArray({});
+Array.isArray(null);
+Array.isArray(undefined);
+Array.isArray(17);
+Array.isArray("Array");
+Array.isArray(true);
+Array.isArray(false);
+Array.isArray(new Uint8Array(32));
+Array.isArray({ __proto__ : Array.prototype });
+```
+
+## Prothèse d'émulation (_polyfill_)
+
+Exécuter ce code avant tout les autres aboutira à la création de la méthode `Array.isArray()`si elle n'est pas nativement prise en charge par le navigateur.
+
+```js
+if(!Array.isArray) {
+  Array.isArray = function(arg) {
+    return Object.prototype.toString.call(arg) === '[object Array]';
+  };
+}
+```
+
+## Spécifications
+
+| Spécification                                                                        | État                         | Commentaires                                            |
+| ------------------------------------------------------------------------------------ | ---------------------------- | ------------------------------------------------------- |
+| {{SpecName('ES5.1', '#sec-15.4.3.2', 'Array.isArray')}}             | {{Spec2('ES5.1')}}     | Définition initiale. Implémentée avec JavaScript 1.8.5. |
+| {{SpecName('ES6', '#sec-array.isarray', 'Array.isArray')}}         | {{Spec2('ES6')}}         |                                                         |
+| {{SpecName('ESDraft', '#sec-array.isarray', 'Array.isArray')}} | {{Spec2('ESDraft')}} |                                                         |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Array.isArray")}}
+
+## Voir aussi
+
+- {{jsxref("Array")}}
diff --git a/files/fr/web/javascript/reference/global_objects/array/join/index.html b/files/fr/web/javascript/reference/global_objects/array/join/index.html
deleted file mode 100644
index cdb8f6b0f6..0000000000
--- a/files/fr/web/javascript/reference/global_objects/array/join/index.html
+++ /dev/null
@@ -1,107 +0,0 @@
----
-title: Array.prototype.join()
-slug: Web/JavaScript/Reference/Global_Objects/Array/join
-tags:
-  - Array
-  - JavaScript
-  - Méthode
-  - Prototype
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Array/join
-original_slug: Web/JavaScript/Reference/Objets_globaux/Array/join
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <code><strong>join()</strong></code> crée et renvoie une nouvelle chaîne de caractères en concaténant tous les éléments d'un tableau (ou d'<a href="/fr/docs/Web/JavaScript/Guide/Collections_indexées#Manipuler_des_objets_semblables_à_des_tableaux">un objet semblable à un tableau</a>). La concaténation utilise la virgule ou une autre chaîne, fournie en argument, comme séparateur.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/array-join.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>arr</var>.join()
-<var>arr</var>.join(<var>séparateur</var>)
-</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>séparateur</code> {{optional_inline}}</dt>
- <dd>Ce paramètre optionnel indique une chaine de caractères pour séparer chaque élément du tableau. Le séparateur est converti en une chaine de caractères si nécessaire. Si ce paramètre n'est pas utilisé, les éléments du tableau seront séparés par une virgule (,). Si ce paramètre est la chaîne vide, les éléments seront accolés les uns aux autres sans espace entre. La valeur par défaut de ce paramètre est <code>","</code>.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Une chaîne de caractères composée de tous les éléments du tableau joints les uns aux autres. Si la longueur du tableau (<code>arr.length</code>) vaut <code>0</code>, c'est la chaîne vide qui est renvoyée. Si le tableau ne contient qu'un élément, sa version texte sera renvoyée sans être suivie du séparateur.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>Les différents éléments du tableau sont convertis en une chaîne de caractères puis fusionnés en une seule chaîne. Si un élément vaut <code>undefined</code> ou <code>null</code>, il sera converti en la chaîne vide. Cette fonction est générique et peut donc être utilisée avec <a href="/fr/docs/Web/JavaScript/Guide/Collections_indexées#Manipuler_des_objets_semblables_à_des_tableaux">les objets semblables aux tableaux</a>.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Fusionner_un_tableau_de_quatre_façons_différentes">Fusionner un tableau de quatre façons différentes</h3>
-
-<p>L'exemple suivant crée un tableau, <code>a</code>, avec trois éléments, puis joint le tableau à trois reprises : en utilisant le séparateur par défaut, une virgule et un espace, puis un plus, puis avec la chaîne vide.</p>
-
-<pre class="brush: js">var a = new Array("Vent","Pluie","Feu");
-a.join();      // "Vent,Pluie,Feu"
-a.join(", ");  // "Vent, Pluie, Feu"
-a.join(" + "); // "Vent + Pluie + Feu"
-a.join("");    // "VentPluieFeu"</pre>
-
-<h3 id="Fusionner_un_objet_semblable_à_un_tableau">Fusionner un objet semblable à un tableau</h3>
-
-<p>Dans l'exemple suivant, on effectue la fusion sur un objet semblable à un tableau (<code><a href="/fr/docs/Web/JavaScript/Reference/Fonctions/arguments">arguments</a></code>) en appelant {{jsxref("Function.prototype.call")}} sur <code>Array.prototype.join</code>.</p>
-
-<pre class="brush: js">function f(a, b, c) {
-  var s = Array.prototype.join.call(arguments);
-  console.log(s);
-}
-f(1, 'a', true); // '1,a,true'
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('ES1')}}</td>
-   <td>{{Spec2('ES1')}}</td>
-   <td>Définition initiale. Implémentée avec JavaScript 1.1.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-15.4.4.5', 'Array.prototype.join')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-array.prototype.join', 'Array.prototype.join')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-array.prototype.join', 'Array.prototype.join')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Array.join")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("String.prototype.split()")}}</li>
- <li>{{jsxref("Array.prototype.toString()")}}</li>
- <li>{{jsxref("TypedArray.prototype.join()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/array/join/index.md b/files/fr/web/javascript/reference/global_objects/array/join/index.md
new file mode 100644
index 0000000000..860e358953
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/array/join/index.md
@@ -0,0 +1,80 @@
+---
+title: Array.prototype.join()
+slug: Web/JavaScript/Reference/Global_Objects/Array/join
+tags:
+  - Array
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/join
+original_slug: Web/JavaScript/Reference/Objets_globaux/Array/join
+---
+{{JSRef}}
+
+La méthode **`join()`** crée et renvoie une nouvelle chaîne de caractères en concaténant tous les éléments d'un tableau (ou d'[un objet semblable à un tableau](/fr/docs/Web/JavaScript/Guide/Collections_indexées#Manipuler_des_objets_semblables_à_des_tableaux)). La concaténation utilise la virgule ou une autre chaîne, fournie en argument, comme séparateur.
+
+{{EmbedInteractiveExample("pages/js/array-join.html")}}
+
+## Syntaxe
+
+    arr.join()
+    arr.join(séparateur)
+
+### Paramètres
+
+- `séparateur` {{optional_inline}}
+  - : Ce paramètre optionnel indique une chaine de caractères pour séparer chaque élément du tableau. Le séparateur est converti en une chaine de caractères si nécessaire. Si ce paramètre n'est pas utilisé, les éléments du tableau seront séparés par une virgule (,). Si ce paramètre est la chaîne vide, les éléments seront accolés les uns aux autres sans espace entre. La valeur par défaut de ce paramètre est `","`.
+
+### Valeur de retour
+
+Une chaîne de caractères composée de tous les éléments du tableau joints les uns aux autres. Si la longueur du tableau (`arr.length`) vaut `0`, c'est la chaîne vide qui est renvoyée. Si le tableau ne contient qu'un élément, sa version texte sera renvoyée sans être suivie du séparateur.
+
+## Description
+
+Les différents éléments du tableau sont convertis en une chaîne de caractères puis fusionnés en une seule chaîne. Si un élément vaut `undefined` ou `null`, il sera converti en la chaîne vide. Cette fonction est générique et peut donc être utilisée avec [les objets semblables aux tableaux](/fr/docs/Web/JavaScript/Guide/Collections_indexées#Manipuler_des_objets_semblables_à_des_tableaux).
+
+## Exemples
+
+### Fusionner un tableau de quatre façons différentes
+
+L'exemple suivant crée un tableau, `a`, avec trois éléments, puis joint le tableau à trois reprises : en utilisant le séparateur par défaut, une virgule et un espace, puis un plus, puis avec la chaîne vide.
+
+```js
+var a = new Array("Vent","Pluie","Feu");
+a.join();      // "Vent,Pluie,Feu"
+a.join(", ");  // "Vent, Pluie, Feu"
+a.join(" + "); // "Vent + Pluie + Feu"
+a.join("");    // "VentPluieFeu"
+```
+
+### Fusionner un objet semblable à un tableau
+
+Dans l'exemple suivant, on effectue la fusion sur un objet semblable à un tableau ([`arguments`](/fr/docs/Web/JavaScript/Reference/Fonctions/arguments)) en appelant {{jsxref("Function.prototype.call")}} sur `Array.prototype.join`.
+
+```js
+function f(a, b, c) {
+  var s = Array.prototype.join.call(arguments);
+  console.log(s);
+}
+f(1, 'a', true); // '1,a,true'
+```
+
+## Spécifications
+
+| Spécification                                                                                        | État                         | Commentaires                                          |
+| ---------------------------------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- |
+| {{SpecName('ES1')}}                                                                             | {{Spec2('ES1')}}         | Définition initiale. Implémentée avec JavaScript 1.1. |
+| {{SpecName('ES5.1', '#sec-15.4.4.5', 'Array.prototype.join')}}                 | {{Spec2('ES5.1')}}     |                                                       |
+| {{SpecName('ES6', '#sec-array.prototype.join', 'Array.prototype.join')}}     | {{Spec2('ES6')}}         |                                                       |
+| {{SpecName('ESDraft', '#sec-array.prototype.join', 'Array.prototype.join')}} | {{Spec2('ESDraft')}} |                                                       |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Array.join")}}
+
+## Voir aussi
+
+- {{jsxref("String.prototype.split()")}}
+- {{jsxref("Array.prototype.toString()")}}
+- {{jsxref("TypedArray.prototype.join()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/array/keys/index.html b/files/fr/web/javascript/reference/global_objects/array/keys/index.html
deleted file mode 100644
index 88e747da9c..0000000000
--- a/files/fr/web/javascript/reference/global_objects/array/keys/index.html
+++ /dev/null
@@ -1,82 +0,0 @@
----
-title: Array.prototype.keys()
-slug: Web/JavaScript/Reference/Global_Objects/Array/keys
-tags:
-  - Array
-  - ECMAScript 2015
-  - Iterator
-  - JavaScript
-  - Méthode
-  - Prototype
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Array/keys
-original_slug: Web/JavaScript/Reference/Objets_globaux/Array/keys
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <code><strong>keys()</strong></code> renvoie un nouvel objet <code><strong>Array Iterator</strong></code> qui contient les clefs pour chaque indice du tableau.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/array-keys.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>arr</var>.keys()</pre>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Un nouvel objet itérateur pour {{jsxref("Array")}}.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Utilisation_simple">Utilisation simple</h3>
-
-<pre class="brush:js">var arr = ["a","b","c"];
-var itérateur = arr.keys();
-
-console.log(itérateur.next()); // { value: 0, done: false }
-console.log(itérateur.next()); // { value: 1, done: false }
-console.log(itérateur.next()); // { value: 2, done: false }
-console.log(itérateur.next()); // { value: undefined, done: true }
-</pre>
-
-<h3 id="Un_itérateur_de_clés_prend_en_compte_les_trous">Un itérateur de clés prend en compte les trous</h3>
-
-<pre class="brush: js">var arr = ["a", , "c"];
-var clésCreuses = Object.keys(arr);
-var clésDenses = [...arr.keys()];
-console.log(clésCreuses); // ["0", "2"]
-console.log(clésDenses);  // [0, 1, 2]</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-array.prototype.keys', 'Array.prototype.keys')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-array.prototype.keys', 'Array.prototype.keys')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Array.keys")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Array.prototype.entries()")}}</li>
- <li>{{jsxref("Array.prototype.values()")}}</li>
- <li><a href="/fr/docs/Web/JavaScript/Reference/Les_protocoles_iteration">Les protocoles d'itération</a></li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/array/keys/index.md b/files/fr/web/javascript/reference/global_objects/array/keys/index.md
new file mode 100644
index 0000000000..51483bec61
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/array/keys/index.md
@@ -0,0 +1,68 @@
+---
+title: Array.prototype.keys()
+slug: Web/JavaScript/Reference/Global_Objects/Array/keys
+tags:
+  - Array
+  - ECMAScript 2015
+  - Iterator
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/keys
+original_slug: Web/JavaScript/Reference/Objets_globaux/Array/keys
+---
+{{JSRef}}
+
+La méthode **`keys()`** renvoie un nouvel objet **`Array Iterator`** qui contient les clefs pour chaque indice du tableau.
+
+{{EmbedInteractiveExample("pages/js/array-keys.html")}}
+
+## Syntaxe
+
+    arr.keys()
+
+### Valeur de retour
+
+Un nouvel objet itérateur pour {{jsxref("Array")}}.
+
+## Exemples
+
+### Utilisation simple
+
+```js
+var arr = ["a","b","c"];
+var itérateur = arr.keys();
+
+console.log(itérateur.next()); // { value: 0, done: false }
+console.log(itérateur.next()); // { value: 1, done: false }
+console.log(itérateur.next()); // { value: 2, done: false }
+console.log(itérateur.next()); // { value: undefined, done: true }
+```
+
+### Un itérateur de clés prend en compte les trous
+
+```js
+var arr = ["a", , "c"];
+var clésCreuses = Object.keys(arr);
+var clésDenses = [...arr.keys()];
+console.log(clésCreuses); // ["0", "2"]
+console.log(clésDenses);  // [0, 1, 2]
+```
+
+## Spécifications
+
+| Spécification                                                                                        | État                         | Commentaires         |
+| ---------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName('ES2015', '#sec-array.prototype.keys', 'Array.prototype.keys')}} | {{Spec2('ES2015')}}     | Définition initiale. |
+| {{SpecName('ESDraft', '#sec-array.prototype.keys', 'Array.prototype.keys')}} | {{Spec2('ESDraft')}} |                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Array.keys")}}
+
+## Voir aussi
+
+- {{jsxref("Array.prototype.entries()")}}
+- {{jsxref("Array.prototype.values()")}}
+- [Les protocoles d'itération](/fr/docs/Web/JavaScript/Reference/Les_protocoles_iteration)
diff --git a/files/fr/web/javascript/reference/global_objects/array/lastindexof/index.html b/files/fr/web/javascript/reference/global_objects/array/lastindexof/index.html
deleted file mode 100644
index eb2c70d644..0000000000
--- a/files/fr/web/javascript/reference/global_objects/array/lastindexof/index.html
+++ /dev/null
@@ -1,162 +0,0 @@
----
-title: Array.prototype.lastIndexOf()
-slug: Web/JavaScript/Reference/Global_Objects/Array/lastIndexOf
-tags:
-  - Array
-  - ECMAScript 5
-  - JavaScript
-  - Méthode
-  - Prototype
-  - Reference
-  - polyfill
-translation_of: Web/JavaScript/Reference/Global_Objects/Array/lastIndexOf
-original_slug: Web/JavaScript/Reference/Objets_globaux/Array/lastIndexOf
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <code><strong>lastIndexOf()</strong></code> permet de renvoyer le dernier indice pour lequel une valeur donnée est présente dans un tableau. Si la valeur recherchée n'est pas présente, le résultat sera -1. Lors de la recherche, le tableau est parcouru dans le sens des index décroissants, à partir de l'index <code>indexDébut</code>.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/array-lastindexof.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>arr</var>.lastIndexOf(<var>élémentRecherché</var>)
-<var>arr</var>.lastIndexOf(<var>élémentRecherché</var>, <var>indexDébut</var>)
-</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>élémentRecherché</code></dt>
- <dd>L'élément à qu'on cherche dans le tableau.</dd>
- <dt><code>indexDébut</code> {{optional_inline}}</dt>
- <dd>L'index à partir duquel commencer la recherche dans le tableau (la recherche s'effectuant à l'envers). Si le paramètre est absent, sa valeur par défaut sera la longueur du tableau moins 1 (c'est-à-dire <code>arr.length - 1</code>), le tableau sera alors parcouru dans sa totalité. Si l'index est plus grand ou égal à la longueur du tableau, le tableau sera parcouru en entier. Si l'index est négatif, la recherche commencera d'autant d'éléments à partir de la fin du tableau. À noter que, même si l'index est négatif, la recherche s'effectuera toujours de la fin jusqu'au début du tableau. Si l'index calculé est inférieur à 0, la méthode renverra -1 et le tableau ne sera pas parcouru.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Le dernier index auquel on trouve la valeur dans le tableau, -1 si elle n'est pas trouvée.</p>
-
-<h2 id="Description">Description</h2>
-
-<p><code>lastIndexOf</code> compare <code>élémentRecherché</code> aux éléments contenus dans le tableau en utilisant une <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_de_comparaison#.C3.89galit.C3.A9_stricte_(.3D.3D.3D)">égalité stricte</a> (l'égalité utilisée par l'opérateur ===).</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Utiliser_lastIndexOf">Utiliser <code>lastIndexOf</code></h3>
-
-<p>Dans l'exemple suivant, on utilise <code>lastIndexOf</code> afin de situer une valeur dans un tableau.</p>
-
-<pre class="brush: js">var tableau = [2, 5, 9, 2];
-tableau.lastIndexOf(2);     // 3
-tableau.lastIndexOf(7);     // -1
-tableau.lastIndexOf(2, 3);  // 3
-tableau.lastIndexOf(2, 2);  // 0
-tableau.lastIndexOf(2, -2); // 0
-tableau.lastIndexOf(2, -1); // 3</pre>
-
-<h3 id="Trouver_toutes_les_occurrences_dun_élément">Trouver toutes les occurrences d'un élément</h3>
-
-<p>L’exemple suivant utilise <code>lastIndexOf</code> pour trouver tous les index (<code>indices</code>) d’un élément dans un tableau donné, en utilisant {{jsxref("Array.prototype.push", "push")}} pour les ajouter dans un autre tableau quand ils sont trouvés.</p>
-
-<pre class="brush: js">var indices = [];
-var tableau = ['a', 'b', 'a', 'c', 'a', 'd'];
-var élément = 'a';
-var idx = tableau.lastIndexOf(élément);
-while (idx !== -1) {
-  indices.push(idx);
-  idx = (idx &gt; 0 ? tableau.lastIndexOf(élément, idx - 1) : -1);
-}
-
-console.log(indices);
-// [4, 2, 0]</pre>
-
-<p>Remarquez que nous avons dû traiter le cas de <code>idx === 0</code> séparément (<code>idx &gt; 0</code>) parce que l’élément sera toujours trouvé, indépendamment du paramètre de <code>fromIndex</code>, si c’est le premier élément du tableau. C’est une différence avec la méthode {{jsxref("Array.prototype.indexOf", "indexOf")}}.</p>
-
-
-<h2 id="Prothèse_démulation_polyfill">Prothèse d'émulation (<em>polyfill</em>)</h2>
-
-<p><code>lastIndexOf</code> a été ajouté avec la cinquième édition du standard ECMA-262 ; il peut donc ne pas être présent dans tous les navigateurs web. Vous pouvez contourner ce problème en insérant le code suivant au début de vos scripts. Il vous permettra d'utiliser <code>lastIndexOf</code> avec les navigateurs qui ne le supportent pas nativement. L'algorithme qui suit est le même que celui spécifié par ECMAScript 5 si {{jsxref("Object", "Object")}}, {{jsxref("TypeError", "TypeError")}}, {{jsxref("Number", "Number")}}, {{jsxref("Math.floor")}}, {{jsxref("Math.abs")}}, et {{jsxref("Math.min")}} n'ont pas été modifiés et conservent leurs valeurs originales.</p>
-
-<pre class="brush: js">// Production steps of ECMA-262, Edition 5, 15.4.4.15
-// Reference: http://es5.github.io/#x15.4.4.15
-if (!Array.prototype.lastIndexOf) {
-  Array.prototype.lastIndexOf = function(searchElement /*, fromIndex*/) {
-    'use strict';
-
-    if (this === void 0 || this === null) {
-      throw new TypeError();
-    }
-
-    var n, k,
-      t = Object(this),
-      len = t.length &gt;&gt;&gt; 0;
-    if (len === 0) {
-      return -1;
-    }
-
-    n = len - 1;
-    if (arguments.length &gt; 1) {
-      n = Number(arguments[1]);
-      if (n != n) {
-        n = 0;
-      }
-      else if (n != 0 &amp;&amp; n != (1 / 0) &amp;&amp; n != -(1 / 0)) {
-        n = (n &gt; 0 || -1) * Math.floor(Math.abs(n));
-      }
-    }
-
-    for (k = n &gt;= 0 ? Math.min(n, len - 1) : len - Math.abs(n); k &gt;= 0; k--) {
-      if (k in t &amp;&amp; t[k] === searchElement) {
-        return k;
-      }
-    }
-    return -1;
-  };
-}</pre>
-
-<p>On notera que cette implémentation vise une compatibilité absolue de <code>lastIndexOf</code> dans Firefox et le moteur JavaScript SpiderMonkey, incluant plusieurs cas très particuliers. Si vous comptez l'utiliser dans une application, vous devriez pouvoir calculer <code>from</code> avec un code beaucoup moins compliqué.</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-15.4.4.15', 'Array.prototype.lastIndexOf')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td>Définition initiale. Implémentée avec JavaScript 1.6.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-array.prototype.lastindexof', 'Array.prototype.lastIndexOf')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-array.prototype.lastindexof', 'Array.prototype.lastIndexOf')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Array.lastIndexOf")}}</p>
-
-<h2 id="Notes_de_compatibilité">Notes de compatibilité</h2>
-
-<ul>
- <li>À partir de Firefox 47 ({{geckoRelease(47)}}), cette méthode ne renverra plus <code>-0</code>. Ainsi, <code>[0].lastIndexOf(0, -0)</code> renverra toujours <code>+0</code> (cf. {{bug(1242043)}}).</li>
-</ul>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Array.prototype.indexOf()")}}</li>
- <li>{{jsxref("TypedArray.prototype.lastIndexOf()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/array/lastindexof/index.md b/files/fr/web/javascript/reference/global_objects/array/lastindexof/index.md
new file mode 100644
index 0000000000..abd24ae929
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/array/lastindexof/index.md
@@ -0,0 +1,141 @@
+---
+title: Array.prototype.lastIndexOf()
+slug: Web/JavaScript/Reference/Global_Objects/Array/lastIndexOf
+tags:
+  - Array
+  - ECMAScript 5
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - polyfill
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/lastIndexOf
+original_slug: Web/JavaScript/Reference/Objets_globaux/Array/lastIndexOf
+---
+{{JSRef}}
+
+La méthode **`lastIndexOf()`** permet de renvoyer le dernier indice pour lequel une valeur donnée est présente dans un tableau. Si la valeur recherchée n'est pas présente, le résultat sera -1. Lors de la recherche, le tableau est parcouru dans le sens des index décroissants, à partir de l'index `indexDébut`.
+
+{{EmbedInteractiveExample("pages/js/array-lastindexof.html")}}
+
+## Syntaxe
+
+    arr.lastIndexOf(élémentRecherché)
+    arr.lastIndexOf(élémentRecherché, indexDébut)
+
+### Paramètres
+
+- `élémentRecherché`
+  - : L'élément à qu'on cherche dans le tableau.
+- `indexDébut` {{optional_inline}}
+  - : L'index à partir duquel commencer la recherche dans le tableau (la recherche s'effectuant à l'envers). Si le paramètre est absent, sa valeur par défaut sera la longueur du tableau moins 1 (c'est-à-dire `arr.length - 1`), le tableau sera alors parcouru dans sa totalité. Si l'index est plus grand ou égal à la longueur du tableau, le tableau sera parcouru en entier. Si l'index est négatif, la recherche commencera d'autant d'éléments à partir de la fin du tableau. À noter que, même si l'index est négatif, la recherche s'effectuera toujours de la fin jusqu'au début du tableau. Si l'index calculé est inférieur à 0, la méthode renverra -1 et le tableau ne sera pas parcouru.
+
+### Valeur de retour
+
+Le dernier index auquel on trouve la valeur dans le tableau, -1 si elle n'est pas trouvée.
+
+## Description
+
+`lastIndexOf` compare `élémentRecherché` aux éléments contenus dans le tableau en utilisant une [égalité stricte](</fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_de_comparaison#.C3.89galit.C3.A9_stricte_(.3D.3D.3D)>) (l'égalité utilisée par l'opérateur ===).
+
+## Exemples
+
+### Utiliser `lastIndexOf`
+
+Dans l'exemple suivant, on utilise `lastIndexOf` afin de situer une valeur dans un tableau.
+
+```js
+var tableau = [2, 5, 9, 2];
+tableau.lastIndexOf(2);     // 3
+tableau.lastIndexOf(7);     // -1
+tableau.lastIndexOf(2, 3);  // 3
+tableau.lastIndexOf(2, 2);  // 0
+tableau.lastIndexOf(2, -2); // 0
+tableau.lastIndexOf(2, -1); // 3
+```
+
+### Trouver toutes les occurrences d'un élément
+
+L’exemple suivant utilise `lastIndexOf` pour trouver tous les index (`indices`) d’un élément dans un tableau donné, en utilisant {{jsxref("Array.prototype.push", "push")}} pour les ajouter dans un autre tableau quand ils sont trouvés.
+
+```js
+var indices = [];
+var tableau = ['a', 'b', 'a', 'c', 'a', 'd'];
+var élément = 'a';
+var idx = tableau.lastIndexOf(élément);
+while (idx !== -1) {
+  indices.push(idx);
+  idx = (idx > 0 ? tableau.lastIndexOf(élément, idx - 1) : -1);
+}
+
+console.log(indices);
+// [4, 2, 0]
+```
+
+Remarquez que nous avons dû traiter le cas de `idx === 0` séparément (`idx > 0`) parce que l’élément sera toujours trouvé, indépendamment du paramètre de `fromIndex`, si c’est le premier élément du tableau. C’est une différence avec la méthode {{jsxref("Array.prototype.indexOf", "indexOf")}}.
+
+## Prothèse d'émulation (_polyfill_)
+
+`lastIndexOf` a été ajouté avec la cinquième édition du standard ECMA-262 ; il peut donc ne pas être présent dans tous les navigateurs web. Vous pouvez contourner ce problème en insérant le code suivant au début de vos scripts. Il vous permettra d'utiliser `lastIndexOf` avec les navigateurs qui ne le supportent pas nativement. L'algorithme qui suit est le même que celui spécifié par ECMAScript 5 si {{jsxref("Object", "Object")}}, {{jsxref("TypeError", "TypeError")}}, {{jsxref("Number", "Number")}}, {{jsxref("Math.floor")}}, {{jsxref("Math.abs")}}, et {{jsxref("Math.min")}} n'ont pas été modifiés et conservent leurs valeurs originales.
+
+```js
+// Production steps of ECMA-262, Edition 5, 15.4.4.15
+// Reference: http://es5.github.io/#x15.4.4.15
+if (!Array.prototype.lastIndexOf) {
+  Array.prototype.lastIndexOf = function(searchElement /*, fromIndex*/) {
+    'use strict';
+
+    if (this === void 0 || this === null) {
+      throw new TypeError();
+    }
+
+    var n, k,
+      t = Object(this),
+      len = t.length >>> 0;
+    if (len === 0) {
+      return -1;
+    }
+
+    n = len - 1;
+    if (arguments.length > 1) {
+      n = Number(arguments[1]);
+      if (n != n) {
+        n = 0;
+      }
+      else if (n != 0 && n != (1 / 0) && n != -(1 / 0)) {
+        n = (n > 0 || -1) * Math.floor(Math.abs(n));
+      }
+    }
+
+    for (k = n >= 0 ? Math.min(n, len - 1) : len - Math.abs(n); k >= 0; k--) {
+      if (k in t && t[k] === searchElement) {
+        return k;
+      }
+    }
+    return -1;
+  };
+}
+```
+
+On notera que cette implémentation vise une compatibilité absolue de `lastIndexOf` dans Firefox et le moteur JavaScript SpiderMonkey, incluant plusieurs cas très particuliers. Si vous comptez l'utiliser dans une application, vous devriez pouvoir calculer `from` avec un code beaucoup moins compliqué.
+
+## Spécifications
+
+| Spécification                                                                                                            | État                         | Commentaires                                          |
+| ------------------------------------------------------------------------------------------------------------------------ | ---------------------------- | ----------------------------------------------------- |
+| {{SpecName('ES5.1', '#sec-15.4.4.15', 'Array.prototype.lastIndexOf')}}                             | {{Spec2('ES5.1')}}     | Définition initiale. Implémentée avec JavaScript 1.6. |
+| {{SpecName('ES6', '#sec-array.prototype.lastindexof', 'Array.prototype.lastIndexOf')}}     | {{Spec2('ES6')}}         |                                                       |
+| {{SpecName('ESDraft', '#sec-array.prototype.lastindexof', 'Array.prototype.lastIndexOf')}} | {{Spec2('ESDraft')}} |                                                       |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Array.lastIndexOf")}}
+
+## Notes de compatibilité
+
+- À partir de Firefox 47 ({{geckoRelease(47)}}), cette méthode ne renverra plus `-0`. Ainsi, `[0].lastIndexOf(0, -0)` renverra toujours `+0` (cf. {{bug(1242043)}}).
+
+## Voir aussi
+
+- {{jsxref("Array.prototype.indexOf()")}}
+- {{jsxref("TypedArray.prototype.lastIndexOf()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/array/length/index.html b/files/fr/web/javascript/reference/global_objects/array/length/index.html
deleted file mode 100644
index 4e05fe8940..0000000000
--- a/files/fr/web/javascript/reference/global_objects/array/length/index.html
+++ /dev/null
@@ -1,120 +0,0 @@
----
-title: Array.prototype.length
-slug: Web/JavaScript/Reference/Global_Objects/Array/length
-tags:
-  - Array
-  - JavaScript
-  - Propriété
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Array/length
-original_slug: Web/JavaScript/Reference/Objets_globaux/Array/length
----
-<div>{{JSRef}}</div>
-
-<p>La propriété <code><strong>length</strong></code> (longueur) est un entier non-signé de 32 bits qui indique le nombre d'éléments présents dans le tableau. Elle est toujours supérieure au plus grand indice du tableau.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/array-length.html")}}</div>
-
-
-
-<h2 id="Description">Description</h2>
-
-<p>La valeur de la propriété <code>length</code> est un entier de signe positif dont la valeur est inférieure à 2 à la puissance 32 (2^32).</p>
-
-<pre class="brush: js notranslate">var tableauA = new Array(4294967296); // 2 à la puissance 32 = 4294967296
-var tableauC = new Array(-100) // une valeur négative
-
-console.log(tableauA.length); // RangeError: Invalid array length
-console.log(tableauC.length); // RangeError: Invalid array length
-
-var tableauB = [];
-tableauB.length = Math.pow(2,32)-1; // On déclare une longueur inférieure à 2 puissance 32
-console.log(tableauB.length); // 4294967295
-</pre>
-
-<p>Vous pouvez modifier la propriété <code>length</code> d'un tableau à loisir pour le tronquer. Quand vous étendez un tableau en modifiant la valeur de sa propriété <code>length</code>, le nombre d'éléments réellement présents dans ce tableau n'augmente pas : par exemple, si vous affectez la valeur 3 à la propriété <code>length</code> d'un tableau alors qu'elle vaut 2, le tableau contiendra toujours seulement 2 éléments. La troisième « case » ne sera pas itérable. De ce fait, la propriété <code>length</code> d'un tableau ne renseigne en rien sur le nombre de valeurs définies dans le tableau. Voir aussi <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array#Relation_entre_length_et_les_propri.C3.A9t.C3.A9s_num.C3.A9riques">la relation entre longueur et propriétés numériques</a>.</p>
-
-<pre class="brush: js notranslate">const arr = [1, 2, 3];
-console.table(arr);
-// [1, 2]
-
-arr.length = 5; // On définit une longueur à 5
-console.table(arr);
-// [1, 2, &lt;3 éléments vides&gt;]
-
-arr.forEach(element =&gt; console.log(element));
-// 1
-// 2
-</pre>
-
-<p>{{js_property_attributes(1,0,0)}}</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Renvoyer_la_longueur_dun_tableau">Renvoyer la longueur d'un tableau</h3>
-
-<pre class="brush: js notranslate">var items = ["chaise", "bureau", "table", "sac"];
-items.length; // 4
-</pre>
-
-<h3 id="Parcourir_un_tableau">Parcourir un tableau</h3>
-
-<p>Dans l'exemple suivant, on itère sur le tableau <code>nombres</code> en utilisant la propriété <code>length</code> afin de connaître son nombre d'élément. La valeur de chaque élément est ensuite multipliée par deux :</p>
-
-<pre class="brush:js notranslate">var nombres = [1,2,3,4,5];
-
-for (var i = 0; i &lt; nombres.length; i++) {
-  nombres[i] *= 2;
-}
-// nombres vaut maintenant [2,4,6,8,10];
-</pre>
-
-<h3 id="Tronquer_un_tableau">Tronquer un tableau</h3>
-
-<p>L'exemple suivant raccourcit le tableau <code>etatsUS</code> à 50 si sa longueur actuelle est supérieure à 50.</p>
-
-<pre class="brush:js notranslate">if (etatsUS.length &gt; 50) {
-   etatsUS.length = 50;
-}</pre>
-
-<h2 id="Specifications">Specifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES1')}}</td>
-   <td>{{Spec2('ES1')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-15.4.5.2', 'Array.length')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-properties-of-array-instances-length', 'Array.length')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-properties-of-array-instances-length', 'Array.length')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Array.length")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Array")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/array/length/index.md b/files/fr/web/javascript/reference/global_objects/array/length/index.md
new file mode 100644
index 0000000000..caa912f99a
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/array/length/index.md
@@ -0,0 +1,99 @@
+---
+title: Array.prototype.length
+slug: Web/JavaScript/Reference/Global_Objects/Array/length
+tags:
+  - Array
+  - JavaScript
+  - Propriété
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/length
+original_slug: Web/JavaScript/Reference/Objets_globaux/Array/length
+---
+{{JSRef}}
+
+La propriété **`length`** (longueur) est un entier non-signé de 32 bits qui indique le nombre d'éléments présents dans le tableau. Elle est toujours supérieure au plus grand indice du tableau.
+
+{{EmbedInteractiveExample("pages/js/array-length.html")}}
+
+## Description
+
+La valeur de la propriété `length` est un entier de signe positif dont la valeur est inférieure à 2 à la puissance 32 (2^32).
+
+```js
+var tableauA = new Array(4294967296); // 2 à la puissance 32 = 4294967296
+var tableauC = new Array(-100) // une valeur négative
+
+console.log(tableauA.length); // RangeError: Invalid array length
+console.log(tableauC.length); // RangeError: Invalid array length
+
+var tableauB = [];
+tableauB.length = Math.pow(2,32)-1; // On déclare une longueur inférieure à 2 puissance 32
+console.log(tableauB.length); // 4294967295
+```
+
+Vous pouvez modifier la propriété `length` d'un tableau à loisir pour le tronquer. Quand vous étendez un tableau en modifiant la valeur de sa propriété `length`, le nombre d'éléments réellement présents dans ce tableau n'augmente pas : par exemple, si vous affectez la valeur 3 à la propriété `length` d'un tableau alors qu'elle vaut 2, le tableau contiendra toujours seulement 2 éléments. La troisième « case » ne sera pas itérable. De ce fait, la propriété `length` d'un tableau ne renseigne en rien sur le nombre de valeurs définies dans le tableau. Voir aussi [la relation entre longueur et propriétés numériques](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array#Relation_entre_length_et_les_propri.C3.A9t.C3.A9s_num.C3.A9riques).
+
+```js
+const arr = [1, 2, 3];
+console.table(arr);
+// [1, 2]
+
+arr.length = 5; // On définit une longueur à 5
+console.table(arr);
+// [1, 2, <3 éléments vides>]
+
+arr.forEach(element => console.log(element));
+// 1
+// 2
+```
+
+{{js_property_attributes(1,0,0)}}
+
+## Exemples
+
+### Renvoyer la longueur d'un tableau
+
+```js
+var items = ["chaise", "bureau", "table", "sac"];
+items.length; // 4
+```
+
+### Parcourir un tableau
+
+Dans l'exemple suivant, on itère sur le tableau `nombres` en utilisant la propriété `length` afin de connaître son nombre d'élément. La valeur de chaque élément est ensuite multipliée par deux :
+
+```js
+var nombres = [1,2,3,4,5];
+
+for (var i = 0; i < nombres.length; i++) {
+  nombres[i] *= 2;
+}
+// nombres vaut maintenant [2,4,6,8,10];
+```
+
+### Tronquer un tableau
+
+L'exemple suivant raccourcit le tableau `etatsUS` à 50 si sa longueur actuelle est supérieure à 50.
+
+```js
+if (etatsUS.length > 50) {
+   etatsUS.length = 50;
+}
+```
+
+## Specifications
+
+| Spécification                                                                                                    | État                         | Commentaires         |
+| ---------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName('ES1')}}                                                                                         | {{Spec2('ES1')}}         | Définition initiale. |
+| {{SpecName('ES5.1', '#sec-15.4.5.2', 'Array.length')}}                                         | {{Spec2('ES5.1')}}     |                      |
+| {{SpecName('ES6', '#sec-properties-of-array-instances-length', 'Array.length')}}     | {{Spec2('ES6')}}         |                      |
+| {{SpecName('ESDraft', '#sec-properties-of-array-instances-length', 'Array.length')}} | {{Spec2('ESDraft')}} |                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Array.length")}}
+
+## Voir aussi
+
+- {{jsxref("Array")}}
diff --git a/files/fr/web/javascript/reference/global_objects/array/map/index.html b/files/fr/web/javascript/reference/global_objects/array/map/index.html
deleted file mode 100644
index 48a9be07f5..0000000000
--- a/files/fr/web/javascript/reference/global_objects/array/map/index.html
+++ /dev/null
@@ -1,210 +0,0 @@
----
-title: Array.prototype.map()
-slug: Web/JavaScript/Reference/Global_Objects/Array/map
-tags:
-  - Array
-  - ECMAScript 5
-  - JavaScript
-  - Méthode
-  - Prototype
-  - Reference
-  - polyfill
-translation_of: Web/JavaScript/Reference/Global_Objects/Array/map
-original_slug: Web/JavaScript/Reference/Objets_globaux/Array/map
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <code><strong>map()</strong></code> crée un nouveau tableau avec les résultats de l'appel d'une fonction fournie sur chaque élément du tableau appelant.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/array-map.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>var nouveauTableau = arr</var>.map(<var>callback</var> [, <var>thisArg</var>])</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>callback</code></dt>
- <dd>La fonction qui est utilisée pour créer un élément du nouveau tableau. Elle utilise trois arguments :
- <dl>
-  <dt><code>valeurCourante</code></dt>
-  <dd>La valeur de l'élément du tableau à traiter.</dd>
-  <dt><code>index</code>{{optional_inline}}</dt>
-  <dd>L'index de l'élément qui est traité par la fonction.</dd>
-  <dt><code>tableau</code>{{optional_inline}}</dt>
-  <dd>Le tableau sur lequel on a appelé la méthode <code>map</code>.</dd>
- </dl>
- </dd>
- <dt><code>thisArg</code> {{optional_inline}}</dt>
- <dd>La valeur à utiliser pour <code>this</code> lors de l'exécution de <code>callback</code>. La valeur par défaut est l'objet global de l'environnement (<code>Window</code> pour un navigateur).</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Un nouveau tableau composé des images de la fonction de rappel.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>Lorsqu'on utilise <code>map</code>, la fonction <code>callback</code> fournie en argument est exécutée une fois pour chacun des éléments du tableau, dans l'ordre du tableau. Chaque résultat de l'opération sur un élément sera un élément du nouveau tableau. La fonction <code>callback</code> est appelée uniquement pour les indices du tableau pour lesquels il y a des valeurs affectées (y compris si cette valeur est {{jsxref("undefined")}}). Si les valeurs ont été supprimées ou qu'elles n'ont jamais été initialisées, la fonction ne sera pas appelée.</p>
-
-<p><code>callback</code> est appelée avec trois arguments : la valeur de l'élément du tableau, l'index de cet élément et l'objet {{jsxref("Array")}} qui est parcouru.</p>
-
-<div class="warning">
-<p><strong>Attention :</strong> <code>map()</code> construit un nouveau tableau. Si on utilise cette méthode sans utiliser le résultat, mieux vaudra utiliser <code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/forEach">forEach</a></code> ou <code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/for...of">for...of</a></code>.  Pour mieux décider si <code>map()</code>est adéquat, regardez si vous utilisez la valeur de retour et/ou si vous renvoyez une valeur avec la fonction <code>callback</code> : si ce n'est pas le cas, il ne faut pas utiliser <code>map()</code>.</p>
-</div>
-
-<p>Si le paramètre <code>thisArg</code> est utilisé, il sera utilisé en tant que <code>this</code> par la fonction <code>callback</code> lorsqu'elle sera appelée. S'il n'est pas utilisé, ce sera la valeur {{jsxref("undefined")}} qui sera utilisée pour définir <code>this</code>. La valeur <code>this</code> finalement prise en compte par la fonction <code>callback</code> est définie <a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/L_op%C3%A9rateur_this">selon les règles usuelles qui déterminent la valeur <code>this</code> observée par une fonction</a>.</p>
-
-<p><code>map</code> ne modifie pas le tableau sur lequel elle est appelée (bien que la fonction <code>callback</code>, si elle est appelée, puisse modifier le tableau).</p>
-
-<p>La liste des éléments à traiter lors de l'opération <code>map</code> est définie avant le premier appel à <code>callback</code>. Les éléments qui sont ajoutés au tableau après que l'appel à <code>map</code> ait été initié ne seront pas traités par la fonction <code>callback</code>. Si des éléments ont été modifiés, la valeur utilisée par la fonction <code>callback</code> sera celle au moment où <code>map</code> est utilisée. Les éléments qui sont supprimés ne sont pas traités. De la même façon, si on applique <code>map</code> sur un tableau dont certains éléments sont indéfinis, le résultat possèdera également les mêmes éléments indéfinis.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Créer_un_tableau_des_racines_carrées_d'un_tableau_de_nombre">Créer un tableau des racines carrées d'un tableau de nombre</h3>
-
-<p>Dans l'exemple suivant, on crée un tableau composé des racines carrées des éléments d'un premier tableau :</p>
-
-<pre class="brush: js">var nombres = [1, 4, 9];
-var racines = nombres.map(Math.sqrt);
-// racines vaut désormais [1, 2, 3]
-// nombres vaut toujours [1, 4, 9]
-</pre>
-
-<h3 id="Créer_un_tableau_de_nombres_avec_une_fonction_à_un_argument">Créer un tableau de nombres avec une fonction à un argument</h3>
-
-<p>Ici, on illustre le fonctionnement de <code>map</code> avec une fonction à un argument. Cet argument sera automatiquement remplacé par chaque élément du tableau au fur et à mesure que <code>map</code> parcourt le tableau :</p>
-
-<pre class="brush: js">var nombres = [1, 4, 9];
-var doubles = nombres.map(function(num) {
-  return num * 2;
-});
-// doubles vaut désormais [2, 8, 18].
-// nombres vaut toujours [1, 4, 9]
-</pre>
-
-<h3 id="Utiliser_map_pour_changer_le_format_d'objets_dans_un_tableau">Utiliser <code>map</code> pour changer le format d'objets dans un tableau</h3>
-
-<p>Dans le code qui suit, on utilise un tableau d'objets pour créer un autre tableau contenant de nouveaux objets dans un autre format :</p>
-
-<pre class="brush: js">var tableauOrig = [{clé:1, valeur:10}, {clé:2, valeur:20}, {clé:3, valeur: 30}];
-var tableauFormaté = tableauOrig.map(obj =&gt; {
-  var rObj = {};
-  rObj[obj.clé] = obj.valeur;
-  return rObj;
-});
-// tableauFormaté vaut maintenant [{1:10}, {2:20}, {3:30}],
-// tableauOrig vaut toujours
-// [{clé:1, valeur:10},
-//  {clé:2, valeur:20},
-//  {clé:3, valeur: 30}
-// ]
-</pre>
-
-<h3 id="Utiliser_map_de_façon_générique">Utiliser <code>map</code> de façon générique</h3>
-
-<p>Dans cet exemple, on voit comment utiliser la fonction <code>map</code> sur une chaîne de caractères pour obtenir un tableau contenant les codes ASCII des valeurs encodées :</p>
-
-<pre class="brush: js">var map = Array.prototype.map;
-var a = map.call('Hello World', function(x) { return x.charCodeAt(0); });
-// a vaut désormais [72, 101, 108, 108, 111, 32, 87, 111, 114, 108, 100]
-</pre>
-
-<h3 id="Utiliser_map_avec_querySelectorAll">Utiliser <code>map</code> avec <code>querySelectorAll</code></h3>
-
-<p>Dans cet exemple, on illustre comment utiliser la méthode map de façon générique, sur un tableau d'objets collectés grâce à <code>querySelectorAll</code> :</p>
-
-<pre class="brush: js">var elems = document.querySelectorAll('select option:checked');
-var values = Array.prototype.map.call(elems, function(obj) {
-  return obj.value;
-});
-</pre>
-
-<p>On aurait également pu utiliser la méthode {{jsxref("Array.from()")}} qui permet de produire un tableau à partir d'un objet itérable.</p>
-
-<h3 id="Un_résultat_inattendu">Un résultat inattendu</h3>
-
-<p><a href="https://www.wirfs-brock.com/allen/posts/166">Exemple inspiré par ce billet</a> (en anglais)</p>
-
-<p>Il est fréquent d'utiliser la fonction <code>callback</code> avec un seul argument (l'élément en cours). Certaines fonctions natives sont également souvent appelées avec un unique argument même si elles peuvent prendre en compte plusieurs arguments. En combinant ces deux « habitudes », on peut obtenir certains résultats inattendus :</p>
-
-<pre class="brush: js">// Si on utilise :
-['1', '2', '3'].map(parseInt);
-// On s'attend à obtenir [1, 2, 3]
-// Le résultat qu'on obtient est en fait [1, NaN, NaN]
-
-// parseInt est souvent utilisé avec un argument mais il
-// peut être utilisé avec deux arguments
-// Le premier correspond à l'expression à parser et le second
-// à la base dans laquelle convertir
-// Array.prototype.map passe 3 arguments à callback :
-// l'élément, l'index et le tableau
-// Le troisième argument sera ignoré par parseInt mais pas le
-// deuxième, ce qui donnera ce résultat étrange
-
-function returnInt(element) {
-  return parseInt(element, 10);
-}
-
-['1', '2', '3'].map(returnInt); // [1, 2, 3]
-// Le résultat qu'on obtient avec la fonction auxiliaire
-
-['1', '2', '3'].map(parseInt);  // [1, NaN, NaN]
-// car map passe trois argument à la fonction et que parseInt
-// considère le second argument comme base.
-// En détails :
-// Premier élément :   "1" à l'indice 0 : parseInt("1",0); donne 1
-// Deuxième élément :  "2" à l'indice 1 : parseInt("2",1); donne NaN
-// Troisième élément : "3" à l'indice 2 : parseInt("3",2); donne NaN
-
-
-// Formulation équivalente plus concise avec
-// une fonction fléchée
-['1', '2', '3'].map( str =&gt; parseInt(str));
-
-// Une autre méthode, plus simple
-['1', '2', '3'].map(Number); // [1, 2, 3]
-// à la différence de parseInt, cela fonctionnera pour les
-// nombres décimaux ou en notation exponentielle
-['1.1', '2.2e2', '3e300'].map(Number); // [1.1, 220, 3e+300]
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-15.4.4.19', 'Array.prototype.map')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td>Définition initiale. Implémentée avec JavaScript 1.6.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-array.prototype.map', 'Array.prototype.map')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-array.prototype.map', 'Array.prototype.map')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Array.map")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Array.prototype.forEach()")}}</li>
- <li>L'objet {{jsxref("Map")}}</li>
- <li>{{jsxref("Array.from()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/array/map/index.md b/files/fr/web/javascript/reference/global_objects/array/map/index.md
new file mode 100644
index 0000000000..b5a56e9db7
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/array/map/index.md
@@ -0,0 +1,191 @@
+---
+title: Array.prototype.map()
+slug: Web/JavaScript/Reference/Global_Objects/Array/map
+tags:
+  - Array
+  - ECMAScript 5
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - polyfill
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/map
+original_slug: Web/JavaScript/Reference/Objets_globaux/Array/map
+---
+{{JSRef}}
+
+La méthode **`map()`** crée un nouveau tableau avec les résultats de l'appel d'une fonction fournie sur chaque élément du tableau appelant.
+
+{{EmbedInteractiveExample("pages/js/array-map.html")}}
+
+## Syntaxe
+
+    var nouveauTableau = arr.map(callback [, thisArg])
+
+### Paramètres
+
+- `callback`
+
+  - : La fonction qui est utilisée pour créer un élément du nouveau tableau. Elle utilise trois arguments :
+
+    - `valeurCourante`
+      - : La valeur de l'élément du tableau à traiter.
+    - `index`{{optional_inline}}
+      - : L'index de l'élément qui est traité par la fonction.
+    - `tableau`{{optional_inline}}
+      - : Le tableau sur lequel on a appelé la méthode `map`.
+
+- `thisArg` {{optional_inline}}
+  - : La valeur à utiliser pour `this` lors de l'exécution de `callback`. La valeur par défaut est l'objet global de l'environnement (`Window` pour un navigateur).
+
+### Valeur de retour
+
+Un nouveau tableau composé des images de la fonction de rappel.
+
+## Description
+
+Lorsqu'on utilise `map`, la fonction `callback` fournie en argument est exécutée une fois pour chacun des éléments du tableau, dans l'ordre du tableau. Chaque résultat de l'opération sur un élément sera un élément du nouveau tableau. La fonction `callback` est appelée uniquement pour les indices du tableau pour lesquels il y a des valeurs affectées (y compris si cette valeur est {{jsxref("undefined")}}). Si les valeurs ont été supprimées ou qu'elles n'ont jamais été initialisées, la fonction ne sera pas appelée.
+
+`callback` est appelée avec trois arguments : la valeur de l'élément du tableau, l'index de cet élément et l'objet {{jsxref("Array")}} qui est parcouru.
+
+> **Attention :** `map()` construit un nouveau tableau. Si on utilise cette méthode sans utiliser le résultat, mieux vaudra utiliser [`forEach`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/forEach) ou [`for...of`](/fr/docs/Web/JavaScript/Reference/Instructions/for...of).  Pour mieux décider si `map()`est adéquat, regardez si vous utilisez la valeur de retour et/ou si vous renvoyez une valeur avec la fonction `callback` : si ce n'est pas le cas, il ne faut pas utiliser `map()`.
+
+Si le paramètre `thisArg` est utilisé, il sera utilisé en tant que `this` par la fonction `callback` lorsqu'elle sera appelée. S'il n'est pas utilisé, ce sera la valeur {{jsxref("undefined")}} qui sera utilisée pour définir `this`. La valeur `this` finalement prise en compte par la fonction `callback` est définie [selon les règles usuelles qui déterminent la valeur `this` observée par une fonction](/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/L_op%C3%A9rateur_this).
+
+`map` ne modifie pas le tableau sur lequel elle est appelée (bien que la fonction `callback`, si elle est appelée, puisse modifier le tableau).
+
+La liste des éléments à traiter lors de l'opération `map` est définie avant le premier appel à `callback`. Les éléments qui sont ajoutés au tableau après que l'appel à `map` ait été initié ne seront pas traités par la fonction `callback`. Si des éléments ont été modifiés, la valeur utilisée par la fonction `callback` sera celle au moment où `map` est utilisée. Les éléments qui sont supprimés ne sont pas traités. De la même façon, si on applique `map` sur un tableau dont certains éléments sont indéfinis, le résultat possèdera également les mêmes éléments indéfinis.
+
+## Exemples
+
+### Créer un tableau des racines carrées d'un tableau de nombre
+
+Dans l'exemple suivant, on crée un tableau composé des racines carrées des éléments d'un premier tableau :
+
+```js
+var nombres = [1, 4, 9];
+var racines = nombres.map(Math.sqrt);
+// racines vaut désormais [1, 2, 3]
+// nombres vaut toujours [1, 4, 9]
+```
+
+### Créer un tableau de nombres avec une fonction à un argument
+
+Ici, on illustre le fonctionnement de `map` avec une fonction à un argument. Cet argument sera automatiquement remplacé par chaque élément du tableau au fur et à mesure que `map` parcourt le tableau :
+
+```js
+var nombres = [1, 4, 9];
+var doubles = nombres.map(function(num) {
+  return num * 2;
+});
+// doubles vaut désormais [2, 8, 18].
+// nombres vaut toujours [1, 4, 9]
+```
+
+### Utiliser `map` pour changer le format d'objets dans un tableau
+
+Dans le code qui suit, on utilise un tableau d'objets pour créer un autre tableau contenant de nouveaux objets dans un autre format :
+
+```js
+var tableauOrig = [{clé:1, valeur:10}, {clé:2, valeur:20}, {clé:3, valeur: 30}];
+var tableauFormaté = tableauOrig.map(obj => {
+  var rObj = {};
+  rObj[obj.clé] = obj.valeur;
+  return rObj;
+});
+// tableauFormaté vaut maintenant [{1:10}, {2:20}, {3:30}],
+// tableauOrig vaut toujours
+// [{clé:1, valeur:10},
+//  {clé:2, valeur:20},
+//  {clé:3, valeur: 30}
+// ]
+```
+
+### Utiliser `map` de façon générique
+
+Dans cet exemple, on voit comment utiliser la fonction `map` sur une chaîne de caractères pour obtenir un tableau contenant les codes ASCII des valeurs encodées :
+
+```js
+var map = Array.prototype.map;
+var a = map.call('Hello World', function(x) { return x.charCodeAt(0); });
+// a vaut désormais [72, 101, 108, 108, 111, 32, 87, 111, 114, 108, 100]
+```
+
+### Utiliser `map` avec `querySelectorAll`
+
+Dans cet exemple, on illustre comment utiliser la méthode map de façon générique, sur un tableau d'objets collectés grâce à `querySelectorAll` :
+
+```js
+var elems = document.querySelectorAll('select option:checked');
+var values = Array.prototype.map.call(elems, function(obj) {
+  return obj.value;
+});
+```
+
+On aurait également pu utiliser la méthode {{jsxref("Array.from()")}} qui permet de produire un tableau à partir d'un objet itérable.
+
+### Un résultat inattendu
+
+[Exemple inspiré par ce billet](https://www.wirfs-brock.com/allen/posts/166) (en anglais)
+
+Il est fréquent d'utiliser la fonction `callback` avec un seul argument (l'élément en cours). Certaines fonctions natives sont également souvent appelées avec un unique argument même si elles peuvent prendre en compte plusieurs arguments. En combinant ces deux « habitudes », on peut obtenir certains résultats inattendus :
+
+```js
+// Si on utilise :
+['1', '2', '3'].map(parseInt);
+// On s'attend à obtenir [1, 2, 3]
+// Le résultat qu'on obtient est en fait [1, NaN, NaN]
+
+// parseInt est souvent utilisé avec un argument mais il
+// peut être utilisé avec deux arguments
+// Le premier correspond à l'expression à parser et le second
+// à la base dans laquelle convertir
+// Array.prototype.map passe 3 arguments à callback :
+// l'élément, l'index et le tableau
+// Le troisième argument sera ignoré par parseInt mais pas le
+// deuxième, ce qui donnera ce résultat étrange
+
+function returnInt(element) {
+  return parseInt(element, 10);
+}
+
+['1', '2', '3'].map(returnInt); // [1, 2, 3]
+// Le résultat qu'on obtient avec la fonction auxiliaire
+
+['1', '2', '3'].map(parseInt);  // [1, NaN, NaN]
+// car map passe trois argument à la fonction et que parseInt
+// considère le second argument comme base.
+// En détails :
+// Premier élément :   "1" à l'indice 0 : parseInt("1",0); donne 1
+// Deuxième élément :  "2" à l'indice 1 : parseInt("2",1); donne NaN
+// Troisième élément : "3" à l'indice 2 : parseInt("3",2); donne NaN
+
+
+// Formulation équivalente plus concise avec
+// une fonction fléchée
+['1', '2', '3'].map( str => parseInt(str));
+
+// Une autre méthode, plus simple
+['1', '2', '3'].map(Number); // [1, 2, 3]
+// à la différence de parseInt, cela fonctionnera pour les
+// nombres décimaux ou en notation exponentielle
+['1.1', '2.2e2', '3e300'].map(Number); // [1.1, 220, 3e+300]
+```
+
+## Spécifications
+
+| Spécification                                                                                        | État                         | Commentaires                                          |
+| ---------------------------------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- |
+| {{SpecName('ES5.1', '#sec-15.4.4.19', 'Array.prototype.map')}}                 | {{Spec2('ES5.1')}}     | Définition initiale. Implémentée avec JavaScript 1.6. |
+| {{SpecName('ES6', '#sec-array.prototype.map', 'Array.prototype.map')}}         | {{Spec2('ES6')}}         |                                                       |
+| {{SpecName('ESDraft', '#sec-array.prototype.map', 'Array.prototype.map')}} | {{Spec2('ESDraft')}} |                                                       |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Array.map")}}
+
+## Voir aussi
+
+- {{jsxref("Array.prototype.forEach()")}}
+- L'objet {{jsxref("Map")}}
+- {{jsxref("Array.from()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/array/of/index.html b/files/fr/web/javascript/reference/global_objects/array/of/index.html
deleted file mode 100644
index 68508d936f..0000000000
--- a/files/fr/web/javascript/reference/global_objects/array/of/index.html
+++ /dev/null
@@ -1,102 +0,0 @@
----
-title: Array.of()
-slug: Web/JavaScript/Reference/Global_Objects/Array/of
-tags:
-  - Array
-  - ECMAScript 2015
-  - JavaScript
-  - Méthode
-  - polyfill
-translation_of: Web/JavaScript/Reference/Global_Objects/Array/of
-original_slug: Web/JavaScript/Reference/Objets_globaux/Array/of
----
-<div>{{JSRef}}</div>
-
-<p>La methode <code><strong>Array.of()</strong></code> permet de créer une nouvelle instance d'objet <code>Array</code> à partir d'un nombre variable d'arguments, quels que soient leur nombre ou leur type.</p>
-
-<p>La différence entre <code><strong>Array.of()</strong></code> et le constructeur <code><strong>Array</strong></code> se situe dans la gestion de d'arguments entiers : <strong><code>Array.of(7)</code></strong> crée un tableau avec un seul élément, 7, tandis que <strong><code>Array(7)</code></strong> produit un tableau avec 7 éléments vides (à ne pas confondre avec des éléments qui auraient explicitement la valeur <code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/undefined">undefined</a></code>).</p>
-
-<pre class="brush: js">Array.of(7);       // [7]
-Array.of(1, 2, 3); // [1, 2, 3]
-
-Array(7);          // un tableau avec 7 emplacements vides
-Array(1, 2, 3);    // [1, 2, 3]
-</pre>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">Array.of(<em>element0[, element1[, ...[, elementN]]]</em>)
-</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><em><code>element0</code>, <code>element1</code>, ..., <code>elementN</code></em></dt>
- <dd>Les éléments avec lesquels on souhaite construire le nouveau tableau.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Une nouvelle instance de {{jsxref("Array")}}.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>Cette fonction fait partie du standard ECMAScript 2015. Pour plus d'informations, voir les pages sur <a href="https://gist.github.com/rwaldron/1074126">la proposition pour <code>Array.of</code> et <code>Array.from</code></a> ainsi que la page sur le <a href="https://gist.github.com/rwaldron/3186576">fragment d'émulation pour <code>Array.of</code></a>.</p>
-
-<pre class="brush: js">Array.of(7);       // [7]
-Array.of(1, 2, 3); // [1, 2, 3]
-
-Array(7);          // [ , , , , , , ]
-Array(1, 2, 3);    // [1, 2, 3]
-</pre>
-
-<h2 id="Exemples">Exemples</h2>
-
-<pre class="brush: js">Array.of(1);         // [1]
-Array.of(1, 2, 3);   // [1, 2, 3]
-Array.of(undefined); // [undefined]
-</pre>
-
-<h2 id="Prothèse_d'émulation_(polyfill)">Prothèse d'émulation (<em>polyfill</em>)</h2>
-
-<p>Exécuter ce code avant tout autre code permettra de créer la méthode <strong><code>Array.of()</code></strong> si elle n'est pas prise en charge nativement.</p>
-
-<pre class="brush: js">if (!Array.of) {
-  Array.of = function() {
-    return Array.prototype.slice.call(arguments);
-  };
-}</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-array.of', 'Array.of')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-array.of', 'Array.of')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Array.of")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Array", "Array")}}</li>
- <li>{{jsxref("Array/from", "Array.from")}}</li>
- <li>{{jsxref("TypedArray.of()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/array/of/index.md b/files/fr/web/javascript/reference/global_objects/array/of/index.md
new file mode 100644
index 0000000000..cbc2b0c156
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/array/of/index.md
@@ -0,0 +1,87 @@
+---
+title: Array.of()
+slug: Web/JavaScript/Reference/Global_Objects/Array/of
+tags:
+  - Array
+  - ECMAScript 2015
+  - JavaScript
+  - Méthode
+  - polyfill
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/of
+original_slug: Web/JavaScript/Reference/Objets_globaux/Array/of
+---
+{{JSRef}}
+
+La methode **`Array.of()`** permet de créer une nouvelle instance d'objet `Array` à partir d'un nombre variable d'arguments, quels que soient leur nombre ou leur type.
+
+La différence entre **`Array.of()`** et le constructeur **`Array`** se situe dans la gestion de d'arguments entiers : **`Array.of(7)`** crée un tableau avec un seul élément, 7, tandis que **`Array(7)`** produit un tableau avec 7 éléments vides (à ne pas confondre avec des éléments qui auraient explicitement la valeur [`undefined`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/undefined)).
+
+```js
+Array.of(7);       // [7]
+Array.of(1, 2, 3); // [1, 2, 3]
+
+Array(7);          // un tableau avec 7 emplacements vides
+Array(1, 2, 3);    // [1, 2, 3]
+```
+
+## Syntaxe
+
+    Array.of(element0[, element1[, ...[, elementN]]])
+
+### Paramètres
+
+- _`element0`, `element1`, ..., `elementN`_
+  - : Les éléments avec lesquels on souhaite construire le nouveau tableau.
+
+### Valeur de retour
+
+Une nouvelle instance de {{jsxref("Array")}}.
+
+## Description
+
+Cette fonction fait partie du standard ECMAScript 2015. Pour plus d'informations, voir les pages sur [la proposition pour `Array.of` et `Array.from`](https://gist.github.com/rwaldron/1074126) ainsi que la page sur le [fragment d'émulation pour `Array.of`](https://gist.github.com/rwaldron/3186576).
+
+```js
+Array.of(7);       // [7]
+Array.of(1, 2, 3); // [1, 2, 3]
+
+Array(7);          // [ , , , , , , ]
+Array(1, 2, 3);    // [1, 2, 3]
+```
+
+## Exemples
+
+```js
+Array.of(1);         // [1]
+Array.of(1, 2, 3);   // [1, 2, 3]
+Array.of(undefined); // [undefined]
+```
+
+## Prothèse d'émulation (_polyfill_)
+
+Exécuter ce code avant tout autre code permettra de créer la méthode **`Array.of()`** si elle n'est pas prise en charge nativement.
+
+```js
+if (!Array.of) {
+  Array.of = function() {
+    return Array.prototype.slice.call(arguments);
+  };
+}
+```
+
+## Spécifications
+
+| Spécification                                                        | État                         | Commentaires         |
+| -------------------------------------------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName('ES2015', '#sec-array.of', 'Array.of')}} | {{Spec2('ES2015')}}     | Définition initiale. |
+| {{SpecName('ESDraft', '#sec-array.of', 'Array.of')}} | {{Spec2('ESDraft')}} |                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Array.of")}}
+
+## Voir aussi
+
+- {{jsxref("Array", "Array")}}
+- {{jsxref("Array/from", "Array.from")}}
+- {{jsxref("TypedArray.of()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/array/pop/index.html b/files/fr/web/javascript/reference/global_objects/array/pop/index.html
deleted file mode 100644
index 6a5345dd88..0000000000
--- a/files/fr/web/javascript/reference/global_objects/array/pop/index.html
+++ /dev/null
@@ -1,106 +0,0 @@
----
-title: Array.prototype.pop()
-slug: Web/JavaScript/Reference/Global_Objects/Array/pop
-tags:
-  - Array
-  - JavaScript
-  - Méthode
-  - Prototype
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Array/pop
-original_slug: Web/JavaScript/Reference/Objets_globaux/Array/pop
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <code><strong>pop()</strong></code> supprime le <strong>dernier</strong> élément d'un tableau et retourne cet élément. Cette méthode modifie la longueur du tableau.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/array-pop.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>arr</var>.pop()</pre>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>L'élément qui a été retiré du tableau. Si le tableau est vide, elle renvoie {{jsxref("undefined")}}.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>La méthode <code>pop()</code> supprime le dernier élément d'un tableau et retourne cette valeur.</p>
-
-<p><code>pop()</code> est volontairement générique ; cette méthode peut être {{jsxref("Function.call", "appelée")}} ou {{jsxref("Function.apply", "appliquée")}} pour des objets ressemblant à des tableaux. Les objets qui ne contiennent pas une propriété <code>length</code> reflétant la fin d'une série de propriétés consécutives numérotées peuvent se comporter bizarrement.</p>
-
-<p>Si vous appelez <code>pop()</code> sur un tableau vide, il renverra la valeur {{jsxref("undefined")}}.</p>
-
-<div class="blockIndicator note">
-<p><strong>Note :</strong> La méthode {{jsxref("Array.prototype.shift()")}} possède un comportement analogue mais retire le <em>premier</em> élément du tableau.</p>
-</div>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Supprimer_le_dernier_élément_d'un_tableau">Supprimer le dernier élément d'un tableau</h3>
-
-<p>Le code suivant crée le tableau <code>mesPoissons</code> qui contient quatre éléments puis supprime le dernier élément.</p>
-
-<pre class="brush:js">var mesPoissons = ["angel", "clown", "mandarin", "sturgeon"];
-
-var popped = mesPoissons.pop();
-
-console.table(mesPoissons); // angel, clown, madarin
-console.log(popped);        // sturgeon</pre>
-
-<h3 id="Utiliser_apply()_ou_call()_sur_les_objets_semblables_aux_tableaux">Utiliser <code>apply()</code> ou <code>call()</code> sur les objets semblables aux tableaux</h3>
-
-<p>Le code suivant crée un objet <code>mesPoissons</code> semblable à un tableau, qui contient 4 propriétés indexées avec des nombres et une propriété <code>length</code>. On utilise la méthode {{jsxref("Function.call()")}} pour invoquer <code>pop()</code> sur cet objet :</p>
-
-<pre class="brush: js">var mesPoissons = {0: 'angel', 1: 'clown', 2: 'mandarin', 3: 'sturgeon', length: 4};
-
-var popped = Array.prototype.pop.call(mesPoissons); // on aurait pu utiliser apply()
-console.log(mesPoissons); // {0: 'angel', 1: 'clown', 2: 'mandarin', length: 3}
-console.log(popped);      // 'sturgeon'
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES3')}}</td>
-   <td>{{Spec2('ES3')}}</td>
-   <td>Définition initiale. Implémentée avec JavaScript 1.2.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-15.4.4.6', 'Array.prototype.pop')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-array.prototype.pop', 'Array.prototype.pop')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-array.prototype.pop', 'Array.prototype.pop')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Array.pop")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Array.prototype.push()")}}</li>
- <li>{{jsxref("Array.prototype.shift()")}}</li>
- <li>{{jsxref("Array.prototype.unshift()")}}</li>
- <li>{{jsxref("Array.prototype.splice()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/array/pop/index.md b/files/fr/web/javascript/reference/global_objects/array/pop/index.md
new file mode 100644
index 0000000000..7b9862f6fb
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/array/pop/index.md
@@ -0,0 +1,82 @@
+---
+title: Array.prototype.pop()
+slug: Web/JavaScript/Reference/Global_Objects/Array/pop
+tags:
+  - Array
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/pop
+original_slug: Web/JavaScript/Reference/Objets_globaux/Array/pop
+---
+{{JSRef}}
+
+La méthode **`pop()`** supprime le **dernier** élément d'un tableau et retourne cet élément. Cette méthode modifie la longueur du tableau.
+
+{{EmbedInteractiveExample("pages/js/array-pop.html")}}
+
+## Syntaxe
+
+    arr.pop()
+
+### Valeur de retour
+
+L'élément qui a été retiré du tableau. Si le tableau est vide, elle renvoie {{jsxref("undefined")}}.
+
+## Description
+
+La méthode `pop()` supprime le dernier élément d'un tableau et retourne cette valeur.
+
+`pop()` est volontairement générique ; cette méthode peut être {{jsxref("Function.call", "appelée")}} ou {{jsxref("Function.apply", "appliquée")}} pour des objets ressemblant à des tableaux. Les objets qui ne contiennent pas une propriété `length` reflétant la fin d'une série de propriétés consécutives numérotées peuvent se comporter bizarrement.
+
+Si vous appelez `pop()` sur un tableau vide, il renverra la valeur {{jsxref("undefined")}}.
+
+> **Note :** La méthode {{jsxref("Array.prototype.shift()")}} possède un comportement analogue mais retire le _premier_ élément du tableau.
+
+## Exemples
+
+### Supprimer le dernier élément d'un tableau
+
+Le code suivant crée le tableau `mesPoissons` qui contient quatre éléments puis supprime le dernier élément.
+
+```js
+var mesPoissons = ["angel", "clown", "mandarin", "sturgeon"];
+
+var popped = mesPoissons.pop();
+
+console.table(mesPoissons); // angel, clown, madarin
+console.log(popped);        // sturgeon
+```
+
+### Utiliser `apply()` ou `call()` sur les objets semblables aux tableaux
+
+Le code suivant crée un objet `mesPoissons` semblable à un tableau, qui contient 4 propriétés indexées avec des nombres et une propriété `length`. On utilise la méthode {{jsxref("Function.call()")}} pour invoquer `pop()` sur cet objet :
+
+```js
+var mesPoissons = {0: 'angel', 1: 'clown', 2: 'mandarin', 3: 'sturgeon', length: 4};
+
+var popped = Array.prototype.pop.call(mesPoissons); // on aurait pu utiliser apply()
+console.log(mesPoissons); // {0: 'angel', 1: 'clown', 2: 'mandarin', length: 3}
+console.log(popped);      // 'sturgeon'
+```
+
+## Spécifications
+
+| Spécification                                                                                        | État                         | Commentaires                                          |
+| ---------------------------------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- |
+| {{SpecName('ES3')}}                                                                             | {{Spec2('ES3')}}         | Définition initiale. Implémentée avec JavaScript 1.2. |
+| {{SpecName('ES5.1', '#sec-15.4.4.6', 'Array.prototype.pop')}}                     | {{Spec2('ES5.1')}}     |                                                       |
+| {{SpecName('ES6', '#sec-array.prototype.pop', 'Array.prototype.pop')}}         | {{Spec2('ES6')}}         |                                                       |
+| {{SpecName('ESDraft', '#sec-array.prototype.pop', 'Array.prototype.pop')}} | {{Spec2('ESDraft')}} |                                                       |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Array.pop")}}
+
+## Voir aussi
+
+- {{jsxref("Array.prototype.push()")}}
+- {{jsxref("Array.prototype.shift()")}}
+- {{jsxref("Array.prototype.unshift()")}}
+- {{jsxref("Array.prototype.splice()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/array/push/index.html b/files/fr/web/javascript/reference/global_objects/array/push/index.html
deleted file mode 100644
index c7f18ce86b..0000000000
--- a/files/fr/web/javascript/reference/global_objects/array/push/index.html
+++ /dev/null
@@ -1,139 +0,0 @@
----
-title: Array.prototype.push()
-slug: Web/JavaScript/Reference/Global_Objects/Array/push
-tags:
-  - Array
-  - JavaScript
-  - Méthode
-  - Prototype
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Array/push
-original_slug: Web/JavaScript/Reference/Objets_globaux/Array/push
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <code><strong>push()</strong></code> ajoute un ou plusieurs éléments à la fin d'un tableau et retourne la nouvelle taille du tableau.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/array-push.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>arr</var>.push(<var>élément1</var>, ..., <var>élémentN</var>)</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>élément1, ...,élémentN</code></dt>
- <dd>Les éléments à ajouter à la fin du tableau.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>La nouvelle valeur de la propriété {{jsxref("Array.length", "length")}} de l'objet sur lequel la méthode a été appelée.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>La méthode <code>push</code> permet d'ajouter des valeurs à un tableau.</p>
-
-<p><code>push</code> est une méthode générique. Cette méthode peut ainsi être utilisée avec les méthodes {{jsxref("Function.call()")}} ou {{jsxref("Function.apply()")}} sur des objets similaires aux tableaux.</p>
-
-<p>La méthode <code>push</code> se base sur la propriété <code>length</code> pour déterminer à partir de quel index les valeurs données doivent être insérées. Si la propriété <code>length</code> ne peut pas être convertie en nombre, l'index utilisé est 0. Si la propriété <code>length</code> n'est pas définie, elle est alors créée.</p>
-
-<p>Bien que <code>push</code> soit une méthode générique, elle ne peut pas être utilisée sur les chaînes de caractères ou sur l'objet <code>arguments</code> car ils sont immuables.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Ajouter_des_éléments_à_un_tableau">Ajouter des éléments à un tableau</h3>
-
-<p>Le code suivant crée un tableau <code>sports</code> contenant à sa création deux éléments, auxquels sont ajoutés deux nouveaux éléments. La variable <code>total</code> contient la nouvelle taille du tableau.</p>
-
-<pre class="brush: js">var sports = ["plongée", "baseball"];
-var total = sports.push("football", "tennis");
-
-console.log(sports); // ["plongée", "baseball", "football", "tennis"]
-console.log(total);  // 4
-</pre>
-
-<h3 id="Fusionner_deux_tableaux">Fusionner deux tableaux</h3>
-
-<p>Dans l'exemple qui suit, on utilise la méthode {{jsxref("Function.apply()")}} pour ajouter les différents éléments d'un second tableau</p>
-
-<pre class="brush: js">var legumes = ['navet', 'pomme de terre'];
-var autresLegumes = ['céleri', 'radis'];
-
-// On fusionne les deux tableaux
-// Équivalent à legumes.push('céleri', 'radis');
-Array.prototype.push.apply(legumes, autresLegumes);
-
-console.log(legumes); // ['navet', 'pomme de terre', 'céleri', 'radis']</pre>
-
-<div class="note">
-<p><strong>Note :</strong> Attention à ne pas utiliser cette méthode lorsque les tableaux sont très grands car une fonction n'accepte qu'un nombre limité d'arguments. Voir {{jsxref("Function.apply","apply()")}} pour plus d'informations sur ces limites.</p>
-</div>
-
-<h3 id="Utiliser_un_objet_comme_on_utiliserait_un_tableau">Utiliser un objet comme on utiliserait un tableau</h3>
-
-<p>Comme nous l'avons vu auparavant, <code>push</code> est une méthode générique et nous pouvons donc utiliser <code>Array.prototype.push</code> sur les objets. On notera qu'il n'est pas nécessaire de stocker un ensemble d'objets. En fait, on enregistre l'ensemble dans l'objet et on utilise <code>call</code> sur <code>Array.prototype.push</code> :</p>
-
-<pre class="brush: js">var obj = {
-    length: 0,
-
-    ajoutElem: function ajoutElem (elem) {
-        // obj.length est automatiquement incrémenté
-        // quand on ajoute un élément
-        [].push.call(this, elem);
-    }
-};
-
-// Ajoutons quelques objets vides pour illustrer
-// l'exemple.
-obj.ajoutElem({});
-obj.ajoutElem({});
-console.log(obj.length);
-// → 2
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES3')}}</td>
-   <td>{{Spec2('ES3')}}</td>
-   <td>Définition initiale. Implémentée avec JavaScript 1.2.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-15.4.4.7', 'Array.prototype.push')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-array.prototype.push', 'Array.prototype.push')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-array.prototype.push', 'Array.prototype.push')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Array.push")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Array.prototype.pop()")}}</li>
- <li>{{jsxref("Array.prototype.shift()")}}</li>
- <li>{{jsxref("Array.prototype.unshift()")}}</li>
- <li>{{jsxref("Array.prototype.concat()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/array/push/index.md b/files/fr/web/javascript/reference/global_objects/array/push/index.md
new file mode 100644
index 0000000000..0472582660
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/array/push/index.md
@@ -0,0 +1,114 @@
+---
+title: Array.prototype.push()
+slug: Web/JavaScript/Reference/Global_Objects/Array/push
+tags:
+  - Array
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/push
+original_slug: Web/JavaScript/Reference/Objets_globaux/Array/push
+---
+{{JSRef}}
+
+La méthode **`push()`** ajoute un ou plusieurs éléments à la fin d'un tableau et retourne la nouvelle taille du tableau.
+
+{{EmbedInteractiveExample("pages/js/array-push.html")}}
+
+## Syntaxe
+
+    arr.push(élément1, ..., élémentN)
+
+### Paramètres
+
+- `élément1, ...,élémentN`
+  - : Les éléments à ajouter à la fin du tableau.
+
+### Valeur de retour
+
+La nouvelle valeur de la propriété {{jsxref("Array.length", "length")}} de l'objet sur lequel la méthode a été appelée.
+
+## Description
+
+La méthode `push` permet d'ajouter des valeurs à un tableau.
+
+`push` est une méthode générique. Cette méthode peut ainsi être utilisée avec les méthodes {{jsxref("Function.call()")}} ou {{jsxref("Function.apply()")}} sur des objets similaires aux tableaux.
+
+La méthode `push` se base sur la propriété `length` pour déterminer à partir de quel index les valeurs données doivent être insérées. Si la propriété `length` ne peut pas être convertie en nombre, l'index utilisé est 0. Si la propriété `length` n'est pas définie, elle est alors créée.
+
+Bien que `push` soit une méthode générique, elle ne peut pas être utilisée sur les chaînes de caractères ou sur l'objet `arguments` car ils sont immuables.
+
+## Exemples
+
+### Ajouter des éléments à un tableau
+
+Le code suivant crée un tableau `sports` contenant à sa création deux éléments, auxquels sont ajoutés deux nouveaux éléments. La variable `total` contient la nouvelle taille du tableau.
+
+```js
+var sports = ["plongée", "baseball"];
+var total = sports.push("football", "tennis");
+
+console.log(sports); // ["plongée", "baseball", "football", "tennis"]
+console.log(total);  // 4
+```
+
+### Fusionner deux tableaux
+
+Dans l'exemple qui suit, on utilise la méthode {{jsxref("Function.apply()")}} pour ajouter les différents éléments d'un second tableau
+
+```js
+var legumes = ['navet', 'pomme de terre'];
+var autresLegumes = ['céleri', 'radis'];
+
+// On fusionne les deux tableaux
+// Équivalent à legumes.push('céleri', 'radis');
+Array.prototype.push.apply(legumes, autresLegumes);
+
+console.log(legumes); // ['navet', 'pomme de terre', 'céleri', 'radis']
+```
+
+> **Note :** Attention à ne pas utiliser cette méthode lorsque les tableaux sont très grands car une fonction n'accepte qu'un nombre limité d'arguments. Voir {{jsxref("Function.apply","apply()")}} pour plus d'informations sur ces limites.
+
+### Utiliser un objet comme on utiliserait un tableau
+
+Comme nous l'avons vu auparavant, `push` est une méthode générique et nous pouvons donc utiliser `Array.prototype.push` sur les objets. On notera qu'il n'est pas nécessaire de stocker un ensemble d'objets. En fait, on enregistre l'ensemble dans l'objet et on utilise `call` sur `Array.prototype.push` :
+
+```js
+var obj = {
+    length: 0,
+
+    ajoutElem: function ajoutElem (elem) {
+        // obj.length est automatiquement incrémenté
+        // quand on ajoute un élément
+        [].push.call(this, elem);
+    }
+};
+
+// Ajoutons quelques objets vides pour illustrer
+// l'exemple.
+obj.ajoutElem({});
+obj.ajoutElem({});
+console.log(obj.length);
+// → 2
+```
+
+## Spécifications
+
+| Spécification                                                                                        | État                         | Commentaires                                          |
+| ---------------------------------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- |
+| {{SpecName('ES3')}}                                                                             | {{Spec2('ES3')}}         | Définition initiale. Implémentée avec JavaScript 1.2. |
+| {{SpecName('ES5.1', '#sec-15.4.4.7', 'Array.prototype.push')}}                 | {{Spec2('ES5.1')}}     |                                                       |
+| {{SpecName('ES6', '#sec-array.prototype.push', 'Array.prototype.push')}}     | {{Spec2('ES6')}}         |                                                       |
+| {{SpecName('ESDraft', '#sec-array.prototype.push', 'Array.prototype.push')}} | {{Spec2('ESDraft')}} |                                                       |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Array.push")}}
+
+## Voir aussi
+
+- {{jsxref("Array.prototype.pop()")}}
+- {{jsxref("Array.prototype.shift()")}}
+- {{jsxref("Array.prototype.unshift()")}}
+- {{jsxref("Array.prototype.concat()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/array/reduce/index.html b/files/fr/web/javascript/reference/global_objects/array/reduce/index.html
deleted file mode 100644
index 6ec6af3488..0000000000
--- a/files/fr/web/javascript/reference/global_objects/array/reduce/index.html
+++ /dev/null
@@ -1,402 +0,0 @@
----
-title: Array.prototype.reduce()
-slug: Web/JavaScript/Reference/Global_Objects/Array/Reduce
-tags:
-  - Array
-  - ECMAScript 5
-  - JavaScript
-  - Méthode
-  - Prototype
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Array/Reduce
-original_slug: Web/JavaScript/Reference/Objets_globaux/Array/reduce
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <code><strong>reduce()</strong></code> applique une fonction qui est un « accumulateur » et qui traite chaque valeur d'une liste (de la gauche vers la droite) afin de la réduire à une seule valeur.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/array-reduce.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>arr</var>.reduce(<var>callback</var>)
-<var>arr</var>.reduce(<var>callback</var>, valeurInitiale)</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>callback</code></dt>
- <dd>La fonction à exécuter sur chaque valeur de la liste (sauf le premier si aucune <code>valeurInitiale</code> n'est fournie), elle prend quatre arguments en entrée :
- <dl>
-  <dt><code>accumulateur</code></dt>
-  <dd>La valeur précédemment retournée par le dernier appel du callback, ou <code>valeurInitiale</code>, si elle est fournie (voir ci-après) (c'est la valeur « accumulée » au fur et à mesure des appels</dd>
-  <dt><code>valeurCourante</code></dt>
-  <dd>La valeur de l'élément courant actuellement manipulé dans le tableau.</dd>
-  <dt><code>index</code>{{optional_inline}}</dt>
-  <dd>L'index de l'élément courant actuellement manipulé dans le tableau.</dd>
-  <dt><code>array</code>{{optional_inline}}</dt>
-  <dd>Le tableau sur lequel on a appelé la méthode <code>reduce()</code>.</dd>
- </dl>
- </dd>
- <dt><code>valeurInitiale</code>{{optional_inline}}</dt>
- <dd>Une valeur utilisée comme premier argument lors du premier appel de la fonction <code>callback</code>. Si aucune valeur initiale n'est fournie, le premier élément du tableau est utilisé (et la boucle de traitement ne le parcourera pas). Si on appelle <code>reduce()</code> sur un tableau vide sans fournir de valeur initiale, on aura une erreur.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>La valeur obtenue grâce à la fonction de réduction.</p>
-
-<h2 id="Description">Description</h2>
-
-<p><code>reduce()</code> exécute la fonction <code>callback</code> une fois pour chaque élément présent dans le tableau et ignore les éléments vides du tableau. La fonction <code>callback</code> utilise quatre arguments :</p>
-
-<ol>
- <li>L'accumulateur (la valeur retournée par le précédent appel de la fonction <code>callback</code>), ou la valeur initiale s'il sagit du premier appel ;</li>
- <li>la valeur de l'élément courant ;</li>
- <li>l'index de l'élément courant ;</li>
- <li>le tableau parcouru par la méthode.</li>
-</ol>
-
-<p>La première fois que la fonction <code>callback</code> est appelée, <code>valeurInitiale</code> et <code>valeurCourante</code> peuvent correspondre à un ou deux éléments. Si <code>valeurInitiale</code> est fournie dans l'appel de <code>reduce()</code>, alors <code>accumulateur</code> sera égale à <code>valeurInitiale</code> et <code>valeurCourante</code> sera égale à la première valeur de la liste. Si <code>valeurInitiale</code> n'est pas fournie, alors <code>accumulateur</code> sera égale à la première valeur de la liste, et <code>valeurCourante</code> sera alors égale à la seconde.</p>
-
-<p>Autrement dit, si <code>valeurInitiale</code> n'est pas fournie, <code>reduce</code> exécutera la fonction de rappel à partir de l'indice 1 et la première valeur du tableau (d'indice 0) sera utilisée pour <code>valeurInitiale</code>.</p>
-
-<p>En considérant le code suivant :</p>
-
-<pre class="brush:js">[0, 1, 2, 3, 4].reduce(function(accumulateur, valeurCourante, index, array){
-  return accumulateur + valeurCourante;
-});
-</pre>
-
-<p>La fonction <code>callback</code> sera appelée quatre fois, avec les arguments et les valeurs de retour de chaque appel suivant :</p>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col"></th>
-   <th scope="col"><code>accumulateur</code></th>
-   <th scope="col"><code>valeurCourante</code></th>
-   <th scope="col"><code>index</code></th>
-   <th scope="col"><code>array</code></th>
-   <th scope="col">valeur retournée</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <th scope="row">premier appel</th>
-   <td><code>0</code></td>
-   <td><code>1</code></td>
-   <td><code>1</code></td>
-   <td><code>[0,1,2,3,4]</code></td>
-   <td><code>1</code></td>
-  </tr>
-  <tr>
-   <th scope="row">deuxième appel</th>
-   <td><code>1</code></td>
-   <td><code>2</code></td>
-   <td><code>2</code></td>
-   <td><code>[0,1,2,3,4]</code></td>
-   <td><code>3</code></td>
-  </tr>
-  <tr>
-   <th scope="row">troisième appel</th>
-   <td><code>3</code></td>
-   <td><code>3</code></td>
-   <td><code>3</code></td>
-   <td><code>[0,1,2,3,4]</code></td>
-   <td><code>6</code></td>
-  </tr>
-  <tr>
-   <th scope="row">quatrième appel</th>
-   <td><code>6</code></td>
-   <td><code>4</code></td>
-   <td><code>4</code></td>
-   <td><code>[0,1,2,3,4]</code></td>
-   <td><code>10</code></td>
-  </tr>
- </tbody>
-</table>
-
-<p>La valeur retournée par <code>reduce()</code> sera alors celle du dernier appel de la callback (ici <code>10</code>).</p>
-
-<p>Il est aussi possible d'utiliser une {{jsxref("Fonctions/Fonctions_fléchées","fonction fléchée","",1)}} au lieu d'une fonction classique. Le code suivant, par exemple, produit le même résultat que l'exemple précédent :</p>
-
-<pre class="brush: js">[0, 1, 2, 3, 4].reduce(
-  (accumulateur, valeurCourante) =&gt; accumulateur + valeurCourante;
-);</pre>
-
-<p>Si on fournit une valeur initiale comme second argument à l'appel de <code>reduce()</code>, le résultat sera alors le suivant :</p>
-
-<pre class="brush:js">[0, 1, 2, 3, 4].reduce(function(accumulateur, valeurCourante, index, array){
-  return accumulateur + valeurCourante;
-}, 10);
-</pre>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col"></th>
-   <th scope="col"><code>accumulateur</code></th>
-   <th scope="col"><code>valeurCourante</code></th>
-   <th scope="col"><code>index</code></th>
-   <th scope="col"><code>array</code></th>
-   <th scope="col">valeur retournée</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <th scope="row">premier appel</th>
-   <td><code>10</code></td>
-   <td><code>0</code></td>
-   <td><code>0</code></td>
-   <td><code>[0,1,2,3,4]</code></td>
-   <td><code>10</code></td>
-  </tr>
-  <tr>
-   <th scope="row">deuxième appel</th>
-   <td><code>10</code></td>
-   <td><code>1</code></td>
-   <td><code>1</code></td>
-   <td><code>[0,1,2,3,4]</code></td>
-   <td><code>11</code></td>
-  </tr>
-  <tr>
-   <th scope="row">troisième appel</th>
-   <td><code>11</code></td>
-   <td><code>2</code></td>
-   <td><code>2</code></td>
-   <td><code>[0,1,2,3,4]</code></td>
-   <td><code>13</code></td>
-  </tr>
-  <tr>
-   <th scope="row">quatrième appel</th>
-   <td><code>13</code></td>
-   <td><code>3</code></td>
-   <td><code>3</code></td>
-   <td><code>[0,1,2,3,4]</code></td>
-   <td><code>16</code></td>
-  </tr>
-  <tr>
-   <th scope="row">cinquième appel</th>
-   <td><code>16</code></td>
-   <td><code>4</code></td>
-   <td><code>4</code></td>
-   <td><code>[0,1,2,3,4]</code></td>
-   <td><code>20</code></td>
-  </tr>
- </tbody>
-</table>
-
-<p>Ici, la valeur renvoyée par <code>reduce()</code> serait <code>20</code>.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Additionner_toutes_les_valeurs_dun_tableau">Additionner toutes les valeurs d'un tableau</h3>
-
-<pre class="brush:js">var total = [0, 1, 2, 3].reduce((a, b)=&gt; a + b,0);
-// total == 6
-</pre>
-
-<h3 id="Additionner_les_valeurs_dune_propriétés_pour_un_tableau_dobjets">Additionner les valeurs d'une propriétés pour un tableau d'objets</h3>
-
-<p>Pour additionner les valeurs d'une propriété donnée des objets d'un tableau, il sera nécessaire de fournir une valeur initiale afin que tous les éléments soient parcourus :</p>
-
-<pre class="brush: js">var valeurInitiale = 0;
-var somme = [{x: 1}, {x:2}, {x:3}].reduce(function (accumulateur, valeurCourante) {
-    return accumulateur + valeurCourante.x;
-}, valeurInitiale);
-
-console.log(somme); // affiche 6 dans la console
-</pre>
-
-<p>On peut également écrire une version plus concise avec les fonctions fléchées :</p>
-
-<pre class="brush: js">var valeurInitiale = 0;
-var somme = [{x: 1}, {x:2}, {x:3}].reduce(
-    (accumulateur, valeurCourante) =&gt; accumulateur + valeurCourante.x
-    , valeurInitiale
-);
-
-console.log(somme); // affiche 6 dans la console</pre>
-
-<h3 id="Aplatir_une_liste_de_listes">Aplatir une liste de listes</h3>
-
-<pre class="brush:js">var applati = [[0, 1], [2, 3], [4, 5]].reduce(function(a, b) {
-    return a.concat(b);
-});
-// applati vaut [0, 1, 2, 3, 4, 5]
-</pre>
-
-<h3 id="Utiliser_le_paramètre_valeurInitiale">Utiliser le paramètre <code>valeurInitiale</code></h3>
-
-<pre class="brush: js">var amis = [
-  { "nom": "Quentin", "livres": ["City Hall", "Harry Potter"]},
-  { "nom": "Alice", "livres": ["L'Avare", "Les Fleurs du Mal"]}
-]
-
-var tousLivres = amis.reduce(function(prev, curr) {
-  return [...prev, ...curr.livres];
-}, ["Perceval"]);
-
-// tousLivres = ["Perceval", "City Hall", "Harry Potter",
-//               "L'Avare", "Les Fleurs du Mal"]</pre>
-
-<h3 id="Exécuter_une_suite_de_promesses_stockées_dans_un_tableau">Exécuter une suite de promesses stockées dans un tableau</h3>
-
-<pre class="brush: js">/**
- * Exécuter un enchaînement de promesses à partir d'un tableau
- *
- * @param {array} arr - un tableau de promesses
- * @return {Object} un objet Promise
- */
-function runPromiseInSequense(arr) {
-  return arr.reduce((promiseChain, currentPromise) =&gt; {
-    return promiseChain.then((chainedResult) =&gt; {
-      return currentPromise(chainedResult)
-        .then((res) =&gt; res)
-    })
-  }, Promise.resolve());
-}
-
-// promise function 1
-function p1() {
-  return new Promise((resolve, reject) =&gt; {
-    resolve(5);
-  });
-}
-
-// promise function 2
-function p2(a) {
-  return new Promise((resolve, reject) =&gt; {
-    resolve(a * 2);
-  });
-}
-
-// promise function 3
-function p3(a) {
-  return new Promise((resolve, reject) =&gt; {
-    resolve(a * 3);
-  });
-}
-
-const promiseArr = [p1, p2, p3];
-runPromiseInSequense(promiseArr)
-  .then((res) =&gt; {
-    console.log(res);   // 30
-  });
-</pre>
-
-<h3 id="Regrouper_des_objets_selon_une_propriété">Regrouper des objets selon une propriété</h3>
-
-<pre class="brush: js">var personnes = [
-  { nom: "Alice", age: 21 },
-  { nom: "Bob", age: 20 },
-  { nom: "Charlie", age: 20 }
-];
-
-function groupBy(tableauObjets, propriete){
-  return tableauObjets.reduce(function (acc, obj) {
-    var cle = obj[propriete];
-    if(!acc[cle]){
-      acc[cle] = [];
-    }
-    acc[cle].push(obj);
-    return acc;
-  }, {});
-}
-
-var personnesParAge = groupBy(personnes, "age");
-// personnesParAge aura la valeur :
-// {
-//    20: [
-//       { nom: "Bob", age: 20 },
-//       { nom: "Charlie", age: 20 }
-//    ],
-//    21: [{ nom: "Alice", age: 21 }]
-// }
-</pre>
-
-<h3 id="Composition_de_fonctions">Composition de fonctions</h3>
-
-<pre class="brush: js">// Les briques de base que nous allons composer
-const double = x =&gt; x + x;
-const triple = x =&gt; 3 * x;
-const quadruple = x =&gt; 4 * x;
-
-// Une fonction qui permet d'appliquer une composition
-const pipe = (...functions) =&gt; input =&gt; functions.reduce(
-    (acc, fn) =&gt; fn(acc),
-    input
-);
-
-// On crée des fonctions pour multiplier par un facteur donné
-const multiply6 = pipe(double, triple);
-const multiply9 = pipe(triple, triple);
-const multiply16 = pipe(quadruple, quadruple);
-const multiply24 = pipe(double, triple, quadruple);
-
-// Utilisation
-multiply6(6); // 36
-multiply9(9); // 81
-multiply16(16); // 256
-multiply24(10); // 240
-</pre>
-
-<h3 id="Retirer_les_doublons_dun_tableau">Retirer les doublons d'un tableau</h3>
-
-<h4 id="Avec_ECMAScript_2015_ES6">Avec ECMAScript 2015 (ES6)</h4>
-
-<pre class="brush: js">let tableauAvecDoublons = [1, 2, 3, 1, 4, 5, 4, 6];
-let tableauSansDoublon = Array.from(new Set(tableauAvecDoublons));
-console.table(tableauSansDoublon); // [1, 2, 3, 4, 5, 6]</pre>
-
-<h4 id="Avec_reduce">Avec <code>reduce()</code></h4>
-
-<pre class="brush: js">var tableauAvecDoublons = [1, 2, 3, 1, 4, 5, 4, 6];
-var tableauSansDoublon = tableauAvecDoublon.reduce(function (acc, valCourante) {
-  if(acc.indexOf(valCourante) === -1) {
-    acc.push(valCourante);
-  }
-  return acc
-}, []);
-
-console.log(tableauSansDoublon); // [1, 2, 3, 4, 5, 6]
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-15.4.4.21', 'Array.prototype.reduce()')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td>Définition initiale.<br>
-    Implémenté dans JavaScript 1.8</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-array.prototype.reduce', 'Array.prototype.reduce()')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-array.prototype.reduce', 'Array.prototype.reduce()')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Array.reduce")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Array.prototype.reduceRight()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/array/reduce/index.md b/files/fr/web/javascript/reference/global_objects/array/reduce/index.md
new file mode 100644
index 0000000000..183efdeb71
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/array/reduce/index.md
@@ -0,0 +1,393 @@
+---
+title: Array.prototype.reduce()
+slug: Web/JavaScript/Reference/Global_Objects/Array/Reduce
+tags:
+  - Array
+  - ECMAScript 5
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/Reduce
+original_slug: Web/JavaScript/Reference/Objets_globaux/Array/reduce
+---
+{{JSRef}}
+
+La méthode **`reduce()`** applique une fonction qui est un « accumulateur » et qui traite chaque valeur d'une liste (de la gauche vers la droite) afin de la réduire à une seule valeur.
+
+{{EmbedInteractiveExample("pages/js/array-reduce.html")}}
+
+## Syntaxe
+
+    arr.reduce(callback)
+    arr.reduce(callback, valeurInitiale)
+
+### Paramètres
+
+- `callback`
+
+  - : La fonction à exécuter sur chaque valeur de la liste (sauf le premier si aucune `valeurInitiale` n'est fournie), elle prend quatre arguments en entrée :
+
+    - `accumulateur`
+      - : La valeur précédemment retournée par le dernier appel du callback, ou `valeurInitiale`, si elle est fournie (voir ci-après) (c'est la valeur « accumulée » au fur et à mesure des appels
+    - `valeurCourante`
+      - : La valeur de l'élément courant actuellement manipulé dans le tableau.
+    - `index`{{optional_inline}}
+      - : L'index de l'élément courant actuellement manipulé dans le tableau.
+    - `array`{{optional_inline}}
+      - : Le tableau sur lequel on a appelé la méthode `reduce()`.
+
+- `valeurInitiale`{{optional_inline}}
+  - : Une valeur utilisée comme premier argument lors du premier appel de la fonction `callback`. Si aucune valeur initiale n'est fournie, le premier élément du tableau est utilisé (et la boucle de traitement ne le parcourera pas). Si on appelle `reduce()` sur un tableau vide sans fournir de valeur initiale, on aura une erreur.
+
+### Valeur de retour
+
+La valeur obtenue grâce à la fonction de réduction.
+
+## Description
+
+`reduce()` exécute la fonction `callback` une fois pour chaque élément présent dans le tableau et ignore les éléments vides du tableau. La fonction `callback` utilise quatre arguments :
+
+1.  L'accumulateur (la valeur retournée par le précédent appel de la fonction `callback`), ou la valeur initiale s'il sagit du premier appel ;
+2.  la valeur de l'élément courant ;
+3.  l'index de l'élément courant ;
+4.  le tableau parcouru par la méthode.
+
+La première fois que la fonction `callback` est appelée, `valeurInitiale` et `valeurCourante` peuvent correspondre à un ou deux éléments. Si `valeurInitiale` est fournie dans l'appel de `reduce()`, alors `accumulateur` sera égale à `valeurInitiale` et `valeurCourante` sera égale à la première valeur de la liste. Si `valeurInitiale` n'est pas fournie, alors `accumulateur` sera égale à la première valeur de la liste, et `valeurCourante` sera alors égale à la seconde.
+
+Autrement dit, si `valeurInitiale` n'est pas fournie, `reduce` exécutera la fonction de rappel à partir de l'indice 1 et la première valeur du tableau (d'indice 0) sera utilisée pour `valeurInitiale`.
+
+En considérant le code suivant :
+
+```js
+[0, 1, 2, 3, 4].reduce(function(accumulateur, valeurCourante, index, array){
+  return accumulateur + valeurCourante;
+});
+```
+
+La fonction `callback` sera appelée quatre fois, avec les arguments et les valeurs de retour de chaque appel suivant :
+
+<table class="standard-table">
+  <thead>
+    <tr>
+      <th scope="col"></th>
+      <th scope="col"><code>accumulateur</code></th>
+      <th scope="col"><code>valeurCourante</code></th>
+      <th scope="col"><code>index</code></th>
+      <th scope="col"><code>array</code></th>
+      <th scope="col">valeur retournée</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <th scope="row">premier appel</th>
+      <td><code>0</code></td>
+      <td><code>1</code></td>
+      <td><code>1</code></td>
+      <td><code>[0,1,2,3,4]</code></td>
+      <td><code>1</code></td>
+    </tr>
+    <tr>
+      <th scope="row">deuxième appel</th>
+      <td><code>1</code></td>
+      <td><code>2</code></td>
+      <td><code>2</code></td>
+      <td><code>[0,1,2,3,4]</code></td>
+      <td><code>3</code></td>
+    </tr>
+    <tr>
+      <th scope="row">troisième appel</th>
+      <td><code>3</code></td>
+      <td><code>3</code></td>
+      <td><code>3</code></td>
+      <td><code>[0,1,2,3,4]</code></td>
+      <td><code>6</code></td>
+    </tr>
+    <tr>
+      <th scope="row">quatrième appel</th>
+      <td><code>6</code></td>
+      <td><code>4</code></td>
+      <td><code>4</code></td>
+      <td><code>[0,1,2,3,4]</code></td>
+      <td><code>10</code></td>
+    </tr>
+  </tbody>
+</table>
+
+La valeur retournée par `reduce()` sera alors celle du dernier appel de la callback (ici `10`).
+
+Il est aussi possible d'utiliser une {{jsxref("Fonctions/Fonctions_fléchées","fonction fléchée","",1)}} au lieu d'une fonction classique. Le code suivant, par exemple, produit le même résultat que l'exemple précédent :
+
+```js
+[0, 1, 2, 3, 4].reduce(
+  (accumulateur, valeurCourante) => accumulateur + valeurCourante;
+);
+```
+
+Si on fournit une valeur initiale comme second argument à l'appel de `reduce()`, le résultat sera alors le suivant :
+
+```js
+[0, 1, 2, 3, 4].reduce(function(accumulateur, valeurCourante, index, array){
+  return accumulateur + valeurCourante;
+}, 10);
+```
+
+<table class="standard-table">
+  <thead>
+    <tr>
+      <th scope="col"></th>
+      <th scope="col"><code>accumulateur</code></th>
+      <th scope="col"><code>valeurCourante</code></th>
+      <th scope="col"><code>index</code></th>
+      <th scope="col"><code>array</code></th>
+      <th scope="col">valeur retournée</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <th scope="row">premier appel</th>
+      <td><code>10</code></td>
+      <td><code>0</code></td>
+      <td><code>0</code></td>
+      <td><code>[0,1,2,3,4]</code></td>
+      <td><code>10</code></td>
+    </tr>
+    <tr>
+      <th scope="row">deuxième appel</th>
+      <td><code>10</code></td>
+      <td><code>1</code></td>
+      <td><code>1</code></td>
+      <td><code>[0,1,2,3,4]</code></td>
+      <td><code>11</code></td>
+    </tr>
+    <tr>
+      <th scope="row">troisième appel</th>
+      <td><code>11</code></td>
+      <td><code>2</code></td>
+      <td><code>2</code></td>
+      <td><code>[0,1,2,3,4]</code></td>
+      <td><code>13</code></td>
+    </tr>
+    <tr>
+      <th scope="row">quatrième appel</th>
+      <td><code>13</code></td>
+      <td><code>3</code></td>
+      <td><code>3</code></td>
+      <td><code>[0,1,2,3,4]</code></td>
+      <td><code>16</code></td>
+    </tr>
+    <tr>
+      <th scope="row">cinquième appel</th>
+      <td><code>16</code></td>
+      <td><code>4</code></td>
+      <td><code>4</code></td>
+      <td><code>[0,1,2,3,4]</code></td>
+      <td><code>20</code></td>
+    </tr>
+  </tbody>
+</table>
+
+Ici, la valeur renvoyée par `reduce()` serait `20`.
+
+## Exemples
+
+### Additionner toutes les valeurs d'un tableau
+
+```js
+var total = [0, 1, 2, 3].reduce((a, b)=> a + b,0);
+// total == 6
+```
+
+### Additionner les valeurs d'une propriétés pour un tableau d'objets
+
+Pour additionner les valeurs d'une propriété donnée des objets d'un tableau, il sera nécessaire de fournir une valeur initiale afin que tous les éléments soient parcourus :
+
+```js
+var valeurInitiale = 0;
+var somme = [{x: 1}, {x:2}, {x:3}].reduce(function (accumulateur, valeurCourante) {
+    return accumulateur + valeurCourante.x;
+}, valeurInitiale);
+
+console.log(somme); // affiche 6 dans la console
+```
+
+On peut également écrire une version plus concise avec les fonctions fléchées :
+
+```js
+var valeurInitiale = 0;
+var somme = [{x: 1}, {x:2}, {x:3}].reduce(
+    (accumulateur, valeurCourante) => accumulateur + valeurCourante.x
+    , valeurInitiale
+);
+
+console.log(somme); // affiche 6 dans la console
+```
+
+### Aplatir une liste de listes
+
+```js
+var applati = [[0, 1], [2, 3], [4, 5]].reduce(function(a, b) {
+    return a.concat(b);
+});
+// applati vaut [0, 1, 2, 3, 4, 5]
+```
+
+### Utiliser le paramètre `valeurInitiale`
+
+```js
+var amis = [
+  { "nom": "Quentin", "livres": ["City Hall", "Harry Potter"]},
+  { "nom": "Alice", "livres": ["L'Avare", "Les Fleurs du Mal"]}
+]
+
+var tousLivres = amis.reduce(function(prev, curr) {
+  return [...prev, ...curr.livres];
+}, ["Perceval"]);
+
+// tousLivres = ["Perceval", "City Hall", "Harry Potter",
+//               "L'Avare", "Les Fleurs du Mal"]
+```
+
+### Exécuter une suite de promesses stockées dans un tableau
+
+```js
+/**
+ * Exécuter un enchaînement de promesses à partir d'un tableau
+ *
+ * @param {array} arr - un tableau de promesses
+ * @return {Object} un objet Promise
+ */
+function runPromiseInSequense(arr) {
+  return arr.reduce((promiseChain, currentPromise) => {
+    return promiseChain.then((chainedResult) => {
+      return currentPromise(chainedResult)
+        .then((res) => res)
+    })
+  }, Promise.resolve());
+}
+
+// promise function 1
+function p1() {
+  return new Promise((resolve, reject) => {
+    resolve(5);
+  });
+}
+
+// promise function 2
+function p2(a) {
+  return new Promise((resolve, reject) => {
+    resolve(a * 2);
+  });
+}
+
+// promise function 3
+function p3(a) {
+  return new Promise((resolve, reject) => {
+    resolve(a * 3);
+  });
+}
+
+const promiseArr = [p1, p2, p3];
+runPromiseInSequense(promiseArr)
+  .then((res) => {
+    console.log(res);   // 30
+  });
+```
+
+### Regrouper des objets selon une propriété
+
+```js
+var personnes = [
+  { nom: "Alice", age: 21 },
+  { nom: "Bob", age: 20 },
+  { nom: "Charlie", age: 20 }
+];
+
+function groupBy(tableauObjets, propriete){
+  return tableauObjets.reduce(function (acc, obj) {
+    var cle = obj[propriete];
+    if(!acc[cle]){
+      acc[cle] = [];
+    }
+    acc[cle].push(obj);
+    return acc;
+  }, {});
+}
+
+var personnesParAge = groupBy(personnes, "age");
+// personnesParAge aura la valeur :
+// {
+//    20: [
+//       { nom: "Bob", age: 20 },
+//       { nom: "Charlie", age: 20 }
+//    ],
+//    21: [{ nom: "Alice", age: 21 }]
+// }
+```
+
+### Composition de fonctions
+
+```js
+// Les briques de base que nous allons composer
+const double = x => x + x;
+const triple = x => 3 * x;
+const quadruple = x => 4 * x;
+
+// Une fonction qui permet d'appliquer une composition
+const pipe = (...functions) => input => functions.reduce(
+    (acc, fn) => fn(acc),
+    input
+);
+
+// On crée des fonctions pour multiplier par un facteur donné
+const multiply6 = pipe(double, triple);
+const multiply9 = pipe(triple, triple);
+const multiply16 = pipe(quadruple, quadruple);
+const multiply24 = pipe(double, triple, quadruple);
+
+// Utilisation
+multiply6(6); // 36
+multiply9(9); // 81
+multiply16(16); // 256
+multiply24(10); // 240
+```
+
+### Retirer les doublons d'un tableau
+
+#### Avec ECMAScript 2015 (ES6)
+
+```js
+let tableauAvecDoublons = [1, 2, 3, 1, 4, 5, 4, 6];
+let tableauSansDoublon = Array.from(new Set(tableauAvecDoublons));
+console.table(tableauSansDoublon); // [1, 2, 3, 4, 5, 6]
+```
+
+#### Avec `reduce()`
+
+```js
+var tableauAvecDoublons = [1, 2, 3, 1, 4, 5, 4, 6];
+var tableauSansDoublon = tableauAvecDoublon.reduce(function (acc, valCourante) {
+  if(acc.indexOf(valCourante) === -1) {
+    acc.push(valCourante);
+  }
+  return acc
+}, []);
+
+console.log(tableauSansDoublon); // [1, 2, 3, 4, 5, 6]
+```
+
+## Spécifications
+
+| Spécification                                                                                                | État                         | Commentaires                                        |
+| ------------------------------------------------------------------------------------------------------------ | ---------------------------- | --------------------------------------------------- |
+| {{SpecName('ES5.1', '#sec-15.4.4.21', 'Array.prototype.reduce()')}}                     | {{Spec2('ES5.1')}}     | Définition initiale. Implémenté dans JavaScript 1.8 |
+| {{SpecName('ES6', '#sec-array.prototype.reduce', 'Array.prototype.reduce()')}}     | {{Spec2('ES6')}}         |                                                     |
+| {{SpecName('ESDraft', '#sec-array.prototype.reduce', 'Array.prototype.reduce()')}} | {{Spec2('ESDraft')}} |                                                     |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Array.reduce")}}
+
+## Voir aussi
+
+- {{jsxref("Array.prototype.reduceRight()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/array/reduceright/index.html b/files/fr/web/javascript/reference/global_objects/array/reduceright/index.html
deleted file mode 100644
index 63222a2191..0000000000
--- a/files/fr/web/javascript/reference/global_objects/array/reduceright/index.html
+++ /dev/null
@@ -1,279 +0,0 @@
----
-title: Array.prototype.reduceRight()
-slug: Web/JavaScript/Reference/Global_Objects/Array/ReduceRight
-tags:
-  - Array
-  - ECMAScript 5
-  - JavaScript
-  - Méthode
-  - Prototype
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Array/ReduceRight
-original_slug: Web/JavaScript/Reference/Objets_globaux/Array/reduceRight
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <code><strong>reduceRight()</strong></code> applique une fonction sur un accumulateur et chaque valeur d'un tableau (de la droite vers la gauche) de sorte à réduire le tableau en une seule valeur.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/array-reduce-right.html")}}</div>
-
-
-
-<p>Voir également {{jsxref("Array.prototype.reduce()")}} pour une méthode qui réduit de gauche à droite.</p>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>arr</var>.reduceRight(<var>callback</var>[, valeurInitiale])</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>callback</code></dt>
- <dd>La fonction à éxécuter sur chaque valeur de la liste. Elle utilise quatres arguments :
- <dl>
-  <dt><code>accumulator</code></dt>
-  <dd>La valeur précédemment retournée par le dernier appel de la fonction <code>callback</code>, ou <code>valeurInitial</code> si elle est fournie. (Voir ci-après.)</dd>
-  <dt><code>valeurCourante</code></dt>
-  <dd>La valeur de l'élément courant dans le tableau.</dd>
-  <dt><code>index</code></dt>
-  <dd>L'index de l'élément du tableau actuellement manipulé.</dd>
-  <dt><code>array</code></dt>
-  <dd>Le tableau sur lequel <code>reduceRight()</code> est appelée.</dd>
- </dl>
- </dd>
- <dt><code>valeurInitiale</code> {{optional_inline}}</dt>
- <dd>C'est l'objet à utiliser comme accumulateur/premier argument lors du premier appel de la fonction <code>callback</code>. Si aucune valeur n'est fournie, c'est le dernier élément du tableau qui sera utilisé. Si on appelle <code>reduce()</code> ou <code>reduceRight()</code> sur un tableau vide sans fournir de valeur initiale, on aura une exception {{jsxref("TypeError")}}.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>La valeur obtenue grâce à la fonction de réduction.</p>
-
-<h2 id="Description">Description</h2>
-
-<p><code>reduceRight</code> exécute la fonction <code>callback</code> une fois pour chaque élément présent dans le tableau, les éléments vides sont ignorés. La fonction <code>callback</code> utilise quatre arguments : la valeur initiale (ou la valeur retournée par le précédent appel de la fonction<code> callback</code>), la valeur de l'élément courant, l'index de l'élément courant, et le tableau qui est parcouru.</p>
-
-<p>L'usage de <code>reduceRight</code> avec définition d'un <code>callback</code> devrait ressembler à ceci :</p>
-
-<pre class="brush: js">array.reduceRight(function(accumulator, valeurCourante, index, array) {
-    // ...
-});</pre>
-
-<p>La première fois que la fonction de callback est appelée, <code>accumulator</code> et <code>valeurCourante</code> peuvent correspondre à un ou deux éléments. Si <code>valeurInitiale</code> est fournie lors de l'appel à <code>reduceRight</code>, alors <code>accumulator</code> sera égale à <code>valeurInitiale</code> et <code>valeurCourante</code> sera égale à la dernière valeur de la liste. Si <code>valeurInitiale</code> n'est pas fournie, alors <code>accumulator</code> sera égale à la dernière valeur de la liste, et <code>valeurCourante</code> sera alors égale à l'avant-dernière valeur du tableau.</p>
-
-<p>Si on utilise la méthode <code>reduceRight</code> de la façon suivante :</p>
-
-<pre class="brush: js">[0, 1, 2, 3, 4].reduceRight(function(accumulator, valeurCourante, index, array) {
-    return accumulator + valeurCourante;
-});
-</pre>
-
-<p>La fonction <code>callback</code> sera appelée quatre fois, avec les arguments et les valeurs de retour de chaque appel suivant :</p>
-
-<table>
- <thead>
-  <tr>
-   <th scope="col"><code>callback</code></th>
-   <th scope="col"><code>accumulator</code></th>
-   <th scope="col"><code>valeurCourante</code></th>
-   <th scope="col"><code>index</code></th>
-   <th scope="col"><code>array</code></th>
-   <th scope="col">Valeur renvoyée</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <th scope="row">premier appel</th>
-   <td>4</td>
-   <td>3</td>
-   <td>3</td>
-   <td><code>[0,1,2,3,4]</code></td>
-   <td>7</td>
-  </tr>
-  <tr>
-   <th scope="row">second appel</th>
-   <td>7</td>
-   <td><code>2</code></td>
-   <td><code>2</code></td>
-   <td><code>[0,1,2,3,4]</code></td>
-   <td>9</td>
-  </tr>
-  <tr>
-   <th scope="row">troisième appel</th>
-   <td>9</td>
-   <td>1</td>
-   <td>1</td>
-   <td><code>[0,1,2,3,4]</code></td>
-   <td>10</td>
-  </tr>
-  <tr>
-   <th scope="row">quatrième appel</th>
-   <td>10</td>
-   <td>0</td>
-   <td>0</td>
-   <td><code>[0,1,2,3,4]</code></td>
-   <td><code>10</code></td>
-  </tr>
- </tbody>
-</table>
-
-<p>La valeur retournée par <code>reduceRight</code> sera alors celle du dernier appel de la fonction <code>callback</code> (<code>10</code>).</p>
-
-<p>Si vous fournissez une valeur initiale comme second argument à l'appel de <code>reduceRight</code>, le résultat sera alors le suivant :</p>
-
-<pre class="brush: js">[0, 1, 2, 3, 4].reduceRight(function(accumulator, valeurCourante, index, array) {
-    return accumulator + valeurCourante;
-}, 10);
-</pre>
-
-<table>
- <thead>
-  <tr>
-   <th scope="col"></th>
-   <th scope="col"><code>accumulator</code></th>
-   <th scope="col"><code>valeurCourante</code></th>
-   <th scope="col"><code>index</code></th>
-   <th scope="col"><code>array</code></th>
-   <th scope="col">Valeur renvoyée</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <th scope="row">premier appel</th>
-   <td><code>10</code></td>
-   <td>4</td>
-   <td>4</td>
-   <td><code>[0,1,2,3,4]</code></td>
-   <td><code>14</code></td>
-  </tr>
-  <tr>
-   <th scope="row">second appel</th>
-   <td>14</td>
-   <td>3</td>
-   <td>3</td>
-   <td><code>[0,1,2,3,4]</code></td>
-   <td><code>17</code></td>
-  </tr>
-  <tr>
-   <th scope="row">troisième appel</th>
-   <td>17</td>
-   <td><code>2</code></td>
-   <td><code>2</code></td>
-   <td><code>[0,1,2,3,4]</code></td>
-   <td><code>19</code></td>
-  </tr>
-  <tr>
-   <th scope="row">quatrième appel</th>
-   <td>19</td>
-   <td>1</td>
-   <td>1</td>
-   <td><code>[0,1,2,3,4]</code></td>
-   <td>20</td>
-  </tr>
-  <tr>
-   <th scope="row">cinquième appel</th>
-   <td>20</td>
-   <td>0</td>
-   <td>0</td>
-   <td><code>[0,1,2,3,4]</code></td>
-   <td><code>20</code></td>
-  </tr>
- </tbody>
-</table>
-
-<p>La valeur renvoyée par <code>reduceRight</code> sera ici <code>20</code>.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Additionner_toutes_les_valeurs_d'une_liste">Additionner toutes les valeurs d'une liste</h3>
-
-<pre class="brush: js">var total = [0, 1, 2, 3].reduceRight(function(a, b) {
-    return a + b;
-});
-// total == 6
-</pre>
-
-<h3 id="Aplatir_une_liste_de_listes">Aplatir une liste de listes</h3>
-
-<pre class="brush: js">var aplati = [[0, 1], [2, 3], [4, 5]].reduceRight(function(a, b) {
-    return a.concat(b);
-}, []);
-// aplati [4, 5, 2, 3, 0, 1]
-</pre>
-
-<h3 id="Différence_entre_reduce_et_reduceRight">Différence entre <code>reduce</code> et <code>reduceRight</code></h3>
-
-<pre class="brush: js">var a = ['1', '2', '3', '4','5']
-var gauche = a.reduce(function(prev, cur) {
-  return prev + cur;
-});
-
-var droite = a.reduceRight(function(prev, cur) {
-  return prev + cur;
-});
-
-console.log(gauche); // "12345"
-console.log(droite); // "54321"</pre>
-
-<h3 id="Composition_de_fonctions_à_l'aide_de_reduce">Composition de fonctions à l'aide de <code>reduce</code></h3>
-
-<p>La composition de fonctions consiste en l'enchaînement de n fonctions l'une après l'autre (où les appels sont généralement exécutés de droite à gauche.</p>
-
-<pre class="brush: js">/**
- *
- * h(x) = f(g(x))
- *
- * https://fr.wikipedia.org/wiki/Composition_de_fonctions
- */
-
-const compose = (...args) =&gt; (value) =&gt; args.reduceRight((acc, fn) =&gt; fn(acc), value)
-
-// On incrémente un nombre passé en argument
-const inc = (n) =&gt; n + 1
-
-// On double la valeur passée en argument
-const double = (n) =&gt; n * 2
-
-// On compose double(inc(x))
-compose(double, inc)(2) // 6
-
-// On compose inc(double(x))
-compose(inc, double)(2) // 5
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-15.4.4.22', 'Array.prototype.reduceRight')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td>Définition initiale. Implémentée avec JavaScript 1.8.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-array.prototype.reduceright', 'Array.prototype.reduceRight')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-array.prototype.reduceright', 'Array.prototype.reduceRight')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Array.reduceRight")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Array.prototype.reduce()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/array/reduceright/index.md b/files/fr/web/javascript/reference/global_objects/array/reduceright/index.md
new file mode 100644
index 0000000000..dbb7001bf8
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/array/reduceright/index.md
@@ -0,0 +1,263 @@
+---
+title: Array.prototype.reduceRight()
+slug: Web/JavaScript/Reference/Global_Objects/Array/ReduceRight
+tags:
+  - Array
+  - ECMAScript 5
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/ReduceRight
+original_slug: Web/JavaScript/Reference/Objets_globaux/Array/reduceRight
+---
+{{JSRef}}
+
+La méthode **`reduceRight()`** applique une fonction sur un accumulateur et chaque valeur d'un tableau (de la droite vers la gauche) de sorte à réduire le tableau en une seule valeur.
+
+{{EmbedInteractiveExample("pages/js/array-reduce-right.html")}}
+
+Voir également {{jsxref("Array.prototype.reduce()")}} pour une méthode qui réduit de gauche à droite.
+
+## Syntaxe
+
+    arr.reduceRight(callback[, valeurInitiale])
+
+### Paramètres
+
+- `callback`
+
+  - : La fonction à éxécuter sur chaque valeur de la liste. Elle utilise quatres arguments :
+
+    - `accumulator`
+      - : La valeur précédemment retournée par le dernier appel de la fonction `callback`, ou `valeurInitial` si elle est fournie. (Voir ci-après.)
+    - `valeurCourante`
+      - : La valeur de l'élément courant dans le tableau.
+    - `index`
+      - : L'index de l'élément du tableau actuellement manipulé.
+    - `array`
+      - : Le tableau sur lequel `reduceRight()` est appelée.
+
+- `valeurInitiale` {{optional_inline}}
+  - : C'est l'objet à utiliser comme accumulateur/premier argument lors du premier appel de la fonction `callback`. Si aucune valeur n'est fournie, c'est le dernier élément du tableau qui sera utilisé. Si on appelle `reduce()` ou `reduceRight()` sur un tableau vide sans fournir de valeur initiale, on aura une exception {{jsxref("TypeError")}}.
+
+### Valeur de retour
+
+La valeur obtenue grâce à la fonction de réduction.
+
+## Description
+
+`reduceRight` exécute la fonction `callback` une fois pour chaque élément présent dans le tableau, les éléments vides sont ignorés. La fonction `callback` utilise quatre arguments : la valeur initiale (ou la valeur retournée par le précédent appel de la fonction` callback`), la valeur de l'élément courant, l'index de l'élément courant, et le tableau qui est parcouru.
+
+L'usage de `reduceRight` avec définition d'un `callback` devrait ressembler à ceci :
+
+```js
+array.reduceRight(function(accumulator, valeurCourante, index, array) {
+    // ...
+});
+```
+
+La première fois que la fonction de callback est appelée, `accumulator` et `valeurCourante` peuvent correspondre à un ou deux éléments. Si `valeurInitiale` est fournie lors de l'appel à `reduceRight`, alors `accumulator` sera égale à `valeurInitiale` et `valeurCourante` sera égale à la dernière valeur de la liste. Si `valeurInitiale` n'est pas fournie, alors `accumulator` sera égale à la dernière valeur de la liste, et `valeurCourante` sera alors égale à l'avant-dernière valeur du tableau.
+
+Si on utilise la méthode `reduceRight` de la façon suivante :
+
+```js
+[0, 1, 2, 3, 4].reduceRight(function(accumulator, valeurCourante, index, array) {
+    return accumulator + valeurCourante;
+});
+```
+
+La fonction `callback` sera appelée quatre fois, avec les arguments et les valeurs de retour de chaque appel suivant :
+
+<table>
+  <thead>
+    <tr>
+      <th scope="col"><code>callback</code></th>
+      <th scope="col"><code>accumulator</code></th>
+      <th scope="col"><code>valeurCourante</code></th>
+      <th scope="col"><code>index</code></th>
+      <th scope="col"><code>array</code></th>
+      <th scope="col">Valeur renvoyée</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <th scope="row">premier appel</th>
+      <td>4</td>
+      <td>3</td>
+      <td>3</td>
+      <td><code>[0,1,2,3,4]</code></td>
+      <td>7</td>
+    </tr>
+    <tr>
+      <th scope="row">second appel</th>
+      <td>7</td>
+      <td><code>2</code></td>
+      <td><code>2</code></td>
+      <td><code>[0,1,2,3,4]</code></td>
+      <td>9</td>
+    </tr>
+    <tr>
+      <th scope="row">troisième appel</th>
+      <td>9</td>
+      <td>1</td>
+      <td>1</td>
+      <td><code>[0,1,2,3,4]</code></td>
+      <td>10</td>
+    </tr>
+    <tr>
+      <th scope="row">quatrième appel</th>
+      <td>10</td>
+      <td>0</td>
+      <td>0</td>
+      <td><code>[0,1,2,3,4]</code></td>
+      <td><code>10</code></td>
+    </tr>
+  </tbody>
+</table>
+
+La valeur retournée par `reduceRight` sera alors celle du dernier appel de la fonction `callback` (`10`).
+
+Si vous fournissez une valeur initiale comme second argument à l'appel de `reduceRight`, le résultat sera alors le suivant :
+
+```js
+[0, 1, 2, 3, 4].reduceRight(function(accumulator, valeurCourante, index, array) {
+    return accumulator + valeurCourante;
+}, 10);
+```
+
+<table>
+  <thead>
+    <tr>
+      <th scope="col"></th>
+      <th scope="col"><code>accumulator</code></th>
+      <th scope="col"><code>valeurCourante</code></th>
+      <th scope="col"><code>index</code></th>
+      <th scope="col"><code>array</code></th>
+      <th scope="col">Valeur renvoyée</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <th scope="row">premier appel</th>
+      <td><code>10</code></td>
+      <td>4</td>
+      <td>4</td>
+      <td><code>[0,1,2,3,4]</code></td>
+      <td><code>14</code></td>
+    </tr>
+    <tr>
+      <th scope="row">second appel</th>
+      <td>14</td>
+      <td>3</td>
+      <td>3</td>
+      <td><code>[0,1,2,3,4]</code></td>
+      <td><code>17</code></td>
+    </tr>
+    <tr>
+      <th scope="row">troisième appel</th>
+      <td>17</td>
+      <td><code>2</code></td>
+      <td><code>2</code></td>
+      <td><code>[0,1,2,3,4]</code></td>
+      <td><code>19</code></td>
+    </tr>
+    <tr>
+      <th scope="row">quatrième appel</th>
+      <td>19</td>
+      <td>1</td>
+      <td>1</td>
+      <td><code>[0,1,2,3,4]</code></td>
+      <td>20</td>
+    </tr>
+    <tr>
+      <th scope="row">cinquième appel</th>
+      <td>20</td>
+      <td>0</td>
+      <td>0</td>
+      <td><code>[0,1,2,3,4]</code></td>
+      <td><code>20</code></td>
+    </tr>
+  </tbody>
+</table>
+
+La valeur renvoyée par `reduceRight` sera ici `20`.
+
+## Exemples
+
+### Additionner toutes les valeurs d'une liste
+
+```js
+var total = [0, 1, 2, 3].reduceRight(function(a, b) {
+    return a + b;
+});
+// total == 6
+```
+
+### Aplatir une liste de listes
+
+```js
+var aplati = [[0, 1], [2, 3], [4, 5]].reduceRight(function(a, b) {
+    return a.concat(b);
+}, []);
+// aplati [4, 5, 2, 3, 0, 1]
+```
+
+### Différence entre `reduce` et `reduceRight`
+
+```js
+var a = ['1', '2', '3', '4','5']
+var gauche = a.reduce(function(prev, cur) {
+  return prev + cur;
+});
+
+var droite = a.reduceRight(function(prev, cur) {
+  return prev + cur;
+});
+
+console.log(gauche); // "12345"
+console.log(droite); // "54321"
+```
+
+### Composition de fonctions à l'aide de `reduce`
+
+La composition de fonctions consiste en l'enchaînement de n fonctions l'une après l'autre (où les appels sont généralement exécutés de droite à gauche.
+
+```js
+/**
+ *
+ * h(x) = f(g(x))
+ *
+ * https://fr.wikipedia.org/wiki/Composition_de_fonctions
+ */
+
+const compose = (...args) => (value) => args.reduceRight((acc, fn) => fn(acc), value)
+
+// On incrémente un nombre passé en argument
+const inc = (n) => n + 1
+
+// On double la valeur passée en argument
+const double = (n) => n * 2
+
+// On compose double(inc(x))
+compose(double, inc)(2) // 6
+
+// On compose inc(double(x))
+compose(inc, double)(2) // 5
+```
+
+## Spécifications
+
+| Spécification                                                                                                            | État                         | Commentaires                                          |
+| ------------------------------------------------------------------------------------------------------------------------ | ---------------------------- | ----------------------------------------------------- |
+| {{SpecName('ES5.1', '#sec-15.4.4.22', 'Array.prototype.reduceRight')}}                             | {{Spec2('ES5.1')}}     | Définition initiale. Implémentée avec JavaScript 1.8. |
+| {{SpecName('ES6', '#sec-array.prototype.reduceright', 'Array.prototype.reduceRight')}}     | {{Spec2('ES6')}}         |                                                       |
+| {{SpecName('ESDraft', '#sec-array.prototype.reduceright', 'Array.prototype.reduceRight')}} | {{Spec2('ESDraft')}} |                                                       |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Array.reduceRight")}}
+
+## Voir aussi
+
+- {{jsxref("Array.prototype.reduce()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/array/reverse/index.html b/files/fr/web/javascript/reference/global_objects/array/reverse/index.html
deleted file mode 100644
index cfd6d0029a..0000000000
--- a/files/fr/web/javascript/reference/global_objects/array/reverse/index.html
+++ /dev/null
@@ -1,100 +0,0 @@
----
-title: Array.prototype.reverse()
-slug: Web/JavaScript/Reference/Global_Objects/Array/reverse
-tags:
-  - Array
-  - JavaScript
-  - Méthode
-  - Prototype
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Array/reverse
-original_slug: Web/JavaScript/Reference/Objets_globaux/Array/reverse
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <code><strong>reverse()</strong></code> transpose les éléments d'un tableau : le premier élément devient le dernier et le dernier devient le premier et ainsi de suite.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/array-reverse.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>arr</var>.reverse()</pre>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Le tableau inversé.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>La méthode <code>reverse()</code> permet d'inverser l'ordre des éléments du tableau. La méthode modifie le tableau courant et renvoie une référence à ce tableau.</p>
-
-<p>Cette méthode est intentionnellement générique et peut être appelée (via {{jsxref("Function.call()")}}) ou appliquée (via {{jsxref("Function.apply()")}}) sur des objets semblables à des tableaux. Les objets qui ne contiennent pas de propriété <code>length</code> qui soit cohérente avec leurs propriétés indexées sur des nombres ne seront pas traités par <code>reverse()</code>.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Inverser_l'ordre_des_éléments_d'un_tableau">Inverser l'ordre des éléments d'un tableau</h3>
-
-<p>L'exemple qui suit crée un tableau <code>monArray</code>, qui contient trois éléments, puis inverse celui-ci.</p>
-
-<pre class="brush: js">var monArray = ["un", "deux", "trois"];
-monArray.reverse();
-
-console.log(monArray) // ["trois", "deux", "un"]
-</pre>
-
-<h3 id="Inverser_l'ordre_des_éléments_d'un_objet_semblable_à_un_tableau">Inverser l'ordre des éléments d'un objet semblable à un tableau</h3>
-
-<p>Dans l'exemple suivant, on crée un objet semblable à un tableau <code>a</code> qui contient trois éléments et une propriété <code>length</code>. On appelle ensuite <code>reverse()</code> grâce à <code>call()</code> sur cet objet pour inverser ses éléments :</p>
-
-<pre class="brush: js">const a = {0: 1, 1: 2, 2: 3, length: 3};
-
-console.log(a); // {0: 1, 1: 2, 2: 3, length: 3}
-
-Array.prototype.reverse.call(a); // On aurait pu utiliser apply() également
-
-console.log(a); // {0: 3, 1: 2, 2 : 1, length: 3}
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES1')}}</td>
-   <td>{{Spec2('ES1')}}</td>
-   <td>Définition initiale. Implémentée avec JavaScript 1.1.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-15.4.4.8', 'Array.prototype.reverse')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-array.prototype.reverse', 'Array.prototype.reverse')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-array.prototype.reverse', 'Array.prototype.reverse')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Array.reverse")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Array.prototype.join()")}}</li>
- <li>{{jsxref("Array.prototype.sort()")}}</li>
- <li>{{jsxref("TypedArray.prototype.reverse()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/array/reverse/index.md b/files/fr/web/javascript/reference/global_objects/array/reverse/index.md
new file mode 100644
index 0000000000..034a9a73e9
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/array/reverse/index.md
@@ -0,0 +1,77 @@
+---
+title: Array.prototype.reverse()
+slug: Web/JavaScript/Reference/Global_Objects/Array/reverse
+tags:
+  - Array
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/reverse
+original_slug: Web/JavaScript/Reference/Objets_globaux/Array/reverse
+---
+{{JSRef}}
+
+La méthode **`reverse()`** transpose les éléments d'un tableau : le premier élément devient le dernier et le dernier devient le premier et ainsi de suite.
+
+{{EmbedInteractiveExample("pages/js/array-reverse.html")}}
+
+## Syntaxe
+
+    arr.reverse()
+
+### Valeur de retour
+
+Le tableau inversé.
+
+## Description
+
+La méthode `reverse()` permet d'inverser l'ordre des éléments du tableau. La méthode modifie le tableau courant et renvoie une référence à ce tableau.
+
+Cette méthode est intentionnellement générique et peut être appelée (via {{jsxref("Function.call()")}}) ou appliquée (via {{jsxref("Function.apply()")}}) sur des objets semblables à des tableaux. Les objets qui ne contiennent pas de propriété `length` qui soit cohérente avec leurs propriétés indexées sur des nombres ne seront pas traités par `reverse()`.
+
+## Exemples
+
+### Inverser l'ordre des éléments d'un tableau
+
+L'exemple qui suit crée un tableau `monArray`, qui contient trois éléments, puis inverse celui-ci.
+
+```js
+var monArray = ["un", "deux", "trois"];
+monArray.reverse();
+
+console.log(monArray) // ["trois", "deux", "un"]
+```
+
+### Inverser l'ordre des éléments d'un objet semblable à un tableau
+
+Dans l'exemple suivant, on crée un objet semblable à un tableau `a` qui contient trois éléments et une propriété `length`. On appelle ensuite `reverse()` grâce à `call()` sur cet objet pour inverser ses éléments :
+
+```js
+const a = {0: 1, 1: 2, 2: 3, length: 3};
+
+console.log(a); // {0: 1, 1: 2, 2: 3, length: 3}
+
+Array.prototype.reverse.call(a); // On aurait pu utiliser apply() également
+
+console.log(a); // {0: 3, 1: 2, 2 : 1, length: 3}
+```
+
+## Spécifications
+
+| Spécification                                                                                                | État                         | Commentaires                                          |
+| ------------------------------------------------------------------------------------------------------------ | ---------------------------- | ----------------------------------------------------- |
+| {{SpecName('ES1')}}                                                                                     | {{Spec2('ES1')}}         | Définition initiale. Implémentée avec JavaScript 1.1. |
+| {{SpecName('ES5.1', '#sec-15.4.4.8', 'Array.prototype.reverse')}}                     | {{Spec2('ES5.1')}}     |                                                       |
+| {{SpecName('ES6', '#sec-array.prototype.reverse', 'Array.prototype.reverse')}}     | {{Spec2('ES6')}}         |                                                       |
+| {{SpecName('ESDraft', '#sec-array.prototype.reverse', 'Array.prototype.reverse')}} | {{Spec2('ESDraft')}} |                                                       |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Array.reverse")}}
+
+## Voir aussi
+
+- {{jsxref("Array.prototype.join()")}}
+- {{jsxref("Array.prototype.sort()")}}
+- {{jsxref("TypedArray.prototype.reverse()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/array/shift/index.html b/files/fr/web/javascript/reference/global_objects/array/shift/index.html
deleted file mode 100644
index aa853937b2..0000000000
--- a/files/fr/web/javascript/reference/global_objects/array/shift/index.html
+++ /dev/null
@@ -1,113 +0,0 @@
----
-title: Array.prototype.shift()
-slug: Web/JavaScript/Reference/Global_Objects/Array/shift
-tags:
-  - Array
-  - JavaScript
-  - Méthode
-  - Prototype
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Array/shift
-original_slug: Web/JavaScript/Reference/Objets_globaux/Array/shift
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <strong><code>shift()</code></strong> permet de retirer le <strong>premier</strong> élément d'un tableau et de renvoyer cet élément. Cette méthode modifie la longueur du tableau.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/array-shift.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>arr</var>.shift()</pre>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>L'élément retiré du tableau ou {{jsxref("undefined")}} si le tableau est vide.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>La méthode <code>shift</code> retire l'élément situé à l'index zéro et décrémente l'index des éléments suivant avant de retourner l'élément supprimé. Si la propriété {{jsxref("Array.length", "length")}} vaut 0, {{jsxref("undefined")}} est retourné.</p>
-
-<p>Cette méthode est générique et peut être {{jsxref("Function.call", "appelée","",1)}} ou {{jsxref("Function.apply", "appliquée","",1)}} sur des objets similaires à des tableaux. </p>
-
-<p>Cette méthode n'est pas exploitable pour les objets dont la propriété <code>length</code> ne reflète pas la taille du contenu, ou pour lesquels la propriété <code>length</code> n'est pas définie.</p>
-
-<div class="blockIndicator note">
-<p><strong>Note :</strong> La méthode {{jsxref("Array.prototype.pop()")}} possède un comportement similaire mais retire le dernier élément du tableau (et non le premier).</p>
-</div>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Supprimer_un_élément_d'un_tableau">Supprimer un élément d'un tableau</h3>
-
-<p>Le code suivant affiche le tableau <code>mesPoissons</code> avant et après avoir enlevé le premier élément. Il affiche aussi l'élément supprimé :</p>
-
-<pre class="brush:js">var mesPoissons = ["ange", "clown", "mandarin", "chirurgien"];
-
-console.log("mesPoissons avant : " + JSON.stringify(mesPoissons));
-// mesPoissons avant : ["ange","clown","mandarin","chirurgien"]
-
-var premierÉlément = mesPoissons.shift();
-
-console.log("mesPoissons après :", mesPoissons);
-// mesPoissons après : ["clown", "mandarin", "chirurgien"]
-
-console.log("Cet élément a été enlevé :", premierÉlément);
-// "Cet élément a été enlevé : ange"
-</pre>
-
-<h3 id="Utiliser_shift()_dans_une_boucle_while">Utiliser <code>shift()</code> dans une boucle <code>while</code></h3>
-
-<p>La méthode <code>shift()</code> peut être utilisée dans une boucle <code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/while">while</a></code>. Dans l'exemple suivant, chaque itération de la boucle retire un élément du tableau et l'affiche dans la console, jusqu'à ce que ce dernier soit vide.</p>
-
-<pre class="brush: js">var noms = ["André", "Édouard", "Paul", "Christophe", "Jean"];
-while ( (i = noms.shift()) !== undefined ) {
-  console.log(i);
-}
-// André, Édouard, Paul, Christophe, Jean
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES3')}}</td>
-   <td>{{Spec2('ES3')}}</td>
-   <td>Définition initiale. Implémentée avec JavaScript 1.2.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-15.4.4.9', 'Array.prototype.shift')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-array.prototype.shift', 'Array.prototype.shift')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-array.prototype.shift', 'Array.prototype.shift')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Array.shift")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Array.prototype.push()")}}</li>
- <li>{{jsxref("Array.prototype.pop()")}}</li>
- <li>{{jsxref("Array.prototype.unshift()")}}</li>
- <li>{{jsxref("Array.prototype.concat()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/array/shift/index.md b/files/fr/web/javascript/reference/global_objects/array/shift/index.md
new file mode 100644
index 0000000000..f34d0d73da
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/array/shift/index.md
@@ -0,0 +1,88 @@
+---
+title: Array.prototype.shift()
+slug: Web/JavaScript/Reference/Global_Objects/Array/shift
+tags:
+  - Array
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/shift
+original_slug: Web/JavaScript/Reference/Objets_globaux/Array/shift
+---
+{{JSRef}}
+
+La méthode **`shift()`** permet de retirer le **premier** élément d'un tableau et de renvoyer cet élément. Cette méthode modifie la longueur du tableau.
+
+{{EmbedInteractiveExample("pages/js/array-shift.html")}}
+
+## Syntaxe
+
+    arr.shift()
+
+### Valeur de retour
+
+L'élément retiré du tableau ou {{jsxref("undefined")}} si le tableau est vide.
+
+## Description
+
+La méthode `shift` retire l'élément situé à l'index zéro et décrémente l'index des éléments suivant avant de retourner l'élément supprimé. Si la propriété {{jsxref("Array.length", "length")}} vaut 0, {{jsxref("undefined")}} est retourné.
+
+Cette méthode est générique et peut être {{jsxref("Function.call", "appelée","",1)}} ou {{jsxref("Function.apply", "appliquée","",1)}} sur des objets similaires à des tableaux.
+
+Cette méthode n'est pas exploitable pour les objets dont la propriété `length` ne reflète pas la taille du contenu, ou pour lesquels la propriété `length` n'est pas définie.
+
+> **Note :** La méthode {{jsxref("Array.prototype.pop()")}} possède un comportement similaire mais retire le dernier élément du tableau (et non le premier).
+
+## Exemples
+
+### Supprimer un élément d'un tableau
+
+Le code suivant affiche le tableau `mesPoissons` avant et après avoir enlevé le premier élément. Il affiche aussi l'élément supprimé :
+
+```js
+var mesPoissons = ["ange", "clown", "mandarin", "chirurgien"];
+
+console.log("mesPoissons avant : " + JSON.stringify(mesPoissons));
+// mesPoissons avant : ["ange","clown","mandarin","chirurgien"]
+
+var premierÉlément = mesPoissons.shift();
+
+console.log("mesPoissons après :", mesPoissons);
+// mesPoissons après : ["clown", "mandarin", "chirurgien"]
+
+console.log("Cet élément a été enlevé :", premierÉlément);
+// "Cet élément a été enlevé : ange"
+```
+
+### Utiliser `shift()` dans une boucle `while`
+
+La méthode `shift()` peut être utilisée dans une boucle [`while`](/fr/docs/Web/JavaScript/Reference/Instructions/while). Dans l'exemple suivant, chaque itération de la boucle retire un élément du tableau et l'affiche dans la console, jusqu'à ce que ce dernier soit vide.
+
+```js
+var noms = ["André", "Édouard", "Paul", "Christophe", "Jean"];
+while ( (i = noms.shift()) !== undefined ) {
+  console.log(i);
+}
+// André, Édouard, Paul, Christophe, Jean
+```
+
+## Spécifications
+
+| Spécification                                                                                            | État                         | Commentaires                                          |
+| -------------------------------------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- |
+| {{SpecName('ES3')}}                                                                                 | {{Spec2('ES3')}}         | Définition initiale. Implémentée avec JavaScript 1.2. |
+| {{SpecName('ES5.1', '#sec-15.4.4.9', 'Array.prototype.shift')}}                     | {{Spec2('ES5.1')}}     |                                                       |
+| {{SpecName('ES6', '#sec-array.prototype.shift', 'Array.prototype.shift')}}     | {{Spec2('ES6')}}         |                                                       |
+| {{SpecName('ESDraft', '#sec-array.prototype.shift', 'Array.prototype.shift')}} | {{Spec2('ESDraft')}} |                                                       |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Array.shift")}}
+
+## Voir aussi
+
+- {{jsxref("Array.prototype.push()")}}
+- {{jsxref("Array.prototype.pop()")}}
+- {{jsxref("Array.prototype.unshift()")}}
+- {{jsxref("Array.prototype.concat()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/array/slice/index.html b/files/fr/web/javascript/reference/global_objects/array/slice/index.html
deleted file mode 100644
index 988565123b..0000000000
--- a/files/fr/web/javascript/reference/global_objects/array/slice/index.html
+++ /dev/null
@@ -1,166 +0,0 @@
----
-title: Array.prototype.slice()
-slug: Web/JavaScript/Reference/Global_Objects/Array/slice
-tags:
-  - Array
-  - JavaScript
-  - Méthode
-  - Prototype
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Array/slice
-original_slug: Web/JavaScript/Reference/Objets_globaux/Array/slice
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <strong><code>slice()</code></strong> renvoie un objet tableau, contenant une copie superficielle (<em>shallow copy</em>) d'une portion du tableau d'origine, la portion est définie par un indice de début et un indice de fin (exclus). Le tableau original ne sera pas modifié.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/array-slice.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>arr</var>.slice()
-<var>arr</var>.slice(<em>début</em>)
-<var>arr</var>.slice(<em>début</em>, <em>fin</em>)
-</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>début</code> {{optional_inline}}</dt>
- <dd>Indice (à partir de zéro) depuis lequel commencer l'extraction. S'il s'agit d'un indice négatif, <code>début</code> indique un décalage depuis la fin de la séquence. Par exemple, <code>slice(-2)</code> extrait les avant-dernier et dernier éléments dans la séquence.<br>
- <br>
- Si <code>début</code> est absent, <code>slice()</code> commencera depuis 0. Si <code>début</code> est supérieur à la taille du tableau, c'est un tableau vide qui sera renvoyé.</dd>
- <dt><code>fin</code> {{optional_inline}}</dt>
- <dd>Indice (à partir de zéro) auquel arrêter l'extraction. <code>slice()</code> extrait jusqu'à cet indice, mais pas l'élément situé en <code>fin</code> lui-même. <code>slice(1,4)</code> extrait du deuxième au quatrième élément (les éléments d'indices 1, 2 et 3). S'il s'agit d'un indice négatif, <code>fin</code> indique un décalage depuis la fin de la séquence. <code>slice(2,-1)</code> extrait du troisième à l'avant-dernier élément dans la séquence. Si <code>fin</code> n'est pas fourni, <code>slice()</code> extraira jusqu'à la fin de la séquence (<code>arr.length</code>). Si <code>fin</code> est supérieur à la longueur de la séquence, <code>slice()</code> fera une extraction jusqu'à la fin de la séquence.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Un nouveau tableau contenant les éléments extraits.</p>
-
-<h2 id="Description">Description</h2>
-
-<p><code>slice()</code> ne modifie pas le tableau original, mais renvoie une nouvelle copie du tableau (<em>shallow copy</em> — copie superficielle) dont les éléments sont des copies des éléments extraits du tableau original. Les éléments du tableau original sont copiés dans le nouveau tableau de la manière suivante :</p>
-
-<ul>
- <li>Pour les références à des objets (et non les objets eux-mêmes), <code>slice()</code> copie ces références dans le nouveau tableau. Tant l'original que le nouveau tableau font référence au même objet. Si un objet référencé est modifié, ces changements sont visibles tant pour le nouveau que pour l'ancien tableau.</li>
- <li>Pour les chaines de caractères, les nombres et les booléens, <code>slice()</code> copie ces chaines de caractères, ces nombres et ces valeurs booléennes dans le nouveau tableau. Les modifications sur ces chaînes, nombres ou booléens dans l'un des tableaux n'affectent pas l'autre tableau (NB : lorsque l'on parle de chaine de caractères, de nombre ou de booléen ici, on parle exclusivement de leur <em>type primitif</em>, pas des <em>objets</em> {{jsxref("String")}}, {{jsxref("Number")}} ou {{jsxref("Boolean")}} — voir par exemple <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String#Les_différences_entre_les_objets_String_et_le_type_primitif_pour_les_chaînes_de_caractères">différences entre objet String et type primitif pour les chaines de caractères</a>).</li>
-</ul>
-
-<p>Si un nouvel élément est ajouté à l'un ou l'autre tableau, le second n'est pas affecté.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Renvoyer_un_fragment_d'un_tableau_existant">Renvoyer un fragment d'un tableau existant</h3>
-
-<pre class="brush: js">var fruits = ["Banane", "Orange", "Citron", "Pomme", "Mangue"];
-var agrumes = fruits.slice(1, 3);
-
-// fruits vaut --&gt; ["Banane", "Orange", "Citron", "Pomme", "Mangue"]
-// agrumes vaut --&gt; ["Orange", "Citron"]</pre>
-
-<h3 id="Utiliser_slice()">Utiliser <code>slice()</code></h3>
-
-<p>Dans l'exemple qui suit, <code>slice()</code> crée un nouveau tableau, <code>nouvelleVoiture</code>, à partir de <code>maVoiture</code>. Chacun d'entre eux contient une référence à l'objet <code>maHonda</code>. Lorsque la couleur de <code>maHonda</code> est changée en bordeaux, les deux tableaux reflètent ce changement.</p>
-
-<pre class="brush: js">// Avec slice, crée nouvelleVoiture depuis maVoiture
-var maHonda = { couleur : "rouge", roues : 4, moteur : { cylindres : 4, capacité : 2.2 } };
-var maVoiture = [maHonda, 2, "excellente condition", "achetée en 1997"];
-var nouvelleVoiture = maVoiture.slice(0, 2);
-
-// Affiche les valeurs de maVoiture, nouvelleVoiture et la couleur de maHonda
-// référencées depuis chacun des tableaux.
-console.log("maVoiture = " + JSON.stringify(maVoiture));
-console.log("nouvelleVoiture = " + JSON.stringify(nouvelleVoiture));
-console.log("maVoiture[0].couleur = " + maVoiture[0].couleur);
-console.log("nouvelleVoiture[0].couleur = " + nouvelleVoiture[0].couleur);
-
-// Change la couleur de maHonda.
-maHonda.couleur = "bordeaux";
-console.log("La nouvelle couleur de ma Honda est " + maHonda.couleur);
-
-// Affiche la couleur de maHonda référencées depuis les deux tableaux.
-console.log("maVoiture[0].couleur = " + maVoiture[0].couleur);
-console.log("nouvelleVoiture[0].couleur = " + nouvelleVoiture[0].couleur);
-</pre>
-
-<p>Ce script affichera :</p>
-
-<pre class="brush: js">maVoiture = [{couleur:"rouge", roues:4, moteur:{cylindres:4, capacité:2.2}}, 2,
-             "excellente condition", "achetée en 1997"]
-nouvelleVoiture = [{couleur:"rouge", roues:4, moteur:{cylindres:4, capacité:2.2}}, 2]
-maVoiture[0].couleur = rouge
-nouvelleVoiture[0].couleur = rouge
-La nouvelle couleur de ma Honda est bordeaux
-maVoiture[0].couleur = bordeaux
-nouvelleVoiture[0].couleur = bordeaux
-</pre>
-
-<h2 id="Utilisation_avec_les_objets_similaires_aux_tableaux">Utilisation avec les objets similaires aux tableaux</h2>
-
-<p>La méthode <code>slice()</code> peut aussi être appelée pour convertir des objets/collections similaires à des tableaux, en un nouveau tableau. L'objet {{jsxref("Fonctions/arguments", "arguments")}} d'une fonction est un exemple d'objet similaire à un tableau.</p>
-
-<pre class="brush: js">function list() {
-  return Array.prototype.slice.call(arguments, 0);
-}
-
-var list1 = list(1, 2, 3); // [1, 2, 3]
-</pre>
-
-<p>Il est possible de lier avec la fonction .<code>call</code> de {{jsxref("Function.prototype")}} et on peut effectuer la réduction avec <code>[].slice.call(arguments)</code> plutôt qu'avec <code>Array.prototype.slice.call</code>. Voici comment on peut simplifier avec {{jsxref("Function.prototype.bind", "bind")}} :</p>
-
-<pre class="brush: js">var unboundSlice = Array.prototype.slice;
-var slice = Function.prototype.call.bind(unboundSlice);
-
-function list() {
-  return slice(arguments, 0);
-}
-
-var list1 = list(1, 2, 3); // [1, 2, 3]
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('ES3')}}</td>
-   <td>{{Spec2('ES3')}}</td>
-   <td>Définition initiale. Implémentée avec JavaScript 1.2.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-15.4.4.10', 'Array.prototype.slice')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-array.prototype.slice', 'Array.prototype.slice')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-array.prototype.slice', 'Array.prototype.slice')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Array.slice")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Function.prototype.call()")}}</li>
- <li>{{jsxref("Function.prototype.bind()")}}</li>
- <li>{{jsxref("Array.prototype.splice()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/array/slice/index.md b/files/fr/web/javascript/reference/global_objects/array/slice/index.md
new file mode 100644
index 0000000000..35f56b4c80
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/array/slice/index.md
@@ -0,0 +1,142 @@
+---
+title: Array.prototype.slice()
+slug: Web/JavaScript/Reference/Global_Objects/Array/slice
+tags:
+  - Array
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/slice
+original_slug: Web/JavaScript/Reference/Objets_globaux/Array/slice
+---
+{{JSRef}}
+
+La méthode **`slice()`** renvoie un objet tableau, contenant une copie superficielle (_shallow copy_) d'une portion du tableau d'origine, la portion est définie par un indice de début et un indice de fin (exclus). Le tableau original ne sera pas modifié.
+
+{{EmbedInteractiveExample("pages/js/array-slice.html")}}
+
+## Syntaxe
+
+    arr.slice()
+    arr.slice(début)
+    arr.slice(début, fin)
+
+### Paramètres
+
+- `début` {{optional_inline}}
+
+  - : Indice (à partir de zéro) depuis lequel commencer l'extraction. S'il s'agit d'un indice négatif, `début` indique un décalage depuis la fin de la séquence. Par exemple, `slice(-2)` extrait les avant-dernier et dernier éléments dans la séquence.
+
+    Si `début` est absent, `slice()` commencera depuis 0. Si `début` est supérieur à la taille du tableau, c'est un tableau vide qui sera renvoyé.
+
+- `fin` {{optional_inline}}
+  - : Indice (à partir de zéro) auquel arrêter l'extraction. `slice()` extrait jusqu'à cet indice, mais pas l'élément situé en `fin` lui-même. `slice(1,4)` extrait du deuxième au quatrième élément (les éléments d'indices 1, 2 et 3). S'il s'agit d'un indice négatif, `fin` indique un décalage depuis la fin de la séquence. `slice(2,-1)` extrait du troisième à l'avant-dernier élément dans la séquence. Si `fin` n'est pas fourni, `slice()` extraira jusqu'à la fin de la séquence (`arr.length`). Si `fin` est supérieur à la longueur de la séquence, `slice()` fera une extraction jusqu'à la fin de la séquence.
+
+### Valeur de retour
+
+Un nouveau tableau contenant les éléments extraits.
+
+## Description
+
+`slice()` ne modifie pas le tableau original, mais renvoie une nouvelle copie du tableau (_shallow copy_ — copie superficielle) dont les éléments sont des copies des éléments extraits du tableau original. Les éléments du tableau original sont copiés dans le nouveau tableau de la manière suivante :
+
+- Pour les références à des objets (et non les objets eux-mêmes), `slice()` copie ces références dans le nouveau tableau. Tant l'original que le nouveau tableau font référence au même objet. Si un objet référencé est modifié, ces changements sont visibles tant pour le nouveau que pour l'ancien tableau.
+- Pour les chaines de caractères, les nombres et les booléens, `slice()` copie ces chaines de caractères, ces nombres et ces valeurs booléennes dans le nouveau tableau. Les modifications sur ces chaînes, nombres ou booléens dans l'un des tableaux n'affectent pas l'autre tableau (NB : lorsque l'on parle de chaine de caractères, de nombre ou de booléen ici, on parle exclusivement de leur _type primitif_, pas des _objets_ {{jsxref("String")}}, {{jsxref("Number")}} ou {{jsxref("Boolean")}} — voir par exemple [différences entre objet String et type primitif pour les chaines de caractères](/fr/docs/Web/JavaScript/Reference/Objets_globaux/String#Les_différences_entre_les_objets_String_et_le_type_primitif_pour_les_chaînes_de_caractères)).
+
+Si un nouvel élément est ajouté à l'un ou l'autre tableau, le second n'est pas affecté.
+
+## Exemples
+
+### Renvoyer un fragment d'un tableau existant
+
+```js
+var fruits = ["Banane", "Orange", "Citron", "Pomme", "Mangue"];
+var agrumes = fruits.slice(1, 3);
+
+// fruits vaut --> ["Banane", "Orange", "Citron", "Pomme", "Mangue"]
+// agrumes vaut --> ["Orange", "Citron"]
+```
+
+### Utiliser `slice()`
+
+Dans l'exemple qui suit, `slice()` crée un nouveau tableau, `nouvelleVoiture`, à partir de `maVoiture`. Chacun d'entre eux contient une référence à l'objet `maHonda`. Lorsque la couleur de `maHonda` est changée en bordeaux, les deux tableaux reflètent ce changement.
+
+```js
+// Avec slice, crée nouvelleVoiture depuis maVoiture
+var maHonda = { couleur : "rouge", roues : 4, moteur : { cylindres : 4, capacité : 2.2 } };
+var maVoiture = [maHonda, 2, "excellente condition", "achetée en 1997"];
+var nouvelleVoiture = maVoiture.slice(0, 2);
+
+// Affiche les valeurs de maVoiture, nouvelleVoiture et la couleur de maHonda
+// référencées depuis chacun des tableaux.
+console.log("maVoiture = " + JSON.stringify(maVoiture));
+console.log("nouvelleVoiture = " + JSON.stringify(nouvelleVoiture));
+console.log("maVoiture[0].couleur = " + maVoiture[0].couleur);
+console.log("nouvelleVoiture[0].couleur = " + nouvelleVoiture[0].couleur);
+
+// Change la couleur de maHonda.
+maHonda.couleur = "bordeaux";
+console.log("La nouvelle couleur de ma Honda est " + maHonda.couleur);
+
+// Affiche la couleur de maHonda référencées depuis les deux tableaux.
+console.log("maVoiture[0].couleur = " + maVoiture[0].couleur);
+console.log("nouvelleVoiture[0].couleur = " + nouvelleVoiture[0].couleur);
+```
+
+Ce script affichera :
+
+```js
+maVoiture = [{couleur:"rouge", roues:4, moteur:{cylindres:4, capacité:2.2}}, 2,
+             "excellente condition", "achetée en 1997"]
+nouvelleVoiture = [{couleur:"rouge", roues:4, moteur:{cylindres:4, capacité:2.2}}, 2]
+maVoiture[0].couleur = rouge
+nouvelleVoiture[0].couleur = rouge
+La nouvelle couleur de ma Honda est bordeaux
+maVoiture[0].couleur = bordeaux
+nouvelleVoiture[0].couleur = bordeaux
+```
+
+## Utilisation avec les objets similaires aux tableaux
+
+La méthode `slice()` peut aussi être appelée pour convertir des objets/collections similaires à des tableaux, en un nouveau tableau. L'objet {{jsxref("Fonctions/arguments", "arguments")}} d'une fonction est un exemple d'objet similaire à un tableau.
+
+```js
+function list() {
+  return Array.prototype.slice.call(arguments, 0);
+}
+
+var list1 = list(1, 2, 3); // [1, 2, 3]
+```
+
+Il est possible de lier avec la fonction .`call` de {{jsxref("Function.prototype")}} et on peut effectuer la réduction avec `[].slice.call(arguments)` plutôt qu'avec `Array.prototype.slice.call`. Voici comment on peut simplifier avec {{jsxref("Function.prototype.bind", "bind")}} :
+
+```js
+var unboundSlice = Array.prototype.slice;
+var slice = Function.prototype.call.bind(unboundSlice);
+
+function list() {
+  return slice(arguments, 0);
+}
+
+var list1 = list(1, 2, 3); // [1, 2, 3]
+```
+
+## Spécifications
+
+| Spécification                                                                                            | État                         | Commentaires                                          |
+| -------------------------------------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- |
+| {{SpecName('ES3')}}                                                                                 | {{Spec2('ES3')}}         | Définition initiale. Implémentée avec JavaScript 1.2. |
+| {{SpecName('ES5.1', '#sec-15.4.4.10', 'Array.prototype.slice')}}                     | {{Spec2('ES5.1')}}     |                                                       |
+| {{SpecName('ES6', '#sec-array.prototype.slice', 'Array.prototype.slice')}}     | {{Spec2('ES6')}}         |                                                       |
+| {{SpecName('ESDraft', '#sec-array.prototype.slice', 'Array.prototype.slice')}} | {{Spec2('ESDraft')}} |                                                       |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Array.slice")}}
+
+## Voir aussi
+
+- {{jsxref("Function.prototype.call()")}}
+- {{jsxref("Function.prototype.bind()")}}
+- {{jsxref("Array.prototype.splice()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/array/some/index.html b/files/fr/web/javascript/reference/global_objects/array/some/index.html
deleted file mode 100644
index b9a15a2855..0000000000
--- a/files/fr/web/javascript/reference/global_objects/array/some/index.html
+++ /dev/null
@@ -1,128 +0,0 @@
----
-title: Array.prototype.some()
-slug: Web/JavaScript/Reference/Global_Objects/Array/some
-tags:
-  - Array
-  - ECMAScript 5
-  - JavaScript
-  - Méthode
-  - Prototype
-  - Reference
-  - polyfill
-translation_of: Web/JavaScript/Reference/Global_Objects/Array/some
-original_slug: Web/JavaScript/Reference/Objets_globaux/Array/some
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <strong><code>some()</code></strong> teste si au moins un élément du tableau passe le test implémenté par la fonction fournie. Elle renvoie un booléen indiquant le résultat du test.</p>
-
-<div class="note">
-<p><strong>Note :</strong> Cette méthode renverra <code>false</code>, quelle que soit la condition, si elle est utilisée sur un tableau vide.</p>
-</div>
-
-<div>{{EmbedInteractiveExample("pages/js/array-some.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>arr</var>.some(<var>callback</var>[, <var>objetThis</var>])</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>callback</code></dt>
- <dd>La fonction à tester pour chaque élément du tableau. Cette fonction utilise trois arguments :
- <dl>
-  <dt><code>valeurCourante</code></dt>
-  <dd>L'élément du tableau à traiter par la fonction.</dd>
-  <dt><code>index</code> {{optional_inline}}</dt>
-  <dd>L'indice de l'élément qui est traité par la fonction.</dd>
-  <dt><code>array </code>{{optional_inline}}</dt>
-  <dd>Le tableau sur lequel on a appelé la méthode <code>some</code>.</dd>
- </dl>
- </dd>
- <dt><code>objetThis</code> {{optional_inline}}</dt>
- <dd>Paramètre optionnel. Il correspond à la valeur à utiliser pour <code>this</code> lors de l'exécution de la fonction <code>callback</code>.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p><code>true</code> si la fonction <code>callback</code> renvoie une valeur équivalente à <code>true</code> pour au moins un des éléments du tableau, sinon elle renvoie <code>false</code>.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>La méthode <code>some()</code> exécute la fonction <code>callback</code> une seule fois pour chaque élément présent dans le tableau jusqu'à ce qu'elle en trouve un pour lequel <code>callback</code> renvoie une valeur équivalente à <code>true</code> dans un contexte booléen. Si un tel élément est trouvé, <code>some()</code> renvoie immédiatement <code>true</code>. Dans le cas contraire, <code>some</code> renvoie <code>false</code>. <code>callback</code> n'est invoquée que pour les indices du tableau auxquels des valeurs sont assignées ; elle n'est pas invoquée pour les indices qui ont été supprimés ou auxquels aucune valeur n'a jamais été assignée.</p>
-
-<p>La fonction <code>callback</code> est invoquée avec trois paramètres : la valeur de l'élément, l'indice de l'élément et l'objet <code>Array</code> parcouru.</p>
-
-<p>Si un paramètre <code>objetThis</code> est fourni à <code>some()</code>, il sera utilisé comme valeur de <code>this</code> pour chaque invocation du <code>callback</code>. Sinon, la valeur  {{jsxref("undefined")}} sera passée pour utilisation comme valeur <code>this</code>. La valeur <code>this</code> finalement utilisée par <code>callback</code> est déterminée en fonction <a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/L_op%C3%A9rateur_this">des règles habituelles pour déterminer <code>this</code> pour une fonction</a>.</p>
-
-<p>La méthode <code>some()</code> ne modifie pas le tableau sur lequel elle est appelée.</p>
-
-<p>La liste des éléments traités par <code>some()</code> est définie avant la première invocation du <code>callback</code>. Les éléments qui sont ajoutés au tableau après le début de l'appel à <code>some</code> ne seront pas visités par <code>callback</code>. Si un élément existant non encore visité est modifié par <code>callback</code>, sa valeur passée à <code>callback</code> sera sa valeur au moment où <code>some</code> visite l'indice de cet élément ; les éléments supprimés ne seront pas visités.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Tester_la_valeur_des_éléments_d'un_tableau">Tester la valeur des éléments d'un tableau</h3>
-
-<p>L'exemple suivant teste si certains éléments d'un tableau sont plus grands que 10.</p>
-
-<pre class="brush: js">function estAssezGrand(element, indice, array) {
-  return (element &gt;= 10);
-}
-var resultat = [2, 5, 8, 1, 4].some(estAssezGrand);
-// resultat vaut false
-passed = [12, 5, 8, 1, 4].some(estAssezGrand);
-// passed vaut true
-</pre>
-
-<h3 id="Tester_la_valeur_des_éléments_avec_les_fonctions_fléchées">Tester la valeur des éléments avec les fonctions fléchées</h3>
-
-<p><a href="/fr/docs/Web/JavaScript/Reference/Fonctions/Fonctions_fl%C3%A9ch%C3%A9es">Les fonctions fléchées </a>permettent d'utiliser une syntaxe plus concise pour réaliser la même opération que l'exemple précédent.</p>
-
-<pre class="brush: js">[2, 5, 8, 1, 4].some(elem =&gt; elem &gt; 10); // false
-[12, 5, 8, 1, 4].some(elem =&gt; elem &gt; 10); // true</pre>
-
-<div class="note">
-<p><strong>Note :</strong> Si on veut vérifier qu'un élément est dans un tableau, on pourra utiliser la méthode {{jsxref("Array.prototype.includes()")}}.</p>
-</div>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-15.4.4.17', 'Array.prototype.some')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td>Définition initiale. Implémentée avec JavaScript 1.6.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-array.prototype.some', 'Array.prototype.some')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-array.prototype.some', 'Array.prototype.some')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Array.some")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Array.prototype.find()")}}</li>
- <li>{{jsxref("Array.prototype.forEach()")}}</li>
- <li>{{jsxref("Array.prototype.every()")}}</li>
- <li>{{jsxref("Array.prototype.includes()")}}</li>
- <li>{{jsxref("TypedArray.prototype.some()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/array/some/index.md b/files/fr/web/javascript/reference/global_objects/array/some/index.md
new file mode 100644
index 0000000000..e24fc4cf20
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/array/some/index.md
@@ -0,0 +1,104 @@
+---
+title: Array.prototype.some()
+slug: Web/JavaScript/Reference/Global_Objects/Array/some
+tags:
+  - Array
+  - ECMAScript 5
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - polyfill
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/some
+original_slug: Web/JavaScript/Reference/Objets_globaux/Array/some
+---
+{{JSRef}}
+
+La méthode **`some()`** teste si au moins un élément du tableau passe le test implémenté par la fonction fournie. Elle renvoie un booléen indiquant le résultat du test.
+
+> **Note :** Cette méthode renverra `false`, quelle que soit la condition, si elle est utilisée sur un tableau vide.
+
+{{EmbedInteractiveExample("pages/js/array-some.html")}}
+
+## Syntaxe
+
+    arr.some(callback[, objetThis])
+
+### Paramètres
+
+- `callback`
+
+  - : La fonction à tester pour chaque élément du tableau. Cette fonction utilise trois arguments :
+
+    - `valeurCourante`
+      - : L'élément du tableau à traiter par la fonction.
+    - `index` {{optional_inline}}
+      - : L'indice de l'élément qui est traité par la fonction.
+    - `array `{{optional_inline}}
+      - : Le tableau sur lequel on a appelé la méthode `some`.
+
+- `objetThis` {{optional_inline}}
+  - : Paramètre optionnel. Il correspond à la valeur à utiliser pour `this` lors de l'exécution de la fonction `callback`.
+
+### Valeur de retour
+
+`true` si la fonction `callback` renvoie une valeur équivalente à `true` pour au moins un des éléments du tableau, sinon elle renvoie `false`.
+
+## Description
+
+La méthode `some()` exécute la fonction `callback` une seule fois pour chaque élément présent dans le tableau jusqu'à ce qu'elle en trouve un pour lequel `callback` renvoie une valeur équivalente à `true` dans un contexte booléen. Si un tel élément est trouvé, `some()` renvoie immédiatement `true`. Dans le cas contraire, `some` renvoie `false`. `callback` n'est invoquée que pour les indices du tableau auxquels des valeurs sont assignées ; elle n'est pas invoquée pour les indices qui ont été supprimés ou auxquels aucune valeur n'a jamais été assignée.
+
+La fonction `callback` est invoquée avec trois paramètres : la valeur de l'élément, l'indice de l'élément et l'objet `Array` parcouru.
+
+Si un paramètre `objetThis` est fourni à `some()`, il sera utilisé comme valeur de `this` pour chaque invocation du `callback`. Sinon, la valeur  {{jsxref("undefined")}} sera passée pour utilisation comme valeur `this`. La valeur `this` finalement utilisée par `callback` est déterminée en fonction [des règles habituelles pour déterminer `this` pour une fonction](/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/L_op%C3%A9rateur_this).
+
+La méthode `some()` ne modifie pas le tableau sur lequel elle est appelée.
+
+La liste des éléments traités par `some()` est définie avant la première invocation du `callback`. Les éléments qui sont ajoutés au tableau après le début de l'appel à `some` ne seront pas visités par `callback`. Si un élément existant non encore visité est modifié par `callback`, sa valeur passée à `callback` sera sa valeur au moment où `some` visite l'indice de cet élément ; les éléments supprimés ne seront pas visités.
+
+## Exemples
+
+### Tester la valeur des éléments d'un tableau
+
+L'exemple suivant teste si certains éléments d'un tableau sont plus grands que 10.
+
+```js
+function estAssezGrand(element, indice, array) {
+  return (element >= 10);
+}
+var resultat = [2, 5, 8, 1, 4].some(estAssezGrand);
+// resultat vaut false
+passed = [12, 5, 8, 1, 4].some(estAssezGrand);
+// passed vaut true
+```
+
+### Tester la valeur des éléments avec les fonctions fléchées
+
+[Les fonctions fléchées ](/fr/docs/Web/JavaScript/Reference/Fonctions/Fonctions_fl%C3%A9ch%C3%A9es)permettent d'utiliser une syntaxe plus concise pour réaliser la même opération que l'exemple précédent.
+
+```js
+[2, 5, 8, 1, 4].some(elem => elem > 10); // false
+[12, 5, 8, 1, 4].some(elem => elem > 10); // true
+```
+
+> **Note :** Si on veut vérifier qu'un élément est dans un tableau, on pourra utiliser la méthode {{jsxref("Array.prototype.includes()")}}.
+
+## Spécifications
+
+| Spécification                                                                                        | État                         | Commentaires                                          |
+| ---------------------------------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- |
+| {{SpecName('ES5.1', '#sec-15.4.4.17', 'Array.prototype.some')}}                 | {{Spec2('ES5.1')}}     | Définition initiale. Implémentée avec JavaScript 1.6. |
+| {{SpecName('ES6', '#sec-array.prototype.some', 'Array.prototype.some')}}     | {{Spec2('ES6')}}         |                                                       |
+| {{SpecName('ESDraft', '#sec-array.prototype.some', 'Array.prototype.some')}} | {{Spec2('ESDraft')}} |                                                       |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Array.some")}}
+
+## Voir aussi
+
+- {{jsxref("Array.prototype.find()")}}
+- {{jsxref("Array.prototype.forEach()")}}
+- {{jsxref("Array.prototype.every()")}}
+- {{jsxref("Array.prototype.includes()")}}
+- {{jsxref("TypedArray.prototype.some()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/array/sort/index.html b/files/fr/web/javascript/reference/global_objects/array/sort/index.html
deleted file mode 100644
index 84ce52113f..0000000000
--- a/files/fr/web/javascript/reference/global_objects/array/sort/index.html
+++ /dev/null
@@ -1,283 +0,0 @@
----
-title: Array.prototype.sort()
-slug: Web/JavaScript/Reference/Global_Objects/Array/sort
-tags:
-  - Array
-  - JavaScript
-  - Méthode
-  - Prototype
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Array/sort
-original_slug: Web/JavaScript/Reference/Objets_globaux/Array/sort
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <strong><code>sort()</code></strong> trie les éléments d'un tableau, dans ce même tableau, et renvoie le tableau. Par défaut, le tri s'effectue sur les éléments du tableau convertis en chaînes de caractères et triées selon les valeurs des unités de code UTF-16 des caractères.</p>
-
-<p>La complexité en espace mémoire et en temps utilisée pour le tri ne peut pas être garantie car elle dépend de l'implémentation.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/array-sort.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>arr</var>.sort()
-<var>arr</var>.sort(fonctionComparaison)</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>fonctionComparaison</code> {{optional_inline}}</dt>
- <dd>Ce paramètre optionnel permet de spécifier une fonction définissant l'ordre de tri. Si absente, le tableau est trié selon la valeur de point de code <a href="/fr/docs/Web/JavaScript/Guide/Valeurs,_variables,_et_litt%C3%A9raux#Unicode">Unicode</a> de chaque caractère, d'après la conversion en chaine de caractères de chaque élément. Cette fonction prendra deux arguments : le premier élément à comparer et le deuxième élément à comparer.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Le tableau trié (le tri est effectué sur le tableau courant qui est modifié, aucune copie n'est réalisée).</p>
-
-<h2 id="Description">Description</h2>
-
-<p>Si le paramètre <code>fonctionComparaison</code> n'est pas fourni, les éléments qui ne valent pas <code>undefined</code> sont triés en les convertissant en chaines de caractères et en comparant ces chaines selon l'ordre des points de code Unicode. Par exemple, "banane" sera trié avant "cerise", mais "Cerise" arrivera avant "banane" à cause de la majuscule (les majuscules arrivent avant dans la liste). Dans un tri numérique, 9 sera trié avant 80, mais comme ces nombres sont convertis en chaînes de caractères, "80" arrive avant "9" selon l'ordre des unités de code UTF-16. Les éléments valant <code>undefined</code> sont placés à la fin du tableau.</p>
-
-<div class="note">
-<p><strong>Note :</strong> En UTF-16, les caractères Unicode situés après <code>\uFFFF</code> sont encodés avec deux unités de code <em>surrogates</em> sur l'intervalle <code>\uD800</code>-<code>\uDFFF</code>. Pour comparer les chaînes de caractères entre elles, ce sont les unités de code séparées qui sont prises en compte. Ainsi, le caractère formé par la paire <em>surrogate</em> <code>\uD655 \uDE55</code> sera trié avant le caractère <code>\uFF3A</code>.</p>
-</div>
-
-<p>Si le paramètre <code>fonctionComparaison</code> est fourni, les éléments du tableau (qui ne valent pas <code>undefined</code>) sont triés selon la valeur de retour de la fonction de comparaison. Si <code>a</code> et <code>b</code> sont deux éléments à comparer, alors :</p>
-
-<ul>
- <li>Si <code>fonctionComparaison(a, b)</code> est inférieur à 0, on trie <code>a</code> avec un indice inférieur à <code>b</code> (<code>a</code> sera classé avant <code>b</code>)</li>
- <li>Si <code>fonctionComparaison(a, b)</code> renvoie 0, on laisse <code>a</code> et <code>b</code> inchangés l'un par rapport à l'autre, mais triés par rapport à tous les autres éléments. Note : la norme ECMAScript ne garantit pas ce comportement, par conséquent tous les navigateurs (par exemple les versions de Mozilla antérieures à 2003) ne respectent pas ceci.</li>
- <li>Si <code>fonctionComparaison(a, b)</code> est supérieur à 0, on trie <code>b</code> avec un indice inférieur à <code>a</code>.</li>
- <li><code>fonctionComparaison(a, b)</code> doit toujours renvoyer le même résultat à partir de la même paire d'arguments. Si la fonction renvoie des résultats incohérents, alors l’ordre dans lequel sont triés les éléments n’est pas défini.</li>
-</ul>
-
-<p>Une fonction de comparaison aura donc généralement la forme suivante :</p>
-
-<pre class="brush: js">function compare(a, b) {
-  if (<em>a est inférieur à b selon les critères de tri</em>)
-     return -1;
-  if (<em>a est supérieur à b selon les critères de tri</em>)
-     return 1;
-  // a doit être égal à b
-  return 0;
-}
-</pre>
-
-<p>Pour comparer des nombres plutôt que des chaînes, la fonction de comparaison peut simplement soustraire <code>b</code> à <code>a</code> (cela fonctionnera si le tableau ne contient pas {{jsxref("NaN")}} ou {{jsxref("Infinity")}}) :</p>
-
-<pre class="brush: js">function compareNombres(a, b) {
-  return a - b;
-}
-</pre>
-
-<p>L'usage des {{jsxref("Opérateurs/L_opérateur_function", "expressions de fonctions","",11)}} s'avère très pratique avec la méthode <code>sort()</code> :</p>
-
-<pre class="brush: js">var nombres = [4, 2, 5, 1, 3];
-nombres.sort(function(a, b) {
-  return a - b;
-});
-console.log(nombres);
-// [1, 2, 3, 4, 5]
-</pre>
-
-<p>ECMAScript 2015 permet d'utiliser <a href="/fr/docs/Web/JavaScript/Reference/Fonctions/Fonctions_fl%C3%A9ch%C3%A9es">les fonctions fléchées</a> et ainsi d'obtenir une syntaxe plus concise :</p>
-
-<pre class="brush: js">let nombres = [4, 2, 5, 1, 3];
-nombres.sort((a, b) =&gt; a - b);
-console.log(nombres);</pre>
-
-<p>Les objets peuvent être triés d'après les valeurs d'une de leurs propriétés.</p>
-
-<pre class="brush: js">var items = [
-  { name: "Edward", value: 21 },
-  { name: "Sharpe", value: 37 },
-  { name: "And", value: 45 },
-  { name: "The", value: -12 },
-  { name: "Magnetic", value: 13 },
-  { name: "Zeros", value: 37 }
-];
-items.sort(function (a, b) {
-  return a.value - b.value;
-});</pre>
-
-<h3 id="Différences_dimplémentation">Différences d'implémentation</h3>
-
-<p>Certaines implémentations de JavaScript utilisent un tri stable : l'ordre partiel de <code>a</code> et <code>b</code> ne change pas si <code>a</code> et <code>b</code> sont égaux. Si l'indice de <code>a</code> était inférieur à celui de <code>b</code> avant le tri, il le sera toujours après, quels que soient les mouvements de <code>a</code> et <code>b</code> dus au tri.</p>
-
-<p>Le tri est stable dans <a href="/fr/docs/SpiderMonkey">SpiderMonkey</a> et tous les navigateurs basés sur Mozilla à partir de <a href="/fr/docs/Gecko">Gecko</a> 1.9 (voir le {{ Bug(224128) }}).</p>
-
-<p>Le comportement de la méthode <code>sort()</code> a changé entre JavaScript 1.1 et JavaScript 1.2.</p>
-
-<p>En JavaScript 1.1, sur certaines plateformes, la méthode <code>sort</code> ne fonctionnait pas. Le tri fonctionne sur toutes les plateformes à partir de JavaScript 1.2.</p>
-
-<p>En JavaScript 1.2, cette méthode ne convertit plus les éléments non définis (<code>undefined</code>) en <code>null</code> ; elle les place en fin de tableau. Par exemple, supposons que vous ayez ce script :</p>
-
-<pre class="brush: js">var a = [];
-a[0] = "araignée";
-a[5] = "zèbre";
-
-function writeArray(x) {
-  for (i = 0; i &lt; x.length; i++) {
-    console.log(x[i]);
-    if (i &lt; x.length-1)
-      console.log(", ");
-  }
-}
-
-writeArray(a);
-a.sort();
-console.log("\n");
-writeArray(a);
-</pre>
-
-<p>En JavaScript 1.1, cette fonction affichait :</p>
-
-<pre class="eval">araignée, null, null, null, null, zèbre
-araignée, null, null, null, null, zèbre
-</pre>
-
-<p>En JavaScript 1.2, elle affichera :</p>
-
-<pre class="eval">araignée, undefined, undefined, undefined, undefined, zèbre
-araignée, zèbre, undefined, undefined, undefined, undefined
-</pre>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Création_affichage_et_tri_dun_tableau">Création, affichage et tri d'un tableau</h3>
-
-<p>L'exemple qui suit crée quatre tableaux et affiche le tableau original, puis les tableaux triés. Les tableaux numériques sont triés d'abord sans, puis avec une fonction de comparaison.</p>
-
-<pre class="brush: js">var stringArray = ["Bosse", "Bleue", "Béluga"];
-var numericStringArray = ["80", "9", "700"];
-var numberArray = [40, 1, 5, 200];
-var mixedNumericArray = ["80", "9", "700", 40, 1, 5, 200];
-
-function compareNombres(a, b) {
-  return a - b;
-}
-
-console.log("Chaînes : " + stringArray.join() +"\n");
-console.log("Triées : " + stringArray.sort() +"\n\n");
-
-console.log("Nombres : " + numberArray.join() +"\n");
-console.log("Triés sans fonction de comparaison : " + numberArray.sort() +"\n");
-console.log("Triés avec compareNombres : " + numberArray.sort(compareNombres) +"\n\n");
-
-console.log("Chaînes numériques : " + numericStringArray.join() +"\n");
-console.log("Triées sans fonction de comparaison : " + numericStringArray.sort() +"\n");
-console.log("Triées avec compareNombres : " + numericStringArray.sort(compareNombres) +"\n\n");
-
-console.log("Nombres et chaînes numériques : " + mixedNumericArray.join() +"\n");
-console.log("Triés sans fonction de comparaison : " + mixedNumericArray.sort() +"\n");
-console.log("Triés avec compareNombres : " + mixedNumericArray.sort(compareNombres) +"\n\n");
-</pre>
-
-<p>Cet exemple produit la sortie suivante. Comme on peut le voir, lorsqu'on utilise la fonction de comparaison, les nombres sont triés correctement qu'ils soient des nombres ou des chaînes numériques.</p>
-
-<pre class="eval">Chaînes : Bosse,Bleue,Béluga
-Triées : Bleue,Bosse,Béluga
-
-Nombres : 40,1,5,200
-Triés sans fonction de comparaison : 1,200,40,5
-Triés avec compareNombres : 1,5,40,200
-
-Chaînes numériques : 80,9,700
-Triées sans fonction de comparaison : 700,80,9
-Triées avec compareNombres : 9,80,700
-
-Nombres et chaînes numériques : 80,9,700,40,1,5,200
-Triés sans fonction de comparaison : 1,200,40,5,700,80,9
-Triés avec compareNombres : 1,5,9,40,80,200,700
-</pre>
-
-<h3 id="Trier_des_caractères_non-ASCII">Trier des caractères non-ASCII</h3>
-
-<p>Pour des chaines de caractères contenant des caractères non ASCII, c'est à dire des chaines de caractères contenant par exemple des accents (é, è, a, ä, etc.) : utilisez {{jsxref("String.localeCompare")}}. Cette fonction peut comparer ces caractères afin qu'ils apparaissent dans le bon ordre.</p>
-
-<pre class="brush: js">var items = ["réservé", "premier", "cliché", "communiqué", "café" ,"adieu"];
-items.sort(function (a, b) {
-  return a.localeCompare(b);
-});
-
-// items is [ 'adieu', 'café', 'cliché', 'communiqué', 'premier', 'réservé' ]</pre>
-
-<h3 id="Trier_avec_map">Trier avec map</h3>
-
-<p>La fonction de comparaison peut être amenée à être appelée plusieurs fois pour un même élément du tableau. Selon la fonction utilisée, cela peut entraîner des problèmes de performances. Plus le tableau est grand et plus la fonction de comparaison est complexe, plus il sera judicieux d'envisager des opérations de fonctions appliquées au tableau (<em>map</em>). L'idée est la suivante : on extrait les valeurs du tableau original, en appliquant des opérations dans un tableau temporaire, puis on trie ce tableau temporaire. Enfin, on recompose le tableau final avec les éléments du premier tableau et l'ordre obtenu.</p>
-
-<pre class="brush: js">// le tableau à trier
-var liste = ['Delta', 'alpha', 'CHARLIE', 'bravo'];
-
-// Création d'objet temporaire qui contient les positions
-// et les valeurs en minuscules
-var mapped = liste.map(function(e, i) {
-  return { index: i, value: e.toLowerCase() };
-})
-
-// on trie l'objet temporaire avec les valeurs réduites
-mapped.sort(function(a, b) {
-  if (a.value &gt; b.value) {
-    return 1;
-  }
-  if (a.value &lt; b.value) {
-    return -1;
-  }
-  return 0;
-});
-
-// on utilise un objet final pour les résultats
-var result = mapped.map(function(e){
-  return liste[e.index];
-});
-</pre>
-
-<div class="note">
-<p><strong>Note :</strong> Une bibliothèque <em>open source</em> utilise cette approche : <code><a href="https://null.house/open-source/mapsort">mapsort</a></code>.</p>
-</div>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('ES1')}}</td>
-   <td>{{Spec2('ES1')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-15.4.4.11', 'Array.prototype.sort')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-array.prototype.sort', 'Array.prototype.sort')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-array.prototype.sort', 'Array.prototype.sort')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Array.sort")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Array.prototype.reverse()")}}</li>
- <li>{{jsxref("String.prototype.localeCompare()")}}</li>
- <li><a href="https://v8.dev/blog/array-sort">À propos de la stabilité du tri pour le moteur V8</a></li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/array/sort/index.md b/files/fr/web/javascript/reference/global_objects/array/sort/index.md
new file mode 100644
index 0000000000..75fe8a8ce3
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/array/sort/index.md
@@ -0,0 +1,257 @@
+---
+title: Array.prototype.sort()
+slug: Web/JavaScript/Reference/Global_Objects/Array/sort
+tags:
+  - Array
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/sort
+original_slug: Web/JavaScript/Reference/Objets_globaux/Array/sort
+---
+{{JSRef}}
+
+La méthode **`sort()`** trie les éléments d'un tableau, dans ce même tableau, et renvoie le tableau. Par défaut, le tri s'effectue sur les éléments du tableau convertis en chaînes de caractères et triées selon les valeurs des unités de code UTF-16 des caractères.
+
+La complexité en espace mémoire et en temps utilisée pour le tri ne peut pas être garantie car elle dépend de l'implémentation.
+
+{{EmbedInteractiveExample("pages/js/array-sort.html")}}
+
+## Syntaxe
+
+    arr.sort()
+    arr.sort(fonctionComparaison)
+
+### Paramètres
+
+- `fonctionComparaison` {{optional_inline}}
+  - : Ce paramètre optionnel permet de spécifier une fonction définissant l'ordre de tri. Si absente, le tableau est trié selon la valeur de point de code [Unicode](/fr/docs/Web/JavaScript/Guide/Valeurs,_variables,_et_litt%C3%A9raux#Unicode) de chaque caractère, d'après la conversion en chaine de caractères de chaque élément. Cette fonction prendra deux arguments : le premier élément à comparer et le deuxième élément à comparer.
+
+### Valeur de retour
+
+Le tableau trié (le tri est effectué sur le tableau courant qui est modifié, aucune copie n'est réalisée).
+
+## Description
+
+Si le paramètre `fonctionComparaison` n'est pas fourni, les éléments qui ne valent pas `undefined` sont triés en les convertissant en chaines de caractères et en comparant ces chaines selon l'ordre des points de code Unicode. Par exemple, "banane" sera trié avant "cerise", mais "Cerise" arrivera avant "banane" à cause de la majuscule (les majuscules arrivent avant dans la liste). Dans un tri numérique, 9 sera trié avant 80, mais comme ces nombres sont convertis en chaînes de caractères, "80" arrive avant "9" selon l'ordre des unités de code UTF-16. Les éléments valant `undefined` sont placés à la fin du tableau.
+
+> **Note :** En UTF-16, les caractères Unicode situés après `\uFFFF` sont encodés avec deux unités de code _surrogates_ sur l'intervalle `\uD800`-`\uDFFF`. Pour comparer les chaînes de caractères entre elles, ce sont les unités de code séparées qui sont prises en compte. Ainsi, le caractère formé par la paire _surrogate_ `\uD655 \uDE55` sera trié avant le caractère `\uFF3A`.
+
+Si le paramètre `fonctionComparaison` est fourni, les éléments du tableau (qui ne valent pas `undefined`) sont triés selon la valeur de retour de la fonction de comparaison. Si `a` et `b` sont deux éléments à comparer, alors :
+
+- Si `fonctionComparaison(a, b)` est inférieur à 0, on trie `a` avec un indice inférieur à `b` (`a` sera classé avant `b`)
+- Si `fonctionComparaison(a, b)` renvoie 0, on laisse `a` et `b` inchangés l'un par rapport à l'autre, mais triés par rapport à tous les autres éléments. Note : la norme ECMAScript ne garantit pas ce comportement, par conséquent tous les navigateurs (par exemple les versions de Mozilla antérieures à 2003) ne respectent pas ceci.
+- Si `fonctionComparaison(a, b)` est supérieur à 0, on trie `b` avec un indice inférieur à `a`.
+- `fonctionComparaison(a, b)` doit toujours renvoyer le même résultat à partir de la même paire d'arguments. Si la fonction renvoie des résultats incohérents, alors l’ordre dans lequel sont triés les éléments n’est pas défini.
+
+Une fonction de comparaison aura donc généralement la forme suivante :
+
+```js
+function compare(a, b) {
+  if (a est inférieur à b selon les critères de tri)
+     return -1;
+  if (a est supérieur à b selon les critères de tri)
+     return 1;
+  // a doit être égal à b
+  return 0;
+}
+```
+
+Pour comparer des nombres plutôt que des chaînes, la fonction de comparaison peut simplement soustraire `b` à `a` (cela fonctionnera si le tableau ne contient pas {{jsxref("NaN")}} ou {{jsxref("Infinity")}}) :
+
+```js
+function compareNombres(a, b) {
+  return a - b;
+}
+```
+
+L'usage des {{jsxref("Opérateurs/L_opérateur_function", "expressions de fonctions","",11)}} s'avère très pratique avec la méthode `sort()` :
+
+```js
+var nombres = [4, 2, 5, 1, 3];
+nombres.sort(function(a, b) {
+  return a - b;
+});
+console.log(nombres);
+// [1, 2, 3, 4, 5]
+```
+
+ECMAScript 2015 permet d'utiliser [les fonctions fléchées](/fr/docs/Web/JavaScript/Reference/Fonctions/Fonctions_fl%C3%A9ch%C3%A9es) et ainsi d'obtenir une syntaxe plus concise :
+
+```js
+let nombres = [4, 2, 5, 1, 3];
+nombres.sort((a, b) => a - b);
+console.log(nombres);
+```
+
+Les objets peuvent être triés d'après les valeurs d'une de leurs propriétés.
+
+```js
+var items = [
+  { name: "Edward", value: 21 },
+  { name: "Sharpe", value: 37 },
+  { name: "And", value: 45 },
+  { name: "The", value: -12 },
+  { name: "Magnetic", value: 13 },
+  { name: "Zeros", value: 37 }
+];
+items.sort(function (a, b) {
+  return a.value - b.value;
+});
+```
+
+### Différences d'implémentation
+
+Certaines implémentations de JavaScript utilisent un tri stable : l'ordre partiel de `a` et `b` ne change pas si `a` et `b` sont égaux. Si l'indice de `a` était inférieur à celui de `b` avant le tri, il le sera toujours après, quels que soient les mouvements de `a` et `b` dus au tri.
+
+Le tri est stable dans [SpiderMonkey](/fr/docs/SpiderMonkey) et tous les navigateurs basés sur Mozilla à partir de [Gecko](/fr/docs/Gecko) 1.9 (voir le {{ Bug(224128) }}).
+
+Le comportement de la méthode `sort()` a changé entre JavaScript 1.1 et JavaScript 1.2.
+
+En JavaScript 1.1, sur certaines plateformes, la méthode `sort` ne fonctionnait pas. Le tri fonctionne sur toutes les plateformes à partir de JavaScript 1.2.
+
+En JavaScript 1.2, cette méthode ne convertit plus les éléments non définis (`undefined`) en `null` ; elle les place en fin de tableau. Par exemple, supposons que vous ayez ce script :
+
+```js
+var a = [];
+a[0] = "araignée";
+a[5] = "zèbre";
+
+function writeArray(x) {
+  for (i = 0; i < x.length; i++) {
+    console.log(x[i]);
+    if (i < x.length-1)
+      console.log(", ");
+  }
+}
+
+writeArray(a);
+a.sort();
+console.log("\n");
+writeArray(a);
+```
+
+En JavaScript 1.1, cette fonction affichait :
+
+    araignée, null, null, null, null, zèbre
+    araignée, null, null, null, null, zèbre
+
+En JavaScript 1.2, elle affichera :
+
+    araignée, undefined, undefined, undefined, undefined, zèbre
+    araignée, zèbre, undefined, undefined, undefined, undefined
+
+## Exemples
+
+### Création, affichage et tri d'un tableau
+
+L'exemple qui suit crée quatre tableaux et affiche le tableau original, puis les tableaux triés. Les tableaux numériques sont triés d'abord sans, puis avec une fonction de comparaison.
+
+```js
+var stringArray = ["Bosse", "Bleue", "Béluga"];
+var numericStringArray = ["80", "9", "700"];
+var numberArray = [40, 1, 5, 200];
+var mixedNumericArray = ["80", "9", "700", 40, 1, 5, 200];
+
+function compareNombres(a, b) {
+  return a - b;
+}
+
+console.log("Chaînes : " + stringArray.join() +"\n");
+console.log("Triées : " + stringArray.sort() +"\n\n");
+
+console.log("Nombres : " + numberArray.join() +"\n");
+console.log("Triés sans fonction de comparaison : " + numberArray.sort() +"\n");
+console.log("Triés avec compareNombres : " + numberArray.sort(compareNombres) +"\n\n");
+
+console.log("Chaînes numériques : " + numericStringArray.join() +"\n");
+console.log("Triées sans fonction de comparaison : " + numericStringArray.sort() +"\n");
+console.log("Triées avec compareNombres : " + numericStringArray.sort(compareNombres) +"\n\n");
+
+console.log("Nombres et chaînes numériques : " + mixedNumericArray.join() +"\n");
+console.log("Triés sans fonction de comparaison : " + mixedNumericArray.sort() +"\n");
+console.log("Triés avec compareNombres : " + mixedNumericArray.sort(compareNombres) +"\n\n");
+```
+
+Cet exemple produit la sortie suivante. Comme on peut le voir, lorsqu'on utilise la fonction de comparaison, les nombres sont triés correctement qu'ils soient des nombres ou des chaînes numériques.
+
+    Chaînes : Bosse,Bleue,Béluga
+    Triées : Bleue,Bosse,Béluga
+
+    Nombres : 40,1,5,200
+    Triés sans fonction de comparaison : 1,200,40,5
+    Triés avec compareNombres : 1,5,40,200
+
+    Chaînes numériques : 80,9,700
+    Triées sans fonction de comparaison : 700,80,9
+    Triées avec compareNombres : 9,80,700
+
+    Nombres et chaînes numériques : 80,9,700,40,1,5,200
+    Triés sans fonction de comparaison : 1,200,40,5,700,80,9
+    Triés avec compareNombres : 1,5,9,40,80,200,700
+
+### Trier des caractères non-ASCII
+
+Pour des chaines de caractères contenant des caractères non ASCII, c'est à dire des chaines de caractères contenant par exemple des accents (é, è, a, ä, etc.) : utilisez {{jsxref("String.localeCompare")}}. Cette fonction peut comparer ces caractères afin qu'ils apparaissent dans le bon ordre.
+
+```js
+var items = ["réservé", "premier", "cliché", "communiqué", "café" ,"adieu"];
+items.sort(function (a, b) {
+  return a.localeCompare(b);
+});
+
+// items is [ 'adieu', 'café', 'cliché', 'communiqué', 'premier', 'réservé' ]
+```
+
+### Trier avec map
+
+La fonction de comparaison peut être amenée à être appelée plusieurs fois pour un même élément du tableau. Selon la fonction utilisée, cela peut entraîner des problèmes de performances. Plus le tableau est grand et plus la fonction de comparaison est complexe, plus il sera judicieux d'envisager des opérations de fonctions appliquées au tableau (_map_). L'idée est la suivante : on extrait les valeurs du tableau original, en appliquant des opérations dans un tableau temporaire, puis on trie ce tableau temporaire. Enfin, on recompose le tableau final avec les éléments du premier tableau et l'ordre obtenu.
+
+```js
+// le tableau à trier
+var liste = ['Delta', 'alpha', 'CHARLIE', 'bravo'];
+
+// Création d'objet temporaire qui contient les positions
+// et les valeurs en minuscules
+var mapped = liste.map(function(e, i) {
+  return { index: i, value: e.toLowerCase() };
+})
+
+// on trie l'objet temporaire avec les valeurs réduites
+mapped.sort(function(a, b) {
+  if (a.value > b.value) {
+    return 1;
+  }
+  if (a.value < b.value) {
+    return -1;
+  }
+  return 0;
+});
+
+// on utilise un objet final pour les résultats
+var result = mapped.map(function(e){
+  return liste[e.index];
+});
+```
+
+> **Note :** Une bibliothèque _open source_ utilise cette approche : [`mapsort`](https://null.house/open-source/mapsort).
+
+## Spécifications
+
+| Spécification                                                                                        | État                         | Commentaires         |
+| ---------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName('ES1')}}                                                                             | {{Spec2('ES1')}}         | Définition initiale. |
+| {{SpecName('ES5.1', '#sec-15.4.4.11', 'Array.prototype.sort')}}                 | {{Spec2('ES5.1')}}     |                      |
+| {{SpecName('ES6', '#sec-array.prototype.sort', 'Array.prototype.sort')}}     | {{Spec2('ES6')}}         |                      |
+| {{SpecName('ESDraft', '#sec-array.prototype.sort', 'Array.prototype.sort')}} | {{Spec2('ESDraft')}} |                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Array.sort")}}
+
+## Voir aussi
+
+- {{jsxref("Array.prototype.reverse()")}}
+- {{jsxref("String.prototype.localeCompare()")}}
+- [À propos de la stabilité du tri pour le moteur V8](https://v8.dev/blog/array-sort)
diff --git a/files/fr/web/javascript/reference/global_objects/array/splice/index.html b/files/fr/web/javascript/reference/global_objects/array/splice/index.html
deleted file mode 100644
index a4fc4f2ad5..0000000000
--- a/files/fr/web/javascript/reference/global_objects/array/splice/index.html
+++ /dev/null
@@ -1,132 +0,0 @@
----
-title: Array.prototype.splice()
-slug: Web/JavaScript/Reference/Global_Objects/Array/splice
-tags:
-  - Array
-  - JavaScript
-  - Méthode
-  - Prototype
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Array/splice
-original_slug: Web/JavaScript/Reference/Objets_globaux/Array/splice
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <strong><code>splice()</code></strong> modifie le contenu d'un tableau en retirant des éléments et/ou en ajoutant de nouveaux éléments <a href="https://en.wikipedia.org/wiki/In-place_algorithm">à même le tableau</a>.On peut ainsi vider ou remplacer une partie d'un tableau.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/array-splice.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>var tabElementsSupprimes = array</var>.splice(<var>début</var>, nbASupprimer[, <var>élem1</var>[, élem2[, ...]]])
-</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>début</code></dt>
- <dd>L'indice à partir duquel commencer à changer le tableau (l'indice du premier élement étant <code>0</code>). Si sa valeur est supérieure à la longueur du tableau <code><var>array</var>.length</code>, <code>début</code> est ramené à la longueur du tableau <code><var>array</var>.length</code>. S'il est négatif, le changement commencera d'autant d'éléments à partir de la fin du tableau, c'est à dire à partir de l'index  <code><var>array</var>.length + <var>début</var></code>. Si <code><var>array</var>.length + <var>début</var></code> est inférieur à <code>0</code>, le changement commencera à l'index <code>0</code>.</dd>
- <dt><code>nbASupprimer</code></dt>
- <dd>Un entier indiquant le nombre d'anciens éléments à remplacer.<br>
- Si ce paramètre est absent ou si sa valeur est supérieure ou égale à <code>array.length - début</code>, alors les éléments entre <code>début</code> et la fin du tableau seront supprimés. Si <code>nbASupprimer</code> vaut 0, aucun élément ne sera supprimé. Dans ce cas, il est nécessaire de spécifier au moins un nouvel élément.</dd>
- <dt><code>élemN</code></dt>
- <dd>Les éléments à ajouter au tableau à partir de <code>début</code>. Si vous ne spécifiez pas de nouvel élément, les anciens éléments seront simplement supprimés du tableau.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Un tableau contenant les éléments supprimés. Si un seul élément est supprimé, un tableau contenant un unique élément est retourné.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>Si vous spécifiez un nombre différent d'éléments à insérer et d'éléments à supprimer, le tableau aura une longueur différente après l'appel de la méthode.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Utiliser_splice">Utiliser <code>splice</code></h3>
-
-<p>Le script suivant illustre l'utilisation de <code>splice</code> :</p>
-
-<pre class="brush: js">var mesPoissons  = ["scalaire", "clown", "mandarin", "chirurgien"];
-
-// supprime 0 élément à partir de l'index 2, et insère "tambour"
-var enleves = mesPoissons.splice(2, 0, "tambour");
-// mesPoissons est ["scalaire", "clown", "tambour", "mandarin", "chirurgien"]
-// enleves est [], aucun élément supprimé
-
-// supprime 1 élément à partir de l'index 3
-enleves = mesPoissons.splice(3, 1);
-// mesPoissons est ["scalaire", "clown", "tambour", "chirurgien"]
-// enleves est ["mandarin"]
-
-// supprime 1 élément à partir de l'index 2, et insère "trompette"
-enleves = mesPoissons.splice(2, 1, "trompette");
-// mesPoissons est ["scalaire", "clown", "trompette", "chirurgien"]
-// enleves est ["tambour"]
-
-// supprime 2 éléments à partir de l'index 0, et insère "perroquet", "anémone" et"bleu"
-enleves = mesPoissons.splice(0, 2, "perroquet", "anémone", "bleu");
-// mesPoissons est ["perroquet", "anémone", "bleu", "trompette", "chirurgien"]
-// enleves est ["scalaire", "clown"]
-
-// supprime 2 éléments à partir de l'indice 2
-enleves = mesPoissons.splice(mesPoissons.length - 3, 2);
-// mesPoissons est ["perroquet", "anémone", "chirurgien"]
-// enleves est ["bleu", "trompette"]
-
-var mesPoissons = ["perroquet", "anémone", "bleu", "trompette", "chirurgien"];
-// on retire trois éléments à partir de l'indice 2
-enleves = mesPoissons.splice(2);
-// mesPoissons vaut ["perroquet", "anémone"]
-// enleves vaut ["bleu", "trompette", "chirurgien"]
-
-var mesAnimaux = ["cheval", "chien", "chat", "dauphin"];
-enleves = mesAnimaux.splice(-2, 1);
-
-// mesAnimaux vaut ["cheval", "chien", "dauphin"]
-// enleves vaut ["chat"]
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-array.prototype.splice', 'Array.prototype.splice')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-array.prototype.splice', 'Array.prototype.splice')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-15.4.4.12', 'Array.prototype.splice')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES3')}}</td>
-   <td>{{Spec2('ES3')}}</td>
-   <td>Définition initiale. Implémentée avec JavaScript 1.2.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Array.splice")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Array.prototype.push", "push")}} / {{jsxref("Array.prototype.pop", "pop")}} pour ajouter/supprimer des éléments en fin de tableau</li>
- <li>{{jsxref("Array.prototype.unshift", "unshift")}} / {{jsxref("Array.prototype.shift", "shift")}} pour ajouter/supprimer des éléments en début de tableau</li>
- <li>{{jsxref("Array.prototype.concat", "concat")}} qui renvoie un nouveau tableau résultat de la concaténation d'un tableau avec un autre tableau ou d'autres valeurs</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/array/splice/index.md b/files/fr/web/javascript/reference/global_objects/array/splice/index.md
new file mode 100644
index 0000000000..8ce0f4aaf2
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/array/splice/index.md
@@ -0,0 +1,105 @@
+---
+title: Array.prototype.splice()
+slug: Web/JavaScript/Reference/Global_Objects/Array/splice
+tags:
+  - Array
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/splice
+original_slug: Web/JavaScript/Reference/Objets_globaux/Array/splice
+---
+{{JSRef}}
+
+La méthode **`splice()`** modifie le contenu d'un tableau en retirant des éléments et/ou en ajoutant de nouveaux éléments [à même le tableau](https://en.wikipedia.org/wiki/In-place_algorithm).On peut ainsi vider ou remplacer une partie d'un tableau.
+
+{{EmbedInteractiveExample("pages/js/array-splice.html")}}
+
+## Syntaxe
+
+    var tabElementsSupprimes = array.splice(début, nbASupprimer[, élem1[, élem2[, ...]]])
+
+### Paramètres
+
+- `début`
+  - : L'indice à partir duquel commencer à changer le tableau (l'indice du premier élement étant `0`). Si sa valeur est supérieure à la longueur du tableau `array.length`, `début` est ramené à la longueur du tableau `array.length`. S'il est négatif, le changement commencera d'autant d'éléments à partir de la fin du tableau, c'est à dire à partir de l'index  `array.length + début`. Si `array.length + début` est inférieur à `0`, le changement commencera à l'index `0`.
+- `nbASupprimer`
+  - : Un entier indiquant le nombre d'anciens éléments à remplacer.
+    Si ce paramètre est absent ou si sa valeur est supérieure ou égale à `array.length - début`, alors les éléments entre `début` et la fin du tableau seront supprimés. Si `nbASupprimer` vaut 0, aucun élément ne sera supprimé. Dans ce cas, il est nécessaire de spécifier au moins un nouvel élément.
+- `élemN`
+  - : Les éléments à ajouter au tableau à partir de `début`. Si vous ne spécifiez pas de nouvel élément, les anciens éléments seront simplement supprimés du tableau.
+
+### Valeur de retour
+
+Un tableau contenant les éléments supprimés. Si un seul élément est supprimé, un tableau contenant un unique élément est retourné.
+
+## Description
+
+Si vous spécifiez un nombre différent d'éléments à insérer et d'éléments à supprimer, le tableau aura une longueur différente après l'appel de la méthode.
+
+## Exemples
+
+### Utiliser `splice`
+
+Le script suivant illustre l'utilisation de `splice` :
+
+```js
+var mesPoissons  = ["scalaire", "clown", "mandarin", "chirurgien"];
+
+// supprime 0 élément à partir de l'index 2, et insère "tambour"
+var enleves = mesPoissons.splice(2, 0, "tambour");
+// mesPoissons est ["scalaire", "clown", "tambour", "mandarin", "chirurgien"]
+// enleves est [], aucun élément supprimé
+
+// supprime 1 élément à partir de l'index 3
+enleves = mesPoissons.splice(3, 1);
+// mesPoissons est ["scalaire", "clown", "tambour", "chirurgien"]
+// enleves est ["mandarin"]
+
+// supprime 1 élément à partir de l'index 2, et insère "trompette"
+enleves = mesPoissons.splice(2, 1, "trompette");
+// mesPoissons est ["scalaire", "clown", "trompette", "chirurgien"]
+// enleves est ["tambour"]
+
+// supprime 2 éléments à partir de l'index 0, et insère "perroquet", "anémone" et"bleu"
+enleves = mesPoissons.splice(0, 2, "perroquet", "anémone", "bleu");
+// mesPoissons est ["perroquet", "anémone", "bleu", "trompette", "chirurgien"]
+// enleves est ["scalaire", "clown"]
+
+// supprime 2 éléments à partir de l'indice 2
+enleves = mesPoissons.splice(mesPoissons.length - 3, 2);
+// mesPoissons est ["perroquet", "anémone", "chirurgien"]
+// enleves est ["bleu", "trompette"]
+
+var mesPoissons = ["perroquet", "anémone", "bleu", "trompette", "chirurgien"];
+// on retire trois éléments à partir de l'indice 2
+enleves = mesPoissons.splice(2);
+// mesPoissons vaut ["perroquet", "anémone"]
+// enleves vaut ["bleu", "trompette", "chirurgien"]
+
+var mesAnimaux = ["cheval", "chien", "chat", "dauphin"];
+enleves = mesAnimaux.splice(-2, 1);
+
+// mesAnimaux vaut ["cheval", "chien", "dauphin"]
+// enleves vaut ["chat"]
+```
+
+## Spécifications
+
+| Spécification                                                                                                | État                         | Commentaires                                          |
+| ------------------------------------------------------------------------------------------------------------ | ---------------------------- | ----------------------------------------------------- |
+| {{SpecName('ESDraft', '#sec-array.prototype.splice', 'Array.prototype.splice')}} | {{Spec2('ESDraft')}} |                                                       |
+| {{SpecName('ES6', '#sec-array.prototype.splice', 'Array.prototype.splice')}}         | {{Spec2('ES6')}}         |                                                       |
+| {{SpecName('ES5.1', '#sec-15.4.4.12', 'Array.prototype.splice')}}                     | {{Spec2('ES5.1')}}     |                                                       |
+| {{SpecName('ES3')}}                                                                                     | {{Spec2('ES3')}}         | Définition initiale. Implémentée avec JavaScript 1.2. |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Array.splice")}}
+
+## Voir aussi
+
+- {{jsxref("Array.prototype.push", "push")}} / {{jsxref("Array.prototype.pop", "pop")}} pour ajouter/supprimer des éléments en fin de tableau
+- {{jsxref("Array.prototype.unshift", "unshift")}} / {{jsxref("Array.prototype.shift", "shift")}} pour ajouter/supprimer des éléments en début de tableau
+- {{jsxref("Array.prototype.concat", "concat")}} qui renvoie un nouveau tableau résultat de la concaténation d'un tableau avec un autre tableau ou d'autres valeurs
diff --git a/files/fr/web/javascript/reference/global_objects/array/tolocalestring/index.html b/files/fr/web/javascript/reference/global_objects/array/tolocalestring/index.html
deleted file mode 100644
index 8e790d06f6..0000000000
--- a/files/fr/web/javascript/reference/global_objects/array/tolocalestring/index.html
+++ /dev/null
@@ -1,185 +0,0 @@
----
-title: Array.prototype.toLocaleString()
-slug: Web/JavaScript/Reference/Global_Objects/Array/toLocaleString
-tags:
-  - Array
-  - Internationalisation
-  - JavaScript
-  - Méthode
-  - Prototype
-  - Reference
-  - i18n
-  - polyfill
-translation_of: Web/JavaScript/Reference/Global_Objects/Array/toLocaleString
-original_slug: Web/JavaScript/Reference/Objets_globaux/Array/toLocaleString
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <code><strong>toLocaleString()</strong></code> renvoie une chaîne de caractères qui représente les éléments du tableau. Les éléments sont convertis en chaînes de caractères grâce à leurs méthodes <code>toLocaleString</code> et chacune de ces chaînes est séparée des autres avec un séparateur propre à la locale courante (par exemple une virgule ou un point).</p>
-
-<div>{{EmbedInteractiveExample("pages/js/array-tolocalestring.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>arr</var>.toLocaleString();
-<var>arr</var>.toLocaleString(<var>locales</var>);
-<var>arr</var>.toLocaleString(<var>locales</var>, <var>options</var>);
-</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>locales</code> {{optional_inline}}</dt>
- <dd>Une chaine de caractères avec un identifiant de langue BCP 47, ou un tableau de ce type de chaine de caractères. Pour le format général et l'interprétation de l'argument <code>locales</code>. Pour plus de détails quant à la forme et l'interprétation de l'argument <code>locales</code>, on consultera la page {{jsxref("Intl")}}.</dd>
- <dt><code>options</code> {{optional_inline}}</dt>
- <dd>Un objet qui contient des propriétés de configuration. Pour les nombres, consulter {{jsxref("Number.prototype.toLocaleString()")}}, pour les dates, consulter {{jsxref("Date.prototype.toLocaleString()")}}.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Une chaîne de caractères qui représente les éléments du tableau.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Utiliser_les_arguments_locales_et_options">Utiliser les arguments <code>locales</code> et <code>options</code></h3>
-
-<p>Les éléments du tableau sont converties en chaînes de caractères via leurs méthodes <code>toLocaleString()</code>.</p>
-
-<ul>
- <li><code>Object</code> : {{jsxref("Object.prototype.toLocaleString()")}}</li>
- <li><code>Number</code> : {{jsxref("Number.prototype.toLocaleString()")}}</li>
- <li><code>Date</code> : {{jsxref("Date.prototype.toLocaleString()")}}</li>
-</ul>
-
-<p>Ici, on voit qu'on affiche le symbole de la devise de la locale pour chacun des éléments (nombres ou chaînes de caractères) du tableau <code>prix</code> :</p>
-
-<pre class="brush: js">var prix = ["￥7", 500, 8123, 12];
-prix.toLocaleString('ja-JP', { style: 'currency', currency: 'JPY' });
-
-// "￥7,￥500,￥8,123,￥12"
-</pre>
-
-<p>Pour plus d'exemples, on peut se référer aux pages {{jsxref("Intl")}}, {{jsxref("NumberFormat")}} et {{jsxref("DateTimeFormat")}}.</p>
-
-<h2 id="Prothèse_d'émulation_(polyfill)">Prothèse d'émulation (<em>polyfill</em>)</h2>
-
-<pre class="brush: js">// https://tc39.github.io/ecma402/#sup-array.prototype.tolocalestring
-if (!Array.prototype.toLocaleString) {
-  Object.defineProperty(Array.prototype, 'toLocaleString', {
-    value: function(locales, options) {
-      // 1. Let O be ? ToObject(this value).
-      if (this == null) {
-        throw new TypeError('"this" is null or not defined');
-      }
-
-      var a = Object(this);
-
-      // 2. Let len be ? ToLength(? Get(A, "length")).
-      var len = a.length &gt;&gt;&gt; 0;
-
-      // 3. Let separator be the String value for the
-      //    list-separator String appropriate for the
-      //    host environment's current locale (this is
-      //    derived in an implementation-defined way).
-      // NOTE: In this case, we will use a comma
-      var separator = ',';
-
-      // 4. If len is zero, return the empty String.
-      if (len === 0) {
-        return '';
-      }
-
-      // 5. Let firstElement be ? Get(A, "0").
-      var firstElement = a[0];
-      // 6. If firstElement is undefined or null, then
-      //  a.Let R be the empty String.
-      // 7. Else,
-      //  a. Let R be ?
-      //     ToString(?
-      //       Invoke(
-      //        firstElement,
-      //        "toLocaleString",
-      //        « locales, options »
-      //       )
-      //     )
-      var r = firstElement == null ?
-        '' : firstElement.toLocaleString(locales, options);
-
-      // 8. Let k be 1.
-      var k = 1;
-
-      // 9. Repeat, while k &lt; len
-      while (k &lt; len) {
-        // a. Let S be a String value produced by
-        //   concatenating R and separator.
-        var s = r + separator;
-
-        // b. Let nextElement be ? Get(A, ToString(k)).
-        var nextElement = a[k];
-
-        // c. If nextElement is undefined or null, then
-        //   i. Let R be the empty String.
-        // d. Else,
-        //   i. Let R be ?
-        //     ToString(?
-        //       Invoke(
-        //        nextElement,
-        //        "toLocaleString",
-        //        « locales, options »
-        //       )
-        //     )
-        r = nextElement == null ?
-          '' : nextElement.toLocaleString(locales, options);
-
-        // e. Let R be a String value produced by
-        //   concatenating S and R.
-        r = s + r;
-
-        // f. Increase k by 1.
-        k++;
-      }
-
-      // 10. Return R.
-      return r;
-    }
-  });
-}
-</pre>
-
-<p>S'il faut absolument prendre en charge les moteurs JavaScript qui ne supportent pas {{jsxref("Object.defineProperty()")}}, mieux vaut ne pas ajouter de prothèse pour les méthodes <code>Array.prototype</code> car elles ne peuvent pas être rendues non-énumérables.</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-array.prototype.tolocalestring', 'Array.prototype.toLocaleString')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td>Définition initiale dans ECMAScript 3.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES Int Draft', '#sup-array.prototype.tolocalestring', 'Array.prototype.toLocaleString')}}</td>
-   <td>{{Spec2('ES Int Draft')}}</td>
-   <td>Cette définition remplace la définition fournit dans ECMA-262.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Array.toLocaleString")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Array.prototype.toString()")}}</li>
- <li>{{jsxref("Intl")}}</li>
- <li>{{jsxref("Object.prototype.toLocaleString()")}}</li>
- <li>{{jsxref("Number.prototype.toLocaleString()")}}</li>
- <li>{{jsxref("Date.prototype.toLocaleString()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/array/tolocalestring/index.md b/files/fr/web/javascript/reference/global_objects/array/tolocalestring/index.md
new file mode 100644
index 0000000000..22c82a4be5
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/array/tolocalestring/index.md
@@ -0,0 +1,165 @@
+---
+title: Array.prototype.toLocaleString()
+slug: Web/JavaScript/Reference/Global_Objects/Array/toLocaleString
+tags:
+  - Array
+  - Internationalisation
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - i18n
+  - polyfill
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/toLocaleString
+original_slug: Web/JavaScript/Reference/Objets_globaux/Array/toLocaleString
+---
+{{JSRef}}
+
+La méthode **`toLocaleString()`** renvoie une chaîne de caractères qui représente les éléments du tableau. Les éléments sont convertis en chaînes de caractères grâce à leurs méthodes `toLocaleString` et chacune de ces chaînes est séparée des autres avec un séparateur propre à la locale courante (par exemple une virgule ou un point).
+
+{{EmbedInteractiveExample("pages/js/array-tolocalestring.html")}}
+
+## Syntaxe
+
+    arr.toLocaleString();
+    arr.toLocaleString(locales);
+    arr.toLocaleString(locales, options);
+
+### Paramètres
+
+- `locales` {{optional_inline}}
+  - : Une chaine de caractères avec un identifiant de langue BCP 47, ou un tableau de ce type de chaine de caractères. Pour le format général et l'interprétation de l'argument `locales`. Pour plus de détails quant à la forme et l'interprétation de l'argument `locales`, on consultera la page {{jsxref("Intl")}}.
+- `options` {{optional_inline}}
+  - : Un objet qui contient des propriétés de configuration. Pour les nombres, consulter {{jsxref("Number.prototype.toLocaleString()")}}, pour les dates, consulter {{jsxref("Date.prototype.toLocaleString()")}}.
+
+### Valeur de retour
+
+Une chaîne de caractères qui représente les éléments du tableau.
+
+## Exemples
+
+### Utiliser les arguments `locales` et `options`
+
+Les éléments du tableau sont converties en chaînes de caractères via leurs méthodes `toLocaleString()`.
+
+- `Object` : {{jsxref("Object.prototype.toLocaleString()")}}
+- `Number` : {{jsxref("Number.prototype.toLocaleString()")}}
+- `Date` : {{jsxref("Date.prototype.toLocaleString()")}}
+
+Ici, on voit qu'on affiche le symbole de la devise de la locale pour chacun des éléments (nombres ou chaînes de caractères) du tableau `prix` :
+
+```js
+var prix = ["￥7", 500, 8123, 12];
+prix.toLocaleString('ja-JP', { style: 'currency', currency: 'JPY' });
+
+// "￥7,￥500,￥8,123,￥12"
+```
+
+Pour plus d'exemples, on peut se référer aux pages {{jsxref("Intl")}}, {{jsxref("NumberFormat")}} et {{jsxref("DateTimeFormat")}}.
+
+## Prothèse d'émulation (_polyfill_)
+
+```js
+// https://tc39.github.io/ecma402/#sup-array.prototype.tolocalestring
+if (!Array.prototype.toLocaleString) {
+  Object.defineProperty(Array.prototype, 'toLocaleString', {
+    value: function(locales, options) {
+      // 1. Let O be ? ToObject(this value).
+      if (this == null) {
+        throw new TypeError('"this" is null or not defined');
+      }
+
+      var a = Object(this);
+
+      // 2. Let len be ? ToLength(? Get(A, "length")).
+      var len = a.length >>> 0;
+
+      // 3. Let separator be the String value for the
+      //    list-separator String appropriate for the
+      //    host environment's current locale (this is
+      //    derived in an implementation-defined way).
+      // NOTE: In this case, we will use a comma
+      var separator = ',';
+
+      // 4. If len is zero, return the empty String.
+      if (len === 0) {
+        return '';
+      }
+
+      // 5. Let firstElement be ? Get(A, "0").
+      var firstElement = a[0];
+      // 6. If firstElement is undefined or null, then
+      //  a.Let R be the empty String.
+      // 7. Else,
+      //  a. Let R be ?
+      //     ToString(?
+      //       Invoke(
+      //        firstElement,
+      //        "toLocaleString",
+      //        « locales, options »
+      //       )
+      //     )
+      var r = firstElement == null ?
+        '' : firstElement.toLocaleString(locales, options);
+
+      // 8. Let k be 1.
+      var k = 1;
+
+      // 9. Repeat, while k < len
+      while (k < len) {
+        // a. Let S be a String value produced by
+        //   concatenating R and separator.
+        var s = r + separator;
+
+        // b. Let nextElement be ? Get(A, ToString(k)).
+        var nextElement = a[k];
+
+        // c. If nextElement is undefined or null, then
+        //   i. Let R be the empty String.
+        // d. Else,
+        //   i. Let R be ?
+        //     ToString(?
+        //       Invoke(
+        //        nextElement,
+        //        "toLocaleString",
+        //        « locales, options »
+        //       )
+        //     )
+        r = nextElement == null ?
+          '' : nextElement.toLocaleString(locales, options);
+
+        // e. Let R be a String value produced by
+        //   concatenating S and R.
+        r = s + r;
+
+        // f. Increase k by 1.
+        k++;
+      }
+
+      // 10. Return R.
+      return r;
+    }
+  });
+}
+```
+
+S'il faut absolument prendre en charge les moteurs JavaScript qui ne supportent pas {{jsxref("Object.defineProperty()")}}, mieux vaut ne pas ajouter de prothèse pour les méthodes `Array.prototype` car elles ne peuvent pas être rendues non-énumérables.
+
+## Spécifications
+
+| Spécification                                                                                                                            | État                             | Commentaires                                                   |
+| ---------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | -------------------------------------------------------------- |
+| {{SpecName('ESDraft', '#sec-array.prototype.tolocalestring', 'Array.prototype.toLocaleString')}}         | {{Spec2('ESDraft')}}     | Définition initiale dans ECMAScript 3.                         |
+| {{SpecName('ES Int Draft', '#sup-array.prototype.tolocalestring', 'Array.prototype.toLocaleString')}} | {{Spec2('ES Int Draft')}} | Cette définition remplace la définition fournit dans ECMA-262. |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Array.toLocaleString")}}
+
+## Voir aussi
+
+- {{jsxref("Array.prototype.toString()")}}
+- {{jsxref("Intl")}}
+- {{jsxref("Object.prototype.toLocaleString()")}}
+- {{jsxref("Number.prototype.toLocaleString()")}}
+- {{jsxref("Date.prototype.toLocaleString()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/array/tosource/index.html b/files/fr/web/javascript/reference/global_objects/array/tosource/index.html
deleted file mode 100644
index d4c832779b..0000000000
--- a/files/fr/web/javascript/reference/global_objects/array/tosource/index.html
+++ /dev/null
@@ -1,67 +0,0 @@
----
-title: Array.prototype.toSource()
-slug: Web/JavaScript/Reference/Global_Objects/Array/toSource
-tags:
-  - Array
-  - JavaScript
-  - Méthode
-  - Non-standard
-  - Prototype
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Array/toSource
-original_slug: Web/JavaScript/Reference/Objets_globaux/Array/toSource
----
-<div>{{JSRef}}{{Non-standard_header}}</div>
-
-<p>La méthode <strong><code>toSource()</code></strong> renvoie une chaine de caractères représentant le code source du tableau.</p>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>arr</var>.toSource()</pre>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Une chaîne de caractères qui représente le code source du tableau.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>La méthode <code>toSource()</code> renvoie les valeurs suivantes :</p>
-
-<ul>
- <li>Pour l'objet {{jsxref("Array")}} natif, <code>toSource()</code> renvoie la chaîne de caractères suivante indiquant que le code source n'est pas disponible :
-
-  <pre class="brush: js">function Array() {
-    [native code]
-}
-</pre>
- </li>
- <li>Pour les instances d'{{jsxref("Array")}}, <code>toSource()</code> renvoie une chaîne représentant le code source.</li>
-</ul>
-
-<p>Cette méthode est habituellement appelée en interne par le moteur JavaScript et n'est pas utilisée explicitement dans du code. Il est cependant possible d'appeler <code>toSource()</code> lors du débogage pour examiner le contenu d'un tableau.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Examiner_le_code_source_d'un_tableau">Examiner le code source d'un tableau</h3>
-
-<p>Pour examiner le code source d'un tableau :</p>
-
-<pre class="brush: js">var alpha = new Array("a", "b", "c");
-alpha.toSource();
-// renvoie ["a", "b", "c"]
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<p>Ne fait partie d'aucun standard. Implémenté dans JavaScript 1.3.</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Array.toSource")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Object.prototype.toSource()")}}</li>
- <li>{{jsxref("Array.prototype.toString()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/array/tosource/index.md b/files/fr/web/javascript/reference/global_objects/array/tosource/index.md
new file mode 100644
index 0000000000..def1a9901d
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/array/tosource/index.md
@@ -0,0 +1,65 @@
+---
+title: Array.prototype.toSource()
+slug: Web/JavaScript/Reference/Global_Objects/Array/toSource
+tags:
+  - Array
+  - JavaScript
+  - Méthode
+  - Non-standard
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/toSource
+original_slug: Web/JavaScript/Reference/Objets_globaux/Array/toSource
+---
+{{JSRef}}{{Non-standard_header}}
+
+La méthode **`toSource()`** renvoie une chaine de caractères représentant le code source du tableau.
+
+## Syntaxe
+
+    arr.toSource()
+
+### Valeur de retour
+
+Une chaîne de caractères qui représente le code source du tableau.
+
+## Description
+
+La méthode `toSource()` renvoie les valeurs suivantes :
+
+- Pour l'objet {{jsxref("Array")}} natif, `toSource()` renvoie la chaîne de caractères suivante indiquant que le code source n'est pas disponible :
+
+  ```js
+    function Array() {
+        [native code]
+    }
+    ```
+
+- Pour les instances d'{{jsxref("Array")}}, `toSource()` renvoie une chaîne représentant le code source.
+
+Cette méthode est habituellement appelée en interne par le moteur JavaScript et n'est pas utilisée explicitement dans du code. Il est cependant possible d'appeler `toSource()` lors du débogage pour examiner le contenu d'un tableau.
+
+## Exemples
+
+### Examiner le code source d'un tableau
+
+Pour examiner le code source d'un tableau :
+
+```js
+var alpha = new Array("a", "b", "c");
+alpha.toSource();
+// renvoie ["a", "b", "c"]
+```
+
+## Spécifications
+
+Ne fait partie d'aucun standard. Implémenté dans JavaScript 1.3.
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Array.toSource")}}
+
+## Voir aussi
+
+- {{jsxref("Object.prototype.toSource()")}}
+- {{jsxref("Array.prototype.toString()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/array/tostring/index.html b/files/fr/web/javascript/reference/global_objects/array/tostring/index.html
deleted file mode 100644
index 2c9944f5dd..0000000000
--- a/files/fr/web/javascript/reference/global_objects/array/tostring/index.html
+++ /dev/null
@@ -1,78 +0,0 @@
----
-title: Array.prototype.toString()
-slug: Web/JavaScript/Reference/Global_Objects/Array/toString
-tags:
-  - Array
-  - JavaScript
-  - Méthode
-  - Prototype
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Array/toString
-original_slug: Web/JavaScript/Reference/Objets_globaux/Array/toString
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <strong><code>toString()</code></strong> renvoie une chaine de caractères représentant le tableau spécifié et ses éléments.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/array-tostring.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>arr</var>.toString()</pre>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Une chaîne de caractères qui représente les éléments du tableau.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>L'objet {{jsxref("Array")}} redéfinit la méthode <code>toString</code> d'{{jsxref("Object")}}. Pour les objets <code>Array</code>, la méthode <code>toString()</code> concatène les éléments du tableau et renvoie une chaîne contenant chacun des éléments, séparés par des virgules.</p>
-
-<p>JavaScript appelle la méthode <code>toString()</code> automatiquement lorsqu'un tableau doit être représenté par une valeur texte ou lorsqu'on fait référence à un tableau dans une concaténation de chaines de caractères.</p>
-
-<h3 id="Sémantique_d'ECMAScript_5">Sémantique d'ECMAScript 5</h3>
-
-<p>À partir de JavaScript 1.8.5 (Firefox 4), et en cohérence avec la 5e édition d'ECMAScript, la méthode <code>toString()</code> est générique et peut être utilisé avec n'importe quel objet. {{jsxref("Object.prototype.toString()")}} sera appelée, et la valeur résultante sera renvoyée.</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES1')}}</td>
-   <td>{{Spec2('ES1')}}</td>
-   <td>Définition initiale. Implémentée avec JavaScript 1.1.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-15.4.4.2', 'Array.prototype.toString')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-array.prototype.tostring', 'Array.prototype.toString')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-array.prototype.tostring', 'Array.prototype.toString')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Array.toString")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Object.prototype.toSource()")}}</li>
- <li>{{jsxref("Array.prototype.join()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/array/tostring/index.md b/files/fr/web/javascript/reference/global_objects/array/tostring/index.md
new file mode 100644
index 0000000000..a14b6b7b8d
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/array/tostring/index.md
@@ -0,0 +1,53 @@
+---
+title: Array.prototype.toString()
+slug: Web/JavaScript/Reference/Global_Objects/Array/toString
+tags:
+  - Array
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/toString
+original_slug: Web/JavaScript/Reference/Objets_globaux/Array/toString
+---
+{{JSRef}}
+
+La méthode **`toString()`** renvoie une chaine de caractères représentant le tableau spécifié et ses éléments.
+
+{{EmbedInteractiveExample("pages/js/array-tostring.html")}}
+
+## Syntaxe
+
+    arr.toString()
+
+### Valeur de retour
+
+Une chaîne de caractères qui représente les éléments du tableau.
+
+## Description
+
+L'objet {{jsxref("Array")}} redéfinit la méthode `toString` d'{{jsxref("Object")}}. Pour les objets `Array`, la méthode `toString()` concatène les éléments du tableau et renvoie une chaîne contenant chacun des éléments, séparés par des virgules.
+
+JavaScript appelle la méthode `toString()` automatiquement lorsqu'un tableau doit être représenté par une valeur texte ou lorsqu'on fait référence à un tableau dans une concaténation de chaines de caractères.
+
+### Sémantique d'ECMAScript 5
+
+À partir de JavaScript 1.8.5 (Firefox 4), et en cohérence avec la 5e édition d'ECMAScript, la méthode `toString()` est générique et peut être utilisé avec n'importe quel objet. {{jsxref("Object.prototype.toString()")}} sera appelée, et la valeur résultante sera renvoyée.
+
+## Spécifications
+
+| Spécification                                                                                                    | État                         | Commentaires                                          |
+| ---------------------------------------------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- |
+| {{SpecName('ES1')}}                                                                                         | {{Spec2('ES1')}}         | Définition initiale. Implémentée avec JavaScript 1.1. |
+| {{SpecName('ES5.1', '#sec-15.4.4.2', 'Array.prototype.toString')}}                         | {{Spec2('ES5.1')}}     |                                                       |
+| {{SpecName('ES6', '#sec-array.prototype.tostring', 'Array.prototype.toString')}}     | {{Spec2('ES6')}}         |                                                       |
+| {{SpecName('ESDraft', '#sec-array.prototype.tostring', 'Array.prototype.toString')}} | {{Spec2('ESDraft')}} |                                                       |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Array.toString")}}
+
+## Voir aussi
+
+- {{jsxref("Object.prototype.toSource()")}}
+- {{jsxref("Array.prototype.join()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/array/unshift/index.html b/files/fr/web/javascript/reference/global_objects/array/unshift/index.html
deleted file mode 100644
index 77ba3d8eeb..0000000000
--- a/files/fr/web/javascript/reference/global_objects/array/unshift/index.html
+++ /dev/null
@@ -1,117 +0,0 @@
----
-title: Array.prototype.unshift()
-slug: Web/JavaScript/Reference/Global_Objects/Array/unshift
-tags:
-  - Array
-  - JavaScript
-  - Méthode
-  - Prototype
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Array/unshift
-original_slug: Web/JavaScript/Reference/Objets_globaux/Array/unshift
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <code><strong>unshift()</strong></code> ajoute un ou plusieurs éléments au début d'un tableau et renvoie la nouvelle longueur du tableau.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/array-unshift.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>arr</var>.unshift([<var>élém1</var>[, ...[, <var>élémN</var>]]])</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>élém<em>N</em> </code></dt>
- <dd>Les éléments que l'on souhaite ajouter en début de tableau.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>La nouvelle valeur de la propriété {{jsxref("Array.length", "length")}} du tableau sur lequel a été appelée la méthode.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>La méthode <code>unshift()</code> insère les valeurs renseignées au début d'un objet ressemblant à un tableau.</p>
-
-<p><code>unshift()</code> est volontairement générique ; cette méthode peut être {{jsxref("Function.call", "appelée","",1)}} ou {{jsxref("Function.apply", "appliquée","",1)}} sur des objets ressemblant à des tableaux. Les objets qui ne contiennent pas une propriété <code>length</code> reflètant la fin d'une série de propriétés indexées numériquement pourront ne pas avoir un comportement cohérent avec cette méthode.</p>
-
-<p>Attention, lorsqu'on utilise <code>unshift()</code> avec plusieurs arguments, ceux-ci sont insérés au début du tableau dans l'ordre selon lequel ils sont passés en arguments. Aussi, on n'obtiendra pas le même résultat en appelant <code>unshift()</code> <em>n</em> fois avec 1 arguments ou en appelant <code>unshift()</code> avec <em>n</em> arguments.</p>
-
-<pre class="brush: js">let arr = [4, 5, 6];
-
-arr.unshift(1, 2, 3);
-console.table(arr);
-// [1, 2, 3, 4, 5, 6]
-
-let arr2 = [4, 5, 6];
-
-arr2.unshift(1);
-arr2.unshift(2);
-arr2.unshift(3);
-
-console.table(arr2);
-// [3, 2, 1, 4, 5, 6]</pre>
-
-<h2 id="Exemples">Exemples</h2>
-
-<pre class="brush:js">var arr = [1, 2];
-
-arr.unshift(0); // renvoie 3, la nouvelle longueur du tableau
-// arr est [0, 1, 2]
-
-arr.unshift(-2, -1); // = 5
-// arr est [-2, -1, 0, 1, 2]
-
-arr.unshift( [-3] ); // 6
-// arr est [[-3], -2, -1, 0, 1, 2]
-
-arr.unshift([-7, -6], [-5]); // 8
-// arr est [[-7, -6], [-5], [-3], -2, -1, 0, 1, 2]
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES3')}}</td>
-   <td>{{Spec2('ES3')}}</td>
-   <td>Définition initiale. Implémentée avec JavaScript 1.2.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-15.4.4.13', 'Array.prototype.unshift')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-array.prototype.unshift', 'Array.prototype.unshift')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-array.prototype.unshift', 'Array.prototype.unshift')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Array.unshift")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Array.prototype.push()")}}</li>
- <li>{{jsxref("Array.prototype.pop()")}}</li>
- <li>{{jsxref("Array.prototype.shift()")}}</li>
- <li>{{jsxref("Array.prototype.concat()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/array/unshift/index.md b/files/fr/web/javascript/reference/global_objects/array/unshift/index.md
new file mode 100644
index 0000000000..9dc04db950
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/array/unshift/index.md
@@ -0,0 +1,93 @@
+---
+title: Array.prototype.unshift()
+slug: Web/JavaScript/Reference/Global_Objects/Array/unshift
+tags:
+  - Array
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/unshift
+original_slug: Web/JavaScript/Reference/Objets_globaux/Array/unshift
+---
+{{JSRef}}
+
+La méthode **`unshift()`** ajoute un ou plusieurs éléments au début d'un tableau et renvoie la nouvelle longueur du tableau.
+
+{{EmbedInteractiveExample("pages/js/array-unshift.html")}}
+
+## Syntaxe
+
+    arr.unshift([élém1[, ...[, élémN]]])
+
+### Paramètres
+
+- `élémN`
+  - : Les éléments que l'on souhaite ajouter en début de tableau.
+
+### Valeur de retour
+
+La nouvelle valeur de la propriété {{jsxref("Array.length", "length")}} du tableau sur lequel a été appelée la méthode.
+
+## Description
+
+La méthode `unshift()` insère les valeurs renseignées au début d'un objet ressemblant à un tableau.
+
+`unshift()` est volontairement générique ; cette méthode peut être {{jsxref("Function.call", "appelée","",1)}} ou {{jsxref("Function.apply", "appliquée","",1)}} sur des objets ressemblant à des tableaux. Les objets qui ne contiennent pas une propriété `length` reflètant la fin d'une série de propriétés indexées numériquement pourront ne pas avoir un comportement cohérent avec cette méthode.
+
+Attention, lorsqu'on utilise `unshift()` avec plusieurs arguments, ceux-ci sont insérés au début du tableau dans l'ordre selon lequel ils sont passés en arguments. Aussi, on n'obtiendra pas le même résultat en appelant `unshift()` _n_ fois avec 1 arguments ou en appelant `unshift()` avec _n_ arguments.
+
+```js
+let arr = [4, 5, 6];
+
+arr.unshift(1, 2, 3);
+console.table(arr);
+// [1, 2, 3, 4, 5, 6]
+
+let arr2 = [4, 5, 6];
+
+arr2.unshift(1);
+arr2.unshift(2);
+arr2.unshift(3);
+
+console.table(arr2);
+// [3, 2, 1, 4, 5, 6]
+```
+
+## Exemples
+
+```js
+var arr = [1, 2];
+
+arr.unshift(0); // renvoie 3, la nouvelle longueur du tableau
+// arr est [0, 1, 2]
+
+arr.unshift(-2, -1); // = 5
+// arr est [-2, -1, 0, 1, 2]
+
+arr.unshift( [-3] ); // 6
+// arr est [[-3], -2, -1, 0, 1, 2]
+
+arr.unshift([-7, -6], [-5]); // 8
+// arr est [[-7, -6], [-5], [-3], -2, -1, 0, 1, 2]
+```
+
+## Spécifications
+
+| Spécification                                                                                                | État                         | Commentaires                                          |
+| ------------------------------------------------------------------------------------------------------------ | ---------------------------- | ----------------------------------------------------- |
+| {{SpecName('ES3')}}                                                                                     | {{Spec2('ES3')}}         | Définition initiale. Implémentée avec JavaScript 1.2. |
+| {{SpecName('ES5.1', '#sec-15.4.4.13', 'Array.prototype.unshift')}}                     | {{Spec2('ES5.1')}}     |                                                       |
+| {{SpecName('ES6', '#sec-array.prototype.unshift', 'Array.prototype.unshift')}}     | {{Spec2('ES6')}}         |                                                       |
+| {{SpecName('ESDraft', '#sec-array.prototype.unshift', 'Array.prototype.unshift')}} | {{Spec2('ESDraft')}} |                                                       |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Array.unshift")}}
+
+## Voir aussi
+
+- {{jsxref("Array.prototype.push()")}}
+- {{jsxref("Array.prototype.pop()")}}
+- {{jsxref("Array.prototype.shift()")}}
+- {{jsxref("Array.prototype.concat()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/array/values/index.html b/files/fr/web/javascript/reference/global_objects/array/values/index.html
deleted file mode 100644
index 881e840bd4..0000000000
--- a/files/fr/web/javascript/reference/global_objects/array/values/index.html
+++ /dev/null
@@ -1,97 +0,0 @@
----
-title: Array.prototype.values()
-slug: Web/JavaScript/Reference/Global_Objects/Array/values
-tags:
-  - Array
-  - ECMAScript 2015
-  - Iterator
-  - JavaScript
-  - Méthode
-  - Prototype
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Array/values
-original_slug: Web/JavaScript/Reference/Objets_globaux/Array/values
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <strong><code>values()</code></strong> renvoie un nouvel objet <strong><code>Array Iterator</code></strong> qui contient les valeurs pour chaque indice du tableau. Cette méthode est l'implémentation par défaut de <code>Array.prototype[Symbol.Iterator]</code>.</p>
-
-<p>{{EmbedInteractiveExample("pages/js/array-values.html")}}</p>
-
-<pre class="brush: js">var a = ['t', 'i', 't', 'o', 'u'];
-var iterateur = a.values();
-
-console.log(iterateur.next().value); // t
-console.log(iterateur.next().value); // i
-console.log(iterateur.next().value); // t
-console.log(iterateur.next().value); // o
-console.log(iterateur.next().value); // u
-</pre>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>array</var>.values()</pre>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Un nouvel objet itérateur sur {{jsxref("Array")}}.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Itérer_avec_une_boucle_for...of">Itérer avec une boucle <code>for...of</code></h3>
-
-<pre class="brush: js">var arr = ['w', 'y', 'k', 'o', 'p'];
-var eArr = arr.values();
-// votre navigateur doit supporter les boucles for..of
-// et les variables définies avec let
-for (let lettre of eArr) {
-  console.log(lettre);
-}
-</pre>
-
-<h3 id="Itérer_avec_next()">Itérer avec <code>next()</code></h3>
-
-<pre class="brush: js">var arr = ['w', 'y', 'k', 'o', 'p'];
-var eArr = arr.values();
-console.log(eArr.next().value); // w
-console.log(eArr.next().value); // y
-console.log(eArr.next().value); // k
-console.log(eArr.next().value); // o
-console.log(eArr.next().value); // p
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-array.prototype.values', 'Array.prototype.values')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-array.prototype.values', 'Array.prototype.values')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Array.values")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Array.prototype.keys()")}}</li>
- <li>{{jsxref("Array.prototype.entries()")}}</li>
- <li>{{jsxref("Array.prototype.forEach()")}}</li>
- <li>{{jsxref("Array.prototype.every()")}}</li>
- <li>{{jsxref("Array.prototype.some()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/array/values/index.md b/files/fr/web/javascript/reference/global_objects/array/values/index.md
new file mode 100644
index 0000000000..d7f591029d
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/array/values/index.md
@@ -0,0 +1,83 @@
+---
+title: Array.prototype.values()
+slug: Web/JavaScript/Reference/Global_Objects/Array/values
+tags:
+  - Array
+  - ECMAScript 2015
+  - Iterator
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/values
+original_slug: Web/JavaScript/Reference/Objets_globaux/Array/values
+---
+{{JSRef}}
+
+La méthode **`values()`** renvoie un nouvel objet **`Array Iterator`** qui contient les valeurs pour chaque indice du tableau. Cette méthode est l'implémentation par défaut de `Array.prototype[Symbol.Iterator]`.
+
+{{EmbedInteractiveExample("pages/js/array-values.html")}}
+
+```js
+var a = ['t', 'i', 't', 'o', 'u'];
+var iterateur = a.values();
+
+console.log(iterateur.next().value); // t
+console.log(iterateur.next().value); // i
+console.log(iterateur.next().value); // t
+console.log(iterateur.next().value); // o
+console.log(iterateur.next().value); // u
+```
+
+## Syntaxe
+
+    array.values()
+
+### Valeur de retour
+
+Un nouvel objet itérateur sur {{jsxref("Array")}}.
+
+## Exemples
+
+### Itérer avec une boucle `for...of`
+
+```js
+var arr = ['w', 'y', 'k', 'o', 'p'];
+var eArr = arr.values();
+// votre navigateur doit supporter les boucles for..of
+// et les variables définies avec let
+for (let lettre of eArr) {
+  console.log(lettre);
+}
+```
+
+### Itérer avec `next()`
+
+```js
+var arr = ['w', 'y', 'k', 'o', 'p'];
+var eArr = arr.values();
+console.log(eArr.next().value); // w
+console.log(eArr.next().value); // y
+console.log(eArr.next().value); // k
+console.log(eArr.next().value); // o
+console.log(eArr.next().value); // p
+```
+
+## Spécifications
+
+| Spécification                                                                                                | État                         | Commentaires         |
+| ------------------------------------------------------------------------------------------------------------ | ---------------------------- | -------------------- |
+| {{SpecName('ES2015', '#sec-array.prototype.values', 'Array.prototype.values')}}     | {{Spec2('ES2015')}}     | Définition initiale. |
+| {{SpecName('ESDraft', '#sec-array.prototype.values', 'Array.prototype.values')}} | {{Spec2('ESDraft')}} |                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Array.values")}}
+
+## Voir aussi
+
+- {{jsxref("Array.prototype.keys()")}}
+- {{jsxref("Array.prototype.entries()")}}
+- {{jsxref("Array.prototype.forEach()")}}
+- {{jsxref("Array.prototype.every()")}}
+- {{jsxref("Array.prototype.some()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/arraybuffer/@@species/index.html b/files/fr/web/javascript/reference/global_objects/arraybuffer/@@species/index.html
deleted file mode 100644
index d86f413799..0000000000
--- a/files/fr/web/javascript/reference/global_objects/arraybuffer/@@species/index.html
+++ /dev/null
@@ -1,71 +0,0 @@
----
-title: get ArrayBuffer[@@species]
-slug: Web/JavaScript/Reference/Global_Objects/ArrayBuffer/@@species
-tags:
-  - ArrayBuffer
-  - JavaScript
-  - Propriété
-  - Reference
-  - TypedArrays
-translation_of: Web/JavaScript/Reference/Global_Objects/ArrayBuffer/@@species
-original_slug: Web/JavaScript/Reference/Objets_globaux/ArrayBuffer/@@species
----
-<div>{{JSRef}}</div>
-
-<p>La propriété d'accesseur <code><strong>ArrayBuffer[@@species]</strong></code> renvoie le constructeur <code>ArrayBuffer</code>.</p>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">ArrayBuffer[Symbol.species]
-</pre>
-
-<h2 id="Description">Description</h2>
-
-<p>L'accesseur <code>species</code> renvoie le constructeur par défaut pour les objets <code>ArrayBuffer</code>. Les constructeurs des sous-classes peuvent surcharger ce symbole pour modifier l'affectation du constructeur.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<p>La propriété <code>species</code> renvoie le constructeur par défaut, soit <code>ArrayBuffer</code> dans le cas des objets <code>ArrayBuffer</code> :</p>
-
-<pre class="brush: js">ArrayBuffer[Symbol.species]; // function ArrayBuffer()</pre>
-
-<p>Pour un objet dérivé (par exemple une classe sur mesure <code>MonArrayBuffer</code>), le symbole <code>species</code> renverra le constructeur <code>MonArrayBuffer</code>. Il est possible de surcharger ce comportement pour renvoyer le constructeur <code>ArrayBuffer</code> :</p>
-
-<pre class="brush: js">class MonArrayBuffer extends ArrayBuffer {
-  // On surcharge species pour renvoyer
-  // le constructeur parent ArrayBuffer
-  static get [Symbol.species]() { return ArrayBuffer; }
-}</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-get-arraybuffer-@@species', 'get ArrayBuffer [ @@species ]')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-get-arraybuffer-@@species', 'get ArrayBuffer [ @@species ]')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.ArrayBuffer.@@species")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("ArrayBuffer")}}</li>
- <li>{{jsxref("Symbol.species")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/arraybuffer/@@species/index.md b/files/fr/web/javascript/reference/global_objects/arraybuffer/@@species/index.md
new file mode 100644
index 0000000000..7a9b7c3e7e
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/arraybuffer/@@species/index.md
@@ -0,0 +1,57 @@
+---
+title: get ArrayBuffer[@@species]
+slug: Web/JavaScript/Reference/Global_Objects/ArrayBuffer/@@species
+tags:
+  - ArrayBuffer
+  - JavaScript
+  - Propriété
+  - Reference
+  - TypedArrays
+translation_of: Web/JavaScript/Reference/Global_Objects/ArrayBuffer/@@species
+original_slug: Web/JavaScript/Reference/Objets_globaux/ArrayBuffer/@@species
+---
+{{JSRef}}
+
+La propriété d'accesseur **`ArrayBuffer[@@species]`** renvoie le constructeur `ArrayBuffer`.
+
+## Syntaxe
+
+    ArrayBuffer[Symbol.species]
+
+## Description
+
+L'accesseur `species` renvoie le constructeur par défaut pour les objets `ArrayBuffer`. Les constructeurs des sous-classes peuvent surcharger ce symbole pour modifier l'affectation du constructeur.
+
+## Exemples
+
+La propriété `species` renvoie le constructeur par défaut, soit `ArrayBuffer` dans le cas des objets `ArrayBuffer` :
+
+```js
+ArrayBuffer[Symbol.species]; // function ArrayBuffer()
+```
+
+Pour un objet dérivé (par exemple une classe sur mesure `MonArrayBuffer`), le symbole `species` renverra le constructeur `MonArrayBuffer`. Il est possible de surcharger ce comportement pour renvoyer le constructeur `ArrayBuffer` :
+
+```js
+class MonArrayBuffer extends ArrayBuffer {
+  // On surcharge species pour renvoyer
+  // le constructeur parent ArrayBuffer
+  static get [Symbol.species]() { return ArrayBuffer; }
+}
+```
+
+## Spécifications
+
+| Spécification                                                                                                            | État                         | Commentaires         |
+| ------------------------------------------------------------------------------------------------------------------------ | ---------------------------- | -------------------- |
+| {{SpecName('ES6', '#sec-get-arraybuffer-@@species', 'get ArrayBuffer [ @@species ]')}}     | {{Spec2('ES6')}}         | Définition initiale. |
+| {{SpecName('ESDraft', '#sec-get-arraybuffer-@@species', 'get ArrayBuffer [ @@species ]')}} | {{Spec2('ESDraft')}} |                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.ArrayBuffer.@@species")}}
+
+## Voir aussi
+
+- {{jsxref("ArrayBuffer")}}
+- {{jsxref("Symbol.species")}}
diff --git a/files/fr/web/javascript/reference/global_objects/arraybuffer/bytelength/index.html b/files/fr/web/javascript/reference/global_objects/arraybuffer/bytelength/index.html
deleted file mode 100644
index 8839c62408..0000000000
--- a/files/fr/web/javascript/reference/global_objects/arraybuffer/bytelength/index.html
+++ /dev/null
@@ -1,68 +0,0 @@
----
-title: ArrayBuffer.prototype.byteLength
-slug: Web/JavaScript/Reference/Global_Objects/ArrayBuffer/byteLength
-tags:
-  - ArrayBuffer
-  - JavaScript
-  - Propriété
-  - Prototype
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/ArrayBuffer/byteLength
-original_slug: Web/JavaScript/Reference/Objets_globaux/ArrayBuffer/byteLength
----
-<div>{{JSRef}}</div>
-
-<p>L'accesseur <code><strong>byteLength</strong></code> est une propriété représentant la longueur d'un {{jsxref("ArrayBuffer")}} en octets.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/arraybuffer-bytelength.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>arr</var>aybuffer.byteLength</pre>
-
-<h2 id="Description">Description</h2>
-
-<p>La propriété <code>byteLength</code> est un accesseur dont le mutateur associé vaut <code>undefined</code>. Cela signifie que cette propriété est en lecture seule. La valeur est déterminée lors de la construction du tableau et ne peut pas être changée par la suite. Cette propriété renvoie 0 si ce <code>ArrayBuffer</code> a été détaché.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<pre class="brush:js">var buffer = new ArrayBuffer(8);
-buffer.byteLength; // 8
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Typed Array')}}</td>
-   <td>{{Spec2('Typed Array')}}</td>
-   <td>Remplacée dans ECMAScript 2015.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-get-arraybuffer.prototype.bytelength', 'ArrayBuffer.prototype.byteLength')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td>Définition initiale au sein d'un standard ECMA.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-get-arraybuffer.prototype.bytelength', 'ArrayBuffer.prototype.byteLength')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.ArrayBuffer.byteLength")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("ArrayBuffer")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/arraybuffer/bytelength/index.md b/files/fr/web/javascript/reference/global_objects/arraybuffer/bytelength/index.md
new file mode 100644
index 0000000000..5bbc57d6a2
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/arraybuffer/bytelength/index.md
@@ -0,0 +1,48 @@
+---
+title: ArrayBuffer.prototype.byteLength
+slug: Web/JavaScript/Reference/Global_Objects/ArrayBuffer/byteLength
+tags:
+  - ArrayBuffer
+  - JavaScript
+  - Propriété
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/ArrayBuffer/byteLength
+original_slug: Web/JavaScript/Reference/Objets_globaux/ArrayBuffer/byteLength
+---
+{{JSRef}}
+
+L'accesseur **`byteLength`** est une propriété représentant la longueur d'un {{jsxref("ArrayBuffer")}} en octets.
+
+{{EmbedInteractiveExample("pages/js/arraybuffer-bytelength.html")}}
+
+## Syntaxe
+
+    arraybuffer.byteLength
+
+## Description
+
+La propriété `byteLength` est un accesseur dont le mutateur associé vaut `undefined`. Cela signifie que cette propriété est en lecture seule. La valeur est déterminée lors de la construction du tableau et ne peut pas être changée par la suite. Cette propriété renvoie 0 si ce `ArrayBuffer` a été détaché.
+
+## Exemples
+
+```js
+var buffer = new ArrayBuffer(8);
+buffer.byteLength; // 8
+```
+
+## Spécifications
+
+| Spécification                                                                                                                                | Statut                           | Commentaires                                    |
+| -------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------------------------------------------- |
+| {{SpecName('Typed Array')}}                                                                                                         | {{Spec2('Typed Array')}} | Remplacée dans ECMAScript 2015.                 |
+| {{SpecName('ES2015', '#sec-get-arraybuffer.prototype.bytelength', 'ArrayBuffer.prototype.byteLength')}}     | {{Spec2('ES2015')}}         | Définition initiale au sein d'un standard ECMA. |
+| {{SpecName('ESDraft', '#sec-get-arraybuffer.prototype.bytelength', 'ArrayBuffer.prototype.byteLength')}} | {{Spec2('ESDraft')}}     |                                                 |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.ArrayBuffer.byteLength")}}
+
+## Voir aussi
+
+- {{jsxref("ArrayBuffer")}}
diff --git a/files/fr/web/javascript/reference/global_objects/arraybuffer/index.html b/files/fr/web/javascript/reference/global_objects/arraybuffer/index.html
deleted file mode 100644
index 7c46a860de..0000000000
--- a/files/fr/web/javascript/reference/global_objects/arraybuffer/index.html
+++ /dev/null
@@ -1,142 +0,0 @@
----
-title: ArrayBuffer
-slug: Web/JavaScript/Reference/Global_Objects/ArrayBuffer
-tags:
-  - ArrayBuffer
-  - Constructor
-  - JavaScript
-  - Reference
-  - TypedArrays
-translation_of: Web/JavaScript/Reference/Global_Objects/ArrayBuffer
-original_slug: Web/JavaScript/Reference/Objets_globaux/ArrayBuffer
----
-<div>{{JSRef}}</div>
-
-<p>L'objet <strong><code>ArrayBuffer</code></strong> est utilisé afin de représenter un tampon (<em>buffer</em>) de données binaires de longueur fixe de façon générique. C'est un tableau d'octets. La manipulation du contenu d'un <code>ArrayBuffer</code> se fait de façon indirecte en créant un <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/TypedArray">tableau typé</a> ou un objet {{jsxref("DataView")}} qui permet de représenter le tampon dans un format donné qui permet de lire/écrire des contenus dans le tampon de mémoire.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/arraybuffer-constructor.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">new ArrayBuffer(longueur)
-</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>longueur</code></dt>
- <dd>La taille, exprimée en octets, du tableau représentant le tampon.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Un nouvel objet <code>ArrayBuffer</code> de la taille donnée. Ses éléments sont initialisés à 0.</p>
-
-<h3 id="Exceptions">Exceptions</h3>
-
-<p>Une exception {{jsxref("RangeError")}} est levée lorsque l'argument <code>longueur</code> est supérieur à {{jsxref("Number.MAX_SAFE_INTEGER")}} (soit 2^53) ou s'il est négatif.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>Le constructeur <code>ArrayBuffer</code> crée une nouvelle instance d'<code>ArrayBuffer</code> dont la longueur est celle donnée lors de la construction.</p>
-
-<h3 id="Obtenir_un_tampon_mémoire_depuis_des_données_existantes">Obtenir un tampon mémoire depuis des données existantes</h3>
-
-<ul>
- <li><a href="/fr/docs/Décoder_encoder_en_base64#Annexe_.3A_D.C3.A9coder_une_cha.C3.AEne_en_base64_en_un_objet_Uint8Array_ou_ArrayBuffer">À partir d'une chaîne de caractères en Base 64</a></li>
- <li><a href="/fr/docs/Web/API/FileReader">À partir d'un fichier local</a></li>
-</ul>
-
-<h2 id="Propriétés">Propriétés</h2>
-
-<dl>
- <dt><code>ArrayBuffer.length</code></dt>
- <dd>La longueur du constructeur <code>ArrayBuffer</code>. Elle vaut 1.</dd>
- <dt>{{jsxref("ArrayBuffer.@@species", "get ArrayBuffer[@@species]")}}</dt>
- <dd>La fonction de construction utilisée pour créer les objets dérivés.</dd>
- <dt>{{jsxref("ArrayBuffer.prototype")}}</dt>
- <dd>Cette propriété permet d'ajouter des propriétés à tous les objets <code>ArrayBuffer</code>.</dd>
-</dl>
-
-<h2 id="Méthodes">Méthodes</h2>
-
-<dl>
- <dt>{{jsxref("ArrayBuffer.isView", "ArrayBuffer.isView(arg)")}}</dt>
- <dd>Cette méthode renvoie <code>true</code> si <code>arg</code> est une des vues sur l'<code>ArrayBuffer</code> telle qu'un <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/TypedArray">tableau typé</a> ou un objet {{jsxref("DataView")}}, sinon elle renvoie <code>false</code>.</dd>
- <dt>{{jsxref("ArrayBuffer.transfer", "ArrayBuffer.transfer(ancienTampon [, nouvelleLongueur])")}} {{experimental_inline}}</dt>
- <dd>
- <div>Cette méthode renvoie un nouvel objet <code>ArrayBuffer</code> dont le contenu est transféré depuis les données de <code>ancienTampon</code> et qui est ensuite tronqué ou rallongé avec des zéros pour que la taille du nouveau tampon soit <code>nouvelleLongueur</code>.</div>
- </dd>
-</dl>
-
-<h2 id="Les_instances_d'ArrayBuffer">Les instances d'<code>ArrayBuffer</code></h2>
-
-<p>Toutes les instances d'<code>ArrayBuffer</code> héritent de {{jsxref("ArrayBuffer.prototype")}}.</p>
-
-<h3 id="Propriétés_2">Propriétés</h3>
-
-<p>{{page('fr/docs/Web/JavaScript/Reference/Objets_globaux/ArrayBuffer/prototype','Propri.C3.A9t.C3.A9s')}}</p>
-
-<h3 id="Méthodes_2">Méthodes</h3>
-
-<p>{{page('fr/docs/Web/JavaScript/Reference/Objets_globaux/ArrayBuffer/prototype','M.C3.A9thodes')}}</p>
-
-<dl>
- <dt>{{jsxref("ArrayBuffer.slice()")}} {{non-standard_inline}}</dt>
- <dd>Cette méthode fournit la même fonctionnalité que {{jsxref("ArrayBuffer.prototype.slice()")}}.</dd>
-</dl>
-
-<h2 id="Exemple">Exemple</h2>
-
-<p>Dans cet exemple, on crée un tampon sur 8 octets avec une vue {{jsxref("Int32Array")}} qui fait référence à ce tampon :</p>
-
-<pre class="brush: js">var tampon = new ArrayBuffer(8);
-var vue    = new Int32Array(tampon);</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Typed Array')}}</td>
-   <td>{{Spec2('Typed Array')}}</td>
-   <td>Remplacée par ECMAScript 6.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-arraybuffer-constructor', 'ArrayBuffer')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td>Définition initiale au sein d'un standard ECMA. <code>new</code> est obligaoire pour utiliser le constructeur.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-arraybuffer-constructor', 'ArrayBuffer')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.ArrayBuffer")}}</p>
-
-<h2 id="Notes_de_compatibilité">Notes de compatibilité</h2>
-
-<p>À partir d'ECMAScript 2015 (ES6),<code> ArrayBuffer</code> doit être utilisée avec {{jsxref("Opérateurs/L_opérateur_new", "new")}}. Appeler un constructeur <code>ArrayBuffer</code> comme une fonction, sans <code>new</code>, provoquera une exception {{jsxref("TypeError")}}.</p>
-
-<pre class="brush: js example-bad">var dv = ArrayBuffer(10);
-// TypeError: calling a builtin ArrayBuffer constructor
-// without new is forbidden</pre>
-
-<pre class="brush: js example-good">var dv = new ArrayBuffer(10);</pre>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/JavaScript/Tableaux_typés">Les tableaux typés JavaScript</a></li>
- <li>{{jsxref("SharedArrayBuffer")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/arraybuffer/index.md b/files/fr/web/javascript/reference/global_objects/arraybuffer/index.md
new file mode 100644
index 0000000000..df2c70beba
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/arraybuffer/index.md
@@ -0,0 +1,114 @@
+---
+title: ArrayBuffer
+slug: Web/JavaScript/Reference/Global_Objects/ArrayBuffer
+tags:
+  - ArrayBuffer
+  - Constructor
+  - JavaScript
+  - Reference
+  - TypedArrays
+translation_of: Web/JavaScript/Reference/Global_Objects/ArrayBuffer
+original_slug: Web/JavaScript/Reference/Objets_globaux/ArrayBuffer
+---
+{{JSRef}}
+
+L'objet **`ArrayBuffer`** est utilisé afin de représenter un tampon (_buffer_) de données binaires de longueur fixe de façon générique. C'est un tableau d'octets. La manipulation du contenu d'un `ArrayBuffer` se fait de façon indirecte en créant un [tableau typé](/fr/docs/Web/JavaScript/Reference/Objets_globaux/TypedArray) ou un objet {{jsxref("DataView")}} qui permet de représenter le tampon dans un format donné qui permet de lire/écrire des contenus dans le tampon de mémoire.
+
+{{EmbedInteractiveExample("pages/js/arraybuffer-constructor.html")}}
+
+## Syntaxe
+
+    new ArrayBuffer(longueur)
+
+### Paramètres
+
+- `longueur`
+  - : La taille, exprimée en octets, du tableau représentant le tampon.
+
+### Valeur de retour
+
+Un nouvel objet `ArrayBuffer` de la taille donnée. Ses éléments sont initialisés à 0.
+
+### Exceptions
+
+Une exception {{jsxref("RangeError")}} est levée lorsque l'argument `longueur` est supérieur à {{jsxref("Number.MAX_SAFE_INTEGER")}} (soit 2^53) ou s'il est négatif.
+
+## Description
+
+Le constructeur `ArrayBuffer` crée une nouvelle instance d'`ArrayBuffer` dont la longueur est celle donnée lors de la construction.
+
+### Obtenir un tampon mémoire depuis des données existantes
+
+- [À partir d'une chaîne de caractères en Base 64](/fr/docs/Décoder_encoder_en_base64#Annexe_.3A_D.C3.A9coder_une_cha.C3.AEne_en_base64_en_un_objet_Uint8Array_ou_ArrayBuffer)
+- [À partir d'un fichier local](/fr/docs/Web/API/FileReader)
+
+## Propriétés
+
+- `ArrayBuffer.length`
+  - : La longueur du constructeur `ArrayBuffer`. Elle vaut 1.
+- {{jsxref("ArrayBuffer.@@species", "get ArrayBuffer[@@species]")}}
+  - : La fonction de construction utilisée pour créer les objets dérivés.
+- {{jsxref("ArrayBuffer.prototype")}}
+  - : Cette propriété permet d'ajouter des propriétés à tous les objets `ArrayBuffer`.
+
+## Méthodes
+
+- {{jsxref("ArrayBuffer.isView", "ArrayBuffer.isView(arg)")}}
+  - : Cette méthode renvoie `true` si `arg` est une des vues sur l'`ArrayBuffer` telle qu'un [tableau typé](/fr/docs/Web/JavaScript/Reference/Objets_globaux/TypedArray) ou un objet {{jsxref("DataView")}}, sinon elle renvoie `false`.
+- {{jsxref("ArrayBuffer.transfer", "ArrayBuffer.transfer(ancienTampon [, nouvelleLongueur])")}} {{experimental_inline}}
+  - : Cette méthode renvoie un nouvel objet `ArrayBuffer` dont le contenu est transféré depuis les données de `ancienTampon` et qui est ensuite tronqué ou rallongé avec des zéros pour que la taille du nouveau tampon soit `nouvelleLongueur`.
+
+## Les instances d'`ArrayBuffer`
+
+Toutes les instances d'`ArrayBuffer` héritent de {{jsxref("ArrayBuffer.prototype")}}.
+
+### Propriétés
+
+{{page('fr/docs/Web/JavaScript/Reference/Objets_globaux/ArrayBuffer/prototype','Propri.C3.A9t.C3.A9s')}}
+
+### Méthodes
+
+{{page('fr/docs/Web/JavaScript/Reference/Objets_globaux/ArrayBuffer/prototype','M.C3.A9thodes')}}
+
+- {{jsxref("ArrayBuffer.slice()")}} {{non-standard_inline}}
+  - : Cette méthode fournit la même fonctionnalité que {{jsxref("ArrayBuffer.prototype.slice()")}}.
+
+## Exemple
+
+Dans cet exemple, on crée un tampon sur 8 octets avec une vue {{jsxref("Int32Array")}} qui fait référence à ce tampon :
+
+```js
+var tampon = new ArrayBuffer(8);
+var vue    = new Int32Array(tampon);
+```
+
+## Spécifications
+
+| Spécification                                                                                | État                             | Commentaires                                                                                        |
+| -------------------------------------------------------------------------------------------- | -------------------------------- | --------------------------------------------------------------------------------------------------- |
+| {{SpecName('Typed Array')}}                                                         | {{Spec2('Typed Array')}} | Remplacée par ECMAScript 6.                                                                         |
+| {{SpecName('ES6', '#sec-arraybuffer-constructor', 'ArrayBuffer')}}     | {{Spec2('ES6')}}             | Définition initiale au sein d'un standard ECMA. `new` est obligaoire pour utiliser le constructeur. |
+| {{SpecName('ESDraft', '#sec-arraybuffer-constructor', 'ArrayBuffer')}} | {{Spec2('ESDraft')}}     |                                                                                                     |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.ArrayBuffer")}}
+
+## Notes de compatibilité
+
+À partir d'ECMAScript 2015 (ES6),` ArrayBuffer` doit être utilisée avec {{jsxref("Opérateurs/L_opérateur_new", "new")}}. Appeler un constructeur `ArrayBuffer` comme une fonction, sans `new`, provoquera une exception {{jsxref("TypeError")}}.
+
+```js example-bad
+var dv = ArrayBuffer(10);
+// TypeError: calling a builtin ArrayBuffer constructor
+// without new is forbidden
+```
+
+```js example-good
+var dv = new ArrayBuffer(10);
+```
+
+## Voir aussi
+
+- [Les tableaux typés JavaScript](/fr/docs/Web/JavaScript/Tableaux_typés)
+- {{jsxref("SharedArrayBuffer")}}
diff --git a/files/fr/web/javascript/reference/global_objects/arraybuffer/isview/index.html b/files/fr/web/javascript/reference/global_objects/arraybuffer/isview/index.html
deleted file mode 100644
index 876fdd595b..0000000000
--- a/files/fr/web/javascript/reference/global_objects/arraybuffer/isview/index.html
+++ /dev/null
@@ -1,87 +0,0 @@
----
-title: ArrayBuffer.isView()
-slug: Web/JavaScript/Reference/Global_Objects/ArrayBuffer/isView
-tags:
-  - ArrayBuffer
-  - JavaScript
-  - Méthode
-  - Reference
-  - TypedArrays
-translation_of: Web/JavaScript/Reference/Global_Objects/ArrayBuffer/isView
-original_slug: Web/JavaScript/Reference/Objets_globaux/ArrayBuffer/isView
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <code><strong>ArrayBuffer.isView()</strong></code> renvoie <code>true</code> si l'argument passé est une des vues <code>ArrayBuffer</code>, comme par exemple <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/TypedArray">un tableau typé</a> ou une {{jsxref("DataView")}} ; <code>false</code> sinon.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/arraybuffer-isview.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">ArrayBuffer.isView(<var>arg</var>)</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>arg</code></dt>
- <dd>L'argument dont on souhaite savoir s'il est une vue.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p><code>true</code> si la valeur passée en argument est une des vues du tableau <code>ArrayBuffer</code>, <code>false</code> sinon.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<pre class="brush: js">ArrayBuffer.isView();                    // false
-ArrayBuffer.isView([]);                  // false
-ArrayBuffer.isView({});                  // false
-ArrayBuffer.isView(null);                // false
-ArrayBuffer.isView(undefined);           // false
-ArrayBuffer.isView(new ArrayBuffer(10)); // false
-
-ArrayBuffer.isView(new Uint8Array());    // true
-ArrayBuffer.isView(new Float32Array());  // true
-ArrayBuffer.isView(new Int8Array(10).subarray(0, 3)); // true
-
-var buffer = new ArrayBuffer(2);
-var dv = new DataView(buffer);
-ArrayBuffer.isView(dv); // true
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Typed Array')}}</td>
-   <td>{{Spec2('Typed Array')}}</td>
-   <td>Remplacée par ECMAScript 2015</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-arraybuffer.isview', 'ArrayBuffer.isView')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td>Définition initiale dans un standard ECMA.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-arraybuffer.isview', 'ArrayBuffer.isView')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.ArrayBuffer.isView")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/JavaScript/Tableaux_typés">Les tableaux typés en JavaScript</a></li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/arraybuffer/isview/index.md b/files/fr/web/javascript/reference/global_objects/arraybuffer/isview/index.md
new file mode 100644
index 0000000000..d5224cac4c
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/arraybuffer/isview/index.md
@@ -0,0 +1,65 @@
+---
+title: ArrayBuffer.isView()
+slug: Web/JavaScript/Reference/Global_Objects/ArrayBuffer/isView
+tags:
+  - ArrayBuffer
+  - JavaScript
+  - Méthode
+  - Reference
+  - TypedArrays
+translation_of: Web/JavaScript/Reference/Global_Objects/ArrayBuffer/isView
+original_slug: Web/JavaScript/Reference/Objets_globaux/ArrayBuffer/isView
+---
+{{JSRef}}
+
+La méthode **`ArrayBuffer.isView()`** renvoie `true` si l'argument passé est une des vues `ArrayBuffer`, comme par exemple [un tableau typé](/fr/docs/Web/JavaScript/Reference/Objets_globaux/TypedArray) ou une {{jsxref("DataView")}} ; `false` sinon.
+
+{{EmbedInteractiveExample("pages/js/arraybuffer-isview.html")}}
+
+## Syntaxe
+
+    ArrayBuffer.isView(arg)
+
+### Paramètres
+
+- `arg`
+  - : L'argument dont on souhaite savoir s'il est une vue.
+
+### Valeur de retour
+
+`true` si la valeur passée en argument est une des vues du tableau `ArrayBuffer`, `false` sinon.
+
+## Exemples
+
+```js
+ArrayBuffer.isView();                    // false
+ArrayBuffer.isView([]);                  // false
+ArrayBuffer.isView({});                  // false
+ArrayBuffer.isView(null);                // false
+ArrayBuffer.isView(undefined);           // false
+ArrayBuffer.isView(new ArrayBuffer(10)); // false
+
+ArrayBuffer.isView(new Uint8Array());    // true
+ArrayBuffer.isView(new Float32Array());  // true
+ArrayBuffer.isView(new Int8Array(10).subarray(0, 3)); // true
+
+var buffer = new ArrayBuffer(2);
+var dv = new DataView(buffer);
+ArrayBuffer.isView(dv); // true
+```
+
+## Spécifications
+
+| Spécification                                                                                    | État                             | Commentaires                               |
+| ------------------------------------------------------------------------------------------------ | -------------------------------- | ------------------------------------------ |
+| {{SpecName('Typed Array')}}                                                             | {{Spec2('Typed Array')}} | Remplacée par ECMAScript 2015              |
+| {{SpecName('ES2015', '#sec-arraybuffer.isview', 'ArrayBuffer.isView')}} | {{Spec2('ES2015')}}         | Définition initiale dans un standard ECMA. |
+| {{SpecName('ESDraft', '#sec-arraybuffer.isview', 'ArrayBuffer.isView')}} | {{Spec2('ESDraft')}}     |                                            |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.ArrayBuffer.isView")}}
+
+## Voir aussi
+
+- [Les tableaux typés en JavaScript](/fr/docs/Web/JavaScript/Tableaux_typés)
diff --git a/files/fr/web/javascript/reference/global_objects/arraybuffer/slice/index.html b/files/fr/web/javascript/reference/global_objects/arraybuffer/slice/index.html
deleted file mode 100644
index e52b95fd86..0000000000
--- a/files/fr/web/javascript/reference/global_objects/arraybuffer/slice/index.html
+++ /dev/null
@@ -1,82 +0,0 @@
----
-title: ArrayBuffer.prototype.slice()
-slug: Web/JavaScript/Reference/Global_Objects/ArrayBuffer/slice
-tags:
-  - ArrayBuffer
-  - JavaScript
-  - Méthode
-  - Prototype
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/ArrayBuffer/slice
-original_slug: Web/JavaScript/Reference/Objets_globaux/ArrayBuffer/slice
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <code><strong>slice()</strong></code> renvoie un nouvel <code>ArrayBuffer</code> dont le contenu est une copie des octets du <code>ArrayBuffer</code> courant, contenus entre <code>début</code> (compris) et <code>fin</code> (non-compris).</p>
-
-<div>{{EmbedInteractiveExample("pages/js/arraybuffer-slice.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">arraybuffer.slice(début[, fin])</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>début</code></dt>
- <dd>Indice (numérotation commençant à zéro) de l'octet à partir duquel découper le tableau.</dd>
- <dt><code>fin</code></dt>
- <dd>Indice de l'octet auquel finir la découpe du tableau. Si ce paramètre n'est pas fourni, le nouvel <code>ArrayBuffer</code> contiendra tous les octets entre <code>début </code>et la fin du <code>ArrayBuffer</code> courant. L'intervalle défini par les valeurs <code>début</code> et <code>fin</code> est réduit à un intervalle valide pour le tableau courant si nécessaire. Si la longueur du nouveau tableau <code>ArrayBuffer</code> sera négative, l'intervalle est réduit à zéro.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Un nouvel objet <code>ArrayBuffer</code>.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>La méthode <code>slice</code> copie les octets contenus jusqu'au (au sens exclusif) paramètre <code>fin</code>. Si le paramètre <code>début </code>ou  <code>fin</code> est négatif, il fera référence à l'indice à partir de la fin du tableau et non pas à l'indice à partir du début du tableau.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Copier_un_ArrayBuffer">Copier un <code>ArrayBuffer</code></h3>
-
-<pre class="brush: js">var buf1 = new ArrayBuffer(8);
-var buf2 = buf1.slice(0)</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Typed Array')}}</td>
-   <td>{{Spec2('Typed Array')}}</td>
-   <td>Remplacée dans EMCAScript 6.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-arraybuffer.prototype.slice', 'ArrayBuffer.prototype.slice')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td>Définition initiale au sein d'un standard ECMA.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-arraybuffer.prototype.slice', 'ArrayBuffer.prototype.slice')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.ArrayBuffer.slice")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("ArrayBuffer")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/arraybuffer/slice/index.md b/files/fr/web/javascript/reference/global_objects/arraybuffer/slice/index.md
new file mode 100644
index 0000000000..e776d858bb
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/arraybuffer/slice/index.md
@@ -0,0 +1,61 @@
+---
+title: ArrayBuffer.prototype.slice()
+slug: Web/JavaScript/Reference/Global_Objects/ArrayBuffer/slice
+tags:
+  - ArrayBuffer
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/ArrayBuffer/slice
+original_slug: Web/JavaScript/Reference/Objets_globaux/ArrayBuffer/slice
+---
+{{JSRef}}
+
+La méthode **`slice()`** renvoie un nouvel `ArrayBuffer` dont le contenu est une copie des octets du `ArrayBuffer` courant, contenus entre `début` (compris) et `fin` (non-compris).
+
+{{EmbedInteractiveExample("pages/js/arraybuffer-slice.html")}}
+
+## Syntaxe
+
+    arraybuffer.slice(début[, fin])
+
+### Paramètres
+
+- `début`
+  - : Indice (numérotation commençant à zéro) de l'octet à partir duquel découper le tableau.
+- `fin`
+  - : Indice de l'octet auquel finir la découpe du tableau. Si ce paramètre n'est pas fourni, le nouvel `ArrayBuffer` contiendra tous les octets entre `début `et la fin du `ArrayBuffer` courant. L'intervalle défini par les valeurs `début` et `fin` est réduit à un intervalle valide pour le tableau courant si nécessaire. Si la longueur du nouveau tableau `ArrayBuffer` sera négative, l'intervalle est réduit à zéro.
+
+### Valeur de retour
+
+Un nouvel objet `ArrayBuffer`.
+
+## Description
+
+La méthode `slice` copie les octets contenus jusqu'au (au sens exclusif) paramètre `fin`. Si le paramètre `début `ou  `fin` est négatif, il fera référence à l'indice à partir de la fin du tableau et non pas à l'indice à partir du début du tableau.
+
+## Exemples
+
+### Copier un `ArrayBuffer`
+
+```js
+var buf1 = new ArrayBuffer(8);
+var buf2 = buf1.slice(0)
+```
+
+## Spécifications
+
+| Spécification                                                                                                            | Statut                           | Commentaires                                    |
+| ------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ----------------------------------------------- |
+| {{SpecName('Typed Array')}}                                                                                     | {{Spec2('Typed Array')}} | Remplacée dans EMCAScript 6.                    |
+| {{SpecName('ES6', '#sec-arraybuffer.prototype.slice', 'ArrayBuffer.prototype.slice')}}     | {{Spec2('ES6')}}             | Définition initiale au sein d'un standard ECMA. |
+| {{SpecName('ESDraft', '#sec-arraybuffer.prototype.slice', 'ArrayBuffer.prototype.slice')}} | {{Spec2('ESDraft')}}     |                                                 |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.ArrayBuffer.slice")}}
+
+## Voir aussi
+
+- {{jsxref("ArrayBuffer")}}
diff --git a/files/fr/web/javascript/reference/global_objects/asyncfunction/index.html b/files/fr/web/javascript/reference/global_objects/asyncfunction/index.html
deleted file mode 100644
index 778e94b924..0000000000
--- a/files/fr/web/javascript/reference/global_objects/asyncfunction/index.html
+++ /dev/null
@@ -1,118 +0,0 @@
----
-title: AsyncFunction
-slug: Web/JavaScript/Reference/Global_Objects/AsyncFunction
-tags:
-  - Constructeur
-  - Experimental
-  - JavaScript
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/AsyncFunction
-original_slug: Web/JavaScript/Reference/Objets_globaux/AsyncFunction
----
-<div>{{JSRef}}</div>
-
-<p>Le constructeur <code><strong>Async</strong></code><strong><code>Function</code></strong> crée un nouvel objet pour {{jsxref("Instructions/async function", "une fonction asynchrone","",1)}}. En JavaScript, chaque fonction asynchrone est en fait un objet <code>AsyncFunction</code>.</p>
-
-<p>Attention, <code>AsyncFunction</code> n'est pas un objet global. On peut l'obtenir grâce au code suivant :</p>
-
-<pre class="brush: js">Object.getPrototypeOf(async function(){}).constructor
-</pre>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">new AsyncFunction ([<var>arg1</var>[, <var>arg2</var>[, ...<var>argN</var>]],] <var>functionBody</var>)</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>arg1, arg2, ... arg<em>N</em></code></dt>
- <dd>Les noms des paramètres passés à la fonction. Chacun doit être une chaîne de caractères qui puisse être un identifiant JavaScript valide ou une liste de telles chaînes séparées par une virgule (ex. "<code>x</code>", "<code>laValeur</code>", ou "<code>a,b</code>").</dd>
- <dt><code>functionBody</code></dt>
- <dd>Une chaîne de caractères qui contient les instructions JavaScript définissant la définition de la fonction.</dd>
-</dl>
-
-<h2 id="Description">Description</h2>
-
-<p>Les objets des {{jsxref("Instructions/async_function", "fonctions asynchrones","",1)}} créés avec le constructeur <code>AsyncFunction</code> sont analysés lorsque la fonction est créée. C'est moins efficace que de déclarer une fonction asynchrone avec une {{jsxref("Instructions/async_function", "expression de fonction asynchrone")}} et de l'appeler depuis le code car ces fonctions sont analysées avec le reste du code.</p>
-
-<p>Tous les arguments passés à la fonction sont traités comme les noms des identifiants des paramètres de la fonction qui sera créée, dans l'ordre dans lequel ils sont passés.</p>
-
-<div class="note">
-<p><strong>Note :</strong> Les fonctions asynchrones créées avec le constructeur <code>AsyncFunction</code> ne créent pas de fermetutres dans leurs contextes de création. Elles sont toujours créées dans la portée globale. Lorsqu'on les exécute, ellee ne pourront accéder qu'à leurs variables locales et aux variables globales, pas à celles qui appartiennent à la portée dans laquelle <code>AsyncFunction</code> a été appelé. On aurait donc un comportement différent  si on appelait {{jsxref("Objets_globaux/eval", "eval")}} avec le code de l'expression de la fonction asynchrone.</p>
-</div>
-
-<p>Si on appelle <code>AsyncFunction</code> comme une fonction (c'est-à-dire sans <code>new</code>), cela aura le même effet que s'il est appelé comme un constructeur.</p>
-
-<h2 id="Propriétés">Propriétés</h2>
-
-<dl>
- <dt><code><strong>AsyncFunction.length</strong></code></dt>
- <dd>La propriété de longueur du constructeur <code>AsyncFunction</code> dont la valeur est 1.</dd>
- <dt>{{jsxref("AsyncFunction.prototype")}}</dt>
- <dd>Le prototype permet d'ajouter des propriétés à tous les objets représentant les fonctions asynchrones.</dd>
-</dl>
-
-<h2 id="Prototype_de_l'objet_AsyncFunction">Prototype de l'objet <code>AsyncFunction</code></h2>
-
-<h3 id="Propriétés_2">Propriétés</h3>
-
-<div>{{page('/fr/docs/Web/JavaScript/Reference/Objets_globaux/AsyncFunction/prototype', 'Propriétés')}}</div>
-
-<h2 id="Instances_AsyncFunction">Instances <code>AsyncFunction</code></h2>
-
-<p>Les instances d'<code>AsyncFunction</code> héritent des méthodes et des propriétés de {{jsxref("AsyncFunction.prototype")}}. Comme avec les autres constructeurs, on peut changer l'objet prototype du constructeur afin de modifier l'ensemble des instances <code>AsyncFunction</code>.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Créer_une_fonction_asynchrone_avec_un_constructeur_AsyncFunction">Créer une fonction asynchrone avec un constructeur <code>AsyncFunction</code></h3>
-
-<pre class="brush: js">function resolveAfter2Seconds(x) {
-  return new Promise(resolve =&gt; {
-    setTimeout(() =&gt; {
-      resolve(x);
-    }, 2000);
-  });
-}
-
-var AsyncFunction = Object.getPrototypeOf(async function(){}).constructor
-var a = new AsyncFunction("a",
-                          "b",
-                          "return await resolveAfter2Seconds(a) + await resolveAfter2Seconds(b);");
-a(10, 20).then(v =&gt; {
-  console.log(v); // affiche 30 après 4 secondes
-});
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-async-function-objects', 'AsyncFunction object')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td>Définition initiale dans ES2017.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.AsyncFunction")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>Instruction {{jsxref("Instructions/async_function", "async function")}}</li>
- <li>Expression {{jsxref("Opérateurs/async_function","async function")}}</li>
- <li>{{jsxref("Objets_globaux/Function", "Function")}}</li>
- <li>Instruction {{jsxref("Instructions/function", "function")}}</li>
- <li>Expression {{jsxref("Opérateurs/function", "function")}}</li>
- <li>{{jsxref("Fonctions", "Fonctions et portées des fonctions", "", 1)}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/asyncfunction/index.md b/files/fr/web/javascript/reference/global_objects/asyncfunction/index.md
new file mode 100644
index 0000000000..53d4c091aa
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/asyncfunction/index.md
@@ -0,0 +1,99 @@
+---
+title: AsyncFunction
+slug: Web/JavaScript/Reference/Global_Objects/AsyncFunction
+tags:
+  - Constructeur
+  - Experimental
+  - JavaScript
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/AsyncFunction
+original_slug: Web/JavaScript/Reference/Objets_globaux/AsyncFunction
+---
+{{JSRef}}
+
+Le constructeur **`Async`\*\***`Function`\*\* crée un nouvel objet pour {{jsxref("Instructions/async function", "une fonction asynchrone","",1)}}. En JavaScript, chaque fonction asynchrone est en fait un objet `AsyncFunction`.
+
+Attention, `AsyncFunction` n'est pas un objet global. On peut l'obtenir grâce au code suivant :
+
+```js
+Object.getPrototypeOf(async function(){}).constructor
+```
+
+## Syntaxe
+
+    new AsyncFunction ([arg1[, arg2[, ...argN]],] functionBody)
+
+### Paramètres
+
+- `arg1, arg2, ... argN`
+  - : Les noms des paramètres passés à la fonction. Chacun doit être une chaîne de caractères qui puisse être un identifiant JavaScript valide ou une liste de telles chaînes séparées par une virgule (ex. "`x`", "`laValeur`", ou "`a,b`").
+- `functionBody`
+  - : Une chaîne de caractères qui contient les instructions JavaScript définissant la définition de la fonction.
+
+## Description
+
+Les objets des {{jsxref("Instructions/async_function", "fonctions asynchrones","",1)}} créés avec le constructeur `AsyncFunction` sont analysés lorsque la fonction est créée. C'est moins efficace que de déclarer une fonction asynchrone avec une {{jsxref("Instructions/async_function", "expression de fonction asynchrone")}} et de l'appeler depuis le code car ces fonctions sont analysées avec le reste du code.
+
+Tous les arguments passés à la fonction sont traités comme les noms des identifiants des paramètres de la fonction qui sera créée, dans l'ordre dans lequel ils sont passés.
+
+> **Note :** Les fonctions asynchrones créées avec le constructeur `AsyncFunction` ne créent pas de fermetutres dans leurs contextes de création. Elles sont toujours créées dans la portée globale. Lorsqu'on les exécute, ellee ne pourront accéder qu'à leurs variables locales et aux variables globales, pas à celles qui appartiennent à la portée dans laquelle `AsyncFunction` a été appelé. On aurait donc un comportement différent  si on appelait {{jsxref("Objets_globaux/eval", "eval")}} avec le code de l'expression de la fonction asynchrone.
+
+Si on appelle `AsyncFunction` comme une fonction (c'est-à-dire sans `new`), cela aura le même effet que s'il est appelé comme un constructeur.
+
+## Propriétés
+
+- **`AsyncFunction.length`**
+  - : La propriété de longueur du constructeur `AsyncFunction` dont la valeur est 1.
+- {{jsxref("AsyncFunction.prototype")}}
+  - : Le prototype permet d'ajouter des propriétés à tous les objets représentant les fonctions asynchrones.
+
+## Prototype de l'objet `AsyncFunction`
+
+### Propriétés
+
+{{page('/fr/docs/Web/JavaScript/Reference/Objets_globaux/AsyncFunction/prototype', 'Propriétés')}}
+
+## Instances `AsyncFunction`
+
+Les instances d'`AsyncFunction` héritent des méthodes et des propriétés de {{jsxref("AsyncFunction.prototype")}}. Comme avec les autres constructeurs, on peut changer l'objet prototype du constructeur afin de modifier l'ensemble des instances `AsyncFunction`.
+
+## Exemples
+
+### Créer une fonction asynchrone avec un constructeur `AsyncFunction`
+
+```js
+function resolveAfter2Seconds(x) {
+  return new Promise(resolve => {
+    setTimeout(() => {
+      resolve(x);
+    }, 2000);
+  });
+}
+
+var AsyncFunction = Object.getPrototypeOf(async function(){}).constructor
+var a = new AsyncFunction("a",
+                          "b",
+                          "return await resolveAfter2Seconds(a) + await resolveAfter2Seconds(b);");
+a(10, 20).then(v => {
+  console.log(v); // affiche 30 après 4 secondes
+});
+```
+
+## Spécifications
+
+| Spécification                                                                                            | État                         | Commentaires                     |
+| -------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------------------- |
+| {{SpecName('ESDraft', '#sec-async-function-objects', 'AsyncFunction object')}} | {{Spec2('ESDraft')}} | Définition initiale dans ES2017. |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.AsyncFunction")}}
+
+## Voir aussi
+
+- Instruction {{jsxref("Instructions/async_function", "async function")}}
+- Expression {{jsxref("Opérateurs/async_function","async function")}}
+- {{jsxref("Objets_globaux/Function", "Function")}}
+- Instruction {{jsxref("Instructions/function", "function")}}
+- Expression {{jsxref("Opérateurs/function", "function")}}
+- {{jsxref("Fonctions", "Fonctions et portées des fonctions", "", 1)}}
diff --git a/files/fr/web/javascript/reference/global_objects/atomics/add/index.html b/files/fr/web/javascript/reference/global_objects/atomics/add/index.html
deleted file mode 100644
index d09496b255..0000000000
--- a/files/fr/web/javascript/reference/global_objects/atomics/add/index.html
+++ /dev/null
@@ -1,81 +0,0 @@
----
-title: Atomics.add()
-slug: Web/JavaScript/Reference/Global_Objects/Atomics/add
-tags:
-  - Atomics
-  - JavaScript
-  - Mémoire partagée
-  - Méthode
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Atomics/add
-original_slug: Web/JavaScript/Reference/Objets_globaux/Atomics/add
----
-<div>{{JSRef}}</div>
-
-<p>La méthode statique <code><strong>Atomics</strong></code><strong><code>.add()</code></strong> ajoute une valeur donnée à un élément du tableau à une position donnée. Elle renvoie l'ancienne valeur qui était contenue à cet emplacement. Cette opération atomique garantit qu'aucune autre opération d'écriture n'est appliquée tant que la valeur modifiée n'est pas écrite.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/atomics-add.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">Atomics.add(typedArray, index, valeur)
-</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>typedArray</code></dt>
- <dd>Un tableau typé entier partagé parmi {{jsxref("Int8Array")}}, {{jsxref("Uint8Array")}}, {{jsxref("Int16Array")}}, {{jsxref("Uint16Array")}}, {{jsxref("Int32Array")}} ou {{jsxref("Uint32Array")}}.</dd>
- <dt><code>index</code></dt>
- <dd>La position du tableau <code>typedArray</code> auquel on souhaite ajouter une <code>valeur</code>.</dd>
- <dt><code>valeur</code></dt>
- <dd>La valeur à ajouter.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>L'ancienne valeur qui était contenue à (<code>typedArray[index]</code>).</p>
-
-<h3 id="Exceptions_levées">Exceptions levées</h3>
-
-<ul>
- <li>Cette méthode lève {{jsxref("TypeError")}} si le type de <code>typedArray</code> n'est pas un des types entiers autorisés.</li>
- <li>Cette méthode lève {{jsxref("TypeError")}} si <code>typedArray</code> n'est pas tableau typé partagé.</li>
- <li>Cette méthode lève {{jsxref("RangeError")}} si <code>index</code> est en dehors des limites de <code>typedArray</code>.</li>
-</ul>
-
-<h2 id="Exemples">Exemples</h2>
-
-<pre class="brush: js">var sab = new SharedArrayBuffer(1024);
-var ta = new Uint8Array(sab);
-
-Atomics.add(ta, 0, 12); // renvoie 0, l'ancienne valeur
-Atomics.load(ta, 0);    // 12</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-atomics.add', 'Atomics.add')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td>Définition initiale avec ES2017.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Atomics.add")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Atomics")}}</li>
- <li>{{jsxref("Atomics.sub()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/atomics/add/index.md b/files/fr/web/javascript/reference/global_objects/atomics/add/index.md
new file mode 100644
index 0000000000..9967dde934
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/atomics/add/index.md
@@ -0,0 +1,65 @@
+---
+title: Atomics.add()
+slug: Web/JavaScript/Reference/Global_Objects/Atomics/add
+tags:
+  - Atomics
+  - JavaScript
+  - Mémoire partagée
+  - Méthode
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Atomics/add
+original_slug: Web/JavaScript/Reference/Objets_globaux/Atomics/add
+---
+{{JSRef}}
+
+La méthode statique **`Atomics`\*\***`.add()`\*\* ajoute une valeur donnée à un élément du tableau à une position donnée. Elle renvoie l'ancienne valeur qui était contenue à cet emplacement. Cette opération atomique garantit qu'aucune autre opération d'écriture n'est appliquée tant que la valeur modifiée n'est pas écrite.
+
+{{EmbedInteractiveExample("pages/js/atomics-add.html")}}
+
+## Syntaxe
+
+    Atomics.add(typedArray, index, valeur)
+
+### Paramètres
+
+- `typedArray`
+  - : Un tableau typé entier partagé parmi {{jsxref("Int8Array")}}, {{jsxref("Uint8Array")}}, {{jsxref("Int16Array")}}, {{jsxref("Uint16Array")}}, {{jsxref("Int32Array")}} ou {{jsxref("Uint32Array")}}.
+- `index`
+  - : La position du tableau `typedArray` auquel on souhaite ajouter une `valeur`.
+- `valeur`
+  - : La valeur à ajouter.
+
+### Valeur de retour
+
+L'ancienne valeur qui était contenue à (`typedArray[index]`).
+
+### Exceptions levées
+
+- Cette méthode lève {{jsxref("TypeError")}} si le type de `typedArray` n'est pas un des types entiers autorisés.
+- Cette méthode lève {{jsxref("TypeError")}} si `typedArray` n'est pas tableau typé partagé.
+- Cette méthode lève {{jsxref("RangeError")}} si `index` est en dehors des limites de `typedArray`.
+
+## Exemples
+
+```js
+var sab = new SharedArrayBuffer(1024);
+var ta = new Uint8Array(sab);
+
+Atomics.add(ta, 0, 12); // renvoie 0, l'ancienne valeur
+Atomics.load(ta, 0);    // 12
+```
+
+## Spécifications
+
+| Spécification                                                                | État                         | Commentaires                     |
+| ---------------------------------------------------------------------------- | ---------------------------- | -------------------------------- |
+| {{SpecName('ESDraft', '#sec-atomics.add', 'Atomics.add')}} | {{Spec2('ESDraft')}} | Définition initiale avec ES2017. |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Atomics.add")}}
+
+## Voir aussi
+
+- {{jsxref("Atomics")}}
+- {{jsxref("Atomics.sub()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/atomics/and/index.html b/files/fr/web/javascript/reference/global_objects/atomics/and/index.html
deleted file mode 100644
index 80e18842ac..0000000000
--- a/files/fr/web/javascript/reference/global_objects/atomics/and/index.html
+++ /dev/null
@@ -1,127 +0,0 @@
----
-title: Atomics.and()
-slug: Web/JavaScript/Reference/Global_Objects/Atomics/and
-tags:
-  - Atomics
-  - JavaScript
-  - Mémoire partagée
-  - Méthode
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Atomics/and
-original_slug: Web/JavaScript/Reference/Objets_globaux/Atomics/and
----
-<div>{{JSRef}}</div>
-
-<p>La méthode statique <code><strong>Atomics</strong></code><strong><code>.and()</code></strong> calcule un ET binaire avec une valeur donnée, à un emplacement donné du tableau. Elle renvoie l'ancienne valeur qui était contenue à cet emplacement. Cette opération atomique garantit qu'aucune autre opération d'écriture n'est appliquée tant que la valeur modifiée n'est pas écrite.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/atomics-and.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">Atomics.and(typedArray, index, valeur)
-</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>typedArray</code></dt>
- <dd>Un tableau typé entier partagé parmi {{jsxref("Int8Array")}}, {{jsxref("Uint8Array")}}, {{jsxref("Int16Array")}}, {{jsxref("Uint16Array")}}, {{jsxref("Int32Array")}} ou {{jsxref("Uint32Array")}}.</dd>
- <dt><code>index</code></dt>
- <dd>La position dans <code>typedArray</code> où calculer le ET binaire.</dd>
- <dt><code>valeur</code></dt>
- <dd>Le nombre avec lequel on souhaite calculer le ET binaire.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>L'ancienne valeur qui était contenue à (<code>typedArray[index]</code>).</p>
-
-<h3 id="Exceptions_levée">Exceptions levée</h3>
-
-<ul>
- <li>Cette méthode lève {{jsxref("TypeError")}} si le type de <code>typedArray</code> n'est pas un des types entiers autorisés.</li>
- <li>Cette méthode lève {{jsxref("TypeError")}} si <code>typedArray</code> n'est pas tableau typé partagé.</li>
- <li>Cette méthode lève {{jsxref("RangeError")}} si <code>index</code> est en dehors des limites de <code>typedArray</code>.</li>
-</ul>
-
-<h2 id="Description">Description</h2>
-
-<p>Un ET binaire fournit la valeur 1 uniquement si <code>a</code> et <code>b</code> valent 1. La table de vérité pour l'opération ET est :</p>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th><code>a</code></th>
-   <th><code>b</code></th>
-   <th><code>a &amp; b</code></th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>0</td>
-   <td>0</td>
-   <td>0</td>
-  </tr>
-  <tr>
-   <td>0</td>
-   <td>1</td>
-   <td>0</td>
-  </tr>
-  <tr>
-   <td>1</td>
-   <td>0</td>
-   <td>0</td>
-  </tr>
-  <tr>
-   <td>1</td>
-   <td>1</td>
-   <td>1</td>
-  </tr>
- </tbody>
-</table>
-
-<p>Ainsi, si on calcule le ET binaire de 5 et 1 avec l'instruction <code>5 &amp; 1</code>, cela fournira la valeur <code>0001</code>, qui correspond à 1 en notation décimale.</p>
-
-<pre>5  0101
-1  0001
-   ----
-1  0001</pre>
-
-<h2 id="Exemples">Exemples</h2>
-
-<pre class="brush: js">var sab = new SharedArrayBuffer(1024);
-var ta = new Uint8Array(sab);
-ta[0] = 5;
-
-Atomics.and(ta, 0, 1); // renvoie 0, l'ancienne valeur
-Atomics.load(ta, 0);   // 1
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-atomics.and', 'Atomics.and')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td>Définition initiale avec ES2017.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Atomics.and")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Atomics")}}</li>
- <li>{{jsxref("Atomics.or()")}}</li>
- <li>{{jsxref("Atomics.xor()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/atomics/and/index.md b/files/fr/web/javascript/reference/global_objects/atomics/and/index.md
new file mode 100644
index 0000000000..d3fba9dc8f
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/atomics/and/index.md
@@ -0,0 +1,85 @@
+---
+title: Atomics.and()
+slug: Web/JavaScript/Reference/Global_Objects/Atomics/and
+tags:
+  - Atomics
+  - JavaScript
+  - Mémoire partagée
+  - Méthode
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Atomics/and
+original_slug: Web/JavaScript/Reference/Objets_globaux/Atomics/and
+---
+{{JSRef}}
+
+La méthode statique **`Atomics`\*\***`.and()`\*\* calcule un ET binaire avec une valeur donnée, à un emplacement donné du tableau. Elle renvoie l'ancienne valeur qui était contenue à cet emplacement. Cette opération atomique garantit qu'aucune autre opération d'écriture n'est appliquée tant que la valeur modifiée n'est pas écrite.
+
+{{EmbedInteractiveExample("pages/js/atomics-and.html")}}
+
+## Syntaxe
+
+    Atomics.and(typedArray, index, valeur)
+
+### Paramètres
+
+- `typedArray`
+  - : Un tableau typé entier partagé parmi {{jsxref("Int8Array")}}, {{jsxref("Uint8Array")}}, {{jsxref("Int16Array")}}, {{jsxref("Uint16Array")}}, {{jsxref("Int32Array")}} ou {{jsxref("Uint32Array")}}.
+- `index`
+  - : La position dans `typedArray` où calculer le ET binaire.
+- `valeur`
+  - : Le nombre avec lequel on souhaite calculer le ET binaire.
+
+### Valeur de retour
+
+L'ancienne valeur qui était contenue à (`typedArray[index]`).
+
+### Exceptions levée
+
+- Cette méthode lève {{jsxref("TypeError")}} si le type de `typedArray` n'est pas un des types entiers autorisés.
+- Cette méthode lève {{jsxref("TypeError")}} si `typedArray` n'est pas tableau typé partagé.
+- Cette méthode lève {{jsxref("RangeError")}} si `index` est en dehors des limites de `typedArray`.
+
+## Description
+
+Un ET binaire fournit la valeur 1 uniquement si `a` et `b` valent 1. La table de vérité pour l'opération ET est :
+
+| `a` | `b` | `a & b` |
+| --- | --- | ------- |
+| 0   | 0   | 0       |
+| 0   | 1   | 0       |
+| 1   | 0   | 0       |
+| 1   | 1   | 1       |
+
+Ainsi, si on calcule le ET binaire de 5 et 1 avec l'instruction `5 & 1`, cela fournira la valeur `0001`, qui correspond à 1 en notation décimale.
+
+    5  0101
+    1  0001
+       ----
+    1  0001
+
+## Exemples
+
+```js
+var sab = new SharedArrayBuffer(1024);
+var ta = new Uint8Array(sab);
+ta[0] = 5;
+
+Atomics.and(ta, 0, 1); // renvoie 0, l'ancienne valeur
+Atomics.load(ta, 0);   // 1
+```
+
+## Spécifications
+
+| Spécification                                                                | État                         | Commentaires                     |
+| ---------------------------------------------------------------------------- | ---------------------------- | -------------------------------- |
+| {{SpecName('ESDraft', '#sec-atomics.and', 'Atomics.and')}} | {{Spec2('ESDraft')}} | Définition initiale avec ES2017. |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Atomics.and")}}
+
+## Voir aussi
+
+- {{jsxref("Atomics")}}
+- {{jsxref("Atomics.or()")}}
+- {{jsxref("Atomics.xor()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/atomics/compareexchange/index.html b/files/fr/web/javascript/reference/global_objects/atomics/compareexchange/index.html
deleted file mode 100644
index add0ccdd87..0000000000
--- a/files/fr/web/javascript/reference/global_objects/atomics/compareexchange/index.html
+++ /dev/null
@@ -1,84 +0,0 @@
----
-title: Atomics.compareExchange()
-slug: Web/JavaScript/Reference/Global_Objects/Atomics/compareExchange
-tags:
-  - Atomics
-  - JavaScript
-  - Mémoire partagée
-  - Méthode
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Atomics/compareExchange
-original_slug: Web/JavaScript/Reference/Objets_globaux/Atomics/compareExchange
----
-<div>{{JSRef}}</div>
-
-<p>La méthode statique <code><strong>Atomics</strong></code><strong><code>.compareExchange()</code></strong> échange une valeur d'un tableau à un emplacement donné si la valeur qui était dans le tableau correspond à une valeur donnée. Cette méthode renvoie l'ancienne valeur à cet emplacement, qu'il y ait eu remplacement ou non. Cette opération atomique garantit qu'aucune autre opération d'écriture n'est appliquée tant que la valeur modifiée n'est pas écrite.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/atomics-compareexchange.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">Atomics.compareExchange(typedArray, index, valeurAttendue, valeurRemplacement)
-</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>typedArray</code></dt>
- <dd>Un tableau typé entier partagé parmi {{jsxref("Int8Array")}}, {{jsxref("Uint8Array")}}, {{jsxref("Int16Array")}}, {{jsxref("Uint16Array")}}, {{jsxref("Int32Array")}} ou {{jsxref("Uint32Array")}}.</dd>
- <dt><code>index</code></dt>
- <dd>La position du tableau <code>typedArray</code> à laquelle on veut échanger les valeurs.</dd>
- <dt><code>valeurAttendue</code></dt>
- <dd>La valeur avec laquelle on teste l'égalité.</dd>
- <dt><code>valeurRemplacement</code></dt>
- <dd>Le nombre qu'on souhaite placer dans le tableau si l'ancienne valeur est égale avec <code>valeurAttendue</code>.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>L'ancienne valeur présente à <code>typedArray[index]</code>.</p>
-
-<h3 id="Exceptions_levées">Exceptions levées</h3>
-
-<ul>
- <li>Cette méthode lève {{jsxref("TypeError")}} si le type de <code>typedArray</code> n'est pas un des types entiers autorisés.</li>
- <li>Cette méthode lève {{jsxref("TypeError")}} si <code>typedArray</code> n'est pas tableau typé partagé.</li>
- <li>Cette méthode lève {{jsxref("RangeError")}} si <code>index</code> est en dehors des limites de <code>typedArray</code>.</li>
-</ul>
-
-<h2 id="Exemples">Exemples</h2>
-
-<pre class="brush: js">var sab = new SharedArrayBuffer(1024);
-var ta = new Uint8Array(sab);
-ta[0] = 7;
-
-Atomics.compareExchange(ta, 0, 7, 12); // renvoie 7, l'ancienne valeur
-Atomics.load(ta, 0);                   // 12</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-atomics.compareexchange', 'Atomics.compareExchange')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td>Définition initiale avec ES2017.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Atomics.compareExchange")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Atomics")}}</li>
- <li>{{jsxref("Atomics.exchange()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/atomics/compareexchange/index.md b/files/fr/web/javascript/reference/global_objects/atomics/compareexchange/index.md
new file mode 100644
index 0000000000..e606b19bd4
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/atomics/compareexchange/index.md
@@ -0,0 +1,68 @@
+---
+title: Atomics.compareExchange()
+slug: Web/JavaScript/Reference/Global_Objects/Atomics/compareExchange
+tags:
+  - Atomics
+  - JavaScript
+  - Mémoire partagée
+  - Méthode
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Atomics/compareExchange
+original_slug: Web/JavaScript/Reference/Objets_globaux/Atomics/compareExchange
+---
+{{JSRef}}
+
+La méthode statique **`Atomics`\*\***`.compareExchange()`\*\* échange une valeur d'un tableau à un emplacement donné si la valeur qui était dans le tableau correspond à une valeur donnée. Cette méthode renvoie l'ancienne valeur à cet emplacement, qu'il y ait eu remplacement ou non. Cette opération atomique garantit qu'aucune autre opération d'écriture n'est appliquée tant que la valeur modifiée n'est pas écrite.
+
+{{EmbedInteractiveExample("pages/js/atomics-compareexchange.html")}}
+
+## Syntaxe
+
+    Atomics.compareExchange(typedArray, index, valeurAttendue, valeurRemplacement)
+
+### Paramètres
+
+- `typedArray`
+  - : Un tableau typé entier partagé parmi {{jsxref("Int8Array")}}, {{jsxref("Uint8Array")}}, {{jsxref("Int16Array")}}, {{jsxref("Uint16Array")}}, {{jsxref("Int32Array")}} ou {{jsxref("Uint32Array")}}.
+- `index`
+  - : La position du tableau `typedArray` à laquelle on veut échanger les valeurs.
+- `valeurAttendue`
+  - : La valeur avec laquelle on teste l'égalité.
+- `valeurRemplacement`
+  - : Le nombre qu'on souhaite placer dans le tableau si l'ancienne valeur est égale avec `valeurAttendue`.
+
+### Valeur de retour
+
+L'ancienne valeur présente à `typedArray[index]`.
+
+### Exceptions levées
+
+- Cette méthode lève {{jsxref("TypeError")}} si le type de `typedArray` n'est pas un des types entiers autorisés.
+- Cette méthode lève {{jsxref("TypeError")}} si `typedArray` n'est pas tableau typé partagé.
+- Cette méthode lève {{jsxref("RangeError")}} si `index` est en dehors des limites de `typedArray`.
+
+## Exemples
+
+```js
+var sab = new SharedArrayBuffer(1024);
+var ta = new Uint8Array(sab);
+ta[0] = 7;
+
+Atomics.compareExchange(ta, 0, 7, 12); // renvoie 7, l'ancienne valeur
+Atomics.load(ta, 0);                   // 12
+```
+
+## Spécifications
+
+| Spécification                                                                                                | État                         | Commentaires                     |
+| ------------------------------------------------------------------------------------------------------------ | ---------------------------- | -------------------------------- |
+| {{SpecName('ESDraft', '#sec-atomics.compareexchange', 'Atomics.compareExchange')}} | {{Spec2('ESDraft')}} | Définition initiale avec ES2017. |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Atomics.compareExchange")}}
+
+## Voir aussi
+
+- {{jsxref("Atomics")}}
+- {{jsxref("Atomics.exchange()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/atomics/exchange/index.html b/files/fr/web/javascript/reference/global_objects/atomics/exchange/index.html
deleted file mode 100644
index 7a01cb04b1..0000000000
--- a/files/fr/web/javascript/reference/global_objects/atomics/exchange/index.html
+++ /dev/null
@@ -1,83 +0,0 @@
----
-title: Atomics.exchange()
-slug: Web/JavaScript/Reference/Global_Objects/Atomics/exchange
-tags:
-  - Atomics
-  - JavaScript
-  - Mémoire partagée
-  - Méthode
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Atomics/exchange
-original_slug: Web/JavaScript/Reference/Objets_globaux/Atomics/exchange
----
-<div>{{JSRef}}</div>
-
-<p>La méthode statique <code><strong>Atomics</strong></code><strong><code>.exchange()</code></strong> permet d'enregistrer une valeur à une position donnée d'un tableau et de renvoyer l'ancienne valeur qui était contenue dans le tableau. Cette opération atomique garantit qu'aucune autre opération d'écriture n'est appliquée tant que la valeur modifiée n'est pas écrite.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/atomics-exchange.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">Atomics.exchange(typedArray, index, valeur)
-</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>typedArray</code></dt>
- <dd>Un tableau typé entier partagé parmi {{jsxref("Int8Array")}}, {{jsxref("Uint8Array")}}, {{jsxref("Int16Array")}}, {{jsxref("Uint16Array")}}, {{jsxref("Int32Array")}} ou {{jsxref("Uint32Array")}}.</dd>
- <dt><code>index</code></dt>
- <dd>La position dans le tableau <code>typedArray</code> à laquelle on veut placer <code>valeur</code>.</dd>
- <dt><code>valeur</code></dt>
- <dd>Le nombre qu'on souhaite échanger.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>L'ancienne valeur qui était contenue à (<code>typedArray[index]</code>).</p>
-
-<h3 id="Exceptions_levées">Exceptions levées</h3>
-
-<ul>
- <li>Cette méthode lève {{jsxref("TypeError")}} si le type de <code>typedArray</code> n'est pas un des types entiers autorisés.</li>
- <li>Cette méthode lève {{jsxref("TypeError")}} si <code>typedArray</code> n'est pas tableau typé partagé.</li>
- <li>Cette méthode lève {{jsxref("RangeError")}} si <code>index</code> est en dehors des limites de <code>typedArray</code>.</li>
-</ul>
-
-<h2 id="Exemples">Exemples</h2>
-
-<pre class="brush: js">var sab = new SharedArrayBuffer(1024);
-var ta = new Uint8Array(sab);
-
-Atomics.exchange(ta, 0, 12);  // renvoie 0, l'ancienne valeur
-Atomics.load(ta, 0);          // 12</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-atomics.exchange', 'Atomics.exchange')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td>Définition initiale avec ES2017.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-
-
-<p>{{Compat("javascript.builtins.Atomics.exchange")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Atomics")}}</li>
- <li>{{jsxref("Atomics.compareExchange()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/atomics/exchange/index.md b/files/fr/web/javascript/reference/global_objects/atomics/exchange/index.md
new file mode 100644
index 0000000000..05b78da455
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/atomics/exchange/index.md
@@ -0,0 +1,65 @@
+---
+title: Atomics.exchange()
+slug: Web/JavaScript/Reference/Global_Objects/Atomics/exchange
+tags:
+  - Atomics
+  - JavaScript
+  - Mémoire partagée
+  - Méthode
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Atomics/exchange
+original_slug: Web/JavaScript/Reference/Objets_globaux/Atomics/exchange
+---
+{{JSRef}}
+
+La méthode statique **`Atomics`\*\***`.exchange()`\*\* permet d'enregistrer une valeur à une position donnée d'un tableau et de renvoyer l'ancienne valeur qui était contenue dans le tableau. Cette opération atomique garantit qu'aucune autre opération d'écriture n'est appliquée tant que la valeur modifiée n'est pas écrite.
+
+{{EmbedInteractiveExample("pages/js/atomics-exchange.html")}}
+
+## Syntaxe
+
+    Atomics.exchange(typedArray, index, valeur)
+
+### Paramètres
+
+- `typedArray`
+  - : Un tableau typé entier partagé parmi {{jsxref("Int8Array")}}, {{jsxref("Uint8Array")}}, {{jsxref("Int16Array")}}, {{jsxref("Uint16Array")}}, {{jsxref("Int32Array")}} ou {{jsxref("Uint32Array")}}.
+- `index`
+  - : La position dans le tableau `typedArray` à laquelle on veut placer `valeur`.
+- `valeur`
+  - : Le nombre qu'on souhaite échanger.
+
+### Valeur de retour
+
+L'ancienne valeur qui était contenue à (`typedArray[index]`).
+
+### Exceptions levées
+
+- Cette méthode lève {{jsxref("TypeError")}} si le type de `typedArray` n'est pas un des types entiers autorisés.
+- Cette méthode lève {{jsxref("TypeError")}} si `typedArray` n'est pas tableau typé partagé.
+- Cette méthode lève {{jsxref("RangeError")}} si `index` est en dehors des limites de `typedArray`.
+
+## Exemples
+
+```js
+var sab = new SharedArrayBuffer(1024);
+var ta = new Uint8Array(sab);
+
+Atomics.exchange(ta, 0, 12);  // renvoie 0, l'ancienne valeur
+Atomics.load(ta, 0);          // 12
+```
+
+## Spécifications
+
+| Spécification                                                                                | Statut                       | Commentaires                     |
+| -------------------------------------------------------------------------------------------- | ---------------------------- | -------------------------------- |
+| {{SpecName('ESDraft', '#sec-atomics.exchange', 'Atomics.exchange')}} | {{Spec2('ESDraft')}} | Définition initiale avec ES2017. |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Atomics.exchange")}}
+
+## Voir aussi
+
+- {{jsxref("Atomics")}}
+- {{jsxref("Atomics.compareExchange()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/atomics/index.html b/files/fr/web/javascript/reference/global_objects/atomics/index.html
deleted file mode 100644
index b358b66964..0000000000
--- a/files/fr/web/javascript/reference/global_objects/atomics/index.html
+++ /dev/null
@@ -1,114 +0,0 @@
----
-title: Atomics
-slug: Web/JavaScript/Reference/Global_Objects/Atomics
-tags:
-  - JavaScript
-  - Mémoire partagée
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Atomics
-original_slug: Web/JavaScript/Reference/Objets_globaux/Atomics
----
-<div>{{JSRef}}</div>
-
-<p>L'objet <strong><code>Atomics</code></strong> fournit des opérations atomiques sous la forme de méthodes statiques. Celles-ci sont utilisées avec les objets {{jsxref("SharedArrayBuffer")}}.</p>
-
-<p>Les opérations atomiques sont installées sur un module <code>Atomics</code>. À la différence des autres objets globaux, <code>Atomics</code> n'est pas un constructeur. Pour cette raison, il ne peut être utilisé avec l'opérateur {{jsxref("Opérateurs/L_opérateur_new")}} et il ne peut pas être appelé comme une fonction. Les propriétés et les méthodes d'<code>Atomics</code> sont statiques (<code>Atomics</code> fonctionne ainsi comme l'objet {{jsxref("Math")}}).</p>
-
-<h2 id="Propriétés">Propriétés</h2>
-
-<dl>
- <dt><code>Atomics[Symbol.toStringTag]</code></dt>
- <dd>
- <p>La valeur de cette propriété vaut <code>"Atomics"</code>.</p>
- </dd>
-</dl>
-
-<h2 id="Méthodes">Méthodes</h2>
-
-<h3 id="Opérations_atomiques">Opérations atomiques</h3>
-
-<p>Lorsque la mémoire est partagée, plusieurs <em>threads</em> peuvent lire et écrire sur les mêmes données en mémoire. Les opérations atomiques permettent de s'assurer que des valeurs prévisibles sont écrites et lues, que les opérations sont finies avant que la prochaine débute et que les opérations ne sont pas interrompues.</p>
-
-<dl>
- <dt>{{jsxref("Atomics.add()")}}</dt>
- <dd>Cette méthode ajoute la valeur fournie à la position indiquée dans le tableau. Elle renvoie l'ancienne valeur qui était à cette position.</dd>
- <dt>{{jsxref("Atomics.and()")}}</dt>
- <dd>Cette méthode calcule un ET binaire sur la position indiquée dans le tableau. Elle renvoie l'ancienne valeur qui était à cette position.</dd>
- <dt>{{jsxref("Atomics.compareExchange()")}}</dt>
- <dd>Cette méthode stocke la valeur fournie à la position indiquée dans le tableau si elle est égale à une valeur donnée. Elle renvoie l'ancienne valeur.</dd>
- <dt>{{jsxref("Atomics.exchange()")}}</dt>
- <dd>Cette méthode stocke la valeur fournie à la position indiquée dans le tableau. Elle renvoie l'ancienne valeur.</dd>
- <dt>{{jsxref("Atomics.load()")}}</dt>
- <dd>Cette méthode renvoie la valeur à la position indiquée dans le tableau.</dd>
- <dt>{{jsxref("Atomics.or()")}}</dt>
- <dd>Cette méthode calcule un OU binaire entre la valeur fournie et la position indiquée dans le tableau. Elle renvoie l'ancienne valeur qui était à cette position.</dd>
- <dt>{{jsxref("Atomics.store()")}}</dt>
- <dd>Cette méthode stocke une valeur à une position indiquée dans le tableau. Elle renvoie la valeur.</dd>
- <dt>{{jsxref("Atomics.sub()")}}</dt>
- <dd>Cette méthode soustrait la valeur fournie à la position indiquée dans le tableau. Elle renvoie l'ancienne valeur qui était contenue à cette position.</dd>
- <dt>{{jsxref("Atomics.xor()")}}</dt>
- <dd>Cette méthode calcule un OU exclusif binaire sur une position donnée dans le tableau. Elle renvoie l'ancienne valeur qui était à cette position.</dd>
-</dl>
-
-<h3 id="Attente_et_notification_(wait_et_notify)">Attente et notification (<code>wait</code> et <code>notify</code>)</h3>
-
-<p>Le méthodes <code>wait</code>() et <code>notify()</code> sont basées sur les <em>futex</em> Linux (selon le vocabulaire employé sur Linux où ça signifie « <em>fast user-space mutex</em> » ou encore « mutex rapide pour l'espace utilisateur ») fournissent des outils pour attendre jusqu'à ce qu'une condition donnée soit vérifiée. Généralement ces méthodes sont utilisées pour bloquer des opérations.</p>
-
-<dl>
- <dt>{{jsxref("Atomics.wait()")}}</dt>
- <dd>Cette méthode vérifie qu'une position donnée du tableau contient bien une valeur donnée puis dort ou expire. Elle renvoie une des chaînes suivantes <code>"ok"</code>, <code>"not-equal"</code>, <code>"timed-out"</code>. Si l'agent appelant ne permet pas d'attente, cela lèvera une exception <code>Error</code> (la plupart des navigateurs ne permettront pas que <code>futexWait()</code> soit utilisé sur le <em>thread</em> principal du navigateur).</dd>
- <dt>{{jsxref("Atomics.notify()")}}</dt>
- <dd>Cette méthode notifient les agents qui attendent dans la file d'attente à une position donnée. Elle renvoie le nombre d'agents notifiés.</dd>
- <dt>{{jsxref("Atomics.isLockFree()")}}</dt>
- <dd>Une primitive d'optimisation qui peut être utilisée afin de déterminer s'il faut utiliser des verrous (<em>locks</em>) ou des opérations atomiques. Elle renvoie <code>true</code> si la taille donnée est l'une des propriétés <code>BYTES_PER_ELEMENT</code> des types <code>TypedArray</code> et qu'on peut donc implémenter l'opération de façon atomique plutôt que d'utiliser un verrou.</dd>
-</dl>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-atomics-object', 'Atomics')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES8', '#sec-atomics-object', 'Atomics')}}</td>
-   <td>{{Spec2('ES8')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Atomics")}}</p>
-
-<h3 id="Notes_de_compatibilité">Notes de compatibilité</h3>
-
-<p>Avant Firefox 48 {{geckoRelease(48)}}, les noms les plus récents et la sémantique la plus récente n'étaient pas encore implémentés. Les changements qui ont eu lieu entre la version 46 et la version 48 de Firefox sont :</p>
-
-<ul>
- <li>Les méthodes <code>Atomics.futexWakeOrRequeue()</code> et <code>Atomics.fence()</code> sont désormais complètement retirées (cf. {{bug(1259544)}} et {{bug(1225028)}}).</li>
- <li>Les méthodes {{jsxref("Atomics.wait()")}} et  {{jsxref("Atomics.wake()")}} qui étaient nommées <code>Atomics.futexWait()</code> ete <code>Atomics.futexWake()</code> (cf. {{bug(1260910)}}). Les anciens noms seront  définitivement supprimés à partir de la version 49 ({{bug(1262062)}}). <code>Atomics.wake()</code> a été renommé en <code>Atomics.notify()</code> à partir de la version 63.</li>
- <li>Les propriétés <code>Atomics.OK</code>, <code>Atomics.TIMEDOUT</code>, <code>Atomics.NOTEQUAL</code> ont été retirées. La méthode {{jsxref("Atomics.wait()")}} renvoie désormais les chaînes de caractères <code>"ok"</code>, <code>"timed-out"</code> ou <code>"not-equal"</code> (cf. {{bug(1260835)}}).</li>
- <li>
-  <p>Le paramètre <code>count</code> de la méthode {{jsxref("Atomics.wake()")}} a été modifié, sa valeur par défaut est désormais <code>+Infinity</code> et non <code>0</code> ({{bug(1253350)}}).</p>
- </li>
-</ul>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("ArrayBuffer")}}</li>
- <li><a href="/fr/docs/Web/JavaScript/Tableaux_typés">Les tableaux typés en JavaScript</a></li>
- <li><a href="/fr/docs/Web/API/Web_Workers_API">Web Workers</a></li>
- <li><a href="https://github.com/lars-t-hansen/parlib-simple">parlib-simple </a>– un bibliothèque simple qui fournit des abstractions pour synchronisers et distribuer des tâches.</li>
- <li><a href="https://github.com/tc39/ecmascript_sharedmem/blob/master/TUTORIAL.md">La mémoire partagée – un rapide tutoriel</a></li>
- <li><a href="https://hacks.mozilla.org/2016/05/a-taste-of-javascripts-new-parallel-primitives/">A Taste of JavaScript’s New Parallel Primitives – Mozilla Hacks (en anglais)</a></li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/atomics/index.md b/files/fr/web/javascript/reference/global_objects/atomics/index.md
new file mode 100644
index 0000000000..c9d61aaa85
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/atomics/index.md
@@ -0,0 +1,85 @@
+---
+title: Atomics
+slug: Web/JavaScript/Reference/Global_Objects/Atomics
+tags:
+  - JavaScript
+  - Mémoire partagée
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Atomics
+original_slug: Web/JavaScript/Reference/Objets_globaux/Atomics
+---
+{{JSRef}}
+
+L'objet **`Atomics`** fournit des opérations atomiques sous la forme de méthodes statiques. Celles-ci sont utilisées avec les objets {{jsxref("SharedArrayBuffer")}}.
+
+Les opérations atomiques sont installées sur un module `Atomics`. À la différence des autres objets globaux, `Atomics` n'est pas un constructeur. Pour cette raison, il ne peut être utilisé avec l'opérateur {{jsxref("Opérateurs/L_opérateur_new")}} et il ne peut pas être appelé comme une fonction. Les propriétés et les méthodes d'`Atomics` sont statiques (`Atomics` fonctionne ainsi comme l'objet {{jsxref("Math")}}).
+
+## Propriétés
+
+- `Atomics[Symbol.toStringTag]`
+  - : La valeur de cette propriété vaut `"Atomics"`.
+
+## Méthodes
+
+### Opérations atomiques
+
+Lorsque la mémoire est partagée, plusieurs _threads_ peuvent lire et écrire sur les mêmes données en mémoire. Les opérations atomiques permettent de s'assurer que des valeurs prévisibles sont écrites et lues, que les opérations sont finies avant que la prochaine débute et que les opérations ne sont pas interrompues.
+
+- {{jsxref("Atomics.add()")}}
+  - : Cette méthode ajoute la valeur fournie à la position indiquée dans le tableau. Elle renvoie l'ancienne valeur qui était à cette position.
+- {{jsxref("Atomics.and()")}}
+  - : Cette méthode calcule un ET binaire sur la position indiquée dans le tableau. Elle renvoie l'ancienne valeur qui était à cette position.
+- {{jsxref("Atomics.compareExchange()")}}
+  - : Cette méthode stocke la valeur fournie à la position indiquée dans le tableau si elle est égale à une valeur donnée. Elle renvoie l'ancienne valeur.
+- {{jsxref("Atomics.exchange()")}}
+  - : Cette méthode stocke la valeur fournie à la position indiquée dans le tableau. Elle renvoie l'ancienne valeur.
+- {{jsxref("Atomics.load()")}}
+  - : Cette méthode renvoie la valeur à la position indiquée dans le tableau.
+- {{jsxref("Atomics.or()")}}
+  - : Cette méthode calcule un OU binaire entre la valeur fournie et la position indiquée dans le tableau. Elle renvoie l'ancienne valeur qui était à cette position.
+- {{jsxref("Atomics.store()")}}
+  - : Cette méthode stocke une valeur à une position indiquée dans le tableau. Elle renvoie la valeur.
+- {{jsxref("Atomics.sub()")}}
+  - : Cette méthode soustrait la valeur fournie à la position indiquée dans le tableau. Elle renvoie l'ancienne valeur qui était contenue à cette position.
+- {{jsxref("Atomics.xor()")}}
+  - : Cette méthode calcule un OU exclusif binaire sur une position donnée dans le tableau. Elle renvoie l'ancienne valeur qui était à cette position.
+
+### Attente et notification (`wait` et `notify`)
+
+Le méthodes `wait`() et `notify()` sont basées sur les _futex_ Linux (selon le vocabulaire employé sur Linux où ça signifie « _fast user-space mutex_ » ou encore « mutex rapide pour l'espace utilisateur ») fournissent des outils pour attendre jusqu'à ce qu'une condition donnée soit vérifiée. Généralement ces méthodes sont utilisées pour bloquer des opérations.
+
+- {{jsxref("Atomics.wait()")}}
+  - : Cette méthode vérifie qu'une position donnée du tableau contient bien une valeur donnée puis dort ou expire. Elle renvoie une des chaînes suivantes `"ok"`, `"not-equal"`, `"timed-out"`. Si l'agent appelant ne permet pas d'attente, cela lèvera une exception `Error` (la plupart des navigateurs ne permettront pas que `futexWait()` soit utilisé sur le _thread_ principal du navigateur).
+- {{jsxref("Atomics.notify()")}}
+  - : Cette méthode notifient les agents qui attendent dans la file d'attente à une position donnée. Elle renvoie le nombre d'agents notifiés.
+- {{jsxref("Atomics.isLockFree()")}}
+  - : Une primitive d'optimisation qui peut être utilisée afin de déterminer s'il faut utiliser des verrous (_locks_) ou des opérations atomiques. Elle renvoie `true` si la taille donnée est l'une des propriétés `BYTES_PER_ELEMENT` des types `TypedArray` et qu'on peut donc implémenter l'opération de façon atomique plutôt que d'utiliser un verrou.
+
+## Spécifications
+
+| Spécification                                                                | État                         | Commentaires         |
+| ---------------------------------------------------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName('ESDraft', '#sec-atomics-object', 'Atomics')}} | {{Spec2('ESDraft')}} |                      |
+| {{SpecName('ES8', '#sec-atomics-object', 'Atomics')}}     | {{Spec2('ES8')}}         | Définition initiale. |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Atomics")}}
+
+### Notes de compatibilité
+
+Avant Firefox 48 {{geckoRelease(48)}}, les noms les plus récents et la sémantique la plus récente n'étaient pas encore implémentés. Les changements qui ont eu lieu entre la version 46 et la version 48 de Firefox sont :
+
+- Les méthodes `Atomics.futexWakeOrRequeue()` et `Atomics.fence()` sont désormais complètement retirées (cf. {{bug(1259544)}} et {{bug(1225028)}}).
+- Les méthodes {{jsxref("Atomics.wait()")}} et  {{jsxref("Atomics.wake()")}} qui étaient nommées `Atomics.futexWait()` ete `Atomics.futexWake()` (cf. {{bug(1260910)}}). Les anciens noms seront  définitivement supprimés à partir de la version 49 ({{bug(1262062)}}). `Atomics.wake()` a été renommé en `Atomics.notify()` à partir de la version 63.
+- Les propriétés `Atomics.OK`, `Atomics.TIMEDOUT`, `Atomics.NOTEQUAL` ont été retirées. La méthode {{jsxref("Atomics.wait()")}} renvoie désormais les chaînes de caractères `"ok"`, `"timed-out"` ou `"not-equal"` (cf. {{bug(1260835)}}).
+- Le paramètre `count` de la méthode {{jsxref("Atomics.wake()")}} a été modifié, sa valeur par défaut est désormais `+Infinity` et non `0` ({{bug(1253350)}}).
+
+## Voir aussi
+
+- {{jsxref("ArrayBuffer")}}
+- [Les tableaux typés en JavaScript](/fr/docs/Web/JavaScript/Tableaux_typés)
+- [Web Workers](/fr/docs/Web/API/Web_Workers_API)
+- [parlib-simple ](https://github.com/lars-t-hansen/parlib-simple)– un bibliothèque simple qui fournit des abstractions pour synchronisers et distribuer des tâches.
+- [La mémoire partagée – un rapide tutoriel](https://github.com/tc39/ecmascript_sharedmem/blob/master/TUTORIAL.md)
+- [A Taste of JavaScript’s New Parallel Primitives – Mozilla Hacks (en anglais)](https://hacks.mozilla.org/2016/05/a-taste-of-javascripts-new-parallel-primitives/)
diff --git a/files/fr/web/javascript/reference/global_objects/atomics/islockfree/index.html b/files/fr/web/javascript/reference/global_objects/atomics/islockfree/index.html
deleted file mode 100644
index be1df1cda2..0000000000
--- a/files/fr/web/javascript/reference/global_objects/atomics/islockfree/index.html
+++ /dev/null
@@ -1,71 +0,0 @@
----
-title: Atomics.isLockFree()
-slug: Web/JavaScript/Reference/Global_Objects/Atomics/isLockFree
-tags:
-  - Atomics
-  - JavaScript
-  - Mémoire partagée
-  - Méthode
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Atomics/isLockFree
-original_slug: Web/JavaScript/Reference/Objets_globaux/Atomics/isLockFree
----
-<div>{{JSRef}}</div>
-
-<p>La méthode statique <code><strong>Atomics</strong></code><strong><code>.isLockFree()</code></strong> est utilisée afin de déterminer si on doit utiliser des verrous (<em>locks</em>) ou des opérations atomiques. Elle renvoie <code>true</code> si la taille donnée correspond à une des propriétés <code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/TypedArray/BYTES_PER_ELEMENT">BYTES_PER_ELEMENT</a></code> d'un des types <code>TypedArray</code>.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/atomics-islockfree.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">Atomics.isLockFree(taille)
-</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>taille</code></dt>
- <dd>La taille en octets qu'on souhaite vérifier.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Un {{jsxref("Boolean","booléen","",1)}} indiquant si l'opération se déroule sans verrou.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<pre class="brush: js">Atomics.isLockFree(1); // true
-Atomics.isLockFree(2); // true
-Atomics.isLockFree(3); // false
-Atomics.isLockFree(4); // true
-Atomics.isLockFree(5); // false
-Atomics.isLockFree(6); // false
-Atomics.isLockFree(7); // false
-Atomics.isLockFree(8); // true</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-atomics.islockfree', 'Atomics.isLockFree')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td>Définition initiale avec ES2017.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Atomics.isLockFree")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Atomics")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/atomics/islockfree/index.md b/files/fr/web/javascript/reference/global_objects/atomics/islockfree/index.md
new file mode 100644
index 0000000000..a13dde87ca
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/atomics/islockfree/index.md
@@ -0,0 +1,57 @@
+---
+title: Atomics.isLockFree()
+slug: Web/JavaScript/Reference/Global_Objects/Atomics/isLockFree
+tags:
+  - Atomics
+  - JavaScript
+  - Mémoire partagée
+  - Méthode
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Atomics/isLockFree
+original_slug: Web/JavaScript/Reference/Objets_globaux/Atomics/isLockFree
+---
+{{JSRef}}
+
+La méthode statique **`Atomics`\*\***`.isLockFree()`\** est utilisée afin de déterminer si on doit utiliser des verrous (*locks\*) ou des opérations atomiques. Elle renvoie `true` si la taille donnée correspond à une des propriétés [`BYTES_PER_ELEMENT`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/TypedArray/BYTES_PER_ELEMENT) d'un des types `TypedArray`.
+
+{{EmbedInteractiveExample("pages/js/atomics-islockfree.html")}}
+
+## Syntaxe
+
+    Atomics.isLockFree(taille)
+
+### Paramètres
+
+- `taille`
+  - : La taille en octets qu'on souhaite vérifier.
+
+### Valeur de retour
+
+Un {{jsxref("Boolean","booléen","",1)}} indiquant si l'opération se déroule sans verrou.
+
+## Exemples
+
+```js
+Atomics.isLockFree(1); // true
+Atomics.isLockFree(2); // true
+Atomics.isLockFree(3); // false
+Atomics.isLockFree(4); // true
+Atomics.isLockFree(5); // false
+Atomics.isLockFree(6); // false
+Atomics.isLockFree(7); // false
+Atomics.isLockFree(8); // true
+```
+
+## Spécifications
+
+| Spécification                                                                                    | État                         | Commentaires                     |
+| ------------------------------------------------------------------------------------------------ | ---------------------------- | -------------------------------- |
+| {{SpecName('ESDraft', '#sec-atomics.islockfree', 'Atomics.isLockFree')}} | {{Spec2('ESDraft')}} | Définition initiale avec ES2017. |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Atomics.isLockFree")}}
+
+## Voir aussi
+
+- {{jsxref("Atomics")}}
diff --git a/files/fr/web/javascript/reference/global_objects/atomics/load/index.html b/files/fr/web/javascript/reference/global_objects/atomics/load/index.html
deleted file mode 100644
index 8e692f4ce8..0000000000
--- a/files/fr/web/javascript/reference/global_objects/atomics/load/index.html
+++ /dev/null
@@ -1,79 +0,0 @@
----
-title: Atomics.load()
-slug: Web/JavaScript/Reference/Global_Objects/Atomics/load
-tags:
-  - Atomics
-  - JavaScript
-  - Mémoire partagée
-  - Méthode
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Atomics/load
-original_slug: Web/JavaScript/Reference/Objets_globaux/Atomics/load
----
-<div>{{JSRef}}</div>
-
-<p>La méthode statique <code><strong>Atomics</strong></code><strong><code>.load()</code></strong> renvoie une valeur située à une position donnée du tableau.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/atomics-load.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">Atomics.load(typedArray, index)
-</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>typedArray</code></dt>
- <dd>Un tableau typé entier partagé parmi {{jsxref("Int8Array")}}, {{jsxref("Uint8Array")}}, {{jsxref("Int16Array")}}, {{jsxref("Uint16Array")}}, {{jsxref("Int32Array")}} ou {{jsxref("Uint32Array")}}.</dd>
- <dt><code>index</code></dt>
- <dd>La position du tableau <code>typedArray</code> qu'on souhaite charger.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>La valeur à la position indiquée (<code>typedArray[index]</code>).</p>
-
-<h3 id="Exceptions_levées">Exceptions levées</h3>
-
-<ul>
- <li>Cette méthode lève {{jsxref("TypeError")}} si le type de <code>typedArray</code> n'est pas un des types entiers autorisés.</li>
- <li>Cette méthode lève {{jsxref("TypeError")}} si <code>typedArray</code> n'est pas tableau typé partagé.</li>
- <li>Cette méthode lève {{jsxref("RangeError")}} si <code>index</code> est en dehors des limites de <code>typedArray</code>.</li>
-</ul>
-
-<h2 id="Exemples">Exemples</h2>
-
-<pre class="brush: js">var sab = new SharedArrayBuffer(1024);
-var ta = new Uint8Array(sab);
-
-Atomics.add(ta, 0, 12);
-Atomics.load(ta, 0); // 12</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-atomics.load', 'Atomics.load')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td>Définition initiale avec ES2017.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Atomics.load")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Atomics")}}</li>
- <li>{{jsxref("Atomics.store()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/atomics/load/index.md b/files/fr/web/javascript/reference/global_objects/atomics/load/index.md
new file mode 100644
index 0000000000..9ada195398
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/atomics/load/index.md
@@ -0,0 +1,63 @@
+---
+title: Atomics.load()
+slug: Web/JavaScript/Reference/Global_Objects/Atomics/load
+tags:
+  - Atomics
+  - JavaScript
+  - Mémoire partagée
+  - Méthode
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Atomics/load
+original_slug: Web/JavaScript/Reference/Objets_globaux/Atomics/load
+---
+{{JSRef}}
+
+La méthode statique **`Atomics`\*\***`.load()`\*\* renvoie une valeur située à une position donnée du tableau.
+
+{{EmbedInteractiveExample("pages/js/atomics-load.html")}}
+
+## Syntaxe
+
+    Atomics.load(typedArray, index)
+
+### Paramètres
+
+- `typedArray`
+  - : Un tableau typé entier partagé parmi {{jsxref("Int8Array")}}, {{jsxref("Uint8Array")}}, {{jsxref("Int16Array")}}, {{jsxref("Uint16Array")}}, {{jsxref("Int32Array")}} ou {{jsxref("Uint32Array")}}.
+- `index`
+  - : La position du tableau `typedArray` qu'on souhaite charger.
+
+### Valeur de retour
+
+La valeur à la position indiquée (`typedArray[index]`).
+
+### Exceptions levées
+
+- Cette méthode lève {{jsxref("TypeError")}} si le type de `typedArray` n'est pas un des types entiers autorisés.
+- Cette méthode lève {{jsxref("TypeError")}} si `typedArray` n'est pas tableau typé partagé.
+- Cette méthode lève {{jsxref("RangeError")}} si `index` est en dehors des limites de `typedArray`.
+
+## Exemples
+
+```js
+var sab = new SharedArrayBuffer(1024);
+var ta = new Uint8Array(sab);
+
+Atomics.add(ta, 0, 12);
+Atomics.load(ta, 0); // 12
+```
+
+## Spécifications
+
+| Spécification                                                                    | État                         | Commentaires                     |
+| -------------------------------------------------------------------------------- | ---------------------------- | -------------------------------- |
+| {{SpecName('ESDraft', '#sec-atomics.load', 'Atomics.load')}} | {{Spec2('ESDraft')}} | Définition initiale avec ES2017. |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Atomics.load")}}
+
+## Voir aussi
+
+- {{jsxref("Atomics")}}
+- {{jsxref("Atomics.store()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/atomics/notify/index.html b/files/fr/web/javascript/reference/global_objects/atomics/notify/index.html
deleted file mode 100644
index 81135aa541..0000000000
--- a/files/fr/web/javascript/reference/global_objects/atomics/notify/index.html
+++ /dev/null
@@ -1,93 +0,0 @@
----
-title: Atomics.notify()
-slug: Web/JavaScript/Reference/Global_Objects/Atomics/notify
-tags:
-  - Atomics
-  - JavaScript
-  - Mémoire partagée
-  - Méthode
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Atomics/notify
-original_slug: Web/JavaScript/Reference/Objets_globaux/Atomics/notify
----
-<div>{{JSRef}}</div>
-
-<p>La méthode statique <code><strong>Atomics</strong></code><strong><code>.notify()</code></strong> permet de réveiller des agents dormants qui sont dans la file d'attente.</p>
-
-<div class="note">
-<p><strong>Note :</strong> Cette opération ne fonctionne que sur un tableau typé partagé de type {{jsxref("Int32Array")}}.</p>
-</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">Atomics.notify(typedArray, index, count)
-</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>typedArray</code></dt>
- <dd>Un table typé partagé de type {{jsxref("Int32Array")}}.</dd>
- <dt><code>index</code></dt>
- <dd>La position sur le tableau <code>typedArray</code> pour laquelle réveiller les agents.</dd>
- <dt><code>count</code></dt>
- <dd>Le nombre d'agents dormants à réveiller.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Le nombre d'agents réveillés.</p>
-
-<h3 id="Exceptions_levées">Exceptions levées</h3>
-
-<ul>
- <li>Cette méthode lève {{jsxref("TypeError")}} si <code>typedArray</code> n'est pas un tableau typé partagé de type{{jsxref("Int32Array")}}.</li>
- <li>Cette méthode lève {{jsxref("RangeError")}} si <code>index</code> est en dehors des limites de <code>typedArray</code>.</li>
-</ul>
-
-<h2 id="Exemples">Exemples</h2>
-
-<p>Soit un tableau typé partagé <code>Int32Array</code>:</p>
-
-<pre class="brush: js">var sab = new SharedArrayBuffer(1024);
-var int32 = new Int32Array(sab);
-</pre>
-
-<p>Un <em>thread</em> de lecture est en sommeil et surveille l'emplacement 0 et s'attend à ce que la valeur soit 0. Tant que cette condition est vérifiée, l'exécution n'ira pas plus loin. Lorsque le <em>thread</em> d'écriture a enregistré une nouvelle valeur, le <em>thread</em> de lecture sera réveillé par le <em>thread</em> d'écriture et renverra la nouvelle valeur (123).</p>
-
-<pre class="brush: js">Atomics.wait(int32, 0, 0);
-console.log(int32[0]); // 123</pre>
-
-<p>Un <em>thread</em> d'écriture stocke une nouvelle valeur et notifie le <em>thread</em> de lecture une fois que la valeur a bien été écrite :</p>
-
-<pre class="brush: js">console.log(int32[0]); // 0;
-Atomics.store(int32, 0, 123);
-Atomics.notify(int32, 0, 1);</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-atomics.notify', 'Atomics.notify')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td>Définition initiale avec ES2017.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Atomics.notify")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Atomics")}}</li>
- <li>{{jsxref("Atomics.wait()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/atomics/notify/index.md b/files/fr/web/javascript/reference/global_objects/atomics/notify/index.md
new file mode 100644
index 0000000000..ca6dd91a0a
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/atomics/notify/index.md
@@ -0,0 +1,78 @@
+---
+title: Atomics.notify()
+slug: Web/JavaScript/Reference/Global_Objects/Atomics/notify
+tags:
+  - Atomics
+  - JavaScript
+  - Mémoire partagée
+  - Méthode
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Atomics/notify
+original_slug: Web/JavaScript/Reference/Objets_globaux/Atomics/notify
+---
+{{JSRef}}
+
+La méthode statique **`Atomics`\*\***`.notify()`\*\* permet de réveiller des agents dormants qui sont dans la file d'attente.
+
+> **Note :** Cette opération ne fonctionne que sur un tableau typé partagé de type {{jsxref("Int32Array")}}.
+
+## Syntaxe
+
+    Atomics.notify(typedArray, index, count)
+
+### Paramètres
+
+- `typedArray`
+  - : Un table typé partagé de type {{jsxref("Int32Array")}}.
+- `index`
+  - : La position sur le tableau `typedArray` pour laquelle réveiller les agents.
+- `count`
+  - : Le nombre d'agents dormants à réveiller.
+
+### Valeur de retour
+
+Le nombre d'agents réveillés.
+
+### Exceptions levées
+
+- Cette méthode lève {{jsxref("TypeError")}} si `typedArray` n'est pas un tableau typé partagé de type{{jsxref("Int32Array")}}.
+- Cette méthode lève {{jsxref("RangeError")}} si `index` est en dehors des limites de `typedArray`.
+
+## Exemples
+
+Soit un tableau typé partagé `Int32Array`:
+
+```js
+var sab = new SharedArrayBuffer(1024);
+var int32 = new Int32Array(sab);
+```
+
+Un _thread_ de lecture est en sommeil et surveille l'emplacement 0 et s'attend à ce que la valeur soit 0. Tant que cette condition est vérifiée, l'exécution n'ira pas plus loin. Lorsque le _thread_ d'écriture a enregistré une nouvelle valeur, le _thread_ de lecture sera réveillé par le _thread_ d'écriture et renverra la nouvelle valeur (123).
+
+```js
+Atomics.wait(int32, 0, 0);
+console.log(int32[0]); // 123
+```
+
+Un _thread_ d'écriture stocke une nouvelle valeur et notifie le _thread_ de lecture une fois que la valeur a bien été écrite :
+
+```js
+console.log(int32[0]); // 0;
+Atomics.store(int32, 0, 123);
+Atomics.notify(int32, 0, 1);
+```
+
+## Spécifications
+
+| Spécification                                                                        | Statut                       | Commentaires                     |
+| ------------------------------------------------------------------------------------ | ---------------------------- | -------------------------------- |
+| {{SpecName('ESDraft', '#sec-atomics.notify', 'Atomics.notify')}} | {{Spec2('ESDraft')}} | Définition initiale avec ES2017. |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Atomics.notify")}}
+
+## Voir aussi
+
+- {{jsxref("Atomics")}}
+- {{jsxref("Atomics.wait()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/atomics/or/index.html b/files/fr/web/javascript/reference/global_objects/atomics/or/index.html
deleted file mode 100644
index 0147a2d36e..0000000000
--- a/files/fr/web/javascript/reference/global_objects/atomics/or/index.html
+++ /dev/null
@@ -1,127 +0,0 @@
----
-title: Atomics.or()
-slug: Web/JavaScript/Reference/Global_Objects/Atomics/or
-tags:
-  - Atomics
-  - JavaScript
-  - Mémoire partagée
-  - Méthode
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Atomics/or
-original_slug: Web/JavaScript/Reference/Objets_globaux/Atomics/or
----
-<div>{{JSRef}}</div>
-
-<p>La méthode statique <code><strong>Atomics</strong></code><strong><code>.or()</code></strong> calcule le résultat d'un OU binaire entre une valeur donnée et une valeur du tableau typé et y place le résultat obtenu. Cette opération atomique garantit qu'aucune autre opération d'écriture n'est appliquée tant que la valeur modifiée n'est pas écrite.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/atomics-or.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">Atomics.or(typedArray, index, value)
-</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>typedArray</code></dt>
- <dd>Un tableau typé entier partagé parmi {{jsxref("Int8Array")}}, {{jsxref("Uint8Array")}}, {{jsxref("Int16Array")}}, {{jsxref("Uint16Array")}}, {{jsxref("Int32Array")}} ou {{jsxref("Uint32Array")}}.</dd>
- <dt><code>index</code></dt>
- <dd>La position du tableau <code>typedArray</code> sur laquelle calculer le OU binaire.</dd>
- <dt><code>valeur</code></dt>
- <dd>Le nombre avec lequel calculer le OU binaire.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>L'ancienne valeur contenue à l'emplacement du tableau (<code>typedArray[index]</code>).</p>
-
-<h3 id="Exceptions_levées">Exceptions levées</h3>
-
-<ul>
- <li>Cette méthode lève {{jsxref("TypeError")}} si le type de <code>typedArray</code> n'est pas un des types entiers autorisés.</li>
- <li>Cette méthode lève {{jsxref("TypeError")}} si <code>typedArray</code> n'est pas tableau typé partagé.</li>
- <li>Cette méthode lève {{jsxref("RangeError")}} si <code>index</code> est en dehors des limites de <code>typedArray</code>.</li>
-</ul>
-
-<h2 id="Description">Description</h2>
-
-<p>L'opération binaire OU renvoie 1 si <code>a</code> ou <code>b</code> valent 1. La table de vérité de cette opération est :</p>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th><code>a</code></th>
-   <th><code>b</code></th>
-   <th><code>a | b</code></th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>0</td>
-   <td>0</td>
-   <td>0</td>
-  </tr>
-  <tr>
-   <td>0</td>
-   <td>1</td>
-   <td>1</td>
-  </tr>
-  <tr>
-   <td>1</td>
-   <td>0</td>
-   <td>1</td>
-  </tr>
-  <tr>
-   <td>1</td>
-   <td>1</td>
-   <td>1</td>
-  </tr>
- </tbody>
-</table>
-
-<p>Par exemple, un OU binaire appliqué entre 5 et 1 (<code>5 | 1</code>) renvoie <code>0101</code>, ce qui correspond à 5 en notation décimale.</p>
-
-<pre>5  0101
-1  0001
-   ----
-5  0101
-</pre>
-
-<h2 id="Exemples">Exemples</h2>
-
-<pre class="brush: js">var sab = new SharedArrayBuffer(1024);
-var ta = new Uint8Array(sab);
-ta[0] = 2;
-
-Atomics.or(ta, 0, 1); // renvoie 2, l'ancienne valeur
-Atomics.load(ta, 0);  // 3</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-atomics.or', 'Atomics.or')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td>Définition initiale avec 2017.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Atomics.or")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Atomics")}}</li>
- <li>{{jsxref("Atomics.and()")}}</li>
- <li>{{jsxref("Atomics.xor()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/atomics/or/index.md b/files/fr/web/javascript/reference/global_objects/atomics/or/index.md
new file mode 100644
index 0000000000..26c37fcd96
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/atomics/or/index.md
@@ -0,0 +1,85 @@
+---
+title: Atomics.or()
+slug: Web/JavaScript/Reference/Global_Objects/Atomics/or
+tags:
+  - Atomics
+  - JavaScript
+  - Mémoire partagée
+  - Méthode
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Atomics/or
+original_slug: Web/JavaScript/Reference/Objets_globaux/Atomics/or
+---
+{{JSRef}}
+
+La méthode statique **`Atomics`\*\***`.or()`\*\* calcule le résultat d'un OU binaire entre une valeur donnée et une valeur du tableau typé et y place le résultat obtenu. Cette opération atomique garantit qu'aucune autre opération d'écriture n'est appliquée tant que la valeur modifiée n'est pas écrite.
+
+{{EmbedInteractiveExample("pages/js/atomics-or.html")}}
+
+## Syntaxe
+
+    Atomics.or(typedArray, index, value)
+
+### Paramètres
+
+- `typedArray`
+  - : Un tableau typé entier partagé parmi {{jsxref("Int8Array")}}, {{jsxref("Uint8Array")}}, {{jsxref("Int16Array")}}, {{jsxref("Uint16Array")}}, {{jsxref("Int32Array")}} ou {{jsxref("Uint32Array")}}.
+- `index`
+  - : La position du tableau `typedArray` sur laquelle calculer le OU binaire.
+- `valeur`
+  - : Le nombre avec lequel calculer le OU binaire.
+
+### Valeur de retour
+
+L'ancienne valeur contenue à l'emplacement du tableau (`typedArray[index]`).
+
+### Exceptions levées
+
+- Cette méthode lève {{jsxref("TypeError")}} si le type de `typedArray` n'est pas un des types entiers autorisés.
+- Cette méthode lève {{jsxref("TypeError")}} si `typedArray` n'est pas tableau typé partagé.
+- Cette méthode lève {{jsxref("RangeError")}} si `index` est en dehors des limites de `typedArray`.
+
+## Description
+
+L'opération binaire OU renvoie 1 si `a` ou `b` valent 1. La table de vérité de cette opération est :
+
+| `a` | `b` | `a \| b` |
+| --- | --- | -------- |
+| 0   | 0   | 0        |
+| 0   | 1   | 1        |
+| 1   | 0   | 1        |
+| 1   | 1   | 1        |
+
+Par exemple, un OU binaire appliqué entre 5 et 1 (`5 | 1`) renvoie `0101`, ce qui correspond à 5 en notation décimale.
+
+    5  0101
+    1  0001
+       ----
+    5  0101
+
+## Exemples
+
+```js
+var sab = new SharedArrayBuffer(1024);
+var ta = new Uint8Array(sab);
+ta[0] = 2;
+
+Atomics.or(ta, 0, 1); // renvoie 2, l'ancienne valeur
+Atomics.load(ta, 0);  // 3
+```
+
+## Spécifications
+
+| Spécification                                                                | État                         | Commentaires                   |
+| ---------------------------------------------------------------------------- | ---------------------------- | ------------------------------ |
+| {{SpecName('ESDraft', '#sec-atomics.or', 'Atomics.or')}} | {{Spec2('ESDraft')}} | Définition initiale avec 2017. |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Atomics.or")}}
+
+## Voir aussi
+
+- {{jsxref("Atomics")}}
+- {{jsxref("Atomics.and()")}}
+- {{jsxref("Atomics.xor()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/atomics/store/index.html b/files/fr/web/javascript/reference/global_objects/atomics/store/index.html
deleted file mode 100644
index 4f31079d58..0000000000
--- a/files/fr/web/javascript/reference/global_objects/atomics/store/index.html
+++ /dev/null
@@ -1,87 +0,0 @@
----
-title: Atomics.store()
-slug: Web/JavaScript/Reference/Global_Objects/Atomics/store
-tags:
-  - Atomics
-  - JavaScript
-  - Mémoire partagée
-  - Méthode
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Atomics/store
-original_slug: Web/JavaScript/Reference/Objets_globaux/Atomics/store
----
-<div>{{JSRef}}</div>
-
-<p>La méthode statique <code><strong>Atomics</strong></code><strong><code>.store()</code></strong> enregistre une valeur donnée à un emplacement donné du tableau partagé et renvoie cette valeur.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/atomics-store.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">Atomics.store(typedArray, index, valeur)
-</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>typedArray</code></dt>
- <dd>Un tableau typé entier partagé parmi {{jsxref("Int8Array")}}, {{jsxref("Uint8Array")}}, {{jsxref("Int16Array")}}, {{jsxref("Uint16Array")}}, {{jsxref("Int32Array")}} ou {{jsxref("Uint32Array")}}.</dd>
- <dt><code>index</code></dt>
- <dd>La position du tableau <code>typedArray</code> à laquelle on souhaite stocker la valeur.</dd>
- <dt><code>valeur</code></dt>
- <dd>Le nombre à enregistrer.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>La valeur qui a été enregistrée.</p>
-
-<h3 id="Exceptions">Exceptions</h3>
-
-<ul>
- <li>Cette méthode lève {{jsxref("TypeError")}} si le type de <code>typedArray</code> n'est pas un des types entiers autorisés.</li>
- <li>Cette méthode lève {{jsxref("TypeError")}} si <code>typedArray</code> n'est pas tableau typé partagé.</li>
- <li>Cette méthode lève {{jsxref("RangeError")}} si <code>index</code> est en dehors des limites de <code>typedArray</code>.</li>
-</ul>
-
-<h2 id="Exemples">Exemples</h2>
-
-<pre class="brush: js">var buffer = new ArrayBuffer(4);         // Buffer classique
-var float32 = new Float32Array(buffer);  // Nombre flottant
-var uint32 = new Uint32Array(buffer);    // Représentation IEEE754
-
-float32[0] = 0.5;
-console.log("0x" + uint32[0].toString(16));
-
-uint32[0] = 0x3f000000;   /// Représentation sur 32 bits de 0.5 (IEEE754)
-console.log(float32[0]);
-
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-atomics.store', 'Atomics.store')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td>Définition initiale avec ES2017.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Atomics.store")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Atomics")}}</li>
- <li>{{jsxref("Atomics.load()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/atomics/store/index.md b/files/fr/web/javascript/reference/global_objects/atomics/store/index.md
new file mode 100644
index 0000000000..bb609861db
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/atomics/store/index.md
@@ -0,0 +1,69 @@
+---
+title: Atomics.store()
+slug: Web/JavaScript/Reference/Global_Objects/Atomics/store
+tags:
+  - Atomics
+  - JavaScript
+  - Mémoire partagée
+  - Méthode
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Atomics/store
+original_slug: Web/JavaScript/Reference/Objets_globaux/Atomics/store
+---
+{{JSRef}}
+
+La méthode statique **`Atomics`\*\***`.store()`\*\* enregistre une valeur donnée à un emplacement donné du tableau partagé et renvoie cette valeur.
+
+{{EmbedInteractiveExample("pages/js/atomics-store.html")}}
+
+## Syntaxe
+
+    Atomics.store(typedArray, index, valeur)
+
+### Paramètres
+
+- `typedArray`
+  - : Un tableau typé entier partagé parmi {{jsxref("Int8Array")}}, {{jsxref("Uint8Array")}}, {{jsxref("Int16Array")}}, {{jsxref("Uint16Array")}}, {{jsxref("Int32Array")}} ou {{jsxref("Uint32Array")}}.
+- `index`
+  - : La position du tableau `typedArray` à laquelle on souhaite stocker la valeur.
+- `valeur`
+  - : Le nombre à enregistrer.
+
+### Valeur de retour
+
+La valeur qui a été enregistrée.
+
+### Exceptions
+
+- Cette méthode lève {{jsxref("TypeError")}} si le type de `typedArray` n'est pas un des types entiers autorisés.
+- Cette méthode lève {{jsxref("TypeError")}} si `typedArray` n'est pas tableau typé partagé.
+- Cette méthode lève {{jsxref("RangeError")}} si `index` est en dehors des limites de `typedArray`.
+
+## Exemples
+
+```js
+var buffer = new ArrayBuffer(4);         // Buffer classique
+var float32 = new Float32Array(buffer);  // Nombre flottant
+var uint32 = new Uint32Array(buffer);    // Représentation IEEE754
+
+float32[0] = 0.5;
+console.log("0x" + uint32[0].toString(16));
+
+uint32[0] = 0x3f000000;   /// Représentation sur 32 bits de 0.5 (IEEE754)
+console.log(float32[0]);
+```
+
+## Spécifications
+
+| Spécification                                                                        | État                         | Commentaires                     |
+| ------------------------------------------------------------------------------------ | ---------------------------- | -------------------------------- |
+| {{SpecName('ESDraft', '#sec-atomics.store', 'Atomics.store')}} | {{Spec2('ESDraft')}} | Définition initiale avec ES2017. |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Atomics.store")}}
+
+## Voir aussi
+
+- {{jsxref("Atomics")}}
+- {{jsxref("Atomics.load()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/atomics/sub/index.html b/files/fr/web/javascript/reference/global_objects/atomics/sub/index.html
deleted file mode 100644
index 313fc0577e..0000000000
--- a/files/fr/web/javascript/reference/global_objects/atomics/sub/index.html
+++ /dev/null
@@ -1,83 +0,0 @@
----
-title: Atomics.sub()
-slug: Web/JavaScript/Reference/Global_Objects/Atomics/sub
-tags:
-  - Atomics
-  - JavaScript
-  - Mémoire partagée
-  - Méthode
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Atomics/sub
-original_slug: Web/JavaScript/Reference/Objets_globaux/Atomics/sub
----
-<div>{{JSRef}}</div>
-
-<p>La méthode statique <code><strong>Atomics</strong></code><strong><code>.sub()</code></strong> permet de soustraire une valeur donnée à une position donnée du tableau partagé. Elle renvoie l'ancienne valeur qui était contenue dans le tableau avant l'opération. Cette opération atomique garantit qu'aucune autre opération d'écriture n'est appliquée tant que la valeur modifiée n'est pas écrite.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/atomics-sub.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">Atomics.sub(typedArray, index, valeur)
-</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>typedArray</code></dt>
- <dd>Un tableau typé entier partagé parmi {{jsxref("Int8Array")}}, {{jsxref("Uint8Array")}}, {{jsxref("Int16Array")}}, {{jsxref("Uint16Array")}}, {{jsxref("Int32Array")}} ou {{jsxref("Uint32Array")}}.</dd>
- <dt><code>index</code></dt>
- <dd>La position du tableau typé <code>typedArray</code> à laquelle on veut soustraire <code>valeur</code>.</dd>
- <dt><code>valeur</code></dt>
- <dd>La quantité qu'on souhaite soustraire.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>L'ancienne valeur qui était contenue à (<code>typedArray[index]</code>).</p>
-
-<h3 id="Exceptions_levées">Exceptions levées</h3>
-
-<ul>
- <li>Cette méthode lève {{jsxref("TypeError")}} si le type de <code>typedArray</code> n'est pas un des types entiers autorisés.</li>
- <li>Cette méthode lève {{jsxref("TypeError")}} si <code>typedArray</code> n'est pas tableau typé partagé.</li>
- <li>Cette méthode lève {{jsxref("RangeError")}} si <code>index</code> est en dehors des limites de <code>typedArray</code>.</li>
-</ul>
-
-<h2 id="Exemples">Exemples</h2>
-
-<pre class="brush: js">var sab = new SharedArrayBuffer(1024);
-var ta = new Uint8Array(sab);
-ta[0] = 48;
-
-Atomics.sub(ta, 0, 12); // renvoie 48, l'ancienne valeur
-Atomics.load(ta, 0);    // 36
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-atomics.sub', 'Atomics.sub')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td>Définition initiale avec ES2017.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Atomics.sub")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Atomics")}}</li>
- <li>{{jsxref("Atomics.add()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/atomics/sub/index.md b/files/fr/web/javascript/reference/global_objects/atomics/sub/index.md
new file mode 100644
index 0000000000..d219dfead1
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/atomics/sub/index.md
@@ -0,0 +1,66 @@
+---
+title: Atomics.sub()
+slug: Web/JavaScript/Reference/Global_Objects/Atomics/sub
+tags:
+  - Atomics
+  - JavaScript
+  - Mémoire partagée
+  - Méthode
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Atomics/sub
+original_slug: Web/JavaScript/Reference/Objets_globaux/Atomics/sub
+---
+{{JSRef}}
+
+La méthode statique **`Atomics`\*\***`.sub()`\*\* permet de soustraire une valeur donnée à une position donnée du tableau partagé. Elle renvoie l'ancienne valeur qui était contenue dans le tableau avant l'opération. Cette opération atomique garantit qu'aucune autre opération d'écriture n'est appliquée tant que la valeur modifiée n'est pas écrite.
+
+{{EmbedInteractiveExample("pages/js/atomics-sub.html")}}
+
+## Syntaxe
+
+    Atomics.sub(typedArray, index, valeur)
+
+### Paramètres
+
+- `typedArray`
+  - : Un tableau typé entier partagé parmi {{jsxref("Int8Array")}}, {{jsxref("Uint8Array")}}, {{jsxref("Int16Array")}}, {{jsxref("Uint16Array")}}, {{jsxref("Int32Array")}} ou {{jsxref("Uint32Array")}}.
+- `index`
+  - : La position du tableau typé `typedArray` à laquelle on veut soustraire `valeur`.
+- `valeur`
+  - : La quantité qu'on souhaite soustraire.
+
+### Valeur de retour
+
+L'ancienne valeur qui était contenue à (`typedArray[index]`).
+
+### Exceptions levées
+
+- Cette méthode lève {{jsxref("TypeError")}} si le type de `typedArray` n'est pas un des types entiers autorisés.
+- Cette méthode lève {{jsxref("TypeError")}} si `typedArray` n'est pas tableau typé partagé.
+- Cette méthode lève {{jsxref("RangeError")}} si `index` est en dehors des limites de `typedArray`.
+
+## Exemples
+
+```js
+var sab = new SharedArrayBuffer(1024);
+var ta = new Uint8Array(sab);
+ta[0] = 48;
+
+Atomics.sub(ta, 0, 12); // renvoie 48, l'ancienne valeur
+Atomics.load(ta, 0);    // 36
+```
+
+## Spécifications
+
+| Spécification                                                                | État                         | Commentaires                     |
+| ---------------------------------------------------------------------------- | ---------------------------- | -------------------------------- |
+| {{SpecName('ESDraft', '#sec-atomics.sub', 'Atomics.sub')}} | {{Spec2('ESDraft')}} | Définition initiale avec ES2017. |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Atomics.sub")}}
+
+## Voir aussi
+
+- {{jsxref("Atomics")}}
+- {{jsxref("Atomics.add()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/atomics/wait/index.html b/files/fr/web/javascript/reference/global_objects/atomics/wait/index.html
deleted file mode 100644
index 0a25246d86..0000000000
--- a/files/fr/web/javascript/reference/global_objects/atomics/wait/index.html
+++ /dev/null
@@ -1,95 +0,0 @@
----
-title: Atomics.wait()
-slug: Web/JavaScript/Reference/Global_Objects/Atomics/wait
-tags:
-  - Atomics
-  - JavaScript
-  - Mémoire partagée
-  - Méthode
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Atomics/wait
-original_slug: Web/JavaScript/Reference/Objets_globaux/Atomics/wait
----
-<div>{{JSRef}}</div>
-
-<p>La méthode statique <code><strong>Atomics</strong></code><strong><code>.wait()</code></strong> permet de vérifier qu'un emplacement d'un tableau {{jsxref("Int32Array")}} contient toujours une valeur donnée et, si c'est le cas, l'agent dort en attendant un réveil ou un délai d'expiration. La méthode renvoie une chaîne qui vaut <code>"ok"</code>, <code>"not-equal"</code> ou <code>"timed-out"</code>.</p>
-
-<div class="note">
-<p><strong>Note :</strong> Cette opération ne fonctionne qu'avec un tableau typé partagé {{jsxref("Int32Array")}} et peut ne pas être autorisée sur le <em>thread</em> principal.</p>
-</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">Atomics.wait(typedArray, index, valeur[, timeout])
-</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>typedArray</code></dt>
- <dd>Un tableau typé partagé de type {{jsxref("Int32Array")}}.</dd>
- <dt><code>index</code></dt>
- <dd>La position du tableau typé <code>typedArray</code> sur laquelle on attend un changement.</dd>
- <dt><code>valeur</code></dt>
- <dd>La valeur attendue qu'on souhaite tester.</dd>
- <dt><code>timeout</code> {{optional_inline}}</dt>
- <dd>Le temps à attendre pour le changement de valeur, exprimé en millisecondes. La valeur par défaut est {{jsxref("Infinity")}}.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Une chaîne de caractères ({{jsxref("String")}} qui vaut <code>"ok"</code>, <code>"not-equal"</code> ou <code>"timed-out"</code> selon le cas.</p>
-
-<h3 id="Exceptions_levées">Exceptions levées</h3>
-
-<ul>
- <li>Cette méthode lève {{jsxref("TypeError")}} si <code>typedArray</code> n'est pas un tableau typé partagé de type {{jsxref("Int32Array")}}.</li>
- <li>Cette méthode lève {{jsxref("RangeError")}} si <code>index</code> est en dehors des limites de <code>typedArray</code>.</li>
-</ul>
-
-<h2 id="Exemples">Exemples</h2>
-
-<p>Soit un tableau typé partagé <code>Int32Array</code>:</p>
-
-<pre class="brush: js">var sab = new SharedArrayBuffer(1024);
-var int32 = new Int32Array(sab);
-</pre>
-
-<p>Un <em>thread</em> de lecture est en sommeille et surveille l'emplacement 0 et s'attend à ce que la valeur soit 0. Tant que cette condition est vérifiée, l'exécution n'ira pas plus loin. Lorsque le <em>thread</em> d'écriture a enregistré une nouvelle valeur, le <em>thread</em> de lecture sera notifié par le <em>thread</em> d'écriture et renverra la nouvelle valeur (123).</p>
-
-<pre class="brush: js">Atomics.wait(int32, 0, 0);
-console.log(int32[0]); // 123</pre>
-
-<p>Un <em>thread</em> d'écriture stocke une nouvelle valeur et notifie le <em>thread</em> de lecture une fois que la valeur a bien été écrite :</p>
-
-<pre class="brush: js">console.log(int32[0]); // 0;
-Atomics.store(int32, 0, 123);
-Atomics.notify(int32, 0, 1);</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-atomics.wait', 'Atomics.wait')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td>Définition initiale avec ES2017.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Atomics.wait")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Atomics")}}</li>
- <li>{{jsxref("Atomics.notify()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/atomics/wait/index.md b/files/fr/web/javascript/reference/global_objects/atomics/wait/index.md
new file mode 100644
index 0000000000..ac14c69920
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/atomics/wait/index.md
@@ -0,0 +1,80 @@
+---
+title: Atomics.wait()
+slug: Web/JavaScript/Reference/Global_Objects/Atomics/wait
+tags:
+  - Atomics
+  - JavaScript
+  - Mémoire partagée
+  - Méthode
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Atomics/wait
+original_slug: Web/JavaScript/Reference/Objets_globaux/Atomics/wait
+---
+{{JSRef}}
+
+La méthode statique **`Atomics`\*\***`.wait()`\*\* permet de vérifier qu'un emplacement d'un tableau {{jsxref("Int32Array")}} contient toujours une valeur donnée et, si c'est le cas, l'agent dort en attendant un réveil ou un délai d'expiration. La méthode renvoie une chaîne qui vaut `"ok"`, `"not-equal"` ou `"timed-out"`.
+
+> **Note :** Cette opération ne fonctionne qu'avec un tableau typé partagé {{jsxref("Int32Array")}} et peut ne pas être autorisée sur le _thread_ principal.
+
+## Syntaxe
+
+    Atomics.wait(typedArray, index, valeur[, timeout])
+
+### Paramètres
+
+- `typedArray`
+  - : Un tableau typé partagé de type {{jsxref("Int32Array")}}.
+- `index`
+  - : La position du tableau typé `typedArray` sur laquelle on attend un changement.
+- `valeur`
+  - : La valeur attendue qu'on souhaite tester.
+- `timeout` {{optional_inline}}
+  - : Le temps à attendre pour le changement de valeur, exprimé en millisecondes. La valeur par défaut est {{jsxref("Infinity")}}.
+
+### Valeur de retour
+
+Une chaîne de caractères ({{jsxref("String")}} qui vaut `"ok"`, `"not-equal"` ou `"timed-out"` selon le cas.
+
+### Exceptions levées
+
+- Cette méthode lève {{jsxref("TypeError")}} si `typedArray` n'est pas un tableau typé partagé de type {{jsxref("Int32Array")}}.
+- Cette méthode lève {{jsxref("RangeError")}} si `index` est en dehors des limites de `typedArray`.
+
+## Exemples
+
+Soit un tableau typé partagé `Int32Array`:
+
+```js
+var sab = new SharedArrayBuffer(1024);
+var int32 = new Int32Array(sab);
+```
+
+Un _thread_ de lecture est en sommeille et surveille l'emplacement 0 et s'attend à ce que la valeur soit 0. Tant que cette condition est vérifiée, l'exécution n'ira pas plus loin. Lorsque le _thread_ d'écriture a enregistré une nouvelle valeur, le _thread_ de lecture sera notifié par le _thread_ d'écriture et renverra la nouvelle valeur (123).
+
+```js
+Atomics.wait(int32, 0, 0);
+console.log(int32[0]); // 123
+```
+
+Un _thread_ d'écriture stocke une nouvelle valeur et notifie le _thread_ de lecture une fois que la valeur a bien été écrite :
+
+```js
+console.log(int32[0]); // 0;
+Atomics.store(int32, 0, 123);
+Atomics.notify(int32, 0, 1);
+```
+
+## Spécifications
+
+| Spécification                                                                    | État                         | Commentaires                     |
+| -------------------------------------------------------------------------------- | ---------------------------- | -------------------------------- |
+| {{SpecName('ESDraft', '#sec-atomics.wait', 'Atomics.wait')}} | {{Spec2('ESDraft')}} | Définition initiale avec ES2017. |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Atomics.wait")}}
+
+## Voir aussi
+
+- {{jsxref("Atomics")}}
+- {{jsxref("Atomics.notify()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/atomics/xor/index.html b/files/fr/web/javascript/reference/global_objects/atomics/xor/index.html
deleted file mode 100644
index c3de46ad67..0000000000
--- a/files/fr/web/javascript/reference/global_objects/atomics/xor/index.html
+++ /dev/null
@@ -1,127 +0,0 @@
----
-title: Atomics.xor()
-slug: Web/JavaScript/Reference/Global_Objects/Atomics/xor
-tags:
-  - Atomics
-  - JavaScript
-  - Mémoire partagée
-  - Méthode
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Atomics/xor
-original_slug: Web/JavaScript/Reference/Objets_globaux/Atomics/xor
----
-<div>{{JSRef}}</div>
-
-<p>La méthode statique <code><strong>Atomics</strong></code><strong><code>.xor()</code></strong> calcule le résultat d'un OU exclusif (XOR) binaire entre une valeur donnée et une valeur du tableau partagé à un emplacement donné. Elle renvoie l'ancienne valeur qui était contenue à cette position. Cette opération atomique garantit qu'aucune autre opération d'écriture n'est appliquée tant que la valeur modifiée n'est pas écrite.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/atomics-xor.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">Atomics.xor(typedArray, index, valeur)
-</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>typedArray</code></dt>
- <dd>Un tableau typé entier partagé parmi {{jsxref("Int8Array")}}, {{jsxref("Uint8Array")}}, {{jsxref("Int16Array")}}, {{jsxref("Uint16Array")}}, {{jsxref("Int32Array")}} ou {{jsxref("Uint32Array")}}.</dd>
- <dt><code>index</code></dt>
- <dd>La position du tableau <code>typedArray</code> à laquelle calculer le OU exclusif binaire.</dd>
- <dt><code>valeur</code></dt>
- <dd>La valeur avec laquelle on souhaite calculer le OU exclusif binaire.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>L'ancienne valeur située à cet emplacement du tableau (<code>typedArray[index]</code>).</p>
-
-<h3 id="Exceptions">Exceptions</h3>
-
-<ul>
- <li>Cette méthode lève {{jsxref("TypeError")}} si le type de <code>typedArray</code> n'est pas un des types entiers autorisés.</li>
- <li>Cette méthode lève {{jsxref("TypeError")}} si <code>typedArray</code> n'est pas tableau typé partagé.</li>
- <li>Cette méthode lève {{jsxref("RangeError")}} si <code>index</code> est en dehors des limites de <code>typedArray</code>.</li>
-</ul>
-
-<h2 id="Description">Description</h2>
-
-<p>L'opération binaire OU exclusif (XOR) renvoie 1 si <code>a</code> et <code>b</code> sont différents. La table de vérité correspondante est :</p>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th><code>a</code></th>
-   <th><code>b</code></th>
-   <th><code>a ^ b</code></th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>0</td>
-   <td>0</td>
-   <td>0</td>
-  </tr>
-  <tr>
-   <td>0</td>
-   <td>1</td>
-   <td>1</td>
-  </tr>
-  <tr>
-   <td>1</td>
-   <td>0</td>
-   <td>1</td>
-  </tr>
-  <tr>
-   <td>1</td>
-   <td>1</td>
-   <td>0</td>
-  </tr>
- </tbody>
-</table>
-
-<p>Par exemple, le calcul d'un OU exclusif binaire entre 5 et 1 (<code>5 ^ 1</code>) renvoie <code>0100</code>, qui correspond à 4 en notation décimale.</p>
-
-<pre>5  0101
-1  0001
-   ----
-4  0100
-</pre>
-
-<h2 id="Exemples">Exemples</h2>
-
-<pre class="brush: js">var sab = new SharedArrayBuffer(1024);
-var ta = new Uint8Array(sab);
-ta[0] = 5;
-
-Atomics.xor(ta, 0, 1); // renvoie 5, l'ancienne valeur
-Atomics.load(ta, 0);   // 4</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-atomics.xor', 'Atomics.xor')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td>Définition initiale avec ES2017.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Atomics.xor")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Atomics")}}</li>
- <li>{{jsxref("Atomics.and()")}}</li>
- <li>{{jsxref("Atomics.or()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/atomics/xor/index.md b/files/fr/web/javascript/reference/global_objects/atomics/xor/index.md
new file mode 100644
index 0000000000..935579982a
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/atomics/xor/index.md
@@ -0,0 +1,85 @@
+---
+title: Atomics.xor()
+slug: Web/JavaScript/Reference/Global_Objects/Atomics/xor
+tags:
+  - Atomics
+  - JavaScript
+  - Mémoire partagée
+  - Méthode
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Atomics/xor
+original_slug: Web/JavaScript/Reference/Objets_globaux/Atomics/xor
+---
+{{JSRef}}
+
+La méthode statique **`Atomics`\*\***`.xor()`\*\* calcule le résultat d'un OU exclusif (XOR) binaire entre une valeur donnée et une valeur du tableau partagé à un emplacement donné. Elle renvoie l'ancienne valeur qui était contenue à cette position. Cette opération atomique garantit qu'aucune autre opération d'écriture n'est appliquée tant que la valeur modifiée n'est pas écrite.
+
+{{EmbedInteractiveExample("pages/js/atomics-xor.html")}}
+
+## Syntaxe
+
+    Atomics.xor(typedArray, index, valeur)
+
+### Paramètres
+
+- `typedArray`
+  - : Un tableau typé entier partagé parmi {{jsxref("Int8Array")}}, {{jsxref("Uint8Array")}}, {{jsxref("Int16Array")}}, {{jsxref("Uint16Array")}}, {{jsxref("Int32Array")}} ou {{jsxref("Uint32Array")}}.
+- `index`
+  - : La position du tableau `typedArray` à laquelle calculer le OU exclusif binaire.
+- `valeur`
+  - : La valeur avec laquelle on souhaite calculer le OU exclusif binaire.
+
+### Valeur de retour
+
+L'ancienne valeur située à cet emplacement du tableau (`typedArray[index]`).
+
+### Exceptions
+
+- Cette méthode lève {{jsxref("TypeError")}} si le type de `typedArray` n'est pas un des types entiers autorisés.
+- Cette méthode lève {{jsxref("TypeError")}} si `typedArray` n'est pas tableau typé partagé.
+- Cette méthode lève {{jsxref("RangeError")}} si `index` est en dehors des limites de `typedArray`.
+
+## Description
+
+L'opération binaire OU exclusif (XOR) renvoie 1 si `a` et `b` sont différents. La table de vérité correspondante est :
+
+| `a` | `b` | `a ^ b` |
+| --- | --- | ------- |
+| 0   | 0   | 0       |
+| 0   | 1   | 1       |
+| 1   | 0   | 1       |
+| 1   | 1   | 0       |
+
+Par exemple, le calcul d'un OU exclusif binaire entre 5 et 1 (`5 ^ 1`) renvoie `0100`, qui correspond à 4 en notation décimale.
+
+    5  0101
+    1  0001
+       ----
+    4  0100
+
+## Exemples
+
+```js
+var sab = new SharedArrayBuffer(1024);
+var ta = new Uint8Array(sab);
+ta[0] = 5;
+
+Atomics.xor(ta, 0, 1); // renvoie 5, l'ancienne valeur
+Atomics.load(ta, 0);   // 4
+```
+
+## Spécifications
+
+| Spécification                                                                | État                         | Commentaires                     |
+| ---------------------------------------------------------------------------- | ---------------------------- | -------------------------------- |
+| {{SpecName('ESDraft', '#sec-atomics.xor', 'Atomics.xor')}} | {{Spec2('ESDraft')}} | Définition initiale avec ES2017. |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Atomics.xor")}}
+
+## Voir aussi
+
+- {{jsxref("Atomics")}}
+- {{jsxref("Atomics.and()")}}
+- {{jsxref("Atomics.or()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/bigint/asintn/index.html b/files/fr/web/javascript/reference/global_objects/bigint/asintn/index.html
deleted file mode 100644
index 13023405cf..0000000000
--- a/files/fr/web/javascript/reference/global_objects/bigint/asintn/index.html
+++ /dev/null
@@ -1,73 +0,0 @@
----
-title: BigInt.asIntN()
-slug: Web/JavaScript/Reference/Global_Objects/BigInt/asIntN
-tags:
-  - BigInt
-  - JavaScript
-  - Méthode
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/BigInt/asIntN
-original_slug: Web/JavaScript/Reference/Objets_globaux/BigInt/asIntN
----
-<p>{{JSRef}}</p>
-
-<p>La méthode statique <strong><code>BigInt.asIntN()</code></strong> permet d'écréter un nombre <code>BigInt</code> pour obtenir un entier signé entre 2^(largeur-1) et 2^(largeur-1)-1.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/bigint-asintn.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">var <var>resultat</var> = BigInt.asIntN(<var>largeur</var>, <var>bigint</var>);</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>largeur</code></dt>
- <dd>La quantité de bits disponible pour stocker l'entier.</dd>
- <dt><code>bigint</code></dt>
- <dd>L'entier qu'on souhaite stocker sur le nombre de bits indiqués.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>La valeur de <code>bigint</code> modulo 2^<code>largeur</code> comme entier signé.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<p>La méthode <code>BigInt.asIntN()</code> peut être utile pour rester dans une arithmétique sur 64 bits :</p>
-
-<pre class="brush: js">const max = 2n ** (64n - 1n) - 1n;
-
-BigInt.asIntN(64, max);
-// ↪ 9223372036854775807n
-
-BigInt.asIntN(64, max + 1n);
-// ↪ -9223372036854775807n
-// négatif car dépassement sur le nombre de bits
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-  </tr>
-  <tr>
-   <td><a href="https://tc39.github.io/proposal-bigint/#sec-bigint.asintn">BigInt proposal</a></td>
-   <td>Proposition de niveau 3.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.BigInt.asIntN")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{JSxRef("BigInt")}}</li>
- <li>{{JSxRef("BigInt.asUintN()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/bigint/asintn/index.md b/files/fr/web/javascript/reference/global_objects/bigint/asintn/index.md
new file mode 100644
index 0000000000..3465ce6c21
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/bigint/asintn/index.md
@@ -0,0 +1,61 @@
+---
+title: BigInt.asIntN()
+slug: Web/JavaScript/Reference/Global_Objects/BigInt/asIntN
+tags:
+  - BigInt
+  - JavaScript
+  - Méthode
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/BigInt/asIntN
+original_slug: Web/JavaScript/Reference/Objets_globaux/BigInt/asIntN
+---
+{{JSRef}}
+
+La méthode statique **`BigInt.asIntN()`** permet d'écréter un nombre `BigInt` pour obtenir un entier signé entre 2^(largeur-1) et 2^(largeur-1)-1.
+
+{{EmbedInteractiveExample("pages/js/bigint-asintn.html")}}
+
+## Syntaxe
+
+    var resultat = BigInt.asIntN(largeur, bigint);
+
+### Paramètres
+
+- `largeur`
+  - : La quantité de bits disponible pour stocker l'entier.
+- `bigint`
+  - : L'entier qu'on souhaite stocker sur le nombre de bits indiqués.
+
+### Valeur de retour
+
+La valeur de `bigint` modulo 2^`largeur` comme entier signé.
+
+## Exemples
+
+La méthode `BigInt.asIntN()` peut être utile pour rester dans une arithmétique sur 64 bits :
+
+```js
+const max = 2n ** (64n - 1n) - 1n;
+
+BigInt.asIntN(64, max);
+// ↪ 9223372036854775807n
+
+BigInt.asIntN(64, max + 1n);
+// ↪ -9223372036854775807n
+// négatif car dépassement sur le nombre de bits
+```
+
+## Spécifications
+
+| Spécification                                                                | État                     |
+| ---------------------------------------------------------------------------- | ------------------------ |
+| [BigInt proposal](https://tc39.github.io/proposal-bigint/#sec-bigint.asintn) | Proposition de niveau 3. |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.BigInt.asIntN")}}
+
+## Voir aussi
+
+- {{JSxRef("BigInt")}}
+- {{JSxRef("BigInt.asUintN()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/bigint/asuintn/index.html b/files/fr/web/javascript/reference/global_objects/bigint/asuintn/index.html
deleted file mode 100644
index 5331dbae11..0000000000
--- a/files/fr/web/javascript/reference/global_objects/bigint/asuintn/index.html
+++ /dev/null
@@ -1,73 +0,0 @@
----
-title: BigInt.asUintN()
-slug: Web/JavaScript/Reference/Global_Objects/BigInt/asUintN
-tags:
-  - BigInt
-  - Experimental
-  - JavaScript
-  - Méthode
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/BigInt/asUintN
-original_slug: Web/JavaScript/Reference/Objets_globaux/BigInt/asUintN
----
-<p>{{JSRef}}</p>
-
-<p>La méthode statique <strong><code>BigInt.asUintN()</code></strong> permet d'écréter un <code>BigInt</code> pour ramener sa valeur sur un entier non-signé entre 0 et 2^(largeur)-1.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/bigint-asuintn.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">var <var>résultat</var> = BigInt.asUintN(<var>largeur</var>, <var>bigint</var>);</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>largeur</code></dt>
- <dd>Le nombre de bits disponible pour stocker l'entier.</dd>
- <dt><code>bigint</code></dt>
- <dd>L'entier qu'on souhaite stocker sur le nombre de bits indiqués.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>La valeur de <code>bigint</code> modulo 2^<code>largeur</code> comme un entier non signé.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<p>La méthode <code>BigInt.asUintN()</code> peut s'avérer utile pour rester dans une arithmétique exprimée sur 64 bits .</p>
-
-<pre class="brush: js">const max = 2n ** 64n - 1n;
-
-BigInt.asUintN(64, max);
-// ↪ 18446744073709551615n
-
-BigInt.asUintN(64, max + 1n);
-// ↪ 0n
-// zéro en raison du dépassement</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-  </tr>
-  <tr>
-   <td><a href="https://tc39.github.io/proposal-bigint/#sec-bigint.asuintn">Proposition pour BigInt</a></td>
-   <td>Proposition de niveau 3</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.BigInt.asUintN")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{JSxRef("BigInt")}}</li>
- <li>{{JSxRef("BigInt.asIntN()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/bigint/asuintn/index.md b/files/fr/web/javascript/reference/global_objects/bigint/asuintn/index.md
new file mode 100644
index 0000000000..096fc6af73
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/bigint/asuintn/index.md
@@ -0,0 +1,62 @@
+---
+title: BigInt.asUintN()
+slug: Web/JavaScript/Reference/Global_Objects/BigInt/asUintN
+tags:
+  - BigInt
+  - Experimental
+  - JavaScript
+  - Méthode
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/BigInt/asUintN
+original_slug: Web/JavaScript/Reference/Objets_globaux/BigInt/asUintN
+---
+{{JSRef}}
+
+La méthode statique **`BigInt.asUintN()`** permet d'écréter un `BigInt` pour ramener sa valeur sur un entier non-signé entre 0 et 2^(largeur)-1.
+
+{{EmbedInteractiveExample("pages/js/bigint-asuintn.html")}}
+
+## Syntaxe
+
+    var résultat = BigInt.asUintN(largeur, bigint);
+
+### Paramètres
+
+- `largeur`
+  - : Le nombre de bits disponible pour stocker l'entier.
+- `bigint`
+  - : L'entier qu'on souhaite stocker sur le nombre de bits indiqués.
+
+### Valeur de retour
+
+La valeur de `bigint` modulo 2^`largeur` comme un entier non signé.
+
+## Exemples
+
+La méthode `BigInt.asUintN()` peut s'avérer utile pour rester dans une arithmétique exprimée sur 64 bits .
+
+```js
+const max = 2n ** 64n - 1n;
+
+BigInt.asUintN(64, max);
+// ↪ 18446744073709551615n
+
+BigInt.asUintN(64, max + 1n);
+// ↪ 0n
+// zéro en raison du dépassement
+```
+
+## Spécifications
+
+| Spécification                                                                         | État                    |
+| ------------------------------------------------------------------------------------- | ----------------------- |
+| [Proposition pour BigInt](https://tc39.github.io/proposal-bigint/#sec-bigint.asuintn) | Proposition de niveau 3 |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.BigInt.asUintN")}}
+
+## Voir aussi
+
+- {{JSxRef("BigInt")}}
+- {{JSxRef("BigInt.asIntN()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/bigint/index.html b/files/fr/web/javascript/reference/global_objects/bigint/index.html
deleted file mode 100644
index 6e842994cc..0000000000
--- a/files/fr/web/javascript/reference/global_objects/bigint/index.html
+++ /dev/null
@@ -1,279 +0,0 @@
----
-title: BigInt
-slug: Web/JavaScript/Reference/Global_Objects/BigInt
-tags:
-  - BigInt
-  - Experimental
-  - JavaScript
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/BigInt
-original_slug: Web/JavaScript/Reference/Objets_globaux/BigInt
----
-<div>{{JSRef}}</div>
-
-<p><strong><code>BigInt</code></strong> est un objet natif qui permet de représenter des nombres entiers supérieurs à 2^53 (la plus grande valeur entière qui puisse être représentée par le type primitif {{jsxref("Number")}}). <code>BigInt</code> peut être utilisé afin de représenter de grands entiers de n'importe quelle taille.</p>
-
-<div class="blockIndicator note">
-<p><strong>Note :</strong> BigInt est actuellement une <strong>proposition de niveau 3</strong> pour la <a href="#Spécifications">spécification</a> ECMAScript.</p>
-
-<p>Lorsque cette proposition atteindra le niveau 4 (soit la spécification finale), BigInt sera le deuxième type natif disponible en JavaScript pour représenter des valeurs numériques.</p>
-
-<p><strong><code>BigInt</code></strong> sera ainsi le prochain type primitif ajouté à JavaScript depuis {{JSxRef("Symbol")}} avec ES2015</p>
-</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">BigInt(valeur);
-</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>valeur</code></dt>
- <dd>La valeur numérique de l'objet qu'on souhaite créer. Cet argument peut être une chaîne de caractères ou un entier.</dd>
-</dl>
-
-<div class="blockIndicator note">
-<p><strong>Note :</strong> <code>BigInt()</code> n'est pas censé être utilisé avec l'opérateur {{jsxref("Opérateurs/L_opérateur_new", "new")}}.</p>
-</div>
-
-<h2 id="Description">Description</h2>
-
-<p>Un objet <code>BigInt</code> est créé en ajoutant un <code>n</code> à la fin d'un littéral d'entier — <code>10n</code> par exemple — ou en appelant la fonction <code>BigInt()</code>.</p>
-
-<pre class="brush: js">const plusGrandEntier = 9007199254740991n;
-
-const grandNombre = BigInt(9007199254740991);
-// ↪ 9007199254740991n
-
-const grandNombreEnChaîne = BigInt('9007199254740991');
-// ↪ 9007199254740991n
-
-const grandeNombreHexa = BigInt("0x1fffffffffffff");
-// ↪ 9007199254740991n
-
-const grandeNombreBinaire = BigInt("0b11111111111111111111111111111111111111111111111111111");
-// ↪ 9007199254740991n</pre>
-
-<p>Les objets <code>BigInt</code> sont semblables aux objets {{jsxref("Number")}} selon certains aspects mais avec quelques différences clés. Les objets <code>BigInt</code> ne peuvent pas êre utilisés avec l'objet {{jsxref("Math")}} et ne peuvent pas être manipulés avec des opérations qui impliquent des objets {{jsxref("Number")}}.</p>
-
-<div class="warning">
-<p><strong>Attention :</strong> Il est nécessaire de convertir des valeurs {{jsxref("Number")}} ou <code>BigInt</code> dans les opérations qui les combinent.</p>
-
-<p>Attention lors de ces conversions car la précision d'une valeur <code>BigInt</code> peut être perdue lorsque ce dernier est converti en {{jsxref("Number")}}.</p>
-</div>
-
-<h3 id="Type">Type</h3>
-
-<p>Lorsqu'on utilise <code>typeof</code> sur une valeur <code>BigInt</code>, cet opérateur renverra <code>"bigint"</code> :</p>
-
-<pre class="brush: js">typeof 1n === "bigint"; // true
-typeof BigInt("1") === "bigint"; // true</pre>
-
-<p>Lorsqu'on « enveloppe » la valeur dans un objet, on aura alors un type <code>"object"</code> (comme pour les autres valeurs primitives lorsqu'on les enveloppe dans le constructeur objet) :</p>
-
-<pre class="brush: js">typeof Object(1n) === "object"; // true</pre>
-
-<h3 id="Opérateurs">Opérateurs</h3>
-
-<p>On peut utiliser les opérateurs suivants avec les objets <code>BigInt</code> : <code>+</code>, `<code>*</code>`, `<code>-</code>`, `<code>**</code>`, `<code>%</code>` , <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_binaires">les opérateurs binaires</a> (à l'exception de <code>&gt;&gt;&gt;</code> / décalage à droite avec des zéros) car les grands entiers sont signés. Le <code>+</code> unaire n'est pas non plus pris en charge (afin de <a href="https://github.com/tc39/proposal-bigint/blob/master/ADVANCED.md#dont-break-asmjs">ne pas casser asm.js</a>).</p>
-
-<pre class="brush: js">const nombreSain = BigInt(Number.MAX_SAFE_INTEGER);
-// ↪ 9007199254740991
-
-const maxPlusUn = nombreSain + 1n;
-// ↪ 9007199254740992n
-
-const leFutur = nombreSain + 2n;
-// ↪ 9007199254740993n, cela fonctionne désormais !
-
-const multi = nombreSain * 2n;
-// ↪ 18014398509481982n
-
-const subtr = multi – 10n;
-// ↪ 18014398509481972n
-
-const mod = multi % 10n;
-// ↪ 2n
-
-const bigN = 2n ** 54n;
-// ↪ 18014398509481984n
-
-bigN * -1n
-// ↪ –18014398509481984n
-</pre>
-
-<p>L'opérateur <code>/</code> fonctionne de façon analogue aux nombres classiques. Toutefois, les objets <code>BigInt</code> permettent uniquement de représenter des entiers et non des nombres décimaux. Aussi, la division ne produira pas de partie décimale pour les <code>BigInt</code>.</p>
-
-<pre class="brush: js">const attendu = 4n / 2n;
-// ↪ 2n
-
-const tronque = 5n / 2n;
-// ↪ 2n et pas 2.5n
-
-</pre>
-
-<h3 id="Comparaisons">Comparaisons</h3>
-
-<p>Un objet <code>BigInt</code> n'est pas strictement égal à {{jsxref( "Number")}} mais peut l'être au sens de l'égalité faible.</p>
-
-<pre class="brush: js">0n === 0
-// ↪ false
-
-0n == 0
-// ↪ true</pre>
-
-<p>On peut toutefois comparer des objets {{jsxref("Number")}} et <code>BigInt</code> :</p>
-
-<pre class="brush: js">1n &lt; 2
-// ↪ true
-
-2n &gt; 1
-// ↪ true
-
-2 &gt; 2
-// ↪ false
-
-2n &gt; 2
-// ↪ false
-
-2n &gt;= 2
-// ↪ true</pre>
-
-<p>On peut également mélanger ces valeurs au sein de tableaux :</p>
-
-<pre class="brush: js">const mixed = [4n, 6, -12n, 10, 4, 0, 0n];
-// ↪  [4n, 6, -12n, 10, 4, 0, 0n]
-
-mixed.sort();
-// ↪ [-12n, 0, 0n, 10, 4n, 4, 6]</pre>
-
-<p>On notera que les comparaisons entre les valeurs <code>BigInt</code> et les mêmes valeurs, passées dans le constructeur <code>Object()</code> ne seront pas équivalentes au sens strict :</p>
-
-<pre class="brush: js">0n === Object(0n); // false
-Object(0n) === Object(0n); // false
-
-const o = Object(0n);
-o === o; // true</pre>
-
-<h3 id="Opérations_conditionnelles">Opérations conditionnelles</h3>
-
-<p>Un objet <code>BigInt</code> se comporte comme un objet {{jsxref("Number")}} lorsqu'il est utilisé dans un contexte booléen : comme argument pour le constructeur {{jsxref("Boolean")}}, comme opérandes pour les opérateurs logiques <code>||</code>, `<code>&amp;&amp;</code>` et <code>!</code> ou avec les instructions conditonnelles telles que <code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/if...else">if</a></code>.</p>
-
-<pre class="brush: js">if (0n) {
-  console.log('Nous voici dans le if !');
-} else {
-  console.log('Et nous voilà dans le else !');
-}
-
-// ↪ "Et nous voilà dans le else !"
-
-0n || 12n
-// ↪ 12n
-
-0n &amp;&amp; 12n
-// ↪ 0n
-
-Boolean(0n)
-// ↪ false
-
-Boolean(12n)
-// ↪ true
-
-!12n
-// ↪ false
-
-!0n
-// ↪ true
-</pre>
-
-<h2 id="Méthodes">Méthodes</h2>
-
-<dl>
- <dt><strong><code>BigInt.asIntN()</code></strong></dt>
- <dd>Écrète un objet <code>BigInt</code> pour obtenir un entier signé entre -2^(largeur-1) et 2^(largeur-1)-1</dd>
- <dt><code>BigInt.asUintN()</code></dt>
- <dd>Écrète un objet <code>BigInt</code> pour obtenir un entier non-signé entre 0 et 2^(largeur)-1</dd>
-</dl>
-
-<h2 id="Propriétés">Propriétés</h2>
-
-<dl>
- <dt>{{jsxref("BigInt.prototype")}}</dt>
- <dd>Cette propriété permet d'ajouter des propriétés aux objets <code>BigInt</code>.</dd>
-</dl>
-
-<h2 id="Instances_de_BigInt">Instances de <code>BigInt</code></h2>
-
-<p>L'ensemble des instances de <code>BigInt</code> héritent de <code>BigInt.prototype</code>. Le prototype du constructeur <code>BigInt</code> peut être modifié afin de modifier l'ensemble des instances de <code>BigInt</code>.</p>
-
-<h3 id="Méthodes_2">Méthodes</h3>
-
-<p>{{page('/fr/docs/Web/JavaScript/Reference/Objets_globaux/BigInt/prototype', 'Méthodes')}}</p>
-
-<h2 id="Recommandations">Recommandations</h2>
-
-<h3 id="Coercition_en_Number">Coercition en <code>Number</code></h3>
-
-<p>Lorsqu'on convertit une valeur <code>BigInt</code> en {{jsxref("Objets_globaux/Number","Number")}}, on perd en précision. Si on effectue des allers-retours entre ces deux types, on ne conservera pas la même valeur. Aussi, il est recommandé d'utiliser uniquement <code>BigInt</code> lorsque les valeurs qu'on manipule seront supérieures à 2^53 et qu'il ne sera pas nécessaire de passer d'un type à l'autre.</p>
-
-<h3 id="Cryptographie">Cryptographie</h3>
-
-<p>Les opérations prises en charge pour les valeurs <code>BigInt</code> ne s'effectuent pas à temps constant. Aussi, <code>BigInt</code> ne serait être utilisé à <a href="https://www.chosenplaintext.ca/articles/beginners-guide-constant-time-cryptography.html">des fins cryptographiques</a>.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Calculer_des_nombres_premiers">Calculer des nombres premiers</h3>
-
-<pre class="brush: js">function isPrime(p) {
-  for (let i = 2n; i * i &lt;= p; i++) {
-    if (p % i === 0n) return false;
-  }
-  return true;
-}
-
-// Takes a BigInt as an argument and returns a BigInt
-function nthPrime(nth) {
-  let maybePrime = 2n;
-  let prime = 0n;
-
-  while (nth &gt;= 0n) {
-    if (isPrime(maybePrime)) {
-      nth -= 1n;
-      prime = maybePrime;
-    }
-    maybePrime += 1n;
-  }
-
-  return prime;
-}
-
-nthPrime(20n)
-// ↪ 73n</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><code><a href="https://tc39.es/proposal-bigint/#sec-bigint-objects">BigInt</a></code></td>
-   <td>Brouillon de niveau 3</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.BigInt")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Number")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/bigint/index.md b/files/fr/web/javascript/reference/global_objects/bigint/index.md
new file mode 100644
index 0000000000..4cb7b392cf
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/bigint/index.md
@@ -0,0 +1,271 @@
+---
+title: BigInt
+slug: Web/JavaScript/Reference/Global_Objects/BigInt
+tags:
+  - BigInt
+  - Experimental
+  - JavaScript
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/BigInt
+original_slug: Web/JavaScript/Reference/Objets_globaux/BigInt
+---
+{{JSRef}}
+
+**`BigInt`** est un objet natif qui permet de représenter des nombres entiers supérieurs à 2^53 (la plus grande valeur entière qui puisse être représentée par le type primitif {{jsxref("Number")}}). `BigInt` peut être utilisé afin de représenter de grands entiers de n'importe quelle taille.
+
+> **Note :** BigInt est actuellement une **proposition de niveau 3** pour la [spécification](#Spécifications) ECMAScript.
+>
+> Lorsque cette proposition atteindra le niveau 4 (soit la spécification finale), BigInt sera le deuxième type natif disponible en JavaScript pour représenter des valeurs numériques.
+>
+> **`BigInt`** sera ainsi le prochain type primitif ajouté à JavaScript depuis {{JSxRef("Symbol")}} avec ES2015
+
+## Syntaxe
+
+    BigInt(valeur);
+
+### Paramètres
+
+- `valeur`
+  - : La valeur numérique de l'objet qu'on souhaite créer. Cet argument peut être une chaîne de caractères ou un entier.
+
+> **Note :** `BigInt()` n'est pas censé être utilisé avec l'opérateur {{jsxref("Opérateurs/L_opérateur_new", "new")}}.
+
+## Description
+
+Un objet `BigInt` est créé en ajoutant un `n` à la fin d'un littéral d'entier — `10n` par exemple — ou en appelant la fonction `BigInt()`.
+
+```js
+const plusGrandEntier = 9007199254740991n;
+
+const grandNombre = BigInt(9007199254740991);
+// ↪ 9007199254740991n
+
+const grandNombreEnChaîne = BigInt('9007199254740991');
+// ↪ 9007199254740991n
+
+const grandeNombreHexa = BigInt("0x1fffffffffffff");
+// ↪ 9007199254740991n
+
+const grandeNombreBinaire = BigInt("0b11111111111111111111111111111111111111111111111111111");
+// ↪ 9007199254740991n
+```
+
+Les objets `BigInt` sont semblables aux objets {{jsxref("Number")}} selon certains aspects mais avec quelques différences clés. Les objets `BigInt` ne peuvent pas êre utilisés avec l'objet {{jsxref("Math")}} et ne peuvent pas être manipulés avec des opérations qui impliquent des objets {{jsxref("Number")}}.
+
+> **Attention :** Il est nécessaire de convertir des valeurs {{jsxref("Number")}} ou `BigInt` dans les opérations qui les combinent.
+>
+> Attention lors de ces conversions car la précision d'une valeur `BigInt` peut être perdue lorsque ce dernier est converti en {{jsxref("Number")}}.
+
+### Type
+
+Lorsqu'on utilise `typeof` sur une valeur `BigInt`, cet opérateur renverra `"bigint"` :
+
+```js
+typeof 1n === "bigint"; // true
+typeof BigInt("1") === "bigint"; // true
+```
+
+Lorsqu'on « enveloppe » la valeur dans un objet, on aura alors un type `"object"` (comme pour les autres valeurs primitives lorsqu'on les enveloppe dans le constructeur objet) :
+
+```js
+typeof Object(1n) === "object"; // true
+```
+
+### Opérateurs
+
+On peut utiliser les opérateurs suivants avec les objets `BigInt` : `+`, \``*`\`, \``-`\`, \``**`\`, \``%`\` , [les opérateurs binaires](/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_binaires) (à l'exception de `>>>` / décalage à droite avec des zéros) car les grands entiers sont signés. Le `+` unaire n'est pas non plus pris en charge (afin de [ne pas casser asm.js](https://github.com/tc39/proposal-bigint/blob/master/ADVANCED.md#dont-break-asmjs)).
+
+```js
+const nombreSain = BigInt(Number.MAX_SAFE_INTEGER);
+// ↪ 9007199254740991
+
+const maxPlusUn = nombreSain + 1n;
+// ↪ 9007199254740992n
+
+const leFutur = nombreSain + 2n;
+// ↪ 9007199254740993n, cela fonctionne désormais !
+
+const multi = nombreSain * 2n;
+// ↪ 18014398509481982n
+
+const subtr = multi – 10n;
+// ↪ 18014398509481972n
+
+const mod = multi % 10n;
+// ↪ 2n
+
+const bigN = 2n ** 54n;
+// ↪ 18014398509481984n
+
+bigN * -1n
+// ↪ –18014398509481984n
+```
+
+L'opérateur `/` fonctionne de façon analogue aux nombres classiques. Toutefois, les objets `BigInt` permettent uniquement de représenter des entiers et non des nombres décimaux. Aussi, la division ne produira pas de partie décimale pour les `BigInt`.
+
+```js
+const attendu = 4n / 2n;
+// ↪ 2n
+
+const tronque = 5n / 2n;
+// ↪ 2n et pas 2.5n
+```
+
+### Comparaisons
+
+Un objet `BigInt` n'est pas strictement égal à {{jsxref( "Number")}} mais peut l'être au sens de l'égalité faible.
+
+```js
+0n === 0
+// ↪ false
+
+0n == 0
+// ↪ true
+```
+
+On peut toutefois comparer des objets {{jsxref("Number")}} et `BigInt` :
+
+```js
+1n < 2
+// ↪ true
+
+2n > 1
+// ↪ true
+
+2 > 2
+// ↪ false
+
+2n > 2
+// ↪ false
+
+2n >= 2
+// ↪ true
+```
+
+On peut également mélanger ces valeurs au sein de tableaux :
+
+```js
+const mixed = [4n, 6, -12n, 10, 4, 0, 0n];
+// ↪  [4n, 6, -12n, 10, 4, 0, 0n]
+
+mixed.sort();
+// ↪ [-12n, 0, 0n, 10, 4n, 4, 6]
+```
+
+On notera que les comparaisons entre les valeurs `BigInt` et les mêmes valeurs, passées dans le constructeur `Object()` ne seront pas équivalentes au sens strict :
+
+```js
+0n === Object(0n); // false
+Object(0n) === Object(0n); // false
+
+const o = Object(0n);
+o === o; // true
+```
+
+### Opérations conditionnelles
+
+Un objet `BigInt` se comporte comme un objet {{jsxref("Number")}} lorsqu'il est utilisé dans un contexte booléen : comme argument pour le constructeur {{jsxref("Boolean")}}, comme opérandes pour les opérateurs logiques `||`, \``&&`\` et `!` ou avec les instructions conditonnelles telles que [`if`](/fr/docs/Web/JavaScript/Reference/Instructions/if...else).
+
+```js
+if (0n) {
+  console.log('Nous voici dans le if !');
+} else {
+  console.log('Et nous voilà dans le else !');
+}
+
+// ↪ "Et nous voilà dans le else !"
+
+0n || 12n
+// ↪ 12n
+
+0n && 12n
+// ↪ 0n
+
+Boolean(0n)
+// ↪ false
+
+Boolean(12n)
+// ↪ true
+
+!12n
+// ↪ false
+
+!0n
+// ↪ true
+```
+
+## Méthodes
+
+- **`BigInt.asIntN()`**
+  - : Écrète un objet `BigInt` pour obtenir un entier signé entre -2^(largeur-1) et 2^(largeur-1)-1
+- `BigInt.asUintN()`
+  - : Écrète un objet `BigInt` pour obtenir un entier non-signé entre 0 et 2^(largeur)-1
+
+## Propriétés
+
+- {{jsxref("BigInt.prototype")}}
+  - : Cette propriété permet d'ajouter des propriétés aux objets `BigInt`.
+
+## Instances de `BigInt`
+
+L'ensemble des instances de `BigInt` héritent de `BigInt.prototype`. Le prototype du constructeur `BigInt` peut être modifié afin de modifier l'ensemble des instances de `BigInt`.
+
+### Méthodes
+
+{{page('/fr/docs/Web/JavaScript/Reference/Objets_globaux/BigInt/prototype', 'Méthodes')}}
+
+## Recommandations
+
+### Coercition en `Number`
+
+Lorsqu'on convertit une valeur `BigInt` en {{jsxref("Objets_globaux/Number","Number")}}, on perd en précision. Si on effectue des allers-retours entre ces deux types, on ne conservera pas la même valeur. Aussi, il est recommandé d'utiliser uniquement `BigInt` lorsque les valeurs qu'on manipule seront supérieures à 2^53 et qu'il ne sera pas nécessaire de passer d'un type à l'autre.
+
+### Cryptographie
+
+Les opérations prises en charge pour les valeurs `BigInt` ne s'effectuent pas à temps constant. Aussi, `BigInt` ne serait être utilisé à [des fins cryptographiques](https://www.chosenplaintext.ca/articles/beginners-guide-constant-time-cryptography.html).
+
+## Exemples
+
+### Calculer des nombres premiers
+
+```js
+function isPrime(p) {
+  for (let i = 2n; i * i <= p; i++) {
+    if (p % i === 0n) return false;
+  }
+  return true;
+}
+
+// Takes a BigInt as an argument and returns a BigInt
+function nthPrime(nth) {
+  let maybePrime = 2n;
+  let prime = 0n;
+
+  while (nth >= 0n) {
+    if (isPrime(maybePrime)) {
+      nth -= 1n;
+      prime = maybePrime;
+    }
+    maybePrime += 1n;
+  }
+
+  return prime;
+}
+
+nthPrime(20n)
+// ↪ 73n
+```
+
+## Spécifications
+
+| Spécification                                                   | État                  |
+| --------------------------------------------------------------- | --------------------- |
+| [`BigInt`](https://tc39.es/proposal-bigint/#sec-bigint-objects) | Brouillon de niveau 3 |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.BigInt")}}
+
+## Voir aussi
+
+- {{jsxref("Number")}}
diff --git a/files/fr/web/javascript/reference/global_objects/bigint/tolocalestring/index.html b/files/fr/web/javascript/reference/global_objects/bigint/tolocalestring/index.html
deleted file mode 100644
index 05c8d2860a..0000000000
--- a/files/fr/web/javascript/reference/global_objects/bigint/tolocalestring/index.html
+++ /dev/null
@@ -1,129 +0,0 @@
----
-title: BigInt.prototype.toLocaleString()
-slug: Web/JavaScript/Reference/Global_Objects/BigInt/toLocaleString
-tags:
-  - BigInt
-  - Internationalisation
-  - Intl
-  - JavaScript
-  - Méthode
-  - Prototype
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/BigInt/toLocaleString
-original_slug: Web/JavaScript/Reference/Objets_globaux/BigInt/toLocaleString
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <strong><code>toLocaleString()</code></strong> renvoie une chaîne de caractères représentant le grand entier pour la ou les locale(s) indiquée(s).</p>
-
-<div>{{EmbedInteractiveExample("pages/js/bigint-tolocalestring.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><code><em>bigIntObj</em>.toLocaleString(</code><code>[locales [, options]])</code></pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>locales</code> {{optional_inline}}</dt>
- <dd>Une chaine de caractères avec un identifiant de langue BCP 47, ou un tableau de ce type de chaine de caractères. Pour le format général et l'interprétation de l'argument <code>locales</code>. Pour plus de détails quant à la forme et l'interprétation de l'argument <code>locales</code>, on consultera la page {{jsxref("Intl")}}.</dd>
- <dt><code>options</code> {{optional_inline}}</dt>
- <dd>Un objet qui contient des propriétés de configuration. Pour les nombres, consulter {{jsxref("Number.prototype.toLocaleString()")}}, pour les dates, consulter {{jsxref("Date.prototype.toLocaleString()")}}.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Une chaîne de caractères qui représente le grand entier selon la ou les locales et les options indiquées.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Utiliser_toLocaleString()">Utiliser <code>toLocaleString()</code></h3>
-
-<p>Voici un exemple d'utilisation simple, sans indiquer de locale ni d'options.</p>
-
-<pre class="brush: js">var bigint = 3500n;
-
-bigint.toLocaleString();
-// Affichera "3500" en français
-</pre>
-
-<h3 id="Utiliser_locales">Utiliser <code>locales</code></h3>
-
-<p>Cet exemple illustre certaines variations pour la représentation d'une même valeur en fonction des différentes locales. En fonction de la langue utilisée par l'utilisateur et par votre interface, vous pourrez utiliser <code>locales</code> pour indiquer la locale ciblée :</p>
-
-<pre class="brush: js">var bigint = 123456789123456789n;
-
-// En allemand, on utilise les points pour séparer
-// les milliers
-console.log(bigint.toLocaleString('de-DE'));
-// → 123.456.789.123.456.789
-
-// La plupart des pays arabes utilise
-// des chiffres <a href="https://en.wikipedia.org/wiki/Eastern_Arabic_numerals">hindoux-arabes</a>
-console.log(bigint.toLocaleString('ar-EG'));
-// → ١٢٣٬٤٥٦٬٧٨٩٬١٢٣٬٤٥٦٬٧٨٩
-
-// India utilise des séparateurs pour
-// les milliers/lakh/crore
-console.log(bigint.toLocaleString('en-IN'));
-// → 1,23,45,67,89,12,34,56,789
-
-// La clé d'extension requiert un système de numérotation
-// par exemple, le système décimal chinois
-console.log(bigint.toLocaleString('zh-Hans-CN-u-nu-hanidec'));
-// → 一二三,四五六,七八九,一二三,四五六,七八九
-
-// Lorsqu'on demande une langue qui peut ne pas être prise
-// en charge (ici le balinais), on peut ajouter une autre
-// locale qui sera utilisée en recours (ici l'indonésien)
-console.log(bigint.toLocaleString(['ban', 'id']));
-// → 123.456.789.123.456.789
-</pre>
-
-<h3 id="Utiliser_options">Utiliser <code>options</code></h3>
-
-<p>Ici, on personnalise le résultat fourni par <code>toLocaleString()</code> grâce à l'argument <code>options</code> :</p>
-
-<pre class="brush: js">var bigint = 123456789123456789n;
-
-// On utilise un format avec une devise
-console.log(bigint.toLocaleString('de-DE', { style: 'currency', currency: 'EUR' }));
-// → 123.456.789.123.456.789,00 €
-
-// Le yen japonais n'utilise pas de sous-unité
-console.log(bigint.toLocaleString('ja-JP', { style: 'currency', currency: 'JPY' }))
-// → ￥123,456,789,123,456,789
-
-// On limite l'écriture aux trois premiers chiffres significatifs
-console.log(bigint.toLocaleString('en-IN', { maximumSignificantDigits: 3 }));
-// → 1,23,00,00,00,00,00,00,000
-</pre>
-
-<h2 id="Performance">Performance</h2>
-
-<p>Lorsqu'on souhaite mettre en forme une grande quantité de nombres, mieux vaudra créer un objet {{jsxref("NumberFormat")}} et utiliser la fonction fournie par sa propriété {{jsxref("NumberFormat.format")}}.</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-  </tr>
-  <tr>
-   <td><code><a href="https://tc39.es/ecma402/#sup-bigint.prototype.tolocalestring">BigInt</a></code></td>
-   <td>Proposition de niveau 3.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.BigInt.toLocaleString")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("BigInt.toString()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/bigint/tolocalestring/index.md b/files/fr/web/javascript/reference/global_objects/bigint/tolocalestring/index.md
new file mode 100644
index 0000000000..ba569b8723
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/bigint/tolocalestring/index.md
@@ -0,0 +1,119 @@
+---
+title: BigInt.prototype.toLocaleString()
+slug: Web/JavaScript/Reference/Global_Objects/BigInt/toLocaleString
+tags:
+  - BigInt
+  - Internationalisation
+  - Intl
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/BigInt/toLocaleString
+original_slug: Web/JavaScript/Reference/Objets_globaux/BigInt/toLocaleString
+---
+{{JSRef}}
+
+La méthode **`toLocaleString()`** renvoie une chaîne de caractères représentant le grand entier pour la ou les locale(s) indiquée(s).
+
+{{EmbedInteractiveExample("pages/js/bigint-tolocalestring.html")}}
+
+## Syntaxe
+
+    bigIntObj.toLocaleString([locales [, options]])
+
+### Paramètres
+
+- `locales` {{optional_inline}}
+  - : Une chaine de caractères avec un identifiant de langue BCP 47, ou un tableau de ce type de chaine de caractères. Pour le format général et l'interprétation de l'argument `locales`. Pour plus de détails quant à la forme et l'interprétation de l'argument `locales`, on consultera la page {{jsxref("Intl")}}.
+- `options` {{optional_inline}}
+  - : Un objet qui contient des propriétés de configuration. Pour les nombres, consulter {{jsxref("Number.prototype.toLocaleString()")}}, pour les dates, consulter {{jsxref("Date.prototype.toLocaleString()")}}.
+
+### Valeur de retour
+
+Une chaîne de caractères qui représente le grand entier selon la ou les locales et les options indiquées.
+
+## Exemples
+
+### Utiliser `toLocaleString()`
+
+Voici un exemple d'utilisation simple, sans indiquer de locale ni d'options.
+
+```js
+var bigint = 3500n;
+
+bigint.toLocaleString();
+// Affichera "3500" en français
+```
+
+### Utiliser `locales`
+
+Cet exemple illustre certaines variations pour la représentation d'une même valeur en fonction des différentes locales. En fonction de la langue utilisée par l'utilisateur et par votre interface, vous pourrez utiliser `locales` pour indiquer la locale ciblée :
+
+```js
+var bigint = 123456789123456789n;
+
+// En allemand, on utilise les points pour séparer
+// les milliers
+console.log(bigint.toLocaleString('de-DE'));
+// → 123.456.789.123.456.789
+
+// La plupart des pays arabes utilise
+// des chiffres hindoux-arabes
+console.log(bigint.toLocaleString('ar-EG'));
+// → ١٢٣٬٤٥٦٬٧٨٩٬١٢٣٬٤٥٦٬٧٨٩
+
+// India utilise des séparateurs pour
+// les milliers/lakh/crore
+console.log(bigint.toLocaleString('en-IN'));
+// → 1,23,45,67,89,12,34,56,789
+
+// La clé d'extension requiert un système de numérotation
+// par exemple, le système décimal chinois
+console.log(bigint.toLocaleString('zh-Hans-CN-u-nu-hanidec'));
+// → 一二三,四五六,七八九,一二三,四五六,七八九
+
+// Lorsqu'on demande une langue qui peut ne pas être prise
+// en charge (ici le balinais), on peut ajouter une autre
+// locale qui sera utilisée en recours (ici l'indonésien)
+console.log(bigint.toLocaleString(['ban', 'id']));
+// → 123.456.789.123.456.789
+```
+
+### Utiliser `options`
+
+Ici, on personnalise le résultat fourni par `toLocaleString()` grâce à l'argument `options` :
+
+```js
+var bigint = 123456789123456789n;
+
+// On utilise un format avec une devise
+console.log(bigint.toLocaleString('de-DE', { style: 'currency', currency: 'EUR' }));
+// → 123.456.789.123.456.789,00 €
+
+// Le yen japonais n'utilise pas de sous-unité
+console.log(bigint.toLocaleString('ja-JP', { style: 'currency', currency: 'JPY' }))
+// → ￥123,456,789,123,456,789
+
+// On limite l'écriture aux trois premiers chiffres significatifs
+console.log(bigint.toLocaleString('en-IN', { maximumSignificantDigits: 3 }));
+// → 1,23,00,00,00,00,00,00,000
+```
+
+## Performance
+
+Lorsqu'on souhaite mettre en forme une grande quantité de nombres, mieux vaudra créer un objet {{jsxref("NumberFormat")}} et utiliser la fonction fournie par sa propriété {{jsxref("NumberFormat.format")}}.
+
+## Spécifications
+
+| Spécification                                                            | État                     |
+| ------------------------------------------------------------------------ | ------------------------ |
+| [`BigInt`](https://tc39.es/ecma402/#sup-bigint.prototype.tolocalestring) | Proposition de niveau 3. |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.BigInt.toLocaleString")}}
+
+## Voir aussi
+
+- {{jsxref("BigInt.toString()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/bigint/tostring/index.html b/files/fr/web/javascript/reference/global_objects/bigint/tostring/index.html
deleted file mode 100644
index 4fbc9eab99..0000000000
--- a/files/fr/web/javascript/reference/global_objects/bigint/tostring/index.html
+++ /dev/null
@@ -1,94 +0,0 @@
----
-title: BigInt.prototype.toString()
-slug: Web/JavaScript/Reference/Global_Objects/BigInt/toString
-tags:
-  - BigInt
-  - JavaScript
-  - Méthode
-  - Prototype
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/BigInt/toString
-original_slug: Web/JavaScript/Reference/Objets_globaux/BigInt/toString
----
-<div>{{JSRef}}</div>
-
-<p>The <strong><code>toString()</code></strong> method returns a string representing the specified {{jsxref("BigInt")}} object. The trailing "n" is not part of the string.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/bigint-tostring.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><code><var>bigIntObj</var>.toString([<var>base</var>])</code></pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>base</code>{{optional_inline}}</dt>
- <dd>Ce paramètre optionnel est compris entre 2 et 36 et indique la base à utiliser pour représenter les valeurs numériques.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Une chaîne de caractères représentant l'objet {{jsxref("BigInt")}} courant.</p>
-
-<h3 id="Exceptions">Exceptions</h3>
-
-<dl>
- <dt>{{jsxref("RangeError")}}</dt>
- <dd>Si la base fournie comme argument <code>toString()</code> est inférieure à 2 ou supérieure à 36, cela déclenchera une exception {{jsxref("RangeError")}}.</dd>
-</dl>
-
-<h2 id="Description">Description</h2>
-
-<p>L'objet {{jsxref("BigInt")}} surcharge la méthode <code>toString()</code> de {{jsxref("Object")}}. Il n'hérite pas ou n'utilise pas {{jsxref("Object.prototype.toString()")}}. Pour les objets {{jsxref( "BigInt")}}, la méthode <code>toString()</code> renvoie une représentation textuelle de l'objet dans la base indiquée.</p>
-
-<p>La méthode <code>toString()</code> analyse le premier argument qui lui est passé et tente de renvoyer une représentation textuelle dans cette base. Pour les bases supérieures à 10, ce seront les lettres de l'alphabet pour indiquer les chiffres supérieurs à 9. Pour les nombres hexadécimaux (base 16), les lettres <code>a</code> à <code>f</code> sont utilisées par exemple.</p>
-
-<p>Si l'argument <code>base</code> n'est pas indiquée, ce sera la base 10 qui sera considérée par défaut.</p>
-
-<p>Si <code>bigIntObj</code> est négatif, le signe est conservé, y compris lorsque la base est 2 (dans ce cas, la chaîne renvoyée sera la représentation binaire précédée par un signe <code>-</code> et <strong>non</strong> le complément à deux de <code>bigIntObj</code>).</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Utiliser_toString()">Utiliser <code>toString()</code></h3>
-
-<pre class="brush: js">17n.toString();      // '17'
-66n.toString(2);     // '1000010'
-254n.toString(16);   // 'fe'
--10n.toString(2);    // -1010'
--0xffn.toString(2);  // '-11111111'
-</pre>
-
-<h3 id="Gestion_du_zéro_négatif_en_BigInt">Gestion du zéro négatif en <code>BigInt</code></h3>
-
-<p>Il n'existe pas de zéro négatif pour <code>BigInt</code> car les entiers ne gèrent pas de concept de zéro négatif. <code>-0.0</code> est un concept relatif à la représentation flottante IEEE et n'est présent que pour le type {{jsxref("Number")}}.</p>
-
-<pre class="brush: js">(-0n).toString();      // '0'
-BigInt(-0).toString(); // '0'</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-  </tr>
-  <tr>
-   <td><a href="https://tc39.github.io/proposal-bigint/#sec-bigint.prototype.tostring">Proposition pour <code>BigInt</code></a></td>
-   <td>Proposition de niveau 3</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.BigInt.toString")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("BigInt.prototype.toLocaleString()")}}</li>
- <li>{{jsxref("BigInt.prototype.valueOf()")}}</li>
- <li>{{jsxref("Number.prototype.toString()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/bigint/tostring/index.md b/files/fr/web/javascript/reference/global_objects/bigint/tostring/index.md
new file mode 100644
index 0000000000..b1fdcdbef7
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/bigint/tostring/index.md
@@ -0,0 +1,82 @@
+---
+title: BigInt.prototype.toString()
+slug: Web/JavaScript/Reference/Global_Objects/BigInt/toString
+tags:
+  - BigInt
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/BigInt/toString
+original_slug: Web/JavaScript/Reference/Objets_globaux/BigInt/toString
+---
+{{JSRef}}
+
+The **`toString()`** method returns a string representing the specified {{jsxref("BigInt")}} object. The trailing "n" is not part of the string.
+
+{{EmbedInteractiveExample("pages/js/bigint-tostring.html")}}
+
+## Syntaxe
+
+    bigIntObj.toString([base])
+
+### Paramètres
+
+- `base`{{optional_inline}}
+  - : Ce paramètre optionnel est compris entre 2 et 36 et indique la base à utiliser pour représenter les valeurs numériques.
+
+### Valeur de retour
+
+Une chaîne de caractères représentant l'objet {{jsxref("BigInt")}} courant.
+
+### Exceptions
+
+- {{jsxref("RangeError")}}
+  - : Si la base fournie comme argument `toString()` est inférieure à 2 ou supérieure à 36, cela déclenchera une exception {{jsxref("RangeError")}}.
+
+## Description
+
+L'objet {{jsxref("BigInt")}} surcharge la méthode `toString()` de {{jsxref("Object")}}. Il n'hérite pas ou n'utilise pas {{jsxref("Object.prototype.toString()")}}. Pour les objets {{jsxref( "BigInt")}}, la méthode `toString()` renvoie une représentation textuelle de l'objet dans la base indiquée.
+
+La méthode `toString()` analyse le premier argument qui lui est passé et tente de renvoyer une représentation textuelle dans cette base. Pour les bases supérieures à 10, ce seront les lettres de l'alphabet pour indiquer les chiffres supérieurs à 9. Pour les nombres hexadécimaux (base 16), les lettres `a` à `f` sont utilisées par exemple.
+
+Si l'argument `base` n'est pas indiquée, ce sera la base 10 qui sera considérée par défaut.
+
+Si `bigIntObj` est négatif, le signe est conservé, y compris lorsque la base est 2 (dans ce cas, la chaîne renvoyée sera la représentation binaire précédée par un signe `-` et **non** le complément à deux de `bigIntObj`).
+
+## Exemples
+
+### Utiliser `toString()`
+
+```js
+17n.toString();      // '17'
+66n.toString(2);     // '1000010'
+254n.toString(16);   // 'fe'
+-10n.toString(2);    // -1010'
+-0xffn.toString(2);  // '-11111111'
+```
+
+### Gestion du zéro négatif en `BigInt`
+
+Il n'existe pas de zéro négatif pour `BigInt` car les entiers ne gèrent pas de concept de zéro négatif. `-0.0` est un concept relatif à la représentation flottante IEEE et n'est présent que pour le type {{jsxref("Number")}}.
+
+```js
+(-0n).toString();      // '0'
+BigInt(-0).toString(); // '0'
+```
+
+## Spécifications
+
+| Spécification                                                                                      | État                    |
+| -------------------------------------------------------------------------------------------------- | ----------------------- |
+| [Proposition pour `BigInt`](https://tc39.github.io/proposal-bigint/#sec-bigint.prototype.tostring) | Proposition de niveau 3 |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.BigInt.toString")}}
+
+## Voir aussi
+
+- {{jsxref("BigInt.prototype.toLocaleString()")}}
+- {{jsxref("BigInt.prototype.valueOf()")}}
+- {{jsxref("Number.prototype.toString()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/bigint/valueof/index.html b/files/fr/web/javascript/reference/global_objects/bigint/valueof/index.html
deleted file mode 100644
index 92a6e74350..0000000000
--- a/files/fr/web/javascript/reference/global_objects/bigint/valueof/index.html
+++ /dev/null
@@ -1,59 +0,0 @@
----
-title: BigInt.prototype.valueOf()
-slug: Web/JavaScript/Reference/Global_Objects/BigInt/valueOf
-tags:
-  - BigInt
-  - JavaScript
-  - Method
-  - Prototype
-  - Reference
-  - valueOf()
-translation_of: Web/JavaScript/Reference/Global_Objects/BigInt/valueOf
-original_slug: Web/JavaScript/Reference/Objets_globaux/BigInt/valueOf
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <strong><code>valueOf()</code></strong> renvoie la valeur primitive encapsulée dans un objet {{jsxref("BigInt")}}.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/bigint-valueof.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>bigIntObj</var>.valueOf()</pre>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Un grand entier (<em>big int</em>) représentant la valeur primitive de l'objet {{jsxref("BigInt")}} courant.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Utiliser_valueOf()">Utiliser <code>valueOf()</code></h3>
-
-<pre class="brush: js">typeof Object(1n); // object
-typeof Object(1n).valueOf(); // bigint
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-  </tr>
-  <tr>
-   <td><a href="https://tc39.github.io/proposal-bigint/#sec-bigint.prototype.valueof">Proposition pour <code>BigInt</code></a></td>
-   <td>Proposition de niveau 3</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.BigInt.valueOf")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("BigInt.prototype.toString()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/bigint/valueof/index.md b/files/fr/web/javascript/reference/global_objects/bigint/valueof/index.md
new file mode 100644
index 0000000000..fae0cd160f
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/bigint/valueof/index.md
@@ -0,0 +1,49 @@
+---
+title: BigInt.prototype.valueOf()
+slug: Web/JavaScript/Reference/Global_Objects/BigInt/valueOf
+tags:
+  - BigInt
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+  - valueOf()
+translation_of: Web/JavaScript/Reference/Global_Objects/BigInt/valueOf
+original_slug: Web/JavaScript/Reference/Objets_globaux/BigInt/valueOf
+---
+{{JSRef}}
+
+La méthode **`valueOf()`** renvoie la valeur primitive encapsulée dans un objet {{jsxref("BigInt")}}.
+
+{{EmbedInteractiveExample("pages/js/bigint-valueof.html")}}
+
+## Syntaxe
+
+    bigIntObj.valueOf()
+
+### Valeur de retour
+
+Un grand entier (_big int_) représentant la valeur primitive de l'objet {{jsxref("BigInt")}} courant.
+
+## Exemples
+
+### Utiliser `valueOf()`
+
+```js
+typeof Object(1n); // object
+typeof Object(1n).valueOf(); // bigint
+```
+
+## Spécifications
+
+| Spécification                                                                                     | État                    |
+| ------------------------------------------------------------------------------------------------- | ----------------------- |
+| [Proposition pour `BigInt`](https://tc39.github.io/proposal-bigint/#sec-bigint.prototype.valueof) | Proposition de niveau 3 |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.BigInt.valueOf")}}
+
+## Voir aussi
+
+- {{jsxref("BigInt.prototype.toString()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/bigint64array/index.html b/files/fr/web/javascript/reference/global_objects/bigint64array/index.html
deleted file mode 100644
index 3631f56e60..0000000000
--- a/files/fr/web/javascript/reference/global_objects/bigint64array/index.html
+++ /dev/null
@@ -1,183 +0,0 @@
----
-title: BigInt64Array
-slug: Web/JavaScript/Reference/Global_Objects/BigInt64Array
-tags:
-  - BigInt
-  - Constructeur
-  - JavaScript
-  - Reference
-  - TypedArray
-  - TypedArrays
-translation_of: Web/JavaScript/Reference/Global_Objects/BigInt64Array
-original_slug: Web/JavaScript/Reference/Objets_globaux/BigInt64Array
----
-<div>{{JSRef}}</div>
-
-<p>Le tableau typé <strong><code>BigInt64Array</code></strong> permet de représenter un tableau d'entiers signés représentés sur 64 bits, où l'ordre des octets correspond à celui de la plateforme utilisée. Si on souhaite contrôler l'ordre des octets utilisé (le « boutisme »), on utilisera un objet {{jsxref("DataView")}} à la place. Les éléments du tableau sont initialisés à <code>0n</code>. 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).</p>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">new BigInt64Array();
-new BigInt64Array(longueur);
-new BigInt64Array(tableauTypé);
-new BigInt64Array(objet);
-new BigInt64Array(tampon [, décalage [, longueur]]);</pre>
-
-<p>Pour plus d'informations sur la syntaxe du constructeur et le rôle des différents paramètres, voir la page <em><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/TypedArray#Syntaxe">TypedArray</a></em>.</p>
-
-<h2 id="Propriétés">Propriétés</h2>
-
-<dl>
- <dt>{{jsxref("TypedArray.BYTES_PER_ELEMENT", "BigInt64Array.BYTES_PER_ELEMENT")}}</dt>
- <dd>Cette propriété renvoie un nombre correspondant à la quantité d'octets pour un élément du tableau. Dans le cas d'<code>BigInt64Array</code>, ce sera <code>8</code>.</dd>
- <dt><code>BigInt64Array.length</code></dt>
- <dd>La propriété de longueur statique qui vaut 3. Pour connaître le nombre d'élément, voir {{jsxref("TypedArray.prototype.length", "BigInt64Array.prototype.length")}}.</dd>
- <dt>{{jsxref("TypedArray.name", "BigInt64Array.name")}}</dt>
- <dd>Cette propriété renvoie la chaîne de caractères correspondant au nom du constructeur. Pour <code>BigInt64Array</code> ce sera : "BigInt64Array".</dd>
- <dt>{{jsxref("TypedArray.prototype", "BigInt64Array.prototype")}}</dt>
- <dd>Le prototype des objets <em>TypedArray</em>.</dd>
-</dl>
-
-<h2 id="Méthodes">Méthodes</h2>
-
-<dl>
- <dt>{{jsxref("TypedArray.from", "BigInt64Array.from()")}}</dt>
- <dd>Cette méthode permet de créer un nouveau tableau typé <code>BigInt64Array</code> à partir d'un itérable ou d'un objet semblable à un tableau. Voir aussi {{jsxref("Array.from()")}}.</dd>
- <dt>{{jsxref("TypedArray.of", "BigInt64Array.of()")}}</dt>
- <dd>Cette méthode permet de créer un nouvel objet <code>BigInt64Array</code> à partir d'un nombre d'arguments variables. Voir aussi {{jsxref("Array.of()")}}.</dd>
-</dl>
-
-<h2 id="Prototype_BigInt64Array">Prototype <code>BigInt64Array</code></h2>
-
-<p>Tous les objets <code>BigInt64Array</code> héritent de {{jsxref("TypedArray.prototype", "%TypedArray%.prototype")}}.</p>
-
-<h3 id="Propriétés_2">Propriétés</h3>
-
-<dl>
- <dt><code>BigInt64Array.prototype.constructor</code></dt>
- <dd>Cette propriété renvoie la fonction qui a créé l'instance du prototype. Par défaut, ce sera le constructeur <code>BigInt64Array</code>.</dd>
- <dt>{{jsxref("TypedArray.prototype.buffer", "BigInt64Array.prototype.buffer")}} {{readonlyInline}}</dt>
- <dd>Cette propriété renvoie l'objet {{jsxref("ArrayBuffer")}} référencé par l'objet <code>BigInt64Array</code> Elle est déterminée lors de la construction et est accessible uniquement en <strong>lecture seule</strong>.</dd>
- <dt>{{jsxref("TypedArray.prototype.byteLength", "BigInt64Array.prototype.byteLength")}} {{readonlyInline}}</dt>
- <dd>Cette propriété renvoie la longueur, exprimée en octets, de l'objet <code>BigInt64Array</code> à partir du début de l'objet {{jsxref("ArrayBuffer")}} correspondant. Elle est déterminée lors de la construction et est accessible uniquement en <strong>lecture seule</strong>.</dd>
- <dt>{{jsxref("TypedArray.prototype.byteOffset", "BigInt64Array.prototype.byteOffset")}} {{readonlyInline}}</dt>
- <dd>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 <strong>lecture seule</strong>.</dd>
- <dt>{{jsxref("TypedArray.prototype.length", "BigInt64Array.prototype.length")}} {{readonlyInline}}</dt>
- <dd>Cette propriété renvoie le nombre d'éléments contenus dans le tableau <code>BigInt64Array</code>. Elle est déterminée lors de la construction et est accessible uniquement en <strong>lecture seule</strong>.</dd>
-</dl>
-
-<h3 id="Méthodes_2">Méthodes</h3>
-
-<dl>
- <dt>{{jsxref("TypedArray.copyWithin", "BigInt64Array.prototype.copyWithin()")}}</dt>
- <dd>Copie une suite d'éléments d'un tableau dans le tableau. Voir également {{jsxref("Array.prototype.copyWithin()")}}.</dd>
- <dt>{{jsxref("TypedArray.entries", "BigInt64Array.prototype.entries()")}}</dt>
- <dd>Renvoie un nouvel objet <code>Array Iterator</code> qui contient les paires clé/valeur pour chaque indice du tableau. Voir également {{jsxref("Array.prototype.entries()")}}.</dd>
- <dt>{{jsxref("TypedArray.every", "BigInt64Array.prototype.every()")}}</dt>
- <dd>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()")}}.</dd>
- <dt>{{jsxref("TypedArray.fill", "BigInt64Array.prototype.fill()")}}</dt>
- <dd>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()")}}.</dd>
- <dt>{{jsxref("TypedArray.filter", "BigInt64Array.prototype.filter()")}}</dt>
- <dd>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()")}}.</dd>
- <dt>{{jsxref("TypedArray.find", "BigInt64Array.prototype.find()")}}</dt>
- <dd>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 <code>undefined</code> sera renvoyé. Voir également {{jsxref("Array.prototype.find()")}}.</dd>
- <dt>{{jsxref("TypedArray.findIndex", "BigInt64Array.prototype.findIndex()")}}</dt>
- <dd>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()")}}.</dd>
- <dt>{{jsxref("TypedArray.forEach", "BigInt64Array.prototype.forEach()")}}</dt>
- <dd>Appelle une fonction pour chacun des élément du tableau. Voir également {{jsxref("Array.prototype.forEach()")}}.</dd>
- <dt>{{jsxref("TypedArray.includes", "BigInt64Array.prototype.includes()")}}</dt>
- <dd>Détermine si le tableau typé contient un élément donné. Cette méthode renvoie <code>true</code> ou <code>false</code> selon le cas de figure. Voir également {{jsxref("Array.prototype.includes()")}}.</dd>
- <dt>{{jsxref("TypedArray.indexOf", "BigInt64Array.prototype.indexOf()")}}</dt>
- <dd>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()")}}.</dd>
- <dt>{{jsxref("TypedArray.join", "BigInt64Array.prototype.join()")}}</dt>
- <dd>Fusionne l'ensemble des éléments du tableau en une chaîne de caractères. Voir également {{jsxref("Array.prototype.join()")}}.</dd>
- <dt>{{jsxref("TypedArray.keys", "BigInt64Array.prototype.keys()")}}</dt>
- <dd>Renvoie un nouvel objet <code>Array Iterator</code> qui contient les clés de chaque indice du tableau. Voir également {{jsxref("Array.prototype.keys()")}}.</dd>
- <dt>{{jsxref("TypedArray.lastIndexOf", "BigInt64Array.prototype.lastIndexOf()")}}</dt>
- <dd>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()")}}.</dd>
- <dt>{{jsxref("TypedArray.map", "BigInt64Array.prototype.map()")}}</dt>
- <dd>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()")}}.</dd>
- <dt>{{jsxref("TypedArray.reduce", "BigInt64Array.prototype.reduce()")}}</dt>
- <dd>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()")}}.</dd>
- <dt>{{jsxref("TypedArray.reduceRight", "BigInt64Array.prototype.reduceRight()")}}</dt>
- <dd>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()")}}.</dd>
- <dt>{{jsxref("TypedArray.reverse", "BigInt64Array.prototype.reverse()")}}</dt>
- <dd>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()")}}.</dd>
- <dt>{{jsxref("TypedArray.set", "BigInt64Array.prototype.set()")}}</dt>
- <dd>Enregistre plusieurs valeurs dans le tableau typé à partir de valeurs d'un autre tableau.</dd>
- <dt>{{jsxref("TypedArray.slice", "BigInt64Array.prototype.slice()")}}</dt>
- <dd>Extrait un fragment d'un tableau et renvoie ce fragment. Voir également {{jsxref("Array.prototype.slice()")}}.</dd>
- <dt>{{jsxref("TypedArray.some", "BigInt64Array.prototype.some()")}}</dt>
- <dd>Renvoie <code>true</code> si au moins un des éléments remplit une condition donnée par une fonction de test. Voir également {{jsxref("Array.prototype.some()")}}.</dd>
- <dt>{{jsxref("TypedArray.sort", "BigInt64Array.prototype.sort()")}}</dt>
- <dd>Trie les éléments du tableau et renvoie ce tableau. Voir également {{jsxref("Array.prototype.sort()")}}.</dd>
- <dt>{{jsxref("TypedArray.subarray", "BigInt64Array.prototype.subarray()")}}</dt>
- <dd>Renvoie un nouvel objet <code>BigInt64Array</code> qui est le fragment du tableau courant, entre les indices de début et de fin donnés.</dd>
- <dt>{{jsxref("TypedArray.values", "BigInt64Array.prototype.values()")}}</dt>
- <dd>Renvoie un nouvel objet <code>Array Iterator</code> qui contient les valeurs correspondantes à chaque indice du tableau. Voir également {{jsxref("Array.prototype.values()")}}.</dd>
- <dt>{{jsxref("TypedArray.toLocaleString", "BigInt64Array.prototype.toLocaleString()")}}</dt>
- <dd>Renvoie une chaîne de caractères localisée qui représente le tableau et ses éléments. Voir également {{jsxref("Array.prototype.toLocaleString()")}}.</dd>
- <dt>{{jsxref("TypedArray.toString", "BigInt64Array.prototype.toString()")}}</dt>
- <dd>Renvoie une chaîne de caractère qui représente le tableau et ses éléments. Voir également {{jsxref("Array.prototype.toString()")}}.</dd>
- <dt>{{jsxref("TypedArray.@@iterator", "BigInt64Array.prototype[@@iterator]()")}}</dt>
- <dd>Renvoie un nouvel objet <code>Array Iterator</code> qui contient les valeurs correspondantes à chaque indice du tableau.</dd>
-</dl>
-
-<h2 id="Exemples">Exemples</h2>
-
-<p>Différentes façons de créer un objet <code>BigInt64Array</code> :</p>
-
-<pre class="brush: js">// Construction à partir d'une longueur
-var bigInt64 = new BigInt64Array(2);
-bigInt64[0] = 42n;
-console.log(bigInt64[0]); // 42n
-console.log(bigInt64.length); // 2
-console.log(bigInt64.BYTES_PER_ELEMENT); // 8
-
-// Construction à partir d'un tableau
-var arr = new BigInt64Array([21n,31n]);
-console.log(arr[1]); // 31n
-
-// Construction à partir d'un tableau typé
-var x = new BigInt64Array([21n, 31n]);
-var y = new BigInt64Array(x);
-console.log(y[0]); // 21n
-
-// Construction à partir d'un ArrayBuffer
-var buffer = new ArrayBuffer(32);
-var z = new BigInt64Array(buffer, 0, 4);
-
-// Construction à partir d'un itérable
-var iterable = function*(){ yield* [1n, 2n, 3n]; }();
-var BigInt64 = new BigInt64Array(iterable);
-// BigInt64Array[1n, 2n, 3n]
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td><a href="https://tc39.github.io/proposal-bigint/#sec-typedarrays-and-dataview">Proposition pour <code>BigInt</code></a></td>
-   <td>Proposition de niveau 3</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.BigInt64Array")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/JavaScript/Tableaux_typés">Les tableaux typés en JavaScript</a></li>
- <li>{{jsxref("BigUint64Array")}}</li>
- <li>{{jsxref("DataView")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/bigint64array/index.md b/files/fr/web/javascript/reference/global_objects/bigint64array/index.md
new file mode 100644
index 0000000000..8c4ec7637a
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/bigint64array/index.md
@@ -0,0 +1,163 @@
+---
+title: BigInt64Array
+slug: Web/JavaScript/Reference/Global_Objects/BigInt64Array
+tags:
+  - BigInt
+  - Constructeur
+  - JavaScript
+  - Reference
+  - TypedArray
+  - TypedArrays
+translation_of: Web/JavaScript/Reference/Global_Objects/BigInt64Array
+original_slug: Web/JavaScript/Reference/Objets_globaux/BigInt64Array
+---
+{{JSRef}}
+
+Le tableau typé **`BigInt64Array`** permet de représenter un tableau d'entiers signés représentés sur 64 bits, où l'ordre des octets correspond à celui de la plateforme utilisée. Si on souhaite contrôler l'ordre des octets utilisé (le « boutisme »), on utilisera un objet {{jsxref("DataView")}} à la place. Les éléments du tableau sont initialisés à `0n`. 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
+
+    new BigInt64Array();
+    new BigInt64Array(longueur);
+    new BigInt64Array(tableauTypé);
+    new BigInt64Array(objet);
+    new BigInt64Array(tampon [, décalage [, longueur]]);
+
+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
+
+- {{jsxref("TypedArray.BYTES_PER_ELEMENT", "BigInt64Array.BYTES_PER_ELEMENT")}}
+  - : Cette propriété renvoie un nombre correspondant à la quantité d'octets pour un élément du tableau. Dans le cas d'`BigInt64Array`, ce sera `8`.
+- `BigInt64Array.length`
+  - : La propriété de longueur statique qui vaut 3. Pour connaître le nombre d'élément, voir {{jsxref("TypedArray.prototype.length", "BigInt64Array.prototype.length")}}.
+- {{jsxref("TypedArray.name", "BigInt64Array.name")}}
+  - : Cette propriété renvoie la chaîne de caractères correspondant au nom du constructeur. Pour `BigInt64Array` ce sera : "BigInt64Array".
+- {{jsxref("TypedArray.prototype", "BigInt64Array.prototype")}}
+  - : Le prototype des objets _TypedArray_.
+
+## Méthodes
+
+- {{jsxref("TypedArray.from", "BigInt64Array.from()")}}
+  - : Cette méthode permet de créer un nouveau tableau typé `BigInt64Array` à partir d'un itérable ou d'un objet semblable à un tableau. Voir aussi {{jsxref("Array.from()")}}.
+- {{jsxref("TypedArray.of", "BigInt64Array.of()")}}
+  - : Cette méthode permet de créer un nouvel objet `BigInt64Array` à partir d'un nombre d'arguments variables. Voir aussi {{jsxref("Array.of()")}}.
+
+## Prototype `BigInt64Array`
+
+Tous les objets `BigInt64Array` héritent de {{jsxref("TypedArray.prototype", "%TypedArray%.prototype")}}.
+
+### Propriétés
+
+- `BigInt64Array.prototype.constructor`
+  - : Cette propriété renvoie la fonction qui a créé l'instance du prototype. Par défaut, ce sera le constructeur `BigInt64Array`.
+- {{jsxref("TypedArray.prototype.buffer", "BigInt64Array.prototype.buffer")}} {{readonlyInline}}
+  - : Cette propriété renvoie l'objet {{jsxref("ArrayBuffer")}} référencé par l'objet `BigInt64Array` Elle est déterminée lors de la construction et est accessible uniquement en **lecture seule**.
+- {{jsxref("TypedArray.prototype.byteLength", "BigInt64Array.prototype.byteLength")}} {{readonlyInline}}
+  - : Cette propriété renvoie la longueur, exprimée en octets, de l'objet `BigInt64Array` à 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", "BigInt64Array.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", "BigInt64Array.prototype.length")}} {{readonlyInline}}
+  - : Cette propriété renvoie le nombre d'éléments contenus dans le tableau `BigInt64Array`. Elle est déterminée lors de la construction et est accessible uniquement en **lecture seule**.
+
+### Méthodes
+
+- {{jsxref("TypedArray.copyWithin", "BigInt64Array.prototype.copyWithin()")}}
+  - : Copie une suite d'éléments d'un tableau dans le tableau. Voir également {{jsxref("Array.prototype.copyWithin()")}}.
+- {{jsxref("TypedArray.entries", "BigInt64Array.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", "BigInt64Array.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", "BigInt64Array.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", "BigInt64Array.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", "BigInt64Array.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", "BigInt64Array.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", "BigInt64Array.prototype.forEach()")}}
+  - : Appelle une fonction pour chacun des élément du tableau. Voir également {{jsxref("Array.prototype.forEach()")}}.
+- {{jsxref("TypedArray.includes", "BigInt64Array.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", "BigInt64Array.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", "BigInt64Array.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", "BigInt64Array.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", "BigInt64Array.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", "BigInt64Array.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.reduce", "BigInt64Array.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", "BigInt64Array.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", "BigInt64Array.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", "BigInt64Array.prototype.set()")}}
+  - : Enregistre plusieurs valeurs dans le tableau typé à partir de valeurs d'un autre tableau.
+- {{jsxref("TypedArray.slice", "BigInt64Array.prototype.slice()")}}
+  - : Extrait un fragment d'un tableau et renvoie ce fragment. Voir également {{jsxref("Array.prototype.slice()")}}.
+- {{jsxref("TypedArray.some", "BigInt64Array.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", "BigInt64Array.prototype.sort()")}}
+  - : Trie les éléments du tableau et renvoie ce tableau. Voir également {{jsxref("Array.prototype.sort()")}}.
+- {{jsxref("TypedArray.subarray", "BigInt64Array.prototype.subarray()")}}
+  - : Renvoie un nouvel objet `BigInt64Array` qui est le fragment du tableau courant, entre les indices de début et de fin donnés.
+- {{jsxref("TypedArray.values", "BigInt64Array.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", "BigInt64Array.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", "BigInt64Array.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", "BigInt64Array.prototype[@@iterator]()")}}
+  - : Renvoie un nouvel objet `Array Iterator` qui contient les valeurs correspondantes à chaque indice du tableau.
+
+## Exemples
+
+Différentes façons de créer un objet `BigInt64Array` :
+
+```js
+// Construction à partir d'une longueur
+var bigInt64 = new BigInt64Array(2);
+bigInt64[0] = 42n;
+console.log(bigInt64[0]); // 42n
+console.log(bigInt64.length); // 2
+console.log(bigInt64.BYTES_PER_ELEMENT); // 8
+
+// Construction à partir d'un tableau
+var arr = new BigInt64Array([21n,31n]);
+console.log(arr[1]); // 31n
+
+// Construction à partir d'un tableau typé
+var x = new BigInt64Array([21n, 31n]);
+var y = new BigInt64Array(x);
+console.log(y[0]); // 21n
+
+// Construction à partir d'un ArrayBuffer
+var buffer = new ArrayBuffer(32);
+var z = new BigInt64Array(buffer, 0, 4);
+
+// Construction à partir d'un itérable
+var iterable = function*(){ yield* [1n, 2n, 3n]; }();
+var BigInt64 = new BigInt64Array(iterable);
+// BigInt64Array[1n, 2n, 3n]
+```
+
+## Spécifications
+
+| Spécification                                                                                     | État                    | Commentaires |
+| ------------------------------------------------------------------------------------------------- | ----------------------- | ------------ |
+| [Proposition pour `BigInt`](https://tc39.github.io/proposal-bigint/#sec-typedarrays-and-dataview) | Proposition de niveau 3 |              |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.BigInt64Array")}}
+
+## Voir aussi
+
+- [Les tableaux typés en JavaScript](/fr/docs/Web/JavaScript/Tableaux_typés)
+- {{jsxref("BigUint64Array")}}
+- {{jsxref("DataView")}}
diff --git a/files/fr/web/javascript/reference/global_objects/biguint64array/index.html b/files/fr/web/javascript/reference/global_objects/biguint64array/index.html
deleted file mode 100644
index 3eca7d67bd..0000000000
--- a/files/fr/web/javascript/reference/global_objects/biguint64array/index.html
+++ /dev/null
@@ -1,183 +0,0 @@
----
-title: BigUint64Array
-slug: Web/JavaScript/Reference/Global_Objects/BigUint64Array
-tags:
-  - BigInt
-  - Constructeur
-  - JavaScript
-  - Reference
-  - TypedArray
-  - TypedArrays
-translation_of: Web/JavaScript/Reference/Global_Objects/BigUint64Array
-original_slug: Web/JavaScript/Reference/Objets_globaux/BigUint64Array
----
-<div>{{JSRef}}</div>
-
-<p>Le tableau typé <strong><code>BigUint64Array</code></strong> permet de représenter un tableau d'entiers non signés représentés sur 64 bits, où l'ordre des octets correspond à celui de la plateforme utilisée. Si on souhaite contrôler l'ordre des octets utilisé (le « boutisme »), on utilisera un objet {{jsxref("DataView")}} à la place. Les éléments du tableau sont initialisés à <code>0n</code>. 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).</p>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">new BigUint64Array();
-new BigUint64Array(longueur);
-new BigUint64Array(tableauTypé);
-new BigUint64Array(objet);
-new BigUint64Array(tampon [, décalage [, longueur]]);</pre>
-
-<p>Pour plus d'informations sur la syntaxe du constructeur et le rôle des différents paramètres, voir la page <em><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/TypedArray#Syntaxe">TypedArray</a></em>.</p>
-
-<h2 id="Propriétés">Propriétés</h2>
-
-<dl>
- <dt>{{jsxref("TypedArray.BYTES_PER_ELEMENT", "BigUint64Array.BYTES_PER_ELEMENT")}}</dt>
- <dd>Cette propriété renvoie un nombre correspondant à la quantité d'octets pour un élément du tableau. Dans le cas d'<code>BigUint64Array</code>, ce sera <code>8</code>.</dd>
- <dt><code>BigUint64Array.length</code></dt>
- <dd>La propriété de longueur statique qui vaut 3. Pour connaître le nombre d'élément, voir {{jsxref("TypedArray.prototype.length", "BigUint64Array.prototype.length")}}.</dd>
- <dt>{{jsxref("TypedArray.name", "BigUint64Array.name")}}</dt>
- <dd>Cette propriété renvoie la chaîne de caractères correspondant au nom du constructeur. Pour <code>BigUint64Array</code> ce sera : "BigUint64Array".</dd>
- <dt>{{jsxref("TypedArray.prototype", "BigUint64Array.prototype")}}</dt>
- <dd>Le prototype des objets <em>TypedArray</em>.</dd>
-</dl>
-
-<h2 id="Méthodes">Méthodes</h2>
-
-<dl>
- <dt>{{jsxref("TypedArray.from", "BigUint64Array.from()")}}</dt>
- <dd>Cette méthode permet de créer un nouveau tableau typé <code>BigUint64Array</code> à partir d'un itérable ou d'un objet semblable à un tableau. Voir aussi {{jsxref("Array.from()")}}.</dd>
- <dt>{{jsxref("TypedArray.of", "BigUint64Array.of()")}}</dt>
- <dd>Cette méthode permet de créer un nouvel objet <code>BigUint64Array</code> à partir d'un nombre d'arguments variables. Voir aussi {{jsxref("Array.of()")}}.</dd>
-</dl>
-
-<h2 id="Prototype_BigUint64Array">Prototype <code>BigUint64Array</code></h2>
-
-<p>Tous les objets <code>BigUint64Array</code> héritent de {{jsxref("TypedArray.prototype", "%TypedArray%.prototype")}}.</p>
-
-<h3 id="Propriétés_2">Propriétés</h3>
-
-<dl>
- <dt><code>BigUint64Array.prototype.constructor</code></dt>
- <dd>Cette propriété renvoie la fonction qui a créé l'instance du prototype. Par défaut, ce sera le constructeur <code>BigUint64Array</code>.</dd>
- <dt>{{jsxref("TypedArray.prototype.buffer", "BigUint64Array.prototype.buffer")}} {{readonlyInline}}</dt>
- <dd>Cette propriété renvoie l'objet {{jsxref("ArrayBuffer")}} référencé par l'objet <code>BigUint64Array</code> Elle est déterminée lors de la construction et est accessible uniquement en <strong>lecture seule</strong>.</dd>
- <dt>{{jsxref("TypedArray.prototype.byteLength", "BigUint64Array.prototype.byteLength")}} {{readonlyInline}}</dt>
- <dd>Cette propriété renvoie la longueur, exprimée en octets, de l'objet <code>BigUint64Array</code> à partir du début de l'objet {{jsxref("ArrayBuffer")}} correspondant. Elle est déterminée lors de la construction et est accessible uniquement en <strong>lecture seule</strong>.</dd>
- <dt>{{jsxref("TypedArray.prototype.byteOffset", "BigUint64Array.prototype.byteOffset")}} {{readonlyInline}}</dt>
- <dd>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 <strong>lecture seule</strong>.</dd>
- <dt>{{jsxref("TypedArray.prototype.length", "BigUint64Array.prototype.length")}} {{readonlyInline}}</dt>
- <dd>Cette propriété renvoie le nombre d'éléments contenus dans le tableau <code>BigUint64Array</code>. Elle est déterminée lors de la construction et est accessible uniquement en <strong>lecture seule</strong>.</dd>
-</dl>
-
-<h3 id="Méthodes_2">Méthodes</h3>
-
-<dl>
- <dt>{{jsxref("TypedArray.copyWithin", "BigUint64Array.prototype.copyWithin()")}}</dt>
- <dd>Copie une suite d'éléments d'un tableau dans le tableau. Voir également {{jsxref("Array.prototype.copyWithin()")}}.</dd>
- <dt>{{jsxref("TypedArray.entries", "BigUint64Array.prototype.entries()")}}</dt>
- <dd>Renvoie un nouvel objet <code>Array Iterator</code> qui contient les paires clé/valeur pour chaque indice du tableau. Voir également {{jsxref("Array.prototype.entries()")}}.</dd>
- <dt>{{jsxref("TypedArray.every", "BigUint64Array.prototype.every()")}}</dt>
- <dd>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()")}}.</dd>
- <dt>{{jsxref("TypedArray.fill", "BigUint64Array.prototype.fill()")}}</dt>
- <dd>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()")}}.</dd>
- <dt>{{jsxref("TypedArray.filter", "BigUint64Array.prototype.filter()")}}</dt>
- <dd>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()")}}.</dd>
- <dt>{{jsxref("TypedArray.find", "BigUint64Array.prototype.find()")}}</dt>
- <dd>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 <code>undefined</code> sera renvoyé. Voir également {{jsxref("Array.prototype.find()")}}.</dd>
- <dt>{{jsxref("TypedArray.findIndex", "BigUint64Array.prototype.findIndex()")}}</dt>
- <dd>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()")}}.</dd>
- <dt>{{jsxref("TypedArray.forEach", "BigUint64Array.prototype.forEach()")}}</dt>
- <dd>Appelle une fonction pour chacun des élément du tableau. Voir également {{jsxref("Array.prototype.forEach()")}}.</dd>
- <dt>{{jsxref("TypedArray.includes", "BigUint64Array.prototype.includes()")}}</dt>
- <dd>Détermine si le tableau typé contient un élément donné. Cette méthode renvoie <code>true</code> ou <code>false</code> selon le cas de figure. Voir également {{jsxref("Array.prototype.includes()")}}.</dd>
- <dt>{{jsxref("TypedArray.indexOf", "BigUint64Array.prototype.indexOf()")}}</dt>
- <dd>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()")}}.</dd>
- <dt>{{jsxref("TypedArray.join", "BigUint64Array.prototype.join()")}}</dt>
- <dd>Fusionne l'ensemble des éléments du tableau en une chaîne de caractères. Voir également {{jsxref("Array.prototype.join()")}}.</dd>
- <dt>{{jsxref("TypedArray.keys", "BigUint64Array.prototype.keys()")}}</dt>
- <dd>Renvoie un nouvel objet <code>Array Iterator</code> qui contient les clés de chaque indice du tableau. Voir également {{jsxref("Array.prototype.keys()")}}.</dd>
- <dt>{{jsxref("TypedArray.lastIndexOf", "BigUint64Array.prototype.lastIndexOf()")}}</dt>
- <dd>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()")}}.</dd>
- <dt>{{jsxref("TypedArray.map", "BigUint64Array.prototype.map()")}}</dt>
- <dd>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()")}}.</dd>
- <dt>{{jsxref("TypedArray.reduce", "BigUint64Array.prototype.reduce()")}}</dt>
- <dd>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()")}}.</dd>
- <dt>{{jsxref("TypedArray.reduceRight", "BigUint64Array.prototype.reduceRight()")}}</dt>
- <dd>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()")}}.</dd>
- <dt>{{jsxref("TypedArray.reverse", "BigUint64Array.prototype.reverse()")}}</dt>
- <dd>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()")}}.</dd>
- <dt>{{jsxref("TypedArray.set", "BigUint64Array.prototype.set()")}}</dt>
- <dd>Enregistre plusieurs valeurs dans le tableau typé à partir de valeurs d'un autre tableau.</dd>
- <dt>{{jsxref("TypedArray.slice", "BigUint64Array.prototype.slice()")}}</dt>
- <dd>Extrait un fragment d'un tableau et renvoie ce fragment. Voir également {{jsxref("Array.prototype.slice()")}}.</dd>
- <dt>{{jsxref("TypedArray.some", "BigUint64Array.prototype.some()")}}</dt>
- <dd>Renvoie <code>true</code> si au moins un des éléments remplit une condition donnée par une fonction de test. Voir également {{jsxref("Array.prototype.some()")}}.</dd>
- <dt>{{jsxref("TypedArray.sort", "BigUint64Array.prototype.sort()")}}</dt>
- <dd>Trie les éléments du tableau et renvoie ce tableau. Voir également {{jsxref("Array.prototype.sort()")}}.</dd>
- <dt>{{jsxref("TypedArray.subarray", "BigUint64Array.prototype.subarray()")}}</dt>
- <dd>Renvoie un nouvel objet <code>BigUint64Array</code> qui est le fragment du tableau courant, entre les indices de début et de fin donnés.</dd>
- <dt>{{jsxref("TypedArray.values", "BigUint64Array.prototype.values()")}}</dt>
- <dd>Renvoie un nouvel objet <code>Array Iterator</code> qui contient les valeurs correspondantes à chaque indice du tableau. Voir également {{jsxref("Array.prototype.values()")}}.</dd>
- <dt>{{jsxref("TypedArray.toLocaleString", "BigUint64Array.prototype.toLocaleString()")}}</dt>
- <dd>Renvoie une chaîne de caractères localisée qui représente le tableau et ses éléments. Voir également {{jsxref("Array.prototype.toLocaleString()")}}.</dd>
- <dt>{{jsxref("TypedArray.toString", "BigUint64Array.prototype.toString()")}}</dt>
- <dd>Renvoie une chaîne de caractère qui représente le tableau et ses éléments. Voir également {{jsxref("Array.prototype.toString()")}}.</dd>
- <dt>{{jsxref("TypedArray.@@iterator", "BigUint64Array.prototype[@@iterator]()")}}</dt>
- <dd>Renvoie un nouvel objet <code>Array Iterator</code> qui contient les valeurs correspondantes à chaque indice du tableau.</dd>
-</dl>
-
-<h2 id="Exemples">Exemples</h2>
-
-<p>Différentes façons de créer un objet <code>BigUint64Array</code> :</p>
-
-<pre class="brush: js">// Construction à partir d'une longueur
-var bigInt64 = new BigUint64Array(2);
-bigInt64[0] = 42n;
-console.log(bigInt64[0]); // 42n
-console.log(bigInt64.length); // 2
-console.log(bigInt64.BYTES_PER_ELEMENT); // 8
-
-// Construction à partir d'un tableau
-var arr = new BigUint64Array([21n,31n]);
-console.log(arr[1]); // 31n
-
-// Construction à partir d'un tableau typé
-var x = new BigUint64Array([21n, 31n]);
-var y = new BigUint64Array(x);
-console.log(y[0]); // 21n
-
-// Construction à partir d'un ArrayBuffer
-var buffer = new ArrayBuffer(32);
-var z = new BigUint64Array(buffer, 0, 4);
-
-// Construction à partir d'un itérable
-var iterable = function*(){ yield* [1n, 2n, 3n]; }();
-var BigInt64 = new BigUint64Array(iterable);
-// BigUint64Array[1n, 2n, 3n]
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td><a href="https://tc39.github.io/proposal-bigint/#sec-typedarrays-and-dataview">Proposition pour <code>BigInt</code></a></td>
-   <td>Proposition de niveau 3</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.BigUint64Array")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/JavaScript/Tableaux_typés">Les tableaux typés en JavaScript</a></li>
- <li>{{jsxref("BigUint64Array")}}</li>
- <li>{{jsxref("DataView")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/biguint64array/index.md b/files/fr/web/javascript/reference/global_objects/biguint64array/index.md
new file mode 100644
index 0000000000..12be32dff7
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/biguint64array/index.md
@@ -0,0 +1,163 @@
+---
+title: BigUint64Array
+slug: Web/JavaScript/Reference/Global_Objects/BigUint64Array
+tags:
+  - BigInt
+  - Constructeur
+  - JavaScript
+  - Reference
+  - TypedArray
+  - TypedArrays
+translation_of: Web/JavaScript/Reference/Global_Objects/BigUint64Array
+original_slug: Web/JavaScript/Reference/Objets_globaux/BigUint64Array
+---
+{{JSRef}}
+
+Le tableau typé **`BigUint64Array`** permet de représenter un tableau d'entiers non signés représentés sur 64 bits, où l'ordre des octets correspond à celui de la plateforme utilisée. Si on souhaite contrôler l'ordre des octets utilisé (le « boutisme »), on utilisera un objet {{jsxref("DataView")}} à la place. Les éléments du tableau sont initialisés à `0n`. 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
+
+    new BigUint64Array();
+    new BigUint64Array(longueur);
+    new BigUint64Array(tableauTypé);
+    new BigUint64Array(objet);
+    new BigUint64Array(tampon [, décalage [, longueur]]);
+
+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
+
+- {{jsxref("TypedArray.BYTES_PER_ELEMENT", "BigUint64Array.BYTES_PER_ELEMENT")}}
+  - : Cette propriété renvoie un nombre correspondant à la quantité d'octets pour un élément du tableau. Dans le cas d'`BigUint64Array`, ce sera `8`.
+- `BigUint64Array.length`
+  - : La propriété de longueur statique qui vaut 3. Pour connaître le nombre d'élément, voir {{jsxref("TypedArray.prototype.length", "BigUint64Array.prototype.length")}}.
+- {{jsxref("TypedArray.name", "BigUint64Array.name")}}
+  - : Cette propriété renvoie la chaîne de caractères correspondant au nom du constructeur. Pour `BigUint64Array` ce sera : "BigUint64Array".
+- {{jsxref("TypedArray.prototype", "BigUint64Array.prototype")}}
+  - : Le prototype des objets _TypedArray_.
+
+## Méthodes
+
+- {{jsxref("TypedArray.from", "BigUint64Array.from()")}}
+  - : Cette méthode permet de créer un nouveau tableau typé `BigUint64Array` à partir d'un itérable ou d'un objet semblable à un tableau. Voir aussi {{jsxref("Array.from()")}}.
+- {{jsxref("TypedArray.of", "BigUint64Array.of()")}}
+  - : Cette méthode permet de créer un nouvel objet `BigUint64Array` à partir d'un nombre d'arguments variables. Voir aussi {{jsxref("Array.of()")}}.
+
+## Prototype `BigUint64Array`
+
+Tous les objets `BigUint64Array` héritent de {{jsxref("TypedArray.prototype", "%TypedArray%.prototype")}}.
+
+### Propriétés
+
+- `BigUint64Array.prototype.constructor`
+  - : Cette propriété renvoie la fonction qui a créé l'instance du prototype. Par défaut, ce sera le constructeur `BigUint64Array`.
+- {{jsxref("TypedArray.prototype.buffer", "BigUint64Array.prototype.buffer")}} {{readonlyInline}}
+  - : Cette propriété renvoie l'objet {{jsxref("ArrayBuffer")}} référencé par l'objet `BigUint64Array` Elle est déterminée lors de la construction et est accessible uniquement en **lecture seule**.
+- {{jsxref("TypedArray.prototype.byteLength", "BigUint64Array.prototype.byteLength")}} {{readonlyInline}}
+  - : Cette propriété renvoie la longueur, exprimée en octets, de l'objet `BigUint64Array` à 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", "BigUint64Array.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", "BigUint64Array.prototype.length")}} {{readonlyInline}}
+  - : Cette propriété renvoie le nombre d'éléments contenus dans le tableau `BigUint64Array`. Elle est déterminée lors de la construction et est accessible uniquement en **lecture seule**.
+
+### Méthodes
+
+- {{jsxref("TypedArray.copyWithin", "BigUint64Array.prototype.copyWithin()")}}
+  - : Copie une suite d'éléments d'un tableau dans le tableau. Voir également {{jsxref("Array.prototype.copyWithin()")}}.
+- {{jsxref("TypedArray.entries", "BigUint64Array.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", "BigUint64Array.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", "BigUint64Array.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", "BigUint64Array.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", "BigUint64Array.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", "BigUint64Array.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", "BigUint64Array.prototype.forEach()")}}
+  - : Appelle une fonction pour chacun des élément du tableau. Voir également {{jsxref("Array.prototype.forEach()")}}.
+- {{jsxref("TypedArray.includes", "BigUint64Array.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", "BigUint64Array.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", "BigUint64Array.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", "BigUint64Array.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", "BigUint64Array.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", "BigUint64Array.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.reduce", "BigUint64Array.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", "BigUint64Array.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", "BigUint64Array.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", "BigUint64Array.prototype.set()")}}
+  - : Enregistre plusieurs valeurs dans le tableau typé à partir de valeurs d'un autre tableau.
+- {{jsxref("TypedArray.slice", "BigUint64Array.prototype.slice()")}}
+  - : Extrait un fragment d'un tableau et renvoie ce fragment. Voir également {{jsxref("Array.prototype.slice()")}}.
+- {{jsxref("TypedArray.some", "BigUint64Array.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", "BigUint64Array.prototype.sort()")}}
+  - : Trie les éléments du tableau et renvoie ce tableau. Voir également {{jsxref("Array.prototype.sort()")}}.
+- {{jsxref("TypedArray.subarray", "BigUint64Array.prototype.subarray()")}}
+  - : Renvoie un nouvel objet `BigUint64Array` qui est le fragment du tableau courant, entre les indices de début et de fin donnés.
+- {{jsxref("TypedArray.values", "BigUint64Array.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", "BigUint64Array.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", "BigUint64Array.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", "BigUint64Array.prototype[@@iterator]()")}}
+  - : Renvoie un nouvel objet `Array Iterator` qui contient les valeurs correspondantes à chaque indice du tableau.
+
+## Exemples
+
+Différentes façons de créer un objet `BigUint64Array` :
+
+```js
+// Construction à partir d'une longueur
+var bigInt64 = new BigUint64Array(2);
+bigInt64[0] = 42n;
+console.log(bigInt64[0]); // 42n
+console.log(bigInt64.length); // 2
+console.log(bigInt64.BYTES_PER_ELEMENT); // 8
+
+// Construction à partir d'un tableau
+var arr = new BigUint64Array([21n,31n]);
+console.log(arr[1]); // 31n
+
+// Construction à partir d'un tableau typé
+var x = new BigUint64Array([21n, 31n]);
+var y = new BigUint64Array(x);
+console.log(y[0]); // 21n
+
+// Construction à partir d'un ArrayBuffer
+var buffer = new ArrayBuffer(32);
+var z = new BigUint64Array(buffer, 0, 4);
+
+// Construction à partir d'un itérable
+var iterable = function*(){ yield* [1n, 2n, 3n]; }();
+var BigInt64 = new BigUint64Array(iterable);
+// BigUint64Array[1n, 2n, 3n]
+```
+
+## Spécifications
+
+| Spécification                                                                                     | État                    | Commentaires |
+| ------------------------------------------------------------------------------------------------- | ----------------------- | ------------ |
+| [Proposition pour `BigInt`](https://tc39.github.io/proposal-bigint/#sec-typedarrays-and-dataview) | Proposition de niveau 3 |              |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.BigUint64Array")}}
+
+## Voir aussi
+
+- [Les tableaux typés en JavaScript](/fr/docs/Web/JavaScript/Tableaux_typés)
+- {{jsxref("BigUint64Array")}}
+- {{jsxref("DataView")}}
diff --git a/files/fr/web/javascript/reference/global_objects/boolean/index.html b/files/fr/web/javascript/reference/global_objects/boolean/index.html
deleted file mode 100644
index abfa0c874d..0000000000
--- a/files/fr/web/javascript/reference/global_objects/boolean/index.html
+++ /dev/null
@@ -1,163 +0,0 @@
----
-title: Boolean
-slug: Web/JavaScript/Reference/Global_Objects/Boolean
-tags:
-  - Boolean
-  - Constructeur
-  - JavaScript
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Boolean
-original_slug: Web/JavaScript/Reference/Objets_globaux/Boolean
----
-<div>{{JSRef}}</div>
-
-<p>L'objet <strong><code>Boolean</code></strong> est un objet permettant de représenter une valeur booléenne.</p>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">new Boolean([<var>valeur</var>])</pre>
-
-<h2 id="Paramètres">Paramètres</h2>
-
-<dl>
- <dt><code>valeur</code>{{optional_inline}}</dt>
- <dd>Paramètre optionnel, la valeur initiale de l'objet <code>Boolean</code>.</dd>
-</dl>
-
-<h2 id="Description">Description</h2>
-
-<p>La valeur passée en premier paramètre est, si nécessaire, convertie en valeur booléenne. Si la valeur est omise ou est <code>0</code>, <code>-0</code>, {{jsxref("null")}}, <code>false</code>, {{jsxref("NaN")}}, {{jsxref("undefined")}} ou une chaine de caractères vide (""), l'objet a un valeur initiale à <code>false</code> (faux). Si l'objet DOM {{domxref("document.all")}} est passé en argument, la valeur initiale sera également <code>false</code>. Toutes les autres valeurs, y compris n'importe quel objet, un tableau vide (<code>[]</code>), ou une chaine de caractères <code>"false"</code>, créént un objet avec une valeur initiale à <code>true</code> (vrai).</p>
-
-<p>Ne pas confondre les valeurs primitives booléennes <code>true</code> et <code>false</code> avec les valeurs <em>true</em> et <em>false</em> d'un objet Booléen.</p>
-
-<p>Tout objet dont la valeur n'est ni  <code>undefined</code> ni <code>null</code>, incluant un objet Booléen dont la valeur est fausse, évalue à <code>true</code> lorsqu'il est à une instruction conditionnelle. Par exemple, la condition (voir {{jsxref("Instructions/if...else", "if")}}), dans le code suivant, est validée si l'expression est évaluée à <code>true</code> :</p>
-
-<pre class="brush: js">var x = new Boolean("false");
-if (x) {
-  // . . . le code est exécuté
-}
-
-var y = new Boolean(false);
-if (y) {
-  // ce code est également exécuté
-}
-</pre>
-
-<p>Ce comportement ne s'applique pas aux valeurs primitives booléennes. Par exemple, la condition, dans le code suivant, est évaluée à <code>false</code> :</p>
-
-<pre class="brush: js">var x = false;
-if (x) {
-  // . . . le code n'est pas exécuté
-}
-</pre>
-
-<p>Ne pas utiliser un objet <code>Boolean</code> pour convertir une valeur non-booléenne en une valeur booléenne. Utilisez plutot une fonction booléenne pour effectuer cette tâche :</p>
-
-<pre class="brush: js">var x = Boolean(expression);     // conseillé
-var y = new Boolean(expression); // à ne pas utiliser
-</pre>
-
-<p>Si vous spécifiez un objet quelconque, incluant un objet booléen qui a une valeur fausse, le nouvel objet <code>Boolean</code> a une valeur vraie.</p>
-
-<pre class="brush: js">var myFalse = new Boolean(false);   // valeur initiale à false
-var g = Boolean(myFalse);       // valeur initiale à true
-var myString = new String("Hello"); // un object String
-var s = Boolean(myString);      // valeur initiale à true
-</pre>
-
-<p>Ne pas utiliser un objet Booléen à la place d'une valeur primitive booléenne.</p>
-
-<div class="note">
-<p><strong>Note :</strong> Lorsque la propriété historique, non-standard, <code><a href="/fr/docs/Web/API/Document#Properties">document.all</a></code> est utilisée comme argument, le constructeur <code>Boolean</code> renvoie un objet booléen faux. Cette propriété étant non-standard, son utilisation est déconseillée.</p>
-</div>
-
-<h2 id="Propriétés">Propriétés</h2>
-
-<dl>
- <dt><code>Boolean.length</code></dt>
- <dd>Renvoie 1. Le nombre d'arguments pris en charge par le constructeur.</dd>
- <dt>{{jsxref("Boolean.prototype")}}</dt>
- <dd>Représente le prototype du constructeur <code>Boolean</code>.</dd>
-</dl>
-
-<h2 id="Méthodes">Méthodes</h2>
-
-<p>L'objet global <code>Boolean</code> ne contient pas ses propres méthodes, cependant, il hérite de certaines méthodes à travers la chaine de prototypes.</p>
-
-<h2 id="Instances_de_Boolean">Instances de <code>Boolean</code></h2>
-
-<p>Toutes les <code>Boolean</code> héritent de {{jsxref("Boolean.prototype")}}. Comme avec tous les constructeurs, l'objet prototype dicte les propriétés et les méthodes héritées par les instances.</p>
-
-<h3 id="Propriétés_2">Propriétés</h3>
-
-<p>{{page('fr/docs/JavaScript/Reference/Objets_globaux/Boolean/prototype','Propri.C3.A9t.C3.A9s')}}</p>
-
-<h3 id="Méthodes_2">Méthodes</h3>
-
-<p>{{page('fr/docs/JavaScript/Reference/Objets_globaux/Boolean/prototype','M.C3.A9thodes')}}</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Création_dobjets_Boolean_avec_une_valeur_initiale_à_faux">Création d'objets <code>Boolean</code> avec une valeur initiale à faux</h3>
-
-<pre class="brush: js">var bNoParam = new Boolean();
-var bZero = new Boolean(0);
-var bNull = new Boolean(null);
-var bEmptyString = new Boolean("");
-var bfalse = new Boolean(false);
-</pre>
-
-<h3 id="Création_dobjets_Boolean_avec_une_valeur_initiale_à_vrai">Création d'objets <code>Boolean</code> avec une valeur initiale à vrai</h3>
-
-<pre class="brush: js">var btrue = new Boolean(true);
-var btrueString = new Boolean("true");
-var bfalseString = new Boolean("false");
-var bArrayProto = new Boolean([]);
-var bObjProto = new Boolean({});
-var bSuLin = new Boolean("Su Lin");
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES1')}}</td>
-   <td>{{Spec2('ES1')}}</td>
-   <td>Définition initiale. Implémentée avec JavaScript 1.0.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-15.6', 'Boolean')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-boolean-objects', 'Boolean')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-boolean-objects', 'Boolean')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Boolean")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Boolean.prototype")}}</li>
- <li><a href="/fr/docs/Web/JavaScript/Structures_de_données#Les_valeurs_primitives">Les valeurs primitives en JavaScript</a></li>
- <li>{{Glossary("Boolean","booléen")}}</li>
- <li><a href="https://fr.wikipedia.org/wiki/Bool%C3%A9en">Le type de données booléen (Wikipédia)</a></li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/boolean/index.md b/files/fr/web/javascript/reference/global_objects/boolean/index.md
new file mode 100644
index 0000000000..970556573d
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/boolean/index.md
@@ -0,0 +1,138 @@
+---
+title: Boolean
+slug: Web/JavaScript/Reference/Global_Objects/Boolean
+tags:
+  - Boolean
+  - Constructeur
+  - JavaScript
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Boolean
+original_slug: Web/JavaScript/Reference/Objets_globaux/Boolean
+---
+{{JSRef}}
+
+L'objet **`Boolean`** est un objet permettant de représenter une valeur booléenne.
+
+## Syntaxe
+
+    new Boolean([valeur])
+
+## Paramètres
+
+- `valeur`{{optional_inline}}
+  - : Paramètre optionnel, la valeur initiale de l'objet `Boolean`.
+
+## Description
+
+La valeur passée en premier paramètre est, si nécessaire, convertie en valeur booléenne. Si la valeur est omise ou est `0`, `-0`, {{jsxref("null")}}, `false`, {{jsxref("NaN")}}, {{jsxref("undefined")}} ou une chaine de caractères vide (""), l'objet a un valeur initiale à `false` (faux). Si l'objet DOM {{domxref("document.all")}} est passé en argument, la valeur initiale sera également `false`. Toutes les autres valeurs, y compris n'importe quel objet, un tableau vide (`[]`), ou une chaine de caractères `"false"`, créént un objet avec une valeur initiale à `true` (vrai).
+
+Ne pas confondre les valeurs primitives booléennes `true` et `false` avec les valeurs _true_ et _false_ d'un objet Booléen.
+
+Tout objet dont la valeur n'est ni  `undefined` ni `null`, incluant un objet Booléen dont la valeur est fausse, évalue à `true` lorsqu'il est à une instruction conditionnelle. Par exemple, la condition (voir {{jsxref("Instructions/if...else", "if")}}), dans le code suivant, est validée si l'expression est évaluée à `true` :
+
+```js
+var x = new Boolean("false");
+if (x) {
+  // . . . le code est exécuté
+}
+
+var y = new Boolean(false);
+if (y) {
+  // ce code est également exécuté
+}
+```
+
+Ce comportement ne s'applique pas aux valeurs primitives booléennes. Par exemple, la condition, dans le code suivant, est évaluée à `false` :
+
+```js
+var x = false;
+if (x) {
+  // . . . le code n'est pas exécuté
+}
+```
+
+Ne pas utiliser un objet `Boolean` pour convertir une valeur non-booléenne en une valeur booléenne. Utilisez plutot une fonction booléenne pour effectuer cette tâche :
+
+```js
+var x = Boolean(expression);     // conseillé
+var y = new Boolean(expression); // à ne pas utiliser
+```
+
+Si vous spécifiez un objet quelconque, incluant un objet booléen qui a une valeur fausse, le nouvel objet `Boolean` a une valeur vraie.
+
+```js
+var myFalse = new Boolean(false);   // valeur initiale à false
+var g = Boolean(myFalse);       // valeur initiale à true
+var myString = new String("Hello"); // un object String
+var s = Boolean(myString);      // valeur initiale à true
+```
+
+Ne pas utiliser un objet Booléen à la place d'une valeur primitive booléenne.
+
+> **Note :** Lorsque la propriété historique, non-standard, [`document.all`](/fr/docs/Web/API/Document#Properties) est utilisée comme argument, le constructeur `Boolean` renvoie un objet booléen faux. Cette propriété étant non-standard, son utilisation est déconseillée.
+
+## Propriétés
+
+- `Boolean.length`
+  - : Renvoie 1. Le nombre d'arguments pris en charge par le constructeur.
+- {{jsxref("Boolean.prototype")}}
+  - : Représente le prototype du constructeur `Boolean`.
+
+## Méthodes
+
+L'objet global `Boolean` ne contient pas ses propres méthodes, cependant, il hérite de certaines méthodes à travers la chaine de prototypes.
+
+## Instances de `Boolean`
+
+Toutes les `Boolean` héritent de {{jsxref("Boolean.prototype")}}. Comme avec tous les constructeurs, l'objet prototype dicte les propriétés et les méthodes héritées par les instances.
+
+### Propriétés
+
+{{page('fr/docs/JavaScript/Reference/Objets_globaux/Boolean/prototype','Propri.C3.A9t.C3.A9s')}}
+
+### Méthodes
+
+{{page('fr/docs/JavaScript/Reference/Objets_globaux/Boolean/prototype','M.C3.A9thodes')}}
+
+## Exemples
+
+### Création d'objets `Boolean` avec une valeur initiale à faux
+
+```js
+var bNoParam = new Boolean();
+var bZero = new Boolean(0);
+var bNull = new Boolean(null);
+var bEmptyString = new Boolean("");
+var bfalse = new Boolean(false);
+```
+
+### Création d'objets `Boolean` avec une valeur initiale à vrai
+
+```js
+var btrue = new Boolean(true);
+var btrueString = new Boolean("true");
+var bfalseString = new Boolean("false");
+var bArrayProto = new Boolean([]);
+var bObjProto = new Boolean({});
+var bSuLin = new Boolean("Su Lin");
+```
+
+## Spécifications
+
+| Spécification                                                                | État                         | Commentaires                                          |
+| ---------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- |
+| {{SpecName('ES1')}}                                                     | {{Spec2('ES1')}}         | Définition initiale. Implémentée avec JavaScript 1.0. |
+| {{SpecName('ES5.1', '#sec-15.6', 'Boolean')}}                 | {{Spec2('ES5.1')}}     |                                                       |
+| {{SpecName('ES6', '#sec-boolean-objects', 'Boolean')}}     | {{Spec2('ES6')}}         |                                                       |
+| {{SpecName('ESDraft', '#sec-boolean-objects', 'Boolean')}} | {{Spec2('ESDraft')}} |                                                       |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Boolean")}}
+
+## Voir aussi
+
+- {{jsxref("Boolean.prototype")}}
+- [Les valeurs primitives en JavaScript](/fr/docs/Web/JavaScript/Structures_de_données#Les_valeurs_primitives)
+- {{Glossary("Boolean","booléen")}}
+- [Le type de données booléen (Wikipédia)](https://fr.wikipedia.org/wiki/Bool%C3%A9en)
diff --git a/files/fr/web/javascript/reference/global_objects/boolean/tosource/index.html b/files/fr/web/javascript/reference/global_objects/boolean/tosource/index.html
deleted file mode 100644
index c194c56ae6..0000000000
--- a/files/fr/web/javascript/reference/global_objects/boolean/tosource/index.html
+++ /dev/null
@@ -1,56 +0,0 @@
----
-title: Boolean.prototype.toSource()
-slug: Web/JavaScript/Reference/Global_Objects/Boolean/toSource
-tags:
-  - Boolean
-  - JavaScript
-  - Méthode
-  - Non-standard
-  - Prototype
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Boolean/toSource
-original_slug: Web/JavaScript/Reference/Objets_globaux/Boolean/toSource
----
-<div>{{JSRef}} {{Non-standard_header}}</div>
-
-<p>La méthode <code><strong>toSource()</strong></code> renvoie une chaine de caractères représentant le code source de l'objet.</p>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>booleanObj</var>.toSource()
-Boolean.toSource()</pre>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Une chaîne de caractères représentant le code source de l'objet.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>La méthode <code>toSource</code> renvoie les valeurs suivantes :</p>
-
-<ul>
- <li>Pour l'objet natif {{jsxref("Boolean")}} object, <code>toSource</code> renvoie la chaîne de caractères suivantes qui indique que le code source n'est pas disponible :
-
-  <pre class="brush: js">function Boolean() {
-    [native code]
-}
-</pre>
- </li>
- <li>Pour les instances de {{jsxref("Boolean")}}, <code>toSource</code> renvoie une chaîne explicitant le code source de l'objet.</li>
-</ul>
-
-<p>Cette méthode est généralement utilisée de façon interne par le moteur JavaScript et n'est pas appelée explicitement dans des scripts.</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<p>Ne fait partie d'aucun standard. Implémentée avec JavaScript 1.3.</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Boolean.toSource")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Object.prototype.toSource()")}} {{non-standard_inline}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/boolean/tosource/index.md b/files/fr/web/javascript/reference/global_objects/boolean/tosource/index.md
new file mode 100644
index 0000000000..df7e12c637
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/boolean/tosource/index.md
@@ -0,0 +1,53 @@
+---
+title: Boolean.prototype.toSource()
+slug: Web/JavaScript/Reference/Global_Objects/Boolean/toSource
+tags:
+  - Boolean
+  - JavaScript
+  - Méthode
+  - Non-standard
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Boolean/toSource
+original_slug: Web/JavaScript/Reference/Objets_globaux/Boolean/toSource
+---
+{{JSRef}} {{Non-standard_header}}
+
+La méthode **`toSource()`** renvoie une chaine de caractères représentant le code source de l'objet.
+
+## Syntaxe
+
+    booleanObj.toSource()
+    Boolean.toSource()
+
+### Valeur de retour
+
+Une chaîne de caractères représentant le code source de l'objet.
+
+## Description
+
+La méthode `toSource` renvoie les valeurs suivantes :
+
+- Pour l'objet natif {{jsxref("Boolean")}} object, `toSource` renvoie la chaîne de caractères suivantes qui indique que le code source n'est pas disponible :
+
+  ```js
+    function Boolean() {
+        [native code]
+    }
+    ```
+
+- Pour les instances de {{jsxref("Boolean")}}, `toSource` renvoie une chaîne explicitant le code source de l'objet.
+
+Cette méthode est généralement utilisée de façon interne par le moteur JavaScript et n'est pas appelée explicitement dans des scripts.
+
+## Spécifications
+
+Ne fait partie d'aucun standard. Implémentée avec JavaScript 1.3.
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Boolean.toSource")}}
+
+## Voir aussi
+
+- {{jsxref("Object.prototype.toSource()")}} {{non-standard_inline}}
diff --git a/files/fr/web/javascript/reference/global_objects/boolean/tostring/index.html b/files/fr/web/javascript/reference/global_objects/boolean/tostring/index.html
deleted file mode 100644
index aedf9e0b00..0000000000
--- a/files/fr/web/javascript/reference/global_objects/boolean/tostring/index.html
+++ /dev/null
@@ -1,85 +0,0 @@
----
-title: Boolean.prototype.toString()
-slug: Web/JavaScript/Reference/Global_Objects/Boolean/toString
-tags:
-  - Boolean
-  - JavaScript
-  - Méthode
-  - Prototype
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Boolean/toString
-original_slug: Web/JavaScript/Reference/Objets_globaux/Boolean/toString
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <code><strong>toString()</strong></code> renvoie une chaine de caractères correspondant à l'objet <code>Boolean</code> courant.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/boolean-tostring.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>bool</var>.toString()</pre>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Une chaîne de caractères qui représente l'objet {{jsxref("Boolean")}}.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>L'objet {{jsxref("Boolean")}} surcharge la méthode <code>toString()</code> de l'objet {{jsxref("Object")}} ; il n'hérite pas de la méthode {{jsxref("Object.prototype.toString()")}}. Pour les objets de type <code>Boolean</code>, la méthode <code>toString()</code> renvoie une chaine de caractère representative de l'objet.</p>
-
-<p>La méthode <code>toString()</code> est automatiquement appelée quand le <code>Boolean</code> doit être representé comme une texte ou lorsque qu'il est concaténé avec une chaine de caractères.</p>
-
-<p>Pour les objets de type <code>Boolean</code> , la fonction native <code>toString()</code> renvoie la chaine de caractère "<code>true</code>" ou "<code>false</code>" en fonction de la valeur de l'objet.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Utiliser_toString()">Utiliser <code>toString()</code></h3>
-
-<p>Dans ce code, <code>flag.toString()</code> renvoie "<code>true</code>" :</p>
-
-<pre class="brush: js">var flag = new Boolean(true);
-var maVar = flag.toString();
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES1')}}</td>
-   <td>{{Spec2('ES1')}}</td>
-   <td>Définition initiale. Implémentée avec JavaScript 1.1.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-15.6.4.2', 'Boolean.prototype.toString')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-boolean.prototype.tostring', 'Boolean.prototype.toString')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-boolean.prototype.tostring', 'Boolean.prototype.toString')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Boolean.toString")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Object.prototype.toString()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/boolean/tostring/index.md b/files/fr/web/javascript/reference/global_objects/boolean/tostring/index.md
new file mode 100644
index 0000000000..d3c00ab270
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/boolean/tostring/index.md
@@ -0,0 +1,61 @@
+---
+title: Boolean.prototype.toString()
+slug: Web/JavaScript/Reference/Global_Objects/Boolean/toString
+tags:
+  - Boolean
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Boolean/toString
+original_slug: Web/JavaScript/Reference/Objets_globaux/Boolean/toString
+---
+{{JSRef}}
+
+La méthode **`toString()`** renvoie une chaine de caractères correspondant à l'objet `Boolean` courant.
+
+{{EmbedInteractiveExample("pages/js/boolean-tostring.html")}}
+
+## Syntaxe
+
+    bool.toString()
+
+### Valeur de retour
+
+Une chaîne de caractères qui représente l'objet {{jsxref("Boolean")}}.
+
+## Description
+
+L'objet {{jsxref("Boolean")}} surcharge la méthode `toString()` de l'objet {{jsxref("Object")}} ; il n'hérite pas de la méthode {{jsxref("Object.prototype.toString()")}}. Pour les objets de type `Boolean`, la méthode `toString()` renvoie une chaine de caractère representative de l'objet.
+
+La méthode `toString()` est automatiquement appelée quand le `Boolean` doit être representé comme une texte ou lorsque qu'il est concaténé avec une chaine de caractères.
+
+Pour les objets de type `Boolean` , la fonction native `toString()` renvoie la chaine de caractère "`true`" ou "`false`" en fonction de la valeur de l'objet.
+
+## Exemples
+
+### Utiliser `toString()`
+
+Dans ce code, `flag.toString()` renvoie "`true`" :
+
+```js
+var flag = new Boolean(true);
+var maVar = flag.toString();
+```
+
+## Spécifications
+
+| Spécification                                                                                                        | Statut                       | Commentaires                                          |
+| -------------------------------------------------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- |
+| {{SpecName('ES1')}}                                                                                             | {{Spec2('ES1')}}         | Définition initiale. Implémentée avec JavaScript 1.1. |
+| {{SpecName('ES5.1', '#sec-15.6.4.2', 'Boolean.prototype.toString')}}                         | {{Spec2('ES5.1')}}     |                                                       |
+| {{SpecName('ES6', '#sec-boolean.prototype.tostring', 'Boolean.prototype.toString')}}     | {{Spec2('ES6')}}         |                                                       |
+| {{SpecName('ESDraft', '#sec-boolean.prototype.tostring', 'Boolean.prototype.toString')}} | {{Spec2('ESDraft')}} |                                                       |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Boolean.toString")}}
+
+## Voir aussi
+
+- {{jsxref("Object.prototype.toString()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/boolean/valueof/index.html b/files/fr/web/javascript/reference/global_objects/boolean/valueof/index.html
deleted file mode 100644
index 336b15a0ea..0000000000
--- a/files/fr/web/javascript/reference/global_objects/boolean/valueof/index.html
+++ /dev/null
@@ -1,81 +0,0 @@
----
-title: Boolean.prototype.valueOf()
-slug: Web/JavaScript/Reference/Global_Objects/Boolean/valueOf
-tags:
-  - Boolean
-  - JavaScript
-  - Méthode
-  - Prototype
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Boolean/valueOf
-original_slug: Web/JavaScript/Reference/Objets_globaux/Boolean/valueOf
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <code><strong>valueOf()</strong></code> renvoie la valeur primitive de l'objet {{jsxref("Boolean")}}.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/boolean-valueof.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>bool</var>.valueOf()</pre>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>La valeur primitive associée à l'objet {{jsxref("Boolean")}}.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>La méthode <code>valueOf()</code> de {{jsxref("Boolean")}} renvoie la valeur primitive d'un objet <code>Boolean</code>, ou d'un littéral booléen.</p>
-
-<p>Cette méthode est généralement utilisée de façon interne pas le moteur JavaScript et n'est pas utilisée explicitement dans les scripts.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Utiliser_valueOf()">Utiliser <code>valueOf()</code></h3>
-
-<pre class="brush: js">var x = new Boolean();
-var maVar = x.valueOf()      // assigne false à maVar
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES1')}}</td>
-   <td>{{Spec2('ES1')}}</td>
-   <td>Définition initiale. Implémentée avec JavaScript 1.1.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-15.6.4.3', 'Boolean.prototype.valueOf')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-boolean.prototype.valueof', 'Boolean.prototype.valueOf')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-boolean.prototype.valueof', 'Boolean.prototype.valueOf')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Boolean.valueOf")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Object.prototype.valueOf()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/boolean/valueof/index.md b/files/fr/web/javascript/reference/global_objects/boolean/valueof/index.md
new file mode 100644
index 0000000000..78b325ede5
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/boolean/valueof/index.md
@@ -0,0 +1,57 @@
+---
+title: Boolean.prototype.valueOf()
+slug: Web/JavaScript/Reference/Global_Objects/Boolean/valueOf
+tags:
+  - Boolean
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Boolean/valueOf
+original_slug: Web/JavaScript/Reference/Objets_globaux/Boolean/valueOf
+---
+{{JSRef}}
+
+La méthode **`valueOf()`** renvoie la valeur primitive de l'objet {{jsxref("Boolean")}}.
+
+{{EmbedInteractiveExample("pages/js/boolean-valueof.html")}}
+
+## Syntaxe
+
+    bool.valueOf()
+
+### Valeur de retour
+
+La valeur primitive associée à l'objet {{jsxref("Boolean")}}.
+
+## Description
+
+La méthode `valueOf()` de {{jsxref("Boolean")}} renvoie la valeur primitive d'un objet `Boolean`, ou d'un littéral booléen.
+
+Cette méthode est généralement utilisée de façon interne pas le moteur JavaScript et n'est pas utilisée explicitement dans les scripts.
+
+## Exemples
+
+### Utiliser `valueOf()`
+
+```js
+var x = new Boolean();
+var maVar = x.valueOf()      // assigne false à maVar
+```
+
+## Spécifications
+
+| Spécification                                                                                                        | État                         | Commentaires                                          |
+| -------------------------------------------------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- |
+| {{SpecName('ES1')}}                                                                                             | {{Spec2('ES1')}}         | Définition initiale. Implémentée avec JavaScript 1.1. |
+| {{SpecName('ES5.1', '#sec-15.6.4.3', 'Boolean.prototype.valueOf')}}                             | {{Spec2('ES5.1')}}     |                                                       |
+| {{SpecName('ES6', '#sec-boolean.prototype.valueof', 'Boolean.prototype.valueOf')}}         | {{Spec2('ES6')}}         |                                                       |
+| {{SpecName('ESDraft', '#sec-boolean.prototype.valueof', 'Boolean.prototype.valueOf')}} | {{Spec2('ESDraft')}} |                                                       |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Boolean.valueOf")}}
+
+## Voir aussi
+
+- {{jsxref("Object.prototype.valueOf()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/dataview/buffer/index.html b/files/fr/web/javascript/reference/global_objects/dataview/buffer/index.html
deleted file mode 100644
index 5e8b762109..0000000000
--- a/files/fr/web/javascript/reference/global_objects/dataview/buffer/index.html
+++ /dev/null
@@ -1,68 +0,0 @@
----
-title: DataView.prototype.buffer
-slug: Web/JavaScript/Reference/Global_Objects/DataView/buffer
-tags:
-  - DataView
-  - JavaScript
-  - Propriété
-  - Prototype
-  - Reference
-  - TypedArrays
-translation_of: Web/JavaScript/Reference/Global_Objects/DataView/buffer
-original_slug: Web/JavaScript/Reference/Objets_globaux/DataView/buffer
----
-<div>{{JSRef}}</div>
-
-<p>L'accesseur <strong><code>buffer</code></strong> est une propriété représentant l'objet {{jsxref("ArrayBuffer")}} ou {{jsxref("SharedArrayBuffer")}} référencé par la vue <code>DataView</code> lors de sa construction.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/dataview-buffer.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>dataview</var>.buffer</pre>
-
-<h2 id="Description">Description</h2>
-
-<p>La propriété <code>buffer</code> est un accesseur/mutateur dont le mutateur correspondant vaut <code>undefined</code>, cela signifie qu'il n'est possible que de lire cette propriété. Sa valeur est établie lors de la construction de l'objet <code>DataView</code> et ne peut pas être modifiée.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Utilisation_de_la_propriété_buffer">Utilisation de la propriété <code>buffer</code></h3>
-
-<pre class="brush:js">var buffer = new ArrayBuffer(8);
-var dataview = new DataView(buffer);
-dataview.buffer; // ArrayBuffer { byteLength: 8 }
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-get-dataview.prototype.buffer', 'DataView.prototype.buffer')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-get-dataview.prototype.buffer', 'DataView.prototype.buffer')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.DataView.buffer")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("DataView")}}</li>
- <li>{{jsxref("ArrayBuffer")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/dataview/buffer/index.md b/files/fr/web/javascript/reference/global_objects/dataview/buffer/index.md
new file mode 100644
index 0000000000..879a678bf9
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/dataview/buffer/index.md
@@ -0,0 +1,52 @@
+---
+title: DataView.prototype.buffer
+slug: Web/JavaScript/Reference/Global_Objects/DataView/buffer
+tags:
+  - DataView
+  - JavaScript
+  - Propriété
+  - Prototype
+  - Reference
+  - TypedArrays
+translation_of: Web/JavaScript/Reference/Global_Objects/DataView/buffer
+original_slug: Web/JavaScript/Reference/Objets_globaux/DataView/buffer
+---
+{{JSRef}}
+
+L'accesseur **`buffer`** est une propriété représentant l'objet {{jsxref("ArrayBuffer")}} ou {{jsxref("SharedArrayBuffer")}} référencé par la vue `DataView` lors de sa construction.
+
+{{EmbedInteractiveExample("pages/js/dataview-buffer.html")}}
+
+## Syntaxe
+
+    dataview.buffer
+
+## Description
+
+La propriété `buffer` est un accesseur/mutateur dont le mutateur correspondant vaut `undefined`, cela signifie qu'il n'est possible que de lire cette propriété. Sa valeur est établie lors de la construction de l'objet `DataView` et ne peut pas être modifiée.
+
+## Exemples
+
+### Utilisation de la propriété `buffer`
+
+```js
+var buffer = new ArrayBuffer(8);
+var dataview = new DataView(buffer);
+dataview.buffer; // ArrayBuffer { byteLength: 8 }
+```
+
+## Spécifications
+
+| Spécification                                                                                                            | Statut                       | Commentaires         |
+| ------------------------------------------------------------------------------------------------------------------------ | ---------------------------- | -------------------- |
+| {{SpecName('ES6', '#sec-get-dataview.prototype.buffer', 'DataView.prototype.buffer')}}     | {{Spec2('ES6')}}         | Définition initiale. |
+| {{SpecName('ESDraft', '#sec-get-dataview.prototype.buffer', 'DataView.prototype.buffer')}} | {{Spec2('ESDraft')}} |                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.DataView.buffer")}}
+
+## Voir aussi
+
+- {{jsxref("DataView")}}
+- {{jsxref("ArrayBuffer")}}
diff --git a/files/fr/web/javascript/reference/global_objects/dataview/bytelength/index.html b/files/fr/web/javascript/reference/global_objects/dataview/bytelength/index.html
deleted file mode 100644
index 0ee441d0f0..0000000000
--- a/files/fr/web/javascript/reference/global_objects/dataview/bytelength/index.html
+++ /dev/null
@@ -1,75 +0,0 @@
----
-title: DataView.prototype.byteLength
-slug: Web/JavaScript/Reference/Global_Objects/DataView/byteLength
-tags:
-  - DataView
-  - JavaScript
-  - Propriété
-  - Prototype
-  - Reference
-  - TypedArrays
-translation_of: Web/JavaScript/Reference/Global_Objects/DataView/byteLength
-original_slug: Web/JavaScript/Reference/Objets_globaux/DataView/byteLength
----
-<div>{{JSRef}}</div>
-
-<p>L'accesseur <strong><code>byteLength</code></strong> est une propriété représentant la longueur, exprimée en octets, de cette vue depuis le début de l'objet {{jsxref("ArrayBuffer")}} ou {{jsxref("SharedArrayBuffer")}} correspondant.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/dataview-bytelength.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>dataview</var>.byteLength</pre>
-
-<h2 id="Description">Description</h2>
-
-<p>La propriété <code>byteLength</code> est une propriété accesseur/mutateur dont le mutateur vaut  <code>undefined</code>. Cela signifie que cette propriété est en lecture seule. Cette valeur est déterminée lorsque l'objet <code>DataView</code> est construit et ne peut pas être changée. Si <code>DataView</code> ne définit pas de décalage avec <code>byteOffset</code> ou ne spécifie pas <code>byteLength</code>, ce sera la <code>byteLength</code> de l'objet <code>ArrayBuffer</code> ou <code>SharedArrayBuffer </code>référencé qui sera renvoyée.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Utilisation_de_la_propriété_byteLength">Utilisation de la propriété <code>byteLength</code></h3>
-
-<pre class="brush:js">var buffer = new ArrayBuffer(8);
-var dataview = new DataView(buffer);
-dataview.byteLength; // 8 (correspond au byteLength du buffer)
-
-var dataview2 = new DataView(buffer, 1, 5);
-dataview2.byteLength; // 5 (correspond à la longueur utilisée pour la définition)
-
-var dataview3 = new DataView(buffer, 2);
-dataview3.byteLength; // 6 (en raison du décalage (offset) pour la construction du DataView)
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-get-dataview.prototype.bytelength', 'DataView.prototype.byteLength')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-get-dataview.prototype.bytelength', 'DataView.prototype.byteLength')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.DataView.byteLength")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("DataView")}}</li>
- <li>{{jsxref("ArrayBuffer")}}</li>
- <li>{{jsxref("SharedArrayBuffer")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/dataview/bytelength/index.md b/files/fr/web/javascript/reference/global_objects/dataview/bytelength/index.md
new file mode 100644
index 0000000000..bd25a6f629
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/dataview/bytelength/index.md
@@ -0,0 +1,59 @@
+---
+title: DataView.prototype.byteLength
+slug: Web/JavaScript/Reference/Global_Objects/DataView/byteLength
+tags:
+  - DataView
+  - JavaScript
+  - Propriété
+  - Prototype
+  - Reference
+  - TypedArrays
+translation_of: Web/JavaScript/Reference/Global_Objects/DataView/byteLength
+original_slug: Web/JavaScript/Reference/Objets_globaux/DataView/byteLength
+---
+{{JSRef}}
+
+L'accesseur **`byteLength`** est une propriété représentant la longueur, exprimée en octets, de cette vue depuis le début de l'objet {{jsxref("ArrayBuffer")}} ou {{jsxref("SharedArrayBuffer")}} correspondant.
+
+{{EmbedInteractiveExample("pages/js/dataview-bytelength.html")}}
+
+## Syntaxe
+
+    dataview.byteLength
+
+## Description
+
+La propriété `byteLength` est une propriété accesseur/mutateur dont le mutateur vaut  `undefined`. Cela signifie que cette propriété est en lecture seule. Cette valeur est déterminée lorsque l'objet `DataView` est construit et ne peut pas être changée. Si `DataView` ne définit pas de décalage avec `byteOffset` ou ne spécifie pas `byteLength`, ce sera la `byteLength` de l'objet `ArrayBuffer` ou `SharedArrayBuffer `référencé qui sera renvoyée.
+
+## Exemples
+
+### Utilisation de la propriété `byteLength`
+
+```js
+var buffer = new ArrayBuffer(8);
+var dataview = new DataView(buffer);
+dataview.byteLength; // 8 (correspond au byteLength du buffer)
+
+var dataview2 = new DataView(buffer, 1, 5);
+dataview2.byteLength; // 5 (correspond à la longueur utilisée pour la définition)
+
+var dataview3 = new DataView(buffer, 2);
+dataview3.byteLength; // 6 (en raison du décalage (offset) pour la construction du DataView)
+```
+
+## Spécifications
+
+| Spécification                                                                                                                        | Statut                       | Commentaires         |
+| ------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------- | -------------------- |
+| {{SpecName('ES6', '#sec-get-dataview.prototype.bytelength', 'DataView.prototype.byteLength')}}         | {{Spec2('ES6')}}         | Définition initiale. |
+| {{SpecName('ESDraft', '#sec-get-dataview.prototype.bytelength', 'DataView.prototype.byteLength')}} | {{Spec2('ESDraft')}} |                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.DataView.byteLength")}}
+
+## Voir aussi
+
+- {{jsxref("DataView")}}
+- {{jsxref("ArrayBuffer")}}
+- {{jsxref("SharedArrayBuffer")}}
diff --git a/files/fr/web/javascript/reference/global_objects/dataview/byteoffset/index.html b/files/fr/web/javascript/reference/global_objects/dataview/byteoffset/index.html
deleted file mode 100644
index fe99429718..0000000000
--- a/files/fr/web/javascript/reference/global_objects/dataview/byteoffset/index.html
+++ /dev/null
@@ -1,72 +0,0 @@
----
-title: DataView.prototype.byteOffset
-slug: Web/JavaScript/Reference/Global_Objects/DataView/byteOffset
-tags:
-  - DataView
-  - JavaScript
-  - Propriété
-  - Prototype
-  - Reference
-  - TypedArrays
-translation_of: Web/JavaScript/Reference/Global_Objects/DataView/byteOffset
-original_slug: Web/JavaScript/Reference/Objets_globaux/DataView/byteOffset
----
-<div>{{JSRef}}</div>
-
-<p>La propriété <strong><code>byteOffset</code></strong> est un accesseur représentant le décalage, exprimé en octets, entre la vue et le début de l'objet {{jsxref("ArrayBuffer")}} ou {{jsxref("SharedArrayBuffer")}} correspondant.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/dataview-byteoffset.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>dataview</var>.byteOffset</pre>
-
-<h2 id="Description">Description</h2>
-
-<p>La propriété <code>byteOffset</code> est un accesseur/mutateur dont la fonction du mutateur vaut  <code>undefined</code>. Cela signifie que la propriété n'est accesssible qu'en lecture seule. La valeur de la propriété est définie lors de la construction de l'objet <code>DataView</code> et ne peut pas être modifiée.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Utilisation_de_la_propriété_byteOffset">Utilisation de la propriété <code>byteOffset</code></h3>
-
-<pre class="brush:js">var buffer = new ArrayBuffer(8);
-var dataview = new DataView(buffer);
-dataview.byteOffset; // 0 (aucun décalage)
-
-var dataview2 = new DataView(buffer, 3);
-dataview2.byteOffset; // 3 (décalage défini lors de la construction de la vue)
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-get-dataview.prototype.byteoffset', 'DataView.prototype.byteOffset')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-get-dataview.prototype.byteoffset', 'DataView.prototype.byteOffset')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.DataView.byteOffset")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("DataView")}}</li>
- <li>{{jsxref("ArrayBuffer")}}</li>
- <li>{{jsxref("SharedArrayBuffer")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/dataview/byteoffset/index.md b/files/fr/web/javascript/reference/global_objects/dataview/byteoffset/index.md
new file mode 100644
index 0000000000..ec2f25d33a
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/dataview/byteoffset/index.md
@@ -0,0 +1,56 @@
+---
+title: DataView.prototype.byteOffset
+slug: Web/JavaScript/Reference/Global_Objects/DataView/byteOffset
+tags:
+  - DataView
+  - JavaScript
+  - Propriété
+  - Prototype
+  - Reference
+  - TypedArrays
+translation_of: Web/JavaScript/Reference/Global_Objects/DataView/byteOffset
+original_slug: Web/JavaScript/Reference/Objets_globaux/DataView/byteOffset
+---
+{{JSRef}}
+
+La propriété **`byteOffset`** est un accesseur représentant le décalage, exprimé en octets, entre la vue et le début de l'objet {{jsxref("ArrayBuffer")}} ou {{jsxref("SharedArrayBuffer")}} correspondant.
+
+{{EmbedInteractiveExample("pages/js/dataview-byteoffset.html")}}
+
+## Syntaxe
+
+    dataview.byteOffset
+
+## Description
+
+La propriété `byteOffset` est un accesseur/mutateur dont la fonction du mutateur vaut  `undefined`. Cela signifie que la propriété n'est accesssible qu'en lecture seule. La valeur de la propriété est définie lors de la construction de l'objet `DataView` et ne peut pas être modifiée.
+
+## Exemples
+
+### Utilisation de la propriété `byteOffset`
+
+```js
+var buffer = new ArrayBuffer(8);
+var dataview = new DataView(buffer);
+dataview.byteOffset; // 0 (aucun décalage)
+
+var dataview2 = new DataView(buffer, 3);
+dataview2.byteOffset; // 3 (décalage défini lors de la construction de la vue)
+```
+
+## Spécifications
+
+| Spécification                                                                                                                        | Statut                       | Commentaires         |
+| ------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------- | -------------------- |
+| {{SpecName('ES6', '#sec-get-dataview.prototype.byteoffset', 'DataView.prototype.byteOffset')}}         | {{Spec2('ES6')}}         | Définition initiale. |
+| {{SpecName('ESDraft', '#sec-get-dataview.prototype.byteoffset', 'DataView.prototype.byteOffset')}} | {{Spec2('ESDraft')}} |                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.DataView.byteOffset")}}
+
+## Voir aussi
+
+- {{jsxref("DataView")}}
+- {{jsxref("ArrayBuffer")}}
+- {{jsxref("SharedArrayBuffer")}}
diff --git a/files/fr/web/javascript/reference/global_objects/dataview/getbigint64/index.html b/files/fr/web/javascript/reference/global_objects/dataview/getbigint64/index.html
deleted file mode 100644
index db4490ac0d..0000000000
--- a/files/fr/web/javascript/reference/global_objects/dataview/getbigint64/index.html
+++ /dev/null
@@ -1,85 +0,0 @@
----
-title: DataView.prototype.getBigInt64()
-slug: Web/JavaScript/Reference/Global_Objects/DataView/getBigInt64
-tags:
-  - BigInt
-  - DataView
-  - JavaScript
-  - Méthode
-  - Prototype
-  - Reference
-  - TypedArrays
-translation_of: Web/JavaScript/Reference/Global_Objects/DataView/getBigInt64
-original_slug: Web/JavaScript/Reference/Objets_globaux/DataView/getBigInt64
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <strong><code>getBigInt64()</code></strong> permet de lire un entier signé sur 64 bits (type <em>long long</em> par analogie avec C) à l'octet donné par rapport au début de {{jsxref("DataView")}}.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/dataview-getbigint64.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>dataview</var>.getBigInt64(positionOctet [, littleEndian])</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>positionOctet</code></dt>
- <dd>La position, exprimée en nombre d'octets depuis le début de la vue, à laquelle lire les données.</dd>
- <dt><code>littleEndian</code></dt>
- <dd>{{optional_inline}} indique si la valeur sur 64 bits est enregistrée dans l'ordre des octets {{Glossary("Endianness", "de poids faible")}}. Si le paramètre vaut <code>false</code> ou <code>undefined</code>, la valeur sera lue dans l'ordre des octets de poids forts.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Une valeur {{jsxref("BigInt")}}</p>
-
-<h3 id="Erreurs_renvoyées">Erreurs renvoyées</h3>
-
-<dl>
- <dt>{{jsxref("RangeError")}}</dt>
- <dd>Renvoyée si <code>positionOctet</code> est tel qu'il est en dehors de la vue.</dd>
-</dl>
-
-<h2 id="Description">Description</h2>
-
-<p>Il n'y a pas de contrainte d'alignement, les valeurs codées sur plusieurs octets peuvent être obtenues depuis n'importe quelle position.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Utilisation_de_la_méthode_getBigInt64()">Utilisation de la méthode <code>getBigInt64()</code></h3>
-
-<pre class="brush:js">var buffer = new ArrayBuffer(8);
-var dataview = new DataView(buffer);
-dataview.getBigInt64(0); // 0n
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td><a href="https://tc39.github.io/proposal-bigint/#sec-dataview.prototype.getbigint64">Proposition pour <code>DataView.prototype.getBigInt64()</code></a></td>
-   <td></td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.DataView.getBigInt64")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("DataView")}}</li>
- <li>{{jsxref("ArrayBuffer")}}</li>
- <li>{{jsxref("BigInt")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/dataview/getbigint64/index.md b/files/fr/web/javascript/reference/global_objects/dataview/getbigint64/index.md
new file mode 100644
index 0000000000..6bdaade750
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/dataview/getbigint64/index.md
@@ -0,0 +1,69 @@
+---
+title: DataView.prototype.getBigInt64()
+slug: Web/JavaScript/Reference/Global_Objects/DataView/getBigInt64
+tags:
+  - BigInt
+  - DataView
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - TypedArrays
+translation_of: Web/JavaScript/Reference/Global_Objects/DataView/getBigInt64
+original_slug: Web/JavaScript/Reference/Objets_globaux/DataView/getBigInt64
+---
+{{JSRef}}
+
+La méthode **`getBigInt64()`** permet de lire un entier signé sur 64 bits (type _long long_ par analogie avec C) à l'octet donné par rapport au début de {{jsxref("DataView")}}.
+
+{{EmbedInteractiveExample("pages/js/dataview-getbigint64.html")}}
+
+## Syntaxe
+
+    dataview.getBigInt64(positionOctet [, littleEndian])
+
+### Paramètres
+
+- `positionOctet`
+  - : La position, exprimée en nombre d'octets depuis le début de la vue, à laquelle lire les données.
+- `littleEndian`
+  - : {{optional_inline}} indique si la valeur sur 64 bits est enregistrée dans l'ordre des octets {{Glossary("Endianness", "de poids faible")}}. Si le paramètre vaut `false` ou `undefined`, la valeur sera lue dans l'ordre des octets de poids forts.
+
+### Valeur de retour
+
+Une valeur {{jsxref("BigInt")}}
+
+### Erreurs renvoyées
+
+- {{jsxref("RangeError")}}
+  - : Renvoyée si `positionOctet` est tel qu'il est en dehors de la vue.
+
+## Description
+
+Il n'y a pas de contrainte d'alignement, les valeurs codées sur plusieurs octets peuvent être obtenues depuis n'importe quelle position.
+
+## Exemples
+
+### Utilisation de la méthode `getBigInt64()`
+
+```js
+var buffer = new ArrayBuffer(8);
+var dataview = new DataView(buffer);
+dataview.getBigInt64(0); // 0n
+```
+
+## Spécifications
+
+| Spécification                                                                                                                     | État | Commentaires |
+| --------------------------------------------------------------------------------------------------------------------------------- | ---- | ------------ |
+| [Proposition pour `DataView.prototype.getBigInt64()`](https://tc39.github.io/proposal-bigint/#sec-dataview.prototype.getbigint64) |      |              |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.DataView.getBigInt64")}}
+
+## Voir aussi
+
+- {{jsxref("DataView")}}
+- {{jsxref("ArrayBuffer")}}
+- {{jsxref("BigInt")}}
diff --git a/files/fr/web/javascript/reference/global_objects/dataview/getbiguint64/index.html b/files/fr/web/javascript/reference/global_objects/dataview/getbiguint64/index.html
deleted file mode 100644
index b6fcc2c2ab..0000000000
--- a/files/fr/web/javascript/reference/global_objects/dataview/getbiguint64/index.html
+++ /dev/null
@@ -1,85 +0,0 @@
----
-title: DataView.prototype.getBigUint64()
-slug: Web/JavaScript/Reference/Global_Objects/DataView/getBigUint64
-tags:
-  - BigInt
-  - DataView
-  - JavaScript
-  - Méthode
-  - Prototype
-  - Reference
-  - TypedArrays
-translation_of: Web/JavaScript/Reference/Global_Objects/DataView/getBigUint64
-original_slug: Web/JavaScript/Reference/Objets_globaux/DataView/getBigUint64
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <strong><code>getBigUint64()</code></strong> permet de lire un entier non signé sur 64 bits (type <em>unsigned long long</em> par analogie avec C) à l'octet donné par rapport au début de {{jsxref("DataView")}}.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/dataview-getbiguint64.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>dataview</var>.getBigUint64(positionOctet [, littleEndian])</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>positionOctet</code></dt>
- <dd>La position, exprimée en nombre d'octets depuis le début de la vue, à laquelle lire les données.</dd>
- <dt><code>littleEndian</code></dt>
- <dd>{{optional_inline}} indique si la valeur sur 64 bits est enregistrée dans l'ordre des octets {{Glossary("Endianness", "de poids faible")}}. Si le paramètre vaut <code>false</code> ou <code>undefined</code>, la valeur sera lue dans l'ordre des octets de poids forts.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Une valeur {{jsxref("BigInt")}}</p>
-
-<h3 id="Erreurs_renvoyées">Erreurs renvoyées</h3>
-
-<dl>
- <dt>{{jsxref("RangeError")}}</dt>
- <dd>Renvoyée si <code>positionOctet</code> est tel qu'il est en dehors de la vue.</dd>
-</dl>
-
-<h2 id="Description">Description</h2>
-
-<p>Il n'y a pas de contrainte d'alignement, les valeurs codées sur plusieurs octets peuvent être obtenues depuis n'importe quelle position.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Utilisation_de_la_méthode_getBigUint64()">Utilisation de la méthode <code>getBigUint64()</code></h3>
-
-<pre class="brush:js">var buffer = new ArrayBuffer(8);
-var dataview = new DataView(buffer);
-dataview.getBigUint64(0); // 0n
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td><a href="https://tc39.es/proposal-bigint/#sec-dataview.prototype.getbiguint64">Proposition pour <code>DataView.prototype.getBigUint64()</code></a></td>
-   <td></td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.DataView.getBigUint64")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("DataView")}}</li>
- <li>{{jsxref("ArrayBuffer")}}</li>
- <li>{{jsxref("BigInt")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/dataview/getbiguint64/index.md b/files/fr/web/javascript/reference/global_objects/dataview/getbiguint64/index.md
new file mode 100644
index 0000000000..115e157fc8
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/dataview/getbiguint64/index.md
@@ -0,0 +1,69 @@
+---
+title: DataView.prototype.getBigUint64()
+slug: Web/JavaScript/Reference/Global_Objects/DataView/getBigUint64
+tags:
+  - BigInt
+  - DataView
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - TypedArrays
+translation_of: Web/JavaScript/Reference/Global_Objects/DataView/getBigUint64
+original_slug: Web/JavaScript/Reference/Objets_globaux/DataView/getBigUint64
+---
+{{JSRef}}
+
+La méthode **`getBigUint64()`** permet de lire un entier non signé sur 64 bits (type _unsigned long long_ par analogie avec C) à l'octet donné par rapport au début de {{jsxref("DataView")}}.
+
+{{EmbedInteractiveExample("pages/js/dataview-getbiguint64.html")}}
+
+## Syntaxe
+
+    dataview.getBigUint64(positionOctet [, littleEndian])
+
+### Paramètres
+
+- `positionOctet`
+  - : La position, exprimée en nombre d'octets depuis le début de la vue, à laquelle lire les données.
+- `littleEndian`
+  - : {{optional_inline}} indique si la valeur sur 64 bits est enregistrée dans l'ordre des octets {{Glossary("Endianness", "de poids faible")}}. Si le paramètre vaut `false` ou `undefined`, la valeur sera lue dans l'ordre des octets de poids forts.
+
+### Valeur de retour
+
+Une valeur {{jsxref("BigInt")}}
+
+### Erreurs renvoyées
+
+- {{jsxref("RangeError")}}
+  - : Renvoyée si `positionOctet` est tel qu'il est en dehors de la vue.
+
+## Description
+
+Il n'y a pas de contrainte d'alignement, les valeurs codées sur plusieurs octets peuvent être obtenues depuis n'importe quelle position.
+
+## Exemples
+
+### Utilisation de la méthode `getBigUint64()`
+
+```js
+var buffer = new ArrayBuffer(8);
+var dataview = new DataView(buffer);
+dataview.getBigUint64(0); // 0n
+```
+
+## Spécifications
+
+| Spécification                                                                                                                | État | Commentaires |
+| ---------------------------------------------------------------------------------------------------------------------------- | ---- | ------------ |
+| [Proposition pour `DataView.prototype.getBigUint64()`](https://tc39.es/proposal-bigint/#sec-dataview.prototype.getbiguint64) |      |              |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.DataView.getBigUint64")}}
+
+## Voir aussi
+
+- {{jsxref("DataView")}}
+- {{jsxref("ArrayBuffer")}}
+- {{jsxref("BigInt")}}
diff --git a/files/fr/web/javascript/reference/global_objects/dataview/getfloat32/index.html b/files/fr/web/javascript/reference/global_objects/dataview/getfloat32/index.html
deleted file mode 100644
index 20fb09388e..0000000000
--- a/files/fr/web/javascript/reference/global_objects/dataview/getfloat32/index.html
+++ /dev/null
@@ -1,93 +0,0 @@
----
-title: DataView.prototype.getFloat32()
-slug: Web/JavaScript/Reference/Global_Objects/DataView/getFloat32
-tags:
-  - DataView
-  - JavaScript
-  - Méthode
-  - Prototype
-  - Reference
-  - TypedArrays
-translation_of: Web/JavaScript/Reference/Global_Objects/DataView/getFloat32
-original_slug: Web/JavaScript/Reference/Objets_globaux/DataView/getFloat32
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <strong><code>getFloat32()</code></strong> permet de lire un nombre flottant signé sur 32 bits à l'octet donné par rapport au début de {{jsxref("DataView")}}.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/dataview-getfloat32.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>dataview</var>.getFloat32(positionOctet [, littleEndian])</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>positionOctet</code></dt>
- <dd>La position, exprimée en nombre d'octets depuis le début de la vue, à laquelle lire les données.</dd>
- <dt><code>littleEndian</code></dt>
- <dd>{{optional_inline}} indique si la valeur sur 32 bits est enregistrée dans l'ordre des octets {{Glossary("Endianness", "de poids faible")}}. Si le paramètre vaut <code>false</code> ou <code>undefined</code>, la valeur sera lue dans l'ordre des octets de poids forts.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Un nombre flottant signé, sur 32 bits.</p>
-
-<h3 id="Erreurs_renvoyées">Erreurs renvoyées</h3>
-
-<dl>
- <dt>{{jsxref("RangeError")}}</dt>
- <dd>Renvoyée si <code>positionOctet</code> est tel qu'il est en dehors de la vue.</dd>
-</dl>
-
-<h2 id="Description">Description</h2>
-
-<p>Il n'y a pas de contrainte d'alignement, les valeurs codées sur plusieurs octets peuvent être obtenues depuis n'importe quelle position.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Utilisation_de_la_méthode_getFloat32">Utilisation de la méthode <code>getFloat32</code></h3>
-
-<pre class="brush:js">var buffer = new ArrayBuffer(8);
-var dataview = new DataView(buffer);
-dataview.getFloat32(1); // 0
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Typed Array')}}</td>
-   <td>{{Spec2('Typed Array')}}</td>
-   <td>Remplacée dans ECMAScript 2015.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-dataview.prototype.getfloat32', 'DataView.prototype.getFloat32')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td>Définition initiale au sein d'un standard ECMA.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-dataview.prototype.getfloat32', 'DataView.prototype.getFloat32')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.DataView.getFloat32")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("DataView")}}</li>
- <li>{{jsxref("ArrayBuffer")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/dataview/getfloat32/index.md b/files/fr/web/javascript/reference/global_objects/dataview/getfloat32/index.md
new file mode 100644
index 0000000000..94e7f06fba
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/dataview/getfloat32/index.md
@@ -0,0 +1,69 @@
+---
+title: DataView.prototype.getFloat32()
+slug: Web/JavaScript/Reference/Global_Objects/DataView/getFloat32
+tags:
+  - DataView
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - TypedArrays
+translation_of: Web/JavaScript/Reference/Global_Objects/DataView/getFloat32
+original_slug: Web/JavaScript/Reference/Objets_globaux/DataView/getFloat32
+---
+{{JSRef}}
+
+La méthode **`getFloat32()`** permet de lire un nombre flottant signé sur 32 bits à l'octet donné par rapport au début de {{jsxref("DataView")}}.
+
+{{EmbedInteractiveExample("pages/js/dataview-getfloat32.html")}}
+
+## Syntaxe
+
+    dataview.getFloat32(positionOctet [, littleEndian])
+
+### Paramètres
+
+- `positionOctet`
+  - : La position, exprimée en nombre d'octets depuis le début de la vue, à laquelle lire les données.
+- `littleEndian`
+  - : {{optional_inline}} indique si la valeur sur 32 bits est enregistrée dans l'ordre des octets {{Glossary("Endianness", "de poids faible")}}. Si le paramètre vaut `false` ou `undefined`, la valeur sera lue dans l'ordre des octets de poids forts.
+
+### Valeur de retour
+
+Un nombre flottant signé, sur 32 bits.
+
+### Erreurs renvoyées
+
+- {{jsxref("RangeError")}}
+  - : Renvoyée si `positionOctet` est tel qu'il est en dehors de la vue.
+
+## Description
+
+Il n'y a pas de contrainte d'alignement, les valeurs codées sur plusieurs octets peuvent être obtenues depuis n'importe quelle position.
+
+## Exemples
+
+### Utilisation de la méthode `getFloat32`
+
+```js
+var buffer = new ArrayBuffer(8);
+var dataview = new DataView(buffer);
+dataview.getFloat32(1); // 0
+```
+
+## Spécifications
+
+| Spécification                                                                                                                | État                             | Commentaires                                    |
+| ---------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------------------------------------------- |
+| {{SpecName('Typed Array')}}                                                                                         | {{Spec2('Typed Array')}} | Remplacée dans ECMAScript 2015.                 |
+| {{SpecName('ES2015', '#sec-dataview.prototype.getfloat32', 'DataView.prototype.getFloat32')}} | {{Spec2('ES2015')}}         | Définition initiale au sein d'un standard ECMA. |
+| {{SpecName('ESDraft', '#sec-dataview.prototype.getfloat32', 'DataView.prototype.getFloat32')}} | {{Spec2('ESDraft')}}     |                                                 |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.DataView.getFloat32")}}
+
+## Voir aussi
+
+- {{jsxref("DataView")}}
+- {{jsxref("ArrayBuffer")}}
diff --git a/files/fr/web/javascript/reference/global_objects/dataview/getfloat64/index.html b/files/fr/web/javascript/reference/global_objects/dataview/getfloat64/index.html
deleted file mode 100644
index ba67808c2d..0000000000
--- a/files/fr/web/javascript/reference/global_objects/dataview/getfloat64/index.html
+++ /dev/null
@@ -1,93 +0,0 @@
----
-title: DataView.prototype.getFloat64()
-slug: Web/JavaScript/Reference/Global_Objects/DataView/getFloat64
-tags:
-  - DataView
-  - JavaScript
-  - Méthode
-  - Prototype
-  - Reference
-  - TypedArrays
-translation_of: Web/JavaScript/Reference/Global_Objects/DataView/getFloat64
-original_slug: Web/JavaScript/Reference/Objets_globaux/DataView/getFloat64
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <strong><code>getFloat64()</code></strong> permet de lire un entier signé sur 64 bits (type <em>double</em> par analogie avec C) à l'octet donné par rapport au début de {{jsxref("DataView")}}.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/dataview-getfloat64.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>dataview</var>.getFloat64(positionOctet [, littleEndian])</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>positionOctet</code></dt>
- <dd>La position, exprimée en nombre d'octets depuis le début de la vue, à laquelle lire les données.</dd>
- <dt><code>littleEndian</code></dt>
- <dd>{{optional_inline}} indique si la valeur sur 64 bits est enregistrée dans l'ordre des octets {{Glossary("Endianness", "de poids faible")}}. Si le paramètre vaut <code>false</code> ou <code>undefined</code>, la valeur sera lue dans l'ordre des octets de poids forts.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Un nombre flottant signé sur 64 bits.</p>
-
-<h3 id="Erreurs_renvoyées">Erreurs renvoyées</h3>
-
-<dl>
- <dt>{{jsxref("RangeError")}}</dt>
- <dd>Renvoyée si <code>positionOctet</code> est tel qu'il est en dehors de la vue.</dd>
-</dl>
-
-<h2 id="Description">Description</h2>
-
-<p>Il n'y a pas de contrainte d'alignement, les valeurs codées sur plusieurs octets peuvent être obtenues depuis n'importe quelle position.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Utilisation_de_la_méthode_getFloat64">Utilisation de la méthode <code>getFloat64</code></h3>
-
-<pre class="brush:js">var buffer = new ArrayBuffer(8);
-var dataview = new DataView(buffer);
-dataview.getFloat64(0); // 0
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Typed Array')}}</td>
-   <td>{{Spec2('Typed Array')}}</td>
-   <td>Remplacée dans ECMAScript 2015.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-dataview.prototype.getfloat64', 'DataView.prototype.getFloat64')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td>Définition initiale au sein d'un standard ECMA.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-dataview.prototype.getfloat64', 'DataView.prototype.getFloat64')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.DataView.getFloat64")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("DataView")}}</li>
- <li>{{jsxref("ArrayBuffer")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/dataview/getfloat64/index.md b/files/fr/web/javascript/reference/global_objects/dataview/getfloat64/index.md
new file mode 100644
index 0000000000..dc7d43000f
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/dataview/getfloat64/index.md
@@ -0,0 +1,69 @@
+---
+title: DataView.prototype.getFloat64()
+slug: Web/JavaScript/Reference/Global_Objects/DataView/getFloat64
+tags:
+  - DataView
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - TypedArrays
+translation_of: Web/JavaScript/Reference/Global_Objects/DataView/getFloat64
+original_slug: Web/JavaScript/Reference/Objets_globaux/DataView/getFloat64
+---
+{{JSRef}}
+
+La méthode **`getFloat64()`** permet de lire un entier signé sur 64 bits (type _double_ par analogie avec C) à l'octet donné par rapport au début de {{jsxref("DataView")}}.
+
+{{EmbedInteractiveExample("pages/js/dataview-getfloat64.html")}}
+
+## Syntaxe
+
+    dataview.getFloat64(positionOctet [, littleEndian])
+
+### Paramètres
+
+- `positionOctet`
+  - : La position, exprimée en nombre d'octets depuis le début de la vue, à laquelle lire les données.
+- `littleEndian`
+  - : {{optional_inline}} indique si la valeur sur 64 bits est enregistrée dans l'ordre des octets {{Glossary("Endianness", "de poids faible")}}. Si le paramètre vaut `false` ou `undefined`, la valeur sera lue dans l'ordre des octets de poids forts.
+
+### Valeur de retour
+
+Un nombre flottant signé sur 64 bits.
+
+### Erreurs renvoyées
+
+- {{jsxref("RangeError")}}
+  - : Renvoyée si `positionOctet` est tel qu'il est en dehors de la vue.
+
+## Description
+
+Il n'y a pas de contrainte d'alignement, les valeurs codées sur plusieurs octets peuvent être obtenues depuis n'importe quelle position.
+
+## Exemples
+
+### Utilisation de la méthode `getFloat64`
+
+```js
+var buffer = new ArrayBuffer(8);
+var dataview = new DataView(buffer);
+dataview.getFloat64(0); // 0
+```
+
+## Spécifications
+
+| Spécification                                                                                                                | État                             | Commentaires                                    |
+| ---------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------------------------------------------- |
+| {{SpecName('Typed Array')}}                                                                                         | {{Spec2('Typed Array')}} | Remplacée dans ECMAScript 2015.                 |
+| {{SpecName('ES2015', '#sec-dataview.prototype.getfloat64', 'DataView.prototype.getFloat64')}} | {{Spec2('ES2015')}}         | Définition initiale au sein d'un standard ECMA. |
+| {{SpecName('ESDraft', '#sec-dataview.prototype.getfloat64', 'DataView.prototype.getFloat64')}} | {{Spec2('ESDraft')}}     |                                                 |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.DataView.getFloat64")}}
+
+## Voir aussi
+
+- {{jsxref("DataView")}}
+- {{jsxref("ArrayBuffer")}}
diff --git a/files/fr/web/javascript/reference/global_objects/dataview/getint16/index.html b/files/fr/web/javascript/reference/global_objects/dataview/getint16/index.html
deleted file mode 100644
index 07973e9fa7..0000000000
--- a/files/fr/web/javascript/reference/global_objects/dataview/getint16/index.html
+++ /dev/null
@@ -1,93 +0,0 @@
----
-title: DataView.prototype.getInt16()
-slug: Web/JavaScript/Reference/Global_Objects/DataView/getInt16
-tags:
-  - DataView
-  - JavaScript
-  - Méthode
-  - Prototype
-  - Reference
-  - TypedArrays
-translation_of: Web/JavaScript/Reference/Global_Objects/DataView/getInt16
-original_slug: Web/JavaScript/Reference/Objets_globaux/DataView/getInt16
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <strong><code>getInt16()</code></strong> permet de lire un entier signé sur 16 bits (type <em>short</em> par analogie avec C) à l'octet donné par rapport au début de {{jsxref("DataView")}}.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/dataview-getint16.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>dataview</var>.getInt16(positionOctet [, littleEndian])</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>positionOctet</code></dt>
- <dd>La position, exprimée en nombre d'octets depuis le début de la vue, à laquelle lire les données.</dd>
- <dt><code>littleEndian</code></dt>
- <dd>{{optional_inline}} indique si la valeur sur 16 bits est enregistrée dans l'ordre des octets {{Glossary("Endianness", "de poids faible")}}. Si le paramètre vaut <code>false</code> ou <code>undefined</code>, la valeur sera lue dans l'ordre des octets de poids forts.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Un entier signé sur 16 bits.</p>
-
-<h3 id="Erreurs_renvoyées">Erreurs renvoyées</h3>
-
-<dl>
- <dt>{{jsxref("RangeError")}}</dt>
- <dd>Renvoyée si <code>positionOctet</code> est tel qu'il est en dehors de la vue.</dd>
-</dl>
-
-<h2 id="Description">Description</h2>
-
-<p>Il n'y a pas de contrainte d'alignement, les valeurs codées sur plusieurs octets peuvent être obtenues depuis n'importe quelle position.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Utilisation_de_la_méthode_getInt16">Utilisation de la méthode <code>getInt16</code></h3>
-
-<pre class="brush:js">var buffer = new ArrayBuffer(8);
-var dataview = new DataView(buffer);
-dataview.getInt16(1); // 0
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Typed Array')}}</td>
-   <td>{{Spec2('Typed Array')}}</td>
-   <td>Remplacée dans ECMAScript 2015.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-dataview.prototype.getint16', 'DataView.prototype.getInt16')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td>Définition initiale au sein d'un standard ECMA.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-dataview.prototype.getint16', 'DataView.prototype.getInt16')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.DataView.getInt16")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("DataView")}}</li>
- <li>{{jsxref("ArrayBuffer")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/dataview/getint16/index.md b/files/fr/web/javascript/reference/global_objects/dataview/getint16/index.md
new file mode 100644
index 0000000000..0d42b98be8
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/dataview/getint16/index.md
@@ -0,0 +1,69 @@
+---
+title: DataView.prototype.getInt16()
+slug: Web/JavaScript/Reference/Global_Objects/DataView/getInt16
+tags:
+  - DataView
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - TypedArrays
+translation_of: Web/JavaScript/Reference/Global_Objects/DataView/getInt16
+original_slug: Web/JavaScript/Reference/Objets_globaux/DataView/getInt16
+---
+{{JSRef}}
+
+La méthode **`getInt16()`** permet de lire un entier signé sur 16 bits (type _short_ par analogie avec C) à l'octet donné par rapport au début de {{jsxref("DataView")}}.
+
+{{EmbedInteractiveExample("pages/js/dataview-getint16.html")}}
+
+## Syntaxe
+
+    dataview.getInt16(positionOctet [, littleEndian])
+
+### Paramètres
+
+- `positionOctet`
+  - : La position, exprimée en nombre d'octets depuis le début de la vue, à laquelle lire les données.
+- `littleEndian`
+  - : {{optional_inline}} indique si la valeur sur 16 bits est enregistrée dans l'ordre des octets {{Glossary("Endianness", "de poids faible")}}. Si le paramètre vaut `false` ou `undefined`, la valeur sera lue dans l'ordre des octets de poids forts.
+
+### Valeur de retour
+
+Un entier signé sur 16 bits.
+
+### Erreurs renvoyées
+
+- {{jsxref("RangeError")}}
+  - : Renvoyée si `positionOctet` est tel qu'il est en dehors de la vue.
+
+## Description
+
+Il n'y a pas de contrainte d'alignement, les valeurs codées sur plusieurs octets peuvent être obtenues depuis n'importe quelle position.
+
+## Exemples
+
+### Utilisation de la méthode `getInt16`
+
+```js
+var buffer = new ArrayBuffer(8);
+var dataview = new DataView(buffer);
+dataview.getInt16(1); // 0
+```
+
+## Spécifications
+
+| Spécification                                                                                                            | État                             | Commentaires                                    |
+| ------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ----------------------------------------------- |
+| {{SpecName('Typed Array')}}                                                                                     | {{Spec2('Typed Array')}} | Remplacée dans ECMAScript 2015.                 |
+| {{SpecName('ES2015', '#sec-dataview.prototype.getint16', 'DataView.prototype.getInt16')}} | {{Spec2('ES2015')}}         | Définition initiale au sein d'un standard ECMA. |
+| {{SpecName('ESDraft', '#sec-dataview.prototype.getint16', 'DataView.prototype.getInt16')}} | {{Spec2('ESDraft')}}     |                                                 |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.DataView.getInt16")}}
+
+## Voir aussi
+
+- {{jsxref("DataView")}}
+- {{jsxref("ArrayBuffer")}}
diff --git a/files/fr/web/javascript/reference/global_objects/dataview/getint32/index.html b/files/fr/web/javascript/reference/global_objects/dataview/getint32/index.html
deleted file mode 100644
index 024dea3e3e..0000000000
--- a/files/fr/web/javascript/reference/global_objects/dataview/getint32/index.html
+++ /dev/null
@@ -1,93 +0,0 @@
----
-title: DataView.prototype.getInt32()
-slug: Web/JavaScript/Reference/Global_Objects/DataView/getInt32
-tags:
-  - DataView
-  - JavaScript
-  - Méthode
-  - Prototype
-  - Reference
-  - TypedArrays
-translation_of: Web/JavaScript/Reference/Global_Objects/DataView/getInt32
-original_slug: Web/JavaScript/Reference/Objets_globaux/DataView/getInt32
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <strong><code>getInt32()</code></strong> permet de lire un entier signé sur 32 bits (type <em>long</em> par analogie avec C) à l'octet donné par rapport au début de {{jsxref("DataView")}}.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/dataview-getint32.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>dataview</var>.getInt32(positionOctet [, littleEndian])</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>positionOctet</code></dt>
- <dd>La position, exprimée en nombre d'octets depuis le début de la vue, à laquelle lire les données.</dd>
- <dt><code>littleEndian</code></dt>
- <dd>{{optional_inline}} indique si la valeur sur 32 bits est enregistrée dans l'ordre des octets {{Glossary("Endianness", "de poids faible")}}. Si le paramètre vaut <code>false</code> ou <code>undefined</code>, la valeur sera lue dans l'ordre des octets de poids forts.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Un entier signé sur 32 bits.</p>
-
-<h3 id="Erreurs_renvoyées">Erreurs renvoyées</h3>
-
-<dl>
- <dt>{{jsxref("RangeError")}}</dt>
- <dd>Renvoyée si <code>positionOctet</code> est tel qu'il est en dehors de la vue.</dd>
-</dl>
-
-<h2 id="Description">Description</h2>
-
-<p>Il n'y a pas de contrainte d'alignement, les valeurs codées sur plusieurs octets peuvent être obtenues depuis n'importe quelle position.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Utilisation_de_la_méthode_getInt32">Utilisation de la méthode <code>getInt32</code></h3>
-
-<pre class="brush:js">var buffer = new ArrayBuffer(8);
-var dataview = new DataView(buffer);
-dataview.getInt32(1); // 0
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Typed Array')}}</td>
-   <td>{{Spec2('Typed Array')}}</td>
-   <td>Remplacée dans ECMAScript 2015.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-dataview.prototype.getint32', 'DataView.prototype.getInt32')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td>Définition initiale au sein d'un standard ECMA.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-dataview.prototype.getint32', 'DataView.prototype.getInt32')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.DataView.getInt32")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("DataView")}}</li>
- <li>{{jsxref("ArrayBuffer")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/dataview/getint32/index.md b/files/fr/web/javascript/reference/global_objects/dataview/getint32/index.md
new file mode 100644
index 0000000000..c611ff5885
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/dataview/getint32/index.md
@@ -0,0 +1,69 @@
+---
+title: DataView.prototype.getInt32()
+slug: Web/JavaScript/Reference/Global_Objects/DataView/getInt32
+tags:
+  - DataView
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - TypedArrays
+translation_of: Web/JavaScript/Reference/Global_Objects/DataView/getInt32
+original_slug: Web/JavaScript/Reference/Objets_globaux/DataView/getInt32
+---
+{{JSRef}}
+
+La méthode **`getInt32()`** permet de lire un entier signé sur 32 bits (type _long_ par analogie avec C) à l'octet donné par rapport au début de {{jsxref("DataView")}}.
+
+{{EmbedInteractiveExample("pages/js/dataview-getint32.html")}}
+
+## Syntaxe
+
+    dataview.getInt32(positionOctet [, littleEndian])
+
+### Paramètres
+
+- `positionOctet`
+  - : La position, exprimée en nombre d'octets depuis le début de la vue, à laquelle lire les données.
+- `littleEndian`
+  - : {{optional_inline}} indique si la valeur sur 32 bits est enregistrée dans l'ordre des octets {{Glossary("Endianness", "de poids faible")}}. Si le paramètre vaut `false` ou `undefined`, la valeur sera lue dans l'ordre des octets de poids forts.
+
+### Valeur de retour
+
+Un entier signé sur 32 bits.
+
+### Erreurs renvoyées
+
+- {{jsxref("RangeError")}}
+  - : Renvoyée si `positionOctet` est tel qu'il est en dehors de la vue.
+
+## Description
+
+Il n'y a pas de contrainte d'alignement, les valeurs codées sur plusieurs octets peuvent être obtenues depuis n'importe quelle position.
+
+## Exemples
+
+### Utilisation de la méthode `getInt32`
+
+```js
+var buffer = new ArrayBuffer(8);
+var dataview = new DataView(buffer);
+dataview.getInt32(1); // 0
+```
+
+## Spécifications
+
+| Spécification                                                                                                            | État                             | Commentaires                                    |
+| ------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ----------------------------------------------- |
+| {{SpecName('Typed Array')}}                                                                                     | {{Spec2('Typed Array')}} | Remplacée dans ECMAScript 2015.                 |
+| {{SpecName('ES2015', '#sec-dataview.prototype.getint32', 'DataView.prototype.getInt32')}} | {{Spec2('ES2015')}}         | Définition initiale au sein d'un standard ECMA. |
+| {{SpecName('ESDraft', '#sec-dataview.prototype.getint32', 'DataView.prototype.getInt32')}} | {{Spec2('ESDraft')}}     |                                                 |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.DataView.getInt32")}}
+
+## Voir aussi
+
+- {{jsxref("DataView")}}
+- {{jsxref("ArrayBuffer")}}
diff --git a/files/fr/web/javascript/reference/global_objects/dataview/getint8/index.html b/files/fr/web/javascript/reference/global_objects/dataview/getint8/index.html
deleted file mode 100644
index 7404ee6626..0000000000
--- a/files/fr/web/javascript/reference/global_objects/dataview/getint8/index.html
+++ /dev/null
@@ -1,91 +0,0 @@
----
-title: DataView.prototype.getInt8()
-slug: Web/JavaScript/Reference/Global_Objects/DataView/getInt8
-tags:
-  - DataView
-  - JavaScript
-  - Méthode
-  - Prototype
-  - Reference
-  - TypedArrays
-translation_of: Web/JavaScript/Reference/Global_Objects/DataView/getInt8
-original_slug: Web/JavaScript/Reference/Objets_globaux/DataView/getInt8
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <strong><code>getInt8()</code></strong> permet de lire un entier signé sur 8 bits à l'octet donné par rapport au début de {{jsxref("DataView")}}.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/dataview-getint8.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>dataview</var>.getInt8(positionOctet)</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>positionOctet</code></dt>
- <dd>La position, exprimée en nombre d'octets depuis le début de la vue, à laquelle lire les données.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Un entier signé sur 8 bits.</p>
-
-<h3 id="Erreurs_renvoyées">Erreurs renvoyées</h3>
-
-<dl>
- <dt>{{jsxref("RangeError")}}</dt>
- <dd>Renvoyée si <code>positionOctet</code> est tel qu'il est en dehors de la vue.</dd>
-</dl>
-
-<h2 id="Description">Description</h2>
-
-<p>Il n'y a pas de contrainte d'alignement, les valeurs codées sur plusieurs octets peuvent être obtenues depuis n'importe quelle position.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Utilisation_de_la_méthode_getInt8">Utilisation de la méthode <code>getInt8</code></h3>
-
-<pre class="brush:js">var buffer = new ArrayBuffer(8);
-var dataview = new DataView(buffer);
-dataview.getInt8(1); // 0
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Typed Array')}}</td>
-   <td>{{Spec2('Typed Array')}}</td>
-   <td>Remplacée dans ECMAScript 2015.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-dataview.prototype.getint8', 'DataView.prototype.getInt8')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td>Définition initiale au sein d'un standard ECMA.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-dataview.prototype.getint8', 'DataView.prototype.getInt8')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.DataView.getInt8")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("DataView")}}</li>
- <li>{{jsxref("ArrayBuffer")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/dataview/getint8/index.md b/files/fr/web/javascript/reference/global_objects/dataview/getint8/index.md
new file mode 100644
index 0000000000..137c728e37
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/dataview/getint8/index.md
@@ -0,0 +1,67 @@
+---
+title: DataView.prototype.getInt8()
+slug: Web/JavaScript/Reference/Global_Objects/DataView/getInt8
+tags:
+  - DataView
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - TypedArrays
+translation_of: Web/JavaScript/Reference/Global_Objects/DataView/getInt8
+original_slug: Web/JavaScript/Reference/Objets_globaux/DataView/getInt8
+---
+{{JSRef}}
+
+La méthode **`getInt8()`** permet de lire un entier signé sur 8 bits à l'octet donné par rapport au début de {{jsxref("DataView")}}.
+
+{{EmbedInteractiveExample("pages/js/dataview-getint8.html")}}
+
+## Syntaxe
+
+    dataview.getInt8(positionOctet)
+
+### Paramètres
+
+- `positionOctet`
+  - : La position, exprimée en nombre d'octets depuis le début de la vue, à laquelle lire les données.
+
+### Valeur de retour
+
+Un entier signé sur 8 bits.
+
+### Erreurs renvoyées
+
+- {{jsxref("RangeError")}}
+  - : Renvoyée si `positionOctet` est tel qu'il est en dehors de la vue.
+
+## Description
+
+Il n'y a pas de contrainte d'alignement, les valeurs codées sur plusieurs octets peuvent être obtenues depuis n'importe quelle position.
+
+## Exemples
+
+### Utilisation de la méthode `getInt8`
+
+```js
+var buffer = new ArrayBuffer(8);
+var dataview = new DataView(buffer);
+dataview.getInt8(1); // 0
+```
+
+## Spécifications
+
+| Spécification                                                                                                        | État                             | Commentaires                                    |
+| -------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------------------------------------------- |
+| {{SpecName('Typed Array')}}                                                                                 | {{Spec2('Typed Array')}} | Remplacée dans ECMAScript 2015.                 |
+| {{SpecName('ES2015', '#sec-dataview.prototype.getint8', 'DataView.prototype.getInt8')}} | {{Spec2('ES2015')}}         | Définition initiale au sein d'un standard ECMA. |
+| {{SpecName('ESDraft', '#sec-dataview.prototype.getint8', 'DataView.prototype.getInt8')}} | {{Spec2('ESDraft')}}     |                                                 |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.DataView.getInt8")}}
+
+## Voir aussi
+
+- {{jsxref("DataView")}}
+- {{jsxref("ArrayBuffer")}}
diff --git a/files/fr/web/javascript/reference/global_objects/dataview/getuint16/index.html b/files/fr/web/javascript/reference/global_objects/dataview/getuint16/index.html
deleted file mode 100644
index 7f2a5c307a..0000000000
--- a/files/fr/web/javascript/reference/global_objects/dataview/getuint16/index.html
+++ /dev/null
@@ -1,93 +0,0 @@
----
-title: DataView.prototype.getUint16()
-slug: Web/JavaScript/Reference/Global_Objects/DataView/getUint16
-tags:
-  - DataView
-  - JavaScript
-  - Méthode
-  - Prototype
-  - Reference
-  - TypedArrays
-translation_of: Web/JavaScript/Reference/Global_Objects/DataView/getUint16
-original_slug: Web/JavaScript/Reference/Objets_globaux/DataView/getUint16
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <strong><code>getUint16()</code></strong> permet de lire un entier non-signé sur 16 bits (type <em>unsigned short</em> par analogie avec C) à l'octet donné par rapport au début de {{jsxref("DataView")}}.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/dataview-getuint16.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>dataview</var>.getUint16(positionOctet [, littleEndian])</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>positionOctet</code></dt>
- <dd>La position, exprimée en nombre d'octets depuis le début de la vue, à laquelle lire les données.</dd>
- <dt><code>littleEndian</code></dt>
- <dd>{{optional_inline}} indique si la valeur sur 16 bits est enregistrée dans l'ordre des octets {{Glossary("Endianness", "de poids faible")}}. Si le paramètre vaut <code>false</code> ou <code>undefined</code>, la valeur sera lue dans l'ordre des octets de poids forts.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Un entier sur 16 bits non signé.</p>
-
-<h3 id="Erreurs_renvoyées">Erreurs renvoyées</h3>
-
-<dl>
- <dt>{{jsxref("RangeError")}}</dt>
- <dd>Renvoyée si <code>positionOctet</code> est tel qu'il est en dehors de la vue.</dd>
-</dl>
-
-<h2 id="Description">Description</h2>
-
-<p>Il n'y a pas de contrainte d'alignement, les valeurs codées sur plusieurs octets peuvent être obtenues depuis n'importe quelle position.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Utilisation_de_la_méthode_getUint16">Utilisation de la méthode <code>getUint16</code></h3>
-
-<pre class="brush:js">var buffer = new ArrayBuffer(8);
-var dataview = new DataView(buffer);
-dataview.getUint16(1); // 0
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Typed Array')}}</td>
-   <td>{{Spec2('Typed Array')}}</td>
-   <td>Remplacée dans ECMAScript 2015.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-dataview.prototype.getuint16', 'DataView.prototype.getUint16')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td>Définition initiale au sein d'un standard ECMA.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-dataview.prototype.getuint16', 'DataView.prototype.getUint16')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.DataView.getUint16")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("DataView")}}</li>
- <li>{{jsxref("ArrayBuffer")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/dataview/getuint16/index.md b/files/fr/web/javascript/reference/global_objects/dataview/getuint16/index.md
new file mode 100644
index 0000000000..c3da190fe2
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/dataview/getuint16/index.md
@@ -0,0 +1,69 @@
+---
+title: DataView.prototype.getUint16()
+slug: Web/JavaScript/Reference/Global_Objects/DataView/getUint16
+tags:
+  - DataView
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - TypedArrays
+translation_of: Web/JavaScript/Reference/Global_Objects/DataView/getUint16
+original_slug: Web/JavaScript/Reference/Objets_globaux/DataView/getUint16
+---
+{{JSRef}}
+
+La méthode **`getUint16()`** permet de lire un entier non-signé sur 16 bits (type _unsigned short_ par analogie avec C) à l'octet donné par rapport au début de {{jsxref("DataView")}}.
+
+{{EmbedInteractiveExample("pages/js/dataview-getuint16.html")}}
+
+## Syntaxe
+
+    dataview.getUint16(positionOctet [, littleEndian])
+
+### Paramètres
+
+- `positionOctet`
+  - : La position, exprimée en nombre d'octets depuis le début de la vue, à laquelle lire les données.
+- `littleEndian`
+  - : {{optional_inline}} indique si la valeur sur 16 bits est enregistrée dans l'ordre des octets {{Glossary("Endianness", "de poids faible")}}. Si le paramètre vaut `false` ou `undefined`, la valeur sera lue dans l'ordre des octets de poids forts.
+
+### Valeur de retour
+
+Un entier sur 16 bits non signé.
+
+### Erreurs renvoyées
+
+- {{jsxref("RangeError")}}
+  - : Renvoyée si `positionOctet` est tel qu'il est en dehors de la vue.
+
+## Description
+
+Il n'y a pas de contrainte d'alignement, les valeurs codées sur plusieurs octets peuvent être obtenues depuis n'importe quelle position.
+
+## Exemples
+
+### Utilisation de la méthode `getUint16`
+
+```js
+var buffer = new ArrayBuffer(8);
+var dataview = new DataView(buffer);
+dataview.getUint16(1); // 0
+```
+
+## Spécifications
+
+| Spécification                                                                                                                | État                             | Commentaires                                    |
+| ---------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------------------------------------------- |
+| {{SpecName('Typed Array')}}                                                                                         | {{Spec2('Typed Array')}} | Remplacée dans ECMAScript 2015.                 |
+| {{SpecName('ES2015', '#sec-dataview.prototype.getuint16', 'DataView.prototype.getUint16')}}     | {{Spec2('ES2015')}}         | Définition initiale au sein d'un standard ECMA. |
+| {{SpecName('ESDraft', '#sec-dataview.prototype.getuint16', 'DataView.prototype.getUint16')}} | {{Spec2('ESDraft')}}     |                                                 |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.DataView.getUint16")}}
+
+## Voir aussi
+
+- {{jsxref("DataView")}}
+- {{jsxref("ArrayBuffer")}}
diff --git a/files/fr/web/javascript/reference/global_objects/dataview/getuint32/index.html b/files/fr/web/javascript/reference/global_objects/dataview/getuint32/index.html
deleted file mode 100644
index d01a4a0f87..0000000000
--- a/files/fr/web/javascript/reference/global_objects/dataview/getuint32/index.html
+++ /dev/null
@@ -1,93 +0,0 @@
----
-title: DataView.prototype.getUint32()
-slug: Web/JavaScript/Reference/Global_Objects/DataView/getUint32
-tags:
-  - DataView
-  - JavaScript
-  - Méthode
-  - Prototype
-  - Reference
-  - TypedArrays
-translation_of: Web/JavaScript/Reference/Global_Objects/DataView/getUint32
-original_slug: Web/JavaScript/Reference/Objets_globaux/DataView/getUint32
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <strong><code>getUint32()</code></strong> permet de lire un entier non-signé sur 32 bits (type <em>unsigned long</em> par analogie avec C) à l'octet donné par rapport au début de {{jsxref("DataView")}}.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/dataview-getuint32.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>dataview</var>.getUint32(positionOctet [, littleEndian])</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>positionOctet</code></dt>
- <dd>La position, exprimée en nombre d'octets depuis le début de la vue, à laquelle lire les données.</dd>
- <dt><code>littleEndian</code></dt>
- <dd>{{optional_inline}} indique si la valeur sur 32 bits est enregistrée dans l'ordre des octets {{Glossary("Endianness", "de poids faible")}}. Si le paramètre vaut <code>false</code> ou <code>undefined</code>, la valeur sera lue dans l'ordre des octets de poids forts.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Un entier sur 32 bits, non-signé.</p>
-
-<h3 id="Erreurs_renvoyées">Erreurs renvoyées</h3>
-
-<dl>
- <dt>{{jsxref("RangeError")}}</dt>
- <dd>Renvoyée si <code>positionOctet</code> est tel qu'il est en dehors de la vue.</dd>
-</dl>
-
-<h2 id="Description">Description</h2>
-
-<p>Il n'y a pas de contrainte d'alignement, les valeurs codées sur plusieurs octets peuvent être obtenues depuis n'importe quelle position.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Utilisation_de_la_méthode_getUint32()">Utilisation de la méthode <code>getUint32()</code></h3>
-
-<pre class="brush:js">var buffer = new ArrayBuffer(8);
-var dataview = new DataView(buffer);
-dataview.getUint32(1); // 0
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Typed Array')}}</td>
-   <td>{{Spec2('Typed Array')}}</td>
-   <td>Remplacée dans ECMAScript 2015.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-dataview.prototype.getuint32', 'DataView.prototype.getUint32')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td>Définition initiale au sein d'un standard ECMA.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-dataview.prototype.getuint32', 'DataView.prototype.getUint32')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.DataView.getUint32")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("DataView")}}</li>
- <li>{{jsxref("ArrayBuffer")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/dataview/getuint32/index.md b/files/fr/web/javascript/reference/global_objects/dataview/getuint32/index.md
new file mode 100644
index 0000000000..d45830129d
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/dataview/getuint32/index.md
@@ -0,0 +1,69 @@
+---
+title: DataView.prototype.getUint32()
+slug: Web/JavaScript/Reference/Global_Objects/DataView/getUint32
+tags:
+  - DataView
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - TypedArrays
+translation_of: Web/JavaScript/Reference/Global_Objects/DataView/getUint32
+original_slug: Web/JavaScript/Reference/Objets_globaux/DataView/getUint32
+---
+{{JSRef}}
+
+La méthode **`getUint32()`** permet de lire un entier non-signé sur 32 bits (type _unsigned long_ par analogie avec C) à l'octet donné par rapport au début de {{jsxref("DataView")}}.
+
+{{EmbedInteractiveExample("pages/js/dataview-getuint32.html")}}
+
+## Syntaxe
+
+    dataview.getUint32(positionOctet [, littleEndian])
+
+### Paramètres
+
+- `positionOctet`
+  - : La position, exprimée en nombre d'octets depuis le début de la vue, à laquelle lire les données.
+- `littleEndian`
+  - : {{optional_inline}} indique si la valeur sur 32 bits est enregistrée dans l'ordre des octets {{Glossary("Endianness", "de poids faible")}}. Si le paramètre vaut `false` ou `undefined`, la valeur sera lue dans l'ordre des octets de poids forts.
+
+### Valeur de retour
+
+Un entier sur 32 bits, non-signé.
+
+### Erreurs renvoyées
+
+- {{jsxref("RangeError")}}
+  - : Renvoyée si `positionOctet` est tel qu'il est en dehors de la vue.
+
+## Description
+
+Il n'y a pas de contrainte d'alignement, les valeurs codées sur plusieurs octets peuvent être obtenues depuis n'importe quelle position.
+
+## Exemples
+
+### Utilisation de la méthode `getUint32()`
+
+```js
+var buffer = new ArrayBuffer(8);
+var dataview = new DataView(buffer);
+dataview.getUint32(1); // 0
+```
+
+## Spécifications
+
+| Spécification                                                                                                                | État                             | Commentaires                                    |
+| ---------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------------------------------------------- |
+| {{SpecName('Typed Array')}}                                                                                         | {{Spec2('Typed Array')}} | Remplacée dans ECMAScript 2015.                 |
+| {{SpecName('ES2015', '#sec-dataview.prototype.getuint32', 'DataView.prototype.getUint32')}}     | {{Spec2('ES2015')}}         | Définition initiale au sein d'un standard ECMA. |
+| {{SpecName('ESDraft', '#sec-dataview.prototype.getuint32', 'DataView.prototype.getUint32')}} | {{Spec2('ESDraft')}}     |                                                 |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.DataView.getUint32")}}
+
+## Voir aussi
+
+- {{jsxref("DataView")}}
+- {{jsxref("ArrayBuffer")}}
diff --git a/files/fr/web/javascript/reference/global_objects/dataview/getuint8/index.html b/files/fr/web/javascript/reference/global_objects/dataview/getuint8/index.html
deleted file mode 100644
index a8c94778c7..0000000000
--- a/files/fr/web/javascript/reference/global_objects/dataview/getuint8/index.html
+++ /dev/null
@@ -1,91 +0,0 @@
----
-title: DataView.prototype.getUint8()
-slug: Web/JavaScript/Reference/Global_Objects/DataView/getUint8
-tags:
-  - DataView
-  - JavaScript
-  - Méthode
-  - Prototype
-  - Reference
-  - TypedArrays
-translation_of: Web/JavaScript/Reference/Global_Objects/DataView/getUint8
-original_slug: Web/JavaScript/Reference/Objets_globaux/DataView/getUint8
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <strong><code>getUint8()</code></strong> permet de lire un entier non-signé sur 8 bits à l'octet donné par rapport au début de la {{jsxref("DataView")}}.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/dataview-getuint8.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>dataview</var>.getUint8(positionOctet)</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>positionOctet</code></dt>
- <dd>La position, exprimée en nombre d'octets depuis le début de la vue, à laquelle lire les données.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Un entier sur 8 bits, non-signé.</p>
-
-<h3 id="Erreurs_renvoyées">Erreurs renvoyées</h3>
-
-<dl>
- <dt>{{jsxref("RangeError")}}</dt>
- <dd>Renvoyée si <code>positionOctet</code> est tel qu'il est en dehors de la vue.</dd>
-</dl>
-
-<h2 id="Description">Description</h2>
-
-<p>Il n'y a pas de contrainte d'alignement, les valeurs codées sur plusieurs octets peuvent être obtenues depuis n'importe quelle position.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Utilisation_de_la_méthode_getUint8">Utilisation de la méthode <code>getUint8</code></h3>
-
-<pre class="brush:js">var buffer = new ArrayBuffer(8);
-var dataview = new DataView(buffer);
-dataview.getUint8(1); // 0
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Typed Array')}}</td>
-   <td>{{Spec2('Typed Array')}}</td>
-   <td>Remplacée dans ECMAScript 2015.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-dataview.prototype.getuint8', 'DataView.prototype.getUint8')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td>Définition initiale au sein d'un standard ECMA.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-dataview.prototype.getuint8', 'DataView.prototype.getUint8')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.DataView.getUint8")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("DataView")}}</li>
- <li>{{jsxref("ArrayBuffer")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/dataview/getuint8/index.md b/files/fr/web/javascript/reference/global_objects/dataview/getuint8/index.md
new file mode 100644
index 0000000000..b49458a38a
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/dataview/getuint8/index.md
@@ -0,0 +1,67 @@
+---
+title: DataView.prototype.getUint8()
+slug: Web/JavaScript/Reference/Global_Objects/DataView/getUint8
+tags:
+  - DataView
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - TypedArrays
+translation_of: Web/JavaScript/Reference/Global_Objects/DataView/getUint8
+original_slug: Web/JavaScript/Reference/Objets_globaux/DataView/getUint8
+---
+{{JSRef}}
+
+La méthode **`getUint8()`** permet de lire un entier non-signé sur 8 bits à l'octet donné par rapport au début de la {{jsxref("DataView")}}.
+
+{{EmbedInteractiveExample("pages/js/dataview-getuint8.html")}}
+
+## Syntaxe
+
+    dataview.getUint8(positionOctet)
+
+### Paramètres
+
+- `positionOctet`
+  - : La position, exprimée en nombre d'octets depuis le début de la vue, à laquelle lire les données.
+
+### Valeur de retour
+
+Un entier sur 8 bits, non-signé.
+
+### Erreurs renvoyées
+
+- {{jsxref("RangeError")}}
+  - : Renvoyée si `positionOctet` est tel qu'il est en dehors de la vue.
+
+## Description
+
+Il n'y a pas de contrainte d'alignement, les valeurs codées sur plusieurs octets peuvent être obtenues depuis n'importe quelle position.
+
+## Exemples
+
+### Utilisation de la méthode `getUint8`
+
+```js
+var buffer = new ArrayBuffer(8);
+var dataview = new DataView(buffer);
+dataview.getUint8(1); // 0
+```
+
+## Spécifications
+
+| Spécification                                                                                                            | État                             | Commentaires                                    |
+| ------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ----------------------------------------------- |
+| {{SpecName('Typed Array')}}                                                                                     | {{Spec2('Typed Array')}} | Remplacée dans ECMAScript 2015.                 |
+| {{SpecName('ES2015', '#sec-dataview.prototype.getuint8', 'DataView.prototype.getUint8')}} | {{Spec2('ES2015')}}         | Définition initiale au sein d'un standard ECMA. |
+| {{SpecName('ESDraft', '#sec-dataview.prototype.getuint8', 'DataView.prototype.getUint8')}} | {{Spec2('ESDraft')}}     |                                                 |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.DataView.getUint8")}}
+
+## Voir aussi
+
+- {{jsxref("DataView")}}
+- {{jsxref("ArrayBuffer")}}
diff --git a/files/fr/web/javascript/reference/global_objects/dataview/index.html b/files/fr/web/javascript/reference/global_objects/dataview/index.html
deleted file mode 100644
index 41edfcb904..0000000000
--- a/files/fr/web/javascript/reference/global_objects/dataview/index.html
+++ /dev/null
@@ -1,163 +0,0 @@
----
-title: DataView
-slug: Web/JavaScript/Reference/Global_Objects/DataView
-tags:
-  - Constructor
-  - DataView
-  - JavaScript
-  - Reference
-  - TypedArray
-translation_of: Web/JavaScript/Reference/Global_Objects/DataView
-original_slug: Web/JavaScript/Reference/Objets_globaux/DataView
----
-<div>{{JSRef}}</div>
-
-<p>La vue <strong><code>DataView</code></strong> fournit une interface de bas niveau pour lire et écrire des données de différents types numériques dans un {{jsxref("ArrayBuffer")}}, quel que soit le « <a href="https://fr.wikipedia.org/wiki/Endianness">boutisme</a> » de la plate-forme.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/dataview-constructor.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">new DataView(buffer [, décalageOctets [, longueurOctets]])</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>buffer</code></dt>
- <dd>Un {{jsxref("ArrayBuffer")}} ou {{jsxref("SharedArrayBuffer")}}{{experimental_inline}} existant à utiliser pour la mise en mémoire du nouvel objet <code>DataView</code>.</dd>
- <dt><code>décalageOctets </code>{{optional_inline}}</dt>
- <dd>Le décalage, exprimé en octets, pour trouver le premier octet significatif du buffer à représenter dans la vue. Si ce paramètre n'est pas fourni, la vue commencera au premier octet du buffer.</dd>
- <dt><code>longueurOctets </code>{{optional_inline}}</dt>
- <dd>Le nombre d'éléments dans le tableau d'octets. Si ce paramètre n'est pas fourni, la longueur de la vue correspondra à celle du buffer.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Un nouvel objet <code>DataView</code> représentant le tampon mémoire (<em>buffer</em>) fourni.</p>
-
-<p>L'objet ainsi renvoyé peut être vu comme un interpréteur du tampon mémoire. Cet objet sait comment convertir des nombres afin de lire ou d'écrire des valeurs dans le tampon. C'est la vue qui s'occupe de la gestion des entiers, de la conversion des flottants, du boutisme utilisé et des autres détails de représentation binaire.</p>
-
-<h3 id="Erreurs_renvoyées">Erreurs renvoyées</h3>
-
-<dl>
- <dt><code>{{jsxref("RangeError")}}</code></dt>
- <dd>Renvoyée si les paramètres <code>décalageOctets</code> et <code>longueurOctets</code> dépassent la fin du buffer fourni.</dd>
-</dl>
-
-<p>Ainsi, si la taille du tampon mémoire est de 16 octets, que <code>décalageOctets</code>vaut 8 et que <code>longueurOctets</code> vaut 10, cette exception est levée car la vue résultante dépassera de deux octets la longueur totale du tampon mémoire.</p>
-
-<h2 id="Description">Description</h2>
-
-<h3 id="Le_boutisme_(endianness)">Le boutisme (<em>endianness</em>)</h3>
-
-<p>En utilisant cet objet, vous pouvez détecter le type d'architecture qui exécute votre script, ce qui peut être utile dans certains cas. Voici un fragment de code pour permettre cette détection. Voir {{Glossary("Endianness")}} pour plus d'informations.</p>
-
-<pre class="brush: js">var littleEndian = (function() {
-  var buffer = new ArrayBuffer(2);
-  new DataView(buffer).setInt16(0, 256, true /*littleEndian donc */);
-  // Int16Array utilise le boutisme de la plate-forme
-  return new Int16Array(buffer)[0] === 256;
-})();
-console.log(littleEndian); // true ou false
-</pre>
-
-<h3 id="Gestion_des_valeurs_entières_sur_64_bits">Gestion des valeurs entières sur 64 bits</h3>
-
-<p>JavaScript manipule les nombres comme des valeurs sur 32 bits. Aussi, le moteur ne prend pas en charge la gestion des entiers sur 64 bits et on ne peut donc pas manipuler de telles valeurs avec <code>DataView</code>. Afin de contourner ce problème, on peut implémenter une méthode <code>getUint64()</code> afin d'otbenir une valeur avec une précision allant jusqu'à {{jsxref("Number.MAX_SAFE_INTEGER")}}, ce qui peut être suffisant dans certains cas.</p>
-
-<pre class="brush: js">function getUint64(dataview, byteOffset, littleEndian) {
-  // on décompose la valeur 64 sur bits en deux nombres 32 bits
-  const gauche = dataview.getUint32(byteOffset, littleEndian);
-  const droite = dataview.getUint32(byteOffset + 4, littleEndian);
-
-  // on combine les deux valeurs 32 bits
-  const combinaison = littleEndian ? gauche + 2**32*droite : 2**32*gauche + droite;
-  if(!Number.isSafeInteger(combinaison)){
-    console.warn(combinaison, " dépasse MAX_SAFE_INTEGER : perte de précision !");
-  }
-  return combinaison;
-}</pre>
-
-<p>On peut également créer un objet {{jsxref("BigInt")}} si on veut avoir accès à 64 bits :</p>
-
-<pre class="brush: js">function getUin64BigInt(dataview, byteOffset, littleEndian) {
-  const left = dataview.getUint32(byteOffset, littleEndian);
-  const right = dataview.getUint32(byteOffset, littleEndian);
-
-  const combined = littleEndian ?
-    right.toString(16) + left.toString(16).padStart(8, '0') :
-    left.toString(16) + right.toString(16).padStart(8, '0');
-
-  return BigInt(`0x${combined}`);
-}</pre>
-
-<div class="blockIndicator note">
-<p><strong>Note :</strong> Sur le plan des performances, les grands entiers ({{jsxref("BigInt")}} ont une taille variable, aussi leur manipulation sera nécessairement plus lente que celle des nombres stockés sur 32 bits. Ceci étant écrit, les valeurs natives {{jsxref("BigInt")}} seront plus performantes que les implémentations tierces (bibliothèques, etc.).</p>
-</div>
-
-<h2 id="Propriétés">Propriétés</h2>
-
-<p>Toutes les instances de <code>DataView</code> héritent de {{jsxref("DataView.prototype")}} qui permet d'ajouter des propriétés à l'ensemble des objets <code>DataView</code>.</p>
-
-<p>{{page("fr/Web/JavaScript/Reference/Objets_globaux/DataView/prototype","Propriétés")}}</p>
-
-<h2 id="Méthodes">Méthodes</h2>
-
-<p>{{page('/fr/docs/Web/JavaScript/Reference/Objets_globaux/DataView/prototype','Méthodes')}}</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<pre class="brush: js">var buffer = new ArrayBuffer(16);
-var dv = new DataView(buffer, 0);
-
-dv.setInt16(1, 42);
-dv.getInt16(1); //42
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Typed Array')}}</td>
-   <td>{{Spec2('Typed Array')}}</td>
-   <td>Remplacée par ECMAScript 6</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-dataview-constructor', 'DataView')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td>Définition initiale au sein d'un standard ECMA.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-dataview-constructor', 'DataView')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.DataView")}}</p>
-
-<h3 id="Notes_de_compatibilité">Notes de compatibilité</h3>
-
-<p>A partir de Firefox 40 {{geckoRelease(40)}}, <code>DataView</code> doit êre construit avec l'opérateur {{jsxref("Opérateurs/L_opérateur_new", "new")}}. Si on invoque <code>DataView()</code> sans utiliser <code>new</code>, cela lèvera une exception {{jsxref("TypeError")}}.</p>
-
-<pre class="brush: js example-bad">var dv = DataView(buffer, 0);
-// TypeError: calling a builtin DataView constructor without new is forbidden</pre>
-
-<pre class="brush: js example-good">var dv = new DataView(buffer, 0);</pre>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a class="link-https" href="https://github.com/jDataView/jDataView">jDataView</a> : une bibliothèque JavaScrit qui ajoute des prothèses et des extensions à l'API <code>DataView</code> afin de pouvoir la manipuler au travers des différents navigateurs et de Node.js.</li>
- <li>{{jsxref("ArrayBuffer")}}</li>
- <li>{{jsxref("SharedArrayBuffer")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/dataview/index.md b/files/fr/web/javascript/reference/global_objects/dataview/index.md
new file mode 100644
index 0000000000..d828888f25
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/dataview/index.md
@@ -0,0 +1,146 @@
+---
+title: DataView
+slug: Web/JavaScript/Reference/Global_Objects/DataView
+tags:
+  - Constructor
+  - DataView
+  - JavaScript
+  - Reference
+  - TypedArray
+translation_of: Web/JavaScript/Reference/Global_Objects/DataView
+original_slug: Web/JavaScript/Reference/Objets_globaux/DataView
+---
+{{JSRef}}
+
+La vue **`DataView`** fournit une interface de bas niveau pour lire et écrire des données de différents types numériques dans un {{jsxref("ArrayBuffer")}}, quel que soit le « [boutisme](https://fr.wikipedia.org/wiki/Endianness) » de la plate-forme.
+
+{{EmbedInteractiveExample("pages/js/dataview-constructor.html")}}
+
+## Syntaxe
+
+    new DataView(buffer [, décalageOctets [, longueurOctets]])
+
+### Paramètres
+
+- `buffer`
+  - : Un {{jsxref("ArrayBuffer")}} ou {{jsxref("SharedArrayBuffer")}}{{experimental_inline}} existant à utiliser pour la mise en mémoire du nouvel objet `DataView`.
+- `décalageOctets `{{optional_inline}}
+  - : Le décalage, exprimé en octets, pour trouver le premier octet significatif du buffer à représenter dans la vue. Si ce paramètre n'est pas fourni, la vue commencera au premier octet du buffer.
+- `longueurOctets `{{optional_inline}}
+  - : Le nombre d'éléments dans le tableau d'octets. Si ce paramètre n'est pas fourni, la longueur de la vue correspondra à celle du buffer.
+
+### Valeur de retour
+
+Un nouvel objet `DataView` représentant le tampon mémoire (_buffer_) fourni.
+
+L'objet ainsi renvoyé peut être vu comme un interpréteur du tampon mémoire. Cet objet sait comment convertir des nombres afin de lire ou d'écrire des valeurs dans le tampon. C'est la vue qui s'occupe de la gestion des entiers, de la conversion des flottants, du boutisme utilisé et des autres détails de représentation binaire.
+
+### Erreurs renvoyées
+
+- `{{jsxref("RangeError")}}`
+  - : Renvoyée si les paramètres `décalageOctets` et `longueurOctets` dépassent la fin du buffer fourni.
+
+Ainsi, si la taille du tampon mémoire est de 16 octets, que `décalageOctets`vaut 8 et que `longueurOctets` vaut 10, cette exception est levée car la vue résultante dépassera de deux octets la longueur totale du tampon mémoire.
+
+## Description
+
+### Le boutisme (_endianness_)
+
+En utilisant cet objet, vous pouvez détecter le type d'architecture qui exécute votre script, ce qui peut être utile dans certains cas. Voici un fragment de code pour permettre cette détection. Voir {{Glossary("Endianness")}} pour plus d'informations.
+
+```js
+var littleEndian = (function() {
+  var buffer = new ArrayBuffer(2);
+  new DataView(buffer).setInt16(0, 256, true /*littleEndian donc */);
+  // Int16Array utilise le boutisme de la plate-forme
+  return new Int16Array(buffer)[0] === 256;
+})();
+console.log(littleEndian); // true ou false
+```
+
+### Gestion des valeurs entières sur 64 bits
+
+JavaScript manipule les nombres comme des valeurs sur 32 bits. Aussi, le moteur ne prend pas en charge la gestion des entiers sur 64 bits et on ne peut donc pas manipuler de telles valeurs avec `DataView`. Afin de contourner ce problème, on peut implémenter une méthode `getUint64()` afin d'otbenir une valeur avec une précision allant jusqu'à {{jsxref("Number.MAX_SAFE_INTEGER")}}, ce qui peut être suffisant dans certains cas.
+
+```js
+function getUint64(dataview, byteOffset, littleEndian) {
+  // on décompose la valeur 64 sur bits en deux nombres 32 bits
+  const gauche = dataview.getUint32(byteOffset, littleEndian);
+  const droite = dataview.getUint32(byteOffset + 4, littleEndian);
+
+  // on combine les deux valeurs 32 bits
+  const combinaison = littleEndian ? gauche + 2**32*droite : 2**32*gauche + droite;
+  if(!Number.isSafeInteger(combinaison)){
+    console.warn(combinaison, " dépasse MAX_SAFE_INTEGER : perte de précision !");
+  }
+  return combinaison;
+}
+```
+
+On peut également créer un objet {{jsxref("BigInt")}} si on veut avoir accès à 64 bits :
+
+```js
+function getUin64BigInt(dataview, byteOffset, littleEndian) {
+  const left = dataview.getUint32(byteOffset, littleEndian);
+  const right = dataview.getUint32(byteOffset, littleEndian);
+
+  const combined = littleEndian ?
+    right.toString(16) + left.toString(16).padStart(8, '0') :
+    left.toString(16) + right.toString(16).padStart(8, '0');
+
+  return BigInt(`0x${combined}`);
+}
+```
+
+> **Note :** Sur le plan des performances, les grands entiers ({{jsxref("BigInt")}} ont une taille variable, aussi leur manipulation sera nécessairement plus lente que celle des nombres stockés sur 32 bits. Ceci étant écrit, les valeurs natives {{jsxref("BigInt")}} seront plus performantes que les implémentations tierces (bibliothèques, etc.).
+
+## Propriétés
+
+Toutes les instances de `DataView` héritent de {{jsxref("DataView.prototype")}} qui permet d'ajouter des propriétés à l'ensemble des objets `DataView`.
+
+{{page("fr/Web/JavaScript/Reference/Objets_globaux/DataView/prototype","Propriétés")}}
+
+## Méthodes
+
+{{page('/fr/docs/Web/JavaScript/Reference/Objets_globaux/DataView/prototype','Méthodes')}}
+
+## Exemples
+
+```js
+var buffer = new ArrayBuffer(16);
+var dv = new DataView(buffer, 0);
+
+dv.setInt16(1, 42);
+dv.getInt16(1); //42
+```
+
+## Spécifications
+
+| Spécification                                                                        | État                             | Commentaires                                    |
+| ------------------------------------------------------------------------------------ | -------------------------------- | ----------------------------------------------- |
+| {{SpecName('Typed Array')}}                                                 | {{Spec2('Typed Array')}} | Remplacée par ECMAScript 6                      |
+| {{SpecName('ES6', '#sec-dataview-constructor', 'DataView')}}     | {{Spec2('ES6')}}             | Définition initiale au sein d'un standard ECMA. |
+| {{SpecName('ESDraft', '#sec-dataview-constructor', 'DataView')}} | {{Spec2('ESDraft')}}     |                                                 |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.DataView")}}
+
+### Notes de compatibilité
+
+A partir de Firefox 40 {{geckoRelease(40)}}, `DataView` doit êre construit avec l'opérateur {{jsxref("Opérateurs/L_opérateur_new", "new")}}. Si on invoque `DataView()` sans utiliser `new`, cela lèvera une exception {{jsxref("TypeError")}}.
+
+```js example-bad
+var dv = DataView(buffer, 0);
+// TypeError: calling a builtin DataView constructor without new is forbidden
+```
+
+```js example-good
+var dv = new DataView(buffer, 0);
+```
+
+## Voir aussi
+
+- [jDataView](https://github.com/jDataView/jDataView) : une bibliothèque JavaScrit qui ajoute des prothèses et des extensions à l'API `DataView` afin de pouvoir la manipuler au travers des différents navigateurs et de Node.js.
+- {{jsxref("ArrayBuffer")}}
+- {{jsxref("SharedArrayBuffer")}}
diff --git a/files/fr/web/javascript/reference/global_objects/dataview/setbigint64/index.html b/files/fr/web/javascript/reference/global_objects/dataview/setbigint64/index.html
deleted file mode 100644
index 5db0110c35..0000000000
--- a/files/fr/web/javascript/reference/global_objects/dataview/setbigint64/index.html
+++ /dev/null
@@ -1,81 +0,0 @@
----
-title: DataView.prototype.setBigInt64()
-slug: Web/JavaScript/Reference/Global_Objects/DataView/setBigInt64
-tags:
-  - BigInt
-  - DataView
-  - JavaScript
-  - Méthode
-  - Reference
-  - TypedArrays
-translation_of: Web/JavaScript/Reference/Global_Objects/DataView/setBigInt64
-original_slug: Web/JavaScript/Reference/Objets_globaux/DataView/setBigInt64
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <strong><code>setBigInt64()</code></strong> permet d'enregister un entier signé sur 64 bits (type <em>long long</em> par analogie avec C) à l'octet indiqué par rapport au début de la {{jsxref("DataView")}}.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/dataview-setbigint64.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>dataview</var>.setBigInt64(positionOctet, value [, littleEndian])</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>positionOctet</code></dt>
- <dd>La position, exprimée en numéro d'octet, à partir du début de la vue à laquelle enregistrer la donnée.</dd>
- <dt><code>valeur</code></dt>
- <dd>La valeur à enregistrer</dd>
- <dt><code>littleEndian</code></dt>
- <dd>{{optional_inline}} Indique si la donnée sur 64 bits est enregistrée {{Glossary("Endianness", "dans l'ordre des octets de poids faibles")}}. Si ce paramètre vaut <code>false</code> ou <code>undefined</code>, l'ordre sera celui des octets de poids forts.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>{{jsxref("undefined")}}.</p>
-
-<h3 id="Erreurs_renvoyées">Erreurs renvoyées</h3>
-
-<dl>
- <dt>{{jsxref("RangeError")}}</dt>
- <dd>Renvoyée si <code>positionOctet</code> est tel que l'enregistrement sera fait en dehors de la vue.</dd>
-</dl>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Utilisation_de_la_méthode_setBigInt64()">Utilisation de la méthode <code>setBigInt64()</code></h3>
-
-<pre class="brush:js">var buffer = new ArrayBuffer(8);
-var dataview = new DataView(buffer);
-dataview.setBigInt64(0, 3n);
-dataview.getInt32(0); // 3n
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-  </tr>
-  <tr>
-   <td><a href="https://tc39.github.io/proposal-bigint/#sec-dataview.prototype.setbigint64">Proposition pour <code>DataView.prototype.setBigInt64()</code></a></td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.DataView.setBigInt64")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("DataView")}}</li>
- <li>{{jsxref("ArrayBuffer")}}</li>
- <li>{{jsxref("BigInt")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/dataview/setbigint64/index.md b/files/fr/web/javascript/reference/global_objects/dataview/setbigint64/index.md
new file mode 100644
index 0000000000..8581c06772
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/dataview/setbigint64/index.md
@@ -0,0 +1,67 @@
+---
+title: DataView.prototype.setBigInt64()
+slug: Web/JavaScript/Reference/Global_Objects/DataView/setBigInt64
+tags:
+  - BigInt
+  - DataView
+  - JavaScript
+  - Méthode
+  - Reference
+  - TypedArrays
+translation_of: Web/JavaScript/Reference/Global_Objects/DataView/setBigInt64
+original_slug: Web/JavaScript/Reference/Objets_globaux/DataView/setBigInt64
+---
+{{JSRef}}
+
+La méthode **`setBigInt64()`** permet d'enregister un entier signé sur 64 bits (type _long long_ par analogie avec C) à l'octet indiqué par rapport au début de la {{jsxref("DataView")}}.
+
+{{EmbedInteractiveExample("pages/js/dataview-setbigint64.html")}}
+
+## Syntaxe
+
+    dataview.setBigInt64(positionOctet, value [, littleEndian])
+
+### Paramètres
+
+- `positionOctet`
+  - : La position, exprimée en numéro d'octet, à partir du début de la vue à laquelle enregistrer la donnée.
+- `valeur`
+  - : La valeur à enregistrer
+- `littleEndian`
+  - : {{optional_inline}} Indique si la donnée sur 64 bits est enregistrée {{Glossary("Endianness", "dans l'ordre des octets de poids faibles")}}. Si ce paramètre vaut `false` ou `undefined`, l'ordre sera celui des octets de poids forts.
+
+### Valeur de retour
+
+{{jsxref("undefined")}}.
+
+### Erreurs renvoyées
+
+- {{jsxref("RangeError")}}
+  - : Renvoyée si `positionOctet` est tel que l'enregistrement sera fait en dehors de la vue.
+
+## Exemples
+
+### Utilisation de la méthode `setBigInt64()`
+
+```js
+var buffer = new ArrayBuffer(8);
+var dataview = new DataView(buffer);
+dataview.setBigInt64(0, 3n);
+dataview.getInt32(0); // 3n
+```
+
+## Spécifications
+
+| Spécification                                                                                                                     | État |
+| --------------------------------------------------------------------------------------------------------------------------------- | ---- |
+| [Proposition pour `DataView.prototype.setBigInt64()`](https://tc39.github.io/proposal-bigint/#sec-dataview.prototype.setbigint64) |      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.DataView.setBigInt64")}}
+
+## Voir aussi
+
+- {{jsxref("DataView")}}
+- {{jsxref("ArrayBuffer")}}
+- {{jsxref("BigInt")}}
diff --git a/files/fr/web/javascript/reference/global_objects/dataview/setbiguint64/index.html b/files/fr/web/javascript/reference/global_objects/dataview/setbiguint64/index.html
deleted file mode 100644
index b13aaff413..0000000000
--- a/files/fr/web/javascript/reference/global_objects/dataview/setbiguint64/index.html
+++ /dev/null
@@ -1,82 +0,0 @@
----
-title: DataView.prototype.setBigUint64()
-slug: Web/JavaScript/Reference/Global_Objects/DataView/setBigUint64
-tags:
-  - BigInt
-  - DataView
-  - JavaScript
-  - Méthode
-  - Prototype
-  - Reference
-  - TypedArrays
-translation_of: Web/JavaScript/Reference/Global_Objects/DataView/setBigUint64
-original_slug: Web/JavaScript/Reference/Objets_globaux/DataView/setBigUint64
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <strong><code>setBigUint64()</code></strong> permet d'enregister un entier non-signé sur 64 bits (type <em>unsigned long long</em> par analogie avec C) à l'octet indiqué par rapport au début de la {{jsxref("DataView")}}.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/dataview-setbiguint64.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>dataview</var>.setBigUint64(positionOctet, value [, littleEndian])</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>positionOctet</code></dt>
- <dd>La position, exprimée en nombre d'octets, à partir du début de la vue à laquelle enregistrer la donnée.</dd>
- <dt><code>valeur</code></dt>
- <dd>La valeur à enregistrer</dd>
- <dt><code>littleEndian</code></dt>
- <dd>{{optional_inline}} Indique si la donnée sur 64 bits est enregistrée {{Glossary("Endianness", "dans l'ordre des octets de poids faibles")}}. Si ce paramètre vaut <code>false</code> ou <code>undefined</code>, l'ordre sera celui des octets de poids forts.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>{{jsxref("undefined")}}.</p>
-
-<h3 id="Erreurs_renvoyées">Erreurs renvoyées</h3>
-
-<dl>
- <dt>{{jsxref("RangeError")}}</dt>
- <dd>Renvoyée si <code>positionOctet</code> est tel que l'enregistrement sera fait en dehors de la vue.</dd>
-</dl>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Utilisation_de_la_méthode_setBigUint64()">Utilisation de la méthode <code>setBigUint64()</code></h3>
-
-<pre class="brush:js">var buffer = new ArrayBuffer(8);
-var dataview = new DataView(buffer);
-dataview.setBigUint64(0, 3n);
-dataview.getInt32(0); // 3n
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-  </tr>
-  <tr>
-   <td><a href="https://tc39.github.io/proposal-bigint/#sec-dataview.prototype.setBigUint64">Proposition pour <code>DataView.prototype.setBigUint64()</code></a></td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.DataView.setBigUint64")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("DataView")}}</li>
- <li>{{jsxref("ArrayBuffer")}}</li>
- <li>{{jsxref("BigInt")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/dataview/setbiguint64/index.md b/files/fr/web/javascript/reference/global_objects/dataview/setbiguint64/index.md
new file mode 100644
index 0000000000..a55fe3d40a
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/dataview/setbiguint64/index.md
@@ -0,0 +1,68 @@
+---
+title: DataView.prototype.setBigUint64()
+slug: Web/JavaScript/Reference/Global_Objects/DataView/setBigUint64
+tags:
+  - BigInt
+  - DataView
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - TypedArrays
+translation_of: Web/JavaScript/Reference/Global_Objects/DataView/setBigUint64
+original_slug: Web/JavaScript/Reference/Objets_globaux/DataView/setBigUint64
+---
+{{JSRef}}
+
+La méthode **`setBigUint64()`** permet d'enregister un entier non-signé sur 64 bits (type _unsigned long long_ par analogie avec C) à l'octet indiqué par rapport au début de la {{jsxref("DataView")}}.
+
+{{EmbedInteractiveExample("pages/js/dataview-setbiguint64.html")}}
+
+## Syntaxe
+
+    dataview.setBigUint64(positionOctet, value [, littleEndian])
+
+### Paramètres
+
+- `positionOctet`
+  - : La position, exprimée en nombre d'octets, à partir du début de la vue à laquelle enregistrer la donnée.
+- `valeur`
+  - : La valeur à enregistrer
+- `littleEndian`
+  - : {{optional_inline}} Indique si la donnée sur 64 bits est enregistrée {{Glossary("Endianness", "dans l'ordre des octets de poids faibles")}}. Si ce paramètre vaut `false` ou `undefined`, l'ordre sera celui des octets de poids forts.
+
+### Valeur de retour
+
+{{jsxref("undefined")}}.
+
+### Erreurs renvoyées
+
+- {{jsxref("RangeError")}}
+  - : Renvoyée si `positionOctet` est tel que l'enregistrement sera fait en dehors de la vue.
+
+## Exemples
+
+### Utilisation de la méthode `setBigUint64()`
+
+```js
+var buffer = new ArrayBuffer(8);
+var dataview = new DataView(buffer);
+dataview.setBigUint64(0, 3n);
+dataview.getInt32(0); // 3n
+```
+
+## Spécifications
+
+| Spécification                                                                                                                       | État |
+| ----------------------------------------------------------------------------------------------------------------------------------- | ---- |
+| [Proposition pour `DataView.prototype.setBigUint64()`](https://tc39.github.io/proposal-bigint/#sec-dataview.prototype.setBigUint64) |      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.DataView.setBigUint64")}}
+
+## Voir aussi
+
+- {{jsxref("DataView")}}
+- {{jsxref("ArrayBuffer")}}
+- {{jsxref("BigInt")}}
diff --git a/files/fr/web/javascript/reference/global_objects/dataview/setfloat32/index.html b/files/fr/web/javascript/reference/global_objects/dataview/setfloat32/index.html
deleted file mode 100644
index a3862d3e4d..0000000000
--- a/files/fr/web/javascript/reference/global_objects/dataview/setfloat32/index.html
+++ /dev/null
@@ -1,92 +0,0 @@
----
-title: DataView.prototype.setFloat32()
-slug: Web/JavaScript/Reference/Global_Objects/DataView/setFloat32
-tags:
-  - DataView
-  - JavaScript
-  - Méthode
-  - Prototype
-  - Reference
-  - TypedArrays
-translation_of: Web/JavaScript/Reference/Global_Objects/DataView/setFloat32
-original_slug: Web/JavaScript/Reference/Objets_globaux/DataView/setFloat32
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <strong><code>setFloat32()</code></strong> permet d'enregistrer un nombre flottant signé sur 32 bits (type <em>float</em> par analogie avec C) à l'octet indiqué par rapport au début de la {{jsxref("DataView")}}.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/dataview-setfloat32.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>dataview</var>.setFloat32(positionOctet, valeur [, littleEndian])</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>positionOctet</code></dt>
- <dd>La position, exprimée en numéro d'octet, à partir du début de la vue à laquelle enregistrer la donnée.</dd>
- <dt><code>valeur</code></dt>
- <dd>La valeur à enregistrer</dd>
- <dt><code>littleEndian</code></dt>
- <dd>{{optional_inline}} Indique si la donnée sur 32 bits est enregistrée {{Glossary("Endianness", "dans l'ordre des octets de poids faibles")}}. Si ce paramètre vaut <code>false</code> ou <code>undefined</code>, l'ordre sera celui des octets de poids forts.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>{{jsxref("undefined")}}.</p>
-
-<h3 id="Erreurs_renvoyées">Erreurs renvoyées</h3>
-
-<dl>
- <dt>{{jsxref("RangeError")}}</dt>
- <dd>Renvoyée si <code>positionOctet</code> est tel que l'enregistrement sera fait en dehors de la vue.</dd>
-</dl>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Utilisation_de_la_méthode_setFloat32">Utilisation de la méthode <code>setFloat32</code></h3>
-
-<pre class="brush:js">var buffer = new ArrayBuffer(8);
-var dataview = new DataView(buffer);
-dataview.setFloat32(1, 3);
-dataview.getFloat32(1); // 3
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Typed Array')}}</td>
-   <td>{{Spec2('Typed Array')}}</td>
-   <td>Remplacée dans ECMAScript 2015.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-dataview.prototype.setfloat32', 'DataView.prototype.setFloat32')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td>Définition initiale au sein d'un standard ECMA.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-dataview.prototype.setfloat32', 'DataView.prototype.setFloat32')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.DataView.setFloat32")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("DataView")}}</li>
- <li>{{jsxref("ArrayBuffer")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/dataview/setfloat32/index.md b/files/fr/web/javascript/reference/global_objects/dataview/setfloat32/index.md
new file mode 100644
index 0000000000..2ab89de9f2
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/dataview/setfloat32/index.md
@@ -0,0 +1,68 @@
+---
+title: DataView.prototype.setFloat32()
+slug: Web/JavaScript/Reference/Global_Objects/DataView/setFloat32
+tags:
+  - DataView
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - TypedArrays
+translation_of: Web/JavaScript/Reference/Global_Objects/DataView/setFloat32
+original_slug: Web/JavaScript/Reference/Objets_globaux/DataView/setFloat32
+---
+{{JSRef}}
+
+La méthode **`setFloat32()`** permet d'enregistrer un nombre flottant signé sur 32 bits (type _float_ par analogie avec C) à l'octet indiqué par rapport au début de la {{jsxref("DataView")}}.
+
+{{EmbedInteractiveExample("pages/js/dataview-setfloat32.html")}}
+
+## Syntaxe
+
+    dataview.setFloat32(positionOctet, valeur [, littleEndian])
+
+### Paramètres
+
+- `positionOctet`
+  - : La position, exprimée en numéro d'octet, à partir du début de la vue à laquelle enregistrer la donnée.
+- `valeur`
+  - : La valeur à enregistrer
+- `littleEndian`
+  - : {{optional_inline}} Indique si la donnée sur 32 bits est enregistrée {{Glossary("Endianness", "dans l'ordre des octets de poids faibles")}}. Si ce paramètre vaut `false` ou `undefined`, l'ordre sera celui des octets de poids forts.
+
+### Valeur de retour
+
+{{jsxref("undefined")}}.
+
+### Erreurs renvoyées
+
+- {{jsxref("RangeError")}}
+  - : Renvoyée si `positionOctet` est tel que l'enregistrement sera fait en dehors de la vue.
+
+## Exemples
+
+### Utilisation de la méthode `setFloat32`
+
+```js
+var buffer = new ArrayBuffer(8);
+var dataview = new DataView(buffer);
+dataview.setFloat32(1, 3);
+dataview.getFloat32(1); // 3
+```
+
+## Spécifications
+
+| Spécification                                                                                                                | État                             | Commentaires                                    |
+| ---------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------------------------------------------- |
+| {{SpecName('Typed Array')}}                                                                                         | {{Spec2('Typed Array')}} | Remplacée dans ECMAScript 2015.                 |
+| {{SpecName('ES2015', '#sec-dataview.prototype.setfloat32', 'DataView.prototype.setFloat32')}} | {{Spec2('ES2015')}}         | Définition initiale au sein d'un standard ECMA. |
+| {{SpecName('ESDraft', '#sec-dataview.prototype.setfloat32', 'DataView.prototype.setFloat32')}} | {{Spec2('ESDraft')}}     |                                                 |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.DataView.setFloat32")}}
+
+## Voir aussi
+
+- {{jsxref("DataView")}}
+- {{jsxref("ArrayBuffer")}}
diff --git a/files/fr/web/javascript/reference/global_objects/dataview/setfloat64/index.html b/files/fr/web/javascript/reference/global_objects/dataview/setfloat64/index.html
deleted file mode 100644
index 0b1d62773b..0000000000
--- a/files/fr/web/javascript/reference/global_objects/dataview/setfloat64/index.html
+++ /dev/null
@@ -1,92 +0,0 @@
----
-title: DataView.prototype.setFloat64()
-slug: Web/JavaScript/Reference/Global_Objects/DataView/setFloat64
-tags:
-  - DataView
-  - JavaScript
-  - Méthode
-  - Prototype
-  - Reference
-  - TypedArrays
-translation_of: Web/JavaScript/Reference/Global_Objects/DataView/setFloat64
-original_slug: Web/JavaScript/Reference/Objets_globaux/DataView/setFloat64
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <strong><code>setFloat64()</code></strong> permet d'enregistrer un nombre flottant signé sur 64 bits (type <em>double</em> par analogie avec C) à l'octet indiqué par rapport au début de la {{jsxref("DataView")}}.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/dataview-setfloat64.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>dataview</var>.setFloat64(positionOctet, value [, littleEndian])</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>positionOctet</code></dt>
- <dd>La position, exprimée en numéro d'octet, à partir du début de la vue à laquelle enregistrer la donnée.</dd>
- <dt><code>valeur</code></dt>
- <dd>La valeur à enregistrer</dd>
- <dt><code>littleEndian</code></dt>
- <dd>{{optional_inline}} Indique si la donnée sur 64 bits est enregistrée {{Glossary("Endianness", "dans l'ordre des octets de poids faibles")}}. Si ce paramètre vaut <code>false</code> ou <code>undefined</code>, l'ordre sera celui des octets de poids forts.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>{{jsxref("undefined")}}.</p>
-
-<h3 id="Erreurs_renvoyées">Erreurs renvoyées</h3>
-
-<dl>
- <dt>{{jsxref("RangeError")}}</dt>
- <dd>Renvoyée si <code>positionOctet</code> est tel que l'enregistrement sera fait en dehors de la vue.</dd>
-</dl>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Utilisation_de_la_méthode_setFloat64">Utilisation de la méthode <code>setFloat64</code></h3>
-
-<pre class="brush:js">var buffer = new ArrayBuffer(8);
-var dataview = new DataView(buffer);
-dataview.setFloat64(0, 3);
-dataview.getFloat64(0); // 3
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Typed Array')}}</td>
-   <td>{{Spec2('Typed Array')}}</td>
-   <td>Remplacée dans ECMAScript 2015.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-dataview.prototype.setfloat64', 'DataView.prototype.setFloat64')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td>Définition initiale au sein d'un standard ECMA.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-dataview.prototype.setfloat64', 'DataView.prototype.setFloat64')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.DataView.setFloat64")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("DataView")}}</li>
- <li>{{jsxref("ArrayBuffer")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/dataview/setfloat64/index.md b/files/fr/web/javascript/reference/global_objects/dataview/setfloat64/index.md
new file mode 100644
index 0000000000..c374e3732b
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/dataview/setfloat64/index.md
@@ -0,0 +1,68 @@
+---
+title: DataView.prototype.setFloat64()
+slug: Web/JavaScript/Reference/Global_Objects/DataView/setFloat64
+tags:
+  - DataView
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - TypedArrays
+translation_of: Web/JavaScript/Reference/Global_Objects/DataView/setFloat64
+original_slug: Web/JavaScript/Reference/Objets_globaux/DataView/setFloat64
+---
+{{JSRef}}
+
+La méthode **`setFloat64()`** permet d'enregistrer un nombre flottant signé sur 64 bits (type _double_ par analogie avec C) à l'octet indiqué par rapport au début de la {{jsxref("DataView")}}.
+
+{{EmbedInteractiveExample("pages/js/dataview-setfloat64.html")}}
+
+## Syntaxe
+
+    dataview.setFloat64(positionOctet, value [, littleEndian])
+
+### Paramètres
+
+- `positionOctet`
+  - : La position, exprimée en numéro d'octet, à partir du début de la vue à laquelle enregistrer la donnée.
+- `valeur`
+  - : La valeur à enregistrer
+- `littleEndian`
+  - : {{optional_inline}} Indique si la donnée sur 64 bits est enregistrée {{Glossary("Endianness", "dans l'ordre des octets de poids faibles")}}. Si ce paramètre vaut `false` ou `undefined`, l'ordre sera celui des octets de poids forts.
+
+### Valeur de retour
+
+{{jsxref("undefined")}}.
+
+### Erreurs renvoyées
+
+- {{jsxref("RangeError")}}
+  - : Renvoyée si `positionOctet` est tel que l'enregistrement sera fait en dehors de la vue.
+
+## Exemples
+
+### Utilisation de la méthode `setFloat64`
+
+```js
+var buffer = new ArrayBuffer(8);
+var dataview = new DataView(buffer);
+dataview.setFloat64(0, 3);
+dataview.getFloat64(0); // 3
+```
+
+## Spécifications
+
+| Spécification                                                                                                                | État                             | Commentaires                                    |
+| ---------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------------------------------------------- |
+| {{SpecName('Typed Array')}}                                                                                         | {{Spec2('Typed Array')}} | Remplacée dans ECMAScript 2015.                 |
+| {{SpecName('ES2015', '#sec-dataview.prototype.setfloat64', 'DataView.prototype.setFloat64')}} | {{Spec2('ES2015')}}         | Définition initiale au sein d'un standard ECMA. |
+| {{SpecName('ESDraft', '#sec-dataview.prototype.setfloat64', 'DataView.prototype.setFloat64')}} | {{Spec2('ESDraft')}}     |                                                 |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.DataView.setFloat64")}}
+
+## Voir aussi
+
+- {{jsxref("DataView")}}
+- {{jsxref("ArrayBuffer")}}
diff --git a/files/fr/web/javascript/reference/global_objects/dataview/setint16/index.html b/files/fr/web/javascript/reference/global_objects/dataview/setint16/index.html
deleted file mode 100644
index b275f78339..0000000000
--- a/files/fr/web/javascript/reference/global_objects/dataview/setint16/index.html
+++ /dev/null
@@ -1,92 +0,0 @@
----
-title: DataView.prototype.setInt16()
-slug: Web/JavaScript/Reference/Global_Objects/DataView/setInt16
-tags:
-  - DataView
-  - JavaScript
-  - Méthode
-  - Prototype
-  - Reference
-  - TypedArrays
-translation_of: Web/JavaScript/Reference/Global_Objects/DataView/setInt16
-original_slug: Web/JavaScript/Reference/Objets_globaux/DataView/setInt16
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <strong><code>setInt16()</code></strong> permet d'enregister un entier signé sur 16 bits (type short par analogie avec C) à l'octet indiqué par rapport au début de la {{jsxref("DataView")}}.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/dataview-setint16.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>dataview</var>.setInt16(positionOctet, value [, littleEndian])</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>positionOctet</code></dt>
- <dd>La position, exprimée en numéro d'octet, à partir du début de la vue à laquelle enregistrer la donnée.</dd>
- <dt><code>valeur</code></dt>
- <dd>La valeur à enregistrer</dd>
- <dt><code>littleEndian</code></dt>
- <dd>{{optional_inline}} Indique si la donnée sur 16 bits est enregistrée {{Glossary("Endianness", "dans l'ordre des octets de poids faibles")}}. Si ce paramètre vaut <code>false</code> ou <code>undefined</code>, l'ordre sera celui des octets de poids forts.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>{{jsxref("undefined")}}.</p>
-
-<h3 id="Erreurs_renvoyées">Erreurs renvoyées</h3>
-
-<dl>
- <dt>{{jsxref("RangeError")}}</dt>
- <dd>Renvoyée si <code>positionOctet</code> est tel que l'enregistrement sera fait en dehors de la vue.</dd>
-</dl>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Utilisation_de_la_méthode_setInt16">Utilisation de la méthode <code>setInt16</code></h3>
-
-<pre class="brush:js">var buffer = new ArrayBuffer(8);
-var dataview = new DataView(buffer);
-dataview.setInt16(1, 3);
-dataview.getInt16(1); // 3
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Typed Array')}}</td>
-   <td>{{Spec2('Typed Array')}}</td>
-   <td>Remplacée par ECMAScript 2015 (ES6).</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-dataview.prototype.setint16', 'DataView.prototype.setInt16')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td>Définition initiale au sein d'un standard ECMA.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-dataview.prototype.setint16', 'DataView.prototype.setInt16')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.DataView.setInt16")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("DataView")}}</li>
- <li>{{jsxref("ArrayBuffer")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/dataview/setint16/index.md b/files/fr/web/javascript/reference/global_objects/dataview/setint16/index.md
new file mode 100644
index 0000000000..60e26fd516
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/dataview/setint16/index.md
@@ -0,0 +1,68 @@
+---
+title: DataView.prototype.setInt16()
+slug: Web/JavaScript/Reference/Global_Objects/DataView/setInt16
+tags:
+  - DataView
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - TypedArrays
+translation_of: Web/JavaScript/Reference/Global_Objects/DataView/setInt16
+original_slug: Web/JavaScript/Reference/Objets_globaux/DataView/setInt16
+---
+{{JSRef}}
+
+La méthode **`setInt16()`** permet d'enregister un entier signé sur 16 bits (type short par analogie avec C) à l'octet indiqué par rapport au début de la {{jsxref("DataView")}}.
+
+{{EmbedInteractiveExample("pages/js/dataview-setint16.html")}}
+
+## Syntaxe
+
+    dataview.setInt16(positionOctet, value [, littleEndian])
+
+### Paramètres
+
+- `positionOctet`
+  - : La position, exprimée en numéro d'octet, à partir du début de la vue à laquelle enregistrer la donnée.
+- `valeur`
+  - : La valeur à enregistrer
+- `littleEndian`
+  - : {{optional_inline}} Indique si la donnée sur 16 bits est enregistrée {{Glossary("Endianness", "dans l'ordre des octets de poids faibles")}}. Si ce paramètre vaut `false` ou `undefined`, l'ordre sera celui des octets de poids forts.
+
+### Valeur de retour
+
+{{jsxref("undefined")}}.
+
+### Erreurs renvoyées
+
+- {{jsxref("RangeError")}}
+  - : Renvoyée si `positionOctet` est tel que l'enregistrement sera fait en dehors de la vue.
+
+## Exemples
+
+### Utilisation de la méthode `setInt16`
+
+```js
+var buffer = new ArrayBuffer(8);
+var dataview = new DataView(buffer);
+dataview.setInt16(1, 3);
+dataview.getInt16(1); // 3
+```
+
+## Spécifications
+
+| Spécification                                                                                                            | État                             | Commentaires                                    |
+| ------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ----------------------------------------------- |
+| {{SpecName('Typed Array')}}                                                                                     | {{Spec2('Typed Array')}} | Remplacée par ECMAScript 2015 (ES6).            |
+| {{SpecName('ES2015', '#sec-dataview.prototype.setint16', 'DataView.prototype.setInt16')}} | {{Spec2('ES2015')}}         | Définition initiale au sein d'un standard ECMA. |
+| {{SpecName('ESDraft', '#sec-dataview.prototype.setint16', 'DataView.prototype.setInt16')}} | {{Spec2('ESDraft')}}     |                                                 |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.DataView.setInt16")}}
+
+## Voir aussi
+
+- {{jsxref("DataView")}}
+- {{jsxref("ArrayBuffer")}}
diff --git a/files/fr/web/javascript/reference/global_objects/dataview/setint32/index.html b/files/fr/web/javascript/reference/global_objects/dataview/setint32/index.html
deleted file mode 100644
index 21e51b28dd..0000000000
--- a/files/fr/web/javascript/reference/global_objects/dataview/setint32/index.html
+++ /dev/null
@@ -1,92 +0,0 @@
----
-title: DataView.prototype.setInt32()
-slug: Web/JavaScript/Reference/Global_Objects/DataView/setInt32
-tags:
-  - DataView
-  - JavaScript
-  - Méthode
-  - Prototype
-  - Reference
-  - TypedArrays
-translation_of: Web/JavaScript/Reference/Global_Objects/DataView/setInt32
-original_slug: Web/JavaScript/Reference/Objets_globaux/DataView/setInt32
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <strong><code>setInt32()</code></strong> permet d'enregister un entier signé sur 32 bits (type <em>long</em> par analogie avec C) à l'octet indiqué par rapport au début de la {{jsxref("DataView")}}.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/dataview-setint32.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>dataview</var>.setInt32(positionOctet, value [, littleEndian])</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>positionOctet</code></dt>
- <dd>La position, exprimée en numéro d'octet, à partir du début de la vue à laquelle enregistrer la donnée.</dd>
- <dt><code>valeur</code></dt>
- <dd>La valeur à enregistrer</dd>
- <dt><code>littleEndian</code></dt>
- <dd>{{optional_inline}} Indique si la donnée sur 32 bits est enregistrée {{Glossary("Endianness", "dans l'ordre des octets de poids faibles")}}. Si ce paramètre vaut <code>false</code> ou <code>undefined</code>, l'ordre sera celui des octets de poids forts.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>{{jsxref("undefined")}}.</p>
-
-<h3 id="Erreurs_renvoyées">Erreurs renvoyées</h3>
-
-<dl>
- <dt>{{jsxref("RangeError")}}</dt>
- <dd>Renvoyée si <code>positionOctet</code> est tel que l'enregistrement sera fait en dehors de la vue.</dd>
-</dl>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Utilisation_de_la_méthode_setInt32">Utilisation de la méthode <code>setInt32</code></h3>
-
-<pre class="brush:js">var buffer = new ArrayBuffer(8);
-var dataview = new DataView(buffer);
-dataview.setInt32(1, 3);
-dataview.getInt32(1); // 3
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Typed Array')}}</td>
-   <td>{{Spec2('Typed Array')}}</td>
-   <td>Remplacée par ECMAScript 2015.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-dataview.prototype.setint32', 'DataView.prototype.setInt32')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td>Définition initiale au sein d'un standard ECMA.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-dataview.prototype.setint32', 'DataView.prototype.setInt32')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.DataView.setInt32")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("DataView")}}</li>
- <li>{{jsxref("ArrayBuffer")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/dataview/setint32/index.md b/files/fr/web/javascript/reference/global_objects/dataview/setint32/index.md
new file mode 100644
index 0000000000..65e8802da3
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/dataview/setint32/index.md
@@ -0,0 +1,68 @@
+---
+title: DataView.prototype.setInt32()
+slug: Web/JavaScript/Reference/Global_Objects/DataView/setInt32
+tags:
+  - DataView
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - TypedArrays
+translation_of: Web/JavaScript/Reference/Global_Objects/DataView/setInt32
+original_slug: Web/JavaScript/Reference/Objets_globaux/DataView/setInt32
+---
+{{JSRef}}
+
+La méthode **`setInt32()`** permet d'enregister un entier signé sur 32 bits (type _long_ par analogie avec C) à l'octet indiqué par rapport au début de la {{jsxref("DataView")}}.
+
+{{EmbedInteractiveExample("pages/js/dataview-setint32.html")}}
+
+## Syntaxe
+
+    dataview.setInt32(positionOctet, value [, littleEndian])
+
+### Paramètres
+
+- `positionOctet`
+  - : La position, exprimée en numéro d'octet, à partir du début de la vue à laquelle enregistrer la donnée.
+- `valeur`
+  - : La valeur à enregistrer
+- `littleEndian`
+  - : {{optional_inline}} Indique si la donnée sur 32 bits est enregistrée {{Glossary("Endianness", "dans l'ordre des octets de poids faibles")}}. Si ce paramètre vaut `false` ou `undefined`, l'ordre sera celui des octets de poids forts.
+
+### Valeur de retour
+
+{{jsxref("undefined")}}.
+
+### Erreurs renvoyées
+
+- {{jsxref("RangeError")}}
+  - : Renvoyée si `positionOctet` est tel que l'enregistrement sera fait en dehors de la vue.
+
+## Exemples
+
+### Utilisation de la méthode `setInt32`
+
+```js
+var buffer = new ArrayBuffer(8);
+var dataview = new DataView(buffer);
+dataview.setInt32(1, 3);
+dataview.getInt32(1); // 3
+```
+
+## Spécifications
+
+| Spécification                                                                                                            | État                             | Commentaires                                    |
+| ------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ----------------------------------------------- |
+| {{SpecName('Typed Array')}}                                                                                     | {{Spec2('Typed Array')}} | Remplacée par ECMAScript 2015.                  |
+| {{SpecName('ES2015', '#sec-dataview.prototype.setint32', 'DataView.prototype.setInt32')}} | {{Spec2('ES2015')}}         | Définition initiale au sein d'un standard ECMA. |
+| {{SpecName('ESDraft', '#sec-dataview.prototype.setint32', 'DataView.prototype.setInt32')}} | {{Spec2('ESDraft')}}     |                                                 |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.DataView.setInt32")}}
+
+## Voir aussi
+
+- {{jsxref("DataView")}}
+- {{jsxref("ArrayBuffer")}}
diff --git a/files/fr/web/javascript/reference/global_objects/dataview/setint8/index.html b/files/fr/web/javascript/reference/global_objects/dataview/setint8/index.html
deleted file mode 100644
index f088ea3247..0000000000
--- a/files/fr/web/javascript/reference/global_objects/dataview/setint8/index.html
+++ /dev/null
@@ -1,92 +0,0 @@
----
-title: DataView.prototype.setInt8()
-slug: Web/JavaScript/Reference/Global_Objects/DataView/setInt8
-tags:
-  - DataView
-  - JavaScript
-  - Méthode
-  - Prototype
-  - Reference
-  - TypedArrays
-translation_of: Web/JavaScript/Reference/Global_Objects/DataView/setInt8
-original_slug: Web/JavaScript/Reference/Objets_globaux/DataView/setInt8
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <strong><code>setInt8()</code></strong> permet d'enregister un entier signé sur 8 bits à l'octet indiqué par rapport au début de la {{jsxref("DataView")}}.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/dataview-setint8.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>dataview</var>.setInt8(positionOctet, valeur)</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>positionOctet</code></dt>
- <dd>La position, exprimée en numéro d'octet, à partir du début de la vue à laquelle enregistrer la donnée.</dd>
- <dt><code>valeur</code></dt>
- <dd>La valeur à enregistrer.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>{{jsxref("undefined")}}.</p>
-
-<h3 id="Erreurs_renvoyées">Erreurs renvoyées</h3>
-
-<dl>
- <dt>{{jsxref("RangeError")}}</dt>
- <dd>Renvoyée si <code>positionOctet</code> est tel que l'enregistrement sera fait en dehors de la vue.</dd>
-</dl>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Utilisation_de_la_méthode_setInt8">Utilisation de la méthode <code>setInt8</code></h3>
-
-<pre class="brush:js">var buffer = new ArrayBuffer(8);
-var dataview = new DataView(buffer);
-dataview.setInt8(1, 3);
-dataview.getInt8(1); // 3
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Typed Array')}}</td>
-   <td>{{Spec2('Typed Array')}}</td>
-   <td>Remplacée dans ECMAScript 2015.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-dataview.prototype.setint8', 'DataView.prototype.setInt8')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td>Définition initiale au sein d'un standard ECMA.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-dataview.prototype.setint8', 'DataView.prototype.setInt8')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-
-
-<p>{{Compat("javascript.builtins.DataView.setInt8")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("DataView")}}</li>
- <li>{{jsxref("ArrayBuffer")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/dataview/setint8/index.md b/files/fr/web/javascript/reference/global_objects/dataview/setint8/index.md
new file mode 100644
index 0000000000..80f169d855
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/dataview/setint8/index.md
@@ -0,0 +1,66 @@
+---
+title: DataView.prototype.setInt8()
+slug: Web/JavaScript/Reference/Global_Objects/DataView/setInt8
+tags:
+  - DataView
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - TypedArrays
+translation_of: Web/JavaScript/Reference/Global_Objects/DataView/setInt8
+original_slug: Web/JavaScript/Reference/Objets_globaux/DataView/setInt8
+---
+{{JSRef}}
+
+La méthode **`setInt8()`** permet d'enregister un entier signé sur 8 bits à l'octet indiqué par rapport au début de la {{jsxref("DataView")}}.
+
+{{EmbedInteractiveExample("pages/js/dataview-setint8.html")}}
+
+## Syntaxe
+
+    dataview.setInt8(positionOctet, valeur)
+
+### Paramètres
+
+- `positionOctet`
+  - : La position, exprimée en numéro d'octet, à partir du début de la vue à laquelle enregistrer la donnée.
+- `valeur`
+  - : La valeur à enregistrer.
+
+### Valeur de retour
+
+{{jsxref("undefined")}}.
+
+### Erreurs renvoyées
+
+- {{jsxref("RangeError")}}
+  - : Renvoyée si `positionOctet` est tel que l'enregistrement sera fait en dehors de la vue.
+
+## Exemples
+
+### Utilisation de la méthode `setInt8`
+
+```js
+var buffer = new ArrayBuffer(8);
+var dataview = new DataView(buffer);
+dataview.setInt8(1, 3);
+dataview.getInt8(1); // 3
+```
+
+## Spécifications
+
+| Spécification                                                                                                        | État                             | Commentaires                                    |
+| -------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------------------------------------------- |
+| {{SpecName('Typed Array')}}                                                                                 | {{Spec2('Typed Array')}} | Remplacée dans ECMAScript 2015.                 |
+| {{SpecName('ES2015', '#sec-dataview.prototype.setint8', 'DataView.prototype.setInt8')}} | {{Spec2('ES2015')}}         | Définition initiale au sein d'un standard ECMA. |
+| {{SpecName('ESDraft', '#sec-dataview.prototype.setint8', 'DataView.prototype.setInt8')}} | {{Spec2('ESDraft')}}     |                                                 |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.DataView.setInt8")}}
+
+## Voir aussi
+
+- {{jsxref("DataView")}}
+- {{jsxref("ArrayBuffer")}}
diff --git a/files/fr/web/javascript/reference/global_objects/dataview/setuint16/index.html b/files/fr/web/javascript/reference/global_objects/dataview/setuint16/index.html
deleted file mode 100644
index 45ce24f36d..0000000000
--- a/files/fr/web/javascript/reference/global_objects/dataview/setuint16/index.html
+++ /dev/null
@@ -1,92 +0,0 @@
----
-title: DataView.prototype.setUint16()
-slug: Web/JavaScript/Reference/Global_Objects/DataView/setUint16
-tags:
-  - DataView
-  - JavaScript
-  - Méthode
-  - Prototype
-  - Reference
-  - TypedArrays
-translation_of: Web/JavaScript/Reference/Global_Objects/DataView/setUint16
-original_slug: Web/JavaScript/Reference/Objets_globaux/DataView/setUint16
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <strong><code>setUint16()</code></strong> permet d'enregister un entier non-signé sur 16 bits (type <em>unsigned short</em> par analogie avec C) à l'octet indiqué par rapport au début de la {{jsxref("DataView")}}.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/dataview-setuint16.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>dataview</var>.setUint16(positionOctet, valeur [, littleEndian])</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>positionOctet</code></dt>
- <dd>La position, exprimée en numéro d'octet, à partir du début de la vue à laquelle enregistrer la donnée.</dd>
- <dt><code>valeur</code></dt>
- <dd>La valeur à enregistrer</dd>
- <dt><code>littleEndian</code></dt>
- <dd>{{optional_inline}} Indique si la donnée sur 32 bits est enregistrée {{Glossary("Endianness", "dans l'ordre des octets de poids faibles")}}. Si ce paramètre vaut <code>false</code> ou <code>undefined</code>, l'ordre sera celui des octets de poids forts.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>{{jsxref("undefined")}}.</p>
-
-<h3 id="Erreurs_renvoyées">Erreurs renvoyées</h3>
-
-<dl>
- <dt>{{jsxref("RangeError")}}</dt>
- <dd>Renvoyée si <code>positionOctet</code> est tel que l'enregistrement sera fait en dehors de la vue.</dd>
-</dl>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Utilisation_de_la_méthode_setUint1">Utilisation de la méthode <code>setUint1</code></h3>
-
-<pre class="brush:js">var buffer = new ArrayBuffer(8);
-var dataview = new DataView(buffer);
-dataview.setUint16(1, 3);
-dataview.getUint16(1); // 3
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Typed Array')}}</td>
-   <td>{{Spec2('Typed Array')}}</td>
-   <td>Remplacée dans ECMAScript 2015.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-dataview.prototype.setuint16', 'DataView.prototype.setUint16')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td>Définition initiale au sein d'un standard ECMA.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-dataview.prototype.setuint16', 'DataView.prototype.setUint16')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.DataView.setUint16")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("DataView")}}</li>
- <li>{{jsxref("ArrayBuffer")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/dataview/setuint16/index.md b/files/fr/web/javascript/reference/global_objects/dataview/setuint16/index.md
new file mode 100644
index 0000000000..350929f26d
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/dataview/setuint16/index.md
@@ -0,0 +1,68 @@
+---
+title: DataView.prototype.setUint16()
+slug: Web/JavaScript/Reference/Global_Objects/DataView/setUint16
+tags:
+  - DataView
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - TypedArrays
+translation_of: Web/JavaScript/Reference/Global_Objects/DataView/setUint16
+original_slug: Web/JavaScript/Reference/Objets_globaux/DataView/setUint16
+---
+{{JSRef}}
+
+La méthode **`setUint16()`** permet d'enregister un entier non-signé sur 16 bits (type _unsigned short_ par analogie avec C) à l'octet indiqué par rapport au début de la {{jsxref("DataView")}}.
+
+{{EmbedInteractiveExample("pages/js/dataview-setuint16.html")}}
+
+## Syntaxe
+
+    dataview.setUint16(positionOctet, valeur [, littleEndian])
+
+### Paramètres
+
+- `positionOctet`
+  - : La position, exprimée en numéro d'octet, à partir du début de la vue à laquelle enregistrer la donnée.
+- `valeur`
+  - : La valeur à enregistrer
+- `littleEndian`
+  - : {{optional_inline}} Indique si la donnée sur 32 bits est enregistrée {{Glossary("Endianness", "dans l'ordre des octets de poids faibles")}}. Si ce paramètre vaut `false` ou `undefined`, l'ordre sera celui des octets de poids forts.
+
+### Valeur de retour
+
+{{jsxref("undefined")}}.
+
+### Erreurs renvoyées
+
+- {{jsxref("RangeError")}}
+  - : Renvoyée si `positionOctet` est tel que l'enregistrement sera fait en dehors de la vue.
+
+## Exemples
+
+### Utilisation de la méthode `setUint1`
+
+```js
+var buffer = new ArrayBuffer(8);
+var dataview = new DataView(buffer);
+dataview.setUint16(1, 3);
+dataview.getUint16(1); // 3
+```
+
+## Spécifications
+
+| Spécification                                                                                                                | État                             | Commentaires                                    |
+| ---------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------------------------------------------- |
+| {{SpecName('Typed Array')}}                                                                                         | {{Spec2('Typed Array')}} | Remplacée dans ECMAScript 2015.                 |
+| {{SpecName('ES2015', '#sec-dataview.prototype.setuint16', 'DataView.prototype.setUint16')}}     | {{Spec2('ES2015')}}         | Définition initiale au sein d'un standard ECMA. |
+| {{SpecName('ESDraft', '#sec-dataview.prototype.setuint16', 'DataView.prototype.setUint16')}} | {{Spec2('ESDraft')}}     |                                                 |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.DataView.setUint16")}}
+
+## Voir aussi
+
+- {{jsxref("DataView")}}
+- {{jsxref("ArrayBuffer")}}
diff --git a/files/fr/web/javascript/reference/global_objects/dataview/setuint32/index.html b/files/fr/web/javascript/reference/global_objects/dataview/setuint32/index.html
deleted file mode 100644
index 7c0dc85072..0000000000
--- a/files/fr/web/javascript/reference/global_objects/dataview/setuint32/index.html
+++ /dev/null
@@ -1,92 +0,0 @@
----
-title: DataView.prototype.setUint32()
-slug: Web/JavaScript/Reference/Global_Objects/DataView/setUint32
-tags:
-  - DataView
-  - JavaScript
-  - Méthode
-  - Prototype
-  - Reference
-  - TypedArrays
-translation_of: Web/JavaScript/Reference/Global_Objects/DataView/setUint32
-original_slug: Web/JavaScript/Reference/Objets_globaux/DataView/setUint32
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <strong><code>setUint32()</code></strong> permet d'enregister un entier non-signé sur 32 bits (type <em>unsigned long</em> par analogie avec C) à l'octet indiqué par rapport au début de la {{jsxref("DataView")}}.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/dataview-setuint32.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>dataview</var>.setUint32(positionOctet, valeur [, littleEndian])</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>positionOctet</code></dt>
- <dd>La position, exprimée en numéro d'octet, à partir du début de la vue à laquelle enregistrer la donnée.</dd>
- <dt><code>valeur</code></dt>
- <dd>La valeur à enregistrer</dd>
- <dt><code>littleEndian</code></dt>
- <dd>{{optional_inline}} Indique si la donnée sur 32 bits est enregistrée {{Glossary("Endianness", "dans l'ordre des octets de poids faibles")}}. Si ce paramètre vaut <code>false</code> ou <code>undefined</code>, l'ordre sera celui des octets de poids forts.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>{{jsxref("undefined")}}.</p>
-
-<h3 id="Erreurs_renvoyées">Erreurs renvoyées</h3>
-
-<dl>
- <dt>{{jsxref("RangeError")}}</dt>
- <dd>Renvoyée si <code>positionOctet</code> est tel que l'enregistrement sera fait en dehors de la vue.</dd>
-</dl>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Utilisation_de_la_méthode_setUint32">Utilisation de la méthode <code>setUint32</code></h3>
-
-<pre class="brush:js">var buffer = new ArrayBuffer(8);
-var dataview = new DataView(buffer);
-dataview.setUint32(1, 3);
-dataview.getUint32(1); // 3
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Typed Array')}}</td>
-   <td>{{Spec2('Typed Array')}}</td>
-   <td>Remplacée dans ECMAScript 2015 (ES6).</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-dataview.prototype.setuint32', 'DataView.prototype.setUint32')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td>Définition initiale au sein d'un standard ECMA.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-dataview.prototype.setuint32', 'DataView.prototype.setUint32')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.DataView.setUint32")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("DataView")}}</li>
- <li>{{jsxref("ArrayBuffer")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/dataview/setuint32/index.md b/files/fr/web/javascript/reference/global_objects/dataview/setuint32/index.md
new file mode 100644
index 0000000000..15dc13fe04
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/dataview/setuint32/index.md
@@ -0,0 +1,68 @@
+---
+title: DataView.prototype.setUint32()
+slug: Web/JavaScript/Reference/Global_Objects/DataView/setUint32
+tags:
+  - DataView
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - TypedArrays
+translation_of: Web/JavaScript/Reference/Global_Objects/DataView/setUint32
+original_slug: Web/JavaScript/Reference/Objets_globaux/DataView/setUint32
+---
+{{JSRef}}
+
+La méthode **`setUint32()`** permet d'enregister un entier non-signé sur 32 bits (type _unsigned long_ par analogie avec C) à l'octet indiqué par rapport au début de la {{jsxref("DataView")}}.
+
+{{EmbedInteractiveExample("pages/js/dataview-setuint32.html")}}
+
+## Syntaxe
+
+    dataview.setUint32(positionOctet, valeur [, littleEndian])
+
+### Paramètres
+
+- `positionOctet`
+  - : La position, exprimée en numéro d'octet, à partir du début de la vue à laquelle enregistrer la donnée.
+- `valeur`
+  - : La valeur à enregistrer
+- `littleEndian`
+  - : {{optional_inline}} Indique si la donnée sur 32 bits est enregistrée {{Glossary("Endianness", "dans l'ordre des octets de poids faibles")}}. Si ce paramètre vaut `false` ou `undefined`, l'ordre sera celui des octets de poids forts.
+
+### Valeur de retour
+
+{{jsxref("undefined")}}.
+
+### Erreurs renvoyées
+
+- {{jsxref("RangeError")}}
+  - : Renvoyée si `positionOctet` est tel que l'enregistrement sera fait en dehors de la vue.
+
+## Exemples
+
+### Utilisation de la méthode `setUint32`
+
+```js
+var buffer = new ArrayBuffer(8);
+var dataview = new DataView(buffer);
+dataview.setUint32(1, 3);
+dataview.getUint32(1); // 3
+```
+
+## Spécifications
+
+| Spécification                                                                                                                | État                             | Commentaires                                    |
+| ---------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------------------------------------------- |
+| {{SpecName('Typed Array')}}                                                                                         | {{Spec2('Typed Array')}} | Remplacée dans ECMAScript 2015 (ES6).           |
+| {{SpecName('ES2015', '#sec-dataview.prototype.setuint32', 'DataView.prototype.setUint32')}}     | {{Spec2('ES2015')}}         | Définition initiale au sein d'un standard ECMA. |
+| {{SpecName('ESDraft', '#sec-dataview.prototype.setuint32', 'DataView.prototype.setUint32')}} | {{Spec2('ESDraft')}}     |                                                 |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.DataView.setUint32")}}
+
+## Voir aussi
+
+- {{jsxref("DataView")}}
+- {{jsxref("ArrayBuffer")}}
diff --git a/files/fr/web/javascript/reference/global_objects/dataview/setuint8/index.html b/files/fr/web/javascript/reference/global_objects/dataview/setuint8/index.html
deleted file mode 100644
index f53c1a78ce..0000000000
--- a/files/fr/web/javascript/reference/global_objects/dataview/setuint8/index.html
+++ /dev/null
@@ -1,90 +0,0 @@
----
-title: DataView.prototype.setUint8()
-slug: Web/JavaScript/Reference/Global_Objects/DataView/setUint8
-tags:
-  - DataView
-  - JavaScript
-  - Méthode
-  - Prototype
-  - Reference
-  - TypedArrays
-translation_of: Web/JavaScript/Reference/Global_Objects/DataView/setUint8
-original_slug: Web/JavaScript/Reference/Objets_globaux/DataView/setUint8
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <strong><code>setUint8()</code></strong> permet d'enregister un entier non-signé sur 8 bits à l'octet indiqué par rapport au début de la {{jsxref("DataView")}}.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/dataview-setuint8.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>dataview</var>.setUint8(positionOctet, valeur)</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>positionOctet</code></dt>
- <dd>La position, exprimée en numéro d'octet, à partir du début de la vue à laquelle enregistrer la donnée.</dd>
- <dt><code>valeur</code></dt>
- <dd>La valeur à enregistrer.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>{{jsxref("undefined")}}.</p>
-
-<h3 id="Erreurs_renvoyées">Erreurs renvoyées</h3>
-
-<dl>
- <dt>{{jsxref("RangeError")}}</dt>
- <dd>Renvoyée si <code>positionOctet</code> est tel que l'enregistrement sera fait en dehors de la vue.</dd>
-</dl>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Utilisation_de_la_méthode_setUint8">Utilisation de la méthode <code>setUint8</code></h3>
-
-<pre class="brush:js">var buffer = new ArrayBuffer(8);
-var dataview = new DataView(buffer);
-dataview.setUint8(1, 3);
-dataview.getUint8(1); // 3
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Typed Array')}}</td>
-   <td>{{Spec2('Typed Array')}}</td>
-   <td>Remplacée dans ECMAScript 2015.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-dataview.prototype.setuint8', 'DataView.prototype.setUint8')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td>Définition initiale au sein d'un standard ECMA.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-dataview.prototype.setuint8', 'DataView.prototype.setUint8')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.DataView.setUint8")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("DataView")}}</li>
- <li>{{jsxref("ArrayBuffer")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/dataview/setuint8/index.md b/files/fr/web/javascript/reference/global_objects/dataview/setuint8/index.md
new file mode 100644
index 0000000000..45c7db8f89
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/dataview/setuint8/index.md
@@ -0,0 +1,66 @@
+---
+title: DataView.prototype.setUint8()
+slug: Web/JavaScript/Reference/Global_Objects/DataView/setUint8
+tags:
+  - DataView
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - TypedArrays
+translation_of: Web/JavaScript/Reference/Global_Objects/DataView/setUint8
+original_slug: Web/JavaScript/Reference/Objets_globaux/DataView/setUint8
+---
+{{JSRef}}
+
+La méthode **`setUint8()`** permet d'enregister un entier non-signé sur 8 bits à l'octet indiqué par rapport au début de la {{jsxref("DataView")}}.
+
+{{EmbedInteractiveExample("pages/js/dataview-setuint8.html")}}
+
+## Syntaxe
+
+    dataview.setUint8(positionOctet, valeur)
+
+### Paramètres
+
+- `positionOctet`
+  - : La position, exprimée en numéro d'octet, à partir du début de la vue à laquelle enregistrer la donnée.
+- `valeur`
+  - : La valeur à enregistrer.
+
+### Valeur de retour
+
+{{jsxref("undefined")}}.
+
+### Erreurs renvoyées
+
+- {{jsxref("RangeError")}}
+  - : Renvoyée si `positionOctet` est tel que l'enregistrement sera fait en dehors de la vue.
+
+## Exemples
+
+### Utilisation de la méthode `setUint8`
+
+```js
+var buffer = new ArrayBuffer(8);
+var dataview = new DataView(buffer);
+dataview.setUint8(1, 3);
+dataview.getUint8(1); // 3
+```
+
+## Spécifications
+
+| Spécification                                                                                                            | État                             | Commentaires                                    |
+| ------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ----------------------------------------------- |
+| {{SpecName('Typed Array')}}                                                                                     | {{Spec2('Typed Array')}} | Remplacée dans ECMAScript 2015.                 |
+| {{SpecName('ES2015', '#sec-dataview.prototype.setuint8', 'DataView.prototype.setUint8')}} | {{Spec2('ES2015')}}         | Définition initiale au sein d'un standard ECMA. |
+| {{SpecName('ESDraft', '#sec-dataview.prototype.setuint8', 'DataView.prototype.setUint8')}} | {{Spec2('ESDraft')}}     |                                                 |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.DataView.setUint8")}}
+
+## Voir aussi
+
+- {{jsxref("DataView")}}
+- {{jsxref("ArrayBuffer")}}
diff --git a/files/fr/web/javascript/reference/global_objects/date/@@toprimitive/index.html b/files/fr/web/javascript/reference/global_objects/date/@@toprimitive/index.html
deleted file mode 100644
index ee85093529..0000000000
--- a/files/fr/web/javascript/reference/global_objects/date/@@toprimitive/index.html
+++ /dev/null
@@ -1,66 +0,0 @@
----
-title: Date.prototype[@@toPrimitive]
-slug: Web/JavaScript/Reference/Global_Objects/Date/@@toPrimitive
-tags:
-  - Date
-  - JavaScript
-  - Méthode
-  - Prototype
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Date/@@toPrimitive
-original_slug: Web/JavaScript/Reference/Objets_globaux/Date/@@toPrimitive
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <code><strong>[@@toPrimitive]()</strong></code> permet de convertir un objet <code>Date</code> en une valeur primitive.</p>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>Date()[Symbol.toPrimitive](hint);
-</var></pre>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>La valeur primitive de l'objet {{jsxref("Date")}}. Selon la valeur de l'argument, la méthode peut renvoyer une chaîne de caractères ou un nombre.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>La méthode <code>[@@toPrimitive]()</code> de {{jsxref("Date")}} renvoie une valeur primitive qui est un nombre ou une chaîne de caractère.</p>
-
-<p>Si le paramètre <code>hint</code> vaut <code>"string"</code> ou <code>"default"</code>, <code>[@@toPrimitive]()</code> tentera d'appeler la méthode {{jsxref("Object.prototype.toString()", "toString")}}, si la propriété <code>toString()</code> n'existe pas, elle tentera alors d'appeler la méthode {{jsxref("Object.prototype.valueOf()", "valueOf")}}, si cette dernière n'existe pas non plus, <code>[@@toPrimitive]()</code> lèvera une exception {{jsxref("TypeError")}}.</p>
-
-<p>Si le paramètre <code>hint</code> vaut <code>"number"</code>, <code>[@@toPrimitive]()</code> tentera d'abord un appel à <code>valueOf()</code> puis ensuite un appel à <code>toString()</code>.</p>
-
-<p>Le moteur JavaScript appelle la méthode <code>[@@toPrimitive]()</code> afin de convertir un objet en une valeur primitive. Il est rarement nécessaire d'appeler <code>[@@toPrimitive]()</code> explicitement dans son propre code, le moteur JavaScript l'utilisera automatiquement lorsqu'il détectera un objet là où une valeur primitive est attendue.</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-date.prototype-@@toprimitive', 'Date.prototype.@@toPrimitive')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-date.prototype-@@toprimitive', 'Date.prototype.@@toPrimitive')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Date.@@toPrimitive")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Symbol.toPrimitive")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/date/@@toprimitive/index.md b/files/fr/web/javascript/reference/global_objects/date/@@toprimitive/index.md
new file mode 100644
index 0000000000..574dd32262
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/date/@@toprimitive/index.md
@@ -0,0 +1,48 @@
+---
+title: Date.prototype[@@toPrimitive]
+slug: Web/JavaScript/Reference/Global_Objects/Date/@@toPrimitive
+tags:
+  - Date
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/@@toPrimitive
+original_slug: Web/JavaScript/Reference/Objets_globaux/Date/@@toPrimitive
+---
+{{JSRef}}
+
+La méthode **`[@@toPrimitive]()`** permet de convertir un objet `Date` en une valeur primitive.
+
+## Syntaxe
+
+    Date()[Symbol.toPrimitive](hint);
+
+### Valeur de retour
+
+La valeur primitive de l'objet {{jsxref("Date")}}. Selon la valeur de l'argument, la méthode peut renvoyer une chaîne de caractères ou un nombre.
+
+## Description
+
+La méthode `[@@toPrimitive]()` de {{jsxref("Date")}} renvoie une valeur primitive qui est un nombre ou une chaîne de caractère.
+
+Si le paramètre `hint` vaut `"string"` ou `"default"`, `[@@toPrimitive]()` tentera d'appeler la méthode {{jsxref("Object.prototype.toString()", "toString")}}, si la propriété `toString()` n'existe pas, elle tentera alors d'appeler la méthode {{jsxref("Object.prototype.valueOf()", "valueOf")}}, si cette dernière n'existe pas non plus, `[@@toPrimitive]()` lèvera une exception {{jsxref("TypeError")}}.
+
+Si le paramètre `hint` vaut `"number"`, `[@@toPrimitive]()` tentera d'abord un appel à `valueOf()` puis ensuite un appel à `toString()`.
+
+Le moteur JavaScript appelle la méthode `[@@toPrimitive]()` afin de convertir un objet en une valeur primitive. Il est rarement nécessaire d'appeler `[@@toPrimitive]()` explicitement dans son propre code, le moteur JavaScript l'utilisera automatiquement lorsqu'il détectera un objet là où une valeur primitive est attendue.
+
+## Spécifications
+
+| Spécification                                                                                                                | État                         | Commentaires         |
+| ---------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName('ES6', '#sec-date.prototype-@@toprimitive', 'Date.prototype.@@toPrimitive')}}         | {{Spec2('ES6')}}         | Définition initiale. |
+| {{SpecName('ESDraft', '#sec-date.prototype-@@toprimitive', 'Date.prototype.@@toPrimitive')}} | {{Spec2('ESDraft')}} |                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Date.@@toPrimitive")}}
+
+## Voir aussi
+
+- {{jsxref("Symbol.toPrimitive")}}
diff --git a/files/fr/web/javascript/reference/global_objects/date/getdate/index.html b/files/fr/web/javascript/reference/global_objects/date/getdate/index.html
deleted file mode 100644
index 7c87be827c..0000000000
--- a/files/fr/web/javascript/reference/global_objects/date/getdate/index.html
+++ /dev/null
@@ -1,85 +0,0 @@
----
-title: Date.prototype.getDate()
-slug: Web/JavaScript/Reference/Global_Objects/Date/getDate
-tags:
-  - Date
-  - JavaScript
-  - Méthode
-  - Prototype
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Date/getDate
-original_slug: Web/JavaScript/Reference/Objets_globaux/Date/getDate
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <code><strong>getDate()</strong></code> retourne le jour du mois pour la date spécifiée d'après l'heure locale.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/date-getdate.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">dateObj.getDate()</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<p>Aucun.</p>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Un entier entre 1 et 31 correspondant au jour du mois de la date indiquée selon l'heure locale.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Utiliser_getDate()">Utiliser <code>getDate()</code></h3>
-
-<p>La seconde instruction ci-dessous affecte la valeur 25 à la variable <code>jour</code>, d'après la valeur de l'objet {{jsxref("Date")}} <code>Noel95</code>.</p>
-
-<pre class="brush: js">var Noel95 = new Date("December 25, 1995 23:15:00");
-var jour = Noel95.getDate();
-
-console.log(jour); // 25
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-date.prototype.getdate', 'Date.prototype.getDate')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-date.prototype.getdate', 'Date.prototype.getDate')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-15.9.5.14', 'Date.prototype.getDate')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES1')}}</td>
-   <td>{{Spec2('ES1')}}</td>
-   <td>Définition initiale. Implémentée avec JavaScript 1.1.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Date.getDate")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Date.prototype.getUTCDate()")}}</li>
- <li>{{jsxref("Date.prototype.getUTCDay()")}}</li>
- <li>{{jsxref("Date.prototype.setDate()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/date/getdate/index.md b/files/fr/web/javascript/reference/global_objects/date/getdate/index.md
new file mode 100644
index 0000000000..934bca97de
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/date/getdate/index.md
@@ -0,0 +1,61 @@
+---
+title: Date.prototype.getDate()
+slug: Web/JavaScript/Reference/Global_Objects/Date/getDate
+tags:
+  - Date
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/getDate
+original_slug: Web/JavaScript/Reference/Objets_globaux/Date/getDate
+---
+{{JSRef}}
+
+La méthode **`getDate()`** retourne le jour du mois pour la date spécifiée d'après l'heure locale.
+
+{{EmbedInteractiveExample("pages/js/date-getdate.html")}}
+
+## Syntaxe
+
+    dateObj.getDate()
+
+### Paramètres
+
+Aucun.
+
+### Valeur de retour
+
+Un entier entre 1 et 31 correspondant au jour du mois de la date indiquée selon l'heure locale.
+
+## Exemples
+
+### Utiliser `getDate()`
+
+La seconde instruction ci-dessous affecte la valeur 25 à la variable `jour`, d'après la valeur de l'objet {{jsxref("Date")}} `Noel95`.
+
+```js
+var Noel95 = new Date("December 25, 1995 23:15:00");
+var jour = Noel95.getDate();
+
+console.log(jour); // 25
+```
+
+## Spécifications
+
+| Spécification                                                                                                | État                         | Commentaires                                          |
+| ------------------------------------------------------------------------------------------------------------ | ---------------------------- | ----------------------------------------------------- |
+| {{SpecName('ESDraft', '#sec-date.prototype.getdate', 'Date.prototype.getDate')}} | {{Spec2('ESDraft')}} |                                                       |
+| {{SpecName('ES6', '#sec-date.prototype.getdate', 'Date.prototype.getDate')}}         | {{Spec2('ES6')}}         |                                                       |
+| {{SpecName('ES5.1', '#sec-15.9.5.14', 'Date.prototype.getDate')}}                     | {{Spec2('ES5.1')}}     |                                                       |
+| {{SpecName('ES1')}}                                                                                     | {{Spec2('ES1')}}         | Définition initiale. Implémentée avec JavaScript 1.1. |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Date.getDate")}}
+
+## Voir aussi
+
+- {{jsxref("Date.prototype.getUTCDate()")}}
+- {{jsxref("Date.prototype.getUTCDay()")}}
+- {{jsxref("Date.prototype.setDate()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/date/getday/index.html b/files/fr/web/javascript/reference/global_objects/date/getday/index.html
deleted file mode 100644
index 0c4c3d23be..0000000000
--- a/files/fr/web/javascript/reference/global_objects/date/getday/index.html
+++ /dev/null
@@ -1,92 +0,0 @@
----
-title: Date.prototype.getDay()
-slug: Web/JavaScript/Reference/Global_Objects/Date/getDay
-tags:
-  - Date
-  - JavaScript
-  - Méthode
-  - Prototype
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Date/getDay
-original_slug: Web/JavaScript/Reference/Objets_globaux/Date/getDay
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <strong><code>getDay()</code></strong> renvoie le jour de la semaine pour la date spécifiée selon l'heure locale (0 correspondant à dimanche). Pour obtenir le jour du mois, on utilisera {{jsxref("Date.prototype.getDate()")}}.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/date-getday.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>dateObj</var>.getDay()</pre>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Un entier correspondant au jour de la semaine (0 correspondant à dimanche, 1 à lundi, 2 à mardi et ainsi de suite) de la date indiquée selon l'heure locale.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Utiliser_getDay()">Utiliser <code>getDay()</code></h3>
-
-<p>La seconde instruction ci-dessous assigne la valeur 1 à <code>jourSemaine</code>, selon la valeur de l'objet <code>Date</code> <code>noel95</code>. Le 25 décembre 1995 est un lundi.</p>
-
-<pre class="brush: js">var noel95 = new Date("December 25, 1995 23:15:00");
-var jourSemaine = noel95.getDay();
-
-console.log(jourSemaine); //1
-</pre>
-
-<div class="blockIndicator note">
-<p><strong>Note :</strong> Si besoin, on pourra obtenir le nom complet du jour (<code>"lundi"</code> par exemple) en utilisant la méthode {{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}} avec un paramètre <code>options</code>. Ce faisant, il est plus simple d'internationaliser un site ou une application :</p>
-
-<pre class="brush: js">var options = { weekday: 'long'};
-console.log(new Intl.DateTimeFormat('en-US', options).format(Xmas95));
-// Monday
-console.log(new Intl.DateTimeFormat('de-DE', options).format(Xmas95));
-// Montag
-</pre>
-</div>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-date.prototype.getday', 'Date.prototype.getDay')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-date.prototype.getday', 'Date.prototype.getDay')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-15.9.5.16', 'Date.prototype.getDay')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES1')}}</td>
-   <td>{{Spec2('ES1')}}</td>
-   <td>Définition initiale. Implémentée avec JavaScript 1.0.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Date.getDay")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Date.prototype.getUTCDate()")}}</li>
- <li>{{jsxref("Date.prototype.getUTCDay()")}}</li>
- <li>{{jsxref("Date.prototype.setDate()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/date/getday/index.md b/files/fr/web/javascript/reference/global_objects/date/getday/index.md
new file mode 100644
index 0000000000..343fc41fcc
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/date/getday/index.md
@@ -0,0 +1,67 @@
+---
+title: Date.prototype.getDay()
+slug: Web/JavaScript/Reference/Global_Objects/Date/getDay
+tags:
+  - Date
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/getDay
+original_slug: Web/JavaScript/Reference/Objets_globaux/Date/getDay
+---
+{{JSRef}}
+
+La méthode **`getDay()`** renvoie le jour de la semaine pour la date spécifiée selon l'heure locale (0 correspondant à dimanche). Pour obtenir le jour du mois, on utilisera {{jsxref("Date.prototype.getDate()")}}.
+
+{{EmbedInteractiveExample("pages/js/date-getday.html")}}
+
+## Syntaxe
+
+    dateObj.getDay()
+
+### Valeur de retour
+
+Un entier correspondant au jour de la semaine (0 correspondant à dimanche, 1 à lundi, 2 à mardi et ainsi de suite) de la date indiquée selon l'heure locale.
+
+## Exemples
+
+### Utiliser `getDay()`
+
+La seconde instruction ci-dessous assigne la valeur 1 à `jourSemaine`, selon la valeur de l'objet `Date` `noel95`. Le 25 décembre 1995 est un lundi.
+
+```js
+var noel95 = new Date("December 25, 1995 23:15:00");
+var jourSemaine = noel95.getDay();
+
+console.log(jourSemaine); //1
+```
+
+> **Note :** Si besoin, on pourra obtenir le nom complet du jour (`"lundi"` par exemple) en utilisant la méthode {{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}} avec un paramètre `options`. Ce faisant, il est plus simple d'internationaliser un site ou une application :
+>
+> ```js
+> var options = { weekday: 'long'};
+> console.log(new Intl.DateTimeFormat('en-US', options).format(Xmas95));
+> // Monday
+> console.log(new Intl.DateTimeFormat('de-DE', options).format(Xmas95));
+> // Montag
+> ```
+
+## Spécifications
+
+| Spécification                                                                                            | État                         | Commentaires                                          |
+| -------------------------------------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- |
+| {{SpecName('ESDraft', '#sec-date.prototype.getday', 'Date.prototype.getDay')}} | {{Spec2('ESDraft')}} |                                                       |
+| {{SpecName('ES6', '#sec-date.prototype.getday', 'Date.prototype.getDay')}}     | {{Spec2('ES6')}}         |                                                       |
+| {{SpecName('ES5.1', '#sec-15.9.5.16', 'Date.prototype.getDay')}}                     | {{Spec2('ES5.1')}}     |                                                       |
+| {{SpecName('ES1')}}                                                                                 | {{Spec2('ES1')}}         | Définition initiale. Implémentée avec JavaScript 1.0. |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Date.getDay")}}
+
+## Voir aussi
+
+- {{jsxref("Date.prototype.getUTCDate()")}}
+- {{jsxref("Date.prototype.getUTCDay()")}}
+- {{jsxref("Date.prototype.setDate()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/date/getfullyear/index.html b/files/fr/web/javascript/reference/global_objects/date/getfullyear/index.html
deleted file mode 100644
index 16d862b7e3..0000000000
--- a/files/fr/web/javascript/reference/global_objects/date/getfullyear/index.html
+++ /dev/null
@@ -1,81 +0,0 @@
----
-title: Date.prototype.getFullYear()
-slug: Web/JavaScript/Reference/Global_Objects/Date/getFullYear
-tags:
-  - Date
-  - JavaScript
-  - Méthode
-  - Prototype
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Date/getFullYear
-original_slug: Web/JavaScript/Reference/Objets_globaux/Date/getFullYear
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <code><strong>getFullYear()</strong></code> renvoie l'année de la date renseignée d'après l'heure locale.</p>
-
-<p>Cette méthode doit être utilisée à la place de {{jsxref("Date.prototype.getYear()", "getYear()")}}.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/date-getfullyear.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">dateObj.getFullYear()</pre>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Un entier correspondant à l'année de la date selon l'heure locale.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Utiliser_getFullYear()">Utiliser <code>getFullYear()</code></h3>
-
-<p>L'exemple qui suit assigne la valeur à quatre chiffres de l'année courante à la variable <code>année</code>.</p>
-
-<pre class="brush: js">var aujd = new Date();
-var année = aujd.getFullYear();
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES1')}}</td>
-   <td>{{Spec2('ES1')}}</td>
-   <td>Définition initiale. Implémentée avec JavaScript 1.3.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-15.9.5.10', 'Date.prototype.getFullYear')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-date.prototype.getfullyear', 'Date.prototype.getFullYear')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-date.prototype.getfullyear', 'Date.prototype.getFullYear')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Date.getFullYear")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Date.prototype.getUTCFullYear()")}}</li>
- <li>{{jsxref("Date.prototype.setFullYear()")}}</li>
- <li>{{jsxref("Date.prototype.getYear()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/date/getfullyear/index.md b/files/fr/web/javascript/reference/global_objects/date/getfullyear/index.md
new file mode 100644
index 0000000000..d3cf612ee7
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/date/getfullyear/index.md
@@ -0,0 +1,57 @@
+---
+title: Date.prototype.getFullYear()
+slug: Web/JavaScript/Reference/Global_Objects/Date/getFullYear
+tags:
+  - Date
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/getFullYear
+original_slug: Web/JavaScript/Reference/Objets_globaux/Date/getFullYear
+---
+{{JSRef}}
+
+La méthode **`getFullYear()`** renvoie l'année de la date renseignée d'après l'heure locale.
+
+Cette méthode doit être utilisée à la place de {{jsxref("Date.prototype.getYear()", "getYear()")}}.
+
+{{EmbedInteractiveExample("pages/js/date-getfullyear.html")}}
+
+## Syntaxe
+
+    dateObj.getFullYear()
+
+### Valeur de retour
+
+Un entier correspondant à l'année de la date selon l'heure locale.
+
+## Exemples
+
+### Utiliser `getFullYear()`
+
+L'exemple qui suit assigne la valeur à quatre chiffres de l'année courante à la variable `année`.
+
+```js
+var aujd = new Date();
+var année = aujd.getFullYear();
+```
+
+## Spécifications
+
+| Spécification                                                                                                        | État                         | Commentaires                                          |
+| -------------------------------------------------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- |
+| {{SpecName('ES1')}}                                                                                             | {{Spec2('ES1')}}         | Définition initiale. Implémentée avec JavaScript 1.3. |
+| {{SpecName('ES5.1', '#sec-15.9.5.10', 'Date.prototype.getFullYear')}}                         | {{Spec2('ES5.1')}}     |                                                       |
+| {{SpecName('ES6', '#sec-date.prototype.getfullyear', 'Date.prototype.getFullYear')}}     | {{Spec2('ES6')}}         |                                                       |
+| {{SpecName('ESDraft', '#sec-date.prototype.getfullyear', 'Date.prototype.getFullYear')}} | {{Spec2('ESDraft')}} |                                                       |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Date.getFullYear")}}
+
+## Voir aussi
+
+- {{jsxref("Date.prototype.getUTCFullYear()")}}
+- {{jsxref("Date.prototype.setFullYear()")}}
+- {{jsxref("Date.prototype.getYear()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/date/gethours/index.html b/files/fr/web/javascript/reference/global_objects/date/gethours/index.html
deleted file mode 100644
index b0a5765a38..0000000000
--- a/files/fr/web/javascript/reference/global_objects/date/gethours/index.html
+++ /dev/null
@@ -1,80 +0,0 @@
----
-title: Date.prototype.getHours()
-slug: Web/JavaScript/Reference/Global_Objects/Date/getHours
-tags:
-  - Date
-  - JavaScript
-  - Méthode
-  - Prototype
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Date/getHours
-original_slug: Web/JavaScript/Reference/Objets_globaux/Date/getHours
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <code><strong>getHours()</strong></code> renvoie l'heure pour la date renseignée, d'après l'heure locale.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/date-gethours.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>dateObj</var>.getHours()</pre>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Un entier, compris entre 0 et 23 qui indique l'heure de la date indiquée selon l'heure locale.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Utiliser_getHours()">Utiliser <code>getHours()</code></h3>
-
-<p>La seconde instruction ci-dessous assigne la valeur 23 à la variable <code>heure</code>, selon la valeur de l'objet {{jsxref("Date")}} <code>noel95</code>.</p>
-
-<pre class="brush: js">var noel95 = new Date("December 25, 1995 23:15:00");
-var heure = noel95.getHours();
-
-console.log(heure); //23
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES1')}}</td>
-   <td>{{Spec2('ES1')}}</td>
-   <td>Définition initiale. Implémentée avec JavaScript 1.0.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-15.9.5.18', 'Date.prototype.getHours')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-date.prototype.gethours', 'Date.prototype.getHours')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-date.prototype.gethours', 'Date.prototype.getHours')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Date.getHours")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Date.prototype.getUTCHours()")}}</li>
- <li>{{jsxref("Date.prototype.setHours()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/date/gethours/index.md b/files/fr/web/javascript/reference/global_objects/date/gethours/index.md
new file mode 100644
index 0000000000..502652786f
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/date/gethours/index.md
@@ -0,0 +1,56 @@
+---
+title: Date.prototype.getHours()
+slug: Web/JavaScript/Reference/Global_Objects/Date/getHours
+tags:
+  - Date
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/getHours
+original_slug: Web/JavaScript/Reference/Objets_globaux/Date/getHours
+---
+{{JSRef}}
+
+La méthode **`getHours()`** renvoie l'heure pour la date renseignée, d'après l'heure locale.
+
+{{EmbedInteractiveExample("pages/js/date-gethours.html")}}
+
+## Syntaxe
+
+    dateObj.getHours()
+
+### Valeur de retour
+
+Un entier, compris entre 0 et 23 qui indique l'heure de la date indiquée selon l'heure locale.
+
+## Exemples
+
+### Utiliser `getHours()`
+
+La seconde instruction ci-dessous assigne la valeur 23 à la variable `heure`, selon la valeur de l'objet {{jsxref("Date")}} `noel95`.
+
+```js
+var noel95 = new Date("December 25, 1995 23:15:00");
+var heure = noel95.getHours();
+
+console.log(heure); //23
+```
+
+## Spécifications
+
+| Spécification                                                                                                | État                         | Commentaires                                          |
+| ------------------------------------------------------------------------------------------------------------ | ---------------------------- | ----------------------------------------------------- |
+| {{SpecName('ES1')}}                                                                                     | {{Spec2('ES1')}}         | Définition initiale. Implémentée avec JavaScript 1.0. |
+| {{SpecName('ES5.1', '#sec-15.9.5.18', 'Date.prototype.getHours')}}                     | {{Spec2('ES5.1')}}     |                                                       |
+| {{SpecName('ES6', '#sec-date.prototype.gethours', 'Date.prototype.getHours')}}     | {{Spec2('ES6')}}         |                                                       |
+| {{SpecName('ESDraft', '#sec-date.prototype.gethours', 'Date.prototype.getHours')}} | {{Spec2('ESDraft')}} |                                                       |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Date.getHours")}}
+
+## Voir aussi
+
+- {{jsxref("Date.prototype.getUTCHours()")}}
+- {{jsxref("Date.prototype.setHours()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/date/getmilliseconds/index.html b/files/fr/web/javascript/reference/global_objects/date/getmilliseconds/index.html
deleted file mode 100644
index d2befc401d..0000000000
--- a/files/fr/web/javascript/reference/global_objects/date/getmilliseconds/index.html
+++ /dev/null
@@ -1,78 +0,0 @@
----
-title: Date.prototype.getMilliseconds()
-slug: Web/JavaScript/Reference/Global_Objects/Date/getMilliseconds
-tags:
-  - Date
-  - JavaScript
-  - Méthode
-  - Prototype
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Date/getMilliseconds
-original_slug: Web/JavaScript/Reference/Objets_globaux/Date/getMilliseconds
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <code><strong>getMilliseconds()</strong></code> renvoie les millièmes de secondes de la date renseignée d'après l'heure locale.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/date-getmilliseconds.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>dateObj</var>.getMilliseconds()</pre>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Un nombre entre 0 et 999 indiquant le nombre de millisecondes pour la date indiquée, selon l'heure locale.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Utiliser_getMilliseconds()">Utiliser <code>getMilliseconds()</code></h3>
-
-<p>L'exemple suivant assigne la partie des millièmes de secondes de l'heure courante à la variable <code>ms</code>.</p>
-
-<pre class="brush: js">var aujd = new Date();
-var ms = aujd.getMilliseconds();
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES1')}}</td>
-   <td>{{Spec2('ES1')}}</td>
-   <td>Définition initiale. Implémentée avec JavaScript 1.3.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-15.9.5.24', 'Date.prototype.getMilliseconds')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-date.prototype.getmilliseconds', 'Date.prototype.getMilliseconds')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-date.prototype.getmilliseconds', 'Date.prototype.getMilliseconds')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Date.getMilliseconds")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Date.prototype.getUTCMilliseconds()")}}</li>
- <li>{{jsxref("Date.prototype.setMilliseconds()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/date/getmilliseconds/index.md b/files/fr/web/javascript/reference/global_objects/date/getmilliseconds/index.md
new file mode 100644
index 0000000000..5476fccef0
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/date/getmilliseconds/index.md
@@ -0,0 +1,54 @@
+---
+title: Date.prototype.getMilliseconds()
+slug: Web/JavaScript/Reference/Global_Objects/Date/getMilliseconds
+tags:
+  - Date
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/getMilliseconds
+original_slug: Web/JavaScript/Reference/Objets_globaux/Date/getMilliseconds
+---
+{{JSRef}}
+
+La méthode **`getMilliseconds()`** renvoie les millièmes de secondes de la date renseignée d'après l'heure locale.
+
+{{EmbedInteractiveExample("pages/js/date-getmilliseconds.html")}}
+
+## Syntaxe
+
+    dateObj.getMilliseconds()
+
+### Valeur de retour
+
+Un nombre entre 0 et 999 indiquant le nombre de millisecondes pour la date indiquée, selon l'heure locale.
+
+## Exemples
+
+### Utiliser `getMilliseconds()`
+
+L'exemple suivant assigne la partie des millièmes de secondes de l'heure courante à la variable `ms`.
+
+```js
+var aujd = new Date();
+var ms = aujd.getMilliseconds();
+```
+
+## Spécifications
+
+| Spécification                                                                                                                    | État                         | Commentaires                                          |
+| -------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- |
+| {{SpecName('ES1')}}                                                                                                         | {{Spec2('ES1')}}         | Définition initiale. Implémentée avec JavaScript 1.3. |
+| {{SpecName('ES5.1', '#sec-15.9.5.24', 'Date.prototype.getMilliseconds')}}                                 | {{Spec2('ES5.1')}}     |                                                       |
+| {{SpecName('ES6', '#sec-date.prototype.getmilliseconds', 'Date.prototype.getMilliseconds')}}     | {{Spec2('ES6')}}         |                                                       |
+| {{SpecName('ESDraft', '#sec-date.prototype.getmilliseconds', 'Date.prototype.getMilliseconds')}} | {{Spec2('ESDraft')}} |                                                       |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Date.getMilliseconds")}}
+
+## Voir aussi
+
+- {{jsxref("Date.prototype.getUTCMilliseconds()")}}
+- {{jsxref("Date.prototype.setMilliseconds()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/date/getminutes/index.html b/files/fr/web/javascript/reference/global_objects/date/getminutes/index.html
deleted file mode 100644
index 5a866eef11..0000000000
--- a/files/fr/web/javascript/reference/global_objects/date/getminutes/index.html
+++ /dev/null
@@ -1,80 +0,0 @@
----
-title: Date.prototype.getMinutes()
-slug: Web/JavaScript/Reference/Global_Objects/Date/getMinutes
-tags:
-  - Date
-  - JavaScript
-  - Méthode
-  - Prototype
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Date/getMinutes
-original_slug: Web/JavaScript/Reference/Objets_globaux/Date/getMinutes
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <strong><code>getMinutes()</code></strong> renvoie les minutes pour la date renseignée d'après l'heure locale.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/date-getminutes.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>dateObj</var>.getMinutes()</pre>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>La valeur renvoyée par <code>getMinutes</code> est un entier entre 0 et 59 représentant le nombre de minutes pour la date indiquée, selon l'heure locale.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Utiliser_getMinutes()">Utiliser <code>getMinutes()</code></h3>
-
-<p>La seconde instruction ci-dessous assigne la valeur 15 à la variable <code>minutes</code>, selon la valeur de l'objet {{jsxref("Date")}} <code>noel95</code>.</p>
-
-<pre class="brush: js">var noel95 = new Date("December 25, 1995 23:15:00");
-var minutes = noel95.getMinutes();
-
-console.log(minutes); //15
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES1')}}</td>
-   <td>{{Spec2('ES1')}}</td>
-   <td>Définition initiale. Implémentée avec JavaScript 1.0.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-15.9.5.20', 'Date.prototype.getMinutes')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-date.prototype.getminutes', 'Date.prototype.getMinutes')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-date.prototype.getminutes', 'Date.prototype.getMinutes')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Date.getMinutes")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Date.prototype.getUTCMinutes()")}}</li>
- <li>{{jsxref("Date.prototype.setMinutes()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/date/getminutes/index.md b/files/fr/web/javascript/reference/global_objects/date/getminutes/index.md
new file mode 100644
index 0000000000..f7a9657f90
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/date/getminutes/index.md
@@ -0,0 +1,56 @@
+---
+title: Date.prototype.getMinutes()
+slug: Web/JavaScript/Reference/Global_Objects/Date/getMinutes
+tags:
+  - Date
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/getMinutes
+original_slug: Web/JavaScript/Reference/Objets_globaux/Date/getMinutes
+---
+{{JSRef}}
+
+La méthode **`getMinutes()`** renvoie les minutes pour la date renseignée d'après l'heure locale.
+
+{{EmbedInteractiveExample("pages/js/date-getminutes.html")}}
+
+## Syntaxe
+
+    dateObj.getMinutes()
+
+### Valeur de retour
+
+La valeur renvoyée par `getMinutes` est un entier entre 0 et 59 représentant le nombre de minutes pour la date indiquée, selon l'heure locale.
+
+## Exemples
+
+### Utiliser `getMinutes()`
+
+La seconde instruction ci-dessous assigne la valeur 15 à la variable `minutes`, selon la valeur de l'objet {{jsxref("Date")}} `noel95`.
+
+```js
+var noel95 = new Date("December 25, 1995 23:15:00");
+var minutes = noel95.getMinutes();
+
+console.log(minutes); //15
+```
+
+## Spécifications
+
+| Spécification                                                                                                        | État                         | Commentaires                                          |
+| -------------------------------------------------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- |
+| {{SpecName('ES1')}}                                                                                             | {{Spec2('ES1')}}         | Définition initiale. Implémentée avec JavaScript 1.0. |
+| {{SpecName('ES5.1', '#sec-15.9.5.20', 'Date.prototype.getMinutes')}}                         | {{Spec2('ES5.1')}}     |                                                       |
+| {{SpecName('ES6', '#sec-date.prototype.getminutes', 'Date.prototype.getMinutes')}}         | {{Spec2('ES6')}}         |                                                       |
+| {{SpecName('ESDraft', '#sec-date.prototype.getminutes', 'Date.prototype.getMinutes')}} | {{Spec2('ESDraft')}} |                                                       |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Date.getMinutes")}}
+
+## Voir aussi
+
+- {{jsxref("Date.prototype.getUTCMinutes()")}}
+- {{jsxref("Date.prototype.setMinutes()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/date/getmonth/index.html b/files/fr/web/javascript/reference/global_objects/date/getmonth/index.html
deleted file mode 100644
index e51d1ccb64..0000000000
--- a/files/fr/web/javascript/reference/global_objects/date/getmonth/index.html
+++ /dev/null
@@ -1,91 +0,0 @@
----
-title: Date.prototype.getMonth()
-slug: Web/JavaScript/Reference/Global_Objects/Date/getMonth
-tags:
-  - Date
-  - JavaScript
-  - Méthode
-  - Prototype
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Date/getMonth
-original_slug: Web/JavaScript/Reference/Objets_globaux/Date/getMonth
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <code><strong>getMonth()</strong></code> retourne le mois de la date renseignée d'après l'heure locale. La numérotation démarre à 0 (c'est-à-dire que 0 correspond au premier mois de l'année).</p>
-
-<div>{{EmbedInteractiveExample("pages/js/date-getmonth.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><em>dateObj.g</em>etMonth()</pre>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Un entier entre 0 et 11 selon le mois de la date indiquée et d'après l'heure locale (0 correspond à janvier, 1 à février, et ainsi de suite).</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Utiliser_getMonth()">Utiliser <code>getMonth()</code></h3>
-
-<p>La seconde instruction ci-dessous assigne la valeur 11 à la variable <code>mois</code>, d'après la valeur de l'objet {{jsxref("Date")}} <code>noel95</code>.</p>
-
-<pre class="brush: js">var noel95 = new Date("December 25, 1995 23:15:00");
-var mois = noel95.getMonth();
-
-console.log(mois); //11
-</pre>
-
-<div class="blockIndicator note">
-<p><strong>Note :</strong> Si besoin, on pourra récupérer le nom complet du mois (<code>"Janvier"</code> par exemple) en utilisant <code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/DateTimeFormat">Intl.DateTimeFormat()</a></code> avec un paramètre <code>options</code>. En utilisant cette méthode, il est plus simple d'internationaliser le site ou l'application :</p>
-
-<pre class="brush: js">var options = { month: 'long'};
-console.log(new Intl.DateTimeFormat('en-US', options).format(noel95));
-// December
-console.log(new Intl.DateTimeFormat('de-DE', options).format(noel95));
-// Dezember
-</pre>
-</div>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES1')}}</td>
-   <td>{{Spec2('ES1')}}</td>
-   <td>Définition initiale. Implémentée avec JavaScript 1.0.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-15.9.5.12', 'Date.prototype.getMonth')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-date.prototype.getmonth', 'Date.prototype.getMonth')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-date.prototype.getmonth', 'Date.prototype.getMonth')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Date.getMonth")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Date.prototype.getUTCMonth()")}}</li>
- <li>{{jsxref("Date.prototype.setMonth()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/date/getmonth/index.md b/files/fr/web/javascript/reference/global_objects/date/getmonth/index.md
new file mode 100644
index 0000000000..2f3cdd1c3f
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/date/getmonth/index.md
@@ -0,0 +1,66 @@
+---
+title: Date.prototype.getMonth()
+slug: Web/JavaScript/Reference/Global_Objects/Date/getMonth
+tags:
+  - Date
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/getMonth
+original_slug: Web/JavaScript/Reference/Objets_globaux/Date/getMonth
+---
+{{JSRef}}
+
+La méthode **`getMonth()`** retourne le mois de la date renseignée d'après l'heure locale. La numérotation démarre à 0 (c'est-à-dire que 0 correspond au premier mois de l'année).
+
+{{EmbedInteractiveExample("pages/js/date-getmonth.html")}}
+
+## Syntaxe
+
+    dateObj.getMonth()
+
+### Valeur de retour
+
+Un entier entre 0 et 11 selon le mois de la date indiquée et d'après l'heure locale (0 correspond à janvier, 1 à février, et ainsi de suite).
+
+## Exemples
+
+### Utiliser `getMonth()`
+
+La seconde instruction ci-dessous assigne la valeur 11 à la variable `mois`, d'après la valeur de l'objet {{jsxref("Date")}} `noel95`.
+
+```js
+var noel95 = new Date("December 25, 1995 23:15:00");
+var mois = noel95.getMonth();
+
+console.log(mois); //11
+```
+
+> **Note :** Si besoin, on pourra récupérer le nom complet du mois (`"Janvier"` par exemple) en utilisant [`Intl.DateTimeFormat()`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/DateTimeFormat) avec un paramètre `options`. En utilisant cette méthode, il est plus simple d'internationaliser le site ou l'application :
+>
+> ```js
+> var options = { month: 'long'};
+> console.log(new Intl.DateTimeFormat('en-US', options).format(noel95));
+> // December
+> console.log(new Intl.DateTimeFormat('de-DE', options).format(noel95));
+> // Dezember
+> ```
+
+## Spécifications
+
+| Spécification                                                                                                | État                         | Commentaires                                          |
+| ------------------------------------------------------------------------------------------------------------ | ---------------------------- | ----------------------------------------------------- |
+| {{SpecName('ES1')}}                                                                                     | {{Spec2('ES1')}}         | Définition initiale. Implémentée avec JavaScript 1.0. |
+| {{SpecName('ES5.1', '#sec-15.9.5.12', 'Date.prototype.getMonth')}}                     | {{Spec2('ES5.1')}}     |                                                       |
+| {{SpecName('ES6', '#sec-date.prototype.getmonth', 'Date.prototype.getMonth')}}     | {{Spec2('ES6')}}         |                                                       |
+| {{SpecName('ESDraft', '#sec-date.prototype.getmonth', 'Date.prototype.getMonth')}} | {{Spec2('ESDraft')}} |                                                       |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Date.getMonth")}}
+
+## Voir aussi
+
+- {{jsxref("Date.prototype.getUTCMonth()")}}
+- {{jsxref("Date.prototype.setMonth()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/date/getseconds/index.html b/files/fr/web/javascript/reference/global_objects/date/getseconds/index.html
deleted file mode 100644
index 32c91e493c..0000000000
--- a/files/fr/web/javascript/reference/global_objects/date/getseconds/index.html
+++ /dev/null
@@ -1,80 +0,0 @@
----
-title: Date.prototype.getSeconds()
-slug: Web/JavaScript/Reference/Global_Objects/Date/getSeconds
-tags:
-  - Date
-  - JavaScript
-  - Méthode
-  - Prototype
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Date/getSeconds
-original_slug: Web/JavaScript/Reference/Objets_globaux/Date/getSeconds
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <strong><code>getSeconds()</code></strong> renvoie les secondes pour la date renseignée d'après l'heure locale.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/date-getseconds.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">dateObj.getSeconds()</pre>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>La valeur renvoyée par <code>getSeconds()</code> est un entier entre 0 et 59 correspondant au nombre de secondes pour la date donnée selon l'heure locale.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Utiliser_getSeconds()">Utiliser <code>getSeconds()</code></h3>
-
-<p>La seconde instruction ci-dessous assigne la valeur 30 à la variable <code>secondes</code>, selon la valeur de l'objet {{jsxref("Date")}} <code>noel95</code>.</p>
-
-<pre class="brush: js">var noel95 = new Date("December 25, 1995 23:15:30");
-var secondes = noel95.getSeconds();
-
-console.log(secondes); //30
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES1')}}</td>
-   <td>{{Spec2('ES1')}}</td>
-   <td>Définition initiale. Implémentée avec JavaScript 1.0.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-15.9.5.22', 'Date.prototype.getSeconds')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-date.prototype.getseconds', 'Date.prototype.getSeconds')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-date.prototype.getseconds', 'Date.prototype.getSeconds')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Date.getSeconds")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Date.prototype.getUTCSeconds()")}}</li>
- <li>{{jsxref("Date.prototype.setSeconds()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/date/getseconds/index.md b/files/fr/web/javascript/reference/global_objects/date/getseconds/index.md
new file mode 100644
index 0000000000..ddbd49d19a
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/date/getseconds/index.md
@@ -0,0 +1,56 @@
+---
+title: Date.prototype.getSeconds()
+slug: Web/JavaScript/Reference/Global_Objects/Date/getSeconds
+tags:
+  - Date
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/getSeconds
+original_slug: Web/JavaScript/Reference/Objets_globaux/Date/getSeconds
+---
+{{JSRef}}
+
+La méthode **`getSeconds()`** renvoie les secondes pour la date renseignée d'après l'heure locale.
+
+{{EmbedInteractiveExample("pages/js/date-getseconds.html")}}
+
+## Syntaxe
+
+    dateObj.getSeconds()
+
+### Valeur de retour
+
+La valeur renvoyée par `getSeconds()` est un entier entre 0 et 59 correspondant au nombre de secondes pour la date donnée selon l'heure locale.
+
+## Exemples
+
+### Utiliser `getSeconds()`
+
+La seconde instruction ci-dessous assigne la valeur 30 à la variable `secondes`, selon la valeur de l'objet {{jsxref("Date")}} `noel95`.
+
+```js
+var noel95 = new Date("December 25, 1995 23:15:30");
+var secondes = noel95.getSeconds();
+
+console.log(secondes); //30
+```
+
+## Spécifications
+
+| Spécification                                                                                                        | État                         | Commentaires                                          |
+| -------------------------------------------------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- |
+| {{SpecName('ES1')}}                                                                                             | {{Spec2('ES1')}}         | Définition initiale. Implémentée avec JavaScript 1.0. |
+| {{SpecName('ES5.1', '#sec-15.9.5.22', 'Date.prototype.getSeconds')}}                         | {{Spec2('ES5.1')}}     |                                                       |
+| {{SpecName('ES6', '#sec-date.prototype.getseconds', 'Date.prototype.getSeconds')}}         | {{Spec2('ES6')}}         |                                                       |
+| {{SpecName('ESDraft', '#sec-date.prototype.getseconds', 'Date.prototype.getSeconds')}} | {{Spec2('ESDraft')}} |                                                       |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Date.getSeconds")}}
+
+## Voir aussi
+
+- {{jsxref("Date.prototype.getUTCSeconds()")}}
+- {{jsxref("Date.prototype.setSeconds()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/date/gettime/index.html b/files/fr/web/javascript/reference/global_objects/date/gettime/index.html
deleted file mode 100644
index 86ceaedccd..0000000000
--- a/files/fr/web/javascript/reference/global_objects/date/gettime/index.html
+++ /dev/null
@@ -1,119 +0,0 @@
----
-title: Date.prototype.getTime()
-slug: Web/JavaScript/Reference/Global_Objects/Date/getTime
-tags:
-  - Date
-  - JavaScript
-  - Méthode
-  - Prototype
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Date/getTime
-original_slug: Web/JavaScript/Reference/Objets_globaux/Date/getTime
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <strong><code>getTime()</code></strong> renvoie la valeur numérique correspondant au temps pour la date renseignée, d'après le temps universel (c'est-à-dire relative à UTC, une mesure donnée par <code>getTime()</code> sera indépendante du fuseau horaire sur lequel on se trouve). Cette valeur numérique est le nombre de millisecondes écoulées depuis le premier janvier 1970 à minuit UTC.</p>
-
-<p>Vous pouvez utiliser cette méthode pour vous affecter une date et un temps à une autre instance de <code>Date</code>. Cette méthode est fonctionnellement équivalente à la méthode {{jsxref("Date.valueof", "valueOf()")}}.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/date-gettime.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">dateObj.getTime()</pre>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>La valeur renvoyée par la méthode <code>getTime()</code> est le nombre de millièmes de secondes entre le 1 janvier 1970 à 00:00:00 UTC et la date indiquée.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Utiliser_getTime()">Utiliser <code>getTime()</code></h3>
-
-<p>L'exemple qui suit assigne la valeur de <code>anniversaire</code> à <code>copie</code> :</p>
-
-<pre class="brush: js">var anniversaire = new Date(1994 , 11, 10); // 10 décembre 1994
-var copie = new Date();
-copie.setTime(anniversaire.getTime());
-</pre>
-
-<h3 id="Mesurer_un_temps_d'exécution">Mesurer un temps d'exécution</h3>
-
-<p>Effectuer une soustration entre deux appels à <code>getTime()</code> donne la durée écoulée entre ces appels. On peut donc utiliser cette méthode afin de connaître la durée d'exécution de certaines opérations (voir également la méthode {{jsxref("Date.now()")}} qui peut permettre d'éviter d'instancier des objets intermédiaires).</p>
-
-<pre class="brush: js">var fin, début;
-
-début = new Date();
-for (var i = 0; i &lt; 1000; i++) {
-  Math.sqrt(i);
-}
-fin = new Date();
-
-console.log('Durée de cette opération : ' + (fin.getTime() - début.getTime()) + ' msec');
-</pre>
-
-<h2 id="Précision_temporelle_réduite">Précision temporelle réduite</h2>
-
-<p>Afin de protéger contre les attaques de minutage et d'identification, la précision de <code>new Date().getTime()</code> peut être arrondie en fonction des paramètres du navigateur. Pour Firefox, la préférence <code>privacy.reduceTimerPrecision</code> est activée par défaut et vaut, par défaut 20µs pour Firefox 59 et 2ms pour Firefox 60.</p>
-
-<pre class="brush: js">// Précision temporelle réduite (2ms) pour Firefox 60
-new Date().getTime();
-// 1519211809934
-// 1519211810362
-// 1519211811670
-// ...
-
-
-// précision temporelle avec `privacy.resistFingerprinting` activé
-new Date().getTime();
-// 1519129853500
-// 1519129858900
-// 1519129864400
-// ...
-</pre>
-
-<p>Pour Firefox, il est également possible d'activer <code>privacy.resistFingerprinting</code> auquel cas la précision sera 100ms ou la valeur de <code>privacy.resistFingerprinting.reduceTimerPrecision.microseconds</code> selon laquelle est plus grande.</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES1')}}</td>
-   <td>{{Spec2('ES1')}}</td>
-   <td>Définition initiale. Implémentée avec JavaScript 1.0.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-15.9.5.9', 'Date.prototype.getTime')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-date.prototype.gettime', 'Date.prototype.getTime')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-date.prototype.gettime', 'Date.prototype.getTime')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Date.getTime")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Date.prototype.setTime()")}}</li>
- <li>{{jsxref("Date.prototype.valueOf()")}}</li>
- <li>{{jsxref("Date.prototype.now()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/date/gettime/index.md b/files/fr/web/javascript/reference/global_objects/date/gettime/index.md
new file mode 100644
index 0000000000..9c2ac28bca
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/date/gettime/index.md
@@ -0,0 +1,97 @@
+---
+title: Date.prototype.getTime()
+slug: Web/JavaScript/Reference/Global_Objects/Date/getTime
+tags:
+  - Date
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/getTime
+original_slug: Web/JavaScript/Reference/Objets_globaux/Date/getTime
+---
+{{JSRef}}
+
+La méthode **`getTime()`** renvoie la valeur numérique correspondant au temps pour la date renseignée, d'après le temps universel (c'est-à-dire relative à UTC, une mesure donnée par `getTime()` sera indépendante du fuseau horaire sur lequel on se trouve). Cette valeur numérique est le nombre de millisecondes écoulées depuis le premier janvier 1970 à minuit UTC.
+
+Vous pouvez utiliser cette méthode pour vous affecter une date et un temps à une autre instance de `Date`. Cette méthode est fonctionnellement équivalente à la méthode {{jsxref("Date.valueof", "valueOf()")}}.
+
+{{EmbedInteractiveExample("pages/js/date-gettime.html")}}
+
+## Syntaxe
+
+    dateObj.getTime()
+
+### Valeur de retour
+
+La valeur renvoyée par la méthode `getTime()` est le nombre de millièmes de secondes entre le 1 janvier 1970 à 00:00:00 UTC et la date indiquée.
+
+## Exemples
+
+### Utiliser `getTime()`
+
+L'exemple qui suit assigne la valeur de `anniversaire` à `copie` :
+
+```js
+var anniversaire = new Date(1994 , 11, 10); // 10 décembre 1994
+var copie = new Date();
+copie.setTime(anniversaire.getTime());
+```
+
+### Mesurer un temps d'exécution
+
+Effectuer une soustration entre deux appels à `getTime()` donne la durée écoulée entre ces appels. On peut donc utiliser cette méthode afin de connaître la durée d'exécution de certaines opérations (voir également la méthode {{jsxref("Date.now()")}} qui peut permettre d'éviter d'instancier des objets intermédiaires).
+
+```js
+var fin, début;
+
+début = new Date();
+for (var i = 0; i < 1000; i++) {
+  Math.sqrt(i);
+}
+fin = new Date();
+
+console.log('Durée de cette opération : ' + (fin.getTime() - début.getTime()) + ' msec');
+```
+
+## Précision temporelle réduite
+
+Afin de protéger contre les attaques de minutage et d'identification, la précision de `new Date().getTime()` peut être arrondie en fonction des paramètres du navigateur. Pour Firefox, la préférence `privacy.reduceTimerPrecision` est activée par défaut et vaut, par défaut 20µs pour Firefox 59 et 2ms pour Firefox 60.
+
+```js
+// Précision temporelle réduite (2ms) pour Firefox 60
+new Date().getTime();
+// 1519211809934
+// 1519211810362
+// 1519211811670
+// ...
+
+
+// précision temporelle avec `privacy.resistFingerprinting` activé
+new Date().getTime();
+// 1519129853500
+// 1519129858900
+// 1519129864400
+// ...
+```
+
+Pour Firefox, il est également possible d'activer `privacy.resistFingerprinting` auquel cas la précision sera 100ms ou la valeur de `privacy.resistFingerprinting.reduceTimerPrecision.microseconds` selon laquelle est plus grande.
+
+## Spécifications
+
+| Spécification                                                                                                | État                         | Commentaires                                          |
+| ------------------------------------------------------------------------------------------------------------ | ---------------------------- | ----------------------------------------------------- |
+| {{SpecName('ES1')}}                                                                                     | {{Spec2('ES1')}}         | Définition initiale. Implémentée avec JavaScript 1.0. |
+| {{SpecName('ES5.1', '#sec-15.9.5.9', 'Date.prototype.getTime')}}                         | {{Spec2('ES5.1')}}     |                                                       |
+| {{SpecName('ES6', '#sec-date.prototype.gettime', 'Date.prototype.getTime')}}         | {{Spec2('ES6')}}         |                                                       |
+| {{SpecName('ESDraft', '#sec-date.prototype.gettime', 'Date.prototype.getTime')}} | {{Spec2('ESDraft')}} |                                                       |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Date.getTime")}}
+
+## Voir aussi
+
+- {{jsxref("Date.prototype.setTime()")}}
+- {{jsxref("Date.prototype.valueOf()")}}
+- {{jsxref("Date.prototype.now()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/date/gettimezoneoffset/index.html b/files/fr/web/javascript/reference/global_objects/date/gettimezoneoffset/index.html
deleted file mode 100644
index a4a46512c1..0000000000
--- a/files/fr/web/javascript/reference/global_objects/date/gettimezoneoffset/index.html
+++ /dev/null
@@ -1,79 +0,0 @@
----
-title: Date.prototype.getTimezoneOffset()
-slug: Web/JavaScript/Reference/Global_Objects/Date/getTimezoneOffset
-tags:
-  - Date
-  - JavaScript
-  - Méthode
-  - Prototype
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Date/getTimezoneOffset
-original_slug: Web/JavaScript/Reference/Objets_globaux/Date/getTimezoneOffset
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <code><strong>getTimezoneOffset()</strong></code> retourne la différence en minutes entre le fuseau horaire UTC, et celui de l'heure locale.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/date-gettimezoneoffset.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">dateObj.getTimezoneOffset()</pre>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>La valeur retournée est la différence, exprimée en minutes, entre les fuseaux horaires UTC et celui de l'heure locale. Cette différence est positive si le fuseau horaire local est en retard par rapport à UTC, et négative s'il est en avance.</p>
-
-<p>Par exemple, si votre fuseau horaire est UTC+10 (Australian Eastern Standard Time, Vladivostok, Chamorro), la valeur retournée sera -600. L'heure d'été (DST pour <em>daylight saving time</em> en anglais) empêche cette valeur d'être une constante.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Utiliser_getTimezoneOffset()">Utiliser <code>getTimezoneOffset()</code></h3>
-
-<pre class="brush:js">var x = new Date();
-var differenceFuseauxEnHeures = x.getTimezoneOffset() / 60;
-// -2
-
-// Décalage temporel local pour le premier mai
-// Attention, Date() utilise les mois numérotés
-// à partir de zéro et mai est donc représenté
-// avec 4 (et pas 5)
-var travail = new Date(2017, 4, 1);
-var decalage = travail.getTimezoneOffset() / 60;
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES1')}}</td>
-   <td>{{Spec2('ES1')}}</td>
-   <td>Définition initiale. Implémentée avec JavaScript 1.0.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-15.9.5.26', 'Date.prototype.getTimezoneOffset')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-date.prototype.gettimezoneoffset', 'Date.prototype.getTimezoneOffset')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-date.prototype.gettimezoneoffset', 'Date.prototype.getTimezoneOffset')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Date.getTimezoneOffset")}}</p>
diff --git a/files/fr/web/javascript/reference/global_objects/date/gettimezoneoffset/index.md b/files/fr/web/javascript/reference/global_objects/date/gettimezoneoffset/index.md
new file mode 100644
index 0000000000..a313ba77c9
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/date/gettimezoneoffset/index.md
@@ -0,0 +1,57 @@
+---
+title: Date.prototype.getTimezoneOffset()
+slug: Web/JavaScript/Reference/Global_Objects/Date/getTimezoneOffset
+tags:
+  - Date
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/getTimezoneOffset
+original_slug: Web/JavaScript/Reference/Objets_globaux/Date/getTimezoneOffset
+---
+{{JSRef}}
+
+La méthode **`getTimezoneOffset()`** retourne la différence en minutes entre le fuseau horaire UTC, et celui de l'heure locale.
+
+{{EmbedInteractiveExample("pages/js/date-gettimezoneoffset.html")}}
+
+## Syntaxe
+
+    dateObj.getTimezoneOffset()
+
+### Valeur de retour
+
+La valeur retournée est la différence, exprimée en minutes, entre les fuseaux horaires UTC et celui de l'heure locale. Cette différence est positive si le fuseau horaire local est en retard par rapport à UTC, et négative s'il est en avance.
+
+Par exemple, si votre fuseau horaire est UTC+10 (Australian Eastern Standard Time, Vladivostok, Chamorro), la valeur retournée sera -600. L'heure d'été (DST pour _daylight saving time_ en anglais) empêche cette valeur d'être une constante.
+
+## Exemples
+
+### Utiliser `getTimezoneOffset()`
+
+```js
+var x = new Date();
+var differenceFuseauxEnHeures = x.getTimezoneOffset() / 60;
+// -2
+
+// Décalage temporel local pour le premier mai
+// Attention, Date() utilise les mois numérotés
+// à partir de zéro et mai est donc représenté
+// avec 4 (et pas 5)
+var travail = new Date(2017, 4, 1);
+var decalage = travail.getTimezoneOffset() / 60;
+```
+
+## Spécifications
+
+| Spécification                                                                                                                        | État                         | Commentaires                                          |
+| ------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------- | ----------------------------------------------------- |
+| {{SpecName('ES1')}}                                                                                                             | {{Spec2('ES1')}}         | Définition initiale. Implémentée avec JavaScript 1.0. |
+| {{SpecName('ES5.1', '#sec-15.9.5.26', 'Date.prototype.getTimezoneOffset')}}                                 | {{Spec2('ES5.1')}}     |                                                       |
+| {{SpecName('ES6', '#sec-date.prototype.gettimezoneoffset', 'Date.prototype.getTimezoneOffset')}}     | {{Spec2('ES6')}}         |                                                       |
+| {{SpecName('ESDraft', '#sec-date.prototype.gettimezoneoffset', 'Date.prototype.getTimezoneOffset')}} | {{Spec2('ESDraft')}} |                                                       |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Date.getTimezoneOffset")}}
diff --git a/files/fr/web/javascript/reference/global_objects/date/getutcdate/index.html b/files/fr/web/javascript/reference/global_objects/date/getutcdate/index.html
deleted file mode 100644
index 0d4fa90f29..0000000000
--- a/files/fr/web/javascript/reference/global_objects/date/getutcdate/index.html
+++ /dev/null
@@ -1,79 +0,0 @@
----
-title: Date.prototype.getUTCDate()
-slug: Web/JavaScript/Reference/Global_Objects/Date/getUTCDate
-tags:
-  - Date
-  - JavaScript
-  - Méthode
-  - Prototype
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Date/getUTCDate
-original_slug: Web/JavaScript/Reference/Objets_globaux/Date/getUTCDate
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <strong><code>getUTCDate()</code></strong> renvoie le jour du mois pour la date renseignée d'après UTC.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/date-getutcdate.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>dateObj</var>.getUTCDate()</pre>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>La valeur renseignée par <code>getUTCDate()</code> est un entier entre 1 et 31 pour le jour du mois de la date indiquée selon le temps universel.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Utiliser_getUTCDate()">Utiliser <code>getUTCDate()</code></h3>
-
-<p>L'exemple suivant assigne le jour du mois pour la date actuelle, à la variable <code>jour</code>.</p>
-
-<pre class="brush:js">var aujourdhui = new Date();
-var jour = aujourdhui.getUTCDate();
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES1')}}</td>
-   <td>{{Spec2('ES1')}}</td>
-   <td>Définition initiale. Implémentée avec JavaScript 1.3.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-15.9.5.15', 'Date.prototype.getUTCDate')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-date.prototype.getutcdate', 'Date.prototype.getUTCDate')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-date.prototype.getutcdate', 'Date.prototype.getUTCDate')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Date.getUTCDate")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Date.prototype.getDate()")}}</li>
- <li>{{jsxref("Date.prototype.getUTCDay()")}}</li>
- <li>{{jsxref("Date.prototype.setUTCDate()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/date/getutcdate/index.md b/files/fr/web/javascript/reference/global_objects/date/getutcdate/index.md
new file mode 100644
index 0000000000..5f062ea4fb
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/date/getutcdate/index.md
@@ -0,0 +1,55 @@
+---
+title: Date.prototype.getUTCDate()
+slug: Web/JavaScript/Reference/Global_Objects/Date/getUTCDate
+tags:
+  - Date
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/getUTCDate
+original_slug: Web/JavaScript/Reference/Objets_globaux/Date/getUTCDate
+---
+{{JSRef}}
+
+La méthode **`getUTCDate()`** renvoie le jour du mois pour la date renseignée d'après UTC.
+
+{{EmbedInteractiveExample("pages/js/date-getutcdate.html")}}
+
+## Syntaxe
+
+    dateObj.getUTCDate()
+
+### Valeur de retour
+
+La valeur renseignée par `getUTCDate()` est un entier entre 1 et 31 pour le jour du mois de la date indiquée selon le temps universel.
+
+## Exemples
+
+### Utiliser `getUTCDate()`
+
+L'exemple suivant assigne le jour du mois pour la date actuelle, à la variable `jour`.
+
+```js
+var aujourdhui = new Date();
+var jour = aujourdhui.getUTCDate();
+```
+
+## Spécifications
+
+| Spécification                                                                                                        | État                         | Commentaires                                          |
+| -------------------------------------------------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- |
+| {{SpecName('ES1')}}                                                                                             | {{Spec2('ES1')}}         | Définition initiale. Implémentée avec JavaScript 1.3. |
+| {{SpecName('ES5.1', '#sec-15.9.5.15', 'Date.prototype.getUTCDate')}}                         | {{Spec2('ES5.1')}}     |                                                       |
+| {{SpecName('ES6', '#sec-date.prototype.getutcdate', 'Date.prototype.getUTCDate')}}         | {{Spec2('ES6')}}         |                                                       |
+| {{SpecName('ESDraft', '#sec-date.prototype.getutcdate', 'Date.prototype.getUTCDate')}} | {{Spec2('ESDraft')}} |                                                       |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Date.getUTCDate")}}
+
+## Voir aussi
+
+- {{jsxref("Date.prototype.getDate()")}}
+- {{jsxref("Date.prototype.getUTCDay()")}}
+- {{jsxref("Date.prototype.setUTCDate()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/date/getutcday/index.html b/files/fr/web/javascript/reference/global_objects/date/getutcday/index.html
deleted file mode 100644
index db8134b5ce..0000000000
--- a/files/fr/web/javascript/reference/global_objects/date/getutcday/index.html
+++ /dev/null
@@ -1,79 +0,0 @@
----
-title: Date.prototype.getUTCDay()
-slug: Web/JavaScript/Reference/Global_Objects/Date/getUTCDay
-tags:
-  - Date
-  - JavaScript
-  - Méthode
-  - Prototype
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Date/getUTCDay
-original_slug: Web/JavaScript/Reference/Objets_globaux/Date/getUTCDay
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <strong><code>getUTCDay()</code></strong> renvoie le jour de la semaine pour la date renseignée d'après UTC. La numérotation commence à 0, et dimanche est considéré comme le premier jour de la semaine.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/date-getutcday.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">dateObj.getUTCDay()</pre>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>La valeur renvoyée par <code>getUTCDay()</code> est un entier correspondant au jour de la semaine de la date indiquée selon le temps universel (0 pour dimanche, 1 pour lundi, 2 pour mardi, et ainsi de suite).</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Utiliser_getUTCDay()">Utiliser <code>getUTCDay()</code></h3>
-
-<p>L'exemple suivant assigne le jour de la semaine de la date actuelle à la variable <code>jourSemaine</code>.</p>
-
-<pre class="brush: js">var aujourdhui = new Date()
-var jourSemaine = aujourdhui.getUTCDay()
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES1')}}</td>
-   <td>{{Spec2('ES1')}}</td>
-   <td>Définition initiale. Implémentée avec JavaScript 1.3.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-15.9.5.17', 'Date.prototype.getUTCDay')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-date.prototype.getutcday', 'Date.prototype.getUTCDay')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-date.prototype.getutcday', 'Date.prototype.getUTCDay')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Date.getUTCDay")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Date.prototype.getUTCDate()")}}</li>
- <li>{{jsxref("Date.prototype.getDay()")}}</li>
- <li>{{jsxref("Date.prototype.setUTCDate()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/date/getutcday/index.md b/files/fr/web/javascript/reference/global_objects/date/getutcday/index.md
new file mode 100644
index 0000000000..6fe7f094b9
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/date/getutcday/index.md
@@ -0,0 +1,55 @@
+---
+title: Date.prototype.getUTCDay()
+slug: Web/JavaScript/Reference/Global_Objects/Date/getUTCDay
+tags:
+  - Date
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/getUTCDay
+original_slug: Web/JavaScript/Reference/Objets_globaux/Date/getUTCDay
+---
+{{JSRef}}
+
+La méthode **`getUTCDay()`** renvoie le jour de la semaine pour la date renseignée d'après UTC. La numérotation commence à 0, et dimanche est considéré comme le premier jour de la semaine.
+
+{{EmbedInteractiveExample("pages/js/date-getutcday.html")}}
+
+## Syntaxe
+
+    dateObj.getUTCDay()
+
+### Valeur de retour
+
+La valeur renvoyée par `getUTCDay()` est un entier correspondant au jour de la semaine de la date indiquée selon le temps universel (0 pour dimanche, 1 pour lundi, 2 pour mardi, et ainsi de suite).
+
+## Exemples
+
+### Utiliser `getUTCDay()`
+
+L'exemple suivant assigne le jour de la semaine de la date actuelle à la variable `jourSemaine`.
+
+```js
+var aujourdhui = new Date()
+var jourSemaine = aujourdhui.getUTCDay()
+```
+
+## Spécifications
+
+| Spécification                                                                                                    | État                         | Commentaires                                          |
+| ---------------------------------------------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- |
+| {{SpecName('ES1')}}                                                                                         | {{Spec2('ES1')}}         | Définition initiale. Implémentée avec JavaScript 1.3. |
+| {{SpecName('ES5.1', '#sec-15.9.5.17', 'Date.prototype.getUTCDay')}}                         | {{Spec2('ES5.1')}}     |                                                       |
+| {{SpecName('ES6', '#sec-date.prototype.getutcday', 'Date.prototype.getUTCDay')}}     | {{Spec2('ES6')}}         |                                                       |
+| {{SpecName('ESDraft', '#sec-date.prototype.getutcday', 'Date.prototype.getUTCDay')}} | {{Spec2('ESDraft')}} |                                                       |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Date.getUTCDay")}}
+
+## Voir aussi
+
+- {{jsxref("Date.prototype.getUTCDate()")}}
+- {{jsxref("Date.prototype.getDay()")}}
+- {{jsxref("Date.prototype.setUTCDate()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/date/getutcfullyear/index.html b/files/fr/web/javascript/reference/global_objects/date/getutcfullyear/index.html
deleted file mode 100644
index c2c81cc8ab..0000000000
--- a/files/fr/web/javascript/reference/global_objects/date/getutcfullyear/index.html
+++ /dev/null
@@ -1,77 +0,0 @@
----
-title: Date.prototype.getUTCFullYear()
-slug: Web/JavaScript/Reference/Global_Objects/Date/getUTCFullYear
-tags:
-  - Date
-  - JavaScript
-  - Méthode
-  - Prototype
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Date/getUTCFullYear
-original_slug: Web/JavaScript/Reference/Objets_globaux/Date/getUTCFullYear
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <code><strong>getUTCFullYear()</strong></code> renvoie l'année de la date renseignée, d'après UTC.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/date-getutcfullyear.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">dateObj.getUTCFullYear()</pre>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>La valeur renvoyée par <code>getUTCFullYear</code><code>()</code> est un nombre correspondant à l'année de la date indiquée selon le temps universel. Pour les dates entre les années 1000 et 9999, <code>getUTCFullYear</code><code>()</code> renvoie un nombre à quatre chiffres, par exemple 1995.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Utiliser_getUTCFullYear()">Utiliser <code>getUTCFullYear()</code></h3>
-
-<p>L'exemple suivant assigne une valeur à 4 chiffres, l'année courante, à la variable <code>annee</code>.</p>
-
-<pre class="brush:js">var aujourdhui = new Date();
-var annee = aujourdhui.getUTCFullYear();</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES1')}}</td>
-   <td>{{Spec2('ES1')}}</td>
-   <td>Définition initiale. Implémentée avec JavaScript 1.3.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-15.9.5.11', 'Date.prototype.getUTCFullYear')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-date.prototype.getutcfullyear', 'Date.prototype.getUTCFullYear')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-date.prototype.getutcfullyear', 'Date.prototype.getUTCFullYear')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Date.getUTCFullYear")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Date.prototype.getFullYear()")}}</li>
- <li>{{jsxref("Date.prototype.setFullYear()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/date/getutcfullyear/index.md b/files/fr/web/javascript/reference/global_objects/date/getutcfullyear/index.md
new file mode 100644
index 0000000000..a481accedf
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/date/getutcfullyear/index.md
@@ -0,0 +1,54 @@
+---
+title: Date.prototype.getUTCFullYear()
+slug: Web/JavaScript/Reference/Global_Objects/Date/getUTCFullYear
+tags:
+  - Date
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/getUTCFullYear
+original_slug: Web/JavaScript/Reference/Objets_globaux/Date/getUTCFullYear
+---
+{{JSRef}}
+
+La méthode **`getUTCFullYear()`** renvoie l'année de la date renseignée, d'après UTC.
+
+{{EmbedInteractiveExample("pages/js/date-getutcfullyear.html")}}
+
+## Syntaxe
+
+    dateObj.getUTCFullYear()
+
+### Valeur de retour
+
+La valeur renvoyée par ` getUTCFullYear``() ` est un nombre correspondant à l'année de la date indiquée selon le temps universel. Pour les dates entre les années 1000 et 9999, ` getUTCFullYear``() ` renvoie un nombre à quatre chiffres, par exemple 1995.
+
+## Exemples
+
+### Utiliser `getUTCFullYear()`
+
+L'exemple suivant assigne une valeur à 4 chiffres, l'année courante, à la variable `annee`.
+
+```js
+var aujourdhui = new Date();
+var annee = aujourdhui.getUTCFullYear();
+```
+
+## Spécifications
+
+| Spécification                                                                                                                | État                         | Commentaires                                          |
+| ---------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- |
+| {{SpecName('ES1')}}                                                                                                     | {{Spec2('ES1')}}         | Définition initiale. Implémentée avec JavaScript 1.3. |
+| {{SpecName('ES5.1', '#sec-15.9.5.11', 'Date.prototype.getUTCFullYear')}}                             | {{Spec2('ES5.1')}}     |                                                       |
+| {{SpecName('ES6', '#sec-date.prototype.getutcfullyear', 'Date.prototype.getUTCFullYear')}}     | {{Spec2('ES6')}}         |                                                       |
+| {{SpecName('ESDraft', '#sec-date.prototype.getutcfullyear', 'Date.prototype.getUTCFullYear')}} | {{Spec2('ESDraft')}} |                                                       |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Date.getUTCFullYear")}}
+
+## Voir aussi
+
+- {{jsxref("Date.prototype.getFullYear()")}}
+- {{jsxref("Date.prototype.setFullYear()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/date/getutchours/index.html b/files/fr/web/javascript/reference/global_objects/date/getutchours/index.html
deleted file mode 100644
index 225b1d3721..0000000000
--- a/files/fr/web/javascript/reference/global_objects/date/getutchours/index.html
+++ /dev/null
@@ -1,78 +0,0 @@
----
-title: Date.prototype.getUTCHours()
-slug: Web/JavaScript/Reference/Global_Objects/Date/getUTCHours
-tags:
-  - Date
-  - JavaScript
-  - Méthode
-  - Prototype
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Date/getUTCHours
-original_slug: Web/JavaScript/Reference/Objets_globaux/Date/getUTCHours
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <strong><code>getUTCHours()</code></strong> renvoie les heures de la date renseignée, d'après UTC.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/date-getutchours.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">dateObj.getUTCHours()</pre>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Un entier entre 0 et 23 correspondant à l'heure de la date indiquée selon le temps universel.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Utiliser_getUTCHours()">Utiliser <code>getUTCHours()</code></h3>
-
-<p>L'exemple suivant assigne les heures de la date actuelle à la variable <code>heures</code>.</p>
-
-<pre class="brush: js">var aujourdhui = new Date();
-var heures = aujourdhui.getUTCHours();
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES1')}}</td>
-   <td>{{Spec2('ES1')}}</td>
-   <td>Définition initiale. Implémentée avec JavaScript 1.3.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-15.9.5.19', 'Date.prototype.getUTCHours')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-date.prototype.getutchours', 'Date.prototype.getUTCHours')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-date.prototype.getutchours', 'Date.prototype.getUTCHours')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Date.getUTCHours")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Date.prototype.getHours()")}}</li>
- <li>{{jsxref("Date.prototype.setUTCHours()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/date/getutchours/index.md b/files/fr/web/javascript/reference/global_objects/date/getutchours/index.md
new file mode 100644
index 0000000000..186c88055b
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/date/getutchours/index.md
@@ -0,0 +1,54 @@
+---
+title: Date.prototype.getUTCHours()
+slug: Web/JavaScript/Reference/Global_Objects/Date/getUTCHours
+tags:
+  - Date
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/getUTCHours
+original_slug: Web/JavaScript/Reference/Objets_globaux/Date/getUTCHours
+---
+{{JSRef}}
+
+La méthode **`getUTCHours()`** renvoie les heures de la date renseignée, d'après UTC.
+
+{{EmbedInteractiveExample("pages/js/date-getutchours.html")}}
+
+## Syntaxe
+
+    dateObj.getUTCHours()
+
+### Valeur de retour
+
+Un entier entre 0 et 23 correspondant à l'heure de la date indiquée selon le temps universel.
+
+## Exemples
+
+### Utiliser `getUTCHours()`
+
+L'exemple suivant assigne les heures de la date actuelle à la variable `heures`.
+
+```js
+var aujourdhui = new Date();
+var heures = aujourdhui.getUTCHours();
+```
+
+## Spécifications
+
+| Spécification                                                                                                        | État                         | Commentaires                                          |
+| -------------------------------------------------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- |
+| {{SpecName('ES1')}}                                                                                             | {{Spec2('ES1')}}         | Définition initiale. Implémentée avec JavaScript 1.3. |
+| {{SpecName('ES5.1', '#sec-15.9.5.19', 'Date.prototype.getUTCHours')}}                         | {{Spec2('ES5.1')}}     |                                                       |
+| {{SpecName('ES6', '#sec-date.prototype.getutchours', 'Date.prototype.getUTCHours')}}     | {{Spec2('ES6')}}         |                                                       |
+| {{SpecName('ESDraft', '#sec-date.prototype.getutchours', 'Date.prototype.getUTCHours')}} | {{Spec2('ESDraft')}} |                                                       |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Date.getUTCHours")}}
+
+## Voir aussi
+
+- {{jsxref("Date.prototype.getHours()")}}
+- {{jsxref("Date.prototype.setUTCHours()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/date/getutcmilliseconds/index.html b/files/fr/web/javascript/reference/global_objects/date/getutcmilliseconds/index.html
deleted file mode 100644
index 898edb560b..0000000000
--- a/files/fr/web/javascript/reference/global_objects/date/getutcmilliseconds/index.html
+++ /dev/null
@@ -1,82 +0,0 @@
----
-title: Date.prototype.getUTCMilliseconds()
-slug: Web/JavaScript/Reference/Global_Objects/Date/getUTCMilliseconds
-tags:
-  - Date
-  - JavaScript
-  - Méthode
-  - Prototype
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Date/getUTCMilliseconds
-original_slug: Web/JavaScript/Reference/Objets_globaux/Date/getUTCMilliseconds
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <strong><code>getUTCMilliseconds()</code></strong> renvoie les millièmes de secondes pour la date renseignée selon UTC.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/date-getutcmilliseconds.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">dateObj.getUTCMilliseconds()</pre>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Un entier entre 0 et 999 correspondant au nombre de millisecondes pour la date indiquée, selon le temps universel.</p>
-
-<div class="blockIndicator note">
-<p><strong>Note :</strong> Le résultat de cette méthode n'est pas le temps "Epoch". Si on veut obtenir le nombre de millisecondes depuis le premier janvier 1970, on utilisera la méthode {{jsxref("Date.prototype.getTime()")}}.</p>
-</div>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Utiliser_getUTCMilliseconds()">Utiliser <code>getUTCMilliseconds()</code></h3>
-
-<p>L'exemple suivant assigne les millièmes de secondes pour la date actuelle à la variable <code>ms</code>.</p>
-
-<pre class="brush: js">var aujourdhui = new Date();
-var ms = aujourdhui.getUTCMilliseconds();
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES1')}}</td>
-   <td>{{Spec2('ES1')}}</td>
-   <td>Définition initiale. Implémentée avec JavaScript 1.3.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-15.9.5.25', 'Date.prototype.getUTCMilliseconds')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-date.prototype.getutcmilliseconds', 'Date.prototype.getUTCMilliseconds')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-date.prototype.getutcmilliseconds', 'Date.prototype.getUTCMilliseconds')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Date.getUTCMilliseconds")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Date.prototype.getMilliseconds()")}}</li>
- <li>{{jsxref("Date.prototype.setUTCMilliseconds()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/date/getutcmilliseconds/index.md b/files/fr/web/javascript/reference/global_objects/date/getutcmilliseconds/index.md
new file mode 100644
index 0000000000..ba7b30ec9c
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/date/getutcmilliseconds/index.md
@@ -0,0 +1,56 @@
+---
+title: Date.prototype.getUTCMilliseconds()
+slug: Web/JavaScript/Reference/Global_Objects/Date/getUTCMilliseconds
+tags:
+  - Date
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/getUTCMilliseconds
+original_slug: Web/JavaScript/Reference/Objets_globaux/Date/getUTCMilliseconds
+---
+{{JSRef}}
+
+La méthode **`getUTCMilliseconds()`** renvoie les millièmes de secondes pour la date renseignée selon UTC.
+
+{{EmbedInteractiveExample("pages/js/date-getutcmilliseconds.html")}}
+
+## Syntaxe
+
+    dateObj.getUTCMilliseconds()
+
+### Valeur de retour
+
+Un entier entre 0 et 999 correspondant au nombre de millisecondes pour la date indiquée, selon le temps universel.
+
+> **Note :** Le résultat de cette méthode n'est pas le temps "Epoch". Si on veut obtenir le nombre de millisecondes depuis le premier janvier 1970, on utilisera la méthode {{jsxref("Date.prototype.getTime()")}}.
+
+## Exemples
+
+### Utiliser `getUTCMilliseconds()`
+
+L'exemple suivant assigne les millièmes de secondes pour la date actuelle à la variable `ms`.
+
+```js
+var aujourdhui = new Date();
+var ms = aujourdhui.getUTCMilliseconds();
+```
+
+## Spécifications
+
+| Spécification                                                                                                                            | État                         | Commentaires                                          |
+| ---------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- |
+| {{SpecName('ES1')}}                                                                                                                 | {{Spec2('ES1')}}         | Définition initiale. Implémentée avec JavaScript 1.3. |
+| {{SpecName('ES5.1', '#sec-15.9.5.25', 'Date.prototype.getUTCMilliseconds')}}                                     | {{Spec2('ES5.1')}}     |                                                       |
+| {{SpecName('ES6', '#sec-date.prototype.getutcmilliseconds', 'Date.prototype.getUTCMilliseconds')}}     | {{Spec2('ES6')}}         |                                                       |
+| {{SpecName('ESDraft', '#sec-date.prototype.getutcmilliseconds', 'Date.prototype.getUTCMilliseconds')}} | {{Spec2('ESDraft')}} |                                                       |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Date.getUTCMilliseconds")}}
+
+## Voir aussi
+
+- {{jsxref("Date.prototype.getMilliseconds()")}}
+- {{jsxref("Date.prototype.setUTCMilliseconds()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/date/getutcminutes/index.html b/files/fr/web/javascript/reference/global_objects/date/getutcminutes/index.html
deleted file mode 100644
index 53b7aec489..0000000000
--- a/files/fr/web/javascript/reference/global_objects/date/getutcminutes/index.html
+++ /dev/null
@@ -1,78 +0,0 @@
----
-title: Date.prototype.getUTCMinutes()
-slug: Web/JavaScript/Reference/Global_Objects/Date/getUTCMinutes
-tags:
-  - Date
-  - JavaScript
-  - Méthode
-  - Prototype
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Date/getUTCMinutes
-original_slug: Web/JavaScript/Reference/Objets_globaux/Date/getUTCMinutes
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <strong><code>getUTCMinutes()</code></strong> renvoie les minutes de la date renseignée, d'après UTC.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/date-getutcminutes.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">dateObj.getUTCMinutes()</pre>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Un entier entre 0 et 59 correspondant au nombre de minutes pour la date indiquée selon le temps universel.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Utiliser_getUTCMinutes">Utiliser <code>getUTCMinutes</code></h3>
-
-<p>L'exemple suivant assigne les minutes de la date actuelle à la variable <code>minutes</code>.</p>
-
-<pre class="brush: js">var aujourdhui = new Date();
-var minutes = aujourdhui.getUTCMinutes();
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES1')}}</td>
-   <td>{{Spec2('ES1')}}</td>
-   <td>Définition initiale. Implémentée avec JavaScript 1.3.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-15.9.5.21', 'Date.prototype.getUTCMinutes')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-date.prototype.getutcminutes', 'Date.prototype.getUTCMinutes')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-date.prototype.getutcminutes', 'Date.prototype.getUTCMinutes')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Date.getUTCMinutes")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Date.prototype.getMinutes()")}}</li>
- <li>{{jsxref("Date.prototype.setUTCMinutes()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/date/getutcminutes/index.md b/files/fr/web/javascript/reference/global_objects/date/getutcminutes/index.md
new file mode 100644
index 0000000000..5cda61f0a0
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/date/getutcminutes/index.md
@@ -0,0 +1,54 @@
+---
+title: Date.prototype.getUTCMinutes()
+slug: Web/JavaScript/Reference/Global_Objects/Date/getUTCMinutes
+tags:
+  - Date
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/getUTCMinutes
+original_slug: Web/JavaScript/Reference/Objets_globaux/Date/getUTCMinutes
+---
+{{JSRef}}
+
+La méthode **`getUTCMinutes()`** renvoie les minutes de la date renseignée, d'après UTC.
+
+{{EmbedInteractiveExample("pages/js/date-getutcminutes.html")}}
+
+## Syntaxe
+
+    dateObj.getUTCMinutes()
+
+### Valeur de retour
+
+Un entier entre 0 et 59 correspondant au nombre de minutes pour la date indiquée selon le temps universel.
+
+## Exemples
+
+### Utiliser `getUTCMinutes`
+
+L'exemple suivant assigne les minutes de la date actuelle à la variable `minutes`.
+
+```js
+var aujourdhui = new Date();
+var minutes = aujourdhui.getUTCMinutes();
+```
+
+## Spécifications
+
+| Spécification                                                                                                                | État                         | Commentaires                                          |
+| ---------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- |
+| {{SpecName('ES1')}}                                                                                                     | {{Spec2('ES1')}}         | Définition initiale. Implémentée avec JavaScript 1.3. |
+| {{SpecName('ES5.1', '#sec-15.9.5.21', 'Date.prototype.getUTCMinutes')}}                             | {{Spec2('ES5.1')}}     |                                                       |
+| {{SpecName('ES6', '#sec-date.prototype.getutcminutes', 'Date.prototype.getUTCMinutes')}}         | {{Spec2('ES6')}}         |                                                       |
+| {{SpecName('ESDraft', '#sec-date.prototype.getutcminutes', 'Date.prototype.getUTCMinutes')}} | {{Spec2('ESDraft')}} |                                                       |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Date.getUTCMinutes")}}
+
+## Voir aussi
+
+- {{jsxref("Date.prototype.getMinutes()")}}
+- {{jsxref("Date.prototype.setUTCMinutes()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/date/getutcmonth/index.html b/files/fr/web/javascript/reference/global_objects/date/getutcmonth/index.html
deleted file mode 100644
index 5f8ce36dca..0000000000
--- a/files/fr/web/javascript/reference/global_objects/date/getutcmonth/index.html
+++ /dev/null
@@ -1,78 +0,0 @@
----
-title: Date.prototype.getUTCMonth()
-slug: Web/JavaScript/Reference/Global_Objects/Date/getUTCMonth
-tags:
-  - Date
-  - JavaScript
-  - Méthode
-  - Prototype
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Date/getUTCMonth
-original_slug: Web/JavaScript/Reference/Objets_globaux/Date/getUTCMonth
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <strong><code>getUTCMonth()</code></strong> renvoie le mois de la date renseignée, d'après UTC. La numérotation des mois commence à 0 pour le premier mois de l'année.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/date-getutcmonth.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">dateObj.getUTCMonth()</pre>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Un entier entre 0 et 11 correspondant au mois dans l'année de la date indiquée selon le temps universel (0 pour janvier, 1 pour février, 2 pour mars, et ainsi de suite…).</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Utiliser_getUTCMonth()">Utiliser <code>getUTCMonth()</code></h3>
-
-<p>L'exemple suivant assigne le mois de la date actuelle à la variable <code>mois</code>.</p>
-
-<pre class="brush: js">var aujourdhui = new Date();
-var mois = aujourdhui.getUTCMonth();
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES1')}}</td>
-   <td>{{Spec2('ES1')}}</td>
-   <td>Définition initiale. Implémentée avec JavaScript 1.3.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-15.9.5.13', 'Date.prototype.getUTCMonth')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-date.prototype.getutcmonth', 'Date.prototype.getUTCMonth')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-date.prototype.getutcmonth', 'Date.prototype.getUTCMonth')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Date.getUTCMonth")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Date.prototype.getMonth()")}}</li>
- <li>{{jsxref("Date.prototype.setUTCMonth()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/date/getutcmonth/index.md b/files/fr/web/javascript/reference/global_objects/date/getutcmonth/index.md
new file mode 100644
index 0000000000..562f934ba4
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/date/getutcmonth/index.md
@@ -0,0 +1,54 @@
+---
+title: Date.prototype.getUTCMonth()
+slug: Web/JavaScript/Reference/Global_Objects/Date/getUTCMonth
+tags:
+  - Date
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/getUTCMonth
+original_slug: Web/JavaScript/Reference/Objets_globaux/Date/getUTCMonth
+---
+{{JSRef}}
+
+La méthode **`getUTCMonth()`** renvoie le mois de la date renseignée, d'après UTC. La numérotation des mois commence à 0 pour le premier mois de l'année.
+
+{{EmbedInteractiveExample("pages/js/date-getutcmonth.html")}}
+
+## Syntaxe
+
+    dateObj.getUTCMonth()
+
+### Valeur de retour
+
+Un entier entre 0 et 11 correspondant au mois dans l'année de la date indiquée selon le temps universel (0 pour janvier, 1 pour février, 2 pour mars, et ainsi de suite…).
+
+## Exemples
+
+### Utiliser `getUTCMonth()`
+
+L'exemple suivant assigne le mois de la date actuelle à la variable `mois`.
+
+```js
+var aujourdhui = new Date();
+var mois = aujourdhui.getUTCMonth();
+```
+
+## Spécifications
+
+| Spécification                                                                                                        | État                         | Commentaires                                          |
+| -------------------------------------------------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- |
+| {{SpecName('ES1')}}                                                                                             | {{Spec2('ES1')}}         | Définition initiale. Implémentée avec JavaScript 1.3. |
+| {{SpecName('ES5.1', '#sec-15.9.5.13', 'Date.prototype.getUTCMonth')}}                         | {{Spec2('ES5.1')}}     |                                                       |
+| {{SpecName('ES6', '#sec-date.prototype.getutcmonth', 'Date.prototype.getUTCMonth')}}     | {{Spec2('ES6')}}         |                                                       |
+| {{SpecName('ESDraft', '#sec-date.prototype.getutcmonth', 'Date.prototype.getUTCMonth')}} | {{Spec2('ESDraft')}} |                                                       |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Date.getUTCMonth")}}
+
+## Voir aussi
+
+- {{jsxref("Date.prototype.getMonth()")}}
+- {{jsxref("Date.prototype.setUTCMonth()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/date/getutcseconds/index.html b/files/fr/web/javascript/reference/global_objects/date/getutcseconds/index.html
deleted file mode 100644
index 8f65ada277..0000000000
--- a/files/fr/web/javascript/reference/global_objects/date/getutcseconds/index.html
+++ /dev/null
@@ -1,78 +0,0 @@
----
-title: Date.prototype.getUTCSeconds()
-slug: Web/JavaScript/Reference/Global_Objects/Date/getUTCSeconds
-tags:
-  - Date
-  - JavaScript
-  - Méthode
-  - Prototype
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Date/getUTCSeconds
-original_slug: Web/JavaScript/Reference/Objets_globaux/Date/getUTCSeconds
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <strong><code>getUTCSeconds()</code></strong> renvoie les secondes de la date renseignée, d'après UTC.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/date-getutcseconds.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">dateObj.getUTCSeconds()</pre>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Un entier entre 0 et 59 correspondant au nombre de secondes écoulées pour la date indiquée selon le temps universel.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Utiliser_getUTCSeconds()">Utiliser <code>getUTCSeconds()</code></h3>
-
-<p>L'exemple suivant assigne les secondes de la date actuelle à la variable <code>secondes</code>.</p>
-
-<pre class="brush: js">var aujourdhui = new Date();
-var secondes = aujourdhui.getUTCSeconds();
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES1')}}</td>
-   <td>{{Spec2('ES1')}}</td>
-   <td>Définition initiale. Implémentée avec JavaScript 1.3.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-15.9.5.23', 'Date.prototype.getUTCSeconds')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-date.prototype.getutcseconds', 'Date.prototype.getUTCSeconds')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-date.prototype.getutcseconds', 'Date.prototype.getUTCSeconds')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Date.getUTCSeconds")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Date.prototype.getSeconds()")}}</li>
- <li>{{jsxref("Date.prototype.setUTCSeconds()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/date/getutcseconds/index.md b/files/fr/web/javascript/reference/global_objects/date/getutcseconds/index.md
new file mode 100644
index 0000000000..10b092970d
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/date/getutcseconds/index.md
@@ -0,0 +1,54 @@
+---
+title: Date.prototype.getUTCSeconds()
+slug: Web/JavaScript/Reference/Global_Objects/Date/getUTCSeconds
+tags:
+  - Date
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/getUTCSeconds
+original_slug: Web/JavaScript/Reference/Objets_globaux/Date/getUTCSeconds
+---
+{{JSRef}}
+
+La méthode **`getUTCSeconds()`** renvoie les secondes de la date renseignée, d'après UTC.
+
+{{EmbedInteractiveExample("pages/js/date-getutcseconds.html")}}
+
+## Syntaxe
+
+    dateObj.getUTCSeconds()
+
+### Valeur de retour
+
+Un entier entre 0 et 59 correspondant au nombre de secondes écoulées pour la date indiquée selon le temps universel.
+
+## Exemples
+
+### Utiliser `getUTCSeconds()`
+
+L'exemple suivant assigne les secondes de la date actuelle à la variable `secondes`.
+
+```js
+var aujourdhui = new Date();
+var secondes = aujourdhui.getUTCSeconds();
+```
+
+## Spécifications
+
+| Spécification                                                                                                                | État                         | Commentaires                                          |
+| ---------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- |
+| {{SpecName('ES1')}}                                                                                                     | {{Spec2('ES1')}}         | Définition initiale. Implémentée avec JavaScript 1.3. |
+| {{SpecName('ES5.1', '#sec-15.9.5.23', 'Date.prototype.getUTCSeconds')}}                             | {{Spec2('ES5.1')}}     |                                                       |
+| {{SpecName('ES6', '#sec-date.prototype.getutcseconds', 'Date.prototype.getUTCSeconds')}}         | {{Spec2('ES6')}}         |                                                       |
+| {{SpecName('ESDraft', '#sec-date.prototype.getutcseconds', 'Date.prototype.getUTCSeconds')}} | {{Spec2('ESDraft')}} |                                                       |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Date.getUTCSeconds")}}
+
+## Voir aussi
+
+- {{jsxref("Date.prototype.getSeconds()")}}
+- {{jsxref("Date.prototype.setUTCSeconds()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/date/getyear/index.html b/files/fr/web/javascript/reference/global_objects/date/getyear/index.html
deleted file mode 100644
index 438c7107cd..0000000000
--- a/files/fr/web/javascript/reference/global_objects/date/getyear/index.html
+++ /dev/null
@@ -1,126 +0,0 @@
----
-title: Date.prototype.getYear()
-slug: Web/JavaScript/Reference/Global_Objects/Date/getYear
-tags:
-  - Date
-  - Déprécié
-  - JavaScript
-  - Méthode
-  - Prototype
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Date/getYear
-original_slug: Web/JavaScript/Reference/Objets_globaux/Date/getYear
----
-<div>{{JSRef}} {{Deprecated_header}}</div>
-
-<p>La méthode <strong><code>getYear()</code></strong> renvoie l'année de la date renseignée, d'après l'heure locale. Parce que <code>getYear()</code> ne renvoie pas l'année complète (« bug de l'an 2000 »), cette méthode n'est plus utilisée et doit être remplacée par {{jsxref("Date.getFullYear", "getFullYear")}}.</p>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">dateObj.getYear()</pre>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Un nombre représentant l'année de la date indiquée, selon l'heure locale, auquel on a soustrait 1900.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>La méthode <code>getYear()</code> renvoie l'année moins 1900 ; par conséquent :</p>
-
-<ul>
- <li>Pour les années supérieures ou égales à 2000, la valeur renvoyée par <code>getYear()</code> est supérieure ou égale à 100. Par exemple, si l'année est 2026, <code>getYear()</code> renvoie 126.</li>
- <li>Pour les années entre 1900 et 1999 incluses, la valeur renvoyée par <code>getYear()</code> est comprise entre 0 et 99. Par exemple, si l'année est 1976, <code>getYear()</code> renvoie 76.</li>
- <li>Pour les années inférieures à 1900, la valeur renvoyée par <code>getYear()</code> est négative. Par exemple, si l'année est 1800, <code>getYear()</code> renvoie -100.</li>
-</ul>
-
-<p>Pour prendre en compte les années avant et après 2000, il vaut mieux utiliser {{jsxref("Date.getFullYear", "getFullYear()")}} au lieu de <code>getYear</code> afin que l'année soit spécifiée en entier.</p>
-
-<h2 id="Rétrocompatibilité">Rétrocompatibilité</h2>
-
-<h3 id="Comportement_dans_JavaScript_1.2_et_versions_antérieures">Comportement dans JavaScript 1.2 et versions antérieures</h3>
-
-<p>La méthode <code>getYear()</code> renvoyait soit une année en deux chiffres, soit une année en quatre chiffres :</p>
-
-<ul>
- <li>Pour les années entre 1900 et 1999 incluses, la valeur renvoyée par <code>getYear()</code> était l'année moins 1900. Par exemple, si l'année était 1976, la valeur renvoyée était 76.</li>
- <li>Pour les années inférieures à 1900 ou supérieures à 1999, la valeur renvoyée par <code>getYear</code> était l'année en quatre chiffres. Par exemple, si l'année était 1856, la valeur renvoyée était 1856. Si l'année était 2026, la valeur renvoyée était 2026.</li>
-</ul>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Années_entre_1900_et_1999">Années entre 1900 et 1999</h3>
-
-<p>La seconde instruction assigne la valeur 95 à la variable <code>annee</code>.</p>
-
-<pre class="brush: js">var noel = new Date("December 25, 1995 23:15:00");
-var annee = noel.getYear(); // renvoie 95
-</pre>
-
-<h3 id="Années_après_1999">Années après 1999</h3>
-
-<p>La seconde instruction assigne la valeur 100 à la variable <code>annee</code>.</p>
-
-<pre class="brush: js">var noel = new Date("December 25, 2000 23:15:00");
-var annee = noel.getYear(); // renvoie 100
-</pre>
-
-<h3 id="Années_avant_1900">Années avant 1900</h3>
-
-<p>La seconde instruction assigne la valeur -100 à la variable <code>annee</code>.</p>
-
-<pre class="brush: js">var noel = new Date("December 25, 1800 23:15:00");
-var annee = noel.getYear(); // renvoie -100
-</pre>
-
-<h3 id="Définition_et_lecture_d'une_année_entre_1900_et_1999">Définition et lecture d'une année entre 1900 et 1999</h3>
-
-<p>La troisième instruction assigne la valeur 95 à la variable <code>annee</code>, représentant l'année 1995.</p>
-
-<pre class="brush: js">var noel = new Date("December 25, 1800 23:15:00");
-var noel.setYear(95);
-var annee = noel.getYear(); // renvoie 95
-</pre>
-
-<h2 id="Specifications">Specifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES1')}}</td>
-   <td>{{Spec2('ES1')}}</td>
-   <td>Définition initiale. Implémentée avec JavaScript 1.3.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-B.2.4', 'Date.prototype.getYear')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td>Défini dans l'annexe informative sur la compatibilité.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-date.prototype.getyear', 'Date.prototype.getYear')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td>Défini dans l'annexe normative sur les fonctionnalités additionnelles des navigateurs web.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-date.prototype.getyear', 'Date.prototype.getYear')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Date.getYear")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Date.prototype.getFullYear()")}}</li>
- <li>{{jsxref("Date.prototype.getUTCFullYear()")}}</li>
- <li>{{jsxref("Date.prototype.setYear()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/date/getyear/index.md b/files/fr/web/javascript/reference/global_objects/date/getyear/index.md
new file mode 100644
index 0000000000..30f96ed639
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/date/getyear/index.md
@@ -0,0 +1,101 @@
+---
+title: Date.prototype.getYear()
+slug: Web/JavaScript/Reference/Global_Objects/Date/getYear
+tags:
+  - Date
+  - Déprécié
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/getYear
+original_slug: Web/JavaScript/Reference/Objets_globaux/Date/getYear
+---
+{{JSRef}} {{Deprecated_header}}
+
+La méthode **`getYear()`** renvoie l'année de la date renseignée, d'après l'heure locale. Parce que `getYear()` ne renvoie pas l'année complète (« bug de l'an 2000 »), cette méthode n'est plus utilisée et doit être remplacée par {{jsxref("Date.getFullYear", "getFullYear")}}.
+
+## Syntaxe
+
+    dateObj.getYear()
+
+### Valeur de retour
+
+Un nombre représentant l'année de la date indiquée, selon l'heure locale, auquel on a soustrait 1900.
+
+## Description
+
+La méthode `getYear()` renvoie l'année moins 1900 ; par conséquent :
+
+- Pour les années supérieures ou égales à 2000, la valeur renvoyée par `getYear()` est supérieure ou égale à 100. Par exemple, si l'année est 2026, `getYear()` renvoie 126.
+- Pour les années entre 1900 et 1999 incluses, la valeur renvoyée par `getYear()` est comprise entre 0 et 99. Par exemple, si l'année est 1976, `getYear()` renvoie 76.
+- Pour les années inférieures à 1900, la valeur renvoyée par `getYear()` est négative. Par exemple, si l'année est 1800, `getYear()` renvoie -100.
+
+Pour prendre en compte les années avant et après 2000, il vaut mieux utiliser {{jsxref("Date.getFullYear", "getFullYear()")}} au lieu de `getYear` afin que l'année soit spécifiée en entier.
+
+## Rétrocompatibilité
+
+### Comportement dans JavaScript 1.2 et versions antérieures
+
+La méthode `getYear()` renvoyait soit une année en deux chiffres, soit une année en quatre chiffres :
+
+- Pour les années entre 1900 et 1999 incluses, la valeur renvoyée par `getYear()` était l'année moins 1900. Par exemple, si l'année était 1976, la valeur renvoyée était 76.
+- Pour les années inférieures à 1900 ou supérieures à 1999, la valeur renvoyée par `getYear` était l'année en quatre chiffres. Par exemple, si l'année était 1856, la valeur renvoyée était 1856. Si l'année était 2026, la valeur renvoyée était 2026.
+
+## Exemples
+
+### Années entre 1900 et 1999
+
+La seconde instruction assigne la valeur 95 à la variable `annee`.
+
+```js
+var noel = new Date("December 25, 1995 23:15:00");
+var annee = noel.getYear(); // renvoie 95
+```
+
+### Années après 1999
+
+La seconde instruction assigne la valeur 100 à la variable `annee`.
+
+```js
+var noel = new Date("December 25, 2000 23:15:00");
+var annee = noel.getYear(); // renvoie 100
+```
+
+### Années avant 1900
+
+La seconde instruction assigne la valeur -100 à la variable `annee`.
+
+```js
+var noel = new Date("December 25, 1800 23:15:00");
+var annee = noel.getYear(); // renvoie -100
+```
+
+### Définition et lecture d'une année entre 1900 et 1999
+
+La troisième instruction assigne la valeur 95 à la variable `annee`, représentant l'année 1995.
+
+```js
+var noel = new Date("December 25, 1800 23:15:00");
+var noel.setYear(95);
+var annee = noel.getYear(); // renvoie 95
+```
+
+## Specifications
+
+| Spécification                                                                                                | État                         | Commentaires                                                                               |
+| ------------------------------------------------------------------------------------------------------------ | ---------------------------- | ------------------------------------------------------------------------------------------ |
+| {{SpecName('ES1')}}                                                                                     | {{Spec2('ES1')}}         | Définition initiale. Implémentée avec JavaScript 1.3.                                      |
+| {{SpecName('ES5.1', '#sec-B.2.4', 'Date.prototype.getYear')}}                             | {{Spec2('ES5.1')}}     | Défini dans l'annexe informative sur la compatibilité.                                     |
+| {{SpecName('ES6', '#sec-date.prototype.getyear', 'Date.prototype.getYear')}}         | {{Spec2('ES6')}}         | Défini dans l'annexe normative sur les fonctionnalités additionnelles des navigateurs web. |
+| {{SpecName('ESDraft', '#sec-date.prototype.getyear', 'Date.prototype.getYear')}} | {{Spec2('ESDraft')}} |                                                                                            |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Date.getYear")}}
+
+## Voir aussi
+
+- {{jsxref("Date.prototype.getFullYear()")}}
+- {{jsxref("Date.prototype.getUTCFullYear()")}}
+- {{jsxref("Date.prototype.setYear()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/date/index.html b/files/fr/web/javascript/reference/global_objects/date/index.html
deleted file mode 100644
index d2ea76a64e..0000000000
--- a/files/fr/web/javascript/reference/global_objects/date/index.html
+++ /dev/null
@@ -1,256 +0,0 @@
----
-title: Date
-slug: Web/JavaScript/Reference/Global_Objects/Date
-tags:
-  - Date
-  - JavaScript
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Date
-original_slug: Web/JavaScript/Reference/Objets_globaux/Date
----
-<div>{{JSRef}}</div>
-
-<p>Les objets JavaScript <strong><code>Date</code></strong> représentent un instant donné sur l'axe du temps dans un format indépendant de la plateforme utilisée. Les objets <code>Date</code> contiennent un nombre (<code>Number</code>) qui représente le nombre de millisecondes écoulées depuis le premier janvier 1970 sur l'échelle <a href="https://fr.wikipedia.org/wiki/Temps_universel_coordonn%C3%A9">UTC</a>.</p>
-
-<div class="note"><p><strong>Note :</strong> TC39 travaille actuellement sur <a href="https://tc39.es/proposal-temporal/docs/index.html">Temporal</a>, une nouvelle API pour la gestion des dates, heures et données temporelles.<br>
- Pour en savoir plus, consultez le <a href="https://blogs.igalia.com/compilers/2020/06/23/dates-and-times-in-javascript/">blog d'Igalia</a> et n'hésitez pas à répondre <a href="https://forms.gle/iL9iZg7Y9LvH41Nv8">au sondage</a>. Les retours concrets de développeurs web sont importants pour affiner cette API. Attention, elle n'est pas encore prête à être utilisée en production !</p>
-</div>
-
-<h2 id="Description">Description</h2>
-
-<h3 id="Lepoch_ECMAScript">L'epoch ECMAScript</h3>
-
-<p>D'un point de vue technique, une date JavaScript correspond au nombre de millisecondes écoulées depuis le premier janvier 1970, minuit UTC. Cette date et cette heure sont les mêmes que <strong>l'<a href="https://fr.wikipedia.org/wiki/Epoch">epoch</a> UNIX</strong>, qui est l'instant de référence principalement utilisé pour manipuler les dates/heures dans les systèmes informatiques.</p>
-
-<div class="note"><p><strong>Note :</strong> Bien que les valeurs temporelles des objets dates soient relatives à UTC, certaines des méthodes simples pour obtenir les composantes d'une date/heure fonctionnent relativement au fuseau horaire du système.</p></div>
-
-<p>On notera également que la représentation maximale d'un objet <code>Date</code> n'est pas la même que le plus grand entier représentable en JavaScript (<code>Number.MAX_SAFE_INTEGER</code> vaut 9,007,199,254,740,991). En effet, ECMA-262 définit un maximum de ±100 000 000 (cent millions) jours relatifs au premier janvier 1970 UTC (ce qui correspond au 20 avril 271 821 avant notre ètre d'une part et au 13 septembre 275 760 de notre ère) pouvant être représentés par un objet <code>Date</code> standard (soit un intervalle de ±8 640 000 000 000 000 millisecondes).</p>
-
-<h3 id="Les_formats_de_date_et_les_conversions_entre_les_fuseaux_horaires">Les formats de date et les conversions entre les fuseaux horaires</h3>
-
-<p>Il existe différentes méthodes pour obtenir une date sous différents formats ou effectuer une conversion entre différents fuseaux. On distingue notamment les fonctions qui manipulent les dates relativement au temps universal coordonné (UTC). Le temps local est celui utilisé par l'appareil de l'utilisateur.</p>
-
-<p>Ainsi, on dispose de méthodes permettant d'obtenir ou de définir les différentes composantes d'une date selon le temps local (ex. {{jsxref("Date.getDay", "getDay()")}}, {{jsxref("Date.setHours", "setHours()")}}) et de méthodes équivalentes pour la manipulation en UTC (ex. {{jsxref("Date.getUTCDay()", "getUTCDay()")}} et {{jsxref("Date.setUTCHours", "setUTCHours()")}} respectivement).</p>
-
-<h2 id="Constructeur">Constructeur</h2>
-
-<dl>
- <dt>{{jsxref("Date/Date", "Date()")}}</dt>
- <dd>Cette fonction permet de créer un nouvel objet <code>Date</code>.</dd>
-</dl>
-
-<h2 id="Méthodes_statiques">Méthodes statiques</h2>
-
-<dl>
- <dt>{{jsxref("Date.now()")}}</dt>
- <dd>Renvoie la valeur numérique correspondant au moment présent sous la forme du nombre de millisecondes écoulées depuis le premier janvier 1970 00:00:00 UTC (les secondes intercalaires (<em>leap seconds</em>) sont ignorées).</dd>
- <dt>{{jsxref("Date.parse()")}}</dt>
- <dd>Analyse la représentation textuelle d'une date et renvoie le nombre de millisecondes écoulées entre cette date et le premier janvier 1970, 00:00:00 UTC (les secondes intercalaires (<em>leap seconds</em>) sont ignorées).
- <div class="note">
- <p><strong>Note :</strong> L'analyse de chaînes de caractères à l'aide de <code>Date.parse</code> est fortement déconseillée en raison des incohérences qui existent entre les navigateurs.</p>
- </div>
- </dd>
- <dt>{{jsxref("Date.UTC()")}}</dt>
- <dd>Accepte les mêmes paramètres que la forme longue du constructeur (c'est-à-dire entre 2 et 7) et renvoie le nombre de millisecondes entre cette date et le premier janvier 1970, 00:00:00 UTC (les secondes intercalaires (<em>leap seconds</em>) sont ignorées).</dd>
-</dl>
-
-<h2 id="Méthodes_des_instances">Méthodes des instances</h2>
-
-<dl>
- <dt>{{jsxref("Date.prototype.getDate()")}}</dt>
- <dd>Renvoie le jour du mois (entre <code>1</code> et <code>31</code>) pour la date donnée, selon le temps local.</dd>
- <dt>{{jsxref("Date.prototype.getDay()")}}</dt>
- <dd>Renvoie le jour de la semaine (entre <code>0</code> et <code>6</code>) pour la date donnée, selon le temps local.</dd>
- <dt>{{jsxref("Date.prototype.getFullYear()")}}</dt>
- <dd>Renvoie l'année (sans chiffre implicite, <code>1999</code> sera renvoyé et pas <code>99</code> par exemple) pour la date donnée, selon le temps local.</dd>
- <dt>{{jsxref("Date.prototype.getHours()")}}</dt>
- <dd>Renvoie l'heure (entre <code>0</code> et <code>23</code>) pour la date donnée, selon le temps local.</dd>
- <dt>{{jsxref("Date.prototype.getMilliseconds()")}}</dt>
- <dd>Renvoie les millisecondes (entre <code>0</code> et <code>999</code>) pour la date donnée, selon le temps local.</dd>
- <dt>{{jsxref("Date.prototype.getMinutes()")}}</dt>
- <dd>Renvoie les minutes (entre <code>0</code> et <code>59</code>) pour la date donnée, selon le temps local.</dd>
- <dt>{{jsxref("Date.prototype.getMonth()")}}</dt>
- <dd>Renvoie le mois (entre <code>0</code> et <code>11</code>) pour la date donnée, selon le temps local.</dd>
- <dt>{{jsxref("Date.prototype.getSeconds()")}}</dt>
- <dd>Renvoie les secondes (entre <code>0</code> et <code>59</code>) pour la date donnée, selon le temps local.</dd>
- <dt>{{jsxref("Date.prototype.getTime()")}}</dt>
- <dd>Renvoie la valeur numérique de la date donnée, exprimée en nombre de millisecondes écoulées depuis le premier janvier 1970, 00:00:00 UTC (pour les temps antérieurs, ce sont des valeurs négatives qui seront renvoyées).</dd>
- <dt>{{jsxref("Date.prototype.getTimezoneOffset()")}}</dt>
- <dd>Renvoie le décalage horaire, exprimé en minutes, pour la locale courante.</dd>
- <dt>{{jsxref("Date.prototype.getUTCDate()")}}</dt>
- <dd>Renvoie le jour du mois (entre <code>1</code> et <code>31</code>) pour la date donnée, selon le temps universel.</dd>
- <dt>{{jsxref("Date.prototype.getUTCDay()")}}</dt>
- <dd>Renvoie le jour de la semaine (entre <code>0</code> et <code>6</code>) pour la date donnée, selon le temps universel.</dd>
- <dt>{{jsxref("Date.prototype.getUTCFullYear()")}}</dt>
- <dd>Renvoie l'année (sans chiffre implicite, <code>1999</code> sera renvoyé plutôt que <code>99</code>) pour la date donnée, selon le temps universel.</dd>
- <dt>{{jsxref("Date.prototype.getUTCHours()")}}</dt>
- <dd>Renvoie l'heure (entre <code>0</code> et <code>23</code>) pour la date donnée, selon le temps universel.</dd>
- <dt>{{jsxref("Date.prototype.getUTCMilliseconds()")}}</dt>
- <dd>Renvoie les millisecondes (entre <code>0</code> et <code>999</code>) pour la date donnée, selon le temps universel.</dd>
- <dt>{{jsxref("Date.prototype.getUTCMinutes()")}}</dt>
- <dd>Renvoie les minutes (entre <code>0</code> et <code>59</code>) pour la date donnée, selon le temps universel.</dd>
- <dt>{{jsxref("Date.prototype.getUTCMonth()")}}</dt>
- <dd>Renvoie le mois (entre <code>0</code> et <code>11</code>) pour la date donnée, selon le temps universel.</dd>
- <dt>{{jsxref("Date.prototype.getUTCSeconds()")}}</dt>
- <dd>Renvoie les secondes (entre <code>0</code> et <code>59</code>) pour la date donnée, selon le temps universel.</dd>
- <dt>{{jsxref("Date.prototype.getYear()")}}</dt>
- <dd>Renvoie l'année (généralement exprimée sur 2 ou 3 chiffres) pour la date donnée selon le temps local. <strong>On utilisera plutôt {{jsxref("Date.prototype.getFullYear()", "getFullYear()")}}</strong>.</dd>
- <dt>{{jsxref("Date.prototype.setDate()")}}</dt>
- <dd>Définit le jour du mois pour la date donnée, selon le temps local.</dd>
- <dt>{{jsxref("Date.prototype.setFullYear()")}}</dt>
- <dd>Définit l'année (sans chiffre implicite, on utilisera <code>1999</code> et pas <code>99</code>) pour la date donnée, selon le temps local.</dd>
- <dt>{{jsxref("Date.prototype.setHours()")}}</dt>
- <dd>Définit les heures pour la date donnée, selon le temps local.</dd>
- <dt>{{jsxref("Date.prototype.setMilliseconds()")}}</dt>
- <dd>Définit les millisecondes pour la date donnée, selon le temps local.</dd>
- <dt>{{jsxref("Date.prototype.setMinutes()")}}</dt>
- <dd>Définit les minutes pour la date donnée, selon le temps local.</dd>
- <dt>{{jsxref("Date.prototype.setMonth()")}}</dt>
- <dd>Définit le mois pour la date donnée, selon le temps local.</dd>
- <dt>{{jsxref("Date.prototype.setSeconds()")}}</dt>
- <dd>Définit les secondes pour la date donnée, selon le temps local.</dd>
- <dt>{{jsxref("Date.prototype.setTime()")}}</dt>
- <dd>Définit le nombre de millisecondes écoulées depuis le premier janvier 1970, 00:00:00 UTC et la date donnée. On utilisera des nombres négatifs pour les moments antérieurs à cette date.</dd>
- <dt>{{jsxref("Date.prototype.setUTCDate()")}}</dt>
- <dd>Définit le jour du mois pour la date donnée selon le temps universel.</dd>
- <dt>{{jsxref("Date.prototype.setUTCFullYear()")}}</dt>
- <dd>Définit l'année (exprimée sans chiffres implicites, ex. <code>1999</code> et pas <code>99</code>) pour la date donnée selon le temps universel.</dd>
- <dt>{{jsxref("Date.prototype.setUTCHours()")}}</dt>
- <dd>Définit l'heure pour la date donnée selon le temps universel.</dd>
- <dt>{{jsxref("Date.prototype.setUTCMilliseconds()")}}</dt>
- <dd>Définit les millisecondes pour la date donnée selon le temps universel.</dd>
- <dt>{{jsxref("Date.prototype.setUTCMinutes()")}}</dt>
- <dd>Définit les minutes pour la date donnée selon le temps universel.</dd>
- <dt>{{jsxref("Date.prototype.setUTCMonth()")}}</dt>
- <dd>Définit le mois pour la date donnée selon le temps universel.</dd>
- <dt>{{jsxref("Date.prototype.setUTCSeconds()")}}</dt>
- <dd>Définit les secondes pour la date donnée selon le temps universel.</dd>
- <dt>{{jsxref("Date.prototype.setYear()")}}</dt>
- <dd>Définit l'année (avec 2 à 3 chiffres) pour la date courante selon le temps local. <strong>On privilégiera la méthode {{jsxref("Date.prototype.setFullYear()", "setFullYear()")}} à la place.</strong></dd>
- <dt>{{jsxref("Date.prototype.toDateString()")}}</dt>
- <dd>Renvoie la partie "date" (jour, mois, année) de l'objet {{jsxref("Date")}} en une chaîne de caractères compréhensible par un humain (anglophone) (ex. <code>'Thu Apr 12 2018'</code>).</dd>
- <dt>{{jsxref("Date.prototype.toISOString()")}}</dt>
- <dd>Convertit une date en une chaîne de caractères selon le format ISO 8601 Étendu.</dd>
- <dt>{{jsxref("Date.prototype.toJSON()")}}</dt>
- <dd>Renvoie une chaîne de caractères représentant l'objet {{jsxref("Date")}} avec {{jsxref("Date.prototype.toISOString()", "toISOString()")}}. Cette méthode est utilisée par {{jsxref("JSON.stringify()")}}.</dd>
- <dt>{{jsxref("Date.prototype.toGMTString()")}}</dt>
- <dd>Renvoie une chaîne de caractères représentant l'objet {{jsxref("Date")}} d'après le fuseau GMT (UTC). <strong>On utilisera plutôt {{jsxref("Date.prototype.toUTCString()", "toUTCString()")}}</strong>.</dd>
- <dt>{{jsxref("Date.prototype.toLocaleDateString()")}}</dt>
- <dd>Renvoie une chaîne de caractères représentant les jours / mois / années de la date courante avec une représentation propre à la locale courante (déduite des paramètres systèmes utilisés).</dd>
- <dt>{{jsxref("Date.prototype.toLocaleFormat()")}}</dt>
- <dd>Convertit la date courante en une chaîne de caractères avec un format décrit en paramètre via une chaîne de caractères.</dd>
- <dt>{{jsxref("Date.prototype.toLocaleString()")}}</dt>
- <dd>Renvoie une chaîne de caractères représentant la date sous le forme de la locale courante. Cette méthode surcharge la méthode {{jsxref("Object.prototype.toLocaleString()")}}.</dd>
- <dt>{{jsxref("Date.prototype.toLocaleTimeString()")}}</dt>
- <dd>Renvoie une chaîne de caractères représentant les heures / minutes / secondes de la date courante avec une représentation propre à la locale courante (déduite des paramètres systèmes utilisés).</dd>
- <dt>{{jsxref("Date.prototype.toString()")}}</dt>
- <dd>Renvoie une chaîne de caractères représentant l'objet {{jsxref("Date")}} courant. Cette méthode surcharge la méthode {{jsxref("Object.prototype.toString()")}}.</dd>
- <dt>{{jsxref("Date.prototype.toTimeString()")}}</dt>
- <dd>Renvoie l'heure (avec les minutes et les secondes) d'une date sous la forme d'une chaîne de caractères compréhensible par un humain.</dd>
- <dt>{{jsxref("Date.prototype.toUTCString()")}}</dt>
- <dd>Convertit une date en chaîne de caractère en utilisant le temps universel comme référentiel.</dd>
- <dt>{{jsxref("Date.prototype.valueOf()")}}</dt>
- <dd>Renvoie la valeur primitive d'un objet {{jsxref("Date")}}. Cette méthode surcharge la méthode {{jsxref("Object.prototype.valueOf()")}}.</dd>
-</dl>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Différentes_façons_de_créer_un_objet_Date">Différentes façons de créer un objet <code>Date</code></h3>
-
-<p>Les exemples qui suivent illustrent différentes méthodes permettant de créer des dates JavaScript :</p>
-
-<div class="note">
-<p><strong>Note :</strong> L'analyse de chaîne de caractères représentant des dates avec le constructeur <code>Date</code>  (ou <code>Date.parse</code> qui est équivalent) est fortement déconseillée en raison des différences de comportement existant entre les navigateurs.</p>
-</div>
-
-<pre class="brush: js notranslate">let aujourdhui = new Date()
-let anniversaire = new Date('September 22, 2018 15:00:00')
-let anniversaire = new Date('2018-09-22T15:00:00')
-let anniversaire = new Date(2018, 8, 22)            // the month is 0-indexed
-let anniversaire = new Date(2018, 8, 22, 15, 0, 0)
-</pre>
-
-<h3 id="Les_années_sur_deux_chiffres_correspondent_à_la_période_1900_–_1999">Les années sur deux chiffres correspondent à la période 1900 – 1999</h3>
-
-<p>Afin de créer et de manipuler des dates sur les années <code>0</code> à <code>99</code> de notre ère, on doit utiliser les méthodes {{jsxref("Date.prototype.setFullYear()")}} and {{jsxref("Date.prototype.getFullYear()")}}.</p>
-
-<pre class="brush: js notranslate">let date = new Date(98, 1)  // Sun Feb 01 1998 00:00:00 GMT+0000 (GMT)
-
-// Méthode dépréciée, 98 correspond également ici à 1998
-date.setYear(98)            // Sun Feb 01 1998 00:00:00 GMT+0000 (GMT)
-
-date.setFullYear(98)        // Sat Feb 01 0098 00:00:00 GMT+0000 (BST)
-</pre>
-
-<h3 id="Calculer_le_temps_écoulé">Calculer le temps écoulé</h3>
-
-<p>Dans les exemples suivants, on illustre comment calculer le temps écoulé entre deux dates JavaScript en millisecondes.</p>
-
-<p>En raison de durées différentes pour les jours (heure d'été / heure d'hiver), les mois et les années, il faudra faire attention et étudier le sujet avant d'exprimer des durées en unités supérieures à des heures / minutes / secondes.</p>
-
-<pre class="brush: js notranslate">// Utiliser des objets Date
-let debut = Date.now()
-
-// Ici, l'évènement dont on veut mesurer la durée :
-faireQuelqueChosePendantLongtemps()
-let fin = Date.now()
-let duree = fin - debut // La durée écoulée, en millisecondes
-</pre>
-
-<pre class="brush: js notranslate">// En utilisant les méthodes natives
-let debut = new Date()
-
-// Ici, l'évènement dont on veut mesurer la durée :
-faireQuelqueChosePendantLongtemps()
-let fin = new Date()
-let duree = fin.getTime() - debut.getTime() // La durée écoulée, en millisecondes
-</pre>
-
-<pre class="brush: js notranslate">// Pour tester le temps d'exécution d'une fonction
-function afficheDureeEcoulee(fTest) {
-  let debut = Date.now(),
-      valRetour = fTest(),
-      fin = Date.now()
-
-  console.log(`Durée écoulée : ${ String(fin - debut) } millisecondes`)
-  return valRetour
-}
-
-let valeurDeRetour = afficheDureeEcoulee(maFonctionATester)
-</pre>
-
-<div class="note">
-<p><strong>Note :</strong> Pour les navigateurs qui prennent en charge l'{{domxref("Window.performance", "API Web Performance", "", 1)}}, la méthode {{domxref("Performance.now()")}} peut fournir un outil de mesure des durées écoulées plus fiable et précis que {{jsxref("Date.now()")}}.</p>
-</div>
-
-<h3 id="Obtenir_le_nombre_de_secondes_écoulées_depuis_lepoch_ECMAScript">Obtenir le nombre de secondes écoulées depuis l'epoch ECMAScript</h3>
-
-<pre class="brush: js notranslate">let secondes = Math.floor(Date.now() / 1000)
-</pre>
-
-<p>Dans ce cas, on renvoie un entier et c'est pour ça qu'on utilise {{jsxref("Math.floor()")}}. Par ailleurs, on n'utilise pas {{jsxref("Math.round()")}} afin d'avoir le nombre de secondes effectivement écoulées.</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-date-objects', 'Date')}}</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Date", 3)}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>Le constructeur {{jsxref("Date/Date", "Date()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/date/index.md b/files/fr/web/javascript/reference/global_objects/date/index.md
new file mode 100644
index 0000000000..d5ed46eb1a
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/date/index.md
@@ -0,0 +1,240 @@
+---
+title: Date
+slug: Web/JavaScript/Reference/Global_Objects/Date
+tags:
+  - Date
+  - JavaScript
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Date
+original_slug: Web/JavaScript/Reference/Objets_globaux/Date
+---
+{{JSRef}}
+
+Les objets JavaScript **`Date`** représentent un instant donné sur l'axe du temps dans un format indépendant de la plateforme utilisée. Les objets `Date` contiennent un nombre (`Number`) qui représente le nombre de millisecondes écoulées depuis le premier janvier 1970 sur l'échelle [UTC](https://fr.wikipedia.org/wiki/Temps_universel_coordonn%C3%A9).
+
+> **Note :** TC39 travaille actuellement sur [Temporal](https://tc39.es/proposal-temporal/docs/index.html), une nouvelle API pour la gestion des dates, heures et données temporelles.
+> Pour en savoir plus, consultez le [blog d'Igalia](https://blogs.igalia.com/compilers/2020/06/23/dates-and-times-in-javascript/) et n'hésitez pas à répondre [au sondage](https://forms.gle/iL9iZg7Y9LvH41Nv8). Les retours concrets de développeurs web sont importants pour affiner cette API. Attention, elle n'est pas encore prête à être utilisée en production !
+
+## Description
+
+### L'epoch ECMAScript
+
+D'un point de vue technique, une date JavaScript correspond au nombre de millisecondes écoulées depuis le premier janvier 1970, minuit UTC. Cette date et cette heure sont les mêmes que **l'[epoch](https://fr.wikipedia.org/wiki/Epoch) UNIX**, qui est l'instant de référence principalement utilisé pour manipuler les dates/heures dans les systèmes informatiques.
+
+> **Note :** Bien que les valeurs temporelles des objets dates soient relatives à UTC, certaines des méthodes simples pour obtenir les composantes d'une date/heure fonctionnent relativement au fuseau horaire du système.
+
+On notera également que la représentation maximale d'un objet `Date` n'est pas la même que le plus grand entier représentable en JavaScript (`Number.MAX_SAFE_INTEGER` vaut 9,007,199,254,740,991). En effet, ECMA-262 définit un maximum de ±100 000 000 (cent millions) jours relatifs au premier janvier 1970 UTC (ce qui correspond au 20 avril 271 821 avant notre ètre d'une part et au 13 septembre 275 760 de notre ère) pouvant être représentés par un objet `Date` standard (soit un intervalle de ±8 640 000 000 000 000 millisecondes).
+
+### Les formats de date et les conversions entre les fuseaux horaires
+
+Il existe différentes méthodes pour obtenir une date sous différents formats ou effectuer une conversion entre différents fuseaux. On distingue notamment les fonctions qui manipulent les dates relativement au temps universal coordonné (UTC). Le temps local est celui utilisé par l'appareil de l'utilisateur.
+
+Ainsi, on dispose de méthodes permettant d'obtenir ou de définir les différentes composantes d'une date selon le temps local (ex. {{jsxref("Date.getDay", "getDay()")}}, {{jsxref("Date.setHours", "setHours()")}}) et de méthodes équivalentes pour la manipulation en UTC (ex. {{jsxref("Date.getUTCDay()", "getUTCDay()")}} et {{jsxref("Date.setUTCHours", "setUTCHours()")}} respectivement).
+
+## Constructeur
+
+- {{jsxref("Date/Date", "Date()")}}
+  - : Cette fonction permet de créer un nouvel objet `Date`.
+
+## Méthodes statiques
+
+- {{jsxref("Date.now()")}}
+  - : Renvoie la valeur numérique correspondant au moment présent sous la forme du nombre de millisecondes écoulées depuis le premier janvier 1970 00:00:00 UTC (les secondes intercalaires (_leap seconds_) sont ignorées).
+- {{jsxref("Date.parse()")}}
+
+  - : Analyse la représentation textuelle d'une date et renvoie le nombre de millisecondes écoulées entre cette date et le premier janvier 1970, 00:00:00 UTC (les secondes intercalaires (_leap seconds_) sont ignorées).
+
+    > **Note :** L'analyse de chaînes de caractères à l'aide de `Date.parse` est fortement déconseillée en raison des incohérences qui existent entre les navigateurs.
+
+- {{jsxref("Date.UTC()")}}
+  - : Accepte les mêmes paramètres que la forme longue du constructeur (c'est-à-dire entre 2 et 7) et renvoie le nombre de millisecondes entre cette date et le premier janvier 1970, 00:00:00 UTC (les secondes intercalaires (_leap seconds_) sont ignorées).
+
+## Méthodes des instances
+
+- {{jsxref("Date.prototype.getDate()")}}
+  - : Renvoie le jour du mois (entre `1` et `31`) pour la date donnée, selon le temps local.
+- {{jsxref("Date.prototype.getDay()")}}
+  - : Renvoie le jour de la semaine (entre `0` et `6`) pour la date donnée, selon le temps local.
+- {{jsxref("Date.prototype.getFullYear()")}}
+  - : Renvoie l'année (sans chiffre implicite, `1999` sera renvoyé et pas `99` par exemple) pour la date donnée, selon le temps local.
+- {{jsxref("Date.prototype.getHours()")}}
+  - : Renvoie l'heure (entre `0` et `23`) pour la date donnée, selon le temps local.
+- {{jsxref("Date.prototype.getMilliseconds()")}}
+  - : Renvoie les millisecondes (entre `0` et `999`) pour la date donnée, selon le temps local.
+- {{jsxref("Date.prototype.getMinutes()")}}
+  - : Renvoie les minutes (entre `0` et `59`) pour la date donnée, selon le temps local.
+- {{jsxref("Date.prototype.getMonth()")}}
+  - : Renvoie le mois (entre `0` et `11`) pour la date donnée, selon le temps local.
+- {{jsxref("Date.prototype.getSeconds()")}}
+  - : Renvoie les secondes (entre `0` et `59`) pour la date donnée, selon le temps local.
+- {{jsxref("Date.prototype.getTime()")}}
+  - : Renvoie la valeur numérique de la date donnée, exprimée en nombre de millisecondes écoulées depuis le premier janvier 1970, 00:00:00 UTC (pour les temps antérieurs, ce sont des valeurs négatives qui seront renvoyées).
+- {{jsxref("Date.prototype.getTimezoneOffset()")}}
+  - : Renvoie le décalage horaire, exprimé en minutes, pour la locale courante.
+- {{jsxref("Date.prototype.getUTCDate()")}}
+  - : Renvoie le jour du mois (entre `1` et `31`) pour la date donnée, selon le temps universel.
+- {{jsxref("Date.prototype.getUTCDay()")}}
+  - : Renvoie le jour de la semaine (entre `0` et `6`) pour la date donnée, selon le temps universel.
+- {{jsxref("Date.prototype.getUTCFullYear()")}}
+  - : Renvoie l'année (sans chiffre implicite, `1999` sera renvoyé plutôt que `99`) pour la date donnée, selon le temps universel.
+- {{jsxref("Date.prototype.getUTCHours()")}}
+  - : Renvoie l'heure (entre `0` et `23`) pour la date donnée, selon le temps universel.
+- {{jsxref("Date.prototype.getUTCMilliseconds()")}}
+  - : Renvoie les millisecondes (entre `0` et `999`) pour la date donnée, selon le temps universel.
+- {{jsxref("Date.prototype.getUTCMinutes()")}}
+  - : Renvoie les minutes (entre `0` et `59`) pour la date donnée, selon le temps universel.
+- {{jsxref("Date.prototype.getUTCMonth()")}}
+  - : Renvoie le mois (entre `0` et `11`) pour la date donnée, selon le temps universel.
+- {{jsxref("Date.prototype.getUTCSeconds()")}}
+  - : Renvoie les secondes (entre `0` et `59`) pour la date donnée, selon le temps universel.
+- {{jsxref("Date.prototype.getYear()")}}
+  - : Renvoie l'année (généralement exprimée sur 2 ou 3 chiffres) pour la date donnée selon le temps local. **On utilisera plutôt {{jsxref("Date.prototype.getFullYear()", "getFullYear()")}}**.
+- {{jsxref("Date.prototype.setDate()")}}
+  - : Définit le jour du mois pour la date donnée, selon le temps local.
+- {{jsxref("Date.prototype.setFullYear()")}}
+  - : Définit l'année (sans chiffre implicite, on utilisera `1999` et pas `99`) pour la date donnée, selon le temps local.
+- {{jsxref("Date.prototype.setHours()")}}
+  - : Définit les heures pour la date donnée, selon le temps local.
+- {{jsxref("Date.prototype.setMilliseconds()")}}
+  - : Définit les millisecondes pour la date donnée, selon le temps local.
+- {{jsxref("Date.prototype.setMinutes()")}}
+  - : Définit les minutes pour la date donnée, selon le temps local.
+- {{jsxref("Date.prototype.setMonth()")}}
+  - : Définit le mois pour la date donnée, selon le temps local.
+- {{jsxref("Date.prototype.setSeconds()")}}
+  - : Définit les secondes pour la date donnée, selon le temps local.
+- {{jsxref("Date.prototype.setTime()")}}
+  - : Définit le nombre de millisecondes écoulées depuis le premier janvier 1970, 00:00:00 UTC et la date donnée. On utilisera des nombres négatifs pour les moments antérieurs à cette date.
+- {{jsxref("Date.prototype.setUTCDate()")}}
+  - : Définit le jour du mois pour la date donnée selon le temps universel.
+- {{jsxref("Date.prototype.setUTCFullYear()")}}
+  - : Définit l'année (exprimée sans chiffres implicites, ex. `1999` et pas `99`) pour la date donnée selon le temps universel.
+- {{jsxref("Date.prototype.setUTCHours()")}}
+  - : Définit l'heure pour la date donnée selon le temps universel.
+- {{jsxref("Date.prototype.setUTCMilliseconds()")}}
+  - : Définit les millisecondes pour la date donnée selon le temps universel.
+- {{jsxref("Date.prototype.setUTCMinutes()")}}
+  - : Définit les minutes pour la date donnée selon le temps universel.
+- {{jsxref("Date.prototype.setUTCMonth()")}}
+  - : Définit le mois pour la date donnée selon le temps universel.
+- {{jsxref("Date.prototype.setUTCSeconds()")}}
+  - : Définit les secondes pour la date donnée selon le temps universel.
+- {{jsxref("Date.prototype.setYear()")}}
+  - : Définit l'année (avec 2 à 3 chiffres) pour la date courante selon le temps local. **On privilégiera la méthode {{jsxref("Date.prototype.setFullYear()", "setFullYear()")}} à la place.**
+- {{jsxref("Date.prototype.toDateString()")}}
+  - : Renvoie la partie "date" (jour, mois, année) de l'objet {{jsxref("Date")}} en une chaîne de caractères compréhensible par un humain (anglophone) (ex. `'Thu Apr 12 2018'`).
+- {{jsxref("Date.prototype.toISOString()")}}
+  - : Convertit une date en une chaîne de caractères selon le format ISO 8601 Étendu.
+- {{jsxref("Date.prototype.toJSON()")}}
+  - : Renvoie une chaîne de caractères représentant l'objet {{jsxref("Date")}} avec {{jsxref("Date.prototype.toISOString()", "toISOString()")}}. Cette méthode est utilisée par {{jsxref("JSON.stringify()")}}.
+- {{jsxref("Date.prototype.toGMTString()")}}
+  - : Renvoie une chaîne de caractères représentant l'objet {{jsxref("Date")}} d'après le fuseau GMT (UTC). **On utilisera plutôt {{jsxref("Date.prototype.toUTCString()", "toUTCString()")}}**.
+- {{jsxref("Date.prototype.toLocaleDateString()")}}
+  - : Renvoie une chaîne de caractères représentant les jours / mois / années de la date courante avec une représentation propre à la locale courante (déduite des paramètres systèmes utilisés).
+- {{jsxref("Date.prototype.toLocaleFormat()")}}
+  - : Convertit la date courante en une chaîne de caractères avec un format décrit en paramètre via une chaîne de caractères.
+- {{jsxref("Date.prototype.toLocaleString()")}}
+  - : Renvoie une chaîne de caractères représentant la date sous le forme de la locale courante. Cette méthode surcharge la méthode {{jsxref("Object.prototype.toLocaleString()")}}.
+- {{jsxref("Date.prototype.toLocaleTimeString()")}}
+  - : Renvoie une chaîne de caractères représentant les heures / minutes / secondes de la date courante avec une représentation propre à la locale courante (déduite des paramètres systèmes utilisés).
+- {{jsxref("Date.prototype.toString()")}}
+  - : Renvoie une chaîne de caractères représentant l'objet {{jsxref("Date")}} courant. Cette méthode surcharge la méthode {{jsxref("Object.prototype.toString()")}}.
+- {{jsxref("Date.prototype.toTimeString()")}}
+  - : Renvoie l'heure (avec les minutes et les secondes) d'une date sous la forme d'une chaîne de caractères compréhensible par un humain.
+- {{jsxref("Date.prototype.toUTCString()")}}
+  - : Convertit une date en chaîne de caractère en utilisant le temps universel comme référentiel.
+- {{jsxref("Date.prototype.valueOf()")}}
+  - : Renvoie la valeur primitive d'un objet {{jsxref("Date")}}. Cette méthode surcharge la méthode {{jsxref("Object.prototype.valueOf()")}}.
+
+## Exemples
+
+### Différentes façons de créer un objet `Date`
+
+Les exemples qui suivent illustrent différentes méthodes permettant de créer des dates JavaScript :
+
+> **Note :** L'analyse de chaîne de caractères représentant des dates avec le constructeur `Date`  (ou `Date.parse` qui est équivalent) est fortement déconseillée en raison des différences de comportement existant entre les navigateurs.
+
+```js
+let aujourdhui = new Date()
+let anniversaire = new Date('September 22, 2018 15:00:00')
+let anniversaire = new Date('2018-09-22T15:00:00')
+let anniversaire = new Date(2018, 8, 22)            // the month is 0-indexed
+let anniversaire = new Date(2018, 8, 22, 15, 0, 0)
+```
+
+### Les années sur deux chiffres correspondent à la période 1900 – 1999
+
+Afin de créer et de manipuler des dates sur les années `0` à `99` de notre ère, on doit utiliser les méthodes {{jsxref("Date.prototype.setFullYear()")}} and {{jsxref("Date.prototype.getFullYear()")}}.
+
+```js
+let date = new Date(98, 1)  // Sun Feb 01 1998 00:00:00 GMT+0000 (GMT)
+
+// Méthode dépréciée, 98 correspond également ici à 1998
+date.setYear(98)            // Sun Feb 01 1998 00:00:00 GMT+0000 (GMT)
+
+date.setFullYear(98)        // Sat Feb 01 0098 00:00:00 GMT+0000 (BST)
+```
+
+### Calculer le temps écoulé
+
+Dans les exemples suivants, on illustre comment calculer le temps écoulé entre deux dates JavaScript en millisecondes.
+
+En raison de durées différentes pour les jours (heure d'été / heure d'hiver), les mois et les années, il faudra faire attention et étudier le sujet avant d'exprimer des durées en unités supérieures à des heures / minutes / secondes.
+
+```js
+// Utiliser des objets Date
+let debut = Date.now()
+
+// Ici, l'évènement dont on veut mesurer la durée :
+faireQuelqueChosePendantLongtemps()
+let fin = Date.now()
+let duree = fin - debut // La durée écoulée, en millisecondes
+```
+
+```js
+// En utilisant les méthodes natives
+let debut = new Date()
+
+// Ici, l'évènement dont on veut mesurer la durée :
+faireQuelqueChosePendantLongtemps()
+let fin = new Date()
+let duree = fin.getTime() - debut.getTime() // La durée écoulée, en millisecondes
+```
+
+```js
+// Pour tester le temps d'exécution d'une fonction
+function afficheDureeEcoulee(fTest) {
+  let debut = Date.now(),
+      valRetour = fTest(),
+      fin = Date.now()
+
+  console.log(`Durée écoulée : ${ String(fin - debut) } millisecondes`)
+  return valRetour
+}
+
+let valeurDeRetour = afficheDureeEcoulee(maFonctionATester)
+```
+
+> **Note :** Pour les navigateurs qui prennent en charge l'{{domxref("Window.performance", "API Web Performance", "", 1)}}, la méthode {{domxref("Performance.now()")}} peut fournir un outil de mesure des durées écoulées plus fiable et précis que {{jsxref("Date.now()")}}.
+
+### Obtenir le nombre de secondes écoulées depuis l'epoch ECMAScript
+
+```js
+let secondes = Math.floor(Date.now() / 1000)
+```
+
+Dans ce cas, on renvoie un entier et c'est pour ça qu'on utilise {{jsxref("Math.floor()")}}. Par ailleurs, on n'utilise pas {{jsxref("Math.round()")}} afin d'avoir le nombre de secondes effectivement écoulées.
+
+## Spécifications
+
+| Spécification                                                        |
+| -------------------------------------------------------------------- |
+| {{SpecName('ESDraft', '#sec-date-objects', 'Date')}} |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Date", 3)}}
+
+## Voir aussi
+
+- Le constructeur {{jsxref("Date/Date", "Date()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/date/now/index.html b/files/fr/web/javascript/reference/global_objects/date/now/index.html
deleted file mode 100644
index 271fbf39bb..0000000000
--- a/files/fr/web/javascript/reference/global_objects/date/now/index.html
+++ /dev/null
@@ -1,103 +0,0 @@
----
-title: Date.now()
-slug: Web/JavaScript/Reference/Global_Objects/Date/now
-tags:
-  - Date
-  - JavaScript
-  - Méthode
-  - Reference
-  - polyfill
-translation_of: Web/JavaScript/Reference/Global_Objects/Date/now
-original_slug: Web/JavaScript/Reference/Objets_globaux/Date/now
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <strong><code>Date.now()</code></strong> renvoie le nombre de millisecondes écoulées depuis le 1er Janvier 1970 00:00:00 UTC.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/date-now.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">var tempsEnMs = Date.now();
-</pre>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Le nombre de millisecondes écoulées depuis le premier janvier 1970 à minuit UTC.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>La méthode <code>now()</code> renvoie le nombre de millisecondes écoulées depuis le 1er janvier 1970 00:00:00 UTC sous forme d'un {{jsxref("Number")}} (nombre).</p>
-
-<p><code>now()</code> étant une méthode statique de {{jsxref("Date")}}, on utilisera toujours la forme <code>Date.now()</code>.</p>
-
-<h2 id="Prothèse_d'émulation_(polyfill)">Prothèse d'émulation (<em>polyfill</em>)</h2>
-
-<p>Cette méthode a été standardisée dans la 5e édition d'ECMA-262. Les moteurs JavaScript ne la supportant pas peuvent l'émuler de la façon suivante :</p>
-
-<pre class="brush: js">if (!Date.now) {
-  Date.now = function now() {
-    return new Date().getTime();
-  };
-}
-</pre>
-
-<h2 id="Précision_temporelle_réduite">Précision temporelle réduite</h2>
-
-<p>Afin de protéger contre les attaques de minutage et d'identification, la précision de <code>new Date.now()</code> peut être arrondie en fonction des paramètres du navigateur. Pour Firefox, la préférence <code>privacy.reduceTimerPrecision</code> est activée par défaut et vaut, par défaut 20ms pour Firefox 59 et 2ms pour Firefox 60.</p>
-
-<pre class="brush: js">// Précision temporelle réduite (2ms) pour Firefox 60
-new Date().getTime();
-// 1519211809934
-// 1519211810362
-// 1519211811670
-// ...
-
-
-// précision temporelle avec `privacy.resistFingerprinting` activé
-new Date().getTime();
-// 1519129853500
-// 1519129858900
-// 1519129864400
-// ...
-</pre>
-
-<p>Pour Firefox, il est également possible d'activer <code>privacy.resistFingerprinting</code> auquel cas la précision sera 100ms ou la valeur de <code>privacy.resistFingerprinting.reduceTimerPrecision.microseconds</code> selon laquelle est plus grande.</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-15.9.4.4', 'Date.now')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td>Définition initiale. Implémentée avec JavaScript 1.5.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-date.now', 'Date.now')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-date.now', 'Date.now')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Date.now")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{domxref("window.performance.now")}} - renvoie des timestamps (horodatages) avec une précision supérieure à la milliseconde pour mesurer la performance des pages web.</li>
- <li>{{domxref("console.time")}} / {{domxref("console.timeEnd")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/date/now/index.md b/files/fr/web/javascript/reference/global_objects/date/now/index.md
new file mode 100644
index 0000000000..27cfc90da5
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/date/now/index.md
@@ -0,0 +1,83 @@
+---
+title: Date.now()
+slug: Web/JavaScript/Reference/Global_Objects/Date/now
+tags:
+  - Date
+  - JavaScript
+  - Méthode
+  - Reference
+  - polyfill
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/now
+original_slug: Web/JavaScript/Reference/Objets_globaux/Date/now
+---
+{{JSRef}}
+
+La méthode **`Date.now()`** renvoie le nombre de millisecondes écoulées depuis le 1er Janvier 1970 00:00:00 UTC.
+
+{{EmbedInteractiveExample("pages/js/date-now.html")}}
+
+## Syntaxe
+
+    var tempsEnMs = Date.now();
+
+### Valeur de retour
+
+Le nombre de millisecondes écoulées depuis le premier janvier 1970 à minuit UTC.
+
+## Description
+
+La méthode `now()` renvoie le nombre de millisecondes écoulées depuis le 1er janvier 1970 00:00:00 UTC sous forme d'un {{jsxref("Number")}} (nombre).
+
+`now()` étant une méthode statique de {{jsxref("Date")}}, on utilisera toujours la forme `Date.now()`.
+
+## Prothèse d'émulation (_polyfill_)
+
+Cette méthode a été standardisée dans la 5e édition d'ECMA-262. Les moteurs JavaScript ne la supportant pas peuvent l'émuler de la façon suivante :
+
+```js
+if (!Date.now) {
+  Date.now = function now() {
+    return new Date().getTime();
+  };
+}
+```
+
+## Précision temporelle réduite
+
+Afin de protéger contre les attaques de minutage et d'identification, la précision de `new Date.now()` peut être arrondie en fonction des paramètres du navigateur. Pour Firefox, la préférence `privacy.reduceTimerPrecision` est activée par défaut et vaut, par défaut 20ms pour Firefox 59 et 2ms pour Firefox 60.
+
+```js
+// Précision temporelle réduite (2ms) pour Firefox 60
+new Date().getTime();
+// 1519211809934
+// 1519211810362
+// 1519211811670
+// ...
+
+
+// précision temporelle avec `privacy.resistFingerprinting` activé
+new Date().getTime();
+// 1519129853500
+// 1519129858900
+// 1519129864400
+// ...
+```
+
+Pour Firefox, il est également possible d'activer `privacy.resistFingerprinting` auquel cas la précision sera 100ms ou la valeur de `privacy.resistFingerprinting.reduceTimerPrecision.microseconds` selon laquelle est plus grande.
+
+## Spécifications
+
+| Spécification                                                        | État                         | Commentaires                                          |
+| -------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- |
+| {{SpecName('ES5.1', '#sec-15.9.4.4', 'Date.now')}} | {{Spec2('ES5.1')}}     | Définition initiale. Implémentée avec JavaScript 1.5. |
+| {{SpecName('ES6', '#sec-date.now', 'Date.now')}}     | {{Spec2('ES6')}}         |                                                       |
+| {{SpecName('ESDraft', '#sec-date.now', 'Date.now')}} | {{Spec2('ESDraft')}} |                                                       |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Date.now")}}
+
+## Voir aussi
+
+- {{domxref("window.performance.now")}} - renvoie des timestamps (horodatages) avec une précision supérieure à la milliseconde pour mesurer la performance des pages web.
+- {{domxref("console.time")}} / {{domxref("console.timeEnd")}}
diff --git a/files/fr/web/javascript/reference/global_objects/date/parse/index.html b/files/fr/web/javascript/reference/global_objects/date/parse/index.html
deleted file mode 100644
index 86226b698a..0000000000
--- a/files/fr/web/javascript/reference/global_objects/date/parse/index.html
+++ /dev/null
@@ -1,195 +0,0 @@
----
-title: Date.parse()
-slug: Web/JavaScript/Reference/Global_Objects/Date/parse
-tags:
-  - Date
-  - JavaScript
-  - Méthode
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Date/parse
-original_slug: Web/JavaScript/Reference/Objets_globaux/Date/parse
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <strong><code>Date.parse()</code></strong><strong> </strong>analyse la représentation textuelle d'une date, et renvoie le nombre de millisecondes depuis le 1er janvier 1970, 00:00:00 UTC jusqu'à cette date ou <code>NaN</code> si la chaîne n'est pas reconnue ou décrit une date invalide (par exemple 2015-02-31).</p>
-
-<div class="note">
-<p><strong>Note :</strong> Pour les anciennes implémentations (avant ES5), le résultat de <code>Date.</code><code>parse</code> variait d'une implémentation à l'autre. Attention donc à la compatibilité avec ces anciennes versions.</p>
-</div>
-
-<div>{{EmbedInteractiveExample("pages/js/date-parse.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<p>Appel direct :</p>
-
-<pre class="syntaxbox notranslate">Date.parse(dateString)</pre>
-
-<p>Appel implicite :</p>
-
-<pre class="syntaxbox notranslate">new Date(<var>dateString</var>)</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>dateString</code></dt>
- <dd>Une chaine de caractères représentant une date dans une version simplifiéee d'ISO 8601 (d'autres formats peuvent être utilisés mais les résultats ne sont pas garantis).</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Un nombre correspondant au nombre de millisecondes écoulées entre le premier janvier 1970 à minuit UTC et la date indiquée en argument sous la forme d'une chaîne de caractères. Si l'argument ne permet pas de décrire une date valide, c'est {{jsxref("NaN")}} qui sera renvoyé.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>La méthode <code>parse</code> prend en argument une chaine de caractères contenant une date en paramètre (comme "<code>Dec 25, 1995</code>") et renvoie le nombre de millièmes de secondes depuis le 1er janvier 1970, 00:00:00 UTC. Cette fonction est utile pour définir des valeurs de dates à partir de représentations textuelles, par exemple en conjonction avec la méthode {{jsxref("Objets_globaux/Date/setTime", "setTime()")}} et l'objet {{jsxref("Objets_globaux/Date", "Date")}}.</p>
-
-<h3 id="Format_de_la_chaîne_de_caractères">Format de la chaîne de caractères</h3>
-
-<p>À partir d'une chaine de caractères représentant une date, <code>parse</code> renvoie une valeur de temps. La syntaxe acceptée est un format simplifié de la norme ISO 8601. On pourra par exemple utiliser <code>"2011-10-10"</code> (date uniquement), <code>"2011-10-10T14:48:00"</code> (date et heure) ou <code>"2011-10-10T14:48:00.000+09:00"</code> (date, heure, millisecondes et fuseau horaire).</p>
-
-<p>Si aucun fuseau horaire n'est spécifié, les chaînes représentant uniquement des dates seront considérées comme UTC et les dates / heures seront considérées comme locales.</p>
-
-<p>Lorsque des indicateurs de fuseau horaire sont utilisés, la valeur renvoyée correspondra toujours au nombre de millisecondes écoulées entre l'argument et le premier janvier 1970 à minuit UTC.</p>
-
-<p><code>parse()</code> est une méthode statique de {{jsxref("Date")}} et on invoquera ainsi <code>Date.parse()</code> plutôt que <code>parse()</code> sur une instance d'un objet <code>Date</code>.</p>
-
-<h3 id="Différences_entre_les_fuseaux_horaires_supposés">Différences entre les fuseaux horaires supposés</h3>
-
-<p>Avec une chaîne comme <code>"March 7, 2014"</code>, <code>parse()</code> supposera un fuseau horaire local, avec une chaîne au format ISO comme <code>"2014-03-07"</code>, la méthode supposera un fuseau horaire UTC en ES5 et un fuseau horaire local pour ECMAScript 2015. Ainsi les objets {{jsxref("Date")}} construits avec ces chaînes représenteront des instants différents, sauf si le fuseau horaire local du système utilisé correspond à UTC. Cela signifie que deux dates représentées de façon textuelles semblables peuvent donner des dates différentes (ce comportement doit être corrigé avec ECMAScript 6 afin que les deux dates soient traitées de façon locale).</p>
-
-<h3 id="Traitement_laissé_libre_à_limplémentation">Traitement laissé libre à l'implémentation</h3>
-
-<p>Le standard ECMAScript dicte que si la chaîne utilisée n'est pas conforme au format standard, alors la fonction peut utiliser une heuristique et/ou un algorithme d'analyse de texte propre à l'implémentation. Les chaînes impossibles à décoder et/ou qui contiennent des éléments non-conformes aux formats ISO doivent renvoyer {{jsxref("NaN")}} lors de l'appel à <code>Date.parse()</code>.</p>
-
-<p>Cependant, les valeurs invalides qui ne sont pas reconnues dans un format ISO pris en charge par ECMA-262 peuvent ou non engendrer la valeur {{jsxref("NaN")}} selon le navigateur et les valeurs utilisées. Par exemple :</p>
-
-<pre class="brush: js notranslate">// Chaîne non ISO avec des valeurs invalides
-new Date('23/25/2014');</pre>
-
-<p>sera traitée comme la date locale du 25 novembre 2015 avec Firefox 30 et comme invalide avec Safari 7. Cependant, si la chaîne est reconnue dans un format ISO mais contient des valeurs invalides, la méthode renverra {{jsxref("NaN")}} pour tous les navigateurs conformes à ES5 (ou aux versions ultérieures) :</p>
-
-<pre class="brush: js notranslate">// Chaîne ISO avec des valeurs invalides new
-Date('2014-25-23').toISOString();
-// renvoie "RangeError: invalid date" pour les navigateurs ES5</pre>
-
-<p>L'implémentation spécifique de SpiderMonkey peut être trouvée dans le fichier <a href="https://dxr.mozilla.org/mozilla-central/source/js/src/jsdate.cpp?rev=64553c483cd1#889"><code>jsdate.cpp</code></a>. La chaîne <code>"10 06 2014"</code> est un exemple de chaîne non ISO, utiliser parse() sur cette chaîne entraînera le moteur JavaScript à utiliser son implémentation de recours. Voir ce <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1023155#c6">bug</a> pour une explication rapide de la façon dont est faite l'analyse de la chaîne.</p>
-
-<pre class="brush: js notranslate">new Date('10 06 2014');</pre>
-
-<p>sera traitée comme la date locale du 6 octobre 2014 et non comme le 10 juin 2014. D'autres exemples :</p>
-
-<pre class="brush: js notranslate">new Date('toto-truc 2014').toString();
-// renvoie : "Invalid Date"
-Date.parse('toto-truc 2014');
-// renvoie : NaN</pre>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Utiliser_Date.parse">Utiliser <code>Date.parse()</code></h3>
-
-<p>Les appels suivants renvoient tous <code>1546300800000</code>. Dans le premier appel, on indique uniquement la date (et donc le fuseau UTC implicite). Les chaînes qui suivent utilisent une indication de fuseau horaire selon la norme ISO (<code>Z</code> et <code>+00:00</code>)</p>
-
-<pre class="brush: js notranslate">Date.parse("2019-01-01")
-Date.parse("2019-01-01T00:00:00.000Z")
-Date.parse("2019-01-01T00:00:00.000+00:00")
-</pre>
-
-<p>L'appel suivant, qui ne précise pas le fuseau horaire, fournira le nombre de millisecondes écoulées entre le premier janvier 1970 minuit UTC et le premier janvier 2019 à minuit selon l'heure locale du système utilisé.</p>
-
-<pre class="brush: js notranslate">Date.parse("2019-01-01T00:00:00")
-</pre>
-
-<h3 id="Chaînes_de_caractères_non-standard">Chaînes de caractères non-standard</h3>
-
-<div class="blockIndicator note">
-<p><strong>Note :</strong> Cette section contient des exemples qui reposent sur des comportements spécifiques aux implémentations et on peut donc avoir des incohérences entre les moteurs utilisés.</p>
-</div>
-
-<p>Si <code>IPOdate</code> est un objet {{jsxref("Date")}}, on peut définir sa valeur au 9 août 1995 (heure locale), de la façon suivante :</p>
-
-<pre class="brush: js notranslate">IPOdate.setTime(Date.parse('Aug 9, 1995'));
-</pre>
-
-<p>Voici un autre exemple avec une chaîne qui ne suit pas le format standard.</p>
-
-<pre class="brush: js notranslate">Date.parse('Aug 9, 1995');
-</pre>
-
-<p>Cette méthode renverra <code>807937200000</code> pour le fuseau horaire GMT-0300 et d'autres valeurs pour d'autres fuseaux car la chaîne n'indique pas le fuseau horaire et ne respecte pas le format ISO (le fuseau considéré par défaut est donc le fuseau local).</p>
-
-<pre class="brush: js notranslate">Date.parse('Wed, 09 Aug 1995 00:00:00 GMT');
-</pre>
-
-<p>Renvoie <code>807926400000</code> quel que soit le fuseau local car on indique GMT.</p>
-
-<pre class="brush: js notranslate">Date.parse('Wed, 09 Aug 1995 00:00:00');
-</pre>
-
-<p>Renvoie <code>807937200000</code> dans le fuseau GMT-0300 et d'autres valeurs pour d'autres fuseaux car aucune indication de fuseau n'est fournie et que la chaîne n'est pas au format ISO, elle est donc traitée comme un temps local.</p>
-
-<pre class="brush: js notranslate">Date.parse('Thu, 01 Jan 1970 00:00:00 GMT');
-</pre>
-
-<p>Renvoie <code>0</code> quel que soit le fuseau local car l'indicateur GMT est fourni.</p>
-
-<pre class="brush: js notranslate">Date.parse('Thu, 01 Jan 1970 00:00:00');
-</pre>
-
-<p>Renvoie <code>14400000</code> pour le fuseau GMT-0400 et d'autres valeurs dans d'autres fuseaux car aucune indication de fuseau n'est fournie et la chaîne n'est pas au format ISO, elle est donc traitée comme un temps local.</p>
-
-<pre class="brush: js notranslate">Date.parse('Thu, 01 Jan 1970 00:00:00 GMT-0400');
-</pre>
-
-<p>Renvoie <code>14400000</code> quel que soit le fuseau car l'indicateur GMT est fourni.</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('ES1')}}</td>
-   <td>{{Spec2('ES1')}}</td>
-   <td>Définition initiale. Implémentée avec JavaScript 1.0.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-15.9.4.2', 'Date.parse')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td>Ajout du format ISO 8601 simplifié.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-date.parse', 'Date.parse')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-date.parse', 'Date.parse')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Date.parse")}}</p>
-
-<h2 id="Notes_de_compatibilité">Notes de compatibilité</h2>
-
-<ul>
- <li>À partir de Firefox 49 ({{geckoRelease(49)}}, l'interprétation des années exprimées sur deux chiffres est alignée avec Google Chrome (et non plus avec Internet Explorer). Désormais, les années exprimées sur deux chiffres et strictement inférieures à 50 seront considérées comme des années du XXIe siècle. Ainsi, <code>04/16/17</code> correspondait avant au 16 avril 1917 et correspond désormais au 16 avril 2017. Cela évite des problèmes d'interopérabilité et d'ambiguïté et cette méthode est recommandée par le format ISO 8601 (cf. {{bug(1265136)}}).</li>
- <li>Google Chrome acceptera une chaîne de caractères avec un nombre pour le paramètre <code>dateString</code>. Ainsi, si on exécute <code>!!Date.parse("42")</code> dans Firefox, on obtiendra <code>false</code> tandis que que Google Chrome donnera <code>true</code> car <code>"42"</code> sera interprété comme la date du premier janvier 2042.</li>
-</ul>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Date.UTC()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/date/parse/index.md b/files/fr/web/javascript/reference/global_objects/date/parse/index.md
new file mode 100644
index 0000000000..5aebdfbe75
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/date/parse/index.md
@@ -0,0 +1,177 @@
+---
+title: Date.parse()
+slug: Web/JavaScript/Reference/Global_Objects/Date/parse
+tags:
+  - Date
+  - JavaScript
+  - Méthode
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/parse
+original_slug: Web/JavaScript/Reference/Objets_globaux/Date/parse
+---
+{{JSRef}}
+
+La méthode **`Date.parse()`\*\*** \*\*analyse la représentation textuelle d'une date, et renvoie le nombre de millisecondes depuis le 1er janvier 1970, 00:00:00 UTC jusqu'à cette date ou `NaN` si la chaîne n'est pas reconnue ou décrit une date invalide (par exemple 2015-02-31).
+
+> **Note :** Pour les anciennes implémentations (avant ES5), le résultat de ` Date.``parse ` variait d'une implémentation à l'autre. Attention donc à la compatibilité avec ces anciennes versions.
+
+{{EmbedInteractiveExample("pages/js/date-parse.html")}}
+
+## Syntaxe
+
+Appel direct :
+
+    Date.parse(dateString)
+
+Appel implicite :
+
+    new Date(dateString)
+
+### Paramètres
+
+- `dateString`
+  - : Une chaine de caractères représentant une date dans une version simplifiéee d'ISO 8601 (d'autres formats peuvent être utilisés mais les résultats ne sont pas garantis).
+
+### Valeur de retour
+
+Un nombre correspondant au nombre de millisecondes écoulées entre le premier janvier 1970 à minuit UTC et la date indiquée en argument sous la forme d'une chaîne de caractères. Si l'argument ne permet pas de décrire une date valide, c'est {{jsxref("NaN")}} qui sera renvoyé.
+
+## Description
+
+La méthode `parse` prend en argument une chaine de caractères contenant une date en paramètre (comme "`Dec 25, 1995`") et renvoie le nombre de millièmes de secondes depuis le 1er janvier 1970, 00:00:00 UTC. Cette fonction est utile pour définir des valeurs de dates à partir de représentations textuelles, par exemple en conjonction avec la méthode {{jsxref("Objets_globaux/Date/setTime", "setTime()")}} et l'objet {{jsxref("Objets_globaux/Date", "Date")}}.
+
+### Format de la chaîne de caractères
+
+À partir d'une chaine de caractères représentant une date, `parse` renvoie une valeur de temps. La syntaxe acceptée est un format simplifié de la norme ISO 8601. On pourra par exemple utiliser `"2011-10-10"` (date uniquement), `"2011-10-10T14:48:00"` (date et heure) ou `"2011-10-10T14:48:00.000+09:00"` (date, heure, millisecondes et fuseau horaire).
+
+Si aucun fuseau horaire n'est spécifié, les chaînes représentant uniquement des dates seront considérées comme UTC et les dates / heures seront considérées comme locales.
+
+Lorsque des indicateurs de fuseau horaire sont utilisés, la valeur renvoyée correspondra toujours au nombre de millisecondes écoulées entre l'argument et le premier janvier 1970 à minuit UTC.
+
+`parse()` est une méthode statique de {{jsxref("Date")}} et on invoquera ainsi `Date.parse()` plutôt que `parse()` sur une instance d'un objet `Date`.
+
+### Différences entre les fuseaux horaires supposés
+
+Avec une chaîne comme `"March 7, 2014"`, `parse()` supposera un fuseau horaire local, avec une chaîne au format ISO comme `"2014-03-07"`, la méthode supposera un fuseau horaire UTC en ES5 et un fuseau horaire local pour ECMAScript 2015. Ainsi les objets {{jsxref("Date")}} construits avec ces chaînes représenteront des instants différents, sauf si le fuseau horaire local du système utilisé correspond à UTC. Cela signifie que deux dates représentées de façon textuelles semblables peuvent donner des dates différentes (ce comportement doit être corrigé avec ECMAScript 6 afin que les deux dates soient traitées de façon locale).
+
+### Traitement laissé libre à l'implémentation
+
+Le standard ECMAScript dicte que si la chaîne utilisée n'est pas conforme au format standard, alors la fonction peut utiliser une heuristique et/ou un algorithme d'analyse de texte propre à l'implémentation. Les chaînes impossibles à décoder et/ou qui contiennent des éléments non-conformes aux formats ISO doivent renvoyer {{jsxref("NaN")}} lors de l'appel à `Date.parse()`.
+
+Cependant, les valeurs invalides qui ne sont pas reconnues dans un format ISO pris en charge par ECMA-262 peuvent ou non engendrer la valeur {{jsxref("NaN")}} selon le navigateur et les valeurs utilisées. Par exemple :
+
+```js
+// Chaîne non ISO avec des valeurs invalides
+new Date('23/25/2014');
+```
+
+sera traitée comme la date locale du 25 novembre 2015 avec Firefox 30 et comme invalide avec Safari 7. Cependant, si la chaîne est reconnue dans un format ISO mais contient des valeurs invalides, la méthode renverra {{jsxref("NaN")}} pour tous les navigateurs conformes à ES5 (ou aux versions ultérieures) :
+
+```js
+// Chaîne ISO avec des valeurs invalides new
+Date('2014-25-23').toISOString();
+// renvoie "RangeError: invalid date" pour les navigateurs ES5
+```
+
+L'implémentation spécifique de SpiderMonkey peut être trouvée dans le fichier [`jsdate.cpp`](https://dxr.mozilla.org/mozilla-central/source/js/src/jsdate.cpp?rev=64553c483cd1#889). La chaîne `"10 06 2014"` est un exemple de chaîne non ISO, utiliser parse() sur cette chaîne entraînera le moteur JavaScript à utiliser son implémentation de recours. Voir ce [bug](https://bugzilla.mozilla.org/show_bug.cgi?id=1023155#c6) pour une explication rapide de la façon dont est faite l'analyse de la chaîne.
+
+```js
+new Date('10 06 2014');
+```
+
+sera traitée comme la date locale du 6 octobre 2014 et non comme le 10 juin 2014. D'autres exemples :
+
+```js
+new Date('toto-truc 2014').toString();
+// renvoie : "Invalid Date"
+Date.parse('toto-truc 2014');
+// renvoie : NaN
+```
+
+## Exemples
+
+### Utiliser `Date.parse()`
+
+Les appels suivants renvoient tous `1546300800000`. Dans le premier appel, on indique uniquement la date (et donc le fuseau UTC implicite). Les chaînes qui suivent utilisent une indication de fuseau horaire selon la norme ISO (`Z` et `+00:00`)
+
+```js
+Date.parse("2019-01-01")
+Date.parse("2019-01-01T00:00:00.000Z")
+Date.parse("2019-01-01T00:00:00.000+00:00")
+```
+
+L'appel suivant, qui ne précise pas le fuseau horaire, fournira le nombre de millisecondes écoulées entre le premier janvier 1970 minuit UTC et le premier janvier 2019 à minuit selon l'heure locale du système utilisé.
+
+```js
+Date.parse("2019-01-01T00:00:00")
+```
+
+### Chaînes de caractères non-standard
+
+> **Note :** Cette section contient des exemples qui reposent sur des comportements spécifiques aux implémentations et on peut donc avoir des incohérences entre les moteurs utilisés.
+
+Si `IPOdate` est un objet {{jsxref("Date")}}, on peut définir sa valeur au 9 août 1995 (heure locale), de la façon suivante :
+
+```js
+IPOdate.setTime(Date.parse('Aug 9, 1995'));
+```
+
+Voici un autre exemple avec une chaîne qui ne suit pas le format standard.
+
+```js
+Date.parse('Aug 9, 1995');
+```
+
+Cette méthode renverra `807937200000` pour le fuseau horaire GMT-0300 et d'autres valeurs pour d'autres fuseaux car la chaîne n'indique pas le fuseau horaire et ne respecte pas le format ISO (le fuseau considéré par défaut est donc le fuseau local).
+
+```js
+Date.parse('Wed, 09 Aug 1995 00:00:00 GMT');
+```
+
+Renvoie `807926400000` quel que soit le fuseau local car on indique GMT.
+
+```js
+Date.parse('Wed, 09 Aug 1995 00:00:00');
+```
+
+Renvoie `807937200000` dans le fuseau GMT-0300 et d'autres valeurs pour d'autres fuseaux car aucune indication de fuseau n'est fournie et que la chaîne n'est pas au format ISO, elle est donc traitée comme un temps local.
+
+```js
+Date.parse('Thu, 01 Jan 1970 00:00:00 GMT');
+```
+
+Renvoie `0` quel que soit le fuseau local car l'indicateur GMT est fourni.
+
+```js
+Date.parse('Thu, 01 Jan 1970 00:00:00');
+```
+
+Renvoie `14400000` pour le fuseau GMT-0400 et d'autres valeurs dans d'autres fuseaux car aucune indication de fuseau n'est fournie et la chaîne n'est pas au format ISO, elle est donc traitée comme un temps local.
+
+```js
+Date.parse('Thu, 01 Jan 1970 00:00:00 GMT-0400');
+```
+
+Renvoie `14400000` quel que soit le fuseau car l'indicateur GMT est fourni.
+
+## Spécifications
+
+| Spécification                                                                | État                         | Commentaires                                          |
+| ---------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- |
+| {{SpecName('ES1')}}                                                     | {{Spec2('ES1')}}         | Définition initiale. Implémentée avec JavaScript 1.0. |
+| {{SpecName('ES5.1', '#sec-15.9.4.2', 'Date.parse')}}         | {{Spec2('ES5.1')}}     | Ajout du format ISO 8601 simplifié.                   |
+| {{SpecName('ES6', '#sec-date.parse', 'Date.parse')}}         | {{Spec2('ES6')}}         |                                                       |
+| {{SpecName('ESDraft', '#sec-date.parse', 'Date.parse')}} | {{Spec2('ESDraft')}} |                                                       |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Date.parse")}}
+
+## Notes de compatibilité
+
+- À partir de Firefox 49 ({{geckoRelease(49)}}, l'interprétation des années exprimées sur deux chiffres est alignée avec Google Chrome (et non plus avec Internet Explorer). Désormais, les années exprimées sur deux chiffres et strictement inférieures à 50 seront considérées comme des années du XXIe siècle. Ainsi, `04/16/17` correspondait avant au 16 avril 1917 et correspond désormais au 16 avril 2017. Cela évite des problèmes d'interopérabilité et d'ambiguïté et cette méthode est recommandée par le format ISO 8601 (cf. {{bug(1265136)}}).
+- Google Chrome acceptera une chaîne de caractères avec un nombre pour le paramètre `dateString`. Ainsi, si on exécute `!!Date.parse("42")` dans Firefox, on obtiendra `false` tandis que que Google Chrome donnera `true` car `"42"` sera interprété comme la date du premier janvier 2042.
+
+## Voir aussi
+
+- {{jsxref("Date.UTC()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/date/setdate/index.html b/files/fr/web/javascript/reference/global_objects/date/setdate/index.html
deleted file mode 100644
index 7091ece853..0000000000
--- a/files/fr/web/javascript/reference/global_objects/date/setdate/index.html
+++ /dev/null
@@ -1,95 +0,0 @@
----
-title: Date.prototype.setDate()
-slug: Web/JavaScript/Reference/Global_Objects/Date/setDate
-tags:
-  - Date
-  - JavaScript
-  - Méthode
-  - Prototype
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Date/setDate
-original_slug: Web/JavaScript/Reference/Objets_globaux/Date/setDate
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <code><strong>setDate()</strong></code> définit le jour du mois (relatif au début du mois courant) pour une date donnée.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/date-setdate.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>dateObj</var>.setDate(valeurJour)</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>valeurJour</code></dt>
- <dd>Un entier représentant le jour du mois.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Le nombre de millisecondes écoulées entre le premier janvier 1970 00:00:00 UTC et la date résultante (l'objet {{jsxref("Date")}} est également modifié).</p>
-
-<h2 id="Description">Description</h2>
-
-<p>Si la <code>valeurJour</code> est en dehors des limites du mois courant, <code>setDate()</code> mettra à jour l'objet<code> </code>{{jsxref("Date")}} en conséquence.</p>
-
-<p>Par exemple, si 0 est fourni pour <code>valeurJour</code>, la date sera défini sur le dernier jour du mois précédent.</p>
-
-<p>Si on fournit un nombre négatif, la date sera déterminée à rebours à partir du dernier jour du mois précédent. Ainsi, avec -1, on obtiendrait la veille du dernier jour du mois précédent.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Utiliser_setDate()">Utiliser <code>setDate()</code></h3>
-
-<pre class="brush:js">var theBigDay = new Date(1962, 6, 7); // 1962-07-06T23:00:00.000Z
-theBigDay.setDate(24);   // 1962-07-23T23:00:00.000Z
-theBigDay.setDate(32);   // 1962-07-31T23:00:00.000Z
-theBigDay.setDate(22);   // 1962-08-21T23:00:00.000Z
-theBigDay.setDate(0);    // 1962-07-30T23:00:00.000Z
-theBigDay.setDate(98);   // 1962-10-05T23:00:00.000Z
-theBigDay.setDate(-50);  // 1962-08-10T23:00:00.000Z</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES1')}}</td>
-   <td>{{Spec2('ES1')}}</td>
-   <td>Définition initiale. Implémentée avec JavaScript 1.0.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-15.9.5.36', 'Date.prototype.setDate')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-date.prototype.setdate', 'Date.prototype.setDate')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-date.prototype.setdate', 'Date.prototype.setDate')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Date.setDate")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Date.prototype.getDate()")}}</li>
- <li>{{jsxref("Date.prototype.setUTCDate()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/date/setdate/index.md b/files/fr/web/javascript/reference/global_objects/date/setdate/index.md
new file mode 100644
index 0000000000..01ebb5094c
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/date/setdate/index.md
@@ -0,0 +1,70 @@
+---
+title: Date.prototype.setDate()
+slug: Web/JavaScript/Reference/Global_Objects/Date/setDate
+tags:
+  - Date
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/setDate
+original_slug: Web/JavaScript/Reference/Objets_globaux/Date/setDate
+---
+{{JSRef}}
+
+La méthode **`setDate()`** définit le jour du mois (relatif au début du mois courant) pour une date donnée.
+
+{{EmbedInteractiveExample("pages/js/date-setdate.html")}}
+
+## Syntaxe
+
+    dateObj.setDate(valeurJour)
+
+### Paramètres
+
+- `valeurJour`
+  - : Un entier représentant le jour du mois.
+
+### Valeur de retour
+
+Le nombre de millisecondes écoulées entre le premier janvier 1970 00:00:00 UTC et la date résultante (l'objet {{jsxref("Date")}} est également modifié).
+
+## Description
+
+Si la `valeurJour` est en dehors des limites du mois courant, `setDate()` mettra à jour l'objet` `{{jsxref("Date")}} en conséquence.
+
+Par exemple, si 0 est fourni pour `valeurJour`, la date sera défini sur le dernier jour du mois précédent.
+
+Si on fournit un nombre négatif, la date sera déterminée à rebours à partir du dernier jour du mois précédent. Ainsi, avec -1, on obtiendrait la veille du dernier jour du mois précédent.
+
+## Exemples
+
+### Utiliser `setDate()`
+
+```js
+var theBigDay = new Date(1962, 6, 7); // 1962-07-06T23:00:00.000Z
+theBigDay.setDate(24);   // 1962-07-23T23:00:00.000Z
+theBigDay.setDate(32);   // 1962-07-31T23:00:00.000Z
+theBigDay.setDate(22);   // 1962-08-21T23:00:00.000Z
+theBigDay.setDate(0);    // 1962-07-30T23:00:00.000Z
+theBigDay.setDate(98);   // 1962-10-05T23:00:00.000Z
+theBigDay.setDate(-50);  // 1962-08-10T23:00:00.000Z
+```
+
+## Spécifications
+
+| Spécification                                                                                                | État                         | Commentaires                                          |
+| ------------------------------------------------------------------------------------------------------------ | ---------------------------- | ----------------------------------------------------- |
+| {{SpecName('ES1')}}                                                                                     | {{Spec2('ES1')}}         | Définition initiale. Implémentée avec JavaScript 1.0. |
+| {{SpecName('ES5.1', '#sec-15.9.5.36', 'Date.prototype.setDate')}}                     | {{Spec2('ES5.1')}}     |                                                       |
+| {{SpecName('ES6', '#sec-date.prototype.setdate', 'Date.prototype.setDate')}}         | {{Spec2('ES6')}}         |                                                       |
+| {{SpecName('ESDraft', '#sec-date.prototype.setdate', 'Date.prototype.setDate')}} | {{Spec2('ESDraft')}} |                                                       |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Date.setDate")}}
+
+## Voir aussi
+
+- {{jsxref("Date.prototype.getDate()")}}
+- {{jsxref("Date.prototype.setUTCDate()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/date/setfullyear/index.html b/files/fr/web/javascript/reference/global_objects/date/setfullyear/index.html
deleted file mode 100644
index 5c08f44347..0000000000
--- a/files/fr/web/javascript/reference/global_objects/date/setfullyear/index.html
+++ /dev/null
@@ -1,94 +0,0 @@
----
-title: Date.prototype.setFullYear()
-slug: Web/JavaScript/Reference/Global_Objects/Date/setFullYear
-tags:
-  - Date
-  - JavaScript
-  - Méthode
-  - Prototype
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Date/setFullYear
-original_slug: Web/JavaScript/Reference/Objets_globaux/Date/setFullYear
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <code><strong>setFullYear()</strong></code> définit l'année complête pour une date, d'après l'heure locale.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/date-setfullyear.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>dateObj</var>.setFullYear(valeurAnnée[, valeurMois[, valeurJour]])</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>valeurAnnée</code></dt>
- <dd>Un entier indiquant la valeur numérique de l'année, par exemple, 1995.</dd>
- <dt><code>valeurMois</code></dt>
- <dd>Paramètre optionnel qui représente un entier entre 0 et 11, représentant les mois de janvier à décembre.</dd>
- <dt><code>valeurJour</code></dt>
- <dd>Paramètre optionnel qui représente un entier entre 1 et 31 représentant le jour du mois. Si vous indiquez une <code>valeurJour</code>, vous devez aussi indiquer <code>valeurMois</code>.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Le nombre de millisecondes écoulées entre le premier janvier 1970 à minuit UTC et la date mise à jour.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>Si vous n'indiquez pas les paramètres <code>valeurMois</code> et <code>valeurJour</code>. Les valeurs renvoyées par les méthodes {{jsxref("Date.prototype.getMonth()", "getMonth()")}} et {{jsxref("Date.prototype.getDate()", "getDate()")}} seront utilisées.</p>
-
-<p>Si un des paramètres que vous indiquez est en dehors des limites attendues, <code>setFullYear()</code> tentera de mettre à jour la date en conséquence. Pa exemple, si vous indiquez 15 pour <code>valeurMois</code>, l'année sera incrémenté de 1 (année + 1), et 3 sera utilisé pour le mois.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Utiliser_setFullYear()">Utiliser <code>setFullYear()</code></h3>
-
-<pre class="brush:js">var leGrandJour = new Date();
-leGrandJour.setFullYear(1997);
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES1')}}</td>
-   <td>{{Spec2('ES1')}}</td>
-   <td>Définition initiale. Implémentée avec JavaScript 1.3.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-15.9.5.40', 'Date.prototype.setFullYear')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-date.prototype.setfullyear', 'Date.prototype.setFullYear')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-date.prototype.setfullyear', 'Date.prototype.setFullYear')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Date.setFullYear")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Date.prototype.getUTCFullYear()")}}</li>
- <li>{{jsxref("Date.prototype.setUTCFullYear()")}}</li>
- <li>{{jsxref("Date.prototype.setYear()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/date/setfullyear/index.md b/files/fr/web/javascript/reference/global_objects/date/setfullyear/index.md
new file mode 100644
index 0000000000..c5ce1547e4
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/date/setfullyear/index.md
@@ -0,0 +1,68 @@
+---
+title: Date.prototype.setFullYear()
+slug: Web/JavaScript/Reference/Global_Objects/Date/setFullYear
+tags:
+  - Date
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/setFullYear
+original_slug: Web/JavaScript/Reference/Objets_globaux/Date/setFullYear
+---
+{{JSRef}}
+
+La méthode **`setFullYear()`** définit l'année complête pour une date, d'après l'heure locale.
+
+{{EmbedInteractiveExample("pages/js/date-setfullyear.html")}}
+
+## Syntaxe
+
+    dateObj.setFullYear(valeurAnnée[, valeurMois[, valeurJour]])
+
+### Paramètres
+
+- `valeurAnnée`
+  - : Un entier indiquant la valeur numérique de l'année, par exemple, 1995.
+- `valeurMois`
+  - : Paramètre optionnel qui représente un entier entre 0 et 11, représentant les mois de janvier à décembre.
+- `valeurJour`
+  - : Paramètre optionnel qui représente un entier entre 1 et 31 représentant le jour du mois. Si vous indiquez une `valeurJour`, vous devez aussi indiquer `valeurMois`.
+
+### Valeur de retour
+
+Le nombre de millisecondes écoulées entre le premier janvier 1970 à minuit UTC et la date mise à jour.
+
+## Description
+
+Si vous n'indiquez pas les paramètres `valeurMois` et `valeurJour`. Les valeurs renvoyées par les méthodes {{jsxref("Date.prototype.getMonth()", "getMonth()")}} et {{jsxref("Date.prototype.getDate()", "getDate()")}} seront utilisées.
+
+Si un des paramètres que vous indiquez est en dehors des limites attendues, `setFullYear()` tentera de mettre à jour la date en conséquence. Pa exemple, si vous indiquez 15 pour `valeurMois`, l'année sera incrémenté de 1 (année + 1), et 3 sera utilisé pour le mois.
+
+## Exemples
+
+### Utiliser `setFullYear()`
+
+```js
+var leGrandJour = new Date();
+leGrandJour.setFullYear(1997);
+```
+
+## Spécifications
+
+| Spécification                                                                                                        | Statut                       | Commentaires                                          |
+| -------------------------------------------------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- |
+| {{SpecName('ES1')}}                                                                                             | {{Spec2('ES1')}}         | Définition initiale. Implémentée avec JavaScript 1.3. |
+| {{SpecName('ES5.1', '#sec-15.9.5.40', 'Date.prototype.setFullYear')}}                         | {{Spec2('ES5.1')}}     |                                                       |
+| {{SpecName('ES6', '#sec-date.prototype.setfullyear', 'Date.prototype.setFullYear')}}     | {{Spec2('ES6')}}         |                                                       |
+| {{SpecName('ESDraft', '#sec-date.prototype.setfullyear', 'Date.prototype.setFullYear')}} | {{Spec2('ESDraft')}} |                                                       |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Date.setFullYear")}}
+
+## Voir aussi
+
+- {{jsxref("Date.prototype.getUTCFullYear()")}}
+- {{jsxref("Date.prototype.setUTCFullYear()")}}
+- {{jsxref("Date.prototype.setYear()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/date/sethours/index.html b/files/fr/web/javascript/reference/global_objects/date/sethours/index.html
deleted file mode 100644
index a2823e19d0..0000000000
--- a/files/fr/web/javascript/reference/global_objects/date/sethours/index.html
+++ /dev/null
@@ -1,100 +0,0 @@
----
-title: Date.prototype.setHours()
-slug: Web/JavaScript/Reference/Global_Objects/Date/setHours
-tags:
-  - Date
-  - JavaScript
-  - Méthode
-  - Prototype
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Date/setHours
-original_slug: Web/JavaScript/Reference/Objets_globaux/Date/setHours
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <code><strong>setHours()</strong></code> définit les heures pour une date donnée, selon l'heure locale, et renvoie le nombre de millièmes de secondes écoulées entre le 1er janvier 1970 00:00:00 UTC et la nouvelle date mise à jour.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/date-sethours.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">dateObj.setHours(valeurHeures[, valeurMinutes[, valeurSecondes[, valeurMs]]])
-</pre>
-
-<h3 id="Versions_antérieures_à_JavaScript_1.3">Versions antérieures à JavaScript 1.3</h3>
-
-<pre class="syntaxbox">dateObj.setHours(valeurHeures)</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>valeurHeures</code></dt>
- <dd>Un entier normalement compris entre 0 et 23, représentant l'heure. Si la valeur est supérieure à 23, la valeur de l'heure sera incrémentée d'autant d'heures supplémentaires.</dd>
- <dt><code>valeurMinutes</code></dt>
- <dd>Paramètre optionnel, un entier normalement compris entre 0 et 59, représentant les minutes. Si la valeur est supérieure à 59, la valeur de l'heure sera incrémentée d'autant de minutes supplémentaires.</dd>
- <dt><code>valeurSecondes</code></dt>
- <dd>Paramètre optionnel, un entier normalement compris entre 0 et 59, représentant les secondes. Si vous indiquez le paramètre <code>valeurSecondes</code>, vous devez aussi renseigner <code>valeurMinutes</code>. Si la valeur est supérieure à 59, l'heure sera incrémentée d'autant de secondes supplémentaires.</dd>
- <dt><code>valeurMs</code></dt>
- <dd>Paramètre optionnel, un entier normalement compris entre 0 et 999, représentant les millièmes de secondes. Si vous indiquez <code>valeurMs</code>, vous devez aussi renseigner <code>valeurMinutes</code> et <code>valeurSecondes</code>. Si la valeur fournie est supérieure à 999, l'heure sera incrémentée d'autant de millisecondes supplémentaires.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Le nombre de millisecondes écoulées entre le premier janvier 1970 à minuit, UTC et la date mise à jour.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>Si vous ne renseignez pas <code>valeurMinutes</code>, <code>valeurSecondes</code> et <code>valeurMs</code>, les valeurs renvoyées par les méthodes {{jsxref("Date.getMinutes", "getMinutes()")}}, {{jsxref("Date.getSeconds", "getSeconds()")}}, et {{jsxref("Date.getMilliseconds", "getMilliseconds()")}} seront utilisées.</p>
-
-<p>Si un des paramètres que vous renseignez est en dehors des limites attendues, <code>setHours()</code> tentera de mettre à jour la date en conséquence. Par exemple, si vous utilisez 100 pour <code>valeurSecondes</code>, les minutes seront incrémentées de 1 (min + 1), et 40 sera utilisé pour les secondes.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Utiliser_setHours()">Utiliser <code>setHours()</code></h3>
-
-<pre class="brush:js">var leGrandJour = new Date();
-leGrandJour.setHours(7);
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES1')}}</td>
-   <td>{{Spec2('ES1')}}</td>
-   <td>Définition initiale. Implémentée avec JavaScript 1.0</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-15.9.5.34', 'Date.prototype.setHours')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-date.prototype.sethours', 'Date.prototype.setHours')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-date.prototype.sethours', 'Date.prototype.setHours')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Date.setHours")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Date.prototype.getHours()")}}</li>
- <li>{{jsxref("Date.prototype.setUTCHours()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/date/sethours/index.md b/files/fr/web/javascript/reference/global_objects/date/sethours/index.md
new file mode 100644
index 0000000000..0571dbdf8b
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/date/sethours/index.md
@@ -0,0 +1,73 @@
+---
+title: Date.prototype.setHours()
+slug: Web/JavaScript/Reference/Global_Objects/Date/setHours
+tags:
+  - Date
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/setHours
+original_slug: Web/JavaScript/Reference/Objets_globaux/Date/setHours
+---
+{{JSRef}}
+
+La méthode **`setHours()`** définit les heures pour une date donnée, selon l'heure locale, et renvoie le nombre de millièmes de secondes écoulées entre le 1er janvier 1970 00:00:00 UTC et la nouvelle date mise à jour.
+
+{{EmbedInteractiveExample("pages/js/date-sethours.html")}}
+
+## Syntaxe
+
+    dateObj.setHours(valeurHeures[, valeurMinutes[, valeurSecondes[, valeurMs]]])
+
+### Versions antérieures à JavaScript 1.3
+
+    dateObj.setHours(valeurHeures)
+
+### Paramètres
+
+- `valeurHeures`
+  - : Un entier normalement compris entre 0 et 23, représentant l'heure. Si la valeur est supérieure à 23, la valeur de l'heure sera incrémentée d'autant d'heures supplémentaires.
+- `valeurMinutes`
+  - : Paramètre optionnel, un entier normalement compris entre 0 et 59, représentant les minutes. Si la valeur est supérieure à 59, la valeur de l'heure sera incrémentée d'autant de minutes supplémentaires.
+- `valeurSecondes`
+  - : Paramètre optionnel, un entier normalement compris entre 0 et 59, représentant les secondes. Si vous indiquez le paramètre `valeurSecondes`, vous devez aussi renseigner `valeurMinutes`. Si la valeur est supérieure à 59, l'heure sera incrémentée d'autant de secondes supplémentaires.
+- `valeurMs`
+  - : Paramètre optionnel, un entier normalement compris entre 0 et 999, représentant les millièmes de secondes. Si vous indiquez `valeurMs`, vous devez aussi renseigner `valeurMinutes` et `valeurSecondes`. Si la valeur fournie est supérieure à 999, l'heure sera incrémentée d'autant de millisecondes supplémentaires.
+
+### Valeur de retour
+
+Le nombre de millisecondes écoulées entre le premier janvier 1970 à minuit, UTC et la date mise à jour.
+
+## Description
+
+Si vous ne renseignez pas `valeurMinutes`, `valeurSecondes` et `valeurMs`, les valeurs renvoyées par les méthodes {{jsxref("Date.getMinutes", "getMinutes()")}}, {{jsxref("Date.getSeconds", "getSeconds()")}}, et {{jsxref("Date.getMilliseconds", "getMilliseconds()")}} seront utilisées.
+
+Si un des paramètres que vous renseignez est en dehors des limites attendues, `setHours()` tentera de mettre à jour la date en conséquence. Par exemple, si vous utilisez 100 pour `valeurSecondes`, les minutes seront incrémentées de 1 (min + 1), et 40 sera utilisé pour les secondes.
+
+## Exemples
+
+### Utiliser `setHours()`
+
+```js
+var leGrandJour = new Date();
+leGrandJour.setHours(7);
+```
+
+## Spécifications
+
+| Spécification                                                                                                | État                         | Commentaires                                         |
+| ------------------------------------------------------------------------------------------------------------ | ---------------------------- | ---------------------------------------------------- |
+| {{SpecName('ES1')}}                                                                                     | {{Spec2('ES1')}}         | Définition initiale. Implémentée avec JavaScript 1.0 |
+| {{SpecName('ES5.1', '#sec-15.9.5.34', 'Date.prototype.setHours')}}                     | {{Spec2('ES5.1')}}     |                                                      |
+| {{SpecName('ES6', '#sec-date.prototype.sethours', 'Date.prototype.setHours')}}     | {{Spec2('ES6')}}         |                                                      |
+| {{SpecName('ESDraft', '#sec-date.prototype.sethours', 'Date.prototype.setHours')}} | {{Spec2('ESDraft')}} |                                                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Date.setHours")}}
+
+## Voir aussi
+
+- {{jsxref("Date.prototype.getHours()")}}
+- {{jsxref("Date.prototype.setUTCHours()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/date/setmilliseconds/index.html b/files/fr/web/javascript/reference/global_objects/date/setmilliseconds/index.html
deleted file mode 100644
index 472eb7e43e..0000000000
--- a/files/fr/web/javascript/reference/global_objects/date/setmilliseconds/index.html
+++ /dev/null
@@ -1,87 +0,0 @@
----
-title: Date.prototype.setMilliseconds()
-slug: Web/JavaScript/Reference/Global_Objects/Date/setMilliseconds
-tags:
-  - Date
-  - JavaScript
-  - Méthode
-  - Prototype
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Date/setMilliseconds
-original_slug: Web/JavaScript/Reference/Objets_globaux/Date/setMilliseconds
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <code><strong>setMilliseconds()</strong></code> définit les millièmes de secondes pour la date, selon l'heure locale.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/date-setmilliseconds.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>dateObj</var>.setMilliseconds(valeurMs)</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>valeurMs</code></dt>
- <dd>Un entier entre 0 et 999, représentant les millièmes de secondes.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Le nombre de millisecondes écoulées entre le premier janvier 1970 minuit, UTC et la date mise à jour.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>Si vous indiquez un nombre en dehors des limites attendues, la date sera mise à jour en conséquence. Par exemple, si vous indiquez 1005, le nombre des secondes sera incrémenté de 1, et 5 sera utilisé pour les millièmes de secondes.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Utiliser_setMilliseconds()">Utiliser <code>setMilliseconds()</code></h3>
-
-<pre class="brush:js">var leGrandJour = new Date();
-leGrandJour.setMilliseconds(100);
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES1')}}</td>
-   <td>{{Spec2('ES1')}}</td>
-   <td>Définition initiale. Implémentée avec JavaScript 1.3.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-15.9.5.28', 'Date.prototype.setMilliseconds')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-date.prototype.setmilliseconds', 'Date.prototype.setMilliseconds')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-date.prototype.setmilliseconds', 'Date.prototype.setMilliseconds')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Date.setMilliseconds")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Date.prototype.getMilliseconds()")}}</li>
- <li>{{jsxref("Date.prototype.setUTCMilliseconds()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/date/setmilliseconds/index.md b/files/fr/web/javascript/reference/global_objects/date/setmilliseconds/index.md
new file mode 100644
index 0000000000..e6ab186569
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/date/setmilliseconds/index.md
@@ -0,0 +1,61 @@
+---
+title: Date.prototype.setMilliseconds()
+slug: Web/JavaScript/Reference/Global_Objects/Date/setMilliseconds
+tags:
+  - Date
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/setMilliseconds
+original_slug: Web/JavaScript/Reference/Objets_globaux/Date/setMilliseconds
+---
+{{JSRef}}
+
+La méthode **`setMilliseconds()`** définit les millièmes de secondes pour la date, selon l'heure locale.
+
+{{EmbedInteractiveExample("pages/js/date-setmilliseconds.html")}}
+
+## Syntaxe
+
+    dateObj.setMilliseconds(valeurMs)
+
+### Paramètres
+
+- `valeurMs`
+  - : Un entier entre 0 et 999, représentant les millièmes de secondes.
+
+### Valeur de retour
+
+Le nombre de millisecondes écoulées entre le premier janvier 1970 minuit, UTC et la date mise à jour.
+
+## Description
+
+Si vous indiquez un nombre en dehors des limites attendues, la date sera mise à jour en conséquence. Par exemple, si vous indiquez 1005, le nombre des secondes sera incrémenté de 1, et 5 sera utilisé pour les millièmes de secondes.
+
+## Exemples
+
+### Utiliser `setMilliseconds()`
+
+```js
+var leGrandJour = new Date();
+leGrandJour.setMilliseconds(100);
+```
+
+## Spécifications
+
+| Spécification                                                                                                                    | État                         | Commentaires                                          |
+| -------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- |
+| {{SpecName('ES1')}}                                                                                                         | {{Spec2('ES1')}}         | Définition initiale. Implémentée avec JavaScript 1.3. |
+| {{SpecName('ES5.1', '#sec-15.9.5.28', 'Date.prototype.setMilliseconds')}}                                 | {{Spec2('ES5.1')}}     |                                                       |
+| {{SpecName('ES6', '#sec-date.prototype.setmilliseconds', 'Date.prototype.setMilliseconds')}}     | {{Spec2('ES6')}}         |                                                       |
+| {{SpecName('ESDraft', '#sec-date.prototype.setmilliseconds', 'Date.prototype.setMilliseconds')}} | {{Spec2('ESDraft')}} |                                                       |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Date.setMilliseconds")}}
+
+## Voir aussi
+
+- {{jsxref("Date.prototype.getMilliseconds()")}}
+- {{jsxref("Date.prototype.setUTCMilliseconds()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/date/setminutes/index.html b/files/fr/web/javascript/reference/global_objects/date/setminutes/index.html
deleted file mode 100644
index dfed490684..0000000000
--- a/files/fr/web/javascript/reference/global_objects/date/setminutes/index.html
+++ /dev/null
@@ -1,97 +0,0 @@
----
-title: Date.prototype.setMinutes()
-slug: Web/JavaScript/Reference/Global_Objects/Date/setMinutes
-tags:
-  - Date
-  - JavaScript
-  - Méthode
-  - Prototype
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Date/setMinutes
-original_slug: Web/JavaScript/Reference/Objets_globaux/Date/setMinutes
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <code><strong>setMinutes()</strong></code> définit les minutes pour la date donnée, selon l'heure locale.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/date-setminutes.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>dateObj</var>.setMinutes(valeurMinutes[, valeurSecondes[, valeurMs]])</pre>
-
-<h3 id="Versions_antérieures_à_JavaScript_1.3">Versions antérieures à JavaScript 1.3</h3>
-
-<pre class="syntaxbox"><var>dateObj</var>.setMinutes(valeurMinutes)</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>valeurMinutes</code></dt>
- <dd>Un entier entre 0 et 59, représentant les minutes.</dd>
- <dt><code>valeurSecondes</code></dt>
- <dd>Paramètre optionnel, un entier entre 0 et 59, représentant les secondes. Si <code>valeurSecondes</code> est utilisé, il faut également utiliser <code>valeurMinutes</code>.</dd>
- <dt><code>valeurMs</code></dt>
- <dd>Paramètre optionel, un nombre entre 0 et 999, représentant les millièmes de secondes. Si <code>valeurMs</code> est utilisé, il faut également utiliser <code>valeurMinutes</code> et <code>valeurSecondes</code>.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Le nombre de millisecondes écoulées entre le premier janvier 1970 minuit, UTC et la date mise à jour.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>Si <code>valeurSecondes</code> et <code>valeurMs</code> ne sont pas indiquées, les valeurs renvoyées par les méthodes {{jsxref("Date.getSeconds", "getSeconds()")}} et {{jsxref("Date.getMilliseconds", "getMilliseconds()")}} seront utilisées.</p>
-
-<p>Si un paramètre est en dehors des limites attendues, <code>setMinutes()</code> tentera de mettre à jour la date en conséquence. Par exemple, si on utilise la valeur 100 pour <code>valeurSecondes</code>, les minutes (<code>valeurMinutes</code>) seront incrémentées de 1 (<code>valeurMinutes</code> + 1), et 40 sera utilisé pour les secondes.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Utiliser_setMinutes()">Utiliser <code>setMinutes()</code></h3>
-
-<pre class="brush: js">var leGrandJour = new Date();
-leGrandJour.setMinutes(45);
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES1')}}</td>
-   <td>{{Spec2('ES1')}}</td>
-   <td>Définition initiale. Implémentée avec JavaScript 1.0.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-15.9.5.32', 'Date.prototype.setMinutes')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-date.prototype.setminutes', 'Date.prototype.setMinutes')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-date.prototype.setminutes', 'Date.prototype.setMinutes')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Date.setMinutes")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Date.prototype.getMinutes()")}}</li>
- <li>{{jsxref("Date.prototype.setUTCMinutes()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/date/setminutes/index.md b/files/fr/web/javascript/reference/global_objects/date/setminutes/index.md
new file mode 100644
index 0000000000..894474edac
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/date/setminutes/index.md
@@ -0,0 +1,71 @@
+---
+title: Date.prototype.setMinutes()
+slug: Web/JavaScript/Reference/Global_Objects/Date/setMinutes
+tags:
+  - Date
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/setMinutes
+original_slug: Web/JavaScript/Reference/Objets_globaux/Date/setMinutes
+---
+{{JSRef}}
+
+La méthode **`setMinutes()`** définit les minutes pour la date donnée, selon l'heure locale.
+
+{{EmbedInteractiveExample("pages/js/date-setminutes.html")}}
+
+## Syntaxe
+
+    dateObj.setMinutes(valeurMinutes[, valeurSecondes[, valeurMs]])
+
+### Versions antérieures à JavaScript 1.3
+
+    dateObj.setMinutes(valeurMinutes)
+
+### Paramètres
+
+- `valeurMinutes`
+  - : Un entier entre 0 et 59, représentant les minutes.
+- `valeurSecondes`
+  - : Paramètre optionnel, un entier entre 0 et 59, représentant les secondes. Si `valeurSecondes` est utilisé, il faut également utiliser `valeurMinutes`.
+- `valeurMs`
+  - : Paramètre optionel, un nombre entre 0 et 999, représentant les millièmes de secondes. Si `valeurMs` est utilisé, il faut également utiliser `valeurMinutes` et `valeurSecondes`.
+
+### Valeur de retour
+
+Le nombre de millisecondes écoulées entre le premier janvier 1970 minuit, UTC et la date mise à jour.
+
+## Description
+
+Si `valeurSecondes` et `valeurMs` ne sont pas indiquées, les valeurs renvoyées par les méthodes {{jsxref("Date.getSeconds", "getSeconds()")}} et {{jsxref("Date.getMilliseconds", "getMilliseconds()")}} seront utilisées.
+
+Si un paramètre est en dehors des limites attendues, `setMinutes()` tentera de mettre à jour la date en conséquence. Par exemple, si on utilise la valeur 100 pour `valeurSecondes`, les minutes (`valeurMinutes`) seront incrémentées de 1 (`valeurMinutes` + 1), et 40 sera utilisé pour les secondes.
+
+## Exemples
+
+### Utiliser `setMinutes()`
+
+```js
+var leGrandJour = new Date();
+leGrandJour.setMinutes(45);
+```
+
+## Spécifications
+
+| Spécification                                                                                                        | État                         | Commentaires                                          |
+| -------------------------------------------------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- |
+| {{SpecName('ES1')}}                                                                                             | {{Spec2('ES1')}}         | Définition initiale. Implémentée avec JavaScript 1.0. |
+| {{SpecName('ES5.1', '#sec-15.9.5.32', 'Date.prototype.setMinutes')}}                         | {{Spec2('ES5.1')}}     |                                                       |
+| {{SpecName('ES6', '#sec-date.prototype.setminutes', 'Date.prototype.setMinutes')}}         | {{Spec2('ES6')}}         |                                                       |
+| {{SpecName('ESDraft', '#sec-date.prototype.setminutes', 'Date.prototype.setMinutes')}} | {{Spec2('ESDraft')}} |                                                       |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Date.setMinutes")}}
+
+## Voir aussi
+
+- {{jsxref("Date.prototype.getMinutes()")}}
+- {{jsxref("Date.prototype.setUTCMinutes()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/date/setmonth/index.html b/files/fr/web/javascript/reference/global_objects/date/setmonth/index.html
deleted file mode 100644
index 08e81440aa..0000000000
--- a/files/fr/web/javascript/reference/global_objects/date/setmonth/index.html
+++ /dev/null
@@ -1,104 +0,0 @@
----
-title: Date.prototype.setMonth()
-slug: Web/JavaScript/Reference/Global_Objects/Date/setMonth
-tags:
-  - Date
-  - JavaScript
-  - Méthode
-  - Prototype
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Date/setMonth
-original_slug: Web/JavaScript/Reference/Objets_globaux/Date/setMonth
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <code><strong>setMonth()</strong></code> définit le mois de la date, selon l'heure locale et l'année courante de l'objet {{jsxref("Date")}}</p>
-
-<div>{{EmbedInteractiveExample("pages/js/date-setmonth.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>dateObj</var>.setMonth(valeurMois[, valeurJour])</pre>
-
-<h3 id="Versions_antérieures_à_JavaScript_1.3">Versions antérieures à JavaScript 1.3</h3>
-
-<pre class="syntaxbox"><var>dateObj</var>.setMonth(valeurMois)</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>valeurMois</code></dt>
- <dd>Un entier entre 0 et 11 (représentant les mois de janvier à décembre).</dd>
- <dt><code>valeurJour</code></dt>
- <dd>Paramètre optionnel, un entier entre 1 et 31, représentant le jour du mois.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Le nombre de millisecondes écoulées entre le premier janvier 1970 minuit, UTC et la date mise à jour.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>Si le paramètre <code>valeurJour</code> n'est pas utilisé, la valeur renvoyée par la méthode {{jsxref("Date.getDate", "getDate()")}} sera utilisée.</p>
-
-<p>Si un paramètre que vous renseignez n'est pas dans les limites attendues, <code>setMonth()</code> tentera de mettre à jour la date en conséquence. Par exemple, si la valeur 15 est utilisée pour <code>valeurMois</code>, l'année sera incrémenté de 1 (année + 1), et 3 sera utilisé pour le mois.</p>
-
-<div class="note">
-<p><strong>Note :</strong> Attention aux jours du mois lorsqu'on utilise <code>setMonth()</code>. En effet, <code>setMonth()</code> cherchera à aboutir à une date correcte et on peut avoir des surprises pour les transitions entre les mois. Ainsi, en 2016 (où février a eu 29 jours), on aura le cas suivant :</p>
-
-<pre class="brush: js">var finDuMois = new Date(2016, 7, 31); // le 31 août 2016
-finDuMois.setMonth(1);
-
-console.log(finDuMois.toLocaleString()); // 02/03/2016 à 00:00:00</pre>
-</div>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Utiliser_setMonth()">Utiliser <code>setMonth()</code></h3>
-
-<pre class="brush: js">var leGrandJour = new Date();
-leGrandJour.setMonth(6);
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES1')}}</td>
-   <td>{{Spec2('ES1')}}</td>
-   <td>Définition initiale. Implémentée avec JavaScript 1.0.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-15.9.5.38', 'Date.prototype.setMonth')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-date.prototype.setmonth', 'Date.prototype.setMonth')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-date.prototype.setmonth', 'Date.prototype.setMonth')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Date.setMonth")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Date.prototype.getMonth()")}}</li>
- <li>{{jsxref("Date.prototype.setUTCMonth()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/date/setmonth/index.md b/files/fr/web/javascript/reference/global_objects/date/setmonth/index.md
new file mode 100644
index 0000000000..adaccb768d
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/date/setmonth/index.md
@@ -0,0 +1,78 @@
+---
+title: Date.prototype.setMonth()
+slug: Web/JavaScript/Reference/Global_Objects/Date/setMonth
+tags:
+  - Date
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/setMonth
+original_slug: Web/JavaScript/Reference/Objets_globaux/Date/setMonth
+---
+{{JSRef}}
+
+La méthode **`setMonth()`** définit le mois de la date, selon l'heure locale et l'année courante de l'objet {{jsxref("Date")}}
+
+{{EmbedInteractiveExample("pages/js/date-setmonth.html")}}
+
+## Syntaxe
+
+    dateObj.setMonth(valeurMois[, valeurJour])
+
+### Versions antérieures à JavaScript 1.3
+
+    dateObj.setMonth(valeurMois)
+
+### Paramètres
+
+- `valeurMois`
+  - : Un entier entre 0 et 11 (représentant les mois de janvier à décembre).
+- `valeurJour`
+  - : Paramètre optionnel, un entier entre 1 et 31, représentant le jour du mois.
+
+### Valeur de retour
+
+Le nombre de millisecondes écoulées entre le premier janvier 1970 minuit, UTC et la date mise à jour.
+
+## Description
+
+Si le paramètre `valeurJour` n'est pas utilisé, la valeur renvoyée par la méthode {{jsxref("Date.getDate", "getDate()")}} sera utilisée.
+
+Si un paramètre que vous renseignez n'est pas dans les limites attendues, `setMonth()` tentera de mettre à jour la date en conséquence. Par exemple, si la valeur 15 est utilisée pour `valeurMois`, l'année sera incrémenté de 1 (année + 1), et 3 sera utilisé pour le mois.
+
+> **Note :** Attention aux jours du mois lorsqu'on utilise `setMonth()`. En effet, `setMonth()` cherchera à aboutir à une date correcte et on peut avoir des surprises pour les transitions entre les mois. Ainsi, en 2016 (où février a eu 29 jours), on aura le cas suivant :
+>
+> ```js
+> var finDuMois = new Date(2016, 7, 31); // le 31 août 2016
+> finDuMois.setMonth(1);
+>
+> console.log(finDuMois.toLocaleString()); // 02/03/2016 à 00:00:00
+> ```
+
+## Exemples
+
+### Utiliser `setMonth()`
+
+```js
+var leGrandJour = new Date();
+leGrandJour.setMonth(6);
+```
+
+## Spécifications
+
+| Spécification                                                                                                | État                         | Commentaires                                          |
+| ------------------------------------------------------------------------------------------------------------ | ---------------------------- | ----------------------------------------------------- |
+| {{SpecName('ES1')}}                                                                                     | {{Spec2('ES1')}}         | Définition initiale. Implémentée avec JavaScript 1.0. |
+| {{SpecName('ES5.1', '#sec-15.9.5.38', 'Date.prototype.setMonth')}}                     | {{Spec2('ES5.1')}}     |                                                       |
+| {{SpecName('ES6', '#sec-date.prototype.setmonth', 'Date.prototype.setMonth')}}     | {{Spec2('ES6')}}         |                                                       |
+| {{SpecName('ESDraft', '#sec-date.prototype.setmonth', 'Date.prototype.setMonth')}} | {{Spec2('ESDraft')}} |                                                       |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Date.setMonth")}}
+
+## Voir aussi
+
+- {{jsxref("Date.prototype.getMonth()")}}
+- {{jsxref("Date.prototype.setUTCMonth()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/date/setseconds/index.html b/files/fr/web/javascript/reference/global_objects/date/setseconds/index.html
deleted file mode 100644
index b979885ed8..0000000000
--- a/files/fr/web/javascript/reference/global_objects/date/setseconds/index.html
+++ /dev/null
@@ -1,95 +0,0 @@
----
-title: Date.prototype.setSeconds()
-slug: Web/JavaScript/Reference/Global_Objects/Date/setSeconds
-tags:
-  - Date
-  - JavaScript
-  - Méthode
-  - Prototype
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Date/setSeconds
-original_slug: Web/JavaScript/Reference/Objets_globaux/Date/setSeconds
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <code><strong>setSeconds()</strong></code> définit les secondes pour la date, selon l'heure locale.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/date-setseconds.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>dateObj</var>.setSeconds(valeurSecondes[, valeurMs])</pre>
-
-<h3 id="Versions_antérieures_à_JavaScript_1.3">Versions antérieures à JavaScript 1.3</h3>
-
-<pre class="syntaxbox"><var>dateObj</var>.setSeconds(valeurSecondes)</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>valeurSecondes</code></dt>
- <dd>Un entier entre 0 et 59.</dd>
- <dt><code>valeurMs</code></dt>
- <dd>Paramètre optionnel, un nombre entre 0 et 999, représentant les millièmes de secondes.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Le nombre de millisecondes écoulées entre le premier janvier 1970 minuit, UTC et la date mise à jour.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>Si le paramètre <code>valeurMs</code> n'est pas utilisé, la valeur renvoyée par la méthode {{jsxref("Date.getMilliseconds", "getMilliseconds()")}} sera utilisée.</p>
-
-<p>Si un paramètre utilisé est en dehors des limites attendues, <code>setSeconds()</code> tentera de mettre à jour la date en conséquence. Par exemple, si on utilise la valeur 100 pour <code>valeurSecondes</code>, les minutes de la date seront incrémentées de 1, et 40 sera utilisé pour les secondes.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Utiliser_setSeconds()">Utiliser <code>setSeconds()</code></h3>
-
-<pre class="brush:js">var leGrandJour = new Date();
-leGrandJour.setSeconds(30)
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES1')}}</td>
-   <td>{{Spec2('ES1')}}</td>
-   <td>Définition initiale. Implémentée avec JavaScript 1.0.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-15.9.5.30', 'Date.prototype.setSeconds')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-date.prototype.setseconds', 'Date.prototype.setSeconds')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-date.prototype.setseconds', 'Date.prototype.setSeconds')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Date.setSeconds")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Date.prototype.getSeconds()")}}</li>
- <li>{{jsxref("Date.prototype.setUTCSeconds()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/date/setseconds/index.md b/files/fr/web/javascript/reference/global_objects/date/setseconds/index.md
new file mode 100644
index 0000000000..b6db54ba85
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/date/setseconds/index.md
@@ -0,0 +1,69 @@
+---
+title: Date.prototype.setSeconds()
+slug: Web/JavaScript/Reference/Global_Objects/Date/setSeconds
+tags:
+  - Date
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/setSeconds
+original_slug: Web/JavaScript/Reference/Objets_globaux/Date/setSeconds
+---
+{{JSRef}}
+
+La méthode **`setSeconds()`** définit les secondes pour la date, selon l'heure locale.
+
+{{EmbedInteractiveExample("pages/js/date-setseconds.html")}}
+
+## Syntaxe
+
+    dateObj.setSeconds(valeurSecondes[, valeurMs])
+
+### Versions antérieures à JavaScript 1.3
+
+    dateObj.setSeconds(valeurSecondes)
+
+### Paramètres
+
+- `valeurSecondes`
+  - : Un entier entre 0 et 59.
+- `valeurMs`
+  - : Paramètre optionnel, un nombre entre 0 et 999, représentant les millièmes de secondes.
+
+### Valeur de retour
+
+Le nombre de millisecondes écoulées entre le premier janvier 1970 minuit, UTC et la date mise à jour.
+
+## Description
+
+Si le paramètre `valeurMs` n'est pas utilisé, la valeur renvoyée par la méthode {{jsxref("Date.getMilliseconds", "getMilliseconds()")}} sera utilisée.
+
+Si un paramètre utilisé est en dehors des limites attendues, `setSeconds()` tentera de mettre à jour la date en conséquence. Par exemple, si on utilise la valeur 100 pour `valeurSecondes`, les minutes de la date seront incrémentées de 1, et 40 sera utilisé pour les secondes.
+
+## Exemples
+
+### Utiliser `setSeconds()`
+
+```js
+var leGrandJour = new Date();
+leGrandJour.setSeconds(30)
+```
+
+## Spécifications
+
+| Spécification                                                                                                        | État                         | Commentaires                                          |
+| -------------------------------------------------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- |
+| {{SpecName('ES1')}}                                                                                             | {{Spec2('ES1')}}         | Définition initiale. Implémentée avec JavaScript 1.0. |
+| {{SpecName('ES5.1', '#sec-15.9.5.30', 'Date.prototype.setSeconds')}}                         | {{Spec2('ES5.1')}}     |                                                       |
+| {{SpecName('ES6', '#sec-date.prototype.setseconds', 'Date.prototype.setSeconds')}}         | {{Spec2('ES6')}}         |                                                       |
+| {{SpecName('ESDraft', '#sec-date.prototype.setseconds', 'Date.prototype.setSeconds')}} | {{Spec2('ESDraft')}} |                                                       |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Date.setSeconds")}}
+
+## Voir aussi
+
+- {{jsxref("Date.prototype.getSeconds()")}}
+- {{jsxref("Date.prototype.setUTCSeconds()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/date/settime/index.html b/files/fr/web/javascript/reference/global_objects/date/settime/index.html
deleted file mode 100644
index 4318c595b4..0000000000
--- a/files/fr/web/javascript/reference/global_objects/date/settime/index.html
+++ /dev/null
@@ -1,88 +0,0 @@
----
-title: Date.prototype.setTime()
-slug: Web/JavaScript/Reference/Global_Objects/Date/setTime
-tags:
-  - Date
-  - JavaScript
-  - Méthode
-  - Prototype
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Date/setTime
-original_slug: Web/JavaScript/Reference/Objets_globaux/Date/setTime
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <code><strong>setTime()</strong></code> met l'objet {{jsxref("Date")}} à jour par rapport au nombre de millisecondes depuis le 1 janvier 1970, 00:00:00 UTC.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/date-settime.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>dateObj</var>.setTime(valeurTemps)</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>valeurTemps</code></dt>
- <dd>Un entier représentant le nombre de millisecondes depuis le 1 janvier 1970, 00:00:00 UTC.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Le nombre de millisecondes écoulées entre le premier janvier 1970 à minuit, UTC et la date mise à jour (ce qui correspond à la valeur de l'argument).</p>
-
-<h2 id="Description">Description</h2>
-
-<p>La méthode <code>setTime()</code> est utilisée afin d'assigner une date à un autre objet {{jsxref("Date")}}.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Utiliser_setTime()">Utiliser <code>setTime()</code></h3>
-
-<pre class="brush: js">var leGrandJour = new Date("July 1, 1999");
-var pareilQueGrandJour = new Date();
-pareilQueGrandJour.setTime(leGrandJour.getTime());
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES1')}}</td>
-   <td>{{Spec2('ES1')}}</td>
-   <td>Définition initiale. Implémentée avec JavaScript 1.0.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-15.9.5.27', 'Date.prototype.setTime')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-date.prototype.settime', 'Date.prototype.setTime')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-date.prototype.settime', 'Date.prototype.setTime')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Date.setTime")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Date.prototype.getTime()")}}</li>
- <li>{{jsxref("Date.prototype.setUTCHours()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/date/settime/index.md b/files/fr/web/javascript/reference/global_objects/date/settime/index.md
new file mode 100644
index 0000000000..01c26769a9
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/date/settime/index.md
@@ -0,0 +1,62 @@
+---
+title: Date.prototype.setTime()
+slug: Web/JavaScript/Reference/Global_Objects/Date/setTime
+tags:
+  - Date
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/setTime
+original_slug: Web/JavaScript/Reference/Objets_globaux/Date/setTime
+---
+{{JSRef}}
+
+La méthode **`setTime()`** met l'objet {{jsxref("Date")}} à jour par rapport au nombre de millisecondes depuis le 1 janvier 1970, 00:00:00 UTC.
+
+{{EmbedInteractiveExample("pages/js/date-settime.html")}}
+
+## Syntaxe
+
+    dateObj.setTime(valeurTemps)
+
+### Paramètres
+
+- `valeurTemps`
+  - : Un entier représentant le nombre de millisecondes depuis le 1 janvier 1970, 00:00:00 UTC.
+
+### Valeur de retour
+
+Le nombre de millisecondes écoulées entre le premier janvier 1970 à minuit, UTC et la date mise à jour (ce qui correspond à la valeur de l'argument).
+
+## Description
+
+La méthode `setTime()` est utilisée afin d'assigner une date à un autre objet {{jsxref("Date")}}.
+
+## Exemples
+
+### Utiliser `setTime()`
+
+```js
+var leGrandJour = new Date("July 1, 1999");
+var pareilQueGrandJour = new Date();
+pareilQueGrandJour.setTime(leGrandJour.getTime());
+```
+
+## Spécifications
+
+| Spécification                                                                                                | État                         | Commentaires                                          |
+| ------------------------------------------------------------------------------------------------------------ | ---------------------------- | ----------------------------------------------------- |
+| {{SpecName('ES1')}}                                                                                     | {{Spec2('ES1')}}         | Définition initiale. Implémentée avec JavaScript 1.0. |
+| {{SpecName('ES5.1', '#sec-15.9.5.27', 'Date.prototype.setTime')}}                     | {{Spec2('ES5.1')}}     |                                                       |
+| {{SpecName('ES6', '#sec-date.prototype.settime', 'Date.prototype.setTime')}}         | {{Spec2('ES6')}}         |                                                       |
+| {{SpecName('ESDraft', '#sec-date.prototype.settime', 'Date.prototype.setTime')}} | {{Spec2('ESDraft')}} |                                                       |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Date.setTime")}}
+
+## Voir aussi
+
+- {{jsxref("Date.prototype.getTime()")}}
+- {{jsxref("Date.prototype.setUTCHours()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/date/setutcdate/index.html b/files/fr/web/javascript/reference/global_objects/date/setutcdate/index.html
deleted file mode 100644
index 98de0005b5..0000000000
--- a/files/fr/web/javascript/reference/global_objects/date/setutcdate/index.html
+++ /dev/null
@@ -1,87 +0,0 @@
----
-title: Date.prototype.setUTCDate()
-slug: Web/JavaScript/Reference/Global_Objects/Date/setUTCDate
-tags:
-  - Date
-  - JavaScript
-  - Méthode
-  - Prototype
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Date/setUTCDate
-original_slug: Web/JavaScript/Reference/Objets_globaux/Date/setUTCDate
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <code><strong>setUTCDate()</strong></code> définit le jour du mois pour la date, selon UTC.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/date-setutcdate.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>dateObj</var>.setUTCDate(valeurJour)</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>valeurJour</code></dt>
- <dd>Un entier de 1 à 31, représentant un jour dans le mois.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Le nombre de millisecondes écoulées entre le premier janvier 1970 minuit, UTC et la date mise à jour.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>Si le paramètre renseigné est en dehors des limites attendues, <code>setUTCDate()</code> tentera de mettre à jour la date en conséquence. Par exemple, si on utilise la valeur 40 pour <code>valeurJour</code>, et que le mois de la date est juin, le jour sera changé en 10 et le mois passera à juillet.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Utiliser_setUTCDate()">Utiliser <code>setUTCDate()</code></h3>
-
-<pre class="brush: js">var leGrandJour = new Date();
-leGrandJour.setUTCDate(20);
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES1')}}</td>
-   <td>{{Spec2('ES1')}}</td>
-   <td>Définition initiale. Implémentée avec JavaScript 1.3.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-15.9.5.37', 'Date.prototype.setUTCDate')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-date.prototype.setutcdate', 'Date.prototype.setUTCDate')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-date.prototype.setutcdate', 'Date.prototype.setUTCDate')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Date.setUTCDate")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Date.prototype.getUTCDate()")}}</li>
- <li>{{jsxref("Date.prototype.setDate()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/date/setutcdate/index.md b/files/fr/web/javascript/reference/global_objects/date/setutcdate/index.md
new file mode 100644
index 0000000000..b2b6aa67a4
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/date/setutcdate/index.md
@@ -0,0 +1,61 @@
+---
+title: Date.prototype.setUTCDate()
+slug: Web/JavaScript/Reference/Global_Objects/Date/setUTCDate
+tags:
+  - Date
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/setUTCDate
+original_slug: Web/JavaScript/Reference/Objets_globaux/Date/setUTCDate
+---
+{{JSRef}}
+
+La méthode **`setUTCDate()`** définit le jour du mois pour la date, selon UTC.
+
+{{EmbedInteractiveExample("pages/js/date-setutcdate.html")}}
+
+## Syntaxe
+
+    dateObj.setUTCDate(valeurJour)
+
+### Paramètres
+
+- `valeurJour`
+  - : Un entier de 1 à 31, représentant un jour dans le mois.
+
+### Valeur de retour
+
+Le nombre de millisecondes écoulées entre le premier janvier 1970 minuit, UTC et la date mise à jour.
+
+## Description
+
+Si le paramètre renseigné est en dehors des limites attendues, `setUTCDate()` tentera de mettre à jour la date en conséquence. Par exemple, si on utilise la valeur 40 pour `valeurJour`, et que le mois de la date est juin, le jour sera changé en 10 et le mois passera à juillet.
+
+## Exemples
+
+### Utiliser `setUTCDate()`
+
+```js
+var leGrandJour = new Date();
+leGrandJour.setUTCDate(20);
+```
+
+## Spécifications
+
+| Spécification                                                                                                        | État                         | Commentaires                                          |
+| -------------------------------------------------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- |
+| {{SpecName('ES1')}}                                                                                             | {{Spec2('ES1')}}         | Définition initiale. Implémentée avec JavaScript 1.3. |
+| {{SpecName('ES5.1', '#sec-15.9.5.37', 'Date.prototype.setUTCDate')}}                         | {{Spec2('ES5.1')}}     |                                                       |
+| {{SpecName('ES6', '#sec-date.prototype.setutcdate', 'Date.prototype.setUTCDate')}}         | {{Spec2('ES6')}}         |                                                       |
+| {{SpecName('ESDraft', '#sec-date.prototype.setutcdate', 'Date.prototype.setUTCDate')}} | {{Spec2('ESDraft')}} |                                                       |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Date.setUTCDate")}}
+
+## Voir aussi
+
+- {{jsxref("Date.prototype.getUTCDate()")}}
+- {{jsxref("Date.prototype.setDate()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/date/setutcfullyear/index.html b/files/fr/web/javascript/reference/global_objects/date/setutcfullyear/index.html
deleted file mode 100644
index beeedfb099..0000000000
--- a/files/fr/web/javascript/reference/global_objects/date/setutcfullyear/index.html
+++ /dev/null
@@ -1,93 +0,0 @@
----
-title: Date.prototype.setUTCFullYear()
-slug: Web/JavaScript/Reference/Global_Objects/Date/setUTCFullYear
-tags:
-  - Date
-  - JavaScript
-  - Méthode
-  - Prototype
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Date/setUTCFullYear
-original_slug: Web/JavaScript/Reference/Objets_globaux/Date/setUTCFullYear
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <code><strong>setUTCFullYear()</strong></code> définit l'année complête pour la date, selon UTC.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/date-setutcfullyear.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>dateObj</var>.setUTCFullYear(valeurAnnée[, valeurMois[, valeurJour]])</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>valeurAnnée</code></dt>
- <dd>Un entier indiquant la valeur numérique d'une année, par exemple, 1995.</dd>
- <dt><code>valeurMois</code></dt>
- <dd>Paramètre optionnel, un entier entre 0 et 11 représentant les mois de janvier à décembre.</dd>
- <dt><code>valeurJour</code></dt>
- <dd>Paramètre optionnel, un entier entre 1 et 31 représentant le jour du mois. Si le paramètre <code>valeurJour</code> est utilisé, il est également nécessaire d'indiquer <code>valeurMois</code>.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Le nombre de millisecondes écoulées entre le premier janvier 1970 minuit, UTC et la date mise à jour.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>Si les paramètres <code>valeurMois</code> et <code>valeurJour</code> ne sont pas utilisés, les valeurs renvoyées par les méthodes {{jsxref("Objets_globaux/Date/getUTCMonth", "getUTCMonth()")}} et {{jsxref("Objets_globaux/Date/getUTCDate", "getUTCDate()")}} seront utilisées.</p>
-
-<p>Si un des paramètres indiqué est en dehors des limites attendues, <code>setUTCFullYear()</code> tentera de mettre à jour la date en conséquence. Ainsi si on utilise la valeur 15 pour <code>valeurMois</code>, l'année sera incrémentée de 1 (année + 1), et 3 sera utilisé pour le mois.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Utiliser_setUTCFullYear()">Utiliser <code>setUTCFullYear()</code></h3>
-
-<pre class="brush: js">var leGrandJour = new Date();
-leGrandJour.setUTCFullYear(1997);
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES1')}}</td>
-   <td>{{Spec2('ES1')}}</td>
-   <td>Définition initiale. Implémentée avec JavaScript 1.3.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-15.9.5.41', 'Date.prototype.setUTCFullYear')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-date.prototype.setutcfullyear', 'Date.prototype.setUTCFullYear')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-date.prototype.setutcfullyear', 'Date.prototype.setUTCFullYear')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Date.setUTCFullYear")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Date.prototype.getUTCFullYear()")}}</li>
- <li>{{jsxref("Date.prototype.setFullYear()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/date/setutcfullyear/index.md b/files/fr/web/javascript/reference/global_objects/date/setutcfullyear/index.md
new file mode 100644
index 0000000000..4490cf9d6a
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/date/setutcfullyear/index.md
@@ -0,0 +1,67 @@
+---
+title: Date.prototype.setUTCFullYear()
+slug: Web/JavaScript/Reference/Global_Objects/Date/setUTCFullYear
+tags:
+  - Date
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/setUTCFullYear
+original_slug: Web/JavaScript/Reference/Objets_globaux/Date/setUTCFullYear
+---
+{{JSRef}}
+
+La méthode **`setUTCFullYear()`** définit l'année complête pour la date, selon UTC.
+
+{{EmbedInteractiveExample("pages/js/date-setutcfullyear.html")}}
+
+## Syntaxe
+
+    dateObj.setUTCFullYear(valeurAnnée[, valeurMois[, valeurJour]])
+
+### Paramètres
+
+- `valeurAnnée`
+  - : Un entier indiquant la valeur numérique d'une année, par exemple, 1995.
+- `valeurMois`
+  - : Paramètre optionnel, un entier entre 0 et 11 représentant les mois de janvier à décembre.
+- `valeurJour`
+  - : Paramètre optionnel, un entier entre 1 et 31 représentant le jour du mois. Si le paramètre `valeurJour` est utilisé, il est également nécessaire d'indiquer `valeurMois`.
+
+### Valeur de retour
+
+Le nombre de millisecondes écoulées entre le premier janvier 1970 minuit, UTC et la date mise à jour.
+
+## Description
+
+Si les paramètres `valeurMois` et `valeurJour` ne sont pas utilisés, les valeurs renvoyées par les méthodes {{jsxref("Objets_globaux/Date/getUTCMonth", "getUTCMonth()")}} et {{jsxref("Objets_globaux/Date/getUTCDate", "getUTCDate()")}} seront utilisées.
+
+Si un des paramètres indiqué est en dehors des limites attendues, `setUTCFullYear()` tentera de mettre à jour la date en conséquence. Ainsi si on utilise la valeur 15 pour `valeurMois`, l'année sera incrémentée de 1 (année + 1), et 3 sera utilisé pour le mois.
+
+## Exemples
+
+### Utiliser `setUTCFullYear()`
+
+```js
+var leGrandJour = new Date();
+leGrandJour.setUTCFullYear(1997);
+```
+
+## Spécifications
+
+| Spécification                                                                                                                | État                         | Commentaires                                          |
+| ---------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- |
+| {{SpecName('ES1')}}                                                                                                     | {{Spec2('ES1')}}         | Définition initiale. Implémentée avec JavaScript 1.3. |
+| {{SpecName('ES5.1', '#sec-15.9.5.41', 'Date.prototype.setUTCFullYear')}}                             | {{Spec2('ES5.1')}}     |                                                       |
+| {{SpecName('ES6', '#sec-date.prototype.setutcfullyear', 'Date.prototype.setUTCFullYear')}}     | {{Spec2('ES6')}}         |                                                       |
+| {{SpecName('ESDraft', '#sec-date.prototype.setutcfullyear', 'Date.prototype.setUTCFullYear')}} | {{Spec2('ESDraft')}} |                                                       |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Date.setUTCFullYear")}}
+
+## Voir aussi
+
+- {{jsxref("Date.prototype.getUTCFullYear()")}}
+- {{jsxref("Date.prototype.setFullYear()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/date/setutchours/index.html b/files/fr/web/javascript/reference/global_objects/date/setutchours/index.html
deleted file mode 100644
index 038f330691..0000000000
--- a/files/fr/web/javascript/reference/global_objects/date/setutchours/index.html
+++ /dev/null
@@ -1,95 +0,0 @@
----
-title: Date.prototype.setUTCHours()
-slug: Web/JavaScript/Reference/Global_Objects/Date/setUTCHours
-tags:
-  - Date
-  - JavaScript
-  - Méthode
-  - Prototype
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Date/setUTCHours
-original_slug: Web/JavaScript/Reference/Objets_globaux/Date/setUTCHours
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <code><strong>setUTCHours()</strong></code> définit les heures pour la date, selon UTC, et renvoie le nombre de millièmes de secondes écoulées entre le 1er janvier 1970 00:00:00 UTC et cette nouvelle date.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/date-setutchours.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>dateObj</var>.setUTCHours(valeurHeures[, valeurMinutes[, valeurSecondes[, valeurMs]]])</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>valeurHeures</code></dt>
- <dd>Un entier entre 0 et 23, représentant l'heure.</dd>
- <dt><code>valeurMinutes</code></dt>
- <dd>Paramètre optionnel, un entier entre 0 et 59, représentant les minutes.</dd>
- <dt><code>valeurSecondes</code></dt>
- <dd>Paramètre optionnel, un entier entre 0 et 59, représentant les secondes. Si le paramètre <code>valeurSecondes</code> est utilisé, le paramètre <code>valeurMinutes</code> devra également être renseigné.</dd>
- <dt><code>valeurMs</code></dt>
- <dd>Paramètre optionnel, un entier entre 0 et 999, représentant les millièmes de secondes. Si le paramètre <code>valeurMs</code> est utilisé, les paramètres <code>valeurMinutes</code> et <code>valeurSecondes</code> devront également être renseignés.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Le nombre de millisecondes écoulées entre le premier janvier 1970 minuit, UTC et la date mise à jour.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>Si les paramètres <code>valeurMinutes</code>, <code>valeurSecondes</code> et <code>valeurMs</code> ne sont pas renseignés, les valeurs renvoyées par les méthodes {{jsxref("Date.prototype.getUTCMinutes", "getUTCMinutes()")}}, {{jsxref("Date.prototype.getUTCSeconds", "getUTCSeconds()")}}, et {{jsxref("Date.prototype.getUTCMilliseconds", "getUTCMilliseconds()")}} seront utilisées.</p>
-
-<p>Si un des paramètres renseignés est en dehors des limites attendues, <code>setUTCHours()</code> tentera de mettre à jour la date en conséquence. Par exemple, si on utilise la valeur 100 pour <code>valeurSecondes</code>, les minutes seront incrémentées de 1 (min + 1), et 40 sera utilisé pour les secondes.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Utiliser_setUTCHours()">Utiliser <code>setUTCHours()</code></h3>
-
-<pre class="brush: js">var leGrandJour = new Date();
-leGrandJour.setUTCHours(8);
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES1')}}</td>
-   <td>{{Spec2('ES1')}}</td>
-   <td>Définition initiale. Implémentée avec JavaScript 1.3.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-15.9.5.35', 'Date.prototype.setUTCHours')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-date.prototype.setutchours', 'Date.prototype.setUTCHours')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-date.prototype.setutchours', 'Date.prototype.setUTCHours')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Date.setUTCHours")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Date.prototype.getUTCHours()")}}</li>
- <li>{{jsxref("Date.prototype.setHours()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/date/setutchours/index.md b/files/fr/web/javascript/reference/global_objects/date/setutchours/index.md
new file mode 100644
index 0000000000..775990f78e
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/date/setutchours/index.md
@@ -0,0 +1,69 @@
+---
+title: Date.prototype.setUTCHours()
+slug: Web/JavaScript/Reference/Global_Objects/Date/setUTCHours
+tags:
+  - Date
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/setUTCHours
+original_slug: Web/JavaScript/Reference/Objets_globaux/Date/setUTCHours
+---
+{{JSRef}}
+
+La méthode **`setUTCHours()`** définit les heures pour la date, selon UTC, et renvoie le nombre de millièmes de secondes écoulées entre le 1er janvier 1970 00:00:00 UTC et cette nouvelle date.
+
+{{EmbedInteractiveExample("pages/js/date-setutchours.html")}}
+
+## Syntaxe
+
+    dateObj.setUTCHours(valeurHeures[, valeurMinutes[, valeurSecondes[, valeurMs]]])
+
+### Paramètres
+
+- `valeurHeures`
+  - : Un entier entre 0 et 23, représentant l'heure.
+- `valeurMinutes`
+  - : Paramètre optionnel, un entier entre 0 et 59, représentant les minutes.
+- `valeurSecondes`
+  - : Paramètre optionnel, un entier entre 0 et 59, représentant les secondes. Si le paramètre `valeurSecondes` est utilisé, le paramètre `valeurMinutes` devra également être renseigné.
+- `valeurMs`
+  - : Paramètre optionnel, un entier entre 0 et 999, représentant les millièmes de secondes. Si le paramètre `valeurMs` est utilisé, les paramètres `valeurMinutes` et `valeurSecondes` devront également être renseignés.
+
+### Valeur de retour
+
+Le nombre de millisecondes écoulées entre le premier janvier 1970 minuit, UTC et la date mise à jour.
+
+## Description
+
+Si les paramètres `valeurMinutes`, `valeurSecondes` et `valeurMs` ne sont pas renseignés, les valeurs renvoyées par les méthodes {{jsxref("Date.prototype.getUTCMinutes", "getUTCMinutes()")}}, {{jsxref("Date.prototype.getUTCSeconds", "getUTCSeconds()")}}, et {{jsxref("Date.prototype.getUTCMilliseconds", "getUTCMilliseconds()")}} seront utilisées.
+
+Si un des paramètres renseignés est en dehors des limites attendues, `setUTCHours()` tentera de mettre à jour la date en conséquence. Par exemple, si on utilise la valeur 100 pour `valeurSecondes`, les minutes seront incrémentées de 1 (min + 1), et 40 sera utilisé pour les secondes.
+
+## Exemples
+
+### Utiliser `setUTCHours()`
+
+```js
+var leGrandJour = new Date();
+leGrandJour.setUTCHours(8);
+```
+
+## Spécifications
+
+| Spécification                                                                                                        | État                         | Commentaires                                          |
+| -------------------------------------------------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- |
+| {{SpecName('ES1')}}                                                                                             | {{Spec2('ES1')}}         | Définition initiale. Implémentée avec JavaScript 1.3. |
+| {{SpecName('ES5.1', '#sec-15.9.5.35', 'Date.prototype.setUTCHours')}}                         | {{Spec2('ES5.1')}}     |                                                       |
+| {{SpecName('ES6', '#sec-date.prototype.setutchours', 'Date.prototype.setUTCHours')}}     | {{Spec2('ES6')}}         |                                                       |
+| {{SpecName('ESDraft', '#sec-date.prototype.setutchours', 'Date.prototype.setUTCHours')}} | {{Spec2('ESDraft')}} |                                                       |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Date.setUTCHours")}}
+
+## Voir aussi
+
+- {{jsxref("Date.prototype.getUTCHours()")}}
+- {{jsxref("Date.prototype.setHours()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/date/setutcmilliseconds/index.html b/files/fr/web/javascript/reference/global_objects/date/setutcmilliseconds/index.html
deleted file mode 100644
index 4e6b3e26f1..0000000000
--- a/files/fr/web/javascript/reference/global_objects/date/setutcmilliseconds/index.html
+++ /dev/null
@@ -1,87 +0,0 @@
----
-title: Date.prototype.setUTCMilliseconds()
-slug: Web/JavaScript/Reference/Global_Objects/Date/setUTCMilliseconds
-tags:
-  - Date
-  - JavaScript
-  - Méthode
-  - Prototype
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Date/setUTCMilliseconds
-original_slug: Web/JavaScript/Reference/Objets_globaux/Date/setUTCMilliseconds
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <code><strong>setUTCMilliseconds()</strong></code> définit les millièmes de secondes pour la date, selon UTC.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/date-setutcmilliseconds.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>dateObj</var>.setUTCMilliseconds(valeurMs) </pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>valeurMs</code></dt>
- <dd>Un entier entre 0 et 999, représentant les millièmes de secondes.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Le nombre de millisecondes écoulées entre le premier janvier 1970 minuit, UTC et la date mise à jour.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>Si le paramètre indiqué est en dehors des limites attendues, la date sera mise à jour en conséquence. Par exemple, si on utilise la valeur 1005, le nombre des secondes sera incrémenté de 1, et 5 sera utilisé pour les millièmes de secondes.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Utiliser_setUTCMilliseconds()">Utiliser <code>setUTCMilliseconds()</code></h3>
-
-<pre class="brush: js">var leGrandJour = new Date();
-leGrandJour.setUTCMilliseconds(500);
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES1')}}</td>
-   <td>{{Spec2('ES1')}}</td>
-   <td>Définition initiale. Implémentée avec JavaScript 1.3.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-15.9.5.29', 'Date.prototype.setUTCMilliseconds')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-date.prototype.setutcmilliseconds', 'Date.prototype.setUTCMilliseconds')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-date.prototype.setutcmilliseconds', 'Date.prototype.setUTCMilliseconds')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Date.setUTCMilliseconds")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Date.prototype.getUTCMilliseconds()")}}</li>
- <li>{{jsxref("Date.prototype.setMilliseconds()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/date/setutcmilliseconds/index.md b/files/fr/web/javascript/reference/global_objects/date/setutcmilliseconds/index.md
new file mode 100644
index 0000000000..7e7e0a4e3d
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/date/setutcmilliseconds/index.md
@@ -0,0 +1,61 @@
+---
+title: Date.prototype.setUTCMilliseconds()
+slug: Web/JavaScript/Reference/Global_Objects/Date/setUTCMilliseconds
+tags:
+  - Date
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/setUTCMilliseconds
+original_slug: Web/JavaScript/Reference/Objets_globaux/Date/setUTCMilliseconds
+---
+{{JSRef}}
+
+La méthode **`setUTCMilliseconds()`** définit les millièmes de secondes pour la date, selon UTC.
+
+{{EmbedInteractiveExample("pages/js/date-setutcmilliseconds.html")}}
+
+## Syntaxe
+
+    dateObj.setUTCMilliseconds(valeurMs)
+
+### Paramètres
+
+- `valeurMs`
+  - : Un entier entre 0 et 999, représentant les millièmes de secondes.
+
+### Valeur de retour
+
+Le nombre de millisecondes écoulées entre le premier janvier 1970 minuit, UTC et la date mise à jour.
+
+## Description
+
+Si le paramètre indiqué est en dehors des limites attendues, la date sera mise à jour en conséquence. Par exemple, si on utilise la valeur 1005, le nombre des secondes sera incrémenté de 1, et 5 sera utilisé pour les millièmes de secondes.
+
+## Exemples
+
+### Utiliser `setUTCMilliseconds()`
+
+```js
+var leGrandJour = new Date();
+leGrandJour.setUTCMilliseconds(500);
+```
+
+## Spécifications
+
+| Spécification                                                                                                                            | État                         | Commentaires                                          |
+| ---------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- |
+| {{SpecName('ES1')}}                                                                                                                 | {{Spec2('ES1')}}         | Définition initiale. Implémentée avec JavaScript 1.3. |
+| {{SpecName('ES5.1', '#sec-15.9.5.29', 'Date.prototype.setUTCMilliseconds')}}                                     | {{Spec2('ES5.1')}}     |                                                       |
+| {{SpecName('ES6', '#sec-date.prototype.setutcmilliseconds', 'Date.prototype.setUTCMilliseconds')}}     | {{Spec2('ES6')}}         |                                                       |
+| {{SpecName('ESDraft', '#sec-date.prototype.setutcmilliseconds', 'Date.prototype.setUTCMilliseconds')}} | {{Spec2('ESDraft')}} |                                                       |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Date.setUTCMilliseconds")}}
+
+## Voir aussi
+
+- {{jsxref("Date.prototype.getUTCMilliseconds()")}}
+- {{jsxref("Date.prototype.setMilliseconds()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/date/setutcminutes/index.html b/files/fr/web/javascript/reference/global_objects/date/setutcminutes/index.html
deleted file mode 100644
index 5e57b4e761..0000000000
--- a/files/fr/web/javascript/reference/global_objects/date/setutcminutes/index.html
+++ /dev/null
@@ -1,93 +0,0 @@
----
-title: Date.prototype.setUTCMinutes()
-slug: Web/JavaScript/Reference/Global_Objects/Date/setUTCMinutes
-tags:
-  - Date
-  - JavaScript
-  - Méthode
-  - Prototype
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Date/setUTCMinutes
-original_slug: Web/JavaScript/Reference/Objets_globaux/Date/setUTCMinutes
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <code><strong>setUTCMinutes()</strong></code> définit les minutes pour la date, selon UTC.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/date-setutcminutes.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>dateObj</var>.setUTCMinutes(valeurMinutes[, valeurSecondes[, valeurMs]]) </pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>valeurMinutes</code></dt>
- <dd>Un entier entre 0 et 59, représentant les minutes.</dd>
- <dt><code>valeurSecondes</code></dt>
- <dd>Paramètre optionnel, un entier entre 0 et 59, représentant les secondes. Si ce paramètre est utilisé, il faut également utiliser <code>valeurMinutes</code>.</dd>
- <dt><code>valeurMs</code></dt>
- <dd>Paramètre optionnel, un nombre entre 0 et 999, représentant les millièmes de secondes. Si ce paramètre est utilisé, il faut aussi indiquer <code>valeurMinutes</code> et <code>valeurSecondes</code>.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Le nombre de millisecondes écoulées entre le premier janvier 1970 minuit, UTC et la date mise à jour.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>Si les paramètres <code>valeurSecondes</code> et <code>valeurMs</code> ne sont pas utilisés, les valeurs renvoyées par les méthodes {{jsxref("Date.prototype.getUTCSeconds", "getUTCSeconds()")}} et {{jsxref("Date.prototype.getUTCMilliseconds", "getUTCMilliseconds()")}} seront utilisées.</p>
-
-<p>Si un paramètre est en dehors des limites attendues, <code>setUTCMinutes()</code> tentera de mettre à jour la date en conséquence. Par exemple, si on utilise 100 pour <code>valeurSecondes</code>, les minutes (<code>valeurMinutes</code>) seront incrémentées de 1 (<code>valeurMinutes</code> + 1), et 40 sera utilisé pour les secondes.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Utiliser_setUTCMinutes()">Utiliser <code>setUTCMinutes()</code></h3>
-
-<pre class="brush: js">var leGrandJour = new Date();
-leGrandJour.setUTCMinutes(43);
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES1')}}</td>
-   <td>{{Spec2('ES1')}}</td>
-   <td>Définition initiale. Implémentée avec JavaScript 1.3.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-15.9.5.33', 'Date.prototype.setUTCMinutes')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-date.prototype.setutcminutes', 'Date.prototype.setUTCMinutes')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-date.prototype.setutcminutes', 'Date.prototype.setUTCMinutes')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Date.setUTCMinutes")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Date.prototype.getUTCMinutes()")}}</li>
- <li>{{jsxref("Date.prototype.setMinutes()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/date/setutcminutes/index.md b/files/fr/web/javascript/reference/global_objects/date/setutcminutes/index.md
new file mode 100644
index 0000000000..ebf0a4ead5
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/date/setutcminutes/index.md
@@ -0,0 +1,67 @@
+---
+title: Date.prototype.setUTCMinutes()
+slug: Web/JavaScript/Reference/Global_Objects/Date/setUTCMinutes
+tags:
+  - Date
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/setUTCMinutes
+original_slug: Web/JavaScript/Reference/Objets_globaux/Date/setUTCMinutes
+---
+{{JSRef}}
+
+La méthode **`setUTCMinutes()`** définit les minutes pour la date, selon UTC.
+
+{{EmbedInteractiveExample("pages/js/date-setutcminutes.html")}}
+
+## Syntaxe
+
+    dateObj.setUTCMinutes(valeurMinutes[, valeurSecondes[, valeurMs]])
+
+### Paramètres
+
+- `valeurMinutes`
+  - : Un entier entre 0 et 59, représentant les minutes.
+- `valeurSecondes`
+  - : Paramètre optionnel, un entier entre 0 et 59, représentant les secondes. Si ce paramètre est utilisé, il faut également utiliser `valeurMinutes`.
+- `valeurMs`
+  - : Paramètre optionnel, un nombre entre 0 et 999, représentant les millièmes de secondes. Si ce paramètre est utilisé, il faut aussi indiquer `valeurMinutes` et `valeurSecondes`.
+
+### Valeur de retour
+
+Le nombre de millisecondes écoulées entre le premier janvier 1970 minuit, UTC et la date mise à jour.
+
+## Description
+
+Si les paramètres `valeurSecondes` et `valeurMs` ne sont pas utilisés, les valeurs renvoyées par les méthodes {{jsxref("Date.prototype.getUTCSeconds", "getUTCSeconds()")}} et {{jsxref("Date.prototype.getUTCMilliseconds", "getUTCMilliseconds()")}} seront utilisées.
+
+Si un paramètre est en dehors des limites attendues, `setUTCMinutes()` tentera de mettre à jour la date en conséquence. Par exemple, si on utilise 100 pour `valeurSecondes`, les minutes (`valeurMinutes`) seront incrémentées de 1 (`valeurMinutes` + 1), et 40 sera utilisé pour les secondes.
+
+## Exemples
+
+### Utiliser `setUTCMinutes()`
+
+```js
+var leGrandJour = new Date();
+leGrandJour.setUTCMinutes(43);
+```
+
+## Spécifications
+
+| Spécification                                                                                                                | État                         | Commentaires                                          |
+| ---------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- |
+| {{SpecName('ES1')}}                                                                                                     | {{Spec2('ES1')}}         | Définition initiale. Implémentée avec JavaScript 1.3. |
+| {{SpecName('ES5.1', '#sec-15.9.5.33', 'Date.prototype.setUTCMinutes')}}                             | {{Spec2('ES5.1')}}     |                                                       |
+| {{SpecName('ES6', '#sec-date.prototype.setutcminutes', 'Date.prototype.setUTCMinutes')}}         | {{Spec2('ES6')}}         |                                                       |
+| {{SpecName('ESDraft', '#sec-date.prototype.setutcminutes', 'Date.prototype.setUTCMinutes')}} | {{Spec2('ESDraft')}} |                                                       |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Date.setUTCMinutes")}}
+
+## Voir aussi
+
+- {{jsxref("Date.prototype.getUTCMinutes()")}}
+- {{jsxref("Date.prototype.setMinutes()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/date/setutcmonth/index.html b/files/fr/web/javascript/reference/global_objects/date/setutcmonth/index.html
deleted file mode 100644
index 7fff322429..0000000000
--- a/files/fr/web/javascript/reference/global_objects/date/setutcmonth/index.html
+++ /dev/null
@@ -1,91 +0,0 @@
----
-title: Date.prototype.setUTCMonth()
-slug: Web/JavaScript/Reference/Global_Objects/Date/setUTCMonth
-tags:
-  - Date
-  - JavaScript
-  - Méthode
-  - Prototype
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Date/setUTCMonth
-original_slug: Web/JavaScript/Reference/Objets_globaux/Date/setUTCMonth
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <code><strong>setUTCMonth()</strong></code> définit le mois de la date, selon UTC.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/date-setutcmonth.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>dateObj</var>.setUTCMonth(valeurMois[, valeurJour]) </pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>valeurMois</code></dt>
- <dd>Un entier entre 0 et 11, représentant les mois de Janvier à Décembre.</dd>
- <dt><code>valeurJour</code></dt>
- <dd>Paramètre optionnel, un entier entre 1 et 31, représentant le jour du mois.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Le nombre de millisecondes écoulées entre le premier janvier 1970 minuit, UTC et la date mise à jour.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>Si le paramètre <code>valeurJour</code> n'est pas utilisé, la valeur renvoyée par la méthode {{jsxref("Date.prototype.getUTCDate", "getUTCDate()")}} sera utilisée.</p>
-
-<p>Si un paramètre renseigné n'est pas dans l'intervalle attendues, <code>setUTCMonth()</code> tentera de mettre à jour la date en conséquence. Par exemple, si on utilise 15 pour <code>valeurMois</code>, l'année sera incrémentée de 1 (année + 1), et 3 sera utilisé pour le mois.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Utiliser_setUTCMonth()">Utiliser <code>setUTCMonth()</code></h3>
-
-<pre class="brush: js">var leGrandJour = new Date();
-leGrandJour.setUTCMonth(11);
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES1')}}</td>
-   <td>{{Spec2('ES1')}}</td>
-   <td>Définition initiale. Implémentée avec JavaScript 1.3.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-15.9.5.39', 'Date.prototype.setUTCMonth')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-date.prototype.setutcmonth', 'Date.prototype.setUTCMonth')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-date.prototype.setutcmonth', 'Date.prototype.setUTCMonth')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Date.setUTCMonth")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Date.prototype.getUTCMonth()")}}</li>
- <li>{{jsxref("Date.prototype.setMonth()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/date/setutcmonth/index.md b/files/fr/web/javascript/reference/global_objects/date/setutcmonth/index.md
new file mode 100644
index 0000000000..580acfb674
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/date/setutcmonth/index.md
@@ -0,0 +1,65 @@
+---
+title: Date.prototype.setUTCMonth()
+slug: Web/JavaScript/Reference/Global_Objects/Date/setUTCMonth
+tags:
+  - Date
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/setUTCMonth
+original_slug: Web/JavaScript/Reference/Objets_globaux/Date/setUTCMonth
+---
+{{JSRef}}
+
+La méthode **`setUTCMonth()`** définit le mois de la date, selon UTC.
+
+{{EmbedInteractiveExample("pages/js/date-setutcmonth.html")}}
+
+## Syntaxe
+
+    dateObj.setUTCMonth(valeurMois[, valeurJour])
+
+### Paramètres
+
+- `valeurMois`
+  - : Un entier entre 0 et 11, représentant les mois de Janvier à Décembre.
+- `valeurJour`
+  - : Paramètre optionnel, un entier entre 1 et 31, représentant le jour du mois.
+
+### Valeur de retour
+
+Le nombre de millisecondes écoulées entre le premier janvier 1970 minuit, UTC et la date mise à jour.
+
+## Description
+
+Si le paramètre `valeurJour` n'est pas utilisé, la valeur renvoyée par la méthode {{jsxref("Date.prototype.getUTCDate", "getUTCDate()")}} sera utilisée.
+
+Si un paramètre renseigné n'est pas dans l'intervalle attendues, `setUTCMonth()` tentera de mettre à jour la date en conséquence. Par exemple, si on utilise 15 pour `valeurMois`, l'année sera incrémentée de 1 (année + 1), et 3 sera utilisé pour le mois.
+
+## Exemples
+
+### Utiliser `setUTCMonth()`
+
+```js
+var leGrandJour = new Date();
+leGrandJour.setUTCMonth(11);
+```
+
+## Spécifications
+
+| Spécification                                                                                                        | État                         | Commentaires                                          |
+| -------------------------------------------------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- |
+| {{SpecName('ES1')}}                                                                                             | {{Spec2('ES1')}}         | Définition initiale. Implémentée avec JavaScript 1.3. |
+| {{SpecName('ES5.1', '#sec-15.9.5.39', 'Date.prototype.setUTCMonth')}}                         | {{Spec2('ES5.1')}}     |                                                       |
+| {{SpecName('ES6', '#sec-date.prototype.setutcmonth', 'Date.prototype.setUTCMonth')}}     | {{Spec2('ES6')}}         |                                                       |
+| {{SpecName('ESDraft', '#sec-date.prototype.setutcmonth', 'Date.prototype.setUTCMonth')}} | {{Spec2('ESDraft')}} |                                                       |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Date.setUTCMonth")}}
+
+## Voir aussi
+
+- {{jsxref("Date.prototype.getUTCMonth()")}}
+- {{jsxref("Date.prototype.setMonth()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/date/setutcseconds/index.html b/files/fr/web/javascript/reference/global_objects/date/setutcseconds/index.html
deleted file mode 100644
index 38bbc89cad..0000000000
--- a/files/fr/web/javascript/reference/global_objects/date/setutcseconds/index.html
+++ /dev/null
@@ -1,91 +0,0 @@
----
-title: Date.prototype.setUTCSeconds()
-slug: Web/JavaScript/Reference/Global_Objects/Date/setUTCSeconds
-tags:
-  - Date
-  - JavaScript
-  - Méthode
-  - Prototype
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Date/setUTCSeconds
-original_slug: Web/JavaScript/Reference/Objets_globaux/Date/setUTCSeconds
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <code><strong>setUTCSeconds()</strong></code> définit les secondes pour la date, selon UTC.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/date-setutcseconds.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>dateObj</var>.setUTCSeconds(valeurSecondes[, valeurMs]) </pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>valeurSecondes</code></dt>
- <dd>Un entier entre 0 et 59.</dd>
- <dt><code>valeurMs</code></dt>
- <dd>Paramètre optionnel, un nombre entre 0 et 999, représentant les millièmes de secondes.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Le nombre de millisecondes écoulées entre le premier janvier 1970 minuit, UTC et la date mise à jour.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>Si le paramètre <code>valeurMs</code> n'est pas utilisée, la valeur renvoyée par la méthode {{jsxref("Date.prototype.getUTCMilliseconds", "getUTCMilliseconds()")}} sera utilisée.</p>
-
-<p>Si un paramètre renseigné est en dehors de l'intervalle attendu, <code>setUTCSeconds()</code> tentera de mettre à jour la date en conséquence. Par exemple, si on utilise 100 pour <code>valeurSecondes</code>, les minutes de la date seront incrémentées de 1, et 40 sera utilisé pour les secondes.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Utiliser_setUTCSeconds()">Utiliser <code>setUTCSeconds()</code></h3>
-
-<pre class="brush: js">var leGrandJour = new Date();
-leGrandJour.setUTCSeconds(20);
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES1')}}</td>
-   <td>{{Spec2('ES1')}}</td>
-   <td>Définition initiale. Implémentée avec JavaScript 1.3.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-15.9.5.31', 'Date.prototype.setUTCSeconds')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-date.prototype.setutcseconds', 'Date.prototype.setUTCSeconds')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-date.prototype.setutcseconds', 'Date.prototype.setUTCSeconds')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Date.setUTCSeconds")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Date.prototype.getUTCSeconds()")}}</li>
- <li>{{jsxref("Date.prototype.setSeconds()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/date/setutcseconds/index.md b/files/fr/web/javascript/reference/global_objects/date/setutcseconds/index.md
new file mode 100644
index 0000000000..ffb683924a
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/date/setutcseconds/index.md
@@ -0,0 +1,65 @@
+---
+title: Date.prototype.setUTCSeconds()
+slug: Web/JavaScript/Reference/Global_Objects/Date/setUTCSeconds
+tags:
+  - Date
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/setUTCSeconds
+original_slug: Web/JavaScript/Reference/Objets_globaux/Date/setUTCSeconds
+---
+{{JSRef}}
+
+La méthode **`setUTCSeconds()`** définit les secondes pour la date, selon UTC.
+
+{{EmbedInteractiveExample("pages/js/date-setutcseconds.html")}}
+
+## Syntaxe
+
+    dateObj.setUTCSeconds(valeurSecondes[, valeurMs])
+
+### Paramètres
+
+- `valeurSecondes`
+  - : Un entier entre 0 et 59.
+- `valeurMs`
+  - : Paramètre optionnel, un nombre entre 0 et 999, représentant les millièmes de secondes.
+
+### Valeur de retour
+
+Le nombre de millisecondes écoulées entre le premier janvier 1970 minuit, UTC et la date mise à jour.
+
+## Description
+
+Si le paramètre `valeurMs` n'est pas utilisée, la valeur renvoyée par la méthode {{jsxref("Date.prototype.getUTCMilliseconds", "getUTCMilliseconds()")}} sera utilisée.
+
+Si un paramètre renseigné est en dehors de l'intervalle attendu, `setUTCSeconds()` tentera de mettre à jour la date en conséquence. Par exemple, si on utilise 100 pour `valeurSecondes`, les minutes de la date seront incrémentées de 1, et 40 sera utilisé pour les secondes.
+
+## Exemples
+
+### Utiliser `setUTCSeconds()`
+
+```js
+var leGrandJour = new Date();
+leGrandJour.setUTCSeconds(20);
+```
+
+## Spécifications
+
+| Spécification                                                                                                                | État                         | Commentaires                                          |
+| ---------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- |
+| {{SpecName('ES1')}}                                                                                                     | {{Spec2('ES1')}}         | Définition initiale. Implémentée avec JavaScript 1.3. |
+| {{SpecName('ES5.1', '#sec-15.9.5.31', 'Date.prototype.setUTCSeconds')}}                             | {{Spec2('ES5.1')}}     |                                                       |
+| {{SpecName('ES6', '#sec-date.prototype.setutcseconds', 'Date.prototype.setUTCSeconds')}}         | {{Spec2('ES6')}}         |                                                       |
+| {{SpecName('ESDraft', '#sec-date.prototype.setutcseconds', 'Date.prototype.setUTCSeconds')}} | {{Spec2('ESDraft')}} |                                                       |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Date.setUTCSeconds")}}
+
+## Voir aussi
+
+- {{jsxref("Date.prototype.getUTCSeconds()")}}
+- {{jsxref("Date.prototype.setSeconds()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/date/setyear/index.html b/files/fr/web/javascript/reference/global_objects/date/setyear/index.html
deleted file mode 100644
index 05e61e6700..0000000000
--- a/files/fr/web/javascript/reference/global_objects/date/setyear/index.html
+++ /dev/null
@@ -1,93 +0,0 @@
----
-title: Date.prototype.setYear()
-slug: Web/JavaScript/Reference/Global_Objects/Date/setYear
-tags:
-  - Date
-  - Déprécié
-  - JavaScript
-  - Méthode
-  - Prototype
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Date/setYear
-original_slug: Web/JavaScript/Reference/Objets_globaux/Date/setYear
----
-<div>{{JSRef}} {{deprecated_header}}</div>
-
-<p>La méthode <strong><code>setYear()</code></strong> définit l'année pour pour la date, selon l'heure locale. <code>setYear()</code> ne définissant pas des années complêtes ( « bug de l'an 2000 » ), elle n'est plus utilisée et a été remplacée par la méthode {{jsxref("Date.prototype.setFullYear", "setFullYear")}}.</p>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>dateObj</var>.setYear(valeurAnnée)</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>valeurAnnée</code></dt>
- <dd>Un entier.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Le nombre de millisecondes écoulées entre le premier janvier 1970 minuit, UTC et la date mise à jour.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>Si <code>valeurAnnée</code> est un nombre entre 0 et 99 (inclus), alors l'année de <code>dateObj</code> sera définie à 1900 + <code>valeurAnnée</code>. Sinon, l'année de <code>dateObj</code> sera définie à <code>valeurAnnée</code>.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Utiliser_setYear()">Utiliser <code>setYear()</code></h3>
-
-<p>Les deux premières instructions définissent l'année 1996. La troisième définit l'année 2000.</p>
-
-<pre class="brush: js">var leGrandJour = new Date();
-
-leGrandJour.setYear(96);
-leGrandJour.setYear(1996);
-leGrandJour.setYear(2000);
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES1')}}</td>
-   <td>{{Spec2('ES1')}}</td>
-   <td>Définition initiale. Implémentée avec JavaScript 1.0.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-B.2.5', 'Date.prototype.setYear')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td>Définie dans l'annexe informative sur la compatibilité.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-date.prototype.setyear', 'Date.prototype.setYear')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td>Définie dans l'annexe normative sur les fonctionnalités additionnelles des navigateurs web.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-date.prototype.setyear', 'Date.prototype.setYear')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td>Définie dans l'annexe normative sur les fonctionnalités additionnelles des navigateurs web.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Date.setYear")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Date.prototype.getFullYear()")}}</li>
- <li>{{jsxref("Date.prototype.getUTCFullYear()")}}</li>
- <li>{{jsxref("Date.prototype.setFullYear()")}}</li>
- <li>{{jsxref("Date.prototype.setUTCFullYear()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/date/setyear/index.md b/files/fr/web/javascript/reference/global_objects/date/setyear/index.md
new file mode 100644
index 0000000000..34756135d3
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/date/setyear/index.md
@@ -0,0 +1,67 @@
+---
+title: Date.prototype.setYear()
+slug: Web/JavaScript/Reference/Global_Objects/Date/setYear
+tags:
+  - Date
+  - Déprécié
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/setYear
+original_slug: Web/JavaScript/Reference/Objets_globaux/Date/setYear
+---
+{{JSRef}} {{deprecated_header}}
+
+La méthode **`setYear()`** définit l'année pour pour la date, selon l'heure locale. `setYear()` ne définissant pas des années complêtes ( « bug de l'an 2000 » ), elle n'est plus utilisée et a été remplacée par la méthode {{jsxref("Date.prototype.setFullYear", "setFullYear")}}.
+
+## Syntaxe
+
+    dateObj.setYear(valeurAnnée)
+
+### Paramètres
+
+- `valeurAnnée`
+  - : Un entier.
+
+### Valeur de retour
+
+Le nombre de millisecondes écoulées entre le premier janvier 1970 minuit, UTC et la date mise à jour.
+
+## Description
+
+Si `valeurAnnée` est un nombre entre 0 et 99 (inclus), alors l'année de `dateObj` sera définie à 1900 + `valeurAnnée`. Sinon, l'année de `dateObj` sera définie à `valeurAnnée`.
+
+## Exemples
+
+### Utiliser `setYear()`
+
+Les deux premières instructions définissent l'année 1996. La troisième définit l'année 2000.
+
+```js
+var leGrandJour = new Date();
+
+leGrandJour.setYear(96);
+leGrandJour.setYear(1996);
+leGrandJour.setYear(2000);
+```
+
+## Spécifications
+
+| Spécification                                                                                                | État                         | Commentaires                                                                                |
+| ------------------------------------------------------------------------------------------------------------ | ---------------------------- | ------------------------------------------------------------------------------------------- |
+| {{SpecName('ES1')}}                                                                                     | {{Spec2('ES1')}}         | Définition initiale. Implémentée avec JavaScript 1.0.                                       |
+| {{SpecName('ES5.1', '#sec-B.2.5', 'Date.prototype.setYear')}}                             | {{Spec2('ES5.1')}}     | Définie dans l'annexe informative sur la compatibilité.                                     |
+| {{SpecName('ES6', '#sec-date.prototype.setyear', 'Date.prototype.setYear')}}         | {{Spec2('ES6')}}         | Définie dans l'annexe normative sur les fonctionnalités additionnelles des navigateurs web. |
+| {{SpecName('ESDraft', '#sec-date.prototype.setyear', 'Date.prototype.setYear')}} | {{Spec2('ESDraft')}} | Définie dans l'annexe normative sur les fonctionnalités additionnelles des navigateurs web. |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Date.setYear")}}
+
+## Voir aussi
+
+- {{jsxref("Date.prototype.getFullYear()")}}
+- {{jsxref("Date.prototype.getUTCFullYear()")}}
+- {{jsxref("Date.prototype.setFullYear()")}}
+- {{jsxref("Date.prototype.setUTCFullYear()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/date/todatestring/index.html b/files/fr/web/javascript/reference/global_objects/date/todatestring/index.html
deleted file mode 100644
index 0fa5df67f0..0000000000
--- a/files/fr/web/javascript/reference/global_objects/date/todatestring/index.html
+++ /dev/null
@@ -1,91 +0,0 @@
----
-title: Date.prototype.toDateString()
-slug: Web/JavaScript/Reference/Global_Objects/Date/toDateString
-tags:
-  - Date
-  - JavaScript
-  - Méthode
-  - Prototype
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Date/toDateString
-original_slug: Web/JavaScript/Reference/Objets_globaux/Date/toDateString
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <code><strong>toDateString()</strong></code> renvoie la date contenue dans un objet {{jsxref("Date")}} sous la forme d'une chaîne de caractères lisible par un humain, en anglais américain et au format suivant :</p>
-
-<ol>
- <li>Les trois premières lettre indiquent le jour</li>
- <li>Les trois lettres suivantes indiquent le mois</li>
- <li>Les deux chiffres suivants indiquent le jour du mois (et sont complétés avec un 0 devant si besoin)</li>
- <li>Les quatre chiffres restants indiquent l'année (si besoin complétées avec des 0 comme préfixe)</li>
-</ol>
-
-<div>{{EmbedInteractiveExample("pages/js/date-todatestring.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>dateObj</var>.toDateString()</pre>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Une chaîne de caractères qui représente la date indiquée, dans un format anglais américain.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>Les instances de {{jsxref("Date")}} représentent un point précis dans le temps. Appeler {{jsxref("Date.prototype.toString", "toString")}} retournera la date formatée sous une forme lisible par un humain, en anglais américain. Pour le moteur JavaScript <a href="/fr/docs/SpiderMonkey">SpiderMonkey</a>, ceci consiste en : la partie « date » (jour, mois et année) suivie de la partie « heure » (heures, minutes, secondes et fuseau horaire). Il est parfois préférable d'obtenir uniquement la partie « date » ; ceci est possible grâce à la méthode <code>toDateString()</code>.</p>
-
-<p>La méthode <code>toDateString()</code> est particulièrement utile car, pour les moteurs implémentant fidèlement <a href="/fr/docs/JavaScript/Language_Resources">ECMA-262</a>, il peut y avoir certaines différences dans la chaîne de caractères produite par <code>toString()</code> sur les objets <code>Date</code>. Le format dépend de l'implémentation et les techniques simples de découpage de texte peuvent ne pas produire un résultat cohérent à travers les différents moteurs.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Utiliser_simplement_toDateString()">Utiliser simplement <code>toDateString()</code></h3>
-
-<pre class="brush:js">var d = new Date(1993, 6, 28, 14, 39, 7);
-
-console.log(d.toString());     // écrit Wed Jul 28 1993 14:39:07 GMT-0600 (PDT)
-console.log(d.toDateString()); // écrit Wed Jul 28 1993</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES3')}}</td>
-   <td>{{Spec2('ES3')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-15.9.5.3', 'Date.prototype.toDateString')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-date.prototype.todatestring', 'Date.prototype.toDateString')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-date.prototype.todatestring', 'Date.prototype.toDateString')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Date.toDateString")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Date.prototype.toLocaleDateString()")}}</li>
- <li>{{jsxref("Date.prototype.toTimeString()")}}</li>
- <li>{{jsxref("Date.prototype.toString()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/date/todatestring/index.md b/files/fr/web/javascript/reference/global_objects/date/todatestring/index.md
new file mode 100644
index 0000000000..50dbe12d4b
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/date/todatestring/index.md
@@ -0,0 +1,66 @@
+---
+title: Date.prototype.toDateString()
+slug: Web/JavaScript/Reference/Global_Objects/Date/toDateString
+tags:
+  - Date
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/toDateString
+original_slug: Web/JavaScript/Reference/Objets_globaux/Date/toDateString
+---
+{{JSRef}}
+
+La méthode **`toDateString()`** renvoie la date contenue dans un objet {{jsxref("Date")}} sous la forme d'une chaîne de caractères lisible par un humain, en anglais américain et au format suivant :
+
+1.  Les trois premières lettre indiquent le jour
+2.  Les trois lettres suivantes indiquent le mois
+3.  Les deux chiffres suivants indiquent le jour du mois (et sont complétés avec un 0 devant si besoin)
+4.  Les quatre chiffres restants indiquent l'année (si besoin complétées avec des 0 comme préfixe)
+
+{{EmbedInteractiveExample("pages/js/date-todatestring.html")}}
+
+## Syntaxe
+
+    dateObj.toDateString()
+
+### Valeur de retour
+
+Une chaîne de caractères qui représente la date indiquée, dans un format anglais américain.
+
+## Description
+
+Les instances de {{jsxref("Date")}} représentent un point précis dans le temps. Appeler {{jsxref("Date.prototype.toString", "toString")}} retournera la date formatée sous une forme lisible par un humain, en anglais américain. Pour le moteur JavaScript [SpiderMonkey](/fr/docs/SpiderMonkey), ceci consiste en : la partie « date » (jour, mois et année) suivie de la partie « heure » (heures, minutes, secondes et fuseau horaire). Il est parfois préférable d'obtenir uniquement la partie « date » ; ceci est possible grâce à la méthode `toDateString()`.
+
+La méthode `toDateString()` est particulièrement utile car, pour les moteurs implémentant fidèlement [ECMA-262](/fr/docs/JavaScript/Language_Resources), il peut y avoir certaines différences dans la chaîne de caractères produite par `toString()` sur les objets `Date`. Le format dépend de l'implémentation et les techniques simples de découpage de texte peuvent ne pas produire un résultat cohérent à travers les différents moteurs.
+
+## Exemples
+
+### Utiliser simplement `toDateString()`
+
+```js
+var d = new Date(1993, 6, 28, 14, 39, 7);
+
+console.log(d.toString());     // écrit Wed Jul 28 1993 14:39:07 GMT-0600 (PDT)
+console.log(d.toDateString()); // écrit Wed Jul 28 1993
+```
+
+## Spécifications
+
+| Spécification                                                                                                            | État                         | Commentaires         |
+| ------------------------------------------------------------------------------------------------------------------------ | ---------------------------- | -------------------- |
+| {{SpecName('ES3')}}                                                                                                 | {{Spec2('ES3')}}         | Définition initiale. |
+| {{SpecName('ES5.1', '#sec-15.9.5.3', 'Date.prototype.toDateString')}}                             | {{Spec2('ES5.1')}}     |                      |
+| {{SpecName('ES6', '#sec-date.prototype.todatestring', 'Date.prototype.toDateString')}}     | {{Spec2('ES6')}}         |                      |
+| {{SpecName('ESDraft', '#sec-date.prototype.todatestring', 'Date.prototype.toDateString')}} | {{Spec2('ESDraft')}} |                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Date.toDateString")}}
+
+## Voir aussi
+
+- {{jsxref("Date.prototype.toLocaleDateString()")}}
+- {{jsxref("Date.prototype.toTimeString()")}}
+- {{jsxref("Date.prototype.toString()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/date/togmtstring/index.html b/files/fr/web/javascript/reference/global_objects/date/togmtstring/index.html
deleted file mode 100644
index 701cc5c49a..0000000000
--- a/files/fr/web/javascript/reference/global_objects/date/togmtstring/index.html
+++ /dev/null
@@ -1,84 +0,0 @@
----
-title: Date.prototype.toGMTString()
-slug: Web/JavaScript/Reference/Global_Objects/Date/toGMTString
-tags:
-  - Date
-  - Déprécié
-  - JavaScript
-  - Méthode
-  - Prototype
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Date/toGMTString
-original_slug: Web/JavaScript/Reference/Objets_globaux/Date/toGMTString
----
-<div>{{JSRef}} {{deprecated_header}}</div>
-
-<p>La méthode <code><strong>toGMTString()</strong></code> convertit une date en une chaîne de caractères, en utilisant les conventions Internet pour GMT. Le format exact de la valeur renvoyée par <code>toGMTString()</code> varie en fonction de la plateforme et du navigateur web. En général, le texte produit est formaté pour être lisible par un humain.</p>
-
-<div class="note">
-<p><strong>Note :</strong> <code>toGMTString()</code> est obsolète et ne doit plus être utilisé. Il existe encore uniquementpour des questions de compatibilité. La méthode {{jsxref("Date.prototype.toUTCString", "toUTCString()")}} doit être utilisée à la place.</p>
-</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>dateObj</var>.toGMTString()</pre>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Une chaîne de caractères représentant la date indiquée selon la convention internet pour GMT (<em>Greenwich Mean Time</em>).</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Utiliser_toGMTString()">Utiliser <code>toGMTString()</code></h3>
-
-<p>Dans cet exemple, la méthode <code>toGMTString()</code> convertit la date vers GMT (UTC) en utilisant la différence avec le fuseau horaire du système d'exploitation. Elle renvoie une chaîne de caractères similaire à celle de l'exemple. La forme exacte de cette chaîne de caractères dépend de la plateforme.</p>
-
-<pre class="brush: js">var aujourdhui = new Date();
-var str = aujourdhui.toGMTString();  // Obsolète ! Utilisez toUTCString()
-
-console.log(str);               // Mon, 18 Dec 1995 17:28:35 GMT
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES1')}}</td>
-   <td>{{Spec2('ES1')}}</td>
-   <td>Définition initiale et déjà déclarée comme dépréciée. Implémentée avec JavaScript 1.0.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-B.2.6', 'Date.prototype.toGMTString')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td>Définie dans l'annexe informative sur la compatibilité.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-date.prototype.togmtstring', 'Date.prototype.toGMTString')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td>Définie dans l'annexe normative sur les fonctionnalités additionnelles des navigateurs web.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-date.prototype.togmtstring', 'Date.prototype.toGMTString')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td>Définie dans l'annexe normative sur les fonctionnalités additionnelles des navigateurs web.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Date.toGMTString")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Date.prototype.toLocaleDateString()")}}</li>
- <li>{{jsxref("Date.prototype.toTimeString()")}}</li>
- <li>{{jsxref("Date.prototype.toUTCString()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/date/togmtstring/index.md b/files/fr/web/javascript/reference/global_objects/date/togmtstring/index.md
new file mode 100644
index 0000000000..6cabfdde5a
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/date/togmtstring/index.md
@@ -0,0 +1,58 @@
+---
+title: Date.prototype.toGMTString()
+slug: Web/JavaScript/Reference/Global_Objects/Date/toGMTString
+tags:
+  - Date
+  - Déprécié
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/toGMTString
+original_slug: Web/JavaScript/Reference/Objets_globaux/Date/toGMTString
+---
+{{JSRef}} {{deprecated_header}}
+
+La méthode **`toGMTString()`** convertit une date en une chaîne de caractères, en utilisant les conventions Internet pour GMT. Le format exact de la valeur renvoyée par `toGMTString()` varie en fonction de la plateforme et du navigateur web. En général, le texte produit est formaté pour être lisible par un humain.
+
+> **Note :** `toGMTString()` est obsolète et ne doit plus être utilisé. Il existe encore uniquementpour des questions de compatibilité. La méthode {{jsxref("Date.prototype.toUTCString", "toUTCString()")}} doit être utilisée à la place.
+
+## Syntaxe
+
+    dateObj.toGMTString()
+
+### Valeur de retour
+
+Une chaîne de caractères représentant la date indiquée selon la convention internet pour GMT (_Greenwich Mean Time_).
+
+## Exemples
+
+### Utiliser `toGMTString()`
+
+Dans cet exemple, la méthode `toGMTString()` convertit la date vers GMT (UTC) en utilisant la différence avec le fuseau horaire du système d'exploitation. Elle renvoie une chaîne de caractères similaire à celle de l'exemple. La forme exacte de cette chaîne de caractères dépend de la plateforme.
+
+```js
+var aujourdhui = new Date();
+var str = aujourdhui.toGMTString();  // Obsolète ! Utilisez toUTCString()
+
+console.log(str);               // Mon, 18 Dec 1995 17:28:35 GMT
+```
+
+## Spécifications
+
+| Spécification                                                                                                        | État                         | Commentaires                                                                                |
+| -------------------------------------------------------------------------------------------------------------------- | ---------------------------- | ------------------------------------------------------------------------------------------- |
+| {{SpecName('ES1')}}                                                                                             | {{Spec2('ES1')}}         | Définition initiale et déjà déclarée comme dépréciée. Implémentée avec JavaScript 1.0.      |
+| {{SpecName('ES5.1', '#sec-B.2.6', 'Date.prototype.toGMTString')}}                             | {{Spec2('ES5.1')}}     | Définie dans l'annexe informative sur la compatibilité.                                     |
+| {{SpecName('ES6', '#sec-date.prototype.togmtstring', 'Date.prototype.toGMTString')}}     | {{Spec2('ES6')}}         | Définie dans l'annexe normative sur les fonctionnalités additionnelles des navigateurs web. |
+| {{SpecName('ESDraft', '#sec-date.prototype.togmtstring', 'Date.prototype.toGMTString')}} | {{Spec2('ESDraft')}} | Définie dans l'annexe normative sur les fonctionnalités additionnelles des navigateurs web. |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Date.toGMTString")}}
+
+## Voir aussi
+
+- {{jsxref("Date.prototype.toLocaleDateString()")}}
+- {{jsxref("Date.prototype.toTimeString()")}}
+- {{jsxref("Date.prototype.toUTCString()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/date/toisostring/index.html b/files/fr/web/javascript/reference/global_objects/date/toisostring/index.html
deleted file mode 100644
index 102c8dfb19..0000000000
--- a/files/fr/web/javascript/reference/global_objects/date/toisostring/index.html
+++ /dev/null
@@ -1,104 +0,0 @@
----
-title: Date.prototype.toISOString()
-slug: Web/JavaScript/Reference/Global_Objects/Date/toISOString
-tags:
-  - Date
-  - JavaScript
-  - Méthode
-  - Prototype
-  - Reference
-  - polyfill
-translation_of: Web/JavaScript/Reference/Global_Objects/Date/toISOString
-original_slug: Web/JavaScript/Reference/Objets_globaux/Date/toISOString
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <code><strong>toISOString()</strong></code> renvoie une chaîne de caractères au format ISO (<a href="http://en.wikipedia.org/wiki/ISO_8601">ISO 8601 Extended Format</a>), qui peut être décrite de cette façon : <code><strong>YYYY-MM-DDTHH:mm:ss.sssZ</strong></code> (toujours longue de 24 caractères) ou de cette façon <strong><code>±YYYYYY-MM-DDTHH:mm:ss.sssZ</code></strong> (27 caractères). Le fuseau horaire est toujours UTC, comme l'indique le suffixe « Z » (pour zéro décalage avec UTC).</p>
-
-<div>{{EmbedInteractiveExample("pages/js/date-toisostring.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>dateObj</var>.toISOString()</pre>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Une chaîne de caractères représentant la date indiquée au format <a href="https://fr.wikipedia.org/wiki/ISO_8601">ISO 8601</a> selon le temps universel.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Utiliser_toISOString()">Utiliser <code>toISOString()</code></h3>
-
-<pre class="brush: js">var aujourdhui = new Date("05 October 2011 14:48 UTC");
-
-console.log(aujourdhui.toISOString()); // Renvoie "2011-10-05T14:48:00.000Z"
-</pre>
-
-<p>L'exemple ci-dessus analyse une chaîne de caractères non-standard, qui peut donc être incorrectement intérprété par des navigateurs n'utilisant pas Gecko.</p>
-
-<h2 id="Prothèse_d'émulation_(polyfill)">Prothèse d'émulation (<em>polyfill</em>)</h2>
-
-<p>Cette méthode fut standardisée avec la cinquième édition d'ECMAScript. Afin d'utiliser cette méthode avec les moteurs qui n'en disposent pas nativement, on pourra utiliser ce fragment de code :</p>
-
-<pre class="brush:js">if ( !Date.prototype.toISOString ) {
-  ( function() {
-
-    function pad(number) {
-      if ( number &lt; 10 ) {
-        return '0' + number;
-      }
-      return number;
-    }
-
-    Date.prototype.toISOString = function() {
-      return this.getUTCFullYear() +
-        '-' + pad( this.getUTCMonth() + 1 ) +
-        '-' + pad( this.getUTCDate() ) +
-        'T' + pad( this.getUTCHours() ) +
-        ':' + pad( this.getUTCMinutes() ) +
-        ':' + pad( this.getUTCSeconds() ) +
-        '.' + (this.getUTCMilliseconds() / 1000).toFixed(3).slice(2, 5) +
-        'Z';
-    };
-
-  }() );
-}</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-15.9.5.43', 'Date.prototype.toISOString')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td>Définition initiale. Implémentée avec JavaScript 1.8.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-date.prototype.toisostring', 'Date.prototype.toISOString')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-date.prototype.toisostring', 'Date.prototype.toISOString')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Date.toISOString")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Date.prototype.toLocaleDateString()")}}</li>
- <li>{{jsxref("Date.prototype.toTimeString()")}}</li>
- <li>{{jsxref("Date.prototype.toUTCString()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/date/toisostring/index.md b/files/fr/web/javascript/reference/global_objects/date/toisostring/index.md
new file mode 100644
index 0000000000..04e1ce306e
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/date/toisostring/index.md
@@ -0,0 +1,86 @@
+---
+title: Date.prototype.toISOString()
+slug: Web/JavaScript/Reference/Global_Objects/Date/toISOString
+tags:
+  - Date
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - polyfill
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/toISOString
+original_slug: Web/JavaScript/Reference/Objets_globaux/Date/toISOString
+---
+{{JSRef}}
+
+La méthode **`toISOString()`** renvoie une chaîne de caractères au format ISO ([ISO 8601 Extended Format](http://en.wikipedia.org/wiki/ISO_8601)), qui peut être décrite de cette façon : **`YYYY-MM-DDTHH:mm:ss.sssZ`** (toujours longue de 24 caractères) ou de cette façon **`±YYYYYY-MM-DDTHH:mm:ss.sssZ`** (27 caractères). Le fuseau horaire est toujours UTC, comme l'indique le suffixe « Z » (pour zéro décalage avec UTC).
+
+{{EmbedInteractiveExample("pages/js/date-toisostring.html")}}
+
+## Syntaxe
+
+    dateObj.toISOString()
+
+### Valeur de retour
+
+Une chaîne de caractères représentant la date indiquée au format [ISO 8601](https://fr.wikipedia.org/wiki/ISO_8601) selon le temps universel.
+
+## Exemples
+
+### Utiliser `toISOString()`
+
+```js
+var aujourdhui = new Date("05 October 2011 14:48 UTC");
+
+console.log(aujourdhui.toISOString()); // Renvoie "2011-10-05T14:48:00.000Z"
+```
+
+L'exemple ci-dessus analyse une chaîne de caractères non-standard, qui peut donc être incorrectement intérprété par des navigateurs n'utilisant pas Gecko.
+
+## Prothèse d'émulation (_polyfill_)
+
+Cette méthode fut standardisée avec la cinquième édition d'ECMAScript. Afin d'utiliser cette méthode avec les moteurs qui n'en disposent pas nativement, on pourra utiliser ce fragment de code :
+
+```js
+if ( !Date.prototype.toISOString ) {
+  ( function() {
+
+    function pad(number) {
+      if ( number < 10 ) {
+        return '0' + number;
+      }
+      return number;
+    }
+
+    Date.prototype.toISOString = function() {
+      return this.getUTCFullYear() +
+        '-' + pad( this.getUTCMonth() + 1 ) +
+        '-' + pad( this.getUTCDate() ) +
+        'T' + pad( this.getUTCHours() ) +
+        ':' + pad( this.getUTCMinutes() ) +
+        ':' + pad( this.getUTCSeconds() ) +
+        '.' + (this.getUTCMilliseconds() / 1000).toFixed(3).slice(2, 5) +
+        'Z';
+    };
+
+  }() );
+}
+```
+
+## Spécifications
+
+| Spécification                                                                                                        | État                         | Commentaires                                          |
+| -------------------------------------------------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- |
+| {{SpecName('ES5.1', '#sec-15.9.5.43', 'Date.prototype.toISOString')}}                         | {{Spec2('ES5.1')}}     | Définition initiale. Implémentée avec JavaScript 1.8. |
+| {{SpecName('ES6', '#sec-date.prototype.toisostring', 'Date.prototype.toISOString')}}     | {{Spec2('ES6')}}         |                                                       |
+| {{SpecName('ESDraft', '#sec-date.prototype.toisostring', 'Date.prototype.toISOString')}} | {{Spec2('ESDraft')}} |                                                       |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Date.toISOString")}}
+
+## Voir aussi
+
+- {{jsxref("Date.prototype.toLocaleDateString()")}}
+- {{jsxref("Date.prototype.toTimeString()")}}
+- {{jsxref("Date.prototype.toUTCString()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/date/tojson/index.html b/files/fr/web/javascript/reference/global_objects/date/tojson/index.html
deleted file mode 100644
index c05c5d8d13..0000000000
--- a/files/fr/web/javascript/reference/global_objects/date/tojson/index.html
+++ /dev/null
@@ -1,78 +0,0 @@
----
-title: Date.prototype.toJSON()
-slug: Web/JavaScript/Reference/Global_Objects/Date/toJSON
-tags:
-  - Date
-  - JavaScript
-  - Méthode
-  - Prototype
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Date/toJSON
-original_slug: Web/JavaScript/Reference/Objets_globaux/Date/toJSON
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <code><strong>toJSON()</strong></code> renvoie une chaîne représentant l'objet {{jsxref("Date")}} sous forme {{Glossary("JSON")}}</p>
-
-<div>{{EmbedInteractiveExample("pages/js/date-tojson.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>dateObj</var>.toJSON()</pre>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Une chaîne de caractères représentant la date indiquée.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>Les instances de {{jsxref("Date")}} identifient un instant précis dans le temps. Appeler <code>toJSON()</code> renvoie une chaîne de caractères formatée en JSON (en utilisant {{jsxref("Date.prototype.toISOString", "toISOString()")}}), représentant la valeur de l'objet <code>Date</code>. Cette méthode est généralement utilisée, par défaut, pour sérialiser les objets <code>Date</code> lors d'une sérialisation au format JSON.</p>
-
-<h2 id="Exemple">Exemple</h2>
-
-<h3 id="Utiliser_toJSON()">Utiliser <code>toJSON()</code></h3>
-
-<pre class="brush:js">var jsonDate = (new Date()).toJSON();
-var retourVersDate = new Date(jsonDate);
-
-console.log(jsonDate); //2015-10-26T07:46:36.611Z
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-15.9.5.44', 'Date.prototype.toJSON')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td>Définition initiale. Implémentée avec JavaScript 1.8.5.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-date.prototype.tojson', 'Date.prototype.toJSON')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-date.prototype.tojson', 'Date.prototype.toJSON')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Date.toJSON")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Date.prototype.toLocaleDateString()")}}</li>
- <li>{{jsxref("Date.prototype.toTimeString()")}}</li>
- <li>{{jsxref("Date.prototype.toUTCString()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/date/tojson/index.md b/files/fr/web/javascript/reference/global_objects/date/tojson/index.md
new file mode 100644
index 0000000000..7909061c35
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/date/tojson/index.md
@@ -0,0 +1,58 @@
+---
+title: Date.prototype.toJSON()
+slug: Web/JavaScript/Reference/Global_Objects/Date/toJSON
+tags:
+  - Date
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/toJSON
+original_slug: Web/JavaScript/Reference/Objets_globaux/Date/toJSON
+---
+{{JSRef}}
+
+La méthode **`toJSON()`** renvoie une chaîne représentant l'objet {{jsxref("Date")}} sous forme {{Glossary("JSON")}}
+
+{{EmbedInteractiveExample("pages/js/date-tojson.html")}}
+
+## Syntaxe
+
+    dateObj.toJSON()
+
+### Valeur de retour
+
+Une chaîne de caractères représentant la date indiquée.
+
+## Description
+
+Les instances de {{jsxref("Date")}} identifient un instant précis dans le temps. Appeler `toJSON()` renvoie une chaîne de caractères formatée en JSON (en utilisant {{jsxref("Date.prototype.toISOString", "toISOString()")}}), représentant la valeur de l'objet `Date`. Cette méthode est généralement utilisée, par défaut, pour sérialiser les objets `Date` lors d'une sérialisation au format JSON.
+
+## Exemple
+
+### Utiliser `toJSON()`
+
+```js
+var jsonDate = (new Date()).toJSON();
+var retourVersDate = new Date(jsonDate);
+
+console.log(jsonDate); //2015-10-26T07:46:36.611Z
+```
+
+## Spécifications
+
+| Spécification                                                                                            | État                         | Commentaires                                            |
+| -------------------------------------------------------------------------------------------------------- | ---------------------------- | ------------------------------------------------------- |
+| {{SpecName('ES5.1', '#sec-15.9.5.44', 'Date.prototype.toJSON')}}                     | {{Spec2('ES5.1')}}     | Définition initiale. Implémentée avec JavaScript 1.8.5. |
+| {{SpecName('ES6', '#sec-date.prototype.tojson', 'Date.prototype.toJSON')}}     | {{Spec2('ES6')}}         |                                                         |
+| {{SpecName('ESDraft', '#sec-date.prototype.tojson', 'Date.prototype.toJSON')}} | {{Spec2('ESDraft')}} |                                                         |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Date.toJSON")}}
+
+## Voir aussi
+
+- {{jsxref("Date.prototype.toLocaleDateString()")}}
+- {{jsxref("Date.prototype.toTimeString()")}}
+- {{jsxref("Date.prototype.toUTCString()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/date/tolocaledatestring/index.html b/files/fr/web/javascript/reference/global_objects/date/tolocaledatestring/index.html
deleted file mode 100644
index e773e49be3..0000000000
--- a/files/fr/web/javascript/reference/global_objects/date/tolocaledatestring/index.html
+++ /dev/null
@@ -1,183 +0,0 @@
----
-title: Date.prototype.toLocaleDateString()
-slug: Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString
-tags:
-  - Date
-  - Internationalisation
-  - JavaScript
-  - Méthode
-  - Prototype
-  - Reference
-  - i18n
-translation_of: Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString
-original_slug: Web/JavaScript/Reference/Objets_globaux/Date/toLocaleDateString
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <code><strong>toLocaleDateString()</strong></code> renvoie une chaine de caractères correspondant à la date (le fragment de l'objet qui correspond à la date : jour, mois, année) exprimée selon une locale. Les arguments <code>locales</code> et <code>options</code> permettent aux applications de définir le langage utilisé pour les conventions de format et permettent de personnaliser le comportement de la fonction. Les anciennes implémentations ignorent ces arguments, la locale utilisée et le format de la chaine dépendent uniquement de l'implémentation.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/date-tolocaledatestring.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>dateObj</var>.toLocaleDateString([locales [, options]])</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<p>Voir le tableau de <a href="#compat">compatibilité des navigateurs</a> afin de déterminer quels navigateurs respectent les arguments <code>locales</code> et <code>options</code> ainsi que l'exemple <a href="#check">Vérifier le support des arguments locales et options</a> qui permet de détecter cette fonctionnalité.</p>
-
-<p>{{page('fr/docs/JavaScript/Reference/Objets_globaux/DateTimeFormat','Paramètres')}}</p>
-
-<p>La valeur par défaut de chacun des composants de la date vaut {{jsxref("undefined")}}, si les propriétés <code>weekday</code>, <code>year</code>, <code>month</code>, <code>day</code> sont toutes <code>undefined</code>, on suppose alors que <code>year</code>, <code>month</code>, et <code>day</code> sont « numériques ».</p>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Une chaîne de caractères qui représente le jour de la date indiquée selon des options de locales.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Utiliser_toLocaleDateString()">Utiliser <code>toLocaleDateString()</code></h3>
-
-<p>Voici un usage simple qui ne définit pas de locale : une chaine de caractères dans une locale et avec des options par défaut est renvoyée.</p>
-
-<pre class="brush:js">var date = new Date(Date.UTC(2012, 11, 12, 3, 0, 0));
-
-// toLocaleDateString() sans argument, on utilise donc
-// les valeurs par défaut (de l'implémentation)
-// pour la locale, et le fuseau horaire
-date.toLocaleDateString();
-// → "12/12/2012" si exécuté dans une locale fr et le fuseau horaire CEST</pre>
-
-<h3 id="Vérifier_le_support_des_arguments_locales_et_options">Vérifier le support des arguments <code>locales</code> et <code>options</code></h3>
-
-<p>Les arguments <code>locales</code> et <code>options</code> ne sont pas encore supportés par tous les navigateurs. Afin de vérifier si l'implementation utilisée les supporte, vous pouvez utiliser le pré-requis suivant : les locales incorrectes sont rejetées avec une exception<code> RangeError</code> :</p>
-
-<pre class="brush: js">function toLocaleDateStringSupportsLocales() {
-    try {
-        new Date().toLocaleDateString("i");
-    } catch (e) {
-        return e​.name === "RangeError";
-    }
-    return false;
-}
-</pre>
-
-<h3 id="Utiliser_l'argument_locales">Utiliser l'argument <code>locales</code></h3>
-
-<p>Cet exemple montre quelques variations dues aux formats de dates localisés. Afin d'obtenir le langage utilisé au sein de l'interface utilisateur de votre application, vérifiez de bien fournir ce langage (et éventuellement des locales de recours) en utilisant l'argument <code>locales</code> :</p>
-
-<pre class="brush: js">var date = new Date(Date.UTC(2012, 11, 20, 3, 0, 0));
-
-// les formats qui suivent se basent sur le
-// fuseau horaire CEST
-
-// l'anglais américain utilise l'ordre mois-jour-année
-alert(date.toLocaleDateString("en-US"));
-// → "12/20/2012"
-
-// l'anglais britannique utilise l'ordre jour-mois-année
-alert(date.toLocaleDateString("en-GB"));
-// → "20/12/2012"
-
-// le coréen utilise l'ordre année-mois-jour
-alert(date.toLocaleDateString("ko-KR"));
-// → "2012. 12. 20."
-
-// l'arabe, dans la plupart des pays arabophones, utilise les chiffres arabes
-alert(date.toLocaleDateString("ar-EG"));
-// → "<span dir="rtl">٢٠‏/١٢‏/٢٠١٢</span>"
-
-// en ce qui concerne le japonais, les applications peuvent
-// souhaiter utiliser le calendrier japonais
-// pour lequel 2012 était l'année 24 de l'ère Heisei
-alert(date.toLocaleDateString("ja-JP-u-ca-japanese"));
-// → "24/12/20"
-
-// quand un langage non support est demandé (ex : le balinais)
-// il est possible de fournir un langage de recours (ici l'indonésien)
-alert(date.toLocaleDateString(["ban", "id"]));
-// → "20/12/2012"
-</pre>
-
-<h3 id="Utiliser_l'argument_options">Utiliser l'argument <code>options</code></h3>
-
-<p>Les résultats fournis par <code>toLocaleDateString()</code> peuvent être personnalisés grâce à l'argument <code>options</code> :</p>
-
-<pre class="brush: js">var date = new Date(Date.UTC(2012, 11, 20, 3, 0, 0));
-
-// fournir le jour de la semaine avec une date longe
-var options = {weekday: "long", year: "numeric", month: "long", day: "numeric"};
-alert(date.toLocaleDateString("de-DE", options));
-// → "Donnerstag, 20. Dezember 2012"
-
-// une application peut vouloir utiliser
-// UTC et l'afficher
-options.timeZone = "UTC";
-options.timeZoneName = "short";
-alert(date.toLocaleDateString("en-US", options));
-// → "Thursday, December 20, 2012, GMT"
-</pre>
-
-<h2 id="Performance">Performance</h2>
-
-<p>Lorsque des grands nombres ou de grandes dates sont formatés, il est préférable de créer un objet {{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}} et d'utiliser la fonction fournie par sa propriété {{jsxref("DateTimeFormat.prototype.format", "format")}}.</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES3')}}</td>
-   <td>{{Spec2('ES3')}}</td>
-   <td>Définition initiale. Implémentée avec JavaScript 1.0.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', 'sec-15.9.5.6', 'Date.prototype.toLocaleDateString')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-date.prototype.tolocaledatestring', 'Date.prototype.toLocaleDateString')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-date.prototype.tolocaledatestring', 'Date.prototype.toLocaleDateString')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES Int 1.0', '#sec-13.3.2', 'Date.prototype.toLocaleDateString')}}</td>
-   <td>{{Spec2('ES Int 1.0')}}</td>
-   <td>Définition des arguments <code>locales</code> et <code>options</code>.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES Int 2.0', '#sec-13.3.2', 'Date.prototype.toLocaleDateString')}}</td>
-   <td>{{Spec2('ES Int 2.0')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES Int Draft', '#sec-Date.prototype.toLocaleDateString', 'Date.prototype.toLocaleDateString')}}</td>
-   <td>{{Spec2('ES Int Draft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Date.toLocaleDateString")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}}</li>
- <li>{{jsxref("Date.prototype.toLocaleString()")}}</li>
- <li>{{jsxref("Date.prototype.toLocaleTimeString()")}}</li>
- <li>{{jsxref("Date.prototype.toString()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/date/tolocaledatestring/index.md b/files/fr/web/javascript/reference/global_objects/date/tolocaledatestring/index.md
new file mode 100644
index 0000000000..3d0c471682
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/date/tolocaledatestring/index.md
@@ -0,0 +1,151 @@
+---
+title: Date.prototype.toLocaleDateString()
+slug: Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString
+tags:
+  - Date
+  - Internationalisation
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - i18n
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString
+original_slug: Web/JavaScript/Reference/Objets_globaux/Date/toLocaleDateString
+---
+{{JSRef}}
+
+La méthode **`toLocaleDateString()`** renvoie une chaine de caractères correspondant à la date (le fragment de l'objet qui correspond à la date : jour, mois, année) exprimée selon une locale. Les arguments `locales` et `options` permettent aux applications de définir le langage utilisé pour les conventions de format et permettent de personnaliser le comportement de la fonction. Les anciennes implémentations ignorent ces arguments, la locale utilisée et le format de la chaine dépendent uniquement de l'implémentation.
+
+{{EmbedInteractiveExample("pages/js/date-tolocaledatestring.html")}}
+
+## Syntaxe
+
+    dateObj.toLocaleDateString([locales [, options]])
+
+### Paramètres
+
+Voir le tableau de [compatibilité des navigateurs](#compat) afin de déterminer quels navigateurs respectent les arguments `locales` et `options` ainsi que l'exemple [Vérifier le support des arguments locales et options](#check) qui permet de détecter cette fonctionnalité.
+
+{{page('fr/docs/JavaScript/Reference/Objets_globaux/DateTimeFormat','Paramètres')}}
+
+La valeur par défaut de chacun des composants de la date vaut {{jsxref("undefined")}}, si les propriétés `weekday`, `year`, `month`, `day` sont toutes `undefined`, on suppose alors que `year`, `month`, et `day` sont « numériques ».
+
+### Valeur de retour
+
+Une chaîne de caractères qui représente le jour de la date indiquée selon des options de locales.
+
+## Exemples
+
+### Utiliser `toLocaleDateString()`
+
+Voici un usage simple qui ne définit pas de locale : une chaine de caractères dans une locale et avec des options par défaut est renvoyée.
+
+```js
+var date = new Date(Date.UTC(2012, 11, 12, 3, 0, 0));
+
+// toLocaleDateString() sans argument, on utilise donc
+// les valeurs par défaut (de l'implémentation)
+// pour la locale, et le fuseau horaire
+date.toLocaleDateString();
+// → "12/12/2012" si exécuté dans une locale fr et le fuseau horaire CEST
+```
+
+### Vérifier le support des arguments `locales` et `options`
+
+Les arguments `locales` et `options` ne sont pas encore supportés par tous les navigateurs. Afin de vérifier si l'implementation utilisée les supporte, vous pouvez utiliser le pré-requis suivant : les locales incorrectes sont rejetées avec une exception` RangeError` :
+
+```js
+function toLocaleDateStringSupportsLocales() {
+    try {
+        new Date().toLocaleDateString("i");
+    } catch (e) {
+        return e​.name === "RangeError";
+    }
+    return false;
+}
+```
+
+### Utiliser l'argument `locales`
+
+Cet exemple montre quelques variations dues aux formats de dates localisés. Afin d'obtenir le langage utilisé au sein de l'interface utilisateur de votre application, vérifiez de bien fournir ce langage (et éventuellement des locales de recours) en utilisant l'argument `locales` :
+
+```js
+var date = new Date(Date.UTC(2012, 11, 20, 3, 0, 0));
+
+// les formats qui suivent se basent sur le
+// fuseau horaire CEST
+
+// l'anglais américain utilise l'ordre mois-jour-année
+alert(date.toLocaleDateString("en-US"));
+// → "12/20/2012"
+
+// l'anglais britannique utilise l'ordre jour-mois-année
+alert(date.toLocaleDateString("en-GB"));
+// → "20/12/2012"
+
+// le coréen utilise l'ordre année-mois-jour
+alert(date.toLocaleDateString("ko-KR"));
+// → "2012. 12. 20."
+
+// l'arabe, dans la plupart des pays arabophones, utilise les chiffres arabes
+alert(date.toLocaleDateString("ar-EG"));
+// → "٢٠‏/١٢‏/٢٠١٢"
+
+// en ce qui concerne le japonais, les applications peuvent
+// souhaiter utiliser le calendrier japonais
+// pour lequel 2012 était l'année 24 de l'ère Heisei
+alert(date.toLocaleDateString("ja-JP-u-ca-japanese"));
+// → "24/12/20"
+
+// quand un langage non support est demandé (ex : le balinais)
+// il est possible de fournir un langage de recours (ici l'indonésien)
+alert(date.toLocaleDateString(["ban", "id"]));
+// → "20/12/2012"
+```
+
+### Utiliser l'argument `options`
+
+Les résultats fournis par `toLocaleDateString()` peuvent être personnalisés grâce à l'argument `options` :
+
+```js
+var date = new Date(Date.UTC(2012, 11, 20, 3, 0, 0));
+
+// fournir le jour de la semaine avec une date longe
+var options = {weekday: "long", year: "numeric", month: "long", day: "numeric"};
+alert(date.toLocaleDateString("de-DE", options));
+// → "Donnerstag, 20. Dezember 2012"
+
+// une application peut vouloir utiliser
+// UTC et l'afficher
+options.timeZone = "UTC";
+options.timeZoneName = "short";
+alert(date.toLocaleDateString("en-US", options));
+// → "Thursday, December 20, 2012, GMT"
+```
+
+## Performance
+
+Lorsque des grands nombres ou de grandes dates sont formatés, il est préférable de créer un objet {{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}} et d'utiliser la fonction fournie par sa propriété {{jsxref("DateTimeFormat.prototype.format", "format")}}.
+
+## Spécifications
+
+| Spécification                                                                                                                                    | État                             | Commentaires                                          |
+| ------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ----------------------------------------------------- |
+| {{SpecName('ES3')}}                                                                                                                         | {{Spec2('ES3')}}             | Définition initiale. Implémentée avec JavaScript 1.0. |
+| {{SpecName('ES5.1', 'sec-15.9.5.6', 'Date.prototype.toLocaleDateString')}}                                             | {{Spec2('ES5.1')}}         |                                                       |
+| {{SpecName('ES6', '#sec-date.prototype.tolocaledatestring', 'Date.prototype.toLocaleDateString')}}             | {{Spec2('ES6')}}             |                                                       |
+| {{SpecName('ESDraft', '#sec-date.prototype.tolocaledatestring', 'Date.prototype.toLocaleDateString')}}         | {{Spec2('ESDraft')}}     |                                                       |
+| {{SpecName('ES Int 1.0', '#sec-13.3.2', 'Date.prototype.toLocaleDateString')}}                                         | {{Spec2('ES Int 1.0')}} | Définition des arguments `locales` et `options`.      |
+| {{SpecName('ES Int 2.0', '#sec-13.3.2', 'Date.prototype.toLocaleDateString')}}                                         | {{Spec2('ES Int 2.0')}} |                                                       |
+| {{SpecName('ES Int Draft', '#sec-Date.prototype.toLocaleDateString', 'Date.prototype.toLocaleDateString')}} | {{Spec2('ES Int Draft')}} |                                                       |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Date.toLocaleDateString")}}
+
+## Voir aussi
+
+- {{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}}
+- {{jsxref("Date.prototype.toLocaleString()")}}
+- {{jsxref("Date.prototype.toLocaleTimeString()")}}
+- {{jsxref("Date.prototype.toString()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/date/tolocalestring/index.html b/files/fr/web/javascript/reference/global_objects/date/tolocalestring/index.html
deleted file mode 100644
index 8eebb47913..0000000000
--- a/files/fr/web/javascript/reference/global_objects/date/tolocalestring/index.html
+++ /dev/null
@@ -1,201 +0,0 @@
----
-title: Date.prototype.toLocaleString()
-slug: Web/JavaScript/Reference/Global_Objects/Date/toLocaleString
-tags:
-  - Date
-  - Internationalisation
-  - JavaScript
-  - Méthode
-  - Prototype
-  - Reference
-  - i18n
-translation_of: Web/JavaScript/Reference/Global_Objects/Date/toLocaleString
-original_slug: Web/JavaScript/Reference/Objets_globaux/Date/toLocaleString
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <code><strong>toLocaleString()</strong></code> renvoie une chaine de caractères représentant la date selon une locale. Les arguments <code>locales</code> et <code>options</code> permettent aux applications de définir le langage à utiliser pour les conventions de format et permettent de personnaliser le comportement de la fonction. Les anciennes implémentations ignorent ces arguments, la locale utilisée et le format de la chaine dépendent uniquement de l'implémentation.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/date-tolocalestring.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>dateObj.toLocaleString([locales [, options]])</var></pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<p>Voir le tableau de <a href="#compat" title="#Compatibilit.C3.A9_des_navigateurs">compatibilité des navigateurs</a> afin de déterminer quels navigateurs respectent les arguments <code>locales</code> et <code>options</code> ainsi que l'exemple <a href="#check">Vérifier le support des arguments <code>locales</code> et <code>options</code></a> qui permet de détecter cette fonctionnalité.</p>
-
-<p>{{page('fr/docs/Web/JavaScript/Reference/Objets_globaux/DateTimeFormat','Paramètres')}}</p>
-
-<p>La valeur par défaut de chacun des composants de la date-heure vaut {{jsxref("undefined")}}, mais si les propriétés <code>weekday</code>, <code>year</code>, <code>month</code>, <code>day</code>, <code>hour</code>, <code>minute</code>, <code>second</code> sont toutes {{jsxref("undefined")}},  alors  <code>weekday</code>, <code>year</code>, <code>month</code>, <code>day</code>, <code>hour</code>, <code>minute</code> et <code>second</code> sont supposés être "numeric".</p>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Une chaîne de caractères représentant la date indiquée selon des conventions de locales spécifiques.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Utiliser_toLocaleString()">Utiliser <code>toLocaleString()</code></h3>
-
-<p>Voici un usage simple qui ne définit pas de locale : une chaine de caractères dans une locale et avec des options par défaut est renvoyée.</p>
-
-<pre class="brush:js">var date = new Date(Date.UTC(2014, 11, 21, 3, 0, 0));
-
-// toLocaleString() sans argument, on utilise donc
-// les valeurs par défaut (de l'implémentation)
-// pour la locale, et le fuseau horaire
-date.toLocaleString();
-// → "21/12/2014 04:00:00" si exécuté dans une locale fr et le fuseau horaire CEST</pre>
-
-<h3 id="Vérifier_le_support_des_arguments_locales_et_options">Vérifier le support des arguments <code>locales</code> et <code>options</code></h3>
-
-<p>Les arguments <code>locales</code> et <code>options</code> ne sont pas encore supportés par tous les navigateurs. Afin de vérifier si l'implementation utilisée les supporte, vous pouvez utiliser le pré-requis suivant : les locales incorrectes sont rejetées avec une exception {{jsxref("RangeError")}} :</p>
-
-<pre class="brush: js">function toLocaleStringSupportsLocales() {
-    try {
-        new Date().toLocaleString("i");
-    } catch (e) {
-        return e​ instanceof RangeError;
-    }
-    return false;
-}
-</pre>
-
-<h3 id="Utiliser_locales">Utiliser <code>locales</code></h3>
-
-<p>Cet exemple montre quelques variations dues aux formats de dates localisés. Afin d'obtenir le langage utilisé au sein de l'interface utilisateur de votre application, vérifiez de bien fournir ce langage (et éventuellement des locales de recours) en utilisant l'argument <code>locales</code> :</p>
-
-<pre class="brush: js">var date = new Date(Date.UTC(2012, 11, 20, 3, 0, 0));
-
-// les formats qui suivent se basent sur le
-// fuseau horaire CEST
-
-l'anglais américain utilise l'ordre mois-jour-année
-console.log(date.toLocaleString("en-US"));
-// → "12/20/2012, 4:00:00 AM"
-
-// l'anglais britannique utilise l'ordre jour-mois-année
-console.log(date.toLocaleString("en-GB"));
-// → "20/12/2012 04:00:00"
-
-// le coréen utilise l'ordre année-mois-jour
-console.log(date.toLocaleString("ko-KR"));
-// → "2012. 12. 20. 오전 4:00:00"
-
-// l'arabe, dans la plupart des pays arabophones, utilise les chiffres arabes
-console.log(date.toLocaleString("ar-EG"));
-// → "٢٠‏/١٢‏/٢٠١٢ ٤:٠٠:٠٠ ص"
-
-// en ce qui concerne le japonais, les applications peuvent
-// souhaiter utiliser le calendrier japonais
-// pour lequel 2012 était l'année 24 de l'ère Heisei
-console.log(date.toLocaleString("ja-JP-u-ca-japanese"));
-// → "24/12/20 4:00:00"
-
-// quand un langage non support est demandé (ex : le balinais)
-// il est possible de fournir un langage de recours (ici l'indonésien)
-console.log(date.toLocaleString(["ban", "id"]));
-// → "20/12/2012 04.00.00"
-</pre>
-
-<h3 id="Utiliser_options">Utiliser <code>options</code></h3>
-
-<p>Les résultats fournis par <code>toLocaleString()</code> peuvent être personnalisés grâce à l'argument <code>options</code> :</p>
-
-<pre class="brush: js">var date = new Date(Date.UTC(2012, 11, 20, 3, 0, 0));
-
-// obtenir le jour de la semaine avec une date longue
-var options = {weekday: "long", year: "numeric", month: "long", day: "numeric"};
-console.log(date.toLocaleString("de-DE", options));
-// → "Donnerstag, 20. Dezember 2012"
-
-// une application peut vouloir utiliser UTC et le rendre visible
-options.timeZone = "UTC";
-options.timeZoneName = "short";
-console.log(date.toLocaleString("en-US", options));
-// → "Thursday, December 20, 2012, GMT"
-
-// parfois, même les USA ont besoin d'avoir une heure sur 24h
-console.log(date.toLocaleString("en-US", {hour12: false}));
-// → "12/19/2012, 19:00:00"
-</pre>
-
-<h3 id="Comparaison_des_dates_formatées_et_des_valeurs_statiques">Comparaison des dates formatées et des valeurs statiques</h3>
-
-<p>La plupart du temps, le format renvoyé par <code>toLocaleString()</code> est cohérent. Toutefois, cela peut évoluer à l'avenir et n'est pas garanti pour l'ensemble des langues (de telles variations sont souhaitables et permises par la spécification). Ainsi, IE et Edge ajoutent des caractères de contrôle bidirectionnels autour des dates afin que le texte produit ait une directionalité cohérente avec le texte avec lequel elles seront concaténées.</p>
-
-<p>Aussi, mieux vaut ne pas comparer un résultat fourni par <code>format()</code> avec une valeur statique :</p>
-
-<pre class="brush: js; example-bad">"1.1.2019, 01:00:00" === new Date("2019-01-01T00:00:00.000000Z").toLocaleString();
-// true pour Firefox et les autres
-// false pour IE et Edge
-</pre>
-
-<div class="blockIndicator note">
-<p><strong>Note :</strong> Voir aussi ce fil <a href="https://stackoverflow.com/questions/25574963/ies-tolocalestring-has-strange-characters-in-results">StackOverflow</a> pour plus de détails et d'exemples.</p>
-</div>
-
-<h2 id="Performance">Performance</h2>
-
-<p>Quand vous formatez d'importants volumes de dates, il est préférable de créer un objet {{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}} et d'utiliser la fonction fournie via la propriété {{jsxref("DateTimeFormat.prototype.format", "format")}}.</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES1')}}</td>
-   <td>{{Spec2('ES1')}}</td>
-   <td>Définition initiale. Implémentée avec JavaScript 1.0.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-15.9.5.5', 'Date.prototype.toLocaleString')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-date.prototype.tolocalestring', 'Date.prototype.toLocaleString')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-date.prototype.tolocalestring', 'Date.prototype.toLocaleString')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES Int 1.0', '#sec-13.3.1', 'Date.prototype.toLocaleString')}}</td>
-   <td>{{Spec2('ES Int 1.0')}}</td>
-   <td>Définition des arguments <code>locales</code> et <code>options</code>.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES Int 2.0', '#sec-13.3.1', 'Date.prototype.toLocaleString')}}</td>
-   <td>{{Spec2('ES Int 2.0')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES Int Draft', '#sec-Date.prototype.toLocaleString', 'Date.prototype.toLocaleString')}}</td>
-   <td>{{Spec2('ES Int Draft')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Date.toLocaleString")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}}</li>
- <li>{{jsxref("Date.prototype.toLocaleDateString()")}}</li>
- <li>{{jsxref("Date.prototype.toLocaleTimeString()")}}</li>
- <li>{{jsxref("Date.prototype.toString()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/date/tolocalestring/index.md b/files/fr/web/javascript/reference/global_objects/date/tolocalestring/index.md
new file mode 100644
index 0000000000..22c2f30587
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/date/tolocalestring/index.md
@@ -0,0 +1,168 @@
+---
+title: Date.prototype.toLocaleString()
+slug: Web/JavaScript/Reference/Global_Objects/Date/toLocaleString
+tags:
+  - Date
+  - Internationalisation
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - i18n
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/toLocaleString
+original_slug: Web/JavaScript/Reference/Objets_globaux/Date/toLocaleString
+---
+{{JSRef}}
+
+La méthode **`toLocaleString()`** renvoie une chaine de caractères représentant la date selon une locale. Les arguments `locales` et `options` permettent aux applications de définir le langage à utiliser pour les conventions de format et permettent de personnaliser le comportement de la fonction. Les anciennes implémentations ignorent ces arguments, la locale utilisée et le format de la chaine dépendent uniquement de l'implémentation.
+
+{{EmbedInteractiveExample("pages/js/date-tolocalestring.html")}}
+
+## Syntaxe
+
+    dateObj.toLocaleString([locales [, options]])
+
+### Paramètres
+
+Voir le tableau de [compatibilité des navigateurs](#compat "#Compatibilit.C3.A9_des_navigateurs") afin de déterminer quels navigateurs respectent les arguments `locales` et `options` ainsi que l'exemple [Vérifier le support des arguments `locales` et `options`](#check) qui permet de détecter cette fonctionnalité.
+
+{{page('fr/docs/Web/JavaScript/Reference/Objets_globaux/DateTimeFormat','Paramètres')}}
+
+La valeur par défaut de chacun des composants de la date-heure vaut {{jsxref("undefined")}}, mais si les propriétés `weekday`, `year`, `month`, `day`, `hour`, `minute`, `second` sont toutes {{jsxref("undefined")}},  alors  `weekday`, `year`, `month`, `day`, `hour`, `minute` et `second` sont supposés être "numeric".
+
+### Valeur de retour
+
+Une chaîne de caractères représentant la date indiquée selon des conventions de locales spécifiques.
+
+## Exemples
+
+### Utiliser `toLocaleString()`
+
+Voici un usage simple qui ne définit pas de locale : une chaine de caractères dans une locale et avec des options par défaut est renvoyée.
+
+```js
+var date = new Date(Date.UTC(2014, 11, 21, 3, 0, 0));
+
+// toLocaleString() sans argument, on utilise donc
+// les valeurs par défaut (de l'implémentation)
+// pour la locale, et le fuseau horaire
+date.toLocaleString();
+// → "21/12/2014 04:00:00" si exécuté dans une locale fr et le fuseau horaire CEST
+```
+
+### Vérifier le support des arguments `locales` et `options`
+
+Les arguments `locales` et `options` ne sont pas encore supportés par tous les navigateurs. Afin de vérifier si l'implementation utilisée les supporte, vous pouvez utiliser le pré-requis suivant : les locales incorrectes sont rejetées avec une exception {{jsxref("RangeError")}} :
+
+```js
+function toLocaleStringSupportsLocales() {
+    try {
+        new Date().toLocaleString("i");
+    } catch (e) {
+        return e​ instanceof RangeError;
+    }
+    return false;
+}
+```
+
+### Utiliser `locales`
+
+Cet exemple montre quelques variations dues aux formats de dates localisés. Afin d'obtenir le langage utilisé au sein de l'interface utilisateur de votre application, vérifiez de bien fournir ce langage (et éventuellement des locales de recours) en utilisant l'argument `locales` :
+
+```js
+var date = new Date(Date.UTC(2012, 11, 20, 3, 0, 0));
+
+// les formats qui suivent se basent sur le
+// fuseau horaire CEST
+
+l'anglais américain utilise l'ordre mois-jour-année
+console.log(date.toLocaleString("en-US"));
+// → "12/20/2012, 4:00:00 AM"
+
+// l'anglais britannique utilise l'ordre jour-mois-année
+console.log(date.toLocaleString("en-GB"));
+// → "20/12/2012 04:00:00"
+
+// le coréen utilise l'ordre année-mois-jour
+console.log(date.toLocaleString("ko-KR"));
+// → "2012. 12. 20. 오전 4:00:00"
+
+// l'arabe, dans la plupart des pays arabophones, utilise les chiffres arabes
+console.log(date.toLocaleString("ar-EG"));
+// → "٢٠‏/١٢‏/٢٠١٢ ٤:٠٠:٠٠ ص"
+
+// en ce qui concerne le japonais, les applications peuvent
+// souhaiter utiliser le calendrier japonais
+// pour lequel 2012 était l'année 24 de l'ère Heisei
+console.log(date.toLocaleString("ja-JP-u-ca-japanese"));
+// → "24/12/20 4:00:00"
+
+// quand un langage non support est demandé (ex : le balinais)
+// il est possible de fournir un langage de recours (ici l'indonésien)
+console.log(date.toLocaleString(["ban", "id"]));
+// → "20/12/2012 04.00.00"
+```
+
+### Utiliser `options`
+
+Les résultats fournis par `toLocaleString()` peuvent être personnalisés grâce à l'argument `options` :
+
+```js
+var date = new Date(Date.UTC(2012, 11, 20, 3, 0, 0));
+
+// obtenir le jour de la semaine avec une date longue
+var options = {weekday: "long", year: "numeric", month: "long", day: "numeric"};
+console.log(date.toLocaleString("de-DE", options));
+// → "Donnerstag, 20. Dezember 2012"
+
+// une application peut vouloir utiliser UTC et le rendre visible
+options.timeZone = "UTC";
+options.timeZoneName = "short";
+console.log(date.toLocaleString("en-US", options));
+// → "Thursday, December 20, 2012, GMT"
+
+// parfois, même les USA ont besoin d'avoir une heure sur 24h
+console.log(date.toLocaleString("en-US", {hour12: false}));
+// → "12/19/2012, 19:00:00"
+```
+
+### Comparaison des dates formatées et des valeurs statiques
+
+La plupart du temps, le format renvoyé par `toLocaleString()` est cohérent. Toutefois, cela peut évoluer à l'avenir et n'est pas garanti pour l'ensemble des langues (de telles variations sont souhaitables et permises par la spécification). Ainsi, IE et Edge ajoutent des caractères de contrôle bidirectionnels autour des dates afin que le texte produit ait une directionalité cohérente avec le texte avec lequel elles seront concaténées.
+
+Aussi, mieux vaut ne pas comparer un résultat fourni par `format()` avec une valeur statique :
+
+```js example-bad
+"1.1.2019, 01:00:00" === new Date("2019-01-01T00:00:00.000000Z").toLocaleString();
+// true pour Firefox et les autres
+// false pour IE et Edge
+```
+
+> **Note :** Voir aussi ce fil [StackOverflow](https://stackoverflow.com/questions/25574963/ies-tolocalestring-has-strange-characters-in-results) pour plus de détails et d'exemples.
+
+## Performance
+
+Quand vous formatez d'importants volumes de dates, il est préférable de créer un objet {{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}} et d'utiliser la fonction fournie via la propriété {{jsxref("DateTimeFormat.prototype.format", "format")}}.
+
+## Spécifications
+
+| Spécification                                                                                                                        | État                             | Commentaires                                          |
+| ------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ----------------------------------------------------- |
+| {{SpecName('ES1')}}                                                                                                             | {{Spec2('ES1')}}             | Définition initiale. Implémentée avec JavaScript 1.0. |
+| {{SpecName('ES5.1', '#sec-15.9.5.5', 'Date.prototype.toLocaleString')}}                                     | {{Spec2('ES5.1')}}         |                                                       |
+| {{SpecName('ES6', '#sec-date.prototype.tolocalestring', 'Date.prototype.toLocaleString')}}             | {{Spec2('ES6')}}             |                                                       |
+| {{SpecName('ESDraft', '#sec-date.prototype.tolocalestring', 'Date.prototype.toLocaleString')}}         | {{Spec2('ESDraft')}}     |                                                       |
+| {{SpecName('ES Int 1.0', '#sec-13.3.1', 'Date.prototype.toLocaleString')}}                                 | {{Spec2('ES Int 1.0')}} | Définition des arguments `locales` et `options`.      |
+| {{SpecName('ES Int 2.0', '#sec-13.3.1', 'Date.prototype.toLocaleString')}}                                 | {{Spec2('ES Int 2.0')}} |                                                       |
+| {{SpecName('ES Int Draft', '#sec-Date.prototype.toLocaleString', 'Date.prototype.toLocaleString')}} | {{Spec2('ES Int Draft')}} |                                                       |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Date.toLocaleString")}}
+
+## Voir aussi
+
+- {{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}}
+- {{jsxref("Date.prototype.toLocaleDateString()")}}
+- {{jsxref("Date.prototype.toLocaleTimeString()")}}
+- {{jsxref("Date.prototype.toString()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/date/tolocaletimestring/index.html b/files/fr/web/javascript/reference/global_objects/date/tolocaletimestring/index.html
deleted file mode 100644
index 28764c098c..0000000000
--- a/files/fr/web/javascript/reference/global_objects/date/tolocaletimestring/index.html
+++ /dev/null
@@ -1,175 +0,0 @@
----
-title: Date.prototype.toLocaleTimeString()
-slug: Web/JavaScript/Reference/Global_Objects/Date/toLocaleTimeString
-tags:
-  - Date
-  - Internationalisation
-  - JavaScript
-  - Méthode
-  - Prototype
-  - Reference
-  - i18n
-translation_of: Web/JavaScript/Reference/Global_Objects/Date/toLocaleTimeString
-original_slug: Web/JavaScript/Reference/Objets_globaux/Date/toLocaleTimeString
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <code><strong>toLocaleTimeString()</strong></code> renvoie une chaine de caractères correspondant à l'heure dans la date, exprimée selon une locale. Les arguments <code>locales</code> et <code>options</code> permettent aux applications de définir le langage utilisé pour les conventions de format et permettent de personnaliser le comportement de la fonction. Les anciennes implémentations ignorent ces arguments, la locale utilisée et le format de la chaine dépendent uniquement de l'implémentation.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/date-tolocaletimestring.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>dateObj</var>.toLocaleTimeString([locales [, options]])</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<p>Voir le tableau de <a href="#compat" title="#Compatibilit.C3.A9_des_navigateurs">compatibilité des navigateurs</a> afin de déterminer quels navigateurs respectent les arguments <code>locales</code> et <code>options</code> ainsi que l'exemple <a href="#check">Vérifier le support des arguments <code>locales</code> et <code>options</code></a> qui permet de détecter cette fonctionnalité.</p>
-
-<p>{{page('fr/docs/Web/JavaScript/Reference/Objets_globaux/DateTimeFormat','Param.C3.A8tres')}}</p>
-
-<p>La valeur par défaut de chacun des composants de la date vaut {{jsxref("undefined")}}, si les propriétés <code>hour</code>, <code>minute</code>, <code>second</code> sont toutes <code>undefined</code>, on suppose alors que <code>hour</code>, <code>minute</code>, et <code>second</code> sont "numeric".</p>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Une chaîne de caractères qui représente l'heure de la date indiquée selon des conventions de locales spécifiques.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Utiliser_toLocaleTimeString()">Utiliser <code>toLocaleTimeString()</code></h3>
-
-<p>Voici un usage simple qui ne définit pas de locale : une chaine de caractères dans une locale et avec des options par défaut est renvoyée.</p>
-
-<pre class="brush:js">var date = new Date(Date.UTC(2012, 11, 12, 3, 0, 0));
-
-// toLocaleTimeString() sans argument, on utilise donc
-// les valeurs par défaut (de l'implémentation)
-// pour la locale, et le fuseau horaire
-console.log(date.toLocaleTimeString());
-// → "04:00:00" si exécuté dans une locale fr et le fuseau horaire CEST</pre>
-
-<h3 id="Vérifier_le_support_des_arguments_locales_et_options">Vérifier le support des arguments <code>locales</code> et <code>options</code></h3>
-
-<p>Les arguments <code>locales</code> et <code>options</code> ne sont pas encore supportés par tous les navigateurs. Afin de vérifier si l'implementation utilisée les supporte, vous pouvez utiliser le pré-requis suivant : les locales incorrectes sont rejetées avec une exception<code> RangeError</code> :</p>
-
-<pre class="brush: js">function toLocaleTimeStringSupportsLocales() {
-    try {
-        new Date().toLocaleTimeString("i");
-    } catch (e) {
-        return e​.name === "RangeError";
-    }
-    return false;
-}
-</pre>
-
-<h3 id="Utiliser_locales">Utiliser <code>locales</code></h3>
-
-<p>Cet exemple montre quelques variations dues aux formats de dates localisés. Afin d'obtenir le langage utilisé au sein de l'interface utilisateur de votre application, vérifiez de bien fournir ce langage (et éventuellement des locales de recours) en utilisant l'argument <code>locales</code> :</p>
-
-<pre class="brush: js">var date = new Date(Date.UTC(2012, 11, 20, 3, 0, 0));
-
-// les formats qui suivent se basent sur le
-// fuseau horaire CEST
-
-// l'anglais américain utilise une heure sur 12h avec AM/PM
-console.log(date.toLocaleTimeString("en-US"));
-// → "4:00:00 AM"
-
-// l'anglais britanique utilise une heure sur 24h
-console.log(date.toLocaleTimeString("en-GB"));
-// → "04:00:00"
-
-// le coréen  utilise une heure sur 12h avec AM/PM
-console.log(date.toLocaleTimeString("ko-KR"));
-// → "오전 4:00:00"
-
-/ l'arabe, dans la plupart des pays arabophones, utilise les chiffres arabes
-console.log(date.toLocaleTimeString("ar-EG"));
-// → "٤:٠٠:٠٠ ص"
-
-// quand un langage non support est demandé (ex : le balinais)
-// il est possible de fournir un langage de recours (ici l'indonésien)
-console.log(date.toLocaleTimeString(["ban", "id"]));
-// → "4.00.00"
-</pre>
-
-<h3 id="Utiliser_options">Utiliser <code>options</code></h3>
-
-<p>Les résultats fournis par <code>toLocaleTimeString()</code> peuvent être personnalisés grâce à l'argument <code>options</code> :</p>
-
-<pre class="brush: js">var date = new Date(Date.UTC(2012, 11, 20, 3, 0, 0));
-
-// une application peut vouloir utiliser UTC et le montrer
-var options = {timeZone: "UTC", timeZoneName: "short"};
-console.log(date.toLocaleTimeString("en-US", options));
-// → "3:00:00 AM GMT"
-
-// parfois, même les USA ont besoin du format sur 24h
-console.log(date.toLocaleTimeString("en-US", {hour12: false}));
-// → "19:00:00"
-</pre>
-
-<h2 id="Performance">Performance</h2>
-
-<p>Pour formater de nombreuses dates, il est préférable de créer un objet {{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}} et d'utiliser la fonction fournie par sa propriété {{jsxref("DateTimeFormat.prototype.format", "format")}}.</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES3')}}</td>
-   <td>{{Spec2('ES3')}}</td>
-   <td>Définition initiale. Implémentée avec JavaScript 1.0.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-15.9.5.7', 'Date.prototype.toLocaleTimeString')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-date.prototype.tolocalestring', 'Date.prototype.toLocaleTimeString')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-date.prototype.tolocalestring', 'Date.prototype.toLocaleTimeString')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES Int 1.0', '#sec-13.3.3', 'Date.prototype.toLocaleTimeString')}}</td>
-   <td>{{Spec2('ES Int 1.0')}}</td>
-   <td>Définition des arguments <code>locales</code> et <code>options</code>.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES Int 2.0', '#sec-13.3.3', 'Date.prototype.toLocaleTimeString')}}</td>
-   <td>{{Spec2('ES Int 2.0')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES Int Draft', '#sec-Date.prototype.toLocaleTimeString', 'Date.prototype.toLocaleTimeString')}}</td>
-   <td>{{Spec2('ES Int Draft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Date.toLocaleTimeString")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}}</li>
- <li>{{jsxref("Date.prototype.toLocaleDateString()")}}</li>
- <li>{{jsxref("Date.prototype.toLocaleString()")}}</li>
- <li>{{jsxref("Date.prototype.toTimeString()")}}</li>
- <li>{{jsxref("Date.prototype.toString()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/date/tolocaletimestring/index.md b/files/fr/web/javascript/reference/global_objects/date/tolocaletimestring/index.md
new file mode 100644
index 0000000000..b6e4af66c9
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/date/tolocaletimestring/index.md
@@ -0,0 +1,143 @@
+---
+title: Date.prototype.toLocaleTimeString()
+slug: Web/JavaScript/Reference/Global_Objects/Date/toLocaleTimeString
+tags:
+  - Date
+  - Internationalisation
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - i18n
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/toLocaleTimeString
+original_slug: Web/JavaScript/Reference/Objets_globaux/Date/toLocaleTimeString
+---
+{{JSRef}}
+
+La méthode **`toLocaleTimeString()`** renvoie une chaine de caractères correspondant à l'heure dans la date, exprimée selon une locale. Les arguments `locales` et `options` permettent aux applications de définir le langage utilisé pour les conventions de format et permettent de personnaliser le comportement de la fonction. Les anciennes implémentations ignorent ces arguments, la locale utilisée et le format de la chaine dépendent uniquement de l'implémentation.
+
+{{EmbedInteractiveExample("pages/js/date-tolocaletimestring.html")}}
+
+## Syntaxe
+
+    dateObj.toLocaleTimeString([locales [, options]])
+
+### Paramètres
+
+Voir le tableau de [compatibilité des navigateurs](#compat "#Compatibilit.C3.A9_des_navigateurs") afin de déterminer quels navigateurs respectent les arguments `locales` et `options` ainsi que l'exemple [Vérifier le support des arguments `locales` et `options`](#check) qui permet de détecter cette fonctionnalité.
+
+{{page('fr/docs/Web/JavaScript/Reference/Objets_globaux/DateTimeFormat','Param.C3.A8tres')}}
+
+La valeur par défaut de chacun des composants de la date vaut {{jsxref("undefined")}}, si les propriétés `hour`, `minute`, `second` sont toutes `undefined`, on suppose alors que `hour`, `minute`, et `second` sont "numeric".
+
+### Valeur de retour
+
+Une chaîne de caractères qui représente l'heure de la date indiquée selon des conventions de locales spécifiques.
+
+## Exemples
+
+### Utiliser `toLocaleTimeString()`
+
+Voici un usage simple qui ne définit pas de locale : une chaine de caractères dans une locale et avec des options par défaut est renvoyée.
+
+```js
+var date = new Date(Date.UTC(2012, 11, 12, 3, 0, 0));
+
+// toLocaleTimeString() sans argument, on utilise donc
+// les valeurs par défaut (de l'implémentation)
+// pour la locale, et le fuseau horaire
+console.log(date.toLocaleTimeString());
+// → "04:00:00" si exécuté dans une locale fr et le fuseau horaire CEST
+```
+
+### Vérifier le support des arguments `locales` et `options`
+
+Les arguments `locales` et `options` ne sont pas encore supportés par tous les navigateurs. Afin de vérifier si l'implementation utilisée les supporte, vous pouvez utiliser le pré-requis suivant : les locales incorrectes sont rejetées avec une exception` RangeError` :
+
+```js
+function toLocaleTimeStringSupportsLocales() {
+    try {
+        new Date().toLocaleTimeString("i");
+    } catch (e) {
+        return e​.name === "RangeError";
+    }
+    return false;
+}
+```
+
+### Utiliser `locales`
+
+Cet exemple montre quelques variations dues aux formats de dates localisés. Afin d'obtenir le langage utilisé au sein de l'interface utilisateur de votre application, vérifiez de bien fournir ce langage (et éventuellement des locales de recours) en utilisant l'argument `locales` :
+
+```js
+var date = new Date(Date.UTC(2012, 11, 20, 3, 0, 0));
+
+// les formats qui suivent se basent sur le
+// fuseau horaire CEST
+
+// l'anglais américain utilise une heure sur 12h avec AM/PM
+console.log(date.toLocaleTimeString("en-US"));
+// → "4:00:00 AM"
+
+// l'anglais britanique utilise une heure sur 24h
+console.log(date.toLocaleTimeString("en-GB"));
+// → "04:00:00"
+
+// le coréen  utilise une heure sur 12h avec AM/PM
+console.log(date.toLocaleTimeString("ko-KR"));
+// → "오전 4:00:00"
+
+/ l'arabe, dans la plupart des pays arabophones, utilise les chiffres arabes
+console.log(date.toLocaleTimeString("ar-EG"));
+// → "٤:٠٠:٠٠ ص"
+
+// quand un langage non support est demandé (ex : le balinais)
+// il est possible de fournir un langage de recours (ici l'indonésien)
+console.log(date.toLocaleTimeString(["ban", "id"]));
+// → "4.00.00"
+```
+
+### Utiliser `options`
+
+Les résultats fournis par `toLocaleTimeString()` peuvent être personnalisés grâce à l'argument `options` :
+
+```js
+var date = new Date(Date.UTC(2012, 11, 20, 3, 0, 0));
+
+// une application peut vouloir utiliser UTC et le montrer
+var options = {timeZone: "UTC", timeZoneName: "short"};
+console.log(date.toLocaleTimeString("en-US", options));
+// → "3:00:00 AM GMT"
+
+// parfois, même les USA ont besoin du format sur 24h
+console.log(date.toLocaleTimeString("en-US", {hour12: false}));
+// → "19:00:00"
+```
+
+## Performance
+
+Pour formater de nombreuses dates, il est préférable de créer un objet {{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}} et d'utiliser la fonction fournie par sa propriété {{jsxref("DateTimeFormat.prototype.format", "format")}}.
+
+## Spécifications
+
+| Spécification                                                                                                                                    | État                             | Commentaires                                          |
+| ------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ----------------------------------------------------- |
+| {{SpecName('ES3')}}                                                                                                                         | {{Spec2('ES3')}}             | Définition initiale. Implémentée avec JavaScript 1.0. |
+| {{SpecName('ES5.1', '#sec-15.9.5.7', 'Date.prototype.toLocaleTimeString')}}                                             | {{Spec2('ES5.1')}}         |                                                       |
+| {{SpecName('ES6', '#sec-date.prototype.tolocalestring', 'Date.prototype.toLocaleTimeString')}}                     | {{Spec2('ES6')}}             |                                                       |
+| {{SpecName('ESDraft', '#sec-date.prototype.tolocalestring', 'Date.prototype.toLocaleTimeString')}}             | {{Spec2('ESDraft')}}     |                                                       |
+| {{SpecName('ES Int 1.0', '#sec-13.3.3', 'Date.prototype.toLocaleTimeString')}}                                         | {{Spec2('ES Int 1.0')}} | Définition des arguments `locales` et `options`.      |
+| {{SpecName('ES Int 2.0', '#sec-13.3.3', 'Date.prototype.toLocaleTimeString')}}                                         | {{Spec2('ES Int 2.0')}} |                                                       |
+| {{SpecName('ES Int Draft', '#sec-Date.prototype.toLocaleTimeString', 'Date.prototype.toLocaleTimeString')}} | {{Spec2('ES Int Draft')}} |                                                       |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Date.toLocaleTimeString")}}
+
+## Voir aussi
+
+- {{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}}
+- {{jsxref("Date.prototype.toLocaleDateString()")}}
+- {{jsxref("Date.prototype.toLocaleString()")}}
+- {{jsxref("Date.prototype.toTimeString()")}}
+- {{jsxref("Date.prototype.toString()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/date/tosource/index.html b/files/fr/web/javascript/reference/global_objects/date/tosource/index.html
deleted file mode 100644
index 93d004781e..0000000000
--- a/files/fr/web/javascript/reference/global_objects/date/tosource/index.html
+++ /dev/null
@@ -1,56 +0,0 @@
----
-title: Date.prototype.toSource()
-slug: Web/JavaScript/Reference/Global_Objects/Date/toSource
-tags:
-  - Date
-  - JavaScript
-  - Méthode
-  - Prototype
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Date/toSource
-original_slug: Web/JavaScript/Reference/Objets_globaux/Date/toSource
----
-<div>{{JSRef}} {{Non-standard_header}}</div>
-
-<p>La méthode <code><strong>toSource()</strong></code> renvoie une chaîne de caractères représentant le code source de l'objet.</p>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>dateObj</var>.toSource()
-Date.toSource()</pre>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Une chaîne de caractères représentant le code source de l'objet date indiqué.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>La méthode <code>toSource()</code> renvoie les valeur suivantes :</p>
-
-<ul>
- <li>Pour l'objet natif {{jsxref("Date")}}, <code>toSource()</code> renvoie la chaîne de caractères suivante, indiquant que le code source n'est pas disponible :</li>
-</ul>
-
-<pre class="brush: js">function Date() {
-    [native code]
-}</pre>
-
-<ul>
- <li>Pour les instances de {{jsxref("Date")}}, <code>toSource()</code> renvoie une chaîne de caractères représentant le code source.</li>
-</ul>
-
-<p>Cette méthode est habituellement appelée en interne par le moteur JavaScript et non explicitement dans le code d'un script.</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<p>Ne fait partie d'aucune spécification. Implémentée dans JavaScript 1.3.</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Date.toSource")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Object.prototype.toSource()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/date/tosource/index.md b/files/fr/web/javascript/reference/global_objects/date/tosource/index.md
new file mode 100644
index 0000000000..0564beedc8
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/date/tosource/index.md
@@ -0,0 +1,52 @@
+---
+title: Date.prototype.toSource()
+slug: Web/JavaScript/Reference/Global_Objects/Date/toSource
+tags:
+  - Date
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/toSource
+original_slug: Web/JavaScript/Reference/Objets_globaux/Date/toSource
+---
+{{JSRef}} {{Non-standard_header}}
+
+La méthode **`toSource()`** renvoie une chaîne de caractères représentant le code source de l'objet.
+
+## Syntaxe
+
+    dateObj.toSource()
+    Date.toSource()
+
+### Valeur de retour
+
+Une chaîne de caractères représentant le code source de l'objet date indiqué.
+
+## Description
+
+La méthode `toSource()` renvoie les valeur suivantes :
+
+- Pour l'objet natif {{jsxref("Date")}}, `toSource()` renvoie la chaîne de caractères suivante, indiquant que le code source n'est pas disponible :
+
+```js
+function Date() {
+    [native code]
+}
+```
+
+- Pour les instances de {{jsxref("Date")}}, `toSource()` renvoie une chaîne de caractères représentant le code source.
+
+Cette méthode est habituellement appelée en interne par le moteur JavaScript et non explicitement dans le code d'un script.
+
+## Spécifications
+
+Ne fait partie d'aucune spécification. Implémentée dans JavaScript 1.3.
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Date.toSource")}}
+
+## Voir aussi
+
+- {{jsxref("Object.prototype.toSource()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/date/tostring/index.html b/files/fr/web/javascript/reference/global_objects/date/tostring/index.html
deleted file mode 100644
index b548fb5d0c..0000000000
--- a/files/fr/web/javascript/reference/global_objects/date/tostring/index.html
+++ /dev/null
@@ -1,132 +0,0 @@
----
-title: Date.prototype.toString()
-slug: Web/JavaScript/Reference/Global_Objects/Date/toString
-tags:
-  - Date
-  - JavaScript
-  - Méthode
-  - Prototype
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Date/toString
-original_slug: Web/JavaScript/Reference/Objets_globaux/Date/toString
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <code><strong>toString()</strong></code> renvoie une chaîne de caractères représentant l'objet {{jsxref("Date")}}.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/date-tostring.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>dateObj</var>.toString()</pre>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Une chaîne de caractères représentant la date indiquée.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>L'objet {{jsxref("Date")}} remplace la méthode <code>toString()</code> de l'objet {{jsxref("Object")}} ; il n'hérite pas de {{jsxref("Object.prototype.toString()")}}. Pour les objets {{jsxref("Date")}}, la méthode <code>toString()</code> renvoie une représentation textuelle de l'objet.</p>
-
-<p>La méthode <code>toString()</code> renvoie toujours une chaîne de caractères représentant une date en anglais américain. Ce format a été standardisé avec ES2018 et peut être décrit de la façon suivante :</p>
-
-<ul>
- <li>Le jour de la semaine avec les trois premières lettres du jour en anglais (ex. « Sat »)</li>
- <li>Un espace</li>
- <li>Le mois avec les trois premières lettres du mois en anglais (ex. « Sep »)</li>
- <li>Un espace</li>
- <li>La date du jour dans le mois sur deux chiffres (ex. « 01 »)</li>
- <li>Un espace</li>
- <li>L'année sur 4 chiffres (ex. « 2018 »)</li>
- <li>Un espace</li>
- <li>L'heure sur deux chiffres (ex. « 14 »)</li>
- <li>Un deux-points (:)</li>
- <li>Les minutes sur deux chiffres (ex. « 53 »)</li>
- <li>Un deux-points (:)</li>
- <li>Les secondes sur deux chiffres (ex. « 26 »)</li>
- <li>Un espace</li>
- <li>La chaîne de caractères « GMT »</li>
- <li>Le signe du décalage horaire par rapport à GMT :
-  <ul>
-   <li>La chaîne "+" pour les décalages positifs (0 ou plus)</li>
-   <li>La chaîne "-" pour les décalages strictement négatifs</li>
-  </ul>
- </li>
- <li>L'heure de décalage sur deux chiffres</li>
- <li>Les minutes de décalage sur deux chiffres</li>
- <li>Et, éventuellement, le nom du fuseau horaire avec
-  <ul>
-   <li>Un espace</li>
-   <li>Une parenthèse ouvrante (« ( »)</li>
-   <li>Une chaîne de caractères, pouvant varier selon l'implémentation, qui désigne le fuseau horaire. Ce peut être une abréviation ou un nom complet.</li>
-   <li>Une parenthèse fermante (« ) »)</li>
-  </ul>
- </li>
-</ul>
-
-<p>Avant ES2018, le format de la chaîne de caractères renvoyé pouvait varier selon l'implémentation.</p>
-
-<p>JavaScript appelle la méthode <code>toString()</code> automatiquement quand une date doit être representée sous forme d'un texte ou quand une date est référencée lors d'une concatenation de chaînes de caractères.</p>
-
-<p><code>toString()</code> est une méthode générique. Si <code>this</code> n'est pas une instance de {{jsxref("Date")}}, elle renverra "Invalid Date".</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Utiliser_toString()">Utiliser <code>toString()</code></h3>
-
-<p>L'exemple suivant assigne la valeur de <code>toString()</code> de l'objet <code>Date</code> à <code>maVar</code> :</p>
-
-<pre class="brush:js">var x = new Date();
-var maVar = x.toString(); // assigne une valeur à maVar similaire à :
-// Mon Sep 28 1998 14:36:22 GMT-0700 (PDT)
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES1')}}</td>
-   <td>{{Spec2('ES1')}}</td>
-   <td>Définition initiale. Implémentée avec JavaScript 1.0.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-15.9.5.2', 'Date.prototype.toLocaleTimeString')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-date.prototype.tostring', 'Date.prototype.toString')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2018', '#sec-date.prototype.tostring', 'Date.prototype.toString')}}</td>
-   <td>{{Spec2('ES2018')}}</td>
-   <td>Standardisation du format produit par <code>Date.prototype.toString()</code></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-date.prototype.tostring', 'Date.prototype.toString')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Date.toString")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Object.prototype.toString()")}}</li>
- <li>{{jsxref("Date.prototype.toDateString()")}}</li>
- <li>{{jsxref("Date.prototype.toLocaleString()")}}</li>
- <li>{{jsxref("Date.prototype.toTimeString()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/date/tostring/index.md b/files/fr/web/javascript/reference/global_objects/date/tostring/index.md
new file mode 100644
index 0000000000..f25b125d01
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/date/tostring/index.md
@@ -0,0 +1,99 @@
+---
+title: Date.prototype.toString()
+slug: Web/JavaScript/Reference/Global_Objects/Date/toString
+tags:
+  - Date
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/toString
+original_slug: Web/JavaScript/Reference/Objets_globaux/Date/toString
+---
+{{JSRef}}
+
+La méthode **`toString()`** renvoie une chaîne de caractères représentant l'objet {{jsxref("Date")}}.
+
+{{EmbedInteractiveExample("pages/js/date-tostring.html")}}
+
+## Syntaxe
+
+    dateObj.toString()
+
+### Valeur de retour
+
+Une chaîne de caractères représentant la date indiquée.
+
+## Description
+
+L'objet {{jsxref("Date")}} remplace la méthode `toString()` de l'objet {{jsxref("Object")}} ; il n'hérite pas de {{jsxref("Object.prototype.toString()")}}. Pour les objets {{jsxref("Date")}}, la méthode `toString()` renvoie une représentation textuelle de l'objet.
+
+La méthode `toString()` renvoie toujours une chaîne de caractères représentant une date en anglais américain. Ce format a été standardisé avec ES2018 et peut être décrit de la façon suivante :
+
+- Le jour de la semaine avec les trois premières lettres du jour en anglais (ex. « Sat »)
+- Un espace
+- Le mois avec les trois premières lettres du mois en anglais (ex. « Sep »)
+- Un espace
+- La date du jour dans le mois sur deux chiffres (ex. « 01 »)
+- Un espace
+- L'année sur 4 chiffres (ex. « 2018 »)
+- Un espace
+- L'heure sur deux chiffres (ex. « 14 »)
+- Un deux-points (:)
+- Les minutes sur deux chiffres (ex. « 53 »)
+- Un deux-points (:)
+- Les secondes sur deux chiffres (ex. « 26 »)
+- Un espace
+- La chaîne de caractères « GMT »
+- Le signe du décalage horaire par rapport à GMT :
+
+  - La chaîne "+" pour les décalages positifs (0 ou plus)
+  - La chaîne "-" pour les décalages strictement négatifs
+
+- L'heure de décalage sur deux chiffres
+- Les minutes de décalage sur deux chiffres
+- Et, éventuellement, le nom du fuseau horaire avec
+
+  - Un espace
+  - Une parenthèse ouvrante (« ( »)
+  - Une chaîne de caractères, pouvant varier selon l'implémentation, qui désigne le fuseau horaire. Ce peut être une abréviation ou un nom complet.
+  - Une parenthèse fermante (« ) »)
+
+Avant ES2018, le format de la chaîne de caractères renvoyé pouvait varier selon l'implémentation.
+
+JavaScript appelle la méthode `toString()` automatiquement quand une date doit être representée sous forme d'un texte ou quand une date est référencée lors d'une concatenation de chaînes de caractères.
+
+`toString()` est une méthode générique. Si `this` n'est pas une instance de {{jsxref("Date")}}, elle renverra "Invalid Date".
+
+## Exemples
+
+### Utiliser `toString()`
+
+L'exemple suivant assigne la valeur de `toString()` de l'objet `Date` à `maVar` :
+
+```js
+var x = new Date();
+var maVar = x.toString(); // assigne une valeur à maVar similaire à :
+// Mon Sep 28 1998 14:36:22 GMT-0700 (PDT)
+```
+
+## Spécifications
+
+| Spécification                                                                                                | État                         | Commentaires                                                      |
+| ------------------------------------------------------------------------------------------------------------ | ---------------------------- | ----------------------------------------------------------------- |
+| {{SpecName('ES1')}}                                                                                     | {{Spec2('ES1')}}         | Définition initiale. Implémentée avec JavaScript 1.0.             |
+| {{SpecName('ES5.1', '#sec-15.9.5.2', 'Date.prototype.toLocaleTimeString')}}         | {{Spec2('ES5.1')}}     |                                                                   |
+| {{SpecName('ES6', '#sec-date.prototype.tostring', 'Date.prototype.toString')}}     | {{Spec2('ES6')}}         |                                                                   |
+| {{SpecName('ES2018', '#sec-date.prototype.tostring', 'Date.prototype.toString')}} | {{Spec2('ES2018')}}     | Standardisation du format produit par `Date.prototype.toString()` |
+| {{SpecName('ESDraft', '#sec-date.prototype.tostring', 'Date.prototype.toString')}} | {{Spec2('ESDraft')}} |                                                                   |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Date.toString")}}
+
+## Voir aussi
+
+- {{jsxref("Object.prototype.toString()")}}
+- {{jsxref("Date.prototype.toDateString()")}}
+- {{jsxref("Date.prototype.toLocaleString()")}}
+- {{jsxref("Date.prototype.toTimeString()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/date/totimestring/index.html b/files/fr/web/javascript/reference/global_objects/date/totimestring/index.html
deleted file mode 100644
index 8931f46e60..0000000000
--- a/files/fr/web/javascript/reference/global_objects/date/totimestring/index.html
+++ /dev/null
@@ -1,85 +0,0 @@
----
-title: Date.prototype.toTimeString()
-slug: Web/JavaScript/Reference/Global_Objects/Date/toTimeString
-tags:
-  - Date
-  - JavaScript
-  - Méthode
-  - Prototype
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Date/toTimeString
-original_slug: Web/JavaScript/Reference/Objets_globaux/Date/toTimeString
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <code><strong>toTimeString()</strong></code>renvoie la partie « heure » de l'objet <code>Date</code> dans un format lisible par un humain, en anglais américain.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/date-totimestring.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>dateObj</var>.toTimeString()</pre>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Une chaîne de caractères qui représente l'heure de la date indiquée dans un format anglais américain.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>Une instance de {{jsxref("Date")}} représente un instant précis dans le temps. Appeler {{jsxref("Date.toString", "toString()")}} renverra la date formatée de façon à être lisible par un humain, en anglais américain. Pour le moteur JavaScript <a href="/fr/docs/SpiderMonkey">SpiderMonkey</a>, ceci consiste en la partie « date » (jour, mois, année) suivie de la partie « heure » (heures, minutes, secondes, et fuseau horaire). Parfois, il est préférable d'obtenir seulement la partie « heure » ; c'est ce que renvoie la méthode <code>toTimeString().</code></p>
-
-<p>La méthode <code>toTimeString()</code> est particulièrement utile parce que les moteurs implémentant <a href="/fr/docs/JavaScript/Language_Resources">ECMA-262</a> peuvent obtenir des résultats différents avec la méthode {{jsxref("Date.prototype.toString()", "toString()")}} (en effet, le format dépend de l'implémentation). Ceci peut empêcher les manipulations de textes simples d'avoir des résultats cohérents au sein des différents moteurs/navigateurs.</p>
-
-<h2 id="Exemple">Exemple</h2>
-
-<h3 id="Utiliser_toTimeString()">Utiliser <code>toTimeString()</code></h3>
-
-<pre class="brush:js">var d = new Date(1993, 6, 28, 14, 39, 7);
-
-console.log(d.toString());     // Wed Jul 28 1993 14:39:07 GMT-0600 (PDT)
-console.log(d.toTimeString()); // 14:39:07 GMT-0600 (PDT)
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES3')}}</td>
-   <td>{{Spec2('ES3')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-15.9.5.4', 'Date.prototype.toTimeString')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-date.prototype.totimestring', 'Date.prototype.toTimeString')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-date.prototype.totimestring', 'Date.prototype.toTimeString')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Date.toTimeString")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Date.prototype.toLocaleTimeString()")}}</li>
- <li>{{jsxref("Date.prototype.toDateString()")}}</li>
- <li>{{jsxref("Date.prototype.toString()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/date/totimestring/index.md b/files/fr/web/javascript/reference/global_objects/date/totimestring/index.md
new file mode 100644
index 0000000000..cabaa9ae84
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/date/totimestring/index.md
@@ -0,0 +1,61 @@
+---
+title: Date.prototype.toTimeString()
+slug: Web/JavaScript/Reference/Global_Objects/Date/toTimeString
+tags:
+  - Date
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/toTimeString
+original_slug: Web/JavaScript/Reference/Objets_globaux/Date/toTimeString
+---
+{{JSRef}}
+
+La méthode **`toTimeString()`**renvoie la partie « heure » de l'objet `Date` dans un format lisible par un humain, en anglais américain.
+
+{{EmbedInteractiveExample("pages/js/date-totimestring.html")}}
+
+## Syntaxe
+
+    dateObj.toTimeString()
+
+### Valeur de retour
+
+Une chaîne de caractères qui représente l'heure de la date indiquée dans un format anglais américain.
+
+## Description
+
+Une instance de {{jsxref("Date")}} représente un instant précis dans le temps. Appeler {{jsxref("Date.toString", "toString()")}} renverra la date formatée de façon à être lisible par un humain, en anglais américain. Pour le moteur JavaScript [SpiderMonkey](/fr/docs/SpiderMonkey), ceci consiste en la partie « date » (jour, mois, année) suivie de la partie « heure » (heures, minutes, secondes, et fuseau horaire). Parfois, il est préférable d'obtenir seulement la partie « heure » ; c'est ce que renvoie la méthode `toTimeString().`
+
+La méthode `toTimeString()` est particulièrement utile parce que les moteurs implémentant [ECMA-262](/fr/docs/JavaScript/Language_Resources) peuvent obtenir des résultats différents avec la méthode {{jsxref("Date.prototype.toString()", "toString()")}} (en effet, le format dépend de l'implémentation). Ceci peut empêcher les manipulations de textes simples d'avoir des résultats cohérents au sein des différents moteurs/navigateurs.
+
+## Exemple
+
+### Utiliser `toTimeString()`
+
+```js
+var d = new Date(1993, 6, 28, 14, 39, 7);
+
+console.log(d.toString());     // Wed Jul 28 1993 14:39:07 GMT-0600 (PDT)
+console.log(d.toTimeString()); // 14:39:07 GMT-0600 (PDT)
+```
+
+## Spécifications
+
+| Spécification                                                                                                            | État                         | Commentaires         |
+| ------------------------------------------------------------------------------------------------------------------------ | ---------------------------- | -------------------- |
+| {{SpecName('ES3')}}                                                                                                 | {{Spec2('ES3')}}         | Définition initiale. |
+| {{SpecName('ES5.1', '#sec-15.9.5.4', 'Date.prototype.toTimeString')}}                             | {{Spec2('ES5.1')}}     |                      |
+| {{SpecName('ES6', '#sec-date.prototype.totimestring', 'Date.prototype.toTimeString')}}     | {{Spec2('ES6')}}         |                      |
+| {{SpecName('ESDraft', '#sec-date.prototype.totimestring', 'Date.prototype.toTimeString')}} | {{Spec2('ESDraft')}} |                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Date.toTimeString")}}
+
+## Voir aussi
+
+- {{jsxref("Date.prototype.toLocaleTimeString()")}}
+- {{jsxref("Date.prototype.toDateString()")}}
+- {{jsxref("Date.prototype.toString()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/date/toutcstring/index.html b/files/fr/web/javascript/reference/global_objects/date/toutcstring/index.html
deleted file mode 100644
index fb08c111a8..0000000000
--- a/files/fr/web/javascript/reference/global_objects/date/toutcstring/index.html
+++ /dev/null
@@ -1,89 +0,0 @@
----
-title: Date.prototype.toUTCString()
-slug: Web/JavaScript/Reference/Global_Objects/Date/toUTCString
-tags:
-  - Date
-  - JavaScript
-  - Méthode
-  - Prototype
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Date/toUTCString
-original_slug: Web/JavaScript/Reference/Objets_globaux/Date/toUTCString
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <code><strong>toUTCString()</strong></code> convertit une date en une chaîne de caractères, selon le fuseau horaire UTC.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/date-toutcstring.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>dateObj</var>.toUTCString()</pre>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Une chaîne de caractères représentant la date indiquée selon le fuseau horaire UTC.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>La valeur renvoyée par <code>toUTCString()</code> est un texte au même format que celui renvoyé {{jsxref("Date.prototype.toString()")}} mais sans décalage de fuseau horaire (en UTC).</p>
-
-<p>Avant ECMAScript 2018, le format de la valeur renvoyée pouvait varier selon les plateformes. La valeur la plus couramment renvoyée était une date formatée selon la RFC 1123, qui est une version mise à jour de la RFC 822.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Utiliser_toUTCString()">Utiliser <code>toUTCString()</code></h3>
-
-<pre class="brush: js">var aujourdhui = new Date();
-var UTCstring = aujourdhui.toUTCString();
-// Mon, 03 Jul 2006 21:44:38 GMT
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES1')}}</td>
-   <td>{{Spec2('ES1')}}</td>
-   <td>Définition initiale. Implémentée avec JavaScript 1.3. Le format dépend de l'implémentation.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-15.9.5.42', 'Date.prototype.toUTCString')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-date.prototype.toutcstring', 'Date.prototype.toUTCString')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2018', '#sec-date.prototype.toutcstring', 'Date.prototype.toUTCString')}}</td>
-   <td>{{Spec2('ES2018')}}</td>
-   <td>Première standardisation du format</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-date.prototype.toutcstring', 'Date.prototype.toUTCString')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Date.toUTCString")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Date.prototype.toLocaleString()")}}</li>
- <li>{{jsxref("Date.prototype.toDateString()")}}</li>
- <li>{{jsxref("Date.prototype.toISOString()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/date/toutcstring/index.md b/files/fr/web/javascript/reference/global_objects/date/toutcstring/index.md
new file mode 100644
index 0000000000..b7db523967
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/date/toutcstring/index.md
@@ -0,0 +1,61 @@
+---
+title: Date.prototype.toUTCString()
+slug: Web/JavaScript/Reference/Global_Objects/Date/toUTCString
+tags:
+  - Date
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/toUTCString
+original_slug: Web/JavaScript/Reference/Objets_globaux/Date/toUTCString
+---
+{{JSRef}}
+
+La méthode **`toUTCString()`** convertit une date en une chaîne de caractères, selon le fuseau horaire UTC.
+
+{{EmbedInteractiveExample("pages/js/date-toutcstring.html")}}
+
+## Syntaxe
+
+    dateObj.toUTCString()
+
+### Valeur de retour
+
+Une chaîne de caractères représentant la date indiquée selon le fuseau horaire UTC.
+
+## Description
+
+La valeur renvoyée par `toUTCString()` est un texte au même format que celui renvoyé {{jsxref("Date.prototype.toString()")}} mais sans décalage de fuseau horaire (en UTC).
+
+Avant ECMAScript 2018, le format de la valeur renvoyée pouvait varier selon les plateformes. La valeur la plus couramment renvoyée était une date formatée selon la RFC 1123, qui est une version mise à jour de la RFC 822.
+
+## Exemples
+
+### Utiliser `toUTCString()`
+
+```js
+var aujourdhui = new Date();
+var UTCstring = aujourdhui.toUTCString();
+// Mon, 03 Jul 2006 21:44:38 GMT
+```
+
+## Spécifications
+
+| Spécification                                                                                                        | État                         | Commentaires                                                                                |
+| -------------------------------------------------------------------------------------------------------------------- | ---------------------------- | ------------------------------------------------------------------------------------------- |
+| {{SpecName('ES1')}}                                                                                             | {{Spec2('ES1')}}         | Définition initiale. Implémentée avec JavaScript 1.3. Le format dépend de l'implémentation. |
+| {{SpecName('ES5.1', '#sec-15.9.5.42', 'Date.prototype.toUTCString')}}                         | {{Spec2('ES5.1')}}     |                                                                                             |
+| {{SpecName('ES6', '#sec-date.prototype.toutcstring', 'Date.prototype.toUTCString')}}     | {{Spec2('ES6')}}         |                                                                                             |
+| {{SpecName('ES2018', '#sec-date.prototype.toutcstring', 'Date.prototype.toUTCString')}} | {{Spec2('ES2018')}}     | Première standardisation du format                                                          |
+| {{SpecName('ESDraft', '#sec-date.prototype.toutcstring', 'Date.prototype.toUTCString')}} | {{Spec2('ESDraft')}} |                                                                                             |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Date.toUTCString")}}
+
+## Voir aussi
+
+- {{jsxref("Date.prototype.toLocaleString()")}}
+- {{jsxref("Date.prototype.toDateString()")}}
+- {{jsxref("Date.prototype.toISOString()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/date/utc/index.html b/files/fr/web/javascript/reference/global_objects/date/utc/index.html
deleted file mode 100644
index 8caed69035..0000000000
--- a/files/fr/web/javascript/reference/global_objects/date/utc/index.html
+++ /dev/null
@@ -1,134 +0,0 @@
----
-title: Date.UTC()
-slug: Web/JavaScript/Reference/Global_Objects/Date/UTC
-tags:
-  - Date
-  - JavaScript
-  - Méthode
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Date/UTC
-original_slug: Web/JavaScript/Reference/Objets_globaux/Date/UTC
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <strong><code>Date.UTC()</code></strong> accepte des paramètres similaires à ceux du constructeur {{jsxref("Date")}} et renvoie le nombre de millièmes de seconde depuis le 1er janvier 1970, 00:00:00, temps universel. Autrement dit, elle renvoie la date en UTC.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/date-utc.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">Date.UTC(<em>année</em>[,<em>mois</em>[,<em>jour</em>[,<em>heures</em>[,<em>minutes</em>[,<em>secondes</em>[,<em>ms</em>]]]]]])</pre>
-
-<h2 id="Paramètres">Paramètres</h2>
-
-<dl>
- <dt><code>année</code></dt>
- <dd>Une année sur deux chiffres pour une année après 1900 (ex. 98 pour 1998) ou bien une année sur quatre chiffres (2018).</dd>
- <dt><code>mois</code>{{optional_inline}}</dt>
- <dd>
- <p>Un entier entre 0 (janvier) et 11 (décembre) représentant le mois.</p>
-
- <div class="note"><p><strong>Note :</strong> Cet argument est optionnel depuis ECMAScript 2017.</p></div>
- </dd>
- <dt><code>jour</code>{{optional_inline}}</dt>
- <dd>Un entier entre 1 et 31 représentant le jour du mois. La valeur par défaut vaut 1.</dd>
- <dt><code>heures</code>{{optional_inline}}</dt>
- <dd>Paramètre optionnel, un entier entre 0 et 23 représentant les heures. La valeur par défaut vaut 0.</dd>
- <dt><code>minutes</code>{{optional_inline}}</dt>
- <dd>Paramètre optionnel, un entier entre 0 et 59 représentant les minutes. La valeur par défaut vaut 0.</dd>
- <dt><code>secondes</code>{{optional_inline}}</dt>
- <dd>Paramètre optionnel, un entier entre 0 et 59 représentant les secondes. La valeur par défaut vaut 0.</dd>
- <dt><code>ms</code>{{optional_inline}}</dt>
- <dd>Paramètre optionnel, un entier entre 0 et 999 représentant les millièmes de seconde. La valeur par défaut vaut 0.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Un nombre représentant le nombre de millisecondes écoulées entre la date indiquée et le premier janvier 1970 à minuit UTC.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>La méthode <code>UTC</code> prend des paramètres de date et d'heure séparés par des virgules et renvoie le nombre de millièmes de seconde entre le 1er janvier 1970, 00:00:00, temps universel et la date et l'heure spécifiées.</p>
-
-<p>Il faut spécifier l'année entière pour le premier paramètre ; par exemple 1998. Si l'année spécifiée est entre 0 et 99, la méthode la convertira en une année du XXe siècle (1900 + année) ; par exemple si vous indiquez 95, l'année 1995 sera utilisée.</p>
-
-<p>La méthode <code>UTC</code> diffère du constructeur {{jsxref("Date")}} pour deux raisons :</p>
-
-<ul>
- <li><code>Date.UTC</code> utilise le temps universel plutôt que l'heure locale.</li>
- <li><code>Date.UTC</code> renvoie une valeur temporelle sous la forme d'un nombre plutôt que de créer un objet <code>Date</code>.</li>
-</ul>
-
-<p>Si un paramètre spécifié est en dehors des limites attendues, la méthode <code>UTC</code> met à jour les autres paramètres pour s'adapter à ce nombre. Par exemple, si vous utilisez 15 pour le mois, l'année sera incrémentée d'une unité (année + 1), et la valeur 3 (avril) sera utilisée pour le mois.</p>
-
-<p>Comme <code>UTC</code> est une méthode statique de <code>Date</code>, on l'utilise toujours sous la forme <code>Date.UTC()</code> plutôt que comme une méthode d'un objet <code>Date</code> que vous auriez créé.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Utiliser_Date.UTC()">Utiliser <code>Date.UTC()</code></h3>
-
-<p>L'instruction qui suit crée un objet <code>Date</code> en utilisant l'heure UTC plutôt que l'heure locale :</p>
-
-<pre class="brush: js">var utcDate = new Date(Date.UTC(96, 11, 1, 0, 0, 0));
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-date.utc', 'Date.UTC')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td>Le paramètre pour le mois est devenu optionnel avec ES2017.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-date.utc', 'Date.UTC')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-15.9.4.3', 'Date.UTC')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES1')}}</td>
-   <td>{{Spec2('ES1')}}</td>
-   <td>Définition initiale. Implémentée avec JavaScript 1.0.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Date.UTC")}}</p>
-
-<h2 id="Notes_de_compatibilité">Notes de compatibilité</h2>
-
-<h3 id="Utiliser_Date.UTC_avec_moins_de_deux_arguments">Utiliser <code>Date.UTC</code> avec moins de deux arguments</h3>
-
-<p>Lorsqu'on fournit moins de deux arguments à <code>Date.UTC</code>, {{jsxref("NaN")}} sera renvoyé. Ce comportement a été spécifié dans ECMAScript 2017 et les moteurs qui n'obéissaient pas à cette règle on été mis à jour (cf. {{bug(1050755)}}, <a href="https://github.com/tc39/ecma262/pull/642">ecma-262 #642</a>).</p>
-
-<pre class="brush: js">Date.UTC();
-Date.UTC(1);
-
-// Safari: NaN
-// Chrome/Opera/V8: NaN
-
-// Firefox &lt;54: non-NaN
-// Firefox 54+: NaN
-
-// IE: non-NaN
-// Edge: NaN
-</pre>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Date.parse()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/date/utc/index.md b/files/fr/web/javascript/reference/global_objects/date/utc/index.md
new file mode 100644
index 0000000000..6dbf12f938
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/date/utc/index.md
@@ -0,0 +1,107 @@
+---
+title: Date.UTC()
+slug: Web/JavaScript/Reference/Global_Objects/Date/UTC
+tags:
+  - Date
+  - JavaScript
+  - Méthode
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/UTC
+original_slug: Web/JavaScript/Reference/Objets_globaux/Date/UTC
+---
+{{JSRef}}
+
+La méthode **`Date.UTC()`** accepte des paramètres similaires à ceux du constructeur {{jsxref("Date")}} et renvoie le nombre de millièmes de seconde depuis le 1er janvier 1970, 00:00:00, temps universel. Autrement dit, elle renvoie la date en UTC.
+
+{{EmbedInteractiveExample("pages/js/date-utc.html")}}
+
+## Syntaxe
+
+    Date.UTC(année[,mois[,jour[,heures[,minutes[,secondes[,ms]]]]]])
+
+## Paramètres
+
+- `année`
+  - : Une année sur deux chiffres pour une année après 1900 (ex. 98 pour 1998) ou bien une année sur quatre chiffres (2018).
+- `mois`{{optional_inline}}
+
+  - : Un entier entre 0 (janvier) et 11 (décembre) représentant le mois.
+
+    > **Note :** Cet argument est optionnel depuis ECMAScript 2017.
+
+- `jour`{{optional_inline}}
+  - : Un entier entre 1 et 31 représentant le jour du mois. La valeur par défaut vaut 1.
+- `heures`{{optional_inline}}
+  - : Paramètre optionnel, un entier entre 0 et 23 représentant les heures. La valeur par défaut vaut 0.
+- `minutes`{{optional_inline}}
+  - : Paramètre optionnel, un entier entre 0 et 59 représentant les minutes. La valeur par défaut vaut 0.
+- `secondes`{{optional_inline}}
+  - : Paramètre optionnel, un entier entre 0 et 59 représentant les secondes. La valeur par défaut vaut 0.
+- `ms`{{optional_inline}}
+  - : Paramètre optionnel, un entier entre 0 et 999 représentant les millièmes de seconde. La valeur par défaut vaut 0.
+
+### Valeur de retour
+
+Un nombre représentant le nombre de millisecondes écoulées entre la date indiquée et le premier janvier 1970 à minuit UTC.
+
+## Description
+
+La méthode `UTC` prend des paramètres de date et d'heure séparés par des virgules et renvoie le nombre de millièmes de seconde entre le 1er janvier 1970, 00:00:00, temps universel et la date et l'heure spécifiées.
+
+Il faut spécifier l'année entière pour le premier paramètre ; par exemple 1998. Si l'année spécifiée est entre 0 et 99, la méthode la convertira en une année du XXe siècle (1900 + année) ; par exemple si vous indiquez 95, l'année 1995 sera utilisée.
+
+La méthode `UTC` diffère du constructeur {{jsxref("Date")}} pour deux raisons :
+
+- `Date.UTC` utilise le temps universel plutôt que l'heure locale.
+- `Date.UTC` renvoie une valeur temporelle sous la forme d'un nombre plutôt que de créer un objet `Date`.
+
+Si un paramètre spécifié est en dehors des limites attendues, la méthode `UTC` met à jour les autres paramètres pour s'adapter à ce nombre. Par exemple, si vous utilisez 15 pour le mois, l'année sera incrémentée d'une unité (année + 1), et la valeur 3 (avril) sera utilisée pour le mois.
+
+Comme `UTC` est une méthode statique de `Date`, on l'utilise toujours sous la forme `Date.UTC()` plutôt que comme une méthode d'un objet `Date` que vous auriez créé.
+
+## Exemples
+
+### Utiliser `Date.UTC()`
+
+L'instruction qui suit crée un objet `Date` en utilisant l'heure UTC plutôt que l'heure locale :
+
+```js
+var utcDate = new Date(Date.UTC(96, 11, 1, 0, 0, 0));
+```
+
+## Spécifications
+
+| Spécification                                                        | État                         | Commentaires                                                |
+| -------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------------- |
+| {{SpecName('ESDraft', '#sec-date.utc', 'Date.UTC')}} | {{Spec2('ESDraft')}} | Le paramètre pour le mois est devenu optionnel avec ES2017. |
+| {{SpecName('ES6', '#sec-date.utc', 'Date.UTC')}}     | {{Spec2('ES6')}}         |                                                             |
+| {{SpecName('ES5.1', '#sec-15.9.4.3', 'Date.UTC')}} | {{Spec2('ES5.1')}}     |                                                             |
+| {{SpecName('ES1')}}                                             | {{Spec2('ES1')}}         | Définition initiale. Implémentée avec JavaScript 1.0.       |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Date.UTC")}}
+
+## Notes de compatibilité
+
+### Utiliser `Date.UTC` avec moins de deux arguments
+
+Lorsqu'on fournit moins de deux arguments à `Date.UTC`, {{jsxref("NaN")}} sera renvoyé. Ce comportement a été spécifié dans ECMAScript 2017 et les moteurs qui n'obéissaient pas à cette règle on été mis à jour (cf. {{bug(1050755)}}, [ecma-262 #642](https://github.com/tc39/ecma262/pull/642)).
+
+```js
+Date.UTC();
+Date.UTC(1);
+
+// Safari: NaN
+// Chrome/Opera/V8: NaN
+
+// Firefox <54: non-NaN
+// Firefox 54+: NaN
+
+// IE: non-NaN
+// Edge: NaN
+```
+
+## Voir aussi
+
+- {{jsxref("Date.parse()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/date/valueof/index.html b/files/fr/web/javascript/reference/global_objects/date/valueof/index.html
deleted file mode 100644
index fb835f4c3b..0000000000
--- a/files/fr/web/javascript/reference/global_objects/date/valueof/index.html
+++ /dev/null
@@ -1,84 +0,0 @@
----
-title: Date.prototype.valueOf()
-slug: Web/JavaScript/Reference/Global_Objects/Date/valueOf
-tags:
-  - Date
-  - JavaScript
-  - Méthode
-  - Prototype
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Date/valueOf
-original_slug: Web/JavaScript/Reference/Objets_globaux/Date/valueOF
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <strong><code>valueOf()</code></strong> renvoie la valeur primitive d'un objet {{jsxref("Date")}}.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/date-valueof.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>date</var>.valueOf()</pre>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Le nombre de millisecondes écoulées entre le premier janvier 1970, minuit UTC et la date indiquée.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>La méthode <code>valueOf()</code> renvoie la valeur primitive d'un objet <code>Date</code> sous forme d'un nombre. Ce nombre correspond au nombre de millisecondes écoulées depuis le 1 janvier 1970 00h00 GMT.</p>
-
-<p>D'un point de vue fonctionnel, cette méthode est équivalente à {{jsxref("Date.prototype.getTime()")}}.</p>
-
-<p>Cette méthode est souvent appelée en interne par le moteur JavaScript et n'est pas utilisée de façon explicite dans des scripts.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Utiliser_valueOf()">Utiliser <code>valueOf()</code></h3>
-
-<pre class="brush:js">var x = new Date(56, 6, 17);
-var maVar = x.valueOf();      // maVar vaut -424713600000
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES1')}}</td>
-   <td>{{Spec2('ES1')}}</td>
-   <td>Définition initiale. Implémentée avec JavaScript 1.1.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-15.9.5.8', 'Date.prototype.valueOf')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-date.prototype.valueof', 'Date.prototype.valueOf')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-date.prototype.valueof', 'Date.prototype.valueOf')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Date.valueOf")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Object.prototype.valueOf()")}}</li>
- <li>{{jsxref("Date.prototype.getTime()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/date/valueof/index.md b/files/fr/web/javascript/reference/global_objects/date/valueof/index.md
new file mode 100644
index 0000000000..684d275338
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/date/valueof/index.md
@@ -0,0 +1,60 @@
+---
+title: Date.prototype.valueOf()
+slug: Web/JavaScript/Reference/Global_Objects/Date/valueOf
+tags:
+  - Date
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/valueOf
+original_slug: Web/JavaScript/Reference/Objets_globaux/Date/valueOF
+---
+{{JSRef}}
+
+La méthode **`valueOf()`** renvoie la valeur primitive d'un objet {{jsxref("Date")}}.
+
+{{EmbedInteractiveExample("pages/js/date-valueof.html")}}
+
+## Syntaxe
+
+    date.valueOf()
+
+### Valeur de retour
+
+Le nombre de millisecondes écoulées entre le premier janvier 1970, minuit UTC et la date indiquée.
+
+## Description
+
+La méthode `valueOf()` renvoie la valeur primitive d'un objet `Date` sous forme d'un nombre. Ce nombre correspond au nombre de millisecondes écoulées depuis le 1 janvier 1970 00h00 GMT.
+
+D'un point de vue fonctionnel, cette méthode est équivalente à {{jsxref("Date.prototype.getTime()")}}.
+
+Cette méthode est souvent appelée en interne par le moteur JavaScript et n'est pas utilisée de façon explicite dans des scripts.
+
+## Exemples
+
+### Utiliser `valueOf()`
+
+```js
+var x = new Date(56, 6, 17);
+var maVar = x.valueOf();      // maVar vaut -424713600000
+```
+
+## Spécifications
+
+| Spécification                                                                                                | État                         | Commentaires                                          |
+| ------------------------------------------------------------------------------------------------------------ | ---------------------------- | ----------------------------------------------------- |
+| {{SpecName('ES1')}}                                                                                     | {{Spec2('ES1')}}         | Définition initiale. Implémentée avec JavaScript 1.1. |
+| {{SpecName('ES5.1', '#sec-15.9.5.8', 'Date.prototype.valueOf')}}                         | {{Spec2('ES5.1')}}     |                                                       |
+| {{SpecName('ES6', '#sec-date.prototype.valueof', 'Date.prototype.valueOf')}}         | {{Spec2('ES6')}}         |                                                       |
+| {{SpecName('ESDraft', '#sec-date.prototype.valueof', 'Date.prototype.valueOf')}} | {{Spec2('ESDraft')}} |                                                       |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Date.valueOf")}}
+
+## Voir aussi
+
+- {{jsxref("Object.prototype.valueOf()")}}
+- {{jsxref("Date.prototype.getTime()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/decodeuri/index.html b/files/fr/web/javascript/reference/global_objects/decodeuri/index.html
deleted file mode 100644
index 07d7dd5a71..0000000000
--- a/files/fr/web/javascript/reference/global_objects/decodeuri/index.html
+++ /dev/null
@@ -1,100 +0,0 @@
----
-title: decodeURI()
-slug: Web/JavaScript/Reference/Global_Objects/decodeURI
-tags:
-  - JavaScript
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/decodeURI
-original_slug: Web/JavaScript/Reference/Objets_globaux/decodeURI
----
-<div>{{jsSidebar("Objects")}}</div>
-
-<p>La méthode <code><strong>decodeURI()</strong></code> permet de décoder un Uniform Resource Identifier (URI) créé par la méthode {{jsxref("encodeURI","encodeURI()")}} ou une méthode similaire.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/globalprops-decodeuri.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">decodeURI(<var>encodedURI</var>)</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>encodedURI</code></dt>
- <dd>Un URI complet, encodé.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Une nouvelle chaîne de caractères dont certains caractères ont été décodés à partir de l'URI encodée passée en argument.</p>
-
-<h3 id="Exceptions">Exceptions</h3>
-
-<p>Cette méthode lève une exception {{jsxref("URIError")}} ("<em>malformed URI sequence"</em>) lorsque la chaîne passée en argument contient des séquences de caractères invalides.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>Cette méthode remplace chaque séquence d'échappement présente dans l'URI encodée avec le caractère correspondant. Les séquences d'échappement qui n'auraient pas pu être introduites par {{jsxref("encodeURI", "encodeURI()")}} ne seront pas décodées. Le caractère « <code>#</code> » n'est pas décodé au sein des séquences d'échappement.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Décoder_une_URL_cyrillique">Décoder une URL cyrillique</h3>
-
-<pre class="brush: js">decodeURI("https://developer.mozilla.org/ru/docs/JavaScript_%D1%88%D0%B5%D0%BB%D0%BB%D1%8B");
-// "https://developer.mozilla.org/ru/docs/JavaScript_шеллы"
-</pre>
-
-<h3 id="Gérer_les_exceptions">Gérer les exceptions</h3>
-
-<pre class="brush: js">try {
-  var a = decodeURI('%E0%A4%A');
-} catch(e) {
-  console.error(e);
-}
-
-// Cela produira "URIError: malformed URI sequence"
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES3')}}</td>
-   <td>{{Spec2('ES3')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-15.1.3.1', 'decodeURI')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-decodeuri-encodeduri', 'decodeURI')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-decodeuri-encodeduri', 'decodeURI')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.decodeURI")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("decodeURIComponent","decodeURIComponent()")}}</li>
- <li>{{jsxref("encodeURI","encodeURI()")}}</li>
- <li>{{jsxref("encodeURIComponent","encodeURIComponent()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/decodeuri/index.md b/files/fr/web/javascript/reference/global_objects/decodeuri/index.md
new file mode 100644
index 0000000000..818de77595
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/decodeuri/index.md
@@ -0,0 +1,75 @@
+---
+title: decodeURI()
+slug: Web/JavaScript/Reference/Global_Objects/decodeURI
+tags:
+  - JavaScript
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/decodeURI
+original_slug: Web/JavaScript/Reference/Objets_globaux/decodeURI
+---
+{{jsSidebar("Objects")}}
+
+La méthode **`decodeURI()`** permet de décoder un Uniform Resource Identifier (URI) créé par la méthode {{jsxref("encodeURI","encodeURI()")}} ou une méthode similaire.
+
+{{EmbedInteractiveExample("pages/js/globalprops-decodeuri.html")}}
+
+## Syntaxe
+
+    decodeURI(encodedURI)
+
+### Paramètres
+
+- `encodedURI`
+  - : Un URI complet, encodé.
+
+### Valeur de retour
+
+Une nouvelle chaîne de caractères dont certains caractères ont été décodés à partir de l'URI encodée passée en argument.
+
+### Exceptions
+
+Cette méthode lève une exception {{jsxref("URIError")}} ("_malformed URI sequence"_) lorsque la chaîne passée en argument contient des séquences de caractères invalides.
+
+## Description
+
+Cette méthode remplace chaque séquence d'échappement présente dans l'URI encodée avec le caractère correspondant. Les séquences d'échappement qui n'auraient pas pu être introduites par {{jsxref("encodeURI", "encodeURI()")}} ne seront pas décodées. Le caractère « `#` » n'est pas décodé au sein des séquences d'échappement.
+
+## Exemples
+
+### Décoder une URL cyrillique
+
+```js
+decodeURI("https://developer.mozilla.org/ru/docs/JavaScript_%D1%88%D0%B5%D0%BB%D0%BB%D1%8B");
+// "https://developer.mozilla.org/ru/docs/JavaScript_шеллы"
+```
+
+### Gérer les exceptions
+
+```js
+try {
+  var a = decodeURI('%E0%A4%A');
+} catch(e) {
+  console.error(e);
+}
+
+// Cela produira "URIError: malformed URI sequence"
+```
+
+## Spécifications
+
+| Spécification                                                                            | État                         | Commentaires         |
+| ---------------------------------------------------------------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName('ES3')}}                                                                 | {{Spec2('ES3')}}         | Définition initiale. |
+| {{SpecName('ES5.1', '#sec-15.1.3.1', 'decodeURI')}}                     | {{Spec2('ES5.1')}}     |                      |
+| {{SpecName('ES6', '#sec-decodeuri-encodeduri', 'decodeURI')}}         | {{Spec2('ES6')}}         |                      |
+| {{SpecName('ESDraft', '#sec-decodeuri-encodeduri', 'decodeURI')}} | {{Spec2('ESDraft')}} |                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.decodeURI")}}
+
+## Voir aussi
+
+- {{jsxref("decodeURIComponent","decodeURIComponent()")}}
+- {{jsxref("encodeURI","encodeURI()")}}
+- {{jsxref("encodeURIComponent","encodeURIComponent()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/decodeuricomponent/index.html b/files/fr/web/javascript/reference/global_objects/decodeuricomponent/index.html
deleted file mode 100644
index af978f1b90..0000000000
--- a/files/fr/web/javascript/reference/global_objects/decodeuricomponent/index.html
+++ /dev/null
@@ -1,89 +0,0 @@
----
-title: decodeURIComponent()
-slug: Web/JavaScript/Reference/Global_Objects/decodeURIComponent
-tags:
-  - JavaScript
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/decodeURIComponent
-original_slug: Web/JavaScript/Reference/Objets_globaux/decodeURIComponent
----
-<div>{{jsSidebar("Objects")}}</div>
-
-<p>La fonction <code><strong>decodeURIComponent()</strong></code> permet de décoder un composant d'un Uniform Resource Identifier (URI) précédemment créé par {{jsxref("encodeURIComponent")}} ou par une méthode similaire.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/globalprops-decodeuricomponent.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">decodeURIComponent(<var>encodedURI</var>)</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>encodedURI</code></dt>
- <dd>Un composant d'URI qui est encodé.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Une nouvelle chaîne de caractères qui représente la version décodée du composant d'URI encodé passé en argument.</p>
-
-<h3 id="Exceptions_levées">Exceptions levées</h3>
-
-<p>Cette méthode lève une exception {{jsxref("URIError")}} ("<em>malformed URI sequence</em>") lorsqu'elle est utilisée de façon incorrecte.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>Cette méthode remplace chaque séquence d'échappement du composant d'URI encodé par le caractère que la séquence représente.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Décoder_un_composant_d'URL_encodé">Décoder un composant d'URL encodé</h3>
-
-<pre class="brush: js">decodeURIComponent("JavaScript_%D1%88%D0%B5%D0%BB%D0%BB%D1%8B");
-// "JavaScript_шеллы"
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES3')}}</td>
-   <td>{{Spec2('ES3')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-15.1.3.2', 'decodeURIComponent')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-decodeuricomponent-encodeduricomponent', 'decodeURIComponent')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-decodeuricomponent-encodeduricomponent', 'decodeURIComponent')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.decodeURIComponent")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("decodeURI")}}</li>
- <li>{{jsxref("encodeURI")}}</li>
- <li>{{jsxref("encodeURIComponent")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/decodeuricomponent/index.md b/files/fr/web/javascript/reference/global_objects/decodeuricomponent/index.md
new file mode 100644
index 0000000000..e825bcbbc0
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/decodeuricomponent/index.md
@@ -0,0 +1,63 @@
+---
+title: decodeURIComponent()
+slug: Web/JavaScript/Reference/Global_Objects/decodeURIComponent
+tags:
+  - JavaScript
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/decodeURIComponent
+original_slug: Web/JavaScript/Reference/Objets_globaux/decodeURIComponent
+---
+{{jsSidebar("Objects")}}
+
+La fonction **`decodeURIComponent()`** permet de décoder un composant d'un Uniform Resource Identifier (URI) précédemment créé par {{jsxref("encodeURIComponent")}} ou par une méthode similaire.
+
+{{EmbedInteractiveExample("pages/js/globalprops-decodeuricomponent.html")}}
+
+## Syntaxe
+
+    decodeURIComponent(encodedURI)
+
+### Paramètres
+
+- `encodedURI`
+  - : Un composant d'URI qui est encodé.
+
+### Valeur de retour
+
+Une nouvelle chaîne de caractères qui représente la version décodée du composant d'URI encodé passé en argument.
+
+### Exceptions levées
+
+Cette méthode lève une exception {{jsxref("URIError")}} ("_malformed URI sequence_") lorsqu'elle est utilisée de façon incorrecte.
+
+## Description
+
+Cette méthode remplace chaque séquence d'échappement du composant d'URI encodé par le caractère que la séquence représente.
+
+## Exemples
+
+### Décoder un composant d'URL encodé
+
+```js
+decodeURIComponent("JavaScript_%D1%88%D0%B5%D0%BB%D0%BB%D1%8B");
+// "JavaScript_шеллы"
+```
+
+## Spécifications
+
+| Spécification                                                                                                                | État                         | Commentaires         |
+| ---------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName('ES3')}}                                                                                                     | {{Spec2('ES3')}}         | Définition initiale. |
+| {{SpecName('ES5.1', '#sec-15.1.3.2', 'decodeURIComponent')}}                                             | {{Spec2('ES5.1')}}     |                      |
+| {{SpecName('ES6', '#sec-decodeuricomponent-encodeduricomponent', 'decodeURIComponent')}}         | {{Spec2('ES6')}}         |                      |
+| {{SpecName('ESDraft', '#sec-decodeuricomponent-encodeduricomponent', 'decodeURIComponent')}} | {{Spec2('ESDraft')}} |                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.decodeURIComponent")}}
+
+## Voir aussi
+
+- {{jsxref("decodeURI")}}
+- {{jsxref("encodeURI")}}
+- {{jsxref("encodeURIComponent")}}
diff --git a/files/fr/web/javascript/reference/global_objects/encodeuri/index.html b/files/fr/web/javascript/reference/global_objects/encodeuri/index.html
deleted file mode 100644
index 1020c28623..0000000000
--- a/files/fr/web/javascript/reference/global_objects/encodeuri/index.html
+++ /dev/null
@@ -1,121 +0,0 @@
----
-title: encodeURI()
-slug: Web/JavaScript/Reference/Global_Objects/encodeURI
-tags:
-  - JavaScript
-  - Reference
-  - URI
-translation_of: Web/JavaScript/Reference/Global_Objects/encodeURI
-original_slug: Web/JavaScript/Reference/Objets_globaux/encodeURI
----
-<div>{{jsSidebar("Objects")}}</div>
-
-<p>La fonction <code><strong>encodeURI()</strong></code> encode un Uniform Resource Identifier (URI) en remplaçant chaque exemplaire de certains caractères par une, deux, trois ou quatre séquences d'échappement représentant le caractère encodé en UTF-8 (les quatre séquences d'échappement ne seront utilisées que si le caractère est composé de deux caractères « <em>surrogate</em> »).</p>
-
-<div>{{EmbedInteractiveExample("pages/js/globalprops-encodeuri.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">encodeURI(<var>URI</var>)</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>URI</code></dt>
- <dd>Un Uniform Resource Identifier complet.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Une nouvelle chaîne de caractères représentant un URI, encodé, à partir de la chaîne de caractères passée en argument.</p>
-
-<h2 id="Description">Description</h2>
-
-<p><code>encodeURI()</code> échappe tous les caractères sauf ceux-ci :</p>
-
-<pre>A-Z a-z 0-9 ; , / ? : @ &amp; = + $ - _ . ! ~ * ' ( ) #
-</pre>
-
-<p><code>encodeURI()</code> est différente de {{jsxref("encodeURIComponent")}}. Par exemple :</p>
-
-<pre class="brush: js">var set1 = ";,/?:@&amp;=+$#";  // Caractères réservés
-var set2 = "-_.!~*'()";   // Caractères non-réservés
-var set3 = "ABC abc 123"; // Caractères alphanumériques et espace
-
-console.log(encodeURI(set1)); // ;,/?:@&amp;=+$#
-console.log(encodeURI(set2)); // -_.!~*'()
-console.log(encodeURI(set3)); // ABC%20abc%20123 (l'espace est encodé en %20)
-
-console.log(encodeURIComponent(set1)); // %3B%2C%2F%3F%3A%40%26%3D%2B%24%23
-console.log(encodeURIComponent(set2)); // -_.!~*'()
-console.log(encodeURIComponent(set3)); // ABC%20abc%20123 (l'espace est encodé en %20)
-
-</pre>
-
-<p>Une exception {{jsxref("URIError")}} sera levée si on tente d'encoder un caractère <em>surrogate</em> (demi-codet) qui ne fait pas partie d'une paire :</p>
-
-<pre class="brush: js">// On a une paire de codets <em>surrogate</em>
-console.log(encodeURI('\uD800\uDFFF'));
-
-// Ici, seul le caractère "haut"
-// ce qui déclenche une "URIError: malformed URI sequence"
-console.log(encodeURI('\uD800'));
-
-// Ici, seul le caractère "bas"
-// ce qui déclenche une "URIError: malformed URI sequence"
-console.log(encodeURI('\uDFFF'));
-</pre>
-
-<p><code>encodeURI()</code> ne permet pas de former des requêtes HTTP GET ou POST (par exemple avec {{domxref("XMLHTTPRequest")}}) car "&amp;", "+" et "=" ne sont pas encodés et sont traités comme des caractères spéciaux (toutefois, la méthode. {{jsxref("encodeURIComponent")}} pourra être utilisée pour encoder ces caractères).</p>
-
-<p>Si on souhaite suivre la <a href="http://tools.ietf.org/html/rfc3986">RFC3986</a> qui concerne les URL et qui rend les crochets réservés (pour IPv6) (il ne faut donc plus encoder ces caractères lorsqu'ils font partie d'une URL (notamment pour la partie représentant l'hôte), on pourra utiliser le fragment de code suivant :</p>
-
-<pre class="brush: js">function fixedEncodeURI(str) {
-  return encodeURI(str).replace(/%5B/g, '[').replace(/%5D/g, ']');
-}</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-encodeuri-uri', 'encodeURI')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-encodeuri-uri', 'encodeURI')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-15.1.3.3', 'encodeURI')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES3')}}</td>
-   <td>{{Spec2('ES3')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.encodeURI")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("decodeURI", "decodeURI()")}}</li>
- <li>{{jsxref("encodeURIComponent", "encodeURIComponent()")}}</li>
- <li>{{jsxref("decodeURIComponent", "decodeURIComponent()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/encodeuri/index.md b/files/fr/web/javascript/reference/global_objects/encodeuri/index.md
new file mode 100644
index 0000000000..02eade980e
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/encodeuri/index.md
@@ -0,0 +1,94 @@
+---
+title: encodeURI()
+slug: Web/JavaScript/Reference/Global_Objects/encodeURI
+tags:
+  - JavaScript
+  - Reference
+  - URI
+translation_of: Web/JavaScript/Reference/Global_Objects/encodeURI
+original_slug: Web/JavaScript/Reference/Objets_globaux/encodeURI
+---
+{{jsSidebar("Objects")}}
+
+La fonction **`encodeURI()`** encode un Uniform Resource Identifier (URI) en remplaçant chaque exemplaire de certains caractères par une, deux, trois ou quatre séquences d'échappement représentant le caractère encodé en UTF-8 (les quatre séquences d'échappement ne seront utilisées que si le caractère est composé de deux caractères « _surrogate_ »).
+
+{{EmbedInteractiveExample("pages/js/globalprops-encodeuri.html")}}
+
+## Syntaxe
+
+    encodeURI(URI)
+
+### Paramètres
+
+- `URI`
+  - : Un Uniform Resource Identifier complet.
+
+### Valeur de retour
+
+Une nouvelle chaîne de caractères représentant un URI, encodé, à partir de la chaîne de caractères passée en argument.
+
+## Description
+
+`encodeURI()` échappe tous les caractères sauf ceux-ci :
+
+    A-Z a-z 0-9 ; , / ? : @ & = + $ - _ . ! ~ * ' ( ) #
+
+`encodeURI()` est différente de {{jsxref("encodeURIComponent")}}. Par exemple :
+
+```js
+var set1 = ";,/?:@&=+$#";  // Caractères réservés
+var set2 = "-_.!~*'()";   // Caractères non-réservés
+var set3 = "ABC abc 123"; // Caractères alphanumériques et espace
+
+console.log(encodeURI(set1)); // ;,/?:@&=+$#
+console.log(encodeURI(set2)); // -_.!~*'()
+console.log(encodeURI(set3)); // ABC%20abc%20123 (l'espace est encodé en %20)
+
+console.log(encodeURIComponent(set1)); // %3B%2C%2F%3F%3A%40%26%3D%2B%24%23
+console.log(encodeURIComponent(set2)); // -_.!~*'()
+console.log(encodeURIComponent(set3)); // ABC%20abc%20123 (l'espace est encodé en %20)
+```
+
+Une exception {{jsxref("URIError")}} sera levée si on tente d'encoder un caractère *surrogate* (demi-codet) qui ne fait pas partie d'une paire :
+
+```js
+// On a une paire de codets surrogate
+console.log(encodeURI('\uD800\uDFFF'));
+
+// Ici, seul le caractère "haut"
+// ce qui déclenche une "URIError: malformed URI sequence"
+console.log(encodeURI('\uD800'));
+
+// Ici, seul le caractère "bas"
+// ce qui déclenche une "URIError: malformed URI sequence"
+console.log(encodeURI('\uDFFF'));
+```
+
+`encodeURI()` ne permet pas de former des requêtes HTTP GET ou POST (par exemple avec {{domxref("XMLHTTPRequest")}}) car "&", "+" et "=" ne sont pas encodés et sont traités comme des caractères spéciaux (toutefois, la méthode. {{jsxref("encodeURIComponent")}} pourra être utilisée pour encoder ces caractères).
+
+Si on souhaite suivre la [RFC3986](http://tools.ietf.org/html/rfc3986) qui concerne les URL et qui rend les crochets réservés (pour IPv6) (il ne faut donc plus encoder ces caractères lorsqu'ils font partie d'une URL (notamment pour la partie représentant l'hôte), on pourra utiliser le fragment de code suivant :
+
+```js
+function fixedEncodeURI(str) {
+  return encodeURI(str).replace(/%5B/g, '[').replace(/%5D/g, ']');
+}
+```
+
+## Spécifications
+
+| Spécification                                                                | État                         | Commentaires         |
+| ---------------------------------------------------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName('ESDraft', '#sec-encodeuri-uri', 'encodeURI')}} | {{Spec2('ESDraft')}} |                      |
+| {{SpecName('ES6', '#sec-encodeuri-uri', 'encodeURI')}}     | {{Spec2('ES6')}}         |                      |
+| {{SpecName('ES5.1', '#sec-15.1.3.3', 'encodeURI')}}         | {{Spec2('ES5.1')}}     |                      |
+| {{SpecName('ES3')}}                                                     | {{Spec2('ES3')}}         | Définition initiale. |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.encodeURI")}}
+
+## Voir aussi
+
+- {{jsxref("decodeURI", "decodeURI()")}}
+- {{jsxref("encodeURIComponent", "encodeURIComponent()")}}
+- {{jsxref("decodeURIComponent", "decodeURIComponent()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/encodeuricomponent/index.html b/files/fr/web/javascript/reference/global_objects/encodeuricomponent/index.html
deleted file mode 100644
index c3deeef114..0000000000
--- a/files/fr/web/javascript/reference/global_objects/encodeuricomponent/index.html
+++ /dev/null
@@ -1,160 +0,0 @@
----
-title: encodeURIComponent()
-slug: Web/JavaScript/Reference/Global_Objects/encodeURIComponent
-tags:
-  - JavaScript
-  - Reference
-  - URI
-translation_of: Web/JavaScript/Reference/Global_Objects/encodeURIComponent
-original_slug: Web/JavaScript/Reference/Objets_globaux/encodeURIComponent
----
-<div>{{jsSidebar("Objects")}}</div>
-
-<p>La fonction <code><strong>encodeURIComponent()</strong></code> permet d'encoder un composant d'un Uniform Resource Identifier (URI) en remplaçant chaque exemplaire de certains caractères par une, deux, trois ou quatres séquences d'échappement UTF-8 correspondantes (quatre séquences seront utilisées uniquement lorsque les caractères à encoder sont composés de deux caractères « <em>surrogate</em> »).</p>
-
-<div>{{EmbedInteractiveExample("pages/js/globalprops-encodeuricomponent.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">encodeURIComponent(<var>str</var>);</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>str</code></dt>
- <dd>Une chaîne de caractères qui correspond à un composant d'URI.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Une nouvelle chaîne de caractères qui représente un composant d'URI obtenu en encodant la chaîne passée en argument.</p>
-
-<h2 id="Description">Description</h2>
-
-<p><code>encodeURIComponent()</code> échappe tous les caractères sauf : les lettres de l'alphabet latin, les chiffres (arabes) et <code>- _ . ! ~ * ' ( )</code></p>
-
-<p>La méthode <code>encodeURIComponent()</code> diffère de la méthode <code>encodeURI()</code> par rapport aux caractères qui sont encodés :</p>
-
-<pre class="brush: js">var set1 = ";,/?:@&amp;=+$";  // Caractères réservés
-var set2 = "-_.!~*'()";   // Caractères non-réservés
-var set3 = "#";           // Croisillon
-var set4 = "ABC abc 123"; // Caractères alphanumériques et espace
-
-console.log(encodeURI(set1)); // ;,/?:@&amp;=+$
-console.log(encodeURI(set2)); // -_.!~*'()
-console.log(encodeURI(set3)); // #
-console.log(encodeURI(set4)); // ABC%20abc%20123 (l'espace est encodé en %20)
-
-console.log(encodeURIComponent(set1)); // %3B%2C%2F%3F%3A%40%26%3D%2B%24
-console.log(encodeURIComponent(set2)); // -_.!~*'()
-console.log(encodeURIComponent(set3)); // #
-console.log(encodeURIComponent(set4)); // ABC%20abc%20123 (l'espace est encodé en %20)
-
-</pre>
-
-<p>Une exception {{jsxref("URIError")}} sera levée lorsqu'on utilise cette fonction sur un unique demi-codet qui est censé faire partie d'une paire de demi-codets :</p>
-
-<pre class="brush: js">// la paire de demi-codets : OK
-console.log(encodeURIComponent('\uD800\uDFFF'));
-
-// seul le demi-codet supérieur : "URIError: malformed URI sequence"
-console.log(encodeURIComponent('\uD800'));
-
-// seul le demi-codet inférieur : "URIError: malformed URI sequence"
-console.log(encodeURIComponent('\uDFFF'));
-</pre>
-
-<p>Afin d'éviter des requêtes inattendues vers le serveur, il est conseillé d'utiliser la fonction <code>encodeURIComponent()</code> pour n'importe quel paramètre qui aurait été saisi par l'utilisateur et qui ferait partie d'un URI. Ainsi, si un utilisateur peut saisir "<code>Thym &amp;access=admin</code>" dans une variable <code>commentaire</code> et qu'on n'utilise pas <code>encodeURIComponent()</code>, on obtiendra la chaîne <code>commentaire=Thym%20&amp;access=admin</code>. On voit ici que l'esperluette (&amp;) et le signe égal forment une nouvelle paire clé/valeur. Au lieu d'avoir une clé POST <code>commentaire</code> égale à "<code>Thym &amp;access=admin</code>", on aura deux clés POST, l'une égale à "<code>Thym </code>" et une seconde (<code>access</code>) égale à <code>admin</code>.</p>
-
-<p>Pour <a href="https://www.whatwg.org/specs/web-apps/current-work/multipage/association-of-controls-and-forms.html#application/x-www-form-urlencoded-encoding-algorithm"><code>application/x-www-form-urlencoded</code></a>, les espaces sont remplacés par un '+', aussi, dans ce cas, on pourra ajouter un remplacement supplémentaire après <code>encodeURIComponent()</code> pour remplacer "%20" par "+".</p>
-
-<p>Pour utiliser une fonction qui respecte la <a class="external" href="https://tools.ietf.org/html/rfc3986">RFC 3986</a>, plus stricte (qui réserve les caractères !, ', (, ), et * même si ces caractères n'ont pas d'usage normalisé), on pourra utiliser la fonction suivante :</p>
-
-<pre class="brush: js">function fixedEncodeURIComponent (str) {
-  return encodeURIComponent(str).replace(/[!'()*]/g, function(c) {
-    return '%' + c.charCodeAt(0).toString(16);
-  });
-}
-</pre>
-
-<h2 id="Exemples">Exemples</h2>
-
-<p>Dans l'exemple qui suit, on utilise une méthode spéciale pour l'encodage afin d'utiliser les paramètres d'en-tête de réponse <code>Content-Disposition</code> et <code>Link</code> (pour, par exemple, représenter des noms de fichiers en UTF-8) :</p>
-
-<pre class="brush: js">var nomFichier = 'mon fichier(2).txt';
-var header = "Content-Disposition: attachment; filename*=UTF-8''"
-             + encodeRFC5987ValueChars(nomFichier);
-
-console.log(header);
-// affiche "Content-Disposition: attachment; filename*=UTF-8''mon%20fichier%282%29.txt"
-
-
-function encodeRFC5987ValueChars (str) {
-    return encodeURIComponent(str).
-        // Bien que la RFC 3986 réserve "!", RFC 5987 ne réserve pas ce caractère,
-        // il n'est donc pas nécessaire l'échapper
-        replace(/['()]/g, escape). // c'est-à-dire %27 %28 %29
-        replace(/\*/g, '%2A').
-            // Selon la RFC 5987 ce qui suit n'est pas nécessairement requis
-            // on peut donc bénéficier d'un peu plus de lisibilité : |`^
-            replace(/%(?:7C|60|5E)/g, unescape);
-}
-
-// Voici une autre version équivalente
-function encodeRFC5987ValueChars2(str) {
-  return encodeURIComponent(str).
-    // Bien que la RFC 3986 réserve "!", RFC 5987 ne réserve pas ce caractère,
-    // il n'est donc pas nécessaire l'échapper
-    replace(/['()*]/g, c =&gt; '%' + c.charCodeAt(0).toString(16)). // i.e., %27 %28 %29 %2a
-    // on notera que l'encodage valide pour "*" est %2A et qui faut donc appeler toUpperCase()
-    // pour encoder exactement.
-
-    // Selon la RFC 5987 ce qui suit n'est pas nécessairement requis
-    // on peut donc bénéficier d'un peu plus de lisibilité : |`^
-    replace(/%(7C|60|5E)/g, (str, hex) =&gt; String.fromCharCode(parseInt(hex, 16)));
-}
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES3')}}</td>
-   <td>{{Spec2('ES3')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-15.1.3.4', 'encodeURIComponent')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-encodeuricomponent-uricomponent', 'encodeURIComponent')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-encodeuricomponent-uricomponent', 'encodeURIComponent')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.encodeURIComponent")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("decodeURI")}}</li>
- <li>{{jsxref("encodeURI")}}</li>
- <li>{{jsxref("decodeURIComponent")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/encodeuricomponent/index.md b/files/fr/web/javascript/reference/global_objects/encodeuricomponent/index.md
new file mode 100644
index 0000000000..fdb9bdb700
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/encodeuricomponent/index.md
@@ -0,0 +1,136 @@
+---
+title: encodeURIComponent()
+slug: Web/JavaScript/Reference/Global_Objects/encodeURIComponent
+tags:
+  - JavaScript
+  - Reference
+  - URI
+translation_of: Web/JavaScript/Reference/Global_Objects/encodeURIComponent
+original_slug: Web/JavaScript/Reference/Objets_globaux/encodeURIComponent
+---
+{{jsSidebar("Objects")}}
+
+La fonction **`encodeURIComponent()`** permet d'encoder un composant d'un Uniform Resource Identifier (URI) en remplaçant chaque exemplaire de certains caractères par une, deux, trois ou quatres séquences d'échappement UTF-8 correspondantes (quatre séquences seront utilisées uniquement lorsque les caractères à encoder sont composés de deux caractères « _surrogate_ »).
+
+{{EmbedInteractiveExample("pages/js/globalprops-encodeuricomponent.html")}}
+
+## Syntaxe
+
+    encodeURIComponent(str);
+
+### Paramètres
+
+- `str`
+  - : Une chaîne de caractères qui correspond à un composant d'URI.
+
+### Valeur de retour
+
+Une nouvelle chaîne de caractères qui représente un composant d'URI obtenu en encodant la chaîne passée en argument.
+
+## Description
+
+`encodeURIComponent()` échappe tous les caractères sauf : les lettres de l'alphabet latin, les chiffres (arabes) et `- _ . ! ~ * ' ( )`
+
+La méthode `encodeURIComponent()` diffère de la méthode `encodeURI()` par rapport aux caractères qui sont encodés :
+
+```js
+var set1 = ";,/?:@&=+$";  // Caractères réservés
+var set2 = "-_.!~*'()";   // Caractères non-réservés
+var set3 = "#";           // Croisillon
+var set4 = "ABC abc 123"; // Caractères alphanumériques et espace
+
+console.log(encodeURI(set1)); // ;,/?:@&=+$
+console.log(encodeURI(set2)); // -_.!~*'()
+console.log(encodeURI(set3)); // #
+console.log(encodeURI(set4)); // ABC%20abc%20123 (l'espace est encodé en %20)
+
+console.log(encodeURIComponent(set1)); // %3B%2C%2F%3F%3A%40%26%3D%2B%24
+console.log(encodeURIComponent(set2)); // -_.!~*'()
+console.log(encodeURIComponent(set3)); // #
+console.log(encodeURIComponent(set4)); // ABC%20abc%20123 (l'espace est encodé en %20)
+```
+
+Une exception {{jsxref("URIError")}} sera levée lorsqu'on utilise cette fonction sur un unique demi-codet qui est censé faire partie d'une paire de demi-codets :
+
+```js
+// la paire de demi-codets : OK
+console.log(encodeURIComponent('\uD800\uDFFF'));
+
+// seul le demi-codet supérieur : "URIError: malformed URI sequence"
+console.log(encodeURIComponent('\uD800'));
+
+// seul le demi-codet inférieur : "URIError: malformed URI sequence"
+console.log(encodeURIComponent('\uDFFF'));
+```
+
+Afin d'éviter des requêtes inattendues vers le serveur, il est conseillé d'utiliser la fonction `encodeURIComponent()` pour n'importe quel paramètre qui aurait été saisi par l'utilisateur et qui ferait partie d'un URI. Ainsi, si un utilisateur peut saisir "`Thym &access=admin`" dans une variable `commentaire` et qu'on n'utilise pas `encodeURIComponent()`, on obtiendra la chaîne `commentaire=Thym%20&access=admin`. On voit ici que l'esperluette (&) et le signe égal forment une nouvelle paire clé/valeur. Au lieu d'avoir une clé POST `commentaire` égale à "`Thym &access=admin`", on aura deux clés POST, l'une égale à "`Thym `" et une seconde (`access`) égale à `admin`.
+
+Pour [`application/x-www-form-urlencoded`](https://www.whatwg.org/specs/web-apps/current-work/multipage/association-of-controls-and-forms.html#application/x-www-form-urlencoded-encoding-algorithm), les espaces sont remplacés par un '+', aussi, dans ce cas, on pourra ajouter un remplacement supplémentaire après `encodeURIComponent()` pour remplacer "%20" par "+".
+
+Pour utiliser une fonction qui respecte la [RFC 3986](https://tools.ietf.org/html/rfc3986), plus stricte (qui réserve les caractères !, ', (, ), et \* même si ces caractères n'ont pas d'usage normalisé), on pourra utiliser la fonction suivante :
+
+```js
+function fixedEncodeURIComponent (str) {
+  return encodeURIComponent(str).replace(/[!'()*]/g, function(c) {
+    return '%' + c.charCodeAt(0).toString(16);
+  });
+}
+```
+
+## Exemples
+
+Dans l'exemple qui suit, on utilise une méthode spéciale pour l'encodage afin d'utiliser les paramètres d'en-tête de réponse `Content-Disposition` et `Link` (pour, par exemple, représenter des noms de fichiers en UTF-8) :
+
+```js
+var nomFichier = 'mon fichier(2).txt';
+var header = "Content-Disposition: attachment; filename*=UTF-8''"
+             + encodeRFC5987ValueChars(nomFichier);
+
+console.log(header);
+// affiche "Content-Disposition: attachment; filename*=UTF-8''mon%20fichier%282%29.txt"
+
+
+function encodeRFC5987ValueChars (str) {
+    return encodeURIComponent(str).
+        // Bien que la RFC 3986 réserve "!", RFC 5987 ne réserve pas ce caractère,
+        // il n'est donc pas nécessaire l'échapper
+        replace(/['()]/g, escape). // c'est-à-dire %27 %28 %29
+        replace(/\*/g, '%2A').
+            // Selon la RFC 5987 ce qui suit n'est pas nécessairement requis
+            // on peut donc bénéficier d'un peu plus de lisibilité : |`^
+            replace(/%(?:7C|60|5E)/g, unescape);
+}
+
+// Voici une autre version équivalente
+function encodeRFC5987ValueChars2(str) {
+  return encodeURIComponent(str).
+    // Bien que la RFC 3986 réserve "!", RFC 5987 ne réserve pas ce caractère,
+    // il n'est donc pas nécessaire l'échapper
+    replace(/['()*]/g, c => '%' + c.charCodeAt(0).toString(16)). // i.e., %27 %28 %29 %2a
+    // on notera que l'encodage valide pour "*" est %2A et qui faut donc appeler toUpperCase()
+    // pour encoder exactement.
+
+    // Selon la RFC 5987 ce qui suit n'est pas nécessairement requis
+    // on peut donc bénéficier d'un peu plus de lisibilité : |`^
+    replace(/%(7C|60|5E)/g, (str, hex) => String.fromCharCode(parseInt(hex, 16)));
+}
+```
+
+## Spécifications
+
+| Spécification                                                                                                    | État                         | Commentaires         |
+| ---------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName('ES3')}}                                                                                         | {{Spec2('ES3')}}         | Définition initiale. |
+| {{SpecName('ES5.1', '#sec-15.1.3.4', 'encodeURIComponent')}}                                 | {{Spec2('ES5.1')}}     |                      |
+| {{SpecName('ES6', '#sec-encodeuricomponent-uricomponent', 'encodeURIComponent')}}     | {{Spec2('ES6')}}         |                      |
+| {{SpecName('ESDraft', '#sec-encodeuricomponent-uricomponent', 'encodeURIComponent')}} | {{Spec2('ESDraft')}} |                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.encodeURIComponent")}}
+
+## Voir aussi
+
+- {{jsxref("decodeURI")}}
+- {{jsxref("encodeURI")}}
+- {{jsxref("decodeURIComponent")}}
diff --git a/files/fr/web/javascript/reference/global_objects/error/columnnumber/index.html b/files/fr/web/javascript/reference/global_objects/error/columnnumber/index.html
deleted file mode 100644
index b507d0b41f..0000000000
--- a/files/fr/web/javascript/reference/global_objects/error/columnnumber/index.html
+++ /dev/null
@@ -1,40 +0,0 @@
----
-title: Error.prototype.columnNumber
-slug: Web/JavaScript/Reference/Global_Objects/Error/columnNumber
-tags:
-  - Error
-  - JavaScript
-  - Non-standard
-  - Propriété
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Error/columnNumber
-original_slug: Web/JavaScript/Reference/Objets_globaux/Error/columnNumber
----
-<div>{{JSRef}} {{non-standard_header}}</div>
-
-<p>La propriété <code><strong>columnNumber</strong></code> contient le numéro de la colonne, dans la ligne du fichier qui a déclenché l'erreur.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Utiliser_de_columnNumber">Utiliser de <code>columnNumber</code></h3>
-
-<pre class="brush: js">var e = new Error("Ne peut pas lire la donnée");
-throw e;
-console.log(e.columnNumber) // 0
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<p>Ne fait partie d'aucune spécification. Non standard.</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Error.columnNumber")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Error.prototype.stack")}} {{non-standard_inline}}</li>
- <li>{{jsxref("Error.prototype.lineNumber")}} {{non-standard_inline}}</li>
- <li>{{jsxref("Error.prototype.fileName")}} {{non-standard_inline}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/error/columnnumber/index.md b/files/fr/web/javascript/reference/global_objects/error/columnnumber/index.md
new file mode 100644
index 0000000000..2af2806a79
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/error/columnnumber/index.md
@@ -0,0 +1,39 @@
+---
+title: Error.prototype.columnNumber
+slug: Web/JavaScript/Reference/Global_Objects/Error/columnNumber
+tags:
+  - Error
+  - JavaScript
+  - Non-standard
+  - Propriété
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Error/columnNumber
+original_slug: Web/JavaScript/Reference/Objets_globaux/Error/columnNumber
+---
+{{JSRef}} {{non-standard_header}}
+
+La propriété **`columnNumber`** contient le numéro de la colonne, dans la ligne du fichier qui a déclenché l'erreur.
+
+## Exemples
+
+### Utiliser de `columnNumber`
+
+```js
+var e = new Error("Ne peut pas lire la donnée");
+throw e;
+console.log(e.columnNumber) // 0
+```
+
+## Spécifications
+
+Ne fait partie d'aucune spécification. Non standard.
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Error.columnNumber")}}
+
+## Voir aussi
+
+- {{jsxref("Error.prototype.stack")}} {{non-standard_inline}}
+- {{jsxref("Error.prototype.lineNumber")}} {{non-standard_inline}}
+- {{jsxref("Error.prototype.fileName")}} {{non-standard_inline}}
diff --git a/files/fr/web/javascript/reference/global_objects/error/filename/index.html b/files/fr/web/javascript/reference/global_objects/error/filename/index.html
deleted file mode 100644
index 2a2cda2422..0000000000
--- a/files/fr/web/javascript/reference/global_objects/error/filename/index.html
+++ /dev/null
@@ -1,45 +0,0 @@
----
-title: Error.prototype.fileName
-slug: Web/JavaScript/Reference/Global_Objects/Error/fileName
-tags:
-  - Error
-  - JavaScript
-  - Non-standard
-  - Propriété
-  - Prototype
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Error/fileName
-original_slug: Web/JavaScript/Reference/Objets_globaux/Error/fileName
----
-<div>{{JSRef}} {{non-standard_header}}</div>
-
-<p>La propriété <code><strong>fileName</strong></code> contient le chemin vers le fichier qui a déclenché l'erreur.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>Cette propriété non-standard contient le chemin vers le fichier qui a déclenché cette erreur. Si elle est appelée depuis un débugger (les outils de développement de Firefox par exemple), "debugger eval code" sera renvoyé.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Utiliser_fileName">Utiliser <code>fileName</code></h3>
-
-<pre class="brush: js">var e = new Error("Ne peut pas lire la donnée");
-throw e;
-// e.fileName peut ressembler à "file:///C:/exemple.html"
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<p>Ne fait partie d'aucune spécification. Non standard.</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Error.fileName")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Error.prototype.stack")}} {{non-standard_inline}}</li>
- <li>{{jsxref("Error.prototype.columnNumber")}} {{non-standard_inline}}</li>
- <li>{{jsxref("Error.prototype.lineNumber")}} {{non-standard_inline}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/error/filename/index.md b/files/fr/web/javascript/reference/global_objects/error/filename/index.md
new file mode 100644
index 0000000000..ca5fbf3e64
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/error/filename/index.md
@@ -0,0 +1,44 @@
+---
+title: Error.prototype.fileName
+slug: Web/JavaScript/Reference/Global_Objects/Error/fileName
+tags:
+  - Error
+  - JavaScript
+  - Non-standard
+  - Propriété
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Error/fileName
+original_slug: Web/JavaScript/Reference/Objets_globaux/Error/fileName
+---
+{{JSRef}} {{non-standard_header}}
+
+La propriété **`fileName`** contient le chemin vers le fichier qui a déclenché l'erreur.
+
+## Description
+
+Cette propriété non-standard contient le chemin vers le fichier qui a déclenché cette erreur. Si elle est appelée depuis un débugger (les outils de développement de Firefox par exemple), "debugger eval code" sera renvoyé.
+
+## Exemples
+
+### Utiliser `fileName`
+
+```js
+var e = new Error("Ne peut pas lire la donnée");
+throw e;
+// e.fileName peut ressembler à "file:///C:/exemple.html"
+```
+
+## Spécifications
+
+Ne fait partie d'aucune spécification. Non standard.
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Error.fileName")}}
+
+## Voir aussi
+
+- {{jsxref("Error.prototype.stack")}} {{non-standard_inline}}
+- {{jsxref("Error.prototype.columnNumber")}} {{non-standard_inline}}
+- {{jsxref("Error.prototype.lineNumber")}} {{non-standard_inline}}
diff --git a/files/fr/web/javascript/reference/global_objects/error/index.html b/files/fr/web/javascript/reference/global_objects/error/index.html
deleted file mode 100644
index 5675ff256a..0000000000
--- a/files/fr/web/javascript/reference/global_objects/error/index.html
+++ /dev/null
@@ -1,246 +0,0 @@
----
-title: Error
-slug: Web/JavaScript/Reference/Global_Objects/Error
-tags:
-  - Error
-  - JavaScript
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Error
-original_slug: Web/JavaScript/Reference/Objets_globaux/Error
----
-<div>{{JSRef}}</div>
-
-<p>Le constructeur <strong><code>Error</code></strong> crée un objet d'erreur. Des instances d'objets <code>Error</code> sont déclenchées lorsque des erreurs d'exécution surviennent. L'objet <code>Error</code> peut aussi être utilisé comme objet de base pour des exceptions définies par l'utilisateur. Voir ci-dessous pour les types d'erreur natifs standard.</p>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox notranslate">new Error([<var>message</var>[, <var>fileName</var>[, <var>lineNumber</var>]]])</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>message</code> {{optional_inline}}</dt>
- <dd>Description de l'erreur sous une forme lisible par un humain.</dd>
- <dt><code>fileName</code> {{optional_inline}}{{Non-standard_inline}}</dt>
- <dd>Argument qui sera utilisé pour la valeur de la propriété <code>fileName</code> dans l'objet <code>Error</code> créé. Par défaut, ce sera le nom du fichier contenant le code qui a appelé le constructeur <code>Error()</code>.</dd>
- <dt><code>lineNumber</code> {{optional_inline}}{{Non-standard_inline}}</dt>
- <dd>Argument qui sera utilisé pour la valeur de la propriété <code>lineNumber</code> dans l'objet <code>Error</code> créé. Par défaut, ce sera le numéro de la ligne contenant l'invocation du constructeur <code>Error()</code>.</dd>
-</dl>
-
-<h2 id="Description">Description</h2>
-
-<p>Les erreurs d'exécution ont pour résultat la création et le déclenchement d'objets <code>Error</code>.</p>
-
-<p>Cette page documente l'utilisation de l'objet <code>Error</code> lui-même et son utilisation comme fonction constructeur. Pour une liste des propriétés et des méthodes héritées par les instances d'<code>Error</code>,  voir {{jsxref("Error.prototype")}}.</p>
-
-<h3 id="Utilisation_de_Error_comme_fonction">Utilisation de <code>Error</code> comme fonction</h3>
-
-<p>Lorsqu'<code>Error</code> est utilisée comme fonction sans utiliser l'opérateur {{jsxref("Opérateurs/L_opérateur_new", "new")}}, cet appel renverra un objet <code>Error</code>. Aussi, un simple appel à <code>Error</code> produira le même résultat qu'une invocation avec <code>new</code>.</p>
-
-<pre class="brush: js notranslate">// Cette instruction :
-const x = Error("J'ai été créée sans new");
-
-// Aura le même effet que
-const y = new Error("J'ai été créée avec new");</pre>
-
-<h3 id="Types_derreur">Types d'erreur</h3>
-
-<p>En plus du constructeur <code>Error</code> générique, il existe sept autres constructeurs d'erreur de base en JavaScript. Pour les exceptions côté client, voir <a href="/fr/docs/Web/JavaScript/Guide/Contr%C3%B4le_du_flux_Gestion_des_erreurs">Contrôle du flux d'instructions et gestion des erreurs</a>.</p>
-
-<dl>
- <dt>{{jsxref("EvalError")}}</dt>
- <dd>Crée une instance représentant une erreur se produisant en relation avec la fonction globale {{jsxref("eval","eval()")}}.</dd>
- <dt>{{jsxref("RangeError")}}</dt>
- <dd>Crée une instance représentant une erreur se produisant quand une variable numérique ou un paramètre est en dehors de sa plage de validité.</dd>
- <dt>{{jsxref("ReferenceError")}}</dt>
- <dd>Crée une instance représentant une erreur se produisant lors du déréférencement d'une référence invalide.</dd>
- <dt>{{jsxref("SyntaxError")}}</dt>
- <dd>Crée une instance représentant une erreur de syntaxe se produisant lors d'une analyse de code dans {{jsxref("eval", "eval()")}}.</dd>
- <dt>{{jsxref("TypeError")}}</dt>
- <dd>Crée une instance représentant une erreur se produisant quand une variable ou un paramètre n'est pas d'un type valide.</dd>
- <dt>{{jsxref("URIError")}}</dt>
- <dd>Crée une instance représentant une erreur se produisant quand des paramètres invalides sont passés à {{jsxref("encodeURI", "encodeURI()")}} ou à {{jsxref("decodeURI", "decodeURI()")}}.</dd>
- <dt>{{JSxRef("AggregateError")}}</dt>
- <dd>Crée une instance représentant différentes erreurs agrégées en une seule lorsque plusieurs erreurs sont rapportées par une opération, par exemple avec {{JSxRef("Promise.any()")}}.</dd>
- <dt>{{jsxref("InternalError")}} {{non-standard_inline}}</dt>
- <dd>Crée une instance représentant une erreur se produisant quand une erreur interne dans le moteur JavaScript est déclenchée. Par ex., "too much recursion".</dd>
-</dl>
-
-<h2 id="Propriétés">Propriétés</h2>
-
-<dl>
- <dt>{{jsxref("Error.prototype")}}</dt>
- <dd>Permet l'ajout de propriétés aux instances <code>Error</code>.</dd>
-</dl>
-
-<h2 id="Méthodes">Méthodes</h2>
-
-<p>L'objet global <code>Error</code> ne contient pas de méthodes en propre, toutefois, il hérite de certaines méthodes via la chaine de prototype.</p>
-
-<h2 id="Instances_dError">Instances d'<code>Error</code></h2>
-
-<div>{{page('fr/docs/JavaScript/Reference/Objets_globaux/Error/prototype', 'Description')}}</div>
-
-<h3 id="Propriétés_2">Propriétés</h3>
-
-<p>{{page('fr/docs/JavaScript/Reference/Objets_globaux/Error/prototype', 'Propriétés')}}</p>
-
-<h3 id="Méthodes_2">Méthodes</h3>
-
-<p>{{page('fr/docs/JavaScript/Reference/Objets_globaux/Error/prototype', 'Méthodes')}}</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Déclenchement_dune_erreur_générique">Déclenchement d'une erreur générique</h3>
-
-<p>Vous créez habituellement un objet <code>Error</code> dans l'intention de le déclencher en utilisant le mot-clé {{jsxref("Instructions/throw", "throw")}}. Vous pouvez gérer l'erreur en utilisant la construction {{jsxref("Instructions/try...catch", "try...catch")}} :</p>
-
-<pre class="brush: js notranslate">try {
-    throw new Error("Ouups !");
-} catch (e) {
-    console.log(e.name + ": " + e.message);
-}
-</pre>
-
-<h3 id="Gestion_dune_erreur_spécifique">Gestion d'une erreur spécifique</h3>
-
-<p>Vous pouvez choisir de ne gérer que des types d'erreur particuliers en testant le type de l'erreur via la propriété {{jsxref("Object.prototype.constructor", "constructor")}} de l'erreur ou, si vous écrivez pour des interpréteurs JavaScript modernes, le mot-clé {{jsxref("Opérateurs/instanceof", "instanceof")}} :</p>
-
-<pre class="brush: js notranslate">try {
-    machin.truc();
-} catch (e) {
-    if (e instanceof EvalError) {
-        console.log(e.name + ": " + e.message);
-    } else if (e instanceof RangeError) {
-        console.log(e.name + ": " + e.message);
-    }
-    // ... etc
-}
-</pre>
-
-<h3 id="Types_derreur_personnalisés">Types d'erreur personnalisés</h3>
-
-<p>Vous pouvez vouloir définir vos propres types d'erreur dérivants d'<code>Error</code> pour pouvoir écrire <code>throw new MonErreur()</code> et utiliser <code>instanceof MonErreur</code> afin de vérifier le type d'erreur dans le gestionnaire d'exceptions. Cela a pour résultat un code de gestion d'erreur plus propre et plus cohérent. Voir <a href="http://stackoverflow.com/questions/1382107/whats-a-good-way-to-extend-error-in-javascript"><em>What's a good way to extend Error in JavaScript?</em></a> sur StackOverflow pour une discussion en profondeur.</p>
-
-<h4 id="Classes_derreur_personnalisées_avec_ECMAScript_2015_ES6">Classes d'erreur personnalisées avec ECMAScript 2015 / ES6</h4>
-
-<div class="warning">
-<p><strong>Attention :</strong> Babel, dans les versions antérieures à Babel 7, ainsi que d'autres transpileurs ne géreront pas correctement le code suivant sans <a href="https://github.com/loganfsmyth/babel-plugin-transform-builtin-extend">configuration supplémentaire</a>. Les versions de Babel antérieures à la version 7 peuvent uniquement gérer les classes d'erreur personnalisées lorsque celles-ci sont créées avec <code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object/defineProperty">Object.defineProperty()</a></code>.</p>
-</div>
-
-<div class="note">
-<p><strong>Note :</strong> Certains navigateurs incluent le constructeur <code>CustomError</code> (Erreur Personnalisée) dans la pile d'appels lors de l'utilisation de classes ES6.</p>
-</div>
-
-<pre class="brush: js notranslate">class CustomError extends Error {
-  constructor(machin = 'truc', ...params) {
-    // Passer les arguments restants (incluant ceux spécifiques au vendeur) au constructeur parent
-    super(...params);
-
-    // Maintenir dans la pile une trace adéquate de l'endroit où l'erreur a été déclenchée (disponible seulement en V8)
-    if(Error.captureStackTrace) {
-      Error.captureStackTrace(this, CustomError);
-    }
-    this.name = 'CustomError';
-    // Informations de déboguage personnalisées
-    this.machin = machin;
-    this.date = new Date();
-  }
-}
-
-try {
-  throw new CustomError('bidule', 'messageBidule');
-} catch(e){
-  console.log(e.name);    // CustomError
-  console.log(e.machin);  // bidule
-  console.log(e.message); // messageBidule
-  console.log(e.stack);   // stacktrace
-}</pre>
-
-<h4 id="Objet_derreur_personnalisé_ES5">Objet d'erreur personnalisé ES5</h4>
-
-<div class="warning">
-<p><strong>Attention :</strong> Tous les navigateurs incluent le constructeur <code>CustomError</code> dans la pile  d'appel lorsqu'une déclaration prototypale est utilisée.</p>
-</div>
-
-<pre class="brush: js notranslate">function CustomError(machin, message, nomFichier, numeroLigne) {
-  var instance = new Error(message, nomFichier, numeroLigne);
-  instance.name = 'CustomError';
-  instance.machin = machin;
-  Object.setPrototypeOf(instance, Object.getPrototypeOf(this));
-  if(Error.captureStackTrace) {
-    Error.captureStackTrace(instance, CustomError);
-  }
-  return instance;
-}
-
-CustomError.prototype = Object.create(Error.prototype, {
-  constructor: {
-    value: Error,
-    enumerable: false,
-    writable: true,
-    configurable: true
-  }
-});
-
-if (Object.setPrototypeOf){
-  Object.setPrototypeOf(CustomError, Error);
-} else {
-  CustomError.__proto__ = Error;
-}
-
-
-try {
-  throw new CustomError('bidule', 'messageBidule');
-} catch(e){
-  console.log(e.name);       // CustomError
-  console.log(e.toto);       // bidule
-  console.log(e.message);    // messageBidule
-  console.log(e.lineNumber); // 29
-}</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-error-objects', 'Error')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-error-objects', 'Error')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-15.11', 'Error')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES1')}}</td>
-   <td>{{Spec2('ES1')}}</td>
-   <td>Définition initiale. Implémentée avec JavaScript 1.1.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Error")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Error.prototype")}}</li>
- <li>{{jsxref("Instructions/throw", "throw")}}</li>
- <li>{{jsxref("Instructions/try...catch", "try...catch")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/error/index.md b/files/fr/web/javascript/reference/global_objects/error/index.md
new file mode 100644
index 0000000000..037520b23f
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/error/index.md
@@ -0,0 +1,215 @@
+---
+title: Error
+slug: Web/JavaScript/Reference/Global_Objects/Error
+tags:
+  - Error
+  - JavaScript
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Error
+original_slug: Web/JavaScript/Reference/Objets_globaux/Error
+---
+{{JSRef}}
+
+Le constructeur **`Error`** crée un objet d'erreur. Des instances d'objets `Error` sont déclenchées lorsque des erreurs d'exécution surviennent. L'objet `Error` peut aussi être utilisé comme objet de base pour des exceptions définies par l'utilisateur. Voir ci-dessous pour les types d'erreur natifs standard.
+
+## Syntaxe
+
+    new Error([message[, fileName[, lineNumber]]])
+
+### Paramètres
+
+- `message` {{optional_inline}}
+  - : Description de l'erreur sous une forme lisible par un humain.
+- `fileName` {{optional_inline}}{{Non-standard_inline}}
+  - : Argument qui sera utilisé pour la valeur de la propriété `fileName` dans l'objet `Error` créé. Par défaut, ce sera le nom du fichier contenant le code qui a appelé le constructeur `Error()`.
+- `lineNumber` {{optional_inline}}{{Non-standard_inline}}
+  - : Argument qui sera utilisé pour la valeur de la propriété `lineNumber` dans l'objet `Error` créé. Par défaut, ce sera le numéro de la ligne contenant l'invocation du constructeur `Error()`.
+
+## Description
+
+Les erreurs d'exécution ont pour résultat la création et le déclenchement d'objets `Error`.
+
+Cette page documente l'utilisation de l'objet `Error` lui-même et son utilisation comme fonction constructeur. Pour une liste des propriétés et des méthodes héritées par les instances d'`Error`,  voir {{jsxref("Error.prototype")}}.
+
+### Utilisation de `Error` comme fonction
+
+Lorsqu'`Error` est utilisée comme fonction sans utiliser l'opérateur {{jsxref("Opérateurs/L_opérateur_new", "new")}}, cet appel renverra un objet `Error`. Aussi, un simple appel à `Error` produira le même résultat qu'une invocation avec `new`.
+
+```js
+// Cette instruction :
+const x = Error("J'ai été créée sans new");
+
+// Aura le même effet que
+const y = new Error("J'ai été créée avec new");
+```
+
+### Types d'erreur
+
+En plus du constructeur `Error` générique, il existe sept autres constructeurs d'erreur de base en JavaScript. Pour les exceptions côté client, voir [Contrôle du flux d'instructions et gestion des erreurs](/fr/docs/Web/JavaScript/Guide/Contr%C3%B4le_du_flux_Gestion_des_erreurs).
+
+- {{jsxref("EvalError")}}
+  - : Crée une instance représentant une erreur se produisant en relation avec la fonction globale {{jsxref("eval","eval()")}}.
+- {{jsxref("RangeError")}}
+  - : Crée une instance représentant une erreur se produisant quand une variable numérique ou un paramètre est en dehors de sa plage de validité.
+- {{jsxref("ReferenceError")}}
+  - : Crée une instance représentant une erreur se produisant lors du déréférencement d'une référence invalide.
+- {{jsxref("SyntaxError")}}
+  - : Crée une instance représentant une erreur de syntaxe se produisant lors d'une analyse de code dans {{jsxref("eval", "eval()")}}.
+- {{jsxref("TypeError")}}
+  - : Crée une instance représentant une erreur se produisant quand une variable ou un paramètre n'est pas d'un type valide.
+- {{jsxref("URIError")}}
+  - : Crée une instance représentant une erreur se produisant quand des paramètres invalides sont passés à {{jsxref("encodeURI", "encodeURI()")}} ou à {{jsxref("decodeURI", "decodeURI()")}}.
+- {{JSxRef("AggregateError")}}
+  - : Crée une instance représentant différentes erreurs agrégées en une seule lorsque plusieurs erreurs sont rapportées par une opération, par exemple avec {{JSxRef("Promise.any()")}}.
+- {{jsxref("InternalError")}} {{non-standard_inline}}
+  - : Crée une instance représentant une erreur se produisant quand une erreur interne dans le moteur JavaScript est déclenchée. Par ex., "too much recursion".
+
+## Propriétés
+
+- {{jsxref("Error.prototype")}}
+  - : Permet l'ajout de propriétés aux instances `Error`.
+
+## Méthodes
+
+L'objet global `Error` ne contient pas de méthodes en propre, toutefois, il hérite de certaines méthodes via la chaine de prototype.
+
+## Instances d'`Error`
+
+{{page('fr/docs/JavaScript/Reference/Objets_globaux/Error/prototype', 'Description')}}
+
+### Propriétés
+
+{{page('fr/docs/JavaScript/Reference/Objets_globaux/Error/prototype', 'Propriétés')}}
+
+### Méthodes
+
+{{page('fr/docs/JavaScript/Reference/Objets_globaux/Error/prototype', 'Méthodes')}}
+
+## Exemples
+
+### Déclenchement d'une erreur générique
+
+Vous créez habituellement un objet `Error` dans l'intention de le déclencher en utilisant le mot-clé {{jsxref("Instructions/throw", "throw")}}. Vous pouvez gérer l'erreur en utilisant la construction {{jsxref("Instructions/try...catch", "try...catch")}} :
+
+```js
+try {
+    throw new Error("Ouups !");
+} catch (e) {
+    console.log(e.name + ": " + e.message);
+}
+```
+
+### Gestion d'une erreur spécifique
+
+Vous pouvez choisir de ne gérer que des types d'erreur particuliers en testant le type de l'erreur via la propriété {{jsxref("Object.prototype.constructor", "constructor")}} de l'erreur ou, si vous écrivez pour des interpréteurs JavaScript modernes, le mot-clé {{jsxref("Opérateurs/instanceof", "instanceof")}} :
+
+```js
+try {
+    machin.truc();
+} catch (e) {
+    if (e instanceof EvalError) {
+        console.log(e.name + ": " + e.message);
+    } else if (e instanceof RangeError) {
+        console.log(e.name + ": " + e.message);
+    }
+    // ... etc
+}
+```
+
+### Types d'erreur personnalisés
+
+Vous pouvez vouloir définir vos propres types d'erreur dérivants d'`Error` pour pouvoir écrire `throw new MonErreur()` et utiliser `instanceof MonErreur` afin de vérifier le type d'erreur dans le gestionnaire d'exceptions. Cela a pour résultat un code de gestion d'erreur plus propre et plus cohérent. Voir [_What's a good way to extend Error in JavaScript?_](http://stackoverflow.com/questions/1382107/whats-a-good-way-to-extend-error-in-javascript) sur StackOverflow pour une discussion en profondeur.
+
+#### Classes d'erreur personnalisées avec ECMAScript 2015 / ES6
+
+> **Attention :** Babel, dans les versions antérieures à Babel 7, ainsi que d'autres transpileurs ne géreront pas correctement le code suivant sans [configuration supplémentaire](https://github.com/loganfsmyth/babel-plugin-transform-builtin-extend). Les versions de Babel antérieures à la version 7 peuvent uniquement gérer les classes d'erreur personnalisées lorsque celles-ci sont créées avec [`Object.defineProperty()`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object/defineProperty).
+
+> **Note :** Certains navigateurs incluent le constructeur `CustomError` (Erreur Personnalisée) dans la pile d'appels lors de l'utilisation de classes ES6.
+
+```js
+class CustomError extends Error {
+  constructor(machin = 'truc', ...params) {
+    // Passer les arguments restants (incluant ceux spécifiques au vendeur) au constructeur parent
+    super(...params);
+
+    // Maintenir dans la pile une trace adéquate de l'endroit où l'erreur a été déclenchée (disponible seulement en V8)
+    if(Error.captureStackTrace) {
+      Error.captureStackTrace(this, CustomError);
+    }
+    this.name = 'CustomError';
+    // Informations de déboguage personnalisées
+    this.machin = machin;
+    this.date = new Date();
+  }
+}
+
+try {
+  throw new CustomError('bidule', 'messageBidule');
+} catch(e){
+  console.log(e.name);    // CustomError
+  console.log(e.machin);  // bidule
+  console.log(e.message); // messageBidule
+  console.log(e.stack);   // stacktrace
+}
+```
+
+#### Objet d'erreur personnalisé ES5
+
+> **Attention :** Tous les navigateurs incluent le constructeur `CustomError` dans la pile  d'appel lorsqu'une déclaration prototypale est utilisée.
+
+```js
+function CustomError(machin, message, nomFichier, numeroLigne) {
+  var instance = new Error(message, nomFichier, numeroLigne);
+  instance.name = 'CustomError';
+  instance.machin = machin;
+  Object.setPrototypeOf(instance, Object.getPrototypeOf(this));
+  if(Error.captureStackTrace) {
+    Error.captureStackTrace(instance, CustomError);
+  }
+  return instance;
+}
+
+CustomError.prototype = Object.create(Error.prototype, {
+  constructor: {
+    value: Error,
+    enumerable: false,
+    writable: true,
+    configurable: true
+  }
+});
+
+if (Object.setPrototypeOf){
+  Object.setPrototypeOf(CustomError, Error);
+} else {
+  CustomError.__proto__ = Error;
+}
+
+
+try {
+  throw new CustomError('bidule', 'messageBidule');
+} catch(e){
+  console.log(e.name);       // CustomError
+  console.log(e.toto);       // bidule
+  console.log(e.message);    // messageBidule
+  console.log(e.lineNumber); // 29
+}
+```
+
+## Spécifications
+
+| Spécification                                                            | État                         | Commentaires                                          |
+| ------------------------------------------------------------------------ | ---------------------------- | ----------------------------------------------------- |
+| {{SpecName('ESDraft', '#sec-error-objects', 'Error')}} | {{Spec2('ESDraft')}} |                                                       |
+| {{SpecName('ES2015', '#sec-error-objects', 'Error')}} | {{Spec2('ES2015')}}     |                                                       |
+| {{SpecName('ES5.1', '#sec-15.11', 'Error')}}             | {{Spec2('ES5.1')}}     |                                                       |
+| {{SpecName('ES1')}}                                                 | {{Spec2('ES1')}}         | Définition initiale. Implémentée avec JavaScript 1.1. |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Error")}}
+
+## Voir aussi
+
+- {{jsxref("Error.prototype")}}
+- {{jsxref("Instructions/throw", "throw")}}
+- {{jsxref("Instructions/try...catch", "try...catch")}}
diff --git a/files/fr/web/javascript/reference/global_objects/error/linenumber/index.html b/files/fr/web/javascript/reference/global_objects/error/linenumber/index.html
deleted file mode 100644
index d82a788e79..0000000000
--- a/files/fr/web/javascript/reference/global_objects/error/linenumber/index.html
+++ /dev/null
@@ -1,52 +0,0 @@
----
-title: Error.prototype.lineNumber
-slug: Web/JavaScript/Reference/Global_Objects/Error/lineNumber
-tags:
-  - Error
-  - JavaScript
-  - Non-standard
-  - Propriété
-  - Prototype
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Error/lineNumber
-original_slug: Web/JavaScript/Reference/Objets_globaux/Error/lineNumber
----
-<div>{{JSRef}} {{non-standard_header}}</div>
-
-<p>La propriété <code><strong>lineNumber</strong></code> contient le numéro de la ligne qui a déclenché l'erreur dans le fichier.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Utiliser_lineNumber">Utiliser <code>lineNumber</code></h3>
-
-<pre class="brush: js">var e = new Error("Ne peut pas lire la donnée");
-throw e;
-console.log(e.lineNumber) // 2</pre>
-
-<h3 id="Alternative_en_utilisant_l'événement_error">Alternative en utilisant l'événement <code>error</code></h3>
-
-<pre class="brush: js">window.addEventListener("error", function (e) {
- console.log(e.lineNumber); //5
-});
-var e = new Error('Ne peut pas lire la donnée');
-throw e;</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<p>Ne fait partie d'aucune spécification. Non standard.</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<div>
-
-
-<p>{{Compat("javascript.builtins.Error.lineNumber")}}</p>
-</div>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Error.prototype.stack")}} {{non-standard_inline}}</li>
- <li>{{jsxref("Error.prototype.columnNumber")}} {{non-standard_inline}}</li>
- <li>{{jsxref("Error.prototype.fileName")}} {{non-standard_inline}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/error/linenumber/index.md b/files/fr/web/javascript/reference/global_objects/error/linenumber/index.md
new file mode 100644
index 0000000000..b2a2a1ff5a
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/error/linenumber/index.md
@@ -0,0 +1,50 @@
+---
+title: Error.prototype.lineNumber
+slug: Web/JavaScript/Reference/Global_Objects/Error/lineNumber
+tags:
+  - Error
+  - JavaScript
+  - Non-standard
+  - Propriété
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Error/lineNumber
+original_slug: Web/JavaScript/Reference/Objets_globaux/Error/lineNumber
+---
+{{JSRef}} {{non-standard_header}}
+
+La propriété **`lineNumber`** contient le numéro de la ligne qui a déclenché l'erreur dans le fichier.
+
+## Exemples
+
+### Utiliser `lineNumber`
+
+```js
+var e = new Error("Ne peut pas lire la donnée");
+throw e;
+console.log(e.lineNumber) // 2
+```
+
+### Alternative en utilisant l'événement `error`
+
+```js
+window.addEventListener("error", function (e) {
+ console.log(e.lineNumber); //5
+});
+var e = new Error('Ne peut pas lire la donnée');
+throw e;
+```
+
+## Spécifications
+
+Ne fait partie d'aucune spécification. Non standard.
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Error.lineNumber")}}
+
+## Voir aussi
+
+- {{jsxref("Error.prototype.stack")}} {{non-standard_inline}}
+- {{jsxref("Error.prototype.columnNumber")}} {{non-standard_inline}}
+- {{jsxref("Error.prototype.fileName")}} {{non-standard_inline}}
diff --git a/files/fr/web/javascript/reference/global_objects/error/message/index.html b/files/fr/web/javascript/reference/global_objects/error/message/index.html
deleted file mode 100644
index 7ea12bb648..0000000000
--- a/files/fr/web/javascript/reference/global_objects/error/message/index.html
+++ /dev/null
@@ -1,73 +0,0 @@
----
-title: Error.prototype.message
-slug: Web/JavaScript/Reference/Global_Objects/Error/message
-tags:
-  - Error
-  - JavaScript
-  - Propriété
-  - Prototype
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Error/message
-original_slug: Web/JavaScript/Reference/Objets_globaux/Error/message
----
-<div>{{JSRef}}</div>
-
-<p>La propriété <code><strong>message</strong></code> est une description de l'erreur, écrite pour être lue par un humain.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>La propriété contient une brève description de l'erreur si elle est accessible, ou si elle a été définie. <a href="/fr/docs/SpiderMonkey">SpiderMonkey</a> utilise intensivement la propriété <code>message</code> pour les erreurs d'exécution. La propriété <code>message</code>, combinée à la propriété {{jsxref("Error.name", "name")}}, est utilisée par la méthode {{jsxref("Error.prototype.toString()")}} pour créer une représentation de l'erreur sous la forme d'une chaine de caractères.</p>
-
-<p>Par défaut, la propriété <code>message</code> est une chaine de caractères vide, mais ce comportement peut être remplacé pour une instance, en renseignant un message comme premier argument du constructeur {{jsxref("Error")}}.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Déclencher_une_erreur_personnalisée">Déclencher une erreur personnalisée</h3>
-
-<pre class="brush: js">var e = new Error("Impossible de lire la donnée");
-// e.message est "Impossible de lire la donnée"
-throw e;
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES1')}}</td>
-   <td>{{Spec2('ES1')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-15.11.4.3', 'Error.prototype.message')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-error.prototype.message', 'Error.prototype.message')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-error.prototype.message', 'Error.prototype.message')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Error.message")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Error.prototype.name")}}</li>
- <li>{{jsxref("Error.prototype.toString()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/error/message/index.md b/files/fr/web/javascript/reference/global_objects/error/message/index.md
new file mode 100644
index 0000000000..47c745abbe
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/error/message/index.md
@@ -0,0 +1,49 @@
+---
+title: Error.prototype.message
+slug: Web/JavaScript/Reference/Global_Objects/Error/message
+tags:
+  - Error
+  - JavaScript
+  - Propriété
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Error/message
+original_slug: Web/JavaScript/Reference/Objets_globaux/Error/message
+---
+{{JSRef}}
+
+La propriété **`message`** est une description de l'erreur, écrite pour être lue par un humain.
+
+## Description
+
+La propriété contient une brève description de l'erreur si elle est accessible, ou si elle a été définie. [SpiderMonkey](/fr/docs/SpiderMonkey) utilise intensivement la propriété `message` pour les erreurs d'exécution. La propriété `message`, combinée à la propriété {{jsxref("Error.name", "name")}}, est utilisée par la méthode {{jsxref("Error.prototype.toString()")}} pour créer une représentation de l'erreur sous la forme d'une chaine de caractères.
+
+Par défaut, la propriété `message` est une chaine de caractères vide, mais ce comportement peut être remplacé pour une instance, en renseignant un message comme premier argument du constructeur {{jsxref("Error")}}.
+
+## Exemples
+
+### Déclencher une erreur personnalisée
+
+```js
+var e = new Error("Impossible de lire la donnée");
+// e.message est "Impossible de lire la donnée"
+throw e;
+```
+
+## Spécifications
+
+| Spécification                                                                                                | Statut                       | Commentaires         |
+| ------------------------------------------------------------------------------------------------------------ | ---------------------------- | -------------------- |
+| {{SpecName('ES1')}}                                                                                     | {{Spec2('ES1')}}         | Définition initiale. |
+| {{SpecName('ES5.1', '#sec-15.11.4.3', 'Error.prototype.message')}}                     | {{Spec2('ES5.1')}}     |                      |
+| {{SpecName('ES6', '#sec-error.prototype.message', 'Error.prototype.message')}}     | {{Spec2('ES6')}}         |                      |
+| {{SpecName('ESDraft', '#sec-error.prototype.message', 'Error.prototype.message')}} | {{Spec2('ESDraft')}} |                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Error.message")}}
+
+## Voir aussi
+
+- {{jsxref("Error.prototype.name")}}
+- {{jsxref("Error.prototype.toString()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/error/name/index.html b/files/fr/web/javascript/reference/global_objects/error/name/index.html
deleted file mode 100644
index 7463cb7eff..0000000000
--- a/files/fr/web/javascript/reference/global_objects/error/name/index.html
+++ /dev/null
@@ -1,73 +0,0 @@
----
-title: Error.prototype.name
-slug: Web/JavaScript/Reference/Global_Objects/Error/name
-tags:
-  - Error
-  - JavaScript
-  - Propriété
-  - Prototype
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Error/name
-original_slug: Web/JavaScript/Reference/Objets_globaux/Error/name
----
-<div>{{JSRef}}</div>
-
-<p>La propriété <code><strong>name</strong></code> est une chaîne de caractères représentant le nom du type d'erreur. La valeur initiale est "Error".</p>
-
-<h2 id="Description">Description</h2>
-
-<p>Par défaut, les instances d'{{jsxref("Error")}} reçoivent le nom "Error". La propriété <code>name</code>, associée à la propriété {{jsxref("Error.message", "message")}}, est utilisée par la méthode {{jsxref("Error.prototype.toString()")}} pour créer une représentation de l'erreur sous la forme d'une chaine de caractères.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Déclencher_une_erreur_personnalisée">Déclencher une erreur personnalisée</h3>
-
-<pre class="brush:js">var e = new Error("Donnée malformée"); // e.name est "Error"
-
-e.name = "ParseError";
-throw e;
-// e.toString() renverra "ParseError: Donnée malformée"
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES1')}}</td>
-   <td>{{Spec2('ES1')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-15.11.4.2', 'Error.prototype.name')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-error.prototype.name', 'Error.prototype.name')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-error.prototype.name', 'Error.prototype.name')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Error.name")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Error.prototype.message")}}</li>
- <li>{{jsxref("Error.prototype.toString()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/error/name/index.md b/files/fr/web/javascript/reference/global_objects/error/name/index.md
new file mode 100644
index 0000000000..9ef6dbf87e
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/error/name/index.md
@@ -0,0 +1,49 @@
+---
+title: Error.prototype.name
+slug: Web/JavaScript/Reference/Global_Objects/Error/name
+tags:
+  - Error
+  - JavaScript
+  - Propriété
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Error/name
+original_slug: Web/JavaScript/Reference/Objets_globaux/Error/name
+---
+{{JSRef}}
+
+La propriété **`name`** est une chaîne de caractères représentant le nom du type d'erreur. La valeur initiale est "Error".
+
+## Description
+
+Par défaut, les instances d'{{jsxref("Error")}} reçoivent le nom "Error". La propriété `name`, associée à la propriété {{jsxref("Error.message", "message")}}, est utilisée par la méthode {{jsxref("Error.prototype.toString()")}} pour créer une représentation de l'erreur sous la forme d'une chaine de caractères.
+
+## Exemples
+
+### Déclencher une erreur personnalisée
+
+```js
+var e = new Error("Donnée malformée"); // e.name est "Error"
+
+e.name = "ParseError";
+throw e;
+// e.toString() renverra "ParseError: Donnée malformée"
+```
+
+## Spécifications
+
+| Spécification                                                                                        | Statut                       | Commentaires         |
+| ---------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName('ES1')}}                                                                             | {{Spec2('ES1')}}         | Définition initiale. |
+| {{SpecName('ES5.1', '#sec-15.11.4.2', 'Error.prototype.name')}}                 | {{Spec2('ES5.1')}}     |                      |
+| {{SpecName('ES6', '#sec-error.prototype.name', 'Error.prototype.name')}}     | {{Spec2('ES6')}}         |                      |
+| {{SpecName('ESDraft', '#sec-error.prototype.name', 'Error.prototype.name')}} | {{Spec2('ESDraft')}} |                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Error.name")}}
+
+## Voir aussi
+
+- {{jsxref("Error.prototype.message")}}
+- {{jsxref("Error.prototype.toString()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/error/stack/index.html b/files/fr/web/javascript/reference/global_objects/error/stack/index.html
deleted file mode 100644
index 133dfa454e..0000000000
--- a/files/fr/web/javascript/reference/global_objects/error/stack/index.html
+++ /dev/null
@@ -1,121 +0,0 @@
----
-title: Error.prototype.stack
-slug: Web/JavaScript/Reference/Global_Objects/Error/Stack
-tags:
-  - Error
-  - JavaScript
-  - Non-standard
-  - Propriété
-  - Prototype
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Error/Stack
-original_slug: Web/JavaScript/Reference/Objets_globaux/Error/Stack
----
-<div>{{JSRef}} {{non-standard_header}}</div>
-
-<p>La propriété non-standard <code><strong>stack</strong></code> des objets {{jsxref("Error")}} fournit une trace des fonctions qui ont été appelées, dans quel ordre, depuis quelle ligne de quel fichier, et avec quels arguments. La chaine de pile remonte des appels les plus récents jusqu'aux plus anciens, ramenant à l'appel original de la portée globale.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>Chaque étape sera séparée par une nouvelle ligne, la première partie de la ligne étant le nom de la fonction (si ce n'est pas un appel depuis la portée globale), suivi du signe arobase (@), de l'emplacement du fichier (sauf quand la fonction est le constructeur d'erreur lorsque l'erreur est déclenchée), de deux-points, et, s'il y a un emplacement de fichier, du numéro de ligne. (Notez que l'objet {{jsxref("Error")}} possède aussi les propriétés <code>fileName</code>, <code>lineNumber</code> et <code>columnNumber</code> pour leur récupération à partir de l'erreur déclenchée (mais seulement l'erreur, et pas sa trace)).</p>
-
-<p>Notez que ceci est le format utilisé par Firefox. Il n'y a aucun formatage standard. Cependant Safari 6+ et Opera 12- utilisent un format très similaire. Les navigateurs utilisant le moteur JavaScript V8 (tel que Chrome, Opera 15+, Navigateur Android) et IE10+, utilisent un format différent (voir la documentation MSDN <a href="https://web.archive.org/web/20140210004225/http://msdn.microsoft.com/en-us/library/windows/apps/hh699850.aspx">error.stack</a>).</p>
-
-<p><strong>Valeurs des arguments dans la pile :</strong> avant Firefox 14 ({{bug("744842")}}), le nom d'une fonction étaient suivis par les valeurs des arguments converties en une chaine de caractères entre parenthèses, immédiatement avant le signe arobase (@). Tandis qu'un objet (ou un tableau, etc.) apparaissait sous la forme convertie <code>"[object Object]"</code>, et en tant que tel, ne pouvait pas être réévalué en les objets réels, les valeurs scalaires pouvaient être récupérées (bien qu'il soit plus facile — c'est toujours possible dans Firefox 14 — d'utiliser <code>arguments.callee.caller.arguments</code>, tout comme le nom de la fonction pouvait être récupéré avec <code>arguments.callee.caller.name</code>). <code>"undefined"</code> est listé comme <code>"(void 0)"</code>. Notez que si des arguments chaines de caractères étaient passés avec des valeurs comme <code>"@"</code>, <code>"("</code>, <code>")"</code> (ou si dans les noms de fichier), vous ne pouviez pas vous reposez facilement sur ceux-ci pour découper la ligne en les parties qui la composent. Par conséquent, dans Firefox 14 et ultérieur, ceci est moins un problème.</p>
-
-<p>Les différents navigateurs définissent cette valeur à différents instants. Par exemple, Firefox la définit lors de la création d'un objet {{jsxref("Error")}}, tandis que PhantomJS ne la définit que lors du déclenchement de l'{{jsxref("Error")}}, et la <a href="https://web.archive.org/web/20140210004225/http://msdn.microsoft.com/en-us/library/windows/apps/hh699850.aspx">documentation MSDN</a> semble correspondre à l'implémentation PhantomJS.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<p>Le code HTML suivant démontre l'utilisation de la propriété <code>stack</code>.</p>
-
-<pre class="brush: html">&lt;!DOCTYPE HTML&gt;
-&lt;meta charset="UTF-8"&gt;
-&lt;title&gt;Exemple de Trace de Pile&lt;/title&gt;
-&lt;body&gt;
-    &lt;script&gt;
-        function trace() {
-            try {
-                throw new Error('monError');
-            }
-            catch(e) {
-                alert(e.stack);
-            }
-        }
-        function b() {
-            trace();
-        }
-        function a() {
-            b(3, 4, "\n\n", undefined, {});
-        }
-        a("premier appel, premierarg");
-    &lt;/script&gt;
-</pre>
-
-<p>En supposant que ce code a été enregistré comme <code>C:\exemple.html</code> sur un système de fichier Windows, il produira un message d'alerte dans une nouvelle fenêtre avec le texte suivant :</p>
-
-<p>À partir de Firefox 30 et ultérieur, ce message contiendra le numéro de colonne  ({{bug(762556)}}) :</p>
-
-<pre class="brush: html">trace@file:///C:/exemple.html:9:17
-b@file:///C:/exemple.html:16:13
-a@file:///C:/exemple.html:19:13
-@file:///C:/exemple.html:21:9</pre>
-
-<p>De Firefox 14 à Firefox 29 :</p>
-
-<pre><samp>trace@file:///C:/exemple.html:9
-b@file:///C:/exemple.html:16
-a@file:///C:/exemple.html:19
-@file:///C:/exemple.html:21
-</samp></pre>
-
-<p>Firefox 13 et antérieur aurait produit à la place le texte suivant :</p>
-
-<pre><samp>Error("monError")@:0
-trace()@file:///C:/exemple.html:9
-b(3,4,"\n\n",(void 0),[object Object])@file:///C:/exemple.html:16
-a("premier appel, premierarg")@file:///C:/exemple.html:19
-@file:///C:/exemple.html:21
-</samp></pre>
-
-<h3 id="Pile_d'un_code_evalué">Pile d'un code evalué</h3>
-
-<p>À partir de Firefox 30 {{geckoRelease("30")}}, la pile d'erreur du code dans les appels à <code>Function()</code> et <code>eval()</code> produit désormais des piles avec des informations plus détaillées sur les numéros de lignes et de colonnes dans ces appels. Les appels de fonction sont indiqués par <code>"&gt; Function"</code> et les appels d'<code>eval</code> par <code>"&gt; eval"</code>. Voir {{bug("332176")}}.</p>
-
-<pre class="brush: js">try {
-  new Function('throw new Error()')();
-} catch (e) {
-  console.log(e.stack);
-}
-
-// anonymous@file:///C:/exemple.html line 7 &gt; Function:1:1
-// @file:///C:/exemple.html:7:6
-
-try {
-  eval("eval('ÉCHEC')");
-} catch (x) {
-  console.log(x.stack);
-}
-
-// @file:///C:/exemple.html line 7 &gt; eval line 1 &gt; eval:1:1
-// @file:///C:/exemple.html line 7 &gt; eval:1:1
-// @file:///C:/exemple.html:7:6</pre>
-
-<p>Vous pouvez aussi utiliser la directive <code>//# sourceURL</code> pour nommer une source eval. Voir aussi <a href="https://developer.mozilla.org/fr-FR/docs/Tools/Debugger/How_to/Debug_eval_sources">Déboguer des sources évaluées</a> dans les docs <a href="https://developer.mozilla.org/fr-FR/docs/Tools/Debugger">Débogueur</a>, ainsi que ce <a href="http://fitzgeraldnick.com/weblog/59/">blog post</a>.</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<p>Ne fait partie d'aucune spécification. Non-standard.</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Error.stack")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr-FR/docs/Components.stack">Components.stack</a></li>
- <li>Projets externes : <a class="link-https" href="https://github.com/csnover/TraceKit/">TraceKit</a> et <a class="link-https" href="https://github.com/eriwen/javascript-stacktrace">javascript-stacktrace</a></li>
- <li>MSDN : docs <a href="https://web.archive.org/web/20140210004225/http://msdn.microsoft.com/en-us/library/windows/apps/hh699850.aspx">error.stack</a></li>
- <li><a href="https://github.com/v8/v8/wiki/Stack%20Trace%20API">Overview of the V8 JavaScript stack trace API</a></li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/error/stack/index.md b/files/fr/web/javascript/reference/global_objects/error/stack/index.md
new file mode 100644
index 0000000000..94bc830aeb
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/error/stack/index.md
@@ -0,0 +1,122 @@
+---
+title: Error.prototype.stack
+slug: Web/JavaScript/Reference/Global_Objects/Error/Stack
+tags:
+  - Error
+  - JavaScript
+  - Non-standard
+  - Propriété
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Error/Stack
+original_slug: Web/JavaScript/Reference/Objets_globaux/Error/Stack
+---
+{{JSRef}} {{non-standard_header}}
+
+La propriété non-standard **`stack`** des objets {{jsxref("Error")}} fournit une trace des fonctions qui ont été appelées, dans quel ordre, depuis quelle ligne de quel fichier, et avec quels arguments. La chaine de pile remonte des appels les plus récents jusqu'aux plus anciens, ramenant à l'appel original de la portée globale.
+
+## Description
+
+Chaque étape sera séparée par une nouvelle ligne, la première partie de la ligne étant le nom de la fonction (si ce n'est pas un appel depuis la portée globale), suivi du signe arobase (@), de l'emplacement du fichier (sauf quand la fonction est le constructeur d'erreur lorsque l'erreur est déclenchée), de deux-points, et, s'il y a un emplacement de fichier, du numéro de ligne. (Notez que l'objet {{jsxref("Error")}} possède aussi les propriétés `fileName`, `lineNumber` et `columnNumber` pour leur récupération à partir de l'erreur déclenchée (mais seulement l'erreur, et pas sa trace)).
+
+Notez que ceci est le format utilisé par Firefox. Il n'y a aucun formatage standard. Cependant Safari 6+ et Opera 12- utilisent un format très similaire. Les navigateurs utilisant le moteur JavaScript V8 (tel que Chrome, Opera 15+, Navigateur Android) et IE10+, utilisent un format différent (voir la documentation MSDN [error.stack](https://web.archive.org/web/20140210004225/http://msdn.microsoft.com/en-us/library/windows/apps/hh699850.aspx)).
+
+**Valeurs des arguments dans la pile :** avant Firefox 14 ({{bug("744842")}}), le nom d'une fonction étaient suivis par les valeurs des arguments converties en une chaine de caractères entre parenthèses, immédiatement avant le signe arobase (@). Tandis qu'un objet (ou un tableau, etc.) apparaissait sous la forme convertie `"[object Object]"`, et en tant que tel, ne pouvait pas être réévalué en les objets réels, les valeurs scalaires pouvaient être récupérées (bien qu'il soit plus facile — c'est toujours possible dans Firefox 14 — d'utiliser `arguments.callee.caller.arguments`, tout comme le nom de la fonction pouvait être récupéré avec `arguments.callee.caller.name`). `"undefined"` est listé comme `"(void 0)"`. Notez que si des arguments chaines de caractères étaient passés avec des valeurs comme `"@"`, `"("`, `")"` (ou si dans les noms de fichier), vous ne pouviez pas vous reposez facilement sur ceux-ci pour découper la ligne en les parties qui la composent. Par conséquent, dans Firefox 14 et ultérieur, ceci est moins un problème.
+
+Les différents navigateurs définissent cette valeur à différents instants. Par exemple, Firefox la définit lors de la création d'un objet {{jsxref("Error")}}, tandis que PhantomJS ne la définit que lors du déclenchement de l'{{jsxref("Error")}}, et la [documentation MSDN](https://web.archive.org/web/20140210004225/http://msdn.microsoft.com/en-us/library/windows/apps/hh699850.aspx) semble correspondre à l'implémentation PhantomJS.
+
+## Exemples
+
+Le code HTML suivant démontre l'utilisation de la propriété `stack`.
+
+```html
+<!DOCTYPE HTML>
+<meta charset="UTF-8">
+<title>Exemple de Trace de Pile</title>
+<body>
+    <script>
+        function trace() {
+            try {
+                throw new Error('monError');
+            }
+            catch(e) {
+                alert(e.stack);
+            }
+        }
+        function b() {
+            trace();
+        }
+        function a() {
+            b(3, 4, "\n\n", undefined, {});
+        }
+        a("premier appel, premierarg");
+    </script>
+```
+
+En supposant que ce code a été enregistré comme `C:\exemple.html` sur un système de fichier Windows, il produira un message d'alerte dans une nouvelle fenêtre avec le texte suivant :
+
+À partir de Firefox 30 et ultérieur, ce message contiendra le numéro de colonne  ({{bug(762556)}}) :
+
+```html
+trace@file:///C:/exemple.html:9:17
+b@file:///C:/exemple.html:16:13
+a@file:///C:/exemple.html:19:13
+@file:///C:/exemple.html:21:9
+```
+
+De Firefox 14 à Firefox 29 :
+
+    trace@file:///C:/exemple.html:9
+    b@file:///C:/exemple.html:16
+    a@file:///C:/exemple.html:19
+    @file:///C:/exemple.html:21
+
+Firefox 13 et antérieur aurait produit à la place le texte suivant :
+
+    Error("monError")@:0
+    trace()@file:///C:/exemple.html:9
+    b(3,4,"\n\n",(void 0),[object Object])@file:///C:/exemple.html:16
+    a("premier appel, premierarg")@file:///C:/exemple.html:19
+    @file:///C:/exemple.html:21
+
+### Pile d'un code evalué
+
+À partir de Firefox 30 {{geckoRelease("30")}}, la pile d'erreur du code dans les appels à `Function()` et `eval()` produit désormais des piles avec des informations plus détaillées sur les numéros de lignes et de colonnes dans ces appels. Les appels de fonction sont indiqués par `"> Function"` et les appels d'`eval` par `"> eval"`. Voir {{bug("332176")}}.
+
+```js
+try {
+  new Function('throw new Error()')();
+} catch (e) {
+  console.log(e.stack);
+}
+
+// anonymous@file:///C:/exemple.html line 7 > Function:1:1
+// @file:///C:/exemple.html:7:6
+
+try {
+  eval("eval('ÉCHEC')");
+} catch (x) {
+  console.log(x.stack);
+}
+
+// @file:///C:/exemple.html line 7 > eval line 1 > eval:1:1
+// @file:///C:/exemple.html line 7 > eval:1:1
+// @file:///C:/exemple.html:7:6
+```
+
+Vous pouvez aussi utiliser la directive `//# sourceURL` pour nommer une source eval. Voir aussi [Déboguer des sources évaluées](https://developer.mozilla.org/fr-FR/docs/Tools/Debugger/How_to/Debug_eval_sources) dans les docs [Débogueur](https://developer.mozilla.org/fr-FR/docs/Tools/Debugger), ainsi que ce [blog post](http://fitzgeraldnick.com/weblog/59/).
+
+## Spécifications
+
+Ne fait partie d'aucune spécification. Non-standard.
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Error.stack")}}
+
+## Voir aussi
+
+- [Components.stack](/fr-FR/docs/Components.stack)
+- Projets externes : [TraceKit](https://github.com/csnover/TraceKit/) et [javascript-stacktrace](https://github.com/eriwen/javascript-stacktrace)
+- MSDN : docs [error.stack](https://web.archive.org/web/20140210004225/http://msdn.microsoft.com/en-us/library/windows/apps/hh699850.aspx)
+- [Overview of the V8 JavaScript stack trace API](https://github.com/v8/v8/wiki/Stack%20Trace%20API)
diff --git a/files/fr/web/javascript/reference/global_objects/error/tosource/index.html b/files/fr/web/javascript/reference/global_objects/error/tosource/index.html
deleted file mode 100644
index 5c84fe9b75..0000000000
--- a/files/fr/web/javascript/reference/global_objects/error/tosource/index.html
+++ /dev/null
@@ -1,52 +0,0 @@
----
-title: Error.prototype.toSource()
-slug: Web/JavaScript/Reference/Global_Objects/Error/toSource
-tags:
-  - Error
-  - JavaScript
-  - Méthode
-  - Non-standard
-  - Prototype
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Error/toSource
-original_slug: Web/JavaScript/Reference/Objets_globaux/Error/toSource
----
-<div>{{JSRef}} {{non-standard_header}}</div>
-
-<p>La méthode <code><strong>toSource()</strong></code> renvoie le code source qui peut générer la même erreur.</p>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><em>e</em>.toSource()</pre>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Une chaîne de caractères qui contient le code source de l'erreur.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>Appeler la méthode <code>toSource()</code> d'une instance {{jsxref("Error")}} (<a href="/fr/docs/JavaScript/Reference/Objets_globaux/Error#Error_types">Erreurs natives</a> incluses) renverra le code source de l'erreur. Cette chaine de caractères peut être évaluée afin de créer un objet similaire. La chaine de caractères contenant le code source suit la structure du constructeur <code>Error</code>. Par exemple :</p>
-
-<pre class="brush: js">(new name(message ,fileName, lineNumber))</pre>
-
-<p>où ces attributs correspondent aux propriétés respectives de l'instance <code>Error</code>.</p>
-
-<div class="note"><p><strong>Note :</strong> Les propriétés utilisées par la méthode <code>toSource()</code> dans la création de cette chaine de caractères sont mutables et peuvent ne pas refléter correctement la fonction utilisée pour créer une instance d'erreur ou le nom du fichier ou la ligne à laquelle s'est produite l'erreur originale.</p></div>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<p>Ne fait partie d'aucun standard. Implémentée dans JavaScript 1.3.</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Error.toSource")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Error.prototype.fileName")}} {{non-standard_inline}}</li>
- <li>{{jsxref("Error.prototype.lineNumber")}} {{non-standard_inline}}</li>
- <li>{{jsxref("Error.prototype.message")}}</li>
- <li>{{jsxref("Error.prototype.name")}}</li>
- <li>{{jsxref("Object.prototype.toSource()")}} {{non-standard_inline}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/error/tosource/index.md b/files/fr/web/javascript/reference/global_objects/error/tosource/index.md
new file mode 100644
index 0000000000..9876514034
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/error/tosource/index.md
@@ -0,0 +1,52 @@
+---
+title: Error.prototype.toSource()
+slug: Web/JavaScript/Reference/Global_Objects/Error/toSource
+tags:
+  - Error
+  - JavaScript
+  - Méthode
+  - Non-standard
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Error/toSource
+original_slug: Web/JavaScript/Reference/Objets_globaux/Error/toSource
+---
+{{JSRef}} {{non-standard_header}}
+
+La méthode **`toSource()`** renvoie le code source qui peut générer la même erreur.
+
+## Syntaxe
+
+    e.toSource()
+
+### Valeur de retour
+
+Une chaîne de caractères qui contient le code source de l'erreur.
+
+## Description
+
+Appeler la méthode `toSource()` d'une instance {{jsxref("Error")}} ([Erreurs natives](/fr/docs/JavaScript/Reference/Objets_globaux/Error#Error_types) incluses) renverra le code source de l'erreur. Cette chaine de caractères peut être évaluée afin de créer un objet similaire. La chaine de caractères contenant le code source suit la structure du constructeur `Error`. Par exemple :
+
+```js
+(new name(message ,fileName, lineNumber))
+```
+
+où ces attributs correspondent aux propriétés respectives de l'instance `Error`.
+
+> **Note :** Les propriétés utilisées par la méthode `toSource()` dans la création de cette chaine de caractères sont mutables et peuvent ne pas refléter correctement la fonction utilisée pour créer une instance d'erreur ou le nom du fichier ou la ligne à laquelle s'est produite l'erreur originale.
+
+## Spécifications
+
+Ne fait partie d'aucun standard. Implémentée dans JavaScript 1.3.
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Error.toSource")}}
+
+## Voir aussi
+
+- {{jsxref("Error.prototype.fileName")}} {{non-standard_inline}}
+- {{jsxref("Error.prototype.lineNumber")}} {{non-standard_inline}}
+- {{jsxref("Error.prototype.message")}}
+- {{jsxref("Error.prototype.name")}}
+- {{jsxref("Object.prototype.toSource()")}} {{non-standard_inline}}
diff --git a/files/fr/web/javascript/reference/global_objects/error/tostring/index.html b/files/fr/web/javascript/reference/global_objects/error/tostring/index.html
deleted file mode 100644
index cd67175fff..0000000000
--- a/files/fr/web/javascript/reference/global_objects/error/tostring/index.html
+++ /dev/null
@@ -1,109 +0,0 @@
----
-title: Error.prototype.toString()
-slug: Web/JavaScript/Reference/Global_Objects/Error/toString
-tags:
-  - Error
-  - JavaScript
-  - Méthode
-  - Prototype
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Error/toString
-original_slug: Web/JavaScript/Reference/Objets_globaux/Error/toString
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <code><strong>toString()</strong></code> renvoie une représentation de l'objet {{jsxref("Error")}} sous la forme d'une chaine de caractères.</p>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>e</var>.toString()</pre>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Une chaîne de caractères représentant l'objet {{jsxref("Error")}}.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>L'objet {{jsxref("Error")}} surcharge la méthode {{jsxref("Object.prototype.toString()")}} héritée par tous les objets. Sa sémantique est la suivante (en partant du principe que {{jsxref("Object")}} et {{jsxref("String")}} ont leurs valeurs originales) :</p>
-
-<pre class="brush:js">Error.prototype.toString = function () {
-  "use strict";
-
-  var obj = Object(this);
-  if (obj !== this)
-    throw new TypeError();
-
-  var name = this.name;
-  name = (name === undefined) ? "Error" : String(name);
-
-  var msg = this.message;
-  msg = (msg === undefined) ? "" : String(msg);
-
-  if (name === "")
-    return msg;
-  if (msg === "")
-    return name;
-
-  return name + ": " + msg;
-};
-</pre>
-
-<h2 id="Exemples">Exemples</h2>
-
-<pre class="brush:js">var e = new Error("Erreur fatale");
-console.log(e.toString()); // "Error: Erreur fatale"
-
-e.name = undefined;
-console.log(e.toString()); // "Error: Erreur fatale"
-
-e.name = "";
-console.log(e.toString()); // "Erreur fatale"
-
-e.message = undefined;
-console.log(e.toString()); // ""
-
-e.name = "salut";
-console.log(e.toString()); // "salut"
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES1')}}</td>
-   <td>{{Spec2('ES1')}}</td>
-   <td>Définition initiale. Implémentée avec JavaScript 1.1.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-15.11.4.4', 'Error.prototype.toString')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-error.prototype.tostring', 'Error.prototype.toString')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-error.prototype.tostring', 'Error.prototype.toString')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Error.toString")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Error.prototype.toSource()")}} {{non-standard_inline}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/error/tostring/index.md b/files/fr/web/javascript/reference/global_objects/error/tostring/index.md
new file mode 100644
index 0000000000..97119fcb6e
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/error/tostring/index.md
@@ -0,0 +1,86 @@
+---
+title: Error.prototype.toString()
+slug: Web/JavaScript/Reference/Global_Objects/Error/toString
+tags:
+  - Error
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Error/toString
+original_slug: Web/JavaScript/Reference/Objets_globaux/Error/toString
+---
+{{JSRef}}
+
+La méthode **`toString()`** renvoie une représentation de l'objet {{jsxref("Error")}} sous la forme d'une chaine de caractères.
+
+## Syntaxe
+
+    e.toString()
+
+### Valeur de retour
+
+Une chaîne de caractères représentant l'objet {{jsxref("Error")}}.
+
+## Description
+
+L'objet {{jsxref("Error")}} surcharge la méthode {{jsxref("Object.prototype.toString()")}} héritée par tous les objets. Sa sémantique est la suivante (en partant du principe que {{jsxref("Object")}} et {{jsxref("String")}} ont leurs valeurs originales) :
+
+```js
+Error.prototype.toString = function () {
+  "use strict";
+
+  var obj = Object(this);
+  if (obj !== this)
+    throw new TypeError();
+
+  var name = this.name;
+  name = (name === undefined) ? "Error" : String(name);
+
+  var msg = this.message;
+  msg = (msg === undefined) ? "" : String(msg);
+
+  if (name === "")
+    return msg;
+  if (msg === "")
+    return name;
+
+  return name + ": " + msg;
+};
+```
+
+## Exemples
+
+```js
+var e = new Error("Erreur fatale");
+console.log(e.toString()); // "Error: Erreur fatale"
+
+e.name = undefined;
+console.log(e.toString()); // "Error: Erreur fatale"
+
+e.name = "";
+console.log(e.toString()); // "Erreur fatale"
+
+e.message = undefined;
+console.log(e.toString()); // ""
+
+e.name = "salut";
+console.log(e.toString()); // "salut"
+```
+
+## Spécifications
+
+| Spécification                                                                                                    | État                         | Commentaires                                          |
+| ---------------------------------------------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- |
+| {{SpecName('ES1')}}                                                                                         | {{Spec2('ES1')}}         | Définition initiale. Implémentée avec JavaScript 1.1. |
+| {{SpecName('ES5.1', '#sec-15.11.4.4', 'Error.prototype.toString')}}                         | {{Spec2('ES5.1')}}     |                                                       |
+| {{SpecName('ES6', '#sec-error.prototype.tostring', 'Error.prototype.toString')}}     | {{Spec2('ES6')}}         |                                                       |
+| {{SpecName('ESDraft', '#sec-error.prototype.tostring', 'Error.prototype.toString')}} | {{Spec2('ESDraft')}} |                                                       |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Error.toString")}}
+
+## Voir aussi
+
+- {{jsxref("Error.prototype.toSource()")}} {{non-standard_inline}}
diff --git a/files/fr/web/javascript/reference/global_objects/escape/index.html b/files/fr/web/javascript/reference/global_objects/escape/index.html
deleted file mode 100644
index e1b23297b0..0000000000
--- a/files/fr/web/javascript/reference/global_objects/escape/index.html
+++ /dev/null
@@ -1,96 +0,0 @@
----
-title: escape()
-slug: Web/JavaScript/Reference/Global_Objects/escape
-tags:
-  - Deprecated
-  - JavaScript
-translation_of: Web/JavaScript/Reference/Global_Objects/escape
-original_slug: Web/JavaScript/Reference/Objets_globaux/escape
----
-<div>{{jsSidebar("Objects")}}</div>
-
-<div class="warning"><p><strong>Attention :</strong> Bien que <code>escape(…)</code> ne soit pas strictement obsolète (au sens où elle n'a pas été retirée des standards), elle est définie au sein de <a href="https://www.ecma-international.org/ecma-262/9.0/index.html#sec-additional-ecmascript-features-for-web-browsers">l'Annexe B</a> du standard ECMA-262 qui commence par :
-
-<blockquote>… L'ensemble des fonctionnalités et comportements définis dans cette annexe possède une ou plusieurs caractéristiques indésirables. En l'absence d'une utilisation historique, ces fonctionnalités seraient retirés de la spécification. …<br>
-… Les développeurs ne devraient pas utiliser ces fonctionnalités et comportements ou présupposer qu'elles existent lors de l'écriture de nouveau code ECMAScript. …</blockquote></p>
-</div>
-
-<p>La fonction <code><strong>escape()</strong></code> permet de renvoyer une nouvelle chaîne de caractères dont certains caractères ont été remplacés par leur séquence d'échappement hexadécimale. Cette méthode est obsolète et il est donc conseillé d'utiliser {{jsxref("encodeURI")}} ou {{jsxref("encodeURIComponent")}} à la place.</p>
-
-<div class="blockIndicator note">
-<p><strong>Note :</strong> Cette fonction pouvait être utilisée pour l'encodage de fragment de requêtes d'URL. Si on souhaite remplacer des caractères par leur séquence d'échappement correcte (avec <code>%20</code> par exemple), on pourra utiliser <code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/decodeURIComponent">decodeURIComponent</a></code>.</p>
-</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">escape(<var>str</var>)</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>str</code></dt>
- <dd>Une chaîne de caractères à encoder.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Une nouvelle chaîne de caractères dont certains caractères ont été échappés.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>La fonction <code>escape</code> est une propriété de l'<em>objet global</em>. Les caractères spéciaux, sauf @*_+-./, seront encodés.</p>
-
-<p>La forme hexadécimale des caractères dont la valeur du codet est inférieure à 0xFF sera représentée sur deux chiffres : %xx. Pour les caractères avec un code supérieur, quatre chiffres seront utilisés avec le format suivant %<strong>u</strong>xxxx.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<pre class="brush: js">escape("abc123");     // "abc123"
-escape("äöü");        // "%E4%F6%FC"
-escape("ć");          // "%u0107"
-
-// caractères spéciaux
-escape("@*_+-./");    // "@*_+-./"</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES1')}}</td>
-   <td>{{Spec2('ES1')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-B.2.1', 'escape')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td>Définie dans l'annexe B (informative) sur la compatibilité.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-escape-string', 'escape')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td>Définie dans l'annexe B (normative) pour les fonctionnalités additionnelles d'ECMAScript pour les navigateurs Web.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-escape-string', 'escape')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td>Définie dans l'annexe B (normative) pour les fonctionnalités additionnelles d'ECMAScript pour les navigateurs Web.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.escape")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("encodeURI")}}</li>
- <li>{{jsxref("encodeURIComponent")}}</li>
- <li>{{jsxref("unescape")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/escape/index.md b/files/fr/web/javascript/reference/global_objects/escape/index.md
new file mode 100644
index 0000000000..f3222c3d56
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/escape/index.md
@@ -0,0 +1,68 @@
+---
+title: escape()
+slug: Web/JavaScript/Reference/Global_Objects/escape
+tags:
+  - Deprecated
+  - JavaScript
+translation_of: Web/JavaScript/Reference/Global_Objects/escape
+original_slug: Web/JavaScript/Reference/Objets_globaux/escape
+---
+{{jsSidebar("Objects")}}
+
+> **Attention :** Bien que `escape(…)` ne soit pas strictement obsolète (au sens où elle n'a pas été retirée des standards), elle est définie au sein de [l'Annexe B](https://www.ecma-international.org/ecma-262/9.0/index.html#sec-additional-ecmascript-features-for-web-browsers) du standard ECMA-262 qui commence par :
+>
+> > … L'ensemble des fonctionnalités et comportements définis dans cette annexe possède une ou plusieurs caractéristiques indésirables. En l'absence d'une utilisation historique, ces fonctionnalités seraient retirés de la spécification. …
+> > … Les développeurs ne devraient pas utiliser ces fonctionnalités et comportements ou présupposer qu'elles existent lors de l'écriture de nouveau code ECMAScript. …
+
+La fonction **`escape()`** permet de renvoyer une nouvelle chaîne de caractères dont certains caractères ont été remplacés par leur séquence d'échappement hexadécimale. Cette méthode est obsolète et il est donc conseillé d'utiliser {{jsxref("encodeURI")}} ou {{jsxref("encodeURIComponent")}} à la place.
+
+> **Note :** Cette fonction pouvait être utilisée pour l'encodage de fragment de requêtes d'URL. Si on souhaite remplacer des caractères par leur séquence d'échappement correcte (avec `%20` par exemple), on pourra utiliser [`decodeURIComponent`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/decodeURIComponent).
+
+## Syntaxe
+
+    escape(str)
+
+### Paramètres
+
+- `str`
+  - : Une chaîne de caractères à encoder.
+
+### Valeur de retour
+
+Une nouvelle chaîne de caractères dont certains caractères ont été échappés.
+
+## Description
+
+La fonction `escape` est une propriété de l'_objet global_. Les caractères spéciaux, sauf @\*\_+-./, seront encodés.
+
+La forme hexadécimale des caractères dont la valeur du codet est inférieure à 0xFF sera représentée sur deux chiffres : %xx. Pour les caractères avec un code supérieur, quatre chiffres seront utilisés avec le format suivant %**u**xxxx.
+
+## Exemples
+
+```js
+escape("abc123");     // "abc123"
+escape("äöü");        // "%E4%F6%FC"
+escape("ć");          // "%u0107"
+
+// caractères spéciaux
+escape("@*_+-./");    // "@*_+-./"
+```
+
+## Spécifications
+
+| Spécification                                                            | État                         | Commentaires                                                                                                       |
+| ------------------------------------------------------------------------ | ---------------------------- | ------------------------------------------------------------------------------------------------------------------ |
+| {{SpecName('ES1')}}                                                 | {{Spec2('ES1')}}         | Définition initiale.                                                                                               |
+| {{SpecName('ES5.1', '#sec-B.2.1', 'escape')}}             | {{Spec2('ES5.1')}}     | Définie dans l'annexe B (informative) sur la compatibilité.                                                        |
+| {{SpecName('ES6', '#sec-escape-string', 'escape')}}     | {{Spec2('ES6')}}         | Définie dans l'annexe B (normative) pour les fonctionnalités additionnelles d'ECMAScript pour les navigateurs Web. |
+| {{SpecName('ESDraft', '#sec-escape-string', 'escape')}} | {{Spec2('ESDraft')}} | Définie dans l'annexe B (normative) pour les fonctionnalités additionnelles d'ECMAScript pour les navigateurs Web. |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.escape")}}
+
+## Voir aussi
+
+- {{jsxref("encodeURI")}}
+- {{jsxref("encodeURIComponent")}}
+- {{jsxref("unescape")}}
diff --git a/files/fr/web/javascript/reference/global_objects/eval/index.html b/files/fr/web/javascript/reference/global_objects/eval/index.html
deleted file mode 100644
index d52bd140e3..0000000000
--- a/files/fr/web/javascript/reference/global_objects/eval/index.html
+++ /dev/null
@@ -1,278 +0,0 @@
----
-title: eval()
-slug: Web/JavaScript/Reference/Global_Objects/eval
-tags:
-  - Attention
-  - JavaScript
-  - Méthode
-  - Reference
-  - eval
-translation_of: Web/JavaScript/Reference/Global_Objects/eval
-original_slug: Web/JavaScript/Reference/Objets_globaux/eval
----
-<div>{{jsSidebar("Objects")}}</div>
-
-<p>La fonction <code><strong>eval()</strong></code> permet d'évaluer du code JavaScript représenté sous forme d'une chaîne de caractères.</p>
-
-<div class="warning">
-<p><strong>Attention :</strong> L'exécution de JavaScript à partir d'une chaîne de caractères constitue un risque de sécurité énorme. Il est beaucoup trop facile pour un mauvais acteur d'exécuter du code arbitraire lorsque vous utilisez <code>eval()</code>. Voir la section <a href="#Nutiliser_eval_quen_dernier_recours_!">N'utilisez eval() qu'en dernier recours !</a> ci-dessous.</p>
-</div>
-
-<div>{{EmbedInteractiveExample("pages/js/globalprops-eval.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre>eval(<var>str</var>)</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>str</code></dt>
- <dd>Une chaîne de caractères qui représente une expression JavaScript ou une instruction ou une suite d'instructions JavaScript. L'expression utilisée peut contenir des variables et des propriétés d'objets existants.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>La valeur de terminaison du code fourni en argument. Si la valeur de terminaison est vide, c'est la valeur {{jsxref("undefined")}} qui est renvoyée.</p>
-
-<h2 id="Description">Description</h2>
-
-<p><code>eval()</code> est une fonction rattachée à l'objet global.</p>
-
-<p><code>eval()</code> prend en compte un argument qui est une chaîne de caractères. Si cette chaîne représente une expression, <code>eval()</code> évaluera l'expression. Si l'argument utilisé représente une ou plusieurs instructions JavaScript, <code>eval()</code> évaluera les instructions. <code>eval()</code> ne doit pas être utilisé pour évaluer une expression arithmétique. En effet, JavaScript évalue automatiquement les expressions arithmétiques.</p>
-
-<p>Si on construit une expression arithmétique sous la forme d'une chaîne de caractères, on peut utiliser <code>eval()</code> pour évaluer cette expression par la suite. Ainsi, si on a une variable <code>x</code>, on peut préparer une expression à utiliser plus tard en construisant la chaîne "<code>3 * x + 2</code>" par exemple. Au moment où on souhaite procéder à l'évaluation, on appellera <code>eval()</code> avec cette chaîne de caractères.</p>
-
-<p>Si l'argument passé à <code>eval()</code> n'est pas une chaîne de caractères, <code>eval()</code> renverra l'argument inchangé. Dans l'exemple qui suit, on utilise le constructeur <code>String</code>, <code>eval()</code> renvoie donc un objet <code>String</code> au lieu d'évaluer la chaîne de caractères correspondante.</p>
-
-<pre class="brush:js">eval(new String("2 + 2")); // renvoie un objet String contenant "2 + 2"
-eval("2 + 2");             // renvoie 4
-</pre>
-
-<p>Ce comportement peut être résolu de façon générique en utilisant la méthode <code>toString()</code>.</p>
-
-<pre class="brush:js">var expression = new String("2 + 2");
-eval(expression.toString());
-</pre>
-
-<p>Si la fonction  <code>eval</code> est utilisée de manière indirecte, en l'invoquant par une référence autre que <code>eval</code>, cela fonctionnera avec une portée globale plutôt que locale (d'après ECMASCript 5). Par exemple, les déclarations de fonctions vont créer des fonctions globales et le code en cours d'évaluation n'aura pas accès aux variables locales déclarées avec la même portée que là où la fonction <code>eval</code> est appelée.</p>
-
-<pre class="brush: js">function test() {
-  var x = 2, y = 4;
-  console.log(eval("x + y"));  // Appel direct, portée locale, résultat de 6
-  var geval = eval;
-  console.log(geval("x + y")); // Appel indirect, portée globale, lance une exception ReferenceError car `x` n'est pas défini
-  (0, eval)('x + y'); // un autre exemple d'appel indirect.
-}</pre>
-
-<h2 id="Nutiliser_eval_quen_dernier_recours_!">N'utiliser <code>eval()</code> qu'en dernier recours !</h2>
-
-<p><code>eval()</code> est une fonction dangereuse qui exécute le code passé en argument avec les privilèges de l'environnement appelant. Si <code>eval()</code> est utilisée avec une chaîne construite de façon mal intentionnée, cela pourra entraîner l'exécution d'un code malveillant sur la machine de l'utilisateur avec les permissions données au site ou au module complémentaire. À un niveau encore plus critique, du code tiers pourrait ainsi consulter la portée dans laquelle <code>eval()</code> a été invoquée. Cela peut permettre des attaques qui n'auraient pas été rendues possible en utilisant un objet {{jsxref("Function")}}.</p>
-
-<p><code>eval()</code> est également plus lente que les méthodes alternatives. En effet, l'évaluation nécessite de faire appel à l'interpréteur JavaScript alors que de nombreuses structures sont optimisées par les moteurs JavaScript modernes.</p>
-
-<p>Dans de nombreux cas, il existe des alternatives plus sûres et plus performantes à <code>eval()</code>.</p>
-
-<p>De plus, les moteurs JavaScript modernes convertissent le code JavaScript en code machine. Les notions relatives aux noms des variables sont donc transformées. Utiliser <code>eval()</code> force le navigateur à enregistrer puis à rechercher parmi les noms existants afin de retrouver les variables. Si besoin, on peut utiliser le constructeur <code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Function">Function</a></code> :</p>
-
-<p>Avec <code>eval()</code> :</p>
-
-<pre class="brush:js">function looseJsonParse(obj){
-    return eval("(" + obj + ")");
-}
-console.log(looseJsonParse(
-   "{a:(4-1), b:function(){}, c:new Date()}"
-))
-</pre>
-
-<p>Avec <code>Function</code> :</p>
-
-<pre class="brush:js">function looseJsonParse(obj){
-    return Function('"use strict";return (' + obj + ')')();
-}
-console.log(looseJsonParse(
-   "{a:(4-1), b:function(){}, c:new Date()}"
-))
-</pre>
-
-<p>Dans le premier cas, l'évaluation de <code>c: new Date()</code> sera beaucoup plus lente car <code>Date</code> peut faire référence à une variable déclarée avant. Dans le second cas, la fonction est évaluée dans la portée globale et le moteur peut donc utiliser {{jsxref("Date")}} directement.</p>
-
-<p>Autrement dit, dans le premier cas, on aurait pu avoir un code comme :</p>
-
-<pre class="brush:js">function Date(n){
-    return ["Monday","Tuesday","Wednesday","Thursaday","Friday","Saturday","Sunday"][n%7 || 0];
-}
-function looseJsonParse(obj){
-    return eval("(" + obj + ")");
-}
-console.log(looseJsonParse(
-   "{a:(4-1), b:function(){}, c:new Date()}"
-))
-</pre>
-
-<p>Auquel cas, le navigateur doit effectuer une recherche coûteuse afin de vérifier s'il y a des variables locales <code>Date</code>.</p>
-
-<p>Pour obtenir un résultat identique, on peut tout à fait se passer d'<code>eval()</code> :</p>
-
-<pre class="brush:js">function Date(n){
-    return ["Monday","Tuesday","Wednesday","Thursaday","Friday","Saturday","Sunday"][n%7 || 0];
-}
-function runCodeWithDateFunction(obj){
-    return Function('"use strict";return (' + obj + ')')()(
-        Date
-    );
-}
-console.log(runCodeWithDateFunction(
-   "function(Date){ return Date(5) }"
-))
-</pre>
-
-<p>1. Le code passé à <code>runCodeWithDateFunction</code> peut être minifié.</p>
-
-<p>2. Le surcoût lié à un appel de fonction est léger</p>
-
-<p>3. <code>Function()</code> permet d'utiliser  <code>"use strict";</code> (qui peut également aider à améliorer les performances).</p>
-
-<p>Enfin, pour la plupart des cas, on doit pouvoir éviter de passer par</p>
-
-<p><code>eval()</code> ou <code>Function()</code> !</p>
-
-<h3 id="Accéder_aux_propriétés_dun_objet">Accéder aux propriétés d'un objet</h3>
-
-<p><code>eval()</code> ne doit pas être utilisée pour convertir des noms de propriétés en propriétés. Par exemple, lorsqu'on ne sait pas quelle propriété va être consultée avant l'exécution, on pourrait utiliser :</p>
-
-<pre class="brush:js">var obj = { a: 20, b: 30 };
-var nomPropriété = getNomProp();  //une méthode qui renvoie "a" ou "b"
-
-eval( "var résultat = obj." + nomPropriété );
-</pre>
-
-<p>Cependant, <code>eval()</code> n'est pas du tout nécessaire. Il est beaucoup plus simple, plus sécurisé, plus rapide, d'utiliser les <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_de_membres">accesseurs de propriétés</a> :</p>
-
-<pre class="brush:js">var obj = { a: 20, b: 30 };
-var nomPropriété = getNomProp();  // une méthode qui renvoie  "a" or "b"
-var résultat = obj[nomPropriété]; //  obj[ "a" ] correspond à obj.a
-</pre>
-
-<h3 id="Utiliser_des_fonctions_au_lieu_de_morceaux_de_code">Utiliser des fonctions au lieu de morceaux de code</h3>
-
-<p>Les fonctions JavaScript sont des <a class="external" href="https://en.wikipedia.org/wiki/First-class_function">citoyens de premier rang du langage</a>, cela signifie que les fonctions peuvent être passées comme arguments aux autres API, qu'elles peuvent être stockées dans des variables, dans des propriétés d'objets, etc. De nombreuses API pour le DOM fonctionnent en prenant en argument des fonctions :</p>
-
-<pre class="brush: js">// au lieu de setTimeout(" ... ", 1000) on utilisera :
-setTimeout(function() { ... }, 1000);
-
-// au lieu de elt.setAttribute("onclick", "...") on utilisera :
-elt.addEventListener("click", function() { ... } , false); </pre>
-
-<p><a href="/fr/docs/Web/JavaScript/Guide/Closures">Les fermetures (<em>closures</em>)</a> sont utiles lorsqu'on souhaite obtenir des fonctions paramétrées sans avoir à concaténer des chaînes de caractères.</p>
-
-<h3 id="Convertir_des_chaînes_JSON_en_objets_JavaScript_parsing">Convertir des chaînes JSON en objets JavaScript (<em>parsing</em>)</h3>
-
-<p>Si la chaîne utilisée avec <code>eval()</code> contient des données (par exemple, un tableau : <code>"[1, 2, 3]"</code>) et non du code, il est conseillé d'utiliser du {{Glossary("JSON")}}, qui permet de représenter un sous-ensemble des données représentables en JavaScript.</p>
-
-<p>On notera que la syntaxe JSON est limitée relativement à la syntaxe JavaScript. De nombreux littéraux JavaScript ne pourront être parsés en JSON (par exemple, les virgules à la fin des instructions ne seront pas autorisées et les noms de propriétés devront être compris entre simples quotes). Il est souvent préférable d'utiliser un outil de sérialisation JSON pour que les chaînes générées puissent être analysée en JSON.</p>
-
-<h3 id="Transmettre_des_données_et_non_du_code">Transmettre des données et non du code</h3>
-
-<p>Si on a par exemple une extension conçue pour parcourir le code d'une page web, on pourra transmettre des données <a href="/fr/docs/XPath">XPath</a> au lieu d'un code JavaScript.</p>
-
-<h3 id="Exécuter_du_code_avec_des_privilèges_restreints">Exécuter du code avec des privilèges restreints</h3>
-
-<p>S'il faut nécessairement exécuter du code, il faut le faire avec des privilèges restreints. Cela s'applique généralement aux modules complémentaires ou aux applications XUL. Pour cela, on pourra utiliser <a href="/fr/docs/Components.utils.evalInSandbox">Components.utils.evalInSandbox</a>.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Utiliser_eval">Utiliser <code>eval()</code></h3>
-
-<p>Dans le code suivant, les deux instructions passées à <code>eval()</code> sous la forme d'une chaîne renvoient 42. La première évaluation porte sur la chaîne "<code>x + y + 1</code>" ; la seconde évaluation porte sur la chaîne de caractères "<code>42</code>".</p>
-
-<pre class="brush:js">var x = 2;
-var y = 39;
-var z = "42";
-eval("x + y + 1"); // renvoie 42
-eval(z);           // renvoie 42
-</pre>
-
-<h3 id="Utiliser_eval_pour_une_chaîne_dinstructions">Utiliser <code>eval()</code> pour une chaîne d'instructions</h3>
-
-<p>Dans l'exemple qui suit, <code>eval()</code> est utilisée pour évaluer la chaîne de caractères <code>str</code>. Cette chaîne contient plusieurs instructions JavaScript qui affichent un message dans la console et qui affectent la valeur 42 à la variable <code>z</code> si <code>x</code> vaut cinq et 0 sinon. Lorsque la seconde instruction est exécutée, <code>eval()</code> entraînera l'exécution des instructions, les instructions seront évaluées et la valeur de <code>z</code> sera donc renvoyée.</p>
-
-<pre class="brush:js">var x = 5;
-var str = "if (x == 5) {console.log('z vaut 42'); z = 42;} else z = 0; ";
-console.log("z vaut "+eval(str));
-</pre>
-
-<h3 id="Le_résultat_deval_est_celui_de_la_dernière_expression">Le résultat d'<code>eval()</code> est celui de la dernière expression</h3>
-
-<p><code>eval()</code> renvoie la valeur de la dernière expression évaluée :</p>
-
-<pre class="brush:js">var str = "if ( a ) { 1+1; } else { 1+2; }";
-var a = true;
-var b = eval(str);  // renvoie 2
-
-console.log("b vaut : " + b);
-
-a = false;
-b = eval(str);      // renvoie 3
-
-console.log("b vaut : " + b);</pre>
-
-<h3 id="eval_et_les_fonctions"><code>eval()</code> et les fonctions</h3>
-
-<p>Pour qu'une fonction soit restituée lors de l'évaluation, il est nécessaire d'encadrer l'expression contenue dans la chaîne de caractères avec des parenthèses :</p>
-
-<pre class="brush:js">var fctStr1 = "function a() {}"
-var fctStr2 = "(function a() {})"
-var fct1 = eval(fctStr1)  // renvoie undefined
-var fct2 = eval(fctStr2)  // renvoie une function
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES1')}}</td>
-   <td>{{Spec2('ES1')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-15.1.2.1', 'eval')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-eval-x', 'eval')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-eval-x', 'eval')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.eval")}}</p>
-
-<h2 id="Notes_spécifiques_à_Firefox">Notes spécifiques à Firefox</h2>
-
-<ul>
- <li>Historiquement, <code>eval()</code> utilisait un deuxième argument qui définissait l'objet qui était le contexte pour lequel effectuer l'évaluation. Cet argument était non-standard et a été retiré de SpiderMonkey avec Firefox 4 (cf. {{bug(531675)}}).</li>
-</ul>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Objets_globaux/uneval", "uneval()")}}</li>
- <li>{{jsxref("Opérateurs/Opérateurs_de_membres","Les accesseurs de propriétés","",1)}}</li>
- <li><a href="/fr/Add-ons/WebExtensions/Content_scripts#Using_eval()_in_content_scripts">Utiliser <code>eval()</code> dans les scripts de contenu dans les WebExtensions</a></li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/eval/index.md b/files/fr/web/javascript/reference/global_objects/eval/index.md
new file mode 100644
index 0000000000..e28f94f20e
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/eval/index.md
@@ -0,0 +1,264 @@
+---
+title: eval()
+slug: Web/JavaScript/Reference/Global_Objects/eval
+tags:
+  - Attention
+  - JavaScript
+  - Méthode
+  - Reference
+  - eval
+translation_of: Web/JavaScript/Reference/Global_Objects/eval
+original_slug: Web/JavaScript/Reference/Objets_globaux/eval
+---
+{{jsSidebar("Objects")}}
+
+La fonction **`eval()`** permet d'évaluer du code JavaScript représenté sous forme d'une chaîne de caractères.
+
+> **Attention :** L'exécution de JavaScript à partir d'une chaîne de caractères constitue un risque de sécurité énorme. Il est beaucoup trop facile pour un mauvais acteur d'exécuter du code arbitraire lorsque vous utilisez `eval()`. Voir la section [N'utilisez eval() qu'en dernier recours !](#Nutiliser_eval_quen_dernier_recours_!) ci-dessous.
+
+{{EmbedInteractiveExample("pages/js/globalprops-eval.html")}}
+
+## Syntaxe
+
+    eval(str)
+
+### Paramètres
+
+- `str`
+  - : Une chaîne de caractères qui représente une expression JavaScript ou une instruction ou une suite d'instructions JavaScript. L'expression utilisée peut contenir des variables et des propriétés d'objets existants.
+
+### Valeur de retour
+
+La valeur de terminaison du code fourni en argument. Si la valeur de terminaison est vide, c'est la valeur {{jsxref("undefined")}} qui est renvoyée.
+
+## Description
+
+`eval()` est une fonction rattachée à l'objet global.
+
+`eval()` prend en compte un argument qui est une chaîne de caractères. Si cette chaîne représente une expression, `eval()` évaluera l'expression. Si l'argument utilisé représente une ou plusieurs instructions JavaScript, `eval()` évaluera les instructions. `eval()` ne doit pas être utilisé pour évaluer une expression arithmétique. En effet, JavaScript évalue automatiquement les expressions arithmétiques.
+
+Si on construit une expression arithmétique sous la forme d'une chaîne de caractères, on peut utiliser `eval()` pour évaluer cette expression par la suite. Ainsi, si on a une variable `x`, on peut préparer une expression à utiliser plus tard en construisant la chaîne "`3 * x + 2`" par exemple. Au moment où on souhaite procéder à l'évaluation, on appellera `eval()` avec cette chaîne de caractères.
+
+Si l'argument passé à `eval()` n'est pas une chaîne de caractères, `eval()` renverra l'argument inchangé. Dans l'exemple qui suit, on utilise le constructeur `String`, `eval()` renvoie donc un objet `String` au lieu d'évaluer la chaîne de caractères correspondante.
+
+```js
+eval(new String("2 + 2")); // renvoie un objet String contenant "2 + 2"
+eval("2 + 2");             // renvoie 4
+```
+
+Ce comportement peut être résolu de façon générique en utilisant la méthode `toString()`.
+
+```js
+var expression = new String("2 + 2");
+eval(expression.toString());
+```
+
+Si la fonction  `eval` est utilisée de manière indirecte, en l'invoquant par une référence autre que `eval`, cela fonctionnera avec une portée globale plutôt que locale (d'après ECMASCript 5). Par exemple, les déclarations de fonctions vont créer des fonctions globales et le code en cours d'évaluation n'aura pas accès aux variables locales déclarées avec la même portée que là où la fonction `eval` est appelée.
+
+```js
+function test() {
+  var x = 2, y = 4;
+  console.log(eval("x + y"));  // Appel direct, portée locale, résultat de 6
+  var geval = eval;
+  console.log(geval("x + y")); // Appel indirect, portée globale, lance une exception ReferenceError car `x` n'est pas défini
+  (0, eval)('x + y'); // un autre exemple d'appel indirect.
+}
+```
+
+## N'utiliser `eval()` qu'en dernier recours !
+
+`eval()` est une fonction dangereuse qui exécute le code passé en argument avec les privilèges de l'environnement appelant. Si `eval()` est utilisée avec une chaîne construite de façon mal intentionnée, cela pourra entraîner l'exécution d'un code malveillant sur la machine de l'utilisateur avec les permissions données au site ou au module complémentaire. À un niveau encore plus critique, du code tiers pourrait ainsi consulter la portée dans laquelle `eval()` a été invoquée. Cela peut permettre des attaques qui n'auraient pas été rendues possible en utilisant un objet {{jsxref("Function")}}.
+
+`eval()` est également plus lente que les méthodes alternatives. En effet, l'évaluation nécessite de faire appel à l'interpréteur JavaScript alors que de nombreuses structures sont optimisées par les moteurs JavaScript modernes.
+
+Dans de nombreux cas, il existe des alternatives plus sûres et plus performantes à `eval()`.
+
+De plus, les moteurs JavaScript modernes convertissent le code JavaScript en code machine. Les notions relatives aux noms des variables sont donc transformées. Utiliser `eval()` force le navigateur à enregistrer puis à rechercher parmi les noms existants afin de retrouver les variables. Si besoin, on peut utiliser le constructeur [`Function`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Function) :
+
+Avec `eval()` :
+
+```js
+function looseJsonParse(obj){
+    return eval("(" + obj + ")");
+}
+console.log(looseJsonParse(
+   "{a:(4-1), b:function(){}, c:new Date()}"
+))
+```
+
+Avec `Function` :
+
+```js
+function looseJsonParse(obj){
+    return Function('"use strict";return (' + obj + ')')();
+}
+console.log(looseJsonParse(
+   "{a:(4-1), b:function(){}, c:new Date()}"
+))
+```
+
+Dans le premier cas, l'évaluation de `c: new Date()` sera beaucoup plus lente car `Date` peut faire référence à une variable déclarée avant. Dans le second cas, la fonction est évaluée dans la portée globale et le moteur peut donc utiliser {{jsxref("Date")}} directement.
+
+Autrement dit, dans le premier cas, on aurait pu avoir un code comme :
+
+```js
+function Date(n){
+    return ["Monday","Tuesday","Wednesday","Thursaday","Friday","Saturday","Sunday"][n%7 || 0];
+}
+function looseJsonParse(obj){
+    return eval("(" + obj + ")");
+}
+console.log(looseJsonParse(
+   "{a:(4-1), b:function(){}, c:new Date()}"
+))
+```
+
+Auquel cas, le navigateur doit effectuer une recherche coûteuse afin de vérifier s'il y a des variables locales `Date`.
+
+Pour obtenir un résultat identique, on peut tout à fait se passer d'`eval()` :
+
+```js
+function Date(n){
+    return ["Monday","Tuesday","Wednesday","Thursaday","Friday","Saturday","Sunday"][n%7 || 0];
+}
+function runCodeWithDateFunction(obj){
+    return Function('"use strict";return (' + obj + ')')()(
+        Date
+    );
+}
+console.log(runCodeWithDateFunction(
+   "function(Date){ return Date(5) }"
+))
+```
+
+1\. Le code passé à `runCodeWithDateFunction` peut être minifié.
+
+2\. Le surcoût lié à un appel de fonction est léger
+
+3\. `Function()` permet d'utiliser  `"use strict";` (qui peut également aider à améliorer les performances).
+
+Enfin, pour la plupart des cas, on doit pouvoir éviter de passer par
+
+`eval()` ou `Function()` !
+
+### Accéder aux propriétés d'un objet
+
+`eval()` ne doit pas être utilisée pour convertir des noms de propriétés en propriétés. Par exemple, lorsqu'on ne sait pas quelle propriété va être consultée avant l'exécution, on pourrait utiliser :
+
+```js
+var obj = { a: 20, b: 30 };
+var nomPropriété = getNomProp();  //une méthode qui renvoie "a" ou "b"
+
+eval( "var résultat = obj." + nomPropriété );
+```
+
+Cependant, `eval()` n'est pas du tout nécessaire. Il est beaucoup plus simple, plus sécurisé, plus rapide, d'utiliser les [accesseurs de propriétés](/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_de_membres) :
+
+```js
+var obj = { a: 20, b: 30 };
+var nomPropriété = getNomProp();  // une méthode qui renvoie  "a" or "b"
+var résultat = obj[nomPropriété]; //  obj[ "a" ] correspond à obj.a
+```
+
+### Utiliser des fonctions au lieu de morceaux de code
+
+Les fonctions JavaScript sont des [citoyens de premier rang du langage](https://en.wikipedia.org/wiki/First-class_function), cela signifie que les fonctions peuvent être passées comme arguments aux autres API, qu'elles peuvent être stockées dans des variables, dans des propriétés d'objets, etc. De nombreuses API pour le DOM fonctionnent en prenant en argument des fonctions :
+
+```js
+// au lieu de setTimeout(" ... ", 1000) on utilisera :
+setTimeout(function() { ... }, 1000);
+
+// au lieu de elt.setAttribute("onclick", "...") on utilisera :
+elt.addEventListener("click", function() { ... } , false); 
+```
+
+[Les fermetures (_closures_)](/fr/docs/Web/JavaScript/Guide/Closures) sont utiles lorsqu'on souhaite obtenir des fonctions paramétrées sans avoir à concaténer des chaînes de caractères.
+
+### Convertir des chaînes JSON en objets JavaScript (_parsing_)
+
+Si la chaîne utilisée avec `eval()` contient des données (par exemple, un tableau : `"[1, 2, 3]"`) et non du code, il est conseillé d'utiliser du {{Glossary("JSON")}}, qui permet de représenter un sous-ensemble des données représentables en JavaScript.
+
+On notera que la syntaxe JSON est limitée relativement à la syntaxe JavaScript. De nombreux littéraux JavaScript ne pourront être parsés en JSON (par exemple, les virgules à la fin des instructions ne seront pas autorisées et les noms de propriétés devront être compris entre simples quotes). Il est souvent préférable d'utiliser un outil de sérialisation JSON pour que les chaînes générées puissent être analysée en JSON.
+
+### Transmettre des données et non du code
+
+Si on a par exemple une extension conçue pour parcourir le code d'une page web, on pourra transmettre des données [XPath](/fr/docs/XPath) au lieu d'un code JavaScript.
+
+### Exécuter du code avec des privilèges restreints
+
+S'il faut nécessairement exécuter du code, il faut le faire avec des privilèges restreints. Cela s'applique généralement aux modules complémentaires ou aux applications XUL. Pour cela, on pourra utiliser [Components.utils.evalInSandbox](/fr/docs/Components.utils.evalInSandbox).
+
+## Exemples
+
+### Utiliser `eval()`
+
+Dans le code suivant, les deux instructions passées à `eval()` sous la forme d'une chaîne renvoient 42. La première évaluation porte sur la chaîne "`x + y + 1`" ; la seconde évaluation porte sur la chaîne de caractères "`42`".
+
+```js
+var x = 2;
+var y = 39;
+var z = "42";
+eval("x + y + 1"); // renvoie 42
+eval(z);           // renvoie 42
+```
+
+### Utiliser `eval()` pour une chaîne d'instructions
+
+Dans l'exemple qui suit, `eval()` est utilisée pour évaluer la chaîne de caractères `str`. Cette chaîne contient plusieurs instructions JavaScript qui affichent un message dans la console et qui affectent la valeur 42 à la variable `z` si `x` vaut cinq et 0 sinon. Lorsque la seconde instruction est exécutée, `eval()` entraînera l'exécution des instructions, les instructions seront évaluées et la valeur de `z` sera donc renvoyée.
+
+```js
+var x = 5;
+var str = "if (x == 5) {console.log('z vaut 42'); z = 42;} else z = 0; ";
+console.log("z vaut "+eval(str));
+```
+
+### Le résultat d'`eval()` est celui de la dernière expression
+
+`eval()` renvoie la valeur de la dernière expression évaluée :
+
+```js
+var str = "if ( a ) { 1+1; } else { 1+2; }";
+var a = true;
+var b = eval(str);  // renvoie 2
+
+console.log("b vaut : " + b);
+
+a = false;
+b = eval(str);      // renvoie 3
+
+console.log("b vaut : " + b);
+```
+
+### `eval()` et les fonctions
+
+Pour qu'une fonction soit restituée lors de l'évaluation, il est nécessaire d'encadrer l'expression contenue dans la chaîne de caractères avec des parenthèses :
+
+```js
+var fctStr1 = "function a() {}"
+var fctStr2 = "(function a() {})"
+var fct1 = eval(fctStr1)  // renvoie undefined
+var fct2 = eval(fctStr2)  // renvoie une function
+```
+
+## Spécifications
+
+| Spécification                                                | État                         | Commentaires         |
+| ------------------------------------------------------------ | ---------------------------- | -------------------- |
+| {{SpecName('ES1')}}                                     | {{Spec2('ES1')}}         | Définition initiale. |
+| {{SpecName('ES5.1', '#sec-15.1.2.1', 'eval')}} | {{Spec2('ES5.1')}}     |                      |
+| {{SpecName('ES6', '#sec-eval-x', 'eval')}}     | {{Spec2('ES6')}}         |                      |
+| {{SpecName('ESDraft', '#sec-eval-x', 'eval')}} | {{Spec2('ESDraft')}} |                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.eval")}}
+
+## Notes spécifiques à Firefox
+
+- Historiquement, `eval()` utilisait un deuxième argument qui définissait l'objet qui était le contexte pour lequel effectuer l'évaluation. Cet argument était non-standard et a été retiré de SpiderMonkey avec Firefox 4 (cf. {{bug(531675)}}).
+
+## Voir aussi
+
+- {{jsxref("Objets_globaux/uneval", "uneval()")}}
+- {{jsxref("Opérateurs/Opérateurs_de_membres","Les accesseurs de propriétés","",1)}}
+- [Utiliser `eval()` dans les scripts de contenu dans les WebExtensions](</fr/Add-ons/WebExtensions/Content_scripts#Using_eval()_in_content_scripts>)
diff --git a/files/fr/web/javascript/reference/global_objects/evalerror/index.html b/files/fr/web/javascript/reference/global_objects/evalerror/index.html
deleted file mode 100644
index 402a26e026..0000000000
--- a/files/fr/web/javascript/reference/global_objects/evalerror/index.html
+++ /dev/null
@@ -1,115 +0,0 @@
----
-title: EvalError
-slug: Web/JavaScript/Reference/Global_Objects/EvalError
-tags:
-  - Error
-  - EvalError
-  - JavaScript
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/EvalError
-original_slug: Web/JavaScript/Reference/Objets_globaux/EvalError
----
-<div>{{JSRef}}</div>
-
-<p>L'objet <strong><code>EvalError</code></strong> indique une erreur concernant la fonction globale {{jsxref("Objets_globaux/eval","eval()")}}. Cette exception n'est plus levée par JavaScript mais l'objet <code>EvalError</code> est conservé pour des raisons de compatibilité.</p>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">new EvalError([<var>message</var>[, nomFichier[, numeroLigne]]])</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>message</code></dt>
- <dd>Paramètre optionnel, une description compréhensible de l'erreur</dd>
- <dt><code>nomFichier</code> {{Non-standard_inline}}</dt>
- <dd>Paramètre optionnel, le nom du fichier qui contient le code à l'origine de l'exception</dd>
- <dt><code>numeroLigne</code> {{Non-standard_inline}}</dt>
- <dd>Paramètre optionnel, le numéro de la ligne du code qui a entrainé l'exception</dd>
-</dl>
-
-<h2 id="Propriétés">Propriétés</h2>
-
-<dl>
- <dt>{{jsxref("EvalError.prototype")}}</dt>
- <dd>Cette propriété permet l'addition de propriétés à un objet <code>EvalError</code>.</dd>
-</dl>
-
-<h2 id="Méthodes">Méthodes</h2>
-
-<p>L'objet global <code>EvalError</code> ne contient pas de méthodes propres. En revanche, il hérite de certaines méthodes via sa chaîne de prototypes.</p>
-
-<h2 id="Instances_de_EvalError">Instances de <code>EvalError</code></h2>
-
-<h3 id="Propriétés_2">Propriétés</h3>
-
-<div>{{page('/fr/docs/Web/JavaScript/Reference/Objets_globaux/EvalError/prototype','Properties')}}</div>
-
-<h3 id="Méthodes_2">Méthodes</h3>
-
-<div>{{page('/fr/docs/Web/JavaScript/Reference/Objets_globaux/EvalError/prototype','Methods')}}</div>
-
-<h2 id="Exemples">Exemples</h2>
-
-<p><code>EvalError</code> n'est pas utilisée par la spécification ECMAScript actuelle et ne sera donc pas levée lors de l'exécution. Cependant, l'objet reste disponible à des fins de compatibilité avec les versions antérieures de la spécification.</p>
-
-<h3 id="Créer_une_exception_EvalError">Créer une exception <code>EvalError</code></h3>
-
-<pre class="brush: js">try {
-  throw new EvalError("Coucou", "unFichier.js", 10);
-} catch (e) {
-  console.log(e instanceof EvalError); // true
-  console.log(e.message);              // "Coucou"
-  console.log(e.name);                 // "EvalError"
-  console.log(e.fileName);             // "unFichier.js"
-  console.log(e.lineNumber);           // 10
-  console.log(e.columnNumber);         // 0
-  console.log(e.stack);                // "@Scratchpad/2:2:9\n"
-}</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES3')}}</td>
-   <td>{{Spec2('ES3')}}</td>
-   <td>Définition initiale</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-15.11.6.1', 'EvalError')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td>Non utilisé dans cette spécificaition. Présent à des fins de rétrocompatibilité.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-native-error-types-used-in-this-standard-evalerror', 'EvalError')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td>Non utilisé dans cette spécificaition. Présent à des fins de rétrocompatibilité.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-native-error-types-used-in-this-standard-evalerror', 'EvalError')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<div>
-
-<p>{{Compat("javascript.builtins.EvalError")}}</p>
-</div>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Error")}}</li>
- <li>{{jsxref("EvalError.prototype")}}</li>
- <li>{{jsxref("Objets_globaux/eval", "eval()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/evalerror/index.md b/files/fr/web/javascript/reference/global_objects/evalerror/index.md
new file mode 100644
index 0000000000..7000c66f7c
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/evalerror/index.md
@@ -0,0 +1,85 @@
+---
+title: EvalError
+slug: Web/JavaScript/Reference/Global_Objects/EvalError
+tags:
+  - Error
+  - EvalError
+  - JavaScript
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/EvalError
+original_slug: Web/JavaScript/Reference/Objets_globaux/EvalError
+---
+{{JSRef}}
+
+L'objet **`EvalError`** indique une erreur concernant la fonction globale {{jsxref("Objets_globaux/eval","eval()")}}. Cette exception n'est plus levée par JavaScript mais l'objet `EvalError` est conservé pour des raisons de compatibilité.
+
+## Syntaxe
+
+    new EvalError([message[, nomFichier[, numeroLigne]]])
+
+### Paramètres
+
+- `message`
+  - : Paramètre optionnel, une description compréhensible de l'erreur
+- `nomFichier` {{Non-standard_inline}}
+  - : Paramètre optionnel, le nom du fichier qui contient le code à l'origine de l'exception
+- `numeroLigne` {{Non-standard_inline}}
+  - : Paramètre optionnel, le numéro de la ligne du code qui a entrainé l'exception
+
+## Propriétés
+
+- {{jsxref("EvalError.prototype")}}
+  - : Cette propriété permet l'addition de propriétés à un objet `EvalError`.
+
+## Méthodes
+
+L'objet global `EvalError` ne contient pas de méthodes propres. En revanche, il hérite de certaines méthodes via sa chaîne de prototypes.
+
+## Instances de `EvalError`
+
+### Propriétés
+
+{{page('/fr/docs/Web/JavaScript/Reference/Objets_globaux/EvalError/prototype','Properties')}}
+
+### Méthodes
+
+{{page('/fr/docs/Web/JavaScript/Reference/Objets_globaux/EvalError/prototype','Methods')}}
+
+## Exemples
+
+`EvalError` n'est pas utilisée par la spécification ECMAScript actuelle et ne sera donc pas levée lors de l'exécution. Cependant, l'objet reste disponible à des fins de compatibilité avec les versions antérieures de la spécification.
+
+### Créer une exception `EvalError`
+
+```js
+try {
+  throw new EvalError("Coucou", "unFichier.js", 10);
+} catch (e) {
+  console.log(e instanceof EvalError); // true
+  console.log(e.message);              // "Coucou"
+  console.log(e.name);                 // "EvalError"
+  console.log(e.fileName);             // "unFichier.js"
+  console.log(e.lineNumber);           // 10
+  console.log(e.columnNumber);         // 0
+  console.log(e.stack);                // "@Scratchpad/2:2:9\n"
+}
+```
+
+## Spécifications
+
+| Spécification                                                                                                                    | Statut                       | Commentaires                                                                     |
+| -------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------------------------------------------------------------------- |
+| {{SpecName('ES3')}}                                                                                                         | {{Spec2('ES3')}}         | Définition initiale                                                              |
+| {{SpecName('ES5.1', '#sec-15.11.6.1', 'EvalError')}}                                                             | {{Spec2('ES5.1')}}     | Non utilisé dans cette spécificaition. Présent à des fins de rétrocompatibilité. |
+| {{SpecName('ES6', '#sec-native-error-types-used-in-this-standard-evalerror', 'EvalError')}}         | {{Spec2('ES6')}}         | Non utilisé dans cette spécificaition. Présent à des fins de rétrocompatibilité. |
+| {{SpecName('ESDraft', '#sec-native-error-types-used-in-this-standard-evalerror', 'EvalError')}} | {{Spec2('ESDraft')}} |                                                                                  |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.EvalError")}}
+
+## Voir aussi
+
+- {{jsxref("Error")}}
+- {{jsxref("EvalError.prototype")}}
+- {{jsxref("Objets_globaux/eval", "eval()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/float32array/index.html b/files/fr/web/javascript/reference/global_objects/float32array/index.html
deleted file mode 100644
index a6e52bb590..0000000000
--- a/files/fr/web/javascript/reference/global_objects/float32array/index.html
+++ /dev/null
@@ -1,204 +0,0 @@
----
-title: Float32Array
-slug: Web/JavaScript/Reference/Global_Objects/Float32Array
-tags:
-  - Constructor
-  - JavaScript
-  - Reference
-  - TypedArray
-  - TypedArrays
-translation_of: Web/JavaScript/Reference/Global_Objects/Float32Array
-original_slug: Web/JavaScript/Reference/Objets_globaux/Float32Array
----
-<div>{{JSRef}}</div>
-
-<p>Le tableau typé <strong><code>Float32Array</code></strong> représente un tableau de nombres flottants représentés sur 32 bits (ce qui correspond au type C <code>float</code>), l'ordre des octets utilisés étant celui de la plate-forme. Si on souhaite maîtriser le boutisme (<em>endianness</em>) utilisé, on pourra utiliser une {{jsxref("DataView")}}. Les éléments du tableau sont initialisés à <code>0</code>. Une fois que le tableau est établi, on peut référencer des éléments dans le tableau en utilisant les méthodes de l'objet ou la syntaxe usuelle des crochets.</p>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">new Float32Array(); // Apparu avec ES2017
-new Float32Array(longueur);
-new Float32Array(tableauTypé);
-new Float32Array(objet);
-new Float32Array(buffer [, décalageOctets [, longueur]]);</pre>
-
-<p>Pour plus d'informations sur la syntaxe de ce constructeur et les paramètres utilisés, voir la page {{jsxref("Objets_globaux/TypedArray","TypedArray","#Syntaxe")}}.</p>
-
-<h2 id="Propriétés">Propriétés</h2>
-
-<dl>
- <dt>{{jsxref("TypedArray.BYTES_PER_ELEMENT", "Float32Array.BYTES_PER_ELEMENT")}}</dt>
- <dd>Renvoie le nombre d'octets par élément. <code>4</code> dans le cas de <code>Float32Array</code>.</dd>
- <dt>Float32Array.length</dt>
- <dd>Une propriété de longueur statique qui vaut 3. Pour connaître le nombre d'élément, voir {{jsxref("TypedArray.prototype.length", "Float32Array.prototype.length")}}.</dd>
- <dt>{{jsxref("TypedArray.name", "Float32Array.name")}}</dt>
- <dd>Renvoie la chaîne de caractères correspondant au nom du constructeur, dans le cas de <code>Float32Array</code>, ce sera : "Float32Array".</dd>
- <dt>{{jsxref("TypedArray.prototype", "Float32Array.prototype")}}</dt>
- <dd>Le prototype des objets <em>TypedArray</em>.</dd>
-</dl>
-
-<h2 id="Méthodes">Méthodes</h2>
-
-<dl>
- <dt>{{jsxref("TypedArray.from", "Float32Array.from()")}}</dt>
- <dd>Crée un nouvel objet <code>Float32Array</code> à partir d'un objet semblable à un tableau ou d'un objet itérable. Voir également la page {{jsxref("Array.from()")}}.</dd>
- <dt>{{jsxref("TypedArray.of", "Float32Array.of()")}}</dt>
- <dd>Crée un nouvel objet <code>Float32Array</code> à partir d'un nombre variable d'arguments. Voir également la page {{jsxref("Array.of()")}}.</dd>
-</dl>
-
-<h2 id="Prototype_Float32Array">Prototype <code>Float32Array</code></h2>
-
-<p>Chacun des objets <code>Float32Array</code> hérite de {{jsxref("TypedArray.prototype", "%TypedArray%.prototype")}}.</p>
-
-<h3 id="Propriétés_2">Propriétés</h3>
-
-<dl>
- <dt><code>Float32Array.prototype.constructor</code></dt>
- <dd>Renvoie la fonction qui a crée le prototype de l'instance. Par défaut, ce sera le constructeur <code>Float32Array</code>.</dd>
- <dt>{{jsxref("TypedArray.prototype.buffer", "Float32Array.prototype.buffer")}} {{readonlyInline}}</dt>
- <dd>Renvoie l'objet {{jsxref("ArrayBuffer")}} référencé par l'objet <code>Float32Array</code>. Cette propriété est fixée lors de la construction et n'est donc disponible qu'en <strong>lecture seule</strong>.</dd>
- <dt>{{jsxref("TypedArray.prototype.byteLength", "Float32Array.prototype.byteLength")}} {{readonlyInline}}</dt>
- <dd>Renvoie la longueur, exprimée en octets, de l'objet <code>Float32Array</code> à partir du début de l'{{jsxref("ArrayBuffer")}} correspondant. Cette propriété est fixée lors de la construction et n'est donc disponible qu'en <strong>lecture seule</strong>.</dd>
- <dt>{{jsxref("TypedArray.prototype.byteOffset", "Float32Array.prototype.byteOffset")}} {{readonlyInline}}</dt>
- <dd>Renvoie le décalage, exprimé en octets, de l'objet <code>Float32Array</code> par rapport au début de l'{{jsxref("ArrayBuffer")}} correspondant. Cette propriété est fixée lors de la construction et n'est donc disponible qu'en <strong>lecture seule</strong>.</dd>
- <dt>{{jsxref("TypedArray.prototype.length", "Float32Array.prototype.length")}} {{readonlyInline}}</dt>
- <dd>Renvoie le nombre d'éléments contenus dans l'objet <code>Float32Array</code>. Cette propriété est fixée lors de la construction et n'est donc disponible qu'en <strong>lecture seule</strong>.</dd>
-</dl>
-
-<h3 id="Méthodes_2">Méthodes</h3>
-
-<dl>
- <dt>{{jsxref("TypedArray.copyWithin", "Float32Array.prototype.copyWithin()")}}</dt>
- <dd>Copie une suite d'éléments d'un tableau dans le tableau. Voir également {{jsxref("Array.prototype.copyWithin()")}}.</dd>
- <dt>{{jsxref("TypedArray.entries", "Float32Array.prototype.entries()")}}</dt>
- <dd>Renvoie un nouvel objet <code>Array Iterator</code> qui contient les paires clé/valeur pour chaque indice du tableau. Voir également {{jsxref("Array.prototype.entries()")}}.</dd>
- <dt>{{jsxref("TypedArray.every", "Float32Array.prototype.every()")}}</dt>
- <dd>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()")}}.</dd>
- <dt>{{jsxref("TypedArray.fill", "Float32Array.prototype.fill()")}}</dt>
- <dd>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()")}}.</dd>
- <dt>{{jsxref("TypedArray.filter", "Float32Array.prototype.filter()")}}</dt>
- <dd>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()")}}.</dd>
- <dt>{{jsxref("TypedArray.find", "Float32Array.prototype.find()")}}</dt>
- <dd>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 <code>undefined</code> sera renvoyé. Voir également {{jsxref("Array.prototype.find()")}}.</dd>
- <dt>{{jsxref("TypedArray.findIndex", "Float32Array.prototype.findIndex()")}}</dt>
- <dd>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()")}}.</dd>
- <dt>{{jsxref("TypedArray.forEach", "Float32Array.prototype.forEach()")}}</dt>
- <dd>Appelle une fonction pour chacun des élément du tableau. Voir également {{jsxref("Array.prototype.forEach()")}}.</dd>
- <dt>{{jsxref("TypedArray.includes", "Float32Array.prototype.includes()")}}</dt>
- <dd>Détermine si le tableau typé contient un élément donné. Cette méthode renvoie <code>true</code> ou <code>false</code> selon le cas de figure. Voir également {{jsxref("Array.prototype.includes()")}}.</dd>
- <dt>{{jsxref("TypedArray.indexOf", "Float32Array.prototype.indexOf()")}}</dt>
- <dd>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()")}}.</dd>
- <dt>{{jsxref("TypedArray.join", "Float32Array.prototype.join()")}}</dt>
- <dd>Fusionne l'ensemble des éléments du tableau en une chaîne de caractères. Voir également {{jsxref("Array.prototype.join()")}}.</dd>
- <dt>{{jsxref("TypedArray.keys", "Float32Array.prototype.keys()")}}</dt>
- <dd>Renvoie un nouvel objet <code>Array Iterator</code> qui contient les clés de chaque indice du tableau. Voir également {{jsxref("Array.prototype.keys()")}}.</dd>
- <dt>{{jsxref("TypedArray.lastIndexOf", "Float32Array.prototype.lastIndexOf()")}}</dt>
- <dd>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()")}}.</dd>
- <dt>{{jsxref("TypedArray.map", "Float32Array.prototype.map()")}}</dt>
- <dd>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()")}}.</dd>
- <dt>{{jsxref("TypedArray.move", "Float32Array.prototype.move()")}} {{non-standard_inline}} {{unimplemented_inline}}</dt>
- <dd>Ancienne version, non-standard, de {{jsxref("TypedArray.copyWithin", "Float32Array.prototype.copyWithin()")}}.</dd>
- <dt>{{jsxref("TypedArray.reduce", "Float32Array.prototype.reduce()")}}</dt>
- <dd>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()")}}.</dd>
- <dt>{{jsxref("TypedArray.reduceRight", "Float32Array.prototype.reduceRight()")}}</dt>
- <dd>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()")}}.</dd>
- <dt>{{jsxref("TypedArray.reverse", "Float32Array.prototype.reverse()")}}</dt>
- <dd>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()")}}.</dd>
- <dt>{{jsxref("TypedArray.set", "Float32Array.prototype.set()")}}</dt>
- <dd>Enregistre plusieurs valeurs dans le tableau typé à partir de valeurs d'un autre tableau.</dd>
- <dt>{{jsxref("TypedArray.slice", "Float32Array.prototype.slice()")}}</dt>
- <dd>Extrait un fragment d'un tableau et renvoie ce fragment. Voir également {{jsxref("Array.prototype.slice()")}}.</dd>
- <dt>{{jsxref("TypedArray.some", "Float32Array.prototype.some()")}}</dt>
- <dd>Renvoie <code>true</code> si au moins un des éléments remplit une condition donnée par une fonction de test. Voir également {{jsxref("Array.prototype.some()")}}.</dd>
- <dt>{{jsxref("TypedArray.sort", "Float32Array.prototype.sort()")}}</dt>
- <dd>Trie les éléments du tableau et renvoie ce tableau. Voir également {{jsxref("Array.prototype.sort()")}}.</dd>
- <dt>{{jsxref("TypedArray.subarray", "Float32Array.prototype.subarray()")}}</dt>
- <dd>Renvoie un nouvel objet <code>Float32Array</code> qui est le fragment du tableau courant, entre les indices de début et de fin donnés.</dd>
- <dt>{{jsxref("TypedArray.values", "Float32Array.prototype.values()")}}</dt>
- <dd>Renvoie un nouvel objet <code>Array Iterator</code> qui contient les valeurs correspondantes à chaque indice du tableau. Voir également {{jsxref("Array.prototype.values()")}}.</dd>
- <dt>{{jsxref("TypedArray.toLocaleString", "Float32Array.prototype.toLocaleString()")}}</dt>
- <dd>Renvoie une chaîne de caractères localisée qui représente le tableau et ses éléments. Voir également {{jsxref("Array.prototype.toLocaleString()")}}.</dd>
- <dt>{{jsxref("TypedArray.toString", "Float32Array.prototype.toString()")}}</dt>
- <dd>Renvoie une chaîne de caractère qui représente le tableau et ses éléments. Voir également {{jsxref("Array.prototype.toString()")}}.</dd>
- <dt>{{jsxref("TypedArray.@@iterator", "Float32Array.prototype[@@iterator]()")}}</dt>
- <dd>Renvoie un nouvel objet <code>Array Iterator</code> qui contient les valeurs correspondantes à chaque indice du tableau.</dd>
-</dl>
-
-<h2 id="Exemples">Exemples</h2>
-
-<p>Différentes façons de créer un objet <code>Float32Array</code> :</p>
-
-<pre class="brush: js">// Construction à partir d'une longueur
-var float32 = new Float32Array(2);
-float32[0] = 42;
-console.log(float32[0]); // 42
-console.log(float32.length); // 2
-console.log(float32.BYTES_PER_ELEMENT); // 4
-
-// Construction à partir d'un tableau
-var arr = new Float32Array([21,31]);
-console.log(arr[1]); // 31
-
-// Construction à partir d'un tableau typé
-var x = new Float32Array([21, 31]);
-var y = new Float32Array(x);
-console.log(y[0]); // 21
-
-// Construction à partir d'un ArrayBuffer
-var buffer = new ArrayBuffer(16);
-var z = new Float32Array(buffer, 0, 4);
-
-// Construction à partir d'un itérable
-var iterable = function*(){ yield* [1,2,3]; }();
-var float32 = new Float32Array(iterable);
-// Float32Array[1, 2, 3]
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Typed Array')}}</td>
-   <td>{Spec2('Typed Array')}}</td>
-   <td>Remplacée par ECMAScript 2015.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#table-49', 'TypedArray constructors')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td>Défintion initiale au sein d'un standard ECMA. <code>new</code> est obligatoire.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#table-49', 'TypedArray constructors')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td>ECMAScript 2017 a modifié le constructeur afin que celui-ci utilise l'opération interne <code>ToIndex</code> et puisse être utilisé sans argument.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Float32Array")}}</p>
-
-<h2 id="Notes_de_compatibilité">Notes de compatibilité</h2>
-
-<p>À partir d'ECMAScript 2015 (ES6), <code>Float32Array</code> doit être utilisée avec {{jsxref("Opérateurs/L_opérateur_new", "new")}}. Appeler un constructeur <code>Float32Array</code> comme une fonction, sans <code>new</code>, provoquera une exception {{jsxref("TypeError")}}.</p>
-
-<pre class="brush: js example-bad">var dv = Float32Array([1, 2, 3]);
-// TypeError: calling a builtin Float32Array constructor
-// without new is forbidden</pre>
-
-<pre class="brush: js example-good">var dv = new Float32Array([1, 2, 3]);</pre>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/JavaScript/Tableaux_typés">Les tableaux typés en JavaScript</a></li>
- <li>{{jsxref("ArrayBuffer")}}</li>
- <li>{{jsxref("DataView")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/float32array/index.md b/files/fr/web/javascript/reference/global_objects/float32array/index.md
new file mode 100644
index 0000000000..0e20735fef
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/float32array/index.md
@@ -0,0 +1,180 @@
+---
+title: Float32Array
+slug: Web/JavaScript/Reference/Global_Objects/Float32Array
+tags:
+  - Constructor
+  - JavaScript
+  - Reference
+  - TypedArray
+  - TypedArrays
+translation_of: Web/JavaScript/Reference/Global_Objects/Float32Array
+original_slug: Web/JavaScript/Reference/Objets_globaux/Float32Array
+---
+{{JSRef}}
+
+Le tableau typé **`Float32Array`** représente un tableau de nombres flottants représentés sur 32 bits (ce qui correspond au type C `float`), l'ordre des octets utilisés étant celui de la plate-forme. Si on souhaite maîtriser le boutisme (_endianness_) utilisé, on pourra utiliser une {{jsxref("DataView")}}. Les éléments du tableau sont initialisés à `0`. Une fois que le tableau est établi, on peut référencer des éléments dans le tableau en utilisant les méthodes de l'objet ou la syntaxe usuelle des crochets.
+
+## Syntaxe
+
+    new Float32Array(); // Apparu avec ES2017
+    new Float32Array(longueur);
+    new Float32Array(tableauTypé);
+    new Float32Array(objet);
+    new Float32Array(buffer [, décalageOctets [, longueur]]);
+
+Pour plus d'informations sur la syntaxe de ce constructeur et les paramètres utilisés, voir la page {{jsxref("Objets_globaux/TypedArray","TypedArray","#Syntaxe")}}.
+
+## Propriétés
+
+- {{jsxref("TypedArray.BYTES_PER_ELEMENT", "Float32Array.BYTES_PER_ELEMENT")}}
+  - : Renvoie le nombre d'octets par élément. `4` dans le cas de `Float32Array`.
+- Float32Array.length
+  - : Une propriété de longueur statique qui vaut 3. Pour connaître le nombre d'élément, voir {{jsxref("TypedArray.prototype.length", "Float32Array.prototype.length")}}.
+- {{jsxref("TypedArray.name", "Float32Array.name")}}
+  - : Renvoie la chaîne de caractères correspondant au nom du constructeur, dans le cas de `Float32Array`, ce sera : "Float32Array".
+- {{jsxref("TypedArray.prototype", "Float32Array.prototype")}}
+  - : Le prototype des objets _TypedArray_.
+
+## Méthodes
+
+- {{jsxref("TypedArray.from", "Float32Array.from()")}}
+  - : Crée un nouvel objet `Float32Array` à partir d'un objet semblable à un tableau ou d'un objet itérable. Voir également la page {{jsxref("Array.from()")}}.
+- {{jsxref("TypedArray.of", "Float32Array.of()")}}
+  - : Crée un nouvel objet `Float32Array` à partir d'un nombre variable d'arguments. Voir également la page {{jsxref("Array.of()")}}.
+
+## Prototype `Float32Array`
+
+Chacun des objets `Float32Array` hérite de {{jsxref("TypedArray.prototype", "%TypedArray%.prototype")}}.
+
+### Propriétés
+
+- `Float32Array.prototype.constructor`
+  - : Renvoie la fonction qui a crée le prototype de l'instance. Par défaut, ce sera le constructeur `Float32Array`.
+- {{jsxref("TypedArray.prototype.buffer", "Float32Array.prototype.buffer")}} {{readonlyInline}}
+  - : Renvoie l'objet {{jsxref("ArrayBuffer")}} référencé par l'objet `Float32Array`. Cette propriété est fixée lors de la construction et n'est donc disponible qu'en **lecture seule**.
+- {{jsxref("TypedArray.prototype.byteLength", "Float32Array.prototype.byteLength")}} {{readonlyInline}}
+  - : Renvoie la longueur, exprimée en octets, de l'objet `Float32Array` à partir du début de l'{{jsxref("ArrayBuffer")}} correspondant. Cette propriété est fixée lors de la construction et n'est donc disponible qu'en **lecture seule**.
+- {{jsxref("TypedArray.prototype.byteOffset", "Float32Array.prototype.byteOffset")}} {{readonlyInline}}
+  - : Renvoie le décalage, exprimé en octets, de l'objet `Float32Array` par rapport au début de l'{{jsxref("ArrayBuffer")}} correspondant. Cette propriété est fixée lors de la construction et n'est donc disponible qu'en **lecture seule**.
+- {{jsxref("TypedArray.prototype.length", "Float32Array.prototype.length")}} {{readonlyInline}}
+  - : Renvoie le nombre d'éléments contenus dans l'objet `Float32Array`. Cette propriété est fixée lors de la construction et n'est donc disponible qu'en **lecture seule**.
+
+### Méthodes
+
+- {{jsxref("TypedArray.copyWithin", "Float32Array.prototype.copyWithin()")}}
+  - : Copie une suite d'éléments d'un tableau dans le tableau. Voir également {{jsxref("Array.prototype.copyWithin()")}}.
+- {{jsxref("TypedArray.entries", "Float32Array.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", "Float32Array.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", "Float32Array.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", "Float32Array.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", "Float32Array.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", "Float32Array.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", "Float32Array.prototype.forEach()")}}
+  - : Appelle une fonction pour chacun des élément du tableau. Voir également {{jsxref("Array.prototype.forEach()")}}.
+- {{jsxref("TypedArray.includes", "Float32Array.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", "Float32Array.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", "Float32Array.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", "Float32Array.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", "Float32Array.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", "Float32Array.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", "Float32Array.prototype.move()")}} {{non-standard_inline}} {{unimplemented_inline}}
+  - : Ancienne version, non-standard, de {{jsxref("TypedArray.copyWithin", "Float32Array.prototype.copyWithin()")}}.
+- {{jsxref("TypedArray.reduce", "Float32Array.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", "Float32Array.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", "Float32Array.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", "Float32Array.prototype.set()")}}
+  - : Enregistre plusieurs valeurs dans le tableau typé à partir de valeurs d'un autre tableau.
+- {{jsxref("TypedArray.slice", "Float32Array.prototype.slice()")}}
+  - : Extrait un fragment d'un tableau et renvoie ce fragment. Voir également {{jsxref("Array.prototype.slice()")}}.
+- {{jsxref("TypedArray.some", "Float32Array.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", "Float32Array.prototype.sort()")}}
+  - : Trie les éléments du tableau et renvoie ce tableau. Voir également {{jsxref("Array.prototype.sort()")}}.
+- {{jsxref("TypedArray.subarray", "Float32Array.prototype.subarray()")}}
+  - : Renvoie un nouvel objet `Float32Array` qui est le fragment du tableau courant, entre les indices de début et de fin donnés.
+- {{jsxref("TypedArray.values", "Float32Array.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", "Float32Array.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", "Float32Array.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", "Float32Array.prototype[@@iterator]()")}}
+  - : Renvoie un nouvel objet `Array Iterator` qui contient les valeurs correspondantes à chaque indice du tableau.
+
+## Exemples
+
+Différentes façons de créer un objet `Float32Array` :
+
+```js
+// Construction à partir d'une longueur
+var float32 = new Float32Array(2);
+float32[0] = 42;
+console.log(float32[0]); // 42
+console.log(float32.length); // 2
+console.log(float32.BYTES_PER_ELEMENT); // 4
+
+// Construction à partir d'un tableau
+var arr = new Float32Array([21,31]);
+console.log(arr[1]); // 31
+
+// Construction à partir d'un tableau typé
+var x = new Float32Array([21, 31]);
+var y = new Float32Array(x);
+console.log(y[0]); // 21
+
+// Construction à partir d'un ArrayBuffer
+var buffer = new ArrayBuffer(16);
+var z = new Float32Array(buffer, 0, 4);
+
+// Construction à partir d'un itérable
+var iterable = function*(){ yield* [1,2,3]; }();
+var float32 = new Float32Array(iterable);
+// Float32Array[1, 2, 3]
+```
+
+## Spécifications
+
+| Spécification                                                                        | État                         | Commentaires                                                                                                                            |
+| ------------------------------------------------------------------------------------ | ---------------------------- | --------------------------------------------------------------------------------------------------------------------------------------- |
+| {{SpecName('Typed Array')}}                                                 | {Spec2('Typed Array')}}      | Remplacée par ECMAScript 2015.                                                                                                          |
+| {{SpecName('ES6', '#table-49', 'TypedArray constructors')}}     | {{Spec2('ES6')}}         | Défintion initiale au sein d'un standard ECMA. `new` est obligatoire.                                                                   |
+| {{SpecName('ESDraft', '#table-49', 'TypedArray constructors')}} | {{Spec2('ESDraft')}} | ECMAScript 2017 a modifié le constructeur afin que celui-ci utilise l'opération interne `ToIndex` et puisse être utilisé sans argument. |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Float32Array")}}
+
+## Notes de compatibilité
+
+À partir d'ECMAScript 2015 (ES6), `Float32Array` doit être utilisée avec {{jsxref("Opérateurs/L_opérateur_new", "new")}}. Appeler un constructeur `Float32Array` comme une fonction, sans `new`, provoquera une exception {{jsxref("TypeError")}}.
+
+```js example-bad
+var dv = Float32Array([1, 2, 3]);
+// TypeError: calling a builtin Float32Array constructor
+// without new is forbidden
+```
+
+```js example-good
+var dv = new Float32Array([1, 2, 3]);
+```
+
+## Voir aussi
+
+- [Les tableaux typés en JavaScript](/fr/docs/Web/JavaScript/Tableaux_typés)
+- {{jsxref("ArrayBuffer")}}
+- {{jsxref("DataView")}}
diff --git a/files/fr/web/javascript/reference/global_objects/float64array/index.html b/files/fr/web/javascript/reference/global_objects/float64array/index.html
deleted file mode 100644
index 9865674fff..0000000000
--- a/files/fr/web/javascript/reference/global_objects/float64array/index.html
+++ /dev/null
@@ -1,203 +0,0 @@
----
-title: Float64Array
-slug: Web/JavaScript/Reference/Global_Objects/Float64Array
-tags:
-  - Constructor
-  - JavaScript
-  - Reference
-  - TypedArray
-  - TypedArrays
-translation_of: Web/JavaScript/Reference/Global_Objects/Float64Array
-original_slug: Web/JavaScript/Reference/Objets_globaux/Float64Array
----
-<div>{{JSRef}}</div>
-
-<p>Le constructeur <strong><code>Floa64Array</code></strong> permet de représenter un tableau typé dont les éléments sont des nombres flottants représentés sur 64 bits (ce qui correspond à la représentation du type <code>double</code> en C) dans l'ordre des octets utilisé par la plate-forme. Si on souhaite maîtriser le boutisme (<em>endianness</em>), on pourra utiliser un objet {{jsxref("DataView")}} à la place. Les éléments du tableau sont initialisés à <code>0</code>. Une fois construit, il est possible de faire référence aux éléments du tableau en utilisant les méthodes de l'objet ou la syntaxe usuelle pour l'accès aux éléments du tableau (les crochets).</p>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">new Float64Array(); // apparu avec ES2017
-new Float64Array(longueur);
-new Float64Array(tableauTypé);
-new Float64Array(objet);
-new Float64Array(buffer [, positionOctet [, longueur]]);</pre>
-
-<p>Pour plus d'informations sur la syntaxe du constructeur et ses paramètres, voir <em><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/TypedArray#Syntaxe">TypedArray</a></em>.</p>
-
-<h2 id="Propriétés">Propriétés</h2>
-
-<dl>
- <dt>{{jsxref("TypedArray.BYTES_PER_ELEMENT", "Float64Array.BYTES_PER_ELEMENT")}}</dt>
- <dd>Renvoie un nombre traduisant la taille de l'élément en octets, <code>8</code> dans le cas d'un <code>Float64Array</code>.</dd>
- <dt>Float64Array.length</dt>
- <dd>Une propriété de longueur statique qui vaut 3. Pour connaître le nombre d'éléments, voir {{jsxref("TypedArray.prototype.length", "Float64Array.prototype.length")}}.</dd>
- <dt>{{jsxref("TypedArray.name", "Float64Array.name")}}</dt>
- <dd>Renvoie la chaîne de caractère correspondant au nom du constructeur, dans le cas de <code>Float64Array</code>, ce sera : "Float64Array".</dd>
- <dt>{{jsxref("TypedArray.prototype", "Float64Array.prototype")}}</dt>
- <dd>Prototype pour les objets <em>TypedArray</em>.</dd>
-</dl>
-
-<h2 id="Méthodes">Méthodes</h2>
-
-<dl>
- <dt>{{jsxref("TypedArray.from", "Float64Array.from()")}}</dt>
- <dd>Crée un nouvel objet <code>Float64Array</code> à partir d'un objet semblable à un tableau ou d'un objet itérable. Voir aussi {{jsxref("Array.from()")}}.</dd>
- <dt>{{jsxref("TypedArray.of", "Float64Array.of()")}}</dt>
- <dd>Crée un nouvel objet <code>Float64Array</code> à partir d'un nombre variable d'arguments. Voir aussi {{jsxref("Array.of()")}}.</dd>
-</dl>
-
-<h2 id="Prototype_de_Float64Array">Prototype de <code>Float64Array</code></h2>
-
-<p>Tous les objets <code>Float64Array</code> héritent de {{jsxref("TypedArray.prototype", "Float64Array.prototype")}}.</p>
-
-<h3 id="Propriétés_2">Propriétés</h3>
-
-<dl>
- <dt><code>Float64Array.prototype.constructor</code></dt>
- <dd>Renvoie la fonction qui a créé le prototype de l'instance. Par défaut, ce sera le constructeur natif <code>Float64Array</code>.</dd>
- <dt>{{jsxref("TypedArray.prototype.buffer", "Float64Array.prototype.buffer")}} {{readonlyInline}}</dt>
- <dd>Renvoie l'{{jsxref("ArrayBuffer")}} référencé par l'objet <code>Float64Array</code>. Cette valeur est fixée lors de la construction de l'objet et n'est accessible qu'<strong>en lecture seule</strong>.</dd>
- <dt>{{jsxref("TypedArray.prototype.byteLength", "Float64Array.prototype.byteLength")}} {{readonlyInline}}</dt>
- <dd>Renvoie la longueur, exprimée en octets, de l'objet <code>Float64Array</code> depuis le début de son {{jsxref("ArrayBuffer")}}. Cette valeur est fixée lors de la construction de l'objet et n'est accessible qu'<strong>en lecture seule</strong>.</dd>
- <dt>{{jsxref("TypedArray.prototype.byteOffset", "Float64Array.prototype.byteOffset")}} {{readonlyInline}}</dt>
- <dd>Renvoie le décalage, exprimé en octets, entre l'objet <code>Float64Array</code> et le début de son {{jsxref("ArrayBuffer")}}. Cette valeur est fixée lors de la construction de l'objet et n'est accessible qu'<strong>en lecture seule</strong>.</dd>
- <dt>{{jsxref("TypedArray.prototype.length", "Float64Array.prototype.length")}} {{readonlyInline}}</dt>
- <dd>Renvoie le nombre d'éléments contenus dans l'objet <code>Float64Array</code>. Cette valeur est fixée lors de la construction de l'objet et n'est accessible qu'<strong>en lecture seule</strong>.</dd>
-</dl>
-
-<h3 id="Méthodes_2">Méthodes</h3>
-
-<dl>
- <dt>{{jsxref("TypedArray.copyWithin", "Float64Array.prototype.copyWithin()")}}</dt>
- <dd>Copie une suite d'éléments d'un tableau dans le tableau. Voir également {{jsxref("Array.prototype.copyWithin()")}}.</dd>
- <dt>{{jsxref("TypedArray.entries", "Float64Array.prototype.entries()")}}</dt>
- <dd>Renvoie un nouvel objet <code>Array Iterator</code> qui contient les paires clé/valeur pour chaque indice du tableau. Voir également {{jsxref("Array.prototype.entries()")}}.</dd>
- <dt>{{jsxref("TypedArray.every", "Float64Array.prototype.every()")}}</dt>
- <dd>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()")}}.</dd>
- <dt>{{jsxref("TypedArray.fill", "Float64Array.prototype.fill()")}}</dt>
- <dd>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()")}}.</dd>
- <dt>{{jsxref("TypedArray.filter", "Float64Array.prototype.filter()")}}</dt>
- <dd>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()")}}.</dd>
- <dt>{{jsxref("TypedArray.find", "Float64Array.prototype.find()")}}</dt>
- <dd>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 <code>undefined</code> sera renvoyé. Voir également {{jsxref("Array.prototype.find()")}}.</dd>
- <dt>{{jsxref("TypedArray.findIndex", "Float64Array.prototype.findIndex()")}}</dt>
- <dd>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()")}}.</dd>
- <dt>{{jsxref("TypedArray.forEach", "Float64Array.prototype.forEach()")}}</dt>
- <dd>Appelle une fonction pour chacun des élément du tableau. Voir également {{jsxref("Array.prototype.forEach()")}}.</dd>
- <dt>{{jsxref("TypedArray.includes", "Float64Array.prototype.includes()")}}</dt>
- <dd>Détermine si le tableau typé contient un élément donné. Cette méthode renvoie <code>true</code> ou <code>false</code> selon le cas de figure. Voir également {{jsxref("Array.prototype.includes()")}}.</dd>
- <dt>{{jsxref("TypedArray.indexOf", "Float64Array.prototype.indexOf()")}}</dt>
- <dd>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()")}}.</dd>
- <dt>{{jsxref("TypedArray.join", "Float64Array.prototype.join()")}}</dt>
- <dd>Fusionne l'ensemble des éléments du tableau en une chaîne de caractères. Voir également {{jsxref("Array.prototype.join()")}}.</dd>
- <dt>{{jsxref("TypedArray.keys", "Float64Array.prototype.keys()")}}</dt>
- <dd>Renvoie un nouvel objet <code>Array Iterator</code> qui contient les clés de chaque indice du tableau. Voir également {{jsxref("Array.prototype.keys()")}}.</dd>
- <dt>{{jsxref("TypedArray.lastIndexOf", "Float64Array.prototype.lastIndexOf()")}}</dt>
- <dd>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()")}}.</dd>
- <dt>{{jsxref("TypedArray.map", "Float64Array.prototype.map()")}}</dt>
- <dd>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()")}}.</dd>
- <dt>{{jsxref("TypedArray.move", "Float64Array.prototype.move()")}} {{non-standard_inline}} {{unimplemented_inline}}</dt>
- <dd>Ancienne version, non-standard, de {{jsxref("TypedArray.copyWithin", "Float64Array.prototype.copyWithin()")}}.</dd>
- <dt>{{jsxref("TypedArray.reduce", "Float64Array.prototype.reduce()")}}</dt>
- <dd>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()")}}.</dd>
- <dt>{{jsxref("TypedArray.reduceRight", "Float64Array.prototype.reduceRight()")}}</dt>
- <dd>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()")}}.</dd>
- <dt>{{jsxref("TypedArray.reverse", "Float64Array.prototype.reverse()")}}</dt>
- <dd>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()")}}.</dd>
- <dt>{{jsxref("TypedArray.set", "Float64Array.prototype.set()")}}</dt>
- <dd>Enregistre plusieurs valeurs dans le tableau typé à partir de valeurs d'un autre tableau.</dd>
- <dt>{{jsxref("TypedArray.slice", "Float64Array.prototype.slice()")}}</dt>
- <dd>Extrait un fragment d'un tableau et renvoie ce fragment. Voir également {{jsxref("Array.prototype.slice()")}}.</dd>
- <dt>{{jsxref("TypedArray.some", "Float64Array.prototype.some()")}}</dt>
- <dd>Renvoie <code>true</code> si au moins un des éléments remplit une condition donnée par une fonction de test. Voir également {{jsxref("Array.prototype.some()")}}.</dd>
- <dt>{{jsxref("TypedArray.sort", "Float64Array.prototype.sort()")}}</dt>
- <dd>Trie les éléments du tableau et renvoie ce tableau. Voir également {{jsxref("Array.prototype.sort()")}}.</dd>
- <dt>{{jsxref("TypedArray.subarray", "Float64Array.prototype.subarray()")}}</dt>
- <dd>Renvoie un nouvel objet <code>Float64Array</code> qui est le fragment du tableau courant, entre les indices de début et de fin donnés.</dd>
- <dt>{{jsxref("TypedArray.values", "Float64Array.prototype.values()")}}</dt>
- <dd>Renvoie un nouvel objet <code>Array Iterator</code> qui contient les valeurs correspondantes à chaque indice du tableau. Voir également {{jsxref("Array.prototype.values()")}}.</dd>
- <dt>{{jsxref("TypedArray.toLocaleString", "Float64Array.prototype.toLocaleString()")}}</dt>
- <dd>Renvoie une chaîne de caractères localisée qui représente le tableau et ses éléments. Voir également {{jsxref("Array.prototype.toLocaleString()")}}.</dd>
- <dt>{{jsxref("TypedArray.toString", "Float64Array.prototype.toString()")}}</dt>
- <dd>Renvoie une chaîne de caractère qui représente le tableau et ses éléments. Voir également {{jsxref("Array.prototype.toString()")}}.</dd>
- <dt>{{jsxref("TypedArray.@@iterator", "Float64Array.prototype[@@iterator]()")}}</dt>
- <dd>Renvoie un nouvel objet <code>Array Iterator</code> qui contient les valeurs correspondantes à chaque indice du tableau.</dd>
-</dl>
-
-<h2 id="Exemples">Exemples</h2>
-
-<p>Différentes façons de créer un objet <code>Float64Array</code> :</p>
-
-<pre class="brush: js">// Construction avec une longueur de tableau
-var float64 = new Float64Array(2);
-float64[0] = 42;
-console.log(float64[0]); // 42
-console.log(float64.length); // 2
-console.log(float64.BYTES_PER_ELEMENT); // 8
-
-// Construction à partir d'un tableau
-var arr = new Float64Array([21,31]);
-console.log(arr[1]); // 31
-
-// Construction à partir d'un autre tableau typé
-var x = new Float64Array([21, 31]);
-var y = new Float64Array(x);
-console.log(y[0]); // 21
-
-// Construction à partir d'un ArrayBuffer
-var buffer = new ArrayBuffer(32);
-var z = new Float64Array(buffer, 0, 4);
-
-// Construction à partir d'un itérable
-var iterable = function*(){ yield* [1,2,3]; }();
-var float64 = new Float64Array(iterable);
-// Float64Array[1, 2, 3]
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Typed Array')}}</td>
-   <td>{{Spec2('Typed Array')}}</td>
-   <td>Remplacée dans ECMAScript 2015.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2015', '#table-49', 'TypedArray constructors')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td>Première définition au sein d'un standard ECMAScript. <code>new</code> est nécessaire pour utiliser le constructeur.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#table-49', 'TypedArray constructors')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td>ECMAScript 2017 a modifié le constructeur afin qu'il utilise l'opération interne <code>ToIndex</code> ce qui permet de l'utiliser sans argument.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Float64Array")}}</p>
-
-<h2 id="Notes_de_compatibilité">Notes de compatibilité</h2>
-
-<p>À partir d'ECMAScript 2015 (ES6), les constructeurs <code>TypedArray</code> doivent être utilisés avec {{jsxref("Opérateurs/L_opérateur_new", "new")}}. Appeler un constructeur <code>TypedArray</code> comme une fonction, sans <code>new</code>, provoquera une exception {{jsxref("TypeError")}}.</p>
-
-<pre class="brush: js example-bad">var dv = Float64Array([1, 2, 3]);
-// TypeError: calling a builtin Float64Array constructor without new is forbidden</pre>
-
-<pre class="brush: js example-good">var dv = new Float64Array([1, 2, 3]);</pre>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/JavaScript/Tableaux_typés">Les tableaux typés en JavaScript</a></li>
- <li>{{jsxref("ArrayBuffer")}}</li>
- <li>{{jsxref("DataView")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/float64array/index.md b/files/fr/web/javascript/reference/global_objects/float64array/index.md
new file mode 100644
index 0000000000..daace3e093
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/float64array/index.md
@@ -0,0 +1,179 @@
+---
+title: Float64Array
+slug: Web/JavaScript/Reference/Global_Objects/Float64Array
+tags:
+  - Constructor
+  - JavaScript
+  - Reference
+  - TypedArray
+  - TypedArrays
+translation_of: Web/JavaScript/Reference/Global_Objects/Float64Array
+original_slug: Web/JavaScript/Reference/Objets_globaux/Float64Array
+---
+{{JSRef}}
+
+Le constructeur **`Floa64Array`** permet de représenter un tableau typé dont les éléments sont des nombres flottants représentés sur 64 bits (ce qui correspond à la représentation du type `double` en C) dans l'ordre des octets utilisé par la plate-forme. Si on souhaite maîtriser le boutisme (_endianness_), on pourra utiliser un objet {{jsxref("DataView")}} à la place. Les éléments du tableau sont initialisés à `0`. Une fois construit, il est possible de faire référence aux éléments du tableau en utilisant les méthodes de l'objet ou la syntaxe usuelle pour l'accès aux éléments du tableau (les crochets).
+
+## Syntaxe
+
+    new Float64Array(); // apparu avec ES2017
+    new Float64Array(longueur);
+    new Float64Array(tableauTypé);
+    new Float64Array(objet);
+    new Float64Array(buffer [, positionOctet [, longueur]]);
+
+Pour plus d'informations sur la syntaxe du constructeur et ses paramètres, voir _[TypedArray](/fr/docs/Web/JavaScript/Reference/Global_Objects/TypedArray#Syntaxe)_.
+
+## Propriétés
+
+- {{jsxref("TypedArray.BYTES_PER_ELEMENT", "Float64Array.BYTES_PER_ELEMENT")}}
+  - : Renvoie un nombre traduisant la taille de l'élément en octets, `8` dans le cas d'un `Float64Array`.
+- Float64Array.length
+  - : Une propriété de longueur statique qui vaut 3. Pour connaître le nombre d'éléments, voir {{jsxref("TypedArray.prototype.length", "Float64Array.prototype.length")}}.
+- {{jsxref("TypedArray.name", "Float64Array.name")}}
+  - : Renvoie la chaîne de caractère correspondant au nom du constructeur, dans le cas de `Float64Array`, ce sera : "Float64Array".
+- {{jsxref("TypedArray.prototype", "Float64Array.prototype")}}
+  - : Prototype pour les objets _TypedArray_.
+
+## Méthodes
+
+- {{jsxref("TypedArray.from", "Float64Array.from()")}}
+  - : Crée un nouvel objet `Float64Array` à partir d'un objet semblable à un tableau ou d'un objet itérable. Voir aussi {{jsxref("Array.from()")}}.
+- {{jsxref("TypedArray.of", "Float64Array.of()")}}
+  - : Crée un nouvel objet `Float64Array` à partir d'un nombre variable d'arguments. Voir aussi {{jsxref("Array.of()")}}.
+
+## Prototype de `Float64Array`
+
+Tous les objets `Float64Array` héritent de {{jsxref("TypedArray.prototype", "Float64Array.prototype")}}.
+
+### Propriétés
+
+- `Float64Array.prototype.constructor`
+  - : Renvoie la fonction qui a créé le prototype de l'instance. Par défaut, ce sera le constructeur natif `Float64Array`.
+- {{jsxref("TypedArray.prototype.buffer", "Float64Array.prototype.buffer")}} {{readonlyInline}}
+  - : Renvoie l'{{jsxref("ArrayBuffer")}} référencé par l'objet `Float64Array`. Cette valeur est fixée lors de la construction de l'objet et n'est accessible qu'**en lecture seule**.
+- {{jsxref("TypedArray.prototype.byteLength", "Float64Array.prototype.byteLength")}} {{readonlyInline}}
+  - : Renvoie la longueur, exprimée en octets, de l'objet `Float64Array` depuis le début de son {{jsxref("ArrayBuffer")}}. Cette valeur est fixée lors de la construction de l'objet et n'est accessible qu'**en lecture seule**.
+- {{jsxref("TypedArray.prototype.byteOffset", "Float64Array.prototype.byteOffset")}} {{readonlyInline}}
+  - : Renvoie le décalage, exprimé en octets, entre l'objet `Float64Array` et le début de son {{jsxref("ArrayBuffer")}}. Cette valeur est fixée lors de la construction de l'objet et n'est accessible qu'**en lecture seule**.
+- {{jsxref("TypedArray.prototype.length", "Float64Array.prototype.length")}} {{readonlyInline}}
+  - : Renvoie le nombre d'éléments contenus dans l'objet `Float64Array`. Cette valeur est fixée lors de la construction de l'objet et n'est accessible qu'**en lecture seule**.
+
+### Méthodes
+
+- {{jsxref("TypedArray.copyWithin", "Float64Array.prototype.copyWithin()")}}
+  - : Copie une suite d'éléments d'un tableau dans le tableau. Voir également {{jsxref("Array.prototype.copyWithin()")}}.
+- {{jsxref("TypedArray.entries", "Float64Array.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", "Float64Array.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", "Float64Array.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", "Float64Array.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", "Float64Array.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", "Float64Array.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", "Float64Array.prototype.forEach()")}}
+  - : Appelle une fonction pour chacun des élément du tableau. Voir également {{jsxref("Array.prototype.forEach()")}}.
+- {{jsxref("TypedArray.includes", "Float64Array.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", "Float64Array.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", "Float64Array.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", "Float64Array.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", "Float64Array.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", "Float64Array.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", "Float64Array.prototype.move()")}} {{non-standard_inline}} {{unimplemented_inline}}
+  - : Ancienne version, non-standard, de {{jsxref("TypedArray.copyWithin", "Float64Array.prototype.copyWithin()")}}.
+- {{jsxref("TypedArray.reduce", "Float64Array.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", "Float64Array.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", "Float64Array.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", "Float64Array.prototype.set()")}}
+  - : Enregistre plusieurs valeurs dans le tableau typé à partir de valeurs d'un autre tableau.
+- {{jsxref("TypedArray.slice", "Float64Array.prototype.slice()")}}
+  - : Extrait un fragment d'un tableau et renvoie ce fragment. Voir également {{jsxref("Array.prototype.slice()")}}.
+- {{jsxref("TypedArray.some", "Float64Array.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", "Float64Array.prototype.sort()")}}
+  - : Trie les éléments du tableau et renvoie ce tableau. Voir également {{jsxref("Array.prototype.sort()")}}.
+- {{jsxref("TypedArray.subarray", "Float64Array.prototype.subarray()")}}
+  - : Renvoie un nouvel objet `Float64Array` qui est le fragment du tableau courant, entre les indices de début et de fin donnés.
+- {{jsxref("TypedArray.values", "Float64Array.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", "Float64Array.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", "Float64Array.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", "Float64Array.prototype[@@iterator]()")}}
+  - : Renvoie un nouvel objet `Array Iterator` qui contient les valeurs correspondantes à chaque indice du tableau.
+
+## Exemples
+
+Différentes façons de créer un objet `Float64Array` :
+
+```js
+// Construction avec une longueur de tableau
+var float64 = new Float64Array(2);
+float64[0] = 42;
+console.log(float64[0]); // 42
+console.log(float64.length); // 2
+console.log(float64.BYTES_PER_ELEMENT); // 8
+
+// Construction à partir d'un tableau
+var arr = new Float64Array([21,31]);
+console.log(arr[1]); // 31
+
+// Construction à partir d'un autre tableau typé
+var x = new Float64Array([21, 31]);
+var y = new Float64Array(x);
+console.log(y[0]); // 21
+
+// Construction à partir d'un ArrayBuffer
+var buffer = new ArrayBuffer(32);
+var z = new Float64Array(buffer, 0, 4);
+
+// Construction à partir d'un itérable
+var iterable = function*(){ yield* [1,2,3]; }();
+var float64 = new Float64Array(iterable);
+// Float64Array[1, 2, 3]
+```
+
+## Spécifications
+
+| Spécification                                                                        | État                             | Commentaires                                                                                                                          |
+| ------------------------------------------------------------------------------------ | -------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------- |
+| {{SpecName('Typed Array')}}                                                 | {{Spec2('Typed Array')}} | Remplacée dans ECMAScript 2015.                                                                                                       |
+| {{SpecName('ES2015', '#table-49', 'TypedArray constructors')}} | {{Spec2('ES2015')}}         | Première définition au sein d'un standard ECMAScript. `new` est nécessaire pour utiliser le constructeur.                             |
+| {{SpecName('ESDraft', '#table-49', 'TypedArray constructors')}} | {{Spec2('ESDraft')}}     | ECMAScript 2017 a modifié le constructeur afin qu'il utilise l'opération interne `ToIndex` ce qui permet de l'utiliser sans argument. |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Float64Array")}}
+
+## Notes de compatibilité
+
+À partir d'ECMAScript 2015 (ES6), les constructeurs `TypedArray` doivent être utilisés avec {{jsxref("Opérateurs/L_opérateur_new", "new")}}. Appeler un constructeur `TypedArray` comme une fonction, sans `new`, provoquera une exception {{jsxref("TypeError")}}.
+
+```js example-bad
+var dv = Float64Array([1, 2, 3]);
+// TypeError: calling a builtin Float64Array constructor without new is forbidden
+```
+
+```js example-good
+var dv = new Float64Array([1, 2, 3]);
+```
+
+## Voir aussi
+
+- [Les tableaux typés en JavaScript](/fr/docs/Web/JavaScript/Tableaux_typés)
+- {{jsxref("ArrayBuffer")}}
+- {{jsxref("DataView")}}
diff --git a/files/fr/web/javascript/reference/global_objects/function/apply/index.html b/files/fr/web/javascript/reference/global_objects/function/apply/index.html
deleted file mode 100644
index a8dcbf5fab..0000000000
--- a/files/fr/web/javascript/reference/global_objects/function/apply/index.html
+++ /dev/null
@@ -1,208 +0,0 @@
----
-title: Function.prototype.apply()
-slug: Web/JavaScript/Reference/Global_Objects/Function/apply
-tags:
-  - Function
-  - JavaScript
-  - Méthode
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Function/apply
-original_slug: Web/JavaScript/Reference/Objets_globaux/Function/apply
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <code><strong>apply()</strong></code> appelle une fonction en lui passant une valeur <code>this</code> et des <code>arguments</code> sous forme d'un tableau (ou d'un objet <a href="/fr/docs/Web/JavaScript/Guide/Objets_élémentaires_JavaScript#Manipuler_des_objets_semblables_aux_tableaux">semblable à un tableau</a>).</p>
-
-<div class="note"><p><strong>Note :</strong> Bien que la syntaxe de cette fonction ressemble à celle de {{jsxref("Function.call", "call()")}}, elle est différente car <code>call()</code> accepte <strong>une liste d'arguments</strong>, tandis que <code>apply()</code> accepte un <strong>tableau d'arguments</strong>.</p></div>
-
-<div class="note"><p><strong>Note :</strong> Quand on utilise {{jsxref("undefined")}} ou {{jsxref("null")}} comme premier argument pour cette fonction, on peut obtenir un résultat similaire avec la <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Syntaxe_décomposition">syntaxe de décomposition</a>.</p></div>
-
-<div>{{EmbedInteractiveExample("pages/js/function-apply.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>fun</var>.apply(<var>thisArg, </var>[<var>argsArray</var>])</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>thisArg</code></dt>
- <dd>La valeur de <code>this</code> fournie pour l'appel à la fonction <em><code>fun</code></em>. On notera que, sous certaines conditions, <code>this</code> peut ne pas être la valeur exacte vue par la méthode : si la méthode est une fonction utilisée en mode {{jsxref("Strict_mode", "mode non-strict", "", 1)}}, {{jsxref("null")}} et {{jsxref("undefined")}} seront remplacées par l'objet global, et les valeurs primitives seront encapsulées. Cet argument n'est pas optionnel.</dd>
- <dt><code>argsArray</code></dt>
- <dd>Un objet semblable à un tableau qui définit les arguments avec lesquel <em><code>fun</code></em> devrait être appelée, ou {{jsxref("null")}} ou {{jsxref("undefined")}} si aucun argument n'est passé à la fonction. Avec ECMAScript 5, ces arguments peuvent être représentés par un objet semblable un tableau. Voir ci-après pour plus d'informations sur <a href="#compat">la compatibilité des navigateurs</a>.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Le résultat obtenu en appelant la fonction avec la valeur <code>this</code> indiquée et les arguments fournis.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>Il est possible d'utiliser un objet <code>this</code> différent lors de l'appel à une fonction existante. <code>this</code> fait référence à l'objet courant, l'objet appelant. Avec <code>apply</code>, on peut écrire une méthode une seule fois et en hériter dans un autre objet, sans avoir à la réécrire dans le nouvel objet.</p>
-
-<p><code>apply</code> est similaire à {{jsxref("Function.call", "call()")}}, hormis pour le type d'arguments supporté. Il est possible d'utiliser un tableau à la place d'un ensemble de paramètres. Avec <code>apply</code>, il est également possible d'utiliser un littéral de tableau, par exemple, <code><em>fun</em>.apply(this, ['manger', 'bananes'])</code>, ou un objet {{jsxref("Array")}}, par exemple, <code><em>fun</em>.apply(this, new Array('manger', 'bananes'))</code>.</p>
-
-<p>On peut aussi passer {{jsxref("Fonctions/arguments", "arguments ")}} en tant que paramètre <code>argsArray</code>. <code>arguments</code> étant une variable locale à la fonction. Celle-ci peut également être utilisée pour tous les arguments non spécifiés de l'objet appelé. Ainsi, il n'est pas nécessaire de connaître les arguments de l'objet appelé lors d'un appel à la méthode <code>apply</code>. <code>arguments</code> peut être utilisé pour passer tous les arguments à l'objet appelé. L'objet appelé gèrera alors la manipulation des arguments.</p>
-
-<p>Depuis la cinquième édition d'ECMAScript, il est possible d'utiliser des objet semblables à des tableaux à la place. En pratique tout objet possédant une propriété <code>length</code> et une propriété entière comprise entre <code>[0..length[</code> est un objet semblable à un tableau. On peut ainsi, par exemple, utiliser un objet {{domxref("NodeList")}} ou un objet quelconque comme <code>{'length': 2, '0': 'manger', '1': 'bananes'}</code>.</p>
-
-<div class="note">
-<p><strong>Note :</strong> Beaucoup de navigateurs, y compris Chrome 14 et Internet Explorer 9 n'acceptent pas encore un objet semblable à un tableau, ils déclencheront un exception.</p>
-</div>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Utiliser_apply_pour_chaîner_des_constructeurs">Utiliser <code>apply</code> pour chaîner des constructeurs</h3>
-
-<p>Il est possible d'utiliser <code>apply</code> afin de chaîner les {{jsxref("Opérateurs/L_opérateur_new", "constructeurs","",1)}} d'un objet, de façon sembable au chaînage utilisé en java. Dans l'exemple suivant, on crée une {{jsxref("Function")}} globale appelée <code>construct</code>, qui permet d'utiliser un objet de type <code>Array</code> associé à un constructeur au lieu d'une liste d'arguments.</p>
-
-<pre class="brush: js">Function.prototype.construct = function (aArgs) {
-  var nouvelObjet = Object.create(this.prototype);
-  this.apply(nouvelObjet, aArgs);
-  return nouvelObjet;
-};
-</pre>
-
-<div class="note">
-<p><strong>Note :</strong> La méthode {{jsxref("Object.create()")}} utilisée ci-avant est relativement nouvelle. Pour une autre méthode qui utilise les <code>closure</code>, on pourra utiliser :</p>
-
-<pre class="brush: js">Function.prototype.construct = function(aArgs) {
-  var fConstructeur = this, fNouveauConstructeur = function() {
-    fConstructeur.apply(this, aArgs);
-  };
-  fNouveauConstructeur.prototype = fConstructeur.prototype;
-  return new fNouveauConstructeur();
-};</pre>
-</div>
-
-<p>Exemple d'utilisation :</p>
-
-<pre class="brush: js">function MonConstructeur () {
-    for (var nProp = 0; nProp &lt; arguments.length; nProp++) {
-        this["propriété" + nProp] = arguments[nProp];
-    }
-}
-
-var monTableau = [4, "Coucou monde !", false];
-var monInstance = MonConstructeur.construct(monTableau);
-
-console.log(monInstance.propriété1); // "Coucou monde !"
-console.log(monInstance instanceof MonConstructeur); // "true"
-console.log(monInstance.constructor); // "MonConstructeur"
-</pre>
-
-<div class="note">
-<p><strong>Note :</strong> On pourrait également utiliser {{jsxref("Object/__proto__", "Object.__proto__")}}</p>
-
-<pre class="brush: js">Function.prototype.construct = function (aArgs) {
-  var oNew = {};
-  oNew.__proto__ = this.prototype;
-  this.apply(oNew, aArgs);
-  return oNew;
-};
-</pre>
-
-<p>ou encore le constructeur {{jsxref("Function")}} :</p>
-
-<pre class="brush: js">Function.prototype.construct = function (aArgs) {
-  var fNewConstr = new Function("");
-  fNewConstr.prototype = this.prototype;
-  var oNew = new fNewConstr();
-  this.apply(oNew, aArgs);
-  return oNew;
-};
-</pre>
-</div>
-
-<div class="note"><p><strong>Note :</strong> Attention, cette méthode non-native <code>Function.construct</code> ne fonctionnera pas avec certains contructeurs natifs (tels que {{jsxref("Date", "Date")}}). Dans ce cas précis, on peut utiliser la méthode {{jsxref("Function.bind")}} (pour exemple, si on prend le tableau suivant <code>[2012, 11, 4]</code> utilisé sur le constructeur de l'objet <code>Date</code> : on peut écrire ceci : <code>new (Function.prototype.bind.apply(Date, [null].concat([2012, 11, 4])))()</code> – cependant cela reste une pratique à éviter si possible et à ne pas utiliser en dans un environnement de production).</p></div>
-
-<h3 id="Utiliser_apply_et_des_fonctions_natives">Utiliser <code>apply</code> et des fonctions natives</h3>
-
-<p>Un usage singulier de <code>apply</code> permet d'appeler des fonctions natives pour réaliser par exemple des tâches qui autrement auraient nécessité une boucle sur toutes les valeurs d'un tableau. Pour illustrer ce concept, on prend l'exemple de <code>Math.max</code>/<code>Math.min</code> qui permettent d'extraire la valeur maximum/minimale de notre tableau.</p>
-
-<pre class="brush: js">/* min/max tableau de nombres */
-var nombres = [5, 6, 2, 3, 7];
-
-/* usage de Math.min/Math.max et de la méthode apply */
-var max = Math.max.apply(null, nombres);
-/* Equivalent à Math.max(nombres[0], ...)
-  ou Math.max(5, 6, ..) */
-
-var min = Math.min.apply(null, nombres);
-
-/* vs. algorithme trivial avec une boucle */
-max = -Infinity, min = +Infinity;
-
-for (var i = 0; i &lt; nombres.length; i++) {
-  if (nombres[i] &gt; max)
-    max = nombres[i];
-  if (nombres[i] &lt; min)
-    min = nombres[i];
-}</pre>
-
-<p>Note : l'utilisation de <code>apply</code> peut provoquer l'atteinte du seuil limite du nombres d'arguments supporté par le moteur Javascript. Les conséquences de cette utilisation abusive (on évoque plus de 10000 arguments) peuvent varier selon les moteurs Javascript (JavaScript contient une limite en dur de <a class="link-https" href="https://bugs.webkit.org/show_bug.cgi?id=80797">65536</a>), car une liberté subsiste quant à l'implémentation du moteur. Des moteurs lèveront une exception si le seuil est atteint. Il est donc préférable d'apporter une attention toute particulière au nombre d'arguments passés. (Illustrerons ce cas dans l'exemple suivant avec un moteur factice capable de ne gérer que 4 arguments au maximum (les limites natives sont, bien sûr, plus élevées), et reprenons les arguments de l'exemple précédent <code>5, 6, 2, 3</code> passés à la méthode <code>apply</code> plutôt que notre tableau entier.) Imaginons que notre tableau soit progressivement peuplé de milliers d'éléments, une stratégie spécifique devra être appliquée, par exemple en appliquant la méthode apply sur des portions du tableau:</p>
-
-<pre class="brush: js">function minimumDuTableau(tab) {
-  var min = Infinity;
-  var QUANTUM = 32768;
-
-  for (var i = 0, longueur = tab.length; i &lt; len; i += QUANTUM) {
-    var submin = Math.min.apply(null,
-                                tab.slice(i, Math.min(i + QUANTUM, longueur)));
-    min = Math.min(submin, min);
-  }
-
-  return min;
-}
-
-var min = minimumDuTableau([5, 6, 2, 3, 7]);
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('ES3')}}</td>
-   <td>{{Spec2('ES3')}}</td>
-   <td>Définition initiale. Implémentée avec JavaScript 1.3.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-15.3.4.3', 'Function.prototype.apply')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-function.prototype.apply', 'Function.prototype.apply')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-function.prototype.apply', 'Function.prototype.apply')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Function.apply")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>L'objet {{jsxref("Fonctions/arguments", "arguments")}}</li>
- <li>{{jsxref("Function.prototype.bind()")}}</li>
- <li>{{jsxref("Function.prototype.call()")}}</li>
- <li>{{jsxref("Fonctions", "Les fonctions et portées de fonctions", "", 1)}}</li>
- <li>{{jsxref("Reflect.apply()")}}</li>
- <li><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Syntaxe_décomposition">La syntaxe de décomposition permettant d'exploser un tableau</a></li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/function/apply/index.md b/files/fr/web/javascript/reference/global_objects/function/apply/index.md
new file mode 100644
index 0000000000..f4e6698445
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/function/apply/index.md
@@ -0,0 +1,182 @@
+---
+title: Function.prototype.apply()
+slug: Web/JavaScript/Reference/Global_Objects/Function/apply
+tags:
+  - Function
+  - JavaScript
+  - Méthode
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Function/apply
+original_slug: Web/JavaScript/Reference/Objets_globaux/Function/apply
+---
+{{JSRef}}
+
+La méthode **`apply()`** appelle une fonction en lui passant une valeur `this` et des `arguments` sous forme d'un tableau (ou d'un objet [semblable à un tableau](/fr/docs/Web/JavaScript/Guide/Objets_élémentaires_JavaScript#Manipuler_des_objets_semblables_aux_tableaux)).
+
+> **Note :** Bien que la syntaxe de cette fonction ressemble à celle de {{jsxref("Function.call", "call()")}}, elle est différente car `call()` accepte **une liste d'arguments**, tandis que `apply()` accepte un **tableau d'arguments**.
+
+> **Note :** Quand on utilise {{jsxref("undefined")}} ou {{jsxref("null")}} comme premier argument pour cette fonction, on peut obtenir un résultat similaire avec la [syntaxe de décomposition](/fr/docs/Web/JavaScript/Reference/Opérateurs/Syntaxe_décomposition).
+
+{{EmbedInteractiveExample("pages/js/function-apply.html")}}
+
+## Syntaxe
+
+    fun.apply(thisArg, [argsArray])
+
+### Paramètres
+
+- `thisArg`
+  - : La valeur de `this` fournie pour l'appel à la fonction _`fun`_. On notera que, sous certaines conditions, `this` peut ne pas être la valeur exacte vue par la méthode : si la méthode est une fonction utilisée en mode {{jsxref("Strict_mode", "mode non-strict", "", 1)}}, {{jsxref("null")}} et {{jsxref("undefined")}} seront remplacées par l'objet global, et les valeurs primitives seront encapsulées. Cet argument n'est pas optionnel.
+- `argsArray`
+  - : Un objet semblable à un tableau qui définit les arguments avec lesquel _`fun`_ devrait être appelée, ou {{jsxref("null")}} ou {{jsxref("undefined")}} si aucun argument n'est passé à la fonction. Avec ECMAScript 5, ces arguments peuvent être représentés par un objet semblable un tableau. Voir ci-après pour plus d'informations sur [la compatibilité des navigateurs](#compat).
+
+### Valeur de retour
+
+Le résultat obtenu en appelant la fonction avec la valeur `this` indiquée et les arguments fournis.
+
+## Description
+
+Il est possible d'utiliser un objet `this` différent lors de l'appel à une fonction existante. `this` fait référence à l'objet courant, l'objet appelant. Avec `apply`, on peut écrire une méthode une seule fois et en hériter dans un autre objet, sans avoir à la réécrire dans le nouvel objet.
+
+`apply` est similaire à {{jsxref("Function.call", "call()")}}, hormis pour le type d'arguments supporté. Il est possible d'utiliser un tableau à la place d'un ensemble de paramètres. Avec `apply`, il est également possible d'utiliser un littéral de tableau, par exemple, `fun.apply(this, ['manger', 'bananes'])`, ou un objet {{jsxref("Array")}}, par exemple, `fun.apply(this, new Array('manger', 'bananes'))`.
+
+On peut aussi passer {{jsxref("Fonctions/arguments", "arguments ")}} en tant que paramètre `argsArray`. `arguments` étant une variable locale à la fonction. Celle-ci peut également être utilisée pour tous les arguments non spécifiés de l'objet appelé. Ainsi, il n'est pas nécessaire de connaître les arguments de l'objet appelé lors d'un appel à la méthode `apply`. `arguments` peut être utilisé pour passer tous les arguments à l'objet appelé. L'objet appelé gèrera alors la manipulation des arguments.
+
+Depuis la cinquième édition d'ECMAScript, il est possible d'utiliser des objet semblables à des tableaux à la place. En pratique tout objet possédant une propriété `length` et une propriété entière comprise entre `[0..length[` est un objet semblable à un tableau. On peut ainsi, par exemple, utiliser un objet {{domxref("NodeList")}} ou un objet quelconque comme `{'length': 2, '0': 'manger', '1': 'bananes'}`.
+
+> **Note :** Beaucoup de navigateurs, y compris Chrome 14 et Internet Explorer 9 n'acceptent pas encore un objet semblable à un tableau, ils déclencheront un exception.
+
+## Exemples
+
+### Utiliser `apply` pour chaîner des constructeurs
+
+Il est possible d'utiliser `apply` afin de chaîner les {{jsxref("Opérateurs/L_opérateur_new", "constructeurs","",1)}} d'un objet, de façon sembable au chaînage utilisé en java. Dans l'exemple suivant, on crée une {{jsxref("Function")}} globale appelée `construct`, qui permet d'utiliser un objet de type `Array` associé à un constructeur au lieu d'une liste d'arguments.
+
+```js
+Function.prototype.construct = function (aArgs) {
+  var nouvelObjet = Object.create(this.prototype);
+  this.apply(nouvelObjet, aArgs);
+  return nouvelObjet;
+};
+```
+
+> **Note :** La méthode {{jsxref("Object.create()")}} utilisée ci-avant est relativement nouvelle. Pour une autre méthode qui utilise les `closure`, on pourra utiliser :
+>
+> ```js
+> Function.prototype.construct = function(aArgs) {
+>   var fConstructeur = this, fNouveauConstructeur = function() {
+>     fConstructeur.apply(this, aArgs);
+>   };
+>   fNouveauConstructeur.prototype = fConstructeur.prototype;
+>   return new fNouveauConstructeur();
+> };
+> ```
+
+Exemple d'utilisation :
+
+```js
+function MonConstructeur () {
+    for (var nProp = 0; nProp < arguments.length; nProp++) {
+        this["propriété" + nProp] = arguments[nProp];
+    }
+}
+
+var monTableau = [4, "Coucou monde !", false];
+var monInstance = MonConstructeur.construct(monTableau);
+
+console.log(monInstance.propriété1); // "Coucou monde !"
+console.log(monInstance instanceof MonConstructeur); // "true"
+console.log(monInstance.constructor); // "MonConstructeur"
+```
+
+> **Note :** On pourrait également utiliser {{jsxref("Object/__proto__", "Object.__proto__")}}
+>
+> ```js
+> Function.prototype.construct = function (aArgs) {
+>   var oNew = {};
+>   oNew.__proto__ = this.prototype;
+>   this.apply(oNew, aArgs);
+>   return oNew;
+> };
+> ```
+>
+> ou encore le constructeur {{jsxref("Function")}} :
+>
+> ```js
+> Function.prototype.construct = function (aArgs) {
+>   var fNewConstr = new Function("");
+>   fNewConstr.prototype = this.prototype;
+>   var oNew = new fNewConstr();
+>   this.apply(oNew, aArgs);
+>   return oNew;
+> };
+> ```
+
+> **Note :** Attention, cette méthode non-native `Function.construct` ne fonctionnera pas avec certains contructeurs natifs (tels que {{jsxref("Date", "Date")}}). Dans ce cas précis, on peut utiliser la méthode {{jsxref("Function.bind")}} (pour exemple, si on prend le tableau suivant `[2012, 11, 4]` utilisé sur le constructeur de l'objet `Date` : on peut écrire ceci : `new (Function.prototype.bind.apply(Date, [null].concat([2012, 11, 4])))()` – cependant cela reste une pratique à éviter si possible et à ne pas utiliser en dans un environnement de production).
+
+### Utiliser `apply` et des fonctions natives
+
+Un usage singulier de `apply` permet d'appeler des fonctions natives pour réaliser par exemple des tâches qui autrement auraient nécessité une boucle sur toutes les valeurs d'un tableau. Pour illustrer ce concept, on prend l'exemple de `Math.max`/`Math.min` qui permettent d'extraire la valeur maximum/minimale de notre tableau.
+
+```js
+/* min/max tableau de nombres */
+var nombres = [5, 6, 2, 3, 7];
+
+/* usage de Math.min/Math.max et de la méthode apply */
+var max = Math.max.apply(null, nombres);
+/* Equivalent à Math.max(nombres[0], ...)
+  ou Math.max(5, 6, ..) */
+
+var min = Math.min.apply(null, nombres);
+
+/* vs. algorithme trivial avec une boucle */
+max = -Infinity, min = +Infinity;
+
+for (var i = 0; i < nombres.length; i++) {
+  if (nombres[i] > max)
+    max = nombres[i];
+  if (nombres[i] < min)
+    min = nombres[i];
+}
+```
+
+Note : l'utilisation de `apply` peut provoquer l'atteinte du seuil limite du nombres d'arguments supporté par le moteur Javascript. Les conséquences de cette utilisation abusive (on évoque plus de 10000 arguments) peuvent varier selon les moteurs Javascript (JavaScript contient une limite en dur de [65536](https://bugs.webkit.org/show_bug.cgi?id=80797)), car une liberté subsiste quant à l'implémentation du moteur. Des moteurs lèveront une exception si le seuil est atteint. Il est donc préférable d'apporter une attention toute particulière au nombre d'arguments passés. (Illustrerons ce cas dans l'exemple suivant avec un moteur factice capable de ne gérer que 4 arguments au maximum (les limites natives sont, bien sûr, plus élevées), et reprenons les arguments de l'exemple précédent `5, 6, 2, 3` passés à la méthode `apply` plutôt que notre tableau entier.) Imaginons que notre tableau soit progressivement peuplé de milliers d'éléments, une stratégie spécifique devra être appliquée, par exemple en appliquant la méthode apply sur des portions du tableau:
+
+```js
+function minimumDuTableau(tab) {
+  var min = Infinity;
+  var QUANTUM = 32768;
+
+  for (var i = 0, longueur = tab.length; i < len; i += QUANTUM) {
+    var submin = Math.min.apply(null,
+                                tab.slice(i, Math.min(i + QUANTUM, longueur)));
+    min = Math.min(submin, min);
+  }
+
+  return min;
+}
+
+var min = minimumDuTableau([5, 6, 2, 3, 7]);
+```
+
+## Spécifications
+
+| Spécification                                                                                                    | État                         | Commentaires                                          |
+| ---------------------------------------------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- |
+| {{SpecName('ES3')}}                                                                                         | {{Spec2('ES3')}}         | Définition initiale. Implémentée avec JavaScript 1.3. |
+| {{SpecName('ES5.1', '#sec-15.3.4.3', 'Function.prototype.apply')}}                         | {{Spec2('ES5.1')}}     |                                                       |
+| {{SpecName('ES6', '#sec-function.prototype.apply', 'Function.prototype.apply')}}     | {{Spec2('ES6')}}         |                                                       |
+| {{SpecName('ESDraft', '#sec-function.prototype.apply', 'Function.prototype.apply')}} | {{Spec2('ESDraft')}} |                                                       |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Function.apply")}}
+
+## Voir aussi
+
+- L'objet {{jsxref("Fonctions/arguments", "arguments")}}
+- {{jsxref("Function.prototype.bind()")}}
+- {{jsxref("Function.prototype.call()")}}
+- {{jsxref("Fonctions", "Les fonctions et portées de fonctions", "", 1)}}
+- {{jsxref("Reflect.apply()")}}
+- [La syntaxe de décomposition permettant d'exploser un tableau](/fr/docs/Web/JavaScript/Reference/Opérateurs/Syntaxe_décomposition)
diff --git a/files/fr/web/javascript/reference/global_objects/function/arguments/index.html b/files/fr/web/javascript/reference/global_objects/function/arguments/index.html
deleted file mode 100644
index 6723204679..0000000000
--- a/files/fr/web/javascript/reference/global_objects/function/arguments/index.html
+++ /dev/null
@@ -1,90 +0,0 @@
----
-title: Function.arguments
-slug: Web/JavaScript/Reference/Global_Objects/Function/arguments
-tags:
-  - Déprécié
-  - Function
-  - JavaScript
-  - Propriété
-  - Reference
-  - arguments
-translation_of: Web/JavaScript/Reference/Global_Objects/Function/arguments
-original_slug: Web/JavaScript/Reference/Objets_globaux/Function/arguments
----
-<div>{{JSRef}} {{Deprecated_header}}</div>
-
-<p>La propriété <code><strong>function.arguments</strong></code> fait référence à un objet dont la structure est semblable à celle d'un tableau dont les éléments correspondent aux arguments passés à une fonction. En lieu et place, il faut désormais utiliser {{jsxref("Fonctions/arguments", "arguments")}}. Cette propriété est interdite en mode stricte à cause de <a href="https://www.ecma-international.org/ecma-262/6.0/#sec-addrestrictedfunctionproperties">l'optimisation de la queue des appels (<em>tail call optimization</em>)</a>.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>La syntaxe <code><em>function</em>.arguments</code> est obsolète.  La méthode recommandée pour accéder à l'objet {{jsxref("Fonctions/arguments", "arguments")}} disponible au sein des fonctions est simplement de faire référence à la variable {{jsxref("Fonctions/arguments", "arguments")}}.</p>
-
-<p>Si on utilise la récursivité (autrement dit si une fonction <code>f</code> apparaît plusieurs fois dans la pile d'appels ou encore qu'une fonction <code>f</code> s'appelle elle-même), la valeur de <code>f.arguments</code> représentera les arguments correspondant à l'appel le plus « récent » de la fonction.</p>
-
-<p>La valeur de la propriété <code>arguments</code> est normalement <code>null</code> si la fonction n'est pas « en cours » (au sens où elle aurait été appelée et qu'elle n'ait pas fini son exécution).</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<pre class="brush:js">function f(n) { g(n-1); }
-
-function g(n) {
-  console.log("avant : " + g.arguments[0]);
-  if(n&gt;0) f(n);
-  console.log("après : " + g.arguments[0]);
-}
-
-f(2);
-
-console.log("fonction terminée : " + g.arguments);
-
-// On aura l'affichage de :
-
-// avant : 1
-// avant : 0
-// après : 0
-// après : 1
-// fonction terminée : null
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES1')}}</td>
-   <td>{{Spec2('ES1')}}</td>
-   <td>Définition initiale. Implémentée avec JavaScript 1.0. Dépréciée pour être remplacée par {{jsxref("Fonctions/arguments", "arguments")}} décrit par ES3.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-10.6', 'arguments object')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td>Objet {{jsxref("Fonctions/arguments", "arguments")}}</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-arguments-object', 'arguments object')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td>Objet {{jsxref("Fonctions/arguments", "arguments")}}</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-arguments-object', 'arguments object')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td>Objet {{jsxref("Fonctions/arguments", "arguments")}}</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Function.arguments")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>L'objet {{jsxref("Fonctions/arguments", "arguments")}}</li>
- <li>{{jsxref("Fonctions", "Les fonctions et les portées de fonctions", "", 1)}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/function/arguments/index.md b/files/fr/web/javascript/reference/global_objects/function/arguments/index.md
new file mode 100644
index 0000000000..a8272388ce
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/function/arguments/index.md
@@ -0,0 +1,66 @@
+---
+title: Function.arguments
+slug: Web/JavaScript/Reference/Global_Objects/Function/arguments
+tags:
+  - Déprécié
+  - Function
+  - JavaScript
+  - Propriété
+  - Reference
+  - arguments
+translation_of: Web/JavaScript/Reference/Global_Objects/Function/arguments
+original_slug: Web/JavaScript/Reference/Objets_globaux/Function/arguments
+---
+{{JSRef}} {{Deprecated_header}}
+
+La propriété **`function.arguments`** fait référence à un objet dont la structure est semblable à celle d'un tableau dont les éléments correspondent aux arguments passés à une fonction. En lieu et place, il faut désormais utiliser {{jsxref("Fonctions/arguments", "arguments")}}. Cette propriété est interdite en mode stricte à cause de [l'optimisation de la queue des appels (_tail call optimization_)](https://www.ecma-international.org/ecma-262/6.0/#sec-addrestrictedfunctionproperties).
+
+## Description
+
+La syntaxe `function.arguments` est obsolète.  La méthode recommandée pour accéder à l'objet {{jsxref("Fonctions/arguments", "arguments")}} disponible au sein des fonctions est simplement de faire référence à la variable {{jsxref("Fonctions/arguments", "arguments")}}.
+
+Si on utilise la récursivité (autrement dit si une fonction `f` apparaît plusieurs fois dans la pile d'appels ou encore qu'une fonction `f` s'appelle elle-même), la valeur de `f.arguments` représentera les arguments correspondant à l'appel le plus « récent » de la fonction.
+
+La valeur de la propriété `arguments` est normalement `null` si la fonction n'est pas « en cours » (au sens où elle aurait été appelée et qu'elle n'ait pas fini son exécution).
+
+## Exemples
+
+```js
+function f(n) { g(n-1); }
+
+function g(n) {
+  console.log("avant : " + g.arguments[0]);
+  if(n>0) f(n);
+  console.log("après : " + g.arguments[0]);
+}
+
+f(2);
+
+console.log("fonction terminée : " + g.arguments);
+
+// On aura l'affichage de :
+
+// avant : 1
+// avant : 0
+// après : 0
+// après : 1
+// fonction terminée : null
+```
+
+## Spécifications
+
+| Spécification                                                                                | Statut                       | Commentaires                                                                                                                                                         |
+| -------------------------------------------------------------------------------------------- | ---------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| {{SpecName('ES1')}}                                                                     | {{Spec2('ES1')}}         | Définition initiale. Implémentée avec JavaScript 1.0. Dépréciée pour être remplacée par {{jsxref("Fonctions/arguments", "arguments")}} décrit par ES3. |
+| {{SpecName('ES5.1', '#sec-10.6', 'arguments object')}}                     | {{Spec2('ES5.1')}}     | Objet {{jsxref("Fonctions/arguments", "arguments")}}                                                                                                   |
+| {{SpecName('ES6', '#sec-arguments-object', 'arguments object')}}         | {{Spec2('ES6')}}         | Objet {{jsxref("Fonctions/arguments", "arguments")}}                                                                                                   |
+| {{SpecName('ESDraft', '#sec-arguments-object', 'arguments object')}} | {{Spec2('ESDraft')}} | Objet {{jsxref("Fonctions/arguments", "arguments")}}                                                                                                   |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Function.arguments")}}
+
+## Voir aussi
+
+- L'objet {{jsxref("Fonctions/arguments", "arguments")}}
+- {{jsxref("Fonctions", "Les fonctions et les portées de fonctions", "", 1)}}
diff --git a/files/fr/web/javascript/reference/global_objects/function/bind/index.html b/files/fr/web/javascript/reference/global_objects/function/bind/index.html
deleted file mode 100644
index 747fa29f94..0000000000
--- a/files/fr/web/javascript/reference/global_objects/function/bind/index.html
+++ /dev/null
@@ -1,247 +0,0 @@
----
-title: Function.prototype.bind()
-slug: Web/JavaScript/Reference/Global_Objects/Function/bind
-tags:
-  - ECMAScript 2015
-  - ECMAScript 5
-  - Function
-  - JavaScript
-  - Méthode
-  - Reference
-  - polyfill
-translation_of: Web/JavaScript/Reference/Global_Objects/Function/bind
-original_slug: Web/JavaScript/Reference/Objets_globaux/Function/bind
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <code><strong>bind()</strong></code> crée une nouvelle fonction qui, lorsqu'elle est appelée, a pour contexte <code><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_this">this</a></code> la valeur passée en paramètre et éventuellement une suite d'arguments qui précéderont ceux fournis à l'appel de la fonction créée.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/function-bind.html", "taller")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">let boundFunc = <var>fun</var>c.bind(<var>thisArg</var>[, <var>arg1</var>[, <var>arg2</var>[, ...]]])</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>thisArg</code></dt>
- <dd>La valeur que l'on doit passer est le paramètre <code>this</code> de la fonction cible <em><code>func</code></em> quand la fonction est appelée. La valeur est ignorée si la fonction liée est construite en utilisant l'opérateur {{jsxref("Opérateurs/L_opérateur_new", "new")}}. Lorsque vous utilisez <code>bind</code> pour créer une fonction (fournie comme un rappel) dans un <code>setTimeout</code>, toute valeur primitive passée comme <code>thisArg</code> est convertie en objet. Si aucun argument n'est fourni dans <code>bind</code>, le <code>this</code> de cette fonction est traité comme le <code>thisArg</code> de la nouvelle fonction.</dd>
- <dt><code>arg1, arg2, ...</code> {{optional_inline}}</dt>
- <dd>Arguments à faire précéder aux arguments fournis à la fonction liée lors de l'invocation de <em><code>func</code></em>.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Une copie de la fonction fournie avec la valeur <code>this</code> indiquée et les arguments initiaux fournis.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>La fonction <code>bind()</code> crée une nouvelle <strong>fonction liée</strong>, qui est un <em>objet de fonction exotique</em> (un terme de l'ECMAScript 2015) qui enveloppe l'objet de fonction original. L'appel de la fonction liée entraîne généralement l'exécution de sa fonction enveloppée.</p>
-
-<p>Une fonction liée possède les propriétés internes suivantes :</p>
-
-<dl>
- <dt><strong><code>[[BoundTargetFunction]]</code> </strong></dt>
- <dd>L'objet de fonction enveloppé</dd>
- <dt><code><strong>[[BoundThis]]</strong></code></dt>
- <dd>La valeur qui est toujours transmise est la valeur <code>this</code> lors de l'appel de la fonction enveloppée.</dd>
- <dt><code><strong>[[BoundArguments]]</strong></code></dt>
- <dd>Une liste de valeurs dont les éléments sont utilisés comme premiers arguments pour tout appel à la fonction enveloppée.</dd>
- <dt><code><strong>[[Call]]</strong></code></dt>
- <dd>Exécute le code associé à cet objet. Invoqué par une expression d'appel de fonction. Les arguments de la méthode interne sont constitués d'une valeur <code>this</code> et d'une liste contenant les arguments passés à la fonction par une expression d'appel.</dd>
-</dl>
-
-<p>Lorsqu'une fonction liée est appelée, elle appelle la méthode interne <code>[[Call]]</code> dans <code>[[BoundTargetFunction]]</code>, avec les arguments suivants <code>Call(<var>boundThis</var>, ...<var>args</var>)</code>. <var>Là où </var><code><var>boundThis</var></code> est <code>[[BoundThis]]</code>, <code><var>args</var></code> est <code>[[BoundArguments]]</code>, suivi des arguments passés par l'appel de fonction.</p>
-
-<p>Une fonction liée peut également être construite à l'aide de l'opérateur {{jsxref("Opérateurs/L_opérateur_new", "new")}}. Ce faisant, on agit comme si la fonction cible avait été construite. La valeur fournie <code>this</code> est ignorée, tandis que des arguments préparés sont fournis à la fonction émulée.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Créer_une_fonction_liée">Créer une fonction liée</h3>
-
-<p>La façon la plus simple d'utiliser <code>bind()</code>est de faire une fonction qui, peu importe la façon dont elle est appellée, le sera avec une certaine valeur <code>this</code> donnée.</p>
-
-<p>Une erreur courante lorsqu'on débute en JavaScript est d'extraire une méthode d'un objet, puis plus tard d'appeler cette méthode depuis un objet et de s'attendre à utiliser l'objet original en tant que valeur de <code>this</code> (par exemple en utilisant cette méthode dans un <em>callback</em>). Sans précaution, cependant, l'objet original est perdu. Créer une fonction liée depuis la méthode, en utilisant l'objet original, résout simplement le problème :</p>
-
-<pre class="brush: js">this.x = 9; // en dehors de tout contexte,
-            // pour un navigateur, this est
-            // l'objet window
-var module = {
-  x: 81,
-  getX: function() { return this.x; }
-};
-
-module.getX(); // 81
-
-var getX = module.getX;
-getX(); // 9, car ici, this fait référence à l'objet global
-
-// On crée une nouvelle fonction à laquelle on lie module en
-// tant que 'this'
-var boundGetX = getX.bind(module);
-boundGetX(); // 81
-</pre>
-
-<h3 id="Fonctions_partiellement_appliquées">Fonctions partiellement appliquées</h3>
-
-<p>Dans l'exemple suivant, on utilise <code>bind()</code> afin de créer une fonction avec des arguments initiaux prédéfinis. Ces arguments, s'il y en a, suivent le <code>this</code> fourni et sont ensuite insérés au début des arguments passés à la fonction cible, suivis par les arguments passés à la fonction liée au moment où celle-ci est appelée.</p>
-
-<pre class="brush: js">function list() {
-  return Array.prototype.slice.call(arguments);
-}
-
-var list1 = list(1, 2, 3); // [1, 2, 3]
-
-// Créer une fonction avec un argument prédéfini
-var leadingThirtysevenList = list.bind(null, 37);
-
-var list2 = leadingThirtysevenList(); // [37]
-var list3 = leadingThirtysevenList(1, 2, 3); // [37, 1, 2, 3]
-
-
-function sommeArguments(arg1, arg2){
-  return arg1 + arg2;
-}
-
-var ajouter37 = sommeArguments.bind(null, 37);
-
-var resultat = ajouter37(5); // 37 + 5 = 42
-</pre>
-
-<h3 id="Utiliser_bind_avec_setTimeout">Utiliser <code>bind</code> avec <code>setTimeout</code></h3>
-
-<p>Par défaut à l'intérieur de {{domxref("window.setTimeout()")}}, le mot-clé <code>this</code> sera attribué à l'objet {{domxref("window")}} (ou l'objet <code>global</code>). Lorsqu'on travaille avec des méthodes de classe utilisant <code>this</code> qui se réfère à l'instance, on peut lier <code>this</code> de façon explicite afin d'être certain de manipuler l'instance.</p>
-
-<pre class="brush: js">function Fleur() {
-  this.nbPétales = Math.floor( Math.random() * 12 ) + 1;
-}
-
-// On déclare floraison après un délai d'une seconde
-Fleur.prototype.floraison = function() {
-  window.setTimeout( this.declare.bind( this ), 1000 );
-};
-
-Fleur.prototype.declare = function() {
-  console.log('Je suis une fleur avec ' +
-     this.nbPétales + ' pétales !');
-};
-
-var fleur = new Fleur();
-fleur.floraison();
-// Après environ 1 seconde, on déclenche la méthode declare
-</pre>
-
-<h3 id="Les_fonctions_liées_utilisées_en_tant_que_constructeurs">Les fonctions liées utilisées en tant que constructeurs</h3>
-
-<div class="warning">
-<p><strong>Attention :</strong> Cette section illustre des capacités marginales et des cas aux limites concernant l'usage de la méthode bind(). Les méthodes montrées ci-après ne sont pas les façons les plus propres de faire les choses et ne devraient pas être utilisées en production.</p>
-</div>
-
-<p>Les fonctions liées sont automatiquement disponibles à l'usage pour toutes les instances initialisées avec l'opérateur {{jsxref("Opérateurs/L_opérateur_new", "new")}} sur la fonction cible. Quand une fonction liée est utilisée pour construire une valeur, le <code>this</code> fourni est ignoré. Cependant, les arguments fournis sont toujours préremplis lors de l'appel au constructeur :</p>
-
-<pre class="brush: js">function Point(x, y) {
-  this.x = x;
-  this.y = y;
-}
-
-Point.prototype.toString = function() {
-  return this.x + "," + this.y;
-};
-
-var p = new Point(1, 2);
-p.toString(); // "1,2"
-
-
-var emptyObj = {};
-var YAxisPoint = Point.bind(emptyObj, 0 /* x */);
-// non supporté dans le polyfill ci dessous,
-// fonctionne avec le bind natif :
-var YAxisPoint = Point.bind(null,0 /* x */);
-
-var axisPoint = new YAxisPoint(5);
-axisPoint.toString(); //  "0,5"
-
-axisPoint instanceof Point; // true
-axisPoint instanceof YAxisPoint; // true
-new Point(17, 42) instanceof YAxisPoint; // false
-</pre>
-
-<p>On notera qu'il n'y a rien à faire de particulier pour pouvoir utiliser {{jsxref("Opérateurs/L_opérateur_new", "new")}} sur votre fonction liée. Le corollaire est qu'il n'y a rien à faire de plus pour créer une fonction liée qui soit appelée sans préfixe, même s'il est préférable d'appeler une fonction liée uniquement avec le mot-clé {{jsxref("Opérateurs/L_opérateur_new", "new")}}.</p>
-
-<pre class="brush: js">// Cet exemple fonctionne dans votre console JavaScript
-// ...(sous réserve d'avoir utilisé le code précédent)
-
-// Peut toujours être appelé comme une fonction normale
-// (même si ce n'est généralement pas l'effet )
-YAxisPoint(13);
-
-emptyObj.x + "," + emptyObj.y; // "0,13"
-</pre>
-
-<p>Si on souhaite supporter le cas où la fonction liée  d'une fonction liée en utilisant seulement <code>new</code>, ou juste en l'appellant, la fonction cible doit outrepasser cette restriction.</p>
-
-<h3 id="Créer_des_raccourcis">Créer des raccourcis</h3>
-
-<div>
-<p><code>bind()</code> est également utile dans les cas où on souhaite créer un raccourci vers une fonction qui requiert un <code>this</code> ayant une certaine valeur.</p>
-
-<p>Si, par exemple, on considère la fonction {{jsxref("Array.prototype.slice")}} et qu'on souhaite l'utiliser pour convertir un objet semblable à un tableau en un objet <code>array</code>, on peut créer un raccourci de cette façon :</p>
-
-<pre class="brush: js">var slice = Array.prototype.slice;
-
-// ... un peu plus loin
-
-slice.apply(arguments);</pre>
-
-<p>Avec <code>bind()</code>, il est possible de simplifier cela. Dans l'exemple qui suit <code>slice</code> est une fonction liée à la fonction {{jsxref("Function.prototype.apply()", "apply()")}} de <code>Function.prototype</code>, et <code>this</code> défini en tant que fonction {{jsxref("Array.prototype.slice()", "slice()")}} de {{jsxref("Array.prototype")}}. Cela signifie que les appels à la méthode <code>apply()</code> peuvent être éliminés :</p>
-
-<pre class="brush: js">// pareil que "slice" dans l'exemple précédent
-var unboundSlice = Array.prototype.slice;
-var slice = Function.prototype.apply.bind(unboundSlice);
-
-// ...
-
-slice(arguments);
-</pre>
-</div>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-15.3.4.5', 'Function.prototype.bind')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td>Définition initiale.<br>
-    Implémentée avec JavaScript 1.8.5</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-function.prototype.apply', 'Function.prototype.bind')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-function.prototype.bind', 'Function.prototype.bind')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Function.bind")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Function.prototype.apply()")}}</li>
- <li>{{jsxref("Function.prototype.call()")}}</li>
- <li>{{jsxref("Fonctions", "Fonctions et portées de fonctions", "", 1)}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/function/bind/index.md b/files/fr/web/javascript/reference/global_objects/function/bind/index.md
new file mode 100644
index 0000000000..a2484ba8da
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/function/bind/index.md
@@ -0,0 +1,225 @@
+---
+title: Function.prototype.bind()
+slug: Web/JavaScript/Reference/Global_Objects/Function/bind
+tags:
+  - ECMAScript 2015
+  - ECMAScript 5
+  - Function
+  - JavaScript
+  - Méthode
+  - Reference
+  - polyfill
+translation_of: Web/JavaScript/Reference/Global_Objects/Function/bind
+original_slug: Web/JavaScript/Reference/Objets_globaux/Function/bind
+---
+{{JSRef}}
+
+La méthode **`bind()`** crée une nouvelle fonction qui, lorsqu'elle est appelée, a pour contexte [`this`](/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_this) la valeur passée en paramètre et éventuellement une suite d'arguments qui précéderont ceux fournis à l'appel de la fonction créée.
+
+{{EmbedInteractiveExample("pages/js/function-bind.html", "taller")}}
+
+## Syntaxe
+
+    let boundFunc = func.bind(thisArg[, arg1[, arg2[, ...]]])
+
+### Paramètres
+
+- `thisArg`
+  - : La valeur que l'on doit passer est le paramètre `this` de la fonction cible _`func`_ quand la fonction est appelée. La valeur est ignorée si la fonction liée est construite en utilisant l'opérateur {{jsxref("Opérateurs/L_opérateur_new", "new")}}. Lorsque vous utilisez `bind` pour créer une fonction (fournie comme un rappel) dans un `setTimeout`, toute valeur primitive passée comme `thisArg` est convertie en objet. Si aucun argument n'est fourni dans `bind`, le `this` de cette fonction est traité comme le `thisArg` de la nouvelle fonction.
+- `arg1, arg2, ...` {{optional_inline}}
+  - : Arguments à faire précéder aux arguments fournis à la fonction liée lors de l'invocation de _`func`_.
+
+### Valeur de retour
+
+Une copie de la fonction fournie avec la valeur `this` indiquée et les arguments initiaux fournis.
+
+## Description
+
+La fonction `bind()` crée une nouvelle **fonction liée**, qui est un _objet de fonction exotique_ (un terme de l'ECMAScript 2015) qui enveloppe l'objet de fonction original. L'appel de la fonction liée entraîne généralement l'exécution de sa fonction enveloppée.
+
+Une fonction liée possède les propriétés internes suivantes :
+
+- **`[[BoundTargetFunction]]`**
+  - : L'objet de fonction enveloppé
+- **`[[BoundThis]]`**
+  - : La valeur qui est toujours transmise est la valeur `this` lors de l'appel de la fonction enveloppée.
+- **`[[BoundArguments]]`**
+  - : Une liste de valeurs dont les éléments sont utilisés comme premiers arguments pour tout appel à la fonction enveloppée.
+- **`[[Call]]`**
+  - : Exécute le code associé à cet objet. Invoqué par une expression d'appel de fonction. Les arguments de la méthode interne sont constitués d'une valeur `this` et d'une liste contenant les arguments passés à la fonction par une expression d'appel.
+
+Lorsqu'une fonction liée est appelée, elle appelle la méthode interne `[[Call]]` dans `[[BoundTargetFunction]]`, avec les arguments suivants `Call(boundThis, ...args)`. _Là où _`boundThis` est `[[BoundThis]]`, `args` est `[[BoundArguments]]`, suivi des arguments passés par l'appel de fonction.
+
+Une fonction liée peut également être construite à l'aide de l'opérateur {{jsxref("Opérateurs/L_opérateur_new", "new")}}. Ce faisant, on agit comme si la fonction cible avait été construite. La valeur fournie `this` est ignorée, tandis que des arguments préparés sont fournis à la fonction émulée.
+
+## Exemples
+
+### Créer une fonction liée
+
+La façon la plus simple d'utiliser `bind()`est de faire une fonction qui, peu importe la façon dont elle est appellée, le sera avec une certaine valeur `this` donnée.
+
+Une erreur courante lorsqu'on débute en JavaScript est d'extraire une méthode d'un objet, puis plus tard d'appeler cette méthode depuis un objet et de s'attendre à utiliser l'objet original en tant que valeur de `this` (par exemple en utilisant cette méthode dans un _callback_). Sans précaution, cependant, l'objet original est perdu. Créer une fonction liée depuis la méthode, en utilisant l'objet original, résout simplement le problème :
+
+```js
+this.x = 9; // en dehors de tout contexte,
+            // pour un navigateur, this est
+            // l'objet window
+var module = {
+  x: 81,
+  getX: function() { return this.x; }
+};
+
+module.getX(); // 81
+
+var getX = module.getX;
+getX(); // 9, car ici, this fait référence à l'objet global
+
+// On crée une nouvelle fonction à laquelle on lie module en
+// tant que 'this'
+var boundGetX = getX.bind(module);
+boundGetX(); // 81
+```
+
+### Fonctions partiellement appliquées
+
+Dans l'exemple suivant, on utilise `bind()` afin de créer une fonction avec des arguments initiaux prédéfinis. Ces arguments, s'il y en a, suivent le `this` fourni et sont ensuite insérés au début des arguments passés à la fonction cible, suivis par les arguments passés à la fonction liée au moment où celle-ci est appelée.
+
+```js
+function list() {
+  return Array.prototype.slice.call(arguments);
+}
+
+var list1 = list(1, 2, 3); // [1, 2, 3]
+
+// Créer une fonction avec un argument prédéfini
+var leadingThirtysevenList = list.bind(null, 37);
+
+var list2 = leadingThirtysevenList(); // [37]
+var list3 = leadingThirtysevenList(1, 2, 3); // [37, 1, 2, 3]
+
+
+function sommeArguments(arg1, arg2){
+  return arg1 + arg2;
+}
+
+var ajouter37 = sommeArguments.bind(null, 37);
+
+var resultat = ajouter37(5); // 37 + 5 = 42
+```
+
+### Utiliser `bind` avec `setTimeout`
+
+Par défaut à l'intérieur de {{domxref("window.setTimeout()")}}, le mot-clé `this` sera attribué à l'objet {{domxref("window")}} (ou l'objet `global`). Lorsqu'on travaille avec des méthodes de classe utilisant `this` qui se réfère à l'instance, on peut lier `this` de façon explicite afin d'être certain de manipuler l'instance.
+
+```js
+function Fleur() {
+  this.nbPétales = Math.floor( Math.random() * 12 ) + 1;
+}
+
+// On déclare floraison après un délai d'une seconde
+Fleur.prototype.floraison = function() {
+  window.setTimeout( this.declare.bind( this ), 1000 );
+};
+
+Fleur.prototype.declare = function() {
+  console.log('Je suis une fleur avec ' +
+     this.nbPétales + ' pétales !');
+};
+
+var fleur = new Fleur();
+fleur.floraison();
+// Après environ 1 seconde, on déclenche la méthode declare
+```
+
+### Les fonctions liées utilisées en tant que constructeurs
+
+> **Attention :** Cette section illustre des capacités marginales et des cas aux limites concernant l'usage de la méthode bind(). Les méthodes montrées ci-après ne sont pas les façons les plus propres de faire les choses et ne devraient pas être utilisées en production.
+
+Les fonctions liées sont automatiquement disponibles à l'usage pour toutes les instances initialisées avec l'opérateur {{jsxref("Opérateurs/L_opérateur_new", "new")}} sur la fonction cible. Quand une fonction liée est utilisée pour construire une valeur, le `this` fourni est ignoré. Cependant, les arguments fournis sont toujours préremplis lors de l'appel au constructeur :
+
+```js
+function Point(x, y) {
+  this.x = x;
+  this.y = y;
+}
+
+Point.prototype.toString = function() {
+  return this.x + "," + this.y;
+};
+
+var p = new Point(1, 2);
+p.toString(); // "1,2"
+
+
+var emptyObj = {};
+var YAxisPoint = Point.bind(emptyObj, 0 /* x */);
+// non supporté dans le polyfill ci dessous,
+// fonctionne avec le bind natif :
+var YAxisPoint = Point.bind(null,0 /* x */);
+
+var axisPoint = new YAxisPoint(5);
+axisPoint.toString(); //  "0,5"
+
+axisPoint instanceof Point; // true
+axisPoint instanceof YAxisPoint; // true
+new Point(17, 42) instanceof YAxisPoint; // false
+```
+
+On notera qu'il n'y a rien à faire de particulier pour pouvoir utiliser {{jsxref("Opérateurs/L_opérateur_new", "new")}} sur votre fonction liée. Le corollaire est qu'il n'y a rien à faire de plus pour créer une fonction liée qui soit appelée sans préfixe, même s'il est préférable d'appeler une fonction liée uniquement avec le mot-clé {{jsxref("Opérateurs/L_opérateur_new", "new")}}.
+
+```js
+// Cet exemple fonctionne dans votre console JavaScript
+// ...(sous réserve d'avoir utilisé le code précédent)
+
+// Peut toujours être appelé comme une fonction normale
+// (même si ce n'est généralement pas l'effet )
+YAxisPoint(13);
+
+emptyObj.x + "," + emptyObj.y; // "0,13"
+```
+
+Si on souhaite supporter le cas où la fonction liée  d'une fonction liée en utilisant seulement `new`, ou juste en l'appellant, la fonction cible doit outrepasser cette restriction.
+
+### Créer des raccourcis
+
+`bind()` est également utile dans les cas où on souhaite créer un raccourci vers une fonction qui requiert un `this` ayant une certaine valeur.
+
+Si, par exemple, on considère la fonction {{jsxref("Array.prototype.slice")}} et qu'on souhaite l'utiliser pour convertir un objet semblable à un tableau en un objet `array`, on peut créer un raccourci de cette façon :
+
+```js
+var slice = Array.prototype.slice;
+
+// ... un peu plus loin
+
+slice.apply(arguments);
+```
+
+Avec `bind()`, il est possible de simplifier cela. Dans l'exemple qui suit `slice` est une fonction liée à la fonction {{jsxref("Function.prototype.apply()", "apply()")}} de `Function.prototype`, et `this` défini en tant que fonction {{jsxref("Array.prototype.slice()", "slice()")}} de {{jsxref("Array.prototype")}}. Cela signifie que les appels à la méthode `apply()` peuvent être éliminés :
+
+```js
+// pareil que "slice" dans l'exemple précédent
+var unboundSlice = Array.prototype.slice;
+var slice = Function.prototype.apply.bind(unboundSlice);
+
+// ...
+
+slice(arguments);
+```
+
+## Spécifications
+
+| Spécification                                                                                                | État                         | Commentaires                                           |
+| ------------------------------------------------------------------------------------------------------------ | ---------------------------- | ------------------------------------------------------ |
+| {{SpecName('ES5.1', '#sec-15.3.4.5', 'Function.prototype.bind')}}                     | {{Spec2('ES5.1')}}     | Définition initiale. Implémentée avec JavaScript 1.8.5 |
+| {{SpecName('ES2015', '#sec-function.prototype.apply', 'Function.prototype.bind')}} | {{Spec2('ES2015')}}     |                                                        |
+| {{SpecName('ESDraft', '#sec-function.prototype.bind', 'Function.prototype.bind')}} | {{Spec2('ESDraft')}} |                                                        |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Function.bind")}}
+
+## Voir aussi
+
+- {{jsxref("Function.prototype.apply()")}}
+- {{jsxref("Function.prototype.call()")}}
+- {{jsxref("Fonctions", "Fonctions et portées de fonctions", "", 1)}}
diff --git a/files/fr/web/javascript/reference/global_objects/function/call/index.html b/files/fr/web/javascript/reference/global_objects/function/call/index.html
deleted file mode 100644
index 5cc70709d0..0000000000
--- a/files/fr/web/javascript/reference/global_objects/function/call/index.html
+++ /dev/null
@@ -1,174 +0,0 @@
----
-title: Function.prototype.call()
-slug: Web/JavaScript/Reference/Global_Objects/Function/call
-tags:
-  - Function
-  - JavaScript
-  - Méthode
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Function/call
-original_slug: Web/JavaScript/Reference/Objets_globaux/Function/call
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <code><strong>call()</strong></code> réalise un appel à une fonction avec une valeur <code>this</code> donnée et des arguments fournis individuellement.</p>
-
-<div class="note"><p><strong>Note :</strong> Bien que la syntaxe de cette fonction ressemble à celle de {{jsxref("Function.apply", "apply()")}}, la différence fondamentale réside dans le fait que <code>call()</code> accepte <strong>une liste d'arguments</strong>, tandis que la méthode <code>apply()</code> accepte <strong>un unique tableau d'arguments</strong>.</p></div>
-
-<div>{{EmbedInteractiveExample("pages/js/function-call.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>fun</var>.call(<var>thisArg</var>[, <var>arg1</var>[, <var>arg2</var>[, ...]]])</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>thisArg</code></dt>
- <dd>La valeur <code>this</code> fournie pour l'appel de la fonction <em><code>fun</code></em>. La valeur peut être différente de celle normalement perçue par la méthode : si la méthode est une fonction utilisée dans un code en {{jsxref("Fonctions/Strict_mode", "mode non-strict", "", 1)}}, {{jsxref("null")}} and {{jsxref("undefined")}} seront remplacés par l'objet global et les valeurs primitives seront encapsulées en objets.</dd>
- <dt><code>arg1, arg2, ...</code></dt>
- <dd>Les arguments pour la fonction.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Le résultat de l'appel de la fonction invoquée avec la valeur <code>this</code> indiquée et les arguments fournis.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>La méthode <code>call()</code> permet d'appeler une fonction rattachée à un objet donné sur un autre objet.</p>
-
-<p>Il est possible d'affecter un objet <code>this</code> différent lors de l'appel à une fonction existante. En général, <code>this</code> fait référence à l'objet courant, celui sur lequel est appelée la méthode. Avec <code>call</code>, on peut écrire une méthode une seule fois et ensuite en hériter dans un autre objet, sans avoir à réécrire cette méthode pour ce nouvel objet.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Utiliser_call()_pour_chaîner_le_constructeur_d'un_objet.">Utiliser <code>call()</code> pour chaîner le constructeur d'un objet.</h3>
-
-<p>Il est possible d'utiliser <code>call</code> pour chaîner le constructeur d'un objet, de façon similaire à Java. Dans l'exemple suivant, le constructeur de l'objet <code>Product</code> est défini avec deux paramètres, <code>name</code> et <code>price</code>. Deux autres fonctions, <code>Food</code> et <code>Toy</code> invoquent <code>Product</code> en passant <code>this,</code> <code>name</code> et <code>price</code>. <code>Product</code> initialise les propriétés <code>name</code> et <code>price</code>, tandis que les fonctions spécialisées définissent la propriété <code>category</code>.</p>
-
-<pre class="brush: js">function Product(name, price) {
-  this.name = name;
-  this.price = price;
-}
-
-function Food(name, price) {
-  Product.call(this, name, price);
-  this.category = 'food';
-}
-
-function Toy(name, price) {
-  Product.call(this, name, price);
-  this.category = 'toy';
-}
-
-var cheese = new Food('feta', 5);
-var fun = new Toy('robot', 40);
-</pre>
-
-<h3 id="Utiliser_call()_pour_invoquer_une_fonction_anonyme">Utiliser <code>call()</code> pour invoquer une fonction anonyme</h3>
-
-<p>Dans cet exemple (purement inventé), on crée une fonction anonyme et on utilise <code>call</code> pour l'invoquer sur chaque objet d'un tableau. Le principal but de cette fonction anonyme est d'ajouter une fonction <code>print</code> sur chaque élément qui permet d'afficher l'index de l'objet. Le passage de l'objet en tant que valeur <code>this</code> n'était pas nécessaire, mais il permet d'expliquer le sujet.</p>
-
-<pre class="brush: js">var animaux = [
-  {espece: 'Lion', nom: 'Roi'},
-  {espece: 'Éléphant', nom: 'Dumbo'}
-];
-
-for (var i = 0; i &lt; animaux.length; i++) {
-  (function (i) {
-    this.print = function () {
-      console.log('#' + i  + ' ' + this.espece + ' : ' + this.nom);
-    }
-    this.print();
-  }).call(animaux[i], i);
-}
-</pre>
-
-<h3 id="Utiliser_call()_pour_appeler_une_fonction_avec_un_objet_pour_this">Utiliser <code>call()</code> pour appeler une fonction avec un objet pour <code>this</code></h3>
-
-<p>Dans l'exemple qui suit, on utilise la méthode <code>call()</code> sur la fonction <code>saluer()</code> afin de l'appliquer à l'objet <code>personne1</code> :</p>
-
-<pre class="brush: js">function saluer() {
-  var reponse = [this.nom, "est un", this.role, "."].join(" ");
-  console.log(reponse);
-}
-
-var personne1 = {
-  nom: "Sénèque",
-  role: "philosophe"
-};
-
-saluer.call(personne1); // Sénèque est un philosophe.
-</pre>
-
-<h3 id="Utiliser_call()_pour_appeler_une_fonction_sans_indiquer_de_premier_argument">Utiliser <code>call()</code> pour appeler une fonction sans indiquer de premier argument</h3>
-
-<p>Dans l'exemple qui suit, on appelle la fonction <code>afficher()</code> sans lui passer d'argument. C'est donc l'objet global qui est utilisé comme contexte :</p>
-
-<pre class="brush: js">var prenom = 'Archibald';
-
-function afficher() {
-  console.log('prenom vaut ' + this.prenom);
-}
-
-afficher.call(); // prenom est Archibald</pre>
-
-<div class="note">
-<p><strong>Note :</strong> La valeur de <code>this</code> sera {{jsxref("undefined")}} en mode strict.</p>
-
-<pre class="brush: js">'use strict';
-
-var prenom = 'Archibald';
-
-function afficher() {
-  console.log('prenom vaut ' + this.prenom);
-}
-
-afficher.call(); // Cannot read the property prenom' of undefined</pre>
-</div>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('ES3')}}</td>
-   <td>{{Spec2('ES3')}}</td>
-   <td>Définition initiale. Implémentée avec JavaScript 1.3.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-15.3.4.4', 'Function.prototype.call')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-function.prototype.call', 'Function.prototype.call')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-function.prototype.call', 'Function.prototype.call')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Function.call")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Function.prototype.bind()")}}</li>
- <li>{{jsxref("Function.prototype.apply()")}}</li>
- <li><a href="/fr/docs/Web/JavaScript/Introduction_à_JavaScript_orienté_objet">Introduction à JavaScript orienté objet</a></li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/function/call/index.md b/files/fr/web/javascript/reference/global_objects/function/call/index.md
new file mode 100644
index 0000000000..5226e7b387
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/function/call/index.md
@@ -0,0 +1,150 @@
+---
+title: Function.prototype.call()
+slug: Web/JavaScript/Reference/Global_Objects/Function/call
+tags:
+  - Function
+  - JavaScript
+  - Méthode
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Function/call
+original_slug: Web/JavaScript/Reference/Objets_globaux/Function/call
+---
+{{JSRef}}
+
+La méthode **`call()`** réalise un appel à une fonction avec une valeur `this` donnée et des arguments fournis individuellement.
+
+> **Note :** Bien que la syntaxe de cette fonction ressemble à celle de {{jsxref("Function.apply", "apply()")}}, la différence fondamentale réside dans le fait que `call()` accepte **une liste d'arguments**, tandis que la méthode `apply()` accepte **un unique tableau d'arguments**.
+
+{{EmbedInteractiveExample("pages/js/function-call.html")}}
+
+## Syntaxe
+
+    fun.call(thisArg[, arg1[, arg2[, ...]]])
+
+### Paramètres
+
+- `thisArg`
+  - : La valeur `this` fournie pour l'appel de la fonction _`fun`_. La valeur peut être différente de celle normalement perçue par la méthode : si la méthode est une fonction utilisée dans un code en {{jsxref("Fonctions/Strict_mode", "mode non-strict", "", 1)}}, {{jsxref("null")}} and {{jsxref("undefined")}} seront remplacés par l'objet global et les valeurs primitives seront encapsulées en objets.
+- `arg1, arg2, ...`
+  - : Les arguments pour la fonction.
+
+### Valeur de retour
+
+Le résultat de l'appel de la fonction invoquée avec la valeur `this` indiquée et les arguments fournis.
+
+## Description
+
+La méthode `call()` permet d'appeler une fonction rattachée à un objet donné sur un autre objet.
+
+Il est possible d'affecter un objet `this` différent lors de l'appel à une fonction existante. En général, `this` fait référence à l'objet courant, celui sur lequel est appelée la méthode. Avec `call`, on peut écrire une méthode une seule fois et ensuite en hériter dans un autre objet, sans avoir à réécrire cette méthode pour ce nouvel objet.
+
+## Exemples
+
+### Utiliser `call()` pour chaîner le constructeur d'un objet.
+
+Il est possible d'utiliser `call` pour chaîner le constructeur d'un objet, de façon similaire à Java. Dans l'exemple suivant, le constructeur de l'objet `Product` est défini avec deux paramètres, `name` et `price`. Deux autres fonctions, `Food` et `Toy` invoquent `Product` en passant `this,` `name` et `price`. `Product` initialise les propriétés `name` et `price`, tandis que les fonctions spécialisées définissent la propriété `category`.
+
+```js
+function Product(name, price) {
+  this.name = name;
+  this.price = price;
+}
+
+function Food(name, price) {
+  Product.call(this, name, price);
+  this.category = 'food';
+}
+
+function Toy(name, price) {
+  Product.call(this, name, price);
+  this.category = 'toy';
+}
+
+var cheese = new Food('feta', 5);
+var fun = new Toy('robot', 40);
+```
+
+### Utiliser `call()` pour invoquer une fonction anonyme
+
+Dans cet exemple (purement inventé), on crée une fonction anonyme et on utilise `call` pour l'invoquer sur chaque objet d'un tableau. Le principal but de cette fonction anonyme est d'ajouter une fonction `print` sur chaque élément qui permet d'afficher l'index de l'objet. Le passage de l'objet en tant que valeur `this` n'était pas nécessaire, mais il permet d'expliquer le sujet.
+
+```js
+var animaux = [
+  {espece: 'Lion', nom: 'Roi'},
+  {espece: 'Éléphant', nom: 'Dumbo'}
+];
+
+for (var i = 0; i < animaux.length; i++) {
+  (function (i) {
+    this.print = function () {
+      console.log('#' + i  + ' ' + this.espece + ' : ' + this.nom);
+    }
+    this.print();
+  }).call(animaux[i], i);
+}
+```
+
+### Utiliser `call()` pour appeler une fonction avec un objet pour `this`
+
+Dans l'exemple qui suit, on utilise la méthode `call()` sur la fonction `saluer()` afin de l'appliquer à l'objet `personne1` :
+
+```js
+function saluer() {
+  var reponse = [this.nom, "est un", this.role, "."].join(" ");
+  console.log(reponse);
+}
+
+var personne1 = {
+  nom: "Sénèque",
+  role: "philosophe"
+};
+
+saluer.call(personne1); // Sénèque est un philosophe.
+```
+
+### Utiliser `call()` pour appeler une fonction sans indiquer de premier argument
+
+Dans l'exemple qui suit, on appelle la fonction `afficher()` sans lui passer d'argument. C'est donc l'objet global qui est utilisé comme contexte :
+
+```js
+var prenom = 'Archibald';
+
+function afficher() {
+  console.log('prenom vaut ' + this.prenom);
+}
+
+afficher.call(); // prenom est Archibald
+```
+
+> **Note :** La valeur de `this` sera {{jsxref("undefined")}} en mode strict.
+>
+> ```js
+> 'use strict';
+>
+> var prenom = 'Archibald';
+>
+> function afficher() {
+>   console.log('prenom vaut ' + this.prenom);
+> }
+>
+> afficher.call(); // Cannot read the property prenom' of undefined
+> ```
+
+## Spécifications
+
+| Spécification                                                                                                | État                         | Commentaires                                          |
+| ------------------------------------------------------------------------------------------------------------ | ---------------------------- | ----------------------------------------------------- |
+| {{SpecName('ES3')}}                                                                                     | {{Spec2('ES3')}}         | Définition initiale. Implémentée avec JavaScript 1.3. |
+| {{SpecName('ES5.1', '#sec-15.3.4.4', 'Function.prototype.call')}}                     | {{Spec2('ES5.1')}}     |                                                       |
+| {{SpecName('ES6', '#sec-function.prototype.call', 'Function.prototype.call')}}     | {{Spec2('ES6')}}         |                                                       |
+| {{SpecName('ESDraft', '#sec-function.prototype.call', 'Function.prototype.call')}} | {{Spec2('ESDraft')}} |                                                       |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Function.call")}}
+
+## Voir aussi
+
+- {{jsxref("Function.prototype.bind()")}}
+- {{jsxref("Function.prototype.apply()")}}
+- [Introduction à JavaScript orienté objet](/fr/docs/Web/JavaScript/Introduction_à_JavaScript_orienté_objet)
diff --git a/files/fr/web/javascript/reference/global_objects/function/caller/index.html b/files/fr/web/javascript/reference/global_objects/function/caller/index.html
deleted file mode 100644
index 92f4a60f1a..0000000000
--- a/files/fr/web/javascript/reference/global_objects/function/caller/index.html
+++ /dev/null
@@ -1,82 +0,0 @@
----
-title: Function.caller
-slug: Web/JavaScript/Reference/Global_Objects/Function/caller
-tags:
-  - Function
-  - JavaScript
-  - Propriété
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Function/caller
-original_slug: Web/JavaScript/Reference/Objets_globaux/Function/caller
----
-<div>{{JSRef}} {{non-standard_header}}</div>
-
-<p>La propriété <code><strong>function.caller</strong></code> renvoie la fonction qui a appelé la fonction donnée. Cette propriété est interdite en mode strict.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>Si la fonction <code>f</code> a été invoquée par du code situé au plus haut niveau, la valeur de <code>f.caller</code> sera {{jsxref("null")}}, sinon, ce sera la fonction qui a appelé <code>f</code>.</p>
-
-<p>Cette propriété remplace la propriété obsolète {{jsxref("Fonctions/arguments/caller", "arguments.caller")}} de l'objet {{jsxref("Fonctions/arguments", "arguments")}}.</p>
-
-<p>La propriété spéciale <code>__caller__</code> qui renvoyait l'objet qui dans lequel était fait l'appel a été supprimée pour des raisons de sécurités.</p>
-
-<h3 id="Notes">Notes</h3>
-
-<p>Dans une fonction récursive, cette propriété ne peut pas être utilisée pour reconstituer la pile d'appels (<em>call stack</em>). Par exemple, si on a :</p>
-
-<pre class="brush: js">function f(n) { g(n - 1); }
-function g(n) { if (n &gt; 0) { f(n); } else { stop(); } }
-f(2);
-</pre>
-
-<p>Au moment où <code>stop()</code> est appelé, la pile sera :</p>
-
-<pre class="eval">f(2) -&gt; g(1) -&gt; f(1) -&gt; g(0) -&gt; stop()
-</pre>
-
-<p>Et ceci est vrai :</p>
-
-<pre class="eval">stop.caller === g &amp;&amp; f.caller === g &amp;&amp; g.caller === f
-</pre>
-
-<p>Donc si on essaie d'obtenir la pile de cette façon :</p>
-
-<pre class="brush: js">var f = stop;
-var stack = 'Stack trace:';
-while (f) {
-  stack += '\n' + f.name;
-  f = f.caller;
-}
-</pre>
-
-<p>la boucle ne s'arrêterait jamais.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Vérifier_la_valeur_de_la_propriété_caller">Vérifier la valeur de la propriété <code>caller</code></h3>
-
-<p>Dans l'exemple suivant, on verifie la propriété <code>caller</code> de la fonction.</p>
-
-<pre class="brush: js">function maFonction() {
-  if (maFonction.caller == null) {
-    return 'Fonction appelée au plus haut niveau !';
-  } else {
-    return 'Fonction appelée par ' + maFonction.caller;
-  }
-}
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<p>Ne fait partie d'aucune spécification. Implémentée avec JavaScript 1.5.</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Function.caller")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>Le bug d'implémentation pour SpiderMonkey {{bug(65683)}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/function/caller/index.md b/files/fr/web/javascript/reference/global_objects/function/caller/index.md
new file mode 100644
index 0000000000..c7736a0831
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/function/caller/index.md
@@ -0,0 +1,81 @@
+---
+title: Function.caller
+slug: Web/JavaScript/Reference/Global_Objects/Function/caller
+tags:
+  - Function
+  - JavaScript
+  - Propriété
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Function/caller
+original_slug: Web/JavaScript/Reference/Objets_globaux/Function/caller
+---
+{{JSRef}} {{non-standard_header}}
+
+La propriété **`function.caller`** renvoie la fonction qui a appelé la fonction donnée. Cette propriété est interdite en mode strict.
+
+## Description
+
+Si la fonction `f` a été invoquée par du code situé au plus haut niveau, la valeur de `f.caller` sera {{jsxref("null")}}, sinon, ce sera la fonction qui a appelé `f`.
+
+Cette propriété remplace la propriété obsolète {{jsxref("Fonctions/arguments/caller", "arguments.caller")}} de l'objet {{jsxref("Fonctions/arguments", "arguments")}}.
+
+La propriété spéciale `__caller__` qui renvoyait l'objet qui dans lequel était fait l'appel a été supprimée pour des raisons de sécurités.
+
+### Notes
+
+Dans une fonction récursive, cette propriété ne peut pas être utilisée pour reconstituer la pile d'appels (_call stack_). Par exemple, si on a :
+
+```js
+function f(n) { g(n - 1); }
+function g(n) { if (n > 0) { f(n); } else { stop(); } }
+f(2);
+```
+
+Au moment où `stop()` est appelé, la pile sera :
+
+    f(2) -> g(1) -> f(1) -> g(0) -> stop()
+
+Et ceci est vrai :
+
+    stop.caller === g && f.caller === g && g.caller === f
+
+Donc si on essaie d'obtenir la pile de cette façon :
+
+```js
+var f = stop;
+var stack = 'Stack trace:';
+while (f) {
+  stack += '\n' + f.name;
+  f = f.caller;
+}
+```
+
+la boucle ne s'arrêterait jamais.
+
+## Exemples
+
+### Vérifier la valeur de la propriété `caller`
+
+Dans l'exemple suivant, on verifie la propriété `caller` de la fonction.
+
+```js
+function maFonction() {
+  if (maFonction.caller == null) {
+    return 'Fonction appelée au plus haut niveau !';
+  } else {
+    return 'Fonction appelée par ' + maFonction.caller;
+  }
+}
+```
+
+## Spécifications
+
+Ne fait partie d'aucune spécification. Implémentée avec JavaScript 1.5.
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Function.caller")}}
+
+## Voir aussi
+
+- Le bug d'implémentation pour SpiderMonkey {{bug(65683)}}
diff --git a/files/fr/web/javascript/reference/global_objects/function/displayname/index.html b/files/fr/web/javascript/reference/global_objects/function/displayname/index.html
deleted file mode 100644
index 41224d8f33..0000000000
--- a/files/fr/web/javascript/reference/global_objects/function/displayname/index.html
+++ /dev/null
@@ -1,80 +0,0 @@
----
-title: Function.displayName
-slug: Web/JavaScript/Reference/Global_Objects/Function/displayName
-tags:
-  - Function
-  - JavaScript
-  - Non-standard
-  - Propriété
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Function/displayName
-original_slug: Web/JavaScript/Reference/Objets_globaux/Function/displayName
----
-<div>{{JSRef}} {{Non-standard_header}}</div>
-
-<p>La propriété <code><strong>function.displayName</strong></code> renvoie le nom affiché de la fonction.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>Lorsque la propriété <code>displayName</code> est définie, elle renvoie le nom affiché de la fonction :</p>
-
-<pre class="brush:js">function faireTruc() { }
-
-console.log(faireTruc.displayName); // "undefined"
-
-var logMessage = function(contenu) { console.log(contenu) };
-
-logMessage.displayName = 'Afficher les messages dans le journal';
-
-console.log(logMessage.displayName); // "Afficher les messages dans le journal"
-</pre>
-
-<p>Il est possible de définir une fonction avec un nom d'affichage grâce à une {{jsxref("Fonctions", "expression de fonctions","",1)}}:</p>
-
-<pre class="brush:js">var objet = {
-  uneMéthode: function () {}
-};
-
-objet.uneMéthode.displayName = 'uneMéthode';
-
-console.log(objet.uneMéthode.displayName);
-// "uneMéthode"
-
-try { uneMéthode } catch(e) { console.log(e); }
-// ReferenceError: uneMéthode is not defined
-</pre>
-
-<p>La propriété <code>displayName</code> peut être changée dynamiquement :</p>
-
-<pre class="brush:js">var objet = {
-  // anonyme
-  uneMéthode: function(valeur) {
-    this.displayName = "uneMéthode (" + valeur + ")";
-  }
-};
-
-console.log(objet.uneMéthode.displayName); // "undefined"
-
-objet.uneMéthode("123")
-console.log(objet.uneMéthode.displayName); // "uneMéthode (123)"
-</pre>
-
-<h2 id="Exemples">Exemples</h2>
-
-<p>On souhaite généralement utiliser cette propriété dans les consoles et profileurs plutôt que {{jsxref("Function.name", "func.name")}}</p>
-
-<p>Le code suivant devrait afficher quelque chose comme "function Ma Fonction()":</p>
-
-<pre class="brush:js">var a = function () { };
-a.displayName = 'Ma Fonction';
-
-a;
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<p>N'appartient à aucune spécification.</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Function.displayName")}}</p>
diff --git a/files/fr/web/javascript/reference/global_objects/function/displayname/index.md b/files/fr/web/javascript/reference/global_objects/function/displayname/index.md
new file mode 100644
index 0000000000..374722f47c
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/function/displayname/index.md
@@ -0,0 +1,84 @@
+---
+title: Function.displayName
+slug: Web/JavaScript/Reference/Global_Objects/Function/displayName
+tags:
+  - Function
+  - JavaScript
+  - Non-standard
+  - Propriété
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Function/displayName
+original_slug: Web/JavaScript/Reference/Objets_globaux/Function/displayName
+---
+{{JSRef}} {{Non-standard_header}}
+
+La propriété **`function.displayName`** renvoie le nom affiché de la fonction.
+
+## Description
+
+Lorsque la propriété `displayName` est définie, elle renvoie le nom affiché de la fonction :
+
+```js
+function faireTruc() { }
+
+console.log(faireTruc.displayName); // "undefined"
+
+var logMessage = function(contenu) { console.log(contenu) };
+
+logMessage.displayName = 'Afficher les messages dans le journal';
+
+console.log(logMessage.displayName); // "Afficher les messages dans le journal"
+```
+
+Il est possible de définir une fonction avec un nom d'affichage grâce à une {{jsxref("Fonctions", "expression de fonctions","",1)}}:
+
+```js
+var objet = {
+  uneMéthode: function () {}
+};
+
+objet.uneMéthode.displayName = 'uneMéthode';
+
+console.log(objet.uneMéthode.displayName);
+// "uneMéthode"
+
+try { uneMéthode } catch(e) { console.log(e); }
+// ReferenceError: uneMéthode is not defined
+```
+
+La propriété `displayName` peut être changée dynamiquement :
+
+```js
+var objet = {
+  // anonyme
+  uneMéthode: function(valeur) {
+    this.displayName = "uneMéthode (" + valeur + ")";
+  }
+};
+
+console.log(objet.uneMéthode.displayName); // "undefined"
+
+objet.uneMéthode("123")
+console.log(objet.uneMéthode.displayName); // "uneMéthode (123)"
+```
+
+## Exemples
+
+On souhaite généralement utiliser cette propriété dans les consoles et profileurs plutôt que {{jsxref("Function.name", "func.name")}}
+
+Le code suivant devrait afficher quelque chose comme "function Ma Fonction()":
+
+```js
+var a = function () { };
+a.displayName = 'Ma Fonction';
+
+a;
+```
+
+## Spécifications
+
+N'appartient à aucune spécification.
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Function.displayName")}}
diff --git a/files/fr/web/javascript/reference/global_objects/function/index.html b/files/fr/web/javascript/reference/global_objects/function/index.html
deleted file mode 100644
index cbac58bc3c..0000000000
--- a/files/fr/web/javascript/reference/global_objects/function/index.html
+++ /dev/null
@@ -1,150 +0,0 @@
----
-title: Function
-slug: Web/JavaScript/Reference/Global_Objects/Function
-tags:
-  - Constructor
-  - Function
-  - JavaScript
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Function
-original_slug: Web/JavaScript/Reference/Objets_globaux/Function
----
-<div>{{JSRef}}</div>
-
-<p>Le constructeur <code><strong>Function</strong></code> crée un nouvel <em>objet</em> <code>Function</code>. En JavaScript, chaque fonction est un objet <code>Function</code>.</p>
-
-<p>Appeler ce constructeur permet de créer des fonctions dynamiquement mais cette méthode souffre de défauts équivalents à {{jsxref("eval")}} en termes de sécurité et de performance. Toutefois, à la différence d'<code>eval</code>, le constructeur <code>Function</code> permet d'exécuter du code dans la portée globale.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/function-constructor.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">new Function ([<var>arg1</var>[, <var>arg2</var>[, ...<var>argN</var>]],] corpsFonction)</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>arg1, arg2, ... argN</code></dt>
- <dd>Les noms utilisés par la fonction pour les arguments formellement déclarés. Chacun doit être une chaîne de caractères correspondant à un identifiant JavaScript valide (ou une liste de telles chaînes séparées par des virgules). Par exemple : "<code>x</code>", "<code>uneValeur</code>", ou "<code>a,b</code>".</dd>
- <dt><code>corpsFonction</code></dt>
- <dd>Une chaîne de caractères qui contient les instructions JavaScript définissant la fonction.</dd>
-</dl>
-
-<h2 id="Description">Description</h2>
-
-<p>Les objets <code>Function</code> créés avec le constructeur <code>Function</code> sont analysés quand la fonction est créée. Ceci est moins efficace que de déclarer une fonction grâce à une {{jsxref("Opérateurs/L_opérateur_function","expression de fonction","",1)}} ou à une instruction {{jsxref("Instructions/function","function")}} car celles crées de cette façon sont analysées avec le reste du code.</p>
-
-<p>Tous les arguments passés à la fonction seront traités avec les noms des identifiants des paramètres de la fonction à créer, dans le même ordre dans lequel ils ont été passés. Si un argument n'est pas passé, la valeur du paramètre dans la fonction sera {{jsxref("undefined")}}.</p>
-
-<p>Appeler le constructeur <code>Function</code> comme une fonction (c'est-à-dire sans utiliser l'opérateur {{jsxref("Opérateurs/L_opérateur_new","new")}}) a le même effet que quand il est appelé comme constructeur.</p>
-
-<h2 id="Propriétés_et_méthodes_de_Function">Propriétés et méthodes de <code>Function</code></h2>
-
-<p>L'objet global <code>Function</code> ne possède pas de méthodes ou de propriétés propres. Cependant, il est lui-même une fonction et hérite de certaines méthodes et propriétés depuis {{jsxref("Function.prototype")}} grâce à la chaîne de prototype.</p>
-
-<h2 id="Le_prototype_de_Function">Le prototype de <code>Function</code></h2>
-
-<h3 id="Propriétés">Propriétés</h3>
-
-<div>{{page('/fr/docs/Web/JavaScript/Reference/Objets_globaux/Function/prototype', 'Propri.C3.A9t.C3.A9s')}}</div>
-
-<h3 id="Méthodes">Méthodes</h3>
-
-<div>{{page('/fr/docs/Web/JavaScript/Reference/Objets_globaux/Function/prototype', 'M.C3.A9thodes')}}</div>
-
-<h2 id="Les_instances_de_Function">Les instances de <code>Function</code></h2>
-
-<p>Les instances de <code>Function</code> héritent des méthodes et propriétés de {{jsxref("Function.prototype")}}. Comme pour les autres constructeurs, il est possible de modifier le prototype du constructeur afin d'apporter des modifications à toutes les instances de <code>Function</code>.</p>
-
-<h2 id="Exemple">Exemple</h2>
-
-<h3 id="Définir_des_arguments_avec_le_constructeur_Function">Définir des arguments avec le constructeur <code>Function</code></h3>
-
-<p>Le code suivant permet de créer un objet <code>Function</code> qui utilise deux arguments :</p>
-
-<pre class="brush: js">// Cet exemple peut être lancé dans votre console JavaScript
-
-// On crée un fonction qui prend deux arguments
-// et qui en renvoie la somme
-var ajoute = new Function('a', 'b', 'return a + b');
-
-// On appelle la fonction
-ajoute(2, 6);
-// &gt; 8
-</pre>
-
-<p>Les arguments "<code>a</code>" et "<code>b</code>" sont les noms des arguments formellement déclarés utilisés dans le corps de la fonction : "<code>return a + b</code>".</p>
-
-<h3 id="Différence_entre_le_constructeur_Function_et_les_déclarations_de_fonction">Différence entre le constructeur <code>Function</code> et les déclarations de fonction</h3>
-
-<p>Les fonctions créées avec le constructeur {{jsxref("Function()")}} ne créent pas de fermetures liées au contexte de leur création. Ainsi, lorsqu'elles sont exécutées, elles ne peuvent accéder qu'aux variables globales et à leurs propres valeurs locales. Elles ne peuvent pas accéder aux variables de la portée dans laquelle le constructeur <code>Function</code> a été invoqué. Le comportement est différent de celui qu'on obtient avec {{jsxref("eval")}} avec du code contenant une expression de fonction.</p>
-
-<pre class="brush: js">var x = 10;
-
-function créerFonction1() {
-  var x = 20;
-  return new Function("return x;"); // ici |x| fait référence au |x| global
-}
-
-function créerFonction2() {
-  var x = 20;
-  function f() {
-    return x; // ici |x| fait référence au |x| local juste avant
-  }
-  return f;
-}
-
-var f1 = créerFonction1();
-console.log(f1());          // 10
-var f2 = créerFonction2();
-console.log(f2());          // 20</pre>
-
-<p>Bien que ce code fonctionne dans un navigateur web, l'appel à <code>f1()</code> provoquera une {{jsxref("ReferenceError")}} dans Node.js car <code>x</code> ne sera pas trouvé. En effet, pour Node, la portée de plus haut niveau n'est pas la portée globale et <code>x</code> est ici local à la fonction.</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES1')}}</td>
-   <td>{{Spec2('ES1')}}</td>
-   <td>Définition initiale. Implémentée avec JavaScript 1.0.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-15.3', 'Function')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-function-objects', 'Function')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-function-objects', 'Function')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Function")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Fonctions", "Les fonctions","",1)}}</li>
- <li>L'instruction {{jsxref("Instructions/function", "function")}}</li>
- <li>L'expression {{jsxref("Opérateurs/L_opérateur_function", "function")}}</li>
- <li>L'instruction {{jsxref("Instructions/function*", "function*")}}</li>
- <li>L'expression {{jsxref("Opérateurs/function*", "function*")}}</li>
- <li>{{jsxref("AsyncFunction")}}</li>
- <li>{{jsxref("GeneratorFunction")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/function/index.md b/files/fr/web/javascript/reference/global_objects/function/index.md
new file mode 100644
index 0000000000..4db2a14baa
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/function/index.md
@@ -0,0 +1,126 @@
+---
+title: Function
+slug: Web/JavaScript/Reference/Global_Objects/Function
+tags:
+  - Constructor
+  - Function
+  - JavaScript
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Function
+original_slug: Web/JavaScript/Reference/Objets_globaux/Function
+---
+{{JSRef}}
+
+Le constructeur **`Function`** crée un nouvel _objet_ `Function`. En JavaScript, chaque fonction est un objet `Function`.
+
+Appeler ce constructeur permet de créer des fonctions dynamiquement mais cette méthode souffre de défauts équivalents à {{jsxref("eval")}} en termes de sécurité et de performance. Toutefois, à la différence d'`eval`, le constructeur `Function` permet d'exécuter du code dans la portée globale.
+
+{{EmbedInteractiveExample("pages/js/function-constructor.html")}}
+
+## Syntaxe
+
+    new Function ([arg1[, arg2[, ...argN]],] corpsFonction)
+
+### Paramètres
+
+- `arg1, arg2, ... argN`
+  - : Les noms utilisés par la fonction pour les arguments formellement déclarés. Chacun doit être une chaîne de caractères correspondant à un identifiant JavaScript valide (ou une liste de telles chaînes séparées par des virgules). Par exemple : "`x`", "`uneValeur`", ou "`a,b`".
+- `corpsFonction`
+  - : Une chaîne de caractères qui contient les instructions JavaScript définissant la fonction.
+
+## Description
+
+Les objets `Function` créés avec le constructeur `Function` sont analysés quand la fonction est créée. Ceci est moins efficace que de déclarer une fonction grâce à une {{jsxref("Opérateurs/L_opérateur_function","expression de fonction","",1)}} ou à une instruction {{jsxref("Instructions/function","function")}} car celles crées de cette façon sont analysées avec le reste du code.
+
+Tous les arguments passés à la fonction seront traités avec les noms des identifiants des paramètres de la fonction à créer, dans le même ordre dans lequel ils ont été passés. Si un argument n'est pas passé, la valeur du paramètre dans la fonction sera {{jsxref("undefined")}}.
+
+Appeler le constructeur `Function` comme une fonction (c'est-à-dire sans utiliser l'opérateur {{jsxref("Opérateurs/L_opérateur_new","new")}}) a le même effet que quand il est appelé comme constructeur.
+
+## Propriétés et méthodes de `Function`
+
+L'objet global `Function` ne possède pas de méthodes ou de propriétés propres. Cependant, il est lui-même une fonction et hérite de certaines méthodes et propriétés depuis {{jsxref("Function.prototype")}} grâce à la chaîne de prototype.
+
+## Le prototype de `Function`
+
+### Propriétés
+
+{{page('/fr/docs/Web/JavaScript/Reference/Objets_globaux/Function/prototype', 'Propri.C3.A9t.C3.A9s')}}
+
+### Méthodes
+
+{{page('/fr/docs/Web/JavaScript/Reference/Objets_globaux/Function/prototype', 'M.C3.A9thodes')}}
+
+## Les instances de `Function`
+
+Les instances de `Function` héritent des méthodes et propriétés de {{jsxref("Function.prototype")}}. Comme pour les autres constructeurs, il est possible de modifier le prototype du constructeur afin d'apporter des modifications à toutes les instances de `Function`.
+
+## Exemple
+
+### Définir des arguments avec le constructeur `Function`
+
+Le code suivant permet de créer un objet `Function` qui utilise deux arguments :
+
+```js
+// Cet exemple peut être lancé dans votre console JavaScript
+
+// On crée un fonction qui prend deux arguments
+// et qui en renvoie la somme
+var ajoute = new Function('a', 'b', 'return a + b');
+
+// On appelle la fonction
+ajoute(2, 6);
+// > 8
+```
+
+Les arguments "`a`" et "`b`" sont les noms des arguments formellement déclarés utilisés dans le corps de la fonction : "`return a + b`".
+
+### Différence entre le constructeur `Function` et les déclarations de fonction
+
+Les fonctions créées avec le constructeur {{jsxref("Function()")}} ne créent pas de fermetures liées au contexte de leur création. Ainsi, lorsqu'elles sont exécutées, elles ne peuvent accéder qu'aux variables globales et à leurs propres valeurs locales. Elles ne peuvent pas accéder aux variables de la portée dans laquelle le constructeur `Function` a été invoqué. Le comportement est différent de celui qu'on obtient avec {{jsxref("eval")}} avec du code contenant une expression de fonction.
+
+```js
+var x = 10;
+
+function créerFonction1() {
+  var x = 20;
+  return new Function("return x;"); // ici |x| fait référence au |x| global
+}
+
+function créerFonction2() {
+  var x = 20;
+  function f() {
+    return x; // ici |x| fait référence au |x| local juste avant
+  }
+  return f;
+}
+
+var f1 = créerFonction1();
+console.log(f1());          // 10
+var f2 = créerFonction2();
+console.log(f2());          // 20
+```
+
+Bien que ce code fonctionne dans un navigateur web, l'appel à `f1()` provoquera une {{jsxref("ReferenceError")}} dans Node.js car `x` ne sera pas trouvé. En effet, pour Node, la portée de plus haut niveau n'est pas la portée globale et `x` est ici local à la fonction.
+
+## Spécifications
+
+| Spécification                                                                    | État                         | Commentaires                                          |
+| -------------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- |
+| {{SpecName('ES1')}}                                                         | {{Spec2('ES1')}}         | Définition initiale. Implémentée avec JavaScript 1.0. |
+| {{SpecName('ES5.1', '#sec-15.3', 'Function')}}                     | {{Spec2('ES5.1')}}     |                                                       |
+| {{SpecName('ES6', '#sec-function-objects', 'Function')}}     | {{Spec2('ES6')}}         |                                                       |
+| {{SpecName('ESDraft', '#sec-function-objects', 'Function')}} | {{Spec2('ESDraft')}} |                                                       |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Function")}}
+
+## Voir aussi
+
+- {{jsxref("Fonctions", "Les fonctions","",1)}}
+- L'instruction {{jsxref("Instructions/function", "function")}}
+- L'expression {{jsxref("Opérateurs/L_opérateur_function", "function")}}
+- L'instruction {{jsxref("Instructions/function*", "function*")}}
+- L'expression {{jsxref("Opérateurs/function*", "function*")}}
+- {{jsxref("AsyncFunction")}}
+- {{jsxref("GeneratorFunction")}}
diff --git a/files/fr/web/javascript/reference/global_objects/function/length/index.html b/files/fr/web/javascript/reference/global_objects/function/length/index.html
deleted file mode 100644
index 7493f7d759..0000000000
--- a/files/fr/web/javascript/reference/global_objects/function/length/index.html
+++ /dev/null
@@ -1,88 +0,0 @@
----
-title: Function.length
-slug: Web/JavaScript/Reference/Global_Objects/Function/length
-tags:
-  - Function
-  - JavaScript
-  - Propriété
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Function/length
-original_slug: Web/JavaScript/Reference/Objets_globaux/Function/length
----
-<div>{{JSRef}}</div>
-
-<p>La propriété <code><strong>length</strong></code> définit le nombre de paramètres attendus par la fonction.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/function-length.html")}}</div>
-
-
-
-<div>{{js_property_attributes(0,0,1)}}</div>
-
-<h2 id="Description">Description</h2>
-
-<p><code>length</code> est une propriété des fonctions qui indique le nombre d'arguments attendus par la fonction (ce qui correspond au nombre d'arguments formellement déclarés). Cette quantité n'inclue pas les {{jsxref("Fonctions/paramètres_du_reste", "paramètres du reste", "", 1)}} et ne compte que les paramètres situés avant le premier paramètre avec une valeur par défaut. Cette propriété est différente de {{jsxref("Fonctions/arguments/length", "arguments.length")}} qui est locale à la fonction et qui décrit le nombre d'arguments réellement passés à la fonction.</p>
-
-<h3 id="Propriété_du_constructeur_Function">Propriété du constructeur <code>Function</code></h3>
-
-<p>Le constructeur {{jsxref("Function")}} est lui-même un objet {{jsxref("Function")}}. Sa propriété<code> length</code> vaut 1. Les attributs de cette propriété sont : Écrivable : <code>false</code>, Énumérable : <code>false</code>, Configurable : <code>true</code>.</p>
-
-<h3 id="Propriété_du_prototype_de_Function">Propriété du prototype de <code>Function</code></h3>
-
-<p>La propriété <code>length</code> du prototype de {{jsxref("Function")}} vaut 0.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<pre class="brush: js">console.log(Function.length); /* 1 */
-
-console.log((function()        {}).length); /* 0 */
-console.log((function(a)       {}).length); /* 1 */
-console.log((function(a, b)    {}).length); /* 2 etc. */
-console.log((function(...args) {}).length);
-// 0, le paramètre du reste n'est pas compté
-console.log((function(a, b = 1, c) {}).length);
-// 1, seuls les paramètres avant les valeurs par
-// défaut sont comptés
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES1')}}</td>
-   <td>{{Spec2('ES1')}}</td>
-   <td>Définition initiale. Implémentée avec JavaScript 1.1.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-15.3.5.1', 'Function.length')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-function-instances-length', 'Function.length')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td>L'attribut <code>configurable</code> de cette propriété vaut <code>true</code> désormais.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-function-instances-length', 'Function.length')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Function.length")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Function", "Function")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/function/length/index.md b/files/fr/web/javascript/reference/global_objects/function/length/index.md
new file mode 100644
index 0000000000..359031b990
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/function/length/index.md
@@ -0,0 +1,60 @@
+---
+title: Function.length
+slug: Web/JavaScript/Reference/Global_Objects/Function/length
+tags:
+  - Function
+  - JavaScript
+  - Propriété
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Function/length
+original_slug: Web/JavaScript/Reference/Objets_globaux/Function/length
+---
+{{JSRef}}
+
+La propriété **`length`** définit le nombre de paramètres attendus par la fonction.
+
+{{EmbedInteractiveExample("pages/js/function-length.html")}}{{js_property_attributes(0,0,1)}}
+
+## Description
+
+`length` est une propriété des fonctions qui indique le nombre d'arguments attendus par la fonction (ce qui correspond au nombre d'arguments formellement déclarés). Cette quantité n'inclue pas les {{jsxref("Fonctions/paramètres_du_reste", "paramètres du reste", "", 1)}} et ne compte que les paramètres situés avant le premier paramètre avec une valeur par défaut. Cette propriété est différente de {{jsxref("Fonctions/arguments/length", "arguments.length")}} qui est locale à la fonction et qui décrit le nombre d'arguments réellement passés à la fonction.
+
+### Propriété du constructeur `Function`
+
+Le constructeur {{jsxref("Function")}} est lui-même un objet {{jsxref("Function")}}. Sa propriété` length` vaut 1. Les attributs de cette propriété sont : Écrivable : `false`, Énumérable : `false`, Configurable : `true`.
+
+### Propriété du prototype de `Function`
+
+La propriété `length` du prototype de {{jsxref("Function")}} vaut 0.
+
+## Exemples
+
+```js
+console.log(Function.length); /* 1 */
+
+console.log((function()        {}).length); /* 0 */
+console.log((function(a)       {}).length); /* 1 */
+console.log((function(a, b)    {}).length); /* 2 etc. */
+console.log((function(...args) {}).length);
+// 0, le paramètre du reste n'est pas compté
+console.log((function(a, b = 1, c) {}).length);
+// 1, seuls les paramètres avant les valeurs par
+// défaut sont comptés
+```
+
+## Spécifications
+
+| Spécification                                                                                        | État                         | Commentaires                                                        |
+| ---------------------------------------------------------------------------------------------------- | ---------------------------- | ------------------------------------------------------------------- |
+| {{SpecName('ES1')}}                                                                             | {{Spec2('ES1')}}         | Définition initiale. Implémentée avec JavaScript 1.1.               |
+| {{SpecName('ES5.1', '#sec-15.3.5.1', 'Function.length')}}                         | {{Spec2('ES5.1')}}     |                                                                     |
+| {{SpecName('ES6', '#sec-function-instances-length', 'Function.length')}}     | {{Spec2('ES6')}}         | L'attribut `configurable` de cette propriété vaut `true` désormais. |
+| {{SpecName('ESDraft', '#sec-function-instances-length', 'Function.length')}} | {{Spec2('ESDraft')}} |                                                                     |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Function.length")}}
+
+## Voir aussi
+
+- {{jsxref("Function", "Function")}}
diff --git a/files/fr/web/javascript/reference/global_objects/function/name/index.html b/files/fr/web/javascript/reference/global_objects/function/name/index.html
deleted file mode 100644
index 0f8df52d94..0000000000
--- a/files/fr/web/javascript/reference/global_objects/function/name/index.html
+++ /dev/null
@@ -1,200 +0,0 @@
----
-title: Function.name
-slug: Web/JavaScript/Reference/Global_Objects/Function/name
-tags:
-  - ECMAScript 2015
-  - Function
-  - JavaScript
-  - Propriété
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Function/name
-original_slug: Web/JavaScript/Reference/Objets_globaux/Function/name
----
-<div>{{JSRef}}</div>
-
-<p>La propriété <code><strong>function.name</strong></code> est une propriété en lecture seule qui renvoie le nom de la fonction courante ou <code>"anonymous"</code> si celle-ci a été créée de façon anonyme.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/function-name.html")}}</div>
-
-
-
-<div>{{js_property_attributes(0,0,1)}}</div>
-
-<div class="note">
-<p><strong>Note :</strong> Dans les implémentations non-standards antérieures à ES2015, l'attribut <code>configurable</code> valait <code>false</code>.</p>
-</div>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Instruction_de_fonction">Instruction de fonction</h3>
-
-<p>La propriété <code>name</code> renvoie le nom de la fonction lorsque celle-ci est utilisée dans une instruction de fonction.</p>
-
-<pre class="brush: js">function faireUnTruc() {}
-faireUnTruc.name; // "faireUnTruc"
-</pre>
-
-<h3 id="Fonctions_créées_avec_un_constructeur">Fonctions créées avec un constructeur</h3>
-
-<p>Lorsqu'on crée une fonction avec <code>new Function(...)</code> ou simplement <code>Function(...)</code>, on crée uniquement des objets dont le nom est "anonymous".</p>
-
-<pre class="brush: js">(new Function).name; // "anonymous"</pre>
-
-<h3 id="Inférence_des_noms_de_fonction">Inférence des noms de fonction</h3>
-
-<p>Les variables et les méthodes permettent d'inférer (c'est-à-dire de « deviner ») le nom des fonctions anonymes en fonction de leur position syntaxique (cette fonctionnalité est apparue avec ECMAScript 2015).</p>
-
-<pre class="brush: js">var f = function() {};
-var objet = {
-  uneMéthode: function() {}
-};
-
-console.log(f.name); // "f"
-console.log(objet.uneMéthode.name); // "uneMéthode"
-</pre>
-
-<p>On peut définir une fonction avec un nom grâce à une {{jsxref("Opérateurs/L_opérateur_function", "expression de fonction", "", 1)}}:</p>
-
-<pre class="brush: js">var objet = {
-  uneMéthode: function objet_maMéthode() {}
-};
-console.log(objet.uneMéthode.name); // logs "objet_maMéthode"
-
-try { objet_maMéthode } catch(e) { console.log(e); }
-// ReferenceError: objet_maMéthode is not defined
-</pre>
-
-<p>On ne peut pas changer le nom d'une fonction, cette propriété est uniquement en lecture :</p>
-
-<pre class="brush: js">var objet = {
-  // anonyme
-  uneMéthode: function() {}
-};
-
-objet.uneMéthode.name = 'uneMéthode';
-console.log(object.uneMéthode.name); // une chaîne vide, uneMéthode est anonyme
-</pre>
-
-<p>Pour modifier le nom, on pourrait cependant utiliser la méthode {{jsxref("Object.defineProperty()")}}.</p>
-
-<h3 id="Notation_raccourcie_pour_les_méthodes">Notation raccourcie pour les méthodes</h3>
-
-<pre class="brush: js">var o = {
-  toto(){}
-};
-o.toto.name; // "toto";</pre>
-
-<h3 id="Noms_des_fonctions_liées">Noms des fonctions liées</h3>
-
-<p>{{jsxref("Function.bind()")}} produit une fonction dont le nom sera la chaîne "bound " suivi du nom de la fonction.</p>
-
-<pre class="brush: js">function toto() {};
-toto.bind({}).name; // "bound toto"
-</pre>
-
-<h3 id="Noms_de_fonction_pour_les_accesseurs_et_les_mutateurs">Noms de fonction pour les accesseurs et les mutateurs</h3>
-
-<p>Lorsqu'on utilise les propriétés d'accesseur <code><a href="/fr/docs/Web/JavaScript/Reference/Fonctions/get">get</a></code> / <code><a href="/fr/docs/Web/JavaScript/Reference/Fonctions/set">set</a></code>, "get" ou "set" apparaîtra avant le nom de la fonction.</p>
-
-<pre class="brush: js">var o = {
-  get toto(){},
-  set toto(x){}
-};
-
-var descripteur = Object.getOwnPropertyDescriptor(o, "toto");
-descripteur.get.name; // "get toto"
-descripteur.set.name; // "set toto";</pre>
-
-<h3 id="Noms_des_fonctions_utilisées_dans_les_classes">Noms des fonctions utilisées dans les classes</h3>
-
-<p>On peut utiliser la notation <code>obj.constructor.name</code> pour vérifier la « classe » d'un objet (attention aux avertissements ci-après) :</p>
-
-<pre class="brush: js">function Toto() {}  // Syntaxe ES2015 : class Toto {}
-
-var instanceDeToto = new Toto();
-console.log(instanceDeToto.constructor.name); // affiche "Toto" dans la console
-</pre>
-
-<p><strong>Attention :</strong> l'interpréteur utilisera la propriété native <code>Function.name</code> uniquement si la fonction ne possède pas une propriété en propre intitulée <em>name</em> (cf section <a href="https://www.ecma-international.org/ecma-262/6.0/#sec-setfunctionname">9.2.11 de la spécification ECMAScript2015</a>). Cependant, ES2015 indique que les propriétés définies avec mot-clé <em>static</em> seront des propriétés propres de la fonction constructrice (cf. ECMAScript2015, <a href="https://www.ecma-international.org/ecma-262/6.0/#sec-runtime-semantics-classdefinitionevaluation">14.5.14.21.b</a> + <a href="https://www.ecma-international.org/ecma-262/6.0/#sec-object-initializer-runtime-semantics-propertydefinitionevaluation">12.2.6.9</a>). Ainsi, il n'est plus possible d'obtenir le nom de la classe si celle-ci possède une méthode statique intitulée <code>name()</code> :</p>
-
-<pre class="brush: js">class Toto {
-  constructor() {}
-  static name() {}
-}
-</pre>
-
-<p>Avec <code>static name()</code>, <code>Toto.name</code> ne contient plus le nom de la classe mais une référence à l'objet <code>name()</code>. La définition utilisée ci-avant se comporte de façon semblable à ce fragment de code ES5 :</p>
-
-<pre class="brush: js">function Toto() {}
-Object.defineProperty(Toto, 'name', { writable: true });
-Toto.name = function() {};
-</pre>
-
-<p>Il est donc parfois erroné de penser que <code>Function.name</code> pointe toujours vers le nom de la classe.</p>
-
-<h3 id="Noms_de_fonction_sous_la_forme_de_symboles">Noms de fonction sous la forme de symboles</h3>
-
-<p>Si un symbole ({{jsxref("Symbol")}}) est utilisé comme nom d'une fonction et que celui-ci dispose d'une description, c'est cette dernière qui sera utilisée comme nom de la méthode, entre crochets :</p>
-
-<pre class="brush: js">var sym1 = Symbol("Toto");
-var sym2 = Symbol();
-var o = {
-  [sym1]: function(){},
-  [sym2]: function(){}
-};
-
-o[sym1].name; // "[Toto]"
-o[sym2].name; // ""</pre>
-
-<h2 id="Compresseurs_et_outils_de_minification_JavaScript">Compresseurs et outils de minification JavaScript</h2>
-
-<p>Attention à l'utilisation de <code>Function.name</code> lorsque le code source est transformé par certains outils. En effet, ceux-ci réduisent généralement la taille d'un programme en compressant les espaces et en modifiant parfois les noms de variables. Ainsi, un fragment de code comme :</p>
-
-<pre class="brush: js">function Toto() {};
-var toto = new Toto();
-
-if (Toto.constructor.name === 'Toto') {
-  console.log("'toto' est une instance de 'Toto'");
-} else {
-  console.log('Oups !');
-}
-</pre>
-
-<p>pourrait être compressé en :</p>
-
-<pre class="brush: js">function a() {};
-var b = new a();
-if (b.constructor.name === 'Toto') {
-  console.log("'toto' est une instance de 'Toto'");
-} else {
-  console.log('Oups !');
-}
-</pre>
-
-<p>Dans la version non-compressée, la condition du test est remplie et on affiche <em>'toto' est une instance de 'Toto'</em> dans la console. Mais dans la version compressée, la condition n'est pas vérifiée. Lorsqu'on utilise <code>name</code>, il faut s'assurer que les outils utilisés ne modifient pas le nom des fonctions.</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-name', 'name')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-function-instances-name', 'name')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Function.name")}}</p>
diff --git a/files/fr/web/javascript/reference/global_objects/function/name/index.md b/files/fr/web/javascript/reference/global_objects/function/name/index.md
new file mode 100644
index 0000000000..2d1fe90437
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/function/name/index.md
@@ -0,0 +1,197 @@
+---
+title: Function.name
+slug: Web/JavaScript/Reference/Global_Objects/Function/name
+tags:
+  - ECMAScript 2015
+  - Function
+  - JavaScript
+  - Propriété
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Function/name
+original_slug: Web/JavaScript/Reference/Objets_globaux/Function/name
+---
+{{JSRef}}
+
+La propriété **`function.name`** est une propriété en lecture seule qui renvoie le nom de la fonction courante ou `"anonymous"` si celle-ci a été créée de façon anonyme.
+
+{{EmbedInteractiveExample("pages/js/function-name.html")}}{{js_property_attributes(0,0,1)}}
+
+> **Note :** Dans les implémentations non-standards antérieures à ES2015, l'attribut `configurable` valait `false`.
+
+## Exemples
+
+### Instruction de fonction
+
+La propriété `name` renvoie le nom de la fonction lorsque celle-ci est utilisée dans une instruction de fonction.
+
+```js
+function faireUnTruc() {}
+faireUnTruc.name; // "faireUnTruc"
+```
+
+### Fonctions créées avec un constructeur
+
+Lorsqu'on crée une fonction avec `new Function(...)` ou simplement `Function(...)`, on crée uniquement des objets dont le nom est "anonymous".
+
+```js
+(new Function).name; // "anonymous"
+```
+
+### Inférence des noms de fonction
+
+Les variables et les méthodes permettent d'inférer (c'est-à-dire de « deviner ») le nom des fonctions anonymes en fonction de leur position syntaxique (cette fonctionnalité est apparue avec ECMAScript 2015).
+
+```js
+var f = function() {};
+var objet = {
+  uneMéthode: function() {}
+};
+
+console.log(f.name); // "f"
+console.log(objet.uneMéthode.name); // "uneMéthode"
+```
+
+On peut définir une fonction avec un nom grâce à une {{jsxref("Opérateurs/L_opérateur_function", "expression de fonction", "", 1)}}:
+
+```js
+var objet = {
+  uneMéthode: function objet_maMéthode() {}
+};
+console.log(objet.uneMéthode.name); // logs "objet_maMéthode"
+
+try { objet_maMéthode } catch(e) { console.log(e); }
+// ReferenceError: objet_maMéthode is not defined
+```
+
+On ne peut pas changer le nom d'une fonction, cette propriété est uniquement en lecture :
+
+```js
+var objet = {
+  // anonyme
+  uneMéthode: function() {}
+};
+
+objet.uneMéthode.name = 'uneMéthode';
+console.log(object.uneMéthode.name); // une chaîne vide, uneMéthode est anonyme
+```
+
+Pour modifier le nom, on pourrait cependant utiliser la méthode {{jsxref("Object.defineProperty()")}}.
+
+### Notation raccourcie pour les méthodes
+
+```js
+var o = {
+  toto(){}
+};
+o.toto.name; // "toto";
+```
+
+### Noms des fonctions liées
+
+{{jsxref("Function.bind()")}} produit une fonction dont le nom sera la chaîne "bound " suivi du nom de la fonction.
+
+```js
+function toto() {};
+toto.bind({}).name; // "bound toto"
+```
+
+### Noms de fonction pour les accesseurs et les mutateurs
+
+Lorsqu'on utilise les propriétés d'accesseur [`get`](/fr/docs/Web/JavaScript/Reference/Fonctions/get) / [`set`](/fr/docs/Web/JavaScript/Reference/Fonctions/set), "get" ou "set" apparaîtra avant le nom de la fonction.
+
+```js
+var o = {
+  get toto(){},
+  set toto(x){}
+};
+
+var descripteur = Object.getOwnPropertyDescriptor(o, "toto");
+descripteur.get.name; // "get toto"
+descripteur.set.name; // "set toto";
+```
+
+### Noms des fonctions utilisées dans les classes
+
+On peut utiliser la notation `obj.constructor.name` pour vérifier la « classe » d'un objet (attention aux avertissements ci-après) :
+
+```js
+function Toto() {}  // Syntaxe ES2015 : class Toto {}
+
+var instanceDeToto = new Toto();
+console.log(instanceDeToto.constructor.name); // affiche "Toto" dans la console
+```
+
+**Attention :** l'interpréteur utilisera la propriété native `Function.name` uniquement si la fonction ne possède pas une propriété en propre intitulée _name_ (cf section [9.2.11 de la spécification ECMAScript2015](https://www.ecma-international.org/ecma-262/6.0/#sec-setfunctionname)). Cependant, ES2015 indique que les propriétés définies avec mot-clé _static_ seront des propriétés propres de la fonction constructrice (cf. ECMAScript2015, [14.5.14.21.b](https://www.ecma-international.org/ecma-262/6.0/#sec-runtime-semantics-classdefinitionevaluation) + [12.2.6.9](https://www.ecma-international.org/ecma-262/6.0/#sec-object-initializer-runtime-semantics-propertydefinitionevaluation)). Ainsi, il n'est plus possible d'obtenir le nom de la classe si celle-ci possède une méthode statique intitulée `name()` :
+
+```js
+class Toto {
+  constructor() {}
+  static name() {}
+}
+```
+
+Avec `static name()`, `Toto.name` ne contient plus le nom de la classe mais une référence à l'objet `name()`. La définition utilisée ci-avant se comporte de façon semblable à ce fragment de code ES5 :
+
+```js
+function Toto() {}
+Object.defineProperty(Toto, 'name', { writable: true });
+Toto.name = function() {};
+```
+
+Il est donc parfois erroné de penser que `Function.name` pointe toujours vers le nom de la classe.
+
+### Noms de fonction sous la forme de symboles
+
+Si un symbole ({{jsxref("Symbol")}}) est utilisé comme nom d'une fonction et que celui-ci dispose d'une description, c'est cette dernière qui sera utilisée comme nom de la méthode, entre crochets :
+
+```js
+var sym1 = Symbol("Toto");
+var sym2 = Symbol();
+var o = {
+  [sym1]: function(){},
+  [sym2]: function(){}
+};
+
+o[sym1].name; // "[Toto]"
+o[sym2].name; // ""
+```
+
+## Compresseurs et outils de minification JavaScript
+
+Attention à l'utilisation de `Function.name` lorsque le code source est transformé par certains outils. En effet, ceux-ci réduisent généralement la taille d'un programme en compressant les espaces et en modifiant parfois les noms de variables. Ainsi, un fragment de code comme :
+
+```js
+function Toto() {};
+var toto = new Toto();
+
+if (Toto.constructor.name === 'Toto') {
+  console.log("'toto' est une instance de 'Toto'");
+} else {
+  console.log('Oups !');
+}
+```
+
+pourrait être compressé en :
+
+```js
+function a() {};
+var b = new a();
+if (b.constructor.name === 'Toto') {
+  console.log("'toto' est une instance de 'Toto'");
+} else {
+  console.log('Oups !');
+}
+```
+
+Dans la version non-compressée, la condition du test est remplie et on affiche _'toto' est une instance de 'Toto'_ dans la console. Mais dans la version compressée, la condition n'est pas vérifiée. Lorsqu'on utilise `name`, il faut s'assurer que les outils utilisés ne modifient pas le nom des fonctions.
+
+## Spécifications
+
+| Spécification                                                                        | État                         | Commentaires         |
+| ------------------------------------------------------------------------------------ | ---------------------------- | -------------------- |
+| {{SpecName('ES2015', '#sec-name', 'name')}}                             | {{Spec2('ES2015')}}     | Définition initiale. |
+| {{SpecName('ESDraft', '#sec-function-instances-name', 'name')}} | {{Spec2('ESDraft')}} |                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Function.name")}}
diff --git a/files/fr/web/javascript/reference/global_objects/function/tosource/index.html b/files/fr/web/javascript/reference/global_objects/function/tosource/index.html
deleted file mode 100644
index cfc1e8f26a..0000000000
--- a/files/fr/web/javascript/reference/global_objects/function/tosource/index.html
+++ /dev/null
@@ -1,66 +0,0 @@
----
-title: Function.prototype.toSource()
-slug: Web/JavaScript/Reference/Global_Objects/Function/toSource
-tags:
-  - Function
-  - JavaScript
-  - Méthode
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Function/toSource
-original_slug: Web/JavaScript/Reference/Objets_globaux/Function/toSource
----
-<div>{{JSRef}}{{non-standard_header}}</div>
-
-<p>La méthode <code><strong>toSource()</strong></code> renvoie une chaîne de caractères représentant le code source de l'objet.</p>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>function</var>.toSource();
-Function.toSource();
-</pre>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Une chaîne de caractères représentant le code source de l'objet.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>La méthode <code>toSource()</code> renvoie les valeurs suivantes :</p>
-
-<ul>
- <li>Pour l'objet natif {{jsxref("Function")}}, <code>toSource()</code> renvoie la chaîne suivante qui indique que le code source n'est pas disponible :
-
-  <pre class="brush: js">function Function() {
-    [native code]
-}
-</pre>
- </li>
- <li>Pour les fonctions définies dans les scripts, <code>toSource()</code> renverra la chaîne correspondant au code source JavaScript de l'objet.
-  <pre class="brush: js">function coucou() {
-  console.log("Coucou le monde");
-}
-
-coucou.toSource();
-// produira la chaîne de caractères
-// "function coucou() {
-//   console.log(\"Coucou le monde\");
-// }"
-</pre>
- </li>
-</ul>
-
-<p>De façon générale, cette méthode est utilisée en interne par le moteur JavaScript et n'est pas utilisée dans les scripts tiers. Il est possible d'utiliser cette méthode pour une aide au débogage et pouvoir examiner le contenu d'un objet.</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<p>Ne fait partie d'aucune spécification. Implémentée avec JavaScript 1.3.</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Function.toSource")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Object.prototype.toSource()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/function/tosource/index.md b/files/fr/web/javascript/reference/global_objects/function/tosource/index.md
new file mode 100644
index 0000000000..ad358e7be6
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/function/tosource/index.md
@@ -0,0 +1,63 @@
+---
+title: Function.prototype.toSource()
+slug: Web/JavaScript/Reference/Global_Objects/Function/toSource
+tags:
+  - Function
+  - JavaScript
+  - Méthode
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Function/toSource
+original_slug: Web/JavaScript/Reference/Objets_globaux/Function/toSource
+---
+{{JSRef}}{{non-standard_header}}
+
+La méthode **`toSource()`** renvoie une chaîne de caractères représentant le code source de l'objet.
+
+## Syntaxe
+
+    function.toSource();
+    Function.toSource();
+
+### Valeur de retour
+
+Une chaîne de caractères représentant le code source de l'objet.
+
+## Description
+
+La méthode `toSource()` renvoie les valeurs suivantes :
+
+- Pour l'objet natif {{jsxref("Function")}}, `toSource()` renvoie la chaîne suivante qui indique que le code source n'est pas disponible :
+
+  ```js
+    function Function() {
+        [native code]
+    }
+    ```
+
+- Pour les fonctions définies dans les scripts, `toSource()` renverra la chaîne correspondant au code source JavaScript de l'objet.
+
+  ```js
+    function coucou() {
+      console.log("Coucou le monde");
+    }
+
+    coucou.toSource();
+    // produira la chaîne de caractères
+    // "function coucou() {
+    //   console.log(\"Coucou le monde\");
+    // }"
+    ```
+
+De façon générale, cette méthode est utilisée en interne par le moteur JavaScript et n'est pas utilisée dans les scripts tiers. Il est possible d'utiliser cette méthode pour une aide au débogage et pouvoir examiner le contenu d'un objet.
+
+## Spécifications
+
+Ne fait partie d'aucune spécification. Implémentée avec JavaScript 1.3.
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Function.toSource")}}
+
+## Voir aussi
+
+- {{jsxref("Object.prototype.toSource()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/function/tostring/index.html b/files/fr/web/javascript/reference/global_objects/function/tostring/index.html
deleted file mode 100644
index 625eb83203..0000000000
--- a/files/fr/web/javascript/reference/global_objects/function/tostring/index.html
+++ /dev/null
@@ -1,95 +0,0 @@
----
-title: Function.prototype.toString()
-slug: Web/JavaScript/Reference/Global_Objects/Function/toString
-tags:
-  - Function
-  - JavaScript
-  - Méthode
-  - Prototype
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Function/toString
-original_slug: Web/JavaScript/Reference/Objets_globaux/Function/toString
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <code><strong>toString()</strong></code> renvoie une chaîne de caractères représentant le code source de la fonction.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/function-tostring.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>function</var>.toString(indentation)</pre>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Une chaîne de caractères qui représente le code source de la fonction.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>L'objet {{jsxref("Function")}} redéfinit la méthode {{jsxref("Object.prototype.toString", "toString")}} de l'objet {{jsxref("Object")}} ; il n'hérite donc pas de {{jsxref("Object.prototype.toString")}}. Pour les objets {{jsxref("Function")}}, la méthode <code>toString</code> renvoie une chaîne de caractères représentant l'objet sous la forme d'une déclaration de fonction. Pour ce faire, <code>toString</code> décompile la fonction pour renvoyer une chaîne qui contient le mot-clé <code>function</code>, la liste des arguments, les accolades et la source correspondant au corps de la fonction.</p>
-
-<p>Le moteur JavaScript appelle la méthode <code>toString</code> automatiquement lorsqu'un objet {{jsxref("Function")}} doit être représenté textuellement (par exemple lorsqu'une fonction doit être concaténée avec une chaîne de caractères).</p>
-
-<p>La méthode <code>toString()</code> lèvera une exception {{jsxref("TypeError")}} (« Function.prototype.toString called on incompatible object ») si la valeur this n'est pas un objet <code>Function</code>.</p>
-
-<pre class="example-bad brush: js">Function.prototype.toString.call("toto"); // TypeError
-</pre>
-
-<p>Si la méthode <code>toString()</code> est appelée sur des fonctions natives qui ne sont pas définies dans le script, <code>toString()</code> renvoie une chaîne de caractères indiquant le caractère natif :</p>
-
-<pre class="brush: js">Math.abs.toString();
-
-"function abs() {
-    [native code]
-}"</pre>
-
-<p>Si la méthode <code>toString()</code> est appelée sur une fonction créée avec le constructeur <code>Function</code>, <code>toString()</code> renverra le code source d'une fonction intitulée <code>anonymous</code> et utilisera les paramètres et le corps de la fonction fournis.</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES1')}}</td>
-   <td>{{Spec2('ES1')}}</td>
-   <td>Définition initiale. Implémentée avec JavaScript 1.1.</td>
-  </tr>
-  <tr>
-   <td><code><a href="https://tc39.github.io/Function-prototype-toString-revision/#sec-introduction">Function.prototype.toString()</a></code></td>
-   <td>Brouillon</td>
-   <td>Standardise la chaîne de caractères utilisée pour les fonctions natives ainsi que la gestion des fins de ligne.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-function.prototype.tostring', 'Function.prototype.toString')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td>Critères supplémentaires ajoutés sur la représentation de la chaîne.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-function.prototype.tostring', 'Function.prototype.toString')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Function.toString")}}</p>
-
-<h2 id="Notes_spécifiques_à_Firefox">Notes spécifiques à Firefox</h2>
-
-<ul>
- <li>À partir de Firefox 17.0, <code>Function.prototype.toString()</code> a été implémenté en sauvegardant le code source de la fonction. La méthode utilisant la décompilation a été retirée et le paramètre <code>indentation</code> n'est donc plus nécessaire. Pour plus d'informations, voir {{bug("761723")}}.</li>
- <li>À partir de Firefox 38 et jusqu'à Firefox 63, <code>Function.prototype.toString()</code> levait une exception pour les {{jsxref("Proxy")}} (cf. {{bug(1100936)}} et {{bug(1440468)}}).</li>
-</ul>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Object.prototype.toString()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/function/tostring/index.md b/files/fr/web/javascript/reference/global_objects/function/tostring/index.md
new file mode 100644
index 0000000000..0eac5c45c6
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/function/tostring/index.md
@@ -0,0 +1,71 @@
+---
+title: Function.prototype.toString()
+slug: Web/JavaScript/Reference/Global_Objects/Function/toString
+tags:
+  - Function
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Function/toString
+original_slug: Web/JavaScript/Reference/Objets_globaux/Function/toString
+---
+{{JSRef}}
+
+La méthode **`toString()`** renvoie une chaîne de caractères représentant le code source de la fonction.
+
+{{EmbedInteractiveExample("pages/js/function-tostring.html")}}
+
+## Syntaxe
+
+    function.toString(indentation)
+
+### Valeur de retour
+
+Une chaîne de caractères qui représente le code source de la fonction.
+
+## Description
+
+L'objet {{jsxref("Function")}} redéfinit la méthode {{jsxref("Object.prototype.toString", "toString")}} de l'objet {{jsxref("Object")}} ; il n'hérite donc pas de {{jsxref("Object.prototype.toString")}}. Pour les objets {{jsxref("Function")}}, la méthode `toString` renvoie une chaîne de caractères représentant l'objet sous la forme d'une déclaration de fonction. Pour ce faire, `toString` décompile la fonction pour renvoyer une chaîne qui contient le mot-clé `function`, la liste des arguments, les accolades et la source correspondant au corps de la fonction.
+
+Le moteur JavaScript appelle la méthode `toString` automatiquement lorsqu'un objet {{jsxref("Function")}} doit être représenté textuellement (par exemple lorsqu'une fonction doit être concaténée avec une chaîne de caractères).
+
+La méthode `toString()` lèvera une exception {{jsxref("TypeError")}} (« Function.prototype.toString called on incompatible object ») si la valeur this n'est pas un objet `Function`.
+
+```js example-bad
+Function.prototype.toString.call("toto"); // TypeError
+```
+
+Si la méthode `toString()` est appelée sur des fonctions natives qui ne sont pas définies dans le script, `toString()` renvoie une chaîne de caractères indiquant le caractère natif :
+
+```js
+Math.abs.toString();
+
+"function abs() {
+    [native code]
+}"
+```
+
+Si la méthode `toString()` est appelée sur une fonction créée avec le constructeur `Function`, `toString()` renverra le code source d'une fonction intitulée `anonymous` et utilisera les paramètres et le corps de la fonction fournis.
+
+## Spécifications
+
+| Spécification                                                                                                            | État                         | Commentaires                                                                                                    |
+| ------------------------------------------------------------------------------------------------------------------------ | ---------------------------- | --------------------------------------------------------------------------------------------------------------- |
+| {{SpecName('ES1')}}                                                                                                 | {{Spec2('ES1')}}         | Définition initiale. Implémentée avec JavaScript 1.1.                                                           |
+| [`Function.prototype.toString()`](https://tc39.github.io/Function-prototype-toString-revision/#sec-introduction)         | Brouillon                    | Standardise la chaîne de caractères utilisée pour les fonctions natives ainsi que la gestion des fins de ligne. |
+| {{SpecName('ES6', '#sec-function.prototype.tostring', 'Function.prototype.toString')}}     | {{Spec2('ES6')}}         | Critères supplémentaires ajoutés sur la représentation de la chaîne.                                            |
+| {{SpecName('ESDraft', '#sec-function.prototype.tostring', 'Function.prototype.toString')}} | {{Spec2('ESDraft')}} |                                                                                                                 |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Function.toString")}}
+
+## Notes spécifiques à Firefox
+
+- À partir de Firefox 17.0, `Function.prototype.toString()` a été implémenté en sauvegardant le code source de la fonction. La méthode utilisant la décompilation a été retirée et le paramètre `indentation` n'est donc plus nécessaire. Pour plus d'informations, voir {{bug("761723")}}.
+- À partir de Firefox 38 et jusqu'à Firefox 63, `Function.prototype.toString()` levait une exception pour les {{jsxref("Proxy")}} (cf. {{bug(1100936)}} et {{bug(1440468)}}).
+
+## Voir aussi
+
+- {{jsxref("Object.prototype.toString()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/generator/index.html b/files/fr/web/javascript/reference/global_objects/generator/index.html
deleted file mode 100644
index 646ecd415a..0000000000
--- a/files/fr/web/javascript/reference/global_objects/generator/index.html
+++ /dev/null
@@ -1,134 +0,0 @@
----
-title: Generator
-slug: Web/JavaScript/Reference/Global_Objects/Generator
-tags:
-  - ECMAScript 2015
-  - Generator
-  - JavaScript
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Generator
-original_slug: Web/JavaScript/Reference/Objets_globaux/Generator
----
-<div>{{JSRef}}</div>
-
-<p>L'objet <code><strong>Generator</strong></code> est renvoyé par une {{jsxref("Instructions/function*","fonction génératrice","",1)}}, c'est à la fois <a href="/fr/docs/Web/JavaScript/Reference/Les_protocoles_iteration#Le_protocole_%C2%AB_it%C3%A9rateur_%C2%BB">un itérateur</a> et <a href="/fr/docs/Web/JavaScript/Reference/Les_protocoles_iteration#Le_protocole_%C2%AB_it%C3%A9rable_%C2%BB">un itérable</a>.</p>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">function* gen() {
-  yield 1;
-  yield 2;
-  yield 3;
-}
-
-var g = gen(); // "Generator { }"</pre>
-
-<h2 id="Méthodes">Méthodes</h2>
-
-<dl>
- <dt>{{jsxref("Generator.prototype.next()")}}</dt>
- <dd>Renvoie une valeur générée par l'expression {{jsxref("Opérateurs/yield", "yield")}}.</dd>
- <dt>{{jsxref("Generator.prototype.return()")}}</dt>
- <dd>Renvoie la valeur donnée et termine le générateur.</dd>
- <dt>{{jsxref("Generator.prototype.throw()")}}</dt>
- <dd>Lève une exception dans un générateur. Cette opération termine le générateur, sauf si l'exception est interceptée dans le générateur.</dd>
-</dl>
-
-<h2 id="Exemple">Exemple</h2>
-
-<h3 id="Un_itérateur_infini">Un itérateur infini</h3>
-
-<pre class="brush: js">function* idMaker(){
-    var index = 0;
-    while(true)
-        yield index++;
-}
-
-var gen = idMaker(); // "Generator { }"
-
-console.log(gen.next().value); // 0
-console.log(gen.next().value); // 1
-console.log(gen.next().value); // 2
-// ...</pre>
-
-<h2 id="Générateurs_historiques">Générateurs historiques</h2>
-
-<p>Firefox (SpiderMonkey) implémente également une version antérieure pour les générateurs avec <a href="/fr/docs/Web/JavaScript/New_in_JavaScript/1.7">JavaScript 1.7</a>. Pour cette syntaxe, il n'y a pas besoin d'utiliser l'astérisque dans la déclaration de la fonction, il suffit d'utiliser le mot-clé <code>yield</code> dans le corps de la fonction. Les générateurs historiques sont une fonctionnalité dépréciée et seront supprimés à l'avenir ({{bug(1083482)}}), il est fortement déconseillé de les utiliser.</p>
-
-<h3 id="Méthodes_pour_les_générateurs_historiques">Méthodes pour les générateurs historiques</h3>
-
-<dl>
- <dt><code>Generator.prototype.next() </code>{{non-standard_inline}}</dt>
- <dd>Renvoie une valeur générée par l'expression {{jsxref("Opérateurs/yield", "yield")}}. Cette méthode correspond à <code>next()</code> pour les générateurs ES2015.</dd>
- <dt><code>Generator.prototype.close()</code> {{non-standard_inline}}</dt>
- <dd>Clôture le générateur, tout appel ultérieur à <code>next()</code> renverra une exception {{jsxref("StopIteration")}}. Cela correspond à la méthode <code>return()</code> pour les générateurs ES2015.</dd>
- <dt><code>Generator.prototype.send()</code> {{non-standard_inline}}</dt>
- <dd>Utilisée pour envoyer une valeur à un générateur. La valeur est renvoyée avec une expression {{jsxref("Opérateurs/yield", "yield")}} et renvoie une valeur générée par la prochaine expression {{jsxref("Opérateurs/yield", "yield")}}. <code>send(x)</code> correspond à <code>next(x)</code> pour les générateurs ES2015.</dd>
- <dt><strong><code>Generator.</code></strong><code>prototype.</code><strong><code>throw()</code> </strong> {{non-standard_inline}}</dt>
- <dd>Lève une exception au sein d'un générateur. Cela correspond à la méthode <code>throw()</code> pour les générateurs ES2015.</dd>
-</dl>
-
-<h3 id="Exemple_utilisant_un_générateur_historique">Exemple utilisant un générateur historique</h3>
-
-<pre class="brush: js">function* fibonacci() {
-  var a = yield 1;
-  yield a * 2;
-}
-
-var it = fibonacci();
-console.log(it);          // "Generator {  }"
-console.log(it.next());   // 1
-console.log(it.send(10)); // 20
-console.log(it.close());  // undefined
-console.log(it.next());   // throws StopIteration (le générateur est clôturé)
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-generator-objects', 'Generator objects')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-generator-objects', 'Generator objects')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Generator")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<h3 id="Générateurs_historiques_2">Générateurs historiques</h3>
-
-<ul>
- <li>{{jsxref("Instructions/Fonction_génératrice_historique", "Fonction génératrice historique", "", 1)}}</li>
- <li>{{jsxref("Opérateurs/function*", "L'expression d'un générateur historique", "", 1)}}</li>
- <li>{{jsxref("StopIteration")}}</li>
- <li><a href="/fr/docs/Web/JavaScript/Guide/Le_protocole_itérateur_historique">Le protocole itérateur historique</a></li>
-</ul>
-
-<h3 id="Générateurs_ES2015">Générateurs ES2015</h3>
-
-<ul>
- <li>{{jsxref("Fonctions", "Fonctions", "", 1)}}</li>
- <li>{{jsxref("Instructions/function", "function")}}</li>
- <li>L'expression {{jsxref("L_opérateur_function", "function")}}</li>
- <li>{{jsxref("Function")}}</li>
- <li>{{jsxref("Instructions/function*", "function*")}}</li>
- <li>L'expression {{jsxref("Opérateurs/function*", "function*")}}</li>
- <li>{{jsxref("GeneratorFunction")}}</li>
- <li><a href="/fr/docs/Web/JavaScript/Guide/Le_protocole_iterator">Le protocole Iterator</a></li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/generator/index.md b/files/fr/web/javascript/reference/global_objects/generator/index.md
new file mode 100644
index 0000000000..7540ca763f
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/generator/index.md
@@ -0,0 +1,114 @@
+---
+title: Generator
+slug: Web/JavaScript/Reference/Global_Objects/Generator
+tags:
+  - ECMAScript 2015
+  - Generator
+  - JavaScript
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Generator
+original_slug: Web/JavaScript/Reference/Objets_globaux/Generator
+---
+{{JSRef}}
+
+L'objet **`Generator`** est renvoyé par une {{jsxref("Instructions/function*","fonction génératrice","",1)}}, c'est à la fois [un itérateur](/fr/docs/Web/JavaScript/Reference/Les_protocoles_iteration#Le_protocole_%C2%AB_it%C3%A9rateur_%C2%BB) et [un itérable](/fr/docs/Web/JavaScript/Reference/Les_protocoles_iteration#Le_protocole_%C2%AB_it%C3%A9rable_%C2%BB).
+
+## Syntaxe
+
+    function* gen() {
+      yield 1;
+      yield 2;
+      yield 3;
+    }
+
+    var g = gen(); // "Generator { }"
+
+## Méthodes
+
+- {{jsxref("Generator.prototype.next()")}}
+  - : Renvoie une valeur générée par l'expression {{jsxref("Opérateurs/yield", "yield")}}.
+- {{jsxref("Generator.prototype.return()")}}
+  - : Renvoie la valeur donnée et termine le générateur.
+- {{jsxref("Generator.prototype.throw()")}}
+  - : Lève une exception dans un générateur. Cette opération termine le générateur, sauf si l'exception est interceptée dans le générateur.
+
+## Exemple
+
+### Un itérateur infini
+
+```js
+function* idMaker(){
+    var index = 0;
+    while(true)
+        yield index++;
+}
+
+var gen = idMaker(); // "Generator { }"
+
+console.log(gen.next().value); // 0
+console.log(gen.next().value); // 1
+console.log(gen.next().value); // 2
+// ...
+```
+
+## Générateurs historiques
+
+Firefox (SpiderMonkey) implémente également une version antérieure pour les générateurs avec [JavaScript 1.7](/fr/docs/Web/JavaScript/New_in_JavaScript/1.7). Pour cette syntaxe, il n'y a pas besoin d'utiliser l'astérisque dans la déclaration de la fonction, il suffit d'utiliser le mot-clé `yield` dans le corps de la fonction. Les générateurs historiques sont une fonctionnalité dépréciée et seront supprimés à l'avenir ({{bug(1083482)}}), il est fortement déconseillé de les utiliser.
+
+### Méthodes pour les générateurs historiques
+
+- `Generator.prototype.next() `{{non-standard_inline}}
+  - : Renvoie une valeur générée par l'expression {{jsxref("Opérateurs/yield", "yield")}}. Cette méthode correspond à `next()` pour les générateurs ES2015.
+- `Generator.prototype.close()` {{non-standard_inline}}
+  - : Clôture le générateur, tout appel ultérieur à `next()` renverra une exception {{jsxref("StopIteration")}}. Cela correspond à la méthode `return()` pour les générateurs ES2015.
+- `Generator.prototype.send()` {{non-standard_inline}}
+  - : Utilisée pour envoyer une valeur à un générateur. La valeur est renvoyée avec une expression {{jsxref("Opérateurs/yield", "yield")}} et renvoie une valeur générée par la prochaine expression {{jsxref("Opérateurs/yield", "yield")}}. `send(x)` correspond à `next(x)` pour les générateurs ES2015.
+- **`Generator.`**`prototype.`**`throw()` **{{non-standard_inline}}
+  - : Lève une exception au sein d'un générateur. Cela correspond à la méthode `throw()` pour les générateurs ES2015.
+
+### Exemple utilisant un générateur historique
+
+```js
+function* fibonacci() {
+  var a = yield 1;
+  yield a * 2;
+}
+
+var it = fibonacci();
+console.log(it);          // "Generator {  }"
+console.log(it.next());   // 1
+console.log(it.send(10)); // 20
+console.log(it.close());  // undefined
+console.log(it.next());   // throws StopIteration (le générateur est clôturé)
+```
+
+## Spécifications
+
+| Spécification                                                                                | État                         | Commentaires         |
+| -------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName('ES2015', '#sec-generator-objects', 'Generator objects')}} | {{Spec2('ES2015')}}     | Définition initiale. |
+| {{SpecName('ESDraft', '#sec-generator-objects', 'Generator objects')}} | {{Spec2('ESDraft')}} |                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Generator")}}
+
+## Voir aussi
+
+### Générateurs historiques
+
+- {{jsxref("Instructions/Fonction_génératrice_historique", "Fonction génératrice historique", "", 1)}}
+- {{jsxref("Opérateurs/function*", "L'expression d'un générateur historique", "", 1)}}
+- {{jsxref("StopIteration")}}
+- [Le protocole itérateur historique](/fr/docs/Web/JavaScript/Guide/Le_protocole_itérateur_historique)
+
+### Générateurs ES2015
+
+- {{jsxref("Fonctions", "Fonctions", "", 1)}}
+- {{jsxref("Instructions/function", "function")}}
+- L'expression {{jsxref("L_opérateur_function", "function")}}
+- {{jsxref("Function")}}
+- {{jsxref("Instructions/function*", "function*")}}
+- L'expression {{jsxref("Opérateurs/function*", "function*")}}
+- {{jsxref("GeneratorFunction")}}
+- [Le protocole Iterator](/fr/docs/Web/JavaScript/Guide/Le_protocole_iterator)
diff --git a/files/fr/web/javascript/reference/global_objects/generator/next/index.html b/files/fr/web/javascript/reference/global_objects/generator/next/index.html
deleted file mode 100644
index f88fc2d356..0000000000
--- a/files/fr/web/javascript/reference/global_objects/generator/next/index.html
+++ /dev/null
@@ -1,113 +0,0 @@
----
-title: Generator.prototype.next()
-slug: Web/JavaScript/Reference/Global_Objects/Generator/next
-tags:
-  - ECMAScript 2015
-  - Generator
-  - JavaScript
-  - Méthode
-  - Prototype
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Generator/next
-original_slug: Web/JavaScript/Reference/Objets_globaux/Generator/next
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <code><strong>next</strong></code><strong><code>()</code></strong> renvoie un objet possédant deux propriétés <code>done</code> et <code>value</code>. Cette méthode peut également recevoir un paramètre pour envoyer une valeur au générateur.</p>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>gen</var>.next(<var>valeur</var>)</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>valeur</code></dt>
- <dd>La valeur à envoyer au générateur. La valeur sera affectée comme résultat d'une expression <code>yield</code>. Autrement dit, lorsque le générateur contient une expression de la forme <code>variable = yield expression</code>, c'est l'argument <code>valeur</code> qui sera affecté à <code>variable</code><em>.</em></dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Un {{jsxref("Object")}} possédant deux propriétés :</p>
-
-<ul>
- <li><code>done</code> (un booléen)
-
-  <ul>
-   <li>vaut <code>true</code> si l'itérateur a atteint la fin de la série sur laquelle il itère. Dans ce cas, la propriété <code>value</code> définit la valeur de retour pour l'itérateur.</li>
-   <li>vaut <code>false</code> si l'itérateur a pu fournir la prochaine valeur de la série. C'est la valeur par défaut si la propriété <code>done</code> n'est pas définie.</li>
-  </ul>
- </li>
- <li><code>value</code> - n'importe quelle valeur JavaScript renvoyée par l'itérateur. Cette propriété peut être absente lorsque <code>done</code> vaut <code>true</code>.</li>
-</ul>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Utiliser_next()">Utiliser <code>next()</code></h3>
-
-<p>L'exemple suivant illustre comment utiliser un générateur simple et les objets renvoyés par la méthode <code>next</code> :</p>
-
-<pre class="brush: js">function* gen() {
-  yield 1;
-  yield 2;
-  yield 3;
-}
-
-var g = gen(); // "Generator { }"
-g.next();      // "Object { value: 1, done: false }"
-g.next();      // "Object { value: 2, done: false }"
-g.next();      // "Object { value: 3, done: false }"
-g.next();      // "Object { value: undefined, done: true }"
-</pre>
-
-<h3 id="Envoyer_des_valeurs_à_un_générateur">Envoyer des valeurs à un générateur</h3>
-
-<p>Ici, <code>next</code> est appelé avec une valeur. On notera ici que le premier appel n'affiche rien car le générateur n'a encore rien généré.</p>
-
-<pre class="brush: js">function* gen() {
-  while(true) {
-    var value = yield null;
-    console.log(value);
-  }
-}
-
-var g = gen();
-g.next(1);
-// "{ value: null, done: false }"
-g.next(2);
-// 2
-// "{ value: null, done: false }"
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-generator.prototype.next', 'Generator.prototype.next')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-generator.prototype.next', 'Generator.prototype.next')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Generator.next")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Instructions/function*","function*")}}</li>
- <li><a href="/fr/docs/Web/JavaScript/Guide/iterateurs_et_generateurs">Les itérateurs et générateurs</a></li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/generator/next/index.md b/files/fr/web/javascript/reference/global_objects/generator/next/index.md
new file mode 100644
index 0000000000..098448211a
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/generator/next/index.md
@@ -0,0 +1,92 @@
+---
+title: Generator.prototype.next()
+slug: Web/JavaScript/Reference/Global_Objects/Generator/next
+tags:
+  - ECMAScript 2015
+  - Generator
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Generator/next
+original_slug: Web/JavaScript/Reference/Objets_globaux/Generator/next
+---
+{{JSRef}}
+
+La méthode **`next`\*\***`()`\*\* renvoie un objet possédant deux propriétés `done` et `value`. Cette méthode peut également recevoir un paramètre pour envoyer une valeur au générateur.
+
+## Syntaxe
+
+    gen.next(valeur)
+
+### Paramètres
+
+- `valeur`
+  - : La valeur à envoyer au générateur. La valeur sera affectée comme résultat d'une expression `yield`. Autrement dit, lorsque le générateur contient une expression de la forme `variable = yield expression`, c'est l'argument `valeur` qui sera affecté à `variable`_._
+
+### Valeur de retour
+
+Un {{jsxref("Object")}} possédant deux propriétés :
+
+- `done` (un booléen)
+
+  - vaut `true` si l'itérateur a atteint la fin de la série sur laquelle il itère. Dans ce cas, la propriété `value` définit la valeur de retour pour l'itérateur.
+  - vaut `false` si l'itérateur a pu fournir la prochaine valeur de la série. C'est la valeur par défaut si la propriété `done` n'est pas définie.
+
+- `value` - n'importe quelle valeur JavaScript renvoyée par l'itérateur. Cette propriété peut être absente lorsque `done` vaut `true`.
+
+## Exemples
+
+### Utiliser `next()`
+
+L'exemple suivant illustre comment utiliser un générateur simple et les objets renvoyés par la méthode `next` :
+
+```js
+function* gen() {
+  yield 1;
+  yield 2;
+  yield 3;
+}
+
+var g = gen(); // "Generator { }"
+g.next();      // "Object { value: 1, done: false }"
+g.next();      // "Object { value: 2, done: false }"
+g.next();      // "Object { value: 3, done: false }"
+g.next();      // "Object { value: undefined, done: true }"
+```
+
+### Envoyer des valeurs à un générateur
+
+Ici, `next` est appelé avec une valeur. On notera ici que le premier appel n'affiche rien car le générateur n'a encore rien généré.
+
+```js
+function* gen() {
+  while(true) {
+    var value = yield null;
+    console.log(value);
+  }
+}
+
+var g = gen();
+g.next(1);
+// "{ value: null, done: false }"
+g.next(2);
+// 2
+// "{ value: null, done: false }"
+```
+
+## Spécifications
+
+| Spécification                                                                                                    | État                         | Commentaires         |
+| ---------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName('ES2015', '#sec-generator.prototype.next', 'Generator.prototype.next')}} | {{Spec2('ES2015')}}     | Définition initiale. |
+| {{SpecName('ESDraft', '#sec-generator.prototype.next', 'Generator.prototype.next')}} | {{Spec2('ESDraft')}} |                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Generator.next")}}
+
+## Voir aussi
+
+- {{jsxref("Instructions/function*","function*")}}
+- [Les itérateurs et générateurs](/fr/docs/Web/JavaScript/Guide/iterateurs_et_generateurs)
diff --git a/files/fr/web/javascript/reference/global_objects/generator/return/index.html b/files/fr/web/javascript/reference/global_objects/generator/return/index.html
deleted file mode 100644
index 3ddfa7f463..0000000000
--- a/files/fr/web/javascript/reference/global_objects/generator/return/index.html
+++ /dev/null
@@ -1,101 +0,0 @@
----
-title: Generator.prototype.return()
-slug: Web/JavaScript/Reference/Global_Objects/Generator/return
-tags:
-  - ECMAScript 2015
-  - Generator
-  - JavaScript
-  - Méthode
-  - Prototype
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Generator/return
-original_slug: Web/JavaScript/Reference/Objets_globaux/Generator/return
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <code><strong>return</strong></code><strong><code>()</code></strong> renvoie la valeur fournie et termine le générateur.</p>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>gen</var>.return(<var>valeur</var>)</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>valeur</code></dt>
- <dd>La valeur à renvoyer</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>La valeur fournie comme argument.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Utiliser_return()">Utiliser <code>return()</code></h3>
-
-<p>L'exemple suivant illustre une utilisation simple d'un générateur et de la méthode <code>return()</code>.</p>
-
-<pre class="brush: js">function* gen() {
-  yield 1;
-  yield 2;
-  yield 3;
-}
-
-var g = gen();
-
-g.next();         // { value: 1, done: false }
-g.return("toto"); // { value: "toto", done: true }
-g.next();         // { value: undefined, done: true }
-</pre>
-
-<div class="note">
-<p><strong>Note :</strong> Si <code>done</code> vaut <code>true</code>, <code>return(valeur)</code> renverra la même chose que <code>next()</code> : <code>undefined</code>. Si aucun argument n'est fourni, la propriété <code>value</code> de l'objet renvoyé sera la même qu'avec un appel à <code>.next()</code>. Si un argument est fourni, c'est lui qui sera utilisé comme valeur pour l'attribut <code>value</code> du résultat.</p>
-
-<pre class="brush: js">function* gen() {
-  yield 1;
-  yield 2;
-  yield 3;
-}
-var g = gen();
-console.log(g.next()); // { value: 1; done: false}
-console.log(g.next()); // { value: 2; done: false}
-console.log(g.next()); // { value: 3; done: false}
-console.log(g.next()); // { value: undefined; done: true}
-console.log(g.return()); // { value: undefined; done: true}
-console.log(g.return(1)); // { value: 1; done: true}
-
-</pre>
-</div>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-generator.prototype.return', 'Generator.prototype.return')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-generator.prototype.return', 'Generator.prototype.return')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Generator.return")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/function*">function*</a></code></li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/generator/return/index.md b/files/fr/web/javascript/reference/global_objects/generator/return/index.md
new file mode 100644
index 0000000000..6beafe949c
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/generator/return/index.md
@@ -0,0 +1,81 @@
+---
+title: Generator.prototype.return()
+slug: Web/JavaScript/Reference/Global_Objects/Generator/return
+tags:
+  - ECMAScript 2015
+  - Generator
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Generator/return
+original_slug: Web/JavaScript/Reference/Objets_globaux/Generator/return
+---
+{{JSRef}}
+
+La méthode **`return`\*\***`()`\*\* renvoie la valeur fournie et termine le générateur.
+
+## Syntaxe
+
+    gen.return(valeur)
+
+### Paramètres
+
+- `valeur`
+  - : La valeur à renvoyer
+
+### Valeur de retour
+
+La valeur fournie comme argument.
+
+## Exemples
+
+### Utiliser `return()`
+
+L'exemple suivant illustre une utilisation simple d'un générateur et de la méthode `return()`.
+
+```js
+function* gen() {
+  yield 1;
+  yield 2;
+  yield 3;
+}
+
+var g = gen();
+
+g.next();         // { value: 1, done: false }
+g.return("toto"); // { value: "toto", done: true }
+g.next();         // { value: undefined, done: true }
+```
+
+> **Note :** Si `done` vaut `true`, `return(valeur)` renverra la même chose que `next()` : `undefined`. Si aucun argument n'est fourni, la propriété `value` de l'objet renvoyé sera la même qu'avec un appel à `.next()`. Si un argument est fourni, c'est lui qui sera utilisé comme valeur pour l'attribut `value` du résultat.
+>
+> ```js
+> function* gen() {
+>   yield 1;
+>   yield 2;
+>   yield 3;
+> }
+> var g = gen();
+> console.log(g.next()); // { value: 1; done: false}
+> console.log(g.next()); // { value: 2; done: false}
+> console.log(g.next()); // { value: 3; done: false}
+> console.log(g.next()); // { value: undefined; done: true}
+> console.log(g.return()); // { value: undefined; done: true}
+> console.log(g.return(1)); // { value: 1; done: true}
+> ```
+
+## Spécifications
+
+| Spécification                                                                                                        | État                         | Commentaires         |
+| -------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName('ES2015', '#sec-generator.prototype.return', 'Generator.prototype.return')}} | {{Spec2('ES2015')}}     | Définition initiale. |
+| {{SpecName('ESDraft', '#sec-generator.prototype.return', 'Generator.prototype.return')}} | {{Spec2('ESDraft')}} |                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Generator.return")}}
+
+## Voir aussi
+
+- [`function*`](/fr/docs/Web/JavaScript/Reference/Instructions/function*)
diff --git a/files/fr/web/javascript/reference/global_objects/generator/throw/index.html b/files/fr/web/javascript/reference/global_objects/generator/throw/index.html
deleted file mode 100644
index 547c877869..0000000000
--- a/files/fr/web/javascript/reference/global_objects/generator/throw/index.html
+++ /dev/null
@@ -1,98 +0,0 @@
----
-title: Generator.prototype.throw()
-slug: Web/JavaScript/Reference/Global_Objects/Generator/throw
-tags:
-  - ECMAScript 2015
-  - Generator
-  - JavaScript
-  - Méthode
-  - Prototype
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Generator/throw
-original_slug: Web/JavaScript/Reference/Objets_globaux/Generator/throw
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <code><strong>throw</strong></code><strong><code>()</code></strong> lève une erreur dans un générateur.</p>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>gen</var>.throw(<var>exception</var>)</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>exception</code></dt>
- <dd>L'exception à lever. On préfèrera généralement utiliser un objet qui est une instance d'{{jsxref("Error")}}.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Un {{jsxref("Object")}} avec deux propriétés :</p>
-
-<ul>
- <li><code>done</code> (un booléen)
-
-  <ul>
-   <li>Qui vaut <code>true</code> lorsque l'itérateur a fini de parcourir la suite. Dans ce cas, <code>value</code> correspondra éventuellement à la valeur de retour de l'itérateur.</li>
-   <li>Qui vaut <code>false</code> si l'itérateur a pu produire la prochaine valeur de la série.</li>
-  </ul>
- </li>
- <li><code>value</code> : une valeur renvoyée par l'itérateur. Lorsque <code>done</code> vaut <code>true</code>, cette valeur peut être absente ou valoir <code>undefined</code>.</li>
-</ul>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Utiliser_throw()">Utiliser <code>throw()</code></h3>
-
-<p>Dans l'exemple suivant, on utilise un générateur simple et on génère une exception grâce à la méthode <code>throw()</code>. Une exception peut être interceptée avec un bloc {{jsxref("Instructions/try...catch","try...catch")}} usuel.</p>
-
-<pre class="brush: js">function* gen() {
-  while(true) {
-    try {
-       yield 42;
-    } catch(e) {
-      console.log("Erreur interceptée !");
-    }
-  }
-}
-
-var g = gen();
-g.next();
-// { value: 42, done: false }
-g.throw(new Error("Quelque chose s'est mal passé"));
-// "Erreur interceptée !"
-// { value: 42, done: false }
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-generator.prototype.throw', 'Generator.prototype.throw')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-generator.prototype.throw', 'Generator.prototype.throw')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Generator.throw")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Instructions/function*","function*")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/generator/throw/index.md b/files/fr/web/javascript/reference/global_objects/generator/throw/index.md
new file mode 100644
index 0000000000..42d63db17b
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/generator/throw/index.md
@@ -0,0 +1,76 @@
+---
+title: Generator.prototype.throw()
+slug: Web/JavaScript/Reference/Global_Objects/Generator/throw
+tags:
+  - ECMAScript 2015
+  - Generator
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Generator/throw
+original_slug: Web/JavaScript/Reference/Objets_globaux/Generator/throw
+---
+{{JSRef}}
+
+La méthode **`throw`\*\***`()`\*\* lève une erreur dans un générateur.
+
+## Syntaxe
+
+    gen.throw(exception)
+
+### Paramètres
+
+- `exception`
+  - : L'exception à lever. On préfèrera généralement utiliser un objet qui est une instance d'{{jsxref("Error")}}.
+
+### Valeur de retour
+
+Un {{jsxref("Object")}} avec deux propriétés :
+
+- `done` (un booléen)
+
+  - Qui vaut `true` lorsque l'itérateur a fini de parcourir la suite. Dans ce cas, `value` correspondra éventuellement à la valeur de retour de l'itérateur.
+  - Qui vaut `false` si l'itérateur a pu produire la prochaine valeur de la série.
+
+- `value` : une valeur renvoyée par l'itérateur. Lorsque `done` vaut `true`, cette valeur peut être absente ou valoir `undefined`.
+
+## Exemples
+
+### Utiliser `throw()`
+
+Dans l'exemple suivant, on utilise un générateur simple et on génère une exception grâce à la méthode `throw()`. Une exception peut être interceptée avec un bloc {{jsxref("Instructions/try...catch","try...catch")}} usuel.
+
+```js
+function* gen() {
+  while(true) {
+    try {
+       yield 42;
+    } catch(e) {
+      console.log("Erreur interceptée !");
+    }
+  }
+}
+
+var g = gen();
+g.next();
+// { value: 42, done: false }
+g.throw(new Error("Quelque chose s'est mal passé"));
+// "Erreur interceptée !"
+// { value: 42, done: false }
+```
+
+## Spécifications
+
+| Spécification                                                                                                        | Statut                       | Commentaires         |
+| -------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName('ES2015', '#sec-generator.prototype.throw', 'Generator.prototype.throw')}}     | {{Spec2('ES2015')}}     | Définition initiale. |
+| {{SpecName('ESDraft', '#sec-generator.prototype.throw', 'Generator.prototype.throw')}} | {{Spec2('ESDraft')}} |                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Generator.throw")}}
+
+## Voir aussi
+
+- {{jsxref("Instructions/function*","function*")}}
diff --git a/files/fr/web/javascript/reference/global_objects/generatorfunction/index.html b/files/fr/web/javascript/reference/global_objects/generatorfunction/index.html
deleted file mode 100644
index 8f92be2961..0000000000
--- a/files/fr/web/javascript/reference/global_objects/generatorfunction/index.html
+++ /dev/null
@@ -1,112 +0,0 @@
----
-title: GeneratorFunction
-slug: Web/JavaScript/Reference/Global_Objects/GeneratorFunction
-tags:
-  - Constructor
-  - ECMAScript 2015
-  - GeneratorFunction
-  - Iterator
-  - JavaScript
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/GeneratorFunction
-original_slug: Web/JavaScript/Reference/Objets_globaux/GeneratorFunction
----
-<div>{{JSRef}}</div>
-
-<p>Le constructeur <strong><code>GeneratorFunction</code></strong> permet de créer un nouvel objet qui est une {{jsxref("Instructions/function*", "fonction génératrice","",1)}}. En JavaScript, chaque générateur (ou fonction génératrice) est un objet <code>GeneratorFunction</code>.</p>
-
-<p>L'objet <code>GeneratorFunction</code> n'est pas un objet global. Il peut être obtenu en exécutant le code suivant :</p>
-
-<pre class="brush: js">Object.getPrototypeOf(function*(){}).constructor
-</pre>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">new GeneratorFunction ([<var>arg1</var>[, <var>arg2</var>[, ...<var>argN</var>]],] corpsFonction)</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>arg1, arg2, ... arg<em>N</em></code></dt>
- <dd>Les noms à utiliser pour les arguments formellement déclarés. Chacun doit être une chaîne de caractères correspondant à un identifiant JavaScript valide ou une liste de telles chaînes séparées par des virgules. Par exemple, on peut avoir "<code>x</code>", "<code>maValeur</code>", ou "<code>a,b</code>".</dd>
- <dt><code>corpsFonction</code></dt>
- <dd>Une chaîne qui contient les instructions JavaScript qui composent la définition de la fonction.</dd>
-</dl>
-
-<h2 id="Description">Description</h2>
-
-<p>Les {{jsxref("Instructions/function*", "fonctions génératrices","",1)}} créées avec le constructeur <code>GeneratorFunction</code> sont analysés lorsque la fonction est crée. Cela est moins efficace que de déclarer un générateur avec une expression {{jsxref("Statements/function*", "function*")}} puis de l'appeler car ces fonctions sont analysées avec le reste du code (ce qui permet au moteur JavaScript d'effectuer certaines optimisations).</p>
-
-<p>Tous les arguments passés à la fonction sont traités par la suite avec les noms des identifiants utilisés pour les noms des paramètres lors de la création de la fonction et avec cet ordre là.</p>
-
-<div class="note">
-<p><strong>Note :</strong> Les {{jsxref("Instructions/function*", "générateurs","",1)}} créés avec le constructeur <code>GeneratorFunction</code> ne créent pas de fermetures avec leurs contextes de création. Ils sont toujours créés dans la portée globale. Lorsqu'ils sont exécutés, ils n'ont accès qu'à leurs variables locales et aux variables globales et ils n'ont pas accès aux variables de la portée où a eu lieu l'appel à <code>GeneratorFunction</code>. Ce comportement est différent de celui obtenu lorsqu'on appelle {{jsxref("Objets_globaux/eval", "eval")}} avec du code correspondant à une expression de générateur.</p>
-</div>
-
-<p>L'appel du constructeur <code>GeneratorFunction</code> comme fonction (c'est-à-dire sans utiliser l'opérateur <code>new</code>) aura le même effet que si celui-ci est invoqué comme constructeur.</p>
-
-<h2 id="Propriétés">Propriétés</h2>
-
-<dl>
- <dt><code><strong>GeneratorFunction.length</strong></code></dt>
- <dd>La propriété de longueur du constructeur <code>GeneratorFunction</code> qui vaut 1.</dd>
- <dt>{{jsxref("GeneratorFunction.prototype")}}</dt>
- <dd>Le prototype du constructeur qui permet d'ajouter des propriétés à tous les générateurs.</dd>
-</dl>
-
-<h2 id="Le_prototype_de_GeneratorFunction">Le prototype de <code>GeneratorFunction</code></h2>
-
-<h3 id="Propriétés_2">Propriétés</h3>
-
-<div>{{page('/fr/docs/Web/JavaScript/Reference/Objets_globaux/GeneratorFunction/prototype', 'Properties')}}</div>
-
-<h2 id="Les_instances_de_GeneratorFunction">Les instances de <code>GeneratorFunction</code></h2>
-
-<p>Les instances de <code>GeneratorFunction</code> héritent des méthodes et propriétés de {{jsxref("GeneratorFunction.prototype")}}. Comme pour tous les constructeurs, il est possible de modifier le prototype afin d'apporter des modifications à toutes les instances de <code>GeneratorFunction</code>.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Créer_un_générateur_en_utilisant_le_constructeur_GeneratorFunction">Créer un générateur en utilisant le constructeur <code>GeneratorFunction</code></h3>
-
-<pre class="brush: js">var GeneratorFunction = Object.getPrototypeOf(function*(){}).constructor
-var g = new GeneratorFunction("a", "yield a * 2");
-var itérateur = g(10);
-console.log(itérateur.next().value); // 20
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-generatorfunction-objects', 'GeneratorFunction')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-generatorfunction-objects', 'GeneratorFunction')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.GeneratorFunction")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>L'instruction {{jsxref("Instructions/function*", "function*")}}</li>
- <li>L'expression {{jsxref("Opérateurs/function*", "function*")}}</li>
- <li>{{jsxref("Function")}}</li>
- <li>L'instruction {{jsxref("Instructions/function", "function")}}</li>
- <li>L'expression {{jsxref("Opérateurs/L_opérateur_function", "function")}}</li>
- <li>{{jsxref("Fonctions", "Les fonctions et portées de fonctions", "", 1)}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/generatorfunction/index.md b/files/fr/web/javascript/reference/global_objects/generatorfunction/index.md
new file mode 100644
index 0000000000..f9faec0967
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/generatorfunction/index.md
@@ -0,0 +1,91 @@
+---
+title: GeneratorFunction
+slug: Web/JavaScript/Reference/Global_Objects/GeneratorFunction
+tags:
+  - Constructor
+  - ECMAScript 2015
+  - GeneratorFunction
+  - Iterator
+  - JavaScript
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/GeneratorFunction
+original_slug: Web/JavaScript/Reference/Objets_globaux/GeneratorFunction
+---
+{{JSRef}}
+
+Le constructeur **`GeneratorFunction`** permet de créer un nouvel objet qui est une {{jsxref("Instructions/function*", "fonction génératrice","",1)}}. En JavaScript, chaque générateur (ou fonction génératrice) est un objet `GeneratorFunction`.
+
+L'objet `GeneratorFunction` n'est pas un objet global. Il peut être obtenu en exécutant le code suivant :
+
+```js
+Object.getPrototypeOf(function*(){}).constructor
+```
+
+## Syntaxe
+
+    new GeneratorFunction ([arg1[, arg2[, ...argN]],] corpsFonction)
+
+### Paramètres
+
+- `arg1, arg2, ... argN`
+  - : Les noms à utiliser pour les arguments formellement déclarés. Chacun doit être une chaîne de caractères correspondant à un identifiant JavaScript valide ou une liste de telles chaînes séparées par des virgules. Par exemple, on peut avoir "`x`", "`maValeur`", ou "`a,b`".
+- `corpsFonction`
+  - : Une chaîne qui contient les instructions JavaScript qui composent la définition de la fonction.
+
+## Description
+
+Les {{jsxref("Instructions/function*", "fonctions génératrices","",1)}} créées avec le constructeur `GeneratorFunction` sont analysés lorsque la fonction est crée. Cela est moins efficace que de déclarer un générateur avec une expression {{jsxref("Statements/function*", "function*")}} puis de l'appeler car ces fonctions sont analysées avec le reste du code (ce qui permet au moteur JavaScript d'effectuer certaines optimisations).
+
+Tous les arguments passés à la fonction sont traités par la suite avec les noms des identifiants utilisés pour les noms des paramètres lors de la création de la fonction et avec cet ordre là.
+
+> **Note :** Les {{jsxref("Instructions/function*", "générateurs","",1)}} créés avec le constructeur `GeneratorFunction` ne créent pas de fermetures avec leurs contextes de création. Ils sont toujours créés dans la portée globale. Lorsqu'ils sont exécutés, ils n'ont accès qu'à leurs variables locales et aux variables globales et ils n'ont pas accès aux variables de la portée où a eu lieu l'appel à `GeneratorFunction`. Ce comportement est différent de celui obtenu lorsqu'on appelle {{jsxref("Objets_globaux/eval", "eval")}} avec du code correspondant à une expression de générateur.
+
+L'appel du constructeur `GeneratorFunction` comme fonction (c'est-à-dire sans utiliser l'opérateur `new`) aura le même effet que si celui-ci est invoqué comme constructeur.
+
+## Propriétés
+
+- **`GeneratorFunction.length`**
+  - : La propriété de longueur du constructeur `GeneratorFunction` qui vaut 1.
+- {{jsxref("GeneratorFunction.prototype")}}
+  - : Le prototype du constructeur qui permet d'ajouter des propriétés à tous les générateurs.
+
+## Le prototype de `GeneratorFunction`
+
+### Propriétés
+
+{{page('/fr/docs/Web/JavaScript/Reference/Objets_globaux/GeneratorFunction/prototype', 'Properties')}}
+
+## Les instances de `GeneratorFunction`
+
+Les instances de `GeneratorFunction` héritent des méthodes et propriétés de {{jsxref("GeneratorFunction.prototype")}}. Comme pour tous les constructeurs, il est possible de modifier le prototype afin d'apporter des modifications à toutes les instances de `GeneratorFunction`.
+
+## Exemples
+
+### Créer un générateur en utilisant le constructeur `GeneratorFunction`
+
+```js
+var GeneratorFunction = Object.getPrototypeOf(function*(){}).constructor
+var g = new GeneratorFunction("a", "yield a * 2");
+var itérateur = g(10);
+console.log(itérateur.next().value); // 20
+```
+
+## Spécifications
+
+| Spécification                                                                                            | Statut                       | Commentaires         |
+| -------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName('ES2015', '#sec-generatorfunction-objects', 'GeneratorFunction')}} | {{Spec2('ES2015')}}     | Définition initiale. |
+| {{SpecName('ESDraft', '#sec-generatorfunction-objects', 'GeneratorFunction')}} | {{Spec2('ESDraft')}} |                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.GeneratorFunction")}}
+
+## Voir aussi
+
+- L'instruction {{jsxref("Instructions/function*", "function*")}}
+- L'expression {{jsxref("Opérateurs/function*", "function*")}}
+- {{jsxref("Function")}}
+- L'instruction {{jsxref("Instructions/function", "function")}}
+- L'expression {{jsxref("Opérateurs/L_opérateur_function", "function")}}
+- {{jsxref("Fonctions", "Les fonctions et portées de fonctions", "", 1)}}
diff --git a/files/fr/web/javascript/reference/global_objects/globalthis/index.html b/files/fr/web/javascript/reference/global_objects/globalthis/index.html
deleted file mode 100644
index 428d089b96..0000000000
--- a/files/fr/web/javascript/reference/global_objects/globalthis/index.html
+++ /dev/null
@@ -1,84 +0,0 @@
----
-title: globalThis
-slug: Web/JavaScript/Reference/Global_Objects/globalThis
-tags:
-  - JavaScript
-  - Reference
-  - globalThis
-translation_of: Web/JavaScript/Reference/Global_Objects/globalThis
-original_slug: Web/JavaScript/Reference/Objets_globaux/globalThis
----
-<div>{{jsSidebar("Objects")}}</div>
-
-<p>La propriété globale <code><strong>globalThis</strong></code> renvoie l'objet global de plus haut niveau.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/globalprops-globalthis.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><code>globalThis</code>
-</pre>
-
-<h2 id="Description">Description</h2>
-
-<p>Par le passé, il était nécessaire d'utiliser différentes syntaxes pour différents environnements afin d'accéder à la portée globale. Sur le Web, on peut utiliser {{domxref("Window.window", "window")}}, {{domxref("Window.self", "self")}} ou {{domxref("Window.frames", "frames")}} ; pour les <a href="/en-US/docs/Web/API/Worker">web workers</a>, seul <code>self</code> peut être employé ; pour Node.js aucun de ces mots-clés ne fonctionne et il faut utiliser <code>global</code>.<br>
- Le mot-clé <code>this</code> pouvait être utilisé à l'intérieur des fonctions en <a href="/fr/docs/Web/JavaScript/Reference/Strict_mode">mode non-strict</a> mais vaudra sinon <code>undefined</code> dans les modules et dans les fonctions utilisant le <a href="/fr/docs/Web/JavaScript/Reference/Strict_mode">mode strict</a>.</p>
-
-<p>La propriété <code>globalThis</code> fournit une méthode standard d'accès à l'objet <code>this</code> global, quel que soit l'environnement. Contrairement aux propriétés <code>window</code> et <code>self</code>, ce mot-clé fonctionnera quel que soit le contexte (que celui-ci soit doté de fenêtres ou non). Ainsi, on peut accéder à l'objet global de façon homogène, quel que soit l'environnement dans lequel le code est utilisé.</p>
-
-<p>Pour mieux mémoriser ce nom, on se rappellera que la valeur de <code>this</code> dans la portée globale est <code>globalThis</code>.</p>
-
-<h3 id="Accès_indirect_à_la_variable_globale_dans_un_contexte_web">Accès indirect à la variable globale dans un contexte web</h3>
-
-<p>Dans la plupart des environnements, <code>globalThis</code> sera une référence directe à l'objet global. Cependant, dans les navigateurs web, avec les principes de sécurité relatifs aux <em>iframes</em> et aux liens entre les fenêtres, <code>globalThis</code> fournira un {{jsxref("Proxy")}} sur l'objet global (auquel on n'aura donc pas accès directement).</p>
-
-<h3 id="Nommage">Nommage</h3>
-
-<p>D'autres noms furent proposés pour cette fonctionnalité (tels que <code>self</code> et <code>global</code>) mais ils furent écartés car ils pouvaient entraîner des problèmes de compatibilité avec du code existant. Pour plus de détails, voir <a href="https://github.com/tc39/proposal-global/blob/master/NAMING.md">le document de la proposition pour le nommage</a>.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<p>Avant l'introduction de <code>globalThis</code>, la seule façon qui permettait d'obtenir l'objet global de l'environnement de façon homogène était <code>Function('return this')()</code>. Toutefois, cela enfreignait certaines règles <a href="/fr/docs/Web/HTTP/CSP">CSP</a> avec certains réglages et <a href="https://github.com/paulmillr/es6-shim">es6-shim</a>, par exemple, devait utiliser une logique conditionnelle :</p>
-
-<pre class="brush: js">var getGlobal = function () {
-  if (typeof self !== 'undefined') { return self; }
-  if (typeof window !== 'undefined') { return window; }
-  if (typeof global !== 'undefined') { return global; }
-  throw new Error("impossible de trouver l'objet global");
-};
-
-var globals = getGlobal();
-
-if (typeof globals.setTimeout !== 'function') {
-  // pas de setTimeout pour cet environnement
-}
-</pre>
-
-<p>Avec <code>globalThis</code>, il n'est plus nécessaire de parcourir les différents mots-clés des différents environnements :</p>
-
-<pre class="brush: js">if (typeof globalThis.setTimeout !== 'function') {
-  // pas de setTimeout pour cet environnement
-}</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><a href="https://tc39.github.io/proposal-global/#sec-other-properties-of-the-global-object-global">Proposition pour <code>globalThis</code></a></td>
-   <td>Proposition de niveau 3 (<em>stage 3</em>)</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.globalThis")}}</p>
diff --git a/files/fr/web/javascript/reference/global_objects/globalthis/index.md b/files/fr/web/javascript/reference/global_objects/globalthis/index.md
new file mode 100644
index 0000000000..4a6721b390
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/globalthis/index.md
@@ -0,0 +1,73 @@
+---
+title: globalThis
+slug: Web/JavaScript/Reference/Global_Objects/globalThis
+tags:
+  - JavaScript
+  - Reference
+  - globalThis
+translation_of: Web/JavaScript/Reference/Global_Objects/globalThis
+original_slug: Web/JavaScript/Reference/Objets_globaux/globalThis
+---
+{{jsSidebar("Objects")}}
+
+La propriété globale **`globalThis`** renvoie l'objet global de plus haut niveau.
+
+{{EmbedInteractiveExample("pages/js/globalprops-globalthis.html")}}
+
+## Syntaxe
+
+    globalThis
+
+## Description
+
+Par le passé, il était nécessaire d'utiliser différentes syntaxes pour différents environnements afin d'accéder à la portée globale. Sur le Web, on peut utiliser {{domxref("Window.window", "window")}}, {{domxref("Window.self", "self")}} ou {{domxref("Window.frames", "frames")}} ; pour les [web workers](/en-US/docs/Web/API/Worker), seul `self` peut être employé ; pour Node.js aucun de ces mots-clés ne fonctionne et il faut utiliser `global`.
+Le mot-clé `this` pouvait être utilisé à l'intérieur des fonctions en [mode non-strict](/fr/docs/Web/JavaScript/Reference/Strict_mode) mais vaudra sinon `undefined` dans les modules et dans les fonctions utilisant le [mode strict](/fr/docs/Web/JavaScript/Reference/Strict_mode).
+
+La propriété `globalThis` fournit une méthode standard d'accès à l'objet `this` global, quel que soit l'environnement. Contrairement aux propriétés `window` et `self`, ce mot-clé fonctionnera quel que soit le contexte (que celui-ci soit doté de fenêtres ou non). Ainsi, on peut accéder à l'objet global de façon homogène, quel que soit l'environnement dans lequel le code est utilisé.
+
+Pour mieux mémoriser ce nom, on se rappellera que la valeur de `this` dans la portée globale est `globalThis`.
+
+### Accès indirect à la variable globale dans un contexte web
+
+Dans la plupart des environnements, `globalThis` sera une référence directe à l'objet global. Cependant, dans les navigateurs web, avec les principes de sécurité relatifs aux _iframes_ et aux liens entre les fenêtres, `globalThis` fournira un {{jsxref("Proxy")}} sur l'objet global (auquel on n'aura donc pas accès directement).
+
+### Nommage
+
+D'autres noms furent proposés pour cette fonctionnalité (tels que `self` et `global`) mais ils furent écartés car ils pouvaient entraîner des problèmes de compatibilité avec du code existant. Pour plus de détails, voir [le document de la proposition pour le nommage](https://github.com/tc39/proposal-global/blob/master/NAMING.md).
+
+## Exemples
+
+Avant l'introduction de `globalThis`, la seule façon qui permettait d'obtenir l'objet global de l'environnement de façon homogène était `Function('return this')()`. Toutefois, cela enfreignait certaines règles [CSP](/fr/docs/Web/HTTP/CSP) avec certains réglages et [es6-shim](https://github.com/paulmillr/es6-shim), par exemple, devait utiliser une logique conditionnelle :
+
+```js
+var getGlobal = function () {
+  if (typeof self !== 'undefined') { return self; }
+  if (typeof window !== 'undefined') { return window; }
+  if (typeof global !== 'undefined') { return global; }
+  throw new Error("impossible de trouver l'objet global");
+};
+
+var globals = getGlobal();
+
+if (typeof globals.setTimeout !== 'function') {
+  // pas de setTimeout pour cet environnement
+}
+```
+
+Avec `globalThis`, il n'est plus nécessaire de parcourir les différents mots-clés des différents environnements :
+
+```js
+if (typeof globalThis.setTimeout !== 'function') {
+  // pas de setTimeout pour cet environnement
+}
+```
+
+## Spécifications
+
+| Spécification                                                                                                             | État                                | Commentaires |
+| ------------------------------------------------------------------------------------------------------------------------- | ----------------------------------- | ------------ |
+| [Proposition pour `globalThis`](https://tc39.github.io/proposal-global/#sec-other-properties-of-the-global-object-global) | Proposition de niveau 3 (_stage 3_) |              |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.globalThis")}}
diff --git a/files/fr/web/javascript/reference/global_objects/index.html b/files/fr/web/javascript/reference/global_objects/index.html
deleted file mode 100644
index b8eb0beaa1..0000000000
--- a/files/fr/web/javascript/reference/global_objects/index.html
+++ /dev/null
@@ -1,186 +0,0 @@
----
-title: Objets globaux
-slug: Web/JavaScript/Reference/Global_Objects
-tags:
-  - Aperçu
-  - JavaScript
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects
-original_slug: Web/JavaScript/Reference/Objets_globaux
----
-<div>{{jsSidebar("Objects")}}</div>
-
-<p>Cette partie référence tous les objets natifs standards JavaScript, avec leurs propriétés et méthodes.</p>
-
-<p>Le terme « objets globaux » (ou objets natifs standards) ne doit pas ici être confondu avec l<em>'objet global</em>. Ici, « objets globaux » se réfère aux <em>objets de portée globale</em>. L'objet global lui-même peut être accédé en utilisant {{jsxref("Opérateurs/L_opérateur_this", "this")}} dans la portée globale (uniquement lorsque <a href="/fr/docs/Web/JavaScript/Reference/Strict_mode">le mode strict</a> n'est pas utilisé, sinon, il renvoie {{jsxref("undefined")}}). En réalité, la portée globale <em>consiste des</em> propriétés de l'objet global (avec ses propriétés héritées, s'il en a).</p>
-
-<div class="note">
-<p><strong>Note :</strong> En <a href="/fr/docs/Web/JavaScript/Reference/Strict_mode">mode strict</a>, la portée globale représentée par <code>this</code> sera {{jsxref("undefined")}}.</p>
-</div>
-
-<p>Les autres objets de la portée globale sont <a href="/fr/docs/Web/JavaScript/Guide/Utiliser_les_objets#Cr.C3.A9er_de_nouveaux_objets">créés par les scripts utilisateurs</a> ou fournis par l'application hôte dans laquelle s'exécute JavaScript. Les objets mis à disposition par les navigateurs web sont documentés dans la <a href="/fr/docs/Web/API">référence API</a>. Pour plus d'informations sur la distinction entre le <a href="/fr/docs/Web/API/R%C3%A9f%C3%A9rence_du_DOM_Gecko">DOM</a> et JavaScript, voir <a href="/fr/docs/Web/JavaScript/JavaScript_technologies_overview">l'aperçu des technologies JavaScript</a>.</p>
-
-<h2 id="Objets_globaux_standards_(par_catégorie)">Objets globaux standards (par catégorie)</h2>
-
-<h3 id="Propriétés_-_valeurs">Propriétés - valeurs</h3>
-
-<p>Les propriétés globales renvoient une valeur simple, elles ne possèdent aucune propriété ou méthode :</p>
-
-<ul>
- <li>{{jsxref("Infinity")}}</li>
- <li>{{jsxref("NaN")}}</li>
- <li>{{jsxref("undefined")}}</li>
- <li>le littéral {{jsxref("null")}}</li>
- <li>{{JSxRef("globalThis")}}</li>
-</ul>
-
-<h3 id="Propriétés_-_fonctions">Propriétés - fonctions</h3>
-
-<p>Les fonctions globales, appelées globalement (et non par rapport à un objet), renvoient directement leur résultat à l'objet appelant.</p>
-
-<ul>
- <li>{{jsxref("Objets_globaux/eval", "eval()")}}</li>
- <li>{{jsxref("Objets_globaux/uneval", "uneval()")}} {{non-standard_inline()}}</li>
- <li>{{jsxref("Objets_globaux/isFinite", "isFinite()")}}</li>
- <li>{{jsxref("Objets_globaux/isNaN", "isNaN()")}}</li>
- <li>{{jsxref("Objets_globaux/parseFloat", "parseFloat()")}}</li>
- <li>{{jsxref("Objets_globaux/parseInt", "parseInt()")}}</li>
- <li>{{jsxref("Objets_globaux/decodeURI", "decodeURI()")}}</li>
- <li>{{jsxref("Objets_globaux/decodeURIComponent", "decodeURIComponent()")}}</li>
- <li>{{jsxref("Objets_globaux/encodeURI", "encodeURI()")}}</li>
- <li>{{jsxref("Objets_globaux/encodeURIComponent", "encodeURIComponent()")}}</li>
- <li>{{jsxref("Objets_globaux/escape", "escape()")}} {{deprecated_inline()}}</li>
- <li>{{jsxref("Objets_globaux/unescape", "unescape()")}} {{deprecated_inline()}}</li>
-</ul>
-
-<h3 id="Objets_fondamentaux">Objets fondamentaux</h3>
-
-<p>Ces objets sont les objets fondamentaux de JavaScript. Parmi ces objets, on retrouve les objets génériques, les fonctions et les erreurs.</p>
-
-<ul>
- <li>{{jsxref("Object")}}</li>
- <li>{{jsxref("Function")}}</li>
- <li>{{jsxref("Boolean")}}</li>
- <li>{{jsxref("Symbol")}}</li>
- <li>{{jsxref("Error")}}</li>
- <li>{{jsxref("EvalError")}}</li>
- <li>{{jsxref("InternalError")}} {{Non-standard_Inline}}</li>
- <li>{{jsxref("RangeError")}}</li>
- <li>{{jsxref("ReferenceError")}}</li>
- <li>{{jsxref("StopIteration")}}</li>
- <li>{{jsxref("SyntaxError")}}</li>
- <li>{{jsxref("TypeError")}}</li>
- <li>{{jsxref("URIError")}}</li>
-</ul>
-
-<h3 id="Nombres_et_dates">Nombres et dates</h3>
-
-<p>Ces objets permettent de manipuler les nombres, dates et calculs mathématiques.</p>
-
-<ul>
- <li>{{jsxref("Number")}}</li>
- <li>{{JSxRef("BigInt")}}</li>
- <li>{{jsxref("Math")}}</li>
- <li>{{jsxref("Date")}}</li>
-</ul>
-
-<h3 id="Manipulation_de_textes">Manipulation de textes</h3>
-
-<p>Ces objets permettent de manipuler des chaînes de caractères.</p>
-
-<ul>
- <li>{{jsxref("String")}}</li>
- <li>{{jsxref("RegExp")}}</li>
-</ul>
-
-<h3 id="Collections_indexées">Collections indexées</h3>
-
-<p>Ces objets sont des collections ordonnées par un index. Cela inclut les tableaux (typés) et les objets semblables aux tableaux.</p>
-
-<ul>
- <li>{{jsxref("Array")}}</li>
- <li>{{jsxref("Int8Array")}}</li>
- <li>{{jsxref("Uint8Array")}}</li>
- <li>{{jsxref("Uint8ClampedArray")}}</li>
- <li>{{jsxref("Int16Array")}}</li>
- <li>{{jsxref("Uint16Array")}}</li>
- <li>{{jsxref("Int32Array")}}</li>
- <li>{{jsxref("Uint32Array")}}</li>
- <li>{{jsxref("Float32Array")}}</li>
- <li>{{jsxref("Float64Array")}}</li>
- <li>{{jsxref("BigInt64Array")}}</li>
- <li>{{jsxref("BigUint64Array")}}</li>
-</ul>
-
-<h3 id="Collections_avec_clefs">Collections avec clefs</h3>
-
-<p>Ces objets représentent des collections d'objets avec clefs. Ils contiennent des éléments itérables, dans leur ordre d'insertion.</p>
-
-<ul>
- <li>{{jsxref("Map")}}</li>
- <li>{{jsxref("Set")}}</li>
- <li>{{jsxref("WeakMap")}}</li>
- <li>{{jsxref("WeakSet")}}</li>
-</ul>
-
-<h3 id="Données_structurées">Données structurées</h3>
-
-<p>Ces objets permettent de représenter et de manipuler des tampons de données (<em>buffers</em>) et des données utilisant la notation JSON (<strong>J</strong>ava<strong>S</strong>cript <strong>O</strong>bject <strong>N</strong>otation).</p>
-
-<ul>
- <li>{{jsxref("ArrayBuffer")}}</li>
- <li>{{jsxref("SharedArrayBuffer")}} {{experimental_inline}}</li>
- <li>{{jsxref("Atomics")}} {{experimental_inline}}</li>
- <li>{{jsxref("DataView")}}</li>
- <li>{{jsxref("JSON")}}</li>
-</ul>
-
-<h3 id="Objets_de_contrôle_d'abstraction">Objets de contrôle d'abstraction</h3>
-
-<ul>
- <li>{{jsxref("Promise")}}</li>
- <li>{{jsxref("Generator")}}</li>
- <li>{{jsxref("GeneratorFunction")}}</li>
- <li>{{jsxref("AsyncFunction")}}{{experimental_inline}}</li>
-</ul>
-
-<h3 id="Introspection">Introspection</h3>
-
-<ul>
- <li>{{jsxref("Reflect")}}</li>
- <li>{{jsxref("Proxy")}}</li>
-</ul>
-
-<h3 id="Internationalisation">Internationalisation</h3>
-
-<p>Ces objets ont été ajoutés à ECMAScript pour des traitements dépendants de particularités linguistiques. Ils possèdent leur propre spécification.</p>
-
-<ul>
- <li>{{jsxref("Intl")}}</li>
- <li>{{jsxref("Objets_globaux/Collator", "Intl.Collator")}}</li>
- <li>{{jsxref("Objets_globaux/DateTimeFormat", "Intl.DateTimeFormat")}}</li>
- <li>{{JSxRef("Global_Objects/ListFormat", "Intl.ListFormat")}}</li>
- <li>{{jsxref("Objets_globaux/NumberFormat", "Intl.NumberFormat")}}</li>
- <li>{{JSxRef("Global_Objects/PluralRules", "Intl.PluralRules")}}</li>
- <li>{{jsxref("Objets_globaux/RelativeTimeFormat", "Intl.RelativeTimeFormat")}}</li>
- <li>{{jsxref("Objets_globaux/Locale", "Intl.Locale")}}</li>
-</ul>
-
-<h3 id="WebAssembly">WebAssembly</h3>
-
-<ul>
- <li>{{jsxref("WebAssembly")}}</li>
- <li>{{jsxref("WebAssembly.Module")}}</li>
- <li>{{jsxref("WebAssembly.Instance")}}</li>
- <li>{{jsxref("WebAssembly.Memory")}}</li>
- <li>{{jsxref("WebAssembly.Table")}}</li>
- <li>{{jsxref("WebAssembly.CompileError")}}</li>
- <li>{{jsxref("WebAssembly.LinkError")}}</li>
- <li>{{jsxref("WebAssembly.RuntimeError")}}</li>
-</ul>
-
-<h3 id="Autres">Autres</h3>
-
-<ul>
- <li>{{JSxRef("Fonctions/arguments", "arguments")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/index.md b/files/fr/web/javascript/reference/global_objects/index.md
new file mode 100644
index 0000000000..0c2020b20d
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/index.md
@@ -0,0 +1,158 @@
+---
+title: Objets globaux
+slug: Web/JavaScript/Reference/Global_Objects
+tags:
+  - Aperçu
+  - JavaScript
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects
+original_slug: Web/JavaScript/Reference/Objets_globaux
+---
+{{jsSidebar("Objects")}}
+
+Cette partie référence tous les objets natifs standards JavaScript, avec leurs propriétés et méthodes.
+
+Le terme « objets globaux » (ou objets natifs standards) ne doit pas ici être confondu avec l*'objet global*. Ici, « objets globaux » se réfère aux _objets de portée globale_. L'objet global lui-même peut être accédé en utilisant {{jsxref("Opérateurs/L_opérateur_this", "this")}} dans la portée globale (uniquement lorsque [le mode strict](/fr/docs/Web/JavaScript/Reference/Strict_mode) n'est pas utilisé, sinon, il renvoie {{jsxref("undefined")}}). En réalité, la portée globale _consiste des_ propriétés de l'objet global (avec ses propriétés héritées, s'il en a).
+
+> **Note :** En [mode strict](/fr/docs/Web/JavaScript/Reference/Strict_mode), la portée globale représentée par `this` sera {{jsxref("undefined")}}.
+
+Les autres objets de la portée globale sont [créés par les scripts utilisateurs](/fr/docs/Web/JavaScript/Guide/Utiliser_les_objets#Cr.C3.A9er_de_nouveaux_objets) ou fournis par l'application hôte dans laquelle s'exécute JavaScript. Les objets mis à disposition par les navigateurs web sont documentés dans la [référence API](/fr/docs/Web/API). Pour plus d'informations sur la distinction entre le [DOM](/fr/docs/Web/API/R%C3%A9f%C3%A9rence_du_DOM_Gecko) et JavaScript, voir [l'aperçu des technologies JavaScript](/fr/docs/Web/JavaScript/JavaScript_technologies_overview).
+
+## Objets globaux standards (par catégorie)
+
+### Propriétés - valeurs
+
+Les propriétés globales renvoient une valeur simple, elles ne possèdent aucune propriété ou méthode :
+
+- {{jsxref("Infinity")}}
+- {{jsxref("NaN")}}
+- {{jsxref("undefined")}}
+- le littéral {{jsxref("null")}}
+- {{JSxRef("globalThis")}}
+
+### Propriétés - fonctions
+
+Les fonctions globales, appelées globalement (et non par rapport à un objet), renvoient directement leur résultat à l'objet appelant.
+
+- {{jsxref("Objets_globaux/eval", "eval()")}}
+- {{jsxref("Objets_globaux/uneval", "uneval()")}} {{non-standard_inline()}}
+- {{jsxref("Objets_globaux/isFinite", "isFinite()")}}
+- {{jsxref("Objets_globaux/isNaN", "isNaN()")}}
+- {{jsxref("Objets_globaux/parseFloat", "parseFloat()")}}
+- {{jsxref("Objets_globaux/parseInt", "parseInt()")}}
+- {{jsxref("Objets_globaux/decodeURI", "decodeURI()")}}
+- {{jsxref("Objets_globaux/decodeURIComponent", "decodeURIComponent()")}}
+- {{jsxref("Objets_globaux/encodeURI", "encodeURI()")}}
+- {{jsxref("Objets_globaux/encodeURIComponent", "encodeURIComponent()")}}
+- {{jsxref("Objets_globaux/escape", "escape()")}} {{deprecated_inline()}}
+- {{jsxref("Objets_globaux/unescape", "unescape()")}} {{deprecated_inline()}}
+
+### Objets fondamentaux
+
+Ces objets sont les objets fondamentaux de JavaScript. Parmi ces objets, on retrouve les objets génériques, les fonctions et les erreurs.
+
+- {{jsxref("Object")}}
+- {{jsxref("Function")}}
+- {{jsxref("Boolean")}}
+- {{jsxref("Symbol")}}
+- {{jsxref("Error")}}
+- {{jsxref("EvalError")}}
+- {{jsxref("InternalError")}} {{Non-standard_Inline}}
+- {{jsxref("RangeError")}}
+- {{jsxref("ReferenceError")}}
+- {{jsxref("StopIteration")}}
+- {{jsxref("SyntaxError")}}
+- {{jsxref("TypeError")}}
+- {{jsxref("URIError")}}
+
+### Nombres et dates
+
+Ces objets permettent de manipuler les nombres, dates et calculs mathématiques.
+
+- {{jsxref("Number")}}
+- {{JSxRef("BigInt")}}
+- {{jsxref("Math")}}
+- {{jsxref("Date")}}
+
+### Manipulation de textes
+
+Ces objets permettent de manipuler des chaînes de caractères.
+
+- {{jsxref("String")}}
+- {{jsxref("RegExp")}}
+
+### Collections indexées
+
+Ces objets sont des collections ordonnées par un index. Cela inclut les tableaux (typés) et les objets semblables aux tableaux.
+
+- {{jsxref("Array")}}
+- {{jsxref("Int8Array")}}
+- {{jsxref("Uint8Array")}}
+- {{jsxref("Uint8ClampedArray")}}
+- {{jsxref("Int16Array")}}
+- {{jsxref("Uint16Array")}}
+- {{jsxref("Int32Array")}}
+- {{jsxref("Uint32Array")}}
+- {{jsxref("Float32Array")}}
+- {{jsxref("Float64Array")}}
+- {{jsxref("BigInt64Array")}}
+- {{jsxref("BigUint64Array")}}
+
+### Collections avec clefs
+
+Ces objets représentent des collections d'objets avec clefs. Ils contiennent des éléments itérables, dans leur ordre d'insertion.
+
+- {{jsxref("Map")}}
+- {{jsxref("Set")}}
+- {{jsxref("WeakMap")}}
+- {{jsxref("WeakSet")}}
+
+### Données structurées
+
+Ces objets permettent de représenter et de manipuler des tampons de données (_buffers_) et des données utilisant la notation JSON (**J**ava**S**cript **O**bject **N**otation).
+
+- {{jsxref("ArrayBuffer")}}
+- {{jsxref("SharedArrayBuffer")}} {{experimental_inline}}
+- {{jsxref("Atomics")}} {{experimental_inline}}
+- {{jsxref("DataView")}}
+- {{jsxref("JSON")}}
+
+### Objets de contrôle d'abstraction
+
+- {{jsxref("Promise")}}
+- {{jsxref("Generator")}}
+- {{jsxref("GeneratorFunction")}}
+- {{jsxref("AsyncFunction")}}{{experimental_inline}}
+
+### Introspection
+
+- {{jsxref("Reflect")}}
+- {{jsxref("Proxy")}}
+
+### Internationalisation
+
+Ces objets ont été ajoutés à ECMAScript pour des traitements dépendants de particularités linguistiques. Ils possèdent leur propre spécification.
+
+- {{jsxref("Intl")}}
+- {{jsxref("Objets_globaux/Collator", "Intl.Collator")}}
+- {{jsxref("Objets_globaux/DateTimeFormat", "Intl.DateTimeFormat")}}
+- {{JSxRef("Global_Objects/ListFormat", "Intl.ListFormat")}}
+- {{jsxref("Objets_globaux/NumberFormat", "Intl.NumberFormat")}}
+- {{JSxRef("Global_Objects/PluralRules", "Intl.PluralRules")}}
+- {{jsxref("Objets_globaux/RelativeTimeFormat", "Intl.RelativeTimeFormat")}}
+- {{jsxref("Objets_globaux/Locale", "Intl.Locale")}}
+
+### WebAssembly
+
+- {{jsxref("WebAssembly")}}
+- {{jsxref("WebAssembly.Module")}}
+- {{jsxref("WebAssembly.Instance")}}
+- {{jsxref("WebAssembly.Memory")}}
+- {{jsxref("WebAssembly.Table")}}
+- {{jsxref("WebAssembly.CompileError")}}
+- {{jsxref("WebAssembly.LinkError")}}
+- {{jsxref("WebAssembly.RuntimeError")}}
+
+### Autres
+
+- {{JSxRef("Fonctions/arguments", "arguments")}}
diff --git a/files/fr/web/javascript/reference/global_objects/infinity/index.html b/files/fr/web/javascript/reference/global_objects/infinity/index.html
deleted file mode 100644
index 7188beb806..0000000000
--- a/files/fr/web/javascript/reference/global_objects/infinity/index.html
+++ /dev/null
@@ -1,80 +0,0 @@
----
-title: Infinity
-slug: Web/JavaScript/Reference/Global_Objects/Infinity
-tags:
-  - JavaScript
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Infinity
-original_slug: Web/JavaScript/Reference/Objets_globaux/Infinity
----
-<div>{{jsSidebar("Objects")}}</div>
-
-<p>La propriété globale <strong><code>Infinity</code></strong> est une valeur numérique représentant l'infini.</p>
-
-<p>{{js_property_attributes(0,0,0)}}</p>
-
-<div>{{EmbedInteractiveExample("pages/js/globalprops-infinity.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">Infinity</pre>
-
-<h2 id="Description">Description</h2>
-
-<p><code>Infinity</code> est une propriété de <em>l'objet global</em> , c'est-à-dire qu'elle est accessible globalement.</p>
-
-<p>La valeur initiale d'<code>Infinity</code> est {{jsxref("Number.POSITIVE_INFINITY")}}. La valeur <code>Infinity</code> (infinité positive) est une valeur plus grande que n'importe quel nombre. Cette valeur se comporte comme l'infini mathématique ; par exemple, tout ce qui est multiplié par <code>Infinity</code> vaut <code>Infinity</code>, et tout ce qui est divisé par <code>Infinity</code> vaut 0.</p>
-
-<p>D'après la spécification ECMAScript 5, <code>Infinity</code> est en lecture seule.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<pre class="brush: js">console.log(Infinity);          // Infinity
-console.log(Infinity + 1);      // Infinity
-console.log(Math.pow(10, 1000)); // Infinity
-console.log(Math.log(0));       // -Infinity
-console.log(1 / Infinity);      // 0</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES1')}}</td>
-   <td>{{Spec2('ES1')}}</td>
-   <td>Définition initiale. Implémentée avec JavaScript 1.3</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-15.1.1.2', 'Infinity')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-value-properties-of-the-global-object-infinity', 'Infinity')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-value-properties-of-the-global-object-infinity', 'Infinity')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Infinity")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Number.NEGATIVE_INFINITY")}}</li>
- <li>{{jsxref("Number.POSITIVE_INFINITY")}}</li>
- <li>{{jsxref("Number.isFinite")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/infinity/index.md b/files/fr/web/javascript/reference/global_objects/infinity/index.md
new file mode 100644
index 0000000000..0be346bb70
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/infinity/index.md
@@ -0,0 +1,57 @@
+---
+title: Infinity
+slug: Web/JavaScript/Reference/Global_Objects/Infinity
+tags:
+  - JavaScript
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Infinity
+original_slug: Web/JavaScript/Reference/Objets_globaux/Infinity
+---
+{{jsSidebar("Objects")}}
+
+La propriété globale **`Infinity`** est une valeur numérique représentant l'infini.
+
+{{js_property_attributes(0,0,0)}}
+
+{{EmbedInteractiveExample("pages/js/globalprops-infinity.html")}}
+
+## Syntaxe
+
+    Infinity
+
+## Description
+
+`Infinity` est une propriété de _l'objet global_ , c'est-à-dire qu'elle est accessible globalement.
+
+La valeur initiale d'`Infinity` est {{jsxref("Number.POSITIVE_INFINITY")}}. La valeur `Infinity` (infinité positive) est une valeur plus grande que n'importe quel nombre. Cette valeur se comporte comme l'infini mathématique ; par exemple, tout ce qui est multiplié par `Infinity` vaut `Infinity`, et tout ce qui est divisé par `Infinity` vaut 0.
+
+D'après la spécification ECMAScript 5, `Infinity` est en lecture seule.
+
+## Exemples
+
+```js
+console.log(Infinity);          // Infinity
+console.log(Infinity + 1);      // Infinity
+console.log(Math.pow(10, 1000)); // Infinity
+console.log(Math.log(0));       // -Infinity
+console.log(1 / Infinity);      // 0
+```
+
+## Spécifications
+
+| Spécification                                                                                                            | État                         | Commentaires                                         |
+| ------------------------------------------------------------------------------------------------------------------------ | ---------------------------- | ---------------------------------------------------- |
+| {{SpecName('ES1')}}                                                                                                 | {{Spec2('ES1')}}         | Définition initiale. Implémentée avec JavaScript 1.3 |
+| {{SpecName('ES5.1', '#sec-15.1.1.2', 'Infinity')}}                                                     | {{Spec2('ES5.1')}}     |                                                      |
+| {{SpecName('ES6', '#sec-value-properties-of-the-global-object-infinity', 'Infinity')}}     | {{Spec2('ES6')}}         |                                                      |
+| {{SpecName('ESDraft', '#sec-value-properties-of-the-global-object-infinity', 'Infinity')}} | {{Spec2('ESDraft')}} |                                                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Infinity")}}
+
+## Voir aussi
+
+- {{jsxref("Number.NEGATIVE_INFINITY")}}
+- {{jsxref("Number.POSITIVE_INFINITY")}}
+- {{jsxref("Number.isFinite")}}
diff --git a/files/fr/web/javascript/reference/global_objects/int16array/index.html b/files/fr/web/javascript/reference/global_objects/int16array/index.html
deleted file mode 100644
index c23c5289a6..0000000000
--- a/files/fr/web/javascript/reference/global_objects/int16array/index.html
+++ /dev/null
@@ -1,204 +0,0 @@
----
-title: Int16Array
-slug: Web/JavaScript/Reference/Global_Objects/Int16Array
-tags:
-  - Constructor
-  - JavaScript
-  - Reference
-  - TypedArray
-  - TypedArrays
-translation_of: Web/JavaScript/Reference/Global_Objects/Int16Array
-original_slug: Web/JavaScript/Reference/Objets_globaux/Int16Array
----
-<div>{{JSRef}}</div>
-
-<p>Le tableau typé <strong><code>Int16Array</code></strong> permet de représenter un tableau d'entiers signés (en complément à deux) représentés sur 16 bits et dans l'ordre des octets de la plate-forme. Pour avoir un contrôle sur le boutisme utilisé, il faudra utiliser un objet {{jsxref("DataView")}} à la place. Les éléments du tableau sont initialisés à 0. Une fois le tableau construit, il est possible de faire référence aux éléments en utilisant les méthodes de l'objet ou en utilisant la notation usuelle de parcours d'un tableau (la syntaxe utilisant les crochets).</p>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">new Int16Array(); // apparu avec ES2017
-new Int16Array(longueur);
-new Int16Array(tableauTypé);
-new Int16Array(objet);
-new Int16Array(buffer [, positionOctet [, longueur]]);</pre>
-
-<p>Pour plus d'informations sur la syntaxe du constructeur, voir la page sur les <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/TypedArray#Syntaxe">tableaux typés</a><em> (TypedArray)</em>.</p>
-
-<h2 id="Propriétés">Propriétés</h2>
-
-<dl>
- <dt>{{jsxref("TypedArray.BYTES_PER_ELEMENT", "Int16Array.BYTES_PER_ELEMENT")}}</dt>
- <dd>Renvoie un nombre représentant la taille d'un élément du tableau en termes d'octets. Dans le cas de <code>Int16Array</code>, la propriété vaudra 2.</dd>
- <dt><code>Int16Array.length</code></dt>
- <dd>Une propriété de longueur qui vaut 3. Pour connaître le nombre d'élément, voir {{jsxref("TypedArray.prototype.length", "Int16Array.prototype.length")}}.</dd>
- <dt>{{jsxref("TypedArray.name", "Int16Array.name")}}</dt>
- <dd>Renvoie la chaîne de caractère représentant le nom du constructeur. Dans le cas de <code>Int16Array</code>, la propriété vaudra "Int16Array".</dd>
- <dt>{{jsxref("TypedArray.prototype", "Int16Array.prototype")}}</dt>
- <dd>Prototype pour les objets <em>TypedArray</em>.</dd>
-</dl>
-
-<h2 id="Méthodes">Méthodes</h2>
-
-<dl>
- <dt>{{jsxref("TypedArray.from", "Int16Array.from()")}}</dt>
- <dd>Crée un nouvel objet <code>Int16Array</code> à partir d'un objet semblable à un tableau ou d'un objet itérable. Voir également la page {{jsxref("Array.from()")}}.</dd>
- <dt>{{jsxref("TypedArray.of", "Int16Array.of()")}}</dt>
- <dd>Crée un nouvel objet <code>Int16Array</code> à partir d'un nombre variable d'arguments. Voir également la page {{jsxref("Array.of()")}}.</dd>
-</dl>
-
-<h2 id="Prototype_de_Int16Array">Prototype de <code>Int16Array</code></h2>
-
-<p>Tous les objets <code>Int16Array</code> héritent de {{jsxref("TypedArray.prototype", "%TypedArray%.prototype")}}.</p>
-
-<h3 id="Propriétés_2">Propriétés</h3>
-
-<dl>
- <dt><code>Int16Array.prototype.constructor</code></dt>
- <dd>Renvoie la fonction qui a créé le prototype de l'instance. Par défaut, ce sera le constructeur natif<code> Int16Array</code>.</dd>
- <dt>{{jsxref("TypedArray.prototype.buffer", "Int16Array.prototype.buffer")}} {{readonlyInline}}</dt>
- <dd>Renvoie l'{{jsxref("ArrayBuffer")}} référencée par l'objet <code>Int16Array</code>. Cette propriété est déterminée lors de la construction de l'objet et n'est accessible qu'en <strong>lecture seule</strong>.</dd>
- <dt>{{jsxref("TypedArray.prototype.byteLength", "Int16Array.prototype.byteLength")}} {{readonlyInline}}</dt>
- <dd>Renvoie la longueur, exprimée en octets, de l'objet <code>Int16Array</code> depuis le début de l'{{jsxref("ArrayBuffer")}} correspondant. Cette propriété est déterminée lors de la construction de l'objet et n'est accessible qu'en <strong>lecture seule</strong>.</dd>
- <dt>{{jsxref("TypedArray.prototype.byteOffset", "Int16Array.prototype.byteOffset")}} {{readonlyInline}}</dt>
- <dd>Renvoie le décalage, exprimé en octets, entre l'objet <code>Int16Array</code> et le début de l'{{jsxref("ArrayBuffer")}} correspondant. Cette propriété est déterminée lors de la construction de l'objet et n'est accessible qu'en <strong>lecture seule</strong>.</dd>
- <dt>{{jsxref("TypedArray.prototype.length", "Int16Array.prototype.length")}} {{readonlyInline}}</dt>
- <dd>Renvoie le nombre d'éléments contenus dans l'objet <code>Int16Array</code>. Cette propriété est déterminée lors de la construction de l'objet et n'est accessible qu'en <strong>lecture seule</strong>.</dd>
-</dl>
-
-<h3 id="Méthodes_2">Méthodes</h3>
-
-<dl>
- <dt>{{jsxref("TypedArray.copyWithin", "Int16Array.prototype.copyWithin()")}}</dt>
- <dd>Copie une suite d'éléments d'un tableau dans le tableau. Voir également {{jsxref("Array.prototype.copyWithin()")}}.</dd>
- <dt>{{jsxref("TypedArray.entries", "Int16Array.prototype.entries()")}}</dt>
- <dd>Renvoie un nouvel objet <code>Array Iterator</code> qui contient les paires clé/valeur pour chaque indice du tableau. Voir également {{jsxref("Array.prototype.entries()")}}.</dd>
- <dt>{{jsxref("TypedArray.every", "Int16Array.prototype.every()")}}</dt>
- <dd>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()")}}.</dd>
- <dt>{{jsxref("TypedArray.fill", "Int16Array.prototype.fill()")}}</dt>
- <dd>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()")}}.</dd>
- <dt>{{jsxref("TypedArray.filter", "Int16Array.prototype.filter()")}}</dt>
- <dd>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()")}}.</dd>
- <dt>{{jsxref("TypedArray.find", "Int16Array.prototype.find()")}}</dt>
- <dd>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 <code>undefined</code> sera renvoyé. Voir également {{jsxref("Array.prototype.find()")}}.</dd>
- <dt>{{jsxref("TypedArray.findIndex", "Int16Array.prototype.findIndex()")}}</dt>
- <dd>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()")}}.</dd>
- <dt>{{jsxref("TypedArray.forEach", "Int16Array.prototype.forEach()")}}</dt>
- <dd>Appelle une fonction pour chacun des élément du tableau. Voir également {{jsxref("Array.prototype.forEach()")}}.</dd>
- <dt>{{jsxref("TypedArray.includes", "Int16Array.prototype.includes()")}}</dt>
- <dd>Détermine si le tableau typé contient un élément donné. Cette méthode renvoie <code>true</code> ou <code>false</code> selon le cas de figure. Voir également {{jsxref("Array.prototype.includes()")}}.</dd>
- <dt>{{jsxref("TypedArray.indexOf", "Int16Array.prototype.indexOf()")}}</dt>
- <dd>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()")}}.</dd>
- <dt>{{jsxref("TypedArray.join", "Int16Array.prototype.join()")}}</dt>
- <dd>Fusionne l'ensemble des éléments du tableau en une chaîne de caractères. Voir également {{jsxref("Array.prototype.join()")}}.</dd>
- <dt>{{jsxref("TypedArray.keys", "Int16Array.prototype.keys()")}}</dt>
- <dd>Renvoie un nouvel objet <code>Array Iterator</code> qui contient les clés de chaque indice du tableau. Voir également {{jsxref("Array.prototype.keys()")}}.</dd>
- <dt>{{jsxref("TypedArray.lastIndexOf", "Int16Array.prototype.lastIndexOf()")}}</dt>
- <dd>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()")}}.</dd>
- <dt>{{jsxref("TypedArray.map", "Int16Array.prototype.map()")}}</dt>
- <dd>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()")}}.</dd>
- <dt>{{jsxref("TypedArray.move", "Int16Array.prototype.move()")}} {{non-standard_inline}} {{unimplemented_inline}}</dt>
- <dd>Ancienne version, non-standard, de {{jsxref("TypedArray.copyWithin", "Int16Array.prototype.copyWithin()")}}.</dd>
- <dt>{{jsxref("TypedArray.reduce", "Int16Array.prototype.reduce()")}}</dt>
- <dd>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()")}}.</dd>
- <dt>{{jsxref("TypedArray.reduceRight", "Int16Array.prototype.reduceRight()")}}</dt>
- <dd>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()")}}.</dd>
- <dt>{{jsxref("TypedArray.reverse", "Int16Array.prototype.reverse()")}}</dt>
- <dd>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()")}}.</dd>
- <dt>{{jsxref("TypedArray.set", "Int16Array.prototype.set()")}}</dt>
- <dd>Enregistre plusieurs valeurs dans le tableau typé à partir de valeurs d'un autre tableau.</dd>
- <dt>{{jsxref("TypedArray.slice", "Int16Array.prototype.slice()")}}</dt>
- <dd>Extrait un fragment d'un tableau et renvoie ce fragment. Voir également {{jsxref("Array.prototype.slice()")}}.</dd>
- <dt>{{jsxref("TypedArray.some", "Int16Array.prototype.some()")}}</dt>
- <dd>Renvoie <code>true</code> si au moins un des éléments remplit une condition donnée par une fonction de test. Voir également {{jsxref("Array.prototype.some()")}}.</dd>
- <dt>{{jsxref("TypedArray.sort", "Int16Array.prototype.sort()")}}</dt>
- <dd>Trie les éléments du tableau et renvoie ce tableau. Voir également {{jsxref("Array.prototype.sort()")}}.</dd>
- <dt>{{jsxref("TypedArray.subarray", "Int16Array.prototype.subarray()")}}</dt>
- <dd>Renvoie un nouvel objet <code>Int16Array</code> qui est le fragment du tableau courant, entre les indices de début et de fin donnés.</dd>
- <dt>{{jsxref("TypedArray.values", "Int16Array.prototype.values()")}}</dt>
- <dd>Renvoie un nouvel objet <code>Array Iterator</code> qui contient les valeurs correspondantes à chaque indice du tableau. Voir également {{jsxref("Array.prototype.values()")}}.</dd>
- <dt>{{jsxref("TypedArray.toLocaleString", "Int16Array.prototype.toLocaleString()")}}</dt>
- <dd>Renvoie une chaîne de caractères localisée qui représente le tableau et ses éléments. Voir également {{jsxref("Array.prototype.toLocaleString()")}}.</dd>
- <dt>{{jsxref("TypedArray.toString", "Int16Array.prototype.toString()")}}</dt>
- <dd>Renvoie une chaîne de caractère qui représente le tableau et ses éléments. Voir également {{jsxref("Array.prototype.toString()")}}.</dd>
- <dt>{{jsxref("TypedArray.@@iterator", "Int16Array.prototype[@@iterator]()")}}</dt>
- <dd>Renvoie un nouvel objet <code>Array Iterator</code> qui contient les valeurs correspondantes à chaque indice du tableau.</dd>
-</dl>
-
-<h2 id="Exemples">Exemples</h2>
-
-<p>Différentes façons de créer un <code>Int16Array</code> :</p>
-
-<pre class="brush: js">// Construction à partir d'une longueur
-var int16 = new Int16Array(2);
-int16[0] = 42;
-console.log(int16[0]); // 42
-console.log(int16.length); // 2
-console.log(int16.BYTES_PER_ELEMENT); // 2
-
-// Construction à partir d'un tableau
-var arr = new Int16Array([21,31]);
-console.log(arr[1]); // 31
-
-// Construction à partir d'un autre TypedArray
-var x = new Int16Array([21, 31]);
-var y = new Int16Array(x);
-console.log(y[0]); // 21
-
-// Construction à partir d'un ArrayBuffer
-var buffer = new ArrayBuffer(8);
-var z = new Int16Array(buffer, 0, 4);
-
-// Construction à partir d'un itérable
-var iterable = function*(){ yield* [1,2,3]; }();
-var int16 = new Int16Array(iterable);
-// Int16Array[1, 2, 3]
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Typed Array')}}</td>
-   <td>{{Spec2('Typed Array')}}</td>
-   <td>Remplacée dans ECMAScript 2015.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2015', '#table-49', 'TypedArray constructors')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td>Définition initiale au sein d'un standard ECMA. <code>new</code> est obligatoire.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#table-49', 'TypedArray constructors')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td>ECMAScript 2017 a modifié le constructeur <code>Int16Array</code> afin d'utiliser l'opération interne <code>ToIndex</code> pour permettre de l'utiliser sans argument.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Int16Array")}}</p>
-
-<h2 id="Notes_de_compatibilité">Notes de compatibilité</h2>
-
-<p>À partir d'ECMAScript 2015 (ES6), <code>Int16Array</code> doit être utilisé avec {{jsxref("Opérateurs/L_opérateur_new", "new")}}. Appeler un constructeur <code>Int16Array</code> comme une fonction, sans <code>new</code>, provoquera une exception {{jsxref("TypeError")}}.</p>
-
-<pre class="brush: js example-bad">var dv = Int16Array([1, 2, 3]);
-// TypeError: calling a builtin Int16Array constructor
-// without new is forbidden</pre>
-
-<pre class="brush: js example-good">var dv = new Int16Array([1, 2, 3]);</pre>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/JavaScript/Tableaux_typés" title="en/JavaScript typed arrays">Les tableaux typés (<em>typed arrays</em>) en JavaScript</a></li>
- <li>{{jsxref("ArrayBuffer")}}</li>
- <li>{{jsxref("DataView")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/int16array/index.md b/files/fr/web/javascript/reference/global_objects/int16array/index.md
new file mode 100644
index 0000000000..ecd15ddbf3
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/int16array/index.md
@@ -0,0 +1,180 @@
+---
+title: Int16Array
+slug: Web/JavaScript/Reference/Global_Objects/Int16Array
+tags:
+  - Constructor
+  - JavaScript
+  - Reference
+  - TypedArray
+  - TypedArrays
+translation_of: Web/JavaScript/Reference/Global_Objects/Int16Array
+original_slug: Web/JavaScript/Reference/Objets_globaux/Int16Array
+---
+{{JSRef}}
+
+Le tableau typé **`Int16Array`** permet de représenter un tableau d'entiers signés (en complément à deux) représentés sur 16 bits et dans l'ordre des octets de la plate-forme. Pour avoir un contrôle sur le boutisme utilisé, il faudra utiliser un objet {{jsxref("DataView")}} à la place. Les éléments du tableau sont initialisés à 0. Une fois le tableau construit, il est possible de faire référence aux éléments en utilisant les méthodes de l'objet ou en utilisant la notation usuelle de parcours d'un tableau (la syntaxe utilisant les crochets).
+
+## Syntaxe
+
+    new Int16Array(); // apparu avec ES2017
+    new Int16Array(longueur);
+    new Int16Array(tableauTypé);
+    new Int16Array(objet);
+    new Int16Array(buffer [, positionOctet [, longueur]]);
+
+Pour plus d'informations sur la syntaxe du constructeur, voir la page sur les [tableaux typés](/fr/docs/Web/JavaScript/Reference/Objets_globaux/TypedArray#Syntaxe) _(TypedArray)_.
+
+## Propriétés
+
+- {{jsxref("TypedArray.BYTES_PER_ELEMENT", "Int16Array.BYTES_PER_ELEMENT")}}
+  - : Renvoie un nombre représentant la taille d'un élément du tableau en termes d'octets. Dans le cas de `Int16Array`, la propriété vaudra 2.
+- `Int16Array.length`
+  - : Une propriété de longueur qui vaut 3. Pour connaître le nombre d'élément, voir {{jsxref("TypedArray.prototype.length", "Int16Array.prototype.length")}}.
+- {{jsxref("TypedArray.name", "Int16Array.name")}}
+  - : Renvoie la chaîne de caractère représentant le nom du constructeur. Dans le cas de `Int16Array`, la propriété vaudra "Int16Array".
+- {{jsxref("TypedArray.prototype", "Int16Array.prototype")}}
+  - : Prototype pour les objets _TypedArray_.
+
+## Méthodes
+
+- {{jsxref("TypedArray.from", "Int16Array.from()")}}
+  - : Crée un nouvel objet `Int16Array` à partir d'un objet semblable à un tableau ou d'un objet itérable. Voir également la page {{jsxref("Array.from()")}}.
+- {{jsxref("TypedArray.of", "Int16Array.of()")}}
+  - : Crée un nouvel objet `Int16Array` à partir d'un nombre variable d'arguments. Voir également la page {{jsxref("Array.of()")}}.
+
+## Prototype de `Int16Array`
+
+Tous les objets `Int16Array` héritent de {{jsxref("TypedArray.prototype", "%TypedArray%.prototype")}}.
+
+### Propriétés
+
+- `Int16Array.prototype.constructor`
+  - : Renvoie la fonction qui a créé le prototype de l'instance. Par défaut, ce sera le constructeur natif` Int16Array`.
+- {{jsxref("TypedArray.prototype.buffer", "Int16Array.prototype.buffer")}} {{readonlyInline}}
+  - : Renvoie l'{{jsxref("ArrayBuffer")}} référencée par l'objet `Int16Array`. Cette propriété est déterminée lors de la construction de l'objet et n'est accessible qu'en **lecture seule**.
+- {{jsxref("TypedArray.prototype.byteLength", "Int16Array.prototype.byteLength")}} {{readonlyInline}}
+  - : Renvoie la longueur, exprimée en octets, de l'objet `Int16Array` depuis le début de l'{{jsxref("ArrayBuffer")}} correspondant. Cette propriété est déterminée lors de la construction de l'objet et n'est accessible qu'en **lecture seule**.
+- {{jsxref("TypedArray.prototype.byteOffset", "Int16Array.prototype.byteOffset")}} {{readonlyInline}}
+  - : Renvoie le décalage, exprimé en octets, entre l'objet `Int16Array` et le début de l'{{jsxref("ArrayBuffer")}} correspondant. Cette propriété est déterminée lors de la construction de l'objet et n'est accessible qu'en **lecture seule**.
+- {{jsxref("TypedArray.prototype.length", "Int16Array.prototype.length")}} {{readonlyInline}}
+  - : Renvoie le nombre d'éléments contenus dans l'objet `Int16Array`. Cette propriété est déterminée lors de la construction de l'objet et n'est accessible qu'en **lecture seule**.
+
+### Méthodes
+
+- {{jsxref("TypedArray.copyWithin", "Int16Array.prototype.copyWithin()")}}
+  - : Copie une suite d'éléments d'un tableau dans le tableau. Voir également {{jsxref("Array.prototype.copyWithin()")}}.
+- {{jsxref("TypedArray.entries", "Int16Array.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", "Int16Array.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", "Int16Array.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", "Int16Array.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", "Int16Array.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", "Int16Array.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", "Int16Array.prototype.forEach()")}}
+  - : Appelle une fonction pour chacun des élément du tableau. Voir également {{jsxref("Array.prototype.forEach()")}}.
+- {{jsxref("TypedArray.includes", "Int16Array.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", "Int16Array.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", "Int16Array.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", "Int16Array.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", "Int16Array.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", "Int16Array.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", "Int16Array.prototype.move()")}} {{non-standard_inline}} {{unimplemented_inline}}
+  - : Ancienne version, non-standard, de {{jsxref("TypedArray.copyWithin", "Int16Array.prototype.copyWithin()")}}.
+- {{jsxref("TypedArray.reduce", "Int16Array.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", "Int16Array.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", "Int16Array.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", "Int16Array.prototype.set()")}}
+  - : Enregistre plusieurs valeurs dans le tableau typé à partir de valeurs d'un autre tableau.
+- {{jsxref("TypedArray.slice", "Int16Array.prototype.slice()")}}
+  - : Extrait un fragment d'un tableau et renvoie ce fragment. Voir également {{jsxref("Array.prototype.slice()")}}.
+- {{jsxref("TypedArray.some", "Int16Array.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", "Int16Array.prototype.sort()")}}
+  - : Trie les éléments du tableau et renvoie ce tableau. Voir également {{jsxref("Array.prototype.sort()")}}.
+- {{jsxref("TypedArray.subarray", "Int16Array.prototype.subarray()")}}
+  - : Renvoie un nouvel objet `Int16Array` qui est le fragment du tableau courant, entre les indices de début et de fin donnés.
+- {{jsxref("TypedArray.values", "Int16Array.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", "Int16Array.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", "Int16Array.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", "Int16Array.prototype[@@iterator]()")}}
+  - : Renvoie un nouvel objet `Array Iterator` qui contient les valeurs correspondantes à chaque indice du tableau.
+
+## Exemples
+
+Différentes façons de créer un `Int16Array` :
+
+```js
+// Construction à partir d'une longueur
+var int16 = new Int16Array(2);
+int16[0] = 42;
+console.log(int16[0]); // 42
+console.log(int16.length); // 2
+console.log(int16.BYTES_PER_ELEMENT); // 2
+
+// Construction à partir d'un tableau
+var arr = new Int16Array([21,31]);
+console.log(arr[1]); // 31
+
+// Construction à partir d'un autre TypedArray
+var x = new Int16Array([21, 31]);
+var y = new Int16Array(x);
+console.log(y[0]); // 21
+
+// Construction à partir d'un ArrayBuffer
+var buffer = new ArrayBuffer(8);
+var z = new Int16Array(buffer, 0, 4);
+
+// Construction à partir d'un itérable
+var iterable = function*(){ yield* [1,2,3]; }();
+var int16 = new Int16Array(iterable);
+// Int16Array[1, 2, 3]
+```
+
+## Spécifications
+
+| Spécification                                                                        | État                             | Commentaires                                                                                                                                     |
+| ------------------------------------------------------------------------------------ | -------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
+| {{SpecName('Typed Array')}}                                                 | {{Spec2('Typed Array')}} | Remplacée dans ECMAScript 2015.                                                                                                                  |
+| {{SpecName('ES2015', '#table-49', 'TypedArray constructors')}} | {{Spec2('ES2015')}}         | 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 `Int16Array` afin d'utiliser l'opération interne `ToIndex` pour permettre de l'utiliser sans argument. |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Int16Array")}}
+
+## Notes de compatibilité
+
+À partir d'ECMAScript 2015 (ES6), `Int16Array` doit être utilisé avec {{jsxref("Opérateurs/L_opérateur_new", "new")}}. Appeler un constructeur `Int16Array` comme une fonction, sans `new`, provoquera une exception {{jsxref("TypeError")}}.
+
+```js example-bad
+var dv = Int16Array([1, 2, 3]);
+// TypeError: calling a builtin Int16Array constructor
+// without new is forbidden
+```
+
+```js example-good
+var dv = new Int16Array([1, 2, 3]);
+```
+
+## Voir aussi
+
+- [Les tableaux typés (_typed arrays_) en JavaScript](/fr/docs/Web/JavaScript/Tableaux_typés "en/JavaScript typed arrays")
+- {{jsxref("ArrayBuffer")}}
+- {{jsxref("DataView")}}
diff --git a/files/fr/web/javascript/reference/global_objects/int32array/index.html b/files/fr/web/javascript/reference/global_objects/int32array/index.html
deleted file mode 100644
index b2eac551a2..0000000000
--- a/files/fr/web/javascript/reference/global_objects/int32array/index.html
+++ /dev/null
@@ -1,204 +0,0 @@
----
-title: Int32Array
-slug: Web/JavaScript/Reference/Global_Objects/Int32Array
-tags:
-  - Constructor
-  - JavaScript
-  - Reference
-  - TypedArray
-  - TypedArrays
-translation_of: Web/JavaScript/Reference/Global_Objects/Int32Array
-original_slug: Web/JavaScript/Reference/Objets_globaux/Int32Array
----
-<div>{{JSRef}}</div>
-
-<p>Le tableau typé <strong><code>Int32Array</code></strong> permet de représenter un tableau d'entiers signés (en complément à deux) représentés sur 32 bits et dans l'ordre des octets de la plate-forme. Pour avoir un contrôle sur le boutisme utilisé, il faudra utiliser un objet {{jsxref("DataView")}} à la place. Les éléments du tableau sont initialisés à 0. Une fois le tableau construit, il est possible de faire référence aux éléments en utilisant les méthodes de l'objet ou en utilisant la notation usuelle de parcours d'un tableau (la syntaxe utilisant les crochets).</p>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">new Int32Array(); // apparu avec ES2017
-new Int32Array(longueur);
-new Int32Array(tableauTypé);
-new Int32Array(objet);
-new Int32Array(buffer [, positionOctet [, longueur]]);</pre>
-
-<p>Pour plus d'informations sur la syntaxe du constructeur, voir la page sur les <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/TypedArray#Syntaxe">tableaux typés</a><em> (TypedArray)</em>.</p>
-
-<h2 id="Propriétés">Propriétés</h2>
-
-<dl>
- <dt>{{jsxref("TypedArray.BYTES_PER_ELEMENT", "Int32Array.BYTES_PER_ELEMENT")}}</dt>
- <dd>Renvoie un nombre représentant la taille d'un élément du tableau en termes d'octets. Dans le cas de <code>Int32Array</code>, la propriété vaudra 4.</dd>
- <dt><code>Int32Array.length</code></dt>
- <dd>Une propriété de longueur statique qui vaut 3. Pour connaître le nombre d'éléments, voir {{jsxref("TypedArray.prototype.length", "Int32Array.prototype.length")}}.</dd>
- <dt>{{jsxref("TypedArray.name", "Int32Array.name")}}</dt>
- <dd>Renvoie la chaîne de caractère représentant le nom du constructeur. Dans le cas de <code>Int32Array</code>, la propriété vaudra "Int32Array".</dd>
- <dt>{{jsxref("TypedArray.prototype", "Int32Array.prototype")}}</dt>
- <dd>Prototype pour les objets <em>TypedArray</em>.</dd>
-</dl>
-
-<h2 id="Méthodes">Méthodes</h2>
-
-<dl>
- <dt>Int32Array.from()</dt>
- <dd>Crée un nouvel objet <code>Int32Array</code> à partir d'un objet semblable à un tableau ou d'un objet itérable. Voir également la page {{jsxref("Array.from()")}}.</dd>
- <dt>Int32Array.of()</dt>
- <dd>Crée un nouvel objet <code>Int32Array</code> à partir d'un nombre variable d'arguments. Voir également la page {{jsxref("Array.of()")}}</dd>
-</dl>
-
-<h2 id="Prototype_de_Int32Array">Prototype de <code>Int32Array</code></h2>
-
-<p>Tous les objets <code>Int32Array</code> héritent de {{jsxref("TypedArray.prototype", "%TypedArray%.prototype")}}.</p>
-
-<h3 id="Propriétés_2">Propriétés</h3>
-
-<dl>
- <dt><code>Int32Array.prototype.constructor</code></dt>
- <dd>Renvoie la fonction qui a créé le prototype de l'instance. Par défaut, ce sera le constructeur natif<code> Int32Array</code>.</dd>
- <dt>{{jsxref("TypedArray.prototype.buffer", "Int32Array.prototype.buffer")}} {{readonlyInline}}</dt>
- <dd>Renvoie l'{{jsxref("ArrayBuffer")}} référencée par l'objet <code>Int32Array</code>. Cette propriété est déterminée lors de la construction de l'objet et n'est accessible qu'en <strong>lecture seule</strong>.</dd>
- <dt>{{jsxref("TypedArray.prototype.byteLength", "Int32Array.prototype.byteLength")}} {{readonlyInline}}</dt>
- <dd>Renvoie la longueur, exprimée en octets, de l'objet <code>Int32Array</code> depuis le début de l'{{jsxref("ArrayBuffer")}} correspondant. Cette propriété est déterminée lors de la construction de l'objet et n'est accessible qu'en <strong>lecture seule</strong>.</dd>
- <dt>{{jsxref("TypedArray.prototype.byteOffset", "Int32Array.prototype.byteOffset")}} {{readonlyInline}}</dt>
- <dd>Renvoie le décalage, exprimé en octets, entre l'objet <code>Int32Array</code> et le début de l'{{jsxref("ArrayBuffer")}} correspondant. Cette propriété est déterminée lors de la construction de l'objet et n'est accessible qu'en <strong>lecture seule</strong>.</dd>
- <dt>{{jsxref("TypedArray.prototype.length", "Int32Array.prototype.length")}} {{readonlyInline}}</dt>
- <dd>Renvoie le nombre d'éléments contenus dans l'objet <code>Int32Array</code>. Cette propriété est déterminée lors de la construction de l'objet et n'est accessible qu'en <strong>lecture seule</strong>.</dd>
-</dl>
-
-<h3 id="Méthodes_2">Méthodes</h3>
-
-<dl>
- <dt>{{jsxref("TypedArray.copyWithin", "Int32Array.prototype.copyWithin()")}}</dt>
- <dd>Copie une suite d'éléments d'un tableau dans le tableau. Voir également {{jsxref("Array.prototype.copyWithin()")}}.</dd>
- <dt>{{jsxref("TypedArray.entries", "Int32Array.prototype.entries()")}}</dt>
- <dd>Renvoie un nouvel objet <code>Array Iterator</code> qui contient les paires clé/valeur pour chaque indice du tableau. Voir également {{jsxref("Array.prototype.entries()")}}.</dd>
- <dt>{{jsxref("TypedArray.every", "Int32Array.prototype.every()")}}</dt>
- <dd>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()")}}.</dd>
- <dt>{{jsxref("TypedArray.fill", "Int32Array.prototype.fill()")}}</dt>
- <dd>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()")}}.</dd>
- <dt>{{jsxref("TypedArray.filter", "Int32Array.prototype.filter()")}}</dt>
- <dd>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()")}}.</dd>
- <dt>{{jsxref("TypedArray.find", "Int32Array.prototype.find()")}}</dt>
- <dd>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 <code>undefined</code> sera renvoyé. Voir également {{jsxref("Array.prototype.find()")}}.</dd>
- <dt>{{jsxref("TypedArray.findIndex", "Int32Array.prototype.findIndex()")}}</dt>
- <dd>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()")}}.</dd>
- <dt>{{jsxref("TypedArray.forEach", "Int32Array.prototype.forEach()")}}</dt>
- <dd>Appelle une fonction pour chacun des élément du tableau. Voir également {{jsxref("Array.prototype.forEach()")}}.</dd>
- <dt>{{jsxref("TypedArray.includes", "Int32Array.prototype.includes()")}}</dt>
- <dd>Détermine si le tableau typé contient un élément donné. Cette méthode renvoie <code>true</code> ou <code>false</code> selon le cas de figure. Voir également {{jsxref("Array.prototype.includes()")}}.</dd>
- <dt>{{jsxref("TypedArray.indexOf", "Int32Array.prototype.indexOf()")}}</dt>
- <dd>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()")}}.</dd>
- <dt>{{jsxref("TypedArray.join", "Int32Array.prototype.join()")}}</dt>
- <dd>Fusionne l'ensemble des éléments du tableau en une chaîne de caractères. Voir également {{jsxref("Array.prototype.join()")}}.</dd>
- <dt>{{jsxref("TypedArray.keys", "Int32Array.prototype.keys()")}}</dt>
- <dd>Renvoie un nouvel objet <code>Array Iterator</code> qui contient les clés de chaque indice du tableau. Voir également {{jsxref("Array.prototype.keys()")}}.</dd>
- <dt>{{jsxref("TypedArray.lastIndexOf", "Int32Array.prototype.lastIndexOf()")}}</dt>
- <dd>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()")}}.</dd>
- <dt>{{jsxref("TypedArray.map", "Int32Array.prototype.map()")}}</dt>
- <dd>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()")}}.</dd>
- <dt>{{jsxref("TypedArray.move", "Int32Array.prototype.move()")}} {{non-standard_inline}} {{unimplemented_inline}}</dt>
- <dd>Ancienne version, non-standard, de {{jsxref("TypedArray.copyWithin", "Int32Array.prototype.copyWithin()")}}.</dd>
- <dt>{{jsxref("TypedArray.reduce", "Int32Array.prototype.reduce()")}}</dt>
- <dd>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()")}}.</dd>
- <dt>{{jsxref("TypedArray.reduceRight", "Int32Array.prototype.reduceRight()")}}</dt>
- <dd>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()")}}.</dd>
- <dt>{{jsxref("TypedArray.reverse", "Int32Array.prototype.reverse()")}}</dt>
- <dd>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()")}}.</dd>
- <dt>{{jsxref("TypedArray.set", "Int32Array.prototype.set()")}}</dt>
- <dd>Enregistre plusieurs valeurs dans le tableau typé à partir de valeurs d'un autre tableau.</dd>
- <dt>{{jsxref("TypedArray.slice", "Int32Array.prototype.slice()")}}</dt>
- <dd>Extrait un fragment d'un tableau et renvoie ce fragment. Voir également {{jsxref("Array.prototype.slice()")}}.</dd>
- <dt>{{jsxref("TypedArray.some", "Int32Array.prototype.some()")}}</dt>
- <dd>Renvoie <code>true</code> si au moins un des éléments remplit une condition donnée par une fonction de test. Voir également {{jsxref("Array.prototype.some()")}}.</dd>
- <dt>{{jsxref("TypedArray.sort", "Int32Array.prototype.sort()")}}</dt>
- <dd>Trie les éléments du tableau et renvoie ce tableau. Voir également {{jsxref("Array.prototype.sort()")}}.</dd>
- <dt>{{jsxref("TypedArray.subarray", "Int32Array.prototype.subarray()")}}</dt>
- <dd>Renvoie un nouvel objet <code>Int32Array</code> qui est le fragment du tableau courant, entre les indices de début et de fin donnés.</dd>
- <dt>{{jsxref("TypedArray.values", "Int32Array.prototype.values()")}}</dt>
- <dd>Renvoie un nouvel objet <code>Array Iterator</code> qui contient les valeurs correspondantes à chaque indice du tableau. Voir également {{jsxref("Array.prototype.values()")}}.</dd>
- <dt>{{jsxref("TypedArray.toLocaleString", "Int32Array.prototype.toLocaleString()")}}</dt>
- <dd>Renvoie une chaîne de caractères localisée qui représente le tableau et ses éléments. Voir également {{jsxref("Array.prototype.toLocaleString()")}}.</dd>
- <dt>{{jsxref("TypedArray.toString", "Int32Array.prototype.toString()")}}</dt>
- <dd>Renvoie une chaîne de caractère qui représente le tableau et ses éléments. Voir également {{jsxref("Array.prototype.toString()")}}.</dd>
- <dt>{{jsxref("TypedArray.@@iterator", "Int32Array.prototype[@@iterator]()")}}</dt>
- <dd>Renvoie un nouvel objet <code>Array Iterator</code> qui contient les valeurs correspondantes à chaque indice du tableau.</dd>
-</dl>
-
-<h2 id="Exemples">Exemples</h2>
-
-<p>Différentes façons de créer un objet <code>Int32Array</code> :</p>
-
-<pre class="brush: js">// Construction à partir d'une longueur
-var int32 = new Int32Array(2);
-int32[0] = 42;
-console.log(int32[0]); // 42
-console.log(int32.length); // 2
-console.log(int32.BYTES_PER_ELEMENT); // 4
-
-// Construction à partir d'un tableau
-var arr = new Int32Array([21,31]);
-console.log(arr[1]); // 31
-
-// Construction à partir d'un autre TypedArray
-var x = new Int32Array([21, 31]);
-var y = new Int32Array(x);
-console.log(y[0]); // 21
-
-// Construction à partir d'un ArrayBuffer
-var buffer = new ArrayBuffer(16);
-var z = new Int32Array(buffer, 0, 4);
-
-// Construction à partir d'un itérable
-var iterable = function*(){ yield* [1,2,3]; }();
-var int32 = new Int32Array(iterable);
-// Int32Array[1, 2, 3]
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Typed Array')}}</td>
-   <td>{{Spec2('Typed Array')}}</td>
-   <td>Remplacée dans ECMAScript 2015.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2015', '#table-49', 'TypedArray constructors')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td>Définition initiale au sein d'un standard ECMA. <code>new</code> est obligatoire.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#table-49', 'TypedArray constructors')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td>ECMAScript 2017 a modifié le constructeur afin de pouvoir utiliser l'opération interne <code>ToIndex</code> et permettre de l'utiliser sans argument.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Int32Array")}}</p>
-
-<h2 id="Notes_de_compatibilité">Notes de compatibilité</h2>
-
-<p>À partir d'ECMAScript 2015 (ES6), <code>Int32Array</code> doit être utilisé avec {{jsxref("Opérateurs/L_opérateur_new", "new")}}. Appeler un constructeur <code>Int32Array</code> comme une fonction, sans <code>new</code>, provoquera une exception {{jsxref("TypeError")}}.</p>
-
-<pre class="brush: js example-bad">var dv = Int32Array([1, 2, 3]);
-// TypeError: calling a builtin Int32Array constructor
-// without new is forbidden</pre>
-
-<pre class="brush: js example-good">var dv = new Int32Array([1, 2, 3]);</pre>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/JavaScript/Tableaux_typés" title="en/JavaScript typed arrays">Les tableaux typés (<em>typed arrays</em>) en JavaScript</a></li>
- <li>{{jsxref("ArrayBuffer")}}</li>
- <li>{{jsxref("DataView")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/int32array/index.md b/files/fr/web/javascript/reference/global_objects/int32array/index.md
new file mode 100644
index 0000000000..04ab728a41
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/int32array/index.md
@@ -0,0 +1,180 @@
+---
+title: Int32Array
+slug: Web/JavaScript/Reference/Global_Objects/Int32Array
+tags:
+  - Constructor
+  - JavaScript
+  - Reference
+  - TypedArray
+  - TypedArrays
+translation_of: Web/JavaScript/Reference/Global_Objects/Int32Array
+original_slug: Web/JavaScript/Reference/Objets_globaux/Int32Array
+---
+{{JSRef}}
+
+Le tableau typé **`Int32Array`** permet de représenter un tableau d'entiers signés (en complément à deux) représentés sur 32 bits et dans l'ordre des octets de la plate-forme. Pour avoir un contrôle sur le boutisme utilisé, il faudra utiliser un objet {{jsxref("DataView")}} à la place. Les éléments du tableau sont initialisés à 0. Une fois le tableau construit, il est possible de faire référence aux éléments en utilisant les méthodes de l'objet ou en utilisant la notation usuelle de parcours d'un tableau (la syntaxe utilisant les crochets).
+
+## Syntaxe
+
+    new Int32Array(); // apparu avec ES2017
+    new Int32Array(longueur);
+    new Int32Array(tableauTypé);
+    new Int32Array(objet);
+    new Int32Array(buffer [, positionOctet [, longueur]]);
+
+Pour plus d'informations sur la syntaxe du constructeur, voir la page sur les [tableaux typés](/fr/docs/Web/JavaScript/Reference/Objets_globaux/TypedArray#Syntaxe) _(TypedArray)_.
+
+## Propriétés
+
+- {{jsxref("TypedArray.BYTES_PER_ELEMENT", "Int32Array.BYTES_PER_ELEMENT")}}
+  - : Renvoie un nombre représentant la taille d'un élément du tableau en termes d'octets. Dans le cas de `Int32Array`, la propriété vaudra 4.
+- `Int32Array.length`
+  - : Une propriété de longueur statique qui vaut 3. Pour connaître le nombre d'éléments, voir {{jsxref("TypedArray.prototype.length", "Int32Array.prototype.length")}}.
+- {{jsxref("TypedArray.name", "Int32Array.name")}}
+  - : Renvoie la chaîne de caractère représentant le nom du constructeur. Dans le cas de `Int32Array`, la propriété vaudra "Int32Array".
+- {{jsxref("TypedArray.prototype", "Int32Array.prototype")}}
+  - : Prototype pour les objets _TypedArray_.
+
+## Méthodes
+
+- Int32Array.from()
+  - : Crée un nouvel objet `Int32Array` à partir d'un objet semblable à un tableau ou d'un objet itérable. Voir également la page {{jsxref("Array.from()")}}.
+- Int32Array.of()
+  - : Crée un nouvel objet `Int32Array` à partir d'un nombre variable d'arguments. Voir également la page {{jsxref("Array.of()")}}
+
+## Prototype de `Int32Array`
+
+Tous les objets `Int32Array` héritent de {{jsxref("TypedArray.prototype", "%TypedArray%.prototype")}}.
+
+### Propriétés
+
+- `Int32Array.prototype.constructor`
+  - : Renvoie la fonction qui a créé le prototype de l'instance. Par défaut, ce sera le constructeur natif` Int32Array`.
+- {{jsxref("TypedArray.prototype.buffer", "Int32Array.prototype.buffer")}} {{readonlyInline}}
+  - : Renvoie l'{{jsxref("ArrayBuffer")}} référencée par l'objet `Int32Array`. Cette propriété est déterminée lors de la construction de l'objet et n'est accessible qu'en **lecture seule**.
+- {{jsxref("TypedArray.prototype.byteLength", "Int32Array.prototype.byteLength")}} {{readonlyInline}}
+  - : Renvoie la longueur, exprimée en octets, de l'objet `Int32Array` depuis le début de l'{{jsxref("ArrayBuffer")}} correspondant. Cette propriété est déterminée lors de la construction de l'objet et n'est accessible qu'en **lecture seule**.
+- {{jsxref("TypedArray.prototype.byteOffset", "Int32Array.prototype.byteOffset")}} {{readonlyInline}}
+  - : Renvoie le décalage, exprimé en octets, entre l'objet `Int32Array` et le début de l'{{jsxref("ArrayBuffer")}} correspondant. Cette propriété est déterminée lors de la construction de l'objet et n'est accessible qu'en **lecture seule**.
+- {{jsxref("TypedArray.prototype.length", "Int32Array.prototype.length")}} {{readonlyInline}}
+  - : Renvoie le nombre d'éléments contenus dans l'objet `Int32Array`. Cette propriété est déterminée lors de la construction de l'objet et n'est accessible qu'en **lecture seule**.
+
+### Méthodes
+
+- {{jsxref("TypedArray.copyWithin", "Int32Array.prototype.copyWithin()")}}
+  - : Copie une suite d'éléments d'un tableau dans le tableau. Voir également {{jsxref("Array.prototype.copyWithin()")}}.
+- {{jsxref("TypedArray.entries", "Int32Array.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", "Int32Array.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", "Int32Array.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", "Int32Array.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", "Int32Array.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", "Int32Array.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", "Int32Array.prototype.forEach()")}}
+  - : Appelle une fonction pour chacun des élément du tableau. Voir également {{jsxref("Array.prototype.forEach()")}}.
+- {{jsxref("TypedArray.includes", "Int32Array.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", "Int32Array.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", "Int32Array.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", "Int32Array.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", "Int32Array.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", "Int32Array.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", "Int32Array.prototype.move()")}} {{non-standard_inline}} {{unimplemented_inline}}
+  - : Ancienne version, non-standard, de {{jsxref("TypedArray.copyWithin", "Int32Array.prototype.copyWithin()")}}.
+- {{jsxref("TypedArray.reduce", "Int32Array.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", "Int32Array.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", "Int32Array.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", "Int32Array.prototype.set()")}}
+  - : Enregistre plusieurs valeurs dans le tableau typé à partir de valeurs d'un autre tableau.
+- {{jsxref("TypedArray.slice", "Int32Array.prototype.slice()")}}
+  - : Extrait un fragment d'un tableau et renvoie ce fragment. Voir également {{jsxref("Array.prototype.slice()")}}.
+- {{jsxref("TypedArray.some", "Int32Array.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", "Int32Array.prototype.sort()")}}
+  - : Trie les éléments du tableau et renvoie ce tableau. Voir également {{jsxref("Array.prototype.sort()")}}.
+- {{jsxref("TypedArray.subarray", "Int32Array.prototype.subarray()")}}
+  - : Renvoie un nouvel objet `Int32Array` qui est le fragment du tableau courant, entre les indices de début et de fin donnés.
+- {{jsxref("TypedArray.values", "Int32Array.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", "Int32Array.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", "Int32Array.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", "Int32Array.prototype[@@iterator]()")}}
+  - : Renvoie un nouvel objet `Array Iterator` qui contient les valeurs correspondantes à chaque indice du tableau.
+
+## Exemples
+
+Différentes façons de créer un objet `Int32Array` :
+
+```js
+// Construction à partir d'une longueur
+var int32 = new Int32Array(2);
+int32[0] = 42;
+console.log(int32[0]); // 42
+console.log(int32.length); // 2
+console.log(int32.BYTES_PER_ELEMENT); // 4
+
+// Construction à partir d'un tableau
+var arr = new Int32Array([21,31]);
+console.log(arr[1]); // 31
+
+// Construction à partir d'un autre TypedArray
+var x = new Int32Array([21, 31]);
+var y = new Int32Array(x);
+console.log(y[0]); // 21
+
+// Construction à partir d'un ArrayBuffer
+var buffer = new ArrayBuffer(16);
+var z = new Int32Array(buffer, 0, 4);
+
+// Construction à partir d'un itérable
+var iterable = function*(){ yield* [1,2,3]; }();
+var int32 = new Int32Array(iterable);
+// Int32Array[1, 2, 3]
+```
+
+## Spécifications
+
+| Spécification                                                                        | État                             | Commentaires                                                                                                                               |
+| ------------------------------------------------------------------------------------ | -------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ |
+| {{SpecName('Typed Array')}}                                                 | {{Spec2('Typed Array')}} | Remplacée dans ECMAScript 2015.                                                                                                            |
+| {{SpecName('ES2015', '#table-49', 'TypedArray constructors')}} | {{Spec2('ES2015')}}         | 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 afin de pouvoir utiliser l'opération interne `ToIndex` et permettre de l'utiliser sans argument. |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Int32Array")}}
+
+## Notes de compatibilité
+
+À partir d'ECMAScript 2015 (ES6), `Int32Array` doit être utilisé avec {{jsxref("Opérateurs/L_opérateur_new", "new")}}. Appeler un constructeur `Int32Array` comme une fonction, sans `new`, provoquera une exception {{jsxref("TypeError")}}.
+
+```js example-bad
+var dv = Int32Array([1, 2, 3]);
+// TypeError: calling a builtin Int32Array constructor
+// without new is forbidden
+```
+
+```js example-good
+var dv = new Int32Array([1, 2, 3]);
+```
+
+## Voir aussi
+
+- [Les tableaux typés (_typed arrays_) en JavaScript](/fr/docs/Web/JavaScript/Tableaux_typés "en/JavaScript typed arrays")
+- {{jsxref("ArrayBuffer")}}
+- {{jsxref("DataView")}}
diff --git a/files/fr/web/javascript/reference/global_objects/int8array/index.html b/files/fr/web/javascript/reference/global_objects/int8array/index.html
deleted file mode 100644
index b15a6f7ffd..0000000000
--- a/files/fr/web/javascript/reference/global_objects/int8array/index.html
+++ /dev/null
@@ -1,205 +0,0 @@
----
-title: Int8Array
-slug: Web/JavaScript/Reference/Global_Objects/Int8Array
-tags:
-  - Constructor
-  - Int8Array
-  - JavaScript
-  - Reference
-  - TypedArray
-  - TypedArrrays
-translation_of: Web/JavaScript/Reference/Global_Objects/Int8Array
-original_slug: Web/JavaScript/Reference/Objets_globaux/Int8Array
----
-<div>{{JSRef}}</div>
-
-<p>Le tableau typé <strong><code>Int8Array</code></strong> permet de représenter un tableau d'entiers signés (en complément à deux) représentés sur 8 bits. Les éléments du tableau sont initialisés à 0. Une fois le tableau construit, il est possible de faire référence aux éléments en utilisant les méthodes de l'objet ou en utilisant la notation usuelle de parcours d'un tableau (la syntaxe utilisant les crochets).</p>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">new Int8Array(); // apparu avec ES2017
-new Int8Array(length);
-new Int8Array(typedArray);
-new Int8Array(object);
-new Int8Array(buffer [, byteOffset [, length]]);</pre>
-
-<p>Pour plus d'informations sur la syntaxe du constructeur, voir la page sur les <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/TypedArray#Syntaxe">tableaux typés</a><em> (TypedArray)</em>.</p>
-
-<h2 id="Propriétés">Propriétés</h2>
-
-<dl>
- <dt>{{jsxref("TypedArray.BYTES_PER_ELEMENT", "Int8Array.BYTES_PER_ELEMENT")}}</dt>
- <dd>Renvoie un nombre représentant la taille d'un élément du tableau en termes d'octets. Dans le cas de <code>Int8Array</code>, la propriété vaudra 1.</dd>
- <dt><code>Int8Array.length</code></dt>
- <dd>Une propriété de longueur statique qui vaut 3. Pour connaître le nombre d'élément, voir {{jsxref("TypedArray.prototype.length", "Int8Array.prototype.length")}}.</dd>
- <dt>{{jsxref("TypedArray.name", "Int8Array.name")}}</dt>
- <dd>Renvoie la chaîne de caractère représentant le nom du constructeur. Dans le cas de <code>Int8Array</code>, la propriété vaudra "Int8Array".</dd>
- <dt>{{jsxref("TypedArray.prototype", "Int8Array.prototype")}}</dt>
- <dd>Prototype pour les objets <em>TypedArray</em>.</dd>
-</dl>
-
-<h2 id="Méthodes">Méthodes</h2>
-
-<dl>
- <dt>Int8Array.from()</dt>
- <dd>Crée un nouvel objet <code>Int8Array</code> à partir d'un objet semblable à un tableau ou d'un objet itérable. Voir également la page {{jsxref("Array.from()")}}.</dd>
- <dt>Int8Array.of()</dt>
- <dd>Crée un nouvel objet <code>Int8Array</code> à partir d'un nombre variable d'arguments. Voir également la page {{jsxref("Array.of()")}}.</dd>
-</dl>
-
-<h2 id="Prototype_de_Int8Array">Prototype de <code>Int8Array</code></h2>
-
-<p>Tous les objets <code>Int8Array</code> héritent de {{jsxref("TypedArray.prototype", "%TypedArray%.prototype")}}.</p>
-
-<h3 id="Propriétés_2">Propriétés</h3>
-
-<dl>
- <dt><code>Int8Array.prototype.constructor</code></dt>
- <dd>Renvoie la fonction qui a créé l'instance. Par défaut, c'est le constructeur <code>Int8Array</code>.</dd>
- <dt>{{jsxref("TypedArray.prototype.buffer", "Int8Array.prototype.buffer")}} {{readonlyInline}}</dt>
- <dd>Renvoie l'objet {{jsxref("ArrayBuffer")}} auquel fait référence le tableau <code>Int8Array</code>. Cette valeur est fixée lors de la construction et est uniquement disponible en lecture.</dd>
- <dt>{{jsxref("TypedArray.prototype.byteLength", "Int8Array.prototype.byteLength")}} {{readonlyInline}}</dt>
- <dd>Renvoie la longueur (exprimée en octet) du tableau <code>Int8Array</code> depuis le début du tampon {{jsxref("ArrayBuffer")}}. Cette valeur est fixée lors de la construction et est uniquement disponible en lecture.</dd>
- <dt>{{jsxref("TypedArray.prototype.byteOffset", "Int8Array.prototype.byteOffset")}} {{readonlyInline}}</dt>
- <dd>Renvoie le décalage (exprimé en octets) du tableau <code>Int8Array</code> par rapport au début du tampon {{jsxref("ArrayBuffer")}}. Cette valeur est fixée lors de la construction et est uniquement disponible en lecture.</dd>
- <dt>{{jsxref("TypedArray.prototype.length", "Int8Array.prototype.length")}} {{readonlyInline}}</dt>
- <dd>Renvoie le nombre d'éléments contenus dans le tableau <code>Int8Array</code>. Cette valeur est fixée lors de la construction et est uniquement disponible en lecture.</dd>
-</dl>
-
-<h3 id="Méthodes_2">Méthodes</h3>
-
-<dl>
- <dt>{{jsxref("TypedArray.copyWithin", "Int8Array.prototype.copyWithin()")}}</dt>
- <dd>Copie une suite d'éléments d'un tableau dans le tableau. Voir également {{jsxref("Array.prototype.copyWithin()")}}.</dd>
- <dt>{{jsxref("TypedArray.entries", "Int8Array.prototype.entries()")}}</dt>
- <dd>Renvoie un nouvel objet <code>Array Iterator</code> qui contient les paires clé/valeur pour chaque indice du tableau. Voir également {{jsxref("Array.prototype.entries()")}}.</dd>
- <dt>{{jsxref("TypedArray.every", "Int8Array.prototype.every()")}}</dt>
- <dd>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()")}}.</dd>
- <dt>{{jsxref("TypedArray.fill", "Int8Array.prototype.fill()")}}</dt>
- <dd>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()")}}.</dd>
- <dt>{{jsxref("TypedArray.filter", "Int8Array.prototype.filter()")}}</dt>
- <dd>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()")}}.</dd>
- <dt>{{jsxref("TypedArray.find", "Int8Array.prototype.find()")}}</dt>
- <dd>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 <code>undefined</code> sera renvoyé. Voir également {{jsxref("Array.prototype.find()")}}.</dd>
- <dt>{{jsxref("TypedArray.findIndex", "Int8Array.prototype.findIndex()")}}</dt>
- <dd>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()")}}.</dd>
- <dt>{{jsxref("TypedArray.forEach", "Int8Array.prototype.forEach()")}}</dt>
- <dd>Appelle une fonction pour chacun des élément du tableau. Voir également {{jsxref("Array.prototype.forEach()")}}.</dd>
- <dt>{{jsxref("TypedArray.includes", "Int8Array.prototype.includes()")}}</dt>
- <dd>Détermine si le tableau typé contient un élément donné. Cette méthode renvoie <code>true</code> ou <code>false</code> selon le cas de figure. Voir également {{jsxref("Array.prototype.includes()")}}.</dd>
- <dt>{{jsxref("TypedArray.indexOf", "Int8Array.prototype.indexOf()")}}</dt>
- <dd>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()")}}.</dd>
- <dt>{{jsxref("TypedArray.join", "Int8Array.prototype.join()")}}</dt>
- <dd>Fusionne l'ensemble des éléments du tableau en une chaîne de caractères. Voir également {{jsxref("Array.prototype.join()")}}.</dd>
- <dt>{{jsxref("TypedArray.keys", "Int8Array.prototype.keys()")}}</dt>
- <dd>Renvoie un nouvel objet <code>Array Iterator</code> qui contient les clés de chaque indice du tableau. Voir également {{jsxref("Array.prototype.keys()")}}.</dd>
- <dt>{{jsxref("TypedArray.lastIndexOf", "Int8Array.prototype.lastIndexOf()")}}</dt>
- <dd>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()")}}.</dd>
- <dt>{{jsxref("TypedArray.map", "Int8Array.prototype.map()")}}</dt>
- <dd>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()")}}.</dd>
- <dt>{{jsxref("TypedArray.move", "Int8Array.prototype.move()")}} {{non-standard_inline}} {{unimplemented_inline}}</dt>
- <dd>Ancienne version, non-standard, de {{jsxref("TypedArray.copyWithin", "Int8Array.prototype.copyWithin()")}}.</dd>
- <dt>{{jsxref("TypedArray.reduce", "Int8Array.prototype.reduce()")}}</dt>
- <dd>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()")}}.</dd>
- <dt>{{jsxref("TypedArray.reduceRight", "Int8Array.prototype.reduceRight()")}}</dt>
- <dd>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()")}}.</dd>
- <dt>{{jsxref("TypedArray.reverse", "Int8Array.prototype.reverse()")}}</dt>
- <dd>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()")}}.</dd>
- <dt>{{jsxref("TypedArray.set", "Int8Array.prototype.set()")}}</dt>
- <dd>Enregistre plusieurs valeurs dans le tableau typé à partir de valeurs d'un autre tableau.</dd>
- <dt>{{jsxref("TypedArray.slice", "Int8Array.prototype.slice()")}}</dt>
- <dd>Extrait un fragment d'un tableau et renvoie ce fragment. Voir également {{jsxref("Array.prototype.slice()")}}.</dd>
- <dt>{{jsxref("TypedArray.some", "Int8Array.prototype.some()")}}</dt>
- <dd>Renvoie <code>true</code> si au moins un des éléments remplit une condition donnée par une fonction de test. Voir également {{jsxref("Array.prototype.some()")}}.</dd>
- <dt>{{jsxref("TypedArray.sort", "Int8Array.prototype.sort()")}}</dt>
- <dd>Trie les éléments du tableau et renvoie ce tableau. Voir également {{jsxref("Array.prototype.sort()")}}.</dd>
- <dt>{{jsxref("TypedArray.subarray", "Int8Array.prototype.subarray()")}}</dt>
- <dd>Renvoie un nouvel objet <code>Int8Array</code> qui est le fragment du tableau courant, entre les indices de début et de fin donnés.</dd>
- <dt>{{jsxref("TypedArray.values", "Int8Array.prototype.values()")}}</dt>
- <dd>Renvoie un nouvel objet <code>Array Iterator</code> qui contient les valeurs correspondantes à chaque indice du tableau. Voir également {{jsxref("Array.prototype.values()")}}.</dd>
- <dt>{{jsxref("TypedArray.toLocaleString", "Int8Array.prototype.toLocaleString()")}}</dt>
- <dd>Renvoie une chaîne de caractères localisée qui représente le tableau et ses éléments. Voir également {{jsxref("Array.prototype.toLocaleString()")}}.</dd>
- <dt>{{jsxref("TypedArray.toString", "Int8Array.prototype.toString()")}}</dt>
- <dd>Renvoie une chaîne de caractère qui représente le tableau et ses éléments. Voir également {{jsxref("Array.prototype.toString()")}}.</dd>
- <dt>{{jsxref("TypedArray.@@iterator", "Int8Array.prototype[@@iterator]()")}}</dt>
- <dd>Renvoie un nouvel objet <code>Array Iterator</code> qui contient les valeurs correspondantes à chaque indice du tableau.</dd>
-</dl>
-
-<h2 id="Exemples">Exemples</h2>
-
-<p>Différentes façons de créer un objet <code>Int8Array</code> :</p>
-
-<pre class="brush: js">// Construction à partir d'une longueur
-var int8 = new Int8Array(2);
-int8[0] = 42;
-console.log(int8[0]); // 42
-console.log(int8.length); // 2
-console.log(int8.BYTES_PER_ELEMENT); // 1
-
-// Construction à partir d'un tableau
-var arr = new Int8Array([21,31]);
-console.log(arr[1]); // 31
-
-// Construction à partir d'un autre TypedArray
-var x = new Int8Array([21, 31]);
-var y = new Int8Array(x);
-console.log(y[0]); // 21
-
-// Construction à partir d'un ArrayBuffer
-var buffer = new ArrayBuffer(8);
-var z = new Int8Array(buffer, 1, 4);
-
-// Construction à partir d'un itérable
-var iterable = function*(){ yield* [1,2,3]; }();
-var int8 = new Int8Array(iterable);
-// Int8Array[1, 2, 3]
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Typed Array')}}</td>
-   <td>{{Spec2('Typed Array')}}</td>
-   <td>Remplacée dans ECMAScript 2015.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2015', '#table-49', 'TypedArray constructors')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td>Définition initiale au sein d'un standard ECMA. <code>new</code> est obligatoire.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#table-49', 'TypedArray constructors')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td>ECMAScript 2017 a modifié le constructeur afin d'utiliser l'opération interne <code>ToIndex</code> et permettre de l'utiliser sans constructeur.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Int8Array")}}</p>
-
-<h2 id="Notes_de_compatibilité">Notes de compatibilité</h2>
-
-<p>À partir d'ECMAScript 2015 (ES6), <code>Int8Array</code> doit être utilisé avec {{jsxref("Opérateurs/L_opérateur_new", "new")}}. Appeler un constructeur <code>Int8Array</code> comme une fonction, sans <code>new</code>, provoquera une exception {{jsxref("TypeError")}}.</p>
-
-<pre class="brush: js example-bad">var dv = Int8Array([1, 2, 3]);
-// TypeError: calling a builtin Int8Array constructor
-// without new is forbidden</pre>
-
-<pre class="brush: js example-good">var dv = new Int8Array([1, 2, 3]);</pre>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/JavaScript/Tableaux_typés" title="en/JavaScript typed arrays">Les tableaux typés (<em>typed arrays</em>) en JavaScript</a></li>
- <li>{{jsxref("ArrayBuffer")}}</li>
- <li>{{jsxref("DataView")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/int8array/index.md b/files/fr/web/javascript/reference/global_objects/int8array/index.md
new file mode 100644
index 0000000000..9ba2e0b403
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/int8array/index.md
@@ -0,0 +1,181 @@
+---
+title: Int8Array
+slug: Web/JavaScript/Reference/Global_Objects/Int8Array
+tags:
+  - Constructor
+  - Int8Array
+  - JavaScript
+  - Reference
+  - TypedArray
+  - TypedArrrays
+translation_of: Web/JavaScript/Reference/Global_Objects/Int8Array
+original_slug: Web/JavaScript/Reference/Objets_globaux/Int8Array
+---
+{{JSRef}}
+
+Le tableau typé **`Int8Array`** permet de représenter un tableau d'entiers signés (en complément à deux) représentés sur 8 bits. Les éléments du tableau sont initialisés à 0. Une fois le tableau construit, il est possible de faire référence aux éléments en utilisant les méthodes de l'objet ou en utilisant la notation usuelle de parcours d'un tableau (la syntaxe utilisant les crochets).
+
+## Syntaxe
+
+    new Int8Array(); // apparu avec ES2017
+    new Int8Array(length);
+    new Int8Array(typedArray);
+    new Int8Array(object);
+    new Int8Array(buffer [, byteOffset [, length]]);
+
+Pour plus d'informations sur la syntaxe du constructeur, voir la page sur les [tableaux typés](/fr/docs/Web/JavaScript/Reference/Objets_globaux/TypedArray#Syntaxe) _(TypedArray)_.
+
+## Propriétés
+
+- {{jsxref("TypedArray.BYTES_PER_ELEMENT", "Int8Array.BYTES_PER_ELEMENT")}}
+  - : Renvoie un nombre représentant la taille d'un élément du tableau en termes d'octets. Dans le cas de `Int8Array`, la propriété vaudra 1.
+- `Int8Array.length`
+  - : Une propriété de longueur statique qui vaut 3. Pour connaître le nombre d'élément, voir {{jsxref("TypedArray.prototype.length", "Int8Array.prototype.length")}}.
+- {{jsxref("TypedArray.name", "Int8Array.name")}}
+  - : Renvoie la chaîne de caractère représentant le nom du constructeur. Dans le cas de `Int8Array`, la propriété vaudra "Int8Array".
+- {{jsxref("TypedArray.prototype", "Int8Array.prototype")}}
+  - : Prototype pour les objets _TypedArray_.
+
+## Méthodes
+
+- Int8Array.from()
+  - : Crée un nouvel objet `Int8Array` à partir d'un objet semblable à un tableau ou d'un objet itérable. Voir également la page {{jsxref("Array.from()")}}.
+- Int8Array.of()
+  - : Crée un nouvel objet `Int8Array` à partir d'un nombre variable d'arguments. Voir également la page {{jsxref("Array.of()")}}.
+
+## Prototype de `Int8Array`
+
+Tous les objets `Int8Array` héritent de {{jsxref("TypedArray.prototype", "%TypedArray%.prototype")}}.
+
+### Propriétés
+
+- `Int8Array.prototype.constructor`
+  - : Renvoie la fonction qui a créé l'instance. Par défaut, c'est le constructeur `Int8Array`.
+- {{jsxref("TypedArray.prototype.buffer", "Int8Array.prototype.buffer")}} {{readonlyInline}}
+  - : Renvoie l'objet {{jsxref("ArrayBuffer")}} auquel fait référence le tableau `Int8Array`. Cette valeur est fixée lors de la construction et est uniquement disponible en lecture.
+- {{jsxref("TypedArray.prototype.byteLength", "Int8Array.prototype.byteLength")}} {{readonlyInline}}
+  - : Renvoie la longueur (exprimée en octet) du tableau `Int8Array` depuis le début du tampon {{jsxref("ArrayBuffer")}}. Cette valeur est fixée lors de la construction et est uniquement disponible en lecture.
+- {{jsxref("TypedArray.prototype.byteOffset", "Int8Array.prototype.byteOffset")}} {{readonlyInline}}
+  - : Renvoie le décalage (exprimé en octets) du tableau `Int8Array` par rapport au début du tampon {{jsxref("ArrayBuffer")}}. Cette valeur est fixée lors de la construction et est uniquement disponible en lecture.
+- {{jsxref("TypedArray.prototype.length", "Int8Array.prototype.length")}} {{readonlyInline}}
+  - : Renvoie le nombre d'éléments contenus dans le tableau `Int8Array`. Cette valeur est fixée lors de la construction et est uniquement disponible en lecture.
+
+### Méthodes
+
+- {{jsxref("TypedArray.copyWithin", "Int8Array.prototype.copyWithin()")}}
+  - : Copie une suite d'éléments d'un tableau dans le tableau. Voir également {{jsxref("Array.prototype.copyWithin()")}}.
+- {{jsxref("TypedArray.entries", "Int8Array.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", "Int8Array.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", "Int8Array.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", "Int8Array.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", "Int8Array.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", "Int8Array.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", "Int8Array.prototype.forEach()")}}
+  - : Appelle une fonction pour chacun des élément du tableau. Voir également {{jsxref("Array.prototype.forEach()")}}.
+- {{jsxref("TypedArray.includes", "Int8Array.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", "Int8Array.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", "Int8Array.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", "Int8Array.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", "Int8Array.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", "Int8Array.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", "Int8Array.prototype.move()")}} {{non-standard_inline}} {{unimplemented_inline}}
+  - : Ancienne version, non-standard, de {{jsxref("TypedArray.copyWithin", "Int8Array.prototype.copyWithin()")}}.
+- {{jsxref("TypedArray.reduce", "Int8Array.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", "Int8Array.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", "Int8Array.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", "Int8Array.prototype.set()")}}
+  - : Enregistre plusieurs valeurs dans le tableau typé à partir de valeurs d'un autre tableau.
+- {{jsxref("TypedArray.slice", "Int8Array.prototype.slice()")}}
+  - : Extrait un fragment d'un tableau et renvoie ce fragment. Voir également {{jsxref("Array.prototype.slice()")}}.
+- {{jsxref("TypedArray.some", "Int8Array.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", "Int8Array.prototype.sort()")}}
+  - : Trie les éléments du tableau et renvoie ce tableau. Voir également {{jsxref("Array.prototype.sort()")}}.
+- {{jsxref("TypedArray.subarray", "Int8Array.prototype.subarray()")}}
+  - : Renvoie un nouvel objet `Int8Array` qui est le fragment du tableau courant, entre les indices de début et de fin donnés.
+- {{jsxref("TypedArray.values", "Int8Array.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", "Int8Array.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", "Int8Array.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", "Int8Array.prototype[@@iterator]()")}}
+  - : Renvoie un nouvel objet `Array Iterator` qui contient les valeurs correspondantes à chaque indice du tableau.
+
+## Exemples
+
+Différentes façons de créer un objet `Int8Array` :
+
+```js
+// Construction à partir d'une longueur
+var int8 = new Int8Array(2);
+int8[0] = 42;
+console.log(int8[0]); // 42
+console.log(int8.length); // 2
+console.log(int8.BYTES_PER_ELEMENT); // 1
+
+// Construction à partir d'un tableau
+var arr = new Int8Array([21,31]);
+console.log(arr[1]); // 31
+
+// Construction à partir d'un autre TypedArray
+var x = new Int8Array([21, 31]);
+var y = new Int8Array(x);
+console.log(y[0]); // 21
+
+// Construction à partir d'un ArrayBuffer
+var buffer = new ArrayBuffer(8);
+var z = new Int8Array(buffer, 1, 4);
+
+// Construction à partir d'un itérable
+var iterable = function*(){ yield* [1,2,3]; }();
+var int8 = new Int8Array(iterable);
+// Int8Array[1, 2, 3]
+```
+
+## Spécifications
+
+| Spécification                                                                        | État                             | Commentaires                                                                                                                          |
+| ------------------------------------------------------------------------------------ | -------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------- |
+| {{SpecName('Typed Array')}}                                                 | {{Spec2('Typed Array')}} | Remplacée dans ECMAScript 2015.                                                                                                       |
+| {{SpecName('ES2015', '#table-49', 'TypedArray constructors')}} | {{Spec2('ES2015')}}         | 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 afin d'utiliser l'opération interne `ToIndex` et permettre de l'utiliser sans constructeur. |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Int8Array")}}
+
+## Notes de compatibilité
+
+À partir d'ECMAScript 2015 (ES6), `Int8Array` doit être utilisé avec {{jsxref("Opérateurs/L_opérateur_new", "new")}}. Appeler un constructeur `Int8Array` comme une fonction, sans `new`, provoquera une exception {{jsxref("TypeError")}}.
+
+```js example-bad
+var dv = Int8Array([1, 2, 3]);
+// TypeError: calling a builtin Int8Array constructor
+// without new is forbidden
+```
+
+```js example-good
+var dv = new Int8Array([1, 2, 3]);
+```
+
+## Voir aussi
+
+- [Les tableaux typés (_typed arrays_) en JavaScript](/fr/docs/Web/JavaScript/Tableaux_typés "en/JavaScript typed arrays")
+- {{jsxref("ArrayBuffer")}}
+- {{jsxref("DataView")}}
diff --git a/files/fr/web/javascript/reference/global_objects/internalerror/index.html b/files/fr/web/javascript/reference/global_objects/internalerror/index.html
deleted file mode 100644
index 02a1e3afdd..0000000000
--- a/files/fr/web/javascript/reference/global_objects/internalerror/index.html
+++ /dev/null
@@ -1,78 +0,0 @@
----
-title: InternalError
-slug: Web/JavaScript/Reference/Global_Objects/InternalError
-tags:
-  - Error
-  - InternalError
-  - JavaScript
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/InternalError
-original_slug: Web/JavaScript/Reference/Objets_globaux/InternalError
----
-<div>{{JSRef}} {{non-standard_header}}</div>
-
-<p>L'objet <strong><code>InternalError</code></strong> indique qu'une erreur liée au moteur JavaScript s'est produite. Par exemple <strong>"InternalError </strong>: Niveau de récursion trop important".</p>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">new InternalError([<var>message</var>[, <var>fileName</var>[, <var>lineNumber</var>]]])</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>message</code></dt>
- <dd>Paramètre optionnel. Une description de l'erreur compréhensible pour un être humain.</dd>
- <dt><code>fileName</code> {{Non-standard_inline}}</dt>
- <dd>Paramètre optionnel. Le nom du fichier contenant le code à l'origine de l'erreur.</dd>
- <dt><code>lineNumber</code> {{Non-standard_inline}}</dt>
- <dd>Paramètre optionnel. Le numéro de la ligne du code à l'origine de l'erreur.</dd>
-</dl>
-
-<h2 id="Description">Description</h2>
-
-<p>Une exception <code>InternalError</code> est levée à chaque fois qu'il se produit une erreur interne au moteur JavaScript.</p>
-
-<p>Le plus souvent, cette exception se produit lorsque quelque chose atteint un niveau trop élévé. Par exemple :</p>
-
-<ul>
- <li>trop de cas dans une construction switch,</li>
- <li>trop de parenthèses au sein d'une expression rationnelle,</li>
- <li>un tableau littéral trop grand,</li>
- <li>trop de niveaux de récursion.</li>
-</ul>
-
-<h2 id="Propriétés">Propriétés</h2>
-
-<dl>
- <dt>{{jsxref("InternalError.prototype")}}</dt>
- <dd>Permet l'ajout de nouvelles propriétés à un objet <code>InternalError</code>.</dd>
-</dl>
-
-<h2 id="Méthodes">Méthodes</h2>
-
-<p>L'objet global <code>InternalError</code> ne contient pas de méthode propre. En revanche, il hérite de certaines méthodes via sa chaîne de prototypes.</p>
-
-<h2 id="Instances_de_InternalError">Instances de <code>InternalError</code></h2>
-
-<h3 id="Propriétés_2">Propriétés</h3>
-
-<div>{{page("/fr/docs/JavaScript/Reference/Objets_globaux/InternalError/prototype","Properties")}}</div>
-
-<h3 id="Méthodes_2">Méthodes</h3>
-
-<div>{{page("/fr/docs/JavaScript/Reference/Objets_globaux/InternalError/prototype","Methods")}}</div>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<p>Cet objet ne fait partie d'aucune spécification.</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.InternalError")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Error")}}</li>
- <li>{{jsxref("InternalError.prototype")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/internalerror/index.md b/files/fr/web/javascript/reference/global_objects/internalerror/index.md
new file mode 100644
index 0000000000..b29240ddb4
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/internalerror/index.md
@@ -0,0 +1,70 @@
+---
+title: InternalError
+slug: Web/JavaScript/Reference/Global_Objects/InternalError
+tags:
+  - Error
+  - InternalError
+  - JavaScript
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/InternalError
+original_slug: Web/JavaScript/Reference/Objets_globaux/InternalError
+---
+{{JSRef}} {{non-standard_header}}
+
+L'objet **`InternalError`** indique qu'une erreur liée au moteur JavaScript s'est produite. Par exemple **"InternalError** : Niveau de récursion trop important".
+
+## Syntaxe
+
+    new InternalError([message[, fileName[, lineNumber]]])
+
+### Paramètres
+
+- `message`
+  - : Paramètre optionnel. Une description de l'erreur compréhensible pour un être humain.
+- `fileName` {{Non-standard_inline}}
+  - : Paramètre optionnel. Le nom du fichier contenant le code à l'origine de l'erreur.
+- `lineNumber` {{Non-standard_inline}}
+  - : Paramètre optionnel. Le numéro de la ligne du code à l'origine de l'erreur.
+
+## Description
+
+Une exception `InternalError` est levée à chaque fois qu'il se produit une erreur interne au moteur JavaScript.
+
+Le plus souvent, cette exception se produit lorsque quelque chose atteint un niveau trop élévé. Par exemple :
+
+- trop de cas dans une construction switch,
+- trop de parenthèses au sein d'une expression rationnelle,
+- un tableau littéral trop grand,
+- trop de niveaux de récursion.
+
+## Propriétés
+
+- {{jsxref("InternalError.prototype")}}
+  - : Permet l'ajout de nouvelles propriétés à un objet `InternalError`.
+
+## Méthodes
+
+L'objet global `InternalError` ne contient pas de méthode propre. En revanche, il hérite de certaines méthodes via sa chaîne de prototypes.
+
+## Instances de `InternalError`
+
+### Propriétés
+
+{{page("/fr/docs/JavaScript/Reference/Objets_globaux/InternalError/prototype","Properties")}}
+
+### Méthodes
+
+{{page("/fr/docs/JavaScript/Reference/Objets_globaux/InternalError/prototype","Methods")}}
+
+## Spécifications
+
+Cet objet ne fait partie d'aucune spécification.
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.InternalError")}}
+
+## Voir aussi
+
+- {{jsxref("Error")}}
+- {{jsxref("InternalError.prototype")}}
diff --git a/files/fr/web/javascript/reference/global_objects/intl/collator/compare/index.html b/files/fr/web/javascript/reference/global_objects/intl/collator/compare/index.html
deleted file mode 100644
index 90931a110d..0000000000
--- a/files/fr/web/javascript/reference/global_objects/intl/collator/compare/index.html
+++ /dev/null
@@ -1,98 +0,0 @@
----
-title: Intl.Collator.prototype.compare
-slug: Web/JavaScript/Reference/Global_Objects/Intl/Collator/compare
-tags:
-  - Collator
-  - Internationalisation
-  - Intl
-  - JavaScript
-  - Méthode
-  - Prototype
-  - Reference
-  - i18n
-translation_of: Web/JavaScript/Reference/Global_Objects/Intl/Collator/compare
-original_slug: Web/JavaScript/Reference/Objets_globaux/Intl/Collator/compare
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <code><strong>Intl.Collator.prototype.compare()</strong></code> compare deux chaînes de caractères en tenant compte des options spécifiées pour la locale et l'ordre de tri dans l'objet {{jsxref("Collator")}}.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/intl-collator-prototype-compare.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">collator.compare(chaine1, chaine2)</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>chaine1</code>, <code>chaine2</code></dt>
- <dd>Les chaînes de caractères à comparer.</dd>
-</dl>
-
-<h2 id="Description">Description</h2>
-
-<p>L'accesseur <code>compare</code> renvoie un nombre qui indique le résultat de la comparaison entre <code>chaine1</code> et <code>chaine2</code> selon l'ordre de tri de l'objet {{jsxref("Collator")}} : la valeur obtenue sera négative si <code>chaine1</code> précède <code>chaine2</code>, positive si <code>chaine1</code> succède à <code>chaine2</code>, nulle si les deux chaînes sont considérées égales.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Utiliser_compare_pour_trier_un_tableau">Utiliser <code>compare()</code> pour trier un tableau</h3>
-
-<p>Dans cet exemple, on utilise la fonction de l'accesseur <code>compare</code> pour trier des tableaux. On observe que la fonction est liée à l'objet <code>Collator</code>, on peut donc directement la passer à la méthode {{jsxref("Array.prototype.sort()")}}.</p>
-
-<pre class="brush: js">var a = ["Offenbach", "Österreich", "Odenwald"];
-var collator = new Intl.Collator("de-u-co-phonebk");
-a.sort(collator.compare);
-console.log(a.join(", "));
-// → "Odenwald, Österreich, Offenbach"</pre>
-
-<h3 id="Utiliser_compare_pour_chercher_dans_un_tableau">Utiliser <code>compare()</code> pour chercher dans un tableau</h3>
-
-<p>Ici, on utilise la fonction de l'accesseur <code>compare</code> pour trouver les chaînes égales à une chaîne donnée parmi un tableau :</p>
-
-<pre class="brush: js">var a = ["Congrès", "congres", "Assemblée", "poisson"];
-var collator = new Intl.Collator("fr", {usage: "search", sensitivity: "base"});
-var s = "congres";
-var matches = a.filter(function (v) {
-    return collator.compare(v, s) === 0;
-});
-console.log(matches.join(", "));
-// → "Congrès, congres"</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES Int 1.0', '#sec-10.3.2', 'Intl.Collator.prototype.compare')}}</td>
-   <td>{{Spec2('ES Int 1.0')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES Int 2.0', '#sec-10.3.2', 'Intl.Collator.prototype.compare')}}</td>
-   <td>{{Spec2('ES Int 2.0')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES Int Draft', '#sec-Intl.Collator.prototype.compare', 'Intl.Collator.prototype.compare')}}</td>
-   <td>{{Spec2('ES Int Draft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Intl.Collator.compare")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Collator", "Intl.Collator")}}</li>
- <li>{{jsxref("String.prototype.localeCompare()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/intl/collator/compare/index.md b/files/fr/web/javascript/reference/global_objects/intl/collator/compare/index.md
new file mode 100644
index 0000000000..0c4e0f30e3
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/intl/collator/compare/index.md
@@ -0,0 +1,79 @@
+---
+title: Intl.Collator.prototype.compare
+slug: Web/JavaScript/Reference/Global_Objects/Intl/Collator/compare
+tags:
+  - Collator
+  - Internationalisation
+  - Intl
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - i18n
+translation_of: Web/JavaScript/Reference/Global_Objects/Intl/Collator/compare
+original_slug: Web/JavaScript/Reference/Objets_globaux/Intl/Collator/compare
+---
+{{JSRef}}
+
+La méthode **`Intl.Collator.prototype.compare()`** compare deux chaînes de caractères en tenant compte des options spécifiées pour la locale et l'ordre de tri dans l'objet {{jsxref("Collator")}}.
+
+{{EmbedInteractiveExample("pages/js/intl-collator-prototype-compare.html")}}
+
+## Syntaxe
+
+    collator.compare(chaine1, chaine2)
+
+### Paramètres
+
+- `chaine1`, `chaine2`
+  - : Les chaînes de caractères à comparer.
+
+## Description
+
+L'accesseur `compare` renvoie un nombre qui indique le résultat de la comparaison entre `chaine1` et `chaine2` selon l'ordre de tri de l'objet {{jsxref("Collator")}} : la valeur obtenue sera négative si `chaine1` précède `chaine2`, positive si `chaine1` succède à `chaine2`, nulle si les deux chaînes sont considérées égales.
+
+## Exemples
+
+### Utiliser `compare()` pour trier un tableau
+
+Dans cet exemple, on utilise la fonction de l'accesseur `compare` pour trier des tableaux. On observe que la fonction est liée à l'objet `Collator`, on peut donc directement la passer à la méthode {{jsxref("Array.prototype.sort()")}}.
+
+```js
+var a = ["Offenbach", "Österreich", "Odenwald"];
+var collator = new Intl.Collator("de-u-co-phonebk");
+a.sort(collator.compare);
+console.log(a.join(", "));
+// → "Odenwald, Österreich, Offenbach"
+```
+
+### Utiliser `compare()` pour chercher dans un tableau
+
+Ici, on utilise la fonction de l'accesseur `compare` pour trouver les chaînes égales à une chaîne donnée parmi un tableau :
+
+```js
+var a = ["Congrès", "congres", "Assemblée", "poisson"];
+var collator = new Intl.Collator("fr", {usage: "search", sensitivity: "base"});
+var s = "congres";
+var matches = a.filter(function (v) {
+    return collator.compare(v, s) === 0;
+});
+console.log(matches.join(", "));
+// → "Congrès, congres"
+```
+
+## Spécifications
+
+| Spécification                                                                                                                            | Statut                           | Commentaires         |
+| ---------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | -------------------- |
+| {{SpecName('ES Int 1.0', '#sec-10.3.2', 'Intl.Collator.prototype.compare')}}                                     | {{Spec2('ES Int 1.0')}} | Définition initiale. |
+| {{SpecName('ES Int 2.0', '#sec-10.3.2', 'Intl.Collator.prototype.compare')}}                                     | {{Spec2('ES Int 2.0')}} |                      |
+| {{SpecName('ES Int Draft', '#sec-Intl.Collator.prototype.compare', 'Intl.Collator.prototype.compare')}} | {{Spec2('ES Int Draft')}} |                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Intl.Collator.compare")}}
+
+## Voir aussi
+
+- {{jsxref("Collator", "Intl.Collator")}}
+- {{jsxref("String.prototype.localeCompare()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/intl/collator/index.html b/files/fr/web/javascript/reference/global_objects/intl/collator/index.html
deleted file mode 100644
index 32b32ac4ef..0000000000
--- a/files/fr/web/javascript/reference/global_objects/intl/collator/index.html
+++ /dev/null
@@ -1,175 +0,0 @@
----
-title: Intl.Collator
-slug: Web/JavaScript/Reference/Global_Objects/Intl/Collator
-tags:
-  - Collator
-  - Constructeur
-  - Internationalisation
-  - Intl
-  - JavaScript
-  - Reference
-  - i18n
-translation_of: Web/JavaScript/Reference/Global_Objects/Intl/Collator
-original_slug: Web/JavaScript/Reference/Objets_globaux/Intl/Collator
----
-<div>{{JSRef}}</div>
-
-<p>L'objet <strong><code>Intl.Collator</code></strong> est un constructeur de « collecteurs », des objets permettant de comparer des chaînes de caractères en tenant compte de la locale.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/intl-collator.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">new Intl.Collator([<em>locales</em> [, <em>options</em>]])</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>locales</code></dt>
- <dd>
- <p>Une chaîne de caractères avec une balise de langue BCP 47 ou un tableau qui contient des chaînes dans ce format. Pour plus d'informations sur le format et l'interprétation de l'argument <code>locales</code>, voir la page {{jsxref("Objets_globaux/Intl", "Intl", "#Choix_de_la_locale")}}. Pour ce constructeur, les clés d'extensions Unicode suivantes sont acceptées :</p>
-
- <dl>
-  <dt><code>co</code></dt>
-  <dd>Les variantes dans les méthodes de regroupement (« collation ») des chaînes de caractères. Les valeurs autorisées pour cette clé sont : <code>"big5han", "dict", "direct", "ducet", "gb2312", "phonebk", "phonetic", "pinyin", "reformed", "searchjl", "stroke", "trad", "unihan"</code>. Les valeurs <code>"standard"</code> et <code>"search"</code> sont ignorées. Elles sont remplacées par la propriété <code>usage</code> de l'argument <code>options</code> (voir ci-après).</dd>
-  <dt><code>kn</code></dt>
-  <dd>Indique si on ordonne les nombres (par exemple : "1" &lt; "2" &lt; "10"). Les valeurs possibles sont <code>"true"</code> et <code>"false"</code>. Cette option est également disponible via une propriété de l'objet <code>options</code>. Si l'extension Unicode et la propriété de l'objet <code>options</code> sont définies, ce sera cette dernière qui sera prise en compte.</dd>
-  <dt><code>kf</code></dt>
-  <dd>Indique si on ordonne les majuscules avant les minuscules ou l'inverse. Les valeurs possibles sont <code>"upper"</code>, <code>"lower"</code>, ou <code>"false"</code> (on utilise alors l'ordre par défaut de la locale). Cette option est également disponible via une propriété de l'objet <code>options</code>. Si l'extension Unicode et la propriété de l'objet <code>options</code> sont définies, ce sera cette dernière qui sera prise en compte.</dd>
- </dl>
- </dd>
- <dt><code>options</code></dt>
- <dd>
- <p>Un objet qui disposent des propriétés suivantes :</p>
-
- <dl>
-  <dt><code>localeMatcher</code></dt>
-  <dd>L'algorithme de correspondance à utiliser pour les locales. Les valeurs possibles sont <code>"lookup"</code> et <code>"best fit"</code>. La valeur par défaut est "best fit". Voir la {{jsxref("Objets_globaux/Intl", "Intl", "#Choix_de_la_locale")}} pour plus d'informations à ce sujet.</dd>
-  <dt><code>usage</code></dt>
-  <dd>Indique l'usage de le comparaison : le tri ou la recherche de chaînes correspondantes. Les valeurs possibles sont "sort" pour le tri et "search" pour la recherche. La valeur par défaut est "sort".</dd>
-  <dt><code>sensitivity</code></dt>
-  <dd>Indique les différences entre les chaînes de caractères qui font qu'une chaîne est considérée différente d'une autre. Les valeurs possibles sont :
-  <ul>
-   <li><code>"base"</code> : Seules les chaînes dont les lettres de base sont différentes sont considérées inégales. Par exemple : a ≠ b, a = á, a = A.</li>
-   <li><code>"accent"</code> : Seules les chaînes de caractères dont les lettres de bases ou les accents ou les autres marques diacritiques diffèrent sont considérées inégales. Par exemple : a ≠ b, a ≠ á, a = A.</li>
-   <li><code>"case"</code> : Seules les chaines dont les lettres de base ou la casse sont diffèrent sont considérées comme inégales. Par exemple : a ≠ b, a = á, a ≠ A.</li>
-   <li><code>"variant"</code> : Les chaînes qui diffèrent par leurs caractères de base, leurs accents et autres marques diacritiques, la casse sont considérées comme inégales. D'autres différences peuvent également être prises en compte. Par exemple : a ≠ b, a ≠ á, a ≠ A.</li>
-  </ul>
-
-  <p>La valeur par défaut est <code>"variant"</code> si on utilise la comparaison pour du tri (usage=<code>"sort"</code>). Pour l'utilisation <code>"search"</code> (recherche), la valeur par défaut dépend de la locale.</p>
-  </dd>
-  <dt><code>ignorePunctuation</code></dt>
-  <dd>Indique si la ponctuation doit être ignorée. Les valeurs possibles sont <code>true</code> et <code>false</code>. La valeur par défaut est <code>false</code>.</dd>
-  <dt><code>numeric</code></dt>
-  <dd>Indique si on ordonne les nombres (par exemple : "1" &lt; "2" &lt; "10"). Les valeurs possibles sont <code>true</code> et <code>false</code>. La valeur par défaut est <code>false</code>. Si l'extension Unicode correspondante et la propriété de l'objet <code>options</code> sont définies, ce sera cette dernière qui sera prise en compte.</dd>
-  <dt><code>caseFirst</code></dt>
-  <dd>Indique si on ordonne les majuscules avant les minuscules ou l'inverse. Les valeurs possibles sont <code>"upper"</code>, <code>"lower"</code>, ou <code>"false"</code> (on utilise alors l'ordre par défaut de la locale), la valeur par défaut est <code>"false"</code>. Si l'extension Unicode correspondante et la propriété de l'objet <code>options</code> sont définies, ce sera cette dernière qui sera prise en compte.</dd>
- </dl>
- </dd>
-</dl>
-
-<h2 id="Description">Description</h2>
-
-<p>L'objet <code>Intl.Collator</code> possède les propriétés et méthodes suivantes :</p>
-
-<h3 id="Propriétés">Propriétés</h3>
-
-<dl>
- <dt>{{jsxref("Collator.prototype", "Intl.Collator.prototype")}}</dt>
- <dd>Permet d'ajouter des propriétés à toutes les instances.</dd>
-</dl>
-
-<h3 id="Méthodes">Méthodes</h3>
-
-<dl>
- <dt>{{jsxref("Collator.supportedLocalesOf", "Intl.Collator.supportedLocalesOf()")}}</dt>
- <dd>Renvoie un tableau qui contient les locales supportées pour lesquelles il n'est pas nécessaire de revenir à la locale par défaut de l'environnement.</dd>
-</dl>
-
-<h2 id="Instances_de_Collator">Instances de <code>Collator</code></h2>
-
-<h3 id="Propriétés_2">Propriétés</h3>
-
-<p>Les instances de <code>Collator</code> héritent des propriétés suivantes grâce à leur prototype :</p>
-
-<div>{{page('/fr/docs/Web/JavaScript/Reference/Objets_globaux/Collator/prototype','Propriétés')}}</div>
-
-<h3 id="Méthodes_2">Méthodes</h3>
-
-<div>
-<p>Les instances de <code>Collator</code> héritent des méthodes suivantes grâce à leur prototype :</p>
-{{page('/fr/docs/Web/JavaScript/Reference/Objets_globaux/Collator/prototype','Méthodes')}}</div>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Utiliser_Collator">Utiliser <code>Collator</code></h3>
-
-<p>L'exemple qui suit illustre les différents résultats qu'on peut obtenir :</p>
-
-<pre class="brush: js">console.log(new Intl.Collator().compare('a', 'c')); // → une valeur négative
-console.log(new Intl.Collator().compare('c', 'a')); // → une valeur positive
-console.log(new Intl.Collator().compare('a', 'a')); // → 0
-</pre>
-
-<p>Les résultats indiqués sont génériques et en pratique peuvent varier entre les navigateurs et les versions des navigateurs. En effet les valeurs obtenues dépendent de l'implémentation. Les spécifications indiquent uniquement le signe (positif ou négatif) du résultat.</p>
-
-<h3 id="Utiliser_locales">Utiliser <code>locales</code></h3>
-
-<p>Les résultats fournis par {{jsxref("Collator.prototype.compare()")}} varient selon les locales. Afin d'obtenir le bon ordre lexicographique dans votre application, il est nécessaire de spécifier la locale de l'utilisateur (et éventuellement des locales pour des cas de replis) en utilisant l'argument <code>locales</code> :</p>
-
-<pre class="brush: js">// en allemand, 'ä' est équivalent à 'a' pour le tri
-console.log(new Intl.Collator("de").compare("ä", "z"));
-// → une valeur négative
-
-// en suédois, 'ä' arrive après 'z'
-console.log(new Intl.Collator("sv").compare("ä", "z"));
-// → une valeur positive
-</pre>
-
-<h3 id="Utiliser_options">Utiliser <code>options</code></h3>
-
-<p>Les résultats fournis par {{jsxref("Collator.prototype.compare()")}} peuvent être adaptés grâce à l'argument <code>options</code> :</p>
-
-<pre class="brush: js">// en allemand, 'ä' est composé de la lettre de base 'a'
-console.log(new Intl.Collator("de", {sensitivity: "base"}).compare("ä", "a"));
-// → 0
-
-// en suédois, 'ä' et 'a' sont distincts en termes de base
-console.log(new Intl.Collator("sv", {sensitivity: "base"}).compare("ä", "a"));
-// → une valeur positive
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES Int 1.0', '#sec-10.1', 'Intl.Collator')}}</td>
-   <td>{{Spec2('ES Int 1.0')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES Int 2.0', '#sec-10.1', 'Intl.Collator')}}</td>
-   <td>{{Spec2('ES Int 2.0')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES Int Draft', '#collator-objects', 'Intl.Collator')}}</td>
-   <td>{{Spec2('ES Int Draft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Intl.Collator")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<p>{{page('/fr/docs/Web/JavaScript/Reference/Objets_globaux/Intl','Voir_aussi')}}</p>
diff --git a/files/fr/web/javascript/reference/global_objects/intl/collator/index.md b/files/fr/web/javascript/reference/global_objects/intl/collator/index.md
new file mode 100644
index 0000000000..497d476044
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/intl/collator/index.md
@@ -0,0 +1,148 @@
+---
+title: Intl.Collator
+slug: Web/JavaScript/Reference/Global_Objects/Intl/Collator
+tags:
+  - Collator
+  - Constructeur
+  - Internationalisation
+  - Intl
+  - JavaScript
+  - Reference
+  - i18n
+translation_of: Web/JavaScript/Reference/Global_Objects/Intl/Collator
+original_slug: Web/JavaScript/Reference/Objets_globaux/Intl/Collator
+---
+{{JSRef}}
+
+L'objet **`Intl.Collator`** est un constructeur de « collecteurs », des objets permettant de comparer des chaînes de caractères en tenant compte de la locale.
+
+{{EmbedInteractiveExample("pages/js/intl-collator.html")}}
+
+## Syntaxe
+
+    new Intl.Collator([locales [, options]])
+
+### Paramètres
+
+- `locales`
+
+  - : Une chaîne de caractères avec une balise de langue BCP 47 ou un tableau qui contient des chaînes dans ce format. Pour plus d'informations sur le format et l'interprétation de l'argument `locales`, voir la page {{jsxref("Objets_globaux/Intl", "Intl", "#Choix_de_la_locale")}}. Pour ce constructeur, les clés d'extensions Unicode suivantes sont acceptées :
+
+    - `co`
+      - : Les variantes dans les méthodes de regroupement (« collation ») des chaînes de caractères. Les valeurs autorisées pour cette clé sont : `"big5han", "dict", "direct", "ducet", "gb2312", "phonebk", "phonetic", "pinyin", "reformed", "searchjl", "stroke", "trad", "unihan"`. Les valeurs `"standard"` et `"search"` sont ignorées. Elles sont remplacées par la propriété `usage` de l'argument `options` (voir ci-après).
+    - `kn`
+      - : Indique si on ordonne les nombres (par exemple : "1" < "2" < "10"). Les valeurs possibles sont `"true"` et `"false"`. Cette option est également disponible via une propriété de l'objet `options`. Si l'extension Unicode et la propriété de l'objet `options` sont définies, ce sera cette dernière qui sera prise en compte.
+    - `kf`
+      - : Indique si on ordonne les majuscules avant les minuscules ou l'inverse. Les valeurs possibles sont `"upper"`, `"lower"`, ou `"false"` (on utilise alors l'ordre par défaut de la locale). Cette option est également disponible via une propriété de l'objet `options`. Si l'extension Unicode et la propriété de l'objet `options` sont définies, ce sera cette dernière qui sera prise en compte.
+
+- `options`
+
+  - : Un objet qui disposent des propriétés suivantes :
+
+    - `localeMatcher`
+      - : L'algorithme de correspondance à utiliser pour les locales. Les valeurs possibles sont `"lookup"` et `"best fit"`. La valeur par défaut est "best fit". Voir la {{jsxref("Objets_globaux/Intl", "Intl", "#Choix_de_la_locale")}} pour plus d'informations à ce sujet.
+    - `usage`
+      - : Indique l'usage de le comparaison : le tri ou la recherche de chaînes correspondantes. Les valeurs possibles sont "sort" pour le tri et "search" pour la recherche. La valeur par défaut est "sort".
+    - `sensitivity`
+
+      - : Indique les différences entre les chaînes de caractères qui font qu'une chaîne est considérée différente d'une autre. Les valeurs possibles sont :
+
+        - `"base"` : Seules les chaînes dont les lettres de base sont différentes sont considérées inégales. Par exemple : a ≠ b, a = á, a = A.
+        - `"accent"` : Seules les chaînes de caractères dont les lettres de bases ou les accents ou les autres marques diacritiques diffèrent sont considérées inégales. Par exemple : a ≠ b, a ≠ á, a = A.
+        - `"case"` : Seules les chaines dont les lettres de base ou la casse sont diffèrent sont considérées comme inégales. Par exemple : a ≠ b, a = á, a ≠ A.
+        - `"variant"` : Les chaînes qui diffèrent par leurs caractères de base, leurs accents et autres marques diacritiques, la casse sont considérées comme inégales. D'autres différences peuvent également être prises en compte. Par exemple : a ≠ b, a ≠ á, a ≠ A.
+
+        La valeur par défaut est `"variant"` si on utilise la comparaison pour du tri (usage=`"sort"`). Pour l'utilisation `"search"` (recherche), la valeur par défaut dépend de la locale.
+
+    - `ignorePunctuation`
+      - : Indique si la ponctuation doit être ignorée. Les valeurs possibles sont `true` et `false`. La valeur par défaut est `false`.
+    - `numeric`
+      - : Indique si on ordonne les nombres (par exemple : "1" < "2" < "10"). Les valeurs possibles sont `true` et `false`. La valeur par défaut est `false`. Si l'extension Unicode correspondante et la propriété de l'objet `options` sont définies, ce sera cette dernière qui sera prise en compte.
+    - `caseFirst`
+      - : Indique si on ordonne les majuscules avant les minuscules ou l'inverse. Les valeurs possibles sont `"upper"`, `"lower"`, ou `"false"` (on utilise alors l'ordre par défaut de la locale), la valeur par défaut est `"false"`. Si l'extension Unicode correspondante et la propriété de l'objet `options` sont définies, ce sera cette dernière qui sera prise en compte.
+
+## Description
+
+L'objet `Intl.Collator` possède les propriétés et méthodes suivantes :
+
+### Propriétés
+
+- {{jsxref("Collator.prototype", "Intl.Collator.prototype")}}
+  - : Permet d'ajouter des propriétés à toutes les instances.
+
+### Méthodes
+
+- {{jsxref("Collator.supportedLocalesOf", "Intl.Collator.supportedLocalesOf()")}}
+  - : Renvoie un tableau qui contient les locales supportées pour lesquelles il n'est pas nécessaire de revenir à la locale par défaut de l'environnement.
+
+## Instances de `Collator`
+
+### Propriétés
+
+Les instances de `Collator` héritent des propriétés suivantes grâce à leur prototype :
+
+{{page('/fr/docs/Web/JavaScript/Reference/Objets_globaux/Collator/prototype','Propriétés')}}
+
+### Méthodes
+
+Les instances de `Collator` héritent des méthodes suivantes grâce à leur prototype :
+
+{{page('/fr/docs/Web/JavaScript/Reference/Objets_globaux/Collator/prototype','Méthodes')}}
+
+## Exemples
+
+### Utiliser `Collator`
+
+L'exemple qui suit illustre les différents résultats qu'on peut obtenir :
+
+```js
+console.log(new Intl.Collator().compare('a', 'c')); // → une valeur négative
+console.log(new Intl.Collator().compare('c', 'a')); // → une valeur positive
+console.log(new Intl.Collator().compare('a', 'a')); // → 0
+```
+
+Les résultats indiqués sont génériques et en pratique peuvent varier entre les navigateurs et les versions des navigateurs. En effet les valeurs obtenues dépendent de l'implémentation. Les spécifications indiquent uniquement le signe (positif ou négatif) du résultat.
+
+### Utiliser `locales`
+
+Les résultats fournis par {{jsxref("Collator.prototype.compare()")}} varient selon les locales. Afin d'obtenir le bon ordre lexicographique dans votre application, il est nécessaire de spécifier la locale de l'utilisateur (et éventuellement des locales pour des cas de replis) en utilisant l'argument `locales` :
+
+```js
+// en allemand, 'ä' est équivalent à 'a' pour le tri
+console.log(new Intl.Collator("de").compare("ä", "z"));
+// → une valeur négative
+
+// en suédois, 'ä' arrive après 'z'
+console.log(new Intl.Collator("sv").compare("ä", "z"));
+// → une valeur positive
+```
+
+### Utiliser `options`
+
+Les résultats fournis par {{jsxref("Collator.prototype.compare()")}} peuvent être adaptés grâce à l'argument `options` :
+
+```js
+// en allemand, 'ä' est composé de la lettre de base 'a'
+console.log(new Intl.Collator("de", {sensitivity: "base"}).compare("ä", "a"));
+// → 0
+
+// en suédois, 'ä' et 'a' sont distincts en termes de base
+console.log(new Intl.Collator("sv", {sensitivity: "base"}).compare("ä", "a"));
+// → une valeur positive
+```
+
+## Spécifications
+
+| Spécification                                                                            | État                             | Commentaires         |
+| ---------------------------------------------------------------------------------------- | -------------------------------- | -------------------- |
+| {{SpecName('ES Int 1.0', '#sec-10.1', 'Intl.Collator')}}             | {{Spec2('ES Int 1.0')}} | Définition initiale. |
+| {{SpecName('ES Int 2.0', '#sec-10.1', 'Intl.Collator')}}             | {{Spec2('ES Int 2.0')}} |                      |
+| {{SpecName('ES Int Draft', '#collator-objects', 'Intl.Collator')}} | {{Spec2('ES Int Draft')}} |                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Intl.Collator")}}
+
+## Voir aussi
+
+{{page('/fr/docs/Web/JavaScript/Reference/Objets_globaux/Intl','Voir_aussi')}}
diff --git a/files/fr/web/javascript/reference/global_objects/intl/collator/resolvedoptions/index.html b/files/fr/web/javascript/reference/global_objects/intl/collator/resolvedoptions/index.html
deleted file mode 100644
index 5a82466c9f..0000000000
--- a/files/fr/web/javascript/reference/global_objects/intl/collator/resolvedoptions/index.html
+++ /dev/null
@@ -1,92 +0,0 @@
----
-title: Intl.Collator.prototype.resolvedOptions()
-slug: Web/JavaScript/Reference/Global_Objects/Intl/Collator/resolvedOptions
-tags:
-  - Collator
-  - Internationalisation
-  - Intl
-  - JavaScript
-  - Méthode
-  - Prototype
-  - Reference
-  - i18n
-translation_of: Web/JavaScript/Reference/Global_Objects/Intl/Collator/resolvedOptions
-original_slug: Web/JavaScript/Reference/Objets_globaux/Intl/Collator/resolvedOptions
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <code><strong>Intl.Collator.prototype.resolvedOptions()</strong></code> renvoie un nouvel objet dont les propriétés reflètent les options de locale et de collation calculées à l'initialisation de l'objet {{jsxref("Collator")}}.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/intl-collator-prototype-resolvedoptions.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">collator.resolvedOptions()</pre>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Un nouvel objet dont les propriétés reflètent les options de locale et de collations calculées lors de l'initialisation de l'objet {{jsxref("Collator")}}.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>L'objet renvoyé par cette méthode contient les propriétés suivantes :</p>
-
-<dl>
- <dt><code>locale</code></dt>
- <dd>La balise de langue BCP 47 qui est réellement utilisée. Si des extensions Unicode étaient fournies avec la balise d'origine et sont supportées pour la locale utilisée, les paires de clés-valeurs seront incluses dans <code>locale</code>.</dd>
- <dt><code>usage</code>,<code>sensitivity</code>, <code>ignorePunctuation</code></dt>
- <dd>Les valeurs demandées pour ces propriétés via l'argument <code>options</code> ou celles utilisées par défaut.</dd>
- <dt><code>collation</code></dt>
- <dd>La valeur demandée pour l'extension Unicode <code>"co"</code> si elle est supportée par la locale utilisée, sinon <code>"default"</code>.</dd>
- <dt><code>numeric</code>, <code>caseFirst</code></dt>
- <dd>Les valeurs demandées pour ces propriétés via l'argument <code>options</code> ou l'utilisation des extensions Unicode <code>"kn"</code> et <code>"kf"</code> ou les valeurs par défaut. Si l'implémentation utilisée ne supporte pas ces propriétés, elles sont omises.</dd>
-</dl>
-
-<h2 id="Exemples">Exemples</h2>
-
-<pre class="brush: js">var de = new Intl.Collator('de', { sensitivity: 'base' })
-var usedOptions = de.resolvedOptions();
-
-usedOptions.locale;            // "de"
-usedOptions.usage;             // "sort"
-usedOptions.sensitivity;        // "base"
-usedOptions.ignorePunctuation; // false
-usedOptions.collation;         // "default"
-usedOptions.numeric;           // false</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES Int 1.0', '#sec-10.3.3', 'Intl.Collator.prototype.resolvedOptions')}}</td>
-   <td>{{Spec2('ES Int 1.0')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES Int 2.0', '#sec-10.3.3', 'Intl.Collator.prototype.resolvedOptions')}}</td>
-   <td>{{Spec2('ES Int 2.0')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES Int Draft', '#sec-Intl.Collator.prototype.resolvedOptions', 'Intl.Collator.prototype.resolvedOptions')}}</td>
-   <td>{{Spec2('ES Int Draft')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Intl.Collator.resolvedOptions")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Collator", "Intl.Collator")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/intl/collator/resolvedoptions/index.md b/files/fr/web/javascript/reference/global_objects/intl/collator/resolvedoptions/index.md
new file mode 100644
index 0000000000..bad17cd5e5
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/intl/collator/resolvedoptions/index.md
@@ -0,0 +1,71 @@
+---
+title: Intl.Collator.prototype.resolvedOptions()
+slug: Web/JavaScript/Reference/Global_Objects/Intl/Collator/resolvedOptions
+tags:
+  - Collator
+  - Internationalisation
+  - Intl
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - i18n
+translation_of: Web/JavaScript/Reference/Global_Objects/Intl/Collator/resolvedOptions
+original_slug: Web/JavaScript/Reference/Objets_globaux/Intl/Collator/resolvedOptions
+---
+{{JSRef}}
+
+La méthode **`Intl.Collator.prototype.resolvedOptions()`** renvoie un nouvel objet dont les propriétés reflètent les options de locale et de collation calculées à l'initialisation de l'objet {{jsxref("Collator")}}.
+
+{{EmbedInteractiveExample("pages/js/intl-collator-prototype-resolvedoptions.html")}}
+
+## Syntaxe
+
+    collator.resolvedOptions()
+
+### Valeur de retour
+
+Un nouvel objet dont les propriétés reflètent les options de locale et de collations calculées lors de l'initialisation de l'objet {{jsxref("Collator")}}.
+
+## Description
+
+L'objet renvoyé par cette méthode contient les propriétés suivantes :
+
+- `locale`
+  - : La balise de langue BCP 47 qui est réellement utilisée. Si des extensions Unicode étaient fournies avec la balise d'origine et sont supportées pour la locale utilisée, les paires de clés-valeurs seront incluses dans `locale`.
+- `usage`,`sensitivity`, `ignorePunctuation`
+  - : Les valeurs demandées pour ces propriétés via l'argument `options` ou celles utilisées par défaut.
+- `collation`
+  - : La valeur demandée pour l'extension Unicode `"co"` si elle est supportée par la locale utilisée, sinon `"default"`.
+- `numeric`, `caseFirst`
+  - : Les valeurs demandées pour ces propriétés via l'argument `options` ou l'utilisation des extensions Unicode `"kn"` et `"kf"` ou les valeurs par défaut. Si l'implémentation utilisée ne supporte pas ces propriétés, elles sont omises.
+
+## Exemples
+
+```js
+var de = new Intl.Collator('de', { sensitivity: 'base' })
+var usedOptions = de.resolvedOptions();
+
+usedOptions.locale;            // "de"
+usedOptions.usage;             // "sort"
+usedOptions.sensitivity;        // "base"
+usedOptions.ignorePunctuation; // false
+usedOptions.collation;         // "default"
+usedOptions.numeric;           // false
+```
+
+## Spécifications
+
+| Spécification                                                                                                                                                    | État                             | Commentaires         |
+| ---------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | -------------------- |
+| {{SpecName('ES Int 1.0', '#sec-10.3.3', 'Intl.Collator.prototype.resolvedOptions')}}                                                 | {{Spec2('ES Int 1.0')}} | Définition initiale. |
+| {{SpecName('ES Int 2.0', '#sec-10.3.3', 'Intl.Collator.prototype.resolvedOptions')}}                                                 | {{Spec2('ES Int 2.0')}} |                      |
+| {{SpecName('ES Int Draft', '#sec-Intl.Collator.prototype.resolvedOptions', 'Intl.Collator.prototype.resolvedOptions')}} | {{Spec2('ES Int Draft')}} |                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Intl.Collator.resolvedOptions")}}
+
+## Voir aussi
+
+- {{jsxref("Collator", "Intl.Collator")}}
diff --git a/files/fr/web/javascript/reference/global_objects/intl/collator/supportedlocalesof/index.html b/files/fr/web/javascript/reference/global_objects/intl/collator/supportedlocalesof/index.html
deleted file mode 100644
index 763a01dd1c..0000000000
--- a/files/fr/web/javascript/reference/global_objects/intl/collator/supportedlocalesof/index.html
+++ /dev/null
@@ -1,95 +0,0 @@
----
-title: Intl.Collator.supportedLocalesOf()
-slug: Web/JavaScript/Reference/Global_Objects/Intl/Collator/supportedLocalesOf
-tags:
-  - Collator
-  - Internationalisation
-  - Intl
-  - JavaScript
-  - Méthode
-  - Reference
-  - i18n
-translation_of: Web/JavaScript/Reference/Global_Objects/Intl/Collator/supportedLocalesOf
-original_slug: Web/JavaScript/Reference/Objets_globaux/Intl/Collator/supportedLocalesOf
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <code><strong>Intl.Collator.supportedLocalesOf()</strong></code> renvoie, parmi les locales fournies, un tableau contenant les locales supportées et qui ne nécessitent pas d'utiliser la locale par défaut de l'environnement.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/intl-collator-prototype-supportedlocalesof.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">Intl.Collator.supportedLocalesOf(locales [, options])</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>locales</code></dt>
- <dd>Une chaîne de caractères qui est une balise de langue BCP 47 ou bien un tableau de telles chaînes. Pour plus d'informations concernant la forme générale de l'argument <code>locales</code>, voir la page {{jsxref("Objets_globaux/Intl", "Intl", "#L'identification_et_le_choix_de_la_locale")}}.</dd>
- <dt><code>options</code>{{optional_inline}}</dt>
- <dd>
- <p>Paramètre facultatif. Un objet qui peut posséder les propriétés suivantes :</p>
-
- <dl>
-  <dt><code>localeMatcher</code></dt>
-  <dd>
-  <p>L'algorithme utilisé pour la correspondance entre chaînes de caractères. Les valeurs possibles sont <code>"lookup"</code> et <code>"best fit"</code>. La valeur par défaut est <code>"best fit"</code>. Pour plus d'informations, voir la page {{jsxref("Objets_globaux/Intl", "Intl", "#Choix_de_la_locale")}}.</p>
-  </dd>
- </dl>
- </dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Un tableau de chaînes de caractères qui représente un sous-ensemble des balises de langues qui sont prises en charge pour la collation sans qu'il faille utiliser la locale par défaut de l'environnement d'exécution.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>Cette méthode renvoie un tableau qui est un sous-ensemble des balises de locales fournies avec l'argument <code>locales</code>. Les balises renvoyées sont celles supportées par l'environnement navigateur en termes de collation (comparaison) et qui ne nécessitent pas d'utiliser la locale par défaut.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<p>Si on dispose d'un environnement (un navigateur par exemple) qui supporte la comparaison de chaînes dans les locales indonésienne, allemande mais pas balinaise,  <code>supportedLocalesOf</code> renvoie les balises pour l'indonésien et l'allemand quand bien même la collation avec pinyin n'est pas utilisée avec l'indonésien et qu'il n'existe pas une version spécifique de l'allemand pour l'Indonésie. On illustre ici l'algorithme <code>"lookup"</code>. SI on utilisait <code>"best fit"</code> pour trouver les locales correspondantes, on aurait pu avoir une balise supplémentaire pour le balinais en plus car la plupart des balinais comprennent l'indonésien.</p>
-
-<pre class="brush: js">var locales = ["ban", "id-u-co-pinyin", "de-ID"];
-var options = {localeMatcher: "lookup"};
-console.log(Intl.Collator.supportedLocalesOf(locales, options).join(", "));
-// → "id-u-co-pinyin, de-ID"</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES Int 1.0', '#sec-10.2.2', 'Intl.Collator.supportedLocalesOf')}}</td>
-   <td>{{Spec2('ES Int 1.0')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES Int 2.0', '#sec-10.2.2', 'Intl.Collator.supportedLocalesOf')}}</td>
-   <td>{{Spec2('ES Int 2.0')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES Int Draft', '#sec-Intl.Collator.supportedLocalesOf', 'Intl.Collator.supportedLocalesOf')}}</td>
-   <td>{{Spec2('ES Int Draft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Intl.Collator.supportedLocalesOf")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Collator", "Intl.Collator")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/intl/collator/supportedlocalesof/index.md b/files/fr/web/javascript/reference/global_objects/intl/collator/supportedlocalesof/index.md
new file mode 100644
index 0000000000..665b0ff858
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/intl/collator/supportedlocalesof/index.md
@@ -0,0 +1,69 @@
+---
+title: Intl.Collator.supportedLocalesOf()
+slug: Web/JavaScript/Reference/Global_Objects/Intl/Collator/supportedLocalesOf
+tags:
+  - Collator
+  - Internationalisation
+  - Intl
+  - JavaScript
+  - Méthode
+  - Reference
+  - i18n
+translation_of: Web/JavaScript/Reference/Global_Objects/Intl/Collator/supportedLocalesOf
+original_slug: Web/JavaScript/Reference/Objets_globaux/Intl/Collator/supportedLocalesOf
+---
+{{JSRef}}
+
+La méthode **`Intl.Collator.supportedLocalesOf()`** renvoie, parmi les locales fournies, un tableau contenant les locales supportées et qui ne nécessitent pas d'utiliser la locale par défaut de l'environnement.
+
+{{EmbedInteractiveExample("pages/js/intl-collator-prototype-supportedlocalesof.html")}}
+
+## Syntaxe
+
+    Intl.Collator.supportedLocalesOf(locales [, options])
+
+### Paramètres
+
+- `locales`
+  - : Une chaîne de caractères qui est une balise de langue BCP 47 ou bien un tableau de telles chaînes. Pour plus d'informations concernant la forme générale de l'argument `locales`, voir la page {{jsxref("Objets_globaux/Intl", "Intl", "#L'identification_et_le_choix_de_la_locale")}}.
+- `options`{{optional_inline}}
+
+  - : Paramètre facultatif. Un objet qui peut posséder les propriétés suivantes :
+
+    - `localeMatcher`
+      - : L'algorithme utilisé pour la correspondance entre chaînes de caractères. Les valeurs possibles sont `"lookup"` et `"best fit"`. La valeur par défaut est `"best fit"`. Pour plus d'informations, voir la page {{jsxref("Objets_globaux/Intl", "Intl", "#Choix_de_la_locale")}}.
+
+### Valeur de retour
+
+Un tableau de chaînes de caractères qui représente un sous-ensemble des balises de langues qui sont prises en charge pour la collation sans qu'il faille utiliser la locale par défaut de l'environnement d'exécution.
+
+## Description
+
+Cette méthode renvoie un tableau qui est un sous-ensemble des balises de locales fournies avec l'argument `locales`. Les balises renvoyées sont celles supportées par l'environnement navigateur en termes de collation (comparaison) et qui ne nécessitent pas d'utiliser la locale par défaut.
+
+## Exemples
+
+Si on dispose d'un environnement (un navigateur par exemple) qui supporte la comparaison de chaînes dans les locales indonésienne, allemande mais pas balinaise,  `supportedLocalesOf` renvoie les balises pour l'indonésien et l'allemand quand bien même la collation avec pinyin n'est pas utilisée avec l'indonésien et qu'il n'existe pas une version spécifique de l'allemand pour l'Indonésie. On illustre ici l'algorithme `"lookup"`. SI on utilisait `"best fit"` pour trouver les locales correspondantes, on aurait pu avoir une balise supplémentaire pour le balinais en plus car la plupart des balinais comprennent l'indonésien.
+
+```js
+var locales = ["ban", "id-u-co-pinyin", "de-ID"];
+var options = {localeMatcher: "lookup"};
+console.log(Intl.Collator.supportedLocalesOf(locales, options).join(", "));
+// → "id-u-co-pinyin, de-ID"
+```
+
+## Spécifications
+
+| Spécification                                                                                                                                | État                             | Commentaires         |
+| -------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | -------------------- |
+| {{SpecName('ES Int 1.0', '#sec-10.2.2', 'Intl.Collator.supportedLocalesOf')}}                                     | {{Spec2('ES Int 1.0')}} | Définition initiale. |
+| {{SpecName('ES Int 2.0', '#sec-10.2.2', 'Intl.Collator.supportedLocalesOf')}}                                     | {{Spec2('ES Int 2.0')}} |                      |
+| {{SpecName('ES Int Draft', '#sec-Intl.Collator.supportedLocalesOf', 'Intl.Collator.supportedLocalesOf')}} | {{Spec2('ES Int Draft')}} |                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Intl.Collator.supportedLocalesOf")}}
+
+## Voir aussi
+
+- {{jsxref("Collator", "Intl.Collator")}}
diff --git a/files/fr/web/javascript/reference/global_objects/intl/datetimeformat/format/index.html b/files/fr/web/javascript/reference/global_objects/intl/datetimeformat/format/index.html
deleted file mode 100644
index b04b345861..0000000000
--- a/files/fr/web/javascript/reference/global_objects/intl/datetimeformat/format/index.html
+++ /dev/null
@@ -1,123 +0,0 @@
----
-title: Intl.DateTimeFormat.prototype.format
-slug: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/format
-tags:
-  - Internationalisation
-  - Intl
-  - JavaScript
-  - Propriété
-  - Prototype
-  - Reference
-  - i18n
-translation_of: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/format
-original_slug: Web/JavaScript/Reference/Objets_globaux/Intl/DateTimeFormat/format
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <strong><code>Intl.DateTimeFormat.prototype.format()</code></strong> est un accesseur formate une date selon les options de locale et de format de l'objet {{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}}.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/intl-datetimeformat-prototype-format.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>dateTimeFormat</var>.format(<var>date</var>)</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>date</code></dt>
- <dd>La date à formater.</dd>
-</dl>
-
-<h2 id="Description">Description</h2>
-
-<p>L'accesseur <code>format</code> permet de formater une date en une chaîne de caractères en fonction des options de locale et de format définies pour l'objet {{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}}.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Utiliser_format">Utiliser <code>format</code></h3>
-
-<p>On peut utiliser la fonction renvoyée par l'accesseur <code>format</code> pour formater une date. Par exemple selon la locale serbe :</p>
-
-<pre class="brush: js">var options = {weekday: "long", year: "numeric", month: "long", day: "numeric"};
-var dateTimeFormat = new Intl.DateTimeFormat("sr-RS", options);
-console.log(dateTimeFormat.format(new Date()));
-// → "недеља, 7. април 2013."</pre>
-
-<h3 id="Utiliser_format_avec_map">Utiliser <code>format</code> avec <code>map()</code></h3>
-
-<p>On peut également utiliser la fonction renvoyée par l'accesseur <code>format</code> pour formater toutes les dates d'un tableau. On observe que la fonction est liée à l'objet <code>DateTimeFormat</code> dont elle provient, on peut donc la passer directement à {{jsxref("Array.prototype.map()")}}.</p>
-
-<pre class="brush: js">var a = [new Date(2012, 08), new Date(2012, 11), new Date(2012, 03)];
-var options = {year: "numeric", month: "long"};
-var dateTimeFormat = new Intl.DateTimeFormat("pt-BR", options);
-var formatted = a.map(dateTimeFormat.format);
-console.log(formatted.join("; "));
-// → "setembro de 2012; dezembro de 2012; abril de 2012"</pre>
-
-<h3 id="Comparaison_des_dates_formatées_et_des_valeurs_statiques">Comparaison des dates formatées et des valeurs statiques</h3>
-
-<p>La plupart du temps, le format renvoyé par <code>format()</code> est cohérent. Toutefois, cela peut évoluer à l'avenir et n'est pas garanti pour l'ensemble des langues (de telles variations sont souhaitables et permises par la spécification). Ainsi, IE et Edge ajoutent des caractères de contrôle bidirectionnels autour des dates afin que le texte produit ait une directionalité cohérente avec le texte avec lequel elles seront concaténées.</p>
-
-<p>Aussi, mieux vaut ne pas comparer un résultat fourni par <code>format()</code> avec une valeur statique :</p>
-
-<pre class="brush: js; example-bad">let d = new Date("2019-01-01T00:00:00.000000Z");
-let formattedDate = Intl.DateTimeFormat(undefined, {
-  year: 'numeric',
-  month: 'numeric',
-  day: 'numeric',
-  hour: 'numeric',
-  minute: 'numeric',
-  second: 'numeric'
-}).format(d);
-
-"1.1.2019, 01:00:00" === formattedDate;
-// true pour Firefox et les autres
-// false pour IE et Edge
-</pre>
-
-<div class="blockIndicator note">
-<p><strong>Note :</strong> Voir aussi ce fil <a href="https://stackoverflow.com/questions/25574963/ies-tolocalestring-has-strange-characters-in-results">StackOverflow</a> pour plus de détails et d'exemples.</p>
-</div>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('ES Int 1.0', '#sec-12.3.2', 'Intl.DateTimeFormat.format')}}</td>
-   <td>{{Spec2('ES Int 1.0')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES Int 2.0', '#sec-12.3.2', 'Intl.DateTimeFormat.format')}}</td>
-   <td>{{Spec2('ES Int 2.0')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES Int Draft', '#sec-Intl.DateTimeFormat.prototype.format', 'Intl.DateTimeFormat.format')}}</td>
-   <td>{{Spec2('ES Int Draft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Intl.DateTimeFormat.format")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}}</li>
- <li>{{jsxref("Date.prototype.toLocaleString")}}</li>
- <li>{{jsxref("Date.prototype.toLocaleDateString")}}</li>
- <li>{{jsxref("Date.prototype.toLocaleTimeString")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/intl/datetimeformat/format/index.md b/files/fr/web/javascript/reference/global_objects/intl/datetimeformat/format/index.md
new file mode 100644
index 0000000000..1fb93f7064
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/intl/datetimeformat/format/index.md
@@ -0,0 +1,101 @@
+---
+title: Intl.DateTimeFormat.prototype.format
+slug: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/format
+tags:
+  - Internationalisation
+  - Intl
+  - JavaScript
+  - Propriété
+  - Prototype
+  - Reference
+  - i18n
+translation_of: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/format
+original_slug: Web/JavaScript/Reference/Objets_globaux/Intl/DateTimeFormat/format
+---
+{{JSRef}}
+
+La méthode **`Intl.DateTimeFormat.prototype.format()`** est un accesseur formate une date selon les options de locale et de format de l'objet {{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}}.
+
+{{EmbedInteractiveExample("pages/js/intl-datetimeformat-prototype-format.html")}}
+
+## Syntaxe
+
+    dateTimeFormat.format(date)
+
+### Paramètres
+
+- `date`
+  - : La date à formater.
+
+## Description
+
+L'accesseur `format` permet de formater une date en une chaîne de caractères en fonction des options de locale et de format définies pour l'objet {{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}}.
+
+## Exemples
+
+### Utiliser `format`
+
+On peut utiliser la fonction renvoyée par l'accesseur `format` pour formater une date. Par exemple selon la locale serbe :
+
+```js
+var options = {weekday: "long", year: "numeric", month: "long", day: "numeric"};
+var dateTimeFormat = new Intl.DateTimeFormat("sr-RS", options);
+console.log(dateTimeFormat.format(new Date()));
+// → "недеља, 7. април 2013."
+```
+
+### Utiliser `format` avec `map()`
+
+On peut également utiliser la fonction renvoyée par l'accesseur `format` pour formater toutes les dates d'un tableau. On observe que la fonction est liée à l'objet `DateTimeFormat` dont elle provient, on peut donc la passer directement à {{jsxref("Array.prototype.map()")}}.
+
+```js
+var a = [new Date(2012, 08), new Date(2012, 11), new Date(2012, 03)];
+var options = {year: "numeric", month: "long"};
+var dateTimeFormat = new Intl.DateTimeFormat("pt-BR", options);
+var formatted = a.map(dateTimeFormat.format);
+console.log(formatted.join("; "));
+// → "setembro de 2012; dezembro de 2012; abril de 2012"
+```
+
+### Comparaison des dates formatées et des valeurs statiques
+
+La plupart du temps, le format renvoyé par `format()` est cohérent. Toutefois, cela peut évoluer à l'avenir et n'est pas garanti pour l'ensemble des langues (de telles variations sont souhaitables et permises par la spécification). Ainsi, IE et Edge ajoutent des caractères de contrôle bidirectionnels autour des dates afin que le texte produit ait une directionalité cohérente avec le texte avec lequel elles seront concaténées.
+
+Aussi, mieux vaut ne pas comparer un résultat fourni par `format()` avec une valeur statique :
+
+```js example-bad
+let d = new Date("2019-01-01T00:00:00.000000Z");
+let formattedDate = Intl.DateTimeFormat(undefined, {
+  year: 'numeric',
+  month: 'numeric',
+  day: 'numeric',
+  hour: 'numeric',
+  minute: 'numeric',
+  second: 'numeric'
+}).format(d);
+
+"1.1.2019, 01:00:00" === formattedDate;
+// true pour Firefox et les autres
+// false pour IE et Edge
+```
+
+> **Note :** Voir aussi ce fil [StackOverflow](https://stackoverflow.com/questions/25574963/ies-tolocalestring-has-strange-characters-in-results) pour plus de détails et d'exemples.
+
+## Spécifications
+
+| Spécification                                                                                                                            | État                             | Commentaires         |
+| ---------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | -------------------- |
+| {{SpecName('ES Int 1.0', '#sec-12.3.2', 'Intl.DateTimeFormat.format')}}                                         | {{Spec2('ES Int 1.0')}} | Définition initiale. |
+| {{SpecName('ES Int 2.0', '#sec-12.3.2', 'Intl.DateTimeFormat.format')}}                                         | {{Spec2('ES Int 2.0')}} |                      |
+| {{SpecName('ES Int Draft', '#sec-Intl.DateTimeFormat.prototype.format', 'Intl.DateTimeFormat.format')}} | {{Spec2('ES Int Draft')}} |                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Intl.DateTimeFormat.format")}}
+
+## Voir aussi
+
+- {{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}}
+- {{jsxref("Date.prototype.toLocaleString")}}
+- {{jsxref("Date.prototype.toLocaleDateString")}}
+- {{jsxref("Date.prototype.toLocaleTimeString")}}
diff --git a/files/fr/web/javascript/reference/global_objects/intl/datetimeformat/formatrange/index.html b/files/fr/web/javascript/reference/global_objects/intl/datetimeformat/formatrange/index.html
deleted file mode 100644
index c618202292..0000000000
--- a/files/fr/web/javascript/reference/global_objects/intl/datetimeformat/formatrange/index.html
+++ /dev/null
@@ -1,81 +0,0 @@
----
-title: Intl.DateTimeFormat.prototype.formatRange()
-slug: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/formatRange
-tags:
-  - Internationalisation
-  - Intl
-  - Méthode
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/formatRange
-original_slug: Web/JavaScript/Reference/Objets_globaux/Intl/DateTimeFormat/formatRange
----
-<p>{{JSRef}}</p>
-
-<p>La méthode <strong><code>Intl.DateTimeFormat.prototype.formatRange()</code></strong> permet de formater un intervalle de dates de la façon la plus concise en fonction de la <strong><code>locale</code></strong> et des <code><strong>options</strong></code> fournies lors de l'initialisation de l'objet {{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}}.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/intl-datetimeformat-prototype-formatrange.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre>Intl.DateTimeFormat.prototype.formatRange(<var>dateDébut, dateFin</var>)</pre>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Utilisation_simple_de_formatRange">Utilisation simple de <code>formatRange()</code></h3>
-
-<p>Cette méthode reçoit comme arguments deux objets {{jsxref("Date")}} et renvoie l'intervalle de la façon la plus concise possible (selon les options fournies lors de l'instanciation du formateur <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat">Intl.DateTimeFormat</a></code>).</p>
-
-<pre class="brush: js">let date1 = new Date(Date.UTC(2007, 0, 10, 10, 0, 0));
-let date2 = new Date(Date.UTC(2007, 0, 10, 11, 0, 0));
-let date3 = new Date(Date.UTC(2007, 0, 20, 10, 0, 0));
-// &gt; 'Wed, 10 Jan 2007 10:00:00 GMT'
-// &gt; 'Wed, 10 Jan 2007 11:00:00 GMT'
-// &gt; 'Sat, 20 Jan 2007 10:00:00 GMT'
-
-let fmt1 = new Intl.DateTimeFormat("en", {
-    year: '2-digit',
-    month: 'numeric',
-    day: 'numeric',
-    hour: 'numeric',
-    minute: 'numeric'
-});
-console.log(fmt1.format(date1));
-console.log(fmt1.formatRange(date1, date2));
-console.log(fmt1.formatRange(date1, date3));
-// &gt; '1/10/07, 10:00 AM'
-// &gt; '1/10/07, 10:00 – 11:00 AM'
-// &gt; '1/10/07, 10:00 AM – 1/20/07, 10:00 AM'
-
-let fmt2 = new Intl.DateTimeFormat("en", {
-    year: 'numeric',
-    month: 'short',
-    day: 'numeric'
-});
-console.log(fmt2.format(date1));
-console.log(fmt2.formatRange(date1, date2));
-console.log(fmt2.formatRange(date1, date3));
-// &gt; 'Jan 10, 2007'
-// &gt; 'Jan 10, 2007'
-// &gt; 'Jan 10 – 20, 2007'
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td><code><a href="https://rawgit.com/fabalbon/proposal-intl-DateTimeFormat-formatRange/master/out/#datetimeformat-objects">Intl.DateTimeFormat.prototype.formatRange</a></code></td>
-   <td>Brouillon de niveau 3</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<p>{{page('/fr/docs/Web/JavaScript/Reference/Objets_globaux/Intl', 'Voir_aussi')}}</p>
diff --git a/files/fr/web/javascript/reference/global_objects/intl/datetimeformat/formatrange/index.md b/files/fr/web/javascript/reference/global_objects/intl/datetimeformat/formatrange/index.md
new file mode 100644
index 0000000000..28b72a5645
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/intl/datetimeformat/formatrange/index.md
@@ -0,0 +1,71 @@
+---
+title: Intl.DateTimeFormat.prototype.formatRange()
+slug: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/formatRange
+tags:
+  - Internationalisation
+  - Intl
+  - Méthode
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/formatRange
+original_slug: Web/JavaScript/Reference/Objets_globaux/Intl/DateTimeFormat/formatRange
+---
+{{JSRef}}
+
+La méthode **`Intl.DateTimeFormat.prototype.formatRange()`** permet de formater un intervalle de dates de la façon la plus concise en fonction de la **`locale`** et des **`options`** fournies lors de l'initialisation de l'objet {{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}}.
+
+{{EmbedInteractiveExample("pages/js/intl-datetimeformat-prototype-formatrange.html")}}
+
+## Syntaxe
+
+    Intl.DateTimeFormat.prototype.formatRange(dateDébut, dateFin)
+
+## Exemples
+
+### Utilisation simple de `formatRange()`
+
+Cette méthode reçoit comme arguments deux objets {{jsxref("Date")}} et renvoie l'intervalle de la façon la plus concise possible (selon les options fournies lors de l'instanciation du formateur [`Intl.DateTimeFormat`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat)).
+
+```js
+let date1 = new Date(Date.UTC(2007, 0, 10, 10, 0, 0));
+let date2 = new Date(Date.UTC(2007, 0, 10, 11, 0, 0));
+let date3 = new Date(Date.UTC(2007, 0, 20, 10, 0, 0));
+// > 'Wed, 10 Jan 2007 10:00:00 GMT'
+// > 'Wed, 10 Jan 2007 11:00:00 GMT'
+// > 'Sat, 20 Jan 2007 10:00:00 GMT'
+
+let fmt1 = new Intl.DateTimeFormat("en", {
+    year: '2-digit',
+    month: 'numeric',
+    day: 'numeric',
+    hour: 'numeric',
+    minute: 'numeric'
+});
+console.log(fmt1.format(date1));
+console.log(fmt1.formatRange(date1, date2));
+console.log(fmt1.formatRange(date1, date3));
+// > '1/10/07, 10:00 AM'
+// > '1/10/07, 10:00 – 11:00 AM'
+// > '1/10/07, 10:00 AM – 1/20/07, 10:00 AM'
+
+let fmt2 = new Intl.DateTimeFormat("en", {
+    year: 'numeric',
+    month: 'short',
+    day: 'numeric'
+});
+console.log(fmt2.format(date1));
+console.log(fmt2.formatRange(date1, date2));
+console.log(fmt2.formatRange(date1, date3));
+// > 'Jan 10, 2007'
+// > 'Jan 10, 2007'
+// > 'Jan 10 – 20, 2007'
+```
+
+## Spécifications
+
+| Spécification                                                                                                                                          | État                  | Commentaires |
+| ------------------------------------------------------------------------------------------------------------------------------------------------------ | --------------------- | ------------ |
+| [`Intl.DateTimeFormat.prototype.formatRange`](https://rawgit.com/fabalbon/proposal-intl-DateTimeFormat-formatRange/master/out/#datetimeformat-objects) | Brouillon de niveau 3 |              |
+
+## Voir aussi
+
+{{page('/fr/docs/Web/JavaScript/Reference/Objets_globaux/Intl', 'Voir_aussi')}}
diff --git a/files/fr/web/javascript/reference/global_objects/intl/datetimeformat/formatrangetoparts/index.html b/files/fr/web/javascript/reference/global_objects/intl/datetimeformat/formatrangetoparts/index.html
deleted file mode 100644
index 1bc99d14f8..0000000000
--- a/files/fr/web/javascript/reference/global_objects/intl/datetimeformat/formatrangetoparts/index.html
+++ /dev/null
@@ -1,74 +0,0 @@
----
-title: Intl.DateTimeFormat.prototype.formatRangeToParts()
-slug: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/formatRangeToParts
-tags:
-  - Internationalization
-  - JavaScript
-  - Localization
-  - i18n
-translation_of: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/formatRangeToParts
-original_slug: Web/JavaScript/Reference/Objets_globaux/Intl/DateTimeFormat/formatRangeToParts
----
-<p>{{JSRef}}</p>
-
-<p>La fonction <strong><code>Intl.DateTimeFormat.prototype.formatRangeToParts()</code></strong> permet, selon la locale utilisée, de représenter chaque élément de l'intervalle de dates via <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat/prototype">DateTimeFormat</a></code>.</p>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre>Intl.DateTimeFormat.prototype.formatRangeToParts(<var>dateDebut, dateFin</var>)</pre>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Usage_basique_de_formatRangeToParts">Usage basique de <code>formatRangeToParts</code></h3>
-
-<p>Cette fonction reçoit deux <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date">Dates</a> et retourne un <a href="/en-US/docs/Glossary/array">Array</a> d'objets contenant les élements qui représentent chaque partie de l'intervalle de date formatée, selon la locale utilisée.</p>
-
-<pre class="brush: js">let date1 = new Date(Date.UTC(2007, 0, 10, 10, 0, 0));
-let date2 = new Date(Date.UTC(2007, 0, 10, 11, 0, 0));
-// &gt; 'Wed, 10 Jan 2007 10:00:00 GMT'
-// &gt; 'Wed, 10 Jan 2007 11:00:00 GMT'
-
-let fmt = new Intl.DateTimeFormat("en", {
-    hour: 'numeric',
-    minute: 'numeric'
-});
-
-console.log(fmt.formatRange(date1, date2));
-// &gt; '10:00 – 11:00 AM'
-
-fmt.formatRangeToParts(date1, date2);
-// retourne la valeur:
-// [
-//   { type: 'hour',      value: '10',  source: "startRange" },
-//   { type: 'literal',   value: ':',   source: "startRange" },
-//   { type: 'minute',    value: '00',  source: "startRange" },
-//   { type: 'literal',   value: ' – ', source: "shared"     },
-//   { type: 'hour',      value: '11',  source: "endRange"   },
-//   { type: 'literal',   value: ':',   source: "endRange"   },
-//   { type: 'minute',    value: '00',  source: "endRange"   },
-//   { type: 'literal',   value: ' ',   source: "shared"     },
-//   { type: 'dayPeriod', value: 'AM',  source: "shared"     }
-// ]</pre>
-
-<h2 id="Spécifications">Spécifications</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><a href="https://rawgit.com/fabalbon/proposal-intl-DateTimeFormat-formatRange/master/out/#datetimeformat-objects">Intl.DateTimeFormat.prototype.formatRange</a></td>
-   <td>Stage 3</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-
-
-<p>{{Compat("javascript.builtins.Intl.DateTimeFormat.formatRangeToParts")}}</p>
diff --git a/files/fr/web/javascript/reference/global_objects/intl/datetimeformat/formatrangetoparts/index.md b/files/fr/web/javascript/reference/global_objects/intl/datetimeformat/formatrangetoparts/index.md
new file mode 100644
index 0000000000..10f3db9b19
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/intl/datetimeformat/formatrangetoparts/index.md
@@ -0,0 +1,63 @@
+---
+title: Intl.DateTimeFormat.prototype.formatRangeToParts()
+slug: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/formatRangeToParts
+tags:
+  - Internationalization
+  - JavaScript
+  - Localization
+  - i18n
+translation_of: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/formatRangeToParts
+original_slug: Web/JavaScript/Reference/Objets_globaux/Intl/DateTimeFormat/formatRangeToParts
+---
+{{JSRef}}
+
+La fonction **`Intl.DateTimeFormat.prototype.formatRangeToParts()`** permet, selon la locale utilisée, de représenter chaque élément de l'intervalle de dates via [`DateTimeFormat`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat/prototype).
+
+## Syntaxe
+
+    Intl.DateTimeFormat.prototype.formatRangeToParts(dateDebut, dateFin)
+
+## Exemples
+
+### Usage basique de `formatRangeToParts`
+
+Cette fonction reçoit deux [Dates](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date) et retourne un [Array](/en-US/docs/Glossary/array) d'objets contenant les élements qui représentent chaque partie de l'intervalle de date formatée, selon la locale utilisée.
+
+```js
+let date1 = new Date(Date.UTC(2007, 0, 10, 10, 0, 0));
+let date2 = new Date(Date.UTC(2007, 0, 10, 11, 0, 0));
+// > 'Wed, 10 Jan 2007 10:00:00 GMT'
+// > 'Wed, 10 Jan 2007 11:00:00 GMT'
+
+let fmt = new Intl.DateTimeFormat("en", {
+    hour: 'numeric',
+    minute: 'numeric'
+});
+
+console.log(fmt.formatRange(date1, date2));
+// > '10:00 – 11:00 AM'
+
+fmt.formatRangeToParts(date1, date2);
+// retourne la valeur:
+// [
+//   { type: 'hour',      value: '10',  source: "startRange" },
+//   { type: 'literal',   value: ':',   source: "startRange" },
+//   { type: 'minute',    value: '00',  source: "startRange" },
+//   { type: 'literal',   value: ' – ', source: "shared"     },
+//   { type: 'hour',      value: '11',  source: "endRange"   },
+//   { type: 'literal',   value: ':',   source: "endRange"   },
+//   { type: 'minute',    value: '00',  source: "endRange"   },
+//   { type: 'literal',   value: ' ',   source: "shared"     },
+//   { type: 'dayPeriod', value: 'AM',  source: "shared"     }
+// ]
+```
+
+## Spécifications
+
+| Specification                                                                                                                                        | Status  | Comment |
+| ---------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | ------- |
+| [Intl.DateTimeFormat.prototype.formatRange](https://rawgit.com/fabalbon/proposal-intl-DateTimeFormat-formatRange/master/out/#datetimeformat-objects) | Stage 3 |         |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Intl.DateTimeFormat.formatRangeToParts")}}
diff --git a/files/fr/web/javascript/reference/global_objects/intl/datetimeformat/formattoparts/index.html b/files/fr/web/javascript/reference/global_objects/intl/datetimeformat/formattoparts/index.html
deleted file mode 100644
index 4293903628..0000000000
--- a/files/fr/web/javascript/reference/global_objects/intl/datetimeformat/formattoparts/index.html
+++ /dev/null
@@ -1,165 +0,0 @@
----
-title: Intl.DateTimeFormat.prototype.formatToParts()
-slug: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/formatToParts
-tags:
-  - DateTimeFormat
-  - Internationalisation
-  - Intl
-  - JavaScript
-  - Méthode
-  - Prototype
-  - Reference
-  - i18n
-translation_of: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/formatToParts
-original_slug: Web/JavaScript/Reference/Objets_globaux/Intl/DateTimeFormat/formatToParts
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <strong><code>Intl.DateTimeFormat.prototype.formatToParts()</code></strong> permet de mettre en forme des chaînes de caractères avec des informations temporelles selon la locale utilisée.</p>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">Intl.DateTimeFormat.prototype.formatToParts(date)</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>date</code> {{optional_inline}}</dt>
- <dd>La date qu'on souhaite mettre en forme.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Un tableau ({{jsxref("Array")}}) d'objets qui contiennent les composants de la date mis en forme.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>La méthode <code>formatToParts()</code> est utile lorsqu'on souhaite mettre en forme des dates de façon personnalisée. Elle renvoie un tableau d'objets qui contiennent les fragments spécifiques à la locale, à partir desquels on peut construire des chaînes tout en conservant les parties spécifique à la locale. La structure de l'objet renvoyé par la méthode est semblable à celle-ci :</p>
-
-<pre class="brush: js">[
-  { type: "day", value: "17" },
-  { type: "weekday", value "Monday" }
-]</pre>
-
-<p>Les types possibles sont :</p>
-
-<dl>
- <dt><code>day</code></dt>
- <dd>La chaîne utilisée pour désigner le jour, par exemple <code>"17"</code>.</dd>
- <dt><code>dayPeriod</code></dt>
- <dd>La chaîne utilisée pour désigner le moment de la journée, par exemple <code>"AM"</code> (qui désigne la matinée, avant midi) ou <code>"PM"</code> (qui désigne l'après-midi).</dd>
- <dt><code>era</code></dt>
- <dd>La chaîne utilisée pour l'ère (par exemple <code>"BC"</code> ou <code>"AD"</code>).</dd>
- <dt><code>hour</code></dt>
- <dd>La chaîne utilisée pour l'heure (par exemple <code>"3"</code> or <code>"03"</code>).</dd>
- <dt><code>literal</code></dt>
- <dd>La chaîne utilisée pour séparée le jour de l'heure (par exemple <code>"</code> <code>:</code> <code>,</code> <code>/</code> <code>"</code>).</dd>
- <dt><code>minute</code></dt>
- <dd>La chaîne utilisée pour les minutes (par exemple <code>"00"</code>).</dd>
- <dt><code>month</code></dt>
- <dd>La chaîne utilisée pour le mois (par exemple <code>"12"</code>).</dd>
- <dt><code>second</code></dt>
- <dd>La chaîne utilisée pour les secondes (par exemple <code>"02"</code>).</dd>
- <dt><code>timeZoneName</code></dt>
- <dd>La chaîne utilisée pour désigner le fuseau horaire (par exemple <code>"UTC"</code>).</dd>
- <dt><code>weekday</code></dt>
- <dd>La chaîne de caractères utilisée pour le jour de la semaine, par exemple <code>"M"</code>, <code>"Monday"</code> ou <code>"Montag"</code>.</dd>
- <dt><code>year</code></dt>
- <dd>La chaîne utilisée pour désigner l'année (par exemple <code>"2012"</code> ou <code>"96"</code>).</dd>
-</dl>
-
-<h2 id="Exemples">Exemples</h2>
-
-<p><code>DateTimeFormat</code> produit des chaînes localisées opaques qui ne peuvent pas être manipulées directement :</p>
-
-<pre class="brush: js">var date = Date.UTC(2012, 11, 17, 3, 0, 42);
-
-var formatter = new Intl.DateTimeFormat("en-us", {
-  weekday: 'long',
-  year: 'numeric',
-  month: 'numeric',
-  day: 'numeric',
-  hour: 'numeric',
-  minute: 'numeric',
-  second: 'numeric',
-  hour12: true,
-  timeZone: "UTC"
-});
-
-formatter.format(date);
-// "Monday, 12/17/2012, 3:00:42 AM"
-</pre>
-
-<p>Cependant, pour de nombreuses interfaces utilisateur, on peut vouloir personnaliser la mise en forme de cette chaîne de caractères. La méthode <code>formatToParts</code> permet une mise en forme dans le souci de la locale en manipulant les différentes composantes :</p>
-
-<pre class="brush: js">formatter.formatToParts(date);
-
-// return value:
-[
-  { type: 'weekday',   value: 'Monday' },
-  { type: 'separator', value: ', '     },
-  { type: 'month',     value: '12'     },
-  { type: 'literal', value: '/'      },
-  { type: 'day',       value: '17'     },
-  { type: 'literal', value: '/'      },
-  { type: 'year',      value: '2012'   },
-  { type: 'literal', value: ', '     },
-  { type: 'hour',      value: '3'      },
-  { type: 'literal', value: ':'      },
-  { type: 'minute',    value: '00'     },
-  { type: 'literal', value: ':'      },
-  { type: 'second',    value: '42'     },
-  { type: 'literal', value: ' '      },
-  { type: 'dayPeriod', value: 'AM'     }
-]
-</pre>
-
-<p>L'information étant décomposée, on peut alors la mettre en forme et la recomposée de façon adaptée :</p>
-
-<pre class="brush: js">var dateString = formatter.formatToParts(date).map(({type, value}) =&gt; {
-  switch (type) {
-    case 'dayPeriod': return `&lt;strong&gt;${value}&lt;/strong&gt;`;
-    default : return value;
-  }
-}).reduce((string, part) =&gt; string + part);
-
-console.log(formatter.format(date));
-// "Monday, 12/17/2012, 3:00:42 AM"
-
-console.log(dateString);
-// "Monday, 12/17/2012, 3:00:42 &lt;strong&gt;AM&lt;/strong&gt;"</pre>
-
-<h2 id="Prothèse_démulation_polyfill">Prothèse d'émulation (<em>polyfill</em>)</h2>
-
-<p>Une prothèse de cette fonctionnalité est disponible sur le dépôt décrivant <a href="https://github.com/zbraniecki/proposal-intl-formatToParts">la proposition de fonctionnalité</a>.</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES Int Draft', '#sec-Intl.DateTimeFormat.prototype.formatToParts', 'Intl.DateTimeFormat.prototype.formatToParts')}}</td>
-   <td>{{Spec2('ES Int Draft')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Intl.DateTimeFormat.formatToParts")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}}</li>
- <li>{{jsxref("DateTimeFormat.format", "Intl.DateTimeFormat.prototype.format")}}</li>
- <li>{{jsxref("Date.prototype.toLocaleString()")}}</li>
- <li>{{jsxref("Date.prototype.toLocaleDateString()")}}</li>
- <li>{{jsxref("Date.prototype.toLocaleTimeString()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/intl/datetimeformat/formattoparts/index.md b/files/fr/web/javascript/reference/global_objects/intl/datetimeformat/formattoparts/index.md
new file mode 100644
index 0000000000..079ae0d33a
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/intl/datetimeformat/formattoparts/index.md
@@ -0,0 +1,154 @@
+---
+title: Intl.DateTimeFormat.prototype.formatToParts()
+slug: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/formatToParts
+tags:
+  - DateTimeFormat
+  - Internationalisation
+  - Intl
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - i18n
+translation_of: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/formatToParts
+original_slug: Web/JavaScript/Reference/Objets_globaux/Intl/DateTimeFormat/formatToParts
+---
+{{JSRef}}
+
+La méthode **`Intl.DateTimeFormat.prototype.formatToParts()`** permet de mettre en forme des chaînes de caractères avec des informations temporelles selon la locale utilisée.
+
+## Syntaxe
+
+    Intl.DateTimeFormat.prototype.formatToParts(date)
+
+### Paramètres
+
+- `date` {{optional_inline}}
+  - : La date qu'on souhaite mettre en forme.
+
+### Valeur de retour
+
+Un tableau ({{jsxref("Array")}}) d'objets qui contiennent les composants de la date mis en forme.
+
+## Description
+
+La méthode `formatToParts()` est utile lorsqu'on souhaite mettre en forme des dates de façon personnalisée. Elle renvoie un tableau d'objets qui contiennent les fragments spécifiques à la locale, à partir desquels on peut construire des chaînes tout en conservant les parties spécifique à la locale. La structure de l'objet renvoyé par la méthode est semblable à celle-ci :
+
+```js
+[
+  { type: "day", value: "17" },
+  { type: "weekday", value "Monday" }
+]
+```
+
+Les types possibles sont :
+
+- `day`
+  - : La chaîne utilisée pour désigner le jour, par exemple `"17"`.
+- `dayPeriod`
+  - : La chaîne utilisée pour désigner le moment de la journée, par exemple `"AM"` (qui désigne la matinée, avant midi) ou `"PM"` (qui désigne l'après-midi).
+- `era`
+  - : La chaîne utilisée pour l'ère (par exemple `"BC"` ou `"AD"`).
+- `hour`
+  - : La chaîne utilisée pour l'heure (par exemple `"3"` or `"03"`).
+- `literal`
+  - : La chaîne utilisée pour séparée le jour de l'heure (par exemple `"` `:` `,` `/` `"`).
+- `minute`
+  - : La chaîne utilisée pour les minutes (par exemple `"00"`).
+- `month`
+  - : La chaîne utilisée pour le mois (par exemple `"12"`).
+- `second`
+  - : La chaîne utilisée pour les secondes (par exemple `"02"`).
+- `timeZoneName`
+  - : La chaîne utilisée pour désigner le fuseau horaire (par exemple `"UTC"`).
+- `weekday`
+  - : La chaîne de caractères utilisée pour le jour de la semaine, par exemple `"M"`, `"Monday"` ou `"Montag"`.
+- `year`
+  - : La chaîne utilisée pour désigner l'année (par exemple `"2012"` ou `"96"`).
+
+## Exemples
+
+`DateTimeFormat` produit des chaînes localisées opaques qui ne peuvent pas être manipulées directement :
+
+```js
+var date = Date.UTC(2012, 11, 17, 3, 0, 42);
+
+var formatter = new Intl.DateTimeFormat("en-us", {
+  weekday: 'long',
+  year: 'numeric',
+  month: 'numeric',
+  day: 'numeric',
+  hour: 'numeric',
+  minute: 'numeric',
+  second: 'numeric',
+  hour12: true,
+  timeZone: "UTC"
+});
+
+formatter.format(date);
+// "Monday, 12/17/2012, 3:00:42 AM"
+```
+
+Cependant, pour de nombreuses interfaces utilisateur, on peut vouloir personnaliser la mise en forme de cette chaîne de caractères. La méthode `formatToParts` permet une mise en forme dans le souci de la locale en manipulant les différentes composantes :
+
+```js
+formatter.formatToParts(date);
+
+// return value:
+[
+  { type: 'weekday',   value: 'Monday' },
+  { type: 'separator', value: ', '     },
+  { type: 'month',     value: '12'     },
+  { type: 'literal', value: '/'      },
+  { type: 'day',       value: '17'     },
+  { type: 'literal', value: '/'      },
+  { type: 'year',      value: '2012'   },
+  { type: 'literal', value: ', '     },
+  { type: 'hour',      value: '3'      },
+  { type: 'literal', value: ':'      },
+  { type: 'minute',    value: '00'     },
+  { type: 'literal', value: ':'      },
+  { type: 'second',    value: '42'     },
+  { type: 'literal', value: ' '      },
+  { type: 'dayPeriod', value: 'AM'     }
+]
+```
+
+L'information étant décomposée, on peut alors la mettre en forme et la recomposée de façon adaptée :
+
+```js
+var dateString = formatter.formatToParts(date).map(({type, value}) => {
+  switch (type) {
+    case 'dayPeriod': return `<strong>${value}</strong>`;
+    default : return value;
+  }
+}).reduce((string, part) => string + part);
+
+console.log(formatter.format(date));
+// "Monday, 12/17/2012, 3:00:42 AM"
+
+console.log(dateString);
+// "Monday, 12/17/2012, 3:00:42 <strong>AM</strong>"
+```
+
+## Prothèse d'émulation (_polyfill_)
+
+Une prothèse de cette fonctionnalité est disponible sur le dépôt décrivant [la proposition de fonctionnalité](https://github.com/zbraniecki/proposal-intl-formatToParts).
+
+## Spécifications
+
+| Spécification                                                                                                                                                            | État                             | Commentaires         |
+| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | -------------------- |
+| {{SpecName('ES Int Draft', '#sec-Intl.DateTimeFormat.prototype.formatToParts', 'Intl.DateTimeFormat.prototype.formatToParts')}} | {{Spec2('ES Int Draft')}} | Définition initiale. |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Intl.DateTimeFormat.formatToParts")}}
+
+## Voir aussi
+
+- {{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}}
+- {{jsxref("DateTimeFormat.format", "Intl.DateTimeFormat.prototype.format")}}
+- {{jsxref("Date.prototype.toLocaleString()")}}
+- {{jsxref("Date.prototype.toLocaleDateString()")}}
+- {{jsxref("Date.prototype.toLocaleTimeString()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/intl/datetimeformat/index.html b/files/fr/web/javascript/reference/global_objects/intl/datetimeformat/index.html
deleted file mode 100644
index d8cc5bc6fd..0000000000
--- a/files/fr/web/javascript/reference/global_objects/intl/datetimeformat/index.html
+++ /dev/null
@@ -1,294 +0,0 @@
----
-title: Intl.DateTimeFormat
-slug: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat
-tags:
-  - Internationalisation
-  - Intl
-  - JavaScript
-  - Reference
-  - i18n
-translation_of: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat
-original_slug: Web/JavaScript/Reference/Objets_globaux/Intl/DateTimeFormat
----
-<div>{{JSRef}}</div>
-
-<p>L'objet <strong><code>Intl.DateTimeFormat</code></strong> est un constructeur d'objets permettant de formatter des dates et des heures selon une langue.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/intl-datetimeformat.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">new Intl.DateTimeFormat([<var>locales</var>[, <var>options</var>]])
-Intl.DateTimeFormat.call(<var>this</var>[, <var>locales</var>[, <var>options</var>]])</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>locales</code>{{optional_inline}}</dt>
- <dd>
- <p>Ce paramètre optionnel est une chaine de caractères avec un identifiant de langue BCP 47, ou un tableau de ce type de chaine de caractères. Pour utiliser la locale par défaut du navigateur, on pourra omettre cet argument (ou passer la valeur <code>undefined</code>). Pour le format général et l'interprétation de l'argument <code>locales</code>, voir la page {{jsxref("Objets_globaux/Intl","Intl","#L'identification_et_le_choix_de_la_locale")}}. Les clefs d'extensions Unicode suivantes sont autorisées :</p>
-
- <dl>
-  <dt>nu</dt>
-  <dd>Système de numérotation. Les valeurs possibles incluent : <code>"arab", "arabext", "bali", "beng", "deva", "fullwide", "gujr", "guru", "hanidec", "khmr", "knda", "laoo", "latn", "limb", "mlym", "mong", "mymr", "orya", "tamldec", "telu", "thai", "tibt"</code>.</dd>
-  <dt>ca</dt>
-  <dd>Calendrier. Les valeurs possibles incluent : <code>"buddhist", "chinese", "coptic", "ethiopia", "ethiopic", "gregory", "hebrew", "indian", "islamic", "islamicc", "iso8601", "japanese", "persian", "roc"</code>.</dd>
-  <dt><code>hc</code></dt>
-  <dd>Le type de cycle horaire à utiliser. Les valeurs possibles sont <code>"h11"</code>, <code>"h12"</code>, <code>"h23"</code>, <code>"h24"</code>.</dd>
- </dl>
- </dd>
- <dt><code>options</code></dt>
- <dd>
- <p>Un objet avec certaines ou toutes les propriétés suivantes :</p>
-
- <dl>
-  <dt><code>localeMatcher</code></dt>
-  <dd>L'algorithme de correspondance à utiliser pour la locale. Les valeurs possibles sont <code>"lookup"</code> et <code>"best fit"</code> ; le défaut est <code>"best fit"</code>. Pour des informations sur cette option, voir la page {{jsxref("Objets_globaux/Intl","Intl","##Choix_de_la_locale")}}</dd>
-  <dt><code>timeZone</code></dt>
-  <dd>Le fuseau horaire à utiliser. La seule valeur que doivent reconnaitre les implémentations est "UTC" ; la valeur par défaut est le fuseau horaire du moteur JavaScript. Les implémentations peuvent aussi reconnaitre les noms de fuseau horaire de la <a href="https://www.iana.org/time-zones">base de données IANA de fuseaux horaires</a>, tel que <code>"Asia/Shanghai"</code>, <code>"Asia/Kolkata"</code>, <code>"America/New_York"</code>.</dd>
-  <dt><code>hour12</code></dt>
-  <dd>S'il faut utiliser le format horaire sur 12 heures (au lieu de celui-ci sur 24 heures). Les valeurs possibles sont <code>true</code> et <code>false</code> ; la valeur par défaut dépend de la locale. Cette option surcharge l'étiquette <code>hc</code> et/ou l'option <code>hourCycle</code>.</dd>
-  <dt><code>hourCycle</code></dt>
-  <dd>Le cycle horaire à utiliser. Les valeurs possibles sont <code>"h11"</code>, <code>"h12"</code>, <code>"h23"</code>, <code>"h24"</code>. Cette option surcharge l'étiquette <code>hc</code> mais sera remplacée par <code>hour12</code> si cette dernière est présente.</dd>
-  <dt><code>formatMatcher</code></dt>
-  <dd>L'algorithme de correspondance à utiliser pour le formattage. Les valeurs possibles sont <code>"basic"</code> et <code>"best fit"</code> ; par défaut <code>"best fit"</code>. Voir les paragraphes suivants pour des informations concernant l'usage de cette propriété.</dd>
- </dl>
-
- <p>Les propriétés suivantes décrivent les composants date-heure à utiliser pour le formattage de la sortie.  Les implémentations ont pour obligation de supporter au minimum les ensembles suivants :</p>
-
- <ul>
-  <li><code>weekday, year, month, day, hour, minute, second</code></li>
-  <li><code>weekday, year, month, day</code></li>
-  <li><code>year, month, day</code></li>
-  <li><code>year, month</code></li>
-  <li><code>month, day</code></li>
-  <li><code>hour, minute, second</code></li>
-  <li><code>hour, minute</code></li>
- </ul>
-
- <p>Les implémentations peuvent supporter d'autres sous-ensembles, et les demandes seront évaluées face à toutes les combinaisons de sous-ensembles disponibles pour trouver la meilleure correspondance. Deux algorithmes sont disponibles pour cette évaluation et choisis par la propriété <code>formatMatcher</code> : un <a href="https://www.ecma-international.org/ecma-402/1.0/#BasicFormatMatcher">algorithme "basic" complètement spécifié</a> et un algorithme <code>"best fit"</code> dépendant de l'implémentation.</p>
-
- <dl>
-  <dt><code>weekday</code></dt>
-  <dd>La représentation du jour de la semaine. Les valeurs possibles sont :
-  <ul>
-   <li><code>"long"</code> (par exemple <code>Thursday</code>)</li>
-   <li><code>"short"</code> (par exemple <code>Thu</code>)</li>
-   <li><code>"narrow"</code> (par exemple <code>T</code>). Deux jours de la semaines pourront partager la même représentation dans certaines locales (par exemple, en anglais <code>Tuesday</code> sera également représenté avec <code>T</code> en notation étroite).</li>
-  </ul>
-  </dd>
-  <dt><code>era</code></dt>
-  <dd>La représentation de l'ère. Les valeurs possibles sont :
-  <ul>
-   <li><code>"long"</code> (par exemple <code>Anno Domini</code>)</li>
-   <li><code>"short"</code> (par exemple <code>AD</code>)</li>
-   <li><code>"narrow"</code> (par exemple <code>A</code>)</li>
-  </ul>
-  </dd>
-  <dt><code>year</code></dt>
-  <dd>La représentation de l'année. Les valeurs possibles sont :
-  <ul>
-   <li><code>"numeric"</code> (par exemple <code>2012</code>)</li>
-   <li><code>"2-digit"</code> (par exemple <code>12</code>)</li>
-  </ul>
-  </dd>
-  <dt><code>month</code></dt>
-  <dd>La représentation du mois. Les valeurs possibles sont :
-  <ul>
-   <li><code>"numeric"</code> (par exemple <code>2</code>)</li>
-   <li><code>"2-digit"</code> (par exemple <code>02</code>)</li>
-   <li><code>"long"</code> (par exemple <code>March</code>)</li>
-   <li><code>"short"</code> (par exemple <code>Mar</code>)</li>
-   <li><code>"narrow"</code> (par exemple <code>M</code>). Dans certaines locales, deux mois pourront partager la même représentation avec le style étroit (par exemple, <code>May</code> en anglais, sera également représenté avec <code>M</code>).</li>
-  </ul>
-  </dd>
-  <dt><code>day</code></dt>
-  <dd>La représentation du jour. Les valeurs possibles sont :
-  <ul>
-   <li><code>"numeric"</code> (par exemple <code>1</code>)</li>
-   <li><code>"2-digit"</code> (par exemple <code>01</code>)</li>
-  </ul>
-  </dd>
-  <dt><code>hour</code></dt>
-  <dd>La représentation de l'heure. Les valeurs possibles sont :
-  <ul>
-   <li><code>"numeric"</code> (par exemple <code>1</code>)</li>
-   <li><code>"2-digit"</code> (par exemple <code>01</code>)</li>
-  </ul>
-  </dd>
-  <dt><code>minute</code></dt>
-  <dd>La représentation des minutes. Les valeurs possibles sont :
-  <ul>
-   <li><code>"numeric"</code> (par exemple <code>1</code>)</li>
-   <li><code>"2-digit"</code> (par exemple <code>01</code>)</li>
-  </ul>
-  </dd>
-  <dt><code>second</code></dt>
-  <dd>La représentation des secondes. Les valeurs possibles sont :
-  <ul>
-   <li><code>"numeric"</code> (par exemple <code>1</code>)</li>
-   <li><code>"2-digit"</code> (par exemple <code>01</code>)</li>
-  </ul>
-  </dd>
-  <dt><code>timeZoneName</code></dt>
-  <dd>La représentation du fuseau horaire. Les valeurs possibles sont :
-  <ul>
-   <li><code>"long"</code> (par exemple <code>British Summer Time</code>)</li>
-   <li><code>"short"</code> (par exemple <code>GMT+1</code>)</li>
-  </ul>
-  </dd>
- </dl>
-
- <p>La valeur par défaut pour chaque composante est {{jsxref("undefined")}}, mais si toutes les composantes valent <code>undefined</code>, alors <code>year</code>, <code>month</code>, et <code>day</code> seront considérés comme <code>"numeric"</code>.</p>
- </dd>
-</dl>
-
-<h2 id="Description">Description</h2>
-
-<h3 id="Propriétés">Propriétés</h3>
-
-<dl>
- <dt>{{jsxref("DateTimeFormat.prototype", "Intl.DateTimeFormat.prototype")}}</dt>
- <dd>Permet l'ajout de propriétés à tous les objets.</dd>
-</dl>
-
-<h3 id="Méthodes">Méthodes</h3>
-
-<dl>
- <dt>{{jsxref("DateTimeFormat.supportedLocalesOf", "Intl.DateTimeFormat.supportedLocalesOf()")}}</dt>
- <dd>Renvoie un tableau contenant les locales supportées parmis les locales fournies, sans qu'il soit nécessaire de recourir à la locale par défaut de l'implémentation.</dd>
-</dl>
-
-<h2 id="Instances_de_DateTimeFormat">Instances de<code> DateTimeFormat</code></h2>
-
-<h3 id="Propriétés_2">Propriétés</h3>
-
-<p>Les instances de<code> DateTimeFormat()</code> héritent des propriétés suivantes depuis leur prototype :</p>
-
-<div>{{page('fr/docs/Web/JavaScript/Reference/Objets_globaux/DateTimeFormat/prototype','Properties')}}</div>
-
-<h3 id="Méthodes_2">Méthodes</h3>
-
-<div>
-<p>Les instances de<code> DateTimeFormat()</code> héritent des propriétés suivantes depuis leur prototype :</p>
-{{page('fr/docs/Web/JavaScript/Reference/Objets_globaux/DateTimeFormat/prototype','Méthodes')}}</div>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Utiliser_DateTimeFormat">Utiliser <code>DateTimeFormat()</code></h3>
-
-<p>Dans une utilisation basique sans préciser de locale, <code>DateTimeFormat()</code> utilise la locale et les options par défaut</p>
-
-<pre class="brush:js">var date = new Date(Date.UTC(2012, 11, 20, 3, 0, 0));
-
-// DateTimeFormat sans arguments dépend de l'implémentation,
-// la locale par défaut, et le fuseau horaire par défaut
-console.log(new Intl.DateTimeFormat().format(date));
-// → "20/12/2012" avec une locale fr-Fr et un fuseau horaire CEST</pre>
-
-<h3 id="Utiliser_locales">Utiliser <code>locales</code></h3>
-
-<p>Cet exemple montre quelques variations de formattage pour les dates et les heures localisées. Afin d'obtenir le langage utilisé au sein de l'interface utilisateur de votre application, vérifiez de bien fournir ce langage (et éventuellement des locales de recours) en utilisant l'argument <code>locales</code> :</p>
-
-<pre class="brush: js">var date = new Date(Date.UTC(2012, 11, 20, 3, 0, 0));
-
-// les formats qui suivent se basent sur le
-// fuseau horaire CEST
-
-// l'anglais américain utilise l'ordre mois-jour-année
-console.log(new Intl.DateTimeFormat("en-US").format(date));
-// → "12/20/2012"
-
-// l'anglais britannique utilise l'ordre jour-mois-année
-console.log(new Intl.DateTimeFormat("en-GB").format(date));
-// → "20/12/2012"
-
-// le coréen utilise l'ordre année-mois-jour
-console.log(new Intl.DateTimeFormat("ko-KR").format(date));
-// → "2012. 12. 20."
-
-// l'arabe, dans la plupart des pays arabophones, utilise les chiffres arabes
-console.log(new Intl.DateTimeFormat("ar-EG").format(date));
-// → "<span dir="rtl">٢٠‏/١٢‏/٢٠١٢</span>"
-
-// en ce qui concerne le japonais, les applications peuvent
-// souhaiter utiliser le calendrier japonais
-// pour lequel 2012 était l'année 24 de l'ère Heisei
-console.log(new Intl.DateTimeFormat("ja-JP-u-ca-japanese").format(date));
-// → "24/12/20"
-
-// quand un langage non support est demandé (ex : le balinais)
-// il est possible de fournir un langage de recours (ici l'indonésien)
-console.log(new Intl.DateTimeFormat(["ban", "id"]).format(date));
-// → "20/12/2012"
-</pre>
-
-<h3 id="Utiliser_options">Utiliser <code>options</code></h3>
-
-<p>Les formats de la date et de l'heure peuvent être personnalisés en utilisant l'argument <code>options</code> :</p>
-
-<pre class="brush: js">var date = new Date(Date.UTC(2012, 11, 20, 3, 0, 0));
-
-// fournir le jour de la semaine avec une date longue
-var options = {weekday: "long", year: "numeric", month: "long", day: "numeric"};
-console.log(new Intl.DateTimeFormat("de-DE", options).format(date));
-// → "Donnerstag, 20. Dezember 2012"
-
-// une application peut vouloir utiliser UTC et le rendre visible
-options.timeZone = "UTC";
-options.timeZoneName = "short";
-console.log(new Intl.DateTimeFormat("en-US", options).format(date));
-// → "Thursday, December 20, 2012, GMT"
-
-// parfois, vous voulez être précis
-options = {hour: "numeric", minute: "numeric", second: "numeric",
-           timeZoneName: "short"};
-console.log(new Intl.DateTimeFormat("en-AU", options).format(date));
-// → "2:00:00 pm AEDT"
-
-// parfois, même les USA ont besoin d'afficher une heure sur 24h
-options = {year: "numeric", month: "numeric", day: "numeric",
-           hour: "numeric", minute: "numeric", second: "numeric",
-           hour12: false};
-console.log(new Intl.DateTimeFormat("en-US", options));
-// → "12/19/2012, 19:00:00"
-
-// pour utiliser la locale par défaut du navigateur :
-console.log(new Intl.DateTimeFormat('default', options).format(date));
-// → "12/19/2012, 19:00:00" (peut varier selon la locale du navigateur)
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES Int 1.0', '#sec-12.1', 'Intl.DateTimeFormat')}}</td>
-   <td>{{Spec2('ES Int 1.0')}}</td>
-   <td>Première définition.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES Int 2.0', '#sec-12.1', 'Intl.DateTimeFormat')}}</td>
-   <td>{{Spec2('ES Int 2.0')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES Int Draft', '#datetimeformat-objects', 'Intl.DateTimeFormat')}}</td>
-   <td>{{Spec2('ES Int Draft')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Intl.DateTimeFormat")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<div>{{page('/fr/docs/Web/JavaScript/Reference/Objets_globaux/Intl', 'Voir_aussi')}}</div>
diff --git a/files/fr/web/javascript/reference/global_objects/intl/datetimeformat/index.md b/files/fr/web/javascript/reference/global_objects/intl/datetimeformat/index.md
new file mode 100644
index 0000000000..8c1bc5333b
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/intl/datetimeformat/index.md
@@ -0,0 +1,263 @@
+---
+title: Intl.DateTimeFormat
+slug: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat
+tags:
+  - Internationalisation
+  - Intl
+  - JavaScript
+  - Reference
+  - i18n
+translation_of: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat
+original_slug: Web/JavaScript/Reference/Objets_globaux/Intl/DateTimeFormat
+---
+{{JSRef}}
+
+L'objet **`Intl.DateTimeFormat`** est un constructeur d'objets permettant de formatter des dates et des heures selon une langue.
+
+{{EmbedInteractiveExample("pages/js/intl-datetimeformat.html")}}
+
+## Syntaxe
+
+    new Intl.DateTimeFormat([locales[, options]])
+    Intl.DateTimeFormat.call(this[, locales[, options]])
+
+### Paramètres
+
+- `locales`{{optional_inline}}
+
+  - : Ce paramètre optionnel est une chaine de caractères avec un identifiant de langue BCP 47, ou un tableau de ce type de chaine de caractères. Pour utiliser la locale par défaut du navigateur, on pourra omettre cet argument (ou passer la valeur `undefined`). Pour le format général et l'interprétation de l'argument `locales`, voir la page {{jsxref("Objets_globaux/Intl","Intl","#L'identification_et_le_choix_de_la_locale")}}. Les clefs d'extensions Unicode suivantes sont autorisées :
+
+    - nu
+      - : Système de numérotation. Les valeurs possibles incluent : `"arab", "arabext", "bali", "beng", "deva", "fullwide", "gujr", "guru", "hanidec", "khmr", "knda", "laoo", "latn", "limb", "mlym", "mong", "mymr", "orya", "tamldec", "telu", "thai", "tibt"`.
+    - ca
+      - : Calendrier. Les valeurs possibles incluent : `"buddhist", "chinese", "coptic", "ethiopia", "ethiopic", "gregory", "hebrew", "indian", "islamic", "islamicc", "iso8601", "japanese", "persian", "roc"`.
+    - `hc`
+      - : Le type de cycle horaire à utiliser. Les valeurs possibles sont `"h11"`, `"h12"`, `"h23"`, `"h24"`.
+
+- `options`
+
+  - : Un objet avec certaines ou toutes les propriétés suivantes :
+
+    - `localeMatcher`
+      - : L'algorithme de correspondance à utiliser pour la locale. Les valeurs possibles sont `"lookup"` et `"best fit"` ; le défaut est `"best fit"`. Pour des informations sur cette option, voir la page {{jsxref("Objets_globaux/Intl","Intl","##Choix_de_la_locale")}}
+    - `timeZone`
+      - : Le fuseau horaire à utiliser. La seule valeur que doivent reconnaitre les implémentations est "UTC" ; la valeur par défaut est le fuseau horaire du moteur JavaScript. Les implémentations peuvent aussi reconnaitre les noms de fuseau horaire de la [base de données IANA de fuseaux horaires](https://www.iana.org/time-zones), tel que `"Asia/Shanghai"`, `"Asia/Kolkata"`, `"America/New_York"`.
+    - `hour12`
+      - : S'il faut utiliser le format horaire sur 12 heures (au lieu de celui-ci sur 24 heures). Les valeurs possibles sont `true` et `false` ; la valeur par défaut dépend de la locale. Cette option surcharge l'étiquette `hc` et/ou l'option `hourCycle`.
+    - `hourCycle`
+      - : Le cycle horaire à utiliser. Les valeurs possibles sont `"h11"`, `"h12"`, `"h23"`, `"h24"`. Cette option surcharge l'étiquette `hc` mais sera remplacée par `hour12` si cette dernière est présente.
+    - `formatMatcher`
+      - : L'algorithme de correspondance à utiliser pour le formattage. Les valeurs possibles sont `"basic"` et `"best fit"` ; par défaut `"best fit"`. Voir les paragraphes suivants pour des informations concernant l'usage de cette propriété.
+
+    Les propriétés suivantes décrivent les composants date-heure à utiliser pour le formattage de la sortie.  Les implémentations ont pour obligation de supporter au minimum les ensembles suivants :
+
+    - `weekday, year, month, day, hour, minute, second`
+    - `weekday, year, month, day`
+    - `year, month, day`
+    - `year, month`
+    - `month, day`
+    - `hour, minute, second`
+    - `hour, minute`
+
+    Les implémentations peuvent supporter d'autres sous-ensembles, et les demandes seront évaluées face à toutes les combinaisons de sous-ensembles disponibles pour trouver la meilleure correspondance. Deux algorithmes sont disponibles pour cette évaluation et choisis par la propriété `formatMatcher` : un [algorithme "basic" complètement spécifié](https://www.ecma-international.org/ecma-402/1.0/#BasicFormatMatcher) et un algorithme `"best fit"` dépendant de l'implémentation.
+
+    - `weekday`
+
+      - : La représentation du jour de la semaine. Les valeurs possibles sont :
+
+        - `"long"` (par exemple `Thursday`)
+        - `"short"` (par exemple `Thu`)
+        - `"narrow"` (par exemple `T`). Deux jours de la semaines pourront partager la même représentation dans certaines locales (par exemple, en anglais `Tuesday` sera également représenté avec `T` en notation étroite).
+
+    - `era`
+
+      - : La représentation de l'ère. Les valeurs possibles sont :
+
+        - `"long"` (par exemple `Anno Domini`)
+        - `"short"` (par exemple `AD`)
+        - `"narrow"` (par exemple `A`)
+
+    - `year`
+
+      - : La représentation de l'année. Les valeurs possibles sont :
+
+        - `"numeric"` (par exemple `2012`)
+        - `"2-digit"` (par exemple `12`)
+
+    - `month`
+
+      - : La représentation du mois. Les valeurs possibles sont :
+
+        - `"numeric"` (par exemple `2`)
+        - `"2-digit"` (par exemple `02`)
+        - `"long"` (par exemple `March`)
+        - `"short"` (par exemple `Mar`)
+        - `"narrow"` (par exemple `M`). Dans certaines locales, deux mois pourront partager la même représentation avec le style étroit (par exemple, `May` en anglais, sera également représenté avec `M`).
+
+    - `day`
+
+      - : La représentation du jour. Les valeurs possibles sont :
+
+        - `"numeric"` (par exemple `1`)
+        - `"2-digit"` (par exemple `01`)
+
+    - `hour`
+
+      - : La représentation de l'heure. Les valeurs possibles sont :
+
+        - `"numeric"` (par exemple `1`)
+        - `"2-digit"` (par exemple `01`)
+
+    - `minute`
+
+      - : La représentation des minutes. Les valeurs possibles sont :
+
+        - `"numeric"` (par exemple `1`)
+        - `"2-digit"` (par exemple `01`)
+
+    - `second`
+
+      - : La représentation des secondes. Les valeurs possibles sont :
+
+        - `"numeric"` (par exemple `1`)
+        - `"2-digit"` (par exemple `01`)
+
+    - `timeZoneName`
+
+      - : La représentation du fuseau horaire. Les valeurs possibles sont :
+
+        - `"long"` (par exemple `British Summer Time`)
+        - `"short"` (par exemple `GMT+1`)
+
+    La valeur par défaut pour chaque composante est {{jsxref("undefined")}}, mais si toutes les composantes valent `undefined`, alors `year`, `month`, et `day` seront considérés comme `"numeric"`.
+
+## Description
+
+### Propriétés
+
+- {{jsxref("DateTimeFormat.prototype", "Intl.DateTimeFormat.prototype")}}
+  - : Permet l'ajout de propriétés à tous les objets.
+
+### Méthodes
+
+- {{jsxref("DateTimeFormat.supportedLocalesOf", "Intl.DateTimeFormat.supportedLocalesOf()")}}
+  - : Renvoie un tableau contenant les locales supportées parmis les locales fournies, sans qu'il soit nécessaire de recourir à la locale par défaut de l'implémentation.
+
+## Instances de` DateTimeFormat`
+
+### Propriétés
+
+Les instances de` DateTimeFormat()` héritent des propriétés suivantes depuis leur prototype :
+
+{{page('fr/docs/Web/JavaScript/Reference/Objets_globaux/DateTimeFormat/prototype','Properties')}}
+
+### Méthodes
+
+Les instances de` DateTimeFormat()` héritent des propriétés suivantes depuis leur prototype :
+
+{{page('fr/docs/Web/JavaScript/Reference/Objets_globaux/DateTimeFormat/prototype','Méthodes')}}
+
+## Exemples
+
+### Utiliser `DateTimeFormat()`
+
+Dans une utilisation basique sans préciser de locale, `DateTimeFormat()` utilise la locale et les options par défaut
+
+```js
+var date = new Date(Date.UTC(2012, 11, 20, 3, 0, 0));
+
+// DateTimeFormat sans arguments dépend de l'implémentation,
+// la locale par défaut, et le fuseau horaire par défaut
+console.log(new Intl.DateTimeFormat().format(date));
+// → "20/12/2012" avec une locale fr-Fr et un fuseau horaire CEST
+```
+
+### Utiliser `locales`
+
+Cet exemple montre quelques variations de formattage pour les dates et les heures localisées. Afin d'obtenir le langage utilisé au sein de l'interface utilisateur de votre application, vérifiez de bien fournir ce langage (et éventuellement des locales de recours) en utilisant l'argument `locales` :
+
+```js
+var date = new Date(Date.UTC(2012, 11, 20, 3, 0, 0));
+
+// les formats qui suivent se basent sur le
+// fuseau horaire CEST
+
+// l'anglais américain utilise l'ordre mois-jour-année
+console.log(new Intl.DateTimeFormat("en-US").format(date));
+// → "12/20/2012"
+
+// l'anglais britannique utilise l'ordre jour-mois-année
+console.log(new Intl.DateTimeFormat("en-GB").format(date));
+// → "20/12/2012"
+
+// le coréen utilise l'ordre année-mois-jour
+console.log(new Intl.DateTimeFormat("ko-KR").format(date));
+// → "2012. 12. 20."
+
+// l'arabe, dans la plupart des pays arabophones, utilise les chiffres arabes
+console.log(new Intl.DateTimeFormat("ar-EG").format(date));
+// → "٢٠‏/١٢‏/٢٠١٢"
+
+// en ce qui concerne le japonais, les applications peuvent
+// souhaiter utiliser le calendrier japonais
+// pour lequel 2012 était l'année 24 de l'ère Heisei
+console.log(new Intl.DateTimeFormat("ja-JP-u-ca-japanese").format(date));
+// → "24/12/20"
+
+// quand un langage non support est demandé (ex : le balinais)
+// il est possible de fournir un langage de recours (ici l'indonésien)
+console.log(new Intl.DateTimeFormat(["ban", "id"]).format(date));
+// → "20/12/2012"
+```
+
+### Utiliser `options`
+
+Les formats de la date et de l'heure peuvent être personnalisés en utilisant l'argument `options` :
+
+```js
+var date = new Date(Date.UTC(2012, 11, 20, 3, 0, 0));
+
+// fournir le jour de la semaine avec une date longue
+var options = {weekday: "long", year: "numeric", month: "long", day: "numeric"};
+console.log(new Intl.DateTimeFormat("de-DE", options).format(date));
+// → "Donnerstag, 20. Dezember 2012"
+
+// une application peut vouloir utiliser UTC et le rendre visible
+options.timeZone = "UTC";
+options.timeZoneName = "short";
+console.log(new Intl.DateTimeFormat("en-US", options).format(date));
+// → "Thursday, December 20, 2012, GMT"
+
+// parfois, vous voulez être précis
+options = {hour: "numeric", minute: "numeric", second: "numeric",
+           timeZoneName: "short"};
+console.log(new Intl.DateTimeFormat("en-AU", options).format(date));
+// → "2:00:00 pm AEDT"
+
+// parfois, même les USA ont besoin d'afficher une heure sur 24h
+options = {year: "numeric", month: "numeric", day: "numeric",
+           hour: "numeric", minute: "numeric", second: "numeric",
+           hour12: false};
+console.log(new Intl.DateTimeFormat("en-US", options));
+// → "12/19/2012, 19:00:00"
+
+// pour utiliser la locale par défaut du navigateur :
+console.log(new Intl.DateTimeFormat('default', options).format(date));
+// → "12/19/2012, 19:00:00" (peut varier selon la locale du navigateur)
+```
+
+## Spécifications
+
+| Spécification                                                                                            | État                             | Commentaires         |
+| -------------------------------------------------------------------------------------------------------- | -------------------------------- | -------------------- |
+| {{SpecName('ES Int 1.0', '#sec-12.1', 'Intl.DateTimeFormat')}}                     | {{Spec2('ES Int 1.0')}} | Première définition. |
+| {{SpecName('ES Int 2.0', '#sec-12.1', 'Intl.DateTimeFormat')}}                     | {{Spec2('ES Int 2.0')}} |                      |
+| {{SpecName('ES Int Draft', '#datetimeformat-objects', 'Intl.DateTimeFormat')}} | {{Spec2('ES Int Draft')}} |                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Intl.DateTimeFormat")}}
+
+## Voir aussi
+
+{{page('/fr/docs/Web/JavaScript/Reference/Objets_globaux/Intl', 'Voir_aussi')}}
diff --git a/files/fr/web/javascript/reference/global_objects/intl/datetimeformat/resolvedoptions/index.html b/files/fr/web/javascript/reference/global_objects/intl/datetimeformat/resolvedoptions/index.html
deleted file mode 100644
index e00599b987..0000000000
--- a/files/fr/web/javascript/reference/global_objects/intl/datetimeformat/resolvedoptions/index.html
+++ /dev/null
@@ -1,73 +0,0 @@
----
-title: Intl.DateTimeFormat.prototype.resolvedOptions()
-slug: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/resolvedOptions
-tags:
-  - DateTimeFormat
-  - Internationalization
-  - Intl
-  - JavaScript
-  - Localization
-  - Method
-  - Prototype
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/resolvedOptions
-original_slug: Web/JavaScript/Reference/Objets_globaux/Intl/DateTimeFormat/resolvedOptions
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <code><strong>Intl.DateTimeFormat.prototype.resolvedOptions()</strong></code> renvoie un nouvel objet dont les propriétés reflètent les options de format et de locale pour les heures et dates, calculées pendant l'initialisation de l'objet <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat"><code>Intl.DateTimeFormat</code></a>.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/intl-datetimeformat-prototype-resolvedoptions.html")}}</div>
-
-<h2 id="syntax">Syntaxe</h2>
-
-<pre class="brush: js">resolvedOptions()</pre>
-
-<h3 id="return_value">Valeur de retour</h3>
-
-<p>Un nouvel objet dont les propriétés reflètent les options de format et de locale pour les heures et dates, calculées pendant l'initialisation de l'objet <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat"><code>Intl.DateTimeFormat</code></a>.</p>
-
-<h2 id="description">Description</h2>
-
-<p>La valeur renvoyée par cette méthode contient les propriétés suivantes :</p>
-
-<dl>
- <dt><code>locale</code></dt>
- <dd>La balise de langue BCP 47 qui est réellement utilisée. Si des extensions Unicode étaient fournies avec la balise d'origine et sont supportées pour la locale utilisée, les paires de clés-valeurs seront incluses dans <code>locale</code>.</dd>
- <dt><code>calendar</code></dt>
- <dd>Le calendrier utilisé (ex. <code>"gregory"</code> pour le calendrier grégorien).</dd>
- <dt><code>numberingSystem</code></dt>
- <dd>Les valeurs demandées pour les extensions Unicode <code>"ca"</code> et <code>"nu"</code> ou leurs valeurs par défaut.</dd>
- <dt><code>timeZone</code></dt>
- <dd>La valeur fournie par l'argument <code>options</code> pour cette propriété ou <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/undefined"><code>undefined</code></a> (qui représente le fuseau horaire de l'environnement) si aucune valeur n'a été fournie. Les applications ne doivent pas s'appuyer sur ce dernier cas. En effet, de futures versions pourraient renvoyer une chaîne de caractères représentant le fuseau horaire de l'environnement et non pas <code>undefined</code>.</dd>
- <dt><code>hour12</code></dt>
- <dd>La valeur fournie pour cette propriété dans l'argument <code>options</code>.</dd>
- <dt><code>weekday</code>, <code>era</code>, <code>year</code>, <code>month</code>, <code>day</code>, <code>hour</code>, <code>minute</code>, <code>second</code>, <code>timeZoneName</code></dt>
- <dd>Les valeurs qui correspondent entre les propriétés de l'argument <code>options</code> et les combinaisons disponibles dans l'environnement pour les formats de date et d'heure pour la locale. Certaines de ces propriétés peuvent ne pas être présentes, cela indique que les composants indiqués ne seront pas représentés.</dd>
-</dl>
-
-<h2 id="examples">Exemples</h2>
-
-<h3 id="using_the_resolvedoptions_method">Utiliser la méthode resolvedOptions()</h3>
-<pre class="brush: js">var germanFakeRegion = new Intl.DateTimeFormat("de-XX", { timeZone: "UTC" });
-var usedOptions = germanFakeRegion.resolvedOptions();
-
-usedOptions.locale;          // "de"
-usedOptions.calendar;        // "gregory"
-usedOptions.numberingSystem; // "latn"
-usedOptions.timeZone;        // "UTC"
-usedOptions.month;           // "numeric"</pre>
-
-<h2 id="specifications">Spécifications</h2>
-
-{{Specifications}}
-
-<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
-
-<div>{{Compat}}</div>
-
-<h2 id="see_also">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat"><code>Intl.DateTimeFormat</code></a></li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/intl/datetimeformat/resolvedoptions/index.md b/files/fr/web/javascript/reference/global_objects/intl/datetimeformat/resolvedoptions/index.md
new file mode 100644
index 0000000000..26e4253671
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/intl/datetimeformat/resolvedoptions/index.md
@@ -0,0 +1,74 @@
+---
+title: Intl.DateTimeFormat.prototype.resolvedOptions()
+slug: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/resolvedOptions
+tags:
+  - DateTimeFormat
+  - Internationalization
+  - Intl
+  - JavaScript
+  - Localization
+  - Method
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/resolvedOptions
+original_slug: Web/JavaScript/Reference/Objets_globaux/Intl/DateTimeFormat/resolvedOptions
+---
+{{JSRef}}
+
+La méthode **`Intl.DateTimeFormat.prototype.resolvedOptions()`** renvoie un nouvel objet dont les propriétés reflètent les options de format et de locale pour les heures et dates, calculées pendant l'initialisation de l'objet [`Intl.DateTimeFormat`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat).
+
+{{EmbedInteractiveExample("pages/js/intl-datetimeformat-prototype-resolvedoptions.html")}}
+
+## Syntaxe
+
+```js
+resolvedOptions()
+```
+
+### Valeur de retour
+
+Un nouvel objet dont les propriétés reflètent les options de format et de locale pour les heures et dates, calculées pendant l'initialisation de l'objet [`Intl.DateTimeFormat`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat).
+
+## Description
+
+La valeur renvoyée par cette méthode contient les propriétés suivantes :
+
+- `locale`
+  - : La balise de langue BCP 47 qui est réellement utilisée. Si des extensions Unicode étaient fournies avec la balise d'origine et sont supportées pour la locale utilisée, les paires de clés-valeurs seront incluses dans `locale`.
+- `calendar`
+  - : Le calendrier utilisé (ex. `"gregory"` pour le calendrier grégorien).
+- `numberingSystem`
+  - : Les valeurs demandées pour les extensions Unicode `"ca"` et `"nu"` ou leurs valeurs par défaut.
+- `timeZone`
+  - : La valeur fournie par l'argument `options` pour cette propriété ou [`undefined`](/fr/docs/Web/JavaScript/Reference/Global_Objects/undefined) (qui représente le fuseau horaire de l'environnement) si aucune valeur n'a été fournie. Les applications ne doivent pas s'appuyer sur ce dernier cas. En effet, de futures versions pourraient renvoyer une chaîne de caractères représentant le fuseau horaire de l'environnement et non pas `undefined`.
+- `hour12`
+  - : La valeur fournie pour cette propriété dans l'argument `options`.
+- `weekday`, `era`, `year`, `month`, `day`, `hour`, `minute`, `second`, `timeZoneName`
+  - : Les valeurs qui correspondent entre les propriétés de l'argument `options` et les combinaisons disponibles dans l'environnement pour les formats de date et d'heure pour la locale. Certaines de ces propriétés peuvent ne pas être présentes, cela indique que les composants indiqués ne seront pas représentés.
+
+## Exemples
+
+### Utiliser la méthode resolvedOptions()
+
+```js
+var germanFakeRegion = new Intl.DateTimeFormat("de-XX", { timeZone: "UTC" });
+var usedOptions = germanFakeRegion.resolvedOptions();
+
+usedOptions.locale;          // "de"
+usedOptions.calendar;        // "gregory"
+usedOptions.numberingSystem; // "latn"
+usedOptions.timeZone;        // "UTC"
+usedOptions.month;           // "numeric"
+```
+
+## Spécifications
+
+{{Specifications}}
+
+## Compatibilité des navigateurs
+
+{{Compat}}
+
+## Voir aussi
+
+- [`Intl.DateTimeFormat`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat)
diff --git a/files/fr/web/javascript/reference/global_objects/intl/datetimeformat/supportedlocalesof/index.html b/files/fr/web/javascript/reference/global_objects/intl/datetimeformat/supportedlocalesof/index.html
deleted file mode 100644
index 73aecce3f5..0000000000
--- a/files/fr/web/javascript/reference/global_objects/intl/datetimeformat/supportedlocalesof/index.html
+++ /dev/null
@@ -1,95 +0,0 @@
----
-title: Intl.DateTimeFormat.supportedLocalesOf()
-slug: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/supportedLocalesOf
-tags:
-  - Internationalisation
-  - Intl
-  - JavaScript
-  - Méthode
-  - Prototype
-  - Reference
-  - i18n
-translation_of: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/supportedLocalesOf
-original_slug: Web/JavaScript/Reference/Objets_globaux/Intl/DateTimeFormat/supportedLocalesOf
----
-<div>{{JSRef}}</div>
-
-<p>À partir d'une locale ou d'un tableau de locales <code><strong>Intl.DateTimeFormat.supportedLocalesOf()</strong></code> renvoie un tableau qui contient les locales supportées pour le formatage des dates et des heures qui ne nécessitent pas d'avoir recours à la locale par défaut de l'environnement.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/intl-datetimeformat-prototype-supportedlocalesof.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">Intl.DateTimeFormat.supportedLocalesOf(<var>locales</var>[, <var>options</var>])</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>locales</code></dt>
- <dd>Un chaîne de caractères au format d'une balise de langue BCP 47 ou bien un tableau de telles chaînes. Pour plus d'informations sur le format de l'argument <code>locales</code>, voir la page {{jsxref("Intl", "Intl", "#L'identification_et_le_choix_de_la_locale")}}.</dd>
- <dt><code>options</code></dt>
- <dd>
- <p>Paramètre optionnel, un objet pouvant avoir la propriété suivante :</p>
-
- <dl>
-  <dt><code>localeMatcher</code></dt>
-  <dd>L'algorithme de correspondance entre locales à utiliser. Les valeurs possibles sont "lookup" et "best fit". Pour plus d'informations sur ce sujet, voir la page {{jsxref("Intl", "Intl", "#Choix_de_la_locale")}}.</dd>
- </dl>
- </dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Un tableau de chaînes de caractères qui représente un sous-ensemble des balises de langue qui sont prises en charge pour la mise en forme de l'heure et de la date sans qu'il soit nécessaire d'utiliser la locale par défaut de l'environnement d'exécution.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>Renvoie un tableau qui est un sous-ensemble de <code>locales</code>. Les balises de langues renvoyées sont celles supportées par l'environnement pour le formatage des heures et des dates. Ces balises sont déterminées en fonction de l'algorithme de correspondances de locale et des locales utilisées. Le tableau résultant fournit les locales qui permettent de ne pas avoir à utiliser la locale par défaut.</p>
-
-<h2 id="Exemple">Exemple</h2>
-
-<h3 id="Utiliser_supportedLocalesOf">Utiliser <code>supportedLocalesOf</code></h3>
-
-<p>Si on dispose d'un environnement qui supporte les locales indonésienne et allemande mais pas balinaise pour le formatage des dates et des heures,  <code>supportedLocalesOf</code> renverra les balises BCP 47 pour l'indonésien et l'allemand (bien que la collation pinyin ne soit pas pertinente pour les dates ni pour l'indonésien et qu'il soit peu probable qu'une variante indonésienne existe pour l'allemand). Pour l'exemple, on l'utilise l'algorithme <code>"lookup"</code>. Si on utilisait <code>"best fit"</code>, on pourrait considérer que l'indonésien est adéquat pour la locale balinaise (sachant que la plupart des balinais comprend l'indonésien) et donc également renvoyer la balise balinaise.</p>
-
-<pre class="brush: js">var locales = ["ban", "id-u-co-pinyin", "de-ID"];
-var options = {localeMatcher: "lookup"};
-console.log(Intl.DateTimeFormat.supportedLocalesOf(locales, options).join(", "));
-// → "id-u-co-pinyin, de-ID"</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES Int 1.0', '#sec-12.2.2', 'Intl.DateTimeFormat.supportedLocalesOf')}}</td>
-   <td>{{Spec2('ES Int 1.0')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES Int 2.0', '#sec-12.2.2', 'Intl.DateTimeFormat.supportedLocalesOf')}}</td>
-   <td>{{Spec2('ES Int 2.0')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES Int Draft', '#sec-Intl.DateTimeFormat.supportedLocalesOf', 'Intl.DateTimeFormat.supportedLocalesOf')}}</td>
-   <td>{{Spec2('ES Int Draft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Intl.DateTimeFormat.supportedLocalesOf")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/intl/datetimeformat/supportedlocalesof/index.md b/files/fr/web/javascript/reference/global_objects/intl/datetimeformat/supportedlocalesof/index.md
new file mode 100644
index 0000000000..13f5517dce
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/intl/datetimeformat/supportedlocalesof/index.md
@@ -0,0 +1,71 @@
+---
+title: Intl.DateTimeFormat.supportedLocalesOf()
+slug: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/supportedLocalesOf
+tags:
+  - Internationalisation
+  - Intl
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - i18n
+translation_of: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/supportedLocalesOf
+original_slug: Web/JavaScript/Reference/Objets_globaux/Intl/DateTimeFormat/supportedLocalesOf
+---
+{{JSRef}}
+
+À partir d'une locale ou d'un tableau de locales **`Intl.DateTimeFormat.supportedLocalesOf()`** renvoie un tableau qui contient les locales supportées pour le formatage des dates et des heures qui ne nécessitent pas d'avoir recours à la locale par défaut de l'environnement.
+
+{{EmbedInteractiveExample("pages/js/intl-datetimeformat-prototype-supportedlocalesof.html")}}
+
+## Syntaxe
+
+    Intl.DateTimeFormat.supportedLocalesOf(locales[, options])
+
+### Paramètres
+
+- `locales`
+  - : Un chaîne de caractères au format d'une balise de langue BCP 47 ou bien un tableau de telles chaînes. Pour plus d'informations sur le format de l'argument `locales`, voir la page {{jsxref("Intl", "Intl", "#L'identification_et_le_choix_de_la_locale")}}.
+- `options`
+
+  - : Paramètre optionnel, un objet pouvant avoir la propriété suivante :
+
+    - `localeMatcher`
+      - : L'algorithme de correspondance entre locales à utiliser. Les valeurs possibles sont "lookup" et "best fit". Pour plus d'informations sur ce sujet, voir la page {{jsxref("Intl", "Intl", "#Choix_de_la_locale")}}.
+
+### Valeur de retour
+
+Un tableau de chaînes de caractères qui représente un sous-ensemble des balises de langue qui sont prises en charge pour la mise en forme de l'heure et de la date sans qu'il soit nécessaire d'utiliser la locale par défaut de l'environnement d'exécution.
+
+## Description
+
+Renvoie un tableau qui est un sous-ensemble de `locales`. Les balises de langues renvoyées sont celles supportées par l'environnement pour le formatage des heures et des dates. Ces balises sont déterminées en fonction de l'algorithme de correspondances de locale et des locales utilisées. Le tableau résultant fournit les locales qui permettent de ne pas avoir à utiliser la locale par défaut.
+
+## Exemple
+
+### Utiliser `supportedLocalesOf`
+
+Si on dispose d'un environnement qui supporte les locales indonésienne et allemande mais pas balinaise pour le formatage des dates et des heures,  `supportedLocalesOf` renverra les balises BCP 47 pour l'indonésien et l'allemand (bien que la collation pinyin ne soit pas pertinente pour les dates ni pour l'indonésien et qu'il soit peu probable qu'une variante indonésienne existe pour l'allemand). Pour l'exemple, on l'utilise l'algorithme `"lookup"`. Si on utilisait `"best fit"`, on pourrait considérer que l'indonésien est adéquat pour la locale balinaise (sachant que la plupart des balinais comprend l'indonésien) et donc également renvoyer la balise balinaise.
+
+```js
+var locales = ["ban", "id-u-co-pinyin", "de-ID"];
+var options = {localeMatcher: "lookup"};
+console.log(Intl.DateTimeFormat.supportedLocalesOf(locales, options).join(", "));
+// → "id-u-co-pinyin, de-ID"
+```
+
+## Spécifications
+
+| Spécification                                                                                                                                                | État                             | Commentaires         |
+| ------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | -------------------- |
+| {{SpecName('ES Int 1.0', '#sec-12.2.2', 'Intl.DateTimeFormat.supportedLocalesOf')}}                                             | {{Spec2('ES Int 1.0')}} | Définition initiale. |
+| {{SpecName('ES Int 2.0', '#sec-12.2.2', 'Intl.DateTimeFormat.supportedLocalesOf')}}                                             | {{Spec2('ES Int 2.0')}} |                      |
+| {{SpecName('ES Int Draft', '#sec-Intl.DateTimeFormat.supportedLocalesOf', 'Intl.DateTimeFormat.supportedLocalesOf')}} | {{Spec2('ES Int Draft')}} |                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Intl.DateTimeFormat.supportedLocalesOf")}}
+
+## Voir aussi
+
+- {{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}}
diff --git a/files/fr/web/javascript/reference/global_objects/intl/displaynames/displaynames/index.html b/files/fr/web/javascript/reference/global_objects/intl/displaynames/displaynames/index.html
deleted file mode 100644
index ff150634f6..0000000000
--- a/files/fr/web/javascript/reference/global_objects/intl/displaynames/displaynames/index.html
+++ /dev/null
@@ -1,104 +0,0 @@
----
-title: Intl.DisplayNames() constructor
-slug: Web/JavaScript/Reference/Global_Objects/Intl/DisplayNames/DisplayNames
-tags:
-  - API
-  - Constructeur
-  - JavaScript
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Intl/DisplayNames/DisplayNames
----
-<div>{{JSRef}}</div>
-
-<p>Le constructeur <strong><code>Intl.DisplayNames()</code></strong> crée des objets qui permettent de fournir des traductions constantes des noms de langues, régions et systèmes d'écriture.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/intl-displaynames.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox notranslate">new Intl.DisplayNames([<var>langues</var>[, <var>options</var>]])
-</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>langues</code> {{optional_inline}}</dt>
- <dd>
- <p>Une chaine avec un code de langue BCP 47, ou un tableau de telles chaines. Pour comprendre la forme générale et l'interprétation de cet argument, voyez {{jsxref("Intl", "Intl page", "#Locale_identification_and_negotiation", 1)}}. Les clés d'extensions Unicode suivantes sont permises :</p>
-
- <dl>
-  <dt><code>nu</code></dt>
-  <dd>Le système de numération à utiliser. Les valeurs possibles sont : <code>"arab"</code>, <code>"arabext"</code>, <code>"bali"</code>, <code>"beng"</code>, <code>"deva"</code>, <code>"fullwide"</code>, <code>"gujr"</code>, <code>"guru"</code>, <code>"hanidec"</code>, <code>"khmr"</code>, <code>"knda"</code>, <code>"laoo"</code>, <code>"latn"</code>, <code>"limb"</code>, <code>"mlym"</code>, <code>"mong"</code>, <code>"mymr"</code>, <code>"orya"</code>, <code>"tamldec"</code>, <code>"telu"</code>, <code>"thai"</code>, <code>"tibt"</code>.</dd>
- </dl>
- </dd>
- <dt><code>options</code> {{optional_inline}}</dt>
- <dd>
- <p>Un objet avec certaines des des propriétés suivantes :</p>
-
- <dl>
-  <dt><code>localeMatcher</code></dt>
-  <dd>L'algorithme de correspondance régional à utiliser. Les valeurs possibles sont <code>"lookup"</code> et <code>"best fit"</code> ; celle par défaut étant <code>"best fit"</code>. Pour plus d'informations à propos de cette option, voir {{jsxref("Global_Objects/Intl", "Intl page", "#Locale_negotiation", 1)}}.</dd>
-  <dt><code>style</code></dt>
-  <dd>Le style de mise en forme à utiliser, celui par défaut étant <code>"long"</code>.
-  <ul>
-   <li><code>"narrow"</code></li>
-   <li><code>"short"</code></li>
-   <li><code>"long"</code></li>
-  </ul>
-  </dd>
-  <dt><code>type</code></dt>
-  <dd>Le type à utiliser, celui par défaut étant <code>"language"</code>.
-  <ul>
-   <li><code>"language"</code></li>
-   <li><code>"region"</code></li>
-   <li><code>"script"</code></li>
-   <li><code>"currency"</code></li>
-  </ul>
-  </dd>
-  <dt><code>fallback</code></dt>
-  <dd>La valeur par défaut à utiliser, celle par défaut étant <code>"code"</code>.
-  <ul>
-   <li><code>"code"</code></li>
-   <li><code>"none"</code></li>
-  </ul>
-  </dd>
- </dl>
- </dd>
-</dl>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Utilisation_simple">Utilisation simple</h3>
-
-<p>Dans son utilisation simple, sans spécifier de langue, une chaine dans la langue locale par défaut et avec les options par défaut sera retournée.</p>
-
-<pre class="brush: js notranslate">console.log((new Intl.DisplayNames()).of('US'));
-// Expected output: 'us'
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Intl.DisplayNames', '#sec-intl-displaynames-constructor', 'the Intl.DisplayNames constructor')}}</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<div>
-
-
-<p>{{Compat("javascript.builtins.Intl.DisplayNames.DisplayNames")}}</p>
-</div>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Intl.DisplayNames")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/intl/displaynames/displaynames/index.md b/files/fr/web/javascript/reference/global_objects/intl/displaynames/displaynames/index.md
new file mode 100644
index 0000000000..6ce729e68b
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/intl/displaynames/displaynames/index.md
@@ -0,0 +1,83 @@
+---
+title: Intl.DisplayNames() constructor
+slug: Web/JavaScript/Reference/Global_Objects/Intl/DisplayNames/DisplayNames
+tags:
+  - API
+  - Constructeur
+  - JavaScript
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Intl/DisplayNames/DisplayNames
+---
+{{JSRef}}
+
+Le constructeur **`Intl.DisplayNames()`** crée des objets qui permettent de fournir des traductions constantes des noms de langues, régions et systèmes d'écriture.
+
+{{EmbedInteractiveExample("pages/js/intl-displaynames.html")}}
+
+## Syntaxe
+
+    new Intl.DisplayNames([langues[, options]])
+
+### Paramètres
+
+- `langues` {{optional_inline}}
+
+  - : Une chaine avec un code de langue BCP 47, ou un tableau de telles chaines. Pour comprendre la forme générale et l'interprétation de cet argument, voyez {{jsxref("Intl", "Intl page", "#Locale_identification_and_negotiation", 1)}}. Les clés d'extensions Unicode suivantes sont permises :
+
+    - `nu`
+      - : Le système de numération à utiliser. Les valeurs possibles sont : `"arab"`, `"arabext"`, `"bali"`, `"beng"`, `"deva"`, `"fullwide"`, `"gujr"`, `"guru"`, `"hanidec"`, `"khmr"`, `"knda"`, `"laoo"`, `"latn"`, `"limb"`, `"mlym"`, `"mong"`, `"mymr"`, `"orya"`, `"tamldec"`, `"telu"`, `"thai"`, `"tibt"`.
+
+- `options` {{optional_inline}}
+
+  - : Un objet avec certaines des des propriétés suivantes :
+
+    - `localeMatcher`
+      - : L'algorithme de correspondance régional à utiliser. Les valeurs possibles sont `"lookup"` et `"best fit"` ; celle par défaut étant `"best fit"`. Pour plus d'informations à propos de cette option, voir {{jsxref("Global_Objects/Intl", "Intl page", "#Locale_negotiation", 1)}}.
+    - `style`
+
+      - : Le style de mise en forme à utiliser, celui par défaut étant `"long"`.
+
+        - `"narrow"`
+        - `"short"`
+        - `"long"`
+
+    - `type`
+
+      - : Le type à utiliser, celui par défaut étant `"language"`.
+
+        - `"language"`
+        - `"region"`
+        - `"script"`
+        - `"currency"`
+
+    - `fallback`
+
+      - : La valeur par défaut à utiliser, celle par défaut étant `"code"`.
+
+        - `"code"`
+        - `"none"`
+
+## Exemples
+
+### Utilisation simple
+
+Dans son utilisation simple, sans spécifier de langue, une chaine dans la langue locale par défaut et avec les options par défaut sera retournée.
+
+```js
+console.log((new Intl.DisplayNames()).of('US'));
+// Expected output: 'us'
+```
+
+## Spécifications
+
+| Spécification                                                                                                                                    |
+| ------------------------------------------------------------------------------------------------------------------------------------------------ |
+| {{SpecName('Intl.DisplayNames', '#sec-intl-displaynames-constructor', 'the Intl.DisplayNames constructor')}} |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Intl.DisplayNames.DisplayNames")}}
+
+## Voir aussi
+
+- {{jsxref("Intl.DisplayNames")}}
diff --git a/files/fr/web/javascript/reference/global_objects/intl/displaynames/index.html b/files/fr/web/javascript/reference/global_objects/intl/displaynames/index.html
deleted file mode 100644
index 91ea840564..0000000000
--- a/files/fr/web/javascript/reference/global_objects/intl/displaynames/index.html
+++ /dev/null
@@ -1,144 +0,0 @@
----
-title: Intl.DisplayNames
-slug: Web/JavaScript/Reference/Global_Objects/Intl/DisplayNames
-tags:
-  - Class
-  - DisplayNames
-  - Internationalization
-  - Intl
-  - JavaScript
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Intl/DisplayNames
----
-<div>{{JSRef}}</div>
-
-<p>L'objet <strong><code>Intl.DisplayNames</code></strong> est un constructeur d'objets qui permettent de fournir des traductions des noms de langues, régions et systèmes d'écriture.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/intl-displaynames.html")}}</div>
-
-
-
-<h2 id="Constructeur">Constructeur</h2>
-
-<dl>
- <dt><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DisplayNames/DisplayNames"><code>Intl.DisplayNames()</code></a></dt>
- <dd>Crée un nouvel objet <code>Intl.DisplayNames</code>.</dd>
-</dl>
-
-<h2 id="Méthodes_statiques">Méthodes statiques</h2>
-
-<dl>
- <dt><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DisplayNames/supportedLocalesOf"><code>Intl.DisplayNames.supportedLocalesOf()</code></a></dt>
- <dd>Retourne un tableau contenant les langues fournies qui sont supportées sans avoir à se rabattre sur la langue locale par défaut au moment de l'exécution.</dd>
-</dl>
-
-<h2 id="Méthodes_des_instances">Méthodes des instances</h2>
-
-<dl>
- <dt><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DisplayNames/of"><code>Intl.DisplayNames.prototype.of()</code></a></dt>
- <dd>Cette méthodes reçoit un <code>code</code> et retourne une chaine à partir sur la langue et les options fournies lors de l'instanciation de <a href="#"><code>Intl.DisplayNames</code></a>.</dd>
- <dt><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DisplayNames/resolvedOptions"><code>Intl.DisplayNames.prototype.resolvedOptions()</code></a></dt>
- <dd>Retourne un nouvel objet dont les propriété feflètent la langue et les options de formattage calculées lors de l'initialisation de l'objet.</dd>
-</dl>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Affichage_des_noms_de_régions">Affichage des noms de régions</h3>
-
-<p>Pour créer un objet <code>Intl.DisplayNames</code> pour une langue et obtenir le nom correspondant à un code de région dans cette langue.</p>
-
-<pre class="brush: js notranslate">// Obtenir le nom d'une région en anglais
-let nomsRégions = new Intl.DisplayNames(['en'], {type: 'region'});
-nomsRégions.of('419'); // "Latin America"
-nomsRégions.of('BZ');  // "Belize"
-nomsRégions.of('US');  // "United States"
-nomsRégions.of('BA');  // "Bosnia &amp; Herzegovina"
-nomsRégions.of('MM');  // "Myanmar (Burma)"
-
-// Obtenir le nom d'une région en chinois traditionnel
-nomsRégions = new Intl.DisplayNames(['zh-Hant'], {type: 'region'});
-nomsRégions.of('419'; // "拉丁美洲"
-nomsRégions.of('BZ'); // "貝里斯"
-nomsRégions.of('US'); // "美國"
-nomsRégions.of('BA'); // "波士尼亞與赫塞哥維納"
-nomsRégions.of('MM'); // "緬甸"</pre>
-
-<h3 id="Affichage_des_noms_de_langues">Affichage des noms de langues</h3>
-
-<p>Pour créer un objet <code>Intl.DisplayNames</code> pour une langue et obtenir le nom correspondant à un code de langue (possiblement suivi d'un code de système d'écriture ou de région) dans cette langue.</p>
-
-<pre class="brush: js notranslate">// Obtenir le nom d'une langue en anglais
-let nomsLangues= new Intl.DisplayNames(['en'], {type: 'language'});
-nomsLangues.of('fr');      // "French"
-nomsLangues.of('de');      // "German"
-nomsLangues.of('fr-CA');   // "Canadian French"
-nomsLangues.of('zh-Hant'); // "Traditional Chinese"
-nomsLangues.of('en-US');   // "American English"
-nomsLangues.of('zh-TW');   // "Chinese (Taiwan)"
-
-// Obtenir le nom d'une langue en chinois traditionnel
-nomsLangues = new Intl.DisplayNames(['zh-Hant'], {type: 'language'});
-nomsLangues.of('fr'); // "法文"
-nomsLangues.of('zh'); // "中文"
-nomsLangues.of('de'); // "德文"</pre>
-
-<h3 id="Affichage_des_noms_de_systèmes_décriture">Affichage des noms de systèmes d'écriture</h3>
-
-<p>To create an <code>Intl.DisplayNames</code> for a locale and get the display name for a script code.</p>
-
-<p>Pour créer un objet <code>Intl.DisplayNames</code> pour une langue et obtenir le nom correspondant à un code de système d'écriture dans cette langue.</p>
-
-<pre class="brush: js notranslate">// Obtenir le nom d'un système d'écriture en anglais
-let nomsSystèmes = new Intl.DisplayNames(['en'], {type: 'script'});
-nomsSystèmes.of('Latn'); // "Latin"
-nomsSystèmes.of('Arab'); // "Arabic"
-nomsSystèmes.of('Kana'); // "Katakana"
-
-// Obtenir le nom d'un système d'écriture en chinois traditionnel
-nomsSystèmes = new Intl.DisplayNames(['zh-Hant'], {type: 'script'});
-nomsSystèmes.of('Latn'); // "拉丁文"
-nomsSystèmes.of('Arab'); // "阿拉伯文"
-nomsSystèmes.of('Kana'); // "片假名"</pre>
-
-<h3 id="Affichage_des_noms_de_devises">Affichage des noms de devises</h3>
-
-<p>Pour créer un objet <code>Intl.DisplayNames</code> pour une langue et obtenir le nom correspondant au code d'une devise.</p>
-
-<pre class="brush: js notranslate">// Obtenir le nom d'une devise in English
-let nomsDevises = new Intl.DisplayNames(['en'], {type: 'currency'});
-nomsDevises.of('USD'); // "US Dollar"
-nomsDevises.of('EUR'); // "Euro"
-nomsDevises.of('TWD'); // "New Taiwan Dollar"
-nomsDevises.of('CNY'); // "Chinese Yuan"
-
-// Obtenir le nom d'une devise in Traditional Chinese
-nomsDevises = new Intl.DisplayNames(['zh-Hant'], {type: 'currency'});
-nomsDevises.of('USD'); // "美元"
-nomsDevises.of('EUR'); // "歐元"
-nomsDevises.of('TWD'); // "新台幣"
-nomsDevises.of('CNY'); // "人民幣"</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('Intl.DisplayNames', '#intl-displaynames-objects', 'DisplayNames')}}</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Intl.DisplayNames")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Intl")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/intl/displaynames/index.md b/files/fr/web/javascript/reference/global_objects/intl/displaynames/index.md
new file mode 100644
index 0000000000..2b0a70c94b
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/intl/displaynames/index.md
@@ -0,0 +1,133 @@
+---
+title: Intl.DisplayNames
+slug: Web/JavaScript/Reference/Global_Objects/Intl/DisplayNames
+tags:
+  - Class
+  - DisplayNames
+  - Internationalization
+  - Intl
+  - JavaScript
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Intl/DisplayNames
+---
+{{JSRef}}
+
+L'objet **`Intl.DisplayNames`** est un constructeur d'objets qui permettent de fournir des traductions des noms de langues, régions et systèmes d'écriture.
+
+{{EmbedInteractiveExample("pages/js/intl-displaynames.html")}}
+
+## Constructeur
+
+- [`Intl.DisplayNames()`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DisplayNames/DisplayNames)
+  - : Crée un nouvel objet `Intl.DisplayNames`.
+
+## Méthodes statiques
+
+- [`Intl.DisplayNames.supportedLocalesOf()`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DisplayNames/supportedLocalesOf)
+  - : Retourne un tableau contenant les langues fournies qui sont supportées sans avoir à se rabattre sur la langue locale par défaut au moment de l'exécution.
+
+## Méthodes des instances
+
+- [`Intl.DisplayNames.prototype.of()`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DisplayNames/of)
+  - : Cette méthodes reçoit un `code` et retourne une chaine à partir sur la langue et les options fournies lors de l'instanciation de [`Intl.DisplayNames`](#).
+- [`Intl.DisplayNames.prototype.resolvedOptions()`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DisplayNames/resolvedOptions)
+  - : Retourne un nouvel objet dont les propriété feflètent la langue et les options de formattage calculées lors de l'initialisation de l'objet.
+
+## Exemples
+
+### Affichage des noms de régions
+
+Pour créer un objet `Intl.DisplayNames` pour une langue et obtenir le nom correspondant à un code de région dans cette langue.
+
+```js
+// Obtenir le nom d'une région en anglais
+let nomsRégions = new Intl.DisplayNames(['en'], {type: 'region'});
+nomsRégions.of('419'); // "Latin America"
+nomsRégions.of('BZ');  // "Belize"
+nomsRégions.of('US');  // "United States"
+nomsRégions.of('BA');  // "Bosnia & Herzegovina"
+nomsRégions.of('MM');  // "Myanmar (Burma)"
+
+// Obtenir le nom d'une région en chinois traditionnel
+nomsRégions = new Intl.DisplayNames(['zh-Hant'], {type: 'region'});
+nomsRégions.of('419'; // "拉丁美洲"
+nomsRégions.of('BZ'); // "貝里斯"
+nomsRégions.of('US'); // "美國"
+nomsRégions.of('BA'); // "波士尼亞與赫塞哥維納"
+nomsRégions.of('MM'); // "緬甸"
+```
+
+### Affichage des noms de langues
+
+Pour créer un objet `Intl.DisplayNames` pour une langue et obtenir le nom correspondant à un code de langue (possiblement suivi d'un code de système d'écriture ou de région) dans cette langue.
+
+```js
+// Obtenir le nom d'une langue en anglais
+let nomsLangues= new Intl.DisplayNames(['en'], {type: 'language'});
+nomsLangues.of('fr');      // "French"
+nomsLangues.of('de');      // "German"
+nomsLangues.of('fr-CA');   // "Canadian French"
+nomsLangues.of('zh-Hant'); // "Traditional Chinese"
+nomsLangues.of('en-US');   // "American English"
+nomsLangues.of('zh-TW');   // "Chinese (Taiwan)"
+
+// Obtenir le nom d'une langue en chinois traditionnel
+nomsLangues = new Intl.DisplayNames(['zh-Hant'], {type: 'language'});
+nomsLangues.of('fr'); // "法文"
+nomsLangues.of('zh'); // "中文"
+nomsLangues.of('de'); // "德文"
+```
+
+### Affichage des noms de systèmes d'écriture
+
+To create an `Intl.DisplayNames` for a locale and get the display name for a script code.
+
+Pour créer un objet `Intl.DisplayNames` pour une langue et obtenir le nom correspondant à un code de système d'écriture dans cette langue.
+
+```js
+// Obtenir le nom d'un système d'écriture en anglais
+let nomsSystèmes = new Intl.DisplayNames(['en'], {type: 'script'});
+nomsSystèmes.of('Latn'); // "Latin"
+nomsSystèmes.of('Arab'); // "Arabic"
+nomsSystèmes.of('Kana'); // "Katakana"
+
+// Obtenir le nom d'un système d'écriture en chinois traditionnel
+nomsSystèmes = new Intl.DisplayNames(['zh-Hant'], {type: 'script'});
+nomsSystèmes.of('Latn'); // "拉丁文"
+nomsSystèmes.of('Arab'); // "阿拉伯文"
+nomsSystèmes.of('Kana'); // "片假名"
+```
+
+### Affichage des noms de devises
+
+Pour créer un objet `Intl.DisplayNames` pour une langue et obtenir le nom correspondant au code d'une devise.
+
+```js
+// Obtenir le nom d'une devise in English
+let nomsDevises = new Intl.DisplayNames(['en'], {type: 'currency'});
+nomsDevises.of('USD'); // "US Dollar"
+nomsDevises.of('EUR'); // "Euro"
+nomsDevises.of('TWD'); // "New Taiwan Dollar"
+nomsDevises.of('CNY'); // "Chinese Yuan"
+
+// Obtenir le nom d'une devise in Traditional Chinese
+nomsDevises = new Intl.DisplayNames(['zh-Hant'], {type: 'currency'});
+nomsDevises.of('USD'); // "美元"
+nomsDevises.of('EUR'); // "歐元"
+nomsDevises.of('TWD'); // "新台幣"
+nomsDevises.of('CNY'); // "人民幣"
+```
+
+## Spécifications
+
+| Spécification                                                                                            |
+| -------------------------------------------------------------------------------------------------------- |
+| {{SpecName('Intl.DisplayNames', '#intl-displaynames-objects', 'DisplayNames')}} |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Intl.DisplayNames")}}
+
+## Voir aussi
+
+- {{jsxref("Intl")}}
diff --git a/files/fr/web/javascript/reference/global_objects/intl/getcanonicallocales/index.html b/files/fr/web/javascript/reference/global_objects/intl/getcanonicallocales/index.html
deleted file mode 100644
index a239a169c1..0000000000
--- a/files/fr/web/javascript/reference/global_objects/intl/getcanonicallocales/index.html
+++ /dev/null
@@ -1,70 +0,0 @@
----
-title: Intl.getCanonicalLocales()
-slug: Web/JavaScript/Reference/Global_Objects/Intl/getCanonicalLocales
-tags:
-  - Internationalisation
-  - Intl
-  - JavaScript
-  - Méthode
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Intl/getCanonicalLocales
-original_slug: Web/JavaScript/Reference/Objets_globaux/Intl/getCanonicalLocales
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <strong><code>Intl.getCanonicalLocales()</code></strong> renvoie un tableau contenant les noms canoniques des locales. Les doublons seront fusionnés et les éléments passés en arguments doivent être des étiquettes de langues valides.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/intl-getcanonicallocales.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">Intl.getCanonicalLocales(locales)</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>locales</code></dt>
- <dd>Une liste de chaînes ({{jsxref("String")}}) dont on veut obtenir les noms canoniques pour les locales correspondantes.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Un tableau qui contient les noms canoniques des locales.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<pre class="brush: js">Intl.getCanonicalLocales("EN-US"); // ["en-US"]
-Intl.getCanonicalLocales(["EN-US", "Fr"]); // ["en-US", "fr"]
-
-Intl.getCanonicalLocales("EN_US");
-// RangeError:'EN_US' is not a structurally valid language tag
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES Int Draft', '#sec-intl.getcanonicallocales', 'Intl.getCanonicalLocales')}}</td>
-   <td>{{Spec2('ES Int Draft')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Intl.getCanonicalLocales")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("NumberFormat.supportedLocalesOf", "Intl.NumberFormat.supportedLocalesOf()")}}</li>
- <li>{{jsxref("DateTimeFormat.supportedLocalesOf", "Intl.DateTimeFormat.supportedLocalesOf()")}}</li>
- <li>{{jsxref("Collator.supportedLocalesOf", "Intl.Collator.supportedLocalesOf()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/intl/getcanonicallocales/index.md b/files/fr/web/javascript/reference/global_objects/intl/getcanonicallocales/index.md
new file mode 100644
index 0000000000..2970706d63
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/intl/getcanonicallocales/index.md
@@ -0,0 +1,56 @@
+---
+title: Intl.getCanonicalLocales()
+slug: Web/JavaScript/Reference/Global_Objects/Intl/getCanonicalLocales
+tags:
+  - Internationalisation
+  - Intl
+  - JavaScript
+  - Méthode
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Intl/getCanonicalLocales
+original_slug: Web/JavaScript/Reference/Objets_globaux/Intl/getCanonicalLocales
+---
+{{JSRef}}
+
+La méthode **`Intl.getCanonicalLocales()`** renvoie un tableau contenant les noms canoniques des locales. Les doublons seront fusionnés et les éléments passés en arguments doivent être des étiquettes de langues valides.
+
+{{EmbedInteractiveExample("pages/js/intl-getcanonicallocales.html")}}
+
+## Syntaxe
+
+    Intl.getCanonicalLocales(locales)
+
+### Paramètres
+
+- `locales`
+  - : Une liste de chaînes ({{jsxref("String")}}) dont on veut obtenir les noms canoniques pour les locales correspondantes.
+
+### Valeur de retour
+
+Un tableau qui contient les noms canoniques des locales.
+
+## Exemples
+
+```js
+Intl.getCanonicalLocales("EN-US"); // ["en-US"]
+Intl.getCanonicalLocales(["EN-US", "Fr"]); // ["en-US", "fr"]
+
+Intl.getCanonicalLocales("EN_US");
+// RangeError:'EN_US' is not a structurally valid language tag
+```
+
+## Spécifications
+
+| Spécification                                                                                                            | État                             | Commentaires         |
+| ------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | -------------------- |
+| {{SpecName('ES Int Draft', '#sec-intl.getcanonicallocales', 'Intl.getCanonicalLocales')}} | {{Spec2('ES Int Draft')}} | Définition initiale. |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Intl.getCanonicalLocales")}}
+
+## Voir aussi
+
+- {{jsxref("NumberFormat.supportedLocalesOf", "Intl.NumberFormat.supportedLocalesOf()")}}
+- {{jsxref("DateTimeFormat.supportedLocalesOf", "Intl.DateTimeFormat.supportedLocalesOf()")}}
+- {{jsxref("Collator.supportedLocalesOf", "Intl.Collator.supportedLocalesOf()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/intl/index.html b/files/fr/web/javascript/reference/global_objects/intl/index.html
deleted file mode 100644
index 7f1ccb56fd..0000000000
--- a/files/fr/web/javascript/reference/global_objects/intl/index.html
+++ /dev/null
@@ -1,162 +0,0 @@
----
-title: Intl
-slug: Web/JavaScript/Reference/Global_Objects/Intl
-tags:
-  - Espace de noms
-  - Internationalisation
-  - Intl
-  - JavaScript
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Intl
-original_slug: Web/JavaScript/Reference/Objets_globaux/Intl
----
-<div>{{JSRef}}</div>
-
-<p>L'objet <strong><code>Intl</code></strong> est l'espace de noms pour l'API d'Internationalisation d'ECMAScript. Elle fournit des outils de comparaison de chaînes de caractères, de formatage des nombres, de dates et de l'heure selon les langues. <code>Intl</code> donne accès à plusieurs constructeurs et fonctionnalités communs aux constructeurs destinés à l'internationalion et à d'autres fonctions dépendantes des langues.</p>
-
-<h2 id="Propriétés_constructrices">Propriétés constructrices</h2>
-
-<dl>
- <dt>{{jsxref("Objets_globaux/Collator", "Intl.Collator")}}</dt>
- <dd>Le constructeur pour les ordonnanceurs (<em>collators</em> en anglais) et les objets qui permettent la comparaison de chaînes de caractères selon les règles spécifiques d'une langue.</dd>
- <dt>{{jsxref("Objets_globaux/DateTimeFormat", "Intl.DateTimeFormat")}}</dt>
- <dd>Le constructeur pour les objets qui permettent le formatage des dates et de l'heure selon les règles spécifiques d'une langue.</dd>
- <dt>{{jsxref("Global_Objects/Intl/DisplayNames/DisplayNames", "Intl.DisplayNames()")}}</dt>
- <dd>Le constructeur pour les objets qui permettent de fournir des traductions constantes de noms de langues, régions et systèmes d'écriture.</dd>
- <dt>{{jsxref("Objets_globaux/ListFormat", "Intl.ListFormat")}}</dt>
- <dd>Le constructeur pour les objets qui permettent le formatage des listes selon les règles spécifiques d'une langue.</dd>
- <dt>{{jsxref("Global_Objects/Intl/Locale/Locale", "Intl.Locale()")}}</dt>
- <dd>Le constructeur pour les objets qui représentent un identifiant de langue Unicode.</dd>
- <dt>{{jsxref("Objets_globaux/NumberFormat", "Intl.NumberFormat")}}</dt>
- <dd>Le constructeur pour les objets qui permettent le formatage des nombres selon les règles spécifiques d'une langue.</dd>
- <dt>{{jsxref("Objets_globaux/PluralRules","Intl.PluralRules")}}</dt>
- <dd>Le constructeur pour les objets qui permettent le formatage prenant en compte le pluriel et les règles de pluriel spécifiques d'une langue.</dd>
- <dt>{{jsxref("Objets_globaux/RelativeTimeFormat","Intl.RelativeTimeFormat")}}</dt>
- <dd>Le constructeur pour les objets qui permettent le formatage d'intervalles de temps spécifiques d'une langue.</dd>
-</dl>
-
-<h2 id="Méthodes_statiques">Méthodes statiques</h2>
-
-<dl>
- <dt>{{jsxref("Intl.getCanonicalLocales()")}}</dt>
- <dd>Méthode renvoyant les noms canoniques des locales.</dd>
-</dl>
-
-<h2 id="Identification_et_choix_de_la_locale">Identification et choix de la locale</h2>
-
-<p>Les constructeurs d'internationalisation, ainsi que plusieurs autres méthodes spécifiques à une langue dans d'autres constructeurs (voir ci-dessous {{anch("See_also", "Voir aussi")}}), utilisent un schéma commun pour identifier les locales et déterminer celle qu'ils utiliseront effectivement : ils acceptent tous les arguments <code>locales</code> et <code>options</code>, et ils négocient les locales demandées face aux locales qu'ils supportent, en utilisant un algorithme spécifié dans la propriété <code>options.localeMatcher</code>.</p>
-
-<h3 id="Argument_locales">Argument <code>locales</code></h3>
-
-<p>L'argument <code>locales</code> peut être soit une chaîne de caractères comportant une <a href="http://tools.ietf.org/html/rfc5646">balise de langue BCP 47</a>, soit un tableau de telles balises. Si l'argument n'est pas fourni ou est indéfini, la locale par défaut de l'environnement d'exécution est utilisée.</p>
-
-<p>Une balise de langue BCP 47 définit un langage et contient au minimum un code de langue principale. Dans sa forme la plus fréquente, elle peut contenir, dans l'ordre : un code de langue, un code de script et un code de pays ou de région, tous séparés par des tirets. Bien que la balise ne soit sensible à la casse, il est recommandé d'utiliser des initiales majuscules pour le code de script, des majuscules pour les codes de pays et de région, et des minuscules pour tout le reste.</p>
-
-<p>Exemples :</p>
-
-<ul>
- <li><code>"hi"</code> : Hindi (langue principale).</li>
- <li><code>"de-AT"</code> : Allemand tel qu'utilisé en Autriche (langue principale avec un code pays).</li>
- <li><code>"zh-Hans-CN"</code> : Le chinois écrit en caractères simplifiés tel qu'utilisé en Chine (langue principale avec des codes de script et de pays).</li>
-</ul>
-
-<p>Les sous balises identifiant les langues, les scripts, les pays (régions) et les variantes (rarement utilisées) dans les balises de langue BCP 47 peuvent être trouvées dans le <a href="http://www.iana.org/assignments/language-subtag-registry">registre IANA des Sous balises de Langues</a></p>
-
-<p>La BCP 47 permet également des extensions. Les fonctions d'internalisation de JavaScript utilisent l'extension "u" (Unicode), qui peut utilisée pour demander une personnalisation supplémentaire des objets {{jsxref("Collator")}}, {{jsxref("NumberFormat")}}, ou {{jsxref("DateTimeFormat")}}. Exemples :</p>
-
-<ul>
- <li><code>"de-DE-u-co-phonebk"</code> : utiliser la variante annuaire de l'ordre de tri allemand, qui décompose les voyelles infléchies (à umlaut) en paires de caractères : ä → ae, ö → oe, ü → ue.</li>
- <li><code>"th-TH-u-nu-thai"</code> : utiliser les chiffres thaïs (๐, ๑, ๒, ๓, ๔, ๕, ๖, ๗, ๘, ๙) dans le formatage des nombres.</li>
- <li><code>"ja-JP-u-ca-japanese"</code> : utiliser le calendrier japonais dans le formatage des dates et des heures, de sorte que 2013 soit exprimé comme l'an 25 de l'ère Heisei, ou 平成25.</li>
- <li><code>"en-GB-u-ca-islamic"</code> : utiliser l'anglais britannique avec le calendrier islamique (Hijri), où la date grégorienne 14 octobre 2017 est la date de l'ère de l'Hégire 24 Muharram,1439.</li>
-</ul>
-
-<h3 id="Négociation_de_la_locale">Négociation de la locale</h3>
-
-<p>L'argument <code>locales</code>, après retrait de toutes les extensions Unicode, est interprété comme une requête classée par priorité émanant de l'application. L'environnement d'exécution le compare aux locales dont il dispose et choisit la meilleure disponible. Il existe deux algorithmes d'association : l'apparieur "lookup" suit l'algorithme Lookup spécifié dans <a href="http://tools.ietf.org/html/rfc4647#section-3.4">BCP 47</a>; l'apparieur "meilleure correspondance" laisse l'environnement d'exécution fournir une locale qui est au moins aussi, mais possiblement mieux, adaptée à la demande que le résultat de l'algorithme Lookup. Si l'application ne fournit pas d'argument <code>locales</code> ou que l'environnement d'exécution ne dispose pas d'une locale qui corresponde à la requête, alors la locale par défaut de l'environnement d'exécution est utilisée. L'apparieur peut être choisi en utilisant une propriété de l'argument <code>options</code> (voir ci-dessous).</p>
-
-<p>Si la balise de la langue choisie comporte une sous chaîne d'extension Unicode, cette extension est maintenant utilisée pour personnaliser l'objet construit ou le comportement de la fonction. Chaque constructeur ou fonction ne supporte qu'un sous-ensemble des clés définies pour le extension Unicode, et les valeurs supportées dépendent souvent de la balise de langue. Par exemple, la clé "co" (collation) n'est supportée que par le constructeur {{jsxref("Collator")}}, et sa valeur "phonebk" n'est supportée que pour l'allemand.</p>
-
-<h3 id="Argument_options">Argument <code>options</code></h3>
-
-<p>L'argument <code>options</code> doit être un objet ayant des propriétés qui varient suivant qu'il s'agit des constructeurs ou des fonctions. Si l'argument <code>options</code> n'est pas fourni ou est indéfini, des valeurs par défaut seront utilisées pour toutes les propriétés.</p>
-
-<p>Une propriété est supportée par tous les constructeurs et toutes les fonctions fondés sur les locales : la propriété <code>localeMatcher</code>, dont la valeur doit être la chaîne <code>"lookup"</code> ou <code>"best fit"</code>, et qui sélectionne l'un des algorithmes d'appariement décrits ci-dessus.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Formater_des_dates_et_nombres">Formater des dates et nombres</h3>
-
-<p>Vous pouvez utiliser Intl pour formater des dates et nombres dans un format qui est conventionnel pour une langue et une région spécifiques :</p>
-
-<pre class="brush: js notranslate">const compte = 26254.39;
-const date = new Date("2012-05-24");
-
-function afficher (langue) {
-  console.log(
-    `${new Intl.DateTimeFormat(langue).format(date)} ${new Intl.NumberFormat(langue).format(compte)}`
-  );
-}
-
-afficher("en-US");
-// résultat attendu : 5/24/2012 26,254.39
-
-afficher("de-DE");
-// résultat attendu : 24.5.2012 26.254,39</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES Int 1.0', '#sec-8', 'Intl')}}</td>
-   <td>{{Spec2('ES Int 1.0')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES Int 2.0', '#sec-8', 'Intl')}}</td>
-   <td>{{Spec2('ES Int 2.0')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES Int Draft', '#intl-object', 'Intl')}}</td>
-   <td>{{Spec2('ES Int Draft')}}</td>
-   <td>Ajout de <code>Intl.getCanonicalLocales</code> dans la 4e édition.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Intl")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>Introduction : <a href="http://norbertlindenberg.com/2012/12/ecmascript-internationalization-api/index.html">'The ECMAScript Internationalisation API</a></li>
- <li>Constructeurs
-  <ul>
-   <li>{{jsxref("Collator", "Intl.Collator")}}</li>
-   <li>{{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}}</li>
-   <li>{{jsxref("ListFormat", "Intl.ListFormat")}}</li>
-   <li>{{jsxref("NumberFormat", "Intl.NumberFormat")}}</li>
-   <li>{{jsxref("PluralRules", "Intl.PluralRules")}}</li>
-   <li>{{jsxref("RelativeTimeFormat", "Intl.RelativeTimeFormat")}}</li>
-   <li>{{jsxref("Locale", "Intl.Locale")}}</li>
-  </ul>
- </li>
- <li>Méthodes
-  <ul>
-   <li>{{jsxref("String.prototype.localeCompare()")}}</li>
-   <li>{{jsxref("Number.prototype.toLocaleString()")}}</li>
-   <li>{{jsxref("Date.prototype.toLocaleString()")}}</li>
-   <li>{{jsxref("Date.prototype.toLocaleDateString()")}}</li>
-   <li>{{jsxref("Date.prototype.toLocaleTimeString()")}}</li>
-  </ul>
- </li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/intl/index.md b/files/fr/web/javascript/reference/global_objects/intl/index.md
new file mode 100644
index 0000000000..71920ac7ae
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/intl/index.md
@@ -0,0 +1,132 @@
+---
+title: Intl
+slug: Web/JavaScript/Reference/Global_Objects/Intl
+tags:
+  - Espace de noms
+  - Internationalisation
+  - Intl
+  - JavaScript
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Intl
+original_slug: Web/JavaScript/Reference/Objets_globaux/Intl
+---
+{{JSRef}}
+
+L'objet **`Intl`** est l'espace de noms pour l'API d'Internationalisation d'ECMAScript. Elle fournit des outils de comparaison de chaînes de caractères, de formatage des nombres, de dates et de l'heure selon les langues. `Intl` donne accès à plusieurs constructeurs et fonctionnalités communs aux constructeurs destinés à l'internationalion et à d'autres fonctions dépendantes des langues.
+
+## Propriétés constructrices
+
+- {{jsxref("Objets_globaux/Collator", "Intl.Collator")}}
+  - : Le constructeur pour les ordonnanceurs (_collators_ en anglais) et les objets qui permettent la comparaison de chaînes de caractères selon les règles spécifiques d'une langue.
+- {{jsxref("Objets_globaux/DateTimeFormat", "Intl.DateTimeFormat")}}
+  - : Le constructeur pour les objets qui permettent le formatage des dates et de l'heure selon les règles spécifiques d'une langue.
+- {{jsxref("Global_Objects/Intl/DisplayNames/DisplayNames", "Intl.DisplayNames()")}}
+  - : Le constructeur pour les objets qui permettent de fournir des traductions constantes de noms de langues, régions et systèmes d'écriture.
+- {{jsxref("Objets_globaux/ListFormat", "Intl.ListFormat")}}
+  - : Le constructeur pour les objets qui permettent le formatage des listes selon les règles spécifiques d'une langue.
+- {{jsxref("Global_Objects/Intl/Locale/Locale", "Intl.Locale()")}}
+  - : Le constructeur pour les objets qui représentent un identifiant de langue Unicode.
+- {{jsxref("Objets_globaux/NumberFormat", "Intl.NumberFormat")}}
+  - : Le constructeur pour les objets qui permettent le formatage des nombres selon les règles spécifiques d'une langue.
+- {{jsxref("Objets_globaux/PluralRules","Intl.PluralRules")}}
+  - : Le constructeur pour les objets qui permettent le formatage prenant en compte le pluriel et les règles de pluriel spécifiques d'une langue.
+- {{jsxref("Objets_globaux/RelativeTimeFormat","Intl.RelativeTimeFormat")}}
+  - : Le constructeur pour les objets qui permettent le formatage d'intervalles de temps spécifiques d'une langue.
+
+## Méthodes statiques
+
+- {{jsxref("Intl.getCanonicalLocales()")}}
+  - : Méthode renvoyant les noms canoniques des locales.
+
+## Identification et choix de la locale
+
+Les constructeurs d'internationalisation, ainsi que plusieurs autres méthodes spécifiques à une langue dans d'autres constructeurs (voir ci-dessous {{anch("See_also", "Voir aussi")}}), utilisent un schéma commun pour identifier les locales et déterminer celle qu'ils utiliseront effectivement : ils acceptent tous les arguments `locales` et `options`, et ils négocient les locales demandées face aux locales qu'ils supportent, en utilisant un algorithme spécifié dans la propriété `options.localeMatcher`.
+
+### Argument `locales`
+
+L'argument `locales` peut être soit une chaîne de caractères comportant une [balise de langue BCP 47](http://tools.ietf.org/html/rfc5646), soit un tableau de telles balises. Si l'argument n'est pas fourni ou est indéfini, la locale par défaut de l'environnement d'exécution est utilisée.
+
+Une balise de langue BCP 47 définit un langage et contient au minimum un code de langue principale. Dans sa forme la plus fréquente, elle peut contenir, dans l'ordre : un code de langue, un code de script et un code de pays ou de région, tous séparés par des tirets. Bien que la balise ne soit sensible à la casse, il est recommandé d'utiliser des initiales majuscules pour le code de script, des majuscules pour les codes de pays et de région, et des minuscules pour tout le reste.
+
+Exemples :
+
+- `"hi"` : Hindi (langue principale).
+- `"de-AT"` : Allemand tel qu'utilisé en Autriche (langue principale avec un code pays).
+- `"zh-Hans-CN"` : Le chinois écrit en caractères simplifiés tel qu'utilisé en Chine (langue principale avec des codes de script et de pays).
+
+Les sous balises identifiant les langues, les scripts, les pays (régions) et les variantes (rarement utilisées) dans les balises de langue BCP 47 peuvent être trouvées dans le [registre IANA des Sous balises de Langues](http://www.iana.org/assignments/language-subtag-registry)
+
+La BCP 47 permet également des extensions. Les fonctions d'internalisation de JavaScript utilisent l'extension "u" (Unicode), qui peut utilisée pour demander une personnalisation supplémentaire des objets {{jsxref("Collator")}}, {{jsxref("NumberFormat")}}, ou {{jsxref("DateTimeFormat")}}. Exemples :
+
+- `"de-DE-u-co-phonebk"` : utiliser la variante annuaire de l'ordre de tri allemand, qui décompose les voyelles infléchies (à umlaut) en paires de caractères : ä → ae, ö → oe, ü → ue.
+- `"th-TH-u-nu-thai"` : utiliser les chiffres thaïs (๐, ๑, ๒, ๓, ๔, ๕, ๖, ๗, ๘, ๙) dans le formatage des nombres.
+- `"ja-JP-u-ca-japanese"` : utiliser le calendrier japonais dans le formatage des dates et des heures, de sorte que 2013 soit exprimé comme l'an 25 de l'ère Heisei, ou 平成 25.
+- `"en-GB-u-ca-islamic"` : utiliser l'anglais britannique avec le calendrier islamique (Hijri), où la date grégorienne 14 octobre 2017 est la date de l'ère de l'Hégire 24 Muharram,1439.
+
+### Négociation de la locale
+
+L'argument `locales`, après retrait de toutes les extensions Unicode, est interprété comme une requête classée par priorité émanant de l'application. L'environnement d'exécution le compare aux locales dont il dispose et choisit la meilleure disponible. Il existe deux algorithmes d'association : l'apparieur "lookup" suit l'algorithme Lookup spécifié dans [BCP 47](http://tools.ietf.org/html/rfc4647#section-3.4); l'apparieur "meilleure correspondance" laisse l'environnement d'exécution fournir une locale qui est au moins aussi, mais possiblement mieux, adaptée à la demande que le résultat de l'algorithme Lookup. Si l'application ne fournit pas d'argument `locales` ou que l'environnement d'exécution ne dispose pas d'une locale qui corresponde à la requête, alors la locale par défaut de l'environnement d'exécution est utilisée. L'apparieur peut être choisi en utilisant une propriété de l'argument `options` (voir ci-dessous).
+
+Si la balise de la langue choisie comporte une sous chaîne d'extension Unicode, cette extension est maintenant utilisée pour personnaliser l'objet construit ou le comportement de la fonction. Chaque constructeur ou fonction ne supporte qu'un sous-ensemble des clés définies pour le extension Unicode, et les valeurs supportées dépendent souvent de la balise de langue. Par exemple, la clé "co" (collation) n'est supportée que par le constructeur {{jsxref("Collator")}}, et sa valeur "phonebk" n'est supportée que pour l'allemand.
+
+### Argument `options`
+
+L'argument `options` doit être un objet ayant des propriétés qui varient suivant qu'il s'agit des constructeurs ou des fonctions. Si l'argument `options` n'est pas fourni ou est indéfini, des valeurs par défaut seront utilisées pour toutes les propriétés.
+
+Une propriété est supportée par tous les constructeurs et toutes les fonctions fondés sur les locales : la propriété `localeMatcher`, dont la valeur doit être la chaîne `"lookup"` ou `"best fit"`, et qui sélectionne l'un des algorithmes d'appariement décrits ci-dessus.
+
+## Exemples
+
+### Formater des dates et nombres
+
+Vous pouvez utiliser Intl pour formater des dates et nombres dans un format qui est conventionnel pour une langue et une région spécifiques :
+
+```js
+const compte = 26254.39;
+const date = new Date("2012-05-24");
+
+function afficher (langue) {
+  console.log(
+    `${new Intl.DateTimeFormat(langue).format(date)} ${new Intl.NumberFormat(langue).format(compte)}`
+  );
+}
+
+afficher("en-US");
+// résultat attendu : 5/24/2012 26,254.39
+
+afficher("de-DE");
+// résultat attendu : 24.5.2012 26.254,39
+```
+
+## Spécifications
+
+| Spécification                                                        | État                             | Commentaires                                            |
+| -------------------------------------------------------------------- | -------------------------------- | ------------------------------------------------------- |
+| {{SpecName('ES Int 1.0', '#sec-8', 'Intl')}}         | {{Spec2('ES Int 1.0')}} | Définition initiale.                                    |
+| {{SpecName('ES Int 2.0', '#sec-8', 'Intl')}}         | {{Spec2('ES Int 2.0')}} |                                                         |
+| {{SpecName('ES Int Draft', '#intl-object', 'Intl')}} | {{Spec2('ES Int Draft')}} | Ajout de `Intl.getCanonicalLocales` dans la 4e édition. |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Intl")}}
+
+## Voir aussi
+
+- Introduction : ['The ECMAScript Internationalisation API](http://norbertlindenberg.com/2012/12/ecmascript-internationalization-api/index.html)
+- Constructeurs
+
+  - {{jsxref("Collator", "Intl.Collator")}}
+  - {{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}}
+  - {{jsxref("ListFormat", "Intl.ListFormat")}}
+  - {{jsxref("NumberFormat", "Intl.NumberFormat")}}
+  - {{jsxref("PluralRules", "Intl.PluralRules")}}
+  - {{jsxref("RelativeTimeFormat", "Intl.RelativeTimeFormat")}}
+  - {{jsxref("Locale", "Intl.Locale")}}
+
+- Méthodes
+
+  - {{jsxref("String.prototype.localeCompare()")}}
+  - {{jsxref("Number.prototype.toLocaleString()")}}
+  - {{jsxref("Date.prototype.toLocaleString()")}}
+  - {{jsxref("Date.prototype.toLocaleDateString()")}}
+  - {{jsxref("Date.prototype.toLocaleTimeString()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/intl/listformat/format/index.html b/files/fr/web/javascript/reference/global_objects/intl/listformat/format/index.html
deleted file mode 100644
index ab43e1466e..0000000000
--- a/files/fr/web/javascript/reference/global_objects/intl/listformat/format/index.html
+++ /dev/null
@@ -1,67 +0,0 @@
----
-title: Intl​.ListFormat.prototype​.format()
-slug: Web/JavaScript/Reference/Global_Objects/Intl/ListFormat/format
-tags:
-  - Internationalisation
-  - Intl
-  - JavaScript
-  - ListFormat
-  - Méthode
-  - Prototype
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Intl/ListFormat/format
-original_slug: Web/JavaScript/Reference/Objets_globaux/Intl/ListFormat/format
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <strong><code>format()</code></strong> renvoie une chaîne de caractères représentant la liste passée en argument, mise en forme selon la langue choisie (lors de la construction de l'objet <code>Intl.ListFormat</code>).</p>
-
-<div>{{EmbedInteractiveExample("pages/js/intl-listformat.html")}}</div>
-
-<h2 id="Description">Description</h2>
-
-<p>La méthode <strong><code>format()</code></strong> renvoie une chaîne de caractères qui a été formatée en fonction des paramètres fournis à l'objet <code>Intl.ListFormat</code>. Les paramètres <code>locales</code> et <code>options</code> permettent de personnaliser le comportement de <code>format()</code> et de gérer différentes conventions linguistiques au sein d'une application, notamment pour la mise en forme des listes.</p>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><em>listFormat</em>.format([<em>list</em>]);</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><strong><code>list</code></strong></dt>
- <dd>Un objet itérable (ex. un tableau / {{jsxref("Array")}}).</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Une chaîne de caractères représentant les éléments de la liste et mise en forme en fonction de la langue souhaitée (grâce au paramètre <code>locales</code> passé au constructeur <code>Intl.ListFormat</code>).</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><a href="https://tc39.github.io/proposal-intl-list-format/#sec-Intl.ListFormat.prototype.format">Proposition pour <code>Intl.ListFormat.prototype.format</code></a></td>
-   <td>Proposition de niveau 3</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Intl.ListFormat.format")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("ListFormat", "Intl.ListFormat")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/intl/listformat/format/index.md b/files/fr/web/javascript/reference/global_objects/intl/listformat/format/index.md
new file mode 100644
index 0000000000..f18d79b75b
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/intl/listformat/format/index.md
@@ -0,0 +1,50 @@
+---
+title: Intl​.ListFormat.prototype​.format()
+slug: Web/JavaScript/Reference/Global_Objects/Intl/ListFormat/format
+tags:
+  - Internationalisation
+  - Intl
+  - JavaScript
+  - ListFormat
+  - Méthode
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Intl/ListFormat/format
+original_slug: Web/JavaScript/Reference/Objets_globaux/Intl/ListFormat/format
+---
+{{JSRef}}
+
+La méthode **`format()`** renvoie une chaîne de caractères représentant la liste passée en argument, mise en forme selon la langue choisie (lors de la construction de l'objet `Intl.ListFormat`).
+
+{{EmbedInteractiveExample("pages/js/intl-listformat.html")}}
+
+## Description
+
+La méthode **`format()`** renvoie une chaîne de caractères qui a été formatée en fonction des paramètres fournis à l'objet `Intl.ListFormat`. Les paramètres `locales` et `options` permettent de personnaliser le comportement de `format()` et de gérer différentes conventions linguistiques au sein d'une application, notamment pour la mise en forme des listes.
+
+## Syntaxe
+
+    listFormat.format([list]);
+
+### Paramètres
+
+- **`list`**
+  - : Un objet itérable (ex. un tableau / {{jsxref("Array")}}).
+
+### Valeur de retour
+
+Une chaîne de caractères représentant les éléments de la liste et mise en forme en fonction de la langue souhaitée (grâce au paramètre `locales` passé au constructeur `Intl.ListFormat`).
+
+## Spécifications
+
+| Spécification                                                                                                                                 | État                    | Commentaires |
+| --------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------- | ------------ |
+| [Proposition pour `Intl.ListFormat.prototype.format`](https://tc39.github.io/proposal-intl-list-format/#sec-Intl.ListFormat.prototype.format) | Proposition de niveau 3 |              |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Intl.ListFormat.format")}}
+
+## Voir aussi
+
+- {{jsxref("ListFormat", "Intl.ListFormat")}}
diff --git a/files/fr/web/javascript/reference/global_objects/intl/listformat/formattoparts/index.html b/files/fr/web/javascript/reference/global_objects/intl/listformat/formattoparts/index.html
deleted file mode 100644
index 8f13257373..0000000000
--- a/files/fr/web/javascript/reference/global_objects/intl/listformat/formattoparts/index.html
+++ /dev/null
@@ -1,89 +0,0 @@
----
-title: Intl​.List​Format​.prototype​.formatToParts()
-slug: Web/JavaScript/Reference/Global_Objects/Intl/ListFormat/formatToParts
-tags:
-  - Internationalisation
-  - Intl
-  - JavaScript
-  - ListFormat
-  - Méthode
-  - Prototype
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Intl/ListFormat/formatToParts
-original_slug: Web/JavaScript/Reference/Objets_globaux/Intl/ListFormat/formatToParts
----
-<div>{{JSRef}}{{Draft}}</div>
-
-<p>La méthode <strong><code>Intl.ListFormat.prototype.formatToParts()</code></strong> renvoie un tableau ({{jsxref("Array")}}) d'objets représentants les différentes composantes de la chaine de caractères qui est le résultat du formatage de la liste (selon les options de locale et de style indiquées).</p>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">Intl.ListFormat.prototype.formatToParts(<var>list</var>)
-</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>list</code></dt>
- <dd>Un tableau ({{jsxref("Array")}}) de valeurs à mettre en forme selon une locale et des options de style.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Un tableau ({{jsxref("Array")}}) de fragments composants la chaîne de caractères pour la liste formatée.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>Alors que la méthode {{jsxref("ListFormat.prototype.format()", "Intl.ListFormat.prototype.format()")}} renvoie une chaîne de caractères avec la liste formatée (en fonction de la locale et des options de style), <code>formatToParts()</code> renvoie un tableau des différentes composantes de cette chaîne.</p>
-
-<p>Chaque élément du tableau résultant possède deux propriétés : <code>type</code> et <code>value</code>. La propriété <code>type</code> pourra valoir <code>"element"</code> (pour indiquer une valeur de la liste) ou <code>"literal"</code> (pour indiquer un élément linguistique). La propriété <code>value</code> fournit quant à elle le contenu du fragment sous forme d'une chaîne de caractères.</p>
-
-<p>Les options de locale et de style utilisées pour le formatage sont fournies lors de la construction de l'instance {{jsxref("ListFormat", "Intl.ListFormat")}}.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<pre class="brush: js">const fruits = ['Apple', 'Orange', 'Pineapple'];
-const myListFormat = new Intl.ListFormat('en-GB', { style: 'long', type: 'conjunction' });
-
-console.table(myListFormat.formatToParts(fruits));
-// [
-//  { "type": "element", "value": "Apple" },
-//  { "type": "literal", "value": ", " },
-//  { "type": "element", "value": "Orange" },
-//  { "type": "literal", "value": ", and " },
-//  { "type": "element", "value": "Pineapple" }
-// ]
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><a href="https://tc39.github.io/proposal-intl-list-format/#sec-Intl.ListFormat.prototype.formatToParts"><code>Intl.ListFormat.prototype.formatToParts</code> proposal</a></td>
-   <td>Stage 3</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Intl.ListFormat.formatToParts")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("ListFormat", "Intl.ListFormat")}}</li>
- <li>{{jsxref("ListFormat.prototype.format()", "Intl.ListFormat.prototype.format()")}}</li>
- <li>{{jsxref("RelativeTimeFormat.formatToParts()", "Intl.RelativeTimeFormat.prototype.formatToParts()")}}</li>
- <li>{{jsxref("NumberFormat.formatToParts()", "Intl.NumberFormat.prototype.formatToParts()")}}</li>
- <li>{{jsxref("DateTimeFormat.formatToParts()", "Intl.DateTimeFormat.prototype.formatToParts()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/intl/listformat/formattoparts/index.md b/files/fr/web/javascript/reference/global_objects/intl/listformat/formattoparts/index.md
new file mode 100644
index 0000000000..2730cf774b
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/intl/listformat/formattoparts/index.md
@@ -0,0 +1,72 @@
+---
+title: Intl​.List​Format​.prototype​.formatToParts()
+slug: Web/JavaScript/Reference/Global_Objects/Intl/ListFormat/formatToParts
+tags:
+  - Internationalisation
+  - Intl
+  - JavaScript
+  - ListFormat
+  - Méthode
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Intl/ListFormat/formatToParts
+original_slug: Web/JavaScript/Reference/Objets_globaux/Intl/ListFormat/formatToParts
+---
+{{JSRef}}{{Draft}}
+
+La méthode **`Intl.ListFormat.prototype.formatToParts()`** renvoie un tableau ({{jsxref("Array")}}) d'objets représentants les différentes composantes de la chaine de caractères qui est le résultat du formatage de la liste (selon les options de locale et de style indiquées).
+
+## Syntaxe
+
+    Intl.ListFormat.prototype.formatToParts(list)
+
+### Paramètres
+
+- `list`
+  - : Un tableau ({{jsxref("Array")}}) de valeurs à mettre en forme selon une locale et des options de style.
+
+### Valeur de retour
+
+Un tableau ({{jsxref("Array")}}) de fragments composants la chaîne de caractères pour la liste formatée.
+
+## Description
+
+Alors que la méthode {{jsxref("ListFormat.prototype.format()", "Intl.ListFormat.prototype.format()")}} renvoie une chaîne de caractères avec la liste formatée (en fonction de la locale et des options de style), `formatToParts()` renvoie un tableau des différentes composantes de cette chaîne.
+
+Chaque élément du tableau résultant possède deux propriétés : `type` et `value`. La propriété `type` pourra valoir `"element"` (pour indiquer une valeur de la liste) ou `"literal"` (pour indiquer un élément linguistique). La propriété `value` fournit quant à elle le contenu du fragment sous forme d'une chaîne de caractères.
+
+Les options de locale et de style utilisées pour le formatage sont fournies lors de la construction de l'instance {{jsxref("ListFormat", "Intl.ListFormat")}}.
+
+## Exemples
+
+```js
+const fruits = ['Apple', 'Orange', 'Pineapple'];
+const myListFormat = new Intl.ListFormat('en-GB', { style: 'long', type: 'conjunction' });
+
+console.table(myListFormat.formatToParts(fruits));
+// [
+//  { "type": "element", "value": "Apple" },
+//  { "type": "literal", "value": ", " },
+//  { "type": "element", "value": "Orange" },
+//  { "type": "literal", "value": ", and " },
+//  { "type": "element", "value": "Pineapple" }
+// ]
+```
+
+## Spécifications
+
+| Spécification                                                                                                                                       | État    | Commentaires |
+| --------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | ------------ |
+| [`Intl.ListFormat.prototype.formatToParts` proposal](https://tc39.github.io/proposal-intl-list-format/#sec-Intl.ListFormat.prototype.formatToParts) | Stage 3 |              |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Intl.ListFormat.formatToParts")}}
+
+## Voir aussi
+
+- {{jsxref("ListFormat", "Intl.ListFormat")}}
+- {{jsxref("ListFormat.prototype.format()", "Intl.ListFormat.prototype.format()")}}
+- {{jsxref("RelativeTimeFormat.formatToParts()", "Intl.RelativeTimeFormat.prototype.formatToParts()")}}
+- {{jsxref("NumberFormat.formatToParts()", "Intl.NumberFormat.prototype.formatToParts()")}}
+- {{jsxref("DateTimeFormat.formatToParts()", "Intl.DateTimeFormat.prototype.formatToParts()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/intl/listformat/index.html b/files/fr/web/javascript/reference/global_objects/intl/listformat/index.html
deleted file mode 100644
index 6bc6208998..0000000000
--- a/files/fr/web/javascript/reference/global_objects/intl/listformat/index.html
+++ /dev/null
@@ -1,152 +0,0 @@
----
-title: Intl.ListFormat
-slug: Web/JavaScript/Reference/Global_Objects/Intl/ListFormat
-tags:
-  - Experimental
-  - Internationalisation
-  - Intl
-  - JavaScript
-  - ListFormat
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Intl/ListFormat
-original_slug: Web/JavaScript/Reference/Objets_globaux/Intl/ListFormat
----
-<div>{{JSRef}}</div>
-
-<p>L'objet <strong><code>Intl.ListFormat</code></strong> est un constructeur d'objets qui permettent de formater des listes de façon différente selon la langue utilisée.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/intl-listformat.html")}}</div>
-
-
-
-<h2 id="Syntax">Syntax</h2>
-
-<pre class="syntaxbox">new Intl.ListFormat([<var>locales</var>[, <var>options</var>]])
-</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>locales</code>{{optional_inline}}</dt>
- <dd>
- <p>Paramètre optionnel. Une chaine de caractères avec un identifiant de langue BCP 47, ou un tableau de ce type de chaine de caractères. Pour le format général et l'interprétation de l'argument <code>locales</code>, voir la page {{jsxref("Intl","Intl","#L'identification_et_le_choix_de_la_locale")}}.</p>
- </dd>
- <dt><code>options</code>{{optional_inline}}</dt>
- <dd>
- <p>Paramètre optionnel. Un objet avec certaines ou toutes les propriétés suivantes :</p>
-
- <dl>
-  <dt><code>localeMatcher</code></dt>
-  <dd>L'algorithme de correspondance à utiliser pour la locale. Les valeurs possibles sont <code>"lookup"</code> et <code>"best fit"</code> ; le défaut est <code>"best fit"</code>. Pour des informations sur cette option, voir la page {{jsxref("Intl","Intl","##Choix_de_la_locale")}}.</dd>
-  <dt><code>type</code></dt>
-  <dd>Le format de sortie pour le message. Les valeurs possibles sont :
-  <ul>
-   <li><code>"conjunction"</code> : qui concaténera les éléments de la liste avec des <em>et</em>. Cela produira par exemple, en anglais : <code>A, B, and C</code></li>
-   <li><code>"disjunction"</code> : qui concaténera les éléments de la liste avec des <em>ou</em>. Cela produira par exemple, en anglais : <code>A, B, or C</code></li>
-   <li><code>"unit"</code> : qui permet de gérer des listes de valeurs avec des unités. Cela produira par exemple <code>5 livres, 12 onces</code></li>
-  </ul>
-  </dd>
-  <dt><code>style</code></dt>
-  <dd>Le niveau de concision/longueur du message obtenu. Les valeurs possibles sont :
-  <ul>
-   <li><code>"long"</code> : par exemple <code>A, B, and C</code></li>
-   <li><code>"narrow"</code> : cette valeur permet uniquement d'utiliser le type <code>unit</code> et affichera un message concis : par exemple <code>A, B, C</code></li>
-   <li><code>"short"</code> : par exemple <code>A, B, C</code></li>
-  </ul>
-  </dd>
- </dl>
- </dd>
-</dl>
-
-<h2 id="Description">Description</h2>
-
-<h3 id="Propriétés">Propriétés</h3>
-
-<dl>
- <dt>{{jsxref("ListFormat.prototype", "Intl.ListFormat.prototype")}}</dt>
- <dd>Cette propriété permet d'ajouter des propriétés à l'ensemble des objets de ce type.</dd>
-</dl>
-
-<h3 id="Méthodes">Méthodes</h3>
-
-<dl>
- <dt>{{jsxref("ListFormat.supportedLocalesOf", "Intl.ListFormat.supportedLocalesOf()")}}</dt>
- <dd>Cette méthode renvoie un tableau des locales prises en charge par le moteur pour le formatage des heures sans qu'il y ait besoin d'utiliser la locale de l'environnement d'exécution.</dd>
-</dl>
-
-<h2 id="Instances_de_Intl.ListFormat">Instances de <code>Intl.ListFormat</code></h2>
-
-<p>Toutes les instances de <code>Intl.ListFormat</code> héritent de <code>Intl.ListFormat.prototype</code>.</p>
-
-<h3 id="Propriétés_2">Propriétés</h3>
-
-<dl>
- <dt><code>Intl.ListFormat.prototype.constructor</code></dt>
- <dd>Définit la fonction qui crée le prototype d'un objet.</dd>
-</dl>
-
-<h3 id="Méthodes_2">Méthodes</h3>
-
-<dl>
- <dt>{{jsxref("ListFormat.prototype.format","Intl.ListFormat.prototype.format()")}}</dt>
- <dd>Renvoie une chaîne de caractères mise en forme selon la langue voulue et qui représente les éléments de la liste.</dd>
-</dl>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Utiliser_format()">Utiliser <code>format()</code></h3>
-
-<p>Dans l'exemple qui suit, on voit comment créer un formateur de liste pour l'anglais.</p>
-
-<pre class="brush: js">const list = ['Motorcycle', 'Bus', 'Car'];
-
- console.log(new Intl.ListFormat('en-GB', { style: 'long', type: 'conjunction' }).format(list));
-// &gt; Motorcycle, Bus and Car
-
- console.log(new Intl.ListFormat('en-GB', { style: 'short', type: 'disjunction' }).format(list));
-// &gt; Motorcycle, Bus or Car
-
- console.log(new Intl.ListFormat('en-GB', { style: 'narrow', type: 'unit' }).format(list));
-// &gt; Motorcycle Bus Car
-</pre>
-
-<h3 id="Utiliser_formatToParts()">Utiliser <code>formatToParts()</code></h3>
-
-<p>Dans l'exemple qui suit, on voit comment créer un formateur de liste, renvoyant les fragments, pour l'anglais</p>
-
-<pre class="brush: js">const list = ['Motorcycle', 'Bus', 'Car'];
-console.log(new Intl.ListFormat('en-GB', { style: 'long', type: 'conjunction' }).formatToParts(list));
-
-// &gt; [ { "type": "element", "value": "Motorcycle" },
-       { "type": "literal", "value": ", " },
-       { "type": "element", "value": "Bus" },
-       { "type": "literal", "value": ", and " },
-       { "type": "element", "value": "Car" } ];
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><a href="https://tc39.github.io/proposal-intl-list-format/#listformat-objects">Proposition pour <code>Intl.ListFormat</code></a></td>
-   <td>Proposition de niveau 3</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Intl.ListFormat")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<div>{{page('/fr/docs/Web/JavaScript/Reference/Objets_globaux/Intl', 'Voir_aussi')}}</div>
diff --git a/files/fr/web/javascript/reference/global_objects/intl/listformat/index.md b/files/fr/web/javascript/reference/global_objects/intl/listformat/index.md
new file mode 100644
index 0000000000..af5f79508d
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/intl/listformat/index.md
@@ -0,0 +1,122 @@
+---
+title: Intl.ListFormat
+slug: Web/JavaScript/Reference/Global_Objects/Intl/ListFormat
+tags:
+  - Experimental
+  - Internationalisation
+  - Intl
+  - JavaScript
+  - ListFormat
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Intl/ListFormat
+original_slug: Web/JavaScript/Reference/Objets_globaux/Intl/ListFormat
+---
+{{JSRef}}
+
+L'objet **`Intl.ListFormat`** est un constructeur d'objets qui permettent de formater des listes de façon différente selon la langue utilisée.
+
+{{EmbedInteractiveExample("pages/js/intl-listformat.html")}}
+
+## Syntax
+
+    new Intl.ListFormat([locales[, options]])
+
+### Paramètres
+
+- `locales`{{optional_inline}}
+  - : Paramètre optionnel. Une chaine de caractères avec un identifiant de langue BCP 47, ou un tableau de ce type de chaine de caractères. Pour le format général et l'interprétation de l'argument `locales`, voir la page {{jsxref("Intl","Intl","#L'identification_et_le_choix_de_la_locale")}}.
+- `options`{{optional_inline}}
+
+  - : Paramètre optionnel. Un objet avec certaines ou toutes les propriétés suivantes :
+
+    - `localeMatcher`
+      - : L'algorithme de correspondance à utiliser pour la locale. Les valeurs possibles sont `"lookup"` et `"best fit"` ; le défaut est `"best fit"`. Pour des informations sur cette option, voir la page {{jsxref("Intl","Intl","##Choix_de_la_locale")}}.
+    - `type`
+
+      - : Le format de sortie pour le message. Les valeurs possibles sont :
+
+        - `"conjunction"` : qui concaténera les éléments de la liste avec des _et_. Cela produira par exemple, en anglais : `A, B, and C`
+        - `"disjunction"` : qui concaténera les éléments de la liste avec des _ou_. Cela produira par exemple, en anglais : `A, B, or C`
+        - `"unit"` : qui permet de gérer des listes de valeurs avec des unités. Cela produira par exemple `5 livres, 12 onces`
+
+    - `style`
+
+      - : Le niveau de concision/longueur du message obtenu. Les valeurs possibles sont :
+
+        - `"long"` : par exemple `A, B, and C`
+        - `"narrow"` : cette valeur permet uniquement d'utiliser le type `unit` et affichera un message concis : par exemple `A, B, C`
+        - `"short"` : par exemple `A, B, C`
+
+## Description
+
+### Propriétés
+
+- {{jsxref("ListFormat.prototype", "Intl.ListFormat.prototype")}}
+  - : Cette propriété permet d'ajouter des propriétés à l'ensemble des objets de ce type.
+
+### Méthodes
+
+- {{jsxref("ListFormat.supportedLocalesOf", "Intl.ListFormat.supportedLocalesOf()")}}
+  - : Cette méthode renvoie un tableau des locales prises en charge par le moteur pour le formatage des heures sans qu'il y ait besoin d'utiliser la locale de l'environnement d'exécution.
+
+## Instances de `Intl.ListFormat`
+
+Toutes les instances de `Intl.ListFormat` héritent de `Intl.ListFormat.prototype`.
+
+### Propriétés
+
+- `Intl.ListFormat.prototype.constructor`
+  - : Définit la fonction qui crée le prototype d'un objet.
+
+### Méthodes
+
+- {{jsxref("ListFormat.prototype.format","Intl.ListFormat.prototype.format()")}}
+  - : Renvoie une chaîne de caractères mise en forme selon la langue voulue et qui représente les éléments de la liste.
+
+## Exemples
+
+### Utiliser `format()`
+
+Dans l'exemple qui suit, on voit comment créer un formateur de liste pour l'anglais.
+
+```js
+const list = ['Motorcycle', 'Bus', 'Car'];
+
+ console.log(new Intl.ListFormat('en-GB', { style: 'long', type: 'conjunction' }).format(list));
+// > Motorcycle, Bus and Car
+
+ console.log(new Intl.ListFormat('en-GB', { style: 'short', type: 'disjunction' }).format(list));
+// > Motorcycle, Bus or Car
+
+ console.log(new Intl.ListFormat('en-GB', { style: 'narrow', type: 'unit' }).format(list));
+// > Motorcycle Bus Car
+```
+
+### Utiliser `formatToParts()`
+
+Dans l'exemple qui suit, on voit comment créer un formateur de liste, renvoyant les fragments, pour l'anglais
+
+```js
+const list = ['Motorcycle', 'Bus', 'Car'];
+console.log(new Intl.ListFormat('en-GB', { style: 'long', type: 'conjunction' }).formatToParts(list));
+
+// > [ { "type": "element", "value": "Motorcycle" },
+       { "type": "literal", "value": ", " },
+       { "type": "element", "value": "Bus" },
+       { "type": "literal", "value": ", and " },
+       { "type": "element", "value": "Car" } ];
+```
+
+## Spécifications
+
+| Spécification                                                                                              | État                    | Commentaires |
+| ---------------------------------------------------------------------------------------------------------- | ----------------------- | ------------ |
+| [Proposition pour `Intl.ListFormat`](https://tc39.github.io/proposal-intl-list-format/#listformat-objects) | Proposition de niveau 3 |              |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Intl.ListFormat")}}
+
+## Voir aussi
+
+{{page('/fr/docs/Web/JavaScript/Reference/Objets_globaux/Intl', 'Voir_aussi')}}
diff --git a/files/fr/web/javascript/reference/global_objects/intl/listformat/resolvedoptions/index.html b/files/fr/web/javascript/reference/global_objects/intl/listformat/resolvedoptions/index.html
deleted file mode 100644
index c486feed3d..0000000000
--- a/files/fr/web/javascript/reference/global_objects/intl/listformat/resolvedoptions/index.html
+++ /dev/null
@@ -1,81 +0,0 @@
----
-title: Intl​.List​Format​.prototype​.resolvedOptions()
-slug: Web/JavaScript/Reference/Global_Objects/Intl/ListFormat/resolvedOptions
-tags:
-  - Internationalisation
-  - Intl
-  - JavaScript
-  - ListFormat
-  - Méthode
-  - Prototype
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Intl/ListFormat/resolvedOptions
-original_slug: Web/JavaScript/Reference/Objets_globaux/Intl/ListFormat/resolvedOptions
----
-<div>{{JSRef}}{{Draft}}</div>
-
-<p>La méthode  <code><strong>Intl.ListFormat.prototype.resolvedOptions()</strong></code> renvoie un nouvel objet dont les propriétés reflètent les options de locale et de style calculées à l'initialisation de l'objet {{jsxref("ListFormat")}}.</p>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>listFormat</var>.resolvedOptions()</pre>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Un nouvel objet dont les propriétés reflètent les options de locale et de style calculées lors de l'initialisation de l'objet {{jsxref("ListFormat")}}.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>L'objet renvoyé par <code>resolvedOptions()</code> possède les propriétés suivantes :</p>
-
-<dl>
- <dt><code>locale</code></dt>
- <dd>La balise de langue BCP 47 qui est réellement utilisée. Si des extensions Unicode étaient fournies avec la balise d'origine et sont supportées pour la locale utilisée, les paires de clés-valeurs seront incluses dans <code>locale</code>.</dd>
- <dt><code>style</code></dt>
- <dd>La valeur fournie au constructeur via l'argument <code>options</code> ou la valeur utilisée par défaut (<code>"long"</code>). Cette propriété peut valoir <code>"long"</code>, <code>"short"</code> ou <code>"narrow"</code>.</dd>
- <dt><code>type</code></dt>
- <dd>La valeur fournie au constructeur via l'argument <code>options</code> ou la valeur par défaut (<code>"conjunction"</code>). Cette propriété peut valoir <code>"conjunction"</code>, <code>"disjunction"</code> ou <code>"unit"</code>.</dd>
-</dl>
-
-<h2 id="Exemples">Exemples</h2>
-
-<pre class="brush: js">const deListFormatter = new Intl.ListFormat("de-DE", { style: "short" });
-
-const usedOptions = de.resolvedOptions();
-console.log(usedOptions.locale); // "de-DE"
-console.log(usedOptions.style);  // "short"
-console.log(usedOptions.type);   // "conjunction" (la valeur par défaut)
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><a href="https://tc39.github.io/proposal-intl-list-format/#sec-Intl.ListFormat.prototype.resolvedOptions">Proposition pour <code>Intl.ListFormat.prototype.resolvedOptions()</code></a></td>
-   <td>Proposition de niveau 3</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Intl.ListFormat.resolvedOptions")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("ListFormat", "Intl.ListFormat")}}</li>
- <li>{{jsxref("NumberFormat.prototype.resolvedOptions()", "Intl.NumberFormat.prototype.resolvedOptions()")}}</li>
- <li>{{jsxref("Collator.prototype.resolvedOptions()", "Intl.Collator.prototype.resolvedOptions()")}}</li>
- <li>{{jsxref("DateTimeFormat.prototype.resolvedOptions()", "Intl.DateTimeFormat.prototype.resolvedOptions()")}}</li>
- <li>{{jsxref("PluralRules.prototype.resolvedOptions()", "Intl.PluralRules.prototype.resolvedOptions()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/intl/listformat/resolvedoptions/index.md b/files/fr/web/javascript/reference/global_objects/intl/listformat/resolvedoptions/index.md
new file mode 100644
index 0000000000..8262926d17
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/intl/listformat/resolvedoptions/index.md
@@ -0,0 +1,65 @@
+---
+title: Intl​.List​Format​.prototype​.resolvedOptions()
+slug: Web/JavaScript/Reference/Global_Objects/Intl/ListFormat/resolvedOptions
+tags:
+  - Internationalisation
+  - Intl
+  - JavaScript
+  - ListFormat
+  - Méthode
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Intl/ListFormat/resolvedOptions
+original_slug: Web/JavaScript/Reference/Objets_globaux/Intl/ListFormat/resolvedOptions
+---
+{{JSRef}}{{Draft}}
+
+La méthode  **`Intl.ListFormat.prototype.resolvedOptions()`** renvoie un nouvel objet dont les propriétés reflètent les options de locale et de style calculées à l'initialisation de l'objet {{jsxref("ListFormat")}}.
+
+## Syntaxe
+
+    listFormat.resolvedOptions()
+
+### Valeur de retour
+
+Un nouvel objet dont les propriétés reflètent les options de locale et de style calculées lors de l'initialisation de l'objet {{jsxref("ListFormat")}}.
+
+## Description
+
+L'objet renvoyé par `resolvedOptions()` possède les propriétés suivantes :
+
+- `locale`
+  - : La balise de langue BCP 47 qui est réellement utilisée. Si des extensions Unicode étaient fournies avec la balise d'origine et sont supportées pour la locale utilisée, les paires de clés-valeurs seront incluses dans `locale`.
+- `style`
+  - : La valeur fournie au constructeur via l'argument `options` ou la valeur utilisée par défaut (`"long"`). Cette propriété peut valoir `"long"`, `"short"` ou `"narrow"`.
+- `type`
+  - : La valeur fournie au constructeur via l'argument `options` ou la valeur par défaut (`"conjunction"`). Cette propriété peut valoir `"conjunction"`, `"disjunction"` ou `"unit"`.
+
+## Exemples
+
+```js
+const deListFormatter = new Intl.ListFormat("de-DE", { style: "short" });
+
+const usedOptions = de.resolvedOptions();
+console.log(usedOptions.locale); // "de-DE"
+console.log(usedOptions.style);  // "short"
+console.log(usedOptions.type);   // "conjunction" (la valeur par défaut)
+```
+
+## Spécifications
+
+| Spécification                                                                                                                                                     | État                    | Commentaires |
+| ----------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------- | ------------ |
+| [Proposition pour `Intl.ListFormat.prototype.resolvedOptions()`](https://tc39.github.io/proposal-intl-list-format/#sec-Intl.ListFormat.prototype.resolvedOptions) | Proposition de niveau 3 |              |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Intl.ListFormat.resolvedOptions")}}
+
+## Voir aussi
+
+- {{jsxref("ListFormat", "Intl.ListFormat")}}
+- {{jsxref("NumberFormat.prototype.resolvedOptions()", "Intl.NumberFormat.prototype.resolvedOptions()")}}
+- {{jsxref("Collator.prototype.resolvedOptions()", "Intl.Collator.prototype.resolvedOptions()")}}
+- {{jsxref("DateTimeFormat.prototype.resolvedOptions()", "Intl.DateTimeFormat.prototype.resolvedOptions()")}}
+- {{jsxref("PluralRules.prototype.resolvedOptions()", "Intl.PluralRules.prototype.resolvedOptions()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/intl/listformat/supportedlocalesof/index.html b/files/fr/web/javascript/reference/global_objects/intl/listformat/supportedlocalesof/index.html
deleted file mode 100644
index b5f54c9535..0000000000
--- a/files/fr/web/javascript/reference/global_objects/intl/listformat/supportedlocalesof/index.html
+++ /dev/null
@@ -1,87 +0,0 @@
----
-title: Intl.ListFormat.supportedLocalesOf()
-slug: Web/JavaScript/Reference/Global_Objects/Intl/ListFormat/supportedLocalesOf
-tags:
-  - Intl
-  - JavaScript
-  - ListFormat
-  - Méthode
-  - Reference
-  - i18n
-translation_of: Web/JavaScript/Reference/Global_Objects/Intl/ListFormat/supportedLocalesOf
-original_slug: Web/JavaScript/Reference/Objets_globaux/Intl/ListFormat/supportedLocalesOf
----
-<div>{{JSRef}}</div>
-
-<p>The <strong><code>Intl.ListFormat.supportedLocalesOf()</code></strong> renvoie, parmi les locales fournies, un tableau contenant les locales supportées pour le formatage des listes et qui ne nécessitent pas d'utiliser la locale par défaut de l'environnement.</p>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre>Intl.ListFormat.supportedLocalesOf(<var>locales</var>[, <var>options</var>])</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>locales</code></dt>
- <dd>Une chaîne de caractères qui est une balise de langue BCP 47 ou bien un tableau de telles chaînes. Pour plus d'informations concernant la forme générale de l'argument <code>locales</code>, voir la page {{jsxref("Objets_globaux/Intl", "Intl", "#L'identification_et_le_choix_de_la_locale")}}.</dd>
- <dt><code>options</code>{{optional_inline}}</dt>
- <dd>
- <p>Paramètre facultatif. Un objet qui peut posséder les propriétés suivantes :</p>
-
- <dl>
-  <dt><code>localeMatcher</code></dt>
-  <dd>
-  <p>L'algorithme utilisé pour la correspondance entre chaînes de caractères. Les valeurs possibles sont <code>"lookup"</code> et <code>"best fit"</code>. La valeur par défaut est <code>"best fit"</code>. Pour plus d'informations, voir la page {{jsxref("Objets_globaux/Intl", "Intl", "#Choix_de_la_locale")}}.</p>
-  </dd>
- </dl>
- </dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Un tableau de chaînes de caractères qui représente un sous-ensemble des balises de langues qui sont prises en charge pour le formatage des listes sans qu'il faille utiliser la locale par défaut de l'environnement d'exécution.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>Cette méthode renvoie un tableau qui est un sous-ensemble des balises de locales fournies avec l'argument <code>locales</code>. Les balises renvoyées sont celles supportées par l'environnement navigateur en termes de formatage des listes et qui ne nécessitent pas d'utiliser la locale par défaut.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Utiliser_supportedLocalesOf">Utiliser <code>supportedLocalesOf</code></h3>
-
-<p>Si on dispose d'un environnement (un navigateur par exemple) qui supporte le formatage des listes dans les locales indonésienne, allemande mais pas balinaise,  <code>supportedLocalesOf</code> renvoie les balises pour l'indonésien et l'allemand quand bien même le formatage des listes pinyin n'est pas utilisée avec l'indonésien et qu'il n'existe pas une version spécifique de l'allemand pour l'Indonésie. On illustre ici l'algorithme <code>"lookup"</code>. SI on utilisait <code>"best fit"</code> pour trouver les locales correspondantes, on aurait pu avoir une balise supplémentaire pour le balinais en plus car la plupart des balinais comprennent l'indonésien.</p>
-
-<pre class="brush: js">const locales = ['ban', 'id-u-co-pinyin', 'de-ID'];
-const options = { localeMatcher: 'lookup' };
-console.log(Intl.ListFormat.supportedLocalesOf(locales, options).join(', '));
-// → "id-u-co-pinyin, de-ID"
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><a href="https://tc39.github.io/proposal-intl-list-format/#sec-Intl.ListFormat.supportedLocalesOf">Proposition pour <code>Intl.ListFormat.supportedLocalesOf</code></a></td>
-   <td>Proposition de niveau 3</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Intl.ListFormat.supportedLocalesOf")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("ListFormat", "Intl.ListFormat")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/intl/listformat/supportedlocalesof/index.md b/files/fr/web/javascript/reference/global_objects/intl/listformat/supportedlocalesof/index.md
new file mode 100644
index 0000000000..ae6a5c4f24
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/intl/listformat/supportedlocalesof/index.md
@@ -0,0 +1,66 @@
+---
+title: Intl.ListFormat.supportedLocalesOf()
+slug: Web/JavaScript/Reference/Global_Objects/Intl/ListFormat/supportedLocalesOf
+tags:
+  - Intl
+  - JavaScript
+  - ListFormat
+  - Méthode
+  - Reference
+  - i18n
+translation_of: Web/JavaScript/Reference/Global_Objects/Intl/ListFormat/supportedLocalesOf
+original_slug: Web/JavaScript/Reference/Objets_globaux/Intl/ListFormat/supportedLocalesOf
+---
+{{JSRef}}
+
+The **`Intl.ListFormat.supportedLocalesOf()`** renvoie, parmi les locales fournies, un tableau contenant les locales supportées pour le formatage des listes et qui ne nécessitent pas d'utiliser la locale par défaut de l'environnement.
+
+## Syntaxe
+
+    Intl.ListFormat.supportedLocalesOf(locales[, options])
+
+### Paramètres
+
+- `locales`
+  - : Une chaîne de caractères qui est une balise de langue BCP 47 ou bien un tableau de telles chaînes. Pour plus d'informations concernant la forme générale de l'argument `locales`, voir la page {{jsxref("Objets_globaux/Intl", "Intl", "#L'identification_et_le_choix_de_la_locale")}}.
+- `options`{{optional_inline}}
+
+  - : Paramètre facultatif. Un objet qui peut posséder les propriétés suivantes :
+
+    - `localeMatcher`
+      - : L'algorithme utilisé pour la correspondance entre chaînes de caractères. Les valeurs possibles sont `"lookup"` et `"best fit"`. La valeur par défaut est `"best fit"`. Pour plus d'informations, voir la page {{jsxref("Objets_globaux/Intl", "Intl", "#Choix_de_la_locale")}}.
+
+### Valeur de retour
+
+Un tableau de chaînes de caractères qui représente un sous-ensemble des balises de langues qui sont prises en charge pour le formatage des listes sans qu'il faille utiliser la locale par défaut de l'environnement d'exécution.
+
+## Description
+
+Cette méthode renvoie un tableau qui est un sous-ensemble des balises de locales fournies avec l'argument `locales`. Les balises renvoyées sont celles supportées par l'environnement navigateur en termes de formatage des listes et qui ne nécessitent pas d'utiliser la locale par défaut.
+
+## Exemples
+
+### Utiliser `supportedLocalesOf`
+
+Si on dispose d'un environnement (un navigateur par exemple) qui supporte le formatage des listes dans les locales indonésienne, allemande mais pas balinaise,  `supportedLocalesOf` renvoie les balises pour l'indonésien et l'allemand quand bien même le formatage des listes pinyin n'est pas utilisée avec l'indonésien et qu'il n'existe pas une version spécifique de l'allemand pour l'Indonésie. On illustre ici l'algorithme `"lookup"`. SI on utilisait `"best fit"` pour trouver les locales correspondantes, on aurait pu avoir une balise supplémentaire pour le balinais en plus car la plupart des balinais comprennent l'indonésien.
+
+```js
+const locales = ['ban', 'id-u-co-pinyin', 'de-ID'];
+const options = { localeMatcher: 'lookup' };
+console.log(Intl.ListFormat.supportedLocalesOf(locales, options).join(', '));
+// → "id-u-co-pinyin, de-ID"
+```
+
+## Spécifications
+
+| Spécification                                                                                                                                     | État                    | Commentaires |
+| ------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------- | ------------ |
+| [Proposition pour `Intl.ListFormat.supportedLocalesOf`](https://tc39.github.io/proposal-intl-list-format/#sec-Intl.ListFormat.supportedLocalesOf) | Proposition de niveau 3 |              |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Intl.ListFormat.supportedLocalesOf")}}
+
+## Voir aussi
+
+- {{jsxref("ListFormat", "Intl.ListFormat")}}
diff --git a/files/fr/web/javascript/reference/global_objects/intl/locale/basename/index.html b/files/fr/web/javascript/reference/global_objects/intl/locale/basename/index.html
deleted file mode 100644
index a13032aa1d..0000000000
--- a/files/fr/web/javascript/reference/global_objects/intl/locale/basename/index.html
+++ /dev/null
@@ -1,74 +0,0 @@
----
-title: Intl.Locale.prototype.baseName
-slug: Web/JavaScript/Reference/Global_Objects/Intl/Locale/baseName
-tags:
-  - Internationalisation
-  - Intl
-  - JavaScript
-  - Propriété
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Intl/Locale/baseName
-original_slug: Web/JavaScript/Reference/Objets_globaux/Intl/Locale/baseName
----
-<div>{{JSRef}}</div>
-
-<p>La propriété <strong><code>Intl.Locale.prototype.baseName</code></strong> renvoie un extrait de la chaîne de caractères représentant l'objet <code>Locale</code>. Cet extrait contient les informations essentielles à propos de l'objet <code>Locale</code>.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>Un objet <code>Intl.Locale</code> représente une locale ainsi que des options qui lui sont associées. La propriété <code>baseName</code> renvoie des informations essentielles quant à la locale sous la forme d'une chaîne de caractères. Cette chaîne est un extrait de la représentation textuelle complète de l'objet <code>Locale</code>. Cet extrait contient notamment la langue, le script utilisé ainsi que la région (s'ils sont disponibles).</p>
-
-<p>Si on utilise <a href="https://www.unicode.org/reports/tr35/#Identifiers">la grammaire Unicode</a>, <code>baseName</code> renvoie la sous-séquence <code>language ["-" script] ["-" region] *("-" variant)</code>.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Exemple_simple">Exemple simple</h3>
-
-<pre class="brush: js">let myLoc = new Intl.Locale("fr-Latn-CA"); // Sets locale to Candanian French
-console.log(myLoc.toString()); // Prints out "fr-Latn-CA-u-ca-gregory"
-console.log(myLoc.baseName); // Prints out "fr-Latn-CA"</pre>
-
-<h3 id="Exemple_avec_certaines_options">Exemple avec certaines options</h3>
-
-<pre class="brush: js">// Sets language to Japanese, region to Japan,
-
-// calendar to Gregorian, hour cycle to 24 hours
-let japan = new Intl.Locale("ja-JP-u-ca-gregory-hc-24");
-console.log(japan.toString()); // Prints out "ja-JP-u-ca-gregory-hc-h24"
-console.log(japan.baseName); // Prints out "ja-JP"</pre>
-
-<h3 id="Exemple_avec_options_qui_surchargent">Exemple avec options qui surchargent</h3>
-
-<pre class="brush: js">// Input string indicates language as Dutch and region as Belgium,
-
-// but options object overrides the region and sets it to the Netherlands
-let dutch = new Intl.Locale("nl-Latn-BE", {region: "NL"});
-
-console.log(dutch.baseName); // Prints out "nl-Latn-NL"</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td><a href="https://tc39.github.io/proposal-intl-locale/#sec-Intl.Locale.prototype.baseName">Proposition pour <code>Intl.Locale.prototype.baseName</code></a></td>
-   <td>Proposition de niveau 3</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<div>{{Compat("javascript.builtins.Intl.Locale.baseName")}}</div>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Locale", "Intl.Locale")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/intl/locale/basename/index.md b/files/fr/web/javascript/reference/global_objects/intl/locale/basename/index.md
new file mode 100644
index 0000000000..cbbb4f6856
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/intl/locale/basename/index.md
@@ -0,0 +1,67 @@
+---
+title: Intl.Locale.prototype.baseName
+slug: Web/JavaScript/Reference/Global_Objects/Intl/Locale/baseName
+tags:
+  - Internationalisation
+  - Intl
+  - JavaScript
+  - Propriété
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Intl/Locale/baseName
+original_slug: Web/JavaScript/Reference/Objets_globaux/Intl/Locale/baseName
+---
+{{JSRef}}
+
+La propriété **`Intl.Locale.prototype.baseName`** renvoie un extrait de la chaîne de caractères représentant l'objet `Locale`. Cet extrait contient les informations essentielles à propos de l'objet `Locale`.
+
+## Description
+
+Un objet `Intl.Locale` représente une locale ainsi que des options qui lui sont associées. La propriété `baseName` renvoie des informations essentielles quant à la locale sous la forme d'une chaîne de caractères. Cette chaîne est un extrait de la représentation textuelle complète de l'objet `Locale`. Cet extrait contient notamment la langue, le script utilisé ainsi que la région (s'ils sont disponibles).
+
+Si on utilise [la grammaire Unicode](https://www.unicode.org/reports/tr35/#Identifiers), `baseName` renvoie la sous-séquence `language ["-" script] ["-" region] *("-" variant)`.
+
+## Exemples
+
+### Exemple simple
+
+```js
+let myLoc = new Intl.Locale("fr-Latn-CA"); // Sets locale to Candanian French
+console.log(myLoc.toString()); // Prints out "fr-Latn-CA-u-ca-gregory"
+console.log(myLoc.baseName); // Prints out "fr-Latn-CA"
+```
+
+### Exemple avec certaines options
+
+```js
+// Sets language to Japanese, region to Japan,
+
+// calendar to Gregorian, hour cycle to 24 hours
+let japan = new Intl.Locale("ja-JP-u-ca-gregory-hc-24");
+console.log(japan.toString()); // Prints out "ja-JP-u-ca-gregory-hc-h24"
+console.log(japan.baseName); // Prints out "ja-JP"
+```
+
+### Exemple avec options qui surchargent
+
+```js
+// Input string indicates language as Dutch and region as Belgium,
+
+// but options object overrides the region and sets it to the Netherlands
+let dutch = new Intl.Locale("nl-Latn-BE", {region: "NL"});
+
+console.log(dutch.baseName); // Prints out "nl-Latn-NL"
+```
+
+## Spécifications
+
+| Spécification                                                                                                                        | État                    | Commentaires |
+| ------------------------------------------------------------------------------------------------------------------------------------ | ----------------------- | ------------ |
+| [Proposition pour `Intl.Locale.prototype.baseName`](https://tc39.github.io/proposal-intl-locale/#sec-Intl.Locale.prototype.baseName) | Proposition de niveau 3 |              |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Intl.Locale.baseName")}}
+
+## Voir aussi
+
+- {{jsxref("Locale", "Intl.Locale")}}
diff --git a/files/fr/web/javascript/reference/global_objects/intl/locale/calendar/index.html b/files/fr/web/javascript/reference/global_objects/intl/locale/calendar/index.html
deleted file mode 100644
index a27a8efbb5..0000000000
--- a/files/fr/web/javascript/reference/global_objects/intl/locale/calendar/index.html
+++ /dev/null
@@ -1,157 +0,0 @@
----
-title: Intl.Locale.prototype.calendar
-slug: Web/JavaScript/Reference/Global_Objects/Intl/Locale/calendar
-tags:
-  - Internationalisation
-  - Intl
-  - JavaScript
-  - Locale
-  - Propriété
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Intl/Locale/calendar
-original_slug: Web/JavaScript/Reference/Objets_globaux/Intl/Locale/calendar
----
-<div>{{JSRef}}</div>
-
-<p>La propriété <strong><code>Intl.Locale.prototype.calendar</code></strong> est une propriété (via un accesseur) qui renvoie le type de calendrier utilisé par l'instance de <code>Locale</code>.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>La propriété <code>calendar</code> renvoie la partie de la locale qui indique le calendrier utilisé. Bien que la plupart des régions utilise le calendrier grégorien, il existe différents calendriers utilisés. Le tableau qui suit indique les clés Unicode pour les différents calendriers ainsi qu'une description.</p>
-
-<table class="standard-table">
- <caption>Clés Unicode pour les calendriers</caption>
- <thead>
-  <tr>
-   <th scope="col">Clé Unicode</th>
-   <th scope="col">Description</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><code>buddhist</code></td>
-   <td>Calendrier bouddhiste</td>
-  </tr>
-  <tr>
-   <td><code>chinese</code></td>
-   <td>Calendrier chinois traditionnel</td>
-  </tr>
-  <tr>
-   <td><code>coptic</code></td>
-   <td>Calendrier copte</td>
-  </tr>
-  <tr>
-   <td><code>dangi</code></td>
-   <td>Calendrier coréen traditionnel</td>
-  </tr>
-  <tr>
-   <td><code>ethioaa</code></td>
-   <td>Calendrier éthiopique, Amete Alem (an 0 situé environ à  5493 ans avant notre ère)</td>
-  </tr>
-  <tr>
-   <td><code>ethiopic</code></td>
-   <td>Calendrier éthiopique, Amete Mihret (an 0 situé environ à 8 ans de notre ère)</td>
-  </tr>
-  <tr>
-   <td><code>gregory</code></td>
-   <td>Calendrier grégorien</td>
-  </tr>
-  <tr>
-   <td><code>hebrew</code></td>
-   <td>Calendrier traditionnel hébreux</td>
-  </tr>
-  <tr>
-   <td><code>indian</code></td>
-   <td>Calendrier indien</td>
-  </tr>
-  <tr>
-   <td><code>islamic</code></td>
-   <td>Calendrier islamique</td>
-  </tr>
-  <tr>
-   <td><code>islamic-umalqura</code></td>
-   <td>Calendrier islamique, Umm al-Qura</td>
-  </tr>
-  <tr>
-   <td><code>islamic-tbla</code></td>
-   <td>Calendrier islamique tabulaire (années intercalaires [2,5,7,10,13,16,18,21,24,26,29] - origine des temps astronomique)</td>
-  </tr>
-  <tr>
-   <td><code>islamic-civil</code></td>
-   <td>Calendrier islamique tabulaire (années intercalaires [2,5,7,10,13,16,18,21,24,26,29] - origine des temps civile)</td>
-  </tr>
-  <tr>
-   <td><code>islamic-rgsa</code></td>
-   <td>Calendrier islamique vu de l'Arabie saoudite</td>
-  </tr>
-  <tr>
-   <td><code>iso8601</code></td>
-   <td>Calendrier ISO (calendrier grégorien utilisant la numérotation des semaines ISO 8601)</td>
-  </tr>
-  <tr>
-   <td><code>japanese</code></td>
-   <td>Calendrier japonais impérial</td>
-  </tr>
-  <tr>
-   <td><code>persian</code></td>
-   <td>Calendrier perse</td>
-  </tr>
-  <tr>
-   <td><code>roc</code></td>
-   <td>Calendrier de la République de Chine</td>
-  </tr>
-  <tr>
-   <td>
-    <div class="warning"><p><strong>Attention :</strong> La clé  <code>islamicc</code> est désormais dépréciée et il faut utiliser <code>islamic-civil</code> à la place.</p></div>
-
-    <p><code>islamicc</code></p>
-   </td>
-   <td>Calendrier arabe civil (algorithmique)</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Indiquer_le_calendrier_via_la_chaîne_de_définition_de_la_locale">Indiquer le calendrier via la chaîne de définition de la locale</h3>
-
-<p>Les calendriers font partie des « clés d'extension ». Ces clés permettent d'ajouter des informations supplémentaires aux locales et sont ajoutées via l'extension <code>-u</code>. Ainsi, on peut indiquer le calendrier utilisé via la chaîne de locale passée comme argument au constructeur {{jsxref("Locale", "Intl.Locale")}}. Pour ce faire, on ajoutera d'abord <code>-u</code> à la chaîne « courte » de la locale puis <code>-ca</code> afin d'indiquer qu'on précise le calendrier et enfin la chaîne représentant la clé du calendrier.</p>
-
-<pre class="brush: js">let frBuddhist = new Intl.Locale("fr-FR-u-ca-buddhist");
-console.log(frBuddhist.calendar); // affiche "buddhist" dans la console</pre>
-
-<h3 id="Spécifier_un_calendrier_grâce_à_un_objet_de_configuration">Spécifier un calendrier grâce à un objet de configuration</h3>
-
-<p>Le constructeur {{jsxref("Locale", "Intl.Locale")}} peut utiliser un argument optionnel qui est un objet permettant de configurer la locale via différentes extensions dont les calendriers. En utilisant la propriété <code>calendar</code> de cet objet, on définit le calendrier qui sera utilisé :</p>
-
-<pre class="brush: js">let frBuddhist = new Intl.Locale("fr-FR", {calendar: "buddhist"});
-console.log(frBuddhist.calendar); // affiche "buddhist" dans la console
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td><a href="https://tc39.github.io/proposal-intl-locale/#sec-Intl.Locale.prototype.calendar">Proposition pour <code>Intl.Locale.prototype.calendar</code></a></td>
-   <td>Proposition de niveau 3</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<div>{{Compat("javascript.builtins.Intl.Locale.calendar")}}</div>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Locale", "Intl.Locale")}}</li>
- <li><a href="https://www.unicode.org/reports/tr35/#UnicodeCalendarIdentifier">Identifiants Unicode pour les calendriers</a></li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/intl/locale/calendar/index.md b/files/fr/web/javascript/reference/global_objects/intl/locale/calendar/index.md
new file mode 100644
index 0000000000..e9d990d117
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/intl/locale/calendar/index.md
@@ -0,0 +1,169 @@
+---
+title: Intl.Locale.prototype.calendar
+slug: Web/JavaScript/Reference/Global_Objects/Intl/Locale/calendar
+tags:
+  - Internationalisation
+  - Intl
+  - JavaScript
+  - Locale
+  - Propriété
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Intl/Locale/calendar
+original_slug: Web/JavaScript/Reference/Objets_globaux/Intl/Locale/calendar
+---
+{{JSRef}}
+
+La propriété **`Intl.Locale.prototype.calendar`** est une propriété (via un accesseur) qui renvoie le type de calendrier utilisé par l'instance de `Locale`.
+
+## Description
+
+La propriété `calendar` renvoie la partie de la locale qui indique le calendrier utilisé. Bien que la plupart des régions utilise le calendrier grégorien, il existe différents calendriers utilisés. Le tableau qui suit indique les clés Unicode pour les différents calendriers ainsi qu'une description.
+
+<table class="standard-table">
+  <caption>
+    Clés Unicode pour les calendriers
+  </caption>
+  <thead>
+    <tr>
+      <th scope="col">Clé Unicode</th>
+      <th scope="col">Description</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td><code>buddhist</code></td>
+      <td>Calendrier bouddhiste</td>
+    </tr>
+    <tr>
+      <td><code>chinese</code></td>
+      <td>Calendrier chinois traditionnel</td>
+    </tr>
+    <tr>
+      <td><code>coptic</code></td>
+      <td>Calendrier copte</td>
+    </tr>
+    <tr>
+      <td><code>dangi</code></td>
+      <td>Calendrier coréen traditionnel</td>
+    </tr>
+    <tr>
+      <td><code>ethioaa</code></td>
+      <td>
+        Calendrier éthiopique, Amete Alem (an 0 situé environ à  5493 ans avant
+        notre ère)
+      </td>
+    </tr>
+    <tr>
+      <td><code>ethiopic</code></td>
+      <td>
+        Calendrier éthiopique, Amete Mihret (an 0 situé environ à 8 ans de notre
+        ère)
+      </td>
+    </tr>
+    <tr>
+      <td><code>gregory</code></td>
+      <td>Calendrier grégorien</td>
+    </tr>
+    <tr>
+      <td><code>hebrew</code></td>
+      <td>Calendrier traditionnel hébreux</td>
+    </tr>
+    <tr>
+      <td><code>indian</code></td>
+      <td>Calendrier indien</td>
+    </tr>
+    <tr>
+      <td><code>islamic</code></td>
+      <td>Calendrier islamique</td>
+    </tr>
+    <tr>
+      <td><code>islamic-umalqura</code></td>
+      <td>Calendrier islamique, Umm al-Qura</td>
+    </tr>
+    <tr>
+      <td><code>islamic-tbla</code></td>
+      <td>
+        Calendrier islamique tabulaire (années intercalaires
+        [2,5,7,10,13,16,18,21,24,26,29] - origine des temps astronomique)
+      </td>
+    </tr>
+    <tr>
+      <td><code>islamic-civil</code></td>
+      <td>
+        Calendrier islamique tabulaire (années intercalaires
+        [2,5,7,10,13,16,18,21,24,26,29] - origine des temps civile)
+      </td>
+    </tr>
+    <tr>
+      <td><code>islamic-rgsa</code></td>
+      <td>Calendrier islamique vu de l'Arabie saoudite</td>
+    </tr>
+    <tr>
+      <td><code>iso8601</code></td>
+      <td>
+        Calendrier ISO (calendrier grégorien utilisant la numérotation des
+        semaines ISO 8601)
+      </td>
+    </tr>
+    <tr>
+      <td><code>japanese</code></td>
+      <td>Calendrier japonais impérial</td>
+    </tr>
+    <tr>
+      <td><code>persian</code></td>
+      <td>Calendrier perse</td>
+    </tr>
+    <tr>
+      <td><code>roc</code></td>
+      <td>Calendrier de la République de Chine</td>
+    </tr>
+    <tr>
+      <td>
+        <div class="warning">
+          <p>
+            <strong>Attention :</strong> La clé  <code>islamicc</code> est
+            désormais dépréciée et il faut utiliser <code>islamic-civil</code> à
+            la place.
+          </p>
+        </div>
+        <p><code>islamicc</code></p>
+      </td>
+      <td>Calendrier arabe civil (algorithmique)</td>
+    </tr>
+  </tbody>
+</table>
+
+## Exemples
+
+### Indiquer le calendrier via la chaîne de définition de la locale
+
+Les calendriers font partie des « clés d'extension ». Ces clés permettent d'ajouter des informations supplémentaires aux locales et sont ajoutées via l'extension `-u`. Ainsi, on peut indiquer le calendrier utilisé via la chaîne de locale passée comme argument au constructeur {{jsxref("Locale", "Intl.Locale")}}. Pour ce faire, on ajoutera d'abord `-u` à la chaîne « courte » de la locale puis `-ca` afin d'indiquer qu'on précise le calendrier et enfin la chaîne représentant la clé du calendrier.
+
+```js
+let frBuddhist = new Intl.Locale("fr-FR-u-ca-buddhist");
+console.log(frBuddhist.calendar); // affiche "buddhist" dans la console
+```
+
+### Spécifier un calendrier grâce à un objet de configuration
+
+Le constructeur {{jsxref("Locale", "Intl.Locale")}} peut utiliser un argument optionnel qui est un objet permettant de configurer la locale via différentes extensions dont les calendriers. En utilisant la propriété `calendar` de cet objet, on définit le calendrier qui sera utilisé :
+
+```js
+let frBuddhist = new Intl.Locale("fr-FR", {calendar: "buddhist"});
+console.log(frBuddhist.calendar); // affiche "buddhist" dans la console
+```
+
+## Spécifications
+
+| Spécification                                                                                                                        | État                    | Commentaires |
+| ------------------------------------------------------------------------------------------------------------------------------------ | ----------------------- | ------------ |
+| [Proposition pour `Intl.Locale.prototype.calendar`](https://tc39.github.io/proposal-intl-locale/#sec-Intl.Locale.prototype.calendar) | Proposition de niveau 3 |              |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Intl.Locale.calendar")}}
+
+## Voir aussi
+
+- {{jsxref("Locale", "Intl.Locale")}}
+- [Identifiants Unicode pour les calendriers](https://www.unicode.org/reports/tr35/#UnicodeCalendarIdentifier)
diff --git a/files/fr/web/javascript/reference/global_objects/intl/locale/casefirst/index.html b/files/fr/web/javascript/reference/global_objects/intl/locale/casefirst/index.html
deleted file mode 100644
index e271f2b621..0000000000
--- a/files/fr/web/javascript/reference/global_objects/intl/locale/casefirst/index.html
+++ /dev/null
@@ -1,93 +0,0 @@
----
-title: Intl.Locale.prototype.caseFirst
-slug: Web/JavaScript/Reference/Global_Objects/Intl/Locale/caseFirst
-tags:
-  - Internationalisation
-  - Intl
-  - JavaScript
-  - Locale
-  - Propriété
-  - Reference
-  - Unicode
-translation_of: Web/JavaScript/Reference/Global_Objects/Intl/Locale/caseFirst
-original_slug: Web/JavaScript/Reference/Objets_globaux/Intl/Locale/caseFirst
----
-<div>{{JSRef}}</div>
-
-<p>La propriété <strong><code>Intl.Locale.prototype.caseFirst</code></strong> est une propriété (via un accesseur) qui renvoie si la casse est prise en compte par la locale pour ses règles de collation (celles qui permettent d'ordonner des chaînes de caractères entre elles).</p>
-
-<h2 id="Description">Description</h2>
-
-<p>Les règles de collation des locales sont utilisées afin de déterminer la façon dont les chaînes sont ordonnées pour cette locale. Certaines locales utilisent la casse (minuscule ou majuscule) dans ce processus de collation. Cette règle peut être exprimée via la propriété <code>caseFirst</code> d'une instance <code>Locale</code>.</p>
-
-<p>Cette propriété peut avoir une des 3 valeurs suivantes :</p>
-
-<table class="standard-table">
- <caption>Valeurs pour <code>caseFirst</code></caption>
- <thead>
-  <tr>
-   <th scope="col">Valeur</th>
-   <th scope="col">Description</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><code>upper</code></td>
-   <td>Les majuscules devraient être triées avant les minuscules.</td>
-  </tr>
-  <tr>
-   <td><code>lower</code></td>
-   <td>Les minuscules devraient être triées avant les majuscules.</td>
-  </tr>
-  <tr>
-   <td><code>false</code></td>
-   <td>La casse n'a pas d'importance pour le tri des chaînes.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Définir_caseFirst_grâce_à_la_chaîne_de_description_de_la_locale">Définir <code>caseFirst</code> grâce à la chaîne de description de la locale</h3>
-
-<p>Le constructeur <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Locale" title="The Intl.Locale constructor is a standard built-in property of the Intl object."><code>Intl.Locale</code></a> prend comme premier argument une chaîne de caractères qui décrit la locale. On peut allonger cette chaîne avec certaines valeurs afin de l'affiner.</p>
-
-<p>Dans la <a href="https://www.unicode.org/reports/tr35/">spécification Unicode sur les clés des extensions</a>, <code>caseFirst</code> correspond à la clé<code> kf</code>. <code>kf</code>. Il est possible d'ajouter des extensions à la chaîne identifiant la locale en la concaténant à <code>-u</code> puis en concaténant la clé de l'extension qu'on souhaite préciser (ici <code>-kf</code>) puis en ajoutant enfin la valeur pour cette extension (ici <code>upper</code>) :</p>
-
-<pre class="brush: js">let caseFirstStr = new Intl.Locale("fr-Latn-FR-u-kf-upper");
-console.log(caseFirstStr.caseFirst); // Prints "upper"</pre>
-
-<h3 id="Définir_caseFirst_via_lobjet_de_configuration">Définir <code>caseFirst</code> via l'objet de configuration</h3>
-
-<p>Le constructeur <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Locale" title="The Intl.Locale constructor is a standard built-in property of the Intl object."><code>Intl.Locale</code></a> permet d'utiliser un objet de configuration comme deuxième argument. Les propriétés de cet objet seront autant d'extensions Unicode à utiliser pour la locale. Ici, on peut utiliser un objet avec la propriété <code>caseFirst</code> pour indiquer l'impact de la casse sur la collation de cette locale :</p>
-
-<pre class="brush: js">let caseFirstObj= new Intl.Locale("en-Latn-US", {caseFirst: "lower"});
-console.log(us12hour.caseFirst); // affichera "lower" dans la console.</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td><a href="https://tc39.github.io/proposal-intl-locale/#sec-Intl.Locale.prototype.caseFirst">Proposition pour <code>Intl.Locale</code></a></td>
-   <td>Proposition de niveau 3</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<div>{{Compat("javascript.builtins.Intl.Locale.caseFirst")}}</div>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Locale", "Intl.Locale")}}</li>
- <li><a href="https://github.com/unicode-org/cldr/blob/master/common/bcp47/collation.xml#L49">Spécification Unicode pour la collation selon la casse</a></li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/intl/locale/casefirst/index.md b/files/fr/web/javascript/reference/global_objects/intl/locale/casefirst/index.md
new file mode 100644
index 0000000000..b5e2d8d422
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/intl/locale/casefirst/index.md
@@ -0,0 +1,66 @@
+---
+title: Intl.Locale.prototype.caseFirst
+slug: Web/JavaScript/Reference/Global_Objects/Intl/Locale/caseFirst
+tags:
+  - Internationalisation
+  - Intl
+  - JavaScript
+  - Locale
+  - Propriété
+  - Reference
+  - Unicode
+translation_of: Web/JavaScript/Reference/Global_Objects/Intl/Locale/caseFirst
+original_slug: Web/JavaScript/Reference/Objets_globaux/Intl/Locale/caseFirst
+---
+{{JSRef}}
+
+La propriété **`Intl.Locale.prototype.caseFirst`** est une propriété (via un accesseur) qui renvoie si la casse est prise en compte par la locale pour ses règles de collation (celles qui permettent d'ordonner des chaînes de caractères entre elles).
+
+## Description
+
+Les règles de collation des locales sont utilisées afin de déterminer la façon dont les chaînes sont ordonnées pour cette locale. Certaines locales utilisent la casse (minuscule ou majuscule) dans ce processus de collation. Cette règle peut être exprimée via la propriété `caseFirst` d'une instance `Locale`.
+
+Cette propriété peut avoir une des 3 valeurs suivantes :
+
+| Valeur  | Description                                                |
+| ------- | ---------------------------------------------------------- |
+| `upper` | Les majuscules devraient être triées avant les minuscules. |
+| `lower` | Les minuscules devraient être triées avant les majuscules. |
+| `false` | La casse n'a pas d'importance pour le tri des chaînes.     |
+
+## Exemples
+
+### Définir `caseFirst` grâce à la chaîne de description de la locale
+
+Le constructeur [`Intl.Locale`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Locale "The Intl.Locale constructor is a standard built-in property of the Intl object.") prend comme premier argument une chaîne de caractères qui décrit la locale. On peut allonger cette chaîne avec certaines valeurs afin de l'affiner.
+
+Dans la [spécification Unicode sur les clés des extensions](https://www.unicode.org/reports/tr35/), `caseFirst` correspond à la clé` kf`. `kf`. Il est possible d'ajouter des extensions à la chaîne identifiant la locale en la concaténant à `-u` puis en concaténant la clé de l'extension qu'on souhaite préciser (ici `-kf`) puis en ajoutant enfin la valeur pour cette extension (ici `upper`) :
+
+```js
+let caseFirstStr = new Intl.Locale("fr-Latn-FR-u-kf-upper");
+console.log(caseFirstStr.caseFirst); // Prints "upper"
+```
+
+### Définir `caseFirst` via l'objet de configuration
+
+Le constructeur [`Intl.Locale`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Locale "The Intl.Locale constructor is a standard built-in property of the Intl object.") permet d'utiliser un objet de configuration comme deuxième argument. Les propriétés de cet objet seront autant d'extensions Unicode à utiliser pour la locale. Ici, on peut utiliser un objet avec la propriété `caseFirst` pour indiquer l'impact de la casse sur la collation de cette locale :
+
+```js
+let caseFirstObj= new Intl.Locale("en-Latn-US", {caseFirst: "lower"});
+console.log(us12hour.caseFirst); // affichera "lower" dans la console.
+```
+
+## Spécifications
+
+| Spécification                                                                                                      | État                    | Commentaires |
+| ------------------------------------------------------------------------------------------------------------------ | ----------------------- | ------------ |
+| [Proposition pour `Intl.Locale`](https://tc39.github.io/proposal-intl-locale/#sec-Intl.Locale.prototype.caseFirst) | Proposition de niveau 3 |              |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Intl.Locale.caseFirst")}}
+
+## Voir aussi
+
+- {{jsxref("Locale", "Intl.Locale")}}
+- [Spécification Unicode pour la collation selon la casse](https://github.com/unicode-org/cldr/blob/master/common/bcp47/collation.xml#L49)
diff --git a/files/fr/web/javascript/reference/global_objects/intl/locale/collation/index.html b/files/fr/web/javascript/reference/global_objects/intl/locale/collation/index.html
deleted file mode 100644
index fe261c15a3..0000000000
--- a/files/fr/web/javascript/reference/global_objects/intl/locale/collation/index.html
+++ /dev/null
@@ -1,166 +0,0 @@
----
-title: Intl.Locale.prototype.collation
-slug: Web/JavaScript/Reference/Global_Objects/Intl/Locale/collation
-tags:
-  - Internationalisation
-  - Intl
-  - JavaScript
-  - Locale
-  - Propriété
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Intl/Locale/collation
-original_slug: Web/JavaScript/Reference/Objets_globaux/Intl/Locale/collation
----
-<div>{{JSRef}}</div>
-
-<p>La propriété <strong><code>Intl.Locale.prototype.collation</code></strong> est une propriété (à laquelle on accède via un accesseur) qui renvoie le <a href="https://www.unicode.org/reports/tr35/tr35-collation.html#CLDR_Collation">type de collation</a> pour l'instance de <code>Locale</code> courante. La collation est la méthode qui permet d'ordonner des chaînes de caractères en fonction des règles de la locale.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>La collation est la façon dont les chaînes de caractères sont ordonnées. Elle est utilisée lorsqu'on doit trier des chaînes de caractères (des résultats de recherche, des enregistrements dans une base de donnée, etc.). Bien que cela puisse sembler trivial, la collation varie d'une région à l'autre et d'une langue à une autre. Cette propriété permet aux développeurs de connaître le type de collation pour une locale donnée.</p>
-
-<p>Voici un tableau listant les types de collation possibles tels que définis dans <a href="https://github.com/unicode-org/cldr/blob/2dd06669d833823e26872f249aa304bc9d9d2a90/common/bcp47/collation.xml">la spécification Unicode sur la collation</a>.</p>
-
-<table class="standard-table">
- <caption>Les différents types de collation</caption>
- <thead>
-  <tr>
-   <th scope="col">Type de collation</th>
-   <th scope="col">Description</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><code>big5han</code></td>
-   <td>Ordre pinyin pour l'alphabet latin et ordre big5 pour les caractères CJK (utilisés en chinois)</td>
-  </tr>
-  <tr>
-   <td><code>compat</code></td>
-   <td>Une version précédente de l'ordre, utilisée à des fins de compatibilité</td>
-  </tr>
-  <tr>
-   <td><code>dict</code></td>
-   <td>Ordre à la façon d'un dictionnaire (comme utilisé en cingalais)</td>
-  </tr>
-  <tr>
-   <td>
-    <div class="warning">
-    <p><strong>Attention :</strong> Le type <code>direct</code> a été déprécié et ne doit pas être utilisé.</p>
-    </div>
-
-    <p><code>direct</code></p>
-   </td>
-   <td>Ordre des points de code binaires (utilisé en hindoux)</td>
-  </tr>
-  <tr>
-   <td><code>ducet</code></td>
-   <td>La collation Unicode par défaut pour les éléments d'un tableau</td>
-  </tr>
-  <tr>
-   <td><code>emoji</code></td>
-   <td>L'ordre recommandé pour les émojis</td>
-  </tr>
-  <tr>
-   <td><code>eor</code></td>
-   <td>Règles d'ordre européennes</td>
-  </tr>
-  <tr>
-   <td><code>gb2312</code></td>
-   <td>Ordre pinyin pour l'alphabet latin et ordre gb2312han pour les caractères CJK (utilisés en chinois)</td>
-  </tr>
-  <tr>
-   <td><code>phonebk</code></td>
-   <td>Ordre à la façon d'un annuaire (tel qu'en allemand)</td>
-  </tr>
-  <tr>
-   <td><code>phonetic</code></td>
-   <td>Ordre phonétique, basé sur la prononciation</td>
-  </tr>
-  <tr>
-   <td><code>pinyin</code></td>
-   <td>Ordre pinyin pour les caractères de l'alphabet latin et les caractères CJK (utilisés en chniois)</td>
-  </tr>
-  <tr>
-   <td><code>reformed</code></td>
-   <td>Ordre réformé (tel qu'en suédois)</td>
-  </tr>
-  <tr>
-   <td><code>search</code></td>
-   <td>Collation spéciale pour les chaînes de caractères utilisées pour des recherches</td>
-  </tr>
-  <tr>
-   <td><code>searchjl</code></td>
-   <td>Collation spéciale pour la recherche des consonnes initiales en coréen</td>
-  </tr>
-  <tr>
-   <td><code>standard</code></td>
-   <td>L'ordre par défaut pour chaque langue</td>
-  </tr>
-  <tr>
-   <td><code>stroke</code></td>
-   <td>Ordre pinyin pour l'alphabet latin et ordre de dessin (<em>stroke</em>) pour les caractères CJK (utilisés en chinois)</td>
-  </tr>
-  <tr>
-   <td><code>trad</code></td>
-   <td>Ordre traditionnel (tel qu'en espagnol)</td>
-  </tr>
-  <tr>
-   <td><code>unihan</code></td>
-   <td>Ordre pinyin pour l'alphabet latin et ordre Unihan radical pour les caractères CJK (utilisés en chinois)</td>
-  </tr>
-  <tr>
-   <td><code>zhuyin</code></td>
-   <td>
-    <p>Ordre pinyin pour l'alphabet latin, ordre zhuyin pour les caractères Bopomofo et CJK (utilisés en chinois)</p>
-   </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Exemples">Exemples</h2>
-
-<p>À l'instar des autres étiquettes, le type de collation peut être défini pour l'objet {{jsxref("Locale", "Intl.Locale")}} via la chaîne de caractères qui définit la locale ou grâce au deuxième paramètre du constructeur qui est un objet de configuration.</p>
-
-<h3 id="Définir_le_type_de_collation_via_la_chaîne_décrivant_la_locale">Définir le type de collation via la chaîne décrivant la locale</h3>
-
-<p>Le premier argument passé à <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Locale" title="The Intl.Locale constructor is a standard built-in property of the Intl object."><code>Intl.Locale</code></a> est une chaîne de caractères qui décrit la locale. Cette chaîne peut contenir des fragments additionnels (en plus de l'identifiant canonique de la locale). Pour cela, on ajoutera <code>-u</code> afin d'indiquer qu'on définit une extension. On ajoutera ensuite la clé identifiant cette extension, ici <code>-co</code> pour la collation. Enfin, on ajoutera la valeur souhaitée pour cette extension (dans cet exemple, <code>-emoji</code>) :</p>
-
-<pre class="brush: js">let stringColl = new Intl.Locale("en-Latn-US-u-co-emoji");
-console.log(stringColl.collation); // Affichera "emoji" dans la console
-</pre>
-
-<h3 id="Définir_le_type_de_collation_via_lobjet_de_configuration">Définir le type de collation via l'objet de configuration</h3>
-
-<p>Le constructeur <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Locale" title="The Intl.Locale constructor is a standard built-in property of the Intl object."><code>Intl.Locale</code></a> possède un deuxième argument optionnel qui est un objet de configuration. Chaque propriété de cet objet pourra permettre de préciser une extension à la locale, y compris un type de collation. Pour définir le type de collation, on pourra utiliser une propriété <code>collation</code> sur cet objet avec une des valeurs indiquées ci-avant :</p>
-
-<pre class="brush: js">let configColl = new Intl.Locale("en-Latn-US", {collation: "emoji"});
-console.log(configColl.collation); // Affichera "emoji" dans la console</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><a href="https://tc39.github.io/proposal-intl-locale/#sec-Intl.Locale.prototype.collation">Proposition pour <code>Intl.Locale.prototype.collation</code></a></td>
-   <td>Proposition de niveau 3</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Intl.Locale.collation")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Locale", "Intl.Locale")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/intl/locale/collation/index.md b/files/fr/web/javascript/reference/global_objects/intl/locale/collation/index.md
new file mode 100644
index 0000000000..3e856490ab
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/intl/locale/collation/index.md
@@ -0,0 +1,183 @@
+---
+title: Intl.Locale.prototype.collation
+slug: Web/JavaScript/Reference/Global_Objects/Intl/Locale/collation
+tags:
+  - Internationalisation
+  - Intl
+  - JavaScript
+  - Locale
+  - Propriété
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Intl/Locale/collation
+original_slug: Web/JavaScript/Reference/Objets_globaux/Intl/Locale/collation
+---
+{{JSRef}}
+
+La propriété **`Intl.Locale.prototype.collation`** est une propriété (à laquelle on accède via un accesseur) qui renvoie le [type de collation](https://www.unicode.org/reports/tr35/tr35-collation.html#CLDR_Collation) pour l'instance de `Locale` courante. La collation est la méthode qui permet d'ordonner des chaînes de caractères en fonction des règles de la locale.
+
+## Description
+
+La collation est la façon dont les chaînes de caractères sont ordonnées. Elle est utilisée lorsqu'on doit trier des chaînes de caractères (des résultats de recherche, des enregistrements dans une base de donnée, etc.). Bien que cela puisse sembler trivial, la collation varie d'une région à l'autre et d'une langue à une autre. Cette propriété permet aux développeurs de connaître le type de collation pour une locale donnée.
+
+Voici un tableau listant les types de collation possibles tels que définis dans [la spécification Unicode sur la collation](https://github.com/unicode-org/cldr/blob/2dd06669d833823e26872f249aa304bc9d9d2a90/common/bcp47/collation.xml).
+
+<table class="standard-table">
+  <caption>
+    Les différents types de collation
+  </caption>
+  <thead>
+    <tr>
+      <th scope="col">Type de collation</th>
+      <th scope="col">Description</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td><code>big5han</code></td>
+      <td>
+        Ordre pinyin pour l'alphabet latin et ordre big5 pour les caractères CJK
+        (utilisés en chinois)
+      </td>
+    </tr>
+    <tr>
+      <td><code>compat</code></td>
+      <td>
+        Une version précédente de l'ordre, utilisée à des fins de compatibilité
+      </td>
+    </tr>
+    <tr>
+      <td><code>dict</code></td>
+      <td>Ordre à la façon d'un dictionnaire (comme utilisé en cingalais)</td>
+    </tr>
+    <tr>
+      <td>
+        <div class="warning">
+          <p>
+            <strong>Attention :</strong> Le type <code>direct</code> a été
+            déprécié et ne doit pas être utilisé.
+          </p>
+        </div>
+        <p><code>direct</code></p>
+      </td>
+      <td>Ordre des points de code binaires (utilisé en hindoux)</td>
+    </tr>
+    <tr>
+      <td><code>ducet</code></td>
+      <td>La collation Unicode par défaut pour les éléments d'un tableau</td>
+    </tr>
+    <tr>
+      <td><code>emoji</code></td>
+      <td>L'ordre recommandé pour les émojis</td>
+    </tr>
+    <tr>
+      <td><code>eor</code></td>
+      <td>Règles d'ordre européennes</td>
+    </tr>
+    <tr>
+      <td><code>gb2312</code></td>
+      <td>
+        Ordre pinyin pour l'alphabet latin et ordre gb2312han pour les
+        caractères CJK (utilisés en chinois)
+      </td>
+    </tr>
+    <tr>
+      <td><code>phonebk</code></td>
+      <td>Ordre à la façon d'un annuaire (tel qu'en allemand)</td>
+    </tr>
+    <tr>
+      <td><code>phonetic</code></td>
+      <td>Ordre phonétique, basé sur la prononciation</td>
+    </tr>
+    <tr>
+      <td><code>pinyin</code></td>
+      <td>
+        Ordre pinyin pour les caractères de l'alphabet latin et les caractères
+        CJK (utilisés en chniois)
+      </td>
+    </tr>
+    <tr>
+      <td><code>reformed</code></td>
+      <td>Ordre réformé (tel qu'en suédois)</td>
+    </tr>
+    <tr>
+      <td><code>search</code></td>
+      <td>
+        Collation spéciale pour les chaînes de caractères utilisées pour des
+        recherches
+      </td>
+    </tr>
+    <tr>
+      <td><code>searchjl</code></td>
+      <td>
+        Collation spéciale pour la recherche des consonnes initiales en coréen
+      </td>
+    </tr>
+    <tr>
+      <td><code>standard</code></td>
+      <td>L'ordre par défaut pour chaque langue</td>
+    </tr>
+    <tr>
+      <td><code>stroke</code></td>
+      <td>
+        Ordre pinyin pour l'alphabet latin et ordre de dessin (<em>stroke</em>)
+        pour les caractères CJK (utilisés en chinois)
+      </td>
+    </tr>
+    <tr>
+      <td><code>trad</code></td>
+      <td>Ordre traditionnel (tel qu'en espagnol)</td>
+    </tr>
+    <tr>
+      <td><code>unihan</code></td>
+      <td>
+        Ordre pinyin pour l'alphabet latin et ordre Unihan radical pour les
+        caractères CJK (utilisés en chinois)
+      </td>
+    </tr>
+    <tr>
+      <td><code>zhuyin</code></td>
+      <td>
+        <p>
+          Ordre pinyin pour l'alphabet latin, ordre zhuyin pour les caractères
+          Bopomofo et CJK (utilisés en chinois)
+        </p>
+      </td>
+    </tr>
+  </tbody>
+</table>
+
+## Exemples
+
+À l'instar des autres étiquettes, le type de collation peut être défini pour l'objet {{jsxref("Locale", "Intl.Locale")}} via la chaîne de caractères qui définit la locale ou grâce au deuxième paramètre du constructeur qui est un objet de configuration.
+
+### Définir le type de collation via la chaîne décrivant la locale
+
+Le premier argument passé à [`Intl.Locale`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Locale "The Intl.Locale constructor is a standard built-in property of the Intl object.") est une chaîne de caractères qui décrit la locale. Cette chaîne peut contenir des fragments additionnels (en plus de l'identifiant canonique de la locale). Pour cela, on ajoutera `-u` afin d'indiquer qu'on définit une extension. On ajoutera ensuite la clé identifiant cette extension, ici `-co` pour la collation. Enfin, on ajoutera la valeur souhaitée pour cette extension (dans cet exemple, `-emoji`) :
+
+```js
+let stringColl = new Intl.Locale("en-Latn-US-u-co-emoji");
+console.log(stringColl.collation); // Affichera "emoji" dans la console
+```
+
+### Définir le type de collation via l'objet de configuration
+
+Le constructeur [`Intl.Locale`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Locale "The Intl.Locale constructor is a standard built-in property of the Intl object.") possède un deuxième argument optionnel qui est un objet de configuration. Chaque propriété de cet objet pourra permettre de préciser une extension à la locale, y compris un type de collation. Pour définir le type de collation, on pourra utiliser une propriété `collation` sur cet objet avec une des valeurs indiquées ci-avant :
+
+```js
+let configColl = new Intl.Locale("en-Latn-US", {collation: "emoji"});
+console.log(configColl.collation); // Affichera "emoji" dans la console
+```
+
+## Spécifications
+
+| Spécification                                                                                                                          | État                    | Commentaires |
+| -------------------------------------------------------------------------------------------------------------------------------------- | ----------------------- | ------------ |
+| [Proposition pour `Intl.Locale.prototype.collation`](https://tc39.github.io/proposal-intl-locale/#sec-Intl.Locale.prototype.collation) | Proposition de niveau 3 |              |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Intl.Locale.collation")}}
+
+## Voir aussi
+
+- {{jsxref("Locale", "Intl.Locale")}}
diff --git a/files/fr/web/javascript/reference/global_objects/intl/locale/hourcycle/index.html b/files/fr/web/javascript/reference/global_objects/intl/locale/hourcycle/index.html
deleted file mode 100644
index c46c209435..0000000000
--- a/files/fr/web/javascript/reference/global_objects/intl/locale/hourcycle/index.html
+++ /dev/null
@@ -1,94 +0,0 @@
----
-title: Intl.Locale.prototype.hourCycle
-slug: Web/JavaScript/Reference/Global_Objects/Intl/Locale/hourCycle
-tags:
-  - Internationalisation
-  - Intl
-  - JavaScript
-  - Locale
-  - Propriété
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Intl/Locale/hourCycle
-original_slug: Web/JavaScript/Reference/Objets_globaux/Intl/Locale/hourCycle
----
-<div>{{JSRef}}</div>
-
-<p>La propriété <strong><code>Intl.Locale.prototype.hourCycle</code></strong> est une propriété accessible via un accesseur qui renvoie la convention pour le format des heures utilisée par la locale courante.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>Il existe deux types de conventions pour la représentation des heures : sur douze heures d'une part et sur vingt-quatre heures d'autre part. La propriété <code>hourCycle</code> permet aux développeurs de connaître la représentation utilisée par une locale donnée. À l'instar des autres données fournies par les instances de <code>Locale</code>, <code>hourCycle</code> représente une <a href="https://www.unicode.org/reports/tr35/#u_Extension">extension Unicode</a> qui permet d'affiner le comportement d'une locale. Les valeurs de cette propriété/extension peuvent être :</p>
-
-<table class="standard-table">
- <caption>Valeurs possibles pour l'extension <code>hourCycle</code></caption>
- <thead>
-  <tr>
-   <th scope="col">Clé</th>
-   <th scope="col">Description</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><code>h12</code></td>
-   <td>Système horaire sur les heures 1 à 12 (correspond à la notation "h" pour les motifs de recherche). L'horloge est sur douze heures et minuit commence à 12:00 AM.</td>
-  </tr>
-  <tr>
-   <td><code>h23</code></td>
-   <td>Système horaire sur les heures 0 à 23 (correspond à la notation "H" pour les motifs de recherche). L'horloge est sur vingt-quatre heures et minuit commence à 0:00.</td>
-  </tr>
-  <tr>
-   <td><code>h11</code></td>
-   <td>Système horaire sur les heures 0 à 11 (correspond à la notation "K" pour les motifs de recherche). L'horloge est sur douze heures et minuit commence à 0:00 AM.</td>
-  </tr>
-  <tr>
-   <td><code>h24</code></td>
-   <td>Système horaire sur les heures 1 à 24 (correspond à la notation "K" pour les motifs de recherche). L'horloge est sur vingt-quatre heures et minuit commence à 24:00.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Définir_le_format_horaire_grâce_à_la_chaîne_décrivant_la_locale">Définir le format horaire grâce à la chaîne décrivant la locale</h3>
-
-<p>Il est possible de préciser la valeur d'une extension Unicode dans la chaîne de caractères représentant la locale. Pour indiquer l'extension, on ajoutera le suffixe <code>-u</code> qui indique une clé d'extension à venir, ensuite on ajoutera la clé de l'extension en question (ici <code>-hc</code>) et enfin on ajoutera la valeur souhaitée pour cette extension.</p>
-
-<pre class="brush: js">let fr24hour = new Intl.Locale("fr-FR-u-hc-h23");
-console.log(fr24hour.hourCycle); // Affichera "h23" dans la console</pre>
-
-<h3 id="Définir_le_format_horaire_grâce_à_un_objet_de_configuration">Définir le format horaire grâce à un objet de configuration</h3>
-
-<p>Le constructeur <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Locale" title="The Intl.Locale constructor is a standard built-in property of the Intl object."><code>Intl.Locale</code></a> permet d'utiliser un objet de configuration comme deuxième argument. Les propriétés de cet objet permettent de définir différentes extensions, y compris celle pour le format horaire. Pour cela, on indiquera la propriété <code>hourCycle</code> sur l'objet de configuration avec la valeur souhaitée et on passera cet objet au constructeur.</p>
-
-<pre class="brush: js">let us12hour = new Intl.Locale("en-US-u-hc-h12");
-console.log(us12hour.hourCycle); // Affichera "h12" dans la console</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><a href="https://tc39.github.io/proposal-intl-locale/#sec-Intl.Locale.prototype.hourCycle">Proposition pour <code>Intl.Locale</code></a></td>
-   <td>Proposition de niveau 3</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<div>{{Compat("javascript.builtins.Intl.Locale.hourCycle")}}</div>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Locale", "Intl.Locale")}}</li>
- <li><a href="https://www.unicode.org/reports/tr35/#UnicodeHourCycleIdentifier">Spécification pour l'extension Unicode des cycles horaires</a></li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/intl/locale/hourcycle/index.md b/files/fr/web/javascript/reference/global_objects/intl/locale/hourcycle/index.md
new file mode 100644
index 0000000000..14cb734a56
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/intl/locale/hourcycle/index.md
@@ -0,0 +1,62 @@
+---
+title: Intl.Locale.prototype.hourCycle
+slug: Web/JavaScript/Reference/Global_Objects/Intl/Locale/hourCycle
+tags:
+  - Internationalisation
+  - Intl
+  - JavaScript
+  - Locale
+  - Propriété
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Intl/Locale/hourCycle
+original_slug: Web/JavaScript/Reference/Objets_globaux/Intl/Locale/hourCycle
+---
+{{JSRef}}
+
+La propriété **`Intl.Locale.prototype.hourCycle`** est une propriété accessible via un accesseur qui renvoie la convention pour le format des heures utilisée par la locale courante.
+
+## Description
+
+Il existe deux types de conventions pour la représentation des heures : sur douze heures d'une part et sur vingt-quatre heures d'autre part. La propriété `hourCycle` permet aux développeurs de connaître la représentation utilisée par une locale donnée. À l'instar des autres données fournies par les instances de `Locale`, `hourCycle` représente une [extension Unicode](https://www.unicode.org/reports/tr35/#u_Extension) qui permet d'affiner le comportement d'une locale. Les valeurs de cette propriété/extension peuvent être :
+
+| Clé   | Description                                                                                                                                                          |
+| ----- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `h12` | Système horaire sur les heures 1 à 12 (correspond à la notation "h" pour les motifs de recherche). L'horloge est sur douze heures et minuit commence à 12:00 AM.     |
+| `h23` | Système horaire sur les heures 0 à 23 (correspond à la notation "H" pour les motifs de recherche). L'horloge est sur vingt-quatre heures et minuit commence à 0:00.  |
+| `h11` | Système horaire sur les heures 0 à 11 (correspond à la notation "K" pour les motifs de recherche). L'horloge est sur douze heures et minuit commence à 0:00 AM.      |
+| `h24` | Système horaire sur les heures 1 à 24 (correspond à la notation "K" pour les motifs de recherche). L'horloge est sur vingt-quatre heures et minuit commence à 24:00. |
+
+## Exemples
+
+### Définir le format horaire grâce à la chaîne décrivant la locale
+
+Il est possible de préciser la valeur d'une extension Unicode dans la chaîne de caractères représentant la locale. Pour indiquer l'extension, on ajoutera le suffixe `-u` qui indique une clé d'extension à venir, ensuite on ajoutera la clé de l'extension en question (ici `-hc`) et enfin on ajoutera la valeur souhaitée pour cette extension.
+
+```js
+let fr24hour = new Intl.Locale("fr-FR-u-hc-h23");
+console.log(fr24hour.hourCycle); // Affichera "h23" dans la console
+```
+
+### Définir le format horaire grâce à un objet de configuration
+
+Le constructeur [`Intl.Locale`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Locale "The Intl.Locale constructor is a standard built-in property of the Intl object.") permet d'utiliser un objet de configuration comme deuxième argument. Les propriétés de cet objet permettent de définir différentes extensions, y compris celle pour le format horaire. Pour cela, on indiquera la propriété `hourCycle` sur l'objet de configuration avec la valeur souhaitée et on passera cet objet au constructeur.
+
+```js
+let us12hour = new Intl.Locale("en-US-u-hc-h12");
+console.log(us12hour.hourCycle); // Affichera "h12" dans la console
+```
+
+## Spécifications
+
+| Spécification                                                                                                      | État                    | Commentaires |
+| ------------------------------------------------------------------------------------------------------------------ | ----------------------- | ------------ |
+| [Proposition pour `Intl.Locale`](https://tc39.github.io/proposal-intl-locale/#sec-Intl.Locale.prototype.hourCycle) | Proposition de niveau 3 |              |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Intl.Locale.hourCycle")}}
+
+## Voir aussi
+
+- {{jsxref("Locale", "Intl.Locale")}}
+- [Spécification pour l'extension Unicode des cycles horaires](https://www.unicode.org/reports/tr35/#UnicodeHourCycleIdentifier)
diff --git a/files/fr/web/javascript/reference/global_objects/intl/locale/index.html b/files/fr/web/javascript/reference/global_objects/intl/locale/index.html
deleted file mode 100644
index 07608fd53c..0000000000
--- a/files/fr/web/javascript/reference/global_objects/intl/locale/index.html
+++ /dev/null
@@ -1,71 +0,0 @@
----
-title: Intl.Locale
-slug: Web/JavaScript/Reference/Global_Objects/Intl/Locale
-tags:
-  - Constructeur
-  - Intl
-  - JavaScript
-  - Méthode
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Intl/Locale
-original_slug: Web/JavaScript/Reference/Objets_globaux/Intl/Locale
----
-<div>{{JSRef}}{{SeeCompatTable}}</div>
-
-<p>Le constructeur <strong><code>Intl.Locale</code></strong> est une propriété native de l'objet <code>Intl</code> représentant l'identifiant d'une locale Unicode.</p>
-
-<p>{{EmbedInteractiveExample("pages/js/intl-locale.html")}}</p>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">new Intl.Locale([<var>tag</var>[, <var>options</var>]])</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>tag</code></dt>
- <dd>La chaîne de caractère représentant l'identifiant d'une locale Unicode.</dd>
- <dt><code>options</code></dt>
- <dd>Un objet contenant la configuration pour la locale. Les clés (noms des propriétés) de cet objets sont des balises Unicode et les valeurs de ces propriétés doivent être des valeurs de balises Unicode valides.</dd>
-</dl>
-
-<h2 id="Description">Description</h2>
-
-<p>L'objet <code>Intl.locale</code> a été conçu afin de manipuler des locales Unicode. Les locales Unicode sont représentées par une chaîne de caractères qu'on appelle « identifiant de locale ». L'identifant de locale se compose d'un identifiant de langue et d'extensions. Les identifiants de langue sont la composante principale d'une locale et contiennent une langue, un système d'écriture et des extensions régionales. Les informations complémentaires sont stockées via les extensions. Ces extensions peuvent fournir des informations quant au type de calendrier utilisé, le format d'heure utilisé ou la numération utilisée.</p>
-
-<p>L'objet <code>Intl.Locale</code> possède les propriétés et méthodes suivantes.</p>
-
-<h3 id="Propriétés">Propriétés</h3>
-
-<dl>
- <dt>{{jsxref("Locale.prototype","Intl.Locale.prototype")}}</dt>
- <dd>Le prototype pour le constructeur <code>Locale</code>.</dd>
-</dl>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td><a href="https://tc39.github.io/proposal-intl-locale/#locale-objects">Proposition pour <code>Intl.Locale</code></a></td>
-   <td>Proposition de niveau 3</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Intl.Locale")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="https://github.com/zbraniecki/Intl.js/tree/intllocale">La prothèse d'émulation (<em>polyfill</em>) pour <code>Intl.Locale</code></a></li>
- <li><a href="https://www.unicode.org/reports/tr35/#Canonical_Unicode_Locale_Identifiers">La spécification Unicode pour les identifiants de locale</a></li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/intl/locale/index.md b/files/fr/web/javascript/reference/global_objects/intl/locale/index.md
new file mode 100644
index 0000000000..95dbb3bc0d
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/intl/locale/index.md
@@ -0,0 +1,54 @@
+---
+title: Intl.Locale
+slug: Web/JavaScript/Reference/Global_Objects/Intl/Locale
+tags:
+  - Constructeur
+  - Intl
+  - JavaScript
+  - Méthode
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Intl/Locale
+original_slug: Web/JavaScript/Reference/Objets_globaux/Intl/Locale
+---
+{{JSRef}}{{SeeCompatTable}}
+
+Le constructeur **`Intl.Locale`** est une propriété native de l'objet `Intl` représentant l'identifiant d'une locale Unicode.
+
+{{EmbedInteractiveExample("pages/js/intl-locale.html")}}
+
+## Syntaxe
+
+    new Intl.Locale([tag[, options]])
+
+### Paramètres
+
+- `tag`
+  - : La chaîne de caractère représentant l'identifiant d'une locale Unicode.
+- `options`
+  - : Un objet contenant la configuration pour la locale. Les clés (noms des propriétés) de cet objets sont des balises Unicode et les valeurs de ces propriétés doivent être des valeurs de balises Unicode valides.
+
+## Description
+
+L'objet `Intl.locale` a été conçu afin de manipuler des locales Unicode. Les locales Unicode sont représentées par une chaîne de caractères qu'on appelle « identifiant de locale ». L'identifant de locale se compose d'un identifiant de langue et d'extensions. Les identifiants de langue sont la composante principale d'une locale et contiennent une langue, un système d'écriture et des extensions régionales. Les informations complémentaires sont stockées via les extensions. Ces extensions peuvent fournir des informations quant au type de calendrier utilisé, le format d'heure utilisé ou la numération utilisée.
+
+L'objet `Intl.Locale` possède les propriétés et méthodes suivantes.
+
+### Propriétés
+
+- {{jsxref("Locale.prototype","Intl.Locale.prototype")}}
+  - : Le prototype pour le constructeur `Locale`.
+
+## Spécifications
+
+| Spécification                                                                                 | État                    | Commentaires |
+| --------------------------------------------------------------------------------------------- | ----------------------- | ------------ |
+| [Proposition pour `Intl.Locale`](https://tc39.github.io/proposal-intl-locale/#locale-objects) | Proposition de niveau 3 |              |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Intl.Locale")}}
+
+## Voir aussi
+
+- [La prothèse d'émulation (_polyfill_) pour `Intl.Locale`](https://github.com/zbraniecki/Intl.js/tree/intllocale)
+- [La spécification Unicode pour les identifiants de locale](https://www.unicode.org/reports/tr35/#Canonical_Unicode_Locale_Identifiers)
diff --git a/files/fr/web/javascript/reference/global_objects/intl/locale/language/index.html b/files/fr/web/javascript/reference/global_objects/intl/locale/language/index.html
deleted file mode 100644
index 4fe3adfb90..0000000000
--- a/files/fr/web/javascript/reference/global_objects/intl/locale/language/index.html
+++ /dev/null
@@ -1,68 +0,0 @@
----
-title: Intl.Locale.prototype.language
-slug: Web/JavaScript/Reference/Global_Objects/Intl/Locale/language
-tags:
-  - Internationalisation
-  - Intl
-  - JavaScript
-  - Locale
-  - Propriété
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Intl/Locale/language
-original_slug: Web/JavaScript/Reference/Objets_globaux/Intl/Locale/language
----
-<div>{{JSRef}}</div>
-
-<p>La propriété <strong><code>Intl.Locale.prototype.language</code></strong> est une propriété fournie via un accesseur qui renvoie la langue associée à la locale.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>La langue est l'une des caractéristiques majeurs d'une locale. La spécification Unicode indique que l'identifiant de la langue d'une locale est composée de l'identifiant canonique de la langue et de l'identifiant de la réponse (on pourra ainsi distinguer l'anglais britannique de l'anglais américain). Toutefois, la propriété <code>language</code> de {{jsxref("Locale", "Locale")}} renvoie uniquement la composante relative à la langue.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Indiquer_la_langue_via_la_chaîne_décrivant_la_locale">Indiquer la langue via la chaîne décrivant la locale</h3>
-
-<p>Afin de pouvoir représenter une locale Unicode correctement, une chaîne doit commencer par un identifiant de langue. Le principal argument du constructeur {{jsxref("Locale", "Locale")}} doit être un identifiant valide et doit donc contenir la composante liée à la langue.</p>
-
-<pre class="brush: js">let langStr = new Intl.Locale("en-Latn-US");
-
-console.log(langStr.language); // Affichera "en" dans la console</pre>
-
-<h3 id="Surcharger_la_langue_via_lobjet_de_configuration">Surcharger la langue via l'objet de configuration</h3>
-
-<p>Bien que la composante de la langue doive être indiquée dans le premier paramètre, le constructeur {{jsxref("Locale", "Locale")}} prend comme deuxième argument un objet de configuration qui permet de surcharger cette composante.</p>
-
-<pre class="brush: js">let langObj = new Intl.Locale("en-Latn-US", {language: "es"});
-
-console.log(langObj.language); // Affichera "es" dans la console</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><a href="https://tc39.github.io/proposal-intl-locale/#sec-Intl.Locale.prototype.language">Proposition pour <code>Intl.Locale.prototype.language</code></a></td>
-   <td>Proposition de niveau 3</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<div>{{Compat("javascript.builtins.Intl.Locale.language")}}</div>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Locale", "Locale")}}</li>
- <li><a href="https://www.unicode.org/reports/tr35/#unicode_language_subtag_validity">Spécification des extensions Unicode</a></li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/intl/locale/language/index.md b/files/fr/web/javascript/reference/global_objects/intl/locale/language/index.md
new file mode 100644
index 0000000000..c5e52123c9
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/intl/locale/language/index.md
@@ -0,0 +1,57 @@
+---
+title: Intl.Locale.prototype.language
+slug: Web/JavaScript/Reference/Global_Objects/Intl/Locale/language
+tags:
+  - Internationalisation
+  - Intl
+  - JavaScript
+  - Locale
+  - Propriété
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Intl/Locale/language
+original_slug: Web/JavaScript/Reference/Objets_globaux/Intl/Locale/language
+---
+{{JSRef}}
+
+La propriété **`Intl.Locale.prototype.language`** est une propriété fournie via un accesseur qui renvoie la langue associée à la locale.
+
+## Description
+
+La langue est l'une des caractéristiques majeurs d'une locale. La spécification Unicode indique que l'identifiant de la langue d'une locale est composée de l'identifiant canonique de la langue et de l'identifiant de la réponse (on pourra ainsi distinguer l'anglais britannique de l'anglais américain). Toutefois, la propriété `language` de {{jsxref("Locale", "Locale")}} renvoie uniquement la composante relative à la langue.
+
+## Exemples
+
+### Indiquer la langue via la chaîne décrivant la locale
+
+Afin de pouvoir représenter une locale Unicode correctement, une chaîne doit commencer par un identifiant de langue. Le principal argument du constructeur {{jsxref("Locale", "Locale")}} doit être un identifiant valide et doit donc contenir la composante liée à la langue.
+
+```js
+let langStr = new Intl.Locale("en-Latn-US");
+
+console.log(langStr.language); // Affichera "en" dans la console
+```
+
+### Surcharger la langue via l'objet de configuration
+
+Bien que la composante de la langue doive être indiquée dans le premier paramètre, le constructeur {{jsxref("Locale", "Locale")}} prend comme deuxième argument un objet de configuration qui permet de surcharger cette composante.
+
+```js
+let langObj = new Intl.Locale("en-Latn-US", {language: "es"});
+
+console.log(langObj.language); // Affichera "es" dans la console
+```
+
+## Spécifications
+
+| Spécification                                                                                                                        | État                    | Commentaires |
+| ------------------------------------------------------------------------------------------------------------------------------------ | ----------------------- | ------------ |
+| [Proposition pour `Intl.Locale.prototype.language`](https://tc39.github.io/proposal-intl-locale/#sec-Intl.Locale.prototype.language) | Proposition de niveau 3 |              |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Intl.Locale.language")}}
+
+## Voir aussi
+
+- {{jsxref("Locale", "Locale")}}
+- [Spécification des extensions Unicode](https://www.unicode.org/reports/tr35/#unicode_language_subtag_validity)
diff --git a/files/fr/web/javascript/reference/global_objects/intl/locale/maximize/index.html b/files/fr/web/javascript/reference/global_objects/intl/locale/maximize/index.html
deleted file mode 100644
index 74411b818c..0000000000
--- a/files/fr/web/javascript/reference/global_objects/intl/locale/maximize/index.html
+++ /dev/null
@@ -1,75 +0,0 @@
----
-title: Intl.Locale.prototype.maximize()
-slug: Web/JavaScript/Reference/Global_Objects/Intl/Locale/maximize
-tags:
-  - Internationalisation
-  - Intl
-  - JavaScript
-  - Méthode
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Intl/Locale/maximize
-original_slug: Web/JavaScript/Reference/Objets_globaux/Intl/Locale/maximize
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <strong><code>Intl.Locale.prototype.maximize()</code></strong> permet d'obtenir les valeurs les plus vraisemblantes pour la langue, le script et la région de la locale en fonction des valeurs existantes.</p>
-
-<p>{{EmbedInteractiveExample("pages/js/intl-locale-prototype-maximize.html")}}</p>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><code><em>locale</em>.maximize()</code></pre>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Une instance {{jsxref("Locale", "Locale")}} dont la propriété <code>baseName</code> renvoie le résultat de l'algorithme de <a href="https://www.unicode.org/reports/tr35/#Likely_Subtags">vraisemblance des composantes</a> lancé sur <code><em>{{jsxref("Locale/baseName", "locale.baseName")}}</em></code>.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>Il est parfois utile d'identifier les composantes les plus probables d'une locale en fonction d'un identifiant incomplet. Cette méthode utilise un algorithme qui permet de déduire les composantes restantes les plus probables. Par exemple, si on fournit la langue <code>"en"</code>, l'algorithme renverra <code>"en-Latn-US"</code>, car l'anglais ne s'écrit qu'avec l'alphabet latin et est le plus largement parlé aux États-Unis. La méthode <code>maximize()</code> n'opère que sur les composantes principales (langue, script, région) et pas sur les extensions éventuellement indiquées après <code>"-u"</code> (dont <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Locale/hourCycle" title="The Intl.Locale.prototype.hourCycle property is an accessor property that returns the time keeping format convention used by the locale."><code>Locale.hourCycle</code></a>, <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Locale/calendar" title="The Intl.Locale.prototype.calendar property is an accessor property which returns the type of calendar used in the Locale."><code>Locale.calendar</code></a> et <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Locale/numeric" title="The Intl.Locale.prototype.numeric property is an accessor property that returns whether the locale has special collation handling for numeric characters."><code>Locale.numeric</code></a> entre autres).</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<pre class="brush: js">let maLocale = new Intl.Locale("fr", {hourCycle: "h24", calendar: "gregory"});
-console.log(maLocale.baseName); // Affiche "fr"
-console.log(maLocale.toString()); // Affiche "fr-u-ca-gregory-hc-h24"
-let maLocMaximized = maLocale.maximize();
-
-// Affiche "fr-Latn-FR". Les composantes "Latn" et "FR" ont été ajoutées
-// car le français ne s'écrit qu'avec l'alphabet latin et est plus probablement parlé en France.
-console.log(maLocMaximized.baseName);
-
-// Affiche "fr-Latn-FR-u-ca-gregory-hc-h24".
-// On notera que les extensions (après "-u") restent inchangées.
-console.log(myLocMaximized.toString()); </pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><a href="https://tc39.github.io/proposal-intl-locale/#sec-Intl.Locale.prototype.maximize">Proposition pour <code>Intl.Locale.prototype.maximize()</code></a></td>
-   <td></td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Intl.Locale.maximize")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Locale", "Intl.Locale")}}</li>
- <li>{{jsxref("Locale/baseName", "Locale.baseName")}}</li>
- <li><a href="https://www.unicode.org/reports/tr35/#Likely_Subtags">Spécification Unicode sur la vraisemblance entre composantes</a></li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/intl/locale/maximize/index.md b/files/fr/web/javascript/reference/global_objects/intl/locale/maximize/index.md
new file mode 100644
index 0000000000..f125b58901
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/intl/locale/maximize/index.md
@@ -0,0 +1,62 @@
+---
+title: Intl.Locale.prototype.maximize()
+slug: Web/JavaScript/Reference/Global_Objects/Intl/Locale/maximize
+tags:
+  - Internationalisation
+  - Intl
+  - JavaScript
+  - Méthode
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Intl/Locale/maximize
+original_slug: Web/JavaScript/Reference/Objets_globaux/Intl/Locale/maximize
+---
+{{JSRef}}
+
+La méthode **`Intl.Locale.prototype.maximize()`** permet d'obtenir les valeurs les plus vraisemblantes pour la langue, le script et la région de la locale en fonction des valeurs existantes.
+
+{{EmbedInteractiveExample("pages/js/intl-locale-prototype-maximize.html")}}
+
+## Syntaxe
+
+    locale.maximize()
+
+### Valeur de retour
+
+Une instance {{jsxref("Locale", "Locale")}} dont la propriété `baseName` renvoie le résultat de l'algorithme de [vraisemblance des composantes](https://www.unicode.org/reports/tr35/#Likely_Subtags) lancé sur `{{jsxref("Locale/baseName", "locale.baseName")}}`.
+
+## Description
+
+Il est parfois utile d'identifier les composantes les plus probables d'une locale en fonction d'un identifiant incomplet. Cette méthode utilise un algorithme qui permet de déduire les composantes restantes les plus probables. Par exemple, si on fournit la langue `"en"`, l'algorithme renverra `"en-Latn-US"`, car l'anglais ne s'écrit qu'avec l'alphabet latin et est le plus largement parlé aux États-Unis. La méthode `maximize()` n'opère que sur les composantes principales (langue, script, région) et pas sur les extensions éventuellement indiquées après `"-u"` (dont [`Locale.hourCycle`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Locale/hourCycle "The Intl.Locale.prototype.hourCycle property is an accessor property that returns the time keeping format convention used by the locale."), [`Locale.calendar`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Locale/calendar "The Intl.Locale.prototype.calendar property is an accessor property which returns the type of calendar used in the Locale.") et [`Locale.numeric`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Locale/numeric "The Intl.Locale.prototype.numeric property is an accessor property that returns whether the locale has special collation handling for numeric characters.") entre autres).
+
+## Exemples
+
+```js
+let maLocale = new Intl.Locale("fr", {hourCycle: "h24", calendar: "gregory"});
+console.log(maLocale.baseName); // Affiche "fr"
+console.log(maLocale.toString()); // Affiche "fr-u-ca-gregory-hc-h24"
+let maLocMaximized = maLocale.maximize();
+
+// Affiche "fr-Latn-FR". Les composantes "Latn" et "FR" ont été ajoutées
+// car le français ne s'écrit qu'avec l'alphabet latin et est plus probablement parlé en France.
+console.log(maLocMaximized.baseName);
+
+// Affiche "fr-Latn-FR-u-ca-gregory-hc-h24".
+// On notera que les extensions (après "-u") restent inchangées.
+console.log(myLocMaximized.toString()); 
+```
+
+## Spécifications
+
+| Spécification                                                                                                                          | État | Commentaires |
+| -------------------------------------------------------------------------------------------------------------------------------------- | ---- | ------------ |
+| [Proposition pour `Intl.Locale.prototype.maximize()`](https://tc39.github.io/proposal-intl-locale/#sec-Intl.Locale.prototype.maximize) |      |              |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Intl.Locale.maximize")}}
+
+## Voir aussi
+
+- {{jsxref("Locale", "Intl.Locale")}}
+- {{jsxref("Locale/baseName", "Locale.baseName")}}
+- [Spécification Unicode sur la vraisemblance entre composantes](https://www.unicode.org/reports/tr35/#Likely_Subtags)
diff --git a/files/fr/web/javascript/reference/global_objects/intl/locale/minimize/index.html b/files/fr/web/javascript/reference/global_objects/intl/locale/minimize/index.html
deleted file mode 100644
index 78de1ee9b5..0000000000
--- a/files/fr/web/javascript/reference/global_objects/intl/locale/minimize/index.html
+++ /dev/null
@@ -1,77 +0,0 @@
----
-title: Intl.Locale.prototype.minimize()
-slug: Web/JavaScript/Reference/Global_Objects/Intl/Locale/minimize
-tags:
-  - Internationalisation
-  - Intl
-  - JavaScript
-  - Locale
-  - Méthode
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Intl/Locale/minimize
-original_slug: Web/JavaScript/Reference/Objets_globaux/Intl/Locale/minimize
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <strong><code>Intl.Locale.prototype.minimize()</code></strong> tente de retirer les informations qui auraient pu être ajoutée à une locale lors d'un appel à {{jsxref("Locale/maximize", "Locale.maximize()")}}.</p>
-
-<p>{{EmbedInteractiveExample("pages/js/intl-locale-prototype-minimize.html")}}</p>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><code><em>locale</em>.minimize()</code></pre>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Une instance {{jsxref("Locale", "Locale")}} dont la propriété <code>baseName</code> renvoie le résultat de l'exécution de <a href="https://www.unicode.org/reports/tr35/#Likely_Subtags">l'algorithme de suppression des composantes probables</a> sur <code><em>locale.baseName</em></code>. </p>
-
-<h2 id="Description">Description</h2>
-
-<p>Cette méthode effectue l'opération inverse de {{jsxref("Locale/maximize", "maximize()")}}, en retirant les fragments de langue/script ou de région qui sont superflus. Ainsi, <code>"en-Latn"</code> pourra être minimisé en <code>"en"</code> car l'anglais s'écrit uniquement à l'aide de l'alphabet latin.</p>
-
-<p><code>minimize()</code> ne modifie pas les éventuelles extensions décrites dans la chaîne de locale (après le <code>"-u"</code>) ou via l'objet de configuration (elle ne modifie donc pas les valeurs de {{jsxref("Locale/hourCycle", "Locale.hourCycle")}}, {{jsxref("Locale/calendar", "Locale.calendar")}} et {{jsxref("Locale/numeric", "Locale.numeric")}}).</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<pre class="brush: js">let maLocale = new Intl.Locale("fr-Latn-FR", {hourCycle: "h24", calendar: "gregory"});
-console.log(maLocale.baseName); // Affiche "fr-Latn-FR"
-console.log(maLocale.toString()); // Affiche "fr-Latn-FR-u-ca-gregory-hc-h24"
-let maLocMinimized = maLocale.minimize();
-
-console.log(maLocMinimized.baseName);
-// Affiche "fr" car le français est écrit uniquement avec l'alphabet latin et
-// parlé le plus largement en France
-
-console.log(maLocMinimized.toString());
-// Affiche "fr-u-ca-gregory-hc-h24". On voit ici que les extensions
-// (décrites après "-u") restent inchangées.</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><a href="https://tc39.github.io/proposal-intl-locale/#sec-Intl.Locale.prototype.minimize">Proposition pour <code>Intl.Locale.prototype.minimize()</code></a></td>
-   <td></td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Intl.Locale.minimize")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Locale", "Intl.Locale")}}</li>
- <li>{{jsxref("Locale/baseName", "Intl.Locale.baseName")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/intl/locale/minimize/index.md b/files/fr/web/javascript/reference/global_objects/intl/locale/minimize/index.md
new file mode 100644
index 0000000000..47b6aa48f0
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/intl/locale/minimize/index.md
@@ -0,0 +1,64 @@
+---
+title: Intl.Locale.prototype.minimize()
+slug: Web/JavaScript/Reference/Global_Objects/Intl/Locale/minimize
+tags:
+  - Internationalisation
+  - Intl
+  - JavaScript
+  - Locale
+  - Méthode
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Intl/Locale/minimize
+original_slug: Web/JavaScript/Reference/Objets_globaux/Intl/Locale/minimize
+---
+{{JSRef}}
+
+La méthode **`Intl.Locale.prototype.minimize()`** tente de retirer les informations qui auraient pu être ajoutée à une locale lors d'un appel à {{jsxref("Locale/maximize", "Locale.maximize()")}}.
+
+{{EmbedInteractiveExample("pages/js/intl-locale-prototype-minimize.html")}}
+
+## Syntaxe
+
+    locale.minimize()
+
+### Valeur de retour
+
+Une instance {{jsxref("Locale", "Locale")}} dont la propriété `baseName` renvoie le résultat de l'exécution de [l'algorithme de suppression des composantes probables](https://www.unicode.org/reports/tr35/#Likely_Subtags) sur `locale.baseName`.
+
+## Description
+
+Cette méthode effectue l'opération inverse de {{jsxref("Locale/maximize", "maximize()")}}, en retirant les fragments de langue/script ou de région qui sont superflus. Ainsi, `"en-Latn"` pourra être minimisé en `"en"` car l'anglais s'écrit uniquement à l'aide de l'alphabet latin.
+
+`minimize()` ne modifie pas les éventuelles extensions décrites dans la chaîne de locale (après le `"-u"`) ou via l'objet de configuration (elle ne modifie donc pas les valeurs de {{jsxref("Locale/hourCycle", "Locale.hourCycle")}}, {{jsxref("Locale/calendar", "Locale.calendar")}} et {{jsxref("Locale/numeric", "Locale.numeric")}}).
+
+## Exemples
+
+```js
+let maLocale = new Intl.Locale("fr-Latn-FR", {hourCycle: "h24", calendar: "gregory"});
+console.log(maLocale.baseName); // Affiche "fr-Latn-FR"
+console.log(maLocale.toString()); // Affiche "fr-Latn-FR-u-ca-gregory-hc-h24"
+let maLocMinimized = maLocale.minimize();
+
+console.log(maLocMinimized.baseName);
+// Affiche "fr" car le français est écrit uniquement avec l'alphabet latin et
+// parlé le plus largement en France
+
+console.log(maLocMinimized.toString());
+// Affiche "fr-u-ca-gregory-hc-h24". On voit ici que les extensions
+// (décrites après "-u") restent inchangées.
+```
+
+## Spécifications
+
+| Spécification                                                                                                                          | État | Commentaires |
+| -------------------------------------------------------------------------------------------------------------------------------------- | ---- | ------------ |
+| [Proposition pour `Intl.Locale.prototype.minimize()`](https://tc39.github.io/proposal-intl-locale/#sec-Intl.Locale.prototype.minimize) |      |              |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Intl.Locale.minimize")}}
+
+## Voir aussi
+
+- {{jsxref("Locale", "Intl.Locale")}}
+- {{jsxref("Locale/baseName", "Intl.Locale.baseName")}}
diff --git a/files/fr/web/javascript/reference/global_objects/intl/locale/numberingsystem/index.html b/files/fr/web/javascript/reference/global_objects/intl/locale/numberingsystem/index.html
deleted file mode 100644
index a57835345c..0000000000
--- a/files/fr/web/javascript/reference/global_objects/intl/locale/numberingsystem/index.html
+++ /dev/null
@@ -1,424 +0,0 @@
----
-title: Intl.Locale.prototype.numberingSystem
-slug: Web/JavaScript/Reference/Global_Objects/Intl/Locale/numberingSystem
-tags:
-  - Internationalisation
-  - Intl
-  - JavaScript
-  - Locale
-  - Propriété
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Intl/Locale/numberingSystem
-original_slug: Web/JavaScript/Reference/Objets_globaux/Intl/Locale/numberingSystem
----
-<div>{{JSRef}}</div>
-
-<p>La propriété <strong><code>Intl.Locale.prototype.numberingSystem</code></strong> est une propriété fournie par un accesseur qui renvoie le <a href="https://en.wikipedia.org/wiki/Numeral_system">système de numération</a> utilisée par la locale.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>Un système de numération est un système qui permet d'exprimer les nombres. La propriété <code>numberingSystem</code> permet de connaître le système de numérati Unicode. A table of the standard Unicode numeral systems can be seen belowon de la locale. Les valeurs qui peuvent être fournies par cette propriété sont standardisées par Unicode.</p>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th>Valeur</th>
-   <th>Description</th>
-  </tr>
-  <tr>
-   <td><code>adlm</code></td>
-   <td>Chiffres adlams</td>
-  </tr>
-  <tr>
-   <td><code>ahom</code></td>
-   <td>Chiffres ahoms</td>
-  </tr>
-  <tr>
-   <td><code>arab</code></td>
-   <td>Chiffres arabes</td>
-  </tr>
-  <tr>
-   <td><code>arabext</code></td>
-   <td>Chiffres arabes étendus</td>
-  </tr>
-  <tr>
-   <td><code>armn</code></td>
-   <td>Numération arménienne majuscule (algorithmique)</td>
-  </tr>
-  <tr>
-   <td><code>armnlow</code></td>
-   <td>Numération arménienne minuscule (algorithmique)</td>
-  </tr>
-  <tr>
-   <td><code>bali</code></td>
-   <td>Chiffres balinais</td>
-  </tr>
-  <tr>
-   <td><code>beng</code></td>
-   <td>Chiffres bengalis</td>
-  </tr>
-  <tr>
-   <td><code>bhks</code></td>
-   <td>Chiffres bhaiksuki</td>
-  </tr>
-  <tr>
-   <td><code>brah</code></td>
-   <td>Chiffres brahmis</td>
-  </tr>
-  <tr>
-   <td><code>cakm</code></td>
-   <td>Chiffres chakmas</td>
-  </tr>
-  <tr>
-   <td><code>cham</code></td>
-   <td>Chiffres chams</td>
-  </tr>
-  <tr>
-   <td><code>cyrl</code></td>
-   <td>Numération cyrillique (algorithmique)</td>
-  </tr>
-  <tr>
-   <td><code>deva</code></td>
-   <td>Chiffres devanagaris</td>
-  </tr>
-  <tr>
-   <td><code>ethi</code></td>
-   <td>Numération éthiopienne (algorithmique)</td>
-  </tr>
-  <tr>
-   <td><code>finance</code></td>
-   <td>Numération financière (peut être algorithmique)</td>
-  </tr>
-  <tr>
-   <td><code>fullwide</code></td>
-   <td>Chiffres à pleine chasse</td>
-  </tr>
-  <tr>
-   <td><code>geor</code></td>
-   <td>Numération géorgienne (algorithmique)</td>
-  </tr>
-  <tr>
-   <td><code>gong</code></td>
-   <td>Chiffres Gunjala Gondis</td>
-  </tr>
-  <tr>
-   <td><code>gonm</code></td>
-   <td>Chiffres Masaram Gondis</td>
-  </tr>
-  <tr>
-   <td><code>grek</code></td>
-   <td>Numération greque majuscule (algorithmique)</td>
-  </tr>
-  <tr>
-   <td><code>greklow</code></td>
-   <td>Numération greque minuscule (algorithmique)</td>
-  </tr>
-  <tr>
-   <td><code>gujr</code></td>
-   <td>Chiffres Gujaratis</td>
-  </tr>
-  <tr>
-   <td><code>guru</code></td>
-   <td>Chiffres Gurmukhis</td>
-  </tr>
-  <tr>
-   <td><code>hanidays</code></td>
-   <td>Numération du jour du mois avec caractère Han (utilisée avec les calendriers lunaires ou traditionnels)</td>
-  </tr>
-  <tr>
-   <td><code>hanidec</code></td>
-   <td>Système décimal positionnel utilisant les idéographes des nombres chinois comme chiffres</td>
-  </tr>
-  <tr>
-   <td><code>hans</code></td>
-   <td>Numération chinoise simplifiée (algorithmique)</td>
-  </tr>
-  <tr>
-   <td><code>hansfin</code></td>
-   <td>Numération chinoise simplifiée financière (algorithmique)</td>
-  </tr>
-  <tr>
-   <td><code>hant</code></td>
-   <td>Numération chinoise traditionnelle (algorithmique)</td>
-  </tr>
-  <tr>
-   <td><code>hantfin</code></td>
-   <td>Numération chinoise traditionnelle financière (algorithmique)</td>
-  </tr>
-  <tr>
-   <td><code>hebr</code></td>
-   <td>Numération hébraïque (algorithmique)</td>
-  </tr>
-  <tr>
-   <td><code>hmng</code></td>
-   <td>Chiffres Pahawh Hmongs</td>
-  </tr>
-  <tr>
-   <td><code>hmnp</code></td>
-   <td>Chiffres Nyiakeng Puachue Hmongs</td>
-  </tr>
-  <tr>
-   <td><code>java</code></td>
-   <td>Chiffres javanais</td>
-  </tr>
-  <tr>
-   <td><code>jpan</code></td>
-   <td>Numération japonaise (algorithmique)</td>
-  </tr>
-  <tr>
-   <td><code>jpanfin</code></td>
-   <td>Numération japonaise financière (algorithmique)</td>
-  </tr>
-  <tr>
-   <td><code>jpanyear</code></td>
-   <td>Numération basée sur la première année Gannen du calendrier japonais</td>
-  </tr>
-  <tr>
-   <td><code>kali</code></td>
-   <td>Chiffres Kayah Lis</td>
-  </tr>
-  <tr>
-   <td><code>khmr</code></td>
-   <td>Chiffres Khmers</td>
-  </tr>
-  <tr>
-   <td><code>knda</code></td>
-   <td>Chiffres Kannadas</td>
-  </tr>
-  <tr>
-   <td><code>lana</code></td>
-   <td>Chiffres Tai Tham Hora séculiers</td>
-  </tr>
-  <tr>
-   <td><code>lanatham</code></td>
-   <td>Chiffres Tai Tham Tham ecclésiastiques</td>
-  </tr>
-  <tr>
-   <td><code>laoo</code></td>
-   <td>Chiffres laotien</td>
-  </tr>
-  <tr>
-   <td><code>latn</code></td>
-   <td>Chiffres latins</td>
-  </tr>
-  <tr>
-   <td><code>lepc</code></td>
-   <td>Chiffres Lepchas</td>
-  </tr>
-  <tr>
-   <td><code>limb</code></td>
-   <td>Chiffres Limbus</td>
-  </tr>
-  <tr>
-   <td><code>mathbold</code></td>
-   <td>Chiffres mathématiques en gras</td>
-  </tr>
-  <tr>
-   <td><code>mathdbl</code></td>
-   <td>Chiffres mathématiques barrés en double</td>
-  </tr>
-  <tr>
-   <td><code>mathmono</code></td>
-   <td>Chiffres mathématiques à chasse fixe</td>
-  </tr>
-  <tr>
-   <td><code>mathsanb</code></td>
-   <td>Chiffres mathématiques en gras sans empattements</td>
-  </tr>
-  <tr>
-   <td><code>mathsans</code></td>
-   <td>Chiffres mathématiques sans empattements</td>
-  </tr>
-  <tr>
-   <td><code>mlym</code></td>
-   <td>Chiffres Malayalams</td>
-  </tr>
-  <tr>
-   <td><code>modi</code></td>
-   <td>Chiffres Modis</td>
-  </tr>
-  <tr>
-   <td><code>mong</code></td>
-   <td>Chiffres mongols</td>
-  </tr>
-  <tr>
-   <td><code>mroo</code></td>
-   <td>Chiffres Mros</td>
-  </tr>
-  <tr>
-   <td><code>mtei</code></td>
-   <td>Chiffres Meetei Mayeks</td>
-  </tr>
-  <tr>
-   <td><code>mymr</code></td>
-   <td>Chiffres Myanmars</td>
-  </tr>
-  <tr>
-   <td><code>mymrshan</code></td>
-   <td>Chiffres Myanmar Shans</td>
-  </tr>
-  <tr>
-   <td><code>mymrtlng</code></td>
-   <td>Chiffres Myanmar Tai Laings</td>
-  </tr>
-  <tr>
-   <td><code>native</code></td>
-   <td>Chiffres natifs</td>
-  </tr>
-  <tr>
-   <td><code>newa</code></td>
-   <td>Chiffres Newas</td>
-  </tr>
-  <tr>
-   <td><code>nkoo</code></td>
-   <td>Chiffres N'Kos</td>
-  </tr>
-  <tr>
-   <td><code>olck</code></td>
-   <td>Chiffres Ol Chikis</td>
-  </tr>
-  <tr>
-   <td><code>orya</code></td>
-   <td>Chiffres Oriyas</td>
-  </tr>
-  <tr>
-   <td><code>osma</code></td>
-   <td>Chiffres Osmanyas</td>
-  </tr>
-  <tr>
-   <td><code>rohg</code></td>
-   <td>Chiffres Hanifi Rohingyas</td>
-  </tr>
-  <tr>
-   <td><code>roman</code></td>
-   <td>Numération romaine majuscule (algorithmique)</td>
-  </tr>
-  <tr>
-   <td><code>romanlow</code></td>
-   <td>Numération romaine minuscule (algorithmique)</td>
-  </tr>
-  <tr>
-   <td><code>saur</code></td>
-   <td>Chiffres Saurashtras</td>
-  </tr>
-  <tr>
-   <td><code>shrd</code></td>
-   <td>Chiffres Sharadas</td>
-  </tr>
-  <tr>
-   <td><code>sind</code></td>
-   <td>Chiffres Khudawadis</td>
-  </tr>
-  <tr>
-   <td><code>sinh</code></td>
-   <td>Chiffres Sinhala Liths</td>
-  </tr>
-  <tr>
-   <td><code>sora</code></td>
-   <td>Chiffres Sora_Sompengs</td>
-  </tr>
-  <tr>
-   <td><code>sund</code></td>
-   <td>Chiffres soudanais</td>
-  </tr>
-  <tr>
-   <td><code>takr</code></td>
-   <td>Chiffres Takris</td>
-  </tr>
-  <tr>
-   <td><code>talu</code></td>
-   <td>Chiffres New Tai Lues</td>
-  </tr>
-  <tr>
-   <td><code>taml</code></td>
-   <td>Numération tamoule (algorithmique=</td>
-  </tr>
-  <tr>
-   <td><code>tamldec</code></td>
-   <td>Chiffres tamouls décimaux modernes</td>
-  </tr>
-  <tr>
-   <td><code>telu</code></td>
-   <td>Chiffres Telugus</td>
-  </tr>
-  <tr>
-   <td><code>thai</code></td>
-   <td>Chiffres thaïs</td>
-  </tr>
-  <tr>
-   <td><code>tirh</code></td>
-   <td>Chiffres Tirhutas</td>
-  </tr>
-  <tr>
-   <td><code>tibt</code></td>
-   <td>Chiffres tibétains</td>
-  </tr>
-  <tr>
-   <td><code>traditio</code></td>
-   <td>Numération traditionnelle (peut être algorithmique)</td>
-  </tr>
-  <tr>
-   <td><code>vaii</code></td>
-   <td>Chiffres Vais</td>
-  </tr>
-  <tr>
-   <td><code>wara</code></td>
-   <td>Chiffres Warang Citis</td>
-  </tr>
-  <tr>
-   <td><code>wcho</code></td>
-   <td>Chiffres Wanchos</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Définir_la_valeur_de_numberingSystem_grâce_à_la_chaîne_décrivant_la_locale">Définir la valeur de <code>numberingSystem</code> grâce à la chaîne décrivant la locale</h3>
-
-<p>D'après <a href="https://www.unicode.org/reports/tr35/" rel="noopener">la spécification Unicode sur les chaînes décrivant les locales</a>, l'extension décrivant le système de numération est indiquée par la clé <code>nu</code>.</p>
-
-<p>Le constructeur <code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Locale">Intl.locale</a></code> prend comme premier argument une chaîne de caractères décrivant la locale. Aussi, on peut indiquer le système de numération après les composantes principales de la chaîne de caractères en lui ajoutant un <code>"-u"</code> (indiquant la présence d'une extension), suivi d'un <code>"-nu"</code> (indiquant que l'extension qui sera indiquée décrit le système de numération, suivi de la valeur voulue pour le système de numération.</p>
-
-<pre class="brush: js">let numberingSystemViaStr = new Intl.Locale("fr-Latn-FR-u-nu-mong");
-console.log(numberingSystemStr.numberingSystem);
-// affichera "mong" dans la console</pre>
-
-<h3 id="Définir_la_valeur_de_numberingSystem_grâce_à_un_objet_de_configuration">Définir la valeur de <code>numberingSystem</code> grâce à un objet de configuration</h3>
-
-<p>Le constructeur <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Locale" title="The Intl.Locale constructor is a standard built-in property of the Intl object."><code>Intl.Locale</code></a> possède un deuxième argument, optionnel, qui est un objet permettant de configurer la locale. Les propriétés de cet objet sont utilisées comme extensions pour la locale ; les clés des propriétés sont les noms des extensions et leurs valeurs sont celles utilisées pour chaque extension. On peut donc utiliser la propriété <code>numberingSystem</code> sur cet objet afin de définir le système de numération à utiliser pour cette locale.</p>
-
-<pre class="brush: js">let numberingSystemViaObj= new Intl.Locale("en-Latn-US", {numberingSystem: "latn"});
-console.log(us12hour.numberingSystem);
-// affichera "latn" dans la console
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><a href="https://tc39.github.io/proposal-intl-locale/#sec-Intl.Locale.prototype.numberingSystem">Proposition pour <code>Intl.Locale</code></a></td>
-   <td>Proposition de niveau 3</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<div>{{Compat("javascript.builtins.Intl.Locale.numberingSystem")}}</div>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Locale", "Intl.Locale")}}</li>
- <li><a href="https://github.com/unicode-org/cldr/blob/master/common/supplemental/numberingSystems.xml">Détails sur les systèmes de numération dans le standard Unicode</a></li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/intl/locale/numberingsystem/index.md b/files/fr/web/javascript/reference/global_objects/intl/locale/numberingsystem/index.md
new file mode 100644
index 0000000000..212cc4c37f
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/intl/locale/numberingsystem/index.md
@@ -0,0 +1,148 @@
+---
+title: Intl.Locale.prototype.numberingSystem
+slug: Web/JavaScript/Reference/Global_Objects/Intl/Locale/numberingSystem
+tags:
+  - Internationalisation
+  - Intl
+  - JavaScript
+  - Locale
+  - Propriété
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Intl/Locale/numberingSystem
+original_slug: Web/JavaScript/Reference/Objets_globaux/Intl/Locale/numberingSystem
+---
+{{JSRef}}
+
+La propriété **`Intl.Locale.prototype.numberingSystem`** est une propriété fournie par un accesseur qui renvoie le [système de numération](https://en.wikipedia.org/wiki/Numeral_system) utilisée par la locale.
+
+## Description
+
+Un système de numération est un système qui permet d'exprimer les nombres. La propriété `numberingSystem` permet de connaître le système de numérati Unicode. A table of the standard Unicode numeral systems can be seen belowon de la locale. Les valeurs qui peuvent être fournies par cette propriété sont standardisées par Unicode.
+
+| Valeur     | Description                                                                                             |
+| ---------- | ------------------------------------------------------------------------------------------------------- |
+| `adlm`     | Chiffres adlams                                                                                         |
+| `ahom`     | Chiffres ahoms                                                                                          |
+| `arab`     | Chiffres arabes                                                                                         |
+| `arabext`  | Chiffres arabes étendus                                                                                 |
+| `armn`     | Numération arménienne majuscule (algorithmique)                                                         |
+| `armnlow`  | Numération arménienne minuscule (algorithmique)                                                         |
+| `bali`     | Chiffres balinais                                                                                       |
+| `beng`     | Chiffres bengalis                                                                                       |
+| `bhks`     | Chiffres bhaiksuki                                                                                      |
+| `brah`     | Chiffres brahmis                                                                                        |
+| `cakm`     | Chiffres chakmas                                                                                        |
+| `cham`     | Chiffres chams                                                                                          |
+| `cyrl`     | Numération cyrillique (algorithmique)                                                                   |
+| `deva`     | Chiffres devanagaris                                                                                    |
+| `ethi`     | Numération éthiopienne (algorithmique)                                                                  |
+| `finance`  | Numération financière (peut être algorithmique)                                                         |
+| `fullwide` | Chiffres à pleine chasse                                                                                |
+| `geor`     | Numération géorgienne (algorithmique)                                                                   |
+| `gong`     | Chiffres Gunjala Gondis                                                                                 |
+| `gonm`     | Chiffres Masaram Gondis                                                                                 |
+| `grek`     | Numération greque majuscule (algorithmique)                                                             |
+| `greklow`  | Numération greque minuscule (algorithmique)                                                             |
+| `gujr`     | Chiffres Gujaratis                                                                                      |
+| `guru`     | Chiffres Gurmukhis                                                                                      |
+| `hanidays` | Numération du jour du mois avec caractère Han (utilisée avec les calendriers lunaires ou traditionnels) |
+| `hanidec`  | Système décimal positionnel utilisant les idéographes des nombres chinois comme chiffres                |
+| `hans`     | Numération chinoise simplifiée (algorithmique)                                                          |
+| `hansfin`  | Numération chinoise simplifiée financière (algorithmique)                                               |
+| `hant`     | Numération chinoise traditionnelle (algorithmique)                                                      |
+| `hantfin`  | Numération chinoise traditionnelle financière (algorithmique)                                           |
+| `hebr`     | Numération hébraïque (algorithmique)                                                                    |
+| `hmng`     | Chiffres Pahawh Hmongs                                                                                  |
+| `hmnp`     | Chiffres Nyiakeng Puachue Hmongs                                                                        |
+| `java`     | Chiffres javanais                                                                                       |
+| `jpan`     | Numération japonaise (algorithmique)                                                                    |
+| `jpanfin`  | Numération japonaise financière (algorithmique)                                                         |
+| `jpanyear` | Numération basée sur la première année Gannen du calendrier japonais                                    |
+| `kali`     | Chiffres Kayah Lis                                                                                      |
+| `khmr`     | Chiffres Khmers                                                                                         |
+| `knda`     | Chiffres Kannadas                                                                                       |
+| `lana`     | Chiffres Tai Tham Hora séculiers                                                                        |
+| `lanatham` | Chiffres Tai Tham Tham ecclésiastiques                                                                  |
+| `laoo`     | Chiffres laotien                                                                                        |
+| `latn`     | Chiffres latins                                                                                         |
+| `lepc`     | Chiffres Lepchas                                                                                        |
+| `limb`     | Chiffres Limbus                                                                                         |
+| `mathbold` | Chiffres mathématiques en gras                                                                          |
+| `mathdbl`  | Chiffres mathématiques barrés en double                                                                 |
+| `mathmono` | Chiffres mathématiques à chasse fixe                                                                    |
+| `mathsanb` | Chiffres mathématiques en gras sans empattements                                                        |
+| `mathsans` | Chiffres mathématiques sans empattements                                                                |
+| `mlym`     | Chiffres Malayalams                                                                                     |
+| `modi`     | Chiffres Modis                                                                                          |
+| `mong`     | Chiffres mongols                                                                                        |
+| `mroo`     | Chiffres Mros                                                                                           |
+| `mtei`     | Chiffres Meetei Mayeks                                                                                  |
+| `mymr`     | Chiffres Myanmars                                                                                       |
+| `mymrshan` | Chiffres Myanmar Shans                                                                                  |
+| `mymrtlng` | Chiffres Myanmar Tai Laings                                                                             |
+| `native`   | Chiffres natifs                                                                                         |
+| `newa`     | Chiffres Newas                                                                                          |
+| `nkoo`     | Chiffres N'Kos                                                                                          |
+| `olck`     | Chiffres Ol Chikis                                                                                      |
+| `orya`     | Chiffres Oriyas                                                                                         |
+| `osma`     | Chiffres Osmanyas                                                                                       |
+| `rohg`     | Chiffres Hanifi Rohingyas                                                                               |
+| `roman`    | Numération romaine majuscule (algorithmique)                                                            |
+| `romanlow` | Numération romaine minuscule (algorithmique)                                                            |
+| `saur`     | Chiffres Saurashtras                                                                                    |
+| `shrd`     | Chiffres Sharadas                                                                                       |
+| `sind`     | Chiffres Khudawadis                                                                                     |
+| `sinh`     | Chiffres Sinhala Liths                                                                                  |
+| `sora`     | Chiffres Sora_Sompengs                                                                                  |
+| `sund`     | Chiffres soudanais                                                                                      |
+| `takr`     | Chiffres Takris                                                                                         |
+| `talu`     | Chiffres New Tai Lues                                                                                   |
+| `taml`     | Numération tamoule (algorithmique=                                                                      |
+| `tamldec`  | Chiffres tamouls décimaux modernes                                                                      |
+| `telu`     | Chiffres Telugus                                                                                        |
+| `thai`     | Chiffres thaïs                                                                                          |
+| `tirh`     | Chiffres Tirhutas                                                                                       |
+| `tibt`     | Chiffres tibétains                                                                                      |
+| `traditio` | Numération traditionnelle (peut être algorithmique)                                                     |
+| `vaii`     | Chiffres Vais                                                                                           |
+| `wara`     | Chiffres Warang Citis                                                                                   |
+| `wcho`     | Chiffres Wanchos                                                                                        |
+
+## Exemples
+
+### Définir la valeur de `numberingSystem` grâce à la chaîne décrivant la locale
+
+D'après [la spécification Unicode sur les chaînes décrivant les locales](https://www.unicode.org/reports/tr35/), l'extension décrivant le système de numération est indiquée par la clé `nu`.
+
+Le constructeur [`Intl.locale`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Locale) prend comme premier argument une chaîne de caractères décrivant la locale. Aussi, on peut indiquer le système de numération après les composantes principales de la chaîne de caractères en lui ajoutant un `"-u"` (indiquant la présence d'une extension), suivi d'un `"-nu"` (indiquant que l'extension qui sera indiquée décrit le système de numération, suivi de la valeur voulue pour le système de numération.
+
+```js
+let numberingSystemViaStr = new Intl.Locale("fr-Latn-FR-u-nu-mong");
+console.log(numberingSystemStr.numberingSystem);
+// affichera "mong" dans la console
+```
+
+### Définir la valeur de `numberingSystem` grâce à un objet de configuration
+
+Le constructeur [`Intl.Locale`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Locale "The Intl.Locale constructor is a standard built-in property of the Intl object.") possède un deuxième argument, optionnel, qui est un objet permettant de configurer la locale. Les propriétés de cet objet sont utilisées comme extensions pour la locale ; les clés des propriétés sont les noms des extensions et leurs valeurs sont celles utilisées pour chaque extension. On peut donc utiliser la propriété `numberingSystem` sur cet objet afin de définir le système de numération à utiliser pour cette locale.
+
+```js
+let numberingSystemViaObj= new Intl.Locale("en-Latn-US", {numberingSystem: "latn"});
+console.log(us12hour.numberingSystem);
+// affichera "latn" dans la console
+```
+
+## Spécifications
+
+| Spécification                                                                                                            | État                    | Commentaires |
+| ------------------------------------------------------------------------------------------------------------------------ | ----------------------- | ------------ |
+| [Proposition pour `Intl.Locale`](https://tc39.github.io/proposal-intl-locale/#sec-Intl.Locale.prototype.numberingSystem) | Proposition de niveau 3 |              |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Intl.Locale.numberingSystem")}}
+
+## Voir aussi
+
+- {{jsxref("Locale", "Intl.Locale")}}
+- [Détails sur les systèmes de numération dans le standard Unicode](https://github.com/unicode-org/cldr/blob/master/common/supplemental/numberingSystems.xml)
diff --git a/files/fr/web/javascript/reference/global_objects/intl/locale/numeric/index.html b/files/fr/web/javascript/reference/global_objects/intl/locale/numeric/index.html
deleted file mode 100644
index d38122f7be..0000000000
--- a/files/fr/web/javascript/reference/global_objects/intl/locale/numeric/index.html
+++ /dev/null
@@ -1,68 +0,0 @@
----
-title: Intl.Locale.prototype.numeric
-slug: Web/JavaScript/Reference/Global_Objects/Intl/Locale/numeric
-tags:
-  - Internationalisation
-  - Intl
-  - JavaScript
-  - Locale
-  - Propriété
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Intl/Locale/numeric
-original_slug: Web/JavaScript/Reference/Objets_globaux/Intl/Locale/numeric
----
-<div>{{JSRef}}</div>
-
-<p>La propriété <strong><code>Intl.Locale.prototype.numeric</code></strong> est une propriété fournie par un accesseur et qui indique si la locale possède une collation spécifique pour les caractères numériques (la collation étant la méthode qui permet d'ordonner des chaînes de caractères entre elles).</p>
-
-<h2 id="Description">Description</h2>
-
-<p>À l'instar de {{jsxref("Locale.caseFirst", "Intl.Locale.caseFirst")}}, <code>numeric</code> représente une modification des règles de collation utilisée par la locale. <code>numeric</code> est un booléen (<code>true</code> ou <code>false</code>). Lorsque cette propriété vaut <code>false</code>, il n'y a pas de gestion particulière des chiffres et si cette propriété vaut <code>true</code>, cela indique que les caractères numériques sont pris en compte lors de la collation des chaînes. Ainsi, les séquences de chiffres décimaux seront comparés comme des nombres. Ainsi, la chaîne de caractères <code>"A-21"</code> sera considérée inférieure à <code>"A-123"</code>.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Définir_numeric_grâce_à_la_chaîne_de_description_de_la_locale">Définir <code>numeric</code> grâce à la chaîne de description de la locale</h3>
-
-<p>Selon <a href="https://www.unicode.org/reports/tr35/" rel="noopener">la spécification Unicode sur les chaînes de caractères décrivant les locales</a>, les valeurs de <code>numeric</code> sont associées à la clé <code>kn</code>. Pour utiliser cette clé dans la chaîne de description de la locale (le premier argument de <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Locale" title="The Intl.Locale constructor is a standard built-in property of the Intl object."><code>Intl.Locale</code></a>), après la chaîne de base, on pourra ajouter un suffixe avec <code>"-u"</code> afin d'indiquer la présence d'une extension, puis <code>"-kn"</code> afin de préciser l'extension en question et enfin la valeur souhaitée pour cette extension. Si on veut que <code>numeric</code> soit <code>true</code>, il suffit d'ajouter la clé <code>kn</code>. Pour indiquer la valeur <code>false</code>, il faudra explicitement ajouter <code>"-false"</code>.</p>
-
-<pre class="brush: js">let numericViaStr = new Intl.Locale("fr-Latn-FR-u-kn-false");
-console.log(numericStr.numeric);
-// Affichera "false" dans la console</pre>
-
-<h3 id="Définir_numeric_via_lobjet_de_configuration_de_linstance">Définir <code>numeric</code> via l'objet de configuration de l'instance</h3>
-
-<p>Le constructeur <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Locale" title="The Intl.Locale constructor is a standard built-in property of the Intl object."><code>Intl.Locale</code></a> possède un deuxième argument, optionnel, qui est un objet permettant de configurer la locale. Les propriétés de cet objet sont utilisées comme extensions pour la locale ; les clés des propriétés sont les noms des extensions et leurs valeurs sont celles utilisées pour chaque extension. On peut donc utiliser la propriété <code>numeric</code> sur cet objet afin de définir le système de numération à utiliser pour cette locale.</p>
-
-<pre class="brush: js">let numericViaObj= new Intl.Locale("en-Latn-US", {numeric: true});
-console.log(us12hour.numeric);
-// Affichera "true" dans la console
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><a href="https://tc39.github.io/proposal-intl-locale/#sec-Intl.Locale.prototype.numeric">Proposition pour <code>Intl.Locale</code></a></td>
-   <td>Proposition de niveau 3</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<div>{{Compat("javascript.builtins.Intl.Locale.numeric")}}</div>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Locale", "Intl.Locale")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/intl/locale/numeric/index.md b/files/fr/web/javascript/reference/global_objects/intl/locale/numeric/index.md
new file mode 100644
index 0000000000..7d9b8d02f4
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/intl/locale/numeric/index.md
@@ -0,0 +1,56 @@
+---
+title: Intl.Locale.prototype.numeric
+slug: Web/JavaScript/Reference/Global_Objects/Intl/Locale/numeric
+tags:
+  - Internationalisation
+  - Intl
+  - JavaScript
+  - Locale
+  - Propriété
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Intl/Locale/numeric
+original_slug: Web/JavaScript/Reference/Objets_globaux/Intl/Locale/numeric
+---
+{{JSRef}}
+
+La propriété **`Intl.Locale.prototype.numeric`** est une propriété fournie par un accesseur et qui indique si la locale possède une collation spécifique pour les caractères numériques (la collation étant la méthode qui permet d'ordonner des chaînes de caractères entre elles).
+
+## Description
+
+À l'instar de {{jsxref("Locale.caseFirst", "Intl.Locale.caseFirst")}}, `numeric` représente une modification des règles de collation utilisée par la locale. `numeric` est un booléen (`true` ou `false`). Lorsque cette propriété vaut `false`, il n'y a pas de gestion particulière des chiffres et si cette propriété vaut `true`, cela indique que les caractères numériques sont pris en compte lors de la collation des chaînes. Ainsi, les séquences de chiffres décimaux seront comparés comme des nombres. Ainsi, la chaîne de caractères `"A-21"` sera considérée inférieure à `"A-123"`.
+
+## Exemples
+
+### Définir `numeric` grâce à la chaîne de description de la locale
+
+Selon [la spécification Unicode sur les chaînes de caractères décrivant les locales](https://www.unicode.org/reports/tr35/), les valeurs de `numeric` sont associées à la clé `kn`. Pour utiliser cette clé dans la chaîne de description de la locale (le premier argument de [`Intl.Locale`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Locale "The Intl.Locale constructor is a standard built-in property of the Intl object.")), après la chaîne de base, on pourra ajouter un suffixe avec `"-u"` afin d'indiquer la présence d'une extension, puis `"-kn"` afin de préciser l'extension en question et enfin la valeur souhaitée pour cette extension. Si on veut que `numeric` soit `true`, il suffit d'ajouter la clé `kn`. Pour indiquer la valeur `false`, il faudra explicitement ajouter `"-false"`.
+
+```js
+let numericViaStr = new Intl.Locale("fr-Latn-FR-u-kn-false");
+console.log(numericStr.numeric);
+// Affichera "false" dans la console
+```
+
+### Définir `numeric` via l'objet de configuration de l'instance
+
+Le constructeur [`Intl.Locale`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Locale "The Intl.Locale constructor is a standard built-in property of the Intl object.") possède un deuxième argument, optionnel, qui est un objet permettant de configurer la locale. Les propriétés de cet objet sont utilisées comme extensions pour la locale ; les clés des propriétés sont les noms des extensions et leurs valeurs sont celles utilisées pour chaque extension. On peut donc utiliser la propriété `numeric` sur cet objet afin de définir le système de numération à utiliser pour cette locale.
+
+```js
+let numericViaObj= new Intl.Locale("en-Latn-US", {numeric: true});
+console.log(us12hour.numeric);
+// Affichera "true" dans la console
+```
+
+## Spécifications
+
+| Spécification                                                                                                    | État                    | Commentaires |
+| ---------------------------------------------------------------------------------------------------------------- | ----------------------- | ------------ |
+| [Proposition pour `Intl.Locale`](https://tc39.github.io/proposal-intl-locale/#sec-Intl.Locale.prototype.numeric) | Proposition de niveau 3 |              |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Intl.Locale.numeric")}}
+
+## Voir aussi
+
+- {{jsxref("Locale", "Intl.Locale")}}
diff --git a/files/fr/web/javascript/reference/global_objects/intl/locale/region/index.html b/files/fr/web/javascript/reference/global_objects/intl/locale/region/index.html
deleted file mode 100644
index 603db078a8..0000000000
--- a/files/fr/web/javascript/reference/global_objects/intl/locale/region/index.html
+++ /dev/null
@@ -1,70 +0,0 @@
----
-title: Intl.Locale.prototype.region
-slug: Web/JavaScript/Reference/Global_Objects/Intl/Locale/region
-tags:
-  - Internationalisation
-  - Intl
-  - JavaScript
-  - Locale
-  - Propriété
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Intl/Locale/region
-original_slug: Web/JavaScript/Reference/Objets_globaux/Intl/Locale/region
----
-<div>{{JSRef}}</div>
-
-<p>La propriété <strong><code>Intl.Locale.prototype.region</code></strong> est fournie par un accesseur qui renvoie la région du monde (il s'agit généralement d'un pays) associée à la locale courante.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>La région est un fragment majeur de l'identifiant de la locale car il situe la locale dans une zone donnée du monde. Connaître la région associée à la locale est crucial pour identifier les différences entre les locales. Ainsi, on parle anglais aux États-Unis et au Royaume-Uni mais il existe certaines différences d'orthographe entre ces pays. Connaître la région d'une locale peut permettre aux développeurs d'adapter leurs sites et applications selon la région depuis laquelle ils sont consultés.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Définir_la_région_avec_la_chaîne_de_caractères_décrivant_la_locale">Définir la région avec la chaîne de caractères décrivant la locale</h3>
-
-<p>La région est la troisième composante d'une chaîne représentant un identifiant de langue Unicode. Cette chaîne de caractères est généralement passée au constructeur {{jsxref("Locale", "Locale")}}.</p>
-
-<pre class="brush: js">let regionStr = new Intl.Locale("en-Latn-US");
-
-console.log(regionStr.region);
-// Affichera "US" dans la console</pre>
-
-<h3 id="Définir_la_région_via_lobjet_de_configuration_du_constructeur">Définir la région via l'objet de configuration du constructeur</h3>
-
-<p>Le constructeur {{jsxref("Locale", "Locale")}} prend comme second argument un objet de paramétrage dont chacune des propriétés permet de définir une extension ou une composante de la locale.</p>
-
-<pre class="brush: js">let regionObj = new Intl.Locale("fr-Latn", {region: "FR"});
-
-console.log(regionObj.region);
-// Affichera "FR" dans la console</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><a href="https://tc39.github.io/proposal-intl-locale/#sec-Intl.Locale.prototype.region">Proposition pour <code>Intl.Locale.prototype.region</code></a></td>
-   <td>Proposition de niveau 3</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<div>{{Compat("javascript.builtins.Intl.Locale.region")}}</div>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Locale", "Intl.Locale")}}</li>
- <li><a href="https://www.unicode.org/cldr/charts/latest/supplemental/territory_containment_un_m_49.html">Tableau Unicode des régions</a></li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/intl/locale/region/index.md b/files/fr/web/javascript/reference/global_objects/intl/locale/region/index.md
new file mode 100644
index 0000000000..d3430cbde4
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/intl/locale/region/index.md
@@ -0,0 +1,59 @@
+---
+title: Intl.Locale.prototype.region
+slug: Web/JavaScript/Reference/Global_Objects/Intl/Locale/region
+tags:
+  - Internationalisation
+  - Intl
+  - JavaScript
+  - Locale
+  - Propriété
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Intl/Locale/region
+original_slug: Web/JavaScript/Reference/Objets_globaux/Intl/Locale/region
+---
+{{JSRef}}
+
+La propriété **`Intl.Locale.prototype.region`** est fournie par un accesseur qui renvoie la région du monde (il s'agit généralement d'un pays) associée à la locale courante.
+
+## Description
+
+La région est un fragment majeur de l'identifiant de la locale car il situe la locale dans une zone donnée du monde. Connaître la région associée à la locale est crucial pour identifier les différences entre les locales. Ainsi, on parle anglais aux États-Unis et au Royaume-Uni mais il existe certaines différences d'orthographe entre ces pays. Connaître la région d'une locale peut permettre aux développeurs d'adapter leurs sites et applications selon la région depuis laquelle ils sont consultés.
+
+## Exemples
+
+### Définir la région avec la chaîne de caractères décrivant la locale
+
+La région est la troisième composante d'une chaîne représentant un identifiant de langue Unicode. Cette chaîne de caractères est généralement passée au constructeur {{jsxref("Locale", "Locale")}}.
+
+```js
+let regionStr = new Intl.Locale("en-Latn-US");
+
+console.log(regionStr.region);
+// Affichera "US" dans la console
+```
+
+### Définir la région via l'objet de configuration du constructeur
+
+Le constructeur {{jsxref("Locale", "Locale")}} prend comme second argument un objet de paramétrage dont chacune des propriétés permet de définir une extension ou une composante de la locale.
+
+```js
+let regionObj = new Intl.Locale("fr-Latn", {region: "FR"});
+
+console.log(regionObj.region);
+// Affichera "FR" dans la console
+```
+
+## Spécifications
+
+| Spécification                                                                                                                    | État                    | Commentaires |
+| -------------------------------------------------------------------------------------------------------------------------------- | ----------------------- | ------------ |
+| [Proposition pour `Intl.Locale.prototype.region`](https://tc39.github.io/proposal-intl-locale/#sec-Intl.Locale.prototype.region) | Proposition de niveau 3 |              |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Intl.Locale.region")}}
+
+## Voir aussi
+
+- {{jsxref("Locale", "Intl.Locale")}}
+- [Tableau Unicode des régions](https://www.unicode.org/cldr/charts/latest/supplemental/territory_containment_un_m_49.html)
diff --git a/files/fr/web/javascript/reference/global_objects/intl/locale/script/index.html b/files/fr/web/javascript/reference/global_objects/intl/locale/script/index.html
deleted file mode 100644
index 138d442ed8..0000000000
--- a/files/fr/web/javascript/reference/global_objects/intl/locale/script/index.html
+++ /dev/null
@@ -1,67 +0,0 @@
----
-title: Intl.Locale.prototype.script
-slug: Web/JavaScript/Reference/Global_Objects/Intl/Locale/script
-tags:
-  - Internationalisation
-  - Intl
-  - JavaScript
-  - Propriété
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Intl/Locale/script
-original_slug: Web/JavaScript/Reference/Objets_globaux/Intl/Locale/script
----
-<div>{{JSRef}}</div>
-
-<p>La propriété <strong><code>Intl.Locale.prototype.script</code></strong> est fournie via un accesseur et renvoie le script utilisé pour l'écriture d'une langue donnée pour la locale courante.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>Un script, ou système d'écriture, est l'une des caractéristiques fondamentales d'une locale. Il décrit l'ensemble des symboles (ou glyphes) qui sont utilisés pour écrire dans une langue donnée. Ainsi, le script associé à l'anglais est l'alphabet latin, le script associé au coréen est le Hangul. Dans la plupart des cas, indiquer le script n'est pas strictement nécessaire car une langue ne s'écrit que dans un script donné. Il existe toutefois des exceptions et il est préférable d'indique le script afin d'avoir un identifiant de langue Unicode complet.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Définir_le_script_via_la_chaîne_de_description_de_la_locale">Définir le script via la chaîne de description de la locale</h3>
-
-<p>Le script correspond à la deuxième partie d'un identifiant de langue Unicode valide. On peut donc le définir en passant un tel identifiant au constructeur {{jsxref("Locale", "Locale")}}. Toutefois, cette composante n'est pas obligatoire pour créer une instance de <code>Locale</code>.</p>
-
-<pre class="brush: js">let scriptStr = new Intl.Locale("en-Latn-US");
-
-console.log(scriptStr.script); // Affichera "Latn" dans la console</pre>
-
-<h3 id="Définir_le_script_grâce_à_lobjet_de_configuration_du_constructeur">Définir le script grâce à l'objet de configuration du constructeur</h3>
-
-<p>Le constructeur {{jsxref("Locale", "Locale")}} permet d'utiliser un objet de configuration dont les propriétés définiront les caractéristiques de la locale :</p>
-
-<pre class="brush: js">let scriptObj = new Intl.Locale("fr-FR", {script: "Latn"});
-
-console.log(scriptObj.script); // Affichera "Latn" dans la console</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><a href="https://tc39.github.io/proposal-intl-locale/#sec-Intl.Locale.prototype.script">Proposition pour <code>Intl.Locale.prototype.script</code></a></td>
-   <td>Proposition de niveau 3</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<div>{{Compat("javascript.builtins.Intl.Locale.script")}}</div>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Locale", "Intl.Locale")}}</li>
- <li><a href="https://www.unicode.org/reports/tr35/#unicode_script_subtag_validity">Spécification Unicode pour la composante script</a></li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/intl/locale/script/index.md b/files/fr/web/javascript/reference/global_objects/intl/locale/script/index.md
new file mode 100644
index 0000000000..ecafc1ab87
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/intl/locale/script/index.md
@@ -0,0 +1,56 @@
+---
+title: Intl.Locale.prototype.script
+slug: Web/JavaScript/Reference/Global_Objects/Intl/Locale/script
+tags:
+  - Internationalisation
+  - Intl
+  - JavaScript
+  - Propriété
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Intl/Locale/script
+original_slug: Web/JavaScript/Reference/Objets_globaux/Intl/Locale/script
+---
+{{JSRef}}
+
+La propriété **`Intl.Locale.prototype.script`** est fournie via un accesseur et renvoie le script utilisé pour l'écriture d'une langue donnée pour la locale courante.
+
+## Description
+
+Un script, ou système d'écriture, est l'une des caractéristiques fondamentales d'une locale. Il décrit l'ensemble des symboles (ou glyphes) qui sont utilisés pour écrire dans une langue donnée. Ainsi, le script associé à l'anglais est l'alphabet latin, le script associé au coréen est le Hangul. Dans la plupart des cas, indiquer le script n'est pas strictement nécessaire car une langue ne s'écrit que dans un script donné. Il existe toutefois des exceptions et il est préférable d'indique le script afin d'avoir un identifiant de langue Unicode complet.
+
+## Exemples
+
+### Définir le script via la chaîne de description de la locale
+
+Le script correspond à la deuxième partie d'un identifiant de langue Unicode valide. On peut donc le définir en passant un tel identifiant au constructeur {{jsxref("Locale", "Locale")}}. Toutefois, cette composante n'est pas obligatoire pour créer une instance de `Locale`.
+
+```js
+let scriptStr = new Intl.Locale("en-Latn-US");
+
+console.log(scriptStr.script); // Affichera "Latn" dans la console
+```
+
+### Définir le script grâce à l'objet de configuration du constructeur
+
+Le constructeur {{jsxref("Locale", "Locale")}} permet d'utiliser un objet de configuration dont les propriétés définiront les caractéristiques de la locale :
+
+```js
+let scriptObj = new Intl.Locale("fr-FR", {script: "Latn"});
+
+console.log(scriptObj.script); // Affichera "Latn" dans la console
+```
+
+## Spécifications
+
+| Spécification                                                                                                                    | État                    | Commentaires |
+| -------------------------------------------------------------------------------------------------------------------------------- | ----------------------- | ------------ |
+| [Proposition pour `Intl.Locale.prototype.script`](https://tc39.github.io/proposal-intl-locale/#sec-Intl.Locale.prototype.script) | Proposition de niveau 3 |              |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Intl.Locale.script")}}
+
+## Voir aussi
+
+- {{jsxref("Locale", "Intl.Locale")}}
+- [Spécification Unicode pour la composante script](https://www.unicode.org/reports/tr35/#unicode_script_subtag_validity)
diff --git a/files/fr/web/javascript/reference/global_objects/intl/locale/tostring/index.html b/files/fr/web/javascript/reference/global_objects/intl/locale/tostring/index.html
deleted file mode 100644
index 96e0b7767b..0000000000
--- a/files/fr/web/javascript/reference/global_objects/intl/locale/tostring/index.html
+++ /dev/null
@@ -1,66 +0,0 @@
----
-title: Intl.Locale.prototype.toString()
-slug: Web/JavaScript/Reference/Global_Objects/Intl/Locale/toString
-tags:
-  - Intl
-  - JavaScript
-  - Locale
-  - Méthode
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Intl/Locale/toString
-original_slug: Web/JavaScript/Reference/Objets_globaux/Intl/Locale/toString
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <strong><code>Intl.Locale.prototype.toString()</code></strong> renvoie <a href="https://www.unicode.org/reports/tr35/#Unicode_locale_identifier">l'identifiant de locale complet</a> pour la locale courante.</p>
-
-<p>{{EmbedInteractiveExample("pages/js/intl-locale-prototype-tostring.html")}}</p>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><code><em>locale</em>.toString()</code></pre>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>La chaîne de caractères représentant l'identifiant complet de la locale.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>Une instance de <code>Locale</code> est une représentation JavaScript d'une locale au sens Unicode. Les informations décrivant une locale donnée (la langue, le système d'écriture, le type de calendrier, etc.) peuvent être encodées en une chaîne de caractères qui est l'identifiant de la locale. Lorsqu'on appelle la méthode <code>toString()</code> sur une instance de <code>Locale</code>, on obtiendra l'identifiant complet de la locale.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<pre class="brush: js">let maLocale = new Intl.Locale("fr-Latn-FR", {hourCycle: "h24", calendar: "gregory"});
-console.log(maLocale.baseName); // Affiche "fr-Latn-FR"
-console.log(maLocale.toString()); // Affiche "fr-Latn-FR-u-ca-gregory-hc-h24"
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><a href="https://tc39.github.io/proposal-intl-locale/#sec-Intl.Locale.prototype.toString">Proposition pour <code>Intl.Locale.prototype.toString()</code></a></td>
-   <td>Proposition de niveau 3</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Intl.Locale.toString")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Locale", "Intl.Locale")}}</li>
- <li>{{jsxref("Locale/baseName", "Intl.Locale.baseName")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/intl/locale/tostring/index.md b/files/fr/web/javascript/reference/global_objects/intl/locale/tostring/index.md
new file mode 100644
index 0000000000..e25a84aadc
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/intl/locale/tostring/index.md
@@ -0,0 +1,52 @@
+---
+title: Intl.Locale.prototype.toString()
+slug: Web/JavaScript/Reference/Global_Objects/Intl/Locale/toString
+tags:
+  - Intl
+  - JavaScript
+  - Locale
+  - Méthode
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Intl/Locale/toString
+original_slug: Web/JavaScript/Reference/Objets_globaux/Intl/Locale/toString
+---
+{{JSRef}}
+
+La méthode **`Intl.Locale.prototype.toString()`** renvoie [l'identifiant de locale complet](https://www.unicode.org/reports/tr35/#Unicode_locale_identifier) pour la locale courante.
+
+{{EmbedInteractiveExample("pages/js/intl-locale-prototype-tostring.html")}}
+
+## Syntaxe
+
+    locale.toString()
+
+### Valeur de retour
+
+La chaîne de caractères représentant l'identifiant complet de la locale.
+
+## Description
+
+Une instance de `Locale` est une représentation JavaScript d'une locale au sens Unicode. Les informations décrivant une locale donnée (la langue, le système d'écriture, le type de calendrier, etc.) peuvent être encodées en une chaîne de caractères qui est l'identifiant de la locale. Lorsqu'on appelle la méthode `toString()` sur une instance de `Locale`, on obtiendra l'identifiant complet de la locale.
+
+## Exemples
+
+```js
+let maLocale = new Intl.Locale("fr-Latn-FR", {hourCycle: "h24", calendar: "gregory"});
+console.log(maLocale.baseName); // Affiche "fr-Latn-FR"
+console.log(maLocale.toString()); // Affiche "fr-Latn-FR-u-ca-gregory-hc-h24"
+```
+
+## Spécifications
+
+| Spécification                                                                                                                          | État                    | Commentaires |
+| -------------------------------------------------------------------------------------------------------------------------------------- | ----------------------- | ------------ |
+| [Proposition pour `Intl.Locale.prototype.toString()`](https://tc39.github.io/proposal-intl-locale/#sec-Intl.Locale.prototype.toString) | Proposition de niveau 3 |              |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Intl.Locale.toString")}}
+
+## Voir aussi
+
+- {{jsxref("Locale", "Intl.Locale")}}
+- {{jsxref("Locale/baseName", "Intl.Locale.baseName")}}
diff --git a/files/fr/web/javascript/reference/global_objects/intl/numberformat/format/index.html b/files/fr/web/javascript/reference/global_objects/intl/numberformat/format/index.html
deleted file mode 100644
index d912f25f6f..0000000000
--- a/files/fr/web/javascript/reference/global_objects/intl/numberformat/format/index.html
+++ /dev/null
@@ -1,94 +0,0 @@
----
-title: Intl.NumberFormat.prototype.format
-slug: Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/format
-tags:
-  - Internationalisation
-  - Intl
-  - JavaScript
-  - NumberFormat
-  - Propriété
-  - Prototype
-  - Reference
-  - i18n
-translation_of: Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/format
-original_slug: Web/JavaScript/Reference/Objets_globaux/Intl/NumberFormat/format
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <code><strong>Intl.NumberFormat.prototype.format()</strong></code> formate un nombre en fonction des options de locales et de formats définis dans l'objet {{jsxref("NumberFormat", "Intl.NumberFormat")}} correspondant.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/intl-numberformat-prototype-format.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>numberFormat</var>.format(<var>nombre</var>)</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>nombre</code></dt>
- <dd>Le nombre qu'on souhaite formater.</dd>
-</dl>
-
-<h2 id="Description">Description</h2>
-
-<p>La fonction d'accesseur <code>format</code> permet de formater un nombre donné en une chaîne de caractères selon les options de locale et de format de l'objet {{jsxref("NumberFormat", "Intl.NumberFormat")}}.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Utiliser_format">Utiliser <code>format()</code></h3>
-
-<p>On peut utiliser la fonction renvoyée par <code>format</code> pour formater une valeur monétaire selon la locale russe :</p>
-
-<pre class="brush: js">var options = {style: "currency", currency: "RUB"};
-var numberFormat = new Intl.NumberFormat("ru-RU", options);
-console.log(numberFormat.format(654321.987));
-// → "654 321,99 руб."</pre>
-
-<h3 id="Utiliser_format_avec_map">Utiliser <code>format()</code> avec <code>map()</code></h3>
-
-<p>On peut également utiliser la fonction <code>format</code> pour formater les nombres contenus dans un tableau. On notera que la fonction est liée à l'objet <code>NumberFormat</code> dont elle provient, on peut donc directement l'utiliser avec {{jsxref("Array.prototype.map")}}.</p>
-
-<pre class="brush: js">var a = [123456.789, 987654.321, 456789.123];
-var numberFormat = new Intl.NumberFormat("es-ES");
-var formatted = a.map(numberFormat.format);
-console.log(formatted.join("; "));
-// → "123.456,789; 987.654,321; 456.789,123"</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES Int 1.0', '#sec-11.3.2', 'Intl.NumberFormat.prototype.format')}}</td>
-   <td>{{Spec2('ES Int 1.0')}}</td>
-   <td>Définition initiale</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES Int 2.0', '#sec-11.3.2', 'Intl.NumberFormat.prototype.format')}}</td>
-   <td>{{Spec2('ES Int 2.0')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES Int Draft', '#sec-Intl.NumberFormat.prototype.format', 'Intl.NumberFormat.prototype.format')}}</td>
-   <td>{{Spec2('ES Int Draft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Intl.NumberFormat.format")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("NumberFormat", "Intl.NumberFormat")}}</li>
- <li>{{jsxref("Number.prototype.toLocaleString()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/intl/numberformat/format/index.md b/files/fr/web/javascript/reference/global_objects/intl/numberformat/format/index.md
new file mode 100644
index 0000000000..bac7a3220c
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/intl/numberformat/format/index.md
@@ -0,0 +1,75 @@
+---
+title: Intl.NumberFormat.prototype.format
+slug: Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/format
+tags:
+  - Internationalisation
+  - Intl
+  - JavaScript
+  - NumberFormat
+  - Propriété
+  - Prototype
+  - Reference
+  - i18n
+translation_of: Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/format
+original_slug: Web/JavaScript/Reference/Objets_globaux/Intl/NumberFormat/format
+---
+{{JSRef}}
+
+La méthode **`Intl.NumberFormat.prototype.format()`** formate un nombre en fonction des options de locales et de formats définis dans l'objet {{jsxref("NumberFormat", "Intl.NumberFormat")}} correspondant.
+
+{{EmbedInteractiveExample("pages/js/intl-numberformat-prototype-format.html")}}
+
+## Syntaxe
+
+    numberFormat.format(nombre)
+
+### Paramètres
+
+- `nombre`
+  - : Le nombre qu'on souhaite formater.
+
+## Description
+
+La fonction d'accesseur `format` permet de formater un nombre donné en une chaîne de caractères selon les options de locale et de format de l'objet {{jsxref("NumberFormat", "Intl.NumberFormat")}}.
+
+## Exemples
+
+### Utiliser `format()`
+
+On peut utiliser la fonction renvoyée par `format` pour formater une valeur monétaire selon la locale russe :
+
+```js
+var options = {style: "currency", currency: "RUB"};
+var numberFormat = new Intl.NumberFormat("ru-RU", options);
+console.log(numberFormat.format(654321.987));
+// → "654 321,99 руб."
+```
+
+### Utiliser `format()` avec `map()`
+
+On peut également utiliser la fonction `format` pour formater les nombres contenus dans un tableau. On notera que la fonction est liée à l'objet `NumberFormat` dont elle provient, on peut donc directement l'utiliser avec {{jsxref("Array.prototype.map")}}.
+
+```js
+var a = [123456.789, 987654.321, 456789.123];
+var numberFormat = new Intl.NumberFormat("es-ES");
+var formatted = a.map(numberFormat.format);
+console.log(formatted.join("; "));
+// → "123.456,789; 987.654,321; 456.789,123"
+```
+
+## Spécifications
+
+| Spécification                                                                                                                                    | État                             | Commentaires        |
+| ------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ------------------- |
+| {{SpecName('ES Int 1.0', '#sec-11.3.2', 'Intl.NumberFormat.prototype.format')}}                                         | {{Spec2('ES Int 1.0')}} | Définition initiale |
+| {{SpecName('ES Int 2.0', '#sec-11.3.2', 'Intl.NumberFormat.prototype.format')}}                                         | {{Spec2('ES Int 2.0')}} |                     |
+| {{SpecName('ES Int Draft', '#sec-Intl.NumberFormat.prototype.format', 'Intl.NumberFormat.prototype.format')}} | {{Spec2('ES Int Draft')}} |                     |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Intl.NumberFormat.format")}}
+
+## Voir aussi
+
+- {{jsxref("NumberFormat", "Intl.NumberFormat")}}
+- {{jsxref("Number.prototype.toLocaleString()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/intl/numberformat/formattoparts/index.html b/files/fr/web/javascript/reference/global_objects/intl/numberformat/formattoparts/index.html
deleted file mode 100644
index caadb942cb..0000000000
--- a/files/fr/web/javascript/reference/global_objects/intl/numberformat/formattoparts/index.html
+++ /dev/null
@@ -1,148 +0,0 @@
----
-title: Intl.NumberFormat.prototype.formatToParts()
-slug: Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/formatToParts
-tags:
-  - Internationalisation
-  - Intl
-  - JavaScript
-  - Méthode
-  - NumberFormat
-  - Prototype
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/formatToParts
-original_slug: Web/JavaScript/Reference/Objets_globaux/Intl/NumberFormat/formatToParts
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <strong><code>Intl.Numberformat.prototype.formatToParts()</code></strong> permet de produire des fragments de chaînes à partir d'un nombre pour le mettre en forme avec des formateurs <code>NumberTimeFormat</code>.</p>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">Intl.NumberFormat.prototype.formatToParts(nombre)</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>nombre</code> {{optional_inline}}</dt>
- <dd>Le nombre qu'on souhaite mettre en forme.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Un tableau {{jsxref("Array")}} contenant des objets correspondants aux différents fragments du nombres.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>La méthode <code>formatToParts()</code> est peut être utilisée lorsqu'on met en forme des chaînes de caractères représentant des valeurs numériques. Cette méthode renvoie un tableau ({{jsxref("Array")}}) d'objets qui sont les différents fragments spécifiques aux locales et qui permettent de construire des chaînes dans un format spécifiques tout en conservant les parties liées à la locale. <code>formatToParts()</code> renvoie une structure analogue à :</p>
-
-<pre class="brush: js">[
-  { type: "integer", value: "3" }
-  { type: "group", value: "." }
-  { type: "integer", value: "500" }
-]</pre>
-
-<p>Les valeurs possibles pour l'attribut <code>type</code> sont :</p>
-
-<dl>
- <dt><code>currency</code></dt>
- <dd>Le suffixe associé à la devise. Ce peut être le symbole "$", "€" ou bien le nom de la devise "Dollar", "Euro" selon la façon dont <code>currencyDisplay</code>  est indiquée.</dd>
- <dt><code>decimal</code></dt>
- <dd>Le séparateur décimal utilisé (".").</dd>
- <dt><code>fraction</code></dt>
- <dd>La partie fractionnaire du nombre.</dd>
- <dt><code>group</code></dt>
- <dd>La chaîne de caractères utilisée pour indiquer un groupe (",").</dd>
- <dt><code>infinity</code></dt>
- <dd>La chaîne de caractères qui représente la valeur {{jsxref("Infinity")}} ("∞").</dd>
- <dt><code>integer</code></dt>
- <dd>La partie entière du nombre.</dd>
- <dt><code>literal</code></dt>
- <dd>Toute chaîne de caractères littérale ou blanc utilisée dans le nombre mis en forme.</dd>
- <dt><code>minusSign</code></dt>
- <dd>La chaîne de caractères utilisée pour le signe moins ("-").</dd>
- <dt><code>nan</code></dt>
- <dd>La chaîne de caractères utilisée pour représenter la valeur {{jsxref("NaN")}} ("NaN").</dd>
- <dt><code>plusSign</code></dt>
- <dd>La chaîne de caractères utilisée pour le signe plus ("+").</dd>
- <dt><code>percentSign</code></dt>
- <dd>La châine de caractères utilisée pour le symbole pourcent ("%").</dd>
-</dl>
-
-<h2 id="Exemples">Exemples</h2>
-
-<p><code>NumberFormat</code> produit une chaîne localisée opaque qui ne peut pas être manipulée directement :</p>
-
-<pre class="brush: js">var number = 3500;
-
-var formatter = new Intl.NumberFormat('de-DE', {
-  style: 'currency',
-  currency: 'EUR'
-});
-
-formatter.format(number);
-// "3.500,00 €"
-</pre>
-
-<p>Toutefois, pour certaines applications, on souhaite adapter la mise en forme de cette chaîne de caractères. La méthode <code>formatToParts</code> permet d'obtenir cette flexibilité tout en conservant les différents fragments produits par <code>NumberFormat</code> :</p>
-
-<pre class="brush: js">formatter.formatToParts(number);
-
-// return value:
-[
-  { type: "integer",  value: "3"   }
-  { type: "group",    value: "."   }
-  { type: "integer",  value: "500" }
-  { type: "decimal",  value: ","   }
-  { type: "fraction", value: "00"  }
-  { type: "literal",  value: " "   }
-  { type: "currency", value: "€"   }
-]
-</pre>
-
-<p>Maintenant que la chaîne est décomposée, on peut la réassembler d'une façon spécifique. On peut, par exemple utiliser {{jsxref("Array.prototype.map()")}}, <a href="/fr/docs/Web/JavaScript/Reference/Fonctions/Fonctions_fléchées">une fonction fléchée</a>, une <a href="/fr/docs/Web/JavaScript/Reference/Instructions/switch">instruction <code>switch</code></a>, <a href="/fr/docs/Web/JavaScript/Reference/Littéraux_gabarits">des littéraux de gabarits</a> et {{jsxref("Array.prototype.reduce()")}}.</p>
-
-<pre class="brush: js">var numberString = formatter.formatToParts(number).map(({type, value}) =&gt; {
-  switch (type) {
-    case 'currency': return `&lt;strong&gt;${value}&lt;/strong&gt;`;
-    default : return value;
-  }
-}).reduce((string, part) =&gt; string + part);
-</pre>
-
-<p>Grâce à cette fonction, on pourra mettre en gras le suffixe associé à la devise :</p>
-
-<pre class="brush: js">console.log(numberString);
-// "3.500,00 &lt;strong&gt;€&lt;/strong&gt;"</pre>
-
-<h2 id="Prothèse_démulation_polyfill">Prothèse d'émulation (<em>polyfill</em>)</h2>
-
-<p>Une prothèse pour cette fonctionnalité est disponible <a href="https://github.com/zbraniecki/proposal-intl-formatToParts">dans le dépôt associé à la proposition</a>.</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES Int Draft', '#sec-Intl.NumberFormat.prototype.formatToParts', 'Intl.NumberFormat.prototype.formatToParts')}}</td>
-   <td>{{Spec2('ES Int Draft')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Intl.NumberFormat.formatToParts")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("NumberFormat", "Intl.NumberFormat")}}</li>
- <li>{{jsxref("NumberFormat.format", "Intl.NumberFormat.prototype.format")}}</li>
- <li>Formater des dates : {{jsxref("DateTimeFormat.formatToParts", "Intl.DateTimeFormat.prototype.formatToParts()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/intl/numberformat/formattoparts/index.md b/files/fr/web/javascript/reference/global_objects/intl/numberformat/formattoparts/index.md
new file mode 100644
index 0000000000..66f86323c6
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/intl/numberformat/formattoparts/index.md
@@ -0,0 +1,138 @@
+---
+title: Intl.NumberFormat.prototype.formatToParts()
+slug: Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/formatToParts
+tags:
+  - Internationalisation
+  - Intl
+  - JavaScript
+  - Méthode
+  - NumberFormat
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/formatToParts
+original_slug: Web/JavaScript/Reference/Objets_globaux/Intl/NumberFormat/formatToParts
+---
+{{JSRef}}
+
+La méthode **`Intl.Numberformat.prototype.formatToParts()`** permet de produire des fragments de chaînes à partir d'un nombre pour le mettre en forme avec des formateurs `NumberTimeFormat`.
+
+## Syntaxe
+
+    Intl.NumberFormat.prototype.formatToParts(nombre)
+
+### Paramètres
+
+- `nombre` {{optional_inline}}
+  - : Le nombre qu'on souhaite mettre en forme.
+
+### Valeur de retour
+
+Un tableau {{jsxref("Array")}} contenant des objets correspondants aux différents fragments du nombres.
+
+## Description
+
+La méthode `formatToParts()` est peut être utilisée lorsqu'on met en forme des chaînes de caractères représentant des valeurs numériques. Cette méthode renvoie un tableau ({{jsxref("Array")}}) d'objets qui sont les différents fragments spécifiques aux locales et qui permettent de construire des chaînes dans un format spécifiques tout en conservant les parties liées à la locale. `formatToParts()` renvoie une structure analogue à :
+
+```js
+[
+  { type: "integer", value: "3" }
+  { type: "group", value: "." }
+  { type: "integer", value: "500" }
+]
+```
+
+Les valeurs possibles pour l'attribut `type` sont :
+
+- `currency`
+  - : Le suffixe associé à la devise. Ce peut être le symbole "$", "€" ou bien le nom de la devise "Dollar", "Euro" selon la façon dont `currencyDisplay`  est indiquée.
+- `decimal`
+  - : Le séparateur décimal utilisé (".").
+- `fraction`
+  - : La partie fractionnaire du nombre.
+- `group`
+  - : La chaîne de caractères utilisée pour indiquer un groupe (",").
+- `infinity`
+  - : La chaîne de caractères qui représente la valeur {{jsxref("Infinity")}} ("∞").
+- `integer`
+  - : La partie entière du nombre.
+- `literal`
+  - : Toute chaîne de caractères littérale ou blanc utilisée dans le nombre mis en forme.
+- `minusSign`
+  - : La chaîne de caractères utilisée pour le signe moins ("-").
+- `nan`
+  - : La chaîne de caractères utilisée pour représenter la valeur {{jsxref("NaN")}} ("NaN").
+- `plusSign`
+  - : La chaîne de caractères utilisée pour le signe plus ("+").
+- `percentSign`
+  - : La châine de caractères utilisée pour le symbole pourcent ("%").
+
+## Exemples
+
+`NumberFormat` produit une chaîne localisée opaque qui ne peut pas être manipulée directement :
+
+```js
+var number = 3500;
+
+var formatter = new Intl.NumberFormat('de-DE', {
+  style: 'currency',
+  currency: 'EUR'
+});
+
+formatter.format(number);
+// "3.500,00 €"
+```
+
+Toutefois, pour certaines applications, on souhaite adapter la mise en forme de cette chaîne de caractères. La méthode `formatToParts` permet d'obtenir cette flexibilité tout en conservant les différents fragments produits par `NumberFormat` :
+
+```js
+formatter.formatToParts(number);
+
+// return value:
+[
+  { type: "integer",  value: "3"   }
+  { type: "group",    value: "."   }
+  { type: "integer",  value: "500" }
+  { type: "decimal",  value: ","   }
+  { type: "fraction", value: "00"  }
+  { type: "literal",  value: " "   }
+  { type: "currency", value: "€"   }
+]
+```
+
+Maintenant que la chaîne est décomposée, on peut la réassembler d'une façon spécifique. On peut, par exemple utiliser {{jsxref("Array.prototype.map()")}}, [une fonction fléchée](/fr/docs/Web/JavaScript/Reference/Fonctions/Fonctions_fléchées), une [instruction `switch`](/fr/docs/Web/JavaScript/Reference/Instructions/switch), [des littéraux de gabarits](/fr/docs/Web/JavaScript/Reference/Littéraux_gabarits) et {{jsxref("Array.prototype.reduce()")}}.
+
+```js
+var numberString = formatter.formatToParts(number).map(({type, value}) => {
+  switch (type) {
+    case 'currency': return `<strong>${value}</strong>`;
+    default : return value;
+  }
+}).reduce((string, part) => string + part);
+```
+
+Grâce à cette fonction, on pourra mettre en gras le suffixe associé à la devise :
+
+```js
+console.log(numberString);
+// "3.500,00 <strong>€</strong>"
+```
+
+## Prothèse d'émulation (_polyfill_)
+
+Une prothèse pour cette fonctionnalité est disponible [dans le dépôt associé à la proposition](https://github.com/zbraniecki/proposal-intl-formatToParts).
+
+## Spécifications
+
+| Spécification                                                                                                                                                        | État                             | Commentaires         |
+| -------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | -------------------- |
+| {{SpecName('ES Int Draft', '#sec-Intl.NumberFormat.prototype.formatToParts', 'Intl.NumberFormat.prototype.formatToParts')}} | {{Spec2('ES Int Draft')}} | Définition initiale. |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Intl.NumberFormat.formatToParts")}}
+
+## Voir aussi
+
+- {{jsxref("NumberFormat", "Intl.NumberFormat")}}
+- {{jsxref("NumberFormat.format", "Intl.NumberFormat.prototype.format")}}
+- Formater des dates : {{jsxref("DateTimeFormat.formatToParts", "Intl.DateTimeFormat.prototype.formatToParts()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/intl/numberformat/index.html b/files/fr/web/javascript/reference/global_objects/intl/numberformat/index.html
deleted file mode 100644
index 5c8188d5f9..0000000000
--- a/files/fr/web/javascript/reference/global_objects/intl/numberformat/index.html
+++ /dev/null
@@ -1,198 +0,0 @@
----
-title: Intl.NumberFormat
-slug: Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat
-tags:
-  - Internationalisation
-  - Intl
-  - JavaScript
-  - Reference
-  - i18n
-translation_of: Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat
-original_slug: Web/JavaScript/Reference/Objets_globaux/Intl/NumberFormat
----
-<div>{{JSRef}}</div>
-
-<p>L'objet <strong><code>Intl.NumberFormat</code></strong> est un constructeur permettant de créer des objets pour formater des nombres en fonction de la locale.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/intl-numberformat.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">new Intl.NumberFormat([<var>locales</var>[, <var>options</var>]])
-Intl.NumberFormat.call(<var>this</var>[, <var>locales</var>[, <var>options</var>]])</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>locales</code></dt>
- <dd>
- <p>Paramètre optionnel. Une chaine de caractères avec un identifiant de langue BCP 47, ou un tableau de ce type de chaine de caractères. Pour le format général et l'interprétation de l'argument <code>locales</code>, voir la page {{jsxref("Intl","Intl","#L'identification_et_le_choix_de_la_locale")}}. Les clefs d'extensions Unicode suivantes sont autorisées :</p>
-
- <dl>
-  <dt>nu</dt>
-  <dd>Le système numérique à utiliser. Parmi les valeurs possibles, on a : <code>"arab", "arabext", "bali", "beng", "deva", "fullwide", "gujr", "guru", "hanidec", "khmr", "knda", "laoo", "latn", "limb", "mlym", "mong", "mymr", "orya", "tamldec", "telu", "thai", "tibt".</code></dd>
- </dl>
- </dd>
- <dt><code>options</code></dt>
- <dd>
- <p>Paramètre optionnel. Un objet avec certaines ou toutes les propriétés suivantes :</p>
-
- <dl>
-  <dt><code>localeMatcher</code></dt>
-  <dd>L'algorithme de correspondance à utiliser pour la locale. Les valeurs possibles sont <code>"lookup"</code> et <code>"best fit"</code> ; le défaut est <code>"best fit"</code>. Pour des informations sur cette option, voir la page {{jsxref("Intl","Intl","##Choix_de_la_locale")}}.</dd>
-  <dt><code>style</code></dt>
-  <dd>Le style de formatage. Les valeurs possibles sont <code>"decimal"</code> pour l'affichage de nombres simple, <code>"currency"</code> pour un affichage en fonction de la devise et <code>"percent"</code> pour afficher des pourcentages. La valeur par défaut est <code>"decimal"</code>.</dd>
-  <dt><code>currency</code></dt>
-  <dd>La devise à utiliser pour le formatage. Les valeurs possibles sont les codes ISO 4217 pour les devises, tels que <code>"USD"</code> pour le dollar américain, <code>"EUR"</code> pour l'euro, ou <code>"CNY"</code> pour le yuan chinois. Voir la page listant <a href="http://www.currency-iso.org/en/home/tables/table-a1.html">les codes actuels pour les devises et les fonds</a> (en anglais). Il n'y a pas de valeur par défaut. Si le style choisi avec l'option <code>style</code> est "currency", la propriété <code>currency</code> doit être définie.</dd>
-  <dt><code>currencyDisplay</code></dt>
-  <dd>La façon d'afficher la devise dans le format courant. Les valeurs possibles sont <code>"symbol"</code> qui permet d'utiliser un symbole localisé comme '€', <code>"code"</code> qui affichera le code ISO de la devise (voir ci-avant), <code>"name"</code>  affichera un nom localisé pour la devise comme <code>"dollar"</code>. La valeur par défaut est <code>"symbol"</code>.</dd>
-  <dt><code>useGrouping</code></dt>
-  <dd>Cette option indique si on doit utiliser des séparateurs de groupes (comme les séparateurs de milliers ou autres comme lakhs et crores). Les valeurs possibles sont <code>true</code> et <code>false</code>. La valeur par défaut <code>true</code>.</dd>
- </dl>
-
- <p>Les propriétés suivantes peuvent être classées en deux groupes. Dans le premier on aura <code>minimumIntegerDigits</code>, <code>minimumFractionDigits</code>, <code>maximumFractionDigits</code> et dans le second on aura <code>minimumSignificantDigits</code> et <code>maximumSignificantDigits</code>. S'il existe une option définie pour le second groupe, les options du premier groupe seront ignorées.</p>
-
- <dl>
-  <dt><code>minimumIntegerDigits</code></dt>
-  <dd>Le nombre minimal de chiffres à utiliser pour la partie entière. Les valeurs possibles sont comprises entre 1 to 21. La valeur par défaut est 1.</dd>
-  <dt><code>minimumFractionDigits</code></dt>
-  <dd>Le nombre minimal de chiffres à utiliser pour la partie fractionnaire. Les valeurs possibles sont comprises entre 0 et 20. Pour les formats <code>"decimal"</code> et <code>"percent"</code>, la valeur par défaut est 0. La valeur par défaut pour le formatage monétaire (<code>"currency"</code>) correspond au nombre de chiffres défini par <a href="https://www.currency-iso.org/en/home/tables/table-a1.html">la liste de codes de devises ISO 4217</a>, si cette valeur n'est pas définie dans cette liste, on aura 2 chiffres.</dd>
-  <dt><code>maximumFractionDigits</code></dt>
-  <dd>Le nombre maximal de chiffres à utiliser pour représenter la partie fractionnaire. Les valeurs possibles sont comprises entre 0 et 20. Pour le format <code>"decimal"</code>, la valeur par défaut est le maximum entre 3 et <code>minimumFractionDigits</code>. Pour le format monétaire (<code>"currency"</code>), la valeur par défaut est le maximum entre  <code>minimumFractionDigits</code> et le nombre de chiffres prévus par la liste <a href="https://www.currency-iso.org/en/home/tables/table-a1.html">ISO 4217 des codes de devises</a> (ou 2 si cette information n'est pas disponible dans cette liste). Pour le format en pourcent, la valeur par défaut est le maximum entre <code>minimumFractionDigits</code> et 0.</dd>
-  <dt><code>minimumSignificantDigits</code></dt>
-  <dd>Le nombre minimal de chiffres significatifs à utiliser. Les valeurs possibles sont comprises entre 1 et 21. La valeur par défaut est 1.</dd>
-  <dt><code>maximumSignificantDigits</code></dt>
-  <dd>Le nombre maximal de chiffres significatifs à utiliser. Les valeurs possibles sont comprises entre 1 et 21. La valeur par défaut est <code>minimumSignificantDigits</code>.</dd>
- </dl>
- </dd>
-</dl>
-
-<h2 id="Description">Description</h2>
-
-<h3 id="Propriétés">Propriétés</h3>
-
-<dl>
- <dt>{{jsxref("NumberFormat.prototype", "Intl.NumberFormat.prototype")}}</dt>
- <dd>Permet d'ajouter des propriétés à toutes les instances.</dd>
-</dl>
-
-<h3 id="Méthodes">Méthodes</h3>
-
-<dl>
- <dt>{{jsxref("NumberFormat.supportedLocalesOf", "Intl.NumberFormat.supportedLocalesOf()")}}</dt>
- <dd>Renvoie un tableau des locales supportées parmi les locales données afin d'éviter d'utiliser la locale par défaut de l'environnement.</dd>
-</dl>
-
-<h2 id="Instances_de_NumberFormat">Instances de <code>NumberFormat</code></h2>
-
-<h3 id="Propriétés_2">Propriétés</h3>
-
-<p>Les instances de <code>NumberFormat</code> héritent des propriétés suivantes grâce à leur prototype :</p>
-
-<div>{{page('fr/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat/prototype','Properties')}}</div>
-
-<h3 id="Méthods">Méthods</h3>
-
-<div>
-<p>Les instances de <code>NumberFormat</code> héritent des méthodes suivantes grâce à leur prototype :</p>
-{{page('fr/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat/prototype','Methods')}}</div>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Usage_simple">Usage simple</h3>
-
-<p>Sans aucune spécification, le résultat sera une chaîne de caractères avec la locale et les options par défaut :</p>
-
-<pre class="brush: js">var nombre = 3500;
-
-console.log(new Intl.NumberFormat().format(nombre));
-// → "3 500" pour la locale fr
-</pre>
-
-<h3 id="Utiliser_locales">Utiliser <code>locales</code></h3>
-
-<p>Cet exemple illustre les variations possibles des formats numériques localisés. Si vous souhaitez que votre application utilise le format de la locale de l'utilisateur, assurez vous de l'indiquer via l'argument <code>locales</code> (voire avec d'autres locales de secours) :</p>
-
-<pre class="brush: js">var nombre = 123456.789;
-
-// L'allemand utilise la virgule comme séparateur décimal
-// et un point pour indiquer les milliers
-console.log(new Intl.NumberFormat("de-DE").format(nombre));
-// → 123.456,789
-
-// Dans la plupart des pays arabophones, on utilise les
-// chiffres arabo-hindîs
-console.log(new Intl.NumberFormat("ar-EG").format(nombre));
-// → ١٢٣٤٥٦٫٧٨٩
-
-// L'indien utilise des séparateurs pour les milliers,
-//les lakhs et les crores
-console.log(new Intl.NumberFormat("en-IN").format(nombre));
-// → 1,23,456.789
-
-// La clé d'extension nu indique une l'utilisation d'un système numérique
-// par exemple le système chinois
-console.log(new Intl.NumberFormat("zh-Hans-CN-u-nu-hanidec").format(nombre));
-// → 一二三,四五六.七八九
-
-// Lorsqu'une locale n'est pas supportée (par exemple le balinais)
-// on peut inclure une locale de secours (ici l'indonésien)
-console.log(new Intl.NumberFormat(["ban", "id"]).format(nombre));
-// → 123.456,789
-</pre>
-
-<h3 id="Utiliser_options">Utiliser <code>options</code></h3>
-
-<p>Les résultats fournis par <code>toLocaleString</code> peuvent être paramétrés grâce à l'argument <code>options</code> :</p>
-
-<pre class="brush: js">var nombre = 123456.789;
-
-// on affiche une devise avec le style "currency"
-console.log(new Intl.NumberFormat("de-DE", {style: "currency", currency: "EUR"}).format(nombre));
-// → 123.456,79 €
-
-// Le yen japonais n'a pas de centimes
-console.log(new Intl.NumberFormat("ja-JP", {style: "currency", currency: "JPY"}).format(nombre))
-// → ￥123,457
-
-// On se limite ici à trois chiffres significatifs
-console.log(new Intl.NumberFormat("en-IN", {maximumSignificantDigits: 3}).format(nombre));
-// → 1,23,000
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES Int 1.0', '#sec-11.1', 'Intl.NumberFormat')}}</td>
-   <td>{{Spec2('ES Int 1.0')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES Int 2.0', '#sec-11.1', 'Intl.NumberFormat')}}</td>
-   <td>{{Spec2('ES Int 2.0')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES Int Draft', '#numberformat-objects', 'Intl.NumberFormat')}}</td>
-   <td>{{Spec2('ES Int Draft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-
-
-<p>{{Compat("javascript.builtins.Intl.NumberFormat")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<p>{{page('/fr/docs/Web/JavaScript/Reference/Objets_globaux/Intl','Voir_aussi')}}</p>
diff --git a/files/fr/web/javascript/reference/global_objects/intl/numberformat/index.md b/files/fr/web/javascript/reference/global_objects/intl/numberformat/index.md
new file mode 100644
index 0000000000..248d95d5ed
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/intl/numberformat/index.md
@@ -0,0 +1,167 @@
+---
+title: Intl.NumberFormat
+slug: Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat
+tags:
+  - Internationalisation
+  - Intl
+  - JavaScript
+  - Reference
+  - i18n
+translation_of: Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat
+original_slug: Web/JavaScript/Reference/Objets_globaux/Intl/NumberFormat
+---
+{{JSRef}}
+
+L'objet **`Intl.NumberFormat`** est un constructeur permettant de créer des objets pour formater des nombres en fonction de la locale.
+
+{{EmbedInteractiveExample("pages/js/intl-numberformat.html")}}
+
+## Syntaxe
+
+    new Intl.NumberFormat([locales[, options]])
+    Intl.NumberFormat.call(this[, locales[, options]])
+
+### Paramètres
+
+- `locales`
+
+  - : Paramètre optionnel. Une chaine de caractères avec un identifiant de langue BCP 47, ou un tableau de ce type de chaine de caractères. Pour le format général et l'interprétation de l'argument `locales`, voir la page {{jsxref("Intl","Intl","#L'identification_et_le_choix_de_la_locale")}}. Les clefs d'extensions Unicode suivantes sont autorisées :
+
+    - nu
+      - : Le système numérique à utiliser. Parmi les valeurs possibles, on a : `"arab", "arabext", "bali", "beng", "deva", "fullwide", "gujr", "guru", "hanidec", "khmr", "knda", "laoo", "latn", "limb", "mlym", "mong", "mymr", "orya", "tamldec", "telu", "thai", "tibt".`
+
+- `options`
+
+  - : Paramètre optionnel. Un objet avec certaines ou toutes les propriétés suivantes :
+
+    - `localeMatcher`
+      - : L'algorithme de correspondance à utiliser pour la locale. Les valeurs possibles sont `"lookup"` et `"best fit"` ; le défaut est `"best fit"`. Pour des informations sur cette option, voir la page {{jsxref("Intl","Intl","##Choix_de_la_locale")}}.
+    - `style`
+      - : Le style de formatage. Les valeurs possibles sont `"decimal"` pour l'affichage de nombres simple, `"currency"` pour un affichage en fonction de la devise et `"percent"` pour afficher des pourcentages. La valeur par défaut est `"decimal"`.
+    - `currency`
+      - : La devise à utiliser pour le formatage. Les valeurs possibles sont les codes ISO 4217 pour les devises, tels que `"USD"` pour le dollar américain, `"EUR"` pour l'euro, ou `"CNY"` pour le yuan chinois. Voir la page listant [les codes actuels pour les devises et les fonds](http://www.currency-iso.org/en/home/tables/table-a1.html) (en anglais). Il n'y a pas de valeur par défaut. Si le style choisi avec l'option `style` est "currency", la propriété `currency` doit être définie.
+    - `currencyDisplay`
+      - : La façon d'afficher la devise dans le format courant. Les valeurs possibles sont `"symbol"` qui permet d'utiliser un symbole localisé comme '€', `"code"` qui affichera le code ISO de la devise (voir ci-avant), `"name"`  affichera un nom localisé pour la devise comme `"dollar"`. La valeur par défaut est `"symbol"`.
+    - `useGrouping`
+      - : Cette option indique si on doit utiliser des séparateurs de groupes (comme les séparateurs de milliers ou autres comme lakhs et crores). Les valeurs possibles sont `true` et `false`. La valeur par défaut `true`.
+
+    Les propriétés suivantes peuvent être classées en deux groupes. Dans le premier on aura `minimumIntegerDigits`, `minimumFractionDigits`, `maximumFractionDigits` et dans le second on aura `minimumSignificantDigits` et `maximumSignificantDigits`. S'il existe une option définie pour le second groupe, les options du premier groupe seront ignorées.
+
+    - `minimumIntegerDigits`
+      - : Le nombre minimal de chiffres à utiliser pour la partie entière. Les valeurs possibles sont comprises entre 1 to 21. La valeur par défaut est 1.
+    - `minimumFractionDigits`
+      - : Le nombre minimal de chiffres à utiliser pour la partie fractionnaire. Les valeurs possibles sont comprises entre 0 et 20. Pour les formats `"decimal"` et `"percent"`, la valeur par défaut est 0. La valeur par défaut pour le formatage monétaire (`"currency"`) correspond au nombre de chiffres défini par [la liste de codes de devises ISO 4217](https://www.currency-iso.org/en/home/tables/table-a1.html), si cette valeur n'est pas définie dans cette liste, on aura 2 chiffres.
+    - `maximumFractionDigits`
+      - : Le nombre maximal de chiffres à utiliser pour représenter la partie fractionnaire. Les valeurs possibles sont comprises entre 0 et 20. Pour le format `"decimal"`, la valeur par défaut est le maximum entre 3 et `minimumFractionDigits`. Pour le format monétaire (`"currency"`), la valeur par défaut est le maximum entre  `minimumFractionDigits` et le nombre de chiffres prévus par la liste [ISO 4217 des codes de devises](https://www.currency-iso.org/en/home/tables/table-a1.html) (ou 2 si cette information n'est pas disponible dans cette liste). Pour le format en pourcent, la valeur par défaut est le maximum entre `minimumFractionDigits` et 0.
+    - `minimumSignificantDigits`
+      - : Le nombre minimal de chiffres significatifs à utiliser. Les valeurs possibles sont comprises entre 1 et 21. La valeur par défaut est 1.
+    - `maximumSignificantDigits`
+      - : Le nombre maximal de chiffres significatifs à utiliser. Les valeurs possibles sont comprises entre 1 et 21. La valeur par défaut est `minimumSignificantDigits`.
+
+## Description
+
+### Propriétés
+
+- {{jsxref("NumberFormat.prototype", "Intl.NumberFormat.prototype")}}
+  - : Permet d'ajouter des propriétés à toutes les instances.
+
+### Méthodes
+
+- {{jsxref("NumberFormat.supportedLocalesOf", "Intl.NumberFormat.supportedLocalesOf()")}}
+  - : Renvoie un tableau des locales supportées parmi les locales données afin d'éviter d'utiliser la locale par défaut de l'environnement.
+
+## Instances de `NumberFormat`
+
+### Propriétés
+
+Les instances de `NumberFormat` héritent des propriétés suivantes grâce à leur prototype :
+
+{{page('fr/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat/prototype','Properties')}}
+
+### Méthods
+
+Les instances de `NumberFormat` héritent des méthodes suivantes grâce à leur prototype :
+
+{{page('fr/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat/prototype','Methods')}}
+
+## Exemples
+
+### Usage simple
+
+Sans aucune spécification, le résultat sera une chaîne de caractères avec la locale et les options par défaut :
+
+```js
+var nombre = 3500;
+
+console.log(new Intl.NumberFormat().format(nombre));
+// → "3 500" pour la locale fr
+```
+
+### Utiliser `locales`
+
+Cet exemple illustre les variations possibles des formats numériques localisés. Si vous souhaitez que votre application utilise le format de la locale de l'utilisateur, assurez vous de l'indiquer via l'argument `locales` (voire avec d'autres locales de secours) :
+
+```js
+var nombre = 123456.789;
+
+// L'allemand utilise la virgule comme séparateur décimal
+// et un point pour indiquer les milliers
+console.log(new Intl.NumberFormat("de-DE").format(nombre));
+// → 123.456,789
+
+// Dans la plupart des pays arabophones, on utilise les
+// chiffres arabo-hindîs
+console.log(new Intl.NumberFormat("ar-EG").format(nombre));
+// → ١٢٣٤٥٦٫٧٨٩
+
+// L'indien utilise des séparateurs pour les milliers,
+//les lakhs et les crores
+console.log(new Intl.NumberFormat("en-IN").format(nombre));
+// → 1,23,456.789
+
+// La clé d'extension nu indique une l'utilisation d'un système numérique
+// par exemple le système chinois
+console.log(new Intl.NumberFormat("zh-Hans-CN-u-nu-hanidec").format(nombre));
+// → 一二三,四五六.七八九
+
+// Lorsqu'une locale n'est pas supportée (par exemple le balinais)
+// on peut inclure une locale de secours (ici l'indonésien)
+console.log(new Intl.NumberFormat(["ban", "id"]).format(nombre));
+// → 123.456,789
+```
+
+### Utiliser `options`
+
+Les résultats fournis par `toLocaleString` peuvent être paramétrés grâce à l'argument `options` :
+
+```js
+var nombre = 123456.789;
+
+// on affiche une devise avec le style "currency"
+console.log(new Intl.NumberFormat("de-DE", {style: "currency", currency: "EUR"}).format(nombre));
+// → 123.456,79 €
+
+// Le yen japonais n'a pas de centimes
+console.log(new Intl.NumberFormat("ja-JP", {style: "currency", currency: "JPY"}).format(nombre))
+// → ￥123,457
+
+// On se limite ici à trois chiffres significatifs
+console.log(new Intl.NumberFormat("en-IN", {maximumSignificantDigits: 3}).format(nombre));
+// → 1,23,000
+```
+
+## Spécifications
+
+| Spécification                                                                                        | État                             | Commentaires         |
+| ---------------------------------------------------------------------------------------------------- | -------------------------------- | -------------------- |
+| {{SpecName('ES Int 1.0', '#sec-11.1', 'Intl.NumberFormat')}}                     | {{Spec2('ES Int 1.0')}} | Définition initiale. |
+| {{SpecName('ES Int 2.0', '#sec-11.1', 'Intl.NumberFormat')}}                     | {{Spec2('ES Int 2.0')}} |                      |
+| {{SpecName('ES Int Draft', '#numberformat-objects', 'Intl.NumberFormat')}} | {{Spec2('ES Int Draft')}} |                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Intl.NumberFormat")}}
+
+## Voir aussi
+
+{{page('/fr/docs/Web/JavaScript/Reference/Objets_globaux/Intl','Voir_aussi')}}
diff --git a/files/fr/web/javascript/reference/global_objects/intl/numberformat/resolvedoptions/index.html b/files/fr/web/javascript/reference/global_objects/intl/numberformat/resolvedoptions/index.html
deleted file mode 100644
index f980e6608a..0000000000
--- a/files/fr/web/javascript/reference/global_objects/intl/numberformat/resolvedoptions/index.html
+++ /dev/null
@@ -1,104 +0,0 @@
----
-title: Intl.NumberFormat.prototype.resolvedOptions()
-slug: Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/resolvedOptions
-tags:
-  - Internationalisation
-  - Intl
-  - JavaScript
-  - Méthode
-  - NumberFormat
-  - Prototype
-  - Reference
-  - i18n
-translation_of: Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/resolvedOptions
-original_slug: Web/JavaScript/Reference/Objets_globaux/Intl/NumberFormat/resolvedOptions
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <code><strong>Intl.NumberFormat.prototype.resolvedOptions()</strong></code> renvoie un nouvel objet dont les propriétés correspondent aux options de locales et de format calculées à l'initialisation de l'objet {{jsxref("NumberFormat", "Intl.NumberFormat")}}.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/intl-numberformat-prototype-resolvedoptions.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>numberFormat</var>.resolvedOptions()</pre>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Un objet dont les propriétés correspondent aux options de locale et de format calculées lors de l'initialisation de l'objet {{jsxref("NumberFormat", "Intl.NumberFormat")}}.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>Cette méthode renvoie un objet composé des propriétés suivantes :</p>
-
-<dl>
- <dt><code>locale</code></dt>
- <dd>La balise de langue BCP 47 qui est utilisée. Si des extensions Unicode avaient été rajoutées à la balise BCP 47 demandée, les paires de clés-valeurs qui ont été demandées et qui sont supportées sont inscrites dans <code>locale</code>.</dd>
- <dt><code>numberingSystem</code></dt>
- <dd>La valeur requise via l'extension Unicode <code>"nu"</code> ou celle qui est utilisée par défaut.</dd>
- <dt><code>style</code>, <code>useGrouping</code></dt>
- <dd>Les valeurs fournies pour ces propriétés via l'argument <code>options</code> ou bien les valeurs par défaut.</dd>
- <dt><code>currency</code>, <code>currencyDisplay</code></dt>
- <dd>Les valeurs fournies pour ces propriétés via l'argument <code>options</code> ou bien les valeurs par défaut. Ces valeurs sont présentes uniquement si <code>style</code> vaut <code>"currency"</code>.</dd>
-</dl>
-
-<p>Un seul des deux groupes suivants est inclus dans les propriétés :</p>
-
-<dl>
- <dt><code>minimumIntegerDigits</code>,<code>minimumFractionDigits</code>, <code>maximumFractionDigits</code></dt>
- <dd>Les valeurs fournies pour ces propriétés via l'argument <code>options</code> ou bien les valeurs par défaut. Ces propriétés ne sont présentes que si <code>minimumSignificantDigits</code> ou <code>maximumSignificantDigits</code> n'ont pas été fournies à l'argument <code>options</code>.</dd>
- <dt><code>minimumSignificantDigits</code>,<code>maximumSignificantDigits</code></dt>
- <dd>Les valeurs fournies pour ces propriétés via l'argument <code>options</code> ou bien les valeurs par défaut. Ces propriétés sont présentes si au moins une d'entre elles a été fournie via l'argument <code>options</code>.</dd>
-</dl>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Utiliser_la_méthode_resolvedOptions">Utiliser la méthode <code>resolvedOptions()</code></h3>
-
-<pre class="brush: js">var de = new Intl.NumberFormat('de-DE');
-var usedOptions = de.resolvedOptions();
-
-usedOptions.locale;                // "de-DE"
-usedOptions.numberingSystem;       // "latn"
-usedOption.style;                  // "decimal"
-usedOptions.minimumIntegerDigits;  // 1
-usedOptions.minimumFractionDigits; // 0
-usedOptions.maximumFractionDigits; // 3
-usedOptions.useGrouping;           // true</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES Int 1.0', '#sec-11.3.3', 'Intl.NumberFormat.prototype.resolvedOptions')}}</td>
-   <td>{{Spec2('ES Int 1.0')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES Int 2.0', '#sec-11.3.3', 'Intl.NumberFormat.prototype.resolvedOptions')}}</td>
-   <td>{{Spec2('ES Int 2.0')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES Int Draft', '#sec-Intl.NumberFormat.prototype.resolvedOptions', 'Intl.NumberFormat.prototype.resolvedOptions')}}</td>
-   <td>{{Spec2('ES Int Draft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Intl.NumberFormat.resolvedOptions")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("NumberFormat", "Intl.NumberFormat")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/intl/numberformat/resolvedoptions/index.md b/files/fr/web/javascript/reference/global_objects/intl/numberformat/resolvedoptions/index.md
new file mode 100644
index 0000000000..84d7961afb
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/intl/numberformat/resolvedoptions/index.md
@@ -0,0 +1,81 @@
+---
+title: Intl.NumberFormat.prototype.resolvedOptions()
+slug: Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/resolvedOptions
+tags:
+  - Internationalisation
+  - Intl
+  - JavaScript
+  - Méthode
+  - NumberFormat
+  - Prototype
+  - Reference
+  - i18n
+translation_of: Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/resolvedOptions
+original_slug: Web/JavaScript/Reference/Objets_globaux/Intl/NumberFormat/resolvedOptions
+---
+{{JSRef}}
+
+La méthode **`Intl.NumberFormat.prototype.resolvedOptions()`** renvoie un nouvel objet dont les propriétés correspondent aux options de locales et de format calculées à l'initialisation de l'objet {{jsxref("NumberFormat", "Intl.NumberFormat")}}.
+
+{{EmbedInteractiveExample("pages/js/intl-numberformat-prototype-resolvedoptions.html")}}
+
+## Syntaxe
+
+    numberFormat.resolvedOptions()
+
+### Valeur de retour
+
+Un objet dont les propriétés correspondent aux options de locale et de format calculées lors de l'initialisation de l'objet {{jsxref("NumberFormat", "Intl.NumberFormat")}}.
+
+## Description
+
+Cette méthode renvoie un objet composé des propriétés suivantes :
+
+- `locale`
+  - : La balise de langue BCP 47 qui est utilisée. Si des extensions Unicode avaient été rajoutées à la balise BCP 47 demandée, les paires de clés-valeurs qui ont été demandées et qui sont supportées sont inscrites dans `locale`.
+- `numberingSystem`
+  - : La valeur requise via l'extension Unicode `"nu"` ou celle qui est utilisée par défaut.
+- `style`, `useGrouping`
+  - : Les valeurs fournies pour ces propriétés via l'argument `options` ou bien les valeurs par défaut.
+- `currency`, `currencyDisplay`
+  - : Les valeurs fournies pour ces propriétés via l'argument `options` ou bien les valeurs par défaut. Ces valeurs sont présentes uniquement si `style` vaut `"currency"`.
+
+Un seul des deux groupes suivants est inclus dans les propriétés :
+
+- `minimumIntegerDigits`,`minimumFractionDigits`, `maximumFractionDigits`
+  - : Les valeurs fournies pour ces propriétés via l'argument `options` ou bien les valeurs par défaut. Ces propriétés ne sont présentes que si `minimumSignificantDigits` ou `maximumSignificantDigits` n'ont pas été fournies à l'argument `options`.
+- `minimumSignificantDigits`,`maximumSignificantDigits`
+  - : Les valeurs fournies pour ces propriétés via l'argument `options` ou bien les valeurs par défaut. Ces propriétés sont présentes si au moins une d'entre elles a été fournie via l'argument `options`.
+
+## Exemples
+
+### Utiliser la méthode `resolvedOptions()`
+
+```js
+var de = new Intl.NumberFormat('de-DE');
+var usedOptions = de.resolvedOptions();
+
+usedOptions.locale;                // "de-DE"
+usedOptions.numberingSystem;       // "latn"
+usedOption.style;                  // "decimal"
+usedOptions.minimumIntegerDigits;  // 1
+usedOptions.minimumFractionDigits; // 0
+usedOptions.maximumFractionDigits; // 3
+usedOptions.useGrouping;           // true
+```
+
+## Spécifications
+
+| Spécification                                                                                                                                                            | État                             | Commentaires         |
+| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | -------------------- |
+| {{SpecName('ES Int 1.0', '#sec-11.3.3', 'Intl.NumberFormat.prototype.resolvedOptions')}}                                                     | {{Spec2('ES Int 1.0')}} | Définition initiale. |
+| {{SpecName('ES Int 2.0', '#sec-11.3.3', 'Intl.NumberFormat.prototype.resolvedOptions')}}                                                     | {{Spec2('ES Int 2.0')}} |                      |
+| {{SpecName('ES Int Draft', '#sec-Intl.NumberFormat.prototype.resolvedOptions', 'Intl.NumberFormat.prototype.resolvedOptions')}} | {{Spec2('ES Int Draft')}} |                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Intl.NumberFormat.resolvedOptions")}}
+
+## Voir aussi
+
+- {{jsxref("NumberFormat", "Intl.NumberFormat")}}
diff --git a/files/fr/web/javascript/reference/global_objects/intl/numberformat/supportedlocalesof/index.html b/files/fr/web/javascript/reference/global_objects/intl/numberformat/supportedlocalesof/index.html
deleted file mode 100644
index 6e622f3240..0000000000
--- a/files/fr/web/javascript/reference/global_objects/intl/numberformat/supportedlocalesof/index.html
+++ /dev/null
@@ -1,95 +0,0 @@
----
-title: Intl.NumberFormat.supportedLocalesOf()
-slug: Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/supportedLocalesOf
-tags:
-  - Internationalisation
-  - Intl
-  - JavaScript
-  - Méthode
-  - NumberFormat
-  - Reference
-  - i18n
-translation_of: Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/supportedLocalesOf
-original_slug: Web/JavaScript/Reference/Objets_globaux/Intl/NumberFormat/supportedLocalesOf
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <code><strong>Intl.NumberFormat.supportedLocalesOf()</strong></code> renvoie un tableau de locales supportées parmi les locales fournies en argument afin d'éviter d'utiliser celle par défaut de l'environnement.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/intl-numberformat-prototype-supportedlocalesof.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">Intl.NumberFormat.supportedLocalesOf(<var>locales</var>[, <var>options</var>])</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>locales</code></dt>
- <dd>Une chaîne de caractères qui est une balise BCP 47 ou un tableau composé de telles chaînes. Pour plus d'informations sur la forme générale de l'argument <code>locales</code>, voir la page {{jsxref("Intl","Intl","#L'identification_et_le_choix_de_la_locale")}}.</dd>
- <dt><code>options</code></dt>
- <dd>
- <p>Un objet qui peut avoir la propriété suivante :</p>
-
- <dl>
-  <dt><code>localeMatcher</code></dt>
-  <dd>L'algorithme de correspondance des locales à utiliser. Les valeurs possibles sont "lookup" et "best fit". La valeur par défaut est "best fit". Pour plus d'informations,, voir la page {{jsxref("Intl","Intl","#Choix_de_la_locale")}}.</dd>
- </dl>
- </dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Un tableau de chaînes de caractères représentant un sous-ensemble des balises de langues qui sont prises en charge pour la mise en forme des nombres sans qu'il soit nécessaire d'utiliser la locale par défaut de l'environnement d'exécution.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>Cette méthode renvoie un tableau de locales supportées parmi les locales fournies en argument afin d'éviter d'utiliser celle par défaut de l'environnement. Les locales renvoyées sont celles considérées comme équivalentes aux locales fournies avec l'algorithme indiqué.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Utiliser_supportedLocalesOf">Utiliser <code>supportedLocalesOf()</code></h3>
-
-<p>Si on dispose d'un environnement qui supporte les locales indonésienne et allemande mais pas balinaise pour le formatage des dates et des heures, <code>supportedLocalesOf</code> renverra les balises BCP 47 pour l'indonésien et l'allemand (bien que la collation pinyin ne soit pas pertinente pour les nombres ni pour l'indonésien et qu'il soit peu probable qu'une variante indonésienne existe pour l'allemand). Pour l'exemple, on l'utilise l'algorithme <code>"lookup"</code>. Si on utilisait <code>"best fit"</code>, on pourrait considérer que l'indonésien est adéquat pour la locale balinaise (sachant que la plupart des balinais comprend l'indonésien) et donc également renvoyer la balise balinaise.</p>
-
-<pre class="brush: js">var locales = ["ban", "id-u-co-pinyin", "de-ID"];
-var options = {localeMatcher: "lookup"};
-console.log(Intl.NumberFormat.supportedLocalesOf(locales, options).join(", "));
-// → "id-u-co-pinyin, de-ID"</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES Int 1.0', '#sec-11.2.2', 'Intl.NumberFormat.supportedLocalesOf')}}</td>
-   <td>{{Spec2('ES Int 1.0')}}</td>
-   <td>Définition initiale</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES Int 2.0', '#sec-11.2.2', 'Intl.NumberFormat.supportedLocalesOf')}}</td>
-   <td>{{Spec2('ES Int 2.0')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES Int Draft', '#sec-Intl.NumberFormat.supportedLocalesOf', 'Intl.NumberFormat.supportedLocalesOf')}}</td>
-   <td>{{Spec2('ES Int Draft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Intl.NumberFormat.supportedLocalesOf")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("NumberFormat", "Intl.NumberFormat")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/intl/numberformat/supportedlocalesof/index.md b/files/fr/web/javascript/reference/global_objects/intl/numberformat/supportedlocalesof/index.md
new file mode 100644
index 0000000000..0e53d66889
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/intl/numberformat/supportedlocalesof/index.md
@@ -0,0 +1,71 @@
+---
+title: Intl.NumberFormat.supportedLocalesOf()
+slug: Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/supportedLocalesOf
+tags:
+  - Internationalisation
+  - Intl
+  - JavaScript
+  - Méthode
+  - NumberFormat
+  - Reference
+  - i18n
+translation_of: Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/supportedLocalesOf
+original_slug: Web/JavaScript/Reference/Objets_globaux/Intl/NumberFormat/supportedLocalesOf
+---
+{{JSRef}}
+
+La méthode **`Intl.NumberFormat.supportedLocalesOf()`** renvoie un tableau de locales supportées parmi les locales fournies en argument afin d'éviter d'utiliser celle par défaut de l'environnement.
+
+{{EmbedInteractiveExample("pages/js/intl-numberformat-prototype-supportedlocalesof.html")}}
+
+## Syntaxe
+
+    Intl.NumberFormat.supportedLocalesOf(locales[, options])
+
+### Paramètres
+
+- `locales`
+  - : Une chaîne de caractères qui est une balise BCP 47 ou un tableau composé de telles chaînes. Pour plus d'informations sur la forme générale de l'argument `locales`, voir la page {{jsxref("Intl","Intl","#L'identification_et_le_choix_de_la_locale")}}.
+- `options`
+
+  - : Un objet qui peut avoir la propriété suivante :
+
+    - `localeMatcher`
+      - : L'algorithme de correspondance des locales à utiliser. Les valeurs possibles sont "lookup" et "best fit". La valeur par défaut est "best fit". Pour plus d'informations,, voir la page {{jsxref("Intl","Intl","#Choix_de_la_locale")}}.
+
+### Valeur de retour
+
+Un tableau de chaînes de caractères représentant un sous-ensemble des balises de langues qui sont prises en charge pour la mise en forme des nombres sans qu'il soit nécessaire d'utiliser la locale par défaut de l'environnement d'exécution.
+
+## Description
+
+Cette méthode renvoie un tableau de locales supportées parmi les locales fournies en argument afin d'éviter d'utiliser celle par défaut de l'environnement. Les locales renvoyées sont celles considérées comme équivalentes aux locales fournies avec l'algorithme indiqué.
+
+## Exemples
+
+### Utiliser `supportedLocalesOf()`
+
+Si on dispose d'un environnement qui supporte les locales indonésienne et allemande mais pas balinaise pour le formatage des dates et des heures, `supportedLocalesOf` renverra les balises BCP 47 pour l'indonésien et l'allemand (bien que la collation pinyin ne soit pas pertinente pour les nombres ni pour l'indonésien et qu'il soit peu probable qu'une variante indonésienne existe pour l'allemand). Pour l'exemple, on l'utilise l'algorithme `"lookup"`. Si on utilisait `"best fit"`, on pourrait considérer que l'indonésien est adéquat pour la locale balinaise (sachant que la plupart des balinais comprend l'indonésien) et donc également renvoyer la balise balinaise.
+
+```js
+var locales = ["ban", "id-u-co-pinyin", "de-ID"];
+var options = {localeMatcher: "lookup"};
+console.log(Intl.NumberFormat.supportedLocalesOf(locales, options).join(", "));
+// → "id-u-co-pinyin, de-ID"
+```
+
+## Spécifications
+
+| Spécification                                                                                                                                            | État                             | Commentaires        |
+| -------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------------- |
+| {{SpecName('ES Int 1.0', '#sec-11.2.2', 'Intl.NumberFormat.supportedLocalesOf')}}                                             | {{Spec2('ES Int 1.0')}} | Définition initiale |
+| {{SpecName('ES Int 2.0', '#sec-11.2.2', 'Intl.NumberFormat.supportedLocalesOf')}}                                             | {{Spec2('ES Int 2.0')}} |                     |
+| {{SpecName('ES Int Draft', '#sec-Intl.NumberFormat.supportedLocalesOf', 'Intl.NumberFormat.supportedLocalesOf')}} | {{Spec2('ES Int Draft')}} |                     |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Intl.NumberFormat.supportedLocalesOf")}}
+
+## Voir aussi
+
+- {{jsxref("NumberFormat", "Intl.NumberFormat")}}
diff --git a/files/fr/web/javascript/reference/global_objects/intl/pluralrules/index.html b/files/fr/web/javascript/reference/global_objects/intl/pluralrules/index.html
deleted file mode 100644
index 1e106a5079..0000000000
--- a/files/fr/web/javascript/reference/global_objects/intl/pluralrules/index.html
+++ /dev/null
@@ -1,157 +0,0 @@
----
-title: Intl.PluralRules
-slug: Web/JavaScript/Reference/Global_Objects/Intl/PluralRules
-tags:
-  - Internationalisation
-  - Intl
-  - JavaScript
-  - PluralRules
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Intl/PluralRules
-original_slug: Web/JavaScript/Reference/Objets_globaux/Intl/PluralRules
----
-<div>{{JSRef}}</div>
-
-<p>L'objet <strong><code>Intl.PluralRules</code></strong> est un constructeur d'objets qui permettent de mettre en forme des chaînes de caractères en fonction des règles de nombre (pluriel) d'une langue donnée.</p>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><code>new Intl.PluralRules([<var>locales</var>[, <var>options</var>]])
-</code></pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>locales</code></dt>
- <dd>
- <p>Une chaine de caractères avec un identifiant de langue BCP 47, ou un tableau de ce type de chaine de caractères. Pour le format général et l'interprétation de l'argument <code>locales</code>, voir la page {{jsxref("Objets_globaux/Intl","Intl","#L'identification_et_le_choix_de_la_locale")}}.</p>
- </dd>
- <dt><code>options</code> {{optional_inline}}</dt>
- <dd>
- <p>Optionnel, un objet possédant tout ou partie des propriétés suivantes :</p>
-
- <dl>
-  <dt><code>localeMatcher</code></dt>
-  <dd>L'algorithme de correspondance à utiliser pour la locale. Les valeurs possibles sont <code>"lookup"</code> et <code>"best fit"</code> ; le défaut est <code>"best fit"</code>. Pour des informations sur cette option, voir la page {{jsxref("Objets_globaux/Intl","Intl","##Choix_de_la_locale")}}</dd>
-  <dt><code>type</code></dt>
-  <dd>Le type de numérotation à utiliser. Les valeurs possibles sont :
-  <ul>
-   <li><code>"cardinal"</code> pour les nombres cardinaux (la quantité de telle ou telle chose). Cette valeur est la valeur par défaut.</li>
-   <li><code>"ordinal"</code> pour les nombres ordinaux (l'ordre relatif de différentes choses « premier », « deuxième », « troisième »).</li>
-  </ul>
-  </dd>
- </dl>
- </dd>
-</dl>
-
-<h2 id="Description">Description</h2>
-
-<h3 id="Propriétés">Propriétés</h3>
-
-<dl>
- <dt>{{jsxref("PluralRules.prototype", "Intl.PluralRules.prototype")}}</dt>
- <dd>Cette propriété permet d'ajouter des propriétés aux objets <code>Intl.PluralRules</code>.</dd>
-</dl>
-
-<h3 id="Méthodes">Méthodes</h3>
-
-<dl>
- <dt>{{jsxref("PluralRules.supportedLocalesOf", "Intl.PluralRules.supportedLocalesOf()")}}</dt>
- <dd>Cette méthode renvoie un tableau contenant les locales prises en charge sans que le moteur ait à utiliser la locale par défaut du système d'exécution.</dd>
-</dl>
-
-<h2 id="Instances_de_PluralRules">Instances de <code>PluralRules</code></h2>
-
-<h3 id="Propriétés_2">Propriétés</h3>
-
-<p>Les instances de <code>PluralRules</code> héritent des propriétés suivantes de par leur prototype :</p>
-
-<div>{{page('/fr/docs/Web/JavaScript/Reference/Objets_globaux/PluralRules/prototype', 'Propriétés')}}</div>
-
-<h3 id="Méthodes_2">Méthodes</h3>
-
-<p>Les instances de <code>PluralRules</code> héritent des méthodes suivantes de par leur prototype :</p>
-
-<div>{{page('/fr/docs/Web/JavaScript/Reference/Objets_globaux/PluralRules/prototype', 'Méthodes')}}</div>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Exemple_simple">Exemple simple</h3>
-
-<p>Sans indiquer de locale, une chaîne formatée dans la locale par défaut et avec les options par défaut est renvoyée. On peut ainsi différencier entre le singulier et le pluriel (par exemple "chien" et "chiens").</p>
-
-<pre class="brush: js">var pr = new Intl.PluralRules();
-
-pr.select(0);
-// → 'one' si utilisée avec une locale anglais américain
-
-pr.select(1);
-// → 'one' si utilisée avec une locale anglais américain
-
-pr.select(2);
-// → 'other' si utilisée avec une locale anglais américain
-</pre>
-
-<h3 id="Utiliser_locales">Utiliser <code>locales</code></h3>
-
-<p>Dans cet exemple, on voit l'impact de la locale sur les règles de nombre. Afin de respecter la langue de l'utilisateur dans votre application, assurez vous d'indiquer cette langue (et éventuellement une langue de secours) grâce à l'argument <code>locales</code> :</p>
-
-<pre class="brush: js">// L'arabe possède plusieurs règles
-// de nombre
-
-new Intl.PluralRules('ar-EG').select(0);
-// → 'zero'
-new Intl.PluralRules('ar-EG').select(1);
-// → 'one'
-new Intl.PluralRules('ar-EG').select(2);
-// → 'two'
-new Intl.PluralRules('ar-EG').select(6);
-// → 'few'
-new Intl.PluralRules('ar-EG').select(18);
-// → 'many'
-</pre>
-
-<h3 id="Utiliser_options">Utiliser <code>options</code></h3>
-
-<p>Les résultats obtenus peuvent être adaptés grâce à l'argument <code>options</code>. Celui-ci possède une propriété appelée <code>type</code> qui peut valoir <code>ordinal</code>. Cela peut être utile afin de déterminer la forme d'un indicateur ordinal (par exemple, "1er", "2e", etc.).</p>
-
-<pre class="brush: js">var pr = new Intl.PluralRules('en-US', { type: 'ordinal' });
-
-pr.select(0);
-// → 'other'
-pr.select(1);
-// → 'one'
-pr.select(2);
-// → 'two'
-pr.select(3);
-// → 'few'
-pr.select(4);
-// → 'other'
-pr.select(42);
-// → 'two'
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td><a href="https://tc39.es/ecma402/#sec-intl-pluralrules-constructor">Proposition pour le constructeur <code>Intl.PluralRules</code></a></td>
-   <td>{{Spec2('ES Int Draft')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Intl.PluralRules")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<div>{{page('/fr/docs/Web/JavaScript/Reference/Objets_globaux/Intl', 'Voir_aussi')}}</div>
diff --git a/files/fr/web/javascript/reference/global_objects/intl/pluralrules/index.md b/files/fr/web/javascript/reference/global_objects/intl/pluralrules/index.md
new file mode 100644
index 0000000000..dcb8012ff4
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/intl/pluralrules/index.md
@@ -0,0 +1,136 @@
+---
+title: Intl.PluralRules
+slug: Web/JavaScript/Reference/Global_Objects/Intl/PluralRules
+tags:
+  - Internationalisation
+  - Intl
+  - JavaScript
+  - PluralRules
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Intl/PluralRules
+original_slug: Web/JavaScript/Reference/Objets_globaux/Intl/PluralRules
+---
+{{JSRef}}
+
+L'objet **`Intl.PluralRules`** est un constructeur d'objets qui permettent de mettre en forme des chaînes de caractères en fonction des règles de nombre (pluriel) d'une langue donnée.
+
+## Syntaxe
+
+    new Intl.PluralRules([locales[, options]])
+
+### Paramètres
+
+- `locales`
+  - : Une chaine de caractères avec un identifiant de langue BCP 47, ou un tableau de ce type de chaine de caractères. Pour le format général et l'interprétation de l'argument `locales`, voir la page {{jsxref("Objets_globaux/Intl","Intl","#L'identification_et_le_choix_de_la_locale")}}.
+- `options` {{optional_inline}}
+
+  - : Optionnel, un objet possédant tout ou partie des propriétés suivantes :
+
+    - `localeMatcher`
+      - : L'algorithme de correspondance à utiliser pour la locale. Les valeurs possibles sont `"lookup"` et `"best fit"` ; le défaut est `"best fit"`. Pour des informations sur cette option, voir la page {{jsxref("Objets_globaux/Intl","Intl","##Choix_de_la_locale")}}
+    - `type`
+
+      - : Le type de numérotation à utiliser. Les valeurs possibles sont :
+
+        - `"cardinal"` pour les nombres cardinaux (la quantité de telle ou telle chose). Cette valeur est la valeur par défaut.
+        - `"ordinal"` pour les nombres ordinaux (l'ordre relatif de différentes choses « premier », « deuxième », « troisième »).
+
+## Description
+
+### Propriétés
+
+- {{jsxref("PluralRules.prototype", "Intl.PluralRules.prototype")}}
+  - : Cette propriété permet d'ajouter des propriétés aux objets `Intl.PluralRules`.
+
+### Méthodes
+
+- {{jsxref("PluralRules.supportedLocalesOf", "Intl.PluralRules.supportedLocalesOf()")}}
+  - : Cette méthode renvoie un tableau contenant les locales prises en charge sans que le moteur ait à utiliser la locale par défaut du système d'exécution.
+
+## Instances de `PluralRules`
+
+### Propriétés
+
+Les instances de `PluralRules` héritent des propriétés suivantes de par leur prototype :
+
+{{page('/fr/docs/Web/JavaScript/Reference/Objets_globaux/PluralRules/prototype', 'Propriétés')}}
+
+### Méthodes
+
+Les instances de `PluralRules` héritent des méthodes suivantes de par leur prototype :
+
+{{page('/fr/docs/Web/JavaScript/Reference/Objets_globaux/PluralRules/prototype', 'Méthodes')}}
+
+## Exemples
+
+### Exemple simple
+
+Sans indiquer de locale, une chaîne formatée dans la locale par défaut et avec les options par défaut est renvoyée. On peut ainsi différencier entre le singulier et le pluriel (par exemple "chien" et "chiens").
+
+```js
+var pr = new Intl.PluralRules();
+
+pr.select(0);
+// → 'one' si utilisée avec une locale anglais américain
+
+pr.select(1);
+// → 'one' si utilisée avec une locale anglais américain
+
+pr.select(2);
+// → 'other' si utilisée avec une locale anglais américain
+```
+
+### Utiliser `locales`
+
+Dans cet exemple, on voit l'impact de la locale sur les règles de nombre. Afin de respecter la langue de l'utilisateur dans votre application, assurez vous d'indiquer cette langue (et éventuellement une langue de secours) grâce à l'argument `locales` :
+
+```js
+// L'arabe possède plusieurs règles
+// de nombre
+
+new Intl.PluralRules('ar-EG').select(0);
+// → 'zero'
+new Intl.PluralRules('ar-EG').select(1);
+// → 'one'
+new Intl.PluralRules('ar-EG').select(2);
+// → 'two'
+new Intl.PluralRules('ar-EG').select(6);
+// → 'few'
+new Intl.PluralRules('ar-EG').select(18);
+// → 'many'
+```
+
+### Utiliser `options`
+
+Les résultats obtenus peuvent être adaptés grâce à l'argument `options`. Celui-ci possède une propriété appelée `type` qui peut valoir `ordinal`. Cela peut être utile afin de déterminer la forme d'un indicateur ordinal (par exemple, "1er", "2e", etc.).
+
+```js
+var pr = new Intl.PluralRules('en-US', { type: 'ordinal' });
+
+pr.select(0);
+// → 'other'
+pr.select(1);
+// → 'one'
+pr.select(2);
+// → 'two'
+pr.select(3);
+// → 'few'
+pr.select(4);
+// → 'other'
+pr.select(42);
+// → 'two'
+```
+
+## Spécifications
+
+| Spécification                                                                                                    | État                             | Commentaires         |
+| ---------------------------------------------------------------------------------------------------------------- | -------------------------------- | -------------------- |
+| [Proposition pour le constructeur `Intl.PluralRules`](https://tc39.es/ecma402/#sec-intl-pluralrules-constructor) | {{Spec2('ES Int Draft')}} | Définition initiale. |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Intl.PluralRules")}}
+
+## Voir aussi
+
+{{page('/fr/docs/Web/JavaScript/Reference/Objets_globaux/Intl', 'Voir_aussi')}}
diff --git a/files/fr/web/javascript/reference/global_objects/intl/pluralrules/resolvedoptions/index.html b/files/fr/web/javascript/reference/global_objects/intl/pluralrules/resolvedoptions/index.html
deleted file mode 100644
index 8279bdd641..0000000000
--- a/files/fr/web/javascript/reference/global_objects/intl/pluralrules/resolvedoptions/index.html
+++ /dev/null
@@ -1,89 +0,0 @@
----
-title: Intl.PluralRules.prototype.resolvedOptions()
-slug: Web/JavaScript/Reference/Global_Objects/Intl/PluralRules/resolvedOptions
-tags:
-  - Internationalisation
-  - Intl
-  - JavaScript
-  - Méthode
-  - PluralRules
-  - Prototype
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Intl/PluralRules/resolvedOptions
-original_slug: Web/JavaScript/Reference/Objets_globaux/Intl/PluralRules/resolvedOptions
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <strong><code>Intl.PluralRules.prototype.resolvedOptions()</code></strong> renvoie un nouvel objet dont les propriétés reflètent la locale et les options de formatage relatives aux règles de nombre calculées lors de l'initialisation de l'objet {{jsxref("PluralRules")}}.</p>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><code><var>pluralRule</var>.resolvedOptions()</code></pre>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Un nouvel objet dont les propriétés reflètent la locale et les options de formatage relatives aux règles de nombre calculées lors de l'initialisation de l'objet {{jsxref("PluralRules")}}.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>L'objet produit possède les propriétés suivantes :</p>
-
-<dl>
- <dt><code>locale</code></dt>
- <dd>La balise de langue BCP 47 pour la locale réellement utilisée. Si une extension Unicode a été demandée dans la balise de langue BCP 47 ayant menée à cette locale, les paires clé/valeur qui ont été demandées et qui sont prises en charge dans cette locale sont incluses dans l'objet <code>locale</code>.</dd>
- <dt><code>pluralCategories</code></dt>
- <dd>Un tableau {{jsxref("Array")}} des règles de nombre utilisée pour la langue donnée.</dd>
- <dt><code>type</code></dt>
- <dd>Le type de règle utilisée (<code>cardinal</code> ou <code>ordinal</code>).</dd>
-</dl>
-
-<p>Seul l'un de ces deux groupes de propriétés est inclus :</p>
-
-<dl>
- <dt><code>minimumIntegerDigits</code>, <code>minimumFractionDigits</code>, <code>maximumFractionDigits</code></dt>
- <dd>Les valeurs fournies pour ces propriétés via l'argument <code>options</code> ou les valeurs par défaut. Ces propriétés sont uniquement présentes si aucunes des propriétés <code>minimumSignificantDigits</code> ou <code>maximumSignificantDigits</code> n'a été fournie dans l'argument <code>options</code>.</dd>
- <dt><code>minimumSignificantDigits</code>, <code>maximumSignificantDigits</code></dt>
- <dd>Les valeurs fournies par ces propriétés via l'argument <code>options</code> ou les valeurs par défaut. Ces propriétés sont uniquement présentes si au moins l'une d'entre elles a été fournie dans l'argument <code>options</code>.</dd>
-</dl>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Utiliser_resolvedOptions">Utiliser <code>resolvedOptions()</code></h3>
-
-<pre class="brush: js">var de = new Intl.PluralRules('de-DE');
-var usedOptions = de.resolvedOptions();
-
-usedOptions.locale;                // "de-DE"
-usedOptions.maximumFractionDigits; // 3
-usedOptions.minimumFractionDigits; // 0
-usedOptions.minimumIntegerDigits;  // 1
-usedOptions.pluralCategories;      // Array [ "one", "other" ]
-usedOptions.type;                  // "cardinal"
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td><a href="https://rawgit.com/caridy/intl-plural-rules-spec/master/index.html">Brouillon pour les règles de nombre avec <code>Intl</code></a></td>
-   <td>Brouillon</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Intl.PluralRules.resolvedOptions")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("PluralRules", "Intl.PluralRules")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/intl/pluralrules/resolvedoptions/index.md b/files/fr/web/javascript/reference/global_objects/intl/pluralrules/resolvedoptions/index.md
new file mode 100644
index 0000000000..3e43bd2616
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/intl/pluralrules/resolvedoptions/index.md
@@ -0,0 +1,73 @@
+---
+title: Intl.PluralRules.prototype.resolvedOptions()
+slug: Web/JavaScript/Reference/Global_Objects/Intl/PluralRules/resolvedOptions
+tags:
+  - Internationalisation
+  - Intl
+  - JavaScript
+  - Méthode
+  - PluralRules
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Intl/PluralRules/resolvedOptions
+original_slug: Web/JavaScript/Reference/Objets_globaux/Intl/PluralRules/resolvedOptions
+---
+{{JSRef}}
+
+La méthode **`Intl.PluralRules.prototype.resolvedOptions()`** renvoie un nouvel objet dont les propriétés reflètent la locale et les options de formatage relatives aux règles de nombre calculées lors de l'initialisation de l'objet {{jsxref("PluralRules")}}.
+
+## Syntaxe
+
+    pluralRule.resolvedOptions()
+
+### Valeur de retour
+
+Un nouvel objet dont les propriétés reflètent la locale et les options de formatage relatives aux règles de nombre calculées lors de l'initialisation de l'objet {{jsxref("PluralRules")}}.
+
+## Description
+
+L'objet produit possède les propriétés suivantes :
+
+- `locale`
+  - : La balise de langue BCP 47 pour la locale réellement utilisée. Si une extension Unicode a été demandée dans la balise de langue BCP 47 ayant menée à cette locale, les paires clé/valeur qui ont été demandées et qui sont prises en charge dans cette locale sont incluses dans l'objet `locale`.
+- `pluralCategories`
+  - : Un tableau {{jsxref("Array")}} des règles de nombre utilisée pour la langue donnée.
+- `type`
+  - : Le type de règle utilisée (`cardinal` ou `ordinal`).
+
+Seul l'un de ces deux groupes de propriétés est inclus :
+
+- `minimumIntegerDigits`, `minimumFractionDigits`, `maximumFractionDigits`
+  - : Les valeurs fournies pour ces propriétés via l'argument `options` ou les valeurs par défaut. Ces propriétés sont uniquement présentes si aucunes des propriétés `minimumSignificantDigits` ou `maximumSignificantDigits` n'a été fournie dans l'argument `options`.
+- `minimumSignificantDigits`, `maximumSignificantDigits`
+  - : Les valeurs fournies par ces propriétés via l'argument `options` ou les valeurs par défaut. Ces propriétés sont uniquement présentes si au moins l'une d'entre elles a été fournie dans l'argument `options`.
+
+## Exemples
+
+### Utiliser `resolvedOptions()`
+
+```js
+var de = new Intl.PluralRules('de-DE');
+var usedOptions = de.resolvedOptions();
+
+usedOptions.locale;                // "de-DE"
+usedOptions.maximumFractionDigits; // 3
+usedOptions.minimumFractionDigits; // 0
+usedOptions.minimumIntegerDigits;  // 1
+usedOptions.pluralCategories;      // Array [ "one", "other" ]
+usedOptions.type;                  // "cardinal"
+```
+
+## Spécifications
+
+| Spécification                                                                                                         | État      | Commentaires         |
+| --------------------------------------------------------------------------------------------------------------------- | --------- | -------------------- |
+| [Brouillon pour les règles de nombre avec `Intl`](https://rawgit.com/caridy/intl-plural-rules-spec/master/index.html) | Brouillon | Définition initiale. |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Intl.PluralRules.resolvedOptions")}}
+
+## Voir aussi
+
+- {{jsxref("PluralRules", "Intl.PluralRules")}}
diff --git a/files/fr/web/javascript/reference/global_objects/intl/pluralrules/select/index.html b/files/fr/web/javascript/reference/global_objects/intl/pluralrules/select/index.html
deleted file mode 100644
index d8a329b4a8..0000000000
--- a/files/fr/web/javascript/reference/global_objects/intl/pluralrules/select/index.html
+++ /dev/null
@@ -1,76 +0,0 @@
----
-title: Intl.PluralRules.select()
-slug: Web/JavaScript/Reference/Global_Objects/Intl/PluralRules/select
-tags:
-  - Internationalisation
-  - Intl
-  - JavaScript
-  - Méthode
-  - PluralRules
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Intl/PluralRules/select
-original_slug: Web/JavaScript/Reference/Objets_globaux/Intl/PluralRules/select
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <strong><code>Intl.PluralRules.prototype.select</code></strong> renvoie une chaîne de caractères qui indique la règle de nombre utilisée pour le formatage relatif à la locale.</p>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><code><var>pluralRule</var>.select(<var>nombre</var>)</code></pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>nombre</code></dt>
- <dd>Le nombre pour lequel on souhaite obtenir la règle de nombre associée.</dd>
-</dl>
-
-<h2 id="Description">Description</h2>
-
-<p>Cette fonction permet de sélectionner une règle de nombre en fonction de la locale et des options de formatage choisies via un objet {{jsxref("PluralRules")}}.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<pre class="brush: js"> new Intl.PluralRules('ar-EG').select(0);
-// → 'zero'
-
-new Intl.PluralRules('ar-EG').select(1);
-// → 'one'
-
-new Intl.PluralRules('ar-EG').select(2);
-// → 'two'
-
-new Intl.PluralRules('ar-EG').select(6);
-// → 'few'
-
-new Intl.PluralRules('ar-EG').select(18);
-// → 'many'
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td><a href="https://rawgit.com/caridy/intl-plural-rules-spec/master/index.html">Brouillon pour les règles de nombre avec Intl</a></td>
-   <td>{{Spec2('ES Int Draft')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Intl.PluralRules.select")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("PluralRules", "Intl.PluralRules")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/intl/pluralrules/select/index.md b/files/fr/web/javascript/reference/global_objects/intl/pluralrules/select/index.md
new file mode 100644
index 0000000000..cc4c837203
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/intl/pluralrules/select/index.md
@@ -0,0 +1,62 @@
+---
+title: Intl.PluralRules.select()
+slug: Web/JavaScript/Reference/Global_Objects/Intl/PluralRules/select
+tags:
+  - Internationalisation
+  - Intl
+  - JavaScript
+  - Méthode
+  - PluralRules
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Intl/PluralRules/select
+original_slug: Web/JavaScript/Reference/Objets_globaux/Intl/PluralRules/select
+---
+{{JSRef}}
+
+La méthode **`Intl.PluralRules.prototype.select`** renvoie une chaîne de caractères qui indique la règle de nombre utilisée pour le formatage relatif à la locale.
+
+## Syntaxe
+
+    pluralRule.select(nombre)
+
+### Paramètres
+
+- `nombre`
+  - : Le nombre pour lequel on souhaite obtenir la règle de nombre associée.
+
+## Description
+
+Cette fonction permet de sélectionner une règle de nombre en fonction de la locale et des options de formatage choisies via un objet {{jsxref("PluralRules")}}.
+
+## Exemples
+
+```js
+ new Intl.PluralRules('ar-EG').select(0);
+// → 'zero'
+
+new Intl.PluralRules('ar-EG').select(1);
+// → 'one'
+
+new Intl.PluralRules('ar-EG').select(2);
+// → 'two'
+
+new Intl.PluralRules('ar-EG').select(6);
+// → 'few'
+
+new Intl.PluralRules('ar-EG').select(18);
+// → 'many'
+```
+
+## Spécifications
+
+| Spécification                                                                                                       | État                             | Commentaires         |
+| ------------------------------------------------------------------------------------------------------------------- | -------------------------------- | -------------------- |
+| [Brouillon pour les règles de nombre avec Intl](https://rawgit.com/caridy/intl-plural-rules-spec/master/index.html) | {{Spec2('ES Int Draft')}} | Définition initiale. |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Intl.PluralRules.select")}}
+
+## Voir aussi
+
+- {{jsxref("PluralRules", "Intl.PluralRules")}}
diff --git a/files/fr/web/javascript/reference/global_objects/intl/pluralrules/supportedlocalesof/index.html b/files/fr/web/javascript/reference/global_objects/intl/pluralrules/supportedlocalesof/index.html
deleted file mode 100644
index 0c20fbcf7e..0000000000
--- a/files/fr/web/javascript/reference/global_objects/intl/pluralrules/supportedlocalesof/index.html
+++ /dev/null
@@ -1,81 +0,0 @@
----
-title: Intl.PluralRules.supportedLocalesOf()
-slug: Web/JavaScript/Reference/Global_Objects/Intl/PluralRules/supportedLocalesOf
-tags:
-  - Internationalisation
-  - Intl
-  - JavaScript
-  - Méthode
-  - PluralRules
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Intl/PluralRules/supportedLocalesOf
-original_slug: Web/JavaScript/Reference/Objets_globaux/Intl/PluralRules/supportedLocalesOf
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <strong><code>Intl.PluralRules.supportedLocalesOf()</code></strong> renvoie un tableau contenant les locales prises en charge, parmi celles passées en argument, pour les règles de nombre (sans avoir à utiliser la locale par défaut du système d'exécution).</p>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><code>Intl.PluralRules.supportedLocalesOf(<var>locales</var>[, <var>options</var>])</code></pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>locales</code></dt>
- <dd>Une chaîne de caractères représentant une balise de langue BCP 47 ou bien un tableau de telles chaînes. Pour la forme générale de l'argument <code>locales</code>, se référer à la page {{jsxref("Intl", "Intl", "#Identification_et_choix_de_la_locale", 1)}}.</dd>
- <dt><code>options</code> {{optional_inline}}</dt>
- <dd>
- <p>Optionnel. Un objet pouvant contenir la propriété suivante :</p>
-
- <dl>
-  <dt><code>localeMatcher</code></dt>
-  <dd>L'algorithme de correspondance à utiliser pour la locale. Les valeurs possibles sont <code>"lookup"</code> et <code>"best fit"</code> ; le défaut est <code>"best fit"</code>. Pour des informations sur cette option, voir la page {{jsxref("Objets_globaux/Intl","Intl","##Choix_de_la_locale")}}.</dd>
- </dl>
- </dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Un tableau de chaînes de caractères représentant le sous-ensemble de balises de langues prises en charge pour le formatage avec les règles de nombre (sans qu'il soit nécssaire d'utiliser la locale par défaut du système d'exploitation).</p>
-
-<h2 id="Description">Description</h2>
-
-<p>Cette méthode renvoie un tableau contenant un sous-ensemble des balises de langue fournies dans l'argument <code>locales</code>. Les balises de langue sont celles qui sont prises en charge par l'environnement pour le formatage avec les règles de nombre et pour lesquelles la locale respecte l'algorithme de correspondance indiqué. Les locales de ce tableau évitent d'avoir à utiliser la locale du système d'exécution par défaut.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<p>Dans l'hypothèse où on utilise un système prenant en charge l'indonésien, l'allemand mais pas le balinais pour le formatage avec les règles de nombre, <code>supportedLocalesOf</code> renvoie les balises de langue indonésienne et allemande inchangées bien que la collation <code>pinyin</code> ne soit pas pertinente ni utilisée avec l'indonésien (et qu'il est peu probable qu'une variante indonésienne pour l'allemand soit prise en charge). On notera que l'algorithme de correspondance <code>"lookup"</code> est utilisé ici. L'algorithme <code>"best fit"</code> aurait pu déterminer que l'indonésien aurait pu remplacer le balinais car la plupart des personnes parlant le balinais comprend également l'indonésien, la fonction aurait alors pu remplacer la balise de langue balinaise.</p>
-
-<pre class="brush: js">var locales = ['ban', 'id-u-co-pinyin', 'de-ID'];
-var options = { localeMatcher: 'lookup' };
-console.log(Intl.PluralRules.supportedLocalesOf(locales, options).join(', '));
-// → "id-u-co-pinyin, de-ID"
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td><a href="https://rawgit.com/caridy/intl-plural-rules-spec/master/index.html">Brouillon pour les règles de nombre avec <code>Intl</code></a></td>
-   <td>{{Spec2('ES Int Draft')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Intl.PluralRules.supportedLocalesOf")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("PluralRules", "Intl.PluralRules")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/intl/pluralrules/supportedlocalesof/index.md b/files/fr/web/javascript/reference/global_objects/intl/pluralrules/supportedlocalesof/index.md
new file mode 100644
index 0000000000..8f93737a64
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/intl/pluralrules/supportedlocalesof/index.md
@@ -0,0 +1,64 @@
+---
+title: Intl.PluralRules.supportedLocalesOf()
+slug: Web/JavaScript/Reference/Global_Objects/Intl/PluralRules/supportedLocalesOf
+tags:
+  - Internationalisation
+  - Intl
+  - JavaScript
+  - Méthode
+  - PluralRules
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Intl/PluralRules/supportedLocalesOf
+original_slug: Web/JavaScript/Reference/Objets_globaux/Intl/PluralRules/supportedLocalesOf
+---
+{{JSRef}}
+
+La méthode **`Intl.PluralRules.supportedLocalesOf()`** renvoie un tableau contenant les locales prises en charge, parmi celles passées en argument, pour les règles de nombre (sans avoir à utiliser la locale par défaut du système d'exécution).
+
+## Syntaxe
+
+    Intl.PluralRules.supportedLocalesOf(locales[, options])
+
+### Paramètres
+
+- `locales`
+  - : Une chaîne de caractères représentant une balise de langue BCP 47 ou bien un tableau de telles chaînes. Pour la forme générale de l'argument `locales`, se référer à la page {{jsxref("Intl", "Intl", "#Identification_et_choix_de_la_locale", 1)}}.
+- `options` {{optional_inline}}
+
+  - : Optionnel. Un objet pouvant contenir la propriété suivante :
+
+    - `localeMatcher`
+      - : L'algorithme de correspondance à utiliser pour la locale. Les valeurs possibles sont `"lookup"` et `"best fit"` ; le défaut est `"best fit"`. Pour des informations sur cette option, voir la page {{jsxref("Objets_globaux/Intl","Intl","##Choix_de_la_locale")}}.
+
+### Valeur de retour
+
+Un tableau de chaînes de caractères représentant le sous-ensemble de balises de langues prises en charge pour le formatage avec les règles de nombre (sans qu'il soit nécssaire d'utiliser la locale par défaut du système d'exploitation).
+
+## Description
+
+Cette méthode renvoie un tableau contenant un sous-ensemble des balises de langue fournies dans l'argument `locales`. Les balises de langue sont celles qui sont prises en charge par l'environnement pour le formatage avec les règles de nombre et pour lesquelles la locale respecte l'algorithme de correspondance indiqué. Les locales de ce tableau évitent d'avoir à utiliser la locale du système d'exécution par défaut.
+
+## Exemples
+
+Dans l'hypothèse où on utilise un système prenant en charge l'indonésien, l'allemand mais pas le balinais pour le formatage avec les règles de nombre, `supportedLocalesOf` renvoie les balises de langue indonésienne et allemande inchangées bien que la collation `pinyin` ne soit pas pertinente ni utilisée avec l'indonésien (et qu'il est peu probable qu'une variante indonésienne pour l'allemand soit prise en charge). On notera que l'algorithme de correspondance `"lookup"` est utilisé ici. L'algorithme `"best fit"` aurait pu déterminer que l'indonésien aurait pu remplacer le balinais car la plupart des personnes parlant le balinais comprend également l'indonésien, la fonction aurait alors pu remplacer la balise de langue balinaise.
+
+```js
+var locales = ['ban', 'id-u-co-pinyin', 'de-ID'];
+var options = { localeMatcher: 'lookup' };
+console.log(Intl.PluralRules.supportedLocalesOf(locales, options).join(', '));
+// → "id-u-co-pinyin, de-ID"
+```
+
+## Spécifications
+
+| Spécification                                                                                                         | État                             | Commentaires         |
+| --------------------------------------------------------------------------------------------------------------------- | -------------------------------- | -------------------- |
+| [Brouillon pour les règles de nombre avec `Intl`](https://rawgit.com/caridy/intl-plural-rules-spec/master/index.html) | {{Spec2('ES Int Draft')}} | Définition initiale. |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Intl.PluralRules.supportedLocalesOf")}}
+
+## Voir aussi
+
+- {{jsxref("PluralRules", "Intl.PluralRules")}}
diff --git a/files/fr/web/javascript/reference/global_objects/intl/relativetimeformat/format/index.html b/files/fr/web/javascript/reference/global_objects/intl/relativetimeformat/format/index.html
deleted file mode 100644
index ad924c3837..0000000000
--- a/files/fr/web/javascript/reference/global_objects/intl/relativetimeformat/format/index.html
+++ /dev/null
@@ -1,97 +0,0 @@
----
-title: Intl.RelativeTimeFormat.prototype.format()
-slug: Web/JavaScript/Reference/Global_Objects/Intl/RelativeTimeFormat/format
-tags:
-  - Internationalisation
-  - Intl
-  - JavaScript
-  - Méthode
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Intl/RelativeTimeFormat/format
-original_slug: Web/JavaScript/Reference/Objets_globaux/Intl/RelativeTimeFormat/format
----
-<div>{{JSRef}}</div>
-
-<div>La méthode <strong><code>Intl.RelativeTimeFormat.prototype.format()</code></strong> permet de formater une valeur avec une unité selon des options de locale et de formatage stockées dans l'objet {{jsxref("RelativeTimeFormat")}}.</div>
-
-<div>{{EmbedInteractiveExample("pages/js/intl-relativetimeformat-prototype-format.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="brush: js"><code>RelativeTimeFormat.format(valeur, unite)</code></pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>valeur</code></dt>
- <dd>Une valeur numérique qu'on souhaite utiliser pour exprimer un temps relatif dans un message internationalisé.</dd>
- <dt><code>unite</code></dt>
- <dd>L'unité à utiliser pour le message internationalisé exprimant le temps relatif. Les valeurs possibles pour cet argument sont <code>"year"</code> (année), <code>"quarter"</code> (trimestre), <code>"month"</code> (mois), <code>"week"</code> (semaine), <code>"day"</code> (jour), <code>"hour"</code> (heure), <code>"minute"</code> (minute), <code>"second"</code> (secondes). Les formes plurielles sont également autorisées.</dd>
-</dl>
-
-<h2 id="Description">Description</h2>
-
-<p>La fonction renvoyée par l'accesseur <code>format</code> permet de formater une valeur et une unité en une chaîne de caractères en prenant en compte la locale et les options de formatage associées à l'objet {{jsxref("RelativeTimeFormat", "Intl.RelativeTimeFormat")}} utilisé.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Utilisation_simple_de_format">Utilisation simple de <code>format</code></h3>
-
-<p>L'exemple suivant illustre comment créer un outil de formatage pour les valeurs de temps relatifs en anglais.</p>
-
-<pre class="brush: js">// On crée un outil de formatage pour les valeurs exprimant
-// les temps relatifs en anglais, avec les valeurs par défaut
-// utilisées explicitement.
-const rtf = new Intl.RelativeTimeFormat("en", {
-    localeMatcher: "best fit", // autre valeur possible : "lookup"
-    numeric: "always", // autre valeur possible : "auto"
-    style: "long", // autres valeurs possibles : "short" ou "narrow"
-});
-
-// Formatage d'une valeur relative négative.
-rtf.format(-1, "day");
-// &gt; "1 day ago"
-
-// Formatage d'une valeur relative positive.
-rtf.format(1, "day");
-// &gt; "in 1 day"</pre>
-
-<h3 id="Utiliser_loption_auto">Utiliser l'option <code>auto</code></h3>
-
-<p>Si on passe l'option <code>numeric:auto</code>, c'est la chaîne de caractères <code>yesterday</code> ou <code>tomorrow</code> qui sera produite (en anglais) plutôt que <code>1 day ago</code> ou <code>in 1 day</code>. Cela permet de n'avoir pas nécessairement une valeur numérique en résultat.</p>
-
-<pre class="brush: js">// On crée un formateur en anglais avec l'option
-// numeric: "auto".
-const rtf = new Intl.RelativeTimeFormat("en", { numeric: "auto" });
-
-// Formatage d'une valeur relative négative.
-rtf.format(-1, "day");
-// &gt; "yesterday"
-
-// Formatage d'une valeur relative positive.
-rtf.format(1, "day");
-// &gt; "tomorrow"
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><a href="https://tc39.github.io/proposal-intl-relative-time/#sec-Intl.RelativeTimeFormat.prototype.format">Proposition pour <code>Intl.RelativeTime</code></a></td>
-   <td>Proposition de niveau 3</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Intl.RelativeTimeFormat.format")}}</p>
diff --git a/files/fr/web/javascript/reference/global_objects/intl/relativetimeformat/format/index.md b/files/fr/web/javascript/reference/global_objects/intl/relativetimeformat/format/index.md
new file mode 100644
index 0000000000..3f1e19cee0
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/intl/relativetimeformat/format/index.md
@@ -0,0 +1,83 @@
+---
+title: Intl.RelativeTimeFormat.prototype.format()
+slug: Web/JavaScript/Reference/Global_Objects/Intl/RelativeTimeFormat/format
+tags:
+  - Internationalisation
+  - Intl
+  - JavaScript
+  - Méthode
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Intl/RelativeTimeFormat/format
+original_slug: Web/JavaScript/Reference/Objets_globaux/Intl/RelativeTimeFormat/format
+---
+{{JSRef}}La méthode **`Intl.RelativeTimeFormat.prototype.format()`** permet de formater une valeur avec une unité selon des options de locale et de formatage stockées dans l'objet {{jsxref("RelativeTimeFormat")}}.{{EmbedInteractiveExample("pages/js/intl-relativetimeformat-prototype-format.html")}}
+
+## Syntaxe
+
+```js
+RelativeTimeFormat.format(valeur, unite)
+```
+
+### Paramètres
+
+- `valeur`
+  - : Une valeur numérique qu'on souhaite utiliser pour exprimer un temps relatif dans un message internationalisé.
+- `unite`
+  - : L'unité à utiliser pour le message internationalisé exprimant le temps relatif. Les valeurs possibles pour cet argument sont `"year"` (année), `"quarter"` (trimestre), `"month"` (mois), `"week"` (semaine), `"day"` (jour), `"hour"` (heure), `"minute"` (minute), `"second"` (secondes). Les formes plurielles sont également autorisées.
+
+## Description
+
+La fonction renvoyée par l'accesseur `format` permet de formater une valeur et une unité en une chaîne de caractères en prenant en compte la locale et les options de formatage associées à l'objet {{jsxref("RelativeTimeFormat", "Intl.RelativeTimeFormat")}} utilisé.
+
+## Exemples
+
+### Utilisation simple de `format`
+
+L'exemple suivant illustre comment créer un outil de formatage pour les valeurs de temps relatifs en anglais.
+
+```js
+// On crée un outil de formatage pour les valeurs exprimant
+// les temps relatifs en anglais, avec les valeurs par défaut
+// utilisées explicitement.
+const rtf = new Intl.RelativeTimeFormat("en", {
+    localeMatcher: "best fit", // autre valeur possible : "lookup"
+    numeric: "always", // autre valeur possible : "auto"
+    style: "long", // autres valeurs possibles : "short" ou "narrow"
+});
+
+// Formatage d'une valeur relative négative.
+rtf.format(-1, "day");
+// > "1 day ago"
+
+// Formatage d'une valeur relative positive.
+rtf.format(1, "day");
+// > "in 1 day"
+```
+
+### Utiliser l'option `auto`
+
+Si on passe l'option `numeric:auto`, c'est la chaîne de caractères `yesterday` ou `tomorrow` qui sera produite (en anglais) plutôt que `1 day ago` ou `in 1 day`. Cela permet de n'avoir pas nécessairement une valeur numérique en résultat.
+
+```js
+// On crée un formateur en anglais avec l'option
+// numeric: "auto".
+const rtf = new Intl.RelativeTimeFormat("en", { numeric: "auto" });
+
+// Formatage d'une valeur relative négative.
+rtf.format(-1, "day");
+// > "yesterday"
+
+// Formatage d'une valeur relative positive.
+rtf.format(1, "day");
+// > "tomorrow"
+```
+
+## Spécifications
+
+| Spécification                                                                                                                            | État                    | Commentaires |
+| ---------------------------------------------------------------------------------------------------------------------------------------- | ----------------------- | ------------ |
+| [Proposition pour `Intl.RelativeTime`](https://tc39.github.io/proposal-intl-relative-time/#sec-Intl.RelativeTimeFormat.prototype.format) | Proposition de niveau 3 |              |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Intl.RelativeTimeFormat.format")}}
diff --git a/files/fr/web/javascript/reference/global_objects/intl/relativetimeformat/formattoparts/index.html b/files/fr/web/javascript/reference/global_objects/intl/relativetimeformat/formattoparts/index.html
deleted file mode 100644
index c8c141e6e3..0000000000
--- a/files/fr/web/javascript/reference/global_objects/intl/relativetimeformat/formattoparts/index.html
+++ /dev/null
@@ -1,80 +0,0 @@
----
-title: Intl.RelativeTimeFormat.prototype.formatToParts()
-slug: Web/JavaScript/Reference/Global_Objects/Intl/RelativeTimeFormat/formatToParts
-tags:
-  - Internationalisation
-  - Intl
-  - JavaScript
-  - Méthode
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Intl/RelativeTimeFormat/formatToParts
-original_slug: Web/JavaScript/Reference/Objets_globaux/Intl/RelativeTimeFormat/formatToParts
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <strong><code>Intl.RelativeTimeFormat.prototype.formatToParts()</code></strong> est une méthode analogue à <code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Intl.RelativeTimeFormat/format">format()</a></code> qui renvoie un tableau d'objets contenant les différentes parties représentant le message internationalisé pour le temps relatif.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/intl-relativetimeformat-prototype-formattoparts.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="brush: js"><code>RelativeTimeFormat.formatToParts(valeur, unite)</code></pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>valeur</code></dt>
- <dd>Une valeur numérique qu'on souhaite formater pour un message internationalisé exprimant un temps relatif.</dd>
- <dt><code>unite</code></dt>
- <dd>L'unité à utiliser pour le message internationalisé exprimant le temps relatif. Les valeurs possibles pour cet argument sont <code>"year"</code> (année), <code>"quarter"</code> (trimestre), <code>"month"</code> (mois), <code>"week"</code> (semaine), <code>"day"</code> (jour), <code>"hour"</code> (heure), <code>"minute"</code> (minute), <code>"second"</code> (secondes). Les formes plurielles sont également autorisées.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Un tableau ({{jsxref("Array")}}) d'objets contenant les fragments composant la chaîne de caractères localisée et mise en forme pour exprimer le temps relatif.</p>
-
-<h2 id="Description">Description</h2>
-
-<div>La méthode <code>Intl.RelativeTimeFormat.prototype.formatToParts()</code> est une méthode analogue à la méthode <code>format()</code> mais renvoie un tableau d'objets représentant chacun une partie du message internationalisé. Ces objets ont deux propriétés : <code>type</code> et <code>value</code>. Si un des composants provient de <code>NumberFormat</code>, il aura une propriété <code>unit</code> indiquant l'unité utilisée pour le formatage.</div>
-
-<h2 id="Exemples">Exemples</h2>
-
-<pre class="brush: js">const rtf = new Intl.RelativeTimeFormat("en", { numeric: "auto" });
-
-// Format relative time using the day unit.
-rtf.formatToParts(-1, "day");
-// &gt; [{ type: "literal", value: "yesterday"}]
-
-rtf.formatToParts(100, "day");
-// &gt; [{ type: "literal", value: "in " },
-      { type: "integer", value: "100", unit: "day" },
-      { type: "literal", value: " days" }]</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécifications</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><a href="https://tc39.github.io/proposal-intl-relative-time/#sec-Intl.RelativeTimeFormat.prototype.formatToParts">Proposition pour <code>Intl.RelativeTime</code></a></td>
-   <td>Proposition de niveau 3</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Intl.RelativeTimeFormat.formatToParts")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("RelativeTimeFormat", "Intl.RelativeTimeFormat")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/intl/relativetimeformat/formattoparts/index.md b/files/fr/web/javascript/reference/global_objects/intl/relativetimeformat/formattoparts/index.md
new file mode 100644
index 0000000000..be57f9e3d3
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/intl/relativetimeformat/formattoparts/index.md
@@ -0,0 +1,67 @@
+---
+title: Intl.RelativeTimeFormat.prototype.formatToParts()
+slug: Web/JavaScript/Reference/Global_Objects/Intl/RelativeTimeFormat/formatToParts
+tags:
+  - Internationalisation
+  - Intl
+  - JavaScript
+  - Méthode
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Intl/RelativeTimeFormat/formatToParts
+original_slug: Web/JavaScript/Reference/Objets_globaux/Intl/RelativeTimeFormat/formatToParts
+---
+{{JSRef}}
+
+La méthode **`Intl.RelativeTimeFormat.prototype.formatToParts()`** est une méthode analogue à [`format()`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Intl.RelativeTimeFormat/format) qui renvoie un tableau d'objets contenant les différentes parties représentant le message internationalisé pour le temps relatif.
+
+{{EmbedInteractiveExample("pages/js/intl-relativetimeformat-prototype-formattoparts.html")}}
+
+## Syntaxe
+
+```js
+RelativeTimeFormat.formatToParts(valeur, unite)
+```
+
+### Paramètres
+
+- `valeur`
+  - : Une valeur numérique qu'on souhaite formater pour un message internationalisé exprimant un temps relatif.
+- `unite`
+  - : L'unité à utiliser pour le message internationalisé exprimant le temps relatif. Les valeurs possibles pour cet argument sont `"year"` (année), `"quarter"` (trimestre), `"month"` (mois), `"week"` (semaine), `"day"` (jour), `"hour"` (heure), `"minute"` (minute), `"second"` (secondes). Les formes plurielles sont également autorisées.
+
+### Valeur de retour
+
+Un tableau ({{jsxref("Array")}}) d'objets contenant les fragments composant la chaîne de caractères localisée et mise en forme pour exprimer le temps relatif.
+
+## Description
+
+La méthode `Intl.RelativeTimeFormat.prototype.formatToParts()` est une méthode analogue à la méthode `format()` mais renvoie un tableau d'objets représentant chacun une partie du message internationalisé. Ces objets ont deux propriétés : `type` et `value`. Si un des composants provient de `NumberFormat`, il aura une propriété `unit` indiquant l'unité utilisée pour le formatage.
+
+## Exemples
+
+```js
+const rtf = new Intl.RelativeTimeFormat("en", { numeric: "auto" });
+
+// Format relative time using the day unit.
+rtf.formatToParts(-1, "day");
+// > [{ type: "literal", value: "yesterday"}]
+
+rtf.formatToParts(100, "day");
+// > [{ type: "literal", value: "in " },
+      { type: "integer", value: "100", unit: "day" },
+      { type: "literal", value: " days" }]
+```
+
+## Spécifications
+
+| Spécifications                                                                                                                                  | État                    | Commentaires |
+| ----------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------- | ------------ |
+| [Proposition pour `Intl.RelativeTime`](https://tc39.github.io/proposal-intl-relative-time/#sec-Intl.RelativeTimeFormat.prototype.formatToParts) | Proposition de niveau 3 |              |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Intl.RelativeTimeFormat.formatToParts")}}
+
+## Voir aussi
+
+- {{jsxref("RelativeTimeFormat", "Intl.RelativeTimeFormat")}}
diff --git a/files/fr/web/javascript/reference/global_objects/intl/relativetimeformat/index.html b/files/fr/web/javascript/reference/global_objects/intl/relativetimeformat/index.html
deleted file mode 100644
index 96a0d534dd..0000000000
--- a/files/fr/web/javascript/reference/global_objects/intl/relativetimeformat/index.html
+++ /dev/null
@@ -1,154 +0,0 @@
----
-title: Intl.RelativeTimeFormat
-slug: Web/JavaScript/Reference/Global_Objects/Intl/RelativeTimeFormat
-tags:
-  - Constructeur
-  - Internationalisation
-  - Intl
-  - JavaScript
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Intl/RelativeTimeFormat
-original_slug: Web/JavaScript/Reference/Objets_globaux/Intl/RelativeTimeFormat
----
-<div>{{JSRef}}</div>
-
-<p>L'objet <strong><code>Intl.RelativeTimeFormat</code></strong> est un constructeur fournissant des objets pour mettre en forme des données temporelles relatives en respectant le format des locales.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/intl-relativetimeformat.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre>new Intl.RelativeTimeFormat([<var>locales</var>[, <var>options</var>]])</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>locales</code></dt>
- <dd>
- <p>Une chaine de caractères avec un identifiant de langue BCP 47, ou un tableau de ce type de chaine de caractères. Pour le format général et l'interprétation de l'argument <code>locales</code>, voir la page {{jsxref("Objets_globaux/Intl","Intl","#L'identification_et_le_choix_de_la_locale")}}.</p>
- </dd>
- <dt><code>options</code> {{optional_inline}}</dt>
- <dd>
- <p>Optionnel, un objet possédant tout ou partie des propriétés suivantes :</p>
- <dl>
-  <dt><code>localeMatcher</code></dt>
-  <dd>L'algorithme de correspondance à utiliser pour la locale. Les valeurs possibles sont <code>"lookup"</code> et <code>"best fit"</code> ; le défaut est <code>"best fit"</code>. Pour des informations sur cette option, voir la page {{jsxref("Objets_globaux/Intl","Intl","##Choix_de_la_locale")}}.</dd>
-  <dt><code>numeric</code></dt>
-  <dd>Le format du message de sortie. Les valeurs possibles sont <code>"always"</code> (par exemple <code>1 day ago</code>) ou  <code>"auto"</code> (par exemple <code>yesterday</code>). <code>"auto"</code> permet de ne pas toujours avoir de valeurs numériques dans le message produit.</dd>
-  <dt><code>style</code></dt>
-  <dd>La longueur du message internationalisé. Les valeurs possibles sont : <code>"long"</code> (la valeur par défaut) (par exemple : <code>in 1 month</code>), <code>"short"</code> (par exemple : <code>in 1 mo.</code>) ou  <code>"narrow"</code> (par exemple : <code>in 1 mo.</code>). Le style <code>narrow</code> peut être semblable au style <code>short</code> pour certaines locales.</dd>
- </dl>
- </dd>
-</dl>
-
-<h2 id="Description">Description</h2>
-
-<h3 id="Propriétés">Propriétés</h3>
-
-<dl>
- <dt>{{jsxref("RelativeTimeFormat.prototype", "Intl.RelativeTimeFormat.prototype")}}</dt>
- <dd>Cette propriété permet d'ajouter des propriétés à l'ensemble des instances.</dd>
-</dl>
-
-<h3 id="Méthodes">Méthodes</h3>
-
-<dl>
- <dt>{{jsxref("RelativeTimeFormat.supportedLocalesOf", "Intl.RelativeTimeFormat.supportedLocalesOf()")}}</dt>
- <dd>Cette méthode renvoie un tableau des locales, parmi celles passées en argument, qui sont pris en charge pour le formatage internationalisé des temps relatifs sans qu'il y ait besoin d'utiliser la locale par défaut de l'environnement d'exécution.</dd>
-</dl>
-
-<h2 id="Les_instances_de_RelativeTimeFormat">Les instances de <code>RelativeTimeFormat</code></h2>
-
-<h3 id="Propriétés_2">Propriétés</h3>
-
-<p>Les instances de RelativeTimeFormat héritent des propriétés suivantes grâce à leur prototype :</p>
-
-<p>{{page('/fr/docs/Web/JavaScript/Reference/Objets_globaux/Intl.RelativeTimeFormat/prototype', 'Propriétés')}}</p>
-
-<h3 id="Méthodes_2">Méthodes</h3>
-
-<p>Les instances de <code>RelativeTimeFormat</code> héritent des méthodes suivantes grâce à leur prototype :</p>
-
-<p>{{page('/fr/docs/Web/JavaScript/Reference/Objets_globaux/Intl.RelativeTimeFormat/prototype', 'Méthodes')}}</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Utiliser_format">Utiliser <code>format()</code></h3>
-
-<p>L'exemple suivant illustre comment créer un formateur de temps relatif en anglais :</p>
-
-<pre class="brush: js">// On crée un formateur en anglais en utilisant explicitement
-// les valeurs par défaut.
-const rtf = new Intl.RelativeTimeFormat("en", {
-    localeMatcher: "best fit", // autre valeur possible : "lookup"
-    numeric: "always", // autre valeur possible : "auto"
-    style: "long", // autre valeur possible : "short" ou "narrow"
-});
-
-// On formate un temps relatif avec une valeur négative (-1).
-rtf.format(-1, "day");
-// &gt; "1 day ago"
-
-// On formate un temps relatif avec une valeur positive (1).
-rtf.format(1, "day");
-// &gt; "in 1 day"</pre>
-
-<h3 id="Utiliser_loption_auto">Utiliser l'option <code>auto</code></h3>
-
-<p>Si l'option <code>numeric:auto</code> est passée, on aura la chaîne de caractères <code>yesterday</code> ou <code>tomorrow</code> plutôt que <code>1 day ago</code> ou <code>in 1 day</code>. De cette façon, on peut ne pas avoir de valeur numérique dans la valeur produite.</p>
-
-<pre class="brush: js">// On crée un formateur en anglais avec l'option
-// numeric: "auto".
-const rtf = new Intl.RelativeTimeFormat("en", { numeric: "auto" });
-
-// On formate un temps relatif avec une valeur négative (-1).
-rtf.format(-1, "day");
-// &gt; "yesterday"
-
-// On formate un temps relatif avec une valeur positive (1).
-rtf.format(1, "day");
-// &gt; "tomorrow"
-</pre>
-
-<h3 id="Utiliser_formatToParts">Utiliser <code>formatToParts()</code></h3>
-
-<p>L'exemple suivant illustre comment créer un formateur de temps relatif qui renvoie les différents fragments pour exprimer le temps relatif internationalisé.</p>
-
-<pre class="brush: js">const rtf = new Intl.RelativeTimeFormat("en", { numeric: "auto" });
-
-// On crée un temps relatif exprimé en jour.
-rtf.formatToParts(-1, "day");
-// &gt; [{ type: "literal", value: "yesterday"}]
-
-rtf.formatToParts(100, "day");
-// &gt; [{ type: "literal", value: "in " },
-      { type: "integer", value: "100", unit: "day" },
-      { type: "literal", value: " days" }]
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Etat</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td><a href="https://tc39.es/proposal-intl-relative-time/#sec-intl-relativetimeformat-constructor">Proposition pour le constructeur <code>Intl.RelativeTimeFormat</code></a></td>
-   <td>Proposition de niveau 3</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Intl.RelativeTimeFormat")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="https://developers.google.com/web/updates/2018/10/intl-relativetimeformat">L'API <code>Intl.RelativeTimeFormat</code>, un billet de Mathias Bynens (en anglais)</a></li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/intl/relativetimeformat/index.md b/files/fr/web/javascript/reference/global_objects/intl/relativetimeformat/index.md
new file mode 100644
index 0000000000..85bfd8665a
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/intl/relativetimeformat/index.md
@@ -0,0 +1,135 @@
+---
+title: Intl.RelativeTimeFormat
+slug: Web/JavaScript/Reference/Global_Objects/Intl/RelativeTimeFormat
+tags:
+  - Constructeur
+  - Internationalisation
+  - Intl
+  - JavaScript
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Intl/RelativeTimeFormat
+original_slug: Web/JavaScript/Reference/Objets_globaux/Intl/RelativeTimeFormat
+---
+{{JSRef}}
+
+L'objet **`Intl.RelativeTimeFormat`** est un constructeur fournissant des objets pour mettre en forme des données temporelles relatives en respectant le format des locales.
+
+{{EmbedInteractiveExample("pages/js/intl-relativetimeformat.html")}}
+
+## Syntaxe
+
+    new Intl.RelativeTimeFormat([locales[, options]])
+
+### Paramètres
+
+- `locales`
+  - : Une chaine de caractères avec un identifiant de langue BCP 47, ou un tableau de ce type de chaine de caractères. Pour le format général et l'interprétation de l'argument `locales`, voir la page {{jsxref("Objets_globaux/Intl","Intl","#L'identification_et_le_choix_de_la_locale")}}.
+- `options` {{optional_inline}}
+
+  - : Optionnel, un objet possédant tout ou partie des propriétés suivantes :
+
+    - `localeMatcher`
+      - : L'algorithme de correspondance à utiliser pour la locale. Les valeurs possibles sont `"lookup"` et `"best fit"` ; le défaut est `"best fit"`. Pour des informations sur cette option, voir la page {{jsxref("Objets_globaux/Intl","Intl","##Choix_de_la_locale")}}.
+    - `numeric`
+      - : Le format du message de sortie. Les valeurs possibles sont `"always"` (par exemple `1 day ago`) ou  `"auto"` (par exemple `yesterday`). `"auto"` permet de ne pas toujours avoir de valeurs numériques dans le message produit.
+    - `style`
+      - : La longueur du message internationalisé. Les valeurs possibles sont : `"long"` (la valeur par défaut) (par exemple : `in 1 month`), `"short"` (par exemple : `in 1 mo.`) ou  `"narrow"` (par exemple : `in 1 mo.`). Le style `narrow` peut être semblable au style `short` pour certaines locales.
+
+## Description
+
+### Propriétés
+
+- {{jsxref("RelativeTimeFormat.prototype", "Intl.RelativeTimeFormat.prototype")}}
+  - : Cette propriété permet d'ajouter des propriétés à l'ensemble des instances.
+
+### Méthodes
+
+- {{jsxref("RelativeTimeFormat.supportedLocalesOf", "Intl.RelativeTimeFormat.supportedLocalesOf()")}}
+  - : Cette méthode renvoie un tableau des locales, parmi celles passées en argument, qui sont pris en charge pour le formatage internationalisé des temps relatifs sans qu'il y ait besoin d'utiliser la locale par défaut de l'environnement d'exécution.
+
+## Les instances de `RelativeTimeFormat`
+
+### Propriétés
+
+Les instances de RelativeTimeFormat héritent des propriétés suivantes grâce à leur prototype :
+
+{{page('/fr/docs/Web/JavaScript/Reference/Objets_globaux/Intl.RelativeTimeFormat/prototype', 'Propriétés')}}
+
+### Méthodes
+
+Les instances de `RelativeTimeFormat` héritent des méthodes suivantes grâce à leur prototype :
+
+{{page('/fr/docs/Web/JavaScript/Reference/Objets_globaux/Intl.RelativeTimeFormat/prototype', 'Méthodes')}}
+
+## Exemples
+
+### Utiliser `format()`
+
+L'exemple suivant illustre comment créer un formateur de temps relatif en anglais :
+
+```js
+// On crée un formateur en anglais en utilisant explicitement
+// les valeurs par défaut.
+const rtf = new Intl.RelativeTimeFormat("en", {
+    localeMatcher: "best fit", // autre valeur possible : "lookup"
+    numeric: "always", // autre valeur possible : "auto"
+    style: "long", // autre valeur possible : "short" ou "narrow"
+});
+
+// On formate un temps relatif avec une valeur négative (-1).
+rtf.format(-1, "day");
+// > "1 day ago"
+
+// On formate un temps relatif avec une valeur positive (1).
+rtf.format(1, "day");
+// > "in 1 day"
+```
+
+### Utiliser l'option `auto`
+
+Si l'option `numeric:auto` est passée, on aura la chaîne de caractères `yesterday` ou `tomorrow` plutôt que `1 day ago` ou `in 1 day`. De cette façon, on peut ne pas avoir de valeur numérique dans la valeur produite.
+
+```js
+// On crée un formateur en anglais avec l'option
+// numeric: "auto".
+const rtf = new Intl.RelativeTimeFormat("en", { numeric: "auto" });
+
+// On formate un temps relatif avec une valeur négative (-1).
+rtf.format(-1, "day");
+// > "yesterday"
+
+// On formate un temps relatif avec une valeur positive (1).
+rtf.format(1, "day");
+// > "tomorrow"
+```
+
+### Utiliser `formatToParts()`
+
+L'exemple suivant illustre comment créer un formateur de temps relatif qui renvoie les différents fragments pour exprimer le temps relatif internationalisé.
+
+```js
+const rtf = new Intl.RelativeTimeFormat("en", { numeric: "auto" });
+
+// On crée un temps relatif exprimé en jour.
+rtf.formatToParts(-1, "day");
+// > [{ type: "literal", value: "yesterday"}]
+
+rtf.formatToParts(100, "day");
+// > [{ type: "literal", value: "in " },
+      { type: "integer", value: "100", unit: "day" },
+      { type: "literal", value: " days" }]
+```
+
+## Spécifications
+
+| Spécification                                                                                                                                      | Etat                    | Commentaires |
+| -------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------- | ------------ |
+| [Proposition pour le constructeur `Intl.RelativeTimeFormat`](https://tc39.es/proposal-intl-relative-time/#sec-intl-relativetimeformat-constructor) | Proposition de niveau 3 |              |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Intl.RelativeTimeFormat")}}
+
+## Voir aussi
+
+- [L'API `Intl.RelativeTimeFormat`, un billet de Mathias Bynens (en anglais)](https://developers.google.com/web/updates/2018/10/intl-relativetimeformat)
diff --git a/files/fr/web/javascript/reference/global_objects/intl/relativetimeformat/resolvedoptions/index.html b/files/fr/web/javascript/reference/global_objects/intl/relativetimeformat/resolvedoptions/index.html
deleted file mode 100644
index ed4d45c451..0000000000
--- a/files/fr/web/javascript/reference/global_objects/intl/relativetimeformat/resolvedoptions/index.html
+++ /dev/null
@@ -1,98 +0,0 @@
----
-title: Intl.RelativeTimeFormat.prototype.resolvedOptions()
-slug: >-
-  Web/JavaScript/Reference/Global_Objects/Intl/RelativeTimeFormat/resolvedOptions
-tags:
-  - Internationalization
-  - Intl
-  - JavaScript
-  - Méthode
-  - Prototype
-  - Reference
-  - i18n
-translation_of: >-
-  Web/JavaScript/Reference/Global_Objects/Intl/RelativeTimeFormat/resolvedOptions
-original_slug: >-
-  Web/JavaScript/Reference/Objets_globaux/Intl/RelativeTimeFormat/resolvedOptions
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <strong><code>Intl.RelativeTimeFormat.prototype.resolvedOptions()</code></strong> renvoie un nouvel objet dont les propriétés reflètent les options de format et de locale pour les valeurs temporelles relatives, calculées pendant l'initialisation de l'objet {{jsxref("RelativeTimeFormat")}}.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/intl-relativetimeformat-prototype-resolvedoptions.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>relativeTimeFormat</var>.resolvedOptions()</pre>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Un nouvel objet dont les propriétés reflètent les options de locale et de formatage calculées lors de l'initialisation de l'objet {{jsxref("RelativeTimeFormat")}}.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>L'objet renvoyé par cette méthode possèdera les propriétés suivantes :</p>
-
-<dl>
- <dt><code>locale</code></dt>
- <dd>La balise de langue BCP 47 qui est réellement utilisée. Si des extensions Unicode étaient fournies avec la balise d'origine et sont supportées pour la locale utilisée, les paires de clés-valeurs seront incluses dans <code>locale</code>.</dd>
- <dt><code>style</code></dt>
- <dd>La longueur du message internationalisé. Les valeurs possibles sont :
- <ul>
-  <li><code>"long"</code> : la valeur par défaut, peu concise (par exemple <code>in 1 month</code>)</li>
-  <li><code>"short"</code> : une valeur plus courte (par exemple <code>in 1 mo.</code>),</li>
-  <li><code>"narrow"</code> : une valeur encore plus courte (pouvant être ambigüe selon les locales) (par exemple <code>in 1 mo.</code>). Les styles <code>narrow</code> et <code>short</code> peuvent être similaires voire identiques pour certaines locales.</li>
- </ul>
- </dd>
- <dt><code>numeric</code></dt>
- <dd>Le format du message produit. Les valeurs possibles sont :
- <ul>
-  <li><code>"always"</code> : la valeur par défaut (par exemple  <code>1 day ago</code>),</li>
-  <li><code>"auto"</code> : cette valeur indique qu'il n'est pas nécessaire d'utiliser de valeur numérique dans le message produit (par exemple <code>yesterday</code>).</li>
- </ul>
- </dd>
- <dt><code>numberingSystem</code></dt>
- <dd>La valeur demandée pour la clé d'extension Unicode <code>"nu"</code> ou la valeur remplie par défaut.</dd>
-</dl>
-
-<h2 id="Exemples">Exemples</h2>
-
-<pre class="brush: js">var de = new Intl.RelativeTimeFormat('de-DE');
-var usedOptions = de.resolvedOptions();
-
-usedOptions.locale;          // "de-DE"
-usedOptions.style;           // "long"
-usedOptions.numeric;         // "always"
-usedOptions.numberingSystem; // "latn"
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><a href="https://tc39.github.io/proposal-intl-relative-time/#sec-intl.relativetimeformat.prototype.resolvedoptions">Proposition pour <code>Intl.RelativeTime</code></a></td>
-   <td>Proposition de niveau 3</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Intl.RelativeTimeFormat.resolvedOptions")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("RelativeTimeFormat", "Intl.RelativeTimeFormat")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/intl/relativetimeformat/resolvedoptions/index.md b/files/fr/web/javascript/reference/global_objects/intl/relativetimeformat/resolvedoptions/index.md
new file mode 100644
index 0000000000..daa3fcb143
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/intl/relativetimeformat/resolvedoptions/index.md
@@ -0,0 +1,81 @@
+---
+title: Intl.RelativeTimeFormat.prototype.resolvedOptions()
+slug: >-
+  Web/JavaScript/Reference/Global_Objects/Intl/RelativeTimeFormat/resolvedOptions
+tags:
+  - Internationalization
+  - Intl
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - i18n
+translation_of: >-
+  Web/JavaScript/Reference/Global_Objects/Intl/RelativeTimeFormat/resolvedOptions
+original_slug: >-
+  Web/JavaScript/Reference/Objets_globaux/Intl/RelativeTimeFormat/resolvedOptions
+---
+{{JSRef}}
+
+La méthode **`Intl.RelativeTimeFormat.prototype.resolvedOptions()`** renvoie un nouvel objet dont les propriétés reflètent les options de format et de locale pour les valeurs temporelles relatives, calculées pendant l'initialisation de l'objet {{jsxref("RelativeTimeFormat")}}.
+
+{{EmbedInteractiveExample("pages/js/intl-relativetimeformat-prototype-resolvedoptions.html")}}
+
+## Syntaxe
+
+    relativeTimeFormat.resolvedOptions()
+
+### Valeur de retour
+
+Un nouvel objet dont les propriétés reflètent les options de locale et de formatage calculées lors de l'initialisation de l'objet {{jsxref("RelativeTimeFormat")}}.
+
+## Description
+
+L'objet renvoyé par cette méthode possèdera les propriétés suivantes :
+
+- `locale`
+  - : La balise de langue BCP 47 qui est réellement utilisée. Si des extensions Unicode étaient fournies avec la balise d'origine et sont supportées pour la locale utilisée, les paires de clés-valeurs seront incluses dans `locale`.
+- `style`
+
+  - : La longueur du message internationalisé. Les valeurs possibles sont :
+
+    - `"long"` : la valeur par défaut, peu concise (par exemple `in 1 month`)
+    - `"short"` : une valeur plus courte (par exemple `in 1 mo.`),
+    - `"narrow"` : une valeur encore plus courte (pouvant être ambigüe selon les locales) (par exemple `in 1 mo.`). Les styles `narrow` et `short` peuvent être similaires voire identiques pour certaines locales.
+
+- `numeric`
+
+  - : Le format du message produit. Les valeurs possibles sont :
+
+    - `"always"` : la valeur par défaut (par exemple  `1 day ago`),
+    - `"auto"` : cette valeur indique qu'il n'est pas nécessaire d'utiliser de valeur numérique dans le message produit (par exemple `yesterday`).
+
+- `numberingSystem`
+  - : La valeur demandée pour la clé d'extension Unicode `"nu"` ou la valeur remplie par défaut.
+
+## Exemples
+
+```js
+var de = new Intl.RelativeTimeFormat('de-DE');
+var usedOptions = de.resolvedOptions();
+
+usedOptions.locale;          // "de-DE"
+usedOptions.style;           // "long"
+usedOptions.numeric;         // "always"
+usedOptions.numberingSystem; // "latn"
+```
+
+## Spécifications
+
+| Spécification                                                                                                                                     | État                    | Commentaires |
+| ------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------- | ------------ |
+|                                                                                                                                                   |                         |              |
+| [Proposition pour `Intl.RelativeTime`](https://tc39.github.io/proposal-intl-relative-time/#sec-intl.relativetimeformat.prototype.resolvedoptions) | Proposition de niveau 3 |              |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Intl.RelativeTimeFormat.resolvedOptions")}}
+
+## Voir aussi
+
+- {{jsxref("RelativeTimeFormat", "Intl.RelativeTimeFormat")}}
diff --git a/files/fr/web/javascript/reference/global_objects/intl/relativetimeformat/supportedlocalesof/index.html b/files/fr/web/javascript/reference/global_objects/intl/relativetimeformat/supportedlocalesof/index.html
deleted file mode 100644
index e0a6433b75..0000000000
--- a/files/fr/web/javascript/reference/global_objects/intl/relativetimeformat/supportedlocalesof/index.html
+++ /dev/null
@@ -1,85 +0,0 @@
----
-title: Intl.RelativeTimeFormat.supportedLocalesOf()
-slug: >-
-  Web/JavaScript/Reference/Global_Objects/Intl/RelativeTimeFormat/supportedLocalesOf
-tags:
-  - Internationalisation
-  - Intl
-  - JavaScript
-  - Méthode
-  - Reference
-translation_of: >-
-  Web/JavaScript/Reference/Global_Objects/Intl/RelativeTimeFormat/supportedLocalesOf
-original_slug: >-
-  Web/JavaScript/Reference/Objets_globaux/Intl/RelativeTimeFormat/supportedLocalesOf
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <strong><code>Intl.RelativeTimeFormat.supportedLocalesOf()</code></strong> renvoie un tableau contenant l'ensemble des locales, parmi celles fournies en argument, qui sont prises en charge pour le formatage internationalisé du temps relatif, sans avoir à utiliser la locale par défaut de l'environnement d'exécution.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/intl-relativetimeformat-prototype-supportedlocalesof.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre>Intl.RelativeTimeFormat.supportedLocalesOf(<var>locales</var>[, <var>options</var>])</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>locales</code></dt>
- <dd>Un chaîne de caractères au format d'une balise de langue BCP 47 ou bien un tableau de telles chaînes. Pour plus d'informations sur le format de l'argument <code>locales</code>, voir la page {{jsxref("Intl", "Intl", "#L'identification_et_le_choix_de_la_locale")}}.</dd>
- <dt><code>options</code></dt>
- <dd>
- <p>Paramètre optionnel, un objet pouvant avoir la propriété suivante :</p>
-
- <dl>
-  <dt><code>localeMatcher</code></dt>
-  <dd>L'algorithme de correspondance entre locales à utiliser. Les valeurs possibles sont "lookup" et "best fit". Pour plus d'informations sur ce sujet, voir la page {{jsxref("Intl", "Intl", "#Choix_de_la_locale")}}.</dd>
- </dl>
- </dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Un tableau de chaînes de caractères qui représente un sous-ensemble des balises de langue qui sont prises en charge pour la mise en forme du temps relatif sans qu'il soit nécessaire d'utiliser la locale par défaut de l'environnement d'exécution.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>Cette méthode renvoie un tableau qui est un sous-ensemble de <code>locales</code>. Les balises de langues renvoyées sont celles supportées par l'environnement pour le formatage des temps relatifs. Ces balises sont déterminées en fonction de l'algorithme de correspondances de locale et des locales utilisées. Le tableau résultant fournit les locales qui permettent de ne pas avoir à utiliser la locale par défaut.</p>
-
-<h2 id="Examples">Examples</h2>
-
-<h3 id="Utiliser_supportedLocalesOf">Utiliser <code>supportedLocalesOf()</code></h3>
-
-<p>Si on dispose d'un environnement qui supporte les locales indonésienne et allemande mais pas balinaise pour le formatage des temps relatifs, <code>supportedLocalesOf</code> renverra les balises BCP 47 pour l'indonésien et l'allemand (bien que la collation pinyin ne soit pas pertinente pour les dates ni pour l'indonésien et qu'il soit peu probable qu'une variante indonésienne existe pour l'allemand). Pour l'exemple, on l'utilise l'algorithme <code>"lookup"</code>. Si on utilisait <code>"best fit"</code>, on pourrait considérer que l'indonésien est adéquat pour la locale balinaise (sachant que la plupart des balinais comprend l'indonésien) et donc également renvoyer la balise balinaise.</p>
-
-<pre>var locales = ['ban', 'id-u-co-pinyin', 'de-ID'];var options = { localeMatcher: 'lookup' };console.log(Intl.RelativeTimeFormat.supportedLocalesOf(locales, options).join(', '));// → "id-u-co-pinyin, de-ID"</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><a href="https://tc39.github.io/proposal-intl-relative-time/#sec-Intl.RelativeTimeFormat.supportedLocalesOf">Proposition pour <code>Intl.RelativeTime</code></a></td>
-   <td>Proposition de niveau 3</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Intl.RelativeTimeFormat.supportedLocalesOf")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("RelativeTimeFormat", "Intl.RelativeTimeFormat")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/intl/relativetimeformat/supportedlocalesof/index.md b/files/fr/web/javascript/reference/global_objects/intl/relativetimeformat/supportedlocalesof/index.md
new file mode 100644
index 0000000000..261968f2ba
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/intl/relativetimeformat/supportedlocalesof/index.md
@@ -0,0 +1,65 @@
+---
+title: Intl.RelativeTimeFormat.supportedLocalesOf()
+slug: >-
+  Web/JavaScript/Reference/Global_Objects/Intl/RelativeTimeFormat/supportedLocalesOf
+tags:
+  - Internationalisation
+  - Intl
+  - JavaScript
+  - Méthode
+  - Reference
+translation_of: >-
+  Web/JavaScript/Reference/Global_Objects/Intl/RelativeTimeFormat/supportedLocalesOf
+original_slug: >-
+  Web/JavaScript/Reference/Objets_globaux/Intl/RelativeTimeFormat/supportedLocalesOf
+---
+{{JSRef}}
+
+La méthode **`Intl.RelativeTimeFormat.supportedLocalesOf()`** renvoie un tableau contenant l'ensemble des locales, parmi celles fournies en argument, qui sont prises en charge pour le formatage internationalisé du temps relatif, sans avoir à utiliser la locale par défaut de l'environnement d'exécution.
+
+{{EmbedInteractiveExample("pages/js/intl-relativetimeformat-prototype-supportedlocalesof.html")}}
+
+## Syntaxe
+
+    Intl.RelativeTimeFormat.supportedLocalesOf(locales[, options])
+
+### Paramètres
+
+- `locales`
+  - : Un chaîne de caractères au format d'une balise de langue BCP 47 ou bien un tableau de telles chaînes. Pour plus d'informations sur le format de l'argument `locales`, voir la page {{jsxref("Intl", "Intl", "#L'identification_et_le_choix_de_la_locale")}}.
+- `options`
+
+  - : Paramètre optionnel, un objet pouvant avoir la propriété suivante :
+
+    - `localeMatcher`
+      - : L'algorithme de correspondance entre locales à utiliser. Les valeurs possibles sont "lookup" et "best fit". Pour plus d'informations sur ce sujet, voir la page {{jsxref("Intl", "Intl", "#Choix_de_la_locale")}}.
+
+### Valeur de retour
+
+Un tableau de chaînes de caractères qui représente un sous-ensemble des balises de langue qui sont prises en charge pour la mise en forme du temps relatif sans qu'il soit nécessaire d'utiliser la locale par défaut de l'environnement d'exécution.
+
+## Description
+
+Cette méthode renvoie un tableau qui est un sous-ensemble de `locales`. Les balises de langues renvoyées sont celles supportées par l'environnement pour le formatage des temps relatifs. Ces balises sont déterminées en fonction de l'algorithme de correspondances de locale et des locales utilisées. Le tableau résultant fournit les locales qui permettent de ne pas avoir à utiliser la locale par défaut.
+
+## Examples
+
+### Utiliser `supportedLocalesOf()`
+
+Si on dispose d'un environnement qui supporte les locales indonésienne et allemande mais pas balinaise pour le formatage des temps relatifs, `supportedLocalesOf` renverra les balises BCP 47 pour l'indonésien et l'allemand (bien que la collation pinyin ne soit pas pertinente pour les dates ni pour l'indonésien et qu'il soit peu probable qu'une variante indonésienne existe pour l'allemand). Pour l'exemple, on l'utilise l'algorithme `"lookup"`. Si on utilisait `"best fit"`, on pourrait considérer que l'indonésien est adéquat pour la locale balinaise (sachant que la plupart des balinais comprend l'indonésien) et donc également renvoyer la balise balinaise.
+
+    var locales = ['ban', 'id-u-co-pinyin', 'de-ID'];var options = { localeMatcher: 'lookup' };console.log(Intl.RelativeTimeFormat.supportedLocalesOf(locales, options).join(', '));// → "id-u-co-pinyin, de-ID"
+
+## Spécifications
+
+| Spécification                                                                                                                              | État                    | Commentaires |
+| ------------------------------------------------------------------------------------------------------------------------------------------ | ----------------------- | ------------ |
+| [Proposition pour `Intl.RelativeTime`](https://tc39.github.io/proposal-intl-relative-time/#sec-Intl.RelativeTimeFormat.supportedLocalesOf) | Proposition de niveau 3 |              |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Intl.RelativeTimeFormat.supportedLocalesOf")}}
+
+## Voir aussi
+
+- {{jsxref("RelativeTimeFormat", "Intl.RelativeTimeFormat")}}
diff --git a/files/fr/web/javascript/reference/global_objects/isfinite/index.html b/files/fr/web/javascript/reference/global_objects/isfinite/index.html
deleted file mode 100644
index a127177d6e..0000000000
--- a/files/fr/web/javascript/reference/global_objects/isfinite/index.html
+++ /dev/null
@@ -1,98 +0,0 @@
----
-title: isFinite()
-slug: Web/JavaScript/Reference/Global_Objects/isFinite
-tags:
-  - Fonction
-  - JavaScript
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/isFinite
-original_slug: Web/JavaScript/Reference/Objets_globaux/isFinite
----
-<div>{{jsSidebar("Objects")}}</div>
-
-<p>La fonction globale <code><strong>isFinite()</strong></code> détermine si la valeur passée en argument est un nombre fini. Si nécessaire, le paramètre est d'abord converti en nombre.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/globalprops-isfinite.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">isFinite(<var>valeurÀTester</var>)</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>valeurÀTester</code></dt>
- <dd>La valeur dont on souhaite savoir si elle est finie ou non.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p><code>false</code> si la valeur passée en argument vaut {{jsxref("Infinity")}} (en positif ou en négatif),{{jsxref("NaN")}} ou {{jsxref("undefined")}}, <code>true</code> sinon.</p>
-
-<h2 id="Description">Description</h2>
-
-<p><code>isFinite()</code> est une fonction qui n'est rattachée à aucun objet et qui est disponible au plus haut niveau.</p>
-
-<p>Cette fonction peut être utilisée pour déterminer si un nombre est fini ou non. La fonction <code>isFinite()</code> examine le nombre passé en argument : si celui-ci vaut {{jsxref("NaN")}}, {{jsxref("Infinity")}} (pour l'infini) ou {{jsxref("Infinity","-Infinity")}} (pour l'infini négatif), cette fonction renvoie <code>false</code> sinon elle renvoie <code>true</code>.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<pre class="brush: js">isFinite(Infinity);  // false
-isFinite(NaN);       // false
-isFinite(-Infinity); // false
-
-isFinite(0);         // true
-isFinite(2e64);      // true
-isFinite(910);       // true
-isFinite(null);      // true, ce qui aurait été false
-                     // avec la méthode Number.isFinite(null)
-
-
-isFinite("0");       // true ce qui aurait été false
-                     // avec la méthode Number.isFinite("0")
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2')}}</td>
-   <td>{{Spec2('ES3')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-15.1.2.5', 'isFinite')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-isfinite-number', 'isFinite')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-isfinite-number', 'isFinite')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.isFinite")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Number.isFinite()")}}</li>
- <li>{{jsxref("Number.NaN")}}</li>
- <li>{{jsxref("Number.POSITIVE_INFINITY")}}</li>
- <li>{{jsxref("Number.NEGATIVE_INFINITY")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/isfinite/index.md b/files/fr/web/javascript/reference/global_objects/isfinite/index.md
new file mode 100644
index 0000000000..2bfa521574
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/isfinite/index.md
@@ -0,0 +1,72 @@
+---
+title: isFinite()
+slug: Web/JavaScript/Reference/Global_Objects/isFinite
+tags:
+  - Fonction
+  - JavaScript
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/isFinite
+original_slug: Web/JavaScript/Reference/Objets_globaux/isFinite
+---
+{{jsSidebar("Objects")}}
+
+La fonction globale **`isFinite()`** détermine si la valeur passée en argument est un nombre fini. Si nécessaire, le paramètre est d'abord converti en nombre.
+
+{{EmbedInteractiveExample("pages/js/globalprops-isfinite.html")}}
+
+## Syntaxe
+
+    isFinite(valeurÀTester)
+
+### Paramètres
+
+- `valeurÀTester`
+  - : La valeur dont on souhaite savoir si elle est finie ou non.
+
+### Valeur de retour
+
+`false` si la valeur passée en argument vaut {{jsxref("Infinity")}} (en positif ou en négatif),{{jsxref("NaN")}} ou {{jsxref("undefined")}}, `true` sinon.
+
+## Description
+
+`isFinite()` est une fonction qui n'est rattachée à aucun objet et qui est disponible au plus haut niveau.
+
+Cette fonction peut être utilisée pour déterminer si un nombre est fini ou non. La fonction `isFinite()` examine le nombre passé en argument : si celui-ci vaut {{jsxref("NaN")}}, {{jsxref("Infinity")}} (pour l'infini) ou {{jsxref("Infinity","-Infinity")}} (pour l'infini négatif), cette fonction renvoie `false` sinon elle renvoie `true`.
+
+## Exemples
+
+```js
+isFinite(Infinity);  // false
+isFinite(NaN);       // false
+isFinite(-Infinity); // false
+
+isFinite(0);         // true
+isFinite(2e64);      // true
+isFinite(910);       // true
+isFinite(null);      // true, ce qui aurait été false
+                     // avec la méthode Number.isFinite(null)
+
+
+isFinite("0");       // true ce qui aurait été false
+                     // avec la méthode Number.isFinite("0")
+```
+
+## Spécifications
+
+| Spécification                                                                    | État                         | Commentaires         |
+| -------------------------------------------------------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName('ES2')}}                                                         | {{Spec2('ES3')}}         | Définition initiale. |
+| {{SpecName('ES5.1', '#sec-15.1.2.5', 'isFinite')}}             | {{Spec2('ES5.1')}}     |                      |
+| {{SpecName('ES6', '#sec-isfinite-number', 'isFinite')}}         | {{Spec2('ES6')}}         |                      |
+| {{SpecName('ESDraft', '#sec-isfinite-number', 'isFinite')}} | {{Spec2('ESDraft')}} |                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.isFinite")}}
+
+## Voir aussi
+
+- {{jsxref("Number.isFinite()")}}
+- {{jsxref("Number.NaN")}}
+- {{jsxref("Number.POSITIVE_INFINITY")}}
+- {{jsxref("Number.NEGATIVE_INFINITY")}}
diff --git a/files/fr/web/javascript/reference/global_objects/isnan/index.html b/files/fr/web/javascript/reference/global_objects/isnan/index.html
deleted file mode 100644
index af6f562a83..0000000000
--- a/files/fr/web/javascript/reference/global_objects/isnan/index.html
+++ /dev/null
@@ -1,154 +0,0 @@
----
-title: isNaN()
-slug: Web/JavaScript/Reference/Global_Objects/isNaN
-tags:
-  - JavaScript
-  - Méthode
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/isNaN
-original_slug: Web/JavaScript/Reference/Objets_globaux/isNaN
----
-<div>{{jsSidebar("Objects")}}</div>
-
-<p>La fonction <code><strong>isNaN()</strong></code> permet de déterminer si une valeur est {{jsxref("NaN")}}. On notera que cette fonction utilise des règles de conversion différentes de {{jsxref("Number.isNaN()")}}, définie avec ECMAScript 2015 (ES6).</p>
-
-<div>{{EmbedInteractiveExample("pages/js/globalprops-isnan.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">isNaN(<var>valeurÀTester</var>)</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>valeurÀTester</code></dt>
- <dd>La valeur dont on souhaite déterminer si elle est {{jsxref("NaN")}}.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p><code>true</code> si la valeur fournie vaut {{jsxref("NaN")}}, sinon, la méthode renverra <code>false</code>.</p>
-
-<h2 id="Description">Description</h2>
-
-<h3 id="La_nécessité_d'avoir_isNaN()">La nécessité d'avoir <code>isNaN()</code></h3>
-
-<p>À la différence des autres valeurs JavaScript, il est impossible d'utiliser les opérateurs d'égalité faible et stricte ({{jsxref("Opérateurs/Opérateurs_de_comparaison","==","#.C3.89galit.C3.A9_simple_(.3D.3D)")}} et {{jsxref("Opérateurs/Opérateurs_de_comparaison","===","#.C3.89galit.C3.A9_stricte_(.3D.3D.3D)")}}) afin de déterminer si une valeur <em>est </em>ou<em> n'est pas</em> réellement {{jsxref("NaN")}}. En effet <code>NaN == NaN</code> et <code>NaN === NaN</code> renvoient <code>false</code> tous les deux. C'est pour cela qu'il est nécessaire d'avoir la fonction <code>isNaN()</code>.</p>
-
-<h3 id="Les_origines_de_NaN">Les origines de <code>NaN</code></h3>
-
-<p>La valeur <code>NaN</code> est générée lorsqu'une opération arithmétique résulte en une valeur indéfinie ou non représentable. De telles valeurs ne représentent pas nécessairement des dépassements de condition. <code>NaN</code> peut également être le résultat d'une conversion numérique pour les valeurs qui n'ont pas de valeurs numériques correspondantes (par exemple lorsqu'on souhaite convertir la chaîne <code>"toto"</code> en un nombre).</p>
-
-<p>Par exemple, lorsqu'on divise zéro par zéro, on obtient <code>NaN</code>. En revanche, lorsqu'on divise d'autres nombres par zéro, on n'obtient pas ce résultat.</p>
-
-<h3 id="Comportement_étrange_de_isNaN()">Comportement étrange de <code>isNaN()</code></h3>
-
-<p>Depuis les premières spécifications pour <code>isNaN()</code>, son comportement sur les arguments non-numériques a toujours été source de confusion. Lorsque l'argument passé à la fonction n'est pas du type <a href="https://es5.github.com/#x8.5">Number</a>, la valeur est d'abord convertie en une valeur du type Number. La valeur résultante est ensuite utilisée lors du test afin de déterminer si c'est {{jsxref("NaN")}}. Ainsi pour valeurs non numériques qui sont converties en une valeur non-NaN numérique (notamment la chaîne vide, les valeurs booléennes qui donnent zéro ou un), la fonction renverra <code>false</code>, ce qui pourrait être inattendu (en effet, la chaîne vide <em>n'est pas un nombre</em>). Ici, la confusion provient du fait que « not a number » a un sens particulier pour les valeurs numériques représentées selon IEEE-754. Cette fonction doit plutôt être vue comme la réponse à la question « est-ce que cette valeur, lorsqu'elle est convertie en une valeur numérique, correspond à la valeur IEEE-754 "Not A Number" ? ».</p>
-
-<p>La version ECMAScript ES2015 ajoute la méthode {{jsxref("Number.isNaN()")}}. <code>Number.isNaN(x)</code> permettra de tester de façon plus fiable si <code>x</code> vaut <code>NaN</code> ou non. Si on ne dispose pas de cette méthode, on peut également utiliser l'expression <code>(x != x)</code> afin de tester de façon plus certaine si <code>x</code> vaut <code>NaN</code> ou non (en effet le résultat de cette expression n'aura pas les faux positifs de <code>isNaN</code>). Sous cet angle, <code>isNaN()</code> peut être vu comme :</p>
-
-<pre class="brush: js">var isNaN = function(valeur) {
-  return Number.isNaN(Number(valeur));
-};</pre>
-
-<p>Ou encore, en utilisant le fait que <code>NaN</code> est la seule valeur différente d'elle-même :</p>
-
-<pre class="brush: js">var isNaN = function(valeur) {
-  var n = Number(valeur);
-  return n !== n;
-};</pre>
-
-<h3 id="NaN_est_«_empoisonné_»"><code>NaN</code> est « empoisonné »</h3>
-
-<p>Cette fonction peut être utilisée afin de déterminer si la valeur courante peut faire partie d'une expression arithmétique. En effet, si un des composants d'une expression arithmétique vaut <code>NaN</code>, le résultat de l'expression sera <code>NaN</code> également (on dit alors que <code>NaN</code> « empoisonne » l'expression). La méthode <code>isNaN()</code> permet alors de vérifier, avant de construire une expression, que les valeurs utilisées n'empoisonneront pas l'expression.</p>
-
-<p>On peut par exemple construire une fonction dont on souhaite qu'elle incrémente l'argument et que la valeur qu'elle renvoie ne puisse pas être <code>NaN</code>. Le code de cette fonction pourrait être :</p>
-
-<pre class="brush: js">function incrément(x) {
-  if (isNaN(x)){
-    x = 0;
-  }
-  return x + 1;
-}
-
-// En utilisant des notations raccourcies,
-// on pourrait écrire une fonction équivalente
-function incrémentCourt(x) {
-  isNaN(x) ? 1 : x + 1;
-}
-
-incrément("blabla");  // 1
-incrément(1);         // 2
-incrément(NaN);       // 1
-</pre>
-
-<h2 id="Exemples">Exemples</h2>
-
-<pre class="brush: js">isNaN(NaN);       // true
-isNaN(undefined); // true
-isNaN({});        // true
-
-isNaN(true);      // false
-isNaN(null);      // false
-isNaN(37);        // false
-
-// strings
-isNaN("37");      // false : "37" est converti vers le nombre 37 qui n'est pas NaN
-isNaN("37.37");   // false : "37.37" est converti vers le nombre 37.37 qui n'est pas NaN
-isNaN("37,25");   // true  : la virgule n'est pas considérée comme un séparateur décimal
-isNaN("123ABC");  // true  : "123ABC" converti en 123 par parseInt mais en NaN par Number
-isNaN("");        // false : la chaîne vide est convertie en 0 qui n'est pas NaN
-isNaN(" ");       // false : une chaîne de blancs est convertie en 0 qui n'est pas NaN
-
-// dates
-isNaN(new Date());                // false
-isNaN(new Date().toString());     // true
-
-// Voici le résultat « faux-positif » qui fait que isNaN n'est pas entièrement fiable
-isNaN("blabla")   // true : "blabla" est converti en un nombre
-                  // Si on souhaite convertir cette valeur en nombre, cela échoue
-                  // et on obtient NaN
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES1')}}</td>
-   <td>{{Spec2('ES1')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-15.1.2.4', 'isNaN')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-isnan-number', 'isNaN')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-isnan-number', 'isNaN')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.isNaN")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("NaN")}}</li>
- <li>{{jsxref("Number.isNaN()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/isnan/index.md b/files/fr/web/javascript/reference/global_objects/isnan/index.md
new file mode 100644
index 0000000000..acc31bfd71
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/isnan/index.md
@@ -0,0 +1,133 @@
+---
+title: isNaN()
+slug: Web/JavaScript/Reference/Global_Objects/isNaN
+tags:
+  - JavaScript
+  - Méthode
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/isNaN
+original_slug: Web/JavaScript/Reference/Objets_globaux/isNaN
+---
+{{jsSidebar("Objects")}}
+
+La fonction **`isNaN()`** permet de déterminer si une valeur est {{jsxref("NaN")}}. On notera que cette fonction utilise des règles de conversion différentes de {{jsxref("Number.isNaN()")}}, définie avec ECMAScript 2015 (ES6).
+
+{{EmbedInteractiveExample("pages/js/globalprops-isnan.html")}}
+
+## Syntaxe
+
+    isNaN(valeurÀTester)
+
+### Paramètres
+
+- `valeurÀTester`
+  - : La valeur dont on souhaite déterminer si elle est {{jsxref("NaN")}}.
+
+### Valeur de retour
+
+`true` si la valeur fournie vaut {{jsxref("NaN")}}, sinon, la méthode renverra `false`.
+
+## Description
+
+### La nécessité d'avoir `isNaN()`
+
+À la différence des autres valeurs JavaScript, il est impossible d'utiliser les opérateurs d'égalité faible et stricte ({{jsxref("Opérateurs/Opérateurs_de_comparaison","==","#.C3.89galit.C3.A9_simple_(.3D.3D)")}} et {{jsxref("Opérateurs/Opérateurs_de_comparaison","===","#.C3.89galit.C3.A9_stricte_(.3D.3D.3D)")}}) afin de déterminer si une valeur _est_ ou _n'est pas_ réellement {{jsxref("NaN")}}. En effet `NaN == NaN` et `NaN === NaN` renvoient `false` tous les deux. C'est pour cela qu'il est nécessaire d'avoir la fonction `isNaN()`.
+
+### Les origines de `NaN`
+
+La valeur `NaN` est générée lorsqu'une opération arithmétique résulte en une valeur indéfinie ou non représentable. De telles valeurs ne représentent pas nécessairement des dépassements de condition. `NaN` peut également être le résultat d'une conversion numérique pour les valeurs qui n'ont pas de valeurs numériques correspondantes (par exemple lorsqu'on souhaite convertir la chaîne `"toto"` en un nombre).
+
+Par exemple, lorsqu'on divise zéro par zéro, on obtient `NaN`. En revanche, lorsqu'on divise d'autres nombres par zéro, on n'obtient pas ce résultat.
+
+### Comportement étrange de `isNaN()`
+
+Depuis les premières spécifications pour `isNaN()`, son comportement sur les arguments non-numériques a toujours été source de confusion. Lorsque l'argument passé à la fonction n'est pas du type [Number](https://es5.github.com/#x8.5), la valeur est d'abord convertie en une valeur du type Number. La valeur résultante est ensuite utilisée lors du test afin de déterminer si c'est {{jsxref("NaN")}}. Ainsi pour valeurs non numériques qui sont converties en une valeur non-NaN numérique (notamment la chaîne vide, les valeurs booléennes qui donnent zéro ou un), la fonction renverra `false`, ce qui pourrait être inattendu (en effet, la chaîne vide _n'est pas un nombre_). Ici, la confusion provient du fait que « not a number » a un sens particulier pour les valeurs numériques représentées selon IEEE-754. Cette fonction doit plutôt être vue comme la réponse à la question « est-ce que cette valeur, lorsqu'elle est convertie en une valeur numérique, correspond à la valeur IEEE-754 "Not A Number" ? ».
+
+La version ECMAScript ES2015 ajoute la méthode {{jsxref("Number.isNaN()")}}. `Number.isNaN(x)` permettra de tester de façon plus fiable si `x` vaut `NaN` ou non. Si on ne dispose pas de cette méthode, on peut également utiliser l'expression `(x != x)` afin de tester de façon plus certaine si `x` vaut `NaN` ou non (en effet le résultat de cette expression n'aura pas les faux positifs de `isNaN`). Sous cet angle, `isNaN()` peut être vu comme :
+
+```js
+var isNaN = function(valeur) {
+  return Number.isNaN(Number(valeur));
+};
+```
+
+Ou encore, en utilisant le fait que `NaN` est la seule valeur différente d'elle-même :
+
+```js
+var isNaN = function(valeur) {
+  var n = Number(valeur);
+  return n !== n;
+};
+```
+
+### `NaN` est « empoisonné »
+
+Cette fonction peut être utilisée afin de déterminer si la valeur courante peut faire partie d'une expression arithmétique. En effet, si un des composants d'une expression arithmétique vaut `NaN`, le résultat de l'expression sera `NaN` également (on dit alors que `NaN` « empoisonne » l'expression). La méthode `isNaN()` permet alors de vérifier, avant de construire une expression, que les valeurs utilisées n'empoisonneront pas l'expression.
+
+On peut par exemple construire une fonction dont on souhaite qu'elle incrémente l'argument et que la valeur qu'elle renvoie ne puisse pas être `NaN`. Le code de cette fonction pourrait être :
+
+```js
+function incrément(x) {
+  if (isNaN(x)){
+    x = 0;
+  }
+  return x + 1;
+}
+
+// En utilisant des notations raccourcies,
+// on pourrait écrire une fonction équivalente
+function incrémentCourt(x) {
+  isNaN(x) ? 1 : x + 1;
+}
+
+incrément("blabla");  // 1
+incrément(1);         // 2
+incrément(NaN);       // 1
+```
+
+## Exemples
+
+```js
+isNaN(NaN);       // true
+isNaN(undefined); // true
+isNaN({});        // true
+
+isNaN(true);      // false
+isNaN(null);      // false
+isNaN(37);        // false
+
+// strings
+isNaN("37");      // false : "37" est converti vers le nombre 37 qui n'est pas NaN
+isNaN("37.37");   // false : "37.37" est converti vers le nombre 37.37 qui n'est pas NaN
+isNaN("37,25");   // true  : la virgule n'est pas considérée comme un séparateur décimal
+isNaN("123ABC");  // true  : "123ABC" converti en 123 par parseInt mais en NaN par Number
+isNaN("");        // false : la chaîne vide est convertie en 0 qui n'est pas NaN
+isNaN(" ");       // false : une chaîne de blancs est convertie en 0 qui n'est pas NaN
+
+// dates
+isNaN(new Date());                // false
+isNaN(new Date().toString());     // true
+
+// Voici le résultat « faux-positif » qui fait que isNaN n'est pas entièrement fiable
+isNaN("blabla")   // true : "blabla" est converti en un nombre
+                  // Si on souhaite convertir cette valeur en nombre, cela échoue
+                  // et on obtient NaN
+```
+
+## Spécifications
+
+| Spécification                                                            | État                         | Commentaires         |
+| ------------------------------------------------------------------------ | ---------------------------- | -------------------- |
+| {{SpecName('ES1')}}                                                 | {{Spec2('ES1')}}         | Définition initiale. |
+| {{SpecName('ES5.1', '#sec-15.1.2.4', 'isNaN')}}         | {{Spec2('ES5.1')}}     |                      |
+| {{SpecName('ES6', '#sec-isnan-number', 'isNaN')}}         | {{Spec2('ES6')}}         |                      |
+| {{SpecName('ESDraft', '#sec-isnan-number', 'isNaN')}} | {{Spec2('ESDraft')}} |                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.isNaN")}}
+
+## Voir aussi
+
+- {{jsxref("NaN")}}
+- {{jsxref("Number.isNaN()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/json/index.html b/files/fr/web/javascript/reference/global_objects/json/index.html
deleted file mode 100644
index cd592c8638..0000000000
--- a/files/fr/web/javascript/reference/global_objects/json/index.html
+++ /dev/null
@@ -1,150 +0,0 @@
----
-title: JSON
-slug: Web/JavaScript/Reference/Global_Objects/JSON
-tags:
-  - JSON
-  - JavaScript
-  - Object
-  - Reference
-  - polyfill
-translation_of: Web/JavaScript/Reference/Global_Objects/JSON
-original_slug: Web/JavaScript/Reference/Objets_globaux/JSON
----
-<div>{{JSRef}}</div>
-
-<p>L’objet <strong><code>JSON</code></strong> contient des méthodes pour interpréter du <a class="external" href="https://json.org/">JSON</a> (JavaScript Object Notation) (voir également la page du glossaire {{glossary("JSON")}}) et convertir des valeurs en JSON. Il ne peut être appelé ou construit, et, en dehors de ses deux méthodes, n’a pas de fonctionnalité propre.</p>
-
-<h2 id="Différences_entres_JavaScript_et_JSON">Différences entres JavaScript et JSON</h2>
-
-<p>JSON est une syntaxe pour sérialiser des objets, tableaux, nombres, chaînes de caractères, booléens et valeurs <em>null</em>. Elle est basée sur la syntaxe de JavaScript mais en est distincte : du code JavaScript n’est pas nécessairement du JSON, et du JSON n’est pas nécessairement du JavaScript.</p>
-
-<ul>
- <li>Pour les objets et les tableaux
-  <ul>
-   <li>Les noms de propriété doivent être des chaînes de caractères délimitées par des guillements doubles ; les <em>trailing commas</em> sont interdits</li>
-  </ul>
- </li>
- <li>Pour les nombres
-  <ul>
-   <li>Les zéros non significatifs sont interdits ; un point décimal doit être suivi d’au moins un chiffre (plus exactement : <code>JSON.stringify()</code> ignorera les zéros mais <code>JSON.parse()</code> déclenchera une exception <code>SyntaxError</code>).</li>
-  </ul>
- </li>
- <li>Pour le texte : <strong>tout texte JSON est une expression JavaScript</strong> (pour les moteurs qui implémentent <a href="https://github.com/tc39/proposal-json-superset">cette proposition</a>).
-  <ul>
-   <li>Pour les autres moteurs, seul un jeu limité de caractères peut être échappé ; certains caractères de contrôle sont interdits ; le séparateur de ligne Unicode (<a href="https://unicode-table.com/en/2028/">U+2028</a>) et le séparateur de paragraphe (<a href="https://unicode-table.com/en/2029/">U+2029</a>) sont autorisés en JSON mais pas en JavaScript dans les littéraux de chaînes de caractères.</li>
-  </ul>
- </li>
-</ul>
-
-<p>Dans l'exemple suivant, on utilise {{jsxref("JSON.parse()")}} afin d'analyser la chaîne JSON et <code>eval</code> afin d'exécuter le code correspondant :</p>
-
-<pre class="brush: js">var code = '"\u2028\u2029"';
-JSON.parse(code); // vaut "\u2028\u2029" pour tous les moteurs
-eval(code); // provoque une SyntaxError pour les anciens moteurs</pre>
-
-<h2 id="Syntaxe_complète">Syntaxe complète</h2>
-
-<pre class="syntaxbox"><var>JSON</var> = <strong>null</strong>
-    <em>ou</em> <strong>true</strong> <em>ou</em> <strong>false</strong>
-    <em>ou</em> <var>NombreJSON</var>
-    <em>ou</em> <var>ChaîneJSON</var>
-    <em>ou</em> <var>ObjetJSON</var>
-    <em>ou</em> <var>TableauJSON</var>
-
-<var>NombreJSON</var> = <strong>-</strong> <var>NombrePositif</var>
-          <em>ou</em> <var>NombrePositif</var>
-<var>NombrePositif</var> = NombreDécimal
-              <em>ou</em> <var>NombreDécimal</var> <strong>.</strong> <var>Chiffres</var>
-              <em>ou</em> <var>NombreDécimal</var> <strong>.</strong> <var>Chiffres</var> <var>PartiExposant</var>
-              <em>ou</em> <var>NombreDécimal</var> <var>PartiExposant</var>
-<var>NombreDécimal</var> = <strong>0</strong>
-             <em>ou</em> <var>UnÀNeuf</var> <var>Chiffres</var>
-<var>PartiExposant</var> = <strong>e</strong> <var>Exposant</var>
-            <em>ou</em> <strong>E</strong> <var>Exposant</var>
-<var>Exposant</var> = <var>Chiffres</var>
-        <em>ou</em> <strong>+</strong> <var>Chiffres</var>
-        <em>ou</em> <strong>-</strong> <var>Chiffres</var>
-<var>Chiffres</var> = <var>Chiffre</var>
-      <em>ou</em> <var>Chiffres</var> <var>Chiffre</var>
-<var>Chiffre</var> = <strong>0</strong> à <strong>9</strong>
-<var>UnÀNeuf</var> = <strong>1</strong> à <strong>9</strong>
-
-<var>ChaîneJSON</var> = <strong>""</strong>
-          <em>ou</em> <strong>"</strong> <var>ChaîneCaractères</var> <strong>"</strong>
-<var>ChaîneCaractères</var> = <var>ChaîneCaractère</var>
-                <em>ou</em> <var>ChaîneCaractères</var> <var>ChaîneCaractère</var>
-<var>ChaîneCaractère</var> = un caractère
-                  <em>sauf</em> <strong>"</strong> <em>ou</em> <strong>\</strong> <em>ou</em> U+0000 à U+001F
-               <em>ou</em> <var>SéquenceÉchappement</var>
-<var>SéquenceÉchappement</var> = <strong>\" </strong><em>ou</em> <strong>\/ </strong><em>ou</em> <strong>\\ </strong><em>ou</em> <strong>\b </strong><em>ou</em> <strong>\f </strong><em>ou</em> <strong>\n </strong><em>ou</em> <strong>\r </strong><em>ou</em> <strong>\t</strong>
-              <em>ou</em> <strong>\u</strong> <var>ChifreHexadécimal</var> <var>ChifreHexadécimal</var> <var>ChifreHexadécimal</var> <var>ChifreHexadécimal</var>
-<var>ChifreHexadécimal</var> = <strong>0</strong> à <strong>9</strong>
-        <em>ou</em> <strong>A</strong> à <strong>F</strong>
-        <em>ou</em> <strong>a</strong> à <strong>f</strong>
-
-<var>ObjetJSON</var> = <strong>{</strong> <strong>}</strong>
-          <em>ou</em> <strong>{</strong> <var>Membres</var> <strong>}</strong>
-<var>Membres</var> = <var>ChaîneJSON</var> <strong>:</strong> <var>JSON</var>
-       <em>ou</em> <var>Membres</var> <strong>,</strong> <var>ChaîneJSON</var> <strong>:</strong> <var>JSON</var>
-
-<var>TableauJSON</var> = <strong>[</strong> <strong>]</strong>
-         <em>ou</em> <strong>[</strong> <var>ÉlémentsTableau</var> <strong>]</strong>
-<var>ÉlémentsTableau</var> = <var>JSON</var>
-             <em>ou</em> <var>ÉlémentsTableau</var> <strong>,</strong> <var>JSON</var></pre>
-
-<p>Des espaces blancs insignifiants peuvent être présents n’importe où sauf dans un <code><var>JSONNumber</var></code> (les nombres ne doivent pas contenir d’espaces blancs) ou dans un <code><var>JSONString</var></code> (where it is interpreted as the corresponding character in the string, or would cause an error). Les caractères tabulation (<a href="https://unicode-table.com/en/0009/">U+0009</a>), retour chariot (<a href="https://unicode-table.com/en/000D/">U+000D</a>), saut de ligne (<a href="https://unicode-table.com/en/000A/">U+000A</a>), and espace (<a href="https://unicode-table.com/en/0020/">U+0020</a>) sont les seuls caractères blancs valides.</p>
-
-<h2 id="Méthodes">Méthodes</h2>
-
-<dl>
- <dt>{{jsxref("JSON.parse()", "JSON.parse(<var>texte</var>[, <var>revivificateur</var>])")}}</dt>
- <dd>Analysez le <code>texte</code> de la chaîne comme JSON, transformez éventuellement la valeur produite et ses propriétés, et renvoyez la valeur. Toute violation de la syntaxe JSON, y compris celles concernant les différences entre JavaScript et JSON, entraîne l'envoi d'un {{jsxref("SyntaxError")}}. L'option "<code>revivificateur</code>" permet d'interpréter ce que le <code>remplacement</code> a utilisé pour remplacer d'autres types de données.</dd>
- <dt>{{jsxref("JSON.stringify()", "JSON.stringify(<var>valeur</var>[, remplacement[, expace]])")}}</dt>
- <dd>Retourne une chaîne JSON correspondant à la valeur spécifiée, en incluant éventuellement seulement certaines propriétés ou en remplaçant les valeurs des propriétés d'une manière définie par l'utilisateur. Par défaut, toutes les instances de {{jsxref("undefined")}} sont remplacées par {{jsxref("null")}}, et les autres types de données natives non prises en charge sont censurés. L'option de <code>remplacement</code> permet de spécifier un autre comportement.</dd>
-</dl>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-15.12', 'JSON')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-json-object', 'JSON')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-json-object', 'JSON')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.JSON")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Date.prototype.toJSON()")}}</li>
- <li>Quelques outils permettant de manipuler des données en JSON
-  <ul>
-   <li><a href="http://jsoncompare.org/">JSON Compare</a> qui permet de comparer deux JSON</li>
-   <li><a href="http://jsonbeautifier.org/">JSON Beautifier</a> qui permet de visualiser et d'éditer un fichier JSON</li>
-   <li><a href="https://jsonparser.org/">JSON Parser</a> qui permet de formatter une chaîne JSON</li>
-   <li><a href="https://extendsclass.com/json-validator.html">JSON Formatter</a> qui permet de formatter et échapper une chaîne JSON </li>
-   <li><a href="https://tools.learningcontainer.com/json-validator/">JSON Validator</a> qui permet de valider une chaîne JSON</li>
-  </ul>
- </li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/json/index.md b/files/fr/web/javascript/reference/global_objects/json/index.md
new file mode 100644
index 0000000000..ac25b46a6b
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/json/index.md
@@ -0,0 +1,121 @@
+---
+title: JSON
+slug: Web/JavaScript/Reference/Global_Objects/JSON
+tags:
+  - JSON
+  - JavaScript
+  - Object
+  - Reference
+  - polyfill
+translation_of: Web/JavaScript/Reference/Global_Objects/JSON
+original_slug: Web/JavaScript/Reference/Objets_globaux/JSON
+---
+{{JSRef}}
+
+L’objet **`JSON`** contient des méthodes pour interpréter du [JSON](https://json.org/) (JavaScript Object Notation) (voir également la page du glossaire {{glossary("JSON")}}) et convertir des valeurs en JSON. Il ne peut être appelé ou construit, et, en dehors de ses deux méthodes, n’a pas de fonctionnalité propre.
+
+## Différences entres JavaScript et JSON
+
+JSON est une syntaxe pour sérialiser des objets, tableaux, nombres, chaînes de caractères, booléens et valeurs _null_. Elle est basée sur la syntaxe de JavaScript mais en est distincte : du code JavaScript n’est pas nécessairement du JSON, et du JSON n’est pas nécessairement du JavaScript.
+
+- Pour les objets et les tableaux
+
+  - Les noms de propriété doivent être des chaînes de caractères délimitées par des guillements doubles ; les _trailing commas_ sont interdits
+
+- Pour les nombres
+
+  - Les zéros non significatifs sont interdits ; un point décimal doit être suivi d’au moins un chiffre (plus exactement : `JSON.stringify()` ignorera les zéros mais `JSON.parse()` déclenchera une exception `SyntaxError`).
+
+- Pour le texte : **tout texte JSON est une expression JavaScript** (pour les moteurs qui implémentent [cette proposition](https://github.com/tc39/proposal-json-superset)).
+
+  - Pour les autres moteurs, seul un jeu limité de caractères peut être échappé ; certains caractères de contrôle sont interdits ; le séparateur de ligne Unicode ([U+2028](https://unicode-table.com/en/2028/)) et le séparateur de paragraphe ([U+2029](https://unicode-table.com/en/2029/)) sont autorisés en JSON mais pas en JavaScript dans les littéraux de chaînes de caractères.
+
+Dans l'exemple suivant, on utilise {{jsxref("JSON.parse()")}} afin d'analyser la chaîne JSON et `eval` afin d'exécuter le code correspondant :
+
+```js
+var code = '"\u2028\u2029"';
+JSON.parse(code); // vaut "\u2028\u2029" pour tous les moteurs
+eval(code); // provoque une SyntaxError pour les anciens moteurs
+```
+
+## Syntaxe complète
+
+    JSON = null
+        ou true ou false
+        ou NombreJSON
+        ou ChaîneJSON
+        ou ObjetJSON
+        ou TableauJSON
+
+    NombreJSON = - NombrePositif
+              ou NombrePositif
+    NombrePositif = NombreDécimal
+                  ou NombreDécimal . Chiffres
+                  ou NombreDécimal . Chiffres PartiExposant
+                  ou NombreDécimal PartiExposant
+    NombreDécimal = 0
+                 ou UnÀNeuf Chiffres
+    PartiExposant = e Exposant
+                ou E Exposant
+    Exposant = Chiffres
+            ou + Chiffres
+            ou - Chiffres
+    Chiffres = Chiffre
+          ou Chiffres Chiffre
+    Chiffre = 0 à 9
+    UnÀNeuf = 1 à 9
+
+    ChaîneJSON = ""
+              ou " ChaîneCaractères "
+    ChaîneCaractères = ChaîneCaractère
+                    ou ChaîneCaractères ChaîneCaractère
+    ChaîneCaractère = un caractère
+                      sauf " ou \ ou U+0000 à U+001F
+                   ou SéquenceÉchappement
+    SéquenceÉchappement = \" ou \/ ou \\ ou \b ou \f ou \n ou \r ou \t
+                  ou \u ChifreHexadécimal ChifreHexadécimal ChifreHexadécimal ChifreHexadécimal
+    ChifreHexadécimal = 0 à 9
+            ou A à F
+            ou a à f
+
+    ObjetJSON = { }
+              ou { Membres }
+    Membres = ChaîneJSON : JSON
+           ou Membres , ChaîneJSON : JSON
+
+    TableauJSON = [ ]
+             ou [ ÉlémentsTableau ]
+    ÉlémentsTableau = JSON
+                 ou ÉlémentsTableau , JSON
+
+Des espaces blancs insignifiants peuvent être présents n’importe où sauf dans un `JSONNumber` (les nombres ne doivent pas contenir d’espaces blancs) ou dans un `JSONString` (where it is interpreted as the corresponding character in the string, or would cause an error). Les caractères tabulation ([U+0009](https://unicode-table.com/en/0009/)), retour chariot ([U+000D](https://unicode-table.com/en/000D/)), saut de ligne ([U+000A](https://unicode-table.com/en/000A/)), and espace ([U+0020](https://unicode-table.com/en/0020/)) sont les seuls caractères blancs valides.
+
+## Méthodes
+
+- {{jsxref("JSON.parse()", "JSON.parse(<var>texte</var>[, <var>revivificateur</var>])")}}
+  - : Analysez le `texte` de la chaîne comme JSON, transformez éventuellement la valeur produite et ses propriétés, et renvoyez la valeur. Toute violation de la syntaxe JSON, y compris celles concernant les différences entre JavaScript et JSON, entraîne l'envoi d'un {{jsxref("SyntaxError")}}. L'option "`revivificateur`" permet d'interpréter ce que le `remplacement` a utilisé pour remplacer d'autres types de données.
+- {{jsxref("JSON.stringify()", "JSON.stringify(<var>valeur</var>[, remplacement[, expace]])")}}
+  - : Retourne une chaîne JSON correspondant à la valeur spécifiée, en incluant éventuellement seulement certaines propriétés ou en remplaçant les valeurs des propriétés d'une manière définie par l'utilisateur. Par défaut, toutes les instances de {{jsxref("undefined")}} sont remplacées par {{jsxref("null")}}, et les autres types de données natives non prises en charge sont censurés. L'option de `remplacement` permet de spécifier un autre comportement.
+
+## Spécifications
+
+| Spécification                                                        | État                         | Commentaires         |
+| -------------------------------------------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName('ES5.1', '#sec-15.12', 'JSON')}}             | {{Spec2('ES5.1')}}     | Définition initiale. |
+| {{SpecName('ES6', '#sec-json-object', 'JSON')}}     | {{Spec2('ES6')}}         |                      |
+| {{SpecName('ESDraft', '#sec-json-object', 'JSON')}} | {{Spec2('ESDraft')}} |                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.JSON")}}
+
+## Voir aussi
+
+- {{jsxref("Date.prototype.toJSON()")}}
+- Quelques outils permettant de manipuler des données en JSON
+
+  - [JSON Compare](http://jsoncompare.org/) qui permet de comparer deux JSON
+  - [JSON Beautifier](http://jsonbeautifier.org/) qui permet de visualiser et d'éditer un fichier JSON
+  - [JSON Parser](https://jsonparser.org/) qui permet de formatter une chaîne JSON
+  - [JSON Formatter](https://extendsclass.com/json-validator.html) qui permet de formatter et échapper une chaîne JSON
+  - [JSON Validator](https://tools.learningcontainer.com/json-validator/) qui permet de valider une chaîne JSON
diff --git a/files/fr/web/javascript/reference/global_objects/json/parse/index.html b/files/fr/web/javascript/reference/global_objects/json/parse/index.html
deleted file mode 100644
index 071d0c8a92..0000000000
--- a/files/fr/web/javascript/reference/global_objects/json/parse/index.html
+++ /dev/null
@@ -1,128 +0,0 @@
----
-title: JSON.parse()
-slug: Web/JavaScript/Reference/Global_Objects/JSON/parse
-tags:
-  - ECMAScript 5
-  - JSON
-  - JavaScript
-  - Méthode
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/JSON/parse
-original_slug: Web/JavaScript/Reference/Objets_globaux/JSON/parse
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <code><strong>JSON.parse()</strong></code> analyse une chaîne de caractères JSON et construit la valeur JavaScript ou l'objet décrit par cette chaîne. On peut éventuellement utiliser cette fonction avec un paramètre de modification permettant de traiter l'objet avant qu'il soit renvoyé.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/json-parse.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">JSON.parse(<var>texte</var>[, <var>reviver</var>])</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>texte</code></dt>
- <dd>La chaine de caractère à analyser comme du JSON. Voir l'objet {{jsxref("JSON")}} pour une description de la syntaxe JSON.</dd>
- <dt><code>reviver</code></dt>
- <dd>Si l'argument est une fonction, effectue une opération de transformation sur la valeur analysée avant de la renvoyer.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Un objet ({{jsxref("Object")}}) correspondant au texte envoyé.</p>
-
-<h3 id="Exceptions">Exceptions</h3>
-
-<p>Lève une exception {{jsxref("SyntaxError")}} si la chaine de caractère à analyser ne contient pas du JSON valide.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Utiliser_JSON.parse">Utiliser <code>JSON.parse()</code></h3>
-
-<pre class="brush: js">try {
-  JSON.parse('{}');              // {}
-  JSON.parse('true');            // true
-  JSON.parse('"toto"');          // "toto"
-  JSON.parse('[1, 5, "false"]'); // [1, 5, "false"]
-  JSON.parse('null');            // null
-} catch (e) {
-  console.error("Parsing error:", e);
-}
-</pre>
-
-<h3 id="Utiliser_le_paramètre_reviver">Utiliser le paramètre <code>reviver</code></h3>
-
-<p>Si un <em>reviver</em> est spécifié, la valeur obtenue par l'analyse est transformée avant d'être renvoyée. Plus précisément, la valeur calculée, et toutes les propriétés (commençant avec les propriétés les plus imbriquées), sont passées individuellement au <em>reviver</em>, qui est appelé avec : l'objet contenant la propriété en cours de traitement, le nom de la propriété en chaine de caractères et la valeur de la propriété. Si la fonction <em>reviver</em> retourne {{jsxref("undefined")}} (ou ne retourne aucune valeur, par exemple si l'exécution s'arrête à la fin de la fonction), la propriété est supprimée de l'objet. Autrement la propriété est redéfinie avec la valeur retournée.</p>
-
-<p>Si le <em>reviver</em> ne transforme que certaines valeurs et pas d'autres, assurez-vous que les valeurs inchangées soient renvoyées telles quelles. En effet, si elles ne sont pas renvoyées, elles seront supprimés sur l'objet obtenu !</p>
-
-<pre class="brush: js">JSON.parse('{"p": 5}', (key, value) =&gt; {
-  if (typeof value === 'number') {
-    return value * 2;  // renvoie value * 2 pour les nombres
-  }
-  return value;        // pour le reste, la valeur est inchangée
-});
-
-// { p: 10 }
-
-JSON.parse('{"1": 1, "2": 2,"3": {"4": 4, "5": {"6": 6}}}', (key, value) =&gt; {
-    console.log(key);            // on affiche le nom de la propriété dans la console
-    return value;                // et on renvoie la valeur inchangée.
-});
-
-// 1
-// 2
-// 4
-// 6
-// 5
-// 3
-// ""</pre>
-
-<h3 id="JSON.parse_naccepte_pas_les_virgules_en_fin_de_tableau"><code>JSON.parse()</code> n'accepte pas les virgules en fin de tableau</h3>
-
-<pre class="brush: js example-bad">// les deux instructions qui suivent lèveront une SyntaxError
-JSON.parse('[1, 2, 3, 4, ]');
-JSON.parse('{ "toto" : 1, }');
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-15.12.2', 'JSON.parse')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td>Définition initiale.<br>
-    Implementée avec JavaScript 1.7.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-json.parse', 'JSON.parse')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-json.parse', 'JSON.parse')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.JSON.parse")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("JSON.stringify()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/json/parse/index.md b/files/fr/web/javascript/reference/global_objects/json/parse/index.md
new file mode 100644
index 0000000000..723c68223b
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/json/parse/index.md
@@ -0,0 +1,106 @@
+---
+title: JSON.parse()
+slug: Web/JavaScript/Reference/Global_Objects/JSON/parse
+tags:
+  - ECMAScript 5
+  - JSON
+  - JavaScript
+  - Méthode
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/JSON/parse
+original_slug: Web/JavaScript/Reference/Objets_globaux/JSON/parse
+---
+{{JSRef}}
+
+La méthode **`JSON.parse()`** analyse une chaîne de caractères JSON et construit la valeur JavaScript ou l'objet décrit par cette chaîne. On peut éventuellement utiliser cette fonction avec un paramètre de modification permettant de traiter l'objet avant qu'il soit renvoyé.
+
+{{EmbedInteractiveExample("pages/js/json-parse.html")}}
+
+## Syntaxe
+
+    JSON.parse(texte[, reviver])
+
+### Paramètres
+
+- `texte`
+  - : La chaine de caractère à analyser comme du JSON. Voir l'objet {{jsxref("JSON")}} pour une description de la syntaxe JSON.
+- `reviver`
+  - : Si l'argument est une fonction, effectue une opération de transformation sur la valeur analysée avant de la renvoyer.
+
+### Valeur de retour
+
+Un objet ({{jsxref("Object")}}) correspondant au texte envoyé.
+
+### Exceptions
+
+Lève une exception {{jsxref("SyntaxError")}} si la chaine de caractère à analyser ne contient pas du JSON valide.
+
+## Exemples
+
+### Utiliser `JSON.parse()`
+
+```js
+try {
+  JSON.parse('{}');              // {}
+  JSON.parse('true');            // true
+  JSON.parse('"toto"');          // "toto"
+  JSON.parse('[1, 5, "false"]'); // [1, 5, "false"]
+  JSON.parse('null');            // null
+} catch (e) {
+  console.error("Parsing error:", e);
+}
+```
+
+### Utiliser le paramètre `reviver`
+
+Si un _reviver_ est spécifié, la valeur obtenue par l'analyse est transformée avant d'être renvoyée. Plus précisément, la valeur calculée, et toutes les propriétés (commençant avec les propriétés les plus imbriquées), sont passées individuellement au _reviver_, qui est appelé avec : l'objet contenant la propriété en cours de traitement, le nom de la propriété en chaine de caractères et la valeur de la propriété. Si la fonction _reviver_ retourne {{jsxref("undefined")}} (ou ne retourne aucune valeur, par exemple si l'exécution s'arrête à la fin de la fonction), la propriété est supprimée de l'objet. Autrement la propriété est redéfinie avec la valeur retournée.
+
+Si le _reviver_ ne transforme que certaines valeurs et pas d'autres, assurez-vous que les valeurs inchangées soient renvoyées telles quelles. En effet, si elles ne sont pas renvoyées, elles seront supprimés sur l'objet obtenu !
+
+```js
+JSON.parse('{"p": 5}', (key, value) => {
+  if (typeof value === 'number') {
+    return value * 2;  // renvoie value * 2 pour les nombres
+  }
+  return value;        // pour le reste, la valeur est inchangée
+});
+
+// { p: 10 }
+
+JSON.parse('{"1": 1, "2": 2,"3": {"4": 4, "5": {"6": 6}}}', (key, value) => {
+    console.log(key);            // on affiche le nom de la propriété dans la console
+    return value;                // et on renvoie la valeur inchangée.
+});
+
+// 1
+// 2
+// 4
+// 6
+// 5
+// 3
+// ""
+```
+
+### `JSON.parse()` n'accepte pas les virgules en fin de tableau
+
+```js example-bad
+// les deux instructions qui suivent lèveront une SyntaxError
+JSON.parse('[1, 2, 3, 4, ]');
+JSON.parse('{ "toto" : 1, }');
+```
+
+## Spécifications
+
+| Spécification                                                                | État                         | Commentaires                                          |
+| ---------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- |
+| {{SpecName('ES5.1', '#sec-15.12.2', 'JSON.parse')}}         | {{Spec2('ES5.1')}}     | Définition initiale. Implementée avec JavaScript 1.7. |
+| {{SpecName('ES6', '#sec-json.parse', 'JSON.parse')}}         | {{Spec2('ES6')}}         |                                                       |
+| {{SpecName('ESDraft', '#sec-json.parse', 'JSON.parse')}} | {{Spec2('ESDraft')}} |                                                       |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.JSON.parse")}}
+
+## Voir aussi
+
+- {{jsxref("JSON.stringify()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/json/stringify/index.html b/files/fr/web/javascript/reference/global_objects/json/stringify/index.html
deleted file mode 100644
index be5bb15eac..0000000000
--- a/files/fr/web/javascript/reference/global_objects/json/stringify/index.html
+++ /dev/null
@@ -1,367 +0,0 @@
----
-title: JSON.stringify()
-slug: Web/JavaScript/Reference/Global_Objects/JSON/stringify
-tags:
-  - JSON
-  - JavaScript
-  - Méthode
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/JSON/stringify
-original_slug: Web/JavaScript/Reference/Objets_globaux/JSON/stringify
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <code><strong>JSON.stringify()</strong></code> convertit une valeur JavaScript en chaîne JSON. Optionnellement, elle peut remplacer des valeurs ou spécifier les propriétés à inclure si un tableau de propriétés a été fourni.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/json-stringify.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">JSON.stringify( <var>valeur</var>[, <var>remplaçant</var> [, <var>espace</var>]])</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>valeur</code></dt>
- <dd>La valeur à convertir en chaîne JSON.</dd>
- <dt><code>remplaçant</code> {{optional_inline}}</dt>
- <dd>
- <p>Une fonction qui modifie le processus de transformation ou un tableau de chaînes de caractères et de nombres qui sont utilisés comme liste blanche pour sélectionner/filtrer les propriétés de l'objet à inclure dans la chaîne JSON. Si cette valeur est {{jsxref("null")}} ou n'est pas fournie, toutes les propriétés de l'objet seront inclues dans la chaîne résultante.</p>
- </dd>
- <dt><code>espace</code> {{optional_inline}}</dt>
- <dd>Un objet {{jsxref("String")}} ou {{jsxref("Number")}} qui est utilisé pour insérer des blancs dans la chaîne JSON produite afin de faciliter la lisibilité.</dd>
-</dl>
-
-<ul>
- <li>Si cet argument est un nombre, il indiquera le nombre d'espaces à utiliser pour l'indentation (la valeur est ramenée à 10 si elle dépasse 10).</li>
- <li>Si l'argument est une chaîne, les 10 premiers caractères (ou la chaîne si elle est plus courte) seront utilisés pour les blancs.</li>
- <li>Si le paramètre n'est pas fourni (ou s'il est nul), aucun blanc ne sera utilisé.</li>
-</ul>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Une chaîne de caractères JSON qui représente la valeur indiquée.</p>
-
-<h3 id="Exceptions">Exceptions</h3>
-
-<ul>
- <li>Cette méthode lève une exception {{jsxref("TypeError")}} (« <em>cyclic object value</em> ») lorsqu'elle trouve une référence circulaire.</li>
- <li>Cette méthode lève une exception {{jsxref("TypeError")}} (« <em>BigInt value can't be serialized in JSON</em> ») lorsqu'on tente de convertir une valeur {{jsxref("BigInt")}} en une chaîne de caractères JSON.</li>
-</ul>
-
-<h2 id="Description">Description</h2>
-
-<p>La fonction <code>JSON.stringify()</code> convertit un objet en JSON :</p>
-
-<ul>
- <li>L'ordre des propriétés des objets qui ne sont pas des tableaux n'est pas garanti. Par la suite, ne pas supposer que cet ordre soit respecté.</li>
- <li>Les objets {{jsxref("Boolean")}}, {{jsxref("Number")}} et {{jsxref("String")}} sont convertis en leur valeur primitive correspondante, en accord avec la sémantique traditionnelle.</li>
- <li>Si {{jsxref("undefined")}}, une fonction ou un symbole est rencontré lors de la conversion , il est soit omis ( quand il se trouve dans un objet ) ou ramené à {{jsxref("null")}} ( quand il se trouve dans un tableau). <code>JSON.stringify()</code> peut également renvoyer <code>undefined</code> lorsqu'il reçoit des valeurs « brutes » qui ne sont pas objectifiées comme par exemple <code>JSON.stringify(function(){})</code> ou <code>JSON.stringify(undefined)</code>.</li>
- <li>Toutes les propriétés liées aux symboles (cf. {{jsxref("Symbol")}}) seront complètement ignorées , même lorsque la fonction <code>remplaçant</code> est utilisée.</li>
- <li>Les propriétés qui ne sont pas énumérables seront ignorées.</li>
- <li>Les instances de {{jsxref("Date")}} implémentent la fonction <code>toJSON()</code> en renvoyant une chaîne de caractères (identique à celle renvoyée par <code>date.toISOString()</code>). Aussi, les dates sont traitées comme des chaînes de caractères.</li>
- <li>Les nombres {{jsxref("Infinity")}} et {{jsxref("NaN")}}, ainsi que l'objet {{jsxref("null")}} sont traités comme <code>null</code>.</li>
- <li>Pour les autres instances d'objets tels que {{jsxref("Map")}}, {{jsxref("Set")}}, {{jsxref("WeakMap")}} et {{jsxref("WeakSet")}}, seules les propriétés énumérables sont sérialisées.</li>
-</ul>
-
-<pre class="brush: js">JSON.stringify({});                        // '{}'
-JSON.stringify(true);                      // 'true'
-JSON.stringify("toto");                    // '"toto"'
-JSON.stringify([1, "false", false]);       // '[1,"false",false]'
-JSON.stringify([NaN, null, Infinity]);   // '[null,null,null]'
-JSON.stringify({ x: 5 });                  // '{"x":5}'
-
-JSON.stringify(new Date(2006, 0, 2, 15, 4, 5));
-// '"2006-01-02T23:04:05.000Z"'
-
-// Exemples
-JSON.stringify({x: 5, y: 6});
-// '{"x":5,"y":6}'
-JSON.stringify([new Number(3), new String("false"), new Boolean(false)]);
-// '[3,"false",false]'
-
-// Les tableaux avec des propriétés ne sont pas énumérables
-// et n'ont pas de sens selon JSON
-let a = ["toto", "truc"];
-a["bidule"] = "youpi"; // a:[ 0: "toto", 1: "truc", bidule: "youpi"]
-JSON.stringify(a);
-// '["toto","truc"]'
-
-// Symboles
-JSON.stringify({x: undefined, y: Object, z: Symbol("")});
-// '{}'
-JSON.stringify({[Symbol("toto")]: "toto"});
-// '{}'
-JSON.stringify({[Symbol.for("toto")]: "toto"}, [Symbol.for("toto")]);
-// '{}'
-JSON.stringify({[Symbol.for("toto")]: "toto"}, function (k, v) {
-  if (typeof k === "symbol"){
-    return "a symbol";
-  }
-});
-// '{}'
-JSON.stringify({ x: [10, undefined, function(){}, Symbol('')] });
-// '{"x":[10,null,null,null]}'
-
-// Structures de données classiques
-JSON.stringify([new Set([1]), new Map([[1, 2]]), new WeakSet([{a: 1}]), new WeakMap([[{a: 1}, 2]])]);
-// '[{},{},{},{}]'
-
-// TypedArray
-JSON.stringify([new Int8Array([1]), new Int16Array([1]), new Int32Array([1])]);
-// '[{"0":1},{"0":1},{"0":1}]'
-JSON.stringify([new Uint8Array([1]), new Uint8ClampedArray([1]), new Uint16Array([1]), new Uint32Array([1])]);
-// '[{"0":1},{"0":1},{"0":1},{"0":1}]'
-JSON.stringify([new Float32Array([1]), new Float64Array([1])]);
-// '[{"0":1},{"0":1}]'
-
-// toJSON()
-JSON.stringify({ x: 5, y: 6, toJSON(){ return this.x + this.y; } });
-// '11'
-
-// Symbols:
-JSON.stringify({ x: undefined, y: Object, z: Symbol('') });
-// '{}'
-JSON.stringify({ [Symbol('foo')]: 'foo' });
-// '{}'
-JSON.stringify({ [Symbol.for('foo')]: 'foo' }, [Symbol.for('foo')]);
-// '{}'
-JSON.stringify({ [Symbol.for('foo')]: 'foo' }, function(k, v) {
-  if (typeof k === 'symbol') {
-    return 'a symbol';
-  }
-});
-// undefined
-
-// Propriétés non énumérables
-JSON.stringify(Object.create(null, { x: { value: 'x', enumerable: false }, y: { value: 'y', enumerable: true } }) );
-// '{"y":"y"}'
-
-// Échec avec BigInt
-JSON.stringify({x: 2n});
-// TypeError: BigInt value can't be serialized in JSON
-</pre>
-
-<h3 id="L'argument_remplaçant">L'argument <code>remplaçant</code></h3>
-
-<p>L'argument <code>remplaçant</code> est une fonction ou un tableau. Si c'est une fonction, elle prend deux paramètres : une clé et la valeur qui est traitée pour être convertie en chaîne. L'objet dans lequel la clé a été trouvée sera fourni comme paramètre <code>this</code> pour la fonction. Cette fonction est d'abord appelée avec une chaîne vide comme clé représentant l'objet à transformer puis elle est appelée sur chaque propriété de l'objet ou du tableau à transformer en chaîne. Cette fonction renvoie la valeur à ajouter à la chaîne JSON :</p>
-
-<ul>
- <li>Si la valeur renvoyée est un nombre ({{jsxref("Number")}}), la chaîne correspondante au nombre sera utilisée comme valeur à ajouter à la chaîne pour représenter la valeur de la propriété traitée.</li>
- <li>Si la valeur renvoyée est une chaîne de caractères ({{jsxref("String")}}), cette chaîne sera utilisée pour représenter la valeur de la propriété dans la chaîne JSON.</li>
- <li>Si la valeur renvoyée est un {{jsxref("Boolean")}}, "true" ou "false" sera utilisé pour représenter la valeur de la propriété et sera ajouté à la chaîne JSON.</li>
- <li>Si la valeur renvoyée est <code>null</code>, <code>null</code> sera ajouté à la chaîne JSON.</li>
- <li>Si la valeur renvoyée est un autre objet, cet objet sera, de façon récursive, transformé en une chaîne JSON en appelant la fonction <code>remplaçant</code> sur chaque propriété sauf si l'objet est une fonction auquel cas, rien n'est ajouté à la chaîne JSON.</li>
- <li>Si la valeur renvoyée est {{jsxref("undefined")}}, la propriété ne sera pas incluse dans la chaîne JSON.</li>
-</ul>
-
-<div class="note"><p><strong>Note :</strong> la fonction <code>remplaçant</code> ne peut pas être utilisée pour retirer des valeurs d'un tableau. Si on renvoie <code>undefined</code> ou une fonction, ce sera la valeur <code>null</code> qui sera utilisée.</p></div>
-
-<div class="note"><p><strong>Note :</strong> Si on souhaite que la fonction <code>remplaçant</code> distingue un objet dont une propriété a un clé qui est « réellement » une chaîne vide, il faudra avoir un compteur pour le nombre d'itération. Si le compteur indique que la première itération est passée, alors il s'agit bien d'un clé avec une chaîne vide.</p></div>
-
-<h4 id="Exemple_avec_une_fonction">Exemple avec une fonction</h4>
-
-<pre class="brush: js">function remplaçant(clé, valeur) {
-  if (typeof valeur === "string") {
-    return undefined;
-  }
-  return valeur;
-}
-
-var toto = {fondation: "Mozilla", modèle: "boîte", semaine: 45, transport: "bus", mois: 7};
-console.log(JSON.stringify(toto, remplaçant)); // {"semaine":45, "mois":7}
-</pre>
-
-<h4 id="Exemple_avec_un_tableau">Exemple avec un tableau</h4>
-
-<p>Si <code>remplaçant</code> est un tableau, les valeurs du tableau indiquent les propriétés de l'objet à inclure dans la chaîne JSON.</p>
-
-<pre class="brush: js">JSON.stringify(toto, ['semaine', 'mois']);
-// '{"semaine":45,"mois":7}', on ne garde que "semaines" et "mois"
-</pre>
-
-<h3 id="L'argument_espace">L'argument <code>espace</code></h3>
-
-<p>L'argument <code>espace</code> est utilisé pour contrôler les espacements utilisés dans la chaîne finale.</p>
-
-<ul>
- <li>Si c'est un nombre, les différents niveaux d'indentation auront autant d'espaces qu'indiqué grâce à ce paramètre (jusqu'à 10).</li>
- <li>Si c'est une chaîne, les dix premiers caractères (ou la chaîne complète si elle est plus courte)</li>
-</ul>
-
-<pre class="brush: js">JSON.stringify({ a: 2 }, null, ' ');
-// '{
-//  "a": 2
-// }'
-</pre>
-
-<p>Dans l'exemple suivant on utilise la tabulation pour rendre lisible le résultat :</p>
-
-<pre class="brush: js">JSON.stringify({ uno: 1, dos: 2 }, null, '\t');
-// renverra
-// '{
-//     "uno": 1,
-//     "dos": 2
-// }'
-</pre>
-
-<h3 id="La_fonction_toJSON()">La fonction <code>toJSON()</code></h3>
-
-<p>Pour personnaliser la valeur d'un objet lors de sa conversion en JSON, on peut surcharger la méthode <code>toJSON()</code> : la valeur retournée par cette méthode <code>toJSON()</code> sera alors utilisée. <code>JSON.stringify()</code> invoquera la méthode <code>toJSON()</code> de l'objet avec un paramètre :</p>
-
-<ul>
- <li>Si cet objet est une propriété de donnée, ce sera le nom de la propriété</li>
- <li>Si cet objet est un tableau, ce sera l'indice de l'élément du tableau sous la forme d'une chaîne de caractères</li>
- <li>Une chaîne vide si <code>JSON.stringify()</code> était directement appelé sur l'objet.</li>
-</ul>
-
-<p>Ainsi :</p>
-
-<pre class="brush: js">var obj = {
-  data: 'data',
-  toJSON(clef){
-    if(clef) {
-      return `Un objet imbriqué sous la clef '${clef}'`;
-    } else {
-      return this;
-    }
-  }
-};
-
-JSON.stringify(obj);
-// '{"data":"data"}'
-
-JSON.stringify({ obj })
-// '{"obj":"Un objet imbriqué sous la clef 'obj'"}'
-
-JSON.stringify([ obj ])
-// '["Un objet imbriqué sous la clef '0'"]'
-</pre>
-
-<h3 id="Le_problème_des_références_circulaires">Le problème des références circulaires</h3>
-
-<p><a href="https://www.json.org/">Le format JSON</a> ne prend pas en charge les références (bien <a href="http://tools.ietf.org/html/draft-pbryan-zyp-json-ref-03">qu'un brouillon IETF existe</a>) et une exception {{jsxref("TypeError")}} sera levée si on tente d'encoder un objet possédant des références circulaires.</p>
-
-<pre class="brush: js example-bad">const circularReference = {};
-circularReference.myself = circularReference;
-
-// Sérialiser un objet avec des références circulaires déclenche une "TypeError: cyclic object value"
-JSON.stringify(circularReference);
-</pre>
-
-<p>Pour sérialiser les références circulaires, on peut utiliser une bibliothèque (<a href="https://github.com/douglascrockford/JSON-js/blob/master/cycle.js">cycle.js</a> par exemple) ou implémenter sa propre solution (qui consistera à trouver et à remplacer le cycle par des valeurs sérialisables).</p>
-
-<h3 id="Gestion_des_terminateurs_de_ligne">Gestion des terminateurs de ligne</h3>
-
-<p>Par le passé, JSON n'était pas un sous-ensemble strict de JavaScript. En effet, en JSON, deux terminateurs de ligne (le caractère de séparation de ligne U+2028 LINE SEPARATOR et le caractère de séparation de paragraphe U+2029 PARAGRAPH SEPARATOR) n'avaient pas besoin d'être échappés dans des données JSON alors qu'ils devaient l'être en JavaScript. Cela a désormais évolué et les deux points de code peuvent apparaître tant en JSON qu'en JavaScript.</p>
-
-<p>Ainsi, si on souhaite avoir une compatibilité avec les anciens moteurs JavaScript, on pourra évaluer ou utiliser les données JSON avec <a href="https://fr.wikipedia.org/wiki/JSONP">JSONP</a> et la fonction utilitaire suivante :</p>
-
-<pre class="brush: js">function jsFriendlyJSONStringify (s) {
-    return JSON.stringify(s).
-        replace(/\u2028/g, '\\u2028').
-        replace(/\u2029/g, '\\u2029');
-}
-
-var s = {
-    a: String.fromCharCode(0x2028),
-    b: String.fromCharCode(0x2029)
-};
-
-// dans Firefox, console.log enlève les échappements
-// des caractères Unicode, on utilise donc alert :(
-alert(jsFriendlyJSONStringify(s)); // {"a":"\u2028","b":"\u2029"}</pre>
-
-<div class="note">
-<p><strong>Note :</strong> Les propriétés des objets qui ne sont pas des tableaux ne sont pas transformées en chaînes de caractères selon un ordre particulier. Aussi, l'ordre des données en JSON ne saurait constituer une information utile.</p>
-</div>
-
-<pre class="brush: js">var a = JSON.stringify({toto: "truc", bidule: "machin"});
-// '{"toto":"truc","bidule":"machin"}'
-var b = JSON.stringify({bidule: "machin", toto: "truc"});
-// '{"bidule":"machin","toto":"truc"}'
-console.log(a !== b); // true
-</pre>
-
-<h3 id="Utiliser_JSON.stringify_avec_localStorage">Utiliser <code>JSON.stringify</code> avec localStorage</h3>
-
-<p>Dans le cas où on souhaite enregistrer un objet créé par l'utilisateur afin de le restorer plus tard (y compris après que le navigateur ait été fermé), on peut utiliser <code>JSON.stringify</code>.</p>
-
-<div class="warning">
-<p><strong>Attention :</strong> Les fonctions n'ont pas de correspondances en JSON, il ne sera donc pas possible de les enregistrer de cette façon. En revanche, elles peuvent être affichées si elles ont été converties en texte avec la fonction de remplacement. De même, certains objets comme les dates seront transformées en chaîne de caractères après l'utilisation de JSON.parse().</p>
-</div>
-
-<pre class="brush: js">// On crée un objet pour l'exemple
-var session = {
-    'screens' : [],
-    'state' : true
-};
-session.screens.push({"name":"screenA", "width":450, "height":250});
-session.screens.push({"name":"screenB", "width":650, "height":350});
-session.screens.push({"name":"screenC", "width":750, "height":120});
-session.screens.push({"name":"screenD", "width":250, "height":60});
-session.screens.push({"name":"screenE", "width":390, "height":120});
-session.screens.push({"name":"screenF", "width":1240, "height":650});
-
-// On convertit l'objet en une chaîne JSON
-// et on enregistre cette valeur avec le nom 'session'
-localStorage.setItem('session', JSON.stringify(session));
-
-// Ici, on reconvertit la chaîne en un objet
-// JSON.stringify and saved in localStorage in JSON object again
-var sessionRestaurée = JSON.parse(localStorage.getItem('session'));
-
-// La variable sessionRestaurée contient désormais l'objet précédent
-// qui avait été sauvegardé dans localStorage
-console.log(sessionRestaurée);
-</pre>
-
-<h3 id="Chaînes_bien_formées_et_JSON.stringify()">Chaînes bien formées et <code>JSON.stringify()</code></h3>
-
-<p>Les moteurs, qui implémentent la spécification sur JSON.stringify() bien formé, transformeront en chaîne de caractères les éléments isolés de paires <em>surrogates</em> via des séquences d'échappement Unicode plutôt que d'utiliser leurs valeurs littérales. Avant cette modification de spécification, <code>JSON.stringify()</code> n'aurait pas encodé les éléments <em>surrogates</em> isolés et les chaînes produites n'étaient pas valides selon UTF-8 ou UTF-16 :</p>
-
-<pre class="brush: js">JSON.stringify("\uD800"); // '"�"'</pre>
-
-<p>Avec cette modification, les séquences d'échappement produites permettent d'avoir un contenu UTF-16 ou UTF-8 lisible :</p>
-
-<pre class="brush: js">JSON.stringify("\uD800"); // '"\\ud800"'</pre>
-
-<p>Cette modification est rétrocompatible pour toutes les opérations où le résultat de <code>JSON.stringify()</code> est passé à des API comme <code>JSON.parse()</code> qui acceptent du texte JSON valide. En effet, ces API traiteront les séquences d'échappement de <em>surrogates</em> isolés comme les caractères correspondants. Seul le cas où le code interprète directement le résultat de <code>JSON.stringify()</code> doit être adapté afin de gérer les deux encodages possibles pour ces cas.</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-15.12.3', 'JSON.stringify')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td>Définition initiale. Implémentée avec JavaScript 1.7.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-json.stringify', 'JSON.stringify')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-json.stringify', 'JSON.stringify')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.JSON.stringify")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("JSON.parse()")}}</li>
- <li><a href="https://github.com/douglascrockford/JSON-js/blob/master/cycle.js">cycle.js</a> qui ajoute deux fonctions <code>JSON.decycle</code> et <code>JSON.retrocycle</code> qui permettent d'encoder et de décoder des structures cycliques.</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/json/stringify/index.md b/files/fr/web/javascript/reference/global_objects/json/stringify/index.md
new file mode 100644
index 0000000000..3d5282d7a1
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/json/stringify/index.md
@@ -0,0 +1,343 @@
+---
+title: JSON.stringify()
+slug: Web/JavaScript/Reference/Global_Objects/JSON/stringify
+tags:
+  - JSON
+  - JavaScript
+  - Méthode
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/JSON/stringify
+original_slug: Web/JavaScript/Reference/Objets_globaux/JSON/stringify
+---
+{{JSRef}}
+
+La méthode **`JSON.stringify()`** convertit une valeur JavaScript en chaîne JSON. Optionnellement, elle peut remplacer des valeurs ou spécifier les propriétés à inclure si un tableau de propriétés a été fourni.
+
+{{EmbedInteractiveExample("pages/js/json-stringify.html")}}
+
+## Syntaxe
+
+    JSON.stringify( valeur[, remplaçant [, espace]])
+
+### Paramètres
+
+- `valeur`
+  - : La valeur à convertir en chaîne JSON.
+- `remplaçant` {{optional_inline}}
+  - : Une fonction qui modifie le processus de transformation ou un tableau de chaînes de caractères et de nombres qui sont utilisés comme liste blanche pour sélectionner/filtrer les propriétés de l'objet à inclure dans la chaîne JSON. Si cette valeur est {{jsxref("null")}} ou n'est pas fournie, toutes les propriétés de l'objet seront inclues dans la chaîne résultante.
+- `espace` {{optional_inline}}
+  - : Un objet {{jsxref("String")}} ou {{jsxref("Number")}} qui est utilisé pour insérer des blancs dans la chaîne JSON produite afin de faciliter la lisibilité.
+
+<!---->
+
+- Si cet argument est un nombre, il indiquera le nombre d'espaces à utiliser pour l'indentation (la valeur est ramenée à 10 si elle dépasse 10).
+- Si l'argument est une chaîne, les 10 premiers caractères (ou la chaîne si elle est plus courte) seront utilisés pour les blancs.
+- Si le paramètre n'est pas fourni (ou s'il est nul), aucun blanc ne sera utilisé.
+
+### Valeur de retour
+
+Une chaîne de caractères JSON qui représente la valeur indiquée.
+
+### Exceptions
+
+- Cette méthode lève une exception {{jsxref("TypeError")}} (« _cyclic object value_ ») lorsqu'elle trouve une référence circulaire.
+- Cette méthode lève une exception {{jsxref("TypeError")}} (« _BigInt value can't be serialized in JSON_ ») lorsqu'on tente de convertir une valeur {{jsxref("BigInt")}} en une chaîne de caractères JSON.
+
+## Description
+
+La fonction `JSON.stringify()` convertit un objet en JSON :
+
+- L'ordre des propriétés des objets qui ne sont pas des tableaux n'est pas garanti. Par la suite, ne pas supposer que cet ordre soit respecté.
+- Les objets {{jsxref("Boolean")}}, {{jsxref("Number")}} et {{jsxref("String")}} sont convertis en leur valeur primitive correspondante, en accord avec la sémantique traditionnelle.
+- Si {{jsxref("undefined")}}, une fonction ou un symbole est rencontré lors de la conversion , il est soit omis ( quand il se trouve dans un objet ) ou ramené à {{jsxref("null")}} ( quand il se trouve dans un tableau). `JSON.stringify()` peut également renvoyer `undefined` lorsqu'il reçoit des valeurs « brutes » qui ne sont pas objectifiées comme par exemple `JSON.stringify(function(){})` ou `JSON.stringify(undefined)`.
+- Toutes les propriétés liées aux symboles (cf. {{jsxref("Symbol")}}) seront complètement ignorées , même lorsque la fonction `remplaçant` est utilisée.
+- Les propriétés qui ne sont pas énumérables seront ignorées.
+- Les instances de {{jsxref("Date")}} implémentent la fonction `toJSON()` en renvoyant une chaîne de caractères (identique à celle renvoyée par `date.toISOString()`). Aussi, les dates sont traitées comme des chaînes de caractères.
+- Les nombres {{jsxref("Infinity")}} et {{jsxref("NaN")}}, ainsi que l'objet {{jsxref("null")}} sont traités comme `null`.
+- Pour les autres instances d'objets tels que {{jsxref("Map")}}, {{jsxref("Set")}}, {{jsxref("WeakMap")}} et {{jsxref("WeakSet")}}, seules les propriétés énumérables sont sérialisées.
+
+```js
+JSON.stringify({});                        // '{}'
+JSON.stringify(true);                      // 'true'
+JSON.stringify("toto");                    // '"toto"'
+JSON.stringify([1, "false", false]);       // '[1,"false",false]'
+JSON.stringify([NaN, null, Infinity]);   // '[null,null,null]'
+JSON.stringify({ x: 5 });                  // '{"x":5}'
+
+JSON.stringify(new Date(2006, 0, 2, 15, 4, 5));
+// '"2006-01-02T23:04:05.000Z"'
+
+// Exemples
+JSON.stringify({x: 5, y: 6});
+// '{"x":5,"y":6}'
+JSON.stringify([new Number(3), new String("false"), new Boolean(false)]);
+// '[3,"false",false]'
+
+// Les tableaux avec des propriétés ne sont pas énumérables
+// et n'ont pas de sens selon JSON
+let a = ["toto", "truc"];
+a["bidule"] = "youpi"; // a:[ 0: "toto", 1: "truc", bidule: "youpi"]
+JSON.stringify(a);
+// '["toto","truc"]'
+
+// Symboles
+JSON.stringify({x: undefined, y: Object, z: Symbol("")});
+// '{}'
+JSON.stringify({[Symbol("toto")]: "toto"});
+// '{}'
+JSON.stringify({[Symbol.for("toto")]: "toto"}, [Symbol.for("toto")]);
+// '{}'
+JSON.stringify({[Symbol.for("toto")]: "toto"}, function (k, v) {
+  if (typeof k === "symbol"){
+    return "a symbol";
+  }
+});
+// '{}'
+JSON.stringify({ x: [10, undefined, function(){}, Symbol('')] });
+// '{"x":[10,null,null,null]}'
+
+// Structures de données classiques
+JSON.stringify([new Set([1]), new Map([[1, 2]]), new WeakSet([{a: 1}]), new WeakMap([[{a: 1}, 2]])]);
+// '[{},{},{},{}]'
+
+// TypedArray
+JSON.stringify([new Int8Array([1]), new Int16Array([1]), new Int32Array([1])]);
+// '[{"0":1},{"0":1},{"0":1}]'
+JSON.stringify([new Uint8Array([1]), new Uint8ClampedArray([1]), new Uint16Array([1]), new Uint32Array([1])]);
+// '[{"0":1},{"0":1},{"0":1},{"0":1}]'
+JSON.stringify([new Float32Array([1]), new Float64Array([1])]);
+// '[{"0":1},{"0":1}]'
+
+// toJSON()
+JSON.stringify({ x: 5, y: 6, toJSON(){ return this.x + this.y; } });
+// '11'
+
+// Symbols:
+JSON.stringify({ x: undefined, y: Object, z: Symbol('') });
+// '{}'
+JSON.stringify({ [Symbol('foo')]: 'foo' });
+// '{}'
+JSON.stringify({ [Symbol.for('foo')]: 'foo' }, [Symbol.for('foo')]);
+// '{}'
+JSON.stringify({ [Symbol.for('foo')]: 'foo' }, function(k, v) {
+  if (typeof k === 'symbol') {
+    return 'a symbol';
+  }
+});
+// undefined
+
+// Propriétés non énumérables
+JSON.stringify(Object.create(null, { x: { value: 'x', enumerable: false }, y: { value: 'y', enumerable: true } }) );
+// '{"y":"y"}'
+
+// Échec avec BigInt
+JSON.stringify({x: 2n});
+// TypeError: BigInt value can't be serialized in JSON
+```
+
+### L'argument `remplaçant`
+
+L'argument `remplaçant` est une fonction ou un tableau. Si c'est une fonction, elle prend deux paramètres : une clé et la valeur qui est traitée pour être convertie en chaîne. L'objet dans lequel la clé a été trouvée sera fourni comme paramètre `this` pour la fonction. Cette fonction est d'abord appelée avec une chaîne vide comme clé représentant l'objet à transformer puis elle est appelée sur chaque propriété de l'objet ou du tableau à transformer en chaîne. Cette fonction renvoie la valeur à ajouter à la chaîne JSON :
+
+- Si la valeur renvoyée est un nombre ({{jsxref("Number")}}), la chaîne correspondante au nombre sera utilisée comme valeur à ajouter à la chaîne pour représenter la valeur de la propriété traitée.
+- Si la valeur renvoyée est une chaîne de caractères ({{jsxref("String")}}), cette chaîne sera utilisée pour représenter la valeur de la propriété dans la chaîne JSON.
+- Si la valeur renvoyée est un {{jsxref("Boolean")}}, "true" ou "false" sera utilisé pour représenter la valeur de la propriété et sera ajouté à la chaîne JSON.
+- Si la valeur renvoyée est `null`, `null` sera ajouté à la chaîne JSON.
+- Si la valeur renvoyée est un autre objet, cet objet sera, de façon récursive, transformé en une chaîne JSON en appelant la fonction `remplaçant` sur chaque propriété sauf si l'objet est une fonction auquel cas, rien n'est ajouté à la chaîne JSON.
+- Si la valeur renvoyée est {{jsxref("undefined")}}, la propriété ne sera pas incluse dans la chaîne JSON.
+
+> **Note :** la fonction `remplaçant` ne peut pas être utilisée pour retirer des valeurs d'un tableau. Si on renvoie `undefined` ou une fonction, ce sera la valeur `null` qui sera utilisée.
+
+> **Note :** Si on souhaite que la fonction `remplaçant` distingue un objet dont une propriété a un clé qui est « réellement » une chaîne vide, il faudra avoir un compteur pour le nombre d'itération. Si le compteur indique que la première itération est passée, alors il s'agit bien d'un clé avec une chaîne vide.
+
+#### Exemple avec une fonction
+
+```js
+function remplaçant(clé, valeur) {
+  if (typeof valeur === "string") {
+    return undefined;
+  }
+  return valeur;
+}
+
+var toto = {fondation: "Mozilla", modèle: "boîte", semaine: 45, transport: "bus", mois: 7};
+console.log(JSON.stringify(toto, remplaçant)); // {"semaine":45, "mois":7}
+```
+
+#### Exemple avec un tableau
+
+Si `remplaçant` est un tableau, les valeurs du tableau indiquent les propriétés de l'objet à inclure dans la chaîne JSON.
+
+```js
+JSON.stringify(toto, ['semaine', 'mois']);
+// '{"semaine":45,"mois":7}', on ne garde que "semaines" et "mois"
+```
+
+### L'argument `espace`
+
+L'argument `espace` est utilisé pour contrôler les espacements utilisés dans la chaîne finale.
+
+- Si c'est un nombre, les différents niveaux d'indentation auront autant d'espaces qu'indiqué grâce à ce paramètre (jusqu'à 10).
+- Si c'est une chaîne, les dix premiers caractères (ou la chaîne complète si elle est plus courte)
+
+```js
+JSON.stringify({ a: 2 }, null, ' ');
+// '{
+//  "a": 2
+// }'
+```
+
+Dans l'exemple suivant on utilise la tabulation pour rendre lisible le résultat :
+
+```js
+JSON.stringify({ uno: 1, dos: 2 }, null, '\t');
+// renverra
+// '{
+//     "uno": 1,
+//     "dos": 2
+// }'
+```
+
+### La fonction `toJSON()`
+
+Pour personnaliser la valeur d'un objet lors de sa conversion en JSON, on peut surcharger la méthode `toJSON()` : la valeur retournée par cette méthode `toJSON()` sera alors utilisée. `JSON.stringify()` invoquera la méthode `toJSON()` de l'objet avec un paramètre :
+
+- Si cet objet est une propriété de donnée, ce sera le nom de la propriété
+- Si cet objet est un tableau, ce sera l'indice de l'élément du tableau sous la forme d'une chaîne de caractères
+- Une chaîne vide si `JSON.stringify()` était directement appelé sur l'objet.
+
+Ainsi :
+
+```js
+var obj = {
+  data: 'data',
+  toJSON(clef){
+    if(clef) {
+      return `Un objet imbriqué sous la clef '${clef}'`;
+    } else {
+      return this;
+    }
+  }
+};
+
+JSON.stringify(obj);
+// '{"data":"data"}'
+
+JSON.stringify({ obj })
+// '{"obj":"Un objet imbriqué sous la clef 'obj'"}'
+
+JSON.stringify([ obj ])
+// '["Un objet imbriqué sous la clef '0'"]'
+```
+
+### Le problème des références circulaires
+
+[Le format JSON](https://www.json.org/) ne prend pas en charge les références (bien [qu'un brouillon IETF existe](http://tools.ietf.org/html/draft-pbryan-zyp-json-ref-03)) et une exception {{jsxref("TypeError")}} sera levée si on tente d'encoder un objet possédant des références circulaires.
+
+```js example-bad
+const circularReference = {};
+circularReference.myself = circularReference;
+
+// Sérialiser un objet avec des références circulaires déclenche une "TypeError: cyclic object value"
+JSON.stringify(circularReference);
+```
+
+Pour sérialiser les références circulaires, on peut utiliser une bibliothèque ([cycle.js](https://github.com/douglascrockford/JSON-js/blob/master/cycle.js) par exemple) ou implémenter sa propre solution (qui consistera à trouver et à remplacer le cycle par des valeurs sérialisables).
+
+### Gestion des terminateurs de ligne
+
+Par le passé, JSON n'était pas un sous-ensemble strict de JavaScript. En effet, en JSON, deux terminateurs de ligne (le caractère de séparation de ligne U+2028 LINE SEPARATOR et le caractère de séparation de paragraphe U+2029 PARAGRAPH SEPARATOR) n'avaient pas besoin d'être échappés dans des données JSON alors qu'ils devaient l'être en JavaScript. Cela a désormais évolué et les deux points de code peuvent apparaître tant en JSON qu'en JavaScript.
+
+Ainsi, si on souhaite avoir une compatibilité avec les anciens moteurs JavaScript, on pourra évaluer ou utiliser les données JSON avec [JSONP](https://fr.wikipedia.org/wiki/JSONP) et la fonction utilitaire suivante :
+
+```js
+function jsFriendlyJSONStringify (s) {
+    return JSON.stringify(s).
+        replace(/\u2028/g, '\\u2028').
+        replace(/\u2029/g, '\\u2029');
+}
+
+var s = {
+    a: String.fromCharCode(0x2028),
+    b: String.fromCharCode(0x2029)
+};
+
+// dans Firefox, console.log enlève les échappements
+// des caractères Unicode, on utilise donc alert :(
+alert(jsFriendlyJSONStringify(s)); // {"a":"\u2028","b":"\u2029"}
+```
+
+> **Note :** Les propriétés des objets qui ne sont pas des tableaux ne sont pas transformées en chaînes de caractères selon un ordre particulier. Aussi, l'ordre des données en JSON ne saurait constituer une information utile.
+
+```js
+var a = JSON.stringify({toto: "truc", bidule: "machin"});
+// '{"toto":"truc","bidule":"machin"}'
+var b = JSON.stringify({bidule: "machin", toto: "truc"});
+// '{"bidule":"machin","toto":"truc"}'
+console.log(a !== b); // true
+```
+
+### Utiliser `JSON.stringify` avec localStorage
+
+Dans le cas où on souhaite enregistrer un objet créé par l'utilisateur afin de le restorer plus tard (y compris après que le navigateur ait été fermé), on peut utiliser `JSON.stringify`.
+
+> **Attention :** Les fonctions n'ont pas de correspondances en JSON, il ne sera donc pas possible de les enregistrer de cette façon. En revanche, elles peuvent être affichées si elles ont été converties en texte avec la fonction de remplacement. De même, certains objets comme les dates seront transformées en chaîne de caractères après l'utilisation de JSON.parse().
+
+```js
+// On crée un objet pour l'exemple
+var session = {
+    'screens' : [],
+    'state' : true
+};
+session.screens.push({"name":"screenA", "width":450, "height":250});
+session.screens.push({"name":"screenB", "width":650, "height":350});
+session.screens.push({"name":"screenC", "width":750, "height":120});
+session.screens.push({"name":"screenD", "width":250, "height":60});
+session.screens.push({"name":"screenE", "width":390, "height":120});
+session.screens.push({"name":"screenF", "width":1240, "height":650});
+
+// On convertit l'objet en une chaîne JSON
+// et on enregistre cette valeur avec le nom 'session'
+localStorage.setItem('session', JSON.stringify(session));
+
+// Ici, on reconvertit la chaîne en un objet
+// JSON.stringify and saved in localStorage in JSON object again
+var sessionRestaurée = JSON.parse(localStorage.getItem('session'));
+
+// La variable sessionRestaurée contient désormais l'objet précédent
+// qui avait été sauvegardé dans localStorage
+console.log(sessionRestaurée);
+```
+
+### Chaînes bien formées et `JSON.stringify()`
+
+Les moteurs, qui implémentent la spécification sur JSON.stringify() bien formé, transformeront en chaîne de caractères les éléments isolés de paires _surrogates_ via des séquences d'échappement Unicode plutôt que d'utiliser leurs valeurs littérales. Avant cette modification de spécification, `JSON.stringify()` n'aurait pas encodé les éléments _surrogates_ isolés et les chaînes produites n'étaient pas valides selon UTF-8 ou UTF-16 :
+
+```js
+JSON.stringify("\uD800"); // '"�"'
+```
+
+Avec cette modification, les séquences d'échappement produites permettent d'avoir un contenu UTF-16 ou UTF-8 lisible :
+
+```js
+JSON.stringify("\uD800"); // '"\\ud800"'
+```
+
+Cette modification est rétrocompatible pour toutes les opérations où le résultat de `JSON.stringify()` est passé à des API comme `JSON.parse()` qui acceptent du texte JSON valide. En effet, ces API traiteront les séquences d'échappement de _surrogates_ isolés comme les caractères correspondants. Seul le cas où le code interprète directement le résultat de `JSON.stringify()` doit être adapté afin de gérer les deux encodages possibles pour ces cas.
+
+## Spécifications
+
+| Spécification                                                                        | État                         | Commentaires                                          |
+| ------------------------------------------------------------------------------------ | ---------------------------- | ----------------------------------------------------- |
+| {{SpecName('ES5.1', '#sec-15.12.3', 'JSON.stringify')}}             | {{Spec2('ES5.1')}}     | Définition initiale. Implémentée avec JavaScript 1.7. |
+| {{SpecName('ES6', '#sec-json.stringify', 'JSON.stringify')}}     | {{Spec2('ES6')}}         |                                                       |
+| {{SpecName('ESDraft', '#sec-json.stringify', 'JSON.stringify')}} | {{Spec2('ESDraft')}} |                                                       |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.JSON.stringify")}}
+
+## Voir aussi
+
+- {{jsxref("JSON.parse()")}}
+- [cycle.js](https://github.com/douglascrockford/JSON-js/blob/master/cycle.js) qui ajoute deux fonctions `JSON.decycle` et `JSON.retrocycle` qui permettent d'encoder et de décoder des structures cycliques.
diff --git a/files/fr/web/javascript/reference/global_objects/map/@@iterator/index.html b/files/fr/web/javascript/reference/global_objects/map/@@iterator/index.html
deleted file mode 100644
index 72bc8d1d13..0000000000
--- a/files/fr/web/javascript/reference/global_objects/map/@@iterator/index.html
+++ /dev/null
@@ -1,89 +0,0 @@
----
-title: Map.prototype[@@iterator]()
-slug: Web/JavaScript/Reference/Global_Objects/Map/@@iterator
-tags:
-  - ECMAScript 2015
-  - Iterator
-  - JavaScript
-  - Map
-  - Méthode
-  - Prototype
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Map/@@iterator
-original_slug: Web/JavaScript/Reference/Global_Objects/Map/@@iterator
----
-<div>{{JSRef}}</div>
-
-<p>La valeur initiale de la propriété <code><strong>@@iterator</strong></code> est la même fonction que la valeur initiale de la propriété {{jsxref("Map.prototype.entries()", "entries")}}.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/map-prototype-@@iterator.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><em>maMap</em>[Symbol.iterator]</pre>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>La fonction d'itération (le symbole <code>@@iterator</code>) de l'objet, par défaut, c'est la fonction {{jsxref("Map.prototype.entries()","entries()")}}.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Utiliser_iterator()">Utiliser <code>[@@iterator]()</code></h3>
-
-<pre class="brush:js">var maMap = new Map();
-maMap.set("0", "toto");
-maMap.set(1, "truc");
-maMap.set({}, "bidule");
-
-var mapIter = myMap[Symbol.iterator]();
-
-console.log(mapIter.next().value); // ["0", "toto"]
-console.log(mapIter.next().value); // [1, "truc"]
-console.log(mapIter.next().value); // [Object, "bidule"]
-</pre>
-
-<h3 id="Utiliser_iterator()_avec_for..of">Utiliser <code>[@@iterator]()</code> avec <code>for..of</code></h3>
-
-<pre class="brush:js">var maMap = new Map();
-maMap.set("0", "toto");
-maMap.set(1, "truc");
-maMap.set({}, "bidule");
-
-for (var v of maMap) {
-  console.log(v);
-}
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-map.prototype-@@iterator', 'Map.prototype[@@iterator]()')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td>Définition initiale</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-map.prototype-@@iterator', 'Map.prototype[@@iterator]()')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Map.@@iterator")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Map.prototype.entries()")}}</li>
- <li>{{jsxref("Map.prototype.keys()")}}</li>
- <li>{{jsxref("Map.prototype.values()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/map/@@iterator/index.md b/files/fr/web/javascript/reference/global_objects/map/@@iterator/index.md
new file mode 100644
index 0000000000..a971dab13c
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/map/@@iterator/index.md
@@ -0,0 +1,74 @@
+---
+title: Map.prototype[@@iterator]()
+slug: Web/JavaScript/Reference/Global_Objects/Map/@@iterator
+tags:
+  - ECMAScript 2015
+  - Iterator
+  - JavaScript
+  - Map
+  - Méthode
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Map/@@iterator
+original_slug: Web/JavaScript/Reference/Global_Objects/Map/@@iterator
+---
+{{JSRef}}
+
+La valeur initiale de la propriété **`@@iterator`** est la même fonction que la valeur initiale de la propriété {{jsxref("Map.prototype.entries()", "entries")}}.
+
+{{EmbedInteractiveExample("pages/js/map-prototype-@@iterator.html")}}
+
+## Syntaxe
+
+    maMap[Symbol.iterator]
+
+### Valeur de retour
+
+La fonction d'itération (le symbole `@@iterator`) de l'objet, par défaut, c'est la fonction {{jsxref("Map.prototype.entries()","entries()")}}.
+
+## Exemples
+
+### Utiliser `[@@iterator]()`
+
+```js
+var maMap = new Map();
+maMap.set("0", "toto");
+maMap.set(1, "truc");
+maMap.set({}, "bidule");
+
+var mapIter = myMap[Symbol.iterator]();
+
+console.log(mapIter.next().value); // ["0", "toto"]
+console.log(mapIter.next().value); // [1, "truc"]
+console.log(mapIter.next().value); // [Object, "bidule"]
+```
+
+### Utiliser `[@@iterator]()` avec `for..of`
+
+```js
+var maMap = new Map();
+maMap.set("0", "toto");
+maMap.set(1, "truc");
+maMap.set({}, "bidule");
+
+for (var v of maMap) {
+  console.log(v);
+}
+```
+
+## Spécifications
+
+| Spécification                                                                                                        | État                         | Commentaires        |
+| -------------------------------------------------------------------------------------------------------------------- | ---------------------------- | ------------------- |
+| {{SpecName('ES2015', '#sec-map.prototype-@@iterator', 'Map.prototype[@@iterator]()')}} | {{Spec2('ES2015')}}     | Définition initiale |
+| {{SpecName('ESDraft', '#sec-map.prototype-@@iterator', 'Map.prototype[@@iterator]()')}} | {{Spec2('ESDraft')}} |                     |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Map.@@iterator")}}
+
+## Voir aussi
+
+- {{jsxref("Map.prototype.entries()")}}
+- {{jsxref("Map.prototype.keys()")}}
+- {{jsxref("Map.prototype.values()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/map/@@species/index.html b/files/fr/web/javascript/reference/global_objects/map/@@species/index.html
deleted file mode 100644
index dddc3795f8..0000000000
--- a/files/fr/web/javascript/reference/global_objects/map/@@species/index.html
+++ /dev/null
@@ -1,71 +0,0 @@
----
-title: get Map[@@species]
-slug: Web/JavaScript/Reference/Global_Objects/Map/@@species
-tags:
-  - ECMAScript 2015
-  - JavaScript
-  - Map
-  - Propriété
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Map/@@species
-original_slug: Web/JavaScript/Reference/Global_Objects/Map/@@species
----
-<div>{{JSRef}}</div>
-
-<p><code><strong>Map[@@species]</strong></code> renvoie le constructeur <code>Map</code>.</p>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">Map[Symbol.species]
-</pre>
-
-<h2 id="Description">Description</h2>
-
-<p>L'accesseur <code>species</code> renvoie le constructeur par défaut pour les objets <code>Map</code>. Les constructeurs des sous-classes peuvent surcharger ce constructeur afin de modifier ce qui est fait lors de la construction de l'objet et son affectation</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<p>La propriété <code>species</code> renvoie la fonction correspondant au constructeur par défaut. Pour les objets <code>Map</code>, ce sera le constructeur <code>Map</code> :</p>
-
-<pre class="brush: js">Map[Symbol.species]; // function Map()</pre>
-
-<p>Pour des objets dérivés (par exemple un dictionnaire <code>MaMap</code> que vous auriez construit), la propriété <code>species</code> correspondra au constructeur <code>MaMap</code>. Si vous souhaitez surcharger cela pour renvoyer le constructeur parent <code>Map</code>, vous pourrez utiliser :</p>
-
-<pre class="brush: js">class MaMap extends Map {
-  // On surcharge le symbole species de MaMap
-  // avec le constructeur Map parent
-  static get [Symbol.species]() { return Map; }
-}</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-get-map-@@species', 'get Map [ @@species ]')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-get-map-@@species', 'get Map [ @@species ]')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Map.@@species")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Map")}}</li>
- <li>{{jsxref("Symbol.species")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/map/@@species/index.md b/files/fr/web/javascript/reference/global_objects/map/@@species/index.md
new file mode 100644
index 0000000000..69c46bb86c
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/map/@@species/index.md
@@ -0,0 +1,57 @@
+---
+title: get Map[@@species]
+slug: Web/JavaScript/Reference/Global_Objects/Map/@@species
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Map
+  - Propriété
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Map/@@species
+original_slug: Web/JavaScript/Reference/Global_Objects/Map/@@species
+---
+{{JSRef}}
+
+**`Map[@@species]`** renvoie le constructeur `Map`.
+
+## Syntaxe
+
+    Map[Symbol.species]
+
+## Description
+
+L'accesseur `species` renvoie le constructeur par défaut pour les objets `Map`. Les constructeurs des sous-classes peuvent surcharger ce constructeur afin de modifier ce qui est fait lors de la construction de l'objet et son affectation
+
+## Exemples
+
+La propriété `species` renvoie la fonction correspondant au constructeur par défaut. Pour les objets `Map`, ce sera le constructeur `Map` :
+
+```js
+Map[Symbol.species]; // function Map()
+```
+
+Pour des objets dérivés (par exemple un dictionnaire `MaMap` que vous auriez construit), la propriété `species` correspondra au constructeur `MaMap`. Si vous souhaitez surcharger cela pour renvoyer le constructeur parent `Map`, vous pourrez utiliser :
+
+```js
+class MaMap extends Map {
+  // On surcharge le symbole species de MaMap
+  // avec le constructeur Map parent
+  static get [Symbol.species]() { return Map; }
+}
+```
+
+## Spécifications
+
+| Spécification                                                                                        | Statut                       | Commentaires         |
+| ---------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName('ES2015', '#sec-get-map-@@species', 'get Map [ @@species ]')}}     | {{Spec2('ES2015')}}     | Définition initiale. |
+| {{SpecName('ESDraft', '#sec-get-map-@@species', 'get Map [ @@species ]')}} | {{Spec2('ESDraft')}} |                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Map.@@species")}}
+
+## Voir aussi
+
+- {{jsxref("Map")}}
+- {{jsxref("Symbol.species")}}
diff --git a/files/fr/web/javascript/reference/global_objects/map/@@tostringtag/index.html b/files/fr/web/javascript/reference/global_objects/map/@@tostringtag/index.html
deleted file mode 100644
index 251a4c46eb..0000000000
--- a/files/fr/web/javascript/reference/global_objects/map/@@tostringtag/index.html
+++ /dev/null
@@ -1,54 +0,0 @@
----
-title: Map.prototype[@@toStringTag]()
-slug: Web/JavaScript/Reference/Global_Objects/Map/@@toStringTag
-tags:
-  - ECMAScript 2015
-  - JavaScript
-  - Map
-  - Méthode
-  - Prototype
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Map/@@toStringTag
-original_slug: Web/JavaScript/Reference/Global_Objects/Map/@@toStringTag
----
-<div>{{JSRef}}</div>
-
-<p>La propriété <strong><code>Map[@@toStringTag]</code></strong> vaut "Map" initialement.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/map-prototype-@@tostringtag.html")}}</div>
-
-<div>{{js_property_attributes(0,0,1)}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">Map[Symbol.toStringTag]</pre>
-
-<h2 id="Exemple">Exemple</h2>
-
-<pre class="brush:js">Object.prototype.toString.call(new Map()) // "[object Map]"</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-map.prototype-@@tostringtag', 'Map.prototype[@@toStringTag]')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-map.prototype-@@tostringtag', 'Map.prototype[@@toStringTag]')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Map.@@toStringTag")}}</p>
diff --git a/files/fr/web/javascript/reference/global_objects/map/@@tostringtag/index.md b/files/fr/web/javascript/reference/global_objects/map/@@tostringtag/index.md
new file mode 100644
index 0000000000..0618585f04
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/map/@@tostringtag/index.md
@@ -0,0 +1,39 @@
+---
+title: Map.prototype[@@toStringTag]()
+slug: Web/JavaScript/Reference/Global_Objects/Map/@@toStringTag
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Map
+  - Méthode
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Map/@@toStringTag
+original_slug: Web/JavaScript/Reference/Global_Objects/Map/@@toStringTag
+---
+{{JSRef}}
+
+La propriété **`Map[@@toStringTag]`** vaut "Map" initialement.
+
+{{EmbedInteractiveExample("pages/js/map-prototype-@@tostringtag.html")}}{{js_property_attributes(0,0,1)}}
+
+## Syntaxe
+
+    Map[Symbol.toStringTag]
+
+## Exemple
+
+```js
+Object.prototype.toString.call(new Map()) // "[object Map]"
+```
+
+## Spécifications
+
+| Spécification                                                                                                            | État                         | Commentaires         |
+| ------------------------------------------------------------------------------------------------------------------------ | ---------------------------- | -------------------- |
+| {{SpecName('ES2015', '#sec-map.prototype-@@tostringtag', 'Map.prototype[@@toStringTag]')}} | {{Spec2('ES2015')}}     | Définition initiale. |
+| {{SpecName('ESDraft', '#sec-map.prototype-@@tostringtag', 'Map.prototype[@@toStringTag]')}} | {{Spec2('ESDraft')}} |                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Map.@@toStringTag")}}
diff --git a/files/fr/web/javascript/reference/global_objects/map/clear/index.html b/files/fr/web/javascript/reference/global_objects/map/clear/index.html
deleted file mode 100644
index 5c0dbc8661..0000000000
--- a/files/fr/web/javascript/reference/global_objects/map/clear/index.html
+++ /dev/null
@@ -1,75 +0,0 @@
----
-title: Map.prototype.clear()
-slug: Web/JavaScript/Reference/Global_Objects/Map/clear
-tags:
-  - ECMAScript 2015
-  - JavaScript
-  - Map
-  - Méthode
-  - Prototype
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Map/clear
-original_slug: Web/JavaScript/Reference/Global_Objects/Map/clear
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <code><strong>clear()</strong></code> supprime tous les éléments d'un objet <code>Map</code>.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/map-prototype-clear.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>maMap</var>.clear();</pre>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>{{jsxref("undefined")}}.</p>
-
-<h2 id="Exemple">Exemple</h2>
-
-<h3 id="Utiliser_la_méthode_clear()">Utiliser la méthode <code>clear()</code></h3>
-
-<pre class="brush: js">var maMap = new Map();
-maMap.set("truc", "bidule");
-maMap.set(1, "toto");
-
-maMap.size;        // 2
-maMap.has("truc"); // true
-
-maMap.clear();
-
-maMap.size;        // 0
-maMap.has("truc")  // false
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-map.prototype.clear', 'Map.prototype.clear')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-map.prototype.clear', 'Map.prototype.clear')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Map.clear")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Map")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/map/clear/index.md b/files/fr/web/javascript/reference/global_objects/map/clear/index.md
new file mode 100644
index 0000000000..7eb0c53805
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/map/clear/index.md
@@ -0,0 +1,59 @@
+---
+title: Map.prototype.clear()
+slug: Web/JavaScript/Reference/Global_Objects/Map/clear
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Map
+  - Méthode
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Map/clear
+original_slug: Web/JavaScript/Reference/Global_Objects/Map/clear
+---
+{{JSRef}}
+
+La méthode **`clear()`** supprime tous les éléments d'un objet `Map`.
+
+{{EmbedInteractiveExample("pages/js/map-prototype-clear.html")}}
+
+## Syntaxe
+
+    maMap.clear();
+
+### Valeur de retour
+
+{{jsxref("undefined")}}.
+
+## Exemple
+
+### Utiliser la méthode `clear()`
+
+```js
+var maMap = new Map();
+maMap.set("truc", "bidule");
+maMap.set(1, "toto");
+
+maMap.size;        // 2
+maMap.has("truc"); // true
+
+maMap.clear();
+
+maMap.size;        // 0
+maMap.has("truc")  // false
+```
+
+## Spécifications
+
+| Spécification                                                                                        | État                         | Commentaires         |
+| ---------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName('ES2015', '#sec-map.prototype.clear', 'Map.prototype.clear')}}     | {{Spec2('ES2015')}}     | Définition initiale. |
+| {{SpecName('ESDraft', '#sec-map.prototype.clear', 'Map.prototype.clear')}} | {{Spec2('ESDraft')}} |                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Map.clear")}}
+
+## Voir aussi
+
+- {{jsxref("Map")}}
diff --git a/files/fr/web/javascript/reference/global_objects/map/delete/index.html b/files/fr/web/javascript/reference/global_objects/map/delete/index.html
deleted file mode 100644
index 3705d6bacc..0000000000
--- a/files/fr/web/javascript/reference/global_objects/map/delete/index.html
+++ /dev/null
@@ -1,74 +0,0 @@
----
-title: Map.prototype.delete()
-slug: Web/JavaScript/Reference/Global_Objects/Map/delete
-tags:
-  - ECMAScript 2015
-  - JavaScript
-  - Map
-  - Méthode
-  - Prototype
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Map/delete
-original_slug: Web/JavaScript/Reference/Global_Objects/Map/delete
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <strong><code>delete()</code></strong> permet de retirer un élément donné d'un objet <code>Map</code> grâce à sa clé.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/map-prototype-delete.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>maMap</var>.delete(clé);</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>clé</code></dt>
- <dd>Ce paramètre obligatoire correspond à la clé de l'élément qu'on souhaite retirer de l'objet <code>Map</code>.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Un booléen. La méthode renvoie <code>true</code> si un élément de l'objet <code>Map</code> a bien été retiré ou <code>false</code> si l'élément n'existe pas.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<pre class="brush: js">var maMap = new Map();
-maMap.set("truc", "toto");
-
-maMap.delete("truc"); // Renvoie true. La suppression est OK.
-maMap.has("truc");    // Renvoie false. "truc" n'est plus présent.
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-map.prototype.delete', 'Map.prototype.delete')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-map.prototype.delete', 'Map.prototype.delete')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Map.delete")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Map")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/map/delete/index.md b/files/fr/web/javascript/reference/global_objects/map/delete/index.md
new file mode 100644
index 0000000000..0e8aa9ecf5
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/map/delete/index.md
@@ -0,0 +1,56 @@
+---
+title: Map.prototype.delete()
+slug: Web/JavaScript/Reference/Global_Objects/Map/delete
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Map
+  - Méthode
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Map/delete
+original_slug: Web/JavaScript/Reference/Global_Objects/Map/delete
+---
+{{JSRef}}
+
+La méthode **`delete()`** permet de retirer un élément donné d'un objet `Map` grâce à sa clé.
+
+{{EmbedInteractiveExample("pages/js/map-prototype-delete.html")}}
+
+## Syntaxe
+
+    maMap.delete(clé);
+
+### Paramètres
+
+- `clé`
+  - : Ce paramètre obligatoire correspond à la clé de l'élément qu'on souhaite retirer de l'objet `Map`.
+
+### Valeur de retour
+
+Un booléen. La méthode renvoie `true` si un élément de l'objet `Map` a bien été retiré ou `false` si l'élément n'existe pas.
+
+## Exemples
+
+```js
+var maMap = new Map();
+maMap.set("truc", "toto");
+
+maMap.delete("truc"); // Renvoie true. La suppression est OK.
+maMap.has("truc");    // Renvoie false. "truc" n'est plus présent.
+```
+
+## Spécifications
+
+| Spécification                                                                                        | État                         | Commentaires         |
+| ---------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName('ES2015', '#sec-map.prototype.delete', 'Map.prototype.delete')}} | {{Spec2('ES2015')}}     | Définition initiale. |
+| {{SpecName('ESDraft', '#sec-map.prototype.delete', 'Map.prototype.delete')}} | {{Spec2('ESDraft')}} |                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Map.delete")}}
+
+## Voir aussi
+
+- {{jsxref("Map")}}
diff --git a/files/fr/web/javascript/reference/global_objects/map/entries/index.html b/files/fr/web/javascript/reference/global_objects/map/entries/index.html
deleted file mode 100644
index 3deaed0bd3..0000000000
--- a/files/fr/web/javascript/reference/global_objects/map/entries/index.html
+++ /dev/null
@@ -1,78 +0,0 @@
----
-title: Map.prototype.entries()
-slug: Web/JavaScript/Reference/Global_Objects/Map/entries
-tags:
-  - ECMAScript 2015
-  - Iterator
-  - JavaScript
-  - Map
-  - Méthode
-  - Prototype
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Map/entries
-original_slug: Web/JavaScript/Reference/Global_Objects/Map/entries
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <strong><code>entries()</code></strong> renvoie un objet <code><a href="/fr/docs/Web/JavaScript/Guide/iterateurs_et_generateurs#Itérateurs">Iterator</a></code> qui contient les paires <code>[clé, valeur]</code> pour chaque élément de l'objet <code>Map</code>, dans leur ordre d'insertion.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/map-prototype-entries.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><em>maMap</em>.entries()</pre>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Un nouvel objet <code>Iterator</code> {{jsxref("Map")}}.</p>
-
-<h2 id="Exemple">Exemple</h2>
-
-<h3 id="Utiliser_entries()">Utiliser <code>entries()</code></h3>
-
-<pre class="brush:js">var maMap = new Map();
-maMap.set("0", "toto");
-maMap.set(1, "truc");
-maMap.set({}, "bidule");
-
-var mapIter = maMap.entries();
-
-console.log(mapIter.next().value); // ["0", "toto"]
-console.log(mapIter.next().value); // [1, "truc"]
-console.log(mapIter.next().value); // [Object, "bidule"]
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-map.prototype.entries', 'Map.prototype.entries')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td>Défintion initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-map.prototype.entries', 'Map.prototype.entries')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Map.entries")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Map.prototype.keys()")}}</li>
- <li>{{jsxref("Map.prototype.values()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/map/entries/index.md b/files/fr/web/javascript/reference/global_objects/map/entries/index.md
new file mode 100644
index 0000000000..a03e8f96c4
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/map/entries/index.md
@@ -0,0 +1,60 @@
+---
+title: Map.prototype.entries()
+slug: Web/JavaScript/Reference/Global_Objects/Map/entries
+tags:
+  - ECMAScript 2015
+  - Iterator
+  - JavaScript
+  - Map
+  - Méthode
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Map/entries
+original_slug: Web/JavaScript/Reference/Global_Objects/Map/entries
+---
+{{JSRef}}
+
+La méthode **`entries()`** renvoie un objet [`Iterator`](/fr/docs/Web/JavaScript/Guide/iterateurs_et_generateurs#Itérateurs) qui contient les paires `[clé, valeur]` pour chaque élément de l'objet `Map`, dans leur ordre d'insertion.
+
+{{EmbedInteractiveExample("pages/js/map-prototype-entries.html")}}
+
+## Syntaxe
+
+    maMap.entries()
+
+### Valeur de retour
+
+Un nouvel objet `Iterator` {{jsxref("Map")}}.
+
+## Exemple
+
+### Utiliser `entries()`
+
+```js
+var maMap = new Map();
+maMap.set("0", "toto");
+maMap.set(1, "truc");
+maMap.set({}, "bidule");
+
+var mapIter = maMap.entries();
+
+console.log(mapIter.next().value); // ["0", "toto"]
+console.log(mapIter.next().value); // [1, "truc"]
+console.log(mapIter.next().value); // [Object, "bidule"]
+```
+
+## Spécifications
+
+| Spécification                                                                                            | État                         | Commentaires        |
+| -------------------------------------------------------------------------------------------------------- | ---------------------------- | ------------------- |
+| {{SpecName('ES2015', '#sec-map.prototype.entries', 'Map.prototype.entries')}} | {{Spec2('ES2015')}}     | Défintion initiale. |
+| {{SpecName('ESDraft', '#sec-map.prototype.entries', 'Map.prototype.entries')}} | {{Spec2('ESDraft')}} |                     |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Map.entries")}}
+
+## Voir aussi
+
+- {{jsxref("Map.prototype.keys()")}}
+- {{jsxref("Map.prototype.values()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/map/foreach/index.html b/files/fr/web/javascript/reference/global_objects/map/foreach/index.html
deleted file mode 100644
index 4d2fbfdd70..0000000000
--- a/files/fr/web/javascript/reference/global_objects/map/foreach/index.html
+++ /dev/null
@@ -1,102 +0,0 @@
----
-title: Map.prototype.forEach()
-slug: Web/JavaScript/Reference/Global_Objects/Map/forEach
-tags:
-  - ECMAScript 2015
-  - JavaScript
-  - Map
-  - Méthode
-  - Prototype
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Map/forEach
-original_slug: Web/JavaScript/Reference/Global_Objects/Map/forEach
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <code><strong>forEach()</strong></code> exécute une fonction donnée sur chaque élément clé-valeur de l'objet <code>Map</code> dans l'ordre d'insertion.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/map-prototype-foreach.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><em>maMap</em>.forEach(<em>callback</em>[, <em>thisArg</em>])</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>callback</code></dt>
- <dd>La fonction à exécuter pour chaque élément.</dd>
- <dt><code>thisArg</code></dt>
- <dd>La valeur à utiliser comme contexte <code>this</code> lors de l'exécution de <code>callback</code>.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>{{jsxref("undefined")}}</p>
-
-<h2 id="Description">Description</h2>
-
-<p>La méthode <code>forEach</code> exécute la fonction <code>callback</code> donnée sur chacune des clés qui existe. Elle n'est pas appelée pour les clés qui ont été supprimées. En revanche, elle est appelée pour les valeurs qui sont présentes mais qui sont égales à <code>undefined</code>.</p>
-
-<p><code>callback</code> est appelé avec <strong>trois arguments</strong> :</p>
-
-<ul>
- <li>la <strong>valeur de l'élément</strong></li>
- <li>la <strong>clé de l'élément</strong></li>
- <li>l'objet <strong><code>Map</code> parcouru</strong></li>
-</ul>
-
-<p>Si un argument <code>thisArg</code> est fourni à la méthode <code>forEach</code>, il sera passé au <code>callback</code> quand il sera appelé et celui-ci l'utilisera comme valeur <code>this</code>. Dans les autres cas, la valeur <code>undefined</code> sera utilisée comme contexte <code>this</code>. La valeur <code>this</code> observée par la fonction <code>callback</code> est déterminée selon <a href="/fr/docs/JavaScript/Reference/Opérateurs/Opérateurs_spéciaux/L'opérateur_this">les règles appliquées à l'opérateur <code>this</code></a>.</p>
-
-<p>Chacune des valeurs sera traitée une fois sauf si celle-ci a été supprimée puis réajoutée avant la fin de <code>forEach</code>. <code>callback</code> n'est pas appelé pour les valeurs qui sont supprimés avant le passage de la fonction. Les valeurs qui sont ajoutées avant que <code>forEach</code> ait parcouru l'ensemble seront traitées.</p>
-
-<p><code>forEach</code> exécute la fonction <code>callback</code> une fois pour chaque élément de l'objet <code>Map</code> : il ne renvoie pas de valeur.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<p>Le fragment de code suivant enregistre une ligne pour chaque élément d'un objet<code> Map </code>:</p>
-
-<pre class="brush:js">function logMapElements(valeur, clé, map) {
-    console.log(`map.get('${clé}') = ${value}`);
-}
-
-
-new Map([["toto", 3], ["truc", {}], ["bidule", undefined]]).forEach(logMapElements);
-// affichera dans la console :
-// "map.get('toto') = 3"
-// "map.get('truc') = [object Object]"
-// "map.get('bidule') = undefined"
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-map.prototype.foreach', 'Map.prototype.forEach')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-map.prototype.foreach', 'Map.prototype.forEach')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Map.forEach")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Array.prototype.forEach()")}}</li>
- <li>{{jsxref("Set.prototype.forEach()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/map/foreach/index.md b/files/fr/web/javascript/reference/global_objects/map/foreach/index.md
new file mode 100644
index 0000000000..da31bd273a
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/map/foreach/index.md
@@ -0,0 +1,82 @@
+---
+title: Map.prototype.forEach()
+slug: Web/JavaScript/Reference/Global_Objects/Map/forEach
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Map
+  - Méthode
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Map/forEach
+original_slug: Web/JavaScript/Reference/Global_Objects/Map/forEach
+---
+{{JSRef}}
+
+La méthode **`forEach()`** exécute une fonction donnée sur chaque élément clé-valeur de l'objet `Map` dans l'ordre d'insertion.
+
+{{EmbedInteractiveExample("pages/js/map-prototype-foreach.html")}}
+
+## Syntaxe
+
+    maMap.forEach(callback[, thisArg])
+
+### Paramètres
+
+- `callback`
+  - : La fonction à exécuter pour chaque élément.
+- `thisArg`
+  - : La valeur à utiliser comme contexte `this` lors de l'exécution de `callback`.
+
+### Valeur de retour
+
+{{jsxref("undefined")}}
+
+## Description
+
+La méthode `forEach` exécute la fonction `callback` donnée sur chacune des clés qui existe. Elle n'est pas appelée pour les clés qui ont été supprimées. En revanche, elle est appelée pour les valeurs qui sont présentes mais qui sont égales à `undefined`.
+
+`callback` est appelé avec **trois arguments** :
+
+- la **valeur de l'élément**
+- la **clé de l'élément**
+- l'objet **`Map` parcouru**
+
+Si un argument `thisArg` est fourni à la méthode `forEach`, il sera passé au `callback` quand il sera appelé et celui-ci l'utilisera comme valeur `this`. Dans les autres cas, la valeur `undefined` sera utilisée comme contexte `this`. La valeur `this` observée par la fonction `callback` est déterminée selon [les règles appliquées à l'opérateur `this`](/fr/docs/JavaScript/Reference/Opérateurs/Opérateurs_spéciaux/L'opérateur_this).
+
+Chacune des valeurs sera traitée une fois sauf si celle-ci a été supprimée puis réajoutée avant la fin de `forEach`. `callback` n'est pas appelé pour les valeurs qui sont supprimés avant le passage de la fonction. Les valeurs qui sont ajoutées avant que `forEach` ait parcouru l'ensemble seront traitées.
+
+`forEach` exécute la fonction `callback` une fois pour chaque élément de l'objet `Map` : il ne renvoie pas de valeur.
+
+## Exemples
+
+Le fragment de code suivant enregistre une ligne pour chaque élément d'un objet` Map `:
+
+```js
+function logMapElements(valeur, clé, map) {
+    console.log(`map.get('${clé}') = ${value}`);
+}
+
+
+new Map([["toto", 3], ["truc", {}], ["bidule", undefined]]).forEach(logMapElements);
+// affichera dans la console :
+// "map.get('toto') = 3"
+// "map.get('truc') = [object Object]"
+// "map.get('bidule') = undefined"
+```
+
+## Spécifications
+
+| Spécification                                                                                            | État                         | Commentaires         |
+| -------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName('ES2015', '#sec-map.prototype.foreach', 'Map.prototype.forEach')}} | {{Spec2('ES2015')}}     | Définition initiale. |
+| {{SpecName('ESDraft', '#sec-map.prototype.foreach', 'Map.prototype.forEach')}} | {{Spec2('ESDraft')}} |                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Map.forEach")}}
+
+## Voir aussi
+
+- {{jsxref("Array.prototype.forEach()")}}
+- {{jsxref("Set.prototype.forEach()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/map/get/index.html b/files/fr/web/javascript/reference/global_objects/map/get/index.html
deleted file mode 100644
index bf2e8cba01..0000000000
--- a/files/fr/web/javascript/reference/global_objects/map/get/index.html
+++ /dev/null
@@ -1,76 +0,0 @@
----
-title: Map.prototype.get()
-slug: Web/JavaScript/Reference/Global_Objects/Map/get
-tags:
-  - ECMAScript 2015
-  - JavaScript
-  - Map
-  - Méthode
-  - Prototype
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Map/get
-original_slug: Web/JavaScript/Reference/Global_Objects/Map/get
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <code><strong>get()</strong></code> renvoie un élément précisé d'un objet <code>Map</code>. Si la valeur associée à la clé fournie est un objet, alors on obtient une référence à cet objet et tous changements apporté à cet objet sera aussi visible à l'intérieur de l'objet <code>Map</code>.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/map-prototype-get.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox notranslate"><em>maMap</em>.get(clé)</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>clé</code></dt>
- <dd>La clé de l'élément à renvoyer depuis l'objet <code>Map</code>.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>L'élément associée à la clé donnée ou {{jsxref("undefined")}} si la clé ne fait pas partie de l'objet <code>Map</code>.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<pre class="brush: js notranslate">var maMap = new Map();
-maMap.set("truc", "toto");
-
-maMap.get("truc");     // Renvoie "toto".
-maMap.get("machin");   // Renvoie undefined.
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-map.prototype.get', 'Map.prototype.get')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-map.prototype.get', 'Map.prototype.get')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Map.get")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Map")}}</li>
- <li>{{jsxref("Map.prototype.set()")}}</li>
- <li>{{jsxref("Map.prototype.has()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/map/get/index.md b/files/fr/web/javascript/reference/global_objects/map/get/index.md
new file mode 100644
index 0000000000..5dbc57ae3a
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/map/get/index.md
@@ -0,0 +1,58 @@
+---
+title: Map.prototype.get()
+slug: Web/JavaScript/Reference/Global_Objects/Map/get
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Map
+  - Méthode
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Map/get
+original_slug: Web/JavaScript/Reference/Global_Objects/Map/get
+---
+{{JSRef}}
+
+La méthode **`get()`** renvoie un élément précisé d'un objet `Map`. Si la valeur associée à la clé fournie est un objet, alors on obtient une référence à cet objet et tous changements apporté à cet objet sera aussi visible à l'intérieur de l'objet `Map`.
+
+{{EmbedInteractiveExample("pages/js/map-prototype-get.html")}}
+
+## Syntaxe
+
+    maMap.get(clé)
+
+### Paramètres
+
+- `clé`
+  - : La clé de l'élément à renvoyer depuis l'objet `Map`.
+
+### Valeur de retour
+
+L'élément associée à la clé donnée ou {{jsxref("undefined")}} si la clé ne fait pas partie de l'objet `Map`.
+
+## Exemples
+
+```js
+var maMap = new Map();
+maMap.set("truc", "toto");
+
+maMap.get("truc");     // Renvoie "toto".
+maMap.get("machin");   // Renvoie undefined.
+```
+
+## Spécifications
+
+| Spécification                                                                                | État                         | Commentaires         |
+| -------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName('ES2015', '#sec-map.prototype.get', 'Map.prototype.get')}} | {{Spec2('ES2015')}}     | Définition initiale. |
+| {{SpecName('ESDraft', '#sec-map.prototype.get', 'Map.prototype.get')}} | {{Spec2('ESDraft')}} |                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Map.get")}}
+
+## Voir aussi
+
+- {{jsxref("Map")}}
+- {{jsxref("Map.prototype.set()")}}
+- {{jsxref("Map.prototype.has()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/map/has/index.html b/files/fr/web/javascript/reference/global_objects/map/has/index.html
deleted file mode 100644
index ce26d66e47..0000000000
--- a/files/fr/web/javascript/reference/global_objects/map/has/index.html
+++ /dev/null
@@ -1,76 +0,0 @@
----
-title: Map.prototype.has()
-slug: Web/JavaScript/Reference/Global_Objects/Map/has
-tags:
-  - ECMAScript 2015
-  - JavaScript
-  - Map
-  - Méthode
-  - Prototype
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Map/has
-original_slug: Web/JavaScript/Reference/Global_Objects/Map/has
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <code><strong>has()</strong></code> renvoie un booléen permettant de déterminer si l'objet <code>Map</code> en question contient la clé donnée.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/map-prototype-has.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><em>maMap</em>.has(clé);</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>clé</code></dt>
- <dd>Ce paramètre obligatoire correspond à la clé dont on veut savoir si elle appartient à l'objet <code>Map</code>.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Cette méthode renvoie un booléen : <code>true</code> si un élément avec cette clé existe au sein de l'objet <code>Map</code> et <code>false</code> sinon.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<pre class="brush: js">var maMap = new Map();
-maMap.set("truc", "toto");
-
-maMap.has("truc");  // renvoie true
-maMap.has("machin");// renvoie false
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-map.prototype.has', 'Map.prototype.has')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-map.prototype.has', 'Map.prototype.has')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Map.has")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Map")}}</li>
- <li>{{jsxref("Map.prototype.set()")}}</li>
- <li>{{jsxref("Map.prototype.get()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/map/has/index.md b/files/fr/web/javascript/reference/global_objects/map/has/index.md
new file mode 100644
index 0000000000..998b7fe3bc
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/map/has/index.md
@@ -0,0 +1,58 @@
+---
+title: Map.prototype.has()
+slug: Web/JavaScript/Reference/Global_Objects/Map/has
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Map
+  - Méthode
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Map/has
+original_slug: Web/JavaScript/Reference/Global_Objects/Map/has
+---
+{{JSRef}}
+
+La méthode **`has()`** renvoie un booléen permettant de déterminer si l'objet `Map` en question contient la clé donnée.
+
+{{EmbedInteractiveExample("pages/js/map-prototype-has.html")}}
+
+## Syntaxe
+
+    maMap.has(clé);
+
+### Paramètres
+
+- `clé`
+  - : Ce paramètre obligatoire correspond à la clé dont on veut savoir si elle appartient à l'objet `Map`.
+
+### Valeur de retour
+
+Cette méthode renvoie un booléen : `true` si un élément avec cette clé existe au sein de l'objet `Map` et `false` sinon.
+
+## Exemples
+
+```js
+var maMap = new Map();
+maMap.set("truc", "toto");
+
+maMap.has("truc");  // renvoie true
+maMap.has("machin");// renvoie false
+```
+
+## Spécifications
+
+| Spécification                                                                                | État                         | Commentaires         |
+| -------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName('ES2015', '#sec-map.prototype.has', 'Map.prototype.has')}} | {{Spec2('ES2015')}}     | Définition initiale. |
+| {{SpecName('ESDraft', '#sec-map.prototype.has', 'Map.prototype.has')}} | {{Spec2('ESDraft')}} |                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Map.has")}}
+
+## Voir aussi
+
+- {{jsxref("Map")}}
+- {{jsxref("Map.prototype.set()")}}
+- {{jsxref("Map.prototype.get()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/map/index.html b/files/fr/web/javascript/reference/global_objects/map/index.html
deleted file mode 100644
index 7e49822844..0000000000
--- a/files/fr/web/javascript/reference/global_objects/map/index.html
+++ /dev/null
@@ -1,276 +0,0 @@
----
-title: Map
-slug: Web/JavaScript/Reference/Global_Objects/Map
-tags:
-  - ECMAScript 2015
-  - JavaScript
-  - Map
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Map
-original_slug: Web/JavaScript/Reference/Global_Objects/Map
----
-<div>{{JSRef}}</div>
-
-<p>L'objet <strong><code>Map</code></strong> représente un dictionnaire, autrement dit une carte de clés/valeurs. N'importe quelle valeur valable en JavaScript (que ce soit les objets ou les valeurs de types primitifs) peut être utilisée comme clé ou comme valeur.</p>
-
-<p>L'ordre d'insertion des clés est mémorisé dans l'objet et les boucles sur les <code>Map</code> parcourent les clés dans cet ordre.</p>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox notranslate">new Map([<var>iterable</var>])</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>itérable</code></dt>
- <dd>Un tableau ({{jsxref("Array")}}) ou tout autre objet <a href="/fr/docs/Web/JavaScript/Reference/Les_protocoles_iteration#Le_protocole_«_itérable_»">itérable</a> dont les éléments sont des paires clé/valeur (par exemple un tableau de la forme <code>[[1 , "toto"],[2, "truc"]]</code>). Chaque paire clé/valeur sera ajoutée au nouvel objet <code>Map</code>. {{jsxref("null")}} est traité comme {{jsxref("undefined")}}.</dd>
-</dl>
-
-<h2 id="Description">Description</h2>
-
-<p>Un objet <code>Map</code> permet de retrouver ses éléments dans leur ordre d'insertion. Par exemple, une boucle {{jsxref("Instructions/for...of","for...of")}} renverra un tableau de <code>[clé, valeur]</code> pour chaque itération.</p>
-
-<p>On notera qu'un objet <code>Map</code> contenant des objets ne sera parcouru que dans l'ordre d'insertion de ces objets. Avec ES2015, l'ordre d'itération est fixé pour les objets. Toutefois, pour les versions antérieures d'ECMAScript, cet ordre n'est pas garanti.</p>
-
-<h3 id="Égalité_des_clés">Égalité des clés</h3>
-
-<p>L'égalité des clés est testée avec l'algorithme basé sur <a href="/fr/docs/JavaScript/Les_différents_tests_d_Égalité_comment_les_utiliser#.C3.89galit.C3.A9_de_valeurs">l'égalité de valeurs</a> :</p>
-
-<ul>
- <li>{{jsxref("NaN")}} est considéré égal à <code>NaN</code> (bien que, pour l'égalité stricte <code>NaN !== NaN</code>)</li>
- <li>les autres valeurs sont considérées égales au sens de l'égalité stricte (l'opérateur  <code>===</code>).</li>
-</ul>
-
-<p>Dans les versions précédentes des brouillons ECMAScript 2015 (ES6) <code>-0</code> et <code>+0</code> étaient considérés différents (bien que <code>-0 === +0</code>), ceci a été changé dans les versions ultérieures et a été adapté avec Gecko 29 {{geckoRelease("29")}} ({{bug("952870")}}) et une version nocturne de <a href="https://code.google.com/p/v8/issues/detail?id=3069">Chrome</a>.</p>
-
-<h3 id="Comparaison_entre_objets_et_maps">Comparaison entre objets et maps</h3>
-
-<p>Les {{jsxref("Object", "objets","",1)}} sont similaires aux <code>Maps</code>, chacun manipulant des clés associées à des valeurs, récupérant ces valeurs, supprimant des clés... Il n'y avait auparavant pas d'alternatives natives et c'est pourquoi, historiquement, les objets JavaScript ont été utilisés comme des <code>Maps</code>. Malgré tout, il y a des différences importantes entre<code> Objects</code> et <code>Maps</code> qui permettent de distinguer une utilisation des objets <code>Map</code> plus efficace :</p>
-
-<ul>
- <li>Un <code>Object</code> possède un prototype, certaines clés par défaut peuvent donc entrer en collision avec les clés qu'on souhaite créer. À partir d'ES5, on peut écrire <code>map = </code> {{jsxref("Object.create", "Object.create(null)")}} mais cette formulation est rarement utilisée.</li>
- <li>Les clés d'une <code>Map</code> sont ordonnées tandis que les clés d'un objet n'ont pas d'ordre particulier. Ainsi, quand on parcourt une <code>Map</code>, on obtient les clés selon leur ordre d'insertion. On notera qu'à partir d'ECMAScript 2015, la spécification pour les objets indique de conserver l'ordre de création pour les clés qui sont des chaînes et des symboles.</li>
- <li>Les clés d'un <code>Object</code> sont des {{jsxref("String", "chaînes de caractères","",1)}} ou des symboles (cf. {{jsxref("Symbol")}}), alors que pour une <code>Map</code> ça peut être n'importe quelle valeur.</li>
- <li>Il est possible d'obtenir facilement la taille d'une <code>Map</code> avec <code>size</code>. En revanche, pour un <code>Object</code> il faudra compter « manuellement ».</li>
- <li>Un objet <code>Map</code> est un <a href="/fr/docs/Web/JavaScript/Reference/Les_protocoles_iteration#Le_protocole_«_itérable_»">itérable</a> et on peut donc le parcourir directement. En revanche, itérer sur un <code>Object</code> nécessite de récupérer les clés de l'objet pour ensuite les parcourir.</li>
- <li>Un objet <code>Map</code> permettra d'obtenir de meilleures performances si on ajoute et supprime des éléments fréquemment.</li>
-</ul>
-
-<h2 id="Propriétés">Propriétés</h2>
-
-<dl>
- <dt><code>Map.length</code></dt>
- <dd>La valeur de la propriété <code>length</code> est 0.<br>
- Attention, pour compter le nombre d'élément contenu dans une <code>Map</code>, on utilisera plutôt {{jsxref("Map.prototype.size")}}.</dd>
- <dt>{{jsxref("Map.@@species", "get Map[@@species]")}}</dt>
- <dd>La fonction constructeur utilisée pour créer des objets dérivées.</dd>
- <dt>{{jsxref("Map.prototype")}}</dt>
- <dd>Représente le prototype du constructeur <code>Map</code>. Permet l'addition de propriétés à tous les objets <code>Map</code>.</dd>
-</dl>
-
-<h2 id="Instances_de_Map">Instances de <code>Map</code></h2>
-
-<p>Toutes les instances de <code>Map</code> héritent de {{jsxref("Map.prototype")}}.</p>
-
-<h3 id="Propriétés_2">Propriétés</h3>
-
-<p>{{page('fr/docs/Web/JavaScript/Reference/Objets_globaux/Map/prototype','Propriétés')}}</p>
-
-<h3 id="Méthodes">Méthodes</h3>
-
-<p>{{page('fr/docs/Web/JavaScript/Reference/Objets_globaux/Map/prototype','Méthodes')}}</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Utiliser_un_objet_Map">Utiliser un objet <code>Map</code></h3>
-
-<pre class="brush: js notranslate">const myMap = new Map();
-
-const objectKey = {},
-    functionKey = function () {},
-    stringKey = "une chaîne";
-
-// définir les valeurs
-myMap.set(stringKey, "valeur associée à 'une chaîne'");
-myMap.set(objectKey, "valeur associée à objectKey");
-myMap.set(functionKey, "valeur associée à functionKey");
-
-myMap.size; // 3
-
-// récupérer les valeurs
-myMap.get(stringKey);     // "valeur associée à 'une chaîne'"
-myMap.get(objectKey);      // "valeur associée à objetClé"
-myMap.get(functionKey);   // "valeur associée à fonctionClé"
-
-myMap.get("une chaîne");  // "valeur associée à 'une chaîne'"
-                          // car chaineClé === 'une chaîne'
-myMap.get({});            // indéfini car objetClé !== {}
-myMap.get(function() {}); // indéfini car fonctionClé !== function () {}
-</pre>
-
-<h3 id="Utiliser_NaN_comme_clé">Utiliser <code>NaN</code> comme clé</h3>
-
-<p>{{jsxref("NaN")}} peut être utilisé comme une clé. Bien que <code>NaN</code> ne soit pas strictement égal à lui-même (<code>NaN !== NaN</code> est vérifié), on peut bâtir l'exemple suivant car on ne peut pas distinguer deux valeurs <code>NaN </code>:</p>
-
-<pre class="brush: js notranslate">const myMap = new Map();
-myMap.set(NaN, "not a number");
-
-myMap.get(NaN); // "not a number"
-
-const otherNaN = Number("toto");
-myMap.get(otherNaN); // "not a number"
-</pre>
-
-<h3 id="Parcourir_des_objets_Maps_avec_for..of">Parcourir des objets <code>Maps</code> avec <code>for..of</code></h3>
-
-<p>Il est possible de parcourir les objets <code>Map </code>grâce à des boucles <code>for..of</code> :</p>
-
-<pre class="brush: js notranslate">const myMap = new Map();
-myMap.set(0, "zéro");
-myMap.set(1, "un");
-for (const [key, value] of myMap) {
-  console.log(`${key} = ${value}`);
-}
-// On aura 2 lignes : la première avec "0 = zéro"
-// la seconde avec "1 = un"
-
-for (const key of myMap.keys()) {
-  console.log(key);
-}
-// On aura 2 lignes : la première avec "0"
-// et la seconde avec "1"
-
-for (const value of myMap.values()) {
-  console.log(valeur);
-}
-// On aura 2 lignes : la première avec "zéro"
-// et la seconde avec "un"
-
-for (const [key, value] of myMap.entries()) {
-  console.log(`${key} = ${value}`);
-}
-// On aura 2 lignes : la première avec "0 = zéro"
-// la seconde avec "1 = un"
-
-myMap.forEach(function(value, key) {
-  console.log(`${key} = ${value}`);
-});
-// On aura 2 lignes : la première avec "0 = zéro"
-// la seconde avec "1 = un"
-</pre>
-
-<h3 id="Relation_avec_les_objets_Array">Relation avec les objets <code>Array</code></h3>
-
-<pre class="brush: js notranslate">const keyValuePair = [["clé1", "valeur1"], ["clé2", "valeur2"]];
-
-// On utilise le constructeur Map
-// pour transformer un tableau de clés/valeurs
-// en un objet map
-const myMap = new Map(keyValuePair);
-
-myMap.get("clé1"); // renvoie "valeur1"
-
-// On utilise la fonction Array.from pour transformer
-// une map en un tableau de clés/valeurs
-console.log(Array.from(myMap)); // affichera la même chose que tableauCléValeur
-
-// On peut aussi l'utiliser pour n'extraire que les clés
-// ou les valeurs et créer le tableau associé
-console.log(Array.from(myMap.keys())); // affichera ["clé1", "clé2"]</pre>
-
-<h3 id="Cloner_et_fusionner_des_objets_Map">Cloner et fusionner des objets <code>Map</code></h3>
-
-<p>Il est possible de cloner des <code>Map</code> comme on clone des tableaux :</p>
-
-<pre class="brush: js notranslate">const original = new Map([
-  [1, 'un']
-]);
-
-const clone = new Map(original);
-
-console.log(clone.get(1)); // un
-console.log(original === clone); // false. Utile pour une comparaison superficielle</pre>
-
-<p>Attention, la donnée contenue dans la <code>Map</code> n'est pas clonée.</p>
-
-<p>Il est également possible de fusionner deux <code>Map</code> en conservant le critère d'unicité sur les clés :</p>
-
-<pre class="brush: js notranslate">const first = new Map([
-  [1, 'un'],
-  [2, 'deux'],
-  [3, 'trois'],
-]);
-
-const second = new Map([
-  [1, 'uno'],
-  [2, 'dos']
-]);
-
-// On fusionne les deux maps. C'est la "dernière" version
-// de la clé qui l'emporte.
-// L'opérateur de décomposition nous permet principalement ici
-// de convertir une map en un tableau
-const fusion = new Map([...first, ...second]);
-
-console.log(fusion.get(1)); // uno
-console.log(fusion.get(2)); // dos
-console.log(fusion.get(3)); // trois</pre>
-
-<p>Il est également possible de fusionner des objets <code>Map</code> avec des objets <code>Array</code> :</p>
-
-<pre class="brush: js notranslate">const first = new Map([
-  [1, 'un'],
-  [2, 'deux'],
-  [3, 'trois'],
-]);
-
-const second = new Map([
-  [1, 'uno'],
-  [2, 'dos']
-]);
-
-// On peut fusionner des Maps avec un tableau
-// Là encore c'est le dernier exemplaire de la clé qui l'emporte
-const fusion = new Map([...first, ...second, [1, 'eins']]);
-
-console.log(fusion.get(1)); // eins
-console.log(fusion.get(2)); // dos
-console.log(fusion.get(3)); // trois</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-map-objects', 'Map')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-map-objects', 'Map')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Map")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=697479">Le bug sur Map et Set pour Mozilla</a></li>
- <li><a class="external" href="https://web.archive.org/web/20170105121945/http://wiki.ecmascript.org:80/doku.php?id=harmony:simple_maps_and_sets">La proposition ECMAScript Harmony</a></li>
- <li>{{jsxref("Set")}}</li>
- <li>{{jsxref("WeakMap")}}</li>
- <li>{{jsxref("WeakSet")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/map/index.md b/files/fr/web/javascript/reference/global_objects/map/index.md
new file mode 100644
index 0000000000..81d5b8cb36
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/map/index.md
@@ -0,0 +1,260 @@
+---
+title: Map
+slug: Web/JavaScript/Reference/Global_Objects/Map
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Map
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Map
+original_slug: Web/JavaScript/Reference/Global_Objects/Map
+---
+{{JSRef}}
+
+L'objet **`Map`** représente un dictionnaire, autrement dit une carte de clés/valeurs. N'importe quelle valeur valable en JavaScript (que ce soit les objets ou les valeurs de types primitifs) peut être utilisée comme clé ou comme valeur.
+
+L'ordre d'insertion des clés est mémorisé dans l'objet et les boucles sur les `Map` parcourent les clés dans cet ordre.
+
+## Syntaxe
+
+    new Map([iterable])
+
+### Paramètres
+
+- `itérable`
+  - : Un tableau ({{jsxref("Array")}}) ou tout autre objet [itérable](/fr/docs/Web/JavaScript/Reference/Les_protocoles_iteration#Le_protocole_«_itérable_») dont les éléments sont des paires clé/valeur (par exemple un tableau de la forme `[[1 , "toto"],[2, "truc"]]`). Chaque paire clé/valeur sera ajoutée au nouvel objet `Map`. {{jsxref("null")}} est traité comme {{jsxref("undefined")}}.
+
+## Description
+
+Un objet `Map` permet de retrouver ses éléments dans leur ordre d'insertion. Par exemple, une boucle {{jsxref("Instructions/for...of","for...of")}} renverra un tableau de `[clé, valeur]` pour chaque itération.
+
+On notera qu'un objet `Map` contenant des objets ne sera parcouru que dans l'ordre d'insertion de ces objets. Avec ES2015, l'ordre d'itération est fixé pour les objets. Toutefois, pour les versions antérieures d'ECMAScript, cet ordre n'est pas garanti.
+
+### Égalité des clés
+
+L'égalité des clés est testée avec l'algorithme basé sur [l'égalité de valeurs](/fr/docs/JavaScript/Les_différents_tests_d_Égalité_comment_les_utiliser#.C3.89galit.C3.A9_de_valeurs) :
+
+- {{jsxref("NaN")}} est considéré égal à `NaN` (bien que, pour l'égalité stricte `NaN !== NaN`)
+- les autres valeurs sont considérées égales au sens de l'égalité stricte (l'opérateur  `===`).
+
+Dans les versions précédentes des brouillons ECMAScript 2015 (ES6) `-0` et `+0` étaient considérés différents (bien que `-0 === +0`), ceci a été changé dans les versions ultérieures et a été adapté avec Gecko 29 {{geckoRelease("29")}} ({{bug("952870")}}) et une version nocturne de [Chrome](https://code.google.com/p/v8/issues/detail?id=3069).
+
+### Comparaison entre objets et maps
+
+Les {{jsxref("Object", "objets","",1)}} sont similaires aux `Maps`, chacun manipulant des clés associées à des valeurs, récupérant ces valeurs, supprimant des clés... Il n'y avait auparavant pas d'alternatives natives et c'est pourquoi, historiquement, les objets JavaScript ont été utilisés comme des `Maps`. Malgré tout, il y a des différences importantes entre` Objects` et `Maps` qui permettent de distinguer une utilisation des objets `Map` plus efficace :
+
+- Un `Object` possède un prototype, certaines clés par défaut peuvent donc entrer en collision avec les clés qu'on souhaite créer. À partir d'ES5, on peut écrire `map = `{{jsxref("Object.create", "Object.create(null)")}} mais cette formulation est rarement utilisée.
+- Les clés d'une `Map` sont ordonnées tandis que les clés d'un objet n'ont pas d'ordre particulier. Ainsi, quand on parcourt une `Map`, on obtient les clés selon leur ordre d'insertion. On notera qu'à partir d'ECMAScript 2015, la spécification pour les objets indique de conserver l'ordre de création pour les clés qui sont des chaînes et des symboles.
+- Les clés d'un `Object` sont des {{jsxref("String", "chaînes de caractères","",1)}} ou des symboles (cf. {{jsxref("Symbol")}}), alors que pour une `Map` ça peut être n'importe quelle valeur.
+- Il est possible d'obtenir facilement la taille d'une `Map` avec `size`. En revanche, pour un `Object` il faudra compter « manuellement ».
+- Un objet `Map` est un [itérable](/fr/docs/Web/JavaScript/Reference/Les_protocoles_iteration#Le_protocole_«_itérable_») et on peut donc le parcourir directement. En revanche, itérer sur un `Object` nécessite de récupérer les clés de l'objet pour ensuite les parcourir.
+- Un objet `Map` permettra d'obtenir de meilleures performances si on ajoute et supprime des éléments fréquemment.
+
+## Propriétés
+
+- `Map.length`
+  - : La valeur de la propriété `length` est 0.
+    Attention, pour compter le nombre d'élément contenu dans une `Map`, on utilisera plutôt {{jsxref("Map.prototype.size")}}.
+- {{jsxref("Map.@@species", "get Map[@@species]")}}
+  - : La fonction constructeur utilisée pour créer des objets dérivées.
+- {{jsxref("Map.prototype")}}
+  - : Représente le prototype du constructeur `Map`. Permet l'addition de propriétés à tous les objets `Map`.
+
+## Instances de `Map`
+
+Toutes les instances de `Map` héritent de {{jsxref("Map.prototype")}}.
+
+### Propriétés
+
+{{page('fr/docs/Web/JavaScript/Reference/Objets_globaux/Map/prototype','Propriétés')}}
+
+### Méthodes
+
+{{page('fr/docs/Web/JavaScript/Reference/Objets_globaux/Map/prototype','Méthodes')}}
+
+## Exemples
+
+### Utiliser un objet `Map`
+
+```js
+const myMap = new Map();
+
+const objectKey = {},
+    functionKey = function () {},
+    stringKey = "une chaîne";
+
+// définir les valeurs
+myMap.set(stringKey, "valeur associée à 'une chaîne'");
+myMap.set(objectKey, "valeur associée à objectKey");
+myMap.set(functionKey, "valeur associée à functionKey");
+
+myMap.size; // 3
+
+// récupérer les valeurs
+myMap.get(stringKey);     // "valeur associée à 'une chaîne'"
+myMap.get(objectKey);      // "valeur associée à objetClé"
+myMap.get(functionKey);   // "valeur associée à fonctionClé"
+
+myMap.get("une chaîne");  // "valeur associée à 'une chaîne'"
+                          // car chaineClé === 'une chaîne'
+myMap.get({});            // indéfini car objetClé !== {}
+myMap.get(function() {}); // indéfini car fonctionClé !== function () {}
+```
+
+### Utiliser `NaN` comme clé
+
+{{jsxref("NaN")}} peut être utilisé comme une clé. Bien que `NaN` ne soit pas strictement égal à lui-même (`NaN !== NaN` est vérifié), on peut bâtir l'exemple suivant car on ne peut pas distinguer deux valeurs `NaN `:
+
+```js
+const myMap = new Map();
+myMap.set(NaN, "not a number");
+
+myMap.get(NaN); // "not a number"
+
+const otherNaN = Number("toto");
+myMap.get(otherNaN); // "not a number"
+```
+
+### Parcourir des objets `Maps` avec `for..of`
+
+Il est possible de parcourir les objets `Map `grâce à des boucles `for..of` :
+
+```js
+const myMap = new Map();
+myMap.set(0, "zéro");
+myMap.set(1, "un");
+for (const [key, value] of myMap) {
+  console.log(`${key} = ${value}`);
+}
+// On aura 2 lignes : la première avec "0 = zéro"
+// la seconde avec "1 = un"
+
+for (const key of myMap.keys()) {
+  console.log(key);
+}
+// On aura 2 lignes : la première avec "0"
+// et la seconde avec "1"
+
+for (const value of myMap.values()) {
+  console.log(valeur);
+}
+// On aura 2 lignes : la première avec "zéro"
+// et la seconde avec "un"
+
+for (const [key, value] of myMap.entries()) {
+  console.log(`${key} = ${value}`);
+}
+// On aura 2 lignes : la première avec "0 = zéro"
+// la seconde avec "1 = un"
+
+myMap.forEach(function(value, key) {
+  console.log(`${key} = ${value}`);
+});
+// On aura 2 lignes : la première avec "0 = zéro"
+// la seconde avec "1 = un"
+```
+
+### Relation avec les objets `Array`
+
+```js
+const keyValuePair = [["clé1", "valeur1"], ["clé2", "valeur2"]];
+
+// On utilise le constructeur Map
+// pour transformer un tableau de clés/valeurs
+// en un objet map
+const myMap = new Map(keyValuePair);
+
+myMap.get("clé1"); // renvoie "valeur1"
+
+// On utilise la fonction Array.from pour transformer
+// une map en un tableau de clés/valeurs
+console.log(Array.from(myMap)); // affichera la même chose que tableauCléValeur
+
+// On peut aussi l'utiliser pour n'extraire que les clés
+// ou les valeurs et créer le tableau associé
+console.log(Array.from(myMap.keys())); // affichera ["clé1", "clé2"]
+```
+
+### Cloner et fusionner des objets `Map`
+
+Il est possible de cloner des `Map` comme on clone des tableaux :
+
+```js
+const original = new Map([
+  [1, 'un']
+]);
+
+const clone = new Map(original);
+
+console.log(clone.get(1)); // un
+console.log(original === clone); // false. Utile pour une comparaison superficielle
+```
+
+Attention, la donnée contenue dans la `Map` n'est pas clonée.
+
+Il est également possible de fusionner deux `Map` en conservant le critère d'unicité sur les clés :
+
+```js
+const first = new Map([
+  [1, 'un'],
+  [2, 'deux'],
+  [3, 'trois'],
+]);
+
+const second = new Map([
+  [1, 'uno'],
+  [2, 'dos']
+]);
+
+// On fusionne les deux maps. C'est la "dernière" version
+// de la clé qui l'emporte.
+// L'opérateur de décomposition nous permet principalement ici
+// de convertir une map en un tableau
+const fusion = new Map([...first, ...second]);
+
+console.log(fusion.get(1)); // uno
+console.log(fusion.get(2)); // dos
+console.log(fusion.get(3)); // trois
+```
+
+Il est également possible de fusionner des objets `Map` avec des objets `Array` :
+
+```js
+const first = new Map([
+  [1, 'un'],
+  [2, 'deux'],
+  [3, 'trois'],
+]);
+
+const second = new Map([
+  [1, 'uno'],
+  [2, 'dos']
+]);
+
+// On peut fusionner des Maps avec un tableau
+// Là encore c'est le dernier exemplaire de la clé qui l'emporte
+const fusion = new Map([...first, ...second, [1, 'eins']]);
+
+console.log(fusion.get(1)); // eins
+console.log(fusion.get(2)); // dos
+console.log(fusion.get(3)); // trois
+```
+
+## Spécifications
+
+| Spécification                                                        | État                         | Commentaires         |
+| -------------------------------------------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName('ES2015', '#sec-map-objects', 'Map')}}     | {{Spec2('ES2015')}}     | Définition initiale. |
+| {{SpecName('ESDraft', '#sec-map-objects', 'Map')}} | {{Spec2('ESDraft')}} |                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Map")}}
+
+## Voir aussi
+
+- [Le bug sur Map et Set pour Mozilla](https://bugzilla.mozilla.org/show_bug.cgi?id=697479)
+- [La proposition ECMAScript Harmony](https://web.archive.org/web/20170105121945/http://wiki.ecmascript.org:80/doku.php?id=harmony:simple_maps_and_sets)
+- {{jsxref("Set")}}
+- {{jsxref("WeakMap")}}
+- {{jsxref("WeakSet")}}
diff --git a/files/fr/web/javascript/reference/global_objects/map/keys/index.html b/files/fr/web/javascript/reference/global_objects/map/keys/index.html
deleted file mode 100644
index 423cf8d7dd..0000000000
--- a/files/fr/web/javascript/reference/global_objects/map/keys/index.html
+++ /dev/null
@@ -1,75 +0,0 @@
----
-title: Map.prototype.keys()
-slug: Web/JavaScript/Reference/Global_Objects/Map/keys
-tags:
-  - ECMAScript 2015
-  - Iterator
-  - JavaScript
-  - Map
-  - Méthode
-  - Prototype
-translation_of: Web/JavaScript/Reference/Global_Objects/Map/keys
-original_slug: Web/JavaScript/Reference/Global_Objects/Map/keys
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <code><strong>keys()</strong></code> renvoie un objet <code><a href="/fr/docs/Web/JavaScript/Guide/iterateurs_et_generateurs">Iterator</a></code> qui contient les clés de chaque élément de l'objet <code>Map</code>, dans leur ordre d'insertion.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/map-prototype-keys.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><em>maMap</em>.keys()</pre>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Un nouvel objet <code>Iterator</code> {{jsxref("Map")}}.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Utiliser_keys()">Utiliser <code>keys()</code></h3>
-
-<pre class="brush:js">var maMap = new Map();
-maMap.set("0", "toto");
-maMap.set(1, "truc");
-maMap.set({}, "bidule");
-
-var mapIter = maMap.keys();
-
-console.log(mapIter.next().value); // "0"
-console.log(mapIter.next().value); // 1
-console.log(mapIter.next().value); // Object
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-map.prototype.keys', 'Map.prototype.keys')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-map.prototype.keys', 'Map.prototype.keys')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Map.keys")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Map.prototype.entries()")}}</li>
- <li>{{jsxref("Map.prototype.values()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/map/keys/index.md b/files/fr/web/javascript/reference/global_objects/map/keys/index.md
new file mode 100644
index 0000000000..94943f763b
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/map/keys/index.md
@@ -0,0 +1,59 @@
+---
+title: Map.prototype.keys()
+slug: Web/JavaScript/Reference/Global_Objects/Map/keys
+tags:
+  - ECMAScript 2015
+  - Iterator
+  - JavaScript
+  - Map
+  - Méthode
+  - Prototype
+translation_of: Web/JavaScript/Reference/Global_Objects/Map/keys
+original_slug: Web/JavaScript/Reference/Global_Objects/Map/keys
+---
+{{JSRef}}
+
+La méthode **`keys()`** renvoie un objet [`Iterator`](/fr/docs/Web/JavaScript/Guide/iterateurs_et_generateurs) qui contient les clés de chaque élément de l'objet `Map`, dans leur ordre d'insertion.
+
+{{EmbedInteractiveExample("pages/js/map-prototype-keys.html")}}
+
+## Syntaxe
+
+    maMap.keys()
+
+### Valeur de retour
+
+Un nouvel objet `Iterator` {{jsxref("Map")}}.
+
+## Exemples
+
+### Utiliser `keys()`
+
+```js
+var maMap = new Map();
+maMap.set("0", "toto");
+maMap.set(1, "truc");
+maMap.set({}, "bidule");
+
+var mapIter = maMap.keys();
+
+console.log(mapIter.next().value); // "0"
+console.log(mapIter.next().value); // 1
+console.log(mapIter.next().value); // Object
+```
+
+## Spécifications
+
+| Spécification                                                                                    | État                         | Commentaires         |
+| ------------------------------------------------------------------------------------------------ | ---------------------------- | -------------------- |
+| {{SpecName('ES2015', '#sec-map.prototype.keys', 'Map.prototype.keys')}} | {{Spec2('ES2015')}}     | Définition initiale. |
+| {{SpecName('ESDraft', '#sec-map.prototype.keys', 'Map.prototype.keys')}} | {{Spec2('ESDraft')}} |                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Map.keys")}}
+
+## Voir aussi
+
+- {{jsxref("Map.prototype.entries()")}}
+- {{jsxref("Map.prototype.values()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/map/set/index.html b/files/fr/web/javascript/reference/global_objects/map/set/index.html
deleted file mode 100644
index b0e695aed3..0000000000
--- a/files/fr/web/javascript/reference/global_objects/map/set/index.html
+++ /dev/null
@@ -1,93 +0,0 @@
----
-title: Map.prototype.set()
-slug: Web/JavaScript/Reference/Global_Objects/Map/set
-tags:
-  - ECMAScript 2015
-  - JavaScript
-  - Map
-  - Méthode
-  - Prototype
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Map/set
-original_slug: Web/JavaScript/Reference/Global_Objects/Map/set
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <code><strong>set()</strong></code> ajoute un nouvel élément avec une <code>clé</code> et une <code>valeur</code> données à un objet <code>Map</code>.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/map-prototype-set.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><em>maMap</em>.set(clé, valeur);</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>clé</code></dt>
- <dd>Ce paramètre représente la clé de l'élément à ajouter à l'objet <code>Map</code>.</dd>
- <dt><code>valeur</code></dt>
- <dd>Ce paramètre représente la valeur de l'élément à ajouter à l'objet <code>Map</code>.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>L'objet <code>Map</code> courant (auquel l'élément a été ajouté).</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Utiliser_la_méthode_set()">Utiliser la méthode <code>set()</code></h3>
-
-<pre class="brush: js">var maMap = new Map();
-
-// On ajoute de nouveaux éléments à l'objet map
-maMap.set("truc", "toto");
-maMap.set(1, "bidule");
-
-// On met à jour un élément
-maMap.set("truc", "fuuu");
-</pre>
-
-<h3 id="Utiliser_la_méthode_set()_avec_un_enchaînement">Utiliser la méthode <code>set()</code> avec un enchaînement</h3>
-
-<p>La méthode <code>set()</code> renvoie le même objet <code>Map</code> et on peut donc la « chaîner » pour des opérations successives :</p>
-
-<pre class="brush: js">// On ajoute de nouveaux éléments
-// en enchaînant les appels à set()
-maMap.set('truc', 'toto')
-     .set(1, 'tototruc')
-     .set(2, 'bidule');</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-map.prototype.set', 'Map.prototype.set')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-map.prototype.set', 'Map.prototype.set')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Map.set")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Map")}}</li>
- <li>{{jsxref("Map.prototype.get()")}}</li>
- <li>{{jsxref("Map.prototype.has()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/map/set/index.md b/files/fr/web/javascript/reference/global_objects/map/set/index.md
new file mode 100644
index 0000000000..b25fc7c250
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/map/set/index.md
@@ -0,0 +1,77 @@
+---
+title: Map.prototype.set()
+slug: Web/JavaScript/Reference/Global_Objects/Map/set
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Map
+  - Méthode
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Map/set
+original_slug: Web/JavaScript/Reference/Global_Objects/Map/set
+---
+{{JSRef}}
+
+La méthode **`set()`** ajoute un nouvel élément avec une `clé` et une `valeur` données à un objet `Map`.
+
+{{EmbedInteractiveExample("pages/js/map-prototype-set.html")}}
+
+## Syntaxe
+
+    maMap.set(clé, valeur);
+
+### Paramètres
+
+- `clé`
+  - : Ce paramètre représente la clé de l'élément à ajouter à l'objet `Map`.
+- `valeur`
+  - : Ce paramètre représente la valeur de l'élément à ajouter à l'objet `Map`.
+
+### Valeur de retour
+
+L'objet `Map` courant (auquel l'élément a été ajouté).
+
+## Exemples
+
+### Utiliser la méthode `set()`
+
+```js
+var maMap = new Map();
+
+// On ajoute de nouveaux éléments à l'objet map
+maMap.set("truc", "toto");
+maMap.set(1, "bidule");
+
+// On met à jour un élément
+maMap.set("truc", "fuuu");
+```
+
+### Utiliser la méthode `set()` avec un enchaînement
+
+La méthode `set()` renvoie le même objet `Map` et on peut donc la « chaîner » pour des opérations successives :
+
+```js
+// On ajoute de nouveaux éléments
+// en enchaînant les appels à set()
+maMap.set('truc', 'toto')
+     .set(1, 'tototruc')
+     .set(2, 'bidule');
+```
+
+## Spécifications
+
+| Spécification                                                                                | État                         | Commentaires         |
+| -------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName('ES2015', '#sec-map.prototype.set', 'Map.prototype.set')}} | {{Spec2('ES2015')}}     | Définition initiale. |
+| {{SpecName('ESDraft', '#sec-map.prototype.set', 'Map.prototype.set')}} | {{Spec2('ESDraft')}} |                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Map.set")}}
+
+## Voir aussi
+
+- {{jsxref("Map")}}
+- {{jsxref("Map.prototype.get()")}}
+- {{jsxref("Map.prototype.has()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/map/size/index.html b/files/fr/web/javascript/reference/global_objects/map/size/index.html
deleted file mode 100644
index 0473610825..0000000000
--- a/files/fr/web/javascript/reference/global_objects/map/size/index.html
+++ /dev/null
@@ -1,65 +0,0 @@
----
-title: Map.prototype.size
-slug: Web/JavaScript/Reference/Global_Objects/Map/size
-tags:
-  - ECMAScript 2015
-  - JavaScript
-  - Map
-  - Propriété
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Map/size
-original_slug: Web/JavaScript/Reference/Global_Objects/Map/size
----
-<div>{{JSRef}}</div>
-
-<p>L'accesseur <code><strong>size</strong></code> est une propriété renvoyant le nombre d'éléments d'un objet {{jsxref("Map")}}.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/map-prototype-size.html")}}</div>
-
-<h2 id="Description">Description</h2>
-
-<p>La valeur de <code>size</code> est un entier représentant le nombre d'entrées d'un objet <code>Map</code>. Le mutateur correspond à cette propriété est {{jsxref("undefined")}}, on ne peut pas donc pas modifier cette propriété.</p>
-
-<h2 id="Exemple">Exemple</h2>
-
-<h3 id="Utiliser_size">Utiliser <code>size</code></h3>
-
-<pre class="brush:js">var maMap = new Map();
-maMap.set("a", "alpha");
-maMap.set("b", "beta");
-maMap.set("g", "gamma");
-
-maMap.size // 3
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-get-map.prototype.size', 'Map.prototype.size')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-get-map.prototype.size', 'Map.prototype.size')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibliité_des_navigateurs">Compatibliité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Map.size")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Map")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/map/size/index.md b/files/fr/web/javascript/reference/global_objects/map/size/index.md
new file mode 100644
index 0000000000..898542a176
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/map/size/index.md
@@ -0,0 +1,49 @@
+---
+title: Map.prototype.size
+slug: Web/JavaScript/Reference/Global_Objects/Map/size
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Map
+  - Propriété
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Map/size
+original_slug: Web/JavaScript/Reference/Global_Objects/Map/size
+---
+{{JSRef}}
+
+L'accesseur **`size`** est une propriété renvoyant le nombre d'éléments d'un objet {{jsxref("Map")}}.
+
+{{EmbedInteractiveExample("pages/js/map-prototype-size.html")}}
+
+## Description
+
+La valeur de `size` est un entier représentant le nombre d'entrées d'un objet `Map`. Le mutateur correspond à cette propriété est {{jsxref("undefined")}}, on ne peut pas donc pas modifier cette propriété.
+
+## Exemple
+
+### Utiliser `size`
+
+```js
+var maMap = new Map();
+maMap.set("a", "alpha");
+maMap.set("b", "beta");
+maMap.set("g", "gamma");
+
+maMap.size // 3
+```
+
+## Spécifications
+
+| Spécification                                                                                        | État                         | Commentaires         |
+| ---------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName('ES2015', '#sec-get-map.prototype.size', 'Map.prototype.size')}} | {{Spec2('ES2015')}}     | Définition initiale. |
+| {{SpecName('ESDraft', '#sec-get-map.prototype.size', 'Map.prototype.size')}} | {{Spec2('ESDraft')}} |                      |
+
+## Compatibliité des navigateurs
+
+{{Compat("javascript.builtins.Map.size")}}
+
+## Voir aussi
+
+- {{jsxref("Map")}}
diff --git a/files/fr/web/javascript/reference/global_objects/map/values/index.html b/files/fr/web/javascript/reference/global_objects/map/values/index.html
deleted file mode 100644
index 8071caa2d0..0000000000
--- a/files/fr/web/javascript/reference/global_objects/map/values/index.html
+++ /dev/null
@@ -1,75 +0,0 @@
----
-title: Map.prototype.values()
-slug: Web/JavaScript/Reference/Global_Objects/Map/values
-tags:
-  - ECMAScript 2015
-  - Iterator
-  - JavaScript
-  - Map
-  - Méthode
-  - Prototype
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Map/values
-original_slug: Web/JavaScript/Reference/Global_Objects/Map/values
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <code><strong>values()</strong></code> renvoie un objet <code><a href="/fr/docs/Web/JavaScript/Guide/iterateurs_et_generateurs">Iterator</a></code> qui contient les valeurs de chacun des éléments contenu dans l'objet <code>Map</code> donné, dans leur ordre d'insertion.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/map-prototype-values.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><em>maMap</em>.values()</pre>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Un nouvel objet <code>Iterator</code> {{jsxref("Map")}}.</p>
-
-<h2 id="Exemple">Exemple</h2>
-
-<h3 id="Utiliser_values()">Utiliser <code>values()</code></h3>
-
-<pre class="brush:js">var maMap = new Map();
-maMap.set("0", "toto");
-maMap.set(1, "truc");
-maMap.set({}, "licorne");
-
-var mapIter = maMap.values();
-
-console.log(mapIter.next().value); // "toto"
-console.log(mapIter.next().value); // "truc"
-console.log(mapIter.next().value); // "licorne"</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-map.prototype.values', 'Map.prototype.values')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-map.prototype.values', 'Map.prototype.values')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Map.values")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Map.prototype.entries()")}}</li>
- <li>{{jsxref("Map.prototype.keys()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/map/values/index.md b/files/fr/web/javascript/reference/global_objects/map/values/index.md
new file mode 100644
index 0000000000..07c000c242
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/map/values/index.md
@@ -0,0 +1,60 @@
+---
+title: Map.prototype.values()
+slug: Web/JavaScript/Reference/Global_Objects/Map/values
+tags:
+  - ECMAScript 2015
+  - Iterator
+  - JavaScript
+  - Map
+  - Méthode
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Map/values
+original_slug: Web/JavaScript/Reference/Global_Objects/Map/values
+---
+{{JSRef}}
+
+La méthode **`values()`** renvoie un objet [`Iterator`](/fr/docs/Web/JavaScript/Guide/iterateurs_et_generateurs) qui contient les valeurs de chacun des éléments contenu dans l'objet `Map` donné, dans leur ordre d'insertion.
+
+{{EmbedInteractiveExample("pages/js/map-prototype-values.html")}}
+
+## Syntaxe
+
+    maMap.values()
+
+### Valeur de retour
+
+Un nouvel objet `Iterator` {{jsxref("Map")}}.
+
+## Exemple
+
+### Utiliser `values()`
+
+```js
+var maMap = new Map();
+maMap.set("0", "toto");
+maMap.set(1, "truc");
+maMap.set({}, "licorne");
+
+var mapIter = maMap.values();
+
+console.log(mapIter.next().value); // "toto"
+console.log(mapIter.next().value); // "truc"
+console.log(mapIter.next().value); // "licorne"
+```
+
+## Spécifications
+
+| Spécification                                                                                        | État                         | Commentaires         |
+| ---------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName('ES2015', '#sec-map.prototype.values', 'Map.prototype.values')}} | {{Spec2('ES2015')}}     | Définition initiale. |
+| {{SpecName('ESDraft', '#sec-map.prototype.values', 'Map.prototype.values')}} | {{Spec2('ESDraft')}} |                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Map.values")}}
+
+## Voir aussi
+
+- {{jsxref("Map.prototype.entries()")}}
+- {{jsxref("Map.prototype.keys()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/math/abs/index.html b/files/fr/web/javascript/reference/global_objects/math/abs/index.html
deleted file mode 100644
index c632d426db..0000000000
--- a/files/fr/web/javascript/reference/global_objects/math/abs/index.html
+++ /dev/null
@@ -1,100 +0,0 @@
----
-title: Math.abs()
-slug: Web/JavaScript/Reference/Global_Objects/Math/abs
-tags:
-  - JavaScript
-  - Math
-  - Méthode
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Math/abs
-original_slug: Web/JavaScript/Reference/Objets_globaux/Math/abs
----
-<div>{{JSRef}}</div>
-
-<p>La fonction <code><strong>Math.abs()</strong></code> retourne la valeur absolue d'un nombre, c'est-à-dire</p>
-
-<p><math><semantics><mrow><mstyle mathvariant="monospace"><mrow><mo lspace="0em" rspace="thinmathspace">Math.abs</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo></mrow></mstyle><mo>=</mo><mrow><mo stretchy="false">|</mo><mi>x</mi><mo stretchy="false">|</mo></mrow><mo>=</mo><mrow><mo>{</mo><mtable columnalign="left left"><mtr><mtd><mi>x</mi></mtd><mtd><mtext>si</mtext><mspace width="1em"></mspace><mi>x</mi><mo>≥</mo><mn>0</mn></mtd></mtr><mtr><mtd><mo>-</mo><mi>x</mi></mtd><mtd><mtext>si</mtext><mspace width="1em"></mspace><mi>x</mi><mo>&lt;</mo><mn>0</mn></mtd></mtr></mtable></mrow></mrow><annotation encoding="TeX">{\mathtt{\operatorname{Math.abs}(x)}} = {|x|} = \begin{cases} x &amp; \text{si} \quad x \geq 0 \\ -x &amp; \text{si} \quad x &lt; 0 \end{cases} </annotation></semantics></math></p>
-
-<div>{{EmbedInteractiveExample("pages/js/math-abs.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">Math.abs(<em>x</em>);</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>x</code></dt>
- <dd>Un nombre.</dd>
-</dl>
-
-<h3 id="Valeur_absolue">Valeur absolue</h3>
-
-<p>La valeur absolue du nombre passé en argument.</p>
-
-<h2 id="Description">Description</h2>
-
-<p><code>abs</code> est une méthode statique de l'objet <code>Math</code> et doit toujours être utilisée avec la syntaxe <code>Math.abs()</code>.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Utiliser_Math.abs()">Utiliser <code>Math.abs()</code></h3>
-
-<p>Si la méthode est utilisée avec une chaîne de caractères non numérique, avec un tableau à plus d'un élément, sans paramètre ou avec {{jsxref("undefined")}}, la valeur retournée sera {{jsxref("NaN")}}. Si elle est utilisée avec {{jsxref("null")}}, la fonction renverra 0.</p>
-
-<pre class="brush:js">Math.abs('-1');     // 1
-Math.abs(-2);       // 2
-Math.abs(null);     // 0
-Math.abs('');       // 0
-Math.abs([]);       // 0
-Math.abs([2]);      // 2
-Math.abs([1,2]);    // NaN
-Math.abs({});       // NaN
-Math.abs("string"); // NaN
-Math.abs();         // NaN</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES1')}}</td>
-   <td>{{Spec2('ES1')}}</td>
-   <td>Définition initiale. Implémentée avec JavaScript 1.0.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-15.8.2.1', 'Math.abs')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-math.abs', 'Math.abs')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-math.abs', 'Math.abs')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Math.abs")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Math.ceil()")}}</li>
- <li>{{jsxref("Math.floor()")}}</li>
- <li>{{jsxref("Math.round()")}}</li>
- <li>{{jsxref("Math.sign()")}}</li>
- <li>{{jsxref("Math.trunc()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/math/abs/index.md b/files/fr/web/javascript/reference/global_objects/math/abs/index.md
new file mode 100644
index 0000000000..6a1a7d758d
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/math/abs/index.md
@@ -0,0 +1,75 @@
+---
+title: Math.abs()
+slug: Web/JavaScript/Reference/Global_Objects/Math/abs
+tags:
+  - JavaScript
+  - Math
+  - Méthode
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/abs
+original_slug: Web/JavaScript/Reference/Objets_globaux/Math/abs
+---
+{{JSRef}}
+
+La fonction **`Math.abs()`** retourne la valeur absolue d'un nombre, c'est-à-dire
+
+<math><semantics><mrow><mstyle mathvariant="monospace"><mrow><mo lspace="0em" rspace="thinmathspace">Math.abs</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo></mrow></mstyle><mo>=</mo><mrow><mo stretchy="false">|</mo><mi>x</mi><mo stretchy="false">|</mo></mrow><mo>=</mo><mrow><mo>{</mo><mtable columnalign="left left"><mtr><mtd><mi>x</mi></mtd><mtd><mtext>si</mtext><mspace width="1em"></mspace><mi>x</mi><mo>≥</mo><mn>0</mn></mtd></mtr><mtr><mtd><mo>-</mo><mi>x</mi></mtd><mtd><mtext>si</mtext><mspace width="1em"></mspace><mi>x</mi><mo>&#x3C;</mo><mn>0</mn></mtd></mtr></mtable></mrow></mrow><annotation encoding="TeX">{\mathtt{\operatorname{Math.abs}(x)}} = {|x|} = \begin{cases} x &#x26; \text{si} \quad x \geq 0 \\ -x &#x26; \text{si} \quad x &#x3C; 0 \end{cases}</annotation></semantics></math>
+
+{{EmbedInteractiveExample("pages/js/math-abs.html")}}
+
+## Syntaxe
+
+    Math.abs(x);
+
+### Paramètres
+
+- `x`
+  - : Un nombre.
+
+### Valeur absolue
+
+La valeur absolue du nombre passé en argument.
+
+## Description
+
+`abs` est une méthode statique de l'objet `Math` et doit toujours être utilisée avec la syntaxe `Math.abs()`.
+
+## Exemples
+
+### Utiliser `Math.abs()`
+
+Si la méthode est utilisée avec une chaîne de caractères non numérique, avec un tableau à plus d'un élément, sans paramètre ou avec {{jsxref("undefined")}}, la valeur retournée sera {{jsxref("NaN")}}. Si elle est utilisée avec {{jsxref("null")}}, la fonction renverra 0.
+
+```js
+Math.abs('-1');     // 1
+Math.abs(-2);       // 2
+Math.abs(null);     // 0
+Math.abs('');       // 0
+Math.abs([]);       // 0
+Math.abs([2]);      // 2
+Math.abs([1,2]);    // NaN
+Math.abs({});       // NaN
+Math.abs("string"); // NaN
+Math.abs();         // NaN
+```
+
+## Spécifications
+
+| Spécification                                                        | État                         | Commentaires                                          |
+| -------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- |
+| {{SpecName('ES1')}}                                             | {{Spec2('ES1')}}         | Définition initiale. Implémentée avec JavaScript 1.0. |
+| {{SpecName('ES5.1', '#sec-15.8.2.1', 'Math.abs')}} | {{Spec2('ES5.1')}}     |                                                       |
+| {{SpecName('ES6', '#sec-math.abs', 'Math.abs')}}     | {{Spec2('ES6')}}         |                                                       |
+| {{SpecName('ESDraft', '#sec-math.abs', 'Math.abs')}} | {{Spec2('ESDraft')}} |                                                       |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Math.abs")}}
+
+## Voir aussi
+
+- {{jsxref("Math.ceil()")}}
+- {{jsxref("Math.floor()")}}
+- {{jsxref("Math.round()")}}
+- {{jsxref("Math.sign()")}}
+- {{jsxref("Math.trunc()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/math/acos/index.html b/files/fr/web/javascript/reference/global_objects/math/acos/index.html
deleted file mode 100644
index 3a2f6fa132..0000000000
--- a/files/fr/web/javascript/reference/global_objects/math/acos/index.html
+++ /dev/null
@@ -1,100 +0,0 @@
----
-title: Math.acos()
-slug: Web/JavaScript/Reference/Global_Objects/Math/acos
-tags:
-  - JavaScript
-  - Math
-  - Méthode
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Math/acos
-original_slug: Web/JavaScript/Reference/Objets_globaux/Math/acos
----
-<div>{{JSRef}}</div>
-
-<p>La fonction <code><strong>Math.acos()</strong></code> renvoie l'arc cosinus d'une valeur exprimée en radians. Cela est défini par :</p>
-
-<p><math><semantics><mrow><mo>∀</mo><mi>x</mi><mo>∊</mo><mo stretchy="false">[</mo><mrow><mo>-</mo><mn>1</mn></mrow><mo>;</mo><mn>1</mn><mo stretchy="false">]</mo><mo>,</mo><mspace width="thickmathspace"></mspace><mstyle mathvariant="monospace"><mrow><mo lspace="0em" rspace="thinmathspace">Math.acos</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo></mrow></mstyle><mo>=</mo><mo lspace="0em" rspace="0em">arccos</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo><mo>=</mo><mtext> le seul  </mtext><mi>y</mi><mo>∊</mo><mo stretchy="false">[</mo><mn>0</mn><mo>;</mo><mi>π</mi><mo stretchy="false">]</mo><mspace width="thinmathspace"></mspace><mtext>tel que</mtext><mspace width="thickmathspace"></mspace><mo lspace="0em" rspace="0em">cos</mo><mo stretchy="false">(</mo><mi>y</mi><mo stretchy="false">)</mo><mo>=</mo><mi>x</mi></mrow><annotation encoding="TeX">\forall x \in [{-1};1],\;\mathtt{\operatorname{Math.acos}(x)} = \arccos(x) = \text{ the unique } \; y \in [0; \pi] \, \text{such that} \; \cos(y) = x</annotation></semantics></math></p>
-
-<div>{{EmbedInteractiveExample("pages/js/math-acos.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">Math.acos(<em>x</em>) </pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>x</code></dt>
- <dd>Un nombre (représentant un angle exprimé en radians).</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>L'arc cosinus du nombre passé en argument si celui est compris entre -1 et 1. La méthode renvoie {{jsxref("NaN")}} sinon.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>La méthode <code>acos</code> renvoie une valeur numérique comprise entre 0 et Pi pour x compris entre -1 et 1. Si la valeur de <code>x</code> est hors de cet intervalle, la méthode renverra {{jsxref("NaN")}}.</p>
-
-<p><code>acos</code> est une méhode statique de <code>Math</code> et doit toujours être utilisée avec la syntaxe <code>Math.acos()</code>, elle ne doit pas être appelée depuis un autre objet qui aurait été créé (<code>Math</code> n'est pas un constructeur).</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Utiliser_Math.acos()">Utiliser <code>Math.acos()</code></h3>
-
-<pre class="brush:js">Math.acos(-2);  // NaN
-Math.acos(-1);  // 3.141592653589793
-Math.acos(0);   // 1.5707963267948966
-Math.acos(0.5); // 1.0471975511965979
-Math.acos(1);   // 0
-Math.acos(2);   // NaN
-</pre>
-
-<p>Pour les valeurs (strictement) inférieures à -1 ou supérieures à 1, <code>Math.acos</code> renvoie <code>NaN</code>.</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES1')}}</td>
-   <td>{{Spec2('ES1')}}</td>
-   <td>Définition initiale. Implémentée avec JavaScript 1.0.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-15.8.2.2', 'Math.acos')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-math.acos', 'Math.acos')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-math.acos', 'Math.acos')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Math.acos")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Math.asin()")}}</li>
- <li>{{jsxref("Math.atan()")}}</li>
- <li>{{jsxref("Math.atan2()")}}</li>
- <li>{{jsxref("Math.cos()")}}</li>
- <li>{{jsxref("Math.sin()")}}</li>
- <li>{{jsxref("Math.tan()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/math/acos/index.md b/files/fr/web/javascript/reference/global_objects/math/acos/index.md
new file mode 100644
index 0000000000..2d120f115d
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/math/acos/index.md
@@ -0,0 +1,74 @@
+---
+title: Math.acos()
+slug: Web/JavaScript/Reference/Global_Objects/Math/acos
+tags:
+  - JavaScript
+  - Math
+  - Méthode
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/acos
+original_slug: Web/JavaScript/Reference/Objets_globaux/Math/acos
+---
+{{JSRef}}
+
+La fonction **`Math.acos()`** renvoie l'arc cosinus d'une valeur exprimée en radians. Cela est défini par :
+
+<math><semantics><mrow><mo>∀</mo><mi>x</mi><mo>∊</mo><mo stretchy="false">[</mo><mrow><mo>-</mo><mn>1</mn></mrow><mo>;</mo><mn>1</mn><mo stretchy="false">]</mo><mo>,</mo><mspace width="thickmathspace"></mspace><mstyle mathvariant="monospace"><mrow><mo lspace="0em" rspace="thinmathspace">Math.acos</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo></mrow></mstyle><mo>=</mo><mo lspace="0em" rspace="0em">arccos</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo><mo>=</mo><mtext> le seul  </mtext><mi>y</mi><mo>∊</mo><mo stretchy="false">[</mo><mn>0</mn><mo>;</mo><mi>π</mi><mo stretchy="false">]</mo><mspace width="thinmathspace"></mspace><mtext>tel que</mtext><mspace width="thickmathspace"></mspace><mo lspace="0em" rspace="0em">cos</mo><mo stretchy="false">(</mo><mi>y</mi><mo stretchy="false">)</mo><mo>=</mo><mi>x</mi></mrow><annotation encoding="TeX">\forall x \in [{-1};1],\;\mathtt{\operatorname{Math.acos}(x)} = \arccos(x) = \text{ the unique } \; y \in [0; \pi] \, \text{such that} \; \cos(y) = x</annotation></semantics></math>
+
+{{EmbedInteractiveExample("pages/js/math-acos.html")}}
+
+## Syntaxe
+
+    Math.acos(x)
+
+### Paramètres
+
+- `x`
+  - : Un nombre (représentant un angle exprimé en radians).
+
+### Valeur de retour
+
+L'arc cosinus du nombre passé en argument si celui est compris entre -1 et 1. La méthode renvoie {{jsxref("NaN")}} sinon.
+
+## Description
+
+La méthode `acos` renvoie une valeur numérique comprise entre 0 et Pi pour x compris entre -1 et 1. Si la valeur de `x` est hors de cet intervalle, la méthode renverra {{jsxref("NaN")}}.
+
+`acos` est une méhode statique de `Math` et doit toujours être utilisée avec la syntaxe `Math.acos()`, elle ne doit pas être appelée depuis un autre objet qui aurait été créé (`Math` n'est pas un constructeur).
+
+## Exemples
+
+### Utiliser `Math.acos()`
+
+```js
+Math.acos(-2);  // NaN
+Math.acos(-1);  // 3.141592653589793
+Math.acos(0);   // 1.5707963267948966
+Math.acos(0.5); // 1.0471975511965979
+Math.acos(1);   // 0
+Math.acos(2);   // NaN
+```
+
+Pour les valeurs (strictement) inférieures à -1 ou supérieures à 1, `Math.acos` renvoie `NaN`.
+
+## Spécifications
+
+| Spécification                                                            | Statut                       | Commentaires                                          |
+| ------------------------------------------------------------------------ | ---------------------------- | ----------------------------------------------------- |
+| {{SpecName('ES1')}}                                                 | {{Spec2('ES1')}}         | Définition initiale. Implémentée avec JavaScript 1.0. |
+| {{SpecName('ES5.1', '#sec-15.8.2.2', 'Math.acos')}}     | {{Spec2('ES5.1')}}     |                                                       |
+| {{SpecName('ES6', '#sec-math.acos', 'Math.acos')}}     | {{Spec2('ES6')}}         |                                                       |
+| {{SpecName('ESDraft', '#sec-math.acos', 'Math.acos')}} | {{Spec2('ESDraft')}} |                                                       |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Math.acos")}}
+
+## Voir aussi
+
+- {{jsxref("Math.asin()")}}
+- {{jsxref("Math.atan()")}}
+- {{jsxref("Math.atan2()")}}
+- {{jsxref("Math.cos()")}}
+- {{jsxref("Math.sin()")}}
+- {{jsxref("Math.tan()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/math/acosh/index.html b/files/fr/web/javascript/reference/global_objects/math/acosh/index.html
deleted file mode 100644
index 26a4b11b80..0000000000
--- a/files/fr/web/javascript/reference/global_objects/math/acosh/index.html
+++ /dev/null
@@ -1,97 +0,0 @@
----
-title: Math.acosh()
-slug: Web/JavaScript/Reference/Global_Objects/Math/acosh
-tags:
-  - JavaScript
-  - Math
-  - Méthode
-  - Reference
-  - polyfill
-translation_of: Web/JavaScript/Reference/Global_Objects/Math/acosh
-original_slug: Web/JavaScript/Reference/Objets_globaux/Math/acosh
----
-<div>{{JSRef}}</div>
-
-<p>La fonction <code><strong>Math.acosh()</strong></code> renvoie l'arc cosinus hyperbolique d'un nombre.Elle est définie par :</p>
-
-<p><math display="block"><semantics><mrow><mo>∀</mo><mi>x</mi><mo>≥</mo><mn>1</mn><mo>,</mo><mstyle mathvariant="monospace"><mrow><mo lspace="0em" rspace="thinmathspace">Math.acosh</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo></mrow></mstyle><mo>=</mo><mo lspace="0em" rspace="thinmathspace">arcosh</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo><mo>=</mo><mtext> l'unique </mtext><mspace width="thickmathspace"></mspace><mi>y</mi><mo>≥</mo><mn>0</mn><mspace width="thickmathspace"></mspace><mtext>tel que</mtext><mspace width="thickmathspace"></mspace><mo lspace="0em" rspace="0em">cosh</mo><mo stretchy="false">(</mo><mi>y</mi><mo stretchy="false">)</mo><mo>=</mo><mi>x</mi></mrow><annotation encoding="TeX">\forall x \geq 1, \mathtt{\operatorname{Math.acosh}(x)} = \operatorname{arcosh}(x) = \text{ the unique } \; y \geq 0 \; \text{such that} \; \cosh(y) = x</annotation></semantics></math></p>
-
-<div>{{EmbedInteractiveExample("pages/js/math-acosh.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">Math.acosh(<var>x</var>)</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>x</code></dt>
- <dd>Un nombre.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>L'arc cosinus hyperbolique du nombre en argument. Si le nombre est inférieur à 1, la valeur renvoyée sera {{jsxref("NaN")}}.</p>
-
-<h2 id="Description">Description</h2>
-
-<p><code>acos</code>h étant une méthode statique de <code>Math</code>, il faut l'utiliser avec <code>Math.acosh()</code>, plutôt qu'en faisant appel à une méthode d'un autre objet créé (<code>Math</code> n'est pas un constructeur).</p>
-
-<h2 id="Exemple">Exemple</h2>
-
-<h3 id="Utiliser_Math.acosh()">Utiliser <code>Math.acosh()</code></h3>
-
-<pre class="brush:js">Math.acosh(-1);  // NaN
-Math.acosh(0);   // NaN
-Math.acosh(0.5); // NaN
-Math.acosh(1);   // 0
-Math.acosh(2);   // 1.3169578969248166</pre>
-
-<p>Pour les valeurs strictement inférieures à 1 <code>Math.acosh</code> renvoie {{jsxref("NaN")}}.</p>
-
-<h2 id="Prothèse_d'émulation_(polyfill)">Prothèse d'émulation (<em>polyfill</em>)</h2>
-
-<p>Pour tout <math><semantics><mrow><mi>x</mi><mo>≥</mo><mn>1</mn></mrow><annotation encoding="TeX">x \geq 1</annotation></semantics></math>, <math><semantics><mrow><mo lspace="0em" rspace="thinmathspace">arcosh</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo><mo>=</mo><mo lspace="0em" rspace="0em">ln</mo><mrow><mo>(</mo><mrow><mi>x</mi><mo>+</mo><msqrt><mrow><msup><mi>x</mi><mn>2</mn></msup><mo>-</mo><mn>1</mn></mrow></msqrt></mrow><mo>)</mo></mrow></mrow><annotation encoding="TeX">\operatorname {arcosh} (x) = \ln \left(x + \sqrt{x^{2} - 1} \right)</annotation></semantics></math>, on peut donc émuler cette fonction avec le code suivant :</p>
-
-<pre class="brush: js">function acosh(x) {
-  return Math.log(x + Math.sqrt(x * x - 1));
-}
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-math.acosh', 'Math.acosh')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td>Définition initiale</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-math.acosh', 'Math.acosh')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Math.acosh")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Math.asinh()")}}</li>
- <li>{{jsxref("Math.atanh()")}}</li>
- <li>{{jsxref("Math.cosh()")}}</li>
- <li>{{jsxref("Math.sinh()")}}</li>
- <li>{{jsxref("Math.tanh()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/math/acosh/index.md b/files/fr/web/javascript/reference/global_objects/math/acosh/index.md
new file mode 100644
index 0000000000..cb4ff0b1c1
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/math/acosh/index.md
@@ -0,0 +1,79 @@
+---
+title: Math.acosh()
+slug: Web/JavaScript/Reference/Global_Objects/Math/acosh
+tags:
+  - JavaScript
+  - Math
+  - Méthode
+  - Reference
+  - polyfill
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/acosh
+original_slug: Web/JavaScript/Reference/Objets_globaux/Math/acosh
+---
+{{JSRef}}
+
+La fonction **`Math.acosh()`** renvoie l'arc cosinus hyperbolique d'un nombre.Elle est définie par :
+
+<math display="block"><semantics><mrow><mo>∀</mo><mi>x</mi><mo>≥</mo><mn>1</mn><mo>,</mo><mstyle mathvariant="monospace"><mrow><mo lspace="0em" rspace="thinmathspace">Math.acosh</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo></mrow></mstyle><mo>=</mo><mo lspace="0em" rspace="thinmathspace">arcosh</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo><mo>=</mo><mtext> l'unique </mtext><mspace width="thickmathspace"></mspace><mi>y</mi><mo>≥</mo><mn>0</mn><mspace width="thickmathspace"></mspace><mtext>tel que</mtext><mspace width="thickmathspace"></mspace><mo lspace="0em" rspace="0em">cosh</mo><mo stretchy="false">(</mo><mi>y</mi><mo stretchy="false">)</mo><mo>=</mo><mi>x</mi></mrow><annotation encoding="TeX">\forall x \geq 1, \mathtt{\operatorname{Math.acosh}(x)} = \operatorname{arcosh}(x) = \text{ the unique } \; y \geq 0 \; \text{such that} \; \cosh(y) = x</annotation></semantics></math>
+
+{{EmbedInteractiveExample("pages/js/math-acosh.html")}}
+
+## Syntaxe
+
+    Math.acosh(x)
+
+### Paramètres
+
+- `x`
+  - : Un nombre.
+
+### Valeur de retour
+
+L'arc cosinus hyperbolique du nombre en argument. Si le nombre est inférieur à 1, la valeur renvoyée sera {{jsxref("NaN")}}.
+
+## Description
+
+`acos`h étant une méthode statique de `Math`, il faut l'utiliser avec `Math.acosh()`, plutôt qu'en faisant appel à une méthode d'un autre objet créé (`Math` n'est pas un constructeur).
+
+## Exemple
+
+### Utiliser `Math.acosh()`
+
+```js
+Math.acosh(-1);  // NaN
+Math.acosh(0);   // NaN
+Math.acosh(0.5); // NaN
+Math.acosh(1);   // 0
+Math.acosh(2);   // 1.3169578969248166
+```
+
+Pour les valeurs strictement inférieures à 1 `Math.acosh` renvoie {{jsxref("NaN")}}.
+
+## Prothèse d'émulation (_polyfill_)
+
+Pour tout <math><semantics><mrow><mi>x</mi><mo>≥</mo><mn>1</mn></mrow><annotation encoding="TeX">x \geq 1</annotation></semantics></math>, <math><semantics><mrow><mo lspace="0em" rspace="thinmathspace">arcosh</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo><mo>=</mo><mo lspace="0em" rspace="0em">ln</mo><mrow><mo>(</mo><mrow><mi>x</mi><mo>+</mo><msqrt><mrow><msup><mi>x</mi><mn>2</mn></msup><mo>-</mo><mn>1</mn></mrow></msqrt></mrow><mo>)</mo></mrow></mrow><annotation encoding="TeX">\operatorname {arcosh} (x) = \ln \left(x + \sqrt{x^{2} - 1} \right)</annotation></semantics></math>, on peut donc émuler cette fonction avec le code suivant :
+
+```js
+function acosh(x) {
+  return Math.log(x + Math.sqrt(x * x - 1));
+}
+```
+
+## Spécifications
+
+| Spécification                                                                | État                         | Commentaires        |
+| ---------------------------------------------------------------------------- | ---------------------------- | ------------------- |
+| {{SpecName('ES6', '#sec-math.acosh', 'Math.acosh')}}         | {{Spec2('ES6')}}         | Définition initiale |
+| {{SpecName('ESDraft', '#sec-math.acosh', 'Math.acosh')}} | {{Spec2('ESDraft')}} |                     |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Math.acosh")}}
+
+## Voir aussi
+
+- {{jsxref("Math.asinh()")}}
+- {{jsxref("Math.atanh()")}}
+- {{jsxref("Math.cosh()")}}
+- {{jsxref("Math.sinh()")}}
+- {{jsxref("Math.tanh()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/math/asin/index.html b/files/fr/web/javascript/reference/global_objects/math/asin/index.html
deleted file mode 100644
index b094e1bdce..0000000000
--- a/files/fr/web/javascript/reference/global_objects/math/asin/index.html
+++ /dev/null
@@ -1,99 +0,0 @@
----
-title: Math.asin()
-slug: Web/JavaScript/Reference/Global_Objects/Math/asin
-tags:
-  - JavaScript
-  - Math
-  - Méthode
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Math/asin
-original_slug: Web/JavaScript/Reference/Objets_globaux/Math/asin
----
-<div>{{JSRef}}</div>
-
-<p>La fonction <code><strong>Math.asin()</strong></code> renvoie l'arc sinus d'un nombre (en radians). Elle est définie par :</p>
-
-<p><math display="block"><semantics><mrow><mo>∀</mo><mi>x</mi><mo>∊</mo><mo stretchy="false">[</mo><mrow><mo>-</mo><mn>1</mn></mrow><mo>;</mo><mn>1</mn><mo stretchy="false">]</mo><mo>,</mo><mspace width="thickmathspace"></mspace><mstyle mathvariant="monospace"><mrow><mo lspace="0em" rspace="thinmathspace">Math.asin</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo></mrow></mstyle><mo>=</mo><mo lspace="0em" rspace="0em">arcsin</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo><mo>=</mo><mtext> le seul </mtext><mspace width="thickmathspace"></mspace><mi>y</mi><mo>∊</mo><mrow><mo>[</mo><mrow><mo>-</mo><mfrac><mi>π</mi><mn>2</mn></mfrac><mo>;</mo><mfrac><mi>π</mi><mn>2</mn></mfrac></mrow><mo>]</mo></mrow><mspace width="thinmathspace"></mspace><mtext>tel que</mtext><mspace width="thickmathspace"></mspace><mo lspace="0em" rspace="0em">sin</mo><mo stretchy="false">(</mo><mi>y</mi><mo stretchy="false">)</mo><mo>=</mo><mi>x</mi></mrow><annotation encoding="TeX">\forall x \in [{-1};1],\;\mathtt{\operatorname{Math.asin}(x)} = \arcsin(x) = \text{ the unique } \; y \in \left[-\frac{\pi}{2}; \frac{\pi}{2}\right] \, \text{such that} \; \sin(y) = x</annotation></semantics></math></p>
-
-<div>{{EmbedInteractiveExample("pages/js/math-asin.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">Math.asin(<var>x</var>)</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>x</code></dt>
- <dd>Un nombre.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>L'arc sinus du nombre passé en argument (exprimé en radians). Si ce nombre n'est pas compris entre -1 et 1, la valeur renvoyée sera {{jsxref("NaN")}}.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>La méthode <code>Math.asin()</code> renvoie une valeur numérique comprise entre <math><semantics><mrow><mo>-</mo><mfrac><mi>π</mi><mn>2</mn></mfrac></mrow><annotation encoding="TeX">-\frac{\pi}{2}</annotation></semantics></math> et <math><semantics><mfrac><mi>π</mi><mn>2</mn></mfrac><annotation encoding="TeX">\frac{\pi}{2}</annotation></semantics></math> pour <code>x</code> compris entre -1 et 1. Si <code>x</code> est hors de cet intervalle, la méthode renverra {{jsxref("NaN")}}.</p>
-
-<p><code>Math.asin()</code> est une méthode statique de <code>Math</code> et doit toujours être utilisée avec la syntaxe <code>Math.asin()</code>, elle ne doit pas être appelée à partir d'un autre objet créé (<code>Math</code> n'est pas un constructeur).</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Utiliser_Math.asin()">Utiliser <code>Math.asin()</code></h3>
-
-<pre class="brush:js">Math.asin(-2);  // NaN
-Math.asin(-1);  // -1.570796326794897 (-pi/2)
-Math.asin(0);   // 0
-Math.asin(0.5); // 0.5235987755982989
-Math.asin(1);   // 1.570796326794897 (pi/2)
-Math.asin(2);   // NaN</pre>
-
-<p>Pour les valeurs (strictement) inférieures à -1 ou supérieures à 1, <code>Math.asin()</code> renvoie {{jsxref("NaN")}}.</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES1')}}</td>
-   <td>{{Spec2('ES1')}}</td>
-   <td>Définition initiale. Implémentée avec JavaScript 1.0.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-15.8.2.3', 'Math.asin')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-math.asin', 'Math.asin')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-math.asin', 'Math.asin')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<div>{{Compat("javascript.builtins.Math.asin")}}</div>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Math.acos()")}}</li>
- <li>{{jsxref("Math.atan()")}}</li>
- <li>{{jsxref("Math.atan2()")}}</li>
- <li>{{jsxref("Math.cos()")}}</li>
- <li>{{jsxref("Math.sin()")}}</li>
- <li>{{jsxref("Math.tan()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/math/asin/index.md b/files/fr/web/javascript/reference/global_objects/math/asin/index.md
new file mode 100644
index 0000000000..b7d502cfb9
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/math/asin/index.md
@@ -0,0 +1,74 @@
+---
+title: Math.asin()
+slug: Web/JavaScript/Reference/Global_Objects/Math/asin
+tags:
+  - JavaScript
+  - Math
+  - Méthode
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/asin
+original_slug: Web/JavaScript/Reference/Objets_globaux/Math/asin
+---
+{{JSRef}}
+
+La fonction **`Math.asin()`** renvoie l'arc sinus d'un nombre (en radians). Elle est définie par :
+
+<math display="block"><semantics><mrow><mo>∀</mo><mi>x</mi><mo>∊</mo><mo stretchy="false">[</mo><mrow><mo>-</mo><mn>1</mn></mrow><mo>;</mo><mn>1</mn><mo stretchy="false">]</mo><mo>,</mo><mspace width="thickmathspace"></mspace><mstyle mathvariant="monospace"><mrow><mo lspace="0em" rspace="thinmathspace">Math.asin</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo></mrow></mstyle><mo>=</mo><mo lspace="0em" rspace="0em">arcsin</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo><mo>=</mo><mtext> le seul </mtext><mspace width="thickmathspace"></mspace><mi>y</mi><mo>∊</mo><mrow><mo>[</mo><mrow><mo>-</mo><mfrac><mi>π</mi><mn>2</mn></mfrac><mo>;</mo><mfrac><mi>π</mi><mn>2</mn></mfrac></mrow><mo>]</mo></mrow><mspace width="thinmathspace"></mspace><mtext>tel que</mtext><mspace width="thickmathspace"></mspace><mo lspace="0em" rspace="0em">sin</mo><mo stretchy="false">(</mo><mi>y</mi><mo stretchy="false">)</mo><mo>=</mo><mi>x</mi></mrow><annotation encoding="TeX">\forall x \in [{-1};1],\;\mathtt{\operatorname{Math.asin}(x)} = \arcsin(x) = \text{ the unique } \; y \in \left[-\frac{\pi}{2}; \frac{\pi}{2}\right] \, \text{such that} \; \sin(y) = x</annotation></semantics></math>
+
+{{EmbedInteractiveExample("pages/js/math-asin.html")}}
+
+## Syntaxe
+
+    Math.asin(x)
+
+### Paramètres
+
+- `x`
+  - : Un nombre.
+
+### Valeur de retour
+
+L'arc sinus du nombre passé en argument (exprimé en radians). Si ce nombre n'est pas compris entre -1 et 1, la valeur renvoyée sera {{jsxref("NaN")}}.
+
+## Description
+
+La méthode `Math.asin()` renvoie une valeur numérique comprise entre <math><semantics><mrow><mo>-</mo><mfrac><mi>π</mi><mn>2</mn></mfrac></mrow><annotation encoding="TeX">-\frac{\pi}{2}</annotation></semantics></math> et <math><semantics><mfrac><mi>π</mi><mn>2</mn></mfrac><annotation encoding="TeX">\frac{\pi}{2}</annotation></semantics></math> pour `x` compris entre -1 et 1. Si `x` est hors de cet intervalle, la méthode renverra {{jsxref("NaN")}}.
+
+`Math.asin()` est une méthode statique de `Math` et doit toujours être utilisée avec la syntaxe `Math.asin()`, elle ne doit pas être appelée à partir d'un autre objet créé (`Math` n'est pas un constructeur).
+
+## Exemples
+
+### Utiliser `Math.asin()`
+
+```js
+Math.asin(-2);  // NaN
+Math.asin(-1);  // -1.570796326794897 (-pi/2)
+Math.asin(0);   // 0
+Math.asin(0.5); // 0.5235987755982989
+Math.asin(1);   // 1.570796326794897 (pi/2)
+Math.asin(2);   // NaN
+```
+
+Pour les valeurs (strictement) inférieures à -1 ou supérieures à 1, `Math.asin()` renvoie {{jsxref("NaN")}}.
+
+## Spécifications
+
+| Spécification                                                            | Statut                       | Commentaires                                          |
+| ------------------------------------------------------------------------ | ---------------------------- | ----------------------------------------------------- |
+| {{SpecName('ES1')}}                                                 | {{Spec2('ES1')}}         | Définition initiale. Implémentée avec JavaScript 1.0. |
+| {{SpecName('ES5.1', '#sec-15.8.2.3', 'Math.asin')}}     | {{Spec2('ES5.1')}}     |                                                       |
+| {{SpecName('ES6', '#sec-math.asin', 'Math.asin')}}     | {{Spec2('ES6')}}         |                                                       |
+| {{SpecName('ESDraft', '#sec-math.asin', 'Math.asin')}} | {{Spec2('ESDraft')}} |                                                       |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Math.asin")}}
+
+## Voir aussi
+
+- {{jsxref("Math.acos()")}}
+- {{jsxref("Math.atan()")}}
+- {{jsxref("Math.atan2()")}}
+- {{jsxref("Math.cos()")}}
+- {{jsxref("Math.sin()")}}
+- {{jsxref("Math.tan()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/math/asinh/index.html b/files/fr/web/javascript/reference/global_objects/math/asinh/index.html
deleted file mode 100644
index e831b9abcb..0000000000
--- a/files/fr/web/javascript/reference/global_objects/math/asinh/index.html
+++ /dev/null
@@ -1,88 +0,0 @@
----
-title: Math.asinh()
-slug: Web/JavaScript/Reference/Global_Objects/Math/asinh
-tags:
-  - JavaScript
-  - Math
-  - Méthode
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Math/asinh
-original_slug: Web/JavaScript/Reference/Objets_globaux/Math/asinh
----
-<div>{{JSRef}}</div>
-
-<p>La fonction <code><strong>Math.asinh()</strong></code> renvoie l'arc sinus hyperbolique d'un nombre :</p>
-
-<p><math><semantics><mrow><mstyle mathvariant="monospace"><mrow><mo lspace="0em" rspace="thinmathspace">Math.asinh</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo></mrow></mstyle><mo>=</mo><mo lspace="0em" rspace="thinmathspace">arsinh</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo><mo>=</mo><mtext> le seul </mtext><mspace width="thickmathspace"></mspace><mi>y</mi><mspace width="thickmathspace"></mspace><mtext>tel que</mtext><mspace width="thickmathspace"></mspace><mo lspace="0em" rspace="0em">sinh</mo><mo stretchy="false">(</mo><mi>y</mi><mo stretchy="false">)</mo><mo>=</mo><mi>x</mi></mrow><annotation encoding="TeX">\mathtt{\operatorname{Math.asinh}(x)} = \operatorname{arsinh}(x) = \text{ the unique } \; y \; \text{such that} \; \sinh(y) = x</annotation></semantics></math></p>
-
-<div>{{EmbedInteractiveExample("pages/js/math-asinh.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">Math.asinh(<var>x</var>)</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>x</code></dt>
- <dd>Un nombre.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>L'arc sinus hyperbolique du nombre passé en argument.</p>
-
-<h2 id="Description">Description</h2>
-
-<p><code>asinh()</code> étant une méthode statique de <code>Math</code>, elle doit toujours être utilisée avec la syntaxe <code>Math.asinh()</code> et ne doit pas être appelée depuis un autre objet qui aurait été créé (Math n'est pas un constructeur).</p>
-
-<h2 id="Exemple">Exemple</h2>
-
-<h3 id="Utiliser_Math.asinh()">Utiliser <code>Math.asinh()</code></h3>
-
-<pre class="brush: js">Math.asinh = Math.asinh || function(x) {
-  if (x === -Infinity) {
-    return x;
-  } else {
-    return Math.log(x + Math.sqrt(x * x + 1));
-  }
-};
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-math.asinh', 'Math.asinh')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-math.asinh', 'Math.asinh')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Math.asinh")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Math.acosh()")}}</li>
- <li>{{jsxref("Math.atanh()")}}</li>
- <li>{{jsxref("Math.cosh()")}}</li>
- <li>{{jsxref("Math.sinh()")}}</li>
- <li>{{jsxref("Math.tanh()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/math/asinh/index.md b/files/fr/web/javascript/reference/global_objects/math/asinh/index.md
new file mode 100644
index 0000000000..607a90d9f4
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/math/asinh/index.md
@@ -0,0 +1,68 @@
+---
+title: Math.asinh()
+slug: Web/JavaScript/Reference/Global_Objects/Math/asinh
+tags:
+  - JavaScript
+  - Math
+  - Méthode
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/asinh
+original_slug: Web/JavaScript/Reference/Objets_globaux/Math/asinh
+---
+{{JSRef}}
+
+La fonction **`Math.asinh()`** renvoie l'arc sinus hyperbolique d'un nombre :
+
+<math><semantics><mrow><mstyle mathvariant="monospace"><mrow><mo lspace="0em" rspace="thinmathspace">Math.asinh</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo></mrow></mstyle><mo>=</mo><mo lspace="0em" rspace="thinmathspace">arsinh</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo><mo>=</mo><mtext> le seul </mtext><mspace width="thickmathspace"></mspace><mi>y</mi><mspace width="thickmathspace"></mspace><mtext>tel que</mtext><mspace width="thickmathspace"></mspace><mo lspace="0em" rspace="0em">sinh</mo><mo stretchy="false">(</mo><mi>y</mi><mo stretchy="false">)</mo><mo>=</mo><mi>x</mi></mrow><annotation encoding="TeX">\mathtt{\operatorname{Math.asinh}(x)} = \operatorname{arsinh}(x) = \text{ the unique } \; y \; \text{such that} \; \sinh(y) = x</annotation></semantics></math>
+
+{{EmbedInteractiveExample("pages/js/math-asinh.html")}}
+
+## Syntaxe
+
+    Math.asinh(x)
+
+### Paramètres
+
+- `x`
+  - : Un nombre.
+
+### Valeur de retour
+
+L'arc sinus hyperbolique du nombre passé en argument.
+
+## Description
+
+`asinh()` étant une méthode statique de `Math`, elle doit toujours être utilisée avec la syntaxe `Math.asinh()` et ne doit pas être appelée depuis un autre objet qui aurait été créé (Math n'est pas un constructeur).
+
+## Exemple
+
+### Utiliser `Math.asinh()`
+
+```js
+Math.asinh = Math.asinh || function(x) {
+  if (x === -Infinity) {
+    return x;
+  } else {
+    return Math.log(x + Math.sqrt(x * x + 1));
+  }
+};
+```
+
+## Spécifications
+
+| Spécification                                                                | État                         | Commentaires         |
+| ---------------------------------------------------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName('ES6', '#sec-math.asinh', 'Math.asinh')}}         | {{Spec2('ES6')}}         | Définition initiale. |
+| {{SpecName('ESDraft', '#sec-math.asinh', 'Math.asinh')}} | {{Spec2('ESDraft')}} |                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Math.asinh")}}
+
+## Voir aussi
+
+- {{jsxref("Math.acosh()")}}
+- {{jsxref("Math.atanh()")}}
+- {{jsxref("Math.cosh()")}}
+- {{jsxref("Math.sinh()")}}
+- {{jsxref("Math.tanh()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/math/atan/index.html b/files/fr/web/javascript/reference/global_objects/math/atan/index.html
deleted file mode 100644
index 3c6754866d..0000000000
--- a/files/fr/web/javascript/reference/global_objects/math/atan/index.html
+++ /dev/null
@@ -1,102 +0,0 @@
----
-title: Math.atan()
-slug: Web/JavaScript/Reference/Global_Objects/Math/atan
-tags:
-  - JavaScript
-  - Math
-  - Méthode
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Math/atan
-original_slug: Web/JavaScript/Reference/Objets_globaux/Math/atan
----
-<div>{{JSRef}}</div>
-
-<p>La fonction <code><strong>Math.atan()</strong></code> renvoie l'arc tangente d'un nombre exprimée en radians. Elle est définie par :</p>
-
-<p><math display="block"><semantics><mrow><mstyle mathvariant="monospace"><mrow><mo lspace="0em" rspace="thinmathspace">Math.atan</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo></mrow></mstyle><mo>=</mo><mo lspace="0em" rspace="0em">arctan</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo><mo>=</mo>le seul<mspace width="thickmathspace"></mspace><mi>y</mi><mo>∊</mo><mrow><mo>[</mo><mrow><mo>-</mo><mfrac><mi>π</mi><mn>2</mn></mfrac><mo>;</mo><mfrac><mi>π</mi><mn>2</mn></mfrac></mrow><mo>]</mo></mrow><mspace width="thinmathspace"></mspace><mtext>tel que</mtext><mspace width="thickmathspace"></mspace><mo lspace="0em" rspace="0em">tan</mo><mo stretchy="false">(</mo><mi>y</mi><mo stretchy="false">)</mo><mo>=</mo><mi>x</mi></mrow><annotation encoding="TeX">\mathtt{\operatorname{Math.atan}(x)} = \arctan(x) = \text{ the unique } \; y \in \left[-\frac{\pi}{2}; \frac{\pi}{2}\right] \, \text{such that} \; \tan(y) = x</annotation></semantics></math></p>
-
-<div>{{EmbedInteractiveExample("pages/js/math-atan.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">Math.atan(<var>x</var>)</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>x</code></dt>
- <dd>Un nombre.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>L'arc tangente du nombre passé en argument (exprimé en radians).</p>
-
-<h2 id="Description">Description</h2>
-
-<p>La méthode <code>Math.atan()</code> renvoie une valeur numérique comprise entre <math><semantics><mrow><mo>-</mo><mfrac><mi>π</mi><mn>2</mn></mfrac></mrow><annotation encoding="TeX">-\frac{\pi}{2}</annotation></semantics></math> et <math><semantics><mfrac><mi>π</mi><mn>2</mn></mfrac><annotation encoding="TeX">\frac{\pi}{2}</annotation></semantics></math>.</p>
-
-<p><code>atan()</code> est une méthode statique de <code>Math</code> et doit toujours être utilisée avec la syntaxe <code>Math.atan()</code>, elle ne doit pas être utilisée comme une méthode d'un autre objet qui aurait été créé (<code>Math</code> n'est pas un constructeur).</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Utiliser_Math.atan()">Utiliser <code>Math.atan()</code></h3>
-
-<pre class="brush:js">Math.atan(1);  // 0.7853981633974483
-Math.atan(0);  // 0
-Math.atan(-0); // -0
-
-Math.atan(Infinity); // 1.5707963267948966
-Math.atan(-Infinity); // -1.5707963267948966
-
-// L'angle formé entre la droite [(0,0);(x,y)] et l'axe des abscisses
-// dans un système de coordonnées cartésienne
-Math.atan(y / x);
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES1')}}</td>
-   <td>{{Spec2('ES1')}}</td>
-   <td>Définition initiale. Implémentée avec JavaScript 1.0.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-15.8.2.4', 'Math.atan')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-math.atan', 'Math.atan')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-math.atan', 'Math.atan')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<div>{{Compat("javascript.builtins.Math.atan")}}</div>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Math.acos()")}}</li>
- <li>{{jsxref("Math.asin()")}}</li>
- <li>{{jsxref("Math.atan2()")}}</li>
- <li>{{jsxref("Math.cos()")}}</li>
- <li>{{jsxref("Math.sin()")}}</li>
- <li>{{jsxref("Math.tan()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/math/atan/index.md b/files/fr/web/javascript/reference/global_objects/math/atan/index.md
new file mode 100644
index 0000000000..3f9a23100f
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/math/atan/index.md
@@ -0,0 +1,76 @@
+---
+title: Math.atan()
+slug: Web/JavaScript/Reference/Global_Objects/Math/atan
+tags:
+  - JavaScript
+  - Math
+  - Méthode
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/atan
+original_slug: Web/JavaScript/Reference/Objets_globaux/Math/atan
+---
+{{JSRef}}
+
+La fonction **`Math.atan()`** renvoie l'arc tangente d'un nombre exprimée en radians. Elle est définie par :
+
+<math display="block"><semantics><mrow><mstyle mathvariant="monospace"><mrow><mo lspace="0em" rspace="thinmathspace">Math.atan</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo></mrow></mstyle><mo>=</mo><mo lspace="0em" rspace="0em">arctan</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo><mo>=</mo>le seul<mspace width="thickmathspace"></mspace><mi>y</mi><mo>∊</mo><mrow><mo>[</mo><mrow><mo>-</mo><mfrac><mi>π</mi><mn>2</mn></mfrac><mo>;</mo><mfrac><mi>π</mi><mn>2</mn></mfrac></mrow><mo>]</mo></mrow><mspace width="thinmathspace"></mspace><mtext>tel que</mtext><mspace width="thickmathspace"></mspace><mo lspace="0em" rspace="0em">tan</mo><mo stretchy="false">(</mo><mi>y</mi><mo stretchy="false">)</mo><mo>=</mo><mi>x</mi></mrow><annotation encoding="TeX">\mathtt{\operatorname{Math.atan}(x)} = \arctan(x) = \text{ the unique } \; y \in \left[-\frac{\pi}{2}; \frac{\pi}{2}\right] \, \text{such that} \; \tan(y) = x</annotation></semantics></math>
+
+{{EmbedInteractiveExample("pages/js/math-atan.html")}}
+
+## Syntaxe
+
+    Math.atan(x)
+
+### Paramètres
+
+- `x`
+  - : Un nombre.
+
+### Valeur de retour
+
+L'arc tangente du nombre passé en argument (exprimé en radians).
+
+## Description
+
+La méthode `Math.atan()` renvoie une valeur numérique comprise entre <math><semantics><mrow><mo>-</mo><mfrac><mi>π</mi><mn>2</mn></mfrac></mrow><annotation encoding="TeX">-\frac{\pi}{2}</annotation></semantics></math> et <math><semantics><mfrac><mi>π</mi><mn>2</mn></mfrac><annotation encoding="TeX">\frac{\pi}{2}</annotation></semantics></math>.
+
+`atan()` est une méthode statique de `Math` et doit toujours être utilisée avec la syntaxe `Math.atan()`, elle ne doit pas être utilisée comme une méthode d'un autre objet qui aurait été créé (`Math` n'est pas un constructeur).
+
+## Exemples
+
+### Utiliser `Math.atan()`
+
+```js
+Math.atan(1);  // 0.7853981633974483
+Math.atan(0);  // 0
+Math.atan(-0); // -0
+
+Math.atan(Infinity); // 1.5707963267948966
+Math.atan(-Infinity); // -1.5707963267948966
+
+// L'angle formé entre la droite [(0,0);(x,y)] et l'axe des abscisses
+// dans un système de coordonnées cartésienne
+Math.atan(y / x);
+```
+
+## Spécifications
+
+| Spécification                                                            | État                         | Commentaires                                          |
+| ------------------------------------------------------------------------ | ---------------------------- | ----------------------------------------------------- |
+| {{SpecName('ES1')}}                                                 | {{Spec2('ES1')}}         | Définition initiale. Implémentée avec JavaScript 1.0. |
+| {{SpecName('ES5.1', '#sec-15.8.2.4', 'Math.atan')}}     | {{Spec2('ES5.1')}}     |                                                       |
+| {{SpecName('ES6', '#sec-math.atan', 'Math.atan')}}     | {{Spec2('ES6')}}         |                                                       |
+| {{SpecName('ESDraft', '#sec-math.atan', 'Math.atan')}} | {{Spec2('ESDraft')}} |                                                       |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Math.atan")}}
+
+## Voir aussi
+
+- {{jsxref("Math.acos()")}}
+- {{jsxref("Math.asin()")}}
+- {{jsxref("Math.atan2()")}}
+- {{jsxref("Math.cos()")}}
+- {{jsxref("Math.sin()")}}
+- {{jsxref("Math.tan()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/math/atan2/index.html b/files/fr/web/javascript/reference/global_objects/math/atan2/index.html
deleted file mode 100644
index 24923087e3..0000000000
--- a/files/fr/web/javascript/reference/global_objects/math/atan2/index.html
+++ /dev/null
@@ -1,110 +0,0 @@
----
-title: Math.atan2()
-slug: Web/JavaScript/Reference/Global_Objects/Math/atan2
-tags:
-  - JavaScript
-  - Math
-  - Méthode
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Math/atan2
-original_slug: Web/JavaScript/Reference/Objets_globaux/Math/atan2
----
-<div>{{JSRef}}</div>
-
-<p>La fonction <code><strong>Math.atan2()</strong></code> renvoie l'arc tangente du quotient de ses arguments.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/math-atan2.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">Math.atan2(<var>y</var>, <var>x</var>) </pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>x</code></dt>
- <dd>La coordonnée en abscisse du point.</dd>
- <dt><code>y</code></dt>
- <dd>La coordonnée en ordonnée du point.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>L'arc tangente du quotient formé par les deux arguments, c'est-à-dire l'angle, exprimé en radians entre l'axe des abscisses et la droite passant par l'origin (0,0) et le point de coordonnées (x,y).</p>
-
-<h2 id="Description">Description</h2>
-
-<p>La méthode <code>Math.atan2()</code> renvoie une valeur numérique comprise entre -Pi et Pi qui représente l'angle theta d'un point de coordonnées (x,y). Cela correspond à l'angle (dans le sens trigonométrique) entre l'axe des abscisses et le point de coordonnées (<code>x,y</code>). Attention, le premier argument de la fonction est l'ordonnée (y) et le second est l'abscisse (x).</p>
-
-<p><img alt="Graphique explicitant l'angle donné par un point de coordonnées X/Y" src="https://mdn.mozillademos.org/files/11565/atan2.png"></p>
-
-<p><code>Math.atan2()</code> utilise deux arguments <code>x</code> et <code>y</code>, alors que la méthode <code>Math.atan()</code> utilise le ratio de deux nombres comme un seul argument.</p>
-
-<p><code>atan2()</code> est une méthode statique de l'objet <code>Math</code>, elle doit toujours être utilisée avec la syntaxe <code>Math.atan2()</code>, elle ne doit pas être utilisée comme la méthode d'un autre objet qui aurait été créé (<code>Math</code> n'est pas un constructeur).</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Utiliser_Math.atan2()">Utiliser <code>Math.atan2()</code></h3>
-
-<pre class="brush:js">Math.atan2(90, 15); // 1.4056476493802699
-Math.atan2(15, 90); // 0.16514867741462683
-
-Math.atan2( ±0, -0 );               // ±PI.
-Math.atan2( ±0, +0 );               // ±0.
-Math.atan2( ±0, -x );               // ±PI pour x &gt; 0.
-Math.atan2( ±0, x );                // ±0 pour x &gt; 0.
-Math.atan2( -y, ±0 );               // -PI/2 pour y &gt; 0.
-Math.atan2( y, ±0 );                // PI/2 pour y &gt; 0.
-Math.atan2( ±y, -Infinity );        // ±PI pour y qui est un nombre fini &gt; 0.
-Math.atan2( ±y, +Infinity );        // ±0 pour y qui est un nombre fini &gt; 0.
-Math.atan2( ±Infinity, x );         // ±PI/2 pour x qui est un nombre fini.
-Math.atan2( ±Infinity, -Infinity ); // ±3*PI/4.
-Math.atan2( ±Infinity, +Infinity ); // ±PI/4.
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES1')}}</td>
-   <td>{{Spec2('ES1')}}</td>
-   <td>Définition initiale. Implémentée avec JavaScript 1.0.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-15.8.2.5', 'Math.atan2')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-math.atan2', 'Math.atan2')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-math.atan2', 'Math.atan2')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Math.atan2")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Math.acos()")}}</li>
- <li>{{jsxref("Math.asin()")}}</li>
- <li>{{jsxref("Math.atan()")}}</li>
- <li>{{jsxref("Math.cos()")}}</li>
- <li>{{jsxref("Math.sin()")}}</li>
- <li>{{jsxref("Math.tan()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/math/atan2/index.md b/files/fr/web/javascript/reference/global_objects/math/atan2/index.md
new file mode 100644
index 0000000000..c95dd9050b
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/math/atan2/index.md
@@ -0,0 +1,84 @@
+---
+title: Math.atan2()
+slug: Web/JavaScript/Reference/Global_Objects/Math/atan2
+tags:
+  - JavaScript
+  - Math
+  - Méthode
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/atan2
+original_slug: Web/JavaScript/Reference/Objets_globaux/Math/atan2
+---
+{{JSRef}}
+
+La fonction **`Math.atan2()`** renvoie l'arc tangente du quotient de ses arguments.
+
+{{EmbedInteractiveExample("pages/js/math-atan2.html")}}
+
+## Syntaxe
+
+    Math.atan2(y, x)
+
+### Paramètres
+
+- `x`
+  - : La coordonnée en abscisse du point.
+- `y`
+  - : La coordonnée en ordonnée du point.
+
+### Valeur de retour
+
+L'arc tangente du quotient formé par les deux arguments, c'est-à-dire l'angle, exprimé en radians entre l'axe des abscisses et la droite passant par l'origin (0,0) et le point de coordonnées (x,y).
+
+## Description
+
+La méthode `Math.atan2()` renvoie une valeur numérique comprise entre -Pi et Pi qui représente l'angle theta d'un point de coordonnées (x,y). Cela correspond à l'angle (dans le sens trigonométrique) entre l'axe des abscisses et le point de coordonnées (`x,y`). Attention, le premier argument de la fonction est l'ordonnée (y) et le second est l'abscisse (x).
+
+![Graphique explicitant l'angle donné par un point de coordonnées X/Y](https://mdn.mozillademos.org/files/11565/atan2.png)
+
+`Math.atan2()` utilise deux arguments `x` et `y`, alors que la méthode `Math.atan()` utilise le ratio de deux nombres comme un seul argument.
+
+`atan2()` est une méthode statique de l'objet `Math`, elle doit toujours être utilisée avec la syntaxe `Math.atan2()`, elle ne doit pas être utilisée comme la méthode d'un autre objet qui aurait été créé (`Math` n'est pas un constructeur).
+
+## Exemples
+
+### Utiliser `Math.atan2()`
+
+```js
+Math.atan2(90, 15); // 1.4056476493802699
+Math.atan2(15, 90); // 0.16514867741462683
+
+Math.atan2( ±0, -0 );               // ±PI.
+Math.atan2( ±0, +0 );               // ±0.
+Math.atan2( ±0, -x );               // ±PI pour x > 0.
+Math.atan2( ±0, x );                // ±0 pour x > 0.
+Math.atan2( -y, ±0 );               // -PI/2 pour y > 0.
+Math.atan2( y, ±0 );                // PI/2 pour y > 0.
+Math.atan2( ±y, -Infinity );        // ±PI pour y qui est un nombre fini > 0.
+Math.atan2( ±y, +Infinity );        // ±0 pour y qui est un nombre fini > 0.
+Math.atan2( ±Infinity, x );         // ±PI/2 pour x qui est un nombre fini.
+Math.atan2( ±Infinity, -Infinity ); // ±3*PI/4.
+Math.atan2( ±Infinity, +Infinity ); // ±PI/4.
+```
+
+## Spécifications
+
+| Spécification                                                                | État                         | Commentaires                                          |
+| ---------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- |
+| {{SpecName('ES1')}}                                                     | {{Spec2('ES1')}}         | Définition initiale. Implémentée avec JavaScript 1.0. |
+| {{SpecName('ES5.1', '#sec-15.8.2.5', 'Math.atan2')}}         | {{Spec2('ES5.1')}}     |                                                       |
+| {{SpecName('ES6', '#sec-math.atan2', 'Math.atan2')}}         | {{Spec2('ES6')}}         |                                                       |
+| {{SpecName('ESDraft', '#sec-math.atan2', 'Math.atan2')}} | {{Spec2('ESDraft')}} |                                                       |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Math.atan2")}}
+
+## Voir aussi
+
+- {{jsxref("Math.acos()")}}
+- {{jsxref("Math.asin()")}}
+- {{jsxref("Math.atan()")}}
+- {{jsxref("Math.cos()")}}
+- {{jsxref("Math.sin()")}}
+- {{jsxref("Math.tan()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/math/atanh/index.html b/files/fr/web/javascript/reference/global_objects/math/atanh/index.html
deleted file mode 100644
index f159f35630..0000000000
--- a/files/fr/web/javascript/reference/global_objects/math/atanh/index.html
+++ /dev/null
@@ -1,99 +0,0 @@
----
-title: Math.atanh()
-slug: Web/JavaScript/Reference/Global_Objects/Math/atanh
-tags:
-  - JavaScript
-  - Math
-  - Méthode
-  - Reference
-  - polyfill
-translation_of: Web/JavaScript/Reference/Global_Objects/Math/atanh
-original_slug: Web/JavaScript/Reference/Objets_globaux/Math/atanh
----
-<div>{{JSRef}}</div>
-
-<p>La fonction <code><strong>Math.atanh()</strong></code> renvoie l'arc tangente hyperbolique d'un nombre :</p>
-
-<p><math><semantics><mrow><mo>∀</mo><mi>x</mi><mo>∊</mo><mrow><mo>(</mo><mrow><mo>-</mo><mn>1</mn><mo>,</mo><mn>1</mn></mrow><mo>)</mo></mrow><mo>,</mo><mstyle mathvariant="monospace"><mrow><mo lspace="0em" rspace="thinmathspace">Math.atanh</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo></mrow></mstyle><mo>=</mo><mo lspace="0em" rspace="thinmathspace">arctanh</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo><mo>=</mo><mtext> le seul </mtext><mspace width="thickmathspace"></mspace><mi>y</mi><mtext>  tel que</mtext><mspace width="thickmathspace"></mspace><mo lspace="0em" rspace="0em">tanh</mo><mo stretchy="false">(</mo><mi>y</mi><mo stretchy="false">)</mo><mo>=</mo><mi>x</mi></mrow><annotation encoding="TeX">\forall x \in \left( -1, 1 \right), \mathtt{\operatorname{Math.atanh}(x)} = \operatorname{arctanh}(x) = \text{ the unique } \; y \; \text{such that} \; \tanh(y) = x</annotation></semantics></math></p>
-
-<div>{{EmbedInteractiveExample("pages/js/math-atanh.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">Math.atanh(<var>x</var>)</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>x</code></dt>
- <dd>Un nombre.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>L'arc tangente hyperbolique du nombre passé en argument.</p>
-
-<h2 id="Description">Description</h2>
-
-<p><code>atanh()</code> est une méthode statique de <code>Math</code>, il faut utiliser la syntaxe <code>Math.atanh()</code>, et non pas une méthode d'un objet <code>Math</code> créé sur mesure (<code>Math</code> n'est pas un constructeur).</p>
-
-<h2 id="Exemple">Exemple</h2>
-
-<h3 id="Utiliser_Math.atanh()">Utiliser <code>Math.atanh()</code></h3>
-
-<pre class="brush:js">Math.atanh(-2);  // NaN
-Math.atanh(-1);  // -Infinity
-Math.atanh(0);   // 0
-Math.atanh(0.5); // 0.5493061443340548
-Math.atanh(1);   // Infinity
-Math.atanh(2);   // NaN
-</pre>
-
-<p>Pour les valeurs strictement inférieures à -1 ou strictement supérieures à 1, {{jsxref("NaN")}} sera renvoyé.</p>
-
-<h2 id="Prothèse_d'émulation_(polyfill)">Prothèse d'émulation (<em>polyfill</em>)</h2>
-
-<p>Pour <math><semantics><mrow><mrow><mo>|</mo><mi>x</mi><mo>|</mo></mrow><mo>&lt;</mo><mn>1</mn></mrow><annotation encoding="TeX">\left|x\right| &lt; 1</annotation></semantics></math>, on a la formule suivante : <math><semantics><mrow><mo lspace="0em" rspace="thinmathspace">artanh</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo><mo>=</mo><mfrac><mn>1</mn><mn>2</mn></mfrac><mo lspace="0em" rspace="0em">ln</mo><mrow><mo>(</mo><mfrac><mrow><mn>1</mn><mo>+</mo><mi>x</mi></mrow><mrow><mn>1</mn><mo>-</mo><mi>x</mi></mrow></mfrac><mo>)</mo></mrow></mrow><annotation encoding="TeX">\operatorname {artanh} (x) = \frac{1}{2}\ln \left( \frac{1 + x}{1 - x} \right)</annotation></semantics></math>et on peut donc émuler la fonction avec :</p>
-
-<pre class="brush: js">Math.atanh = Math.atanh || function(x) {
-  return Math.log((1+x)/(1-x)) / 2;
-};
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-math.atanh', 'Math.atanh')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-math.atanh', 'Math.atanh')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Math.atanh")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Math.acosh()")}}</li>
- <li>{{jsxref("Math.asinh()")}}</li>
- <li>{{jsxref("Math.cosh()")}}</li>
- <li>{{jsxref("Math.sinh()")}}</li>
- <li>{{jsxref("Math.tanh()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/math/atanh/index.md b/files/fr/web/javascript/reference/global_objects/math/atanh/index.md
new file mode 100644
index 0000000000..ce23e62351
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/math/atanh/index.md
@@ -0,0 +1,80 @@
+---
+title: Math.atanh()
+slug: Web/JavaScript/Reference/Global_Objects/Math/atanh
+tags:
+  - JavaScript
+  - Math
+  - Méthode
+  - Reference
+  - polyfill
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/atanh
+original_slug: Web/JavaScript/Reference/Objets_globaux/Math/atanh
+---
+{{JSRef}}
+
+La fonction **`Math.atanh()`** renvoie l'arc tangente hyperbolique d'un nombre :
+
+<math><semantics><mrow><mo>∀</mo><mi>x</mi><mo>∊</mo><mrow><mo>(</mo><mrow><mo>-</mo><mn>1</mn><mo>,</mo><mn>1</mn></mrow><mo>)</mo></mrow><mo>,</mo><mstyle mathvariant="monospace"><mrow><mo lspace="0em" rspace="thinmathspace">Math.atanh</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo></mrow></mstyle><mo>=</mo><mo lspace="0em" rspace="thinmathspace">arctanh</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo><mo>=</mo><mtext> le seul </mtext><mspace width="thickmathspace"></mspace><mi>y</mi><mtext>  tel que</mtext><mspace width="thickmathspace"></mspace><mo lspace="0em" rspace="0em">tanh</mo><mo stretchy="false">(</mo><mi>y</mi><mo stretchy="false">)</mo><mo>=</mo><mi>x</mi></mrow><annotation encoding="TeX">\forall x \in \left( -1, 1 \right), \mathtt{\operatorname{Math.atanh}(x)} = \operatorname{arctanh}(x) = \text{ the unique } \; y \; \text{such that} \; \tanh(y) = x</annotation></semantics></math>
+
+{{EmbedInteractiveExample("pages/js/math-atanh.html")}}
+
+## Syntaxe
+
+    Math.atanh(x)
+
+### Paramètres
+
+- `x`
+  - : Un nombre.
+
+### Valeur de retour
+
+L'arc tangente hyperbolique du nombre passé en argument.
+
+## Description
+
+`atanh()` est une méthode statique de `Math`, il faut utiliser la syntaxe `Math.atanh()`, et non pas une méthode d'un objet `Math` créé sur mesure (`Math` n'est pas un constructeur).
+
+## Exemple
+
+### Utiliser `Math.atanh()`
+
+```js
+Math.atanh(-2);  // NaN
+Math.atanh(-1);  // -Infinity
+Math.atanh(0);   // 0
+Math.atanh(0.5); // 0.5493061443340548
+Math.atanh(1);   // Infinity
+Math.atanh(2);   // NaN
+```
+
+Pour les valeurs strictement inférieures à -1 ou strictement supérieures à 1, {{jsxref("NaN")}} sera renvoyé.
+
+## Prothèse d'émulation (_polyfill_)
+
+Pour <math><semantics><mrow><mrow><mo>|</mo><mi>x</mi><mo>|</mo></mrow><mo>&#x3C;</mo><mn>1</mn></mrow><annotation encoding="TeX">\left|x\right| &#x3C; 1</annotation></semantics></math>, on a la formule suivante : <math><semantics><mrow><mo lspace="0em" rspace="thinmathspace">artanh</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo><mo>=</mo><mfrac><mn>1</mn><mn>2</mn></mfrac><mo lspace="0em" rspace="0em">ln</mo><mrow><mo>(</mo><mfrac><mrow><mn>1</mn><mo>+</mo><mi>x</mi></mrow><mrow><mn>1</mn><mo>-</mo><mi>x</mi></mrow></mfrac><mo>)</mo></mrow></mrow><annotation encoding="TeX">\operatorname {artanh} (x) = \frac{1}{2}\ln \left( \frac{1 + x}{1 - x} \right)</annotation></semantics></math>et on peut donc émuler la fonction avec :
+
+```js
+Math.atanh = Math.atanh || function(x) {
+  return Math.log((1+x)/(1-x)) / 2;
+};
+```
+
+## Spécifications
+
+| Spécification                                                                | Statut                       | Commentaires         |
+| ---------------------------------------------------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName('ES6', '#sec-math.atanh', 'Math.atanh')}}         | {{Spec2('ES6')}}         | Définition initiale. |
+| {{SpecName('ESDraft', '#sec-math.atanh', 'Math.atanh')}} | {{Spec2('ESDraft')}} |                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Math.atanh")}}
+
+## Voir aussi
+
+- {{jsxref("Math.acosh()")}}
+- {{jsxref("Math.asinh()")}}
+- {{jsxref("Math.cosh()")}}
+- {{jsxref("Math.sinh()")}}
+- {{jsxref("Math.tanh()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/math/cbrt/index.html b/files/fr/web/javascript/reference/global_objects/math/cbrt/index.html
deleted file mode 100644
index fb9daa3cc0..0000000000
--- a/files/fr/web/javascript/reference/global_objects/math/cbrt/index.html
+++ /dev/null
@@ -1,88 +0,0 @@
----
-title: Math.cbrt()
-slug: Web/JavaScript/Reference/Global_Objects/Math/cbrt
-tags:
-  - ECMAScript 2015
-  - JavaScript
-  - Math
-  - Méthode
-  - Reference
-  - polyfill
-translation_of: Web/JavaScript/Reference/Global_Objects/Math/cbrt
-original_slug: Web/JavaScript/Reference/Objets_globaux/Math/cbrt
----
-<div>{{JSRef}}</div>
-
-<p>La fonction <code><strong>Math.cbrt()</strong></code> renvoie la racine cubique (le nom anglais étant <em>cubic root</em>) d'un nombre :</p>
-
-<p><math><semantics><mrow><mstyle mathvariant="monospace"><mrow><mi>M</mi><mi>a</mi><mi>t</mi><mi>h</mi><mo>.</mo><mi>c</mi><mi>b</mi><mi>r</mi><mi>t</mi><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo></mrow></mstyle><mo>=</mo><mroot><mi>x</mi><mn>3</mn></mroot><mo>=</mo><mtext>le seul</mtext><mspace width="thickmathspace"></mspace><mi>y</mi><mspace width="thickmathspace"></mspace><mtext>tel que</mtext><mspace width="thickmathspace"></mspace><msup><mi>y</mi><mn>3</mn></msup><mo>=</mo><mi>x</mi></mrow><annotation encoding="TeX">\mathtt{Math.cbrt(x)} = \sqrt[3]{x} = \text{the unique} \; y \; \text{such that} \; y^3 = x</annotation></semantics></math></p>
-
-<div>{{EmbedInteractiveExample("pages/js/math-cbrt.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">Math.cbrt(<var>x</var>)</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>x</code></dt>
- <dd>Un nombre.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>La racine cubique du nombre passé en argument.</p>
-
-<h2 id="Description">Description</h2>
-
-<p><code>cbrt()</code> étant une méthode statique de <code>Math</code>, il faut utiliser <code>Math.cbrt()</code>, et non pas la méthode d'un autre objet créé (<code>Math</code> n'est pas un constructeur).</p>
-
-<h2 id="Exemple">Exemple</h2>
-
-<h3 id="Utiliser_Math.cbrt()">Utiliser <code>Math.cbrt()</code></h3>
-
-<pre class="brush:js">Math.cbrt(NaN); // NaN
-Math.cbrt(-1); // -1
-Math.cbrt(-0); // -0
-Math.cbrt(-Infinity); // -Infinity
-Math.cbrt(0); // 0
-Math.cbrt(1); // 1
-Math.cbrt(Infinity); // Infinity
-Math.cbrt(null); // 0
-Math.cbrt(2);  // 1.2599210498948732</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-math.cbrt', 'Math.cbrt')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-math.cbrt', 'Math.cbrt')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Math.cbrt")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Math.pow()")}}</li>
- <li>{{jsxref("Math.sqrt()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/math/cbrt/index.md b/files/fr/web/javascript/reference/global_objects/math/cbrt/index.md
new file mode 100644
index 0000000000..8fe0f00c04
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/math/cbrt/index.md
@@ -0,0 +1,69 @@
+---
+title: Math.cbrt()
+slug: Web/JavaScript/Reference/Global_Objects/Math/cbrt
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Math
+  - Méthode
+  - Reference
+  - polyfill
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/cbrt
+original_slug: Web/JavaScript/Reference/Objets_globaux/Math/cbrt
+---
+{{JSRef}}
+
+La fonction **`Math.cbrt()`** renvoie la racine cubique (le nom anglais étant _cubic root_) d'un nombre :
+
+<math><semantics><mrow><mstyle mathvariant="monospace"><mrow><mi>M</mi><mi>a</mi><mi>t</mi><mi>h</mi><mo>.</mo><mi>c</mi><mi>b</mi><mi>r</mi><mi>t</mi><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo></mrow></mstyle><mo>=</mo><mroot><mi>x</mi><mn>3</mn></mroot><mo>=</mo><mtext>le seul</mtext><mspace width="thickmathspace"></mspace><mi>y</mi><mspace width="thickmathspace"></mspace><mtext>tel que</mtext><mspace width="thickmathspace"></mspace><msup><mi>y</mi><mn>3</mn></msup><mo>=</mo><mi>x</mi></mrow><annotation encoding="TeX">\mathtt{Math.cbrt(x)} = \sqrt[3]{x} = \text{the unique} \; y \; \text{such that} \; y^3 = x</annotation></semantics></math>
+
+{{EmbedInteractiveExample("pages/js/math-cbrt.html")}}
+
+## Syntaxe
+
+    Math.cbrt(x)
+
+### Paramètres
+
+- `x`
+  - : Un nombre.
+
+### Valeur de retour
+
+La racine cubique du nombre passé en argument.
+
+## Description
+
+`cbrt()` étant une méthode statique de `Math`, il faut utiliser `Math.cbrt()`, et non pas la méthode d'un autre objet créé (`Math` n'est pas un constructeur).
+
+## Exemple
+
+### Utiliser `Math.cbrt()`
+
+```js
+Math.cbrt(NaN); // NaN
+Math.cbrt(-1); // -1
+Math.cbrt(-0); // -0
+Math.cbrt(-Infinity); // -Infinity
+Math.cbrt(0); // 0
+Math.cbrt(1); // 1
+Math.cbrt(Infinity); // Infinity
+Math.cbrt(null); // 0
+Math.cbrt(2);  // 1.2599210498948732
+```
+
+## Spécifications
+
+| Spécification                                                            | État                         | Commentaires         |
+| ------------------------------------------------------------------------ | ---------------------------- | -------------------- |
+| {{SpecName('ES6', '#sec-math.cbrt', 'Math.cbrt')}}     | {{Spec2('ES6')}}         | Définition initiale. |
+| {{SpecName('ESDraft', '#sec-math.cbrt', 'Math.cbrt')}} | {{Spec2('ESDraft')}} |                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Math.cbrt")}}
+
+## Voir aussi
+
+- {{jsxref("Math.pow()")}}
+- {{jsxref("Math.sqrt()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/math/ceil/index.html b/files/fr/web/javascript/reference/global_objects/math/ceil/index.html
deleted file mode 100644
index 93e8919368..0000000000
--- a/files/fr/web/javascript/reference/global_objects/math/ceil/index.html
+++ /dev/null
@@ -1,174 +0,0 @@
----
-title: Math.ceil()
-slug: Web/JavaScript/Reference/Global_Objects/Math/ceil
-tags:
-  - JavaScript
-  - Math
-  - Méthode
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Math/ceil
-original_slug: Web/JavaScript/Reference/Objets_globaux/Math/ceil
----
-<div>{{JSRef}}</div>
-
-<p>La fonction <code><strong>Math.ceil()</strong></code> retourne le plus petit entier supérieur ou égal au nombre donné.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/math-ceil.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">Math.ceil(<var>x</var>) </pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>x</code></dt>
- <dd>Un nombre.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Le plus petit entier qui est supérieur ou égal au nombre donné.</p>
-
-<h2 id="Description">Description</h2>
-
-<p><code>ceil()</code> est une méthode statique de <code>Math</code>. Elle doit être utilisée avec la syntaxe <code>Math.ceil()</code>, plutôt que comme une méthode d'un autre objet qui aurait été créé (<code>Math</code> n'est pas un constructeur).</p>
-
-<div class="blockIndicator note">
-<p><strong>Note :</strong> <code>Math.ceil(null)</code> renverra <code>0</code> et pas {{jsxref("NaN")}}.</p>
-</div>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Utiliser_Math.ceil()">Utiliser <code>Math.ceil()</code></h3>
-
-<p>Voici un exemple d'utilisation de <code>Math.ceil()</code>.</p>
-
-<pre class="brush:js;">Math.ceil(.95);    // 1
-Math.ceil(4);      // 4
-Math.ceil(7.004);  // 8
-Math.ceil(-0.95);  // -0
-Math.ceil(-4);     // -4
-Math.ceil(-7.004); // -7
-Math.ceil(null);   // 0</pre>
-
-<h3 id="Arrondi_décimal">Arrondi décimal</h3>
-
-<pre class="brush:js">// Fermeture
-(function(){
-
-	/**
-	 * Fonction pour arrondir un nombre.
-	 *
-	 * @param	{String}	type	Le type d'arrondi.
-	 * @param	{Number}	value	Le nombre à arrondir.
-	 * @param	{Integer}	exp		L'exposant (le logarithme en base 10 de la base pour l'arrondi).
-	 * @returns	{Number}			La valeur arrondie.
-	 */
-	function decimalAdjust(type, value, exp) {
-		// Si l'exposant vaut undefined ou zero...
-		if (typeof exp === 'undefined' || +exp === 0) {
-			return Math[type](value);
-		}
-		value = +value;
-		exp = +exp;
-		// Si value n'est pas un nombre
-        // ou si l'exposant n'est pas entier
-		if (isNaN(value) || !(typeof exp === 'number' &amp;&amp; exp % 1 === 0)) {
-			return NaN;
-		}
-		// Décalage
-		value = value.toString().split('e');
-		value = Math[type](+(value[0] + 'e' + (value[1] ? (+value[1] - exp) : -exp)));
-		// Re "calage"
-		value = value.toString().split('e');
-		return +(value[0] + 'e' + (value[1] ? (+value[1] + exp) : exp));
-	}
-
-	// Arrondi décimal
-	if (!Math.round10) {
-		Math.round10 = function(value, exp) {
-			return decimalAdjust('round', value, exp);
-		};
-	}
-	// Arrondi décimal inférieur
-	if (!Math.floor10) {
-		Math.floor10 = function(value, exp) {
-			return decimalAdjust('floor', value, exp);
-		};
-	}
-	// Arrondi décimal supérieur
-	if (!Math.ceil10) {
-		Math.ceil10 = function(value, exp) {
-			return decimalAdjust('ceil', value, exp);
-		};
-	}
-
-})();
-
-// Arrondi décimal
-Math.round10(55.55, -1); // 55.6
-Math.round10(55.549, -1); // 55.5
-Math.round10(55, 1); // 60
-Math.round10(54.9, 1); // 50
-Math.round10(-55.55, -1); // -55.5
-Math.round10(-55.551, -1); // -55.6
-Math.round10(-55, 1); // -50
-Math.round10(-55.1, 1); // -60
-// Arrondi décimal inférieur
-Math.floor10(55.59, -1); // 55.5
-Math.floor10(59, 1); // 50
-Math.floor10(-55.51, -1); // -55.6
-Math.floor10(-51, 1); // -60
-// Arrondi décimal supérieur
-Math.ceil10(55.51, -1); // 55.6
-Math.ceil10(51, 1); // 60
-Math.ceil10(-55.59, -1); // -55.5
-Math.ceil10(-59, 1); // -50
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES1')}}</td>
-   <td>{{Spec2('ES1')}}</td>
-   <td>Définition initiale. Implémentée avec JavaScript 1.0.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-15.8.2.6', 'Math.ceil')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-math.ceil', 'Math.ceil')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-math.ceil', 'Math.ceil')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Math.ceil")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Math.abs()")}}</li>
- <li>{{jsxref("Math.floor()")}}</li>
- <li>{{jsxref("Math.round()")}}</li>
- <li>{{jsxref("Math.sign()")}}</li>
- <li>{{jsxref("Math.trunc()")}}{</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/math/ceil/index.md b/files/fr/web/javascript/reference/global_objects/math/ceil/index.md
new file mode 100644
index 0000000000..fced464d1b
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/math/ceil/index.md
@@ -0,0 +1,148 @@
+---
+title: Math.ceil()
+slug: Web/JavaScript/Reference/Global_Objects/Math/ceil
+tags:
+  - JavaScript
+  - Math
+  - Méthode
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/ceil
+original_slug: Web/JavaScript/Reference/Objets_globaux/Math/ceil
+---
+{{JSRef}}
+
+La fonction **`Math.ceil()`** retourne le plus petit entier supérieur ou égal au nombre donné.
+
+{{EmbedInteractiveExample("pages/js/math-ceil.html")}}
+
+## Syntaxe
+
+    Math.ceil(x)
+
+### Paramètres
+
+- `x`
+  - : Un nombre.
+
+### Valeur de retour
+
+Le plus petit entier qui est supérieur ou égal au nombre donné.
+
+## Description
+
+`ceil()` est une méthode statique de `Math`. Elle doit être utilisée avec la syntaxe `Math.ceil()`, plutôt que comme une méthode d'un autre objet qui aurait été créé (`Math` n'est pas un constructeur).
+
+> **Note :** `Math.ceil(null)` renverra `0` et pas {{jsxref("NaN")}}.
+
+## Exemples
+
+### Utiliser `Math.ceil()`
+
+Voici un exemple d'utilisation de `Math.ceil()`.
+
+```js
+Math.ceil(.95);    // 1
+Math.ceil(4);      // 4
+Math.ceil(7.004);  // 8
+Math.ceil(-0.95);  // -0
+Math.ceil(-4);     // -4
+Math.ceil(-7.004); // -7
+Math.ceil(null);   // 0
+```
+
+### Arrondi décimal
+
+```js
+// Fermeture
+(function(){
+
+	/**
+	 * Fonction pour arrondir un nombre.
+	 *
+	 * @param	{String}	type	Le type d'arrondi.
+	 * @param	{Number}	value	Le nombre à arrondir.
+	 * @param	{Integer}	exp		L'exposant (le logarithme en base 10 de la base pour l'arrondi).
+	 * @returns	{Number}			La valeur arrondie.
+	 */
+	function decimalAdjust(type, value, exp) {
+		// Si l'exposant vaut undefined ou zero...
+		if (typeof exp === 'undefined' || +exp === 0) {
+			return Math[type](value);
+		}
+		value = +value;
+		exp = +exp;
+		// Si value n'est pas un nombre
+        // ou si l'exposant n'est pas entier
+		if (isNaN(value) || !(typeof exp === 'number' && exp % 1 === 0)) {
+			return NaN;
+		}
+		// Décalage
+		value = value.toString().split('e');
+		value = Math[type](+(value[0] + 'e' + (value[1] ? (+value[1] - exp) : -exp)));
+		// Re "calage"
+		value = value.toString().split('e');
+		return +(value[0] + 'e' + (value[1] ? (+value[1] + exp) : exp));
+	}
+
+	// Arrondi décimal
+	if (!Math.round10) {
+		Math.round10 = function(value, exp) {
+			return decimalAdjust('round', value, exp);
+		};
+	}
+	// Arrondi décimal inférieur
+	if (!Math.floor10) {
+		Math.floor10 = function(value, exp) {
+			return decimalAdjust('floor', value, exp);
+		};
+	}
+	// Arrondi décimal supérieur
+	if (!Math.ceil10) {
+		Math.ceil10 = function(value, exp) {
+			return decimalAdjust('ceil', value, exp);
+		};
+	}
+
+})();
+
+// Arrondi décimal
+Math.round10(55.55, -1); // 55.6
+Math.round10(55.549, -1); // 55.5
+Math.round10(55, 1); // 60
+Math.round10(54.9, 1); // 50
+Math.round10(-55.55, -1); // -55.5
+Math.round10(-55.551, -1); // -55.6
+Math.round10(-55, 1); // -50
+Math.round10(-55.1, 1); // -60
+// Arrondi décimal inférieur
+Math.floor10(55.59, -1); // 55.5
+Math.floor10(59, 1); // 50
+Math.floor10(-55.51, -1); // -55.6
+Math.floor10(-51, 1); // -60
+// Arrondi décimal supérieur
+Math.ceil10(55.51, -1); // 55.6
+Math.ceil10(51, 1); // 60
+Math.ceil10(-55.59, -1); // -55.5
+Math.ceil10(-59, 1); // -50
+```
+
+## Spécifications
+
+| Spécification                                                            | État                         | Commentaires                                          |
+| ------------------------------------------------------------------------ | ---------------------------- | ----------------------------------------------------- |
+| {{SpecName('ES1')}}                                                 | {{Spec2('ES1')}}         | Définition initiale. Implémentée avec JavaScript 1.0. |
+| {{SpecName('ES5.1', '#sec-15.8.2.6', 'Math.ceil')}}     | {{Spec2('ES5.1')}}     |                                                       |
+| {{SpecName('ES6', '#sec-math.ceil', 'Math.ceil')}}     | {{Spec2('ES6')}}         |                                                       |
+| {{SpecName('ESDraft', '#sec-math.ceil', 'Math.ceil')}} | {{Spec2('ESDraft')}} |                                                       |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Math.ceil")}}
+
+## Voir aussi
+
+- {{jsxref("Math.abs()")}}
+- {{jsxref("Math.floor()")}}
+- {{jsxref("Math.round()")}}
+- {{jsxref("Math.sign()")}}
+- {{jsxref("Math.trunc()")}}{
diff --git a/files/fr/web/javascript/reference/global_objects/math/clz32/index.html b/files/fr/web/javascript/reference/global_objects/math/clz32/index.html
deleted file mode 100644
index c3298823a6..0000000000
--- a/files/fr/web/javascript/reference/global_objects/math/clz32/index.html
+++ /dev/null
@@ -1,92 +0,0 @@
----
-title: Math.clz32()
-slug: Web/JavaScript/Reference/Global_Objects/Math/clz32
-tags:
-  - ECMAScript 2015
-  - JavaScript
-  - Math
-  - Méthode
-  - Reference
-  - polyfill
-translation_of: Web/JavaScript/Reference/Global_Objects/Math/clz32
-original_slug: Web/JavaScript/Reference/Objets_globaux/Math/clz32
----
-<div>{{JSRef}}</div>
-
-<p>La fonction <code><strong>Math.clz32()</strong></code> renvoie le nombre de zéros de tête dans la représentation binaire sur 32 bits d'un nombre.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/math-clz32.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">Math.clz32(<var>x</var>)
-</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>x</code></dt>
- <dd>Un nombre.</dd>
-</dl>
-
-<h3 id="Valeur_retournée">Valeur retournée</h3>
-
-<p>Le nombre de bits à zéro en tête de la représentation binaire sur 32 bits du nombre donné.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>"<code>clz32</code>" est un raccourci pour CountLeadingZeroes32 (en français, « compter les zéros de tête »).</p>
-
-<p>Si <code>x</code> n'est pas un nombre, il sera d'abord converti en nombre puis converti en un entier non signé sur 32 bits.</p>
-
-<p>Si l'entier non signé sur 32 bits résultant vaut <code>0</code>, la fonction renverra <code>32</code>, car tous les bits valent <code>0</code>.</p>
-
-<p>Cette fonction est particulièrement utile aux systèmes qui compilent du code JavaScript, comme <a href="/fr/docs/Emscripten">Emscripten</a>.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<pre class="brush: js">Math.clz32(1)                // 31
-Math.clz32(1000)             // 22
-Math.clz32()                 // 32
-
-var liste = [NaN, Infinity, -Infinity, 0, -0, null, undefined, 'machin', {}, []];
-liste.every(n =&gt; Math.clz32(n) == 32); // true
-
-Math.clz32(true)             // 31
-Math.clz32(3.5)              // 30
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-math.clz32', 'Math.clz32')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-math.clz32', 'Math.clz32')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Math.clz32")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Math")}}</li>
- <li>{{jsxref("Math.imul")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/math/clz32/index.md b/files/fr/web/javascript/reference/global_objects/math/clz32/index.md
new file mode 100644
index 0000000000..416bc22e28
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/math/clz32/index.md
@@ -0,0 +1,71 @@
+---
+title: Math.clz32()
+slug: Web/JavaScript/Reference/Global_Objects/Math/clz32
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Math
+  - Méthode
+  - Reference
+  - polyfill
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/clz32
+original_slug: Web/JavaScript/Reference/Objets_globaux/Math/clz32
+---
+{{JSRef}}
+
+La fonction **`Math.clz32()`** renvoie le nombre de zéros de tête dans la représentation binaire sur 32 bits d'un nombre.
+
+{{EmbedInteractiveExample("pages/js/math-clz32.html")}}
+
+## Syntaxe
+
+    Math.clz32(x)
+
+### Paramètres
+
+- `x`
+  - : Un nombre.
+
+### Valeur retournée
+
+Le nombre de bits à zéro en tête de la représentation binaire sur 32 bits du nombre donné.
+
+## Description
+
+"`clz32`" est un raccourci pour CountLeadingZeroes32 (en français, « compter les zéros de tête »).
+
+Si `x` n'est pas un nombre, il sera d'abord converti en nombre puis converti en un entier non signé sur 32 bits.
+
+Si l'entier non signé sur 32 bits résultant vaut `0`, la fonction renverra `32`, car tous les bits valent `0`.
+
+Cette fonction est particulièrement utile aux systèmes qui compilent du code JavaScript, comme [Emscripten](/fr/docs/Emscripten).
+
+## Exemples
+
+```js
+Math.clz32(1)                // 31
+Math.clz32(1000)             // 22
+Math.clz32()                 // 32
+
+var liste = [NaN, Infinity, -Infinity, 0, -0, null, undefined, 'machin', {}, []];
+liste.every(n => Math.clz32(n) == 32); // true
+
+Math.clz32(true)             // 31
+Math.clz32(3.5)              // 30
+```
+
+## Spécifications
+
+| Spécification                                                                | Statut                       | Commentaire          |
+| ---------------------------------------------------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName('ES2015', '#sec-math.clz32', 'Math.clz32')}}     | {{Spec2('ES2015')}}     | Définition initiale. |
+| {{SpecName('ESDraft', '#sec-math.clz32', 'Math.clz32')}} | {{Spec2('ESDraft')}} |                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Math.clz32")}}
+
+## Voir aussi
+
+- {{jsxref("Math")}}
+- {{jsxref("Math.imul")}}
diff --git a/files/fr/web/javascript/reference/global_objects/math/cos/index.html b/files/fr/web/javascript/reference/global_objects/math/cos/index.html
deleted file mode 100644
index 2015708e27..0000000000
--- a/files/fr/web/javascript/reference/global_objects/math/cos/index.html
+++ /dev/null
@@ -1,95 +0,0 @@
----
-title: Math.cos()
-slug: Web/JavaScript/Reference/Global_Objects/Math/cos
-tags:
-  - JavaScript
-  - Math
-  - Méthode
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Math/cos
-original_slug: Web/JavaScript/Reference/Objets_globaux/Math/cos
----
-<div>{{JSRef}}</div>
-
-<p>La fonction <code><strong>Math.cos()</strong></code> retourne le <a href="https://fr.wikipedia.org/wiki/Cosinus">cosinus</a> d'un angle dont la valeur est exprimée en <a href="https://fr.wikipedia.org/wiki/Radian">radians</a>.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/math-cos.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">Math.cos(<var>x</var>)</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>x</code></dt>
- <dd>Une valeur numérique (exprimée en radians).</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Le cosinus de l'angle fourni en argument (exprimé en radians).</p>
-
-<h2 id="Description">Description</h2>
-
-<p>La méthode <code>Math.cos()</code> renvoie une valeur numérique comprise entre -1 et 1. Cela représente la valeur du cosinus de l'angle correspondant à cette valeur.</p>
-
-<p><code>cos</code> est une méthode statique de <code>Math</code>, elle doit toujours être utilisée avec la syntaxe <code>Math.cos()</code>, ne pas utiliser une méthode d'un objet qui aurait été créé (<code>Math</code> n'est pas un constructeur).</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Utiliser_Math.cos()">Utiliser <code>Math.cos()</code></h3>
-
-<pre class="brush:js">Math.cos(0);           // 1
-Math.cos(1);           // 0.5403023058681398
-
-Math.cos(Math.PI);     // -1
-Math.cos(2 * Math.PI); // 1
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES1')}}</td>
-   <td>{{Spec2('ES1')}}</td>
-   <td>Définition initiale. Implémentée avec JavaScript 1.0.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-15.8.2.7', 'Math.cos')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-math.cos', 'Math.cos')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-math.cos', 'Math.cos')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Math.cos")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Math.acos()")}}</li>
- <li>{{jsxref("Math.asin()")}}</li>
- <li>{{jsxref("Math.atan()")}}</li>
- <li>{{jsxref("Math.atan2()")}}</li>
- <li>{{jsxref("Math.sin()")}}</li>
- <li>{{jsxref("Math.tan()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/math/cos/index.md b/files/fr/web/javascript/reference/global_objects/math/cos/index.md
new file mode 100644
index 0000000000..9b78bfd357
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/math/cos/index.md
@@ -0,0 +1,69 @@
+---
+title: Math.cos()
+slug: Web/JavaScript/Reference/Global_Objects/Math/cos
+tags:
+  - JavaScript
+  - Math
+  - Méthode
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/cos
+original_slug: Web/JavaScript/Reference/Objets_globaux/Math/cos
+---
+{{JSRef}}
+
+La fonction **`Math.cos()`** retourne le [cosinus](https://fr.wikipedia.org/wiki/Cosinus) d'un angle dont la valeur est exprimée en [radians](https://fr.wikipedia.org/wiki/Radian).
+
+{{EmbedInteractiveExample("pages/js/math-cos.html")}}
+
+## Syntaxe
+
+    Math.cos(x)
+
+### Paramètres
+
+- `x`
+  - : Une valeur numérique (exprimée en radians).
+
+### Valeur de retour
+
+Le cosinus de l'angle fourni en argument (exprimé en radians).
+
+## Description
+
+La méthode `Math.cos()` renvoie une valeur numérique comprise entre -1 et 1. Cela représente la valeur du cosinus de l'angle correspondant à cette valeur.
+
+`cos` est une méthode statique de `Math`, elle doit toujours être utilisée avec la syntaxe `Math.cos()`, ne pas utiliser une méthode d'un objet qui aurait été créé (`Math` n'est pas un constructeur).
+
+## Exemples
+
+### Utiliser `Math.cos()`
+
+```js
+Math.cos(0);           // 1
+Math.cos(1);           // 0.5403023058681398
+
+Math.cos(Math.PI);     // -1
+Math.cos(2 * Math.PI); // 1
+```
+
+## Spécifications
+
+| Spécification                                                        | État                         | Commentaires                                          |
+| -------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- |
+| {{SpecName('ES1')}}                                             | {{Spec2('ES1')}}         | Définition initiale. Implémentée avec JavaScript 1.0. |
+| {{SpecName('ES5.1', '#sec-15.8.2.7', 'Math.cos')}} | {{Spec2('ES5.1')}}     |                                                       |
+| {{SpecName('ES6', '#sec-math.cos', 'Math.cos')}}     | {{Spec2('ES6')}}         |                                                       |
+| {{SpecName('ESDraft', '#sec-math.cos', 'Math.cos')}} | {{Spec2('ESDraft')}} |                                                       |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Math.cos")}}
+
+## Voir aussi
+
+- {{jsxref("Math.acos()")}}
+- {{jsxref("Math.asin()")}}
+- {{jsxref("Math.atan()")}}
+- {{jsxref("Math.atan2()")}}
+- {{jsxref("Math.sin()")}}
+- {{jsxref("Math.tan()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/math/cosh/index.html b/files/fr/web/javascript/reference/global_objects/math/cosh/index.html
deleted file mode 100644
index 76c7d9fe17..0000000000
--- a/files/fr/web/javascript/reference/global_objects/math/cosh/index.html
+++ /dev/null
@@ -1,103 +0,0 @@
----
-title: Math.cosh()
-slug: Web/JavaScript/Reference/Global_Objects/Math/cosh
-tags:
-  - ECMAScript6
-  - JavaScript
-  - Math
-  - Méthode
-  - Reference
-  - polyfill
-translation_of: Web/JavaScript/Reference/Global_Objects/Math/cosh
-original_slug: Web/JavaScript/Reference/Objets_globaux/Math/cosh
----
-<div>{{JSRef}}</div>
-
-<p>La fonction <code><strong>Math.cosh()</strong></code> renvoie le cosinus hyperbolique d'un nombre, défini par :</p>
-
-<p><math><semantics><mrow><mstyle mathvariant="monospace"><mo lspace="0em" rspace="thinmathspace">Math.cosh(x)</mo></mstyle><mo>=</mo><mfrac><mrow><msup><mi>e</mi><mi>x</mi></msup><mo>+</mo><msup><mi>e</mi><mrow><mo>-</mo><mi>x</mi></mrow></msup></mrow><mn>2</mn></mfrac></mrow><annotation encoding="TeX">\mathtt{\operatorname{Math.cosh(x)}} = \frac{e^x + e^{-x}}{2}</annotation></semantics></math></p>
-
-<div>{{EmbedInteractiveExample("pages/js/math-cosh.html")}}</div>
-
-
-
-<p>(Voir la page sur {{jsxref("Objets_globaux/Math/E","e","",1)}})</p>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">Math.cosh(<var>x</var>)</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>x</code></dt>
- <dd>Un nombre.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Le cosinus hyperbolique du nombre passé en argument.</p>
-
-<h2 id="Description">Description</h2>
-
-<p><code>cosh()</code> étant une méthode statique de <code>Math</code>, il faut utiliser <code>Math.cosh()</code> et non pas la méthode d'un objet <code>Math</code> créé sur mesure (<code>Math</code> n'est pas un constructeur).</p>
-
-<h2 id="Exemple">Exemple</h2>
-
-<h3 id="Utiliser_Math.cosh()">Utiliser <code>Math.cosh()</code></h3>
-
-<pre class="brush:js">Math.cosh(0);  // 1
-Math.cosh(1);  // 1.5430806348152437
-Math.cosh(-1); // 1.5430806348152437
-</pre>
-
-<h2 id="Prothèse_d'émulation_(polyfill)">Prothèse d'émulation (<em>polyfill</em>)</h2>
-
-<p>Cette fonction peut être émulée grâce à la fonction {{jsxref("Objets_globaux/Math/exp", "Math.exp()")}} :</p>
-
-<pre class="brush: js">Math.cosh = Math.cosh || function(x) {
-    return (Math.exp(x) + Math.exp(-x)) / 2;
-}</pre>
-
-<p>On peut également utiliser un unique appel à {{jsxref("Objets_globaux/Math/exp", "exp()")}} :</p>
-
-<pre class="brush: js">Math.cosh = Math.cosh || function(x) {
-    var y = Math.exp(x);
-    return (y + 1 / y) / 2;
-}</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-math.cosh', 'Math.cosh')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-math.cosh', 'Math.cosh')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Math.cosh")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Math.acosh()")}}</li>
- <li>{{jsxref("Math.asinh()")}}</li>
- <li>{{jsxref("Math.atanh()")}}</li>
- <li>{{jsxref("Math.sinh()")}}</li>
- <li>{{jsxref("Math.tanh()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/math/cosh/index.md b/files/fr/web/javascript/reference/global_objects/math/cosh/index.md
new file mode 100644
index 0000000000..d0306213b6
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/math/cosh/index.md
@@ -0,0 +1,87 @@
+---
+title: Math.cosh()
+slug: Web/JavaScript/Reference/Global_Objects/Math/cosh
+tags:
+  - ECMAScript6
+  - JavaScript
+  - Math
+  - Méthode
+  - Reference
+  - polyfill
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/cosh
+original_slug: Web/JavaScript/Reference/Objets_globaux/Math/cosh
+---
+{{JSRef}}
+
+La fonction **`Math.cosh()`** renvoie le cosinus hyperbolique d'un nombre, défini par :
+
+<math><semantics><mrow><mstyle mathvariant="monospace"><mo lspace="0em" rspace="thinmathspace">Math.cosh(x)</mo></mstyle><mo>=</mo><mfrac><mrow><msup><mi>e</mi><mi>x</mi></msup><mo>+</mo><msup><mi>e</mi><mrow><mo>-</mo><mi>x</mi></mrow></msup></mrow><mn>2</mn></mfrac></mrow><annotation encoding="TeX">\mathtt{\operatorname{Math.cosh(x)}} = \frac{e^x + e^{-x}}{2}</annotation></semantics></math>
+
+{{EmbedInteractiveExample("pages/js/math-cosh.html")}}
+
+(Voir la page sur {{jsxref("Objets_globaux/Math/E","e","",1)}})
+
+## Syntaxe
+
+    Math.cosh(x)
+
+### Paramètres
+
+- `x`
+  - : Un nombre.
+
+### Valeur de retour
+
+Le cosinus hyperbolique du nombre passé en argument.
+
+## Description
+
+`cosh()` étant une méthode statique de `Math`, il faut utiliser `Math.cosh()` et non pas la méthode d'un objet `Math` créé sur mesure (`Math` n'est pas un constructeur).
+
+## Exemple
+
+### Utiliser `Math.cosh()`
+
+```js
+Math.cosh(0);  // 1
+Math.cosh(1);  // 1.5430806348152437
+Math.cosh(-1); // 1.5430806348152437
+```
+
+## Prothèse d'émulation (_polyfill_)
+
+Cette fonction peut être émulée grâce à la fonction {{jsxref("Objets_globaux/Math/exp", "Math.exp()")}} :
+
+```js
+Math.cosh = Math.cosh || function(x) {
+    return (Math.exp(x) + Math.exp(-x)) / 2;
+}
+```
+
+On peut également utiliser un unique appel à {{jsxref("Objets_globaux/Math/exp", "exp()")}} :
+
+```js
+Math.cosh = Math.cosh || function(x) {
+    var y = Math.exp(x);
+    return (y + 1 / y) / 2;
+}
+```
+
+## Spécifications
+
+| Spécification                                                            | État                         | Commentaires         |
+| ------------------------------------------------------------------------ | ---------------------------- | -------------------- |
+| {{SpecName('ES6', '#sec-math.cosh', 'Math.cosh')}}     | {{Spec2('ES6')}}         | Définition initiale. |
+| {{SpecName('ESDraft', '#sec-math.cosh', 'Math.cosh')}} | {{Spec2('ESDraft')}} |                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Math.cosh")}}
+
+## Voir aussi
+
+- {{jsxref("Math.acosh()")}}
+- {{jsxref("Math.asinh()")}}
+- {{jsxref("Math.atanh()")}}
+- {{jsxref("Math.sinh()")}}
+- {{jsxref("Math.tanh()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/math/e/index.html b/files/fr/web/javascript/reference/global_objects/math/e/index.html
deleted file mode 100644
index f4df99a2cb..0000000000
--- a/files/fr/web/javascript/reference/global_objects/math/e/index.html
+++ /dev/null
@@ -1,82 +0,0 @@
----
-title: Math.E
-slug: Web/JavaScript/Reference/Global_Objects/Math/E
-tags:
-  - JavaScript
-  - Math
-  - Propriété
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Math/E
-original_slug: Web/JavaScript/Reference/Objets_globaux/Math/E
----
-<div>{{JSRef}}</div>
-
-<p>La propriété <code><strong>Math.E</strong></code> représente la base du logarithme naturel, e, et vaut environ 2.718.</p>
-
-<p><math display="block"><semantics><mrow><mstyle mathvariant="monospace"><mi>Math.E</mi></mstyle><mo>=</mo><mi>e</mi><mo>≈</mo><mn>2.718</mn></mrow><annotation encoding="TeX">\mathtt{\mi{Math.E}} = e \approx 2.718</annotation></semantics></math></p>
-
-<div>{{EmbedInteractiveExample("pages/js/math-e.html")}}</div>
-
-
-
-<div>{{js_property_attributes(0,0,0)}}</div>
-
-<h2 id="Description">Description</h2>
-
-<p><code>E</code> étant une propriété statique de <code>Math</code>, il doit toujours être utilisé avec la syntaxe <code>Math.E</code>, et non pas être appelé comme propriété d'un autre objet <code>Math</code> qui aurait été créé (<code>Math</code> n'est pas un constructeur).</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Utiliser_Math.E">Utiliser <code>Math.E</code></h3>
-
-<p>La fonction suivante renvoie la valeur de e :</p>
-
-<pre class="brush:js">function getNapier() {
-   return Math.E;
-}
-
-getNapier(); // 2.718281828459045</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES1')}}</td>
-   <td>{{Spec2('ES1')}}</td>
-   <td>Définition initiale. Implémentée avec JavaScript 1.0.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-15.8.1.1', 'Math.E')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-math.e', 'Math.E')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-math.e', 'Math.E')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Math.E")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Math.exp()")}}</li>
- <li>{{jsxref("Math.log()")}}</li>
- <li>{{jsxref("Math.log1p()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/math/e/index.md b/files/fr/web/javascript/reference/global_objects/math/e/index.md
new file mode 100644
index 0000000000..540d7769eb
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/math/e/index.md
@@ -0,0 +1,55 @@
+---
+title: Math.E
+slug: Web/JavaScript/Reference/Global_Objects/Math/E
+tags:
+  - JavaScript
+  - Math
+  - Propriété
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/E
+original_slug: Web/JavaScript/Reference/Objets_globaux/Math/E
+---
+{{JSRef}}
+
+La propriété **`Math.E`** représente la base du logarithme naturel, e, et vaut environ 2.718.
+
+<math display="block"><semantics><mrow><mstyle mathvariant="monospace"><mi>Math.E</mi></mstyle><mo>=</mo><mi>e</mi><mo>≈</mo><mn>2.718</mn></mrow><annotation encoding="TeX">\mathtt{\mi{Math.E}} = e \approx 2.718</annotation></semantics></math>
+
+{{EmbedInteractiveExample("pages/js/math-e.html")}}{{js_property_attributes(0,0,0)}}
+
+## Description
+
+`E` étant une propriété statique de `Math`, il doit toujours être utilisé avec la syntaxe `Math.E`, et non pas être appelé comme propriété d'un autre objet `Math` qui aurait été créé (`Math` n'est pas un constructeur).
+
+## Exemples
+
+### Utiliser `Math.E`
+
+La fonction suivante renvoie la valeur de e :
+
+```js
+function getNapier() {
+   return Math.E;
+}
+
+getNapier(); // 2.718281828459045
+```
+
+## Spécifications
+
+| Spécification                                                    | Statut                       | Commentaires                                          |
+| ---------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- |
+| {{SpecName('ES1')}}                                         | {{Spec2('ES1')}}         | Définition initiale. Implémentée avec JavaScript 1.0. |
+| {{SpecName('ES5.1', '#sec-15.8.1.1', 'Math.E')}} | {{Spec2('ES5.1')}}     |                                                       |
+| {{SpecName('ES6', '#sec-math.e', 'Math.E')}}     | {{Spec2('ES6')}}         |                                                       |
+| {{SpecName('ESDraft', '#sec-math.e', 'Math.E')}} | {{Spec2('ESDraft')}} |                                                       |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Math.E")}}
+
+## Voir aussi
+
+- {{jsxref("Math.exp()")}}
+- {{jsxref("Math.log()")}}
+- {{jsxref("Math.log1p()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/math/exp/index.html b/files/fr/web/javascript/reference/global_objects/math/exp/index.html
deleted file mode 100644
index 29ac4ef407..0000000000
--- a/files/fr/web/javascript/reference/global_objects/math/exp/index.html
+++ /dev/null
@@ -1,93 +0,0 @@
----
-title: Math.exp()
-slug: Web/JavaScript/Reference/Global_Objects/Math/exp
-tags:
-  - JavaScript
-  - Math
-  - Méthode
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Math/exp
-original_slug: Web/JavaScript/Reference/Objets_globaux/Math/exp
----
-<div>{{JSRef}}</div>
-
-<p>La fonction <code><strong>Math.exp()</strong></code> renvoie l'exponentielle d'un nombre (donnée par <code>e^x</code>, où <code>x</code> est la valeur passée en argument et <code>e</code> la valeur du {{jsxref("Objets_globaux/Math/E","nombre d'Euler (parfois appelé constante de Napier)","",1)}}.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/math-exp.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">Math.exp(<var>x</var>)</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>x</code></dt>
- <dd>
- <p>Un nombre.</p>
- </dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>L'exponentielle du nombre passé en argument (<code>e^x</code>).</p>
-
-<h2 id="Description">Description</h2>
-
-<p><code>exp()</code> est une méthode statique de <code>Math</code>, elle doit toujours être utilisée avec la syntaxe <code>Math.exp()</code>, elle ne doit pas être utilisée avec un objet qui aurait été créé (<code>Math</code> n'est pas un constructeur).</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Utiliser_Math.exp()">Utiliser <code>Math.exp()</code></h3>
-
-<pre class="brush:js">Math.exp(-1); // 0.36787944117144233
-Math.exp(0);  // 1
-Math.exp(1);  // 2.718281828459045</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES1')}}</td>
-   <td>{{Spec2('ES1')}}</td>
-   <td>Définition initiale. Implémentée avec JavaScript 1.0.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-15.8.2.8', 'Math.exp')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-math.exp', 'Math.exp')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-math.exp', 'Math.exp')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Math.exp")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Math.E")}}</li>
- <li>{{jsxref("Math.expm1()")}}</li>
- <li>{{jsxref("Math.log()")}}</li>
- <li>{{jsxref("Math.log10()")}}</li>
- <li>{{jsxref("Math.log1p()")}}</li>
- <li>{{jsxref("Math.log2()")}}</li>
- <li>{{jsxref("Math.pow()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/math/exp/index.md b/files/fr/web/javascript/reference/global_objects/math/exp/index.md
new file mode 100644
index 0000000000..e6be9fc5c3
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/math/exp/index.md
@@ -0,0 +1,66 @@
+---
+title: Math.exp()
+slug: Web/JavaScript/Reference/Global_Objects/Math/exp
+tags:
+  - JavaScript
+  - Math
+  - Méthode
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/exp
+original_slug: Web/JavaScript/Reference/Objets_globaux/Math/exp
+---
+{{JSRef}}
+
+La fonction **`Math.exp()`** renvoie l'exponentielle d'un nombre (donnée par `e^x`, où `x` est la valeur passée en argument et `e` la valeur du {{jsxref("Objets_globaux/Math/E","nombre d'Euler (parfois appelé constante de Napier)","",1)}}.
+
+{{EmbedInteractiveExample("pages/js/math-exp.html")}}
+
+## Syntaxe
+
+    Math.exp(x)
+
+### Paramètres
+
+- `x`
+  - : Un nombre.
+
+### Valeur de retour
+
+L'exponentielle du nombre passé en argument (`e^x`).
+
+## Description
+
+`exp()` est une méthode statique de `Math`, elle doit toujours être utilisée avec la syntaxe `Math.exp()`, elle ne doit pas être utilisée avec un objet qui aurait été créé (`Math` n'est pas un constructeur).
+
+## Exemples
+
+### Utiliser `Math.exp()`
+
+```js
+Math.exp(-1); // 0.36787944117144233
+Math.exp(0);  // 1
+Math.exp(1);  // 2.718281828459045
+```
+
+## Spécifications
+
+| Spécification                                                        | État                         | Commentaires                                          |
+| -------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- |
+| {{SpecName('ES1')}}                                             | {{Spec2('ES1')}}         | Définition initiale. Implémentée avec JavaScript 1.0. |
+| {{SpecName('ES5.1', '#sec-15.8.2.8', 'Math.exp')}} | {{Spec2('ES5.1')}}     |                                                       |
+| {{SpecName('ES6', '#sec-math.exp', 'Math.exp')}}     | {{Spec2('ES6')}}         |                                                       |
+| {{SpecName('ESDraft', '#sec-math.exp', 'Math.exp')}} | {{Spec2('ESDraft')}} |                                                       |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Math.exp")}}
+
+## Voir aussi
+
+- {{jsxref("Math.E")}}
+- {{jsxref("Math.expm1()")}}
+- {{jsxref("Math.log()")}}
+- {{jsxref("Math.log10()")}}
+- {{jsxref("Math.log1p()")}}
+- {{jsxref("Math.log2()")}}
+- {{jsxref("Math.pow()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/math/expm1/index.html b/files/fr/web/javascript/reference/global_objects/math/expm1/index.html
deleted file mode 100644
index 372880a5df..0000000000
--- a/files/fr/web/javascript/reference/global_objects/math/expm1/index.html
+++ /dev/null
@@ -1,91 +0,0 @@
----
-title: Math.expm1()
-slug: Web/JavaScript/Reference/Global_Objects/Math/expm1
-tags:
-  - ECMAScript6
-  - JavaScript
-  - Math
-  - Méthode
-  - Reference
-  - polyfill
-translation_of: Web/JavaScript/Reference/Global_Objects/Math/expm1
-original_slug: Web/JavaScript/Reference/Objets_globaux/Math/expm1
----
-<div>{{JSRef}}</div>
-
-<p>La fonction <code><strong>Math.expm1()</strong></code> renvoie<code> e^x</code> - 1, avec <code>x</code> l'argument donné et {{jsxref("Objets_globaux/Math/E","e")}} la base du logarithme nepérien.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/math-expm1.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">Math.expm1(<var>x</var>)</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>x</code></dt>
- <dd>Un nombre.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Un nombre qui représente <code>e^x- 1</code> où <code>x</code> est la valeur passée en argument et <code>e^x</code> l'exponentielle du nombre.</p>
-
-<h2 id="Description">Description</h2>
-
-<p><code>expm1()</code> étant une méthode statique de <code>Math</code>, il faut utiliser <code>Math.expm1()</code>et non pas la méthode d'un autre objet qui aurait été créé sur mesure (<code>Math </code>n'est pas un constructeur).</p>
-
-<h2 id="Exemple">Exemple</h2>
-
-<h3 id="Utiliser_Math.expm1()">Utiliser <code>Math.expm1()</code></h3>
-
-<pre class="brush:js">Math.expm1(-1); // -0.6321205588285577
-Math.expm1(0);  // 0
-Math.expm1(1);  // 1.718281828459045</pre>
-
-<h2 id="Prothèse_d'émulation_(polyfill)">Prothèse d'émulation (<em>polyfill</em>)</h2>
-
-<p>Cette fonction peut être émulée en utilisant la fonction {{jsxref("Objets_globaux/Math/exp", "Math.exp()")}} :</p>
-
-<pre class="brush: js">Math.expm1 = Math.expm1 || function(x) {
-    return Math.exp(x) - 1;
-};</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-math.expm1', 'Math.expm1')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-math.expm1', 'Math.expm1')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Math.expm1")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Math.E")}}</li>
- <li>{{jsxref("Math.exp()")}}</li>
- <li>{{jsxref("Math.log()")}}</li>
- <li>{{jsxref("Math.log10()")}}</li>
- <li>{{jsxref("Math.log1p()")}}</li>
- <li>{{jsxref("Math.log2()")}}</li>
- <li>{{jsxref("Math.pow()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/math/expm1/index.md b/files/fr/web/javascript/reference/global_objects/math/expm1/index.md
new file mode 100644
index 0000000000..2d8223041f
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/math/expm1/index.md
@@ -0,0 +1,76 @@
+---
+title: Math.expm1()
+slug: Web/JavaScript/Reference/Global_Objects/Math/expm1
+tags:
+  - ECMAScript6
+  - JavaScript
+  - Math
+  - Méthode
+  - Reference
+  - polyfill
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/expm1
+original_slug: Web/JavaScript/Reference/Objets_globaux/Math/expm1
+---
+{{JSRef}}
+
+La fonction **`Math.expm1()`** renvoie` e^x` - 1, avec `x` l'argument donné et {{jsxref("Objets_globaux/Math/E","e")}} la base du logarithme nepérien.
+
+{{EmbedInteractiveExample("pages/js/math-expm1.html")}}
+
+## Syntaxe
+
+    Math.expm1(x)
+
+### Paramètres
+
+- `x`
+  - : Un nombre.
+
+### Valeur de retour
+
+Un nombre qui représente `e^x- 1` où `x` est la valeur passée en argument et `e^x` l'exponentielle du nombre.
+
+## Description
+
+`expm1()` étant une méthode statique de `Math`, il faut utiliser `Math.expm1()`et non pas la méthode d'un autre objet qui aurait été créé sur mesure (`Math `n'est pas un constructeur).
+
+## Exemple
+
+### Utiliser `Math.expm1()`
+
+```js
+Math.expm1(-1); // -0.6321205588285577
+Math.expm1(0);  // 0
+Math.expm1(1);  // 1.718281828459045
+```
+
+## Prothèse d'émulation (_polyfill_)
+
+Cette fonction peut être émulée en utilisant la fonction {{jsxref("Objets_globaux/Math/exp", "Math.exp()")}} :
+
+```js
+Math.expm1 = Math.expm1 || function(x) {
+    return Math.exp(x) - 1;
+};
+```
+
+## Spécifications
+
+| Spécification                                                                | État                         | Commentaires         |
+| ---------------------------------------------------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName('ES6', '#sec-math.expm1', 'Math.expm1')}}         | {{Spec2('ES6')}}         | Définition initiale. |
+| {{SpecName('ESDraft', '#sec-math.expm1', 'Math.expm1')}} | {{Spec2('ESDraft')}} |                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Math.expm1")}}
+
+## Voir aussi
+
+- {{jsxref("Math.E")}}
+- {{jsxref("Math.exp()")}}
+- {{jsxref("Math.log()")}}
+- {{jsxref("Math.log10()")}}
+- {{jsxref("Math.log1p()")}}
+- {{jsxref("Math.log2()")}}
+- {{jsxref("Math.pow()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/math/floor/index.html b/files/fr/web/javascript/reference/global_objects/math/floor/index.html
deleted file mode 100644
index 4b9a6e5422..0000000000
--- a/files/fr/web/javascript/reference/global_objects/math/floor/index.html
+++ /dev/null
@@ -1,97 +0,0 @@
----
-title: Math.floor()
-slug: Web/JavaScript/Reference/Global_Objects/Math/floor
-tags:
-  - JavaScript
-  - Math
-  - Méthode
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Math/floor
-original_slug: Web/JavaScript/Reference/Objets_globaux/Math/floor
----
-<div>{{JSRef}}</div>
-
-<p>La fonction <code><strong>Math.floor(x)</strong></code> renvoie le plus grand entier qui est inférieur ou égal à un nombre <code>x</code>.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/math-floor.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">Math.floor(<var>x</var>)</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>x</code></dt>
- <dd>Un nombre.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Un nombre qui représente le plus grand entier inférieur ou égal à la valeur passée en argument.</p>
-
-<h2 id="Description">Description</h2>
-
-<p><code>floor()</code> est une méthode statique de l'objet <code>Math</code>, elle doit toujours être utilisée avec la syntaxe  <code>Math.floor()</code>, elle ne doit pas être utilisée avec un autre objet qui aurait été créé (<code>Math</code> n'est pas un constructeur).</p>
-
-<div class="blockIndicator note">
-<p><strong>Note :</strong> <code>Math.floor(null)</code> renvoie <code>0</code> et pas {{jsxref("NaN")}}.</p>
-</div>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Utiliser_Math.floor">Utiliser <code>Math.floor</code></h3>
-
-<pre class="brush:js">Math.floor( 45.95); //  45
-Math.floor( 45.05); //  45
-Math.floor(  4   ); //   4
-Math.floor(-45.05); // -46
-Math.floor(-45.95); // -46
-Math.floor(null);   // 0
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES1')}}</td>
-   <td>{{Spec2('ES1')}}</td>
-   <td>Définition initiale. Implémentée avec JavaScript 1.0.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-15.8.2.9', 'Math.floor')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-math.floor', 'Math.floor')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-math.floor', 'Math.floor')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Math.floor")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Math.abs()")}}</li>
- <li>{{jsxref("Math.ceil()")}}</li>
- <li>{{jsxref("Math.round()")}}</li>
- <li>{{jsxref("Math.sign()")}}</li>
- <li>{{jsxref("Math.trunc()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/math/floor/index.md b/files/fr/web/javascript/reference/global_objects/math/floor/index.md
new file mode 100644
index 0000000000..65bc3d23fc
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/math/floor/index.md
@@ -0,0 +1,69 @@
+---
+title: Math.floor()
+slug: Web/JavaScript/Reference/Global_Objects/Math/floor
+tags:
+  - JavaScript
+  - Math
+  - Méthode
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/floor
+original_slug: Web/JavaScript/Reference/Objets_globaux/Math/floor
+---
+{{JSRef}}
+
+La fonction **`Math.floor(x)`** renvoie le plus grand entier qui est inférieur ou égal à un nombre `x`.
+
+{{EmbedInteractiveExample("pages/js/math-floor.html")}}
+
+## Syntaxe
+
+    Math.floor(x)
+
+### Paramètres
+
+- `x`
+  - : Un nombre.
+
+### Valeur de retour
+
+Un nombre qui représente le plus grand entier inférieur ou égal à la valeur passée en argument.
+
+## Description
+
+`floor()` est une méthode statique de l'objet `Math`, elle doit toujours être utilisée avec la syntaxe  `Math.floor()`, elle ne doit pas être utilisée avec un autre objet qui aurait été créé (`Math` n'est pas un constructeur).
+
+> **Note :** `Math.floor(null)` renvoie `0` et pas {{jsxref("NaN")}}.
+
+## Exemples
+
+### Utiliser `Math.floor`
+
+```js
+Math.floor( 45.95); //  45
+Math.floor( 45.05); //  45
+Math.floor(  4   ); //   4
+Math.floor(-45.05); // -46
+Math.floor(-45.95); // -46
+Math.floor(null);   // 0
+```
+
+## Spécifications
+
+| Spécification                                                                | État                         | Commentaires                                          |
+| ---------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- |
+| {{SpecName('ES1')}}                                                     | {{Spec2('ES1')}}         | Définition initiale. Implémentée avec JavaScript 1.0. |
+| {{SpecName('ES5.1', '#sec-15.8.2.9', 'Math.floor')}}         | {{Spec2('ES5.1')}}     |                                                       |
+| {{SpecName('ES6', '#sec-math.floor', 'Math.floor')}}         | {{Spec2('ES6')}}         |                                                       |
+| {{SpecName('ESDraft', '#sec-math.floor', 'Math.floor')}} | {{Spec2('ESDraft')}} |                                                       |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Math.floor")}}
+
+## Voir aussi
+
+- {{jsxref("Math.abs()")}}
+- {{jsxref("Math.ceil()")}}
+- {{jsxref("Math.round()")}}
+- {{jsxref("Math.sign()")}}
+- {{jsxref("Math.trunc()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/math/fround/index.html b/files/fr/web/javascript/reference/global_objects/math/fround/index.html
deleted file mode 100644
index 6b5ec47735..0000000000
--- a/files/fr/web/javascript/reference/global_objects/math/fround/index.html
+++ /dev/null
@@ -1,86 +0,0 @@
----
-title: Math.fround()
-slug: Web/JavaScript/Reference/Global_Objects/Math/fround
-tags:
-  - ECMAScript6
-  - JavaScript
-  - Math
-  - Méthode
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Math/fround
-original_slug: Web/JavaScript/Reference/Objets_globaux/Math/fround
----
-<div>{{JSRef}}</div>
-
-<p>La fonction <code><strong>Math.fround()</strong></code> renvoie le nombre flottant à <a class="external" href="https://en.wikipedia.org/wiki/Single_precision" title="link to the wikipedia page on single precision">précision simple</a> sur 32 bits qui est le plus proche du nombre fourni.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/math-fround.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">Math.fround(<var>x</var>)</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>x</code></dt>
- <dd>Un nombre.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Le nombre flottant à précision simple sur 32 bits qui est le plus proche de la valeur fournie en argument.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>Un moteur JavaScript utilise des nombres flottant à précision simple sur 64 bits. Cela permet d'obtenir une précision fine. Toutefois, lorsqu'on manipule des valeurs représentées sur 32 bits (par exemple des valeurs extraites d'un {{jsxref("Float32Array")}}) et qu'on souhaite comparer celles-ci avec des valeurs sur 32 bits, on peut obtenir des inégalités alors que les valeurs semblent identiques.</p>
-
-<p>Pour résoudre ce problème, on peut utiliser <code>Math.fround()</code> afin de transformer un nombre représenté sur 64 bits en un nombre représenté sur 32 bits. Pour le moteur JavaScript, la valeur sera toujours représentée sur 64 bits mais elle aura été « arrondie » à partir du 23e bit de la mantisse. Si le nombre passé en argument se situe en dehors de l'intervalle représentable sur 32 bits, la méthode renverra {{jsxref("Infinity")}} ou <code>-Infinity</code>.</p>
-
-<p><code>fround </code>étant une méthode statique de <code>Math</code>, il faut utiliser <code>Math.<code>fround</code>()</code> et non pas la méthode d'un autre objet qui aurait été créé (<code>Math</code> n'est pas un constructeur).</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Utiliser_Math.fround()">Utiliser <code>Math.fround()</code></h3>
-
-<pre class="brush: js">Math.fround(0);     // 0
-Math.fround(1);     // 1
-
-// 1.337 ne peut pas être représenté correctement
-// sur 32 bits
-Math.fround(1.337); // 1.3370000123977661
-
-Math.fround(1.5);   // 1.5
-Math.fround(NaN);   // NaN</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-math.fround', 'Math.fround')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-math.fround', 'Math.fround')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Math.fround")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Math.round()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/math/fround/index.md b/files/fr/web/javascript/reference/global_objects/math/fround/index.md
new file mode 100644
index 0000000000..77cf804d99
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/math/fround/index.md
@@ -0,0 +1,69 @@
+---
+title: Math.fround()
+slug: Web/JavaScript/Reference/Global_Objects/Math/fround
+tags:
+  - ECMAScript6
+  - JavaScript
+  - Math
+  - Méthode
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/fround
+original_slug: Web/JavaScript/Reference/Objets_globaux/Math/fround
+---
+{{JSRef}}
+
+La fonction **`Math.fround()`** renvoie le nombre flottant à [précision simple](https://en.wikipedia.org/wiki/Single_precision "link to the wikipedia page on single precision") sur 32 bits qui est le plus proche du nombre fourni.
+
+{{EmbedInteractiveExample("pages/js/math-fround.html")}}
+
+## Syntaxe
+
+    Math.fround(x)
+
+### Paramètres
+
+- `x`
+  - : Un nombre.
+
+### Valeur de retour
+
+Le nombre flottant à précision simple sur 32 bits qui est le plus proche de la valeur fournie en argument.
+
+## Description
+
+Un moteur JavaScript utilise des nombres flottant à précision simple sur 64 bits. Cela permet d'obtenir une précision fine. Toutefois, lorsqu'on manipule des valeurs représentées sur 32 bits (par exemple des valeurs extraites d'un {{jsxref("Float32Array")}}) et qu'on souhaite comparer celles-ci avec des valeurs sur 32 bits, on peut obtenir des inégalités alors que les valeurs semblent identiques.
+
+Pour résoudre ce problème, on peut utiliser `Math.fround()` afin de transformer un nombre représenté sur 64 bits en un nombre représenté sur 32 bits. Pour le moteur JavaScript, la valeur sera toujours représentée sur 64 bits mais elle aura été « arrondie » à partir du 23e bit de la mantisse. Si le nombre passé en argument se situe en dehors de l'intervalle représentable sur 32 bits, la méthode renverra {{jsxref("Infinity")}} ou `-Infinity`.
+
+`fround `étant une méthode statique de `Math`, il faut utiliser `Math.fround()` et non pas la méthode d'un autre objet qui aurait été créé (`Math` n'est pas un constructeur).
+
+## Exemples
+
+### Utiliser `Math.fround()`
+
+```js
+Math.fround(0);     // 0
+Math.fround(1);     // 1
+
+// 1.337 ne peut pas être représenté correctement
+// sur 32 bits
+Math.fround(1.337); // 1.3370000123977661
+
+Math.fround(1.5);   // 1.5
+Math.fround(NaN);   // NaN
+```
+
+## Spécifications
+
+| Spécification                                                                | État                         | Commentaires         |
+| ---------------------------------------------------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName('ES6', '#sec-math.fround', 'Math.fround')}}     | {{Spec2('ES6')}}         | Définition initiale. |
+| {{SpecName('ESDraft', '#sec-math.fround', 'Math.fround')}} | {{Spec2('ESDraft')}} |                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Math.fround")}}
+
+## Voir aussi
+
+- {{jsxref("Math.round()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/math/hypot/index.html b/files/fr/web/javascript/reference/global_objects/math/hypot/index.html
deleted file mode 100644
index bba9aaebe8..0000000000
--- a/files/fr/web/javascript/reference/global_objects/math/hypot/index.html
+++ /dev/null
@@ -1,126 +0,0 @@
----
-title: Math.hypot()
-slug: Web/JavaScript/Reference/Global_Objects/Math/hypot
-tags:
-  - ECMAScript6
-  - JavaScript
-  - Math
-  - Méthode
-  - Reference
-  - polyfill
-translation_of: Web/JavaScript/Reference/Global_Objects/Math/hypot
-original_slug: Web/JavaScript/Reference/Objets_globaux/Math/hypot
----
-<div>{{JSRef}}</div>
-
-<p>La fonction <code><strong>Math.hypot()</strong></code> renvoie la racine carrée de la somme des carrés de ses arguments. On peut également la définir avec la formule suivante :</p>
-
-<p><math display="block"><semantics><mrow><mstyle mathvariant="monospace"><mrow><mo lspace="0em" rspace="thinmathspace">Math.hypot</mo><mo stretchy="false">(</mo><msub><mi>v</mi><mn>1</mn></msub><mo>,</mo><msub><mi>v</mi><mn>2</mn></msub><mo>,</mo><mo>…</mo><mo>,</mo><msub><mi>v</mi><mi>n</mi></msub><mo stretchy="false">)</mo></mrow></mstyle><mo>=</mo><msqrt><mrow><munderover><mo>∑</mo><mrow><mi>i</mi><mo>=</mo><mn>1</mn></mrow><mi>n</mi></munderover><msubsup><mi>v</mi><mi>i</mi><mn>2</mn></msubsup></mrow></msqrt><mo>=</mo><msqrt><mrow><msubsup><mi>v</mi><mn>1</mn><mn>2</mn></msubsup><mo>+</mo><msubsup><mi>v</mi><mn>2</mn><mn>2</mn></msubsup><mo>+</mo><mo>…</mo><mo>+</mo><msubsup><mi>v</mi><mi>n</mi><mn>2</mn></msubsup></mrow></msqrt></mrow><annotation encoding="TeX">\mathtt{\operatorname{Math.hypot}(v_1, v_2, \dots, v_n)} = \sqrt{\sum_{i=1}^n v_i^2} = \sqrt{v_1^2 + v_2^2 + \dots + v_n^2}</annotation></semantics></math></p>
-
-<div>{{EmbedInteractiveExample("pages/js/math-hypot.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">Math.hypot([valeur<var>1</var>[,<var>valeur2</var>, ...]]) </pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>valeur1, valeur2, ...</code></dt>
- <dd>Des nombres.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>La racine carrée de la somme des carrés des arguments. S'il existe un des arguments qui ne peut pas être converti en un nombre, c'est la valeur {{jsxref("NaN")}} qui sera renvoyée.</p>
-
-<h2 id="Description">Description</h2>
-
-<p><code>hypot()</code> étant une méthode statique de <code>Math</code>, il faut utiliser <code>Math.<code>hypot</code>()</code>et non pas la méthode d'un autre objet qui aurait été créé (<code>Math</code> n'est pas un constructeur).</p>
-
-<p>Si aucun argument n'est donné, le résultat sera +0.Si, parmi les arguments, au moins un ne peut pas être converti en un nombre, le résultat sera {{jsxref("NaN")}}.Si cette fonction est utilisée avec un argument : <code>Math.hypot(x)</code> sera équivalente à <code>Math.abs(x)</code>.</p>
-
-<p>Cette fonction permet entre autres de gérer certains cas où, pour les grands nombres, l'utilisation de {{jsxref("Math.sqrt()")}} aurait renvoyé {{jsxref("Infinity")}} à cause des calculs intermédiaires.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Utiliser_Math.hypot()">Utiliser <code>Math.hypot()</code></h3>
-
-<pre class="brush:js">Math.hypot(3, 4)        // 5
-Math.hypot(3, 4, 5)     // 7.0710678118654755
-Math.hypot()            // 0
-Math.hypot(NaN)         // NaN
-Math.hypot(3, 4, "toto") // NaN, +"toto" =&gt; NaN
-Math.hypot(3, 4, "5")   // 7.0710678118654755, +"5" =&gt; 5
-Math.hypot(-3)          // 3, the same as Math.abs(-3)
-</pre>
-
-<h2 id="Prothèse_d'émulation_(polyfill)">Prothèse d'émulation (<em>polyfill</em>)</h2>
-
-<p>Si elle n'est pas disponible, cette fonction peut être émulée de la façon suivante :</p>
-
-<pre class="brush: js">Math.hypot =  Math.hypot || function() {
-    var y = 0;
-    var length = arguments.length;
-
-    for (var i = 0; i &lt; length; i++) {
-      if(arguments[i] === Infinity || arguments[i] === -Infinity) {
-        return Infinity;
-      }
-      y += arguments[i] * arguments[i];
-    }
-    return Math.sqrt(y);
-};
-</pre>
-
-<p>Voici une seconde version qui évite les dépassements :</p>
-
-<pre class="brush: js">Math.hypot = function (x, y) {
-  // https://bugzilla.mozilla.org/show_bug.cgi?id=896264#c28
-  var max = 0;
-  var s = 0;
-  for (var i = 0; i &lt; arguments.length; i += 1) {
-    var arg = Math.abs(Number(arguments[i]));
-    if (arg &gt; max) {
-      s *= (max / arg) * (max / arg);
-      max = arg;
-    }
-    s += arg === 0 &amp;&amp; max === 0 ? 0 : (arg / max) * (arg / max);
-  }
-  return max === 1 / 0 ? 1 / 0 : max * Math.sqrt(s);
-};
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-math.hypot', 'Math.hypot')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td>Définition initiale</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-math.hypot', 'Math.hypot')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Math.hypot")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Math.abs()")}}</li>
- <li>{{jsxref("Math.pow()")}}</li>
- <li>{{jsxref("Math.sqrt()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/math/hypot/index.md b/files/fr/web/javascript/reference/global_objects/math/hypot/index.md
new file mode 100644
index 0000000000..977f6c4965
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/math/hypot/index.md
@@ -0,0 +1,110 @@
+---
+title: Math.hypot()
+slug: Web/JavaScript/Reference/Global_Objects/Math/hypot
+tags:
+  - ECMAScript6
+  - JavaScript
+  - Math
+  - Méthode
+  - Reference
+  - polyfill
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/hypot
+original_slug: Web/JavaScript/Reference/Objets_globaux/Math/hypot
+---
+{{JSRef}}
+
+La fonction **`Math.hypot()`** renvoie la racine carrée de la somme des carrés de ses arguments. On peut également la définir avec la formule suivante :
+
+<math display="block"><semantics><mrow><mstyle mathvariant="monospace"><mrow><mo lspace="0em" rspace="thinmathspace">Math.hypot</mo><mo stretchy="false">(</mo><msub><mi>v</mi><mn>1</mn></msub><mo>,</mo><msub><mi>v</mi><mn>2</mn></msub><mo>,</mo><mo>…</mo><mo>,</mo><msub><mi>v</mi><mi>n</mi></msub><mo stretchy="false">)</mo></mrow></mstyle><mo>=</mo><msqrt><mrow><munderover><mo>∑</mo><mrow><mi>i</mi><mo>=</mo><mn>1</mn></mrow><mi>n</mi></munderover><msubsup><mi>v</mi><mi>i</mi><mn>2</mn></msubsup></mrow></msqrt><mo>=</mo><msqrt><mrow><msubsup><mi>v</mi><mn>1</mn><mn>2</mn></msubsup><mo>+</mo><msubsup><mi>v</mi><mn>2</mn><mn>2</mn></msubsup><mo>+</mo><mo>…</mo><mo>+</mo><msubsup><mi>v</mi><mi>n</mi><mn>2</mn></msubsup></mrow></msqrt></mrow><annotation encoding="TeX">\mathtt{\operatorname{Math.hypot}(v*1, v_2, \dots, v_n)} = \sqrt{\sum*{i=1}^n v_i^2} = \sqrt{v_1^2 + v_2^2 + \dots + v_n^2}</annotation></semantics></math>
+
+{{EmbedInteractiveExample("pages/js/math-hypot.html")}}
+
+## Syntaxe
+
+    Math.hypot([valeur1[,valeur2, ...]])
+
+### Paramètres
+
+- `valeur1, valeur2, ...`
+  - : Des nombres.
+
+### Valeur de retour
+
+La racine carrée de la somme des carrés des arguments. S'il existe un des arguments qui ne peut pas être converti en un nombre, c'est la valeur {{jsxref("NaN")}} qui sera renvoyée.
+
+## Description
+
+`hypot()` étant une méthode statique de `Math`, il faut utiliser `Math.hypot()`et non pas la méthode d'un autre objet qui aurait été créé (`Math` n'est pas un constructeur).
+
+Si aucun argument n'est donné, le résultat sera +0.Si, parmi les arguments, au moins un ne peut pas être converti en un nombre, le résultat sera {{jsxref("NaN")}}.Si cette fonction est utilisée avec un argument : `Math.hypot(x)` sera équivalente à `Math.abs(x)`.
+
+Cette fonction permet entre autres de gérer certains cas où, pour les grands nombres, l'utilisation de {{jsxref("Math.sqrt()")}} aurait renvoyé {{jsxref("Infinity")}} à cause des calculs intermédiaires.
+
+## Exemples
+
+### Utiliser `Math.hypot()`
+
+```js
+Math.hypot(3, 4)        // 5
+Math.hypot(3, 4, 5)     // 7.0710678118654755
+Math.hypot()            // 0
+Math.hypot(NaN)         // NaN
+Math.hypot(3, 4, "toto") // NaN, +"toto" => NaN
+Math.hypot(3, 4, "5")   // 7.0710678118654755, +"5" => 5
+Math.hypot(-3)          // 3, the same as Math.abs(-3)
+```
+
+## Prothèse d'émulation (_polyfill_)
+
+Si elle n'est pas disponible, cette fonction peut être émulée de la façon suivante :
+
+```js
+Math.hypot =  Math.hypot || function() {
+    var y = 0;
+    var length = arguments.length;
+
+    for (var i = 0; i < length; i++) {
+      if(arguments[i] === Infinity || arguments[i] === -Infinity) {
+        return Infinity;
+      }
+      y += arguments[i] * arguments[i];
+    }
+    return Math.sqrt(y);
+};
+```
+
+Voici une seconde version qui évite les dépassements :
+
+```js
+Math.hypot = function (x, y) {
+  // https://bugzilla.mozilla.org/show_bug.cgi?id=896264#c28
+  var max = 0;
+  var s = 0;
+  for (var i = 0; i < arguments.length; i += 1) {
+    var arg = Math.abs(Number(arguments[i]));
+    if (arg > max) {
+      s *= (max / arg) * (max / arg);
+      max = arg;
+    }
+    s += arg === 0 && max === 0 ? 0 : (arg / max) * (arg / max);
+  }
+  return max === 1 / 0 ? 1 / 0 : max * Math.sqrt(s);
+};
+```
+
+## Spécifications
+
+| Spécification                                                                | État                         | Commentaires        |
+| ---------------------------------------------------------------------------- | ---------------------------- | ------------------- |
+| {{SpecName('ES2015', '#sec-math.hypot', 'Math.hypot')}}     | {{Spec2('ES2015')}}     | Définition initiale |
+| {{SpecName('ESDraft', '#sec-math.hypot', 'Math.hypot')}} | {{Spec2('ESDraft')}} |                     |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Math.hypot")}}
+
+## Voir aussi
+
+- {{jsxref("Math.abs()")}}
+- {{jsxref("Math.pow()")}}
+- {{jsxref("Math.sqrt()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/math/imul/index.html b/files/fr/web/javascript/reference/global_objects/math/imul/index.html
deleted file mode 100644
index bdfb591384..0000000000
--- a/files/fr/web/javascript/reference/global_objects/math/imul/index.html
+++ /dev/null
@@ -1,90 +0,0 @@
----
-title: Math.imul()
-slug: Web/JavaScript/Reference/Global_Objects/Math/imul
-tags:
-  - JavaScript
-  - Math
-  - Méthode
-  - Reference
-  - polyfill
-translation_of: Web/JavaScript/Reference/Global_Objects/Math/imul
-original_slug: Web/JavaScript/Reference/Objets_globaux/Math/imul
----
-<div>{{JSRef}}</div>
-
-<p>La fonction <code><strong>Math.imul()</strong></code> renvoie le résultat de la multiplication de deux nombres, calculée avec la représentation sur 32 bits de ces nombres, à la façon du langage C.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/math-imul.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">Math.imul(<var>a</var>, <var>b</var>)</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>a</code></dt>
- <dd>Le premier nombre.</dd>
- <dt><code>b</code></dt>
- <dd>Le second nombre.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Le résultat de la multiplication sur 32 bits des valeurs passées en argument (comme en C).</p>
-
-<h2 id="Description">Description</h2>
-
-<p><code>Math.imul()</code> permet d'effectuer une multiplication rapide pour des entiers sur 32 bits avec une sémantique proche du langage C. Cela est utile pour des aspects de performance, notamment pour des projets comme <a href="/fr/docs/Mozilla/Projects/Emscripten">Emscripten</a>. <code>imul() </code>étant une méthode statique de <code>Math</code>, il faut utiliser <code>Math.<code>imul</code>()</code> et non pas la méthode d'un autre objet qui aurait été créé (<code>Math</code> n'est pas un constructeur). Attention à l'utilisation de nombres flottants avec <code>Math.imul()</code> car cela implique une opération de conversion des flottants vers les entiers pour la multiplication puis une opération de conversion du résultat en flottant. Dans la pratique, <code>Math</code><code>.imul()</code> est notamment pertinent pour asm.js.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Utiliser_Math.imul()">Utiliser <code>Math.imul()</code></h3>
-
-<pre class="brush: js">Math.imul(2, 4);          // 8
-Math.imul(-1, 8);         //-8
-Math.imul(-2, -2);        // 4
-Math.imul(0xffffffff, 5); //-5
-Math.imul(0xfffffffe, 5); //-10
-</pre>
-
-<h2 id="Prothèse_d'émulation_(polyfill)">Prothèse d'émulation (<em>polyfill</em>)</h2>
-
-<p>Si elle n'est pas disponible, cette fonction peut être émulée de la façon suivante :</p>
-
-<pre class="brush: js">Math.imul = Math.imul || function(a, b) {
-  var ah  = (a &gt;&gt;&gt; 16) &amp; 0xffff;
-  var al = a &amp; 0xffff;
-  var bh  = (b &gt;&gt;&gt; 16) &amp; 0xffff;
-  var bl = b &amp; 0xffff;
-  // Le décalage par 0 rétablit le signe de la partie haute
-  // le |0 final convertit la valeur non-signée en une valeur signée
-  return ((al * bl) + (((ah * bl + al * bh) &lt;&lt; 16) &gt;&gt;&gt; 0)|0);
-};
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-math.imul', 'Math.imul')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td>Définition initiale</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-math.imul', 'Math.imul')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Math.imul")}}</p>
diff --git a/files/fr/web/javascript/reference/global_objects/math/imul/index.md b/files/fr/web/javascript/reference/global_objects/math/imul/index.md
new file mode 100644
index 0000000000..507c94f070
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/math/imul/index.md
@@ -0,0 +1,75 @@
+---
+title: Math.imul()
+slug: Web/JavaScript/Reference/Global_Objects/Math/imul
+tags:
+  - JavaScript
+  - Math
+  - Méthode
+  - Reference
+  - polyfill
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/imul
+original_slug: Web/JavaScript/Reference/Objets_globaux/Math/imul
+---
+{{JSRef}}
+
+La fonction **`Math.imul()`** renvoie le résultat de la multiplication de deux nombres, calculée avec la représentation sur 32 bits de ces nombres, à la façon du langage C.
+
+{{EmbedInteractiveExample("pages/js/math-imul.html")}}
+
+## Syntaxe
+
+    Math.imul(a, b)
+
+### Paramètres
+
+- `a`
+  - : Le premier nombre.
+- `b`
+  - : Le second nombre.
+
+### Valeur de retour
+
+Le résultat de la multiplication sur 32 bits des valeurs passées en argument (comme en C).
+
+## Description
+
+`Math.imul()` permet d'effectuer une multiplication rapide pour des entiers sur 32 bits avec une sémantique proche du langage C. Cela est utile pour des aspects de performance, notamment pour des projets comme [Emscripten](/fr/docs/Mozilla/Projects/Emscripten). `imul() `étant une méthode statique de `Math`, il faut utiliser `Math.imul()` et non pas la méthode d'un autre objet qui aurait été créé (`Math` n'est pas un constructeur). Attention à l'utilisation de nombres flottants avec `Math.imul()` car cela implique une opération de conversion des flottants vers les entiers pour la multiplication puis une opération de conversion du résultat en flottant. Dans la pratique, ` Math``.imul() ` est notamment pertinent pour asm.js.
+
+## Exemples
+
+### Utiliser `Math.imul()`
+
+```js
+Math.imul(2, 4);          // 8
+Math.imul(-1, 8);         //-8
+Math.imul(-2, -2);        // 4
+Math.imul(0xffffffff, 5); //-5
+Math.imul(0xfffffffe, 5); //-10
+```
+
+## Prothèse d'émulation (_polyfill_)
+
+Si elle n'est pas disponible, cette fonction peut être émulée de la façon suivante :
+
+```js
+Math.imul = Math.imul || function(a, b) {
+  var ah  = (a >>> 16) & 0xffff;
+  var al = a & 0xffff;
+  var bh  = (b >>> 16) & 0xffff;
+  var bl = b & 0xffff;
+  // Le décalage par 0 rétablit le signe de la partie haute
+  // le |0 final convertit la valeur non-signée en une valeur signée
+  return ((al * bl) + (((ah * bl + al * bh) << 16) >>> 0)|0);
+};
+```
+
+## Spécifications
+
+| Spécification                                                            | État                         | Commentaires        |
+| ------------------------------------------------------------------------ | ---------------------------- | ------------------- |
+| {{SpecName('ES6', '#sec-math.imul', 'Math.imul')}}     | {{Spec2('ES6')}}         | Définition initiale |
+| {{SpecName('ESDraft', '#sec-math.imul', 'Math.imul')}} | {{Spec2('ESDraft')}} |                     |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Math.imul")}}
diff --git a/files/fr/web/javascript/reference/global_objects/math/index.html b/files/fr/web/javascript/reference/global_objects/math/index.html
deleted file mode 100644
index 86ab1bee47..0000000000
--- a/files/fr/web/javascript/reference/global_objects/math/index.html
+++ /dev/null
@@ -1,170 +0,0 @@
----
-title: Math
-slug: Web/JavaScript/Reference/Global_Objects/Math
-tags:
-  - JavaScript
-  - Math
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Math
-original_slug: Web/JavaScript/Reference/Objets_globaux/Math
----
-<div>{{JSRef}}</div>
-
-<p>L'objet <strong><code>Math</code></strong> est un objet natif dont les méthodes et propriétés permettent l'utilisation de constantes et fonctions mathématiques. Cet objet n'est pas une fonction.</p>
-
-<div class="warning">
-<p><strong>Attention :</strong> <code>Math</code> fonctionne avec le type {{jsxref("Number")}}. Il ne fonctionne pas avec les grands entiers/{{jsxref("BigInt")}}.</p>
-</div>
-
-<h2 id="Description">Description</h2>
-
-<p>Contrairement aux autres objets globaux, <code>Math</code> n'est pas un constructeur. Toutes les propriétés et les méthodes de <code>Math</code> sont statiques (pour éventuellement étendre cette API, ce qui est fortement déconseillé, on n'utilisera donc pas <code>Math.prototype</code>).</p>
-
-<p>Pour accéder à la constante PI, on utilise <code>Math.PI</code>.<br>
- Pour accéder à la fonction <em>sinus</em>, on utilise <code>Math.sin(x)</code> où <code>x</code> est l'argument de cette méthode.</p>
-
-<p>Les constantes sont définies avec la précision des nombres réels en JavaScript.</p>
-
-<h2 id="Propriétés">Propriétés</h2>
-
-<dl>
- <dt>{{jsxref("Math.E")}}</dt>
- <dd>Nombre d'Euler, la base des logarithmes naturels, environ 2,718.</dd>
- <dt>{{jsxref("Math.LN2")}}</dt>
- <dd>Logarithme naturel de 2, environ 0,693.</dd>
- <dt>{{jsxref("Math.LN10")}}</dt>
- <dd>Logarithme naturel de 10, environ 2,302.</dd>
- <dt>{{jsxref("Math.LOG2E")}}</dt>
- <dd>Logarithme de base 2 de E, environ 1,442.</dd>
- <dt>{{jsxref("Math.LOG10E")}}</dt>
- <dd>Logarithme de base 10 de E, environ 0,434.</dd>
- <dt>{{jsxref("Math.PI")}}</dt>
- <dd>Quotient de la circonférence d'un cercle par son diamètre, environ 3,14159.</dd>
- <dt>{{jsxref("Math.SQRT1_2")}}</dt>
- <dd>Racine carrée de 1/2 ; équivalent de 1 sur la racine carrée de 2, environ 0,707.</dd>
- <dt>{{jsxref("Math.SQRT2")}}</dt>
- <dd>Racine carrée de 2, environ 1,414.</dd>
-</dl>
-
-<h2 id="Méthodes">Méthodes</h2>
-
-<div class="note"><p><strong>Note :</strong> Les fonctions trigonométriques (<code>sin()</code>, <code>cos()</code>, <code>tan()</code>, <code>asin()</code>, <code>acos()</code>, <code>atan()</code>, <code>atan2()</code>) acceptent ou retournent des angles en radians. Pour convertir des degrés en radians, multipliez la valeur en degrés par (<code>Math.PI / 180</code>). Pour passer des radians en degrés, divisez la valeur en radians par (<code>Math.PI / 180</code>).</p></div>
-
-<div class="note"><p><strong>Note :</strong> La précision des fonctions mathématiques dépend notamment de l'implémentation. Cela signifie que différents navigateurs peuvent fournir des résultats différents. On peut même avoir un même moteur JavaScript qui, sur des architectures et/ou des systèmes d'exploitation différents, fournit des résultats différents.</p></div>
-
-<dl>
- <dt>{{jsxref("Objets_globaux/Math/abs", "Math.abs(x)")}}</dt>
- <dd>Retourne la valeur absolue d'un nombre.</dd>
- <dt>{{jsxref("Objets_globaux/Math/acos", "Math.acos(x)")}}</dt>
- <dd>Retourne l'arc cosinus d'un nombre.</dd>
- <dt>{{jsxref("Objets_globaux/Math/acosh", "Math.acosh(x)")}}</dt>
- <dd>Retourne l'arc cosinus hyperbolique d'un nombre.</dd>
- <dt>{{jsxref("Objets_globaux/Math/asin", "Math.asin(x)")}}</dt>
- <dd>Retourne l'arc sinus d'un nombre.</dd>
- <dt>{{jsxref("Objets_globaux/Math/asinh", "Math.asinh(x)")}}</dt>
- <dd>Retourne l'arc sinus hyperbolique d'un nombre.</dd>
- <dt>{{jsxref("Objets_globaux/Math/atan", "Math.atan(x)")}}</dt>
- <dd>Retourne l'arc tangente d'un nombre.</dd>
- <dt>{{jsxref("Objets_globaux/Math/atanh", "Math.atanh(x)")}}</dt>
- <dd>Retourne l'arc tangente hyperbolique d'un nombre</dd>
- <dt>{{jsxref("Objets_globaux/Math/atan2", "Math.atan2(y, x)")}}</dt>
- <dd>Retourne l'arc tangente du quotient de ses arguments.</dd>
- <dt>{{jsxref("Objets_globaux/Math/cbrt", "Math.cbrt(x)")}}</dt>
- <dd>Renvoie la racine cubique d'un nombre.</dd>
- <dt>{{jsxref("Objets_globaux/Math/ceil", "Math.ceil(x)")}}</dt>
- <dd>Retourne le plus petit entier supérieur ou égal à la valeur passée en paramètre.</dd>
- <dt>{{jsxref("Objets_globaux/Math/clz32", "Math.clz32(x)")}}</dt>
- <dd>Renvoie le nombre de zéros qui préfixent un entier sur 32 bits.</dd>
- <dt>{{jsxref("Objets_globaux/Math/cos", "Math.cos(x)")}}</dt>
- <dd>Retourne le cosinus d'un nombre.</dd>
- <dt>{{jsxref("Objets_globaux/Math/cosh", "Math.cosh(x)")}}</dt>
- <dd>Renvoie le cosinus hyperbolique d'un nombre.</dd>
- <dt>{{jsxref("Objets_globaux/Math/exp", "Math.exp(x)")}}</dt>
- <dd>Renvoie l'exponentielle d'un nombre (soit E^nombre) avec E la constante d'Euler (2,718...).</dd>
- <dt>{{jsxref("Objets_globaux/Math/expm1", "Math.expm1(x)")}}</dt>
- <dd>Renvoie le résultat de 1 moins l'exponentielle d'un nombre.</dd>
- <dt>{{jsxref("Objets_globaux/Math/floor", "Math.floor(x)")}}</dt>
- <dd>Retourne le plus grand entier inférieur ou égal à la valeur passée en paramètre.</dd>
- <dt>{{jsxref("Objets_globaux/Math/fround", "Math.fround(x)")}}</dt>
- <dd>Renvoie le nombre flottant exprimé sur 32 bits le plus proche de l'argument.</dd>
- <dt>{{jsxref("Objets_globaux/Math/hypot", "Math.hypot([x[,y[,…]]])")}}</dt>
- <dd>Retourne la racine carré de la somme des carrés des arguments.</dd>
- <dt>{{jsxref("Objets_globaux/Math/imul", "Math.imul(x, y)")}}</dt>
- <dd>Retourne le résultat de la multiplication d'entiers sur 32 bits.</dd>
- <dt>{{jsxref("Objets_globaux/Math/log", "Math.log(x)")}}</dt>
- <dd>Retourne le logarithme naturel (log<sub>e</sub>) d'un nombre.</dd>
- <dt>{{jsxref("Objets_globaux/Math/log1p", "Math.log1p(x)")}}</dt>
- <dd>Retourne le logarithme naturel de 1 + un nombre.</dd>
- <dt>{{jsxref("Objets_globaux/Math/log10", "Math.log10(x)")}}</dt>
- <dd>Retourne le logarithme en base 10 d'un nombre.</dd>
- <dt>{{jsxref("Objets_globaux/Math/log2", "Math.log2(x)")}}</dt>
- <dd>Retourne le logarithme en base 2 d'un nombre.</dd>
- <dt>{{jsxref("Objets_globaux/Math/max", "Math.max([x[,y[,…]]])")}}</dt>
- <dd>Retourne la plus grande valeur d'une liste de nombres.</dd>
- <dt>{{jsxref("Objets_globaux/Math/min", "Math.min([x[,y[,…]]])")}}</dt>
- <dd>Retourne la plus petite valeur d'une liste de nombres.</dd>
- <dt>{{jsxref("Objets_globaux/Math/pow", "Math.pow(x,y)")}}</dt>
- <dd>Retourne le calcul de x à la puissance y (x correspond à la base et y à l'exposant).</dd>
- <dt>{{jsxref("Objets_globaux/Math/random", "Math.random()")}}</dt>
- <dd>Retourne un nombre pseudo-aléatoire compris entre 0 (inclus) et 1 (exclu).</dd>
- <dt>{{jsxref("Objets_globaux/Math/round", "Math.round(x)")}}</dt>
- <dd>Retourne l'arrondi d'un nombre.</dd>
- <dt>{{jsxref("Objets_globaux/Math/sign", "Math.sign(x)")}}</dt>
- <dd>Retourne le signe d'un nombre, indiquant s'il est positif, négatif ou égal à zéro.</dd>
- <dt>{{jsxref("Objets_globaux/Math/sin", "Math.sin(x)")}}</dt>
- <dd>Retourne le sinus d'un nombre.</dd>
- <dt>{{jsxref("Objets_globaux/Math/sinh", "Math.sinh(x)")}}</dt>
- <dd>Retourne le sinus hyperbolique d'un nombre.</dd>
- <dt>{{jsxref("Objets_globaux/Math/sqrt", "Math.sqrt(x)")}}</dt>
- <dd>Retourne la racine carrée d'un nombre.</dd>
- <dt>{{jsxref("Objets_globaux/Math/tan", "Math.tan(x)")}}</dt>
- <dd>Retourne la tangente d'un nombre.</dd>
- <dt>{{jsxref("Objets_globaux/Math/tanh", "Math.tanh(x)")}}</dt>
- <dd>Retourne la tangente hyperbolique d'un nombre</dd>
- <dt><code>Math.toSource()</code> {{Non-standard_inline}}</dt>
- <dd>Renvoie la chaîne de caractères <code>"Math"</code>.</dd>
- <dt>{{jsxref("Objets_globaux/Math/trunc", "Math.trunc(x)")}}</dt>
- <dd>Retourne la partie entière d'un nombre (la partie décimale est retirée).</dd>
-</dl>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES1')}}</td>
-   <td>{{Spec2('ES1')}}</td>
-   <td>Définition initiale. Implémentée avec JavaScript 1.1</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-15.8', 'Math')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-math-object', 'Math')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td>Nouvelles méthodes ajoutées : {{jsxref("Math.log10()", "log10()")}}, {{jsxref("Math.log2()", "log2()")}}, {{jsxref("Math.log1p()", "log1p()")}}, {{jsxref("Math.expm1()", "expm1()")}}, {{jsxref("Math.cosh()", "cosh()")}}, {{jsxref("Math.sinh()", "sinh()")}}, {{jsxref("Math.tanh()", "tanh()")}}, {{jsxref("Math.acosh()", "acosh()")}}, {{jsxref("Math.asinh()", "asinh()")}}, {{jsxref("Math.atanh()", "atanh()")}}, {{jsxref("Math.hypot()", "hypot()")}}, {{jsxref("Math.trunc()", "trunc()")}}, {{jsxref("Math.sign()", "sign()")}}, {{jsxref("Math.imul()", "imul()")}}, {{jsxref("Math.fround()", "fround()")}}, {{jsxref("Math.cbrt()", "cbrt()")}} et {{jsxref("Math.clz32()", "clz32()")}}.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-math-object', 'Math')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Math")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Number")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/math/index.md b/files/fr/web/javascript/reference/global_objects/math/index.md
new file mode 100644
index 0000000000..f0fd2ba0b4
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/math/index.md
@@ -0,0 +1,145 @@
+---
+title: Math
+slug: Web/JavaScript/Reference/Global_Objects/Math
+tags:
+  - JavaScript
+  - Math
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Math
+original_slug: Web/JavaScript/Reference/Objets_globaux/Math
+---
+{{JSRef}}
+
+L'objet **`Math`** est un objet natif dont les méthodes et propriétés permettent l'utilisation de constantes et fonctions mathématiques. Cet objet n'est pas une fonction.
+
+> **Attention :** `Math` fonctionne avec le type {{jsxref("Number")}}. Il ne fonctionne pas avec les grands entiers/{{jsxref("BigInt")}}.
+
+## Description
+
+Contrairement aux autres objets globaux, `Math` n'est pas un constructeur. Toutes les propriétés et les méthodes de `Math` sont statiques (pour éventuellement étendre cette API, ce qui est fortement déconseillé, on n'utilisera donc pas `Math.prototype`).
+
+Pour accéder à la constante PI, on utilise `Math.PI`.
+Pour accéder à la fonction _sinus_, on utilise `Math.sin(x)` où `x` est l'argument de cette méthode.
+
+Les constantes sont définies avec la précision des nombres réels en JavaScript.
+
+## Propriétés
+
+- {{jsxref("Math.E")}}
+  - : Nombre d'Euler, la base des logarithmes naturels, environ 2,718.
+- {{jsxref("Math.LN2")}}
+  - : Logarithme naturel de 2, environ 0,693.
+- {{jsxref("Math.LN10")}}
+  - : Logarithme naturel de 10, environ 2,302.
+- {{jsxref("Math.LOG2E")}}
+  - : Logarithme de base 2 de E, environ 1,442.
+- {{jsxref("Math.LOG10E")}}
+  - : Logarithme de base 10 de E, environ 0,434.
+- {{jsxref("Math.PI")}}
+  - : Quotient de la circonférence d'un cercle par son diamètre, environ 3,14159.
+- {{jsxref("Math.SQRT1_2")}}
+  - : Racine carrée de 1/2 ; équivalent de 1 sur la racine carrée de 2, environ 0,707.
+- {{jsxref("Math.SQRT2")}}
+  - : Racine carrée de 2, environ 1,414.
+
+## Méthodes
+
+> **Note :** Les fonctions trigonométriques (`sin()`, `cos()`, `tan()`, `asin()`, `acos()`, `atan()`, `atan2()`) acceptent ou retournent des angles en radians. Pour convertir des degrés en radians, multipliez la valeur en degrés par (`Math.PI / 180`). Pour passer des radians en degrés, divisez la valeur en radians par (`Math.PI / 180`).
+
+> **Note :** La précision des fonctions mathématiques dépend notamment de l'implémentation. Cela signifie que différents navigateurs peuvent fournir des résultats différents. On peut même avoir un même moteur JavaScript qui, sur des architectures et/ou des systèmes d'exploitation différents, fournit des résultats différents.
+
+- {{jsxref("Objets_globaux/Math/abs", "Math.abs(x)")}}
+  - : Retourne la valeur absolue d'un nombre.
+- {{jsxref("Objets_globaux/Math/acos", "Math.acos(x)")}}
+  - : Retourne l'arc cosinus d'un nombre.
+- {{jsxref("Objets_globaux/Math/acosh", "Math.acosh(x)")}}
+  - : Retourne l'arc cosinus hyperbolique d'un nombre.
+- {{jsxref("Objets_globaux/Math/asin", "Math.asin(x)")}}
+  - : Retourne l'arc sinus d'un nombre.
+- {{jsxref("Objets_globaux/Math/asinh", "Math.asinh(x)")}}
+  - : Retourne l'arc sinus hyperbolique d'un nombre.
+- {{jsxref("Objets_globaux/Math/atan", "Math.atan(x)")}}
+  - : Retourne l'arc tangente d'un nombre.
+- {{jsxref("Objets_globaux/Math/atanh", "Math.atanh(x)")}}
+  - : Retourne l'arc tangente hyperbolique d'un nombre
+- {{jsxref("Objets_globaux/Math/atan2", "Math.atan2(y, x)")}}
+  - : Retourne l'arc tangente du quotient de ses arguments.
+- {{jsxref("Objets_globaux/Math/cbrt", "Math.cbrt(x)")}}
+  - : Renvoie la racine cubique d'un nombre.
+- {{jsxref("Objets_globaux/Math/ceil", "Math.ceil(x)")}}
+  - : Retourne le plus petit entier supérieur ou égal à la valeur passée en paramètre.
+- {{jsxref("Objets_globaux/Math/clz32", "Math.clz32(x)")}}
+  - : Renvoie le nombre de zéros qui préfixent un entier sur 32 bits.
+- {{jsxref("Objets_globaux/Math/cos", "Math.cos(x)")}}
+  - : Retourne le cosinus d'un nombre.
+- {{jsxref("Objets_globaux/Math/cosh", "Math.cosh(x)")}}
+  - : Renvoie le cosinus hyperbolique d'un nombre.
+- {{jsxref("Objets_globaux/Math/exp", "Math.exp(x)")}}
+  - : Renvoie l'exponentielle d'un nombre (soit E^nombre) avec E la constante d'Euler (2,718...).
+- {{jsxref("Objets_globaux/Math/expm1", "Math.expm1(x)")}}
+  - : Renvoie le résultat de 1 moins l'exponentielle d'un nombre.
+- {{jsxref("Objets_globaux/Math/floor", "Math.floor(x)")}}
+  - : Retourne le plus grand entier inférieur ou égal à la valeur passée en paramètre.
+- {{jsxref("Objets_globaux/Math/fround", "Math.fround(x)")}}
+  - : Renvoie le nombre flottant exprimé sur 32 bits le plus proche de l'argument.
+- {{jsxref("Objets_globaux/Math/hypot", "Math.hypot([x[,y[,…]]])")}}
+  - : Retourne la racine carré de la somme des carrés des arguments.
+- {{jsxref("Objets_globaux/Math/imul", "Math.imul(x, y)")}}
+  - : Retourne le résultat de la multiplication d'entiers sur 32 bits.
+- {{jsxref("Objets_globaux/Math/log", "Math.log(x)")}}
+
+  - : Retourne le logarithme naturel (log
+
+    <sub>e</sub>
+
+    ) d'un nombre.
+
+- {{jsxref("Objets_globaux/Math/log1p", "Math.log1p(x)")}}
+  - : Retourne le logarithme naturel de 1 + un nombre.
+- {{jsxref("Objets_globaux/Math/log10", "Math.log10(x)")}}
+  - : Retourne le logarithme en base 10 d'un nombre.
+- {{jsxref("Objets_globaux/Math/log2", "Math.log2(x)")}}
+  - : Retourne le logarithme en base 2 d'un nombre.
+- {{jsxref("Objets_globaux/Math/max", "Math.max([x[,y[,…]]])")}}
+  - : Retourne la plus grande valeur d'une liste de nombres.
+- {{jsxref("Objets_globaux/Math/min", "Math.min([x[,y[,…]]])")}}
+  - : Retourne la plus petite valeur d'une liste de nombres.
+- {{jsxref("Objets_globaux/Math/pow", "Math.pow(x,y)")}}
+  - : Retourne le calcul de x à la puissance y (x correspond à la base et y à l'exposant).
+- {{jsxref("Objets_globaux/Math/random", "Math.random()")}}
+  - : Retourne un nombre pseudo-aléatoire compris entre 0 (inclus) et 1 (exclu).
+- {{jsxref("Objets_globaux/Math/round", "Math.round(x)")}}
+  - : Retourne l'arrondi d'un nombre.
+- {{jsxref("Objets_globaux/Math/sign", "Math.sign(x)")}}
+  - : Retourne le signe d'un nombre, indiquant s'il est positif, négatif ou égal à zéro.
+- {{jsxref("Objets_globaux/Math/sin", "Math.sin(x)")}}
+  - : Retourne le sinus d'un nombre.
+- {{jsxref("Objets_globaux/Math/sinh", "Math.sinh(x)")}}
+  - : Retourne le sinus hyperbolique d'un nombre.
+- {{jsxref("Objets_globaux/Math/sqrt", "Math.sqrt(x)")}}
+  - : Retourne la racine carrée d'un nombre.
+- {{jsxref("Objets_globaux/Math/tan", "Math.tan(x)")}}
+  - : Retourne la tangente d'un nombre.
+- {{jsxref("Objets_globaux/Math/tanh", "Math.tanh(x)")}}
+  - : Retourne la tangente hyperbolique d'un nombre
+- `Math.toSource()` {{Non-standard_inline}}
+  - : Renvoie la chaîne de caractères `"Math"`.
+- {{jsxref("Objets_globaux/Math/trunc", "Math.trunc(x)")}}
+  - : Retourne la partie entière d'un nombre (la partie décimale est retirée).
+
+## Spécifications
+
+| Spécification                                                        | État                         | Commentaires                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
+| -------------------------------------------------------------------- | ---------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| {{SpecName('ES1')}}                                             | {{Spec2('ES1')}}         | Définition initiale. Implémentée avec JavaScript 1.1                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
+| {{SpecName('ES5.1', '#sec-15.8', 'Math')}}             | {{Spec2('ES5.1')}}     |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| {{SpecName('ES6', '#sec-math-object', 'Math')}}     | {{Spec2('ES6')}}         | Nouvelles méthodes ajoutées : {{jsxref("Math.log10()", "log10()")}}, {{jsxref("Math.log2()", "log2()")}}, {{jsxref("Math.log1p()", "log1p()")}}, {{jsxref("Math.expm1()", "expm1()")}}, {{jsxref("Math.cosh()", "cosh()")}}, {{jsxref("Math.sinh()", "sinh()")}}, {{jsxref("Math.tanh()", "tanh()")}}, {{jsxref("Math.acosh()", "acosh()")}}, {{jsxref("Math.asinh()", "asinh()")}}, {{jsxref("Math.atanh()", "atanh()")}}, {{jsxref("Math.hypot()", "hypot()")}}, {{jsxref("Math.trunc()", "trunc()")}}, {{jsxref("Math.sign()", "sign()")}}, {{jsxref("Math.imul()", "imul()")}}, {{jsxref("Math.fround()", "fround()")}}, {{jsxref("Math.cbrt()", "cbrt()")}} et {{jsxref("Math.clz32()", "clz32()")}}. |
+| {{SpecName('ESDraft', '#sec-math-object', 'Math')}} | {{Spec2('ESDraft')}} |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Math")}}
+
+## Voir aussi
+
+- {{jsxref("Number")}}
diff --git a/files/fr/web/javascript/reference/global_objects/math/ln10/index.html b/files/fr/web/javascript/reference/global_objects/math/ln10/index.html
deleted file mode 100644
index f3818a3665..0000000000
--- a/files/fr/web/javascript/reference/global_objects/math/ln10/index.html
+++ /dev/null
@@ -1,82 +0,0 @@
----
-title: Math.LN10
-slug: Web/JavaScript/Reference/Global_Objects/Math/LN10
-tags:
-  - JavaScript
-  - Math
-  - Propriété
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Math/LN10
-original_slug: Web/JavaScript/Reference/Objets_globaux/Math/LN10
----
-<div>{{JSRef}}</div>
-
-<p>La propriété <code><strong>Math.LN10</strong></code> représente la valeur du logarithme naturel de 10, environ 2.302 :</p>
-
-<p><math display="block"><semantics><mrow><mstyle mathvariant="monospace"><mi>Math.LN10</mi></mstyle><mo>=</mo><mo lspace="0em" rspace="0em">ln</mo><mo stretchy="false">(</mo><mn>10</mn><mo stretchy="false">)</mo><mo>≈</mo><mn>2.302</mn></mrow><annotation encoding="TeX">\mathtt{\mi{Math.LN10}} = \ln(10) \approx 2.302</annotation></semantics></math></p>
-
-<div>{{EmbedInteractiveExample("pages/js/math-ln10.html")}}</div>
-
-
-
-<div>{{js_property_attributes(0,0,0)}}</div>
-
-<h2 id="Description">Description</h2>
-
-<p><code>LN10</code> est une propriété statique de <code>Math</code>, elle doit toujours être utilisée avec la syntaxe <code>Math.LN10</code>, et ne pas être appelée comme propriété d'un autre objet qui aurait été créé (<code>Math</code> n'est pas un constructeur).</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Utiliser_Math.LN10">Utiliser <code>Math.LN10</code></h3>
-
-<p>La fonction suivante renvoie le logarithme naturel de 10 :</p>
-
-<pre class="brush:js">function getNatLog10() {
-   return Math.LN10;
-}
-
-getNatLog10(); // 2.302585092994046</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES1')}}</td>
-   <td>{{Spec2('ES1')}}</td>
-   <td>Définition initiale. Implémentée avec JavaScript 1.0.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-15.8.1.2', 'Math.LN10')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-math.ln10', 'Math.LN10')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-math.ln10', 'Math.LN10')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Math.LN10")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Math.exp()")}}</li>
- <li>{{jsxref("Math.log()")}}</li>
- <li>{{jsxref("Math.log10()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/math/ln10/index.md b/files/fr/web/javascript/reference/global_objects/math/ln10/index.md
new file mode 100644
index 0000000000..2dc07d7187
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/math/ln10/index.md
@@ -0,0 +1,55 @@
+---
+title: Math.LN10
+slug: Web/JavaScript/Reference/Global_Objects/Math/LN10
+tags:
+  - JavaScript
+  - Math
+  - Propriété
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/LN10
+original_slug: Web/JavaScript/Reference/Objets_globaux/Math/LN10
+---
+{{JSRef}}
+
+La propriété **`Math.LN10`** représente la valeur du logarithme naturel de 10, environ 2.302 :
+
+<math display="block"><semantics><mrow><mstyle mathvariant="monospace"><mi>Math.LN10</mi></mstyle><mo>=</mo><mo lspace="0em" rspace="0em">ln</mo><mo stretchy="false">(</mo><mn>10</mn><mo stretchy="false">)</mo><mo>≈</mo><mn>2.302</mn></mrow><annotation encoding="TeX">\mathtt{\mi{Math.LN10}} = \ln(10) \approx 2.302</annotation></semantics></math>
+
+{{EmbedInteractiveExample("pages/js/math-ln10.html")}}{{js_property_attributes(0,0,0)}}
+
+## Description
+
+`LN10` est une propriété statique de `Math`, elle doit toujours être utilisée avec la syntaxe `Math.LN10`, et ne pas être appelée comme propriété d'un autre objet qui aurait été créé (`Math` n'est pas un constructeur).
+
+## Exemples
+
+### Utiliser `Math.LN10`
+
+La fonction suivante renvoie le logarithme naturel de 10 :
+
+```js
+function getNatLog10() {
+   return Math.LN10;
+}
+
+getNatLog10(); // 2.302585092994046
+```
+
+## Spécifications
+
+| Spécification                                                            | Statut                       | Commentaires                                          |
+| ------------------------------------------------------------------------ | ---------------------------- | ----------------------------------------------------- |
+| {{SpecName('ES1')}}                                                 | {{Spec2('ES1')}}         | Définition initiale. Implémentée avec JavaScript 1.0. |
+| {{SpecName('ES5.1', '#sec-15.8.1.2', 'Math.LN10')}}     | {{Spec2('ES5.1')}}     |                                                       |
+| {{SpecName('ES6', '#sec-math.ln10', 'Math.LN10')}}     | {{Spec2('ES6')}}         |                                                       |
+| {{SpecName('ESDraft', '#sec-math.ln10', 'Math.LN10')}} | {{Spec2('ESDraft')}} |                                                       |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Math.LN10")}}
+
+## Voir aussi
+
+- {{jsxref("Math.exp()")}}
+- {{jsxref("Math.log()")}}
+- {{jsxref("Math.log10()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/math/ln2/index.html b/files/fr/web/javascript/reference/global_objects/math/ln2/index.html
deleted file mode 100644
index 0a7fc56029..0000000000
--- a/files/fr/web/javascript/reference/global_objects/math/ln2/index.html
+++ /dev/null
@@ -1,82 +0,0 @@
----
-title: Math.LN2
-slug: Web/JavaScript/Reference/Global_Objects/Math/LN2
-tags:
-  - JavaScript
-  - Math
-  - Propriété
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Math/LN2
-original_slug: Web/JavaScript/Reference/Objets_globaux/Math/LN2
----
-<div>{{JSRef}}</div>
-
-<p>La propriété <code><strong>Math.LN2</strong></code> représente le logarithme naturel de 2, environ 0.693:</p>
-
-<p><math display="block"><semantics><mrow><mstyle mathvariant="monospace"><mi>Math.LN2</mi></mstyle><mo>=</mo><mo lspace="0em" rspace="0em">ln</mo><mo stretchy="false">(</mo><mn>2</mn><mo stretchy="false">)</mo><mo>≈</mo><mn>0.693</mn></mrow><annotation encoding="TeX">\mathtt{\mi{Math.LN2}} = \ln(2) \approx 0.693</annotation></semantics></math></p>
-
-<div>{{EmbedInteractiveExample("pages/js/math-ln2.html")}}</div>
-
-
-
-<div>{{js_property_attributes(0,0,0)}}</div>
-
-<h2 id="Description">Description</h2>
-
-<p><code>LN2</code> est une propriété statique de l'objet <code>Math</code>, il doit toujours être utilisé avec la syntaxe <code>Math.LN2</code>, et non pas être utilisé comme la propriété d'un objet qui aurait été créé (<code>Math</code> n'est pas un constructeur).</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Utiliser_Math.LN2">Utiliser <code>Math.LN2</code></h3>
-
-<p>La fonction suivante renvoie le logarithme en base 2 d'un nombre en utilisant la valeur de <code>Math.LN2</code> :</p>
-
-<pre class="brush:js">function getLog2(x) {
-  return Math.log(x) / Math.LN2;
-}
-
-getLog2(256); // 8</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES1')}}</td>
-   <td>{{Spec2('ES1')}}</td>
-   <td>Définition initiale. Implémentée avec JavaScript 1.0.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-15.8.1.3', 'Math.LN2')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-math.ln2', 'Math.LN2')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-math.ln2', 'Math.LN2')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Math.LN2")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Math.exp()")}}</li>
- <li>{{jsxref("Math.log()")}}</li>
- <li>{{jsxref("Math.log2()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/math/ln2/index.md b/files/fr/web/javascript/reference/global_objects/math/ln2/index.md
new file mode 100644
index 0000000000..25019b09ca
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/math/ln2/index.md
@@ -0,0 +1,55 @@
+---
+title: Math.LN2
+slug: Web/JavaScript/Reference/Global_Objects/Math/LN2
+tags:
+  - JavaScript
+  - Math
+  - Propriété
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/LN2
+original_slug: Web/JavaScript/Reference/Objets_globaux/Math/LN2
+---
+{{JSRef}}
+
+La propriété **`Math.LN2`** représente le logarithme naturel de 2, environ 0.693:
+
+<math display="block"><semantics><mrow><mstyle mathvariant="monospace"><mi>Math.LN2</mi></mstyle><mo>=</mo><mo lspace="0em" rspace="0em">ln</mo><mo stretchy="false">(</mo><mn>2</mn><mo stretchy="false">)</mo><mo>≈</mo><mn>0.693</mn></mrow><annotation encoding="TeX">\mathtt{\mi{Math.LN2}} = \ln(2) \approx 0.693</annotation></semantics></math>
+
+{{EmbedInteractiveExample("pages/js/math-ln2.html")}}{{js_property_attributes(0,0,0)}}
+
+## Description
+
+`LN2` est une propriété statique de l'objet `Math`, il doit toujours être utilisé avec la syntaxe `Math.LN2`, et non pas être utilisé comme la propriété d'un objet qui aurait été créé (`Math` n'est pas un constructeur).
+
+## Exemples
+
+### Utiliser `Math.LN2`
+
+La fonction suivante renvoie le logarithme en base 2 d'un nombre en utilisant la valeur de `Math.LN2` :
+
+```js
+function getLog2(x) {
+  return Math.log(x) / Math.LN2;
+}
+
+getLog2(256); // 8
+```
+
+## Spécifications
+
+| Spécification                                                        | Statut                       | Commentaires                                          |
+| -------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- |
+| {{SpecName('ES1')}}                                             | {{Spec2('ES1')}}         | Définition initiale. Implémentée avec JavaScript 1.0. |
+| {{SpecName('ES5.1', '#sec-15.8.1.3', 'Math.LN2')}} | {{Spec2('ES5.1')}}     |                                                       |
+| {{SpecName('ES6', '#sec-math.ln2', 'Math.LN2')}}     | {{Spec2('ES6')}}         |                                                       |
+| {{SpecName('ESDraft', '#sec-math.ln2', 'Math.LN2')}} | {{Spec2('ESDraft')}} |                                                       |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Math.LN2")}}
+
+## Voir aussi
+
+- {{jsxref("Math.exp()")}}
+- {{jsxref("Math.log()")}}
+- {{jsxref("Math.log2()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/math/log/index.html b/files/fr/web/javascript/reference/global_objects/math/log/index.html
deleted file mode 100644
index 25d7a48e8b..0000000000
--- a/files/fr/web/javascript/reference/global_objects/math/log/index.html
+++ /dev/null
@@ -1,104 +0,0 @@
----
-title: Math.log()
-slug: Web/JavaScript/Reference/Global_Objects/Math/log
-tags:
-  - JavaScript
-  - Math
-  - Méthode
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Math/log
-original_slug: Web/JavaScript/Reference/Objets_globaux/Math/log
----
-<div>{{JSRef}}</div>
-
-<p>La fonction <code><strong>Math.log()</strong></code> renvoie le logarithme naturel (aussi appelé logarithme népérien) d'un nombre, défini par :</p>
-
-<p><math display="block"><semantics><mrow><mo>∀</mo><mi>x</mi><mo>&gt;</mo><mn>0</mn><mo>,</mo><mstyle mathvariant="monospace"><mrow><mo lspace="0em" rspace="thinmathspace">Math.log</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo></mrow></mstyle><mo>=</mo><mo lspace="0em" rspace="0em">ln</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo><mo>=</mo><mtext>le seul </mtext><mspace width="thickmathspace"></mspace><mi>y</mi><mspace width="thickmathspace"></mspace><mtext>tel que</mtext><mspace width="thickmathspace"></mspace><msup><mi>e</mi><mi>y</mi></msup><mo>=</mo><mi>x</mi></mrow><annotation encoding="TeX">\forall x &gt; 0, \mathtt{\operatorname{Math.log}(x)} = \ln(x) = \text{the unique} \; y \; \text{such that} \; e^y = x</annotation></semantics></math></p>
-
-<div>{{EmbedInteractiveExample("pages/js/math-log.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">Math.log(<em>x</em>)</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>x</code></dt>
- <dd>Un nombre.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Le logarithme naturelle de la valeur passée en argument. Si cette valeur est négative, c'est {{jsxref("NaN")}} qui est renvoyé.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>Si la valeur de l'argument est négative, la valeur renvoyée sera {{jsxref("NaN")}}. Si la valeur de l'argument est <code>0</code>, la valeur de retour sera {{jsxref("Number.NEGATIVE_INFINITY", "-Infinity")}}.</p>
-
-<p><code>log()</code> est une méthode statique de <code>Math</code>, elle doit toujours être utilisée avec la syntaxe <code>Math.log()</code>, elle ne doit pas être utilisée à partir d'un autre objet qui aurait été créé (<code>Math</code> n'est pas un constructeur). Si on veut utiliser les constantes données par les logarithmes naturels de 2 ou 10, on pourra utiliser les constantes {{jsxref("Math.LN2")}} ou {{jsxref("Math.LN10")}}. De même pour les logarithmes en base 2 ou en base 10, on pourra utiliser {{jsxref("Math.log2()")}} or {{jsxref("Math.log10()")}}.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Utiliser_Math.log()">Utiliser <code>Math.log()</code></h3>
-
-<pre class="brush:js">Math.log(-1); // NaN, valeur en dehors de l'intervalle de définition
-Math.log(0);  // -Infinity
-Math.log(1);  // 0
-Math.log(10); // 2.302585092994046</pre>
-
-<h3 id="Utiliser_Math.log_pour_construire_un_logarithme_sur_une_autre_base">Utiliser <code>Math.log</code> pour construire un logarithme sur une autre base</h3>
-
-<p>La fonction suivante renvoie le logarithme de <code>y</code> en base <code>x</code> (c'est-à-dire log<sub>x</sub> y):</p>
-
-<pre class="brush:js">function getBaseLog(x, y) {
-    return Math.log(y) / Math.log(x);
-}</pre>
-
-<p>Si on exécute <code>getBaseLog(10, 1000)</code>, on obtiendra <code>2.9999999999999996</code> en raison de l'arrondi du à la représentation en nombre flottant (le résultat exact étant 3).</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES1')}}</td>
-   <td>{{Spec2('ES1')}}</td>
-   <td>Définition initiale. Implémentée avec JavaScript 1.0.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-15.8.2.10', 'Math.log')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-math.log', 'Math.log')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-math.log', 'Math.log')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Math.log")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Math.exp()")}}</li>
- <li>{{jsxref("Math.log1p()")}}</li>
- <li>{{jsxref("Math.log10()")}}</li>
- <li>{{jsxref("Math.log2()")}}</li>
- <li>{{jsxref("Math.pow()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/math/log/index.md b/files/fr/web/javascript/reference/global_objects/math/log/index.md
new file mode 100644
index 0000000000..14c55bd91d
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/math/log/index.md
@@ -0,0 +1,81 @@
+---
+title: Math.log()
+slug: Web/JavaScript/Reference/Global_Objects/Math/log
+tags:
+  - JavaScript
+  - Math
+  - Méthode
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/log
+original_slug: Web/JavaScript/Reference/Objets_globaux/Math/log
+---
+{{JSRef}}
+
+La fonction **`Math.log()`** renvoie le logarithme naturel (aussi appelé logarithme népérien) d'un nombre, défini par :
+
+<math display="block"><semantics><mrow><mo>∀</mo><mi>x</mi><mo>></mo><mn>0</mn><mo>,</mo><mstyle mathvariant="monospace"><mrow><mo lspace="0em" rspace="thinmathspace">Math.log</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo></mrow></mstyle><mo>=</mo><mo lspace="0em" rspace="0em">ln</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo><mo>=</mo><mtext>le seul </mtext><mspace width="thickmathspace"></mspace><mi>y</mi><mspace width="thickmathspace"></mspace><mtext>tel que</mtext><mspace width="thickmathspace"></mspace><msup><mi>e</mi><mi>y</mi></msup><mo>=</mo><mi>x</mi></mrow><annotation encoding="TeX">\forall x > 0, \mathtt{\operatorname{Math.log}(x)} = \ln(x) = \text{the unique} \; y \; \text{such that} \; e^y = x</annotation></semantics></math>
+
+{{EmbedInteractiveExample("pages/js/math-log.html")}}
+
+## Syntaxe
+
+    Math.log(x)
+
+### Paramètres
+
+- `x`
+  - : Un nombre.
+
+### Valeur de retour
+
+Le logarithme naturelle de la valeur passée en argument. Si cette valeur est négative, c'est {{jsxref("NaN")}} qui est renvoyé.
+
+## Description
+
+Si la valeur de l'argument est négative, la valeur renvoyée sera {{jsxref("NaN")}}. Si la valeur de l'argument est `0`, la valeur de retour sera {{jsxref("Number.NEGATIVE_INFINITY", "-Infinity")}}.
+
+`log()` est une méthode statique de `Math`, elle doit toujours être utilisée avec la syntaxe `Math.log()`, elle ne doit pas être utilisée à partir d'un autre objet qui aurait été créé (`Math` n'est pas un constructeur). Si on veut utiliser les constantes données par les logarithmes naturels de 2 ou 10, on pourra utiliser les constantes {{jsxref("Math.LN2")}} ou {{jsxref("Math.LN10")}}. De même pour les logarithmes en base 2 ou en base 10, on pourra utiliser {{jsxref("Math.log2()")}} or {{jsxref("Math.log10()")}}.
+
+## Exemples
+
+### Utiliser `Math.log()`
+
+```js
+Math.log(-1); // NaN, valeur en dehors de l'intervalle de définition
+Math.log(0);  // -Infinity
+Math.log(1);  // 0
+Math.log(10); // 2.302585092994046
+```
+
+### Utiliser `Math.log` pour construire un logarithme sur une autre base
+
+La fonction suivante renvoie le logarithme de `y` en base `x` (c'est-à-dire log<sub>x</sub> y):
+
+```js
+function getBaseLog(x, y) {
+    return Math.log(y) / Math.log(x);
+}
+```
+
+Si on exécute `getBaseLog(10, 1000)`, on obtiendra `2.9999999999999996` en raison de l'arrondi du à la représentation en nombre flottant (le résultat exact étant 3).
+
+## Spécifications
+
+| Spécification                                                        | État                         | Commentaires                                          |
+| -------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- |
+| {{SpecName('ES1')}}                                             | {{Spec2('ES1')}}         | Définition initiale. Implémentée avec JavaScript 1.0. |
+| {{SpecName('ES5.1', '#sec-15.8.2.10', 'Math.log')}} | {{Spec2('ES5.1')}}     |                                                       |
+| {{SpecName('ES6', '#sec-math.log', 'Math.log')}}     | {{Spec2('ES6')}}         |                                                       |
+| {{SpecName('ESDraft', '#sec-math.log', 'Math.log')}} | {{Spec2('ESDraft')}} |                                                       |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Math.log")}}
+
+## Voir aussi
+
+- {{jsxref("Math.exp()")}}
+- {{jsxref("Math.log1p()")}}
+- {{jsxref("Math.log10()")}}
+- {{jsxref("Math.log2()")}}
+- {{jsxref("Math.pow()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/math/log10/index.html b/files/fr/web/javascript/reference/global_objects/math/log10/index.html
deleted file mode 100644
index d0e65dca47..0000000000
--- a/files/fr/web/javascript/reference/global_objects/math/log10/index.html
+++ /dev/null
@@ -1,97 +0,0 @@
----
-title: Math.log10()
-slug: Web/JavaScript/Reference/Global_Objects/Math/log10
-tags:
-  - ECMAScript 2015
-  - JavaScript
-  - Math
-  - Méthode
-  - Reference
-  - polyfill
-translation_of: Web/JavaScript/Reference/Global_Objects/Math/log10
-original_slug: Web/JavaScript/Reference/Objets_globaux/Math/log10
----
-<div>{{JSRef}}</div>
-
-<p>La fonction <code><strong>Math.log10()</strong></code> renvoie le logarithme en base 10 d'un nombre, donné par la formule :</p>
-
-<p><math><semantics><mrow><mo>∀</mo><mi>x</mi><mo>&gt;</mo><mn>0</mn><mo>,</mo><mstyle mathvariant="monospace"><mrow><mo lspace="0em" rspace="thinmathspace">Math.log10</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo></mrow></mstyle><mo>=</mo><msub><mo lspace="0em" rspace="0em">log</mo><mn>10</mn></msub><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo><mo>=</mo><mtext>l'unique  </mtext><mi>y</mi><mspace width="thickmathspace"></mspace><mtext>tel que</mtext><mspace width="thickmathspace"></mspace><msup><mn>10</mn><mi>y</mi></msup><mo>=</mo><mi>x</mi></mrow><annotation encoding="TeX">\forall x &gt; 0, \mathtt{\operatorname{Math.log10}(x)} = \log_10(x) = \text{the unique} \; y \; \text{such that} \; 10^y = x</annotation></semantics></math></p>
-
-<div>{{EmbedInteractiveExample("pages/js/math-log10.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">Math.log10(<var>x</var>)</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>x</code></dt>
- <dd>Un nombre.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Le logarithme en base 10 du nombre passé en argument. Si cette valeur est négative, c'est {{jsxref("NaN")}} qui sera renvoyé.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>Si la valeur de l'argument est strictement inférieure à 0, la valeur renvoyée à {{jsxref("NaN")}}.</p>
-
-<p><code>log10()</code> étant une méthode statique de <code>Math</code>, il faut utiliser <code>Math.<code>log10</code>()</code>et non pas la méthode d'un autre objet qui aurait été créé (<code>Math</code> n'est pas un constructeur). Cette fonction est équivalente à la fonction donnée par <code>Math.log(x) / Math.log(10)</code>.</p>
-
-<h2 id="Exemple">Exemple</h2>
-
-<h3 id="Utiliser_Math.log10()">Utiliser <code>Math.log10()</code></h3>
-
-<pre class="brush:js">Math.log10(2);      // 0.3010299956639812
-Math.log10(1);      // 0
-Math.log10(0);      // -Infinity
-Math.log10(-2);     // NaN
-Math.log10(100000); // 5
-</pre>
-
-<h2 id="Prothèse_d'émulation_(polyfill)">Prothèse d'émulation (<em>polyfill</em>)</h2>
-
-<p>Il est possible d'avoir un résultat approximatif avec la fonction suivante :</p>
-
-<pre class="brush: js">Math.log10 = Math.log10 || function(x) {
-  return Math.log(x) * Math.LOG10E;
-};
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-math.log10', 'Math.log10')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-math.log10', 'Math.log10')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Math.log10")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Math.exp()")}}</li>
- <li>{{jsxref("Math.log()")}}</li>
- <li>{{jsxref("Math.log1p()")}}</li>
- <li>{{jsxref("Math.log2()")}}</li>
- <li>{{jsxref("Math.pow()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/math/log10/index.md b/files/fr/web/javascript/reference/global_objects/math/log10/index.md
new file mode 100644
index 0000000000..763738f700
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/math/log10/index.md
@@ -0,0 +1,80 @@
+---
+title: Math.log10()
+slug: Web/JavaScript/Reference/Global_Objects/Math/log10
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Math
+  - Méthode
+  - Reference
+  - polyfill
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/log10
+original_slug: Web/JavaScript/Reference/Objets_globaux/Math/log10
+---
+{{JSRef}}
+
+La fonction **`Math.log10()`** renvoie le logarithme en base 10 d'un nombre, donné par la formule :
+
+<math><semantics><mrow><mo>∀</mo><mi>x</mi><mo>></mo><mn>0</mn><mo>,</mo><mstyle mathvariant="monospace"><mrow><mo lspace="0em" rspace="thinmathspace">Math.log10</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo></mrow></mstyle><mo>=</mo><msub><mo lspace="0em" rspace="0em">log</mo><mn>10</mn></msub><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo><mo>=</mo><mtext>l'unique  </mtext><mi>y</mi><mspace width="thickmathspace"></mspace><mtext>tel que</mtext><mspace width="thickmathspace"></mspace><msup><mn>10</mn><mi>y</mi></msup><mo>=</mo><mi>x</mi></mrow><annotation encoding="TeX">\forall x > 0, \mathtt{\operatorname{Math.log10}(x)} = \log_10(x) = \text{the unique} \; y \; \text{such that} \; 10^y = x</annotation></semantics></math>
+
+{{EmbedInteractiveExample("pages/js/math-log10.html")}}
+
+## Syntaxe
+
+    Math.log10(x)
+
+### Paramètres
+
+- `x`
+  - : Un nombre.
+
+### Valeur de retour
+
+Le logarithme en base 10 du nombre passé en argument. Si cette valeur est négative, c'est {{jsxref("NaN")}} qui sera renvoyé.
+
+## Description
+
+Si la valeur de l'argument est strictement inférieure à 0, la valeur renvoyée à {{jsxref("NaN")}}.
+
+`log10()` étant une méthode statique de `Math`, il faut utiliser `Math.log10()`et non pas la méthode d'un autre objet qui aurait été créé (`Math` n'est pas un constructeur). Cette fonction est équivalente à la fonction donnée par `Math.log(x) / Math.log(10)`.
+
+## Exemple
+
+### Utiliser `Math.log10()`
+
+```js
+Math.log10(2);      // 0.3010299956639812
+Math.log10(1);      // 0
+Math.log10(0);      // -Infinity
+Math.log10(-2);     // NaN
+Math.log10(100000); // 5
+```
+
+## Prothèse d'émulation (_polyfill_)
+
+Il est possible d'avoir un résultat approximatif avec la fonction suivante :
+
+```js
+Math.log10 = Math.log10 || function(x) {
+  return Math.log(x) * Math.LOG10E;
+};
+```
+
+## Spécifications
+
+| Spécification                                                                | État                         | Commentaires         |
+| ---------------------------------------------------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName('ES2015', '#sec-math.log10', 'Math.log10')}}     | {{Spec2('ES2015')}}     | Définition initiale. |
+| {{SpecName('ESDraft', '#sec-math.log10', 'Math.log10')}} | {{Spec2('ESDraft')}} |                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Math.log10")}}
+
+## Voir aussi
+
+- {{jsxref("Math.exp()")}}
+- {{jsxref("Math.log()")}}
+- {{jsxref("Math.log1p()")}}
+- {{jsxref("Math.log2()")}}
+- {{jsxref("Math.pow()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/math/log10e/index.html b/files/fr/web/javascript/reference/global_objects/math/log10e/index.html
deleted file mode 100644
index 175018cc26..0000000000
--- a/files/fr/web/javascript/reference/global_objects/math/log10e/index.html
+++ /dev/null
@@ -1,82 +0,0 @@
----
-title: Math.LOG10E
-slug: Web/JavaScript/Reference/Global_Objects/Math/LOG10E
-tags:
-  - JavaScript
-  - Math
-  - Propriété
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Math/LOG10E
-original_slug: Web/JavaScript/Reference/Objets_globaux/Math/LOG10E
----
-<div>{{JSRef}}</div>
-
-<p>La propriété <code><strong>Math.LOG10E</strong></code> fournit la valeur du logarithme en base 10 de e, environ 0.434 :</p>
-
-<p><math display="block"><semantics><mrow><mstyle mathvariant="monospace"><mi>Math.LOG10E</mi></mstyle><mo>=</mo><msub><mo lspace="0em" rspace="0em">log</mo><mn>10</mn></msub><mo stretchy="false">(</mo><mi>e</mi><mo stretchy="false">)</mo><mo>≈</mo><mn>0.434</mn></mrow><annotation encoding="TeX">\mathtt{\mi{Math.LOG10E}} = \log_10(e) \approx 0.434</annotation></semantics></math></p>
-
-<div>{{EmbedInteractiveExample("pages/js/math-log10e.html")}}</div>
-
-
-
-<div>{{js_property_attributes(0,0,0)}}</div>
-
-<h2 id="Description">Description</h2>
-
-<p><code>LOG10E</code> étant une propriété statique de <code>Math</code>, elle doit toujours être utilisée avec la syntaxe <code>Math.LOG10E</code> et ne pas être appelée comme propriété d'un autre objet qui aurait été créé (<code>Math</code> n'est pas un constructeur).</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Utiliser_Math.LOG10E">Utiliser <code>Math.LOG10E</code></h3>
-
-<p>La fonction suivante renvoie le logarithme en base 10 de e :</p>
-
-<pre class="brush:js">function getLog10e() {
-   return Math.LOG10E;
-}
-
-getLog10e(); // 0.4342944819032518</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES1')}}</td>
-   <td>{{Spec2('ES1')}}</td>
-   <td>Définition initiale. Implémentée avec JavaScript 1.0.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-15.8.1.5', 'Math.LOG10E')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-math.log10e', 'Math.LOG10E')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-math.log10e', 'Math.LOG10E')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Math.LOG10E")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Math.exp()")}}</li>
- <li>{{jsxref("Math.log()")}}</li>
- <li>{{jsxref("Math.log10()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/math/log10e/index.md b/files/fr/web/javascript/reference/global_objects/math/log10e/index.md
new file mode 100644
index 0000000000..05f9f01a3a
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/math/log10e/index.md
@@ -0,0 +1,55 @@
+---
+title: Math.LOG10E
+slug: Web/JavaScript/Reference/Global_Objects/Math/LOG10E
+tags:
+  - JavaScript
+  - Math
+  - Propriété
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/LOG10E
+original_slug: Web/JavaScript/Reference/Objets_globaux/Math/LOG10E
+---
+{{JSRef}}
+
+La propriété **`Math.LOG10E`** fournit la valeur du logarithme en base 10 de e, environ 0.434 :
+
+<math display="block"><semantics><mrow><mstyle mathvariant="monospace"><mi>Math.LOG10E</mi></mstyle><mo>=</mo><msub><mo lspace="0em" rspace="0em">log</mo><mn>10</mn></msub><mo stretchy="false">(</mo><mi>e</mi><mo stretchy="false">)</mo><mo>≈</mo><mn>0.434</mn></mrow><annotation encoding="TeX">\mathtt{\mi{Math.LOG10E}} = \log_10(e) \approx 0.434</annotation></semantics></math>
+
+{{EmbedInteractiveExample("pages/js/math-log10e.html")}}{{js_property_attributes(0,0,0)}}
+
+## Description
+
+`LOG10E` étant une propriété statique de `Math`, elle doit toujours être utilisée avec la syntaxe `Math.LOG10E` et ne pas être appelée comme propriété d'un autre objet qui aurait été créé (`Math` n'est pas un constructeur).
+
+## Exemples
+
+### Utiliser `Math.LOG10E`
+
+La fonction suivante renvoie le logarithme en base 10 de e :
+
+```js
+function getLog10e() {
+   return Math.LOG10E;
+}
+
+getLog10e(); // 0.4342944819032518
+```
+
+## Spécifications
+
+| Spécification                                                                | État                         | Commentaires                                          |
+| ---------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- |
+| {{SpecName('ES1')}}                                                     | {{Spec2('ES1')}}         | Définition initiale. Implémentée avec JavaScript 1.0. |
+| {{SpecName('ES5.1', '#sec-15.8.1.5', 'Math.LOG10E')}}     | {{Spec2('ES5.1')}}     |                                                       |
+| {{SpecName('ES6', '#sec-math.log10e', 'Math.LOG10E')}}     | {{Spec2('ES6')}}         |                                                       |
+| {{SpecName('ESDraft', '#sec-math.log10e', 'Math.LOG10E')}} | {{Spec2('ESDraft')}} |                                                       |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Math.LOG10E")}}
+
+## Voir aussi
+
+- {{jsxref("Math.exp()")}}
+- {{jsxref("Math.log()")}}
+- {{jsxref("Math.log10()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/math/log1p/index.html b/files/fr/web/javascript/reference/global_objects/math/log1p/index.html
deleted file mode 100644
index 04913b856c..0000000000
--- a/files/fr/web/javascript/reference/global_objects/math/log1p/index.html
+++ /dev/null
@@ -1,96 +0,0 @@
----
-title: Math.log1p()
-slug: Web/JavaScript/Reference/Global_Objects/Math/log1p
-tags:
-  - ECMAScript 2015
-  - JavaScript
-  - Math
-  - Méthode
-  - Reference
-  - polyfill
-translation_of: Web/JavaScript/Reference/Global_Objects/Math/log1p
-original_slug: Web/JavaScript/Reference/Objets_globaux/Math/log1p
----
-<div>{{JSRef}}</div>
-
-<p>La fonction <code><strong>Math.log1p()</strong></code> renvoie le logarithme népérien (en base {{jsxref("Math/E","e")}}) d'un nombre +1, donné par la formule :</p>
-
-<p><math><semantics><mrow><mo>∀</mo><mi>x</mi><mo>&gt;</mo><mo>-</mo><mn>1</mn><mo>,</mo><mstyle mathvariant="monospace"><mrow><mo lspace="0em" rspace="thinmathspace">Math.log1p</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo></mrow></mstyle><mo>=</mo><mo lspace="0em" rspace="0em">ln</mo><mo stretchy="false">(</mo><mn>1</mn><mo>+</mo><mi>x</mi><mo stretchy="false">)</mo></mrow><annotation encoding="TeX">\forall x &gt; -1, \mathtt{\operatorname{Math.log1p}(x)} = \ln(1 + x)</annotation></semantics></math></p>
-
-<div>{{EmbedInteractiveExample("pages/js/math-log1p.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">Math.log1p(<var>x</var>)</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>x</code></dt>
- <dd>Un nombre.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>La valeur du logarithme naturel de 1 plus l'argument (<code>log(1 + x</code>)). Si l'argument est inférieur à <code>-1</code>, {{jsxref("NaN")}} est renvoyée.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>Si <code>x</code> est strictement inférieur à -1, la valeur renvoyée est {{jsxref("NaN")}}.</p>
-
-<p><code>log1p</code> étant une méthode statique de <code>Math</code>, il faut utiliser <code>Math.<code>log1p</code>()</code> et non pas la méthode d'un autre objet qui aurait été créé (<code>Math</code> n'est pas un constructeur).</p>
-
-<h2 id="Exemple">Exemple</h2>
-
-<h3 id="Utiliser_Math.log1p()">Utiliser <code>Math.log1p()</code></h3>
-
-<pre class="brush:js">Math.log1p(1);  // 0.6931471805599453
-Math.log1p(0);  // 0
-Math.log1p(-1); // -Infinity
-Math.log1p(-2); // NaN
-</pre>
-
-<h2 id="Prothèse_d'émulation_(polyfill)">Prothèse d'émulation (<em>polyfill</em>)</h2>
-
-<p>Si cette fonction n'est pas disponible, elle peut être définie grâce au code suivant :</p>
-
-<pre class="brush: js">Math.log1p = Math.log1p || function(x) {
-  return Math.log(1 + x);
-};
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-math.log1p', 'Math.log1p')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-math.log1p', 'Math.log1p')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Math.log1p")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Math.exp()")}}</li>
- <li>{{jsxref("Math.log()")}}</li>
- <li>{{jsxref("Math.log10()")}}</li>
- <li>{{jsxref("Math.log2()")}}</li>
- <li>{{jsxref("Math.pow()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/math/log1p/index.md b/files/fr/web/javascript/reference/global_objects/math/log1p/index.md
new file mode 100644
index 0000000000..1ca30ae91d
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/math/log1p/index.md
@@ -0,0 +1,79 @@
+---
+title: Math.log1p()
+slug: Web/JavaScript/Reference/Global_Objects/Math/log1p
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Math
+  - Méthode
+  - Reference
+  - polyfill
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/log1p
+original_slug: Web/JavaScript/Reference/Objets_globaux/Math/log1p
+---
+{{JSRef}}
+
+La fonction **`Math.log1p()`** renvoie le logarithme népérien (en base {{jsxref("Math/E","e")}}) d'un nombre +1, donné par la formule :
+
+<math><semantics><mrow><mo>∀</mo><mi>x</mi><mo>></mo><mo>-</mo><mn>1</mn><mo>,</mo><mstyle mathvariant="monospace"><mrow><mo lspace="0em" rspace="thinmathspace">Math.log1p</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo></mrow></mstyle><mo>=</mo><mo lspace="0em" rspace="0em">ln</mo><mo stretchy="false">(</mo><mn>1</mn><mo>+</mo><mi>x</mi><mo stretchy="false">)</mo></mrow><annotation encoding="TeX">\forall x > -1, \mathtt{\operatorname{Math.log1p}(x)} = \ln(1 + x)</annotation></semantics></math>
+
+{{EmbedInteractiveExample("pages/js/math-log1p.html")}}
+
+## Syntaxe
+
+    Math.log1p(x)
+
+### Paramètres
+
+- `x`
+  - : Un nombre.
+
+### Valeur de retour
+
+La valeur du logarithme naturel de 1 plus l'argument (`log(1 + x`)). Si l'argument est inférieur à `-1`, {{jsxref("NaN")}} est renvoyée.
+
+## Description
+
+Si `x` est strictement inférieur à -1, la valeur renvoyée est {{jsxref("NaN")}}.
+
+`log1p` étant une méthode statique de `Math`, il faut utiliser `Math.log1p()` et non pas la méthode d'un autre objet qui aurait été créé (`Math` n'est pas un constructeur).
+
+## Exemple
+
+### Utiliser `Math.log1p()`
+
+```js
+Math.log1p(1);  // 0.6931471805599453
+Math.log1p(0);  // 0
+Math.log1p(-1); // -Infinity
+Math.log1p(-2); // NaN
+```
+
+## Prothèse d'émulation (_polyfill_)
+
+Si cette fonction n'est pas disponible, elle peut être définie grâce au code suivant :
+
+```js
+Math.log1p = Math.log1p || function(x) {
+  return Math.log(1 + x);
+};
+```
+
+## Spécifications
+
+| Spécification                                                                | État                         | Commentaires         |
+| ---------------------------------------------------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName('ES2015', '#sec-math.log1p', 'Math.log1p')}}     | {{Spec2('ES2015')}}     | Définition initiale. |
+| {{SpecName('ESDraft', '#sec-math.log1p', 'Math.log1p')}} | {{Spec2('ESDraft')}} |                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Math.log1p")}}
+
+## Voir aussi
+
+- {{jsxref("Math.exp()")}}
+- {{jsxref("Math.log()")}}
+- {{jsxref("Math.log10()")}}
+- {{jsxref("Math.log2()")}}
+- {{jsxref("Math.pow()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/math/log2/index.html b/files/fr/web/javascript/reference/global_objects/math/log2/index.html
deleted file mode 100644
index c1700ae5c1..0000000000
--- a/files/fr/web/javascript/reference/global_objects/math/log2/index.html
+++ /dev/null
@@ -1,89 +0,0 @@
----
-title: Math.log2()
-slug: Web/JavaScript/Reference/Global_Objects/Math/log2
-tags:
-  - ECMAScript 2015
-  - JavaScript
-  - Math
-  - Méthode
-  - Reference
-  - polyfill
-translation_of: Web/JavaScript/Reference/Global_Objects/Math/log2
-original_slug: Web/JavaScript/Reference/Objets_globaux/Math/log2
----
-<div>{{JSRef}}</div>
-
-<p>La fonction <code><strong>Math.log2()</strong></code> renvoie le logarithme en base 2 d'un nombre :</p>
-
-<p><math><semantics><mrow><mo>∀</mo><mi>x</mi><mo>&gt;</mo><mn>0</mn><mo>,</mo><mstyle mathvariant="monospace"><mrow><mo lspace="0em" rspace="thinmathspace">Math.log2</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo></mrow></mstyle><mo>=</mo><msub><mo lspace="0em" rspace="0em">log</mo><mn>2</mn></msub><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo><mo>=</mo><mtext>l'unique </mtext><mspace width="thickmathspace"></mspace><mi>y</mi><mspace width="thickmathspace"></mspace><mtext>tel que</mtext><mspace width="thickmathspace"></mspace><msup><mn>2</mn><mi>y</mi></msup><mo>=</mo><mi>x</mi></mrow><annotation encoding="TeX">\forall x &gt; 0, \mathtt{\operatorname{Math.log2}(x)} = \log_2(x) = \text{the unique} \; y \; \text{such that} \; 2^y = x</annotation></semantics></math></p>
-
-<div>{{EmbedInteractiveExample("pages/js/math-log2.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">Math.log2(<var>x</var>)</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>x</code></dt>
- <dd>Un nombre.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Le logarithme en base 2 du nombre passé en argument. Si ce nombre est négatif, c'est {{jsxref("NaN")}} qui sera renvoyé.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>Si <code>x</code> est strictement inférieur à 0, la valeur renvoyée sera {{jsxref("NaN")}}.</p>
-
-<p><code>log2()</code> étant une méthode statique de <code>Math</code>, il faut utiliser <code>Math.<code>log2</code>()</code> et non pas la méthode d'un autre objet qui aurait été créé (<code>Math </code>n'est pas un constructeur). Si on souhaite utiliser des constantes, on pourra employer {{jsxref("Math.LOG2E")}} ou {{jsxref("Math.LN2")}}.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Utiliser_Math.log2()">Utiliser <code>Math.log2()</code></h3>
-
-<pre class="brush:js">Math.log2(3);    // 1.584962500721156
-Math.log2(2);    // 1
-Math.log2(1);    // 0
-Math.log2(0);    // -Infinity
-Math.log2(-2);   // NaN
-Math.log2(1024); // 10
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-math.log2', 'Math.log2')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-math.log2', 'Math.log2')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Math.log2")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Math.exp()")}}</li>
- <li>{{jsxref("Math.log()")}}</li>
- <li>{{jsxref("Math.log10()")}}</li>
- <li>{{jsxref("Math.log1p()")}}</li>
- <li>{{jsxref("Math.pow()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/math/log2/index.md b/files/fr/web/javascript/reference/global_objects/math/log2/index.md
new file mode 100644
index 0000000000..8d9d91c64b
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/math/log2/index.md
@@ -0,0 +1,71 @@
+---
+title: Math.log2()
+slug: Web/JavaScript/Reference/Global_Objects/Math/log2
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Math
+  - Méthode
+  - Reference
+  - polyfill
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/log2
+original_slug: Web/JavaScript/Reference/Objets_globaux/Math/log2
+---
+{{JSRef}}
+
+La fonction **`Math.log2()`** renvoie le logarithme en base 2 d'un nombre :
+
+<math><semantics><mrow><mo>∀</mo><mi>x</mi><mo>></mo><mn>0</mn><mo>,</mo><mstyle mathvariant="monospace"><mrow><mo lspace="0em" rspace="thinmathspace">Math.log2</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo></mrow></mstyle><mo>=</mo><msub><mo lspace="0em" rspace="0em">log</mo><mn>2</mn></msub><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo><mo>=</mo><mtext>l'unique </mtext><mspace width="thickmathspace"></mspace><mi>y</mi><mspace width="thickmathspace"></mspace><mtext>tel que</mtext><mspace width="thickmathspace"></mspace><msup><mn>2</mn><mi>y</mi></msup><mo>=</mo><mi>x</mi></mrow><annotation encoding="TeX">\forall x > 0, \mathtt{\operatorname{Math.log2}(x)} = \log_2(x) = \text{the unique} \; y \; \text{such that} \; 2^y = x</annotation></semantics></math>
+
+{{EmbedInteractiveExample("pages/js/math-log2.html")}}
+
+## Syntaxe
+
+    Math.log2(x)
+
+### Paramètres
+
+- `x`
+  - : Un nombre.
+
+### Valeur de retour
+
+Le logarithme en base 2 du nombre passé en argument. Si ce nombre est négatif, c'est {{jsxref("NaN")}} qui sera renvoyé.
+
+## Description
+
+Si `x` est strictement inférieur à 0, la valeur renvoyée sera {{jsxref("NaN")}}.
+
+`log2()` étant une méthode statique de `Math`, il faut utiliser `Math.log2()` et non pas la méthode d'un autre objet qui aurait été créé (`Math `n'est pas un constructeur). Si on souhaite utiliser des constantes, on pourra employer {{jsxref("Math.LOG2E")}} ou {{jsxref("Math.LN2")}}.
+
+## Exemples
+
+### Utiliser `Math.log2()`
+
+```js
+Math.log2(3);    // 1.584962500721156
+Math.log2(2);    // 1
+Math.log2(1);    // 0
+Math.log2(0);    // -Infinity
+Math.log2(-2);   // NaN
+Math.log2(1024); // 10
+```
+
+## Spécifications
+
+| Spécification                                                            | État                         | Commentaires         |
+| ------------------------------------------------------------------------ | ---------------------------- | -------------------- |
+| {{SpecName('ES2015', '#sec-math.log2', 'Math.log2')}} | {{Spec2('ES2015')}}     | Définition initiale. |
+| {{SpecName('ESDraft', '#sec-math.log2', 'Math.log2')}} | {{Spec2('ESDraft')}} |                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Math.log2")}}
+
+## Voir aussi
+
+- {{jsxref("Math.exp()")}}
+- {{jsxref("Math.log()")}}
+- {{jsxref("Math.log10()")}}
+- {{jsxref("Math.log1p()")}}
+- {{jsxref("Math.pow()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/math/log2e/index.html b/files/fr/web/javascript/reference/global_objects/math/log2e/index.html
deleted file mode 100644
index ef33a48cf1..0000000000
--- a/files/fr/web/javascript/reference/global_objects/math/log2e/index.html
+++ /dev/null
@@ -1,82 +0,0 @@
----
-title: Math.LOG2E
-slug: Web/JavaScript/Reference/Global_Objects/Math/LOG2E
-tags:
-  - JavaScript
-  - Math
-  - Propriété
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Math/LOG2E
-original_slug: Web/JavaScript/Reference/Objets_globaux/Math/LOG2E
----
-<div>{{JSRef}}</div>
-
-<p>La propriété <code><strong>Math.LOG2E</strong></code> représente la valeur du logarithme en base 2 de e, environ 1.442 :</p>
-
-<p><math display="block"><semantics><mrow><mstyle mathvariant="monospace"><mi>Math.LOG2E</mi></mstyle><mo>=</mo><msub><mo lspace="0em" rspace="0em">log</mo><mn>2</mn></msub><mo stretchy="false">(</mo><mi>e</mi><mo stretchy="false">)</mo><mo>≈</mo><mn>1.442</mn></mrow><annotation encoding="TeX">\mathtt{\mi{Math.LOG2E}} = \log_2(e) \approx 1.442</annotation></semantics></math></p>
-
-<div>{{EmbedInteractiveExample("pages/js/math-log2e.html")}}</div>
-
-
-
-<div>{{js_property_attributes(0,0,0)}}</div>
-
-<h2 id="Description">Description</h2>
-
-<p><code>LOG2E</code> est une propriété statique de l'objet <code>Math</code> et doit toujours être utilisé avec la syntaxe <code>Math.LOG2E</code> plutôt que comme la propriété d'un autre objet qui aurait été créé (<code>Math</code> n'est pas un constructeur).</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Utiliser_Math.LOG2E">Utiliser <code>Math.LOG2E</code></h3>
-
-<p>La fonction suivante renvoie la valeur du logarithme en base 2 de e :</p>
-
-<pre class="brush:js">function getLog2e() {
-   return Math.LOG2E;
-}
-
-getLog2e(); // 1.4426950408889634</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES1')}}</td>
-   <td>{{Spec2('ES1')}}</td>
-   <td>Définition initiale. Implémentée avec JavaScript 1.0.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-15.8.1.4', 'Math.LOG2E')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-math.log2e', 'Math.LOG2E')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-math.log2e', 'Math.LOG2E')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Math.LOG2E")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Math.exp()")}}</li>
- <li>{{jsxref("Math.log()")}}</li>
- <li>{{jsxref("Math.log2()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/math/log2e/index.md b/files/fr/web/javascript/reference/global_objects/math/log2e/index.md
new file mode 100644
index 0000000000..6f986e4bf3
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/math/log2e/index.md
@@ -0,0 +1,55 @@
+---
+title: Math.LOG2E
+slug: Web/JavaScript/Reference/Global_Objects/Math/LOG2E
+tags:
+  - JavaScript
+  - Math
+  - Propriété
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/LOG2E
+original_slug: Web/JavaScript/Reference/Objets_globaux/Math/LOG2E
+---
+{{JSRef}}
+
+La propriété **`Math.LOG2E`** représente la valeur du logarithme en base 2 de e, environ 1.442 :
+
+<math display="block"><semantics><mrow><mstyle mathvariant="monospace"><mi>Math.LOG2E</mi></mstyle><mo>=</mo><msub><mo lspace="0em" rspace="0em">log</mo><mn>2</mn></msub><mo stretchy="false">(</mo><mi>e</mi><mo stretchy="false">)</mo><mo>≈</mo><mn>1.442</mn></mrow><annotation encoding="TeX">\mathtt{\mi{Math.LOG2E}} = \log_2(e) \approx 1.442</annotation></semantics></math>
+
+{{EmbedInteractiveExample("pages/js/math-log2e.html")}}{{js_property_attributes(0,0,0)}}
+
+## Description
+
+`LOG2E` est une propriété statique de l'objet `Math` et doit toujours être utilisé avec la syntaxe `Math.LOG2E` plutôt que comme la propriété d'un autre objet qui aurait été créé (`Math` n'est pas un constructeur).
+
+## Exemples
+
+### Utiliser `Math.LOG2E`
+
+La fonction suivante renvoie la valeur du logarithme en base 2 de e :
+
+```js
+function getLog2e() {
+   return Math.LOG2E;
+}
+
+getLog2e(); // 1.4426950408889634
+```
+
+## Spécifications
+
+| Spécification                                                                | Statut                       | Commentaires                                          |
+| ---------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- |
+| {{SpecName('ES1')}}                                                     | {{Spec2('ES1')}}         | Définition initiale. Implémentée avec JavaScript 1.0. |
+| {{SpecName('ES5.1', '#sec-15.8.1.4', 'Math.LOG2E')}}         | {{Spec2('ES5.1')}}     |                                                       |
+| {{SpecName('ES6', '#sec-math.log2e', 'Math.LOG2E')}}         | {{Spec2('ES6')}}         |                                                       |
+| {{SpecName('ESDraft', '#sec-math.log2e', 'Math.LOG2E')}} | {{Spec2('ESDraft')}} |                                                       |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Math.LOG2E")}}
+
+## Voir aussi
+
+- {{jsxref("Math.exp()")}}
+- {{jsxref("Math.log()")}}
+- {{jsxref("Math.log2()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/math/max/index.html b/files/fr/web/javascript/reference/global_objects/math/max/index.html
deleted file mode 100644
index 78e3810bca..0000000000
--- a/files/fr/web/javascript/reference/global_objects/math/max/index.html
+++ /dev/null
@@ -1,112 +0,0 @@
----
-title: Math.max()
-slug: Web/JavaScript/Reference/Global_Objects/Math/max
-tags:
-  - JavaScript
-  - Math
-  - Méthode
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Math/max
-original_slug: Web/JavaScript/Reference/Objets_globaux/Math/max
----
-<div>{{JSRef}}</div>
-
-<p>La fonction <code><strong>Math.max()</strong></code> renvoie le plus grand nombre d'une série de 0 ou plusieurs nombres.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/math-max.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">Math.max([<var>valeur1</var>[,<var>valeur2</var>, ...]]) </pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>valeur1, valeur2, ...</code></dt>
- <dd>Des nombres.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Le plus grand des nombres passés en arguments. S'il existe un des arguments qui ne peut pas être converti en nombre, c'est {{jsxref("NaN")}} qui sera renvoyé.</p>
-
-<h2 id="Description">Description</h2>
-
-<p><code>max()</code> est une méthode statique de <code>Math</code> et doit toujours être utilisée avec la syntaxe <code>Math.max()</code>, elle ne doit pas être appelée comme la méthode d'un autre objet qui aurait été créé (<code>Math</code> n'est pas un constructeur).</p>
-
-<p>Si aucun argument n'est fourni, le résultat sera -{{jsxref("Infinity")}}.</p>
-
-<p>Si au moins un des arguments ne peut pas être converti en un nombre, le résultat sera {{jsxref("NaN")}}.</p>
-
-<h2 id="Exemple">Exemple</h2>
-
-<h3 id="Utiliser_Math.max()">Utiliser <code>Math.max()</code></h3>
-
-<pre class="brush: js">Math.max(10, 20);   //  20
-Math.max(-10, -20); // -10
-Math.max(-10, 20);  //  20
-</pre>
-
-<h3 id="Obtenir_l'élément_maximum_d'un_tableau">Obtenir l'élément maximum d'un tableau</h3>
-
-<p>La méthode {{jsxref("Array.prototype.reduce()")}} peut être utilisée pour déterminer la valeur maximale d'un tableau de nombre en comparant les valeurs qui se suivent :</p>
-
-<pre class="brush: js">var arr = [1, 2, 3];
-var max = arr.reduce(function(a,b) {
-  return Math.max(a, b);
-});</pre>
-
-<p>On peut également utiliser {{jsxref("Function.prototype.apply()")}} afin de trouver le maximum parmi un tableau de nombres. <code>getMaxTableau([1,2,3])</code> sera équivalent à <code>Math.max(1, 2, 3)</code>, mais <code>getMaxTableau</code> pourra être utilisé sur des tableaux de n'importe quelle taille.</p>
-
-<pre class="brush:js">function getMaxTableau(tableauNumérique) {
-    return Math.max.apply(null, tableauNumérique);
-}</pre>
-
-<p>Avec le nouvel {{jsxref("Opérateurs/Affecter_par_décomposition","opérateur de décomposition","","1")}}, on pourra également utiliser cette syntaxe, plus concise et plus simple :</p>
-
-<pre class="brush: js">var arr = [1, 2, 3];
-var max = Math.max(...arr);</pre>
-
-<p>Attention avec la décomposition et <code>apply()</code> qui pourront échouer s'il y a trop d'éléments dans le tableau (car ceux-ci seront passés en arguments). Pour plus d'informations, consulter <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Function/apply#Utiliser_apply_et_des_fonctions_natives">Utiliser apply() et les fonctions natives</a>. La méthode proposée avec <code>reduce()</code> n'a pas cette contrainte.</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES1')}}</td>
-   <td>{{Spec2('ES1')}}</td>
-   <td>Définition initiale. Implémentée avec JavaScript 1.0.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-15.8.2.11', 'Math.max')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-math.max', 'Math.max')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-math.max', 'Math.max')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Math.max")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Math.min()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/math/max/index.md b/files/fr/web/javascript/reference/global_objects/math/max/index.md
new file mode 100644
index 0000000000..ceae8a1e98
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/math/max/index.md
@@ -0,0 +1,92 @@
+---
+title: Math.max()
+slug: Web/JavaScript/Reference/Global_Objects/Math/max
+tags:
+  - JavaScript
+  - Math
+  - Méthode
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/max
+original_slug: Web/JavaScript/Reference/Objets_globaux/Math/max
+---
+{{JSRef}}
+
+La fonction **`Math.max()`** renvoie le plus grand nombre d'une série de 0 ou plusieurs nombres.
+
+{{EmbedInteractiveExample("pages/js/math-max.html")}}
+
+## Syntaxe
+
+    Math.max([valeur1[,valeur2, ...]])
+
+### Paramètres
+
+- `valeur1, valeur2, ...`
+  - : Des nombres.
+
+### Valeur de retour
+
+Le plus grand des nombres passés en arguments. S'il existe un des arguments qui ne peut pas être converti en nombre, c'est {{jsxref("NaN")}} qui sera renvoyé.
+
+## Description
+
+`max()` est une méthode statique de `Math` et doit toujours être utilisée avec la syntaxe `Math.max()`, elle ne doit pas être appelée comme la méthode d'un autre objet qui aurait été créé (`Math` n'est pas un constructeur).
+
+Si aucun argument n'est fourni, le résultat sera -{{jsxref("Infinity")}}.
+
+Si au moins un des arguments ne peut pas être converti en un nombre, le résultat sera {{jsxref("NaN")}}.
+
+## Exemple
+
+### Utiliser `Math.max()`
+
+```js
+Math.max(10, 20);   //  20
+Math.max(-10, -20); // -10
+Math.max(-10, 20);  //  20
+```
+
+### Obtenir l'élément maximum d'un tableau
+
+La méthode {{jsxref("Array.prototype.reduce()")}} peut être utilisée pour déterminer la valeur maximale d'un tableau de nombre en comparant les valeurs qui se suivent :
+
+```js
+var arr = [1, 2, 3];
+var max = arr.reduce(function(a,b) {
+  return Math.max(a, b);
+});
+```
+
+On peut également utiliser {{jsxref("Function.prototype.apply()")}} afin de trouver le maximum parmi un tableau de nombres. `getMaxTableau([1,2,3])` sera équivalent à `Math.max(1, 2, 3)`, mais `getMaxTableau` pourra être utilisé sur des tableaux de n'importe quelle taille.
+
+```js
+function getMaxTableau(tableauNumérique) {
+    return Math.max.apply(null, tableauNumérique);
+}
+```
+
+Avec le nouvel {{jsxref("Opérateurs/Affecter_par_décomposition","opérateur de décomposition","","1")}}, on pourra également utiliser cette syntaxe, plus concise et plus simple :
+
+```js
+var arr = [1, 2, 3];
+var max = Math.max(...arr);
+```
+
+Attention avec la décomposition et `apply()` qui pourront échouer s'il y a trop d'éléments dans le tableau (car ceux-ci seront passés en arguments). Pour plus d'informations, consulter [Utiliser apply() et les fonctions natives](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Function/apply#Utiliser_apply_et_des_fonctions_natives). La méthode proposée avec `reduce()` n'a pas cette contrainte.
+
+## Spécifications
+
+| Spécification                                                        | État                         | Commentaires                                          |
+| -------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- |
+| {{SpecName('ES1')}}                                             | {{Spec2('ES1')}}         | Définition initiale. Implémentée avec JavaScript 1.0. |
+| {{SpecName('ES5.1', '#sec-15.8.2.11', 'Math.max')}} | {{Spec2('ES5.1')}}     |                                                       |
+| {{SpecName('ES6', '#sec-math.max', 'Math.max')}}     | {{Spec2('ES6')}}         |                                                       |
+| {{SpecName('ESDraft', '#sec-math.max', 'Math.max')}} | {{Spec2('ESDraft')}} |                                                       |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Math.max")}}
+
+## Voir aussi
+
+- {{jsxref("Math.min()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/math/min/index.html b/files/fr/web/javascript/reference/global_objects/math/min/index.html
deleted file mode 100644
index 39cd2d8567..0000000000
--- a/files/fr/web/javascript/reference/global_objects/math/min/index.html
+++ /dev/null
@@ -1,108 +0,0 @@
----
-title: Math.min()
-slug: Web/JavaScript/Reference/Global_Objects/Math/min
-tags:
-  - JavaScript
-  - Math
-  - Méthode
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Math/min
-original_slug: Web/JavaScript/Reference/Objets_globaux/Math/min
----
-<div>{{JSRef}}</div>
-
-<p>La fonction <code><strong>Math.min()</strong></code> renvoie le plus petit nombre d'une série de 0 ou plusieurs nombres ou bien {{jsxref("NaN")}} si au moins un des arguments fourni n'est pas un nombre ou ne peut pas être converti en nombre.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/math-min.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">Math.min([<var>valeur1</var>[,<var>valeur2</var>, ...]]) </pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>valeur1, valeur2, ...</code></dt>
- <dd>Des nombres.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Le plus petit des nombres passés en arguments. S'il existe un argument qui ne peut pas être converti en nombre, c'est {{jsxref("NaN")}} qui sera renvoyé. Le résultat sera {{jsxref("Infinity")}} si aucun paramètre n'est fourni.</p>
-
-<h2 id="Description">Description</h2>
-
-<p><code>min()</code> est une méthode statique de <code>Math</code>, elle doit toujours être utilisée avec la syntaxe <code>Math.min()</code> et ne doit pas être utilisée comme la méthode d'un objet qui aurait été créé (<code>Math</code> n'est pas un constructeur).</p>
-
-<p>Si aucun argument n'est fourni, le résultat renvoyé par la fonction sera {{jsxref("Infinity")}}.</p>
-
-<p>Si au moins un des arguments ne peut pas être converti en un nombre, le résultat sera {{jsxref("NaN")}}.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Utiliser_Math.min()">Utiliser <code>Math.min()</code></h3>
-
-<p>Dans cet exemple, on trouve le minimum de x et y et on affecte cette valeur à z :</p>
-
-<pre class="brush:js">var x = 10, y = -20;
-var z = Math.min(x, y);
-</pre>
-
-<h3 id="Ramener_une_valeur_dans_un_intervalle_(clipping)_avec_Math.min()">Ramener une valeur dans un intervalle (<em>clipping</em>) avec <code>Math.min()</code></h3>
-
-<p><code>Math.min()</code> est souvent utilisée afin de ramener une certaine valeur dans un intervalle donné. Par exemple :</p>
-
-<pre class="brush:js">var x = f(toto);
-
-if (x &gt; limite) {
-  x = limite;
-}
-</pre>
-
-<p>peut s'écrire</p>
-
-<pre class="brush:js">var x = Math.min(f(toto), limite);</pre>
-
-<div>{{jsxref("Math.max()")}} peut être utilisée de façon semblable pour ramener une valeur vers un minimum d'un intervalle donné.</div>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES1')}}</td>
-   <td>{{Spec2('ES1')}}</td>
-   <td>Définition initiale. Implémentée avec JavaScript 1.0.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-15.8.2.12', 'Math.min')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-math.min', 'Math.min')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-math.min', 'Math.min')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Math.min")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Math.max()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/math/min/index.md b/files/fr/web/javascript/reference/global_objects/math/min/index.md
new file mode 100644
index 0000000000..0fa9c67c58
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/math/min/index.md
@@ -0,0 +1,85 @@
+---
+title: Math.min()
+slug: Web/JavaScript/Reference/Global_Objects/Math/min
+tags:
+  - JavaScript
+  - Math
+  - Méthode
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/min
+original_slug: Web/JavaScript/Reference/Objets_globaux/Math/min
+---
+{{JSRef}}
+
+La fonction **`Math.min()`** renvoie le plus petit nombre d'une série de 0 ou plusieurs nombres ou bien {{jsxref("NaN")}} si au moins un des arguments fourni n'est pas un nombre ou ne peut pas être converti en nombre.
+
+{{EmbedInteractiveExample("pages/js/math-min.html")}}
+
+## Syntaxe
+
+    Math.min([valeur1[,valeur2, ...]])
+
+### Paramètres
+
+- `valeur1, valeur2, ...`
+  - : Des nombres.
+
+### Valeur de retour
+
+Le plus petit des nombres passés en arguments. S'il existe un argument qui ne peut pas être converti en nombre, c'est {{jsxref("NaN")}} qui sera renvoyé. Le résultat sera {{jsxref("Infinity")}} si aucun paramètre n'est fourni.
+
+## Description
+
+`min()` est une méthode statique de `Math`, elle doit toujours être utilisée avec la syntaxe `Math.min()` et ne doit pas être utilisée comme la méthode d'un objet qui aurait été créé (`Math` n'est pas un constructeur).
+
+Si aucun argument n'est fourni, le résultat renvoyé par la fonction sera {{jsxref("Infinity")}}.
+
+Si au moins un des arguments ne peut pas être converti en un nombre, le résultat sera {{jsxref("NaN")}}.
+
+## Exemples
+
+### Utiliser `Math.min()`
+
+Dans cet exemple, on trouve le minimum de x et y et on affecte cette valeur à z :
+
+```js
+var x = 10, y = -20;
+var z = Math.min(x, y);
+```
+
+### Ramener une valeur dans un intervalle (_clipping_) avec `Math.min()`
+
+`Math.min()` est souvent utilisée afin de ramener une certaine valeur dans un intervalle donné. Par exemple :
+
+```js
+var x = f(toto);
+
+if (x > limite) {
+  x = limite;
+}
+```
+
+peut s'écrire
+
+```js
+var x = Math.min(f(toto), limite);
+```
+
+{{jsxref("Math.max()")}} peut être utilisée de façon semblable pour ramener une valeur vers un minimum d'un intervalle donné.
+
+## Spécifications
+
+| Spécification                                                        | Statut                       | Commentaires                                          |
+| -------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- |
+| {{SpecName('ES1')}}                                             | {{Spec2('ES1')}}         | Définition initiale. Implémentée avec JavaScript 1.0. |
+| {{SpecName('ES5.1', '#sec-15.8.2.12', 'Math.min')}} | {{Spec2('ES5.1')}}     |                                                       |
+| {{SpecName('ES6', '#sec-math.min', 'Math.min')}}     | {{Spec2('ES6')}}         |                                                       |
+| {{SpecName('ESDraft', '#sec-math.min', 'Math.min')}} | {{Spec2('ESDraft')}} |                                                       |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Math.min")}}
+
+## Voir aussi
+
+- {{jsxref("Math.max()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/math/pi/index.html b/files/fr/web/javascript/reference/global_objects/math/pi/index.html
deleted file mode 100644
index d9aa0848db..0000000000
--- a/files/fr/web/javascript/reference/global_objects/math/pi/index.html
+++ /dev/null
@@ -1,80 +0,0 @@
----
-title: Math.PI
-slug: Web/JavaScript/Reference/Global_Objects/Math/PI
-tags:
-  - JavaScript
-  - Math
-  - Propriété
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Math/PI
-original_slug: Web/JavaScript/Reference/Objets_globaux/Math/PI
----
-<div>{{JSRef}}</div>
-
-<p>La propriété <code><strong>Math.PI</strong></code> représente le ratio entre le périmètre d'un cercle et son diamètre. Elle vaut environ 3.14159:</p>
-
-<p><math display="block"><semantics><mrow><mstyle mathvariant="monospace"><mi>Math.PI</mi></mstyle><mo>=</mo><mi>π</mi><mo>≈</mo><mn>3.14159</mn></mrow><annotation encoding="TeX">\mathtt{\mi{Math.PI}} = \pi \approx 3.14159</annotation></semantics></math></p>
-
-<div>{{EmbedInteractiveExample("pages/js/math-pi.html")}}</div>
-
-
-
-<div>{{js_property_attributes(0,0,0)}}</div>
-
-<h2 id="Description">Description</h2>
-
-<p><code>PI</code> est une propriété statique de l'objet <code>Math</code> et doit toujours être utilisée avec la syntaxe <code>Math.PI</code> plutôt que d'être appelée comme la propriété d'un autre objet qui aurait été crée (<code>Math</code> n'est pas un constructeur).</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Utiliser_Math.PI">Utiliser <code>Math.PI</code></h3>
-
-<p>La fonction suivante utilise <code>Math.PI</code> afin de calculer le périmètre d'un cercle à partir du rayon passé en argument.</p>
-
-<pre class="brush:js">function calculPérimètre(rayon) {
-  return 2 * Math.PI * rayon;
-}
-
-calculPérimètre(1);  // 6.283185307179586</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES1')}}</td>
-   <td>{{Spec2('ES1')}}</td>
-   <td>Définition initiale. Implémentée avec JavaScript 1.0.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-15.8.1.6', 'Math.PI')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-math.pi', 'Math.PI')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-math.pi', 'Math.PI')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Math.PI")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Math")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/math/pi/index.md b/files/fr/web/javascript/reference/global_objects/math/pi/index.md
new file mode 100644
index 0000000000..d8f6d65a4a
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/math/pi/index.md
@@ -0,0 +1,53 @@
+---
+title: Math.PI
+slug: Web/JavaScript/Reference/Global_Objects/Math/PI
+tags:
+  - JavaScript
+  - Math
+  - Propriété
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/PI
+original_slug: Web/JavaScript/Reference/Objets_globaux/Math/PI
+---
+{{JSRef}}
+
+La propriété **`Math.PI`** représente le ratio entre le périmètre d'un cercle et son diamètre. Elle vaut environ 3.14159:
+
+<math display="block"><semantics><mrow><mstyle mathvariant="monospace"><mi>Math.PI</mi></mstyle><mo>=</mo><mi>π</mi><mo>≈</mo><mn>3.14159</mn></mrow><annotation encoding="TeX">\mathtt{\mi{Math.PI}} = \pi \approx 3.14159</annotation></semantics></math>
+
+{{EmbedInteractiveExample("pages/js/math-pi.html")}}{{js_property_attributes(0,0,0)}}
+
+## Description
+
+`PI` est une propriété statique de l'objet `Math` et doit toujours être utilisée avec la syntaxe `Math.PI` plutôt que d'être appelée comme la propriété d'un autre objet qui aurait été crée (`Math` n'est pas un constructeur).
+
+## Exemples
+
+### Utiliser `Math.PI`
+
+La fonction suivante utilise `Math.PI` afin de calculer le périmètre d'un cercle à partir du rayon passé en argument.
+
+```js
+function calculPérimètre(rayon) {
+  return 2 * Math.PI * rayon;
+}
+
+calculPérimètre(1);  // 6.283185307179586
+```
+
+## Spécifications
+
+| Spécification                                                        | Statut                       | Commentaires                                          |
+| -------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- |
+| {{SpecName('ES1')}}                                             | {{Spec2('ES1')}}         | Définition initiale. Implémentée avec JavaScript 1.0. |
+| {{SpecName('ES5.1', '#sec-15.8.1.6', 'Math.PI')}}     | {{Spec2('ES5.1')}}     |                                                       |
+| {{SpecName('ES6', '#sec-math.pi', 'Math.PI')}}         | {{Spec2('ES6')}}         |                                                       |
+| {{SpecName('ESDraft', '#sec-math.pi', 'Math.PI')}} | {{Spec2('ESDraft')}} |                                                       |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Math.PI")}}
+
+## Voir aussi
+
+- {{jsxref("Math")}}
diff --git a/files/fr/web/javascript/reference/global_objects/math/pow/index.html b/files/fr/web/javascript/reference/global_objects/math/pow/index.html
deleted file mode 100644
index b12f348e80..0000000000
--- a/files/fr/web/javascript/reference/global_objects/math/pow/index.html
+++ /dev/null
@@ -1,103 +0,0 @@
----
-title: Math.pow()
-slug: Web/JavaScript/Reference/Global_Objects/Math/pow
-tags:
-  - JavaScript
-  - Math
-  - Méthode
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Math/pow
-original_slug: Web/JavaScript/Reference/Objets_globaux/Math/pow
----
-<div>{{JSRef}}</div>
-
-<p>La fonction <code><strong>Math.pow()</strong></code> renvoie un nombre à une certaine puissance, c'est-à-dire <code>base^exposant</code>.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/math-pow.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">Math.pow(<var>base</var>, <var>exposant</var>);</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>base</code></dt>
- <dd>Le nombre correspondant à la base.</dd>
- <dt><code>exponent</code></dt>
- <dd>L'exposant auquel on élève le paramètre précédent.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Un nombre qui représente un nombre (premier argument) élevé à une puissance donné (second argument).</p>
-
-<h2 id="Description">Description</h2>
-
-<p><code>pow()</code> est une méthode statique de <code>Math</code> et doit toujours être utilisée avec la syntaxe <code>Math.pow()</code>, elle ne doit pas être utilisée comme une méthode d'un autre objet qui aurait été créé (<code>Math</code> n'est pas un constructeur).</p>
-
-<h2 id="Exemple">Exemple</h2>
-
-<h3 id="Utiliser_Math.pow()">Utiliser <code>Math.pow()</code></h3>
-
-<pre class="brush:js">// Utilisation simple
-Math.pow(7, 2); // 49
-
-// Exposants négatifs
-Math.pow(7, -2); // 0.02040816326530612 (1/49)
-
-// Exposants fractionnaires
-Math.pow(2, 1/2); // 1.4142135623730951 (racine carrée de 2)
-
-// Cas aux limites
-Math.pow(-7, 0.5); // NaN
-// (les nombres négatifs n'ont pas de racine carrée)
-Math.pow(-7, 1/3); // NaN
-// Nombre négatif avec une base décimale
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES1')}}</td>
-   <td>{{Spec2('ES1')}}</td>
-   <td>Définition initiale. Implémentée avec JavaScript 1.0.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-15.8.2.13', 'Math.pow')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-math.pow', 'Math.pow')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-math.pow', 'Math.pow')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Math.pow")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Math.cbrt()")}}</li>
- <li>{{jsxref("Math.exp()")}}</li>
- <li>{{jsxref("Math.log()")}}</li>
- <li>{{jsxref("Math.sqrt()")}}</li>
- <li><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_arithmétiques#Exponentiation_(**)">Opérateur d'exponentiation</a> {{experimental_inline}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/math/pow/index.md b/files/fr/web/javascript/reference/global_objects/math/pow/index.md
new file mode 100644
index 0000000000..e85580ec3d
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/math/pow/index.md
@@ -0,0 +1,77 @@
+---
+title: Math.pow()
+slug: Web/JavaScript/Reference/Global_Objects/Math/pow
+tags:
+  - JavaScript
+  - Math
+  - Méthode
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/pow
+original_slug: Web/JavaScript/Reference/Objets_globaux/Math/pow
+---
+{{JSRef}}
+
+La fonction **`Math.pow()`** renvoie un nombre à une certaine puissance, c'est-à-dire `base^exposant`.
+
+{{EmbedInteractiveExample("pages/js/math-pow.html")}}
+
+## Syntaxe
+
+    Math.pow(base, exposant);
+
+### Paramètres
+
+- `base`
+  - : Le nombre correspondant à la base.
+- `exponent`
+  - : L'exposant auquel on élève le paramètre précédent.
+
+### Valeur de retour
+
+Un nombre qui représente un nombre (premier argument) élevé à une puissance donné (second argument).
+
+## Description
+
+`pow()` est une méthode statique de `Math` et doit toujours être utilisée avec la syntaxe `Math.pow()`, elle ne doit pas être utilisée comme une méthode d'un autre objet qui aurait été créé (`Math` n'est pas un constructeur).
+
+## Exemple
+
+### Utiliser `Math.pow()`
+
+```js
+// Utilisation simple
+Math.pow(7, 2); // 49
+
+// Exposants négatifs
+Math.pow(7, -2); // 0.02040816326530612 (1/49)
+
+// Exposants fractionnaires
+Math.pow(2, 1/2); // 1.4142135623730951 (racine carrée de 2)
+
+// Cas aux limites
+Math.pow(-7, 0.5); // NaN
+// (les nombres négatifs n'ont pas de racine carrée)
+Math.pow(-7, 1/3); // NaN
+// Nombre négatif avec une base décimale
+```
+
+## Spécifications
+
+| Spécification                                                        | État                         | Commentaires                                          |
+| -------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- |
+| {{SpecName('ES1')}}                                             | {{Spec2('ES1')}}         | Définition initiale. Implémentée avec JavaScript 1.0. |
+| {{SpecName('ES5.1', '#sec-15.8.2.13', 'Math.pow')}} | {{Spec2('ES5.1')}}     |                                                       |
+| {{SpecName('ES6', '#sec-math.pow', 'Math.pow')}}     | {{Spec2('ES6')}}         |                                                       |
+| {{SpecName('ESDraft', '#sec-math.pow', 'Math.pow')}} | {{Spec2('ESDraft')}} |                                                       |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Math.pow")}}
+
+## Voir aussi
+
+- {{jsxref("Math.cbrt()")}}
+- {{jsxref("Math.exp()")}}
+- {{jsxref("Math.log()")}}
+- {{jsxref("Math.sqrt()")}}
+- [Opérateur d'exponentiation](</fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_arithmétiques#Exponentiation_(**)>) {{experimental_inline}}
diff --git a/files/fr/web/javascript/reference/global_objects/math/random/index.html b/files/fr/web/javascript/reference/global_objects/math/random/index.html
deleted file mode 100644
index c5b3df93df..0000000000
--- a/files/fr/web/javascript/reference/global_objects/math/random/index.html
+++ /dev/null
@@ -1,113 +0,0 @@
----
-title: Math.random()
-slug: Web/JavaScript/Reference/Global_Objects/Math/random
-tags:
-  - JavaScript
-  - Math
-  - Méthode
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Math/random
-original_slug: Web/JavaScript/Reference/Objets_globaux/Math/random
----
-<div>{{JSRef}}</div>
-
-<p>La fonction <code><strong>Math.random()</strong></code> renvoie un nombre flottant pseudo-aléatoire compris dans l'intervalle <code>[0, 1[</code> (ce qui signifie que 0 est compris dans l'intervalle mais que 1 en est exclu) selon une distribution approximativement uniforme sur cet intervalle. Ce nombre peut ensuite être multiplié afin de couvrir un autre intervalle. La graine (<em>seed</em>) du générateur est choisie par l'algorithme et ne peut pas être choisie ou réinitialisée par l'utilisateur.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/math-random.html")}}</div>
-
-<div class="note">
-<p><strong>Note :</strong> <code>Math.random()</code> <strong>ne fournit pas</strong> de nombres aléatoires propres à une cryptographie sécurisée. Les résultats de cette méthode ne doivent pas être utilisées dans des applications liées à la sécurité. À la place, on préfèrera utiliser l'API Web Crypto et plus précisément la méthode {{domxref("RandomSource.getRandomValues()", "window.crypto.getRandomValues()")}}.</p>
-</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox notranslate">Math.random()</pre>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Un nombre flottant pseudo-aléatoire, généré entre 0 (inclus) et 1 (exclu)</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<p>En JavaScript, les nombres sont représentés comme des nombres flottants selon la norme IEEE 754 et les arrondis sont pris aux plus près. Aussi, les intervalles revendiqués par les fonctions ci-après (en dehors de <code>Math.random()</code>) ne sont pas théoriquement et précisément exacts. Si on utilise des bornes supérieures très grande (2^53 ou plus), il est alors possible, dans de très rares cas, d'obtenir la borne supérieure comme résultat alors que celle-ci devrait être exclue de l'intervalle.</p>
-
-<h3 id="Obtenir_un_nombre_aléatoire_entre_0_et_1">Obtenir un nombre aléatoire entre 0 et 1</h3>
-
-<pre class="brush: js notranslate">// On renvoie un nombre aléatoire entre 0 (inclus) et 1 (exclus)
-function getRandom() {
-  return Math.random();
-}</pre>
-
-<h3 id="Obtenir_un_nombre_aléatoire_dans_un_intervalle">Obtenir un nombre aléatoire dans un intervalle</h3>
-
-<pre class="brush: js notranslate">// On renvoie un nombre aléatoire entre une valeur min (incluse)
-// et une valeur max (exclue)
-function getRandomArbitrary(min, max) {
-  return Math.random() * (max - min) + min;
-}</pre>
-
-<h3 id="Obtenir_un_entier_aléatoire_dans_un_intervalle_ouvert_à_droite">Obtenir un entier aléatoire dans un intervalle ouvert à droite</h3>
-
-<pre class="brush: js notranslate">// On renvoie un entier aléatoire entre une valeur min (incluse)
-// et une valeur max (exclue).
-// Attention : si on utilisait Math.round(), on aurait une distribution
-// non uniforme !
-function getRandomInt(min, max) {
-  min = Math.ceil(min);
-  max = Math.floor(max);
-  return Math.floor(Math.random() * (max - min)) + min;
-}
-</pre>
-
-<div class="warning">
-<p><strong>Attention :</strong> Utiliser <code>Math.round()</code> entraînerait une distribution non-uniforme et réduirait le caractère aléatoire de la méthode.</p>
-</div>
-
-<h3 id="Obtenir_un_entier_aléatoire_dans_un_intervalle_fermé">Obtenir un entier aléatoire dans un intervalle fermé</h3>
-
-<pre class="brush: js notranslate">// On renvoie un entier aléatoire entre une valeur min (incluse)
-// et une valeur max (incluse).
-// Attention : si on utilisait Math.round(), on aurait une distribution
-// non uniforme !
-function getRandomIntInclusive(min, max) {
-  min = Math.ceil(min);
-  max = Math.floor(max);
-  return Math.floor(Math.random() * (max - min +1)) + min;
-}
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES1')}}</td>
-   <td>{{Spec2('ES1')}}</td>
-   <td>Définition initiale. Implémentée avec JavaScript 1.0 (UNIX) et 1.1 (toutes plateformes).</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-15.8.2.14', 'Math.random')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-math.random', 'Math.random')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-math.random', 'Math.random')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Math.random")}}</p>
diff --git a/files/fr/web/javascript/reference/global_objects/math/random/index.md b/files/fr/web/javascript/reference/global_objects/math/random/index.md
new file mode 100644
index 0000000000..e0ae51c992
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/math/random/index.md
@@ -0,0 +1,92 @@
+---
+title: Math.random()
+slug: Web/JavaScript/Reference/Global_Objects/Math/random
+tags:
+  - JavaScript
+  - Math
+  - Méthode
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/random
+original_slug: Web/JavaScript/Reference/Objets_globaux/Math/random
+---
+{{JSRef}}
+
+La fonction **`Math.random()`** renvoie un nombre flottant pseudo-aléatoire compris dans l'intervalle `[0, 1[` (ce qui signifie que 0 est compris dans l'intervalle mais que 1 en est exclu) selon une distribution approximativement uniforme sur cet intervalle. Ce nombre peut ensuite être multiplié afin de couvrir un autre intervalle. La graine (_seed_) du générateur est choisie par l'algorithme et ne peut pas être choisie ou réinitialisée par l'utilisateur.
+
+{{EmbedInteractiveExample("pages/js/math-random.html")}}
+
+> **Note :** `Math.random()` **ne fournit pas** de nombres aléatoires propres à une cryptographie sécurisée. Les résultats de cette méthode ne doivent pas être utilisées dans des applications liées à la sécurité. À la place, on préfèrera utiliser l'API Web Crypto et plus précisément la méthode {{domxref("RandomSource.getRandomValues()", "window.crypto.getRandomValues()")}}.
+
+## Syntaxe
+
+    Math.random()
+
+### Valeur de retour
+
+Un nombre flottant pseudo-aléatoire, généré entre 0 (inclus) et 1 (exclu)
+
+## Exemples
+
+En JavaScript, les nombres sont représentés comme des nombres flottants selon la norme IEEE 754 et les arrondis sont pris aux plus près. Aussi, les intervalles revendiqués par les fonctions ci-après (en dehors de `Math.random()`) ne sont pas théoriquement et précisément exacts. Si on utilise des bornes supérieures très grande (2^53 ou plus), il est alors possible, dans de très rares cas, d'obtenir la borne supérieure comme résultat alors que celle-ci devrait être exclue de l'intervalle.
+
+### Obtenir un nombre aléatoire entre 0 et 1
+
+```js
+// On renvoie un nombre aléatoire entre 0 (inclus) et 1 (exclus)
+function getRandom() {
+  return Math.random();
+}
+```
+
+### Obtenir un nombre aléatoire dans un intervalle
+
+```js
+// On renvoie un nombre aléatoire entre une valeur min (incluse)
+// et une valeur max (exclue)
+function getRandomArbitrary(min, max) {
+  return Math.random() * (max - min) + min;
+}
+```
+
+### Obtenir un entier aléatoire dans un intervalle ouvert à droite
+
+```js
+// On renvoie un entier aléatoire entre une valeur min (incluse)
+// et une valeur max (exclue).
+// Attention : si on utilisait Math.round(), on aurait une distribution
+// non uniforme !
+function getRandomInt(min, max) {
+  min = Math.ceil(min);
+  max = Math.floor(max);
+  return Math.floor(Math.random() * (max - min)) + min;
+}
+```
+
+> **Attention :** Utiliser `Math.round()` entraînerait une distribution non-uniforme et réduirait le caractère aléatoire de la méthode.
+
+### Obtenir un entier aléatoire dans un intervalle fermé
+
+```js
+// On renvoie un entier aléatoire entre une valeur min (incluse)
+// et une valeur max (incluse).
+// Attention : si on utilisait Math.round(), on aurait une distribution
+// non uniforme !
+function getRandomIntInclusive(min, max) {
+  min = Math.ceil(min);
+  max = Math.floor(max);
+  return Math.floor(Math.random() * (max - min +1)) + min;
+}
+```
+
+## Spécifications
+
+| Spécification                                                                | État                         | Commentaires                                                                             |
+| ---------------------------------------------------------------------------- | ---------------------------- | ---------------------------------------------------------------------------------------- |
+| {{SpecName('ES1')}}                                                     | {{Spec2('ES1')}}         | Définition initiale. Implémentée avec JavaScript 1.0 (UNIX) et 1.1 (toutes plateformes). |
+| {{SpecName('ES5.1', '#sec-15.8.2.14', 'Math.random')}}     | {{Spec2('ES5.1')}}     |                                                                                          |
+| {{SpecName('ES6', '#sec-math.random', 'Math.random')}}     | {{Spec2('ES6')}}         |                                                                                          |
+| {{SpecName('ESDraft', '#sec-math.random', 'Math.random')}} | {{Spec2('ESDraft')}} |                                                                                          |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Math.random")}}
diff --git a/files/fr/web/javascript/reference/global_objects/math/round/index.html b/files/fr/web/javascript/reference/global_objects/math/round/index.html
deleted file mode 100644
index fb671af237..0000000000
--- a/files/fr/web/javascript/reference/global_objects/math/round/index.html
+++ /dev/null
@@ -1,94 +0,0 @@
----
-title: Math.round()
-slug: Web/JavaScript/Reference/Global_Objects/Math/round
-tags:
-  - JavaScript
-  - Math
-  - Méthode
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Math/round
-original_slug: Web/JavaScript/Reference/Objets_globaux/Math/round
----
-<div>{{JSRef}}</div>
-
-<p>La fonction <strong><code>Math.round()</code></strong> retourne la valeur d'un nombre arrondi à l'entier le plus proche.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/math-round.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">Math.round(<var>x</var>)</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>x</code></dt>
- <dd>Un nombre.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>La valeur de l'entier le plus proche du nombre passé en argument.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>Si la partie décimale du nombre est plus grande que 0.5, l'argument est arrondi à l'entier le plus proche dont la valeur absolue est plus grande. Si elle est plus petite que 0.5, l'argument est arrondi à l'entier le plus proche dont la valeur absolue est plus petite. Si la partie décimale du nombre vaut exactement 0.5, l'argument est arrondi à l'entier le plus proche en direction de l'infini positif (attention, pour la plupart des langages de programmation, c'est le nombre avec la plus grande valeur absolue qui est renvoyé ; on a donc une différence de comportement pour les nombres négatifs dont la partie décimale vaut exactement 0.5).</p>
-
-<p><code>round()</code> étant une méthode statique de <code>Math</code>, elle doit toujours être utilisée avec la syntaxe <code>Math.round()</code>, elle ne doit pas être utilisée comme une méthode d'un objet qui aurait été créé (<code>Math</code> n'est pas un constructeur).</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<pre class="brush: js">Math.round(20.49); //  20
-Math.round(20.5);  //  21
-Math.round(42);    //  42
-Math.round(-20.5); // -20
-Math.round(-20.51);// -21
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES1')}}</td>
-   <td>{{Spec2('ES1')}}</td>
-   <td>Définition initiale. Implémentée avec JavaScript 1.0.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-15.8.2.15', 'Math.round')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-math.round', 'Math.round')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-math.round', 'Math.round')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Math.round")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Number.toPrecision()")}}</li>
- <li>{{jsxref("Number.toFixed()")}}</li>
- <li>{{jsxref("Math.abs()")}}</li>
- <li>{{jsxref("Math.ceil()")}}</li>
- <li>{{jsxref("Math.floor()")}}</li>
- <li>{{jsxref("Math.sign()")}}</li>
- <li>{{jsxref("Math.trunc()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/math/round/index.md b/files/fr/web/javascript/reference/global_objects/math/round/index.md
new file mode 100644
index 0000000000..f43dc4f6c5
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/math/round/index.md
@@ -0,0 +1,68 @@
+---
+title: Math.round()
+slug: Web/JavaScript/Reference/Global_Objects/Math/round
+tags:
+  - JavaScript
+  - Math
+  - Méthode
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/round
+original_slug: Web/JavaScript/Reference/Objets_globaux/Math/round
+---
+{{JSRef}}
+
+La fonction **`Math.round()`** retourne la valeur d'un nombre arrondi à l'entier le plus proche.
+
+{{EmbedInteractiveExample("pages/js/math-round.html")}}
+
+## Syntaxe
+
+    Math.round(x)
+
+### Paramètres
+
+- `x`
+  - : Un nombre.
+
+### Valeur de retour
+
+La valeur de l'entier le plus proche du nombre passé en argument.
+
+## Description
+
+Si la partie décimale du nombre est plus grande que 0.5, l'argument est arrondi à l'entier le plus proche dont la valeur absolue est plus grande. Si elle est plus petite que 0.5, l'argument est arrondi à l'entier le plus proche dont la valeur absolue est plus petite. Si la partie décimale du nombre vaut exactement 0.5, l'argument est arrondi à l'entier le plus proche en direction de l'infini positif (attention, pour la plupart des langages de programmation, c'est le nombre avec la plus grande valeur absolue qui est renvoyé ; on a donc une différence de comportement pour les nombres négatifs dont la partie décimale vaut exactement 0.5).
+
+`round()` étant une méthode statique de `Math`, elle doit toujours être utilisée avec la syntaxe `Math.round()`, elle ne doit pas être utilisée comme une méthode d'un objet qui aurait été créé (`Math` n'est pas un constructeur).
+
+## Exemples
+
+```js
+Math.round(20.49); //  20
+Math.round(20.5);  //  21
+Math.round(42);    //  42
+Math.round(-20.5); // -20
+Math.round(-20.51);// -21
+```
+
+## Spécifications
+
+| Spécification                                                                | État                         | Commentaires                                          |
+| ---------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- |
+| {{SpecName('ES1')}}                                                     | {{Spec2('ES1')}}         | Définition initiale. Implémentée avec JavaScript 1.0. |
+| {{SpecName('ES5.1', '#sec-15.8.2.15', 'Math.round')}}     | {{Spec2('ES5.1')}}     |                                                       |
+| {{SpecName('ES6', '#sec-math.round', 'Math.round')}}         | {{Spec2('ES6')}}         |                                                       |
+| {{SpecName('ESDraft', '#sec-math.round', 'Math.round')}} | {{Spec2('ESDraft')}} |                                                       |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Math.round")}}
+
+## Voir aussi
+
+- {{jsxref("Number.toPrecision()")}}
+- {{jsxref("Number.toFixed()")}}
+- {{jsxref("Math.abs()")}}
+- {{jsxref("Math.ceil()")}}
+- {{jsxref("Math.floor()")}}
+- {{jsxref("Math.sign()")}}
+- {{jsxref("Math.trunc()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/math/sign/index.html b/files/fr/web/javascript/reference/global_objects/math/sign/index.html
deleted file mode 100644
index c27e808527..0000000000
--- a/files/fr/web/javascript/reference/global_objects/math/sign/index.html
+++ /dev/null
@@ -1,89 +0,0 @@
----
-title: Math.sign()
-slug: Web/JavaScript/Reference/Global_Objects/Math/sign
-tags:
-  - ECMAScript 2015
-  - JavaScript
-  - Math
-  - Méthode
-  - Reference
-  - polyfill
-translation_of: Web/JavaScript/Reference/Global_Objects/Math/sign
-original_slug: Web/JavaScript/Reference/Objets_globaux/Math/sign
----
-<div>{{JSRef}}</div>
-
-<p>La fonction <code><strong>Math.sign()</strong></code> renvoie le signe d'un nombre et permet de savoir si un nombre est positif, négatif ou nul.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/math-sign.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">Math.sign(<var>x</var>)</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>x</code></dt>
- <dd>Un nombre.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Un nombre qui représente le signe de l'argument. Si l'argument est un nombre positif, négatif, un zéro positif ou un zéro négatif, la fonction renverra respectivement <code>1</code>, <code>-1</code>, <code>0</code>, <code>-0</code>. Sinon, ce sera {{jsxref("NaN")}} qui sera renvoyé.</p>
-
-<h2 id="Description">Description</h2>
-
-<p><code>sign()</code> étant une méthode statique de <code>Math</code>, il faut utiliser <code>Math.<code>sign</code>()</code> et non pas la méthode d'un autre objet qui aurait été créé (<code>Math </code>n'est pas un constructeur).</p>
-
-<p>Cette fonction peut renvoyer 5 valeurs : <code>1, -1, 0, -0, NaN,</code> qui indiquent respectivement que <code>x</code> est un nombre positif, un nombre négatif, zéro, la limite négative de zéro, et n'est pas un nombre pour {{jsxref("NaN")}}.</p>
-
-<p>L'argument passé à cette fonction sera implicitement converti au type <code>number</code>.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<pre class="brush:js">Math.sign(3)     //  1
-Math.sign(-3)    // -1
-Math.sign("-3")  // -1
-Math.sign(0)     //  0
-Math.sign(-0)    // -0
-Math.sign(NaN)   // NaN
-Math.sign("foo") // NaN
-Math.sign()      // NaN
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-math.sign', 'Math.sign')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-math.sign', 'Math.sign')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Math.sign")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Math.abs()")}}</li>
- <li>{{jsxref("Math.ceil()")}}</li>
- <li>{{jsxref("Math.floor()")}}</li>
- <li>{{jsxref("Math.round()")}}</li>
- <li>{{jsxref("Math.trunc()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/math/sign/index.md b/files/fr/web/javascript/reference/global_objects/math/sign/index.md
new file mode 100644
index 0000000000..44a438171e
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/math/sign/index.md
@@ -0,0 +1,71 @@
+---
+title: Math.sign()
+slug: Web/JavaScript/Reference/Global_Objects/Math/sign
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Math
+  - Méthode
+  - Reference
+  - polyfill
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/sign
+original_slug: Web/JavaScript/Reference/Objets_globaux/Math/sign
+---
+{{JSRef}}
+
+La fonction **`Math.sign()`** renvoie le signe d'un nombre et permet de savoir si un nombre est positif, négatif ou nul.
+
+{{EmbedInteractiveExample("pages/js/math-sign.html")}}
+
+## Syntaxe
+
+    Math.sign(x)
+
+### Paramètres
+
+- `x`
+  - : Un nombre.
+
+### Valeur de retour
+
+Un nombre qui représente le signe de l'argument. Si l'argument est un nombre positif, négatif, un zéro positif ou un zéro négatif, la fonction renverra respectivement `1`, `-1`, `0`, `-0`. Sinon, ce sera {{jsxref("NaN")}} qui sera renvoyé.
+
+## Description
+
+`sign()` étant une méthode statique de `Math`, il faut utiliser `Math.sign()` et non pas la méthode d'un autre objet qui aurait été créé (`Math `n'est pas un constructeur).
+
+Cette fonction peut renvoyer 5 valeurs : `1, -1, 0, -0, NaN,` qui indiquent respectivement que `x` est un nombre positif, un nombre négatif, zéro, la limite négative de zéro, et n'est pas un nombre pour {{jsxref("NaN")}}.
+
+L'argument passé à cette fonction sera implicitement converti au type `number`.
+
+## Exemples
+
+```js
+Math.sign(3)     //  1
+Math.sign(-3)    // -1
+Math.sign("-3")  // -1
+Math.sign(0)     //  0
+Math.sign(-0)    // -0
+Math.sign(NaN)   // NaN
+Math.sign("foo") // NaN
+Math.sign()      // NaN
+```
+
+## Spécifications
+
+| Spécification                                                            | État                         | Commentaires         |
+| ------------------------------------------------------------------------ | ---------------------------- | -------------------- |
+| {{SpecName('ES6', '#sec-math.sign', 'Math.sign')}}     | {{Spec2('ES6')}}         | Définition initiale. |
+| {{SpecName('ESDraft', '#sec-math.sign', 'Math.sign')}} | {{Spec2('ESDraft')}} |                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Math.sign")}}
+
+## Voir aussi
+
+- {{jsxref("Math.abs()")}}
+- {{jsxref("Math.ceil()")}}
+- {{jsxref("Math.floor()")}}
+- {{jsxref("Math.round()")}}
+- {{jsxref("Math.trunc()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/math/sin/index.html b/files/fr/web/javascript/reference/global_objects/math/sin/index.html
deleted file mode 100644
index 3f3ea2afe8..0000000000
--- a/files/fr/web/javascript/reference/global_objects/math/sin/index.html
+++ /dev/null
@@ -1,91 +0,0 @@
----
-title: Math.sin()
-slug: Web/JavaScript/Reference/Global_Objects/Math/sin
-tags:
-  - JavaScript
-  - Math
-  - Méthode
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Math/sin
-original_slug: Web/JavaScript/Reference/Objets_globaux/Math/sin
----
-<div>{{JSRef}}</div>
-
-<p>La fonction <code><strong>Math.sin()</strong></code> renvoie le sinus d'un nombre.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/math-sin.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">Math.sin(<var>x</var>)</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>x</code></dt>
- <dd>Un nombre (qui exprime un angle en radians).</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Le sinus de la valeur passée en argument (qui correspond à un angle en radians).</p>
-
-<h2 id="Description">Description</h2>
-
-<p>La méthode <code>sin()</code> renvoie une valeur numérique comprise (au sens large) entre 1 et -1 et qui représente le sinus d'un angle donné en radians.</p>
-
-<p><code>sin()</code> est une méthode statique de <code>Math</code>, elle doit être utilisée avec la syntaxe <code>Math.sin()</code>, elle ne doit pas être utilisée comme une méthode d'un objet qui aurait été créé (<code>Math</code> n'est pas un constructeur).</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<pre class="brush:js">Math.sin(0);           // 0
-Math.sin(1);           // 0.8414709848078965
-
-Math.sin(Math.PI / 2); // 1</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES1')}}</td>
-   <td>{{Spec2('ES1')}}</td>
-   <td>Définition initiale. Implémentée avec JavaScript 1.0.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-15.8.2.16', 'Math.sin')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-math.sin', 'Math.sin')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-math.sin', 'Math.sin')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Math.sin")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Math.acos()")}}</li>
- <li>{{jsxref("Math.asin()")}}</li>
- <li>{{jsxref("Math.atan()")}}</li>
- <li>{{jsxref("Math.atan2()")}}</li>
- <li>{{jsxref("Math.cos()")}}</li>
- <li>{{jsxref("Math.tan()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/math/sin/index.md b/files/fr/web/javascript/reference/global_objects/math/sin/index.md
new file mode 100644
index 0000000000..35bb474eef
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/math/sin/index.md
@@ -0,0 +1,66 @@
+---
+title: Math.sin()
+slug: Web/JavaScript/Reference/Global_Objects/Math/sin
+tags:
+  - JavaScript
+  - Math
+  - Méthode
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/sin
+original_slug: Web/JavaScript/Reference/Objets_globaux/Math/sin
+---
+{{JSRef}}
+
+La fonction **`Math.sin()`** renvoie le sinus d'un nombre.
+
+{{EmbedInteractiveExample("pages/js/math-sin.html")}}
+
+## Syntaxe
+
+    Math.sin(x)
+
+### Paramètres
+
+- `x`
+  - : Un nombre (qui exprime un angle en radians).
+
+### Valeur de retour
+
+Le sinus de la valeur passée en argument (qui correspond à un angle en radians).
+
+## Description
+
+La méthode `sin()` renvoie une valeur numérique comprise (au sens large) entre 1 et -1 et qui représente le sinus d'un angle donné en radians.
+
+`sin()` est une méthode statique de `Math`, elle doit être utilisée avec la syntaxe `Math.sin()`, elle ne doit pas être utilisée comme une méthode d'un objet qui aurait été créé (`Math` n'est pas un constructeur).
+
+## Exemples
+
+```js
+Math.sin(0);           // 0
+Math.sin(1);           // 0.8414709848078965
+
+Math.sin(Math.PI / 2); // 1
+```
+
+## Spécifications
+
+| Spécification                                                        | Statut                       | Commentaires                                          |
+| -------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- |
+| {{SpecName('ES1')}}                                             | {{Spec2('ES1')}}         | Définition initiale. Implémentée avec JavaScript 1.0. |
+| {{SpecName('ES5.1', '#sec-15.8.2.16', 'Math.sin')}} | {{Spec2('ES5.1')}}     |                                                       |
+| {{SpecName('ES6', '#sec-math.sin', 'Math.sin')}}     | {{Spec2('ES6')}}         |                                                       |
+| {{SpecName('ESDraft', '#sec-math.sin', 'Math.sin')}} | {{Spec2('ESDraft')}} |                                                       |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Math.sin")}}
+
+## Voir aussi
+
+- {{jsxref("Math.acos()")}}
+- {{jsxref("Math.asin()")}}
+- {{jsxref("Math.atan()")}}
+- {{jsxref("Math.atan2()")}}
+- {{jsxref("Math.cos()")}}
+- {{jsxref("Math.tan()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/math/sinh/index.html b/files/fr/web/javascript/reference/global_objects/math/sinh/index.html
deleted file mode 100644
index 4edf3a2ad5..0000000000
--- a/files/fr/web/javascript/reference/global_objects/math/sinh/index.html
+++ /dev/null
@@ -1,95 +0,0 @@
----
-title: Math.sinh()
-slug: Web/JavaScript/Reference/Global_Objects/Math/sinh
-tags:
-  - ECMAScript 2015
-  - JavaScript
-  - Math
-  - Méthode
-  - Reference
-  - polyfill
-translation_of: Web/JavaScript/Reference/Global_Objects/Math/sinh
-original_slug: Web/JavaScript/Reference/Objets_globaux/Math/sinh
----
-<div>{{JSRef}}</div>
-
-<p>La fonction <code><strong>Math.sinh()</strong></code> renvoie le sinus hyperbolique d'un nombre, dont la formule, utilisant la constante {{jsxref("Math.E","e")}}, est :</p>
-
-<p><math><semantics><mrow><mstyle mathvariant="monospace"><mo lspace="0em" rspace="thinmathspace">Math.sinh(x)</mo></mstyle><mo>=</mo><mfrac><mrow><msup><mi>e</mi><mi>x</mi></msup><mo>-</mo><msup><mi>e</mi><mrow><mo>-</mo><mi>x</mi></mrow></msup></mrow><mn>2</mn></mfrac></mrow><annotation encoding="TeX">\mathtt{\operatorname{Math.sinh(x)}} = \frac{e^x - e^{-x}}{2}</annotation></semantics></math></p>
-
-<div>{{EmbedInteractiveExample("pages/js/math-sinh.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">Math.sinh(<var>x</var>)</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>x</code></dt>
- <dd>Un nombre.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Le sinus hyperbolique de la valeur passée en argument.</p>
-
-<h2 id="Description">Description</h2>
-
-<p><code>sinh()</code> est une méthode statique de <code>Math</code>, il faut utiliser la syntaxe <code>Math.<code>sinh</code>()</code>. Cette méthode ne doit pas être appelée depuis un autre objet qui aurait été créé (<code>Math </code>n'est pas un constructeur).</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<pre class="brush:js">Math.sinh(0) // 0
-Math.sinh(1) // 1.1752011936438014</pre>
-
-<h2 id="Prothèse_d'émulation_(polyfill)">Prothèse d'émulation (<em>polyfill</em>)</h2>
-
-<p>Si cette fonction n'est pas disponible, elle peut être émulée en utilisant la fonction {{jsxref("Math.exp()")}}<code> :</code></p>
-
-<pre class="brush: js">Math.sinh = Math.sinh || function(x){
-    return (Math.exp(x) - Math.exp(-x)) / 2;
-};</pre>
-
-<p>ou encore, si on n'utilise qu'une fois {{jsxref("Math.exp()")}}, avec :</p>
-
-<pre class="brush: js">Math.sinh = Math.sinh || function(x){
-    var y = Math.exp(x);
-    return (y - 1/y) / 2;
-};</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-math.sinh', 'Math.sinh')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td>Définition initiale</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-math.sinh', 'Math.sinh')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Math.sinh")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Math.acosh()")}}</li>
- <li>{{jsxref("Math.asinh()")}}</li>
- <li>{{jsxref("Math.atanh()")}}</li>
- <li>{{jsxref("Math.cosh()")}}</li>
- <li>{{jsxref("Math.tanh()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/math/sinh/index.md b/files/fr/web/javascript/reference/global_objects/math/sinh/index.md
new file mode 100644
index 0000000000..9a74084918
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/math/sinh/index.md
@@ -0,0 +1,82 @@
+---
+title: Math.sinh()
+slug: Web/JavaScript/Reference/Global_Objects/Math/sinh
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Math
+  - Méthode
+  - Reference
+  - polyfill
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/sinh
+original_slug: Web/JavaScript/Reference/Objets_globaux/Math/sinh
+---
+{{JSRef}}
+
+La fonction **`Math.sinh()`** renvoie le sinus hyperbolique d'un nombre, dont la formule, utilisant la constante {{jsxref("Math.E","e")}}, est :
+
+<math><semantics><mrow><mstyle mathvariant="monospace"><mo lspace="0em" rspace="thinmathspace">Math.sinh(x)</mo></mstyle><mo>=</mo><mfrac><mrow><msup><mi>e</mi><mi>x</mi></msup><mo>-</mo><msup><mi>e</mi><mrow><mo>-</mo><mi>x</mi></mrow></msup></mrow><mn>2</mn></mfrac></mrow><annotation encoding="TeX">\mathtt{\operatorname{Math.sinh(x)}} = \frac{e^x - e^{-x}}{2}</annotation></semantics></math>
+
+{{EmbedInteractiveExample("pages/js/math-sinh.html")}}
+
+## Syntaxe
+
+    Math.sinh(x)
+
+### Paramètres
+
+- `x`
+  - : Un nombre.
+
+### Valeur de retour
+
+Le sinus hyperbolique de la valeur passée en argument.
+
+## Description
+
+`sinh()` est une méthode statique de `Math`, il faut utiliser la syntaxe `Math.sinh()`. Cette méthode ne doit pas être appelée depuis un autre objet qui aurait été créé (`Math `n'est pas un constructeur).
+
+## Exemples
+
+```js
+Math.sinh(0) // 0
+Math.sinh(1) // 1.1752011936438014
+```
+
+## Prothèse d'émulation (_polyfill_)
+
+Si cette fonction n'est pas disponible, elle peut être émulée en utilisant la fonction {{jsxref("Math.exp()")}}` :`
+
+```js
+Math.sinh = Math.sinh || function(x){
+    return (Math.exp(x) - Math.exp(-x)) / 2;
+};
+```
+
+ou encore, si on n'utilise qu'une fois {{jsxref("Math.exp()")}}, avec :
+
+```js
+Math.sinh = Math.sinh || function(x){
+    var y = Math.exp(x);
+    return (y - 1/y) / 2;
+};
+```
+
+## Spécifications
+
+| Spécification                                                            | État                         | Commentaires        |
+| ------------------------------------------------------------------------ | ---------------------------- | ------------------- |
+| {{SpecName('ES2015', '#sec-math.sinh', 'Math.sinh')}} | {{Spec2('ES2015')}}     | Définition initiale |
+| {{SpecName('ESDraft', '#sec-math.sinh', 'Math.sinh')}} | {{Spec2('ESDraft')}} |                     |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Math.sinh")}}
+
+## Voir aussi
+
+- {{jsxref("Math.acosh()")}}
+- {{jsxref("Math.asinh()")}}
+- {{jsxref("Math.atanh()")}}
+- {{jsxref("Math.cosh()")}}
+- {{jsxref("Math.tanh()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/math/sqrt/index.html b/files/fr/web/javascript/reference/global_objects/math/sqrt/index.html
deleted file mode 100644
index 6b309e4d01..0000000000
--- a/files/fr/web/javascript/reference/global_objects/math/sqrt/index.html
+++ /dev/null
@@ -1,94 +0,0 @@
----
-title: Math.sqrt()
-slug: Web/JavaScript/Reference/Global_Objects/Math/sqrt
-tags:
-  - JavaScript
-  - Math
-  - Méthode
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Math/sqrt
-original_slug: Web/JavaScript/Reference/Objets_globaux/Math/sqrt
----
-<div>{{JSRef}}</div>
-
-<p>La fonction <code><strong>Math.sqrt()</strong></code> renvoie la racine carrée d'un nombre. Cette fonction est définie par :</p>
-
-<p><math display="block"><semantics><mrow><mo>∀</mo><mi>x</mi><mo>≥</mo><mn>0</mn><mo>,</mo><mstyle mathvariant="monospace"><mrow><mi>M</mi><mi>a</mi><mi>t</mi><mi>h</mi><mo>.</mo><mi>s</mi><mi>q</mi><mi>r</mi><mi>t</mi><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo></mrow></mstyle><mo>=</mo><msqrt><mi>x</mi></msqrt><mo>=</mo><mtext>l'unique</mtext><mspace width="thickmathspace"></mspace><mi>y</mi><mo>≥</mo><mn>0</mn><mspace width="thickmathspace"></mspace><mtext>tel que</mtext><mspace width="thickmathspace"></mspace><msup><mi>y</mi><mn>2</mn></msup><mo>=</mo><mi>x</mi></mrow><annotation encoding="TeX">\forall x \geq 0, \mathtt{Math.sqrt(x)} = \sqrt{x} = \text{the unique} \; y \geq 0 \; \text{such that} \; y^2 = x</annotation></semantics></math></p>
-
-<div>{{EmbedInteractiveExample("pages/js/math-sqrt.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">Math.sqrt(<var>x</var>)</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>x</code></dt>
- <dd>Un nombre.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>La racine carrée du nombre passé en argument. Si le nombre fourni est négatif, c'est {{jsxref("NaN")}} qui sera renvoyé.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>Si la valeur de <code>x</code> est négative, <code>sqrt</code> renverra {{jsxref("NaN")}}.</p>
-
-<p><code>sqrt()</code> est une méthode statique de <code>Math</code>, elle doit être utilisée avec la syntaxe <code>Math.sqrt()</code>, elle ne doit pas être appelée comme méthode d'un autre objet qui aurait été créé (<code>Math</code> n'est pas un constructeur).</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<pre class="brush:js">Math.sqrt(9);  // 3
-Math.sqrt(2);  // 1.414213562373095
-
-Math.sqrt(1);  // 1
-Math.sqrt(0);  // 0
-Math.sqrt(-1); // NaN
-Math.sqrt(-0); // -0</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES1')}}</td>
-   <td>{{Spec2('ES1')}}</td>
-   <td>Définition initiale. Implémentée avec JavaScript 1.0.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-15.8.2.17', 'Math.sqrt')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-math.sqrt', 'Math.sqrt')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-math.sqrt', 'Math.sqrt')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Math.sqrt")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Math.cbrt()")}}</li>
- <li>{{jsxref("Math.exp()")}}</li>
- <li>{{jsxref("Math.log()")}}</li>
- <li>{{jsxref("Math.pow()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/math/sqrt/index.md b/files/fr/web/javascript/reference/global_objects/math/sqrt/index.md
new file mode 100644
index 0000000000..8af569dd19
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/math/sqrt/index.md
@@ -0,0 +1,69 @@
+---
+title: Math.sqrt()
+slug: Web/JavaScript/Reference/Global_Objects/Math/sqrt
+tags:
+  - JavaScript
+  - Math
+  - Méthode
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/sqrt
+original_slug: Web/JavaScript/Reference/Objets_globaux/Math/sqrt
+---
+{{JSRef}}
+
+La fonction **`Math.sqrt()`** renvoie la racine carrée d'un nombre. Cette fonction est définie par :
+
+<math display="block"><semantics><mrow><mo>∀</mo><mi>x</mi><mo>≥</mo><mn>0</mn><mo>,</mo><mstyle mathvariant="monospace"><mrow><mi>M</mi><mi>a</mi><mi>t</mi><mi>h</mi><mo>.</mo><mi>s</mi><mi>q</mi><mi>r</mi><mi>t</mi><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo></mrow></mstyle><mo>=</mo><msqrt><mi>x</mi></msqrt><mo>=</mo><mtext>l'unique</mtext><mspace width="thickmathspace"></mspace><mi>y</mi><mo>≥</mo><mn>0</mn><mspace width="thickmathspace"></mspace><mtext>tel que</mtext><mspace width="thickmathspace"></mspace><msup><mi>y</mi><mn>2</mn></msup><mo>=</mo><mi>x</mi></mrow><annotation encoding="TeX">\forall x \geq 0, \mathtt{Math.sqrt(x)} = \sqrt{x} = \text{the unique} \; y \geq 0 \; \text{such that} \; y^2 = x</annotation></semantics></math>
+
+{{EmbedInteractiveExample("pages/js/math-sqrt.html")}}
+
+## Syntaxe
+
+    Math.sqrt(x)
+
+### Paramètres
+
+- `x`
+  - : Un nombre.
+
+### Valeur de retour
+
+La racine carrée du nombre passé en argument. Si le nombre fourni est négatif, c'est {{jsxref("NaN")}} qui sera renvoyé.
+
+## Description
+
+Si la valeur de `x` est négative, `sqrt` renverra {{jsxref("NaN")}}.
+
+`sqrt()` est une méthode statique de `Math`, elle doit être utilisée avec la syntaxe `Math.sqrt()`, elle ne doit pas être appelée comme méthode d'un autre objet qui aurait été créé (`Math` n'est pas un constructeur).
+
+## Exemples
+
+```js
+Math.sqrt(9);  // 3
+Math.sqrt(2);  // 1.414213562373095
+
+Math.sqrt(1);  // 1
+Math.sqrt(0);  // 0
+Math.sqrt(-1); // NaN
+Math.sqrt(-0); // -0
+```
+
+## Spécifications
+
+| Spécification                                                            | État                         | Commentaires                                          |
+| ------------------------------------------------------------------------ | ---------------------------- | ----------------------------------------------------- |
+| {{SpecName('ES1')}}                                                 | {{Spec2('ES1')}}         | Définition initiale. Implémentée avec JavaScript 1.0. |
+| {{SpecName('ES5.1', '#sec-15.8.2.17', 'Math.sqrt')}}     | {{Spec2('ES5.1')}}     |                                                       |
+| {{SpecName('ES6', '#sec-math.sqrt', 'Math.sqrt')}}     | {{Spec2('ES6')}}         |                                                       |
+| {{SpecName('ESDraft', '#sec-math.sqrt', 'Math.sqrt')}} | {{Spec2('ESDraft')}} |                                                       |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Math.sqrt")}}
+
+## Voir aussi
+
+- {{jsxref("Math.cbrt()")}}
+- {{jsxref("Math.exp()")}}
+- {{jsxref("Math.log()")}}
+- {{jsxref("Math.pow()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/math/sqrt1_2/index.html b/files/fr/web/javascript/reference/global_objects/math/sqrt1_2/index.html
deleted file mode 100644
index 7a1037786c..0000000000
--- a/files/fr/web/javascript/reference/global_objects/math/sqrt1_2/index.html
+++ /dev/null
@@ -1,79 +0,0 @@
----
-title: Math.SQRT1_2
-slug: Web/JavaScript/Reference/Global_Objects/Math/SQRT1_2
-tags:
-  - JavaScript
-  - Math
-  - Propriété
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Math/SQRT1_2
-original_slug: Web/JavaScript/Reference/Objets_globaux/Math/SQRT1_2
----
-<div>{{JSRef}}</div>
-
-<p>La propriété <code><strong>Math.SQRT1_2</strong></code> représente la racine carrée d'1/2 et vaut environ 0.707 :</p>
-
-<p><math display="block"><semantics><mrow><mstyle mathvariant="monospace"><mi>Math.SQRT1_2</mi></mstyle><mo>=</mo><msqrt><mfrac><mn>1</mn><mn>2</mn></mfrac></msqrt><mo>=</mo><mfrac><mn>1</mn><msqrt><mn>2</mn></msqrt></mfrac><mo>≈</mo><mn>0.707</mn></mrow><annotation encoding="TeX">\mathtt{\mi{Math.SQRT1_2}} = \sqrt{\frac{1}{2}} = \frac{1}{\sqrt{2}} \approx 0.707</annotation></semantics></math></p>
-
-<div>{{EmbedInteractiveExample("pages/js/math-sqrt1_2.html")}}</div>
-
-
-
-<div>{{js_property_attributes(0,0,0)}}</div>
-
-<h2 id="Description">Description</h2>
-
-<p><code>SQRT1_2</code> est une propriété statique de <code>Math</code> et doit toujours être utilisée avec la syntaxe <code>Math.SQRT1_2</code>. Elle ne doit pas être obtenue à partir d'un autre objet qui aurait été créé (<code>Math</code> n'est pas un constructeur).</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<p>La fonction suivante renvoie la valeur de cette constante :</p>
-
-<pre class="brush:js">function getRoot1_2() {
-   return Math.SQRT1_2;
-}
-
-getRoot1_2(); // 0.7071067811865476</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES1')}}</td>
-   <td>{{Spec2('ES1')}}</td>
-   <td>Définition initiale. Implémentée avec JavaScript 1.0.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-15.8.1.7', 'Math.SQRT1_2')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-math.sqrt1_2', 'Math.SQRT1_2')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-math.sqrt1_2', 'Math.SQRT1_2')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Math.SQRT1_2")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Math.pow()")}}</li>
- <li>{{jsxref("Math.sqrt()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/math/sqrt1_2/index.md b/files/fr/web/javascript/reference/global_objects/math/sqrt1_2/index.md
new file mode 100644
index 0000000000..2af49cd3ca
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/math/sqrt1_2/index.md
@@ -0,0 +1,52 @@
+---
+title: Math.SQRT1_2
+slug: Web/JavaScript/Reference/Global_Objects/Math/SQRT1_2
+tags:
+  - JavaScript
+  - Math
+  - Propriété
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/SQRT1_2
+original_slug: Web/JavaScript/Reference/Objets_globaux/Math/SQRT1_2
+---
+{{JSRef}}
+
+La propriété **`Math.SQRT1_2`** représente la racine carrée d'1/2 et vaut environ 0.707 :
+
+<math display="block"><semantics><mrow><mstyle mathvariant="monospace"><mi>Math.SQRT1_2</mi></mstyle><mo>=</mo><msqrt><mfrac><mn>1</mn><mn>2</mn></mfrac></msqrt><mo>=</mo><mfrac><mn>1</mn><msqrt><mn>2</mn></msqrt></mfrac><mo>≈</mo><mn>0.707</mn></mrow><annotation encoding="TeX">\mathtt{\mi{Math.SQRT1_2}} = \sqrt{\frac{1}{2}} = \frac{1}{\sqrt{2}} \approx 0.707</annotation></semantics></math>
+
+{{EmbedInteractiveExample("pages/js/math-sqrt1_2.html")}}{{js_property_attributes(0,0,0)}}
+
+## Description
+
+`SQRT1_2` est une propriété statique de `Math` et doit toujours être utilisée avec la syntaxe `Math.SQRT1_2`. Elle ne doit pas être obtenue à partir d'un autre objet qui aurait été créé (`Math` n'est pas un constructeur).
+
+## Exemples
+
+La fonction suivante renvoie la valeur de cette constante :
+
+```js
+function getRoot1_2() {
+   return Math.SQRT1_2;
+}
+
+getRoot1_2(); // 0.7071067811865476
+```
+
+## Spécifications
+
+| Spécification                                                                    | Statut                       | Commentaires                                          |
+| -------------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- |
+| {{SpecName('ES1')}}                                                         | {{Spec2('ES1')}}         | Définition initiale. Implémentée avec JavaScript 1.0. |
+| {{SpecName('ES5.1', '#sec-15.8.1.7', 'Math.SQRT1_2')}}         | {{Spec2('ES5.1')}}     |                                                       |
+| {{SpecName('ES6', '#sec-math.sqrt1_2', 'Math.SQRT1_2')}}     | {{Spec2('ES6')}}         |                                                       |
+| {{SpecName('ESDraft', '#sec-math.sqrt1_2', 'Math.SQRT1_2')}} | {{Spec2('ESDraft')}} |                                                       |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Math.SQRT1_2")}}
+
+## Voir aussi
+
+- {{jsxref("Math.pow()")}}
+- {{jsxref("Math.sqrt()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/math/sqrt2/index.html b/files/fr/web/javascript/reference/global_objects/math/sqrt2/index.html
deleted file mode 100644
index 964c355404..0000000000
--- a/files/fr/web/javascript/reference/global_objects/math/sqrt2/index.html
+++ /dev/null
@@ -1,79 +0,0 @@
----
-title: Math.SQRT2
-slug: Web/JavaScript/Reference/Global_Objects/Math/SQRT2
-tags:
-  - JavaScript
-  - Math
-  - Propriété
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Math/SQRT2
-original_slug: Web/JavaScript/Reference/Objets_globaux/Math/SQRT2
----
-<div>{{JSRef}}</div>
-
-<p>La propriété <code><strong>Math.SQRT2</strong></code> représente la racine carrée de 2 et vaut environ 1.414 :</p>
-
-<p><math display="block"><semantics><mrow><mstyle mathvariant="monospace"><mi>Math.SQRT2</mi></mstyle><mo>=</mo><msqrt><mn>2</mn></msqrt><mo>≈</mo><mn>1.414</mn></mrow><annotation encoding="TeX">\mathtt{\mi{Math.SQRT2}} = \sqrt{2} \approx 1.414</annotation></semantics></math></p>
-
-<div>{{EmbedInteractiveExample("pages/js/math-sqrt2.html")}}</div>
-
-
-
-<div>{{js_property_attributes(0,0,0)}}</div>
-
-<h2 id="Description">Description</h2>
-
-<p><code>SQRT2</code> est une propriété statique de <code>Math</code> et doit toujours être utilisée avec la syntaxe <code>Math.SQRT2</code>, elle ne doit pas être appelée comme propriété d'un autre objet qui aurait été créé (<code>Math</code> n'est pas un constructeur).</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<p>La fonction suivante renvoie la valeur de la racine carrée de 2 :</p>
-
-<pre class="brush:js">function getRoot2() {
-   return Math.SQRT2;
-}
-
-getRoot2(); // 1.4142135623730951</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES1')}}</td>
-   <td>{{Spec2('ES1')}}</td>
-   <td>Définition initiale. Implémentée avec JavaScript 1.0.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-15.8.1.8', 'Math.SQRT2')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-math.sqrt2', 'Math.SQRT2')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-math.sqrt2', 'Math.SQRT2')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Math.SQRT2")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Math.pow()")}}</li>
- <li>{{jsxref("Math.sqrt()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/math/sqrt2/index.md b/files/fr/web/javascript/reference/global_objects/math/sqrt2/index.md
new file mode 100644
index 0000000000..a9ba6b6994
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/math/sqrt2/index.md
@@ -0,0 +1,52 @@
+---
+title: Math.SQRT2
+slug: Web/JavaScript/Reference/Global_Objects/Math/SQRT2
+tags:
+  - JavaScript
+  - Math
+  - Propriété
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/SQRT2
+original_slug: Web/JavaScript/Reference/Objets_globaux/Math/SQRT2
+---
+{{JSRef}}
+
+La propriété **`Math.SQRT2`** représente la racine carrée de 2 et vaut environ 1.414 :
+
+<math display="block"><semantics><mrow><mstyle mathvariant="monospace"><mi>Math.SQRT2</mi></mstyle><mo>=</mo><msqrt><mn>2</mn></msqrt><mo>≈</mo><mn>1.414</mn></mrow><annotation encoding="TeX">\mathtt{\mi{Math.SQRT2}} = \sqrt{2} \approx 1.414</annotation></semantics></math>
+
+{{EmbedInteractiveExample("pages/js/math-sqrt2.html")}}{{js_property_attributes(0,0,0)}}
+
+## Description
+
+`SQRT2` est une propriété statique de `Math` et doit toujours être utilisée avec la syntaxe `Math.SQRT2`, elle ne doit pas être appelée comme propriété d'un autre objet qui aurait été créé (`Math` n'est pas un constructeur).
+
+## Exemples
+
+La fonction suivante renvoie la valeur de la racine carrée de 2 :
+
+```js
+function getRoot2() {
+   return Math.SQRT2;
+}
+
+getRoot2(); // 1.4142135623730951
+```
+
+## Spécifications
+
+| Spécification                                                                | Statut                       | Commentaires                                          |
+| ---------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- |
+| {{SpecName('ES1')}}                                                     | {{Spec2('ES1')}}         | Définition initiale. Implémentée avec JavaScript 1.0. |
+| {{SpecName('ES5.1', '#sec-15.8.1.8', 'Math.SQRT2')}}         | {{Spec2('ES5.1')}}     |                                                       |
+| {{SpecName('ES6', '#sec-math.sqrt2', 'Math.SQRT2')}}         | {{Spec2('ES6')}}         |                                                       |
+| {{SpecName('ESDraft', '#sec-math.sqrt2', 'Math.SQRT2')}} | {{Spec2('ESDraft')}} |                                                       |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Math.SQRT2")}}
+
+## Voir aussi
+
+- {{jsxref("Math.pow()")}}
+- {{jsxref("Math.sqrt()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/math/tan/index.html b/files/fr/web/javascript/reference/global_objects/math/tan/index.html
deleted file mode 100644
index 17d938acab..0000000000
--- a/files/fr/web/javascript/reference/global_objects/math/tan/index.html
+++ /dev/null
@@ -1,98 +0,0 @@
----
-title: Math.tan()
-slug: Web/JavaScript/Reference/Global_Objects/Math/tan
-tags:
-  - JavaScript
-  - Math
-  - Méthode
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Math/tan
-original_slug: Web/JavaScript/Reference/Objets_globaux/Math/tan
----
-<div>{{JSRef}}</div>
-
-<p>La fonction <code><strong>Math.tan()</strong></code> renvoie la tangente d'un nombre exprimant un angle en radians.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/math-tan.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">Math.tan(<var>x</var>)</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>x</code></dt>
- <dd>Un nombre qui représente un angle en radians.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>La tangente de l'angle fourni en argument (exprimé en radians).</p>
-
-<h2 id="Description">Description</h2>
-
-<p>La méthode <code>Math.tan()</code> renvoie une valeur numérique qui représente la tangente d'un angle.</p>
-
-<p><code>tan()</code> est une méthode statique de <code>Math</code> et doit toujours être utilisée avec la syntaxe <code>Math.tan()</code>, elle ne doit pas être utilisée comme méthode d'un autre objet qui aurait été créé (<code>Math</code> n'est pas un constructeur).</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Utiliser_Math.tan()">Utiliser <code>Math.tan()</code></h3>
-
-<pre class="brush:js">Math.tan(1); // 1.5574077246549023</pre>
-
-<p><code>Math.tan()</code> considère un argument exprimé en radians. Cependant, on peut vouloir travailler avec des valeurs en degrés. Pour cela, on pourra utiliser la fonction suivante qui calcule la tangente après avoir converti l'argument en radians :</p>
-
-<pre class="brush:js">function getTanDeg(deg) {
-   var rad = deg * Math.PI/180;
-   return Math.tan(rad);
-}
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES1')}}</td>
-   <td>{{Spec2('ES1')}}</td>
-   <td>Définition initiale. Implémentée avec JavaScript 1.0.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-15.8.2.18', 'Math.tan')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-math.tan', 'Math.tan')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-math.tan', 'Math.tan')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Math.tan")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Math.acos()")}}</li>
- <li>{{jsxref("Math.asin()")}}</li>
- <li>{{jsxref("Math.atan()")}}</li>
- <li>{{jsxref("Math.atan2()")}}</li>
- <li>{{jsxref("Math.cos()")}}</li>
- <li>{{jsxref("Math.sin()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/math/tan/index.md b/files/fr/web/javascript/reference/global_objects/math/tan/index.md
new file mode 100644
index 0000000000..12b35857d3
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/math/tan/index.md
@@ -0,0 +1,74 @@
+---
+title: Math.tan()
+slug: Web/JavaScript/Reference/Global_Objects/Math/tan
+tags:
+  - JavaScript
+  - Math
+  - Méthode
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/tan
+original_slug: Web/JavaScript/Reference/Objets_globaux/Math/tan
+---
+{{JSRef}}
+
+La fonction **`Math.tan()`** renvoie la tangente d'un nombre exprimant un angle en radians.
+
+{{EmbedInteractiveExample("pages/js/math-tan.html")}}
+
+## Syntaxe
+
+    Math.tan(x)
+
+### Paramètres
+
+- `x`
+  - : Un nombre qui représente un angle en radians.
+
+### Valeur de retour
+
+La tangente de l'angle fourni en argument (exprimé en radians).
+
+## Description
+
+La méthode `Math.tan()` renvoie une valeur numérique qui représente la tangente d'un angle.
+
+`tan()` est une méthode statique de `Math` et doit toujours être utilisée avec la syntaxe `Math.tan()`, elle ne doit pas être utilisée comme méthode d'un autre objet qui aurait été créé (`Math` n'est pas un constructeur).
+
+## Exemples
+
+### Utiliser `Math.tan()`
+
+```js
+Math.tan(1); // 1.5574077246549023
+```
+
+`Math.tan()` considère un argument exprimé en radians. Cependant, on peut vouloir travailler avec des valeurs en degrés. Pour cela, on pourra utiliser la fonction suivante qui calcule la tangente après avoir converti l'argument en radians :
+
+```js
+function getTanDeg(deg) {
+   var rad = deg * Math.PI/180;
+   return Math.tan(rad);
+}
+```
+
+## Spécifications
+
+| Spécification                                                        | État                         | Commentaires                                          |
+| -------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- |
+| {{SpecName('ES1')}}                                             | {{Spec2('ES1')}}         | Définition initiale. Implémentée avec JavaScript 1.0. |
+| {{SpecName('ES5.1', '#sec-15.8.2.18', 'Math.tan')}} | {{Spec2('ES5.1')}}     |                                                       |
+| {{SpecName('ES6', '#sec-math.tan', 'Math.tan')}}     | {{Spec2('ES6')}}         |                                                       |
+| {{SpecName('ESDraft', '#sec-math.tan', 'Math.tan')}} | {{Spec2('ESDraft')}} |                                                       |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Math.tan")}}
+
+## Voir aussi
+
+- {{jsxref("Math.acos()")}}
+- {{jsxref("Math.asin()")}}
+- {{jsxref("Math.atan()")}}
+- {{jsxref("Math.atan2()")}}
+- {{jsxref("Math.cos()")}}
+- {{jsxref("Math.sin()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/math/tanh/index.html b/files/fr/web/javascript/reference/global_objects/math/tanh/index.html
deleted file mode 100644
index be6fc10fd0..0000000000
--- a/files/fr/web/javascript/reference/global_objects/math/tanh/index.html
+++ /dev/null
@@ -1,105 +0,0 @@
----
-title: Math.tanh()
-slug: Web/JavaScript/Reference/Global_Objects/Math/tanh
-tags:
-  - ECMAScript 2015
-  - JavaScript
-  - Math
-  - Méthode
-  - Reference
-  - polyfill
-translation_of: Web/JavaScript/Reference/Global_Objects/Math/tanh
-original_slug: Web/JavaScript/Reference/Objets_globaux/Math/tanh
----
-<div>{{JSRef}}</div>
-
-<p>La fonction <code><strong>Math.tanh()</strong></code> renvoie la tangente hyperbolique d'un nombre définie par :</p>
-
-<p><math><semantics><mrow><mo lspace="0em" rspace="0em">tanh</mo><mi>x</mi><mo>=</mo><mfrac><mrow><mo lspace="0em" rspace="0em">sinh</mo><mi>x</mi></mrow><mrow><mo lspace="0em" rspace="0em">cosh</mo><mi>x</mi></mrow></mfrac><mo>=</mo><mfrac><mrow><msup><mi>e</mi><mi>x</mi></msup><mo>-</mo><msup><mi>e</mi><mrow><mo>-</mo><mi>x</mi></mrow></msup></mrow><mrow><msup><mi>e</mi><mi>x</mi></msup><mo>+</mo><msup><mi>e</mi><mrow><mo>-</mo><mi>x</mi></mrow></msup></mrow></mfrac><mo>=</mo><mfrac><mrow><msup><mi>e</mi><mrow><mn>2</mn><mi>x</mi></mrow></msup><mo>-</mo><mn>1</mn></mrow><mrow><msup><mi>e</mi><mrow><mn>2</mn><mi>x</mi></mrow></msup><mo>+</mo><mn>1</mn></mrow></mfrac></mrow><annotation encoding="TeX">\tanh x = \frac{\sinh x}{\cosh x} = \frac {e^x - e^{-x}} {e^x + e^{-x}} = \frac{e^{2x} - 1}{e^{2x}+1}</annotation></semantics></math></p>
-
-<div>{{EmbedInteractiveExample("pages/js/math-tanh.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">Math.tanh(<var>x</var>)</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>x</code></dt>
- <dd>Un nombre.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>La tangente hyperbolique du nombre fourni en argument.</p>
-
-<h2 id="Description">Description</h2>
-
-<p><code>tanh()</code> est une méthode statique de l'objet <code>Math</code>, elle doit toujours être utilisée avec la syntaxe <code>Math.tanh()</code>, elle ne doit pas être utilisée comme une méthode d'un objet <code>Math</code> qui aurait été instancié (<code>Math</code> n'est pas une constructeur).</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Utiliser_Math.tanh()">Utiliser <code>Math.tanh()</code></h3>
-
-<pre class="brush:js">Math.tanh(0);        // 0
-Math.tanh(Infinity); // 1
-Math.tanh(1);        // 0.7615941559557649</pre>
-
-<h2 id="Prothèse_d'émulation_(polyfill)">Prothèse d'émulation (<em>polyfill</em>)</h2>
-
-<p>Cette méthode peut être émulée grâce à la fonction {{jsxref("Objets_globaux/Math/exp", "Math.exp()")}} :</p>
-
-<pre class="brush: js">Math.tanh = Math.tanh || function(x){
-  var a = Math.exp(+x), b = Math.exp(-x);
-  return a == Infinity ? 1 : b == Infinity ? -1 : (a - b) / (a + b);
-}</pre>
-
-<p>et si on souhaite n'utiliser qu'un seul appel à {{jsxref("Objets_globaux/Math/exp", "Math.exp()")}}<code> :</code></p>
-
-<pre class="brush: js">Math.tanhx = Math.tanhx || function(x) {
-  if(x === Infinity) {
-    return 1;
-  } else if(x === -Infinity) {
-    return -1;
-  } else {
-    var y = Math.exp(2 * x);
-    return (y - 1) / (y + 1);
-  }
-};</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-math.tanh', 'Math.tanh')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-math.tanh', 'Math.tanh')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Math.tanh")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Math.acosh()")}}</li>
- <li>{{jsxref("Math.asinh()")}}</li>
- <li>{{jsxref("Math.atanh()")}}</li>
- <li>{{jsxref("Math.cosh()")}}</li>
- <li>{{jsxref("Math.sinh()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/math/tanh/index.md b/files/fr/web/javascript/reference/global_objects/math/tanh/index.md
new file mode 100644
index 0000000000..88505bc59d
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/math/tanh/index.md
@@ -0,0 +1,92 @@
+---
+title: Math.tanh()
+slug: Web/JavaScript/Reference/Global_Objects/Math/tanh
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Math
+  - Méthode
+  - Reference
+  - polyfill
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/tanh
+original_slug: Web/JavaScript/Reference/Objets_globaux/Math/tanh
+---
+{{JSRef}}
+
+La fonction **`Math.tanh()`** renvoie la tangente hyperbolique d'un nombre définie par :
+
+<math><semantics><mrow><mo lspace="0em" rspace="0em">tanh</mo><mi>x</mi><mo>=</mo><mfrac><mrow><mo lspace="0em" rspace="0em">sinh</mo><mi>x</mi></mrow><mrow><mo lspace="0em" rspace="0em">cosh</mo><mi>x</mi></mrow></mfrac><mo>=</mo><mfrac><mrow><msup><mi>e</mi><mi>x</mi></msup><mo>-</mo><msup><mi>e</mi><mrow><mo>-</mo><mi>x</mi></mrow></msup></mrow><mrow><msup><mi>e</mi><mi>x</mi></msup><mo>+</mo><msup><mi>e</mi><mrow><mo>-</mo><mi>x</mi></mrow></msup></mrow></mfrac><mo>=</mo><mfrac><mrow><msup><mi>e</mi><mrow><mn>2</mn><mi>x</mi></mrow></msup><mo>-</mo><mn>1</mn></mrow><mrow><msup><mi>e</mi><mrow><mn>2</mn><mi>x</mi></mrow></msup><mo>+</mo><mn>1</mn></mrow></mfrac></mrow><annotation encoding="TeX">\tanh x = \frac{\sinh x}{\cosh x} = \frac {e^x - e^{-x}} {e^x + e^{-x}} = \frac{e^{2x} - 1}{e^{2x}+1}</annotation></semantics></math>
+
+{{EmbedInteractiveExample("pages/js/math-tanh.html")}}
+
+## Syntaxe
+
+    Math.tanh(x)
+
+### Paramètres
+
+- `x`
+  - : Un nombre.
+
+### Valeur de retour
+
+La tangente hyperbolique du nombre fourni en argument.
+
+## Description
+
+`tanh()` est une méthode statique de l'objet `Math`, elle doit toujours être utilisée avec la syntaxe `Math.tanh()`, elle ne doit pas être utilisée comme une méthode d'un objet `Math` qui aurait été instancié (`Math` n'est pas une constructeur).
+
+## Exemples
+
+### Utiliser `Math.tanh()`
+
+```js
+Math.tanh(0);        // 0
+Math.tanh(Infinity); // 1
+Math.tanh(1);        // 0.7615941559557649
+```
+
+## Prothèse d'émulation (_polyfill_)
+
+Cette méthode peut être émulée grâce à la fonction {{jsxref("Objets_globaux/Math/exp", "Math.exp()")}} :
+
+```js
+Math.tanh = Math.tanh || function(x){
+  var a = Math.exp(+x), b = Math.exp(-x);
+  return a == Infinity ? 1 : b == Infinity ? -1 : (a - b) / (a + b);
+}
+```
+
+et si on souhaite n'utiliser qu'un seul appel à {{jsxref("Objets_globaux/Math/exp", "Math.exp()")}}` :`
+
+```js
+Math.tanhx = Math.tanhx || function(x) {
+  if(x === Infinity) {
+    return 1;
+  } else if(x === -Infinity) {
+    return -1;
+  } else {
+    var y = Math.exp(2 * x);
+    return (y - 1) / (y + 1);
+  }
+};
+```
+
+## Spécifications
+
+| Spécification                                                            | État                         | Commentaires         |
+| ------------------------------------------------------------------------ | ---------------------------- | -------------------- |
+| {{SpecName('ES2015', '#sec-math.tanh', 'Math.tanh')}} | {{Spec2('ES2015')}}     | Définition initiale. |
+| {{SpecName('ESDraft', '#sec-math.tanh', 'Math.tanh')}} | {{Spec2('ESDraft')}} |                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Math.tanh")}}
+
+## Voir aussi
+
+- {{jsxref("Math.acosh()")}}
+- {{jsxref("Math.asinh()")}}
+- {{jsxref("Math.atanh()")}}
+- {{jsxref("Math.cosh()")}}
+- {{jsxref("Math.sinh()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/math/trunc/index.html b/files/fr/web/javascript/reference/global_objects/math/trunc/index.html
deleted file mode 100644
index c78b0cb6ec..0000000000
--- a/files/fr/web/javascript/reference/global_objects/math/trunc/index.html
+++ /dev/null
@@ -1,94 +0,0 @@
----
-title: Math.trunc()
-slug: Web/JavaScript/Reference/Global_Objects/Math/trunc
-tags:
-  - ECMAScript 2015
-  - JavaScript
-  - Math
-  - Méthode
-  - Reference
-  - polyfill
-translation_of: Web/JavaScript/Reference/Global_Objects/Math/trunc
-original_slug: Web/JavaScript/Reference/Objets_globaux/Math/trunc
----
-<div>{{JSRef}}</div>
-
-<p>La fonction <code><strong>Math.trunc()</strong></code> retourne la troncature entière d'un nombre en retirant sa partie décimale.</p>
-
-<p><math><semantics><mrow><mstyle mathvariant="monospace"><mrow><mo lspace="0em" rspace="thinmathspace">Math.trunc</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo></mrow></mstyle><mo>=</mo><mrow><mo>{</mo><mtable columnalign="left left"><mtr><mtd><mrow><mo>⌊</mo><mi>x</mi><mo>⌋</mo></mrow></mtd><mtd><mtext>si</mtext></mtd><mtd><mi>x</mi><mo>≥</mo><mn>0</mn></mtd></mtr><mtr><mtd><mrow><mo>⌈</mo><mi>x</mi><mo>⌉</mo></mrow></mtd><mtd><mtext>si</mtext></mtd><mtd><mi>x</mi><mo>&lt;</mo><mn>0</mn></mtd></mtr></mtable></mrow></mrow><annotation encoding="TeX">\mathtt{\operatorname{Math.trunc}(x)} = \begin{cases} \left\lfloor x \right\rfloor &amp; \text{if} &amp; x \geq 0 \\ \left\lceil x \right\rceil &amp; \text{if} &amp;x &lt; 0 \end{cases}</annotation></semantics></math></p>
-
-<div>{{EmbedInteractiveExample("pages/js/math-trunc.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">Math.trunc(<var>x</var>)</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>x</code></dt>
- <dd>Un nombre.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>La partie entière du nombre passé en argument.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>Contrairement aux autres méthodes {{jsxref("Math.floor()")}}, {{jsxref("Math.ceil()")}} et {{jsxref("Math.round()")}}, <code>Math.trunc()</code> fonctionne de façon très simple : la partie décimale du nombre est retirée et on conserve la partie entière (que le nombre soit positif ou négatif).<br>
- <br>
- Ainsi, si l'argument est un nombre positif, <code>Math.trunc()</code> sera équivalent à <code>Math.floor()</code>, sinon <code>Math.trunc()</code> sera équivalent à <code>Math.ceil()</code>.</p>
-
-<p>On notera que l'argument passé à la méthode est converti en nombre de façon implicite.</p>
-
-<p><code>trunc()</code> est une méthode statique de <code>Math</code>, elle doit toujours être utilisée avec la syntaxe <code>Math.trunc()</code>, elle ne doit pas être utilisée comme la méthode d'un objet qui aurait été instancié (<code>Math</code> n'est pas un constructeur).</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Utiliser_Math.trunc()">Utiliser <code>Math.trunc()</code></h3>
-
-<pre class="brush:js">Math.trunc(13.37);   // 13
-Math.trunc(42.84);   // 42
-Math.trunc(0.123);   //  0
-Math.trunc(-0.123);  // -0
-Math.trunc("-1.123");// -1
-Math.trunc(NaN);     // NaN
-Math.trunc("toto");  // NaN
-Math.trunc();        // NaN</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-math.trunc', 'Math.trunc')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td>Première définition.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-math.trunc', 'Math.trunc')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Math.trunc")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Math.abs()")}}</li>
- <li>{{jsxref("Math.ceil()")}}</li>
- <li>{{jsxref("Math.floor()")}}</li>
- <li>{{jsxref("Math.round()")}}</li>
- <li>{{jsxref("Math.sign()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/math/trunc/index.md b/files/fr/web/javascript/reference/global_objects/math/trunc/index.md
new file mode 100644
index 0000000000..64c918039a
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/math/trunc/index.md
@@ -0,0 +1,77 @@
+---
+title: Math.trunc()
+slug: Web/JavaScript/Reference/Global_Objects/Math/trunc
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Math
+  - Méthode
+  - Reference
+  - polyfill
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/trunc
+original_slug: Web/JavaScript/Reference/Objets_globaux/Math/trunc
+---
+{{JSRef}}
+
+La fonction **`Math.trunc()`** retourne la troncature entière d'un nombre en retirant sa partie décimale.
+
+<math><semantics><mrow><mstyle mathvariant="monospace"><mrow><mo lspace="0em" rspace="thinmathspace">Math.trunc</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo></mrow></mstyle><mo>=</mo><mrow><mo>{</mo><mtable columnalign="left left"><mtr><mtd><mrow><mo>⌊</mo><mi>x</mi><mo>⌋</mo></mrow></mtd><mtd><mtext>si</mtext></mtd><mtd><mi>x</mi><mo>≥</mo><mn>0</mn></mtd></mtr><mtr><mtd><mrow><mo>⌈</mo><mi>x</mi><mo>⌉</mo></mrow></mtd><mtd><mtext>si</mtext></mtd><mtd><mi>x</mi><mo>&#x3C;</mo><mn>0</mn></mtd></mtr></mtable></mrow></mrow><annotation encoding="TeX">\mathtt{\operatorname{Math.trunc}(x)} = \begin{cases} \left\lfloor x \right\rfloor &#x26; \text{if} &#x26; x \geq 0 \\ \left\lceil x \right\rceil &#x26; \text{if} &#x26;x &#x3C; 0 \end{cases}</annotation></semantics></math>
+
+{{EmbedInteractiveExample("pages/js/math-trunc.html")}}
+
+## Syntaxe
+
+    Math.trunc(x)
+
+### Paramètres
+
+- `x`
+  - : Un nombre.
+
+### Valeur de retour
+
+La partie entière du nombre passé en argument.
+
+## Description
+
+Contrairement aux autres méthodes {{jsxref("Math.floor()")}}, {{jsxref("Math.ceil()")}} et {{jsxref("Math.round()")}}, `Math.trunc()` fonctionne de façon très simple : la partie décimale du nombre est retirée et on conserve la partie entière (que le nombre soit positif ou négatif).
+
+Ainsi, si l'argument est un nombre positif, `Math.trunc()` sera équivalent à `Math.floor()`, sinon `Math.trunc()` sera équivalent à `Math.ceil()`.
+
+On notera que l'argument passé à la méthode est converti en nombre de façon implicite.
+
+`trunc()` est une méthode statique de `Math`, elle doit toujours être utilisée avec la syntaxe `Math.trunc()`, elle ne doit pas être utilisée comme la méthode d'un objet qui aurait été instancié (`Math` n'est pas un constructeur).
+
+## Exemples
+
+### Utiliser `Math.trunc()`
+
+```js
+Math.trunc(13.37);   // 13
+Math.trunc(42.84);   // 42
+Math.trunc(0.123);   //  0
+Math.trunc(-0.123);  // -0
+Math.trunc("-1.123");// -1
+Math.trunc(NaN);     // NaN
+Math.trunc("toto");  // NaN
+Math.trunc();        // NaN
+```
+
+## Spécifications
+
+| Spécification                                                                | État                         | Commentaire          |
+| ---------------------------------------------------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName('ES2015', '#sec-math.trunc', 'Math.trunc')}}     | {{Spec2('ES2015')}}     | Première définition. |
+| {{SpecName('ESDraft', '#sec-math.trunc', 'Math.trunc')}} | {{Spec2('ESDraft')}} |                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Math.trunc")}}
+
+## Voir aussi
+
+- {{jsxref("Math.abs()")}}
+- {{jsxref("Math.ceil()")}}
+- {{jsxref("Math.floor()")}}
+- {{jsxref("Math.round()")}}
+- {{jsxref("Math.sign()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/nan/index.html b/files/fr/web/javascript/reference/global_objects/nan/index.html
deleted file mode 100644
index b2fa6e4105..0000000000
--- a/files/fr/web/javascript/reference/global_objects/nan/index.html
+++ /dev/null
@@ -1,89 +0,0 @@
----
-title: NaN
-slug: Web/JavaScript/Reference/Global_Objects/NaN
-tags:
-  - JavaScript
-  - Propriété
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/NaN
-original_slug: Web/JavaScript/Reference/Objets_globaux/NaN
----
-<div>{{jsSidebar("Objects")}}</div>
-
-<p>La propriété globale <code><strong>NaN</strong></code> est une valeur utilisée pour représenter une quantité qui n'est pas un nombre (<em><strong>N</strong>ot <strong>a</strong> <strong>N</strong>umber</em> en anglais).</p>
-
-<p>{{js_property_attributes(0,0,0)}}</p>
-
-<div>{{EmbedInteractiveExample("pages/js/globalprops-nan.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">NaN</pre>
-
-<h2 id="Description">Description</h2>
-
-<p><code>NaN</code> est une propriété de <em>l'objet global</em>, c'est-à-dire qu'elle est accessible globalement.</p>
-
-<p>La valeur initiale de <code>NaN</code> est <code>Number.NaN</code>. Dans les navigateurs modernes, <code>NaN</code> est une propriété non-configurable et non-écrivable. Si ce n'est pas le cas, il faut éviter de la modifier et de l'écraser.</p>
-
-<p>Il est rare d'utiliser expressément <code>NaN</code> dans un programme. On récupère généralement <code>NaN</code> comme le résultat d'une fonction mathématique qui échoue (<code>Math.sqrt(-1)</code>) où quand une fonction qui tente d'interpréter un nombre échoue (<code>parseInt("blabla")</code>).</p>
-
-<h3 id="Tester_NaN">Tester <code>NaN</code></h3>
-
-<p>Les <a href="/fr/docs/Web/JavaScript/Les_diff%C3%A9rents_tests_d_%C3%A9galit%C3%A9_comment_les_utiliser">opérateurs d'égalité</a> (<code>==</code> et <code>===</code>) ne peuvent pas être utilisé pour tester une valeur par rapport à <code>NaN</code>. Il faut utiliser {{jsxref("Number.isNaN()")}} ou {{jsxref("isNaN", "isNaN()")}} à la place.</p>
-
-<pre class="brush: js">NaN === NaN;        // false
-Number.NaN === NaN; // false
-isNaN(NaN);         // true
-isNaN(Number.NaN);  // true
-</pre>
-
-<p>La différence entre <code>isNaN()</code> et <code>Number.isNaN()</code> est la façon dont les valeurs sont, ou non, converties en nombre avant de vérifier si la valeur est <code>NaN</code> : <code>isNaN()</code> convertira l'argument en nombre avant de vérifier alors que <code>Number.isNaN()</code> ne renverra <code>true</code> que si l'opérande vaut <code>NaN</code>.</p>
-
-<pre class="brush: js">isNaN('coucou monde');        // renvoie true
-Number.isNaN('coucou monde'); // renvoie false</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES1')}}</td>
-   <td>{{Spec2('ES1')}}</td>
-   <td>Définition initiale. Implémentée avec JavaScript 1.3</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-15.1.1.1', 'NaN')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-value-properties-of-the-global-object-nan', 'NaN')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-value-properties-of-the-global-object-nan', 'NaN')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.NaN")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Number.NaN")}}</li>
- <li>{{jsxref("Number.isNaN()")}}</li>
- <li>{{jsxref("isNaN", "isNaN()")}}</li>
- <li><a href="/fr/docs/Web/JavaScript/Guide/%C3%89galit%C3%A9_en_JavaScript">L'égalité en JavaScript</a></li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/nan/index.md b/files/fr/web/javascript/reference/global_objects/nan/index.md
new file mode 100644
index 0000000000..f6608f929c
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/nan/index.md
@@ -0,0 +1,67 @@
+---
+title: NaN
+slug: Web/JavaScript/Reference/Global_Objects/NaN
+tags:
+  - JavaScript
+  - Propriété
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/NaN
+original_slug: Web/JavaScript/Reference/Objets_globaux/NaN
+---
+{{jsSidebar("Objects")}}
+
+La propriété globale **`NaN`** est une valeur utilisée pour représenter une quantité qui n'est pas un nombre (**\*N**ot **a** **N**umber\* en anglais).
+
+{{js_property_attributes(0,0,0)}}
+
+{{EmbedInteractiveExample("pages/js/globalprops-nan.html")}}
+
+## Syntaxe
+
+    NaN
+
+## Description
+
+`NaN` est une propriété de _l'objet global_, c'est-à-dire qu'elle est accessible globalement.
+
+La valeur initiale de `NaN` est `Number.NaN`. Dans les navigateurs modernes, `NaN` est une propriété non-configurable et non-écrivable. Si ce n'est pas le cas, il faut éviter de la modifier et de l'écraser.
+
+Il est rare d'utiliser expressément `NaN` dans un programme. On récupère généralement `NaN` comme le résultat d'une fonction mathématique qui échoue (`Math.sqrt(-1)`) où quand une fonction qui tente d'interpréter un nombre échoue (`parseInt("blabla")`).
+
+### Tester `NaN`
+
+Les [opérateurs d'égalité](/fr/docs/Web/JavaScript/Les_diff%C3%A9rents_tests_d_%C3%A9galit%C3%A9_comment_les_utiliser) (`==` et `===`) ne peuvent pas être utilisé pour tester une valeur par rapport à `NaN`. Il faut utiliser {{jsxref("Number.isNaN()")}} ou {{jsxref("isNaN", "isNaN()")}} à la place.
+
+```js
+NaN === NaN;        // false
+Number.NaN === NaN; // false
+isNaN(NaN);         // true
+isNaN(Number.NaN);  // true
+```
+
+La différence entre `isNaN()` et `Number.isNaN()` est la façon dont les valeurs sont, ou non, converties en nombre avant de vérifier si la valeur est `NaN` : `isNaN()` convertira l'argument en nombre avant de vérifier alors que `Number.isNaN()` ne renverra `true` que si l'opérande vaut `NaN`.
+
+```js
+isNaN('coucou monde');        // renvoie true
+Number.isNaN('coucou monde'); // renvoie false
+```
+
+## Spécifications
+
+| Spécification                                                                                                | État                         | Commentaires                                         |
+| ------------------------------------------------------------------------------------------------------------ | ---------------------------- | ---------------------------------------------------- |
+| {{SpecName('ES1')}}                                                                                     | {{Spec2('ES1')}}         | Définition initiale. Implémentée avec JavaScript 1.3 |
+| {{SpecName('ES5.1', '#sec-15.1.1.1', 'NaN')}}                                                 | {{Spec2('ES5.1')}}     |                                                      |
+| {{SpecName('ES6', '#sec-value-properties-of-the-global-object-nan', 'NaN')}}         | {{Spec2('ES6')}}         |                                                      |
+| {{SpecName('ESDraft', '#sec-value-properties-of-the-global-object-nan', 'NaN')}} | {{Spec2('ESDraft')}} |                                                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.NaN")}}
+
+## Voir aussi
+
+- {{jsxref("Number.NaN")}}
+- {{jsxref("Number.isNaN()")}}
+- {{jsxref("isNaN", "isNaN()")}}
+- [L'égalité en JavaScript](/fr/docs/Web/JavaScript/Guide/%C3%89galit%C3%A9_en_JavaScript)
diff --git a/files/fr/web/javascript/reference/global_objects/null/index.html b/files/fr/web/javascript/reference/global_objects/null/index.html
deleted file mode 100644
index fb9a228f19..0000000000
--- a/files/fr/web/javascript/reference/global_objects/null/index.html
+++ /dev/null
@@ -1,88 +0,0 @@
----
-title: 'null'
-slug: Web/JavaScript/Reference/Global_Objects/null
-tags:
-  - JavaScript
-  - Littéral
-  - Primitive
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/null
-original_slug: Web/JavaScript/Reference/Objets_globaux/null
----
-<div>{{jsSidebar("Objects")}}</div>
-
-<p>La valeur <strong><code>null</code></strong> est un littéral JavaScript représentant la nullité au sens où aucune valeur pour l'objet n'est présente. C'est une des valeurs primitives de JavaScript.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/globalprops-null.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">null</pre>
-
-<h2 id="Description">Description</h2>
-
-<p>La valeur <code>null</code> est un littéral (et non pas une propriété de l'objet global telle que {{jsxref("undefined")}}). Dans certaines API, <code>null</code> est souvent utilisé en valeur de retour lorsqu'un objet est attendu mais qu'aucun objet ne convient. Lors de tests d'égalité avec <code>null</code> ou <code>undefined</code>, il faut faire attention aux <a href="/fr/docs/Web/JavaScript/Les_différents_tests_d_égalité_comment_les_utiliser">différences entre les opérateurs d'égalité faible (==) et stricte (===)</a> (on aura une conversion de type avec le premier).</p>
-
-<pre class="brush: js">// toto n'existe pas, n'a pas été défini et n'a jamais été initialisé
-toto;
-"ReferenceError: toto is not defined"
-
-// toto existe mais n'a ni type ni valeur
-var toto = null;
-console.log(toto); // null</pre>
-
-<h3 id="Différence_entre_null_et_undefined">Différence entre <code>null</code> et <code>undefined</code></h3>
-
-<pre class="brush: js">typeof null;           // "object" (pas null pour des raisons historiques)
-typeof undefined;      // "undefined"
-null === undefined;    // false
-null  == undefined;    // true
-null === null;         // true
-null  == null;         // true
-!null;                 // true
-isNaN(1 + null);       // false
-isNaN(1 + undefined);  // true
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES1')}}</td>
-   <td>{{Spec2('ES1')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-4.3.11', 'null value')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-null-value', 'null value')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-null-value', 'null value')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.null")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("undefined")}}</li>
- <li>{{jsxref("NaN")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/null/index.md b/files/fr/web/javascript/reference/global_objects/null/index.md
new file mode 100644
index 0000000000..265e06cd86
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/null/index.md
@@ -0,0 +1,66 @@
+---
+title: 'null'
+slug: Web/JavaScript/Reference/Global_Objects/null
+tags:
+  - JavaScript
+  - Littéral
+  - Primitive
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/null
+original_slug: Web/JavaScript/Reference/Objets_globaux/null
+---
+{{jsSidebar("Objects")}}
+
+La valeur **`null`** est un littéral JavaScript représentant la nullité au sens où aucune valeur pour l'objet n'est présente. C'est une des valeurs primitives de JavaScript.
+
+{{EmbedInteractiveExample("pages/js/globalprops-null.html")}}
+
+## Syntaxe
+
+    null
+
+## Description
+
+La valeur `null` est un littéral (et non pas une propriété de l'objet global telle que {{jsxref("undefined")}}). Dans certaines API, `null` est souvent utilisé en valeur de retour lorsqu'un objet est attendu mais qu'aucun objet ne convient. Lors de tests d'égalité avec `null` ou `undefined`, il faut faire attention aux [différences entre les opérateurs d'égalité faible (==) et stricte (===)](/fr/docs/Web/JavaScript/Les_différents_tests_d_égalité_comment_les_utiliser) (on aura une conversion de type avec le premier).
+
+```js
+// toto n'existe pas, n'a pas été défini et n'a jamais été initialisé
+toto;
+"ReferenceError: toto is not defined"
+
+// toto existe mais n'a ni type ni valeur
+var toto = null;
+console.log(toto); // null
+```
+
+### Différence entre `null` et `undefined`
+
+```js
+typeof null;           // "object" (pas null pour des raisons historiques)
+typeof undefined;      // "undefined"
+null === undefined;    // false
+null  == undefined;    // true
+null === null;         // true
+null  == null;         // true
+!null;                 // true
+isNaN(1 + null);       // false
+isNaN(1 + undefined);  // true
+```
+
+## Spécifications
+
+| Spécification                                                                | État                         | Commentaires         |
+| ---------------------------------------------------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName('ES1')}}                                                     | {{Spec2('ES1')}}         | Définition initiale. |
+| {{SpecName('ES5.1', '#sec-4.3.11', 'null value')}}         | {{Spec2('ES5.1')}}     |                      |
+| {{SpecName('ES6', '#sec-null-value', 'null value')}}         | {{Spec2('ES6')}}         |                      |
+| {{SpecName('ESDraft', '#sec-null-value', 'null value')}} | {{Spec2('ESDraft')}} |                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.null")}}
+
+## Voir aussi
+
+- {{jsxref("undefined")}}
+- {{jsxref("NaN")}}
diff --git a/files/fr/web/javascript/reference/global_objects/number/epsilon/index.html b/files/fr/web/javascript/reference/global_objects/number/epsilon/index.html
deleted file mode 100644
index 88138770c9..0000000000
--- a/files/fr/web/javascript/reference/global_objects/number/epsilon/index.html
+++ /dev/null
@@ -1,75 +0,0 @@
----
-title: Number.EPSILON
-slug: Web/JavaScript/Reference/Global_Objects/Number/EPSILON
-tags:
-  - ECMAScript 2015
-  - JavaScript
-  - Number
-  - Propriété
-  - Reference
-  - polyfill
-translation_of: Web/JavaScript/Reference/Global_Objects/Number/EPSILON
-original_slug: Web/JavaScript/Reference/Objets_globaux/Number/EPSILON
----
-<div>{{JSRef}}</div>
-
-<p>La propriété <strong><code>Number.EPSILON</code></strong> représente la différence entre le chiffre 1 (un) et la plus petite valeur supérieure à 1 qui peut être représentée par un nombre en JavaScript.</p>
-
-<p>Il n'est pas nécessaire de créer un objet {{jsxref("Number")}} pour accéder à cette propriété statique, elle est accessible avec <code>Number.EPSILON</code>.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/number-epsilon.html")}}</div>
-
-
-
-<div>{{js_property_attributes(0,0,0)}}</div>
-
-<h2 id="Description">Description</h2>
-
-<p>La propriété <code>EPSILON</code> vaut environ <code>2.2204460492503130808472633361816E-16</code> (ce qui correspond à 2^-52).</p>
-
-<h2 id="Exemple">Exemple</h2>
-
-<h3 id="Tester_une_égalité_mathématique_avec_un_seuil_de_précision">Tester une égalité mathématique avec un seuil de précision</h3>
-
-<pre class="brush: js">x = 0.2;
-y = 0.3;
-equal = (Math.abs(x - y) &lt; Number.EPSILON);</pre>
-
-<h2 id="Prothèse_d'émulation_(polyfill)">Prothèse d'émulation (<em>polyfill</em>)</h2>
-
-<pre class="brush: js">if (Number.EPSILON === undefined) {
-  Number.EPSILON  =  Math.pow(2, -52);
-}
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-number.epsilon', 'Number.EPSILON')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-number.epsilon', 'Number.EPSILON')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Number.EPSILON")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>L'objet {{jsxref("Number")}} auquel appartient cette propriété.</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/number/epsilon/index.md b/files/fr/web/javascript/reference/global_objects/number/epsilon/index.md
new file mode 100644
index 0000000000..cc86d668c0
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/number/epsilon/index.md
@@ -0,0 +1,57 @@
+---
+title: Number.EPSILON
+slug: Web/JavaScript/Reference/Global_Objects/Number/EPSILON
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Number
+  - Propriété
+  - Reference
+  - polyfill
+translation_of: Web/JavaScript/Reference/Global_Objects/Number/EPSILON
+original_slug: Web/JavaScript/Reference/Objets_globaux/Number/EPSILON
+---
+{{JSRef}}
+
+La propriété **`Number.EPSILON`** représente la différence entre le chiffre 1 (un) et la plus petite valeur supérieure à 1 qui peut être représentée par un nombre en JavaScript.
+
+Il n'est pas nécessaire de créer un objet {{jsxref("Number")}} pour accéder à cette propriété statique, elle est accessible avec `Number.EPSILON`.
+
+{{EmbedInteractiveExample("pages/js/number-epsilon.html")}}{{js_property_attributes(0,0,0)}}
+
+## Description
+
+La propriété `EPSILON` vaut environ `2.2204460492503130808472633361816E-16` (ce qui correspond à 2^-52).
+
+## Exemple
+
+### Tester une égalité mathématique avec un seuil de précision
+
+```js
+x = 0.2;
+y = 0.3;
+equal = (Math.abs(x - y) < Number.EPSILON);
+```
+
+## Prothèse d'émulation (_polyfill_)
+
+```js
+if (Number.EPSILON === undefined) {
+  Number.EPSILON  =  Math.pow(2, -52);
+}
+```
+
+## Spécifications
+
+| Spécification                                                                        | État                         | Commentaires         |
+| ------------------------------------------------------------------------------------ | ---------------------------- | -------------------- |
+| {{SpecName('ES2015', '#sec-number.epsilon', 'Number.EPSILON')}} | {{Spec2('ES2015')}}     | Définition initiale. |
+| {{SpecName('ESDraft', '#sec-number.epsilon', 'Number.EPSILON')}} | {{Spec2('ESDraft')}} |                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Number.EPSILON")}}
+
+## Voir aussi
+
+- L'objet {{jsxref("Number")}} auquel appartient cette propriété.
diff --git a/files/fr/web/javascript/reference/global_objects/number/index.html b/files/fr/web/javascript/reference/global_objects/number/index.html
deleted file mode 100644
index bc4c146cca..0000000000
--- a/files/fr/web/javascript/reference/global_objects/number/index.html
+++ /dev/null
@@ -1,202 +0,0 @@
----
-title: Number
-slug: Web/JavaScript/Reference/Global_Objects/Number
-tags:
-  - JavaScript
-  - Number
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Number
-original_slug: Web/JavaScript/Reference/Objets_globaux/Number
----
-<div>{{JSRef}}</div>
-
-<p>L'objet <strong><code>Number</code></strong> est une enveloppe objet (<em>wrapper</em>) autour du <a href="/fr/docs/Web/JavaScript/Structures_de_données#Le_type_nombre">type primitif numérique</a>. Autrement dit, il est utilisé pour manipuler les nombres comme des objets. Pour créer un objet <code>Number</code>, on utilise le constructeur <code>Number()</code>.</p>
-
-<p>Le type JavaScript <code>Number</code> utilise <a href="https://fr.wikipedia.org/wiki/IEEE_754">une représentation binaire à précision double sur 64 bits telle que décrite par le standard IEEE 754</a>. Les implémentations plus récentes offrent un nouveau type : {{jsxref("BigInt")}} qui permet de représenter des entiers avec une précision arbitraire.</p>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox notranslate">new Number(valeur);
-var a = new Number('123'); // a === 123 donnera false
-var b = Number('123'); // b === 123 donnera true
-a instanceof Number; // donnera true
-b instanceof Number; // donnera false</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>valeur</code></dt>
- <dd>La valeur numérique pour l'objet qu'on souhaite créer.</dd>
-</dl>
-
-<h2 id="Description">Description</h2>
-
-<p>L'objet <code>Number</code> est principalement utilisé dans les cas de figure suivants :</p>
-
-<ul>
- <li>Si l'argument ne peut pas être converti en un nombre, il renverra {{jsxref("NaN")}}.</li>
- <li>Dans un contexte de fonction simple (quand il n'est pas utilisé comme un constructeur avec l'opérateur {{jsxref("Opérateurs/L_opérateur_new", "new")}}), <code>Number</code> peut être utilisé afin d'effectuer des conversions.</li>
-</ul>
-
-<h2 id="Propriétés">Propriétés</h2>
-
-<dl>
- <dt>{{jsxref("Number.EPSILON")}}</dt>
- <dd>Le plus petit intervalle entre deux valeurs qu'il est possible de représenter en JavaScript.</dd>
- <dt>{{jsxref("Number.MAX_SAFE_INTEGER")}}</dt>
- <dd>La valeur entière maximale qu'on peut représenter en JavaScript (<code>2^53 - 1</code>).</dd>
- <dt>{{jsxref("Number.MAX_VALUE")}}</dt>
- <dd>La valeur numérique maximale qu'on peut représenter en JavaScript.</dd>
- <dt>{{jsxref("Number.MIN_SAFE_INTEGER")}}</dt>
- <dd>La valeur entière minimale qu'on peut représenter en JavaScript (<code>-(2^53 - 1)</code>).</dd>
- <dt>{{jsxref("Number.MIN_VALUE")}}</dt>
- <dd>La plus petite valeur qu'on peut représenter en JavaScript, c'est-à-dire le plus petit nombre positif (le nombre le plus près de zéro qui n'est pas égal à zéro et qu'on peut représenter en JavaScript).</dd>
- <dt>{{jsxref("Number.NaN")}}</dt>
- <dd>Une valeur spéciale pour représenter les valeurs non-numériques (<strong>NaN</strong> correspond à « <em><strong>n</strong>ot <strong>a</strong> <strong>n</strong>umber</em> » en anglais, qui signifie « n'est pas un nombre »).</dd>
- <dt>{{jsxref("Number.NEGATIVE_INFINITY")}}</dt>
- <dd>Une valeur spéciale pour représenter l'infini négatif.</dd>
- <dt>{{jsxref("Number.POSITIVE_INFINITY")}}</dt>
- <dd>Une valeur spéciale pour représenter l'infini (positif).</dd>
- <dt>{{jsxref("Number.prototype")}}</dt>
- <dd>Cet objet permet d'ajouter des propriétés aux instances de <code>Number</code>.</dd>
-</dl>
-
-<h2 id="Méthodes">Méthodes</h2>
-
-<dl>
- <dt>{{jsxref("Number.isNaN()")}}</dt>
- <dd>Cette méthode permet de déterminer si la valeur passée en argument vaut <code>NaN</code>.</dd>
- <dt>{{jsxref("Number.isFinite()")}}</dt>
- <dd>Cette méthode permet de déterminer si la valeur numérique passée en argument est un nombre fini.</dd>
- <dt>{{jsxref("Number.isInteger()")}}</dt>
- <dd>Cette méthode permet de déterminer si la valeur passée en argument est un entier.</dd>
- <dt>{{jsxref("Number.isSafeInteger()")}}</dt>
- <dd>Cette méthode permet de déterminer si la valeur passée en argument peut correctement être représentée comme un entier en JavaScript (savoir si elle est comprise entre <code>-(2^53 - 1)</code> et <code>2^53 - 1</code>).</dd>
- <dt>{{jsxref("Number.toInteger()")}} {{obsolete_inline}}</dt>
- <dd>Cette méthode est utilisée afin d'évaluer et de convertir la valeur passée en argument en entier (ou en l'{{jsxref("Infinity", "infini","",1)}}). Cette méthode a été supprimée.</dd>
- <dt>{{jsxref("Number.parseFloat()", "Number.parseFloat(<var>string</var>)")}}</dt>
- <dd>Cette méthode correspond à la méthode {{jsxref("parseFloat", "parseFloat()")}} de l'objet global.</dd>
- <dt>{{jsxref("Number.parseInt()", "Number.parseInt(<var>string</var>, [<var>radix</var>])")}}</dt>
- <dd>Cette méthode correspond à la méthode {{jsxref("parseInt", "parseInt()")}} de l'objet global.</dd>
-</dl>
-
-<h2 id="Les_instances_de_Number">Les instances de <code>Number</code></h2>
-
-<p>Toutes les instances de <code>Number</code> héritent de {{jsxref("Number.prototype")}}. Il est possible de modifier le prototype du constructeur <code>Number</code> pour affecter toutes les instances de <code>Number</code>.</p>
-
-<h3 id="Méthodes_2">Méthodes</h3>
-
-<div>
-<dl>
- <dt>{{jsxref("Number.prototype.toExponential()" ,"Number.prototype.toExponential(<var>fractionDigits</var>)")}}</dt>
- <dd>Retourne une chaîne représentant le nombre en notation exponentielle.</dd>
- <dt>{{jsxref("Number.prototype.toFixed()", "Number.prototype.toFixed(<var>digits</var>)")}}</dt>
- <dd>Retourne une chaîne représentant le nombre avec la notation virgule fixe.</dd>
- <dt>{{jsxref("Number.prototype.toLocaleString()", "Number.prototype.toLocaleString([<var>locales</var> [, <var>options</var>]])")}}</dt>
- <dd>Retourne une chaîne avec une représentation sensible à la langue de ce nombre. Surcharge la méthode {{jsxref("Object.prototype.toLocaleString()")}}.</dd>
- <dt>{{jsxref("Number.prototype.toPrecision()", "Number.prototype.toPrecision(<var>precision</var>)")}}</dt>
- <dd>Retourne une chaîne représentant le nombre avec une précision donnée en notation virgule fixe ou exponentielle.</dd>
- <dt>{{jsxref("Number.prototype.toString()", "Number.prototype.toString([<var>radix</var>])")}}</dt>
- <dd>Retourne une chaîne représentant le nombre dans une base numérique (radix) donnée. Surcharge la méthode {{jsxref("Object.prototype.toString()")}}.</dd>
- <dt>{{jsxref("Number.prototype.valueOf()")}}</dt>
- <dd>Retourne la valeur primitive de l'objet spécifié. Surcharge la méthode {{jsxref("Object.prototype.valueOf()")}}.</dd>
-</dl>
-</div>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Utiliser_lobjet_Number_pour_affecter_des_valeurs_numériques_à_des_variables">Utiliser l'objet <code>Number</code> pour affecter des valeurs numériques à des variables</h3>
-
-<p>Dans l'exemple suivant, on utilise les propriétés de l'objet <code>Number</code> pour affecter des valeurs à des variables numériques :</p>
-
-<pre class="brush: js notranslate">var plusGrandNombre = Number.MAX_VALUE;
-var plusPetitNombre = Number.MIN_VALUE;
-var infini = Number.POSITIVE_INFINITY;
-var infiniNégatif = Number.NEGATIVE_INFINITY;
-var nonNumérique = Number.NaN;
-</pre>
-
-<h3 id="Intervalle_entier_pour_Number">Intervalle entier pour <code>Number</code></h3>
-
-<p>Dans l'exemple suivant, on illustre les valeurs numériques maximales et minimales (exclues) qu'on peut représenter avec un nombre en JavaScript (pour plus de détails, <a href="https://tc39.github.io/ecma262/#sec-ecmascript-language-types-number-type">voir le chapitre 6.1.6 du standard ECMAScript</a>) :</p>
-
-<pre class="brush: js notranslate">var biggestInt = 9007199254740992; //Number.MAX_SAFE_INTEGER+1 (2^53-1)
-var smallestInt = -9007199254740992; //Number.MIN_SAFE_INTEGER-1 -(2^53-1)
-</pre>
-
-<p>Lorsqu'on analyse et convertit des données JSON, les valeurs en dehors de cet intervalle peuvent entraîner des erreurs ou des corruptions de valeurs lors de leurs conversions. Selon les objets qu'on souhaite représenter, on peut utiliser {{jsxref("String")}} dans certains cas pour représenter certaines valeurs.</p>
-
-<h3 id="Utiliser_Number_pour_convertir_un_objet_Date">Utiliser <code>Number</code> pour convertir un objet <code>Date</code></h3>
-
-<p>Dans l'exemple suivant, on convertit un objet {{jsxref("Date")}} en une valeur numérique grâce à la fonction <code>Number</code> :</p>
-
-<pre class="brush: js notranslate">var d = new Date('December 17, 1995 03:24:00');
-console.log(Number(d));
-</pre>
-
-<p>Ceci affichera "819167040000".</p>
-
-<h3 id="Convertir_une_chaîne_représentant_une_valeur_numérique_en_un_nombre">Convertir une chaîne représentant une valeur numérique en un nombre</h3>
-
-<pre class="brush: js notranslate">Number("123");       // 123
-Number("12.3");      // 12.3
-Number("12.00");     // 12
-Number("123e-1");    // 12.3
-Number("");          // 0
-Number("0x11");      // 17
-Number("0b11");      // 3
-Number("0o11");      // 9
-Number("toto");      // NaN
-Number("100a");      // NaN
-Number("-Infinity";) // -Infinity
-</pre>
-
-<div class="note">
-<p><strong>Note :</strong> On pourra également convertir <code>null</code> en <code>0</code> grâce à <code>Number</code> : <code>Number(null)</code> donnera <code>0</code>.</p>
-</div>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES1')}}</td>
-   <td>{{Spec2('ES1')}}</td>
-   <td>Définition initiale. Implémentée avec JavaScript 1.1.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-15.7', 'Number')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-number-objects', 'Number')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td>Ajout des méthodes et propriétés suivantes : ({{jsxref("Number.EPSILON", "EPSILON")}}, {{jsxref("Number.isFinite", "isFinite")}}, {{jsxref("Number.isInteger", "isInteger")}}, {{jsxref("Number.isNaN", "isNaN")}}, {{jsxref("Number.parseFloat", "parseFloat")}}, {{jsxref("Number.parseInt", "parseInt")}})</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-number-objects', 'Number')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Number")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("NaN")}}</li>
- <li>L'objet global {{jsxref("Math")}}</li>
- <li><a href="/fr/docs/Web/JavaScript/Structures_de_données#Le_type_nombre">Les types de données en JavaScript</a></li>
- <li><a href="https://medium.com/@maximus.koretskyi/javascripts-number-type-8d59199db1b6#.9whwe88tz">Un billet sur le type <code>Number</code> (en anglais)</a></li>
- <li>Représenter de grands entiers avec une précision arbitraire : {{jsxref("BigInt")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/number/index.md b/files/fr/web/javascript/reference/global_objects/number/index.md
new file mode 100644
index 0000000000..67e0253224
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/number/index.md
@@ -0,0 +1,167 @@
+---
+title: Number
+slug: Web/JavaScript/Reference/Global_Objects/Number
+tags:
+  - JavaScript
+  - Number
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Number
+original_slug: Web/JavaScript/Reference/Objets_globaux/Number
+---
+{{JSRef}}
+
+L'objet **`Number`** est une enveloppe objet (_wrapper_) autour du [type primitif numérique](/fr/docs/Web/JavaScript/Structures_de_données#Le_type_nombre). Autrement dit, il est utilisé pour manipuler les nombres comme des objets. Pour créer un objet `Number`, on utilise le constructeur `Number()`.
+
+Le type JavaScript `Number` utilise [une représentation binaire à précision double sur 64 bits telle que décrite par le standard IEEE 754](https://fr.wikipedia.org/wiki/IEEE_754). Les implémentations plus récentes offrent un nouveau type : {{jsxref("BigInt")}} qui permet de représenter des entiers avec une précision arbitraire.
+
+## Syntaxe
+
+    new Number(valeur);
+    var a = new Number('123'); // a === 123 donnera false
+    var b = Number('123'); // b === 123 donnera true
+    a instanceof Number; // donnera true
+    b instanceof Number; // donnera false
+
+### Paramètres
+
+- `valeur`
+  - : La valeur numérique pour l'objet qu'on souhaite créer.
+
+## Description
+
+L'objet `Number` est principalement utilisé dans les cas de figure suivants :
+
+- Si l'argument ne peut pas être converti en un nombre, il renverra {{jsxref("NaN")}}.
+- Dans un contexte de fonction simple (quand il n'est pas utilisé comme un constructeur avec l'opérateur {{jsxref("Opérateurs/L_opérateur_new", "new")}}), `Number` peut être utilisé afin d'effectuer des conversions.
+
+## Propriétés
+
+- {{jsxref("Number.EPSILON")}}
+  - : Le plus petit intervalle entre deux valeurs qu'il est possible de représenter en JavaScript.
+- {{jsxref("Number.MAX_SAFE_INTEGER")}}
+  - : La valeur entière maximale qu'on peut représenter en JavaScript (`2^53 - 1`).
+- {{jsxref("Number.MAX_VALUE")}}
+  - : La valeur numérique maximale qu'on peut représenter en JavaScript.
+- {{jsxref("Number.MIN_SAFE_INTEGER")}}
+  - : La valeur entière minimale qu'on peut représenter en JavaScript (`-(2^53 - 1)`).
+- {{jsxref("Number.MIN_VALUE")}}
+  - : La plus petite valeur qu'on peut représenter en JavaScript, c'est-à-dire le plus petit nombre positif (le nombre le plus près de zéro qui n'est pas égal à zéro et qu'on peut représenter en JavaScript).
+- {{jsxref("Number.NaN")}}
+  - : Une valeur spéciale pour représenter les valeurs non-numériques (**NaN** correspond à « **\*n**ot **a** **n**umber\* » en anglais, qui signifie « n'est pas un nombre »).
+- {{jsxref("Number.NEGATIVE_INFINITY")}}
+  - : Une valeur spéciale pour représenter l'infini négatif.
+- {{jsxref("Number.POSITIVE_INFINITY")}}
+  - : Une valeur spéciale pour représenter l'infini (positif).
+- {{jsxref("Number.prototype")}}
+  - : Cet objet permet d'ajouter des propriétés aux instances de `Number`.
+
+## Méthodes
+
+- {{jsxref("Number.isNaN()")}}
+  - : Cette méthode permet de déterminer si la valeur passée en argument vaut `NaN`.
+- {{jsxref("Number.isFinite()")}}
+  - : Cette méthode permet de déterminer si la valeur numérique passée en argument est un nombre fini.
+- {{jsxref("Number.isInteger()")}}
+  - : Cette méthode permet de déterminer si la valeur passée en argument est un entier.
+- {{jsxref("Number.isSafeInteger()")}}
+  - : Cette méthode permet de déterminer si la valeur passée en argument peut correctement être représentée comme un entier en JavaScript (savoir si elle est comprise entre `-(2^53 - 1)` et `2^53 - 1`).
+- {{jsxref("Number.toInteger()")}} {{obsolete_inline}}
+  - : Cette méthode est utilisée afin d'évaluer et de convertir la valeur passée en argument en entier (ou en l'{{jsxref("Infinity", "infini","",1)}}). Cette méthode a été supprimée.
+- {{jsxref("Number.parseFloat()", "Number.parseFloat(<var>string</var>)")}}
+  - : Cette méthode correspond à la méthode {{jsxref("parseFloat", "parseFloat()")}} de l'objet global.
+- {{jsxref("Number.parseInt()", "Number.parseInt(<var>string</var>, [<var>radix</var>])")}}
+  - : Cette méthode correspond à la méthode {{jsxref("parseInt", "parseInt()")}} de l'objet global.
+
+## Les instances de `Number`
+
+Toutes les instances de `Number` héritent de {{jsxref("Number.prototype")}}. Il est possible de modifier le prototype du constructeur `Number` pour affecter toutes les instances de `Number`.
+
+### Méthodes
+
+- {{jsxref("Number.prototype.toExponential()" ,"Number.prototype.toExponential(<var>fractionDigits</var>)")}}
+  - : Retourne une chaîne représentant le nombre en notation exponentielle.
+- {{jsxref("Number.prototype.toFixed()", "Number.prototype.toFixed(<var>digits</var>)")}}
+  - : Retourne une chaîne représentant le nombre avec la notation virgule fixe.
+- {{jsxref("Number.prototype.toLocaleString()", "Number.prototype.toLocaleString([<var>locales</var> [, <var>options</var>]])")}}
+  - : Retourne une chaîne avec une représentation sensible à la langue de ce nombre. Surcharge la méthode {{jsxref("Object.prototype.toLocaleString()")}}.
+- {{jsxref("Number.prototype.toPrecision()", "Number.prototype.toPrecision(<var>precision</var>)")}}
+  - : Retourne une chaîne représentant le nombre avec une précision donnée en notation virgule fixe ou exponentielle.
+- {{jsxref("Number.prototype.toString()", "Number.prototype.toString([<var>radix</var>])")}}
+  - : Retourne une chaîne représentant le nombre dans une base numérique (radix) donnée. Surcharge la méthode {{jsxref("Object.prototype.toString()")}}.
+- {{jsxref("Number.prototype.valueOf()")}}
+  - : Retourne la valeur primitive de l'objet spécifié. Surcharge la méthode {{jsxref("Object.prototype.valueOf()")}}.
+
+## Exemples
+
+### Utiliser l'objet `Number` pour affecter des valeurs numériques à des variables
+
+Dans l'exemple suivant, on utilise les propriétés de l'objet `Number` pour affecter des valeurs à des variables numériques :
+
+```js
+var plusGrandNombre = Number.MAX_VALUE;
+var plusPetitNombre = Number.MIN_VALUE;
+var infini = Number.POSITIVE_INFINITY;
+var infiniNégatif = Number.NEGATIVE_INFINITY;
+var nonNumérique = Number.NaN;
+```
+
+### Intervalle entier pour `Number`
+
+Dans l'exemple suivant, on illustre les valeurs numériques maximales et minimales (exclues) qu'on peut représenter avec un nombre en JavaScript (pour plus de détails, [voir le chapitre 6.1.6 du standard ECMAScript](https://tc39.github.io/ecma262/#sec-ecmascript-language-types-number-type)) :
+
+```js
+var biggestInt = 9007199254740992; //Number.MAX_SAFE_INTEGER+1 (2^53-1)
+var smallestInt = -9007199254740992; //Number.MIN_SAFE_INTEGER-1 -(2^53-1)
+```
+
+Lorsqu'on analyse et convertit des données JSON, les valeurs en dehors de cet intervalle peuvent entraîner des erreurs ou des corruptions de valeurs lors de leurs conversions. Selon les objets qu'on souhaite représenter, on peut utiliser {{jsxref("String")}} dans certains cas pour représenter certaines valeurs.
+
+### Utiliser `Number` pour convertir un objet `Date`
+
+Dans l'exemple suivant, on convertit un objet {{jsxref("Date")}} en une valeur numérique grâce à la fonction `Number` :
+
+```js
+var d = new Date('December 17, 1995 03:24:00');
+console.log(Number(d));
+```
+
+Ceci affichera "819167040000".
+
+### Convertir une chaîne représentant une valeur numérique en un nombre
+
+```js
+Number("123");       // 123
+Number("12.3");      // 12.3
+Number("12.00");     // 12
+Number("123e-1");    // 12.3
+Number("");          // 0
+Number("0x11");      // 17
+Number("0b11");      // 3
+Number("0o11");      // 9
+Number("toto");      // NaN
+Number("100a");      // NaN
+Number("-Infinity";) // -Infinity
+```
+
+> **Note :** On pourra également convertir `null` en `0` grâce à `Number` : `Number(null)` donnera `0`.
+
+## Spécifications
+
+| Spécification                                                                | État                         | Commentaires                                                                                                                                                                                                                                                                                                                                                                                      |
+| ---------------------------------------------------------------------------- | ---------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| {{SpecName('ES1')}}                                                     | {{Spec2('ES1')}}         | Définition initiale. Implémentée avec JavaScript 1.1.                                                                                                                                                                                                                                                                                                                                             |
+| {{SpecName('ES5.1', '#sec-15.7', 'Number')}}                 | {{Spec2('ES5.1')}}     |                                                                                                                                                                                                                                                                                                                                                                                                   |
+| {{SpecName('ES6', '#sec-number-objects', 'Number')}}         | {{Spec2('ES6')}}         | Ajout des méthodes et propriétés suivantes : ({{jsxref("Number.EPSILON", "EPSILON")}}, {{jsxref("Number.isFinite", "isFinite")}}, {{jsxref("Number.isInteger", "isInteger")}}, {{jsxref("Number.isNaN", "isNaN")}}, {{jsxref("Number.parseFloat", "parseFloat")}}, {{jsxref("Number.parseInt", "parseInt")}}) |
+| {{SpecName('ESDraft', '#sec-number-objects', 'Number')}} | {{Spec2('ESDraft')}} |                                                                                                                                                                                                                                                                                                                                                                                                   |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Number")}}
+
+## Voir aussi
+
+- {{jsxref("NaN")}}
+- L'objet global {{jsxref("Math")}}
+- [Les types de données en JavaScript](/fr/docs/Web/JavaScript/Structures_de_données#Le_type_nombre)
+- [Un billet sur le type `Number` (en anglais)](https://medium.com/@maximus.koretskyi/javascripts-number-type-8d59199db1b6#.9whwe88tz)
+- Représenter de grands entiers avec une précision arbitraire : {{jsxref("BigInt")}}
diff --git a/files/fr/web/javascript/reference/global_objects/number/isfinite/index.html b/files/fr/web/javascript/reference/global_objects/number/isfinite/index.html
deleted file mode 100644
index 9cf0331fab..0000000000
--- a/files/fr/web/javascript/reference/global_objects/number/isfinite/index.html
+++ /dev/null
@@ -1,112 +0,0 @@
----
-title: Number.isFinite()
-slug: Web/JavaScript/Reference/Global_Objects/Number/isFinite
-tags:
-  - ECMAScript6
-  - JavaScript
-  - Méthode
-  - Number
-  - Reference
-  - polyfill
-translation_of: Web/JavaScript/Reference/Global_Objects/Number/isFinite
-original_slug: Web/JavaScript/Reference/Objets_globaux/Number/isFinite
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <strong><code>Number.isFinite()</code></strong> permet de déterminer si la valeur fournie est un nombre fini.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/number-isfinite.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox notranslate">Number.isFinite(valeurÀTester);</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>valeurÀTester</code></dt>
- <dd>La valeur dont on souhaite savoir si elle est finie.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Un booléen indiquant si la valeur passée en argument est un nombre fini.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>Par rapport à la fonction de l'objet global {{jsxref("isFinite","isFinite()")}} qui convertit l'argument donné en un nombre, la fonction <code>Number.isFinite </code>ne convertit pas l'argument et ne renvoie pas <code>true</code>.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<pre class="brush:js; notranslate">Number.isFinite(Infinity);  // false
-Number.isFinite(NaN);       // false
-Number.isFinite(-Infinity); // false
-
-Number.isFinite(0);         // true
-Number.isFinite(2e64);      // true
-
-Number.isFinite("0");       // false, ce qui aurait
-                            // renvoyé true avec isFinite("0")
-
-Number.isFinite(null);      // false, ce qui aurait
-                            // renvoyé true avc isFinite(null)
-</pre>
-
-<h2 id="Prothèse_démulation_polyfill">Prothèse d'émulation (<em>polyfill</em>)</h2>
-
-<pre class="brush:js; notranslate">// Number.isFinite polyfill
-// http://people.mozilla.org/~jorendorff/es6-draft.html#sec-number.isfinite
-if (typeof Number.isFinite !== 'function') {
-    Number.isFinite = function isFinite(value) {
-        // 1. Si Type(number) n'est pas Number, on renvoie false.
-        if (typeof value !== 'number') {
-            return false;
-        }
-        // 2. Si le nombre est NaN, +∞, ou −∞, on renvoie false.
-        if (value !== value || value === Infinity || value === -Infinity) {
-            return false;
-        }
-        // 3. Sinon on renvoie true.
-        return true;
-    };
-}
-</pre>
-
-<p>Deuxième version plus concise qui utilise la méthode globale <code>isFinite</code></p>
-
-<pre class="brush: js notranslate">if (Number.isFinite === undefined) Number.isFinite = function(value) {
-    return typeof value === "number" &amp;&amp; isFinite(value);
-}</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-number.isfinite', 'Number.isInteger')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-number.isfinite', 'Number.isInteger')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Number.isFinite")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>L'objet {{jsxref("Number")}} auquel appartient cette méthode</li>
- <li>La méthode {{jsxref("isFinite", "isFinite()")}} de l'objet global</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/number/isfinite/index.md b/files/fr/web/javascript/reference/global_objects/number/isfinite/index.md
new file mode 100644
index 0000000000..bb0af546ce
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/number/isfinite/index.md
@@ -0,0 +1,97 @@
+---
+title: Number.isFinite()
+slug: Web/JavaScript/Reference/Global_Objects/Number/isFinite
+tags:
+  - ECMAScript6
+  - JavaScript
+  - Méthode
+  - Number
+  - Reference
+  - polyfill
+translation_of: Web/JavaScript/Reference/Global_Objects/Number/isFinite
+original_slug: Web/JavaScript/Reference/Objets_globaux/Number/isFinite
+---
+{{JSRef}}
+
+La méthode **`Number.isFinite()`** permet de déterminer si la valeur fournie est un nombre fini.
+
+{{EmbedInteractiveExample("pages/js/number-isfinite.html")}}
+
+## Syntaxe
+
+    Number.isFinite(valeurÀTester);
+
+### Paramètres
+
+- `valeurÀTester`
+  - : La valeur dont on souhaite savoir si elle est finie.
+
+### Valeur de retour
+
+Un booléen indiquant si la valeur passée en argument est un nombre fini.
+
+## Description
+
+Par rapport à la fonction de l'objet global {{jsxref("isFinite","isFinite()")}} qui convertit l'argument donné en un nombre, la fonction `Number.isFinite `ne convertit pas l'argument et ne renvoie pas `true`.
+
+## Exemples
+
+```js
+Number.isFinite(Infinity);  // false
+Number.isFinite(NaN);       // false
+Number.isFinite(-Infinity); // false
+
+Number.isFinite(0);         // true
+Number.isFinite(2e64);      // true
+
+Number.isFinite("0");       // false, ce qui aurait
+                            // renvoyé true avec isFinite("0")
+
+Number.isFinite(null);      // false, ce qui aurait
+                            // renvoyé true avc isFinite(null)
+```
+
+## Prothèse d'émulation (_polyfill_)
+
+```js
+// Number.isFinite polyfill
+// http://people.mozilla.org/~jorendorff/es6-draft.html#sec-number.isfinite
+if (typeof Number.isFinite !== 'function') {
+    Number.isFinite = function isFinite(value) {
+        // 1. Si Type(number) n'est pas Number, on renvoie false.
+        if (typeof value !== 'number') {
+            return false;
+        }
+        // 2. Si le nombre est NaN, +∞, ou −∞, on renvoie false.
+        if (value !== value || value === Infinity || value === -Infinity) {
+            return false;
+        }
+        // 3. Sinon on renvoie true.
+        return true;
+    };
+}
+```
+
+Deuxième version plus concise qui utilise la méthode globale `isFinite`
+
+```js
+if (Number.isFinite === undefined) Number.isFinite = function(value) {
+    return typeof value === "number" && isFinite(value);
+}
+```
+
+## Spécifications
+
+| Spécification                                                                            | État                         | Commentaires         |
+| ---------------------------------------------------------------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName('ES6', '#sec-number.isfinite', 'Number.isInteger')}}     | {{Spec2('ES6')}}         | Définition initiale. |
+| {{SpecName('ESDraft', '#sec-number.isfinite', 'Number.isInteger')}} | {{Spec2('ESDraft')}} |                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Number.isFinite")}}
+
+## Voir aussi
+
+- L'objet {{jsxref("Number")}} auquel appartient cette méthode
+- La méthode {{jsxref("isFinite", "isFinite()")}} de l'objet global
diff --git a/files/fr/web/javascript/reference/global_objects/number/isinteger/index.html b/files/fr/web/javascript/reference/global_objects/number/isinteger/index.html
deleted file mode 100644
index a6f1f364e5..0000000000
--- a/files/fr/web/javascript/reference/global_objects/number/isinteger/index.html
+++ /dev/null
@@ -1,99 +0,0 @@
----
-title: Number.isInteger()
-slug: Web/JavaScript/Reference/Global_Objects/Number/isInteger
-tags:
-  - JavaScript
-  - Méthode
-  - Number
-  - Reference
-  - polyfill
-translation_of: Web/JavaScript/Reference/Global_Objects/Number/isInteger
-original_slug: Web/JavaScript/Reference/Objets_globaux/Number/isInteger
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <strong><code>Number.isInteger()</code></strong> permet de déterminer si l'argument est un nombre entier.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/number-isinteger.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">Number.isInteger(valeurÀTester)</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code><var>valeurÀTester</var></code></dt>
- <dd>La valeur dont on souhaite savoir si elle est entière ou non.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Un booléen qui indique si la valeur fournie en argument est un entier.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>Si la valeur à tester est un entier, cette méthode renvoie <code>true</code>, <code>false</code> sinon. Si la valeur est {{jsxref("NaN")}} ou l'infini ({{jsxref("Infinity")}}), la méthode renverra <code>false</code>. La méthode renverra également <code>true</code> pour les nombres flottants qui peuvent être représentés comme des entiers.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<pre class="brush: js">Number.isInteger(1);         // true
-Number.isInteger(-100000);   // true
-Number.isInteger(0);         // true
-Number.isInteger(1.000)      // true
-// Number.isInteger(9…9999); // true, même si le nombre dépasse 32 bits
-
-Number.isInteger(0.1);       // false
-Number.isInteger(Math.PI);   // false
-
-Number.isInteger(-Infinity); // false
-Number.isInteger(true);      // false
-Number.isInteger(NaN);       // false
-Number.isInteger("10");      // false
-
-Number.isInteger(5.0);       // true
-Number.isInteger(5.000000000000001);// false
-Number.isInteger(5.0000000000000001); // true
-</pre>
-
-<h2 id="Prothèse_démulation_polyfill">Prothèse d'émulation (<em>polyfill</em>)</h2>
-
-<pre class="brush: js">Number.isInteger = Number.isInteger || function(value) {
-    return typeof value === "number" &amp;&amp;
-           isFinite(value) &amp;&amp;
-           Math.floor(value) === value;
-};</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-number.isinteger', 'Number.isInteger')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-number.isinteger', 'Number.isInteger')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Number.isInteger")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>L'objet global {{jsxref("Number")}} auquel appartient cette méthode.</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/number/isinteger/index.md b/files/fr/web/javascript/reference/global_objects/number/isinteger/index.md
new file mode 100644
index 0000000000..f299694e36
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/number/isinteger/index.md
@@ -0,0 +1,81 @@
+---
+title: Number.isInteger()
+slug: Web/JavaScript/Reference/Global_Objects/Number/isInteger
+tags:
+  - JavaScript
+  - Méthode
+  - Number
+  - Reference
+  - polyfill
+translation_of: Web/JavaScript/Reference/Global_Objects/Number/isInteger
+original_slug: Web/JavaScript/Reference/Objets_globaux/Number/isInteger
+---
+{{JSRef}}
+
+La méthode **`Number.isInteger()`** permet de déterminer si l'argument est un nombre entier.
+
+{{EmbedInteractiveExample("pages/js/number-isinteger.html")}}
+
+## Syntaxe
+
+    Number.isInteger(valeurÀTester)
+
+### Paramètres
+
+- `valeurÀTester`
+  - : La valeur dont on souhaite savoir si elle est entière ou non.
+
+### Valeur de retour
+
+Un booléen qui indique si la valeur fournie en argument est un entier.
+
+## Description
+
+Si la valeur à tester est un entier, cette méthode renvoie `true`, `false` sinon. Si la valeur est {{jsxref("NaN")}} ou l'infini ({{jsxref("Infinity")}}), la méthode renverra `false`. La méthode renverra également `true` pour les nombres flottants qui peuvent être représentés comme des entiers.
+
+## Exemples
+
+```js
+Number.isInteger(1);         // true
+Number.isInteger(-100000);   // true
+Number.isInteger(0);         // true
+Number.isInteger(1.000)      // true
+// Number.isInteger(9…9999); // true, même si le nombre dépasse 32 bits
+
+Number.isInteger(0.1);       // false
+Number.isInteger(Math.PI);   // false
+
+Number.isInteger(-Infinity); // false
+Number.isInteger(true);      // false
+Number.isInteger(NaN);       // false
+Number.isInteger("10");      // false
+
+Number.isInteger(5.0);       // true
+Number.isInteger(5.000000000000001);// false
+Number.isInteger(5.0000000000000001); // true
+```
+
+## Prothèse d'émulation (_polyfill_)
+
+```js
+Number.isInteger = Number.isInteger || function(value) {
+    return typeof value === "number" &&
+           isFinite(value) &&
+           Math.floor(value) === value;
+};
+```
+
+## Spécifications
+
+| Spécification                                                                                | État                         | Commentaires         |
+| -------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName('ES6', '#sec-number.isinteger', 'Number.isInteger')}}         | {{Spec2('ES6')}}         | Définition initiale. |
+| {{SpecName('ESDraft', '#sec-number.isinteger', 'Number.isInteger')}} | {{Spec2('ESDraft')}} |                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Number.isInteger")}}
+
+## Voir aussi
+
+- L'objet global {{jsxref("Number")}} auquel appartient cette méthode.
diff --git a/files/fr/web/javascript/reference/global_objects/number/isnan/index.html b/files/fr/web/javascript/reference/global_objects/number/isnan/index.html
deleted file mode 100644
index 2b7f565807..0000000000
--- a/files/fr/web/javascript/reference/global_objects/number/isnan/index.html
+++ /dev/null
@@ -1,101 +0,0 @@
----
-title: Number.isNaN()
-slug: Web/JavaScript/Reference/Global_Objects/Number/isNaN
-tags:
-  - ECMAScript 2015
-  - JavaScript
-  - Méthode
-  - Number
-  - polyfill
-translation_of: Web/JavaScript/Reference/Global_Objects/Number/isNaN
-original_slug: Web/JavaScript/Reference/Objets_globaux/Number/isNaN
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <strong><code>Number.isNaN()</code></strong> permet de déterminer si la valeur passée en argument est {{jsxref("NaN")}}, avec un type {{jsxref("Number")}}. Cette version est plus robuste que la méthode de l'objet global {{jsxref("isNaN")}}.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/number-isnan.html", "taller")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">Number.isNaN(<var>valeurÀTester</var>)</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code><em>valeurÀTester</em></code></dt>
- <dd>La valeur qu'on souhaite comparer à {{jsxref("NaN")}}.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Un booléen qui indique si la valeur fournie en argument est {{jsxref("NaN")}}.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>Les deux opérateurs d'égalité, {{jsxref("Opérateurs/Opérateurs_de_comparaison", "==", "#.C3.89galit.C3.A9_simple_(.3D.3D)")}} et {{jsxref("Opérateurs/Opérateurs_de_comparaison", "===", "#.C3.89galit.C3.A9_stricte_(.3D.3D.3D)")}}, renvoient <code>false</code> pour vérifier que {{jsxref("NaN")}} <em>est</em> NaN. La fonction <code>Number.isNaN</code> est nécessaire pour distinguer ce cas. Le résultat de cette comparaison sera différent avec les autres méthodes de comparaisons en JavaScript.</p>
-
-<p>En effet, la fonction globale {{jsxref("isNaN")}} convertit l'argument en un nombre.  <code>Number.isNaN</code> ne convertit pas l'argument. Cela signifie qu'on peut passer des valeurs qui, normalement, seraient converties en NaN, mais qui ne sont pas NaN. Cela signifie également que, uniquement lorsque la méthode sera utilisée avec des nombres qui valent <code>NaN</code>, elle renverra <code>true</code>.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<pre class="brush:js;">Number.isNaN(NaN); // true
-Number.isNaN(Number.NaN); // true
-Number.isNaN(0 / 0); // true
-
-// tout le reste renverra : false
-Number.isNaN(undefined);
-Number.isNaN({});
-
-Number.isNaN(true);
-Number.isNaN(null);
-Number.isNaN(37);
-
-Number.isNaN("37");
-Number.isNaN("37.37");
-Number.isNaN("");
-Number.isNaN(" ");
-Number.isNaN("NaN");
-Number.isNaN("blabla"); // ex : cette valeur aurait rendu true avec la méthode isNaN de l'objet global</pre>
-
-<h2 id="Prothèse_d'émulation_(polyfill)">Prothèse d'émulation (<em>polyfill</em>)</h2>
-
-<p>La fonction suivant fonctionne car <code>NaN</code> est la seule valeur JavaScript qui n'est pas égale à elle-même.</p>
-
-<pre class="brush: js">Number.isNaN = Number.isNaN || function(value) {
-    return typeof value === "number" &amp;&amp; isNaN(value);
-}</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-number.isnan', 'Number.isnan')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-number.isnan', 'Number.isnan')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Number.isNaN")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>L'objet {{jsxref("Number")}} auquel appartient cette méthode.</li>
- <li>La méthode {{jsxref("Objets_globaux/Object/is", "Object.is")}} qui permet d'effectuer des comparaisons sur l'égalité de valeur</li>
- <li>La méthode {{jsxref("isNaN")}} de l'objet global</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/number/isnan/index.md b/files/fr/web/javascript/reference/global_objects/number/isnan/index.md
new file mode 100644
index 0000000000..fef4caa264
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/number/isnan/index.md
@@ -0,0 +1,86 @@
+---
+title: Number.isNaN()
+slug: Web/JavaScript/Reference/Global_Objects/Number/isNaN
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Méthode
+  - Number
+  - polyfill
+translation_of: Web/JavaScript/Reference/Global_Objects/Number/isNaN
+original_slug: Web/JavaScript/Reference/Objets_globaux/Number/isNaN
+---
+{{JSRef}}
+
+La méthode **`Number.isNaN()`** permet de déterminer si la valeur passée en argument est {{jsxref("NaN")}}, avec un type {{jsxref("Number")}}. Cette version est plus robuste que la méthode de l'objet global {{jsxref("isNaN")}}.
+
+{{EmbedInteractiveExample("pages/js/number-isnan.html", "taller")}}
+
+## Syntaxe
+
+    Number.isNaN(valeurÀTester)
+
+### Paramètres
+
+- `valeurÀTester`
+  - : La valeur qu'on souhaite comparer à {{jsxref("NaN")}}.
+
+### Valeur de retour
+
+Un booléen qui indique si la valeur fournie en argument est {{jsxref("NaN")}}.
+
+## Description
+
+Les deux opérateurs d'égalité, {{jsxref("Opérateurs/Opérateurs_de_comparaison", "==", "#.C3.89galit.C3.A9_simple_(.3D.3D)")}} et {{jsxref("Opérateurs/Opérateurs_de_comparaison", "===", "#.C3.89galit.C3.A9_stricte_(.3D.3D.3D)")}}, renvoient `false` pour vérifier que {{jsxref("NaN")}} _est_ NaN. La fonction `Number.isNaN` est nécessaire pour distinguer ce cas. Le résultat de cette comparaison sera différent avec les autres méthodes de comparaisons en JavaScript.
+
+En effet, la fonction globale {{jsxref("isNaN")}} convertit l'argument en un nombre.  `Number.isNaN` ne convertit pas l'argument. Cela signifie qu'on peut passer des valeurs qui, normalement, seraient converties en NaN, mais qui ne sont pas NaN. Cela signifie également que, uniquement lorsque la méthode sera utilisée avec des nombres qui valent `NaN`, elle renverra `true`.
+
+## Exemples
+
+```js
+Number.isNaN(NaN); // true
+Number.isNaN(Number.NaN); // true
+Number.isNaN(0 / 0); // true
+
+// tout le reste renverra : false
+Number.isNaN(undefined);
+Number.isNaN({});
+
+Number.isNaN(true);
+Number.isNaN(null);
+Number.isNaN(37);
+
+Number.isNaN("37");
+Number.isNaN("37.37");
+Number.isNaN("");
+Number.isNaN(" ");
+Number.isNaN("NaN");
+Number.isNaN("blabla"); // ex : cette valeur aurait rendu true avec la méthode isNaN de l'objet global
+```
+
+## Prothèse d'émulation (_polyfill_)
+
+La fonction suivant fonctionne car `NaN` est la seule valeur JavaScript qui n'est pas égale à elle-même.
+
+```js
+Number.isNaN = Number.isNaN || function(value) {
+    return typeof value === "number" && isNaN(value);
+}
+```
+
+## Spécifications
+
+| Spécification                                                                    | État                         | Commentaires         |
+| -------------------------------------------------------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName('ES2015', '#sec-number.isnan', 'Number.isnan')}} | {{Spec2('ES2015')}}     | Définition initiale. |
+| {{SpecName('ESDraft', '#sec-number.isnan', 'Number.isnan')}} | {{Spec2('ESDraft')}} |                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Number.isNaN")}}
+
+## Voir aussi
+
+- L'objet {{jsxref("Number")}} auquel appartient cette méthode.
+- La méthode {{jsxref("Objets_globaux/Object/is", "Object.is")}} qui permet d'effectuer des comparaisons sur l'égalité de valeur
+- La méthode {{jsxref("isNaN")}} de l'objet global
diff --git a/files/fr/web/javascript/reference/global_objects/number/issafeinteger/index.html b/files/fr/web/javascript/reference/global_objects/number/issafeinteger/index.html
deleted file mode 100644
index c992339e23..0000000000
--- a/files/fr/web/javascript/reference/global_objects/number/issafeinteger/index.html
+++ /dev/null
@@ -1,99 +0,0 @@
----
-title: Number.isSafeInteger()
-slug: Web/JavaScript/Reference/Global_Objects/Number/isSafeInteger
-tags:
-  - ECMAScript 2015
-  - JavaScript
-  - Méthode
-  - Number
-  - Reference
-  - polyfill
-translation_of: Web/JavaScript/Reference/Global_Objects/Number/isSafeInteger
-original_slug: Web/JavaScript/Reference/Objets_globaux/Number/isSafeInteger
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <strong><code>Number.isSafeInteger()</code></strong> permet de déterminer si la valeur, passée en argument, est un entier représentable correctement en JavaScript (c'est-à-dire un nombre compris entre -(2^53-1) et 2^53-1).</p>
-
-<div>{{EmbedInteractiveExample("pages/js/number-issafeinteger.html")}}</div>
-
-
-
-<div class="blockIndicator note">
-<p><strong>Note :</strong> Pour représenter des entiers qui ne sont pas compris dans cet intervalle, on pourra utiliser le type {{jsxref("BigInt")}}.</p>
-</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">Number.isSafeInteger(valeurÀTester)</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code><var>valeurÀTester</var></code></dt>
- <dd>La valeur dont on souhaite savoir si elle représente un entier représentable correctement en une valeur non signée sur 32 bits. (JavaScript utilise <a class="external external-icon" href="https://en.wikipedia.org/wiki/Double_precision_floating-point_format">les nombres au format de virgule flottante à double précision</a> comme spécifié dans <a class="external external-icon" href="https://fr.wikipedia.org/wiki/IEEE_754">IEEE 754</a> et ne peut représenter avec certitude un entier qu'entre <code>-(2^53-1)</code> et <code>2^53-1</code> (c'est-à-dire ± <code>9007199254740991</code>).</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Un booléen qui indique si la valeur fournie en argument est un entier représentable correctement en JavaScript.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>Un entier correctement représentable en JavaScript :</p>
-
-<ul>
- <li>peut exactement être représenté avec un nombre à précision double selon IEEE-754</li>
- <li>la réprésentation IEEE-754 du nombre ne permet pas de l'arrondir à un autre entier pouvant être représenté avec le format décrit par IEEE-754.</li>
-</ul>
-
-<p>Ainsi, par exemple, <code>2^53 - 1</code> peut être représenté correctement, aucun autre entier ne peut être arrondi en cette valeur selon IEEE-754. En revanche, <code>2^53</code> ne peut pas être représenté correctement car <code>2^53 + 1</code> sera arrondi en <code>2^53</code> selon les règles IEEE-754 (arrondi à l'entier le plus proche).</p>
-
-<p>L'intervalle des entiers qui peuvent être correctement représentés est <code>[-(2^53 - 1),2^53 - 1</code> ].</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<pre class="brush:js">Number.isSafeInteger(3);                    // true
-Number.isSafeInteger(Math.pow(2, 53))       // false
-Number.isSafeInteger(Math.pow(2, 53) - 1)   // true
-Number.isSafeInteger(NaN);                  // false
-Number.isSafeInteger(Infinity);             // false
-Number.isSafeInteger("3");                  // false
-Number.isSafeInteger(3.1);                  // false
-Number.isSafeInteger(3.0);                  // true
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-number.issafeinteger', 'Number.isSafeInteger')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-number.issafeinteger', 'Number.isSafeInteger')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Number.isSafeInteger")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>L'objet {{jsxref("Number")}} auquel appartient cette méthode</li>
- <li>{{jsxref("Number.MIN_SAFE_INTEGER")}}</li>
- <li>{{jsxref("Number.MAX_SAFE_INTEGER")}}</li>
- <li>{{jsxref("BigInt")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/number/issafeinteger/index.md b/files/fr/web/javascript/reference/global_objects/number/issafeinteger/index.md
new file mode 100644
index 0000000000..4958589300
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/number/issafeinteger/index.md
@@ -0,0 +1,75 @@
+---
+title: Number.isSafeInteger()
+slug: Web/JavaScript/Reference/Global_Objects/Number/isSafeInteger
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Méthode
+  - Number
+  - Reference
+  - polyfill
+translation_of: Web/JavaScript/Reference/Global_Objects/Number/isSafeInteger
+original_slug: Web/JavaScript/Reference/Objets_globaux/Number/isSafeInteger
+---
+{{JSRef}}
+
+La méthode **`Number.isSafeInteger()`** permet de déterminer si la valeur, passée en argument, est un entier représentable correctement en JavaScript (c'est-à-dire un nombre compris entre -(2^53-1) et 2^53-1).
+
+{{EmbedInteractiveExample("pages/js/number-issafeinteger.html")}}
+
+> **Note :** Pour représenter des entiers qui ne sont pas compris dans cet intervalle, on pourra utiliser le type {{jsxref("BigInt")}}.
+
+## Syntaxe
+
+    Number.isSafeInteger(valeurÀTester)
+
+### Paramètres
+
+- `valeurÀTester`
+  - : La valeur dont on souhaite savoir si elle représente un entier représentable correctement en une valeur non signée sur 32 bits. (JavaScript utilise [les nombres au format de virgule flottante à double précision](https://en.wikipedia.org/wiki/Double_precision_floating-point_format) comme spécifié dans [IEEE 754](https://fr.wikipedia.org/wiki/IEEE_754) et ne peut représenter avec certitude un entier qu'entre `-(2^53-1)` et `2^53-1` (c'est-à-dire ± `9007199254740991`).
+
+### Valeur de retour
+
+Un booléen qui indique si la valeur fournie en argument est un entier représentable correctement en JavaScript.
+
+## Description
+
+Un entier correctement représentable en JavaScript :
+
+- peut exactement être représenté avec un nombre à précision double selon IEEE-754
+- la réprésentation IEEE-754 du nombre ne permet pas de l'arrondir à un autre entier pouvant être représenté avec le format décrit par IEEE-754.
+
+Ainsi, par exemple, `2^53 - 1` peut être représenté correctement, aucun autre entier ne peut être arrondi en cette valeur selon IEEE-754. En revanche, `2^53` ne peut pas être représenté correctement car `2^53 + 1` sera arrondi en `2^53` selon les règles IEEE-754 (arrondi à l'entier le plus proche).
+
+L'intervalle des entiers qui peuvent être correctement représentés est `[-(2^53 - 1),2^53 - 1` ].
+
+## Exemples
+
+```js
+Number.isSafeInteger(3);                    // true
+Number.isSafeInteger(Math.pow(2, 53))       // false
+Number.isSafeInteger(Math.pow(2, 53) - 1)   // true
+Number.isSafeInteger(NaN);                  // false
+Number.isSafeInteger(Infinity);             // false
+Number.isSafeInteger("3");                  // false
+Number.isSafeInteger(3.1);                  // false
+Number.isSafeInteger(3.0);                  // true
+```
+
+## Spécifications
+
+| Spécification                                                                                        | État                         | Commentaires         |
+| ---------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName('ES2015', '#sec-number.issafeinteger', 'Number.isSafeInteger')}} | {{Spec2('ES2015')}}     | Définition initiale. |
+| {{SpecName('ESDraft', '#sec-number.issafeinteger', 'Number.isSafeInteger')}} | {{Spec2('ESDraft')}} |                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Number.isSafeInteger")}}
+
+## Voir aussi
+
+- L'objet {{jsxref("Number")}} auquel appartient cette méthode
+- {{jsxref("Number.MIN_SAFE_INTEGER")}}
+- {{jsxref("Number.MAX_SAFE_INTEGER")}}
+- {{jsxref("BigInt")}}
diff --git a/files/fr/web/javascript/reference/global_objects/number/max_safe_integer/index.html b/files/fr/web/javascript/reference/global_objects/number/max_safe_integer/index.html
deleted file mode 100644
index 9b389e3531..0000000000
--- a/files/fr/web/javascript/reference/global_objects/number/max_safe_integer/index.html
+++ /dev/null
@@ -1,73 +0,0 @@
----
-title: Number.MAX_SAFE_INTEGER
-slug: Web/JavaScript/Reference/Global_Objects/Number/MAX_SAFE_INTEGER
-tags:
-  - ECMAScript 2015
-  - JavaScript
-  - Number
-  - Propriété
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Number/MAX_SAFE_INTEGER
-original_slug: Web/JavaScript/Reference/Objets_globaux/Number/MAX_SAFE_INTEGER
----
-<div>{{JSRef}}</div>
-
-<p>La constante <code><strong>Number.MAX_SAFE_INTEGER </strong></code>représente la valeur (sûre) maximale d’un nombre entier en JavaScript (2^53 -1).</p>
-
-<div class="blockIndicator note">
-<p><strong>Note :</strong> Pour représenter des entiers supérieurs à cette valeur, on pourra utiliser le type {{jsxref("BigInt")}}.</p>
-</div>
-
-<div>{{EmbedInteractiveExample("pages/js/number-maxsafeinteger.html")}}</div>
-
-
-
-<p>{{js_property_attributes(0,0,0)}}</p>
-
-<h2 id="Description">Description</h2>
-
-<p>La constante <code>MAX_SAFE_INTEGER</code> a une valeur de <code>9007199254740991</code>. Cette valeur s'explique par le fait que JavaScript utilise <a href="http://en.wikipedia.org/wiki/Double_precision_floating-point_format">les nombres au format de virgule flottante à double précision</a> comme spécifié dans <a href="http://fr.wikipedia.org/wiki/IEEE_754">IEEE 754</a> et ne peut représenter avec certitude qu’un nombre entre <code>-(2^53-1)</code> et <code>2^53 -1</code>.</p>
-
-<p>Dans ce contexte, « sûr » fait référence à la capacité à représenter exactement les entiers et à les comparer entre eux. Par exemple, <code>Number.MAX_SAFE_INTEGER + 1 === Number.MAX_SAFE_INTEGER + 2</code> vaudra <code>true</code> ce qui est mathématiquement incorrect. Pour plus d'informations, voir également {{jsxref("Number.isSafeInteger()")}}.</p>
-
-<p><code>MAX_SAFE_INTEGER</code> est une propriété statique de {{jsxref("Number")}}, elle doit toujours être utilisée comme <code>Number.MAX_SAFE_INTEGER</code> et non pas comme la propriété d'un objet <code>Number</code> qui aurait été instancié.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<pre class="brush: js">Number.MAX_SAFE_INTEGER // 9007199254740991
-Math.pow(2, 53) -1      // 9007199254740991
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-number.max_safe_integer', 'Number.MAX_SAFE_INTEGER')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td>Définition initiale</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-number.max_safe_integer', 'Number.MAX_SAFE_INTEGER')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Number.MAX_SAFE_INTEGER")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Number.MIN_SAFE_INTEGER")}}</li>
- <li>{{jsxref("Number.isSafeInteger()")}}</li>
- <li>{{jsxref("BigInt")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/number/max_safe_integer/index.md b/files/fr/web/javascript/reference/global_objects/number/max_safe_integer/index.md
new file mode 100644
index 0000000000..a38f9c3695
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/number/max_safe_integer/index.md
@@ -0,0 +1,53 @@
+---
+title: Number.MAX_SAFE_INTEGER
+slug: Web/JavaScript/Reference/Global_Objects/Number/MAX_SAFE_INTEGER
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Number
+  - Propriété
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Number/MAX_SAFE_INTEGER
+original_slug: Web/JavaScript/Reference/Objets_globaux/Number/MAX_SAFE_INTEGER
+---
+{{JSRef}}
+
+La constante **`Number.MAX_SAFE_INTEGER `**représente la valeur (sûre) maximale d’un nombre entier en JavaScript (2^53 -1).
+
+> **Note :** Pour représenter des entiers supérieurs à cette valeur, on pourra utiliser le type {{jsxref("BigInt")}}.
+
+{{EmbedInteractiveExample("pages/js/number-maxsafeinteger.html")}}
+
+{{js_property_attributes(0,0,0)}}
+
+## Description
+
+La constante `MAX_SAFE_INTEGER` a une valeur de `9007199254740991`. Cette valeur s'explique par le fait que JavaScript utilise [les nombres au format de virgule flottante à double précision](http://en.wikipedia.org/wiki/Double_precision_floating-point_format) comme spécifié dans [IEEE 754](http://fr.wikipedia.org/wiki/IEEE_754) et ne peut représenter avec certitude qu’un nombre entre `-(2^53-1)` et `2^53 -1`.
+
+Dans ce contexte, « sûr » fait référence à la capacité à représenter exactement les entiers et à les comparer entre eux. Par exemple, `Number.MAX_SAFE_INTEGER + 1 === Number.MAX_SAFE_INTEGER + 2` vaudra `true` ce qui est mathématiquement incorrect. Pour plus d'informations, voir également {{jsxref("Number.isSafeInteger()")}}.
+
+`MAX_SAFE_INTEGER` est une propriété statique de {{jsxref("Number")}}, elle doit toujours être utilisée comme `Number.MAX_SAFE_INTEGER` et non pas comme la propriété d'un objet `Number` qui aurait été instancié.
+
+## Exemples
+
+```js
+Number.MAX_SAFE_INTEGER // 9007199254740991
+Math.pow(2, 53) -1      // 9007199254740991
+```
+
+## Spécifications
+
+| Spécification                                                                                                | État                         | Commentaires        |
+| ------------------------------------------------------------------------------------------------------------ | ---------------------------- | ------------------- |
+| {{SpecName('ES2015', '#sec-number.max_safe_integer', 'Number.MAX_SAFE_INTEGER')}} | {{Spec2('ES2015')}}     | Définition initiale |
+| {{SpecName('ESDraft', '#sec-number.max_safe_integer', 'Number.MAX_SAFE_INTEGER')}} | {{Spec2('ESDraft')}} |                     |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Number.MAX_SAFE_INTEGER")}}
+
+## Voir aussi
+
+- {{jsxref("Number.MIN_SAFE_INTEGER")}}
+- {{jsxref("Number.isSafeInteger()")}}
+- {{jsxref("BigInt")}}
diff --git a/files/fr/web/javascript/reference/global_objects/number/max_value/index.html b/files/fr/web/javascript/reference/global_objects/number/max_value/index.html
deleted file mode 100644
index a673992a3b..0000000000
--- a/files/fr/web/javascript/reference/global_objects/number/max_value/index.html
+++ /dev/null
@@ -1,79 +0,0 @@
----
-title: Number.MAX_VALUE
-slug: Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE
-tags:
-  - JavaScript
-  - Number
-  - Propriété
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE
-original_slug: Web/JavaScript/Reference/Objets_globaux/Number/MAX_VALUE
----
-<div>{{JSRef}}</div>
-
-<p>La propriété <code><strong>Number.MAX_VALUE</strong></code> représente la valeur maximale qui peut être représentée par un nombre en JavaScript.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/number-maxvalue.html")}}</div>
-
-
-
-<div>{{js_property_attributes(0,0,0)}}</div>
-
-<h2 id="Description">Description</h2>
-
-<p>La propriété statique <code>MAX_VALUE</code> vaut environ <code>1.79E+308</code> (soit 2^1024). Les valeurs supérieures à <code>MAX_VALUE</code> sont représentées par {{jsxref("Infinity")}} (pour l'infini).</p>
-
-<p><code>MAX_VALUE</code> est une propriété statique de {{jsxref("Number")}}, il faut donc l'utiliser avec <code>Number.MAX_VALUE</code>, plutôt qu'en faisant appel à la propriété d'un objet<code> Number</code> qui aurait été instancié (si on appelle cette propriété sur l'objet <code>Number</code> créé, on obtiendra {{jsxref("undefined")}}).</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<p>Le code suivant teste si le produit de deux nombres est inférieur ou égal à <code>MAX_VALUE</code>, selon le résultat de ce test, soit on utilisera <code>func1</code>, soit on utilisera <code>func2</code>.</p>
-
-<pre class="brush: js">if (num1 * num2 &lt;= Number.MAX_VALUE) {
-   func1();
-} else {
-   func2();
-}</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES1')}}</td>
-   <td>{{Spec2('ES1')}}</td>
-   <td>Définition initiale. Implémentée avec JavaScript 1.1.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-15.7.3.2', 'Number.MAX_VALUE')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-number.max_value', 'Number.MAX_VALUE')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-number.max_value', 'Number.MAX_VALUE')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Number.MAX_VALUE")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Number.MIN_VALUE")}}</li>
- <li>{{jsxref("Number")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/number/max_value/index.md b/files/fr/web/javascript/reference/global_objects/number/max_value/index.md
new file mode 100644
index 0000000000..a56ed64592
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/number/max_value/index.md
@@ -0,0 +1,52 @@
+---
+title: Number.MAX_VALUE
+slug: Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE
+tags:
+  - JavaScript
+  - Number
+  - Propriété
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE
+original_slug: Web/JavaScript/Reference/Objets_globaux/Number/MAX_VALUE
+---
+{{JSRef}}
+
+La propriété **`Number.MAX_VALUE`** représente la valeur maximale qui peut être représentée par un nombre en JavaScript.
+
+{{EmbedInteractiveExample("pages/js/number-maxvalue.html")}}{{js_property_attributes(0,0,0)}}
+
+## Description
+
+La propriété statique `MAX_VALUE` vaut environ `1.79E+308` (soit 2^1024). Les valeurs supérieures à `MAX_VALUE` sont représentées par {{jsxref("Infinity")}} (pour l'infini).
+
+`MAX_VALUE` est une propriété statique de {{jsxref("Number")}}, il faut donc l'utiliser avec `Number.MAX_VALUE`, plutôt qu'en faisant appel à la propriété d'un objet` Number` qui aurait été instancié (si on appelle cette propriété sur l'objet `Number` créé, on obtiendra {{jsxref("undefined")}}).
+
+## Exemples
+
+Le code suivant teste si le produit de deux nombres est inférieur ou égal à `MAX_VALUE`, selon le résultat de ce test, soit on utilisera `func1`, soit on utilisera `func2`.
+
+```js
+if (num1 * num2 <= Number.MAX_VALUE) {
+   func1();
+} else {
+   func2();
+}
+```
+
+## Spécifications
+
+| Spécification                                                                                | État                         | Commentaires                                          |
+| -------------------------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- |
+| {{SpecName('ES1')}}                                                                     | {{Spec2('ES1')}}         | Définition initiale. Implémentée avec JavaScript 1.1. |
+| {{SpecName('ES5.1', '#sec-15.7.3.2', 'Number.MAX_VALUE')}}                 | {{Spec2('ES5.1')}}     |                                                       |
+| {{SpecName('ES6', '#sec-number.max_value', 'Number.MAX_VALUE')}}         | {{Spec2('ES6')}}         |                                                       |
+| {{SpecName('ESDraft', '#sec-number.max_value', 'Number.MAX_VALUE')}} | {{Spec2('ESDraft')}} |                                                       |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Number.MAX_VALUE")}}
+
+## Voir aussi
+
+- {{jsxref("Number.MIN_VALUE")}}
+- {{jsxref("Number")}}
diff --git a/files/fr/web/javascript/reference/global_objects/number/min_safe_integer/index.html b/files/fr/web/javascript/reference/global_objects/number/min_safe_integer/index.html
deleted file mode 100644
index e61fc520fd..0000000000
--- a/files/fr/web/javascript/reference/global_objects/number/min_safe_integer/index.html
+++ /dev/null
@@ -1,71 +0,0 @@
----
-title: Number.MIN_SAFE_INTEGER
-slug: Web/JavaScript/Reference/Global_Objects/Number/MIN_SAFE_INTEGER
-tags:
-  - ECMAScript 2015
-  - JavaScript
-  - Number
-  - Propriété
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Number/MIN_SAFE_INTEGER
-original_slug: Web/JavaScript/Reference/Objets_globaux/Number/MIN_SAFE_INTEGER
----
-<div>{{JSRef}}</div>
-
-<p>La constante <code><strong>Number.MIN_SAFE_INTEGER</strong></code> représente le plus petit entier représentable correctement en JavaScript (-(2^53 -1)).</p>
-
-<div class="blockIndicator note">
-<p><strong>Note :</strong> Pour représenter des entiers inférieurs à cette valeur, on pourra utiliser le type {{jsxref("BigInt")}}.</p>
-</div>
-
-<div>{{EmbedInteractiveExample("pages/js/number-min-safe-integer.html")}}</div>
-
-
-
-<div>{{js_property_attributes(0,0,0)}}</div>
-
-<h2 id="Description">Description</h2>
-
-<p>La constante <code>MIN_SAFE_INTEGER</code> vaut <code>-9007199254740991</code>. Cette valeur provient du fait qu'en JavaScript, les nombres sont représentés <a href="https://en.wikipedia.org/wiki/Double_precision_floating-point_format">en format à double précision</a> selon la norme <a href="http://fr.wikipedia.org/wiki/IEEE_754">IEEE 754</a> et on ne peut représenter correctement que les nombres compris entre <code>-(2^53-1)</code> et <code>2^53 -1</code>. Voir {{jsxref("Number.isSafeInteger()")}} pour plus d'informations.</p>
-
-<p><code>MIN_SAFE_INTEGER</code> étant une méthode statique de {{jsxref("Number")}}, il faut utiliser <code><code>Number</code>.<code>MIN_SAFE_INTEGER</code>()</code>et non pas la méthode d'un objet <code>Number</code> qui aurait été instancié.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<pre class="brush: js">Number.MIN_SAFE_INTEGER // -9007199254740991
--Math.pow(2, 53) -1     // -9007199254740991
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-number.min_safe_integer', 'Number.MIN_SAFE_INTEGER')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-number.min_safe_integer', 'Number.MIN_SAFE_INTEGER')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Number.MIN_SAFE_INTEGER")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Number.MAX_SAFE_INTEGER")}}</li>
- <li>{{jsxref("Number.isSafeInteger()")}}</li>
- <li>{{jsxref("BigInt")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/number/min_safe_integer/index.md b/files/fr/web/javascript/reference/global_objects/number/min_safe_integer/index.md
new file mode 100644
index 0000000000..befcd40ef6
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/number/min_safe_integer/index.md
@@ -0,0 +1,49 @@
+---
+title: Number.MIN_SAFE_INTEGER
+slug: Web/JavaScript/Reference/Global_Objects/Number/MIN_SAFE_INTEGER
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Number
+  - Propriété
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Number/MIN_SAFE_INTEGER
+original_slug: Web/JavaScript/Reference/Objets_globaux/Number/MIN_SAFE_INTEGER
+---
+{{JSRef}}
+
+La constante **`Number.MIN_SAFE_INTEGER`** représente le plus petit entier représentable correctement en JavaScript (-(2^53 -1)).
+
+> **Note :** Pour représenter des entiers inférieurs à cette valeur, on pourra utiliser le type {{jsxref("BigInt")}}.
+
+{{EmbedInteractiveExample("pages/js/number-min-safe-integer.html")}}{{js_property_attributes(0,0,0)}}
+
+## Description
+
+La constante `MIN_SAFE_INTEGER` vaut `-9007199254740991`. Cette valeur provient du fait qu'en JavaScript, les nombres sont représentés [en format à double précision](https://en.wikipedia.org/wiki/Double_precision_floating-point_format) selon la norme [IEEE 754](http://fr.wikipedia.org/wiki/IEEE_754) et on ne peut représenter correctement que les nombres compris entre `-(2^53-1)` et `2^53 -1`. Voir {{jsxref("Number.isSafeInteger()")}} pour plus d'informations.
+
+`MIN_SAFE_INTEGER` étant une méthode statique de {{jsxref("Number")}}, il faut utiliser `Number.MIN_SAFE_INTEGER()`et non pas la méthode d'un objet `Number` qui aurait été instancié.
+
+## Exemples
+
+```js
+Number.MIN_SAFE_INTEGER // -9007199254740991
+-Math.pow(2, 53) -1     // -9007199254740991
+```
+
+## Spécifications
+
+| Spécification                                                                                                | État                         | Commentaires         |
+| ------------------------------------------------------------------------------------------------------------ | ---------------------------- | -------------------- |
+| {{SpecName('ES2015', '#sec-number.min_safe_integer', 'Number.MIN_SAFE_INTEGER')}} | {{Spec2('ES2015')}}     | Définition initiale. |
+| {{SpecName('ESDraft', '#sec-number.min_safe_integer', 'Number.MIN_SAFE_INTEGER')}} | {{Spec2('ESDraft')}} |                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Number.MIN_SAFE_INTEGER")}}
+
+## Voir aussi
+
+- {{jsxref("Number.MAX_SAFE_INTEGER")}}
+- {{jsxref("Number.isSafeInteger()")}}
+- {{jsxref("BigInt")}}
diff --git a/files/fr/web/javascript/reference/global_objects/number/min_value/index.html b/files/fr/web/javascript/reference/global_objects/number/min_value/index.html
deleted file mode 100644
index 257b17dc9e..0000000000
--- a/files/fr/web/javascript/reference/global_objects/number/min_value/index.html
+++ /dev/null
@@ -1,82 +0,0 @@
----
-title: Number.MIN_VALUE
-slug: Web/JavaScript/Reference/Global_Objects/Number/MIN_VALUE
-tags:
-  - JavaScript
-  - Number
-  - Propriété
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Number/MIN_VALUE
-original_slug: Web/JavaScript/Reference/Objets_globaux/Number/MIN_VALUE
----
-<div>{{JSRef}}</div>
-
-<p>La propriété <code><strong>Number.MIN_VALUE</strong></code> représente la plus petite valeur numérique positive qu'il est possible de représenter en JavaScript.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/number-min-value.html")}}</div>
-
-
-
-<div>{{js_property_attributes(0,0,0)}}</div>
-
-<h2 id="Description">Description</h2>
-
-<p>La propriété <code>MIN_VALUE</code> représente le nombre positif le plus proche de 0 et non pas le nombre négatif minimal qu'il est possible de représenter en JavaScript.</p>
-
-<p><code>MIN_VALUE</code> vaut environ 5e-324. Les valeurs inférieures à <code>MIN_VALUE</code> sont converties en 0.</p>
-
-<p><code>MIN_VALUE</code> est une propriété statique de {{jsxref("Number")}} et doit donc être utilisée avec la syntaxe <code>Number.MIN_VALUE</code>, et non pas via la propriété d'un objet <code>Number</code> qui aurait été instancié.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<p>Le code qui suit effectue la division de deux nombres. Si le résultat obtenu est supérieur ou égal à <code>MIN_VALUE</code>, la fonction <code>func1</code> sera appelée, sinon la fonction <code>func2</code> sera utilisée.</p>
-
-<pre class="brush:js">if (num1 / num2 &gt;= Number.MIN_VALUE) {
-    func1();
-} else {
-    func2();
-}</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('ES1')}}</td>
-   <td>{{Spec2('ES1')}}</td>
-   <td>Définition initiale. Implémentée avec JavaScript 1.1</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-15.7.3.3', 'Number.MIN_VALUE')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-number.min_value', 'Number.MIN_VALUE')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-number.min_value', 'Number.MIN_VALUE')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Number.MIN_VALUE")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Number.MAX_VALUE")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/number/min_value/index.md b/files/fr/web/javascript/reference/global_objects/number/min_value/index.md
new file mode 100644
index 0000000000..6862f18313
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/number/min_value/index.md
@@ -0,0 +1,53 @@
+---
+title: Number.MIN_VALUE
+slug: Web/JavaScript/Reference/Global_Objects/Number/MIN_VALUE
+tags:
+  - JavaScript
+  - Number
+  - Propriété
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Number/MIN_VALUE
+original_slug: Web/JavaScript/Reference/Objets_globaux/Number/MIN_VALUE
+---
+{{JSRef}}
+
+La propriété **`Number.MIN_VALUE`** représente la plus petite valeur numérique positive qu'il est possible de représenter en JavaScript.
+
+{{EmbedInteractiveExample("pages/js/number-min-value.html")}}{{js_property_attributes(0,0,0)}}
+
+## Description
+
+La propriété `MIN_VALUE` représente le nombre positif le plus proche de 0 et non pas le nombre négatif minimal qu'il est possible de représenter en JavaScript.
+
+`MIN_VALUE` vaut environ 5e-324. Les valeurs inférieures à `MIN_VALUE` sont converties en 0.
+
+`MIN_VALUE` est une propriété statique de {{jsxref("Number")}} et doit donc être utilisée avec la syntaxe `Number.MIN_VALUE`, et non pas via la propriété d'un objet `Number` qui aurait été instancié.
+
+## Exemples
+
+Le code qui suit effectue la division de deux nombres. Si le résultat obtenu est supérieur ou égal à `MIN_VALUE`, la fonction `func1` sera appelée, sinon la fonction `func2` sera utilisée.
+
+```js
+if (num1 / num2 >= Number.MIN_VALUE) {
+    func1();
+} else {
+    func2();
+}
+```
+
+## Spécifications
+
+| Spécification                                                                                | État                         | Commentaires                                         |
+| -------------------------------------------------------------------------------------------- | ---------------------------- | ---------------------------------------------------- |
+| {{SpecName('ES1')}}                                                                     | {{Spec2('ES1')}}         | Définition initiale. Implémentée avec JavaScript 1.1 |
+| {{SpecName('ES5.1', '#sec-15.7.3.3', 'Number.MIN_VALUE')}}                 | {{Spec2('ES5.1')}}     |                                                      |
+| {{SpecName('ES6', '#sec-number.min_value', 'Number.MIN_VALUE')}}         | {{Spec2('ES6')}}         |                                                      |
+| {{SpecName('ESDraft', '#sec-number.min_value', 'Number.MIN_VALUE')}} | {{Spec2('ESDraft')}} |                                                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Number.MIN_VALUE")}}
+
+## Voir aussi
+
+- {{jsxref("Number.MAX_VALUE")}}
diff --git a/files/fr/web/javascript/reference/global_objects/number/nan/index.html b/files/fr/web/javascript/reference/global_objects/number/nan/index.html
deleted file mode 100644
index 4f16fd16ae..0000000000
--- a/files/fr/web/javascript/reference/global_objects/number/nan/index.html
+++ /dev/null
@@ -1,63 +0,0 @@
----
-title: Number.NaN
-slug: Web/JavaScript/Reference/Global_Objects/Number/NaN
-tags:
-  - JavaScript
-  - Number
-  - Propriété
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Number/NaN
-original_slug: Web/JavaScript/Reference/Objets_globaux/Number/NaN
----
-<div>{{JSRef}}</div>
-
-<p>La propriété <strong><code>Number.NaN</code></strong> représente une valeur qui n'est pas un nombre (en anglais « <em>Not-A-Number</em> » qui donne NaN). Elle est équivalente à {{jsxref("NaN")}}.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/number-nan.html")}}</div>
-
-<p>Il n'est pas nécessaire de créer un objet {{jsxref("Number")}} pour accéder à cette propriété statique. Il suffit d'utiliser directement <code>Number.NaN</code>.</p>
-
-<p>{{js_property_attributes(0,0,0)}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES1')}}</td>
-   <td>{{Spec2('ES1')}}</td>
-   <td>Définition initiale. Implémentée avec JavaScript 1.1.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-15.7.3.4', 'Number.NaN')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-number.nan', 'Number.NaN')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-number.nan', 'Number.NaN')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Number.NaN")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>L'objet global {{jsxref("NaN")}} ;</li>
- <li>L'objet {{jsxref("Number")}} auquel appartient cette propriété.</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/number/nan/index.md b/files/fr/web/javascript/reference/global_objects/number/nan/index.md
new file mode 100644
index 0000000000..edd02e3b02
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/number/nan/index.md
@@ -0,0 +1,38 @@
+---
+title: Number.NaN
+slug: Web/JavaScript/Reference/Global_Objects/Number/NaN
+tags:
+  - JavaScript
+  - Number
+  - Propriété
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Number/NaN
+original_slug: Web/JavaScript/Reference/Objets_globaux/Number/NaN
+---
+{{JSRef}}
+
+La propriété **`Number.NaN`** représente une valeur qui n'est pas un nombre (en anglais « *Not-A-Number* » qui donne NaN). Elle est équivalente à {{jsxref("NaN")}}.
+
+{{EmbedInteractiveExample("pages/js/number-nan.html")}}
+
+Il n'est pas nécessaire de créer un objet {{jsxref("Number")}} pour accéder à cette propriété statique. Il suffit d'utiliser directement `Number.NaN`.
+
+{{js_property_attributes(0,0,0)}}
+
+## Spécifications
+
+| Spécification                                                                | État                         | Commentaires                                          |
+| ---------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- |
+| {{SpecName('ES1')}}                                                     | {{Spec2('ES1')}}         | Définition initiale. Implémentée avec JavaScript 1.1. |
+| {{SpecName('ES5.1', '#sec-15.7.3.4', 'Number.NaN')}}         | {{Spec2('ES5.1')}}     |                                                       |
+| {{SpecName('ES6', '#sec-number.nan', 'Number.NaN')}}         | {{Spec2('ES6')}}         |                                                       |
+| {{SpecName('ESDraft', '#sec-number.nan', 'Number.NaN')}} | {{Spec2('ESDraft')}} |                                                       |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Number.NaN")}}
+
+## Voir aussi
+
+- L'objet global {{jsxref("NaN")}} ;
+- L'objet {{jsxref("Number")}} auquel appartient cette propriété.
diff --git a/files/fr/web/javascript/reference/global_objects/number/negative_infinity/index.html b/files/fr/web/javascript/reference/global_objects/number/negative_infinity/index.html
deleted file mode 100644
index 634c779d96..0000000000
--- a/files/fr/web/javascript/reference/global_objects/number/negative_infinity/index.html
+++ /dev/null
@@ -1,98 +0,0 @@
----
-title: Number.NEGATIVE_INFINITY
-slug: Web/JavaScript/Reference/Global_Objects/Number/NEGATIVE_INFINITY
-tags:
-  - JavaScript
-  - Number
-  - Propriété
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Number/NEGATIVE_INFINITY
-original_slug: Web/JavaScript/Reference/Objets_globaux/Number/NEGATIVE_INFINITY
----
-<div>{{JSRef}}</div>
-
-<p>La propriété <code><strong>Number.NEGATIVE_INFINITY</strong></code> représente l'infini négatif.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/number-negative-infinity.html")}}</div>
-
-
-
-<div>{{js_property_attributes(0,0,0)}}</div>
-
-<h2 id="Description">Description</h2>
-
-<p>La valeur de <code>Number.NEGATIVE_INFINITY</code> est égale à l'opposé de la valeur fournie par la propriété {{jsxref("Infinity")}} de l'objet global.</p>
-
-<p>Cette valeur se comporte différemment de l'infini mathématique :</p>
-
-<ul>
- <li>Toute valeur positive, y compris {{jsxref("Number.POSITIVE_INFINITY", "POSITIVE_INFINITY")}}, multipliée par <code>NEGATIVE_INFINITY</code> sera égale à <code>NEGATIVE_INFINITY</code>.</li>
- <li>Toute valeur négative, y compris <code>NEGATIVE_INFINITY</code>, multipliée par <code>NEGATIVE_INFINITY</code> sera égale à <code>POSITIVE_INFINITY</code>.</li>
- <li>Zéro multiplié par <code>NEGATIVE_INFINITY</code> sera égal à {{jsxref("NaN")}}.</li>
- <li>NaN multiplié par <code>NEGATIVE_INFINITY</code> sera égal à <code>NaN</code>.</li>
- <li><code>NEGATIVE_INFINITY</code>, divisé par n'importe quelle valeur négative, à l'exception de  <code>NEGATIVE_INFINITY</code>, sera égal à <code>POSITIVE_INFINITY</code>.</li>
- <li><code>NEGATIVE_INFINITY</code>, divisé par n'importe quelle valeur positive à l'exception de  <code>POSITIVE_INFINITY</code>, sera égal à <code>NEGATIVE_INFINITY</code>.</li>
- <li><code>NEGATIVE_INFINITY</code>, divisé par <code>NEGATIVE_INFINITY</code> ou <code>POSITIVE_INFINITY</code>, sera égal à <code>NaN</code>.</li>
- <li>Tout nombre positif divisé par <code>NEGATIVE_INFINITY</code> sera égal au zéro négatif.</li>
- <li>Tout nombre négatif divisé par <code>NEGATIVE_INFINITY</code> sera égal au zéro positif.</li>
-</ul>
-
-<p>La propriété <code>Number.NEGATIVE_INFINITY</code> peut être utilisée pour indiquer une erreur sur un test renvoyant normalement un nombre fini. On notera cependant que la méthode {{jsxref("isFinite")}} est plus pertinente dans ce cas.</p>
-
-<p><code>Number.NEGATIVE_INFINITY</code> est une propriété statique de {{jsxref("Number")}} et on utilisera directement <code>Number.NEGATIVE_INFINITY</code> plutôt que comme une propriété d'un objet (instance) {{jsxref("Number")}}.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<p>Dans l'exemple qui suit, on affecte une variable inférieure à la valeur numérique minimale à la variable <code>petitNombre</code>. Lorsque l'instruction conditionnelle <code>if</code> est exécutée, <code>petitNombre</code> possède la valeur "<code>-Infinity</code>", on modifie donc la valeur de <code>petitNombre</code> afin qu'il puisse être géré.</p>
-
-<pre class="brush:js">var petitNombre = (-Number.MAX_VALUE) * 2
-
-if (petitNombre === Number.NEGATIVE_INFINITY) {
- petitNombre = renvoyerUneValeurFinie();
-}
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES1')}}</td>
-   <td>{{Spec2('ES1')}}</td>
-   <td>Définition initiale. Implémentée avec JavaScript 1.1.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-15.7.3.5', 'Number.NEGATIVE_INFINITY')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-number.negative_infinity', 'Number.NEGATIVE_INFINITY')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-number.negative_infinity', 'Number.NEGATIVE_INFINITY')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Number.NEGATIVE_INFINITY")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Number.POSITIVE_INFINITY")}}</li>
- <li>{{jsxref("Number.isFinite()")}}</li>
- <li>{{jsxref("Infinity", "Infinity")}}</li>
- <li>{{jsxref("isFinite", "isFinite()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/number/negative_infinity/index.md b/files/fr/web/javascript/reference/global_objects/number/negative_infinity/index.md
new file mode 100644
index 0000000000..0bd45fa9ba
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/number/negative_infinity/index.md
@@ -0,0 +1,68 @@
+---
+title: Number.NEGATIVE_INFINITY
+slug: Web/JavaScript/Reference/Global_Objects/Number/NEGATIVE_INFINITY
+tags:
+  - JavaScript
+  - Number
+  - Propriété
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Number/NEGATIVE_INFINITY
+original_slug: Web/JavaScript/Reference/Objets_globaux/Number/NEGATIVE_INFINITY
+---
+{{JSRef}}
+
+La propriété **`Number.NEGATIVE_INFINITY`** représente l'infini négatif.
+
+{{EmbedInteractiveExample("pages/js/number-negative-infinity.html")}}{{js_property_attributes(0,0,0)}}
+
+## Description
+
+La valeur de `Number.NEGATIVE_INFINITY` est égale à l'opposé de la valeur fournie par la propriété {{jsxref("Infinity")}} de l'objet global.
+
+Cette valeur se comporte différemment de l'infini mathématique :
+
+- Toute valeur positive, y compris {{jsxref("Number.POSITIVE_INFINITY", "POSITIVE_INFINITY")}}, multipliée par `NEGATIVE_INFINITY` sera égale à `NEGATIVE_INFINITY`.
+- Toute valeur négative, y compris `NEGATIVE_INFINITY`, multipliée par `NEGATIVE_INFINITY` sera égale à `POSITIVE_INFINITY`.
+- Zéro multiplié par `NEGATIVE_INFINITY` sera égal à {{jsxref("NaN")}}.
+- NaN multiplié par `NEGATIVE_INFINITY` sera égal à `NaN`.
+- `NEGATIVE_INFINITY`, divisé par n'importe quelle valeur négative, à l'exception de  `NEGATIVE_INFINITY`, sera égal à `POSITIVE_INFINITY`.
+- `NEGATIVE_INFINITY`, divisé par n'importe quelle valeur positive à l'exception de  `POSITIVE_INFINITY`, sera égal à `NEGATIVE_INFINITY`.
+- `NEGATIVE_INFINITY`, divisé par `NEGATIVE_INFINITY` ou `POSITIVE_INFINITY`, sera égal à `NaN`.
+- Tout nombre positif divisé par `NEGATIVE_INFINITY` sera égal au zéro négatif.
+- Tout nombre négatif divisé par `NEGATIVE_INFINITY` sera égal au zéro positif.
+
+La propriété `Number.NEGATIVE_INFINITY` peut être utilisée pour indiquer une erreur sur un test renvoyant normalement un nombre fini. On notera cependant que la méthode {{jsxref("isFinite")}} est plus pertinente dans ce cas.
+
+`Number.NEGATIVE_INFINITY` est une propriété statique de {{jsxref("Number")}} et on utilisera directement `Number.NEGATIVE_INFINITY` plutôt que comme une propriété d'un objet (instance) {{jsxref("Number")}}.
+
+## Exemples
+
+Dans l'exemple qui suit, on affecte une variable inférieure à la valeur numérique minimale à la variable `petitNombre`. Lorsque l'instruction conditionnelle `if` est exécutée, `petitNombre` possède la valeur "`-Infinity`", on modifie donc la valeur de `petitNombre` afin qu'il puisse être géré.
+
+```js
+var petitNombre = (-Number.MAX_VALUE) * 2
+
+if (petitNombre === Number.NEGATIVE_INFINITY) {
+ petitNombre = renvoyerUneValeurFinie();
+}
+```
+
+## Spécifications
+
+| Spécification                                                                                                    | État                         | Commentaires                                          |
+| ---------------------------------------------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- |
+| {{SpecName('ES1')}}                                                                                         | {{Spec2('ES1')}}         | Définition initiale. Implémentée avec JavaScript 1.1. |
+| {{SpecName('ES5.1', '#sec-15.7.3.5', 'Number.NEGATIVE_INFINITY')}}                         | {{Spec2('ES5.1')}}     |                                                       |
+| {{SpecName('ES6', '#sec-number.negative_infinity', 'Number.NEGATIVE_INFINITY')}}     | {{Spec2('ES6')}}         |                                                       |
+| {{SpecName('ESDraft', '#sec-number.negative_infinity', 'Number.NEGATIVE_INFINITY')}} | {{Spec2('ESDraft')}} |                                                       |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Number.NEGATIVE_INFINITY")}}
+
+## Voir aussi
+
+- {{jsxref("Number.POSITIVE_INFINITY")}}
+- {{jsxref("Number.isFinite()")}}
+- {{jsxref("Infinity", "Infinity")}}
+- {{jsxref("isFinite", "isFinite()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/number/parsefloat/index.html b/files/fr/web/javascript/reference/global_objects/number/parsefloat/index.html
deleted file mode 100644
index e0c630af48..0000000000
--- a/files/fr/web/javascript/reference/global_objects/number/parsefloat/index.html
+++ /dev/null
@@ -1,81 +0,0 @@
----
-title: Number.parseFloat()
-slug: Web/JavaScript/Reference/Global_Objects/Number/parseFloat
-tags:
-  - ECMAScript 2015
-  - JavaScript
-  - Méthode
-  - Number
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Number/parseFloat
-original_slug: Web/JavaScript/Reference/Objets_globaux/Number/parseFloat
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <strong><code>Number.parseFloat()</code></strong> analyse et convertit une chaîne de caractères en un nombre flottant. Cette méthode possède un comportement identique à {{jsxref("parseFloat")}} et fait partie d'ECMAScript 2015 (dans le but de « modulariser » les méthodes globales).</p>
-
-<div>{{EmbedInteractiveExample("pages/js/number-parsefloat.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">Number.parseFloat(chaîne)</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code><var>chaîne</var></code></dt>
- <dd>Une chaîne de caractères qu'on souhaite convertir en nombre flottant.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Un nombre flottant obtenu à partir de l'analyse de la chaîne de caractères passée en argument. Si le premier caractère de la chaîne ne peut pas être converti en un nombre, la  valeur {{jsxref("NaN")}} sera renvoyée.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>Cette méthode possède les mêmes fonctionnalités que la fonction globale {{jsxref("parseFloat", "parseFloat()")}} :</p>
-
-<pre>Number.parseFloat === parseFloat; // true
-</pre>
-
-<p>Cette méthode fait partie d'ECMAScript 2015 et notamment de la modularisation de certaines fonctions globales. Pour plus de détails et d'exemples, voir {{jsxref("parseFloat", "parseFloat()")}}.</p>
-
-<h2 id="Prothèse_d'émulation_(polyfill)">Prothèse d'émulation (<em>polyfill</em>)</h2>
-
-<pre class="brush: js">if (Number.parseFloat === undefined) {
-    Number.parseFloat = parseFloat;
-}
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-number.parsefloat', 'Number.parseFloat')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-number.parsefloat', 'Number.parseFloat')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Number.parseFloat")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>L'objet {{jsxref("Number")}} auquel appartient cette fonction.</li>
- <li>La méthode globale {{jsxref("parseFloat")}}.</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/number/parsefloat/index.md b/files/fr/web/javascript/reference/global_objects/number/parsefloat/index.md
new file mode 100644
index 0000000000..c0b1031793
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/number/parsefloat/index.md
@@ -0,0 +1,62 @@
+---
+title: Number.parseFloat()
+slug: Web/JavaScript/Reference/Global_Objects/Number/parseFloat
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Méthode
+  - Number
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Number/parseFloat
+original_slug: Web/JavaScript/Reference/Objets_globaux/Number/parseFloat
+---
+{{JSRef}}
+
+La méthode **`Number.parseFloat()`** analyse et convertit une chaîne de caractères en un nombre flottant. Cette méthode possède un comportement identique à {{jsxref("parseFloat")}} et fait partie d'ECMAScript 2015 (dans le but de « modulariser » les méthodes globales).
+
+{{EmbedInteractiveExample("pages/js/number-parsefloat.html")}}
+
+## Syntaxe
+
+    Number.parseFloat(chaîne)
+
+### Paramètres
+
+- `chaîne`
+  - : Une chaîne de caractères qu'on souhaite convertir en nombre flottant.
+
+### Valeur de retour
+
+Un nombre flottant obtenu à partir de l'analyse de la chaîne de caractères passée en argument. Si le premier caractère de la chaîne ne peut pas être converti en un nombre, la  valeur {{jsxref("NaN")}} sera renvoyée.
+
+## Description
+
+Cette méthode possède les mêmes fonctionnalités que la fonction globale {{jsxref("parseFloat", "parseFloat()")}} :
+
+    Number.parseFloat === parseFloat; // true
+
+Cette méthode fait partie d'ECMAScript 2015 et notamment de la modularisation de certaines fonctions globales. Pour plus de détails et d'exemples, voir {{jsxref("parseFloat", "parseFloat()")}}.
+
+## Prothèse d'émulation (_polyfill_)
+
+```js
+if (Number.parseFloat === undefined) {
+    Number.parseFloat = parseFloat;
+}
+```
+
+## Spécifications
+
+| Spécification                                                                                | État                         | Commentaires         |
+| -------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName('ES2015', '#sec-number.parsefloat', 'Number.parseFloat')}} | {{Spec2('ES2015')}}     | Définition initiale. |
+| {{SpecName('ESDraft', '#sec-number.parsefloat', 'Number.parseFloat')}} | {{Spec2('ESDraft')}} |                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Number.parseFloat")}}
+
+## Voir aussi
+
+- L'objet {{jsxref("Number")}} auquel appartient cette fonction.
+- La méthode globale {{jsxref("parseFloat")}}.
diff --git a/files/fr/web/javascript/reference/global_objects/number/parseint/index.html b/files/fr/web/javascript/reference/global_objects/number/parseint/index.html
deleted file mode 100644
index 780ba5b85e..0000000000
--- a/files/fr/web/javascript/reference/global_objects/number/parseint/index.html
+++ /dev/null
@@ -1,81 +0,0 @@
----
-title: Number.parseInt()
-slug: Web/JavaScript/Reference/Global_Objects/Number/parseInt
-tags:
-  - ECMAScript 2015
-  - JavaScript
-  - Méthode
-  - Number
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Number/parseInt
-original_slug: Web/JavaScript/Reference/Objets_globaux/Number/parseInt
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <strong><code>Number.parseInt()</code></strong> analyse et convertit une chaine de caractères, fournie en argument, en un entier dans la base souhaitée.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/number-parseint.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">Number.parseInt(<var>chaîne</var> [,<var> base</var>])</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>chaîne</code></dt>
- <dd>La valeur à convertir. Si <code>chaine</code> n'est pas une chaîne de caractères, elle sera convertie auparavant. Les blancs qui préfixent la chaîne sont ignorés.</dd>
- <dt><code>base</code> {{optional_inline}}</dt>
- <dd>Paramètre optionnel. Un entier représentant la base dans laquelle est représentée la valeur de la chaîne. <strong>Il faut toujours spécifier ce paramètre.</strong> Cela permet que le code ne soit pas ambigü et permet de garantir un comportement prévisible. En effet les différentes implémentations peuvent fournir des résultats différents lorsque la base n'est pas spécifiée.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Un entier construit à partir de l'analyse de la chaîne de caractères passée en argument. Si le premier caractère ne permet pas de conversion numérique, c'est la valeur {{jsxref("NaN")}} qui sera renvoyée.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>Voir la page {{jsxref("Objets_globaux/parseInt", "parseInt()")}} pour plus de détails et d'exemples. Cette méthode se comporte de façon identique à la fonction globale {{jsxref("Objets_globaux/parseInt", "parseInt()")}} et fait partie d'ECMAScript 2015 (dans le but de « modulariser » les méthodes globales) et on aura :</p>
-
-<pre class="brush: js">Number.parseInt === parseInt; // true</pre>
-
-<h2 id="Prothèse_d'émulation_(polyfill)">Prothèse d'émulation (<em>polyfill</em>)</h2>
-
-<p>Si on souhaite bénéficier de cette fonction dans un environnement qui n'en dispose pas, on pourra donc l'émuler de la façon suivante :</p>
-
-<pre class="brush: js">if(Number.parseInt === undefined) {
-  Number.parseInt = parseInt;
-}</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-number.parseint', 'Number.parseInt')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-number.parseint', 'Number.parseInt')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Number.parseInt")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>L'objet {{jsxref("Number")}} auquel appartient cette fonction.</li>
- <li>La méthode {{jsxref("Objets_globaux/parseInt","parseInt()")}} de l'objet global.</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/number/parseint/index.md b/files/fr/web/javascript/reference/global_objects/number/parseint/index.md
new file mode 100644
index 0000000000..e77f8baff6
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/number/parseint/index.md
@@ -0,0 +1,66 @@
+---
+title: Number.parseInt()
+slug: Web/JavaScript/Reference/Global_Objects/Number/parseInt
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Méthode
+  - Number
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Number/parseInt
+original_slug: Web/JavaScript/Reference/Objets_globaux/Number/parseInt
+---
+{{JSRef}}
+
+La méthode **`Number.parseInt()`** analyse et convertit une chaine de caractères, fournie en argument, en un entier dans la base souhaitée.
+
+{{EmbedInteractiveExample("pages/js/number-parseint.html")}}
+
+## Syntaxe
+
+    Number.parseInt(chaîne [, base])
+
+### Paramètres
+
+- `chaîne`
+  - : La valeur à convertir. Si `chaine` n'est pas une chaîne de caractères, elle sera convertie auparavant. Les blancs qui préfixent la chaîne sont ignorés.
+- `base` {{optional_inline}}
+  - : Paramètre optionnel. Un entier représentant la base dans laquelle est représentée la valeur de la chaîne. **Il faut toujours spécifier ce paramètre.** Cela permet que le code ne soit pas ambigü et permet de garantir un comportement prévisible. En effet les différentes implémentations peuvent fournir des résultats différents lorsque la base n'est pas spécifiée.
+
+### Valeur de retour
+
+Un entier construit à partir de l'analyse de la chaîne de caractères passée en argument. Si le premier caractère ne permet pas de conversion numérique, c'est la valeur {{jsxref("NaN")}} qui sera renvoyée.
+
+## Description
+
+Voir la page {{jsxref("Objets_globaux/parseInt", "parseInt()")}} pour plus de détails et d'exemples. Cette méthode se comporte de façon identique à la fonction globale {{jsxref("Objets_globaux/parseInt", "parseInt()")}} et fait partie d'ECMAScript 2015 (dans le but de « modulariser » les méthodes globales) et on aura :
+
+```js
+Number.parseInt === parseInt; // true
+```
+
+## Prothèse d'émulation (_polyfill_)
+
+Si on souhaite bénéficier de cette fonction dans un environnement qui n'en dispose pas, on pourra donc l'émuler de la façon suivante :
+
+```js
+if(Number.parseInt === undefined) {
+  Number.parseInt = parseInt;
+}
+```
+
+## Spécifications
+
+| Spécification                                                                            | État                         | Commentaires         |
+| ---------------------------------------------------------------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName('ES2015', '#sec-number.parseint', 'Number.parseInt')}} | {{Spec2('ES2015')}}     | Définition initiale. |
+| {{SpecName('ESDraft', '#sec-number.parseint', 'Number.parseInt')}} | {{Spec2('ESDraft')}} |                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Number.parseInt")}}
+
+## Voir aussi
+
+- L'objet {{jsxref("Number")}} auquel appartient cette fonction.
+- La méthode {{jsxref("Objets_globaux/parseInt","parseInt()")}} de l'objet global.
diff --git a/files/fr/web/javascript/reference/global_objects/number/positive_infinity/index.html b/files/fr/web/javascript/reference/global_objects/number/positive_infinity/index.html
deleted file mode 100644
index 8ee53b1752..0000000000
--- a/files/fr/web/javascript/reference/global_objects/number/positive_infinity/index.html
+++ /dev/null
@@ -1,99 +0,0 @@
----
-title: Number.POSITIVE_INFINITY
-slug: Web/JavaScript/Reference/Global_Objects/Number/POSITIVE_INFINITY
-tags:
-  - JavaScript
-  - Number
-  - Propriété
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Number/POSITIVE_INFINITY
-original_slug: Web/JavaScript/Reference/Objets_globaux/Number/POSITIVE_INFINITY
----
-<div>{{JSRef}}</div>
-
-<p>La propriéte <code><strong>Number.POSITIVE_INFINITY</strong></code> représente l'infini (positif).</p>
-
-<div>{{EmbedInteractiveExample("pages/js/number-positive-infinity.html")}}</div>
-
-
-
-<p>{{js_property_attributes(0,0,0)}}</p>
-
-<h2 id="Description">Description</h2>
-
-<p>La valeur de <code>Number.POSITIVE_INFINITY</code> est identique à la valeur de la propriété de l'objet global {{jsxref("Infinity")}}.</p>
-
-<p>Cette valeur possède un comportement légèrement différent de l'infini au sens mathématique :</p>
-
-<ul>
- <li>Tout valeur positive, y compris <code>POSITIVE_INFINITY,</code> multipliée par  <code>POSITIVE_INFINITY</code> sera égale à <code>POSITIVE_INFINITY</code>.</li>
- <li>Toute valeur négative, y compris {{jsxref("Number.NEGATIVE_INFINITY", "NEGATIVE_INFINITY")}}, multipliée par <code>POSITIVE_INFINITY</code> sera égale à <code>NEGATIVE_INFINITY</code>.</li>
- <li>Zéro multiplié par <code>POSITIVE_INFINITY</code> sera égal à {{jsxref("NaN")}}.</li>
- <li>NaN multiplié par <code>POSITIVE_INFINITY</code> sera égal à NaN.</li>
- <li><code>POSITIVE_INFINITY</code>, divisé par n'importe quelle valeur négative, à l'exception de <code>NEGATIVE_INFINITY</code>, sera égal à <code>NEGATIVE_INFINITY</code>.</li>
- <li><code>POSITIVE_INFINITY</code>, divisé par n'importe quelle valeur positive, à l'exception de <code>POSITIVE_INFINITY</code>, sera égal à <code>POSITIVE_INFINITY</code>.</li>
- <li><code>POSITIVE_INFINITY</code>, divisé par <code>NEGATIVE_INFINITY</code> ou <code>POSITIVE_INFINITY</code>, sera égal NaN.</li>
- <li>Tout nombre positif divisé par <code>POSITIVE_INFINITY</code> sera égal au zéro positif.</li>
- <li>Tout nombre négatif divisé par <code>POSITIVE_INFINITY</code> sera égal au zéro négatif.</li>
-</ul>
-
-<p>Il est possible d'utiliser la propriété <code>Number.POSITIVE_INFINITY</code> pour faire un test d'erreur sur une valeur qu'on attendait finie. Cependant, la méthode {{jsxref("isFinite")}} sera plus appropriée dans ce cas.</p>
-
-<p><code>Number.POSITIVE_INFINITY</code> est une propriété statique de {{jsxref("Number")}} et il n'est donc pas nécessaire de créer un objet {{jsxref("Number")}} afin d'utiliser cette propriété.</p>
-
-<h2 id="Exemple">Exemple</h2>
-
-<h3 id="Utiliser_POSITIVE_INFINITY">Utiliser <code>POSITIVE_INFINITY</code></h3>
-
-<p>Dans l'exemple qui suit, on affecte une valeur plus grande que la valeur maximale à la variable <code>grosNombre</code>. Lors de l'exécution de l'instruction <code>if</code>, <code>grosNombre</code> aura la valeur <code>Infinity</code>, pour continuer, on met à jour <code>grosNombre</code> avec une valeur plus acceptable.</p>
-
-<pre class="brush: js">var grosNombre = Number.MAX_VALUE * 2
-if (grosNombre == Number.POSITIVE_INFINITY) {
- grosNombre = renvoyerUnNombreFini();
-}
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES1')}}</td>
-   <td>{{Spec2('ES1')}}</td>
-   <td>Définition initiale. Implémentée avec JavaScript 1.1.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-15.7.3.6', 'Number.POSITIVE_INFINITY')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-number.positive_infinity', 'Number.POSITIVE_INFINITY')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-number.positive_infinity', 'Number.POSITIVE_INFINITY')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Number.POSITIVE_INFINITY")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Number.NEGATIVE_INFINITY")}}</li>
- <li>{{jsxref("Number.isFinite()")}}</li>
- <li>{{jsxref("Infinity")}}</li>
- <li>{{jsxref("isFinite")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/number/positive_infinity/index.md b/files/fr/web/javascript/reference/global_objects/number/positive_infinity/index.md
new file mode 100644
index 0000000000..066c2ad931
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/number/positive_infinity/index.md
@@ -0,0 +1,71 @@
+---
+title: Number.POSITIVE_INFINITY
+slug: Web/JavaScript/Reference/Global_Objects/Number/POSITIVE_INFINITY
+tags:
+  - JavaScript
+  - Number
+  - Propriété
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Number/POSITIVE_INFINITY
+original_slug: Web/JavaScript/Reference/Objets_globaux/Number/POSITIVE_INFINITY
+---
+{{JSRef}}
+
+La propriéte **`Number.POSITIVE_INFINITY`** représente l'infini (positif).
+
+{{EmbedInteractiveExample("pages/js/number-positive-infinity.html")}}
+
+{{js_property_attributes(0,0,0)}}
+
+## Description
+
+La valeur de `Number.POSITIVE_INFINITY` est identique à la valeur de la propriété de l'objet global {{jsxref("Infinity")}}.
+
+Cette valeur possède un comportement légèrement différent de l'infini au sens mathématique :
+
+- Tout valeur positive, y compris `POSITIVE_INFINITY,` multipliée par  `POSITIVE_INFINITY` sera égale à `POSITIVE_INFINITY`.
+- Toute valeur négative, y compris {{jsxref("Number.NEGATIVE_INFINITY", "NEGATIVE_INFINITY")}}, multipliée par `POSITIVE_INFINITY` sera égale à `NEGATIVE_INFINITY`.
+- Zéro multiplié par `POSITIVE_INFINITY` sera égal à {{jsxref("NaN")}}.
+- NaN multiplié par `POSITIVE_INFINITY` sera égal à NaN.
+- `POSITIVE_INFINITY`, divisé par n'importe quelle valeur négative, à l'exception de `NEGATIVE_INFINITY`, sera égal à `NEGATIVE_INFINITY`.
+- `POSITIVE_INFINITY`, divisé par n'importe quelle valeur positive, à l'exception de `POSITIVE_INFINITY`, sera égal à `POSITIVE_INFINITY`.
+- `POSITIVE_INFINITY`, divisé par `NEGATIVE_INFINITY` ou `POSITIVE_INFINITY`, sera égal NaN.
+- Tout nombre positif divisé par `POSITIVE_INFINITY` sera égal au zéro positif.
+- Tout nombre négatif divisé par `POSITIVE_INFINITY` sera égal au zéro négatif.
+
+Il est possible d'utiliser la propriété `Number.POSITIVE_INFINITY` pour faire un test d'erreur sur une valeur qu'on attendait finie. Cependant, la méthode {{jsxref("isFinite")}} sera plus appropriée dans ce cas.
+
+`Number.POSITIVE_INFINITY` est une propriété statique de {{jsxref("Number")}} et il n'est donc pas nécessaire de créer un objet {{jsxref("Number")}} afin d'utiliser cette propriété.
+
+## Exemple
+
+### Utiliser `POSITIVE_INFINITY`
+
+Dans l'exemple qui suit, on affecte une valeur plus grande que la valeur maximale à la variable `grosNombre`. Lors de l'exécution de l'instruction `if`, `grosNombre` aura la valeur `Infinity`, pour continuer, on met à jour `grosNombre` avec une valeur plus acceptable.
+
+```js
+var grosNombre = Number.MAX_VALUE * 2
+if (grosNombre == Number.POSITIVE_INFINITY) {
+ grosNombre = renvoyerUnNombreFini();
+}
+```
+
+## Spécifications
+
+| Spécification                                                                                                    | Statut                       | Commentaires                                          |
+| ---------------------------------------------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- |
+| {{SpecName('ES1')}}                                                                                         | {{Spec2('ES1')}}         | Définition initiale. Implémentée avec JavaScript 1.1. |
+| {{SpecName('ES5.1', '#sec-15.7.3.6', 'Number.POSITIVE_INFINITY')}}                         | {{Spec2('ES5.1')}}     |                                                       |
+| {{SpecName('ES6', '#sec-number.positive_infinity', 'Number.POSITIVE_INFINITY')}}     | {{Spec2('ES6')}}         |                                                       |
+| {{SpecName('ESDraft', '#sec-number.positive_infinity', 'Number.POSITIVE_INFINITY')}} | {{Spec2('ESDraft')}} |                                                       |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Number.POSITIVE_INFINITY")}}
+
+## Voir aussi
+
+- {{jsxref("Number.NEGATIVE_INFINITY")}}
+- {{jsxref("Number.isFinite()")}}
+- {{jsxref("Infinity")}}
+- {{jsxref("isFinite")}}
diff --git a/files/fr/web/javascript/reference/global_objects/number/toexponential/index.html b/files/fr/web/javascript/reference/global_objects/number/toexponential/index.html
deleted file mode 100644
index 2b3667b776..0000000000
--- a/files/fr/web/javascript/reference/global_objects/number/toexponential/index.html
+++ /dev/null
@@ -1,106 +0,0 @@
----
-title: Number.prototype.toExponential()
-slug: Web/JavaScript/Reference/Global_Objects/Number/toExponential
-tags:
-  - JavaScript
-  - Méthode
-  - Number
-  - Prototype
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Number/toExponential
-original_slug: Web/JavaScript/Reference/Objets_globaux/Number/toExponential
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <strong><code>toExponential()</code></strong> renvoie une chaîne de caractères, représentant l'objet Number en notation exponentielle.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/number-toexponential.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>numObj</var>.toExponential([nbChiffresDécimaux])</pre>
-
-<h3 id="Paramètre">Paramètre</h3>
-
-<dl>
- <dt><code>nbChiffresDécimaux</code></dt>
- <dd>Paramètre optionnel. Un entier donnant le nombre de chiffres qu'on souhaite avoir dans la partie fractionnaire. Le comportement par défaut considèrera autant de chiffres que nécessaire pour représenter le nombre.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Une chaîne représentant l'objet {{jsxref("Number")}} appelant en notation exponentielle avec un chiffre avant la virgule et arrondi à <code>nbChiffresDécimaux</code> après la virgule.</p>
-
-<h3 id="Exceptions">Exceptions</h3>
-
-<dl>
- <dt>{{jsxref("RangeError")}}</dt>
- <dd>Cette exception est causée si <code>nbChiffresDécimaux</code> est trop petit ou trop grand. Les valeurs comprises, au sens large, entre 0 et 20 ne causeront pas d'exception {{jsxref("RangeError")}}. Les implémentations peuvent également autorisér des valeurs en dehors de ces bornes.</dd>
- <dt>{{jsxref("TypeError")}}</dt>
- <dd>Si cette méthode est invoquée pour un objet qui n'est pas un objet <code>Number</code>.</dd>
-</dl>
-
-<h2 id="Description">Description</h2>
-
-<p>La valeur renvoyée est une chaîne de caractères correspondant à la représentation du nombre en notation exponentielle. La partie entière est constituée d'un seul chiffre et la partie fractionnaire est composée de <code>nbChiffresDécimaux</code> chiffres. Si l'argument <code>nbChiffresDécimaux </code>est absent, il y aura autant de chiffres dans la partie fractionnaire que nécessaire pour représenter le nombre de façon unique.</p>
-
-<p>Si la méthode <code>toExponential()</code> est utilisée avec un littéral numérique et que celui-ci ne possède aucun exposant ou séparateur décimal ("."), il faut laisser un ou plusieurs espaces entre le littéral et le point indiquant l'appel de la méthode. Cela permet d'éviter que le point, permettant d'accéder à la méthode, soit confondu avec un séparateur décimal.</p>
-
-<p>Si un nombre possède plus de chiffres décimaux que <code>nbChiffresDécimaux</code>, le nombre est arrondi au nombre le plus proche, représenté avec <code>nbChiffresDécimaux</code> pour la partie fractionnaire. Voir la discussion sur les arrondis dans la page  de la méthode {{jsxref("Number.toFixed", "toFixed()")}} pour plus de détails, la même méthode est utilisée pour <code>toExponential()</code>.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Utiliser_toExponential">Utiliser <code>toExponential</code></h3>
-
-<pre class="brush: js">var numObj = 77.1234;
-
-console.log(numObj.toExponential());  // affiche 7.71234e+1
-console.log(numObj.toExponential(4)); // affiche 7.7123e+1
-console.log(numObj.toExponential(2)); // affiche 7.71e+1
-console.log(77.1234.toExponential()); // affiche 7.71234e+1
-console.log(77 .toExponential());     // affiche 7.7e+1
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES3')}}</td>
-   <td>{{Spec2('ES3')}}</td>
-   <td>Définition initiale. Implémentée avec JavaScript 1.5.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-15.7.4.6', 'Number.prototype.toExponential')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-number.prototype.toexponential', 'Number.prototype.toExponential')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-number.prototype.toexponential', 'Number.prototype.toExponential')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Number.toExponential")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Number.prototype.toFixed()")}}</li>
- <li>{{jsxref("Number.prototype.toPrecision()")}}</li>
- <li>{{jsxref("Number.prototype.toString()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/number/toexponential/index.md b/files/fr/web/javascript/reference/global_objects/number/toexponential/index.md
new file mode 100644
index 0000000000..eb923a599c
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/number/toexponential/index.md
@@ -0,0 +1,78 @@
+---
+title: Number.prototype.toExponential()
+slug: Web/JavaScript/Reference/Global_Objects/Number/toExponential
+tags:
+  - JavaScript
+  - Méthode
+  - Number
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Number/toExponential
+original_slug: Web/JavaScript/Reference/Objets_globaux/Number/toExponential
+---
+{{JSRef}}
+
+La méthode **`toExponential()`** renvoie une chaîne de caractères, représentant l'objet Number en notation exponentielle.
+
+{{EmbedInteractiveExample("pages/js/number-toexponential.html")}}
+
+## Syntaxe
+
+    numObj.toExponential([nbChiffresDécimaux])
+
+### Paramètre
+
+- `nbChiffresDécimaux`
+  - : Paramètre optionnel. Un entier donnant le nombre de chiffres qu'on souhaite avoir dans la partie fractionnaire. Le comportement par défaut considèrera autant de chiffres que nécessaire pour représenter le nombre.
+
+### Valeur de retour
+
+Une chaîne représentant l'objet {{jsxref("Number")}} appelant en notation exponentielle avec un chiffre avant la virgule et arrondi à `nbChiffresDécimaux` après la virgule.
+
+### Exceptions
+
+- {{jsxref("RangeError")}}
+  - : Cette exception est causée si `nbChiffresDécimaux` est trop petit ou trop grand. Les valeurs comprises, au sens large, entre 0 et 20 ne causeront pas d'exception {{jsxref("RangeError")}}. Les implémentations peuvent également autorisér des valeurs en dehors de ces bornes.
+- {{jsxref("TypeError")}}
+  - : Si cette méthode est invoquée pour un objet qui n'est pas un objet `Number`.
+
+## Description
+
+La valeur renvoyée est une chaîne de caractères correspondant à la représentation du nombre en notation exponentielle. La partie entière est constituée d'un seul chiffre et la partie fractionnaire est composée de `nbChiffresDécimaux` chiffres. Si l'argument `nbChiffresDécimaux `est absent, il y aura autant de chiffres dans la partie fractionnaire que nécessaire pour représenter le nombre de façon unique.
+
+Si la méthode `toExponential()` est utilisée avec un littéral numérique et que celui-ci ne possède aucun exposant ou séparateur décimal ("."), il faut laisser un ou plusieurs espaces entre le littéral et le point indiquant l'appel de la méthode. Cela permet d'éviter que le point, permettant d'accéder à la méthode, soit confondu avec un séparateur décimal.
+
+Si un nombre possède plus de chiffres décimaux que `nbChiffresDécimaux`, le nombre est arrondi au nombre le plus proche, représenté avec `nbChiffresDécimaux` pour la partie fractionnaire. Voir la discussion sur les arrondis dans la page  de la méthode {{jsxref("Number.toFixed", "toFixed()")}} pour plus de détails, la même méthode est utilisée pour `toExponential()`.
+
+## Exemples
+
+### Utiliser `toExponential`
+
+```js
+var numObj = 77.1234;
+
+console.log(numObj.toExponential());  // affiche 7.71234e+1
+console.log(numObj.toExponential(4)); // affiche 7.7123e+1
+console.log(numObj.toExponential(2)); // affiche 7.71e+1
+console.log(77.1234.toExponential()); // affiche 7.71234e+1
+console.log(77 .toExponential());     // affiche 7.7e+1
+```
+
+## Spécifications
+
+| Spécification                                                                                                                    | État                         | Commentaires                                          |
+| -------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- |
+| {{SpecName('ES3')}}                                                                                                         | {{Spec2('ES3')}}         | Définition initiale. Implémentée avec JavaScript 1.5. |
+| {{SpecName('ES5.1', '#sec-15.7.4.6', 'Number.prototype.toExponential')}}                                 | {{Spec2('ES5.1')}}     |                                                       |
+| {{SpecName('ES6', '#sec-number.prototype.toexponential', 'Number.prototype.toExponential')}}     | {{Spec2('ES6')}}         |                                                       |
+| {{SpecName('ESDraft', '#sec-number.prototype.toexponential', 'Number.prototype.toExponential')}} | {{Spec2('ESDraft')}} |                                                       |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Number.toExponential")}}
+
+## Voir aussi
+
+- {{jsxref("Number.prototype.toFixed()")}}
+- {{jsxref("Number.prototype.toPrecision()")}}
+- {{jsxref("Number.prototype.toString()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/number/tofixed/index.html b/files/fr/web/javascript/reference/global_objects/number/tofixed/index.html
deleted file mode 100644
index 04f3a49458..0000000000
--- a/files/fr/web/javascript/reference/global_objects/number/tofixed/index.html
+++ /dev/null
@@ -1,110 +0,0 @@
----
-title: Number.prototype.toFixed()
-slug: Web/JavaScript/Reference/Global_Objects/Number/toFixed
-tags:
-  - JavaScript
-  - Méthode
-  - Number
-  - Prototype
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Number/toFixed
-original_slug: Web/JavaScript/Reference/Objets_globaux/Number/toFixed
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <code><strong>toFixed()</strong></code> permet de formater un nombre en notation à point-fixe.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/number-tofixed.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>numObj</var>.toFixed([nbChiffres])</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>nbChiffres</code> {{optional_inline}}</dt>
- <dd>Le nombre de chiffres qu'on souhaite avoir après le séparateur décimal. Cette valeur peut être comprise, au sens large, entre 0 et 20. Les différentes implémentations peuvent éventuellement supporter des valeurs en dehors de cet intervalle. Si l'argument n'est pas utilisé, la valeur par défaut sera 0.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Une chaîne de caractères qui représente le nombre indiqué avec une notation à point fixe.</p>
-
-<h3 id="Exceptions_causées">Exceptions causées</h3>
-
-<dl>
- <dt>{{jsxref("RangeError")}}</dt>
- <dd>Cette exception est renvoyée si <code>nbChiffres</code> est trop grand ou trop petit. Les valeurs comprises, au sens large, entre 0 et 100, n'entraîneront pas de <code>RangeError</code>. Les différentes implémentations peuvent ou non supporter des valeurs plus petites et/ou plus grandes.</dd>
- <dt>{{jsxref("TypeError")}}</dt>
- <dd>Cette exception est renvoyée si cette méthode est invoquée depuis un objet qui n'est pas de type numérique.</dd>
-</dl>
-
-<h2 id="Description">Description</h2>
-
-<p><code>toFixed()</code> renvoie une chaîne de caractères représentant <code>objetNumber</code> sans notation exponentielle et qui possède exactement <code>nbChiffres</code> pour la partie fractionnaire. Le nombre est arrondi si nécessaire et la partie fractionnaire est complétée par des zéros si nécessaire pour obtenir la longueur souhaitée. Si le <code>objetNumber</code> est supérieur ou égal à <code>1e+21</code>, la méthode utilise simplement {{jsxref("Number.prototype.toString()")}} et renvoie une chaîne en notation exponentielle.</p>
-
-<div class="warning">
-<p><strong>Attention :</strong> En raison du standard <a href="https://fr.wikipedia.org/wiki/IEEE_754">IEEE 754</a> qui est utilisé par JavaScript pour représenter les nombres, tous les nombres décimaux ne sont pas représentés exactement en JavaScript, ce qui peut mener à des résultats inattendus (comme <code>0.1 + 0.2 === 0.3</code> qui renvoie <code>false</code>).</p>
-</div>
-
-<h2 id="Exemples">Exemples</h2>
-
-<pre class="brush: js">var numObj = 12345.6789;
-
-numObj.toFixed();       // Renvoie '12346' : arrondi, aucune partie fractionnaire
-numObj.toFixed(1);      // Renvoie '12345.7' : arrondi ici aussi
-numObj.toFixed(6);      // Renvoie '12345.678900' : des zéros sont ajoutés
-(1.23e+20).toFixed(2);  // Renvoie '123000000000000000000.00'
-(1.23e-10).toFixed(2);  // Renvoie '0.00'
-2.34.toFixed(1);        // Renvoie '2.3'
--2.34.toFixed(1);       // Renvoie -2.3 (en raison de la précédence des opérateurs,
-                        // les littéraux de nombres négatifs ne renvoient pas de chaînes)
-2.35.toFixed(1);        // Renvoie '2.4' (arrondi supérieur)
-2.55.toFixed(1);        // Renvoie '2.5' (cf. l'avertissement ci-avant)
-(-2.34).toFixed(1);     // Renvoie '-2.3'
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES3')}}</td>
-   <td>{{Spec2('ES3')}}</td>
-   <td>Définition initiale. Implémentée avec JavaScript 1.5.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-15.7.4.5', 'Number.prototype.toFixed')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-number.prototype.tofixed', 'Number.prototype.toFixed')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-number.prototype.tofixed', 'Number.prototype.toFixed')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Number.toFixed")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Number.prototype.toExponential()")}}</li>
- <li>{{jsxref("Number.prototype.toPrecision()")}}</li>
- <li>{{jsxref("Number.prototype.toString()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/number/tofixed/index.md b/files/fr/web/javascript/reference/global_objects/number/tofixed/index.md
new file mode 100644
index 0000000000..356025f244
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/number/tofixed/index.md
@@ -0,0 +1,80 @@
+---
+title: Number.prototype.toFixed()
+slug: Web/JavaScript/Reference/Global_Objects/Number/toFixed
+tags:
+  - JavaScript
+  - Méthode
+  - Number
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Number/toFixed
+original_slug: Web/JavaScript/Reference/Objets_globaux/Number/toFixed
+---
+{{JSRef}}
+
+La méthode **`toFixed()`** permet de formater un nombre en notation à point-fixe.
+
+{{EmbedInteractiveExample("pages/js/number-tofixed.html")}}
+
+## Syntaxe
+
+    numObj.toFixed([nbChiffres])
+
+### Paramètres
+
+- `nbChiffres` {{optional_inline}}
+  - : Le nombre de chiffres qu'on souhaite avoir après le séparateur décimal. Cette valeur peut être comprise, au sens large, entre 0 et 20. Les différentes implémentations peuvent éventuellement supporter des valeurs en dehors de cet intervalle. Si l'argument n'est pas utilisé, la valeur par défaut sera 0.
+
+### Valeur de retour
+
+Une chaîne de caractères qui représente le nombre indiqué avec une notation à point fixe.
+
+### Exceptions causées
+
+- {{jsxref("RangeError")}}
+  - : Cette exception est renvoyée si `nbChiffres` est trop grand ou trop petit. Les valeurs comprises, au sens large, entre 0 et 100, n'entraîneront pas de `RangeError`. Les différentes implémentations peuvent ou non supporter des valeurs plus petites et/ou plus grandes.
+- {{jsxref("TypeError")}}
+  - : Cette exception est renvoyée si cette méthode est invoquée depuis un objet qui n'est pas de type numérique.
+
+## Description
+
+`toFixed()` renvoie une chaîne de caractères représentant `objetNumber` sans notation exponentielle et qui possède exactement `nbChiffres` pour la partie fractionnaire. Le nombre est arrondi si nécessaire et la partie fractionnaire est complétée par des zéros si nécessaire pour obtenir la longueur souhaitée. Si le `objetNumber` est supérieur ou égal à `1e+21`, la méthode utilise simplement {{jsxref("Number.prototype.toString()")}} et renvoie une chaîne en notation exponentielle.
+
+> **Attention :** En raison du standard [IEEE 754](https://fr.wikipedia.org/wiki/IEEE_754) qui est utilisé par JavaScript pour représenter les nombres, tous les nombres décimaux ne sont pas représentés exactement en JavaScript, ce qui peut mener à des résultats inattendus (comme `0.1 + 0.2 === 0.3` qui renvoie `false`).
+
+## Exemples
+
+```js
+var numObj = 12345.6789;
+
+numObj.toFixed();       // Renvoie '12346' : arrondi, aucune partie fractionnaire
+numObj.toFixed(1);      // Renvoie '12345.7' : arrondi ici aussi
+numObj.toFixed(6);      // Renvoie '12345.678900' : des zéros sont ajoutés
+(1.23e+20).toFixed(2);  // Renvoie '123000000000000000000.00'
+(1.23e-10).toFixed(2);  // Renvoie '0.00'
+2.34.toFixed(1);        // Renvoie '2.3'
+-2.34.toFixed(1);       // Renvoie -2.3 (en raison de la précédence des opérateurs,
+                        // les littéraux de nombres négatifs ne renvoient pas de chaînes)
+2.35.toFixed(1);        // Renvoie '2.4' (arrondi supérieur)
+2.55.toFixed(1);        // Renvoie '2.5' (cf. l'avertissement ci-avant)
+(-2.34).toFixed(1);     // Renvoie '-2.3'
+```
+
+## Spécifications
+
+| Spécification                                                                                                    | État                         | Commentaires                                          |
+| ---------------------------------------------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- |
+| {{SpecName('ES3')}}                                                                                         | {{Spec2('ES3')}}         | Définition initiale. Implémentée avec JavaScript 1.5. |
+| {{SpecName('ES5.1', '#sec-15.7.4.5', 'Number.prototype.toFixed')}}                         | {{Spec2('ES5.1')}}     |                                                       |
+| {{SpecName('ES6', '#sec-number.prototype.tofixed', 'Number.prototype.toFixed')}}     | {{Spec2('ES6')}}         |                                                       |
+| {{SpecName('ESDraft', '#sec-number.prototype.tofixed', 'Number.prototype.toFixed')}} | {{Spec2('ESDraft')}} |                                                       |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Number.toFixed")}}
+
+## Voir aussi
+
+- {{jsxref("Number.prototype.toExponential()")}}
+- {{jsxref("Number.prototype.toPrecision()")}}
+- {{jsxref("Number.prototype.toString()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/number/tolocalestring/index.html b/files/fr/web/javascript/reference/global_objects/number/tolocalestring/index.html
deleted file mode 100644
index af7692098a..0000000000
--- a/files/fr/web/javascript/reference/global_objects/number/tolocalestring/index.html
+++ /dev/null
@@ -1,196 +0,0 @@
----
-title: Number.prototype.toLocaleString()
-slug: Web/JavaScript/Reference/Global_Objects/Number/toLocaleString
-tags:
-  - Internationalisation
-  - JavaScript
-  - Méthode
-  - Number
-  - Prototype
-  - Reference
-  - i18n
-translation_of: Web/JavaScript/Reference/Global_Objects/Number/toLocaleString
-original_slug: Web/JavaScript/Reference/Objets_globaux/Number/toLocaleString
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <code><strong>toLocaleString()</strong></code> permet de renvoyer une chaîne de caractères représentant un nombre en tenant compte de la locale.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/number-tolocalestring.html")}}</div>
-
-
-
-<p>Les arguments <code>locales</code> et <code>options</code> permettent à l'application de spécifier les options de formatage selon la langue utilisée. Ces arguments ont un effet sur le comportement de la fonction. Les implémentations passées, qui ignoraient les arguments <code>locales</code> et <code>options</code> se basaient uniquement sur l'implémentation pour ce qui concernait la locale et le format.</p>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">objetNumber.toLocaleString([locales [, options]])</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<p>Voir la section <a href="#compat" title="#Browser_Compatibility">compatibilité des navigateurs</a> afin de voir quels navigateurs supportent les arguments <code>locales</code> et <code>options</code>. L'exemple <a href="#check">Vérifier le support des arguments <code>locales</code> et <code>options</code></a> permet de détecter cette fonctionnalité.</p>
-
-<div class="note">
-<p><strong>Note :</strong> L'API ECMAScript Internationalization, implémentée avec Firefox 29, a ajouté l'argument <code>locales</code> à la méthode <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Number/toLocaleString"><code>Number.toLocaleString</code></a>. Si l'argument vaut <code>undefined</code>,cette méthode renvoie les nombres selon la locale du système d'exploitation, les versions antérieures de Firefox renvoyaient un résultat correspondant à la locale anglaise. Ce changement a été rapporté comme une régression, avec un risque de manque de rétrocompatibilité, avant d'être corrigé avec Firefox 55, voir le bug ({{bug(999003)}}).</p>
-</div>
-
-<p>{{page('/fr/docs/Web/JavaScript/Reference/Objets_globaux/NumberFormat','Paramètres')}}</p>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Une chaîne de caractères qui représente le nombre indiqué en tenant compte de la locale.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Utiliser_toLocaleString()">Utiliser <code>toLocaleString()</code></h3>
-
-<p>En utilisant la fonction simplement, sans spécifier de locale, la chaîne est formatée dans la locale par défaut et avec des options par défaut.</p>
-
-<pre class="brush: js">var nombre = 3500;
-
-console.log(nombre.toLocaleString()); // Affichera "3 500" pour la locale française
-</pre>
-
-<h3 id="Vérifier_le_support_des_arguments_locales_et_options">Vérifier le support des arguments <code>locales</code> et <code>options</code></h3>
-
-<p>Les arguments <code>locales</code> et <code>options</code> ne sont pas supportés par tous les navigateurs. Afin de vérifier qu'une implémentation les prend en charge, on se base sur le fait que les balises de langues incorrectes renvoient une exception{{jsxref("RangeError")}} :</p>
-
-<pre class="brush: js">function testSupporttoLocaleString() {
-    var nombre = 0;
-    try {
-        nombre.toLocaleString("i");
-    } catch (e) {
-        return e​.name === "RangeError";
-    }
-    return false;
-}
-</pre>
-
-<p>Avant ES5.1, il n'était pas nécessaire pour les implémentations de provoquer une erreur d'intervalle si <code>toLocaleString</code> était appelé avec des arguments.</p>
-
-<p>Afin de vérifier le support pour tous les environnements, y compris ceux qui supportent ECMA-262 avant la version 5.1, on peut tester les fonctionnalités définies dans ECMA-402, directement sur <code>Number.prototype.toLocaleString</code> :</p>
-
-<pre class="brush: js">function toLocaleStringSupportsOptions() {
-  return !!(typeof Intl == 'object' &amp;&amp; Intl &amp;&amp; typeof Intl.NumberFormat == 'function');
-}
-</pre>
-
-<p>Cela permet de tester la présence d'un objet global <code>Intl</code>, de vérifier que celui-ci n'est pas <code>null</code> et qu'il a une méthode <code>NumberFormat</code>.</p>
-
-<h3 id="Utiliser_l'argument_locales">Utiliser l'argument <code>locales</code></h3>
-
-<p>Cet exemple illustre les variations possibles entre les différents formats localisés. Afin que le format de langue utilisé soit celui de votre utilisateur, assurez-vous de fournir la langue utilisée (ainsi que des langues de secours) en utilisant l'argument <code>locales</code> :</p>
-
-<pre class="brush: js">var nombre= 123456.789;
-
-// Pour la locale allemande, on utilise un point comme séparateur
-// pour les milliers et une virgule comme séparateur décimal
-console.log(nombre.toLocaleString("de-DE"));
-// → 123.456,789
-
-// Les locales arabes, dans la plupart des pays arabophones, utilisent
-// les chiffres arabes
-console.log(nombre.toLocaleString("ar-EG"));
-// → ١٢٣٤٥٦٫٧٨٩
-
-// En Inde, on utilise des séparateurs de milliers/lakh/crore
-console.log(nombre.toLocaleString("en-IN"));
-// → 1,23,456.789
-
-// La clé d'extension nu indique un système numérique, ici le système chinois décimal
-console.log(nombre.toLocaleString("zh-Hans-CN-u-nu-hanidec"));
-// → 一二三,四五六.七八九
-
-// quand on souhaite utiliser un langage qui n'est pas supporté, on peut
-// inclure un langage de secours. Exemple ici avec le balinais et l'indonésien
-console.log(nombre.toLocaleString(["ban", "id"]));
-// → 123.456,789
-</pre>
-
-<h3 id="Utiliser_l'argument_options">Utiliser l'argument <code>options</code></h3>
-
-<p>Les résultats fournis par <code>toLocaleString</code> peuvent être déclinés en utilisant l'argument <code>options</code> :</p>
-
-<pre class="brush: js">var nombre = 123456.789;
-
-// on formate selon une devise
-console.log(nombre.toLocaleString("de-DE", {style: "currency", currency: "EUR"}));
-// → 123.456,79 €
-
-// le yen japonais ne possède pas de centimes
-console.log(nombre.toLocaleString("ja-JP", {style: "currency", currency: "JPY"}))
-// → ￥123,457
-
-// on se limite à trois chiffres significatifs
-console.log(nombre.toLocaleString("en-IN", {maximumSignificantDigits: 3}));
-// → 1,23,000
-
-// on utilise la langue du système pour la mise en
-// forme des nombres
-var num = 30000.65;
-console.log(num.toLocaleString(undefined, {minimumFractionDigits: 2, maximumFractionDigits: 2}));
-// → "30,000.65" quand l'anglais est la langue par défaut
-// → "30.000,65" quand l'allemand est la langue par défaut
-// → "30 000,65" quand le français est la langue par défaut
-</pre>
-
-<h2 id="Performance">Performance</h2>
-
-<p>Lors du formatage de beaucoup de nombres, il est préférable de créer un objet {{jsxref("NumberFormat")}} et d'utiliser sa méthode {{jsxref("NumberFormat.format")}}.</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES3')}}</td>
-   <td>{{Spec2('ES3')}}</td>
-   <td>Définition initiale. Implémentée avec JavaScript 1.5.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-15.7.4.3', 'Number.prototype.toLocaleString')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-number.prototype.tolocalestring', 'Number.prototype.toLocaleString')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-number.prototype.tolocalestring', 'Number.prototype.toLocaleString')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES Int 1.0', '#sec-13.2.1', 'Number.prototype.toLocaleString')}}</td>
-   <td>{{Spec2('ES Int 1.0')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES Int 2.0', '#sec-13.2.1', 'Number.prototype.toLocaleString')}}</td>
-   <td>{{Spec2('ES Int 2.0')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES Int Draft', '#sec-Number.prototype.toLocaleString', 'Number.prototype.toLocaleString')}}</td>
-   <td>{{Spec2('ES Int Draft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Number.toLocaleString")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Number.prototype.toString()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/number/tolocalestring/index.md b/files/fr/web/javascript/reference/global_objects/number/tolocalestring/index.md
new file mode 100644
index 0000000000..9ff73fe256
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/number/tolocalestring/index.md
@@ -0,0 +1,160 @@
+---
+title: Number.prototype.toLocaleString()
+slug: Web/JavaScript/Reference/Global_Objects/Number/toLocaleString
+tags:
+  - Internationalisation
+  - JavaScript
+  - Méthode
+  - Number
+  - Prototype
+  - Reference
+  - i18n
+translation_of: Web/JavaScript/Reference/Global_Objects/Number/toLocaleString
+original_slug: Web/JavaScript/Reference/Objets_globaux/Number/toLocaleString
+---
+{{JSRef}}
+
+La méthode **`toLocaleString()`** permet de renvoyer une chaîne de caractères représentant un nombre en tenant compte de la locale.
+
+{{EmbedInteractiveExample("pages/js/number-tolocalestring.html")}}
+
+Les arguments `locales` et `options` permettent à l'application de spécifier les options de formatage selon la langue utilisée. Ces arguments ont un effet sur le comportement de la fonction. Les implémentations passées, qui ignoraient les arguments `locales` et `options` se basaient uniquement sur l'implémentation pour ce qui concernait la locale et le format.
+
+## Syntaxe
+
+    objetNumber.toLocaleString([locales [, options]])
+
+### Paramètres
+
+Voir la section [compatibilité des navigateurs](#compat "#Browser_Compatibility") afin de voir quels navigateurs supportent les arguments `locales` et `options`. L'exemple [Vérifier le support des arguments `locales` et `options`](#check) permet de détecter cette fonctionnalité.
+
+> **Note :** L'API ECMAScript Internationalization, implémentée avec Firefox 29, a ajouté l'argument `locales` à la méthode [`Number.toLocaleString`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Number/toLocaleString). Si l'argument vaut `undefined`,cette méthode renvoie les nombres selon la locale du système d'exploitation, les versions antérieures de Firefox renvoyaient un résultat correspondant à la locale anglaise. Ce changement a été rapporté comme une régression, avec un risque de manque de rétrocompatibilité, avant d'être corrigé avec Firefox 55, voir le bug ({{bug(999003)}}).
+
+{{page('/fr/docs/Web/JavaScript/Reference/Objets_globaux/NumberFormat','Paramètres')}}
+
+### Valeur de retour
+
+Une chaîne de caractères qui représente le nombre indiqué en tenant compte de la locale.
+
+## Exemples
+
+### Utiliser `toLocaleString()`
+
+En utilisant la fonction simplement, sans spécifier de locale, la chaîne est formatée dans la locale par défaut et avec des options par défaut.
+
+```js
+var nombre = 3500;
+
+console.log(nombre.toLocaleString()); // Affichera "3 500" pour la locale française
+```
+
+### Vérifier le support des arguments `locales` et `options`
+
+Les arguments `locales` et `options` ne sont pas supportés par tous les navigateurs. Afin de vérifier qu'une implémentation les prend en charge, on se base sur le fait que les balises de langues incorrectes renvoient une exception{{jsxref("RangeError")}} :
+
+```js
+function testSupporttoLocaleString() {
+    var nombre = 0;
+    try {
+        nombre.toLocaleString("i");
+    } catch (e) {
+        return e​.name === "RangeError";
+    }
+    return false;
+}
+```
+
+Avant ES5.1, il n'était pas nécessaire pour les implémentations de provoquer une erreur d'intervalle si `toLocaleString` était appelé avec des arguments.
+
+Afin de vérifier le support pour tous les environnements, y compris ceux qui supportent ECMA-262 avant la version 5.1, on peut tester les fonctionnalités définies dans ECMA-402, directement sur `Number.prototype.toLocaleString` :
+
+```js
+function toLocaleStringSupportsOptions() {
+  return !!(typeof Intl == 'object' && Intl && typeof Intl.NumberFormat == 'function');
+}
+```
+
+Cela permet de tester la présence d'un objet global `Intl`, de vérifier que celui-ci n'est pas `null` et qu'il a une méthode `NumberFormat`.
+
+### Utiliser l'argument `locales`
+
+Cet exemple illustre les variations possibles entre les différents formats localisés. Afin que le format de langue utilisé soit celui de votre utilisateur, assurez-vous de fournir la langue utilisée (ainsi que des langues de secours) en utilisant l'argument `locales` :
+
+```js
+var nombre= 123456.789;
+
+// Pour la locale allemande, on utilise un point comme séparateur
+// pour les milliers et une virgule comme séparateur décimal
+console.log(nombre.toLocaleString("de-DE"));
+// → 123.456,789
+
+// Les locales arabes, dans la plupart des pays arabophones, utilisent
+// les chiffres arabes
+console.log(nombre.toLocaleString("ar-EG"));
+// → ١٢٣٤٥٦٫٧٨٩
+
+// En Inde, on utilise des séparateurs de milliers/lakh/crore
+console.log(nombre.toLocaleString("en-IN"));
+// → 1,23,456.789
+
+// La clé d'extension nu indique un système numérique, ici le système chinois décimal
+console.log(nombre.toLocaleString("zh-Hans-CN-u-nu-hanidec"));
+// → 一二三,四五六.七八九
+
+// quand on souhaite utiliser un langage qui n'est pas supporté, on peut
+// inclure un langage de secours. Exemple ici avec le balinais et l'indonésien
+console.log(nombre.toLocaleString(["ban", "id"]));
+// → 123.456,789
+```
+
+### Utiliser l'argument `options`
+
+Les résultats fournis par `toLocaleString` peuvent être déclinés en utilisant l'argument `options` :
+
+```js
+var nombre = 123456.789;
+
+// on formate selon une devise
+console.log(nombre.toLocaleString("de-DE", {style: "currency", currency: "EUR"}));
+// → 123.456,79 €
+
+// le yen japonais ne possède pas de centimes
+console.log(nombre.toLocaleString("ja-JP", {style: "currency", currency: "JPY"}))
+// → ￥123,457
+
+// on se limite à trois chiffres significatifs
+console.log(nombre.toLocaleString("en-IN", {maximumSignificantDigits: 3}));
+// → 1,23,000
+
+// on utilise la langue du système pour la mise en
+// forme des nombres
+var num = 30000.65;
+console.log(num.toLocaleString(undefined, {minimumFractionDigits: 2, maximumFractionDigits: 2}));
+// → "30,000.65" quand l'anglais est la langue par défaut
+// → "30.000,65" quand l'allemand est la langue par défaut
+// → "30 000,65" quand le français est la langue par défaut
+```
+
+## Performance
+
+Lors du formatage de beaucoup de nombres, il est préférable de créer un objet {{jsxref("NumberFormat")}} et d'utiliser sa méthode {{jsxref("NumberFormat.format")}}.
+
+## Spécifications
+
+| Spécification                                                                                                                            | État                             | Commentaires                                          |
+| ---------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------------------------------------------------- |
+| {{SpecName('ES3')}}                                                                                                                 | {{Spec2('ES3')}}             | Définition initiale. Implémentée avec JavaScript 1.5. |
+| {{SpecName('ES5.1', '#sec-15.7.4.3', 'Number.prototype.toLocaleString')}}                                         | {{Spec2('ES5.1')}}         |                                                       |
+| {{SpecName('ES6', '#sec-number.prototype.tolocalestring', 'Number.prototype.toLocaleString')}}             | {{Spec2('ES6')}}             |                                                       |
+| {{SpecName('ESDraft', '#sec-number.prototype.tolocalestring', 'Number.prototype.toLocaleString')}}     | {{Spec2('ESDraft')}}     |                                                       |
+| {{SpecName('ES Int 1.0', '#sec-13.2.1', 'Number.prototype.toLocaleString')}}                                     | {{Spec2('ES Int 1.0')}} |                                                       |
+| {{SpecName('ES Int 2.0', '#sec-13.2.1', 'Number.prototype.toLocaleString')}}                                     | {{Spec2('ES Int 2.0')}} |                                                       |
+| {{SpecName('ES Int Draft', '#sec-Number.prototype.toLocaleString', 'Number.prototype.toLocaleString')}} | {{Spec2('ES Int Draft')}} |                                                       |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Number.toLocaleString")}}
+
+## Voir aussi
+
+- {{jsxref("Number.prototype.toString()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/number/toprecision/index.html b/files/fr/web/javascript/reference/global_objects/number/toprecision/index.html
deleted file mode 100644
index 3071e0dafc..0000000000
--- a/files/fr/web/javascript/reference/global_objects/number/toprecision/index.html
+++ /dev/null
@@ -1,104 +0,0 @@
----
-title: Number.prototype.toPrecision()
-slug: Web/JavaScript/Reference/Global_Objects/Number/toPrecision
-tags:
-  - JavaScript
-  - Méthode
-  - Number
-  - Prototype
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Number/toPrecision
-original_slug: Web/JavaScript/Reference/Objets_globaux/Number/toPrecision
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <code><strong>toPrecision()</strong></code> renvoie une chaîne de caractères représentant un nombre avec la précision donnée.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/number-toprecision.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>numObj</var>.toPrecision([<var>pré</var><var>cision</var>])</pre>
-
-<h3 id="Paramètre">Paramètre</h3>
-
-<dl>
- <dt><code>précision</code></dt>
- <dd>Paramètre optionnel. Un entier spécifiant le nombre de chiffres significatifs.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Cette méthode renvoie une chaîne de caractères représentant l'objet {{jsxref("Number")}} en notation à point fixe ou en notation exponentielle, arrondi avec un nombre de chiffres significatifs égal à <code>précision</code>. Le principe utilisé pour les arrondis est celui décrit dans la page de la méthode {{jsxref("Number.prototype.toFixed()")}}.</p>
-
-<p>Si l'argument <code>précision</code> n'est pas utilisé, la méthode aura le même effet que {{jsxref("Number.prototype.toString()")}}. Si cet argument n'est pas un nombre entier, on prendra le nombre entier le plus proche.</p>
-
-<h3 id="Exceptions">Exceptions</h3>
-
-<dl>
- <dt>{{jsxref("RangeError")}}</dt>
- <dd>Si <code>précison</code> n'est pas compris, au sens large, entre 1 et 100, on aura une exception <code>RangeError</code>. Les implémentations peuvent supporter des valeurs supérieures et/ou inférieures. Le standard ECMA-262 ne nécessite qu'une précision allant jusqu'à 21 chiffres significatifs.</dd>
-</dl>
-
-<h2 id="Exemples">Exemples</h2>
-
-<pre class="brush: js">var objetNumber = 5.123456;
-console.log(objetNumber.toPrecision());  //affiche "5.123456"
-console.log(objetNumber.toPrecision(5)); //affiche "5.1235"
-console.log(objetNumber.toPrecision(2)); //affiche "5.1"
-console.log(objetNumber.toPrecision(1)); //affiche "5"
-
-numObj = 0.000123;
-
-console.log(numObj.toPrecision());    // affiche "0.000123"
-console.log(numObj.toPrecision(5));   // affiche "0.00012300"
-console.log(numObj.toPrecision(2));   // affiche "0.00012"
-console.log(numObj.toPrecision(1));   // affiche "0.0001"
-
-// dans certaines circonstances, on peut avoir une notation exponentielle
-console.log((1234.5).toPrecision(2)); // "1.2e+3"
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES3')}}</td>
-   <td>{{Spec2('ES3')}}</td>
-   <td>Définition initiale. Implémentée avec JavaScript 1.5.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-15.7.4.7', 'Number.prototype.toPrecision')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-number.prototype.toprecision', 'Number.prototype.toPrecision')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-number.prototype.toprecision', 'Number.prototype.toPrecision')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Number.toPrecision")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Number.prototype.toFixed()")}}</li>
- <li>{{jsxref("Number.prototype.toExponential()")}}</li>
- <li>{{jsxref("Number.prototype.toString()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/number/toprecision/index.md b/files/fr/web/javascript/reference/global_objects/number/toprecision/index.md
new file mode 100644
index 0000000000..fc528fd945
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/number/toprecision/index.md
@@ -0,0 +1,76 @@
+---
+title: Number.prototype.toPrecision()
+slug: Web/JavaScript/Reference/Global_Objects/Number/toPrecision
+tags:
+  - JavaScript
+  - Méthode
+  - Number
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Number/toPrecision
+original_slug: Web/JavaScript/Reference/Objets_globaux/Number/toPrecision
+---
+{{JSRef}}
+
+La méthode **`toPrecision()`** renvoie une chaîne de caractères représentant un nombre avec la précision donnée.
+
+{{EmbedInteractiveExample("pages/js/number-toprecision.html")}}
+
+## Syntaxe
+
+    numObj.toPrecision([précision])
+
+### Paramètre
+
+- `précision`
+  - : Paramètre optionnel. Un entier spécifiant le nombre de chiffres significatifs.
+
+### Valeur de retour
+
+Cette méthode renvoie une chaîne de caractères représentant l'objet {{jsxref("Number")}} en notation à point fixe ou en notation exponentielle, arrondi avec un nombre de chiffres significatifs égal à `précision`. Le principe utilisé pour les arrondis est celui décrit dans la page de la méthode {{jsxref("Number.prototype.toFixed()")}}.
+
+Si l'argument `précision` n'est pas utilisé, la méthode aura le même effet que {{jsxref("Number.prototype.toString()")}}. Si cet argument n'est pas un nombre entier, on prendra le nombre entier le plus proche.
+
+### Exceptions
+
+- {{jsxref("RangeError")}}
+  - : Si `précison` n'est pas compris, au sens large, entre 1 et 100, on aura une exception `RangeError`. Les implémentations peuvent supporter des valeurs supérieures et/ou inférieures. Le standard ECMA-262 ne nécessite qu'une précision allant jusqu'à 21 chiffres significatifs.
+
+## Exemples
+
+```js
+var objetNumber = 5.123456;
+console.log(objetNumber.toPrecision());  //affiche "5.123456"
+console.log(objetNumber.toPrecision(5)); //affiche "5.1235"
+console.log(objetNumber.toPrecision(2)); //affiche "5.1"
+console.log(objetNumber.toPrecision(1)); //affiche "5"
+
+numObj = 0.000123;
+
+console.log(numObj.toPrecision());    // affiche "0.000123"
+console.log(numObj.toPrecision(5));   // affiche "0.00012300"
+console.log(numObj.toPrecision(2));   // affiche "0.00012"
+console.log(numObj.toPrecision(1));   // affiche "0.0001"
+
+// dans certaines circonstances, on peut avoir une notation exponentielle
+console.log((1234.5).toPrecision(2)); // "1.2e+3"
+```
+
+## Spécifications
+
+| Spécification                                                                                                                | État                         | Commentaires                                          |
+| ---------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- |
+| {{SpecName('ES3')}}                                                                                                     | {{Spec2('ES3')}}         | Définition initiale. Implémentée avec JavaScript 1.5. |
+| {{SpecName('ES5.1', '#sec-15.7.4.7', 'Number.prototype.toPrecision')}}                                 | {{Spec2('ES5.1')}}     |                                                       |
+| {{SpecName('ES6', '#sec-number.prototype.toprecision', 'Number.prototype.toPrecision')}}         | {{Spec2('ES6')}}         |                                                       |
+| {{SpecName('ESDraft', '#sec-number.prototype.toprecision', 'Number.prototype.toPrecision')}} | {{Spec2('ESDraft')}} |                                                       |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Number.toPrecision")}}
+
+## Voir aussi
+
+- {{jsxref("Number.prototype.toFixed()")}}
+- {{jsxref("Number.prototype.toExponential()")}}
+- {{jsxref("Number.prototype.toString()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/number/tosource/index.html b/files/fr/web/javascript/reference/global_objects/number/tosource/index.html
deleted file mode 100644
index 4573bdfacf..0000000000
--- a/files/fr/web/javascript/reference/global_objects/number/tosource/index.html
+++ /dev/null
@@ -1,56 +0,0 @@
----
-title: Number.prototype.toSource()
-slug: Web/JavaScript/Reference/Global_Objects/Number/toSource
-tags:
-  - JavaScript
-  - Méthode
-  - Number
-  - Prototype
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Number/toSource
-original_slug: Web/JavaScript/Reference/Objets_globaux/Number/toSource
----
-<div>{{JSRef}} {{non-standard_header}}</div>
-
-<p>La méthode <code><strong>toSource()</strong></code> permet de renvoyer une chaîne de caractère représentant le code source de l'objet.</p>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">objetNumber.toSource();
-Number.toSource();
-</pre>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Une chaîne de caractères représentant le code source de l'objet.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>La méthode <code>toSource()</code> renvoie les valeurs suivantes :</p>
-
-<ul>
- <li>Pour l'objet natif {{jsxref("Number")}}, <code>toSource()</code> renvoie la chaîne suivante, indiquant que le code source n'est pas disponible :
-
-  <pre class="brush: js">function Number() {
-    [native code]
-}
-</pre>
- </li>
- <li>Pour les instances de {{jsxref("Number")}}, <code>toSource()</code> renvoie une chaîne représentant le code source de l'objet.</li>
-</ul>
-
-<p>Cette méthode est généralement appelée par du code interne au moteur JavaScript et n'est pas utilisée dans des scripts JavaScript.</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<p>Cette méthode ne fait partie d'aucun standard. Elle a été implémentée avec JavaScript 1.3.</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Number.toSource")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Object.prototype.toSource()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/number/tosource/index.md b/files/fr/web/javascript/reference/global_objects/number/tosource/index.md
new file mode 100644
index 0000000000..abf22f9a15
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/number/tosource/index.md
@@ -0,0 +1,52 @@
+---
+title: Number.prototype.toSource()
+slug: Web/JavaScript/Reference/Global_Objects/Number/toSource
+tags:
+  - JavaScript
+  - Méthode
+  - Number
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Number/toSource
+original_slug: Web/JavaScript/Reference/Objets_globaux/Number/toSource
+---
+{{JSRef}} {{non-standard_header}}
+
+La méthode **`toSource()`** permet de renvoyer une chaîne de caractère représentant le code source de l'objet.
+
+## Syntaxe
+
+    objetNumber.toSource();
+    Number.toSource();
+
+### Valeur de retour
+
+Une chaîne de caractères représentant le code source de l'objet.
+
+## Description
+
+La méthode `toSource()` renvoie les valeurs suivantes :
+
+- Pour l'objet natif {{jsxref("Number")}}, `toSource()` renvoie la chaîne suivante, indiquant que le code source n'est pas disponible :
+
+  ```js
+    function Number() {
+        [native code]
+    }
+    ```
+
+- Pour les instances de {{jsxref("Number")}}, `toSource()` renvoie une chaîne représentant le code source de l'objet.
+
+Cette méthode est généralement appelée par du code interne au moteur JavaScript et n'est pas utilisée dans des scripts JavaScript.
+
+## Spécifications
+
+Cette méthode ne fait partie d'aucun standard. Elle a été implémentée avec JavaScript 1.3.
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Number.toSource")}}
+
+## Voir aussi
+
+- {{jsxref("Object.prototype.toSource()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/number/tostring/index.html b/files/fr/web/javascript/reference/global_objects/number/tostring/index.html
deleted file mode 100644
index b7b615f01d..0000000000
--- a/files/fr/web/javascript/reference/global_objects/number/tostring/index.html
+++ /dev/null
@@ -1,117 +0,0 @@
----
-title: Number.prototype.toString()
-slug: Web/JavaScript/Reference/Global_Objects/Number/toString
-tags:
-  - JavaScript
-  - Méthode
-  - Number
-  - Prototype
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Number/toString
-original_slug: Web/JavaScript/Reference/Objets_globaux/Number/toString
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <code><strong>toString()</strong></code> renvoie une chaîne de caractère représentant l'objet Number.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/number-tostring.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>numObj</var>.toString([base])</pre>
-
-<h3 id="Paramètre">Paramètre</h3>
-
-<dl>
- <dt><code>base</code></dt>
- <dd>Paramètre optionnel. Un entier compris entre 2 et 36 qui indique la base du système numérique à utiliser pour représenter la valeur.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Une chaîne de caractères représentant l'objet {{jsxref("Number")}}.</p>
-
-<h3 id="Exception">Exception</h3>
-
-<dl>
- <dt>{{jsxref("RangeError")}}</dt>
- <dd>
- <p>Si <code>toString()</code> reçoit une base qui n'est pas comprise entre 2 et 36, une exception <code>RangeError</code> est levée.</p>
- </dd>
-</dl>
-
-<h2 id="Description">Description</h2>
-
-<p>L'objet {{jsxref("Number")}} surcharge la méthode <code>toString()</code> de {{jsxref("Object")}} et n'hérite donc pas de {{jsxref("Object.prototype.toString()")}}. Pour les objets <code>Number</code>, la méthode <code>toString()</code> renvoie une représentation du nombre, dans une base donnée, en une chaîne de caractères.</p>
-
-<p>La méthode <code>toString()</code> analyse son premier argument et tente de renvoyer une chaîne de caractères représentant le nombre en une base donnée. Pour les bases supérieures à 10, les lettres de l'alphabet sont utilisées pour représenter les numéraux supérieurs à 9. Par exemple, pour les nombres hexadécimaux (en base 16), les lettres <code>a</code> à <code>f</code> sont utilisées.</p>
-
-<p>Si la base n'est pas spécifiée, on utilisera la base 10 par défaut.</p>
-
-<p>Si l'objet <code>Number</code> est négatif, le signe sera conservé. Ceci, même si la base utilisée est la base 2 : la chaîne de caractères rendue sera la représentation binaire du nombre positif précédée par un signe -. La représentation <strong>n'est pas</strong> le complément à deux du nombre.</p>
-
-<p>Si l'objet <code>Number</code> n'est pas un nombre entier, le point (.) sera utilisé pour séparer la partie entière et décimale.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Utiliser_toString">Utiliser <code>toString</code></h3>
-
-<pre class="brush:js">var compte = 10;
-
-console.log(compte.toString());   // affiche "10"
-console.log((17).toString());     // affiche "17"
-console.log((17.2).toString());   // affiche "17.2"
-
-var x = 6;
-
-console.log(x.toString(2));       // affiche "110"
-console.log((254).toString(16));  // affiche "fe"
-
-
-console.log((-10).toString(2));   // affiche "-1010"
-console.log((-0xff).toString(2)); // affiche "-11111111"
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES1')}}</td>
-   <td>{{Spec2('ES1')}}</td>
-   <td>Définition initiale. Implémentée par JavaScript 1.1.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-15.7.4.2', 'Number.prototype.tostring')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-number.prototype.tostring', 'Number.prototype.tostring')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-number.prototype.tostring', 'Number.prototype.tostring')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Number.toString")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Number.prototype.toFixed()")}}</li>
- <li>{{jsxref("Number.prototype.toExponential()")}}</li>
- <li>{{jsxref("Number.prototype.toPrecision()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/number/tostring/index.md b/files/fr/web/javascript/reference/global_objects/number/tostring/index.md
new file mode 100644
index 0000000000..bf6933e12c
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/number/tostring/index.md
@@ -0,0 +1,87 @@
+---
+title: Number.prototype.toString()
+slug: Web/JavaScript/Reference/Global_Objects/Number/toString
+tags:
+  - JavaScript
+  - Méthode
+  - Number
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Number/toString
+original_slug: Web/JavaScript/Reference/Objets_globaux/Number/toString
+---
+{{JSRef}}
+
+La méthode **`toString()`** renvoie une chaîne de caractère représentant l'objet Number.
+
+{{EmbedInteractiveExample("pages/js/number-tostring.html")}}
+
+## Syntaxe
+
+    numObj.toString([base])
+
+### Paramètre
+
+- `base`
+  - : Paramètre optionnel. Un entier compris entre 2 et 36 qui indique la base du système numérique à utiliser pour représenter la valeur.
+
+### Valeur de retour
+
+Une chaîne de caractères représentant l'objet {{jsxref("Number")}}.
+
+### Exception
+
+- {{jsxref("RangeError")}}
+  - : Si `toString()` reçoit une base qui n'est pas comprise entre 2 et 36, une exception `RangeError` est levée.
+
+## Description
+
+L'objet {{jsxref("Number")}} surcharge la méthode `toString()` de {{jsxref("Object")}} et n'hérite donc pas de {{jsxref("Object.prototype.toString()")}}. Pour les objets `Number`, la méthode `toString()` renvoie une représentation du nombre, dans une base donnée, en une chaîne de caractères.
+
+La méthode `toString()` analyse son premier argument et tente de renvoyer une chaîne de caractères représentant le nombre en une base donnée. Pour les bases supérieures à 10, les lettres de l'alphabet sont utilisées pour représenter les numéraux supérieurs à 9. Par exemple, pour les nombres hexadécimaux (en base 16), les lettres `a` à `f` sont utilisées.
+
+Si la base n'est pas spécifiée, on utilisera la base 10 par défaut.
+
+Si l'objet `Number` est négatif, le signe sera conservé. Ceci, même si la base utilisée est la base 2 : la chaîne de caractères rendue sera la représentation binaire du nombre positif précédée par un signe -. La représentation **n'est pas** le complément à deux du nombre.
+
+Si l'objet `Number` n'est pas un nombre entier, le point (.) sera utilisé pour séparer la partie entière et décimale.
+
+## Exemples
+
+### Utiliser `toString`
+
+```js
+var compte = 10;
+
+console.log(compte.toString());   // affiche "10"
+console.log((17).toString());     // affiche "17"
+console.log((17.2).toString());   // affiche "17.2"
+
+var x = 6;
+
+console.log(x.toString(2));       // affiche "110"
+console.log((254).toString(16));  // affiche "fe"
+
+
+console.log((-10).toString(2));   // affiche "-1010"
+console.log((-0xff).toString(2)); // affiche "-11111111"
+```
+
+## Spécifications
+
+| Spécification                                                                                                        | État                         | Commentaires                                         |
+| -------------------------------------------------------------------------------------------------------------------- | ---------------------------- | ---------------------------------------------------- |
+| {{SpecName('ES1')}}                                                                                             | {{Spec2('ES1')}}         | Définition initiale. Implémentée par JavaScript 1.1. |
+| {{SpecName('ES5.1', '#sec-15.7.4.2', 'Number.prototype.tostring')}}                             | {{Spec2('ES5.1')}}     |                                                      |
+| {{SpecName('ES6', '#sec-number.prototype.tostring', 'Number.prototype.tostring')}}         | {{Spec2('ES6')}}         |                                                      |
+| {{SpecName('ESDraft', '#sec-number.prototype.tostring', 'Number.prototype.tostring')}} | {{Spec2('ESDraft')}} |                                                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Number.toString")}}
+
+## Voir aussi
+
+- {{jsxref("Number.prototype.toFixed()")}}
+- {{jsxref("Number.prototype.toExponential()")}}
+- {{jsxref("Number.prototype.toPrecision()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/number/valueof/index.html b/files/fr/web/javascript/reference/global_objects/number/valueof/index.html
deleted file mode 100644
index b90f4c4d93..0000000000
--- a/files/fr/web/javascript/reference/global_objects/number/valueof/index.html
+++ /dev/null
@@ -1,83 +0,0 @@
----
-title: Number.prototype.valueOf()
-slug: Web/JavaScript/Reference/Global_Objects/Number/valueOf
-tags:
-  - JavaScript
-  - Méthode
-  - Number
-  - Prototype
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Number/valueOf
-original_slug: Web/JavaScript/Reference/Objets_globaux/Number/valueOf
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <code><strong>valueOf()</strong></code> renvoie la valeur primitive correspondant à celle représentée par l'objet {{jsxref("Number")}}.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/number-valueof.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>objetNumber</var>.valueOf()</pre>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Un nombre qui représente la valeur primitive de l'objet {{jsxref("Number")}}.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>Cette méthode est généralement utilisée de façon interne au moteur JavaScript et n'est pas utilisée de façon explicite dans du code JavaScript.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Utiliser_valueOf">Utiliser <code>valueOf</code></h3>
-
-<pre class="brush:js">var numObj = new Number(10);
-console.log(typeof numObj); // object
-
-var num = numObj.valueOf();
-console.log(num);           // 10
-console.log(typeof num);    // number
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES1')}}</td>
-   <td>{{Spec2('ES1')}}</td>
-   <td>Définition initiale. Implémentée avec JavaScript 1.1.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-15.7.4.4', 'Number.prototype.valueOf')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-number.prototype.valueof', 'Number.prototype.valueOf')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-number.prototype.valueof', 'Number.prototype.valueOf')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Number.valueOf")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Number.prototype.toSource()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/number/valueof/index.md b/files/fr/web/javascript/reference/global_objects/number/valueof/index.md
new file mode 100644
index 0000000000..66b710fdce
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/number/valueof/index.md
@@ -0,0 +1,59 @@
+---
+title: Number.prototype.valueOf()
+slug: Web/JavaScript/Reference/Global_Objects/Number/valueOf
+tags:
+  - JavaScript
+  - Méthode
+  - Number
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Number/valueOf
+original_slug: Web/JavaScript/Reference/Objets_globaux/Number/valueOf
+---
+{{JSRef}}
+
+La méthode **`valueOf()`** renvoie la valeur primitive correspondant à celle représentée par l'objet {{jsxref("Number")}}.
+
+{{EmbedInteractiveExample("pages/js/number-valueof.html")}}
+
+## Syntaxe
+
+    objetNumber.valueOf()
+
+### Valeur de retour
+
+Un nombre qui représente la valeur primitive de l'objet {{jsxref("Number")}}.
+
+## Description
+
+Cette méthode est généralement utilisée de façon interne au moteur JavaScript et n'est pas utilisée de façon explicite dans du code JavaScript.
+
+## Exemples
+
+### Utiliser `valueOf`
+
+```js
+var numObj = new Number(10);
+console.log(typeof numObj); // object
+
+var num = numObj.valueOf();
+console.log(num);           // 10
+console.log(typeof num);    // number
+```
+
+## Spécifications
+
+| Spécification                                                                                                    | État                         | Commentaires                                          |
+| ---------------------------------------------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- |
+| {{SpecName('ES1')}}                                                                                         | {{Spec2('ES1')}}         | Définition initiale. Implémentée avec JavaScript 1.1. |
+| {{SpecName('ES5.1', '#sec-15.7.4.4', 'Number.prototype.valueOf')}}                         | {{Spec2('ES5.1')}}     |                                                       |
+| {{SpecName('ES6', '#sec-number.prototype.valueof', 'Number.prototype.valueOf')}}     | {{Spec2('ES6')}}         |                                                       |
+| {{SpecName('ESDraft', '#sec-number.prototype.valueof', 'Number.prototype.valueOf')}} | {{Spec2('ESDraft')}} |                                                       |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Number.valueOf")}}
+
+## Voir aussi
+
+- {{jsxref("Number.prototype.toSource()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/object/__definegetter__/index.html b/files/fr/web/javascript/reference/global_objects/object/__definegetter__/index.html
deleted file mode 100644
index 3f01c86cbc..0000000000
--- a/files/fr/web/javascript/reference/global_objects/object/__definegetter__/index.html
+++ /dev/null
@@ -1,100 +0,0 @@
----
-title: Object.prototype.__defineGetter__()
-slug: Web/JavaScript/Reference/Global_Objects/Object/__defineGetter__
-tags:
-  - Déprécié
-  - JavaScript
-  - Méthode
-  - Object
-  - Prototype
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Object/__defineGetter__
-original_slug: Web/JavaScript/Reference/Objets_globaux/Object/defineGetter
----
-<div>{{JSRef}}</div>
-
-<div class="warning">
-<p><strong>Attention :</strong> Cette fonctionnalité est dépréciée et il est préférable d'utiliser l'API {{jsxref("Object.defineProperty()")}} et <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Initialisateur_objet">la syntaxe d'initialisation d'objets</a>. Toutefois, <code>__defineGetter__</code> est largement utilisée sur le Web et est implémentée. Il est donc peu probable que les navigateurs retirent cette méthode.</p>
-</div>
-
-<p>La méthode <code><strong>__defineGetter__</strong></code> permet de lier une propriété d'un objet à une fonction à exécuter lorsqu'on accède à la propriété.</p>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>obj</var>.__defineGetter__(<var>prop</var>, <var>func</var>)</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>prop</code></dt>
- <dd>Une chaîne de caractères contenant le nom de la propriété à lier à la fonction donnée.</dd>
- <dt><code>func</code></dt>
- <dd>Une fonction à utiliser à chaque fois qu'on accède à la propriété.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>{{jsxref("undefined")}}.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>La méthode <code>__defineGetter__</code> permet de définir un {{jsxref("Opérateurs/L_opérateur_get", "accesseur", "", 1)}} sur un objet pré-existant.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<pre class="brush: js">// Méthode non-standard et dépréciée
-
-var o = {};
-o.__defineGetter__('gimmeFive', function() { return 5; });
-console.log(o.gimmeFive); // 5
-
-
-// Façon standard
-
-// En utilisant l'opérateur get
-var o = { get gimmeFive() { return 5; } };
-console.log(o.gimmeFive); // 5
-
-// En utilisant Object.defineProperty
-var o = {};
-Object.defineProperty(o, 'gimmeFive', {
-  get: function() {
-    return 5;
-  }
-});
-console.log(o.gimmeFive); // 5
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="spectable standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-object.prototype.__defineGetter__', 'Object.prototype.__defineGetter__()')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td>Incluse dans l'annexe normative pour les fonctionnalités historiques liées aux navigateurs web (la spécification codifie ce qui est déjà présent dans les différentes implémentations).</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Object.defineGetter")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Object.prototype.defineSetter","Object.prototype.__defineSetter__()")}}</li>
- <li>L'opérateur {{jsxref("Opérateurs/L_opérateur_get", "get")}}</li>
- <li>{{jsxref("Object.defineProperty()")}}</li>
- <li>{{jsxref("Object.prototype.lookupGetter","Object.prototype.__lookupGetter__()")}}</li>
- <li>{{jsxref("Object.prototype.lookupSetter","Object.prototype.__lookupSetter__()")}}</li>
- <li><a href="/fr/docs/Web/JavaScript/Guide/Utiliser_les_objets#D.C3.A9finir_des_getters_et_setters">Guide JavaScript : définir des getters et setters</a></li>
- <li><a href="https://whereswalden.com/2010/04/16/more-spidermonkey-changes-ancient-esoteric-very-rarely-used-syntax-for-creating-getters-and-setters-is-being-removed/">[Billet de blog] Deprecation of __defineGetter__ and __defineSetter__</a> (en anglais)</li>
- <li>{{bug(647423)}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/object/__definegetter__/index.md b/files/fr/web/javascript/reference/global_objects/object/__definegetter__/index.md
new file mode 100644
index 0000000000..d99c2177b1
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/object/__definegetter__/index.md
@@ -0,0 +1,101 @@
+---
+title: Object.prototype.__defineGetter__()
+slug: Web/JavaScript/Reference/Global_Objects/Object/__defineGetter__
+tags:
+  - Déprécié
+  - JavaScript
+  - Méthode
+  - Object
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/__defineGetter__
+original_slug: Web/JavaScript/Reference/Objets_globaux/Object/defineGetter
+---
+{{JSRef}}
+
+> **Attention :** Cette fonctionnalité est dépréciée et il est préférable d'utiliser l'API {{jsxref("Object.defineProperty()")}} et [la syntaxe d'initialisation d'objets](/fr/docs/Web/JavaScript/Reference/Opérateurs/Initialisateur_objet). Toutefois, `__defineGetter__` est largement utilisée sur le Web et est implémentée. Il est donc peu probable que les navigateurs retirent cette méthode.
+
+La méthode **`__defineGetter__`** permet de lier une propriété d'un objet à une fonction à exécuter lorsqu'on accède à la propriété.
+
+## Syntaxe
+
+    obj.__defineGetter__(prop, func)
+
+### Paramètres
+
+- `prop`
+  - : Une chaîne de caractères contenant le nom de la propriété à lier à la fonction donnée.
+- `func`
+  - : Une fonction à utiliser à chaque fois qu'on accède à la propriété.
+
+### Valeur de retour
+
+{{jsxref("undefined")}}.
+
+## Description
+
+La méthode `__defineGetter__` permet de définir un {{jsxref("Opérateurs/L_opérateur_get", "accesseur", "", 1)}} sur un objet pré-existant.
+
+## Exemples
+
+```js
+// Méthode non-standard et dépréciée
+
+var o = {};
+o.__defineGetter__('gimmeFive', function() { return 5; });
+console.log(o.gimmeFive); // 5
+
+
+// Façon standard
+
+// En utilisant l'opérateur get
+var o = { get gimmeFive() { return 5; } };
+console.log(o.gimmeFive); // 5
+
+// En utilisant Object.defineProperty
+var o = {};
+Object.defineProperty(o, 'gimmeFive', {
+  get: function() {
+    return 5;
+  }
+});
+console.log(o.gimmeFive); // 5
+```
+
+## Spécifications
+
+<table class="spectable standard-table">
+  <tbody>
+    <tr>
+      <th scope="col">Spécification</th>
+      <th scope="col">État</th>
+      <th scope="col">Commentaires</th>
+    </tr>
+    <tr>
+      <td>
+        {{SpecName('ESDraft', '#sec-object.prototype.__defineGetter__', 'Object.prototype.__defineGetter__()')}}
+      </td>
+      <td>{{Spec2('ESDraft')}}</td>
+      <td>
+        Incluse dans l'annexe normative pour les fonctionnalités historiques
+        liées aux navigateurs web (la spécification codifie ce qui est déjà
+        présent dans les différentes implémentations).
+      </td>
+    </tr>
+  </tbody>
+</table>
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Object.defineGetter")}}
+
+## Voir aussi
+
+- {{jsxref("Object.prototype.defineSetter","Object.prototype.__defineSetter__()")}}
+- L'opérateur {{jsxref("Opérateurs/L_opérateur_get", "get")}}
+- {{jsxref("Object.defineProperty()")}}
+- {{jsxref("Object.prototype.lookupGetter","Object.prototype.__lookupGetter__()")}}
+- {{jsxref("Object.prototype.lookupSetter","Object.prototype.__lookupSetter__()")}}
+- [Guide JavaScript : définir des getters et setters](/fr/docs/Web/JavaScript/Guide/Utiliser_les_objets#D.C3.A9finir_des_getters_et_setters)
+- [\[Billet de blog\] Deprecation of \_\_defineGetter\_\_ and \_\_defineSetter\_\_](https://whereswalden.com/2010/04/16/more-spidermonkey-changes-ancient-esoteric-very-rarely-used-syntax-for-creating-getters-and-setters-is-being-removed/) (en anglais)
+- {{bug(647423)}}
diff --git a/files/fr/web/javascript/reference/global_objects/object/__definesetter__/index.html b/files/fr/web/javascript/reference/global_objects/object/__definesetter__/index.html
deleted file mode 100644
index 18aeb80b46..0000000000
--- a/files/fr/web/javascript/reference/global_objects/object/__definesetter__/index.html
+++ /dev/null
@@ -1,112 +0,0 @@
----
-title: Object.prototype.__defineSetter__()
-slug: Web/JavaScript/Reference/Global_Objects/Object/__defineSetter__
-tags:
-  - JavaScript
-  - Méthode
-  - Object
-  - Prototype
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Object/__defineSetter__
-original_slug: Web/JavaScript/Reference/Objets_globaux/Object/defineSetter
----
-<div>{{JSRef}}</div>
-
-<div class="warning">
-<p><strong>Attention :</strong> Cette fonctionnalité est dépréciée et il est préférable d'utiliser l'API {{jsxref("Object.defineProperty()")}} et <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Initialisateur_objet">la syntaxe d'initialisation d'objets</a>. Toutefois, <code>__defineGetter__</code> est largement utilisée sur le Web et est implémentée. Il est donc peu probable que les navigateurs retirent cette méthode.</p>
-</div>
-
-<p>La méthode <code><strong>__defineSetter__</strong></code> permet de lier une propriété d'un objet à une fonction qui sera exécutée pour toute tentative de définition/changement de cette propriété.</p>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>obj</var>.__defineSetter__(<var>prop</var>, <var>fun</var>)</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>prop</code></dt>
- <dd>Une chaîne de caractères qui contient le nom de la propriété qu'on souhaite lier à la fonction.</dd>
- <dt><code>fun</code></dt>
- <dd>Une fonction à appeler pour chaque modification de la propriété. Cette fonction prend la forme suivante :
- <pre class="brush: js">function(<var>val</var>) { . . . }</pre>
-
- <dl>
-  <dt><code>val</code></dt>
-  <dd>Un alias pour la variable contenant la nouvelle valeur qu'on souhaite affecter à <code>prop</code>.</dd>
- </dl>
- </dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>{{jsxref("undefined")}}.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>La méthode <code>__defineSetter__</code> permet de définir un {{jsxref("Opérateurs/L_opérateur_set", "mutateur", "", 1)}} sur un objet pré-existant.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<pre class="brush: js">// Méthode non-standard et dépréciée
-
-var o = {};
-o.__defineSetter__('valeur', function(val) { this.uneAutreValeur = val; });
-o.valeur = 5;
-console.log(o.valeur); // undefined
-console.log(o.uneAutreValeur); // 5
-
-
-// Façons standard
-
-// En utilisant l'opérateur set
-var o = { set valeur(val) { this.uneAutreValeur = val; } };
-o.valeur = 5;
-console.log(o.valeur); // undefined
-console.log(o.uneAutreValeur); // 5
-
-// En utilisant Object.defineProperty
-var o = {};
-Object.defineProperty(o, 'valeur', {
-  set: function(val) {
-    this.uneAutreValeur = val;
-  }
-});
-o.valeur = 5;
-console.log(o.valeur); // undefined
-console.log(o.uneAutreValeur); // 5
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="spectable standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-object.prototype.__defineSetter__', 'Object.prototype.__defineSetter__()')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td>Incluse dans l'annexe normative pour les fonctionnalités historiques liées aux navigateurs web (la spécification codifie ce qui est déjà présent dans les différentes implémentations).</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Object.defineSetter")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Object.prototype.defineGetter","Object.prototype.__defineGetter__()")}}</li>
- <li>L'opérateur {{jsxref("Opérateurs/L_opérateur_set", "set")}}</li>
- <li>{{jsxref("Object.defineProperty()")}}</li>
- <li>{{jsxref("Object.prototype.lookupGetter","Object.prototype.__lookupGetter__()")}}</li>
- <li>{{jsxref("Object.prototype.lookupSetter","Object.prototype.__lookupSetter__()")}}</li>
- <li><a href="/fr/docs/Web/JavaScript/Guide/Utiliser_les_objets#D.C3.A9finir_des_getters_et_setters">Guide JavaScript : Définir des getters et setters</a></li>
- <li><a href="https://whereswalden.com/2010/04/16/more-spidermonkey-changes-ancient-esoteric-very-rarely-used-syntax-for-creating-getters-and-setters-is-being-removed/">[Billet de blog] Deprecation of __defineGetter__ and __defineSetter__</a> (en anglais)</li>
- <li>{{bug(647423)}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/object/__definesetter__/index.md b/files/fr/web/javascript/reference/global_objects/object/__definesetter__/index.md
new file mode 100644
index 0000000000..4e41c1b6a8
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/object/__definesetter__/index.md
@@ -0,0 +1,114 @@
+---
+title: Object.prototype.__defineSetter__()
+slug: Web/JavaScript/Reference/Global_Objects/Object/__defineSetter__
+tags:
+  - JavaScript
+  - Méthode
+  - Object
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/__defineSetter__
+original_slug: Web/JavaScript/Reference/Objets_globaux/Object/defineSetter
+---
+{{JSRef}}
+
+> **Attention :** Cette fonctionnalité est dépréciée et il est préférable d'utiliser l'API {{jsxref("Object.defineProperty()")}} et [la syntaxe d'initialisation d'objets](/fr/docs/Web/JavaScript/Reference/Opérateurs/Initialisateur_objet). Toutefois, `__defineGetter__` est largement utilisée sur le Web et est implémentée. Il est donc peu probable que les navigateurs retirent cette méthode.
+
+La méthode **`__defineSetter__`** permet de lier une propriété d'un objet à une fonction qui sera exécutée pour toute tentative de définition/changement de cette propriété.
+
+## Syntaxe
+
+    obj.__defineSetter__(prop, fun)
+
+### Paramètres
+
+- `prop`
+  - : Une chaîne de caractères qui contient le nom de la propriété qu'on souhaite lier à la fonction.
+- `fun`
+
+  - : Une fonction à appeler pour chaque modification de la propriété. Cette fonction prend la forme suivante :
+
+    ```js
+        function(val) { . . . }
+        ```
+
+    - `val`
+      - : Un alias pour la variable contenant la nouvelle valeur qu'on souhaite affecter à `prop`.
+
+### Valeur de retour
+
+{{jsxref("undefined")}}.
+
+## Description
+
+La méthode `__defineSetter__` permet de définir un {{jsxref("Opérateurs/L_opérateur_set", "mutateur", "", 1)}} sur un objet pré-existant.
+
+## Exemples
+
+```js
+// Méthode non-standard et dépréciée
+
+var o = {};
+o.__defineSetter__('valeur', function(val) { this.uneAutreValeur = val; });
+o.valeur = 5;
+console.log(o.valeur); // undefined
+console.log(o.uneAutreValeur); // 5
+
+
+// Façons standard
+
+// En utilisant l'opérateur set
+var o = { set valeur(val) { this.uneAutreValeur = val; } };
+o.valeur = 5;
+console.log(o.valeur); // undefined
+console.log(o.uneAutreValeur); // 5
+
+// En utilisant Object.defineProperty
+var o = {};
+Object.defineProperty(o, 'valeur', {
+  set: function(val) {
+    this.uneAutreValeur = val;
+  }
+});
+o.valeur = 5;
+console.log(o.valeur); // undefined
+console.log(o.uneAutreValeur); // 5
+```
+
+## Spécifications
+
+<table class="spectable standard-table">
+  <tbody>
+    <tr>
+      <th scope="col">Spécification</th>
+      <th scope="col">État</th>
+      <th scope="col">Commentaires</th>
+    </tr>
+    <tr>
+      <td>
+        {{SpecName('ESDraft', '#sec-object.prototype.__defineSetter__', 'Object.prototype.__defineSetter__()')}}
+      </td>
+      <td>{{Spec2('ESDraft')}}</td>
+      <td>
+        Incluse dans l'annexe normative pour les fonctionnalités historiques
+        liées aux navigateurs web (la spécification codifie ce qui est déjà
+        présent dans les différentes implémentations).
+      </td>
+    </tr>
+  </tbody>
+</table>
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Object.defineSetter")}}
+
+## Voir aussi
+
+- {{jsxref("Object.prototype.defineGetter","Object.prototype.__defineGetter__()")}}
+- L'opérateur {{jsxref("Opérateurs/L_opérateur_set", "set")}}
+- {{jsxref("Object.defineProperty()")}}
+- {{jsxref("Object.prototype.lookupGetter","Object.prototype.__lookupGetter__()")}}
+- {{jsxref("Object.prototype.lookupSetter","Object.prototype.__lookupSetter__()")}}
+- [Guide JavaScript : Définir des getters et setters](/fr/docs/Web/JavaScript/Guide/Utiliser_les_objets#D.C3.A9finir_des_getters_et_setters)
+- [\[Billet de blog\] Deprecation of \_\_defineGetter\_\_ and \_\_defineSetter\_\_](https://whereswalden.com/2010/04/16/more-spidermonkey-changes-ancient-esoteric-very-rarely-used-syntax-for-creating-getters-and-setters-is-being-removed/) (en anglais)
+- {{bug(647423)}}
diff --git a/files/fr/web/javascript/reference/global_objects/object/__lookupgetter__/index.html b/files/fr/web/javascript/reference/global_objects/object/__lookupgetter__/index.html
deleted file mode 100644
index a9f818ab42..0000000000
--- a/files/fr/web/javascript/reference/global_objects/object/__lookupgetter__/index.html
+++ /dev/null
@@ -1,88 +0,0 @@
----
-title: Object.prototype.__lookupGetter__()
-slug: Web/JavaScript/Reference/Global_Objects/Object/__lookupGetter__
-tags:
-  - Déprécié
-  - JavaScript
-  - Méthode
-  - Object
-  - Prototype
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Object/__lookupGetter__
-original_slug: Web/JavaScript/Reference/Objets_globaux/Object/lookupGetter
----
-<div>{{JSRef}} {{deprecated_header}}</div>
-
-<p>La méthode <code><strong>__lookupGetter__</strong></code> renvoie la fonction liée comme accesseur d'une propriété donnée.</p>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>obj</var>.__lookupGetter__(<var>sprop</var>)</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>sprop</code></dt>
- <dd>Une chaîne de caractères qui contient le nom de la propriété dont on souhaite obtenir l'accesseur (<em>getter</em>).</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>La fonction qui est l'accesseur lié à la propriété indiquée.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>Si un accesseur a été défini pour une propriété, il n'est pas possible d'obtenir la fonction utilisée en accédant à la propriété car on obtiendrait la valeur de retour de l'accesseur au lieu de l'accesseur lui-même. <code>__lookupGetter__</code> permet de récupérer la valeur de la fonction pour l'accesseur.</p>
-
-<p>Cette méthode ne doit plus être utilisée et il est possible de la remplacer de façon standard en utilisant : {{jsxref("Object.getOwnPropertyDescriptor()")}} et {{jsxref("Object.getPrototypeOf()")}}.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<pre class="brush: js">var obj = {
-  get toto() {
-    return Math.random() &gt; 0.5 ? 'toto' : 'truc';
-  }
-};
-
-
-// Méthode non-standard et dépréciée
-obj.__lookupGetter__('toto');
-// (function() { return Math.random() &gt; 0.5 ? 'toto' : 'truc'; })
-
-
-// Méthode standard
-Object.getOwnPropertyDescriptor(obj, "toto").get;
-// (function() { return Math.random() &gt; 0.5 ? 'toto' : 'truc'; })
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="spectable standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-object.prototype.__lookupGetter__', 'Object.prototype.__lookupGetter__()')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td>Incluse dans l'annexe normative pour les fonctionnalités historiques liées aux navigateurs web (la spécification codifie ce qui est déjà présent dans les différentes implémentations).</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Object.lookupGetter")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Object.prototype.lookupSetter","Object.prototype.__lookupSetter__()")}}</li>
- <li>L'opérateur {{jsxref("Fonctions/get", "get")}}</li>
- <li>{{jsxref("Object.getOwnPropertyDescriptor()")}} et {{jsxref("Object.getPrototypeOf()")}}</li>
- <li>{{jsxref("Object.prototype.defineGetter","Object.prototype.__defineGetter__()")}}</li>
- <li>{{jsxref("Object.prototype.defineSetter","Object.prototype.__defineSetter__()")}}</li>
- <li><a href="/fr/docs/Web/JavaScript/Guide/Utiliser_les_objets#D.C3.A9finir_des_getters_et_setters">Guide JavaScript : Définir des <em>getters</em> et <em>setters</em></a></li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/object/__lookupgetter__/index.md b/files/fr/web/javascript/reference/global_objects/object/__lookupgetter__/index.md
new file mode 100644
index 0000000000..e138933152
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/object/__lookupgetter__/index.md
@@ -0,0 +1,91 @@
+---
+title: Object.prototype.__lookupGetter__()
+slug: Web/JavaScript/Reference/Global_Objects/Object/__lookupGetter__
+tags:
+  - Déprécié
+  - JavaScript
+  - Méthode
+  - Object
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/__lookupGetter__
+original_slug: Web/JavaScript/Reference/Objets_globaux/Object/lookupGetter
+---
+{{JSRef}} {{deprecated_header}}
+
+La méthode **`__lookupGetter__`** renvoie la fonction liée comme accesseur d'une propriété donnée.
+
+## Syntaxe
+
+    obj.__lookupGetter__(sprop)
+
+### Paramètres
+
+- `sprop`
+  - : Une chaîne de caractères qui contient le nom de la propriété dont on souhaite obtenir l'accesseur (_getter_).
+
+### Valeur de retour
+
+La fonction qui est l'accesseur lié à la propriété indiquée.
+
+## Description
+
+Si un accesseur a été défini pour une propriété, il n'est pas possible d'obtenir la fonction utilisée en accédant à la propriété car on obtiendrait la valeur de retour de l'accesseur au lieu de l'accesseur lui-même. `__lookupGetter__` permet de récupérer la valeur de la fonction pour l'accesseur.
+
+Cette méthode ne doit plus être utilisée et il est possible de la remplacer de façon standard en utilisant : {{jsxref("Object.getOwnPropertyDescriptor()")}} et {{jsxref("Object.getPrototypeOf()")}}.
+
+## Exemples
+
+```js
+var obj = {
+  get toto() {
+    return Math.random() > 0.5 ? 'toto' : 'truc';
+  }
+};
+
+
+// Méthode non-standard et dépréciée
+obj.__lookupGetter__('toto');
+// (function() { return Math.random() > 0.5 ? 'toto' : 'truc'; })
+
+
+// Méthode standard
+Object.getOwnPropertyDescriptor(obj, "toto").get;
+// (function() { return Math.random() > 0.5 ? 'toto' : 'truc'; })
+```
+
+## Spécifications
+
+<table class="spectable standard-table">
+  <tbody>
+    <tr>
+      <th scope="col">Spécification</th>
+      <th scope="col">État</th>
+      <th scope="col">Commentaires</th>
+    </tr>
+    <tr>
+      <td>
+        {{SpecName('ESDraft', '#sec-object.prototype.__lookupGetter__', 'Object.prototype.__lookupGetter__()')}}
+      </td>
+      <td>{{Spec2('ESDraft')}}</td>
+      <td>
+        Incluse dans l'annexe normative pour les fonctionnalités historiques
+        liées aux navigateurs web (la spécification codifie ce qui est déjà
+        présent dans les différentes implémentations).
+      </td>
+    </tr>
+  </tbody>
+</table>
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Object.lookupGetter")}}
+
+## Voir aussi
+
+- {{jsxref("Object.prototype.lookupSetter","Object.prototype.__lookupSetter__()")}}
+- L'opérateur {{jsxref("Fonctions/get", "get")}}
+- {{jsxref("Object.getOwnPropertyDescriptor()")}} et {{jsxref("Object.getPrototypeOf()")}}
+- {{jsxref("Object.prototype.defineGetter","Object.prototype.__defineGetter__()")}}
+- {{jsxref("Object.prototype.defineSetter","Object.prototype.__defineSetter__()")}}
+- [Guide JavaScript : Définir des _getters_ et _setters_](/fr/docs/Web/JavaScript/Guide/Utiliser_les_objets#D.C3.A9finir_des_getters_et_setters)
diff --git a/files/fr/web/javascript/reference/global_objects/object/__lookupsetter__/index.html b/files/fr/web/javascript/reference/global_objects/object/__lookupsetter__/index.html
deleted file mode 100644
index 7cb7c1f88d..0000000000
--- a/files/fr/web/javascript/reference/global_objects/object/__lookupsetter__/index.html
+++ /dev/null
@@ -1,88 +0,0 @@
----
-title: Object.prototype.__lookupSetter__()
-slug: Web/JavaScript/Reference/Global_Objects/Object/__lookupSetter__
-tags:
-  - Déprécié
-  - JavaScript
-  - Méthode
-  - Object
-  - Prototype
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Object/__lookupSetter__
-original_slug: Web/JavaScript/Reference/Objets_globaux/Object/lookupSetter
----
-<div>{{JSRef}}{{deprecated_header}}</div>
-
-<p>La méthode <code><strong>__lookupSetter__</strong></code> renvoie la fonction définie comme mutateur pour une propriété donnée.</p>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>obj</var>.__lookupSetter__(<var>sprop</var>)</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>sprop</code></dt>
- <dd>Une chaîne qui contient le nom de la propriété dont on souhaite obtenir le mutateur correspondant.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>La fonction associée comme mutateur à la propriété indiquée.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>Si un mutateur a été défini pour une propriété, on ne peut pas l'obtenir en faisant référence à la propriété directement. <code>__lookupSetter__</code> peut être utilisée pour obtenir une référence vers la fonction utilisée comme mutateur.</p>
-
-<p>Cette méthode ne doit plus être utilisée et peut être remplacée avec la méthodes standard {{jsxref("Object.getOwnPropertyDescriptor()")}}.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<pre class="brush: js">var obj = {
-  set toto(valeur) {
-    this.truc = value;
-  }
-};
-
-
-// Méthode non-standard et dépréciée
-obj.__lookupSetter__('toto')
-// (function(valeur) { this.truc = valeur; })
-
-
-// Méthode standard
-Object.getOwnPropertyDescriptor(obj, "toto").set;
-// (function(valeur) { this.truc = valeur; })
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="spectable standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-object.prototype.__lookupSetter__', 'Object.prototype.__lookupSetter__()')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td>Incluse dans l'annexe normative pour les fonctionnalités historiques liées aux navigateurs web (la spécification codifie ce qui est déjà présent dans les différentes implémentations).</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Object.lookupSetter")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Object.prototype.lookupGetter","Object.prototype.__lookupGetter__()")}}</li>
- <li>L'opérateur {{jsxref("Fonctions/set", "set")}}</li>
- <li>{{jsxref("Object.getOwnPropertyDescriptor()")}} et {{jsxref("Object.getPrototypeOf()")}}</li>
- <li>{{jsxref("Object.prototype.defineGetter","Object.prototype.__defineGetter__()")}}</li>
- <li>{{jsxref("Object.prototype.defineSetter","Object.prototype.__defineSetter__()")}}</li>
- <li><a href="/fr/docs/Web/JavaScript/Guide/Utiliser_les_objets#D.C3.A9finir_des_getters_et_setters">Guide JavaScript : Utiliser des <em>getters</em> et <em>setters</em></a></li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/object/__lookupsetter__/index.md b/files/fr/web/javascript/reference/global_objects/object/__lookupsetter__/index.md
new file mode 100644
index 0000000000..259df1d603
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/object/__lookupsetter__/index.md
@@ -0,0 +1,91 @@
+---
+title: Object.prototype.__lookupSetter__()
+slug: Web/JavaScript/Reference/Global_Objects/Object/__lookupSetter__
+tags:
+  - Déprécié
+  - JavaScript
+  - Méthode
+  - Object
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/__lookupSetter__
+original_slug: Web/JavaScript/Reference/Objets_globaux/Object/lookupSetter
+---
+{{JSRef}}{{deprecated_header}}
+
+La méthode **`__lookupSetter__`** renvoie la fonction définie comme mutateur pour une propriété donnée.
+
+## Syntaxe
+
+    obj.__lookupSetter__(sprop)
+
+### Paramètres
+
+- `sprop`
+  - : Une chaîne qui contient le nom de la propriété dont on souhaite obtenir le mutateur correspondant.
+
+### Valeur de retour
+
+La fonction associée comme mutateur à la propriété indiquée.
+
+## Description
+
+Si un mutateur a été défini pour une propriété, on ne peut pas l'obtenir en faisant référence à la propriété directement. `__lookupSetter__` peut être utilisée pour obtenir une référence vers la fonction utilisée comme mutateur.
+
+Cette méthode ne doit plus être utilisée et peut être remplacée avec la méthodes standard {{jsxref("Object.getOwnPropertyDescriptor()")}}.
+
+## Exemples
+
+```js
+var obj = {
+  set toto(valeur) {
+    this.truc = value;
+  }
+};
+
+
+// Méthode non-standard et dépréciée
+obj.__lookupSetter__('toto')
+// (function(valeur) { this.truc = valeur; })
+
+
+// Méthode standard
+Object.getOwnPropertyDescriptor(obj, "toto").set;
+// (function(valeur) { this.truc = valeur; })
+```
+
+## Spécifications
+
+<table class="spectable standard-table">
+  <tbody>
+    <tr>
+      <th scope="col">Spécification</th>
+      <th scope="col">État</th>
+      <th scope="col">Commentaires</th>
+    </tr>
+    <tr>
+      <td>
+        {{SpecName('ESDraft', '#sec-object.prototype.__lookupSetter__', 'Object.prototype.__lookupSetter__()')}}
+      </td>
+      <td>{{Spec2('ESDraft')}}</td>
+      <td>
+        Incluse dans l'annexe normative pour les fonctionnalités historiques
+        liées aux navigateurs web (la spécification codifie ce qui est déjà
+        présent dans les différentes implémentations).
+      </td>
+    </tr>
+  </tbody>
+</table>
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Object.lookupSetter")}}
+
+## Voir aussi
+
+- {{jsxref("Object.prototype.lookupGetter","Object.prototype.__lookupGetter__()")}}
+- L'opérateur {{jsxref("Fonctions/set", "set")}}
+- {{jsxref("Object.getOwnPropertyDescriptor()")}} et {{jsxref("Object.getPrototypeOf()")}}
+- {{jsxref("Object.prototype.defineGetter","Object.prototype.__defineGetter__()")}}
+- {{jsxref("Object.prototype.defineSetter","Object.prototype.__defineSetter__()")}}
+- [Guide JavaScript : Utiliser des _getters_ et _setters_](/fr/docs/Web/JavaScript/Guide/Utiliser_les_objets#D.C3.A9finir_des_getters_et_setters)
diff --git a/files/fr/web/javascript/reference/global_objects/object/assign/index.html b/files/fr/web/javascript/reference/global_objects/object/assign/index.html
deleted file mode 100644
index ae556267bd..0000000000
--- a/files/fr/web/javascript/reference/global_objects/object/assign/index.html
+++ /dev/null
@@ -1,214 +0,0 @@
----
-title: Object.assign()
-slug: Web/JavaScript/Reference/Global_Objects/Object/assign
-tags:
-  - ECMAScript 2015
-  - JavaScript
-  - Méthode
-  - Object
-  - Reference
-  - polyfill
-translation_of: Web/JavaScript/Reference/Global_Objects/Object/assign
-original_slug: Web/JavaScript/Reference/Objets_globaux/Object/assign
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <code><strong>Object.assign()</strong></code> est utilisée afin de copier les valeurs de toutes les propriétés directes (non héritées) d'un objet qui sont énumérables sur un autre objet cible. Cette méthode renvoie l'objet cible.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/object-assign.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">Object.assign(<var>cible</var>, ...<var>sources</var>)</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>cible</code></dt>
- <dd>L'objet cible.</dd>
- <dt><code>sources</code></dt>
- <dd>Le(s) objet(s) source(s).</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>L'objet cible, éventuellement modifié, est renvoyé.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>La méthode <code>Object.assign</code> permet de ne copier que les propriétés énumérables et propres (les propriétés qui ne sont pas héritées) depuis un objet source vers un objet cible. Elle utilise <code>[[Get]]</code> sur l'objet source et <code>[[Set]]</code> sur l'objet cible, ainsi, elle déclenchera les accesseurs/mutateurs. De cette façon, elle <em>affecte</em> les propriétés plutôt que de juste les copier ou d'en définir de nouvelles. Aussi, il est déconseillé d'utiliser cette méthode si on souhaite uniquement fusionner de nouvelles propriétés dans un prototype si un des objets sources contient des accesseurs. Pour uniquement copier les définitions des propriétés (y compris leur énumérabilité) dans des prototypes, on utilisera plutôt {{jsxref("Object.getOwnPropertyDescriptor()")}} et {{jsxref("Object.defineProperty()")}}.</p>
-
-<p>Les propriétés {{jsxref("String")}} et {{jsxref("Symbol")}} sont copiées. Les propriétés de l'objet cible sont surchargées par celles de l'objet source si elles ont la même clé.</p>
-
-<p>En cas d'erreur, si une propriété n'est pas accessible en écriture par exemple, une exception {{jsxref("TypeError")}} sera levée mais l'objet cible aura été modifié avec les propriétés ajoutées avant l'erreur.</p>
-
-<p><code>Object.assign</code> ne donnera pas d'erreur si on fournit les valeurs {{jsxref("null")}} ou {{jsxref("undefined")}} pour la valeur source.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Cloner_un_objet">Cloner un objet</h3>
-
-<pre class="brush: js">var obj = { a: 1 };
-var copie = Object.assign({}, obj);
-console.log(copie); // {a: 1}</pre>
-
-<div class="note">
-<p><strong>Note :</strong> Attention, pour un clone réel (<em>deep clone</em>), il faudra utiliser d'autres méthodes car <code>Object.assign()</code> ne copie que les valeurs des propriétés depuis l'objet source, il ne recopie pas intégralement une nouvelle propriété. Si la valeur est une référence à un objet, il copiera uniquement la référence.</p>
-</div>
-
-<h3 id="Fusionner_des_objets">Fusionner des objets</h3>
-
-<pre class="brush: js">var o1 = { a: 1 };
-var o2 = { b: 2 };
-var o3 = { c: 3 };
-
-var obj = Object.assign(o1, o2, o3);
-console.log(obj); // { a: 1, b: 2, c: 3 }
-console.log(o1);  // { a: 1, b: 2, c: 3 }, l'objet cible est aussi modifié
-</pre>
-
-<h3 id="Fusionner_des_objets_partageant_des_propriétés">Fusionner des objets partageant des propriétés</h3>
-
-<pre class="brush: js">var o1 = { a: 1, b: 1, c: 1 };
-var o2 = { b: 2, c: 2 };
-var o3 = { c: 3 };
-
-var obj = Object.assign({}, o1, o2, o3);
-console.log(obj); // { a: 1, b: 2, c: 3 }
-</pre>
-
-<p>Les propriétés communes sont surchargées selon l'ordre des paramètres.</p>
-
-<h3 id="Copier_des_propriétés_symboliques">Copier des propriétés symboliques</h3>
-
-<pre class="brush: js">var o1 = { a: 1 };
-var o2 = { [Symbol('toto')]: 2 };
-
-var obj = Object.assign({}, o1, o2);
-console.log(obj); // { a: 1, [Symbol("toto")]: 2 }
-// Attention : dans Firefox le symbole n'est pas affiché
-// en raison du bug 1207182
-console.log(Object.getOwnPropertySymbols(obj)); // [Symbol(toto)]
-</pre>
-
-<h3 id="Les_propriétés_héritées_et_les_propriétés_non-énumérables_ne_peuvent_être_copiées">Les propriétés héritées et les propriétés non-énumérables ne peuvent être copiées</h3>
-
-<pre class="brush: js">var obj = Object.create({ toto: 1 }, { // toto est héritée
-  truc: {
-    value: 2  // truc est non-enumerable (par défaut)
-  },
-  bidule: {
-    value: 3,
-    enumerable: true  // bidule est une propriété propre et énumérable
-  }
-});
-
-var copie = Object.assign({}, obj);
-console.log(copie); // { bidule: 3 }
-</pre>
-
-<h3 id="Les_types_primitifs_seront_passés_en_objets">Les types primitifs seront passés en objets</h3>
-
-<pre class="brush: js">var v1 = 'abc';
-var v2 = true;
-var v3 = 10;
-var v4 = Symbol('toto')
-
-var obj = Object.assign({}, v1, null, v2, undefined, v3, v4);
-// Les valeurs primitives seront converties, null et undefined seront ignorés.
-// Note : seules les chaînes peuvent avoir des propriétés énumérables.
-console.log(obj); // { "0": "a", "1": "b", "2": "c" }
-</pre>
-
-<h3 id="Les_exceptions_interrompent_la_copie">Les exceptions interrompent la copie</h3>
-
-<pre class="brush: js">var target = Object.defineProperty({}, 'toto', {
-  value: 1,
-  writable: false
-}); // target.toto est en lecture seule
-
-Object.assign(target, { truc: 2 }, { toto2: 3, toto: 3, toto3: 3 }, { bidule: 4 });
-// TypeError: "toto" est en lecture seule
-// L'exception est levée lorsqu'on affecte target.toto
-
-console.log(target.truc);  // 2, le premier objet source est bien copié
-console.log(target.toto2); // 3, la première propriété du deuxième objet source est bien copiée
-console.log(target.toto);  // 1, on a une exception ici
-console.log(target.toto3); // undefined, assign est terminé toto3 ne sera pas copié
-console.log(target.bidule);// undefined, le troisième objet source ne sera pas copié non plus.
-</pre>
-
-<h3 id="Copier_des_accesseurs">Copier des accesseurs</h3>
-
-<pre class="brush: js">var obj = {
-  toto: 1,
-  get truc() {
-    return 2;
-  }
-};
-
-var copie = Object.assign({}, obj);
-console.log(copie);
-// { toto: 1, truc: 2 }, la valeur de copie.truc
-// est la valeur renvoyée par l'accesseur d'obj.truc.
-
-// Voici une fonction qui copie les descripteurs
-// dans leur intégralité
-function completeAssign(target, ...sources) {
-  sources.forEach(source =&gt; {
-    let descriptors = Object.keys(source).reduce((descriptors, key) =&gt; {
-      descriptors[key] = Object.getOwnPropertyDescriptor(source, key);
-      return descriptors;
-    }, {});
-    // Par défaut, Object.assign copie également
-    // les symboles énumérables
-    Object.getOwnPropertySymbols(source).forEach(sym =&gt; {
-      let descriptor = Object.getOwnPropertyDescriptor(source, sym);
-      if (descriptor.enumerable) {
-        descriptors[sym] = descriptor;
-      }
-    });
-    Object.defineProperties(target, descriptors);
-  });
-  return target;
-}
-
-var copie = completeAssign({}, obj);
-console.log(copie);
-// { toto:1, get truc() { return 2 } }</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-object.assign', 'Object.assign')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-object.assign', 'Object.assign')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Object.assign")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Object.defineProperties()")}}</li>
- <li><a href="/fr/docs/Web/JavaScript/Caractère_énumérable_des_propriétés_et_rattachement">Le caractère énumérable des propriétés</a></li>
- <li><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Syntaxe_décomposition#Utiliser_la_décomposition_avec_les_littéraux_objet">La décomposition des littéraux objets</a></li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/object/assign/index.md b/files/fr/web/javascript/reference/global_objects/object/assign/index.md
new file mode 100644
index 0000000000..25fcf21742
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/object/assign/index.md
@@ -0,0 +1,201 @@
+---
+title: Object.assign()
+slug: Web/JavaScript/Reference/Global_Objects/Object/assign
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Méthode
+  - Object
+  - Reference
+  - polyfill
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/assign
+original_slug: Web/JavaScript/Reference/Objets_globaux/Object/assign
+---
+{{JSRef}}
+
+La méthode **`Object.assign()`** est utilisée afin de copier les valeurs de toutes les propriétés directes (non héritées) d'un objet qui sont énumérables sur un autre objet cible. Cette méthode renvoie l'objet cible.
+
+{{EmbedInteractiveExample("pages/js/object-assign.html")}}
+
+## Syntaxe
+
+    Object.assign(cible, ...sources)
+
+### Paramètres
+
+- `cible`
+  - : L'objet cible.
+- `sources`
+  - : Le(s) objet(s) source(s).
+
+### Valeur de retour
+
+L'objet cible, éventuellement modifié, est renvoyé.
+
+## Description
+
+La méthode `Object.assign` permet de ne copier que les propriétés énumérables et propres (les propriétés qui ne sont pas héritées) depuis un objet source vers un objet cible. Elle utilise `[[Get]]` sur l'objet source et `[[Set]]` sur l'objet cible, ainsi, elle déclenchera les accesseurs/mutateurs. De cette façon, elle _affecte_ les propriétés plutôt que de juste les copier ou d'en définir de nouvelles. Aussi, il est déconseillé d'utiliser cette méthode si on souhaite uniquement fusionner de nouvelles propriétés dans un prototype si un des objets sources contient des accesseurs. Pour uniquement copier les définitions des propriétés (y compris leur énumérabilité) dans des prototypes, on utilisera plutôt {{jsxref("Object.getOwnPropertyDescriptor()")}} et {{jsxref("Object.defineProperty()")}}.
+
+Les propriétés {{jsxref("String")}} et {{jsxref("Symbol")}} sont copiées. Les propriétés de l'objet cible sont surchargées par celles de l'objet source si elles ont la même clé.
+
+En cas d'erreur, si une propriété n'est pas accessible en écriture par exemple, une exception {{jsxref("TypeError")}} sera levée mais l'objet cible aura été modifié avec les propriétés ajoutées avant l'erreur.
+
+`Object.assign` ne donnera pas d'erreur si on fournit les valeurs {{jsxref("null")}} ou {{jsxref("undefined")}} pour la valeur source.
+
+## Exemples
+
+### Cloner un objet
+
+```js
+var obj = { a: 1 };
+var copie = Object.assign({}, obj);
+console.log(copie); // {a: 1}
+```
+
+> **Note :** Attention, pour un clone réel (_deep clone_), il faudra utiliser d'autres méthodes car `Object.assign()` ne copie que les valeurs des propriétés depuis l'objet source, il ne recopie pas intégralement une nouvelle propriété. Si la valeur est une référence à un objet, il copiera uniquement la référence.
+
+### Fusionner des objets
+
+```js
+var o1 = { a: 1 };
+var o2 = { b: 2 };
+var o3 = { c: 3 };
+
+var obj = Object.assign(o1, o2, o3);
+console.log(obj); // { a: 1, b: 2, c: 3 }
+console.log(o1);  // { a: 1, b: 2, c: 3 }, l'objet cible est aussi modifié
+```
+
+### Fusionner des objets partageant des propriétés
+
+```js
+var o1 = { a: 1, b: 1, c: 1 };
+var o2 = { b: 2, c: 2 };
+var o3 = { c: 3 };
+
+var obj = Object.assign({}, o1, o2, o3);
+console.log(obj); // { a: 1, b: 2, c: 3 }
+```
+
+Les propriétés communes sont surchargées selon l'ordre des paramètres.
+
+### Copier des propriétés symboliques
+
+```js
+var o1 = { a: 1 };
+var o2 = { [Symbol('toto')]: 2 };
+
+var obj = Object.assign({}, o1, o2);
+console.log(obj); // { a: 1, [Symbol("toto")]: 2 }
+// Attention : dans Firefox le symbole n'est pas affiché
+// en raison du bug 1207182
+console.log(Object.getOwnPropertySymbols(obj)); // [Symbol(toto)]
+```
+
+### Les propriétés héritées et les propriétés non-énumérables ne peuvent être copiées
+
+```js
+var obj = Object.create({ toto: 1 }, { // toto est héritée
+  truc: {
+    value: 2  // truc est non-enumerable (par défaut)
+  },
+  bidule: {
+    value: 3,
+    enumerable: true  // bidule est une propriété propre et énumérable
+  }
+});
+
+var copie = Object.assign({}, obj);
+console.log(copie); // { bidule: 3 }
+```
+
+### Les types primitifs seront passés en objets
+
+```js
+var v1 = 'abc';
+var v2 = true;
+var v3 = 10;
+var v4 = Symbol('toto')
+
+var obj = Object.assign({}, v1, null, v2, undefined, v3, v4);
+// Les valeurs primitives seront converties, null et undefined seront ignorés.
+// Note : seules les chaînes peuvent avoir des propriétés énumérables.
+console.log(obj); // { "0": "a", "1": "b", "2": "c" }
+```
+
+### Les exceptions interrompent la copie
+
+```js
+var target = Object.defineProperty({}, 'toto', {
+  value: 1,
+  writable: false
+}); // target.toto est en lecture seule
+
+Object.assign(target, { truc: 2 }, { toto2: 3, toto: 3, toto3: 3 }, { bidule: 4 });
+// TypeError: "toto" est en lecture seule
+// L'exception est levée lorsqu'on affecte target.toto
+
+console.log(target.truc);  // 2, le premier objet source est bien copié
+console.log(target.toto2); // 3, la première propriété du deuxième objet source est bien copiée
+console.log(target.toto);  // 1, on a une exception ici
+console.log(target.toto3); // undefined, assign est terminé toto3 ne sera pas copié
+console.log(target.bidule);// undefined, le troisième objet source ne sera pas copié non plus.
+```
+
+### Copier des accesseurs
+
+```js
+var obj = {
+  toto: 1,
+  get truc() {
+    return 2;
+  }
+};
+
+var copie = Object.assign({}, obj);
+console.log(copie);
+// { toto: 1, truc: 2 }, la valeur de copie.truc
+// est la valeur renvoyée par l'accesseur d'obj.truc.
+
+// Voici une fonction qui copie les descripteurs
+// dans leur intégralité
+function completeAssign(target, ...sources) {
+  sources.forEach(source => {
+    let descriptors = Object.keys(source).reduce((descriptors, key) => {
+      descriptors[key] = Object.getOwnPropertyDescriptor(source, key);
+      return descriptors;
+    }, {});
+    // Par défaut, Object.assign copie également
+    // les symboles énumérables
+    Object.getOwnPropertySymbols(source).forEach(sym => {
+      let descriptor = Object.getOwnPropertyDescriptor(source, sym);
+      if (descriptor.enumerable) {
+        descriptors[sym] = descriptor;
+      }
+    });
+    Object.defineProperties(target, descriptors);
+  });
+  return target;
+}
+
+var copie = completeAssign({}, obj);
+console.log(copie);
+// { toto:1, get truc() { return 2 } }
+```
+
+## Spécifications
+
+| Spécification                                                                        | État                         | Commentaires         |
+| ------------------------------------------------------------------------------------ | ---------------------------- | -------------------- |
+| {{SpecName('ES2015', '#sec-object.assign', 'Object.assign')}}     | {{Spec2('ES2015')}}     | Définition initiale. |
+| {{SpecName('ESDraft', '#sec-object.assign', 'Object.assign')}} | {{Spec2('ESDraft')}} |                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Object.assign")}}
+
+## Voir aussi
+
+- {{jsxref("Object.defineProperties()")}}
+- [Le caractère énumérable des propriétés](/fr/docs/Web/JavaScript/Caractère_énumérable_des_propriétés_et_rattachement)
+- [La décomposition des littéraux objets](/fr/docs/Web/JavaScript/Reference/Opérateurs/Syntaxe_décomposition#Utiliser_la_décomposition_avec_les_littéraux_objet)
diff --git a/files/fr/web/javascript/reference/global_objects/object/constructor/index.html b/files/fr/web/javascript/reference/global_objects/object/constructor/index.html
deleted file mode 100644
index 956a508206..0000000000
--- a/files/fr/web/javascript/reference/global_objects/object/constructor/index.html
+++ /dev/null
@@ -1,230 +0,0 @@
----
-title: Object.prototype.constructor
-slug: Web/JavaScript/Reference/Global_Objects/Object/constructor
-tags:
-  - JavaScript
-  - Object
-  - Propriété
-  - Prototype
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Object/constructor
-original_slug: Web/JavaScript/Reference/Objets_globaux/Object/constructor
----
-<div>{{JSRef}}</div>
-
-<p>La propriété <code><strong>constructor</strong></code> renvoie une référence à la fonction {{jsxref("Object")}} qui a créé le prototype de l'instance. La valeur de cette propriété est une référence à la fonction elle-même, ce n'est pas une chaîne de caractères représentant le nom de la fonction. Cette valeur est en lecture seule pour les valeurs de types primitifs comme <code>1</code>, <code>true</code> et <code>"test"</code>.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>Tous les objets héritent d'une propriété <code>constructor</code> de leur prototype (à l'exception de ceux créés avec <code>Object.create(null)</code>). Les objets créés sans constructeur (c'est-à-dire avec des littéraux) auront le constructeur correspondant au type du littéral :</p>
-
-<pre class="brush:js">var o = {};
-o.constructor === Object; // true
-
-var a = [];
-a.constructor === Array; // true
-
-var n = new Number(3)
-n.constructor === Number; // true</pre>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Afficher_le_constructeur_d'un_objet">Afficher le constructeur d'un objet</h3>
-
-<p>L'exemple ci-dessous crée un constructeur <code>Arbre</code>, et un objet de ce type, <code>monArbre</code>. Le script affiche ensuite la propriété <code>constructor</code> de l'objet <code>monArbre</code> :</p>
-
-<pre class="brush:js">function Arbre(nom) {
-   this.nom = nom;
-}
-
-var monArbre = new Arbre("Sequoia");
-console.log( "monArbre.constructor vaut " + monArbre.constructor );</pre>
-
-<p>Cet exemple produira le résultat suivant :</p>
-
-<pre class="brush:js">monArbre.constructor vaut function Arbre(nom) {
-    this.nom = nom;
-}</pre>
-
-<h3 id="Modifier_le_constructeur_d'un_objet">Modifier le constructeur d'un objet</h3>
-
-<p>Dans l'exemple suivant, on illustre comment modifier la valeur d'un constructeur pour les objets génériques. Dans l'exemple suivant, seules les valeurs <code>true</code>, <code>1</code> et <code>"test"</code> ne seront pas affectées car leurs constructeurs sont en lecture seule uniquement. Cet exemple montre qu'il ne faut pas se reposer de façon aveugle sur la propriété <code>constructor</code> d'un objet.</p>
-
-<pre class="brush:js">function Type () {}
-
-var types = [
-  new Array(),
-  [],
-  new Boolean(),
-  true,             // restera tel quel
-  new Date(),
-  new Error(),
-  new Function(),
-  function () {},
-  Math,
-  new Number(),
-  1,                // restera tel quel
-  new Object(),
-  {},
-  new RegExp(),
-  /(?:)/,
-  new String(),
-  'test'            // restera tel quel
-];
-
-for (var i = 0; i &lt; types.length; i++) {
-  types[i].constructor = Type;
-  types[i] = [types[i].constructor, types[i] instanceof Type, types[i].toString()];
-}
-
-console.log(types.join('\n'));
-</pre>
-
-<p>L'exemple produira le résultat suivant :</p>
-
-<pre class="brush: js">function Type() {},false,
-function Type() {},false,
-function Type() {},false,false
-function Boolean() {
-    [native code]
-},false,true
-function Type() {},false,Mon Sep 01 2014 16:03:49 GMT+0600
-function Type() {},false,Error
-function Type() {},false,function anonymous() {
-
-}
-function Type() {},false,function () {}
-function Type() {},false,[object Math]
-function Type() {},false,0
-function Number() {
-    [native code]
-},false,1
-function Type() {},false,[object Object]
-function Type() {},false,[object Object]
-function Type() {},false,/(?:)/
-function Type() {},false,/(?:)/
-function Type() {},false,
-function String() {
-    [native code]
-},false,test
-</pre>
-
-<h3 id="Modifier_le_constructeur_d'une_fonction">Modifier le constructeur d'une fonction</h3>
-
-<p>La plupart du temps, cette  propriété est utilisée afin de définir une fonction en tant que constructeur, c'est-à-dire qu'on l'appellera avec <code><strong>new</strong></code> et en « attachant » la chaîne de prototypes.</p>
-
-<pre class="brush: js">function Parent() {}
-Parent.prototype.parentMethod = function parentMethod() {};
-
-function Child() {}
-// on redefinit le prototype de child afin qu'il pointe vers celui de Parent
-Child.prototype = Object.create(Parent.prototype);
-
-Child.prototype.constructor = Child; // on renvoie le constructeur original Child</pre>
-
-<p>Pourquoi faut-il écrire cette dernière ligne ? Eh bien, ça dépend.</p>
-
-<p>Essayons de définir les cas où il est nécessaire de réaffecter le constructeur original et les cas où c'est superflu.</p>
-
-<p>Imaginons que l'objet possède une méthode <code>create()</code> qui lui permette de créer un autre exemplaire :</p>
-
-<pre class="brush: js">function Parent() {};
-function CreatedConstructor() {}
-
-CreatedConstructor.prototype = Object.create(Parent.prototype);
-
-CreatedConstructor.prototype.create = function create() {
-  return new this.constructor();
-}
-
-new CreatedConstructor().create().create();
-// error undefined is not a function car constructor === Parent</pre>
-
-<p>Dans l'exemple précédent, on a une exception car le constructeur pointe vers <code>Parent</code>.</p>
-
-<p>Pour éviter cet écueil, il suffit d'affecter le bon constructeur (celui qui sera utilisé ensuite) :</p>
-
-<pre class="brush: js">function Parent() {};
-function CreatedConstructor() {}
-
-CreatedConstructor.prototype = Object.create(Parent.prototype);
-// On réaffecte le bon constructeur afin de l'utiliser plus loin
-CreatedConstructor.prototype.constructor = CreatedConstructor;
-
-CreatedConstructor.prototype.create = function create() {
-  return new this.constructor();
-}
-
-new CreatedConstructor().create().create();
-// pas d'exception cette fois-ci</pre>
-
-<p>Prenons un autre exemple :</p>
-
-<pre class="brush: js">function ParentWithStatic() {}
-
-ParentWithStatic.startPosition = { x: 0, y:0 };
-ParentWithStatic.getStartPosition = function getStartPosition() {
-  return this.startPosition;
-}
-
-function Child(x, y) {
-  this.position = {
-    x: x,
-    y: y
-  };
-}
-
-Child.prototype = Object.create(ParentWithStatic.prototype);
-Child.prototype.constructor = Child;
-
-Child.prototype.getOffsetByInitialPosition = function getOffsetByInitialPosition() {
-  var position = this.position;
-  var startPosition = this.constructor.getStartPosition(); // error undefined is not a function, since the constructor is Child
-
-  return {
-    offsetX: startPosition.x - position.x,
-    offsetY: startPosition.y - position.y
-  }
-};</pre>
-
-<p>Ici, il faudra conserverr le constructeur parent si on veut que le code fonctionne correctement.</p>
-
-<p>En résumé, lorsqu'on paramètre manuellement le constructeur, on peut obtenir des résultats sources de confusion. La plupart du temps, la propriété <code>constructor</code> n'est pas utilisée et la réaffecter n'est pas nécessaire.</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('ES1')}}</td>
-   <td>{{Spec2('ES1')}}</td>
-   <td>Définition initiale. Implémentée avec JavaScript 1.1.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-15.2.4.1', 'Object.prototype.constructor')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-object.prototype.constructor', 'Object.prototype.constructor')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-object.prototype.constructor', 'Object.prototype.constructor')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Object.constructor")}}</p>
diff --git a/files/fr/web/javascript/reference/global_objects/object/constructor/index.md b/files/fr/web/javascript/reference/global_objects/object/constructor/index.md
new file mode 100644
index 0000000000..e52db432fa
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/object/constructor/index.md
@@ -0,0 +1,221 @@
+---
+title: Object.prototype.constructor
+slug: Web/JavaScript/Reference/Global_Objects/Object/constructor
+tags:
+  - JavaScript
+  - Object
+  - Propriété
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/constructor
+original_slug: Web/JavaScript/Reference/Objets_globaux/Object/constructor
+---
+{{JSRef}}
+
+La propriété **`constructor`** renvoie une référence à la fonction {{jsxref("Object")}} qui a créé le prototype de l'instance. La valeur de cette propriété est une référence à la fonction elle-même, ce n'est pas une chaîne de caractères représentant le nom de la fonction. Cette valeur est en lecture seule pour les valeurs de types primitifs comme `1`, `true` et `"test"`.
+
+## Description
+
+Tous les objets héritent d'une propriété `constructor` de leur prototype (à l'exception de ceux créés avec `Object.create(null)`). Les objets créés sans constructeur (c'est-à-dire avec des littéraux) auront le constructeur correspondant au type du littéral :
+
+```js
+var o = {};
+o.constructor === Object; // true
+
+var a = [];
+a.constructor === Array; // true
+
+var n = new Number(3)
+n.constructor === Number; // true
+```
+
+## Exemples
+
+### Afficher le constructeur d'un objet
+
+L'exemple ci-dessous crée un constructeur `Arbre`, et un objet de ce type, `monArbre`. Le script affiche ensuite la propriété `constructor` de l'objet `monArbre` :
+
+```js
+function Arbre(nom) {
+   this.nom = nom;
+}
+
+var monArbre = new Arbre("Sequoia");
+console.log( "monArbre.constructor vaut " + monArbre.constructor );
+```
+
+Cet exemple produira le résultat suivant :
+
+```js
+monArbre.constructor vaut function Arbre(nom) {
+    this.nom = nom;
+}
+```
+
+### Modifier le constructeur d'un objet
+
+Dans l'exemple suivant, on illustre comment modifier la valeur d'un constructeur pour les objets génériques. Dans l'exemple suivant, seules les valeurs `true`, `1` et `"test"` ne seront pas affectées car leurs constructeurs sont en lecture seule uniquement. Cet exemple montre qu'il ne faut pas se reposer de façon aveugle sur la propriété `constructor` d'un objet.
+
+```js
+function Type () {}
+
+var types = [
+  new Array(),
+  [],
+  new Boolean(),
+  true,             // restera tel quel
+  new Date(),
+  new Error(),
+  new Function(),
+  function () {},
+  Math,
+  new Number(),
+  1,                // restera tel quel
+  new Object(),
+  {},
+  new RegExp(),
+  /(?:)/,
+  new String(),
+  'test'            // restera tel quel
+];
+
+for (var i = 0; i < types.length; i++) {
+  types[i].constructor = Type;
+  types[i] = [types[i].constructor, types[i] instanceof Type, types[i].toString()];
+}
+
+console.log(types.join('\n'));
+```
+
+L'exemple produira le résultat suivant :
+
+```js
+function Type() {},false,
+function Type() {},false,
+function Type() {},false,false
+function Boolean() {
+    [native code]
+},false,true
+function Type() {},false,Mon Sep 01 2014 16:03:49 GMT+0600
+function Type() {},false,Error
+function Type() {},false,function anonymous() {
+
+}
+function Type() {},false,function () {}
+function Type() {},false,[object Math]
+function Type() {},false,0
+function Number() {
+    [native code]
+},false,1
+function Type() {},false,[object Object]
+function Type() {},false,[object Object]
+function Type() {},false,/(?:)/
+function Type() {},false,/(?:)/
+function Type() {},false,
+function String() {
+    [native code]
+},false,test
+```
+
+### Modifier le constructeur d'une fonction
+
+La plupart du temps, cette  propriété est utilisée afin de définir une fonction en tant que constructeur, c'est-à-dire qu'on l'appellera avec **`new`** et en « attachant » la chaîne de prototypes.
+
+```js
+function Parent() {}
+Parent.prototype.parentMethod = function parentMethod() {};
+
+function Child() {}
+// on redefinit le prototype de child afin qu'il pointe vers celui de Parent
+Child.prototype = Object.create(Parent.prototype);
+
+Child.prototype.constructor = Child; // on renvoie le constructeur original Child
+```
+
+Pourquoi faut-il écrire cette dernière ligne ? Eh bien, ça dépend.
+
+Essayons de définir les cas où il est nécessaire de réaffecter le constructeur original et les cas où c'est superflu.
+
+Imaginons que l'objet possède une méthode `create()` qui lui permette de créer un autre exemplaire :
+
+```js
+function Parent() {};
+function CreatedConstructor() {}
+
+CreatedConstructor.prototype = Object.create(Parent.prototype);
+
+CreatedConstructor.prototype.create = function create() {
+  return new this.constructor();
+}
+
+new CreatedConstructor().create().create();
+// error undefined is not a function car constructor === Parent
+```
+
+Dans l'exemple précédent, on a une exception car le constructeur pointe vers `Parent`.
+
+Pour éviter cet écueil, il suffit d'affecter le bon constructeur (celui qui sera utilisé ensuite) :
+
+```js
+function Parent() {};
+function CreatedConstructor() {}
+
+CreatedConstructor.prototype = Object.create(Parent.prototype);
+// On réaffecte le bon constructeur afin de l'utiliser plus loin
+CreatedConstructor.prototype.constructor = CreatedConstructor;
+
+CreatedConstructor.prototype.create = function create() {
+  return new this.constructor();
+}
+
+new CreatedConstructor().create().create();
+// pas d'exception cette fois-ci
+```
+
+Prenons un autre exemple :
+
+```js
+function ParentWithStatic() {}
+
+ParentWithStatic.startPosition = { x: 0, y:0 };
+ParentWithStatic.getStartPosition = function getStartPosition() {
+  return this.startPosition;
+}
+
+function Child(x, y) {
+  this.position = {
+    x: x,
+    y: y
+  };
+}
+
+Child.prototype = Object.create(ParentWithStatic.prototype);
+Child.prototype.constructor = Child;
+
+Child.prototype.getOffsetByInitialPosition = function getOffsetByInitialPosition() {
+  var position = this.position;
+  var startPosition = this.constructor.getStartPosition(); // error undefined is not a function, since the constructor is Child
+
+  return {
+    offsetX: startPosition.x - position.x,
+    offsetY: startPosition.y - position.y
+  }
+};
+```
+
+Ici, il faudra conserverr le constructeur parent si on veut que le code fonctionne correctement.
+
+En résumé, lorsqu'on paramètre manuellement le constructeur, on peut obtenir des résultats sources de confusion. La plupart du temps, la propriété `constructor` n'est pas utilisée et la réaffecter n'est pas nécessaire.
+
+## Spécifications
+
+| Spécification                                                                                                                | Statut                       | Commentaires                                          |
+| ---------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- |
+| {{SpecName('ES1')}}                                                                                                     | {{Spec2('ES1')}}         | Définition initiale. Implémentée avec JavaScript 1.1. |
+| {{SpecName('ES5.1', '#sec-15.2.4.1', 'Object.prototype.constructor')}}                                 | {{Spec2('ES5.1')}}     |                                                       |
+| {{SpecName('ES6', '#sec-object.prototype.constructor', 'Object.prototype.constructor')}}         | {{Spec2('ES6')}}         |                                                       |
+| {{SpecName('ESDraft', '#sec-object.prototype.constructor', 'Object.prototype.constructor')}} | {{Spec2('ESDraft')}} |                                                       |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Object.constructor")}}
diff --git a/files/fr/web/javascript/reference/global_objects/object/create/index.html b/files/fr/web/javascript/reference/global_objects/object/create/index.html
deleted file mode 100644
index 016638fa7f..0000000000
--- a/files/fr/web/javascript/reference/global_objects/object/create/index.html
+++ /dev/null
@@ -1,215 +0,0 @@
----
-title: Object.create()
-slug: Web/JavaScript/Reference/Global_Objects/Object/create
-tags:
-  - ECMAScript 5
-  - JavaScript
-  - Méthode
-  - Object
-  - Reference
-  - polyfill
-translation_of: Web/JavaScript/Reference/Global_Objects/Object/create
-original_slug: Web/JavaScript/Reference/Objets_globaux/Object/create
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <code><strong>Object.create()</strong></code> crée un nouvel objet avec un prototype donné et des propriétés données.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/object-create.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">Object.create(<var>proto</var>)
-Object.create(proto, <em>objetP</em><var>ropriétés</var>)</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>proto</code></dt>
- <dd>L'objet qui sera le prototype du nouvel objet créé.</dd>
- <dt><code>objetPropriétés</code></dt>
- <dd>Paramètre optionnel. S'il est fourni et qu'il ne vaut pas {{jsxref("undefined")}}, il sera utilisé comme un objet dont les propriétés propres (celles qui ne sont pas héritées par la chaîne de prototypes) et énumérables définiront des descripteurs pour les propriétés à ajouter au nouvel objet, avec les mêmes noms. Ces propriétés correspondent au deuxième argument de {{jsxref("Object.defineProperties()")}}.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Un nouvel objet qui dispose du prototype et des propriétés indiquées.</p>
-
-<h3 id="Exceptions">Exceptions</h3>
-
-<p>Cette méthode lève une exception {{jsxref("TypeError")}} si le paramètre <code>objetPropriétés</code> vaut {{jsxref("null")}} ou s'il ne décrit pas des propriétés d'un objet.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="L'héritage_classique_avec_Object.create()">L'héritage classique avec <code>Object.create()</code></h3>
-
-<p>Dans l'exemple ci-dessous, on utilise <code>Object.create()</code> afin de réaliser un héritage de classe. Ce modèle ne supporte que l'héritage unique (un objet hérite directement uniquement d'un autre objet) car JavaScript ne gère pas l'héritage multiple.</p>
-
-<pre class="brush: js">// Forme, la classe parente
-function Forme() {
-  this.x = 0;
-  this.y = 0;
-}
-
-// Méthode de la classe parente
-Forme.prototype.déplacer = function(x, y) {
-  this.x += x;
-  this.y += y;
-  console.info('Forme déplacée.');
-};
-
-// Rectangle - classe fille
-function Rectangle() {
-  // on appelle le constructeur parent
-  Forme.call(this);
-}
-
-// La classe fille surcharge la classe parente
-Rectangle.prototype = Object.create(Forme.prototype);
-
-// Si on ne définit pas le constructeur avec Rectangle, il récupèrera le constructeur
-// Forme (le parent).
-Rectangle.prototype.constructor = Rectangle;
-
-var rect = new Rectangle();
-
-console.log('instance de Rectangle ? ', (rect instanceof Rectangle));
-// true
-console.log('une instance de Forme ? ', (rect instanceof Forme));
- // true
-rect.déplacer(1, 1);
-// Affiche 'Forme déplacée.'
-</pre>
-
-<p>Si on souhaite hériter de plusieurs objets, on peut utiliser des <em>mixins</em>.</p>
-
-<pre class="brush: js">function MaClasse() {
-  ClasseParente1.call(this);
-  ClasseParente2.call(this);
-}
-
-MaClasse.prototype = Object.create(ClasseParente1.prototype); // héritage d'une classe
-Object.assign(MaClasse.prototype, ClasseParente2.prototype); // mixin pour une autre
-MaClasse.prototype.constructor = MaClasse; // On réaffecte le constructeur
-
-MaClasse.prototype.maMéthode = function() {
-  // faire quelque chose
-};
-</pre>
-
-<p>Ici, la méthode {{jsxref("Object.assign()")}} copie les propriétés du prototype de la classe parente (<code>ClassParente2</code>) sur le prototype de la classe fille (<code>MaClasse</code>), les rendant disponibles pour toutes les instances de <code>MaClasse</code>. <code>Object.assign()</code> a été introduit avec ES2015 et <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object/assign#Prothèse_d'émulation_(polyfill)">une prothèse d'émulation (polyfill)</a> est disponible. Si le support des navigateurs plus anciens est nécessaire, les méthodes <code><a href="https://api.jquery.com/jQuery.extend/">jQuery.extend()</a></code> ou <code><a href="https://lodash.com/docs/#assign">_.assign()</a></code> (Lodash) peuvent être utilisées.</p>
-
-<h3 id="Utiliser_l'argument_objetPropriétés_avec_Object.create()">Utiliser l'argument <code>objetPropriétés</code> avec <code>Object.create()</code></h3>
-
-<pre class="brush: js">var o;
-
-// on crée un objet avec null
-// comme prototype
-o = Object.create(null);
-
-
-o = {};
-// est équivalent à :
-o = Object.create(Object.prototype);
-
-
-// Exemple où on crée un objet avec quelques propriétés
-// (On voit ici que le second paramètres fait correspondre les clés
-// avec des descripteurs de propriétés.)
-o = Object.create(Object.prototype, {
-  // toto est une propriété de donnée
-  toto: { writable: true, configurable: true, value: 'hello' },
-  // truc est une propriété d'accesseur/mutateur
-  truc: {
-    configurable: false,
-    get: function() { return 10; },
-    set: function(value) { console.log('Définir `o.truc` à', value); }
-/* avec les accesseurs ES2015 on aura :
-    get() { return 10; },
-    set(value) { console.log('Définir `o.truc` à', value); } */
-  }
-});
-
-
-function Constructeur() {}
-o = new Constructeur();
-// est équivalent à :
-o = Object.create(Constructeur.prototype);
-// Bien entendu, si la fonction Constructeur
-// possède des instructions pour l'initialisation,
-// Object.create() ne pourra pas le reproduire
-
-
-// on crée un nouvel objet dont le prototype est
-// un nouvel objet vide et on y ajoute une propriété
-// 'p' qui vaut 42
-o = Object.create({}, { p: { value: 42 } });
-
-// par défaut, les propriétés ne sont PAS
-// écrivables, énumérables ou configurables
-o.p = 24;
-o.p;
-// 42
-
-o.q = 12;
-for (var prop in o) {
-  console.log(prop);
-}
-// 'q'
-
-delete o.p;
-// false
-
-// Pour définir une propriété selon ES3
-o2 = Object.create({}, {
-  p: {
-    value: 42,
-    writable: true,
-    enumerable: true,
-    configurable: true
-  }
-});
-
-// Équivalent à
-// o2 = Object.create({p: 42});
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-15.2.3.5', 'Object.create')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td>Définition initiale. Implémentée avec JavaScript 1.8.5.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-object.create', 'Object.create')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-object.create', 'Object.create')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Object.create")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Object.defineProperty()")}}</li>
- <li>{{jsxref("Object.defineProperties()")}}</li>
- <li>{{jsxref("Object.prototype.isPrototypeOf()")}}</li>
- <li>Le billet de John Resig sur <code><a href="https://ejohn.org/blog/objectgetprototypeof/">getPrototypeOf()</a></code> (en anglais)</li>
-</ul>
\ No newline at end of file
diff --git a/files/fr/web/javascript/reference/global_objects/object/create/index.md b/files/fr/web/javascript/reference/global_objects/object/create/index.md
new file mode 100644
index 0000000000..46985e3ff2
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/object/create/index.md
@@ -0,0 +1,195 @@
+---
+title: Object.create()
+slug: Web/JavaScript/Reference/Global_Objects/Object/create
+tags:
+  - ECMAScript 5
+  - JavaScript
+  - Méthode
+  - Object
+  - Reference
+  - polyfill
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/create
+original_slug: Web/JavaScript/Reference/Objets_globaux/Object/create
+---
+{{JSRef}}
+
+La méthode **`Object.create()`** crée un nouvel objet avec un prototype donné et des propriétés données.
+
+{{EmbedInteractiveExample("pages/js/object-create.html")}}
+
+## Syntaxe
+
+    Object.create(proto)
+    Object.create(proto, objetPropriétés)
+
+### Paramètres
+
+- `proto`
+  - : L'objet qui sera le prototype du nouvel objet créé.
+- `objetPropriétés`
+  - : Paramètre optionnel. S'il est fourni et qu'il ne vaut pas {{jsxref("undefined")}}, il sera utilisé comme un objet dont les propriétés propres (celles qui ne sont pas héritées par la chaîne de prototypes) et énumérables définiront des descripteurs pour les propriétés à ajouter au nouvel objet, avec les mêmes noms. Ces propriétés correspondent au deuxième argument de {{jsxref("Object.defineProperties()")}}.
+
+### Valeur de retour
+
+Un nouvel objet qui dispose du prototype et des propriétés indiquées.
+
+### Exceptions
+
+Cette méthode lève une exception {{jsxref("TypeError")}} si le paramètre `objetPropriétés` vaut {{jsxref("null")}} ou s'il ne décrit pas des propriétés d'un objet.
+
+## Exemples
+
+### L'héritage classique avec `Object.create()`
+
+Dans l'exemple ci-dessous, on utilise `Object.create()` afin de réaliser un héritage de classe. Ce modèle ne supporte que l'héritage unique (un objet hérite directement uniquement d'un autre objet) car JavaScript ne gère pas l'héritage multiple.
+
+```js
+// Forme, la classe parente
+function Forme() {
+  this.x = 0;
+  this.y = 0;
+}
+
+// Méthode de la classe parente
+Forme.prototype.déplacer = function(x, y) {
+  this.x += x;
+  this.y += y;
+  console.info('Forme déplacée.');
+};
+
+// Rectangle - classe fille
+function Rectangle() {
+  // on appelle le constructeur parent
+  Forme.call(this);
+}
+
+// La classe fille surcharge la classe parente
+Rectangle.prototype = Object.create(Forme.prototype);
+
+// Si on ne définit pas le constructeur avec Rectangle, il récupèrera le constructeur
+// Forme (le parent).
+Rectangle.prototype.constructor = Rectangle;
+
+var rect = new Rectangle();
+
+console.log('instance de Rectangle ? ', (rect instanceof Rectangle));
+// true
+console.log('une instance de Forme ? ', (rect instanceof Forme));
+ // true
+rect.déplacer(1, 1);
+// Affiche 'Forme déplacée.'
+```
+
+Si on souhaite hériter de plusieurs objets, on peut utiliser des _mixins_.
+
+```js
+function MaClasse() {
+  ClasseParente1.call(this);
+  ClasseParente2.call(this);
+}
+
+MaClasse.prototype = Object.create(ClasseParente1.prototype); // héritage d'une classe
+Object.assign(MaClasse.prototype, ClasseParente2.prototype); // mixin pour une autre
+MaClasse.prototype.constructor = MaClasse; // On réaffecte le constructeur
+
+MaClasse.prototype.maMéthode = function() {
+  // faire quelque chose
+};
+```
+
+Ici, la méthode {{jsxref("Object.assign()")}} copie les propriétés du prototype de la classe parente (`ClassParente2`) sur le prototype de la classe fille (`MaClasse`), les rendant disponibles pour toutes les instances de `MaClasse`. `Object.assign()` a été introduit avec ES2015 et [une prothèse d'émulation (polyfill)](</fr/docs/Web/JavaScript/Reference/Objets_globaux/Object/assign#Prothèse_d'émulation_(polyfill)>) est disponible. Si le support des navigateurs plus anciens est nécessaire, les méthodes [`jQuery.extend()`](https://api.jquery.com/jQuery.extend/) ou [`_.assign()`](https://lodash.com/docs/#assign) (Lodash) peuvent être utilisées.
+
+### Utiliser l'argument `objetPropriétés` avec `Object.create()`
+
+```js
+var o;
+
+// on crée un objet avec null
+// comme prototype
+o = Object.create(null);
+
+
+o = {};
+// est équivalent à :
+o = Object.create(Object.prototype);
+
+
+// Exemple où on crée un objet avec quelques propriétés
+// (On voit ici que le second paramètres fait correspondre les clés
+// avec des descripteurs de propriétés.)
+o = Object.create(Object.prototype, {
+  // toto est une propriété de donnée
+  toto: { writable: true, configurable: true, value: 'hello' },
+  // truc est une propriété d'accesseur/mutateur
+  truc: {
+    configurable: false,
+    get: function() { return 10; },
+    set: function(value) { console.log('Définir `o.truc` à', value); }
+/* avec les accesseurs ES2015 on aura :
+    get() { return 10; },
+    set(value) { console.log('Définir `o.truc` à', value); } */
+  }
+});
+
+
+function Constructeur() {}
+o = new Constructeur();
+// est équivalent à :
+o = Object.create(Constructeur.prototype);
+// Bien entendu, si la fonction Constructeur
+// possède des instructions pour l'initialisation,
+// Object.create() ne pourra pas le reproduire
+
+
+// on crée un nouvel objet dont le prototype est
+// un nouvel objet vide et on y ajoute une propriété
+// 'p' qui vaut 42
+o = Object.create({}, { p: { value: 42 } });
+
+// par défaut, les propriétés ne sont PAS
+// écrivables, énumérables ou configurables
+o.p = 24;
+o.p;
+// 42
+
+o.q = 12;
+for (var prop in o) {
+  console.log(prop);
+}
+// 'q'
+
+delete o.p;
+// false
+
+// Pour définir une propriété selon ES3
+o2 = Object.create({}, {
+  p: {
+    value: 42,
+    writable: true,
+    enumerable: true,
+    configurable: true
+  }
+});
+
+// Équivalent à
+// o2 = Object.create({p: 42});
+```
+
+## Spécifications
+
+| Spécification                                                                        | État                         | Commentaires                                            |
+| ------------------------------------------------------------------------------------ | ---------------------------- | ------------------------------------------------------- |
+| {{SpecName('ES5.1', '#sec-15.2.3.5', 'Object.create')}}             | {{Spec2('ES5.1')}}     | Définition initiale. Implémentée avec JavaScript 1.8.5. |
+| {{SpecName('ES2015', '#sec-object.create', 'Object.create')}}     | {{Spec2('ES2015')}}     |                                                         |
+| {{SpecName('ESDraft', '#sec-object.create', 'Object.create')}} | {{Spec2('ESDraft')}} |                                                         |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Object.create")}}
+
+## Voir aussi
+
+- {{jsxref("Object.defineProperty()")}}
+- {{jsxref("Object.defineProperties()")}}
+- {{jsxref("Object.prototype.isPrototypeOf()")}}
+- Le billet de John Resig sur [`getPrototypeOf()`](https://ejohn.org/blog/objectgetprototypeof/) (en anglais)
diff --git a/files/fr/web/javascript/reference/global_objects/object/defineproperties/index.html b/files/fr/web/javascript/reference/global_objects/object/defineproperties/index.html
deleted file mode 100644
index ff3d03ff4a..0000000000
--- a/files/fr/web/javascript/reference/global_objects/object/defineproperties/index.html
+++ /dev/null
@@ -1,195 +0,0 @@
----
-title: Object.defineProperties()
-slug: Web/JavaScript/Reference/Global_Objects/Object/defineProperties
-tags:
-  - ECMAScript 5
-  - JavaScript
-  - Méthode
-  - Object
-  - Reference
-  - polyfill
-translation_of: Web/JavaScript/Reference/Global_Objects/Object/defineProperties
-original_slug: Web/JavaScript/Reference/Objets_globaux/Object/defineProperties
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <code><strong>Object.defineProperties()</strong></code> permet de définir ou de modifier les propriétés d'un objet directement sur celui-ci. La valeur renvoyée est l'objet modifié.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/object-defineproperties.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">Object.defineProperties(<var>obj</var>, <var>props</var>)</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>obj</code></dt>
- <dd>L'objet dont on souhaite modifier ou définir certaines propriétés.</dd>
- <dt><code>props</code></dt>
- <dd>Un objet dont les propriétés propres et énumérables sont des descripteurs de propriétés pour les propriétés à définir ou à modifier. Les descripteurs de propriétés peuvent avoir deux formes (voir {{jsxref("Object.defineProperty()")}} pour plus d'informations) : un descripteur de donnée ou un descripteur d'accesseur. Les descripteurs de donnée et d'accesseur peuvent avoir les clés suivantes :
- <dl>
-  <dt><code>configurable</code></dt>
-  <dd><code>true</code> si et seulement si le type de ce descripteur peut être modifié et si la propriété peut être supprimée de l'objet.<br>
-  <strong>Par défaut : <code>false</code>.</strong></dd>
-  <dt><code>enumerable</code></dt>
-  <dd><code>true</code> si et seulement si la propriété doit être listée lors des énumérations de propriétés de l'objet (quand on liste les propriétés pour une boucle par exemple).<br>
-  <strong>Par défaut : <code>false</code>.</strong></dd>
- </dl>
-
- <p>Un descripteur de donnée pourra avoir les clés suivantes :</p>
-
- <dl>
-  <dt><code>value</code></dt>
-  <dd>La valeur associée à la propriété. Cela peut être n'importe quelle valeur valide en JavaScript (un nombre, un objet, etc.).<br>
-  <strong>Par défaut : {{jsxref("undefined")}}.</strong></dd>
-  <dt><code>writable</code></dt>
-  <dd><code>true</code> si et seulement si la valeur associée à la propriété peut être modifiée par un {{jsxref("Opérateurs/Opérateurs_d_affectation", "opérateur d'affectation", "", 1)}}.<br>
-  <strong>Par défaut : <code>false</code>.</strong></dd>
- </dl>
-
- <p>Un descripteur d'accesseur pourra avoir les clés suivantes :</p>
-
- <dl>
-  <dt><code>get</code></dt>
-  <dd>Une fonction utilisée comme accesseur pour la propriété ou {{jsxref("undefined")}} s'il n'y a pas d'accesseur. La fonction renvoyée sera utilisée comme valeur pour la propriété.<br>
-  <strong>Par défaut : {{jsxref("undefined")}}.</strong></dd>
-  <dt><code>set</code></dt>
-  <dd>Une fonction utilisée comme mutateur pour la propriété ou {{jsxref("undefined")}} s'il n'y a pas de mutateur. La fonction qui sera utilisée ensuite recevra la nouvelle valeur à affecter à la propriété comme argument.<br>
-  <strong>Par défaut : {{jsxref("undefined")}}.</strong></dd>
- </dl>
-
- <p>Si un descripteur ne possède aucune clé parmi <code>value</code>, <code>writable</code>, <code>get</code> et <code>set</code>, il sera considéré comme un descripteur de donnée. Si un descripteur possède à la fois les clés <code>value</code>/<code>writable</code> et <code>get</code>/<code>set</code>, une exception sera levée.</p>
- </dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>L'objet passé à la fonction, éventuellement modifié.</p>
-
-<h2 id="Description">Description</h2>
-
-<p><code>Object.defineProperties</code> permet principalement de définir toutes les propriétés  de l'objet <code>obj </code>correspondant aux propriétés énumérable de <code>props</code>.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<pre class="brush: js">var obj = {};
-Object.defineProperties(obj, {
-  "propriété1": {
-    value: true,
-    writable: true
-  },
-  "propriété2": {
-    value: "Coucou",
-    writable: false
-  }
-  // etc.
-});</pre>
-
-<h2 id="Prothèse_d'émulation_(polyfill)">Prothèse d'émulation (<em>polyfill</em>)</h2>
-
-<p>Si on considère un environnement <em>pur</em> où tous les noms et toutes les propriétés font référence à leurs valeurs initiales, <code>Object.defineProperties</code> est quasiment équivalent à l'implémentation suivante en JavaScript (voir la note liée à <code>isCallable</code>) :</p>
-
-<pre class="brush: js">function defineProperties(obj, properties) {
-  function convertToDescriptor(desc) {
-    function hasProperty(obj, prop) {
-      return Object.prototype.hasOwnProperty.call(obj, prop);
-    }
-
-    function isCallable(v) {
-      // NB : à modifier s'il y a plus de types
-      // que les fonctions qui sont
-      // appelables (callables)
-      return typeof v === "function";
-    }
-
-    if (typeof desc !== "object" || desc === null)
-      throw new TypeError("bad desc");
-
-    var d = {};
-
-    if (hasProperty(desc, "enumerable"))
-      d.enumerable = !!desc.enumerable;
-    if (hasProperty(desc, "configurable"))
-      d.configurable = !!desc.configurable;
-    if (hasProperty(desc, "value"))
-      d.value = desc.value;
-    if (hasProperty(desc, "writable"))
-      d.writable = !!desc.writable;
-    if ( hasProperty(desc, "get") ) {
-      var g = desc.get;
-
-      if (!isCallable(g) &amp;&amp; typeof g !== "undefined")
-        throw new TypeError("bad get");
-      d.get = g;
-    }
-    if ( hasProperty(desc, "set") ) {
-      var s = desc.set;
-      if (!isCallable(s) &amp;&amp; typeof s !== "undefined")
-        throw new TypeError("bad set");
-      d.set = s;
-    }
-
-    if (("get" in d || "set" in d) &amp;&amp; ("value" in d || "writable" in d))
-      throw new TypeError("identity-confused descriptor");
-
-    return d;
-  }
-
-  if (typeof obj !== "object" || obj === null)
-    throw new TypeError("bad obj");
-
-  properties = Object(properties);
-
-  var keys = Object.keys(properties);
-  var descs = [];
-
-  for (var i = 0; i &lt; keys.length; i++)
-    descs.push([keys[i], convertToDescriptor(properties[keys[i]])]);
-
-  for (var i = 0; i &lt; descs.length; i++)
-    Object.defineProperty(obj, descs[i][0], descs[i][1]);
-
-  return obj;
-}</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-15.2.3.7', 'Object.defineProperties')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td>Définition initiale. Implémentée par JavaScript 1.8.5</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-object.defineproperties', 'Object.defineProperties')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-object.defineproperties', 'Object.defineProperties')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Object.defineProperties")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Object.defineProperty()")}}</li>
- <li>{{jsxref("Object.keys()")}}</li>
- <li><a href="/fr/docs/Web/JavaScript/Caractère_énumérable_des_propriétés_et_rattachement">Détention et énumération des propriétés</a></li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/object/defineproperties/index.md b/files/fr/web/javascript/reference/global_objects/object/defineproperties/index.md
new file mode 100644
index 0000000000..bc2ed689b9
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/object/defineproperties/index.md
@@ -0,0 +1,169 @@
+---
+title: Object.defineProperties()
+slug: Web/JavaScript/Reference/Global_Objects/Object/defineProperties
+tags:
+  - ECMAScript 5
+  - JavaScript
+  - Méthode
+  - Object
+  - Reference
+  - polyfill
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/defineProperties
+original_slug: Web/JavaScript/Reference/Objets_globaux/Object/defineProperties
+---
+{{JSRef}}
+
+La méthode **`Object.defineProperties()`** permet de définir ou de modifier les propriétés d'un objet directement sur celui-ci. La valeur renvoyée est l'objet modifié.
+
+{{EmbedInteractiveExample("pages/js/object-defineproperties.html")}}
+
+## Syntaxe
+
+    Object.defineProperties(obj, props)
+
+### Paramètres
+
+- `obj`
+  - : L'objet dont on souhaite modifier ou définir certaines propriétés.
+- `props`
+
+  - : Un objet dont les propriétés propres et énumérables sont des descripteurs de propriétés pour les propriétés à définir ou à modifier. Les descripteurs de propriétés peuvent avoir deux formes (voir {{jsxref("Object.defineProperty()")}} pour plus d'informations) : un descripteur de donnée ou un descripteur d'accesseur. Les descripteurs de donnée et d'accesseur peuvent avoir les clés suivantes :
+
+    - `configurable`
+      - : `true` si et seulement si le type de ce descripteur peut être modifié et si la propriété peut être supprimée de l'objet.
+        **Par défaut : `false`.**
+    - `enumerable`
+      - : `true` si et seulement si la propriété doit être listée lors des énumérations de propriétés de l'objet (quand on liste les propriétés pour une boucle par exemple).
+        **Par défaut : `false`.**
+
+    Un descripteur de donnée pourra avoir les clés suivantes :
+
+    - `value`
+      - : La valeur associée à la propriété. Cela peut être n'importe quelle valeur valide en JavaScript (un nombre, un objet, etc.).
+        **Par défaut : {{jsxref("undefined")}}.**
+    - `writable`
+      - : `true` si et seulement si la valeur associée à la propriété peut être modifiée par un {{jsxref("Opérateurs/Opérateurs_d_affectation", "opérateur d'affectation", "", 1)}}.
+        **Par défaut : `false`.**
+
+    Un descripteur d'accesseur pourra avoir les clés suivantes :
+
+    - `get`
+      - : Une fonction utilisée comme accesseur pour la propriété ou {{jsxref("undefined")}} s'il n'y a pas d'accesseur. La fonction renvoyée sera utilisée comme valeur pour la propriété.
+        **Par défaut : {{jsxref("undefined")}}.**
+    - `set`
+      - : Une fonction utilisée comme mutateur pour la propriété ou {{jsxref("undefined")}} s'il n'y a pas de mutateur. La fonction qui sera utilisée ensuite recevra la nouvelle valeur à affecter à la propriété comme argument.
+        **Par défaut : {{jsxref("undefined")}}.**
+
+    Si un descripteur ne possède aucune clé parmi `value`, `writable`, `get` et `set`, il sera considéré comme un descripteur de donnée. Si un descripteur possède à la fois les clés `value`/`writable` et `get`/`set`, une exception sera levée.
+
+### Valeur de retour
+
+L'objet passé à la fonction, éventuellement modifié.
+
+## Description
+
+`Object.defineProperties` permet principalement de définir toutes les propriétés  de l'objet `obj `correspondant aux propriétés énumérable de `props`.
+
+## Exemples
+
+```js
+var obj = {};
+Object.defineProperties(obj, {
+  "propriété1": {
+    value: true,
+    writable: true
+  },
+  "propriété2": {
+    value: "Coucou",
+    writable: false
+  }
+  // etc.
+});
+```
+
+## Prothèse d'émulation (_polyfill_)
+
+Si on considère un environnement _pur_ où tous les noms et toutes les propriétés font référence à leurs valeurs initiales, `Object.defineProperties` est quasiment équivalent à l'implémentation suivante en JavaScript (voir la note liée à `isCallable`) :
+
+```js
+function defineProperties(obj, properties) {
+  function convertToDescriptor(desc) {
+    function hasProperty(obj, prop) {
+      return Object.prototype.hasOwnProperty.call(obj, prop);
+    }
+
+    function isCallable(v) {
+      // NB : à modifier s'il y a plus de types
+      // que les fonctions qui sont
+      // appelables (callables)
+      return typeof v === "function";
+    }
+
+    if (typeof desc !== "object" || desc === null)
+      throw new TypeError("bad desc");
+
+    var d = {};
+
+    if (hasProperty(desc, "enumerable"))
+      d.enumerable = !!desc.enumerable;
+    if (hasProperty(desc, "configurable"))
+      d.configurable = !!desc.configurable;
+    if (hasProperty(desc, "value"))
+      d.value = desc.value;
+    if (hasProperty(desc, "writable"))
+      d.writable = !!desc.writable;
+    if ( hasProperty(desc, "get") ) {
+      var g = desc.get;
+
+      if (!isCallable(g) && typeof g !== "undefined")
+        throw new TypeError("bad get");
+      d.get = g;
+    }
+    if ( hasProperty(desc, "set") ) {
+      var s = desc.set;
+      if (!isCallable(s) && typeof s !== "undefined")
+        throw new TypeError("bad set");
+      d.set = s;
+    }
+
+    if (("get" in d || "set" in d) && ("value" in d || "writable" in d))
+      throw new TypeError("identity-confused descriptor");
+
+    return d;
+  }
+
+  if (typeof obj !== "object" || obj === null)
+    throw new TypeError("bad obj");
+
+  properties = Object(properties);
+
+  var keys = Object.keys(properties);
+  var descs = [];
+
+  for (var i = 0; i < keys.length; i++)
+    descs.push([keys[i], convertToDescriptor(properties[keys[i]])]);
+
+  for (var i = 0; i < descs.length; i++)
+    Object.defineProperty(obj, descs[i][0], descs[i][1]);
+
+  return obj;
+}
+```
+
+## Spécifications
+
+| Spécification                                                                                                | État                         | Commentaires                                          |
+| ------------------------------------------------------------------------------------------------------------ | ---------------------------- | ----------------------------------------------------- |
+| {{SpecName('ES5.1', '#sec-15.2.3.7', 'Object.defineProperties')}}                     | {{Spec2('ES5.1')}}     | Définition initiale. Implémentée par JavaScript 1.8.5 |
+| {{SpecName('ES6', '#sec-object.defineproperties', 'Object.defineProperties')}}     | {{Spec2('ES6')}}         |                                                       |
+| {{SpecName('ESDraft', '#sec-object.defineproperties', 'Object.defineProperties')}} | {{Spec2('ESDraft')}} |                                                       |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Object.defineProperties")}}
+
+## Voir aussi
+
+- {{jsxref("Object.defineProperty()")}}
+- {{jsxref("Object.keys()")}}
+- [Détention et énumération des propriétés](/fr/docs/Web/JavaScript/Caractère_énumérable_des_propriétés_et_rattachement)
diff --git a/files/fr/web/javascript/reference/global_objects/object/defineproperty/index.html b/files/fr/web/javascript/reference/global_objects/object/defineproperty/index.html
deleted file mode 100644
index c2ab4ad294..0000000000
--- a/files/fr/web/javascript/reference/global_objects/object/defineproperty/index.html
+++ /dev/null
@@ -1,418 +0,0 @@
----
-title: Object.defineProperty()
-slug: Web/JavaScript/Reference/Global_Objects/Object/defineProperty
-tags:
-  - ECMAScript 5
-  - JavaScript
-  - JavaScript 1.8.5
-  - Méthode
-  - Object
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Object/defineProperty
-original_slug: Web/JavaScript/Reference/Objets_globaux/Object/defineProperty
----
-<div>{{JSRef}}</div>
-
-<p>La méthode statique <code><strong>Object.defineProperty()</strong></code> permet de définir une nouvelle propriété ou de modifier une propriété existante, directement sur un objet. La méthode renvoie l'objet modifié.</p>
-
-<div class="note">
-<p><strong>Note :</strong> Cette méthode est directement appelée via le constructeur {{jsxref("Object")}} plutôt que sur les instances de type <code>Object</code>.</p>
-</div>
-
-<div>{{EmbedInteractiveExample("pages/js/object-defineproperty.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">Object.defineProperty(<var>obj</var>, <var>prop</var>, <var>descripteur</var>)</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>obj</code></dt>
- <dd>L'objet sur lequel on souhaite définir ou modifier une propriété.</dd>
- <dt><code>prop</code></dt>
- <dd>Le nom ou le symbole ({{jsxref("Symbol")}}) de la propriété qu'on définit ou qu'on modifie.</dd>
- <dt><code>descripteur</code></dt>
- <dd>Le descripteur de la propriété qu'on définit ou qu'on modifie.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>L'objet qui a été passé à la fonction et qui a éventuellement été modifié.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>Cette méthode permet d'ajouter ou de modifier une propriété d'un objet avec une certaine précision. En effet, quand on ajoute une propriété « normalement » (via une affectation), on crée une propriété dont le comportement par défaut fait qu'elle sera listée dans une énumération de propriétés (par exemple avec une boucle {{jsxref("Instructions/for...in","for...in")}} ou via la méthode {{jsxref("Object.keys")}}), dont la valeur peut être changée et qui peut être supprimée via {{jsxref("Opérateurs/L_opérateur_delete","delete")}}. La méthode <code>Object.defineProperty()</code> permet de préciser le comportement attendu, potentiellement différent de celui par défaut.</p>
-
-<p>Les descripteurs de propriété existent en deux versions : les descripteurs de données et les descripteurs d'accesseur. Un descripteur de données est une propriété qui possède une valeur et qui peut ou non être accessible en écriture. Un descripteur d'accesseur est une propriété décrite par une paire d'accesseur/mutateur (<em>getter/setter</em>) qui sont des fonctions. Un descripteur est un descripteur de données ou un descripteur d'accesseur, il ne peut pas être les deux.</p>
-
-<p>Les descripteurs de données et d'accesseur sont des objets. Ils partagent les propriétés suivantes (la valeur par défaut indiquée est utilisée lorsqu'on passe par <code>Object.defineProperty()</code>) :</p>
-
-<dl>
- <dt><code>configurable</code></dt>
- <dd><code>true</code> si et seulement si le type de ce descripteur de propriété peut être changé et si la propriété peut/pourra être supprimée de l'objet correspondant..<br>
- <strong>La valeur par défaut est </strong><strong><code>false</code></strong><strong>.</strong></dd>
- <dt><code>enumerable</code></dt>
- <dd><code>true</code> si et seulement si la propriété apparaît lors de l'énumération des propriétés de l'objet correspondant.<br>
- <strong><strong>La valeur par défaut est</strong> </strong><strong><code>false</code></strong><strong>.</strong></dd>
-</dl>
-
-<p>Un descripteur de données possède les propriétés optionnelles suivantes :</p>
-
-<dl>
- <dt><code>value</code></dt>
- <dd>La valeur associée à la propriété. Peut être n'importe quelle valeur JavaScript valide (un nombre, un objet, etc.).<br>
- <strong>La valeur par défaut est {{jsxref("undefined")}}.</strong></dd>
- <dt><code>writable</code></dt>
- <dd><code>true</code> si et seulement si la valeur associée à la propriété peut être modifiée en utilisant un {{jsxref("Opérateurs/Opérateurs_d_affectation", "opérateur d'affectation", "", 1)}}.<br>
- <strong><strong>La valeur par défaut est</strong> <code>false</code>.</strong></dd>
-</dl>
-
-<p>Un descripteur d'accesseur possède les propriétés optionnelles suivantes :</p>
-
-<dl>
- <dt><code>get</code></dt>
- <dd>Une fonction qui est utilisée comme accesseur (<em>getter</em>) pour la propriété ou bien {{jsxref("undefined")}} s'il n'existe pas d'accesseur. La valeur de retour de la fonction sera utilisée comme valeur pour la propriété. Lorsqu'on accède à la propriété, la fonction est appelée sans argument avec <code>this</code> qui est l'objet pour lequel on souhaite consulter la propriété.<br>
- <strong><strong>La valeur par défaut est</strong> {{jsxref("undefined")}}</strong>.</dd>
- <dt><code>set</code></dt>
- <dd>Une fonction qui est utilisée comme mutateur (<em>setter</em>) pour la propriété ou bien {{jsxref("undefined")}} s'il n'existe pas de mutateur. Pour unique argument, la fonction recevra la nouvelle valeur à affecter à la propriété. Le contexte <code>this</code> passé est l'objet sur lequel on souhaite modifier la propriété.<br>
- <strong>La valeur par défaut est {{jsxref("undefined")}}</strong>.</dd>
-</dl>
-
-<p>Si un descripteur ne possède aucune des clés <code>value</code>, <code>writable</code>, <code>get</code> ou <code>set</code>, il est considéré comme un descripteur de données. Si un descripteur possède à la fois une propriété <code>value</code> ou <code>writable</code> et une propriété <code>get</code> ou <code>set</code>, un exception sera déclenchée.</p>
-
-<p>Il faut garder à l'esprit que ces options ne sont pas nécessairement les descripteurs des propriétés propres. Elles peuvent être héritées et faire partie de la chaine des prototypes. Afin de s'assurer que les valeur par défaut sont préservées, on peut d'abord geler le prototype {{jsxref("Object.prototype")}}, définir toutes les options explicitement ou faire pointer la propriété {{jsxref("Object.prototype.__proto__", "__proto__")}} vers {{jsxref("null")}} (par exemple avec {{jsxref("Object.create","Object.create(null)")}}).</p>
-
-<pre class="brush:js">var obj = {};
-// en utilisant __proto__
-Object.defineProperty(obj, "clé", {
-  __proto__: null, // aucune propriété héritée
-  value: "static"  // non énumérable
-                   // non configurable
-                   // non accessible en écriture
-                   // par défaut
-});
-
-// en étant explicite
-Object.defineProperty(obj, "clé", {
-  enumerable: false,
-  configurable: false,
-  writable: false,
-  value: "static"
-});
-
-// en recyclant un objet
-function avecValeur(valeur) {
-  var d = avecValeur.d || (
-    avecValeur.d = {
-      enumerable: false,
-      writable: false,
-      configurable: false,
-      value: null
-    }
-  );
-  if(d.value !== valeur){
-    d.value = valeur;
-  }
-  return d;
-}
-// ... autres instructions... puis
-Object.defineProperty(obj, "clé", avecValeur("static"));
-
-// si la méthode freeze est disponible,
-// on peut empêcher que du code ajoute des
-// propriétés (valeur, get, set, enumerable,
-// writable, configurable) au prototype d'Object
-(Object.freeze||Object)(Object.prototype);</pre>
-
-<h2 id="Exemples">Exemples</h2>
-
-<p>Pour plus d'exemples utilisant la méthode <code>Object.defineProperty</code> avec une syntaxe de masque binaire, voir <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object/defineProperty/Exemples_suppl%C3%A9mentaires">les exemples supplémentaires</a>.</p>
-
-<h3 id="Créer_une_propriété">Créer une propriété</h3>
-
-<p>Lorsqu'une propriété n'existe pas pour l'objet, <code>Object.defineProperty()</code> créera une nouvelle propriété telle qu'elle est décrite. Certains champs du descripteur peuvent manquer, les valeurs par défaut seront alors utilisées. Tous les booléens ont <code>false</code> pour valeur par défaut. Une propriété définie sans <code>get</code>/<code>set</code>/<code>value</code>/<code>writable</code> est appelée « générique » et « correspond » à un descripteur de données.</p>
-
-<pre class="brush: js">var o = {}; // on crée un nouvel objet
-
-// Exemple d'une propriété ajoutée via defineProperty
-// avec un descripteur de données
-Object.defineProperty(o, "a", {value : 37,
-                               writable : true,
-                               enumerable : true,
-                               configurable : true});
-// la propriété 'a' existe pour l'objet o et vaut 37
-
-// Exemple d'une propriété ajoutée via defineProperty
-// avec un descripteur d'accesseur
-var valeurB = 38;
-Object.defineProperty(o, "b", {get : function(){ return valeurB; },
-                               set : function(nouvelleValeur){
-                                           valeurB = nouvelleValeur;
-                                     },
-                               enumerable : true,
-                               configurable : true});
-o.b; // 38
-// la propriété 'b' existe pour l'objet o
-// et vaut 38
-// La valeur de o.b est désormais toujours
-// identique à valeurB, sauf si o.b est redéfini
-
-// On ne peut pas mélanger les deux :
-Object.defineProperty(o, "conflit", { value: 0x9f91102,
-                                       get: function() {
-                                            return 0xdeadbeef;
-                                       }
-                                     });
-// une exception TypeError sera lancée : value n'apparaît
-// que dans les descripteurs de données
-// get n'apparait que dans les descripteurs d'accesseur
-</pre>
-
-<h3 id="Modifier_une_propriété_existante">Modifier une propriété existante</h3>
-
-<p>Quand une propriété existe d'ores et déjà pour un objet, <code>Object.defineProperty()</code> tentera de modifier la propriété pour qu'elle corresponde aux valeurs indiquées dans le descripteur et à la configuration de l'objet courant. Si l'ancien descripteur avait <code>configurable</code> à  <code>false</code> (la propriété est dite non-configurable), aucun attribut, à l'exception de <code>writable</code>, ne peut être changé. Dans ce cas, il n'est pas possible de changer entre les types de descripteur.</p>
-
-<p>Si une propriété est non-configurable, son attribut <code>writable</code> ne peut être mis qu'à <code>false</code>.</p>
-
-<p>Une exception {{jsxref("TypeError")}} peut être levée quand on essaie de modifier des attributs de propriété non-configurables (en dehors des attributs <code>value</code> et <code>writable</code>) sauf dans le cas où les valeurs souhaitées sont les mêmes que les valeurs courantes.</p>
-
-<h4 id="Attribut_writable">Attribut <code>writable</code></h4>
-
-<p>Lorsque l'attribut <code>writable</code> vaut <code>false</code> pour la propriété, cette dernière n'est plus accessible en écriture. Il est impossible de la réaffecter.</p>
-
-<pre class="brush: js">var o = {}; // On crée un nouvel objet
-
-Object.defineProperty(o, "a", { value : 37,
-                                writable : false });
-
-console.log(o.a); // inscrit 37 dans les journaux (logs)
-o.a = 25; // Aucune exception n'est lancée (on aurait une
-          // exception en mode strict, y compris si la
-          // valeur souhaitée avait été la même)
-console.log(o.a); // inscrit toujours 37.
-                  //L'affectation n'a pas fonctionné.</pre>
-
-<pre class="brush: js">// En mode strict
-(function() {
-  'use strict';
-  var o = {};
-  Object.defineProperty(o, 'b', {
-    value: 2,
-    writable: false
-  });
-  o.b = 3; // déclenche une TypeError: "b" est en lecture seule
-  return o.b; // renvoie 2 sans la ligne précédente
-}());
-</pre>
-
-<p>Comme on l'a vu dans l'exemple, essayer de modifier une propriété non accessible en écriture ne la modifie pas. Cela ne rend pas d'erreur non plus (en mode non-strict).</p>
-
-<h4 id="Attribut_enumerable">Attribut <code>enumerable</code></h4>
-
-<p>L'attribut de propriété <code>enumerable</code> permet de définir si la propriété est sélectionnée par {{jsxref("Object.assign()")}} ou via l'opérateur <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax">de décomposition</a> (<em>spread</em>). Pour les propriétés qui ne sont pas nommées avec des symboles, les propriétés énumérables correspondent aux propriétés qui sont listées avec une boucle {{jsxref("Instructions/for...in","for...in")}} ou avec la méthode {{jsxref("Object.keys()")}}.</p>
-
-<pre class="brush: js">var o = {};
-Object.defineProperty(o, 'a', {
-  value: 1,
-  enumerable: true
-});
-Object.defineProperty(o, 'b', {
-  value: 2,
-  enumerable: false
-});
-Object.defineProperty(o, 'c', {
-  value: 3
-}); // enumerable vaut false par défaut
-o.d = 4; // enumerable vaut true par défaut
-         // lorsqu'on crée une propriété
-         // en la définissant
-Object.defineProperty(o, Symbol.for('e'), {
-  value: 5,
-  enumerable: true
-});
-Object.defineProperty(o, Symbol.for('f'), {
-  value: 6,
-  enumerable: false
-});
-
-for (var i in o) {
-  console.log(i);
-}
-// affiche 'a' et 'd' (dans un ordre indéfini)
-
-Object.keys(o); // ['a', 'd']
-
-o.propertyIsEnumerable('a'); // true
-o.propertyIsEnumerable('b'); // false
-o.propertyIsEnumerable('c'); // false
-o.propertyIsEnumerable('d'); // true
-o.propertyIsEnumerable(Symbol.for('e')); // true
-o.propertyIsEnumerable(Symbol.for('f')); // false
-
-var p = { ...o }
-p.a // 1
-p.b // undefined
-p.c // undefined
-p.d // 4
-p[Symbol.for('e')] // 5
-p[Symbol.for('f')] // undefined
-</pre>
-
-<h4 id="Attribut_configurable">Attribut <code>configurable</code></h4>
-
-<p>L'attribut <code>configurable</code> permet de contrôler si la propriété peut être supprimée et si les autres attributs de propriété (voir ci-avant), à l'exception de <code>value</code> ou de <code>writable</code>, peuvent être modifiés.</p>
-
-<pre class="brush: js">var o = {};
-Object.defineProperty(o, "a", { get : function(){return 1;},
-                                configurable : false } );
-
-Object.defineProperty(o, "a", {configurable : true});
-// renvoie une TypeError
-
-Object.defineProperty(o, "a", {enumerable : true});
-// renvoie une TypeError
-
-Object.defineProperty(o, "a", {set : function(){}});
-// renvoie une TypeError (set était non défini avant)
-
-Object.defineProperty(o, "a", {get : function(){return 1;}});
-// renvoie une TypeError
-// (bien que le nouveau get soit identique au précédent)
-
-Object.defineProperty(o, "a", {value : 12});
-// renvoie une TypeError
-
-console.log(o.a); // log 1
-delete o.a; // Rien ne se passe
-console.log(o.a); // log 1
-</pre>
-
-<p>Si l'attribut <code>configurable</code> de <code>o.a</code> avait été <code>true</code>, aucune de ces erreurs n'aurait été renvoyée et la propriété aurait été supprimée au final.</p>
-
-<h3 id="Ajouter_des_propriétés_et_des_valeurs_par_défaut">Ajouter des propriétés et des valeurs par défaut</h3>
-
-<p>Il est toujours important de savoir comment les valeurs par défaut sont appliquées. Le comportement est souvent différent entre une affectation simple et l'utilisation de <code>Object.defineProperty()</code>. Par exemple :</p>
-
-<pre class="brush: js">var o = {};
-
-o.a = 1;
-// est équivalent à :
-Object.defineProperty(o, "a", {value : 1,
-                               writable : true,
-                               configurable : true,
-                               enumerable : true});
-
-
-// D'un autre côté,
-Object.defineProperty(o, "a", {value : 1});
-// sera équivalent à :
-Object.defineProperty(o, "a", {value : 1,
-                               writable : false,
-                               configurable : false,
-                               enumerable : false});
-</pre>
-
-<h3 id="Accesseurs_et_mutateurs_adaptés">Accesseurs et mutateurs adaptés</h3>
-
-<p>L'exemple ci-dessous illustre comment implémenter un objet qui archive des données. Lorsque la propriété <code>température</code> est définie, on ajoute une entrée au tableau <code>archive</code> :</p>
-
-<pre class="brush: js">function Archiviste() {
-  var température = null;
-  var archive = [];
-
-  Object.defineProperty(this, "température",{
-    get: function() {
-      console.log("accès !");
-      return température;
-    },
-    set: function(value) {
-      température = value;
-      archive.push({val: température});
-    }
-  });
-
-  this.getArchive = function() {return archive;};
-}
-
-var arc = new Archiviste();
-arc.température; // "accès !"
-arc.température = 11;
-arc.température = 13;
-arc.getArchive(); // [{val: 11}, {val: 13}]
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">É tat</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-15.2.3.6', 'Object.defineProperty')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td>Définition initiale. Implémentée avec JavaScript 1.8.5.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-object.defineproperty', 'Object.defineProperty')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>
-    <p>{{SpecName('ESDraft', '#sec-object.defineproperty', 'Object.defineProperty')}}</p>
-   </td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Object.defineProperty")}}</p>
-
-<h2 id="Notes_de_compatibilité">Notes de compatibilité</h2>
-
-<h3 id="Redéfinir_la_propriété_length_d'un_tableau_(Array)">Redéfinir la propriété <code>length</code> d'un tableau (<code>Array</code>)</h3>
-
-<p>Il est possible de redéfinir la propriété {{jsxref("Array.length", "length")}} utilisée pour les tableaux, avec les restrictions vues. (La propriété <code>length</code> est initialement non-configurable, non-enumérable et accessible en écriture (<code>writable</code> vaut <code>true</code>)). Ainsi, sur un tableau, si rien n'a été fait, on peut modifier la valeur de la propriété<code> length</code> ou la rendre non accessible en écriture. Il n'est pas permis de changer son caractère énumérable ou configurable. Cependant, tous les navigateurs n'autorisent pas cette redéfinition.</p>
-
-<p>Les versions de Firefox 4 à 22 renverront une exception {{jsxref("TypeError")}} pour chaque tentative (licite ou non) de modification de la propriété <code>length</code> d'un tableau.</p>
-
-<p>Pour les versions de Chrome qui implémentent <code>Object.defineProperty()</code>, elles ignorent, dans certaines circonstances, une redéfinition de la propriété utilisant une valeur différente de la valeur courante de <code>length</code>. Sous certaines circonstances, le changement de l'accès en écriture n'aura aucun effet (et ne renverra aucune exception). Les méthodes relatives comme  {{jsxref("Array.prototype.push")}} ne respectent pas le non accès en écriture.</p>
-
-<p>Pour les versions de Safari qui implémentent <code>Object.defineProperty()</code> elles ignorent la redéfinition d'une valeur différente de la valeur courante. Toute tentative de modifier l'accès en écriture échouera silencieusement (aucune modification effective, aucune exception renvoyée).</p>
-
-<p>Seules les versions Internet Explorer 9 et supérieures et Firefox 23 et supérieures semblent supporter complètement la redéfinition de la propriété <code>length</code> pour les tableaux. À l'heure actuelle, il n'est pas conseillé de s'attendre à ce qu'une telle redéfinition fonctionne ou ne fonctionne pas. Même dans le cas où on peut supposer que cela fonctionne de façon cohérente : <a href="https://whereswalden.com/2013/08/05/new-in-firefox-23-the-length-property-of-an-array-can-be-made-non-writable-but-you-shouldnt-do-it/">ce n'est pas vraiment une bonne idée de le faire</a> (en anglais).</p>
-
-<h3 id="Notes_spécifiques_relatives_à_Internet_Explorer_8">Notes spécifiques relatives à Internet Explorer 8</h3>
-
-<p>Internet Explorer 8 a implémenté une méthode <code>Object.defineProperty()</code> <a class="external" href="https://msdn.microsoft.com/en-us/library/dd229916%28VS.85%29.aspx">uniquement utilisable sur les objets DOM</a>. Quelques éléments sont à noter :</p>
-
-<ul>
- <li>L'utilisation de <code>Object.defineProperty()</code> sur les objets natifs renvoie une erreur.</li>
- <li>Les attributs de propriétés doivent être définis avec certaines valeurs. <code>true</code> (pour <code>Configurable</code>), <code>true</code> (pour <code>enumerable</code>), <code>true</code> (pour <code>writable</code>) pour les descripteurs de données et <code>true</code> pour <code>configurable</code>, <code>false</code> pour <code>enumerable</code> pour les descripteurs d'accesseur. Fournir d'autres valeurs résultera en une erreur (à confirmer).</li>
- <li>Pour modifier une propriété, il faut d'abord la supprimer. Si ça n'a pas été fait, elle reste telle quelle.</li>
-</ul>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/JavaScript/Caract%C3%A8re_%C3%A9num%C3%A9rable_des_propri%C3%A9t%C3%A9s_et_rattachement">Énumérabilité et maîtrise des propriétés</a></li>
- <li>{{jsxref("Object.defineProperties()")}}</li>
- <li>{{jsxref("Object.propertyIsEnumerable()")}}</li>
- <li>{{jsxref("Object.getOwnPropertyDescriptor()")}}</li>
- <li>{{jsxref("Object.prototype.watch()")}}</li>
- <li>{{jsxref("Object.prototype.unwatch()")}}</li>
- <li>{{jsxref("Opérateurs/L_opérateur_get", "get")}}</li>
- <li>{{jsxref("Opérateurs/L_opérateur_set", "set")}}</li>
- <li>{{jsxref("Object.create()")}}</li>
- <li><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object/defineProperty/Exemples_suppl%C3%A9mentaires">Exemples supplémentaires utilisant <code>Object.defineProperty</code></a></li>
- <li>{{jsxref("Reflect.defineProperty()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/object/defineproperty/index.md b/files/fr/web/javascript/reference/global_objects/object/defineproperty/index.md
new file mode 100644
index 0000000000..14e79b3345
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/object/defineproperty/index.md
@@ -0,0 +1,417 @@
+---
+title: Object.defineProperty()
+slug: Web/JavaScript/Reference/Global_Objects/Object/defineProperty
+tags:
+  - ECMAScript 5
+  - JavaScript
+  - JavaScript 1.8.5
+  - Méthode
+  - Object
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/defineProperty
+original_slug: Web/JavaScript/Reference/Objets_globaux/Object/defineProperty
+---
+{{JSRef}}
+
+La méthode statique **`Object.defineProperty()`** permet de définir une nouvelle propriété ou de modifier une propriété existante, directement sur un objet. La méthode renvoie l'objet modifié.
+
+> **Note :** Cette méthode est directement appelée via le constructeur {{jsxref("Object")}} plutôt que sur les instances de type `Object`.
+
+{{EmbedInteractiveExample("pages/js/object-defineproperty.html")}}
+
+## Syntaxe
+
+    Object.defineProperty(obj, prop, descripteur)
+
+### Paramètres
+
+- `obj`
+  - : L'objet sur lequel on souhaite définir ou modifier une propriété.
+- `prop`
+  - : Le nom ou le symbole ({{jsxref("Symbol")}}) de la propriété qu'on définit ou qu'on modifie.
+- `descripteur`
+  - : Le descripteur de la propriété qu'on définit ou qu'on modifie.
+
+### Valeur de retour
+
+L'objet qui a été passé à la fonction et qui a éventuellement été modifié.
+
+## Description
+
+Cette méthode permet d'ajouter ou de modifier une propriété d'un objet avec une certaine précision. En effet, quand on ajoute une propriété « normalement » (via une affectation), on crée une propriété dont le comportement par défaut fait qu'elle sera listée dans une énumération de propriétés (par exemple avec une boucle {{jsxref("Instructions/for...in","for...in")}} ou via la méthode {{jsxref("Object.keys")}}), dont la valeur peut être changée et qui peut être supprimée via {{jsxref("Opérateurs/L_opérateur_delete","delete")}}. La méthode `Object.defineProperty()` permet de préciser le comportement attendu, potentiellement différent de celui par défaut.
+
+Les descripteurs de propriété existent en deux versions : les descripteurs de données et les descripteurs d'accesseur. Un descripteur de données est une propriété qui possède une valeur et qui peut ou non être accessible en écriture. Un descripteur d'accesseur est une propriété décrite par une paire d'accesseur/mutateur (_getter/setter_) qui sont des fonctions. Un descripteur est un descripteur de données ou un descripteur d'accesseur, il ne peut pas être les deux.
+
+Les descripteurs de données et d'accesseur sont des objets. Ils partagent les propriétés suivantes (la valeur par défaut indiquée est utilisée lorsqu'on passe par `Object.defineProperty()`) :
+
+- `configurable`
+  - : `true` si et seulement si le type de ce descripteur de propriété peut être changé et si la propriété peut/pourra être supprimée de l'objet correspondant..
+    **La valeur par défaut est** **`false`\*\***.\*\*
+- `enumerable`
+  - : `true` si et seulement si la propriété apparaît lors de l'énumération des propriétés de l'objet correspondant. \***\*La valeur par défaut est** \***\*`false`\*\***.\*\*
+
+Un descripteur de données possède les propriétés optionnelles suivantes :
+
+- `value`
+  - : La valeur associée à la propriété. Peut être n'importe quelle valeur JavaScript valide (un nombre, un objet, etc.).
+    **La valeur par défaut est {{jsxref("undefined")}}.**
+- `writable`
+  - : `true` si et seulement si la valeur associée à la propriété peut être modifiée en utilisant un {{jsxref("Opérateurs/Opérateurs_d_affectation", "opérateur d'affectation", "", 1)}}. \***\*La valeur par défaut est** `false`.\*\*
+
+Un descripteur d'accesseur possède les propriétés optionnelles suivantes :
+
+- `get`
+  - : Une fonction qui est utilisée comme accesseur (_getter_) pour la propriété ou bien {{jsxref("undefined")}} s'il n'existe pas d'accesseur. La valeur de retour de la fonction sera utilisée comme valeur pour la propriété. Lorsqu'on accède à la propriété, la fonction est appelée sans argument avec `this` qui est l'objet pour lequel on souhaite consulter la propriété. \***\*La valeur par défaut est** {{jsxref("undefined")}}\*\*.
+- `set`
+  - : Une fonction qui est utilisée comme mutateur (_setter_) pour la propriété ou bien {{jsxref("undefined")}} s'il n'existe pas de mutateur. Pour unique argument, la fonction recevra la nouvelle valeur à affecter à la propriété. Le contexte `this` passé est l'objet sur lequel on souhaite modifier la propriété.
+    **La valeur par défaut est {{jsxref("undefined")}}**.
+
+Si un descripteur ne possède aucune des clés `value`, `writable`, `get` ou `set`, il est considéré comme un descripteur de données. Si un descripteur possède à la fois une propriété `value` ou `writable` et une propriété `get` ou `set`, un exception sera déclenchée.
+
+Il faut garder à l'esprit que ces options ne sont pas nécessairement les descripteurs des propriétés propres. Elles peuvent être héritées et faire partie de la chaine des prototypes. Afin de s'assurer que les valeur par défaut sont préservées, on peut d'abord geler le prototype {{jsxref("Object.prototype")}}, définir toutes les options explicitement ou faire pointer la propriété {{jsxref("Object.prototype.__proto__", "__proto__")}} vers {{jsxref("null")}} (par exemple avec {{jsxref("Object.create","Object.create(null)")}}).
+
+```js
+var obj = {};
+// en utilisant __proto__
+Object.defineProperty(obj, "clé", {
+  __proto__: null, // aucune propriété héritée
+  value: "static"  // non énumérable
+                   // non configurable
+                   // non accessible en écriture
+                   // par défaut
+});
+
+// en étant explicite
+Object.defineProperty(obj, "clé", {
+  enumerable: false,
+  configurable: false,
+  writable: false,
+  value: "static"
+});
+
+// en recyclant un objet
+function avecValeur(valeur) {
+  var d = avecValeur.d || (
+    avecValeur.d = {
+      enumerable: false,
+      writable: false,
+      configurable: false,
+      value: null
+    }
+  );
+  if(d.value !== valeur){
+    d.value = valeur;
+  }
+  return d;
+}
+// ... autres instructions... puis
+Object.defineProperty(obj, "clé", avecValeur("static"));
+
+// si la méthode freeze est disponible,
+// on peut empêcher que du code ajoute des
+// propriétés (valeur, get, set, enumerable,
+// writable, configurable) au prototype d'Object
+(Object.freeze||Object)(Object.prototype);
+```
+
+## Exemples
+
+Pour plus d'exemples utilisant la méthode `Object.defineProperty` avec une syntaxe de masque binaire, voir [les exemples supplémentaires](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object/defineProperty/Exemples_suppl%C3%A9mentaires).
+
+### Créer une propriété
+
+Lorsqu'une propriété n'existe pas pour l'objet, `Object.defineProperty()` créera une nouvelle propriété telle qu'elle est décrite. Certains champs du descripteur peuvent manquer, les valeurs par défaut seront alors utilisées. Tous les booléens ont `false` pour valeur par défaut. Une propriété définie sans `get`/`set`/`value`/`writable` est appelée « générique » et « correspond » à un descripteur de données.
+
+```js
+var o = {}; // on crée un nouvel objet
+
+// Exemple d'une propriété ajoutée via defineProperty
+// avec un descripteur de données
+Object.defineProperty(o, "a", {value : 37,
+                               writable : true,
+                               enumerable : true,
+                               configurable : true});
+// la propriété 'a' existe pour l'objet o et vaut 37
+
+// Exemple d'une propriété ajoutée via defineProperty
+// avec un descripteur d'accesseur
+var valeurB = 38;
+Object.defineProperty(o, "b", {get : function(){ return valeurB; },
+                               set : function(nouvelleValeur){
+                                           valeurB = nouvelleValeur;
+                                     },
+                               enumerable : true,
+                               configurable : true});
+o.b; // 38
+// la propriété 'b' existe pour l'objet o
+// et vaut 38
+// La valeur de o.b est désormais toujours
+// identique à valeurB, sauf si o.b est redéfini
+
+// On ne peut pas mélanger les deux :
+Object.defineProperty(o, "conflit", { value: 0x9f91102,
+                                       get: function() {
+                                            return 0xdeadbeef;
+                                       }
+                                     });
+// une exception TypeError sera lancée : value n'apparaît
+// que dans les descripteurs de données
+// get n'apparait que dans les descripteurs d'accesseur
+```
+
+### Modifier une propriété existante
+
+Quand une propriété existe d'ores et déjà pour un objet, `Object.defineProperty()` tentera de modifier la propriété pour qu'elle corresponde aux valeurs indiquées dans le descripteur et à la configuration de l'objet courant. Si l'ancien descripteur avait `configurable` à  `false` (la propriété est dite non-configurable), aucun attribut, à l'exception de `writable`, ne peut être changé. Dans ce cas, il n'est pas possible de changer entre les types de descripteur.
+
+Si une propriété est non-configurable, son attribut `writable` ne peut être mis qu'à `false`.
+
+Une exception {{jsxref("TypeError")}} peut être levée quand on essaie de modifier des attributs de propriété non-configurables (en dehors des attributs `value` et `writable`) sauf dans le cas où les valeurs souhaitées sont les mêmes que les valeurs courantes.
+
+#### Attribut `writable`
+
+Lorsque l'attribut `writable` vaut `false` pour la propriété, cette dernière n'est plus accessible en écriture. Il est impossible de la réaffecter.
+
+```js
+var o = {}; // On crée un nouvel objet
+
+Object.defineProperty(o, "a", { value : 37,
+                                writable : false });
+
+console.log(o.a); // inscrit 37 dans les journaux (logs)
+o.a = 25; // Aucune exception n'est lancée (on aurait une
+          // exception en mode strict, y compris si la
+          // valeur souhaitée avait été la même)
+console.log(o.a); // inscrit toujours 37.
+                  //L'affectation n'a pas fonctionné.
+```
+
+```js
+// En mode strict
+(function() {
+  'use strict';
+  var o = {};
+  Object.defineProperty(o, 'b', {
+    value: 2,
+    writable: false
+  });
+  o.b = 3; // déclenche une TypeError: "b" est en lecture seule
+  return o.b; // renvoie 2 sans la ligne précédente
+}());
+```
+
+Comme on l'a vu dans l'exemple, essayer de modifier une propriété non accessible en écriture ne la modifie pas. Cela ne rend pas d'erreur non plus (en mode non-strict).
+
+#### Attribut `enumerable`
+
+L'attribut de propriété `enumerable` permet de définir si la propriété est sélectionnée par {{jsxref("Object.assign()")}} ou via l'opérateur [de décomposition](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax) (_spread_). Pour les propriétés qui ne sont pas nommées avec des symboles, les propriétés énumérables correspondent aux propriétés qui sont listées avec une boucle {{jsxref("Instructions/for...in","for...in")}} ou avec la méthode {{jsxref("Object.keys()")}}.
+
+```js
+var o = {};
+Object.defineProperty(o, 'a', {
+  value: 1,
+  enumerable: true
+});
+Object.defineProperty(o, 'b', {
+  value: 2,
+  enumerable: false
+});
+Object.defineProperty(o, 'c', {
+  value: 3
+}); // enumerable vaut false par défaut
+o.d = 4; // enumerable vaut true par défaut
+         // lorsqu'on crée une propriété
+         // en la définissant
+Object.defineProperty(o, Symbol.for('e'), {
+  value: 5,
+  enumerable: true
+});
+Object.defineProperty(o, Symbol.for('f'), {
+  value: 6,
+  enumerable: false
+});
+
+for (var i in o) {
+  console.log(i);
+}
+// affiche 'a' et 'd' (dans un ordre indéfini)
+
+Object.keys(o); // ['a', 'd']
+
+o.propertyIsEnumerable('a'); // true
+o.propertyIsEnumerable('b'); // false
+o.propertyIsEnumerable('c'); // false
+o.propertyIsEnumerable('d'); // true
+o.propertyIsEnumerable(Symbol.for('e')); // true
+o.propertyIsEnumerable(Symbol.for('f')); // false
+
+var p = { ...o }
+p.a // 1
+p.b // undefined
+p.c // undefined
+p.d // 4
+p[Symbol.for('e')] // 5
+p[Symbol.for('f')] // undefined
+```
+
+#### Attribut `configurable`
+
+L'attribut `configurable` permet de contrôler si la propriété peut être supprimée et si les autres attributs de propriété (voir ci-avant), à l'exception de `value` ou de `writable`, peuvent être modifiés.
+
+```js
+var o = {};
+Object.defineProperty(o, "a", { get : function(){return 1;},
+                                configurable : false } );
+
+Object.defineProperty(o, "a", {configurable : true});
+// renvoie une TypeError
+
+Object.defineProperty(o, "a", {enumerable : true});
+// renvoie une TypeError
+
+Object.defineProperty(o, "a", {set : function(){}});
+// renvoie une TypeError (set était non défini avant)
+
+Object.defineProperty(o, "a", {get : function(){return 1;}});
+// renvoie une TypeError
+// (bien que le nouveau get soit identique au précédent)
+
+Object.defineProperty(o, "a", {value : 12});
+// renvoie une TypeError
+
+console.log(o.a); // log 1
+delete o.a; // Rien ne se passe
+console.log(o.a); // log 1
+```
+
+Si l'attribut `configurable` de `o.a` avait été `true`, aucune de ces erreurs n'aurait été renvoyée et la propriété aurait été supprimée au final.
+
+### Ajouter des propriétés et des valeurs par défaut
+
+Il est toujours important de savoir comment les valeurs par défaut sont appliquées. Le comportement est souvent différent entre une affectation simple et l'utilisation de `Object.defineProperty()`. Par exemple :
+
+```js
+var o = {};
+
+o.a = 1;
+// est équivalent à :
+Object.defineProperty(o, "a", {value : 1,
+                               writable : true,
+                               configurable : true,
+                               enumerable : true});
+
+
+// D'un autre côté,
+Object.defineProperty(o, "a", {value : 1});
+// sera équivalent à :
+Object.defineProperty(o, "a", {value : 1,
+                               writable : false,
+                               configurable : false,
+                               enumerable : false});
+```
+
+### Accesseurs et mutateurs adaptés
+
+L'exemple ci-dessous illustre comment implémenter un objet qui archive des données. Lorsque la propriété `température` est définie, on ajoute une entrée au tableau `archive` :
+
+```js
+function Archiviste() {
+  var température = null;
+  var archive = [];
+
+  Object.defineProperty(this, "température",{
+    get: function() {
+      console.log("accès !");
+      return température;
+    },
+    set: function(value) {
+      température = value;
+      archive.push({val: température});
+    }
+  });
+
+  this.getArchive = function() {return archive;};
+}
+
+var arc = new Archiviste();
+arc.température; // "accès !"
+arc.température = 11;
+arc.température = 13;
+arc.getArchive(); // [{val: 11}, {val: 13}]
+```
+
+## Spécifications
+
+<table class="standard-table">
+  <thead>
+    <tr>
+      <th scope="col">Spécification</th>
+      <th scope="col">É tat</th>
+      <th scope="col">Commentaires</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>
+        {{SpecName('ES5.1', '#sec-15.2.3.6', 'Object.defineProperty')}}
+      </td>
+      <td>{{Spec2('ES5.1')}}</td>
+      <td>Définition initiale. Implémentée avec JavaScript 1.8.5.</td>
+    </tr>
+    <tr>
+      <td>
+        {{SpecName('ES6', '#sec-object.defineproperty', 'Object.defineProperty')}}
+      </td>
+      <td>{{Spec2('ES6')}}</td>
+      <td></td>
+    </tr>
+    <tr>
+      <td>
+        <p>
+          {{SpecName('ESDraft', '#sec-object.defineproperty', 'Object.defineProperty')}}
+        </p>
+      </td>
+      <td>{{Spec2('ESDraft')}}</td>
+      <td></td>
+    </tr>
+  </tbody>
+</table>
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Object.defineProperty")}}
+
+## Notes de compatibilité
+
+### Redéfinir la propriété `length` d'un tableau (`Array`)
+
+Il est possible de redéfinir la propriété {{jsxref("Array.length", "length")}} utilisée pour les tableaux, avec les restrictions vues. (La propriété `length` est initialement non-configurable, non-enumérable et accessible en écriture (`writable` vaut `true`)). Ainsi, sur un tableau, si rien n'a été fait, on peut modifier la valeur de la propriété` length` ou la rendre non accessible en écriture. Il n'est pas permis de changer son caractère énumérable ou configurable. Cependant, tous les navigateurs n'autorisent pas cette redéfinition.
+
+Les versions de Firefox 4 à 22 renverront une exception {{jsxref("TypeError")}} pour chaque tentative (licite ou non) de modification de la propriété `length` d'un tableau.
+
+Pour les versions de Chrome qui implémentent `Object.defineProperty()`, elles ignorent, dans certaines circonstances, une redéfinition de la propriété utilisant une valeur différente de la valeur courante de `length`. Sous certaines circonstances, le changement de l'accès en écriture n'aura aucun effet (et ne renverra aucune exception). Les méthodes relatives comme  {{jsxref("Array.prototype.push")}} ne respectent pas le non accès en écriture.
+
+Pour les versions de Safari qui implémentent `Object.defineProperty()` elles ignorent la redéfinition d'une valeur différente de la valeur courante. Toute tentative de modifier l'accès en écriture échouera silencieusement (aucune modification effective, aucune exception renvoyée).
+
+Seules les versions Internet Explorer 9 et supérieures et Firefox 23 et supérieures semblent supporter complètement la redéfinition de la propriété `length` pour les tableaux. À l'heure actuelle, il n'est pas conseillé de s'attendre à ce qu'une telle redéfinition fonctionne ou ne fonctionne pas. Même dans le cas où on peut supposer que cela fonctionne de façon cohérente : [ce n'est pas vraiment une bonne idée de le faire](https://whereswalden.com/2013/08/05/new-in-firefox-23-the-length-property-of-an-array-can-be-made-non-writable-but-you-shouldnt-do-it/) (en anglais).
+
+### Notes spécifiques relatives à Internet Explorer 8
+
+Internet Explorer 8 a implémenté une méthode `Object.defineProperty()` [uniquement utilisable sur les objets DOM](https://msdn.microsoft.com/en-us/library/dd229916%28VS.85%29.aspx). Quelques éléments sont à noter :
+
+- L'utilisation de `Object.defineProperty()` sur les objets natifs renvoie une erreur.
+- Les attributs de propriétés doivent être définis avec certaines valeurs. `true` (pour `Configurable`), `true` (pour `enumerable`), `true` (pour `writable`) pour les descripteurs de données et `true` pour `configurable`, `false` pour `enumerable` pour les descripteurs d'accesseur. Fournir d'autres valeurs résultera en une erreur (à confirmer).
+- Pour modifier une propriété, il faut d'abord la supprimer. Si ça n'a pas été fait, elle reste telle quelle.
+
+## Voir aussi
+
+- [Énumérabilité et maîtrise des propriétés](/fr/docs/Web/JavaScript/Caract%C3%A8re_%C3%A9num%C3%A9rable_des_propri%C3%A9t%C3%A9s_et_rattachement)
+- {{jsxref("Object.defineProperties()")}}
+- {{jsxref("Object.propertyIsEnumerable()")}}
+- {{jsxref("Object.getOwnPropertyDescriptor()")}}
+- {{jsxref("Object.prototype.watch()")}}
+- {{jsxref("Object.prototype.unwatch()")}}
+- {{jsxref("Opérateurs/L_opérateur_get", "get")}}
+- {{jsxref("Opérateurs/L_opérateur_set", "set")}}
+- {{jsxref("Object.create()")}}
+- [Exemples supplémentaires utilisant `Object.defineProperty`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object/defineProperty/Exemples_suppl%C3%A9mentaires)
+- {{jsxref("Reflect.defineProperty()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/object/entries/index.html b/files/fr/web/javascript/reference/global_objects/object/entries/index.html
deleted file mode 100644
index 9d3d2080a7..0000000000
--- a/files/fr/web/javascript/reference/global_objects/object/entries/index.html
+++ /dev/null
@@ -1,157 +0,0 @@
----
-title: Object.entries()
-slug: Web/JavaScript/Reference/Global_Objects/Object/entries
-tags:
-  - ECMAScript2016
-  - JavaScript
-  - Méthode
-  - Object
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Object/entries
-original_slug: Web/JavaScript/Reference/Objets_globaux/Object/entries
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <code><strong>Object.entries()</strong></code> renvoie un tableau des propriétés propres énumérables d'un objet dont la clé est une chaîne de caractères, sous la forme de paires <code>[clé, valeur]</code>, dans le même ordre qu'une boucle {{jsxref("Instructions/for...in", "for...in")}} (la boucle <code>for-in</code> est différente car elle parcourt la chaîne des prototypes).</p>
-
-<p>L'ordre du tableau renvoyé par cette méthode ne dépend pas de la façon dont l'objet est défini. S'il faut garantir un certain ordre, on pourra utiliser la méthode {{jsxref("Array.sort()")}}.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/object-entries.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">Object.entries(<var>obj</var>)</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>obj</code></dt>
- <dd>L'objet dont on souhaite connaître les propriétés propres énumérables dont la clé est une chaîne de caractères, sous la forme de paires <code>[clé, valeur]</code>.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Un tableau qui contient les propriétés énumérables propres de l'objet sous la forme de paires <code>[clé, valeur]</code>.</p>
-
-<h2 id="Description">Description</h2>
-
-<p><code>Object.entries()</code> renvoie un tableau dont les éléments sont des paires (des tableaux à deux éléments)  <code>[clé, valeur]</code> qui correspondent aux propriétés énumérables qui sont directement présentes sur l'objet passé en argument. L'ordre du tableau est le même que celui utilisé lorsqu'on parcourt les valeurs manuellement.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<pre class="brush: js">var obj = { toto: "truc", machin: 42 };
-console.log(Object.entries(obj)); // [ ['toto', 'truc'], ['machin', 42] ]
-
-// Un objet semblable à un tableau
-var obj = { 0: 'a', 1: 'b', 2: 'c' };
-console.log(Object.entries(obj)); // [ ['0', 'a'], ['1', 'b'], ['2', 'c'] ]
-
-// Un objet semblable à un tableau
-// dont les clés sont aléatoirement ordonnées
-var un_obj = { 100: 'a', 2: 'b', 7: 'c' };
-console.log(Object.entries(un_obj)); // [ ['2', 'b'], ['7', 'c'], ['100', 'a'] ]
-
-// getToto est une propriété non énumérable
-var mon_obj = Object.create({}, { getToto: { value: function() { return this.toto; } } });
-mon_obj.toto = "truc";
-console.log(Object.entries(mon_obj)); // [ ['toto', 'truc'] ]
-
-// un argument de type primitif sera
-// converti en un objet
-console.log(Object.entries("toto")); // [ ['0', 't'], ['1', 'o'], ['2', 't'],  ['3', 'o'] ]
-
-// Un tableau vide pour les types primitifs qui n'ont pas de propriétés
-console.log(Object.entries(100)); // [ ]
-
-// parcourir les clés-valeurs
-var autreObjet = {a:5, b:7, c:9};
-
-for (var [cle, valeur] of Object.entries(autreObjet)){
-  console.log(cle + ' ' + valeur);
-}
-
-// Ou encore, en utilisant les méthodes génériques
-Object.entries(autreObjet).forEach(([clé, valeur]) =&gt; {
-  console.log(clé + ' ' + valeur);
-});
-</pre>
-
-<h3 id="Convertir_un_objet_en_Map">Convertir un objet en <code>Map</code></h3>
-
-<p>Le constructeur {{jsxref("Map", "new Map()")}} accepte un argument itérable pour décrire les entrées du tableau associatif. Grâce à <code>Object.entries</code>, il est possible de convertir simplement un objet {{jsxref("Object")}} en un objet {{jsxref("Map")}} :</p>
-
-<pre class="brush: js">var obj = { toto: "truc", machin: 42 };
-var map = new Map(Object.entries(obj));
-console.log(map); // Map { toto: "truc", machin: 42 }</pre>
-
-<h3 id="Parcourir_un_objet">Parcourir un objet</h3>
-
-<p>En utilisant <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Affecter_par_décomposition#Décomposition_d'un_tableau">la décomposition des tableaux</a>, on peut simplement parcourir les différentes propriétés d'un objet :</p>
-
-<pre class="brush: js">const obj = { toto: "truc", bidule: 42 };
-Object.entries(obj).forEach(
-  ([clé, valeur]) =&gt; console.log(`${clé}: ${valeur}`)
-);
-// "toto: truc"
-// "bidule: 42"</pre>
-
-<h2 id="Prothèse_d'émulation_(polyfill)">Prothèse d'émulation (<em>polyfill</em>)</h2>
-
-<p>Afin d'ajouter le support pour <code>Object.entries</code> dans des environnements plus anciens qui ne supportent pas la méthode nativement, vous pouvez utiliser une prothèse comme celle proposée sur le dépôt <a href="https://github.com/tc39/proposal-object-values-entries">tc39/proposal-object-values-entries</a> ou sur le dépôt <a href="https://github.com/es-shims/Object.entries">es-shims/Object.entries</a>.</p>
-
-<p>Vous pouvez également utiliser la prothèse suivante (qui nécessitera la prothèse pour <code>Object.prototype.keys()</code> si on souhaite être compatible avec IE 8 et les versions antérieures) :</p>
-
-<pre class="brush: js">if (!Object.entries) {
-  Object.entries = function( obj ){
-    var ownProps = Object.keys( obj ),
-        i = ownProps.length,
-        resArray = new Array(i);
-    while (i--)
-      resArray[i] = [ownProps[i], obj[ownProps[i]]];
-
-    return resArray;
-  };
-}</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-object.entries', 'Object.entries')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES8', '#sec-object.entries', 'Object.entries')}}</td>
-   <td>{{Spec2('ES8')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Object.entries")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/JavaScript/Caractère_énumérable_des_propriétés_et_rattachement">Énumérabilité et rattachement des propriétés</a></li>
- <li>{{jsxref("Object.keys()")}}</li>
- <li>{{jsxref("Object.values()")}}</li>
- <li>{{jsxref("Object.prototype.propertyIsEnumerable()")}}</li>
- <li>{{jsxref("Object.create()")}}</li>
- <li>{{jsxref("Object.fromEntries()")}}</li>
- <li>{{jsxref("Object.getOwnPropertyNames()")}}</li>
- <li>{{jsxref("Map.prototype.entries()")}}</li>
- <li>{{jsxref("Map.prototype.keys()")}}</li>
- <li>{{jsxref("Map.prototype.values()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/object/entries/index.md b/files/fr/web/javascript/reference/global_objects/object/entries/index.md
new file mode 100644
index 0000000000..7207bf85aa
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/object/entries/index.md
@@ -0,0 +1,143 @@
+---
+title: Object.entries()
+slug: Web/JavaScript/Reference/Global_Objects/Object/entries
+tags:
+  - ECMAScript2016
+  - JavaScript
+  - Méthode
+  - Object
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/entries
+original_slug: Web/JavaScript/Reference/Objets_globaux/Object/entries
+---
+{{JSRef}}
+
+La méthode **`Object.entries()`** renvoie un tableau des propriétés propres énumérables d'un objet dont la clé est une chaîne de caractères, sous la forme de paires `[clé, valeur]`, dans le même ordre qu'une boucle {{jsxref("Instructions/for...in", "for...in")}} (la boucle `for-in` est différente car elle parcourt la chaîne des prototypes).
+
+L'ordre du tableau renvoyé par cette méthode ne dépend pas de la façon dont l'objet est défini. S'il faut garantir un certain ordre, on pourra utiliser la méthode {{jsxref("Array.sort()")}}.
+
+{{EmbedInteractiveExample("pages/js/object-entries.html")}}
+
+## Syntaxe
+
+    Object.entries(obj)
+
+### Paramètres
+
+- `obj`
+  - : L'objet dont on souhaite connaître les propriétés propres énumérables dont la clé est une chaîne de caractères, sous la forme de paires `[clé, valeur]`.
+
+### Valeur de retour
+
+Un tableau qui contient les propriétés énumérables propres de l'objet sous la forme de paires `[clé, valeur]`.
+
+## Description
+
+`Object.entries()` renvoie un tableau dont les éléments sont des paires (des tableaux à deux éléments)  `[clé, valeur]` qui correspondent aux propriétés énumérables qui sont directement présentes sur l'objet passé en argument. L'ordre du tableau est le même que celui utilisé lorsqu'on parcourt les valeurs manuellement.
+
+## Exemples
+
+```js
+var obj = { toto: "truc", machin: 42 };
+console.log(Object.entries(obj)); // [ ['toto', 'truc'], ['machin', 42] ]
+
+// Un objet semblable à un tableau
+var obj = { 0: 'a', 1: 'b', 2: 'c' };
+console.log(Object.entries(obj)); // [ ['0', 'a'], ['1', 'b'], ['2', 'c'] ]
+
+// Un objet semblable à un tableau
+// dont les clés sont aléatoirement ordonnées
+var un_obj = { 100: 'a', 2: 'b', 7: 'c' };
+console.log(Object.entries(un_obj)); // [ ['2', 'b'], ['7', 'c'], ['100', 'a'] ]
+
+// getToto est une propriété non énumérable
+var mon_obj = Object.create({}, { getToto: { value: function() { return this.toto; } } });
+mon_obj.toto = "truc";
+console.log(Object.entries(mon_obj)); // [ ['toto', 'truc'] ]
+
+// un argument de type primitif sera
+// converti en un objet
+console.log(Object.entries("toto")); // [ ['0', 't'], ['1', 'o'], ['2', 't'],  ['3', 'o'] ]
+
+// Un tableau vide pour les types primitifs qui n'ont pas de propriétés
+console.log(Object.entries(100)); // [ ]
+
+// parcourir les clés-valeurs
+var autreObjet = {a:5, b:7, c:9};
+
+for (var [cle, valeur] of Object.entries(autreObjet)){
+  console.log(cle + ' ' + valeur);
+}
+
+// Ou encore, en utilisant les méthodes génériques
+Object.entries(autreObjet).forEach(([clé, valeur]) => {
+  console.log(clé + ' ' + valeur);
+});
+```
+
+### Convertir un objet en `Map`
+
+Le constructeur {{jsxref("Map", "new Map()")}} accepte un argument itérable pour décrire les entrées du tableau associatif. Grâce à `Object.entries`, il est possible de convertir simplement un objet {{jsxref("Object")}} en un objet {{jsxref("Map")}} :
+
+```js
+var obj = { toto: "truc", machin: 42 };
+var map = new Map(Object.entries(obj));
+console.log(map); // Map { toto: "truc", machin: 42 }
+```
+
+### Parcourir un objet
+
+En utilisant [la décomposition des tableaux](/fr/docs/Web/JavaScript/Reference/Opérateurs/Affecter_par_décomposition#Décomposition_d'un_tableau), on peut simplement parcourir les différentes propriétés d'un objet :
+
+```js
+const obj = { toto: "truc", bidule: 42 };
+Object.entries(obj).forEach(
+  ([clé, valeur]) => console.log(`${clé}: ${valeur}`)
+);
+// "toto: truc"
+// "bidule: 42"
+```
+
+## Prothèse d'émulation (_polyfill_)
+
+Afin d'ajouter le support pour `Object.entries` dans des environnements plus anciens qui ne supportent pas la méthode nativement, vous pouvez utiliser une prothèse comme celle proposée sur le dépôt [tc39/proposal-object-values-entries](https://github.com/tc39/proposal-object-values-entries) ou sur le dépôt [es-shims/Object.entries](https://github.com/es-shims/Object.entries).
+
+Vous pouvez également utiliser la prothèse suivante (qui nécessitera la prothèse pour `Object.prototype.keys()` si on souhaite être compatible avec IE 8 et les versions antérieures) :
+
+```js
+if (!Object.entries) {
+  Object.entries = function( obj ){
+    var ownProps = Object.keys( obj ),
+        i = ownProps.length,
+        resArray = new Array(i);
+    while (i--)
+      resArray[i] = [ownProps[i], obj[ownProps[i]]];
+
+    return resArray;
+  };
+}
+```
+
+## Spécifications
+
+| Spécification                                                                        | État                         | Commentaires         |
+| ------------------------------------------------------------------------------------ | ---------------------------- | -------------------- |
+| {{SpecName('ESDraft', '#sec-object.entries', 'Object.entries')}} | {{Spec2('ESDraft')}} |                      |
+| {{SpecName('ES8', '#sec-object.entries', 'Object.entries')}}     | {{Spec2('ES8')}}         | Définition initiale. |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Object.entries")}}
+
+## Voir aussi
+
+- [Énumérabilité et rattachement des propriétés](/fr/docs/Web/JavaScript/Caractère_énumérable_des_propriétés_et_rattachement)
+- {{jsxref("Object.keys()")}}
+- {{jsxref("Object.values()")}}
+- {{jsxref("Object.prototype.propertyIsEnumerable()")}}
+- {{jsxref("Object.create()")}}
+- {{jsxref("Object.fromEntries()")}}
+- {{jsxref("Object.getOwnPropertyNames()")}}
+- {{jsxref("Map.prototype.entries()")}}
+- {{jsxref("Map.prototype.keys()")}}
+- {{jsxref("Map.prototype.values()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/object/freeze/index.html b/files/fr/web/javascript/reference/global_objects/object/freeze/index.html
deleted file mode 100644
index 603a62206d..0000000000
--- a/files/fr/web/javascript/reference/global_objects/object/freeze/index.html
+++ /dev/null
@@ -1,252 +0,0 @@
----
-title: Object.freeze()
-slug: Web/JavaScript/Reference/Global_Objects/Object/freeze
-tags:
-  - ECMAScript 5
-  - JavaScript
-  - Méthode
-  - Object
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Object/freeze
-original_slug: Web/JavaScript/Reference/Objets_globaux/Object/freeze
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <code><strong>Object.freeze()</strong></code> permet de geler un objet, c'est-à-dire qu'on empêche d'ajouter de nouvelles propriétés, de supprimer ou d'éditer des propriétés existantes, y compris en ce qui concerne leur caractère énumérable, configurable ou pour l'accès en écriture. L'objet devient ainsi immuable. La méthode renvoie l'objet ainsi « gelé ».</p>
-
-<div>{{EmbedInteractiveExample("pages/js/object-freeze.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">Object.freeze(<var>obj</var>)</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>obj</code></dt>
- <dd>L'objet à geler.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>L'objet qui a été passé à la fonction.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>Rien ne pourra être ajouté ou supprimé dans l'ensemble des propriétés de l'objet gelé. Toute tentative échouera, silencieusement ou via une exception {{jsxref("TypeError")}} (la plupart du temps en {{jsxref("Strict_mode", "mode strict", "", 1)}}).</p>
-
-<p>Les propriétés qui sont des données ne pourront pas être changées et les attributs <code>writable</code> et <code>configurable</code> vaudront <code>false</code>. Les propriétés qui sont des accesseurs ou des mutateurs fonctionneront de la même façon (et ne changeront pas la valeur associée malgré le fait qu'il n'y ait pas d'erreur). Les propriétés dont les valeurs sont des objets pourront être modifiées si ces objets ne sont pas gelés. Les tableaux peuvent également être gelés ce qui empêche alors d'ajouter ou de retirer des éléments ou de modifier les éléments existants si ceux-ci ne sont pas des objets.</p>
-
-<p>La fonction renvoie l'objet passé en argument, elle ne crée pas une copie « gelée ».</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Geler_des_objets">Geler des objets</h3>
-
-<pre class="brush: js">var obj = {
-  prop: function (){},
-  toto: "truc"
-};
-
-// On peut ajouter de nouvelles propriétés,
-// éditer ou supprimer celles existantes
-obj.toto = "machin";
-obj.bidule = "woof";
-delete obj.prop;
-
-// L'argument et la valeur renvoyée correspondent au
-// même objet.
-// Il n'est pas nécessaire d'utiliser la valeur renvoyée
-// pour geler l'objet original.
-var o = Object.freeze(obj);
-
-o === obj; // true
-Object.isFrozen(obj); // true
-
-// Maintenant que l'objet est gelé, les changements échoueront
-obj.toto = "eheh"; // échoue silencieusement
-obj.roxor = "ga bu zo meu"; // échoue silencieusement et n'ajoute
-                            // pas la propriété
-
-// ...en mode strict, l'échec se traduira par une exception TypeErrors
-function echec(){
-  "use strict";
-  obj.toto = "bipbip"; // renvoie une TypeError
-  delete obj.toto;     // renvoie une TypeError
-  delete obj.roxor;    // renvoie true car l'attribut n' a pas été ajouté
-  obj.bipbip = "arf";  // renvoie une  TypeError
-}
-
-echec();
-
-// Les changements via Object.defineProperty échoueront également
-// renvoie une TypeError
-Object.defineProperty(obj, "ohoh", { value: 17 });
-// renvoie une TypeError
-Object.defineProperty(obj, "toto", { value: "eit" });
-
-// Il est également impossible de modifier le prototype.
-// Les deux instructions suivantes déclencheront une TypeError.
-Object.setPrototypeOf(obj, { x: 20 });
-obj.__proto__ = { x: 20 };
-</pre>
-
-<h3 id="Geler_un_tableau">Geler un tableau</h3>
-
-<pre class="brush: js">let a = [0];
-Object.freeze(a);
-// Le tableau ne peut plus être modifié
-
-a[0] = 1;  // échoue silencieusement
-a.push(2); // échoue silencieusement
-
-// en mode strict, de telles tentatives
-// déclencheront des exceptions TypeError
-function echec() {
-  "use strict"
-  a[0] = 1;
-  a.push(2);
-}
-
-echec();
-</pre>
-
-<p>L'exemple qui suit illustre comment les propriétés qui sont des objets peuvent être éditées (la méthode <code>freeze</code> ne s'applique que sur l'objet courant et de façon superficielle).</p>
-
-<pre class="brush: js">obj1 = {
-  internal: {}
-};
-
-Object.freeze(obj1);
-obj1.internal.a = 'valeurA';
-
-obj1.internal.a // 'valeurA'</pre>
-
-<p class="brush: js">L'objet qui est gelé est immuable mais ce n'est pas nécessairement une constante. Pour obtenir une constante, il faut que l'ensemble des références (directes et indirectes) pointe vers des objets immuables. Les chaînes de caractères, les nombres et les booléens sont toujours immuables. La plupart du temps, on aura besoin de créer des constantes au cas par cas (et non de façon générale).</p>
-
-<h3 id="Qu'est-ce_que_le_gel_«_superficiel_»_(shallow_freeze)">Qu'est-ce que le gel « superficiel » ? (<em>shallow freeze</em>)</h3>
-
-<p>Lorsqu'on appelle <code>Object.freeze(monObjet)</code>, le gel ne s'applique qu'aux propriétés directement rattachées à <code>monObjet</code>. L'ajout, la suppression ou la réaffectation ne sont empêchées que sur l'objet directement. Si les valeurs de ces propriétés sont également des objets, ces derniers ne sont pas gelés et on peut leur ajouter/supprimer/réaffecter des valeurs.</p>
-
-<pre class="brush: js">var employé = {
-  nom: "Leroy",
-  designation: "Développeur",
-  adresse: {
-    cp: "72000",
-    ville: "Le Mans"
-  }
-};
-
-Object.freeze(employé);
-
-employé.nom = "John"; // propriété directe, la réaffectation échoue en silence
-employé.adresse.ville = "Paris"; // propriété d'un objet fils : modifiable
-
-console.log(employé.adresse.ville); // affichera Paris
-</pre>
-
-<p class="brush: js">Pour rendre l'objet complètement immuable, on gèle chacun des objets qu'il contient. Voici un exemple simple de fonction pour parcourir les propriétés qui sont des objets et les geler (attention, cela ne gère pas le cas où on a des cycles de références, ce qui entraînerait une boucle infinie).</p>
-
-<pre class="brush: js">function deepFreeze(obj) {
-
-  // On récupère les noms des propriétés définies sur obj
-  var propNames = Object.getOwnPropertyNames(obj);
-
-  // On gèle les propriétés avant de geler l'objet
-  for(let name of propNames){
-    let value = obj[name];
-    obj[name] = value &amp;&amp; typeof value === "object" ?
-      deepFreeze(value) : value;
-  }
-
-  // On gèle l'objet initial
-  return Object.freeze(obj);
-}
-
-obj2 = {
-  internal: {
-    a: null
-  }
-};
-
-deepFreeze(obj2);
-obj2.internal.a = 'valeurB'; // échouera silencieusement en mode non-strict
-obj2.internal.a; // null</pre>
-
-<h2 id="Notes">Notes</h2>
-
-<p>Pour ES5, si l'argument passé à la méthode n'est pas un objet mais est d'un autre type primitif, cela entraînera une exception {{jsxref("TypeError")}}. Pour ECMAScript 2015 (ES2015), un argument qui n'est pas un objet sera traité comme un objet ordinaire gelé et sera renvoyé tel quel par la méthode.</p>
-
-<pre class="brush: js">Object.freeze(1);
-// TypeError: 1 is not an object - code ES5
-
-Object.freeze(1);
-// 1                             - code ES2015</pre>
-
-<p>Geler un {{domxref("ArrayBufferView")}} contenant des éléments entraînera une exception {{jsxref("TypeError")}} car ce sont des vues sur des zones mémoires.</p>
-
-<pre class="brush: js">&gt; Object.freeze(new Uint8Array(0)) // Aucun élément
-Uint8Array []
-
-&gt; Object.freeze(new Uint8Array(1)) // Avec des éléments
-TypeError: Cannot freeze array buffer views with elements
-
-&gt; Object.freeze(new DataView(new ArrayBuffer(32))) // Aucun élément
-DataView {}
-
-&gt; Object.freeze(new Float64Array(new ArrayBuffer(64), 63, 0)) // Aucun élément
-Float64Array []
-
-&gt; Object.freeze(new Float64Array(new ArrayBuffer(64), 32, 2)) // Avec des éléments
-TypeError: Cannot freeze array buffer views with elements
-</pre>
-
-<p>On notera que les trois propriétés standard (<code>buf.byteLength</code>, <code>buf.byteOffset</code> et <code>buf.buffer</code>) sont en lecture seule (comme pour {{jsxref("ArrayBuffer")}} et {{jsxref("SharedArrayBuffer")}}) : il n'y a donc aucune raison de vouloir geler ces propriétés.</p>
-
-<h3 id="Comparaison_avec_Object.seal()">Comparaison avec <code>Object.seal()</code></h3>
-
-<p>Lorsqu'on utilise la méthode <code>Object.freeze()</code>, les propriétés existantes d'un objet deviennent immuables. En revanche, avec {{jsxref("Object.seal()")}}, il est toujours possible de modifier la valeur des propriétés existantes d'un objet scellé.</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-15.2.3.9', 'Object.freeze')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td>Définition initiale.<br>
-    Implémentée avec JavaScript 1.8.5</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-object.freeze', 'Object.freeze')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-object.freeze', 'Object.freeze')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Object.freeze")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Object.isFrozen()")}}</li>
- <li>{{jsxref("Object.preventExtensions()")}}</li>
- <li>{{jsxref("Object.isExtensible()")}}</li>
- <li>{{jsxref("Object.seal()")}}</li>
- <li>{{jsxref("Object.isSealed()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/object/freeze/index.md b/files/fr/web/javascript/reference/global_objects/object/freeze/index.md
new file mode 100644
index 0000000000..4e90c7e363
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/object/freeze/index.md
@@ -0,0 +1,236 @@
+---
+title: Object.freeze()
+slug: Web/JavaScript/Reference/Global_Objects/Object/freeze
+tags:
+  - ECMAScript 5
+  - JavaScript
+  - Méthode
+  - Object
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/freeze
+original_slug: Web/JavaScript/Reference/Objets_globaux/Object/freeze
+---
+{{JSRef}}
+
+La méthode **`Object.freeze()`** permet de geler un objet, c'est-à-dire qu'on empêche d'ajouter de nouvelles propriétés, de supprimer ou d'éditer des propriétés existantes, y compris en ce qui concerne leur caractère énumérable, configurable ou pour l'accès en écriture. L'objet devient ainsi immuable. La méthode renvoie l'objet ainsi « gelé ».
+
+{{EmbedInteractiveExample("pages/js/object-freeze.html")}}
+
+## Syntaxe
+
+    Object.freeze(obj)
+
+### Paramètres
+
+- `obj`
+  - : L'objet à geler.
+
+### Valeur de retour
+
+L'objet qui a été passé à la fonction.
+
+## Description
+
+Rien ne pourra être ajouté ou supprimé dans l'ensemble des propriétés de l'objet gelé. Toute tentative échouera, silencieusement ou via une exception {{jsxref("TypeError")}} (la plupart du temps en {{jsxref("Strict_mode", "mode strict", "", 1)}}).
+
+Les propriétés qui sont des données ne pourront pas être changées et les attributs `writable` et `configurable` vaudront `false`. Les propriétés qui sont des accesseurs ou des mutateurs fonctionneront de la même façon (et ne changeront pas la valeur associée malgré le fait qu'il n'y ait pas d'erreur). Les propriétés dont les valeurs sont des objets pourront être modifiées si ces objets ne sont pas gelés. Les tableaux peuvent également être gelés ce qui empêche alors d'ajouter ou de retirer des éléments ou de modifier les éléments existants si ceux-ci ne sont pas des objets.
+
+La fonction renvoie l'objet passé en argument, elle ne crée pas une copie « gelée ».
+
+## Exemples
+
+### Geler des objets
+
+```js
+var obj = {
+  prop: function (){},
+  toto: "truc"
+};
+
+// On peut ajouter de nouvelles propriétés,
+// éditer ou supprimer celles existantes
+obj.toto = "machin";
+obj.bidule = "woof";
+delete obj.prop;
+
+// L'argument et la valeur renvoyée correspondent au
+// même objet.
+// Il n'est pas nécessaire d'utiliser la valeur renvoyée
+// pour geler l'objet original.
+var o = Object.freeze(obj);
+
+o === obj; // true
+Object.isFrozen(obj); // true
+
+// Maintenant que l'objet est gelé, les changements échoueront
+obj.toto = "eheh"; // échoue silencieusement
+obj.roxor = "ga bu zo meu"; // échoue silencieusement et n'ajoute
+                            // pas la propriété
+
+// ...en mode strict, l'échec se traduira par une exception TypeErrors
+function echec(){
+  "use strict";
+  obj.toto = "bipbip"; // renvoie une TypeError
+  delete obj.toto;     // renvoie une TypeError
+  delete obj.roxor;    // renvoie true car l'attribut n' a pas été ajouté
+  obj.bipbip = "arf";  // renvoie une  TypeError
+}
+
+echec();
+
+// Les changements via Object.defineProperty échoueront également
+// renvoie une TypeError
+Object.defineProperty(obj, "ohoh", { value: 17 });
+// renvoie une TypeError
+Object.defineProperty(obj, "toto", { value: "eit" });
+
+// Il est également impossible de modifier le prototype.
+// Les deux instructions suivantes déclencheront une TypeError.
+Object.setPrototypeOf(obj, { x: 20 });
+obj.__proto__ = { x: 20 };
+```
+
+### Geler un tableau
+
+```js
+let a = [0];
+Object.freeze(a);
+// Le tableau ne peut plus être modifié
+
+a[0] = 1;  // échoue silencieusement
+a.push(2); // échoue silencieusement
+
+// en mode strict, de telles tentatives
+// déclencheront des exceptions TypeError
+function echec() {
+  "use strict"
+  a[0] = 1;
+  a.push(2);
+}
+
+echec();
+```
+
+L'exemple qui suit illustre comment les propriétés qui sont des objets peuvent être éditées (la méthode `freeze` ne s'applique que sur l'objet courant et de façon superficielle).
+
+```js
+obj1 = {
+  internal: {}
+};
+
+Object.freeze(obj1);
+obj1.internal.a = 'valeurA';
+
+obj1.internal.a // 'valeurA'
+```
+
+L'objet qui est gelé est immuable mais ce n'est pas nécessairement une constante. Pour obtenir une constante, il faut que l'ensemble des références (directes et indirectes) pointe vers des objets immuables. Les chaînes de caractères, les nombres et les booléens sont toujours immuables. La plupart du temps, on aura besoin de créer des constantes au cas par cas (et non de façon générale).
+
+### Qu'est-ce que le gel « superficiel » ? (_shallow freeze_)
+
+Lorsqu'on appelle `Object.freeze(monObjet)`, le gel ne s'applique qu'aux propriétés directement rattachées à `monObjet`. L'ajout, la suppression ou la réaffectation ne sont empêchées que sur l'objet directement. Si les valeurs de ces propriétés sont également des objets, ces derniers ne sont pas gelés et on peut leur ajouter/supprimer/réaffecter des valeurs.
+
+```js
+var employé = {
+  nom: "Leroy",
+  designation: "Développeur",
+  adresse: {
+    cp: "72000",
+    ville: "Le Mans"
+  }
+};
+
+Object.freeze(employé);
+
+employé.nom = "John"; // propriété directe, la réaffectation échoue en silence
+employé.adresse.ville = "Paris"; // propriété d'un objet fils : modifiable
+
+console.log(employé.adresse.ville); // affichera Paris
+```
+
+Pour rendre l'objet complètement immuable, on gèle chacun des objets qu'il contient. Voici un exemple simple de fonction pour parcourir les propriétés qui sont des objets et les geler (attention, cela ne gère pas le cas où on a des cycles de références, ce qui entraînerait une boucle infinie).
+
+```js
+function deepFreeze(obj) {
+
+  // On récupère les noms des propriétés définies sur obj
+  var propNames = Object.getOwnPropertyNames(obj);
+
+  // On gèle les propriétés avant de geler l'objet
+  for(let name of propNames){
+    let value = obj[name];
+    obj[name] = value && typeof value === "object" ?
+      deepFreeze(value) : value;
+  }
+
+  // On gèle l'objet initial
+  return Object.freeze(obj);
+}
+
+obj2 = {
+  internal: {
+    a: null
+  }
+};
+
+deepFreeze(obj2);
+obj2.internal.a = 'valeurB'; // échouera silencieusement en mode non-strict
+obj2.internal.a; // null
+```
+
+## Notes
+
+Pour ES5, si l'argument passé à la méthode n'est pas un objet mais est d'un autre type primitif, cela entraînera une exception {{jsxref("TypeError")}}. Pour ECMAScript 2015 (ES2015), un argument qui n'est pas un objet sera traité comme un objet ordinaire gelé et sera renvoyé tel quel par la méthode.
+
+```js
+Object.freeze(1);
+// TypeError: 1 is not an object - code ES5
+
+Object.freeze(1);
+// 1                             - code ES2015
+```
+
+Geler un {{domxref("ArrayBufferView")}} contenant des éléments entraînera une exception {{jsxref("TypeError")}} car ce sont des vues sur des zones mémoires.
+
+```js
+> Object.freeze(new Uint8Array(0)) // Aucun élément
+Uint8Array []
+
+> Object.freeze(new Uint8Array(1)) // Avec des éléments
+TypeError: Cannot freeze array buffer views with elements
+
+> Object.freeze(new DataView(new ArrayBuffer(32))) // Aucun élément
+DataView {}
+
+> Object.freeze(new Float64Array(new ArrayBuffer(64), 63, 0)) // Aucun élément
+Float64Array []
+
+> Object.freeze(new Float64Array(new ArrayBuffer(64), 32, 2)) // Avec des éléments
+TypeError: Cannot freeze array buffer views with elements
+```
+
+On notera que les trois propriétés standard (`buf.byteLength`, `buf.byteOffset` et `buf.buffer`) sont en lecture seule (comme pour {{jsxref("ArrayBuffer")}} et {{jsxref("SharedArrayBuffer")}}) : il n'y a donc aucune raison de vouloir geler ces propriétés.
+
+### Comparaison avec `Object.seal()`
+
+Lorsqu'on utilise la méthode `Object.freeze()`, les propriétés existantes d'un objet deviennent immuables. En revanche, avec {{jsxref("Object.seal()")}}, il est toujours possible de modifier la valeur des propriétés existantes d'un objet scellé.
+
+## Spécifications
+
+| Spécification                                                                        | État                         | Commentaires                                           |
+| ------------------------------------------------------------------------------------ | ---------------------------- | ------------------------------------------------------ |
+| {{SpecName('ES5.1', '#sec-15.2.3.9', 'Object.freeze')}}             | {{Spec2('ES5.1')}}     | Définition initiale. Implémentée avec JavaScript 1.8.5 |
+| {{SpecName('ES6', '#sec-object.freeze', 'Object.freeze')}}         | {{Spec2('ES6')}}         |                                                        |
+| {{SpecName('ESDraft', '#sec-object.freeze', 'Object.freeze')}} | {{Spec2('ESDraft')}} |                                                        |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Object.freeze")}}
+
+## Voir aussi
+
+- {{jsxref("Object.isFrozen()")}}
+- {{jsxref("Object.preventExtensions()")}}
+- {{jsxref("Object.isExtensible()")}}
+- {{jsxref("Object.seal()")}}
+- {{jsxref("Object.isSealed()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/object/fromentries/index.html b/files/fr/web/javascript/reference/global_objects/object/fromentries/index.html
deleted file mode 100644
index 713a473ddf..0000000000
--- a/files/fr/web/javascript/reference/global_objects/object/fromentries/index.html
+++ /dev/null
@@ -1,105 +0,0 @@
----
-title: Object.fromEntries()
-slug: Web/JavaScript/Reference/Global_Objects/Object/fromEntries
-tags:
-  - JavaScript
-  - Méthode
-  - Object
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Object/fromEntries
-original_slug: Web/JavaScript/Reference/Objets_globaux/Object/fromEntries
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <code><strong>Object.fromEntries()</strong></code> permet de transformer une liste de paires de clés/valeurs en un objet.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/object-fromentries.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">Object.fromEntries(<var>iterable</var>);</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>iterable</code></dt>
- <dd>Un itérable tel qu'un tableau ({{jsxref("Array")}}) ou une {{jsxref("Map")}} ou tout autre objet qui implémente <a href="/fr/docs/Web/JavaScript/Reference/Les_protocoles_iteration#Le_protocole_«_itérable_»">le protocole itérable</a>.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Un nouvel objet dont les propriétés sont fournies par les éléments de l'itérable.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>La méthode <code>Object.fromEntries()</code> prend comme argument une liste de paires de clés-valeurs et renvoie un nouvel objet dont les propriétés sont fournies par ces clés-valeurs. L'argument <code>iterable</code> doit implémenter une méthode <code>@@iterator</code> qui renvoie un itérateur produisant un objet semblable à un tableau avec deux éléments ; le premier élément est une valeur qui sera utilisée comme clé de la propriété et le second élément sera utilisé comme valeur associée à cette clé.</p>
-
-<p><code>Object.fromEntries()</code> est la fonction inverse de {{jsxref("Object.entries()")}}.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Convertir_une_Map_en_un_Object">Convertir une <code>Map</code> en un <code>Object</code></h3>
-
-<p>Grâce à <code>Object.fromEntries</code>, on peut convertir des objets {{jsxref("Map")}} en {{jsxref("Object")}} :</p>
-
-<pre class="brush: js">const map = new Map([ ['toto', 'truc'], ['machin', 42] ]);
-const obj = Object.fromEntries(map);
-console.log(obj); // { toto: "truc", machin: 42 }
-</pre>
-
-<h3 id="Convertir_un_Array_en_un_Object">Convertir un <code>Array</code> en un <code>Object</code></h3>
-
-<p>Grâce à <code>Object.fromEntries</code>, on peut convertir des objets {{jsxref("Array")}} en {{jsxref("Object")}} :</p>
-
-<pre class="brush: js">const arr = [ ['0', 'a'], ['1', 'b'], ['2', 'c'] ];
-const obj = Object.fromEntries(arr);
-console.log(obj); // { 0: "a", 1: "b", 2: "c" }
-</pre>
-
-<h3 id="Transformer_des_objets">Transformer des objets</h3>
-
-<p>Avec <code>Object.fromEntries</code> et la méthode réciproque {{jsxref("Object.entries()")}}, et <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array#Méthodes">les méthodes de manipulation de tableaux</a>, on peut transformer des objets :</p>
-
-<pre class="brush: js">const object1 = { a: 1, b: 2, c: 3 };
-
-const object2 = Object.fromEntries(
-  Object.entries(object1)
-  .map(([ key, val ]) =&gt; [ key, val * 2 ])
-);
-
-console.log(object2);
-// { a: 2, b: 4, c: 6 }</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-object.fromentries', 'Object.fromEntries')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td>Définition initiale avec ES2019.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Object.fromEntries")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Object.entries()")}}</li>
- <li>{{jsxref("Object.keys()")}}</li>
- <li>{{jsxref("Object.values()")}}</li>
- <li>{{jsxref("Map.prototype.entries()")}}</li>
- <li>{{jsxref("Map.prototype.keys()")}}</li>
- <li>{{jsxref("Map.prototype.values()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/object/fromentries/index.md b/files/fr/web/javascript/reference/global_objects/object/fromentries/index.md
new file mode 100644
index 0000000000..65c201927a
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/object/fromentries/index.md
@@ -0,0 +1,92 @@
+---
+title: Object.fromEntries()
+slug: Web/JavaScript/Reference/Global_Objects/Object/fromEntries
+tags:
+  - JavaScript
+  - Méthode
+  - Object
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/fromEntries
+original_slug: Web/JavaScript/Reference/Objets_globaux/Object/fromEntries
+---
+{{JSRef}}
+
+La méthode **`Object.fromEntries()`** permet de transformer une liste de paires de clés/valeurs en un objet.
+
+{{EmbedInteractiveExample("pages/js/object-fromentries.html")}}
+
+## Syntaxe
+
+    Object.fromEntries(iterable);
+
+### Paramètres
+
+- `iterable`
+  - : Un itérable tel qu'un tableau ({{jsxref("Array")}}) ou une {{jsxref("Map")}} ou tout autre objet qui implémente [le protocole itérable](/fr/docs/Web/JavaScript/Reference/Les_protocoles_iteration#Le_protocole_«_itérable_»).
+
+### Valeur de retour
+
+Un nouvel objet dont les propriétés sont fournies par les éléments de l'itérable.
+
+## Description
+
+La méthode `Object.fromEntries()` prend comme argument une liste de paires de clés-valeurs et renvoie un nouvel objet dont les propriétés sont fournies par ces clés-valeurs. L'argument `iterable` doit implémenter une méthode `@@iterator` qui renvoie un itérateur produisant un objet semblable à un tableau avec deux éléments ; le premier élément est une valeur qui sera utilisée comme clé de la propriété et le second élément sera utilisé comme valeur associée à cette clé.
+
+`Object.fromEntries()` est la fonction inverse de {{jsxref("Object.entries()")}}.
+
+## Exemples
+
+### Convertir une `Map` en un `Object`
+
+Grâce à `Object.fromEntries`, on peut convertir des objets {{jsxref("Map")}} en {{jsxref("Object")}} :
+
+```js
+const map = new Map([ ['toto', 'truc'], ['machin', 42] ]);
+const obj = Object.fromEntries(map);
+console.log(obj); // { toto: "truc", machin: 42 }
+```
+
+### Convertir un `Array` en un `Object`
+
+Grâce à `Object.fromEntries`, on peut convertir des objets {{jsxref("Array")}} en {{jsxref("Object")}} :
+
+```js
+const arr = [ ['0', 'a'], ['1', 'b'], ['2', 'c'] ];
+const obj = Object.fromEntries(arr);
+console.log(obj); // { 0: "a", 1: "b", 2: "c" }
+```
+
+### Transformer des objets
+
+Avec `Object.fromEntries` et la méthode réciproque {{jsxref("Object.entries()")}}, et [les méthodes de manipulation de tableaux](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array#Méthodes), on peut transformer des objets :
+
+```js
+const object1 = { a: 1, b: 2, c: 3 };
+
+const object2 = Object.fromEntries(
+  Object.entries(object1)
+  .map(([ key, val ]) => [ key, val * 2 ])
+);
+
+console.log(object2);
+// { a: 2, b: 4, c: 6 }
+```
+
+## Spécifications
+
+| Spécification                                                                                    | État                         | Commentaires                     |
+| ------------------------------------------------------------------------------------------------ | ---------------------------- | -------------------------------- |
+| {{SpecName('ESDraft', '#sec-object.fromentries', 'Object.fromEntries')}} | {{Spec2('ESDraft')}} | Définition initiale avec ES2019. |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Object.fromEntries")}}
+
+## Voir aussi
+
+- {{jsxref("Object.entries()")}}
+- {{jsxref("Object.keys()")}}
+- {{jsxref("Object.values()")}}
+- {{jsxref("Map.prototype.entries()")}}
+- {{jsxref("Map.prototype.keys()")}}
+- {{jsxref("Map.prototype.values()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/object/getownpropertydescriptor/index.html b/files/fr/web/javascript/reference/global_objects/object/getownpropertydescriptor/index.html
deleted file mode 100644
index c0166fad63..0000000000
--- a/files/fr/web/javascript/reference/global_objects/object/getownpropertydescriptor/index.html
+++ /dev/null
@@ -1,146 +0,0 @@
----
-title: Object.getOwnPropertyDescriptor()
-slug: Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyDescriptor
-tags:
-  - ECMAScript 5
-  - JavaScript
-  - Méthode
-  - Object
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyDescriptor
-original_slug: Web/JavaScript/Reference/Objets_globaux/Object/getOwnPropertyDescriptor
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <code><strong>Object.getOwnPropertyDescriptor()</strong></code> renvoie un descripteur de la propriété propre d'un objet (c'est-à-dire une propriété directement présente et pas héritée via la chaîne de prototypes).</p>
-
-<div>{{EmbedInteractiveExample("pages/js/object-getownpropertydescriptor.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">Object.getOwnPropertyDescriptor(<var>obj</var>, <var>prop</var>)</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>obj</code></dt>
- <dd>L'objet sur lequel on cherche la propriété.</dd>
- <dt><code>prop</code></dt>
- <dd>Le nom ou le symbole ({{jsxref("Symbol")}}) de la propriété dont on souhaite avoir la description.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Un descripteur de propriété de la propriété souhaitée si elle existe pour l'objet en question, sinon {{jsxref("undefined")}}.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>Cette méthode permet d'avoir des informations précises sur une propriété. Une propriété JavaScript est un nom (qui est une chaîne de caractères) ou un symbole ({{jsxref("Symbol")}}) associé à un descripteur. Voir la page {{jsxref("Object.defineProperty")}} pour plus d'informations sur les descripteurs de propriétés.</p>
-
-<p>Un descripteur de propriété est un enregistrement qui dispose des attributs suivants :</p>
-
-<dl>
- <dt><code><strong>value</strong></code></dt>
- <dd>La valeur associée à la propriété (pour les descripteurs de données uniquement).</dd>
- <dt><code><strong>writable</strong></code></dt>
- <dd><code>true</code> si et seulement si la valeur associée à la propriété peut être changée (pour les descripteurs de données uniquement).</dd>
- <dt><code><strong>get</strong></code></dt>
- <dd>Une fonction qui joue le rôle d'accesseur (<em>getter</em>) pour la propriété ou {{jsxref("undefined")}} s'il n'y a pas d'accesseur (pour les descripteurs d'accesseurs uniquement).</dd>
- <dt><code><strong>set</strong></code></dt>
- <dd>Une fonction qui joue le rôle de mutateur (<em>setter</em>) pour la propriété ou <code>undefined</code> s'il n'y a pas de tel mutateur (pour les descripteurs d'accesseurs uniquement).</dd>
- <dt><code><strong>configurable</strong></code></dt>
- <dd><code>true</code> si et seulement si le type du descripteur peut être changé et si la propriété peut être supprimée de l'objet.</dd>
- <dt><code><strong>enumerable</strong></code></dt>
- <dd><code>true</code> si et seulement si la propriété doit apparaître lors d'une énumération des propriétés de l'objet.</dd>
-</dl>
-
-<h2 id="Exemples">Exemples</h2>
-
-<pre class="brush: js">var o, d;
-
-o = { get toto() { return 17; } };
-d = Object.getOwnPropertyDescriptor(o, "toto");
-// d : {
-//       configurable: true,
-//       enumerable: true,
-//       get: /*l'accesseur*/,
-//       set: undefined
-//    }
-
-o = { truc: 42 };
-d = Object.getOwnPropertyDescriptor(o, "truc");
-// d : {
-//        configurable: true,
-//        enumerable: true,
-//        value: 42,
-//        writable: true
-//      }
-
-o = {};
-Object.defineProperty(o, "machin", {
-                                      value: 8675309,
-                                      writable: false,
-                                      enumerable: false });
-d = Object.getOwnPropertyDescriptor(o, "machin");
-// d : {
-//        value: 8675309,
-//        writable: false,
-//        enumerable: false,
-//        configurable: false
-//      }</pre>
-
-<h2 id="Notes">Notes</h2>
-
-<p>Pour ES5, si le premier argument de la méthode n'est pas un objet (mais une valeur d'un autre type), une exception {{jsxref("TypeError")}} sera levée. Pour ES2015, un argument non-objet sera d'abord converti en objet avant d'appliquer la méthode.</p>
-
-<pre class="brush: js">Object.getOwnPropertyDescriptor("toto", 0);
-// TypeError: "toto" n'est pas un objet  // code ES5
-
-// code ES2015
-Object.getOwnPropertyDescriptor("toto", 0);
-// {
-//    configurable:false,
-//    enumerable:true,
-//    value:"f",
-//    writable:false
-// }
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-15.2.3.3', 'Object.getOwnPropertyDescriptor')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td>Définition initiale.<br>
-    Implémentée avec JavaScript 1.8.5</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-object.getownpropertydescriptor', 'Object.getOwnPropertyDescriptor')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-object.getownpropertydescriptor', 'Object.getOwnPropertyDescriptor')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Object.getOwnPropertyDescriptor")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Object.defineProperty()")}}</li>
- <li>{{jsxref("Reflect.getOwnPropertyDescriptor()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/object/getownpropertydescriptor/index.md b/files/fr/web/javascript/reference/global_objects/object/getownpropertydescriptor/index.md
new file mode 100644
index 0000000000..57948e7202
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/object/getownpropertydescriptor/index.md
@@ -0,0 +1,123 @@
+---
+title: Object.getOwnPropertyDescriptor()
+slug: Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyDescriptor
+tags:
+  - ECMAScript 5
+  - JavaScript
+  - Méthode
+  - Object
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyDescriptor
+original_slug: Web/JavaScript/Reference/Objets_globaux/Object/getOwnPropertyDescriptor
+---
+{{JSRef}}
+
+La méthode **`Object.getOwnPropertyDescriptor()`** renvoie un descripteur de la propriété propre d'un objet (c'est-à-dire une propriété directement présente et pas héritée via la chaîne de prototypes).
+
+{{EmbedInteractiveExample("pages/js/object-getownpropertydescriptor.html")}}
+
+## Syntaxe
+
+    Object.getOwnPropertyDescriptor(obj, prop)
+
+### Paramètres
+
+- `obj`
+  - : L'objet sur lequel on cherche la propriété.
+- `prop`
+  - : Le nom ou le symbole ({{jsxref("Symbol")}}) de la propriété dont on souhaite avoir la description.
+
+### Valeur de retour
+
+Un descripteur de propriété de la propriété souhaitée si elle existe pour l'objet en question, sinon {{jsxref("undefined")}}.
+
+## Description
+
+Cette méthode permet d'avoir des informations précises sur une propriété. Une propriété JavaScript est un nom (qui est une chaîne de caractères) ou un symbole ({{jsxref("Symbol")}}) associé à un descripteur. Voir la page {{jsxref("Object.defineProperty")}} pour plus d'informations sur les descripteurs de propriétés.
+
+Un descripteur de propriété est un enregistrement qui dispose des attributs suivants :
+
+- **`value`**
+  - : La valeur associée à la propriété (pour les descripteurs de données uniquement).
+- **`writable`**
+  - : `true` si et seulement si la valeur associée à la propriété peut être changée (pour les descripteurs de données uniquement).
+- **`get`**
+  - : Une fonction qui joue le rôle d'accesseur (_getter_) pour la propriété ou {{jsxref("undefined")}} s'il n'y a pas d'accesseur (pour les descripteurs d'accesseurs uniquement).
+- **`set`**
+  - : Une fonction qui joue le rôle de mutateur (_setter_) pour la propriété ou `undefined` s'il n'y a pas de tel mutateur (pour les descripteurs d'accesseurs uniquement).
+- **`configurable`**
+  - : `true` si et seulement si le type du descripteur peut être changé et si la propriété peut être supprimée de l'objet.
+- **`enumerable`**
+  - : `true` si et seulement si la propriété doit apparaître lors d'une énumération des propriétés de l'objet.
+
+## Exemples
+
+```js
+var o, d;
+
+o = { get toto() { return 17; } };
+d = Object.getOwnPropertyDescriptor(o, "toto");
+// d : {
+//       configurable: true,
+//       enumerable: true,
+//       get: /*l'accesseur*/,
+//       set: undefined
+//    }
+
+o = { truc: 42 };
+d = Object.getOwnPropertyDescriptor(o, "truc");
+// d : {
+//        configurable: true,
+//        enumerable: true,
+//        value: 42,
+//        writable: true
+//      }
+
+o = {};
+Object.defineProperty(o, "machin", {
+                                      value: 8675309,
+                                      writable: false,
+                                      enumerable: false });
+d = Object.getOwnPropertyDescriptor(o, "machin");
+// d : {
+//        value: 8675309,
+//        writable: false,
+//        enumerable: false,
+//        configurable: false
+//      }
+```
+
+## Notes
+
+Pour ES5, si le premier argument de la méthode n'est pas un objet (mais une valeur d'un autre type), une exception {{jsxref("TypeError")}} sera levée. Pour ES2015, un argument non-objet sera d'abord converti en objet avant d'appliquer la méthode.
+
+```js
+Object.getOwnPropertyDescriptor("toto", 0);
+// TypeError: "toto" n'est pas un objet  // code ES5
+
+// code ES2015
+Object.getOwnPropertyDescriptor("toto", 0);
+// {
+//    configurable:false,
+//    enumerable:true,
+//    value:"f",
+//    writable:false
+// }
+```
+
+## Spécifications
+
+| Spécification                                                                                                                        | État                         | Commentaires                                           |
+| ------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------- | ------------------------------------------------------ |
+| {{SpecName('ES5.1', '#sec-15.2.3.3', 'Object.getOwnPropertyDescriptor')}}                                     | {{Spec2('ES5.1')}}     | Définition initiale. Implémentée avec JavaScript 1.8.5 |
+| {{SpecName('ES6', '#sec-object.getownpropertydescriptor', 'Object.getOwnPropertyDescriptor')}}         | {{Spec2('ES6')}}         |                                                        |
+| {{SpecName('ESDraft', '#sec-object.getownpropertydescriptor', 'Object.getOwnPropertyDescriptor')}} | {{Spec2('ESDraft')}} |                                                        |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Object.getOwnPropertyDescriptor")}}
+
+## Voir aussi
+
+- {{jsxref("Object.defineProperty()")}}
+- {{jsxref("Reflect.getOwnPropertyDescriptor()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/object/getownpropertydescriptors/index.html b/files/fr/web/javascript/reference/global_objects/object/getownpropertydescriptors/index.html
deleted file mode 100644
index 5e3b853e50..0000000000
--- a/files/fr/web/javascript/reference/global_objects/object/getownpropertydescriptors/index.html
+++ /dev/null
@@ -1,117 +0,0 @@
----
-title: Object.getOwnPropertyDescriptors()
-slug: Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyDescriptors
-tags:
-  - JavaScript
-  - Méthode
-  - Object
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyDescriptors
-original_slug: Web/JavaScript/Reference/Objets_globaux/Object/getOwnPropertyDescriptors
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <code><strong>Object.getOwnPropertyDescriptors()</strong></code> renvoie l'ensemble des descripteurs des propriétés propres d'un objet donné.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/object-getownpropertydescriptors.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">Object.getOwnPropertyDescriptors(<var>obj</var>)</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>obj</code></dt>
- <dd>L'objet dont on souhaite connaître les descripteurs des propriétés.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Un objet qui contient tous les descripteurs des propriétés propres de l'objet passé en paramètre. S'il n'y aucune propriété, cela sera un objet vide.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>Cette méthode permet d'examiner de façon précise les différentes propriétés directement rattachées à un objet. Une propriété JavaScript se définit par un nom (une chaîne de caractères) ou un symbole ({{jsxref("Symbol")}}) et un descripteur. Vous pouvez trouver de plus amples informations sur les types de descripteurs et sur leurs attributs sur la page de {{jsxref("Object.defineProperty()")}}.</p>
-
-<p>Un descripteur de propriété est un enregistrement qui possède les attributs suivants :</p>
-
-<dl>
- <dt><code>value</code></dt>
- <dd>La valeur associée à la propriété (uniquement pour les descripteurs de données).</dd>
- <dt><code><strong>writable</strong></code></dt>
- <dd><code>true</code> si et seulement si la valeur associée à la propriété peut être changée (uniquement pour les descripteurs de données).</dd>
- <dt><code>get</code></dt>
- <dd>Une fonction qui est utilisée comme accesseur pour la propriété ou {{jsxref("undefined")}} s'il n'existe pas de tel accesseur (uniquement pour les descripteurs d'accesseur/mutateur).</dd>
- <dt><code>set</code></dt>
- <dd>Une fonction qui est utilisée comme mutateur pour la propriété ou {{jsxref("undefined")}} s'il n'existe pas de tel mutateur (uniquement pour les descripteurs d'accesseur/mutateur).</dd>
- <dt><code>configurable</code></dt>
- <dd><code>true</code> si et seulement si le type de descripteur peut être changé et si la propriété peut être supprimée de l'objet correspondant.</dd>
- <dt><code>enumerable</code></dt>
- <dd><code>true</code> si et seulement si cette propriété est listée lorsqu'on énumère les propriétés de l'objet correspondant.</dd>
-</dl>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Créer_un_clone">Créer un clone</h3>
-
-<p>La méthode {{jsxref("Object.assign()")}} ne copiera que les propriétés propres et énumérables d'un objet source vers un objet cible. On peut donc utiliser cette méthode avec {{jsxref("Object.create()")}} afin de réaliser une copie « plate » entre deux objets inconnus :</p>
-
-<pre class="brush: js">Object.create(
-  Object.getPrototypeOf(obj),
-  Object.getOwnPropertyDescriptors(obj)
-);
-</pre>
-
-<h3 id="Créer_une_sous-classe">Créer une sous-classe</h3>
-
-<p>Pour créer une sous-classe, généralement, on définit la sous-classe et on définit son prototype comme étant une instance de la classe parente. Enfin on définit les propriétés de cette nouvelle sous-classe.</p>
-
-<pre class="brush: js">function superclass() {};
-superclass.prototype = {
-  // on définit les méthodes et propriétés
-  // de la classe parente
-};
-
-function subclass() {};
-subclass.prototype = Object.create(
-  superclass.prototype,
-  Object.getOwnPropertyDescriptors({
-  // on définit les méthodes et propriétés
-  // de la sous-classe
-}));
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-object.getownpropertydescriptors', 'Object.getOwnPropertyDescriptors')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2017', '#sec-object.getownpropertydescriptors', 'Object.getOwnPropertyDescriptors')}}</td>
-   <td>{{Spec2('ES2017')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Object.getOwnPropertyDescriptors")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Object.getOwnPropertyDescriptor()")}}</li>
- <li>{{jsxref("Object.defineProperty()")}}</li>
- <li><a href="https://github.com/tc39/proposal-object-getownpropertydescriptors">Prothèse d'émulation (<em>polyfill</em>)</a></li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/object/getownpropertydescriptors/index.md b/files/fr/web/javascript/reference/global_objects/object/getownpropertydescriptors/index.md
new file mode 100644
index 0000000000..c28823f966
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/object/getownpropertydescriptors/index.md
@@ -0,0 +1,98 @@
+---
+title: Object.getOwnPropertyDescriptors()
+slug: Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyDescriptors
+tags:
+  - JavaScript
+  - Méthode
+  - Object
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyDescriptors
+original_slug: Web/JavaScript/Reference/Objets_globaux/Object/getOwnPropertyDescriptors
+---
+{{JSRef}}
+
+La méthode **`Object.getOwnPropertyDescriptors()`** renvoie l'ensemble des descripteurs des propriétés propres d'un objet donné.
+
+{{EmbedInteractiveExample("pages/js/object-getownpropertydescriptors.html")}}
+
+## Syntaxe
+
+    Object.getOwnPropertyDescriptors(obj)
+
+### Paramètres
+
+- `obj`
+  - : L'objet dont on souhaite connaître les descripteurs des propriétés.
+
+### Valeur de retour
+
+Un objet qui contient tous les descripteurs des propriétés propres de l'objet passé en paramètre. S'il n'y aucune propriété, cela sera un objet vide.
+
+## Description
+
+Cette méthode permet d'examiner de façon précise les différentes propriétés directement rattachées à un objet. Une propriété JavaScript se définit par un nom (une chaîne de caractères) ou un symbole ({{jsxref("Symbol")}}) et un descripteur. Vous pouvez trouver de plus amples informations sur les types de descripteurs et sur leurs attributs sur la page de {{jsxref("Object.defineProperty()")}}.
+
+Un descripteur de propriété est un enregistrement qui possède les attributs suivants :
+
+- `value`
+  - : La valeur associée à la propriété (uniquement pour les descripteurs de données).
+- **`writable`**
+  - : `true` si et seulement si la valeur associée à la propriété peut être changée (uniquement pour les descripteurs de données).
+- `get`
+  - : Une fonction qui est utilisée comme accesseur pour la propriété ou {{jsxref("undefined")}} s'il n'existe pas de tel accesseur (uniquement pour les descripteurs d'accesseur/mutateur).
+- `set`
+  - : Une fonction qui est utilisée comme mutateur pour la propriété ou {{jsxref("undefined")}} s'il n'existe pas de tel mutateur (uniquement pour les descripteurs d'accesseur/mutateur).
+- `configurable`
+  - : `true` si et seulement si le type de descripteur peut être changé et si la propriété peut être supprimée de l'objet correspondant.
+- `enumerable`
+  - : `true` si et seulement si cette propriété est listée lorsqu'on énumère les propriétés de l'objet correspondant.
+
+## Exemples
+
+### Créer un clone
+
+La méthode {{jsxref("Object.assign()")}} ne copiera que les propriétés propres et énumérables d'un objet source vers un objet cible. On peut donc utiliser cette méthode avec {{jsxref("Object.create()")}} afin de réaliser une copie « plate » entre deux objets inconnus :
+
+```js
+Object.create(
+  Object.getPrototypeOf(obj),
+  Object.getOwnPropertyDescriptors(obj)
+);
+```
+
+### Créer une sous-classe
+
+Pour créer une sous-classe, généralement, on définit la sous-classe et on définit son prototype comme étant une instance de la classe parente. Enfin on définit les propriétés de cette nouvelle sous-classe.
+
+```js
+function superclass() {};
+superclass.prototype = {
+  // on définit les méthodes et propriétés
+  // de la classe parente
+};
+
+function subclass() {};
+subclass.prototype = Object.create(
+  superclass.prototype,
+  Object.getOwnPropertyDescriptors({
+  // on définit les méthodes et propriétés
+  // de la sous-classe
+}));
+```
+
+## Spécifications
+
+| Spécification                                                                                                                        | État                         | Commentaires         |
+| ------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------- | -------------------- |
+| {{SpecName('ESDraft', '#sec-object.getownpropertydescriptors', 'Object.getOwnPropertyDescriptors')}} | {{Spec2('ESDraft')}} |                      |
+| {{SpecName('ES2017', '#sec-object.getownpropertydescriptors', 'Object.getOwnPropertyDescriptors')}} | {{Spec2('ES2017')}}     | Définition initiale. |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Object.getOwnPropertyDescriptors")}}
+
+## Voir aussi
+
+- {{jsxref("Object.getOwnPropertyDescriptor()")}}
+- {{jsxref("Object.defineProperty()")}}
+- [Prothèse d'émulation (_polyfill_)](https://github.com/tc39/proposal-object-getownpropertydescriptors)
diff --git a/files/fr/web/javascript/reference/global_objects/object/getownpropertynames/index.html b/files/fr/web/javascript/reference/global_objects/object/getownpropertynames/index.html
deleted file mode 100644
index 88f96ed522..0000000000
--- a/files/fr/web/javascript/reference/global_objects/object/getownpropertynames/index.html
+++ /dev/null
@@ -1,177 +0,0 @@
----
-title: Object.getOwnPropertyNames()
-slug: Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyNames
-tags:
-  - ECMAScript 5
-  - JavaScript
-  - JavaScript 1.8.5
-  - Méthode
-  - Object
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyNames
-original_slug: Web/JavaScript/Reference/Objets_globaux/Object/getOwnPropertyNames
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <code><strong>Object.getOwnPropertyNames()</strong></code> renvoie un tableau de toutes les propriétés (qu'elles soient énumérables ou non, tant qu'elles ne sont pas désignées par un <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Symbol">symbole</a>) propres à un objet (c'est-à-dire n'étant pas héritées via la chaîne de prototypes).</p>
-
-<div>{{EmbedInteractiveExample("pages/js/object-getownpropertynames.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">Object.getOwnPropertyNames(<var>obj</var>)</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>obj</code></dt>
- <dd>L'objet dont seront listées les propriétés propres énumérables <em>et non-énumérables</em>.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Un tableau de chaînes de caractères qui sont les noms des propriétés propres (celles directement rattachées à l'objet) de l'objet passé en argument.</p>
-
-<h2 id="Description">Description</h2>
-
-<p><code>Object.getOwnPropertyNames</code> renvoie un tableau dont les éléments sont des chaînes de caractères correspondant aux noms des propriétés énumerables <em>et non-énumerables</em> appartenant directement à l'objet <code>obj</code>. L'ordre des propriétés énumérables est cohérent avec l'ordre utilisé dans une boucle {{jsxref("Instructions/for...in","for...in")}} (ou avec {{jsxref("Object.keys")}}) parmi les propriétés de l'objet. L'ordre des propriétés non-énumérables dans le tableau et parmi les propriétés énumérables n'est pas défini.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Utiliser_Object.getOwnPropertyNames()">Utiliser <code>Object.getOwnPropertyNames()</code></h3>
-
-<pre class="brush: js">var arr = ["a", "b", "c"];
-console.log(Object.getOwnPropertyNames(arr).sort());
-// ["0", "1", "2", "length"]
-
-// Objet semblable à un tableau (array-like)
-var obj = { 0: "a", 1: "b", 2: "c"};
-console.log(Object.getOwnPropertyNames(obj).sort());
-// ["0", "1", "2"]
-
-
-// On affiche les noms et les valeurs
-// des propriétés avec Array.forEach
-Object.getOwnPropertyNames(obj).forEach(
-  function(val, idx, array) {
-    console.log(val + " -&gt; " + obj[val]);
-});
-// affiche
-// 0 -&gt; a
-// 1 -&gt; b
-// 2 -&gt; c
-
-// propriété non-énumérable
-var mon_obj = Object.create({}, {
-  getToto: {
-    value: function() { return this.toto; },
-    enumerable: false
-  }
-});
-mon_obj.toto = 1;
-
-console.log(Object.getOwnPropertyNames(mon_obj).sort());
-// ["toto", "getToto"]
-</pre>
-
-<p>Si on souhaite n'avoir que les propriétés énumérables, on peut utiliser {{jsxref("Object.keys")}} ou bien une boucle {{jsxref("Instructions/for...in","for...in")}} (cette méthode renverra également les propriétés héritées via la chaîne de prototypes si on ne filtre pas avec la méthode {{jsxref("Object.prototype.hasOwnProperty()", "hasOwnProperty()")}}).</p>
-
-<p>Les propriétés héritées via la chaîne de prototype ne sont pas listées :</p>
-
-<pre class="brush: js">function ClasseParente() {}
-ClasseParente.prototype.inheritedMethod = function () {};
-
-function ClasseFille () {
-  this.prop = 5;
-  this.method = function () {};
-}
-ClasseFille.prototype = new ClasseParente();
-ClasseFille.prototype.prototypeMethod = function () {};
-
-console.log(
-  Object.getOwnPropertyNames(
-    new ClasseFille() // ["prop", "method"]
-  )
-)
-</pre>
-
-<h3 id="Obtenir_uniquement_les_propriétés_non-énumérables">Obtenir uniquement les propriétés non-énumérables</h3>
-
-<p>On utilise ici la fonction {{jsxref("Array.prototype.filter()")}} pour retirer les clés énumérables (obtenus avec {{jsxref("Object.keys()")}}) de la liste de toutes les clés (obtenues avec <code>Object.getOwnPropertynames</code>) afin de n'avoir que les propriétés propres non-énumérables.</p>
-
-<pre class="brush: js">var target = myObject;
-var enum_et_nonenum = Object.getOwnPropertyNames(target);
-var enum_uniquement = Object.keys(target);
-var nonenum_uniquement = enum_et_nonenum.filter(function(key) {
-  var indexInEnum = enum_uniquement.indexOf(key)
-  if (indexInEnum == -1) {
-    // non trouvée dans enum_uniquement indique
-    // que la clé est non-énumérable, on la
-    // garde donc dans le filtre avec true
-    return true;
-  } else {
-    return false;
-  }
-});
-
-console.log(nonenum_uniquement);
-</pre>
-
-<h2 id="Notes">Notes</h2>
-
-<p>Pour ES5, si l'argument passé à la méthode n'est pas un objet (mais une valeur d'un autre type primitif), une exception {{jsxref("TypeError")}} sera levée. Pour ES2015, un argument qui n'est pas un objet sera d'abord transformé en objet avant que la méthode soit appliquée.</p>
-
-<pre class="brush: js">Object.getOwnPropertyNames('toto')
-TypeError: "toto" n'est pas un objet // code ES5
-
-Object.getOwnPropertyNames('toto')
-['length', '0', '1', '2']         // code ES2015</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-15.2.3.4', 'Object.getOwnPropertyNames')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td>Définition initiale.<br>
-    Implémentée avec JavaScript 1.8.5</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-object.getownpropertynames', 'Object.getOwnPropertyNames')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-object.getownpropertynames', 'Object.getOwnPropertyNames')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Object.getOwnPropertyNames")}}</p>
-
-<h2 id="Notes_spécifiques_à_Firefox">Notes spécifiques à Firefox</h2>
-
-<p>Pour les versions antérieures à Firefox 28 {{geckoRelease("28")}}, <code>Object.getOwnPropertyNames</code> ne listait pas les propriétés non-résolues des objets {{jsxref("Error")}}. Cela a été résolu dans les versions suivantes ({{bug("724768")}}).</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/JavaScript/Caract%C3%A8re_%C3%A9num%C3%A9rable_des_propri%C3%A9t%C3%A9s_et_rattachement">Énumérabilité et possession des propriétés</a></li>
- <li>{{jsxref("Object.prototype.hasOwnProperty()")}}</li>
- <li>{{jsxref("Object.prototype.propertyIsEnumerable()")}}</li>
- <li>{{jsxref("Object.create()")}}</li>
- <li>{{jsxref("Object.keys()")}}</li>
- <li>{{jsxref("Array.forEach()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/object/getownpropertynames/index.md b/files/fr/web/javascript/reference/global_objects/object/getownpropertynames/index.md
new file mode 100644
index 0000000000..6bfbc91edb
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/object/getownpropertynames/index.md
@@ -0,0 +1,156 @@
+---
+title: Object.getOwnPropertyNames()
+slug: Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyNames
+tags:
+  - ECMAScript 5
+  - JavaScript
+  - JavaScript 1.8.5
+  - Méthode
+  - Object
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyNames
+original_slug: Web/JavaScript/Reference/Objets_globaux/Object/getOwnPropertyNames
+---
+{{JSRef}}
+
+La méthode **`Object.getOwnPropertyNames()`** renvoie un tableau de toutes les propriétés (qu'elles soient énumérables ou non, tant qu'elles ne sont pas désignées par un [symbole](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Symbol)) propres à un objet (c'est-à-dire n'étant pas héritées via la chaîne de prototypes).
+
+{{EmbedInteractiveExample("pages/js/object-getownpropertynames.html")}}
+
+## Syntaxe
+
+    Object.getOwnPropertyNames(obj)
+
+### Paramètres
+
+- `obj`
+  - : L'objet dont seront listées les propriétés propres énumérables _et non-énumérables_.
+
+### Valeur de retour
+
+Un tableau de chaînes de caractères qui sont les noms des propriétés propres (celles directement rattachées à l'objet) de l'objet passé en argument.
+
+## Description
+
+`Object.getOwnPropertyNames` renvoie un tableau dont les éléments sont des chaînes de caractères correspondant aux noms des propriétés énumerables _et non-énumerables_ appartenant directement à l'objet `obj`. L'ordre des propriétés énumérables est cohérent avec l'ordre utilisé dans une boucle {{jsxref("Instructions/for...in","for...in")}} (ou avec {{jsxref("Object.keys")}}) parmi les propriétés de l'objet. L'ordre des propriétés non-énumérables dans le tableau et parmi les propriétés énumérables n'est pas défini.
+
+## Exemples
+
+### Utiliser `Object.getOwnPropertyNames()`
+
+```js
+var arr = ["a", "b", "c"];
+console.log(Object.getOwnPropertyNames(arr).sort());
+// ["0", "1", "2", "length"]
+
+// Objet semblable à un tableau (array-like)
+var obj = { 0: "a", 1: "b", 2: "c"};
+console.log(Object.getOwnPropertyNames(obj).sort());
+// ["0", "1", "2"]
+
+
+// On affiche les noms et les valeurs
+// des propriétés avec Array.forEach
+Object.getOwnPropertyNames(obj).forEach(
+  function(val, idx, array) {
+    console.log(val + " -> " + obj[val]);
+});
+// affiche
+// 0 -> a
+// 1 -> b
+// 2 -> c
+
+// propriété non-énumérable
+var mon_obj = Object.create({}, {
+  getToto: {
+    value: function() { return this.toto; },
+    enumerable: false
+  }
+});
+mon_obj.toto = 1;
+
+console.log(Object.getOwnPropertyNames(mon_obj).sort());
+// ["toto", "getToto"]
+```
+
+Si on souhaite n'avoir que les propriétés énumérables, on peut utiliser {{jsxref("Object.keys")}} ou bien une boucle {{jsxref("Instructions/for...in","for...in")}} (cette méthode renverra également les propriétés héritées via la chaîne de prototypes si on ne filtre pas avec la méthode {{jsxref("Object.prototype.hasOwnProperty()", "hasOwnProperty()")}}).
+
+Les propriétés héritées via la chaîne de prototype ne sont pas listées :
+
+```js
+function ClasseParente() {}
+ClasseParente.prototype.inheritedMethod = function () {};
+
+function ClasseFille () {
+  this.prop = 5;
+  this.method = function () {};
+}
+ClasseFille.prototype = new ClasseParente();
+ClasseFille.prototype.prototypeMethod = function () {};
+
+console.log(
+  Object.getOwnPropertyNames(
+    new ClasseFille() // ["prop", "method"]
+  )
+)
+```
+
+### Obtenir uniquement les propriétés non-énumérables
+
+On utilise ici la fonction {{jsxref("Array.prototype.filter()")}} pour retirer les clés énumérables (obtenus avec {{jsxref("Object.keys()")}}) de la liste de toutes les clés (obtenues avec `Object.getOwnPropertynames`) afin de n'avoir que les propriétés propres non-énumérables.
+
+```js
+var target = myObject;
+var enum_et_nonenum = Object.getOwnPropertyNames(target);
+var enum_uniquement = Object.keys(target);
+var nonenum_uniquement = enum_et_nonenum.filter(function(key) {
+  var indexInEnum = enum_uniquement.indexOf(key)
+  if (indexInEnum == -1) {
+    // non trouvée dans enum_uniquement indique
+    // que la clé est non-énumérable, on la
+    // garde donc dans le filtre avec true
+    return true;
+  } else {
+    return false;
+  }
+});
+
+console.log(nonenum_uniquement);
+```
+
+## Notes
+
+Pour ES5, si l'argument passé à la méthode n'est pas un objet (mais une valeur d'un autre type primitif), une exception {{jsxref("TypeError")}} sera levée. Pour ES2015, un argument qui n'est pas un objet sera d'abord transformé en objet avant que la méthode soit appliquée.
+
+```js
+Object.getOwnPropertyNames('toto')
+TypeError: "toto" n'est pas un objet // code ES5
+
+Object.getOwnPropertyNames('toto')
+['length', '0', '1', '2']         // code ES2015
+```
+
+## Spécifications
+
+| Spécification                                                                                                        | État                         | Commentaires                                           |
+| -------------------------------------------------------------------------------------------------------------------- | ---------------------------- | ------------------------------------------------------ |
+| {{SpecName('ES5.1', '#sec-15.2.3.4', 'Object.getOwnPropertyNames')}}                         | {{Spec2('ES5.1')}}     | Définition initiale. Implémentée avec JavaScript 1.8.5 |
+| {{SpecName('ES6', '#sec-object.getownpropertynames', 'Object.getOwnPropertyNames')}}     | {{Spec2('ES6')}}         |                                                        |
+| {{SpecName('ESDraft', '#sec-object.getownpropertynames', 'Object.getOwnPropertyNames')}} | {{Spec2('ESDraft')}} |                                                        |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Object.getOwnPropertyNames")}}
+
+## Notes spécifiques à Firefox
+
+Pour les versions antérieures à Firefox 28 {{geckoRelease("28")}}, `Object.getOwnPropertyNames` ne listait pas les propriétés non-résolues des objets {{jsxref("Error")}}. Cela a été résolu dans les versions suivantes ({{bug("724768")}}).
+
+## Voir aussi
+
+- [Énumérabilité et possession des propriétés](/fr/docs/Web/JavaScript/Caract%C3%A8re_%C3%A9num%C3%A9rable_des_propri%C3%A9t%C3%A9s_et_rattachement)
+- {{jsxref("Object.prototype.hasOwnProperty()")}}
+- {{jsxref("Object.prototype.propertyIsEnumerable()")}}
+- {{jsxref("Object.create()")}}
+- {{jsxref("Object.keys()")}}
+- {{jsxref("Array.forEach()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/object/getownpropertysymbols/index.html b/files/fr/web/javascript/reference/global_objects/object/getownpropertysymbols/index.html
deleted file mode 100644
index 965712b26d..0000000000
--- a/files/fr/web/javascript/reference/global_objects/object/getownpropertysymbols/index.html
+++ /dev/null
@@ -1,87 +0,0 @@
----
-title: Object.getOwnPropertySymbols()
-slug: Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertySymbols
-tags:
-  - ECMAScript 2015
-  - JavaScript
-  - Méthode
-  - Object
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertySymbols
-original_slug: Web/JavaScript/Reference/Objets_globaux/Object/getOwnPropertySymbols
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <code><strong>Object.getOwnPropertySymbols()</strong></code> renvoie un tableau contenant tous les symboles des propriétés trouvées directement sur un objet donné.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/object-getownpropertysymbols.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">Object.getOwnPropertySymbols(<var>obj</var>)</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>obj</code></dt>
- <dd>L'objet dont on souhaite lister les symboles des propriétés propres.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Un tableau des symboles trouvés directement sur l'objet passé en argument.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>De la même façon que {{jsxref("Object.getOwnPropertyNames()")}}, il est possible d'avoir la liste des symboles des propriétés d'un objet donné sous forme d'un tableau. La méthode {{jsxref("Object.getOwnPropertyNames()")}} ne contiendra uniquement que les propriétés « nommées » d'un objet et non pas les propriétés uniquement accessibles via un symbole.</p>
-
-<p>Par défaut, aucun objet ne possède de propriété accessible via un symbole à l'état initial. Ainsi, <code>Object.getOwnPropertySymbols()</code> renvoie un tableau vide sauf si des propriétés nommées avec des symboles ont été définies pour l'objet.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<pre class="brush: js">var obj = {};
-var a = Symbol("a");
-var b = Symbol.for("b");
-
-obj[a] = "symboleLocal";
-obj[b] = "symboleGlobal";
-
-var objectSymboles = Object.getOwnPropertySymbols(obj);
-
-console.log(objectSymboles.length); // 2
-console.log(objectSymboles)         // [Symbol(a), Symbol(b)]
-console.log(objectSymboles[0])      // Symbol(a)
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-object.getownpropertysymbols', 'Object.getOwnPropertySymbols')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-object.getownpropertysymbols', 'Object.getOwnPropertySymbols')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Object.getOwnPropertySymbols")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Object.getOwnPropertyNames()")}}</li>
- <li>{{jsxref("Symbol")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/object/getownpropertysymbols/index.md b/files/fr/web/javascript/reference/global_objects/object/getownpropertysymbols/index.md
new file mode 100644
index 0000000000..40d7d6558f
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/object/getownpropertysymbols/index.md
@@ -0,0 +1,69 @@
+---
+title: Object.getOwnPropertySymbols()
+slug: Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertySymbols
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Méthode
+  - Object
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertySymbols
+original_slug: Web/JavaScript/Reference/Objets_globaux/Object/getOwnPropertySymbols
+---
+{{JSRef}}
+
+La méthode **`Object.getOwnPropertySymbols()`** renvoie un tableau contenant tous les symboles des propriétés trouvées directement sur un objet donné.
+
+{{EmbedInteractiveExample("pages/js/object-getownpropertysymbols.html")}}
+
+## Syntaxe
+
+    Object.getOwnPropertySymbols(obj)
+
+### Paramètres
+
+- `obj`
+  - : L'objet dont on souhaite lister les symboles des propriétés propres.
+
+### Valeur de retour
+
+Un tableau des symboles trouvés directement sur l'objet passé en argument.
+
+## Description
+
+De la même façon que {{jsxref("Object.getOwnPropertyNames()")}}, il est possible d'avoir la liste des symboles des propriétés d'un objet donné sous forme d'un tableau. La méthode {{jsxref("Object.getOwnPropertyNames()")}} ne contiendra uniquement que les propriétés « nommées » d'un objet et non pas les propriétés uniquement accessibles via un symbole.
+
+Par défaut, aucun objet ne possède de propriété accessible via un symbole à l'état initial. Ainsi, `Object.getOwnPropertySymbols()` renvoie un tableau vide sauf si des propriétés nommées avec des symboles ont été définies pour l'objet.
+
+## Exemples
+
+```js
+var obj = {};
+var a = Symbol("a");
+var b = Symbol.for("b");
+
+obj[a] = "symboleLocal";
+obj[b] = "symboleGlobal";
+
+var objectSymboles = Object.getOwnPropertySymbols(obj);
+
+console.log(objectSymboles.length); // 2
+console.log(objectSymboles)         // [Symbol(a), Symbol(b)]
+console.log(objectSymboles[0])      // Symbol(a)
+```
+
+## Spécifications
+
+| Spécification                                                                                                                | État                         | Commentaires         |
+| ---------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName('ES2015', '#sec-object.getownpropertysymbols', 'Object.getOwnPropertySymbols')}}     | {{Spec2('ES2015')}}     | Définition initiale. |
+| {{SpecName('ESDraft', '#sec-object.getownpropertysymbols', 'Object.getOwnPropertySymbols')}} | {{Spec2('ESDraft')}} |                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Object.getOwnPropertySymbols")}}
+
+## Voir aussi
+
+- {{jsxref("Object.getOwnPropertyNames()")}}
+- {{jsxref("Symbol")}}
diff --git a/files/fr/web/javascript/reference/global_objects/object/getprototypeof/index.html b/files/fr/web/javascript/reference/global_objects/object/getprototypeof/index.html
deleted file mode 100644
index 59e9a065ed..0000000000
--- a/files/fr/web/javascript/reference/global_objects/object/getprototypeof/index.html
+++ /dev/null
@@ -1,96 +0,0 @@
----
-title: Object.getPrototypeOf()
-slug: Web/JavaScript/Reference/Global_Objects/Object/getPrototypeOf
-tags:
-  - ECMAScript5
-  - JavaScript
-  - Méthode
-  - Object
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Object/getPrototypeOf
-original_slug: Web/JavaScript/Reference/Objets_globaux/Object/getPrototypeOf
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <code><strong>Object.getPrototypeOf()</strong></code> renvoie le prototype d'un objet donné (i.e. la valeur de la propriété <code>[[Prototype]]</code> interne).</p>
-
-<div>{{EmbedInteractiveExample("pages/js/object-getprototypeof.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">Object.getPrototypeOf(<var>obj</var>)</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code><var>obj</var></code></dt>
- <dd>L'objet dont on souhaite obtenir le prototype.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Le prototype de l'objet passé en argument. Si aucune propriété n'est héritée, c'est la valeur {{jsxref("null")}} qui est renvoyée.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<pre class="brush: js">var proto = {};
-var obj = Object.create(proto);
-Object.getPrototypeOf(obj) === proto; // true
-</pre>
-
-<h2 id="Notes">Notes</h2>
-
-<p>Pour ES5, la méthode renvoie une exception {{jsxref("TypeError")}} si le paramètre <code>obj</code> n'est pas un objet. Pour ES2015, le paramètre sera converti en un objet avant l'application de la méthode.</p>
-
-<pre class="brush: js">Object.getPrototypeOf("toto");
-// TypeError: "toto" n'est pas un objet (code ES5)
-Object.getPrototypeOf("toto");
-// String.prototype                     (code ES2015)
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-15.2.3.2', 'Object.getPrototypeOf')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td>Définition initiale</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-object.getprototypeof', 'Object.getPrototypeOf')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-object.getprototypeof', 'Object.getPrototypeOf')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Object.getPrototypeOf")}}</p>
-
-<h2 id="Notes_relatives_à_Opera">Notes relatives à Opera</h2>
-
-<p>Bien que les anciennes versions d'Opera ne supportent pas <code>Object.getPrototypeOf()</code>, Opera supporte la propriété non-standard {{jsxref("Object.proto", "__proto__")}} depuis Opera 10.50.</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Object.prototype.isPrototypeOf()")}}</li>
- <li>{{jsxref("Object.setPrototypeOf()")}}</li>
- <li>{{jsxref("Object.prototype.proto","Object.prototype.__proto__")}}</li>
- <li>Le billet de John Resig sur <a class="external" href="http://ejohn.org/blog/objectgetprototypeof/">getPrototypeOf</a> (en anglais)</li>
- <li>{{jsxref("Reflect.getPrototypeOf()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/object/getprototypeof/index.md b/files/fr/web/javascript/reference/global_objects/object/getprototypeof/index.md
new file mode 100644
index 0000000000..595b3118e6
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/object/getprototypeof/index.md
@@ -0,0 +1,73 @@
+---
+title: Object.getPrototypeOf()
+slug: Web/JavaScript/Reference/Global_Objects/Object/getPrototypeOf
+tags:
+  - ECMAScript5
+  - JavaScript
+  - Méthode
+  - Object
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/getPrototypeOf
+original_slug: Web/JavaScript/Reference/Objets_globaux/Object/getPrototypeOf
+---
+{{JSRef}}
+
+La méthode **`Object.getPrototypeOf()`** renvoie le prototype d'un objet donné (i.e. la valeur de la propriété `[[Prototype]]` interne).
+
+{{EmbedInteractiveExample("pages/js/object-getprototypeof.html")}}
+
+## Syntaxe
+
+    Object.getPrototypeOf(obj)
+
+### Paramètres
+
+- `obj`
+  - : L'objet dont on souhaite obtenir le prototype.
+
+### Valeur de retour
+
+Le prototype de l'objet passé en argument. Si aucune propriété n'est héritée, c'est la valeur {{jsxref("null")}} qui est renvoyée.
+
+## Exemples
+
+```js
+var proto = {};
+var obj = Object.create(proto);
+Object.getPrototypeOf(obj) === proto; // true
+```
+
+## Notes
+
+Pour ES5, la méthode renvoie une exception {{jsxref("TypeError")}} si le paramètre `obj` n'est pas un objet. Pour ES2015, le paramètre sera converti en un objet avant l'application de la méthode.
+
+```js
+Object.getPrototypeOf("toto");
+// TypeError: "toto" n'est pas un objet (code ES5)
+Object.getPrototypeOf("toto");
+// String.prototype                     (code ES2015)
+```
+
+## Spécifications
+
+| Spécification                                                                                            | État                         | Commentaires        |
+| -------------------------------------------------------------------------------------------------------- | ---------------------------- | ------------------- |
+| {{SpecName('ES5.1', '#sec-15.2.3.2', 'Object.getPrototypeOf')}}                     | {{Spec2('ES5.1')}}     | Définition initiale |
+| {{SpecName('ES6', '#sec-object.getprototypeof', 'Object.getPrototypeOf')}}     | {{Spec2('ES6')}}         |                     |
+| {{SpecName('ESDraft', '#sec-object.getprototypeof', 'Object.getPrototypeOf')}} | {{Spec2('ESDraft')}} |                     |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Object.getPrototypeOf")}}
+
+## Notes relatives à Opera
+
+Bien que les anciennes versions d'Opera ne supportent pas `Object.getPrototypeOf()`, Opera supporte la propriété non-standard {{jsxref("Object.proto", "__proto__")}} depuis Opera 10.50.
+
+## Voir aussi
+
+- {{jsxref("Object.prototype.isPrototypeOf()")}}
+- {{jsxref("Object.setPrototypeOf()")}}
+- {{jsxref("Object.prototype.proto","Object.prototype.__proto__")}}
+- Le billet de John Resig sur [getPrototypeOf](http://ejohn.org/blog/objectgetprototypeof/) (en anglais)
+- {{jsxref("Reflect.getPrototypeOf()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/object/hasownproperty/index.html b/files/fr/web/javascript/reference/global_objects/object/hasownproperty/index.html
deleted file mode 100644
index f7fa173baa..0000000000
--- a/files/fr/web/javascript/reference/global_objects/object/hasownproperty/index.html
+++ /dev/null
@@ -1,155 +0,0 @@
----
-title: Object.prototype.hasOwnProperty()
-slug: Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty
-tags:
-  - JavaScript
-  - Méthode
-  - Object
-  - Prototype
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty
-original_slug: Web/JavaScript/Reference/Objets_globaux/Object/hasOwnProperty
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <code><strong>hasOwnProperty()</strong></code> retourne un booléen indiquant si l'objet possède la propriété spécifiée "en propre", sans que celle-ci provienne de la chaîne de prototypes de l'objet.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/object-prototype-hasownproperty.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>obj</var>.hasOwnProperty(<var>prop</var>)</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>prop</code></dt>
- <dd>Le nom ({{jsxref("String")}}) ou le symbole ({{jsxref("Symbol")}}) de la propriété à tester.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Un booléen qui indique si l'objet possède ou non la propriété indiquée en argument et que celle-ci est directement rattachée à l'objet (elle ne provient pas de la chaîne de prototypes de l'objet). <code>hasOwnProperty()</code> renvoie <code>true</code> si la propriété existe et que sa valeur est {{jsxref("null")}} ou {{jsxref("undefined")}}.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>Chaque objet descendant d'{{jsxref("Object")}} hérite de la méthode <code>hasOwnProperty()</code>. Cette méthode peut être utilisée pour déterminer si un objet a la propriété spécifiée en tant que propriété directe de cet objet. Contrairement à l'opérateur {{jsxref("Opérateurs/L_opérateur_in", "in")}}, cette méthode ne vérifie pas la chaîne des prototypes de l'objet. Si l'objet est un tableau ({{jsxref("Array")}}), la méthode <code>hasOwnProperty()</code> pourra être utilisée afin de vérifier la présence d'un index.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Utiliser_hasOwnProperty()_pour_tester_l'existence_d'une_propriété">Utiliser <code>hasOwnProperty()</code> pour tester l'existence d'une propriété</h3>
-
-<p>L'exemple suivant détermine si l'objet <code>o</code> contient une propriété appelée <code>prop</code>:</p>
-
-<pre class="brush: js">o = new Object();
-o.hasOwnProperty('prop'); // false
-o.prop = 'exists';
-o.hasOwnProperty('prop'); // true</pre>
-
-<h3 id="Propriétés_directes_et_propriétés_héritées">Propriétés directes et propriétés héritées</h3>
-
-<p>L'exemple suivant illustre la différence entre les propriétés directes et les propriétés héritées à partir de la chaîne de prototypes :</p>
-
-<pre class="brush: js">o = new Object();
-o.prop = 'exists';
-
-o.hasOwnProperty('prop');
-// retourne true
-
-o.hasOwnProperty('toString');
-// retourne false
-
-o.hasOwnProperty('hasOwnProperty');
-// retourne false</pre>
-
-<h3 id="Parcourir_les_propriétés_d'un_objet">Parcourir les propriétés d'un objet</h3>
-
-<p>L'exemple suivant montre comment parcourir les propriétés d'un objet sans traiter les propriétés héritées. On notera que la boucle  {{jsxref("Instructions/for...in", "for...in")}} ne prend en compte que les éléments énumérables. Il ne faut donc pas déduire de l'absence de propriétés non-énumérables dans la boucle, que <code>hasOwnProperty()</code> est elle-même strictement restreinte aux éléments énumérables (comme c'est le cas pour {{jsxref("Object.getOwnPropertyNames()")}}) .</p>
-
-<pre class="brush: js">var bidule = {
-    truc: 'stack'
-};
-
-for (var nom in bidule) {
-    if (bidule.hasOwnProperty(nom)) {
-        console.log("C'est bien la propriété (" +
-                     nom +
-                     "), sa valeur : " + bidule[nom]
-                    );
-    }
-    else {
-        console.log(nom);
-        // toString ou autre
-    }
-}</pre>
-
-<h3 id="hasOwnProperty()_en_tant_que_propriété"><code>hasOwnProperty()</code> en tant que propriété</h3>
-
-<p>JavaScript ne protège pas le nom de propriété <code>hasOwnProperty</code>, ainsi il est possible qu'un objet puisse avoir une propriété avec ce nom, il sera donc nécessaire d'utiliser une version externe de la méthode pour obtenir des résultats corrects.</p>
-
-<pre class="brush: js">var toto = {
-  hasOwnProperty: function() {
-    return false;
-  },
-  truc: 'Voici les dragons'
-};
-
-toto.hasOwnProperty('truc'); // renvoie toujours false
-
-// On utilise une méthode d'un autre objet
-// et on l'appelle avec this qui vaut toto
-({}).hasOwnProperty.call(toto, 'truc'); // true
-
-// On peut aussi utiliser la propriété hasOwnProperty de Object prototype
-Object.prototype.hasOwnProperty.call(toto, 'truc'); // true
-</pre>
-
-<p>La dernière version utilisée permet de ne pas créer d'objet supplémentaire.</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('ES3')}}</td>
-   <td>{{Spec2('ES3')}}</td>
-   <td>Définition initiale. Implémentée avec JavaScript 1.5.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-15.2.4.5', 'Object.prototype.hasOwnProperty')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-object.prototype.hasownproperty', 'Object.prototype.hasOwnProperty')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-object.prototype.hasownproperty', 'Object.prototype.hasOwnProperty')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Object.hasOwnProperty")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/JavaScript/Caractère_énumérable_des_propriétés_et_rattachement">Caractère énumérable et rattachement des propriétés</a></li>
- <li>{{jsxref("Object.getOwnPropertyNames()")}}</li>
- <li>{{jsxref("Instructions/for...in", "for...in")}}</li>
- <li>{{jsxref("Opérateurs/L_opérateur_in", "in")}}</li>
- <li><a href="/fr/docs/Web/JavaScript/Guide/Retours_sur_héritage">Guide JavaScript : Retours sur l'héritage</a></li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/object/hasownproperty/index.md b/files/fr/web/javascript/reference/global_objects/object/hasownproperty/index.md
new file mode 100644
index 0000000000..70feab462e
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/object/hasownproperty/index.md
@@ -0,0 +1,133 @@
+---
+title: Object.prototype.hasOwnProperty()
+slug: Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty
+tags:
+  - JavaScript
+  - Méthode
+  - Object
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty
+original_slug: Web/JavaScript/Reference/Objets_globaux/Object/hasOwnProperty
+---
+{{JSRef}}
+
+La méthode **`hasOwnProperty()`** retourne un booléen indiquant si l'objet possède la propriété spécifiée "en propre", sans que celle-ci provienne de la chaîne de prototypes de l'objet.
+
+{{EmbedInteractiveExample("pages/js/object-prototype-hasownproperty.html")}}
+
+## Syntaxe
+
+    obj.hasOwnProperty(prop)
+
+### Paramètres
+
+- `prop`
+  - : Le nom ({{jsxref("String")}}) ou le symbole ({{jsxref("Symbol")}}) de la propriété à tester.
+
+### Valeur de retour
+
+Un booléen qui indique si l'objet possède ou non la propriété indiquée en argument et que celle-ci est directement rattachée à l'objet (elle ne provient pas de la chaîne de prototypes de l'objet). `hasOwnProperty()` renvoie `true` si la propriété existe et que sa valeur est {{jsxref("null")}} ou {{jsxref("undefined")}}.
+
+## Description
+
+Chaque objet descendant d'{{jsxref("Object")}} hérite de la méthode `hasOwnProperty()`. Cette méthode peut être utilisée pour déterminer si un objet a la propriété spécifiée en tant que propriété directe de cet objet. Contrairement à l'opérateur {{jsxref("Opérateurs/L_opérateur_in", "in")}}, cette méthode ne vérifie pas la chaîne des prototypes de l'objet. Si l'objet est un tableau ({{jsxref("Array")}}), la méthode `hasOwnProperty()` pourra être utilisée afin de vérifier la présence d'un index.
+
+## Exemples
+
+### Utiliser `hasOwnProperty()` pour tester l'existence d'une propriété
+
+L'exemple suivant détermine si l'objet `o` contient une propriété appelée `prop`:
+
+```js
+o = new Object();
+o.hasOwnProperty('prop'); // false
+o.prop = 'exists';
+o.hasOwnProperty('prop'); // true
+```
+
+### Propriétés directes et propriétés héritées
+
+L'exemple suivant illustre la différence entre les propriétés directes et les propriétés héritées à partir de la chaîne de prototypes :
+
+```js
+o = new Object();
+o.prop = 'exists';
+
+o.hasOwnProperty('prop');
+// retourne true
+
+o.hasOwnProperty('toString');
+// retourne false
+
+o.hasOwnProperty('hasOwnProperty');
+// retourne false
+```
+
+### Parcourir les propriétés d'un objet
+
+L'exemple suivant montre comment parcourir les propriétés d'un objet sans traiter les propriétés héritées. On notera que la boucle  {{jsxref("Instructions/for...in", "for...in")}} ne prend en compte que les éléments énumérables. Il ne faut donc pas déduire de l'absence de propriétés non-énumérables dans la boucle, que `hasOwnProperty()` est elle-même strictement restreinte aux éléments énumérables (comme c'est le cas pour {{jsxref("Object.getOwnPropertyNames()")}}) .
+
+```js
+var bidule = {
+    truc: 'stack'
+};
+
+for (var nom in bidule) {
+    if (bidule.hasOwnProperty(nom)) {
+        console.log("C'est bien la propriété (" +
+                     nom +
+                     "), sa valeur : " + bidule[nom]
+                    );
+    }
+    else {
+        console.log(nom);
+        // toString ou autre
+    }
+}
+```
+
+### `hasOwnProperty()` en tant que propriété
+
+JavaScript ne protège pas le nom de propriété `hasOwnProperty`, ainsi il est possible qu'un objet puisse avoir une propriété avec ce nom, il sera donc nécessaire d'utiliser une version externe de la méthode pour obtenir des résultats corrects.
+
+```js
+var toto = {
+  hasOwnProperty: function() {
+    return false;
+  },
+  truc: 'Voici les dragons'
+};
+
+toto.hasOwnProperty('truc'); // renvoie toujours false
+
+// On utilise une méthode d'un autre objet
+// et on l'appelle avec this qui vaut toto
+({}).hasOwnProperty.call(toto, 'truc'); // true
+
+// On peut aussi utiliser la propriété hasOwnProperty de Object prototype
+Object.prototype.hasOwnProperty.call(toto, 'truc'); // true
+```
+
+La dernière version utilisée permet de ne pas créer d'objet supplémentaire.
+
+## Spécifications
+
+| Spécification                                                                                                                        | État                         | Commentaires                                          |
+| ------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------- | ----------------------------------------------------- |
+| {{SpecName('ES3')}}                                                                                                             | {{Spec2('ES3')}}         | Définition initiale. Implémentée avec JavaScript 1.5. |
+| {{SpecName('ES5.1', '#sec-15.2.4.5', 'Object.prototype.hasOwnProperty')}}                                     | {{Spec2('ES5.1')}}     |                                                       |
+| {{SpecName('ES6', '#sec-object.prototype.hasownproperty', 'Object.prototype.hasOwnProperty')}}         | {{Spec2('ES6')}}         |                                                       |
+| {{SpecName('ESDraft', '#sec-object.prototype.hasownproperty', 'Object.prototype.hasOwnProperty')}} | {{Spec2('ESDraft')}} |                                                       |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Object.hasOwnProperty")}}
+
+## Voir aussi
+
+- [Caractère énumérable et rattachement des propriétés](/fr/docs/Web/JavaScript/Caractère_énumérable_des_propriétés_et_rattachement)
+- {{jsxref("Object.getOwnPropertyNames()")}}
+- {{jsxref("Instructions/for...in", "for...in")}}
+- {{jsxref("Opérateurs/L_opérateur_in", "in")}}
+- [Guide JavaScript : Retours sur l'héritage](/fr/docs/Web/JavaScript/Guide/Retours_sur_héritage)
diff --git a/files/fr/web/javascript/reference/global_objects/object/index.html b/files/fr/web/javascript/reference/global_objects/object/index.html
deleted file mode 100644
index b40363652e..0000000000
--- a/files/fr/web/javascript/reference/global_objects/object/index.html
+++ /dev/null
@@ -1,181 +0,0 @@
----
-title: Object
-slug: Web/JavaScript/Reference/Global_Objects/Object
-tags:
-  - Constructeur
-  - JavaScript
-  - Object
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Object
-original_slug: Web/JavaScript/Reference/Objets_globaux/Object
----
-<div>{{JSRef}}</div>
-
-<p>Le constructeur <code><strong>Object</strong></code> crée un wrapper d'objet.</p>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">// Initialisateur d'objet ou littéral { [ <em>paireNomValeur1</em>[, <em>paireN<var>omValeur2</var></em>[,
- ...<em>paireNomValeurN</em>] ] ] }
-
-// Appelé comme un constructeur
-new Object([<var>valeur</var>])</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>paireNomValeur1, paireNomValeur2, ... paireNomValeurN</code></dt>
- <dd>Paires de noms (chaînes) et de valeurs (toutes valeurs) où le nom est séparé de la valeur par deux points (:).</dd>
- <dt><code>valeur</code></dt>
- <dd>Toute valeur.</dd>
-</dl>
-
-<h2 id="Description">Description</h2>
-
-<p>Le constructeur <code>Object</code> crée un wrapper d'objet pour la valeur donnée. Si la valeur est {{jsxref("null")}} ou {{jsxref("undefined")}}, il créera et retournera un objet vide, sinon, il retournera un objet du Type qui correspond à la valeur donnée. Si la valeur est déjà un objet, le constructeur retournera cette valeur.</p>
-
-<p>Lorsqu'il n'est pas appelé dans un contexte constructeur, <code>Object</code> se comporte de façon identique à <code>new Object()</code>.</p>
-
-<p>Voir aussi <a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Initialisateur_objet">initialisateur d'objet / syntaxe de littéral</a>.</p>
-
-<h2 id="Propriétés_du_constructeur_Object">Propriétés du constructeur <code>Object</code></h2>
-
-<dl>
- <dt><code>Object.length</code></dt>
- <dd>A une valeur de 1.</dd>
- <dt>{{jsxref("Object.prototype")}}</dt>
- <dd>Permet l'ajout de propriétés à tous les objets de type Object.</dd>
-</dl>
-
-<h2 id="Méthodes_du_constructeur_Object">Méthodes du constructeur <code>Object</code></h2>
-
-<dl>
- <dt>{{jsxref("Object.assign()")}}</dt>
- <dd>Copie les valeurs de toutes propriétés propres énumérables depuis un ou plusieurs objets source dans un objet cible.</dd>
- <dt>{{jsxref("Object.create()")}}</dt>
- <dd>Crée un nouvel objet avec le prototype d'objet et les propriétés indiqués.</dd>
- <dt>{{jsxref("Object.defineProperty()")}}</dt>
- <dd>Ajoute à un objet la propriété nommée décrite par le descripteur donné.</dd>
- <dt>{{jsxref("Object.defineProperties()")}}</dt>
- <dd>Ajoute à un objet les propriétés nommées décrites par les descripteurs donnés.</dd>
- <dt>{{jsxref("Object.entries()")}}</dt>
- <dd>Retourne un tableau contenant les paires <code>[clé, valeur]</code> des propriétés énumérables propres (c'est-à-dire directement rattachées à l'objet) de l'objet donné et dont les clés sont des chaînes de caractères.</dd>
- <dt>{{jsxref("Object.freeze()")}}</dt>
- <dd>Gèle un objet : un autre code ne peut ni détruire ni changer aucune propriété.</dd>
- <dt>{{jsxref("Object.fromEntries()")}}</dt>
- <dd>Renvoie un nouvel objet à partir d'un itérable contenant des paires de clés-valeurs (l'opération duale de {{jsxref("Object.entries")}}).</dd>
- <dt>{{jsxref("Object.getOwnPropertyDescriptor()")}}</dt>
- <dd>Retourne un descripteur de propriété pour une propriété nommée d'un objet.</dd>
- <dt>{{jsxref("Object.getOwnPropertyDescriptors()")}}</dt>
- <dd>Retourne un objet contenant tous les descripteurs des propriétés propres d'un objet.</dd>
- <dt>{{jsxref("Object.getOwnPropertyNames()")}}</dt>
- <dd>Retourne un tableau contenant les noms de toutes les propriétés énumérables et non énumérables <strong>propres</strong> de l'objet donné.</dd>
- <dt>{{jsxref("Object.getOwnPropertySymbols()")}}</dt>
- <dd>Retourne un tableau de toutes les propriétés symboles trouvées directement dans un objet donné.</dd>
- <dt>{{jsxref("Object.getPrototypeOf()")}}</dt>
- <dd>Retourne le prototype de l'objet indiqué.</dd>
- <dt>{{jsxref("Object.is()")}}</dt>
- <dd>Détermine si deux valeurs sont la même valeur. Considère comme égales toutes les valeurs NaN (ce qui diffère à la fois de la Comparaison d'Égalité Abstraite et de la Comparaison d'Égalité Stricte).</dd>
- <dt>{{jsxref("Object.isExtensible()")}}</dt>
- <dd>Détermine si l'extension d'un objet est permise.</dd>
- <dt>{{jsxref("Object.isFrozen()")}}</dt>
- <dd>Détermine si un objet a été gelé.</dd>
- <dt>{{jsxref("Object.isSealed()")}}</dt>
- <dd>Détermine si un objet est scellé.</dd>
- <dt>{{jsxref("Object.keys()")}}</dt>
- <dd>Retourne un tableau contenant les noms de toutes les propriétés énumérables <strong>propres</strong> de l'objet donné.</dd>
- <dt>{{jsxref("Object.preventExtensions()")}}</dt>
- <dd>Empêche toute extension de l'objet.</dd>
- <dt>{{jsxref("Object.seal()")}}</dt>
- <dd>Empêche un autre code de détruire les propriétés d'un objet.</dd>
- <dt>{{jsxref("Object.setPrototypeOf()")}}</dt>
- <dd>Définit le prototype d'un objet (c-à-d, la propriété interne <code>[[Prototype]]</code>).</dd>
- <dt>{{jsxref("Object.values()")}}</dt>
- <dd>Retourne le tableau des valeurs énumérables propres de l'objet donné dont les clés sont des chaînes de caractères.</dd>
-</dl>
-
-<h2 id="Instances_d'Object_et_objet_de_prototype_Object">Instances d'<code>Object</code> et objet de prototype <code>Object</code></h2>
-
-<p>Tous les objets en JavaScript descendent d'<code>Object</code> ; tous les objets héritent des méthodes et des propriétés de {{jsxref("Object.prototype")}}, même si elles peuvent être surchargées. Par exemple, d'autres prototypes de constructeurs surchargent la propriété du <code>constructor</code> et fournissent leurs propres méthodes <code>toString()</code>. Les changements apportés à l'objet de prototype <code>Object</code> sont propagées à tous les objets, à moins que les propriétés et méthodes auxquelles s'appliquent ces changements ne soient surchargées plus loin dans la chaîne de prototypes.</p>
-
-<h3 id="Propriétés">Propriétés</h3>
-
-<div>{{page('/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/prototype', 'Properties') }}</div>
-
-<h3 id="Méthodes">Méthodes</h3>
-
-<div>{{page('/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/prototype', 'Methods') }}</div>
-
-<h2 id="Suppression_d'une_propriété_dans_un_objet">Suppression d'une propriété dans un objet</h2>
-
-<p>Il n'y a aucune méthode dans un Object lui-même pour supprimer ses propres propriétés (par exemple, comme <a href="/fr-Fr/docs/Web/JavaScript/Reference/Global_Objects/Map/delete">Map.prototype.delete()</a>). Pour ce faire, il faut utiliser l'<a href="/fr-Fr/docs/Web/JavaScript/Reference/Operators/delete">opérateur delete</a>.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Utilisation_d'Object_avec_les_types_undefined_et_null">Utilisation d'<code>Object</code> avec les types <code>undefined</code> et <code>null</code></h3>
-
-<p>Les exemples suivants stockent un <code>Object</code> vide dans <code>o</code> :</p>
-
-<pre class="brush: js">var o = new Object();
-</pre>
-
-<pre class="brush: js">var o = new Object(undefined);
-</pre>
-
-<pre class="brush: js">var o = new Object(null);
-</pre>
-
-<h3 id="Utilisation_d'Object_pour_créer_des_objets_Boolean">Utilisation d'<code>Object</code> pour créer des objets <code>Boolean</code></h3>
-
-<p>Les exemples suivants stockent des objets {{jsxref("Boolean")}} dans <code>o</code> :</p>
-
-<pre class="brush: js">// Équivalent à : o = new Boolean(true);
-var o = new Object(true);
-</pre>
-
-<pre class="brush: js">// Équivalent à : o = new Boolean(false);
-var o = new Object(Boolean());
-
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES1')}}</td>
-   <td>{{Spec2('ES1')}}</td>
-   <td>Définition initiale. Implémentée par JavaScript 1.0.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-15.2', 'Object')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-object-objects', 'Object')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td>Ajout de Object.assign, Object.getOwnPropertySymbols, Object.setPrototypeOf, Object.is</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-object-objects', 'Object')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td>Ajout de Object.entries, de Object.values et de Object.getOwnPropertyDescriptors.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Object")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Initialisateur_objet">Initialisateur d'objet</a></li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/object/index.md b/files/fr/web/javascript/reference/global_objects/object/index.md
new file mode 100644
index 0000000000..df266e33d6
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/object/index.md
@@ -0,0 +1,154 @@
+---
+title: Object
+slug: Web/JavaScript/Reference/Global_Objects/Object
+tags:
+  - Constructeur
+  - JavaScript
+  - Object
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Object
+original_slug: Web/JavaScript/Reference/Objets_globaux/Object
+---
+{{JSRef}}
+
+Le constructeur **`Object`** crée un wrapper d'objet.
+
+## Syntaxe
+
+    // Initialisateur d'objet ou littéral { [ paireNomValeur1[, paireNomValeur2[,
+     ...paireNomValeurN] ] ] }
+
+    // Appelé comme un constructeur
+    new Object([valeur])
+
+### Paramètres
+
+- `paireNomValeur1, paireNomValeur2, ... paireNomValeurN`
+  - : Paires de noms (chaînes) et de valeurs (toutes valeurs) où le nom est séparé de la valeur par deux points (:).
+- `valeur`
+  - : Toute valeur.
+
+## Description
+
+Le constructeur `Object` crée un wrapper d'objet pour la valeur donnée. Si la valeur est {{jsxref("null")}} ou {{jsxref("undefined")}}, il créera et retournera un objet vide, sinon, il retournera un objet du Type qui correspond à la valeur donnée. Si la valeur est déjà un objet, le constructeur retournera cette valeur.
+
+Lorsqu'il n'est pas appelé dans un contexte constructeur, `Object` se comporte de façon identique à `new Object()`.
+
+Voir aussi [initialisateur d'objet / syntaxe de littéral](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Initialisateur_objet).
+
+## Propriétés du constructeur `Object`
+
+- `Object.length`
+  - : A une valeur de 1.
+- {{jsxref("Object.prototype")}}
+  - : Permet l'ajout de propriétés à tous les objets de type Object.
+
+## Méthodes du constructeur `Object`
+
+- {{jsxref("Object.assign()")}}
+  - : Copie les valeurs de toutes propriétés propres énumérables depuis un ou plusieurs objets source dans un objet cible.
+- {{jsxref("Object.create()")}}
+  - : Crée un nouvel objet avec le prototype d'objet et les propriétés indiqués.
+- {{jsxref("Object.defineProperty()")}}
+  - : Ajoute à un objet la propriété nommée décrite par le descripteur donné.
+- {{jsxref("Object.defineProperties()")}}
+  - : Ajoute à un objet les propriétés nommées décrites par les descripteurs donnés.
+- {{jsxref("Object.entries()")}}
+  - : Retourne un tableau contenant les paires `[clé, valeur]` des propriétés énumérables propres (c'est-à-dire directement rattachées à l'objet) de l'objet donné et dont les clés sont des chaînes de caractères.
+- {{jsxref("Object.freeze()")}}
+  - : Gèle un objet : un autre code ne peut ni détruire ni changer aucune propriété.
+- {{jsxref("Object.fromEntries()")}}
+  - : Renvoie un nouvel objet à partir d'un itérable contenant des paires de clés-valeurs (l'opération duale de {{jsxref("Object.entries")}}).
+- {{jsxref("Object.getOwnPropertyDescriptor()")}}
+  - : Retourne un descripteur de propriété pour une propriété nommée d'un objet.
+- {{jsxref("Object.getOwnPropertyDescriptors()")}}
+  - : Retourne un objet contenant tous les descripteurs des propriétés propres d'un objet.
+- {{jsxref("Object.getOwnPropertyNames()")}}
+  - : Retourne un tableau contenant les noms de toutes les propriétés énumérables et non énumérables **propres** de l'objet donné.
+- {{jsxref("Object.getOwnPropertySymbols()")}}
+  - : Retourne un tableau de toutes les propriétés symboles trouvées directement dans un objet donné.
+- {{jsxref("Object.getPrototypeOf()")}}
+  - : Retourne le prototype de l'objet indiqué.
+- {{jsxref("Object.is()")}}
+  - : Détermine si deux valeurs sont la même valeur. Considère comme égales toutes les valeurs NaN (ce qui diffère à la fois de la Comparaison d'Égalité Abstraite et de la Comparaison d'Égalité Stricte).
+- {{jsxref("Object.isExtensible()")}}
+  - : Détermine si l'extension d'un objet est permise.
+- {{jsxref("Object.isFrozen()")}}
+  - : Détermine si un objet a été gelé.
+- {{jsxref("Object.isSealed()")}}
+  - : Détermine si un objet est scellé.
+- {{jsxref("Object.keys()")}}
+  - : Retourne un tableau contenant les noms de toutes les propriétés énumérables **propres** de l'objet donné.
+- {{jsxref("Object.preventExtensions()")}}
+  - : Empêche toute extension de l'objet.
+- {{jsxref("Object.seal()")}}
+  - : Empêche un autre code de détruire les propriétés d'un objet.
+- {{jsxref("Object.setPrototypeOf()")}}
+  - : Définit le prototype d'un objet (c-à-d, la propriété interne `[[Prototype]]`).
+- {{jsxref("Object.values()")}}
+  - : Retourne le tableau des valeurs énumérables propres de l'objet donné dont les clés sont des chaînes de caractères.
+
+## Instances d'`Object` et objet de prototype `Object`
+
+Tous les objets en JavaScript descendent d'`Object` ; tous les objets héritent des méthodes et des propriétés de {{jsxref("Object.prototype")}}, même si elles peuvent être surchargées. Par exemple, d'autres prototypes de constructeurs surchargent la propriété du `constructor` et fournissent leurs propres méthodes `toString()`. Les changements apportés à l'objet de prototype `Object` sont propagées à tous les objets, à moins que les propriétés et méthodes auxquelles s'appliquent ces changements ne soient surchargées plus loin dans la chaîne de prototypes.
+
+### Propriétés
+
+{{page('/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/prototype', 'Properties') }}
+
+### Méthodes
+
+{{page('/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/prototype', 'Methods') }}
+
+## Suppression d'une propriété dans un objet
+
+Il n'y a aucune méthode dans un Object lui-même pour supprimer ses propres propriétés (par exemple, comme [Map.prototype.delete()](/fr-Fr/docs/Web/JavaScript/Reference/Global_Objects/Map/delete)). Pour ce faire, il faut utiliser l'[opérateur delete](/fr-Fr/docs/Web/JavaScript/Reference/Operators/delete).
+
+## Exemples
+
+### Utilisation d'`Object` avec les types `undefined` et `null`
+
+Les exemples suivants stockent un `Object` vide dans `o` :
+
+```js
+var o = new Object();
+```
+
+```js
+var o = new Object(undefined);
+```
+
+```js
+var o = new Object(null);
+```
+
+### Utilisation d'`Object` pour créer des objets `Boolean`
+
+Les exemples suivants stockent des objets {{jsxref("Boolean")}} dans `o` :
+
+```js
+// Équivalent à : o = new Boolean(true);
+var o = new Object(true);
+```
+
+```js
+// Équivalent à : o = new Boolean(false);
+var o = new Object(Boolean());
+```
+
+## Spécifications
+
+| Spécification                                                                | Statut                       | Commentaire                                                                            |
+| ---------------------------------------------------------------------------- | ---------------------------- | -------------------------------------------------------------------------------------- |
+| {{SpecName('ES1')}}                                                     | {{Spec2('ES1')}}         | Définition initiale. Implémentée par JavaScript 1.0.                                   |
+| {{SpecName('ES5.1', '#sec-15.2', 'Object')}}                 | {{Spec2('ES5.1')}}     |                                                                                        |
+| {{SpecName('ES6', '#sec-object-objects', 'Object')}}         | {{Spec2('ES6')}}         | Ajout de Object.assign, Object.getOwnPropertySymbols, Object.setPrototypeOf, Object.is |
+| {{SpecName('ESDraft', '#sec-object-objects', 'Object')}} | {{Spec2('ESDraft')}} | Ajout de Object.entries, de Object.values et de Object.getOwnPropertyDescriptors.      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Object")}}
+
+## Voir aussi
+
+- [Initialisateur d'objet](/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Initialisateur_objet)
diff --git a/files/fr/web/javascript/reference/global_objects/object/is/index.html b/files/fr/web/javascript/reference/global_objects/object/is/index.html
deleted file mode 100644
index 1f414765fb..0000000000
--- a/files/fr/web/javascript/reference/global_objects/object/is/index.html
+++ /dev/null
@@ -1,127 +0,0 @@
----
-title: Object.is()
-slug: Web/JavaScript/Reference/Global_Objects/Object/is
-tags:
-  - ECMAScript 2015
-  - JavaScript
-  - Méthode
-  - Object
-  - Reference
-  - polyfill
-translation_of: Web/JavaScript/Reference/Global_Objects/Object/is
-original_slug: Web/JavaScript/Reference/Objets_globaux/Object/is
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <code><strong>Object.is()</strong></code> permet de déterminer si deux valeurs sont <a href="/fr/docs/Web/JavaScript/Guide/%C3%89galit%C3%A9_en_JavaScript">les mêmes</a>.</p>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">Object.is(<var>value1</var>, <var>value2</var>);</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>valeur1</code></dt>
- <dd>La première valeur à comparer.</dd>
- <dt><code>valeur2</code></dt>
- <dd>La seconde valeur à comparer.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Un booléen indiquant si les arguments ont la même valeur.</p>
-
-<h2 id="Description">Description</h2>
-
-<p><code>Object.is()</code> permet de déterminer si deux valeurs sont <a href="/fr/docs/Web/JavaScript/Guide/%C3%89galit%C3%A9_en_JavaScript">identiques</a>. Deux valeurs sont considérées identiques si :</p>
-
-<ul>
- <li>elles sont toutes les deux {{jsxref("undefined")}}</li>
- <li>elles sont toutes les deux {{jsxref("null")}}</li>
- <li>elles sont toutes les deux <code>true</code> ou toutes les deux <code>false</code></li>
- <li>elles sont des chaînes de caractères de la même longueur et avec les mêmes caractères (dans le même ordre)</li>
- <li>elles sont toutes les deux le même objet</li>
- <li>elles sont des nombres et
-  <ul>
-   <li>sont toutes les deux égales à <code>+0</code></li>
-   <li>sont toutes les deux égales à <code>-0</code></li>
-   <li>sont toutes les deux égales à {{jsxref("NaN")}}</li>
-   <li>sont non-nulles, ne sont pas <code>NaN</code> et ont toutes les deux la même valeur</li>
-  </ul>
- </li>
-</ul>
-
-<p>Attention, ce n'est pas la même égalité qu'avec l'opérateur {{jsxref("Opérateurs/Opérateurs_de_comparaison", "==", "#.C3.89galit.C3.A9_simple_(.3D.3D)")}}. L'opérateur == applique différentes conversions à chaque opérande (si ils ne sont pas du même type) avant de tester l'égalité (d'où le comportement <code>"" == false</code> qui donne <code>true</code>), <code>Object.is</code> ne convertit aucune des deux valeurs.</p>
-
-<p>Cette égalité est également différente de l'égalité stricte qu'on peut avoir avec l'opérateur {{jsxref("Opérateurs/Opérateurs_de_comparaison", "===", "#.C3.89galit.C3.A9_stricte_(.3D.3D.3D)")}}. L'opérateur === (et également l'opérateur ==) considère que <code>-0</code> et <code>+0</code> sont égales et que {{jsxref("Number.NaN")}} n'est pas égal à {{jsxref("NaN")}}.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<pre class="brush:js;">Object.is("toto", "toto");     // true
-Object.is(window, window);     // true
-
-Object.is("toto", "truc");     // false
-Object.is([], []);             // false
-
-var toto = {a: 1};
-var truc = {a: 1};
-Object.is(toto, toto);          // true
-Object.is(toto, truc);          // false
-
-Object.is(null, null);          // true
-
-// Cas aux limites (cas spéciaux)
-Object.is(0, -0);                // false
-Object.is(-0, -0);               // true
-Object.is(NaN, 0/0);             // true</pre>
-
-<h2 id="Prothèse_d'émulation_(polyfill)">Prothèse d'émulation (<em>polyfill</em>)</h2>
-
-<pre class="brush:js">if (!Object.is) {
-  Object.is = function(v1, v2) {
-    // Algorithme SameValue
-    if (v1 === v2) { //Étapes 1-5, 7-10
-      //Étapes 6.b-6.b +0 !=-0
-      return v1 !== 0 || 1 / v1 === 1 / v2;
-    } else {
-      //Étapes 6.a: NaN == NaN
-      return v1 !== v1 &amp;&amp; v2 !== v2;
-    }
-  };
-}</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-object.is', 'Object.is')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td>Définition initiale</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-object.is', 'Object.is')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Object.is")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/JavaScript/Guide/Égalité_en_JavaScript">Guide JavaScript : L'égalité en JavaScript</a> qui illustre les trois manières de comparer en JavaScript</li>
- <li>{{jsxref("Opérateurs/Opérateurs_de_comparaison","Les opérateurs de comparaison","",1)}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/object/is/index.md b/files/fr/web/javascript/reference/global_objects/object/is/index.md
new file mode 100644
index 0000000000..91b7520c6a
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/object/is/index.md
@@ -0,0 +1,106 @@
+---
+title: Object.is()
+slug: Web/JavaScript/Reference/Global_Objects/Object/is
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Méthode
+  - Object
+  - Reference
+  - polyfill
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/is
+original_slug: Web/JavaScript/Reference/Objets_globaux/Object/is
+---
+{{JSRef}}
+
+La méthode **`Object.is()`** permet de déterminer si deux valeurs sont [les mêmes](/fr/docs/Web/JavaScript/Guide/%C3%89galit%C3%A9_en_JavaScript).
+
+## Syntaxe
+
+    Object.is(value1, value2);
+
+### Paramètres
+
+- `valeur1`
+  - : La première valeur à comparer.
+- `valeur2`
+  - : La seconde valeur à comparer.
+
+### Valeur de retour
+
+Un booléen indiquant si les arguments ont la même valeur.
+
+## Description
+
+`Object.is()` permet de déterminer si deux valeurs sont [identiques](/fr/docs/Web/JavaScript/Guide/%C3%89galit%C3%A9_en_JavaScript). Deux valeurs sont considérées identiques si :
+
+- elles sont toutes les deux {{jsxref("undefined")}}
+- elles sont toutes les deux {{jsxref("null")}}
+- elles sont toutes les deux `true` ou toutes les deux `false`
+- elles sont des chaînes de caractères de la même longueur et avec les mêmes caractères (dans le même ordre)
+- elles sont toutes les deux le même objet
+- elles sont des nombres et
+
+  - sont toutes les deux égales à `+0`
+  - sont toutes les deux égales à `-0`
+  - sont toutes les deux égales à {{jsxref("NaN")}}
+  - sont non-nulles, ne sont pas `NaN` et ont toutes les deux la même valeur
+
+Attention, ce n'est pas la même égalité qu'avec l'opérateur {{jsxref("Opérateurs/Opérateurs_de_comparaison", "==", "#.C3.89galit.C3.A9_simple_(.3D.3D)")}}. L'opérateur == applique différentes conversions à chaque opérande (si ils ne sont pas du même type) avant de tester l'égalité (d'où le comportement `"" == false` qui donne `true`), `Object.is` ne convertit aucune des deux valeurs.
+
+Cette égalité est également différente de l'égalité stricte qu'on peut avoir avec l'opérateur {{jsxref("Opérateurs/Opérateurs_de_comparaison", "===", "#.C3.89galit.C3.A9_stricte_(.3D.3D.3D)")}}. L'opérateur === (et également l'opérateur ==) considère que `-0` et `+0` sont égales et que {{jsxref("Number.NaN")}} n'est pas égal à {{jsxref("NaN")}}.
+
+## Exemples
+
+```js
+Object.is("toto", "toto");     // true
+Object.is(window, window);     // true
+
+Object.is("toto", "truc");     // false
+Object.is([], []);             // false
+
+var toto = {a: 1};
+var truc = {a: 1};
+Object.is(toto, toto);          // true
+Object.is(toto, truc);          // false
+
+Object.is(null, null);          // true
+
+// Cas aux limites (cas spéciaux)
+Object.is(0, -0);                // false
+Object.is(-0, -0);               // true
+Object.is(NaN, 0/0);             // true
+```
+
+## Prothèse d'émulation (_polyfill_)
+
+```js
+if (!Object.is) {
+  Object.is = function(v1, v2) {
+    // Algorithme SameValue
+    if (v1 === v2) { //Étapes 1-5, 7-10
+      //Étapes 6.b-6.b +0 !=-0
+      return v1 !== 0 || 1 / v1 === 1 / v2;
+    } else {
+      //Étapes 6.a: NaN == NaN
+      return v1 !== v1 && v2 !== v2;
+    }
+  };
+}
+```
+
+## Spécifications
+
+| Spécification                                                            | État                         | Commentaires        |
+| ------------------------------------------------------------------------ | ---------------------------- | ------------------- |
+| {{SpecName('ES2015', '#sec-object.is', 'Object.is')}} | {{Spec2('ES2015')}}     | Définition initiale |
+| {{SpecName('ESDraft', '#sec-object.is', 'Object.is')}} | {{Spec2('ESDraft')}} |                     |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Object.is")}}
+
+## Voir aussi
+
+- [Guide JavaScript : L'égalité en JavaScript](/fr/docs/Web/JavaScript/Guide/Égalité_en_JavaScript) qui illustre les trois manières de comparer en JavaScript
+- {{jsxref("Opérateurs/Opérateurs_de_comparaison","Les opérateurs de comparaison","",1)}}
diff --git a/files/fr/web/javascript/reference/global_objects/object/isextensible/index.html b/files/fr/web/javascript/reference/global_objects/object/isextensible/index.html
deleted file mode 100644
index 7446914f88..0000000000
--- a/files/fr/web/javascript/reference/global_objects/object/isextensible/index.html
+++ /dev/null
@@ -1,109 +0,0 @@
----
-title: Object.isExtensible()
-slug: Web/JavaScript/Reference/Global_Objects/Object/isExtensible
-tags:
-  - ECMAScript 5
-  - JavaScript
-  - JavaScript 1.8.5
-  - Méthode
-  - Object
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Object/isExtensible
-original_slug: Web/JavaScript/Reference/Objets_globaux/Object/isExtensible
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <strong><code>Object.isExtensible()</code></strong> permet de déterminer si un objet est extensible (c'est-à-dire qu'on peut lui ajouter de nouvelles propriétés).</p>
-
-<div>{{EmbedInteractiveExample("pages/js/object-isextensible.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">Object.isExtensible(<var>obj</var>)</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>obj</code></dt>
- <dd>L'objet dont on souhaite vérifier s'il est extensible.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Un booléen qui indique si oui ou non l'objet passé en argument peut être étendu.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>Par défaut, les objets sont extensibles, on peut leur ajouter de nouvelles propriétés (et pour les moteurs qui supportent {{jsxref("Object.proto", "__proto__")}} {{deprecated_inline}}, leur propriété __proto__ peut être modifiée). Un objet peut devenir non-extensible en utilisant les méthodes {{jsxref("Object.preventExtensions()")}}, {{jsxref("Object.seal()")}}, ou {{jsxref("Object.freeze()")}}.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<pre class="brush: js">// Les nouveaux objets sont extensibles.
-var vide = {};
-Object.isExtensible(vide); // true
-
-// ...mais on peut les rendre non-extensibles.
-Object.preventExtensions(vide);
-Object.isExtensible(vide); // false
-
-// Les objets scellés sont, par définition, non-extensibles.
-var scellé = Object.seal({});
-Object.isExtensible(scellé); // false
-
-// Les objets gelés sont également, par définition, non-extensibles.
-var gelé = Object.freeze({});
-Object.isExtensible(gelé); // false
-</pre>
-
-<h2 id="Notes">Notes</h2>
-
-<p>Pour ES5, si l'argument passé à la méthode n'est pas un objet mais une valeur d'un autre type primitif, cela entraînera une exception {{jsxref("TypeError")}}. Pour ES2015, un argument qui n'est pas un objet sera traité comme un objet ordinaire non-extensible, la méthode renverra <code>false</code>.</p>
-
-<pre class="brush: js">Object.isExtensible(1);
-// TypeError: 1 n'est pas un objet (code ES5)
-
-Object.isExtensible(1);
-// false                           (code ES2015)
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-15.2.3.13', 'Object.isExtensible')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td>Définition initiale. Implémentée avec JavaScript 1.8.5.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-object.isextensible', 'Object.isExtensible')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-object.isextensible', 'Object.isExtensible')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Object.isExtensible")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Object.preventExtensions()")}}</li>
- <li>{{jsxref("Object.seal()")}}</li>
- <li>{{jsxref("Object.isSealed()")}}</li>
- <li>{{jsxref("Object.freeze()")}}</li>
- <li>{{jsxref("Object.isFrozen()")}}</li>
- <li>{{jsxref("Reflect.isExtensible()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/object/isextensible/index.md b/files/fr/web/javascript/reference/global_objects/object/isextensible/index.md
new file mode 100644
index 0000000000..91f2900829
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/object/isextensible/index.md
@@ -0,0 +1,88 @@
+---
+title: Object.isExtensible()
+slug: Web/JavaScript/Reference/Global_Objects/Object/isExtensible
+tags:
+  - ECMAScript 5
+  - JavaScript
+  - JavaScript 1.8.5
+  - Méthode
+  - Object
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/isExtensible
+original_slug: Web/JavaScript/Reference/Objets_globaux/Object/isExtensible
+---
+{{JSRef}}
+
+La méthode **`Object.isExtensible()`** permet de déterminer si un objet est extensible (c'est-à-dire qu'on peut lui ajouter de nouvelles propriétés).
+
+{{EmbedInteractiveExample("pages/js/object-isextensible.html")}}
+
+## Syntaxe
+
+    Object.isExtensible(obj)
+
+### Paramètres
+
+- `obj`
+  - : L'objet dont on souhaite vérifier s'il est extensible.
+
+### Valeur de retour
+
+Un booléen qui indique si oui ou non l'objet passé en argument peut être étendu.
+
+## Description
+
+Par défaut, les objets sont extensibles, on peut leur ajouter de nouvelles propriétés (et pour les moteurs qui supportent {{jsxref("Object.proto", "__proto__")}} {{deprecated_inline}}, leur propriété \_\_proto\_\_ peut être modifiée). Un objet peut devenir non-extensible en utilisant les méthodes {{jsxref("Object.preventExtensions()")}}, {{jsxref("Object.seal()")}}, ou {{jsxref("Object.freeze()")}}.
+
+## Exemples
+
+```js
+// Les nouveaux objets sont extensibles.
+var vide = {};
+Object.isExtensible(vide); // true
+
+// ...mais on peut les rendre non-extensibles.
+Object.preventExtensions(vide);
+Object.isExtensible(vide); // false
+
+// Les objets scellés sont, par définition, non-extensibles.
+var scellé = Object.seal({});
+Object.isExtensible(scellé); // false
+
+// Les objets gelés sont également, par définition, non-extensibles.
+var gelé = Object.freeze({});
+Object.isExtensible(gelé); // false
+```
+
+## Notes
+
+Pour ES5, si l'argument passé à la méthode n'est pas un objet mais une valeur d'un autre type primitif, cela entraînera une exception {{jsxref("TypeError")}}. Pour ES2015, un argument qui n'est pas un objet sera traité comme un objet ordinaire non-extensible, la méthode renverra `false`.
+
+```js
+Object.isExtensible(1);
+// TypeError: 1 n'est pas un objet (code ES5)
+
+Object.isExtensible(1);
+// false                           (code ES2015)
+```
+
+## Spécifications
+
+| Spécification                                                                                        | État                         | Commentaires                                            |
+| ---------------------------------------------------------------------------------------------------- | ---------------------------- | ------------------------------------------------------- |
+| {{SpecName('ES5.1', '#sec-15.2.3.13', 'Object.isExtensible')}}                 | {{Spec2('ES5.1')}}     | Définition initiale. Implémentée avec JavaScript 1.8.5. |
+| {{SpecName('ES6', '#sec-object.isextensible', 'Object.isExtensible')}}         | {{Spec2('ES6')}}         |                                                         |
+| {{SpecName('ESDraft', '#sec-object.isextensible', 'Object.isExtensible')}} | {{Spec2('ESDraft')}} |                                                         |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Object.isExtensible")}}
+
+## Voir aussi
+
+- {{jsxref("Object.preventExtensions()")}}
+- {{jsxref("Object.seal()")}}
+- {{jsxref("Object.isSealed()")}}
+- {{jsxref("Object.freeze()")}}
+- {{jsxref("Object.isFrozen()")}}
+- {{jsxref("Reflect.isExtensible()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/object/isfrozen/index.html b/files/fr/web/javascript/reference/global_objects/object/isfrozen/index.html
deleted file mode 100644
index 0491daef10..0000000000
--- a/files/fr/web/javascript/reference/global_objects/object/isfrozen/index.html
+++ /dev/null
@@ -1,172 +0,0 @@
----
-title: Object.isFrozen()
-slug: Web/JavaScript/Reference/Global_Objects/Object/isFrozen
-tags:
-  - ECMAScript 5
-  - JavaScript
-  - JavaScript 1.8.5
-  - Méthode
-  - Object
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Object/isFrozen
-original_slug: Web/JavaScript/Reference/Objets_globaux/Object/isFrozen
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <code><strong>Object.isFrozen()</strong></code>permet de déterminer si un objet est {{jsxref("Object.freeze()", "gelé", "", 1)}}.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/object-isfrozen.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">Object.isFrozen(<var>obj</var>)</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>obj</code></dt>
- <dd>L'objet dont on souhaite vérifier s'il est gelé.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Un booléen qui indique si oui ou non l'objet passé en argument est gelé.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>Un objet est gelé si et seulement s'il n'est pas {{jsxref("Object.isExtensible", "extensible","",1)}}, que toutes ses propriétés sont non-configurables et que ses propriétés de données (c'est-à-dire les propriétés qui ne sont pas des accesseurs ou des mutateurs) sont non-accessibles en écriture.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<pre class="brush: js">// Un objet nouvellement créé est extensible
-// et est donc dégelé
-Object.isFrozen({}); // false
-
-// Un objet vide et non extensible est gelé
-var videGelé = Object.preventExtensions({});
-Object.isFrozen(videGelé); // true
-
-// Un nouvel objet avec une propriété est
-// extensible et donc dégelé
-var uneProp = { p: 42 };
-Object.isFrozen(uneProp); // false
-
-// Si on empêche d'étendre un objet non vide,
-// cela ne le rend pas gelé car la propriété
-// est toujours configurable (et accessible
-// en écriture)
-Object.preventExtensions(uneProp);
-Object.isFrozen(uneProp); // false
-
-// ...si on supprime la seule propriété existante
-// en revanche, on a bien un objet gelé
-delete uneProp.p;
-Object.isFrozen(uneProp); // true
-
-// Un objet non-extensible et avec une propriété
-// non-accessible en écriture mais toujours configurable
-// n'est pas gelé
-var nonWritable = { e: "plep" };
-Object.preventExtensions(nonWritable);
-
-Object.defineProperty(nonWritable, "e", { writable: false });
-// on la rend non accessible en écriture
-
-Object.isFrozen(nonWritable); // false
-
-// Si on rend la propriété non-configurable,
-// l'objet devient gelé
-
-Object.defineProperty(nonWritable, "e", { configurable: false });
-// on la rend non-configurable
-
-Object.isFrozen(nonWritable) === true);
-
-// Un objet non-extensible avec une propriété non-configurable
-// mais accessible en écriture n'est pas gelé
-var nonConfigurable = { release: "the kraken!" };
-Object.preventExtensions(nonConfigurable);
-Object.defineProperty(nonConfigurable, "release", { configurable: false });
-Object.isFrozen(nonConfigurable); // false
-
-// Si cette propriété devient non accessible
-// en écriture, l'objet est gelé
-Object.defineProperty(nonConfigurable, "release", { writable: false });
-Object.isFrozen(nonConfigurable); // true
-
-// Un objet non-extensible avec un accesseur
-// configurable n'est pas gelé
-var accesseur = { get manger() { return "miam"; } };
-Object.preventExtensions(accesseur);
-Object.isFrozen(accesseur); // false
-
-// ...si on rend la propriété non-configurable,
-// l'objet est gelé.
-Object.defineProperty(accesseur, "manger", { configurable: false });
-Object.isFrozen(accesseur); // true
-
-// La façon la plus simple est d'utiliser la
-// méthode Object.freeze
-var gelé = { 1: 81 };
-Object.isFrozen(gelé); // false
-Object.freeze(gelé);
-Object.isFrozen(gelé); // true
-
-// Par définition, un objet gelé est non-extensible.
-Object.isExtensible(gelé); // false
-
-// Par définition, un objet gelé est scellé.
-Object.isSealed(gelé); // true
-</pre>
-
-<h2 id="Notes">Notes</h2>
-
-<p>Pour ES5, si l'argument passé à la méthode n'est pas un objet (mais est d'un autre type primitif), cela entraînera une exception {{jsxref("TypeError")}}. Pour ES2015, un argument qui n'est pas un objet sera traité comme s'il était un objet gelé et la méthode renverra <code>true</code>.</p>
-
-<pre class="brush: js">Object.isFrozen(1);
-// TypeError: 1 n'est pas un objet (code ES5)
-
-Object.isFrozen(1);
-// true                            (code ES2015)
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-15.2.3.12', 'Object.isFrozen')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td>Définition initiale. Implémentée par JavaScript 1.8.5.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-object.isfrozen', 'Object.isFrozen')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-object.isfrozen', 'Object.isFrozen')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Object.isFrozen")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Object.freeze()")}}</li>
- <li>{{jsxref("Object.preventExtensions()")}}</li>
- <li>{{jsxref("Object.isExtensible()")}}</li>
- <li>{{jsxref("Object.seal()")}}</li>
- <li>{{jsxref("Object.isSealed()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/object/isfrozen/index.md b/files/fr/web/javascript/reference/global_objects/object/isfrozen/index.md
new file mode 100644
index 0000000000..f99db9b02a
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/object/isfrozen/index.md
@@ -0,0 +1,151 @@
+---
+title: Object.isFrozen()
+slug: Web/JavaScript/Reference/Global_Objects/Object/isFrozen
+tags:
+  - ECMAScript 5
+  - JavaScript
+  - JavaScript 1.8.5
+  - Méthode
+  - Object
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/isFrozen
+original_slug: Web/JavaScript/Reference/Objets_globaux/Object/isFrozen
+---
+{{JSRef}}
+
+La méthode **`Object.isFrozen()`**permet de déterminer si un objet est {{jsxref("Object.freeze()", "gelé", "", 1)}}.
+
+{{EmbedInteractiveExample("pages/js/object-isfrozen.html")}}
+
+## Syntaxe
+
+    Object.isFrozen(obj)
+
+### Paramètres
+
+- `obj`
+  - : L'objet dont on souhaite vérifier s'il est gelé.
+
+### Valeur de retour
+
+Un booléen qui indique si oui ou non l'objet passé en argument est gelé.
+
+## Description
+
+Un objet est gelé si et seulement s'il n'est pas {{jsxref("Object.isExtensible", "extensible","",1)}}, que toutes ses propriétés sont non-configurables et que ses propriétés de données (c'est-à-dire les propriétés qui ne sont pas des accesseurs ou des mutateurs) sont non-accessibles en écriture.
+
+## Exemples
+
+```js
+// Un objet nouvellement créé est extensible
+// et est donc dégelé
+Object.isFrozen({}); // false
+
+// Un objet vide et non extensible est gelé
+var videGelé = Object.preventExtensions({});
+Object.isFrozen(videGelé); // true
+
+// Un nouvel objet avec une propriété est
+// extensible et donc dégelé
+var uneProp = { p: 42 };
+Object.isFrozen(uneProp); // false
+
+// Si on empêche d'étendre un objet non vide,
+// cela ne le rend pas gelé car la propriété
+// est toujours configurable (et accessible
+// en écriture)
+Object.preventExtensions(uneProp);
+Object.isFrozen(uneProp); // false
+
+// ...si on supprime la seule propriété existante
+// en revanche, on a bien un objet gelé
+delete uneProp.p;
+Object.isFrozen(uneProp); // true
+
+// Un objet non-extensible et avec une propriété
+// non-accessible en écriture mais toujours configurable
+// n'est pas gelé
+var nonWritable = { e: "plep" };
+Object.preventExtensions(nonWritable);
+
+Object.defineProperty(nonWritable, "e", { writable: false });
+// on la rend non accessible en écriture
+
+Object.isFrozen(nonWritable); // false
+
+// Si on rend la propriété non-configurable,
+// l'objet devient gelé
+
+Object.defineProperty(nonWritable, "e", { configurable: false });
+// on la rend non-configurable
+
+Object.isFrozen(nonWritable) === true);
+
+// Un objet non-extensible avec une propriété non-configurable
+// mais accessible en écriture n'est pas gelé
+var nonConfigurable = { release: "the kraken!" };
+Object.preventExtensions(nonConfigurable);
+Object.defineProperty(nonConfigurable, "release", { configurable: false });
+Object.isFrozen(nonConfigurable); // false
+
+// Si cette propriété devient non accessible
+// en écriture, l'objet est gelé
+Object.defineProperty(nonConfigurable, "release", { writable: false });
+Object.isFrozen(nonConfigurable); // true
+
+// Un objet non-extensible avec un accesseur
+// configurable n'est pas gelé
+var accesseur = { get manger() { return "miam"; } };
+Object.preventExtensions(accesseur);
+Object.isFrozen(accesseur); // false
+
+// ...si on rend la propriété non-configurable,
+// l'objet est gelé.
+Object.defineProperty(accesseur, "manger", { configurable: false });
+Object.isFrozen(accesseur); // true
+
+// La façon la plus simple est d'utiliser la
+// méthode Object.freeze
+var gelé = { 1: 81 };
+Object.isFrozen(gelé); // false
+Object.freeze(gelé);
+Object.isFrozen(gelé); // true
+
+// Par définition, un objet gelé est non-extensible.
+Object.isExtensible(gelé); // false
+
+// Par définition, un objet gelé est scellé.
+Object.isSealed(gelé); // true
+```
+
+## Notes
+
+Pour ES5, si l'argument passé à la méthode n'est pas un objet (mais est d'un autre type primitif), cela entraînera une exception {{jsxref("TypeError")}}. Pour ES2015, un argument qui n'est pas un objet sera traité comme s'il était un objet gelé et la méthode renverra `true`.
+
+```js
+Object.isFrozen(1);
+// TypeError: 1 n'est pas un objet (code ES5)
+
+Object.isFrozen(1);
+// true                            (code ES2015)
+```
+
+## Spécifications
+
+| Spécification                                                                            | État                         | Commentaires                                           |
+| ---------------------------------------------------------------------------------------- | ---------------------------- | ------------------------------------------------------ |
+| {{SpecName('ES5.1', '#sec-15.2.3.12', 'Object.isFrozen')}}             | {{Spec2('ES5.1')}}     | Définition initiale. Implémentée par JavaScript 1.8.5. |
+| {{SpecName('ES6', '#sec-object.isfrozen', 'Object.isFrozen')}}     | {{Spec2('ES6')}}         |                                                        |
+| {{SpecName('ESDraft', '#sec-object.isfrozen', 'Object.isFrozen')}} | {{Spec2('ESDraft')}} |                                                        |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Object.isFrozen")}}
+
+## Voir aussi
+
+- {{jsxref("Object.freeze()")}}
+- {{jsxref("Object.preventExtensions()")}}
+- {{jsxref("Object.isExtensible()")}}
+- {{jsxref("Object.seal()")}}
+- {{jsxref("Object.isSealed()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/object/isprototypeof/index.html b/files/fr/web/javascript/reference/global_objects/object/isprototypeof/index.html
deleted file mode 100644
index 1ea7916982..0000000000
--- a/files/fr/web/javascript/reference/global_objects/object/isprototypeof/index.html
+++ /dev/null
@@ -1,121 +0,0 @@
----
-title: Object.prototype.isPrototypeOf()
-slug: Web/JavaScript/Reference/Global_Objects/Object/isPrototypeOf
-tags:
-  - JavaScript
-  - Méthode
-  - Object
-  - Prototype
-  - Reference
-  - isPrototype
-translation_of: Web/JavaScript/Reference/Global_Objects/Object/isPrototypeOf
-original_slug: Web/JavaScript/Reference/Objets_globaux/Object/isPrototypeOf
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <code><strong>isPrototypeOf()</strong></code> permet de tester si un objet existe dans la chaîne de prototypes d'un autre objet.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/object-prototype-isprototypeof.html")}}</div>
-
-<div class="note">
-<p><strong>Note :</strong> <code>isPrototypeOf()</code> est différent de l'opérateur {{jsxref("Opérateurs/instanceof", "instanceof")}}. Dans l'expression "<code>object instanceof AFunction</code>", on compare la chaîne de prototypes d'<code>object</code> avec <code>AFunction.prototype</code> et non avec <code>AFunction</code>.</p>
-</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>prototypeObj</var>.isPrototypeOf(<var>objet</var>)</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>objet</code></dt>
- <dd>L'objet dont la chaîne de prototypes sera parcourue.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Un {{jsxref("Boolean")}} indiquant si l'objet appelant se trouve dans sa chaîne de prototypes de l'objet indiqué.</p>
-
-<h3 id="Erreurs_déclenchées">Erreurs déclenchées</h3>
-
-<dl>
- <dt>{{jsxref("TypeError")}}</dt>
- <dd>Une exception {{jsxref("TypeError")}} est déclenchée si <code>prototypeObj</code> est <code>undefined</code> ou <code>null</code>.</dd>
-</dl>
-
-<h2 id="Description">Description</h2>
-
-<p>La méthode isPrototypeOf () vous permet de vérifier si un objet existe ou non dans la chaîne de prototypes d'un autre objet.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<p>Cet exemple montre que <code>Bidule.prototype</code>, <code>Truc.prototype</code>, <code>Machin.prototype</code> et <code>Object.prototype</code> font bien partie de la chaîne de prototype pour l'objet <code>bidule</code> :</p>
-
-<pre class="brush: js">function Machin() {}
-function Truc() {}
-function Bidule() {}
-
-Truc.prototype = Object.create(Machin.prototype);
-Bidule.prototype = Object.create(Truc.prototype);
-
-var bidule = new Bidule();
-
-console.log(Bidule.prototype.isPrototypeOf(bidule)); // true
-console.log(Truc.prototype.isPrototypeOf(bidule)); // true
-console.log(Machin.prototype.isPrototypeOf(bidule)); // true
-console.log(Object.prototype.isPrototypeOf(bidule)); // true
-</pre>
-
-<p>La méthode <code>isPrototypeOf()</code>, avec l'opérateur {{jsxref("Operators/instanceof", "instanceof")}} en particulier, s'avère particulièrement utile si vous avez du code qui ne peut fonctionner que lorsqu'il traite des objets descendant d'une chaîne de prototypes donnée, par ex., pour garantir que certaines méthodes ou propriétés seront présentes dans cet objet.</p>
-
-<p>Par exemple, vérifier que <code>bidule</code> descend bien de <code>Machin.prototype</code> :</p>
-
-<pre class="brush: js">if (Toto.prototype.isPrototypeOf(bidule)) {
-  // effectuer quelque chose de sûr
-}
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES3')}}</td>
-   <td>{{Spec2('ES3')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-15.2.4.5', 'Object.prototype.hasOwnProperty')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-object.prototype.hasownproperty', 'Object.prototype.hasOwnProperty')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-object.prototype.hasownproperty', 'Object.prototype.hasOwnProperty')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Object.isPrototypeOf")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Opérateurs/instanceof", "instanceof")}}</li>
- <li>{{jsxref("Object.getPrototypeOf()")}}</li>
- <li>{{jsxref("Object.setPrototypeOf()")}}</li>
- <li>{{jsxref("Object.prototype.proto","Object.prototype.__proto__")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/object/isprototypeof/index.md b/files/fr/web/javascript/reference/global_objects/object/isprototypeof/index.md
new file mode 100644
index 0000000000..0ddea97552
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/object/isprototypeof/index.md
@@ -0,0 +1,92 @@
+---
+title: Object.prototype.isPrototypeOf()
+slug: Web/JavaScript/Reference/Global_Objects/Object/isPrototypeOf
+tags:
+  - JavaScript
+  - Méthode
+  - Object
+  - Prototype
+  - Reference
+  - isPrototype
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/isPrototypeOf
+original_slug: Web/JavaScript/Reference/Objets_globaux/Object/isPrototypeOf
+---
+{{JSRef}}
+
+La méthode **`isPrototypeOf()`** permet de tester si un objet existe dans la chaîne de prototypes d'un autre objet.
+
+{{EmbedInteractiveExample("pages/js/object-prototype-isprototypeof.html")}}
+
+> **Note :** `isPrototypeOf()` est différent de l'opérateur {{jsxref("Opérateurs/instanceof", "instanceof")}}. Dans l'expression "`object instanceof AFunction`", on compare la chaîne de prototypes d'`object` avec `AFunction.prototype` et non avec `AFunction`.
+
+## Syntaxe
+
+    prototypeObj.isPrototypeOf(objet)
+
+### Paramètres
+
+- `objet`
+  - : L'objet dont la chaîne de prototypes sera parcourue.
+
+### Valeur de retour
+
+Un {{jsxref("Boolean")}} indiquant si l'objet appelant se trouve dans sa chaîne de prototypes de l'objet indiqué.
+
+### Erreurs déclenchées
+
+- {{jsxref("TypeError")}}
+  - : Une exception {{jsxref("TypeError")}} est déclenchée si `prototypeObj` est `undefined` ou `null`.
+
+## Description
+
+La méthode isPrototypeOf () vous permet de vérifier si un objet existe ou non dans la chaîne de prototypes d'un autre objet.
+
+## Exemples
+
+Cet exemple montre que `Bidule.prototype`, `Truc.prototype`, `Machin.prototype` et `Object.prototype` font bien partie de la chaîne de prototype pour l'objet `bidule` :
+
+```js
+function Machin() {}
+function Truc() {}
+function Bidule() {}
+
+Truc.prototype = Object.create(Machin.prototype);
+Bidule.prototype = Object.create(Truc.prototype);
+
+var bidule = new Bidule();
+
+console.log(Bidule.prototype.isPrototypeOf(bidule)); // true
+console.log(Truc.prototype.isPrototypeOf(bidule)); // true
+console.log(Machin.prototype.isPrototypeOf(bidule)); // true
+console.log(Object.prototype.isPrototypeOf(bidule)); // true
+```
+
+La méthode `isPrototypeOf()`, avec l'opérateur {{jsxref("Operators/instanceof", "instanceof")}} en particulier, s'avère particulièrement utile si vous avez du code qui ne peut fonctionner que lorsqu'il traite des objets descendant d'une chaîne de prototypes donnée, par ex., pour garantir que certaines méthodes ou propriétés seront présentes dans cet objet.
+
+Par exemple, vérifier que `bidule` descend bien de `Machin.prototype` :
+
+```js
+if (Toto.prototype.isPrototypeOf(bidule)) {
+  // effectuer quelque chose de sûr
+}
+```
+
+## Spécifications
+
+| Spécification                                                                                                                        | Statut                       | Commentaire          |
+| ------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------- | -------------------- |
+| {{SpecName('ES3')}}                                                                                                             | {{Spec2('ES3')}}         | Définition initiale. |
+| {{SpecName('ES5.1', '#sec-15.2.4.5', 'Object.prototype.hasOwnProperty')}}                                     | {{Spec2('ES5.1')}}     |                      |
+| {{SpecName('ES6', '#sec-object.prototype.hasownproperty', 'Object.prototype.hasOwnProperty')}}         | {{Spec2('ES6')}}         |                      |
+| {{SpecName('ESDraft', '#sec-object.prototype.hasownproperty', 'Object.prototype.hasOwnProperty')}} | {{Spec2('ESDraft')}} |                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Object.isPrototypeOf")}}
+
+## Voir aussi
+
+- {{jsxref("Opérateurs/instanceof", "instanceof")}}
+- {{jsxref("Object.getPrototypeOf()")}}
+- {{jsxref("Object.setPrototypeOf()")}}
+- {{jsxref("Object.prototype.proto","Object.prototype.__proto__")}}
diff --git a/files/fr/web/javascript/reference/global_objects/object/issealed/index.html b/files/fr/web/javascript/reference/global_objects/object/issealed/index.html
deleted file mode 100644
index 01a1062763..0000000000
--- a/files/fr/web/javascript/reference/global_objects/object/issealed/index.html
+++ /dev/null
@@ -1,132 +0,0 @@
----
-title: Object.isSealed()
-slug: Web/JavaScript/Reference/Global_Objects/Object/isSealed
-tags:
-  - ECMAScript 5
-  - JavaScript
-  - JavaScript 1.8.5
-  - Méthode
-  - Object
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Object/isSealed
-original_slug: Web/JavaScript/Reference/Objets_globaux/Object/isSealed
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <code><strong>Object.isSealed()</strong></code> permet de déterminer si un objet est scellé.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/object-issealed.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">Object.isSealed(<var>obj</var>)</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>obj</code></dt>
- <dd>L'objet dont on souhaite savoir s'il est scellé.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Un booléen indiquant si l'objet est scellé ou non.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>Renvoie <code>true</code> si l'objet est scellé, <code>false</code> sinon. Un objet scellé est un objet qui n'est pas {{jsxref("Object.isExtensible", "extensible","",1)}} et dont toutes les propriétés sont non-configurables (on ne peut donc pas les retirer, en revanche on peut avoir un droit de modification).</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<pre class="brush: js">// Par défaut, les objets ne sont pas scellés
-var vide = {};
-Object.isSealed(vide); // false
-
-// Si un objet vide est rendu non-extensible,
-// il est scellé
-Object.preventExtensions(vide);
-Object.isSealed(vide); // true
-
-// Ce qui n'est pas vrai pour un objet non-vide,
-// sauf si toutes ses propriétés sont non-configurables
-var avecPropriétés = { pif: "paf pouf" };
-Object.preventExtensions(avecPropriétés);
-Object.isSealed(avecPropriétés); // false
-
-// Si on rend les propriétés non configurables,
-// l'objet est scellé
-Object.defineProperty(avecPropriétés, "pif", { configurable: false });
-Object.isSealed(avecPropriétés); // true
-
-// La méthode la plus simple est d'utiliser Object.seal.
-var scellé = {};
-Object.seal(scellé);
-Object.isSealed(scellé); // true
-
-// Un objet scellé est, par définition, non-extensible
-Object.isExtensible(scellé); // false
-
-// Un objet scellé peut être gelé mais ce n'est pas
-// nécessaire. gelé signifie que les propriétés ne
-// peuvent pas être modifiées
-Object.isFrozen(scellé); // true
-
-var s2 = Object.seal({ p: 3 });
-Object.isFrozen(s2); // false ("p" est toujours modifiable)
-
-var s3 = Object.seal({ get p() { return 0; } });
-// pour les accesseurs, seule l'accès en
-// configuration est important
-Object.isFrozen(s3); // true </pre>
-
-<h2 id="Notes">Notes</h2>
-
-<p>Pour ES5, si l'argument passé à la méthode n'est pas un objet mais une valeur d'un autre type primitif, cela entraînera une exception {{jsxref("TypeError")}}. Pour ES2015, une valeur qui n'est pas un objet sera traitée comme si c'était un objet scellé et la méthode renverra <code>true</code>.</p>
-
-<pre class="brush: js">Object.isSealed(1);
-// TypeError: 1 is not an object (ES5 code)
-
-Object.isSealed(1);
-// true                          (ES2015 code)
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-15.2.3.11', 'Object.isSealed')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td>Définition initiale. Implémentée avec JavaScript 1.8.5.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-object.issealed', 'Object.isSealed')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-object.issealed', 'Object.isSealed')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Object.isSealed")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Object.seal()")}}</li>
- <li>{{jsxref("Object.preventExtensions()")}}</li>
- <li>{{jsxref("Object.isExtensible()")}}</li>
- <li>{{jsxref("Object.freeze()")}}</li>
- <li>{{jsxref("Object.isFrozen()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/object/issealed/index.md b/files/fr/web/javascript/reference/global_objects/object/issealed/index.md
new file mode 100644
index 0000000000..7ad542cbd6
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/object/issealed/index.md
@@ -0,0 +1,112 @@
+---
+title: Object.isSealed()
+slug: Web/JavaScript/Reference/Global_Objects/Object/isSealed
+tags:
+  - ECMAScript 5
+  - JavaScript
+  - JavaScript 1.8.5
+  - Méthode
+  - Object
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/isSealed
+original_slug: Web/JavaScript/Reference/Objets_globaux/Object/isSealed
+---
+{{JSRef}}
+
+La méthode **`Object.isSealed()`** permet de déterminer si un objet est scellé.
+
+{{EmbedInteractiveExample("pages/js/object-issealed.html")}}
+
+## Syntaxe
+
+    Object.isSealed(obj)
+
+### Paramètres
+
+- `obj`
+  - : L'objet dont on souhaite savoir s'il est scellé.
+
+### Valeur de retour
+
+Un booléen indiquant si l'objet est scellé ou non.
+
+## Description
+
+Renvoie `true` si l'objet est scellé, `false` sinon. Un objet scellé est un objet qui n'est pas {{jsxref("Object.isExtensible", "extensible","",1)}} et dont toutes les propriétés sont non-configurables (on ne peut donc pas les retirer, en revanche on peut avoir un droit de modification).
+
+## Exemples
+
+```js
+// Par défaut, les objets ne sont pas scellés
+var vide = {};
+Object.isSealed(vide); // false
+
+// Si un objet vide est rendu non-extensible,
+// il est scellé
+Object.preventExtensions(vide);
+Object.isSealed(vide); // true
+
+// Ce qui n'est pas vrai pour un objet non-vide,
+// sauf si toutes ses propriétés sont non-configurables
+var avecPropriétés = { pif: "paf pouf" };
+Object.preventExtensions(avecPropriétés);
+Object.isSealed(avecPropriétés); // false
+
+// Si on rend les propriétés non configurables,
+// l'objet est scellé
+Object.defineProperty(avecPropriétés, "pif", { configurable: false });
+Object.isSealed(avecPropriétés); // true
+
+// La méthode la plus simple est d'utiliser Object.seal.
+var scellé = {};
+Object.seal(scellé);
+Object.isSealed(scellé); // true
+
+// Un objet scellé est, par définition, non-extensible
+Object.isExtensible(scellé); // false
+
+// Un objet scellé peut être gelé mais ce n'est pas
+// nécessaire. gelé signifie que les propriétés ne
+// peuvent pas être modifiées
+Object.isFrozen(scellé); // true
+
+var s2 = Object.seal({ p: 3 });
+Object.isFrozen(s2); // false ("p" est toujours modifiable)
+
+var s3 = Object.seal({ get p() { return 0; } });
+// pour les accesseurs, seule l'accès en
+// configuration est important
+Object.isFrozen(s3); // true 
+```
+
+## Notes
+
+Pour ES5, si l'argument passé à la méthode n'est pas un objet mais une valeur d'un autre type primitif, cela entraînera une exception {{jsxref("TypeError")}}. Pour ES2015, une valeur qui n'est pas un objet sera traitée comme si c'était un objet scellé et la méthode renverra `true`.
+
+```js
+Object.isSealed(1);
+// TypeError: 1 is not an object (ES5 code)
+
+Object.isSealed(1);
+// true                          (ES2015 code)
+```
+
+## Spécifications
+
+| Spécification                                                                            | État                         | Commentaires                                            |
+| ---------------------------------------------------------------------------------------- | ---------------------------- | ------------------------------------------------------- |
+| {{SpecName('ES5.1', '#sec-15.2.3.11', 'Object.isSealed')}}             | {{Spec2('ES5.1')}}     | Définition initiale. Implémentée avec JavaScript 1.8.5. |
+| {{SpecName('ES6', '#sec-object.issealed', 'Object.isSealed')}}     | {{Spec2('ES6')}}         |                                                         |
+| {{SpecName('ESDraft', '#sec-object.issealed', 'Object.isSealed')}} | {{Spec2('ESDraft')}} |                                                         |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Object.isSealed")}}
+
+## Voir aussi
+
+- {{jsxref("Object.seal()")}}
+- {{jsxref("Object.preventExtensions()")}}
+- {{jsxref("Object.isExtensible()")}}
+- {{jsxref("Object.freeze()")}}
+- {{jsxref("Object.isFrozen()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/object/keys/index.html b/files/fr/web/javascript/reference/global_objects/object/keys/index.html
deleted file mode 100644
index 363b079f16..0000000000
--- a/files/fr/web/javascript/reference/global_objects/object/keys/index.html
+++ /dev/null
@@ -1,124 +0,0 @@
----
-title: Object.keys()
-slug: Web/JavaScript/Reference/Global_Objects/Object/keys
-tags:
-  - ECMAScript 5
-  - JavaScript
-  - JavaScript 1.8.5
-  - Méthode
-  - Object
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Object/keys
-original_slug: Web/JavaScript/Reference/Objets_globaux/Object/keys
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <code><strong>Object.keys()</strong></code> renvoie un tableau contenant les noms des propriétés propres à un objet (qui ne sont pas héritées via la chaîne de prototypes) et qui sont énumérables. L'ordre de ce tableau est le même que celui obtenu par une boucle {{jsxref("Instructions/for...in","for...in")}} (à la différence qu'une boucle for-in liste également les propriétés héritées).</p>
-
-<div>{{EmbedInteractiveExample("pages/js/object-keys.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">Object.keys(<var>obj</var>)</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>obj</code></dt>
- <dd>L'objet dont on souhaite lister les propriétés propres et énumérables.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Un tableau de chaînes de caractères qui sont les noms des propriétés énumérables de l'objet passé en argument.</p>
-
-<h2 id="Description">Description</h2>
-
-<p><code>Object.keys()</code> renvoie un tableau dont les éléments sont les chaînes de caractères des noms des propriétés propres et énumérables d<code>'obj</code>. L'ordre des propriétés obtenu est le même que celui obtenu lorsqu'on boucle manuellement sur les propriétés de l'objet.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<pre class="brush: js">var arr = ["a", "b", "c"];
-console.log(Object.keys(arr));
-// affichera ['0', '1', '2']
-
-// un objet semblable à un tableau
-var obj = { 0 : "a", 1 : "b", 2 : "c"};
-console.log(Object.keys(obj));
-// affichera ['0', '1', '2']
-
-// un objet semblable à un tableau avec
-// un ordre de clé aléatoire
-var an_obj = { 100: "a", 2: "b", 7: "c"};
-console.log(Object.keys(an_obj));
-// affichera ['2', '7', '100']
-
-// getToto est une propriété non énumérable
-var monObjet = Object.create({}, {
-                                 getToto : {
-                                            value : function () {
-                                              return this.toto }
-                                           }
-                                  });
-monObjet.toto = 1;
-
-console.log(Object.keys(monObjet));
-// affichera ['toto']
-</pre>
-
-<p>Si on souhaite lister toutes les propriétés, y compris celles qui ne sont pas énumérables, on pourra utiliser {{jsxref("Object.getOwnPropertyNames()")}}.</p>
-
-<h2 id="Notes">Notes</h2>
-
-<p>Pour ES5, si l'argument passé à la méthode n'est pas un objet mais une valeur d'un autre type primitif, cela entraînera une exception {{jsxref("TypeError")}}. Pour ES2015 (ES6), un argument qui n'est pas un objet sera d'abord converti en objet.</p>
-
-<pre class="brush: js">Object.keys("toto");
-// TypeError: "toto" n'est pas un objet (code ES5)
-
-Object.keys("toto");
-// ["0", "1", "2", "3"]                   (code ES2015)</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-15.2.3.14', 'Object.keys')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td>Définition initiale.<br>
-    Implémentée avec JavaScript 1.8.5</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-object.keys', 'Object.keys')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-object.keys', 'Object.keys')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Object.keys")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/JavaScript/Caractère_énumérable_des_propriétés_et_rattachement">Énumérabilité et possession des propriétés</a></li>
- <li>{{jsxref("Object.prototype.propertyIsEnumerable()")}}</li>
- <li>{{jsxref("Object.create()")}}</li>
- <li>{{jsxref("Object.getOwnPropertyNames()")}}</li>
- <li>{{jsxref("Object.values()")}}</li>
- <li>{{jsxref("Object.entries()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/object/keys/index.md b/files/fr/web/javascript/reference/global_objects/object/keys/index.md
new file mode 100644
index 0000000000..6837c5eec4
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/object/keys/index.md
@@ -0,0 +1,101 @@
+---
+title: Object.keys()
+slug: Web/JavaScript/Reference/Global_Objects/Object/keys
+tags:
+  - ECMAScript 5
+  - JavaScript
+  - JavaScript 1.8.5
+  - Méthode
+  - Object
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/keys
+original_slug: Web/JavaScript/Reference/Objets_globaux/Object/keys
+---
+{{JSRef}}
+
+La méthode **`Object.keys()`** renvoie un tableau contenant les noms des propriétés propres à un objet (qui ne sont pas héritées via la chaîne de prototypes) et qui sont énumérables. L'ordre de ce tableau est le même que celui obtenu par une boucle {{jsxref("Instructions/for...in","for...in")}} (à la différence qu'une boucle for-in liste également les propriétés héritées).
+
+{{EmbedInteractiveExample("pages/js/object-keys.html")}}
+
+## Syntaxe
+
+    Object.keys(obj)
+
+### Paramètres
+
+- `obj`
+  - : L'objet dont on souhaite lister les propriétés propres et énumérables.
+
+### Valeur de retour
+
+Un tableau de chaînes de caractères qui sont les noms des propriétés énumérables de l'objet passé en argument.
+
+## Description
+
+`Object.keys()` renvoie un tableau dont les éléments sont les chaînes de caractères des noms des propriétés propres et énumérables d`'obj`. L'ordre des propriétés obtenu est le même que celui obtenu lorsqu'on boucle manuellement sur les propriétés de l'objet.
+
+## Exemples
+
+```js
+var arr = ["a", "b", "c"];
+console.log(Object.keys(arr));
+// affichera ['0', '1', '2']
+
+// un objet semblable à un tableau
+var obj = { 0 : "a", 1 : "b", 2 : "c"};
+console.log(Object.keys(obj));
+// affichera ['0', '1', '2']
+
+// un objet semblable à un tableau avec
+// un ordre de clé aléatoire
+var an_obj = { 100: "a", 2: "b", 7: "c"};
+console.log(Object.keys(an_obj));
+// affichera ['2', '7', '100']
+
+// getToto est une propriété non énumérable
+var monObjet = Object.create({}, {
+                                 getToto : {
+                                            value : function () {
+                                              return this.toto }
+                                           }
+                                  });
+monObjet.toto = 1;
+
+console.log(Object.keys(monObjet));
+// affichera ['toto']
+```
+
+Si on souhaite lister toutes les propriétés, y compris celles qui ne sont pas énumérables, on pourra utiliser {{jsxref("Object.getOwnPropertyNames()")}}.
+
+## Notes
+
+Pour ES5, si l'argument passé à la méthode n'est pas un objet mais une valeur d'un autre type primitif, cela entraînera une exception {{jsxref("TypeError")}}. Pour ES2015 (ES6), un argument qui n'est pas un objet sera d'abord converti en objet.
+
+```js
+Object.keys("toto");
+// TypeError: "toto" n'est pas un objet (code ES5)
+
+Object.keys("toto");
+// ["0", "1", "2", "3"]                   (code ES2015)
+```
+
+## Spécifications
+
+| Spécification                                                                | État                         | Commentaires                                           |
+| ---------------------------------------------------------------------------- | ---------------------------- | ------------------------------------------------------ |
+| {{SpecName('ES5.1', '#sec-15.2.3.14', 'Object.keys')}}     | {{Spec2('ES5.1')}}     | Définition initiale. Implémentée avec JavaScript 1.8.5 |
+| {{SpecName('ES2015', '#sec-object.keys', 'Object.keys')}} | {{Spec2('ES2015')}}     |                                                        |
+| {{SpecName('ESDraft', '#sec-object.keys', 'Object.keys')}} | {{Spec2('ESDraft')}} |                                                        |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Object.keys")}}
+
+## Voir aussi
+
+- [Énumérabilité et possession des propriétés](/fr/docs/Web/JavaScript/Caractère_énumérable_des_propriétés_et_rattachement)
+- {{jsxref("Object.prototype.propertyIsEnumerable()")}}
+- {{jsxref("Object.create()")}}
+- {{jsxref("Object.getOwnPropertyNames()")}}
+- {{jsxref("Object.values()")}}
+- {{jsxref("Object.entries()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/object/preventextensions/index.html b/files/fr/web/javascript/reference/global_objects/object/preventextensions/index.html
deleted file mode 100644
index 5222f65c40..0000000000
--- a/files/fr/web/javascript/reference/global_objects/object/preventextensions/index.html
+++ /dev/null
@@ -1,136 +0,0 @@
----
-title: Object.preventExtensions()
-slug: Web/JavaScript/Reference/Global_Objects/Object/preventExtensions
-tags:
-  - ECMAScript 5
-  - JavaScript
-  - JavaScript 1.8.5
-  - Méthode
-  - Object
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Object/preventExtensions
-original_slug: Web/JavaScript/Reference/Objets_globaux/Object/preventExtensions
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <code><strong>Object.preventExtensions()</strong></code> permet d'empêcher l'ajout de nouvelles propriétés à un objet (i.e. d'étendre l'objet grâce à de nouvelles caractéristiques).</p>
-
-<div>{{EmbedInteractiveExample("pages/js/object-preventextensions.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">Object.preventExtensions(<var>obj</var>)</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>obj</code></dt>
- <dd>L'objet qu'on souhaite rendre non-extensible.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>L'objet rendu non-extensible.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>Un objet est extensible si on peut lui ajouter de nouvelles propriétés. <code>Object.preventExtensions()</code> marque un objet et le rend non-extensible. Ainsi, cet objet ne pourra avoir d'autres propriétés que celles à l'instant où il a été marqué comme non-extensible. Attention, les propriétés existantes d'un objet non-extensible peuvent toujours être supprimées. Toute tentative d'ajout de nouvelles propriétés à un objet non-extensible échouera, soit de façon silencieuse, soit en levant une exception {{jsxref("TypeError")}} (le plus souvent en {{jsxref("Strict_mode", "mode strict", "", 1)}}).</p>
-
-<p><code>Object.preventExtensions()</code> n'empêche que l'ajout des propriétés directement sur l'objet, il n'empêche pas d'ajouter des propriétés sur le prototype.</p>
-
-<p>Cette méthode rend la propriété interne <code>[[prototype]]</code> de la cible immuable, toute réaffectation de <code>[[prototype]]</code> déclenchera une exception <code>TypeError</code>. Ce comportement est spécifique à la propriété interne <code>[[prototype]]</code>, les autres propriétés de la cible restent modifiables.</p>
-
-<p>Si, grâce à cette méthode, on peut rendre un objet non-extensible, il n'existe aucune méthode pour effectuer l'action inverse (rendre un objet non-extensible à nouveau extensible).</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<pre class="brush: js">// Object.preventExtensions renvoie l'objet
-// non-extensible.
-var obj = {};
-var obj2 = Object.preventExtensions(obj);
-obj === obj2; // true
-
-// Par défaut, les objets sont extensibles.
-var vide = {};
-Object.isExtensible(vide); // true
-
-// ...mais cela peut être modifié.
-Object.preventExtensions(vide);
-Object.isExtensible(vide) === false);
-
-// Object.defineProperty lève une exception
-// lorsqu'on tente d'ajouter de nouvelles propriétés
-var nonExtensible = { removable: true };
-Object.preventExtensions(nonExtensible);
-
-Object.defineProperty(nonExtensible, 'nouvelle', { value: 8675309 });
-/ lève une TypeError
-
-// En mode strict, toute tentative d'ajout
-// lève une exception TypeError
-function échec() {
-  'use strict';
-  nonExtensible.nouvelleProp = 'ÉCHEC'; //
-}
-échec();
-
-// EXTENSION (ne fonctionne que pour les moteurs
-// qui utilisent __proto__ ) :
-// Le prototype (via __proto__) d'un objet non-extensible
-// n'est pas modifiable :
-var fixed = Object.preventExtensions({});
-fixed.__proto__ = { oh: 'hey' }; // lève une TypeError
-</pre>
-
-<h2 id="Notes">Notes</h2>
-
-<p>Pour ES5, si l'argument passé à la méthode n'est pas un objet mais une valeur d'un autre type primitif, cela entraînera une exception {{jsxref("TypeError")}}. Pour ES2015, une valeur qui n'est pas un objet sera traitée comme un objet ordinaire qui n'est pas extensible et la méthode renverra cette valeur.</p>
-
-<pre class="brush: js">Object.preventExtensions(1);
-// TypeError : 1 n'est pas un object (code ES5)
-
-Object.preventExtensions(1);
-// 1                             (code ES2015)
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-15.2.3.10', 'Object.preventExtensions')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td>Définition initiale. Implémentée avec JavaScript 1.8.5.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-object.preventextensions', 'Object.preventExtensions')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-object.preventextensions', 'Object.preventExtensions')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Object.preventExtensions")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Object.isExtensible()")}}</li>
- <li>{{jsxref("Object.seal()")}}</li>
- <li>{{jsxref("Object.isSealed()")}}</li>
- <li>{{jsxref("Object.freeze()")}}</li>
- <li>{{jsxref("Object.isFrozen()")}}</li>
- <li>{{jsxref("Reflect.preventExtensions()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/object/preventextensions/index.md b/files/fr/web/javascript/reference/global_objects/object/preventextensions/index.md
new file mode 100644
index 0000000000..94dd2d20b8
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/object/preventextensions/index.md
@@ -0,0 +1,115 @@
+---
+title: Object.preventExtensions()
+slug: Web/JavaScript/Reference/Global_Objects/Object/preventExtensions
+tags:
+  - ECMAScript 5
+  - JavaScript
+  - JavaScript 1.8.5
+  - Méthode
+  - Object
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/preventExtensions
+original_slug: Web/JavaScript/Reference/Objets_globaux/Object/preventExtensions
+---
+{{JSRef}}
+
+La méthode **`Object.preventExtensions()`** permet d'empêcher l'ajout de nouvelles propriétés à un objet (i.e. d'étendre l'objet grâce à de nouvelles caractéristiques).
+
+{{EmbedInteractiveExample("pages/js/object-preventextensions.html")}}
+
+## Syntaxe
+
+    Object.preventExtensions(obj)
+
+### Paramètres
+
+- `obj`
+  - : L'objet qu'on souhaite rendre non-extensible.
+
+### Valeur de retour
+
+L'objet rendu non-extensible.
+
+## Description
+
+Un objet est extensible si on peut lui ajouter de nouvelles propriétés. `Object.preventExtensions()` marque un objet et le rend non-extensible. Ainsi, cet objet ne pourra avoir d'autres propriétés que celles à l'instant où il a été marqué comme non-extensible. Attention, les propriétés existantes d'un objet non-extensible peuvent toujours être supprimées. Toute tentative d'ajout de nouvelles propriétés à un objet non-extensible échouera, soit de façon silencieuse, soit en levant une exception {{jsxref("TypeError")}} (le plus souvent en {{jsxref("Strict_mode", "mode strict", "", 1)}}).
+
+`Object.preventExtensions()` n'empêche que l'ajout des propriétés directement sur l'objet, il n'empêche pas d'ajouter des propriétés sur le prototype.
+
+Cette méthode rend la propriété interne `[[prototype]]` de la cible immuable, toute réaffectation de `[[prototype]]` déclenchera une exception `TypeError`. Ce comportement est spécifique à la propriété interne `[[prototype]]`, les autres propriétés de la cible restent modifiables.
+
+Si, grâce à cette méthode, on peut rendre un objet non-extensible, il n'existe aucune méthode pour effectuer l'action inverse (rendre un objet non-extensible à nouveau extensible).
+
+## Exemples
+
+```js
+// Object.preventExtensions renvoie l'objet
+// non-extensible.
+var obj = {};
+var obj2 = Object.preventExtensions(obj);
+obj === obj2; // true
+
+// Par défaut, les objets sont extensibles.
+var vide = {};
+Object.isExtensible(vide); // true
+
+// ...mais cela peut être modifié.
+Object.preventExtensions(vide);
+Object.isExtensible(vide) === false);
+
+// Object.defineProperty lève une exception
+// lorsqu'on tente d'ajouter de nouvelles propriétés
+var nonExtensible = { removable: true };
+Object.preventExtensions(nonExtensible);
+
+Object.defineProperty(nonExtensible, 'nouvelle', { value: 8675309 });
+/ lève une TypeError
+
+// En mode strict, toute tentative d'ajout
+// lève une exception TypeError
+function échec() {
+  'use strict';
+  nonExtensible.nouvelleProp = 'ÉCHEC'; //
+}
+échec();
+
+// EXTENSION (ne fonctionne que pour les moteurs
+// qui utilisent __proto__ ) :
+// Le prototype (via __proto__) d'un objet non-extensible
+// n'est pas modifiable :
+var fixed = Object.preventExtensions({});
+fixed.__proto__ = { oh: 'hey' }; // lève une TypeError
+```
+
+## Notes
+
+Pour ES5, si l'argument passé à la méthode n'est pas un objet mais une valeur d'un autre type primitif, cela entraînera une exception {{jsxref("TypeError")}}. Pour ES2015, une valeur qui n'est pas un objet sera traitée comme un objet ordinaire qui n'est pas extensible et la méthode renverra cette valeur.
+
+```js
+Object.preventExtensions(1);
+// TypeError : 1 n'est pas un object (code ES5)
+
+Object.preventExtensions(1);
+// 1                             (code ES2015)
+```
+
+## Spécifications
+
+| Spécification                                                                                                    | État                         | Commentaires                                            |
+| ---------------------------------------------------------------------------------------------------------------- | ---------------------------- | ------------------------------------------------------- |
+| {{SpecName('ES5.1', '#sec-15.2.3.10', 'Object.preventExtensions')}}                         | {{Spec2('ES5.1')}}     | Définition initiale. Implémentée avec JavaScript 1.8.5. |
+| {{SpecName('ES6', '#sec-object.preventextensions', 'Object.preventExtensions')}}     | {{Spec2('ES6')}}         |                                                         |
+| {{SpecName('ESDraft', '#sec-object.preventextensions', 'Object.preventExtensions')}} | {{Spec2('ESDraft')}} |                                                         |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Object.preventExtensions")}}
+
+## Voir aussi
+
+- {{jsxref("Object.isExtensible()")}}
+- {{jsxref("Object.seal()")}}
+- {{jsxref("Object.isSealed()")}}
+- {{jsxref("Object.freeze()")}}
+- {{jsxref("Object.isFrozen()")}}
+- {{jsxref("Reflect.preventExtensions()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/object/propertyisenumerable/index.html b/files/fr/web/javascript/reference/global_objects/object/propertyisenumerable/index.html
deleted file mode 100644
index 39e1146c13..0000000000
--- a/files/fr/web/javascript/reference/global_objects/object/propertyisenumerable/index.html
+++ /dev/null
@@ -1,145 +0,0 @@
----
-title: Object.prototype.propertyIsEnumerable()
-slug: Web/JavaScript/Reference/Global_Objects/Object/propertyIsEnumerable
-tags:
-  - JavaScript
-  - Méthode
-  - Object
-  - Prototype
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Object/propertyIsEnumerable
-original_slug: Web/JavaScript/Reference/Objets_globaux/Object/propertyIsEnumerable
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <code><strong>propertyIsEnumerable()</strong></code> renvoie un booléen qui indique si la propriété donnée est énumérable.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/object-prototype-propertyisenumerable.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>obj</var>.propertyIsEnumerable(<var>prop</var>)</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>prop</code></dt>
- <dd>Le nom de la propriété dont on souhaite savoir si elle est énumérable ou non.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Un booléen qui indique si la propriété passée en argument est énumérable.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>Chaque objet possède une méthode <code>propertyIsEnumerable</code>. Cette méthode est utilisée afin de savoir s'il est possible d'énumérer la propriété donnée au moyen d'une boucle {{jsxref("Instructions/for...in", "for...in")}}. Cela concerne uniquement les propriétés propres à l'objet (celles qui ne sont pas héritées via la chaîne de prototypes). Si un objet ne possède pas la propriété, cette méthode renverra <code>false</code>.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Utiliser_propertyIsEnumerable">Utiliser <code>propertyIsEnumerable</code></h3>
-
-<p>Dans l'exemple qui suit, on illustre comment utiliser <code>propertyIsEnumerable</code> sur les objets et tableaux :</p>
-
-<pre class="brush: js">var o = {};
-var a = [];
-o.prop = 'est énumérable';
-a[0] = 'est énumérable';
-
-o.propertyIsEnumerable('prop');   // renvoie true
-a.propertyIsEnumerable(0);        // renvoie true
-</pre>
-
-<h3 id="Objets_natifs_et_objets_définis_par_l'utilisateur">Objets natifs et objets définis par l'utilisateur</h3>
-
-<p>Dans l'exemple ci-dessous, on illustre l'énumérabilité des propriétés des objets natifs et celle des objets tiers, définis dans les scripts :</p>
-
-<pre class="brush: js">var a = ['est énumérable'];
-
-a.propertyIsEnumerable(0);          // renvoie true
-a.propertyIsEnumerable('length');   // renvoie false
-
-Math.propertyIsEnumerable('random');   // renvoie false
-this.propertyIsEnumerable('Math');     // renvoie false
-</pre>
-
-<h3 id="Propriétés_héritées_et_propriétés_propres">Propriétés héritées et propriétés propres</h3>
-
-<pre class="brush: js">var a = [];
-a.propertyIsEnumerable('constructor');         // renvoie false
-
-function premierConstructeur() {
-  this.propriete = 'non énumérable';
-}
-
-premierConstructeur.prototype.premiereMethode = function() {};
-
-function secondConstructeur() {
-  this.methode = function methode() { return 'énumérable'; };
-}
-
-secondConstructeur.prototype = new premierConstructeur;
-secondConstructeur.prototype.constructor = secondConstructeur;
-
-var o = new secondConstructeur();
-o.propArbitraire = 'is enumerable';
-
-o.propertyIsEnumerable('propArbitraire');   // renvoie true
-o.propertyIsEnumerable('méthode');          // renvoie true
-o.propertyIsEnumerable('propriété');        // renvoie false
-
-o.propriete = 'énumérable';
-
-o.propertyIsEnumerable('propriété');        // renvoie true
-
-// Ces instructions renvoient false car propertyIsEnumerable
-// ne prend pas en compte la chaîne de prototypes
-o.propertyIsEnumerable('prototype');   // renvoie false
-o.propertyIsEnumerable('constructor'); // renvoie false
-o.propertyIsEnumerable('premièreMéthode'); // renvoie false
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES3')}}</td>
-   <td>{{Spec2('ES3')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-15.2.4.7', 'Object.prototype.propertyIsEnumerable')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-object.prototype.propertyisenumerable', 'Object.prototype.propertyIsEnumerable')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-object.prototype.propertyisenumerable', 'Object.prototype.propertyIsEnumerable')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Object.propertyIsEnumerable")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/JavaScript/Caractère_énumérable_des_propriétés_et_rattachement">Caractère énumérable et rattachement des propriétés</a></li>
- <li>{{jsxref("Instructions/for...in", "for...in")}}</li>
- <li>{{jsxref("Object.keys()")}}</li>
- <li>{{jsxref("Object.defineProperty()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/object/propertyisenumerable/index.md b/files/fr/web/javascript/reference/global_objects/object/propertyisenumerable/index.md
new file mode 100644
index 0000000000..bd52c6c0ab
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/object/propertyisenumerable/index.md
@@ -0,0 +1,121 @@
+---
+title: Object.prototype.propertyIsEnumerable()
+slug: Web/JavaScript/Reference/Global_Objects/Object/propertyIsEnumerable
+tags:
+  - JavaScript
+  - Méthode
+  - Object
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/propertyIsEnumerable
+original_slug: Web/JavaScript/Reference/Objets_globaux/Object/propertyIsEnumerable
+---
+{{JSRef}}
+
+La méthode **`propertyIsEnumerable()`** renvoie un booléen qui indique si la propriété donnée est énumérable.
+
+{{EmbedInteractiveExample("pages/js/object-prototype-propertyisenumerable.html")}}
+
+## Syntaxe
+
+    obj.propertyIsEnumerable(prop)
+
+### Paramètres
+
+- `prop`
+  - : Le nom de la propriété dont on souhaite savoir si elle est énumérable ou non.
+
+### Valeur de retour
+
+Un booléen qui indique si la propriété passée en argument est énumérable.
+
+## Description
+
+Chaque objet possède une méthode `propertyIsEnumerable`. Cette méthode est utilisée afin de savoir s'il est possible d'énumérer la propriété donnée au moyen d'une boucle {{jsxref("Instructions/for...in", "for...in")}}. Cela concerne uniquement les propriétés propres à l'objet (celles qui ne sont pas héritées via la chaîne de prototypes). Si un objet ne possède pas la propriété, cette méthode renverra `false`.
+
+## Exemples
+
+### Utiliser `propertyIsEnumerable`
+
+Dans l'exemple qui suit, on illustre comment utiliser `propertyIsEnumerable` sur les objets et tableaux :
+
+```js
+var o = {};
+var a = [];
+o.prop = 'est énumérable';
+a[0] = 'est énumérable';
+
+o.propertyIsEnumerable('prop');   // renvoie true
+a.propertyIsEnumerable(0);        // renvoie true
+```
+
+### Objets natifs et objets définis par l'utilisateur
+
+Dans l'exemple ci-dessous, on illustre l'énumérabilité des propriétés des objets natifs et celle des objets tiers, définis dans les scripts :
+
+```js
+var a = ['est énumérable'];
+
+a.propertyIsEnumerable(0);          // renvoie true
+a.propertyIsEnumerable('length');   // renvoie false
+
+Math.propertyIsEnumerable('random');   // renvoie false
+this.propertyIsEnumerable('Math');     // renvoie false
+```
+
+### Propriétés héritées et propriétés propres
+
+```js
+var a = [];
+a.propertyIsEnumerable('constructor');         // renvoie false
+
+function premierConstructeur() {
+  this.propriete = 'non énumérable';
+}
+
+premierConstructeur.prototype.premiereMethode = function() {};
+
+function secondConstructeur() {
+  this.methode = function methode() { return 'énumérable'; };
+}
+
+secondConstructeur.prototype = new premierConstructeur;
+secondConstructeur.prototype.constructor = secondConstructeur;
+
+var o = new secondConstructeur();
+o.propArbitraire = 'is enumerable';
+
+o.propertyIsEnumerable('propArbitraire');   // renvoie true
+o.propertyIsEnumerable('méthode');          // renvoie true
+o.propertyIsEnumerable('propriété');        // renvoie false
+
+o.propriete = 'énumérable';
+
+o.propertyIsEnumerable('propriété');        // renvoie true
+
+// Ces instructions renvoient false car propertyIsEnumerable
+// ne prend pas en compte la chaîne de prototypes
+o.propertyIsEnumerable('prototype');   // renvoie false
+o.propertyIsEnumerable('constructor'); // renvoie false
+o.propertyIsEnumerable('premièreMéthode'); // renvoie false
+```
+
+## Spécifications
+
+| Spécification                                                                                                                                        | État                         | Commentaires         |
+| ---------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName('ES3')}}                                                                                                                             | {{Spec2('ES3')}}         | Définition initiale. |
+| {{SpecName('ES5.1', '#sec-15.2.4.7', 'Object.prototype.propertyIsEnumerable')}}                                             | {{Spec2('ES5.1')}}     |                      |
+| {{SpecName('ES6', '#sec-object.prototype.propertyisenumerable', 'Object.prototype.propertyIsEnumerable')}}         | {{Spec2('ES6')}}         |                      |
+| {{SpecName('ESDraft', '#sec-object.prototype.propertyisenumerable', 'Object.prototype.propertyIsEnumerable')}} | {{Spec2('ESDraft')}} |                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Object.propertyIsEnumerable")}}
+
+## Voir aussi
+
+- [Caractère énumérable et rattachement des propriétés](/fr/docs/Web/JavaScript/Caractère_énumérable_des_propriétés_et_rattachement)
+- {{jsxref("Instructions/for...in", "for...in")}}
+- {{jsxref("Object.keys()")}}
+- {{jsxref("Object.defineProperty()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/object/proto/index.html b/files/fr/web/javascript/reference/global_objects/object/proto/index.html
deleted file mode 100644
index 6f754d2c34..0000000000
--- a/files/fr/web/javascript/reference/global_objects/object/proto/index.html
+++ /dev/null
@@ -1,161 +0,0 @@
----
-title: Object.prototype.__proto__
-slug: Web/JavaScript/Reference/Global_Objects/Object/proto
-tags:
-  - Deprecated
-  - ECMAScript 2015
-  - JavaScript
-  - Object
-  - Propriété
-  - Prototype
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Object/proto
-original_slug: Web/JavaScript/Reference/Objets_globaux/Object/proto
----
-<div>{{JSRef}}{{Deprecated_header}}</div>
-
-<div class="warning">
-<p><strong>Attention :</strong> Étant donnée la façon dont la plupart des moteurs JavaScript optimisent les performances, modifier le <code>[[Prototype]]</code> d'un objet est une opération lente pour chaque navigateur et moteur JavaScript. Les impacts liés aux performances sur ce point sont vastes et subtiles : ils concernent pas uniquement le temps passé à effectuer <code>obj.__proto__ = ...</code>, mais peuvent concerner n'importe quel code pour n'importe quel objet dont <code>[[Prototype]]</code> a été modifié. Si vous souhaitez obtenir des performances optimales, évitez de modifier le <code>[[Prototype]]</code> d'un objet. À la place, il est conseillé de créer un objet avec le prototype voulu en utilisant {{jsxref("Object.create()")}}.</p>
-</div>
-
-<div class="warning">
-<p><strong>Attention :</strong> Bien que la propriété <code>Object.prototype.__proto__</code> soit déjà supportée dans la plupart des navigateurs à l'heure actuelle, son comportement n'a été standardisé que récemment avec la spécification ECMAScript 2015. Si vous avez besoin d'utiliser cette propriété dans des environnements antérieurs à ES2015, il est recommandé d'utiliser {{jsxref("Object.getPrototypeOf()")}}.</p>
-</div>
-
-<p>La propriété <code>__proto__</code> de {{jsxref("Object.prototype")}} est une propriété accesseur (un couple de fonction avec un accesseur (<em>getter</em>) et un mutateur (<em>setter</em>)) qui expose le <code>[[Prototype]]</code> interne (qui est soit un objet, soit {{jsxref("null")}}) de l'objet courant.</p>
-
-<p>L'utilisation de <code>__proto__</code> est sujet à controverse. Elle a été déconseillée par plusieurs personnes et n'avait jamais été incluse dans la spécification ECMAScript. Cependant, de nombreux navigateurs ont décidé de l'implémenter. À l'heure actuelle, la propriété <code>__proto__</code> a été standardisée avec la spécification ECMAScript 2015 et sera officiellement supportée à l'avenir. Une alternative à cette propriété peut être l'utilisation des méthodes {{jsxref("Object.getPrototypeOf")}}/{{jsxref("Reflect.getPrototypeOf")}} et {{jsxref("Object.setPrototypeOf")}}/{{jsxref("Reflect.setPrototypeOf")}}. Cependant, modifier le <code>[[Prototype]]</code> d'un objet est toujours une opération lente qui doit être évitée le plus possible pour des raisons de performances.</p>
-
-<p>La propriété <code>__proto__</code> peut également être utilisée avec un littéral objet afin de définir le <code>[[Prototype]]</code> lors de la construction (ce qui en fait une alternative à {{jsxref("Object.create()")}}. Voir la page sur {{jsxref("Opérateurs/Initialisateur_objet","les initialisateurs d'objet","",1)}}.</p>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">var proto = <var>obj</var>.__proto__;</pre>
-
-<div class="note">
-<p><strong>Note :</strong> le nom de la propriété est composé de deux tirets bas, suivis de « proto », suivis par deux tirets bas (<em>underscores</em>)</p>
-</div>
-
-<h2 id="Description">Description</h2>
-
-<p>L'accesseur <code>__proto__</code> expose la valeur du <code>[[Prototype]]</code> interne d'un objet.</p>
-
-<ul>
- <li>Pour les objets créés via un littéral objet, cette valeur est {{jsxref("Object.prototype")}}.</li>
- <li>Pour les objet créés via un littéral de tableau, cette valeur est {{jsxref("Array.prototype")}}.</li>
- <li>Pour les fonctions, cette valeur est {{jsxref("Function.prototype")}}.</li>
- <li>Pour les objets créés en utilisant <code>new fun</code>, avec <code>fun</code> un des constructeurs natif de fonctions, fournis par JavaScript ({{jsxref("Array")}}, {{jsxref("Boolean")}}, {{jsxref("Date")}}, {{jsxref("Number")}}, {{jsxref("Object")}}, {{jsxref("String")}}, etc.), cette valeur est <code>fun.prototype</code>.</li>
- <li>Pour les objets créés en utilisant <code>new fun</code>, avec <code>fun</code> une function definie dans un script, cette valeur est la valeur de <code>fun.prototype</code> au moment où <code>new fun</code> est évaluée. (Ainsi, si on affecte une nouvelle valeur à <code>fun.prototype</code>, les instances crées précédemment conserveront leur <code>[[Prototype]]</code>, les objets créés par la suite bénéficieront de la nouvelle valeur pour leur <code>[[Prototype]]</code>.)</li>
-</ul>
-
-<p>Le mutateur <code>__proto__</code> permet de changer le <code>[[Prototype]]</code> d'un objet. Cet objet doit être extensible selon {{jsxref("Object.isExtensible")}}, si ce n'est pas le cas, une exception {{jsxref("TypeError")}} sera renvoyée. La valeur fournie pour le nouveau prototype doit être un objet ou {{jsxref("null")}}. Toute autre valeur entraînera un échec silencieux.</p>
-
-<p>Pour plus d'éléments sur le fonctionnement de l'héritage et des prototypes, voir la page sur <a href="/fr/docs/Web/JavaScript/Guide/Inheritance_and_the_prototype_chain">l'héritage et les chaînes de prototypes</a>.</p>
-
-<p>Le propriété <code>__proto__</code> n'est qu'une propriété accesseur (composée d'une fonction accesseur (<em>getter</em>) et d'une fonction mutateur (<em>setter</em>)) pour {{jsxref("Object.prototype")}}. Si l'accès à <code>__proto__</code> consulte {{jsxref("Object.prototype")}}, on trouvera la propriété. Un accesseur qui ne consulte pas {{jsxref("Object.prototype")}} ne pourra pas trouver le prototype. Si une propriété <code>__proto__</code> est trouvée avant que {{jsxref("Object.prototype")}} ne soit consulté, cette propriété « cachera » {{jsxref("Object.prototype")}}.</p>
-
-<pre class="brush: js">var aucunProto = Object.create(null);
-
-console.log(typeof aucunProto.__proto__); // undefined
-console.log(Object.getPrototypeOf(aucunProto)); // null
-
-aucunProto.__proto__ = 17;
-
-console.log(aucunProto.__proto__); // 17
-console.log(Object.getPrototypeOf(aucunProto)); // null
-
-var protoCaché = {};
-Object.defineProperty(protoCaché, "__proto__",
-                      { value: 42, writable: true, configurable: true, enumerable: true });
-
-console.log(protoCaché.__proto__); // 42
-console.log(Object.getPrototypeOf(protoCaché) === Object.prototype); // true
-</pre>
-
-<h2 id="Exemples">Exemples</h2>
-
-<p>Dans ce qui suit, on crée un nouvelle instance d'<code>Employé</code> et on teste si <code>__proto__</code> est bien le même objet que le prototype de son constructeur.</p>
-
-<div class="warning">
-<p><strong>Attention :</strong> Les remarques données plus haut sur les atteintes à la performance restent valables pour ces exemples. Ces exemples permettent uniquement d'illustrer le fonctionnement de <code>__proto__</code>, ils ne font pas office de recommandations.</p>
-</div>
-
-<pre class="brush: js">// On déclare une fonction à utiliser comme constructeur
-function Employé() {
-  /* on initialise l'instance */
-}
-
-// On crée une nouvelle instance d'Employé
-var fred = new Employé();
-
-// On teste l'équivalence
-fred.__proto__ === Employé.prototype; // true
-</pre>
-
-<p>À cet instant, <code>fred</code> hérite de <code>Employé</code>. On peut toutefois changer ça en assignant un nouvel objet à <code>fred.__proto__</code> :</p>
-
-<pre class="brush: js">// Assigner un nouvel objet à __proto__
-fred.__proto__ = Object.prototype;
-</pre>
-
-<p><code>fred</code> n'hérite plus de <code>Employé.prototype</code>, mais de <code>Object.prototype</code>. Il perd donc les propriétés héritées de <code>Employé.prototype</code>.</p>
-
-<p>Cela n'est possible que pour les objets {{jsxref("Object.isExtensible", "extensibles","",1)}}. La propriété <code>__proto__</code> d'un objet non-extensible ne peut pas être changée :</p>
-
-<pre class="brush: js">var obj = {};
-Object.preventExtensions(obj);
-
-obj.__proto__ = {}; // renvoie une exception TypeError
-</pre>
-
-<p>On notera que même la propriété <code>__proto__</code> de <code>Object.prototype</code> peut être redéfinie tant que la chaîne de prototypes se termine par <code>null</code> :</p>
-
-<pre class="brush: js">var b = {};
-
-Object.prototype.__proto__ =
-    Object.create(null, //[[Prototype]]
-                  { salut: { value: function () {console.log('salut');}}});
-
-b.salut();</pre>
-
-<p>Si la propriété <code>__proto__</code> de {{jsxref("Object.prototype")}} ne permet pas d'aboutir à {{jsxref("null")}} via la chaîne de prototypes, on a une chaîne cyclique et on doit avoir une exception {{jsxref("TypeError")}} "cyclic __proto__ value".</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-object.prototype.__proto__', 'Object.prototype.__proto__')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td>Incluse dans l'annexe (normative) pour le fonctionnalités additionneles d'ECMAScript pour les navigateurs web (note : la spécification codifie ce qui est déjà présent dans les implémentations).</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-additional-properties-of-the-object.prototype-object', 'Object.prototype.__proto__')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Object.proto")}}</p>
-
-<h2 id="Notes_de_compatibilité">Notes de compatibilité</h2>
-
-<p>Bien que la spécification ES2015 rende le support de <code>__proto__</code> nécessaire pour les navigateurs web, elle n'est pas obligatoire pour les autres environnements (bien que ce soit conseillé vu le caractère normatif de l'annexe). Si votre code doit être compatible avec un environnement qui n'est pas un navigateur web, il est recommandé d'utiliser {{jsxref("Object.getPrototypeOf()")}} et {{jsxref("Object.setPrototypeOf()")}} à la place.</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Object.prototype.isPrototypeOf()")}}</li>
- <li>{{jsxref("Object.getPrototypeOf()")}}</li>
- <li>{{jsxref("Object.setPrototypeOf()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/object/proto/index.md b/files/fr/web/javascript/reference/global_objects/object/proto/index.md
new file mode 100644
index 0000000000..5231e76d49
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/object/proto/index.md
@@ -0,0 +1,138 @@
+---
+title: Object.prototype.__proto__
+slug: Web/JavaScript/Reference/Global_Objects/Object/proto
+tags:
+  - Deprecated
+  - ECMAScript 2015
+  - JavaScript
+  - Object
+  - Propriété
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/proto
+original_slug: Web/JavaScript/Reference/Objets_globaux/Object/proto
+---
+{{JSRef}}{{Deprecated_header}}
+
+> **Attention :** Étant donnée la façon dont la plupart des moteurs JavaScript optimisent les performances, modifier le `[[Prototype]]` d'un objet est une opération lente pour chaque navigateur et moteur JavaScript. Les impacts liés aux performances sur ce point sont vastes et subtiles : ils concernent pas uniquement le temps passé à effectuer `obj.__proto__ = ...`, mais peuvent concerner n'importe quel code pour n'importe quel objet dont `[[Prototype]]` a été modifié. Si vous souhaitez obtenir des performances optimales, évitez de modifier le `[[Prototype]]` d'un objet. À la place, il est conseillé de créer un objet avec le prototype voulu en utilisant {{jsxref("Object.create()")}}.
+
+> **Attention :** Bien que la propriété `Object.prototype.__proto__` soit déjà supportée dans la plupart des navigateurs à l'heure actuelle, son comportement n'a été standardisé que récemment avec la spécification ECMAScript 2015. Si vous avez besoin d'utiliser cette propriété dans des environnements antérieurs à ES2015, il est recommandé d'utiliser {{jsxref("Object.getPrototypeOf()")}}.
+
+La propriété `__proto__` de {{jsxref("Object.prototype")}} est une propriété accesseur (un couple de fonction avec un accesseur (_getter_) et un mutateur (_setter_)) qui expose le `[[Prototype]]` interne (qui est soit un objet, soit {{jsxref("null")}}) de l'objet courant.
+
+L'utilisation de `__proto__` est sujet à controverse. Elle a été déconseillée par plusieurs personnes et n'avait jamais été incluse dans la spécification ECMAScript. Cependant, de nombreux navigateurs ont décidé de l'implémenter. À l'heure actuelle, la propriété `__proto__` a été standardisée avec la spécification ECMAScript 2015 et sera officiellement supportée à l'avenir. Une alternative à cette propriété peut être l'utilisation des méthodes {{jsxref("Object.getPrototypeOf")}}/{{jsxref("Reflect.getPrototypeOf")}} et {{jsxref("Object.setPrototypeOf")}}/{{jsxref("Reflect.setPrototypeOf")}}. Cependant, modifier le `[[Prototype]]` d'un objet est toujours une opération lente qui doit être évitée le plus possible pour des raisons de performances.
+
+La propriété `__proto__` peut également être utilisée avec un littéral objet afin de définir le `[[Prototype]]` lors de la construction (ce qui en fait une alternative à {{jsxref("Object.create()")}}. Voir la page sur {{jsxref("Opérateurs/Initialisateur_objet","les initialisateurs d'objet","",1)}}.
+
+## Syntaxe
+
+    var proto = obj.__proto__;
+
+> **Note :** le nom de la propriété est composé de deux tirets bas, suivis de « proto », suivis par deux tirets bas (_underscores_)
+
+## Description
+
+L'accesseur `__proto__` expose la valeur du `[[Prototype]]` interne d'un objet.
+
+- Pour les objets créés via un littéral objet, cette valeur est {{jsxref("Object.prototype")}}.
+- Pour les objet créés via un littéral de tableau, cette valeur est {{jsxref("Array.prototype")}}.
+- Pour les fonctions, cette valeur est {{jsxref("Function.prototype")}}.
+- Pour les objets créés en utilisant `new fun`, avec `fun` un des constructeurs natif de fonctions, fournis par JavaScript ({{jsxref("Array")}}, {{jsxref("Boolean")}}, {{jsxref("Date")}}, {{jsxref("Number")}}, {{jsxref("Object")}}, {{jsxref("String")}}, etc.), cette valeur est `fun.prototype`.
+- Pour les objets créés en utilisant `new fun`, avec `fun` une function definie dans un script, cette valeur est la valeur de `fun.prototype` au moment où `new fun` est évaluée. (Ainsi, si on affecte une nouvelle valeur à `fun.prototype`, les instances crées précédemment conserveront leur `[[Prototype]]`, les objets créés par la suite bénéficieront de la nouvelle valeur pour leur `[[Prototype]]`.)
+
+Le mutateur `__proto__` permet de changer le `[[Prototype]]` d'un objet. Cet objet doit être extensible selon {{jsxref("Object.isExtensible")}}, si ce n'est pas le cas, une exception {{jsxref("TypeError")}} sera renvoyée. La valeur fournie pour le nouveau prototype doit être un objet ou {{jsxref("null")}}. Toute autre valeur entraînera un échec silencieux.
+
+Pour plus d'éléments sur le fonctionnement de l'héritage et des prototypes, voir la page sur [l'héritage et les chaînes de prototypes](/fr/docs/Web/JavaScript/Guide/Inheritance_and_the_prototype_chain).
+
+Le propriété `__proto__` n'est qu'une propriété accesseur (composée d'une fonction accesseur (_getter_) et d'une fonction mutateur (_setter_)) pour {{jsxref("Object.prototype")}}. Si l'accès à `__proto__` consulte {{jsxref("Object.prototype")}}, on trouvera la propriété. Un accesseur qui ne consulte pas {{jsxref("Object.prototype")}} ne pourra pas trouver le prototype. Si une propriété `__proto__` est trouvée avant que {{jsxref("Object.prototype")}} ne soit consulté, cette propriété « cachera » {{jsxref("Object.prototype")}}.
+
+```js
+var aucunProto = Object.create(null);
+
+console.log(typeof aucunProto.__proto__); // undefined
+console.log(Object.getPrototypeOf(aucunProto)); // null
+
+aucunProto.__proto__ = 17;
+
+console.log(aucunProto.__proto__); // 17
+console.log(Object.getPrototypeOf(aucunProto)); // null
+
+var protoCaché = {};
+Object.defineProperty(protoCaché, "__proto__",
+                      { value: 42, writable: true, configurable: true, enumerable: true });
+
+console.log(protoCaché.__proto__); // 42
+console.log(Object.getPrototypeOf(protoCaché) === Object.prototype); // true
+```
+
+## Exemples
+
+Dans ce qui suit, on crée un nouvelle instance d'`Employé` et on teste si `__proto__` est bien le même objet que le prototype de son constructeur.
+
+> **Attention :** Les remarques données plus haut sur les atteintes à la performance restent valables pour ces exemples. Ces exemples permettent uniquement d'illustrer le fonctionnement de `__proto__`, ils ne font pas office de recommandations.
+
+```js
+// On déclare une fonction à utiliser comme constructeur
+function Employé() {
+  /* on initialise l'instance */
+}
+
+// On crée une nouvelle instance d'Employé
+var fred = new Employé();
+
+// On teste l'équivalence
+fred.__proto__ === Employé.prototype; // true
+```
+
+À cet instant, `fred` hérite de `Employé`. On peut toutefois changer ça en assignant un nouvel objet à `fred.__proto__` :
+
+```js
+// Assigner un nouvel objet à __proto__
+fred.__proto__ = Object.prototype;
+```
+
+`fred` n'hérite plus de `Employé.prototype`, mais de `Object.prototype`. Il perd donc les propriétés héritées de `Employé.prototype`.
+
+Cela n'est possible que pour les objets {{jsxref("Object.isExtensible", "extensibles","",1)}}. La propriété `__proto__` d'un objet non-extensible ne peut pas être changée :
+
+```js
+var obj = {};
+Object.preventExtensions(obj);
+
+obj.__proto__ = {}; // renvoie une exception TypeError
+```
+
+On notera que même la propriété `__proto__` de `Object.prototype` peut être redéfinie tant que la chaîne de prototypes se termine par `null` :
+
+```js
+var b = {};
+
+Object.prototype.__proto__ =
+    Object.create(null, //[[Prototype]]
+                  { salut: { value: function () {console.log('salut');}}});
+
+b.salut();
+```
+
+Si la propriété `__proto__` de {{jsxref("Object.prototype")}} ne permet pas d'aboutir à {{jsxref("null")}} via la chaîne de prototypes, on a une chaîne cyclique et on doit avoir une exception {{jsxref("TypeError")}} "cyclic \_\_proto\_\_ value".
+
+## Spécifications
+
+| Spécification                                                                                                                                            | État                         | Commentaires                                                                                                                                                                                      |
+| -------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| {{SpecName('ES2015', '#sec-object.prototype.__proto__', 'Object.prototype.__proto__')}}                                     | {{Spec2('ES2015')}}     | Incluse dans l'annexe (normative) pour le fonctionnalités additionneles d'ECMAScript pour les navigateurs web (note : la spécification codifie ce qui est déjà présent dans les implémentations). |
+| {{SpecName('ESDraft', '#sec-additional-properties-of-the-object.prototype-object', 'Object.prototype.__proto__')}} | {{Spec2('ESDraft')}} |                                                                                                                                                                                                   |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Object.proto")}}
+
+## Notes de compatibilité
+
+Bien que la spécification ES2015 rende le support de `__proto__` nécessaire pour les navigateurs web, elle n'est pas obligatoire pour les autres environnements (bien que ce soit conseillé vu le caractère normatif de l'annexe). Si votre code doit être compatible avec un environnement qui n'est pas un navigateur web, il est recommandé d'utiliser {{jsxref("Object.getPrototypeOf()")}} et {{jsxref("Object.setPrototypeOf()")}} à la place.
+
+## Voir aussi
+
+- {{jsxref("Object.prototype.isPrototypeOf()")}}
+- {{jsxref("Object.getPrototypeOf()")}}
+- {{jsxref("Object.setPrototypeOf()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/object/seal/index.html b/files/fr/web/javascript/reference/global_objects/object/seal/index.html
deleted file mode 100644
index c29d88b1e6..0000000000
--- a/files/fr/web/javascript/reference/global_objects/object/seal/index.html
+++ /dev/null
@@ -1,150 +0,0 @@
----
-title: Object.seal()
-slug: Web/JavaScript/Reference/Global_Objects/Object/seal
-tags:
-  - ECMAScript 5
-  - JavaScript
-  - JavaScript 1.8.5
-  - Méthode
-  - Object
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Object/seal
-original_slug: Web/JavaScript/Reference/Objets_globaux/Object/seal
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <code><strong>Object.seal()</strong></code> scelle un objet afin d'empêcher l'ajout de nouvelles propriétés, en marquant les propriétés existantes comme non-configurables. Les valeurs des propriétés courantes peuvent toujours être modifiées si elles sont accessibles en écriture.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/object-seal.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">Object.seal(<var>obj</var>)</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt>obj</dt>
- <dd>L'objet à sceller. Ce peut être n'importe quelle valeur qui n'ait pas <a href="/fr/docs/Web/JavaScript/Guide/Types_et_grammaire#Types_de_données">un type primitif</a>.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>L'objet qui est scellé.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>Par défaut, les objets sont {{jsxref("Object.isExtensible()", "extensibles", "", 1)}} (ce qui signifie que de nouvelles propriétés peuvent leur être ajoutées). Sceller un objet empêche l'ajout de nouvelles propriétés et marque les propriétés existantes comme non-configurables. Ainsi, l'ensemble de propriétés de l'objet devient fixé et immuable. Le fait de rendre les propriétés non-configurables empêche également de transformer des propriétés de données en accesseurs et vice versa. Cela n'empêche pas de modifier la valeur des propriétés. Toute tentative de suppression ou d'ajout de propriétés à un objet qui est scellé, de conversion d'une propriété de données en accesseurs ou vice versa échouera, soit de manière silencieuse soit en lançant une exception {{jsxref("TypeError")}} (la plupart du temps en {{jsxref("Fonctions_et_portee_des_fonctions/Strict_mode","mode strict","",1)}}.</p>
-
-<p>La chaîne de prototypes reste la même. Cependant, la propriété {{jsxref("Object.proto", "__proto__")}} ( {{deprecated_inline}} ) est scellée également.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<pre class="brush: js">var obj = {
-    prop: function () {},
-    toto: "truc"
-  };
-
-// On peut ajouter de nouvelles propriétés
-// Les propriétés existantes peuvent être
-// changées ou retirées
-obj.toto = "machin";
-obj.blop = "blip";
-delete obj.prop;
-
-var o = Object.seal(obj);
-
-o === obj; // true
-Object.isSealed(obj); // true
-
-// On peut toujours changer la valeur
-// d'une propriété d'un objet scellé
-obj.toto = "moh";
-
-// Mais on ne peut pas convertir les données
-// en accesseurs (ou vice versa)
-Object.defineProperty(obj, "toto", { get: function() { return "g"; } });
-// lancera une TypeError
-
-// Tout autre changement que celui d'une valeur
-// ne fonctionnera pas
-
-obj.coincoin = "mon canard";
-// la propriété n'est pas ajoutée
-
-delete obj.toto;
-// la propriété n'est pas supprimée
-
-// ...en mode strict, cela lancera des TypeErrors
-function échec() {
-  "use strict";
-  delete obj.toto; // lance une TypeError
-  obj.tutu = "arf"; // lance une TypeError
-}
-échec();
-
-// L'utilisation de la méthode Object.defineProperty ne fonctionnera pas
-
-Object.defineProperty(obj, "ohai", { value: 17 });
-// lance une TypeError
-
-Object.defineProperty(obj, "toto", { value: "eit" });
-// modifie une propriété existante</pre>
-
-<h2 id="Notes">Notes</h2>
-
-<p>Pour ES5, si l'argument passé à la méthode n'est pas un objet (mais une valeur d'un autre type primitif), cela entraînera une exception {{jsxref("TypeError")}}. Pour ES2015, un argument qui n'est pas un objet sera traité comme un objet ordinaire scellé et la méthode renverra cet objet.</p>
-
-<pre class="brush: js">Object.seal(1);
-// TypeError : 1 n'est pas un objet (code ES5)
-
-Object.seal(1);
-// 1 (code ES2015)</pre>
-
-<h3 id="Comparaison_avec_Object.freeze()">Comparaison avec <code>Object.freeze()</code></h3>
-
-<p>Lorsqu'on utilise la méthode {{jsxref("Object.freeze()")}}, les propriétés existantes d'un objet gelé deviennent immuables. En revanche, avec <code>Object.seal()</code>, il est toujours possible de modifier la valeur des propriétés existantes d'un objet scellé.</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaire</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-15.2.3.8', 'Object.seal')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td>Définition initiale.<br>
-    Implémentée par JavaScript 1.8.5</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-object.seal', 'Object.seal')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-object.seal', 'Object.seal')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Object.seal")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Object.isSealed()")}}</li>
- <li>{{jsxref("Object.preventExtensions()")}}</li>
- <li>{{jsxref("Object.isExtensible()")}}</li>
- <li>{{jsxref("Object.freeze()")}}</li>
- <li>{{jsxref("Object.isFrozen()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/object/seal/index.md b/files/fr/web/javascript/reference/global_objects/object/seal/index.md
new file mode 100644
index 0000000000..a3504a5afb
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/object/seal/index.md
@@ -0,0 +1,128 @@
+---
+title: Object.seal()
+slug: Web/JavaScript/Reference/Global_Objects/Object/seal
+tags:
+  - ECMAScript 5
+  - JavaScript
+  - JavaScript 1.8.5
+  - Méthode
+  - Object
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/seal
+original_slug: Web/JavaScript/Reference/Objets_globaux/Object/seal
+---
+{{JSRef}}
+
+La méthode **`Object.seal()`** scelle un objet afin d'empêcher l'ajout de nouvelles propriétés, en marquant les propriétés existantes comme non-configurables. Les valeurs des propriétés courantes peuvent toujours être modifiées si elles sont accessibles en écriture.
+
+{{EmbedInteractiveExample("pages/js/object-seal.html")}}
+
+## Syntaxe
+
+    Object.seal(obj)
+
+### Paramètres
+
+- obj
+  - : L'objet à sceller. Ce peut être n'importe quelle valeur qui n'ait pas [un type primitif](/fr/docs/Web/JavaScript/Guide/Types_et_grammaire#Types_de_données).
+
+### Valeur de retour
+
+L'objet qui est scellé.
+
+## Description
+
+Par défaut, les objets sont {{jsxref("Object.isExtensible()", "extensibles", "", 1)}} (ce qui signifie que de nouvelles propriétés peuvent leur être ajoutées). Sceller un objet empêche l'ajout de nouvelles propriétés et marque les propriétés existantes comme non-configurables. Ainsi, l'ensemble de propriétés de l'objet devient fixé et immuable. Le fait de rendre les propriétés non-configurables empêche également de transformer des propriétés de données en accesseurs et vice versa. Cela n'empêche pas de modifier la valeur des propriétés. Toute tentative de suppression ou d'ajout de propriétés à un objet qui est scellé, de conversion d'une propriété de données en accesseurs ou vice versa échouera, soit de manière silencieuse soit en lançant une exception {{jsxref("TypeError")}} (la plupart du temps en {{jsxref("Fonctions_et_portee_des_fonctions/Strict_mode","mode strict","",1)}}.
+
+La chaîne de prototypes reste la même. Cependant, la propriété {{jsxref("Object.proto", "__proto__")}} ( {{deprecated_inline}} ) est scellée également.
+
+## Exemples
+
+```js
+var obj = {
+    prop: function () {},
+    toto: "truc"
+  };
+
+// On peut ajouter de nouvelles propriétés
+// Les propriétés existantes peuvent être
+// changées ou retirées
+obj.toto = "machin";
+obj.blop = "blip";
+delete obj.prop;
+
+var o = Object.seal(obj);
+
+o === obj; // true
+Object.isSealed(obj); // true
+
+// On peut toujours changer la valeur
+// d'une propriété d'un objet scellé
+obj.toto = "moh";
+
+// Mais on ne peut pas convertir les données
+// en accesseurs (ou vice versa)
+Object.defineProperty(obj, "toto", { get: function() { return "g"; } });
+// lancera une TypeError
+
+// Tout autre changement que celui d'une valeur
+// ne fonctionnera pas
+
+obj.coincoin = "mon canard";
+// la propriété n'est pas ajoutée
+
+delete obj.toto;
+// la propriété n'est pas supprimée
+
+// ...en mode strict, cela lancera des TypeErrors
+function échec() {
+  "use strict";
+  delete obj.toto; // lance une TypeError
+  obj.tutu = "arf"; // lance une TypeError
+}
+échec();
+
+// L'utilisation de la méthode Object.defineProperty ne fonctionnera pas
+
+Object.defineProperty(obj, "ohai", { value: 17 });
+// lance une TypeError
+
+Object.defineProperty(obj, "toto", { value: "eit" });
+// modifie une propriété existante
+```
+
+## Notes
+
+Pour ES5, si l'argument passé à la méthode n'est pas un objet (mais une valeur d'un autre type primitif), cela entraînera une exception {{jsxref("TypeError")}}. Pour ES2015, un argument qui n'est pas un objet sera traité comme un objet ordinaire scellé et la méthode renverra cet objet.
+
+```js
+Object.seal(1);
+// TypeError : 1 n'est pas un objet (code ES5)
+
+Object.seal(1);
+// 1 (code ES2015)
+```
+
+### Comparaison avec `Object.freeze()`
+
+Lorsqu'on utilise la méthode {{jsxref("Object.freeze()")}}, les propriétés existantes d'un objet gelé deviennent immuables. En revanche, avec `Object.seal()`, il est toujours possible de modifier la valeur des propriétés existantes d'un objet scellé.
+
+## Spécifications
+
+| Spécification                                                                | État                         | Commentaire                                           |
+| ---------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- |
+| {{SpecName('ES5.1', '#sec-15.2.3.8', 'Object.seal')}}     | {{Spec2('ES5.1')}}     | Définition initiale. Implémentée par JavaScript 1.8.5 |
+| {{SpecName('ES6', '#sec-object.seal', 'Object.seal')}}     | {{Spec2('ES6')}}         |                                                       |
+| {{SpecName('ESDraft', '#sec-object.seal', 'Object.seal')}} | {{Spec2('ESDraft')}} |                                                       |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Object.seal")}}
+
+## Voir aussi
+
+- {{jsxref("Object.isSealed()")}}
+- {{jsxref("Object.preventExtensions()")}}
+- {{jsxref("Object.isExtensible()")}}
+- {{jsxref("Object.freeze()")}}
+- {{jsxref("Object.isFrozen()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/object/setprototypeof/index.html b/files/fr/web/javascript/reference/global_objects/object/setprototypeof/index.html
deleted file mode 100644
index 6a5f21af97..0000000000
--- a/files/fr/web/javascript/reference/global_objects/object/setprototypeof/index.html
+++ /dev/null
@@ -1,207 +0,0 @@
----
-title: Object.setPrototypeOf()
-slug: Web/JavaScript/Reference/Global_Objects/Object/setPrototypeOf
-tags:
-  - ECMAScript 2015
-  - JavaScript
-  - Méthode
-  - Object
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Object/setPrototypeOf
-original_slug: Web/JavaScript/Reference/Objets_globaux/Object/setPrototypeOf
----
-<div>{{JSRef}}</div>
-
-<div class="warning">
-<p><strong>Attention :</strong> Étant donnée la façon dont la plupart des moteurs JavaScript optimisent les performances, modifier le <code>[[Prototype]]</code> d'un objet est une opération lente pour chaque navigateur et moteur JavaScript. Les impacts liés aux performances sur ce point sont vastes et subtiles : ils concernent pas uniquement le temps passé à effectuer <code>Object.setPrototypeOf</code>, mais peuvent concerner n'importe quel code pour n'importe quel objet dont <code>[[Prototype]]</code> a été modifié. Si vous souhaitez obtenir des performances optimales, évitez de modifier le <code>[[Prototype]]</code> d'un objet. À la place, il est conseillé de créer un objet avec le prototype voulu en utilisant {{jsxref("Object/create","Object.create()")}}</p>
-</div>
-
-<p>La méthode <code><strong>Object.setPrototypeOf()</strong></code> définit le prototype (autrement dit la propriété interne <code>[[Prototype]]</code>) d'un objet donné avec un autre objet ou {{jsxref("null")}}.</p>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">Object.setPrototypeOf(<var>obj</var>, <var>prototype</var>)</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>obj</code></dt>
- <dd>L'objet dont on souhaite définir le prototype.</dd>
- <dt><code>prototype</code></dt>
- <dd>Le nouveau prototype de l'objet (un objet ou <code>null</code>).</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>L'objet sur lequel on a défini le prototype.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>Cette méthode renvoie une exception {{jsxref("TypeError")}} si l'objet dont on souhaite modifier le <code>[[Prototype]]</code> est non-extensible selon {{jsxref("Object.isExtensible")}}.  Cette méthode ne fait rien si le paramètre prototype n'est ni un objet ni {{jsxref("null")}} (par exemple : un nombre, une chaîne, un booléen ou {{jsxref("undefined")}}).  Dans les autres cas, cette méthode substitue le <code>[[Prototype]]</code> de <code>obj</code> avec un nouvel objet.</p>
-
-<p><code>Object.setPrototypeOf()</code> fait partie de la spécification ECMAScript 2015. L'utilisation de cette méthode est considérée comme la façon correcte pour modifier le prototype d'un objet (contrairement à la propriété {{jsxref("Object/proto","Object.prototype.__proto__")}} plus controversée).</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<pre class="brush: js">var dict = Object.setPrototypeOf({}, null);
-</pre>
-
-<h2 id="Prothèse_d'émulation_(polyfill)">Prothèse d'émulation (<em>polyfill</em>)</h2>
-
-<p>En utilisant la propriété {{jsxref("Object.proto", "Object.prototype.__proto__")}}, on peut définir <code>Object.setPrototypeOf</code> si elle n'est pas disponible :</p>
-
-<pre class="brush: js">// Cette prothèse ne fonctionne pas pour IE
-Object.setPrototypeOf = Object.setPrototypeOf || function (obj, proto) {
-  obj.__proto__ = proto;
-  return obj;
-}</pre>
-
-<h2 id="Ajouter_une_chaîne_de_prototypes_à_un_objet">Ajouter une chaîne de prototypes à un objet</h2>
-
-<p>En combinant <code>Object.getPrototypeOf()</code> et {{jsxref("Object.proto", "Object.prototype.__proto__")}} on peut ajouter une chaîne de prototypes au nouveau prototype d'un objet :</p>
-
-<pre class="brush: js">/**
-*** Object.setPrototypeOf(@object, @prototype)
-* Change le prototype d'une instance
-*
-**/
-
-Object.setPrototypeOf = function (oInstance, oProto) {
-  oInstance.__proto__ = oProto;
-  return oInstance;
-};
-
-/**
-*** Object.appendChain(@object, @prototype)
-*
-* Ajoute le premier prototype non-natif d'une chaîne au nouveau prototype.
-* Renvoie @object (si c'est une valeur primitive, elle sera transformée
-* en objet).
-*
-*** Object.appendChain(@object [, "@arg_name_1", "@arg_name_2", "@arg_name_3", "..."], "@function_body")
-*** Object.appendChain(@object [, "@arg_name_1, @arg_name_2, @arg_name_3, ..."], "@function_body")
-*
-* Ajoute le premier prototype non-natif d'une chaîne à l'objet Function.prototype
-* puis ajoute new Function(["@arg"(s)], "@function_body") à cette chaîne.
-* Renvoie la fonction.
-*
-**/
-
-Object.appendChain = function (oChain, oProto) {
-  if (arguments.length &lt; 2) {
-    throw new TypeError("Object.appendChain - Pas suffisamment d'arguments");
-  }
-  if (typeof oProto !== 'object' &amp;&amp; typeof oProto !== 'string') {
-   throw new TypeError("le deuxième argument de Object.appendChain doit être un objet ou une chaîne");
-  }
-
-  var oNewProto = oProto, oReturn = o2nd = oLast = oChain instanceof this ? oChain : new oChain.constructor(oChain);
-
-  for (var o1st = this.getPrototypeOf(o2nd); o1st !== Object.prototype &amp;&amp; o1st !== Function.prototype; o1st = this.getPrototypeOf(o2nd)) {
-    o2nd = o1st;
-  }
-
-  if (oProto.constructor === String) {
-    oNewProto = Function.prototype;
-    oReturn = Function.apply(null, Array.prototype.slice.call(arguments, 1));
-    this.setPrototypeOf(oReturn, oLast);
-  }
-
-  this.setPrototypeOf(o2nd, oNewProto);
-  return oReturn;
-}
-</pre>
-
-<h3 id="Utilisation">Utilisation</h3>
-
-<h4 id="Ajouter_une_chaîne_de_prototypes_à_un_prototype">Ajouter une chaîne de prototypes à un prototype</h4>
-
-<pre class="brush: js">function Mammifère () {
-  this.isMammifère = "oui";
-}
-
-function EspèceMammifère (sEspèceMammifère) {
-  this.espèce = sEspèceMammifère;
-}
-
-EspèceMammifère.prototype = new Mammifère();
-EspèceMammifère.prototype.constructor = EspèceMammifère;
-
-var oChat = new EspèceMammifère("Felis");
-
-console.log(oChat.isMammifère); // "oui"
-
-function Animal () {
-  this.respire = "oui";
-}
-
-Object.appendChain(oChat, new Animal());
-
-console.log(oChat.respire); // "oui"
-</pre>
-
-<h4 id="Deuxième_exemple_Transformer_une_valeur_primitive_en_une_instance_de_son_constructeur_et_ajouter_sa_chaîne_à_un_prototype">Deuxième exemple : Transformer une valeur primitive en une instance de son constructeur et ajouter sa chaîne à un prototype</h4>
-
-<pre class="brush: js">function MySymbol () {
-  this.isSymbol = "yes";
-}
-
-var nPrime = 17;
-
-console.log(typeof nPrime); // "number"
-
-var oPrime = Object.appendChain(nPrime, new MySymbol());
-
-console.log(oPrime); // "17"
-console.log(oPrime.isSymbol); // "yes"
-console.log(typeof oPrime); // "object"
-</pre>
-
-<h4 id="Troisième_exemple_Ajouter_une_chaîne_de_prototypes_à_l'objet_Function.prototype_object_et_ajouter_une_nouvelle_fonction_à_cette_chaîne">Troisième exemple : Ajouter une chaîne de prototypes à l'objet Function.prototype object et ajouter une nouvelle fonction à cette chaîne</h4>
-
-<pre class="brush: js">function Personne (sNom) {
-  this.identité = sNom;
-}
-
-var george = Object.appendChain(new Person("George"),
-                                "console.log(\"Salut !!\");");
-
-console.log(george.identité); // "George"
-george(); // "Salut !!"</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-object.setprototypeof', 'Object.setPrototypeOf')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td>Initial definition.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-object.setprototypeof', 'Object.setPrototypeOf')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Object.setPrototypeOf")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Reflect.setPrototypeOf()")}}</li>
- <li>{{jsxref("Object.prototype.isPrototypeOf()")}}</li>
- <li>{{jsxref("Object.getPrototypeOf()")}}</li>
- <li>{{jsxref("Object/proto","Object.prototype.__proto__")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/object/setprototypeof/index.md b/files/fr/web/javascript/reference/global_objects/object/setprototypeof/index.md
new file mode 100644
index 0000000000..1175acddab
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/object/setprototypeof/index.md
@@ -0,0 +1,192 @@
+---
+title: Object.setPrototypeOf()
+slug: Web/JavaScript/Reference/Global_Objects/Object/setPrototypeOf
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Méthode
+  - Object
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/setPrototypeOf
+original_slug: Web/JavaScript/Reference/Objets_globaux/Object/setPrototypeOf
+---
+{{JSRef}}
+
+> **Attention :** Étant donnée la façon dont la plupart des moteurs JavaScript optimisent les performances, modifier le `[[Prototype]]` d'un objet est une opération lente pour chaque navigateur et moteur JavaScript. Les impacts liés aux performances sur ce point sont vastes et subtiles : ils concernent pas uniquement le temps passé à effectuer `Object.setPrototypeOf`, mais peuvent concerner n'importe quel code pour n'importe quel objet dont `[[Prototype]]` a été modifié. Si vous souhaitez obtenir des performances optimales, évitez de modifier le `[[Prototype]]` d'un objet. À la place, il est conseillé de créer un objet avec le prototype voulu en utilisant {{jsxref("Object/create","Object.create()")}}
+
+La méthode **`Object.setPrototypeOf()`** définit le prototype (autrement dit la propriété interne `[[Prototype]]`) d'un objet donné avec un autre objet ou {{jsxref("null")}}.
+
+## Syntaxe
+
+    Object.setPrototypeOf(obj, prototype)
+
+### Paramètres
+
+- `obj`
+  - : L'objet dont on souhaite définir le prototype.
+- `prototype`
+  - : Le nouveau prototype de l'objet (un objet ou `null`).
+
+### Valeur de retour
+
+L'objet sur lequel on a défini le prototype.
+
+## Description
+
+Cette méthode renvoie une exception {{jsxref("TypeError")}} si l'objet dont on souhaite modifier le `[[Prototype]]` est non-extensible selon {{jsxref("Object.isExtensible")}}.  Cette méthode ne fait rien si le paramètre prototype n'est ni un objet ni {{jsxref("null")}} (par exemple : un nombre, une chaîne, un booléen ou {{jsxref("undefined")}}).  Dans les autres cas, cette méthode substitue le `[[Prototype]]` de `obj` avec un nouvel objet.
+
+`Object.setPrototypeOf()` fait partie de la spécification ECMAScript 2015. L'utilisation de cette méthode est considérée comme la façon correcte pour modifier le prototype d'un objet (contrairement à la propriété {{jsxref("Object/proto","Object.prototype.__proto__")}} plus controversée).
+
+## Exemples
+
+```js
+var dict = Object.setPrototypeOf({}, null);
+```
+
+## Prothèse d'émulation (_polyfill_)
+
+En utilisant la propriété {{jsxref("Object.proto", "Object.prototype.__proto__")}}, on peut définir `Object.setPrototypeOf` si elle n'est pas disponible :
+
+```js
+// Cette prothèse ne fonctionne pas pour IE
+Object.setPrototypeOf = Object.setPrototypeOf || function (obj, proto) {
+  obj.__proto__ = proto;
+  return obj;
+}
+```
+
+## Ajouter une chaîne de prototypes à un objet
+
+En combinant `Object.getPrototypeOf()` et {{jsxref("Object.proto", "Object.prototype.__proto__")}} on peut ajouter une chaîne de prototypes au nouveau prototype d'un objet :
+
+```js
+/**
+*** Object.setPrototypeOf(@object, @prototype)
+* Change le prototype d'une instance
+*
+**/
+
+Object.setPrototypeOf = function (oInstance, oProto) {
+  oInstance.__proto__ = oProto;
+  return oInstance;
+};
+
+/**
+*** Object.appendChain(@object, @prototype)
+*
+* Ajoute le premier prototype non-natif d'une chaîne au nouveau prototype.
+* Renvoie @object (si c'est une valeur primitive, elle sera transformée
+* en objet).
+*
+*** Object.appendChain(@object [, "@arg_name_1", "@arg_name_2", "@arg_name_3", "..."], "@function_body")
+*** Object.appendChain(@object [, "@arg_name_1, @arg_name_2, @arg_name_3, ..."], "@function_body")
+*
+* Ajoute le premier prototype non-natif d'une chaîne à l'objet Function.prototype
+* puis ajoute new Function(["@arg"(s)], "@function_body") à cette chaîne.
+* Renvoie la fonction.
+*
+**/
+
+Object.appendChain = function (oChain, oProto) {
+  if (arguments.length < 2) {
+    throw new TypeError("Object.appendChain - Pas suffisamment d'arguments");
+  }
+  if (typeof oProto !== 'object' && typeof oProto !== 'string') {
+   throw new TypeError("le deuxième argument de Object.appendChain doit être un objet ou une chaîne");
+  }
+
+  var oNewProto = oProto, oReturn = o2nd = oLast = oChain instanceof this ? oChain : new oChain.constructor(oChain);
+
+  for (var o1st = this.getPrototypeOf(o2nd); o1st !== Object.prototype && o1st !== Function.prototype; o1st = this.getPrototypeOf(o2nd)) {
+    o2nd = o1st;
+  }
+
+  if (oProto.constructor === String) {
+    oNewProto = Function.prototype;
+    oReturn = Function.apply(null, Array.prototype.slice.call(arguments, 1));
+    this.setPrototypeOf(oReturn, oLast);
+  }
+
+  this.setPrototypeOf(o2nd, oNewProto);
+  return oReturn;
+}
+```
+
+### Utilisation
+
+#### Ajouter une chaîne de prototypes à un prototype
+
+```js
+function Mammifère () {
+  this.isMammifère = "oui";
+}
+
+function EspèceMammifère (sEspèceMammifère) {
+  this.espèce = sEspèceMammifère;
+}
+
+EspèceMammifère.prototype = new Mammifère();
+EspèceMammifère.prototype.constructor = EspèceMammifère;
+
+var oChat = new EspèceMammifère("Felis");
+
+console.log(oChat.isMammifère); // "oui"
+
+function Animal () {
+  this.respire = "oui";
+}
+
+Object.appendChain(oChat, new Animal());
+
+console.log(oChat.respire); // "oui"
+```
+
+#### Deuxième exemple : Transformer une valeur primitive en une instance de son constructeur et ajouter sa chaîne à un prototype
+
+```js
+function MySymbol () {
+  this.isSymbol = "yes";
+}
+
+var nPrime = 17;
+
+console.log(typeof nPrime); // "number"
+
+var oPrime = Object.appendChain(nPrime, new MySymbol());
+
+console.log(oPrime); // "17"
+console.log(oPrime.isSymbol); // "yes"
+console.log(typeof oPrime); // "object"
+```
+
+#### Troisième exemple : Ajouter une chaîne de prototypes à l'objet Function.prototype object et ajouter une nouvelle fonction à cette chaîne
+
+```js
+function Personne (sNom) {
+  this.identité = sNom;
+}
+
+var george = Object.appendChain(new Person("George"),
+                                "console.log(\"Salut !!\");");
+
+console.log(george.identité); // "George"
+george(); // "Salut !!"
+```
+
+## Spécifications
+
+| Spécification                                                                                            | État                         | Commentaires        |
+| -------------------------------------------------------------------------------------------------------- | ---------------------------- | ------------------- |
+| {{SpecName('ES2015', '#sec-object.setprototypeof', 'Object.setPrototypeOf')}} | {{Spec2('ES2015')}}     | Initial definition. |
+| {{SpecName('ESDraft', '#sec-object.setprototypeof', 'Object.setPrototypeOf')}} | {{Spec2('ESDraft')}} |                     |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Object.setPrototypeOf")}}
+
+## Voir aussi
+
+- {{jsxref("Reflect.setPrototypeOf()")}}
+- {{jsxref("Object.prototype.isPrototypeOf()")}}
+- {{jsxref("Object.getPrototypeOf()")}}
+- {{jsxref("Object/proto","Object.prototype.__proto__")}}
diff --git a/files/fr/web/javascript/reference/global_objects/object/tolocalestring/index.html b/files/fr/web/javascript/reference/global_objects/object/tolocalestring/index.html
deleted file mode 100644
index 331b91a04f..0000000000
--- a/files/fr/web/javascript/reference/global_objects/object/tolocalestring/index.html
+++ /dev/null
@@ -1,82 +0,0 @@
----
-title: Object.prototype.toLocaleString()
-slug: Web/JavaScript/Reference/Global_Objects/Object/toLocaleString
-tags:
-  - JavaScript
-  - Méthode
-  - Prototype
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Object/toLocaleString
-original_slug: Web/JavaScript/Reference/Objets_globaux/Object/toLocaleString
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <code><strong>toLocaleString()</strong></code> renvoie une chaine de caractères représentant l'objet. Cette méthode est destinée à être surchargée par les objets dérivés à des fins spécifiques pour prendre en compte les locales.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/object-prototype-tolocalestring.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>obj</var>.toLocaleString()</pre>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Une chaîne de caractères qui représente l'objet en tenant compte de la locale.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>La méthode <code>toLocaleString</code> renvoie le résultat de l'appel à la méthode {{jsxref("Object.toString", "toString()")}}.</p>
-
-<p>Cette fonction est destinée à fournir aux objets une méthode générique <code>toLocaleString</code>, même si tous ne peuvent l'utiliser. Voir la liste ci-dessous.</p>
-
-<h3 id="Objets_surchargeant_la_méthode_toLocaleString">Objets surchargeant la méthode toLocaleString</h3>
-
-<ul>
- <li>{{jsxref("Array")}} : {{jsxref("Array.prototype.toLocaleString()")}}</li>
- <li>{{jsxref("Number")}} : {{jsxref("Number.prototype.toLocaleString()")}}</li>
- <li>{{jsxref("Date")}} : {{jsxref("Date.prototype.toLocaleString()")}}</li>
-</ul>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('ES3')}}</td>
-   <td>{{Spec2('ES3')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-15.2.4.3', 'Object.prototype.toLocaleString')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-object.prototype.tolocalestring', 'Object.prototype.toLocaleString')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-object.prototype.tolocalestring', 'Object.prototype.toLocaleString')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Object.toLocaleString")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Object.prototype.toString()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/object/tolocalestring/index.md b/files/fr/web/javascript/reference/global_objects/object/tolocalestring/index.md
new file mode 100644
index 0000000000..c0dcdd5f34
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/object/tolocalestring/index.md
@@ -0,0 +1,53 @@
+---
+title: Object.prototype.toLocaleString()
+slug: Web/JavaScript/Reference/Global_Objects/Object/toLocaleString
+tags:
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/toLocaleString
+original_slug: Web/JavaScript/Reference/Objets_globaux/Object/toLocaleString
+---
+{{JSRef}}
+
+La méthode **`toLocaleString()`** renvoie une chaine de caractères représentant l'objet. Cette méthode est destinée à être surchargée par les objets dérivés à des fins spécifiques pour prendre en compte les locales.
+
+{{EmbedInteractiveExample("pages/js/object-prototype-tolocalestring.html")}}
+
+## Syntaxe
+
+    obj.toLocaleString()
+
+### Valeur de retour
+
+Une chaîne de caractères qui représente l'objet en tenant compte de la locale.
+
+## Description
+
+La méthode `toLocaleString` renvoie le résultat de l'appel à la méthode {{jsxref("Object.toString", "toString()")}}.
+
+Cette fonction est destinée à fournir aux objets une méthode générique `toLocaleString`, même si tous ne peuvent l'utiliser. Voir la liste ci-dessous.
+
+### Objets surchargeant la méthode toLocaleString
+
+- {{jsxref("Array")}} : {{jsxref("Array.prototype.toLocaleString()")}}
+- {{jsxref("Number")}} : {{jsxref("Number.prototype.toLocaleString()")}}
+- {{jsxref("Date")}} : {{jsxref("Date.prototype.toLocaleString()")}}
+
+## Spécifications
+
+| Spécification                                                                                                                        | État                         | Commentaires         |
+| ------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------- | -------------------- |
+| {{SpecName('ES3')}}                                                                                                             | {{Spec2('ES3')}}         | Définition initiale. |
+| {{SpecName('ES5.1', '#sec-15.2.4.3', 'Object.prototype.toLocaleString')}}                                     | {{Spec2('ES5.1')}}     |                      |
+| {{SpecName('ES6', '#sec-object.prototype.tolocalestring', 'Object.prototype.toLocaleString')}}         | {{Spec2('ES6')}}         |                      |
+| {{SpecName('ESDraft', '#sec-object.prototype.tolocalestring', 'Object.prototype.toLocaleString')}} | {{Spec2('ESDraft')}} |                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Object.toLocaleString")}}
+
+## Voir aussi
+
+- {{jsxref("Object.prototype.toString()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/object/tosource/index.html b/files/fr/web/javascript/reference/global_objects/object/tosource/index.html
deleted file mode 100644
index 7bc57ea1d3..0000000000
--- a/files/fr/web/javascript/reference/global_objects/object/tosource/index.html
+++ /dev/null
@@ -1,129 +0,0 @@
----
-title: Object.prototype.toSource()
-slug: Web/JavaScript/Reference/Global_Objects/Object/toSource
-tags:
-  - JavaScript
-  - Méthode
-  - Non-standard
-  - Object
-  - Prototype
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Object/toSource
-original_slug: Web/JavaScript/Reference/Objets_globaux/Object/toSource
----
-<div>{{JSRef}} {{non-standard_header}}</div>
-
-<p>La méthode <strong><code>toSource()</code></strong> renvoie une chaîne de caractères représentant le code source d'un objet.</p>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">Object.toSource();
-<var>obj</var>.toSource();
-</pre>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Une chaîne de caractères qui représente le code source de l'objet.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>La méthode <code>toSource()</code> renvoie les valeurs suivantes :</p>
-
-<ul>
- <li>Pour l'objet natif {{jsxref("Object")}}, <code>toSource()</code> renvoie la chaîne suivante, qui indique que le code source n'est pas disponible :
-
-  <pre class="brush: js">function Object() {
-    [native code]
-}
-</pre>
- </li>
- <li>Pour les instances de {{jsxref("Object")}}, <code>toSource()</code> renvoie une chaîne représentant le code source.</li>
-</ul>
-
-<p>La méthode <code>toSource()</code> peut être utilisée à des fins de débogage pour analyser le contenu d'un objet.</p>
-
-<h3 id="Surcharger_la_méthode_toSource()">Surcharger la méthode <code>toSource()</code></h3>
-
-<p>La méthode <code>toSource()</code> peut être surchargée pour les différents objets. Par exemple :</p>
-
-<pre class="brush: js">function Personne(nom) {
-  this.nom = nom;
-}
-
-Personne.prototype.toSource = function Personne_toSource() {
-  return 'new Personne(' + uneval(this.nom) + ')';
-};
-
-console.log(new Personne('Jean').toSource()); // ---&gt; new Personne("Jean")
-</pre>
-
-<h3 id="Les_méthodes_toSource()_natives">Les méthodes <code>toSource()</code> natives</h3>
-
-<p>Chaque constructeur natif JavaScript possède sa propre méthode <code>toSource()</code>. Ces objets sont :</p>
-
-<ul>
- <li>{{jsxref("Array.prototype.toSource()")}} {{non-standard_inline}} — pour {{jsxref("Array")}}.</li>
- <li>{{jsxref("Boolean.prototype.toSource()")}} {{non-standard_inline}} — pour {{jsxref("Boolean")}}.</li>
- <li>{{jsxref("Date.prototype.toSource()")}} {{non-standard_inline}} — pour {{jsxref("Date")}}.</li>
- <li>{{jsxref("Function.prototype.toSource()")}} {{non-standard_inline}} — pour {{jsxref("Function")}}.</li>
- <li>{{jsxref("Number.prototype.toSource()")}} {{non-standard_inline}} — pour {{jsxref("Number")}}.</li>
- <li>{{jsxref("RegExp.prototype.toSource()")}} {{non-standard_inline}} — pour {{jsxref("RegExp")}}.</li>
- <li>{{jsxref("String.prototype.toSource()")}} {{non-standard_inline}} — pour {{jsxref("String")}}.</li>
- <li>{{jsxref("Symbol.prototype.toSource()")}} {{non-standard_inline}} — pour {{jsxref("Symbol")}}.</li>
- <li><code>Math.toSource()</code> — Renvoie "Math".</li>
-</ul>
-
-<h3 id="Limites_les_objets_cycliques">Limites : les objets cycliques</h3>
-
-<p>Dans le cas d'objets qui font référence à eux-mêmes (une liste cyclique ou un arbre), <code>toSource()</code> ne représentera pas la référence (Firefox 24). Par exemple :</p>
-
-<pre class="brush: js">var obj1 = {};
-var obj2 = { a: obj1 };
-obj1.b = obj2;
-
-console.log('Cyclique : ' + (obj1.b.a == obj1));
-
-var objSource = obj1.toSource(); // renvoie "({b:{a:{}}})"
-
-obj1 = eval(objSource);
-
-console.log('Cyclique : ' + (obj1.b.a == obj1));
-</pre>
-
-<p>Si on utilise une structure cyclique et qu'on a besoin de <code>toSource()</code>, il faudra surcharger la méthode <code>toSource()</code> pour avoir le comportement souhaité.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Utiliser_toSource()">Utiliser <code>toSource()</code></h3>
-
-<p>Dans le code qui suit, on définit un objet <code>Chien</code> et on crée <code>monChien</code> qui est une instance de type <code>Chien</code> :</p>
-
-<pre class="brush: js">function Chien(nom, race, couleur, sexe) {
-  this.nom = nom;
-  this.race = race;
-  this.couleur = couleur;
-  this.sexe = sexe;
-}
-
-monChien = new Chien('Gabby', 'Labrador', 'chocolat', 'femelle');
-</pre>
-
-<p>Si on appelle la méthode <code>toSource()</code> sur <code>monChien</code>, on obtiendra le littéral permettant de définir l'objet :</p>
-
-<pre class="brush: js">monChien.toSource();
-// returns ({nom:"Gabby", race:"Labrador", couleur:"chocolat", sexe:"femelle"})
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<p>Cette méthode ne fait partie d'aucun standard, implémentée avec JavaScript 1.3.</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Object.toSource")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Object.prototype.toString()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/object/tosource/index.md b/files/fr/web/javascript/reference/global_objects/object/tosource/index.md
new file mode 100644
index 0000000000..b3dfd8cf7a
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/object/tosource/index.md
@@ -0,0 +1,127 @@
+---
+title: Object.prototype.toSource()
+slug: Web/JavaScript/Reference/Global_Objects/Object/toSource
+tags:
+  - JavaScript
+  - Méthode
+  - Non-standard
+  - Object
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/toSource
+original_slug: Web/JavaScript/Reference/Objets_globaux/Object/toSource
+---
+{{JSRef}} {{non-standard_header}}
+
+La méthode **`toSource()`** renvoie une chaîne de caractères représentant le code source d'un objet.
+
+## Syntaxe
+
+    Object.toSource();
+    obj.toSource();
+
+### Valeur de retour
+
+Une chaîne de caractères qui représente le code source de l'objet.
+
+## Description
+
+La méthode `toSource()` renvoie les valeurs suivantes :
+
+- Pour l'objet natif {{jsxref("Object")}}, `toSource()` renvoie la chaîne suivante, qui indique que le code source n'est pas disponible :
+
+  ```js
+    function Object() {
+        [native code]
+    }
+    ```
+
+- Pour les instances de {{jsxref("Object")}}, `toSource()` renvoie une chaîne représentant le code source.
+
+La méthode `toSource()` peut être utilisée à des fins de débogage pour analyser le contenu d'un objet.
+
+### Surcharger la méthode `toSource()`
+
+La méthode `toSource()` peut être surchargée pour les différents objets. Par exemple :
+
+```js
+function Personne(nom) {
+  this.nom = nom;
+}
+
+Personne.prototype.toSource = function Personne_toSource() {
+  return 'new Personne(' + uneval(this.nom) + ')';
+};
+
+console.log(new Personne('Jean').toSource()); // ---> new Personne("Jean")
+```
+
+### Les méthodes `toSource()` natives
+
+Chaque constructeur natif JavaScript possède sa propre méthode `toSource()`. Ces objets sont :
+
+- {{jsxref("Array.prototype.toSource()")}} {{non-standard_inline}} — pour {{jsxref("Array")}}.
+- {{jsxref("Boolean.prototype.toSource()")}} {{non-standard_inline}} — pour {{jsxref("Boolean")}}.
+- {{jsxref("Date.prototype.toSource()")}} {{non-standard_inline}} — pour {{jsxref("Date")}}.
+- {{jsxref("Function.prototype.toSource()")}} {{non-standard_inline}} — pour {{jsxref("Function")}}.
+- {{jsxref("Number.prototype.toSource()")}} {{non-standard_inline}} — pour {{jsxref("Number")}}.
+- {{jsxref("RegExp.prototype.toSource()")}} {{non-standard_inline}} — pour {{jsxref("RegExp")}}.
+- {{jsxref("String.prototype.toSource()")}} {{non-standard_inline}} — pour {{jsxref("String")}}.
+- {{jsxref("Symbol.prototype.toSource()")}} {{non-standard_inline}} — pour {{jsxref("Symbol")}}.
+- `Math.toSource()` — Renvoie "Math".
+
+### Limites : les objets cycliques
+
+Dans le cas d'objets qui font référence à eux-mêmes (une liste cyclique ou un arbre), `toSource()` ne représentera pas la référence (Firefox 24). Par exemple :
+
+```js
+var obj1 = {};
+var obj2 = { a: obj1 };
+obj1.b = obj2;
+
+console.log('Cyclique : ' + (obj1.b.a == obj1));
+
+var objSource = obj1.toSource(); // renvoie "({b:{a:{}}})"
+
+obj1 = eval(objSource);
+
+console.log('Cyclique : ' + (obj1.b.a == obj1));
+```
+
+Si on utilise une structure cyclique et qu'on a besoin de `toSource()`, il faudra surcharger la méthode `toSource()` pour avoir le comportement souhaité.
+
+## Exemples
+
+### Utiliser `toSource()`
+
+Dans le code qui suit, on définit un objet `Chien` et on crée `monChien` qui est une instance de type `Chien` :
+
+```js
+function Chien(nom, race, couleur, sexe) {
+  this.nom = nom;
+  this.race = race;
+  this.couleur = couleur;
+  this.sexe = sexe;
+}
+
+monChien = new Chien('Gabby', 'Labrador', 'chocolat', 'femelle');
+```
+
+Si on appelle la méthode `toSource()` sur `monChien`, on obtiendra le littéral permettant de définir l'objet :
+
+```js
+monChien.toSource();
+// returns ({nom:"Gabby", race:"Labrador", couleur:"chocolat", sexe:"femelle"})
+```
+
+## Spécifications
+
+Cette méthode ne fait partie d'aucun standard, implémentée avec JavaScript 1.3.
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Object.toSource")}}
+
+## Voir aussi
+
+- {{jsxref("Object.prototype.toString()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/object/tostring/index.html b/files/fr/web/javascript/reference/global_objects/object/tostring/index.html
deleted file mode 100644
index e702efa029..0000000000
--- a/files/fr/web/javascript/reference/global_objects/object/tostring/index.html
+++ /dev/null
@@ -1,133 +0,0 @@
----
-title: Object.prototype.toString()
-slug: Web/JavaScript/Reference/Global_Objects/Object/toString
-tags:
-  - JavaScript
-  - Méthode
-  - Object
-  - Prototype
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Object/toString
-original_slug: Web/JavaScript/Reference/Objets_globaux/Object/toString
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <code><strong>toString()</strong></code> renvoie une chaîne de caractères représentant l'objet.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/object-prototype-tostring.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>obj</var>.toString()</pre>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Une chaîne de caractères représentant l'objet.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>Chaque object possède une méthode <code>toString()</code> qui est appelée de façon automatique à chaque fois que l'objet doit être représenté sous forme de texte ou à chaque fois qu'on utilise un objet et que la valeur attendue est une chaîne de caractères. Par défaut, chaque objet qui descend d'<code>Object</code> hérite de la méthode <code>toString()</code>. Si cette méthode n'est pas surchargée, <code>toString()</code> renvoie "[object <em>type</em>]", où <code><em>type</em></code> est le type de l'objet. Par exemple :</p>
-
-<pre class="brush: js">var o = new Object();
-o.toString();           // renvoie [object Object]
-</pre>
-
-<div class="note">
-<p><strong>Note :</strong> À partir de JavaScript 1.8.5 <code>toString()</code>, lorsqu'elle est appelée sur {{jsxref("null")}} renvoie <code>[object <em>Null</em>]</code>, et lorsqu'elle est appelée sur {{jsxref("undefined")}} renvoie <code>[object <em>Undefined</em>]</code>, ce qui est conforme à ECMAScript 5 et aux errata qui ont suivis. Voir l'exemple ci-après <a href="#detect">Utiliser <code>toString</code> pour détecter le type d'un objet</a>.</p>
-</div>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Surcharger_la_méthode_toString()_par_défaut">Surcharger la méthode <code>toString()</code> par défaut</h3>
-
-<p>Il est possible de surcharger la méthode <code>toString()</code>. La méthode <code>toString()</code> ne prend pas d'argument et doit renvoyer une chaîne de caractères. La méthode <code>toString()</code> peut renvoyer n'importe quelle valeur mais elle sera plus pertinente si elle renvoie des informations sur l'objet courant.</p>
-
-<p>Le code qui suit définit un type d'objet <code>Chien</code> et instancie <code>monChien</code>, qui est de type <code>Chien</code> :</p>
-
-<pre class="brush: js">function Chien(nom, race, couleur, sexe) {
-  this.nom = nom;
-  this.race = race;
-  this.couleur = couleur;
-  this.sexe = sexe;
-}
-
-monChien = new Chien('Gabby', 'Labrador', 'chocolat', 'femelle');
-</pre>
-
-<p>Si on appelle la méthode <code>toString()</code> sur cet objet, on aura le résultat suivant (provenant de la méthode originale, héritée d'{{jsxref("Object")}}) :</p>
-
-<pre class="brush: js">monChien.toString(); // renvoie [object Object]
-</pre>
-
-<p>Dans le code qui suit, on surcharge la méthode <code>toString()</code> avec <code>chienToString()</code>. Cette méthode produit une chaîne qui contient l'ensemble des propriétés (race, couleur, sexe, nom) de l'objet :</p>
-
-<pre class="brush: js">Chien.prototype.toString = function chienToString() {
-  var ret = 'Le chien ' + this.nom + ' est un ' + this.race + ' ' + this.sexe + ' ' + this.couleur;
-  return ret;
-}
-</pre>
-
-<p>En utilisant la fonction ci-avant, à chaque fois que <code>monChien</code> sera utilisé là où on attend une chaîne, le moteur JavaScript appellera automatique la fonction <code>chienToString()</code>qui renverra la chaîne suivante :</p>
-
-<pre class="brush: js">Le chien Gabby est un labrador femelle chocolat.
-</pre>
-
-<h3 id="Utiliser_toString()_pour_détecter_le_type_d'un_objet">Utiliser <code>toString()</code> pour détecter le type d'un objet</h3>
-
-<p><code>toString()</code> peut être utilisée pour tous les objets afin d'obtenir son type. Pour utiliser <code>Object.prototype.toString()</code> avec n'importe quel objet, il sera nécessaire d'appeler {{jsxref("Function.prototype.call()")}} ou {{jsxref("Function.prototype.apply()")}} (pour éviter les versions surchargées).</p>
-
-<pre class="brush: js">var toString = Object.prototype.toString;
-
-toString.call(new Date);    // [object Date]
-toString.call(new String);  // [object String]
-toString.call(Math);        // [object Math]
-
-// Depuis JavaScript 1.8.5
-toString.call(undefined);   // [object Undefined]
-toString.call(null);        // [object Null]
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES1')}}</td>
-   <td>{{Spec2('ES1')}}</td>
-   <td>Définition initiale. Implémentée avec JavaScript 1.0.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-15.2.4.2', 'Object.prototype.toString')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td>Lorsque la méthode est appelée sur {{jsxref("null")}}, elle renvoie <code>[object <em>Null</em>]</code>, et sur {{jsxref( "undefined")}} elle renvoie <code>[object <em>Undefined</em>]</code></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-object.prototype.tostring', 'Object.prototype.toString')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-object.prototype.tostring', 'Object.prototype.toString')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Object.toString")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Object.prototype.toSource()")}}</li>
- <li>{{jsxref("Object.prototype.valueOf()")}}</li>
- <li>{{jsxref("Number.prototype.toString()")}}</li>
- <li>{{jsxref("Symbol.toPrimitive")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/object/tostring/index.md b/files/fr/web/javascript/reference/global_objects/object/tostring/index.md
new file mode 100644
index 0000000000..e99db8ca3d
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/object/tostring/index.md
@@ -0,0 +1,112 @@
+---
+title: Object.prototype.toString()
+slug: Web/JavaScript/Reference/Global_Objects/Object/toString
+tags:
+  - JavaScript
+  - Méthode
+  - Object
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/toString
+original_slug: Web/JavaScript/Reference/Objets_globaux/Object/toString
+---
+{{JSRef}}
+
+La méthode **`toString()`** renvoie une chaîne de caractères représentant l'objet.
+
+{{EmbedInteractiveExample("pages/js/object-prototype-tostring.html")}}
+
+## Syntaxe
+
+    obj.toString()
+
+### Valeur de retour
+
+Une chaîne de caractères représentant l'objet.
+
+## Description
+
+Chaque object possède une méthode `toString()` qui est appelée de façon automatique à chaque fois que l'objet doit être représenté sous forme de texte ou à chaque fois qu'on utilise un objet et que la valeur attendue est une chaîne de caractères. Par défaut, chaque objet qui descend d'`Object` hérite de la méthode `toString()`. Si cette méthode n'est pas surchargée, `toString()` renvoie "\[object _type_]", où `type` est le type de l'objet. Par exemple :
+
+```js
+var o = new Object();
+o.toString();           // renvoie [object Object]
+```
+
+> **Note :** À partir de JavaScript 1.8.5 `toString()`, lorsqu'elle est appelée sur {{jsxref("null")}} renvoie `[object Null]`, et lorsqu'elle est appelée sur {{jsxref("undefined")}} renvoie `[object Undefined]`, ce qui est conforme à ECMAScript 5 et aux errata qui ont suivis. Voir l'exemple ci-après [Utiliser `toString` pour détecter le type d'un objet](#detect).
+
+## Exemples
+
+### Surcharger la méthode `toString()` par défaut
+
+Il est possible de surcharger la méthode `toString()`. La méthode `toString()` ne prend pas d'argument et doit renvoyer une chaîne de caractères. La méthode `toString()` peut renvoyer n'importe quelle valeur mais elle sera plus pertinente si elle renvoie des informations sur l'objet courant.
+
+Le code qui suit définit un type d'objet `Chien` et instancie `monChien`, qui est de type `Chien` :
+
+```js
+function Chien(nom, race, couleur, sexe) {
+  this.nom = nom;
+  this.race = race;
+  this.couleur = couleur;
+  this.sexe = sexe;
+}
+
+monChien = new Chien('Gabby', 'Labrador', 'chocolat', 'femelle');
+```
+
+Si on appelle la méthode `toString()` sur cet objet, on aura le résultat suivant (provenant de la méthode originale, héritée d'{{jsxref("Object")}}) :
+
+```js
+monChien.toString(); // renvoie [object Object]
+```
+
+Dans le code qui suit, on surcharge la méthode `toString()` avec `chienToString()`. Cette méthode produit une chaîne qui contient l'ensemble des propriétés (race, couleur, sexe, nom) de l'objet :
+
+```js
+Chien.prototype.toString = function chienToString() {
+  var ret = 'Le chien ' + this.nom + ' est un ' + this.race + ' ' + this.sexe + ' ' + this.couleur;
+  return ret;
+}
+```
+
+En utilisant la fonction ci-avant, à chaque fois que `monChien` sera utilisé là où on attend une chaîne, le moteur JavaScript appellera automatique la fonction `chienToString()`qui renverra la chaîne suivante :
+
+```js
+Le chien Gabby est un labrador femelle chocolat.
+```
+
+### Utiliser `toString()` pour détecter le type d'un objet
+
+`toString()` peut être utilisée pour tous les objets afin d'obtenir son type. Pour utiliser `Object.prototype.toString()` avec n'importe quel objet, il sera nécessaire d'appeler {{jsxref("Function.prototype.call()")}} ou {{jsxref("Function.prototype.apply()")}} (pour éviter les versions surchargées).
+
+```js
+var toString = Object.prototype.toString;
+
+toString.call(new Date);    // [object Date]
+toString.call(new String);  // [object String]
+toString.call(Math);        // [object Math]
+
+// Depuis JavaScript 1.8.5
+toString.call(undefined);   // [object Undefined]
+toString.call(null);        // [object Null]
+```
+
+## Spécifications
+
+| Spécification                                                                                                        | État                         | Commentaires                                                                                                                                                         |
+| -------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| {{SpecName('ES1')}}                                                                                             | {{Spec2('ES1')}}         | Définition initiale. Implémentée avec JavaScript 1.0.                                                                                                                |
+| {{SpecName('ES5.1', '#sec-15.2.4.2', 'Object.prototype.toString')}}                             | {{Spec2('ES5.1')}}     | Lorsque la méthode est appelée sur {{jsxref("null")}}, elle renvoie `[object Null]`, et sur {{jsxref( "undefined")}} elle renvoie `[object Undefined]` |
+| {{SpecName('ES6', '#sec-object.prototype.tostring', 'Object.prototype.toString')}}         | {{Spec2('ES6')}}         |                                                                                                                                                                      |
+| {{SpecName('ESDraft', '#sec-object.prototype.tostring', 'Object.prototype.toString')}} | {{Spec2('ESDraft')}} |                                                                                                                                                                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Object.toString")}}
+
+## Voir aussi
+
+- {{jsxref("Object.prototype.toSource()")}}
+- {{jsxref("Object.prototype.valueOf()")}}
+- {{jsxref("Number.prototype.toString()")}}
+- {{jsxref("Symbol.toPrimitive")}}
diff --git a/files/fr/web/javascript/reference/global_objects/object/valueof/index.html b/files/fr/web/javascript/reference/global_objects/object/valueof/index.html
deleted file mode 100644
index 4a913a7d0e..0000000000
--- a/files/fr/web/javascript/reference/global_objects/object/valueof/index.html
+++ /dev/null
@@ -1,117 +0,0 @@
----
-title: Object.prototype.valueOf()
-slug: Web/JavaScript/Reference/Global_Objects/Object/valueOf
-tags:
-  - JavaScript
-  - Méthode
-  - Object
-  - Prototype
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Object/valueOf
-original_slug: Web/JavaScript/Reference/Objets_globaux/Object/valueOf
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <code><strong>valueOf()</strong></code> renvoie la valeur primitive d'un objet donné.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/object-prototype-valueof.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>object</var>.valueOf()</pre>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>La valeur primitive de l'objet appelant.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>JavaScript appelle la méthode <code>valueOf</code> pour convertir un objet en une valeur primitive. Il est rarement nécessaire d'appeler soi-même la méthode <code>valueOf</code> ; JavaScript l'invoque automatiquement lorsqu'il rencontre un objet alors qu'il attend une valeur primitive.</p>
-
-<p>Par défaut, la méthode <code>valueOf</code> est héritée par tout objet descendant d'{{jsxref("Object")}}. Tous les objets globaux natifs redéfinissent cette méthode pour renvoyer une valeur appropriée. Si un objet n'a pas de valeur primitive, <code>valueOf</code> renvoie l'objet lui-même, ce qui sera affiché comme :</p>
-
-<pre class="brush: js">[object Object]
-</pre>
-
-<p><code>valueOf</code> peut être utilisée afin de convertir un objet prédéfini en une valeur primitive. Si un objet est défini dans un script, il est possible de surcharger <code>Object.prototype.valueOf</code> pour appeler une méthode personnalisée au lieu de la méthode par défaut d'<code>Object</code>.</p>
-
-<h3 id="Surcharger_valueOf_pour_des_objets_personnalisés">Surcharger <code>valueOf</code> pour des objets personnalisés</h3>
-
-<p>Il est possible de créer une fonction à appeler à la place de la méthode <code>valueOf</code> par défaut. Celle-ci ne peut pas recevoir de paramètres.</p>
-
-<p>Supposons qu'on ait un type d'objet <code>monTypeDeNombre</code> et qu'on désire lui ajouter une méthode <code>valueOf</code> spécifique, on pourra utiliser le code suivant :</p>
-
-<pre class="brush: js">monTypeDeNombre.prototype.valueOf = function(){ return valeurPrimitive;};
-</pre>
-
-<p>En utilisant ce code, chaque fois qu'un objet de type <code>monTypeDeNombre</code> sera utilisé dans un contexte où il doit être représenté comme une valeur primitive, JavaScript appellera automatiquement la fonction qui y est définie.</p>
-
-<p>C'est habituellement JavaScript qui invoquera la méthode <code>valueOf</code>, mais il est aussi possible de l'appeler soi-même :</p>
-
-<pre class="brush: js">monNombre.valueOf()
-</pre>
-
-<div class="note">
-<p><strong>Note :</strong> Les objets à utiliser dans un contexte textuel sont convertis avec la méthode {{jsxref("Object.toString", "toString()")}} ce qui est différent de la conversion d'objets {{jsxref("String")}} en valeurs primitives avec <code>valueOf</code>. Tous les objets peuvent être convertis en chaînes de caractères (la façon la plus générique étant "<code>[object <em>type</em>]</code>"). En revanche, la plupart des objets ne peut pas être convertie en nombre ou booléen par exemple.</p>
-</div>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Utiliser_valueOf">Utiliser <code>valueOf</code></h3>
-
-<pre class="brush: js">function MonTypeDeNombre(n) {
-    this.nombre = n;
-}
-
-MonTypeDeNombre.prototype.valueOf = function(){
-  return this.nombre;
-}
-
-var monObj = new MonTypeDeNombre(4);
-console.log(monObj + 3); // 7 car l'opération a implicitement utilisé valueOf</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('ES1')}}</td>
-   <td>{{Spec2('ES1')}}</td>
-   <td>Définition initiale. Implémentée avec JavaScript 1.1.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-15.2.4.4', 'Object.prototype.valueOf')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-object.prototype.valueof', 'Object.prototype.valueOf')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-object.prototype.valueof', 'Object.prototype.valueOf')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Object.valueOf")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Object.prototype.toString()")}}</li>
- <li>{{jsxref("parseInt", "parseInt()")}}</li>
- <li>{{jsxref("Symbol.toPrimitive")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/object/valueof/index.md b/files/fr/web/javascript/reference/global_objects/object/valueof/index.md
new file mode 100644
index 0000000000..d00e0c0f83
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/object/valueof/index.md
@@ -0,0 +1,93 @@
+---
+title: Object.prototype.valueOf()
+slug: Web/JavaScript/Reference/Global_Objects/Object/valueOf
+tags:
+  - JavaScript
+  - Méthode
+  - Object
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/valueOf
+original_slug: Web/JavaScript/Reference/Objets_globaux/Object/valueOf
+---
+{{JSRef}}
+
+La méthode **`valueOf()`** renvoie la valeur primitive d'un objet donné.
+
+{{EmbedInteractiveExample("pages/js/object-prototype-valueof.html")}}
+
+## Syntaxe
+
+    object.valueOf()
+
+### Valeur de retour
+
+La valeur primitive de l'objet appelant.
+
+## Description
+
+JavaScript appelle la méthode `valueOf` pour convertir un objet en une valeur primitive. Il est rarement nécessaire d'appeler soi-même la méthode `valueOf` ; JavaScript l'invoque automatiquement lorsqu'il rencontre un objet alors qu'il attend une valeur primitive.
+
+Par défaut, la méthode `valueOf` est héritée par tout objet descendant d'{{jsxref("Object")}}. Tous les objets globaux natifs redéfinissent cette méthode pour renvoyer une valeur appropriée. Si un objet n'a pas de valeur primitive, `valueOf` renvoie l'objet lui-même, ce qui sera affiché comme :
+
+```js
+[object Object]
+```
+
+`valueOf` peut être utilisée afin de convertir un objet prédéfini en une valeur primitive. Si un objet est défini dans un script, il est possible de surcharger `Object.prototype.valueOf` pour appeler une méthode personnalisée au lieu de la méthode par défaut d'`Object`.
+
+### Surcharger `valueOf` pour des objets personnalisés
+
+Il est possible de créer une fonction à appeler à la place de la méthode `valueOf` par défaut. Celle-ci ne peut pas recevoir de paramètres.
+
+Supposons qu'on ait un type d'objet `monTypeDeNombre` et qu'on désire lui ajouter une méthode `valueOf` spécifique, on pourra utiliser le code suivant :
+
+```js
+monTypeDeNombre.prototype.valueOf = function(){ return valeurPrimitive;};
+```
+
+En utilisant ce code, chaque fois qu'un objet de type `monTypeDeNombre` sera utilisé dans un contexte où il doit être représenté comme une valeur primitive, JavaScript appellera automatiquement la fonction qui y est définie.
+
+C'est habituellement JavaScript qui invoquera la méthode `valueOf`, mais il est aussi possible de l'appeler soi-même :
+
+```js
+monNombre.valueOf()
+```
+
+> **Note :** Les objets à utiliser dans un contexte textuel sont convertis avec la méthode {{jsxref("Object.toString", "toString()")}} ce qui est différent de la conversion d'objets {{jsxref("String")}} en valeurs primitives avec `valueOf`. Tous les objets peuvent être convertis en chaînes de caractères (la façon la plus générique étant "`[object type]`"). En revanche, la plupart des objets ne peut pas être convertie en nombre ou booléen par exemple.
+
+## Exemples
+
+### Utiliser `valueOf`
+
+```js
+function MonTypeDeNombre(n) {
+    this.nombre = n;
+}
+
+MonTypeDeNombre.prototype.valueOf = function(){
+  return this.nombre;
+}
+
+var monObj = new MonTypeDeNombre(4);
+console.log(monObj + 3); // 7 car l'opération a implicitement utilisé valueOf
+```
+
+## Spécifications
+
+| Spécification                                                                                                    | État                         | Commentaires                                          |
+| ---------------------------------------------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- |
+| {{SpecName('ES1')}}                                                                                         | {{Spec2('ES1')}}         | Définition initiale. Implémentée avec JavaScript 1.1. |
+| {{SpecName('ES5.1', '#sec-15.2.4.4', 'Object.prototype.valueOf')}}                         | {{Spec2('ES5.1')}}     |                                                       |
+| {{SpecName('ES6', '#sec-object.prototype.valueof', 'Object.prototype.valueOf')}}     | {{Spec2('ES6')}}         |                                                       |
+| {{SpecName('ESDraft', '#sec-object.prototype.valueof', 'Object.prototype.valueOf')}} | {{Spec2('ESDraft')}} |                                                       |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Object.valueOf")}}
+
+## Voir aussi
+
+- {{jsxref("Object.prototype.toString()")}}
+- {{jsxref("parseInt", "parseInt()")}}
+- {{jsxref("Symbol.toPrimitive")}}
diff --git a/files/fr/web/javascript/reference/global_objects/object/values/index.html b/files/fr/web/javascript/reference/global_objects/object/values/index.html
deleted file mode 100644
index 6d6c9f0372..0000000000
--- a/files/fr/web/javascript/reference/global_objects/object/values/index.html
+++ /dev/null
@@ -1,104 +0,0 @@
----
-title: Object.values()
-slug: Web/JavaScript/Reference/Global_Objects/Object/values
-tags:
-  - ECMAScript2016
-  - JavaScript
-  - Méthode
-  - Object
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Object/values
-original_slug: Web/JavaScript/Reference/Objets_globaux/Object/values
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <code><strong>Object.values()</strong></code> renvoie un tableau contenant les valeurs des propriétés propres énumérables d'un objet dont l'ordre est le même que celui obtenu avec une boucle {{jsxref("Instructions/for...in", "for...in")}} (la boucle <code>for-in</code> est différente car elle parcourt également les propriétés héritées).</p>
-
-<div>{{EmbedInteractiveExample("pages/js/object-values.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">Object.values(<var>obj</var>)</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>obj</code></dt>
- <dd>L'objet dont on souhaite connaître les valeurs des propriétés propres énumérables.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Un tableau dont les éléments sont les valeurs des propriétés énumérables de l'objet passé en argument.</p>
-
-<h2 id="Description">Description</h2>
-
-<p><code>Object.values()</code> renvoie un tableau dont les éléments sont les valeurs des propriétés énumérables directement rattachées à l'objet passé en argument. L'ordre du tableau est le même que celui obtenu lorsqu'on parcourt les propriétés manuellement.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<pre class="brush: js">var obj = { toto: "truc", machin: 42 };
-console.log(Object.values(obj)); // ['truc', 42]
-
-// un objet semblable à un tableau
-var obj = { 0: 'a', 1: 'b', 2: 'c' };
-console.log(Object.values(obj)); // ['a', 'b', 'c']
-
-// un objet semblable à un tableau
-// dont les clés sont ordonnées aléatoirement
-// lorsque des clés numériques sont utilisées, les valeurs sont
-// renvoyées selon l'ordre numérique des clés
-var un_obj = { 100: 'a', 2: 'b', 7: 'c' };
-console.log(Object.values(un_obj)); // ['b', 'c', 'a']
-
-// getToto est une propriété qui
-// n'est pas énumérable
-var mon_obj = Object.create({}, { getToto: { value: function() { return this.toto; } } });
-mon_obj.toto = "truc";
-console.log(Object.values(mon_obj)); // ['truc']
-
-// un argument de type primitif sera
-// converti en un objet
-console.log(Object.values("toto")); // ['t', 'o', 't', 'o']
-</pre>
-
-<h2 id="Prothèse_d'émulation_(polyfill)">Prothèse d'émulation (<em>polyfill</em>)</h2>
-
-<p>Afin d'ajouter le support pour <code>Object.values</code> dans des environnements plus anciens qui ne supportent pas la méthode nativement, vous pouvez utiliser une prothèse comme celle proposée sur le dépôt <a href="https://github.com/tc39/proposal-object-values-entries">tc39/proposal-object-values-entries</a> ou sur le dépôt <a href="https://github.com/es-shims/Object.values">es-shims/Object.values</a>.</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-object.values', 'Object.values')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES8', '#sec-object.values', 'Object.values')}}</td>
-   <td>{{Spec2('ES8')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Object.values")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/JavaScript/Caractère_énumérable_des_propriétés_et_rattachement">Énumérabilité et rattachement des propriétés</a></li>
- <li>{{jsxref("Object.keys()")}}</li>
- <li>{{jsxref("Object.entries()")}}</li>
- <li>{{jsxref("Object.prototype.propertyIsEnumerable()")}}</li>
- <li>{{jsxref("Object.create()")}}</li>
- <li>{{jsxref("Object.getOwnPropertyNames()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/object/values/index.md b/files/fr/web/javascript/reference/global_objects/object/values/index.md
new file mode 100644
index 0000000000..adb87b914d
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/object/values/index.md
@@ -0,0 +1,86 @@
+---
+title: Object.values()
+slug: Web/JavaScript/Reference/Global_Objects/Object/values
+tags:
+  - ECMAScript2016
+  - JavaScript
+  - Méthode
+  - Object
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/values
+original_slug: Web/JavaScript/Reference/Objets_globaux/Object/values
+---
+{{JSRef}}
+
+La méthode **`Object.values()`** renvoie un tableau contenant les valeurs des propriétés propres énumérables d'un objet dont l'ordre est le même que celui obtenu avec une boucle {{jsxref("Instructions/for...in", "for...in")}} (la boucle `for-in` est différente car elle parcourt également les propriétés héritées).
+
+{{EmbedInteractiveExample("pages/js/object-values.html")}}
+
+## Syntaxe
+
+    Object.values(obj)
+
+### Paramètres
+
+- `obj`
+  - : L'objet dont on souhaite connaître les valeurs des propriétés propres énumérables.
+
+### Valeur de retour
+
+Un tableau dont les éléments sont les valeurs des propriétés énumérables de l'objet passé en argument.
+
+## Description
+
+`Object.values()` renvoie un tableau dont les éléments sont les valeurs des propriétés énumérables directement rattachées à l'objet passé en argument. L'ordre du tableau est le même que celui obtenu lorsqu'on parcourt les propriétés manuellement.
+
+## Exemples
+
+```js
+var obj = { toto: "truc", machin: 42 };
+console.log(Object.values(obj)); // ['truc', 42]
+
+// un objet semblable à un tableau
+var obj = { 0: 'a', 1: 'b', 2: 'c' };
+console.log(Object.values(obj)); // ['a', 'b', 'c']
+
+// un objet semblable à un tableau
+// dont les clés sont ordonnées aléatoirement
+// lorsque des clés numériques sont utilisées, les valeurs sont
+// renvoyées selon l'ordre numérique des clés
+var un_obj = { 100: 'a', 2: 'b', 7: 'c' };
+console.log(Object.values(un_obj)); // ['b', 'c', 'a']
+
+// getToto est une propriété qui
+// n'est pas énumérable
+var mon_obj = Object.create({}, { getToto: { value: function() { return this.toto; } } });
+mon_obj.toto = "truc";
+console.log(Object.values(mon_obj)); // ['truc']
+
+// un argument de type primitif sera
+// converti en un objet
+console.log(Object.values("toto")); // ['t', 'o', 't', 'o']
+```
+
+## Prothèse d'émulation (_polyfill_)
+
+Afin d'ajouter le support pour `Object.values` dans des environnements plus anciens qui ne supportent pas la méthode nativement, vous pouvez utiliser une prothèse comme celle proposée sur le dépôt [tc39/proposal-object-values-entries](https://github.com/tc39/proposal-object-values-entries) ou sur le dépôt [es-shims/Object.values](https://github.com/es-shims/Object.values).
+
+## Spécifications
+
+| Spécification                                                                        | État                         | Commentaires         |
+| ------------------------------------------------------------------------------------ | ---------------------------- | -------------------- |
+| {{SpecName('ESDraft', '#sec-object.values', 'Object.values')}} | {{Spec2('ESDraft')}} |                      |
+| {{SpecName('ES8', '#sec-object.values', 'Object.values')}}         | {{Spec2('ES8')}}         | Définition initiale. |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Object.values")}}
+
+## Voir aussi
+
+- [Énumérabilité et rattachement des propriétés](/fr/docs/Web/JavaScript/Caractère_énumérable_des_propriétés_et_rattachement)
+- {{jsxref("Object.keys()")}}
+- {{jsxref("Object.entries()")}}
+- {{jsxref("Object.prototype.propertyIsEnumerable()")}}
+- {{jsxref("Object.create()")}}
+- {{jsxref("Object.getOwnPropertyNames()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/parsefloat/index.html b/files/fr/web/javascript/reference/global_objects/parsefloat/index.html
deleted file mode 100644
index f904aaf99e..0000000000
--- a/files/fr/web/javascript/reference/global_objects/parsefloat/index.html
+++ /dev/null
@@ -1,147 +0,0 @@
----
-title: parseFloat()
-slug: Web/JavaScript/Reference/Global_Objects/parseFloat
-tags:
-  - JavaScript
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/parseFloat
-original_slug: Web/JavaScript/Reference/Objets_globaux/parseFloat
----
-<div>{{jsSidebar("Objects")}}</div>
-
-<p>La fonction <code><strong>parseFloat()</strong></code> permet de transformer une chaîne de caractères en un nombre flottant après avoir analysée celle-ci (<em>parsing</em>).</p>
-
-<div>{{EmbedInteractiveExample("pages/js/globalprops-parsefloat.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">parseFloat(<var>string</var>)</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>string</code></dt>
- <dd>Une chaîne de caractères la valeur qu'on souhaite analyser et transformer en un nombre flottant.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Un nombre flottant obtenu à partir de l'analyse de la chaîne de caractères. Si le premier caractère ne permet pas d'obtenir un nombre, ce sera la valeur {{jsxref("NaN")}} qui sera renvoyée.</p>
-
-<h2 id="Description">Description</h2>
-
-<p><code>parseFloat</code> est une fonction non associée à un objet, disponible au plus haut niveau de l'environnement JavaScript.</p>
-
-<p><code>parseFloat</code> analyse l'argument fourni sous la forme d'une chaîne de caractères et renvoie un nombre flottant correspondant. L'analyse de la chaîne s'arrête dès qu'un caractère qui n'est pas +,-, un chiffre, un point ou un exposant. Ce caractère, ainsi que les suivants, seront ignorés. Les blancs en début et en fin de chaîne sont autorisés.</p>
-
-<div class="blockIndicator note">
-<p><strong>Note :</strong> Si on souhaite avoir un outil de conversion plus strict, on pourra utiliser {{jsxref("Number", "Number(<em>valeur</em>)")}} qui utilise une analyse plus stricte et qui fournit {{jsxref("NaN")}} pour les valeurs qui contiennent des caractères invalides, quelle que soit leur position.</p>
-</div>
-
-<p>Si le premier caractère de la chaîne ne peut pas être converti en un nombre, <code>parseFloat()</code> renverra <code>NaN</code>.</p>
-
-<p>Pour des raisons arithmétiques, la valeur <code>NaN</code> n'est jamais un nombre, quelle que soit la base considérée. On peut utiliser la méthode {{jsxref("isNaN")}} afin de déterminer si le résultat obtenu par <code>parseFloat()</code> est <code>NaN</code>. Si <code>NaN</code> est passé comme valeur lors d'opérations arithmétiques, ces opérations renverront également <code>NaN</code> comme résultat.</p>
-
-<p><code>parseFloat()</code> peut également analyser et renvoyer la valeur {{jsxref("Infinity")}} qui représente l'infini numérique. Ici, on pourra utiliser la fonction {{jsxref("isFinite()")}} afin de déterminer si le résultat obtenu est un nombre fini (c'est-à-dire qui n'est ni <code>Infinity</code>, ni <code>-Infinity</code>, ni <code>NaN</code>).</p>
-
-<p><code>parseFloat()</code> peut également analyser un objet si celui-ci implémente la méthode <code>toString()</code> ou <code>valueOf()</code>. La valeur renvoyée par <code>parseFloat()</code> le résultat de <code>parseFloat()</code> appliqué à la valeur renvoyée par <code>toString()</code> ou <code>valueOf()</code> .</p>
-
-<p><code>parseFloat()</code> convertit une valeur {{jsxref("BigInt")}} en une valeur {{jsxref("Number")}} et perd ainsi en précision car toutes les valeurs <code>BigInt</code> ne sont pas représentables en <code>Number</code>.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Utiliser_parseFloat()_pour_renvoyer_un_nombre">Utiliser <code>parseFloat()</code> pour renvoyer un nombre</h3>
-
-<p>Les instructions suivantes renvoient toutes la valeur <strong>3.14</strong> :</p>
-
-<pre class="brush:js">parseFloat("3.14");
-parseFloat("314e-2");
-parseFloat("0.0314E+2");
-parseFloat("3.14d'autres caractères non numériques");
-
-var titi = Object.create(null);
-titi.valueOf = function () { return "3.14"; };
-parseFloat(titi);​​​​​
-</pre>
-
-<h3 id="Utiliser_parseFloat()_pour_renvoyer_NaN">Utiliser <code>parseFloat()</code> pour renvoyer <code>NaN</code></h3>
-
-<p>Dans cet exemple, le résultat obtenu est {{jsxref("<code>NaN</code>")}} :</p>
-
-<pre class="brush: js">parseFloat("FF2");
-</pre>
-
-<h3 id="parseFloat_et_BigInt"><code>parseFloat</code> et <code>BigInt</code></h3>
-
-<pre class="brush: js">parseFloat(900719925474099267n);
-// 900719925474099300</pre>
-
-<h3 id="Une_fonction_plus_stricte">Une fonction plus stricte</h3>
-
-<p>Si on souhaite éviter de convertir des chaînes qui contiennent des caractères non numériques, on pourra utiliser une expression rationnelle pour filtrer ces valeurs (et obtenir une fonction plus stricte que <code>parseFloat()</code>) :</p>
-
-<pre class="brush: js">var filterFloat = function (value) {
-    if (/^(\-|\+)?([0-9]+(\.[0-9]+)?|Infinity)$/
-      .test(value))
-      return Number(value);
-  return NaN;
-}
-
-console.log(filterFloat('421'));               // 421
-console.log(filterFloat('-421'));              // -421
-console.log(filterFloat('+421'));              // 421
-console.log(filterFloat('Infinity'));          // Infinity
-console.log(filterFloat('1.61803398875'));     // 1.61803398875
-console.log(filterFloat('421e+0'));            // NaN
-console.log(filterFloat('421hop'));            // NaN
-console.log(filterFloat('hop1.61803398875'));  // NaN
-
-</pre>
-
-<p>Attention : ce code n'est qu'un exemple et renverra <code>NaN</code> pour des valeurs pourtant valides comme <code>1.</code> ou <code>.5</code>.</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES1')}}</td>
-   <td>{{Spec2('ES1')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-15.1.2.3', 'parseFloat')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-parsefloat-string', 'parseFloat')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-parsefloat-string', 'parseFloat')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.parseFloat")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("parseInt", "parseInt()")}}</li>
- <li>{{jsxref("Number.parseFloat()")}}</li>
- <li>{{jsxref("Number.parseInt()")}}</li>
- <li>{{jsxref("Number.toFixed()")}}</li>
- <li>{{jsxref("isNaN", "isNaN()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/parsefloat/index.md b/files/fr/web/javascript/reference/global_objects/parsefloat/index.md
new file mode 100644
index 0000000000..f7bf7406e6
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/parsefloat/index.md
@@ -0,0 +1,122 @@
+---
+title: parseFloat()
+slug: Web/JavaScript/Reference/Global_Objects/parseFloat
+tags:
+  - JavaScript
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/parseFloat
+original_slug: Web/JavaScript/Reference/Objets_globaux/parseFloat
+---
+{{jsSidebar("Objects")}}
+
+La fonction **`parseFloat()`** permet de transformer une chaîne de caractères en un nombre flottant après avoir analysée celle-ci (_parsing_).
+
+{{EmbedInteractiveExample("pages/js/globalprops-parsefloat.html")}}
+
+## Syntaxe
+
+    parseFloat(string)
+
+### Paramètres
+
+- `string`
+  - : Une chaîne de caractères la valeur qu'on souhaite analyser et transformer en un nombre flottant.
+
+### Valeur de retour
+
+Un nombre flottant obtenu à partir de l'analyse de la chaîne de caractères. Si le premier caractère ne permet pas d'obtenir un nombre, ce sera la valeur {{jsxref("NaN")}} qui sera renvoyée.
+
+## Description
+
+`parseFloat` est une fonction non associée à un objet, disponible au plus haut niveau de l'environnement JavaScript.
+
+`parseFloat` analyse l'argument fourni sous la forme d'une chaîne de caractères et renvoie un nombre flottant correspondant. L'analyse de la chaîne s'arrête dès qu'un caractère qui n'est pas +,-, un chiffre, un point ou un exposant. Ce caractère, ainsi que les suivants, seront ignorés. Les blancs en début et en fin de chaîne sont autorisés.
+
+> **Note :** Si on souhaite avoir un outil de conversion plus strict, on pourra utiliser {{jsxref("Number", "Number(<em>valeur</em>)")}} qui utilise une analyse plus stricte et qui fournit {{jsxref("NaN")}} pour les valeurs qui contiennent des caractères invalides, quelle que soit leur position.
+
+Si le premier caractère de la chaîne ne peut pas être converti en un nombre, `parseFloat()` renverra `NaN`.
+
+Pour des raisons arithmétiques, la valeur `NaN` n'est jamais un nombre, quelle que soit la base considérée. On peut utiliser la méthode {{jsxref("isNaN")}} afin de déterminer si le résultat obtenu par `parseFloat()` est `NaN`. Si `NaN` est passé comme valeur lors d'opérations arithmétiques, ces opérations renverront également `NaN` comme résultat.
+
+`parseFloat()` peut également analyser et renvoyer la valeur {{jsxref("Infinity")}} qui représente l'infini numérique. Ici, on pourra utiliser la fonction {{jsxref("isFinite()")}} afin de déterminer si le résultat obtenu est un nombre fini (c'est-à-dire qui n'est ni `Infinity`, ni `-Infinity`, ni `NaN`).
+
+`parseFloat()` peut également analyser un objet si celui-ci implémente la méthode `toString()` ou `valueOf()`. La valeur renvoyée par `parseFloat()` le résultat de `parseFloat()` appliqué à la valeur renvoyée par `toString()` ou `valueOf()` .
+
+`parseFloat()` convertit une valeur {{jsxref("BigInt")}} en une valeur {{jsxref("Number")}} et perd ainsi en précision car toutes les valeurs `BigInt` ne sont pas représentables en `Number`.
+
+## Exemples
+
+### Utiliser `parseFloat()` pour renvoyer un nombre
+
+Les instructions suivantes renvoient toutes la valeur **3.14** :
+
+```js
+parseFloat("3.14");
+parseFloat("314e-2");
+parseFloat("0.0314E+2");
+parseFloat("3.14d'autres caractères non numériques");
+
+var titi = Object.create(null);
+titi.valueOf = function () { return "3.14"; };
+parseFloat(titi);​​​​​
+```
+
+### Utiliser `parseFloat()` pour renvoyer `NaN`
+
+Dans cet exemple, le résultat obtenu est {{jsxref("<code>NaN</code>")}} :
+
+```js
+parseFloat("FF2");
+```
+
+### `parseFloat` et `BigInt`
+
+```js
+parseFloat(900719925474099267n);
+// 900719925474099300
+```
+
+### Une fonction plus stricte
+
+Si on souhaite éviter de convertir des chaînes qui contiennent des caractères non numériques, on pourra utiliser une expression rationnelle pour filtrer ces valeurs (et obtenir une fonction plus stricte que `parseFloat()`) :
+
+```js
+var filterFloat = function (value) {
+    if (/^(\-|\+)?([0-9]+(\.[0-9]+)?|Infinity)$/
+      .test(value))
+      return Number(value);
+  return NaN;
+}
+
+console.log(filterFloat('421'));               // 421
+console.log(filterFloat('-421'));              // -421
+console.log(filterFloat('+421'));              // 421
+console.log(filterFloat('Infinity'));          // Infinity
+console.log(filterFloat('1.61803398875'));     // 1.61803398875
+console.log(filterFloat('421e+0'));            // NaN
+console.log(filterFloat('421hop'));            // NaN
+console.log(filterFloat('hop1.61803398875'));  // NaN
+```
+
+Attention : ce code n'est qu'un exemple et renverra `NaN` pour des valeurs pourtant valides comme `1.` ou `.5`.
+
+## Spécifications
+
+| Spécification                                                                        | État                         | Commentaires         |
+| ------------------------------------------------------------------------------------ | ---------------------------- | -------------------- |
+| {{SpecName('ES1')}}                                                             | {{Spec2('ES1')}}         | Définition initiale. |
+| {{SpecName('ES5.1', '#sec-15.1.2.3', 'parseFloat')}}                 | {{Spec2('ES5.1')}}     |                      |
+| {{SpecName('ES6', '#sec-parsefloat-string', 'parseFloat')}}     | {{Spec2('ES6')}}         |                      |
+| {{SpecName('ESDraft', '#sec-parsefloat-string', 'parseFloat')}} | {{Spec2('ESDraft')}} |                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.parseFloat")}}
+
+## Voir aussi
+
+- {{jsxref("parseInt", "parseInt()")}}
+- {{jsxref("Number.parseFloat()")}}
+- {{jsxref("Number.parseInt()")}}
+- {{jsxref("Number.toFixed()")}}
+- {{jsxref("isNaN", "isNaN()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/parseint/index.html b/files/fr/web/javascript/reference/global_objects/parseint/index.html
deleted file mode 100644
index b8fa350598..0000000000
--- a/files/fr/web/javascript/reference/global_objects/parseint/index.html
+++ /dev/null
@@ -1,203 +0,0 @@
----
-title: parseInt()
-slug: Web/JavaScript/Reference/Global_Objects/parseInt
-tags:
-  - JavaScript
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/parseInt
-original_slug: Web/JavaScript/Reference/Objets_globaux/parseInt
----
-<div>{{jsSidebar("Objects")}}</div>
-
-<p>La fonction <code><strong>parseInt()</strong></code> analyse une chaîne de caractère fournie en argument et renvoie un entier exprimé dans une base donnée.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/globalprops-parseint.html")}}</div>
-
-
-
-<div class="warning">
-<p><strong>Attention :</strong> On veillera à bien utiliser le second paramètre de la fonction pour éviter toute ambiguité sur la base numérique utilisée.</p>
-</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">parseInt(<var>string</var>, <var>base</var>);</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>string</code></dt>
- <dd>La valeur qu'on souhaite analyser et convertir. Si l'argument <code>string</code> n'est pas une chaîne de caractères, elle sera convertie en une chaîne (grâce à l'opération abstraite <code><a href="https://www.ecma-international.org/ecma-262/6.0/#sec-tostring">ToString</a></code>) . Les blancs contenus au début de l'argument sont ignorés.</dd>
- <dt><code>base</code></dt>
- <dd>
- <p>Un entier compris entre 2 et 36 qui représente la <a href="https://fr.wikipedia.org/wiki/Base_%28arithm%C3%A9tique%29">base</a> utilisée pour la valeur représentée dans la chaîne. La base communément utilisée est la base décimale et on utilisera donc <code>10</code> dans ce cas pour ce paramètre.</p>
-
- <div class="warning"><p><strong>Attention :</strong>La base par défaut n'est pas 10. Ce paramètre doit toujours être utilisé, en effet s'il n'est pas spécifié, le comportement de la fonction n'est pas garanti et peut varier d'une plate-forme à une autre.</p></div>
-
- <p>Voir cependant la description ci-après qui explicite le comportement par défaut attendu.</p>
- </dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Un entier obtenu à partir de l'analyse de la chaîne de caractères. Si le premier caractère ne permet d'obtenir un nombre d'après la base fournie, ce sera {{jsxref("NaN")}} qui sera renvoyé.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>La fonction <code>parseInt()</code> convertit le premier argument en une chaîne, l'analyse et renvoie un entier ou <code>NaN</code>. Si la valeur renvoyée n'est pas <code>NaN</code>, ce sera l'entier représentant le nombre contenu dans la chaîne dans la base donnée. Une base 10 est utilisée pour la base décimale, 8 pour la base octale, 16 pour la base hexadécimale. Pour les bases supérieures à <code>10</code>, les lettres de l'alphabet latin seront utilisées pour représenter les chiffres supérieurs à <code>9</code>. Par exemple, pour la base hexadécimale, on utilisera les lettres <code>A</code> à <code>F</code>.</p>
-
-<p>Si, lors de l'analyse de la chaîne, <code>parseInt()</code> rencontre un caractère qui n'est pas un chiffre dans la base donnée, ce caractère, ainsi que les suivants seront ignorés. <code>parseInt()</code> tronque les nombres fournies en valeurs entières (attention donc lorsque les chaînes utilisent une notation scientifique : "4e2" donnera la valeur 4 en base 10 et pas 400). Les espaces en début et en fin de chaîne sont autorisés.</p>
-
-<p>Si la base fournie vaut {{jsxref("undefined")}} ou 0 (ou si elle n'est pas utilisée comme paramètre), le moteur JavaScript procèdera comme suit :</p>
-
-<ul>
- <li>Si l'argument <code>string</code> commence avec "0x" ou "0X", la base considérée sera la base 16 (hexadécimale) et le reste de la chaîne sera analysé et converti.</li>
- <li>Si l'argument <code>string</code> commence avec "0", la base considérée sera la base 8 (octale) ou la base 10 (décimale). La base exacte qui sera choisie dépendra de l'implémentation. ECMAScript 5 définit que la base 10 doit être utilisée. Cependant, cela n'est pas supporté par tous les navigateurs. C'est pour cette raison qu'il faut <strong>toujours spécifier une base lorsqu'on utilise <code>parseInt()</code></strong>.</li>
- <li>Si l'argument <code>string</code> commence avec une autre valeur, la base considérée sera la base 10.</li>
-</ul>
-
-<p>Si le premier caractère de la chaîne de caractères ne peut pas être converti, <code>parseInt()</code> renverra <code>NaN</code>.</p>
-
-<p>Pour des raisons arithmétiques, la valeur {{jsxref("NaN")}} n'est un nombre pour aucune base. La fonction {{jsxref("Objets_globaux/isNaN", "isNaN()")}} peut être utilisée pour déterminer si le résultat obtenu par <code>parseInt()</code> vaut <code>NaN</code>. Si <code>NaN</code> est utilisé dans une opération arithmétique, le résultat de cette opération sera aussi <code>NaN</code> (on dit que <code>NaN</code> est une valeur « toxique »).</p>
-
-<p>Pour convertir un nombre en une chaîne de caractères dans une base donnée, on utilisera <code>monEntier.toString(base)</code>.</p>
-
-<p><code>parseInt</code> convertira les valeurs {{jsxref("BigInt")}} en {{jsxref("Number")}} et de la précision sera perdue lors de ce traitement.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<p>Les exemples suivants renvoient tous <strong><code>15</code></strong> :</p>
-
-<pre class="brush: js">parseInt("0xF", 16);
-parseInt("F", 16);
-parseInt("17", 8);
-parseInt(021, 8);
-parseInt("015", 10); // attention parseInt(015, 10); renvoie 13
-parseInt(15.99, 10);
-parseInt("15,123", 10);
-parseInt("FXX123", 16);
-parseInt("1111", 2);
-parseInt("15*3", 10);
-parseInt("15e2", 10);
-parseInt("15px", 10);
-parseInt("12", 13);
-</pre>
-
-<p>Les exemples suivants renvoient <strong><code>NaN</code></strong> :</p>
-
-<pre class="brush: js">parseInt("Coucou", 8); // Ce sont des lettres et pas des chiffres
-parseInt("546", 2);    // Ces chiffres ne sont pas valides pour une représentation
-                       // binaire
-</pre>
-
-<p>Les exemples suivants renvoient tous <strong><code>-15</code></strong> :</p>
-
-<pre class="brush: js">parseInt("-F", 16);
-parseInt("-0F", 16);
-parseInt("-0XF", 16);
-parseInt(-15.1, 10)
-parseInt("-17", 8);
-parseInt("-15", 10);
-parseInt("-1111", 2);
-parseInt("-15e1", 10);
-parseInt("-12", 13);
-</pre>
-
-<p>Les exemples suivants renvoient tous <code><strong>4</strong></code> :</p>
-
-<pre class="brush: js">parseInt("4e2", 10);
-parseInt("4.7", 10);</pre>
-
-<p>L'exemple suivant renvoie  <strong><code>224</code></strong> :</p>
-
-<pre class="brush: js">parseInt("0e0", 16);
-</pre>
-
-<p>On perdra en précision si on manipule un grand entier ({{jsxref("BigInt")}}) :</p>
-
-<pre class="brush: js">parseInt(900719925474099267n); // 900719925474099300</pre>
-
-<h2 id="Interpréter_une_base_octale_quand_aucun_paramètre_de_base_n'est_fourni">Interpréter une base octale quand aucun paramètre de base n'est fourni</h2>
-
-<p>Bien que cela soit fortement déconseillé par ECMAScript 3 et que cela soit interdit par ECMAScript 5, de nombreuses implémentations interprètent une chaîne numérique qui commence par <code>0</code> comme une valeur exprimée dans la base octale. Les instructions qui suivent peuvent avoir un résultat octal ou décimal selon les implémentations. <strong>Pour cette raison, il faut toujours définir une base lorsqu'on utilise cette fonction.</strong></p>
-
-<pre class="brush: js">parseInt("0e0"); // 0
-parseInt("08");  // 0, '8' n'est pas un chiffre octal.
-</pre>
-
-<h3 id="ECMAScript_5_supprime_l'interprétation_octale">ECMAScript 5 supprime l'interprétation octale</h3>
-
-<p>La spécification ECMAScript 5 indique, au sujet de la fonction <code>parseInt()</code>, que les valeurs commençant par <code>0</code> ne doivent plus être considérées comme des valeurs octales. ECMAScript 5 indique :</p>
-
-<p>La fonction <code>parseInt</code> produit une valeur entière définie par le contenu de la chaîne selon la base fournie. Les blancs en début de chaîne sont ignorés. Si la base spécifiée est <code>0</code>, la base décimale sera prise en compte sauf si le nombre représenté commence par la paire de caractères <code>0x</code> ou <code>0X</code> auquel cas la base 16 sera prise en compte.</p>
-
-<p>Sur cet aspect, ECMAScript 3 diffère car il permet l'interprétation octale (bien qu'il la déconseille).</p>
-
-<p>De nombreuses implémentations n'ont pas adopté ce comportement en 2013. Pour cette raison (les anciens environnements et navigateurs doivent être supportés), il faut <strong>toujours définir le paramètre pour la base</strong>.</p>
-
-<h2 id="Une_fonction_plus_stricte">Une fonction plus stricte</h2>
-
-<p>Il est parfois utile d'avoir une fonction de conversion plus stricte. Pour cela, on peut utiliser une expression rationnelle :</p>
-
-<pre class="brush: js">filterInt = function (value) {
-  if (/^(-|\+)?(\d+|Infinity)$/.test(value))
-    return Number(value);
-  return NaN;
-}
-
-console.log(filterInt('421'));               // 421
-console.log(filterInt('-421'));              // -421
-console.log(filterInt('+421'));              // 421
-console.log(filterInt('Infinity'));          // Infinity
-console.log(filterInt('421e+0'));            // NaN
-console.log(filterInt('421hop'));            // NaN
-console.log(filterInt('hop1.61803398875'));  // NaN
-console.log(filterInt('1.61803398875'));     // NaN
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES1')}}</td>
-   <td>{{Spec2('ES1')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-15.1.2.2', 'parseInt')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-parseint-string-radix', 'parseInt')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-parseint-string-radix', 'parseInt')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.parseInt")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Objets_globaux/parseFloat", "parseFloat()")}}</li>
- <li>{{jsxref("Number.parseFloat()")}}</li>
- <li>{{jsxref("Number.parseInt()")}}</li>
- <li>{{jsxref("Objets_globaux/isNaN", "isNaN()")}}</li>
- <li>{{jsxref("Number.toString()")}}</li>
- <li>{{jsxref("Object.valueOf")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/parseint/index.md b/files/fr/web/javascript/reference/global_objects/parseint/index.md
new file mode 100644
index 0000000000..5f2b295b17
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/parseint/index.md
@@ -0,0 +1,179 @@
+---
+title: parseInt()
+slug: Web/JavaScript/Reference/Global_Objects/parseInt
+tags:
+  - JavaScript
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/parseInt
+original_slug: Web/JavaScript/Reference/Objets_globaux/parseInt
+---
+{{jsSidebar("Objects")}}
+
+La fonction **`parseInt()`** analyse une chaîne de caractère fournie en argument et renvoie un entier exprimé dans une base donnée.
+
+{{EmbedInteractiveExample("pages/js/globalprops-parseint.html")}}
+
+> **Attention :** On veillera à bien utiliser le second paramètre de la fonction pour éviter toute ambiguité sur la base numérique utilisée.
+
+## Syntaxe
+
+    parseInt(string, base);
+
+### Paramètres
+
+- `string`
+  - : La valeur qu'on souhaite analyser et convertir. Si l'argument `string` n'est pas une chaîne de caractères, elle sera convertie en une chaîne (grâce à l'opération abstraite [`ToString`](https://www.ecma-international.org/ecma-262/6.0/#sec-tostring)) . Les blancs contenus au début de l'argument sont ignorés.
+- `base`
+
+  - : Un entier compris entre 2 et 36 qui représente la [base](https://fr.wikipedia.org/wiki/Base_%28arithm%C3%A9tique%29) utilisée pour la valeur représentée dans la chaîne. La base communément utilisée est la base décimale et on utilisera donc `10` dans ce cas pour ce paramètre.
+
+    > **Attention :**La base par défaut n'est pas 10. Ce paramètre doit toujours être utilisé, en effet s'il n'est pas spécifié, le comportement de la fonction n'est pas garanti et peut varier d'une plate-forme à une autre.
+
+    Voir cependant la description ci-après qui explicite le comportement par défaut attendu.
+
+### Valeur de retour
+
+Un entier obtenu à partir de l'analyse de la chaîne de caractères. Si le premier caractère ne permet d'obtenir un nombre d'après la base fournie, ce sera {{jsxref("NaN")}} qui sera renvoyé.
+
+## Description
+
+La fonction `parseInt()` convertit le premier argument en une chaîne, l'analyse et renvoie un entier ou `NaN`. Si la valeur renvoyée n'est pas `NaN`, ce sera l'entier représentant le nombre contenu dans la chaîne dans la base donnée. Une base 10 est utilisée pour la base décimale, 8 pour la base octale, 16 pour la base hexadécimale. Pour les bases supérieures à `10`, les lettres de l'alphabet latin seront utilisées pour représenter les chiffres supérieurs à `9`. Par exemple, pour la base hexadécimale, on utilisera les lettres `A` à `F`.
+
+Si, lors de l'analyse de la chaîne, `parseInt()` rencontre un caractère qui n'est pas un chiffre dans la base donnée, ce caractère, ainsi que les suivants seront ignorés. `parseInt()` tronque les nombres fournies en valeurs entières (attention donc lorsque les chaînes utilisent une notation scientifique : "4e2" donnera la valeur 4 en base 10 et pas 400). Les espaces en début et en fin de chaîne sont autorisés.
+
+Si la base fournie vaut {{jsxref("undefined")}} ou 0 (ou si elle n'est pas utilisée comme paramètre), le moteur JavaScript procèdera comme suit :
+
+- Si l'argument `string` commence avec "0x" ou "0X", la base considérée sera la base 16 (hexadécimale) et le reste de la chaîne sera analysé et converti.
+- Si l'argument `string` commence avec "0", la base considérée sera la base 8 (octale) ou la base 10 (décimale). La base exacte qui sera choisie dépendra de l'implémentation. ECMAScript 5 définit que la base 10 doit être utilisée. Cependant, cela n'est pas supporté par tous les navigateurs. C'est pour cette raison qu'il faut **toujours spécifier une base lorsqu'on utilise `parseInt()`**.
+- Si l'argument `string` commence avec une autre valeur, la base considérée sera la base 10.
+
+Si le premier caractère de la chaîne de caractères ne peut pas être converti, `parseInt()` renverra `NaN`.
+
+Pour des raisons arithmétiques, la valeur {{jsxref("NaN")}} n'est un nombre pour aucune base. La fonction {{jsxref("Objets_globaux/isNaN", "isNaN()")}} peut être utilisée pour déterminer si le résultat obtenu par `parseInt()` vaut `NaN`. Si `NaN` est utilisé dans une opération arithmétique, le résultat de cette opération sera aussi `NaN` (on dit que `NaN` est une valeur « toxique »).
+
+Pour convertir un nombre en une chaîne de caractères dans une base donnée, on utilisera `monEntier.toString(base)`.
+
+`parseInt` convertira les valeurs {{jsxref("BigInt")}} en {{jsxref("Number")}} et de la précision sera perdue lors de ce traitement.
+
+## Exemples
+
+Les exemples suivants renvoient tous **`15`** :
+
+```js
+parseInt("0xF", 16);
+parseInt("F", 16);
+parseInt("17", 8);
+parseInt(021, 8);
+parseInt("015", 10); // attention parseInt(015, 10); renvoie 13
+parseInt(15.99, 10);
+parseInt("15,123", 10);
+parseInt("FXX123", 16);
+parseInt("1111", 2);
+parseInt("15*3", 10);
+parseInt("15e2", 10);
+parseInt("15px", 10);
+parseInt("12", 13);
+```
+
+Les exemples suivants renvoient **`NaN`** :
+
+```js
+parseInt("Coucou", 8); // Ce sont des lettres et pas des chiffres
+parseInt("546", 2);    // Ces chiffres ne sont pas valides pour une représentation
+                       // binaire
+```
+
+Les exemples suivants renvoient tous **`-15`** :
+
+```js
+parseInt("-F", 16);
+parseInt("-0F", 16);
+parseInt("-0XF", 16);
+parseInt(-15.1, 10)
+parseInt("-17", 8);
+parseInt("-15", 10);
+parseInt("-1111", 2);
+parseInt("-15e1", 10);
+parseInt("-12", 13);
+```
+
+Les exemples suivants renvoient tous **`4`** :
+
+```js
+parseInt("4e2", 10);
+parseInt("4.7", 10);
+```
+
+L'exemple suivant renvoie  **`224`** :
+
+```js
+parseInt("0e0", 16);
+```
+
+On perdra en précision si on manipule un grand entier ({{jsxref("BigInt")}}) :
+
+```js
+parseInt(900719925474099267n); // 900719925474099300
+```
+
+## Interpréter une base octale quand aucun paramètre de base n'est fourni
+
+Bien que cela soit fortement déconseillé par ECMAScript 3 et que cela soit interdit par ECMAScript 5, de nombreuses implémentations interprètent une chaîne numérique qui commence par `0` comme une valeur exprimée dans la base octale. Les instructions qui suivent peuvent avoir un résultat octal ou décimal selon les implémentations. **Pour cette raison, il faut toujours définir une base lorsqu'on utilise cette fonction.**
+
+```js
+parseInt("0e0"); // 0
+parseInt("08");  // 0, '8' n'est pas un chiffre octal.
+```
+
+### ECMAScript 5 supprime l'interprétation octale
+
+La spécification ECMAScript 5 indique, au sujet de la fonction `parseInt()`, que les valeurs commençant par `0` ne doivent plus être considérées comme des valeurs octales. ECMAScript 5 indique :
+
+La fonction `parseInt` produit une valeur entière définie par le contenu de la chaîne selon la base fournie. Les blancs en début de chaîne sont ignorés. Si la base spécifiée est `0`, la base décimale sera prise en compte sauf si le nombre représenté commence par la paire de caractères `0x` ou `0X` auquel cas la base 16 sera prise en compte.
+
+Sur cet aspect, ECMAScript 3 diffère car il permet l'interprétation octale (bien qu'il la déconseille).
+
+De nombreuses implémentations n'ont pas adopté ce comportement en 2013. Pour cette raison (les anciens environnements et navigateurs doivent être supportés), il faut **toujours définir le paramètre pour la base**.
+
+## Une fonction plus stricte
+
+Il est parfois utile d'avoir une fonction de conversion plus stricte. Pour cela, on peut utiliser une expression rationnelle :
+
+```js
+filterInt = function (value) {
+  if (/^(-|\+)?(\d+|Infinity)$/.test(value))
+    return Number(value);
+  return NaN;
+}
+
+console.log(filterInt('421'));               // 421
+console.log(filterInt('-421'));              // -421
+console.log(filterInt('+421'));              // 421
+console.log(filterInt('Infinity'));          // Infinity
+console.log(filterInt('421e+0'));            // NaN
+console.log(filterInt('421hop'));            // NaN
+console.log(filterInt('hop1.61803398875'));  // NaN
+console.log(filterInt('1.61803398875'));     // NaN
+```
+
+## Spécifications
+
+| Spécification                                                                            | État                         | Commentaires         |
+| ---------------------------------------------------------------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName('ES1')}}                                                                 | {{Spec2('ES1')}}         | Définition initiale. |
+| {{SpecName('ES5.1', '#sec-15.1.2.2', 'parseInt')}}                     | {{Spec2('ES5.1')}}     |                      |
+| {{SpecName('ES6', '#sec-parseint-string-radix', 'parseInt')}}         | {{Spec2('ES6')}}         |                      |
+| {{SpecName('ESDraft', '#sec-parseint-string-radix', 'parseInt')}} | {{Spec2('ESDraft')}} |                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.parseInt")}}
+
+## Voir aussi
+
+- {{jsxref("Objets_globaux/parseFloat", "parseFloat()")}}
+- {{jsxref("Number.parseFloat()")}}
+- {{jsxref("Number.parseInt()")}}
+- {{jsxref("Objets_globaux/isNaN", "isNaN()")}}
+- {{jsxref("Number.toString()")}}
+- {{jsxref("Object.valueOf")}}
diff --git a/files/fr/web/javascript/reference/global_objects/promise/all/index.html b/files/fr/web/javascript/reference/global_objects/promise/all/index.html
deleted file mode 100644
index 1f62847df2..0000000000
--- a/files/fr/web/javascript/reference/global_objects/promise/all/index.html
+++ /dev/null
@@ -1,223 +0,0 @@
----
-title: Promise.all()
-slug: Web/JavaScript/Reference/Global_Objects/Promise/all
-tags:
-  - ECMAScript 2015
-  - JavaScript
-  - Méthode
-  - Promise
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Promise/all
-original_slug: Web/JavaScript/Reference/Objets_globaux/Promise/all
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <code><strong>Promise.all()</strong></code> renvoie une promesse ({{jsxref("Promise")}}) qui est résolue lorsque l'ensemble des promesses contenues dans l'itérable passé en argument ont été résolues ou qui échoue avec la raison de la première promesse qui échoue au sein de l'itérable.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/promise-all.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">Promise.all(<var>iterable</var>);</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>iterable</code></dt>
- <dd>Un objet <a href="/fr/docs/Web/JavaScript/Reference/Les_protocoles_iteration#Le_protocole_«_itérable_»">itérable</a> (tel qu'un tableau ({{jsxref("Array")}})) contenant des promesses.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Un objet {{jsxref("Promise")}} qui est</p>
-
-<ul>
- <li>résolue immédiatement si l'itérable passé en argument est vide</li>
- <li>résolue de façon asynchrone si l'itérable passé en argument ne contient aucune promesse (Chrome 58 renvoie immédiatement une promesse résolue dans ce cas)</li>
- <li>en attente de résolution asynchrone dans les autres cas.</li>
-</ul>
-
-<h2 id="Description">Description</h2>
-
-<p>Cette méthode peut être utile lorsqu'on souhaite agréger le résultat de plusieurs promesses.</p>
-
-<dl>
- <dt>Valeur de résolution</dt>
- <dd>Si toutes les promesses de l'itérable sont tenues, <code>Promise.all</code> est tenue et la valeur de résolution est un tableau qui contient les valeurs de résolution respectives des promesses de l'itérable (dans le même ordre). Si l'argument utilisé est un tableau vide, la méthode résoud la promesse immédiatement et de façon synchrone.</dd>
- <dt>Valeur d'échec</dt>
- <dd>Si l'une des promesses de l'itérable échoue, <code>Promise.all</code> échoue immédiatement et utilise la raison de l'échec (que les autres promesses aient été résolues ou non).</dd>
-</dl>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Utiliser_Promise.all()">Utiliser <code>Promise.all()</code></h3>
-
-<p><code>Promise.all()</code> attend que l'ensemble des promesses soient tenues ou qu'une promesse soit rompue :</p>
-
-<pre class="brush: js">var p1 = Promise.resolve(3);
-var p2 = 1337;
-var p3 = new Promise((resolve, reject) =&gt; {
-  setTimeout(resolve, 100, 'foo');
-});
-
-Promise.all([p1, p2, p3]).then(values =&gt; {
-  console.log(values); // [3, 1337, "foo"]
-});</pre>
-
-<h3 id="Promise.all()_un_échec_rapide"><code>Promise.all()</code>, un échec rapide</h3>
-
-<p>La promesse créée par <code>Promise.all()</code> échoue immédiatement si l'une des promesses échoue. Dans l'exemple suivant, on fournit quatre promesses qui sont résolues après une certaine durée et une autre promesse qui est rompue immédiatement : on peut alors voir que la promesse créée par <code>Promise.all()</code> est rompue immédiatement.</p>
-
-<pre class="brush: js">var p1 = new Promise((resolve, reject) =&gt; {
-  setTimeout(resolve, 1000, 'un');
-});
-var p2 = new Promise((resolve, reject) =&gt; {
-  setTimeout(resolve, 2000, 'deux');
-});
-var p3 = new Promise((resolve, reject) =&gt; {
-  setTimeout(resolve, 3000, 'trois');
-});
-var p4 = new Promise((resolve, reject) =&gt; {
-  setTimeout(resolve, 4000, 'quatre');
-});
-var p5 = new Promise((resolve, reject) =&gt; {
-  reject('rejet');
-});
-
-Promise.all([p1, p2, p3, p4, p5]).then(values =&gt; {
-  console.log(values);
-}, reason =&gt; {
-  console.log(reason)
-});
-
-// Dans la console :
-// "rejet"
-
-//On peut aussi employer .catch
-Promise.all([p1, p2, p3, p4, p5]).then(values =&gt; {
-  console.log(values);
-}).catch(reason =&gt; {
-  console.log(reason)
-});
-
-// Dans la console :
-// "rejet"
-
-</pre>
-
-<p>Il est possible de modifier ce comportement en gérant les éventuels échecs :</p>
-
-<pre class="brush: js">var p1 = new Promise((resolve, reject) =&gt; {
-  setTimeout(resolve, 1000, 'p1_resolution_retardee');
-});
-
-var p2 = new Promise((resolve, reject) =&gt; {
-  reject(new Error('p2_rejet_immediat'));
-});
-
-Promise.all([
-  p1.catch(error =&gt; { return error }),
-  p2.catch(error =&gt; { return error }),
-]).then(values =&gt; {
-  console.log(values[0]); // "p1_resolution_retardee"
-  console.log(values[1]); // "Error: p2_rejet_immediat"
-})
-</pre>
-
-<h3 id="Caractère_asynchrone_de_Promise.all()">Caractère asynchrone de <code>Promise.all()</code></h3>
-
-<p>Dans l'exemple qui suit, on illustre le caractère asynchrone de <code>Promise.all()</code> (et son caractère synchrone quand l'itérable passé en argument est vide) :</p>
-
-<pre class="brush: js">// On passe un tableau de promesses déjà résolues
-// afin de déclencher Promise.all dès que possible
-var resolvedPromisesArray = [Promise.resolve(33), Promise.resolve(44)];
-
-var p = Promise.all(resolvedPromisesArray);
-// on affiche la valeur de p dans la console
-console.log(p);
-
-// on utilise la méthode setTimeout pour exécuter
-// du code dès que la pile est vide
-setTimeout(function() {
-    console.log('La pile est vide');
-    console.log(p);
-});
-
-// Cela affichera dans la console (et dans cet ordre) :
-// Promise { &lt;state&gt;: "pending" }
-// La pile est vide
-// Promise { &lt;state&gt;: "fulfilled", &lt;value&gt;: Array[2] }
-</pre>
-
-<p>On aura le même comportement si <code>Promise.all</code> produit une promesse rompue :</p>
-
-<pre class="brush: js">var mixedPromisesArray = [Promise.resolve(33), Promise.reject(44)];
-var p = Promise.all(mixedPromisesArray);
-console.log(p);
-setTimeout(function() {
-    console.log('La pile est vide');
-    console.log(p);
-});
-
-// Affichera :
-// Promise { &lt;state&gt;: "pending" }
-// La pile est vide
-// Promise { &lt;state&gt;: "rejected", &lt;reason&gt;: 44 }
-</pre>
-
-<p>En revanche, <code>Promise.all</code> produit une promesse résolue de façon synchrone si et seulement si l'itérable est vide :</p>
-
-<pre class="brush: js">var p = Promise.all([]); // immédiatement résolue
-
-// les valeurs qui ne sont pas des promesses
-// seront ignorées mais l'évaluation sera effectuée
-// de façon asynchrone
-var p2 = Promise.all([1337, "hi"]);
-console.log(p);
-console.log(p2)
-setTimeout(function() {
-    console.log('La pile est vide');
-    console.log(p2);
-});
-
-// Affichera :
-// Promise { &lt;state&gt;: "fulfilled", &lt;value&gt;: Array[0] }
-// Promise { &lt;state&gt;: "pending" }
-// La pile est vide
-// Promise { &lt;state&gt;: "fulfilled", &lt;value&gt;: Array[2] }
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-promise.all', 'Promise.all')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td>Définition initiale dans un standard ECMA.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-promise.all', 'Promise.all')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Promise.all")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Promise")}}</li>
- <li>{{jsxref("Promise.race()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/promise/all/index.md b/files/fr/web/javascript/reference/global_objects/promise/all/index.md
new file mode 100644
index 0000000000..9db4fac33d
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/promise/all/index.md
@@ -0,0 +1,204 @@
+---
+title: Promise.all()
+slug: Web/JavaScript/Reference/Global_Objects/Promise/all
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Méthode
+  - Promise
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Promise/all
+original_slug: Web/JavaScript/Reference/Objets_globaux/Promise/all
+---
+{{JSRef}}
+
+La méthode **`Promise.all()`** renvoie une promesse ({{jsxref("Promise")}}) qui est résolue lorsque l'ensemble des promesses contenues dans l'itérable passé en argument ont été résolues ou qui échoue avec la raison de la première promesse qui échoue au sein de l'itérable.
+
+{{EmbedInteractiveExample("pages/js/promise-all.html")}}
+
+## Syntaxe
+
+    Promise.all(iterable);
+
+### Paramètres
+
+- `iterable`
+  - : Un objet [itérable](/fr/docs/Web/JavaScript/Reference/Les_protocoles_iteration#Le_protocole_«_itérable_») (tel qu'un tableau ({{jsxref("Array")}})) contenant des promesses.
+
+### Valeur de retour
+
+Un objet {{jsxref("Promise")}} qui est
+
+- résolue immédiatement si l'itérable passé en argument est vide
+- résolue de façon asynchrone si l'itérable passé en argument ne contient aucune promesse (Chrome 58 renvoie immédiatement une promesse résolue dans ce cas)
+- en attente de résolution asynchrone dans les autres cas.
+
+## Description
+
+Cette méthode peut être utile lorsqu'on souhaite agréger le résultat de plusieurs promesses.
+
+- Valeur de résolution
+  - : Si toutes les promesses de l'itérable sont tenues, `Promise.all` est tenue et la valeur de résolution est un tableau qui contient les valeurs de résolution respectives des promesses de l'itérable (dans le même ordre). Si l'argument utilisé est un tableau vide, la méthode résoud la promesse immédiatement et de façon synchrone.
+- Valeur d'échec
+  - : Si l'une des promesses de l'itérable échoue, `Promise.all` échoue immédiatement et utilise la raison de l'échec (que les autres promesses aient été résolues ou non).
+
+## Exemples
+
+### Utiliser `Promise.all()`
+
+`Promise.all()` attend que l'ensemble des promesses soient tenues ou qu'une promesse soit rompue :
+
+```js
+var p1 = Promise.resolve(3);
+var p2 = 1337;
+var p3 = new Promise((resolve, reject) => {
+  setTimeout(resolve, 100, 'foo');
+});
+
+Promise.all([p1, p2, p3]).then(values => {
+  console.log(values); // [3, 1337, "foo"]
+});
+```
+
+### `Promise.all()`, un échec rapide
+
+La promesse créée par `Promise.all()` échoue immédiatement si l'une des promesses échoue. Dans l'exemple suivant, on fournit quatre promesses qui sont résolues après une certaine durée et une autre promesse qui est rompue immédiatement : on peut alors voir que la promesse créée par `Promise.all()` est rompue immédiatement.
+
+```js
+var p1 = new Promise((resolve, reject) => {
+  setTimeout(resolve, 1000, 'un');
+});
+var p2 = new Promise((resolve, reject) => {
+  setTimeout(resolve, 2000, 'deux');
+});
+var p3 = new Promise((resolve, reject) => {
+  setTimeout(resolve, 3000, 'trois');
+});
+var p4 = new Promise((resolve, reject) => {
+  setTimeout(resolve, 4000, 'quatre');
+});
+var p5 = new Promise((resolve, reject) => {
+  reject('rejet');
+});
+
+Promise.all([p1, p2, p3, p4, p5]).then(values => {
+  console.log(values);
+}, reason => {
+  console.log(reason)
+});
+
+// Dans la console :
+// "rejet"
+
+//On peut aussi employer .catch
+Promise.all([p1, p2, p3, p4, p5]).then(values => {
+  console.log(values);
+}).catch(reason => {
+  console.log(reason)
+});
+
+// Dans la console :
+// "rejet"
+```
+
+Il est possible de modifier ce comportement en gérant les éventuels échecs :
+
+```js
+var p1 = new Promise((resolve, reject) => {
+  setTimeout(resolve, 1000, 'p1_resolution_retardee');
+});
+
+var p2 = new Promise((resolve, reject) => {
+  reject(new Error('p2_rejet_immediat'));
+});
+
+Promise.all([
+  p1.catch(error => { return error }),
+  p2.catch(error => { return error }),
+]).then(values => {
+  console.log(values[0]); // "p1_resolution_retardee"
+  console.log(values[1]); // "Error: p2_rejet_immediat"
+})
+```
+
+### Caractère asynchrone de `Promise.all()`
+
+Dans l'exemple qui suit, on illustre le caractère asynchrone de `Promise.all()` (et son caractère synchrone quand l'itérable passé en argument est vide) :
+
+```js
+// On passe un tableau de promesses déjà résolues
+// afin de déclencher Promise.all dès que possible
+var resolvedPromisesArray = [Promise.resolve(33), Promise.resolve(44)];
+
+var p = Promise.all(resolvedPromisesArray);
+// on affiche la valeur de p dans la console
+console.log(p);
+
+// on utilise la méthode setTimeout pour exécuter
+// du code dès que la pile est vide
+setTimeout(function() {
+    console.log('La pile est vide');
+    console.log(p);
+});
+
+// Cela affichera dans la console (et dans cet ordre) :
+// Promise { <state>: "pending" }
+// La pile est vide
+// Promise { <state>: "fulfilled", <value>: Array[2] }
+```
+
+On aura le même comportement si `Promise.all` produit une promesse rompue :
+
+```js
+var mixedPromisesArray = [Promise.resolve(33), Promise.reject(44)];
+var p = Promise.all(mixedPromisesArray);
+console.log(p);
+setTimeout(function() {
+    console.log('La pile est vide');
+    console.log(p);
+});
+
+// Affichera :
+// Promise { <state>: "pending" }
+// La pile est vide
+// Promise { <state>: "rejected", <reason>: 44 }
+```
+
+En revanche, `Promise.all` produit une promesse résolue de façon synchrone si et seulement si l'itérable est vide :
+
+```js
+var p = Promise.all([]); // immédiatement résolue
+
+// les valeurs qui ne sont pas des promesses
+// seront ignorées mais l'évaluation sera effectuée
+// de façon asynchrone
+var p2 = Promise.all([1337, "hi"]);
+console.log(p);
+console.log(p2)
+setTimeout(function() {
+    console.log('La pile est vide');
+    console.log(p2);
+});
+
+// Affichera :
+// Promise { <state>: "fulfilled", <value>: Array[0] }
+// Promise { <state>: "pending" }
+// La pile est vide
+// Promise { <state>: "fulfilled", <value>: Array[2] }
+```
+
+## Spécifications
+
+| Spécification                                                                | État                         | Commentaires                               |
+| ---------------------------------------------------------------------------- | ---------------------------- | ------------------------------------------ |
+| {{SpecName('ES2015', '#sec-promise.all', 'Promise.all')}} | {{Spec2('ES2015')}}     | Définition initiale dans un standard ECMA. |
+| {{SpecName('ESDraft', '#sec-promise.all', 'Promise.all')}} | {{Spec2('ESDraft')}} |                                            |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Promise.all")}}
+
+## Voir aussi
+
+- {{jsxref("Promise")}}
+- {{jsxref("Promise.race()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/promise/allsettled/index.html b/files/fr/web/javascript/reference/global_objects/promise/allsettled/index.html
deleted file mode 100644
index 0c3a050b1f..0000000000
--- a/files/fr/web/javascript/reference/global_objects/promise/allsettled/index.html
+++ /dev/null
@@ -1,65 +0,0 @@
----
-title: Promise.allSettled()
-slug: Web/JavaScript/Reference/Global_Objects/Promise/allSettled
-tags:
-  - JavaScript
-  - Méthode
-  - Promise
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Promise/allSettled
-original_slug: Web/JavaScript/Reference/Objets_globaux/Promise/allSettled
----
-<p>{{JSRef}}</p>
-
-<p>La méthode <code><strong>Promise.allSettled()</strong></code> renvoie une promesse qui est résolue une fois que l'ensemble des promesses de l'itérable passée en argument sont réussies ou rejetées. La valeur de résolution de cette promesse est un tableau d'objets dont chacun est le résultat de chaque promesse de l'itérable.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/promise-allsettled.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><em>p</em>.allSettled(<em>iterable</em>);</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>iterable</code></dt>
- <dd>Un objet <a href="/fr/docs/Web/JavaScript/Reference/Les_protocoles_iteration">itérable</a> tel qu'un tableau ({{jsxref("Array")}}) dont chaque élément est une promesse ({{jsxref("Promise")}}.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Une promesse ({{jsxref("Promise")}}) <strong>en cours</strong> qui sera résolue de façon <strong>asynchrone</strong> une fois que chaque promesse de l'itérable a été résolue (tenue/réussie ou rejetée/échouée). Le gestionnaire passé à la promesse retournée recevra comme argument un tableau de valeur dont chacune est le résultat de chaque promesse de l'itérable initial.</p>
-
-<p>Pour chaque objet contenu dans ce tableau, il y aura une propriété <code>status</code> qui est une chaîne de caractères. Si <code>status</code> vaut <code>fulfilled</code>, alors on aura une propriété <code>value</code>. Si <code>status</code> vaut <code>rejected</code>, alors une propriété <code>reason</code> sera présente. La valeur (ou la raison) reflète la valeur de résolution de la promesse.</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><a href="https://tc39.es/proposal-promise-allSettled/"><code>Promise.allSettled()</code> (Brouillon TC39 au niveau 4)</a></td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Promise.allSettled")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/JavaScript/Guide/Utiliser_les_promesses">Guide - Utiliser les promesses</a></li>
- <li><a href="/fr/docs/Learn/JavaScript/Asynchronous/Promises">Programmation asynchrone à l'aide des promesses</a></li>
- <li>{{jsxref("Promise")}}</li>
- <li>{{jsxref("Promise.all()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/promise/allsettled/index.md b/files/fr/web/javascript/reference/global_objects/promise/allsettled/index.md
new file mode 100644
index 0000000000..b0637bf581
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/promise/allsettled/index.md
@@ -0,0 +1,48 @@
+---
+title: Promise.allSettled()
+slug: Web/JavaScript/Reference/Global_Objects/Promise/allSettled
+tags:
+  - JavaScript
+  - Méthode
+  - Promise
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Promise/allSettled
+original_slug: Web/JavaScript/Reference/Objets_globaux/Promise/allSettled
+---
+{{JSRef}}
+
+La méthode **`Promise.allSettled()`** renvoie une promesse qui est résolue une fois que l'ensemble des promesses de l'itérable passée en argument sont réussies ou rejetées. La valeur de résolution de cette promesse est un tableau d'objets dont chacun est le résultat de chaque promesse de l'itérable.
+
+{{EmbedInteractiveExample("pages/js/promise-allsettled.html")}}
+
+## Syntaxe
+
+    p.allSettled(iterable);
+
+### Paramètres
+
+- `iterable`
+  - : Un objet [itérable](/fr/docs/Web/JavaScript/Reference/Les_protocoles_iteration) tel qu'un tableau ({{jsxref("Array")}}) dont chaque élément est une promesse ({{jsxref("Promise")}}.
+
+### Valeur de retour
+
+Une promesse ({{jsxref("Promise")}}) **en cours** qui sera résolue de façon **asynchrone** une fois que chaque promesse de l'itérable a été résolue (tenue/réussie ou rejetée/échouée). Le gestionnaire passé à la promesse retournée recevra comme argument un tableau de valeur dont chacune est le résultat de chaque promesse de l'itérable initial.
+
+Pour chaque objet contenu dans ce tableau, il y aura une propriété `status` qui est une chaîne de caractères. Si `status` vaut `fulfilled`, alors on aura une propriété `value`. Si `status` vaut `rejected`, alors une propriété `reason` sera présente. La valeur (ou la raison) reflète la valeur de résolution de la promesse.
+
+## Spécifications
+
+| Spécification                                                                                       | État                         | Commentaires |
+| --------------------------------------------------------------------------------------------------- | ---------------------------- | ------------ |
+| [`Promise.allSettled()` (Brouillon TC39 au niveau 4)](https://tc39.es/proposal-promise-allSettled/) | {{Spec2('ESDraft')}} |              |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Promise.allSettled")}}
+
+## Voir aussi
+
+- [Guide - Utiliser les promesses](/fr/docs/Web/JavaScript/Guide/Utiliser_les_promesses)
+- [Programmation asynchrone à l'aide des promesses](/fr/docs/Learn/JavaScript/Asynchronous/Promises)
+- {{jsxref("Promise")}}
+- {{jsxref("Promise.all()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/promise/any/index.html b/files/fr/web/javascript/reference/global_objects/promise/any/index.html
deleted file mode 100644
index a7ac089348..0000000000
--- a/files/fr/web/javascript/reference/global_objects/promise/any/index.html
+++ /dev/null
@@ -1,146 +0,0 @@
----
-title: Promise.any()
-slug: Web/JavaScript/Reference/Global_Objects/Promise/any
-tags:
-  - JavaScript
-  - Method
-  - Méthode
-  - Promise
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Promise/any
-original_slug: Web/JavaScript/Reference/Objets_globaux/Promise/any
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <strong><code>Promise.any()</code></strong> prend comme argument un itérable contenant des objets {{JSxRef("Promise")}} et, dès qu'une des promesses de cet itérable est tenue, renvoie une unique promesse résolue avec la valeur de la promesse résolue. Si aucune promesse de l'itérable n'est tenue (c'est-à-dire si toutes les promesses sont rejetées), la promesse renvoyée est rompue avec un objet {{JSxRef("Objets_globaux/AggregateError", "AggregateError")}} (une nouvelle sous-classe de {{JSxRef("Error")}} qui regroupe un ensemble d'erreurs). Cette méthode fait essentiellement le <em>contraire</em> de {{JSxRef("Promise.all()")}} (qui renvoie une promesse tenue uniquement si toutes les promesses de l'itérable passé en argument ont été tenues).</p>
-
-<p>{{EmbedInteractiveExample("pages/js/promise-any.html")}}</p>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="notranslate">Promise.any(<var>iterable</var>);</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>iterable</code></dt>
- <dd>Un objet <a href="/fr/docs/Web/JavaScript/Reference/Les_protocoles_iteration">itérable</a> tel qu'un tableau ({{JSxRef("Array")}}) contenant des promesses ({{jsxref("Promise")}}).</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<ul>
- <li>Une promesse ({{jsxref("Promise")}}) <strong>déjà résolue</strong> si l'itérable passé en argument est vide.</li>
- <li>Une promesse ({{jsxref("Promise")}}) <strong>résolue en asynchrone</strong> si l'itérable passé en argument ne contient pas de promesses.</li>
- <li>Une promesse ({{jsxref("Promise")}}) <strong>en attente</strong> dans tous les autres cas. La promesse renvoyée est résolue (qu'elle soit tenue ou rompue) <strong>de façon asynchrone</strong> lorsqu'au moins une des promesses de l'itérable est tenue ou si toutes les promesses ont été rompues.</li>
-</ul>
-
-<h2 id="Description">Description</h2>
-
-<p>Cette méthode est utile afin de renvoyer la première promesse tenue d'un ensemble de promesse. Elle permet de court-circuiter dès qu'une promesse est tenue, sans attendre que les autres promesses soient résolues. Contrairement à {{JSxRef("Promise.all()")}} qui renvoie un tableau avec les valeurs de résolution des promesses, on a ici une seule valeur de résolution (celle de la première promesse tenue). Ce peut être bénéfique lorsqu'on a un ensemble de promesses et qu'on ne souhaite en résoudre qu'une sans se soucier de savoir laquelle des promesses a été tenue en premier.</p>
-
-<p>À la différence de {{JSxRef("Promise.race()")}} qui renvoie la valeur de la première promesse résolue (qu'elle ait été tenue ou rompue), <code>Promise.any()</code> renvoie une promesse avec la valeur de la première promesse <em>tenue</em>. Cette méthode ignore les promesses qui sont rompues jusqu'à obtenir une promesse tenue.</p>
-
-<h3 id="Une_des_promesses_est_tenue">Une des promesses est tenue</h3>
-
-<p>La promesse renvoyée par <code>Promise.any()</code> est résolue avec la première valeur résolue de l'itérable, qu'il s'agisse d'une promesse ou non, et que les autres promesses de l'itérable aient échoué ou non.</p>
-
-<ul>
- <li>Si une des promesses de l'itérable (non vide) est tenue ou que les valeurs fournies dans l'itérable ne sont pas des promesses, alors la promesse renvoyée par <code>Promise.any()</code> est résolue de façon asynchrone.</li>
-</ul>
-
-<h3 id="Toutes_les_promesses_sont_rompues">Toutes les promesses sont rompues</h3>
-
-<p>Si toutes les promesses de l'itérable échouent, <code>Promise.any()</code> échoue de asynchrone avec pour valeur d'échec un objet {{JSxRef("Objets_globaux/AggregateError", "AggregateError")}}, qui étend {{JSxRef("Error")}}, et contient une propriété <code>errors</code> qui est un tableau contenant l'ensemble des valeurs d'échec des différentes promesses de l'itérable.</p>
-
-<ul>
- <li>Si l'itérable reçu était vide, alors la promesse retournée par cette méthode est rejetée de manière synchrone et la propriété <code>errors</code> de l'objet <code>AggregateError</code> est un tableau vide.</li>
-</ul>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Première_résolue">Première résolue</h3>
-
-<p><code>Promise.any()</code> prend pour valeur de résolution celle de la première promesse résolue, et ce même si une des promesses de l'itérable a échoué avant. Ce comportement est différent de ce {{JSxRef("Promise.race()")}}, qui s'arrête à la première promesse qui se termine avec sa valeur de résolution ou d'échec.</p>
-
-<pre class="brush: js notranslate">const pErr = new Promise((resolve, reject) =&gt; {
-  reject("J'échoue toujours");
-});
-
-const pLente = new Promise((resolve, reject) =&gt; {
-  setTimeout(resolve, 500, "Éventuellement résolue");
-});
-
-const pRapide = new Promise((resolve, reject) =&gt; {
-  setTimeout(resolve, 100, "Rapidement résolue");
-});
-
-Promise.any([pErr, pLente, pRapide]).then((valeur) =&gt; {
-  console.log(valeur);
-  // pRapide s'est résolue en premier
-});
-// résultat attendu : "Rapidement résolue"</pre>
-
-<h3 id="Échec_avec_AggregateError">Échec avec AggregateError</h3>
-
-<p><code>Promise.any()</code> échoue avec un objet {{JSxRef("AggregateError")}} si aucun des promesses n'est résolue.</p>
-
-<pre class="brush: js notranslate">const pErr = new Promise((resolve, reject) =&gt; {
-  reject("J'échoue toujours");
-});
-
-Promise.any([pErr]).catch((err) =&gt; {
-  console.log(err);
-})
-// résultat attendu : "AggregateError: No Promise in Promise.any was resolved"</pre>
-
-<h3 id="Afficher_la_première_image_chargée">Afficher la première image chargée</h3>
-
-<p>Dans cet exemple, nous avons une fonction qui requête une image et retourne un Blob. Nous utilisons <code>Promise.any()</code> pour requêter plusieurs images et afficher la première qui nous sera disponible (c'est-à-dire dont la promesse sera résolue).</p>
-
-<pre class="brush: js notranslate">function fetchAndDecode(url) {
-  return fetch(url).then(réponse =&gt; {
-    if (!réponse.ok)
-      throw new Error(`Erreur HTTP ! état : ${response.status}`);
-    else
-      return réponse.blob();
-  })
-}
-
-let café = fetchAndDecode('coffee.jpg');
-let thé = fetchAndDecode('tea.jpg');
-
-Promise.any([café, thé]).then(valeur =&gt; {
-  let URLobjet = URL.createObjectURL(valeur);
-  let image = document.createElement('img');
-  image.src = URLobjet;
-  document.body.appendChild(image);
-})
-.catch(e =&gt; {
-  console.log(e.message);
-});</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <td><strong>Spécification</strong></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('Promise.any')}}</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Promise.any")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{JSxRef("Promise")}}</li>
- <li>{{JSxRef("Promise.all()")}}</li>
- <li>{{JSxRef("Promise.race()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/promise/any/index.md b/files/fr/web/javascript/reference/global_objects/promise/any/index.md
new file mode 100644
index 0000000000..8910cfbd6d
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/promise/any/index.md
@@ -0,0 +1,142 @@
+---
+title: Promise.any()
+slug: Web/JavaScript/Reference/Global_Objects/Promise/any
+tags:
+  - JavaScript
+  - Method
+  - Méthode
+  - Promise
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Promise/any
+original_slug: Web/JavaScript/Reference/Objets_globaux/Promise/any
+---
+{{JSRef}}
+
+La méthode **`Promise.any()`** prend comme argument un itérable contenant des objets {{JSxRef("Promise")}} et, dès qu'une des promesses de cet itérable est tenue, renvoie une unique promesse résolue avec la valeur de la promesse résolue. Si aucune promesse de l'itérable n'est tenue (c'est-à-dire si toutes les promesses sont rejetées), la promesse renvoyée est rompue avec un objet {{JSxRef("Objets_globaux/AggregateError", "AggregateError")}} (une nouvelle sous-classe de {{JSxRef("Error")}} qui regroupe un ensemble d'erreurs). Cette méthode fait essentiellement le _contraire_ de {{JSxRef("Promise.all()")}} (qui renvoie une promesse tenue uniquement si toutes les promesses de l'itérable passé en argument ont été tenues).
+
+{{EmbedInteractiveExample("pages/js/promise-any.html")}}
+
+## Syntaxe
+
+    Promise.any(iterable);
+
+### Paramètres
+
+- `iterable`
+  - : Un objet [itérable](/fr/docs/Web/JavaScript/Reference/Les_protocoles_iteration) tel qu'un tableau ({{JSxRef("Array")}}) contenant des promesses ({{jsxref("Promise")}}).
+
+### Valeur de retour
+
+- Une promesse ({{jsxref("Promise")}}) **déjà résolue** si l'itérable passé en argument est vide.
+- Une promesse ({{jsxref("Promise")}}) **résolue en asynchrone** si l'itérable passé en argument ne contient pas de promesses.
+- Une promesse ({{jsxref("Promise")}}) **en attente** dans tous les autres cas. La promesse renvoyée est résolue (qu'elle soit tenue ou rompue) **de façon asynchrone** lorsqu'au moins une des promesses de l'itérable est tenue ou si toutes les promesses ont été rompues.
+
+## Description
+
+Cette méthode est utile afin de renvoyer la première promesse tenue d'un ensemble de promesse. Elle permet de court-circuiter dès qu'une promesse est tenue, sans attendre que les autres promesses soient résolues. Contrairement à {{JSxRef("Promise.all()")}} qui renvoie un tableau avec les valeurs de résolution des promesses, on a ici une seule valeur de résolution (celle de la première promesse tenue). Ce peut être bénéfique lorsqu'on a un ensemble de promesses et qu'on ne souhaite en résoudre qu'une sans se soucier de savoir laquelle des promesses a été tenue en premier.
+
+À la différence de {{JSxRef("Promise.race()")}} qui renvoie la valeur de la première promesse résolue (qu'elle ait été tenue ou rompue), `Promise.any()` renvoie une promesse avec la valeur de la première promesse _tenue_. Cette méthode ignore les promesses qui sont rompues jusqu'à obtenir une promesse tenue.
+
+### Une des promesses est tenue
+
+La promesse renvoyée par `Promise.any()` est résolue avec la première valeur résolue de l'itérable, qu'il s'agisse d'une promesse ou non, et que les autres promesses de l'itérable aient échoué ou non.
+
+- Si une des promesses de l'itérable (non vide) est tenue ou que les valeurs fournies dans l'itérable ne sont pas des promesses, alors la promesse renvoyée par `Promise.any()` est résolue de façon asynchrone.
+
+### Toutes les promesses sont rompues
+
+Si toutes les promesses de l'itérable échouent, `Promise.any()` échoue de asynchrone avec pour valeur d'échec un objet {{JSxRef("Objets_globaux/AggregateError", "AggregateError")}}, qui étend {{JSxRef("Error")}}, et contient une propriété `errors` qui est un tableau contenant l'ensemble des valeurs d'échec des différentes promesses de l'itérable.
+
+- Si l'itérable reçu était vide, alors la promesse retournée par cette méthode est rejetée de manière synchrone et la propriété `errors` de l'objet `AggregateError` est un tableau vide.
+
+## Exemples
+
+### Première résolue
+
+`Promise.any()` prend pour valeur de résolution celle de la première promesse résolue, et ce même si une des promesses de l'itérable a échoué avant. Ce comportement est différent de ce {{JSxRef("Promise.race()")}}, qui s'arrête à la première promesse qui se termine avec sa valeur de résolution ou d'échec.
+
+```js
+const pErr = new Promise((resolve, reject) => {
+  reject("J'échoue toujours");
+});
+
+const pLente = new Promise((resolve, reject) => {
+  setTimeout(resolve, 500, "Éventuellement résolue");
+});
+
+const pRapide = new Promise((resolve, reject) => {
+  setTimeout(resolve, 100, "Rapidement résolue");
+});
+
+Promise.any([pErr, pLente, pRapide]).then((valeur) => {
+  console.log(valeur);
+  // pRapide s'est résolue en premier
+});
+// résultat attendu : "Rapidement résolue"
+```
+
+### Échec avec AggregateError
+
+`Promise.any()` échoue avec un objet {{JSxRef("AggregateError")}} si aucun des promesses n'est résolue.
+
+```js
+const pErr = new Promise((resolve, reject) => {
+  reject("J'échoue toujours");
+});
+
+Promise.any([pErr]).catch((err) => {
+  console.log(err);
+})
+// résultat attendu : "AggregateError: No Promise in Promise.any was resolved"
+```
+
+### Afficher la première image chargée
+
+Dans cet exemple, nous avons une fonction qui requête une image et retourne un Blob. Nous utilisons `Promise.any()` pour requêter plusieurs images et afficher la première qui nous sera disponible (c'est-à-dire dont la promesse sera résolue).
+
+```js
+function fetchAndDecode(url) {
+  return fetch(url).then(réponse => {
+    if (!réponse.ok)
+      throw new Error(`Erreur HTTP ! état : ${response.status}`);
+    else
+      return réponse.blob();
+  })
+}
+
+let café = fetchAndDecode('coffee.jpg');
+let thé = fetchAndDecode('tea.jpg');
+
+Promise.any([café, thé]).then(valeur => {
+  let URLobjet = URL.createObjectURL(valeur);
+  let image = document.createElement('img');
+  image.src = URLobjet;
+  document.body.appendChild(image);
+})
+.catch(e => {
+  console.log(e.message);
+});
+```
+
+## Spécifications
+
+<table class="standard-table">
+  <tbody>
+    <tr>
+      <td><strong>Spécification</strong></td>
+    </tr>
+    <tr>
+      <td>{{SpecName('Promise.any')}}</td>
+    </tr>
+  </tbody>
+</table>
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Promise.any")}}
+
+## Voir aussi
+
+- {{JSxRef("Promise")}}
+- {{JSxRef("Promise.all()")}}
+- {{JSxRef("Promise.race()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/promise/catch/index.html b/files/fr/web/javascript/reference/global_objects/promise/catch/index.html
deleted file mode 100644
index eccaacb0cc..0000000000
--- a/files/fr/web/javascript/reference/global_objects/promise/catch/index.html
+++ /dev/null
@@ -1,161 +0,0 @@
----
-title: Promise.prototype.catch()
-slug: Web/JavaScript/Reference/Global_Objects/Promise/catch
-tags:
-  - ECMAScript 2015
-  - JavaScript
-  - Méthode
-  - Promise
-  - Prototype
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Promise/catch
-original_slug: Web/JavaScript/Reference/Objets_globaux/Promise/catch
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <code><strong>catch()</strong></code> renvoie un objet {{jsxref("Promise")}} et ne traite que des cas où la promesse initiale est rejetée. Elle a le même effet qu'un appel à {{jsxref("Promise.then", "Promise.prototype.then(undefined, siRejetée)")}} (c'est en fait ce qui se passe dans le moteur, <code>obj.catch(onRejected)</code> est traduit en <code>obj.then(undefined, onRejected)</code>). Cela signifie qu'il est nécessaire de fournir une fonction <code>onRejected</code>, même si on souhaite avoir une valeur de secours qui est <code>undefined</code> (par exemple avec <code>obj.catch(() =&gt; {})</code>.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/promise-catch.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>p.catch(siRejetée)</var>;
-
-p.catch(function(raison) {
-   // rejet
-});
-</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>siRejetée</code></dt>
- <dd>Une {{jsxref("Function","fonction","",1)}} à appeler si la <code>Promise</code> est rejetée (i.e. n'est pas tenue). Cette fonction possède un argument :
- <dl>
-  <dt><code>raison</code></dt>
-  <dd>Une chaîne de caractères qui indique pourquoi la promesse n'est pas tenue.</dd>
- </dl>
-
- <p>La promesse renvoyée par la méthode <code>catch()</code> est rompue si <code>siRejetée</code> lève une erreur ou si elle renvoie une promesse rompue. Dans les autres cas, elle est tenue.</p>
- </dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Une promesse ({{jsxref("Promise")}}).</p>
-
-<h2 id="Description">Description</h2>
-
-<p>La méthode <code>catch()</code> est utile pour gérer les cas d'erreur en cas de compositions de plusieurs promesses. Elle renvoie elle-même une promesse et peut donc être utilisée lorsqu'on <a href="/fr/docs/Web/JavaScript/Guide/Utiliser_les_promesses#Chaînage_après_un_catch">chaîne des promesses</a>, à l'instar de la méthode sœur qu'est {{jsxref("Promise.prototype.then()")}}.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Utilisation_de_la_méthode_catch">Utilisation de la méthode <code>catch</code></h3>
-
-<pre class="brush: js">var p1 = new Promise(function(resolve, reject) {
-  resolve("Succès");
-});
-
-p1.then(function(value) {
-  console.log(value); // "Succès!"
-  throw new Error("zut !");
-}).catch(function(e) {
-  console.error(e.message); // "zut !"
-}).then(function(e) {
-   console.log('après le catch, la chaîne est restaurée');
-});
-
-// Le code qui suit est équivalent :
-p1.then(function(value) {
-  console.log(value); // "Succès!"
-  return Promise.reject('zut !');
-}).catch(function(e) {
-  console.log(e); // "zut !"
-}).then(function(e){
-  console.log('après le catch, la chaîne est restaurée');
-});
-</pre>
-
-<h3 id="Les_promesses_n'interceptent_pas_les_exceptions_levées_de_façon_asynchrone">Les promesses n'interceptent pas les exceptions levées de façon asynchrone</h3>
-
-<pre class="brush: js">var p1 = new Promise(function(resolve, reject) {
-  throw new Error('Oh oh!');
-});
-
-p1.catch(function(e) {
-  console.log(e.message); // "Oh oh!"
-});
-
-var p2 = new Promise(function(resolve, reject) {
-  setTimeout(function() {
-    throw new Error('Exception invisible !');
-  }, 1000);
-});
-
-p2.catch(function(e) {
-  console.log(e.message); // Cela n'est jamais appelé
-});</pre>
-
-<h3 id="Démonstration_de_l'appel_interne_à_then">Démonstration de l'appel interne à <code>then</code></h3>
-
-<pre class="brush: js">// On surcharge Promise.prototype.then/catch
-// pour y ajouter des logs
-(function(Promise){
-    var originalThen = Promise.prototype.then;
-    var originalCatch = Promise.prototype.catch;
-
-    Promise.prototype.then = function(){
-        console.log('&gt; &gt; &gt; &gt; &gt; &gt; appel de .then sur %o avec les arguments: %o', this, arguments);
-        return originalThen.apply(this, arguments);
-    };
-    Promise.prototype.catch = function(){
-        console.log('&gt; &gt; &gt; &gt; &gt; &gt; appel de .catch sur %o avec les arguments: %o', this, arguments);
-        return originalCatch.apply(this, arguments);
-    };
-
-})(this.Promise);
-
-
-
-// On appelle catch sur une promesse déjà résolue
-Promise.resolve().catch(function XXX(){});
-
-// Dans la console, on aura :
-// &gt; &gt; &gt; &gt; &gt; &gt; appel de .catch sur Promise{} avec les arguments: Arguments{1} [0: function XXX()]
-// &gt; &gt; &gt; &gt; &gt; &gt; appel de .then sur Promise{} avec les arguments: Arguments{2} [0: undefined, 1: function XXX()]
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-promise.prototype.catch', 'Promise.prototype.catch')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td>Définition initiale au sein d'un standard ECMA.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-promise.prototype.catch', 'Promise.prototype.catch')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Promise.catch")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Promise")}}</li>
- <li>{{jsxref("Promise.prototype.then()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/promise/catch/index.md b/files/fr/web/javascript/reference/global_objects/promise/catch/index.md
new file mode 100644
index 0000000000..db86710409
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/promise/catch/index.md
@@ -0,0 +1,142 @@
+---
+title: Promise.prototype.catch()
+slug: Web/JavaScript/Reference/Global_Objects/Promise/catch
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Méthode
+  - Promise
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Promise/catch
+original_slug: Web/JavaScript/Reference/Objets_globaux/Promise/catch
+---
+{{JSRef}}
+
+La méthode **`catch()`** renvoie un objet {{jsxref("Promise")}} et ne traite que des cas où la promesse initiale est rejetée. Elle a le même effet qu'un appel à {{jsxref("Promise.then", "Promise.prototype.then(undefined, siRejetée)")}} (c'est en fait ce qui se passe dans le moteur, `obj.catch(onRejected)` est traduit en `obj.then(undefined, onRejected)`). Cela signifie qu'il est nécessaire de fournir une fonction `onRejected`, même si on souhaite avoir une valeur de secours qui est `undefined` (par exemple avec `obj.catch(() => {})`.
+
+{{EmbedInteractiveExample("pages/js/promise-catch.html")}}
+
+## Syntaxe
+
+    p.catch(siRejetée);
+
+    p.catch(function(raison) {
+       // rejet
+    });
+
+### Paramètres
+
+- `siRejetée`
+
+  - : Une {{jsxref("Function","fonction","",1)}} à appeler si la `Promise` est rejetée (i.e. n'est pas tenue). Cette fonction possède un argument :
+
+    - `raison`
+      - : Une chaîne de caractères qui indique pourquoi la promesse n'est pas tenue.
+
+    La promesse renvoyée par la méthode `catch()` est rompue si `siRejetée` lève une erreur ou si elle renvoie une promesse rompue. Dans les autres cas, elle est tenue.
+
+### Valeur de retour
+
+Une promesse ({{jsxref("Promise")}}).
+
+## Description
+
+La méthode `catch()` est utile pour gérer les cas d'erreur en cas de compositions de plusieurs promesses. Elle renvoie elle-même une promesse et peut donc être utilisée lorsqu'on [chaîne des promesses](/fr/docs/Web/JavaScript/Guide/Utiliser_les_promesses#Chaînage_après_un_catch), à l'instar de la méthode sœur qu'est {{jsxref("Promise.prototype.then()")}}.
+
+## Exemples
+
+### Utilisation de la méthode `catch`
+
+```js
+var p1 = new Promise(function(resolve, reject) {
+  resolve("Succès");
+});
+
+p1.then(function(value) {
+  console.log(value); // "Succès!"
+  throw new Error("zut !");
+}).catch(function(e) {
+  console.error(e.message); // "zut !"
+}).then(function(e) {
+   console.log('après le catch, la chaîne est restaurée');
+});
+
+// Le code qui suit est équivalent :
+p1.then(function(value) {
+  console.log(value); // "Succès!"
+  return Promise.reject('zut !');
+}).catch(function(e) {
+  console.log(e); // "zut !"
+}).then(function(e){
+  console.log('après le catch, la chaîne est restaurée');
+});
+```
+
+### Les promesses n'interceptent pas les exceptions levées de façon asynchrone
+
+```js
+var p1 = new Promise(function(resolve, reject) {
+  throw new Error('Oh oh!');
+});
+
+p1.catch(function(e) {
+  console.log(e.message); // "Oh oh!"
+});
+
+var p2 = new Promise(function(resolve, reject) {
+  setTimeout(function() {
+    throw new Error('Exception invisible !');
+  }, 1000);
+});
+
+p2.catch(function(e) {
+  console.log(e.message); // Cela n'est jamais appelé
+});
+```
+
+### Démonstration de l'appel interne à `then`
+
+```js
+// On surcharge Promise.prototype.then/catch
+// pour y ajouter des logs
+(function(Promise){
+    var originalThen = Promise.prototype.then;
+    var originalCatch = Promise.prototype.catch;
+
+    Promise.prototype.then = function(){
+        console.log('> > > > > > appel de .then sur %o avec les arguments: %o', this, arguments);
+        return originalThen.apply(this, arguments);
+    };
+    Promise.prototype.catch = function(){
+        console.log('> > > > > > appel de .catch sur %o avec les arguments: %o', this, arguments);
+        return originalCatch.apply(this, arguments);
+    };
+
+})(this.Promise);
+
+
+
+// On appelle catch sur une promesse déjà résolue
+Promise.resolve().catch(function XXX(){});
+
+// Dans la console, on aura :
+// > > > > > > appel de .catch sur Promise{} avec les arguments: Arguments{1} [0: function XXX()]
+// > > > > > > appel de .then sur Promise{} avec les arguments: Arguments{2} [0: undefined, 1: function XXX()]
+```
+
+## Spécifications
+
+| Spécification                                                                                                | État                         | Commentaires                                    |
+| ------------------------------------------------------------------------------------------------------------ | ---------------------------- | ----------------------------------------------- |
+| {{SpecName('ES2015', '#sec-promise.prototype.catch', 'Promise.prototype.catch')}} | {{Spec2('ES2015')}}     | Définition initiale au sein d'un standard ECMA. |
+| {{SpecName('ESDraft', '#sec-promise.prototype.catch', 'Promise.prototype.catch')}} | {{Spec2('ESDraft')}} |                                                 |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Promise.catch")}}
+
+## Voir aussi
+
+- {{jsxref("Promise")}}
+- {{jsxref("Promise.prototype.then()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/promise/finally/index.html b/files/fr/web/javascript/reference/global_objects/promise/finally/index.html
deleted file mode 100644
index 36892e1148..0000000000
--- a/files/fr/web/javascript/reference/global_objects/promise/finally/index.html
+++ /dev/null
@@ -1,105 +0,0 @@
----
-title: Promise.prototype.finally()
-slug: Web/JavaScript/Reference/Global_Objects/Promise/finally
-tags:
-  - JavaScript
-  - Méthode
-  - Promises
-  - Reference
-  - finally
-translation_of: Web/JavaScript/Reference/Global_Objects/Promise/finally
-original_slug: Web/JavaScript/Reference/Objets_globaux/Promise/finally
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <code><strong>finally()</strong></code> renvoie un objet <code>Promise</code> et accepte en argument une fonction de <em>callback</em> qui est appelée lorsque la promesse a été résolue (qu'elle ait été tenue ou rejetée). Cela permet d'exécuter du code une fois que la promesse a été traitée, quel que soit le résultat. On évite ainsi de dupliquer du code entre les gestionnaires {{jsxref("Promise.then", "then()")}} et {{jsxref("Promise.catch", "catch()")}}.</p>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>p.finally(onFinally)</var>;
-
-p.finally(function() {
-   // appelée dans tous les
-   // cas de terminaison
-});
-</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>onFinally</code></dt>
- <dd>Une fonction (objet {{jsxref("Function")}}) appelé lorsque la promesse courante est résolue.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Cette méthode renvoie un objet {{jsxref("Promise")}}.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>La méthode <code>finally</code> peut être utile si on souhaite effectuer un traitement ou du nettoyage (fermetures de flux, libération de ressources, etc.) une fois qu'une promesse est résolue, quel que soit l'état de la résolution (tenue ou rejetée).</p>
-
-<p>La méthode <code>finally</code> est similaire à l'utilisation de la forme <code>.then(onFinally, onFinally)</code>, on notera toutefois quelques différences :</p>
-
-<ul>
- <li>Lorsqu'on crée une fonction en ligne, on peut ne la passer qu'une seule fois et éviter d'avoir à déclarer une variable ou à la déclarer à deux reprises.</li>
- <li>Un <em>callback</em> <code>finally</code> ne recevra pas d'argument car on ne peut pas savoir si la promesse a été tenue ou rompue. Cette fonction est précisément appelée lorsqu'on ne s'intéresse pas à la raison du rejet ou à la réussite de la promesse. Une telle valeur est donc superflue. Ainsi :
-  <ul>
-   <li>À la différence de <code>Promise.resolve(2).then(() =&gt; {}, () =&gt; {})</code> qui sera résolue avec la valeur {{jsxref("undefined")}}, <code>Promise.resolve(2).finally(() =&gt; {})</code> sera résolue avec la valeur <code>2</code>.</li>
-   <li>De même, à la différence de <code>Promise.reject(3).then(() =&gt; {}, () =&gt; {})</code> qui sera résolue avec la valeur <code>undefined</code>, <code>Promise.reject(3).finally(() =&gt; {})</code> sera rejetée avec <code>3</code>.</li>
-  </ul>
- </li>
-</ul>
-
-<div class="note">
-<p><strong>Note :</strong> Toutefois, on notera qu'utiliser <code>throw</code> (ou que renvoyer une promesse rompue) dans le <em>callback</em> <code>finally</code> rejettera la promesse avec l'exception indiquée dans l'appel à <code>throw</code>.</p>
-</div>
-
-<h2 id="Exemples">Exemples</h2>
-
-<pre class="brush: js">let isLoading = true;
-
-<code>fetch(myRequest).then(function(response) {
-    var contentType = response.headers.get("content-type");
-    if(contentType &amp;&amp; contentType.includes("application/json")) {
-      return response.json();
-    }
-    throw new TypeError("Oups, ceci n'est pas du JSON !");
-  })
-  .then(function(json) { /* traiter le JSON */ })
-  .catch(function(error) { console.log(error);
-       /* La ligne précédent peut aussi déclencher une
-          erreur (si console vaut {} par exemple) */
-   })
-</code>  .finally(function() { isLoading = false; });
-
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-promise.prototype.finally', 'Promise.prototype.finally')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Promise.finally")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Promise")}}</li>
- <li>{{jsxref("Promise.prototype.then()")}}</li>
- <li>{{jsxref("Promise.prototype.catch()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/promise/finally/index.md b/files/fr/web/javascript/reference/global_objects/promise/finally/index.md
new file mode 100644
index 0000000000..a2adf6af10
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/promise/finally/index.md
@@ -0,0 +1,83 @@
+---
+title: Promise.prototype.finally()
+slug: Web/JavaScript/Reference/Global_Objects/Promise/finally
+tags:
+  - JavaScript
+  - Méthode
+  - Promises
+  - Reference
+  - finally
+translation_of: Web/JavaScript/Reference/Global_Objects/Promise/finally
+original_slug: Web/JavaScript/Reference/Objets_globaux/Promise/finally
+---
+{{JSRef}}
+
+La méthode **`finally()`** renvoie un objet `Promise` et accepte en argument une fonction de _callback_ qui est appelée lorsque la promesse a été résolue (qu'elle ait été tenue ou rejetée). Cela permet d'exécuter du code une fois que la promesse a été traitée, quel que soit le résultat. On évite ainsi de dupliquer du code entre les gestionnaires {{jsxref("Promise.then", "then()")}} et {{jsxref("Promise.catch", "catch()")}}.
+
+## Syntaxe
+
+    p.finally(onFinally);
+
+    p.finally(function() {
+       // appelée dans tous les
+       // cas de terminaison
+    });
+
+### Paramètres
+
+- `onFinally`
+  - : Une fonction (objet {{jsxref("Function")}}) appelé lorsque la promesse courante est résolue.
+
+### Valeur de retour
+
+Cette méthode renvoie un objet {{jsxref("Promise")}}.
+
+## Description
+
+La méthode `finally` peut être utile si on souhaite effectuer un traitement ou du nettoyage (fermetures de flux, libération de ressources, etc.) une fois qu'une promesse est résolue, quel que soit l'état de la résolution (tenue ou rejetée).
+
+La méthode `finally` est similaire à l'utilisation de la forme `.then(onFinally, onFinally)`, on notera toutefois quelques différences :
+
+- Lorsqu'on crée une fonction en ligne, on peut ne la passer qu'une seule fois et éviter d'avoir à déclarer une variable ou à la déclarer à deux reprises.
+- Un _callback_ `finally` ne recevra pas d'argument car on ne peut pas savoir si la promesse a été tenue ou rompue. Cette fonction est précisément appelée lorsqu'on ne s'intéresse pas à la raison du rejet ou à la réussite de la promesse. Une telle valeur est donc superflue. Ainsi :
+
+  - À la différence de `Promise.resolve(2).then(() => {}, () => {})` qui sera résolue avec la valeur {{jsxref("undefined")}}, `Promise.resolve(2).finally(() => {})` sera résolue avec la valeur `2`.
+  - De même, à la différence de `Promise.reject(3).then(() => {}, () => {})` qui sera résolue avec la valeur `undefined`, `Promise.reject(3).finally(() => {})` sera rejetée avec `3`.
+
+> **Note :** Toutefois, on notera qu'utiliser `throw` (ou que renvoyer une promesse rompue) dans le _callback_ `finally` rejettera la promesse avec l'exception indiquée dans l'appel à `throw`.
+
+## Exemples
+
+```js
+let isLoading = true;
+
+fetch(myRequest).then(function(response) {
+    var contentType = response.headers.get("content-type");
+    if(contentType && contentType.includes("application/json")) {
+      return response.json();
+    }
+    throw new TypeError("Oups, ceci n'est pas du JSON !");
+  })
+  .then(function(json) { /* traiter le JSON */ })
+  .catch(function(error) { console.log(error);
+       /* La ligne précédent peut aussi déclencher une
+          erreur (si console vaut {} par exemple) */
+   })
+  .finally(function() { isLoading = false; });
+```
+
+## Spécifications
+
+| Spécification                                                                                                        | État                         | Commentaires |
+| -------------------------------------------------------------------------------------------------------------------- | ---------------------------- | ------------ |
+| {{SpecName('ESDraft', '#sec-promise.prototype.finally', 'Promise.prototype.finally')}} | {{Spec2('ESDraft')}} |              |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Promise.finally")}}
+
+## Voir aussi
+
+- {{jsxref("Promise")}}
+- {{jsxref("Promise.prototype.then()")}}
+- {{jsxref("Promise.prototype.catch()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/promise/index.html b/files/fr/web/javascript/reference/global_objects/promise/index.html
deleted file mode 100644
index 2399e3eebd..0000000000
--- a/files/fr/web/javascript/reference/global_objects/promise/index.html
+++ /dev/null
@@ -1,234 +0,0 @@
----
-title: Promise
-slug: Web/JavaScript/Reference/Global_Objects/Promise
-tags:
-  - ECMAScript 2015
-  - JavaScript
-  - Promise
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Promise
-original_slug: Web/JavaScript/Reference/Objets_globaux/Promise
----
-<div>{{JSRef}}</div>
-
-<p>L'objet <code><strong>Promise</strong></code> (pour « promesse ») est utilisé pour réaliser des traitements de façon asynchrone. Une promesse représente une valeur qui peut être disponible maintenant, dans le futur voire jamais.</p>
-
-<div class="note">
-<p><strong>Note :</strong> Cet article décrit le constructeur <code>Promise</code>. Pour en savoir plus sur les promesses en général, nous vous conseillons de lire l'article <a href="/fr/docs/Web/JavaScript/Guide/Utiliser_les_promesses">Utiliser les promesses</a>. Le constructeur <code>Promise</code> est principalement utilisé pour envelopper des fonctions qui ne prennent pas en charge les promesses.</p>
-</div>
-
-<div>{{EmbedInteractiveExample("pages/js/promise-constructor.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">new Promise( /* exécuteur */ function(resolve, reject) { ... } );</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>exécuteur</code></dt>
- <dd>Une fonction à laquelle on passera deux arguments : <code>resolve</code> et <code>reject</code>. Cette fonction est exécutée immédiatement par l'implémentation de <strong><code>Promise</code></strong> qui fournit les fonctions <code>resolve</code> et <code>reject</code> (elle est exécutée avant que le constructeur <strong><code>Promise</code></strong> ait renvoyé l'objet créé). Les fonctions <code>resolve</code> et <code>reject</code>, lorsqu'elles sont appelées, permettent respectivement de tenir ou de rompre la promesse. On attend de l'exécuteur qu'il démarre un travail asynchrone puis, une fois le travail terminé, appelle la fonction <code>resolve</code> (si tout s'est bien passé) ou la fonction <code>reject</code> (lorsqu'il y a eu un problème) pour définir l'état final de la promesse.<br>
- Si une erreur est générée par l'exécuteur, la promesse est rompue et la valeur de retour de l'exécuteur est ignorée.</dd>
-</dl>
-
-<h2 id="Description">Description</h2>
-
-<p>L'interface <strong><code>Promise</code></strong> représente un intermédiaire (<em>proxy</em>) vers une valeur qui n'est pas nécessairement connue au moment de sa création. Cela permet d'associer des gestionnaires au succès éventuel d'une action asynchrone et à la raison d'une erreur. Ainsi, des méthodes asynchrones renvoient des valeurs comme les méthodes synchrones, la seule différence est que la valeur retournée par la méthode asynchrone est une promesse (d'avoir une valeur plus tard).</p>
-
-<p>Une <code>Promise</code> est dans un de ces états :</p>
-
-<ul>
- <li><em>pending (en attente)</em> : état initial, la promesse n'est ni remplie, ni rompue ;</li>
- <li><em>fulfilled (tenue</em>) : l'opération a réussi ;</li>
- <li><em>rejected (rompue)</em> : l'opération a échoué ;</li>
- <li><em>settled (acquittée)</em> : la promesse est tenue ou rompue mais elle n'est plus en attente.</li>
-</ul>
-
-<p>Une promesse en attente peut être <em>tenue</em> avec une valeur ou <em>rompue</em> avec une raison (erreur). Quand on arrive à l'une des deux situations, les gestionnaires associés lors de l'appel de la méthode <code>then</code> sont alors appelés. (Si la promesse a déjà été tenue ou rompue lorsque le gestionnaire est attaché à la promesse, le gestionnaire est appelé. Cela permet qu'il n'y ait pas de situation de compétition entre une opération asynchrone en cours et les gestionnaires ajoutés).</p>
-
-<p>Les méthodes {{jsxref("Promise.then","Promise.prototype.then()")}} et {{jsxref("Promise.catch","Promise.prototype.catch()")}} renvoient des promesses et peuvent ainsi être chaînées. C'est ce qu'on appelle une <em>composition</em>.</p>
-
-<p><img alt="" src="https://mdn.mozillademos.org/files/15911/promises.png"></p>
-
-<div class="note">
-<p><strong>Note :</strong> Une promesse est dans l'état <em>settled </em>(acquittée) qu'elle soit tenue ou rompue mais plus en attente. Le terme <em>resolved</em> (résolue) est aussi utilisé concernant les promesses — cela signifie que la promesse est acquittée ou bien enfermée dans une chaine de promesse. Le billet de Domenic Denicola, <a href="https://github.com/domenic/promises-unwrapping/blob/master/docs/states-and-fates.md"><em>States and fates</em> (en anglais)</a>, contient de plus amples détails sur la terminologie utilisée.</p>
-</div>
-
-<div class="warning">
-<p><strong>Attention :</strong> D'autres langages utilisent des mécanismes d'évaluation à la volée (<em>lazy evaluation</em>) et de déport des calculs (<em>deferring computations</em>). Ces mécanismes sont également intitulés promesses (<em>promises</em>). En JavaScript, les promesses correspondent à des processus déjà lancés et qui peuvent être chaînés avec des fonctions de retour. Si vous cherchez à retarder l'évaluation, vous pouvez utiliser les fonctions fléchées sans arguments (ex. <code>f = () =&gt; expression</code>) afin de créer une expression à évaluer plus tard et utiliser <code>f()</code> pour l'évaluer au moment voulu.</p>
-</div>
-
-<h2 id="Propriétés">Propriétés</h2>
-
-<dl>
- <dt><code>Promise.length</code></dt>
- <dd>Une propriété de longueur qui vaut 1 (le nombre d'arguments pour le constructeur).</dd>
- <dt>{{jsxref("Promise.prototype")}}</dt>
- <dd>Cette propriété représente le prototype du constructeur <code>Promise</code>.</dd>
-</dl>
-
-<h2 id="Méthodes">Méthodes</h2>
-
-<dl>
- <dt>{{jsxref("Promise.all", "Promise.all(iterable)")}}</dt>
- <dd>Renvoie une promesse tenue lorsque toutes les promesses de l'argument itérable sont tenues ou une promesse rompue dès qu'une promesse de l'argument itérable est rompue. Si la promesse est tenue, elle est résolue avec un tableau contenant les valeurs de résolution des différentes promesses contenues dans l'itérable (dans le même ordre que celui-ci). Si la promesse est rompue, elle contient la raison de la rupture de la part de la promesse en cause, contenue dans l'itérable. Cette méthode est utile pour agréger les résultats de plusieurs promesses tous ensemble.</dd>
- <dt>{{jsxref("Promise.allSettled", "Promise.allSettled(iterable)")}}</dt>
- <dd>Attend que l'ensemble des promesses aient été acquittées (tenues ou rompues) et renvoie une promesse qui est résolue après que chaque promesse ait été tenue ou rompue. La valeur de résolution de la promesse renvoyée est un tableau dont chaque élément est le résultat des promesses initiales.</dd>
- <dt>{{jsxref("Promise.race", "Promise.race(iterable)")}}</dt>
- <dd>Renvoie une promesse qui est tenue ou rompue dès que l'une des promesses de l'itérable est tenue ou rompue avec la valeur ou la raison correspondante.</dd>
- <dt>{{jsxref("Promise.reject", "Promise.reject(raison)")}}</dt>
- <dd>Renvoie un objet <code>Promise</code> qui est rompue avec la raison donnée.</dd>
- <dt>{{jsxref("Promise.resolve", "Promise.resolve(valeur)")}}</dt>
- <dd>Renvoie un objet <code>Promise</code> qui est tenue (résolue) avec la valeur donnée. Si la valeur possède une méthode <code>then</code>, la promesse renvoyée « suivra » cette méthode pour arriver dans son état, sinon la promesse renvoyée sera tenue avec la valeur fournie. Généralement, quand on veut savoir si une valeur est une promesse, on utilisera {{jsxref("Promise.resolve","Promise.resolve(valeur)")}} et on travaillera avec la valeur de retour en tant que promesse.</dd>
-</dl>
-
-<h2 id="Prototype_pour_Promise">Prototype pour <code>Promise</code></h2>
-
-<h3 id="Propriétés_2">Propriétés</h3>
-
-<p>{{page('fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise/prototype','Propriétés')}}</p>
-
-<h3 id="Méthodes_2">Méthodes</h3>
-
-<p>{{page('fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise/prototype','Méthodes')}}</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Créer_une_promesse">Créer une promesse</h3>
-
-<p>Pour créer une promesse, on utilise l'opérateur <code>new</code> et le constructeur. Celui-ci prend en argument une fonction qui prend deux fonctions en paramètres. La première est appelée quand la tâche asynchrone est correctement terminée et la seconde est appelée quand la tâche échoue :</p>
-
-<pre class="brush: js">const maPremierePromesse = new Promise((resolve, reject) =&gt; {
-  // réaliser une tâche asynchrone et appeler :
-
-  // resolve(uneValeur); // si la promesse est tenue
-  // ou
-  // reject("raison d'echec"); // si elle est rompue
-});
-</pre>
-
-<p>On peut ainsi obtenir des fonctions asynchrones en renvoyant une promesse :</p>
-
-<pre class="brush: js">function maFonctionAsynchrone(url) {
-  return new Promise((resolve, reject) =&gt; {
-    const xhr = new XMLHttpRequest();
-    xhr.open("GET", url);
-    xhr.onload = () =&gt; resolve(xhr.responseText);
-    xhr.onerror = () =&gt; reject(xhr.statusText);
-    xhr.send();
-  });
-}</pre>
-
-<h3 id="Exemple_interactif">Exemple interactif</h3>
-
-<pre class="brush: html">&lt;button id="btn" type="button"&gt;Créer un objet Promise !&lt;/button&gt;
-&lt;div id="log"&gt;&lt;/div&gt;
-</pre>
-
-<p>Dans le court exemple qui suit, on illustre le mécanisme d'une <code>Promise</code>. La méthode <code>testPromise()</code> est appelée chaque fois qu'on clique sur l'élément {{HTMLElement("button")}}. Cette méthode crée une promesse qui sera tenue grâce à la fonction {{domxref("window.setTimeout()")}}, et avec la valeur comptePromesse (nombre commançant à 1) après <code>1s</code> à <code>3s</code> (aléatoire). Le constructeur Promise() est utilisé pour créer la promesse.</p>
-
-<p>Le fait que la promesse soit tenue est simplement enregistré via un <em>callback</em> sur <code>p1.then()</code>. Quelques indicateurs illustrent la manière dont la partie synchrone est découplée de la partie asynchrone.</p>
-
-<pre class="brush: js">'use strict';
-var comptePromesse = 0;
-
-function testPromise() {
-  var thisComptePromesse = ++comptePromesse;
-
-  var log = document.getElementById('log');
-  log.insertAdjacentHTML('beforeend', thisComptePromesse +
-      ') Started (&lt;small&gt;Début du code synchrone&lt;/small&gt;)&lt;br/&gt;');
-
-  // on crée une nouvelle promesse :
-  var p1 = new Promise(
-    // La fonction de résolution est appelée avec la capacité de
-    // tenir ou de rompre la promesse
-    function(resolve, reject) {
-      log.insertAdjacentHTML('beforeend', thisComptePromesse +
-          ') Promise started (&lt;small&gt;Début du code asynchrone&lt;/small&gt;)&lt;br/&gt;');
-
-      // Voici un exemple simple pour créer un code asynchrone
-      window.setTimeout(
-        function() {
-          // On tient la promesse !
-          resolve(thisComptePromesse);
-        }, Math.random() * 2000 + 1000);
-    });
-
-  // On définit ce qui se passe quand la promesse est tenue
-  // et ce qu'on appelle (uniquement) dans ce cas
-  // La méthode catch() définit le traitement à effectuer
-  // quand la promesse est rompue.
-  p1.then(
-    // On affiche un message avec la valeur
-    function(val) {
-      log.insertAdjacentHTML('beforeend', val +
-          ') Promise fulfilled (&lt;small&gt;Fin du code asynchrone&lt;/small&gt;)&lt;br/&gt;');
-    }).catch(
-      // Promesse rejetée
-      function() {
-        console.log("promesse rompue");
-      });
-
-  log.insertAdjacentHTML('beforeend', thisComptePromesse +
-      ') Promise made (&lt;small&gt;Fin du code synchrone&lt;/small&gt;)&lt;br/&gt;');
-}
-</pre>
-
-<pre class="brush: js">if ("Promise" in window) {
-  var btn = document.getElementById("btn");
-  btn.addEventListener("click", testPromise);
- } else {
-  log = document.getElementById('log');
-  log.innerHTML = "L'exemple live n'est pas disponible pour votre navigateur car celui-ci ne supporte pas l'interface &lt;code&gt;Promise&lt;code&gt;.";
-}</pre>
-
-<p>L'exemple s'exécute lorsqu'on clique sur le bouton. Pour tester cet exemple, il est nécessaire d'utiliser un navigateur qui supporte les objets <code>Promise</code>. En cliquant plusieurs fois sur le bouton en peu de temps, on verra qu'il y a plusieurs promesses tenues les une après les autres.</p>
-
-<p>{{EmbedLiveSample('Exemple_interactif', '500', '200')}}</p>
-
-<h2 id="Charger_une_image_en_XHR">Charger une image en XHR</h2>
-
-<p>Un autre exemple simple utilisant <code>Promise</code> et {{domxref("XMLHttpRequest")}} afin de charger une image est disponible sur le dépôt GitHub MDN <a href="https://github.com/mdn/js-examples/tree/master/promises-test">js-examples</a>. Vous pouvez également <a href="https://mdn.github.io/js-examples/promises-test/">voir le résultat</a>. Chaque étape est commentée afin de vous permettre de suivre l'état de la promesse et l'architecture utilisée avec XHR.</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-promise-objects', 'Promise')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td>Définition initiale au sein d'un standard ECMA.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-promise-objects', 'Promise')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Promise")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/JavaScript/Guide/Utiliser_les_promesses">Manipuler les promesses</a></li>
- <li><a href="https://promisesaplus.com/">Promises/A+ specification</a></li>
- <li><a href="https://medium.com/@ramsunvtech/promises-of-promise-part-1-53f769245a53">Venkatraman.R - JS Promise (Part 1, Basics) </a>(en anglais)</li>
- <li><a href="https://medium.com/@ramsunvtech/js-promise-part-2-q-js-when-js-and-rsvp-js-af596232525c#.dzlqh6ski">Venkatraman.R - JS Promise (Part 2 - Using Q.js, When.js and RSVP.js) </a>(en anglais)</li>
- <li><a href="https://tech.io/playgrounds/11107/tools-for-promises-unittesting/introduction">Venkatraman.R - Tools for Promises Unit Testing </a>(en anglais)</li>
- <li><a href="https://www.html5rocks.com/en/tutorials/es6/promises/">Jake Archibald : <em>JavaScript Promises : There and Back Again</em></a> (tutoriel en anglais)</li>
- <li><a href="https://de.slideshare.net/domenicdenicola/callbacks-promises-and-coroutines-oh-my-the-evolution-of-asynchronicity-in-javascript">Domenic Denicola : <em>Callbacks, Promises, and Coroutines – Asynchronous Programming Patterns in JavaScript</em></a> (présentation en anglais sur l'asynchronisme en JavaScript)</li>
- <li><a href="https://www.mattgreer.org/articles/promises-in-wicked-detail/">Matt Greer : <em>JavaScript Promises ... In Wicked Detail</em></a> (en anglais)</li>
- <li><a href="https://www.promisejs.org/">Forbes Lindesay : promisejs.org</a> (en anglais)</li>
- <li><a href="https://github.com/jakearchibald/es6-promise/">Prothèse pour les promesses par Jake Archibald</a></li>
- <li><a href="https://www.udacity.com/course/javascript-promises--ud898">Les promesses JavaScript sur Udacity</a> (en anglais)</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/promise/index.md b/files/fr/web/javascript/reference/global_objects/promise/index.md
new file mode 100644
index 0000000000..cd1f9babc5
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/promise/index.md
@@ -0,0 +1,210 @@
+---
+title: Promise
+slug: Web/JavaScript/Reference/Global_Objects/Promise
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Promise
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Promise
+original_slug: Web/JavaScript/Reference/Objets_globaux/Promise
+---
+{{JSRef}}
+
+L'objet **`Promise`** (pour « promesse ») est utilisé pour réaliser des traitements de façon asynchrone. Une promesse représente une valeur qui peut être disponible maintenant, dans le futur voire jamais.
+
+> **Note :** Cet article décrit le constructeur `Promise`. Pour en savoir plus sur les promesses en général, nous vous conseillons de lire l'article [Utiliser les promesses](/fr/docs/Web/JavaScript/Guide/Utiliser_les_promesses). Le constructeur `Promise` est principalement utilisé pour envelopper des fonctions qui ne prennent pas en charge les promesses.
+
+{{EmbedInteractiveExample("pages/js/promise-constructor.html")}}
+
+## Syntaxe
+
+    new Promise( /* exécuteur */ function(resolve, reject) { ... } );
+
+### Paramètres
+
+- `exécuteur`
+  - : Une fonction à laquelle on passera deux arguments : `resolve` et `reject`. Cette fonction est exécutée immédiatement par l'implémentation de **`Promise`** qui fournit les fonctions `resolve` et `reject` (elle est exécutée avant que le constructeur **`Promise`** ait renvoyé l'objet créé). Les fonctions `resolve` et `reject`, lorsqu'elles sont appelées, permettent respectivement de tenir ou de rompre la promesse. On attend de l'exécuteur qu'il démarre un travail asynchrone puis, une fois le travail terminé, appelle la fonction `resolve` (si tout s'est bien passé) ou la fonction `reject` (lorsqu'il y a eu un problème) pour définir l'état final de la promesse.
+    Si une erreur est générée par l'exécuteur, la promesse est rompue et la valeur de retour de l'exécuteur est ignorée.
+
+## Description
+
+L'interface **`Promise`** représente un intermédiaire (_proxy_) vers une valeur qui n'est pas nécessairement connue au moment de sa création. Cela permet d'associer des gestionnaires au succès éventuel d'une action asynchrone et à la raison d'une erreur. Ainsi, des méthodes asynchrones renvoient des valeurs comme les méthodes synchrones, la seule différence est que la valeur retournée par la méthode asynchrone est une promesse (d'avoir une valeur plus tard).
+
+Une `Promise` est dans un de ces états :
+
+- _pending (en attente)_ : état initial, la promesse n'est ni remplie, ni rompue ;
+- _fulfilled (tenue_) : l'opération a réussi ;
+- _rejected (rompue)_ : l'opération a échoué ;
+- _settled (acquittée)_ : la promesse est tenue ou rompue mais elle n'est plus en attente.
+
+Une promesse en attente peut être _tenue_ avec une valeur ou _rompue_ avec une raison (erreur). Quand on arrive à l'une des deux situations, les gestionnaires associés lors de l'appel de la méthode `then` sont alors appelés. (Si la promesse a déjà été tenue ou rompue lorsque le gestionnaire est attaché à la promesse, le gestionnaire est appelé. Cela permet qu'il n'y ait pas de situation de compétition entre une opération asynchrone en cours et les gestionnaires ajoutés).
+
+Les méthodes {{jsxref("Promise.then","Promise.prototype.then()")}} et {{jsxref("Promise.catch","Promise.prototype.catch()")}} renvoient des promesses et peuvent ainsi être chaînées. C'est ce qu'on appelle une _composition_.
+
+![](https://mdn.mozillademos.org/files/15911/promises.png)
+
+> **Note :** Une promesse est dans l'état _settled_ (acquittée) qu'elle soit tenue ou rompue mais plus en attente. Le terme _resolved_ (résolue) est aussi utilisé concernant les promesses — cela signifie que la promesse est acquittée ou bien enfermée dans une chaine de promesse. Le billet de Domenic Denicola, [_States and fates_ (en anglais)](https://github.com/domenic/promises-unwrapping/blob/master/docs/states-and-fates.md), contient de plus amples détails sur la terminologie utilisée.
+
+> **Attention :** D'autres langages utilisent des mécanismes d'évaluation à la volée (_lazy evaluation_) et de déport des calculs (_deferring computations_). Ces mécanismes sont également intitulés promesses (_promises_). En JavaScript, les promesses correspondent à des processus déjà lancés et qui peuvent être chaînés avec des fonctions de retour. Si vous cherchez à retarder l'évaluation, vous pouvez utiliser les fonctions fléchées sans arguments (ex. `f = () => expression`) afin de créer une expression à évaluer plus tard et utiliser `f()` pour l'évaluer au moment voulu.
+
+## Propriétés
+
+- `Promise.length`
+  - : Une propriété de longueur qui vaut 1 (le nombre d'arguments pour le constructeur).
+- {{jsxref("Promise.prototype")}}
+  - : Cette propriété représente le prototype du constructeur `Promise`.
+
+## Méthodes
+
+- {{jsxref("Promise.all", "Promise.all(iterable)")}}
+  - : Renvoie une promesse tenue lorsque toutes les promesses de l'argument itérable sont tenues ou une promesse rompue dès qu'une promesse de l'argument itérable est rompue. Si la promesse est tenue, elle est résolue avec un tableau contenant les valeurs de résolution des différentes promesses contenues dans l'itérable (dans le même ordre que celui-ci). Si la promesse est rompue, elle contient la raison de la rupture de la part de la promesse en cause, contenue dans l'itérable. Cette méthode est utile pour agréger les résultats de plusieurs promesses tous ensemble.
+- {{jsxref("Promise.allSettled", "Promise.allSettled(iterable)")}}
+  - : Attend que l'ensemble des promesses aient été acquittées (tenues ou rompues) et renvoie une promesse qui est résolue après que chaque promesse ait été tenue ou rompue. La valeur de résolution de la promesse renvoyée est un tableau dont chaque élément est le résultat des promesses initiales.
+- {{jsxref("Promise.race", "Promise.race(iterable)")}}
+  - : Renvoie une promesse qui est tenue ou rompue dès que l'une des promesses de l'itérable est tenue ou rompue avec la valeur ou la raison correspondante.
+- {{jsxref("Promise.reject", "Promise.reject(raison)")}}
+  - : Renvoie un objet `Promise` qui est rompue avec la raison donnée.
+- {{jsxref("Promise.resolve", "Promise.resolve(valeur)")}}
+  - : Renvoie un objet `Promise` qui est tenue (résolue) avec la valeur donnée. Si la valeur possède une méthode `then`, la promesse renvoyée « suivra » cette méthode pour arriver dans son état, sinon la promesse renvoyée sera tenue avec la valeur fournie. Généralement, quand on veut savoir si une valeur est une promesse, on utilisera {{jsxref("Promise.resolve","Promise.resolve(valeur)")}} et on travaillera avec la valeur de retour en tant que promesse.
+
+## Prototype pour `Promise`
+
+### Propriétés
+
+{{page('fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise/prototype','Propriétés')}}
+
+### Méthodes
+
+{{page('fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise/prototype','Méthodes')}}
+
+## Exemples
+
+### Créer une promesse
+
+Pour créer une promesse, on utilise l'opérateur `new` et le constructeur. Celui-ci prend en argument une fonction qui prend deux fonctions en paramètres. La première est appelée quand la tâche asynchrone est correctement terminée et la seconde est appelée quand la tâche échoue :
+
+```js
+const maPremierePromesse = new Promise((resolve, reject) => {
+  // réaliser une tâche asynchrone et appeler :
+
+  // resolve(uneValeur); // si la promesse est tenue
+  // ou
+  // reject("raison d'echec"); // si elle est rompue
+});
+```
+
+On peut ainsi obtenir des fonctions asynchrones en renvoyant une promesse :
+
+```js
+function maFonctionAsynchrone(url) {
+  return new Promise((resolve, reject) => {
+    const xhr = new XMLHttpRequest();
+    xhr.open("GET", url);
+    xhr.onload = () => resolve(xhr.responseText);
+    xhr.onerror = () => reject(xhr.statusText);
+    xhr.send();
+  });
+}
+```
+
+### Exemple interactif
+
+```html
+<button id="btn" type="button">Créer un objet Promise !</button>
+<div id="log"></div>
+```
+
+Dans le court exemple qui suit, on illustre le mécanisme d'une `Promise`. La méthode `testPromise()` est appelée chaque fois qu'on clique sur l'élément {{HTMLElement("button")}}. Cette méthode crée une promesse qui sera tenue grâce à la fonction {{domxref("window.setTimeout()")}}, et avec la valeur comptePromesse (nombre commançant à 1) après `1s` à `3s` (aléatoire). Le constructeur Promise() est utilisé pour créer la promesse.
+
+Le fait que la promesse soit tenue est simplement enregistré via un _callback_ sur `p1.then()`. Quelques indicateurs illustrent la manière dont la partie synchrone est découplée de la partie asynchrone.
+
+```js
+'use strict';
+var comptePromesse = 0;
+
+function testPromise() {
+  var thisComptePromesse = ++comptePromesse;
+
+  var log = document.getElementById('log');
+  log.insertAdjacentHTML('beforeend', thisComptePromesse +
+      ') Started (<small>Début du code synchrone</small>)<br/>');
+
+  // on crée une nouvelle promesse :
+  var p1 = new Promise(
+    // La fonction de résolution est appelée avec la capacité de
+    // tenir ou de rompre la promesse
+    function(resolve, reject) {
+      log.insertAdjacentHTML('beforeend', thisComptePromesse +
+          ') Promise started (<small>Début du code asynchrone</small>)<br/>');
+
+      // Voici un exemple simple pour créer un code asynchrone
+      window.setTimeout(
+        function() {
+          // On tient la promesse !
+          resolve(thisComptePromesse);
+        }, Math.random() * 2000 + 1000);
+    });
+
+  // On définit ce qui se passe quand la promesse est tenue
+  // et ce qu'on appelle (uniquement) dans ce cas
+  // La méthode catch() définit le traitement à effectuer
+  // quand la promesse est rompue.
+  p1.then(
+    // On affiche un message avec la valeur
+    function(val) {
+      log.insertAdjacentHTML('beforeend', val +
+          ') Promise fulfilled (<small>Fin du code asynchrone</small>)<br/>');
+    }).catch(
+      // Promesse rejetée
+      function() {
+        console.log("promesse rompue");
+      });
+
+  log.insertAdjacentHTML('beforeend', thisComptePromesse +
+      ') Promise made (<small>Fin du code synchrone</small>)<br/>');
+}
+```
+
+```js
+if ("Promise" in window) {
+  var btn = document.getElementById("btn");
+  btn.addEventListener("click", testPromise);
+ } else {
+  log = document.getElementById('log');
+  log.innerHTML = "L'exemple live n'est pas disponible pour votre navigateur car celui-ci ne supporte pas l'interface <code>Promise<code>.";
+}
+```
+
+L'exemple s'exécute lorsqu'on clique sur le bouton. Pour tester cet exemple, il est nécessaire d'utiliser un navigateur qui supporte les objets `Promise`. En cliquant plusieurs fois sur le bouton en peu de temps, on verra qu'il y a plusieurs promesses tenues les une après les autres.
+
+{{EmbedLiveSample('Exemple_interactif', '500', '200')}}
+
+## Charger une image en XHR
+
+Un autre exemple simple utilisant `Promise` et {{domxref("XMLHttpRequest")}} afin de charger une image est disponible sur le dépôt GitHub MDN [js-examples](https://github.com/mdn/js-examples/tree/master/promises-test). Vous pouvez également [voir le résultat](https://mdn.github.io/js-examples/promises-test/). Chaque étape est commentée afin de vous permettre de suivre l'état de la promesse et l'architecture utilisée avec XHR.
+
+## Spécifications
+
+| Spécification                                                                | État                         | Commentaires                                    |
+| ---------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------- |
+| {{SpecName('ES2015', '#sec-promise-objects', 'Promise')}} | {{Spec2('ES2015')}}     | Définition initiale au sein d'un standard ECMA. |
+| {{SpecName('ESDraft', '#sec-promise-objects', 'Promise')}} | {{Spec2('ESDraft')}} |                                                 |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Promise")}}
+
+## Voir aussi
+
+- [Manipuler les promesses](/fr/docs/Web/JavaScript/Guide/Utiliser_les_promesses)
+- [Promises/A+ specification](https://promisesaplus.com/)
+- [Venkatraman.R - JS Promise (Part 1, Basics) ](https://medium.com/@ramsunvtech/promises-of-promise-part-1-53f769245a53)(en anglais)
+- [Venkatraman.R - JS Promise (Part 2 - Using Q.js, When.js and RSVP.js) ](https://medium.com/@ramsunvtech/js-promise-part-2-q-js-when-js-and-rsvp-js-af596232525c#.dzlqh6ski)(en anglais)
+- [Venkatraman.R - Tools for Promises Unit Testing ](https://tech.io/playgrounds/11107/tools-for-promises-unittesting/introduction)(en anglais)
+- [Jake Archibald : _JavaScript Promises : There and Back Again_](https://www.html5rocks.com/en/tutorials/es6/promises/) (tutoriel en anglais)
+- [Domenic Denicola : _Callbacks, Promises, and Coroutines – Asynchronous Programming Patterns in JavaScript_](https://de.slideshare.net/domenicdenicola/callbacks-promises-and-coroutines-oh-my-the-evolution-of-asynchronicity-in-javascript) (présentation en anglais sur l'asynchronisme en JavaScript)
+- [Matt Greer : _JavaScript Promises ... In Wicked Detail_](https://www.mattgreer.org/articles/promises-in-wicked-detail/) (en anglais)
+- [Forbes Lindesay : promisejs.org](https://www.promisejs.org/) (en anglais)
+- [Prothèse pour les promesses par Jake Archibald](https://github.com/jakearchibald/es6-promise/)
+- [Les promesses JavaScript sur Udacity](https://www.udacity.com/course/javascript-promises--ud898) (en anglais)
diff --git a/files/fr/web/javascript/reference/global_objects/promise/race/index.html b/files/fr/web/javascript/reference/global_objects/promise/race/index.html
deleted file mode 100644
index ddb0475694..0000000000
--- a/files/fr/web/javascript/reference/global_objects/promise/race/index.html
+++ /dev/null
@@ -1,188 +0,0 @@
----
-title: Promise.race()
-slug: Web/JavaScript/Reference/Global_Objects/Promise/race
-tags:
-  - ECMAScript 2015
-  - JavaScript
-  - Méthode
-  - Promise
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Promise/race
-original_slug: Web/JavaScript/Reference/Objets_globaux/Promise/race
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <code><strong>Promise.race()</strong></code> renvoie une promesse qui est résolue ou rejetée dès qu'une des promesses de l'itérable passé en argument est résolue ou rejetée. La valeur (dans le cas de la résolution) ou la raison (dans le cas d'un échec) utilisée est celle de la promesse de l'itérable qui est resolue/qui échoue.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/promise-race.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">Promise.race(<var>itérable</var>);</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>itérable</code></dt>
- <dd>Un objet itérable, par exemple un {{jsxref("Array")}}. Voir la page <a href="/fr/docs/Web/JavaScript/Guide/iterable">itérable</a>.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Une promesse ({{jsxref("Promise")}}) à résoudre qui est résolue de façon asynchrone dès que l'une des promesses de l'itérable est tenue ou rompue.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>La fonction <code>race</code> renvoie une <code>Promise</code> qui est résolue/rejetée de la même façon que la première promesse de l'itérable à être résolue/rejetée.</p>
-
-<p>Si l'itérable passé en argument est vide, la promesse sera continuellement en attente.</p>
-
-<p>Si l'itérable contient une ou plusieurs valeurs qui ne sont pas des promesses ou une promesse déjà résolue, <code>Promise.race</code> fournira une promesse résolue avec la première de ces valeurs trouvées dans l'itérable.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Caractère_asynchrone_de_Promise.race()">Caractère asynchrone de <code>Promise.race()</code></h3>
-
-<p>L'exemple qui suit illuste le caractère asynchrone de <code>Promise.race:</code></p>
-
-<pre class="brush: js">// On passe un tableau de promesses déjà résolues
-// en argument afin de déclencher Promise.race
-// dès que possible
-var resolvedPromisesArray = [Promise.resolve(33), Promise.resolve(44)];
-
-var p = Promise.race(resolvedPromisesArray);
-// On affiche immédiatement la valeur p dans la console
-console.log(p);
-
-// Avec setTimeout on peut exécuter du code
-// une fois que la pile est vide
-setTimeout(function(){
-    console.log('La pile est désormais vide');
-    console.log(p);
-});
-
-// affichera, dans cet ordre :
-// Promise { &lt;state&gt;: "pending" }
-// La pile est désormais vide
-// Promise { &lt;state&gt;: "fulfilled", &lt;value&gt;: 33 }</pre>
-
-<p>Un itérable vide renverra une promesse qui restera en attente :</p>
-
-<pre class="brush: js">var foreverPendingPromise = Promise.race([]);
-console.log(foreverPendingPromise);
-setTimeout(function(){
-    console.log('La pile est désormais vide');
-    console.log(foreverPendingPromise);
-});
-
-// affichera, dans cet ordre :
-// Promise { &lt;state&gt;: "pending" }
-// La pile est désormais vide
-// Promise { &lt;state&gt;: "pending" }
-</pre>
-
-<p>Si l'itérable contient une ou plusieurs valeurs qui ne sont pas des promesses ou des promesses déjà résolues, <code>Promise.race</code> considèrera la première valeur ainsi trouvée dans l'itérable :</p>
-
-<pre class="brush: js">var foreverPendingPromise = Promise.race([]);
-var alreadyResolvedProm = Promise.resolve(666);
-
-var arr = [foreverPendingPromise, alreadyResolvedProm, "non-Promise value"];
-var arr2 = [foreverPendingPromise, "non-Promise value", Promise.resolve(666)];
-var p = Promise.race(arr);
-var p2 = Promise.race(arr2);
-
-console.log(p);
-console.log(p2);
-setTimeout(function(){
-    console.log('the stack is now empty');
-    console.log(p);
-    console.log(p2);
-});
-
-// affichera dans l'ordre :
-// Promise { &lt;state&gt;: "pending" }
-// Promise { &lt;state&gt;: "pending" }
-// the stack is now empty
-// Promise { &lt;state&gt;: "fulfilled", &lt;value&gt;: 666 }
-// Promise { &lt;state&gt;: "fulfilled", &lt;value&gt;: "non-Promise value" }
-</pre>
-
-<h3 id="Utilisation_de_Promise.race_–_exemples_avec_setTimeout">Utilisation de <code>Promise.race</code> – exemples avec <code>setTimeout</code></h3>
-
-<pre class="brush: js">var p1 = new Promise(function(resolve, reject) {
-    setTimeout(resolve, 500, "un");
-});
-var p2 = new Promise(function(resolve, reject) {
-    setTimeout(resolve, 100, "deux");
-});
-
-Promise.race([p1, p2]).then(function(value) {
-  console.log(value); // "deux"
-  // Les deux promesses sont résolues mais p2 est plus rapide
-});
-
-var p3 = new Promise(function(resolve, reject) {
-    setTimeout(resolve, 100, "trois");
-});
-var p4 = new Promise(function(resolve, reject) {
-    setTimeout(reject, 500, "quatre");
-});
-
-Promise.race([p3, p4]).then(function(value) {
-  console.log(value); // "trois"
-  // p3 est plus rapide et entraîne la résolution de la promesse de compétition
-}, function(reason) {
-  // N'est pas appelée
-});
-
-var p5 = new Promise(function(resolve, reject) {
-    setTimeout(resolve, 500, "cinq");
-});
-var p6 = new Promise(function(resolve, reject) {
-    setTimeout(reject, 100, "six");
-});
-
-Promise.race([p5, p6]).then(function(value) {
-  // N'est pas appelée
-}, function(reason) {
-  console.log(reason); // "six"
-  // p6 est plus rapide et rejète la promesse de compétition
-});
-</pre>
-
-<div class="note">
-<p><strong>Note :</strong> voir la documentation sur <a href="/fr/docs/Web/API/WindowTimers/setTimeout"><code>setTimeout</code>.</a></p>
-</div>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-promise.race', 'Promise.race')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td>Définition initiale au sein d'un standard ECMA.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-promise.race', 'Promise.race')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Promise.race")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Promise")}}</li>
- <li>{{jsxref("Promise.all()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/promise/race/index.md b/files/fr/web/javascript/reference/global_objects/promise/race/index.md
new file mode 100644
index 0000000000..c6334d9439
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/promise/race/index.md
@@ -0,0 +1,172 @@
+---
+title: Promise.race()
+slug: Web/JavaScript/Reference/Global_Objects/Promise/race
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Méthode
+  - Promise
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Promise/race
+original_slug: Web/JavaScript/Reference/Objets_globaux/Promise/race
+---
+{{JSRef}}
+
+La méthode **`Promise.race()`** renvoie une promesse qui est résolue ou rejetée dès qu'une des promesses de l'itérable passé en argument est résolue ou rejetée. La valeur (dans le cas de la résolution) ou la raison (dans le cas d'un échec) utilisée est celle de la promesse de l'itérable qui est resolue/qui échoue.
+
+{{EmbedInteractiveExample("pages/js/promise-race.html")}}
+
+## Syntaxe
+
+    Promise.race(itérable);
+
+### Paramètres
+
+- `itérable`
+  - : Un objet itérable, par exemple un {{jsxref("Array")}}. Voir la page [itérable](/fr/docs/Web/JavaScript/Guide/iterable).
+
+### Valeur de retour
+
+Une promesse ({{jsxref("Promise")}}) à résoudre qui est résolue de façon asynchrone dès que l'une des promesses de l'itérable est tenue ou rompue.
+
+## Description
+
+La fonction `race` renvoie une `Promise` qui est résolue/rejetée de la même façon que la première promesse de l'itérable à être résolue/rejetée.
+
+Si l'itérable passé en argument est vide, la promesse sera continuellement en attente.
+
+Si l'itérable contient une ou plusieurs valeurs qui ne sont pas des promesses ou une promesse déjà résolue, `Promise.race` fournira une promesse résolue avec la première de ces valeurs trouvées dans l'itérable.
+
+## Exemples
+
+### Caractère asynchrone de `Promise.race()`
+
+L'exemple qui suit illuste le caractère asynchrone de `Promise.race:`
+
+```js
+// On passe un tableau de promesses déjà résolues
+// en argument afin de déclencher Promise.race
+// dès que possible
+var resolvedPromisesArray = [Promise.resolve(33), Promise.resolve(44)];
+
+var p = Promise.race(resolvedPromisesArray);
+// On affiche immédiatement la valeur p dans la console
+console.log(p);
+
+// Avec setTimeout on peut exécuter du code
+// une fois que la pile est vide
+setTimeout(function(){
+    console.log('La pile est désormais vide');
+    console.log(p);
+});
+
+// affichera, dans cet ordre :
+// Promise { <state>: "pending" }
+// La pile est désormais vide
+// Promise { <state>: "fulfilled", <value>: 33 }
+```
+
+Un itérable vide renverra une promesse qui restera en attente :
+
+```js
+var foreverPendingPromise = Promise.race([]);
+console.log(foreverPendingPromise);
+setTimeout(function(){
+    console.log('La pile est désormais vide');
+    console.log(foreverPendingPromise);
+});
+
+// affichera, dans cet ordre :
+// Promise { <state>: "pending" }
+// La pile est désormais vide
+// Promise { <state>: "pending" }
+```
+
+Si l'itérable contient une ou plusieurs valeurs qui ne sont pas des promesses ou des promesses déjà résolues, `Promise.race` considèrera la première valeur ainsi trouvée dans l'itérable :
+
+```js
+var foreverPendingPromise = Promise.race([]);
+var alreadyResolvedProm = Promise.resolve(666);
+
+var arr = [foreverPendingPromise, alreadyResolvedProm, "non-Promise value"];
+var arr2 = [foreverPendingPromise, "non-Promise value", Promise.resolve(666)];
+var p = Promise.race(arr);
+var p2 = Promise.race(arr2);
+
+console.log(p);
+console.log(p2);
+setTimeout(function(){
+    console.log('the stack is now empty');
+    console.log(p);
+    console.log(p2);
+});
+
+// affichera dans l'ordre :
+// Promise { <state>: "pending" }
+// Promise { <state>: "pending" }
+// the stack is now empty
+// Promise { <state>: "fulfilled", <value>: 666 }
+// Promise { <state>: "fulfilled", <value>: "non-Promise value" }
+```
+
+### Utilisation de `Promise.race` – exemples avec `setTimeout`
+
+```js
+var p1 = new Promise(function(resolve, reject) {
+    setTimeout(resolve, 500, "un");
+});
+var p2 = new Promise(function(resolve, reject) {
+    setTimeout(resolve, 100, "deux");
+});
+
+Promise.race([p1, p2]).then(function(value) {
+  console.log(value); // "deux"
+  // Les deux promesses sont résolues mais p2 est plus rapide
+});
+
+var p3 = new Promise(function(resolve, reject) {
+    setTimeout(resolve, 100, "trois");
+});
+var p4 = new Promise(function(resolve, reject) {
+    setTimeout(reject, 500, "quatre");
+});
+
+Promise.race([p3, p4]).then(function(value) {
+  console.log(value); // "trois"
+  // p3 est plus rapide et entraîne la résolution de la promesse de compétition
+}, function(reason) {
+  // N'est pas appelée
+});
+
+var p5 = new Promise(function(resolve, reject) {
+    setTimeout(resolve, 500, "cinq");
+});
+var p6 = new Promise(function(resolve, reject) {
+    setTimeout(reject, 100, "six");
+});
+
+Promise.race([p5, p6]).then(function(value) {
+  // N'est pas appelée
+}, function(reason) {
+  console.log(reason); // "six"
+  // p6 est plus rapide et rejète la promesse de compétition
+});
+```
+
+> **Note :** voir la documentation sur [`setTimeout`.](/fr/docs/Web/API/WindowTimers/setTimeout)
+
+## Spécifications
+
+| Spécification                                                                    | État                         | Commentaires                                    |
+| -------------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------- |
+| {{SpecName('ES2015', '#sec-promise.race', 'Promise.race')}} | {{Spec2('ES2015')}}     | Définition initiale au sein d'un standard ECMA. |
+| {{SpecName('ESDraft', '#sec-promise.race', 'Promise.race')}} | {{Spec2('ESDraft')}} |                                                 |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Promise.race")}}
+
+## Voir aussi
+
+- {{jsxref("Promise")}}
+- {{jsxref("Promise.all()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/promise/reject/index.html b/files/fr/web/javascript/reference/global_objects/promise/reject/index.html
deleted file mode 100644
index e8fbfe5b5c..0000000000
--- a/files/fr/web/javascript/reference/global_objects/promise/reject/index.html
+++ /dev/null
@@ -1,76 +0,0 @@
----
-title: Promise.reject()
-slug: Web/JavaScript/Reference/Global_Objects/Promise/reject
-tags:
-  - ECMAScript 2015
-  - JavaScript
-  - Méthode
-  - Promise
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Promise/reject
-original_slug: Web/JavaScript/Reference/Objets_globaux/Promise/reject
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <code><strong>Promise.reject(raison)</strong></code> renvoie un objet <code>Promise</code> qui est rejeté (la promesse n'est pas tenue) à cause d'une raison donnée.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/promise-reject.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">Promise.reject(<var>raison</var>);</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>raison</code></dt>
- <dd>La raison pour laquelle la <code>Promise</code> n'a pas été tenue.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Une promesse ({{jsxref("Promise")}}) qui est rompue avec la raison passée en argument.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>La fonction statique <code>Promise.reject</code> renvoie une <code>Promise</code> qui est rejetée. Pour faciliter le débogage (comprendre plus rapidement le problème et sélectionner une erreur précise), il peut être utile que l'argument <code>raison</code> soit une instance d'{{jsxref("Error")}}.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<pre class="brush: js">Promise.reject(new Error("échec")).then(function() {
-  // n'est pas appelée
-}, function(erreur) {
-  console.log(erreur); // Analyse de la pile d'appels
-});</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-promise.reject', 'Promise.reject')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td>Définition initiale au sein d'un standard ECMA.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-promise.reject', 'Promise.reject')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Promise.reject")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Promise")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/promise/reject/index.md b/files/fr/web/javascript/reference/global_objects/promise/reject/index.md
new file mode 100644
index 0000000000..884d2baec5
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/promise/reject/index.md
@@ -0,0 +1,59 @@
+---
+title: Promise.reject()
+slug: Web/JavaScript/Reference/Global_Objects/Promise/reject
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Méthode
+  - Promise
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Promise/reject
+original_slug: Web/JavaScript/Reference/Objets_globaux/Promise/reject
+---
+{{JSRef}}
+
+La méthode **`Promise.reject(raison)`** renvoie un objet `Promise` qui est rejeté (la promesse n'est pas tenue) à cause d'une raison donnée.
+
+{{EmbedInteractiveExample("pages/js/promise-reject.html")}}
+
+## Syntaxe
+
+    Promise.reject(raison);
+
+### Paramètres
+
+- `raison`
+  - : La raison pour laquelle la `Promise` n'a pas été tenue.
+
+### Valeur de retour
+
+Une promesse ({{jsxref("Promise")}}) qui est rompue avec la raison passée en argument.
+
+## Description
+
+La fonction statique `Promise.reject` renvoie une `Promise` qui est rejetée. Pour faciliter le débogage (comprendre plus rapidement le problème et sélectionner une erreur précise), il peut être utile que l'argument `raison` soit une instance d'{{jsxref("Error")}}.
+
+## Exemples
+
+```js
+Promise.reject(new Error("échec")).then(function() {
+  // n'est pas appelée
+}, function(erreur) {
+  console.log(erreur); // Analyse de la pile d'appels
+});
+```
+
+## Spécifications
+
+| Spécification                                                                        | État                         | Commentaires                                    |
+| ------------------------------------------------------------------------------------ | ---------------------------- | ----------------------------------------------- |
+| {{SpecName('ES2015', '#sec-promise.reject', 'Promise.reject')}} | {{Spec2('ES2015')}}     | Définition initiale au sein d'un standard ECMA. |
+| {{SpecName('ESDraft', '#sec-promise.reject', 'Promise.reject')}} | {{Spec2('ESDraft')}} |                                                 |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Promise.reject")}}
+
+## Voir aussi
+
+- {{jsxref("Promise")}}
diff --git a/files/fr/web/javascript/reference/global_objects/promise/resolve/index.html b/files/fr/web/javascript/reference/global_objects/promise/resolve/index.html
deleted file mode 100644
index 7f9e6d1ea9..0000000000
--- a/files/fr/web/javascript/reference/global_objects/promise/resolve/index.html
+++ /dev/null
@@ -1,153 +0,0 @@
----
-title: Promise.resolve()
-slug: Web/JavaScript/Reference/Global_Objects/Promise/resolve
-tags:
-  - ECMAScript 2015
-  - JavaScript
-  - Méthode
-  - Promise
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Promise/resolve
-original_slug: Web/JavaScript/Reference/Objets_globaux/Promise/resolve
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <code><strong>Promise.resolve(valeur)</strong></code> renvoie un objet {{jsxref("Promise")}} qui est résolu avec la valeur donnée. Si cette valeur est une promesse, la promesse est renvoyée, si la valeur possède une méthode {{jsxref("Promise.then","then")}}, la promesse renvoyée « suivra » cette méthode et prendra son état ; sinon, la promesse renvoyée sera tenue avec la valeur.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/promise-resolve.html")}}</div>
-
-<div class="warning">
-<p><strong>Attention :</strong> <code>Promise.resolve()</code> ne doit pas être appelée sur un objet <em>thenable</em> qui se résout en lui-même. Cela provoquera une récursion infinie et <code>resolve()</code> tentera d'aplatir ce qui ressemble à une promesse imbriquée à l'infini.</p>
-</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>Promise.resolve(valeur)</var>;
-Promise.resolve(promesse);
-Promise.resolve(suivant);
-</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>valeur</code></dt>
- <dd>L'argument qu'on souhaite résoudre avec cette promesse (<code>Promise</code>). Cet argument peut être un objet <code>Promise</code> ou un objet avec une méthode <code>then</code> à résoudre à la suite.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Une promesse ({{jsxref("Promise")}}) qui est résolue avec la valeur indiquée en argument ou la promesse passée en argument si celui-ci est une promesse.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>La fonction statique <code>Promise.resolve</code> renvoie un objet <code>Promise</code> qui est résolu.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Utilisation_de_la_méthode_statique_Promise.resolve">Utilisation de la méthode statique <code>Promise.resolve</code></h3>
-
-<pre class="brush: js">Promise.resolve("Succès").then(function(valeur) {
-  console.log(valeur); // "Succès"
-}, function(valeur) {
-  // n'est pas appelée
-});
-</pre>
-
-<h3 id="Résoudre_un_tableau">Résoudre un tableau</h3>
-
-<pre class="brush: js">var p = Promise.resolve([1,2,3]);
-p.then(function(v) {
-  console.log(v[0]); // 1
-});
-</pre>
-
-<h3 id="Résoudre_une_autre_Promise">Résoudre une autre <code>Promise</code></h3>
-
-<pre class="brush: js">var original = Promise.resolve(33);
-var cast = Promise.resolve(original);
-cast.then(function(value) {
-  console.log("value: " + value);
-});
-console.log("original === cast ? " + (original === cast));
-
-// affiche ceci dans la console (dans cet ordre) :
-// original === cast ? true
-// value: 33
-</pre>
-
-<p>L'ordre des traces dans la console est dû au fait que les gestionnaires <code>then()</code> sont appelés de façon asynchrone (plus de détails sur <code>then</code> <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise/then#Valeur_de_retour">dans cet article</a>).</p>
-
-<h3 id="Résoudre_des_objets_avec_then_et_renvoyer_des_erreurs">Résoudre des objets avec <code>then</code> et renvoyer des erreurs</h3>
-
-<pre class="brush: js">// Résoudre un objet avec then
-var p1 = Promise.resolve({
-  then: function(onFulfill, onReject) { onFulfill("tenue !"); }
-});
-console.log(p1 instanceof Promise) // true, l'objet est transformée en une Promise
-
-p1.then(function(v) {
-    console.log(v); // "tenue !"
-  }, function(e) {
-    // n'est pas appelée
-});
-
-// L'objet avec then renvoie une erreur avant le callback
-// La promesse n'est pas tenue
-var thenable = { then: function(resolve) {
-  throw new TypeError("Renvoi d'erreur");
-  resolve("Résolution ");
-}};
-
-var p2 = Promise.resolve(thenable);
-p2.then(function(v) {
-  // n'est pas appelée
-}, function(e) {
-  console.log(e); // TypeError : Renvoi d'erreur
-});
-
-// L'objet avec then renvoie une erreur après le callback
-// La promesse est tenue
-var thenable = { then: function(resolve) {
-  resolve("Résolue");
-  throw new TypeError("Erreur");
-}};
-
-var p3 = Promise.resolve(thenable);
-p3.then(function(v) {
-  console.log(v); // "Résolue"
-}, function(e) {
-  // n'est pas appelée
-});
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-promise.reject', 'Promise.reject')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td>Définition initiale au sein d'un standard ECMA.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-promise.resolve', 'Promise.resolve')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Promise.resolve")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Promise")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/promise/resolve/index.md b/files/fr/web/javascript/reference/global_objects/promise/resolve/index.md
new file mode 100644
index 0000000000..9bf6a9dc3f
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/promise/resolve/index.md
@@ -0,0 +1,135 @@
+---
+title: Promise.resolve()
+slug: Web/JavaScript/Reference/Global_Objects/Promise/resolve
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Méthode
+  - Promise
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Promise/resolve
+original_slug: Web/JavaScript/Reference/Objets_globaux/Promise/resolve
+---
+{{JSRef}}
+
+La méthode **`Promise.resolve(valeur)`** renvoie un objet {{jsxref("Promise")}} qui est résolu avec la valeur donnée. Si cette valeur est une promesse, la promesse est renvoyée, si la valeur possède une méthode {{jsxref("Promise.then","then")}}, la promesse renvoyée « suivra » cette méthode et prendra son état ; sinon, la promesse renvoyée sera tenue avec la valeur.
+
+{{EmbedInteractiveExample("pages/js/promise-resolve.html")}}
+
+> **Attention :** `Promise.resolve()` ne doit pas être appelée sur un objet _thenable_ qui se résout en lui-même. Cela provoquera une récursion infinie et `resolve()` tentera d'aplatir ce qui ressemble à une promesse imbriquée à l'infini.
+
+## Syntaxe
+
+    Promise.resolve(valeur);
+    Promise.resolve(promesse);
+    Promise.resolve(suivant);
+
+### Paramètres
+
+- `valeur`
+  - : L'argument qu'on souhaite résoudre avec cette promesse (`Promise`). Cet argument peut être un objet `Promise` ou un objet avec une méthode `then` à résoudre à la suite.
+
+### Valeur de retour
+
+Une promesse ({{jsxref("Promise")}}) qui est résolue avec la valeur indiquée en argument ou la promesse passée en argument si celui-ci est une promesse.
+
+## Description
+
+La fonction statique `Promise.resolve` renvoie un objet `Promise` qui est résolu.
+
+## Exemples
+
+### Utilisation de la méthode statique `Promise.resolve`
+
+```js
+Promise.resolve("Succès").then(function(valeur) {
+  console.log(valeur); // "Succès"
+}, function(valeur) {
+  // n'est pas appelée
+});
+```
+
+### Résoudre un tableau
+
+```js
+var p = Promise.resolve([1,2,3]);
+p.then(function(v) {
+  console.log(v[0]); // 1
+});
+```
+
+### Résoudre une autre `Promise`
+
+```js
+var original = Promise.resolve(33);
+var cast = Promise.resolve(original);
+cast.then(function(value) {
+  console.log("value: " + value);
+});
+console.log("original === cast ? " + (original === cast));
+
+// affiche ceci dans la console (dans cet ordre) :
+// original === cast ? true
+// value: 33
+```
+
+L'ordre des traces dans la console est dû au fait que les gestionnaires `then()` sont appelés de façon asynchrone (plus de détails sur `then` [dans cet article](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise/then#Valeur_de_retour)).
+
+### Résoudre des objets avec `then` et renvoyer des erreurs
+
+```js
+// Résoudre un objet avec then
+var p1 = Promise.resolve({
+  then: function(onFulfill, onReject) { onFulfill("tenue !"); }
+});
+console.log(p1 instanceof Promise) // true, l'objet est transformée en une Promise
+
+p1.then(function(v) {
+    console.log(v); // "tenue !"
+  }, function(e) {
+    // n'est pas appelée
+});
+
+// L'objet avec then renvoie une erreur avant le callback
+// La promesse n'est pas tenue
+var thenable = { then: function(resolve) {
+  throw new TypeError("Renvoi d'erreur");
+  resolve("Résolution ");
+}};
+
+var p2 = Promise.resolve(thenable);
+p2.then(function(v) {
+  // n'est pas appelée
+}, function(e) {
+  console.log(e); // TypeError : Renvoi d'erreur
+});
+
+// L'objet avec then renvoie une erreur après le callback
+// La promesse est tenue
+var thenable = { then: function(resolve) {
+  resolve("Résolue");
+  throw new TypeError("Erreur");
+}};
+
+var p3 = Promise.resolve(thenable);
+p3.then(function(v) {
+  console.log(v); // "Résolue"
+}, function(e) {
+  // n'est pas appelée
+});
+```
+
+## Spécifications
+
+| Spécification                                                                            | État                         | Commentaires                                    |
+| ---------------------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------- |
+| {{SpecName('ES2015', '#sec-promise.reject', 'Promise.reject')}}     | {{Spec2('ES2015')}}     | Définition initiale au sein d'un standard ECMA. |
+| {{SpecName('ESDraft', '#sec-promise.resolve', 'Promise.resolve')}} | {{Spec2('ESDraft')}} |                                                 |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Promise.resolve")}}
+
+## Voir aussi
+
+- {{jsxref("Promise")}}
diff --git a/files/fr/web/javascript/reference/global_objects/promise/then/index.html b/files/fr/web/javascript/reference/global_objects/promise/then/index.html
deleted file mode 100644
index cf5990f1ea..0000000000
--- a/files/fr/web/javascript/reference/global_objects/promise/then/index.html
+++ /dev/null
@@ -1,264 +0,0 @@
----
-title: Promise.prototype.then()
-slug: Web/JavaScript/Reference/Global_Objects/Promise/then
-tags:
-  - ECMAScript6
-  - JavaScript
-  - Méthode
-  - Promise
-  - Prototype
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Promise/then
-original_slug: Web/JavaScript/Reference/Objets_globaux/Promise/then
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <code><strong>then()</strong></code> renvoie un objet {{jsxref("Promise")}}. Elle peut prendre jusqu'à deux arguments qui sont deux fonctions <em>callback</em> à utiliser en cas de complétion ou d'échec de la <code>Promise</code>.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/promise-then.html")}}</div>
-
-
-
-<div class="note">
-<p><strong>Note :</strong> Si aucun des deux arguments n'est utilisé ou que les objets fournis ne sont pas des fonctions, une nouvelle promesse est créée sans autre gestionnaire supplémentaire. Si le premier argument est absent ou qu'un objet qui n'est pas une fonction est passé, la nouvelle promesse utilisera la fonction de réussite de la promesse originelle. De même, si le deuxième argument n'est pas passé ou que ce n'est pas une fonction, la nouvelle promesse créée utilisera la fonction de rejet de la promesse appelante.</p>
-</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>p.then(siTenue);
-p.then(siTenue, siRejetée)</var>;
-
-p.then((valeur) =&gt; {
-    // Promesse tenue
-  }, (raison) =&gt; {
-    // Rejet de la promesse
-});
-</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<ul>
-</ul>
-
-<dl>
- <dt><code>siTenue</code></dt>
- <dd>Une {{jsxref("Function","fonction","",1)}} appelée lorsque la <code>Promise</code> est tenue. Cette fonction a un seul argument, la <code>valeur</code> qui a permis de résoudre la promesse. Si <code>siTenue</code> n'est pas une fonction, elle est implicitement remplacée par une fonction « identité » qui renvoie l'argument tel quel.</dd>
- <dt><code>siRejetée</code> {{optional_inline}}</dt>
- <dd>Une {{jsxref("Function","fonction","",1)}} appelée lorsque la <code>Promise</code> est rejetée. Cette fonction a un seul argument, la <code>raison</code> pour laquelle la promesse a été rejetée. Si <code>siRejetée</code> n'est pas une fonction, elle est implicitement remplacée par une fonction qui lève une erreur avec la <code>raison</code> passée en argument.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>La méthode <code>then()</code> renvoie une promesse ({{jsxref("Promise")}}) en attente de résolution et dont la valeur est déterminée selon les deux fonctions passées en arguments et qui seront appelées de façon asynchrone :</p>
-
-<ul>
- <li>Si <code>siRejetée</code> ou <code>siTenue</code> lève une exception ou renvoie une promesse rompue, la promesse renvoyée par <code>then()</code> est rompue et la valeur fournie est l'exception ou l'explication de la promesse rompue.</li>
- <li>Si <code>siRejetée</code> ou <code>siTenue</code> renvoie une promesse tenue ou n'importe quelle autre valeur, la promesse renvoyée est tenue et la valeur de résolution est la même que celle de la promesse tenue.</li>
- <li>Si <code>siRejetée</code> ou <code>siTenue</code> renvoie une promesse en attente de résolution, la promesse renvoyée par <code>then()</code> sera résolue de la même façon que la promesse renvoyée par le gestionnaire. En fait, dans ce cas, la promesse renvoyée par <code>then()</code> est la même que la promesse renvoyée par le gestionnaire (<code>siTenue</code> ou <code>siRejetée</code>).</li>
-</ul>
-
-<h2 id="Description">Description</h2>
-
-<p>Comme les méthodes <code>then()</code> et {{jsxref("Promise.prototype.catch()")}} renvoient des promesses, on peut enchaîner ces opérations (c'est ce qu'on appelle la <em>composition</em> de promesses, voir l'exemple ci-après).</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Utilisation_de_la_méthode_then()">Utilisation de la méthode <code>then()</code></h3>
-
-<pre class="brush: js">var p1 = new Promise(function(resolve, reject) {
-  resolve("Succès !");
-  // ou
-  // reject("Erreur !");
-});
-
-p1.then((valeur) =&gt; {
-  console.log(valeur); // Succès !
-  }, (raison) =&gt; {
-  console.log(raison); // Erreur !
-});
-</pre>
-
-<h3 id="Composition_-_Chaînage">Composition - Chaînage</h3>
-
-<p>La méthode <code>then()</code> renvoie un objet <code>Promise</code>, ce qui permet d'enchaîner les opération. On peut passer une fonction lambda à then puis utiliser la promesse obtenue pour la passer à la méthode suivante. Dans l'exemple ci-après, on simule un code asynchrone avec la fonction <code>setTimeout</code>.</p>
-
-<pre class="brush: js">Promise.resolve("toto")
-  // 1. Première étape, on reçoit "toto" et on le concatène avec
-  //    "truc", ce qui résoud la première étape puis on passe au
-  //    deuxième then
-  .then(function(string) {
-    return new Promise(function(resolve, reject) {
-      setTimeout(function() {
-        string += 'truc';
-        resolve(string);
-      }, 1);
-    });
-  })
-  // 2. Deuxième étape, on reçoit "tototruc" et on enregistre une
-  //    fonction de rappel pour manipuler cette chaîne puis l'imprimer
-  //    dans la console. Avant cela, on passe la chaîne intacte au
-  //    prochain then
-  .then(function(string) {
-    setTimeout(function() {
-      string += 'baz';
-      console.log(string);
-    }, 1)
-    return string;
-  })
-  // 3. On affiche un message sur le code, celui-ci sera affiché
-  //    avant que la chaîne soit traitée dans le bloc précédent
-  //    qui agit comme un bloc asynchrone.
-  .then(function(string) {
-    console.log("Et voilà la dernière, qui risque d'arriver avant la 2e");
-
-    // Ici, la chaîne n'aura pas le morceau 'baz' car la fonction
-    // setTimeout retarde l'exécution du code.
-    console.log(string);
-});
-</pre>
-
-<p>Lorsqu'une valeur est simplement renvoyée depuis une fonction lambda <code>then</code>, celle-ci renverra <code>Promise.resolve(&lt;la valeur renvoyée par le gestionnaire appelé&gt;)</code>.</p>
-
-<pre class="brush: js">var p2 = new Promise(function(resolve, reject) {
-  resolve(1);
-});
-
-p2.then(function(valeur) {
-  console.log(valeur); // 1
-  return valeur + 1;
-  }).then(function(valeur) {
-  console.log(valeur + "- cette utilisation synchrone est un peu inutile");
-  // 2- cette utilisation synchrone est un peu inutile
-});
-
-p2.then(function(valeur) {
-  console.log(valeur); // 1
-});
-</pre>
-
-<p>Appeler <code>then()</code> renverra une promesse rompue si la fonction lève une exception ou si elle renvoie une promesse rompue.</p>
-
-<pre class="brush: js">Promise.resolve()
-  .then( () =&gt; {
-    // Ici .then() lève une exception
-    throw 'Oh zut :( !';
-  })
-  .then( () =&gt; {
-    console.log( "Ceci n'est pas appelé." );
-  }, raison =&gt; {
-    console.error( 'la fonction siRompue est appelée : ' + raison );
-});</pre>
-
-<p>Dans tous les autres cas, un promesse de résolution est renvoyée. Dans l'exemple qui suit, le premier <code>then()</code> renvoie <code>42</code> même si la promesse précédente a été rompue :</p>
-
-<pre class="brush: js">Promise.reject()
-  .then( () =&gt; 99, () =&gt; 42 ) // la valeur 42 est renvoyée dans une promesse
-  .then( solution =&gt; console.log( 'Résolue avec ' + solution ) ); // Résolue avec 42</pre>
-
-<p>En pratique, il est souvent préférable d'attraper les promesses rompues plutôt que d'utiliser la syntaxe de <code>then()</code> avec deux fonctions :</p>
-
-<pre class="brush: js">Promise.resolve()
-  .then( () =&gt; {
-    // .then() renvoie une promesse rompue
-    throw 'Oh zut !';
-  })
-  .catch( raison =&gt; {
-    console.error( 'fonction siRompue appelée : ' + raison );
-  })
-  .then( () =&gt; {
-    console.log("Je suis toujours appelée, même si il y a un souci avant");
-  });</pre>
-
-<p>Le chaînage peut également être utilisé pour implémenter une fonction utilisant une API basée sur les promesses et encapsuler une autre fonction :</p>
-
-<pre class="brush: js">function fetch_current_data() {
-  // L'API fetch renvoie une promesse. Cette fonction
-  // expose une API similaire mais lorsque la promesse
-  // est tenue, on effectue plus de tâches
-  return fetch("current-data.json").then((response) =&gt; {
-    if (response.headers.get("content-type") != "application/json") {
-      throw new TypeError();
-    }
-    var j = response.json();
-    // on peut ici manipuler j si besoin
-    return j; // la valeur fournie à l'utilisateur de
-              // fetch_current_data().then()
-  });
-}
-</pre>
-
-<p>Si le gestionnaire <code><em>siTenue</em></code> renvoie une promesse, la valeur de retour de <code>then()</code> sera alors résolue/rompue par cette promesse.</p>
-
-<pre class="brush: js">function resoudrePlusTard(resolve, reject) {
-  setTimeout(function () {
-    resolve(10);
-  }, 1000);
-}
-function romprePlusTard(resolve, reject) {
-  setTimeout(function () {
-    reject(20);
-  }, 1000);
-}
-
-var p1 = Promise.resolve("toto");
-var p2 = p1.then(function() {
-  // On renvoie une nouvelle promesse
-  // qui sera résolue avec la valeur 10
-  // au bout d'une seconde
-  return new Promise(resoudrePlusTard);
-});
-p2.then(function(v) {
-  console.log("tenue", v);
-  // "tenue", 10
-}, function(e) {
-  // ceci n'est pas appelé
-  console.log("rompue", e);
-});
-
-var p3 = p1.then(function() {
-  // Ici, on renvoie une promesse
-  // qui sera rompue avec la valeur
-  // 20 au bout d'une seconde
-  return new Promise(romprePlusTard);
-});
-p3.then(function(v) {
-  // ceci n'est pas appelé
-  console.log("tenue", v);
-}, function(e) {
-  console.log("rompue", e);
-  // "rompue", 20
-});
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-promise.prototype.then', 'Promise.prototype.then')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td>Définition initiale au sein d'un standard ECMA.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-promise.prototype.then', 'Promise.prototype.then')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Promise.then")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Promise")}}</li>
- <li>{{jsxref("Promise.prototype.catch()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/promise/then/index.md b/files/fr/web/javascript/reference/global_objects/promise/then/index.md
new file mode 100644
index 0000000000..9720700136
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/promise/then/index.md
@@ -0,0 +1,248 @@
+---
+title: Promise.prototype.then()
+slug: Web/JavaScript/Reference/Global_Objects/Promise/then
+tags:
+  - ECMAScript6
+  - JavaScript
+  - Méthode
+  - Promise
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Promise/then
+original_slug: Web/JavaScript/Reference/Objets_globaux/Promise/then
+---
+{{JSRef}}
+
+La méthode **`then()`** renvoie un objet {{jsxref("Promise")}}. Elle peut prendre jusqu'à deux arguments qui sont deux fonctions _callback_ à utiliser en cas de complétion ou d'échec de la `Promise`.
+
+{{EmbedInteractiveExample("pages/js/promise-then.html")}}
+
+> **Note :** Si aucun des deux arguments n'est utilisé ou que les objets fournis ne sont pas des fonctions, une nouvelle promesse est créée sans autre gestionnaire supplémentaire. Si le premier argument est absent ou qu'un objet qui n'est pas une fonction est passé, la nouvelle promesse utilisera la fonction de réussite de la promesse originelle. De même, si le deuxième argument n'est pas passé ou que ce n'est pas une fonction, la nouvelle promesse créée utilisera la fonction de rejet de la promesse appelante.
+
+## Syntaxe
+
+    p.then(siTenue);
+    p.then(siTenue, siRejetée);
+
+    p.then((valeur) => {
+        // Promesse tenue
+      }, (raison) => {
+        // Rejet de la promesse
+    });
+
+### Paramètres
+
+<!---->
+
+- `siTenue`
+  - : Une {{jsxref("Function","fonction","",1)}} appelée lorsque la `Promise` est tenue. Cette fonction a un seul argument, la `valeur` qui a permis de résoudre la promesse. Si `siTenue` n'est pas une fonction, elle est implicitement remplacée par une fonction « identité » qui renvoie l'argument tel quel.
+- `siRejetée` {{optional_inline}}
+  - : Une {{jsxref("Function","fonction","",1)}} appelée lorsque la `Promise` est rejetée. Cette fonction a un seul argument, la `raison` pour laquelle la promesse a été rejetée. Si `siRejetée` n'est pas une fonction, elle est implicitement remplacée par une fonction qui lève une erreur avec la `raison` passée en argument.
+
+### Valeur de retour
+
+La méthode `then()` renvoie une promesse ({{jsxref("Promise")}}) en attente de résolution et dont la valeur est déterminée selon les deux fonctions passées en arguments et qui seront appelées de façon asynchrone :
+
+- Si `siRejetée` ou `siTenue` lève une exception ou renvoie une promesse rompue, la promesse renvoyée par `then()` est rompue et la valeur fournie est l'exception ou l'explication de la promesse rompue.
+- Si `siRejetée` ou `siTenue` renvoie une promesse tenue ou n'importe quelle autre valeur, la promesse renvoyée est tenue et la valeur de résolution est la même que celle de la promesse tenue.
+- Si `siRejetée` ou `siTenue` renvoie une promesse en attente de résolution, la promesse renvoyée par `then()` sera résolue de la même façon que la promesse renvoyée par le gestionnaire. En fait, dans ce cas, la promesse renvoyée par `then()` est la même que la promesse renvoyée par le gestionnaire (`siTenue` ou `siRejetée`).
+
+## Description
+
+Comme les méthodes `then()` et {{jsxref("Promise.prototype.catch()")}} renvoient des promesses, on peut enchaîner ces opérations (c'est ce qu'on appelle la _composition_ de promesses, voir l'exemple ci-après).
+
+## Exemples
+
+### Utilisation de la méthode `then()`
+
+```js
+var p1 = new Promise(function(resolve, reject) {
+  resolve("Succès !");
+  // ou
+  // reject("Erreur !");
+});
+
+p1.then((valeur) => {
+  console.log(valeur); // Succès !
+  }, (raison) => {
+  console.log(raison); // Erreur !
+});
+```
+
+### Composition - Chaînage
+
+La méthode `then()` renvoie un objet `Promise`, ce qui permet d'enchaîner les opération. On peut passer une fonction lambda à then puis utiliser la promesse obtenue pour la passer à la méthode suivante. Dans l'exemple ci-après, on simule un code asynchrone avec la fonction `setTimeout`.
+
+```js
+Promise.resolve("toto")
+  // 1. Première étape, on reçoit "toto" et on le concatène avec
+  //    "truc", ce qui résoud la première étape puis on passe au
+  //    deuxième then
+  .then(function(string) {
+    return new Promise(function(resolve, reject) {
+      setTimeout(function() {
+        string += 'truc';
+        resolve(string);
+      }, 1);
+    });
+  })
+  // 2. Deuxième étape, on reçoit "tototruc" et on enregistre une
+  //    fonction de rappel pour manipuler cette chaîne puis l'imprimer
+  //    dans la console. Avant cela, on passe la chaîne intacte au
+  //    prochain then
+  .then(function(string) {
+    setTimeout(function() {
+      string += 'baz';
+      console.log(string);
+    }, 1)
+    return string;
+  })
+  // 3. On affiche un message sur le code, celui-ci sera affiché
+  //    avant que la chaîne soit traitée dans le bloc précédent
+  //    qui agit comme un bloc asynchrone.
+  .then(function(string) {
+    console.log("Et voilà la dernière, qui risque d'arriver avant la 2e");
+
+    // Ici, la chaîne n'aura pas le morceau 'baz' car la fonction
+    // setTimeout retarde l'exécution du code.
+    console.log(string);
+});
+```
+
+Lorsqu'une valeur est simplement renvoyée depuis une fonction lambda `then`, celle-ci renverra `Promise.resolve(<la valeur renvoyée par le gestionnaire appelé>)`.
+
+```js
+var p2 = new Promise(function(resolve, reject) {
+  resolve(1);
+});
+
+p2.then(function(valeur) {
+  console.log(valeur); // 1
+  return valeur + 1;
+  }).then(function(valeur) {
+  console.log(valeur + "- cette utilisation synchrone est un peu inutile");
+  // 2- cette utilisation synchrone est un peu inutile
+});
+
+p2.then(function(valeur) {
+  console.log(valeur); // 1
+});
+```
+
+Appeler `then()` renverra une promesse rompue si la fonction lève une exception ou si elle renvoie une promesse rompue.
+
+```js
+Promise.resolve()
+  .then( () => {
+    // Ici .then() lève une exception
+    throw 'Oh zut :( !';
+  })
+  .then( () => {
+    console.log( "Ceci n'est pas appelé." );
+  }, raison => {
+    console.error( 'la fonction siRompue est appelée : ' + raison );
+});
+```
+
+Dans tous les autres cas, un promesse de résolution est renvoyée. Dans l'exemple qui suit, le premier `then()` renvoie `42` même si la promesse précédente a été rompue :
+
+```js
+Promise.reject()
+  .then( () => 99, () => 42 ) // la valeur 42 est renvoyée dans une promesse
+  .then( solution => console.log( 'Résolue avec ' + solution ) ); // Résolue avec 42
+```
+
+En pratique, il est souvent préférable d'attraper les promesses rompues plutôt que d'utiliser la syntaxe de `then()` avec deux fonctions :
+
+```js
+Promise.resolve()
+  .then( () => {
+    // .then() renvoie une promesse rompue
+    throw 'Oh zut !';
+  })
+  .catch( raison => {
+    console.error( 'fonction siRompue appelée : ' + raison );
+  })
+  .then( () => {
+    console.log("Je suis toujours appelée, même si il y a un souci avant");
+  });
+```
+
+Le chaînage peut également être utilisé pour implémenter une fonction utilisant une API basée sur les promesses et encapsuler une autre fonction :
+
+```js
+function fetch_current_data() {
+  // L'API fetch renvoie une promesse. Cette fonction
+  // expose une API similaire mais lorsque la promesse
+  // est tenue, on effectue plus de tâches
+  return fetch("current-data.json").then((response) => {
+    if (response.headers.get("content-type") != "application/json") {
+      throw new TypeError();
+    }
+    var j = response.json();
+    // on peut ici manipuler j si besoin
+    return j; // la valeur fournie à l'utilisateur de
+              // fetch_current_data().then()
+  });
+}
+```
+
+Si le gestionnaire `siTenue` renvoie une promesse, la valeur de retour de `then()` sera alors résolue/rompue par cette promesse.
+
+```js
+function resoudrePlusTard(resolve, reject) {
+  setTimeout(function () {
+    resolve(10);
+  }, 1000);
+}
+function romprePlusTard(resolve, reject) {
+  setTimeout(function () {
+    reject(20);
+  }, 1000);
+}
+
+var p1 = Promise.resolve("toto");
+var p2 = p1.then(function() {
+  // On renvoie une nouvelle promesse
+  // qui sera résolue avec la valeur 10
+  // au bout d'une seconde
+  return new Promise(resoudrePlusTard);
+});
+p2.then(function(v) {
+  console.log("tenue", v);
+  // "tenue", 10
+}, function(e) {
+  // ceci n'est pas appelé
+  console.log("rompue", e);
+});
+
+var p3 = p1.then(function() {
+  // Ici, on renvoie une promesse
+  // qui sera rompue avec la valeur
+  // 20 au bout d'une seconde
+  return new Promise(romprePlusTard);
+});
+p3.then(function(v) {
+  // ceci n'est pas appelé
+  console.log("tenue", v);
+}, function(e) {
+  console.log("rompue", e);
+  // "rompue", 20
+});
+```
+
+## Spécifications
+
+| Spécification                                                                                                | État                         | Commentaires                                    |
+| ------------------------------------------------------------------------------------------------------------ | ---------------------------- | ----------------------------------------------- |
+| {{SpecName('ES2015', '#sec-promise.prototype.then', 'Promise.prototype.then')}}     | {{Spec2('ES2015')}}     | Définition initiale au sein d'un standard ECMA. |
+| {{SpecName('ESDraft', '#sec-promise.prototype.then', 'Promise.prototype.then')}} | {{Spec2('ESDraft')}} |                                                 |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Promise.then")}}
+
+## Voir aussi
+
+- {{jsxref("Promise")}}
+- {{jsxref("Promise.prototype.catch()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/proxy/index.html b/files/fr/web/javascript/reference/global_objects/proxy/index.html
deleted file mode 100644
index d02e303881..0000000000
--- a/files/fr/web/javascript/reference/global_objects/proxy/index.html
+++ /dev/null
@@ -1,406 +0,0 @@
----
-title: Proxy
-slug: Web/JavaScript/Reference/Global_Objects/Proxy
-tags:
-  - ECMAScript 2015
-  - JavaScript
-  - Proxy
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Proxy
-original_slug: Web/JavaScript/Reference/Objets_globaux/Proxy
----
-<div>{{JSRef}}</div>
-
-<p>L'objet <strong>Proxy</strong> est utilisé afin de définir un comportement sur mesure pour certaines opérations fondamentales (par exemple, l'accès aux propriétés, les affectations, les énumérations, les appels de fonctions, etc.).</p>
-
-<h2 id="Terminologie">Terminologie</h2>
-
-<dl>
- <dt><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Proxy/handler">gestionnaire</a> (<em>handler</em>)</dt>
- <dd>Un objet qui contient les trappes qui intercepteront les opérations.</dd>
- <dt>trappes</dt>
- <dd>Les méthodes qui fournissent l'accès aux propriétés. Ce concept est analogue aux <a href="https://en.wikipedia.org/wiki/Trap_%28computing%29">trappes</a> utilisées dans les systèmes d'exploitations.</dd>
- <dt>cible</dt>
- <dd>L'objet virtualisé par le proxy. Il est souvent utilisé comme objet de stockage. Les invariants (c'est-à-dire les éléments de sémantique qui restent inchangés) relatifs à la non-extensibilité et au caractère non-configurable des propriétés sont vérifiés par rapport à la cible.</dd>
-</dl>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">var p = new Proxy(cible, gestionnaire);
-</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>cible</code></dt>
- <dd>Une cible (qui peut être n'importe quel objet, un tableau, une fonction, ou même un autre proxy) qu'on souhaite envelopper dans un <code>Proxy</code>.</dd>
- <dt><code>gestionnaire</code></dt>
- <dd>Un objet dont les propriétés sont des fonctions qui définissent le comportement du proxy lorsqu'on utilise une opération sur celui-ci.</dd>
-</dl>
-
-<h2 id="Méthodes">Méthodes</h2>
-
-<dl>
- <dt>{{jsxref("Proxy.revocable()")}}</dt>
- <dd>Permet de créer un objet <code>Proxy</code> révocable.</dd>
-</dl>
-
-<h2 id="Méthodes_pour_le_gestionnaire">Méthodes pour le gestionnaire</h2>
-
-<p>L'objet utilisé comme gestionnaire regroupe les différentes fonctions « trappes » pour le <code>Proxy</code>.</p>
-
-<div>{{page('/fr/docs/Web/JavaScript/Reference/Objets_globaux/Proxy/handler', 'Méthodes') }}</div>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Exemple_simple">Exemple simple</h3>
-
-<p>Dans ce court exemple, on renvoie le nombre <code>37</code> comme valeur par défaut lorsque la propriété nommée n'est pas présente dans l'objet. Pour cela, on utilise le gestionnaire correspondant à {{jsxref("Objets_globaux/Proxy/handler/get","get")}}.</p>
-
-<pre class="brush: js">var handler = {
-    get: function(obj, prop){
-        return prop in obj?
-            obj[prop] :
-            37;
-    }
-};
-
-var p = new Proxy({}, handler);
-p.a = 1;
-p.b = undefined;
-
-console.log(p.a, p.b); // 1, undefined
-console.log('c' in p, p.c); // false, 37
-</pre>
-
-<h3 id="Proxy_«_invisible_»">Proxy « invisible »</h3>
-
-<p>Dans cet exemple, le proxy transfère toutes les opérations qui sont appliquées à l'objet cible.</p>
-
-<pre class="brush: js">var cible = {};
-var p = new Proxy(cible, {});
-
-p.a = 37; // L'opération est transmise à la cible par le proxy
-
-console.log(cible.a); // 37. L'opération a bien été transmise
-</pre>
-
-<h3 id="Validation">Validation</h3>
-
-<p>En utilisant un <code>Proxy</code>, il devient simple de valider les valeurs passées à un objet. Dans cet exemple, on utilise le gestionnaire correspondant à {{jsxref("Objets_globaux/Proxy/handler/set","set")}}.</p>
-
-<pre class="brush: js">let validateur = {
-  set: function(obj, prop, valeur) {
-    if (prop === 'âge') {
-      if (!Number.isInteger(valeur)) {
-        throw new TypeError('Cet âge n\'est pas un entier.');
-      }
-      if (valeur &gt; 200) {
-        throw new RangeError('Cet âge semble invalide.');
-      }
-    }
-
-    // Le comportement par défaut : enregistrer la valeur
-    obj[prop] = valeur;
-
-    // On indique le succès de l'opération
-    return true;
-  }
-};
-
-let personne = new Proxy({}, validateur);
-
-personne.âge = 100;
-console.log(personne.âge); // 100
-personne.âge = 'jeune';    // lève une exception
-personne.âge = 300;        // lève une exception
-</pre>
-
-<h3 id="Étendre_un_constructeur">Étendre un constructeur</h3>
-
-<p>En utilisant une fonction proxy, on peut étendre un constructeur avec un nouveau constructeur. Dans cet exemple, on utilise les gestionnaires correspondants à {{jsxref("Objets_globaux/Proxy/handler/construct","construct")}} et {{jsxref("Objets_globaux/Proxy/handler/apply","apply")}}.</p>
-
-<pre class="brush: js">function étendre(sup,base) {
-  var descripteur = Object.getOwnPropertyDescriptor(
-    base.prototype, "constructor"
-  );
-  base.prototype = Object.create(sup.prototype);
-  var gestionnaire = {
-    construct: function(cible, args) {
-      var obj = Object.create(base.prototype);
-      this.apply(cible,obj,args);
-      return obj;
-    },
-    apply: function(cible, that, args) {
-      sup.apply(that,args);
-      base.apply(that,args);
-    }
-  };
-  var proxy = new Proxy(base,gestionnaire);
-  descripteur.value = proxy;
-  Object.defineProperty(base.prototype, "constructor", descripteur);
-  return proxy;
-}
-
-var Personne = function(nom){
-  this.nom = nom;
-};
-
-var Garçon = étendre(Personne, function(nom, âge) {
-  this.âge = âge;
-});
-
-Garçon.prototype.genre = "M";
-
-var Pierre = new Garçon("Pierre", 13);
-console.log(Pierre.genre);  // "M"
-console.log(Pierre.nom);  // "Pierre"
-console.log(Pierre.âge);  // 13</pre>
-
-<h3 id="Manipuler_les_nœuds_DOM">Manipuler les nœuds DOM</h3>
-
-<p>Parfois, on veut passer un attribut ou un nom de classe entre deux éléments différents. Dans cet exemple, on utilise le gestionnaire lié à {{jsxref("Objets_globaux/Proxy/handler/set","set")}}.</p>
-
-<pre class="brush: js">let vue = new Proxy({
-  selected: null
-},
-{
-  set: function(obj, prop, nouvelleValeur) {
-    let ancienneValeur = obj[prop];
-
-    if (prop === 'selected') {
-      if (ancienneValeur) {
-        ancienneValeur.setAttribute('aria-selected', 'false');
-      }
-      if (nouvelleValeur) {
-        nouvelleValeur.setAttribute('aria-selected', 'true');
-      }
-    }
-
-    // Le comportement par défaut : enregistrer la valeur
-    obj[prop] = nouvelleValeur;
-
-    // On indique le succès de l'opération
-    return true;
-  }
-});
-
-let i1 = vue.selected = document.getElementById('item-1');
-console.log(i1.getAttribute('aria-selected')); // 'true'
-
-let i2 = vue.selected = document.getElementById('item-2');
-console.log(i1.getAttribute('aria-selected')); // 'false'
-console.log(i2.getAttribute('aria-selected')); // 'true'
-</pre>
-
-<h3 id="Corriger_une_valeur_et_ajouter_une_propriété_supplémentaire">Corriger une valeur et ajouter une propriété supplémentaire</h3>
-
-<p>Dans l'exemple qui suit, le proxy <code>produits</code> évalue la valeur passée et la convertit en tableau si besoin. L'objet supporte également la propriété supplémentaire <code>dernierNavigateur</code> à la fois comme accesseur et mutateur.</p>
-
-<pre class="brush: js">let produits = new Proxy({
-  navigateurs: ['Internet Explorer', 'Netscape']
-},
-{
-  get: function(obj, prop) {
-    // Une propriété supplémentaire
-    if (prop === 'dernierNavigateur') {
-      return obj.navigateurs[obj.navigateurs.length - 1];
-    }
-
-    // Le comportement par défaut : renvoyer la valeur
-    return obj[prop];
-  },
-  set: function(obj, prop, valeur) {
-    // Une propriété supplémentaire
-    if (prop === 'dernierNavigateur') {
-      obj.navigateurs.push(valeur);
-      return true;
-    }
-
-    // on convertit la valeur si ce n'est pas un tableau
-    if (typeof valeur === 'string') {
-      valeur = [valeur];
-    }
-
-    // Le comportement par défaut : enregistrer la valeur
-    obj[prop] = valeur;
-
-    // On indique le succès de l'opération
-    return true;
-  }
-});
-
-console.log(produits.navigateurs); // ['Internet Explorer', 'Netscape']
-produits.navigateurs = 'Firefox'; // on passe une chaîne
-console.log(produits.navigateurs); // ['Firefox'] &lt;- pas de problème, elle est convertie en tableau
-
-produits.dernierNavigateur = 'Chrome';
-console.log(produits.navigateurs); // ['Firefox', 'Chrome']
-console.log(produits.dernierNavigateur); // 'Chrome'
-</pre>
-
-<h3 id="Trouver_un_élément_dans_un_tableau_grâce_à_sa_propriété">Trouver un élément dans un tableau grâce à sa propriété</h3>
-
-<p>Dans cet exemple, ce proxy étend le tableau avec des fonctionnalités supplémentaires. Ici, on définit des propriétés sans utiliser {{jsxref("Objets_globaux/Object/defineProperties","Object.defineProperties")}}. Cet exemple pourrait être adapté pour trouver la ligne d'un tableau à partir d'une de ces cellules (la cible serait alors <a href="/fr/docs/Web/API/HTMLTableElement.rows"><code>table.rows</code></a>).</p>
-
-<pre class="brush: js">let produits = new Proxy([
-  { nom: 'Firefox', type: 'navigateur' },
-  { nom: 'SeaMonkey', type: 'navigateur' },
-  { nom: 'Thunderbird', type: 'client mail' }
-],
-{
-  get: function(obj, prop) {
-    // Le comportement par défaut : on renvoie la valeur
-    // prop est généralement un entier
-    if (prop in obj) {
-      return obj[prop];
-    }
-
-    // On obtient le nombre de produits
-    // un alias pour products.length
-    if (prop === 'nombre') {
-      return obj.length;
-    }
-
-    let résultat, types = {};
-
-    for (let produit of obj) {
-      if (produit.nom === prop) {
-        résultat = produit;
-      }
-      if (types[produit.type]) {
-        types[produit.type].push(produit);
-      } else {
-        types[produit.type] = [produit];
-      }
-    }
-
-    // Obtenir un produit grâce à un nom
-    if (résultat) {
-      return résultat;
-    }
-
-    // Obtenir un produit par type
-    if (prop in types) {
-      return types[prop];
-    }
-
-    // Obtenir les types de produits
-    if (prop === 'types') {
-      return Object.keys(types);
-    }
-
-    return undefined;
-  }
-});
-
-console.log(produits[0]); // { nom: 'Firefox', type: 'navigateur' }
-console.log(produits['Firefox']); // { nom: 'Firefox', type: 'navigateur' }
-console.log(produits['Chrome']); // undefined
-console.log(produits.navigateur); // [{ nom: 'Firefox', type: 'navigateur' }, { nom: 'SeaMonkey', type: 'navigateur' }]
-console.log(produits.types); // ['navigateur', 'client mail']
-console.log(produits.nombre); // 3
-</pre>
-
-<h3 id="Un_exemple_avec_toutes_les_trappes">Un exemple avec toutes les trappes</h3>
-
-<p>Pour illustrer l'ensemble des trappes, on tente de « proxifier » un objet non natif : l'objet global <code>docCookies</code> créé grâce à <a href="/fr/docs/Web/API/Document/cookie/Simple_document.cookie_framework">cet exemple</a>.</p>
-
-<pre class="brush: js">/*
-  var docCookies = ... définir l'objet "docCookies" grâce à
-  https://developer.mozilla.org/en-US/docs/DOM/document.cookie#A_little_framework.3A_a_complete_cookies_reader.2Fwriter_with_full_unicode_support
-*/
-
-var docCookies = new Proxy(docCookies, {
-  "get": function (oTarget, sKey) {
-    return oTarget[sKey] || oTarget.getItem(sKey) || undefined;
-  },
-  "set": function (oTarget, sKey, vValue) {
-    if (sKey in oTarget) { return false; }
-    return oTarget.setItem(sKey, vValue);
-  },
-  "deleteProperty": function (oTarget, sKey) {
-    if (sKey in oTarget) { return false; }
-    return oTarget.removeItem(sKey);
-  },
-  "enumerate": function (oTarget, sKey) {
-    return oTarget.keys();
-  },
-  "ownKeys": function (oTarget, sKey) {
-    return oTarget.keys();
-  },
-  "has": function (oTarget, sKey) {
-    return sKey in oTarget || oTarget.hasItem(sKey);
-  },
-  "defineProperty": function (oTarget, sKey, oDesc) {
-    if (oDesc &amp;&amp; "value" in oDesc) { oTarget.setItem(sKey, oDesc.value); }
-    return oTarget;
-  },
-  "getOwnPropertyDescriptor": function (oTarget, sKey) {
-    var vValue = oTarget.getItem(sKey);
-    return vValue ? {
-      "value": vValue,
-      "writable": true,
-      "enumerable": true,
-      "configurable": false
-    } : undefined;
-  },
-});
-
-/* Cookies test */
-
-console.log(docCookies.mon_cookie1 = "Première valeur");
-console.log(docCookies.getItem("mon_cookie1"));
-
-docCookies.setItem("mon_cookie1", "Valeur modifiée");
-console.log(docCookies.mon_cookie1);</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-proxy-objects', 'Proxy')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2016', '#sec-proxy-objects', 'Proxy')}}</td>
-   <td>{{Spec2('ES2016')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2017', '#sec-proxy-objects', 'Proxy')}}</td>
-   <td>{{Spec2('ES2017')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-proxy-objects', 'Proxy')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Proxy", 2)}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="https://www.youtube.com/watch?v=sClk6aB_CPk">“Proxies are awesome”, une présentation de Brendan Eich à JSConf</a> (en anglais) (<a href="https://www.slideshare.net/BrendanEich/metaprog-5303821">présentation</a>)</li>
- <li><a href="https://wiki.ecmascript.org/doku.php?id=harmony:proxies">La page pour la proposition ECMAScript Harmony sur Proxy</a> et <a href="https://wiki.ecmascript.org/doku.php?id=harmony:proxies_semantics">la page sur la sémantique des proxies ECMAScript Harmony</a></li>
- <li><a href="http://web.archive.org/web/20171007221059/http://soft.vub.ac.be/~tvcutsem/proxies/">Un tutoriel sur les proxies</a> (en anglais)</li>
- <li><a href="/fr/docs/JavaScript/Old_Proxy_API">L'ancienne API pour les Proxy SpiderMonkey</a></li>
- <li>{{jsxref("Object.watch()")}}, une fonctionnalité non-standard présente dans Gecko.</li>
-</ul>
-
-<h2 id="Notes_de_licence">Notes de licence</h2>
-
-<p>Certains composants de cette page (texte, exemples) ont été copiés ou adaptés du <a href="https://wiki.ecmascript.org/doku.php">Wiki ECMAScript</a> dont le contenu est sous licence <a href="https://creativecommons.org/licenses/by-nc-sa/2.0/">CC 2.0 BY-NC-SA</a>.</p>
diff --git a/files/fr/web/javascript/reference/global_objects/proxy/index.md b/files/fr/web/javascript/reference/global_objects/proxy/index.md
new file mode 100644
index 0000000000..b2cbf0db65
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/proxy/index.md
@@ -0,0 +1,384 @@
+---
+title: Proxy
+slug: Web/JavaScript/Reference/Global_Objects/Proxy
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Proxy
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Proxy
+original_slug: Web/JavaScript/Reference/Objets_globaux/Proxy
+---
+{{JSRef}}
+
+L'objet **Proxy** est utilisé afin de définir un comportement sur mesure pour certaines opérations fondamentales (par exemple, l'accès aux propriétés, les affectations, les énumérations, les appels de fonctions, etc.).
+
+## Terminologie
+
+- [gestionnaire](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Proxy/handler) (_handler_)
+  - : Un objet qui contient les trappes qui intercepteront les opérations.
+- trappes
+  - : Les méthodes qui fournissent l'accès aux propriétés. Ce concept est analogue aux [trappes](https://en.wikipedia.org/wiki/Trap_%28computing%29) utilisées dans les systèmes d'exploitations.
+- cible
+  - : L'objet virtualisé par le proxy. Il est souvent utilisé comme objet de stockage. Les invariants (c'est-à-dire les éléments de sémantique qui restent inchangés) relatifs à la non-extensibilité et au caractère non-configurable des propriétés sont vérifiés par rapport à la cible.
+
+## Syntaxe
+
+    var p = new Proxy(cible, gestionnaire);
+
+### Paramètres
+
+- `cible`
+  - : Une cible (qui peut être n'importe quel objet, un tableau, une fonction, ou même un autre proxy) qu'on souhaite envelopper dans un `Proxy`.
+- `gestionnaire`
+  - : Un objet dont les propriétés sont des fonctions qui définissent le comportement du proxy lorsqu'on utilise une opération sur celui-ci.
+
+## Méthodes
+
+- {{jsxref("Proxy.revocable()")}}
+  - : Permet de créer un objet `Proxy` révocable.
+
+## Méthodes pour le gestionnaire
+
+L'objet utilisé comme gestionnaire regroupe les différentes fonctions « trappes » pour le `Proxy`.
+
+{{page('/fr/docs/Web/JavaScript/Reference/Objets_globaux/Proxy/handler', 'Méthodes') }}
+
+## Exemples
+
+### Exemple simple
+
+Dans ce court exemple, on renvoie le nombre `37` comme valeur par défaut lorsque la propriété nommée n'est pas présente dans l'objet. Pour cela, on utilise le gestionnaire correspondant à {{jsxref("Objets_globaux/Proxy/handler/get","get")}}.
+
+```js
+var handler = {
+    get: function(obj, prop){
+        return prop in obj?
+            obj[prop] :
+            37;
+    }
+};
+
+var p = new Proxy({}, handler);
+p.a = 1;
+p.b = undefined;
+
+console.log(p.a, p.b); // 1, undefined
+console.log('c' in p, p.c); // false, 37
+```
+
+### Proxy « invisible »
+
+Dans cet exemple, le proxy transfère toutes les opérations qui sont appliquées à l'objet cible.
+
+```js
+var cible = {};
+var p = new Proxy(cible, {});
+
+p.a = 37; // L'opération est transmise à la cible par le proxy
+
+console.log(cible.a); // 37. L'opération a bien été transmise
+```
+
+### Validation
+
+En utilisant un `Proxy`, il devient simple de valider les valeurs passées à un objet. Dans cet exemple, on utilise le gestionnaire correspondant à {{jsxref("Objets_globaux/Proxy/handler/set","set")}}.
+
+```js
+let validateur = {
+  set: function(obj, prop, valeur) {
+    if (prop === 'âge') {
+      if (!Number.isInteger(valeur)) {
+        throw new TypeError('Cet âge n\'est pas un entier.');
+      }
+      if (valeur > 200) {
+        throw new RangeError('Cet âge semble invalide.');
+      }
+    }
+
+    // Le comportement par défaut : enregistrer la valeur
+    obj[prop] = valeur;
+
+    // On indique le succès de l'opération
+    return true;
+  }
+};
+
+let personne = new Proxy({}, validateur);
+
+personne.âge = 100;
+console.log(personne.âge); // 100
+personne.âge = 'jeune';    // lève une exception
+personne.âge = 300;        // lève une exception
+```
+
+### Étendre un constructeur
+
+En utilisant une fonction proxy, on peut étendre un constructeur avec un nouveau constructeur. Dans cet exemple, on utilise les gestionnaires correspondants à {{jsxref("Objets_globaux/Proxy/handler/construct","construct")}} et {{jsxref("Objets_globaux/Proxy/handler/apply","apply")}}.
+
+```js
+function étendre(sup,base) {
+  var descripteur = Object.getOwnPropertyDescriptor(
+    base.prototype, "constructor"
+  );
+  base.prototype = Object.create(sup.prototype);
+  var gestionnaire = {
+    construct: function(cible, args) {
+      var obj = Object.create(base.prototype);
+      this.apply(cible,obj,args);
+      return obj;
+    },
+    apply: function(cible, that, args) {
+      sup.apply(that,args);
+      base.apply(that,args);
+    }
+  };
+  var proxy = new Proxy(base,gestionnaire);
+  descripteur.value = proxy;
+  Object.defineProperty(base.prototype, "constructor", descripteur);
+  return proxy;
+}
+
+var Personne = function(nom){
+  this.nom = nom;
+};
+
+var Garçon = étendre(Personne, function(nom, âge) {
+  this.âge = âge;
+});
+
+Garçon.prototype.genre = "M";
+
+var Pierre = new Garçon("Pierre", 13);
+console.log(Pierre.genre);  // "M"
+console.log(Pierre.nom);  // "Pierre"
+console.log(Pierre.âge);  // 13
+```
+
+### Manipuler les nœuds DOM
+
+Parfois, on veut passer un attribut ou un nom de classe entre deux éléments différents. Dans cet exemple, on utilise le gestionnaire lié à {{jsxref("Objets_globaux/Proxy/handler/set","set")}}.
+
+```js
+let vue = new Proxy({
+  selected: null
+},
+{
+  set: function(obj, prop, nouvelleValeur) {
+    let ancienneValeur = obj[prop];
+
+    if (prop === 'selected') {
+      if (ancienneValeur) {
+        ancienneValeur.setAttribute('aria-selected', 'false');
+      }
+      if (nouvelleValeur) {
+        nouvelleValeur.setAttribute('aria-selected', 'true');
+      }
+    }
+
+    // Le comportement par défaut : enregistrer la valeur
+    obj[prop] = nouvelleValeur;
+
+    // On indique le succès de l'opération
+    return true;
+  }
+});
+
+let i1 = vue.selected = document.getElementById('item-1');
+console.log(i1.getAttribute('aria-selected')); // 'true'
+
+let i2 = vue.selected = document.getElementById('item-2');
+console.log(i1.getAttribute('aria-selected')); // 'false'
+console.log(i2.getAttribute('aria-selected')); // 'true'
+```
+
+### Corriger une valeur et ajouter une propriété supplémentaire
+
+Dans l'exemple qui suit, le proxy `produits` évalue la valeur passée et la convertit en tableau si besoin. L'objet supporte également la propriété supplémentaire `dernierNavigateur` à la fois comme accesseur et mutateur.
+
+```js
+let produits = new Proxy({
+  navigateurs: ['Internet Explorer', 'Netscape']
+},
+{
+  get: function(obj, prop) {
+    // Une propriété supplémentaire
+    if (prop === 'dernierNavigateur') {
+      return obj.navigateurs[obj.navigateurs.length - 1];
+    }
+
+    // Le comportement par défaut : renvoyer la valeur
+    return obj[prop];
+  },
+  set: function(obj, prop, valeur) {
+    // Une propriété supplémentaire
+    if (prop === 'dernierNavigateur') {
+      obj.navigateurs.push(valeur);
+      return true;
+    }
+
+    // on convertit la valeur si ce n'est pas un tableau
+    if (typeof valeur === 'string') {
+      valeur = [valeur];
+    }
+
+    // Le comportement par défaut : enregistrer la valeur
+    obj[prop] = valeur;
+
+    // On indique le succès de l'opération
+    return true;
+  }
+});
+
+console.log(produits.navigateurs); // ['Internet Explorer', 'Netscape']
+produits.navigateurs = 'Firefox'; // on passe une chaîne
+console.log(produits.navigateurs); // ['Firefox'] <- pas de problème, elle est convertie en tableau
+
+produits.dernierNavigateur = 'Chrome';
+console.log(produits.navigateurs); // ['Firefox', 'Chrome']
+console.log(produits.dernierNavigateur); // 'Chrome'
+```
+
+### Trouver un élément dans un tableau grâce à sa propriété
+
+Dans cet exemple, ce proxy étend le tableau avec des fonctionnalités supplémentaires. Ici, on définit des propriétés sans utiliser {{jsxref("Objets_globaux/Object/defineProperties","Object.defineProperties")}}. Cet exemple pourrait être adapté pour trouver la ligne d'un tableau à partir d'une de ces cellules (la cible serait alors [`table.rows`](/fr/docs/Web/API/HTMLTableElement.rows)).
+
+```js
+let produits = new Proxy([
+  { nom: 'Firefox', type: 'navigateur' },
+  { nom: 'SeaMonkey', type: 'navigateur' },
+  { nom: 'Thunderbird', type: 'client mail' }
+],
+{
+  get: function(obj, prop) {
+    // Le comportement par défaut : on renvoie la valeur
+    // prop est généralement un entier
+    if (prop in obj) {
+      return obj[prop];
+    }
+
+    // On obtient le nombre de produits
+    // un alias pour products.length
+    if (prop === 'nombre') {
+      return obj.length;
+    }
+
+    let résultat, types = {};
+
+    for (let produit of obj) {
+      if (produit.nom === prop) {
+        résultat = produit;
+      }
+      if (types[produit.type]) {
+        types[produit.type].push(produit);
+      } else {
+        types[produit.type] = [produit];
+      }
+    }
+
+    // Obtenir un produit grâce à un nom
+    if (résultat) {
+      return résultat;
+    }
+
+    // Obtenir un produit par type
+    if (prop in types) {
+      return types[prop];
+    }
+
+    // Obtenir les types de produits
+    if (prop === 'types') {
+      return Object.keys(types);
+    }
+
+    return undefined;
+  }
+});
+
+console.log(produits[0]); // { nom: 'Firefox', type: 'navigateur' }
+console.log(produits['Firefox']); // { nom: 'Firefox', type: 'navigateur' }
+console.log(produits['Chrome']); // undefined
+console.log(produits.navigateur); // [{ nom: 'Firefox', type: 'navigateur' }, { nom: 'SeaMonkey', type: 'navigateur' }]
+console.log(produits.types); // ['navigateur', 'client mail']
+console.log(produits.nombre); // 3
+```
+
+### Un exemple avec toutes les trappes
+
+Pour illustrer l'ensemble des trappes, on tente de « proxifier » un objet non natif : l'objet global `docCookies` créé grâce à [cet exemple](/fr/docs/Web/API/Document/cookie/Simple_document.cookie_framework).
+
+```js
+/*
+  var docCookies = ... définir l'objet "docCookies" grâce à
+  https://developer.mozilla.org/en-US/docs/DOM/document.cookie#A_little_framework.3A_a_complete_cookies_reader.2Fwriter_with_full_unicode_support
+*/
+
+var docCookies = new Proxy(docCookies, {
+  "get": function (oTarget, sKey) {
+    return oTarget[sKey] || oTarget.getItem(sKey) || undefined;
+  },
+  "set": function (oTarget, sKey, vValue) {
+    if (sKey in oTarget) { return false; }
+    return oTarget.setItem(sKey, vValue);
+  },
+  "deleteProperty": function (oTarget, sKey) {
+    if (sKey in oTarget) { return false; }
+    return oTarget.removeItem(sKey);
+  },
+  "enumerate": function (oTarget, sKey) {
+    return oTarget.keys();
+  },
+  "ownKeys": function (oTarget, sKey) {
+    return oTarget.keys();
+  },
+  "has": function (oTarget, sKey) {
+    return sKey in oTarget || oTarget.hasItem(sKey);
+  },
+  "defineProperty": function (oTarget, sKey, oDesc) {
+    if (oDesc && "value" in oDesc) { oTarget.setItem(sKey, oDesc.value); }
+    return oTarget;
+  },
+  "getOwnPropertyDescriptor": function (oTarget, sKey) {
+    var vValue = oTarget.getItem(sKey);
+    return vValue ? {
+      "value": vValue,
+      "writable": true,
+      "enumerable": true,
+      "configurable": false
+    } : undefined;
+  },
+});
+
+/* Cookies test */
+
+console.log(docCookies.mon_cookie1 = "Première valeur");
+console.log(docCookies.getItem("mon_cookie1"));
+
+docCookies.setItem("mon_cookie1", "Valeur modifiée");
+console.log(docCookies.mon_cookie1);
+```
+
+## Spécifications
+
+| Spécification                                                            | État                         | Commentaires         |
+| ------------------------------------------------------------------------ | ---------------------------- | -------------------- |
+| {{SpecName('ES2015', '#sec-proxy-objects', 'Proxy')}} | {{Spec2('ES2015')}}     | Définition initiale. |
+| {{SpecName('ES2016', '#sec-proxy-objects', 'Proxy')}} | {{Spec2('ES2016')}}     |                      |
+| {{SpecName('ES2017', '#sec-proxy-objects', 'Proxy')}} | {{Spec2('ES2017')}}     |                      |
+| {{SpecName('ESDraft', '#sec-proxy-objects', 'Proxy')}} | {{Spec2('ESDraft')}} |                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Proxy", 2)}}
+
+## Voir aussi
+
+- [“Proxies are awesome”, une présentation de Brendan Eich à JSConf](https://www.youtube.com/watch?v=sClk6aB_CPk) (en anglais) ([présentation](https://www.slideshare.net/BrendanEich/metaprog-5303821))
+- [La page pour la proposition ECMAScript Harmony sur Proxy](https://wiki.ecmascript.org/doku.php?id=harmony:proxies) et [la page sur la sémantique des proxies ECMAScript Harmony](https://wiki.ecmascript.org/doku.php?id=harmony:proxies_semantics)
+- [Un tutoriel sur les proxies](http://web.archive.org/web/20171007221059/http://soft.vub.ac.be/~tvcutsem/proxies/) (en anglais)
+- [L'ancienne API pour les Proxy SpiderMonkey](/fr/docs/JavaScript/Old_Proxy_API)
+- {{jsxref("Object.watch()")}}, une fonctionnalité non-standard présente dans Gecko.
+
+## Notes de licence
+
+Certains composants de cette page (texte, exemples) ont été copiés ou adaptés du [Wiki ECMAScript](https://wiki.ecmascript.org/doku.php) dont le contenu est sous licence [CC 2.0 BY-NC-SA](https://creativecommons.org/licenses/by-nc-sa/2.0/).
diff --git a/files/fr/web/javascript/reference/global_objects/proxy/proxy/apply/index.html b/files/fr/web/javascript/reference/global_objects/proxy/proxy/apply/index.html
deleted file mode 100644
index 55606feb4e..0000000000
--- a/files/fr/web/javascript/reference/global_objects/proxy/proxy/apply/index.html
+++ /dev/null
@@ -1,115 +0,0 @@
----
-title: handler.apply()
-slug: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/apply
-tags:
-  - ECMAScript 2015
-  - JavaScript
-  - Méthode
-  - Proxy
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/apply
-original_slug: Web/JavaScript/Reference/Objets_globaux/Proxy/handler/apply
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <strong><code>handler.apply()</code></strong> représente une trappe pour un appel de fonctions.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/proxyhandler-apply.html", "taller")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="brush: js">var p = new Proxy(cible, {
-  apply: function(cible, thisArg, listeArguments) {
-  }
-});
-</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<p>Les paramètres suivants sont passés à la méthode <code>apply</code>. Ici, <code>this</code> est lié au gestionnaire.</p>
-
-<dl>
- <dt><code>cible</code></dt>
- <dd>L'objet cible.</dd>
- <dt><code>thisArg</code></dt>
- <dd>L'argument {{jsxref("Opérateurs/L_opérateur_this","this")}} pour cet appel.</dd>
- <dt><code>listeArguments</code></dt>
- <dd>La liste d'arguments pour l'appel.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>La méthode <code>apply</code> peut renvoyer n'importe quelle valeur.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>La méthode <code><strong>handler.apply</strong></code> est une trappe pour l'appel à une fonction.</p>
-
-<h3 id="Interceptions">Interceptions</h3>
-
-<p>Cette trappe intercepte les opérations suivantes :</p>
-
-<ul>
- <li><code>proxy(...args)</code></li>
- <li>{{jsxref("Function.prototype.apply()")}} et {{jsxref("Function.prototype.call()")}}</li>
- <li>{{jsxref("Reflect.apply()")}}</li>
-</ul>
-
-<h3 id="Invariants">Invariants</h3>
-
-<p>Si les invariants suivants ne sont pas respectés, le proxy lèvera une exception <code>TypeError</code> :</p>
-
-<ul>
- <li>la cible doit pouvoir être « appelable ». Autrement dit, il doit s'agir d'une fonction.</li>
-</ul>
-
-<h2 id="Exemples">Exemples</h2>
-
-<p>Dans l'exemple ci-dessous, on piège un appel de fonction.</p>
-
-<pre class="brush: js">var p = new Proxy(function() {}, {
-  apply: function(target, thisArg, argumentsList) {
-    console.log("called: " + argumentsList.join(", "));
-    return argumentsList[0] + argumentsList[1] + argumentsList[2];
-  }
-});
-
-console.log(p(1, 2, 3)); // "called: 1, 2, 3"
-                         // 6
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-proxy-object-internal-methods-and-internal-slots-call-thisargument-argumentslist', '[[Call]]')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-proxy-object-internal-methods-and-internal-slots-call-thisargument-argumentslist', '[[Call]]')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Proxy.handler.apply")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Proxy")}}</li>
- <li>{{jsxref("Proxy.handler", "handler")}}</li>
- <li>{{jsxref("Function.prototype.apply")}}</li>
- <li>{{jsxref("Function.prototype.call")}}</li>
- <li>{{jsxref("Reflect.apply()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/proxy/proxy/apply/index.md b/files/fr/web/javascript/reference/global_objects/proxy/proxy/apply/index.md
new file mode 100644
index 0000000000..804405fffd
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/proxy/proxy/apply/index.md
@@ -0,0 +1,94 @@
+---
+title: handler.apply()
+slug: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/apply
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Méthode
+  - Proxy
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/apply
+original_slug: Web/JavaScript/Reference/Objets_globaux/Proxy/handler/apply
+---
+{{JSRef}}
+
+La méthode **`handler.apply()`** représente une trappe pour un appel de fonctions.
+
+{{EmbedInteractiveExample("pages/js/proxyhandler-apply.html", "taller")}}
+
+## Syntaxe
+
+```js
+var p = new Proxy(cible, {
+  apply: function(cible, thisArg, listeArguments) {
+  }
+});
+```
+
+### Paramètres
+
+Les paramètres suivants sont passés à la méthode `apply`. Ici, `this` est lié au gestionnaire.
+
+- `cible`
+  - : L'objet cible.
+- `thisArg`
+  - : L'argument {{jsxref("Opérateurs/L_opérateur_this","this")}} pour cet appel.
+- `listeArguments`
+  - : La liste d'arguments pour l'appel.
+
+### Valeur de retour
+
+La méthode `apply` peut renvoyer n'importe quelle valeur.
+
+## Description
+
+La méthode **`handler.apply`** est une trappe pour l'appel à une fonction.
+
+### Interceptions
+
+Cette trappe intercepte les opérations suivantes :
+
+- `proxy(...args)`
+- {{jsxref("Function.prototype.apply()")}} et {{jsxref("Function.prototype.call()")}}
+- {{jsxref("Reflect.apply()")}}
+
+### Invariants
+
+Si les invariants suivants ne sont pas respectés, le proxy lèvera une exception `TypeError` :
+
+- la cible doit pouvoir être « appelable ». Autrement dit, il doit s'agir d'une fonction.
+
+## Exemples
+
+Dans l'exemple ci-dessous, on piège un appel de fonction.
+
+```js
+var p = new Proxy(function() {}, {
+  apply: function(target, thisArg, argumentsList) {
+    console.log("called: " + argumentsList.join(", "));
+    return argumentsList[0] + argumentsList[1] + argumentsList[2];
+  }
+});
+
+console.log(p(1, 2, 3)); // "called: 1, 2, 3"
+                         // 6
+```
+
+## Spécifications
+
+| Spécification                                                                                                                                                        | État                         | Commentaires         |
+| -------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName('ES2015', '#sec-proxy-object-internal-methods-and-internal-slots-call-thisargument-argumentslist', '[[Call]]')}} | {{Spec2('ES2015')}}     | Définition initiale. |
+| {{SpecName('ESDraft', '#sec-proxy-object-internal-methods-and-internal-slots-call-thisargument-argumentslist', '[[Call]]')}} | {{Spec2('ESDraft')}} |                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Proxy.handler.apply")}}
+
+## Voir aussi
+
+- {{jsxref("Proxy")}}
+- {{jsxref("Proxy.handler", "handler")}}
+- {{jsxref("Function.prototype.apply")}}
+- {{jsxref("Function.prototype.call")}}
+- {{jsxref("Reflect.apply()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/proxy/proxy/construct/index.html b/files/fr/web/javascript/reference/global_objects/proxy/proxy/construct/index.html
deleted file mode 100644
index dcb569142e..0000000000
--- a/files/fr/web/javascript/reference/global_objects/proxy/proxy/construct/index.html
+++ /dev/null
@@ -1,134 +0,0 @@
----
-title: handler.construct()
-slug: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/construct
-tags:
-  - ECMAScript 2015
-  - JavaScript
-  - Méthode
-  - Proxy
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/construct
-original_slug: Web/JavaScript/Reference/Objets_globaux/Proxy/handler/construct
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <code><strong>handler.construct()</strong></code> est une trappe pour l'opérateur {{jsxref("Opérateurs/L_opérateur_new", "new")}}. Afin que l'opération <code>new</code> puisse être valide sur le proxy correspondant, la cible utilisée doit avoir une méthode interne <code>[[Construct]]</code> (autrement dit, l'instruction <code>new cible</code> doit être valide).</p>
-
-<div>{{EmbedInteractiveExample("pages/js/proxyhandler-construct.html", "taller")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="brush: js">var p = new Proxy(cible, {
-  construct: function(cible, listeArguments, newTarget) {
-  }
-});
-</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<p>Les paramètres suivants sont passés à la méthode <code>construct</code>.  <code>this</code> est ici lié au gestionnaire (<em>handler</em>).</p>
-
-<dl>
- <dt><code>cible</code></dt>
- <dd>L'objet cible.</dd>
- <dt><code>listeArguments</code></dt>
- <dd>La liste des arguments passés au constructeur.</dd>
- <dt><code>newTarget</code></dt>
- <dd>Le constructeur originellement appelé.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>La méthode <code>construct</code> doit renvoyer un objet.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>La méthode <code><strong>handler.construct()</strong></code> est une trappe pour l'opérateur {{jsxref("Opérateurs/L_opérateur_new", "new")}}.</p>
-
-<h3 id="Interceptions">Interceptions</h3>
-
-<p>Ce trappe intercepte les opérations suivantes :</p>
-
-<ul>
- <li><code>new proxy(...args)</code></li>
- <li>{{jsxref("Reflect.construct()")}}</li>
-</ul>
-
-<h3 id="Invariants">Invariants</h3>
-
-<p>Si les invariants suivants ne sont pas respectés, le proxy renverra une exception {{jsxref("TypeError")}} :</p>
-
-<ul>
- <li>Le résultat doit être un <code>Object</code>.</li>
-</ul>
-
-<h2 id="Exemples">Exemples</h2>
-
-<p>Dans l'exemple qui suit, on piège l'opérateur {{jsxref("Opérateurs/L_opérateur_new", "new")}}.</p>
-
-<pre class="brush: js">var p = new Proxy(function() {}, {
-  construct: function(target, argumentsList) {
-    console.log("called: " + argumentsList.join(", "));
-    return { value: argumentsList[0] * 10 };
-  }
-});
-
-console.log(new p(1).value); // "appel sur : 1"
-                             // 10
-</pre>
-
-<p>Dans cette version, on ne respecte pas la contrainte d'invariance :</p>
-
-<pre class="brush: js">var p = new Proxy(function() {}, {
-  construct: function(target, argumentsList) {
-    return 1;
-  }
-});
-
-new p(); // Une exception TypeError est levée
-</pre>
-
-<p>Dans le code qui suit, le proxy n'est pas correctement initialisé. La cible du proxy doit être un constructeur valide qui puisse être utilisé avec <code>new</code>.</p>
-
-<pre class="brush: js">var p = new Proxy({}, {
-  construct: function(target, argumentsList, newTarget){
-    return {};
-  }
-});
-
-new p(); // TypeError: p is not a constructor</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-proxy-object-internal-methods-and-internal-slots-construct-argumentslist-newtarget', '[[Construct]]')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-proxy-object-internal-methods-and-internal-slots-construct-argumentslist-newtarget', '[[Construct]]')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Proxy.handler.construct")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Proxy")}}</li>
- <li>{{jsxref("Proxy.handler", "handler")}}</li>
- <li>L'opérateur {{jsxref("Opérateurs/L_opérateur_new", "new")}}</li>
- <li>{{jsxref("Reflect.construct()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/proxy/proxy/construct/index.md b/files/fr/web/javascript/reference/global_objects/proxy/proxy/construct/index.md
new file mode 100644
index 0000000000..289518a7e9
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/proxy/proxy/construct/index.md
@@ -0,0 +1,116 @@
+---
+title: handler.construct()
+slug: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/construct
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Méthode
+  - Proxy
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/construct
+original_slug: Web/JavaScript/Reference/Objets_globaux/Proxy/handler/construct
+---
+{{JSRef}}
+
+La méthode **`handler.construct()`** est une trappe pour l'opérateur {{jsxref("Opérateurs/L_opérateur_new", "new")}}. Afin que l'opération `new` puisse être valide sur le proxy correspondant, la cible utilisée doit avoir une méthode interne `[[Construct]]` (autrement dit, l'instruction `new cible` doit être valide).
+
+{{EmbedInteractiveExample("pages/js/proxyhandler-construct.html", "taller")}}
+
+## Syntaxe
+
+```js
+var p = new Proxy(cible, {
+  construct: function(cible, listeArguments, newTarget) {
+  }
+});
+```
+
+### Paramètres
+
+Les paramètres suivants sont passés à la méthode `construct`.  `this` est ici lié au gestionnaire (_handler_).
+
+- `cible`
+  - : L'objet cible.
+- `listeArguments`
+  - : La liste des arguments passés au constructeur.
+- `newTarget`
+  - : Le constructeur originellement appelé.
+
+### Valeur de retour
+
+La méthode `construct` doit renvoyer un objet.
+
+## Description
+
+La méthode **`handler.construct()`** est une trappe pour l'opérateur {{jsxref("Opérateurs/L_opérateur_new", "new")}}.
+
+### Interceptions
+
+Ce trappe intercepte les opérations suivantes :
+
+- `new proxy(...args)`
+- {{jsxref("Reflect.construct()")}}
+
+### Invariants
+
+Si les invariants suivants ne sont pas respectés, le proxy renverra une exception {{jsxref("TypeError")}} :
+
+- Le résultat doit être un `Object`.
+
+## Exemples
+
+Dans l'exemple qui suit, on piège l'opérateur {{jsxref("Opérateurs/L_opérateur_new", "new")}}.
+
+```js
+var p = new Proxy(function() {}, {
+  construct: function(target, argumentsList) {
+    console.log("called: " + argumentsList.join(", "));
+    return { value: argumentsList[0] * 10 };
+  }
+});
+
+console.log(new p(1).value); // "appel sur : 1"
+                             // 10
+```
+
+Dans cette version, on ne respecte pas la contrainte d'invariance :
+
+```js
+var p = new Proxy(function() {}, {
+  construct: function(target, argumentsList) {
+    return 1;
+  }
+});
+
+new p(); // Une exception TypeError est levée
+```
+
+Dans le code qui suit, le proxy n'est pas correctement initialisé. La cible du proxy doit être un constructeur valide qui puisse être utilisé avec `new`.
+
+```js
+var p = new Proxy({}, {
+  construct: function(target, argumentsList, newTarget){
+    return {};
+  }
+});
+
+new p(); // TypeError: p is not a constructor
+```
+
+## Spécifications
+
+| Spécification                                                                                                                                                                    | État                         | Commentaires         |
+| -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName('ES2015', '#sec-proxy-object-internal-methods-and-internal-slots-construct-argumentslist-newtarget', '[[Construct]]')}}     | {{Spec2('ES2015')}}     | Définition initiale. |
+| {{SpecName('ESDraft', '#sec-proxy-object-internal-methods-and-internal-slots-construct-argumentslist-newtarget', '[[Construct]]')}} | {{Spec2('ESDraft')}} |                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Proxy.handler.construct")}}
+
+## Voir aussi
+
+- {{jsxref("Proxy")}}
+- {{jsxref("Proxy.handler", "handler")}}
+- L'opérateur {{jsxref("Opérateurs/L_opérateur_new", "new")}}
+- {{jsxref("Reflect.construct()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/proxy/proxy/defineproperty/index.html b/files/fr/web/javascript/reference/global_objects/proxy/proxy/defineproperty/index.html
deleted file mode 100644
index f5bdab1aa2..0000000000
--- a/files/fr/web/javascript/reference/global_objects/proxy/proxy/defineproperty/index.html
+++ /dev/null
@@ -1,141 +0,0 @@
----
-title: handler.defineProperty()
-slug: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/defineProperty
-tags:
-  - ECMAScript 2015
-  - JavaScript
-  - Méthode
-  - Proxy
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/defineProperty
-original_slug: Web/JavaScript/Reference/Objets_globaux/Proxy/handler/defineProperty
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <strong><code>handler.defineProperty()</code></strong> est une trappe pour {{jsxref("Object.defineProperty()")}}.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/proxyhandler-defineproperty.html", "taller")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="brush: js">var p = new Proxy(cible, {
-  defineProperty: function(cible, propriété, descripteur) {
-  }
-});
-</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<p>Les paramètres suivants sont passés à la méthode <code>defineProperty</code>. <code>this</code> est ici lié au gestionnaire.</p>
-
-<dl>
- <dt><code>cible</code></dt>
- <dd>L'objet cible.</dd>
- <dt><code>propriété</code></dt>
- <dd>Le nom ou le symbole ({{jsxref("Symbol")}}) de la propriété dont on veut modifier la description.</dd>
- <dt><code>descripteur</code></dt>
- <dd>Le descripteur de la propriété qui est à modifier ou à définir.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>La méthode <code>defineProperty()</code> doit renvoyer un booléen qui indique si la propriété a correctement été définie sur la cible.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>La méthode <code><strong>handler.defineProperty()</strong></code> est une trappe pour {{jsxref("Object.defineProperty()")}}.</p>
-
-<h3 id="Interceptions">Interceptions</h3>
-
-<p>Cette trappe intercepte les opérations suivantes :</p>
-
-<ul>
- <li>{{jsxref("Object.defineProperty()")}}</li>
- <li>{{jsxref("Reflect.defineProperty()")}}</li>
-</ul>
-
-<h3 id="Invariants">Invariants</h3>
-
-<p>Si les contraintes d'invariances suivantes ne sont pas respectées, le proxy renverra une exception {{jsxref("TypeError")}} :</p>
-
-<ul>
- <li>Une propriété ne peut pas être ajoutée si l'objet cible n'est pas extensible.</li>
- <li>Une propriété ne peut pas être ajoutée ou modifiée pour être rendue non-configurable si elle n'existe pas comme une propriété propre non-configurable de l'objet cible.</li>
- <li>Une propriété ne peut pas être non-configurable s'il existe une propriété correspondante de l'objet cible qui est configurable.</li>
- <li>Si une propriété correspondante existe pour l'objet cible <code>Object.defineProperty(cible, propriété, descripteur)</code> ne lèvera pas d'exception.</li>
- <li>En mode stricte, si le gestionnaire defineProperty renvoie une valeur fausse (dans un contexte booléen), cela entraînera une exception {{jsxref("TypeError")}}.</li>
-</ul>
-
-<h2 id="Exemples">Exemples</h2>
-
-<p>Dans le code suivant, on piège l'appel à {{jsxref("Object.defineProperty()")}}.</p>
-
-<pre class="brush: js">var p = new Proxy({}, {
-  defineProperty: function(target, prop, descriptor) {
-    console.log("appelé avec : " + prop);
-  }
-});
-
-var desc = { configurable: true, enumerable: true, value: 10 };
-Object.defineProperty(p, "a", desc); // "appelé avec : a"
-</pre>
-
-<p>Lorsqu'on appelle {{jsxref("Object.defineProperty()")}} ou {{jsxref("Reflect.defineProperty()")}}, le descripteur passé à la trappe <code>defineProperty</code> doit respecter une contrainte : seules les propriétés suivants sont utilisables, les propriétés non-standards seront ignorées :</p>
-
-<ul>
- <li><code>enumerable</code></li>
- <li><code>configurable</code></li>
- <li><code>writable</code></li>
- <li><code>value</code></li>
- <li><code>get</code></li>
- <li><code>set</code></li>
-</ul>
-
-<pre class="brush: js">var p = new Proxy({}, {
-  defineProperty(target, prop, descriptor) {
-    console.log(descriptor);
-    return Reflect.defineProperty(target, prop, descriptor);
-  }
-});
-
-Object.defineProperty(p, "name, {
-  value: "proxy",
-  type: "custom"
-});
-// { value: "proxy" }
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-proxy-object-internal-methods-and-internal-slots-defineownproperty-p-desc', '[[DefineOwnProperty]]')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-proxy-object-internal-methods-and-internal-slots-defineownproperty-p-desc', '[[DefineOwnProperty]]')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Proxy.handler.defineProperty")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Proxy")}}</li>
- <li>{{jsxref("Proxy.handler", "handler")}}</li>
- <li>{{jsxref("Object.defineProperty()")}}</li>
- <li>{{jsxref("Reflect.defineProperty()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/proxy/proxy/defineproperty/index.md b/files/fr/web/javascript/reference/global_objects/proxy/proxy/defineproperty/index.md
new file mode 100644
index 0000000000..969b386662
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/proxy/proxy/defineproperty/index.md
@@ -0,0 +1,119 @@
+---
+title: handler.defineProperty()
+slug: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/defineProperty
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Méthode
+  - Proxy
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/defineProperty
+original_slug: Web/JavaScript/Reference/Objets_globaux/Proxy/handler/defineProperty
+---
+{{JSRef}}
+
+La méthode **`handler.defineProperty()`** est une trappe pour {{jsxref("Object.defineProperty()")}}.
+
+{{EmbedInteractiveExample("pages/js/proxyhandler-defineproperty.html", "taller")}}
+
+## Syntaxe
+
+```js
+var p = new Proxy(cible, {
+  defineProperty: function(cible, propriété, descripteur) {
+  }
+});
+```
+
+### Paramètres
+
+Les paramètres suivants sont passés à la méthode `defineProperty`. `this` est ici lié au gestionnaire.
+
+- `cible`
+  - : L'objet cible.
+- `propriété`
+  - : Le nom ou le symbole ({{jsxref("Symbol")}}) de la propriété dont on veut modifier la description.
+- `descripteur`
+  - : Le descripteur de la propriété qui est à modifier ou à définir.
+
+### Valeur de retour
+
+La méthode `defineProperty()` doit renvoyer un booléen qui indique si la propriété a correctement été définie sur la cible.
+
+## Description
+
+La méthode **`handler.defineProperty()`** est une trappe pour {{jsxref("Object.defineProperty()")}}.
+
+### Interceptions
+
+Cette trappe intercepte les opérations suivantes :
+
+- {{jsxref("Object.defineProperty()")}}
+- {{jsxref("Reflect.defineProperty()")}}
+
+### Invariants
+
+Si les contraintes d'invariances suivantes ne sont pas respectées, le proxy renverra une exception {{jsxref("TypeError")}} :
+
+- Une propriété ne peut pas être ajoutée si l'objet cible n'est pas extensible.
+- Une propriété ne peut pas être ajoutée ou modifiée pour être rendue non-configurable si elle n'existe pas comme une propriété propre non-configurable de l'objet cible.
+- Une propriété ne peut pas être non-configurable s'il existe une propriété correspondante de l'objet cible qui est configurable.
+- Si une propriété correspondante existe pour l'objet cible `Object.defineProperty(cible, propriété, descripteur)` ne lèvera pas d'exception.
+- En mode stricte, si le gestionnaire defineProperty renvoie une valeur fausse (dans un contexte booléen), cela entraînera une exception {{jsxref("TypeError")}}.
+
+## Exemples
+
+Dans le code suivant, on piège l'appel à {{jsxref("Object.defineProperty()")}}.
+
+```js
+var p = new Proxy({}, {
+  defineProperty: function(target, prop, descriptor) {
+    console.log("appelé avec : " + prop);
+  }
+});
+
+var desc = { configurable: true, enumerable: true, value: 10 };
+Object.defineProperty(p, "a", desc); // "appelé avec : a"
+```
+
+Lorsqu'on appelle {{jsxref("Object.defineProperty()")}} ou {{jsxref("Reflect.defineProperty()")}}, le descripteur passé à la trappe `defineProperty` doit respecter une contrainte : seules les propriétés suivants sont utilisables, les propriétés non-standards seront ignorées :
+
+- `enumerable`
+- `configurable`
+- `writable`
+- `value`
+- `get`
+- `set`
+
+```js
+var p = new Proxy({}, {
+  defineProperty(target, prop, descriptor) {
+    console.log(descriptor);
+    return Reflect.defineProperty(target, prop, descriptor);
+  }
+});
+
+Object.defineProperty(p, "name, {
+  value: "proxy",
+  type: "custom"
+});
+// { value: "proxy" }
+```
+
+## Spécifications
+
+| Spécification                                                                                                                                                                | État                         | Commentaires         |
+| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName('ES2015', '#sec-proxy-object-internal-methods-and-internal-slots-defineownproperty-p-desc', '[[DefineOwnProperty]]')}} | {{Spec2('ES2015')}}     | Définition initiale. |
+| {{SpecName('ESDraft', '#sec-proxy-object-internal-methods-and-internal-slots-defineownproperty-p-desc', '[[DefineOwnProperty]]')}} | {{Spec2('ESDraft')}} |                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Proxy.handler.defineProperty")}}
+
+## Voir aussi
+
+- {{jsxref("Proxy")}}
+- {{jsxref("Proxy.handler", "handler")}}
+- {{jsxref("Object.defineProperty()")}}
+- {{jsxref("Reflect.defineProperty()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/proxy/proxy/deleteproperty/index.html b/files/fr/web/javascript/reference/global_objects/proxy/proxy/deleteproperty/index.html
deleted file mode 100644
index 517b27ca31..0000000000
--- a/files/fr/web/javascript/reference/global_objects/proxy/proxy/deleteproperty/index.html
+++ /dev/null
@@ -1,110 +0,0 @@
----
-title: handler.deleteProperty()
-slug: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/deleteProperty
-tags:
-  - ECMAScript 2015
-  - JavaScript
-  - Méthode
-  - Proxy
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/deleteProperty
-original_slug: Web/JavaScript/Reference/Objets_globaux/Proxy/handler/deleteProperty
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <strong><code>handler.deleteProperty()</code></strong> est une trappe pour l'opérateur {{jsxref("Opérateurs/L_opérateur_delete", "delete")}}.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/proxyhandler-deleteproperty.html","taller")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="brush: js">var p = new Proxy(cible, {
-  deleteProperty: function(cible, propriété) {
-  }
-});
-</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<p>Les paramètres suivants sont passés à la méthode <code>deleteProperty</code>. <code>this</code> est lié au gestionnaire.</p>
-
-<dl>
- <dt><code>cible</code></dt>
- <dd>L'objet cible.</dd>
- <dt><code>propriété</code></dt>
- <dd>Le nom ou le symbole ({{jsxref("Symbol")}}) de la propriété à supprimer.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>La méthode <code>deleteProperty()</code> doit renvoyer un booléen qui indique si oui ou non la propriété a été supprimée.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>La méthode <code><strong>handler.deleteProperty()</strong></code> est une trappe permettant d'intercepter les opérations de l'opérateur {{jsxref("Opérateurs/L_opérateur_delete", "delete")}}.</p>
-
-<h3 id="Interceptions">Interceptions</h3>
-
-<p>Cette trappe peut intercepter les opérations suivantes :</p>
-
-<ul>
- <li>La suppression d'une propriété : <code>delete proxy[toto]</code> et <code>delete proxy.toto</code></li>
- <li>{{jsxref("Reflect.deleteProperty()")}}</li>
-</ul>
-
-<h3 id="Invariants">Invariants</h3>
-
-<p>Si les invarians suivants ne sont pas respectés, le proxy renverra une exception {{jsxref("TypeError")}} :</p>
-
-<ul>
- <li>Une propriété ne peut pas être supprimée s'il existe une propriété correspondante sur l'objet cible qui est une propriété propre et non-configurable.</li>
-</ul>
-
-<h2 id="Exemples">Exemples</h2>
-
-<p>Dans l'exemple qui suit, on intercepte les opérations de {{jsxref("Opérateurs/L_opérateur_delete", "delete")}}.</p>
-
-<pre class="brush: js">var p = new Proxy({}, {
-  deleteProperty: function(cible, prop) {
-    console.log("appelée sur : " + prop);
-    return true;
-  }
-});
-
-delete p.a; // "appelée sur : a"
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-proxy-object-internal-methods-and-internal-slots-delete-p', '[[Delete]]')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-proxy-object-internal-methods-and-internal-slots-delete-p', '[[Delete]]')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Proxy.handler.deleteProperty")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Proxy")}}</li>
- <li>{{jsxref("Proxy.handler", "handler")}}</li>
- <li>L'opérateur {{jsxref("Opérateurs/L_opérateur_delete", "delete")}}</li>
- <li>{{jsxref("Reflect.deleteProperty()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/proxy/proxy/deleteproperty/index.md b/files/fr/web/javascript/reference/global_objects/proxy/proxy/deleteproperty/index.md
new file mode 100644
index 0000000000..8cc45e09bb
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/proxy/proxy/deleteproperty/index.md
@@ -0,0 +1,89 @@
+---
+title: handler.deleteProperty()
+slug: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/deleteProperty
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Méthode
+  - Proxy
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/deleteProperty
+original_slug: Web/JavaScript/Reference/Objets_globaux/Proxy/handler/deleteProperty
+---
+{{JSRef}}
+
+La méthode **`handler.deleteProperty()`** est une trappe pour l'opérateur {{jsxref("Opérateurs/L_opérateur_delete", "delete")}}.
+
+{{EmbedInteractiveExample("pages/js/proxyhandler-deleteproperty.html","taller")}}
+
+## Syntaxe
+
+```js
+var p = new Proxy(cible, {
+  deleteProperty: function(cible, propriété) {
+  }
+});
+```
+
+### Paramètres
+
+Les paramètres suivants sont passés à la méthode `deleteProperty`. `this` est lié au gestionnaire.
+
+- `cible`
+  - : L'objet cible.
+- `propriété`
+  - : Le nom ou le symbole ({{jsxref("Symbol")}}) de la propriété à supprimer.
+
+### Valeur de retour
+
+La méthode `deleteProperty()` doit renvoyer un booléen qui indique si oui ou non la propriété a été supprimée.
+
+## Description
+
+La méthode **`handler.deleteProperty()`** est une trappe permettant d'intercepter les opérations de l'opérateur {{jsxref("Opérateurs/L_opérateur_delete", "delete")}}.
+
+### Interceptions
+
+Cette trappe peut intercepter les opérations suivantes :
+
+- La suppression d'une propriété : `delete proxy[toto]` et `delete proxy.toto`
+- {{jsxref("Reflect.deleteProperty()")}}
+
+### Invariants
+
+Si les invarians suivants ne sont pas respectés, le proxy renverra une exception {{jsxref("TypeError")}} :
+
+- Une propriété ne peut pas être supprimée s'il existe une propriété correspondante sur l'objet cible qui est une propriété propre et non-configurable.
+
+## Exemples
+
+Dans l'exemple qui suit, on intercepte les opérations de {{jsxref("Opérateurs/L_opérateur_delete", "delete")}}.
+
+```js
+var p = new Proxy({}, {
+  deleteProperty: function(cible, prop) {
+    console.log("appelée sur : " + prop);
+    return true;
+  }
+});
+
+delete p.a; // "appelée sur : a"
+```
+
+## Spécifications
+
+| Spécification                                                                                                                            | État                         | Commentaires         |
+| ---------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName('ES2015', '#sec-proxy-object-internal-methods-and-internal-slots-delete-p', '[[Delete]]')}} | {{Spec2('ES2015')}}     | Définition initiale. |
+| {{SpecName('ESDraft', '#sec-proxy-object-internal-methods-and-internal-slots-delete-p', '[[Delete]]')}} | {{Spec2('ESDraft')}} |                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Proxy.handler.deleteProperty")}}
+
+## Voir aussi
+
+- {{jsxref("Proxy")}}
+- {{jsxref("Proxy.handler", "handler")}}
+- L'opérateur {{jsxref("Opérateurs/L_opérateur_delete", "delete")}}
+- {{jsxref("Reflect.deleteProperty()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/proxy/proxy/get/index.html b/files/fr/web/javascript/reference/global_objects/proxy/proxy/get/index.html
deleted file mode 100644
index e8c3fa93d2..0000000000
--- a/files/fr/web/javascript/reference/global_objects/proxy/proxy/get/index.html
+++ /dev/null
@@ -1,133 +0,0 @@
----
-title: handler.get()
-slug: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/get
-tags:
-  - ECMAScript 2015
-  - JavaScript
-  - Méthode
-  - Proxy
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/get
-original_slug: Web/JavaScript/Reference/Objets_globaux/Proxy/handler/get
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <strong><code>handler.get()</code></strong> est une trappe pour intercepter l'accès à la valeur d'une propriété.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/proxyhandler-get.html", "taller")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="brush: js">var p = new Proxy(cible, {
-  get: function(cible, propriété, récepteur) {
-  }
-});
-</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<p>Les paramètres suivants sont passés à la méthode <code>get</code>. <code>this</code> est lié au gestionnaire.</p>
-
-<dl>
- <dt><code>cible</code></dt>
- <dd>L'objet cible.</dd>
- <dt><code>propriété</code></dt>
- <dd>Le nom ou le symbole ({{jsxref("Symbol")}}) de la propriété qu'on souhaite obtenir.</dd>
- <dt><code>récepteur</code></dt>
- <dd>Le proxy ou un objet qui hérite du proxy.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>La méthode <code>get</code> peut renvoyer n'importe quelle valeur.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>La méthode <code><strong>handler.get</strong></code> est une trappe pour intercepter l'accès à une propriété.</p>
-
-<h3 id="Interceptions">Interceptions</h3>
-
-<p>Cette trappe permet d'intercepter les opérations suivantes :</p>
-
-<ul>
- <li>l'accès à une propriété : <code>proxy[toto]</code> et <code>proxy.truc</code></li>
- <li>L'accès aux propriétés héritées : <code>Object.create(proxy)[toto]</code></li>
- <li>{{jsxref("Reflect.get()")}}</li>
-</ul>
-
-<h3 id="Invariants">Invariants</h3>
-
-<p>Si les invariants suivants ne sont pas respectés, le proxy renverra une exception {{jsxref("TypeError")}} :</p>
-
-<ul>
- <li>La valeur renvoyée pour la propriété doit être la même que la valeur de la propriété correspondante de l'objet cible si celle-ci est non-configurable et non accessible en lecture.</li>
- <li>La valeur renvoyée doit valoir <code>undefined</code> si la propriété correspondante de l'objet cible est une propriété d'accesseur non-configurable dont l'attribut [[Get]] vaut <code>undefined</code>.</li>
-</ul>
-
-<h2 id="Exemples">Exemples</h2>
-
-<p>Dans l'exemple suivant, on intercepte les accès aux propriétés :</p>
-
-<pre class="brush: js">var p = new Proxy({}, {
-  get: function(cible, propriété, récepteur) {
-    console.log("appelée : " + propriété);
-    return 10;
-  }
-});
-
-console.log(p.a); // "appelée : a"
-                  // 10
-</pre>
-
-<p>Le code suivant ne respecte pas l'invariant :</p>
-
-<pre class="brush: js">var obj = {};
-Object.defineProperty(obj, "a", {
-  configurable: false,
-  enumerable: false,
-  value: 10,
-  writable: false
-});
-
-var p = new Proxy(obj, {
-  get: function(cible, propriété) {
-    return 20;
-  }
-});
-
-p.a; // exception TypeError levée
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-proxy-object-internal-methods-and-internal-slots-get-p-receiver', '[[Get]]')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-proxy-object-internal-methods-and-internal-slots-get-p-receiver', '[[Get]]')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatiblité_des_navigateurs">Compatiblité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Proxy.handler.get")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Proxy")}}</li>
- <li>{{jsxref("Proxy.handler", "handler")}}</li>
- <li>{{jsxref("Reflect.get()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/proxy/proxy/get/index.md b/files/fr/web/javascript/reference/global_objects/proxy/proxy/get/index.md
new file mode 100644
index 0000000000..db316e304d
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/proxy/proxy/get/index.md
@@ -0,0 +1,113 @@
+---
+title: handler.get()
+slug: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/get
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Méthode
+  - Proxy
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/get
+original_slug: Web/JavaScript/Reference/Objets_globaux/Proxy/handler/get
+---
+{{JSRef}}
+
+La méthode **`handler.get()`** est une trappe pour intercepter l'accès à la valeur d'une propriété.
+
+{{EmbedInteractiveExample("pages/js/proxyhandler-get.html", "taller")}}
+
+## Syntaxe
+
+```js
+var p = new Proxy(cible, {
+  get: function(cible, propriété, récepteur) {
+  }
+});
+```
+
+### Paramètres
+
+Les paramètres suivants sont passés à la méthode `get`. `this` est lié au gestionnaire.
+
+- `cible`
+  - : L'objet cible.
+- `propriété`
+  - : Le nom ou le symbole ({{jsxref("Symbol")}}) de la propriété qu'on souhaite obtenir.
+- `récepteur`
+  - : Le proxy ou un objet qui hérite du proxy.
+
+### Valeur de retour
+
+La méthode `get` peut renvoyer n'importe quelle valeur.
+
+## Description
+
+La méthode **`handler.get`** est une trappe pour intercepter l'accès à une propriété.
+
+### Interceptions
+
+Cette trappe permet d'intercepter les opérations suivantes :
+
+- l'accès à une propriété : `proxy[toto]` et `proxy.truc`
+- L'accès aux propriétés héritées : `Object.create(proxy)[toto]`
+- {{jsxref("Reflect.get()")}}
+
+### Invariants
+
+Si les invariants suivants ne sont pas respectés, le proxy renverra une exception {{jsxref("TypeError")}} :
+
+- La valeur renvoyée pour la propriété doit être la même que la valeur de la propriété correspondante de l'objet cible si celle-ci est non-configurable et non accessible en lecture.
+- La valeur renvoyée doit valoir `undefined` si la propriété correspondante de l'objet cible est une propriété d'accesseur non-configurable dont l'attribut \[\[Get]] vaut `undefined`.
+
+## Exemples
+
+Dans l'exemple suivant, on intercepte les accès aux propriétés :
+
+```js
+var p = new Proxy({}, {
+  get: function(cible, propriété, récepteur) {
+    console.log("appelée : " + propriété);
+    return 10;
+  }
+});
+
+console.log(p.a); // "appelée : a"
+                  // 10
+```
+
+Le code suivant ne respecte pas l'invariant :
+
+```js
+var obj = {};
+Object.defineProperty(obj, "a", {
+  configurable: false,
+  enumerable: false,
+  value: 10,
+  writable: false
+});
+
+var p = new Proxy(obj, {
+  get: function(cible, propriété) {
+    return 20;
+  }
+});
+
+p.a; // exception TypeError levée
+```
+
+## Spécifications
+
+| Spécification                                                                                                                                | État                         | Commentaires         |
+| -------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName('ES2015', '#sec-proxy-object-internal-methods-and-internal-slots-get-p-receiver', '[[Get]]')}} | {{Spec2('ES2015')}}     | Définition initiale. |
+| {{SpecName('ESDraft', '#sec-proxy-object-internal-methods-and-internal-slots-get-p-receiver', '[[Get]]')}} | {{Spec2('ESDraft')}} |                      |
+
+## Compatiblité des navigateurs
+
+{{Compat("javascript.builtins.Proxy.handler.get")}}
+
+## Voir aussi
+
+- {{jsxref("Proxy")}}
+- {{jsxref("Proxy.handler", "handler")}}
+- {{jsxref("Reflect.get()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/proxy/proxy/getownpropertydescriptor/index.html b/files/fr/web/javascript/reference/global_objects/proxy/proxy/getownpropertydescriptor/index.html
deleted file mode 100644
index 06de12e833..0000000000
--- a/files/fr/web/javascript/reference/global_objects/proxy/proxy/getownpropertydescriptor/index.html
+++ /dev/null
@@ -1,129 +0,0 @@
----
-title: handler.getOwnPropertyDescriptor()
-slug: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/getOwnPropertyDescriptor
-tags:
-  - ECMAScript 2015
-  - JavaScript
-  - Méthode
-  - Proxy
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/getOwnPropertyDescriptor
-original_slug: Web/JavaScript/Reference/Objets_globaux/Proxy/handler/getOwnPropertyDescriptor
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <strong><code>handler.getOwnPropertyDescriptor()</code></strong> est une trappe pour intercepter {{jsxref("Object.getOwnPropertyDescriptor()")}}.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/proxyhandler-getownpropertydescriptor.html", "taller")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="brush: js">var p = new Proxy(cible, {
-  getOwnPropertyDescriptor: function(cible, prop) {
-  }
-});
-</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<p>Les paramètres suivants sont passés à la méthode <code>getOwnPropertyDescriptor</code>. <code>this</code> est ici lié au gestionnaire (<em>handler</em>).</p>
-
-<dl>
- <dt><code>cible</code></dt>
- <dd>L'objet cible</dd>
- <dt><code>prop</code></dt>
- <dd>Le nom de la propriété dont on souhaite obtenir le descripteur.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>La méthode <code>getOwnPropertyDescriptor</code> doit renvoyer un objet ou <code>undefined</code>.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>La méthode <code><strong>handler.getOwnPropertyDescriptor()</strong></code> est une trappe pour un proxy afin d'intercepter les opérations effectuées avec {{jsxref("Object.getOwnPropertyDescriptor()")}}.</p>
-
-<h3 id="Interceptions">Interceptions</h3>
-
-<p>Cette trappe permet d'intercepter :</p>
-
-<ul>
- <li>{{jsxref("Object.getOwnPropertyDescriptor()")}}</li>
- <li>{{jsxref("Reflect.getOwnPropertyDescriptor()")}}</li>
-</ul>
-
-<h3 id="Invariants">Invariants</h3>
-
-<p>Si les invariants suivants ne sont pas respectés, le proxy lèvera une exception {{jsxref("TypeError")}} :</p>
-
-<ul>
- <li><code>getOwnPropertyDescriptor</code> doit renvoyer un objet ou <code>undefined</code>.</li>
- <li>Une propriété ne peut pas être indiquée comme non-existante s'il existe une propriété correspondante de l'objet cible qui est une propriété propre et non-configurable.</li>
- <li>Une propriété ne peut pas être indiquée comme non-existante s'il existe une propriété correspondante de l'objet cible qui est une propriété propre et que l'objet cible n'est pas extensible.</li>
- <li>Une propriété ne peut pas être indiquée comme existante si elle n'existe pas de façon correspondante sur l'objet cible et que l'objet cible n'est pas extensible.</li>
- <li>Une propriété ne peut pas être indiquée comme non-configurable si la propriété correspondante n'existe pas pour l'objet cible ou si elle existe comme un propriété propre configurable.</li>
- <li>Le résultat de <code>Object.getOwnPropertyDescriptor(cible)</code> peut être appliqué à l'objet cible avec <code>Object.defineProperty</code> sans que cela lève une exception.</li>
-</ul>
-
-<h2 id="Exemples">Exemples</h2>
-
-<p>Dans l'exemple qui suit, on intercepte {{jsxref("Object.getOwnPropertyDescriptor()")}}.</p>
-
-<pre class="brush: js">var p = new Proxy({ a: 20 }, {
-  getOwnPropertyDescriptor: function(cible, prop) {
-    console.log("appelée : " + prop);
-    return { configurable: true, enumerable: true, value: 10 };
-  }
-});
-
-console.log(Object.getOwnPropertyDescriptor(p, "a").value); // "appelée : a"
-                                                            // 10
-</pre>
-
-<p>L'exemple suivant ne respecte pas un invariant :</p>
-
-<pre class="brush: js">var obj = { a: 10 };
-Object.preventExtensions(obj);
-var p = new Proxy(obj, {
-  getOwnPropertyDescriptor: function(cible, prop) {
-    return undefined;
-  }
-});
-
-Object.getOwnPropertyDescriptor(p, "a"); // Une exception TypeError est renvoyée
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-proxy-object-internal-methods-and-internal-slots-getownproperty-p', '[[GetOwnProperty]]')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-proxy-object-internal-methods-and-internal-slots-getownproperty-p', '[[GetOwnProperty]]')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Proxy.handler.getOwnPropertyDescriptor")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Proxy")}}</li>
- <li>{{jsxref("Proxy.handler", "handler")}}</li>
- <li>{{jsxref("Object.getOwnPropertyDescriptor()")}}</li>
- <li>{{jsxref("Reflect.getOwnPropertyDescriptor()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/proxy/proxy/getownpropertydescriptor/index.md b/files/fr/web/javascript/reference/global_objects/proxy/proxy/getownpropertydescriptor/index.md
new file mode 100644
index 0000000000..7f4b9c63f4
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/proxy/proxy/getownpropertydescriptor/index.md
@@ -0,0 +1,109 @@
+---
+title: handler.getOwnPropertyDescriptor()
+slug: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/getOwnPropertyDescriptor
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Méthode
+  - Proxy
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/getOwnPropertyDescriptor
+original_slug: Web/JavaScript/Reference/Objets_globaux/Proxy/handler/getOwnPropertyDescriptor
+---
+{{JSRef}}
+
+La méthode **`handler.getOwnPropertyDescriptor()`** est une trappe pour intercepter {{jsxref("Object.getOwnPropertyDescriptor()")}}.
+
+{{EmbedInteractiveExample("pages/js/proxyhandler-getownpropertydescriptor.html", "taller")}}
+
+## Syntaxe
+
+```js
+var p = new Proxy(cible, {
+  getOwnPropertyDescriptor: function(cible, prop) {
+  }
+});
+```
+
+### Paramètres
+
+Les paramètres suivants sont passés à la méthode `getOwnPropertyDescriptor`. `this` est ici lié au gestionnaire (_handler_).
+
+- `cible`
+  - : L'objet cible
+- `prop`
+  - : Le nom de la propriété dont on souhaite obtenir le descripteur.
+
+### Valeur de retour
+
+La méthode `getOwnPropertyDescriptor` doit renvoyer un objet ou `undefined`.
+
+## Description
+
+La méthode **`handler.getOwnPropertyDescriptor()`** est une trappe pour un proxy afin d'intercepter les opérations effectuées avec {{jsxref("Object.getOwnPropertyDescriptor()")}}.
+
+### Interceptions
+
+Cette trappe permet d'intercepter :
+
+- {{jsxref("Object.getOwnPropertyDescriptor()")}}
+- {{jsxref("Reflect.getOwnPropertyDescriptor()")}}
+
+### Invariants
+
+Si les invariants suivants ne sont pas respectés, le proxy lèvera une exception {{jsxref("TypeError")}} :
+
+- `getOwnPropertyDescriptor` doit renvoyer un objet ou `undefined`.
+- Une propriété ne peut pas être indiquée comme non-existante s'il existe une propriété correspondante de l'objet cible qui est une propriété propre et non-configurable.
+- Une propriété ne peut pas être indiquée comme non-existante s'il existe une propriété correspondante de l'objet cible qui est une propriété propre et que l'objet cible n'est pas extensible.
+- Une propriété ne peut pas être indiquée comme existante si elle n'existe pas de façon correspondante sur l'objet cible et que l'objet cible n'est pas extensible.
+- Une propriété ne peut pas être indiquée comme non-configurable si la propriété correspondante n'existe pas pour l'objet cible ou si elle existe comme un propriété propre configurable.
+- Le résultat de `Object.getOwnPropertyDescriptor(cible)` peut être appliqué à l'objet cible avec `Object.defineProperty` sans que cela lève une exception.
+
+## Exemples
+
+Dans l'exemple qui suit, on intercepte {{jsxref("Object.getOwnPropertyDescriptor()")}}.
+
+```js
+var p = new Proxy({ a: 20 }, {
+  getOwnPropertyDescriptor: function(cible, prop) {
+    console.log("appelée : " + prop);
+    return { configurable: true, enumerable: true, value: 10 };
+  }
+});
+
+console.log(Object.getOwnPropertyDescriptor(p, "a").value); // "appelée : a"
+                                                            // 10
+```
+
+L'exemple suivant ne respecte pas un invariant :
+
+```js
+var obj = { a: 10 };
+Object.preventExtensions(obj);
+var p = new Proxy(obj, {
+  getOwnPropertyDescriptor: function(cible, prop) {
+    return undefined;
+  }
+});
+
+Object.getOwnPropertyDescriptor(p, "a"); // Une exception TypeError est renvoyée
+```
+
+## Spécifications
+
+| Spécification                                                                                                                                                    | État                         | Commentaires         |
+| ---------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName('ES2015', '#sec-proxy-object-internal-methods-and-internal-slots-getownproperty-p', '[[GetOwnProperty]]')}}     | {{Spec2('ES2015')}}     | Définition initiale. |
+| {{SpecName('ESDraft', '#sec-proxy-object-internal-methods-and-internal-slots-getownproperty-p', '[[GetOwnProperty]]')}} | {{Spec2('ESDraft')}} |                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Proxy.handler.getOwnPropertyDescriptor")}}
+
+## Voir aussi
+
+- {{jsxref("Proxy")}}
+- {{jsxref("Proxy.handler", "handler")}}
+- {{jsxref("Object.getOwnPropertyDescriptor()")}}
+- {{jsxref("Reflect.getOwnPropertyDescriptor()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/proxy/proxy/getprototypeof/index.html b/files/fr/web/javascript/reference/global_objects/proxy/proxy/getprototypeof/index.html
deleted file mode 100644
index 8df39ee357..0000000000
--- a/files/fr/web/javascript/reference/global_objects/proxy/proxy/getprototypeof/index.html
+++ /dev/null
@@ -1,151 +0,0 @@
----
-title: handler.getPrototypeOf()
-slug: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/getPrototypeOf
-tags:
-  - ECMAScript 2015
-  - JavaScript
-  - Méthode
-  - Proxy
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/getPrototypeOf
-original_slug: Web/JavaScript/Reference/Objets_globaux/Proxy/handler/getPrototypeOf
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <strong><code>handler.getPrototypeOf()</code></strong> représente une trappe pour la méthode interne <code>[[GetPrototypeOf]]</code>.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/proxyhandler-getprototypeof.html", "taller")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="brush: js">var p = new Proxy(obj, {
-  getPrototypeOf(cible) {
-  ...
-  }
-});
-</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<p>Le paramètre suivant est passé à la méthode <code>getPrototypeOf</code>. <code>this</code> est lié au gestionnaire.</p>
-
-<dl>
- <dt><code>cible</code></dt>
- <dd>L'objet cible.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>La méthode <code>getPrototypeOf</code> doit renvoyer un objet ou <code>null</code>.</p>
-
-<h2 id="Description">Description</h2>
-
-<h3 id="Interceptions">Interceptions</h3>
-
-<p>Cette trappe permet d'intercepter les opérations suivantes :</p>
-
-<ul>
- <li>{{jsxref("Object.getPrototypeOf()")}}</li>
- <li>{{jsxref("Reflect.getPrototypeOf()")}}</li>
- <li>{{jsxref("Object/proto", "__proto__")}}</li>
- <li>{{jsxref("Object.prototype.isPrototypeOf()")}}</li>
- <li>{{jsxref("Opérateurs/instanceof", "instanceof")}}</li>
-</ul>
-
-<h3 id="Invariants">Invariants</h3>
-
-<p>Si les invariants suivant ne sont pas respectés, le proxy renverra une exception {{jsxref("TypeError")}} :</p>
-
-<ul>
- <li><code>getPrototypeOf</code> doit renvoyer un objet ou <code>null</code>.</li>
- <li>Si la <code>cible</code> n'est pas extensible, <code>Object.getPrototypeOf(proxy)</code> doit renvoyer la même valeur que <code>Object.getPrototypeOf(cible)</code>.</li>
-</ul>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Utilisation_simple">Utilisation simple</h3>
-
-<pre class="brush: js">var obj = {};
-var proto = {};
-var gestionnaire = {
-    getPrototypeOf(cible) {
-        console.log(cible === obj);   // true
-        console.log(this === gestionnaire); // true
-        return proto;
-    }
-};
-
-var p = new Proxy(obj, gestionnaire);
-console.log(Object.getPrototypeOf(p) === proto);    // true
-</pre>
-
-<h3 id="Cinq_façons_de_déclencher_la_trappe_getPrototypeOf">Cinq façons de déclencher la trappe <code>getPrototypeOf</code></h3>
-
-<pre class="brush: js">var obj = {};
-var p = new Proxy(obj, {
-    getPrototypeOf(cible) {
-        return Array.prototype;
-    }
-});
-console.log(
-    Object.getPrototypeOf(p) === Array.prototype,  // true
-    Reflect.getPrototypeOf(p) === Array.prototype, // true
-    p.__proto__ === Array.prototype,               // true
-    Array.prototype.isPrototypeOf(p),              // true
-    p instanceof Array                             // true
-);
-</pre>
-
-<h3 id="Deux_types_d'exceptions">Deux types d'exceptions</h3>
-
-<pre class="brush: js">var obj = {};
-var p = new Proxy(obj, {
-    getPrototypeOf(cible) {
-        return "toto";
-    }
-});
-Object.getPrototypeOf(p); // TypeError : "toto" n'est pas un objet ou null
-
-var obj = Object.preventExtensions({});
-var p = new Proxy(obj, {
-    getPrototypeOf(cible) {
-        return {};
-    }
-});
-Object.getPrototypeOf(p); // TypeError : on attend la même valeur pour le prototype
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-proxy-object-internal-methods-and-internal-slots-getprototypeof', '[[GetPrototypeOf]]')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-proxy-object-internal-methods-and-internal-slots-getprototypeof', '[[GetPrototypeOf]]')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Proxy.handler.getPrototypeOf")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Proxy")}}</li>
- <li>{{jsxref("Proxy.handler", "handler")}}</li>
- <li>{{jsxref("Object.getPrototypeOf()")}}</li>
- <li>{{jsxref("Reflect.getPrototypeOf()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/proxy/proxy/getprototypeof/index.md b/files/fr/web/javascript/reference/global_objects/proxy/proxy/getprototypeof/index.md
new file mode 100644
index 0000000000..2f339ae97e
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/proxy/proxy/getprototypeof/index.md
@@ -0,0 +1,132 @@
+---
+title: handler.getPrototypeOf()
+slug: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/getPrototypeOf
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Méthode
+  - Proxy
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/getPrototypeOf
+original_slug: Web/JavaScript/Reference/Objets_globaux/Proxy/handler/getPrototypeOf
+---
+{{JSRef}}
+
+La méthode **`handler.getPrototypeOf()`** représente une trappe pour la méthode interne `[[GetPrototypeOf]]`.
+
+{{EmbedInteractiveExample("pages/js/proxyhandler-getprototypeof.html", "taller")}}
+
+## Syntaxe
+
+```js
+var p = new Proxy(obj, {
+  getPrototypeOf(cible) {
+  ...
+  }
+});
+```
+
+### Paramètres
+
+Le paramètre suivant est passé à la méthode `getPrototypeOf`. `this` est lié au gestionnaire.
+
+- `cible`
+  - : L'objet cible.
+
+### Valeur de retour
+
+La méthode `getPrototypeOf` doit renvoyer un objet ou `null`.
+
+## Description
+
+### Interceptions
+
+Cette trappe permet d'intercepter les opérations suivantes :
+
+- {{jsxref("Object.getPrototypeOf()")}}
+- {{jsxref("Reflect.getPrototypeOf()")}}
+- {{jsxref("Object/proto", "__proto__")}}
+- {{jsxref("Object.prototype.isPrototypeOf()")}}
+- {{jsxref("Opérateurs/instanceof", "instanceof")}}
+
+### Invariants
+
+Si les invariants suivant ne sont pas respectés, le proxy renverra une exception {{jsxref("TypeError")}} :
+
+- `getPrototypeOf` doit renvoyer un objet ou `null`.
+- Si la `cible` n'est pas extensible, `Object.getPrototypeOf(proxy)` doit renvoyer la même valeur que `Object.getPrototypeOf(cible)`.
+
+## Exemples
+
+### Utilisation simple
+
+```js
+var obj = {};
+var proto = {};
+var gestionnaire = {
+    getPrototypeOf(cible) {
+        console.log(cible === obj);   // true
+        console.log(this === gestionnaire); // true
+        return proto;
+    }
+};
+
+var p = new Proxy(obj, gestionnaire);
+console.log(Object.getPrototypeOf(p) === proto);    // true
+```
+
+### Cinq façons de déclencher la trappe `getPrototypeOf`
+
+```js
+var obj = {};
+var p = new Proxy(obj, {
+    getPrototypeOf(cible) {
+        return Array.prototype;
+    }
+});
+console.log(
+    Object.getPrototypeOf(p) === Array.prototype,  // true
+    Reflect.getPrototypeOf(p) === Array.prototype, // true
+    p.__proto__ === Array.prototype,               // true
+    Array.prototype.isPrototypeOf(p),              // true
+    p instanceof Array                             // true
+);
+```
+
+### Deux types d'exceptions
+
+```js
+var obj = {};
+var p = new Proxy(obj, {
+    getPrototypeOf(cible) {
+        return "toto";
+    }
+});
+Object.getPrototypeOf(p); // TypeError : "toto" n'est pas un objet ou null
+
+var obj = Object.preventExtensions({});
+var p = new Proxy(obj, {
+    getPrototypeOf(cible) {
+        return {};
+    }
+});
+Object.getPrototypeOf(p); // TypeError : on attend la même valeur pour le prototype
+```
+
+## Spécifications
+
+| Spécification                                                                                                                                                | État                         | Commentaires         |
+| ------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------- | -------------------- |
+| {{SpecName('ES2015', '#sec-proxy-object-internal-methods-and-internal-slots-getprototypeof', '[[GetPrototypeOf]]')}} | {{Spec2('ES2015')}}     | Définition initiale. |
+| {{SpecName('ESDraft', '#sec-proxy-object-internal-methods-and-internal-slots-getprototypeof', '[[GetPrototypeOf]]')}} | {{Spec2('ESDraft')}} |                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Proxy.handler.getPrototypeOf")}}
+
+## Voir aussi
+
+- {{jsxref("Proxy")}}
+- {{jsxref("Proxy.handler", "handler")}}
+- {{jsxref("Object.getPrototypeOf()")}}
+- {{jsxref("Reflect.getPrototypeOf()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/proxy/proxy/has/index.html b/files/fr/web/javascript/reference/global_objects/proxy/proxy/has/index.html
deleted file mode 100644
index 89861b997d..0000000000
--- a/files/fr/web/javascript/reference/global_objects/proxy/proxy/has/index.html
+++ /dev/null
@@ -1,127 +0,0 @@
----
-title: handler.has()
-slug: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/has
-tags:
-  - ECMAScript 2015
-  - JavaScript
-  - Méthode
-  - Proxy
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/has
-original_slug: Web/JavaScript/Reference/Objets_globaux/Proxy/handler/has
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <strong><code>handler.has()</code></strong> est une trappe pour l'opérateur {{jsxref("Opérateurs/L_opérateur_in", "in")}}.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/proxyhandler-has.html", "taller")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="brush: js">var p = new Proxy(cible, {
-  has: function(cible, prop) {
-  }
-});
-</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<p>Les paramètres suivants sont passés à la méthode <code>has</code>. <code>this</code> est lié au gestionnaire.</p>
-
-<dl>
- <dt><code>cible</code></dt>
- <dd>L'objet cible.</dd>
- <dt><code>prop</code></dt>
- <dd>Le nom ou le symbole ({{jsxref("Symbol")}}) de la propriété dont on veut connaître l'existence.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>La méthode <code>has</code> doit renvoyer une valeur booléenne.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>La méthode <code><strong>handler.has</strong></code> est une trappe pour l'opérateur {{jsxref("Opérateurs/L_opérateur_in", "in")}}.</p>
-
-<h3 id="Interceptions">Interceptions</h3>
-
-<p>Cette trappe permet d'intercepter les opérations suivantes :</p>
-
-<ul>
- <li>L'accès à une propriété : <code>toto in proxy</code></li>
- <li>L'accès à une propriété héritée : <code>toto in Object.create(proxy)</code></li>
- <li>Accès via l'instruction <code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/with">with</a></code> : <code>with(proxy) { (foo); }</code></li>
- <li>{{jsxref("Reflect.has()")}}</li>
-</ul>
-
-<h3 id="Invariants">Invariants</h3>
-
-<p>Si les invariants suivants ne sont pas respectés, le proxy lèvera une exception {{jsxref("TypeError")}} :</p>
-
-<ul>
- <li>Une propriété ne peut pas être indiquée comme non-existante s'il existe une propriété correspondante de l'objet cible qui est une propriété propre et non-configurable.</li>
- <li>Une propriété ne peut pas être indiquée comme non-existante s'il existe une propriété correspondante propre sur l'objet cible et que celui-ci n'est pas extensible.</li>
-</ul>
-
-<h2 id="Exemples">Exemples</h2>
-
-<p>Dans l'exemple qui suit, on intercepte l'opérateur {{jsxref("Opérateurs/L_opérateur_in", "in")}} :</p>
-
-<pre class="brush: js">var p = new Proxy({}, {
-  has: function(cible, prop) {
-    console.log("appelée : " + prop);
-    return true;
-  }
-});
-
-console.log("a" in p); // "appelée : a"
-                       // true
-</pre>
-
-<p>L'exemple suivant ne respecte pas un invariant :</p>
-
-<pre class="brush: js">var obj = { a: 10 };
-Object.preventExtensions(obj);
-var p = new Proxy(obj, {
-  has: function(cible, prop) {
-    return false;
-  }
-});
-
-"a" in p; // TypeError levée
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-proxy-object-internal-methods-and-internal-slots-hasproperty-p', '[[HasProperty]]')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-proxy-object-internal-methods-and-internal-slots-hasproperty-p', '[[HasProperty]]')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Proxy.handler.has")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Proxy")}}</li>
- <li>{{jsxref("Proxy.handler", "handler")}}</li>
- <li>L'opérateur {{jsxref("Opérateurs/L_opérateur_in", "in")}}</li>
- <li>{{jsxref("Reflect.has()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/proxy/proxy/has/index.md b/files/fr/web/javascript/reference/global_objects/proxy/proxy/has/index.md
new file mode 100644
index 0000000000..7a9efe5f69
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/proxy/proxy/has/index.md
@@ -0,0 +1,107 @@
+---
+title: handler.has()
+slug: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/has
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Méthode
+  - Proxy
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/has
+original_slug: Web/JavaScript/Reference/Objets_globaux/Proxy/handler/has
+---
+{{JSRef}}
+
+La méthode **`handler.has()`** est une trappe pour l'opérateur {{jsxref("Opérateurs/L_opérateur_in", "in")}}.
+
+{{EmbedInteractiveExample("pages/js/proxyhandler-has.html", "taller")}}
+
+## Syntaxe
+
+```js
+var p = new Proxy(cible, {
+  has: function(cible, prop) {
+  }
+});
+```
+
+### Paramètres
+
+Les paramètres suivants sont passés à la méthode `has`. `this` est lié au gestionnaire.
+
+- `cible`
+  - : L'objet cible.
+- `prop`
+  - : Le nom ou le symbole ({{jsxref("Symbol")}}) de la propriété dont on veut connaître l'existence.
+
+### Valeur de retour
+
+La méthode `has` doit renvoyer une valeur booléenne.
+
+## Description
+
+La méthode **`handler.has`** est une trappe pour l'opérateur {{jsxref("Opérateurs/L_opérateur_in", "in")}}.
+
+### Interceptions
+
+Cette trappe permet d'intercepter les opérations suivantes :
+
+- L'accès à une propriété : `toto in proxy`
+- L'accès à une propriété héritée : `toto in Object.create(proxy)`
+- Accès via l'instruction [`with`](/fr/docs/Web/JavaScript/Reference/Instructions/with) : `with(proxy) { (foo); }`
+- {{jsxref("Reflect.has()")}}
+
+### Invariants
+
+Si les invariants suivants ne sont pas respectés, le proxy lèvera une exception {{jsxref("TypeError")}} :
+
+- Une propriété ne peut pas être indiquée comme non-existante s'il existe une propriété correspondante de l'objet cible qui est une propriété propre et non-configurable.
+- Une propriété ne peut pas être indiquée comme non-existante s'il existe une propriété correspondante propre sur l'objet cible et que celui-ci n'est pas extensible.
+
+## Exemples
+
+Dans l'exemple qui suit, on intercepte l'opérateur {{jsxref("Opérateurs/L_opérateur_in", "in")}} :
+
+```js
+var p = new Proxy({}, {
+  has: function(cible, prop) {
+    console.log("appelée : " + prop);
+    return true;
+  }
+});
+
+console.log("a" in p); // "appelée : a"
+                       // true
+```
+
+L'exemple suivant ne respecte pas un invariant :
+
+```js
+var obj = { a: 10 };
+Object.preventExtensions(obj);
+var p = new Proxy(obj, {
+  has: function(cible, prop) {
+    return false;
+  }
+});
+
+"a" in p; // TypeError levée
+```
+
+## Spécifications
+
+| Spécification                                                                                                                                            | État                         | Commentaires         |
+| -------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName('ES2015', '#sec-proxy-object-internal-methods-and-internal-slots-hasproperty-p', '[[HasProperty]]')}}     | {{Spec2('ES2015')}}     | Définition initiale. |
+| {{SpecName('ESDraft', '#sec-proxy-object-internal-methods-and-internal-slots-hasproperty-p', '[[HasProperty]]')}} | {{Spec2('ESDraft')}} |                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Proxy.handler.has")}}
+
+## Voir aussi
+
+- {{jsxref("Proxy")}}
+- {{jsxref("Proxy.handler", "handler")}}
+- L'opérateur {{jsxref("Opérateurs/L_opérateur_in", "in")}}
+- {{jsxref("Reflect.has()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/proxy/proxy/index.html b/files/fr/web/javascript/reference/global_objects/proxy/proxy/index.html
deleted file mode 100644
index fb508680e1..0000000000
--- a/files/fr/web/javascript/reference/global_objects/proxy/proxy/index.html
+++ /dev/null
@@ -1,82 +0,0 @@
----
-title: Gestionnaire de Proxy (handler)
-slug: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy
-tags:
-  - ECMAScript 2015
-  - JavaScript
-  - Proxy
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy
-translation_of_original: Web/JavaScript/Reference/Global_Objects/Proxy/handler
-original_slug: Web/JavaScript/Reference/Objets_globaux/Proxy/handler
----
-<div>{{JSRef}}</div>
-
-<p>L'objet gestionnaire d'un proxy est un objet qui contient les trappes de captures (<em>traps</em>) pour le  {{jsxref("Proxy", "proxy", "", 1)}}.</p>
-
-<h2 id="Méthodes">Méthodes</h2>
-
-<p>Toutes ces trappes sont optionnelles. Si une trappe n'a pas été définie, le comportement par défaut sera de transmettre l'opération à la cible.</p>
-
-<dl>
- <dt>{{jsxref("Objets_globaux/Proxy/handler/getPrototypeOf", "handler.getPrototypeOf()")}}</dt>
- <dd>Une trappe pour {{jsxref("Object.getPrototypeOf")}}.</dd>
- <dt>{{jsxref("Objets_globaux/Proxy/handler/setPrototypeOf", "handler.setPrototypeOf()")}}</dt>
- <dd>Une trappe pour {{jsxref("Object.setPrototypeOf")}}.</dd>
- <dt>{{jsxref("Objets_globaux/Proxy/handler/isExtensible", "handler.isExtensible()")}}</dt>
- <dd>Une trappe pour {{jsxref("Object.isExtensible")}}.</dd>
- <dt>{{jsxref("Objets_globaux/Proxy/handler/preventExtensions", "handler.preventExtensions()")}}</dt>
- <dd>Une trappe pour {{jsxref("Object.preventExtensions")}}.</dd>
- <dt>{{jsxref("Objets_globaux/Proxy/handler/getOwnPropertyDescriptor", "handler.getOwnPropertyDescriptor()")}}</dt>
- <dd>Une trappe pour {{jsxref("Object.getOwnPropertyDescriptor")}}.</dd>
- <dt>{{jsxref("Objets_globaux/Proxy/handler/defineProperty", "handler.defineProperty()")}}</dt>
- <dd>Une trappe pour {{jsxref("Object.defineProperty")}}.</dd>
- <dt>{{jsxref("Objets_globaux/Proxy/handler/has", "handler.has()")}}</dt>
- <dd>Une trappe pour l'opérateur {{jsxref("Opérateurs/L_opérateur_in", "in")}}.</dd>
- <dt>{{jsxref("Objets_globaux/Proxy/handler/get", "handler.get()")}}</dt>
- <dd>Une trappe pour l'accès aux valeurs des propriétés.</dd>
- <dt>{{jsxref("Objets_globaux/Proxy/handler/set", "handler.set()")}}</dt>
- <dd>Une trappe pour la définition des valeurs des propriétés.</dd>
- <dt>{{jsxref("Objets_globaux/Proxy/handler/deleteProperty", "handler.deleteProperty()")}}</dt>
- <dd>Une trappe pour l'opérateur {{jsxref("Opérateurs/L_opérateur_delete", "delete")}}.</dd>
- <dt>{{jsxref("Objets_globaux/Proxy/handler/ownKeys", "handler.ownKeys()")}}</dt>
- <dd>Une trappe pour {{jsxref("Object.getOwnPropertyNames")}} et {{jsxref("Object.getOwnPropertySymbols")}}.</dd>
- <dt>{{jsxref("Objets_globaux/Proxy/handler/apply", "handler.apply()")}}</dt>
- <dd>Une trappe pour l'appel d'une fonction.</dd>
- <dt>{{jsxref("Objets_globaux/Proxy/handler/construct", "handler.construct()")}}</dt>
- <dd>Une trappe pour l'opérateur {{jsxref("Opérateurs/L_opérateur_new", "new")}}.</dd>
-</dl>
-
-<p>Certaines trappes non standards sont désormais <a href="/fr/docs/JavaScript/Reference/Annexes/Fonctionnalités_dépréciées#Proxy">obsolètes et ont été supprimées</a>.</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-proxy-object-internal-methods-and-internal-slots', 'Proxy Object Internal Methods and Internal Slots')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-proxy-object-internal-methods-and-internal-slots', 'Proxy Object Internal Methods and Internal Slots')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td>La trappe pour <code>enumerate</code> a été retirée.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Proxy.handler")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Proxy")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/proxy/proxy/index.md b/files/fr/web/javascript/reference/global_objects/proxy/proxy/index.md
new file mode 100644
index 0000000000..23fca9ad60
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/proxy/proxy/index.md
@@ -0,0 +1,63 @@
+---
+title: Gestionnaire de Proxy (handler)
+slug: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Proxy
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy
+translation_of_original: Web/JavaScript/Reference/Global_Objects/Proxy/handler
+original_slug: Web/JavaScript/Reference/Objets_globaux/Proxy/handler
+---
+{{JSRef}}
+
+L'objet gestionnaire d'un proxy est un objet qui contient les trappes de captures (_traps_) pour le  {{jsxref("Proxy", "proxy", "", 1)}}.
+
+## Méthodes
+
+Toutes ces trappes sont optionnelles. Si une trappe n'a pas été définie, le comportement par défaut sera de transmettre l'opération à la cible.
+
+- {{jsxref("Objets_globaux/Proxy/handler/getPrototypeOf", "handler.getPrototypeOf()")}}
+  - : Une trappe pour {{jsxref("Object.getPrototypeOf")}}.
+- {{jsxref("Objets_globaux/Proxy/handler/setPrototypeOf", "handler.setPrototypeOf()")}}
+  - : Une trappe pour {{jsxref("Object.setPrototypeOf")}}.
+- {{jsxref("Objets_globaux/Proxy/handler/isExtensible", "handler.isExtensible()")}}
+  - : Une trappe pour {{jsxref("Object.isExtensible")}}.
+- {{jsxref("Objets_globaux/Proxy/handler/preventExtensions", "handler.preventExtensions()")}}
+  - : Une trappe pour {{jsxref("Object.preventExtensions")}}.
+- {{jsxref("Objets_globaux/Proxy/handler/getOwnPropertyDescriptor", "handler.getOwnPropertyDescriptor()")}}
+  - : Une trappe pour {{jsxref("Object.getOwnPropertyDescriptor")}}.
+- {{jsxref("Objets_globaux/Proxy/handler/defineProperty", "handler.defineProperty()")}}
+  - : Une trappe pour {{jsxref("Object.defineProperty")}}.
+- {{jsxref("Objets_globaux/Proxy/handler/has", "handler.has()")}}
+  - : Une trappe pour l'opérateur {{jsxref("Opérateurs/L_opérateur_in", "in")}}.
+- {{jsxref("Objets_globaux/Proxy/handler/get", "handler.get()")}}
+  - : Une trappe pour l'accès aux valeurs des propriétés.
+- {{jsxref("Objets_globaux/Proxy/handler/set", "handler.set()")}}
+  - : Une trappe pour la définition des valeurs des propriétés.
+- {{jsxref("Objets_globaux/Proxy/handler/deleteProperty", "handler.deleteProperty()")}}
+  - : Une trappe pour l'opérateur {{jsxref("Opérateurs/L_opérateur_delete", "delete")}}.
+- {{jsxref("Objets_globaux/Proxy/handler/ownKeys", "handler.ownKeys()")}}
+  - : Une trappe pour {{jsxref("Object.getOwnPropertyNames")}} et {{jsxref("Object.getOwnPropertySymbols")}}.
+- {{jsxref("Objets_globaux/Proxy/handler/apply", "handler.apply()")}}
+  - : Une trappe pour l'appel d'une fonction.
+- {{jsxref("Objets_globaux/Proxy/handler/construct", "handler.construct()")}}
+  - : Une trappe pour l'opérateur {{jsxref("Opérateurs/L_opérateur_new", "new")}}.
+
+Certaines trappes non standards sont désormais [obsolètes et ont été supprimées](/fr/docs/JavaScript/Reference/Annexes/Fonctionnalités_dépréciées#Proxy).
+
+## Spécifications
+
+| Spécification                                                                                                                                                                    | État                         | Commentaires                              |
+| -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------- |
+| {{SpecName('ES2015', '#sec-proxy-object-internal-methods-and-internal-slots', 'Proxy Object Internal Methods and Internal Slots')}} | {{Spec2('ES2015')}}     | Définition initiale.                      |
+| {{SpecName('ESDraft', '#sec-proxy-object-internal-methods-and-internal-slots', 'Proxy Object Internal Methods and Internal Slots')}} | {{Spec2('ESDraft')}} | La trappe pour `enumerate` a été retirée. |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Proxy.handler")}}
+
+## Voir aussi
+
+- {{jsxref("Proxy")}}
diff --git a/files/fr/web/javascript/reference/global_objects/proxy/proxy/isextensible/index.html b/files/fr/web/javascript/reference/global_objects/proxy/proxy/isextensible/index.html
deleted file mode 100644
index c7fd6613ec..0000000000
--- a/files/fr/web/javascript/reference/global_objects/proxy/proxy/isextensible/index.html
+++ /dev/null
@@ -1,120 +0,0 @@
----
-title: handler.isExtensible()
-slug: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/isExtensible
-tags:
-  - ECMAScript 2015
-  - JavaScript
-  - Méthode
-  - Proxy
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/isExtensible
-original_slug: Web/JavaScript/Reference/Objets_globaux/Proxy/handler/isExtensible
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <strong><code>handler.isExtensible()</code></strong> est une trappe pour intercepter les opérations de {{jsxref("Object.isExtensible()")}}.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/proxyhandler-isextensible.html", "taller")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="brush: js">var p = new Proxy(cible, {
-  isExtensible: function(cible) {
-  }
-});
-</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<p>Les paramètres suivants sont passés à la méthode <code>isExtensible</code>. <code>this</code> est ici lié au gestionnaire (<em>handler</em>).</p>
-
-<dl>
- <dt><code>cible</code></dt>
- <dd>L'objet cible.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>La méthode <code>isExtensible</code> doit renvoyer une valeur booléenne.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>La méthode <code><strong>handler.isExtensible()</strong></code> est une trappe pour intercepter {{jsxref("Object.isExtensible()")}}.</p>
-
-<h3 id="Interceptions">Interceptions</h3>
-
-<p>Cette trappe intercepte les opérations suivantes :</p>
-
-<ul>
- <li>{{jsxref("Object.isExtensible()")}}</li>
- <li>{{jsxref("Reflect.isExtensible()")}}</li>
-</ul>
-
-<h3 id="Invariants">Invariants</h3>
-
-<p>Si les invariants suivants ne sont pas respectés, le proxy renverra une exception  {{jsxref("TypeError")}} :</p>
-
-<ul>
- <li><code>Object.isExtensible(proxy)</code> doit renvoyer la même valeur que <code>Object.isExtensible(cible)</code>.</li>
-</ul>
-
-<h2 id="Exemples">Exemples</h2>
-
-<p>Dans l'exemple qui suit, on intercepte {{jsxref("Object.isExtensible()")}}.</p>
-
-<pre class="brush: js">var p = new Proxy({}, {
-  isExtensible: function(cible) {
-    console.log("appelée");
-    return true;
-  }
-});
-
-console.log(Object.isExtensible(p)); // "appelée"
-                                     // true
-</pre>
-
-<p>Le code suivante ne respecte pas l'invariant et entraîne donc une exception.</p>
-
-<pre class="brush: js">var p = new Proxy({}, {
-  isExtensible: function(cible) {
-    return false;
-  }
-});
-
-Object.isExtensible(p); // TypeError est levée
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-proxy-object-internal-methods-and-internal-slots-isextensible', '[[IsExtensible]]')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-proxy-object-internal-methods-and-internal-slots-isextensible', '[[IsExtensible]]')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Proxy.handler.isExtensible")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Proxy")}}</li>
- <li>{{jsxref("Proxy.handler", "handler")}}</li>
- <li>{{jsxref("Object.isExtensible()")}}</li>
- <li>{{jsxref("Reflect.isExtensible()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/proxy/proxy/isextensible/index.md b/files/fr/web/javascript/reference/global_objects/proxy/proxy/isextensible/index.md
new file mode 100644
index 0000000000..9d335fd28b
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/proxy/proxy/isextensible/index.md
@@ -0,0 +1,100 @@
+---
+title: handler.isExtensible()
+slug: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/isExtensible
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Méthode
+  - Proxy
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/isExtensible
+original_slug: Web/JavaScript/Reference/Objets_globaux/Proxy/handler/isExtensible
+---
+{{JSRef}}
+
+La méthode **`handler.isExtensible()`** est une trappe pour intercepter les opérations de {{jsxref("Object.isExtensible()")}}.
+
+{{EmbedInteractiveExample("pages/js/proxyhandler-isextensible.html", "taller")}}
+
+## Syntaxe
+
+```js
+var p = new Proxy(cible, {
+  isExtensible: function(cible) {
+  }
+});
+```
+
+### Paramètres
+
+Les paramètres suivants sont passés à la méthode `isExtensible`. `this` est ici lié au gestionnaire (_handler_).
+
+- `cible`
+  - : L'objet cible.
+
+### Valeur de retour
+
+La méthode `isExtensible` doit renvoyer une valeur booléenne.
+
+## Description
+
+La méthode **`handler.isExtensible()`** est une trappe pour intercepter {{jsxref("Object.isExtensible()")}}.
+
+### Interceptions
+
+Cette trappe intercepte les opérations suivantes :
+
+- {{jsxref("Object.isExtensible()")}}
+- {{jsxref("Reflect.isExtensible()")}}
+
+### Invariants
+
+Si les invariants suivants ne sont pas respectés, le proxy renverra une exception  {{jsxref("TypeError")}} :
+
+- `Object.isExtensible(proxy)` doit renvoyer la même valeur que `Object.isExtensible(cible)`.
+
+## Exemples
+
+Dans l'exemple qui suit, on intercepte {{jsxref("Object.isExtensible()")}}.
+
+```js
+var p = new Proxy({}, {
+  isExtensible: function(cible) {
+    console.log("appelée");
+    return true;
+  }
+});
+
+console.log(Object.isExtensible(p)); // "appelée"
+                                     // true
+```
+
+Le code suivante ne respecte pas l'invariant et entraîne donc une exception.
+
+```js
+var p = new Proxy({}, {
+  isExtensible: function(cible) {
+    return false;
+  }
+});
+
+Object.isExtensible(p); // TypeError est levée
+```
+
+## Spécifications
+
+| Spécification                                                                                                                                            | État                         | Commentaires         |
+| -------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName('ES2015', '#sec-proxy-object-internal-methods-and-internal-slots-isextensible', '[[IsExtensible]]')}}     | {{Spec2('ES2015')}}     | Définition initiale. |
+| {{SpecName('ESDraft', '#sec-proxy-object-internal-methods-and-internal-slots-isextensible', '[[IsExtensible]]')}} | {{Spec2('ESDraft')}} |                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Proxy.handler.isExtensible")}}
+
+## Voir aussi
+
+- {{jsxref("Proxy")}}
+- {{jsxref("Proxy.handler", "handler")}}
+- {{jsxref("Object.isExtensible()")}}
+- {{jsxref("Reflect.isExtensible()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/proxy/proxy/ownkeys/index.html b/files/fr/web/javascript/reference/global_objects/proxy/proxy/ownkeys/index.html
deleted file mode 100644
index 45365d9401..0000000000
--- a/files/fr/web/javascript/reference/global_objects/proxy/proxy/ownkeys/index.html
+++ /dev/null
@@ -1,133 +0,0 @@
----
-title: handler.ownKeys()
-slug: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/ownKeys
-tags:
-  - ECMAScript 2015
-  - JavaScript
-  - Méthode
-  - Proxy
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/ownKeys
-original_slug: Web/JavaScript/Reference/Objets_globaux/Proxy/handler/ownKeys
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <strong><code>handler.ownKeys()</code></strong> est une trappe pour {{jsxref("Object.getOwnPropertyNames()")}}.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/proxyhandler-ownkeys.html", "taller")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="brush: js">var p = new Proxy(cible, {
-  ownKeys: function(cible) {
-  }
-});
-</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<p>Le paramètre suivant est passé à la méthode <code>ownKeys</code>. <code>this</code> est lié au gestionnaire.</p>
-
-<dl>
- <dt><code>cible</code></dt>
- <dd>L'objet cible.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>La méthode <code>ownKeys</code> doit renvoyer un objet énumérable.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>La méthode <code><strong>handler.ownKeys()</strong></code> est une trappe pour intercepter les opérations de {{jsxref("Object.getOwnPropertyNames()")}}.</p>
-
-<h3 id="Interceptions">Interceptions</h3>
-
-<p>Cette trappe permet d'intercepter les opérations suivantes :</p>
-
-<ul>
- <li>{{jsxref("Object.getOwnPropertyNames()")}}</li>
- <li>{{jsxref("Object.getOwnPropertySymbols()")}}</li>
- <li>{{jsxref("Object.keys()")}}</li>
- <li>{{jsxref("Reflect.ownKeys()")}}</li>
-</ul>
-
-<h3 id="Invariants">Invariants</h3>
-
-<p>Si les invariants suivants ne sont pas respectés, le proxy renverra une exception {{jsxref("TypeError")}} :</p>
-
-<ul>
- <li>Le résultat de <code>ownKeys</code> doit être un tableau.</li>
- <li>Le type de chaque élément de ce tableau est soit une {{jsxref("String")}}, soit un {{jsxref("Symbol")}}.</li>
- <li>Le tableau résultant doit contenir les clés de toutes les propriétés propres non-configurables de l'objet cible.</li>
- <li>Si l'objet cible n'est pas extensible, la liste obtenue doit contenir toutes les clés pour les propriétés propres et aucune autre valeur.</li>
-</ul>
-
-<h2 id="Exemples">Exemples</h2>
-
-<p>Dans l'exemple suivant, on intercepte l'action de {{jsxref("Object.getOwnPropertyNames()")}}.</p>
-
-<pre class="brush: js">var p = new Proxy({}, {
-  ownKeys: function(target) {
-    console.log("appelée");
-    return ["a", "b", "c"];
-  }
-});
-
-console.log(Object.getOwnPropertyNames(p)); // "appelée"
-                                            // [ "a", "b", "c"]
-</pre>
-
-<p>L'exemple suivant ne respecte pas l'ensemble des invariants :</p>
-
-<pre class="brush: js  example-bad">var obj = {};
-Object.defineProperty(obj, "a", {
-  configurable: false,
-  enumerable: true,
-  value: 10 }
-);
-
-var p = new Proxy(obj, {
-  ownKeys: function(cible) {
-    return [123, 12.5, true, false, undefined, null, {}, []];
-  }
-});
-
-console.log(Object.getOwnPropertyNames(p));
-// TypeError est levée
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-proxy-object-internal-methods-and-internal-slots-ownpropertykeys', '[[OwnPropertyKeys]]')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-proxy-object-internal-methods-and-internal-slots-ownpropertykeys', '[[OwnPropertyKeys]]')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Proxy.handler.ownKeys")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Proxy")}}</li>
- <li>{{jsxref("Proxy.handler", "handler")}}</li>
- <li>{{jsxref("Object.getOwnPropertyNames()")}}</li>
- <li>{{jsxref("Reflect.ownKeys()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/proxy/proxy/ownkeys/index.md b/files/fr/web/javascript/reference/global_objects/proxy/proxy/ownkeys/index.md
new file mode 100644
index 0000000000..a2e36cefde
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/proxy/proxy/ownkeys/index.md
@@ -0,0 +1,113 @@
+---
+title: handler.ownKeys()
+slug: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/ownKeys
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Méthode
+  - Proxy
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/ownKeys
+original_slug: Web/JavaScript/Reference/Objets_globaux/Proxy/handler/ownKeys
+---
+{{JSRef}}
+
+La méthode **`handler.ownKeys()`** est une trappe pour {{jsxref("Object.getOwnPropertyNames()")}}.
+
+{{EmbedInteractiveExample("pages/js/proxyhandler-ownkeys.html", "taller")}}
+
+## Syntaxe
+
+```js
+var p = new Proxy(cible, {
+  ownKeys: function(cible) {
+  }
+});
+```
+
+### Paramètres
+
+Le paramètre suivant est passé à la méthode `ownKeys`. `this` est lié au gestionnaire.
+
+- `cible`
+  - : L'objet cible.
+
+### Valeur de retour
+
+La méthode `ownKeys` doit renvoyer un objet énumérable.
+
+## Description
+
+La méthode **`handler.ownKeys()`** est une trappe pour intercepter les opérations de {{jsxref("Object.getOwnPropertyNames()")}}.
+
+### Interceptions
+
+Cette trappe permet d'intercepter les opérations suivantes :
+
+- {{jsxref("Object.getOwnPropertyNames()")}}
+- {{jsxref("Object.getOwnPropertySymbols()")}}
+- {{jsxref("Object.keys()")}}
+- {{jsxref("Reflect.ownKeys()")}}
+
+### Invariants
+
+Si les invariants suivants ne sont pas respectés, le proxy renverra une exception {{jsxref("TypeError")}} :
+
+- Le résultat de `ownKeys` doit être un tableau.
+- Le type de chaque élément de ce tableau est soit une {{jsxref("String")}}, soit un {{jsxref("Symbol")}}.
+- Le tableau résultant doit contenir les clés de toutes les propriétés propres non-configurables de l'objet cible.
+- Si l'objet cible n'est pas extensible, la liste obtenue doit contenir toutes les clés pour les propriétés propres et aucune autre valeur.
+
+## Exemples
+
+Dans l'exemple suivant, on intercepte l'action de {{jsxref("Object.getOwnPropertyNames()")}}.
+
+```js
+var p = new Proxy({}, {
+  ownKeys: function(target) {
+    console.log("appelée");
+    return ["a", "b", "c"];
+  }
+});
+
+console.log(Object.getOwnPropertyNames(p)); // "appelée"
+                                            // [ "a", "b", "c"]
+```
+
+L'exemple suivant ne respecte pas l'ensemble des invariants :
+
+```js example-bad
+var obj = {};
+Object.defineProperty(obj, "a", {
+  configurable: false,
+  enumerable: true,
+  value: 10 }
+);
+
+var p = new Proxy(obj, {
+  ownKeys: function(cible) {
+    return [123, 12.5, true, false, undefined, null, {}, []];
+  }
+});
+
+console.log(Object.getOwnPropertyNames(p));
+// TypeError est levée
+```
+
+## Spécifications
+
+| Spécification                                                                                                                                                    | État                         | Commentaires         |
+| ---------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName('ES2015', '#sec-proxy-object-internal-methods-and-internal-slots-ownpropertykeys', '[[OwnPropertyKeys]]')}}     | {{Spec2('ES2015')}}     | Définition initiale. |
+| {{SpecName('ESDraft', '#sec-proxy-object-internal-methods-and-internal-slots-ownpropertykeys', '[[OwnPropertyKeys]]')}} | {{Spec2('ESDraft')}} |                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Proxy.handler.ownKeys")}}
+
+## Voir aussi
+
+- {{jsxref("Proxy")}}
+- {{jsxref("Proxy.handler", "handler")}}
+- {{jsxref("Object.getOwnPropertyNames()")}}
+- {{jsxref("Reflect.ownKeys()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/proxy/proxy/preventextensions/index.html b/files/fr/web/javascript/reference/global_objects/proxy/proxy/preventextensions/index.html
deleted file mode 100644
index 0add4d9608..0000000000
--- a/files/fr/web/javascript/reference/global_objects/proxy/proxy/preventextensions/index.html
+++ /dev/null
@@ -1,121 +0,0 @@
----
-title: handler.preventExtensions()
-slug: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/preventExtensions
-tags:
-  - ECMAScript 2015
-  - JavaScript
-  - Méthode
-  - Proxy
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/preventExtensions
-original_slug: Web/JavaScript/Reference/Objets_globaux/Proxy/handler/preventExtensions
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <strong><code>handler.preventExtensions()</code></strong> est une trappe pour {{jsxref("Object.preventExtensions()")}}.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/proxyhandler-preventextensions.html", "taller")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="brush: js">var p = new Proxy(cible, {
-  preventExtensions: function(cible) {
-  }
-});
-</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<p>Le paramètre suivant est passé à la méthode <code>preventExtensions</code>. <code>this</code> est lié au gestionnaire (<em>handler</em>).</p>
-
-<dl>
- <dt><code>cible</code></dt>
- <dd>L'objet cible.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>La méthode <code>preventExtensions</code> doit renvoyer une valeur booléenne.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>La méthode <code><strong>handler.preventExtensions()</strong></code> est une trappe pour intercepter {{jsxref("Object.preventExtensions()")}}.</p>
-
-<h3 id="Interceptions">Interceptions</h3>
-
-<p>Cette trappe peut intercepter les opérations de :</p>
-
-<ul>
- <li>{{jsxref("Object.preventExtensions()")}}</li>
- <li>{{jsxref("Reflect.preventExtensions()")}}</li>
-</ul>
-
-<h3 id="Invariants">Invariants</h3>
-
-<p>Si les invariants suivants ne sont pas respectés, le proxy renverra une execption {{jsxref("TypeError")}} :</p>
-
-<ul>
- <li><code>Object.preventExtensions(proxy)</code> ne renvoie <code>true</code> que si <code>Object.isExtensible(proxy)</code> vaut <code>false</code>.</li>
-</ul>
-
-<h2 id="Exemples">Exemples</h2>
-
-<p>On intercepte l'appel à {{jsxref("Object.preventExtensions()")}} dans l'exemple suivant :</p>
-
-<pre class="brush: js">var p = new Proxy({}, {
-  preventExtensions: function(cible) {
-    console.log("appelé");
-    Object.preventExtensions(cible);
-    return true;
-  }
-});
-
-console.log(Object.preventExtensions(p)); // "appelé"
-                                          // true
-</pre>
-
-<p>Le code suivant ne respecte pas l'invariant :</p>
-
-<pre class="brush: js">var p = new Proxy({}, {
-  preventExtensions: function(cible) {
-    return true;
-  }
-});
-
-Object.preventExtensions(p); // TypeError est levée
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-proxy-object-internal-methods-and-internal-slots-preventextensions', '[[PreventExtensions]]')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-proxy-object-internal-methods-and-internal-slots-preventextensions', '[[PreventExtensions]]')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Proxy.handler.preventExtensions")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Proxy")}}</li>
- <li>{{jsxref("Proxy.handler", "handler")}}</li>
- <li>{{jsxref("Object.preventExtensions()")}}</li>
- <li>{{jsxref("Reflect.preventExtensions()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/proxy/proxy/preventextensions/index.md b/files/fr/web/javascript/reference/global_objects/proxy/proxy/preventextensions/index.md
new file mode 100644
index 0000000000..5583e5c760
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/proxy/proxy/preventextensions/index.md
@@ -0,0 +1,101 @@
+---
+title: handler.preventExtensions()
+slug: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/preventExtensions
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Méthode
+  - Proxy
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/preventExtensions
+original_slug: Web/JavaScript/Reference/Objets_globaux/Proxy/handler/preventExtensions
+---
+{{JSRef}}
+
+La méthode **`handler.preventExtensions()`** est une trappe pour {{jsxref("Object.preventExtensions()")}}.
+
+{{EmbedInteractiveExample("pages/js/proxyhandler-preventextensions.html", "taller")}}
+
+## Syntaxe
+
+```js
+var p = new Proxy(cible, {
+  preventExtensions: function(cible) {
+  }
+});
+```
+
+### Paramètres
+
+Le paramètre suivant est passé à la méthode `preventExtensions`. `this` est lié au gestionnaire (_handler_).
+
+- `cible`
+  - : L'objet cible.
+
+### Valeur de retour
+
+La méthode `preventExtensions` doit renvoyer une valeur booléenne.
+
+## Description
+
+La méthode **`handler.preventExtensions()`** est une trappe pour intercepter {{jsxref("Object.preventExtensions()")}}.
+
+### Interceptions
+
+Cette trappe peut intercepter les opérations de :
+
+- {{jsxref("Object.preventExtensions()")}}
+- {{jsxref("Reflect.preventExtensions()")}}
+
+### Invariants
+
+Si les invariants suivants ne sont pas respectés, le proxy renverra une execption {{jsxref("TypeError")}} :
+
+- `Object.preventExtensions(proxy)` ne renvoie `true` que si `Object.isExtensible(proxy)` vaut `false`.
+
+## Exemples
+
+On intercepte l'appel à {{jsxref("Object.preventExtensions()")}} dans l'exemple suivant :
+
+```js
+var p = new Proxy({}, {
+  preventExtensions: function(cible) {
+    console.log("appelé");
+    Object.preventExtensions(cible);
+    return true;
+  }
+});
+
+console.log(Object.preventExtensions(p)); // "appelé"
+                                          // true
+```
+
+Le code suivant ne respecte pas l'invariant :
+
+```js
+var p = new Proxy({}, {
+  preventExtensions: function(cible) {
+    return true;
+  }
+});
+
+Object.preventExtensions(p); // TypeError est levée
+```
+
+## Spécifications
+
+| Spécification                                                                                                                                                        | État                         | Commentaires         |
+| -------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName('ES2015', '#sec-proxy-object-internal-methods-and-internal-slots-preventextensions', '[[PreventExtensions]]')}} | {{Spec2('ES2015')}}     | Définition initiale. |
+| {{SpecName('ESDraft', '#sec-proxy-object-internal-methods-and-internal-slots-preventextensions', '[[PreventExtensions]]')}} | {{Spec2('ESDraft')}} |                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Proxy.handler.preventExtensions")}}
+
+## Voir aussi
+
+- {{jsxref("Proxy")}}
+- {{jsxref("Proxy.handler", "handler")}}
+- {{jsxref("Object.preventExtensions()")}}
+- {{jsxref("Reflect.preventExtensions()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/proxy/proxy/set/index.html b/files/fr/web/javascript/reference/global_objects/proxy/proxy/set/index.html
deleted file mode 100644
index 543e1b4640..0000000000
--- a/files/fr/web/javascript/reference/global_objects/proxy/proxy/set/index.html
+++ /dev/null
@@ -1,121 +0,0 @@
----
-title: handler.set()
-slug: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/set
-tags:
-  - ECMAScript 2015
-  - JavaScript
-  - Méthode
-  - Proxy
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/set
-original_slug: Web/JavaScript/Reference/Objets_globaux/Proxy/handler/set
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <code><strong>handler.set()</strong></code> est une trappe permettant d'intercepter les opérations visant à définir ou modifier la valeur d'une propriété.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/proxyhandler-set.html", "taller")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="brush: js">var p = new Proxy(cible, {
-  set: function(cible, propriété, valeur, récepteur) {
-  }
-});
-</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<p>Les paramètres suivants sont passés à la méthode <code>set</code>. <code>this</code> est lié au gestionnaire.</p>
-
-<dl>
- <dt><code>cible</code></dt>
- <dd>L'objet cible.</dd>
- <dt><code>propriété</code></dt>
- <dd>Le nom ou le symbole ({{jsxref("Symbol")}}) de la propriété à définir.</dd>
- <dt><code>valeur</code></dt>
- <dd>La nouvelle valeur à définir pour la propriété.</dd>
- <dt><code>récepteur</code></dt>
- <dd>L'objet intialement visé par l'affectation. Généralement ce sera le proxy lui-même. Le gestionnaire <code>set</code> peut également être appelé indirectement, via la chaîne de prototypes ou d'autres façons. Par exemple, si on exécute l'instruction <code>obj.nom = "Jean"</code>, et qu'<code>obj</code> n'est pas un proxy ni ne possède de propriété <code>nom</code> mais s'il possède un proxy dans sa chaîne de prototypes, le gestionnaire <code>set</code> sera appelé et <code>obj</code> sera passé en tant que récepteur.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>La méthode <code>set</code> doit renvoyer une valeur booléenne. Elle renvoie <code>true</code> pour indiquer que l'affectation a réussi. Si la méthode <code>set</code> renvoie false et que l'affectation était exécutée dans du code en mode strict, une exception {{jsxref("TypeError")}} sera levée.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>La méthode <code><strong>handler.set</strong></code> est une trappe qui permet d'intercepter les opérations qui sont utilisées pour définir ou modifier la valeur d'une propriété.</p>
-
-<h3 id="Interceptions">Interceptions</h3>
-
-<p>Cette trappe permet d'intercepter les opérations suivantes :</p>
-
-<ul>
- <li>L'affectation à des propriétés : <code>proxy[toto] = truc</code> et <code>proxy.toto = truc</code></li>
- <li>L'affectation de propriétés héritées : <code>Object.create(proxy)[toto] = truc</code></li>
- <li>{{jsxref("Reflect.set()")}}</li>
-</ul>
-
-<h3 id="Invariants">Invariants</h3>
-
-<p>Si les invariants suivants ne sont pas respectés, le proxy renverra une exception {{jsxref("TypeError")}} :</p>
-
-<ul>
- <li>Il est impossible de modifier la valeur d'une propriété pour qu'elle soit différente de la valeur de la propriété correspondante de l'objet cible si celle-ci n'est pas accessible en lecture seule et est non-configurable (pour les propriétés de données).</li>
- <li>Il est impossible de modifier la valeur d'une propriété si la propriété correspondante de l'objet cible est une propriété d'accesseur/mutateur dont l'attribut [[Set]] vaut <code>undefined</code>.</li>
- <li>En mode strict, si le gestionnaire <code>set</code> renvoie une valeur fausse (dans un contexte booléen), cela lèvera une exception {{jsxref("TypeError")}}.</li>
-</ul>
-
-<h2 id="Exemples">Exemples</h2>
-
-<p>Dans l'exemple qui suit, on intercepte la définition d'une nouvelle propriété.</p>
-
-<pre class="brush: js">var p = new Proxy({}, {
-  set: function(target, prop, value, receiver) {
-    target[prop] = value;
-    console.log('property set: ' + prop + ' = ' + value);
-    return true;
-  }
-});
-
-console.log('a' in p);  // false
-
-p.a = 10;               // "property set: a = 10"
-console.log('a' in p);  // true
-console.log(p.a);       // 10
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-proxy-object-internal-methods-and-internal-slots-set-p-v-receiver', '[[Set]]')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-proxy-object-internal-methods-and-internal-slots-set-p-v-receiver', '[[Set]]')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Proxy.handler.set")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Proxy")}}</li>
- <li>{{jsxref("Proxy.handler", "handler")}}</li>
- <li>{{jsxref("Reflect.set()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/proxy/proxy/set/index.md b/files/fr/web/javascript/reference/global_objects/proxy/proxy/set/index.md
new file mode 100644
index 0000000000..544cc21fa2
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/proxy/proxy/set/index.md
@@ -0,0 +1,100 @@
+---
+title: handler.set()
+slug: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/set
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Méthode
+  - Proxy
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/set
+original_slug: Web/JavaScript/Reference/Objets_globaux/Proxy/handler/set
+---
+{{JSRef}}
+
+La méthode **`handler.set()`** est une trappe permettant d'intercepter les opérations visant à définir ou modifier la valeur d'une propriété.
+
+{{EmbedInteractiveExample("pages/js/proxyhandler-set.html", "taller")}}
+
+## Syntaxe
+
+```js
+var p = new Proxy(cible, {
+  set: function(cible, propriété, valeur, récepteur) {
+  }
+});
+```
+
+### Paramètres
+
+Les paramètres suivants sont passés à la méthode `set`. `this` est lié au gestionnaire.
+
+- `cible`
+  - : L'objet cible.
+- `propriété`
+  - : Le nom ou le symbole ({{jsxref("Symbol")}}) de la propriété à définir.
+- `valeur`
+  - : La nouvelle valeur à définir pour la propriété.
+- `récepteur`
+  - : L'objet intialement visé par l'affectation. Généralement ce sera le proxy lui-même. Le gestionnaire `set` peut également être appelé indirectement, via la chaîne de prototypes ou d'autres façons. Par exemple, si on exécute l'instruction `obj.nom = "Jean"`, et qu'`obj` n'est pas un proxy ni ne possède de propriété `nom` mais s'il possède un proxy dans sa chaîne de prototypes, le gestionnaire `set` sera appelé et `obj` sera passé en tant que récepteur.
+
+### Valeur de retour
+
+La méthode `set` doit renvoyer une valeur booléenne. Elle renvoie `true` pour indiquer que l'affectation a réussi. Si la méthode `set` renvoie false et que l'affectation était exécutée dans du code en mode strict, une exception {{jsxref("TypeError")}} sera levée.
+
+## Description
+
+La méthode **`handler.set`** est une trappe qui permet d'intercepter les opérations qui sont utilisées pour définir ou modifier la valeur d'une propriété.
+
+### Interceptions
+
+Cette trappe permet d'intercepter les opérations suivantes :
+
+- L'affectation à des propriétés : `proxy[toto] = truc` et `proxy.toto = truc`
+- L'affectation de propriétés héritées : `Object.create(proxy)[toto] = truc`
+- {{jsxref("Reflect.set()")}}
+
+### Invariants
+
+Si les invariants suivants ne sont pas respectés, le proxy renverra une exception {{jsxref("TypeError")}} :
+
+- Il est impossible de modifier la valeur d'une propriété pour qu'elle soit différente de la valeur de la propriété correspondante de l'objet cible si celle-ci n'est pas accessible en lecture seule et est non-configurable (pour les propriétés de données).
+- Il est impossible de modifier la valeur d'une propriété si la propriété correspondante de l'objet cible est une propriété d'accesseur/mutateur dont l'attribut \[\[Set]] vaut `undefined`.
+- En mode strict, si le gestionnaire `set` renvoie une valeur fausse (dans un contexte booléen), cela lèvera une exception {{jsxref("TypeError")}}.
+
+## Exemples
+
+Dans l'exemple qui suit, on intercepte la définition d'une nouvelle propriété.
+
+```js
+var p = new Proxy({}, {
+  set: function(target, prop, value, receiver) {
+    target[prop] = value;
+    console.log('property set: ' + prop + ' = ' + value);
+    return true;
+  }
+});
+
+console.log('a' in p);  // false
+
+p.a = 10;               // "property set: a = 10"
+console.log('a' in p);  // true
+console.log(p.a);       // 10
+```
+
+## Spécifications
+
+| Spécification                                                                                                                                    | État                         | Commentaires         |
+| ------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------- | -------------------- |
+| {{SpecName('ES2015', '#sec-proxy-object-internal-methods-and-internal-slots-set-p-v-receiver', '[[Set]]')}} | {{Spec2('ES2015')}}     | Définition initiale. |
+| {{SpecName('ESDraft', '#sec-proxy-object-internal-methods-and-internal-slots-set-p-v-receiver', '[[Set]]')}} | {{Spec2('ESDraft')}} |                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Proxy.handler.set")}}
+
+## Voir aussi
+
+- {{jsxref("Proxy")}}
+- {{jsxref("Proxy.handler", "handler")}}
+- {{jsxref("Reflect.set()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/proxy/proxy/setprototypeof/index.html b/files/fr/web/javascript/reference/global_objects/proxy/proxy/setprototypeof/index.html
deleted file mode 100644
index e12a4e6f90..0000000000
--- a/files/fr/web/javascript/reference/global_objects/proxy/proxy/setprototypeof/index.html
+++ /dev/null
@@ -1,133 +0,0 @@
----
-title: handler.setPrototypeOf()
-slug: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/setPrototypeOf
-tags:
-  - ECMAScript 2015
-  - JavaScript
-  - Méthode
-  - Proxy
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/setPrototypeOf
-original_slug: Web/JavaScript/Reference/Objets_globaux/Proxy/handler/setPrototypeOf
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <strong><code>handler.setPrototypeOf()</code></strong> est une trappe pour intercepter {{jsxref("Object.setPrototypeOf()")}}.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/proxyhandler-setprototypeof.html", "taller", "taller")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="brush: js">var p = new Proxy(cible, {
-  setPrototypeOf: function(cible, prototype) {
-  }
-});
-</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<p>Les paramètres suivants sont passés à la méthode <code>setPrototypeOf</code>. <code>this</code> est lié au gestionnaire.</p>
-
-<dl>
- <dt><code>cible</code></dt>
- <dd>L'objet cible.</dd>
- <dt><code>prototype</code></dt>
- <dd>Le nouveau prototype de l'objet ou <code>null</code>.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>La méthode <code>setPrototypeOf</code> renvoie <code>true</code> si la propriété interne <code>[[Prototype]]</code> a bien été modifiée et <code>false</code> sinon.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>La méthode <code><strong>handler.setPrototypeOf</strong></code> est une trappe utilisée pour intercepter les opérations de {{jsxref("Object.setPrototypeOf()")}}.</p>
-
-<h3 id="Interceptions">Interceptions</h3>
-
-<p>Cette trappe permet d'intercepter :</p>
-
-<ul>
- <li>{{jsxref("Object.setPrototypeOf()")}}</li>
- <li>{{jsxref("Reflect.setPrototypeOf()")}}</li>
-</ul>
-
-<h3 id="Invariants">Invariants</h3>
-
-<p>Si les invariants suivants ne sont pas respectés, le proxy renverra une exception {{jsxref("TypeError")}} :</p>
-
-<ul>
- <li>Si <code>cible</code> n'est pas extensible, le paramètre <code>prototype</code> doit être le même valeur que <code>Object.getPrototypeOf(cible)</code>.</li>
-</ul>
-
-<h2 id="Exemples">Exemples</h2>
-
-<p>Si on souhaite interdire la définition d'un nouveau prototype pour un objet, on peut utiliser une méthode <code>setPrototypeOf</code> qui renvoie <code>false</code> ou qui génère une exception.</p>
-
-<p>Avec cette première approche, toute opération qui voudra modifier le prototype génèrera une exception. On aura par exemple {{jsxref("Object.setPrototypeOf()")}} qui créera et lèvera l'exception <code>TypeError</code>. Si la modification est effectuée par une opération qui ne génère pas d'exception en cas d'échec (comme  {{jsxref("Reflect.setPrototypeOf()")}}), aucune exception ne sera générée.</p>
-
-<pre class="brush: js">var handlerReturnsFalse = {
-    setPrototypeOf(target, newProto) {
-        return false;
-    }
-};
-
-var newProto = {}, target = {};
-
-var p1 = new Proxy(target, handlerReturnsFalse);
-Object.setPrototypeOf(p1, newProto);
-// lève une TypeError
-Reflect.setPrototypeOf(p1, newProto);
-// renvoie false
-</pre>
-
-<p>Avec cette seconde approche, toute tentative de modification génèrera une exception. On utilisera celle-ci lorsqu'on souhaite qu'une erreur se produisent, y compris pour les opérations qui ne génèrent habituellement pas d'exception ou si on souhaite générer une exception sur mesure.</p>
-
-<pre class="brush: js">var handlerThrows = {
-    setPrototypeOf(target, newProto) {
-        throw new Error("erreur custom");
-    }
-};
-
-var newProto = {}, target = {};
-
-var p2 = new Proxy(target, handlerThrows);
-Object.setPrototypeOf(p2, newProto);
-// lève une exception new Error("erreur custom")
-Reflect.setPrototypeOf(p2, newProto);
-// lève une exception new Error("erreur custom")</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-proxy-object-internal-methods-and-internal-slots-setprototypeof-v', '[[SetPrototypeOf]]')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-proxy-object-internal-methods-and-internal-slots-setprototypeof-v', '[[SetPrototypeOf]]')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Proxy.handler.setPrototypeOf")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Proxy")}}</li>
- <li>{{jsxref("Proxy.handler", "handler")}}</li>
- <li>{{jsxref("Object.setPrototypeOf()")}}</li>
- <li>{{jsxref("Reflect.setPrototypeOf()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/proxy/proxy/setprototypeof/index.md b/files/fr/web/javascript/reference/global_objects/proxy/proxy/setprototypeof/index.md
new file mode 100644
index 0000000000..104f392d73
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/proxy/proxy/setprototypeof/index.md
@@ -0,0 +1,114 @@
+---
+title: handler.setPrototypeOf()
+slug: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/setPrototypeOf
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Méthode
+  - Proxy
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/setPrototypeOf
+original_slug: Web/JavaScript/Reference/Objets_globaux/Proxy/handler/setPrototypeOf
+---
+{{JSRef}}
+
+La méthode **`handler.setPrototypeOf()`** est une trappe pour intercepter {{jsxref("Object.setPrototypeOf()")}}.
+
+{{EmbedInteractiveExample("pages/js/proxyhandler-setprototypeof.html", "taller", "taller")}}
+
+## Syntaxe
+
+```js
+var p = new Proxy(cible, {
+  setPrototypeOf: function(cible, prototype) {
+  }
+});
+```
+
+### Paramètres
+
+Les paramètres suivants sont passés à la méthode `setPrototypeOf`. `this` est lié au gestionnaire.
+
+- `cible`
+  - : L'objet cible.
+- `prototype`
+  - : Le nouveau prototype de l'objet ou `null`.
+
+### Valeur de retour
+
+La méthode `setPrototypeOf` renvoie `true` si la propriété interne `[[Prototype]]` a bien été modifiée et `false` sinon.
+
+## Description
+
+La méthode **`handler.setPrototypeOf`** est une trappe utilisée pour intercepter les opérations de {{jsxref("Object.setPrototypeOf()")}}.
+
+### Interceptions
+
+Cette trappe permet d'intercepter :
+
+- {{jsxref("Object.setPrototypeOf()")}}
+- {{jsxref("Reflect.setPrototypeOf()")}}
+
+### Invariants
+
+Si les invariants suivants ne sont pas respectés, le proxy renverra une exception {{jsxref("TypeError")}} :
+
+- Si `cible` n'est pas extensible, le paramètre `prototype` doit être le même valeur que `Object.getPrototypeOf(cible)`.
+
+## Exemples
+
+Si on souhaite interdire la définition d'un nouveau prototype pour un objet, on peut utiliser une méthode `setPrototypeOf` qui renvoie `false` ou qui génère une exception.
+
+Avec cette première approche, toute opération qui voudra modifier le prototype génèrera une exception. On aura par exemple {{jsxref("Object.setPrototypeOf()")}} qui créera et lèvera l'exception `TypeError`. Si la modification est effectuée par une opération qui ne génère pas d'exception en cas d'échec (comme  {{jsxref("Reflect.setPrototypeOf()")}}), aucune exception ne sera générée.
+
+```js
+var handlerReturnsFalse = {
+    setPrototypeOf(target, newProto) {
+        return false;
+    }
+};
+
+var newProto = {}, target = {};
+
+var p1 = new Proxy(target, handlerReturnsFalse);
+Object.setPrototypeOf(p1, newProto);
+// lève une TypeError
+Reflect.setPrototypeOf(p1, newProto);
+// renvoie false
+```
+
+Avec cette seconde approche, toute tentative de modification génèrera une exception. On utilisera celle-ci lorsqu'on souhaite qu'une erreur se produisent, y compris pour les opérations qui ne génèrent habituellement pas d'exception ou si on souhaite générer une exception sur mesure.
+
+```js
+var handlerThrows = {
+    setPrototypeOf(target, newProto) {
+        throw new Error("erreur custom");
+    }
+};
+
+var newProto = {}, target = {};
+
+var p2 = new Proxy(target, handlerThrows);
+Object.setPrototypeOf(p2, newProto);
+// lève une exception new Error("erreur custom")
+Reflect.setPrototypeOf(p2, newProto);
+// lève une exception new Error("erreur custom")
+```
+
+## Spécifications
+
+| Spécification                                                                                                                                                    | État                         | Commentaires         |
+| ---------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName('ES2015', '#sec-proxy-object-internal-methods-and-internal-slots-setprototypeof-v', '[[SetPrototypeOf]]')}}     | {{Spec2('ES2015')}}     | Définition initiale. |
+| {{SpecName('ESDraft', '#sec-proxy-object-internal-methods-and-internal-slots-setprototypeof-v', '[[SetPrototypeOf]]')}} | {{Spec2('ESDraft')}} |                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Proxy.handler.setPrototypeOf")}}
+
+## Voir aussi
+
+- {{jsxref("Proxy")}}
+- {{jsxref("Proxy.handler", "handler")}}
+- {{jsxref("Object.setPrototypeOf()")}}
+- {{jsxref("Reflect.setPrototypeOf()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/proxy/revocable/index.html b/files/fr/web/javascript/reference/global_objects/proxy/revocable/index.html
deleted file mode 100644
index de489f2172..0000000000
--- a/files/fr/web/javascript/reference/global_objects/proxy/revocable/index.html
+++ /dev/null
@@ -1,91 +0,0 @@
----
-title: Proxy.revocable()
-slug: Web/JavaScript/Reference/Global_Objects/Proxy/revocable
-tags:
-  - ECMAScript 2015
-  - JavaScript
-  - Méthode
-  - Proxy
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Proxy/revocable
-original_slug: Web/JavaScript/Reference/Objets_globaux/Proxy/revocable
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <code><strong>Proxy.revocable()</strong></code> est utilisée afin de créer un objet {{jsxref("Proxy")}} révocable.</p>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">Proxy.revocable(cible, gestionnaire);
-</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<div>{{Page("/fr/docs/Web/JavaScript/Reference/Objets_globaux/Proxy", "Paramètres")}}</div>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Un nouvel objet <code>Proxy</code> révocable est renvoyé par la méthode.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>Un <code>Proxy</code> révocable est un objet qui possède les propriétés suivantes : <code>{proxy: proxy, revoke: revoke}</code>.</p>
-
-<dl>
- <dt><code>proxy</code></dt>
- <dd>Un proxy crée avec un appel à <code>new Proxy(cible, gestionnaire)</code>.</dd>
- <dt><code>revoke</code></dt>
- <dd>Une fonction sans argument qui permet de désactiver le proxy.</dd>
-</dl>
-
-<p>Si la fonction <code>revoke()</code> est appelée, le proxy devient inutilisable et toutes les trappes définies via un gestionnaire lèveront une exception {{jsxref("TypeError")}}. Une fois que le proxy est révoqué, il conserve cet état et peut être traité par le ramasse-miettes. D'éventuels appels suivants à <code>revoke()</code> n'auront aucun effet.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<pre class="brush: js">var révocable = Proxy.revocable({}, {
-  get: function(cible, nom) {
-    return "[[" + nom + "]]";
-  }
-});
-var proxy = révocable.proxy;
-console.log(proxy.toto); // "[[toto]]"
-
-révocable.revoke();
-
-console.log(proxy.toto); // TypeError est levée
-proxy.toto = 1           // TypeError à nouveau
-delete proxy.toto        // TypeError toujours
-typeof proxy             // "object", typeof ne déclenche aucune trappe
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-proxy.revocable', 'Proxy Revocation Functions')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-proxy.revocable', 'Proxy Revocation Functions')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Proxy.revocable")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Proxy")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/proxy/revocable/index.md b/files/fr/web/javascript/reference/global_objects/proxy/revocable/index.md
new file mode 100644
index 0000000000..376cf22348
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/proxy/revocable/index.md
@@ -0,0 +1,72 @@
+---
+title: Proxy.revocable()
+slug: Web/JavaScript/Reference/Global_Objects/Proxy/revocable
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Méthode
+  - Proxy
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Proxy/revocable
+original_slug: Web/JavaScript/Reference/Objets_globaux/Proxy/revocable
+---
+{{JSRef}}
+
+La méthode **`Proxy.revocable()`** est utilisée afin de créer un objet {{jsxref("Proxy")}} révocable.
+
+## Syntaxe
+
+    Proxy.revocable(cible, gestionnaire);
+
+### Paramètres
+
+{{Page("/fr/docs/Web/JavaScript/Reference/Objets_globaux/Proxy", "Paramètres")}}
+
+### Valeur de retour
+
+Un nouvel objet `Proxy` révocable est renvoyé par la méthode.
+
+## Description
+
+Un `Proxy` révocable est un objet qui possède les propriétés suivantes : `{proxy: proxy, revoke: revoke}`.
+
+- `proxy`
+  - : Un proxy crée avec un appel à `new Proxy(cible, gestionnaire)`.
+- `revoke`
+  - : Une fonction sans argument qui permet de désactiver le proxy.
+
+Si la fonction `revoke()` est appelée, le proxy devient inutilisable et toutes les trappes définies via un gestionnaire lèveront une exception {{jsxref("TypeError")}}. Une fois que le proxy est révoqué, il conserve cet état et peut être traité par le ramasse-miettes. D'éventuels appels suivants à `revoke()` n'auront aucun effet.
+
+## Exemples
+
+```js
+var révocable = Proxy.revocable({}, {
+  get: function(cible, nom) {
+    return "[[" + nom + "]]";
+  }
+});
+var proxy = révocable.proxy;
+console.log(proxy.toto); // "[[toto]]"
+
+révocable.revoke();
+
+console.log(proxy.toto); // TypeError est levée
+proxy.toto = 1           // TypeError à nouveau
+delete proxy.toto        // TypeError toujours
+typeof proxy             // "object", typeof ne déclenche aucune trappe
+```
+
+## Spécifications
+
+| Spécification                                                                                            | État                         | Commentaires         |
+| -------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName('ES2015', '#sec-proxy.revocable', 'Proxy Revocation Functions')}}     | {{Spec2('ES2015')}}     | Définition initiale. |
+| {{SpecName('ESDraft', '#sec-proxy.revocable', 'Proxy Revocation Functions')}} | {{Spec2('ESDraft')}} |                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Proxy.revocable")}}
+
+## Voir aussi
+
+- {{jsxref("Proxy")}}
diff --git a/files/fr/web/javascript/reference/global_objects/rangeerror/index.html b/files/fr/web/javascript/reference/global_objects/rangeerror/index.html
deleted file mode 100644
index c1ab8a2d00..0000000000
--- a/files/fr/web/javascript/reference/global_objects/rangeerror/index.html
+++ /dev/null
@@ -1,141 +0,0 @@
----
-title: RangeError
-slug: Web/JavaScript/Reference/Global_Objects/RangeError
-tags:
-  - Error
-  - JavaScript
-  - RangeError
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/RangeError
-original_slug: Web/JavaScript/Reference/Objets_globaux/RangeError
----
-<div>{{JSRef}}</div>
-
-<p>L'objet <code><strong>RangeError</strong></code> permet d'indiquer une erreur lorsqu'une valeur fournie n'appartient pas à l'intervalle autorisé.</p>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">new RangeError([<var>message</var>[, nomFichier[, numLigne]]])</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>message</code></dt>
- <dd>Paramètre optionnel. Une description lisible (humainement) de l'erreur.</dd>
- <dt><code>nomFichier</code> {{non-standard_inline}}</dt>
- <dd>Paramètre optionnel. Le nom du fichier contenant le code à l'origine de cette exception.</dd>
- <dt><code>numLigne </code>{{non-standard_inline}}</dt>
- <dd>Paramètre optionnel. Le numéro de la ligne du code à l'origine de cette exception.</dd>
-</dl>
-
-<h2 id="Description">Description</h2>
-
-<p>Une exception <code>RangeError</code> est levée lorsqu'une valeur est passée comme argument à une fonction qui n'accepte pas de valeurs dans cet intervalle. Par exemple, cela peut être le cas quand on souhaite créer un tableau avec une longueur illégale via {{jsxref("Array")}} ou lorsqu'on passe des valeurs incorrectes aux méthodes {{jsxref("Number.toExponential()")}}, {{jsxref("Number.toFixed()")}} ou {{jsxref("Number.toPrecision()")}}. Cette exception n'est pas limitée aux problèmes d'intervalles numériques et peuvent également se produire lorsqu'on passe une valeur non autorisée à {{jsxref("String.prototype.normalize()")}}.</p>
-
-<h2 id="Propriétés">Propriétés</h2>
-
-<dl>
- <dt>{{jsxref("RangeError.prototype")}}</dt>
- <dd>Cette propriété permet d'ajouter des propriétés à toutes les instances de <code>RangeError</code>.</dd>
-</dl>
-
-<h2 id="Méthodes">Méthodes</h2>
-
-<p>L'objet global <code>RangeError</code> ne contient pas de méthodes propres mais héritent de certaines méthodes via la chaîne de prototypes.</p>
-
-<h2 id="Instances_de_RangeError">Instances de <code>RangeError</code></h2>
-
-<h3 id="Propriétés_2">Propriétés</h3>
-
-<p>{{ page('/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object/RangeError/prototype','Properties') }}</p>
-
-<h3 id="Méthodes_2">Méthodes</h3>
-
-<p>{{ page('/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object/RangeError/prototype','Methods') }}</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Utiliser_RangeError">Utiliser <code>RangeError</code></h3>
-
-<pre class="brush: js">var MIN = 200;
-var MAX = 300;
-var vérifier = function( num ) {
-  if( num &lt; MIN || num &gt; MAX ) {
-    throw new RangeError( "Le paramètre doit être compris entre " + MIN + " et " + MAX );
-  }
-};
-
-try {
-  vérifier(500);
-}
-catch (e) {
-  if (e instanceof RangeError ){
-    // On gère ce qui se passe en cas d'erreur
-  }
-}</pre>
-
-<h3 id="Utiliser_RangeError_avec_des_valeurs_non-numériques">Utiliser <code>RangeError</code> avec des valeurs non-numériques</h3>
-
-<pre class="brush: js">function verifier(valeur){
-  if(["pomme", "banane", "carotte"].includes(valeur) === false){
-    throw new RangeError("L'argument n'est pas un fruit parmi pomme / banane ou carotte.");
-  }
-}
-
-try {
-  verifier("chou");
-}
-catch(erreur) {
-  if(erreur instanceof RangeError){
-    //On gère ce qui se passe en cas d'erreur
-  }
-}
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES3')}}</td>
-   <td>{{Spec2('ES3')}}</td>
-   <td>Définition initiale.</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>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-native-error-types-used-in-this-standard-rangeerror', 'RangeError')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.RangeError")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Error")}}</li>
- <li>{{jsxref("Array")}}</li>
- <li>{{jsxref("RangeError.prototype")}}</li>
- <li>{{jsxref("Number.toExponential()")}}</li>
- <li>{{jsxref("Number.toFixed()")}}</li>
- <li>{{jsxref("Number.toPrecision()")}}</li>
- <li>{{jsxref("String.prototype.normalize()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/rangeerror/index.md b/files/fr/web/javascript/reference/global_objects/rangeerror/index.md
new file mode 100644
index 0000000000..6716e5b2f9
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/rangeerror/index.md
@@ -0,0 +1,115 @@
+---
+title: RangeError
+slug: Web/JavaScript/Reference/Global_Objects/RangeError
+tags:
+  - Error
+  - JavaScript
+  - RangeError
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/RangeError
+original_slug: Web/JavaScript/Reference/Objets_globaux/RangeError
+---
+{{JSRef}}
+
+L'objet **`RangeError`** permet d'indiquer une erreur lorsqu'une valeur fournie n'appartient pas à l'intervalle autorisé.
+
+## Syntaxe
+
+    new RangeError([message[, nomFichier[, numLigne]]])
+
+### Paramètres
+
+- `message`
+  - : Paramètre optionnel. Une description lisible (humainement) de l'erreur.
+- `nomFichier` {{non-standard_inline}}
+  - : Paramètre optionnel. Le nom du fichier contenant le code à l'origine de cette exception.
+- `numLigne `{{non-standard_inline}}
+  - : Paramètre optionnel. Le numéro de la ligne du code à l'origine de cette exception.
+
+## Description
+
+Une exception `RangeError` est levée lorsqu'une valeur est passée comme argument à une fonction qui n'accepte pas de valeurs dans cet intervalle. Par exemple, cela peut être le cas quand on souhaite créer un tableau avec une longueur illégale via {{jsxref("Array")}} ou lorsqu'on passe des valeurs incorrectes aux méthodes {{jsxref("Number.toExponential()")}}, {{jsxref("Number.toFixed()")}} ou {{jsxref("Number.toPrecision()")}}. Cette exception n'est pas limitée aux problèmes d'intervalles numériques et peuvent également se produire lorsqu'on passe une valeur non autorisée à {{jsxref("String.prototype.normalize()")}}.
+
+## Propriétés
+
+- {{jsxref("RangeError.prototype")}}
+  - : Cette propriété permet d'ajouter des propriétés à toutes les instances de `RangeError`.
+
+## Méthodes
+
+L'objet global `RangeError` ne contient pas de méthodes propres mais héritent de certaines méthodes via la chaîne de prototypes.
+
+## Instances de `RangeError`
+
+### Propriétés
+
+{{ page('/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object/RangeError/prototype','Properties') }}
+
+### Méthodes
+
+{{ page('/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object/RangeError/prototype','Methods') }}
+
+## Exemples
+
+### Utiliser `RangeError`
+
+```js
+var MIN = 200;
+var MAX = 300;
+var vérifier = function( num ) {
+  if( num < MIN || num > MAX ) {
+    throw new RangeError( "Le paramètre doit être compris entre " + MIN + " et " + MAX );
+  }
+};
+
+try {
+  vérifier(500);
+}
+catch (e) {
+  if (e instanceof RangeError ){
+    // On gère ce qui se passe en cas d'erreur
+  }
+}
+```
+
+### Utiliser `RangeError` avec des valeurs non-numériques
+
+```js
+function verifier(valeur){
+  if(["pomme", "banane", "carotte"].includes(valeur) === false){
+    throw new RangeError("L'argument n'est pas un fruit parmi pomme / banane ou carotte.");
+  }
+}
+
+try {
+  verifier("chou");
+}
+catch(erreur) {
+  if(erreur instanceof RangeError){
+    //On gère ce qui se passe en cas d'erreur
+  }
+}
+```
+
+## Spécifications
+
+| Spécification                                                                                                                    | État                         | Commentaires         |
+| -------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName('ES3')}}                                                                                                         | {{Spec2('ES3')}}         | Définition initiale. |
+| {{SpecName('ES5.1', '#sec-15.11.6.2', 'RangeError')}}                                                         | {{Spec2('ES5.1')}}     |                      |
+| {{SpecName('ES6', '#sec-native-error-types-used-in-this-standard-rangeerror', 'RangeError')}}     | {{Spec2('ES6')}}         |                      |
+| {{SpecName('ESDraft', '#sec-native-error-types-used-in-this-standard-rangeerror', 'RangeError')}} | {{Spec2('ESDraft')}} |                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.RangeError")}}
+
+## Voir aussi
+
+- {{jsxref("Error")}}
+- {{jsxref("Array")}}
+- {{jsxref("RangeError.prototype")}}
+- {{jsxref("Number.toExponential()")}}
+- {{jsxref("Number.toFixed()")}}
+- {{jsxref("Number.toPrecision()")}}
+- {{jsxref("String.prototype.normalize()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/referenceerror/index.html b/files/fr/web/javascript/reference/global_objects/referenceerror/index.html
deleted file mode 100644
index 7e9f25a051..0000000000
--- a/files/fr/web/javascript/reference/global_objects/referenceerror/index.html
+++ /dev/null
@@ -1,128 +0,0 @@
----
-title: ReferenceError
-slug: Web/JavaScript/Reference/Global_Objects/ReferenceError
-tags:
-  - Error
-  - JavaScript
-  - Object
-  - Reference
-  - ReferenceError
-translation_of: Web/JavaScript/Reference/Global_Objects/ReferenceError
-original_slug: Web/JavaScript/Reference/Objets_globaux/ReferenceError
----
-<div>{{JSRef}}</div>
-
-<p>L'objet <code><strong>ReferenceError</strong></code> représente une erreur qui se produit lorsqu'il est fait référence à une variable qui n'existe pas.</p>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">new ReferenceError(<var>[message[, nomFichier[, numLigne]]]</var>)</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>message</code></dt>
- <dd>Paramètre optionnel. Une description de l'erreur, lisible par un être humain.</dd>
- <dt><code>nomFichier</code> {{Non-standard_inline}}</dt>
- <dd>Paramètre optionnel. Le nom du fichier qui contient le code à l'origine de l'exception.</dd>
- <dt><code>numLigne</code> {{Non-standard_inline}}</dt>
- <dd>Paramètre optionnel. Le numéro de ligne dans le fichier qui contient le code à l'origine de l'exception.</dd>
-</dl>
-
-<h2 id="Description">Description</h2>
-
-<p>Une exception <code>ReferenceError</code> est lancée quand on tente de faire référence à une variable qui n'a pas été déclarée.</p>
-
-<h2 id="Propriétés">Propriétés</h2>
-
-<dl>
- <dt>{{jsxref("ReferenceError.prototype")}}</dt>
- <dd>Cette propriété permet d'ajouter des propriétés à un objet <code>ReferenceError</code>.</dd>
-</dl>
-
-<h2 id="Méthodes">Méthodes</h2>
-
-<p>L'objet global <code>ReferenceError</code> ne contient aucune méthode qui lui soit propre. En revanche, il hérite de certaines méthodes via l'héritage et sa chaîne de prototypes.</p>
-
-<h2 id="Instances_de_ReferenceError">Instances de <code>ReferenceError</code></h2>
-
-<h3 id="Propriétés_2">Propriétés</h3>
-
-<div>{{page('fr/docs/Web/JavaScript/Reference/Objets_globaux/ReferenceError/prototype','Properties')}}</div>
-
-<h3 id="Méthodes_2">Méthodes</h3>
-
-<div>{{page('fr/docs/Web/JavaScript/Reference/Objets_globaux/ReferenceError/prototype','M.C3.A9thodes')}}</div>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Intercepter_une_exception_ReferenceError">Intercepter une exception ReferenceError</h3>
-
-<pre class="brush: js">try {
-  var a = variableNonDéfinie;
-} catch (e) {
-  console.log(e instanceof ReferenceError); // true
-  console.log(e.message);                   // "variableNonDéfinie is not defined"
-  console.log(e.name);                      // "ReferenceError"
-  console.log(e.fileName);                  // "Scratchpad/1"
-  console.log(e.lineNumber);                // 2
-  console.log(e.columnNumber);              // 6
-  console.log(e.stack);                     // "@Scratchpad/2:2:7\n"
-}</pre>
-
-<h3 id="Créer_une_exception_ReferenceError">Créer une exception <code>ReferenceError</code></h3>
-
-<pre class="brush: js">try {
-  throw new ReferenceError('Bonjour', 'unFichier.js', 10);
-} catch (e) {
-  console.log(e instanceof ReferenceError); // true
-  console.log(e.message);                   // "Bonjour"
-  console.log(e.name);                      // "ReferenceError"
-  console.log(e.fileName);                  // "unFichier.js"
-  console.log(e.lineNumber);                // 10
-  console.log(e.columnNumber);              // 0
-  console.log(e.stack);                     // "@Scratchpad/2:2:9\n"
-}</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES3')}}</td>
-   <td>{{Spec2('ES3')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-15.11.6.3', 'ReferenceError')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-native-error-types-used-in-this-standard-referenceerror', 'ReferenceError')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-native-error-types-used-in-this-standard-referenceerror', 'ReferenceError')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.ReferenceError")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Error")}}</li>
- <li>{{jsxref("ReferenceError.prototype")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/referenceerror/index.md b/files/fr/web/javascript/reference/global_objects/referenceerror/index.md
new file mode 100644
index 0000000000..6aeba987ce
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/referenceerror/index.md
@@ -0,0 +1,103 @@
+---
+title: ReferenceError
+slug: Web/JavaScript/Reference/Global_Objects/ReferenceError
+tags:
+  - Error
+  - JavaScript
+  - Object
+  - Reference
+  - ReferenceError
+translation_of: Web/JavaScript/Reference/Global_Objects/ReferenceError
+original_slug: Web/JavaScript/Reference/Objets_globaux/ReferenceError
+---
+{{JSRef}}
+
+L'objet **`ReferenceError`** représente une erreur qui se produit lorsqu'il est fait référence à une variable qui n'existe pas.
+
+## Syntaxe
+
+    new ReferenceError([message[, nomFichier[, numLigne]]])
+
+### Paramètres
+
+- `message`
+  - : Paramètre optionnel. Une description de l'erreur, lisible par un être humain.
+- `nomFichier` {{Non-standard_inline}}
+  - : Paramètre optionnel. Le nom du fichier qui contient le code à l'origine de l'exception.
+- `numLigne` {{Non-standard_inline}}
+  - : Paramètre optionnel. Le numéro de ligne dans le fichier qui contient le code à l'origine de l'exception.
+
+## Description
+
+Une exception `ReferenceError` est lancée quand on tente de faire référence à une variable qui n'a pas été déclarée.
+
+## Propriétés
+
+- {{jsxref("ReferenceError.prototype")}}
+  - : Cette propriété permet d'ajouter des propriétés à un objet `ReferenceError`.
+
+## Méthodes
+
+L'objet global `ReferenceError` ne contient aucune méthode qui lui soit propre. En revanche, il hérite de certaines méthodes via l'héritage et sa chaîne de prototypes.
+
+## Instances de `ReferenceError`
+
+### Propriétés
+
+{{page('fr/docs/Web/JavaScript/Reference/Objets_globaux/ReferenceError/prototype','Properties')}}
+
+### Méthodes
+
+{{page('fr/docs/Web/JavaScript/Reference/Objets_globaux/ReferenceError/prototype','M.C3.A9thodes')}}
+
+## Exemples
+
+### Intercepter une exception ReferenceError
+
+```js
+try {
+  var a = variableNonDéfinie;
+} catch (e) {
+  console.log(e instanceof ReferenceError); // true
+  console.log(e.message);                   // "variableNonDéfinie is not defined"
+  console.log(e.name);                      // "ReferenceError"
+  console.log(e.fileName);                  // "Scratchpad/1"
+  console.log(e.lineNumber);                // 2
+  console.log(e.columnNumber);              // 6
+  console.log(e.stack);                     // "@Scratchpad/2:2:7\n"
+}
+```
+
+### Créer une exception `ReferenceError`
+
+```js
+try {
+  throw new ReferenceError('Bonjour', 'unFichier.js', 10);
+} catch (e) {
+  console.log(e instanceof ReferenceError); // true
+  console.log(e.message);                   // "Bonjour"
+  console.log(e.name);                      // "ReferenceError"
+  console.log(e.fileName);                  // "unFichier.js"
+  console.log(e.lineNumber);                // 10
+  console.log(e.columnNumber);              // 0
+  console.log(e.stack);                     // "@Scratchpad/2:2:9\n"
+}
+```
+
+## Spécifications
+
+| Spécification                                                                                                                                | Statut                       | Commentaires         |
+| -------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName('ES3')}}                                                                                                                     | {{Spec2('ES3')}}         | Définition initiale. |
+| {{SpecName('ES5.1', '#sec-15.11.6.3', 'ReferenceError')}}                                                                 | {{Spec2('ES5.1')}}     |                      |
+| {{SpecName('ES6', '#sec-native-error-types-used-in-this-standard-referenceerror', 'ReferenceError')}}     | {{Spec2('ES6')}}         |                      |
+| {{SpecName('ESDraft', '#sec-native-error-types-used-in-this-standard-referenceerror', 'ReferenceError')}} | {{Spec2('ESDraft')}} |                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.ReferenceError")}}
+
+## Voir aussi
+
+- {{jsxref("Error")}}
+- {{jsxref("ReferenceError.prototype")}}
diff --git a/files/fr/web/javascript/reference/global_objects/reflect/apply/index.html b/files/fr/web/javascript/reference/global_objects/reflect/apply/index.html
deleted file mode 100644
index e341856408..0000000000
--- a/files/fr/web/javascript/reference/global_objects/reflect/apply/index.html
+++ /dev/null
@@ -1,97 +0,0 @@
----
-title: Reflect.apply()
-slug: Web/JavaScript/Reference/Global_Objects/Reflect/apply
-tags:
-  - ECMAScript 2015
-  - JavaScript
-  - Méthode
-  - Reference
-  - Reflect
-translation_of: Web/JavaScript/Reference/Global_Objects/Reflect/apply
-original_slug: Web/JavaScript/Reference/Objets_globaux/Reflect/apply
----
-<div>{{JSRef}}</div>
-
-<p>La méthode statique <code><strong>Reflect</strong></code><strong><code>.apply()</code></strong> permet d'appeler une fonction cible avec des arguments donnés.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/reflect-apply.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">Reflect.apply(cible, argumentThis, listeArguments)
-</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>cible</code></dt>
- <dd>La fonction cible à appeler.</dd>
- <dt><code>argumentThis</code></dt>
- <dd>La valeur fournie pour <code>this</code> lors de l'appel à <em><code>cible</code></em>.</dd>
- <dt><code>listeArguments</code></dt>
- <dd>Un objet semblable à un tableau qui définit les arguments à passer à <em><code>cible</code></em>. S'il vaut {{jsxref("null")}} ou {{jsxref("undefined")}}, aucun argument ne sera passé.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Le résultat de l'appel de la fonction cible indiquée avec la valeur <code>this</code> et les arguments indiqués.</p>
-
-<h3 id="Exceptions_levées">Exceptions levées</h3>
-
-<p>Une exception {{jsxref("TypeError")}}, si <em>cible</em> ne peut pas être appelée.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>Avec ES5, on utilise généralement {{jsxref("Function.prototype.apply()")}} pour appeler une fonction avec une valeur <code>this</code> donnée et des arguments donnés.</p>
-
-<pre class="brush: js">Function.prototype.apply.call(Math.floor, undefined, [1.75]);</pre>
-
-<p><code>Reflect.apply</code> permet de rendre cela plus concis et facile à comprendre.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<pre class="brush: js">Reflect.apply(Math.floor, undefined, [1.75]);
-// 1;
-
-Reflect.apply(String.fromCharCode, undefined, [104, 101, 108, 108, 111]);
-// "hello"
-
-Reflect.apply(RegExp.prototype.exec, /ab/, ["confabulation"]).index;
-// 4
-
-Reflect.apply("".charAt, "poneys", [3]);
-// "e"
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-reflect.apply', 'Reflect.apply')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-reflect.apply', 'Reflect.apply')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Reflect.apply")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Reflect")}}</li>
- <li>{{jsxref("Function.prototype.apply()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/reflect/apply/index.md b/files/fr/web/javascript/reference/global_objects/reflect/apply/index.md
new file mode 100644
index 0000000000..d8af6551c3
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/reflect/apply/index.md
@@ -0,0 +1,80 @@
+---
+title: Reflect.apply()
+slug: Web/JavaScript/Reference/Global_Objects/Reflect/apply
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Méthode
+  - Reference
+  - Reflect
+translation_of: Web/JavaScript/Reference/Global_Objects/Reflect/apply
+original_slug: Web/JavaScript/Reference/Objets_globaux/Reflect/apply
+---
+{{JSRef}}
+
+La méthode statique **`Reflect`\*\***`.apply()`\*\* permet d'appeler une fonction cible avec des arguments donnés.
+
+{{EmbedInteractiveExample("pages/js/reflect-apply.html")}}
+
+## Syntaxe
+
+    Reflect.apply(cible, argumentThis, listeArguments)
+
+### Paramètres
+
+- `cible`
+  - : La fonction cible à appeler.
+- `argumentThis`
+  - : La valeur fournie pour `this` lors de l'appel à _`cible`_.
+- `listeArguments`
+  - : Un objet semblable à un tableau qui définit les arguments à passer à _`cible`_. S'il vaut {{jsxref("null")}} ou {{jsxref("undefined")}}, aucun argument ne sera passé.
+
+### Valeur de retour
+
+Le résultat de l'appel de la fonction cible indiquée avec la valeur `this` et les arguments indiqués.
+
+### Exceptions levées
+
+Une exception {{jsxref("TypeError")}}, si _cible_ ne peut pas être appelée.
+
+## Description
+
+Avec ES5, on utilise généralement {{jsxref("Function.prototype.apply()")}} pour appeler une fonction avec une valeur `this` donnée et des arguments donnés.
+
+```js
+Function.prototype.apply.call(Math.floor, undefined, [1.75]);
+```
+
+`Reflect.apply` permet de rendre cela plus concis et facile à comprendre.
+
+## Exemples
+
+```js
+Reflect.apply(Math.floor, undefined, [1.75]);
+// 1;
+
+Reflect.apply(String.fromCharCode, undefined, [104, 101, 108, 108, 111]);
+// "hello"
+
+Reflect.apply(RegExp.prototype.exec, /ab/, ["confabulation"]).index;
+// 4
+
+Reflect.apply("".charAt, "poneys", [3]);
+// "e"
+```
+
+## Spécifications
+
+| Spécification                                                                        | État                         | Commentaires         |
+| ------------------------------------------------------------------------------------ | ---------------------------- | -------------------- |
+| {{SpecName('ES2015', '#sec-reflect.apply', 'Reflect.apply')}}     | {{Spec2('ES2015')}}     | Définition initiale. |
+| {{SpecName('ESDraft', '#sec-reflect.apply', 'Reflect.apply')}} | {{Spec2('ESDraft')}} |                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Reflect.apply")}}
+
+## Voir aussi
+
+- {{jsxref("Reflect")}}
+- {{jsxref("Function.prototype.apply()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/reflect/comparing_reflect_and_object_methods/index.html b/files/fr/web/javascript/reference/global_objects/reflect/comparing_reflect_and_object_methods/index.html
deleted file mode 100644
index 44b3ead149..0000000000
--- a/files/fr/web/javascript/reference/global_objects/reflect/comparing_reflect_and_object_methods/index.html
+++ /dev/null
@@ -1,101 +0,0 @@
----
-title: Comparaison entre Reflect et les méthodes d'Object
-slug: >-
-  Web/JavaScript/Reference/Global_Objects/Reflect/Comparing_Reflect_and_Object_methods
-tags:
-  - Aperçu
-  - Intermédiaire
-  - JavaScript
-  - Object
-  - Reflect
-translation_of: >-
-  Web/JavaScript/Reference/Global_Objects/Reflect/Comparing_Reflect_and_Object_methods
-original_slug: >-
-  Web/JavaScript/Reference/Objets_globaux/Reflect/Comparaison_entre_Reflect_et_les_méthodes_Object
----
-<div>{{jssidebar}}</div>
-
-<p>L'objet {{jsxref("Reflect")}}, introduit avec ES2015, est un objet natif fournissant des méthodes pour s'interfacer avec les objets JavaScript. Certaines fonctions statiques de <code>Reflect</code> ont une correspondance avec les méthodes fournies par {{jsxref("Object")}} et disponibles avant ES2015. Bien que ces méthodes aient un comportement similaire, il y a souvent de subtiles différences entre elles.</p>
-
-<p>Dans ce tableau, nous énumérons les différences entre les méthodes disponibles avec <code>Object</code> et <code>Reflect</code>. Si une méthode n'existe pas dans le cas indiqué, elle sera notée N/A.</p>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Nom de la méthode</th>
-   <th scope="col"><code>Object</code></th>
-   <th scope="col"><code>Reflect</code></th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><code>defineProperty()</code></td>
-   <td>{{jsxref("Object.defineProperty()")}} renvoie l'objet qui a été passé à la fonction. Déclenche une exception <code>TypeError</code> si la propriété n'a pu être définie sur l'objet.</td>
-   <td>{{jsxref("Reflect.defineProperty()")}} renvoie <code>true</code> si la propriété a été définie sur l'objet et <code>false</code> sinon.</td>
-  </tr>
-  <tr>
-   <td><code>defineProperties()</code></td>
-   <td>{{jsxref("Object.defineProperties()")}} renvoie les objets passés à la fonction. Déclenche une exception <code>TypeError</code> si une des propriétés n'a pu être définie.</td>
-   <td>N/A</td>
-  </tr>
-  <tr>
-   <td><code>set()</code></td>
-   <td>N/A</td>
-   <td>{{jsxref("Reflect.set()")}} renvoie <code>true</code> si la propriété a été définie sur l'objet et <code>false</code> sinon. Déclenche une exception <code>TypeError</code> si la cible n'était pas un <code>Object</code>.</td>
-  </tr>
-  <tr>
-   <td><code>get()</code></td>
-   <td>N/A</td>
-   <td>{{jsxref("Reflect.get()")}} renvoie la valeur de la propriété. Déclenche une exception <code>TypeError</code> si la cible n'était pas un <code>Object</code>.</td>
-  </tr>
-  <tr>
-   <td><code>deleteProperty()</code></td>
-   <td>N/A</td>
-   <td>{{jsxref("Reflect.deleteProperty()")}} renvoie <code>true</code> si la propriété a été supprimée de l'objet et <code>false</code> sinon.</td>
-  </tr>
-  <tr>
-   <td><code>getOwnPropertyDescriptor()</code></td>
-   <td>{{jsxref("Object.getOwnPropertyDescriptor()")}} renvoie un descripteur de la propriété si elle existe sur l'objet passé en argument. Si la propriété n'existe pas, la méthode renvoie <code>undefined</code>. Si la valeur passée en premier argument n'est pas un objet, elle sera automatiquement convertie en un objet.</td>
-   <td>{{jsxref("Reflect.getOwnPropertyDescriptor()")}} renvoie un descripteur de la propriété si elle existe sur l'objet et <code>undefined</code> si elle n'existe pas. Déclenche une exception <code>TypeError</code> si la valeur passée en premier argument n'est pas un objet.</td>
-  </tr>
-  <tr>
-   <td><code>getOwnPropertyDescriptors()</code></td>
-   <td>{{jsxref("Object.getOwnPropertyDescriptors()")}} renvoie un objet contenant un descripteur de propriété pour chaque objet passé en argument. Renvoie un objet vide si l'objet passé en argument ne contient pas les descripteurs.</td>
-   <td>N/A</td>
-  </tr>
-  <tr>
-   <td><code>getPrototypeOf()</code></td>
-   <td>{{jsxref("Object.getPrototypeOf()")}} renvoie le prototype de l'objet fourni. Renvoie <code>null</code> s'il n'y a pas de propriétés héritées. En ES5, déclenche une exception <code>TypeError</code> pour les valeurs qui ne sont pas des objets (pour ES6 et ensuite, les valeurs sont converties en objet).</td>
-   <td>{{jsxref("Reflect.getPrototypeOf()")}} renvoie le prototype de l'objet fourni. Renvoie <code>null</code> s'il n'y a pas de propriétés héritées et déclenche une exception <code>TypeError</code> pour les valeurs qui ne sont pas des objets.</td>
-  </tr>
-  <tr>
-   <td><code>setPrototypeOf()</code></td>
-   <td>{{jsxref("Object.setPrototypeOf()")}} renvoie l'objet fourni si le prototype a pu être défini. Déclenche une exception <code>TypeError</code> si le prototype utilisé n'était pas un objet ou <code>null</code> ou si le prototype de l'objet à modifier n'est pas extensible.</td>
-   <td>{{jsxref("Reflect.setPrototypeOf()")}} renvoie <code>true</code> si le prototype a pu être défini sur l'objet et <code>false</code> sinon (y compris lorsque le prototype n'est pas extensible). Déclenche une exception <code>TypeError</code> si la cible passée n'est pas un objet ou si le prototype à appliquer n'est pas un objet ou n'est pas <code>null</code>.</td>
-  </tr>
-  <tr>
-   <td><code>isExtensible()</code></td>
-   <td>{{jsxref("Object.isExtensible()")}} renvoie <code>true</code> si l'objet est extensible et <code>false</code> sinon. En ES5, déclenche une exception <code>TypeError</code> si le premier argument fourni n'est pas un objet. Avec ES6 et ensuite, si l'argument fourni est une valeur primitive, il est converti en un objet non-extensible et la méthode renvoie donc <code>false</code>.</td>
-   <td>
-    <p>{{jsxref("Reflect.isExtensible()")}} renvoie <code>true</code> si l'objet est extensible et <code>false</code> sinon. Déclenche une exception <code>TypeError</code> si le premier argument n'est pas un objet.</p>
-   </td>
-  </tr>
-  <tr>
-   <td><code>preventExtensions()</code></td>
-   <td>
-    <p>{{jsxref("Object.preventExtensions()")}} renvoie l'objet qui a été rendu non-extensible. En ES5, déclenche une exception si l'argument n'est pas un objet. Avec ES6 et ensuite, si l'argument fourni est une valeur primitive, il est converti en un objet non-extensible et c'est cette valeur qui est renvoyée.</p>
-   </td>
-   <td>{{jsxref("Reflect.preventExtensions()")}} renvoie <code>true</code> si l'objet a été rendu non-extensible et <code>false</code> sinon. Déclenche une exception <code>TypeError</code> si l'argument n'est pas un objet.</td>
-  </tr>
-  <tr>
-   <td><code>keys()</code></td>
-   <td>{{jsxref("Object.keys()")}} renvoie un tableau de chaînes de caractères qui sont les noms des propriétés propres (et énumérables) de l'objet. En ES5, déclenche une exception <code>TypeError</code> si la cible n'est pas un objet. Avec ES6 et les versions suivantes, les valeurs primitives sont converties en objets.</td>
-   <td>N/A</td>
-  </tr>
-  <tr>
-   <td><code>ownKeys()</code></td>
-   <td>N/A</td>
-   <td>{{jsxref("Reflect.ownKeys()")}} renvoie un tableau des noms des propriétés pour les clés des propriétés propres de de l'objet. Déclenche une exception <code>TypeError</code> si la cible n'est pas un objet.</td>
-  </tr>
- </tbody>
-</table>
diff --git a/files/fr/web/javascript/reference/global_objects/reflect/comparing_reflect_and_object_methods/index.md b/files/fr/web/javascript/reference/global_objects/reflect/comparing_reflect_and_object_methods/index.md
new file mode 100644
index 0000000000..028b3233b3
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/reflect/comparing_reflect_and_object_methods/index.md
@@ -0,0 +1,200 @@
+---
+title: Comparaison entre Reflect et les méthodes d'Object
+slug: >-
+  Web/JavaScript/Reference/Global_Objects/Reflect/Comparing_Reflect_and_Object_methods
+tags:
+  - Aperçu
+  - Intermédiaire
+  - JavaScript
+  - Object
+  - Reflect
+translation_of: >-
+  Web/JavaScript/Reference/Global_Objects/Reflect/Comparing_Reflect_and_Object_methods
+original_slug: >-
+  Web/JavaScript/Reference/Objets_globaux/Reflect/Comparaison_entre_Reflect_et_les_méthodes_Object
+---
+{{jssidebar}}
+
+L'objet {{jsxref("Reflect")}}, introduit avec ES2015, est un objet natif fournissant des méthodes pour s'interfacer avec les objets JavaScript. Certaines fonctions statiques de `Reflect` ont une correspondance avec les méthodes fournies par {{jsxref("Object")}} et disponibles avant ES2015. Bien que ces méthodes aient un comportement similaire, il y a souvent de subtiles différences entre elles.
+
+Dans ce tableau, nous énumérons les différences entre les méthodes disponibles avec `Object` et `Reflect`. Si une méthode n'existe pas dans le cas indiqué, elle sera notée N/A.
+
+<table class="standard-table">
+  <thead>
+    <tr>
+      <th scope="col">Nom de la méthode</th>
+      <th scope="col"><code>Object</code></th>
+      <th scope="col"><code>Reflect</code></th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td><code>defineProperty()</code></td>
+      <td>
+        {{jsxref("Object.defineProperty()")}} renvoie l'objet qui a
+        été passé à la fonction. Déclenche une exception
+        <code>TypeError</code> si la propriété n'a pu être définie sur l'objet.
+      </td>
+      <td>
+        {{jsxref("Reflect.defineProperty()")}} renvoie
+        <code>true</code> si la propriété a été définie sur l'objet et
+        <code>false</code> sinon.
+      </td>
+    </tr>
+    <tr>
+      <td><code>defineProperties()</code></td>
+      <td>
+        {{jsxref("Object.defineProperties()")}} renvoie les objets
+        passés à la fonction. Déclenche une exception <code>TypeError</code> si
+        une des propriétés n'a pu être définie.
+      </td>
+      <td>N/A</td>
+    </tr>
+    <tr>
+      <td><code>set()</code></td>
+      <td>N/A</td>
+      <td>
+        {{jsxref("Reflect.set()")}} renvoie <code>true</code> si la
+        propriété a été définie sur l'objet et <code>false</code> sinon.
+        Déclenche une exception <code>TypeError</code> si la cible n'était pas
+        un <code>Object</code>.
+      </td>
+    </tr>
+    <tr>
+      <td><code>get()</code></td>
+      <td>N/A</td>
+      <td>
+        {{jsxref("Reflect.get()")}} renvoie la valeur de la propriété.
+        Déclenche une exception <code>TypeError</code> si la cible n'était pas
+        un <code>Object</code>.
+      </td>
+    </tr>
+    <tr>
+      <td><code>deleteProperty()</code></td>
+      <td>N/A</td>
+      <td>
+        {{jsxref("Reflect.deleteProperty()")}} renvoie
+        <code>true</code> si la propriété a été supprimée de l'objet et
+        <code>false</code> sinon.
+      </td>
+    </tr>
+    <tr>
+      <td><code>getOwnPropertyDescriptor()</code></td>
+      <td>
+        {{jsxref("Object.getOwnPropertyDescriptor()")}} renvoie
+        un descripteur de la propriété si elle existe sur l'objet passé en
+        argument. Si la propriété n'existe pas, la méthode renvoie
+        <code>undefined</code>. Si la valeur passée en premier argument n'est
+        pas un objet, elle sera automatiquement convertie en un objet.
+      </td>
+      <td>
+        {{jsxref("Reflect.getOwnPropertyDescriptor()")}} renvoie
+        un descripteur de la propriété si elle existe sur l'objet et
+        <code>undefined</code> si elle n'existe pas. Déclenche une exception
+        <code>TypeError</code> si la valeur passée en premier argument n'est pas
+        un objet.
+      </td>
+    </tr>
+    <tr>
+      <td><code>getOwnPropertyDescriptors()</code></td>
+      <td>
+        {{jsxref("Object.getOwnPropertyDescriptors()")}} renvoie
+        un objet contenant un descripteur de propriété pour chaque objet passé
+        en argument. Renvoie un objet vide si l'objet passé en argument ne
+        contient pas les descripteurs.
+      </td>
+      <td>N/A</td>
+    </tr>
+    <tr>
+      <td><code>getPrototypeOf()</code></td>
+      <td>
+        {{jsxref("Object.getPrototypeOf()")}} renvoie le prototype de
+        l'objet fourni. Renvoie <code>null</code> s'il n'y a pas de propriétés
+        héritées. En ES5, déclenche une exception <code>TypeError</code> pour
+        les valeurs qui ne sont pas des objets (pour ES6 et ensuite, les valeurs
+        sont converties en objet).
+      </td>
+      <td>
+        {{jsxref("Reflect.getPrototypeOf()")}} renvoie le
+        prototype de l'objet fourni. Renvoie <code>null</code> s'il n'y a pas de
+        propriétés héritées et déclenche une exception
+        <code>TypeError</code> pour les valeurs qui ne sont pas des objets.
+      </td>
+    </tr>
+    <tr>
+      <td><code>setPrototypeOf()</code></td>
+      <td>
+        {{jsxref("Object.setPrototypeOf()")}} renvoie l'objet fourni
+        si le prototype a pu être défini. Déclenche une exception
+        <code>TypeError</code> si le prototype utilisé n'était pas un objet ou
+        <code>null</code> ou si le prototype de l'objet à modifier n'est pas
+        extensible.
+      </td>
+      <td>
+        {{jsxref("Reflect.setPrototypeOf()")}} renvoie
+        <code>true</code> si le prototype a pu être défini sur l'objet et
+        <code>false</code> sinon (y compris lorsque le prototype n'est pas
+        extensible). Déclenche une exception <code>TypeError</code> si la cible
+        passée n'est pas un objet ou si le prototype à appliquer n'est pas un
+        objet ou n'est pas <code>null</code>.
+      </td>
+    </tr>
+    <tr>
+      <td><code>isExtensible()</code></td>
+      <td>
+        {{jsxref("Object.isExtensible()")}} renvoie
+        <code>true</code> si l'objet est extensible et <code>false</code> sinon.
+        En ES5, déclenche une exception <code>TypeError</code> si le premier
+        argument fourni n'est pas un objet. Avec ES6 et ensuite, si l'argument
+        fourni est une valeur primitive, il est converti en un objet
+        non-extensible et la méthode renvoie donc <code>false</code>.
+      </td>
+      <td>
+        <p>
+          {{jsxref("Reflect.isExtensible()")}} renvoie
+          <code>true</code> si l'objet est extensible et
+          <code>false</code> sinon. Déclenche une exception
+          <code>TypeError</code> si le premier argument n'est pas un objet.
+        </p>
+      </td>
+    </tr>
+    <tr>
+      <td><code>preventExtensions()</code></td>
+      <td>
+        <p>
+          {{jsxref("Object.preventExtensions()")}} renvoie l'objet
+          qui a été rendu non-extensible. En ES5, déclenche une exception si
+          l'argument n'est pas un objet. Avec ES6 et ensuite, si l'argument
+          fourni est une valeur primitive, il est converti en un objet
+          non-extensible et c'est cette valeur qui est renvoyée.
+        </p>
+      </td>
+      <td>
+        {{jsxref("Reflect.preventExtensions()")}} renvoie
+        <code>true</code> si l'objet a été rendu non-extensible et
+        <code>false</code> sinon. Déclenche une exception
+        <code>TypeError</code> si l'argument n'est pas un objet.
+      </td>
+    </tr>
+    <tr>
+      <td><code>keys()</code></td>
+      <td>
+        {{jsxref("Object.keys()")}} renvoie un tableau de chaînes de
+        caractères qui sont les noms des propriétés propres (et énumérables) de
+        l'objet. En ES5, déclenche une exception <code>TypeError</code> si la
+        cible n'est pas un objet. Avec ES6 et les versions suivantes, les
+        valeurs primitives sont converties en objets.
+      </td>
+      <td>N/A</td>
+    </tr>
+    <tr>
+      <td><code>ownKeys()</code></td>
+      <td>N/A</td>
+      <td>
+        {{jsxref("Reflect.ownKeys()")}} renvoie un tableau des noms des
+        propriétés pour les clés des propriétés propres de de l'objet. Déclenche
+        une exception <code>TypeError</code> si la cible n'est pas un objet.
+      </td>
+    </tr>
+  </tbody>
+</table>
diff --git a/files/fr/web/javascript/reference/global_objects/reflect/construct/index.html b/files/fr/web/javascript/reference/global_objects/reflect/construct/index.html
deleted file mode 100644
index 3a53b1c6d8..0000000000
--- a/files/fr/web/javascript/reference/global_objects/reflect/construct/index.html
+++ /dev/null
@@ -1,160 +0,0 @@
----
-title: Reflect.construct()
-slug: Web/JavaScript/Reference/Global_Objects/Reflect/construct
-tags:
-  - ECMAScript 2015
-  - JavaScript
-  - Méthode
-  - Reference
-  - Reflect
-translation_of: Web/JavaScript/Reference/Global_Objects/Reflect/construct
-original_slug: Web/JavaScript/Reference/Objets_globaux/Reflect/construct
----
-<div>{{JSRef}}</div>
-
-<p>La méthode statique <code><strong>Reflect</strong></code><strong><code>.construct()</code></strong> agit comme l'opérateur <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_new"><code>new</code></a> sous la forme d'une fonction. Elle est équivalente à <code>new cible(...args)</code> et permet d'indiquer un prototype différent.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/reflect-construct.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">Reflect.construct(cible, listeArguments[, newCible])
-</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>cible</code></dt>
- <dd>La fonction cible à appeler.</dd>
- <dt><code>listeArguments</code></dt>
- <dd>Un objet semblable à un tableau définissant les arguments à passer à <code>cible</code> lors de l'appel. Utiliser {{jsxref("null")}} ou {{jsxref("undefined")}} si aucun argument ne doit être fourni à la fonction.</dd>
- <dt><code>newCible</code> {{optional_inline}}</dt>
- <dd>Le constructeur dont le prototype devrait être utilisé. Voir également l'opérateur <code><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/new.target">new.target</a></code>. Si <code>newCible</code> n'est pas présent, c'est <code>cible</code> qui sera utilisé.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Un nouvelle instance de la cible indiquée, créée en l'appelant comme un constructeur (ou en appelant <code>newCible</code> si elle est fournie) avec les arguments fournis.</p>
-
-<h3 id="Exceptions_levées">Exceptions levées</h3>
-
-<p>Une exception {{jsxref("TypeError")}} si <code>cible</code> ou <code>newCible</code> ne sont pas des constructeurs.</p>
-
-<h2 id="Description">Description</h2>
-
-<p><code>Reflect.construct()</code> permet d'appeler un constructeur avec un nombre d'arguments variable (ce qui peut également être fait avec <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateur_de_décomposition">l'opérateur de décomposition</a> et l'opérateur <code><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_new">new</a></code>).</p>
-
-<pre class="brush: js">var obj = new Toto(...args);
-var obj = Reflect.construct(Toto, args);</pre>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Utiliser_Reflect.construct()">Utiliser <code>Reflect.construct()</code></h3>
-
-<pre class="brush: js">var d = Reflect.construct(Date, [1776, 6, 4]);
-d instanceof Date; // true
-d.getFullYear(); // 1776
-</pre>
-
-<h3 id="Utiliser_le_paramètre_newCible">Utiliser le paramètre <code>newCible</code></h3>
-
-<p>Pour plus d'informations sur la création de sous-classes, voir les <a href="/fr/docs/Web/JavaScript/Reference/Classes">classes</a> et l'opérateur <code><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/new.target">new.target</a></code>.</p>
-
-<pre class="brush: js">function unConstructeur() {}
-var résultat = Reflect.construct(Array, [], unConstructeur);
-
-Reflect.getPrototypeOf(résultat); // unConstructeur.prototype
-Array.isArray(résultat); // true
-</pre>
-
-<h3 id="Une_comparaison_entre_Reflect.construct()_et_Object.create()">Une comparaison entre <code>Reflect.construct()</code> et <code>Object.create()</code></h3>
-
-<p>Avant l'apparition de <code>Reflect</code>, on pouvait construire des objets avec une combinaison donnée de consttructeur et de prototype grâce à {{jsxref("Object.create()")}}.</p>
-
-<pre class="brush: js">function MaClasseA() {
-  this.name = 'A';
-}
-
-function MaClasseB() {
-  this.name = 'B';
-}
-
-// Avec cette instruction :
-var obj1 = Reflect.construct(MaClasseA, args, MaClasseB);
-
-// on aura le même résultat qu'avec
-var obj2 = Object.create(MaClasseB.prototype);
-MaClasseA.apply(obj2, args);
-
-console.log(obj1.name); // 'A'
-console.log(obj2.name); // 'A'
-
-console.log(obj1 instanceof MaClasseA); // false
-console.log(obj2 instanceof MaClasseA); // false
-
-console.log(obj1 instanceof MaClasseB); // true
-console.log(obj2 instanceof MaClasseB); // true
-</pre>
-
-<p>Toutefois, si les résultats sont identiques, il y a une différence notable. Lorsqu'on utilise <code>Object.create()</code> et <code>Function.prototype.apply()</code>, l'opérateur <code>new.target</code> pointe vers <code>undefined</code> dans la fonction utilisée comme constructeur car le mot-clé <code>new</code> n'est pas utilisé à la création de l'objet.</p>
-
-<p>Mais quand on appelle <code>Reflect.construct()</code>, <code>new.target</code> pointe vers la valeur fournie par <code>newCible</code> si ce dernier est fourni ou vers <code>cible</code> sinon.</p>
-
-<pre class="brush: js">function MaClasseA() {
-  console.log('MaClasseA');
-  console.log(new.target);
-}
-function MaClasseB() {
-  console.log('MaClasseB');
-  console.log(new.target);
-}
-
-var obj1 = Reflect.construct(MaClasseA, args);
-// Résultat :
-//   MaClasseA
-//   function MaClasseA { ... }
-
-var obj2 = Reflect.construct(MaClasseA, args, MaClasseB);
-// Résultat :
-//   MaClasseA
-//   function MaClasseB { ... }
-
-var obj3 = Object.create(MaClasseB.prototype);
-MaClasseA.apply(obj3, args);
-// Résultat :
-//     MaClasseA
-//     undefined</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-reflect.construct', 'Reflect.construct')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-reflect.construct', 'Reflect.construct')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Reflect.construct")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Reflect")}}</li>
- <li><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_new"><code>new</code></a></li>
- <li><code><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/new.target">new.target</a></code></li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/reflect/construct/index.md b/files/fr/web/javascript/reference/global_objects/reflect/construct/index.md
new file mode 100644
index 0000000000..59f355eb10
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/reflect/construct/index.md
@@ -0,0 +1,147 @@
+---
+title: Reflect.construct()
+slug: Web/JavaScript/Reference/Global_Objects/Reflect/construct
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Méthode
+  - Reference
+  - Reflect
+translation_of: Web/JavaScript/Reference/Global_Objects/Reflect/construct
+original_slug: Web/JavaScript/Reference/Objets_globaux/Reflect/construct
+---
+{{JSRef}}
+
+La méthode statique **`Reflect`\*\***`.construct()`\*\* agit comme l'opérateur [`new`](/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_new) sous la forme d'une fonction. Elle est équivalente à `new cible(...args)` et permet d'indiquer un prototype différent.
+
+{{EmbedInteractiveExample("pages/js/reflect-construct.html")}}
+
+## Syntaxe
+
+    Reflect.construct(cible, listeArguments[, newCible])
+
+### Paramètres
+
+- `cible`
+  - : La fonction cible à appeler.
+- `listeArguments`
+  - : Un objet semblable à un tableau définissant les arguments à passer à `cible` lors de l'appel.
+- `newCible` {{optional_inline}}
+  - : Le constructeur dont le prototype devrait être utilisé. Voir également l'opérateur [`new.target`](/fr/docs/Web/JavaScript/Reference/Opérateurs/new.target). Si `newCible` n'est pas présent, c'est `cible` qui sera utilisé.
+
+### Valeur de retour
+
+Un nouvelle instance de la cible indiquée, créée en l'appelant comme un constructeur (ou en appelant `newCible` si elle est fournie) avec les arguments fournis.
+
+### Exceptions levées
+
+Une exception {{jsxref("TypeError")}} si `cible` ou `newCible` ne sont pas des constructeurs.
+
+## Description
+
+`Reflect.construct()` permet d'appeler un constructeur avec un nombre d'arguments variable (ce qui peut également être fait avec [l'opérateur de décomposition](/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateur_de_décomposition) et l'opérateur [`new`](/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_new)).
+
+```js
+var obj = new Toto(...args);
+var obj = Reflect.construct(Toto, args);
+```
+
+## Exemples
+
+### Utiliser `Reflect.construct()`
+
+```js
+var d = Reflect.construct(Date, [1776, 6, 4]);
+d instanceof Date; // true
+d.getFullYear(); // 1776
+```
+
+### Utiliser le paramètre `newCible`
+
+Pour plus d'informations sur la création de sous-classes, voir les [classes](/fr/docs/Web/JavaScript/Reference/Classes) et l'opérateur [`new.target`](/fr/docs/Web/JavaScript/Reference/Opérateurs/new.target).
+
+```js
+function unConstructeur() {}
+var résultat = Reflect.construct(Array, [], unConstructeur);
+
+Reflect.getPrototypeOf(résultat); // unConstructeur.prototype
+Array.isArray(résultat); // true
+```
+
+### Une comparaison entre `Reflect.construct()` et `Object.create()`
+
+Avant l'apparition de `Reflect`, on pouvait construire des objets avec une combinaison donnée de consttructeur et de prototype grâce à {{jsxref("Object.create()")}}.
+
+```js
+function MaClasseA() {
+  this.name = 'A';
+}
+
+function MaClasseB() {
+  this.name = 'B';
+}
+
+// Avec cette instruction :
+var obj1 = Reflect.construct(MaClasseA, args, MaClasseB);
+
+// on aura le même résultat qu'avec
+var obj2 = Object.create(MaClasseB.prototype);
+MaClasseA.apply(obj2, args);
+
+console.log(obj1.name); // 'A'
+console.log(obj2.name); // 'A'
+
+console.log(obj1 instanceof MaClasseA); // false
+console.log(obj2 instanceof MaClasseA); // false
+
+console.log(obj1 instanceof MaClasseB); // true
+console.log(obj2 instanceof MaClasseB); // true
+```
+
+Toutefois, si les résultats sont identiques, il y a une différence notable. Lorsqu'on utilise `Object.create()` et `Function.prototype.apply()`, l'opérateur `new.target` pointe vers `undefined` dans la fonction utilisée comme constructeur car le mot-clé `new` n'est pas utilisé à la création de l'objet.
+
+Mais quand on appelle `Reflect.construct()`, `new.target` pointe vers la valeur fournie par `newCible` si ce dernier est fourni ou vers `cible` sinon.
+
+```js
+function MaClasseA() {
+  console.log('MaClasseA');
+  console.log(new.target);
+}
+function MaClasseB() {
+  console.log('MaClasseB');
+  console.log(new.target);
+}
+
+var obj1 = Reflect.construct(MaClasseA, args);
+// Résultat :
+//   MaClasseA
+//   function MaClasseA { ... }
+
+var obj2 = Reflect.construct(MaClasseA, args, MaClasseB);
+// Résultat :
+//   MaClasseA
+//   function MaClasseB { ... }
+
+var obj3 = Object.create(MaClasseB.prototype);
+MaClasseA.apply(obj3, args);
+// Résultat :
+//     MaClasseA
+//     undefined
+```
+
+## Spécifications
+
+| Spécification                                                                                | État                         | Commentaires         |
+| -------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName('ES2015', '#sec-reflect.construct', 'Reflect.construct')}} | {{Spec2('ES2015')}}     | Définition initiale. |
+| {{SpecName('ESDraft', '#sec-reflect.construct', 'Reflect.construct')}} | {{Spec2('ESDraft')}} |                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Reflect.construct")}}
+
+## Voir aussi
+
+- {{jsxref("Reflect")}}
+- [`new`](/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_new)
+- [`new.target`](/fr/docs/Web/JavaScript/Reference/Opérateurs/new.target)
diff --git a/files/fr/web/javascript/reference/global_objects/reflect/defineproperty/index.html b/files/fr/web/javascript/reference/global_objects/reflect/defineproperty/index.html
deleted file mode 100644
index 486217295b..0000000000
--- a/files/fr/web/javascript/reference/global_objects/reflect/defineproperty/index.html
+++ /dev/null
@@ -1,97 +0,0 @@
----
-title: Reflect.defineProperty()
-slug: Web/JavaScript/Reference/Global_Objects/Reflect/defineProperty
-tags:
-  - ECMAScript 2015
-  - JavaScript
-  - Méthode
-  - Reference
-  - Reflect
-translation_of: Web/JavaScript/Reference/Global_Objects/Reflect/defineProperty
-original_slug: Web/JavaScript/Reference/Objets_globaux/Reflect/defineProperty
----
-<div>{{JSRef}}</div>
-
-<p>La méthode statique <code><strong>Reflect</strong></code><strong><code>.defineProperty()</code></strong> est semblable à {{jsxref("Object.defineProperty()")}} mais renvoie un {{jsxref("Boolean")}}.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/reflect-defineproperty.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">Reflect.defineProperty(<var>cible</var>, <var>cléPropriété</var>, <var>attributs</var>)
-</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>cible</code></dt>
- <dd>L'objet cible sur lequel on veut définir la propriété.</dd>
- <dt><code>cléPropriété</code></dt>
- <dd>Le nom de la propriété qu'on souhaite définir ou modifier.</dd>
- <dt><code>attributs</code></dt>
- <dd>Les attributs de de la propriété qu'on ajoute ou qu'on modifie.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Un {{jsxref("Boolean","booléen","",1)}} qui indique si la propriété a bien été définie.</p>
-
-<h3 id="Exceptions">Exceptions</h3>
-
-<p>Une erreur {{jsxref("TypeError")}} si <code>cible</code> n'est pas un {{jsxref("Object")}}.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>La méthode <code>Reflect.defineProperty</code> permet d'ajouter ou de modifier finement une propriété d'un objet. Pour plus de détails, voir la méthode {{jsxref("Object.defineProperty")}} qui est très similaire. <code>Object.defineProperty</code> renvoie l'objet et lève une {{jsxref("TypeError")}} si la propriété n'a pas correctement été définie. <code>Reflect.defineProperty</code> renvoie simplement un {{jsxref("Boolean")}} qui indique si la propriété a été définie avec succès ou non.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Utiliser_Reflect.defineProperty()">Utiliser <code>Reflect.defineProperty()</code></h3>
-
-<pre class="brush: js">var obj = {};
-Reflect.defineProperty(obj, "x", {value: 7}); // true
-obj.x; // 7
-</pre>
-
-<h3 id="Vérifier_si_la_définition_de_propriété_a_réussi">Vérifier si la définition de propriété a réussi</h3>
-
-<p>{{jsxref("Object.defineProperty")}} renvoie un objet si la définition a réussi ou lève une exception {{jsxref("TypeError")}} sinon, ce qui implique d'utiliser un bloc <code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/try...catch">try...catch</a></code> pour attraper l'erreur. <code>Reflect.defineProperty</code> renvoie un booléen pour indiquer la réussite ou l'échec, un bloc <code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/if...else">if...else</a></code> suffit :</p>
-
-<pre class="brush: js">if (Reflect.defineProperty(cible, propriété, attributs)) {
-  // succès
-} else {
-  // échec
-}</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-reflect.defineproperty', 'Reflect.defineProperty')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-reflect.defineproperty', 'Reflect.defineProperty')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Reflect.defineProperty")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Reflect")}}</li>
- <li>{{jsxref("Object.defineProperty()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/reflect/defineproperty/index.md b/files/fr/web/javascript/reference/global_objects/reflect/defineproperty/index.md
new file mode 100644
index 0000000000..344aa1fb9f
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/reflect/defineproperty/index.md
@@ -0,0 +1,80 @@
+---
+title: Reflect.defineProperty()
+slug: Web/JavaScript/Reference/Global_Objects/Reflect/defineProperty
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Méthode
+  - Reference
+  - Reflect
+translation_of: Web/JavaScript/Reference/Global_Objects/Reflect/defineProperty
+original_slug: Web/JavaScript/Reference/Objets_globaux/Reflect/defineProperty
+---
+{{JSRef}}
+
+La méthode statique **`Reflect`\*\***`.defineProperty()`\*\* est semblable à {{jsxref("Object.defineProperty()")}} mais renvoie un {{jsxref("Boolean")}}.
+
+{{EmbedInteractiveExample("pages/js/reflect-defineproperty.html")}}
+
+## Syntaxe
+
+    Reflect.defineProperty(cible, cléPropriété, attributs)
+
+### Paramètres
+
+- `cible`
+  - : L'objet cible sur lequel on veut définir la propriété.
+- `cléPropriété`
+  - : Le nom de la propriété qu'on souhaite définir ou modifier.
+- `attributs`
+  - : Les attributs de de la propriété qu'on ajoute ou qu'on modifie.
+
+### Valeur de retour
+
+Un {{jsxref("Boolean","booléen","",1)}} qui indique si la propriété a bien été définie.
+
+### Exceptions
+
+Une erreur {{jsxref("TypeError")}} si `cible` n'est pas un {{jsxref("Object")}}.
+
+## Description
+
+La méthode `Reflect.defineProperty` permet d'ajouter ou de modifier finement une propriété d'un objet. Pour plus de détails, voir la méthode {{jsxref("Object.defineProperty")}} qui est très similaire. `Object.defineProperty` renvoie l'objet et lève une {{jsxref("TypeError")}} si la propriété n'a pas correctement été définie. `Reflect.defineProperty` renvoie simplement un {{jsxref("Boolean")}} qui indique si la propriété a été définie avec succès ou non.
+
+## Exemples
+
+### Utiliser `Reflect.defineProperty()`
+
+```js
+var obj = {};
+Reflect.defineProperty(obj, "x", {value: 7}); // true
+obj.x; // 7
+```
+
+### Vérifier si la définition de propriété a réussi
+
+{{jsxref("Object.defineProperty")}} renvoie un objet si la définition a réussi ou lève une exception {{jsxref("TypeError")}} sinon, ce qui implique d'utiliser un bloc [`try...catch`](/fr/docs/Web/JavaScript/Reference/Instructions/try...catch) pour attraper l'erreur. `Reflect.defineProperty` renvoie un booléen pour indiquer la réussite ou l'échec, un bloc [`if...else`](/fr/docs/Web/JavaScript/Reference/Instructions/if...else) suffit :
+
+```js
+if (Reflect.defineProperty(cible, propriété, attributs)) {
+  // succès
+} else {
+  // échec
+}
+```
+
+## Spécifications
+
+| Spécification                                                                                                | État                         | Commentaires         |
+| ------------------------------------------------------------------------------------------------------------ | ---------------------------- | -------------------- |
+| {{SpecName('ES2015', '#sec-reflect.defineproperty', 'Reflect.defineProperty')}}     | {{Spec2('ES2015')}}     | Définition initiale. |
+| {{SpecName('ESDraft', '#sec-reflect.defineproperty', 'Reflect.defineProperty')}} | {{Spec2('ESDraft')}} |                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Reflect.defineProperty")}}
+
+## Voir aussi
+
+- {{jsxref("Reflect")}}
+- {{jsxref("Object.defineProperty()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/reflect/deleteproperty/index.html b/files/fr/web/javascript/reference/global_objects/reflect/deleteproperty/index.html
deleted file mode 100644
index dc9cf06102..0000000000
--- a/files/fr/web/javascript/reference/global_objects/reflect/deleteproperty/index.html
+++ /dev/null
@@ -1,93 +0,0 @@
----
-title: Reflect.deleteProperty()
-slug: Web/JavaScript/Reference/Global_Objects/Reflect/deleteProperty
-tags:
-  - ECMAScript 2015
-  - JavaScript
-  - Méthode
-  - Reference
-  - Reflect
-translation_of: Web/JavaScript/Reference/Global_Objects/Reflect/deleteProperty
-original_slug: Web/JavaScript/Reference/Objets_globaux/Reflect/deleteProperty
----
-<div>{{JSRef}}</div>
-
-<p>La méthode statique <code><strong>Reflect</strong></code><strong><code>.deleteProperty()</code></strong> permet de supprimer des propriétés. Il agit comme l'opérateur <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_delete"><code>delete</code></a>.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/reflect-deleteproperty.html", "taller")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">Reflect.deleteProperty(<var>cible</var>, <var>cléPropriété</var>)
-</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>cible</code></dt>
- <dd>L'objet cible sur lequel on souhaite supprimer la propriété.</dd>
- <dt><code>cléPropriété</code></dt>
- <dd>Le nom de la propriété à supprimer.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Un {{jsxref("Boolean","booléen","",1)}} qui indique si la suppression de la propriété s'est bien passée.</p>
-
-<h3 id="Exceptions">Exceptions</h3>
-
-<p>Une erreur {{jsxref("TypeError")}} si <code>cible</code> n'est pas un {{jsxref("Object")}}.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>La méthode <code>Reflect.deleteProperty</code> permet de supprimer une propriété d'un objet. Elle renvoie un {{jsxref("Boolean")}} qui indique si la propriété a été supprimée correctement. Cette méthode est très proche de l'opérateur <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_delete"><code>delete</code></a>.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<pre class="brush: js">var obj = { x: 1, y: 2 };
-Reflect.deleteProperty(obj, "x"); // true
-obj; // { y: 2 }
-
-var arr = [1, 2, 3, 4, 5];
-Reflect.deleteProperty(arr, "3"); // true
-arr; // [1, 2, 3, , 5]
-
-// Renvoie true si aucune propriété correspondante n'existe
-Reflect.deleteProperty({}, "toto"); // true
-
-// Renvoie false si une propriété n'est pas configurable
-Reflect.deleteProperty(Object.freeze({toto: 1}),"toto"); // false
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-reflect.deleteproperty', 'Reflect.deleteProperty')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-reflect.deleteproperty', 'Reflect.deleteProperty')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Reflect.deleteProperty")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Reflect")}}</li>
- <li><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_delete">Opérateur <code>delete</code></a></li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/reflect/deleteproperty/index.md b/files/fr/web/javascript/reference/global_objects/reflect/deleteproperty/index.md
new file mode 100644
index 0000000000..f62bd50161
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/reflect/deleteproperty/index.md
@@ -0,0 +1,74 @@
+---
+title: Reflect.deleteProperty()
+slug: Web/JavaScript/Reference/Global_Objects/Reflect/deleteProperty
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Méthode
+  - Reference
+  - Reflect
+translation_of: Web/JavaScript/Reference/Global_Objects/Reflect/deleteProperty
+original_slug: Web/JavaScript/Reference/Objets_globaux/Reflect/deleteProperty
+---
+{{JSRef}}
+
+La méthode statique **`Reflect`\*\***`.deleteProperty()`\*\* permet de supprimer des propriétés. Il agit comme l'opérateur [`delete`](/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_delete).
+
+{{EmbedInteractiveExample("pages/js/reflect-deleteproperty.html", "taller")}}
+
+## Syntaxe
+
+    Reflect.deleteProperty(cible, cléPropriété)
+
+### Paramètres
+
+- `cible`
+  - : L'objet cible sur lequel on souhaite supprimer la propriété.
+- `cléPropriété`
+  - : Le nom de la propriété à supprimer.
+
+### Valeur de retour
+
+Un {{jsxref("Boolean","booléen","",1)}} qui indique si la suppression de la propriété s'est bien passée.
+
+### Exceptions
+
+Une erreur {{jsxref("TypeError")}} si `cible` n'est pas un {{jsxref("Object")}}.
+
+## Description
+
+La méthode `Reflect.deleteProperty` permet de supprimer une propriété d'un objet. Elle renvoie un {{jsxref("Boolean")}} qui indique si la propriété a été supprimée correctement. Cette méthode est très proche de l'opérateur [`delete`](/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_delete).
+
+## Exemples
+
+```js
+var obj = { x: 1, y: 2 };
+Reflect.deleteProperty(obj, "x"); // true
+obj; // { y: 2 }
+
+var arr = [1, 2, 3, 4, 5];
+Reflect.deleteProperty(arr, "3"); // true
+arr; // [1, 2, 3, , 5]
+
+// Renvoie true si aucune propriété correspondante n'existe
+Reflect.deleteProperty({}, "toto"); // true
+
+// Renvoie false si une propriété n'est pas configurable
+Reflect.deleteProperty(Object.freeze({toto: 1}),"toto"); // false
+```
+
+## Spécifications
+
+| Spécification                                                                                                | État                         | Commentaires         |
+| ------------------------------------------------------------------------------------------------------------ | ---------------------------- | -------------------- |
+| {{SpecName('ES2015', '#sec-reflect.deleteproperty', 'Reflect.deleteProperty')}}     | {{Spec2('ES2015')}}     | Définition initiale. |
+| {{SpecName('ESDraft', '#sec-reflect.deleteproperty', 'Reflect.deleteProperty')}} | {{Spec2('ESDraft')}} |                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Reflect.deleteProperty")}}
+
+## Voir aussi
+
+- {{jsxref("Reflect")}}
+- [Opérateur `delete`](/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_delete)
diff --git a/files/fr/web/javascript/reference/global_objects/reflect/get/index.html b/files/fr/web/javascript/reference/global_objects/reflect/get/index.html
deleted file mode 100644
index cd3bde5bbc..0000000000
--- a/files/fr/web/javascript/reference/global_objects/reflect/get/index.html
+++ /dev/null
@@ -1,95 +0,0 @@
----
-title: Reflect.get()
-slug: Web/JavaScript/Reference/Global_Objects/Reflect/get
-tags:
-  - ECMAScript 2015
-  - JavaScript
-  - Méthode
-  - Reference
-  - Reflect
-translation_of: Web/JavaScript/Reference/Global_Objects/Reflect/get
-original_slug: Web/JavaScript/Reference/Objets_globaux/Reflect/get
----
-<div>{{JSRef}}</div>
-
-<p>La méthode statique <code><strong>Reflect.get()</strong></code> est une fonction qui permet d'obtenir une propriété d'un objet cible. Elle fonctionne comme (<code>cible[cléPropriété]</code>) mais sous la forme d'une fonction.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/reflect-get.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">Reflect.get(<var>cible</var>, <var>cléPropriété</var>[, <var>récepteur</var>])
-</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>cible</code></dt>
- <dd>L'objet cible dont on souhaite obtenir la propriété.</dd>
- <dt><code>cléPropriété</code></dt>
- <dd>Le nom de la propriété qu'on souhaite obtenir.</dd>
- <dt><code>récepteur</code> {{optional_inline}}</dt>
- <dd>La valeur de <code>this</code> à passer à <code>cible</code> si l'accesseur est utilisé. Lorsqu'on l'utilise avec {{jsxref("Proxy")}}, ce peut être un objet qui hérite de la cible.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>La valeur de la propriété.</p>
-
-<h3 id="Exceptions">Exceptions</h3>
-
-<p>Une erreur {{jsxref("TypeError")}} si <code>cible</code> n'est pas un {{jsxref("Object")}}.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>La méthode <code>Reflect.get</code> permet d'obtenir une propriété d'un objet. Elle est équivalent à <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_de_membres">un accesseur de propriété</a> mais sous la forme d'une fonction.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<pre class="brush: js">// Object
-var obj = { x: 1, y: 2 };
-Reflect.get(obj, "x"); // 1
-
-// Array
-Reflect.get(["zero", "un"], 1); // "un"
-
-// Proxy qui intercepte get
-var x = {p: 1};
-var obj = new Proxy(x, {
-  get(t, k, r) { return k + "truc"; }
-});
-Reflect.get(obj, "toto"); // "tototruc"
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-reflect.get', 'Reflect.get')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td>Définition initiale</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-reflect.get', 'Reflect.get')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Reflect.get")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Reflect")}}</li>
- <li><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_de_membres">Accesseurs de propriété</a></li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/reflect/get/index.md b/files/fr/web/javascript/reference/global_objects/reflect/get/index.md
new file mode 100644
index 0000000000..12e8fd4936
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/reflect/get/index.md
@@ -0,0 +1,76 @@
+---
+title: Reflect.get()
+slug: Web/JavaScript/Reference/Global_Objects/Reflect/get
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Méthode
+  - Reference
+  - Reflect
+translation_of: Web/JavaScript/Reference/Global_Objects/Reflect/get
+original_slug: Web/JavaScript/Reference/Objets_globaux/Reflect/get
+---
+{{JSRef}}
+
+La méthode statique **`Reflect.get()`** est une fonction qui permet d'obtenir une propriété d'un objet cible. Elle fonctionne comme (`cible[cléPropriété]`) mais sous la forme d'une fonction.
+
+{{EmbedInteractiveExample("pages/js/reflect-get.html")}}
+
+## Syntaxe
+
+    Reflect.get(cible, cléPropriété[, récepteur])
+
+### Paramètres
+
+- `cible`
+  - : L'objet cible dont on souhaite obtenir la propriété.
+- `cléPropriété`
+  - : Le nom de la propriété qu'on souhaite obtenir.
+- `récepteur` {{optional_inline}}
+  - : La valeur de `this` à passer à `cible` si l'accesseur est utilisé. Lorsqu'on l'utilise avec {{jsxref("Proxy")}}, ce peut être un objet qui hérite de la cible.
+
+### Valeur de retour
+
+La valeur de la propriété.
+
+### Exceptions
+
+Une erreur {{jsxref("TypeError")}} si `cible` n'est pas un {{jsxref("Object")}}.
+
+## Description
+
+La méthode `Reflect.get` permet d'obtenir une propriété d'un objet. Elle est équivalent à [un accesseur de propriété](/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_de_membres) mais sous la forme d'une fonction.
+
+## Exemples
+
+```js
+// Object
+var obj = { x: 1, y: 2 };
+Reflect.get(obj, "x"); // 1
+
+// Array
+Reflect.get(["zero", "un"], 1); // "un"
+
+// Proxy qui intercepte get
+var x = {p: 1};
+var obj = new Proxy(x, {
+  get(t, k, r) { return k + "truc"; }
+});
+Reflect.get(obj, "toto"); // "tototruc"
+```
+
+## Spécifications
+
+| Spécification                                                                | État                         | Commentaires        |
+| ---------------------------------------------------------------------------- | ---------------------------- | ------------------- |
+| {{SpecName('ES2015', '#sec-reflect.get', 'Reflect.get')}} | {{Spec2('ES2015')}}     | Définition initiale |
+| {{SpecName('ESDraft', '#sec-reflect.get', 'Reflect.get')}} | {{Spec2('ESDraft')}} |                     |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Reflect.get")}}
+
+## Voir aussi
+
+- {{jsxref("Reflect")}}
+- [Accesseurs de propriété](/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_de_membres)
diff --git a/files/fr/web/javascript/reference/global_objects/reflect/getownpropertydescriptor/index.html b/files/fr/web/javascript/reference/global_objects/reflect/getownpropertydescriptor/index.html
deleted file mode 100644
index be67182701..0000000000
--- a/files/fr/web/javascript/reference/global_objects/reflect/getownpropertydescriptor/index.html
+++ /dev/null
@@ -1,100 +0,0 @@
----
-title: Reflect.getOwnPropertyDescriptor()
-slug: Web/JavaScript/Reference/Global_Objects/Reflect/getOwnPropertyDescriptor
-tags:
-  - ECMAScript 2015
-  - JavaScript
-  - Méthode
-  - Reference
-  - Reflect
-translation_of: Web/JavaScript/Reference/Global_Objects/Reflect/getOwnPropertyDescriptor
-original_slug: Web/JavaScript/Reference/Objets_globaux/Reflect/getOwnPropertyDescriptor
----
-<div>{{JSRef}}</div>
-
-<p>La méthode statique <code><strong>Reflect</strong></code><strong><code>.getOwnPropertyDescriptor()</code></strong> est similaire à {{jsxref("Object.getOwnPropertyDescriptor()")}}. Elle renvoie un descripteur de propriété pour la propriété visée si elle existe sur l'objet, sinon, elle renvoie {{jsxref("undefined")}}.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/reflect-getownpropertydescriptor.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">Reflect.getOwnPropertyDescriptor(<var>cible</var>, <var>cléPropriété</var>)
-</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>cible</code></dt>
- <dd>L'objet cible sur lequel on cherche la propriété.</dd>
- <dt><code>cléPropriété</code></dt>
- <dd>Le nom de la propriété dont on veut obtenir le descripteur.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Un objet qui est un descripteur de propriété si elle existe sur l'objet cible ou {{jsxref("undefined")}} dans le cas contraire.</p>
-
-<h3 id="Exceptions">Exceptions</h3>
-
-<p>Une erreur {{jsxref("TypeError")}} si <code>cible</code> n'est pas un {{jsxref("Object")}}.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>La méthode <code>Reflect.getOwnPropertyDescriptor</code> renvoie un descripteur pour la propriété demandée si celle-ci existe sur l'objet, sinon, elle renvoie {{jsxref("undefined")}}. La seule différence avec {{jsxref("Object.getOwnPropertyDescriptor()")}} est la façon dont les cibles qui ne sont pas des objets sont gérées.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Utiliser_Reflect.getOwnPropertyDescriptor()">Utiliser <code>Reflect.getOwnPropertyDescriptor()</code></h3>
-
-<pre class="brush: js">Reflect.getOwnPropertyDescriptor({x: "coucou"}, "x");
-// {value: "coucou", writable: true, enumerable: true, configurable: true}
-
-Reflect.getOwnPropertyDescriptor({x: "coucou"}, "y");
-// undefined
-
-Reflect.getOwnPropertyDescriptor([], "length");
-// {value: 0, writable: true, enumerable: false, configurable: false}
-</pre>
-
-<h3 id="Différence_avec_Object.getOwnPropertyDescriptor()">Différence avec <code>Object.getOwnPropertyDescriptor()</code></h3>
-
-<p>Si le premier argument passé à la méthode n'est pas un objet (autrement dit si c'est une valeur de type primitif), cela causera une exception {{jsxref("TypeError")}}. Si on utilise {{jsxref("Object.getOwnPropertyDescriptor")}}, une valeur qui n'est pas un objet sera d'abord convertie en objet.</p>
-
-<pre class="brush: js">Reflect.getOwnPropertyDescriptor("toto", 0);
-// TypeError: "toto" is not non-null object
-
-Object.getOwnPropertyDescriptor("toto", 0);
-// { value: "toto", writable: false, enumerable: true, configurable: false }</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-reflect.getownpropertydescriptor', 'Reflect.getOwnPropertyDescriptor')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-reflect.getownpropertydescriptor', 'Reflect.getOwnPropertyDescriptor')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Reflect.getOwnPropertyDescriptor")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Reflect")}}</li>
- <li>{{jsxref("Object.getOwnPropertyDescriptor()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/reflect/getownpropertydescriptor/index.md b/files/fr/web/javascript/reference/global_objects/reflect/getownpropertydescriptor/index.md
new file mode 100644
index 0000000000..012a95c2a8
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/reflect/getownpropertydescriptor/index.md
@@ -0,0 +1,83 @@
+---
+title: Reflect.getOwnPropertyDescriptor()
+slug: Web/JavaScript/Reference/Global_Objects/Reflect/getOwnPropertyDescriptor
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Méthode
+  - Reference
+  - Reflect
+translation_of: Web/JavaScript/Reference/Global_Objects/Reflect/getOwnPropertyDescriptor
+original_slug: Web/JavaScript/Reference/Objets_globaux/Reflect/getOwnPropertyDescriptor
+---
+{{JSRef}}
+
+La méthode statique **`Reflect`\*\***`.getOwnPropertyDescriptor()`\*\* est similaire à {{jsxref("Object.getOwnPropertyDescriptor()")}}. Elle renvoie un descripteur de propriété pour la propriété visée si elle existe sur l'objet, sinon, elle renvoie {{jsxref("undefined")}}.
+
+{{EmbedInteractiveExample("pages/js/reflect-getownpropertydescriptor.html")}}
+
+## Syntaxe
+
+    Reflect.getOwnPropertyDescriptor(cible, cléPropriété)
+
+### Paramètres
+
+- `cible`
+  - : L'objet cible sur lequel on cherche la propriété.
+- `cléPropriété`
+  - : Le nom de la propriété dont on veut obtenir le descripteur.
+
+### Valeur de retour
+
+Un objet qui est un descripteur de propriété si elle existe sur l'objet cible ou {{jsxref("undefined")}} dans le cas contraire.
+
+### Exceptions
+
+Une erreur {{jsxref("TypeError")}} si `cible` n'est pas un {{jsxref("Object")}}.
+
+## Description
+
+La méthode `Reflect.getOwnPropertyDescriptor` renvoie un descripteur pour la propriété demandée si celle-ci existe sur l'objet, sinon, elle renvoie {{jsxref("undefined")}}. La seule différence avec {{jsxref("Object.getOwnPropertyDescriptor()")}} est la façon dont les cibles qui ne sont pas des objets sont gérées.
+
+## Exemples
+
+### Utiliser `Reflect.getOwnPropertyDescriptor()`
+
+```js
+Reflect.getOwnPropertyDescriptor({x: "coucou"}, "x");
+// {value: "coucou", writable: true, enumerable: true, configurable: true}
+
+Reflect.getOwnPropertyDescriptor({x: "coucou"}, "y");
+// undefined
+
+Reflect.getOwnPropertyDescriptor([], "length");
+// {value: 0, writable: true, enumerable: false, configurable: false}
+```
+
+### Différence avec `Object.getOwnPropertyDescriptor()`
+
+Si le premier argument passé à la méthode n'est pas un objet (autrement dit si c'est une valeur de type primitif), cela causera une exception {{jsxref("TypeError")}}. Si on utilise {{jsxref("Object.getOwnPropertyDescriptor")}}, une valeur qui n'est pas un objet sera d'abord convertie en objet.
+
+```js
+Reflect.getOwnPropertyDescriptor("toto", 0);
+// TypeError: "toto" is not non-null object
+
+Object.getOwnPropertyDescriptor("toto", 0);
+// { value: "toto", writable: false, enumerable: true, configurable: false }
+```
+
+## Spécifications
+
+| Spécification                                                                                                                        | État                         | Commentaires         |
+| ------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------- | -------------------- |
+| {{SpecName('ES2015', '#sec-reflect.getownpropertydescriptor', 'Reflect.getOwnPropertyDescriptor')}} | {{Spec2('ES2015')}}     | Définition initiale. |
+| {{SpecName('ESDraft', '#sec-reflect.getownpropertydescriptor', 'Reflect.getOwnPropertyDescriptor')}} | {{Spec2('ESDraft')}} |                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Reflect.getOwnPropertyDescriptor")}}
+
+## Voir aussi
+
+- {{jsxref("Reflect")}}
+- {{jsxref("Object.getOwnPropertyDescriptor()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/reflect/getprototypeof/index.html b/files/fr/web/javascript/reference/global_objects/reflect/getprototypeof/index.html
deleted file mode 100644
index 9a4aef5aaf..0000000000
--- a/files/fr/web/javascript/reference/global_objects/reflect/getprototypeof/index.html
+++ /dev/null
@@ -1,103 +0,0 @@
----
-title: Reflect.getPrototypeOf()
-slug: Web/JavaScript/Reference/Global_Objects/Reflect/getPrototypeOf
-tags:
-  - ECMAScript 2015
-  - JavaScript
-  - Méthode
-  - Reference
-  - Reflect
-translation_of: Web/JavaScript/Reference/Global_Objects/Reflect/getPrototypeOf
-original_slug: Web/JavaScript/Reference/Objets_globaux/Reflect/getPrototypeOf
----
-<div>{{JSRef}}</div>
-
-<p>La méthode statique <code><strong>Reflect</strong></code><strong><code>.getPrototypeOf()</code></strong> est semblable à la méthode {{jsxref("Object.getPrototypeOf()")}}. Elle renvoie le prototype (c'est-à-dire la valeur de la propriété interne <code>[[Prototype]]</code>) de l'objet donné.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/reflect-getprototypeof.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">Reflect.getPrototypeOf(<var>cible</var>)
-</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>cible</code></dt>
- <dd>L'objet cible dont on souhaite obtenir le prototype.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Le prototype de l'objet ou {{jsxref("null")}} s'il n'y a aucune propriété héritée.</p>
-
-<h3 id="Exceptions_levées">Exceptions levées</h3>
-
-<p>Une erreur {{jsxref("TypeError")}} si <code>cible</code> n'est pas un {{jsxref("Object")}}.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>La méthode <code>Reflect.getPrototypeOf</code> renvoie le prototype (qui correspond en réalité à la valeur de la propriété interne <code>[[Prototype]]</code>) de l'objet passé en argument.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Utiliser_Reflect.getPrototypeOf()">Utiliser <code>Reflect.getPrototypeOf()</code></h3>
-
-<pre class="brush: js">Reflect.getPrototypeOf({}); // Object.prototype
-Reflect.getPrototypeOf(Object.prototype); // null
-Reflect.getPrototypeOf(Object.create(null)); // null
-</pre>
-
-<h3 id="Comparaison_avec_Object.getPrototypeOf()">Comparaison avec <code>Object.getPrototypeOf()</code></h3>
-
-<pre class="brush: js">// Résultat identiques pour les objets
-Object.getPrototypeOf({});  // Object.prototype
-Reflect.getPrototypeOf({}); // Object.prototype
-
-// Exception levée avec ES5 pour les valeurs qui ne sont pas des objets
-Object.getPrototypeOf('toto');  // Throws TypeError
-Reflect.getPrototypeOf('toto'); // Throws TypeError
-
-// Avec ES2015 (ES6), seul Reflect lève une exception
-// Object convertit automatiquement les valeurs en objets
-Object.getPrototypeOf('toto');  // String.prototype
-Reflect.getPrototypeOf('toto'); // Throws TypeError
-
-// Pour obtenir le même effet qu'avec Object en ES2015, il
-// faut ajouter une opération de conversion explicite
-Reflect.getPrototypeOf(Object('toto')); // String.prototype
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-reflect.getprototypeof', 'Reflect.getPrototypeOf')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-reflect.getprototypeof', 'Reflect.getPrototypeOf')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Reflect.getPrototypeOf")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Reflect")}}</li>
- <li>{{jsxref("Object.getPrototypeOf()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/reflect/getprototypeof/index.md b/files/fr/web/javascript/reference/global_objects/reflect/getprototypeof/index.md
new file mode 100644
index 0000000000..3f7106a7b6
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/reflect/getprototypeof/index.md
@@ -0,0 +1,85 @@
+---
+title: Reflect.getPrototypeOf()
+slug: Web/JavaScript/Reference/Global_Objects/Reflect/getPrototypeOf
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Méthode
+  - Reference
+  - Reflect
+translation_of: Web/JavaScript/Reference/Global_Objects/Reflect/getPrototypeOf
+original_slug: Web/JavaScript/Reference/Objets_globaux/Reflect/getPrototypeOf
+---
+{{JSRef}}
+
+La méthode statique **`Reflect`\*\***`.getPrototypeOf()`\*\* est semblable à la méthode {{jsxref("Object.getPrototypeOf()")}}. Elle renvoie le prototype (c'est-à-dire la valeur de la propriété interne `[[Prototype]]`) de l'objet donné.
+
+{{EmbedInteractiveExample("pages/js/reflect-getprototypeof.html")}}
+
+## Syntaxe
+
+    Reflect.getPrototypeOf(cible)
+
+### Paramètres
+
+- `cible`
+  - : L'objet cible dont on souhaite obtenir le prototype.
+
+### Valeur de retour
+
+Le prototype de l'objet ou {{jsxref("null")}} s'il n'y a aucune propriété héritée.
+
+### Exceptions levées
+
+Une erreur {{jsxref("TypeError")}} si `cible` n'est pas un {{jsxref("Object")}}.
+
+## Description
+
+La méthode `Reflect.getPrototypeOf` renvoie le prototype (qui correspond en réalité à la valeur de la propriété interne `[[Prototype]]`) de l'objet passé en argument.
+
+## Exemples
+
+### Utiliser `Reflect.getPrototypeOf()`
+
+```js
+Reflect.getPrototypeOf({}); // Object.prototype
+Reflect.getPrototypeOf(Object.prototype); // null
+Reflect.getPrototypeOf(Object.create(null)); // null
+```
+
+### Comparaison avec `Object.getPrototypeOf()`
+
+```js
+// Résultat identiques pour les objets
+Object.getPrototypeOf({});  // Object.prototype
+Reflect.getPrototypeOf({}); // Object.prototype
+
+// Exception levée avec ES5 pour les valeurs qui ne sont pas des objets
+Object.getPrototypeOf('toto');  // Throws TypeError
+Reflect.getPrototypeOf('toto'); // Throws TypeError
+
+// Avec ES2015 (ES6), seul Reflect lève une exception
+// Object convertit automatiquement les valeurs en objets
+Object.getPrototypeOf('toto');  // String.prototype
+Reflect.getPrototypeOf('toto'); // Throws TypeError
+
+// Pour obtenir le même effet qu'avec Object en ES2015, il
+// faut ajouter une opération de conversion explicite
+Reflect.getPrototypeOf(Object('toto')); // String.prototype
+```
+
+## Spécifications
+
+| Spécification                                                                                                | État                         | Commentaires         |
+| ------------------------------------------------------------------------------------------------------------ | ---------------------------- | -------------------- |
+| {{SpecName('ES2015', '#sec-reflect.getprototypeof', 'Reflect.getPrototypeOf')}}     | {{Spec2('ES2015')}}     | Définition initiale. |
+| {{SpecName('ESDraft', '#sec-reflect.getprototypeof', 'Reflect.getPrototypeOf')}} | {{Spec2('ESDraft')}} |                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Reflect.getPrototypeOf")}}
+
+## Voir aussi
+
+- {{jsxref("Reflect")}}
+- {{jsxref("Object.getPrototypeOf()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/reflect/has/index.html b/files/fr/web/javascript/reference/global_objects/reflect/has/index.html
deleted file mode 100644
index 934408cf86..0000000000
--- a/files/fr/web/javascript/reference/global_objects/reflect/has/index.html
+++ /dev/null
@@ -1,93 +0,0 @@
----
-title: Reflect.has()
-slug: Web/JavaScript/Reference/Global_Objects/Reflect/has
-tags:
-  - ECMAScript 2015
-  - JavaScript
-  - Méthode
-  - Reference
-  - Reflect
-translation_of: Web/JavaScript/Reference/Global_Objects/Reflect/has
-original_slug: Web/JavaScript/Reference/Objets_globaux/Reflect/has
----
-<div>{{JSRef}}</div>
-
-<p>La méthode statique <code><strong>Reflect</strong></code><strong><code>.has()</code></strong> fonctionne comme <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_in">l'opérateur <code>in</code></a> mais sous forme d'une fonction.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/reflect-has.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">Reflect.has(<var>cible</var>, <var>cléPropriété</var>)
-</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>cible</code></dt>
- <dd>L'objet cible dont on souhaite savoir s'il contient la propriété donnée.</dd>
- <dt><code>cléPropriété</code></dt>
- <dd>Le nom de la propriété dont on souhaite vérifier la présence.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Un {{jsxref("Boolean","booléen","",1)}} qui indique si la propriété recherchée est présente sur l'objet cible.</p>
-
-<h3 id="Exceptions">Exceptions</h3>
-
-<p>Une erreur {{jsxref("TypeError")}} si <code>cible</code> n'est pas un {{jsxref("Object")}}.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>La méthode <code>Reflect.has</code> vous permet de vérifier si une propriété est présente sur un objet. C'est une fonction qui agit comme l'opérateur <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_in"><code>in</code></a>.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<pre class="brush: js">Reflect.has({x: 0}, "x"); // true
-Reflect.has({x: 0}, "y"); // false
-
-// renvoie true pour les propriétés présentes
-// grâce à la chaîne de prototypes
-Reflect.has({x: 0}, "toString");
-
-// Proxy avec la méthode .has()
-obj = new Proxy({}, {
-  has(t, k) { return k.startsWith("bou"); }
-});
-Reflect.has(obj, "bouchon"); // true
-Reflect.has(obj, "bonbon");  // false
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-reflect.has', 'Reflect.has')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-reflect.has', 'Reflect.has')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Reflect.has")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Reflect")}}</li>
- <li><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_in">Opérateur <code>in</code></a></li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/reflect/has/index.md b/files/fr/web/javascript/reference/global_objects/reflect/has/index.md
new file mode 100644
index 0000000000..0e8be7e9f9
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/reflect/has/index.md
@@ -0,0 +1,74 @@
+---
+title: Reflect.has()
+slug: Web/JavaScript/Reference/Global_Objects/Reflect/has
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Méthode
+  - Reference
+  - Reflect
+translation_of: Web/JavaScript/Reference/Global_Objects/Reflect/has
+original_slug: Web/JavaScript/Reference/Objets_globaux/Reflect/has
+---
+{{JSRef}}
+
+La méthode statique **`Reflect`\*\***`.has()`\*\* fonctionne comme [l'opérateur `in`](/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_in) mais sous forme d'une fonction.
+
+{{EmbedInteractiveExample("pages/js/reflect-has.html")}}
+
+## Syntaxe
+
+    Reflect.has(cible, cléPropriété)
+
+### Paramètres
+
+- `cible`
+  - : L'objet cible dont on souhaite savoir s'il contient la propriété donnée.
+- `cléPropriété`
+  - : Le nom de la propriété dont on souhaite vérifier la présence.
+
+### Valeur de retour
+
+Un {{jsxref("Boolean","booléen","",1)}} qui indique si la propriété recherchée est présente sur l'objet cible.
+
+### Exceptions
+
+Une erreur {{jsxref("TypeError")}} si `cible` n'est pas un {{jsxref("Object")}}.
+
+## Description
+
+La méthode `Reflect.has` vous permet de vérifier si une propriété est présente sur un objet. C'est une fonction qui agit comme l'opérateur [`in`](/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_in).
+
+## Exemples
+
+```js
+Reflect.has({x: 0}, "x"); // true
+Reflect.has({x: 0}, "y"); // false
+
+// renvoie true pour les propriétés présentes
+// grâce à la chaîne de prototypes
+Reflect.has({x: 0}, "toString");
+
+// Proxy avec la méthode .has()
+obj = new Proxy({}, {
+  has(t, k) { return k.startsWith("bou"); }
+});
+Reflect.has(obj, "bouchon"); // true
+Reflect.has(obj, "bonbon");  // false
+```
+
+## Spécifications
+
+| Spécification                                                                | État                         | Commentaires         |
+| ---------------------------------------------------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName('ES2015', '#sec-reflect.has', 'Reflect.has')}} | {{Spec2('ES2015')}}     | Définition initiale. |
+| {{SpecName('ESDraft', '#sec-reflect.has', 'Reflect.has')}} | {{Spec2('ESDraft')}} |                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Reflect.has")}}
+
+## Voir aussi
+
+- {{jsxref("Reflect")}}
+- [Opérateur `in`](/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_in)
diff --git a/files/fr/web/javascript/reference/global_objects/reflect/index.html b/files/fr/web/javascript/reference/global_objects/reflect/index.html
deleted file mode 100644
index b61cb63280..0000000000
--- a/files/fr/web/javascript/reference/global_objects/reflect/index.html
+++ /dev/null
@@ -1,84 +0,0 @@
----
-title: Reflect
-slug: Web/JavaScript/Reference/Global_Objects/Reflect
-tags:
-  - ECMAScript 2015
-  - JavaScript
-  - Reference
-  - Reflect
-translation_of: Web/JavaScript/Reference/Global_Objects/Reflect
-original_slug: Web/JavaScript/Reference/Objets_globaux/Reflect
----
-<div>{{JSRef}}</div>
-
-<p><code><strong>Reflect</strong></code> est un objet natif qui fournit des méthodes pour les opérations qui peuvent être interceptées en JavaScript (via les proxies). Les méthodes de cet objet sont les mêmes que celles des <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Proxy/handler">gestionnaires de proxy</a>. <code>Reflect</code> n'est pas une fonction (y compris pour construire un objet).</p>
-
-<h2 id="Description">Description</h2>
-
-<p>Contrairement à la plupart des objets globaux, <code>Reflect</code> n'est pas un constructeur. Il ne peut pas être utilisé avec l'opérateur {{jsxref("Opérateurs/L_opérateur_new","new")}} ou être invoqué comme une fonction. Les propriétés et méthodes de <code>Reflect</code> sont statiques (comme pour celles de l'objet {{jsxref("Math")}}).</p>
-
-<h2 id="Méthodes">Méthodes</h2>
-
-<p>L'objet <code>Reflect</code> fournit des fonctions statiques qui ont les mêmes noms que les méthodes des <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Proxy/handler">gestionnaires de proxy</a> et dont certaines correspondent, <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Reflect/Comparing_Reflect_and_Object_methods">avec quelques différences</a>, à celles d'{{jsxref("Object")}} :</p>
-
-<dl>
- <dt>{{jsxref("Reflect.apply()")}}</dt>
- <dd>Appelle une fonction cible avec les arguments définis par le paramètres <code>args</code>. Voir aussi {{jsxref("Function.prototype.apply()")}}.</dd>
- <dt>{{jsxref("Reflect.construct()")}}</dt>
- <dd> L'opérateur {{jsxref("Opérateurs/L_opérateur_new","new")}} comme fonction. C'est équivalent à <code>new cible(...args)</code>. Cette méthode permet également d'indiquer un prototype différent.</dd>
- <dt>{{jsxref("Reflect.defineProperty()")}}</dt>
- <dd>Semblable à {{jsxref("Object.defineProperty()")}}. Renvoie un {{jsxref("Boolean")}}.</dd>
- <dt>{{jsxref("Reflect.deleteProperty()")}}</dt>
- <dd>L'opérateur {{jsxref("Opérateurs/L_opérateur_delete","delete")}} comme fonction. C'est équivalent à <code>delete cible[nom]</code>.</dd>
- <dt>{{jsxref("Reflect.get()")}}</dt>
- <dd>Une fonction qui renvoie la valeur d'une propriété.</dd>
- <dt>{{jsxref("Reflect.getOwnPropertyDescriptor()")}}</dt>
- <dd>Semblable à {{jsxref("Object.getOwnPropertyDescriptor()")}}. Renvoie un descripteur de propriété si la propriété existe sur l'objet, {{jsxref("undefined")}} sinon.</dd>
- <dt>{{jsxref("Reflect.getPrototypeOf()")}}</dt>
- <dd>Identique à {{jsxref("Object.getPrototypeOf()")}}.</dd>
- <dt>{{jsxref("Reflect.has()")}}</dt>
- <dd>L'opérateur {{jsxref("Opérateurs/L_opérateur_in","in")}} comme fonction. Renvoie un booléen qui indique si une telle propriété existe pour l'objet (qu'elle soit directement rattachée ou héritée).</dd>
- <dt>{{jsxref("Reflect.isExtensible()")}}</dt>
- <dd>La même fonction que {{jsxref("Object.isExtensible()")}}.</dd>
- <dt>{{jsxref("Reflect.ownKeys()")}}</dt>
- <dd>Renvoie un tableau de chaînes de caractères qui correspondent aux noms des propriétés propres (celles qui ne sont pas héritées) de l'objet.</dd>
- <dt>{{jsxref("Reflect.preventExtensions()")}}</dt>
- <dd>Semblable à {{jsxref("Object.preventExtensions()")}}. Renvoie un {{jsxref("Boolean")}}.</dd>
- <dt>{{jsxref("Reflect.set()")}}</dt>
- <dd>Une fonction qui affecte des valeurs à des propriétés. Renvoie un {{jsxref("Boolean")}} qui vaut <code>true</code> si la mise à jour a bien été effectuée.</dd>
- <dt>{{jsxref("Reflect.setPrototypeOf()")}}</dt>
- <dd>Une fonction qui permet de définir le prototype d'un objet.</dd>
-</dl>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-reflect-object', 'Reflect')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-reflect-object', 'Reflect')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td>Retrait de <code>Reflect.enumerate</code></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Reflect")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>L'objet global {{jsxref("Proxy")}}.</li>
- <li>L'objet {{jsxref("Proxy.handler", "handler")}}.</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/reflect/index.md b/files/fr/web/javascript/reference/global_objects/reflect/index.md
new file mode 100644
index 0000000000..a00114cb15
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/reflect/index.md
@@ -0,0 +1,65 @@
+---
+title: Reflect
+slug: Web/JavaScript/Reference/Global_Objects/Reflect
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Reference
+  - Reflect
+translation_of: Web/JavaScript/Reference/Global_Objects/Reflect
+original_slug: Web/JavaScript/Reference/Objets_globaux/Reflect
+---
+{{JSRef}}
+
+**`Reflect`** est un objet natif qui fournit des méthodes pour les opérations qui peuvent être interceptées en JavaScript (via les proxies). Les méthodes de cet objet sont les mêmes que celles des [gestionnaires de proxy](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Proxy/handler). `Reflect` n'est pas une fonction (y compris pour construire un objet).
+
+## Description
+
+Contrairement à la plupart des objets globaux, `Reflect` n'est pas un constructeur. Il ne peut pas être utilisé avec l'opérateur {{jsxref("Opérateurs/L_opérateur_new","new")}} ou être invoqué comme une fonction. Les propriétés et méthodes de `Reflect` sont statiques (comme pour celles de l'objet {{jsxref("Math")}}).
+
+## Méthodes
+
+L'objet `Reflect` fournit des fonctions statiques qui ont les mêmes noms que les méthodes des [gestionnaires de proxy](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Proxy/handler) et dont certaines correspondent, [avec quelques différences](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Reflect/Comparing_Reflect_and_Object_methods), à celles d'{{jsxref("Object")}} :
+
+- {{jsxref("Reflect.apply()")}}
+  - : Appelle une fonction cible avec les arguments définis par le paramètres `args`. Voir aussi {{jsxref("Function.prototype.apply()")}}.
+- {{jsxref("Reflect.construct()")}}
+  - :  L'opérateur {{jsxref("Opérateurs/L_opérateur_new","new")}} comme fonction. C'est équivalent à `new cible(...args)`. Cette méthode permet également d'indiquer un prototype différent.
+- {{jsxref("Reflect.defineProperty()")}}
+  - : Semblable à {{jsxref("Object.defineProperty()")}}. Renvoie un {{jsxref("Boolean")}}.
+- {{jsxref("Reflect.deleteProperty()")}}
+  - : L'opérateur {{jsxref("Opérateurs/L_opérateur_delete","delete")}} comme fonction. C'est équivalent à `delete cible[nom]`.
+- {{jsxref("Reflect.get()")}}
+  - : Une fonction qui renvoie la valeur d'une propriété.
+- {{jsxref("Reflect.getOwnPropertyDescriptor()")}}
+  - : Semblable à {{jsxref("Object.getOwnPropertyDescriptor()")}}. Renvoie un descripteur de propriété si la propriété existe sur l'objet, {{jsxref("undefined")}} sinon.
+- {{jsxref("Reflect.getPrototypeOf()")}}
+  - : Identique à {{jsxref("Object.getPrototypeOf()")}}.
+- {{jsxref("Reflect.has()")}}
+  - : L'opérateur {{jsxref("Opérateurs/L_opérateur_in","in")}} comme fonction. Renvoie un booléen qui indique si une telle propriété existe pour l'objet (qu'elle soit directement rattachée ou héritée).
+- {{jsxref("Reflect.isExtensible()")}}
+  - : La même fonction que {{jsxref("Object.isExtensible()")}}.
+- {{jsxref("Reflect.ownKeys()")}}
+  - : Renvoie un tableau de chaînes de caractères qui correspondent aux noms des propriétés propres (celles qui ne sont pas héritées) de l'objet.
+- {{jsxref("Reflect.preventExtensions()")}}
+  - : Semblable à {{jsxref("Object.preventExtensions()")}}. Renvoie un {{jsxref("Boolean")}}.
+- {{jsxref("Reflect.set()")}}
+  - : Une fonction qui affecte des valeurs à des propriétés. Renvoie un {{jsxref("Boolean")}} qui vaut `true` si la mise à jour a bien été effectuée.
+- {{jsxref("Reflect.setPrototypeOf()")}}
+  - : Une fonction qui permet de définir le prototype d'un objet.
+
+## Spécifications
+
+| Spécification                                                                | État                         | Commentaires                   |
+| ---------------------------------------------------------------------------- | ---------------------------- | ------------------------------ |
+| {{SpecName('ES2015', '#sec-reflect-object', 'Reflect')}} | {{Spec2('ES2015')}}     | Définition initiale.           |
+| {{SpecName('ESDraft', '#sec-reflect-object', 'Reflect')}} | {{Spec2('ESDraft')}} | Retrait de `Reflect.enumerate` |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Reflect")}}
+
+## Voir aussi
+
+- L'objet global {{jsxref("Proxy")}}.
+- L'objet {{jsxref("Proxy.handler", "handler")}}.
diff --git a/files/fr/web/javascript/reference/global_objects/reflect/isextensible/index.html b/files/fr/web/javascript/reference/global_objects/reflect/isextensible/index.html
deleted file mode 100644
index 8e62fcea08..0000000000
--- a/files/fr/web/javascript/reference/global_objects/reflect/isextensible/index.html
+++ /dev/null
@@ -1,110 +0,0 @@
----
-title: Reflect.isExtensible()
-slug: Web/JavaScript/Reference/Global_Objects/Reflect/isExtensible
-tags:
-  - ECMAScript 2015
-  - JavaScript
-  - Méthode
-  - Reference
-  - Reflect
-translation_of: Web/JavaScript/Reference/Global_Objects/Reflect/isExtensible
-original_slug: Web/JavaScript/Reference/Objets_globaux/Reflect/isExtensible
----
-<div>{{JSRef}}</div>
-
-<p>La méthode statique <code><strong>Reflect.isExtensible()</strong></code> permet de déterminer si un objet est extensible (i.e. si on peut lui ajouter de nouvelles propriétés). Elle est semblable à la méthode {{jsxref("Object.isExtensible()")}} (modulo <a href="#diffs">quelques différences</a>).</p>
-
-<div>{{EmbedInteractiveExample("pages/js/reflect-isextensible.html", "taller")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">Reflect.isExtensible(<var>cible</var>)
-</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>cible</code></dt>
- <dd>L'objet cible dont on souhaite savoir s'il est extensible.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Un {{jsxref("Boolean","booléen", "",1)}} qui indique si la cible est extensible ou non.</p>
-
-<h3 id="Exceptions">Exceptions</h3>
-
-<p>Une erreur {{jsxref("TypeError")}} si <code>cible</code> n'est pas un {{jsxref("Object")}}.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>La méthode <code>Reflect.isExtensible</code> permet de déterminer si un objet est extensible (autrement dit si on peut lui ajouter de nouvelles propriétés). Cette méthode est semblable à la méthode {{jsxref("Object.isExtensible()")}}.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Utiliser_Reflect.isExtensible()">Utiliser <code>Reflect.isExtensible()</code></h3>
-
-<p>Voir aussi {{jsxref("Object.isExtensible()")}}.</p>
-
-<pre class="brush: js">// Les nouveaux objets sont extensibles.
-var vide = {};
-Reflect.isExtensible(vide); // true
-
-// ...mais ça peut être changé.
-Reflect.preventExtensions(vide);
-Reflect.isExtensible(vide); // false
-
-// Par définition, les objets scellés
-// ne sont pas extensibles.
-var scellé = Object.seal({});
-Reflect.isExtensible(scellé); // false
-
-// Par définition, les objets gelés sont
-// également non-extensibles.
-var gelé = Object.freeze({});
-Reflect.isExtensible(gelé); // false
-</pre>
-
-<h3 id="Différence_avec_Object.isExtensible()">Différence avec <code>Object.isExtensible()</code></h3>
-
-<p>Si le premier argument passé à la méthode n'est pas un objet (autrement dit si la valeur est une valeur primitive), cela provoquera une exception {{jsxref("TypeError")}}. La méthode {{jsxref("Object.isExtensible()")}} aurait commencé par convertir l'argument en un objet.</p>
-
-<pre class="brush: js">Reflect.isExtensible(1);
-// TypeError: 1 is not an object
-
-Object.isExtensible(1);
-// false
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-reflect.isextensible', 'Reflect.isExtensible')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-reflect.isextensible', 'Reflect.isExtensible')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Reflect.isExtensible")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Reflect")}}</li>
- <li>{{jsxref("Object.isExtensible()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/reflect/isextensible/index.md b/files/fr/web/javascript/reference/global_objects/reflect/isextensible/index.md
new file mode 100644
index 0000000000..a779cf765a
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/reflect/isextensible/index.md
@@ -0,0 +1,92 @@
+---
+title: Reflect.isExtensible()
+slug: Web/JavaScript/Reference/Global_Objects/Reflect/isExtensible
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Méthode
+  - Reference
+  - Reflect
+translation_of: Web/JavaScript/Reference/Global_Objects/Reflect/isExtensible
+original_slug: Web/JavaScript/Reference/Objets_globaux/Reflect/isExtensible
+---
+{{JSRef}}
+
+La méthode statique **`Reflect.isExtensible()`** permet de déterminer si un objet est extensible (i.e. si on peut lui ajouter de nouvelles propriétés). Elle est semblable à la méthode {{jsxref("Object.isExtensible()")}} (modulo [quelques différences](#diffs)).
+
+{{EmbedInteractiveExample("pages/js/reflect-isextensible.html", "taller")}}
+
+## Syntaxe
+
+    Reflect.isExtensible(cible)
+
+### Paramètres
+
+- `cible`
+  - : L'objet cible dont on souhaite savoir s'il est extensible.
+
+### Valeur de retour
+
+Un {{jsxref("Boolean","booléen", "",1)}} qui indique si la cible est extensible ou non.
+
+### Exceptions
+
+Une erreur {{jsxref("TypeError")}} si `cible` n'est pas un {{jsxref("Object")}}.
+
+## Description
+
+La méthode `Reflect.isExtensible` permet de déterminer si un objet est extensible (autrement dit si on peut lui ajouter de nouvelles propriétés). Cette méthode est semblable à la méthode {{jsxref("Object.isExtensible()")}}.
+
+## Exemples
+
+### Utiliser `Reflect.isExtensible()`
+
+Voir aussi {{jsxref("Object.isExtensible()")}}.
+
+```js
+// Les nouveaux objets sont extensibles.
+var vide = {};
+Reflect.isExtensible(vide); // true
+
+// ...mais ça peut être changé.
+Reflect.preventExtensions(vide);
+Reflect.isExtensible(vide); // false
+
+// Par définition, les objets scellés
+// ne sont pas extensibles.
+var scellé = Object.seal({});
+Reflect.isExtensible(scellé); // false
+
+// Par définition, les objets gelés sont
+// également non-extensibles.
+var gelé = Object.freeze({});
+Reflect.isExtensible(gelé); // false
+```
+
+### Différence avec `Object.isExtensible()`
+
+Si le premier argument passé à la méthode n'est pas un objet (autrement dit si la valeur est une valeur primitive), cela provoquera une exception {{jsxref("TypeError")}}. La méthode {{jsxref("Object.isExtensible()")}} aurait commencé par convertir l'argument en un objet.
+
+```js
+Reflect.isExtensible(1);
+// TypeError: 1 is not an object
+
+Object.isExtensible(1);
+// false
+```
+
+## Spécifications
+
+| Spécification                                                                                        | État                         | Commentaires         |
+| ---------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName('ES2015', '#sec-reflect.isextensible', 'Reflect.isExtensible')}} | {{Spec2('ES2015')}}     | Définition initiale. |
+| {{SpecName('ESDraft', '#sec-reflect.isextensible', 'Reflect.isExtensible')}} | {{Spec2('ESDraft')}} |                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Reflect.isExtensible")}}
+
+## Voir aussi
+
+- {{jsxref("Reflect")}}
+- {{jsxref("Object.isExtensible()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/reflect/ownkeys/index.html b/files/fr/web/javascript/reference/global_objects/reflect/ownkeys/index.html
deleted file mode 100644
index 88d1747eff..0000000000
--- a/files/fr/web/javascript/reference/global_objects/reflect/ownkeys/index.html
+++ /dev/null
@@ -1,90 +0,0 @@
----
-title: Reflect.ownKeys()
-slug: Web/JavaScript/Reference/Global_Objects/Reflect/ownKeys
-tags:
-  - ECMAScript 2015
-  - JavaScript
-  - Méthode
-  - Reference
-  - Reflect
-translation_of: Web/JavaScript/Reference/Global_Objects/Reflect/ownKeys
-original_slug: Web/JavaScript/Reference/Objets_globaux/Reflect/ownKeys
----
-<p>{{JSRef}}</p>
-
-<p>La méthode statique <strong><code>Reflect.ownKeys()</code></strong> renvoie un tableau qui contient les clés des propriétés propres (non héritées) de l'objet  <code>cible</code>.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/reflect-ownkeys.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">Reflect.ownKeys(<var>cible</var>)
-</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>cible</code></dt>
- <dd>L'objet cible dont on souhaite obtenir les noms et symboles des propriétés propres.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Un objet {{jsxref("Array")}} qui contient les clés des propriétés propres de <code>cible</code>.</p>
-
-<h3 id="Exceptions">Exceptions</h3>
-
-<p>Une erreur {{jsxref("TypeError")}} si <code>cible</code> n'est pas un {{jsxref("Object")}}.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>La méthode <code>Reflect.ownKeys</code> renvoie un tableau dont les éléments sont les clés des propriétés propres de l'objet <code>cible</code>. Sa valeur de retour est équivalente à <code>{{jsxref("Object.getOwnPropertyNames", "Object.getOwnPropertyNames(target)", "", 1)}}.concat({{jsxref("Object.getOwnPropertySymbols", "Object.getOwnPropertySymbols(target)", "", 1)}})</code>.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<pre>Reflect.ownKeys({z: 3, y: 2, x: 1}); // [ "z", "y", "x" ]
-Reflect.ownKeys([]); // ["length"]
-
-var sym = Symbol.for("comète");
-var sym2 = Symbol.for("météore");
-var obj = {[sym]: 0, "str1": 0, "773": 0, "0": 0,
-           [sym2]: 0, "-1": 0, "8": 0, "seconde str": 0};
-Reflect.ownKeys(obj);
-// [ "0", "8", "773", "str1", "-1", "seconde str", Symbol(comète), Symbol(météore) ]
-// Indices dans l'ordre numérique
-// Chaînes de caractères dans l'ordre d'insertion
-// Symboles dans l'ordre d'insertion
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-reflect.ownkeys', 'Reflect.ownKeys')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-reflect.ownkeys', 'Reflect.ownKeys')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Reflect.ownKeys")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Reflect")}}</li>
- <li>{{jsxref("Object.getOwnPropertyNames()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/reflect/ownkeys/index.md b/files/fr/web/javascript/reference/global_objects/reflect/ownkeys/index.md
new file mode 100644
index 0000000000..2a1f0a4323
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/reflect/ownkeys/index.md
@@ -0,0 +1,69 @@
+---
+title: Reflect.ownKeys()
+slug: Web/JavaScript/Reference/Global_Objects/Reflect/ownKeys
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Méthode
+  - Reference
+  - Reflect
+translation_of: Web/JavaScript/Reference/Global_Objects/Reflect/ownKeys
+original_slug: Web/JavaScript/Reference/Objets_globaux/Reflect/ownKeys
+---
+{{JSRef}}
+
+La méthode statique **`Reflect.ownKeys()`** renvoie un tableau qui contient les clés des propriétés propres (non héritées) de l'objet  `cible`.
+
+{{EmbedInteractiveExample("pages/js/reflect-ownkeys.html")}}
+
+## Syntaxe
+
+    Reflect.ownKeys(cible)
+
+### Paramètres
+
+- `cible`
+  - : L'objet cible dont on souhaite obtenir les noms et symboles des propriétés propres.
+
+### Valeur de retour
+
+Un objet {{jsxref("Array")}} qui contient les clés des propriétés propres de `cible`.
+
+### Exceptions
+
+Une erreur {{jsxref("TypeError")}} si `cible` n'est pas un {{jsxref("Object")}}.
+
+## Description
+
+La méthode `Reflect.ownKeys` renvoie un tableau dont les éléments sont les clés des propriétés propres de l'objet `cible`. Sa valeur de retour est équivalente à `{{jsxref("Object.getOwnPropertyNames", "Object.getOwnPropertyNames(target)", "", 1)}}.concat({{jsxref("Object.getOwnPropertySymbols", "Object.getOwnPropertySymbols(target)", "", 1)}})`.
+
+## Exemples
+
+    Reflect.ownKeys({z: 3, y: 2, x: 1}); // [ "z", "y", "x" ]
+    Reflect.ownKeys([]); // ["length"]
+
+    var sym = Symbol.for("comète");
+    var sym2 = Symbol.for("météore");
+    var obj = {[sym]: 0, "str1": 0, "773": 0, "0": 0,
+               [sym2]: 0, "-1": 0, "8": 0, "seconde str": 0};
+    Reflect.ownKeys(obj);
+    // [ "0", "8", "773", "str1", "-1", "seconde str", Symbol(comète), Symbol(météore) ]
+    // Indices dans l'ordre numérique
+    // Chaînes de caractères dans l'ordre d'insertion
+    // Symboles dans l'ordre d'insertion
+
+## Spécifications
+
+| Spécification                                                                            | État                         | Commentaires         |
+| ---------------------------------------------------------------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName('ES2015', '#sec-reflect.ownkeys', 'Reflect.ownKeys')}} | {{Spec2('ES2015')}}     | Définition initiale. |
+| {{SpecName('ESDraft', '#sec-reflect.ownkeys', 'Reflect.ownKeys')}} | {{Spec2('ESDraft')}} |                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Reflect.ownKeys")}}
+
+## Voir aussi
+
+- {{jsxref("Reflect")}}
+- {{jsxref("Object.getOwnPropertyNames()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/reflect/preventextensions/index.html b/files/fr/web/javascript/reference/global_objects/reflect/preventextensions/index.html
deleted file mode 100644
index b0f644aa98..0000000000
--- a/files/fr/web/javascript/reference/global_objects/reflect/preventextensions/index.html
+++ /dev/null
@@ -1,100 +0,0 @@
----
-title: Reflect.preventExtensions()
-slug: Web/JavaScript/Reference/Global_Objects/Reflect/preventExtensions
-tags:
-  - ECMAScript 2015
-  - JavaScript
-  - Méthode
-  - Reference
-  - Reflect
-translation_of: Web/JavaScript/Reference/Global_Objects/Reflect/preventExtensions
-original_slug: Web/JavaScript/Reference/Objets_globaux/Reflect/preventExtensions
----
-<div>{{JSRef}}</div>
-
-<p>La méthode statique <code><strong>Reflect.preventExtensions()</strong></code> permet d'empêcher d'ajouter de nouvelles propriétés à un objet. Cette méthode est semblable à la méthode {{jsxref("Object.preventExtensions()")}} (modulo <a href="#diffs">quelques différences</a>).</p>
-
-<div>{{EmbedInteractiveExample("pages/js/reflect-preventextensions.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">Reflect.preventExtensions(<em>cible</em>)
-</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>cible</code></dt>
- <dd>L'objet cible dont on veut empêcher l'ajout d'autres propriétés.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Un {{jsxref("Boolean","booléen","",1)}} qui indique si l'interdiction a bien été mise en place sur l'objet cible.</p>
-
-<h3 id="Exceptions">Exceptions</h3>
-
-<p>Une erreur {{jsxref("TypeError")}} si <code>cible</code> n'est pas un {{jsxref("Object")}}.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>La méthode <code>Reflect.preventExtensions</code> permet d'empêcher l'ajout de nouvelles propriétés sur un objet. Cette méthode est semblable à {{jsxref("Object.preventExtensions()")}}.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Utiliser_Reflect.preventExtensions()">Utiliser <code>Reflect.preventExtensions()</code></h3>
-
-<p>Voir aussi {{jsxref("Object.preventExtensions()")}}.</p>
-
-<pre class="brush: js">// Par défaut les objets sont extensibles
-var vide = {};
-Reflect.isExtensible(vide); // === true
-
-// ...mais cela peut être modifié
-Reflect.preventExtensions(vide);
-Reflect.isExtensible(vide); // === false
-</pre>
-
-<h3 id="Différences_avec_Object.preventExtensions()">Différences avec <code>Object.preventExtensions()</code></h3>
-
-<p>Si le premier argument de cette méthode n'est pas un objet (autrement dit c'est une valeur primitive), cela provoquera une {{jsxref("TypeError")}}. {{jsxref("Object.preventExtensions()")}}, quant à elle, convertira l'argument passé en un objet.</p>
-
-<pre class="brush: js">Reflect.preventExtensions(1);
-// TypeError: 1 is not an object
-
-Object.preventExtensions(1);
-// 1
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-reflect.preventextensions', 'Reflect.preventExtensions')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-reflect.preventextensions', 'Reflect.preventExtensions')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Reflect.preventExtensions")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Reflect")}}</li>
- <li>{{jsxref("Object.isExtensible()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/reflect/preventextensions/index.md b/files/fr/web/javascript/reference/global_objects/reflect/preventextensions/index.md
new file mode 100644
index 0000000000..5dbce6c2e9
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/reflect/preventextensions/index.md
@@ -0,0 +1,82 @@
+---
+title: Reflect.preventExtensions()
+slug: Web/JavaScript/Reference/Global_Objects/Reflect/preventExtensions
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Méthode
+  - Reference
+  - Reflect
+translation_of: Web/JavaScript/Reference/Global_Objects/Reflect/preventExtensions
+original_slug: Web/JavaScript/Reference/Objets_globaux/Reflect/preventExtensions
+---
+{{JSRef}}
+
+La méthode statique **`Reflect.preventExtensions()`** permet d'empêcher d'ajouter de nouvelles propriétés à un objet. Cette méthode est semblable à la méthode {{jsxref("Object.preventExtensions()")}} (modulo [quelques différences](#diffs)).
+
+{{EmbedInteractiveExample("pages/js/reflect-preventextensions.html")}}
+
+## Syntaxe
+
+    Reflect.preventExtensions(cible)
+
+### Paramètres
+
+- `cible`
+  - : L'objet cible dont on veut empêcher l'ajout d'autres propriétés.
+
+### Valeur de retour
+
+Un {{jsxref("Boolean","booléen","",1)}} qui indique si l'interdiction a bien été mise en place sur l'objet cible.
+
+### Exceptions
+
+Une erreur {{jsxref("TypeError")}} si `cible` n'est pas un {{jsxref("Object")}}.
+
+## Description
+
+La méthode `Reflect.preventExtensions` permet d'empêcher l'ajout de nouvelles propriétés sur un objet. Cette méthode est semblable à {{jsxref("Object.preventExtensions()")}}.
+
+## Exemples
+
+### Utiliser `Reflect.preventExtensions()`
+
+Voir aussi {{jsxref("Object.preventExtensions()")}}.
+
+```js
+// Par défaut les objets sont extensibles
+var vide = {};
+Reflect.isExtensible(vide); // === true
+
+// ...mais cela peut être modifié
+Reflect.preventExtensions(vide);
+Reflect.isExtensible(vide); // === false
+```
+
+### Différences avec `Object.preventExtensions()`
+
+Si le premier argument de cette méthode n'est pas un objet (autrement dit c'est une valeur primitive), cela provoquera une {{jsxref("TypeError")}}. {{jsxref("Object.preventExtensions()")}}, quant à elle, convertira l'argument passé en un objet.
+
+```js
+Reflect.preventExtensions(1);
+// TypeError: 1 is not an object
+
+Object.preventExtensions(1);
+// 1
+```
+
+## Spécifications
+
+| Spécification                                                                                                        | État                         | Commentaires         |
+| -------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName('ES2015', '#sec-reflect.preventextensions', 'Reflect.preventExtensions')}}     | {{Spec2('ES2015')}}     | Définition initiale. |
+| {{SpecName('ESDraft', '#sec-reflect.preventextensions', 'Reflect.preventExtensions')}} | {{Spec2('ESDraft')}} |                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Reflect.preventExtensions")}}
+
+## Voir aussi
+
+- {{jsxref("Reflect")}}
+- {{jsxref("Object.isExtensible()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/reflect/set/index.html b/files/fr/web/javascript/reference/global_objects/reflect/set/index.html
deleted file mode 100644
index 4a5280f0ac..0000000000
--- a/files/fr/web/javascript/reference/global_objects/reflect/set/index.html
+++ /dev/null
@@ -1,106 +0,0 @@
----
-title: Reflect.set()
-slug: Web/JavaScript/Reference/Global_Objects/Reflect/set
-tags:
-  - ECMAScript 2015
-  - JavaScript
-  - Méthode
-  - Reference
-  - Reflect
-translation_of: Web/JavaScript/Reference/Global_Objects/Reflect/set
-original_slug: Web/JavaScript/Reference/Objets_globaux/Reflect/set
----
-<div>{{JSRef}}</div>
-
-<p>La méthode statique <code><strong>Reflect.set()</strong></code> permet de définir ou de modifier une propriété sur un objet.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/reflect-set.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">Reflect.set(<var>cible</var>, <var>cléPropriété</var>, <var>valeur</var>[, <var>récepteur</var>])
-</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>cible</code></dt>
- <dd>L'objet cible sur lequel on veut définir ou modifier la propriété.</dd>
- <dt><code>cléPropriété</code></dt>
- <dd>Le nom de la propriété à définir ou à modifier.</dd>
- <dt><code>valeur</code></dt>
- <dd>La valeur pour la propriété.</dd>
- <dt><code>récepteur</code>{{optional_inline}}</dt>
- <dd>La valeur de <code>this</code> pour l'appel à <code>cible</code> si un mutateur (<em>setter</em>) est utilisé.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Un {{jsxref("Boolean","booléen","",1)}} qui indique si la définition/modification de la propriété a réussi.</p>
-
-<h3 id="Exceptions">Exceptions</h3>
-
-<p>Une erreur {{jsxref("TypeError")}} si <code>cible</code> n'est pas un {{jsxref("Object")}}.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>La méthode <code>Reflect.set</code> permet de définir une propriété sur un objet. Elle effectue une affectation de propriété et est semblable à la syntaxe pour <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_de_membres">accéder à un propriété</a> mais sous la forme d'une fonction.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Utiliser_Reflect.set()">Utiliser <code>Reflect.set()</code></h3>
-
-<pre class="brush: js">// Object
-var obj = {};
-Reflect.set(obj, "prop", "value"); // true
-obj.prop; // "value"
-
-// Array
-var arr = ["canard", "canard", "canard"];
-Reflect.set(arr, 2, "oie"); // true
-arr[2]; // "oie"
-
-// On peut l'utiliser pour tronquer un tableau
-Reflect.set(arr, "length", 1); // true
-arr; // ["canard"];
-
-// Avec un seul argument
-// cléPropriété et valeur valent "undefined".
-var obj = {};
-Reflect.set(obj); // true
-Reflect.getOwnPropertyDescriptor(obj, "undefined");
-// { value: undefined, writable: true, enumerable: true, configurable: true }
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-reflect.set', 'Reflect.set')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-reflect.set', 'Reflect.set')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Reflect.set")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Reflect")}}</li>
- <li><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_de_membres">Accesseurs de propriété</a></li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/reflect/set/index.md b/files/fr/web/javascript/reference/global_objects/reflect/set/index.md
new file mode 100644
index 0000000000..5d3d0ff05d
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/reflect/set/index.md
@@ -0,0 +1,87 @@
+---
+title: Reflect.set()
+slug: Web/JavaScript/Reference/Global_Objects/Reflect/set
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Méthode
+  - Reference
+  - Reflect
+translation_of: Web/JavaScript/Reference/Global_Objects/Reflect/set
+original_slug: Web/JavaScript/Reference/Objets_globaux/Reflect/set
+---
+{{JSRef}}
+
+La méthode statique **`Reflect.set()`** permet de définir ou de modifier une propriété sur un objet.
+
+{{EmbedInteractiveExample("pages/js/reflect-set.html")}}
+
+## Syntaxe
+
+    Reflect.set(cible, cléPropriété, valeur[, récepteur])
+
+### Paramètres
+
+- `cible`
+  - : L'objet cible sur lequel on veut définir ou modifier la propriété.
+- `cléPropriété`
+  - : Le nom de la propriété à définir ou à modifier.
+- `valeur`
+  - : La valeur pour la propriété.
+- `récepteur`{{optional_inline}}
+  - : La valeur de `this` pour l'appel à `cible` si un mutateur (_setter_) est utilisé.
+
+### Valeur de retour
+
+Un {{jsxref("Boolean","booléen","",1)}} qui indique si la définition/modification de la propriété a réussi.
+
+### Exceptions
+
+Une erreur {{jsxref("TypeError")}} si `cible` n'est pas un {{jsxref("Object")}}.
+
+## Description
+
+La méthode `Reflect.set` permet de définir une propriété sur un objet. Elle effectue une affectation de propriété et est semblable à la syntaxe pour [accéder à un propriété](/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_de_membres) mais sous la forme d'une fonction.
+
+## Exemples
+
+### Utiliser `Reflect.set()`
+
+```js
+// Object
+var obj = {};
+Reflect.set(obj, "prop", "value"); // true
+obj.prop; // "value"
+
+// Array
+var arr = ["canard", "canard", "canard"];
+Reflect.set(arr, 2, "oie"); // true
+arr[2]; // "oie"
+
+// On peut l'utiliser pour tronquer un tableau
+Reflect.set(arr, "length", 1); // true
+arr; // ["canard"];
+
+// Avec un seul argument
+// cléPropriété et valeur valent "undefined".
+var obj = {};
+Reflect.set(obj); // true
+Reflect.getOwnPropertyDescriptor(obj, "undefined");
+// { value: undefined, writable: true, enumerable: true, configurable: true }
+```
+
+## Spécifications
+
+| Spécification                                                                | État                         | Commentaires         |
+| ---------------------------------------------------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName('ES2015', '#sec-reflect.set', 'Reflect.set')}} | {{Spec2('ES2015')}}     | Définition initiale. |
+| {{SpecName('ESDraft', '#sec-reflect.set', 'Reflect.set')}} | {{Spec2('ESDraft')}} |                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Reflect.set")}}
+
+## Voir aussi
+
+- {{jsxref("Reflect")}}
+- [Accesseurs de propriété](/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_de_membres)
diff --git a/files/fr/web/javascript/reference/global_objects/reflect/setprototypeof/index.html b/files/fr/web/javascript/reference/global_objects/reflect/setprototypeof/index.html
deleted file mode 100644
index 2cb34af8fa..0000000000
--- a/files/fr/web/javascript/reference/global_objects/reflect/setprototypeof/index.html
+++ /dev/null
@@ -1,97 +0,0 @@
----
-title: Reflect.setPrototypeOf()
-slug: Web/JavaScript/Reference/Global_Objects/Reflect/setPrototypeOf
-tags:
-  - ECMAScript 2015
-  - JavaScript
-  - Méthode
-  - Reference
-  - Reflect
-translation_of: Web/JavaScript/Reference/Global_Objects/Reflect/setPrototypeOf
-original_slug: Web/JavaScript/Reference/Objets_globaux/Reflect/setPrototypeOf
----
-<div>{{JSRef}}</div>
-
-<p>la méthode statique <code><strong>Reflect.setPrototypeOf()</strong></code> est semblable à la méthode {{jsxref("Object.setPrototypeOf()")}} (exception faite de la valeur de retour). Elle permet de définir le prototype (c'est-à-dire la propriété interne <code>[[Prototype]]</code>) d'un objet donné avec un autre objet ou {{jsxref("null")}}. Cette méthode renvoie <code>true</code> si l'opération a réussi et <code>false</code> sinon.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/reflect-setprototypeof.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">Reflect.setPrototypeOf(<var>cible</var>, <var>prototype</var>)
-</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>cible</code></dt>
- <dd>L'objet cible dont on souhaite modifier le prototype.</dd>
- <dt><code>prototype</code></dt>
- <dd>Le nouveau prototype à appliquer à l'objet cible (ça peut être un objet ou {{jsxref("null")}}).</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Un {{jsxref("Boolean","booléen","",1)}} qui indique si le prototype a correctement été modifié.</p>
-
-<h3 id="Exceptions">Exceptions</h3>
-
-<p>Une erreur {{jsxref("TypeError")}} si <code>cible</code> n'est pas un {{jsxref("Object")}} ou si <code>prototype</code> n'est ni un objet ni {{jsxref("null")}}.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>La méthode <code>Reflect.setPrototypeOf</code> permet de modifier le prototype (qui est la valeur de la propriété interne <code>[[Prototype]]</code>) d'un objet donné.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Utiliser_Reflect.setPrototypeOf()">Utiliser <code>Reflect.setPrototypeOf()</code></h3>
-
-<pre class="brush: js">Reflect.setPrototypeOf({}, Object.prototype); // true
-
-// On peut modifier le [[Prototype]] d'un objet
-// pour que celui-ci soit null.
-Reflect.setPrototypeOf({}, null); // true
-
-// La méthode renvoie false si la cible
-// n'est pas extensible.
-Reflect.setPrototypeOf(Object.freeze({}), null); // false
-
-// La méthode renvoie false si l'affectation
-// entraîne un cycle dans la chaîne de prototypes.
-var target = {};
-var proto = Object.create(target);
-Reflect.setPrototypeOf(target, proto); // false
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-reflect.setprototypeof', 'Reflect.setPrototypeOf')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-reflect.setprototypeof', 'Reflect.setPrototypeOf')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Reflect.setPrototypeOf")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Reflect")}}</li>
- <li>{{jsxref("Object.setPrototypeOf()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/reflect/setprototypeof/index.md b/files/fr/web/javascript/reference/global_objects/reflect/setprototypeof/index.md
new file mode 100644
index 0000000000..e4ac8b0a47
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/reflect/setprototypeof/index.md
@@ -0,0 +1,78 @@
+---
+title: Reflect.setPrototypeOf()
+slug: Web/JavaScript/Reference/Global_Objects/Reflect/setPrototypeOf
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Méthode
+  - Reference
+  - Reflect
+translation_of: Web/JavaScript/Reference/Global_Objects/Reflect/setPrototypeOf
+original_slug: Web/JavaScript/Reference/Objets_globaux/Reflect/setPrototypeOf
+---
+{{JSRef}}
+
+la méthode statique **`Reflect.setPrototypeOf()`** est semblable à la méthode {{jsxref("Object.setPrototypeOf()")}} (exception faite de la valeur de retour). Elle permet de définir le prototype (c'est-à-dire la propriété interne `[[Prototype]]`) d'un objet donné avec un autre objet ou {{jsxref("null")}}. Cette méthode renvoie `true` si l'opération a réussi et `false` sinon.
+
+{{EmbedInteractiveExample("pages/js/reflect-setprototypeof.html")}}
+
+## Syntaxe
+
+    Reflect.setPrototypeOf(cible, prototype)
+
+### Paramètres
+
+- `cible`
+  - : L'objet cible dont on souhaite modifier le prototype.
+- `prototype`
+  - : Le nouveau prototype à appliquer à l'objet cible (ça peut être un objet ou {{jsxref("null")}}).
+
+### Valeur de retour
+
+Un {{jsxref("Boolean","booléen","",1)}} qui indique si le prototype a correctement été modifié.
+
+### Exceptions
+
+Une erreur {{jsxref("TypeError")}} si `cible` n'est pas un {{jsxref("Object")}} ou si `prototype` n'est ni un objet ni {{jsxref("null")}}.
+
+## Description
+
+La méthode `Reflect.setPrototypeOf` permet de modifier le prototype (qui est la valeur de la propriété interne `[[Prototype]]`) d'un objet donné.
+
+## Exemples
+
+### Utiliser `Reflect.setPrototypeOf()`
+
+```js
+Reflect.setPrototypeOf({}, Object.prototype); // true
+
+// On peut modifier le [[Prototype]] d'un objet
+// pour que celui-ci soit null.
+Reflect.setPrototypeOf({}, null); // true
+
+// La méthode renvoie false si la cible
+// n'est pas extensible.
+Reflect.setPrototypeOf(Object.freeze({}), null); // false
+
+// La méthode renvoie false si l'affectation
+// entraîne un cycle dans la chaîne de prototypes.
+var target = {};
+var proto = Object.create(target);
+Reflect.setPrototypeOf(target, proto); // false
+```
+
+## Spécifications
+
+| Spécification                                                                                                | État                         | Commentaires         |
+| ------------------------------------------------------------------------------------------------------------ | ---------------------------- | -------------------- |
+| {{SpecName('ES2015', '#sec-reflect.setprototypeof', 'Reflect.setPrototypeOf')}}     | {{Spec2('ES2015')}}     | Définition initiale. |
+| {{SpecName('ESDraft', '#sec-reflect.setprototypeof', 'Reflect.setPrototypeOf')}} | {{Spec2('ESDraft')}} |                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Reflect.setPrototypeOf")}}
+
+## Voir aussi
+
+- {{jsxref("Reflect")}}
+- {{jsxref("Object.setPrototypeOf()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/regexp/@@match/index.html b/files/fr/web/javascript/reference/global_objects/regexp/@@match/index.html
deleted file mode 100644
index 9d3c824406..0000000000
--- a/files/fr/web/javascript/reference/global_objects/regexp/@@match/index.html
+++ /dev/null
@@ -1,116 +0,0 @@
----
-title: RegExp.prototype[@@match]()
-slug: Web/JavaScript/Reference/Global_Objects/RegExp/@@match
-tags:
-  - Expressions rationnelles
-  - JavaScript
-  - Méthode
-  - Prototype
-  - Reference
-  - RegExp
-translation_of: Web/JavaScript/Reference/Global_Objects/RegExp/@@match
-original_slug: Web/JavaScript/Reference/Objets_globaux/RegExp/@@match
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <strong><code>[@@match]()</code></strong> permet de récupérer les correspondances obtenues lorsqu'on teste une chaîne de caractères par rapport à une expression rationnelle (<em>regexp</em>).</p>
-
-<div>{{EmbedInteractiveExample("pages/js/regexp-prototype-@@match.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>regexp</var>[Symbol.match](str)</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>str</code></dt>
- <dd>La chaîne de caractères ({{jsxref("String")}}) sur laquelle on veut chercher des correspondances.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Un tableau ({{jsxref("Array")}}) qui contient les résultats des correspondances et les groupes capturés grâce aux parenthèse. S'il n'y a aucune correspondance, ce sera {{jsxref("null")}}.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>Cette méthode est appelée de façon interne lorsqu'on utilise {{jsxref("String.prototype.match()")}}. Ainsi, les deux exemples qui suivent sont équivalents et le second est la version interne du premier :</p>
-
-<pre class="brush: js">'abc'.match(/a/);
-
-/a/[Symbol.match]('abc');</pre>
-
-<p>Cette méthode existe afin de permettre d'adapter le comportement de la recherche des correspondances pour les sous-classes de <code>RegExp</code>.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Appel_direct">Appel direct</h3>
-
-<p>Cette méthode peut être utilisée comme {{jsxref("String.prototype.match()")}} mais avec un objet <code>this</code> différent et un ordre des paramètres également différent.</p>
-
-<pre class="brush: js">var re = /[0-9]+/g;
-var str = '2016-01-02';
-var résultat = re[Symbol.match](str);
-console.log(résultat);  // ["2016", "01", "02"]
-</pre>
-
-<h3 id="Utilisation_de_match_avec_une_sous-classe">Utilisation de <code>@@match</code> avec une sous-classe</h3>
-
-<p>Les sous-classes de {{jsxref("RegExp")}} peuvent surcharger la méthode <code>[@@match]()</code> afin de modifier le comportement.</p>
-
-<pre class="brush: js">class MaRegExp extends RegExp {
-  [Symbol.match](str) {
-    var résultat = RegExp.prototype[Symbol.match].call(this, str);
-    if (!résultat) return null;
-    return {
-      group(n) {
-        return résultat[n];
-      }
-    };
-  }
-}
-
-var re = new MaRegExp('([0-9]+)-([0-9]+)-([0-9]+)');
-var str = '2016-01-02';
-var résultat = str.match(re); // String.prototype.match appelle re[@@match].
-console.log(résultat.group(1)); // 2016
-console.log(résultat.group(2)); // 01
-console.log(résultat.group(3)); // 02
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-regexp.prototype-@@match', 'RegExp.prototype[@@match]')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-regexp.prototype-@@match', 'RegExp.prototype[@@match]')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.RegExp.@@match")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("String.prototype.match()")}}</li>
- <li>{{jsxref("RegExp.prototype.@@replace()", "RegExp.prototype[@@replace]()")}}</li>
- <li>{{jsxref("RegExp.prototype.@@search()", "RegExp.prototype[@@search]()")}}</li>
- <li>{{jsxref("RegExp.prototype.@@split()", "RegExp.prototype[@@split]()")}}</li>
- <li>{{jsxref("RegExp.prototype.exec()")}}</li>
- <li>{{jsxref("RegExp.prototype.test()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/regexp/@@match/index.md b/files/fr/web/javascript/reference/global_objects/regexp/@@match/index.md
new file mode 100644
index 0000000000..0126ab2d2f
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/regexp/@@match/index.md
@@ -0,0 +1,101 @@
+---
+title: RegExp.prototype[@@match]()
+slug: Web/JavaScript/Reference/Global_Objects/RegExp/@@match
+tags:
+  - Expressions rationnelles
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - RegExp
+translation_of: Web/JavaScript/Reference/Global_Objects/RegExp/@@match
+original_slug: Web/JavaScript/Reference/Objets_globaux/RegExp/@@match
+---
+{{JSRef}}
+
+La méthode **`[@@match]()`** permet de récupérer les correspondances obtenues lorsqu'on teste une chaîne de caractères par rapport à une expression rationnelle (_regexp_).
+
+{{EmbedInteractiveExample("pages/js/regexp-prototype-@@match.html")}}
+
+## Syntaxe
+
+    regexp[Symbol.match](str)
+
+### Paramètres
+
+- `str`
+  - : La chaîne de caractères ({{jsxref("String")}}) sur laquelle on veut chercher des correspondances.
+
+### Valeur de retour
+
+Un tableau ({{jsxref("Array")}}) qui contient les résultats des correspondances et les groupes capturés grâce aux parenthèse. S'il n'y a aucune correspondance, ce sera {{jsxref("null")}}.
+
+## Description
+
+Cette méthode est appelée de façon interne lorsqu'on utilise {{jsxref("String.prototype.match()")}}. Ainsi, les deux exemples qui suivent sont équivalents et le second est la version interne du premier :
+
+```js
+'abc'.match(/a/);
+
+/a/[Symbol.match]('abc');
+```
+
+Cette méthode existe afin de permettre d'adapter le comportement de la recherche des correspondances pour les sous-classes de `RegExp`.
+
+## Exemples
+
+### Appel direct
+
+Cette méthode peut être utilisée comme {{jsxref("String.prototype.match()")}} mais avec un objet `this` différent et un ordre des paramètres également différent.
+
+```js
+var re = /[0-9]+/g;
+var str = '2016-01-02';
+var résultat = re[Symbol.match](str);
+console.log(résultat);  // ["2016", "01", "02"]
+```
+
+### Utilisation de `@@match` avec une sous-classe
+
+Les sous-classes de {{jsxref("RegExp")}} peuvent surcharger la méthode `[@@match]()` afin de modifier le comportement.
+
+```js
+class MaRegExp extends RegExp {
+  [Symbol.match](str) {
+    var résultat = RegExp.prototype[Symbol.match].call(this, str);
+    if (!résultat) return null;
+    return {
+      group(n) {
+        return résultat[n];
+      }
+    };
+  }
+}
+
+var re = new MaRegExp('([0-9]+)-([0-9]+)-([0-9]+)');
+var str = '2016-01-02';
+var résultat = str.match(re); // String.prototype.match appelle re[@@match].
+console.log(résultat.group(1)); // 2016
+console.log(résultat.group(2)); // 01
+console.log(résultat.group(3)); // 02
+```
+
+## Spécifications
+
+| Spécification                                                                                                    | État                         | Commentaires         |
+| ---------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName('ES6', '#sec-regexp.prototype-@@match', 'RegExp.prototype[@@match]')}}     | {{Spec2('ES6')}}         | Définition initiale. |
+| {{SpecName('ESDraft', '#sec-regexp.prototype-@@match', 'RegExp.prototype[@@match]')}} | {{Spec2('ESDraft')}} |                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.RegExp.@@match")}}
+
+## Voir aussi
+
+- {{jsxref("String.prototype.match()")}}
+- {{jsxref("RegExp.prototype.@@replace()", "RegExp.prototype[@@replace]()")}}
+- {{jsxref("RegExp.prototype.@@search()", "RegExp.prototype[@@search]()")}}
+- {{jsxref("RegExp.prototype.@@split()", "RegExp.prototype[@@split]()")}}
+- {{jsxref("RegExp.prototype.exec()")}}
+- {{jsxref("RegExp.prototype.test()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/regexp/@@matchall/index.html b/files/fr/web/javascript/reference/global_objects/regexp/@@matchall/index.html
deleted file mode 100644
index 303390a68c..0000000000
--- a/files/fr/web/javascript/reference/global_objects/regexp/@@matchall/index.html
+++ /dev/null
@@ -1,106 +0,0 @@
----
-title: RegExp.prototype[@@matchAll]()
-slug: Web/JavaScript/Reference/Global_Objects/RegExp/@@matchAll
-tags:
-  - JavaScript
-  - Méthode
-  - Prototype
-  - Reference
-  - RegExp
-translation_of: Web/JavaScript/Reference/Global_Objects/RegExp/@@matchAll
-original_slug: Web/JavaScript/Reference/Objets_globaux/RegExp/@@matchAll
----
-<p>{{JSRef}}</p>
-
-<p>La méthode <strong><code>[@@matchAll]</code></strong> renvoie l'ensemble des correspondances d'une expression rationnelle sur une chaîne de caractères.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/regexp-prototype-@@matchall.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>regexp</var>[Symbol.matchAll](<var>str</var>)</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>str</code></dt>
- <dd>Une chaîne de caractères ({{jsxref("String")}}) dont on souhaite trouver les correspondances.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Un <a href="/fr/docs/Web/JavaScript/Guide/iterateurs_et_generateurs">itérateur</a>.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>Cette méthode est appelée, en interne, par le moteur JavaScript, pendant l'exécution {{jsxref("String.prototype.matchAll()")}}. Les deux lignes qui suivent renverront donc le même résultat.</p>
-
-<pre class="brush: js">'abc'.matchAll(/a/);
-
-/a/[Symbol.matchAll]('abc');</pre>
-
-<p>Cette méthode existe afin de personnaliser le comportement des correspondances pour les sous-classes de <code>RegExp</code>.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Appel_direct">Appel direct</h3>
-
-<p>Cette méthode peut être utilisée de façon semblable à {{jsxref("String.prototype.matchAll()")}} mais l'objet <code>this</code> et l'ordre des arguments seront différents.</p>
-
-<pre class="brush: js">var re = /[0-9]+/g;
-var str = '2016-01-02';
-var resultat = re[Symbol.matchAll](str);
-
-console.log(Array.from(resultat, x =&gt; x[0]));
-// ["2016", "01", "02"]
-</pre>
-
-<h3 id="Utiliser_matchAll_dans_une_sous-classe">Utiliser <code>@@matchAll</code> dans une sous-classe</h3>
-
-<p>Les sous-classes de {{jsxref("RegExp")}} peuvent surcharger la méthode <code>[@@matchAll]()</code> afin de modifier le comportement par défaut (par exemple pour renvoyer un tableau ({{jsxref("Array")}}) plutôt qu'un <a href="/en-US/docs/Web/JavaScript/Guide/Iterators_and_Generators">itérateur</a>).</p>
-
-<pre class="brush: js">class MaRegExp extends RegExp {
-  [Symbol.matchAll](str) {
-    var resultat = RegExp.prototype[Symbol.matchAll].call(this, str);
-    if (!resultat) {
-      return null;
-    } else {
-      return Array.from(resultat);
-    }
-  }
-}
-
-var re = new MaRegExp('([0-9]+)-([0-9]+)-([0-9]+)', 'g');
-var str = '2016-01-02|2019-03-07';
-var resultat = str.matchAll(re);
-console.log(resultat[0]); // [ "2016-01-02", "2016", "01", "02" ]
-console.log(resultat[1]); // [ "2019-03-07", "2019", "03", "07" ]
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-regexp-prototype-matchall', 'RegExp.prototype[@@matchAll]')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.RegExp.@@matchAll")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{JSxRef("String.prototype.matchAll()")}}</li>
- <li>{{JSxRef("Symbol.matchAll")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/regexp/@@matchall/index.md b/files/fr/web/javascript/reference/global_objects/regexp/@@matchall/index.md
new file mode 100644
index 0000000000..b0e6a51185
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/regexp/@@matchall/index.md
@@ -0,0 +1,95 @@
+---
+title: RegExp.prototype[@@matchAll]()
+slug: Web/JavaScript/Reference/Global_Objects/RegExp/@@matchAll
+tags:
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - RegExp
+translation_of: Web/JavaScript/Reference/Global_Objects/RegExp/@@matchAll
+original_slug: Web/JavaScript/Reference/Objets_globaux/RegExp/@@matchAll
+---
+{{JSRef}}
+
+La méthode **`[@@matchAll]`** renvoie l'ensemble des correspondances d'une expression rationnelle sur une chaîne de caractères.
+
+{{EmbedInteractiveExample("pages/js/regexp-prototype-@@matchall.html")}}
+
+## Syntaxe
+
+    regexp[Symbol.matchAll](str)
+
+### Paramètres
+
+- `str`
+  - : Une chaîne de caractères ({{jsxref("String")}}) dont on souhaite trouver les correspondances.
+
+### Valeur de retour
+
+Un [itérateur](/fr/docs/Web/JavaScript/Guide/iterateurs_et_generateurs).
+
+## Description
+
+Cette méthode est appelée, en interne, par le moteur JavaScript, pendant l'exécution {{jsxref("String.prototype.matchAll()")}}. Les deux lignes qui suivent renverront donc le même résultat.
+
+```js
+'abc'.matchAll(/a/);
+
+/a/[Symbol.matchAll]('abc');
+```
+
+Cette méthode existe afin de personnaliser le comportement des correspondances pour les sous-classes de `RegExp`.
+
+## Exemples
+
+### Appel direct
+
+Cette méthode peut être utilisée de façon semblable à {{jsxref("String.prototype.matchAll()")}} mais l'objet `this` et l'ordre des arguments seront différents.
+
+```js
+var re = /[0-9]+/g;
+var str = '2016-01-02';
+var resultat = re[Symbol.matchAll](str);
+
+console.log(Array.from(resultat, x => x[0]));
+// ["2016", "01", "02"]
+```
+
+### Utiliser `@@matchAll` dans une sous-classe
+
+Les sous-classes de {{jsxref("RegExp")}} peuvent surcharger la méthode `[@@matchAll]()` afin de modifier le comportement par défaut (par exemple pour renvoyer un tableau ({{jsxref("Array")}}) plutôt qu'un [itérateur](/en-US/docs/Web/JavaScript/Guide/Iterators_and_Generators)).
+
+```js
+class MaRegExp extends RegExp {
+  [Symbol.matchAll](str) {
+    var resultat = RegExp.prototype[Symbol.matchAll].call(this, str);
+    if (!resultat) {
+      return null;
+    } else {
+      return Array.from(resultat);
+    }
+  }
+}
+
+var re = new MaRegExp('([0-9]+)-([0-9]+)-([0-9]+)', 'g');
+var str = '2016-01-02|2019-03-07';
+var resultat = str.matchAll(re);
+console.log(resultat[0]); // [ "2016-01-02", "2016", "01", "02" ]
+console.log(resultat[1]); // [ "2019-03-07", "2019", "03", "07" ]
+```
+
+## Spécifications
+
+| Spécification                                                                                                            | État                         | Commentaires |
+| ------------------------------------------------------------------------------------------------------------------------ | ---------------------------- | ------------ |
+| {{SpecName('ESDraft', '#sec-regexp-prototype-matchall', 'RegExp.prototype[@@matchAll]')}} | {{Spec2('ESDraft')}} |              |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.RegExp.@@matchAll")}}
+
+## Voir aussi
+
+- {{JSxRef("String.prototype.matchAll()")}}
+- {{JSxRef("Symbol.matchAll")}}
diff --git a/files/fr/web/javascript/reference/global_objects/regexp/@@replace/index.html b/files/fr/web/javascript/reference/global_objects/regexp/@@replace/index.html
deleted file mode 100644
index 699bb1ad11..0000000000
--- a/files/fr/web/javascript/reference/global_objects/regexp/@@replace/index.html
+++ /dev/null
@@ -1,121 +0,0 @@
----
-title: RegExp.prototype[@@replace]()
-slug: Web/JavaScript/Reference/Global_Objects/RegExp/@@replace
-tags:
-  - JavaScript
-  - Méthode
-  - Prototype
-  - Reference
-  - RegExp
-translation_of: Web/JavaScript/Reference/Global_Objects/RegExp/@@replace
-original_slug: Web/JavaScript/Reference/Objets_globaux/RegExp/@@replace
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <strong><code>[@@replace]()</code></strong> remplace toutes ou certaines correspondances d'un motif <code>this</code> dans une chaîne de caractère avec un outil de remplacement. La valeur renvoyée est la nouvelle chaîne ainsi créée. Cet outil de remplacement peut être une chaîne de caractère ou une fonction appelée pour chacune des correspondances.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/regexp-prototype-@@replace.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>regexp</var>[Symbol.replace](str, <var>newSubStr</var>|<var>function</var>)</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>str</code></dt>
- <dd>Une chaîne de caractères ({{jsxref("String")}}) pour laquelle on souhaite effectuer des remplacement.</dd>
- <dt><code>newSubStr (replacement)</code></dt>
- <dd>La chaîne de caractères qui remplace les correspondances trouvées. On peut effectuer le remplacement sur un nombre donné de correspondances (cf. la section {{jsxref("String.prototype.replace", "Utiliser une chaîne de caractères comme paramètre", "#Utiliser_une_chaîne_de_caractère_comme_paramètre", 1)}} de la page {{jsxref("String.prototype.replace()")}}).</dd>
- <dt><code>function (replacement)</code></dt>
- <dd>Une fonction qui est appelée pour créer la sous-chaîne de remplacement. Les arguments fournis à cette fonction sont décrits dans la section {{jsxref("String.prototype.replace", "Utiliser une chaîne de caractères comme paramètre", "#Utiliser_une_chaîne_de_caractère_comme_paramètre", 1)}} de la page {{jsxref("String.prototype.replace()")}}.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Une nouvelle chaîne de caractères pour laquelle les correspondances (toutes ou une partie) ont été remplacées.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>Cette méthode est appelée de façon interne par la méthode {{jsxref("String.prototype.replace()")}} lorsque l'arugment <code>pattern</code> argument est un objet {{jsxref("RegExp")}}. Les deux lignes de code qui suivent sont équivalentes et la seconde est la version interne de la première :</p>
-
-<pre class="brush: js">'abc'.replace(/a/, 'A');
-
-/a/[Symbol.replace]('abc', 'A');</pre>
-
-<p>Cette méthode existe afin de pouvoir personnaliser le comportement du remplacement pour les classes filles de <code>RegExp</code>.</p>
-
-<p>Si l'argument décrivant le motif <strong>n'est pas</strong> un objet {{jsxref("RegExp")}}, {{jsxref("String.prototype.replace()")}} n'appellera pas cette méthode et ne créera pas d'objet {{jsxref("RegExp")}}.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Appel_direct">Appel direct</h3>
-
-<p>Cette méthode peut être utilisée comme {{jsxref("String.prototype.replace()")}}, aux différences près que l'objet <code>this</code> est différent et que l'ordre des arguments change :</p>
-
-<pre class="brush: js">var re = /-/g;
-var str = '2016-01-01';
-var newstr = re[Symbol.replace](str, '.');
-console.log(newstr);  // 2016.01.01
-</pre>
-
-<h3 id="Utiliser_replace_dans_une_sous-classe">Utiliser <code>@@replace</code> dans une sous-classe</h3>
-
-<p>Les sous-classes de {{jsxref("RegExp")}} peuvent surcharger la méthode <code>[@@replace]()</code> pour modifier le comportement.</p>
-
-<pre class="brush: js">class MaRegExp extends RegExp {
-  constructor(pattern, flags, count) {
-    super(pattern, flags);
-    this.count = count;
-  }
-  [Symbol.replace](str, replacement) {
-    // Applique @@replace |count| fois.
-    var result = str;
-    for (var i = 0; i &lt; this.count; i++) {
-      result = RegExp.prototype[Symbol.replace].call(this, result, replacement);
-    }
-    return result;
-  }
-}
-
-var re = new MaRegExp('\\d', '', 3);
-var str = '01234567';
-var newstr = str.replace(re, '#'); // String.prototype.replace appelle re[@@replace].
-console.log(newstr); // ###34567</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-regexp.prototype-@@replace', 'RegExp.prototype[@@replace]')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-regexp.prototype-@@replace', 'RegExp.prototype[@@replace]')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.RegExp.@@replace")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("String.prototype.replace()")}}</li>
- <li>{{jsxref("RegExp.prototype.@@match()", "RegExp.prototype[@@match]()")}}</li>
- <li>{{jsxref("RegExp.prototype.@@search()", "RegExp.prototype[@@search]()")}}</li>
- <li>{{jsxref("RegExp.prototype.@@split()", "RegExp.prototype[@@split]()")}}</li>
- <li>{{jsxref("RegExp.prototype.exec()")}}</li>
- <li>{{jsxref("RegExp.prototype.test()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/regexp/@@replace/index.md b/files/fr/web/javascript/reference/global_objects/regexp/@@replace/index.md
new file mode 100644
index 0000000000..f1ea9e66db
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/regexp/@@replace/index.md
@@ -0,0 +1,107 @@
+---
+title: RegExp.prototype[@@replace]()
+slug: Web/JavaScript/Reference/Global_Objects/RegExp/@@replace
+tags:
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - RegExp
+translation_of: Web/JavaScript/Reference/Global_Objects/RegExp/@@replace
+original_slug: Web/JavaScript/Reference/Objets_globaux/RegExp/@@replace
+---
+{{JSRef}}
+
+La méthode **`[@@replace]()`** remplace toutes ou certaines correspondances d'un motif `this` dans une chaîne de caractère avec un outil de remplacement. La valeur renvoyée est la nouvelle chaîne ainsi créée. Cet outil de remplacement peut être une chaîne de caractère ou une fonction appelée pour chacune des correspondances.
+
+{{EmbedInteractiveExample("pages/js/regexp-prototype-@@replace.html")}}
+
+## Syntaxe
+
+    regexp[Symbol.replace](str, newSubStr|function)
+
+### Paramètres
+
+- `str`
+  - : Une chaîne de caractères ({{jsxref("String")}}) pour laquelle on souhaite effectuer des remplacement.
+- `newSubStr (replacement)`
+  - : La chaîne de caractères qui remplace les correspondances trouvées. On peut effectuer le remplacement sur un nombre donné de correspondances (cf. la section {{jsxref("String.prototype.replace", "Utiliser une chaîne de caractères comme paramètre", "#Utiliser_une_chaîne_de_caractère_comme_paramètre", 1)}} de la page {{jsxref("String.prototype.replace()")}}).
+- `function (replacement)`
+  - : Une fonction qui est appelée pour créer la sous-chaîne de remplacement. Les arguments fournis à cette fonction sont décrits dans la section {{jsxref("String.prototype.replace", "Utiliser une chaîne de caractères comme paramètre", "#Utiliser_une_chaîne_de_caractère_comme_paramètre", 1)}} de la page {{jsxref("String.prototype.replace()")}}.
+
+### Valeur de retour
+
+Une nouvelle chaîne de caractères pour laquelle les correspondances (toutes ou une partie) ont été remplacées.
+
+## Description
+
+Cette méthode est appelée de façon interne par la méthode {{jsxref("String.prototype.replace()")}} lorsque l'arugment `pattern` argument est un objet {{jsxref("RegExp")}}. Les deux lignes de code qui suivent sont équivalentes et la seconde est la version interne de la première :
+
+```js
+'abc'.replace(/a/, 'A');
+
+/a/[Symbol.replace]('abc', 'A');
+```
+
+Cette méthode existe afin de pouvoir personnaliser le comportement du remplacement pour les classes filles de `RegExp`.
+
+Si l'argument décrivant le motif **n'est pas** un objet {{jsxref("RegExp")}}, {{jsxref("String.prototype.replace()")}} n'appellera pas cette méthode et ne créera pas d'objet {{jsxref("RegExp")}}.
+
+## Exemples
+
+### Appel direct
+
+Cette méthode peut être utilisée comme {{jsxref("String.prototype.replace()")}}, aux différences près que l'objet `this` est différent et que l'ordre des arguments change :
+
+```js
+var re = /-/g;
+var str = '2016-01-01';
+var newstr = re[Symbol.replace](str, '.');
+console.log(newstr);  // 2016.01.01
+```
+
+### Utiliser `@@replace` dans une sous-classe
+
+Les sous-classes de {{jsxref("RegExp")}} peuvent surcharger la méthode `[@@replace]()` pour modifier le comportement.
+
+```js
+class MaRegExp extends RegExp {
+  constructor(pattern, flags, count) {
+    super(pattern, flags);
+    this.count = count;
+  }
+  [Symbol.replace](str, replacement) {
+    // Applique @@replace |count| fois.
+    var result = str;
+    for (var i = 0; i < this.count; i++) {
+      result = RegExp.prototype[Symbol.replace].call(this, result, replacement);
+    }
+    return result;
+  }
+}
+
+var re = new MaRegExp('\\d', '', 3);
+var str = '01234567';
+var newstr = str.replace(re, '#'); // String.prototype.replace appelle re[@@replace].
+console.log(newstr); // ###34567
+```
+
+## Spécifications
+
+| Spécification                                                                                                            | État                         | Commentaires         |
+| ------------------------------------------------------------------------------------------------------------------------ | ---------------------------- | -------------------- |
+| {{SpecName('ES6', '#sec-regexp.prototype-@@replace', 'RegExp.prototype[@@replace]')}}         | {{Spec2('ES6')}}         | Définition initiale. |
+| {{SpecName('ESDraft', '#sec-regexp.prototype-@@replace', 'RegExp.prototype[@@replace]')}} | {{Spec2('ESDraft')}} |                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.RegExp.@@replace")}}
+
+## Voir aussi
+
+- {{jsxref("String.prototype.replace()")}}
+- {{jsxref("RegExp.prototype.@@match()", "RegExp.prototype[@@match]()")}}
+- {{jsxref("RegExp.prototype.@@search()", "RegExp.prototype[@@search]()")}}
+- {{jsxref("RegExp.prototype.@@split()", "RegExp.prototype[@@split]()")}}
+- {{jsxref("RegExp.prototype.exec()")}}
+- {{jsxref("RegExp.prototype.test()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/regexp/@@search/index.html b/files/fr/web/javascript/reference/global_objects/regexp/@@search/index.html
deleted file mode 100644
index 0865f313ed..0000000000
--- a/files/fr/web/javascript/reference/global_objects/regexp/@@search/index.html
+++ /dev/null
@@ -1,115 +0,0 @@
----
-title: RegExp.prototype[@@search]()
-slug: Web/JavaScript/Reference/Global_Objects/RegExp/@@search
-tags:
-  - Expressions rationnelles
-  - JavaScript
-  - Méthode
-  - Prototype
-  - Reference
-  - RegExp
-translation_of: Web/JavaScript/Reference/Global_Objects/RegExp/@@search
-original_slug: Web/JavaScript/Reference/Objets_globaux/RegExp/@@search
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <strong><code>[@@search]()</code></strong> recherche une correspondance entre une expression rationnelle décrite par <code>this</code> et une chaîne de caractères donnée.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/regexp-prototype-@@search.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>regexp</var>[Symbol.search](str)</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>str</code></dt>
- <dd>Une chaîne de caractères ({{jsxref("String")}}) sur laquelle on veut rechercher une correspondance.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<dl>
- <dt><code>entier</code></dt>
- <dd>Si la recherche réussit, <code>[@@search]()</code> renvoie la position de la première correspondance de l'expression rationnelle au sein de la chaîne, sinon elle renvoie <code>-1</code>.</dd>
-</dl>
-
-<h2 id="Description">Description</h2>
-
-<p>Cette méthode est appelée en interne lors de l'utilisation de {{jsxref("String.prototype.search()")}}. Ainsi, les deux exemples qui suivent sont équivalents et le second est la version interne du premier :</p>
-
-<pre class="brush: js">'abc'.search(/a/);
-
-/a/[Symbol.search]('abc');</pre>
-
-<p>Cette méthode existe afin de pouvoir adapter le comportement de la recherche pour les sous-classes de <code>RegExp</code>.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Appel_direct">Appel direct</h3>
-
-<p>Cette méthode peut être utilisée comme {{jsxref("String.prototype.search()")}}, elle utilise simplement un objet <code>this</code> différent et un ordre de paramètres différent :</p>
-
-<pre class="brush: js">var re = /-/g;
-var str = '2016-01-02';
-var résultat = re[Symbol.search](str);
-console.log(résultat);  // 4
-</pre>
-
-<h3 id="Utiliser_search_avec_une_sous-classe">Utiliser <code>@@search</code> avec une sous-classe</h3>
-
-<p>Les sous-classes de {{jsxref("RegExp")}} peuvent surcharger <code>[@@search]()</code> afin de modifier le comportement obtenu :</p>
-
-<pre class="brush: js">class MaRegExp extends RegExp {
-  constructor(str) {
-    super(str)
-    this.pattern = str;
-  }
-  [Symbol.search](str) {
-    return str.indexOf(this.pattern);
-  }
-}
-
-var re = new MaRegExp('a+b');
-var str = 'ab a+b';
-var résultat = str.search(re); // String.prototype.search appelle re[@@search].
-console.log(résultat); // 3
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-regexp.prototype-@@search', 'RegExp.prototype[@@search]')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-regexp.prototype-@@search', 'RegExp.prototype[@@search]')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.RegExp.@@search")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("String.prototype.search()")}}</li>
- <li>{{jsxref("RegExp.prototype.@@match()", "RegExp.prototype[@@match]()")}}</li>
- <li>{{jsxref("RegExp.prototype.@@replace()", "RegExp.prototype[@@replace]()")}}</li>
- <li>{{jsxref("RegExp.prototype.@@split()", "RegExp.prototype[@@split]()")}}</li>
- <li>{{jsxref("RegExp.prototype.exec()")}}</li>
- <li>{{jsxref("RegExp.prototype.test()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/regexp/@@search/index.md b/files/fr/web/javascript/reference/global_objects/regexp/@@search/index.md
new file mode 100644
index 0000000000..8b241fbe93
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/regexp/@@search/index.md
@@ -0,0 +1,98 @@
+---
+title: RegExp.prototype[@@search]()
+slug: Web/JavaScript/Reference/Global_Objects/RegExp/@@search
+tags:
+  - Expressions rationnelles
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - RegExp
+translation_of: Web/JavaScript/Reference/Global_Objects/RegExp/@@search
+original_slug: Web/JavaScript/Reference/Objets_globaux/RegExp/@@search
+---
+{{JSRef}}
+
+La méthode **`[@@search]()`** recherche une correspondance entre une expression rationnelle décrite par `this` et une chaîne de caractères donnée.
+
+{{EmbedInteractiveExample("pages/js/regexp-prototype-@@search.html")}}
+
+## Syntaxe
+
+    regexp[Symbol.search](str)
+
+### Paramètres
+
+- `str`
+  - : Une chaîne de caractères ({{jsxref("String")}}) sur laquelle on veut rechercher une correspondance.
+
+### Valeur de retour
+
+- `entier`
+  - : Si la recherche réussit, `[@@search]()` renvoie la position de la première correspondance de l'expression rationnelle au sein de la chaîne, sinon elle renvoie `-1`.
+
+## Description
+
+Cette méthode est appelée en interne lors de l'utilisation de {{jsxref("String.prototype.search()")}}. Ainsi, les deux exemples qui suivent sont équivalents et le second est la version interne du premier :
+
+```js
+'abc'.search(/a/);
+
+/a/[Symbol.search]('abc');
+```
+
+Cette méthode existe afin de pouvoir adapter le comportement de la recherche pour les sous-classes de `RegExp`.
+
+## Exemples
+
+### Appel direct
+
+Cette méthode peut être utilisée comme {{jsxref("String.prototype.search()")}}, elle utilise simplement un objet `this` différent et un ordre de paramètres différent :
+
+```js
+var re = /-/g;
+var str = '2016-01-02';
+var résultat = re[Symbol.search](str);
+console.log(résultat);  // 4
+```
+
+### Utiliser `@@search` avec une sous-classe
+
+Les sous-classes de {{jsxref("RegExp")}} peuvent surcharger `[@@search]()` afin de modifier le comportement obtenu :
+
+```js
+class MaRegExp extends RegExp {
+  constructor(str) {
+    super(str)
+    this.pattern = str;
+  }
+  [Symbol.search](str) {
+    return str.indexOf(this.pattern);
+  }
+}
+
+var re = new MaRegExp('a+b');
+var str = 'ab a+b';
+var résultat = str.search(re); // String.prototype.search appelle re[@@search].
+console.log(résultat); // 3
+```
+
+## Spécifications
+
+| Spécification                                                                                                        | État                         | Commentaires         |
+| -------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName('ES6', '#sec-regexp.prototype-@@search', 'RegExp.prototype[@@search]')}}     | {{Spec2('ES6')}}         | Définition initiale. |
+| {{SpecName('ESDraft', '#sec-regexp.prototype-@@search', 'RegExp.prototype[@@search]')}} | {{Spec2('ESDraft')}} |                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.RegExp.@@search")}}
+
+## Voir aussi
+
+- {{jsxref("String.prototype.search()")}}
+- {{jsxref("RegExp.prototype.@@match()", "RegExp.prototype[@@match]()")}}
+- {{jsxref("RegExp.prototype.@@replace()", "RegExp.prototype[@@replace]()")}}
+- {{jsxref("RegExp.prototype.@@split()", "RegExp.prototype[@@split]()")}}
+- {{jsxref("RegExp.prototype.exec()")}}
+- {{jsxref("RegExp.prototype.test()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/regexp/@@species/index.html b/files/fr/web/javascript/reference/global_objects/regexp/@@species/index.html
deleted file mode 100644
index 22f0fbb375..0000000000
--- a/files/fr/web/javascript/reference/global_objects/regexp/@@species/index.html
+++ /dev/null
@@ -1,74 +0,0 @@
----
-title: get RegExp[@@species]
-slug: Web/JavaScript/Reference/Global_Objects/RegExp/@@species
-tags:
-  - Expressions rationnelles
-  - JavaScript
-  - Propriété
-  - Prototype
-  - Reference
-  - RegExp
-translation_of: Web/JavaScript/Reference/Global_Objects/RegExp/@@species
-original_slug: Web/JavaScript/Reference/Objets_globaux/RegExp/@@species
----
-<div>{{JSRef}}</div>
-
-<p>La propriété accesseur <code><strong>RegExp[@@species]</strong></code> renvoie le constructeur <code>RegExp</code>.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/regexp-getregexp-@@species.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">RegExp[Symbol.species]
-</pre>
-
-<h2 id="Description">Description</h2>
-
-<p>L'accesseur <code>species</code> renvoie le constructeur par défaut pour les objets <code>RegExp</code>. Les constructeurs des sous-classes peuvent surcharger ce symbole afin de modifier l'affectation du constructeur.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<p>La propriété <code>species</code> renvoie le constructeur par défaut, dans le cas des objets <code>RegExp</code>, c'est le constructeur <code>RegExp</code> :</p>
-
-<pre class="brush: js">RegExp[Symbol.species]; // function RegExp()</pre>
-
-<p>Pour les objets dérivés (par exemple, une classe <code>MaRegExp</code>), la valeur de <code>species</code> sera le constructeur <code>MaRegExp</code>. Il est possible de surcharger ce comportement afin de renvoyer le constructeur parent <code>RegExp</code> :</p>
-
-<pre class="brush: js">class MaRegExp extends RegExp {
-  // On surcharge species pour renvoyer
-  // le constructeur parent RegExp
-  static get [Symbol.species]() { return RegExp; }
-}</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-get-regexp-@@species', 'get RegExp [ @@species ]')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-get-regexp-@@species', 'get RegExp [ @@species ]')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.RegExp.@@species")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("RegExp")}}</li>
- <li>{{jsxref("Symbol.species")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/regexp/@@species/index.md b/files/fr/web/javascript/reference/global_objects/regexp/@@species/index.md
new file mode 100644
index 0000000000..f073630ef9
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/regexp/@@species/index.md
@@ -0,0 +1,60 @@
+---
+title: get RegExp[@@species]
+slug: Web/JavaScript/Reference/Global_Objects/RegExp/@@species
+tags:
+  - Expressions rationnelles
+  - JavaScript
+  - Propriété
+  - Prototype
+  - Reference
+  - RegExp
+translation_of: Web/JavaScript/Reference/Global_Objects/RegExp/@@species
+original_slug: Web/JavaScript/Reference/Objets_globaux/RegExp/@@species
+---
+{{JSRef}}
+
+La propriété accesseur **`RegExp[@@species]`** renvoie le constructeur `RegExp`.
+
+{{EmbedInteractiveExample("pages/js/regexp-getregexp-@@species.html")}}
+
+## Syntaxe
+
+    RegExp[Symbol.species]
+
+## Description
+
+L'accesseur `species` renvoie le constructeur par défaut pour les objets `RegExp`. Les constructeurs des sous-classes peuvent surcharger ce symbole afin de modifier l'affectation du constructeur.
+
+## Exemples
+
+La propriété `species` renvoie le constructeur par défaut, dans le cas des objets `RegExp`, c'est le constructeur `RegExp` :
+
+```js
+RegExp[Symbol.species]; // function RegExp()
+```
+
+Pour les objets dérivés (par exemple, une classe `MaRegExp`), la valeur de `species` sera le constructeur `MaRegExp`. Il est possible de surcharger ce comportement afin de renvoyer le constructeur parent `RegExp` :
+
+```js
+class MaRegExp extends RegExp {
+  // On surcharge species pour renvoyer
+  // le constructeur parent RegExp
+  static get [Symbol.species]() { return RegExp; }
+}
+```
+
+## Spécifications
+
+| Spécification                                                                                                | État                         | Commentaires         |
+| ------------------------------------------------------------------------------------------------------------ | ---------------------------- | -------------------- |
+| {{SpecName('ES6', '#sec-get-regexp-@@species', 'get RegExp [ @@species ]')}}         | {{Spec2('ES6')}}         | Définition initiale. |
+| {{SpecName('ESDraft', '#sec-get-regexp-@@species', 'get RegExp [ @@species ]')}} | {{Spec2('ESDraft')}} |                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.RegExp.@@species")}}
+
+## Voir aussi
+
+- {{jsxref("RegExp")}}
+- {{jsxref("Symbol.species")}}
diff --git a/files/fr/web/javascript/reference/global_objects/regexp/@@split/index.html b/files/fr/web/javascript/reference/global_objects/regexp/@@split/index.html
deleted file mode 100644
index 99fcaf30d4..0000000000
--- a/files/fr/web/javascript/reference/global_objects/regexp/@@split/index.html
+++ /dev/null
@@ -1,115 +0,0 @@
----
-title: RegExp.prototype[@@split]()
-slug: Web/JavaScript/Reference/Global_Objects/RegExp/@@split
-tags:
-  - Expressions rationnelles
-  - JavaScript
-  - Méthode
-  - Prototype
-  - Reference
-  - RegExp
-translation_of: Web/JavaScript/Reference/Global_Objects/RegExp/@@split
-original_slug: Web/JavaScript/Reference/Objets_globaux/RegExp/@@split
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <strong><code>[@@split]()</code></strong> permet de découper une chaîne de caractères ({{jsxref("String")}}) en un tableau de sous-chaînes.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/regexp-prototype-@@split.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox notranslate"><var>regexp</var>[Symbol.split](str[, <var>limite</var>])</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>str</code></dt>
- <dd>La chaîne de caractères qu'on souhaite découper.</dd>
- <dt><code>limite</code></dt>
- <dd>
- <p>Paramètre optionnel. Un entier indiquant le nombre maximal de sous-chaînes à trouver. La méthode <code>[@@split]()</code> découpe la chaîne pour chaque correspondance de l'expression rationnelle <code>this</code> jusqu'à ce que le nombre d'éléments obtenus atteigne cette limite ou que la chaîne n'ait plus de correspondances.</p>
- </dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Un tableau ({{jsxref("Array")}}) dont les éléments sont les sous-chaînes de caractères issues de la découpe.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>Cette méthode est appelée de façon interne par la méthode {{jsxref("String.prototype.split()")}} lorsque l'argument <code>str</code> est un objet {{jsxref("RegExp")}}. Ainsi, les deux exemples qui suivent sont équivalents et le second est la version interne du premier :</p>
-
-<pre class="brush: js notranslate">'a-b-c'.split(/-/);
-
-/-/[Symbol.split]('a-b-c');</pre>
-
-<p>Cette méthode existe afin de pouvoir adapter le fonctionnement de la découpe pour les sous-classes de <code>RegExp</code>.</p>
-
-<p>Si le séparateur n'est pas un objet {{jsxref("RegExp")}}, la méthode {{jsxref("String.prototype.split()")}} n'appellera pas cette méthode et ne créera pas d'objet {{jsxref("RegExp")}}.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Appel_direct">Appel direct</h3>
-
-<p>Cette méthode peut être utilisée comme  {{jsxref("String.prototype.split()")}}, l'objet <code>this</code> est différent et l'ordre des arguments également.</p>
-
-<pre class="brush: js notranslate">var re = /-/g;
-var str = '2016-01-02';
-var résultat = re[Symbol.split](str);
-console.log(résultat);  // ["2016", "01", "02"]
-</pre>
-
-<h3 id="Utiliser_split_avec_une_sous-classe">Utiliser <code>@@split</code> avec une sous-classe</h3>
-
-<p>Les sous-classes de {{jsxref("RegExp")}} peuvent surcharger  <code>[@@split]()</code> afin de modifier le comportement de la découpe :</p>
-
-<pre class="brush: js notranslate">class MaRegExp extends RegExp {
-  [Symbol.split](str, limit) {
-    var résultat = RegExp.prototype[Symbol.split].call(this, str, limit);
-    return résultat.map(x =&gt; "(" + x + ")");
-  }
-}
-
-var re = new MaRegExp('-');
-var str = '2016-01-02';
-var résultat = str.split(re); // String.prototype.split appelle re[@@split].
-console.log(résultat); // ["(2016)", "(01)", "(02)"]
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-regexp.prototype-@@split', 'RegExp.prototype[@@split]')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-regexp.prototype-@@split', 'RegExp.prototype[@@split]')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.RegExp.@@split")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("String.prototype.split()")}}</li>
- <li>{{jsxref("RegExp.prototype.@@match()", "RegExp.prototype[@@match]()")}}</li>
- <li>{{jsxref("RegExp.prototype.@@replace()", "RegExp.prototype[@@replace]()")}}</li>
- <li>{{jsxref("RegExp.prototype.@@search()", "RegExp.prototype[@@search]()")}}</li>
- <li>{{jsxref("RegExp.prototype.exec()")}}</li>
- <li>{{jsxref("RegExp.prototype.test()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/regexp/@@split/index.md b/files/fr/web/javascript/reference/global_objects/regexp/@@split/index.md
new file mode 100644
index 0000000000..8b576affe5
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/regexp/@@split/index.md
@@ -0,0 +1,98 @@
+---
+title: RegExp.prototype[@@split]()
+slug: Web/JavaScript/Reference/Global_Objects/RegExp/@@split
+tags:
+  - Expressions rationnelles
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - RegExp
+translation_of: Web/JavaScript/Reference/Global_Objects/RegExp/@@split
+original_slug: Web/JavaScript/Reference/Objets_globaux/RegExp/@@split
+---
+{{JSRef}}
+
+La méthode **`[@@split]()`** permet de découper une chaîne de caractères ({{jsxref("String")}}) en un tableau de sous-chaînes.
+
+{{EmbedInteractiveExample("pages/js/regexp-prototype-@@split.html")}}
+
+## Syntaxe
+
+    regexp[Symbol.split](str[, limite])
+
+### Paramètres
+
+- `str`
+  - : La chaîne de caractères qu'on souhaite découper.
+- `limite`
+  - : Paramètre optionnel. Un entier indiquant le nombre maximal de sous-chaînes à trouver. La méthode `[@@split]()` découpe la chaîne pour chaque correspondance de l'expression rationnelle `this` jusqu'à ce que le nombre d'éléments obtenus atteigne cette limite ou que la chaîne n'ait plus de correspondances.
+
+### Valeur de retour
+
+Un tableau ({{jsxref("Array")}}) dont les éléments sont les sous-chaînes de caractères issues de la découpe.
+
+## Description
+
+Cette méthode est appelée de façon interne par la méthode {{jsxref("String.prototype.split()")}} lorsque l'argument `str` est un objet {{jsxref("RegExp")}}. Ainsi, les deux exemples qui suivent sont équivalents et le second est la version interne du premier :
+
+```js
+'a-b-c'.split(/-/);
+
+/-/[Symbol.split]('a-b-c');
+```
+
+Cette méthode existe afin de pouvoir adapter le fonctionnement de la découpe pour les sous-classes de `RegExp`.
+
+Si le séparateur n'est pas un objet {{jsxref("RegExp")}}, la méthode {{jsxref("String.prototype.split()")}} n'appellera pas cette méthode et ne créera pas d'objet {{jsxref("RegExp")}}.
+
+## Exemples
+
+### Appel direct
+
+Cette méthode peut être utilisée comme  {{jsxref("String.prototype.split()")}}, l'objet `this` est différent et l'ordre des arguments également.
+
+```js
+var re = /-/g;
+var str = '2016-01-02';
+var résultat = re[Symbol.split](str);
+console.log(résultat);  // ["2016", "01", "02"]
+```
+
+### Utiliser `@@split` avec une sous-classe
+
+Les sous-classes de {{jsxref("RegExp")}} peuvent surcharger  `[@@split]()` afin de modifier le comportement de la découpe :
+
+```js
+class MaRegExp extends RegExp {
+  [Symbol.split](str, limit) {
+    var résultat = RegExp.prototype[Symbol.split].call(this, str, limit);
+    return résultat.map(x => "(" + x + ")");
+  }
+}
+
+var re = new MaRegExp('-');
+var str = '2016-01-02';
+var résultat = str.split(re); // String.prototype.split appelle re[@@split].
+console.log(résultat); // ["(2016)", "(01)", "(02)"]
+```
+
+## Spécifications
+
+| Spécification                                                                                                    | État                         | Commentaires         |
+| ---------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName('ES6', '#sec-regexp.prototype-@@split', 'RegExp.prototype[@@split]')}}     | {{Spec2('ES6')}}         | Définition initiale. |
+| {{SpecName('ESDraft', '#sec-regexp.prototype-@@split', 'RegExp.prototype[@@split]')}} | {{Spec2('ESDraft')}} |                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.RegExp.@@split")}}
+
+## Voir aussi
+
+- {{jsxref("String.prototype.split()")}}
+- {{jsxref("RegExp.prototype.@@match()", "RegExp.prototype[@@match]()")}}
+- {{jsxref("RegExp.prototype.@@replace()", "RegExp.prototype[@@replace]()")}}
+- {{jsxref("RegExp.prototype.@@search()", "RegExp.prototype[@@search]()")}}
+- {{jsxref("RegExp.prototype.exec()")}}
+- {{jsxref("RegExp.prototype.test()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/regexp/compile/index.html b/files/fr/web/javascript/reference/global_objects/regexp/compile/index.html
deleted file mode 100644
index d6002f1ba0..0000000000
--- a/files/fr/web/javascript/reference/global_objects/regexp/compile/index.html
+++ /dev/null
@@ -1,86 +0,0 @@
----
-title: RegExp.prototype.compile()
-slug: Web/JavaScript/Reference/Global_Objects/RegExp/compile
-tags:
-  - Deprecated
-  - JavaScript
-  - Méthode
-  - Prototype
-  - Reference
-  - RegExp
-translation_of: Web/JavaScript/Reference/Global_Objects/RegExp/compile
-original_slug: Web/JavaScript/Reference/Objets_globaux/RegExp/compile
----
-<div>{{JSRef}} {{deprecated_header}}</div>
-
-<p>La méthode dépréciée <code><strong>compile</strong></code><strong><code>()</code></strong> est utilisée afin de (re)compiler une expression rationnelle lors de l'exécution d'un script. Cette méthode effectue essentiellement les mêmes actions que le constructeur <code>RegExp</code>.</p>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><code><var>regexObj</var>.compile(<var>motif, flags</var>)</code></pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>motif</code></dt>
- <dd>Le texte de l'expression rationnelle.</dd>
- <dt><code>flags</code></dt>
- <dd>
- <p>S'ils sont utilisés, les drapeaux (<em>flags</em>) peuvent être combinés avec les valeurs suivantes :</p>
-
- <dl>
-  <dt><code>g</code></dt>
-  <dd>correspondance globale</dd>
-  <dt><code>i</code></dt>
-  <dd>ignorer la casse</dd>
-  <dt><code>m</code></dt>
-  <dd>multiligne : on traite les caractères de début et de fin (^ et $) de façon à travailler sur plusieurs lignes (ils correspondent au début et à la fin de chaque ligne et non au début ou à la fin de la chaîne entière)</dd>
-  <dt><code>y</code></dt>
-  <dd>adhérence : ne recherche les correspondances qu'à partir de l'indice fourni par la propriété <code>lastIndex</code> de l'expression rationnelle dans la chaîne cible (la recherche n'est pas effectuée pour les indices suivants).</dd>
- </dl>
- </dd>
-</dl>
-
-<h2 id="Description">Description</h2>
-
-<p>La méthode <code>compile</code> est dépréciée. Pour obtenir le même effet, on utilisera le constructeur <code>RegExp</code>.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<p>Dans l'exemple qui suit, on voit comment réinitialiser le motif et les drapeaux d'une expression rationnelle grâce à  la méthode <code>compile()</code>.</p>
-
-<pre class="brush: js">var regexObj = new RegExp("toto", "gi");
-regexObj.compile("nouveau toto", "g");
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-regexp.prototype.compile', 'RegExp.prototype.compile')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td>Définition initiale dans l'annexe B (normative) pour les fonctionnalités ECMAScript additionnelles pour les navigateurs web.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-regexp.prototype.compile', 'RegExp.prototype.compile')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td>Définition initiale dans l'annexe B (normative) pour les fonctionnalités ECMAScript additionnelles pour les navigateurs web.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.RegExp.compile")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("RegExp")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/regexp/compile/index.md b/files/fr/web/javascript/reference/global_objects/regexp/compile/index.md
new file mode 100644
index 0000000000..fa48e0f0c8
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/regexp/compile/index.md
@@ -0,0 +1,65 @@
+---
+title: RegExp.prototype.compile()
+slug: Web/JavaScript/Reference/Global_Objects/RegExp/compile
+tags:
+  - Deprecated
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - RegExp
+translation_of: Web/JavaScript/Reference/Global_Objects/RegExp/compile
+original_slug: Web/JavaScript/Reference/Objets_globaux/RegExp/compile
+---
+{{JSRef}} {{deprecated_header}}
+
+La méthode dépréciée **`compile`\*\***`()`\*\* est utilisée afin de (re)compiler une expression rationnelle lors de l'exécution d'un script. Cette méthode effectue essentiellement les mêmes actions que le constructeur `RegExp`.
+
+## Syntaxe
+
+    regexObj.compile(motif, flags)
+
+### Paramètres
+
+- `motif`
+  - : Le texte de l'expression rationnelle.
+- `flags`
+
+  - : S'ils sont utilisés, les drapeaux (_flags_) peuvent être combinés avec les valeurs suivantes :
+
+    - `g`
+      - : correspondance globale
+    - `i`
+      - : ignorer la casse
+    - `m`
+      - : multiligne : on traite les caractères de début et de fin (^ et $) de façon à travailler sur plusieurs lignes (ils correspondent au début et à la fin de chaque ligne et non au début ou à la fin de la chaîne entière)
+    - `y`
+      - : adhérence : ne recherche les correspondances qu'à partir de l'indice fourni par la propriété `lastIndex` de l'expression rationnelle dans la chaîne cible (la recherche n'est pas effectuée pour les indices suivants).
+
+## Description
+
+La méthode `compile` est dépréciée. Pour obtenir le même effet, on utilisera le constructeur `RegExp`.
+
+## Exemples
+
+Dans l'exemple qui suit, on voit comment réinitialiser le motif et les drapeaux d'une expression rationnelle grâce à  la méthode `compile()`.
+
+```js
+var regexObj = new RegExp("toto", "gi");
+regexObj.compile("nouveau toto", "g");
+```
+
+## Spécifications
+
+| Spécification                                                                                                    | Statut                       | Commentaires                                                                                                                 |
+| ---------------------------------------------------------------------------------------------------------------- | ---------------------------- | ---------------------------------------------------------------------------------------------------------------------------- |
+| {{SpecName('ES6', '#sec-regexp.prototype.compile', 'RegExp.prototype.compile')}}     | {{Spec2('ES6')}}         | Définition initiale dans l'annexe B (normative) pour les fonctionnalités ECMAScript additionnelles pour les navigateurs web. |
+| {{SpecName('ESDraft', '#sec-regexp.prototype.compile', 'RegExp.prototype.compile')}} | {{Spec2('ESDraft')}} | Définition initiale dans l'annexe B (normative) pour les fonctionnalités ECMAScript additionnelles pour les navigateurs web. |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.RegExp.compile")}}
+
+## Voir aussi
+
+- {{jsxref("RegExp")}}
diff --git a/files/fr/web/javascript/reference/global_objects/regexp/dotall/index.html b/files/fr/web/javascript/reference/global_objects/regexp/dotall/index.html
deleted file mode 100644
index d3942bbb9a..0000000000
--- a/files/fr/web/javascript/reference/global_objects/regexp/dotall/index.html
+++ /dev/null
@@ -1,49 +0,0 @@
----
-title: RegExp.prototype.dotAll
-slug: Web/JavaScript/Reference/Global_Objects/RegExp/dotAll
-tags:
-  - Draft
-  - JavaScript
-  - Propriété
-  - Prototype
-  - Reference
-  - RegExp
-translation_of: Web/JavaScript/Reference/Global_Objects/RegExp/dotAll
-original_slug: Web/JavaScript/Reference/Objets_globaux/RegExp/dotAll
----
-<p>{{JSRef}}{{Draft}}</p>
-
-<p>La propriété <strong><code>dotAll</code></strong> indique si le marqueur "<code>s</code>" est utilisé pour l'expression rationnelle. <code>dotAll</code> est une propriété en lecture seule et qui renseigne à propos de l'expression rationnelle courante.</p>
-
-<p>{{JS_Property_Attributes(0, 0, 1)}}</p>
-
-<h2 id="Description">Description</h2>
-
-<p><code>dotAll</code> est un booléen qui vaut <code>true</code> si le marqueur "<code>s</code>" a été utilisé pour l'expression et <code>false</code> sinon. Le marqueur "<code>s</code>" indique que le caractère spécial point ("<code>.</code>") doit également correspondre aux caractères de saut de ligne (et pour lesquels il ne correspondrait pas s'il n'était pas activé) :</p>
-
-<ul>
- <li>U+000A LINE FEED (LF) ("<code>\n</code>")</li>
- <li>U+000D CARRIAGE RETURN (CR) ("<code>\r</code>")</li>
- <li>U+2028 LINE SEPARATOR</li>
- <li>U+2029 PARAGRAPH SEPARATOR</li>
-</ul>
-
-<p>Cela signifie ainsi que le point peut correspondre à n'importe quel caractère du plan multilingue de base Unicode (ou <em>Basic Multilingual Plane</em> (BMP)). Si on souhaite également cibler les caractères des plans astraux, il faudra utiliser le marqueur "<code>u</code>" (unicode). En utilisant les deux marqueurs simultanément, on peut alors cibler n'importe quel caractère Unicode.</p>
-
-<p>Cette propriété est uniquement accessible en lecture et ne peut pas être modifiée.</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.RegExp.dotAll")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{JSxRef("RegExp.lastIndex")}}</li>
- <li>{{JSxRef("RegExp.prototype.global")}}</li>
- <li>{{JSxRef("RegExp.prototype.ignoreCase")}}</li>
- <li>{{JSxRef("RegExp.prototype.multiline")}}</li>
- <li>{{JSxRef("RegExp.prototype.source")}}</li>
- <li>{{JSxRef("RegExp.prototype.sticky")}}</li>
- <li>{{JSxRef("RegExp.prototype.unicode")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/regexp/dotall/index.md b/files/fr/web/javascript/reference/global_objects/regexp/dotall/index.md
new file mode 100644
index 0000000000..1c8c351469
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/regexp/dotall/index.md
@@ -0,0 +1,45 @@
+---
+title: RegExp.prototype.dotAll
+slug: Web/JavaScript/Reference/Global_Objects/RegExp/dotAll
+tags:
+  - Draft
+  - JavaScript
+  - Propriété
+  - Prototype
+  - Reference
+  - RegExp
+translation_of: Web/JavaScript/Reference/Global_Objects/RegExp/dotAll
+original_slug: Web/JavaScript/Reference/Objets_globaux/RegExp/dotAll
+---
+{{JSRef}}{{Draft}}
+
+La propriété **`dotAll`** indique si le marqueur "`s`" est utilisé pour l'expression rationnelle. `dotAll` est une propriété en lecture seule et qui renseigne à propos de l'expression rationnelle courante.
+
+{{JS_Property_Attributes(0, 0, 1)}}
+
+## Description
+
+`dotAll` est un booléen qui vaut `true` si le marqueur "`s`" a été utilisé pour l'expression et `false` sinon. Le marqueur "`s`" indique que le caractère spécial point ("`.`") doit également correspondre aux caractères de saut de ligne (et pour lesquels il ne correspondrait pas s'il n'était pas activé) :
+
+- U+000A LINE FEED (LF) ("`\n`")
+- U+000D CARRIAGE RETURN (CR) ("`\r`")
+- U+2028 LINE SEPARATOR
+- U+2029 PARAGRAPH SEPARATOR
+
+Cela signifie ainsi que le point peut correspondre à n'importe quel caractère du plan multilingue de base Unicode (ou _Basic Multilingual Plane_ (BMP)). Si on souhaite également cibler les caractères des plans astraux, il faudra utiliser le marqueur "`u`" (unicode). En utilisant les deux marqueurs simultanément, on peut alors cibler n'importe quel caractère Unicode.
+
+Cette propriété est uniquement accessible en lecture et ne peut pas être modifiée.
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.RegExp.dotAll")}}
+
+## Voir aussi
+
+- {{JSxRef("RegExp.lastIndex")}}
+- {{JSxRef("RegExp.prototype.global")}}
+- {{JSxRef("RegExp.prototype.ignoreCase")}}
+- {{JSxRef("RegExp.prototype.multiline")}}
+- {{JSxRef("RegExp.prototype.source")}}
+- {{JSxRef("RegExp.prototype.sticky")}}
+- {{JSxRef("RegExp.prototype.unicode")}}
diff --git a/files/fr/web/javascript/reference/global_objects/regexp/exec/index.html b/files/fr/web/javascript/reference/global_objects/regexp/exec/index.html
deleted file mode 100644
index 3245c98358..0000000000
--- a/files/fr/web/javascript/reference/global_objects/regexp/exec/index.html
+++ /dev/null
@@ -1,199 +0,0 @@
----
-title: RegExp.prototype.exec()
-slug: Web/JavaScript/Reference/Global_Objects/RegExp/exec
-tags:
-  - JavaScript
-  - Méthode
-  - Prototype
-  - Reference
-  - RegExp
-translation_of: Web/JavaScript/Reference/Global_Objects/RegExp/exec
-original_slug: Web/JavaScript/Reference/Objets_globaux/RegExp/exec
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <strong><code>exec()</code></strong> exécute la recherche d'une correspondance sur une chaîne de caractères donnée. Elle renvoie un tableau contenant les résultats ou {{jsxref("null")}}.</p>
-
-<p>Si on souhaite uniquement savoir s'il y a une correspondance, on utilisera la méthode {{jsxref("RegExp.prototype.test()")}} ou la méthode {{jsxref("String.prototype.search()")}}.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/regexp-prototype-exec.html")}}</div>
-
-
-
-<p>Les objets représentant des expressions rationnelles gardent un état en mémoire lorsqu'ils utilisent les marqueurs {{jsxref("RegExp.global", "global")}} ou {{jsxref("RegExp.sticky", "sticky")}} et ils gardent notamment en mémoire {{jsxref("RegExp.lastIndex", "lastIndex")}} à partir de la correspondance précédemment trouvée. Ainsi, <code>exec()</code> peut être utilisée afin de parcourir plusieurs correspondances dans un texte (avec des groupes capturants) (contrairement à {{jsxref("String.prototype.match()")}}).</p>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>regexObj</var>.exec(<var>chaîne</var>)</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>chaîne</code></dt>
- <dd>La chaîne de caractères dans laquelle on recherche la correspondance décrite par l'expression rationnelle.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>S'il y a une correspondance, la méthode <code>exec()</code> renvoie un tableau (contenant des éléments et deux propriétés <code>index</code> et <code>values</code>, cf. ci-après) et met à jour les propriétés de l'objet représentant l'expression rationnelle (notamment {{jsxref("RegExp.lastIndex", "lastIndex")}}). Le tableau renvoyé contient le texte qui correspond dans le premier élément puis un élément pour chaque groupe capturé dans les parenthèses capturantes.</p>
-
-<p>S'il n'y a aucune correspondance, la méthode <code>exec()</code> renvoie {{jsxref("null")}} et la propriété {{jsxref("RegExp.lastIndex", "lastIndex")}} reçoit la valeur 0.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>Si on a l'exemple suivant :</p>
-
-<pre class="brush: js">// On a une correspondance si on a "quick brown" suivi par "jumps", on ignore les caractères entre
-// On garde en mémoire "brown" et "jumps"
-// On ignore la casse
-var re = /quick\s(brown).+?(jumps)/ig;
-var result = re.exec('The Quick Brown Fox Jumps Over The Lazy Dog');
-</pre>
-
-<p>Le tableau suivant montre l'état résultant suite à ce script :</p>
-
-<table class="fullwidth-table">
- <tbody>
-  <tr>
-   <td class="header">Objet</td>
-   <td class="header">Propriété/Index</td>
-   <td class="header">Description</td>
-   <td class="header">Exemple</td>
-  </tr>
-  <tr>
-   <td rowspan="4"><code>result</code></td>
-   <td><code>[0]</code></td>
-   <td>La chaîne complète des caractères qui correspondent.</td>
-   <td><code>"Quick Brown Fox Jumps"</code></td>
-  </tr>
-  <tr>
-   <td><code>[1], ...[<em>n</em> ]</code></td>
-   <td>Les sous-chaînes correspondantes aux groupes capturants s'il y en a. Le nombre de groupes de parenthèses capturantes est illimité.</td>
-   <td><code>result[1] === "Brown"<br>
-    result[2] === "Jumps"</code></td>
-  </tr>
-  <tr>
-   <td><code>index</code></td>
-   <td>L'indice (compté à partir de 0) de la correspondance dans la chaîne.</td>
-   <td><code>4</code></td>
-  </tr>
-  <tr>
-   <td><code>input</code></td>
-   <td>La chaîne de caractères utilisée en entrée.</td>
-   <td><code>"The Quick Brown Fox Jumps Over The Lazy Dog"</code></td>
-  </tr>
-  <tr>
-   <td rowspan="5"><code>re</code></td>
-   <td><code>lastIndex</code></td>
-   <td>L'indice à partir duquel chercher la prochaine correspondance. Lorsque le drapeau "g" est absent, cette propriété sera 0.</td>
-   <td><code>25</code></td>
-  </tr>
-  <tr>
-   <td><code>ignoreCase</code></td>
-   <td>Indique si le drapeau "<code>i</code>" a été utilisé pour ignorer la casse.</td>
-   <td><code>true</code></td>
-  </tr>
-  <tr>
-   <td><code>global</code></td>
-   <td>Indique si le drapeau "<code>g</code>" a été utilisé pour la correspondance globale.</td>
-   <td><code>true</code></td>
-  </tr>
-  <tr>
-   <td><code>multiline</code></td>
-   <td>Indique si le drapeau "<code>m</code>" a été utilisé pour chercher une correspondance sur plusieurs lignes.</td>
-   <td><code>false</code></td>
-  </tr>
-  <tr>
-   <td><code>source</code></td>
-   <td>Le texte du motif.</td>
-   <td><code>"quick\s(brown).+?(jumps)"</code></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Trouver_des_correspondances_successives">Trouver des correspondances successives</h3>
-
-<p>Si on utilise le drapeau "<code>g</code>" dans l'expression rationnelle, on peut utiliser la méthode <code>exec()</code> plusieurs fois afin de trouver les correspondances successives dans la chaîne. Lorsqu'on procède ainsi, la recherche reprend à la position indiquée par la propriété {{jsxref("RegExp.lastIndex", "lastIndex")}} ({{jsxref("RegExp.prototype.test()", "test()")}} fera également progresser la propriété {{jsxref("RegExp.lastIndex", "lastIndex")}}).</p>
-
-<p>On notera que la propriété {{jsxref("RegExp.lastIndex", "lastIndex")}} ne sera pas réinitialisée lors de la recherche sur une autre chaîne de caractères, c'est la valeur existante de {{jsxref("RegExp.lastIndex", "lastIndex")}} qui sera utilisée.</p>
-
-<p>Par exemple, si on utilise le fragment de code suivant :</p>
-
-<pre class="brush: js">var maRegex = /ab*/g;
-var str = 'abbcdefabh';
-var monTableau;
-while ((monTableau = maRegex.exec(str)) !== null) {
-  var msg = 'Trouvé ' + monTableau[0] + '. ';
-  msg += 'Prochaine correspondance à partir de ' + maRegex.lastIndex;
-  console.log(msg);
-}
-</pre>
-
-<p>Le script affichera alors :</p>
-
-<pre>Trouvé abb. Prochaine correspondance à partir de 3
-Trouvé ab. Prochaine correspondance à partir de 9
-</pre>
-
-<div class="warning">
-<p><strong>Attention :</strong> Il ne faut pas placer un littéral d'expression rationnelle (ou le constructeur {{jsxref("RegExp")}}) au sein de la condition <code>while</code> car cela créerait un boucle infinie s'il y a une correspondance car la propriété {{jsxref("RegExp.lastIndex", "lastIndex")}} serait redéfinie à chaque itération. Il faut également s'assurer que le drapeau global est défini sinon on aura également une boucle.</p>
-</div>
-
-<h3 id="Utiliser_exec()_avec_des_littéraux">Utiliser <code>exec()</code> avec des littéraux</h3>
-
-<p>Il est aussi possible d'utiliser <code>exec()</code> sans créer d'objet {{jsxref("RegExp")}} explicite :</p>
-
-<pre class="brush: js">var matches = /(coucou \S+)/.exec('Ceci est un coucou monde !');
-console.log(matches[1]);
-</pre>
-
-<p>Cela affichera 'coucou monde !'.</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('ES3')}}</td>
-   <td>{{Spec2('ES3')}}</td>
-   <td>Définition initiale. Implémentée avec JavaScript 1.2.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-15.10.6.21', 'RegExp.exec')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-regexp.prototype.exec', 'RegExp.exec')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-regexp.prototype.exec', 'RegExp.exec')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.RegExp.exec")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>Le chapitre sur <a href="/fr/docs/Web/JavaScript/Guide/Expressions_régulières">les expressions rationnelles</a> du <a href="/fr/docs/Web/JavaScript/Guide">Guide JavaScript</a></li>
- <li>{{jsxref("RegExp")}}</li>
- <li>{{jsxref("String.prototype.match()")}}</li>
- <li>{{jsxref("String.prototype.matchAll()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/regexp/exec/index.md b/files/fr/web/javascript/reference/global_objects/regexp/exec/index.md
new file mode 100644
index 0000000000..be53ae8ddd
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/regexp/exec/index.md
@@ -0,0 +1,188 @@
+---
+title: RegExp.prototype.exec()
+slug: Web/JavaScript/Reference/Global_Objects/RegExp/exec
+tags:
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - RegExp
+translation_of: Web/JavaScript/Reference/Global_Objects/RegExp/exec
+original_slug: Web/JavaScript/Reference/Objets_globaux/RegExp/exec
+---
+{{JSRef}}
+
+La méthode **`exec()`** exécute la recherche d'une correspondance sur une chaîne de caractères donnée. Elle renvoie un tableau contenant les résultats ou {{jsxref("null")}}.
+
+Si on souhaite uniquement savoir s'il y a une correspondance, on utilisera la méthode {{jsxref("RegExp.prototype.test()")}} ou la méthode {{jsxref("String.prototype.search()")}}.
+
+{{EmbedInteractiveExample("pages/js/regexp-prototype-exec.html")}}
+
+Les objets représentant des expressions rationnelles gardent un état en mémoire lorsqu'ils utilisent les marqueurs {{jsxref("RegExp.global", "global")}} ou {{jsxref("RegExp.sticky", "sticky")}} et ils gardent notamment en mémoire {{jsxref("RegExp.lastIndex", "lastIndex")}} à partir de la correspondance précédemment trouvée. Ainsi, `exec()` peut être utilisée afin de parcourir plusieurs correspondances dans un texte (avec des groupes capturants) (contrairement à {{jsxref("String.prototype.match()")}}).
+
+## Syntaxe
+
+    regexObj.exec(chaîne)
+
+### Paramètres
+
+- `chaîne`
+  - : La chaîne de caractères dans laquelle on recherche la correspondance décrite par l'expression rationnelle.
+
+### Valeur de retour
+
+S'il y a une correspondance, la méthode `exec()` renvoie un tableau (contenant des éléments et deux propriétés `index` et `values`, cf. ci-après) et met à jour les propriétés de l'objet représentant l'expression rationnelle (notamment {{jsxref("RegExp.lastIndex", "lastIndex")}}). Le tableau renvoyé contient le texte qui correspond dans le premier élément puis un élément pour chaque groupe capturé dans les parenthèses capturantes.
+
+S'il n'y a aucune correspondance, la méthode `exec()` renvoie {{jsxref("null")}} et la propriété {{jsxref("RegExp.lastIndex", "lastIndex")}} reçoit la valeur 0.
+
+## Description
+
+Si on a l'exemple suivant :
+
+```js
+// On a une correspondance si on a "quick brown" suivi par "jumps", on ignore les caractères entre
+// On garde en mémoire "brown" et "jumps"
+// On ignore la casse
+var re = /quick\s(brown).+?(jumps)/ig;
+var result = re.exec('The Quick Brown Fox Jumps Over The Lazy Dog');
+```
+
+Le tableau suivant montre l'état résultant suite à ce script :
+
+<table class="fullwidth-table">
+  <tbody>
+    <tr>
+      <td class="header">Objet</td>
+      <td class="header">Propriété/Index</td>
+      <td class="header">Description</td>
+      <td class="header">Exemple</td>
+    </tr>
+    <tr>
+      <td rowspan="4"><code>result</code></td>
+      <td><code>[0]</code></td>
+      <td>La chaîne complète des caractères qui correspondent.</td>
+      <td><code>"Quick Brown Fox Jumps"</code></td>
+    </tr>
+    <tr>
+      <td>
+        <code>[1], ...[<em>n</em> ]</code>
+      </td>
+      <td>
+        Les sous-chaînes correspondantes aux groupes capturants s'il y en a. Le
+        nombre de groupes de parenthèses capturantes est illimité.
+      </td>
+      <td>
+        <code>result[1] === "Brown"<br />result[2] === "Jumps"</code>
+      </td>
+    </tr>
+    <tr>
+      <td><code>index</code></td>
+      <td>
+        L'indice (compté à partir de 0) de la correspondance dans la chaîne.
+      </td>
+      <td><code>4</code></td>
+    </tr>
+    <tr>
+      <td><code>input</code></td>
+      <td>La chaîne de caractères utilisée en entrée.</td>
+      <td><code>"The Quick Brown Fox Jumps Over The Lazy Dog"</code></td>
+    </tr>
+    <tr>
+      <td rowspan="5"><code>re</code></td>
+      <td><code>lastIndex</code></td>
+      <td>
+        L'indice à partir duquel chercher la prochaine correspondance. Lorsque
+        le drapeau "g" est absent, cette propriété sera 0.
+      </td>
+      <td><code>25</code></td>
+    </tr>
+    <tr>
+      <td><code>ignoreCase</code></td>
+      <td>
+        Indique si le drapeau "<code>i</code>" a été utilisé pour ignorer la
+        casse.
+      </td>
+      <td><code>true</code></td>
+    </tr>
+    <tr>
+      <td><code>global</code></td>
+      <td>
+        Indique si le drapeau "<code>g</code>" a été utilisé pour la
+        correspondance globale.
+      </td>
+      <td><code>true</code></td>
+    </tr>
+    <tr>
+      <td><code>multiline</code></td>
+      <td>
+        Indique si le drapeau "<code>m</code>" a été utilisé pour chercher une
+        correspondance sur plusieurs lignes.
+      </td>
+      <td><code>false</code></td>
+    </tr>
+    <tr>
+      <td><code>source</code></td>
+      <td>Le texte du motif.</td>
+      <td><code>"quick\s(brown).+?(jumps)"</code></td>
+    </tr>
+  </tbody>
+</table>
+
+## Exemples
+
+### Trouver des correspondances successives
+
+Si on utilise le drapeau "`g`" dans l'expression rationnelle, on peut utiliser la méthode `exec()` plusieurs fois afin de trouver les correspondances successives dans la chaîne. Lorsqu'on procède ainsi, la recherche reprend à la position indiquée par la propriété {{jsxref("RegExp.lastIndex", "lastIndex")}} ({{jsxref("RegExp.prototype.test()", "test()")}} fera également progresser la propriété {{jsxref("RegExp.lastIndex", "lastIndex")}}).
+
+On notera que la propriété {{jsxref("RegExp.lastIndex", "lastIndex")}} ne sera pas réinitialisée lors de la recherche sur une autre chaîne de caractères, c'est la valeur existante de {{jsxref("RegExp.lastIndex", "lastIndex")}} qui sera utilisée.
+
+Par exemple, si on utilise le fragment de code suivant :
+
+```js
+var maRegex = /ab*/g;
+var str = 'abbcdefabh';
+var monTableau;
+while ((monTableau = maRegex.exec(str)) !== null) {
+  var msg = 'Trouvé ' + monTableau[0] + '. ';
+  msg += 'Prochaine correspondance à partir de ' + maRegex.lastIndex;
+  console.log(msg);
+}
+```
+
+Le script affichera alors :
+
+    Trouvé abb. Prochaine correspondance à partir de 3
+    Trouvé ab. Prochaine correspondance à partir de 9
+
+> **Attention :** Il ne faut pas placer un littéral d'expression rationnelle (ou le constructeur {{jsxref("RegExp")}}) au sein de la condition `while` car cela créerait un boucle infinie s'il y a une correspondance car la propriété {{jsxref("RegExp.lastIndex", "lastIndex")}} serait redéfinie à chaque itération. Il faut également s'assurer que le drapeau global est défini sinon on aura également une boucle.
+
+### Utiliser `exec()` avec des littéraux
+
+Il est aussi possible d'utiliser `exec()` sans créer d'objet {{jsxref("RegExp")}} explicite :
+
+```js
+var matches = /(coucou \S+)/.exec('Ceci est un coucou monde !');
+console.log(matches[1]);
+```
+
+Cela affichera 'coucou monde !'.
+
+## Spécifications
+
+| Spécification                                                                                | État                         | Commentaires                                          |
+| -------------------------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- |
+| {{SpecName('ES3')}}                                                                     | {{Spec2('ES3')}}         | Définition initiale. Implémentée avec JavaScript 1.2. |
+| {{SpecName('ES5.1', '#sec-15.10.6.21', 'RegExp.exec')}}                     | {{Spec2('ES5.1')}}     |                                                       |
+| {{SpecName('ES6', '#sec-regexp.prototype.exec', 'RegExp.exec')}}         | {{Spec2('ES6')}}         |                                                       |
+| {{SpecName('ESDraft', '#sec-regexp.prototype.exec', 'RegExp.exec')}} | {{Spec2('ESDraft')}} |                                                       |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.RegExp.exec")}}
+
+## Voir aussi
+
+- Le chapitre sur [les expressions rationnelles](/fr/docs/Web/JavaScript/Guide/Expressions_régulières) du [Guide JavaScript](/fr/docs/Web/JavaScript/Guide)
+- {{jsxref("RegExp")}}
+- {{jsxref("String.prototype.match()")}}
+- {{jsxref("String.prototype.matchAll()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/regexp/flags/index.html b/files/fr/web/javascript/reference/global_objects/regexp/flags/index.html
deleted file mode 100644
index f03a085b92..0000000000
--- a/files/fr/web/javascript/reference/global_objects/regexp/flags/index.html
+++ /dev/null
@@ -1,79 +0,0 @@
----
-title: RegExp.prototype.flags
-slug: Web/JavaScript/Reference/Global_Objects/RegExp/flags
-tags:
-  - ECMAScript 2015
-  - JavaScript
-  - Propriété
-  - Prototype
-  - Reference
-  - RegExp
-  - polyfill
-translation_of: Web/JavaScript/Reference/Global_Objects/RegExp/flags
-original_slug: Web/JavaScript/Reference/Objets_globaux/RegExp/flags
----
-<div>{{JSRef}}</div>
-
-<p>La propriété <strong><code>flags</code></strong> renvoie une chaîne de caractères contenant les <a href="/fr/docs/Web/JavaScript/Guide/Expressions_régulières#Effectuer_des_recherches_avanc.C3.A9es_en_utilisant_les_drapeaux_(flags)">drapeaux (<em>flags</em>)</a> de l'objet {{jsxref("RegExp")}} auquel elle appartient.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/regexp-prototype-flags.html")}}</div>
-
-
-
-<div>{{js_property_attributes(0, 0, 1)}}</div>
-
-<h2 id="Description">Description</h2>
-
-<p>Les drapeaux de la propriété <code>flags</code> sont rangés par ordre alphabétique de gauche à droite.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Utiliser_flags">Utiliser <code>flags</code></h3>
-
-<pre class="brush: js">/toto/ig.flags;   // "gi"
-/truc/myu.flags;  // "muy"
-</pre>
-
-<h2 id="Prothèse_d'émulation_(polyfill)">Prothèse d'émulation (<em>polyfill</em>)</h2>
-
-<pre class="brush: js">if (RegExp.prototype.flags === undefined) {
-  Object.defineProperty(RegExp.prototype, 'flags', {
-    configurable: true,
-    get: function() {
-      return this.toString().match(/[gimuy]*$/)[0];
-    }
-  });
-}
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-get-regexp.prototype.flags', 'RegExp.prototype.flags')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-get-regexp.prototype.flags', 'RegExp.prototype.flags')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.RegExp.flags")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("RegExp.prototype.source")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/regexp/flags/index.md b/files/fr/web/javascript/reference/global_objects/regexp/flags/index.md
new file mode 100644
index 0000000000..1bea14f02d
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/regexp/flags/index.md
@@ -0,0 +1,60 @@
+---
+title: RegExp.prototype.flags
+slug: Web/JavaScript/Reference/Global_Objects/RegExp/flags
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Propriété
+  - Prototype
+  - Reference
+  - RegExp
+  - polyfill
+translation_of: Web/JavaScript/Reference/Global_Objects/RegExp/flags
+original_slug: Web/JavaScript/Reference/Objets_globaux/RegExp/flags
+---
+{{JSRef}}
+
+La propriété **`flags`** renvoie une chaîne de caractères contenant les [drapeaux (_flags_)](</fr/docs/Web/JavaScript/Guide/Expressions_régulières#Effectuer_des_recherches_avanc.C3.A9es_en_utilisant_les_drapeaux_(flags)>) de l'objet {{jsxref("RegExp")}} auquel elle appartient.
+
+{{EmbedInteractiveExample("pages/js/regexp-prototype-flags.html")}}{{js_property_attributes(0, 0, 1)}}
+
+## Description
+
+Les drapeaux de la propriété `flags` sont rangés par ordre alphabétique de gauche à droite.
+
+## Exemples
+
+### Utiliser `flags`
+
+```js
+/toto/ig.flags;   // "gi"
+/truc/myu.flags;  // "muy"
+```
+
+## Prothèse d'émulation (_polyfill_)
+
+```js
+if (RegExp.prototype.flags === undefined) {
+  Object.defineProperty(RegExp.prototype, 'flags', {
+    configurable: true,
+    get: function() {
+      return this.toString().match(/[gimuy]*$/)[0];
+    }
+  });
+}
+```
+
+## Spécifications
+
+| Spécification                                                                                                    | État                         | Commentaires         |
+| ---------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName('ES2015', '#sec-get-regexp.prototype.flags', 'RegExp.prototype.flags')}} | {{Spec2('ES2015')}}     | Définition initiale. |
+| {{SpecName('ESDraft', '#sec-get-regexp.prototype.flags', 'RegExp.prototype.flags')}} | {{Spec2('ESDraft')}} |                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.RegExp.flags")}}
+
+## Voir aussi
+
+- {{jsxref("RegExp.prototype.source")}}
diff --git a/files/fr/web/javascript/reference/global_objects/regexp/global/index.html b/files/fr/web/javascript/reference/global_objects/regexp/global/index.html
deleted file mode 100644
index 7702ec1769..0000000000
--- a/files/fr/web/javascript/reference/global_objects/regexp/global/index.html
+++ /dev/null
@@ -1,89 +0,0 @@
----
-title: RegExp.prototype.global
-slug: Web/JavaScript/Reference/Global_Objects/RegExp/global
-tags:
-  - JavaScript
-  - Propriété
-  - Prototype
-  - Reference
-  - RegExp
-translation_of: Web/JavaScript/Reference/Global_Objects/RegExp/global
-original_slug: Web/JavaScript/Reference/Objets_globaux/RegExp/global
----
-<div>{{JSRef}}</div>
-
-<p>La propriété <code><strong>global</strong></code> indique si le marqueur (<em>flag</em>) "<code>g</code>" est utilisé pour l'expression rationnelle. <code>global</code> est une propriété accessible en lecture seule pour une expression rationnelle donnée.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/regexp-prototype-global.html")}}</div>
-
-
-
-<div>{{js_property_attributes(0,0,1)}}</div>
-
-<h2 id="Description">Description</h2>
-
-<p>La valeur de <code>global</code> est un booléen. Elle vaut <code>true</code> si le flag "<code>g</code>" a été utilisé, <code>false</code> sinon. Le <em>flag</em> "<code>g</code>" indique que l'expression rationnelle recherchera toutes les correspondances possibles d'une chaîne de caractères. Lorsqu'une expression rationnelle utilise à la fois les marqueurs <code>global</code> et <code>sticky</code> (respectivement <code>"g"</code> et <code>"y"</code>), elle ignorera le marqueur <code>global</code>.</p>
-
-<p>Cette propriété ne peut pas être modifiée directement.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<pre class="brush:js">var regex = new RegExp("toto", "g");
-
-console.log(regex.global); // true
-
-var str = 'totoexempletoto';
-var str1 = str.replace(regex, '');
-
-console.log(str1);  // affichera "exemple" dans la console
-
-var regex1 = new RegExp('toto');
-var str2 = str.replace(regex1, '');
-
-console.log(str2);  // affichera "exempletoto" dans la console</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES3')}}</td>
-   <td>{{Spec2('ES3')}}</td>
-   <td>Définition initiale. Implémentée avec JavaScript 1.2. Avec JavaScript 1.5 : <code>global</code> est une propriété d'une instance de {{jsxref("RegExp")}} et non une propriété de l'objet <code>RegExp</code>.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-15.10.7.2', 'RegExp.prototype.global')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-get-regexp.prototype.global', 'RegExp.prototype.global')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td><code>global</code> est désormais un accesseur lié au prototype plutôt qu'une propriété de données liée à l'instance.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-get-regexp.prototype.global', 'RegExp.prototype.global')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.RegExp.global")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("RegExp.prototype.ignoreCase")}}</li>
- <li>{{jsxref("RegExp.prototype.lastIndex")}}</li>
- <li>{{jsxref("RegExp.prototype.multiline")}}</li>
- <li>{{jsxref("RegExp.prototype.source")}}</li>
- <li>{{jsxref("RegExp.prototype.sticky")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/regexp/global/index.md b/files/fr/web/javascript/reference/global_objects/regexp/global/index.md
new file mode 100644
index 0000000000..0b97b04853
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/regexp/global/index.md
@@ -0,0 +1,62 @@
+---
+title: RegExp.prototype.global
+slug: Web/JavaScript/Reference/Global_Objects/RegExp/global
+tags:
+  - JavaScript
+  - Propriété
+  - Prototype
+  - Reference
+  - RegExp
+translation_of: Web/JavaScript/Reference/Global_Objects/RegExp/global
+original_slug: Web/JavaScript/Reference/Objets_globaux/RegExp/global
+---
+{{JSRef}}
+
+La propriété **`global`** indique si le marqueur (_flag_) "`g`" est utilisé pour l'expression rationnelle. `global` est une propriété accessible en lecture seule pour une expression rationnelle donnée.
+
+{{EmbedInteractiveExample("pages/js/regexp-prototype-global.html")}}{{js_property_attributes(0,0,1)}}
+
+## Description
+
+La valeur de `global` est un booléen. Elle vaut `true` si le flag "`g`" a été utilisé, `false` sinon. Le _flag_ "`g`" indique que l'expression rationnelle recherchera toutes les correspondances possibles d'une chaîne de caractères. Lorsqu'une expression rationnelle utilise à la fois les marqueurs `global` et `sticky` (respectivement `"g"` et `"y"`), elle ignorera le marqueur `global`.
+
+Cette propriété ne peut pas être modifiée directement.
+
+## Exemples
+
+```js
+var regex = new RegExp("toto", "g");
+
+console.log(regex.global); // true
+
+var str = 'totoexempletoto';
+var str1 = str.replace(regex, '');
+
+console.log(str1);  // affichera "exemple" dans la console
+
+var regex1 = new RegExp('toto');
+var str2 = str.replace(regex1, '');
+
+console.log(str2);  // affichera "exempletoto" dans la console
+```
+
+## Spécifications
+
+| Spécification                                                                                                        | Statut                       | Commentaires                                                                                                                                                                                    |
+| -------------------------------------------------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| {{SpecName('ES3')}}                                                                                             | {{Spec2('ES3')}}         | Définition initiale. Implémentée avec JavaScript 1.2. Avec JavaScript 1.5 : `global` est une propriété d'une instance de {{jsxref("RegExp")}} et non une propriété de l'objet `RegExp`. |
+| {{SpecName('ES5.1', '#sec-15.10.7.2', 'RegExp.prototype.global')}}                             | {{Spec2('ES5.1')}}     |                                                                                                                                                                                                 |
+| {{SpecName('ES6', '#sec-get-regexp.prototype.global', 'RegExp.prototype.global')}}         | {{Spec2('ES6')}}         | `global` est désormais un accesseur lié au prototype plutôt qu'une propriété de données liée à l'instance.                                                                                      |
+| {{SpecName('ESDraft', '#sec-get-regexp.prototype.global', 'RegExp.prototype.global')}} | {{Spec2('ESDraft')}} |                                                                                                                                                                                                 |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.RegExp.global")}}
+
+## Voir aussi
+
+- {{jsxref("RegExp.prototype.ignoreCase")}}
+- {{jsxref("RegExp.prototype.lastIndex")}}
+- {{jsxref("RegExp.prototype.multiline")}}
+- {{jsxref("RegExp.prototype.source")}}
+- {{jsxref("RegExp.prototype.sticky")}}
diff --git a/files/fr/web/javascript/reference/global_objects/regexp/ignorecase/index.html b/files/fr/web/javascript/reference/global_objects/regexp/ignorecase/index.html
deleted file mode 100644
index 22fecc736d..0000000000
--- a/files/fr/web/javascript/reference/global_objects/regexp/ignorecase/index.html
+++ /dev/null
@@ -1,82 +0,0 @@
----
-title: RegExp.prototype.ignoreCase
-slug: Web/JavaScript/Reference/Global_Objects/RegExp/ignoreCase
-tags:
-  - JavaScript
-  - Propriété
-  - Prototype
-  - Reference
-  - RegExp
-translation_of: Web/JavaScript/Reference/Global_Objects/RegExp/ignoreCase
-original_slug: Web/JavaScript/Reference/Objets_globaux/RegExp/ignoreCase
----
-<div>{{JSRef}}</div>
-
-<p>La propriété <code><strong>ignoreCase</strong></code> indique si le drapeau (<em>flag</em>) "<code>i</code>" est utilisé ou non pour cette expression rationnelle. <code>ignoreCase</code> est une propriété accessible en lecture seule d'une instance d'expression rationnelle donnée.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/regexp-prototype-ignorecase.html")}}</div>
-
-
-
-<div>{{js_property_attributes(0,0,1)}}</div>
-
-<h2 id="Description">Description</h2>
-
-<p>La valeur de <code>ignoreCase</code> est un booléen. Elle vaut <code>true</code> si le flag "<code>i</code>" a été utilisé et <code>false</code> sinon. Le drapeau "<code>i</code>" indique si la recherche de correspondances doit être sensible à la casse ou non.</p>
-
-<p>Cette propriété ne peut pas être modifiée directement.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<pre class="brush:js">var regex = new RegExp("toto", "i");
-
-console.log(regex.ignoreCase); // true
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES3')}}</td>
-   <td>{{Spec2('ES3')}}</td>
-   <td>Définition initiale. Implémentée avec JavaScript 1.2. Avec JavaScript 1.5 : <code>ignoreCase</code> est une propriété d'une instance de {{jsxref("RegExp")}} et pas une propriété de l'objet <code>RegExp</code>.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-15.10.7.3', 'RegExp.prototype.ignoreCase')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-get-regexp.prototype.ignorecase', 'RegExp.prototype.ignoreCase')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td><code>ignoreCase</code> est désormais une propriété du prototype sous forme d'accesseur plutôt qu'une propriété directe de l'instance.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-get-regexp.prototype.ignorecase', 'RegExp.prototype.ignoreCase')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-
-
-<p>{{Compat("javascript.builtins.RegExp.ignoreCase")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("RegExp.prototype.global")}}</li>
- <li>{{jsxref("RegExp.prototype.lastIndex")}}</li>
- <li>{{jsxref("RegExp.prototype.multiline")}}</li>
- <li>{{jsxref("RegExp.prototype.source")}}</li>
- <li>{{jsxref("RegExp.prototype.sticky")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/regexp/ignorecase/index.md b/files/fr/web/javascript/reference/global_objects/regexp/ignorecase/index.md
new file mode 100644
index 0000000000..d893c5d57e
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/regexp/ignorecase/index.md
@@ -0,0 +1,52 @@
+---
+title: RegExp.prototype.ignoreCase
+slug: Web/JavaScript/Reference/Global_Objects/RegExp/ignoreCase
+tags:
+  - JavaScript
+  - Propriété
+  - Prototype
+  - Reference
+  - RegExp
+translation_of: Web/JavaScript/Reference/Global_Objects/RegExp/ignoreCase
+original_slug: Web/JavaScript/Reference/Objets_globaux/RegExp/ignoreCase
+---
+{{JSRef}}
+
+La propriété **`ignoreCase`** indique si le drapeau (_flag_) "`i`" est utilisé ou non pour cette expression rationnelle. `ignoreCase` est une propriété accessible en lecture seule d'une instance d'expression rationnelle donnée.
+
+{{EmbedInteractiveExample("pages/js/regexp-prototype-ignorecase.html")}}{{js_property_attributes(0,0,1)}}
+
+## Description
+
+La valeur de `ignoreCase` est un booléen. Elle vaut `true` si le flag "`i`" a été utilisé et `false` sinon. Le drapeau "`i`" indique si la recherche de correspondances doit être sensible à la casse ou non.
+
+Cette propriété ne peut pas être modifiée directement.
+
+## Exemples
+
+```js
+var regex = new RegExp("toto", "i");
+
+console.log(regex.ignoreCase); // true
+```
+
+## Spécifications
+
+| Spécification                                                                                                                | Statut                       | Commentaires                                                                                                                                                                                        |
+| ---------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| {{SpecName('ES3')}}                                                                                                     | {{Spec2('ES3')}}         | Définition initiale. Implémentée avec JavaScript 1.2. Avec JavaScript 1.5 : `ignoreCase` est une propriété d'une instance de {{jsxref("RegExp")}} et pas une propriété de l'objet `RegExp`. |
+| {{SpecName('ES5.1', '#sec-15.10.7.3', 'RegExp.prototype.ignoreCase')}}                                 | {{Spec2('ES5.1')}}     |                                                                                                                                                                                                     |
+| {{SpecName('ES6', '#sec-get-regexp.prototype.ignorecase', 'RegExp.prototype.ignoreCase')}}     | {{Spec2('ES6')}}         | `ignoreCase` est désormais une propriété du prototype sous forme d'accesseur plutôt qu'une propriété directe de l'instance.                                                                         |
+| {{SpecName('ESDraft', '#sec-get-regexp.prototype.ignorecase', 'RegExp.prototype.ignoreCase')}} | {{Spec2('ESDraft')}} |                                                                                                                                                                                                     |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.RegExp.ignoreCase")}}
+
+## Voir aussi
+
+- {{jsxref("RegExp.prototype.global")}}
+- {{jsxref("RegExp.prototype.lastIndex")}}
+- {{jsxref("RegExp.prototype.multiline")}}
+- {{jsxref("RegExp.prototype.source")}}
+- {{jsxref("RegExp.prototype.sticky")}}
diff --git a/files/fr/web/javascript/reference/global_objects/regexp/index.html b/files/fr/web/javascript/reference/global_objects/regexp/index.html
deleted file mode 100644
index 720207ce42..0000000000
--- a/files/fr/web/javascript/reference/global_objects/regexp/index.html
+++ /dev/null
@@ -1,240 +0,0 @@
----
-title: RegExp
-slug: Web/JavaScript/Reference/Global_Objects/RegExp
-tags:
-  - Constructeur
-  - Expressions rationnelles
-  - JavaScript
-  - Reference
-  - RegExp
-translation_of: Web/JavaScript/Reference/Global_Objects/RegExp
-original_slug: Web/JavaScript/Reference/Objets_globaux/RegExp
----
-<div>{{JSRef}}</div>
-
-<p>Le constructeur <strong>RegExp</strong> crée un objet expression rationnelle pour la reconnaissance d'un modèle dans un texte.</p>
-
-<p>Pour une introduction aux expressions rationnelles, lire le <a href="/fr/docs/Web/JavaScript/Guide/Expressions_r%C3%A9guli%C3%A8res">chapitre Expressions rationnelles dans le Guide JavaScript</a>.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/regexp-constructor.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<p>Les notations littérales, par constructeur ou de base sont possibles :</p>
-
-<pre class="syntaxbox">/<em>modèle</em>/<var>marqueurs</var>
-new RegExp(<var>modèle</var>[, <em>marqueurs</em>])
-RegExp(<var>modèle</var>[, <em>marqueurs</em>])
-</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>modèle</code></dt>
- <dd>Le texte de l'expression rationnelle ou, à partir d'ES5, un autre objet ou littéral <code>RegExp</code> à copier. Ce motif peut inclure <a href="/fr/docs/Web/JavaScript/Guide/Expressions_régulières#Types_de_caractères_spéciaux">certains caractères spéciaux</a> pour correspondre à un ensemble de valeurs plus large (qu'une simple chaîne littérale).</dd>
- <dt><code>marqueurs</code></dt>
- <dd>
- <p>Si cet argument est utilisé, il indique les marqueurs à utiliser pour l'expression rationnelle. Ces valeurs remplaceront celles de l'objet à copier si <code>modèle</code> est un objet <code>RegExp</code> (<code>lastIndex</code> sera réinitialisé à 0 à partir d'ECMAScript 2015 / ES6). Cet argument est une chaîne de caractères qui peut contenir une combinaison des valeurs suivantes:</p>
-
- <dl>
-  <dt><code>g</code></dt>
-  <dd>recherche globale ; retrouve toutes les correspondances plutôt que de s'arrêter après la première.</dd>
-  <dt><code>i</code></dt>
-  <dd>la casse est ignorée. Si le marqueur <code>u</code> est également activé, les caractères Unicode équivalents pour la casse correspondent.</dd>
-  <dt><code>m</code></dt>
-  <dd>multiligne : les caractères de début et de fin (^ et $) sont traités comme travaillant sur des lignes multiples (i.e, ils correspondent au début et à la fin de <em>chaque</em> ligne (délimitée par \n ou \r), pas seulement au début ou à la fin de la chaîne d'entrée complète).</dd>
-  <dt><code>u</code></dt>
-  <dd>unicode : traite le modèle comme une séquence de points de code Unicode (voir également <a href="/fr/docs/Web/API/DOMString/Binary">les chaînes binaires</a>).</dd>
-  <dt><code>y</code></dt>
-  <dd>adhérence : n'établit de correspondance qu'à partir de l'indice dans la chaîne cible indiqué par la propriété <code>lastIndex</code> de l'expression rationnelle (et ne cherche pas à établir de correspondance à partir d'indices au delà).</dd>
-  <dt><code>s</code></dt>
-  <dd>"dotAll" : permet d'indiquer que <code>.</code> peut correspondre à un saut de ligne.</dd>
- </dl>
- </dd>
-</dl>
-
-<h2 id="Description">Description</h2>
-
-<p>Il existe deux façons de créer un objet <code>RegExp</code> : une notation littérale ou un constructeur. La notation littérale est délimitée par des barres obliques (<em>slashes</em>) tandis que le constructeur utilise des apostrophes. Ainsi, les expressions suivantes créent la même expression rationnelle :</p>
-
-<pre class="brush: js">/ab+c/i;                   // notation littérale
-new RegExp('ab+c', 'i');   // constructeur
-new RegExp(/ab+c/, 'i');   // notation littérale dans un constructeur
-</pre>
-
-<p>La notation littérale effectue la compilation de l'expression rationnelle lorsque l'expression est évaluée. Utilisez la notation littérale lorsque l'expression rationnelle reste constante. Par exemple, si vous utilisez la notation littérale pour construire une expression rationnelle utilisée dans une boucle, l'expression rationnelle ne sera pas recompilée à chaque itération.</p>
-
-<p>Le constructeur de l'objet expression rationnelle, par exemple <code>new RegExp('ab+c')</code>, effectue la compilation de l'expression rationnelle au moment de l'exécution. Utilisez la fonction constructeur quand vous savez que le modèle d'une expression rationnelle sera variable, ou si vous ne connaissez pas le modèle et que vous l'obtiendrez d'une autre source, telle qu'une saisie utilisateur.</p>
-
-<p>À partir d'ECMAScript 6, <code>new RegExp(/ab+c/, 'i')</code> ne déclenche plus d'exception {{jsxref("TypeError")}} ("can't supply flags when constructing one RegExp from another") lorsque le premier argument est une RegExp et que le second argument <code>marqueurs</code> est présent. Une nouvelle <code>RegExp</code> sera créée à la place à partir des arguments.</p>
-
-<p>Lorsqu'on utilise le constructeur, les règles normales d'échappement de chaîne (le fait de faire précéder d'un \ les caractères spéciaux à l'intérieur d'une chaîne) sont requises. Par exemple, les définitions suivantes sont équivalentes :</p>
-
-<pre class="brush: js">var re = /\w+/;
-var re = new RegExp('\\w+');
-</pre>
-
-<h2 id="Propriétés">Propriétés</h2>
-
-<dl>
- <dt>{{jsxref("RegExp.prototype")}}</dt>
- <dd>Cette propriété permet d'ajouter des propriétés à tous les objets qui sont des expressions rationnelles.</dd>
- <dt><code>RegExp.length</code></dt>
- <dd>La valeur de longueur pour le constructeur dont la valeur est 2.</dd>
- <dt>{{jsxref("RegExp.@@species", "get RegExp[@@species]")}}</dt>
- <dd>La fonction de construction utilisée pour créer les objets dérivés.</dd>
- <dt>{{jsxref("RegExp.lastIndex")}}</dt>
- <dd>L'indice à partir duquel rechercher la prochaine correspondance.</dd>
-</dl>
-
-<h2 id="Méthodes">Méthodes</h2>
-
-<p>L'objet global <code>RegExp</code> ne possède pas de méthode propre. En revanche, il hérite de certaines méthodes via sa chaîne de prototypes.</p>
-
-<h2 id="Le_prototype_de_RegExp_et_les_instances">Le prototype de <code>RegExp</code> et les instances</h2>
-
-<h3 id="Propriétés_2">Propriétés</h3>
-
-<div>{{page('/fr/docs/Web/JavaScript/Reference/Objets_globaux/RegExp/prototype', 'Propriétés')}}</div>
-
-<h3 id="Méthodes_2">Méthodes</h3>
-
-<div>{{page('/fr/docs/Web/JavaScript/Reference/Objets_globaux/RegExp/prototype', 'Méthodes')}}</div>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Utiliser_une_expression_rationnelle_pour_modifier_un_format_de_données">Utiliser une expression rationnelle pour modifier un format de données</h3>
-
-<p>Dans le script suivant, on utilise la méthode {{jsxref("String.prototype.replace()", "replace()")}} de {{jsxref("String")}} pour effectuer une correspondance sur le prénom et le nom pour les inverser. On utilise des parenthèses capturantes pour pouvoir utiliser les correspondances dans la construction du résultat (avec <code>$1</code> et <code>$2</code>).</p>
-
-<pre class="brush: js">var re = /(\w+)\s(\w+)/;
-var chaîne = 'Alain Dupont';
-var nouvelleChaîne = chaîne.replace(re, '$2, $1');
-console.log(nouvelleChaîne);
-</pre>
-
-<p>Cela affichera "Dupont, Alain".</p>
-
-<h3 id="Utiliser_une_expression_rationnelle_pour_découper_des_lignes_avec_différents_sauts_de_lignefins_de_ligne">Utiliser une expression rationnelle pour découper des lignes avec différents sauts de ligne/fins de ligne</h3>
-
-<p>La fin de ligne par défaut dépend de la plateforme (Unix, Windows, etc.). Cette méthode de découpage fournie permet de découper indépendamment de la plateforme utilisée.</p>
-
-<pre class="brush: js">var texte = 'Un texte\net un autre\r\npuis ensuite\rla fin';
-var lignes = texte.split(/\r\n|\r|\n/);
-console.log(lignes); // affiche [ 'Un texte', 'et un autre', 'puis ensuite', 'la fin' ]
-</pre>
-
-<p>On voit ici que l'ordre des modèles dans l'expression rationnelle importe.</p>
-
-<h3 id="Utiliser_une_expression_rationnelle_sur_plusieurs_lignes">Utiliser une expression rationnelle sur plusieurs lignes</h3>
-
-<pre class="brush: js">var s = 'Et voici\nune autre ligne !';
-s.match(/voici.*ligne/);
-// Renvoie null
-s.match(/voici[^]*ligne/);
-// Renvoie ['voici\nune autre ligne']
-</pre>
-
-<h3 id="Utiliser_une_expression_rationnelle_avec_le_marqueur_d'adhérence">Utiliser une expression rationnelle avec le marqueur d'adhérence</h3>
-
-<p>Cet exemple illustre comment on peut utiliser ce marqueur qui recherche une correspondance après {{jsxref("RegExp.prototype.lastIndex")}}.</p>
-
-<pre class="brush: js">var str = '#toto#';
-var regex = /toto/y;
-
-regex.lastIndex; // 0
-regex.test(str); // true
-regex.lastIndex = 1;
-regex.test(str); // true
-regex.lastIndex = 5;
-regex.test(str); // false (lastIndex est pris en compte avec ce marqueur)
-regex.lastIndex; // 0 (réinitialisation suite à l'échec)</pre>
-
-<h3 id="Les_expressions_rationnelles_et_les_caractères_Unicode">Les expressions rationnelles et les caractères Unicode</h3>
-
-<p>Comme mentionné ci-avant, les classes <code>\w</code> ou <code>\W</code> ne correspondent qu'à des caractères ASCII "a" à "z", "A" à "Z", "0" à "9" et "_". Pour effectuer des correspondances sur d'autres caractères (comme par exemple les caractères cyrilliques), on utilisera <code>\uhhhh</code>, où "hhhh" représente la valeur Unicode exprimée en hexadécimal. Cet exemple illustre comment il est possible de séparer les caractères Unicode d'un mot.</p>
-
-<pre class="brush: js">var texte = 'Образец text на русском языке';
-var regex = /[\u0400-\u04FF]+/g;
-
-var corresp = regex.exec(texte);
-console.log(corresp[0]);      // affiche 'Образец'
-console.log(regex.lastIndex); // affiche '7'
-
-var corresp2 = regex.exec(texte);
-console.log(corresp2[0]);     // affiche 'на' (n'affiche pas text
-console.log(regex.lastIndex); // affiche '15'
-
-// et ainsi de suite
-</pre>
-
-<p>Voici une ressource tierce pour obtenir les différents intervalles Unicode des différents alphabets : <a href="https://kourge.net/projects/regexp-unicode-block">Regexp-unicode-block</a>.</p>
-
-<h3 id="Extraire_un_sous-domaine_d'une_URL">Extraire un sous-domaine d'une URL</h3>
-
-<pre class="brush: js">var url = 'http://xxx.domaine.com';
-console.log(/[^.]+/.exec(url)[0].substr(7)); // affiche 'xxx'
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES1')}}</td>
-   <td>{{Spec2('ES1')}}</td>
-   <td>Définition initiale. Implémentée avec JavaScript 1.1.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-15.10', 'RegExp')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-regexp-regular-expression-objects', 'RegExp')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td>
-    <p>Le constructeur <code>RegExp</code> ne renvoie plus d'exception lorsqu'il est utilisé avec un objet <code>RegExp</code> et que le second argument est utilisé. Ajout du marqueur d'adhérence et du marqueur Unicode.</p>
-   </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-regexp-regular-expression-objects', 'RegExp')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.RegExp")}}</p>
-
-<h3 id="Notes_spécifiques_à_Firefox">Notes spécifiques à Firefox</h3>
-
-<p>À partir de Firefox 34, dans le cas où on utilise un groupe capturant avec des quantificateurs qui l'invalident, le texte correspondant au groupe est désormais <code>undefined</code> et non la chaîne vide :</p>
-
-<pre class="brush: js">// Firefox 33 ou antérieur
-'x'.replace(/x(.)?/g, function(m, group) {
-  console.log("'group:" + group + "'");
-}); // 'group:'
-
-// Firefox 34 ou supérieur
-'x'.replace(/x(.)?/g, function(m, group) {
-  console.log("'group:" + group + "'");
-}); // 'group:undefined'
-</pre>
-
-<p>Pour des raisons de compatibilité web, <code>RegExp.$N</code> renverra une chaîne vide au lieu de <code>undefined</code> ({{bug(1053944)}}).</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/JavaScript/Guide/Expressions_régulières">Le chapitre Expressions rationnelles</a> du <a href="/fr/docs/Web/JavaScript/Guide">Guide JavaScript</a></li>
- <li>{{jsxref("String.prototype.match()")}}</li>
- <li>{{jsxref("String.prototype.replace()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/regexp/index.md b/files/fr/web/javascript/reference/global_objects/regexp/index.md
new file mode 100644
index 0000000000..85c0aeee92
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/regexp/index.md
@@ -0,0 +1,249 @@
+---
+title: RegExp
+slug: Web/JavaScript/Reference/Global_Objects/RegExp
+tags:
+  - Constructeur
+  - Expressions rationnelles
+  - JavaScript
+  - Reference
+  - RegExp
+translation_of: Web/JavaScript/Reference/Global_Objects/RegExp
+original_slug: Web/JavaScript/Reference/Objets_globaux/RegExp
+---
+{{JSRef}}
+
+Le constructeur **RegExp** crée un objet expression rationnelle pour la reconnaissance d'un modèle dans un texte.
+
+Pour une introduction aux expressions rationnelles, lire le [chapitre Expressions rationnelles dans le Guide JavaScript](/fr/docs/Web/JavaScript/Guide/Expressions_r%C3%A9guli%C3%A8res).
+
+{{EmbedInteractiveExample("pages/js/regexp-constructor.html")}}
+
+## Syntaxe
+
+Les notations littérales, par constructeur ou de base sont possibles :
+
+    /modèle/marqueurs
+    new RegExp(modèle[, marqueurs])
+    RegExp(modèle[, marqueurs])
+
+### Paramètres
+
+- `modèle`
+  - : Le texte de l'expression rationnelle ou, à partir d'ES5, un autre objet ou littéral `RegExp` à copier. Ce motif peut inclure [certains caractères spéciaux](/fr/docs/Web/JavaScript/Guide/Expressions_régulières#Types_de_caractères_spéciaux) pour correspondre à un ensemble de valeurs plus large (qu'une simple chaîne littérale).
+- `marqueurs`
+
+  - : Si cet argument est utilisé, il indique les marqueurs à utiliser pour l'expression rationnelle. Ces valeurs remplaceront celles de l'objet à copier si `modèle` est un objet `RegExp` (`lastIndex` sera réinitialisé à 0 à partir d'ECMAScript 2015 / ES6). Cet argument est une chaîne de caractères qui peut contenir une combinaison des valeurs suivantes:
+
+    - `g`
+      - : recherche globale ; retrouve toutes les correspondances plutôt que de s'arrêter après la première.
+    - `i`
+      - : la casse est ignorée. Si le marqueur `u` est également activé, les caractères Unicode équivalents pour la casse correspondent.
+    - `m`
+      - : multiligne : les caractères de début et de fin (^ et $) sont traités comme travaillant sur des lignes multiples (i.e, ils correspondent au début et à la fin de _chaque_ ligne (délimitée par \n ou \r), pas seulement au début ou à la fin de la chaîne d'entrée complète).
+    - `u`
+      - : unicode : traite le modèle comme une séquence de points de code Unicode (voir également [les chaînes binaires](/fr/docs/Web/API/DOMString/Binary)).
+    - `y`
+      - : adhérence : n'établit de correspondance qu'à partir de l'indice dans la chaîne cible indiqué par la propriété `lastIndex` de l'expression rationnelle (et ne cherche pas à établir de correspondance à partir d'indices au delà).
+    - `s`
+      - : "dotAll" : permet d'indiquer que `.` peut correspondre à un saut de ligne.
+
+## Description
+
+Il existe deux façons de créer un objet `RegExp` : une notation littérale ou un constructeur. La notation littérale est délimitée par des barres obliques (_slashes_) tandis que le constructeur utilise des apostrophes. Ainsi, les expressions suivantes créent la même expression rationnelle :
+
+```js
+/ab+c/i;                   // notation littérale
+new RegExp('ab+c', 'i');   // constructeur
+new RegExp(/ab+c/, 'i');   // notation littérale dans un constructeur
+```
+
+La notation littérale effectue la compilation de l'expression rationnelle lorsque l'expression est évaluée. Utilisez la notation littérale lorsque l'expression rationnelle reste constante. Par exemple, si vous utilisez la notation littérale pour construire une expression rationnelle utilisée dans une boucle, l'expression rationnelle ne sera pas recompilée à chaque itération.
+
+Le constructeur de l'objet expression rationnelle, par exemple `new RegExp('ab+c')`, effectue la compilation de l'expression rationnelle au moment de l'exécution. Utilisez la fonction constructeur quand vous savez que le modèle d'une expression rationnelle sera variable, ou si vous ne connaissez pas le modèle et que vous l'obtiendrez d'une autre source, telle qu'une saisie utilisateur.
+
+À partir d'ECMAScript 6, `new RegExp(/ab+c/, 'i')` ne déclenche plus d'exception {{jsxref("TypeError")}} ("can't supply flags when constructing one RegExp from another") lorsque le premier argument est une RegExp et que le second argument `marqueurs` est présent. Une nouvelle `RegExp` sera créée à la place à partir des arguments.
+
+Lorsqu'on utilise le constructeur, les règles normales d'échappement de chaîne (le fait de faire précéder d'un \ les caractères spéciaux à l'intérieur d'une chaîne) sont requises. Par exemple, les définitions suivantes sont équivalentes :
+
+```js
+var re = /\w+/;
+var re = new RegExp('\\w+');
+```
+
+## Propriétés
+
+- {{jsxref("RegExp.prototype")}}
+  - : Cette propriété permet d'ajouter des propriétés à tous les objets qui sont des expressions rationnelles.
+- `RegExp.length`
+  - : La valeur de longueur pour le constructeur dont la valeur est 2.
+- {{jsxref("RegExp.@@species", "get RegExp[@@species]")}}
+  - : La fonction de construction utilisée pour créer les objets dérivés.
+- {{jsxref("RegExp.lastIndex")}}
+  - : L'indice à partir duquel rechercher la prochaine correspondance.
+
+## Méthodes
+
+L'objet global `RegExp` ne possède pas de méthode propre. En revanche, il hérite de certaines méthodes via sa chaîne de prototypes.
+
+## Le prototype de `RegExp` et les instances
+
+### Propriétés
+
+{{page('/fr/docs/Web/JavaScript/Reference/Objets_globaux/RegExp/prototype', 'Propriétés')}}
+
+### Méthodes
+
+{{page('/fr/docs/Web/JavaScript/Reference/Objets_globaux/RegExp/prototype', 'Méthodes')}}
+
+## Exemples
+
+### Utiliser une expression rationnelle pour modifier un format de données
+
+Dans le script suivant, on utilise la méthode {{jsxref("String.prototype.replace()", "replace()")}} de {{jsxref("String")}} pour effectuer une correspondance sur le prénom et le nom pour les inverser. On utilise des parenthèses capturantes pour pouvoir utiliser les correspondances dans la construction du résultat (avec `$1` et `$2`).
+
+```js
+var re = /(\w+)\s(\w+)/;
+var chaîne = 'Alain Dupont';
+var nouvelleChaîne = chaîne.replace(re, '$2, $1');
+console.log(nouvelleChaîne);
+```
+
+Cela affichera "Dupont, Alain".
+
+### Utiliser une expression rationnelle pour découper des lignes avec différents sauts de ligne/fins de ligne
+
+La fin de ligne par défaut dépend de la plateforme (Unix, Windows, etc.). Cette méthode de découpage fournie permet de découper indépendamment de la plateforme utilisée.
+
+```js
+var texte = 'Un texte\net un autre\r\npuis ensuite\rla fin';
+var lignes = texte.split(/\r\n|\r|\n/);
+console.log(lignes); // affiche [ 'Un texte', 'et un autre', 'puis ensuite', 'la fin' ]
+```
+
+On voit ici que l'ordre des modèles dans l'expression rationnelle importe.
+
+### Utiliser une expression rationnelle sur plusieurs lignes
+
+```js
+var s = 'Et voici\nune autre ligne !';
+s.match(/voici.*ligne/);
+// Renvoie null
+s.match(/voici[^]*ligne/);
+// Renvoie ['voici\nune autre ligne']
+```
+
+### Utiliser une expression rationnelle avec le marqueur d'adhérence
+
+Cet exemple illustre comment on peut utiliser ce marqueur qui recherche une correspondance après {{jsxref("RegExp.prototype.lastIndex")}}.
+
+```js
+var str = '#toto#';
+var regex = /toto/y;
+
+regex.lastIndex; // 0
+regex.test(str); // true
+regex.lastIndex = 1;
+regex.test(str); // true
+regex.lastIndex = 5;
+regex.test(str); // false (lastIndex est pris en compte avec ce marqueur)
+regex.lastIndex; // 0 (réinitialisation suite à l'échec)
+```
+
+### Les expressions rationnelles et les caractères Unicode
+
+Comme mentionné ci-avant, les classes `\w` ou `\W` ne correspondent qu'à des caractères ASCII "a" à "z", "A" à "Z", "0" à "9" et "\_". Pour effectuer des correspondances sur d'autres caractères (comme par exemple les caractères cyrilliques), on utilisera `\uhhhh`, où "hhhh" représente la valeur Unicode exprimée en hexadécimal. Cet exemple illustre comment il est possible de séparer les caractères Unicode d'un mot.
+
+```js
+var texte = 'Образец text на русском языке';
+var regex = /[\u0400-\u04FF]+/g;
+
+var corresp = regex.exec(texte);
+console.log(corresp[0]);      // affiche 'Образец'
+console.log(regex.lastIndex); // affiche '7'
+
+var corresp2 = regex.exec(texte);
+console.log(corresp2[0]);     // affiche 'на' (n'affiche pas text
+console.log(regex.lastIndex); // affiche '15'
+
+// et ainsi de suite
+```
+
+Voici une ressource tierce pour obtenir les différents intervalles Unicode des différents alphabets : [Regexp-unicode-block](https://kourge.net/projects/regexp-unicode-block).
+
+### Extraire un sous-domaine d'une URL
+
+```js
+var url = 'http://xxx.domaine.com';
+console.log(/[^.]+/.exec(url)[0].substr(7)); // affiche 'xxx'
+```
+
+## Spécifications
+
+<table class="standard-table">
+  <tbody>
+    <tr>
+      <th scope="col">Spécification</th>
+      <th scope="col">État</th>
+      <th scope="col">Commentaires</th>
+    </tr>
+    <tr>
+      <td>{{SpecName('ES1')}}</td>
+      <td>{{Spec2('ES1')}}</td>
+      <td>Définition initiale. Implémentée avec JavaScript 1.1.</td>
+    </tr>
+    <tr>
+      <td>{{SpecName('ES5.1', '#sec-15.10', 'RegExp')}}</td>
+      <td>{{Spec2('ES5.1')}}</td>
+      <td></td>
+    </tr>
+    <tr>
+      <td>
+        {{SpecName('ES6', '#sec-regexp-regular-expression-objects', 'RegExp')}}
+      </td>
+      <td>{{Spec2('ES6')}}</td>
+      <td>
+        <p>
+          Le constructeur <code>RegExp</code> ne renvoie plus d'exception
+          lorsqu'il est utilisé avec un objet <code>RegExp</code> et que le
+          second argument est utilisé. Ajout du marqueur d'adhérence et du
+          marqueur Unicode.
+        </p>
+      </td>
+    </tr>
+    <tr>
+      <td>
+        {{SpecName('ESDraft', '#sec-regexp-regular-expression-objects', 'RegExp')}}
+      </td>
+      <td>{{Spec2('ESDraft')}}</td>
+      <td></td>
+    </tr>
+  </tbody>
+</table>
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.RegExp")}}
+
+### Notes spécifiques à Firefox
+
+À partir de Firefox 34, dans le cas où on utilise un groupe capturant avec des quantificateurs qui l'invalident, le texte correspondant au groupe est désormais `undefined` et non la chaîne vide :
+
+```js
+// Firefox 33 ou antérieur
+'x'.replace(/x(.)?/g, function(m, group) {
+  console.log("'group:" + group + "'");
+}); // 'group:'
+
+// Firefox 34 ou supérieur
+'x'.replace(/x(.)?/g, function(m, group) {
+  console.log("'group:" + group + "'");
+}); // 'group:undefined'
+```
+
+Pour des raisons de compatibilité web, `RegExp.$N` renverra une chaîne vide au lieu de `undefined` ({{bug(1053944)}}).
+
+## Voir aussi
+
+- [Le chapitre Expressions rationnelles](/fr/docs/Web/JavaScript/Guide/Expressions_régulières) du [Guide JavaScript](/fr/docs/Web/JavaScript/Guide)
+- {{jsxref("String.prototype.match()")}}
+- {{jsxref("String.prototype.replace()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/regexp/input/index.html b/files/fr/web/javascript/reference/global_objects/regexp/input/index.html
deleted file mode 100644
index 15935f9bd8..0000000000
--- a/files/fr/web/javascript/reference/global_objects/regexp/input/index.html
+++ /dev/null
@@ -1,58 +0,0 @@
----
-title: RegExp.input ($_)
-slug: Web/JavaScript/Reference/Global_Objects/RegExp/input
-tags:
-  - JavaScript
-  - Non-standard
-  - Propriété
-  - Reference
-  - RegExp
-translation_of: Web/JavaScript/Reference/Global_Objects/RegExp/input
-original_slug: Web/JavaScript/Reference/Objets_globaux/RegExp/input
----
-<div>{{JSRef}} {{non-standard_header}}</div>
-
-<p>La propriété non-standard <strong><code>input</code></strong> est une propriété statique de l'expression rationnelle qui contient la chaîne de caractères sur laquelle est effectuée la recherche de correspondances. <code>RegExp.$_</code> est un alias de cette propriété.</p>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>RegExp</var>.input
-RegExp.$_
-</pre>
-
-<h2 id="Description">Description</h2>
-
-<p>La propriété <code>input</code> est statique. Ce n'est pas la propriété d'une instance d'expression rationnelle. Cette propriété doit toujours être utilisée avec la syntaxe <code>RegExp.input</code> ou <code>RegExp.$_.</code></p>
-
-<p>La valeur de la propriété <code><strong>input</strong></code> est modifiée à chaque fois que la chaîne sur laquelle on recherche est modifiée et qu'il y a une correspondance.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Utiliser_input_et__">Utiliser <code>input</code> et <code>$_</code></h3>
-
-<pre class="brush: js">var re = /coucou/g;
-re.test("coucou toi !");
-RegExp.input;         // "coucou toi !"
-re.test("toto");      // nouveau test, pas de correspondance
-RegExp.$_;            // "coucou toi !"
-re.test("coucou monde !"); // nouveau test avec correspondance
-RegExp.$_;            // "coucou monde !"
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<p>Cette propriété n'est pas standard. Elle ne fait partie d'aucune spécification.</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.RegExp.input")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{non-standard_inline}} {{jsxref("RegExp.lastMatch", "RegExp.lastMatch ($&amp;)")}}</li>
- <li>{{non-standard_inline}} {{jsxref("RegExp.lastParen", "RegExp.lastParen ($+)")}}</li>
- <li>{{non-standard_inline}} {{jsxref("RegExp.leftContext", "RegExp.leftContext ($`)")}}</li>
- <li>{{non-standard_inline}} {{jsxref("RegExp.rightContext", "RegExp.rightContext ($')")}}</li>
- <li>{{non-standard_inline}} {{jsxref("RegExp.n", "RegExp.$1-$9")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/regexp/input/index.md b/files/fr/web/javascript/reference/global_objects/regexp/input/index.md
new file mode 100644
index 0000000000..1d3de04192
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/regexp/input/index.md
@@ -0,0 +1,56 @@
+---
+title: RegExp.input ($_)
+slug: Web/JavaScript/Reference/Global_Objects/RegExp/input
+tags:
+  - JavaScript
+  - Non-standard
+  - Propriété
+  - Reference
+  - RegExp
+translation_of: Web/JavaScript/Reference/Global_Objects/RegExp/input
+original_slug: Web/JavaScript/Reference/Objets_globaux/RegExp/input
+---
+{{JSRef}} {{non-standard_header}}
+
+La propriété non-standard **`input`** est une propriété statique de l'expression rationnelle qui contient la chaîne de caractères sur laquelle est effectuée la recherche de correspondances. `RegExp.$_` est un alias de cette propriété.
+
+## Syntaxe
+
+    RegExp.input
+    RegExp.$_
+
+## Description
+
+La propriété `input` est statique. Ce n'est pas la propriété d'une instance d'expression rationnelle. Cette propriété doit toujours être utilisée avec la syntaxe `RegExp.input` ou `RegExp.$_.`
+
+La valeur de la propriété **`input`** est modifiée à chaque fois que la chaîne sur laquelle on recherche est modifiée et qu'il y a une correspondance.
+
+## Exemples
+
+### Utiliser `input` et `$_`
+
+```js
+var re = /coucou/g;
+re.test("coucou toi !");
+RegExp.input;         // "coucou toi !"
+re.test("toto");      // nouveau test, pas de correspondance
+RegExp.$_;            // "coucou toi !"
+re.test("coucou monde !"); // nouveau test avec correspondance
+RegExp.$_;            // "coucou monde !"
+```
+
+## Spécifications
+
+Cette propriété n'est pas standard. Elle ne fait partie d'aucune spécification.
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.RegExp.input")}}
+
+## Voir aussi
+
+- {{non-standard_inline}} {{jsxref("RegExp.lastMatch", "RegExp.lastMatch ($&amp;)")}}
+- {{non-standard_inline}} {{jsxref("RegExp.lastParen", "RegExp.lastParen ($+)")}}
+- {{non-standard_inline}} {{jsxref("RegExp.leftContext", "RegExp.leftContext ($`)")}}
+- {{non-standard_inline}} {{jsxref("RegExp.rightContext", "RegExp.rightContext ($')")}}
+- {{non-standard_inline}} {{jsxref("RegExp.n", "RegExp.$1-$9")}}
diff --git a/files/fr/web/javascript/reference/global_objects/regexp/lastindex/index.html b/files/fr/web/javascript/reference/global_objects/regexp/lastindex/index.html
deleted file mode 100644
index e5bc84ca24..0000000000
--- a/files/fr/web/javascript/reference/global_objects/regexp/lastindex/index.html
+++ /dev/null
@@ -1,103 +0,0 @@
----
-title: regExp.lastIndex
-slug: Web/JavaScript/Reference/Global_Objects/RegExp/lastIndex
-tags:
-  - JavaScript
-  - Propriété
-  - Reference
-  - RegExp
-translation_of: Web/JavaScript/Reference/Global_Objects/RegExp/lastIndex
-original_slug: Web/JavaScript/Reference/Objets_globaux/RegExp/lastIndex
----
-<div>{{JSRef}}</div>
-
-<p>La propriété <code><strong>lastIndex</strong></code> est un entier en lecture/écriture qui permet de définir l'indice (position) à partir duquel chercher la prochaine correspondance pour une instance d'expression rationnelle donnée.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/regexp-lastindex.html")}}</div>
-
-
-
-<div>{{js_property_attributes(1,0,0)}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>regExpObj</var>.lastIndex
-</pre>
-
-<h2 id="Description">Description</h2>
-
-<p>Cette propriété n'est définie que si l'instance d'expression rationnelle utilise le marqueur (<em>flag</em>) <code>"g"</code> pour effectuer une recherche globale ou le marqueur <code>"y"</code> afin d'effectuer une recherche adhérente. Les règles suivantes s'appliquent :</p>
-
-<ul>
- <li>Si <code>lastIndex</code> est supérieur à la longueur de la chaîne de caractères, <code>regexp.test</code> et <code>regexp.exec</code> échoueront et <code>lastIndex</code> sera redéfini à 0.</li>
- <li>Si <code>lastIndex</code> est égal à la longueur de la chaîne de caractères et si l'expression rationnelle correspond avec la chaîne vide, il y aura une correspondance à partir de <code>lastIndex</code>.</li>
- <li>Si <code>lastIndex</code> est égal à la longueur de la chaîne de caractères et que l'expression rationnelle ne peut correspondre à la chaîne vide, on n'aura pas de correspondance et <code>lastIndex</code> sera réinitialisé à 0.</li>
- <li>Sinon, <code>lastIndex</code> sera défini à la position suivant la correspondance la plus récente.</li>
-</ul>
-
-<h2 id="Exemples">Exemples</h2>
-
-<p>Si on a la séquence d'instructions suivante :</p>
-
-<pre class="brush: js">var re = /(hi)?/g;
-</pre>
-
-<p>Correspond à la chaîne vide.</p>
-
-<pre class="brush: js">console.log(re.exec('hi'));
-console.log(re.lastIndex);
-</pre>
-
-<p>Renvoie <code>["hi", "hi"]</code> avec <code>lastIndex</code> égal à 2.</p>
-
-<pre class="brush: js">console.log(re.exec('hi'));
-console.log(re.lastIndex);
-</pre>
-
-<p>Renvoie <code>["", undefined]</code>, un tableau dont le premier élément est la chaîne vide car <code>lastIndex</code> valait 2 (et vaut toujours 2) et <code>"hi"</code> était de longueur 2.</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES3')}}</td>
-   <td>{{Spec2('ES3')}}</td>
-   <td>Définition initiale. JavaScript 1.5 : <code>lastIndex</code> est une propriété d'une instance de <code>RegExp</code> et n'est pas une propriété directe de <code>RegExp</code>.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-15.10.7.5', 'RegExp.lastIndex')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-properties-of-regexp-instances', 'RegExp.lastIndex')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-properties-of-regexp-instances', 'RegExp.lastIndex')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.RegExp.lastIndex")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("RegExp.prototype.ignoreCase")}}</li>
- <li>{{jsxref("RegExp.prototype.global")}}</li>
- <li>{{jsxref("RegExp.prototype.multiline")}}</li>
- <li>{{jsxref("RegExp.prototype.source")}}</li>
- <li>{{jsxref("RegExp.prototype.sticky")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/regexp/lastindex/index.md b/files/fr/web/javascript/reference/global_objects/regexp/lastindex/index.md
new file mode 100644
index 0000000000..4693bdfb7a
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/regexp/lastindex/index.md
@@ -0,0 +1,74 @@
+---
+title: regExp.lastIndex
+slug: Web/JavaScript/Reference/Global_Objects/RegExp/lastIndex
+tags:
+  - JavaScript
+  - Propriété
+  - Reference
+  - RegExp
+translation_of: Web/JavaScript/Reference/Global_Objects/RegExp/lastIndex
+original_slug: Web/JavaScript/Reference/Objets_globaux/RegExp/lastIndex
+---
+{{JSRef}}
+
+La propriété **`lastIndex`** est un entier en lecture/écriture qui permet de définir l'indice (position) à partir duquel chercher la prochaine correspondance pour une instance d'expression rationnelle donnée.
+
+{{EmbedInteractiveExample("pages/js/regexp-lastindex.html")}}{{js_property_attributes(1,0,0)}}
+
+## Syntaxe
+
+    regExpObj.lastIndex
+
+## Description
+
+Cette propriété n'est définie que si l'instance d'expression rationnelle utilise le marqueur (_flag_) `"g"` pour effectuer une recherche globale ou le marqueur `"y"` afin d'effectuer une recherche adhérente. Les règles suivantes s'appliquent :
+
+- Si `lastIndex` est supérieur à la longueur de la chaîne de caractères, `regexp.test` et `regexp.exec` échoueront et `lastIndex` sera redéfini à 0.
+- Si `lastIndex` est égal à la longueur de la chaîne de caractères et si l'expression rationnelle correspond avec la chaîne vide, il y aura une correspondance à partir de `lastIndex`.
+- Si `lastIndex` est égal à la longueur de la chaîne de caractères et que l'expression rationnelle ne peut correspondre à la chaîne vide, on n'aura pas de correspondance et `lastIndex` sera réinitialisé à 0.
+- Sinon, `lastIndex` sera défini à la position suivant la correspondance la plus récente.
+
+## Exemples
+
+Si on a la séquence d'instructions suivante :
+
+```js
+var re = /(hi)?/g;
+```
+
+Correspond à la chaîne vide.
+
+```js
+console.log(re.exec('hi'));
+console.log(re.lastIndex);
+```
+
+Renvoie `["hi", "hi"]` avec `lastIndex` égal à 2.
+
+```js
+console.log(re.exec('hi'));
+console.log(re.lastIndex);
+```
+
+Renvoie `["", undefined]`, un tableau dont le premier élément est la chaîne vide car `lastIndex` valait 2 (et vaut toujours 2) et `"hi"` était de longueur 2.
+
+## Spécifications
+
+| Spécification                                                                                                | Statut                       | Commentaires                                                                                                                                   |
+| ------------------------------------------------------------------------------------------------------------ | ---------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- |
+| {{SpecName('ES3')}}                                                                                     | {{Spec2('ES3')}}         | Définition initiale. JavaScript 1.5 : `lastIndex` est une propriété d'une instance de `RegExp` et n'est pas une propriété directe de `RegExp`. |
+| {{SpecName('ES5.1', '#sec-15.10.7.5', 'RegExp.lastIndex')}}                             | {{Spec2('ES5.1')}}     |                                                                                                                                                |
+| {{SpecName('ES6', '#sec-properties-of-regexp-instances', 'RegExp.lastIndex')}}     | {{Spec2('ES6')}}         |                                                                                                                                                |
+| {{SpecName('ESDraft', '#sec-properties-of-regexp-instances', 'RegExp.lastIndex')}} | {{Spec2('ESDraft')}} |                                                                                                                                                |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.RegExp.lastIndex")}}
+
+## Voir aussi
+
+- {{jsxref("RegExp.prototype.ignoreCase")}}
+- {{jsxref("RegExp.prototype.global")}}
+- {{jsxref("RegExp.prototype.multiline")}}
+- {{jsxref("RegExp.prototype.source")}}
+- {{jsxref("RegExp.prototype.sticky")}}
diff --git a/files/fr/web/javascript/reference/global_objects/regexp/lastmatch/index.html b/files/fr/web/javascript/reference/global_objects/regexp/lastmatch/index.html
deleted file mode 100644
index 08e0e2ce91..0000000000
--- a/files/fr/web/javascript/reference/global_objects/regexp/lastmatch/index.html
+++ /dev/null
@@ -1,57 +0,0 @@
----
-title: RegExp.lastMatch ($&)
-slug: Web/JavaScript/Reference/Global_Objects/RegExp/lastMatch
-tags:
-  - JavaScript
-  - Non-standard
-  - Propriété
-  - Reference
-  - RegExp
-translation_of: Web/JavaScript/Reference/Global_Objects/RegExp/lastMatch
-original_slug: Web/JavaScript/Reference/Objets_globaux/RegExp/lastMatch
----
-<div>{{JSRef}} {{non-standard_header}}</div>
-
-<p>La propriété non-standard <strong><code>lastMatch</code> </strong>est une propriété statique en lecture seule pour les expressions rationnelles qui contient les caractères de la dernière correspondance. <code>RegExp.$&amp;</code> est un alias pour cette propriété.</p>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>RegExp</var>.lastMatch
-RegExp['$&amp;']
-</pre>
-
-<h2 id="Description">Description</h2>
-
-<p>La propriété <code>lastMatch</code> est une propriété statique, ce n'est pas une propriété pour chaque objet qui représente une expression rationnelle. Cette propriété doit donc toujours être utilisée avec la syntaxe <code>RegExp.lastMatch</code> ou <code>RegExp['$&amp;'].</code></p>
-
-<p>La valeur de la propriété <code>lastMatch</code> n'est accessible qu'en lecture seule et est modifiée à chaque fois qu'une correspondance est trouvée.</p>
-
-<p>Il n'est pas possible d'utiliser l'alias avec la notation utilisant le point pour accéder à la propriété (<code>RegExp.$&amp;</code>) car le parseur attend une expression avec "&amp;" dans ce cas, ce qui provoque une exception {{jsxref("SyntaxError")}}. Pour utiliser l'alias, on prendra donc la notation <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_de_membres#Notation_avec_crochets">utilisant les crochets</a>.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Utiliser_lastMatch_et">Utiliser <code>lastMatch</code> et <code>$&amp;</code></h3>
-
-<pre class="brush: js">var re = /coucou/g;
-re.test("coucou toi!");
-RegExp.lastMatch; // "coucou"
-RegExp['$&amp;'];     // "coucou"
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<p>Cette propriété n'est pas standard. Elle ne fait partie d'aucune spécification.</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.RegExp.lastMatch")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{non-standard_inline}} {{jsxref("RegExp.input", "RegExp.input ($_)")}}</li>
- <li>{{non-standard_inline}} {{jsxref("RegExp.lastParen", "RegExp.lastParen ($+)")}}</li>
- <li>{{non-standard_inline}} {{jsxref("RegExp.leftContext", "RegExp.leftContext ($`)")}}</li>
- <li>{{non-standard_inline}} {{jsxref("RegExp.rightContext", "RegExp.rightContext ($')")}}</li>
- <li>{{non-standard_inline}} {{jsxref("RegExp.n", "RegExp.$1-$9")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/regexp/lastmatch/index.md b/files/fr/web/javascript/reference/global_objects/regexp/lastmatch/index.md
new file mode 100644
index 0000000000..82d41d04bb
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/regexp/lastmatch/index.md
@@ -0,0 +1,55 @@
+---
+title: RegExp.lastMatch ($&)
+slug: Web/JavaScript/Reference/Global_Objects/RegExp/lastMatch
+tags:
+  - JavaScript
+  - Non-standard
+  - Propriété
+  - Reference
+  - RegExp
+translation_of: Web/JavaScript/Reference/Global_Objects/RegExp/lastMatch
+original_slug: Web/JavaScript/Reference/Objets_globaux/RegExp/lastMatch
+---
+{{JSRef}} {{non-standard_header}}
+
+La propriété non-standard **`lastMatch` **est une propriété statique en lecture seule pour les expressions rationnelles qui contient les caractères de la dernière correspondance. `RegExp.$&` est un alias pour cette propriété.
+
+## Syntaxe
+
+    RegExp.lastMatch
+    RegExp['$&']
+
+## Description
+
+La propriété `lastMatch` est une propriété statique, ce n'est pas une propriété pour chaque objet qui représente une expression rationnelle. Cette propriété doit donc toujours être utilisée avec la syntaxe `RegExp.lastMatch` ou `RegExp['$&'].`
+
+La valeur de la propriété `lastMatch` n'est accessible qu'en lecture seule et est modifiée à chaque fois qu'une correspondance est trouvée.
+
+Il n'est pas possible d'utiliser l'alias avec la notation utilisant le point pour accéder à la propriété (`RegExp.$&`) car le parseur attend une expression avec "&" dans ce cas, ce qui provoque une exception {{jsxref("SyntaxError")}}. Pour utiliser l'alias, on prendra donc la notation [utilisant les crochets](/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_de_membres#Notation_avec_crochets).
+
+## Exemples
+
+### Utiliser `lastMatch` et `$&`
+
+```js
+var re = /coucou/g;
+re.test("coucou toi!");
+RegExp.lastMatch; // "coucou"
+RegExp['$&'];     // "coucou"
+```
+
+## Spécifications
+
+Cette propriété n'est pas standard. Elle ne fait partie d'aucune spécification.
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.RegExp.lastMatch")}}
+
+## Voir aussi
+
+- {{non-standard_inline}} {{jsxref("RegExp.input", "RegExp.input ($_)")}}
+- {{non-standard_inline}} {{jsxref("RegExp.lastParen", "RegExp.lastParen ($+)")}}
+- {{non-standard_inline}} {{jsxref("RegExp.leftContext", "RegExp.leftContext ($`)")}}
+- {{non-standard_inline}} {{jsxref("RegExp.rightContext", "RegExp.rightContext ($')")}}
+- {{non-standard_inline}} {{jsxref("RegExp.n", "RegExp.$1-$9")}}
diff --git a/files/fr/web/javascript/reference/global_objects/regexp/lastparen/index.html b/files/fr/web/javascript/reference/global_objects/regexp/lastparen/index.html
deleted file mode 100644
index c2df70f393..0000000000
--- a/files/fr/web/javascript/reference/global_objects/regexp/lastparen/index.html
+++ /dev/null
@@ -1,56 +0,0 @@
----
-title: RegExp.lastParen ($+)
-slug: Web/JavaScript/Reference/Global_Objects/RegExp/lastParen
-tags:
-  - JavaScript
-  - Propriété
-  - Reference
-  - RegExp
-translation_of: Web/JavaScript/Reference/Global_Objects/RegExp/lastParen
-original_slug: Web/JavaScript/Reference/Objets_globaux/RegExp/lastParen
----
-<div>{{JSRef}} {{non-standard_header}}</div>
-
-<p>La propriété <code><strong>lastParen</strong></code> est une propriété statique accessible en lecture seule qui contient la dernière correspondance enregistrée dans un groupe (entre parenthèse) si jamais elle existe. <code>RegExp.$+</code> est un alias pour cette propriété.</p>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>RegExp</var>.lastParen
-RegExp['$+']
-</pre>
-
-<h2 id="Description">Description</h2>
-
-<p>La propriété <code>lastParen</code> est une propriété statique, ce n'est pas une propriété liée à chaque objet. Il faut donc toujours utiliser la syntaxe <code>RegExp.lastParen</code> ou <code>RegExp['$+'].</code></p>
-
-<p>La valeur de la propriété <code>lastParen</code> n'est accessible qu'en lecture seule et est modifiée automatiquement à chaque fois qu'il y a une correspondance.</p>
-
-<p>Cet alias ne peut pas être utilisé avec la notation utilisant le point pour l'accès aux propriétés (<code>RegExp.$+</code>). En effet, le parseur attend une expression avec "+", dans ce cas, une exception {{jsxref("SyntaxError")}} est levée. Pour utiliser cette notation raccourcie, on utilisera <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_de_membres#Notation_avec_crochets">la notation avec les crochets</a>.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Utiliser_lastParen_et">Utiliser <code>lastParen</code> et <code>$+</code></h3>
-
-<pre class="brush: js">var re = /(coucou)/g;
-re.test("coucou toi !");
-RegExp.lastParen; // "coucou"
-RegExp['$+'];     // "coucou"
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<p>Cette propriété n'est pas standard. Elle ne fait partie d'aucune spécification.</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.RegExp.lastParen")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{non-standard_inline}} {{jsxref("RegExp.input", "RegExp.input ($_)")}}</li>
- <li>{{non-standard_inline}} {{jsxref("RegExp.lastMatch", "RegExp.lastMatch ($&amp;)")}}</li>
- <li>{{non-standard_inline}} {{jsxref("RegExp.leftContext", "RegExp.leftContext ($`)")}}</li>
- <li>{{non-standard_inline}} {{jsxref("RegExp.rightContext", "RegExp.rightContext ($')")}}</li>
- <li>{{non-standard_inline}} {{jsxref("RegExp.n", "RegExp.$1-$9")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/regexp/lastparen/index.md b/files/fr/web/javascript/reference/global_objects/regexp/lastparen/index.md
new file mode 100644
index 0000000000..ee1f864078
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/regexp/lastparen/index.md
@@ -0,0 +1,54 @@
+---
+title: RegExp.lastParen ($+)
+slug: Web/JavaScript/Reference/Global_Objects/RegExp/lastParen
+tags:
+  - JavaScript
+  - Propriété
+  - Reference
+  - RegExp
+translation_of: Web/JavaScript/Reference/Global_Objects/RegExp/lastParen
+original_slug: Web/JavaScript/Reference/Objets_globaux/RegExp/lastParen
+---
+{{JSRef}} {{non-standard_header}}
+
+La propriété **`lastParen`** est une propriété statique accessible en lecture seule qui contient la dernière correspondance enregistrée dans un groupe (entre parenthèse) si jamais elle existe. `RegExp.$+` est un alias pour cette propriété.
+
+## Syntaxe
+
+    RegExp.lastParen
+    RegExp['$+']
+
+## Description
+
+La propriété `lastParen` est une propriété statique, ce n'est pas une propriété liée à chaque objet. Il faut donc toujours utiliser la syntaxe `RegExp.lastParen` ou `RegExp['$+'].`
+
+La valeur de la propriété `lastParen` n'est accessible qu'en lecture seule et est modifiée automatiquement à chaque fois qu'il y a une correspondance.
+
+Cet alias ne peut pas être utilisé avec la notation utilisant le point pour l'accès aux propriétés (`RegExp.$+`). En effet, le parseur attend une expression avec "+", dans ce cas, une exception {{jsxref("SyntaxError")}} est levée. Pour utiliser cette notation raccourcie, on utilisera [la notation avec les crochets](/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_de_membres#Notation_avec_crochets).
+
+## Exemples
+
+### Utiliser `lastParen` et `$+`
+
+```js
+var re = /(coucou)/g;
+re.test("coucou toi !");
+RegExp.lastParen; // "coucou"
+RegExp['$+'];     // "coucou"
+```
+
+## Spécifications
+
+Cette propriété n'est pas standard. Elle ne fait partie d'aucune spécification.
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.RegExp.lastParen")}}
+
+## Voir aussi
+
+- {{non-standard_inline}} {{jsxref("RegExp.input", "RegExp.input ($_)")}}
+- {{non-standard_inline}} {{jsxref("RegExp.lastMatch", "RegExp.lastMatch ($&amp;)")}}
+- {{non-standard_inline}} {{jsxref("RegExp.leftContext", "RegExp.leftContext ($`)")}}
+- {{non-standard_inline}} {{jsxref("RegExp.rightContext", "RegExp.rightContext ($')")}}
+- {{non-standard_inline}} {{jsxref("RegExp.n", "RegExp.$1-$9")}}
diff --git a/files/fr/web/javascript/reference/global_objects/regexp/leftcontext/index.html b/files/fr/web/javascript/reference/global_objects/regexp/leftcontext/index.html
deleted file mode 100644
index e5a3bda79d..0000000000
--- a/files/fr/web/javascript/reference/global_objects/regexp/leftcontext/index.html
+++ /dev/null
@@ -1,55 +0,0 @@
----
-title: RegExp.leftContext ($`)
-slug: Web/JavaScript/Reference/Global_Objects/RegExp/leftContext
-tags:
-  - JavaScript
-  - Non-standard
-  - Propriété
-  - Reference
-  - RegExp
-translation_of: Web/JavaScript/Reference/Global_Objects/RegExp/leftContext
-original_slug: Web/JavaScript/Reference/Objets_globaux/RegExp/leftContext
----
-<div>{{JSRef}} {{non-standard_header}}</div>
-
-<p>La propriété non-standard <code><strong>leftContext</strong></code> est une propriété statique accessible uniquement en lecture. Cette propriété liée aux expressions rationnelles contient la sous-chaîne qui précède la correspondance la plus récente. <code>RegExp.$`</code> est un alias pour cette propriété.</p>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>RegExp</var>.leftContext
-RegExp['$`']
-</pre>
-
-<h2 id="Description">Description</h2>
-
-<p>La propriété <code>leftContext</code> est une propriété statique, elle n'est donc pas distincte entre les différents objets représentants les expressions rationnelles. Il faut donc toujours utiliser la syntaxe <code>RegExp.leftContext</code> ou <code>RegExp['$`'].</code></p>
-
-<p>La valeur de la propriété <code>leftContext</code> n'est accessible uniquement qu'en lecture. Elle est modifiée par le moteur à chaque fois qu'une nouvelle correspondance est trouvée.</p>
-
-<p>L'alias ne peut pas être utilisé avec la notation utilisant le point (<code>RegExp.$`</code>). En effet, le parseur attend un gabarit de chaîne à la suite de l'accent grave. Si on utilise le point, on aura donc une exception {{jsxref("SyntaxError")}}. Pour cet alias, on utilisera <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_de_membres#Notation_avec_crochets">la notation à base de crochets</a>.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<pre class="brush: js">var re = /monde/g;
-re.test("coucou monde !");
-RegExp.leftContext; // "coucou "
-RegExp['$`'];       // "coucou "
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<p>Cette propriété n'est pas standard et ne fait partie d'aucune spécification.</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.RegExp.leftContext")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{non-standard_inline}} {{jsxref("RegExp.input", "RegExp.input ($_)")}}</li>
- <li>{{non-standard_inline}} {{jsxref("RegExp.lastMatch", "RegExp.lastMatch ($&amp;)")}}</li>
- <li>{{non-standard_inline}} {{jsxref("RegExp.lastParen", "RegExp.lastParen ($+)")}}</li>
- <li>{{non-standard_inline}} {{jsxref("RegExp.rightContext", "RegExp.rightContext ($')")}}</li>
- <li>{{non-standard_inline}} {{jsxref("RegExp.n", "RegExp.$1-$9")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/regexp/leftcontext/index.md b/files/fr/web/javascript/reference/global_objects/regexp/leftcontext/index.md
new file mode 100644
index 0000000000..34820f2311
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/regexp/leftcontext/index.md
@@ -0,0 +1,53 @@
+---
+title: RegExp.leftContext ($`)
+slug: Web/JavaScript/Reference/Global_Objects/RegExp/leftContext
+tags:
+  - JavaScript
+  - Non-standard
+  - Propriété
+  - Reference
+  - RegExp
+translation_of: Web/JavaScript/Reference/Global_Objects/RegExp/leftContext
+original_slug: Web/JavaScript/Reference/Objets_globaux/RegExp/leftContext
+---
+{{JSRef}} {{non-standard_header}}
+
+La propriété non-standard **`leftContext`** est une propriété statique accessible uniquement en lecture. Cette propriété liée aux expressions rationnelles contient la sous-chaîne qui précède la correspondance la plus récente. `` RegExp.$` `` est un alias pour cette propriété.
+
+## Syntaxe
+
+    RegExp.leftContext
+    RegExp['$`']
+
+## Description
+
+La propriété `leftContext` est une propriété statique, elle n'est donc pas distincte entre les différents objets représentants les expressions rationnelles. Il faut donc toujours utiliser la syntaxe `RegExp.leftContext` ou `` RegExp['$`']. ``
+
+La valeur de la propriété `leftContext` n'est accessible uniquement qu'en lecture. Elle est modifiée par le moteur à chaque fois qu'une nouvelle correspondance est trouvée.
+
+L'alias ne peut pas être utilisé avec la notation utilisant le point (`` RegExp.$` ``). En effet, le parseur attend un gabarit de chaîne à la suite de l'accent grave. Si on utilise le point, on aura donc une exception {{jsxref("SyntaxError")}}. Pour cet alias, on utilisera [la notation à base de crochets](/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_de_membres#Notation_avec_crochets).
+
+## Exemples
+
+```js
+var re = /monde/g;
+re.test("coucou monde !");
+RegExp.leftContext; // "coucou "
+RegExp['$`'];       // "coucou "
+```
+
+## Spécifications
+
+Cette propriété n'est pas standard et ne fait partie d'aucune spécification.
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.RegExp.leftContext")}}
+
+## Voir aussi
+
+- {{non-standard_inline}} {{jsxref("RegExp.input", "RegExp.input ($_)")}}
+- {{non-standard_inline}} {{jsxref("RegExp.lastMatch", "RegExp.lastMatch ($&amp;)")}}
+- {{non-standard_inline}} {{jsxref("RegExp.lastParen", "RegExp.lastParen ($+)")}}
+- {{non-standard_inline}} {{jsxref("RegExp.rightContext", "RegExp.rightContext ($')")}}
+- {{non-standard_inline}} {{jsxref("RegExp.n", "RegExp.$1-$9")}}
diff --git a/files/fr/web/javascript/reference/global_objects/regexp/multiline/index.html b/files/fr/web/javascript/reference/global_objects/regexp/multiline/index.html
deleted file mode 100644
index 3c6d1df46a..0000000000
--- a/files/fr/web/javascript/reference/global_objects/regexp/multiline/index.html
+++ /dev/null
@@ -1,86 +0,0 @@
----
-title: RegExp.prototype.multiline
-slug: Web/JavaScript/Reference/Global_Objects/RegExp/multiline
-tags:
-  - JavaScript
-  - Propriété
-  - Prototype
-  - Reference
-  - RegExp
-translation_of: Web/JavaScript/Reference/Global_Objects/RegExp/multiline
-original_slug: Web/JavaScript/Reference/Objets_globaux/RegExp/multiline
----
-<div>{{JSRef}}</div>
-
-<p>La propriété <code><strong>multiline</strong></code> indique si le drapeau (<em>flag</em>) "<code>m</code>" a été utilisé ou non pour l'expression rationnelle. <code>multiline</code> est une propriété liée à l'instance, accessible en lecture seule.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/regexp-prototype-multiline.html", "taller")}}</div>
-
-
-
-<div>{{js_property_attributes(0,0,1)}}</div>
-
-<h2 id="Description">Description</h2>
-
-<p>La valeur de <code>multiline</code> est un booléen. Elle vaut <code>true</code> si le drapeau "<code>m</code>" a été utilisé et <code>false</code> sinon. Le flag "<code>m</code>" indique qu'une chaine de caractères qui s'étend sur plusieurs lignes doit être traitée comme une série de ligne. Ainsi, si "<code>m</code>" est utilisé, "<code>^</code>" et "<code>$</code>" ne correspondent plus au début et à la fin de la chaîne mais aux débuts et aux fins de chaque ligne de la chaîne.</p>
-
-<p>Cette propriété ne peut pas être modifiée directement.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<pre class="brush:js">var regex = new RegExp("toto", "m");
-
-console.log(regex.multiline); // true
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES3')}}</td>
-   <td>{{Spec2('ES3')}}</td>
-   <td>Définition initiale. Implémentée avec JavaScript 1.2. Avec JavaScript 1.5 : <code>multiline</code> est une propriété liée à l'instance de {{jsxref("RegExp")}} et non à l'objet <code>RegExp</code>.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-15.10.7.4', 'RegExp.prototype.multiline')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-get-regexp.prototype.multiline', 'RegExp.prototype.multiline')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td><code>multiline</code> est désormais un propriété du prototype sous forme d'accesseur plutôt qu'une propriété directement liée à l'instance.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-get-regexp.prototype.multiline', 'RegExp.prototype.multiline')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.RegExp.multiline")}}</p>
-
-<h2 id="Notes_de_compatibilité">Notes de compatibilité</h2>
-
-<ul>
- <li>Avant Firefox 48 , une propriété globale non-standard <code>RegExp.multiline</code> existait en plus de la propriété <code>RegExp.prototype.multiline</code>. Elle a été retirée dans les nouvelles versions du moteur (cf. {{bug(1219757)}}). On utilisera la propriété décrite sur cette page ou le <a href="/fr/docs/Web/JavaScript/Guide/Expressions_régulières#Effectuer_des_recherches_avancées_en_utilisant_les_drapeaux_(flags)">marqueur <code>m</code></a> à la place.</li>
-</ul>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("RegExp.prototype.global")}}</li>
- <li>{{jsxref("RegExp.prototype.lastIndex")}}</li>
- <li>{{jsxref("RegExp.prototype.ignoreCase")}}</li>
- <li>{{jsxref("RegExp.prototype.source")}}</li>
- <li>{{jsxref("RegExp.prototype.sticky")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/regexp/multiline/index.md b/files/fr/web/javascript/reference/global_objects/regexp/multiline/index.md
new file mode 100644
index 0000000000..72c86650cf
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/regexp/multiline/index.md
@@ -0,0 +1,56 @@
+---
+title: RegExp.prototype.multiline
+slug: Web/JavaScript/Reference/Global_Objects/RegExp/multiline
+tags:
+  - JavaScript
+  - Propriété
+  - Prototype
+  - Reference
+  - RegExp
+translation_of: Web/JavaScript/Reference/Global_Objects/RegExp/multiline
+original_slug: Web/JavaScript/Reference/Objets_globaux/RegExp/multiline
+---
+{{JSRef}}
+
+La propriété **`multiline`** indique si le drapeau (_flag_) "`m`" a été utilisé ou non pour l'expression rationnelle. `multiline` est une propriété liée à l'instance, accessible en lecture seule.
+
+{{EmbedInteractiveExample("pages/js/regexp-prototype-multiline.html", "taller")}}{{js_property_attributes(0,0,1)}}
+
+## Description
+
+La valeur de `multiline` est un booléen. Elle vaut `true` si le drapeau "`m`" a été utilisé et `false` sinon. Le flag "`m`" indique qu'une chaine de caractères qui s'étend sur plusieurs lignes doit être traitée comme une série de ligne. Ainsi, si "`m`" est utilisé, "`^`" et "`$`" ne correspondent plus au début et à la fin de la chaîne mais aux débuts et aux fins de chaque ligne de la chaîne.
+
+Cette propriété ne peut pas être modifiée directement.
+
+## Exemples
+
+```js
+var regex = new RegExp("toto", "m");
+
+console.log(regex.multiline); // true
+```
+
+## Spécifications
+
+| Spécification                                                                                                                | Statut                       | Commentaires                                                                                                                                                                           |
+| ---------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| {{SpecName('ES3')}}                                                                                                     | {{Spec2('ES3')}}         | Définition initiale. Implémentée avec JavaScript 1.2. Avec JavaScript 1.5 : `multiline` est une propriété liée à l'instance de {{jsxref("RegExp")}} et non à l'objet `RegExp`. |
+| {{SpecName('ES5.1', '#sec-15.10.7.4', 'RegExp.prototype.multiline')}}                                 | {{Spec2('ES5.1')}}     |                                                                                                                                                                                        |
+| {{SpecName('ES6', '#sec-get-regexp.prototype.multiline', 'RegExp.prototype.multiline')}}         | {{Spec2('ES6')}}         | `multiline` est désormais un propriété du prototype sous forme d'accesseur plutôt qu'une propriété directement liée à l'instance.                                                      |
+| {{SpecName('ESDraft', '#sec-get-regexp.prototype.multiline', 'RegExp.prototype.multiline')}} | {{Spec2('ESDraft')}} |                                                                                                                                                                                        |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.RegExp.multiline")}}
+
+## Notes de compatibilité
+
+- Avant Firefox 48 , une propriété globale non-standard `RegExp.multiline` existait en plus de la propriété `RegExp.prototype.multiline`. Elle a été retirée dans les nouvelles versions du moteur (cf. {{bug(1219757)}}). On utilisera la propriété décrite sur cette page ou le [marqueur `m`](</fr/docs/Web/JavaScript/Guide/Expressions_régulières#Effectuer_des_recherches_avancées_en_utilisant_les_drapeaux_(flags)>) à la place.
+
+## Voir aussi
+
+- {{jsxref("RegExp.prototype.global")}}
+- {{jsxref("RegExp.prototype.lastIndex")}}
+- {{jsxref("RegExp.prototype.ignoreCase")}}
+- {{jsxref("RegExp.prototype.source")}}
+- {{jsxref("RegExp.prototype.sticky")}}
diff --git a/files/fr/web/javascript/reference/global_objects/regexp/n/index.html b/files/fr/web/javascript/reference/global_objects/regexp/n/index.html
deleted file mode 100644
index 639b98d059..0000000000
--- a/files/fr/web/javascript/reference/global_objects/regexp/n/index.html
+++ /dev/null
@@ -1,67 +0,0 @@
----
-title: RegExp.$1-$9
-slug: Web/JavaScript/Reference/Global_Objects/RegExp/n
-tags:
-  - JavaScript
-  - Non-standard
-  - Propriété
-  - Reference
-  - RegExp
-translation_of: Web/JavaScript/Reference/Global_Objects/RegExp/n
-original_slug: Web/JavaScript/Reference/Objets_globaux/RegExp/n
----
-<div>{{JSRef}} {{non-standard_header}}</div>
-
-<p>Les propriétés non-standard <strong>$1, $2, $3, $4, $5, $6, $7, $8, $9</strong> sont des propriétés statiques accessibles en lecture qui contiennent les différents groupes capturés par une expression rationnelle.</p>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>RegExp</var>.$1
-RegExp.$2
-RegExp.$3
-RegExp.$4
-RegExp.$5
-RegExp.$6
-RegExp.$7
-RegExp.$8
-RegExp.$9
-</pre>
-
-<h2 id="Description">Description</h2>
-
-<p>Les propriétés $1, ..., $9 sont des propriétés statiques. Ce ne sont pas des propriétés rattachées à une expression rationnelle donnée. Pour cette raison, on utilisera toujours la syntaxe <code>RegExp.$1</code>, ..., <code>RegExp.$9</code>.</p>
-
-<p>Les valeurs de ces propriétés ne sont accessibles qu'en lecture et sont modifiées par le moteur à chaque fois qu'une nouvelle correspondance est trouvée.</p>
-
-<p>Le nombre de groupe d'une expression rationnelle n'est pas limité. Cependant, l'objet <code>RegExp</code> ne contient que les neufs premiers groupes. Pour accéder à chacun des groupes liés à une expression rationnelle donnée, on pourra utiliser les indices du tableau relevant les correspondances.</p>
-
-<p>Ces propriétés peuvent être utilisées pour le texte de remplacement de la méthode {{jsxref("String.replace")}}. Avec cette méthode, on ne préfixera pas les valeurs par <code>RegExp</code> (voir l'exemple ci-après), lorsque les parenthèses groupantes ne sont pas utilisées dans l'expression, <code>$n</code> sera interprété littérallement (avec <code>n</code> un entier positif).</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<p>Dans le script qui suit, on utilise {{jsxref("String.prototype.replace()", "replace()")}} d'une instance de {{jsxref("String")}} pour inverser le premier mot et le dernier et placer une virgule entre. Le script utilise <code>$1</code> et <code>$2</code> pour faire référence aux groupes de l'expression rationnelle :</p>
-
-<pre class="brush: js">var re = /(\w+)\s(\w+)/;
-var str = 'Jean Biche';
-str.replace(re, '$2, $1'); // "Biche, Jean"
-RegExp.$1; // "Jean"
-RegExp.$2; // "Biche"
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<p>Ces propriétés ne sont pas standard, elles ne font partie d'aucune spécification.</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.RegExp.n")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{non-standard_inline}} {{jsxref("RegExp.input", "RegExp.input ($_)")}}</li>
- <li>{{non-standard_inline}} {{jsxref("RegExp.lastMatch", "RegExp.lastMatch ($&amp;)")}}</li>
- <li>{{non-standard_inline}} {{jsxref("RegExp.lastParen", "RegExp.lastParen ($+)")}}</li>
- <li>{{non-standard_inline}} {{jsxref("RegExp.leftContext", "RegExp.leftContext ($`)")}}</li>
- <li>{{non-standard_inline}} {{jsxref("RegExp.rightContext", "RegExp.rightContext ($')")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/regexp/n/index.md b/files/fr/web/javascript/reference/global_objects/regexp/n/index.md
new file mode 100644
index 0000000000..737e7368e0
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/regexp/n/index.md
@@ -0,0 +1,65 @@
+---
+title: RegExp.$1-$9
+slug: Web/JavaScript/Reference/Global_Objects/RegExp/n
+tags:
+  - JavaScript
+  - Non-standard
+  - Propriété
+  - Reference
+  - RegExp
+translation_of: Web/JavaScript/Reference/Global_Objects/RegExp/n
+original_slug: Web/JavaScript/Reference/Objets_globaux/RegExp/n
+---
+{{JSRef}} {{non-standard_header}}
+
+Les propriétés non-standard **$1, $2, $3, $4, $5, $6, $7, $8, $9** sont des propriétés statiques accessibles en lecture qui contiennent les différents groupes capturés par une expression rationnelle.
+
+## Syntaxe
+
+    RegExp.$1
+    RegExp.$2
+    RegExp.$3
+    RegExp.$4
+    RegExp.$5
+    RegExp.$6
+    RegExp.$7
+    RegExp.$8
+    RegExp.$9
+
+## Description
+
+Les propriétés $1, ..., $9 sont des propriétés statiques. Ce ne sont pas des propriétés rattachées à une expression rationnelle donnée. Pour cette raison, on utilisera toujours la syntaxe `RegExp.$1`, ..., `RegExp.$9`.
+
+Les valeurs de ces propriétés ne sont accessibles qu'en lecture et sont modifiées par le moteur à chaque fois qu'une nouvelle correspondance est trouvée.
+
+Le nombre de groupe d'une expression rationnelle n'est pas limité. Cependant, l'objet `RegExp` ne contient que les neufs premiers groupes. Pour accéder à chacun des groupes liés à une expression rationnelle donnée, on pourra utiliser les indices du tableau relevant les correspondances.
+
+Ces propriétés peuvent être utilisées pour le texte de remplacement de la méthode {{jsxref("String.replace")}}. Avec cette méthode, on ne préfixera pas les valeurs par `RegExp` (voir l'exemple ci-après), lorsque les parenthèses groupantes ne sont pas utilisées dans l'expression, `$n` sera interprété littérallement (avec `n` un entier positif).
+
+## Exemples
+
+Dans le script qui suit, on utilise {{jsxref("String.prototype.replace()", "replace()")}} d'une instance de {{jsxref("String")}} pour inverser le premier mot et le dernier et placer une virgule entre. Le script utilise `$1` et `$2` pour faire référence aux groupes de l'expression rationnelle :
+
+```js
+var re = /(\w+)\s(\w+)/;
+var str = 'Jean Biche';
+str.replace(re, '$2, $1'); // "Biche, Jean"
+RegExp.$1; // "Jean"
+RegExp.$2; // "Biche"
+```
+
+## Spécifications
+
+Ces propriétés ne sont pas standard, elles ne font partie d'aucune spécification.
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.RegExp.n")}}
+
+## Voir aussi
+
+- {{non-standard_inline}} {{jsxref("RegExp.input", "RegExp.input ($_)")}}
+- {{non-standard_inline}} {{jsxref("RegExp.lastMatch", "RegExp.lastMatch ($&amp;)")}}
+- {{non-standard_inline}} {{jsxref("RegExp.lastParen", "RegExp.lastParen ($+)")}}
+- {{non-standard_inline}} {{jsxref("RegExp.leftContext", "RegExp.leftContext ($`)")}}
+- {{non-standard_inline}} {{jsxref("RegExp.rightContext", "RegExp.rightContext ($')")}}
diff --git a/files/fr/web/javascript/reference/global_objects/regexp/rightcontext/index.html b/files/fr/web/javascript/reference/global_objects/regexp/rightcontext/index.html
deleted file mode 100644
index 8d7aecc28e..0000000000
--- a/files/fr/web/javascript/reference/global_objects/regexp/rightcontext/index.html
+++ /dev/null
@@ -1,56 +0,0 @@
----
-title: RegExp.rightContext ($')
-slug: Web/JavaScript/Reference/Global_Objects/RegExp/rightContext
-tags:
-  - JavaScript
-  - Non-standard
-  - Propriété
-  - Reference
-  - RegExp
-  - Regular Expressions
-translation_of: Web/JavaScript/Reference/Global_Objects/RegExp/rightContext
-original_slug: Web/JavaScript/Reference/Objets_globaux/RegExp/rightContext
----
-<div>{{JSRef}} {{non-standard_header}}</div>
-
-<p>La propriété non-standard <strong><code>rightContext</code> </strong>est une propriété statique, accessible uniquement en lecture, qui contient la sous-chaîne suivant la correspondance la plus récente. <code>RegExp.$'</code> est un alias pour cette propriété.</p>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>RegExp</var>.rightContext
-RegExp["$'"]
-</pre>
-
-<h2 id="Description">Description</h2>
-
-<p>La propriété <code>rightContext</code> est une propriété statique et n'est pas liée à une instance d'expression rationnelle. Pour cette raison, il faut toujours utiliser la syntaxe <code>RegExp.rightContext</code> ou <code>RegExp["$'"].</code></p>
-
-<p>La valeur de la propriété <code>rightContext</code> n'est accessible qu'en lecture. Le moteur la modifie à chaque fois qu'une nouvelle correspondance est trouvée.</p>
-
-<p>L'alias ne peut pas être utilisé avec la syntaxe utilisant le point (<code>RegExp.$'</code>). En effet, l'analyseur (<em>parser</em>) attend un début de chaîne du fait de la simple quote, ce qui provoquerait une exception {{jsxref("SyntaxError")}}. Il faut donc utiliser <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_de_membres#Notation_avec_crochets">la notation à base de crochets</a>.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<pre class="brush: js">var re = /coucou/g;
-re.test("coucou monde !");
-RegExp.rightContext; // " monde !"
-RegExp["$'"];       // " monde !"
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<p>Cette propriété n'est pas standard, elle ne fait partie d'aucune spécification.</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.RegExp.rightContext")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{non-standard_inline}} {{jsxref("RegExp.input", "RegExp.input ($_)")}}</li>
- <li>{{non-standard_inline}} {{jsxref("RegExp.lastMatch", "RegExp.lastMatch ($&amp;)")}}</li>
- <li>{{non-standard_inline}} {{jsxref("RegExp.lastParen", "RegExp.lastParen ($+)")}}</li>
- <li>{{non-standard_inline}} {{jsxref("RegExp.leftContext", "RegExp.leftContext ($`)")}}</li>
- <li>{{non-standard_inline}} {{jsxref("RegExp.n", "RegExp.$1-$9")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/regexp/rightcontext/index.md b/files/fr/web/javascript/reference/global_objects/regexp/rightcontext/index.md
new file mode 100644
index 0000000000..157ce8bdab
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/regexp/rightcontext/index.md
@@ -0,0 +1,54 @@
+---
+title: RegExp.rightContext ($')
+slug: Web/JavaScript/Reference/Global_Objects/RegExp/rightContext
+tags:
+  - JavaScript
+  - Non-standard
+  - Propriété
+  - Reference
+  - RegExp
+  - Regular Expressions
+translation_of: Web/JavaScript/Reference/Global_Objects/RegExp/rightContext
+original_slug: Web/JavaScript/Reference/Objets_globaux/RegExp/rightContext
+---
+{{JSRef}} {{non-standard_header}}
+
+La propriété non-standard **`rightContext` **est une propriété statique, accessible uniquement en lecture, qui contient la sous-chaîne suivant la correspondance la plus récente. `RegExp.$'` est un alias pour cette propriété.
+
+## Syntaxe
+
+    RegExp.rightContext
+    RegExp["$'"]
+
+## Description
+
+La propriété `rightContext` est une propriété statique et n'est pas liée à une instance d'expression rationnelle. Pour cette raison, il faut toujours utiliser la syntaxe `RegExp.rightContext` ou `RegExp["$'"].`
+
+La valeur de la propriété `rightContext` n'est accessible qu'en lecture. Le moteur la modifie à chaque fois qu'une nouvelle correspondance est trouvée.
+
+L'alias ne peut pas être utilisé avec la syntaxe utilisant le point (`RegExp.$'`). En effet, l'analyseur (_parser_) attend un début de chaîne du fait de la simple quote, ce qui provoquerait une exception {{jsxref("SyntaxError")}}. Il faut donc utiliser [la notation à base de crochets](/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_de_membres#Notation_avec_crochets).
+
+## Exemples
+
+```js
+var re = /coucou/g;
+re.test("coucou monde !");
+RegExp.rightContext; // " monde !"
+RegExp["$'"];       // " monde !"
+```
+
+## Spécifications
+
+Cette propriété n'est pas standard, elle ne fait partie d'aucune spécification.
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.RegExp.rightContext")}}
+
+## Voir aussi
+
+- {{non-standard_inline}} {{jsxref("RegExp.input", "RegExp.input ($_)")}}
+- {{non-standard_inline}} {{jsxref("RegExp.lastMatch", "RegExp.lastMatch ($&amp;)")}}
+- {{non-standard_inline}} {{jsxref("RegExp.lastParen", "RegExp.lastParen ($+)")}}
+- {{non-standard_inline}} {{jsxref("RegExp.leftContext", "RegExp.leftContext ($`)")}}
+- {{non-standard_inline}} {{jsxref("RegExp.n", "RegExp.$1-$9")}}
diff --git a/files/fr/web/javascript/reference/global_objects/regexp/source/index.html b/files/fr/web/javascript/reference/global_objects/regexp/source/index.html
deleted file mode 100644
index 7b5437e8cc..0000000000
--- a/files/fr/web/javascript/reference/global_objects/regexp/source/index.html
+++ /dev/null
@@ -1,81 +0,0 @@
----
-title: RegExp.prototype.source
-slug: Web/JavaScript/Reference/Global_Objects/RegExp/source
-tags:
-  - JavaScript
-  - Propriété
-  - Prototype
-  - Reference
-  - RegExp
-translation_of: Web/JavaScript/Reference/Global_Objects/RegExp/source
-original_slug: Web/JavaScript/Reference/Objets_globaux/RegExp/source
----
-<div>{{JSRef}}</div>
-
-<p>La propriété <code><strong>source</strong></code> renvoie une chaîne de caractères qui contient le texte du motif à rechercher (<em>pattern</em>), sans les barres obliques (<em>slashes</em>). C'est une propriété en lecture seule liée à l'instance. <strong><code>source</code></strong> ne contient aucun des options ou drapeaux (<em>flags</em>) (tels que "g", "i" ou "m") de l'expression rationnelle.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/regexp-prototype-source.html")}}</div>
-
-
-
-<div>{{js_property_attributes(0,0,1)}}</div>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Utiliser_source">Utiliser <code>source</code></h3>
-
-<pre class="brush:js">var regex = /totoMachin/ig;
-
-console.log(regex.source); // "totoMachin"
-</pre>
-
-<h3 id="Les_expressions_ratonnelles_vides_et_l'échappement">Les expressions ratonnelles vides et l'échappement</h3>
-
-<p>À partir d'ECMAScript 5, la propriété <code>source</code> ne renvoie plus une chaîne vide pour les expressions rationnelles vides. Elle renvoie la chaîne <code>"(?:)"</code>. De plus, les fins de lignes (telles que "\n") sont désormais échappées.</p>
-
-<pre class="brush: js">new RegExp().source; // "(?:)"
-
-new RegExp('\n').source === "\n";  // true avant ES5
-new RegExp('\n').source === "\\n"; // true à partir d'ES5</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES3')}}</td>
-   <td>{{Spec2('ES3')}}</td>
-   <td>Définition initiale. Implémentée avec JavaScript 1.2. Avec JavaScript 1.5 : <code>source</code> est une propriété de l'instance de {{jsxref("RegExp")}}, ce n'est pas une propriété de l'objet <code>RegExp</code>.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-15.10.7.1', 'RegExp.prototype.source')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td><code>source</code> renvoie désormais "(?:)" (et non "") pour les expressions vides. La définition du comportement pour les échappements a été ajoutée.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-get-regexp.prototype.source', 'RegExp.prototype.source')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td><code>source</code> est désormais un accesseur lié au prototype plutôt qu'une propriété directement rattachée à l'instance.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-get-regexp.prototype.source', 'RegExp.prototype.source')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.RegExp.source")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("RegExp.prototype.flags")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/regexp/source/index.md b/files/fr/web/javascript/reference/global_objects/regexp/source/index.md
new file mode 100644
index 0000000000..86cf78ae27
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/regexp/source/index.md
@@ -0,0 +1,55 @@
+---
+title: RegExp.prototype.source
+slug: Web/JavaScript/Reference/Global_Objects/RegExp/source
+tags:
+  - JavaScript
+  - Propriété
+  - Prototype
+  - Reference
+  - RegExp
+translation_of: Web/JavaScript/Reference/Global_Objects/RegExp/source
+original_slug: Web/JavaScript/Reference/Objets_globaux/RegExp/source
+---
+{{JSRef}}
+
+La propriété **`source`** renvoie une chaîne de caractères qui contient le texte du motif à rechercher (_pattern_), sans les barres obliques (_slashes_). C'est une propriété en lecture seule liée à l'instance. **`source`** ne contient aucun des options ou drapeaux (_flags_) (tels que "g", "i" ou "m") de l'expression rationnelle.
+
+{{EmbedInteractiveExample("pages/js/regexp-prototype-source.html")}}{{js_property_attributes(0,0,1)}}
+
+## Exemples
+
+### Utiliser `source`
+
+```js
+var regex = /totoMachin/ig;
+
+console.log(regex.source); // "totoMachin"
+```
+
+### Les expressions ratonnelles vides et l'échappement
+
+À partir d'ECMAScript 5, la propriété `source` ne renvoie plus une chaîne vide pour les expressions rationnelles vides. Elle renvoie la chaîne `"(?:)"`. De plus, les fins de lignes (telles que "\n") sont désormais échappées.
+
+```js
+new RegExp().source; // "(?:)"
+
+new RegExp('\n').source === "\n";  // true avant ES5
+new RegExp('\n').source === "\\n"; // true à partir d'ES5
+```
+
+## Spécifications
+
+| Spécification                                                                                                        | État                         | Commentaires                                                                                                                                                                                          |
+| -------------------------------------------------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| {{SpecName('ES3')}}                                                                                             | {{Spec2('ES3')}}         | Définition initiale. Implémentée avec JavaScript 1.2. Avec JavaScript 1.5 : `source` est une propriété de l'instance de {{jsxref("RegExp")}}, ce n'est pas une propriété de l'objet `RegExp`. |
+| {{SpecName('ES5.1', '#sec-15.10.7.1', 'RegExp.prototype.source')}}                             | {{Spec2('ES5.1')}}     | `source` renvoie désormais "(?:)" (et non "") pour les expressions vides. La définition du comportement pour les échappements a été ajoutée.                                                          |
+| {{SpecName('ES6', '#sec-get-regexp.prototype.source', 'RegExp.prototype.source')}}         | {{Spec2('ES6')}}         | `source` est désormais un accesseur lié au prototype plutôt qu'une propriété directement rattachée à l'instance.                                                                                      |
+| {{SpecName('ESDraft', '#sec-get-regexp.prototype.source', 'RegExp.prototype.source')}} | {{Spec2('ESDraft')}} |                                                                                                                                                                                                       |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.RegExp.source")}}
+
+## Voir aussi
+
+- {{jsxref("RegExp.prototype.flags")}}
diff --git a/files/fr/web/javascript/reference/global_objects/regexp/sticky/index.html b/files/fr/web/javascript/reference/global_objects/regexp/sticky/index.html
deleted file mode 100644
index ab261c0d51..0000000000
--- a/files/fr/web/javascript/reference/global_objects/regexp/sticky/index.html
+++ /dev/null
@@ -1,94 +0,0 @@
----
-title: RegExp.prototype.sticky
-slug: Web/JavaScript/Reference/Global_Objects/RegExp/sticky
-tags:
-  - ECMAScript 2015
-  - Expressions rationnelles
-  - JavaScript
-  - Propriété
-  - Prototype
-  - Reference
-  - RegExp
-translation_of: Web/JavaScript/Reference/Global_Objects/RegExp/sticky
-original_slug: Web/JavaScript/Reference/Objets_globaux/RegExp/sticky
----
-<div>{{JSRef}}</div>
-
-<p>La propriété <code><strong>sticky</strong></code> (adhérante) permet de déterminer si la recherche s'effectue uniquement à partir de l'indice {{jsxref("RegExp.lastIndex", "lastIndex")}} lié à l'expression rationnelle ou non). <code>sticky</code> est une propriété accessible en lecture seule, rattachée à l'instance.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/regexp-prototype-sticky.html")}}</div>
-
-
-
-<div>{{js_property_attributes(0,0,1)}}</div>
-
-<h2 id="Description">Description</h2>
-
-<p>La propriété <code>sticky</code> est un booléen qui vaut <code>true</code> si le marqueur (<em>flag</em>) "<code>y</code>" a été utilisé, <code>false</code> sinon. Ce marqueur indique que les correspondances ne sont recherchées qu'à partir de l'indice {{jsxref("RegExp.lastIndex", "lastIndex")}} au niveau de la chaîne de caractères (les correspondances à partir des autres positions ne seront pas trouvées). Lorsqu'une expression rationnelle qui utilise le marqueur <code>sticky</code> <strong>et</strong> le marqueur <code>global</code> ignorera le marqueur <code>global</code>.</p>
-
-<p>La propriété <code>sticky</code> ne peut pas être modifiée directement. Elle est uniquement en lecture seule.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Utiliser_une_expression_rationnelle_avec_le_flag_sticky">Utiliser une expression rationnelle avec le <em>flag</em> <em>sticky</em></h3>
-
-<pre class="brush: js">var str = '#toto#';
-var regex = /toto/y;
-
-regex.lastIndex = 1;
-regex.test(str); // true
-regex.lastIndex = 5;
-regex.test(str); // false (lastIndex est pris en compte avec sticky)
-regex.lastIndex; // 0 (on rénitialise après un échec)
-</pre>
-
-<h3 id="Marqueur_d'adhérence_«_ancré_»">Marqueur d'adhérence « ancré »</h3>
-
-<p>Pendant plusieurs versions, le moteur JavaScript de Firefox, SpiderMonkey, avait un bug qui entraînait des correspondances invalides lorsqu'étaient utilisés le marqueur d'adhérence et le symbole <code>^</code> dans l'expression rationnelle. Ce bug est apparu peu après Firefox 3.6. Afin d'éviter ce bug, la spécification ES2015 indique spécifiquement que, lorsque le marqueur <code>y</code> est utilisé avec un motif commençant par <code>^</code>, ce dernier doit correspondre au début de la chaine (ou, si <code>multiline</code> vaut <code>true</code>, au début de la ligne). Les exemples qui suivent illustrent le comportement correct :</p>
-
-<pre class="brush: js">var regex = /^foo/y;
-regex.lastIndex = 2; // désactive la correspondance au début
-regex.test("..foo"); // false
-
-var regex2 = /^foo/my;
-regex2.lastIndex = 2;
-regex2.test("..foo"); // false
-regex2.lastIndex = 2;
-regex2.test(".\nfoo"); // true
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Etat</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-get-regexp.prototype.sticky', 'RegExp.prototype.sticky')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-get-regexp.prototype.sticky', 'RegExp.prototype.sticky')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.RegExp.sticky")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("RegExp.prototype.global")}}</li>
- <li>{{jsxref("RegExp.prototype.ignoreCase")}}</li>
- <li>{{jsxref("RegExp.prototype.lastIndex")}}</li>
- <li>{{jsxref("RegExp.prototype.multiline")}}</li>
- <li>{{jsxref("RegExp.prototype.source")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/regexp/sticky/index.md b/files/fr/web/javascript/reference/global_objects/regexp/sticky/index.md
new file mode 100644
index 0000000000..eb5c5a2b52
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/regexp/sticky/index.md
@@ -0,0 +1,75 @@
+---
+title: RegExp.prototype.sticky
+slug: Web/JavaScript/Reference/Global_Objects/RegExp/sticky
+tags:
+  - ECMAScript 2015
+  - Expressions rationnelles
+  - JavaScript
+  - Propriété
+  - Prototype
+  - Reference
+  - RegExp
+translation_of: Web/JavaScript/Reference/Global_Objects/RegExp/sticky
+original_slug: Web/JavaScript/Reference/Objets_globaux/RegExp/sticky
+---
+{{JSRef}}
+
+La propriété **`sticky`** (adhérante) permet de déterminer si la recherche s'effectue uniquement à partir de l'indice {{jsxref("RegExp.lastIndex", "lastIndex")}} lié à l'expression rationnelle ou non). `sticky` est une propriété accessible en lecture seule, rattachée à l'instance.
+
+{{EmbedInteractiveExample("pages/js/regexp-prototype-sticky.html")}}{{js_property_attributes(0,0,1)}}
+
+## Description
+
+La propriété `sticky` est un booléen qui vaut `true` si le marqueur (_flag_) "`y`" a été utilisé, `false` sinon. Ce marqueur indique que les correspondances ne sont recherchées qu'à partir de l'indice {{jsxref("RegExp.lastIndex", "lastIndex")}} au niveau de la chaîne de caractères (les correspondances à partir des autres positions ne seront pas trouvées). Lorsqu'une expression rationnelle qui utilise le marqueur `sticky` **et** le marqueur `global` ignorera le marqueur `global`.
+
+La propriété `sticky` ne peut pas être modifiée directement. Elle est uniquement en lecture seule.
+
+## Exemples
+
+### Utiliser une expression rationnelle avec le _flag_ _sticky_
+
+```js
+var str = '#toto#';
+var regex = /toto/y;
+
+regex.lastIndex = 1;
+regex.test(str); // true
+regex.lastIndex = 5;
+regex.test(str); // false (lastIndex est pris en compte avec sticky)
+regex.lastIndex; // 0 (on rénitialise après un échec)
+```
+
+### Marqueur d'adhérence « ancré »
+
+Pendant plusieurs versions, le moteur JavaScript de Firefox, SpiderMonkey, avait un bug qui entraînait des correspondances invalides lorsqu'étaient utilisés le marqueur d'adhérence et le symbole `^` dans l'expression rationnelle. Ce bug est apparu peu après Firefox 3.6. Afin d'éviter ce bug, la spécification ES2015 indique spécifiquement que, lorsque le marqueur `y` est utilisé avec un motif commençant par `^`, ce dernier doit correspondre au début de la chaine (ou, si `multiline` vaut `true`, au début de la ligne). Les exemples qui suivent illustrent le comportement correct :
+
+```js
+var regex = /^foo/y;
+regex.lastIndex = 2; // désactive la correspondance au début
+regex.test("..foo"); // false
+
+var regex2 = /^foo/my;
+regex2.lastIndex = 2;
+regex2.test("..foo"); // false
+regex2.lastIndex = 2;
+regex2.test(".\nfoo"); // true
+```
+
+## Spécifications
+
+| Spécification                                                                                                        | Etat                         | Commentaires         |
+| -------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName('ES2015', '#sec-get-regexp.prototype.sticky', 'RegExp.prototype.sticky')}}     | {{Spec2('ES2015')}}     | Définition initiale. |
+| {{SpecName('ESDraft', '#sec-get-regexp.prototype.sticky', 'RegExp.prototype.sticky')}} | {{Spec2('ESDraft')}} |                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.RegExp.sticky")}}
+
+## Voir aussi
+
+- {{jsxref("RegExp.prototype.global")}}
+- {{jsxref("RegExp.prototype.ignoreCase")}}
+- {{jsxref("RegExp.prototype.lastIndex")}}
+- {{jsxref("RegExp.prototype.multiline")}}
+- {{jsxref("RegExp.prototype.source")}}
diff --git a/files/fr/web/javascript/reference/global_objects/regexp/test/index.html b/files/fr/web/javascript/reference/global_objects/regexp/test/index.html
deleted file mode 100644
index 039407032c..0000000000
--- a/files/fr/web/javascript/reference/global_objects/regexp/test/index.html
+++ /dev/null
@@ -1,135 +0,0 @@
----
-title: RegExp.prototype.test()
-slug: Web/JavaScript/Reference/Global_Objects/RegExp/test
-tags:
-  - JavaScript
-  - Méthode
-  - Prototype
-  - Reference
-  - RegExp
-translation_of: Web/JavaScript/Reference/Global_Objects/RegExp/test
-original_slug: Web/JavaScript/Reference/Objets_globaux/RegExp/test
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <code><strong>test()</strong></code> vérifie s'il y a une correspondance entre un texte et une expression rationnelle. Elle retourne <code>true</code> en cas de succès et <code>false</code> dans le cas contraire.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/regexp-prototype-test.html", "taller")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox notranslate"><var>regexObj</var>.test(<var>chaîne</var>)</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>chaîne</code></dt>
- <dd>La chaîne de caractères qu'on souhaite comparer à l'expression rationnelle.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Un booléen : <code>true</code> ou <code>false</code> selon qu'une correspondance a été trouvée entre la chaîne de caractères et la chaîne passée en argument.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>On utilisera <code>test()</code> dès qu'on souhaite savoir si une partie d'une chaîne de caractères correspond à une expression rationnelle (similaire à la méthode {{jsxref("String.prototype.search()")}}). Pour obtenir plus d'informations (mais une exécution moins rapide), on utilisera la méthode {{jsxref("RegExp.prototype.exec()", "exec()")}} (similaire à la méthode {{jsxref("String.prototype.match()")}}). Comme avec {{jsxref("RegExp.prototype.exec()", "exec()")}} (et même en combinant les deux), des appels successifs à <code>test()</code> sur une même instance d'une expression rationnelle permettent de rechercher après la dernière occurence. Cette méthode est différente de <code>search</code> car elle renvoie un booléen et non la position de la correspondance si elle est trouvée (ou <code>-1</code> sinon).</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Utiliser_test">Utiliser <code>test()</code></h3>
-
-<p>Voici un exemple simple qui illustre comment détecter si la chaîne <code>coucou</code> est contenue au début d'une chaîne :</p>
-
-<pre class="brush: js notranslate">const chaine = "coucou le monde !";
-const resultat = /^coucou/.test(chaine);
-console.log(resultat); // true
-</pre>
-
-<p>L'exemple ci-dessous affiche un message qui dépend du succès du test :</p>
-
-<pre class="brush: js notranslate">function testinput(regex, chaine){
-    var midstring;
-    if (regex.test(chaine)) {
-        midstring = " contient ";
-    } else {
-        midstring = " ne contient pas ";
-    }
-    console.log(str + midstring + re.source);
-}
-
-testinput(/^coucou/, "coucou le monde"); // coucou le monde contient coucou
-testinput(/^coucou/, "salut le monde") // salut le monde ne contient pas coucou
-</pre>
-
-<h3 id="Utiliser_test_avec_le_marqueur_global_g">Utiliser <code>test()</code> avec le marqueur global (<code>/g</code>)</h3>
-
-<p>Si l'expression rationnelle utilise le marqueur global (<code>g</code>), la méthode <code>test()</code> avancera la propriété {{jsxref("RegExp.lastIndex", "lastIndex")}} associée à l'expression rationnelle. Ainsi, si on utilise <code>test()</code> ensuite, la recherche commencera à partir de la nouvelle valeur de <code>lastIndex</code> (de même {{jsxref("RegExp.prototype.exec()","exec()")}} fera également avancer la propriété <code>lastIndex</code>). On notera que la propriété <code>lastIndex</code> ne sera pas réinitialisée si la recherche est effectuée sur une autre chaîne de caractères.</p>
-
-<pre class="brush: js notranslate">var regex = /toto/g;
-
-// regex.lastIndex se situe à 0
-regex.test("toto"); // true
-
-// regex.lastIndex se situe désormais à 4
-regex.test("toto"); // false
-</pre>
-
-<p>Avec le même mécanisme, on peut utiliser une boucle pour compter le nombre de mots contenus dans une chaîne de caractères</p>
-
-<pre class="brush: js notranslate">function compterMots(texte) {
-  for (var regex = /\w+/g, nbMots = 0; regex.test(texte); nbMots++);
-  return nbMots;
-}
-
-console.log(compterMots("Ah que coucou Bob")); // 4
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('ES3')}}</td>
-   <td>{{Spec2('ES3')}}</td>
-   <td>Définition initiale. Implémentée avec JavaScript 1.2.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-15.10.6.3', 'RegExp.test')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-regexp.prototype.test', 'RegExp.test')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-regexp.prototype.test', 'RegExp.test')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.RegExp.test")}}</p>
-
-<h2 id="Notes_spécifiques_à_Firefox">Notes spécifiques à Firefox</h2>
-
-<p>Pour les versions antérieures à Firefox 8.0, l'implémentation de <code>test()</code> était erronée. Quand la méthode était appelée sans aucun paramètre, elle effectuait son test par rapport à la dernière entrée (la propriété <code>RegExp.input</code>) et non par rapport à la chaîne <code>"undefined"</code>. Ce comportement a été corrigé  ; désormais <code>/undefined/.test()</code> retourne bien <code>true</code> au lieu d'une erreur.</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>Le chapitre sur <a href="/fr/docs/Web/JavaScript/Guide/Expressions_régulières">les expressions rationnelles</a> du <a href="/fr/docs/Web/JavaScript/Guide">guide JavaScript</a></li>
- <li>{{jsxref("RegExp")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/regexp/test/index.md b/files/fr/web/javascript/reference/global_objects/regexp/test/index.md
new file mode 100644
index 0000000000..776fc120b3
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/regexp/test/index.md
@@ -0,0 +1,110 @@
+---
+title: RegExp.prototype.test()
+slug: Web/JavaScript/Reference/Global_Objects/RegExp/test
+tags:
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - RegExp
+translation_of: Web/JavaScript/Reference/Global_Objects/RegExp/test
+original_slug: Web/JavaScript/Reference/Objets_globaux/RegExp/test
+---
+{{JSRef}}
+
+La méthode **`test()`** vérifie s'il y a une correspondance entre un texte et une expression rationnelle. Elle retourne `true` en cas de succès et `false` dans le cas contraire.
+
+{{EmbedInteractiveExample("pages/js/regexp-prototype-test.html", "taller")}}
+
+## Syntaxe
+
+    regexObj.test(chaîne)
+
+### Paramètres
+
+- `chaîne`
+  - : La chaîne de caractères qu'on souhaite comparer à l'expression rationnelle.
+
+### Valeur de retour
+
+Un booléen : `true` ou `false` selon qu'une correspondance a été trouvée entre la chaîne de caractères et la chaîne passée en argument.
+
+## Description
+
+On utilisera `test()` dès qu'on souhaite savoir si une partie d'une chaîne de caractères correspond à une expression rationnelle (similaire à la méthode {{jsxref("String.prototype.search()")}}). Pour obtenir plus d'informations (mais une exécution moins rapide), on utilisera la méthode {{jsxref("RegExp.prototype.exec()", "exec()")}} (similaire à la méthode {{jsxref("String.prototype.match()")}}). Comme avec {{jsxref("RegExp.prototype.exec()", "exec()")}} (et même en combinant les deux), des appels successifs à `test()` sur une même instance d'une expression rationnelle permettent de rechercher après la dernière occurence. Cette méthode est différente de `search` car elle renvoie un booléen et non la position de la correspondance si elle est trouvée (ou `-1` sinon).
+
+## Exemples
+
+### Utiliser `test()`
+
+Voici un exemple simple qui illustre comment détecter si la chaîne `coucou` est contenue au début d'une chaîne :
+
+```js
+const chaine = "coucou le monde !";
+const resultat = /^coucou/.test(chaine);
+console.log(resultat); // true
+```
+
+L'exemple ci-dessous affiche un message qui dépend du succès du test :
+
+```js
+function testinput(regex, chaine){
+    var midstring;
+    if (regex.test(chaine)) {
+        midstring = " contient ";
+    } else {
+        midstring = " ne contient pas ";
+    }
+    console.log(str + midstring + re.source);
+}
+
+testinput(/^coucou/, "coucou le monde"); // coucou le monde contient coucou
+testinput(/^coucou/, "salut le monde") // salut le monde ne contient pas coucou
+```
+
+### Utiliser `test()` avec le marqueur global (`/g`)
+
+Si l'expression rationnelle utilise le marqueur global (`g`), la méthode `test()` avancera la propriété {{jsxref("RegExp.lastIndex", "lastIndex")}} associée à l'expression rationnelle. Ainsi, si on utilise `test()` ensuite, la recherche commencera à partir de la nouvelle valeur de `lastIndex` (de même {{jsxref("RegExp.prototype.exec()","exec()")}} fera également avancer la propriété `lastIndex`). On notera que la propriété `lastIndex` ne sera pas réinitialisée si la recherche est effectuée sur une autre chaîne de caractères.
+
+```js
+var regex = /toto/g;
+
+// regex.lastIndex se situe à 0
+regex.test("toto"); // true
+
+// regex.lastIndex se situe désormais à 4
+regex.test("toto"); // false
+```
+
+Avec le même mécanisme, on peut utiliser une boucle pour compter le nombre de mots contenus dans une chaîne de caractères
+
+```js
+function compterMots(texte) {
+  for (var regex = /\w+/g, nbMots = 0; regex.test(texte); nbMots++);
+  return nbMots;
+}
+
+console.log(compterMots("Ah que coucou Bob")); // 4
+```
+
+## Spécifications
+
+| Spécification                                                                                | État                         | Commentaires                                          |
+| -------------------------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- |
+| {{SpecName('ES3')}}                                                                     | {{Spec2('ES3')}}         | Définition initiale. Implémentée avec JavaScript 1.2. |
+| {{SpecName('ES5.1', '#sec-15.10.6.3', 'RegExp.test')}}                     | {{Spec2('ES5.1')}}     |                                                       |
+| {{SpecName('ES6', '#sec-regexp.prototype.test', 'RegExp.test')}}         | {{Spec2('ES6')}}         |                                                       |
+| {{SpecName('ESDraft', '#sec-regexp.prototype.test', 'RegExp.test')}} | {{Spec2('ESDraft')}} |                                                       |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.RegExp.test")}}
+
+## Notes spécifiques à Firefox
+
+Pour les versions antérieures à Firefox 8.0, l'implémentation de `test()` était erronée. Quand la méthode était appelée sans aucun paramètre, elle effectuait son test par rapport à la dernière entrée (la propriété `RegExp.input`) et non par rapport à la chaîne `"undefined"`. Ce comportement a été corrigé  ; désormais `/undefined/.test()` retourne bien `true` au lieu d'une erreur.
+
+## Voir aussi
+
+- Le chapitre sur [les expressions rationnelles](/fr/docs/Web/JavaScript/Guide/Expressions_régulières) du [guide JavaScript](/fr/docs/Web/JavaScript/Guide)
+- {{jsxref("RegExp")}}
diff --git a/files/fr/web/javascript/reference/global_objects/regexp/tosource/index.html b/files/fr/web/javascript/reference/global_objects/regexp/tosource/index.html
deleted file mode 100644
index ddd032b9f2..0000000000
--- a/files/fr/web/javascript/reference/global_objects/regexp/tosource/index.html
+++ /dev/null
@@ -1,56 +0,0 @@
----
-title: RegExp.prototype.toSource()
-slug: Web/JavaScript/Reference/Global_Objects/RegExp/toSource
-tags:
-  - JavaScript
-  - Méthode
-  - Non-standard
-  - Prototype
-  - Reference
-  - RegExp
-translation_of: Web/JavaScript/Reference/Global_Objects/RegExp/toSource
-original_slug: Web/JavaScript/Reference/Objets_globaux/RegExp/toSource
----
-<div>{{JSRef}}{{non-standard_header}}</div>
-
-<p>La méthode <code><strong>toSource()</strong></code> permet de renvoyer une chaîne de caractères représentant le code source de l'objet.</p>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>objetRegExp</var>.toSource()
-</pre>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Une chaîne de caractères représentant le code source de l'objet {{jsxref("RegExp")}}.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>La méthode <code>toSource</code> renvoie les valeurs suivantes :</p>
-
-<ul>
- <li>Pour l'objet natif {{jsxref("RegExp")}}, <code>toSource()</code> renvoie la chaîne de caractères suivante, indiquant que le code source n'est pas disponible :
-
-  <pre class="brush: js">function RegExp() {
-    [native code]
-}
-</pre>
- </li>
- <li>Pour les instances de {{jsxref("RegExp")}}, <code>toSource()</code> renvoie une chaîne de caractères indiquant le code source de l'objet.</li>
-</ul>
-
-<p>Cette méthode est généralement utilisée de façon interne au moteur JavaScript, elle n'est pas censée être utilisée dans du code JavaScript classique.</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<p>Cette méthode ne fait partie d'aucun standard. Elle a été implémentée avec JavaScript 1.3.</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.RegExp.toSource")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Object.prototype.toSource()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/regexp/tosource/index.md b/files/fr/web/javascript/reference/global_objects/regexp/tosource/index.md
new file mode 100644
index 0000000000..255db3a16a
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/regexp/tosource/index.md
@@ -0,0 +1,52 @@
+---
+title: RegExp.prototype.toSource()
+slug: Web/JavaScript/Reference/Global_Objects/RegExp/toSource
+tags:
+  - JavaScript
+  - Méthode
+  - Non-standard
+  - Prototype
+  - Reference
+  - RegExp
+translation_of: Web/JavaScript/Reference/Global_Objects/RegExp/toSource
+original_slug: Web/JavaScript/Reference/Objets_globaux/RegExp/toSource
+---
+{{JSRef}}{{non-standard_header}}
+
+La méthode **`toSource()`** permet de renvoyer une chaîne de caractères représentant le code source de l'objet.
+
+## Syntaxe
+
+    objetRegExp.toSource()
+
+### Valeur de retour
+
+Une chaîne de caractères représentant le code source de l'objet {{jsxref("RegExp")}}.
+
+## Description
+
+La méthode `toSource` renvoie les valeurs suivantes :
+
+- Pour l'objet natif {{jsxref("RegExp")}}, `toSource()` renvoie la chaîne de caractères suivante, indiquant que le code source n'est pas disponible :
+
+  ```js
+    function RegExp() {
+        [native code]
+    }
+    ```
+
+- Pour les instances de {{jsxref("RegExp")}}, `toSource()` renvoie une chaîne de caractères indiquant le code source de l'objet.
+
+Cette méthode est généralement utilisée de façon interne au moteur JavaScript, elle n'est pas censée être utilisée dans du code JavaScript classique.
+
+## Spécifications
+
+Cette méthode ne fait partie d'aucun standard. Elle a été implémentée avec JavaScript 1.3.
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.RegExp.toSource")}}
+
+## Voir aussi
+
+- {{jsxref("Object.prototype.toSource()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/regexp/tostring/index.html b/files/fr/web/javascript/reference/global_objects/regexp/tostring/index.html
deleted file mode 100644
index d5f3e52afb..0000000000
--- a/files/fr/web/javascript/reference/global_objects/regexp/tostring/index.html
+++ /dev/null
@@ -1,93 +0,0 @@
----
-title: RegExp.prototype.toString()
-slug: Web/JavaScript/Reference/Global_Objects/RegExp/toString
-tags:
-  - JavaScript
-  - Méthode
-  - Prototype
-  - Reference
-  - RegExp
-translation_of: Web/JavaScript/Reference/Global_Objects/RegExp/toString
-original_slug: Web/JavaScript/Reference/Objets_globaux/RegExp/toString
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <code><strong>toString()</strong></code> renvoie une chaîne de caractères représentant l'expression rationnelle.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/regexp-prototype-tostring.html", "taller")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>regexObj</var>.toString();</pre>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Une chaîne de caractères représentant l'expression rationnelle appelante.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>L'objet {{jsxref("RegExp")}} surcharge la méthode <code>toString</code> de l'objet {{jsxref("Object")}}. Il n'hérite donc pas de {{jsxref("Object.prototype.toString()")}}. Pour les objets <code>RegExp</code>, la méthode <code>toString()</code> renvoie une représentation de l'expression rationnelle sous la forme d'une chaîne de caractères.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Utiliser_toString()">Utiliser <code>toString()</code></h3>
-
-<p>L'exemple qui suit affiche la chaîne correspondant à la valeur de l'objet {{jsxref("Global_Objects/RegExp", "RegExp")}} :</p>
-
-<pre class="brush: js">var maRegExp = new RegExp("a+b+c");
-console.log(maRegExp.toString());  // affiche "/a+b+c/"
-
-var toto = new RegExp("truc", "g");
-console.log(toto.toString());      // affiche "/truc/g"
-</pre>
-
-<h3 id="Les_expressions_ratonnelles_vides_et_l'échappement">Les expressions ratonnelles vides et l'échappement</h3>
-
-<p>À partir d'ECMAScript 5, la méthode renvoie la chaîne <code>"(?:)"</code> pour les expressions vides. De plus, les fins de lignes (telles que "\n") sont désormais échappées.</p>
-
-<pre class="brush: js">new RegExp().toString(); // "(?:)"
-
-new RegExp('\n').toString() === "/\n/";  // true avant ES5
-new RegExp('\n').toString() === "/\\n/"; // true à partir d'ES5</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES3')}}</td>
-   <td>{{Spec2('ES3')}}</td>
-   <td>Définition initiale. Implémentée avec JavaScript 1.1.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-15.9.5.2', 'RegExp.prototype.toString')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td><code>source</code> renvoie désormais "(?:)" (et non "") pour les expressions vides. La définition du comportement pour les échappements a été ajoutée.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-regexp.prototype.tostring', 'RegExp.prototype.toString')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-regexp.prototype.tostring', 'RegExp.prototype.toString')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.RegExp.toString")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Object.prototype.toString()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/regexp/tostring/index.md b/files/fr/web/javascript/reference/global_objects/regexp/tostring/index.md
new file mode 100644
index 0000000000..6b2a2e6413
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/regexp/tostring/index.md
@@ -0,0 +1,71 @@
+---
+title: RegExp.prototype.toString()
+slug: Web/JavaScript/Reference/Global_Objects/RegExp/toString
+tags:
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - RegExp
+translation_of: Web/JavaScript/Reference/Global_Objects/RegExp/toString
+original_slug: Web/JavaScript/Reference/Objets_globaux/RegExp/toString
+---
+{{JSRef}}
+
+La méthode **`toString()`** renvoie une chaîne de caractères représentant l'expression rationnelle.
+
+{{EmbedInteractiveExample("pages/js/regexp-prototype-tostring.html", "taller")}}
+
+## Syntaxe
+
+    regexObj.toString();
+
+### Valeur de retour
+
+Une chaîne de caractères représentant l'expression rationnelle appelante.
+
+## Description
+
+L'objet {{jsxref("RegExp")}} surcharge la méthode `toString` de l'objet {{jsxref("Object")}}. Il n'hérite donc pas de {{jsxref("Object.prototype.toString()")}}. Pour les objets `RegExp`, la méthode `toString()` renvoie une représentation de l'expression rationnelle sous la forme d'une chaîne de caractères.
+
+## Exemples
+
+### Utiliser `toString()`
+
+L'exemple qui suit affiche la chaîne correspondant à la valeur de l'objet {{jsxref("Global_Objects/RegExp", "RegExp")}} :
+
+```js
+var maRegExp = new RegExp("a+b+c");
+console.log(maRegExp.toString());  // affiche "/a+b+c/"
+
+var toto = new RegExp("truc", "g");
+console.log(toto.toString());      // affiche "/truc/g"
+```
+
+### Les expressions ratonnelles vides et l'échappement
+
+À partir d'ECMAScript 5, la méthode renvoie la chaîne `"(?:)"` pour les expressions vides. De plus, les fins de lignes (telles que "\n") sont désormais échappées.
+
+```js
+new RegExp().toString(); // "(?:)"
+
+new RegExp('\n').toString() === "/\n/";  // true avant ES5
+new RegExp('\n').toString() === "/\\n/"; // true à partir d'ES5
+```
+
+## Spécifications
+
+| Spécification                                                                                                        | État                         | Commentaires                                                                                                                                 |
+| -------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------- |
+| {{SpecName('ES3')}}                                                                                             | {{Spec2('ES3')}}         | Définition initiale. Implémentée avec JavaScript 1.1.                                                                                        |
+| {{SpecName('ES5.1', '#sec-15.9.5.2', 'RegExp.prototype.toString')}}                             | {{Spec2('ES5.1')}}     | `source` renvoie désormais "(?:)" (et non "") pour les expressions vides. La définition du comportement pour les échappements a été ajoutée. |
+| {{SpecName('ES6', '#sec-regexp.prototype.tostring', 'RegExp.prototype.toString')}}         | {{Spec2('ES6')}}         |                                                                                                                                              |
+| {{SpecName('ESDraft', '#sec-regexp.prototype.tostring', 'RegExp.prototype.toString')}} | {{Spec2('ESDraft')}} |                                                                                                                                              |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.RegExp.toString")}}
+
+## Voir aussi
+
+- {{jsxref("Object.prototype.toString()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/regexp/unicode/index.html b/files/fr/web/javascript/reference/global_objects/regexp/unicode/index.html
deleted file mode 100644
index a15009ce4e..0000000000
--- a/files/fr/web/javascript/reference/global_objects/regexp/unicode/index.html
+++ /dev/null
@@ -1,73 +0,0 @@
----
-title: RegExp.prototype.unicode
-slug: Web/JavaScript/Reference/Global_Objects/RegExp/unicode
-tags:
-  - ECMAScript 2015
-  - JavaScript
-  - Propriété
-  - Prototype
-  - Reference
-  - RegExp
-  - Regular Expressions
-translation_of: Web/JavaScript/Reference/Global_Objects/RegExp/unicode
-original_slug: Web/JavaScript/Reference/Objets_globaux/RegExp/unicode
----
-<div>{{JSRef}}</div>
-
-<p>La propriété <strong><code>unicode</code></strong> indique si le drapeau "<code>u</code>" a été utilisé avec l'expression rationnelle. <code>unicode</code> est une propriété en lecture seule et liée à une instance d'expression rationnelle.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/regexp-prototype-unicode.html", "taller")}}</div>
-
-
-
-<div>{{js_property_attributes(0, 0, 1)}}</div>
-
-<h2 id="Description">Description</h2>
-
-<p>La valeur d'<code>unicode</code> est un {{jsxref("Boolean")}} et vaut <code>true</code> si le drapeau "<code>u</code>" a été utilisé, sinon <code>false</code>. Le drapeau "<code>u</code>" permet d'activer les fonctionnalités liées à Unicode. En utilisant le drapeau "u" toute séquence d'échappement représentant un codet Unicode sera interprétée comme telle.</p>
-
-<p>Cette propriété ne peut pas être modifiée directement.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<pre class="brush: js">var regex = new RegExp('\u{61}', 'u');
-
-console.log(regex.unicode); // true
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-get-regexp.prototype.unicode', 'RegExp.prototype.unicode')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-get-regexp.prototype.unicode', 'RegExp.prototype.unicode')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.RegExp.unicode")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("RegExp.lastIndex")}}</li>
- <li>{{jsxref("RegExp.prototype.global")}}</li>
- <li>{{jsxref("RegExp.prototype.ignoreCase")}}</li>
- <li>{{jsxref("RegExp.prototype.multiline")}}</li>
- <li>{{jsxref("RegExp.prototype.source")}}</li>
- <li>{{jsxref("RegExp.prototype.sticky")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/regexp/unicode/index.md b/files/fr/web/javascript/reference/global_objects/regexp/unicode/index.md
new file mode 100644
index 0000000000..671fb82624
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/regexp/unicode/index.md
@@ -0,0 +1,53 @@
+---
+title: RegExp.prototype.unicode
+slug: Web/JavaScript/Reference/Global_Objects/RegExp/unicode
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Propriété
+  - Prototype
+  - Reference
+  - RegExp
+  - Regular Expressions
+translation_of: Web/JavaScript/Reference/Global_Objects/RegExp/unicode
+original_slug: Web/JavaScript/Reference/Objets_globaux/RegExp/unicode
+---
+{{JSRef}}
+
+La propriété **`unicode`** indique si le drapeau "`u`" a été utilisé avec l'expression rationnelle. `unicode` est une propriété en lecture seule et liée à une instance d'expression rationnelle.
+
+{{EmbedInteractiveExample("pages/js/regexp-prototype-unicode.html", "taller")}}{{js_property_attributes(0, 0, 1)}}
+
+## Description
+
+La valeur d'`unicode` est un {{jsxref("Boolean")}} et vaut `true` si le drapeau "`u`" a été utilisé, sinon `false`. Le drapeau "`u`" permet d'activer les fonctionnalités liées à Unicode. En utilisant le drapeau "u" toute séquence d'échappement représentant un codet Unicode sera interprétée comme telle.
+
+Cette propriété ne peut pas être modifiée directement.
+
+## Exemples
+
+```js
+var regex = new RegExp('\u{61}', 'u');
+
+console.log(regex.unicode); // true
+```
+
+## Spécifications
+
+| Spécification                                                                                                        | État                         | Commentaires         |
+| -------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName('ES2015', '#sec-get-regexp.prototype.unicode', 'RegExp.prototype.unicode')}} | {{Spec2('ES2015')}}     | Définition initiale. |
+| {{SpecName('ESDraft', '#sec-get-regexp.prototype.unicode', 'RegExp.prototype.unicode')}} | {{Spec2('ESDraft')}} |                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.RegExp.unicode")}}
+
+## Voir aussi
+
+- {{jsxref("RegExp.lastIndex")}}
+- {{jsxref("RegExp.prototype.global")}}
+- {{jsxref("RegExp.prototype.ignoreCase")}}
+- {{jsxref("RegExp.prototype.multiline")}}
+- {{jsxref("RegExp.prototype.source")}}
+- {{jsxref("RegExp.prototype.sticky")}}
diff --git a/files/fr/web/javascript/reference/global_objects/set/@@iterator/index.html b/files/fr/web/javascript/reference/global_objects/set/@@iterator/index.html
deleted file mode 100644
index ee03e5c7df..0000000000
--- a/files/fr/web/javascript/reference/global_objects/set/@@iterator/index.html
+++ /dev/null
@@ -1,89 +0,0 @@
----
-title: Set.prototype[@@iterator]()
-slug: Web/JavaScript/Reference/Global_Objects/Set/@@iterator
-tags:
-  - ECMAScript 2015
-  - Iterator
-  - JavaScript
-  - Méthode
-  - Prototype
-  - Reference
-  - set
-translation_of: Web/JavaScript/Reference/Global_Objects/Set/@@iterator
-original_slug: Web/JavaScript/Reference/Objets_globaux/Set/@@iterator
----
-<div>{{JSRef}}</div>
-
-<p>La valeur initiale de la propriété <code><strong>@@iterator</strong></code> est le même objet fonction que la valeur initiale de la propriété {{jsxref("Set.prototype.values()", "Set.prototype.values")}}.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/set-prototype-@@iterator.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>monSet</var>[Symbol.iterator]</pre>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>La fonction associée au symbole <code>@@iterator</code> de l'objet. Par défaut, c'est la fonction {{jsxref("Set.prototype.values()","values()")}}.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Utiliser_iterator()">Utiliser <code>[@@iterator]()</code></h3>
-
-<pre class="brush:js">const monSet = new Set();
-monSet.add("0");
-monSet.add(1);
-monSet.add({});
-
-const setIter = monSet[Symbol.iterator]();
-
-console.log(setIter.next().value); // "0"
-console.log(setIter.next().value); // 1
-console.log(setIter.next().value); // {}
-</pre>
-
-<h3 id="Utiliser_iterator()_avec_une_boucle_for..of">Utiliser <code>[@@iterator]()</code> avec une boucle <code>for..of</code></h3>
-
-<pre class="brush:js">const monSet= new Set();
-monSet.add("0");
-monSet.add(1);
-monSet.add({});
-
-for (const v of monSet) {
-  console.log(v);
-}
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-set.prototype-@@iterator', 'Set.prototype[@@iterator]')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-set.prototype-@@iterator', 'Set.prototype[@@iterator]')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Set.@@iterator")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Set.prototype.entries()")}}</li>
- <li>{{jsxref("Set.prototype.values","Set.prototype.keys()")}}</li>
- <li>{{jsxref("Set.prototype.values()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/set/@@iterator/index.md b/files/fr/web/javascript/reference/global_objects/set/@@iterator/index.md
new file mode 100644
index 0000000000..d420a2b5df
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/set/@@iterator/index.md
@@ -0,0 +1,74 @@
+---
+title: Set.prototype[@@iterator]()
+slug: Web/JavaScript/Reference/Global_Objects/Set/@@iterator
+tags:
+  - ECMAScript 2015
+  - Iterator
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - set
+translation_of: Web/JavaScript/Reference/Global_Objects/Set/@@iterator
+original_slug: Web/JavaScript/Reference/Objets_globaux/Set/@@iterator
+---
+{{JSRef}}
+
+La valeur initiale de la propriété **`@@iterator`** est le même objet fonction que la valeur initiale de la propriété {{jsxref("Set.prototype.values()", "Set.prototype.values")}}.
+
+{{EmbedInteractiveExample("pages/js/set-prototype-@@iterator.html")}}
+
+## Syntaxe
+
+    monSet[Symbol.iterator]
+
+### Valeur de retour
+
+La fonction associée au symbole `@@iterator` de l'objet. Par défaut, c'est la fonction {{jsxref("Set.prototype.values()","values()")}}.
+
+## Exemples
+
+### Utiliser `[@@iterator]()`
+
+```js
+const monSet = new Set();
+monSet.add("0");
+monSet.add(1);
+monSet.add({});
+
+const setIter = monSet[Symbol.iterator]();
+
+console.log(setIter.next().value); // "0"
+console.log(setIter.next().value); // 1
+console.log(setIter.next().value); // {}
+```
+
+### Utiliser `[@@iterator]()` avec une boucle `for..of`
+
+```js
+const monSet= new Set();
+monSet.add("0");
+monSet.add(1);
+monSet.add({});
+
+for (const v of monSet) {
+  console.log(v);
+}
+```
+
+## Spécifications
+
+| Spécification                                                                                                    | État                         | Commentaires         |
+| ---------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName('ES2015', '#sec-set.prototype-@@iterator', 'Set.prototype[@@iterator]')}} | {{Spec2('ES2015')}}     | Définition initiale. |
+| {{SpecName('ESDraft', '#sec-set.prototype-@@iterator', 'Set.prototype[@@iterator]')}} | {{Spec2('ESDraft')}} |                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Set.@@iterator")}}
+
+## Voir aussi
+
+- {{jsxref("Set.prototype.entries()")}}
+- {{jsxref("Set.prototype.values","Set.prototype.keys()")}}
+- {{jsxref("Set.prototype.values()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/set/@@species/index.html b/files/fr/web/javascript/reference/global_objects/set/@@species/index.html
deleted file mode 100644
index 75ca5ccc31..0000000000
--- a/files/fr/web/javascript/reference/global_objects/set/@@species/index.html
+++ /dev/null
@@ -1,71 +0,0 @@
----
-title: get Set[@@species]
-slug: Web/JavaScript/Reference/Global_Objects/Set/@@species
-tags:
-  - ECMAScript 2015
-  - JavaScript
-  - Propriété
-  - Reference
-  - set
-translation_of: Web/JavaScript/Reference/Global_Objects/Set/@@species
-original_slug: Web/JavaScript/Reference/Objets_globaux/Set/@@species
----
-<div>{{JSRef}}</div>
-
-<p><code><strong>Set[@@species]</strong></code> renvoie le constructeur <code>Set</code>.</p>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">Set[Symbol.species]
-</pre>
-
-<h2 id="Description">Description</h2>
-
-<p>L'accesseur <code>species</code> renvoie le constructeur par défaut pour les objets <code>Set</code>. Les constructeurs pour les classes filles peuvent surcharger cette propriété afin de modifier le constructeur utilisé lors de l'affectation.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<p>La propriété <code>species</code> renvoie la fonction utilisée comme constructeur par défaut, dans le cas des objets <code>Set</code>, c'est le constructeur <code>Set</code> :</p>
-
-<pre class="brush: js">Set[Symbol.species]; // function Set()</pre>
-
-<p>Pour les objets dérivés (par exemple une classe <code>MonSet</code> que vous auriez construite), la propriété species pour <code>MonSet</code> sera le constructeur <code>MonSet</code>. Cependant, si vous souhaitez surcharger ce comportement afin de renvoyer le constructeur <code>Set</code> dans les méthodes des classes dérivées, vous pourrez utiliser :</p>
-
-<pre class="brush: js">class MonSet extends Set
-  // On surcharge la propriété species de MonSet
-  // avec le constructeur Set de la classe parente
-  static get [Symbol.species()]() { return Set;}
-}</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-get-set-@@species', 'get Set [ @@species ]')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-get-set-@@species', 'get Set [ @@species ]')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Set.@@species")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Set")}}</li>
- <li>{{jsxref("Symbol.species")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/set/@@species/index.md b/files/fr/web/javascript/reference/global_objects/set/@@species/index.md
new file mode 100644
index 0000000000..aff8a084ae
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/set/@@species/index.md
@@ -0,0 +1,57 @@
+---
+title: get Set[@@species]
+slug: Web/JavaScript/Reference/Global_Objects/Set/@@species
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Propriété
+  - Reference
+  - set
+translation_of: Web/JavaScript/Reference/Global_Objects/Set/@@species
+original_slug: Web/JavaScript/Reference/Objets_globaux/Set/@@species
+---
+{{JSRef}}
+
+**`Set[@@species]`** renvoie le constructeur `Set`.
+
+## Syntaxe
+
+    Set[Symbol.species]
+
+## Description
+
+L'accesseur `species` renvoie le constructeur par défaut pour les objets `Set`. Les constructeurs pour les classes filles peuvent surcharger cette propriété afin de modifier le constructeur utilisé lors de l'affectation.
+
+## Exemples
+
+La propriété `species` renvoie la fonction utilisée comme constructeur par défaut, dans le cas des objets `Set`, c'est le constructeur `Set` :
+
+```js
+Set[Symbol.species]; // function Set()
+```
+
+Pour les objets dérivés (par exemple une classe `MonSet` que vous auriez construite), la propriété species pour `MonSet` sera le constructeur `MonSet`. Cependant, si vous souhaitez surcharger ce comportement afin de renvoyer le constructeur `Set` dans les méthodes des classes dérivées, vous pourrez utiliser :
+
+```js
+class MonSet extends Set
+  // On surcharge la propriété species de MonSet
+  // avec le constructeur Set de la classe parente
+  static get [Symbol.species()]() { return Set;}
+}
+```
+
+## Spécifications
+
+| Spécification                                                                                        | État                         | Commentaires         |
+| ---------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName('ES2015', '#sec-get-set-@@species', 'get Set [ @@species ]')}}     | {{Spec2('ES2015')}}     | Définition initiale. |
+| {{SpecName('ESDraft', '#sec-get-set-@@species', 'get Set [ @@species ]')}} | {{Spec2('ESDraft')}} |                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Set.@@species")}}
+
+## Voir aussi
+
+- {{jsxref("Set")}}
+- {{jsxref("Symbol.species")}}
diff --git a/files/fr/web/javascript/reference/global_objects/set/add/index.html b/files/fr/web/javascript/reference/global_objects/set/add/index.html
deleted file mode 100644
index 7b834fe40f..0000000000
--- a/files/fr/web/javascript/reference/global_objects/set/add/index.html
+++ /dev/null
@@ -1,78 +0,0 @@
----
-title: Set.prototype.add()
-slug: Web/JavaScript/Reference/Global_Objects/Set/add
-tags:
-  - ECMAScript 2015
-  - JavaScript
-  - Méthode
-  - Prototype
-  - Reference
-  - set
-translation_of: Web/JavaScript/Reference/Global_Objects/Set/add
-original_slug: Web/JavaScript/Reference/Objets_globaux/Set/add
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <code><strong>add()</strong></code> permet d'ajouter un nouvel élément ayant une valeur donnée à un ensemble <code>Set</code>. Cette valeur sera ajoutée à la fin de l'objet <code>Set</code>.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/set-prototype-add.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>monSet</var>.add(<var>valeur</var>);</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>valeur</code></dt>
- <dd>Ce paramètre est obligatoire. La valeur de l'élément qu'on souhaite ajouter à l'objet <code>Set</code>.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>L'objet <code>Set</code> (ce qui permet de chaîner une suite d'instructions utilisant cette méthode).</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<pre class="brush: js">var monSet = new Set();
-
-monSet.add(1);
-monSet.add(5).add("du texte"); // ajouts en chaîne
-
-console.log(monSet);
-// Set [1, 5, "du texte"]
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-set.prototype.add', 'Set.prototype.add')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-set.prototype.add', 'Set.prototype.add')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Set.add")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Set")}}</li>
- <li>{{jsxref("Set.prototype.delete()")}}</li>
- <li>{{jsxref("Set.prototype.has()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/set/add/index.md b/files/fr/web/javascript/reference/global_objects/set/add/index.md
new file mode 100644
index 0000000000..bdddb11403
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/set/add/index.md
@@ -0,0 +1,60 @@
+---
+title: Set.prototype.add()
+slug: Web/JavaScript/Reference/Global_Objects/Set/add
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - set
+translation_of: Web/JavaScript/Reference/Global_Objects/Set/add
+original_slug: Web/JavaScript/Reference/Objets_globaux/Set/add
+---
+{{JSRef}}
+
+La méthode **`add()`** permet d'ajouter un nouvel élément ayant une valeur donnée à un ensemble `Set`. Cette valeur sera ajoutée à la fin de l'objet `Set`.
+
+{{EmbedInteractiveExample("pages/js/set-prototype-add.html")}}
+
+## Syntaxe
+
+    monSet.add(valeur);
+
+### Paramètres
+
+- `valeur`
+  - : Ce paramètre est obligatoire. La valeur de l'élément qu'on souhaite ajouter à l'objet `Set`.
+
+### Valeur de retour
+
+L'objet `Set` (ce qui permet de chaîner une suite d'instructions utilisant cette méthode).
+
+## Exemples
+
+```js
+var monSet = new Set();
+
+monSet.add(1);
+monSet.add(5).add("du texte"); // ajouts en chaîne
+
+console.log(monSet);
+// Set [1, 5, "du texte"]
+```
+
+## Spécifications
+
+| Spécification                                                                                | État                         | Commentaires         |
+| -------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName('ES2015', '#sec-set.prototype.add', 'Set.prototype.add')}} | {{Spec2('ES2015')}}     | Définition initiale. |
+| {{SpecName('ESDraft', '#sec-set.prototype.add', 'Set.prototype.add')}} | {{Spec2('ESDraft')}} |                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Set.add")}}
+
+## Voir aussi
+
+- {{jsxref("Set")}}
+- {{jsxref("Set.prototype.delete()")}}
+- {{jsxref("Set.prototype.has()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/set/clear/index.html b/files/fr/web/javascript/reference/global_objects/set/clear/index.html
deleted file mode 100644
index a82d07fca4..0000000000
--- a/files/fr/web/javascript/reference/global_objects/set/clear/index.html
+++ /dev/null
@@ -1,74 +0,0 @@
----
-title: Set.prototype.clear()
-slug: Web/JavaScript/Reference/Global_Objects/Set/clear
-tags:
-  - ECMAScript 2015
-  - JavaScript
-  - Méthode
-  - Prototype
-  - Reference
-  - set
-translation_of: Web/JavaScript/Reference/Global_Objects/Set/clear
-original_slug: Web/JavaScript/Reference/Objets_globaux/Set/clear
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <code><strong>clear()</strong></code> permet de retirer tous les éléments d'un ensemble <code>Set</code>.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/set-prototype-clear.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>monSet</var>.clear();</pre>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>{{jsxref("undefined")}}.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<pre class="brush: js">var monSet = new Set();
-monSet.add(1);
-monSet.add("toto");
-
-monSet.size;        // 2
-monSet.has("toto"); // true
-
-monSet.clear();
-
-monSet.size;       // 0
-monSet.has("truc")  // false
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-set.prototype.clear', 'Set.prototype.clear')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-set.prototype.clear', 'Set.prototype.clear')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Set.clear")}}</p>
-
-<h3 id="Voir_aussi">Voir aussi</h3>
-
-<ul>
- <li>{{jsxref("Set")}}</li>
- <li>{{jsxref("Set.prototype.delete()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/set/clear/index.md b/files/fr/web/javascript/reference/global_objects/set/clear/index.md
new file mode 100644
index 0000000000..9a5be9a488
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/set/clear/index.md
@@ -0,0 +1,58 @@
+---
+title: Set.prototype.clear()
+slug: Web/JavaScript/Reference/Global_Objects/Set/clear
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - set
+translation_of: Web/JavaScript/Reference/Global_Objects/Set/clear
+original_slug: Web/JavaScript/Reference/Objets_globaux/Set/clear
+---
+{{JSRef}}
+
+La méthode **`clear()`** permet de retirer tous les éléments d'un ensemble `Set`.
+
+{{EmbedInteractiveExample("pages/js/set-prototype-clear.html")}}
+
+## Syntaxe
+
+    monSet.clear();
+
+### Valeur de retour
+
+{{jsxref("undefined")}}.
+
+## Exemples
+
+```js
+var monSet = new Set();
+monSet.add(1);
+monSet.add("toto");
+
+monSet.size;        // 2
+monSet.has("toto"); // true
+
+monSet.clear();
+
+monSet.size;       // 0
+monSet.has("truc")  // false
+```
+
+## Spécifications
+
+| Spécification                                                                                        | État                         | Commentaires         |
+| ---------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName('ES2015', '#sec-set.prototype.clear', 'Set.prototype.clear')}}     | {{Spec2('ES2015')}}     | Définition initiale. |
+| {{SpecName('ESDraft', '#sec-set.prototype.clear', 'Set.prototype.clear')}} | {{Spec2('ESDraft')}} |                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Set.clear")}}
+
+### Voir aussi
+
+- {{jsxref("Set")}}
+- {{jsxref("Set.prototype.delete()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/set/delete/index.html b/files/fr/web/javascript/reference/global_objects/set/delete/index.html
deleted file mode 100644
index 1e89d36e0c..0000000000
--- a/files/fr/web/javascript/reference/global_objects/set/delete/index.html
+++ /dev/null
@@ -1,93 +0,0 @@
----
-title: Set.prototype.delete()
-slug: Web/JavaScript/Reference/Global_Objects/Set/delete
-tags:
-  - ECMAScript 2015
-  - JavaScript
-  - Méthode
-  - Prototype
-  - Reference
-  - set
-translation_of: Web/JavaScript/Reference/Global_Objects/Set/delete
-original_slug: Web/JavaScript/Reference/Objets_globaux/Set/delete
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <code><strong>delete()</strong></code> permet de retirer un élément donné d'un objet <code>Set</code>.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/set-prototype-delete.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>monSet</var>.delete(<var>valeur</var>);</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>valeur</code></dt>
- <dd>Ce paramètre est obligatoire. Il représente la valeur de l'élément qu'on souhaite retirer de l'objet <code>Set</code>.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p><code>true</code> si un élément de l'objet <code>Set</code> a été retiré lors de l'opération, <code>false</code> sinon.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Utiliser_la_méthode_delete()">Utiliser la méthode <code>delete()</code></h3>
-
-<pre class="brush: js">var monSet = new Set();
-monSet.add("toto");
-
-monSet.delete("truc"); // Renvoie false. Aucun élément "truc" n'a pu être supprimé.
-monSet.delete("toto"); // Renvoie true.  L'élément a pu être supprimé.
-
-monSet.has("toto");    // Renvoie false. L'élément "toto" ne fait plus partie de l'ensemble.
-</pre>
-
-<h3 id="Utiliser_delete()_avec_forEach()">Utiliser <code>delete()</code> avec <code>forEach()</code></h3>
-
-<pre class="brush: js">var objetSet = new Set();
-objetSet.add({x: 10, y: 20}); // On ajoute un nouvel objet dans l'ensemble
-objetSet.add({x: 20, y: 30}); // On ajoute un nouvel objet dans l'ensemble
-
-// On supprime les points de l'ensemble pour lesquels
-// x est supérieur à 10
-objetSet.forEach(function(point){
-  if(point.x &gt; 10){
-    objetSet.delete(point);
-  }
-});</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-set.prototype.delete', 'Set.prototype.delete')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-set.prototype.delete', 'Set.prototype.delete')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Set.delete")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Set")}}</li>
- <li>{{jsxref("Set.prototype.clear()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/set/delete/index.md b/files/fr/web/javascript/reference/global_objects/set/delete/index.md
new file mode 100644
index 0000000000..f888bc831f
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/set/delete/index.md
@@ -0,0 +1,77 @@
+---
+title: Set.prototype.delete()
+slug: Web/JavaScript/Reference/Global_Objects/Set/delete
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - set
+translation_of: Web/JavaScript/Reference/Global_Objects/Set/delete
+original_slug: Web/JavaScript/Reference/Objets_globaux/Set/delete
+---
+{{JSRef}}
+
+La méthode **`delete()`** permet de retirer un élément donné d'un objet `Set`.
+
+{{EmbedInteractiveExample("pages/js/set-prototype-delete.html")}}
+
+## Syntaxe
+
+    monSet.delete(valeur);
+
+### Paramètres
+
+- `valeur`
+  - : Ce paramètre est obligatoire. Il représente la valeur de l'élément qu'on souhaite retirer de l'objet `Set`.
+
+### Valeur de retour
+
+`true` si un élément de l'objet `Set` a été retiré lors de l'opération, `false` sinon.
+
+## Exemples
+
+### Utiliser la méthode `delete()`
+
+```js
+var monSet = new Set();
+monSet.add("toto");
+
+monSet.delete("truc"); // Renvoie false. Aucun élément "truc" n'a pu être supprimé.
+monSet.delete("toto"); // Renvoie true.  L'élément a pu être supprimé.
+
+monSet.has("toto");    // Renvoie false. L'élément "toto" ne fait plus partie de l'ensemble.
+```
+
+### Utiliser `delete()` avec `forEach()`
+
+```js
+var objetSet = new Set();
+objetSet.add({x: 10, y: 20}); // On ajoute un nouvel objet dans l'ensemble
+objetSet.add({x: 20, y: 30}); // On ajoute un nouvel objet dans l'ensemble
+
+// On supprime les points de l'ensemble pour lesquels
+// x est supérieur à 10
+objetSet.forEach(function(point){
+  if(point.x > 10){
+    objetSet.delete(point);
+  }
+});
+```
+
+## Spécifications
+
+| Spécification                                                                                        | État                         | Commentaires         |
+| ---------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName('ES2015', '#sec-set.prototype.delete', 'Set.prototype.delete')}} | {{Spec2('ES2015')}}     | Définition initiale. |
+| {{SpecName('ESDraft', '#sec-set.prototype.delete', 'Set.prototype.delete')}} | {{Spec2('ESDraft')}} |                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Set.delete")}}
+
+## Voir aussi
+
+- {{jsxref("Set")}}
+- {{jsxref("Set.prototype.clear()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/set/entries/index.html b/files/fr/web/javascript/reference/global_objects/set/entries/index.html
deleted file mode 100644
index 2664c6e718..0000000000
--- a/files/fr/web/javascript/reference/global_objects/set/entries/index.html
+++ /dev/null
@@ -1,74 +0,0 @@
----
-title: Set.prototype.entries()
-slug: Web/JavaScript/Reference/Global_Objects/Set/entries
-tags:
-  - ECMAScript 2015
-  - Iterator
-  - JavaScript
-  - Méthode
-  - Prototype
-  - Reference
-  - set
-translation_of: Web/JavaScript/Reference/Global_Objects/Set/entries
-original_slug: Web/JavaScript/Reference/Objets_globaux/Set/entries
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <code><strong>entries()</strong></code> renvoie un nouvel objet <code><a href="/fr/docs/Web/JavaScript/Guide/iterateurs_et_generateurs#Itérateurs">Iterator</a></code> qui contient un tableau composé de <strong><code>[valeur, valeur]</code></strong> pour chaque élément de l'objet <code>Set</code>, dans leur ordre d'insertion. En raison de leur structure, les objets <code>Set</code> n'ont pas de clé (<code>key</code>), à la différence des objets <code>Map</code>. Pour garder une structure et une API sembables à celle d'un objet <code>Map</code>, chaque entrée (<em>entry</em>) aura la même valeur pour la <em>clé</em> (<em>key</em>) et pour la <em>valeur </em>(<em>value</em>), c'est pourquoi un tableau de<code> [valeur, valeur]</code> est renvoyé.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/set-prototype-entries.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>monSet</var>.entries()</pre>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Un nouvel objet <code>Iterator</code> qui contient un tableau de tuples [<code>valeur, valeur</code>] pour chaque élément de l'ensemble, dans leur ordre d'insertion.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<pre class="brush:js">var monSet = new Set();
-monSet.add("totobidule");
-monSet.add(1);
-monSet.add("machin");
-
-var setIter = monSet.entries();
-
-console.log(setIter.next().value); // ["totobidule", "totobidule"]
-console.log(setIter.next().value); // [1, 1]
-console.log(setIter.next().value); // ["machin", "machin"]
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-set.prototype.entries', 'Set.prototype.entries')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-set.prototype.entries', 'Set.prototype.entries')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Set.entries")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Set.prototype.values","Set.prototype.keys()")}}</li>
- <li>{{jsxref("Set.prototype.values()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/set/entries/index.md b/files/fr/web/javascript/reference/global_objects/set/entries/index.md
new file mode 100644
index 0000000000..cbd34b24a2
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/set/entries/index.md
@@ -0,0 +1,58 @@
+---
+title: Set.prototype.entries()
+slug: Web/JavaScript/Reference/Global_Objects/Set/entries
+tags:
+  - ECMAScript 2015
+  - Iterator
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - set
+translation_of: Web/JavaScript/Reference/Global_Objects/Set/entries
+original_slug: Web/JavaScript/Reference/Objets_globaux/Set/entries
+---
+{{JSRef}}
+
+La méthode **`entries()`** renvoie un nouvel objet [`Iterator`](/fr/docs/Web/JavaScript/Guide/iterateurs_et_generateurs#Itérateurs) qui contient un tableau composé de **`[valeur, valeur]`** pour chaque élément de l'objet `Set`, dans leur ordre d'insertion. En raison de leur structure, les objets `Set` n'ont pas de clé (`key`), à la différence des objets `Map`. Pour garder une structure et une API sembables à celle d'un objet `Map`, chaque entrée (_entry_) aura la même valeur pour la _clé_ (_key_) et pour la _valeur_ (_value_), c'est pourquoi un tableau de` [valeur, valeur]` est renvoyé.
+
+{{EmbedInteractiveExample("pages/js/set-prototype-entries.html")}}
+
+## Syntaxe
+
+    monSet.entries()
+
+### Valeur de retour
+
+Un nouvel objet `Iterator` qui contient un tableau de tuples \[`valeur, valeur`] pour chaque élément de l'ensemble, dans leur ordre d'insertion.
+
+## Exemples
+
+```js
+var monSet = new Set();
+monSet.add("totobidule");
+monSet.add(1);
+monSet.add("machin");
+
+var setIter = monSet.entries();
+
+console.log(setIter.next().value); // ["totobidule", "totobidule"]
+console.log(setIter.next().value); // [1, 1]
+console.log(setIter.next().value); // ["machin", "machin"]
+```
+
+## Spécifications
+
+| Spécification                                                                                            | État                         | Commentaires         |
+| -------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName('ES2015', '#sec-set.prototype.entries', 'Set.prototype.entries')}} | {{Spec2('ES2015')}}     | Définition initiale. |
+| {{SpecName('ESDraft', '#sec-set.prototype.entries', 'Set.prototype.entries')}} | {{Spec2('ESDraft')}} |                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Set.entries")}}
+
+## Voir aussi
+
+- {{jsxref("Set.prototype.values","Set.prototype.keys()")}}
+- {{jsxref("Set.prototype.values()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/set/foreach/index.html b/files/fr/web/javascript/reference/global_objects/set/foreach/index.html
deleted file mode 100644
index 3db2526f8a..0000000000
--- a/files/fr/web/javascript/reference/global_objects/set/foreach/index.html
+++ /dev/null
@@ -1,111 +0,0 @@
----
-title: Set.prototype.forEach()
-slug: Web/JavaScript/Reference/Global_Objects/Set/forEach
-tags:
-  - ECMAScript 2015
-  - JavaScript
-  - Méthode
-  - Prototype
-  - Reference
-  - set
-translation_of: Web/JavaScript/Reference/Global_Objects/Set/forEach
-original_slug: Web/JavaScript/Reference/Objets_globaux/Set/forEach
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <code><strong>forEach()</strong></code> permet d'exécuter une fonction donnée, une fois pour chaque valeur de l'ensemble <code>Set</code>. L'ordre appliqué est celui dans lequel les valeurs ont été ajoutées à l'ensemble.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/set-prototype-foreach.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>monSet</var>.forEach(<var>callback</var>[, <var>thisArg</var>])</pre>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>{{jsxref("undefined")}}.</p>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>callback</code></dt>
- <dd>La fonction qu'on souhaite exécuter pour chaque élément et qui sera appelée avec trois arguments :
- <dl>
-  <dt><code>valeurCourante</code>, <code>cléCourante</code></dt>
-  <dd>L'élément courant appartenant à l'ensemble <code>Set</code>. Un ensemble n'ayant pas de clé, c'est la même valeur qui est passée pour deux arguments de la fonction de rappel.</dd>
-  <dt><code>set</code></dt>
-  <dd>L'objet <code>Set</code> courant (celui sur lequel <code>forEach()</code> a été appelé).</dd>
- </dl>
- </dd>
- <dt><code>thisArg</code></dt>
- <dd>Paramètre optionnel. La valeur à utiliser comme <code>this</code> lors de l'exécution de <code>callback</code>.</dd>
-</dl>
-
-<h2 id="Description">Description</h2>
-
-<p>La méthode <code>forEach()</code> exécute la fonction <code>callback</code> fournie pour chaque valeur contenue au sein de l'objet <code>Set</code>. Elle n'est pas appelée pour les valeurs qui ont été supprimées. Cependant, elle est exécutée si jamais la valeur vaut <code>undefined</code>.</p>
-
-<p><code>callback</code> est appelé avec <strong>trois arguments</strong> :</p>
-
-<ul>
- <li>la <strong>valeur de l'élément</strong></li>
- <li>la <strong>clé de l'élément</strong></li>
- <li>l'objet <strong><code>Set</code> qui est parcouru</strong></li>
-</ul>
-
-<p>Les objets <code>Set</code> n'ont pas de clé (<em>key</em>). Cependant les deux premiers arguments correspondent à la <strong>valeur</strong> contenue dans l'objet {{jsxref("Set")}}. Cela permet d'utiliser les fonctions callback de façon cohérente avec les méthodes <code>forEach()</code> de {{jsxref("Map.foreach", "Map")}} et {{jsxref("Array.forEach","Array")}}.</p>
-
-<p>Si un paramètre <code>thisArg</code> est fourni, il sera passé à la fonction <code>callback</code> lors de l'appel comme valeur <code>this</code>. Par défaut, la valeur {{jsxref("undefined")}} sera passée comme argument <code>this</code>. La valeur <code>this</code> effectivement reçue par la fonction <code>callback</code> est déterminée selon <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_this">les règles usuelles de détermination de <code>this</code> par une fonction</a>.</p>
-
-<p>Chacune des valeurs sera traitée une fois sauf si celle-ci a été supprimée puis réajoutée avant la fin de <code>forEach</code>. <code>callback</code> n'est pas appelé pour les valeurs qui sont supprimés avant le passage de la fonction. Les valeurs qui sont ajoutées avant que <code>forEach</code> ait parcouru l'ensemble seront traitées</p>
-
-<p><code>forEach</code> exécute la fonction <code>callback</code> une fois pour chaque élément de l'objet <code>Set</code>. Cette méthode ne renvoie pas de valeur.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<p>Le code qui suit permet d'enregistrer une ligne pour chaque élément contenu dans l'objet <code>Set</code> :</p>
-
-<pre class="brush:js">function logSetElements(valeur1, valeur2, set) {
-    console.log("s[" + valeur1 + "] = " + valeur2);
-}
-
-new Set(["toto", "truc", undefined]).forEach(logSetElements);
-
-// affichera :
-// "s[toto] = toto"
-// "s[truc] = truc"
-// "s[undefined] = undefined"
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-set.prototype.foreach', 'Set.prototype.forEach')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-set.prototype.foreach', 'Set.prototype.forEach')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Set.forEach")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Array.prototype.forEach()")}}</li>
- <li>{{jsxref("Map.prototype.forEach()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/set/foreach/index.md b/files/fr/web/javascript/reference/global_objects/set/foreach/index.md
new file mode 100644
index 0000000000..63d00d027f
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/set/foreach/index.md
@@ -0,0 +1,91 @@
+---
+title: Set.prototype.forEach()
+slug: Web/JavaScript/Reference/Global_Objects/Set/forEach
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - set
+translation_of: Web/JavaScript/Reference/Global_Objects/Set/forEach
+original_slug: Web/JavaScript/Reference/Objets_globaux/Set/forEach
+---
+{{JSRef}}
+
+La méthode **`forEach()`** permet d'exécuter une fonction donnée, une fois pour chaque valeur de l'ensemble `Set`. L'ordre appliqué est celui dans lequel les valeurs ont été ajoutées à l'ensemble.
+
+{{EmbedInteractiveExample("pages/js/set-prototype-foreach.html")}}
+
+## Syntaxe
+
+    monSet.forEach(callback[, thisArg])
+
+### Valeur de retour
+
+{{jsxref("undefined")}}.
+
+### Paramètres
+
+- `callback`
+
+  - : La fonction qu'on souhaite exécuter pour chaque élément et qui sera appelée avec trois arguments :
+
+    - `valeurCourante`, `cléCourante`
+      - : L'élément courant appartenant à l'ensemble `Set`. Un ensemble n'ayant pas de clé, c'est la même valeur qui est passée pour deux arguments de la fonction de rappel.
+    - `set`
+      - : L'objet `Set` courant (celui sur lequel `forEach()` a été appelé).
+
+- `thisArg`
+  - : Paramètre optionnel. La valeur à utiliser comme `this` lors de l'exécution de `callback`.
+
+## Description
+
+La méthode `forEach()` exécute la fonction `callback` fournie pour chaque valeur contenue au sein de l'objet `Set`. Elle n'est pas appelée pour les valeurs qui ont été supprimées. Cependant, elle est exécutée si jamais la valeur vaut `undefined`.
+
+`callback` est appelé avec **trois arguments** :
+
+- la **valeur de l'élément**
+- la **clé de l'élément**
+- l'objet **`Set` qui est parcouru**
+
+Les objets `Set` n'ont pas de clé (_key_). Cependant les deux premiers arguments correspondent à la **valeur** contenue dans l'objet {{jsxref("Set")}}. Cela permet d'utiliser les fonctions callback de façon cohérente avec les méthodes `forEach()` de {{jsxref("Map.foreach", "Map")}} et {{jsxref("Array.forEach","Array")}}.
+
+Si un paramètre `thisArg` est fourni, il sera passé à la fonction `callback` lors de l'appel comme valeur `this`. Par défaut, la valeur {{jsxref("undefined")}} sera passée comme argument `this`. La valeur `this` effectivement reçue par la fonction `callback` est déterminée selon [les règles usuelles de détermination de `this` par une fonction](/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_this).
+
+Chacune des valeurs sera traitée une fois sauf si celle-ci a été supprimée puis réajoutée avant la fin de `forEach`. `callback` n'est pas appelé pour les valeurs qui sont supprimés avant le passage de la fonction. Les valeurs qui sont ajoutées avant que `forEach` ait parcouru l'ensemble seront traitées
+
+`forEach` exécute la fonction `callback` une fois pour chaque élément de l'objet `Set`. Cette méthode ne renvoie pas de valeur.
+
+## Exemples
+
+Le code qui suit permet d'enregistrer une ligne pour chaque élément contenu dans l'objet `Set` :
+
+```js
+function logSetElements(valeur1, valeur2, set) {
+    console.log("s[" + valeur1 + "] = " + valeur2);
+}
+
+new Set(["toto", "truc", undefined]).forEach(logSetElements);
+
+// affichera :
+// "s[toto] = toto"
+// "s[truc] = truc"
+// "s[undefined] = undefined"
+```
+
+## Spécifications
+
+| Spécification                                                                                            | État                         | Commentaires         |
+| -------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName('ES2015', '#sec-set.prototype.foreach', 'Set.prototype.forEach')}} | {{Spec2('ES2015')}}     | Définition initiale. |
+| {{SpecName('ESDraft', '#sec-set.prototype.foreach', 'Set.prototype.forEach')}} | {{Spec2('ESDraft')}} |                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Set.forEach")}}
+
+## Voir aussi
+
+- {{jsxref("Array.prototype.forEach()")}}
+- {{jsxref("Map.prototype.forEach()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/set/has/index.html b/files/fr/web/javascript/reference/global_objects/set/has/index.html
deleted file mode 100644
index 1ada789d3e..0000000000
--- a/files/fr/web/javascript/reference/global_objects/set/has/index.html
+++ /dev/null
@@ -1,88 +0,0 @@
----
-title: Set.prototype.has()
-slug: Web/JavaScript/Reference/Global_Objects/Set/has
-tags:
-  - ECMAScript 2015
-  - JavaScript
-  - Méthode
-  - Prototype
-  - Reference
-  - set
-translation_of: Web/JavaScript/Reference/Global_Objects/Set/has
-original_slug: Web/JavaScript/Reference/Objets_globaux/Set/has
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <code><strong>has()</strong></code> renvoie un booléen qui indique s'il existe un élément de l'ensemble <code>Set</code> avec une certaine valeur.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/set-prototype-has.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>monSet</var>.has(<var>valeur</var>);</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>valeur</code></dt>
- <dd>Ce paramètre est obligatoire. C'est la valeur dont on souhaite savoir si elle est présente ou non dans l'objet <code>Set</code>.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Un booléen : <code>true</code> s'il existe un élément avec la valeur donnée au sein du <code>Set</code>, <code>false</code> sinon.</p>
-
-<div class="note">
-<p><strong>Note :</strong> L'existence d'un élément avec la valeur testée est vérifiée avec <a href="/fr/docs/Web/JavaScript/Les_différents_tests_d_égalité#Égalité_de_valeurs_nulles">l'algorithme d'égalité des valeurs nulles (<code><em>sameValueZero</em></code>)</a>.</p>
-</div>
-
-<h2 id="Exemples">Exemples</h2>
-
-<pre class="brush: js">var monSet = new Set();
-monSet.add("toto");
-
-monSet.has("toto");  // renvoie true
-monSet.has("truc");  // renvoie false
-
-var set1 = new Set();
-var obj1 = {'cle1': 1};
-set1.add(obj1);
-
-set1.has(obj1);        // renvoie true
-set1.has({'cle1': 1}); // renvoie false car ce sont deux objets distincts
-set1.add({'cle1': 1}); // set1 contient désormais 2 éléments
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-set.prototype.has', 'Set.prototype.has')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-set.prototype.has', 'Set.prototype.has')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Set.has")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Set")}}</li>
- <li>{{jsxref("Set.prototype.add()")}}</li>
- <li>{{jsxref("Set.prototype.delete()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/set/has/index.md b/files/fr/web/javascript/reference/global_objects/set/has/index.md
new file mode 100644
index 0000000000..3718eecc6d
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/set/has/index.md
@@ -0,0 +1,68 @@
+---
+title: Set.prototype.has()
+slug: Web/JavaScript/Reference/Global_Objects/Set/has
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - set
+translation_of: Web/JavaScript/Reference/Global_Objects/Set/has
+original_slug: Web/JavaScript/Reference/Objets_globaux/Set/has
+---
+{{JSRef}}
+
+La méthode **`has()`** renvoie un booléen qui indique s'il existe un élément de l'ensemble `Set` avec une certaine valeur.
+
+{{EmbedInteractiveExample("pages/js/set-prototype-has.html")}}
+
+## Syntaxe
+
+    monSet.has(valeur);
+
+### Paramètres
+
+- `valeur`
+  - : Ce paramètre est obligatoire. C'est la valeur dont on souhaite savoir si elle est présente ou non dans l'objet `Set`.
+
+### Valeur de retour
+
+Un booléen : `true` s'il existe un élément avec la valeur donnée au sein du `Set`, `false` sinon.
+
+> **Note :** L'existence d'un élément avec la valeur testée est vérifiée avec [l'algorithme d'égalité des valeurs nulles (`sameValueZero`)](/fr/docs/Web/JavaScript/Les_différents_tests_d_égalité#Égalité_de_valeurs_nulles).
+
+## Exemples
+
+```js
+var monSet = new Set();
+monSet.add("toto");
+
+monSet.has("toto");  // renvoie true
+monSet.has("truc");  // renvoie false
+
+var set1 = new Set();
+var obj1 = {'cle1': 1};
+set1.add(obj1);
+
+set1.has(obj1);        // renvoie true
+set1.has({'cle1': 1}); // renvoie false car ce sont deux objets distincts
+set1.add({'cle1': 1}); // set1 contient désormais 2 éléments
+```
+
+## Spécifications
+
+| Spécification                                                                                | État                         | Commentaires         |
+| -------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName('ES2015', '#sec-set.prototype.has', 'Set.prototype.has')}} | {{Spec2('ES2015')}}     | Définition initiale. |
+| {{SpecName('ESDraft', '#sec-set.prototype.has', 'Set.prototype.has')}} | {{Spec2('ESDraft')}} |                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Set.has")}}
+
+## Voir aussi
+
+- {{jsxref("Set")}}
+- {{jsxref("Set.prototype.add()")}}
+- {{jsxref("Set.prototype.delete()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/set/index.html b/files/fr/web/javascript/reference/global_objects/set/index.html
deleted file mode 100644
index 46db53beed..0000000000
--- a/files/fr/web/javascript/reference/global_objects/set/index.html
+++ /dev/null
@@ -1,246 +0,0 @@
----
-title: Set
-slug: Web/JavaScript/Reference/Global_Objects/Set
-tags:
-  - ECMAScript 2015
-  - JavaScript
-  - Reference
-  - set
-translation_of: Web/JavaScript/Reference/Global_Objects/Set
-original_slug: Web/JavaScript/Reference/Objets_globaux/Set
----
-<div>{{JSRef}}</div>
-
-<p>L'objet <strong><code>Set</code></strong> (Ensemble en français) permet de stocker des valeurs <em>uniques</em>, de n'importe quel type, que ce soit des valeurs d'un {{Glossary("Primitive", "type primitif")}} ou des objets.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/set-prototype-constructor.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"> new Set([itérable]);</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>itérable</code></dt>
- <dd>Paramètre optionnel. Si un objet <a href="/fr/docs/Web/JavaScript/Reference/Instructions/for...of">itérable </a>est donné comme argument, l'ensemble de ses éléments sera ajouté au nouvel objet Set. Si {{jsxref("null")}} est fourni comme argument ou qu'aucun argument n'est fourni, il sera traité comme {{jsxref("undefined")}}.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Un nouvel objet <code>Set</code>.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>Les objets <code>Set</code> sont des ensembles de valeurs. Il est possible d'itérer sur les éléments contenus dans l'objet <code>Set</code> dans leur ordre d'insertion. <strong>Une valeur donnée ne peut apparaître qu'une seule fois par <code>Set</code>.</strong></p>
-
-<h3 id="Égalité_des_valeurs">Égalité des valeurs</h3>
-
-<p>Chaque valeur d'un <code>Set</code> doit être unique, il faut donc tester l'égalité des valeurs contenues. Cette égalité n'est pas la même que celle de l'opérateur ===. Notamment, pour les objets <code>Set</code>, <code>+0</code> (qui, selon l'égalité stricte, est égal à <code>-0</code>) et <code>-0</code> sont des valeurs différentes. Cela a toutefois été changé avec la dernière version d'ECMAScript 2015 (ES6). Voir le tableau de compatibilité ci-après quant à la prise en charge de l'égalité des clés pour <code>0</code> et <code>-0</code>.</p>
-
-<p>{{jsxref("NaN")}} and {{jsxref("undefined")}} peuvent être enregistrés dans un objet <code>Set</code>. <code>NaN</code> est considéré comme <code>NaN</code> (bien que <code>NaN !== NaN</code>).</p>
-
-<h2 id="Propriétés">Propriétés</h2>
-
-<dl>
- <dt><code>Set.length</code></dt>
- <dd>La valeur de la propriété <code>length</code> est 0.
- <div class="note"><p><strong>Note :</strong> Pour compter le nombre d'éléments d'un objet <code>Set</code>, on utilisera {{jsxref("Set.prototype.size")}}.</p></div>
- </dd>
- <dt>{{jsxref("Set.@@species", "get Set[@@species]")}}</dt>
- <dd>Le constructeur utilisé pour créer des objets dérivés.</dd>
- <dt>{{jsxref("Set.prototype")}}</dt>
- <dd>Représente le prototype du constructeur <code>Set</code>. Cela permet d'ajouter des propriétés à tous les objets <code>Set</code>.</dd>
-</dl>
-
-<h2 id="Instances_de_Set">Instances de <code>Set</code></h2>
-
-<p>Toutes les instances de <code>Set</code> héritent de {{jsxref("Set.prototype")}}.</p>
-
-<h3 id="Propriétés_2">Propriétés</h3>
-
-<p>{{page('fr/docs/Web/JavaScript/Reference/Objets_globaux/Set/prototype','Propriétés')}}</p>
-
-<h3 id="Méthodes">Méthodes</h3>
-
-<p>{{page('fr/docs/Web/JavaScript/Reference/Objets_globaux/Set/prototype','Méthodes')}}</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Utiliser_l'objet_Set">Utiliser l'objet <code>Set</code></h3>
-
-<pre class="brush: js">var monSet = new Set();
-
-monSet.add(1);         // { 1 }
-monSet.add(5);         // { 1, 5 }
-monSet.add("du texte");// { 1, 5, "du texte" }
-
-monSet.has(1); // true
-monSet.has(3); // false, 3 n'a pas été ajouté à l'ensemble
-monSet.has(5);              // true
-monSet.has(Math.sqrt(25));  // true
-monSet.has("Du Texte".toLowerCase()); // true
-
-monSet.size; // 3
-
-monSet.delete(5); // retire 5 du set
-monSet.has(5);    // false, 5 a été retiré de l'ensemble
-
-monSet.size; // 2, on a retiré une valeur de l'ensemble
-console.log(monSet); // Set [ 1, "du texte" ]
-</pre>
-
-<h3 id="Itérer_sur_des_ensembles_(Set)">Itérer sur des ensembles (<code>Set</code>)</h3>
-
-<pre class="brush: js">// On itère sur les différents éléments de l'ensemble
-// ici on affiche : 1, "du texte"
-for (let item of monSet) console.log(item);
-
-// ici on affiche les clés de l'ensemble : 1, "du texte"
-for (let item of monSet.keys()) console.log(item);
-
-// ici on affiche les valeurs de l'ensemble : 1, "du texte"
-for (let item of monSet.values()) console.log(item);
-
-// ici on affiche les clés de l'ensemble : 1, "du texte"
-//(ici, les clés et les valeurs sont les mêmes)
-for (let [clé, valeur] of monSet.entries()) console.log(clé);
-
-// Une méthode de conversion avec Array.from
-var monTableau = Array.from(monSet);    // [1, "du texte"]
-
-// Cela fonctionnera également dans un document HTML
-monSet.add(document.body);
-monSet.has(document.querySelector("body")); // true
-
-// convertir un tableau (Array) en ensemble (Set) et vice versa
-monSet2 = new Set([1,2,3,4]);
-monSet2.size; // 4
-[...monSet2]; // [1,2,3,4]
-
-// L'intersection peut être calculée avec
-var intersection = new Set([...set1].filter(x =&gt; set2.has(x)));
-
-// La différence pourra être simulée avec
-var différence = new Set([...set1].filter(x =&gt; !set2.has(x)));
-
-// On peut itérer sur les entrées d'un ensemble avec forEach
-mySet.forEach(function(value) {
-  console.log(value);
-});
-
-// 1
-// 2
-// 3
-// 4</pre>
-
-<h3 id="Implémenter_des_opérations_ensemblistes">Implémenter des opérations ensemblistes</h3>
-
-<pre class="brush: js">function isSuperset(set, subset) {
-  for (var elem of subset) {
-    if (!set.has(elem)) {
-      return false;
-    }
-  }
-  return true;
-}
-
-function union(setA, setB) {
-  var union = new Set(setA);
-  for (var elem of setB) {
-    union.add(elem);
-  }
-  return union;
-}
-
-function intersection(setA, setB) {
-  var intersection = new Set();
-  for (var elem of setB) {
-    if (setA.has(elem)) {
-      intersection.add(elem);
-    }
-  }
-  return intersection;
-}
-
-function difference (setA, setB) {
-  var difference = new Set(setA);
-  for (var elem of setB) {
-    difference.delete(elem);
-  }
-  return difference;
-}
-
-// Exemples
-var setA = new Set([1,2,3,4]),
-    setB = new Set([2,3]),
-    setC = new Set([3,4,5,6]);
-
-isSuperset(setA, setB);   // =&gt; true
-union(setA, setC);        // =&gt; Set [1, 2, 3, 4, 5, 6]
-intersection(setA, setC); // =&gt; Set [3, 4]
-difference(setA, setC);   // =&gt; Set [1, 2]
-</pre>
-
-<h3 id="Les_relations_avec_les_objets_Array">Les relations avec les objets <code>Array</code></h3>
-
-<pre class="brush: js">var monTableau = ["valeur1", "valeur2", "valeur3"];
-
-// On peut utiliser le constructeur Set pour transformer un Array en Set
-var monSet = new Set(monTableau);
-
-monSet.has("valeur1"); // renvoie true
-
-// Et utiliser l'opérateur de décomposition pour transformer un Set en Array.
-console.log([...monSet]); // affichera la même chose que monTableau</pre>
-
-<h3 id="Les_relations_avec_les_objets_String">Les relations avec les objets <code>String</code></h3>
-
-<pre>var maChaine = "CouCou";
-
-var monEnsemble = new Set(maChaine);
-// Set {"C","o","u" }
-monEnsemble.size; // 3
-</pre>
-
-<h3 id="Dédoublonner_un_tableau">Dédoublonner un tableau</h3>
-
-<pre class="brush: js">const nombres = [2,3,4,4,2,2,2,4,4,5,5,6,6,7,5,32,3,4,5];
-console.log([...new Set(nombres)]);
-// affichera [2, 3, 4, 5, 6, 7, 32]</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-set-objects', 'Set')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-set-objects', 'Set')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Set")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Map")}}</li>
- <li>{{jsxref("WeakMap")}}</li>
- <li>{{jsxref("WeakSet")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/set/index.md b/files/fr/web/javascript/reference/global_objects/set/index.md
new file mode 100644
index 0000000000..2121c5c404
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/set/index.md
@@ -0,0 +1,232 @@
+---
+title: Set
+slug: Web/JavaScript/Reference/Global_Objects/Set
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Reference
+  - set
+translation_of: Web/JavaScript/Reference/Global_Objects/Set
+original_slug: Web/JavaScript/Reference/Objets_globaux/Set
+---
+{{JSRef}}
+
+L'objet **`Set`** (Ensemble en français) permet de stocker des valeurs _uniques_, de n'importe quel type, que ce soit des valeurs d'un {{Glossary("Primitive", "type primitif")}} ou des objets.
+
+{{EmbedInteractiveExample("pages/js/set-prototype-constructor.html")}}
+
+## Syntaxe
+
+     new Set([itérable]);
+
+### Paramètres
+
+- `itérable`
+  - : Paramètre optionnel. Si un objet [itérable ](/fr/docs/Web/JavaScript/Reference/Instructions/for...of)est donné comme argument, l'ensemble de ses éléments sera ajouté au nouvel objet Set. Si {{jsxref("null")}} est fourni comme argument ou qu'aucun argument n'est fourni, il sera traité comme {{jsxref("undefined")}}.
+
+### Valeur de retour
+
+Un nouvel objet `Set`.
+
+## Description
+
+Les objets `Set` sont des ensembles de valeurs. Il est possible d'itérer sur les éléments contenus dans l'objet `Set` dans leur ordre d'insertion. **Une valeur donnée ne peut apparaître qu'une seule fois par `Set`.**
+
+### Égalité des valeurs
+
+Chaque valeur d'un `Set` doit être unique, il faut donc tester l'égalité des valeurs contenues. Cette égalité n'est pas la même que celle de l'opérateur ===. Notamment, pour les objets `Set`, `+0` (qui, selon l'égalité stricte, est égal à `-0`) et `-0` sont des valeurs différentes. Cela a toutefois été changé avec la dernière version d'ECMAScript 2015 (ES6). Voir le tableau de compatibilité ci-après quant à la prise en charge de l'égalité des clés pour `0` et `-0`.
+
+{{jsxref("NaN")}} and {{jsxref("undefined")}} peuvent être enregistrés dans un objet `Set`. `NaN` est considéré comme `NaN` (bien que `NaN !== NaN`).
+
+## Propriétés
+
+- `Set.length`
+
+  - : La valeur de la propriété `length` est 0.
+
+    > **Note :** Pour compter le nombre d'éléments d'un objet `Set`, on utilisera {{jsxref("Set.prototype.size")}}.
+
+- {{jsxref("Set.@@species", "get Set[@@species]")}}
+  - : Le constructeur utilisé pour créer des objets dérivés.
+- {{jsxref("Set.prototype")}}
+  - : Représente le prototype du constructeur `Set`. Cela permet d'ajouter des propriétés à tous les objets `Set`.
+
+## Instances de `Set`
+
+Toutes les instances de `Set` héritent de {{jsxref("Set.prototype")}}.
+
+### Propriétés
+
+{{page('fr/docs/Web/JavaScript/Reference/Objets_globaux/Set/prototype','Propriétés')}}
+
+### Méthodes
+
+{{page('fr/docs/Web/JavaScript/Reference/Objets_globaux/Set/prototype','Méthodes')}}
+
+## Exemples
+
+### Utiliser l'objet `Set`
+
+```js
+var monSet = new Set();
+
+monSet.add(1);         // { 1 }
+monSet.add(5);         // { 1, 5 }
+monSet.add("du texte");// { 1, 5, "du texte" }
+
+monSet.has(1); // true
+monSet.has(3); // false, 3 n'a pas été ajouté à l'ensemble
+monSet.has(5);              // true
+monSet.has(Math.sqrt(25));  // true
+monSet.has("Du Texte".toLowerCase()); // true
+
+monSet.size; // 3
+
+monSet.delete(5); // retire 5 du set
+monSet.has(5);    // false, 5 a été retiré de l'ensemble
+
+monSet.size; // 2, on a retiré une valeur de l'ensemble
+console.log(monSet); // Set [ 1, "du texte" ]
+```
+
+### Itérer sur des ensembles (`Set`)
+
+```js
+// On itère sur les différents éléments de l'ensemble
+// ici on affiche : 1, "du texte"
+for (let item of monSet) console.log(item);
+
+// ici on affiche les clés de l'ensemble : 1, "du texte"
+for (let item of monSet.keys()) console.log(item);
+
+// ici on affiche les valeurs de l'ensemble : 1, "du texte"
+for (let item of monSet.values()) console.log(item);
+
+// ici on affiche les clés de l'ensemble : 1, "du texte"
+//(ici, les clés et les valeurs sont les mêmes)
+for (let [clé, valeur] of monSet.entries()) console.log(clé);
+
+// Une méthode de conversion avec Array.from
+var monTableau = Array.from(monSet);    // [1, "du texte"]
+
+// Cela fonctionnera également dans un document HTML
+monSet.add(document.body);
+monSet.has(document.querySelector("body")); // true
+
+// convertir un tableau (Array) en ensemble (Set) et vice versa
+monSet2 = new Set([1,2,3,4]);
+monSet2.size; // 4
+[...monSet2]; // [1,2,3,4]
+
+// L'intersection peut être calculée avec
+var intersection = new Set([...set1].filter(x => set2.has(x)));
+
+// La différence pourra être simulée avec
+var différence = new Set([...set1].filter(x => !set2.has(x)));
+
+// On peut itérer sur les entrées d'un ensemble avec forEach
+mySet.forEach(function(value) {
+  console.log(value);
+});
+
+// 1
+// 2
+// 3
+// 4
+```
+
+### Implémenter des opérations ensemblistes
+
+```js
+function isSuperset(set, subset) {
+  for (var elem of subset) {
+    if (!set.has(elem)) {
+      return false;
+    }
+  }
+  return true;
+}
+
+function union(setA, setB) {
+  var union = new Set(setA);
+  for (var elem of setB) {
+    union.add(elem);
+  }
+  return union;
+}
+
+function intersection(setA, setB) {
+  var intersection = new Set();
+  for (var elem of setB) {
+    if (setA.has(elem)) {
+      intersection.add(elem);
+    }
+  }
+  return intersection;
+}
+
+function difference (setA, setB) {
+  var difference = new Set(setA);
+  for (var elem of setB) {
+    difference.delete(elem);
+  }
+  return difference;
+}
+
+// Exemples
+var setA = new Set([1,2,3,4]),
+    setB = new Set([2,3]),
+    setC = new Set([3,4,5,6]);
+
+isSuperset(setA, setB);   // => true
+union(setA, setC);        // => Set [1, 2, 3, 4, 5, 6]
+intersection(setA, setC); // => Set [3, 4]
+difference(setA, setC);   // => Set [1, 2]
+```
+
+### Les relations avec les objets `Array`
+
+```js
+var monTableau = ["valeur1", "valeur2", "valeur3"];
+
+// On peut utiliser le constructeur Set pour transformer un Array en Set
+var monSet = new Set(monTableau);
+
+monSet.has("valeur1"); // renvoie true
+
+// Et utiliser l'opérateur de décomposition pour transformer un Set en Array.
+console.log([...monSet]); // affichera la même chose que monTableau
+```
+
+### Les relations avec les objets `String`
+
+    var maChaine = "CouCou";
+
+    var monEnsemble = new Set(maChaine);
+    // Set {"C","o","u" }
+    monEnsemble.size; // 3
+
+### Dédoublonner un tableau
+
+```js
+const nombres = [2,3,4,4,2,2,2,4,4,5,5,6,6,7,5,32,3,4,5];
+console.log([...new Set(nombres)]);
+// affichera [2, 3, 4, 5, 6, 7, 32]
+```
+
+## Spécifications
+
+| Spécification                                                        | État                         | Commentaires         |
+| -------------------------------------------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName('ES2015', '#sec-set-objects', 'Set')}}     | {{Spec2('ES2015')}}     | Définition initiale. |
+| {{SpecName('ESDraft', '#sec-set-objects', 'Set')}} | {{Spec2('ESDraft')}} |                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Set")}}
+
+## Voir aussi
+
+- {{jsxref("Map")}}
+- {{jsxref("WeakMap")}}
+- {{jsxref("WeakSet")}}
diff --git a/files/fr/web/javascript/reference/global_objects/set/size/index.html b/files/fr/web/javascript/reference/global_objects/set/size/index.html
deleted file mode 100644
index 57e0165c9c..0000000000
--- a/files/fr/web/javascript/reference/global_objects/set/size/index.html
+++ /dev/null
@@ -1,66 +0,0 @@
----
-title: Set.prototype.size
-slug: Web/JavaScript/Reference/Global_Objects/Set/size
-tags:
-  - ECMAScript 2015
-  - JavaScript
-  - Propriété
-  - Prototype
-  - Reference
-  - set
-translation_of: Web/JavaScript/Reference/Global_Objects/Set/size
-original_slug: Web/JavaScript/Reference/Objets_globaux/Set/size
----
-<div>{{JSRef}}</div>
-
-<p>L'accesseur <code><strong>size</strong></code> est une propriété qui renvoie le nombre d'éléments contenus dans un objet {{jsxref("Set")}}. Un objet <code>Set</code> correspondant à un ensemble, chaque élément qu'il contient y est unique.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/set-prototype-size.html")}}</div>
-
-
-
-<h2 id="Description">Description</h2>
-
-<p>La valeur de <code>size</code> est un entier représentant le nombre d'éléments contenus dans l'ensemble. Le mutateur associée pour <code>size</code> vaut {{jsxref("undefined")}}. Cette propriété ne peut pas être changée directement.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<pre class="brush:js">var monSet = new Set();
-monSet.add(1);
-monSet.add(5);
-monSet.add("du texte")
-
-monSet.size; // 3
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-get-set.prototype.size', 'Set.prototype.size')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-get-set.prototype.size', 'Set.prototype.size')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Set.size")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Set")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/set/size/index.md b/files/fr/web/javascript/reference/global_objects/set/size/index.md
new file mode 100644
index 0000000000..c19e701d2f
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/set/size/index.md
@@ -0,0 +1,48 @@
+---
+title: Set.prototype.size
+slug: Web/JavaScript/Reference/Global_Objects/Set/size
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Propriété
+  - Prototype
+  - Reference
+  - set
+translation_of: Web/JavaScript/Reference/Global_Objects/Set/size
+original_slug: Web/JavaScript/Reference/Objets_globaux/Set/size
+---
+{{JSRef}}
+
+L'accesseur **`size`** est une propriété qui renvoie le nombre d'éléments contenus dans un objet {{jsxref("Set")}}. Un objet `Set` correspondant à un ensemble, chaque élément qu'il contient y est unique.
+
+{{EmbedInteractiveExample("pages/js/set-prototype-size.html")}}
+
+## Description
+
+La valeur de `size` est un entier représentant le nombre d'éléments contenus dans l'ensemble. Le mutateur associée pour `size` vaut {{jsxref("undefined")}}. Cette propriété ne peut pas être changée directement.
+
+## Exemples
+
+```js
+var monSet = new Set();
+monSet.add(1);
+monSet.add(5);
+monSet.add("du texte")
+
+monSet.size; // 3
+```
+
+## Spécifications
+
+| Spécification                                                                                        | État                         | Commentaires         |
+| ---------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName('ES2015', '#sec-get-set.prototype.size', 'Set.prototype.size')}} | {{Spec2('ES2015')}}     | Définition initiale. |
+| {{SpecName('ESDraft', '#sec-get-set.prototype.size', 'Set.prototype.size')}} | {{Spec2('ESDraft')}} |                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Set.size")}}
+
+## Voir aussi
+
+- {{jsxref("Set")}}
diff --git a/files/fr/web/javascript/reference/global_objects/set/values/index.html b/files/fr/web/javascript/reference/global_objects/set/values/index.html
deleted file mode 100644
index fd56d94faa..0000000000
--- a/files/fr/web/javascript/reference/global_objects/set/values/index.html
+++ /dev/null
@@ -1,75 +0,0 @@
----
-title: Set.prototype.values()
-slug: Web/JavaScript/Reference/Global_Objects/Set/values
-tags:
-  - ECMAScript 2015
-  - Iterator
-  - JavaScript
-  - Méthode
-  - Prototype
-  - Reference
-  - set
-translation_of: Web/JavaScript/Reference/Global_Objects/Set/values
-original_slug: Web/JavaScript/Reference/Objets_globaux/Set/values
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <code><strong>values()</strong></code> renvoie un nouvel objet {{jsxref("Iterator")}} qui contient les valeurs de chaque élément de l'objet <code>Set</code>, dans leur ordre d'insertion.</p>
-
-<p>La méthode <strong><code>keys()</code></strong> est un alias pour cette méthode (afin de conserver une certaine similarité avec les objets {{jsxref("Map")}}) et se comportera exactement de la même façon en renvoyant les <strong>valeurs</strong> des éléments du <code>Set</code>.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/set-prototype-values.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>monSet</var>.values();
-</pre>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Un nouvel objet <code>Iterator</code> qui contient les valeurs de chaque élément de l'ensemble <code>Set</code>, dans leur ordre d'insertion.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<pre class="brush:js">var monSet = new Set();
-monSet.add("toto");
-monSet.add("truc");
-monSet.add("machin");
-
-var setIter = monSet.values();
-
-console.log(setIter.next().value); // "toto"
-console.log(setIter.next().value); // "truc"
-console.log(setIter.next().value); // "machin"</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-set.prototype.values', 'Set.prototype.values')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td>Définition initiale</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-set.prototype.values', 'Set.prototype.values')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Set.values")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Set.prototype.entries()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/set/values/index.md b/files/fr/web/javascript/reference/global_objects/set/values/index.md
new file mode 100644
index 0000000000..2a0de375f4
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/set/values/index.md
@@ -0,0 +1,59 @@
+---
+title: Set.prototype.values()
+slug: Web/JavaScript/Reference/Global_Objects/Set/values
+tags:
+  - ECMAScript 2015
+  - Iterator
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - set
+translation_of: Web/JavaScript/Reference/Global_Objects/Set/values
+original_slug: Web/JavaScript/Reference/Objets_globaux/Set/values
+---
+{{JSRef}}
+
+La méthode **`values()`** renvoie un nouvel objet {{jsxref("Iterator")}} qui contient les valeurs de chaque élément de l'objet `Set`, dans leur ordre d'insertion.
+
+La méthode **`keys()`** est un alias pour cette méthode (afin de conserver une certaine similarité avec les objets {{jsxref("Map")}}) et se comportera exactement de la même façon en renvoyant les **valeurs** des éléments du `Set`.
+
+{{EmbedInteractiveExample("pages/js/set-prototype-values.html")}}
+
+## Syntaxe
+
+    monSet.values();
+
+### Valeur de retour
+
+Un nouvel objet `Iterator` qui contient les valeurs de chaque élément de l'ensemble `Set`, dans leur ordre d'insertion.
+
+## Exemples
+
+```js
+var monSet = new Set();
+monSet.add("toto");
+monSet.add("truc");
+monSet.add("machin");
+
+var setIter = monSet.values();
+
+console.log(setIter.next().value); // "toto"
+console.log(setIter.next().value); // "truc"
+console.log(setIter.next().value); // "machin"
+```
+
+## Spécifications
+
+| Spécification                                                                                        | État                         | Commentaires        |
+| ---------------------------------------------------------------------------------------------------- | ---------------------------- | ------------------- |
+| {{SpecName('ES2015', '#sec-set.prototype.values', 'Set.prototype.values')}} | {{Spec2('ES2015')}}     | Définition initiale |
+| {{SpecName('ESDraft', '#sec-set.prototype.values', 'Set.prototype.values')}} | {{Spec2('ESDraft')}} |                     |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Set.values")}}
+
+## Voir aussi
+
+- {{jsxref("Set.prototype.entries()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/sharedarraybuffer/bytelength/index.html b/files/fr/web/javascript/reference/global_objects/sharedarraybuffer/bytelength/index.html
deleted file mode 100644
index 6827b4c4ff..0000000000
--- a/files/fr/web/javascript/reference/global_objects/sharedarraybuffer/bytelength/index.html
+++ /dev/null
@@ -1,59 +0,0 @@
----
-title: SharedArrayBuffer.prototype.byteLength
-slug: Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer/byteLength
-tags:
-  - JavaScript
-  - Mémoire partagée
-  - Propriété
-  - Reference
-  - SharedArrayBuffer
-  - TypedArrays
-translation_of: Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer/byteLength
-original_slug: Web/JavaScript/Reference/Objets_globaux/SharedArrayBuffer/byteLength
----
-<div>{{JSRef}}</div>
-
-<p>La propriété d'accesseur <code><strong>byteLength</strong></code> représente la longueur d'un {{jsxref("SharedArrayBuffer")}} exprimée en octets.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/sharedarraybuffer-bytelength.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>sab</var>.byteLength</pre>
-
-<h2 id="Description">Description</h2>
-
-<p>La propriété <code>byteLength</code> est une propriété d'accesseur dont le mutateur associé vaut <code>undefined</code>. Autrement dit, cette propriété est en lecture seule. La valeur est établie lorsque le tableau partagé est construit et elle ne peut être modifiée par la suite.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<pre class="brush:js">var sab = new SharedArrayBuffer(1024);
-sab.byteLength; // 1024
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-get-sharedarraybuffer.prototype.bytelength', 'SharedArrayBuffer.prototype.byteLength')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td>Définition initiale avec ES2017.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.SharedArrayBuffer.byteLength")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("SharedArrayBuffer")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/sharedarraybuffer/bytelength/index.md b/files/fr/web/javascript/reference/global_objects/sharedarraybuffer/bytelength/index.md
new file mode 100644
index 0000000000..d84a957218
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/sharedarraybuffer/bytelength/index.md
@@ -0,0 +1,47 @@
+---
+title: SharedArrayBuffer.prototype.byteLength
+slug: Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer/byteLength
+tags:
+  - JavaScript
+  - Mémoire partagée
+  - Propriété
+  - Reference
+  - SharedArrayBuffer
+  - TypedArrays
+translation_of: Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer/byteLength
+original_slug: Web/JavaScript/Reference/Objets_globaux/SharedArrayBuffer/byteLength
+---
+{{JSRef}}
+
+La propriété d'accesseur **`byteLength`** représente la longueur d'un {{jsxref("SharedArrayBuffer")}} exprimée en octets.
+
+{{EmbedInteractiveExample("pages/js/sharedarraybuffer-bytelength.html")}}
+
+## Syntaxe
+
+    sab.byteLength
+
+## Description
+
+La propriété `byteLength` est une propriété d'accesseur dont le mutateur associé vaut `undefined`. Autrement dit, cette propriété est en lecture seule. La valeur est établie lorsque le tableau partagé est construit et elle ne peut être modifiée par la suite.
+
+## Exemples
+
+```js
+var sab = new SharedArrayBuffer(1024);
+sab.byteLength; // 1024
+```
+
+## Spécifications
+
+| Spécification                                                                                                                                                | Statut                       | Commentaires                     |
+| ------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------- | -------------------------------- |
+| {{SpecName('ESDraft', '#sec-get-sharedarraybuffer.prototype.bytelength', 'SharedArrayBuffer.prototype.byteLength')}} | {{Spec2('ESDraft')}} | Définition initiale avec ES2017. |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.SharedArrayBuffer.byteLength")}}
+
+## Voir aussi
+
+- {{jsxref("SharedArrayBuffer")}}
diff --git a/files/fr/web/javascript/reference/global_objects/sharedarraybuffer/index.html b/files/fr/web/javascript/reference/global_objects/sharedarraybuffer/index.html
deleted file mode 100644
index 16d95eeed7..0000000000
--- a/files/fr/web/javascript/reference/global_objects/sharedarraybuffer/index.html
+++ /dev/null
@@ -1,132 +0,0 @@
----
-title: SharedArrayBuffer
-slug: Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer
-tags:
-  - Constructeur
-  - JavaScript
-  - Mémoire partagée
-  - Reference
-  - SharedArrayBuffer
-  - TypedArrays
-translation_of: Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer
-original_slug: Web/JavaScript/Reference/Objets_globaux/SharedArrayBuffer
----
-<div>{{JSRef}}</div>
-
-<p>L'objet <strong><code>SharedArrayBuffer</code></strong> est utilisé afin de représenter un tampon de données binaires brutes générique de longueur fixe. Il est semblable à l'objet {{jsxref("ArrayBuffer")}} mais peut ici être utilisé pour créer différentes vues sur une même mémoire partagée. À la différence d'un <code>ArrayBuffer</code>, un <code>SharedArrayBuffer</code> ne peut pas être détaché.</p>
-
-<div class="note">
-<p><strong>Note :</strong> L'objet <code>SharedArrayBuffer</code> a été désactivé le 5 janvier 2018 par défaut pour l'ensemble des principaux navigateurs afin de réduire <a href="https://blog.mozilla.org/security/2018/01/03/mitigations-landing-new-class-timing-attack/">les failles Meltdown et Spectre</a>. <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=821270">Chrome a réactivé cet objet avec la version 67</a> pour les plateformes sur lesquelles des fonctionnalités sont présentes pour protéger des vulnérabilités telles que Spectre (« <em>site-isolation feature</em> »)</p>
-</div>
-
-<div>{{EmbedInteractiveExample("pages/js/sharedarraybuffer-constructor.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-
-<pre class="syntaxbox">new SharedArrayBuffer([<var>length</var>])
-</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>longueur</code></dt>
- <dd>La taille, exprimée en octets, du tampon (<em>buffer</em>) de données qu'on souhaite créer.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Un nouvel objet <code>SharedArrayBuffer</code> de la taille donnée, dont les éléments sont initialisés à 0.</p>
-
-<h2 id="Description">Description</h2>
-
-<h3 id="Allouer_et_partager_la_mémoire">Allouer et partager la mémoire</h3>
-
-<p>Pour partager une zone mémoire entre plusieurs objets {{jsxref("SharedArrayBuffer")}} d'un agent à un autre (ici un agent correspond au programme principal de la page web ou à l'un de ses <em>web workers</em>), on utilise <code><a href="/fr/docs/Web/API/Worker/postMessage">postMessage</a></code> et <a href="/fr/docs/Web/API/Web_Workers_API/Structured_clone_algorithm">le clonage structuré</a>.</p>
-
-<p>L'algorithme de clonage structuré permet d'envoyer des objets <code>SharedArrayBuffers</code> et <code>TypedArrays</code> vers <code>SharedArrayBuffers</code>. Dans les deux cas, l'objet <code>SharedArrayBuffer</code> est transmis au récepteur, ce qui crée un nouvel objet <code>SharedArrayBuffer</code>, privé, au sein de l'agent qui reçoit (comme avec  {{jsxref("ArrayBuffer")}}). Cependant, le bloc de mémoire référencé par les deux objets <code>Shared</code><code>ArrayBuffer</code> est bien le même bloc. Aussi, si un agent interagit avec cette zone, l'autre agent pourra voir les modifications.</p>
-
-<pre class="brush: js">var sab = new SharedArrayBuffer(1024);
-worker.postMessage(sab);
-</pre>
-
-<h3 id="Mettre_à_jour_et_synchroniser_la_mémoire_partagée_avec_les_opérations_atomiques">Mettre à jour et synchroniser la mémoire partagée avec les opérations atomiques</h3>
-
-<p>La mémoire partagée peut être créée et mise à jour de façon simultanée entre les <em>workers</em> et le <em>thread</em> d'exécution principal. Selon le système (le processeur, le système d'exploitation, le navigateur), cela peut prendre du temps avant que le changement soit propagé sur l'ensemble des contextes. Pour que la synchronisation s'effectue, on doit utiliser les opérations {{jsxref("Atomics", "atomiques", "", 1)}}.</p>
-
-<h3 id="Les_API_qui_utilisent_des_objets_SharedArrayBuffer">Les API qui utilisent des objets <code>SharedArrayBuffer</code></h3>
-
-<ul>
- <li>{{domxref("WebGLRenderingContext.bufferData()")}}</li>
- <li>{{domxref("WebGLRenderingContext.bufferSubData()")}}</li>
- <li>{{domxref("WebGL2RenderingContext.getBufferSubData()")}}</li>
-</ul>
-
-<h3 id="Obligation_d'utiliser_l'opérateur_new">Obligation d'utiliser l'opérateur <code>new</code></h3>
-
-<p>Les constructeurs <code>SharedArrayBuffer</code> doivent être utilisés avec l'opérateur {{jsxref("Opérateurs/L_opérateur_new", "new")}}. Si on appelle un constructeur <code>SharedArrayBuffer</code> comme une fonction, sans <code>new</code>, cela lèvera une exception {{jsxref("TypeError")}}.</p>
-
-<pre class="brush: js example-bad">var sab = SharedArrayBuffer(1024);
-// TypeError: appeler le constructeur natif SharedArrayBuffer sans
-// new est interdit</pre>
-
-<pre class="brush: js example-good">var sab = new SharedArrayBuffer(1024);</pre>
-
-<h2 id="Propriétés">Propriétés</h2>
-
-<dl>
- <dt><code>SharedArrayBuffer.length</code></dt>
- <dd>La propriété de longueur pour le constructeur <code>SharedArrayBuffer</code> dont la valeur est 1.</dd>
- <dt>{{jsxref("SharedArrayBuffer.prototype")}}</dt>
- <dd>Le prototype permet d'ajouter des propriétés à l'ensemble des objets <code>SharedArrayBuffer</code>.</dd>
-</dl>
-
-<h2 id="Le_prototype_de_SharedArrayBuffer">Le prototype de <code>SharedArrayBuffer</code></h2>
-
-<p>Toutes les instances de <code>SharedArrayBuffer</code> héritent de {{jsxref("SharedArrayBuffer.prototype")}}.</p>
-
-<h3 id="Propriétés_2">Propriétés</h3>
-
-<p>{{page('fr/Web/JavaScript/Reference/Objets_globaux/SharedArrayBuffer/prototype','Propriétés')}}</p>
-
-<h3 id="Méthodes">Méthodes</h3>
-
-<p>{{page('fr/Web/JavaScript/Reference/Objets_globaux/SharedArrayBuffer/prototype','Méthodes')}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-sharedarraybuffer-objects', 'SharedArrayBuffer')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES8', '#sec-sharedarraybuffer-objects', 'SharedArrayBuffer')}}</td>
-   <td>{{Spec2('ES8')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.SharedArrayBuffer")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Atomics")}}</li>
- <li>{{jsxref("ArrayBuffer")}}</li>
- <li><a href="/fr/docs/Web/JavaScript/Tableaux_typés">Les tableaux typés en JavaScript</a></li>
- <li><a href="/fr/docs/Web/API/Web_Workers_API">Web Workers</a></li>
- <li><a href="https://github.com/lars-t-hansen/parlib-simple">parlib-simple </a>– un bibliothèque simple qui fournit des abstractions pour synchroniser et distribuer des tâches</li>
- <li><a href="https://github.com/tc39/ecmascript_sharedmem/blob/master/TUTORIAL.md">La mémoire partagée – un rapide tutoriel</a></li>
- <li><a href="https://hacks.mozilla.org/2016/05/a-taste-of-javascripts-new-parallel-primitives/">A Taste of JavaScript’s New Parallel Primitives – Mozilla Hacks (en anglais)</a></li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/sharedarraybuffer/index.md b/files/fr/web/javascript/reference/global_objects/sharedarraybuffer/index.md
new file mode 100644
index 0000000000..dd3777c120
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/sharedarraybuffer/index.md
@@ -0,0 +1,110 @@
+---
+title: SharedArrayBuffer
+slug: Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer
+tags:
+  - Constructeur
+  - JavaScript
+  - Mémoire partagée
+  - Reference
+  - SharedArrayBuffer
+  - TypedArrays
+translation_of: Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer
+original_slug: Web/JavaScript/Reference/Objets_globaux/SharedArrayBuffer
+---
+{{JSRef}}
+
+L'objet **`SharedArrayBuffer`** est utilisé afin de représenter un tampon de données binaires brutes générique de longueur fixe. Il est semblable à l'objet {{jsxref("ArrayBuffer")}} mais peut ici être utilisé pour créer différentes vues sur une même mémoire partagée. À la différence d'un `ArrayBuffer`, un `SharedArrayBuffer` ne peut pas être détaché.
+
+> **Note :** L'objet `SharedArrayBuffer` a été désactivé le 5 janvier 2018 par défaut pour l'ensemble des principaux navigateurs afin de réduire [les failles Meltdown et Spectre](https://blog.mozilla.org/security/2018/01/03/mitigations-landing-new-class-timing-attack/). [Chrome a réactivé cet objet avec la version 67](https://bugs.chromium.org/p/chromium/issues/detail?id=821270) pour les plateformes sur lesquelles des fonctionnalités sont présentes pour protéger des vulnérabilités telles que Spectre (« _site-isolation feature_ »)
+
+{{EmbedInteractiveExample("pages/js/sharedarraybuffer-constructor.html")}}
+
+## Syntaxe
+
+    new SharedArrayBuffer([length])
+
+### Paramètres
+
+- `longueur`
+  - : La taille, exprimée en octets, du tampon (_buffer_) de données qu'on souhaite créer.
+
+### Valeur de retour
+
+Un nouvel objet `SharedArrayBuffer` de la taille donnée, dont les éléments sont initialisés à 0.
+
+## Description
+
+### Allouer et partager la mémoire
+
+Pour partager une zone mémoire entre plusieurs objets {{jsxref("SharedArrayBuffer")}} d'un agent à un autre (ici un agent correspond au programme principal de la page web ou à l'un de ses _web workers_), on utilise [`postMessage`](/fr/docs/Web/API/Worker/postMessage) et [le clonage structuré](/fr/docs/Web/API/Web_Workers_API/Structured_clone_algorithm).
+
+L'algorithme de clonage structuré permet d'envoyer des objets `SharedArrayBuffers` et `TypedArrays` vers `SharedArrayBuffers`. Dans les deux cas, l'objet `SharedArrayBuffer` est transmis au récepteur, ce qui crée un nouvel objet `SharedArrayBuffer`, privé, au sein de l'agent qui reçoit (comme avec  {{jsxref("ArrayBuffer")}}). Cependant, le bloc de mémoire référencé par les deux objets ` Shared``ArrayBuffer ` est bien le même bloc. Aussi, si un agent interagit avec cette zone, l'autre agent pourra voir les modifications.
+
+```js
+var sab = new SharedArrayBuffer(1024);
+worker.postMessage(sab);
+```
+
+### Mettre à jour et synchroniser la mémoire partagée avec les opérations atomiques
+
+La mémoire partagée peut être créée et mise à jour de façon simultanée entre les _workers_ et le _thread_ d'exécution principal. Selon le système (le processeur, le système d'exploitation, le navigateur), cela peut prendre du temps avant que le changement soit propagé sur l'ensemble des contextes. Pour que la synchronisation s'effectue, on doit utiliser les opérations {{jsxref("Atomics", "atomiques", "", 1)}}.
+
+### Les API qui utilisent des objets `SharedArrayBuffer`
+
+- {{domxref("WebGLRenderingContext.bufferData()")}}
+- {{domxref("WebGLRenderingContext.bufferSubData()")}}
+- {{domxref("WebGL2RenderingContext.getBufferSubData()")}}
+
+### Obligation d'utiliser l'opérateur `new`
+
+Les constructeurs `SharedArrayBuffer` doivent être utilisés avec l'opérateur {{jsxref("Opérateurs/L_opérateur_new", "new")}}. Si on appelle un constructeur `SharedArrayBuffer` comme une fonction, sans `new`, cela lèvera une exception {{jsxref("TypeError")}}.
+
+```js example-bad
+var sab = SharedArrayBuffer(1024);
+// TypeError: appeler le constructeur natif SharedArrayBuffer sans
+// new est interdit
+```
+
+```js example-good
+var sab = new SharedArrayBuffer(1024);
+```
+
+## Propriétés
+
+- `SharedArrayBuffer.length`
+  - : La propriété de longueur pour le constructeur `SharedArrayBuffer` dont la valeur est 1.
+- {{jsxref("SharedArrayBuffer.prototype")}}
+  - : Le prototype permet d'ajouter des propriétés à l'ensemble des objets `SharedArrayBuffer`.
+
+## Le prototype de `SharedArrayBuffer`
+
+Toutes les instances de `SharedArrayBuffer` héritent de {{jsxref("SharedArrayBuffer.prototype")}}.
+
+### Propriétés
+
+{{page('fr/Web/JavaScript/Reference/Objets_globaux/SharedArrayBuffer/prototype','Propriétés')}}
+
+### Méthodes
+
+{{page('fr/Web/JavaScript/Reference/Objets_globaux/SharedArrayBuffer/prototype','Méthodes')}}
+
+## Spécifications
+
+| Spécification                                                                                            | État                         | Commentaires         |
+| -------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName('ESDraft', '#sec-sharedarraybuffer-objects', 'SharedArrayBuffer')}} | {{Spec2('ESDraft')}} |                      |
+| {{SpecName('ES8', '#sec-sharedarraybuffer-objects', 'SharedArrayBuffer')}}     | {{Spec2('ES8')}}         | Définition initiale. |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.SharedArrayBuffer")}}
+
+## Voir aussi
+
+- {{jsxref("Atomics")}}
+- {{jsxref("ArrayBuffer")}}
+- [Les tableaux typés en JavaScript](/fr/docs/Web/JavaScript/Tableaux_typés)
+- [Web Workers](/fr/docs/Web/API/Web_Workers_API)
+- [parlib-simple ](https://github.com/lars-t-hansen/parlib-simple)– un bibliothèque simple qui fournit des abstractions pour synchroniser et distribuer des tâches
+- [La mémoire partagée – un rapide tutoriel](https://github.com/tc39/ecmascript_sharedmem/blob/master/TUTORIAL.md)
+- [A Taste of JavaScript’s New Parallel Primitives – Mozilla Hacks (en anglais)](https://hacks.mozilla.org/2016/05/a-taste-of-javascripts-new-parallel-primitives/)
diff --git a/files/fr/web/javascript/reference/global_objects/sharedarraybuffer/slice/index.html b/files/fr/web/javascript/reference/global_objects/sharedarraybuffer/slice/index.html
deleted file mode 100644
index 57219bc3f2..0000000000
--- a/files/fr/web/javascript/reference/global_objects/sharedarraybuffer/slice/index.html
+++ /dev/null
@@ -1,89 +0,0 @@
----
-title: SharedArrayBuffer.prototype.slice()
-slug: Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer/slice
-tags:
-  - JavaScript
-  - Mémoire partagée
-  - Méthode
-  - Prototype
-  - Reference
-  - SharedArrayBuffer
-  - TypedArrays
-translation_of: Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer/slice
-original_slug: Web/JavaScript/Reference/Objets_globaux/SharedArrayBuffer/slice
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <code><strong>SharedArrayBuffer.prototype.slice()</strong></code> renvoie un nouvel objet {{jsxref("SharedArrayBuffer")}} dont le contenu est une copie des octets de l'objet <code>SharedArrayBuffer</code> courant entre un indice de début (inclus) et un indice de fin (exclus) (autrement dit, on copie une « tranche » du tampon courant). Si l'indice de début ou de fin est négatif, la position sera comptée à partir de la fin du tableau plutôt qu'à partir du début. L'algorithme appliqué est le même que {{jsxref("Array.prototype.slice()")}}<em>.</em></p>
-
-<div>{{EmbedInteractiveExample("pages/js/sharedarraybuffer-slice.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>sab</var>.slice()
-<var>sab</var>.slice(début)
-<var>sab</var>.slice(début, fin)</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>début</code> {{optional_inline}}</dt>
- <dd>
- <p>L'indice auquel commencer l'extraction (le début du tableau se situe à l'indice 0).</p>
-
- <p>Si la valeur est négative, <code>début</code> indique le décalage à partir de la fin du tableau. Ainsi <code>slice(-2)</code> permettra d'extraire les deux derniers éléments du tableau.</p>
-
- <p>Si <code>début</code> est absent, <code>slice</code> commencera l'extraction à partir de l'indice 0.</p>
- </dd>
- <dt><code>fin</code> {{optional_inline}}</dt>
- <dd>
- <p>L'indice auquel finir l'extraction. Attention, la valeur du tableau pour cet indice n'est pas incluse dans l'extraction.</p>
-
- <p>Ainsi, <code>slice(1,4)</code> permettra d'extraire entre le deuxième et le quatrième élément (c'est-à-dire les trois éléments dont les indices sont respectivement 1, 2 et 3).</p>
-
- <p>Si <code>fin</code> est un indice négatif, il indique le décalage à partir de la fin du tableau. Autrement dit <code>slice(2,-1)</code> permettra d'extraire les éléments du tampon à partir du troisième élément et jusqu'à l'avant-avant-dernier élément.</p>
-
- <p>Si <code>fin</code> est absent, <code>slice</code> réalisera l'extraction jusqu'à la fin de la séquence (<code>sab.byteLength</code>).</p>
- </dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Un nouvel objet {{jsxref("SharedArrayBuffer")}} qui contient les éléments extraits.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<pre class="brush:js">var sab = new SharedArrayBuffer(1024);
-sab.slice();    // SharedArrayBuffer { byteLength: 1024 }
-sab.slice(2);   // SharedArrayBuffer { byteLength: 1022 }
-sab.slice(-2);  // SharedArrayBuffer { byteLength: 2 }
-sab.slice(0,1); // SharedArrayBuffer { byteLength: 1 }
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-sharedarraybuffer.prototype.slice', 'SharedArrayBuffer.prototype.slice')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td>Définition initiale avec ES2017.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.SharedArrayBuffer.slice")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("SharedArrayBuffer")}}</li>
- <li>{{jsxref("Array.prototype.slice()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/sharedarraybuffer/slice/index.md b/files/fr/web/javascript/reference/global_objects/sharedarraybuffer/slice/index.md
new file mode 100644
index 0000000000..5f2c128fc4
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/sharedarraybuffer/slice/index.md
@@ -0,0 +1,74 @@
+---
+title: SharedArrayBuffer.prototype.slice()
+slug: Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer/slice
+tags:
+  - JavaScript
+  - Mémoire partagée
+  - Méthode
+  - Prototype
+  - Reference
+  - SharedArrayBuffer
+  - TypedArrays
+translation_of: Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer/slice
+original_slug: Web/JavaScript/Reference/Objets_globaux/SharedArrayBuffer/slice
+---
+{{JSRef}}
+
+La méthode **`SharedArrayBuffer.prototype.slice()`** renvoie un nouvel objet {{jsxref("SharedArrayBuffer")}} dont le contenu est une copie des octets de l'objet `SharedArrayBuffer` courant entre un indice de début (inclus) et un indice de fin (exclus) (autrement dit, on copie une « tranche » du tampon courant). Si l'indice de début ou de fin est négatif, la position sera comptée à partir de la fin du tableau plutôt qu'à partir du début. L'algorithme appliqué est le même que {{jsxref("Array.prototype.slice()")}}_._
+
+{{EmbedInteractiveExample("pages/js/sharedarraybuffer-slice.html")}}
+
+## Syntaxe
+
+    sab.slice()
+    sab.slice(début)
+    sab.slice(début, fin)
+
+### Paramètres
+
+- `début` {{optional_inline}}
+
+  - : L'indice auquel commencer l'extraction (le début du tableau se situe à l'indice 0).
+
+    Si la valeur est négative, `début` indique le décalage à partir de la fin du tableau. Ainsi `slice(-2)` permettra d'extraire les deux derniers éléments du tableau.
+
+    Si `début` est absent, `slice` commencera l'extraction à partir de l'indice 0.
+
+- `fin` {{optional_inline}}
+
+  - : L'indice auquel finir l'extraction. Attention, la valeur du tableau pour cet indice n'est pas incluse dans l'extraction.
+
+    Ainsi, `slice(1,4)` permettra d'extraire entre le deuxième et le quatrième élément (c'est-à-dire les trois éléments dont les indices sont respectivement 1, 2 et 3).
+
+    Si `fin` est un indice négatif, il indique le décalage à partir de la fin du tableau. Autrement dit `slice(2,-1)` permettra d'extraire les éléments du tampon à partir du troisième élément et jusqu'à l'avant-avant-dernier élément.
+
+    Si `fin` est absent, `slice` réalisera l'extraction jusqu'à la fin de la séquence (`sab.byteLength`).
+
+### Valeur de retour
+
+Un nouvel objet {{jsxref("SharedArrayBuffer")}} qui contient les éléments extraits.
+
+## Exemples
+
+```js
+var sab = new SharedArrayBuffer(1024);
+sab.slice();    // SharedArrayBuffer { byteLength: 1024 }
+sab.slice(2);   // SharedArrayBuffer { byteLength: 1022 }
+sab.slice(-2);  // SharedArrayBuffer { byteLength: 2 }
+sab.slice(0,1); // SharedArrayBuffer { byteLength: 1 }
+```
+
+## Spécifications
+
+| Spécification                                                                                                                            | État                         | Commentaires                     |
+| ---------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------------------- |
+| {{SpecName('ESDraft', '#sec-sharedarraybuffer.prototype.slice', 'SharedArrayBuffer.prototype.slice')}} | {{Spec2('ESDraft')}} | Définition initiale avec ES2017. |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.SharedArrayBuffer.slice")}}
+
+## Voir aussi
+
+- {{jsxref("SharedArrayBuffer")}}
+- {{jsxref("Array.prototype.slice()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/string/@@iterator/index.html b/files/fr/web/javascript/reference/global_objects/string/@@iterator/index.html
deleted file mode 100644
index 0a01613d9f..0000000000
--- a/files/fr/web/javascript/reference/global_objects/string/@@iterator/index.html
+++ /dev/null
@@ -1,86 +0,0 @@
----
-title: String.prototype[@@iterator]()
-slug: Web/JavaScript/Reference/Global_Objects/String/@@iterator
-tags:
-  - ECMAScript 2015
-  - Iterator
-  - JavaScript
-  - Méthode
-  - Prototype
-  - Reference
-  - String
-translation_of: Web/JavaScript/Reference/Global_Objects/String/@@iterator
-original_slug: Web/JavaScript/Reference/Objets_globaux/String/@@iterator
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <strong><code>[@@iterator]()</code></strong> renvoie un nouvel objet <code><a href="/fr/docs/Web/JavaScript/Guide/Le_protocole_iterator">Iterator</a></code> qui itère sur les points de code (codets) d'une chaîne de caractères, en renvoyant chaque point de code sous forme d'une chaîne de caractères.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/string-iterator.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>chaîneDeCaractères</var>[Symbol.iterator]</pre>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Un nouvel objet <code>Iterator</code>.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Utiliser_iterator()">Utiliser <code>[@@iterator]()</code></h3>
-
-<pre class="brush:js">var chaîne = "A\uD835\uDC68";
-
-var chaîneIter = chaîne[Symbol.iterator]();
-
-console.log(chaîneIter.next().value); // "A"
-console.log(chaîneIter.next().value); // "\uD835\uDC68"
-</pre>
-
-<h3 id="Utiliser_iterator()_avec_une_boucle_for..of">Utiliser <code>[@@iterator]()</code> avec une boucle <code>for..of</code></h3>
-
-<pre class="brush:js">var chaine = "A\uD835\uDC68B\uD835\uDC69C\uD835\uDC6A";
-
-for (var c of chaine) {
-  console.log(c);
-}
-// "A"
-// "\uD835\uDC68"
-// "B"
-// "\uD835\uDC69"
-// "C"
-// "\uD835\uDC6A"
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-string.prototype-@@iterator', 'String.prototype[@@iterator]()')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-string.prototype-@@iterator', 'String.prototype[@@iterator]()')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.String.@@iterator")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/JavaScript/Reference/Les_protocoles_iteration">Les protocoles d'itération</a></li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/string/@@iterator/index.md b/files/fr/web/javascript/reference/global_objects/string/@@iterator/index.md
new file mode 100644
index 0000000000..38ea873740
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/string/@@iterator/index.md
@@ -0,0 +1,71 @@
+---
+title: String.prototype[@@iterator]()
+slug: Web/JavaScript/Reference/Global_Objects/String/@@iterator
+tags:
+  - ECMAScript 2015
+  - Iterator
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - String
+translation_of: Web/JavaScript/Reference/Global_Objects/String/@@iterator
+original_slug: Web/JavaScript/Reference/Objets_globaux/String/@@iterator
+---
+{{JSRef}}
+
+La méthode **`[@@iterator]()`** renvoie un nouvel objet [`Iterator`](/fr/docs/Web/JavaScript/Guide/Le_protocole_iterator) qui itère sur les points de code (codets) d'une chaîne de caractères, en renvoyant chaque point de code sous forme d'une chaîne de caractères.
+
+{{EmbedInteractiveExample("pages/js/string-iterator.html")}}
+
+## Syntaxe
+
+    chaîneDeCaractères[Symbol.iterator]
+
+### Valeur de retour
+
+Un nouvel objet `Iterator`.
+
+## Exemples
+
+### Utiliser `[@@iterator]()`
+
+```js
+var chaîne = "A\uD835\uDC68";
+
+var chaîneIter = chaîne[Symbol.iterator]();
+
+console.log(chaîneIter.next().value); // "A"
+console.log(chaîneIter.next().value); // "\uD835\uDC68"
+```
+
+### Utiliser `[@@iterator]()` avec une boucle `for..of`
+
+```js
+var chaine = "A\uD835\uDC68B\uD835\uDC69C\uD835\uDC6A";
+
+for (var c of chaine) {
+  console.log(c);
+}
+// "A"
+// "\uD835\uDC68"
+// "B"
+// "\uD835\uDC69"
+// "C"
+// "\uD835\uDC6A"
+```
+
+## Spécifications
+
+| Spécification                                                                                                                | État                         | Commentaires         |
+| ---------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName('ES2015', '#sec-string.prototype-@@iterator', 'String.prototype[@@iterator]()')}} | {{Spec2('ES2015')}}     | Définition initiale. |
+| {{SpecName('ESDraft', '#sec-string.prototype-@@iterator', 'String.prototype[@@iterator]()')}} | {{Spec2('ESDraft')}} |                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.String.@@iterator")}}
+
+## Voir aussi
+
+- [Les protocoles d'itération](/fr/docs/Web/JavaScript/Reference/Les_protocoles_iteration)
diff --git a/files/fr/web/javascript/reference/global_objects/string/anchor/index.html b/files/fr/web/javascript/reference/global_objects/string/anchor/index.html
deleted file mode 100644
index f4ca8bb868..0000000000
--- a/files/fr/web/javascript/reference/global_objects/string/anchor/index.html
+++ /dev/null
@@ -1,85 +0,0 @@
----
-title: String.prototype.anchor()
-slug: Web/JavaScript/Reference/Global_Objects/String/anchor
-tags:
-  - JavaScript
-  - Méthode
-  - Prototype
-  - Reference
-  - String
-  - polyfill
-translation_of: Web/JavaScript/Reference/Global_Objects/String/anchor
-original_slug: Web/JavaScript/Reference/Objets_globaux/String/anchor
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <code><strong>anchor()</strong></code> permet de créer une ancre HTML {{HTMLElement("a")}} qui est utilisé comme cible hypertexte.</p>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>str</var>.anchor(<var>name</var>)</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>name</code></dt>
- <dd>Une chaîne de caractères représentant l'attribut <code>name</code> de la balise à créér.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Une chaîne de caractères qui représente un élément HTML {{HTMLElement("a")}}.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>On utilise la méthode <code>anchor()</code> pour créer et afficher des ancres dans un document HTML à l'aide de JavaScript.</p>
-
-<p>Ici la chaîne représente le texte que verra l'utilisateur. Le paramètre <code>name</code> représente l'attribut <code>name</code> de l'élément {{HTMLElement("a")}}.</p>
-
-<p>Les ancres créées avec la méthode <code>anchor</code> deviennent des éléments accessibles à travers le tableau {{domxref("document.anchors")}}.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<pre class="brush:js">var maChaîne = "Table des matières";
-
-document.body.innerHTML = maChaîne.anchor("ancre_contenu");</pre>
-
-<p>produira le code HTML suivant :</p>
-
-<pre class="brush: html">&lt;a name="ancre_contenu"&gt;Table des matières&lt;/a&gt;</pre>
-
-<h2 id="Prothèse_d'émulation_(polyfill)">Prothèse d'émulation (<em>polyfill</em>)</h2>
-
-<pre class="brush: js">if (!String.prototype.anchor){
-  String.prototype.anchor = function(x){
-    return '&lt;a name="' + x + '"&gt;' + this + '&lt;/a&gt;'
-  };
-}
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-string.prototype.anchor', 'String.prototype.anchor')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td>Définition initiale. Implémentée avec JavaScript 1.0. Défini dans l'annexe (normative) B sur les fonctionnalités additionnelles des navigateurs web.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.String.anchor")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("String.prototype.link()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/string/anchor/index.md b/files/fr/web/javascript/reference/global_objects/string/anchor/index.md
new file mode 100644
index 0000000000..6d235268f4
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/string/anchor/index.md
@@ -0,0 +1,75 @@
+---
+title: String.prototype.anchor()
+slug: Web/JavaScript/Reference/Global_Objects/String/anchor
+tags:
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - String
+  - polyfill
+translation_of: Web/JavaScript/Reference/Global_Objects/String/anchor
+original_slug: Web/JavaScript/Reference/Objets_globaux/String/anchor
+---
+{{JSRef}}
+
+La méthode **`anchor()`** permet de créer une ancre HTML {{HTMLElement("a")}} qui est utilisé comme cible hypertexte.
+
+## Syntaxe
+
+    str.anchor(name)
+
+### Paramètres
+
+- `name`
+  - : Une chaîne de caractères représentant l'attribut `name` de la balise à créér.
+
+### Valeur de retour
+
+Une chaîne de caractères qui représente un élément HTML {{HTMLElement("a")}}.
+
+## Description
+
+On utilise la méthode `anchor()` pour créer et afficher des ancres dans un document HTML à l'aide de JavaScript.
+
+Ici la chaîne représente le texte que verra l'utilisateur. Le paramètre `name` représente l'attribut `name` de l'élément {{HTMLElement("a")}}.
+
+Les ancres créées avec la méthode `anchor` deviennent des éléments accessibles à travers le tableau {{domxref("document.anchors")}}.
+
+## Exemples
+
+```js
+var maChaîne = "Table des matières";
+
+document.body.innerHTML = maChaîne.anchor("ancre_contenu");
+```
+
+produira le code HTML suivant :
+
+```html
+<a name="ancre_contenu">Table des matières</a>
+```
+
+## Prothèse d'émulation (_polyfill_)
+
+```js
+if (!String.prototype.anchor){
+  String.prototype.anchor = function(x){
+    return '<a name="' + x + '">' + this + '</a>'
+  };
+}
+```
+
+## Spécifications
+
+| Spécification                                                                                            | État                 | Commentaires                                                                                                                                         |
+| -------------------------------------------------------------------------------------------------------- | -------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- |
+| {{SpecName('ES6', '#sec-string.prototype.anchor', 'String.prototype.anchor')}} | {{Spec2('ES6')}} | Définition initiale. Implémentée avec JavaScript 1.0. Défini dans l'annexe (normative) B sur les fonctionnalités additionnelles des navigateurs web. |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.String.anchor")}}
+
+## Voir aussi
+
+- {{jsxref("String.prototype.link()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/string/big/index.html b/files/fr/web/javascript/reference/global_objects/string/big/index.html
deleted file mode 100644
index 0cefdf7fab..0000000000
--- a/files/fr/web/javascript/reference/global_objects/string/big/index.html
+++ /dev/null
@@ -1,80 +0,0 @@
----
-title: String.prototype.big()
-slug: Web/JavaScript/Reference/Global_Objects/String/big
-tags:
-  - Dépréciée
-  - JavaScript
-  - Méthode
-  - Prototype
-  - Reference
-  - String
-translation_of: Web/JavaScript/Reference/Global_Objects/String/big
-original_slug: Web/JavaScript/Reference/Objets_globaux/String/big
----
-<div>{{JSRef}}{{deprecated_header}}</div>
-
-<p>La méthode <code><strong>big()</strong></code> crée un élément HTML {{HTMLElement("big")}} qui affichera la chaine de caractères avec une taille de police importante.</p>
-
-<div class="note">
-<p><strong>Note :</strong> L'élément <code>&lt;big&gt;</code> a été retiré de <a href="/fr/docs/Web/Guide/HTML/HTML5">HTML5</a> et ne doit pas être utilisé. À la place, les développeurs web doivent utiliser les propriétés <a href="/fr/docs/Web/CSS">CSS</a>.</p>
-</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>str</var>.big()</pre>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Une chaîne de caractères qui représente un élément HTML {{HTMLElement("big")}}.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>La méthode <code>big()</code> place la chaine de caractères dans une balise <code>&lt;big&gt;</code> :<br>
- <code>"&lt;big&gt;str&lt;/big&gt;</code>"</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<p>L'exemple suivant montre les méthodes de <code>String</code> pour changer la taille d'une chaine de caractères :</p>
-
-<pre class="brush:js">var chaîneMonde = "Coucou monde";
-
-console.log( chaîneMonde.small()     ); // &lt;small&gt;Coucou monde&lt;/small&gt;
-console.log( chaîneMonde.big()       ); // &lt;big&gt;Coucou monde&lt;/big&gt;
-console.log( chaîneMonde.fontsize(7) ); // &lt;fontsize=7&gt;Coucou monde&lt;/fontsize&gt;</pre>
-
-<p>Avec l'objet {{domxref("HTMLElement.style", "element.style")}}, il est possible d'accéder à l'attribut <code>style</code> de l'élément et de le manipuler. Par exemple :</p>
-
-<pre class="brush: js">document.getElementById('idÉlément').style.fontSize = '2em'</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-string.prototype.big', 'String.prototype.big')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td>Définition initiale. Implémentée dans JavaScript 1.0. Définie dans l'annexe normative pour les fonctionnalités supplémentaires des navigateurs web.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-string.prototype.big', 'String.prototype.big')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td>Définie dans l'annexe B (normative) pour les fonctionnalités ECMAScript supplémentaires des navigateurs web.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.String.big")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("String.prototype.fontsize()")}}</li>
- <li>{{jsxref("String.prototype.small()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/string/big/index.md b/files/fr/web/javascript/reference/global_objects/string/big/index.md
new file mode 100644
index 0000000000..ab956a9e8d
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/string/big/index.md
@@ -0,0 +1,65 @@
+---
+title: String.prototype.big()
+slug: Web/JavaScript/Reference/Global_Objects/String/big
+tags:
+  - Dépréciée
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - String
+translation_of: Web/JavaScript/Reference/Global_Objects/String/big
+original_slug: Web/JavaScript/Reference/Objets_globaux/String/big
+---
+{{JSRef}}{{deprecated_header}}
+
+La méthode **`big()`** crée un élément HTML {{HTMLElement("big")}} qui affichera la chaine de caractères avec une taille de police importante.
+
+> **Note :** L'élément `<big>` a été retiré de [HTML5](/fr/docs/Web/Guide/HTML/HTML5) et ne doit pas être utilisé. À la place, les développeurs web doivent utiliser les propriétés [CSS](/fr/docs/Web/CSS).
+
+## Syntaxe
+
+    str.big()
+
+### Valeur de retour
+
+Une chaîne de caractères qui représente un élément HTML {{HTMLElement("big")}}.
+
+## Description
+
+La méthode `big()` place la chaine de caractères dans une balise `<big>` :
+`"<big>str</big>`"
+
+## Exemples
+
+L'exemple suivant montre les méthodes de `String` pour changer la taille d'une chaine de caractères :
+
+```js
+var chaîneMonde = "Coucou monde";
+
+console.log( chaîneMonde.small()     ); // <small>Coucou monde</small>
+console.log( chaîneMonde.big()       ); // <big>Coucou monde</big>
+console.log( chaîneMonde.fontsize(7) ); // <fontsize=7>Coucou monde</fontsize>
+```
+
+Avec l'objet {{domxref("HTMLElement.style", "element.style")}}, il est possible d'accéder à l'attribut `style` de l'élément et de le manipuler. Par exemple :
+
+```js
+document.getElementById('idÉlément').style.fontSize = '2em'
+```
+
+## Spécifications
+
+| Spécification                                                                                        | État                         | Commentaires                                                                                                                                        |
+| ---------------------------------------------------------------------------------------------------- | ---------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- |
+| {{SpecName('ES6', '#sec-string.prototype.big', 'String.prototype.big')}}     | {{Spec2('ES6')}}         | Définition initiale. Implémentée dans JavaScript 1.0. Définie dans l'annexe normative pour les fonctionnalités supplémentaires des navigateurs web. |
+| {{SpecName('ESDraft', '#sec-string.prototype.big', 'String.prototype.big')}} | {{Spec2('ESDraft')}} | Définie dans l'annexe B (normative) pour les fonctionnalités ECMAScript supplémentaires des navigateurs web.                                        |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.String.big")}}
+
+## Voir aussi
+
+- {{jsxref("String.prototype.fontsize()")}}
+- {{jsxref("String.prototype.small()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/string/blink/index.html b/files/fr/web/javascript/reference/global_objects/string/blink/index.html
deleted file mode 100644
index a57014d354..0000000000
--- a/files/fr/web/javascript/reference/global_objects/string/blink/index.html
+++ /dev/null
@@ -1,84 +0,0 @@
----
-title: String.prototype.blink()
-slug: Web/JavaScript/Reference/Global_Objects/String/blink
-tags:
-  - Deprecated
-  - HTML wrapper methods
-  - JavaScript
-  - Méthode
-  - Prototype
-  - Reference
-  - String
-translation_of: Web/JavaScript/Reference/Global_Objects/String/blink
-original_slug: Web/JavaScript/Reference/Objets_globaux/String/blink
----
-<div>{{JSRef}}{{deprecated_header}}</div>
-
-<p>La méthode <code><strong>blink()</strong></code> crée un élément HTML {{HTMLElement("blink")}} qui affiche la chaine de caractères en clignotant.</p>
-
-<div class="warning"><p><strong>Attention :</strong> Les textes clignotants sont fortement déconseillés par de nombreux standards d'accessibilité. L'élément <code>&lt;blink&gt;</code> est lui-même non standard et obsolète !</p></div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>str</var>.blink()</pre>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Une chaine de caractères représentant un élément HTML {{HTMLElement("blink")}}.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>La méthode <code>blink()</code> place la chaine de caractères dans une balise <code>&lt;blink&gt;</code> :<br>
- <code>"&lt;blink&gt;str&lt;/blink&gt;</code>"</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<p>L'exemple suivant utilise des méthodes de <code>String</code> pour changer l'affichage d'une chaine de caractères :</p>
-
-<pre class="brush:js">var chaîneMonde = "Coucou monde";
-
-console.log(chaîneMonde.blink());
-console.log(chaîneMonde.bold());
-console.log(chaîneMonde.italics());
-console.log(chaîneMonde.strike());</pre>
-
-<p>Cet exemple produira le code HTML suivant :</p>
-
-<pre class="brush:html">&lt;blink&gt;Coucou monde&lt;/blink&gt;
-&lt;b&gt;Coucou monde&lt;/b&gt;
-&lt;i&gt;Coucou monde&lt;/i&gt;
-&lt;strike&gt;Coucou monde&lt;/strike&gt;</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-string.prototype.blink', 'String.prototype.blink')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td>Définition initiale. Implémentée avec JavaScript 1.0. Définie dans l'annexe B (normative) pour les fonctionnalités additionnelles des navigateurs web.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-string.prototype.blink', 'String.prototype.blink')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td>Définie dans l'annexe B (normative) pour les fonctionnalités additionnelles des navigateurs web.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.String.blink")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("String.prototype.bold()")}}</li>
- <li>{{jsxref("String.prototype.italics()")}}</li>
- <li>{{jsxref("String.prototype.strike()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/string/blink/index.md b/files/fr/web/javascript/reference/global_objects/string/blink/index.md
new file mode 100644
index 0000000000..c73d979e49
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/string/blink/index.md
@@ -0,0 +1,71 @@
+---
+title: String.prototype.blink()
+slug: Web/JavaScript/Reference/Global_Objects/String/blink
+tags:
+  - Deprecated
+  - HTML wrapper methods
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - String
+translation_of: Web/JavaScript/Reference/Global_Objects/String/blink
+original_slug: Web/JavaScript/Reference/Objets_globaux/String/blink
+---
+{{JSRef}}{{deprecated_header}}
+
+La méthode **`blink()`** crée un élément HTML {{HTMLElement("blink")}} qui affiche la chaine de caractères en clignotant.
+
+> **Attention :** Les textes clignotants sont fortement déconseillés par de nombreux standards d'accessibilité. L'élément `<blink>` est lui-même non standard et obsolète !
+
+## Syntaxe
+
+    str.blink()
+
+### Valeur de retour
+
+Une chaine de caractères représentant un élément HTML {{HTMLElement("blink")}}.
+
+## Description
+
+La méthode `blink()` place la chaine de caractères dans une balise `<blink>` :
+`"<blink>str</blink>`"
+
+## Exemples
+
+L'exemple suivant utilise des méthodes de `String` pour changer l'affichage d'une chaine de caractères :
+
+```js
+var chaîneMonde = "Coucou monde";
+
+console.log(chaîneMonde.blink());
+console.log(chaîneMonde.bold());
+console.log(chaîneMonde.italics());
+console.log(chaîneMonde.strike());
+```
+
+Cet exemple produira le code HTML suivant :
+
+```html
+<blink>Coucou monde</blink>
+<b>Coucou monde</b>
+<i>Coucou monde</i>
+<strike>Coucou monde</strike>
+```
+
+## Spécifications
+
+| Spécification                                                                                                | État                         | Commentaires                                                                                                                                           |
+| ------------------------------------------------------------------------------------------------------------ | ---------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| {{SpecName('ES6', '#sec-string.prototype.blink', 'String.prototype.blink')}}         | {{Spec2('ES6')}}         | Définition initiale. Implémentée avec JavaScript 1.0. Définie dans l'annexe B (normative) pour les fonctionnalités additionnelles des navigateurs web. |
+| {{SpecName('ESDraft', '#sec-string.prototype.blink', 'String.prototype.blink')}} | {{Spec2('ESDraft')}} | Définie dans l'annexe B (normative) pour les fonctionnalités additionnelles des navigateurs web.                                                       |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.String.blink")}}
+
+## Voir aussi
+
+- {{jsxref("String.prototype.bold()")}}
+- {{jsxref("String.prototype.italics()")}}
+- {{jsxref("String.prototype.strike()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/string/bold/index.html b/files/fr/web/javascript/reference/global_objects/string/bold/index.html
deleted file mode 100644
index 956d34878d..0000000000
--- a/files/fr/web/javascript/reference/global_objects/string/bold/index.html
+++ /dev/null
@@ -1,82 +0,0 @@
----
-title: String.prototype.bold()
-slug: Web/JavaScript/Reference/Global_Objects/String/bold
-tags:
-  - Déprécié
-  - JavaScript
-  - Méthode
-  - Prototype
-  - Reference
-  - String
-translation_of: Web/JavaScript/Reference/Global_Objects/String/bold
-original_slug: Web/JavaScript/Reference/Objets_globaux/String/bold
----
-<div>{{JSRef}}{{deprecated_header}}</div>
-
-<p>La méthode <code><strong>bold()</strong></code> crée un élément HTML {{HTMLElement("b")}} qui affiche la chaine de caractères en gras.</p>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>str</var>.bold()</pre>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Une chaîne de caractères représentant un élément HTML {{HTMLElement("b")}}.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>La méthode <code>bold()</code> place la chaine de caractères dans une balise <code>&lt;b&gt;</code> :<br>
- <code>"&lt;b&gt;str&lt;/b&gt;</code>"</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<p>L'exemple suivant utilise des méthodes de <code>String</code> pour changer l'affichage de la chaine de caractères :</p>
-
-<pre class="brush:js">var chaîneMonde = "Coucou monde";
-
-console.log( chaîneMonde.blink()   );
-console.log( chaîneMonde.bold()    );
-console.log( chaîneMonde.italics() );
-console.log( chaîneMonde.strike()  );</pre>
-
-<p>Cet exemple produit le même HTML que le code suivant :</p>
-
-<pre class="brush:html">&lt;blink&gt;Coucou monde&lt;/blink&gt;
-&lt;b&gt;Coucou monde&lt;/b&gt;
-&lt;i&gt;Coucou monde&lt;/i&gt;
-&lt;strike&gt;Coucou monde&lt;/strike&gt;
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-string.prototype.bold', 'String.prototype.bold')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td>Définition initiale. Implémentée avec JavaScript 1.0. Définie dans l'annexe B (normative) pour les fonctionnalités additionnelles des navigateurs web.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-string.prototype.bold', 'String.prototype.bold')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td>Définie dans l'annexe B (normative) pour les fonctionnalités additionnelles des navigateurs web.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.String.bold")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("String.prototype.blink()")}}</li>
- <li>{{jsxref("String.prototype.italics()")}}</li>
- <li>{{jsxref("String.prototype.strike()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/string/bold/index.md b/files/fr/web/javascript/reference/global_objects/string/bold/index.md
new file mode 100644
index 0000000000..63faf319aa
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/string/bold/index.md
@@ -0,0 +1,68 @@
+---
+title: String.prototype.bold()
+slug: Web/JavaScript/Reference/Global_Objects/String/bold
+tags:
+  - Déprécié
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - String
+translation_of: Web/JavaScript/Reference/Global_Objects/String/bold
+original_slug: Web/JavaScript/Reference/Objets_globaux/String/bold
+---
+{{JSRef}}{{deprecated_header}}
+
+La méthode **`bold()`** crée un élément HTML {{HTMLElement("b")}} qui affiche la chaine de caractères en gras.
+
+## Syntaxe
+
+    str.bold()
+
+### Valeur de retour
+
+Une chaîne de caractères représentant un élément HTML {{HTMLElement("b")}}.
+
+## Description
+
+La méthode `bold()` place la chaine de caractères dans une balise `<b>` :
+`"<b>str</b>`"
+
+## Exemples
+
+L'exemple suivant utilise des méthodes de `String` pour changer l'affichage de la chaine de caractères :
+
+```js
+var chaîneMonde = "Coucou monde";
+
+console.log( chaîneMonde.blink()   );
+console.log( chaîneMonde.bold()    );
+console.log( chaîneMonde.italics() );
+console.log( chaîneMonde.strike()  );
+```
+
+Cet exemple produit le même HTML que le code suivant :
+
+```html
+<blink>Coucou monde</blink>
+<b>Coucou monde</b>
+<i>Coucou monde</i>
+<strike>Coucou monde</strike>
+```
+
+## Spécifications
+
+| Spécification                                                                                            | État                         | Commentaires                                                                                                                                           |
+| -------------------------------------------------------------------------------------------------------- | ---------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| {{SpecName('ES6', '#sec-string.prototype.bold', 'String.prototype.bold')}}     | {{Spec2('ES6')}}         | Définition initiale. Implémentée avec JavaScript 1.0. Définie dans l'annexe B (normative) pour les fonctionnalités additionnelles des navigateurs web. |
+| {{SpecName('ESDraft', '#sec-string.prototype.bold', 'String.prototype.bold')}} | {{Spec2('ESDraft')}} | Définie dans l'annexe B (normative) pour les fonctionnalités additionnelles des navigateurs web.                                                       |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.String.bold")}}
+
+## Voir aussi
+
+- {{jsxref("String.prototype.blink()")}}
+- {{jsxref("String.prototype.italics()")}}
+- {{jsxref("String.prototype.strike()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/string/charat/index.html b/files/fr/web/javascript/reference/global_objects/string/charat/index.html
deleted file mode 100644
index 63e8e2d422..0000000000
--- a/files/fr/web/javascript/reference/global_objects/string/charat/index.html
+++ /dev/null
@@ -1,246 +0,0 @@
----
-title: String.prototype.charAt()
-slug: Web/JavaScript/Reference/Global_Objects/String/charAt
-tags:
-  - JavaScript
-  - Méthode
-  - Prototype
-  - Reference
-  - String
-translation_of: Web/JavaScript/Reference/Global_Objects/String/charAt
-original_slug: Web/JavaScript/Reference/Objets_globaux/String/charAt
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <code><strong>charAt()</strong></code> renvoie une nouvelle chaîne contenant le caractère (ou, plus précisément, le point de code UTF-16)  à la position indiquée en argument.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/string-charat.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>str</var>.charAt(<var>index</var>)</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>index</code></dt>
- <dd>Un entier entre 0 et la longueur de la chaîne - 1. Si aucun index n'est fourni (ce qui correspond à fournir {{jsxref("undefined")}}) ou si l'index ne peut pas être converti en entier, la recherche sera effectuée à l'index 0 et le premier caractère sera donc renvoyé.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Une chaîne de caractères qui représente le point de code UTF-16 à la position indiquée. Si la position est dehors de la chaîne, ce sera une chaîne vide.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>Les caractères d'une chaîne sont indexés de la gauche vers la droite. L'indice du premier caractère est 0 et l'indice du dernier caractère est la longueur de la chaîne moins un (par exemple, si on a une chaîne <code>toto</code>, le dernier caractère de la chaine aura l'indice <code>toto.length - 1</code>). Si l'indice fourni est en dehors de cet intervalle, la méthode renverra une chaîne vide. Si aucun indice n'est fourni, la valeur par défaut utilisée sera 0.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Afficher_les_caractères_situés_à_différentes_positions_d'une_chaîne">Afficher les caractères situés à différentes positions d'une chaîne</h3>
-
-<p>L'exemple suivant affiche les caractères à différentes positions de la chaîne "<code>Coucou tout le monde</code>" :</p>
-
-<pre class="brush:js">var uneChaîne = "Coucou tout le monde";
-
-console.log("La caractère d'indice 0 est '" + uneChaîne.charAt(0)   + "'");
-console.log("La caractère d'indice 1 est '" + uneChaîne.charAt(1)   + "'");
-console.log("La caractère d'indice 2 est '" + uneChaîne.charAt(2)   + "'");
-console.log("La caractère d'indice 3 est '" + uneChaîne.charAt(3)   + "'");
-console.log("La caractère d'indice 4 est '" + uneChaîne.charAt(4)   + "'");
-console.log("La caractère d'indice 999 est '" + uneChaîne.charAt(999) + "'");
-</pre>
-
-<p>Ces lignes afficheront respectivement :</p>
-
-<pre class="brush: js">La caractère d'indice 0 est 'C'
-La caractère d'indice 1 est 'o'
-La caractère d'indice 2 est 'u'
-La caractère d'indice 3 est 'c'
-La caractère d'indice 4 est 'o'
-La caractère d'indice 999 est ''
-</pre>
-
-<h3 id="Obtenir_des_caractères_complets">Obtenir des caractères complets</h3>
-
-<p>Le code qui suit permet de s'assurer qu'on récupère des caractères complets et ce même si la chaîne de caractères contient des caractères en dehors du plan multilingue de base (BMP) (qui sont donc représentés sur deux unités de code/codets) :</p>
-
-<pre class="brush:js">var str = 'A \uD87E\uDC04 Z'; // On pourrait aussi utiliser un caractère hors du BMP directement
-for (var i=0, chr; i &lt; str.length; i++) {
-  if ((chr = getWholeChar(str, i)) === false) {
-    continue;
-  } // On adapte cette ligne pour chaque boucle, en passant la chaîne de caractères
-    // et on renvoie une variable représentant le caractère individuel
-
-  console.log(chr);
-}
-
-function getWholeChar(str, i) {
-  var code = str.charCodeAt(i);
-
-  if (Number.isNaN(code)) {
-    return ''; // la position n'a pas pu être trouvée
-  }
-  if (code &lt; 0xD800 || code &gt; 0xDFFF) {
-    return str.charAt(i);
-  }
-
-  // On traite ici le demi codet supérieur (high surrogate)
-  // La borne supérieure du test pourrait être 0xDB7F afin de prendre en compte
-  // les demi-codets privés comme des caractères uniques
-  if (0xD800 &lt;= code &amp;&amp; code &lt;= 0xDBFF) {
-    if (str.length &lt;= (i+1))  {
-      throw 'le demi-codet supérieur n'est pas suivi par un demi-codet inférieur';
-    }
-    var next = str.charCodeAt(i+1);
-      if (0xDC00 &gt; next || next &gt; 0xDFFF) {
-        throw 'le demi-codet supérieur n'est pas suivi par un demi-codet inférieur';
-      }
-      return str.charAt(i)+str.charAt(i+1);
-  }
-  // on gère le demi codet inférieur (0xDC00 &lt;= code &amp;&amp; code &lt;= 0xDFFF)
-  if (i === 0) {
-    throw 'le demi-codet inférieur n'est pas précédé d'un demi-codet supérieur';
-  }
-  var prev = str.charCodeAt(i-1);
-
-  // (la borne supérieure pourrait être modifiée en 0xDB7F afin de traiter
-  // les demi-codets supérieurs privés comme des caractètres uniques)
-  if (0xD800 &gt; prev || prev &gt; 0xDBFF) {
-    throw 'le demi-codet inférieur n'est pas précédé d'un demi-codet supérieur';
-  }
-  // on peut passer des demis codets inférieurs comme deuxième composant
-  // d'une paire déjà traitée
-  return false;
-}
-
-</pre>
-
-<p>Dans un environnement ECMAScript 2016 qui permet d'utiliser l'affectation par décomposition, on peut obtenir une version plus succincte et flexible :</p>
-
-<pre class="brush: js">var str = 'A\uD87E\uDC04Z'; // We could also use a non-BMP character directly
-for (var i=0, chr; i &lt; str.length; i++) {
-  [chr, i] = getWholeCharAndI(str, i);
-  // Adapt this line at the top of each loop, passing in the whole string and
-  // the current iteration and returning an array with the individual character
-  // and 'i' value (only changed if a surrogate pair)
-
-  console.log(chr);
-}
-
-function getWholeCharAndI(str, i) {
-  var code = str.charCodeAt(i);
-
-  if (Number.isNaN(code)) {
-    return ''; // Position not found
-  }
-  if (code &lt; 0xD800 || code &gt; 0xDFFF) {
-    return [str.charAt(i), i]; // Normal character, keeping 'i' the same
-  }
-
-  // High surrogate (could change last hex to 0xDB7F to treat high private
-  // surrogates as single characters)
-  if (0xD800 &lt;= code &amp;&amp; code &lt;= 0xDBFF) {
-    if (str.length &lt;= (i+1))  {
-      throw 'High surrogate without following low surrogate';
-    }
-    var next = str.charCodeAt(i+1);
-      if (0xDC00 &gt; next || next &gt; 0xDFFF) {
-        throw 'High surrogate without following low surrogate';
-      }
-      return [str.charAt(i)+str.charAt(i+1), i+1];
-  }
-  // Low surrogate (0xDC00 &lt;= code &amp;&amp; code &lt;= 0xDFFF)
-  if (i === 0) {
-    throw 'Low surrogate without preceding high surrogate';
-  }
-  var prev = str.charCodeAt(i-1);
-
-  // (could change last hex to 0xDB7F to treat high private surrogates
-  // as single characters)
-  if (0xD800 &gt; prev || prev &gt; 0xDBFF) {
-    throw 'Low surrogate without preceding high surrogate';
-  }
-  // Return the next character instead (and increment)
-  return [str.charAt(i+1), i+1];
-}</pre>
-
-<h3 id="Créer_une_version_de_charAt_qui_permet_de_supporter_des_caractères_hors_du_plan_basique_multilingue_(BMP)">Créer une version de <code>charAt</code> qui permet de supporter des caractères hors du plan basique multilingue (BMP)</h3>
-
-<p>Si on souhaite récupérer les paires de codets des caractères hors du plan classique, on peut utiliser le code suivant :</p>
-
-<pre class="brush: js">function fixedCharAt (str, idx) {
-  var ret = '';
-  str += '';
-  var end = str.length;
-
-  var surrogatePairs = /[\uD800-\uDBFF][\uDC00-\uDFFF]/g;
-  while ((surrogatePairs.exec(str)) != null) {
-    var li = surrogatePairs.lastIndex;
-    if (li - 2 &lt; idx) {
-      idx++;
-    } else {
-      break;
-    }
-  }
-
-  if (idx &gt;= end || idx &lt; 0) {
-    return '';
-  }
-
-  ret += str.charAt(idx);
-
-  if (/[\uD800-\uDBFF]/.test(ret) &amp;&amp; /[\uDC00-\uDFFF]/.test(str.charAt(idx+1))) {
-    // On avance d'un puisque l'un des caractères fait partie de la paire
-    ret += str.charAt(idx+1);
-  }
-  return ret;
-}</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES1')}}</td>
-   <td>{{Spec2('ES1')}}</td>
-   <td>Définition initiale</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-15.5.4.4', 'String.prototype.charAt')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-string.prototype.charat', 'String.prototype.charAt')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-string.prototype.charat', 'String.prototype.charAt')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.String.charAt")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("String.prototype.indexOf()")}}</li>
- <li>{{jsxref("String.prototype.lastIndexOf()")}}</li>
- <li>{{jsxref("String.prototype.charCodeAt()")}}</li>
- <li>{{jsxref("String.prototype.codePointAt()")}}</li>
- <li>{{jsxref("String.prototype.split()")}}</li>
- <li>{{jsxref("String.fromCodePoint()")}}</li>
- <li><a href="https://mathiasbynens.be/notes/javascript-unicode">JavaScript a un problème avec Unicode</a>, billet de Mathias Bynens (en anglais)</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/string/charat/index.md b/files/fr/web/javascript/reference/global_objects/string/charat/index.md
new file mode 100644
index 0000000000..5e6c4ef2b6
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/string/charat/index.md
@@ -0,0 +1,225 @@
+---
+title: String.prototype.charAt()
+slug: Web/JavaScript/Reference/Global_Objects/String/charAt
+tags:
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - String
+translation_of: Web/JavaScript/Reference/Global_Objects/String/charAt
+original_slug: Web/JavaScript/Reference/Objets_globaux/String/charAt
+---
+{{JSRef}}
+
+La méthode **`charAt()`** renvoie une nouvelle chaîne contenant le caractère (ou, plus précisément, le point de code UTF-16)  à la position indiquée en argument.
+
+{{EmbedInteractiveExample("pages/js/string-charat.html")}}
+
+## Syntaxe
+
+    str.charAt(index)
+
+### Paramètres
+
+- `index`
+  - : Un entier entre 0 et la longueur de la chaîne - 1. Si aucun index n'est fourni (ce qui correspond à fournir {{jsxref("undefined")}}) ou si l'index ne peut pas être converti en entier, la recherche sera effectuée à l'index 0 et le premier caractère sera donc renvoyé.
+
+### Valeur de retour
+
+Une chaîne de caractères qui représente le point de code UTF-16 à la position indiquée. Si la position est dehors de la chaîne, ce sera une chaîne vide.
+
+## Description
+
+Les caractères d'une chaîne sont indexés de la gauche vers la droite. L'indice du premier caractère est 0 et l'indice du dernier caractère est la longueur de la chaîne moins un (par exemple, si on a une chaîne `toto`, le dernier caractère de la chaine aura l'indice `toto.length - 1`). Si l'indice fourni est en dehors de cet intervalle, la méthode renverra une chaîne vide. Si aucun indice n'est fourni, la valeur par défaut utilisée sera 0.
+
+## Exemples
+
+### Afficher les caractères situés à différentes positions d'une chaîne
+
+L'exemple suivant affiche les caractères à différentes positions de la chaîne "`Coucou tout le monde`" :
+
+```js
+var uneChaîne = "Coucou tout le monde";
+
+console.log("La caractère d'indice 0 est '" + uneChaîne.charAt(0)   + "'");
+console.log("La caractère d'indice 1 est '" + uneChaîne.charAt(1)   + "'");
+console.log("La caractère d'indice 2 est '" + uneChaîne.charAt(2)   + "'");
+console.log("La caractère d'indice 3 est '" + uneChaîne.charAt(3)   + "'");
+console.log("La caractère d'indice 4 est '" + uneChaîne.charAt(4)   + "'");
+console.log("La caractère d'indice 999 est '" + uneChaîne.charAt(999) + "'");
+```
+
+Ces lignes afficheront respectivement :
+
+```js
+La caractère d'indice 0 est 'C'
+La caractère d'indice 1 est 'o'
+La caractère d'indice 2 est 'u'
+La caractère d'indice 3 est 'c'
+La caractère d'indice 4 est 'o'
+La caractère d'indice 999 est ''
+```
+
+### Obtenir des caractères complets
+
+Le code qui suit permet de s'assurer qu'on récupère des caractères complets et ce même si la chaîne de caractères contient des caractères en dehors du plan multilingue de base (BMP) (qui sont donc représentés sur deux unités de code/codets) :
+
+```js
+var str = 'A \uD87E\uDC04 Z'; // On pourrait aussi utiliser un caractère hors du BMP directement
+for (var i=0, chr; i < str.length; i++) {
+  if ((chr = getWholeChar(str, i)) === false) {
+    continue;
+  } // On adapte cette ligne pour chaque boucle, en passant la chaîne de caractères
+    // et on renvoie une variable représentant le caractère individuel
+
+  console.log(chr);
+}
+
+function getWholeChar(str, i) {
+  var code = str.charCodeAt(i);
+
+  if (Number.isNaN(code)) {
+    return ''; // la position n'a pas pu être trouvée
+  }
+  if (code < 0xD800 || code > 0xDFFF) {
+    return str.charAt(i);
+  }
+
+  // On traite ici le demi codet supérieur (high surrogate)
+  // La borne supérieure du test pourrait être 0xDB7F afin de prendre en compte
+  // les demi-codets privés comme des caractères uniques
+  if (0xD800 <= code && code <= 0xDBFF) {
+    if (str.length <= (i+1))  {
+      throw 'le demi-codet supérieur n'est pas suivi par un demi-codet inférieur';
+    }
+    var next = str.charCodeAt(i+1);
+      if (0xDC00 > next || next > 0xDFFF) {
+        throw 'le demi-codet supérieur n'est pas suivi par un demi-codet inférieur';
+      }
+      return str.charAt(i)+str.charAt(i+1);
+  }
+  // on gère le demi codet inférieur (0xDC00 <= code && code <= 0xDFFF)
+  if (i === 0) {
+    throw 'le demi-codet inférieur n'est pas précédé d'un demi-codet supérieur';
+  }
+  var prev = str.charCodeAt(i-1);
+
+  // (la borne supérieure pourrait être modifiée en 0xDB7F afin de traiter
+  // les demi-codets supérieurs privés comme des caractètres uniques)
+  if (0xD800 > prev || prev > 0xDBFF) {
+    throw 'le demi-codet inférieur n'est pas précédé d'un demi-codet supérieur';
+  }
+  // on peut passer des demis codets inférieurs comme deuxième composant
+  // d'une paire déjà traitée
+  return false;
+}
+```
+
+Dans un environnement ECMAScript 2016 qui permet d'utiliser l'affectation par décomposition, on peut obtenir une version plus succincte et flexible :
+
+```js
+var str = 'A\uD87E\uDC04Z'; // We could also use a non-BMP character directly
+for (var i=0, chr; i < str.length; i++) {
+  [chr, i] = getWholeCharAndI(str, i);
+  // Adapt this line at the top of each loop, passing in the whole string and
+  // the current iteration and returning an array with the individual character
+  // and 'i' value (only changed if a surrogate pair)
+
+  console.log(chr);
+}
+
+function getWholeCharAndI(str, i) {
+  var code = str.charCodeAt(i);
+
+  if (Number.isNaN(code)) {
+    return ''; // Position not found
+  }
+  if (code < 0xD800 || code > 0xDFFF) {
+    return [str.charAt(i), i]; // Normal character, keeping 'i' the same
+  }
+
+  // High surrogate (could change last hex to 0xDB7F to treat high private
+  // surrogates as single characters)
+  if (0xD800 <= code && code <= 0xDBFF) {
+    if (str.length <= (i+1))  {
+      throw 'High surrogate without following low surrogate';
+    }
+    var next = str.charCodeAt(i+1);
+      if (0xDC00 > next || next > 0xDFFF) {
+        throw 'High surrogate without following low surrogate';
+      }
+      return [str.charAt(i)+str.charAt(i+1), i+1];
+  }
+  // Low surrogate (0xDC00 <= code && code <= 0xDFFF)
+  if (i === 0) {
+    throw 'Low surrogate without preceding high surrogate';
+  }
+  var prev = str.charCodeAt(i-1);
+
+  // (could change last hex to 0xDB7F to treat high private surrogates
+  // as single characters)
+  if (0xD800 > prev || prev > 0xDBFF) {
+    throw 'Low surrogate without preceding high surrogate';
+  }
+  // Return the next character instead (and increment)
+  return [str.charAt(i+1), i+1];
+}
+```
+
+### Créer une version de `charAt` qui permet de supporter des caractères hors du plan basique multilingue (BMP)
+
+Si on souhaite récupérer les paires de codets des caractères hors du plan classique, on peut utiliser le code suivant :
+
+```js
+function fixedCharAt (str, idx) {
+  var ret = '';
+  str += '';
+  var end = str.length;
+
+  var surrogatePairs = /[\uD800-\uDBFF][\uDC00-\uDFFF]/g;
+  while ((surrogatePairs.exec(str)) != null) {
+    var li = surrogatePairs.lastIndex;
+    if (li - 2 < idx) {
+      idx++;
+    } else {
+      break;
+    }
+  }
+
+  if (idx >= end || idx < 0) {
+    return '';
+  }
+
+  ret += str.charAt(idx);
+
+  if (/[\uD800-\uDBFF]/.test(ret) && /[\uDC00-\uDFFF]/.test(str.charAt(idx+1))) {
+    // On avance d'un puisque l'un des caractères fait partie de la paire
+    ret += str.charAt(idx+1);
+  }
+  return ret;
+}
+```
+
+## Spécifications
+
+| Spécification                                                                                                | État                         | Commentaires        |
+| ------------------------------------------------------------------------------------------------------------ | ---------------------------- | ------------------- |
+| {{SpecName('ES1')}}                                                                                     | {{Spec2('ES1')}}         | Définition initiale |
+| {{SpecName('ES5.1', '#sec-15.5.4.4', 'String.prototype.charAt')}}                     | {{Spec2('ES5.1')}}     |                     |
+| {{SpecName('ES6', '#sec-string.prototype.charat', 'String.prototype.charAt')}}     | {{Spec2('ES6')}}         |                     |
+| {{SpecName('ESDraft', '#sec-string.prototype.charat', 'String.prototype.charAt')}} | {{Spec2('ESDraft')}} |                     |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.String.charAt")}}
+
+## Voir aussi
+
+- {{jsxref("String.prototype.indexOf()")}}
+- {{jsxref("String.prototype.lastIndexOf()")}}
+- {{jsxref("String.prototype.charCodeAt()")}}
+- {{jsxref("String.prototype.codePointAt()")}}
+- {{jsxref("String.prototype.split()")}}
+- {{jsxref("String.fromCodePoint()")}}
+- [JavaScript a un problème avec Unicode](https://mathiasbynens.be/notes/javascript-unicode), billet de Mathias Bynens (en anglais)
diff --git a/files/fr/web/javascript/reference/global_objects/string/charcodeat/index.html b/files/fr/web/javascript/reference/global_objects/string/charcodeat/index.html
deleted file mode 100644
index 3b57bc337a..0000000000
--- a/files/fr/web/javascript/reference/global_objects/string/charcodeat/index.html
+++ /dev/null
@@ -1,172 +0,0 @@
----
-title: String.prototype.charCodeAt()
-slug: Web/JavaScript/Reference/Global_Objects/String/charCodeAt
-tags:
-  - JavaScript
-  - Méthode
-  - Reference
-  - String
-  - Unicode
-translation_of: Web/JavaScript/Reference/Global_Objects/String/charCodeAt
-original_slug: Web/JavaScript/Reference/Objets_globaux/String/charCodeAt
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <code><strong>charCodeAt()</strong></code> retourne un entier compris entre 0 et 65535 qui correspond au code UTF-16 d'un caractère de la chaîne situé à une position donnée.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/string-charcodeat.html")}}</div>
-
-
-
-<p>Le codet UTF-16 renvoyé correspond au codet Unicode si le caractère peut être représenté sur un seul codet. Si le codet Unicode ne peut pas être représenté sur un seul codet UTF-16 (car sa valeur est supérieure à <code>0xFFFF</code>), seule la première partie de la paire sera renvoyée. Si vous souhaitez obtenir l'ensemble de la valeur, vous pouvez utiliser la méthode {{jsxref("String.prototype.codePointAt()","codePointAt()")}}.</p>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox notranslate"><var>str</var>.charCodeAt(<var>indice</var>)</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>indice</code></dt>
- <dd>Un entier supérieur ou égal à zéro et strictement inférieur à la longueur de la chaîne. La valeur par défaut (si le paramètre est absent ou n'est pas un nombre) sera zéro (0).</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Un nombre qui représente la valeur du point de code UTF-16 pour le caractère à la position indiquée. Si <code>index</code> pointe en dehors de la chaîne, ce sera {{jsxref("Objets_globaux/NaN","NaN")}} qui sera renvoyé.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>Les codets Unicode vont de 0 à 1 114 111 (0x10FFFF). Les 128 premiers caractères Unicode correspondent aux caractères ASCII (leur encodage est le même). Pour plus d'informations sur la gestion de l'Unicode en JavaScript, voir le <a href="/fr/docs/Web/JavaScript/Guide/Valeurs,_variables,_et_littéraux#Unicode">Guide JavaScript</a>.</p>
-
-<p>La méthode <code>charCodeAt()</code> renverra toujours une valeur inférieure à 65 536. En effet, les caractères encodés sur les plus grandes valeurs sont encodés sur deux « demi-codets » (appelés <em>surrogate pair</em> en anglais). Pour recomposer de tels caractères, il faut donc utiliser <code>charCodeAt(i)</code> <strong>et aussi</strong> <code>charCodeAt(i+1)</code> afin de pouvoir récupérer chaque demi-codet. Pour plus de détails, voir le deuxième et troisième exemples.</p>
-
-<p><code>charCodeAt()</code> renverra {{jsxref("NaN")}} si l'indice fourni est strictement inférieur à 0 ou dépasse la longueur de la chaîne.</p>
-
-<p>Dans les anciennes versions (JavaScript 1.2 par exemple) la méthode <code>charCodeAt()</code> renvoyait la valeur du caractère selon l'encodage ISO-Latin-1. L'encodage ISO-Latin-1 permet de représenter des caractères dont les valeurs vont de 0 à 255. Les valeurs 0 à 127 correspondent aux différentes valeurs ASCII.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Utiliser_charCodeAt">Utiliser <code>charCodeAt()</code></h3>
-
-<p>L'exemple suivant retourne 65, la valeur Unicode de A.</p>
-
-<pre class="brush: js notranslate">"ABC".charCodeAt(0) // returns 65
-</pre>
-
-<h3 id="Utiliser_charCodeAt_pour_gérer_les_caractères_hors_du_plan_multilingue_de_base_sans_hypothèse_sur_leur_présence">Utiliser charCodeAt pour gérer les caractères hors du plan multilingue de base sans hypothèse sur leur présence</h3>
-
-<p>Cette fonction peut être utilisée dans des boucles ou autres dans les cas où on ne sait pas si des caractères représentés sur deux demi-codets (hors du plan BMP) existent avant la position indiquée.</p>
-
-<pre class="brush:js notranslate">function fixedCharCodeAt (str, idx) {
-    // ex. fixedCharCodeAt ('\uD800\uDC00', 0); // 65536
-    // ex. fixedCharCodeAt ('\uD800\uDC00', 1); // false
-    idx = idx || 0;
-    var code = str.charCodeAt(idx);
-    var hi, low;
-
-    // On gère le demi-codet supérieur (la borne supérieure
-    // utilisée pourrait être 0xDB7F afin de traiter les
-    // paires surrogates privées comme des caractères uniques)
-    if (0xD800 &lt;= code &amp;&amp; code &lt;= 0xDBFF) {
-        hi = code;
-        low = str.charCodeAt(idx+1);
-        if (isNaN(low)) {
-            throw "Le demi-codet supérieur n'est pas suivi "+
-                  "par un demi-codet inférieur dans fixedCharCodeAt()";
-        }
-        return ((hi - 0xD800) * 0x400) + (low - 0xDC00) + 0x10000;
-    }
-    if (0xDC00 &lt;= code &amp;&amp; code &lt;= 0xDFFF) {
-    // Demi-codet inférieur
-
-        // On renvoie false pour permettre aux boucles
-        // car le cas a normalement déjà été géré avec
-        // l'étape précédente
-        return false;
-    }
-    return code;
-}
-</pre>
-
-<h3 id="Utiliser_charCodeAt_pour_gérer_les_caractères_du_plan_multilingue_de_base_en_sachant_quils_sont_présents">Utiliser <code>charCodeAt()</code> pour gérer les caractères du plan multilingue de base (en sachant qu'ils sont présents)</h3>
-
-<pre class="brush:js notranslate">function knownCharCodeAt (str, idx) {
-    str += '';
-    var code,
-        end = str.length;
-
-    var surrogatePairs = /[\uD800-\uDBFF][\uDC00-\uDFFF]/g;
-    while ((surrogatePairs.exec(str)) != null) {
-        var li = surrogatePairs.lastIndex;
-        if (li - 2 &lt; idx) {
-            idx++;
-        }
-        else {
-            break;
-        }
-    }
-
-    if (idx &gt;= end || idx &lt; 0) {
-        return NaN;
-    }
-
-    code = str.charCodeAt(idx);
-
-    var hi, low;
-    if (0xD800 &lt;= code &amp;&amp; code &lt;= 0xDBFF) {
-        hi = code;
-        low = str.charCodeAt(idx+1);
-        // On prend un caractère de plus
-        // car on a deux demi-codets à récupérer
-        return ((hi - 0xD800) * 0x400) + (low - 0xDC00) + 0x10000;
-    }
-    return code;
-}
-
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES1')}}</td>
-   <td>{{Spec2('ES1')}}</td>
-   <td>Définition initiale. Implémentée avec JavaScript 1.2.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-15.5.4.5', 'String.prototype.charCodeAt')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-string.prototype.charcodeat', 'String.prototype.charCodeAt')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-string.prototype.charcodeat', 'String.prototype.charCodeAt')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.String.charCodeAt")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("String.fromCharCode()")}}</li>
- <li>{{jsxref("String.prototype.charAt()")}}</li>
- <li>{{jsxref("String.fromCodePoint()")}}</li>
- <li>{{jsxref("String.prototype.codePointAt()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/string/charcodeat/index.md b/files/fr/web/javascript/reference/global_objects/string/charcodeat/index.md
new file mode 100644
index 0000000000..71b6ff4249
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/string/charcodeat/index.md
@@ -0,0 +1,145 @@
+---
+title: String.prototype.charCodeAt()
+slug: Web/JavaScript/Reference/Global_Objects/String/charCodeAt
+tags:
+  - JavaScript
+  - Méthode
+  - Reference
+  - String
+  - Unicode
+translation_of: Web/JavaScript/Reference/Global_Objects/String/charCodeAt
+original_slug: Web/JavaScript/Reference/Objets_globaux/String/charCodeAt
+---
+{{JSRef}}
+
+La méthode **`charCodeAt()`** retourne un entier compris entre 0 et 65535 qui correspond au code UTF-16 d'un caractère de la chaîne situé à une position donnée.
+
+{{EmbedInteractiveExample("pages/js/string-charcodeat.html")}}
+
+Le codet UTF-16 renvoyé correspond au codet Unicode si le caractère peut être représenté sur un seul codet. Si le codet Unicode ne peut pas être représenté sur un seul codet UTF-16 (car sa valeur est supérieure à `0xFFFF`), seule la première partie de la paire sera renvoyée. Si vous souhaitez obtenir l'ensemble de la valeur, vous pouvez utiliser la méthode {{jsxref("String.prototype.codePointAt()","codePointAt()")}}.
+
+## Syntaxe
+
+    str.charCodeAt(indice)
+
+### Paramètres
+
+- `indice`
+  - : Un entier supérieur ou égal à zéro et strictement inférieur à la longueur de la chaîne. La valeur par défaut (si le paramètre est absent ou n'est pas un nombre) sera zéro (0).
+
+### Valeur de retour
+
+Un nombre qui représente la valeur du point de code UTF-16 pour le caractère à la position indiquée. Si `index` pointe en dehors de la chaîne, ce sera {{jsxref("Objets_globaux/NaN","NaN")}} qui sera renvoyé.
+
+## Description
+
+Les codets Unicode vont de 0 à 1 114 111 (0x10FFFF). Les 128 premiers caractères Unicode correspondent aux caractères ASCII (leur encodage est le même). Pour plus d'informations sur la gestion de l'Unicode en JavaScript, voir le [Guide JavaScript](/fr/docs/Web/JavaScript/Guide/Valeurs,_variables,_et_littéraux#Unicode).
+
+La méthode `charCodeAt()` renverra toujours une valeur inférieure à 65 536. En effet, les caractères encodés sur les plus grandes valeurs sont encodés sur deux « demi-codets » (appelés _surrogate pair_ en anglais). Pour recomposer de tels caractères, il faut donc utiliser `charCodeAt(i)` **et aussi** `charCodeAt(i+1)` afin de pouvoir récupérer chaque demi-codet. Pour plus de détails, voir le deuxième et troisième exemples.
+
+`charCodeAt()` renverra {{jsxref("NaN")}} si l'indice fourni est strictement inférieur à 0 ou dépasse la longueur de la chaîne.
+
+Dans les anciennes versions (JavaScript 1.2 par exemple) la méthode `charCodeAt()` renvoyait la valeur du caractère selon l'encodage ISO-Latin-1. L'encodage ISO-Latin-1 permet de représenter des caractères dont les valeurs vont de 0 à 255. Les valeurs 0 à 127 correspondent aux différentes valeurs ASCII.
+
+## Exemples
+
+### Utiliser `charCodeAt()`
+
+L'exemple suivant retourne 65, la valeur Unicode de A.
+
+```js
+"ABC".charCodeAt(0) // returns 65
+```
+
+### Utiliser charCodeAt pour gérer les caractères hors du plan multilingue de base sans hypothèse sur leur présence
+
+Cette fonction peut être utilisée dans des boucles ou autres dans les cas où on ne sait pas si des caractères représentés sur deux demi-codets (hors du plan BMP) existent avant la position indiquée.
+
+```js
+function fixedCharCodeAt (str, idx) {
+    // ex. fixedCharCodeAt ('\uD800\uDC00', 0); // 65536
+    // ex. fixedCharCodeAt ('\uD800\uDC00', 1); // false
+    idx = idx || 0;
+    var code = str.charCodeAt(idx);
+    var hi, low;
+
+    // On gère le demi-codet supérieur (la borne supérieure
+    // utilisée pourrait être 0xDB7F afin de traiter les
+    // paires surrogates privées comme des caractères uniques)
+    if (0xD800 <= code && code <= 0xDBFF) {
+        hi = code;
+        low = str.charCodeAt(idx+1);
+        if (isNaN(low)) {
+            throw "Le demi-codet supérieur n'est pas suivi "+
+                  "par un demi-codet inférieur dans fixedCharCodeAt()";
+        }
+        return ((hi - 0xD800) * 0x400) + (low - 0xDC00) + 0x10000;
+    }
+    if (0xDC00 <= code && code <= 0xDFFF) {
+    // Demi-codet inférieur
+
+        // On renvoie false pour permettre aux boucles
+        // car le cas a normalement déjà été géré avec
+        // l'étape précédente
+        return false;
+    }
+    return code;
+}
+```
+
+### Utiliser `charCodeAt()` pour gérer les caractères du plan multilingue de base (en sachant qu'ils sont présents)
+
+```js
+function knownCharCodeAt (str, idx) {
+    str += '';
+    var code,
+        end = str.length;
+
+    var surrogatePairs = /[\uD800-\uDBFF][\uDC00-\uDFFF]/g;
+    while ((surrogatePairs.exec(str)) != null) {
+        var li = surrogatePairs.lastIndex;
+        if (li - 2 < idx) {
+            idx++;
+        }
+        else {
+            break;
+        }
+    }
+
+    if (idx >= end || idx < 0) {
+        return NaN;
+    }
+
+    code = str.charCodeAt(idx);
+
+    var hi, low;
+    if (0xD800 <= code && code <= 0xDBFF) {
+        hi = code;
+        low = str.charCodeAt(idx+1);
+        // On prend un caractère de plus
+        // car on a deux demi-codets à récupérer
+        return ((hi - 0xD800) * 0x400) + (low - 0xDC00) + 0x10000;
+    }
+    return code;
+}
+```
+
+## Spécifications
+
+| Spécification                                                                                                            | État                         | Commentaires                                          |
+| ------------------------------------------------------------------------------------------------------------------------ | ---------------------------- | ----------------------------------------------------- |
+| {{SpecName('ES1')}}                                                                                                 | {{Spec2('ES1')}}         | Définition initiale. Implémentée avec JavaScript 1.2. |
+| {{SpecName('ES5.1', '#sec-15.5.4.5', 'String.prototype.charCodeAt')}}                             | {{Spec2('ES5.1')}}     |                                                       |
+| {{SpecName('ES6', '#sec-string.prototype.charcodeat', 'String.prototype.charCodeAt')}}     | {{Spec2('ES6')}}         |                                                       |
+| {{SpecName('ESDraft', '#sec-string.prototype.charcodeat', 'String.prototype.charCodeAt')}} | {{Spec2('ESDraft')}} |                                                       |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.String.charCodeAt")}}
+
+## Voir aussi
+
+- {{jsxref("String.fromCharCode()")}}
+- {{jsxref("String.prototype.charAt()")}}
+- {{jsxref("String.fromCodePoint()")}}
+- {{jsxref("String.prototype.codePointAt()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/string/codepointat/index.html b/files/fr/web/javascript/reference/global_objects/string/codepointat/index.html
deleted file mode 100644
index d461d2917d..0000000000
--- a/files/fr/web/javascript/reference/global_objects/string/codepointat/index.html
+++ /dev/null
@@ -1,141 +0,0 @@
----
-title: String.prototype.codePointAt()
-slug: Web/JavaScript/Reference/Global_Objects/String/codePointAt
-tags:
-  - ECMAScript 2015
-  - JavaScript
-  - Méthode
-  - Prototype
-  - Reference
-  - String
-  - polyfill
-translation_of: Web/JavaScript/Reference/Global_Objects/String/codePointAt
-original_slug: Web/JavaScript/Reference/Objets_globaux/String/codePointAt
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <code><strong>codePointAt()</strong></code> renvoie un entier positif qui correspond au code Unicode (<em>code point</em>) du caractère de la chaîne à la position donnée.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/string-codepointat.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>str</var>.codePointAt(<var>pos</var>)</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>pos</code></dt>
- <dd>La position de l'élément dans la chaîne de caractères dont on souhaite obtenir la valeur du codet.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Un nombre qui représente la valeur du point de code du caractère à la position indiqué. C'est la valeur {{jsxref("undefined")}} qui est renvoyée s'il n'y aucun élément à <code>pos</code>.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>S'il n'y a pas d'élément à la position donnée, la valeur renvoyée sera {{jsxref("undefined")}}. Si ce n'est pas un élément représenté sur deux demi-codets (<em>surrogate pair</em>) UTF-16 et qui commence à <code>pos</code>, le codet de l'élément à l'indice <code>pos</code> est renvoyé.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<pre class="brush: js">'ABC'.codePointAt(1);          // 66
-'\uD800\uDC00'.codePointAt(0); // 65536
-
-'XYZ'.codePointAt(42); // undefined
-</pre>
-
-<h2 id="Prothèse_d'émulation_(polyfill)">Prothèse d'émulation (<em>polyfill</em>)</h2>
-
-<p>Le fragment de code suivant permet d'ajouter la méthode <code>codePointAt()</code> pour les chaînes de caractères (<code>String</code>). En effet, cette méthode fait partie de ECMAScript 2015 et certains navigateurs peuvent ne pas proposer cette fonction nativement.</p>
-
-<pre class="brush:js">/*! https://mths.be/codepointat v0.2.0 by @mathias */
-if (!String.prototype.codePointAt) {
-  (function() {
-    'use strict'; // needed to support `apply`/`call` with `undefined`/`null`
-    var defineProperty = (function() {
-      // IE 8 only supports `Object.defineProperty` on DOM elements
-      try {
-        var object = {};
-        var $defineProperty = Object.defineProperty;
-        var result = $defineProperty(object, object, object) &amp;&amp; $defineProperty;
-      } catch(error) {}
-      return result;
-    }());
-    var codePointAt = function(position) {
-      if (this == null) {
-        throw TypeError();
-      }
-      var string = String(this);
-      var size = string.length;
-      // `ToInteger`
-      var index = position ? Number(position) : 0;
-      if (index != index) { // better `isNaN`
-        index = 0;
-      }
-      // Account for out-of-bounds indices:
-      if (index &lt; 0 || index &gt;= size) {
-        return undefined;
-      }
-      // Get the first code unit
-      var first = string.charCodeAt(index);
-      var second;
-      if ( // check if it’s the start of a surrogate pair
-        first &gt;= 0xD800 &amp;&amp; first &lt;= 0xDBFF &amp;&amp; // high surrogate
-        size &gt; index + 1 // there is a next code unit
-      ) {
-        second = string.charCodeAt(index + 1);
-        if (second &gt;= 0xDC00 &amp;&amp; second &lt;= 0xDFFF) { // low surrogate
-          // https://mathiasbynens.be/notes/javascript-encoding#surrogate-formulae
-          return (first - 0xD800) * 0x400 + second - 0xDC00 + 0x10000;
-        }
-      }
-      return first;
-    };
-    if (defineProperty) {
-      defineProperty(String.prototype, 'codePointAt', {
-        'value': codePointAt,
-        'configurable': true,
-        'writable': true
-      });
-    } else {
-      String.prototype.codePointAt = codePointAt;
-    }
-  }());
-}
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-string.prototype.codepointat', 'String.prototype.codePointAt')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-string.prototype.codepointat', 'String.prototype.codePointAt')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.String.codePointAt")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("String.fromCodePoint()")}}</li>
- <li>{{jsxref("String.fromCharCode()")}}</li>
- <li>{{jsxref("String.prototype.charCodeAt()")}}</li>
- <li>{{jsxref("String.prototype.charAt()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/string/codepointat/index.md b/files/fr/web/javascript/reference/global_objects/string/codepointat/index.md
new file mode 100644
index 0000000000..8f6b9a9827
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/string/codepointat/index.md
@@ -0,0 +1,124 @@
+---
+title: String.prototype.codePointAt()
+slug: Web/JavaScript/Reference/Global_Objects/String/codePointAt
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - String
+  - polyfill
+translation_of: Web/JavaScript/Reference/Global_Objects/String/codePointAt
+original_slug: Web/JavaScript/Reference/Objets_globaux/String/codePointAt
+---
+{{JSRef}}
+
+La méthode **`codePointAt()`** renvoie un entier positif qui correspond au code Unicode (_code point_) du caractère de la chaîne à la position donnée.
+
+{{EmbedInteractiveExample("pages/js/string-codepointat.html")}}
+
+## Syntaxe
+
+    str.codePointAt(pos)
+
+### Paramètres
+
+- `pos`
+  - : La position de l'élément dans la chaîne de caractères dont on souhaite obtenir la valeur du codet.
+
+### Valeur de retour
+
+Un nombre qui représente la valeur du point de code du caractère à la position indiqué. C'est la valeur {{jsxref("undefined")}} qui est renvoyée s'il n'y aucun élément à `pos`.
+
+## Description
+
+S'il n'y a pas d'élément à la position donnée, la valeur renvoyée sera {{jsxref("undefined")}}. Si ce n'est pas un élément représenté sur deux demi-codets (_surrogate pair_) UTF-16 et qui commence à `pos`, le codet de l'élément à l'indice `pos` est renvoyé.
+
+## Exemples
+
+```js
+'ABC'.codePointAt(1);          // 66
+'\uD800\uDC00'.codePointAt(0); // 65536
+
+'XYZ'.codePointAt(42); // undefined
+```
+
+## Prothèse d'émulation (_polyfill_)
+
+Le fragment de code suivant permet d'ajouter la méthode `codePointAt()` pour les chaînes de caractères (`String`). En effet, cette méthode fait partie de ECMAScript 2015 et certains navigateurs peuvent ne pas proposer cette fonction nativement.
+
+```js
+/*! https://mths.be/codepointat v0.2.0 by @mathias */
+if (!String.prototype.codePointAt) {
+  (function() {
+    'use strict'; // needed to support `apply`/`call` with `undefined`/`null`
+    var defineProperty = (function() {
+      // IE 8 only supports `Object.defineProperty` on DOM elements
+      try {
+        var object = {};
+        var $defineProperty = Object.defineProperty;
+        var result = $defineProperty(object, object, object) && $defineProperty;
+      } catch(error) {}
+      return result;
+    }());
+    var codePointAt = function(position) {
+      if (this == null) {
+        throw TypeError();
+      }
+      var string = String(this);
+      var size = string.length;
+      // `ToInteger`
+      var index = position ? Number(position) : 0;
+      if (index != index) { // better `isNaN`
+        index = 0;
+      }
+      // Account for out-of-bounds indices:
+      if (index < 0 || index >= size) {
+        return undefined;
+      }
+      // Get the first code unit
+      var first = string.charCodeAt(index);
+      var second;
+      if ( // check if it’s the start of a surrogate pair
+        first >= 0xD800 && first <= 0xDBFF && // high surrogate
+        size > index + 1 // there is a next code unit
+      ) {
+        second = string.charCodeAt(index + 1);
+        if (second >= 0xDC00 && second <= 0xDFFF) { // low surrogate
+          // https://mathiasbynens.be/notes/javascript-encoding#surrogate-formulae
+          return (first - 0xD800) * 0x400 + second - 0xDC00 + 0x10000;
+        }
+      }
+      return first;
+    };
+    if (defineProperty) {
+      defineProperty(String.prototype, 'codePointAt', {
+        'value': codePointAt,
+        'configurable': true,
+        'writable': true
+      });
+    } else {
+      String.prototype.codePointAt = codePointAt;
+    }
+  }());
+}
+```
+
+## Spécifications
+
+| Spécification                                                                                                                | État                         | Commentaires         |
+| ---------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName('ES2015', '#sec-string.prototype.codepointat', 'String.prototype.codePointAt')}}     | {{Spec2('ES2015')}}     | Définition initiale. |
+| {{SpecName('ESDraft', '#sec-string.prototype.codepointat', 'String.prototype.codePointAt')}} | {{Spec2('ESDraft')}} |                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.String.codePointAt")}}
+
+## Voir aussi
+
+- {{jsxref("String.fromCodePoint()")}}
+- {{jsxref("String.fromCharCode()")}}
+- {{jsxref("String.prototype.charCodeAt()")}}
+- {{jsxref("String.prototype.charAt()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/string/concat/index.html b/files/fr/web/javascript/reference/global_objects/string/concat/index.html
deleted file mode 100644
index 8958a7491f..0000000000
--- a/files/fr/web/javascript/reference/global_objects/string/concat/index.html
+++ /dev/null
@@ -1,103 +0,0 @@
----
-title: String.prototype.concat()
-slug: Web/JavaScript/Reference/Global_Objects/String/concat
-tags:
-  - JavaScript
-  - Méthode
-  - Prototype
-  - Reference
-  - String
-translation_of: Web/JavaScript/Reference/Global_Objects/String/concat
-original_slug: Web/JavaScript/Reference/Objets_globaux/String/concat
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <code><strong>concat()</strong></code> combine le texte de plusieurs chaînes avec la chaîne appelante et renvoie la nouvelle chaîne ainsi formée.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/string-concat.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox notranslate"><var>str</var>.concat(<var>string2</var>[, <var>string</var>3, ..., <var>stringN</var>])</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>string2...string<em>N</em></code></dt>
- <dd>Chaînes de caractères à concaténer ensemble.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Une nouvelle chaîne de caractères qui contient la concaténation des chaînes de caractères fournies.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>La fonction <code>concat()</code> renvoie une nouvelle chaîne correspondant à la concaténation des différents arguments avec la chaîne courante. La chaîne courante est celle sur laquelle a été appelée la méthode <code>concat()</code>. Si les valeurs passées en arguments ne sont pas des chaînes de caractères, elles sont automatiquement converties en chaînes (grâce à leur méthode <code>toString()</code> avant la concaténation).</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<p>L'exemple suivant combine plusieurs chaînes afin d'en former une nouvelle.</p>
-
-<pre class="brush: js notranslate">var coucou = "Bonjour ";
-console.log(coucou.concat("Tristan,", " bonne journée."));
-
-/* Bonjour Tristan, bonne journée. */
-
-var salutation = ['Bonjour', ' ', 'Alfred', ' ', '!'];
-"".concat(...salutation); // "Bonjour Alfred !"
-
-"".concat({});   // [object Object]
-"".concat([]);   // ""
-"".concat(null); // "null"
-"".concat(true); // "true"
-"".concat(4, 5); // "45"
-
-</pre>
-
-<h2 id="Performance">Performance</h2>
-
-<p>Il est fortement recommandé d'utiliser les {{jsxref("Opérateurs/Opérateurs_d_affectation", "opérateurs d'affectation", "", 1)}} (+, +=) plutôt que la méthode <code>concat()</code> pour des raisons de performance.</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES3')}}</td>
-   <td>{{Spec2('ES3')}}</td>
-   <td>Définition initiale. Implémentée avec JavaScript 1.2.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-15.5.4.6', 'String.prototype.concat')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-string.prototype.concat', 'String.prototype.concat')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-string.prototype.concat', 'String.prototype.concat')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.String.concat")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Array.prototype.concat()")}}</li>
- <li>{{jsxref("Opérateurs/Opérateurs_d_affectation", "Les opérateurs d'affectation", "", 1)}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/string/concat/index.md b/files/fr/web/javascript/reference/global_objects/string/concat/index.md
new file mode 100644
index 0000000000..10583c89a1
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/string/concat/index.md
@@ -0,0 +1,76 @@
+---
+title: String.prototype.concat()
+slug: Web/JavaScript/Reference/Global_Objects/String/concat
+tags:
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - String
+translation_of: Web/JavaScript/Reference/Global_Objects/String/concat
+original_slug: Web/JavaScript/Reference/Objets_globaux/String/concat
+---
+{{JSRef}}
+
+La méthode **`concat()`** combine le texte de plusieurs chaînes avec la chaîne appelante et renvoie la nouvelle chaîne ainsi formée.
+
+{{EmbedInteractiveExample("pages/js/string-concat.html")}}
+
+## Syntaxe
+
+    str.concat(string2[, string3, ..., stringN])
+
+### Paramètres
+
+- `string2...stringN`
+  - : Chaînes de caractères à concaténer ensemble.
+
+### Valeur de retour
+
+Une nouvelle chaîne de caractères qui contient la concaténation des chaînes de caractères fournies.
+
+## Description
+
+La fonction `concat()` renvoie une nouvelle chaîne correspondant à la concaténation des différents arguments avec la chaîne courante. La chaîne courante est celle sur laquelle a été appelée la méthode `concat()`. Si les valeurs passées en arguments ne sont pas des chaînes de caractères, elles sont automatiquement converties en chaînes (grâce à leur méthode `toString()` avant la concaténation).
+
+## Exemples
+
+L'exemple suivant combine plusieurs chaînes afin d'en former une nouvelle.
+
+```js
+var coucou = "Bonjour ";
+console.log(coucou.concat("Tristan,", " bonne journée."));
+
+/* Bonjour Tristan, bonne journée. */
+
+var salutation = ['Bonjour', ' ', 'Alfred', ' ', '!'];
+"".concat(...salutation); // "Bonjour Alfred !"
+
+"".concat({});   // [object Object]
+"".concat([]);   // ""
+"".concat(null); // "null"
+"".concat(true); // "true"
+"".concat(4, 5); // "45"
+```
+
+## Performance
+
+Il est fortement recommandé d'utiliser les {{jsxref("Opérateurs/Opérateurs_d_affectation", "opérateurs d'affectation", "", 1)}} (+, +=) plutôt que la méthode `concat()` pour des raisons de performance.
+
+## Spécifications
+
+| Spécification                                                                                                | État                         | Commentaires                                          |
+| ------------------------------------------------------------------------------------------------------------ | ---------------------------- | ----------------------------------------------------- |
+| {{SpecName('ES3')}}                                                                                     | {{Spec2('ES3')}}         | Définition initiale. Implémentée avec JavaScript 1.2. |
+| {{SpecName('ES5.1', '#sec-15.5.4.6', 'String.prototype.concat')}}                     | {{Spec2('ES5.1')}}     |                                                       |
+| {{SpecName('ES6', '#sec-string.prototype.concat', 'String.prototype.concat')}}     | {{Spec2('ES6')}}         |                                                       |
+| {{SpecName('ESDraft', '#sec-string.prototype.concat', 'String.prototype.concat')}} | {{Spec2('ESDraft')}} |                                                       |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.String.concat")}}
+
+## Voir aussi
+
+- {{jsxref("Array.prototype.concat()")}}
+- {{jsxref("Opérateurs/Opérateurs_d_affectation", "Les opérateurs d'affectation", "", 1)}}
diff --git a/files/fr/web/javascript/reference/global_objects/string/endswith/index.html b/files/fr/web/javascript/reference/global_objects/string/endswith/index.html
deleted file mode 100644
index 170935fb6e..0000000000
--- a/files/fr/web/javascript/reference/global_objects/string/endswith/index.html
+++ /dev/null
@@ -1,100 +0,0 @@
----
-title: String.prototype.endsWith()
-slug: Web/JavaScript/Reference/Global_Objects/String/endsWith
-tags:
-  - JavaScript
-  - Méthode
-  - Prototype
-  - Reference
-  - String
-  - polyfill
-translation_of: Web/JavaScript/Reference/Global_Objects/String/endsWith
-original_slug: Web/JavaScript/Reference/Objets_globaux/String/endsWith
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <code><strong>endsWith()</strong></code> renvoie un booléen indiquant si la chaine de caractères se termine par la chaine de caractères fournie en argument.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/string-endswith.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>str</var>.endsWith(chaîneRecherchée[, <var>position</var>]);</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>chaîneRecherchée</code></dt>
- <dd>Les caractères à rechercher à la fin de la chaine de caractères.</dd>
- <dt><code>position</code> {{optional_inline}}</dt>
- <dd>Paramètre optionnel. Permet de rechercher dans la chaine de caractères comme si elle faisait cette longueur ; par défaut il s'agit de la longueur de la chaine de caractères <code>chaîneRecherchée</code>. Si la valeur fournie est supérieure à la longueur de la chaine de caractères, elle ne sera pas prise en compte.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p><code>true</code> si la chaîne de caractères se termine par la sous-chaîne indiquée, <code>false</code> sinon.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>Cette méthode permet de savoir si une chaine de caractères se termine avec une certaine chaine de caractères (comme les autres méthodes fonctionnant avec des chaînes de caractères, cette méthode est sensible à la casse).</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<pre class="brush:js;">var str = "Être, ou ne pas être : telle est la question.";
-
-console.log(str.endsWith("question."));     // true
-console.log(str.endsWith("pas être"));      // false
-console.log(str.endsWith("pas être", 20));  // true
-</pre>
-
-<h2 id="Prothèse_d'émulation_(polyfill)">Prothèse d'émulation (<em>polyfill</em>)</h2>
-
-<p>Cette méthode a été ajoutée dans la spécification ECMAScript 6 et peut ne pas être disponible dans toutes les implémentations de JavaScript. Cependant, il est possible d'émuler le comportement de <code>String.prototype.endsWith</code> avec le fragment de code suivant :</p>
-
-<pre class="brush: js">if (!String.prototype.endsWith) {
-  String.prototype.endsWith = function(searchString, position) {
-    var subjectString = this.toString();
-    if (typeof position !== 'number' || !isFinite(position) || Math.floor(position) !== position || position &gt; subjectString.length) {
-      position = subjectString.length;
-    }
-    position -= searchString.length;
-    var lastIndex = subjectString.lastIndexOf(searchString, position);
-    return lastIndex !== -1 &amp;&amp; lastIndex === position;
-  };
-}
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-string.prototype.endswith', 'String.prototype.endsWith')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-string.prototype.endswith', 'String.prototype.endsWith')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.String.endsWith")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("String.prototype.startsWith()")}}</li>
- <li>{{jsxref("String.prototype.includes()")}}</li>
- <li>{{jsxref("String.prototype.indexOf()")}}</li>
- <li>{{jsxref("String.prototype.lastIndexOf()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/string/endswith/index.md b/files/fr/web/javascript/reference/global_objects/string/endswith/index.md
new file mode 100644
index 0000000000..ce3dc39e2d
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/string/endswith/index.md
@@ -0,0 +1,83 @@
+---
+title: String.prototype.endsWith()
+slug: Web/JavaScript/Reference/Global_Objects/String/endsWith
+tags:
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - String
+  - polyfill
+translation_of: Web/JavaScript/Reference/Global_Objects/String/endsWith
+original_slug: Web/JavaScript/Reference/Objets_globaux/String/endsWith
+---
+{{JSRef}}
+
+La méthode **`endsWith()`** renvoie un booléen indiquant si la chaine de caractères se termine par la chaine de caractères fournie en argument.
+
+{{EmbedInteractiveExample("pages/js/string-endswith.html")}}
+
+## Syntaxe
+
+    str.endsWith(chaîneRecherchée[, position]);
+
+### Paramètres
+
+- `chaîneRecherchée`
+  - : Les caractères à rechercher à la fin de la chaine de caractères.
+- `position` {{optional_inline}}
+  - : Paramètre optionnel. Permet de rechercher dans la chaine de caractères comme si elle faisait cette longueur ; par défaut il s'agit de la longueur de la chaine de caractères `chaîneRecherchée`. Si la valeur fournie est supérieure à la longueur de la chaine de caractères, elle ne sera pas prise en compte.
+
+### Valeur de retour
+
+`true` si la chaîne de caractères se termine par la sous-chaîne indiquée, `false` sinon.
+
+## Description
+
+Cette méthode permet de savoir si une chaine de caractères se termine avec une certaine chaine de caractères (comme les autres méthodes fonctionnant avec des chaînes de caractères, cette méthode est sensible à la casse).
+
+## Exemples
+
+```js
+var str = "Être, ou ne pas être : telle est la question.";
+
+console.log(str.endsWith("question."));     // true
+console.log(str.endsWith("pas être"));      // false
+console.log(str.endsWith("pas être", 20));  // true
+```
+
+## Prothèse d'émulation (_polyfill_)
+
+Cette méthode a été ajoutée dans la spécification ECMAScript 6 et peut ne pas être disponible dans toutes les implémentations de JavaScript. Cependant, il est possible d'émuler le comportement de `String.prototype.endsWith` avec le fragment de code suivant :
+
+```js
+if (!String.prototype.endsWith) {
+  String.prototype.endsWith = function(searchString, position) {
+    var subjectString = this.toString();
+    if (typeof position !== 'number' || !isFinite(position) || Math.floor(position) !== position || position > subjectString.length) {
+      position = subjectString.length;
+    }
+    position -= searchString.length;
+    var lastIndex = subjectString.lastIndexOf(searchString, position);
+    return lastIndex !== -1 && lastIndex === position;
+  };
+}
+```
+
+## Spécifications
+
+| Spécification                                                                                                        | État                         | Commentaires         |
+| -------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName('ES6', '#sec-string.prototype.endswith', 'String.prototype.endsWith')}}         | {{Spec2('ES6')}}         | Définition initiale. |
+| {{SpecName('ESDraft', '#sec-string.prototype.endswith', 'String.prototype.endsWith')}} | {{Spec2('ESDraft')}} |                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.String.endsWith")}}
+
+## Voir aussi
+
+- {{jsxref("String.prototype.startsWith()")}}
+- {{jsxref("String.prototype.includes()")}}
+- {{jsxref("String.prototype.indexOf()")}}
+- {{jsxref("String.prototype.lastIndexOf()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/string/fixed/index.html b/files/fr/web/javascript/reference/global_objects/string/fixed/index.html
deleted file mode 100644
index c014787858..0000000000
--- a/files/fr/web/javascript/reference/global_objects/string/fixed/index.html
+++ /dev/null
@@ -1,73 +0,0 @@
----
-title: String.prototype.fixed()
-slug: Web/JavaScript/Reference/Global_Objects/String/fixed
-tags:
-  - Déprécié
-  - JavaScript
-  - Méthode
-  - Prototype
-  - Reference
-  - String
-translation_of: Web/JavaScript/Reference/Global_Objects/String/fixed
-original_slug: Web/JavaScript/Reference/Objets_globaux/String/fixed
----
-<div>{{JSRef}}{{deprecated_header}}</div>
-
-<p>La méthode <code><strong>fixed()</strong></code> permet de créer un élément HTML {{HTMLElement("tt")}}, ce qui permet d'afficher le texte de la chaîne de caractère dans une fonte à chasse fixe.</p>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>str</var>.fixed()</pre>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Une chaîne de caractères représentant un élément HTML {{HTMLElement("tt")}}.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>La méthode <code>fixed()</code> encadre une chaîne de caractères dans une balise <code>&lt;tt&gt;</code> :<br>
- <code>"&lt;tt&gt;str&lt;/tt&gt;</code>"</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<p>L'exemple suivant illustre l'utilisation de la méthode <code>fixed</code> pour formater une chaîne de caractères :</p>
-
-<pre class="brush:js">var worldString = "Coucou monde";
-
-console.log(worldString.fixed());
-// "&lt;tt&gt;Coucou monde&lt;/tt&gt;"
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-string.prototype.fixed', 'String.prototype.fixed')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td>Définition initiale. Implémentée dans JavaScript 1.0. Définie dans l'annexe B (normative) pour les fonctionnalités ECMAScript additionnelles pour les navigateurs web.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-string.prototype.fixed', 'String.prototype.fixed')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td>Définie dans l'annexe B (normative) pour les fonctionnalités ECMAScript additionnelles pour les navigateurs web.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.String.fixed")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("String.prototype.bold()")}}</li>
- <li>{{jsxref("String.prototype.italics()")}}</li>
- <li>{{jsxref("String.prototype.strike()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/string/fixed/index.md b/files/fr/web/javascript/reference/global_objects/string/fixed/index.md
new file mode 100644
index 0000000000..482010f528
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/string/fixed/index.md
@@ -0,0 +1,57 @@
+---
+title: String.prototype.fixed()
+slug: Web/JavaScript/Reference/Global_Objects/String/fixed
+tags:
+  - Déprécié
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - String
+translation_of: Web/JavaScript/Reference/Global_Objects/String/fixed
+original_slug: Web/JavaScript/Reference/Objets_globaux/String/fixed
+---
+{{JSRef}}{{deprecated_header}}
+
+La méthode **`fixed()`** permet de créer un élément HTML {{HTMLElement("tt")}}, ce qui permet d'afficher le texte de la chaîne de caractère dans une fonte à chasse fixe.
+
+## Syntaxe
+
+    str.fixed()
+
+### Valeur de retour
+
+Une chaîne de caractères représentant un élément HTML {{HTMLElement("tt")}}.
+
+## Description
+
+La méthode `fixed()` encadre une chaîne de caractères dans une balise `<tt>` :
+`"<tt>str</tt>`"
+
+## Exemples
+
+L'exemple suivant illustre l'utilisation de la méthode `fixed` pour formater une chaîne de caractères :
+
+```js
+var worldString = "Coucou monde";
+
+console.log(worldString.fixed());
+// "<tt>Coucou monde</tt>"
+```
+
+## Spécifications
+
+| Spécification                                                                                                | État                         | Commentaires                                                                                                                                                           |
+| ------------------------------------------------------------------------------------------------------------ | ---------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| {{SpecName('ES6', '#sec-string.prototype.fixed', 'String.prototype.fixed')}}         | {{Spec2('ES6')}}         | Définition initiale. Implémentée dans JavaScript 1.0. Définie dans l'annexe B (normative) pour les fonctionnalités ECMAScript additionnelles pour les navigateurs web. |
+| {{SpecName('ESDraft', '#sec-string.prototype.fixed', 'String.prototype.fixed')}} | {{Spec2('ESDraft')}} | Définie dans l'annexe B (normative) pour les fonctionnalités ECMAScript additionnelles pour les navigateurs web.                                                       |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.String.fixed")}}
+
+## Voir aussi
+
+- {{jsxref("String.prototype.bold()")}}
+- {{jsxref("String.prototype.italics()")}}
+- {{jsxref("String.prototype.strike()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/string/fontcolor/index.html b/files/fr/web/javascript/reference/global_objects/string/fontcolor/index.html
deleted file mode 100644
index 3ae3b58925..0000000000
--- a/files/fr/web/javascript/reference/global_objects/string/fontcolor/index.html
+++ /dev/null
@@ -1,88 +0,0 @@
----
-title: String.prototype.fontcolor()
-slug: Web/JavaScript/Reference/Global_Objects/String/fontcolor
-tags:
-  - Déprécié
-  - JavaScript
-  - Méthode
-  - Prototype
-  - Reference
-  - String
-translation_of: Web/JavaScript/Reference/Global_Objects/String/fontcolor
-original_slug: Web/JavaScript/Reference/Objets_globaux/String/fontcolor
----
-<div>{{JSRef}}{{deprecated_header}}</div>
-
-<p>La méthode <code><strong>fontcolor()</strong></code> permet de créer un élément {{HTMLElement("font")}} qui permet d'afficher la chaine de caractères dans une fonte utilisant la couleur donnée.</p>
-
-<div class="note">
-<p><strong>Note :</strong> L'élément &lt;font&gt; a été retiré dans <a href="/fr/docs/Web/Guide/HTML/HTML5">HTML5</a> et ne devrait plus être utilisé. Les propriétés <a href="/fr/docs/Web/CSS">CSS</a> permettent de modifier les aspects de mise en forme et doivent donc être utilisées à la place.</p>
-</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>str</var>.fontcolor(<var>couleur</var>)</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>couleur</code></dt>
- <dd>Une chaîne de caractères représentant la couleur en une valeur hexadécimale RGB ou comme un littéral. Les différents littéraux utilisables pour les noms de couleurs sont listés dans la <a href="/fr/docs/Web/CSS/color_value#Valeurs">référence des couleurs CSS</a>.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Une chaîne de caractères représentant un élément HTML {{HTMLElement("font")}}.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>Si la couleur est représentée sous forme d'un triplet RVB, le format attendu est <code>rrvvbb</code>. Ainsi, pour représenter un rose saumon, les différentes composantes seront rouge = FA,  vert = 80, et bleu = 72, le triplet s'écrit donc "<code>FA8072</code>".</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<p>L'exemple qui suit illustre comment utiliser la méthode <code>fontcolor()</code> pour modifier la couleur d'une chaîne de caractères en créant une balise <code>&lt;font&gt;</code> qui encadre la chaîne.</p>
-
-<pre class="brush: js">var worldString = "Coucou monde";
-
-console.log(worldString.fontcolor("red") +  " avec le littéral red sur cette ligne");
-// '&lt;font color="red"&gt;Coucou monde&lt;/font&gt; avec le littéral red sur cette ligne'
-
-console.log(worldString.fontcolor("FF00") + " avec la valeur hexadécimale sur cette ligne");
-// '&lt;font color="FF00"&gt;Coucou monde&lt;/font&gt; avec la valeur hexadécimale sur cette ligne'
-</pre>
-
-<p>L'objet {{domxref("HTMLElement.style", "element.style")}} permet d'utiliser l'attribut <code>style</code> de l'élément et de le manipuler de façon générique. Par exemple :</p>
-
-<pre class="brush: js">document.getElementById('IDdeVotreElement').style.color = 'red'</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-string.prototype.fontcolor', 'String.prototype.fontcolor')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td>Définition initiale. Implémentée dans JavaScript 1.0. Définie dans l'annexe B (normative) pour les fonctionnalités ECMAScript additionnelles pour les navigateurs web.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-string.prototype.fontcolor', 'String.prototype.fontcolor')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td>Définie dans l'annexe B (normative) pour les fonctionnalités ECMAScript additionnelles pour les navigateurs web.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.String.fontcolor")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("String.prototype.fontsize()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/string/fontcolor/index.md b/files/fr/web/javascript/reference/global_objects/string/fontcolor/index.md
new file mode 100644
index 0000000000..0764c3f5d1
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/string/fontcolor/index.md
@@ -0,0 +1,70 @@
+---
+title: String.prototype.fontcolor()
+slug: Web/JavaScript/Reference/Global_Objects/String/fontcolor
+tags:
+  - Déprécié
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - String
+translation_of: Web/JavaScript/Reference/Global_Objects/String/fontcolor
+original_slug: Web/JavaScript/Reference/Objets_globaux/String/fontcolor
+---
+{{JSRef}}{{deprecated_header}}
+
+La méthode **`fontcolor()`** permet de créer un élément {{HTMLElement("font")}} qui permet d'afficher la chaine de caractères dans une fonte utilisant la couleur donnée.
+
+> **Note :** L'élément \<font> a été retiré dans [HTML5](/fr/docs/Web/Guide/HTML/HTML5) et ne devrait plus être utilisé. Les propriétés [CSS](/fr/docs/Web/CSS) permettent de modifier les aspects de mise en forme et doivent donc être utilisées à la place.
+
+## Syntaxe
+
+    str.fontcolor(couleur)
+
+### Paramètres
+
+- `couleur`
+  - : Une chaîne de caractères représentant la couleur en une valeur hexadécimale RGB ou comme un littéral. Les différents littéraux utilisables pour les noms de couleurs sont listés dans la [référence des couleurs CSS](/fr/docs/Web/CSS/color_value#Valeurs).
+
+### Valeur de retour
+
+Une chaîne de caractères représentant un élément HTML {{HTMLElement("font")}}.
+
+## Description
+
+Si la couleur est représentée sous forme d'un triplet RVB, le format attendu est `rrvvbb`. Ainsi, pour représenter un rose saumon, les différentes composantes seront rouge = FA,  vert = 80, et bleu = 72, le triplet s'écrit donc "`FA8072`".
+
+## Exemples
+
+L'exemple qui suit illustre comment utiliser la méthode `fontcolor()` pour modifier la couleur d'une chaîne de caractères en créant une balise `<font>` qui encadre la chaîne.
+
+```js
+var worldString = "Coucou monde";
+
+console.log(worldString.fontcolor("red") +  " avec le littéral red sur cette ligne");
+// '<font color="red">Coucou monde</font> avec le littéral red sur cette ligne'
+
+console.log(worldString.fontcolor("FF00") + " avec la valeur hexadécimale sur cette ligne");
+// '<font color="FF00">Coucou monde</font> avec la valeur hexadécimale sur cette ligne'
+```
+
+L'objet {{domxref("HTMLElement.style", "element.style")}} permet d'utiliser l'attribut `style` de l'élément et de le manipuler de façon générique. Par exemple :
+
+```js
+document.getElementById('IDdeVotreElement').style.color = 'red'
+```
+
+## Spécifications
+
+| Spécification                                                                                                        | État                         | Commentaires                                                                                                                                                           |
+| -------------------------------------------------------------------------------------------------------------------- | ---------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| {{SpecName('ES6', '#sec-string.prototype.fontcolor', 'String.prototype.fontcolor')}}     | {{Spec2('ES6')}}         | Définition initiale. Implémentée dans JavaScript 1.0. Définie dans l'annexe B (normative) pour les fonctionnalités ECMAScript additionnelles pour les navigateurs web. |
+| {{SpecName('ESDraft', '#sec-string.prototype.fontcolor', 'String.prototype.fontcolor')}} | {{Spec2('ESDraft')}} | Définie dans l'annexe B (normative) pour les fonctionnalités ECMAScript additionnelles pour les navigateurs web.                                                       |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.String.fontcolor")}}
+
+## Voir aussi
+
+- {{jsxref("String.prototype.fontsize()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/string/fontsize/index.html b/files/fr/web/javascript/reference/global_objects/string/fontsize/index.html
deleted file mode 100644
index 72aca87a1a..0000000000
--- a/files/fr/web/javascript/reference/global_objects/string/fontsize/index.html
+++ /dev/null
@@ -1,87 +0,0 @@
----
-title: String.prototype.fontsize()
-slug: Web/JavaScript/Reference/Global_Objects/String/fontsize
-tags:
-  - Deprecated
-  - HTML wrapper methods
-  - JavaScript
-  - Méthode
-  - Prototype
-  - Reference
-  - String
-translation_of: Web/JavaScript/Reference/Global_Objects/String/fontsize
-original_slug: Web/JavaScript/Reference/Objets_globaux/String/fontsize
----
-<div>{{JSRef}}{{deprecated_header}}</div>
-
-<p>La propriété <code><strong>fontsize()</strong></code> permet de créer un élément HTML {{HTMLElement("font")}} qui permet d'afficher la chaîne de caractères dans une fonte de taille donnée.</p>
-
-<div class="note">
-<p><strong>Note :</strong> L'élément &lt;font&gt; a été retiré dans <a href="/fr/docs/Web/Guide/HTML/HTML5">HTML5</a> et ne devrait plus être utilisé. Les propriétés <a href="/fr/docs/Web/CSS">CSS</a> permettent de modifier les aspects de mise en forme et doivent donc être utilisées à la place.</p>
-</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>str</var>.fontsize(<var>taille</var>)</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>taille</code></dt>
- <dd>Un entier compris entre 1 et 7 ou une chaîne de caractère représentant un nombre signé entre 1 et 7.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Une chaîne de caractères représentant un élément HTML {{HTMLElement("font")}}.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>Lorsque le paramètre utilisé est un entier, la taille de la chaîne <code>str</code> correspondra à l'une des 7 tailles définies. Lorsque le paramètre utilisé est une chaîne de caractères (par exemple "-2"), la taille de la fonte sera ajustée relativement à la taille définie par l'élément {{HTMLElement("basefont")}}.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<p>L'exemple qui suit illustre comment utiliser les méthodes pour les chaînes de caractères afin de modifier la taille d'une chaîne de caractères :</p>
-
-<pre class="brush:js">var worldString = "Coucou monde";
-
-console.log(worldString.small()); // &lt;small&gt;Coucou monde&lt;/small&gt;
-console.log(worldString.big()); // &lt;big&gt;Coucou monde&lt;/big&gt;
-console.log(worldString.fontsize(7)); // &lt;font size="7"&gt;Coucou monde&lt;/fontsize&gt;</pre>
-
-<p>L'objet {{domxref("HTMLElement.style", "element.style")}} permet d'utiliser l'attribut <code>style</code> de l'élément et de le manipuler de façon générique. Par exemple :</p>
-
-<pre class="brush: js">document.getElementById('IdElement').style.fontSize = '0.7em'</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-string.prototype.fontsize', 'String.prototype.fontsize')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td>Définition initiale. Implémentée dans JavaScript 1.0. Définie dans l'annexe B (normative) pour les fonctionnalités ECMAScript additionnelles pour les navigateurs web.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-string.prototype.fontsize', 'String.prototype.fontsize')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td>Définie dans l'annexe B (normative) pour les fonctionnalités ECMAScript additionnelles pour les navigateurs web.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.String.fontsize")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("String.prototype.big()")}}</li>
- <li>{{jsxref("String.prototype.small()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/string/fontsize/index.md b/files/fr/web/javascript/reference/global_objects/string/fontsize/index.md
new file mode 100644
index 0000000000..ebbad87fe9
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/string/fontsize/index.md
@@ -0,0 +1,70 @@
+---
+title: String.prototype.fontsize()
+slug: Web/JavaScript/Reference/Global_Objects/String/fontsize
+tags:
+  - Deprecated
+  - HTML wrapper methods
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - String
+translation_of: Web/JavaScript/Reference/Global_Objects/String/fontsize
+original_slug: Web/JavaScript/Reference/Objets_globaux/String/fontsize
+---
+{{JSRef}}{{deprecated_header}}
+
+La propriété **`fontsize()`** permet de créer un élément HTML {{HTMLElement("font")}} qui permet d'afficher la chaîne de caractères dans une fonte de taille donnée.
+
+> **Note :** L'élément \<font> a été retiré dans [HTML5](/fr/docs/Web/Guide/HTML/HTML5) et ne devrait plus être utilisé. Les propriétés [CSS](/fr/docs/Web/CSS) permettent de modifier les aspects de mise en forme et doivent donc être utilisées à la place.
+
+## Syntaxe
+
+    str.fontsize(taille)
+
+### Paramètres
+
+- `taille`
+  - : Un entier compris entre 1 et 7 ou une chaîne de caractère représentant un nombre signé entre 1 et 7.
+
+### Valeur de retour
+
+Une chaîne de caractères représentant un élément HTML {{HTMLElement("font")}}.
+
+## Description
+
+Lorsque le paramètre utilisé est un entier, la taille de la chaîne `str` correspondra à l'une des 7 tailles définies. Lorsque le paramètre utilisé est une chaîne de caractères (par exemple "-2"), la taille de la fonte sera ajustée relativement à la taille définie par l'élément {{HTMLElement("basefont")}}.
+
+## Exemples
+
+L'exemple qui suit illustre comment utiliser les méthodes pour les chaînes de caractères afin de modifier la taille d'une chaîne de caractères :
+
+```js
+var worldString = "Coucou monde";
+
+console.log(worldString.small()); // <small>Coucou monde</small>
+console.log(worldString.big()); // <big>Coucou monde</big>
+console.log(worldString.fontsize(7)); // <font size="7">Coucou monde</fontsize>
+```
+
+L'objet {{domxref("HTMLElement.style", "element.style")}} permet d'utiliser l'attribut `style` de l'élément et de le manipuler de façon générique. Par exemple :
+
+```js
+document.getElementById('IdElement').style.fontSize = '0.7em'
+```
+
+## Spécifications
+
+| Spécification                                                                                                        | État                         | Commentaires                                                                                                                                                           |
+| -------------------------------------------------------------------------------------------------------------------- | ---------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| {{SpecName('ES6', '#sec-string.prototype.fontsize', 'String.prototype.fontsize')}}         | {{Spec2('ES6')}}         | Définition initiale. Implémentée dans JavaScript 1.0. Définie dans l'annexe B (normative) pour les fonctionnalités ECMAScript additionnelles pour les navigateurs web. |
+| {{SpecName('ESDraft', '#sec-string.prototype.fontsize', 'String.prototype.fontsize')}} | {{Spec2('ESDraft')}} | Définie dans l'annexe B (normative) pour les fonctionnalités ECMAScript additionnelles pour les navigateurs web.                                                       |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.String.fontsize")}}
+
+## Voir aussi
+
+- {{jsxref("String.prototype.big()")}}
+- {{jsxref("String.prototype.small()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/string/fromcharcode/index.html b/files/fr/web/javascript/reference/global_objects/string/fromcharcode/index.html
deleted file mode 100644
index db155abb0d..0000000000
--- a/files/fr/web/javascript/reference/global_objects/string/fromcharcode/index.html
+++ /dev/null
@@ -1,114 +0,0 @@
----
-title: String.fromCharCode()
-slug: Web/JavaScript/Reference/Global_Objects/String/fromCharCode
-tags:
-  - JavaScript
-  - Méthode
-  - Reference
-  - String
-  - UTF-16
-  - Unicode
-translation_of: Web/JavaScript/Reference/Global_Objects/String/fromCharCode
-original_slug: Web/JavaScript/Reference/Objets_globaux/String/fromCharCode
----
-<div>{{JSRef}}</div>
-
-<p>La méthode statique <code><strong>String.fromCharCode()</strong></code> renvoie une chaîne de caractères créée à partir de points de code UTF-16.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/string-fromcharcode.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">String.fromCharCode(<var>num1</var>, <var>...</var>, <var>numN</var>)</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>num1, ..., numN</code></dt>
- <dd>Une séquence de nombres représentant des points de code UTF-16 entre 0 et 65535 (<code>0xFFFF</code>). Les nombres supérieurs à <code>0xFFFF</code> sont tronqués.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Une chaîne de caractères qui contient les caractères correspondants à la série de points de code UTF-16.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>Cette méthode renvoie une chaîne de caractère et non un objet {{jsxref("String")}}.</p>
-
-<p>La méthode <code>fromCharCode()</code> étant une méthode statique de l'objet <code>String</code>, elle doit toujours être utilisée avec la syntaxe <code>String.fromCharCode()</code> plutôt qu'en appelant la méthode à partir d'un objet <code>String</code> construit sur mesure.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<p>Pour les caractères du plan multilingue de base, UTF-16 utilise une seule unité de code :</p>
-
-<pre class="brush:js">String.fromCharCode(65,66,67); // ABC
-String.fromCharCode(0x2014);   // "—"
-String.fromCharCode(0x12014);  // "—" également, le 1 a été tronqué
-String.fromCharCode(8212);     // renvoie également "—" car 8212
-                               // est la forme décimale
-</pre>
-
-<p>Les caractères hors de ce plan utilisent deux unités de code (on parle de <em>surrogate pair</em>) :</p>
-
-<pre class="brush: js">String.fromCharCode(0xD83C, 0xDF03); // Point de code U+1F303 pour l'émoji nuit étoilée
-
-// Forme décimale équivalente :
-String.fromCharCode(55356, 57091);
-
-String.fromCharCode(0xD834, 0xDF06, 0x61, 0xD834, 0xDF07);
-// "\uD834\uDF06a\uD834\uDF07"
-</pre>
-
-<h2 id="Utiliser_des_valeurs_Unicode_plus_grandes">Utiliser des valeurs Unicode plus grandes</h2>
-
-<p>En UTF-16, les caractères les plus communs sont représentables sur une seule valeur de 16 bits. Toutefois, cet ensemble de caractères (aussi appelé plan multilingue de base ou BMP en anglais) ne représente qu'1/17e de l'espace total représenté par les caractères Unicode. Le reste des points de code, sur l'intervalle 65536 (0x010000) à 1114111 (0x10FFFF) sont des caractères additionnels qui sont représentés par deux valeurs sur 16 bits qu'on appelle <em>surrogate pairs</em> en anglais.</p>
-
-<p>La méthode <code>fromCharCode()</code> ne fonctionne qu'avec des valeurs sur 16 bits et il faudra donc fournir une paire de codets pour obtenir certains caractères. Ainsi, <code>String.fromCharCode(0xD83C, 0xDF03)</code> renvoie le point de code U+1F303 qui représente l'émoji « nuit étoilée ».</p>
-
-<p>Bien qu'il y ait une relation mathématique entre la valeur composée et les deux codets qui forment la paire, on a besoin d'une étape supplémentaire à chaque fois. Aussi, il sera plus pratique d'utiliser {{jsxref("String.fromCodePoint()")}} (ES2015 / ES6) qui permet de manipuler les codes des caractères hors BMP : on pourra ainsi écrire <code>String.fromCodePoint(0x1F303)</code> pour renvoyer le caractère U+1F303 (émoji « nuit étoilée »).</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES1')}}</td>
-   <td>{{Spec2('ES1')}}</td>
-   <td>Définition initiale. Implémentée avec JavaScript 1.2.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-15.5.3.2', 'StringfromCharCode')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-string.fromcharcodes', 'String.fromCharCode')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-string.fromcharcodes', 'String.fromCharCode')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.String.fromCharCode")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("String.prototype.charCodeAt()")}}</li>
- <li>{{jsxref("String.prototype.charAt()")}}</li>
- <li>{{jsxref("String.fromCodePoint()")}}</li>
- <li>{{jsxref("String.prototype.codePointAt()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/string/fromcharcode/index.md b/files/fr/web/javascript/reference/global_objects/string/fromcharcode/index.md
new file mode 100644
index 0000000000..6d1b7f68dd
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/string/fromcharcode/index.md
@@ -0,0 +1,89 @@
+---
+title: String.fromCharCode()
+slug: Web/JavaScript/Reference/Global_Objects/String/fromCharCode
+tags:
+  - JavaScript
+  - Méthode
+  - Reference
+  - String
+  - UTF-16
+  - Unicode
+translation_of: Web/JavaScript/Reference/Global_Objects/String/fromCharCode
+original_slug: Web/JavaScript/Reference/Objets_globaux/String/fromCharCode
+---
+{{JSRef}}
+
+La méthode statique **`String.fromCharCode()`** renvoie une chaîne de caractères créée à partir de points de code UTF-16.
+
+{{EmbedInteractiveExample("pages/js/string-fromcharcode.html")}}
+
+## Syntaxe
+
+    String.fromCharCode(num1, ..., numN)
+
+### Paramètres
+
+- `num1, ..., numN`
+  - : Une séquence de nombres représentant des points de code UTF-16 entre 0 et 65535 (`0xFFFF`). Les nombres supérieurs à `0xFFFF` sont tronqués.
+
+### Valeur de retour
+
+Une chaîne de caractères qui contient les caractères correspondants à la série de points de code UTF-16.
+
+## Description
+
+Cette méthode renvoie une chaîne de caractère et non un objet {{jsxref("String")}}.
+
+La méthode `fromCharCode()` étant une méthode statique de l'objet `String`, elle doit toujours être utilisée avec la syntaxe `String.fromCharCode()` plutôt qu'en appelant la méthode à partir d'un objet `String` construit sur mesure.
+
+## Exemples
+
+Pour les caractères du plan multilingue de base, UTF-16 utilise une seule unité de code :
+
+```js
+String.fromCharCode(65,66,67); // ABC
+String.fromCharCode(0x2014);   // "—"
+String.fromCharCode(0x12014);  // "—" également, le 1 a été tronqué
+String.fromCharCode(8212);     // renvoie également "—" car 8212
+                               // est la forme décimale
+```
+
+Les caractères hors de ce plan utilisent deux unités de code (on parle de _surrogate pair_) :
+
+```js
+String.fromCharCode(0xD83C, 0xDF03); // Point de code U+1F303 pour l'émoji nuit étoilée
+
+// Forme décimale équivalente :
+String.fromCharCode(55356, 57091);
+
+String.fromCharCode(0xD834, 0xDF06, 0x61, 0xD834, 0xDF07);
+// "\uD834\uDF06a\uD834\uDF07"
+```
+
+## Utiliser des valeurs Unicode plus grandes
+
+En UTF-16, les caractères les plus communs sont représentables sur une seule valeur de 16 bits. Toutefois, cet ensemble de caractères (aussi appelé plan multilingue de base ou BMP en anglais) ne représente qu'1/17e de l'espace total représenté par les caractères Unicode. Le reste des points de code, sur l'intervalle 65536 (0x010000) à 1114111 (0x10FFFF) sont des caractères additionnels qui sont représentés par deux valeurs sur 16 bits qu'on appelle _surrogate pairs_ en anglais.
+
+La méthode `fromCharCode()` ne fonctionne qu'avec des valeurs sur 16 bits et il faudra donc fournir une paire de codets pour obtenir certains caractères. Ainsi, `String.fromCharCode(0xD83C, 0xDF03)` renvoie le point de code U+1F303 qui représente l'émoji « nuit étoilée ».
+
+Bien qu'il y ait une relation mathématique entre la valeur composée et les deux codets qui forment la paire, on a besoin d'une étape supplémentaire à chaque fois. Aussi, il sera plus pratique d'utiliser {{jsxref("String.fromCodePoint()")}} (ES2015 / ES6) qui permet de manipuler les codes des caractères hors BMP : on pourra ainsi écrire `String.fromCodePoint(0x1F303)` pour renvoyer le caractère U+1F303 (émoji « nuit étoilée »).
+
+## Spécifications
+
+| Spécification                                                                                        | État                         | Commentaires                                          |
+| ---------------------------------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- |
+| {{SpecName('ES1')}}                                                                             | {{Spec2('ES1')}}         | Définition initiale. Implémentée avec JavaScript 1.2. |
+| {{SpecName('ES5.1', '#sec-15.5.3.2', 'StringfromCharCode')}}                     | {{Spec2('ES5.1')}}     |                                                       |
+| {{SpecName('ES6', '#sec-string.fromcharcodes', 'String.fromCharCode')}}     | {{Spec2('ES6')}}         |                                                       |
+| {{SpecName('ESDraft', '#sec-string.fromcharcodes', 'String.fromCharCode')}} | {{Spec2('ESDraft')}} |                                                       |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.String.fromCharCode")}}
+
+## Voir aussi
+
+- {{jsxref("String.prototype.charCodeAt()")}}
+- {{jsxref("String.prototype.charAt()")}}
+- {{jsxref("String.fromCodePoint()")}}
+- {{jsxref("String.prototype.codePointAt()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/string/fromcodepoint/index.html b/files/fr/web/javascript/reference/global_objects/string/fromcodepoint/index.html
deleted file mode 100644
index 81cf698e35..0000000000
--- a/files/fr/web/javascript/reference/global_objects/string/fromcodepoint/index.html
+++ /dev/null
@@ -1,108 +0,0 @@
----
-title: String.fromCodePoint()
-slug: Web/JavaScript/Reference/Global_Objects/String/fromCodePoint
-tags:
-  - ECMAScript 2015
-  - JavaScript
-  - Méthode
-  - Reference
-  - String
-  - polyfill
-translation_of: Web/JavaScript/Reference/Global_Objects/String/fromCodePoint
-original_slug: Web/JavaScript/Reference/Objets_globaux/String/fromCodePoint
----
-<div>{{JSRef}}</div>
-
-<p>La méthode statique <strong><code>String.fromCodePoint()</code></strong> renvoie une chaîne de caractères créée à partir d'un suite de codets.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/string-fromcodepoint.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">String.fromCodePoint(<var>num1</var>[, ...[, <var>numN</var>]])</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>num1, ..., num<em>N</em></code></dt>
- <dd>Une séquence de codets (<em>code points</em>).</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Une chaîne de caractères créée à partir de la séquence de codets indiquée.</p>
-
-<h3 id="Exceptions">Exceptions</h3>
-
-<ul>
- <li>Une exception {{jsxref("Erreurs/Not_a_codepoint","RangeError")}} est renvoyée si un codet (Unicode) invalide est utilisé (par exemple, on pourra avoir "RangeError: NaN is not a valid code point").</li>
-</ul>
-
-<h2 id="Description">Description</h2>
-
-<p><code>fromCodePoint()</code> étant une méthode statique de {{jsxref("String")}}, elle doit toujours être utilisée avec la syntaxe <code>String.fromCodePoint()</code>, plutôt qu'avec une méthode d'un objet {{jsxref("String")}} qui aurait été créé.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Utiliser_fromCodePoint()">Utiliser <code>fromCodePoint()</code></h3>
-
-<pre class="brush: js">String.fromCodePoint(42);       // "*"
-String.fromCodePoint(65, 90);   // "AZ"
-String.fromCodePoint(0x404);    // "\u0404"
-String.fromCodePoint(0x2F804);  // "\uD87E\uDC04"
-String.fromCodePoint(194564);   // "\uD87E\uDC04"
-String.fromCodePoint(0x1D306, 0x61, 0x1D307) // "\uD834\uDF06a\uD834\uDF07"
-
-String.fromCodePoint('_');      // RangeError
-String.fromCodePoint(Infinity); // RangeError
-String.fromCodePoint(-1);       // RangeError
-String.fromCodePoint(3.14);     // RangeError
-String.fromCodePoint(3e-2);     // RangeError
-String.fromCodePoint(NaN);      // RangeError
-</pre>
-
-<h3 id="Comparaison_avec_fromCharCode()">Comparaison avec <code>fromCharCode()</code></h3>
-
-<p>La méthode {{jsxref("String.fromCharCode()")}} ne peut pas renvoyer les caractères de l'intervalle 0x010000 à 0X10FFFF avec un seul codet, il est nécessaire de lui fournir la paire décomposée (<em>surrogate pair</em>) pour obtenr un tel caractère :</p>
-
-<pre class="brush: js">String.fromCharCode(0xD83C, 0xDF03); // émoji « nuit étoilée »
-String.fromCharCode(55356, 57091);   // équivalent en notation décimale</pre>
-
-<p><code>String.fromCodePoint()</code>, en revanche, peut renvoyer les caractères qui s'expriment sur plus d'un codet de 16 bits grâce à leur codet « simple » :</p>
-
-<pre class="brush: js">String.fromCodePoint(0x1F303); // ou 127747 en notation décimale</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-string.fromcodepoint', 'String.fromCodePoint')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td>Définition initiale</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-string.fromcodepoint', 'String.fromCodePoint')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.String.fromCodePoint")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("String.fromCharCode()")}}</li>
- <li>{{jsxref("String.prototype.charAt()")}}</li>
- <li>{{jsxref("String.prototype.codePointAt()")}}</li>
- <li>{{jsxref("String.prototype.charCodeAt()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/string/fromcodepoint/index.md b/files/fr/web/javascript/reference/global_objects/string/fromcodepoint/index.md
new file mode 100644
index 0000000000..86b4cc9888
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/string/fromcodepoint/index.md
@@ -0,0 +1,92 @@
+---
+title: String.fromCodePoint()
+slug: Web/JavaScript/Reference/Global_Objects/String/fromCodePoint
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Méthode
+  - Reference
+  - String
+  - polyfill
+translation_of: Web/JavaScript/Reference/Global_Objects/String/fromCodePoint
+original_slug: Web/JavaScript/Reference/Objets_globaux/String/fromCodePoint
+---
+{{JSRef}}
+
+La méthode statique **`String.fromCodePoint()`** renvoie une chaîne de caractères créée à partir d'un suite de codets.
+
+{{EmbedInteractiveExample("pages/js/string-fromcodepoint.html")}}
+
+## Syntaxe
+
+    String.fromCodePoint(num1[, ...[, numN]])
+
+### Paramètres
+
+- `num1, ..., numN`
+  - : Une séquence de codets (_code points_).
+
+### Valeur de retour
+
+Une chaîne de caractères créée à partir de la séquence de codets indiquée.
+
+### Exceptions
+
+- Une exception {{jsxref("Erreurs/Not_a_codepoint","RangeError")}} est renvoyée si un codet (Unicode) invalide est utilisé (par exemple, on pourra avoir "RangeError: NaN is not a valid code point").
+
+## Description
+
+`fromCodePoint()` étant une méthode statique de {{jsxref("String")}}, elle doit toujours être utilisée avec la syntaxe `String.fromCodePoint()`, plutôt qu'avec une méthode d'un objet {{jsxref("String")}} qui aurait été créé.
+
+## Exemples
+
+### Utiliser `fromCodePoint()`
+
+```js
+String.fromCodePoint(42);       // "*"
+String.fromCodePoint(65, 90);   // "AZ"
+String.fromCodePoint(0x404);    // "\u0404"
+String.fromCodePoint(0x2F804);  // "\uD87E\uDC04"
+String.fromCodePoint(194564);   // "\uD87E\uDC04"
+String.fromCodePoint(0x1D306, 0x61, 0x1D307) // "\uD834\uDF06a\uD834\uDF07"
+
+String.fromCodePoint('_');      // RangeError
+String.fromCodePoint(Infinity); // RangeError
+String.fromCodePoint(-1);       // RangeError
+String.fromCodePoint(3.14);     // RangeError
+String.fromCodePoint(3e-2);     // RangeError
+String.fromCodePoint(NaN);      // RangeError
+```
+
+### Comparaison avec `fromCharCode()`
+
+La méthode {{jsxref("String.fromCharCode()")}} ne peut pas renvoyer les caractères de l'intervalle 0x010000 à 0X10FFFF avec un seul codet, il est nécessaire de lui fournir la paire décomposée (_surrogate pair_) pour obtenr un tel caractère :
+
+```js
+String.fromCharCode(0xD83C, 0xDF03); // émoji « nuit étoilée »
+String.fromCharCode(55356, 57091);   // équivalent en notation décimale
+```
+
+`String.fromCodePoint()`, en revanche, peut renvoyer les caractères qui s'expriment sur plus d'un codet de 16 bits grâce à leur codet « simple » :
+
+```js
+String.fromCodePoint(0x1F303); // ou 127747 en notation décimale
+```
+
+## Spécifications
+
+| Spécification                                                                                        | État                         | Commentaires        |
+| ---------------------------------------------------------------------------------------------------- | ---------------------------- | ------------------- |
+| {{SpecName('ES2015', '#sec-string.fromcodepoint', 'String.fromCodePoint')}} | {{Spec2('ES2015')}}     | Définition initiale |
+| {{SpecName('ESDraft', '#sec-string.fromcodepoint', 'String.fromCodePoint')}} | {{Spec2('ESDraft')}} |                     |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.String.fromCodePoint")}}
+
+## Voir aussi
+
+- {{jsxref("String.fromCharCode()")}}
+- {{jsxref("String.prototype.charAt()")}}
+- {{jsxref("String.prototype.codePointAt()")}}
+- {{jsxref("String.prototype.charCodeAt()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/string/includes/index.html b/files/fr/web/javascript/reference/global_objects/string/includes/index.html
deleted file mode 100644
index e3aba75116..0000000000
--- a/files/fr/web/javascript/reference/global_objects/string/includes/index.html
+++ /dev/null
@@ -1,126 +0,0 @@
----
-title: String.prototype.includes()
-slug: Web/JavaScript/Reference/Global_Objects/String/includes
-tags:
-  - JavaScript
-  - Méthode
-  - Prototype
-  - Reference
-  - String
-translation_of: Web/JavaScript/Reference/Global_Objects/String/includes
-original_slug: Web/JavaScript/Reference/Objets_globaux/String/includes
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <code><strong>includes()</strong></code> détermine si une chaîne de caractères est contenue dans une autre et renvoie <code>true</code> ou <code>false</code> selon le cas de figure.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/string-includes.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>str</var>.includes(<var>chaîneRecherchée</var>);
-<var>str</var>.includes(<var>chaîneRecherchée</var>, <var>position</var>);</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>chaîneRecherchée</code></dt>
- <dd>Une chaîne à rechercher dans la chaîne courante.</dd>
- <dt><code>position</code> {{optional_inline}}</dt>
- <dd>La position dans la chaîne à partir de laquelle commencera la recherche. La valeur par défaut de <code><var>position</var></code> est 0.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p><code>true</code> si la chaîne de caractères contient la sous-chaîne recherchée, <code>false</code> sinon.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>Cette méthode détermine si une chaîne de caractères est contenue dans une autre.</p>
-
-<h3 id="Sensibilité_à_la_case">Sensibilité à la case</h3>
-
-<p><code>includes()</code> est sensible à la casse. Par exemple, l'expression suivante nous retournera <code>false</code> :</p>
-
-<pre class="brush: js">'Baleine bleue'.includes('baleine'); // false</pre>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Utiliser_includes">Utiliser <code>includes()</code></h3>
-
-<pre class="brush:js;">const str = "Être ou ne pas être, telle est la question.";
-
-console.log(str.includes("Être"));       // true
-console.log(str.includes("question"));   // true
-console.log(str.includes("pléonasme"));  // false
-console.log(str.includes("Être", 1));    // false
-console.log(str.includes("ÊTRE"));       // false
-console.log(str.includes(""));       // true
-</pre>
-
-<h2 id="Prothèse_démulation_polyfill">Prothèse d'émulation (<em>polyfill</em>)</h2>
-
-<p>Cette méthode a été ajoutée à la spécification ECMAScript 2015 et n'est peut-être pas encore disponible dans toutes les implémentations JavaScript.</p>
-
-<p>Cependant, vous pouvez facilement {{Glossary('polyfill')}} cette méthode pour de vieux navigateurs :</p>
-
-<pre class="brush: js">if (!String.prototype.includes) {
-  String.prototype.includes = function(search, start) {
-    'use strict';
-
-    if (search instanceof RegExp) {
-      throw TypeError('first argument must not be a RegExp');
-    }
-    if (start === undefined) { start = 0; }
-    return this.indexOf(search, start) !== -1;
-  };
-}</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-string.prototype.includes', 'String.prototype.includes')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-string.prototype.includes', 'String.prototype.includes')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_du_navigateur">Compatibilité du navigateur</h2>
-
-<p>{{Compat("javascript.builtins.String.includes")}}</p>
-
-<h2 id="String.prototype.contains">String.prototype.contains</h2>
-
-<p>Les versions de Firefox allant de Firefox 18 à Firefox 39 utilisent cette méthode avec le nom <code>contains()</code>. Cette méthode a été renommée en <code>includes()</code> via {{bug(1102219)}} pour la raison suivante :</p>
-
-<p>Il a été <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=789036">rapporté</a> que certains sites web utilisant MooTools 1.2 plantaient sur Firefox 17. Cette version de MooTools vérifie que <code>String.prototype.contains()</code> existe bien, et si ce n'est pas le cas, ajoute sa propre fonction similaire. Avec l'introduction de cette fonction dans Firefox 17, le comportement de ce contrôle a changé de telle manière qu'il cause un plantage du code de MooTools implémenté pour <code>String.prototype.contains()</code>. En conséquence, cette implémentation a été <a href="https://hg.mozilla.org/releases/mozilla-aurora/rev/086db97198a8" title="https://bugzilla.mozilla.org/show_bug.cgi?id=793781">désactivée</a> de Firefox 17. <code>String.prototype.contains()</code> est ainsi disponible sur une version ultérieure : Firefox 18 lorsque <a href="https://mootools.net/blog/2013/02/19/mootools-1-2-6-released">MooTools a déclenché la sortie de la version 1.2.6.</a></p>
-
-<p>MooTools 1.3 force sa propre version de <code>String.prototype.includes()</code>, les sites Web l'implémentant ne sont donc pas perturbés. Néanmoins, il faut noter que les signatures des méthodes diffèrent entre <a href="https://mootools.net/docs/core/Types/String#String:includes">MooTools 1.3</a> et ECMAScript 2015 (pour le second paramètre). <a href="https://github.com/mootools/mootools-core/blob/master/Docs/Types/String.md#note">MooTools 1.5+ a modifié sa signature afin de prendre en compte le standard de ES2015.</a></p>
-
-<p>Dans Firefox 48, la méthode <code>String.prototype.contains()</code> a été retirée. <code>String.prototype.includes()</code> doit être utilisée à la place.</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Array.prototype.includes()")}}</li>
- <li>{{jsxref("TypedArray.prototype.includes()")}}</li>
- <li>{{jsxref("String.prototype.indexOf()")}}</li>
- <li>{{jsxref("String.prototype.lastIndexOf()")}}</li>
- <li>{{jsxref("String.prototype.startsWith()")}}</li>
- <li>{{jsxref("String.prototype.endsWith()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/string/includes/index.md b/files/fr/web/javascript/reference/global_objects/string/includes/index.md
new file mode 100644
index 0000000000..55799ebce2
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/string/includes/index.md
@@ -0,0 +1,110 @@
+---
+title: String.prototype.includes()
+slug: Web/JavaScript/Reference/Global_Objects/String/includes
+tags:
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - String
+translation_of: Web/JavaScript/Reference/Global_Objects/String/includes
+original_slug: Web/JavaScript/Reference/Objets_globaux/String/includes
+---
+{{JSRef}}
+
+La méthode **`includes()`** détermine si une chaîne de caractères est contenue dans une autre et renvoie `true` ou `false` selon le cas de figure.
+
+{{EmbedInteractiveExample("pages/js/string-includes.html")}}
+
+## Syntaxe
+
+    str.includes(chaîneRecherchée);
+    str.includes(chaîneRecherchée, position);
+
+### Paramètres
+
+- `chaîneRecherchée`
+  - : Une chaîne à rechercher dans la chaîne courante.
+- `position` {{optional_inline}}
+  - : La position dans la chaîne à partir de laquelle commencera la recherche. La valeur par défaut de `position` est 0.
+
+### Valeur de retour
+
+`true` si la chaîne de caractères contient la sous-chaîne recherchée, `false` sinon.
+
+## Description
+
+Cette méthode détermine si une chaîne de caractères est contenue dans une autre.
+
+### Sensibilité à la case
+
+`includes()` est sensible à la casse. Par exemple, l'expression suivante nous retournera `false` :
+
+```js
+'Baleine bleue'.includes('baleine'); // false
+```
+
+## Exemples
+
+### Utiliser `includes()`
+
+```js
+const str = "Être ou ne pas être, telle est la question.";
+
+console.log(str.includes("Être"));       // true
+console.log(str.includes("question"));   // true
+console.log(str.includes("pléonasme"));  // false
+console.log(str.includes("Être", 1));    // false
+console.log(str.includes("ÊTRE"));       // false
+console.log(str.includes(""));       // true
+```
+
+## Prothèse d'émulation (_polyfill_)
+
+Cette méthode a été ajoutée à la spécification ECMAScript 2015 et n'est peut-être pas encore disponible dans toutes les implémentations JavaScript.
+
+Cependant, vous pouvez facilement {{Glossary('polyfill')}} cette méthode pour de vieux navigateurs :
+
+```js
+if (!String.prototype.includes) {
+  String.prototype.includes = function(search, start) {
+    'use strict';
+
+    if (search instanceof RegExp) {
+      throw TypeError('first argument must not be a RegExp');
+    }
+    if (start === undefined) { start = 0; }
+    return this.indexOf(search, start) !== -1;
+  };
+}
+```
+
+## Spécifications
+
+| Spécification                                                                                                        | État                         | Commentaires         |
+| -------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName('ESDraft', '#sec-string.prototype.includes', 'String.prototype.includes')}} | {{Spec2('ESDraft')}} |                      |
+| {{SpecName('ES6', '#sec-string.prototype.includes', 'String.prototype.includes')}}         | {{Spec2('ES6')}}         | Définition initiale. |
+
+## Compatibilité du navigateur
+
+{{Compat("javascript.builtins.String.includes")}}
+
+## String.prototype.contains
+
+Les versions de Firefox allant de Firefox 18 à Firefox 39 utilisent cette méthode avec le nom `contains()`. Cette méthode a été renommée en `includes()` via {{bug(1102219)}} pour la raison suivante :
+
+Il a été [rapporté](https://bugzilla.mozilla.org/show_bug.cgi?id=789036) que certains sites web utilisant MooTools 1.2 plantaient sur Firefox 17. Cette version de MooTools vérifie que `String.prototype.contains()` existe bien, et si ce n'est pas le cas, ajoute sa propre fonction similaire. Avec l'introduction de cette fonction dans Firefox 17, le comportement de ce contrôle a changé de telle manière qu'il cause un plantage du code de MooTools implémenté pour `String.prototype.contains()`. En conséquence, cette implémentation a été [désactivée](https://hg.mozilla.org/releases/mozilla-aurora/rev/086db97198a8 "https://bugzilla.mozilla.org/show_bug.cgi?id=793781") de Firefox 17. `String.prototype.contains()` est ainsi disponible sur une version ultérieure : Firefox 18 lorsque [MooTools a déclenché la sortie de la version 1.2.6.](https://mootools.net/blog/2013/02/19/mootools-1-2-6-released)
+
+MooTools 1.3 force sa propre version de `String.prototype.includes()`, les sites Web l'implémentant ne sont donc pas perturbés. Néanmoins, il faut noter que les signatures des méthodes diffèrent entre [MooTools 1.3](https://mootools.net/docs/core/Types/String#String:includes) et ECMAScript 2015 (pour le second paramètre). [MooTools 1.5+ a modifié sa signature afin de prendre en compte le standard de ES2015.](https://github.com/mootools/mootools-core/blob/master/Docs/Types/String.md#note)
+
+Dans Firefox 48, la méthode `String.prototype.contains()` a été retirée. `String.prototype.includes()` doit être utilisée à la place.
+
+## Voir aussi
+
+- {{jsxref("Array.prototype.includes()")}}
+- {{jsxref("TypedArray.prototype.includes()")}}
+- {{jsxref("String.prototype.indexOf()")}}
+- {{jsxref("String.prototype.lastIndexOf()")}}
+- {{jsxref("String.prototype.startsWith()")}}
+- {{jsxref("String.prototype.endsWith()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/string/index.html b/files/fr/web/javascript/reference/global_objects/string/index.html
deleted file mode 100644
index 11a12969ca..0000000000
--- a/files/fr/web/javascript/reference/global_objects/string/index.html
+++ /dev/null
@@ -1,391 +0,0 @@
----
-title: String
-slug: Web/JavaScript/Reference/Global_Objects/String
-tags:
-  - Class
-  - ECMAScript 2015
-  - JavaScript
-  - Reference
-  - String
-translation_of: Web/JavaScript/Reference/Global_Objects/String
-original_slug: Web/JavaScript/Reference/Objets_globaux/String
-browser-compat: javascript.builtins.String
----
-<div>{{JSRef}}</div>
-
-<p>Un objet <strong><code>String</code></strong> est utilisé afin de représenter et de manipuler une chaîne de caractères.</p>
-
-<h2 id="description">Description</h2>
-
-<p>Les chaînes de caractères sont utiles pour stocker des données qui peuvent être représentées sous forme de texte. Parmi les opérations les plus utilisées pour manipuler les chaînes de caractères, on a : la vérification de leur longueur avec <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/String/length"><code>length</code></a>, la construction et la concaténation avec <a href="/fr/docs/Web/JavaScript/Guide/Expressions_and_Operators#string_operators">les opérateurs <code>+</code> et <code>+=</code></a>, la recherche de sous-chaîne avec les méthodes <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/String/includes"><code>includes()</code></a> ou <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/String/indexOf"><code>indexOf()</code></a> ou encore l'extraction de sous-chaînes avec la méthode <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/String/substring"><code>substring()</code></a>.</p>
-
-<h3 id="creating_strings">Créer des chaînes de caractères</h3>
-
-<p>Il est possible de créer des chaînes de caractères comme des valeurs primitives ou comme des objets avec le constructeur <a href="/fr/docs/Web/JavaScript/Reference/String/String"><code>String()</code></a> :</p>
-
-<pre class="brush: js">
-const string1 = "Une chaîne de caractères primitive";
-const string2 = 'Là encore une valeur de chaîne de caractères primitive';
-const string3 = `Et ici aussi`;</pre>
-
-<pre class="brush: js">
-const string4 = new String("Un objet String");
-</pre>
-
-<p>Les valeurs primitives ou les objets représentant des chaînes de caractères peuvent être utilisés de façon interchangeable dans la plupart des situations. Voir ci-après <a href="#string_primitives_and_string_objects">Chaînes de caractères : valeurs primitives et objets</a>.</p>
-
-<p>Les valeurs littérales pour les chaînes de caractères peuvent être indiquées avec des simples quotes (<kbd>'</kbd>), des doubles quotes (<kbd>"</kbd>) ou encore par des accents graves (<kbd>`</kbd>). Cette dernière forme permet de définir un <a href="/fr/docs/Web/JavaScript/Reference/Template_literals">littéral de gabarit de chaîne de caractères</a> avec lequel on pourra interpoler des expressions dans une chaîne de caractères.</p>
-
-<h3 id="character_access">Accéder à un caractère</h3>
-
-<p>Il existe deux façons d'accéder à un caractère dans une chaîne. La première façon consiste à utiliser la méthode <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/String/charAt"><code>charAt()</code></a> :</p>
-
-<pre class="brush: js">
-return 'chat'.charAt(2); // renvoie "a"
-</pre>
-
-<p>La seconde méthode, introduite avec ECMAScript 5, est de manipuler la chaîne comme un tableau, où les caractères sont les éléments du tableau et ont un indice correspondant à leur position :</p>
-
-<pre class="brush: js">
-return 'chat'[2]; // renvoie "a"
-</pre>
-
-<p>En utilisant la seconde notation, il est impossible de supprimer ou d'affecter une valeur à ces propriétés. En effet, les propriétés concernées ne sont ni accessibles en écriture ni configurables. Pour plus d'informations, voir la page de <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty"><code>Object.defineProperty()</code></a>.</p>
-
-<h3 id="comparing_strings">Comparer des chaînes de caractères</h3>
-
-<p>Les développeurs C utilisent la fonction <code>strcmp()</code> pour comparer des chaînes de caractères. En JavaScript, il est possible d'utiliser <a href="/fr/docs/Web/JavaScript/Reference/Operators">les opérateurs inférieur et supérieur </a>:</p>
-
-<pre class="brush: js">
-let a = "a";
-let b = "b";
-if (a &lt; b) { // true
-  console.log(a + " est inférieure à " + b);
-} else if (a &gt; b) {
-  console.log(a + " est supérieure à " + b);
-} else {
-  console.log(a + " et " + b + " sont égales.");
-}
-</pre>
-
-<p>On peut obtenir un résultat semblable avec la méthode <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/String/localeCompare"><code>localeCompare()</code></a> qui permet de prendre en compte la locale utilisée et qui est héritée par toutes les instances de <code>String</code>.</p>
-
-<p>On notera que <code>a == b</code> compare les chaînes de caractères <code><var>a</var></code> et <code><var>b</var></code> de façon sensible à la casse. Si on souhaite comparer des chaînes sans être sensible à la casse, on pourra utiliser une fonction semblable à&nbsp;:</p>
-
-<pre class="brush: js">
-function isEqual(str1, str2) {
-  return str1.toUpperCase() === str2.toUpperCase()
-}
-</pre>
-
-<p>On utilise ici une conversion en majuscules plutôt qu'en minuscules, car cela cause certains problèmes de conversion pour certains caractères UTF-8.</p>
-
-<h3 id="string_primitives_and_string_objects">Les différences entre les objets <code>String</code> et le type primitif pour les chaînes de caractères</h3>
-
-<p>En JavaScript, on distingue d'une part les objets <code>String</code> et d'autre par les valeurs primitives qui sont des chaînes de caractères (il en va de même pour les booléens/<a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Boolean"><code>Boolean</code></a> et les nombres/<a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Number"><code>Number</code></a>).</p>
-
-<p>Les valeurs littérales (délimitées par des simples quotes, des doubles quotes ou des accents graves et les chaînes de caractères renvoyées par les appels à <code>String</code> sans le mot-clé <a href="/fr/docs/Web/JavaScript/Reference/Operators/new"><code>new</code></a> sont des chaînes de caractères primitives. JavaScript convertit automatiquement les valeurs primitives en objets <code>String</code> et il est donc possible d'utiliser les méthodes objet de <code>String</code> sur les chaînes de caractères primitives. Dans les contextes où une méthode est appelée sur une chaîne de caractères primitive ou alors qu'on recherche une propriété, JavaScript convertira implicitement la valeur primitive et appellera la méthode ou accèdera à la propriété correspondante.</p>
-
-<pre class="brush: js">
-let s_prim = "toto";
-let s_obj = new String(s_prim);
-
-console.log(typeof s_prim); // affiche "string"
-console.log(typeof s_obj);  // affiche "object"
-</pre>
-
-<p>Les chaînes primitives et les objets <code>String</code> renvoient des résultats différents lorsqu'ils sont évalués avec <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/eval"><code>eval()</code></a>. Les chaînes primitives sont traitées comme du code source, tandis que les objets <code>String</code> sont traités comme tous les autres objets, en renvoyant l'objet. Par exemple :</p>
-
-<pre class="brush: js">
-let s1 = "2 + 2";                // crée une chaîne primitive
-let s2 = new String("2 + 2");    // crée un objet String
-console.log(eval(s1));           // renvoie le nombre 4
-console.log(eval(s2));           // renvoie la chaîne "2 + 2"
-</pre>
-
-<p>Pour ces raisons, il peut y avoir certains problèmes quand le code attend une chaîne primitive plutôt qu'un objet <code>String</code>. Toutefois, cette distinction est rarement nécessaire en pratique.</p>
-
-<p>Un objet <code>String</code> peut toujours être converti en son équivalent primitif grâce à la méthode <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/String/valueOf"><code>valueOf()</code></a>.</p>
-
-<pre class="brush: js">
-console.log(eval(s2.valueOf())); // renvoie  4
-</pre>
-
-<h3 id="escape_notation">Échappement des caractères</h3>
-
-<p>En dehors des caractères classiques, des caractères spéciaux peuvent être encodés grâce à l'échappement :</p>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Code</th>
-   <th scope="col">Résultat</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><code>\0</code></td>
-   <td>Caractère nul (U+0000 NULL)</td>
-  </tr>
-  <tr>
-   <td><code>\'</code></td>
-   <td>simple quote (U+0027 APOSTROPHE)</td>
-  </tr>
-  <tr>
-   <td><code>\"</code></td>
-   <td>double quote (U+0022 QUOTATION MARK)</td>
-  </tr>
-  <tr>
-   <td><code>\\</code></td>
-   <td>barre oblique inversée (U+005C REVERSE SOLIDUS)</td>
-  </tr>
-  <tr>
-   <td><code>\n</code></td>
-   <td>nouvelle ligne (U+000A LINE FEED; LF)</td>
-  </tr>
-  <tr>
-   <td><code>\r</code></td>
-   <td>retour chariot (U+000D CARRIAGE RETURN; CR)</td>
-  </tr>
-  <tr>
-   <td><code>\v</code></td>
-   <td>tabulation verticale (U+000B LINE TABULATION)</td>
-  </tr>
-  <tr>
-   <td><code>\t</code></td>
-   <td>tabulation (U+0009 CHARACTER TABULATION)</td>
-  </tr>
-  <tr>
-   <td><code>\b</code></td>
-   <td>retour arrière (U+0008 BACKSPACE)</td>
-  </tr>
-  <tr>
-   <td><code>\f</code></td>
-   <td>saut de page (U+000C FORM FEED)</td>
-  </tr>
-  <tr>
-   <td><code>\uXXXX</code> (<code>XXXX</code> étant 4 chiffres hexadécimaux pour l'intervalle of 0x0000 - 0xFFFF)</td>
-   <td>Point de code Unicode entre U+0000 et U+FFFF (représente le plan Unicode multilingue basique)</td>
-  </tr>
-  <tr>
-   <td><code>\u{X}</code> ... <code>\u{XXXXXX}</code> (<code>X…XXXXXX</code> étant 1 à 6 chiffres hexadécimaux pour l'intervalle 0x0 - 0x10FFFF)</td>
-   <td>Point de code Unicode entre U+0000 et U+10FFFF (représente l'intégralité d'Unicode)</td>
-  </tr>
-  <tr>
-   <td><code>\xXX</code> (<code>XX</code> étant 2 chiffres hexadécimaux pour l'intervalle 0x00 - 0xFF)</td>
-   <td>Point de code Unicode entre U+0000 et U+00FF (correspond à Basic Latin et Latin-1 supplement ; équivalent à ISO-8859-1)</td>
-  </tr>
- </tbody>
-</table>
-
-<h3 id="long_literal_strings">Littéraux pour les chaînes longues</h3>
-
-<p>Il peut arriver que le code contienne des chaînes plutôt longues. Plutôt que d'avoir des lignes qui s'étirent sur tout le fichier et dans un éditeur de code, il est possible de casser la chaîne sur plusieurs lignes sans que cela modifie le contenu de la chaîne. Il existe deux façons de faire.</p>
-
-<h4 id="method_1">Méthode 1</h4>
-
-<pre class="brush: js">
-let chaineLongue = "Voici une très longue chaîne qui a besoin " +
-                   " d'être passée à la ligne parce que sinon " +
-                   " ça risque de devenir illisible.";
-</pre>
-
-<h4 id="method_2">Méthode 2</h4>
-
-<p>On peut sinon utiliser le caractère barre oblique inversée "\" à la fin de chaque ligne pour indiquer que la chaîne continue sur la ligne suivante. Il faut bien faire attention à ce que la barre oblique soit bien le dernier caractère de la ligne avant le saut de ligne. Sinon, cela ne fonctionnera pas. Voilà comment se présente cette forme :</p>
-
-<pre class="brush: js">
-let chaineLongue = "Voici une très longue chaîne qui a besoin \
-d'être passée à la ligne parce que sinon \
-ça risque de devenir illisible.";
-</pre>
-
-<h4 id="method_3">Méthode 3</h4>
-
-<p>Si les sauts de ligne doivent faire partie du résultat, on peut utiliser l'accent grave comme délimiteur de chaîne. Celui-ci permet d'utiliser des sauts de ligne à l'intérieur de la valeur littérale.</p>
-
-<pre class="brush: js">
-let chaineLongue = `Voici une très longue chaîne qui a besoin
-d'être passée à la ligne parce que sinon
-ça risque de devenir illisible.`;
-</pre>
-
-<h2 id="constructor">Constructeur</h2>
-
-<dl>
-  <dt><a href="/fr/docs/Web/JavaScript/Reference/String/String"><code>String()</code></a></dt>
-  <dd>Crée un nouvel <code>String</code>. S'il est appelé comme une fonction plutôt que comme un constructeur, il effectue une conversion de la valeur en chaîne de caractères.</dd>
-</dl>
-
-<h2 id="static_methods">Méthodes statiques</h2>
-
-<dl>
-  <dt><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/String/fromCharCode"><code>String.fromCharCode(<var>num1</var> [, ...[,<var>numN</var>]])</code></a></dt>
-  <dd>Renvoie une chaîne de caractères créée en utilisant la séquence indiquée de valeurs Unicode.</dd>
-  <dt><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/String/fromCodePoint"><code>String.fromCodePoint(<var>num1</var> [, ...[,<var>numN</var>]])</code></a></dt>
-  <dd>Renvoie une chaîne de caractères créée en utilisant la séquence indiquée de points de code.</dd>
-  <dt><dt><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/String/raw"><code>String.raw()</code></a></dt></dt>
-  <dd>Renvoie une chaîne de caractères créée à partir d'un gabarit de chaîne de caractères brut.</dd>
-</dl>
-
-<h2 id="instance_properties">Propriétés des instances</h2>
-
-<dl>
-  <dt><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/String/length"><code>String.prototype.length</code></a></dt>
-  <dd>Cette propriété indique la longueur de la chaîne de caractères. Elle est en lecture seule.</dd>
-</dl>
-
-<h2 id="instance_methods">Méthodes des instances</h2>
-
-<dl>
- <dt><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/String/at"><code>String.prototype.at(<var>index</var>)</code></a>{{Experimental_Inline}}</dt>
- <dd>Renvoie le caractère (exactement un seul codet UTF-16) à l'indice indiqué par <code><var>index</var></code>. Les indices négatifs sont acceptés, dans ce cas ils indiquent la position par rapport au dernier caractère.</dd>
-  <dt><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/String/charAt"><code>String.prototype.charAt(<var>index</var>)</code></a></dt>
-  <dd>Renvoie le caractère (exactement un seul codet UTF-16) à l'indice indiqué par <code><var>index</var></code>.</dd>
-  <dt><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/String/charCodeAt"><code>String.prototype.charCodeAt(index)</code></a></dt>
-  <dd>Renvoie un nombre qui est la valeur du codet UTF-16 à l'indice indiqué par <code><var>index</var></code>.</dd>
-  <dt><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/String/codePointAt"><code>String.prototype.codePointAt(pos)</code></a></dt>
-  <dd>Renvoie un entier positif qui correspond à la valeur du codet UTF-16 à la position indiquée par <code><var>pos</var></code>.</dd>
-  <dt><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/String/concat"><code>String.prototype.concat(<var>str </var>[,...<var>strN </var>])</code></a></dt>
-  <dd>Combine le texte de deux (ou plusieurs) chaînes en une nouvelle chaîne de caractères.</dd>
-  <dt><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/String/includes"><code>String.prototype.includes(searchString [, position])</code></a></dt>
-  <dd>Détermine si la chaîne de caractères courante contient <code><var>searchString</var></code>.
-  </dd>
-  <dt><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/String/endsWith"><code>String.prototype.endsWith(searchString [, length])</code></a></dt>
-  <dd>Détermine si la chaîne de caractères courante se termine par <code><var>searchString</var></code>.</dd>
-  <dt><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/String/indexOf"><code>String.prototype.indexOf(searchValue [, fromIndex])</code></a></dt>
-  <dd>Renvoie l'indice, au sein de la chaîne courante, de la première occurrence de <code><var>searchValue</var></code> ou <code>-1</code> si ce motif n'est pas trouvé.
-  </dd>
-  <dt><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/String/lastIndexOf"><code>String.prototype.lastIndexOf(searchValue [, fromIndex])</code></a>
-  </dt>
-  <dd>Renvoie l'indice, au sein de la chaîne courant, de la dernière occurrence de <code><var>searchValue</var></code> ou <code>-1</code> si ce motif n'est pas trouvé.
-  </dd>
-  <dt><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/String/localeCompare"><code>String.prototype.localeCompare(compareString [, locales [, options]])</code></a></dt>
-  <dd>Renvoie un nombre indiquant si la chaîne courante vient avant ou après (ou est équivalente à ) <code><var>compareString</var></code> pour l'ordre de tri.</dd>
-  <dt><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/String/match"><code>String.prototype.match(<var>regexp</var>)</code></a>
-  </dt>
-  <dd>Permet de tester la correspondance d'une expression rationnelle entre <code><var>regexp</var></code> et la chaîne de caractères courante.
-  </dd>
-  <dt><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/String/matchAll"><code>String.prototype.matchAll(regexp)</code></a></dt>
-  <dd>Renvoie un itérateur contenant l'ensemble des correspondances de l'expression rationnelle <code><var>regexp</var></code> au sein de la chaîne de caractères courante.</dd>
-  <dt><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/String/normalize"><code>String.prototype.normalize([form])</code></a></dt>
-  <dd>Renvoie la forme Unicode normalisée de la chaîne courante.</dd>
-  <dt><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/String/padEnd"><code>String.prototype.padEnd(targetLength [, padString])</code></a></dt>
-  <dd>Complète la chaîne courante à la fin avec une chaîne donnée afin d'obtenir une longueur cible <code><var>targetLength</var></code> et renvoie la chaîne ainsi construite.</dd>
-  <dt><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/String/padStart"><code>String.prototype.padStart(targetLength [, padString])</code></a></dt>
-  <dd>Complète la chaîne courante au début avec une chaîne donnée afin d'obtenir une longueur cible <code><var>targetLength</var></code> et renvoie la chaîne ainsi construite.</dd>
-  <dt><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/String/repeat"><code>String.prototype.repeat(<var>count</var>)</code></a>
-  </dt>
-  <dd>Renvoie une chaîne de caractères qui est la répétition (<code><var>count</var></code> fois) de la chaîne de caractères courante.</dd>
-  <dt><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/String/replace"><code>String.prototype.replace(searchFor, replaceWith)</code></a></dt>
-  <dd>Remplace les occurrences de <code><var>searchFor</var></code> par <code><var>replaceWith</var></code>. <code><var>searchFor</var></code> peut être une chaîne de caractères ou une expression rationnelle et <code><var>replaceWith</var></code> peut être une chaîne de caractères ou une fonction.</dd>
-  <dt><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/String/replaceAll"><code>String.prototype.replaceAll(searchFor, replaceWith)</code></a></dt>
-  <dd>Remplace toutes les occurrences de <code><var>searchFor</var></code> avec <code><var>replaceWith</var></code>. <code><var>searchFor</var></code> peut être une chaîne de caractères ou une expression rationnelle et <code><var>replaceWith</var></code> peut être une chaîne de caractères ou une fonction.</dd>
-  <dt><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/String/search"><code>String.prototype.search(regexp)</code></a></dt>
-  <dd>Recherche une correspondance entre une expression rationnelle <code><var>regexp</var></code> et la chaîne de caractères courante.</dd>
-  <dt><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/String/slice"><code>String.prototype.slice(<var>beginIndex</var>[, <var>endIndex</var>])</code></a></dt>
-  <dd>Extrait une section de la chaîne de caractères et renvoie une nouvelle chaîne de caractères.</dd>
-  <dt><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/String/split"><code>String.prototype.split([<var>sep</var> [, <var>limit</var>] ])</code></a></dt>
-  <dd>Renvoie un tableau de chaînes de caractères composé des fragments de la chaîne courante scindée à chaque occurrence de la sous-chaîne <code><var>sep</var></code>.</dd>
-  <dt><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/String/startsWith"><code>String.prototype.startsWith(searchString [, length])</code></a></dt>
-  <dd>Détermine si la chaîne courante commence par la chaîne de caractères indiquée en paramètre (<code><var>searchString</var></code>).</dd>
-  <dt><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/String/substring"><code>String.prototype.substring(indexStart [, indexEnd])</code></a></dt>
-  <dd>Renvoie une nouvelle chaîne de caractères contenant les caractères de la chaîne courante, situés à partir de l'indice donné ou entre les indices donnés.</dd>
-  <dt><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/String/toLocaleLowerCase"><code>String.prototype.toLocaleLowerCase( [locale, ...locales])</code></a>
-  </dt>
-  <dd>
-    <p>Renvoie une conversion en minuscules de la chaîne de caractères courante qui respecte la locale indiquée.</p>
-
-    <p>Pour la plupart des langues, cela renverra la même valeur que <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/String/toLowerCase"><code>toLowerCase()</code></a>.</p>
-  </dd>
-  <dt><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/String/toLocaleUpperCase"><code>String.prototype.toLocaleUpperCase( [locale, ...locales])</code></a>
-  </dt>
-  <dd>
-    <p>Renvoie une conversion en majuscules de la chaîne de caractères courante qui respecte la locale indiquée.</p>
-
-    <p>Pour la plupart des langues, cela renverra la même valeur que <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/String/toUpperCase"><code>toUpperCase()</code></a>.</p>
-  </dd>
-  <dt><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/String/toLowerCase"><code>String.prototype.toLowerCase()</code></a></dt>
-  <dd>Renvoie la valeur de la chaîne de caractères, convertie en minuscules.</dd>
-  <dt><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/String/toString"><code>String.prototype.toString()</code></a></dt>
-  <dd>Renvoie une chaîne de caractères représentant l'objet courant. Surcharge la méthode <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Object/toString"><code>Object.prototype.toString()</code></a>.</dd>
-  <dt><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/String/toUpperCase"><code>String.prototype.toUpperCase()</code></a></dt>
-  <dd>Renvoie la valeur de la chaîne de caractères, convertie en majuscules.</dd>
-  <dt><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/String/Trim"><code>String.prototype.trim()</code></a></dt>
-  <dd>Retire les blancs situés au début et à la fin de la chaîne de caractères.</dd>
-  <dt><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/String/trimStart"><code>String.prototype.trimStart()</code></a></dt>
-  <dd>Retire les blancs situés au début de la chaîne de caractères.</dd>
-  <dt><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/String/trimEnd"><code>String.prototype.trimEnd()</code></a></dt>
-  <dd>Retire les blancs situés à la fin de la chaîne de caractères.</dd>
-  <dt><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/String/valueOf"><code>String.prototype.valueOf()</code></a></dt>
-  <dd>Renvoie la valeur primitive de l'objet courant. Surcharge la méthode <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Object/valueOf"><code>Object.prototype.valueOf()</code></a>.</dd>
-  <dt><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/String/@@iterator"><code>String.prototype.@@iterator()</code></a></dt>
-  <dd>Renvoie un nouvel objet itérateur qui permet d'itérer sur les points de code composant la chaîne de caractère. Chaque point de code est renvoyé comme une chaîne de caractères.</dd>
-</dl>
-
-<h2 id="html_wrapper_methods">Méthodes de conversion HTML</h2>
-
-<div class="notecard warning">
-  <p><strong>Attention :</strong> Ces méthodes sont dépréciées et ne doivent plus être utilisées.</p>
-
-  <p>Elles ont des possibilités limitées et ne concernent qu'une petite sous-partie des éléments et attributs HTML disponibles.</p>
-</div>
-
-<dl>
-  <dt><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/String/anchor"><code>String.prototype.anchor()</code></a></dt>
-  <dd><a href="/fr/docs/Web/HTML/Element/a#attr-name"><code>&lt;a name="name"&gt;</code></a> (cible hypertexte)</dd>
-  <dt><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/String/big"><code>String.prototype.big()</code></a></dt>
-  <dd><a href="/fr/docs/Web/HTML/Element/big"><code>&lt;big&gt;</code></a></dd>
-  <dt><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/String/blink"><code>String.prototype.blink()</code></a></dt>
-  <dd><a href="/fr/docs/Web/HTML/Element/blink"><code>&lt;blink&gt;</code></a></dd>
-  <dt><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/String/bold"><code>String.prototype.bold()</code></a></dt>
-  <dd><a href="/fr/docs/Web/HTML/Element/b"><code>&lt;b&gt;</code></a></dd>
-  <dt><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/String/fixed"><code>String.prototype.fixed()</code></a></dt>
-  <dd><a href="/fr/docs/Web/HTML/Element/tt"><code>&lt;tt&gt;</code></a></dd>
-  <dt><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/String/fontcolor"><code>String.prototype.fontcolor()</code></a></dt>
-  <dd><a href="/fr/docs/Web/HTML/Element/font#attr-color"><code>&lt;font color="color"&gt;</code></a></dd>
-  <dt><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/String/fontsize"><code>String.prototype.fontsize()</code></a></dt>
-  <dd><a href="/fr/docs/Web/HTML/Element/font#attr-size"><code>&lt;font size="size"&gt;</code></a></dd>
-  <dt><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/String/italics"><code>String.prototype.italics()</code></a></dt>
-  <dd><a href="/fr/docs/Web/HTML/Element/i"><code>&lt;i&gt;</code></a></dd>
-  <dt><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/String/link"><code>String.prototype.link()</code></a></dt>
-  <dd><a href="/fr/docs/Web/HTML/Element/a#attr-href"><code>&lt;a href="url"&gt;</code></a> (lien d'une URL)</dd>
-  <dt><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/String/small"><code>String.prototype.small()</code></a></dt>
-  <dd><a href="/fr/docs/Web/HTML/Element/small"><code>&lt;small&gt;</code></a></dd>
-  <dt><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/String/strike"><code>String.prototype.strike()</code></a></dt>
-  <dd><a href="/fr/docs/Web/HTML/Element/strike"><code>&lt;strike&gt;</code></a></dd>
-  <dt><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/String/sub"><code>String.prototype.sub()</code></a></dt>
-  <dd><a href="/fr/docs/Web/HTML/Element/sub"><code>&lt;sub&gt;</code></a></dd>
-  <dt><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/String/sup"><code>String.prototype.sup()</code></a></dt>
-  <dd><a href="/fr/docs/Web/HTML/Element/sup"><code>&lt;sup&gt;</code></a></dd>
-</dl>
-
-<h2 id="exemples">Exemples</h2>
-
-<h3 id="string_conversion">Conversion en chaîne de caractères</h3>
-
-<p>Il est possible d'utiliser <code>String</code> comme une alternative à <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/String/toString"><code>toString()</code></a> car cela permet de traiter les valeurs <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/null"><code>null</code></a>, <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/undefined"><code>undefined</code></a> et les <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Symbol">symboles</a>. Ainsi :</p>
-
-<pre class="brush: js">
-let chainesSortie = []
-for (let i = 0, n = valeursEntree.length; i &lt; n; ++i) {
-  chainesSortie.push(String(valeursEntree[i]));
-}
-</pre>
-
-<h2 id="specifications">Spécifications</h2>
-
-<p>{{Specifications}}</p>
-
-<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
-
-<p>{{Compat}}</p>
-
-<h2 id="voir_aussi">Voir aussi</h2>
-
-<ul>
-  <li><a href="/fr/docs/Web/JavaScript/Guide/Text_formatting">Formatage du texte dans le guide JavaScript</a></li>
-  <li><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/RegExp"><code>RegExp</code></a></li>
-  <li><a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a></li>
-  <li><a href="/fr/docs/Web/API/DOMString/Binary">Les chaînes binaires</a></li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/string/index.md b/files/fr/web/javascript/reference/global_objects/string/index.md
new file mode 100644
index 0000000000..e1b7dd21f4
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/string/index.md
@@ -0,0 +1,323 @@
+---
+title: String
+slug: Web/JavaScript/Reference/Global_Objects/String
+tags:
+  - Class
+  - ECMAScript 2015
+  - JavaScript
+  - Reference
+  - String
+translation_of: Web/JavaScript/Reference/Global_Objects/String
+original_slug: Web/JavaScript/Reference/Objets_globaux/String
+browser-compat: javascript.builtins.String
+---
+{{JSRef}}
+
+Un objet **`String`** est utilisé afin de représenter et de manipuler une chaîne de caractères.
+
+## Description
+
+Les chaînes de caractères sont utiles pour stocker des données qui peuvent être représentées sous forme de texte. Parmi les opérations les plus utilisées pour manipuler les chaînes de caractères, on a : la vérification de leur longueur avec [`length`](/fr/docs/Web/JavaScript/Reference/Global_Objects/String/length), la construction et la concaténation avec [les opérateurs `+` et `+=`](/fr/docs/Web/JavaScript/Guide/Expressions_and_Operators#string_operators), la recherche de sous-chaîne avec les méthodes [`includes()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/String/includes) ou [`indexOf()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/String/indexOf) ou encore l'extraction de sous-chaînes avec la méthode [`substring()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/String/substring).
+
+### Créer des chaînes de caractères
+
+Il est possible de créer des chaînes de caractères comme des valeurs primitives ou comme des objets avec le constructeur [`String()`](/fr/docs/Web/JavaScript/Reference/String/String) :
+
+```js
+const string1 = "Une chaîne de caractères primitive";
+const string2 = 'Là encore une valeur de chaîne de caractères primitive';
+const string3 = `Et ici aussi`;
+```
+
+```js
+const string4 = new String("Un objet String");
+```
+
+Les valeurs primitives ou les objets représentant des chaînes de caractères peuvent être utilisés de façon interchangeable dans la plupart des situations. Voir ci-après [Chaînes de caractères : valeurs primitives et objets](#string_primitives_and_string_objects).
+
+Les valeurs littérales pour les chaînes de caractères peuvent être indiquées avec des simples quotes (<kbd>'</kbd>), des doubles quotes (<kbd>"</kbd>) ou encore par des accents graves (<kbd>`</kbd>). Cette dernière forme permet de définir un [littéral de gabarit de chaîne de caractères](/fr/docs/Web/JavaScript/Reference/Template_literals) avec lequel on pourra interpoler des expressions dans une chaîne de caractères.
+
+### Accéder à un caractère
+
+Il existe deux façons d'accéder à un caractère dans une chaîne. La première façon consiste à utiliser la méthode [`charAt()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/String/charAt) :
+
+```js
+return 'chat'.charAt(2); // renvoie "a"
+```
+
+La seconde méthode, introduite avec ECMAScript 5, est de manipuler la chaîne comme un tableau, où les caractères sont les éléments du tableau et ont un indice correspondant à leur position :
+
+```js
+return 'chat'[2]; // renvoie "a"
+```
+
+En utilisant la seconde notation, il est impossible de supprimer ou d'affecter une valeur à ces propriétés. En effet, les propriétés concernées ne sont ni accessibles en écriture ni configurables. Pour plus d'informations, voir la page de [`Object.defineProperty()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty).
+
+### Comparer des chaînes de caractères
+
+Les développeurs C utilisent la fonction `strcmp()` pour comparer des chaînes de caractères. En JavaScript, il est possible d'utiliser [les opérateurs inférieur et supérieur ](/fr/docs/Web/JavaScript/Reference/Operators):
+
+```js
+let a = "a";
+let b = "b";
+if (a < b) { // true
+  console.log(a + " est inférieure à " + b);
+} else if (a > b) {
+  console.log(a + " est supérieure à " + b);
+} else {
+  console.log(a + " et " + b + " sont égales.");
+}
+```
+
+On peut obtenir un résultat semblable avec la méthode [`localeCompare()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/String/localeCompare) qui permet de prendre en compte la locale utilisée et qui est héritée par toutes les instances de `String`.
+
+On notera que `a == b` compare les chaînes de caractères `a` et `b` de façon sensible à la casse. Si on souhaite comparer des chaînes sans être sensible à la casse, on pourra utiliser une fonction semblable à :
+
+```js
+function isEqual(str1, str2) {
+  return str1.toUpperCase() === str2.toUpperCase()
+}
+```
+
+On utilise ici une conversion en majuscules plutôt qu'en minuscules, car cela cause certains problèmes de conversion pour certains caractères UTF-8.
+
+### Les différences entre les objets `String` et le type primitif pour les chaînes de caractères
+
+En JavaScript, on distingue d'une part les objets `String` et d'autre par les valeurs primitives qui sont des chaînes de caractères (il en va de même pour les booléens/[`Boolean`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Boolean) et les nombres/[`Number`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Number)).
+
+Les valeurs littérales (délimitées par des simples quotes, des doubles quotes ou des accents graves et les chaînes de caractères renvoyées par les appels à `String` sans le mot-clé [`new`](/fr/docs/Web/JavaScript/Reference/Operators/new) sont des chaînes de caractères primitives. JavaScript convertit automatiquement les valeurs primitives en objets `String` et il est donc possible d'utiliser les méthodes objet de `String` sur les chaînes de caractères primitives. Dans les contextes où une méthode est appelée sur une chaîne de caractères primitive ou alors qu'on recherche une propriété, JavaScript convertira implicitement la valeur primitive et appellera la méthode ou accèdera à la propriété correspondante.
+
+```js
+let s_prim = "toto";
+let s_obj = new String(s_prim);
+
+console.log(typeof s_prim); // affiche "string"
+console.log(typeof s_obj);  // affiche "object"
+```
+
+Les chaînes primitives et les objets `String` renvoient des résultats différents lorsqu'ils sont évalués avec [`eval()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/eval). Les chaînes primitives sont traitées comme du code source, tandis que les objets `String` sont traités comme tous les autres objets, en renvoyant l'objet. Par exemple :
+
+```js
+let s1 = "2 + 2";                // crée une chaîne primitive
+let s2 = new String("2 + 2");    // crée un objet String
+console.log(eval(s1));           // renvoie le nombre 4
+console.log(eval(s2));           // renvoie la chaîne "2 + 2"
+```
+
+Pour ces raisons, il peut y avoir certains problèmes quand le code attend une chaîne primitive plutôt qu'un objet `String`. Toutefois, cette distinction est rarement nécessaire en pratique.
+
+Un objet `String` peut toujours être converti en son équivalent primitif grâce à la méthode [`valueOf()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/String/valueOf).
+
+```js
+console.log(eval(s2.valueOf())); // renvoie  4
+```
+
+### Échappement des caractères
+
+En dehors des caractères classiques, des caractères spéciaux peuvent être encodés grâce à l'échappement :
+
+| Code                                                                                                     | Résultat                                                                                                                |
+| -------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------- |
+| `\0`                                                                                                     | Caractère nul (U+0000 NULL)                                                                                             |
+| `\'`                                                                                                     | simple quote (U+0027 APOSTROPHE)                                                                                        |
+| `\"`                                                                                                     | double quote (U+0022 QUOTATION MARK)                                                                                    |
+| `\\`                                                                                                     | barre oblique inversée (U+005C REVERSE SOLIDUS)                                                                         |
+| `\n`                                                                                                     | nouvelle ligne (U+000A LINE FEED; LF)                                                                                   |
+| `\r`                                                                                                     | retour chariot (U+000D CARRIAGE RETURN; CR)                                                                             |
+| `\v`                                                                                                     | tabulation verticale (U+000B LINE TABULATION)                                                                           |
+| `\t`                                                                                                     | tabulation (U+0009 CHARACTER TABULATION)                                                                                |
+| `\b`                                                                                                     | retour arrière (U+0008 BACKSPACE)                                                                                       |
+| `\f`                                                                                                     | saut de page (U+000C FORM FEED)                                                                                         |
+| `\uXXXX` (`XXXX` étant 4 chiffres hexadécimaux pour l'intervalle of 0x0000 - 0xFFFF)                     | Point de code Unicode entre U+0000 et U+FFFF (représente le plan Unicode multilingue basique)                           |
+| `\u{X}` ... `\u{XXXXXX}` (`X…XXXXXX` étant 1 à 6 chiffres hexadécimaux pour l'intervalle 0x0 - 0x10FFFF) | Point de code Unicode entre U+0000 et U+10FFFF (représente l'intégralité d'Unicode)                                     |
+| `\xXX` (`XX` étant 2 chiffres hexadécimaux pour l'intervalle 0x00 - 0xFF)                                | Point de code Unicode entre U+0000 et U+00FF (correspond à Basic Latin et Latin-1 supplement ; équivalent à ISO-8859-1) |
+
+### Littéraux pour les chaînes longues
+
+Il peut arriver que le code contienne des chaînes plutôt longues. Plutôt que d'avoir des lignes qui s'étirent sur tout le fichier et dans un éditeur de code, il est possible de casser la chaîne sur plusieurs lignes sans que cela modifie le contenu de la chaîne. Il existe deux façons de faire.
+
+#### Méthode 1
+
+```js
+let chaineLongue = "Voici une très longue chaîne qui a besoin " +
+                   " d'être passée à la ligne parce que sinon " +
+                   " ça risque de devenir illisible.";
+```
+
+#### Méthode 2
+
+On peut sinon utiliser le caractère barre oblique inversée "\\" à la fin de chaque ligne pour indiquer que la chaîne continue sur la ligne suivante. Il faut bien faire attention à ce que la barre oblique soit bien le dernier caractère de la ligne avant le saut de ligne. Sinon, cela ne fonctionnera pas. Voilà comment se présente cette forme :
+
+```js
+let chaineLongue = "Voici une très longue chaîne qui a besoin \
+d'être passée à la ligne parce que sinon \
+ça risque de devenir illisible.";
+```
+
+#### Méthode 3
+
+Si les sauts de ligne doivent faire partie du résultat, on peut utiliser l'accent grave comme délimiteur de chaîne. Celui-ci permet d'utiliser des sauts de ligne à l'intérieur de la valeur littérale.
+
+```js
+let chaineLongue = `Voici une très longue chaîne qui a besoin
+d'être passée à la ligne parce que sinon
+ça risque de devenir illisible.`;
+```
+
+## Constructeur
+
+- [`String()`](/fr/docs/Web/JavaScript/Reference/String/String)
+  - : Crée un nouvel `String`. S'il est appelé comme une fonction plutôt que comme un constructeur, il effectue une conversion de la valeur en chaîne de caractères.
+
+## Méthodes statiques
+
+- [`String.fromCharCode(num1 [, ...[,numN]])`](/fr/docs/Web/JavaScript/Reference/Global_Objects/String/fromCharCode)
+  - : Renvoie une chaîne de caractères créée en utilisant la séquence indiquée de valeurs Unicode.
+- [`String.fromCodePoint(num1 [, ...[,numN]])`](/fr/docs/Web/JavaScript/Reference/Global_Objects/String/fromCodePoint)
+  - : Renvoie une chaîne de caractères créée en utilisant la séquence indiquée de points de code.
+- [`String.raw()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/String/raw)
+
+  - : Renvoie une chaîne de caractères créée à partir d'un gabarit de chaîne de caractères brut.
+
+## Propriétés des instances
+
+- [`String.prototype.length`](/fr/docs/Web/JavaScript/Reference/Global_Objects/String/length)
+  - : Cette propriété indique la longueur de la chaîne de caractères. Elle est en lecture seule.
+
+## Méthodes des instances
+
+- [`String.prototype.at(index)`](/fr/docs/Web/JavaScript/Reference/Global_Objects/String/at){{Experimental_Inline}}
+  - : Renvoie le caractère (exactement un seul codet UTF-16) à l'indice indiqué par `index`. Les indices négatifs sont acceptés, dans ce cas ils indiquent la position par rapport au dernier caractère.
+- [`String.prototype.charAt(index)`](/fr/docs/Web/JavaScript/Reference/Global_Objects/String/charAt)
+  - : Renvoie le caractère (exactement un seul codet UTF-16) à l'indice indiqué par `index`.
+- [`String.prototype.charCodeAt(index)`](/fr/docs/Web/JavaScript/Reference/Global_Objects/String/charCodeAt)
+  - : Renvoie un nombre qui est la valeur du codet UTF-16 à l'indice indiqué par `index`.
+- [`String.prototype.codePointAt(pos)`](/fr/docs/Web/JavaScript/Reference/Global_Objects/String/codePointAt)
+  - : Renvoie un entier positif qui correspond à la valeur du codet UTF-16 à la position indiquée par `pos`.
+- [`String.prototype.concat(str [,...strN ])`](/fr/docs/Web/JavaScript/Reference/Global_Objects/String/concat)
+  - : Combine le texte de deux (ou plusieurs) chaînes en une nouvelle chaîne de caractères.
+- [`String.prototype.includes(searchString [, position])`](/fr/docs/Web/JavaScript/Reference/Global_Objects/String/includes)
+  - : Détermine si la chaîne de caractères courante contient `searchString`.
+- [`String.prototype.endsWith(searchString [, length])`](/fr/docs/Web/JavaScript/Reference/Global_Objects/String/endsWith)
+  - : Détermine si la chaîne de caractères courante se termine par `searchString`.
+- [`String.prototype.indexOf(searchValue [, fromIndex])`](/fr/docs/Web/JavaScript/Reference/Global_Objects/String/indexOf)
+  - : Renvoie l'indice, au sein de la chaîne courante, de la première occurrence de `searchValue` ou `-1` si ce motif n'est pas trouvé.
+- [`String.prototype.lastIndexOf(searchValue [, fromIndex])`](/fr/docs/Web/JavaScript/Reference/Global_Objects/String/lastIndexOf)
+  - : Renvoie l'indice, au sein de la chaîne courant, de la dernière occurrence de `searchValue` ou `-1` si ce motif n'est pas trouvé.
+- [`String.prototype.localeCompare(compareString [, locales [, options]])`](/fr/docs/Web/JavaScript/Reference/Global_Objects/String/localeCompare)
+  - : Renvoie un nombre indiquant si la chaîne courante vient avant ou après (ou est équivalente à ) `compareString` pour l'ordre de tri.
+- [`String.prototype.match(regexp)`](/fr/docs/Web/JavaScript/Reference/Global_Objects/String/match)
+  - : Permet de tester la correspondance d'une expression rationnelle entre `regexp` et la chaîne de caractères courante.
+- [`String.prototype.matchAll(regexp)`](/fr/docs/Web/JavaScript/Reference/Global_Objects/String/matchAll)
+  - : Renvoie un itérateur contenant l'ensemble des correspondances de l'expression rationnelle `regexp` au sein de la chaîne de caractères courante.
+- [`String.prototype.normalize([form])`](/fr/docs/Web/JavaScript/Reference/Global_Objects/String/normalize)
+  - : Renvoie la forme Unicode normalisée de la chaîne courante.
+- [`String.prototype.padEnd(targetLength [, padString])`](/fr/docs/Web/JavaScript/Reference/Global_Objects/String/padEnd)
+  - : Complète la chaîne courante à la fin avec une chaîne donnée afin d'obtenir une longueur cible `targetLength` et renvoie la chaîne ainsi construite.
+- [`String.prototype.padStart(targetLength [, padString])`](/fr/docs/Web/JavaScript/Reference/Global_Objects/String/padStart)
+  - : Complète la chaîne courante au début avec une chaîne donnée afin d'obtenir une longueur cible `targetLength` et renvoie la chaîne ainsi construite.
+- [`String.prototype.repeat(count)`](/fr/docs/Web/JavaScript/Reference/Global_Objects/String/repeat)
+  - : Renvoie une chaîne de caractères qui est la répétition (`count` fois) de la chaîne de caractères courante.
+- [`String.prototype.replace(searchFor, replaceWith)`](/fr/docs/Web/JavaScript/Reference/Global_Objects/String/replace)
+  - : Remplace les occurrences de `searchFor` par `replaceWith`. `searchFor` peut être une chaîne de caractères ou une expression rationnelle et `replaceWith` peut être une chaîne de caractères ou une fonction.
+- [`String.prototype.replaceAll(searchFor, replaceWith)`](/fr/docs/Web/JavaScript/Reference/Global_Objects/String/replaceAll)
+  - : Remplace toutes les occurrences de `searchFor` avec `replaceWith`. `searchFor` peut être une chaîne de caractères ou une expression rationnelle et `replaceWith` peut être une chaîne de caractères ou une fonction.
+- [`String.prototype.search(regexp)`](/fr/docs/Web/JavaScript/Reference/Global_Objects/String/search)
+  - : Recherche une correspondance entre une expression rationnelle `regexp` et la chaîne de caractères courante.
+- [`String.prototype.slice(beginIndex[, endIndex])`](/fr/docs/Web/JavaScript/Reference/Global_Objects/String/slice)
+  - : Extrait une section de la chaîne de caractères et renvoie une nouvelle chaîne de caractères.
+- [`String.prototype.split([sep [, limit] ])`](/fr/docs/Web/JavaScript/Reference/Global_Objects/String/split)
+  - : Renvoie un tableau de chaînes de caractères composé des fragments de la chaîne courante scindée à chaque occurrence de la sous-chaîne `sep`.
+- [`String.prototype.startsWith(searchString [, length])`](/fr/docs/Web/JavaScript/Reference/Global_Objects/String/startsWith)
+  - : Détermine si la chaîne courante commence par la chaîne de caractères indiquée en paramètre (`searchString`).
+- [`String.prototype.substring(indexStart [, indexEnd])`](/fr/docs/Web/JavaScript/Reference/Global_Objects/String/substring)
+  - : Renvoie une nouvelle chaîne de caractères contenant les caractères de la chaîne courante, situés à partir de l'indice donné ou entre les indices donnés.
+- [`String.prototype.toLocaleLowerCase( [locale, ...locales])`](/fr/docs/Web/JavaScript/Reference/Global_Objects/String/toLocaleLowerCase)
+
+  - : Renvoie une conversion en minuscules de la chaîne de caractères courante qui respecte la locale indiquée.
+
+    Pour la plupart des langues, cela renverra la même valeur que [`toLowerCase()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/String/toLowerCase).
+
+- [`String.prototype.toLocaleUpperCase( [locale, ...locales])`](/fr/docs/Web/JavaScript/Reference/Global_Objects/String/toLocaleUpperCase)
+
+  - : Renvoie une conversion en majuscules de la chaîne de caractères courante qui respecte la locale indiquée.
+
+    Pour la plupart des langues, cela renverra la même valeur que [`toUpperCase()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/String/toUpperCase).
+
+- [`String.prototype.toLowerCase()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/String/toLowerCase)
+  - : Renvoie la valeur de la chaîne de caractères, convertie en minuscules.
+- [`String.prototype.toString()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/String/toString)
+  - : Renvoie une chaîne de caractères représentant l'objet courant. Surcharge la méthode [`Object.prototype.toString()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Object/toString).
+- [`String.prototype.toUpperCase()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/String/toUpperCase)
+  - : Renvoie la valeur de la chaîne de caractères, convertie en majuscules.
+- [`String.prototype.trim()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/String/Trim)
+  - : Retire les blancs situés au début et à la fin de la chaîne de caractères.
+- [`String.prototype.trimStart()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/String/trimStart)
+  - : Retire les blancs situés au début de la chaîne de caractères.
+- [`String.prototype.trimEnd()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/String/trimEnd)
+  - : Retire les blancs situés à la fin de la chaîne de caractères.
+- [`String.prototype.valueOf()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/String/valueOf)
+  - : Renvoie la valeur primitive de l'objet courant. Surcharge la méthode [`Object.prototype.valueOf()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Object/valueOf).
+- [`String.prototype.@@iterator()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/String/@@iterator)
+  - : Renvoie un nouvel objet itérateur qui permet d'itérer sur les points de code composant la chaîne de caractère. Chaque point de code est renvoyé comme une chaîne de caractères.
+
+## Méthodes de conversion HTML
+
+> **Attention :** Ces méthodes sont dépréciées et ne doivent plus être utilisées.
+>
+> Elles ont des possibilités limitées et ne concernent qu'une petite sous-partie des éléments et attributs HTML disponibles.
+
+- [`String.prototype.anchor()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/String/anchor)
+  - : [`<a name="name">`](/fr/docs/Web/HTML/Element/a#attr-name) (cible hypertexte)
+- [`String.prototype.big()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/String/big)
+  - : [`<big>`](/fr/docs/Web/HTML/Element/big)
+- [`String.prototype.blink()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/String/blink)
+  - : [`<blink>`](/fr/docs/Web/HTML/Element/blink)
+- [`String.prototype.bold()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/String/bold)
+  - : [`<b>`](/fr/docs/Web/HTML/Element/b)
+- [`String.prototype.fixed()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/String/fixed)
+  - : [`<tt>`](/fr/docs/Web/HTML/Element/tt)
+- [`String.prototype.fontcolor()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/String/fontcolor)
+  - : [`<font color="color">`](/fr/docs/Web/HTML/Element/font#attr-color)
+- [`String.prototype.fontsize()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/String/fontsize)
+  - : [`<font size="size">`](/fr/docs/Web/HTML/Element/font#attr-size)
+- [`String.prototype.italics()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/String/italics)
+  - : [`<i>`](/fr/docs/Web/HTML/Element/i)
+- [`String.prototype.link()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/String/link)
+  - : [`<a href="url">`](/fr/docs/Web/HTML/Element/a#attr-href) (lien d'une URL)
+- [`String.prototype.small()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/String/small)
+  - : [`<small>`](/fr/docs/Web/HTML/Element/small)
+- [`String.prototype.strike()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/String/strike)
+  - : [`<strike>`](/fr/docs/Web/HTML/Element/strike)
+- [`String.prototype.sub()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/String/sub)
+  - : [`<sub>`](/fr/docs/Web/HTML/Element/sub)
+- [`String.prototype.sup()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/String/sup)
+  - : [`<sup>`](/fr/docs/Web/HTML/Element/sup)
+
+## Exemples
+
+### Conversion en chaîne de caractères
+
+Il est possible d'utiliser `String` comme une alternative à [`toString()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/String/toString) car cela permet de traiter les valeurs [`null`](/fr/docs/Web/JavaScript/Reference/Global_Objects/null), [`undefined`](/fr/docs/Web/JavaScript/Reference/Global_Objects/undefined) et les [symboles](/fr/docs/Web/JavaScript/Reference/Global_Objects/Symbol). Ainsi :
+
+```js
+let chainesSortie = []
+for (let i = 0, n = valeursEntree.length; i < n; ++i) {
+  chainesSortie.push(String(valeursEntree[i]));
+}
+```
+
+## Spécifications
+
+{{Specifications}}
+
+## Compatibilité des navigateurs
+
+{{Compat}}
+
+## Voir aussi
+
+- [Formatage du texte dans le guide JavaScript](/fr/docs/Web/JavaScript/Guide/Text_formatting)
+- [`RegExp`](/fr/docs/Web/JavaScript/Reference/Global_Objects/RegExp)
+- [`DOMString`](/fr/docs/Web/API/DOMString)
+- [Les chaînes binaires](/fr/docs/Web/API/DOMString/Binary)
diff --git a/files/fr/web/javascript/reference/global_objects/string/indexof/index.html b/files/fr/web/javascript/reference/global_objects/string/indexof/index.html
deleted file mode 100644
index 69a0303542..0000000000
--- a/files/fr/web/javascript/reference/global_objects/string/indexof/index.html
+++ /dev/null
@@ -1,160 +0,0 @@
----
-title: String.prototype.indexOf()
-slug: Web/JavaScript/Reference/Global_Objects/String/indexOf
-tags:
-  - JavaScript
-  - Méthode
-  - Prototype
-  - Reference
-  - String
-translation_of: Web/JavaScript/Reference/Global_Objects/String/indexOf
-original_slug: Web/JavaScript/Reference/Objets_globaux/String/indexOf
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <strong><code>indexOf()</code></strong> renvoie l'indice de la première occurence de la valeur cherchée au sein de la chaîne courante (à partir de <code>indexDébut</code>). Elle renvoie -1 si la valeur cherchée n'est pas trouvée.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/string-indexof.html")}}</div>
-
-
-
-<div class="note">
-<p><strong>Note :</strong> Pour la méthode associée aux tableaux, voir la page {{jsxref("Array.prototype.indexOf()")}}.</p>
-</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>str</var>.indexOf(<var>valeurRecherchée</var>)
-<var>str</var>.indexOf(<var>valeurRecherchée</var>, <var>indexDébut</var>)
-</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>valeurRecherchée</code></dt>
- <dd>Une chaîne représentant la valeur qu'on cherche dans la chaîne courante. Si aucune valeur n'est fournie explicitement,<a href="https://tc39.github.io/ecma262/#sec-tostring"> <code>valeurRecherchée</code> sera convertie en <code>"undefined"</code> et c'est cette chaîne qui sera recherchée</a>.</dd>
- <dt><code>indexDébut</code></dt>
- <dd>Paramètre optionnel. L'indice à partir duquel commencer la recherche, effectuée du début vers la fin de la liste. Cela peut être n'importe quel entier. La valeur par défaut est 0. Si <code>indexDébut &lt; 0</code> la chaîne sera parcourue en entier (ce qui équivaut à utiliser 0). Si <code>indexDébut &gt;= str.length</code>, la méthode renverra -1 sauf si <code>valeurRecherchée</code> est la chaîne vide, auquel cas, la méthode renverra <code>str.length</code>.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>L'indice de la première occurrence de la valeur indiquée, <code>-1</code> si elle n'est pas trouvée. Si la valeur recherchée est la chaîne vide, une correspondance sera trouvée à n'importe quel index entre <code>0</code> et <code>str.length</code>.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>Les caractères dans une chaîne de caractères sont indexés de la gauche à la droite. L'indice du premier caractère est 0, celui du dernier caractère (d'une chaîne <code>str</code>) est <code>str.length - 1.</code></p>
-
-<pre class="brush: js">"Blue Whale".indexOf("Blue");     // retourne  0
-"Blue Whale".indexOf("Blute");    // retourne -1
-"Blue Whale".indexOf("Whale", 0); // retourne  5
-"Blue Whale".indexOf("Whale", 5); // retourne  5
-"Blue Whale".indexOf("");         // retourne  0
-"Blue Whale".indexOf("", 9);      // retourne  9
-"Blue Whale".indexOf("", 10);     // retourne 10
-"Blue Whale".indexOf("", 11);     // retourne 10</pre>
-
-<h3 id="Sensibilité_à_la_casse">Sensibilité à la casse</h3>
-
-<p>La méthode <code>indexOf()</code> est sensible à la casse. Par exemple, l'expression suivante retourne -1 :</p>
-
-<pre class="brush: js">"Blue Whale".indexOf("blue") // retourne -1
-</pre>
-
-<p>Attention : <code>0</code> n'est pas une valeur qui peut être évaluée à <code>true</code> et <code>-1</code> n'est pas une valeur qui peut être évaluée à <code>false</code>. Ainsi, si on souhaite tester si une chaîne de caractères existe au sein d'une autre chaîne de caractères, on procèdera de cette façon (ou on utilisera {{jsxref("String.prototype.includes()")}}</p>
-
-<pre class="brush: js">"Blue Whale".indexOf("Blue") != -1; // true
-"Blue Whale".indexOf("Bloe") != -1; // false</pre>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Utiliser_indexOf()_et_lastIndexOf()">Utiliser <code>indexOf()</code> et <code>lastIndexOf()</code></h3>
-
-<p>L'exemple suivant utilise <code>indexOf()</code> et <code>lastIndexOf()</code> pour localiser différentes valeurs dans la chaîne de caractères "<code>Brave new world</code>".</p>
-
-<pre class="brush: js">const uneChaîne = "Brave new world"
-
-console.log("Indice du premier w " + uneChaîne.indexOf("w"));
-// Affiche 8
-console.log("Indice du dernier w " + uneChaîne.lastIndexOf("w"));
-// Affiche 10
-
-console.log("Indice du premier 'new' " + uneChaîne.indexOf("new"));
-// Affiche 6
-console.log("Indice du dernier 'new' " + uneChaîne.lastIndexOf("new"));
-// Affiche 6
-</pre>
-
-<h3 id="indexOf()_et_la_sensibilité_à_la_casse"><code>indexOf()</code> et la sensibilité à la casse</h3>
-
-<p>L'exemple suivant définit 2 chaînes de caractères. Ces variables contiennent la meme chaîne de caractères sauf que la seconde chaîne de caractères contient des lettres majuscules. La première méthode <code>writeln</code> affiche 19. Cependant, comme la méthode <code>indexOf</code> est sensible à la casse, la chaîne de caractères "<code>cheddar</code>" n'est pas trouvée dans <code>myCapString</code>, donc le second résultat affiche -1.</p>
-
-<pre class="brush: js">const maChaîne = "brie, reblochon, cheddar";
-const maChaîneMajuscules = "Brie, Reblochon, Cheddar";
-
-console.log('maChaîne.indexOf("cheddar") is '+ maChaîne.indexOf("cheddar"));
-// Affiche 19
-console.log('maChaîneMajuscules.indexOf("cheddar") is ' + maChaîneMajuscules.indexOf("cheddar"));
-// Affiche -1</pre>
-
-<h3 id="Utiliser_indexOf()_pour_compter_le_nombre_d'occurences_dans_une_chaîne_de_caractères">Utiliser <code>indexOf()</code> pour compter le nombre d'occurences dans une chaîne de caractères</h3>
-
-<p>L'exemple suivant utilise la variable <code>count</code> pour stocker le nombre d'occurences de la lettre <code>x</code> dans la chaîne de caractère <code>str</code> :</p>
-
-<pre class="brush: js">const str = "Chaîne x de test x";
-let count = 0;
-let pos = str.indexOf("x");
-
-while ( pos != -1 ) {
-   count++;
-   pos = str.indexOf( "x",pos + 1 );
-}
-console.log(count); // Affiche 2</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('ES1')}}</td>
-   <td>{{Spec2('ES1')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-15.5.4.7', 'String.prototype.indexOf')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-string.prototype.indexof', 'String.prototype.indexOf')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-string.prototype.indexof', 'String.prototype.indexOf')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.String.indexOf")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("String.prototype.charAt()")}}</li>
- <li>{{jsxref("String.prototype.lastIndexOf()")}}</li>
- <li>{{jsxref("String.prototype.includes()")}}</li>
- <li>{{jsxref("String.prototype.split()")}}</li>
- <li>{{jsxref("Array.prototype.indexOf()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/string/indexof/index.md b/files/fr/web/javascript/reference/global_objects/string/indexof/index.md
new file mode 100644
index 0000000000..f93922e7d7
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/string/indexof/index.md
@@ -0,0 +1,136 @@
+---
+title: String.prototype.indexOf()
+slug: Web/JavaScript/Reference/Global_Objects/String/indexOf
+tags:
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - String
+translation_of: Web/JavaScript/Reference/Global_Objects/String/indexOf
+original_slug: Web/JavaScript/Reference/Objets_globaux/String/indexOf
+---
+{{JSRef}}
+
+La méthode **`indexOf()`** renvoie l'indice de la première occurence de la valeur cherchée au sein de la chaîne courante (à partir de `indexDébut`). Elle renvoie -1 si la valeur cherchée n'est pas trouvée.
+
+{{EmbedInteractiveExample("pages/js/string-indexof.html")}}
+
+> **Note :** Pour la méthode associée aux tableaux, voir la page {{jsxref("Array.prototype.indexOf()")}}.
+
+## Syntaxe
+
+    str.indexOf(valeurRecherchée)
+    str.indexOf(valeurRecherchée, indexDébut)
+
+### Paramètres
+
+- `valeurRecherchée`
+  - : Une chaîne représentant la valeur qu'on cherche dans la chaîne courante. Si aucune valeur n'est fournie explicitement,[ `valeurRecherchée` sera convertie en `"undefined"` et c'est cette chaîne qui sera recherchée](https://tc39.github.io/ecma262/#sec-tostring).
+- `indexDébut`
+  - : Paramètre optionnel. L'indice à partir duquel commencer la recherche, effectuée du début vers la fin de la liste. Cela peut être n'importe quel entier. La valeur par défaut est 0. Si `indexDébut < 0` la chaîne sera parcourue en entier (ce qui équivaut à utiliser 0). Si `indexDébut >= str.length`, la méthode renverra -1 sauf si `valeurRecherchée` est la chaîne vide, auquel cas, la méthode renverra `str.length`.
+
+### Valeur de retour
+
+L'indice de la première occurrence de la valeur indiquée, `-1` si elle n'est pas trouvée. Si la valeur recherchée est la chaîne vide, une correspondance sera trouvée à n'importe quel index entre `0` et `str.length`.
+
+## Description
+
+Les caractères dans une chaîne de caractères sont indexés de la gauche à la droite. L'indice du premier caractère est 0, celui du dernier caractère (d'une chaîne `str`) est `str.length - 1.`
+
+```js
+"Blue Whale".indexOf("Blue");     // retourne  0
+"Blue Whale".indexOf("Blute");    // retourne -1
+"Blue Whale".indexOf("Whale", 0); // retourne  5
+"Blue Whale".indexOf("Whale", 5); // retourne  5
+"Blue Whale".indexOf("");         // retourne  0
+"Blue Whale".indexOf("", 9);      // retourne  9
+"Blue Whale".indexOf("", 10);     // retourne 10
+"Blue Whale".indexOf("", 11);     // retourne 10
+```
+
+### Sensibilité à la casse
+
+La méthode `indexOf()` est sensible à la casse. Par exemple, l'expression suivante retourne -1 :
+
+```js
+"Blue Whale".indexOf("blue") // retourne -1
+```
+
+Attention : `0` n'est pas une valeur qui peut être évaluée à `true` et `-1` n'est pas une valeur qui peut être évaluée à `false`. Ainsi, si on souhaite tester si une chaîne de caractères existe au sein d'une autre chaîne de caractères, on procèdera de cette façon (ou on utilisera {{jsxref("String.prototype.includes()")}}
+
+```js
+"Blue Whale".indexOf("Blue") != -1; // true
+"Blue Whale".indexOf("Bloe") != -1; // false
+```
+
+## Exemples
+
+### Utiliser `indexOf()` et `lastIndexOf()`
+
+L'exemple suivant utilise `indexOf()` et `lastIndexOf()` pour localiser différentes valeurs dans la chaîne de caractères "`Brave new world`".
+
+```js
+const uneChaîne = "Brave new world"
+
+console.log("Indice du premier w " + uneChaîne.indexOf("w"));
+// Affiche 8
+console.log("Indice du dernier w " + uneChaîne.lastIndexOf("w"));
+// Affiche 10
+
+console.log("Indice du premier 'new' " + uneChaîne.indexOf("new"));
+// Affiche 6
+console.log("Indice du dernier 'new' " + uneChaîne.lastIndexOf("new"));
+// Affiche 6
+```
+
+### `indexOf()` et la sensibilité à la casse
+
+L'exemple suivant définit 2 chaînes de caractères. Ces variables contiennent la meme chaîne de caractères sauf que la seconde chaîne de caractères contient des lettres majuscules. La première méthode `writeln` affiche 19. Cependant, comme la méthode `indexOf` est sensible à la casse, la chaîne de caractères "`cheddar`" n'est pas trouvée dans `myCapString`, donc le second résultat affiche -1.
+
+```js
+const maChaîne = "brie, reblochon, cheddar";
+const maChaîneMajuscules = "Brie, Reblochon, Cheddar";
+
+console.log('maChaîne.indexOf("cheddar") is '+ maChaîne.indexOf("cheddar"));
+// Affiche 19
+console.log('maChaîneMajuscules.indexOf("cheddar") is ' + maChaîneMajuscules.indexOf("cheddar"));
+// Affiche -1
+```
+
+### Utiliser `indexOf()` pour compter le nombre d'occurences dans une chaîne de caractères
+
+L'exemple suivant utilise la variable `count` pour stocker le nombre d'occurences de la lettre `x` dans la chaîne de caractère `str` :
+
+```js
+const str = "Chaîne x de test x";
+let count = 0;
+let pos = str.indexOf("x");
+
+while ( pos != -1 ) {
+   count++;
+   pos = str.indexOf( "x",pos + 1 );
+}
+console.log(count); // Affiche 2
+```
+
+## Spécifications
+
+| Spécification                                                                                                    | État                         | Commentaires         |
+| ---------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName('ES1')}}                                                                                         | {{Spec2('ES1')}}         | Définition initiale. |
+| {{SpecName('ES5.1', '#sec-15.5.4.7', 'String.prototype.indexOf')}}                         | {{Spec2('ES5.1')}}     |                      |
+| {{SpecName('ES6', '#sec-string.prototype.indexof', 'String.prototype.indexOf')}}     | {{Spec2('ES6')}}         |                      |
+| {{SpecName('ESDraft', '#sec-string.prototype.indexof', 'String.prototype.indexOf')}} | {{Spec2('ESDraft')}} |                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.String.indexOf")}}
+
+## Voir aussi
+
+- {{jsxref("String.prototype.charAt()")}}
+- {{jsxref("String.prototype.lastIndexOf()")}}
+- {{jsxref("String.prototype.includes()")}}
+- {{jsxref("String.prototype.split()")}}
+- {{jsxref("Array.prototype.indexOf()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/string/italics/index.html b/files/fr/web/javascript/reference/global_objects/string/italics/index.html
deleted file mode 100644
index 06525ca226..0000000000
--- a/files/fr/web/javascript/reference/global_objects/string/italics/index.html
+++ /dev/null
@@ -1,82 +0,0 @@
----
-title: String.prototype.italics()
-slug: Web/JavaScript/Reference/Global_Objects/String/italics
-tags:
-  - Déprécié
-  - JavaScript
-  - Méthode
-  - Prototype
-  - Reference
-  - String
-translation_of: Web/JavaScript/Reference/Global_Objects/String/italics
-original_slug: Web/JavaScript/Reference/Objets_globaux/String/italics
----
-<div>{{JSRef}}{{deprecated_header}}</div>
-
-<p>La méthode <code><strong>italics()</strong></code> permet de créer un élément HTML {{HTMLElement("i")}} qui permet de représenter la chaîne courante en italique.</p>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>str</var>.italics()</pre>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Une chaîne de caractères représentant un élément HTML {{HTMLElement("i")}}.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>La méthode <code>italics</code> encadre la chaîne de caractères dans une balise <code>&lt;i&gt;</code> :<br>
- <code>"&lt;i&gt;str&lt;/i&gt;</code>"</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<p>Les méthodes des chaînes de caractères peuvent être utilisées pour changer le formatage d'une chaîne de caractères :</p>
-
-<pre class="brush:js">var worldString = "Coucou monde";
-
-console.log(worldString.blink());
-console.log(worldString.bold());
-console.log(worldString.italics());
-console.log(worldString.strike());
-</pre>
-
-<p>Cet exemple permet de produire le fragment HTML suivant dans la console :</p>
-
-<pre class="brush:html">&lt;blink&gt;Coucou monde&lt;/blink&gt;
-&lt;b&gt;Coucou monde&lt;/b&gt;
-&lt;i&gt;Coucou monde&lt;/i&gt;
-&lt;strike&gt;Coucou monde&lt;/strike&gt;</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-string.prototype.italics', 'String.prototype.italics')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td>Définition initiale. Implémentée dans JavaScript 1.0. Définie dans l'annexe B (normative) pour les fonctionnalités ECMAScript additionnelles pour les navigateurs web.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-string.prototype.italics', 'String.prototype.italics')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td>Définie dans l'annexe B (normative) pour les fonctionnalités ECMAScript additionnelles pour les navigateurs web.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.String.italics")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("String.prototype.blink()")}}</li>
- <li>{{jsxref("String.prototype.bold()")}}</li>
- <li>{{jsxref("String.prototype.strike()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/string/italics/index.md b/files/fr/web/javascript/reference/global_objects/string/italics/index.md
new file mode 100644
index 0000000000..c75daae3f5
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/string/italics/index.md
@@ -0,0 +1,68 @@
+---
+title: String.prototype.italics()
+slug: Web/JavaScript/Reference/Global_Objects/String/italics
+tags:
+  - Déprécié
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - String
+translation_of: Web/JavaScript/Reference/Global_Objects/String/italics
+original_slug: Web/JavaScript/Reference/Objets_globaux/String/italics
+---
+{{JSRef}}{{deprecated_header}}
+
+La méthode **`italics()`** permet de créer un élément HTML {{HTMLElement("i")}} qui permet de représenter la chaîne courante en italique.
+
+## Syntaxe
+
+    str.italics()
+
+### Valeur de retour
+
+Une chaîne de caractères représentant un élément HTML {{HTMLElement("i")}}.
+
+## Description
+
+La méthode `italics` encadre la chaîne de caractères dans une balise `<i>` :
+`"<i>str</i>`"
+
+## Exemples
+
+Les méthodes des chaînes de caractères peuvent être utilisées pour changer le formatage d'une chaîne de caractères :
+
+```js
+var worldString = "Coucou monde";
+
+console.log(worldString.blink());
+console.log(worldString.bold());
+console.log(worldString.italics());
+console.log(worldString.strike());
+```
+
+Cet exemple permet de produire le fragment HTML suivant dans la console :
+
+```html
+<blink>Coucou monde</blink>
+<b>Coucou monde</b>
+<i>Coucou monde</i>
+<strike>Coucou monde</strike>
+```
+
+## Spécifications
+
+| Spécification                                                                                                    | État                         | Commentaires                                                                                                                                                           |
+| ---------------------------------------------------------------------------------------------------------------- | ---------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| {{SpecName('ES6', '#sec-string.prototype.italics', 'String.prototype.italics')}}     | {{Spec2('ES6')}}         | Définition initiale. Implémentée dans JavaScript 1.0. Définie dans l'annexe B (normative) pour les fonctionnalités ECMAScript additionnelles pour les navigateurs web. |
+| {{SpecName('ESDraft', '#sec-string.prototype.italics', 'String.prototype.italics')}} | {{Spec2('ESDraft')}} | Définie dans l'annexe B (normative) pour les fonctionnalités ECMAScript additionnelles pour les navigateurs web.                                                       |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.String.italics")}}
+
+## Voir aussi
+
+- {{jsxref("String.prototype.blink()")}}
+- {{jsxref("String.prototype.bold()")}}
+- {{jsxref("String.prototype.strike()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/string/lastindexof/index.html b/files/fr/web/javascript/reference/global_objects/string/lastindexof/index.html
deleted file mode 100644
index fc5c35bb08..0000000000
--- a/files/fr/web/javascript/reference/global_objects/string/lastindexof/index.html
+++ /dev/null
@@ -1,122 +0,0 @@
----
-title: String.prototype.lastIndexOf()
-slug: Web/JavaScript/Reference/Global_Objects/String/lastIndexOf
-tags:
-  - JavaScript
-  - Méthode
-  - Prototype
-  - Reference
-  - String
-translation_of: Web/JavaScript/Reference/Global_Objects/String/lastIndexOf
-original_slug: Web/JavaScript/Reference/Objets_globaux/String/lastIndexOf
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <strong><code>lastIndexOf()</code></strong> renvoie l'indice, dans la chaîne courante, de la dernière occurence de la valeur donnée en argument. Si cette sous-chaîne n'est pas trouvée, la méthode renvoie -1. La recherche s'effectue de la fin vers le début de la chaîne, à partir de <code>indiceDébut</code>.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/string-lastindexof.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox notranslate"><var>str</var>.lastIndexOf(<var>valeurRecherchée</var>[, <var>indiceDébut</var>])</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>valeurRecherchée</code></dt>
- <dd>Une chaîne qu'on recherche dans la chaîne courante. Si ce paramètre n'est pas défini et que <code>indiceDébut</code> est utilisé, c'est ce dernier qui sera renvoyé par la fonction.</dd>
- <dt><code>indiceDébut </code>{{optional_inline}}</dt>
- <dd>Paramètre optionnel. L'emplacement, dans la chaîne courante, à partir duquel effectuer la recherche (en partant de la fin de la chaîne et en remontant vers le début). Cela peut être n'importe quel entier. La valeur par défaut est <code>+Infinity</code>. Si<code> indiceDébut &gt; str.length</code>, toute la chaîne sera parcourue. Si <code>indiceDébut &lt; 0</code>,  on aura le même comportement que si <code>indiceDébut</code> valait 0.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>L'indice de la dernière occurrence de la valeur indiquée, <code>-1</code> si elle n'est pas trouvée.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>Les caractères d'une chaîne de caractères sont indexés de gauche à droite. L'indice du premier caractère vaut 0 et l'indice du dernier caractère vaut <code>maChaîne.length - 1</code>.</p>
-
-<pre class="brush: js notranslate">'canal'.lastIndexOf('a');     // renvoie 3
-'canal'.lastIndexOf('a', 2);  // renvoie 1
-'canal'.lastIndexOf('a', 0);  // renvoie -1
-'canal'.lastIndexOf('x');     // renvoie -1
-'canal'.lastIndexOf('c', -5); // renvoie 0
-'canal'.lastIndexOf('c', 0);  // renvoie 0
-'canal'.lastIndexOf('');      // renvoie 5
-'canal'.lastIndexOf('', 2);   // renvoie 2
-</pre>
-
-<div class="note">
-<p><strong>Note :</strong> <code>'abab'.lastIndexOf('ab', 2)</code> renvoie <code>2</code> et pas <code>0</code> car l'argument <code>indiceDébut</code> ne limite que le début de la correspondance recherchée ( qui est <code>'ab'</code>)</p>
-</div>
-
-<h3 id="Sensibilité_à_la_casse">Sensibilité à la casse</h3>
-
-<p>La méthode <code>lastIndexOf()</code> est sensible à la casse (une lettre en minuscule (i) est différente d'une lettre en majuscule (I)). Ainsi, le résultat de l'expression suivante sera -1 :</p>
-
-<pre class="brush: js notranslate">'Blue Whale, Killer Whale'.lastIndexOf('blue'); // renvoie -1
-</pre>
-
-<h2 id="Exemples">Exemples</h2>
-
-<p>Dans l'exemple suivant, on utilise {{jsxref("String.prototype.indexOf()", "indexOf()")}} et <code>lastIndexOf()</code> pour situer certaines valeurs dans la chaîne <code>"Brave new world"</code>.</p>
-
-<pre class="brush: js notranslate">var maChaîne = 'Brave new world';
-
-console.log('Indice du premier w ' + maChaîne.indexOf('w'));
-// Affiche 8
-console.log('Indice du dernier w ' + maChaîne.lastIndexOf('w'));
-// Affiche 10
-
-console.log('Indice du premier "new" ' + maChaîne.indexOf('new'));
-// Affiche 6
-console.log('Indice du dernier "new" ' + maChaîne.lastIndexOf('new'));
-// Affiche 6
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES1')}}</td>
-   <td>{{Spec2('ES1')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-15.5.4.8', 'String.prototype.lastIndexOf')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-string.prototype.lastindexof', 'String.prototype.lastIndexOf')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-string.prototype.lastindexof', 'String.prototype.lastIndexOf')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.String.lastIndexOf")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("String.prototype.charAt()")}}</li>
- <li>{{jsxref("String.prototype.indexOf()")}}</li>
- <li>{{jsxref("String.prototype.split()")}}</li>
- <li>{{jsxref("Array.prototype.indexOf()")}}</li>
- <li>{{jsxref("Array.prototype.lastIndexOf()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/string/lastindexof/index.md b/files/fr/web/javascript/reference/global_objects/string/lastindexof/index.md
new file mode 100644
index 0000000000..cbaef2655e
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/string/lastindexof/index.md
@@ -0,0 +1,96 @@
+---
+title: String.prototype.lastIndexOf()
+slug: Web/JavaScript/Reference/Global_Objects/String/lastIndexOf
+tags:
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - String
+translation_of: Web/JavaScript/Reference/Global_Objects/String/lastIndexOf
+original_slug: Web/JavaScript/Reference/Objets_globaux/String/lastIndexOf
+---
+{{JSRef}}
+
+La méthode **`lastIndexOf()`** renvoie l'indice, dans la chaîne courante, de la dernière occurence de la valeur donnée en argument. Si cette sous-chaîne n'est pas trouvée, la méthode renvoie -1. La recherche s'effectue de la fin vers le début de la chaîne, à partir de `indiceDébut`.
+
+{{EmbedInteractiveExample("pages/js/string-lastindexof.html")}}
+
+## Syntaxe
+
+    str.lastIndexOf(valeurRecherchée[, indiceDébut])
+
+### Paramètres
+
+- `valeurRecherchée`
+  - : Une chaîne qu'on recherche dans la chaîne courante. Si ce paramètre n'est pas défini et que `indiceDébut` est utilisé, c'est ce dernier qui sera renvoyé par la fonction.
+- `indiceDébut `{{optional_inline}}
+  - : Paramètre optionnel. L'emplacement, dans la chaîne courante, à partir duquel effectuer la recherche (en partant de la fin de la chaîne et en remontant vers le début). Cela peut être n'importe quel entier. La valeur par défaut est `+Infinity`. Si` indiceDébut > str.length`, toute la chaîne sera parcourue. Si `indiceDébut < 0`,  on aura le même comportement que si `indiceDébut` valait 0.
+
+### Valeur de retour
+
+L'indice de la dernière occurrence de la valeur indiquée, `-1` si elle n'est pas trouvée.
+
+## Description
+
+Les caractères d'une chaîne de caractères sont indexés de gauche à droite. L'indice du premier caractère vaut 0 et l'indice du dernier caractère vaut `maChaîne.length - 1`.
+
+```js
+'canal'.lastIndexOf('a');     // renvoie 3
+'canal'.lastIndexOf('a', 2);  // renvoie 1
+'canal'.lastIndexOf('a', 0);  // renvoie -1
+'canal'.lastIndexOf('x');     // renvoie -1
+'canal'.lastIndexOf('c', -5); // renvoie 0
+'canal'.lastIndexOf('c', 0);  // renvoie 0
+'canal'.lastIndexOf('');      // renvoie 5
+'canal'.lastIndexOf('', 2);   // renvoie 2
+```
+
+> **Note :** `'abab'.lastIndexOf('ab', 2)` renvoie `2` et pas `0` car l'argument `indiceDébut` ne limite que le début de la correspondance recherchée ( qui est `'ab'`)
+
+### Sensibilité à la casse
+
+La méthode `lastIndexOf()` est sensible à la casse (une lettre en minuscule (i) est différente d'une lettre en majuscule (I)). Ainsi, le résultat de l'expression suivante sera -1 :
+
+```js
+'Blue Whale, Killer Whale'.lastIndexOf('blue'); // renvoie -1
+```
+
+## Exemples
+
+Dans l'exemple suivant, on utilise {{jsxref("String.prototype.indexOf()", "indexOf()")}} et `lastIndexOf()` pour situer certaines valeurs dans la chaîne `"Brave new world"`.
+
+```js
+var maChaîne = 'Brave new world';
+
+console.log('Indice du premier w ' + maChaîne.indexOf('w'));
+// Affiche 8
+console.log('Indice du dernier w ' + maChaîne.lastIndexOf('w'));
+// Affiche 10
+
+console.log('Indice du premier "new" ' + maChaîne.indexOf('new'));
+// Affiche 6
+console.log('Indice du dernier "new" ' + maChaîne.lastIndexOf('new'));
+// Affiche 6
+```
+
+## Spécifications
+
+| Spécification                                                                                                                | État                         | Commentaires         |
+| ---------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName('ES1')}}                                                                                                     | {{Spec2('ES1')}}         | Définition initiale. |
+| {{SpecName('ES5.1', '#sec-15.5.4.8', 'String.prototype.lastIndexOf')}}                                 | {{Spec2('ES5.1')}}     |                      |
+| {{SpecName('ES6', '#sec-string.prototype.lastindexof', 'String.prototype.lastIndexOf')}}         | {{Spec2('ES6')}}         |                      |
+| {{SpecName('ESDraft', '#sec-string.prototype.lastindexof', 'String.prototype.lastIndexOf')}} | {{Spec2('ESDraft')}} |                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.String.lastIndexOf")}}
+
+## Voir aussi
+
+- {{jsxref("String.prototype.charAt()")}}
+- {{jsxref("String.prototype.indexOf()")}}
+- {{jsxref("String.prototype.split()")}}
+- {{jsxref("Array.prototype.indexOf()")}}
+- {{jsxref("Array.prototype.lastIndexOf()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/string/length/index.html b/files/fr/web/javascript/reference/global_objects/string/length/index.html
deleted file mode 100644
index d3f3f49913..0000000000
--- a/files/fr/web/javascript/reference/global_objects/string/length/index.html
+++ /dev/null
@@ -1,98 +0,0 @@
----
-title: String.length
-slug: Web/JavaScript/Reference/Global_Objects/String/length
-tags:
-  - JavaScript
-  - Propriété
-  - Prototype
-  - Reference
-  - String
-translation_of: Web/JavaScript/Reference/Global_Objects/String/length
-original_slug: Web/JavaScript/Reference/Objets_globaux/String/length
----
-<div>{{JSRef}}</div>
-
-<p>La propriété <strong><code>length</code></strong> représente la longueur d'une chaine de caractères, exprimée en nombre de points de code UTF-16. C'est une propriété accessible en lecture seule.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/string-length.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>str</var>.length</pre>
-
-<h2 id="Description">Description</h2>
-
-<p>Cette propriété renvoie le nombre de « codets » (ou unités de code ou bien <em>code units</em> en anglais) d'une chaîne de caractères. {{interwiki("wikipedia", "UTF-16")}}. Le format utilisé pour représenter les chaînes de caractères en JavaScript utilise un seul codet sur 16 bits pour représenter la plupart des caractères communs. En revanche, pour représenter les caractères plus rares, deux codets seront utilisés : la valeur renvoyée par <code>length</code> ne correspondra alors pas au nombre de caractères dans la chaîne.</p>
-
-<p>ECMAScript 2016 (la septième édition) établit une longueur maximale de <code>2^53 - 1</code> éléments. Auparavant, aucune longueur maximale n'était spécifiée. Pour Firefox, les chaînes ont une longueur maximale de <code>2^30-2</code> caractères (environ 1 Go). Pour les versions de Firefox antérieures à Firefox 65, la taille maximale était de de <code>2^28-1</code> (environ 256 Mo).</p>
-
-<p>Pour une chaine vide, on aura <code>length</code> égal à 0.</p>
-
-<p>La propriété statique <code>String.length</code> renvoie la valeur 1.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Utiliser_String.length">Utiliser <code>String.length</code></h3>
-
-<pre class="brush: js">const x = "Mozilla";
-const vide = "";
-
-console.log(x + " mesure " + x.length + " codets");
-/* "Mozilla mesure 7 codets" */
-
-console.log("La chaîne vide a une longueur de " + vide.length);
-/* "La chaîne vide a une longueur de 0" */</pre>
-
-<h3 id="Affecter_une_valeur_à_length">Affecter une valeur à <code>length</code></h3>
-
-<pre class="brush: js"><code>const maChaine = "Sloubi";
-// Lorsqu'on tente d'affecter une valeur à la propriété length
-// rien d'observable ne se produit
-
-maChaine.length = 3;
-console.log(maChaine); /* Sloubi */
-console.log(maChaine.length); // 6</code>
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES1')}}</td>
-   <td>{{Spec2('ES1')}}</td>
-   <td>Définition initiale.<br>
-    Implémentée avec JavaScript 1.0.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-15.5.5.1', 'String.prototype.length')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-properties-of-string-instances-length', 'String.prototype.length')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-properties-of-string-instances-length', 'String.prototype.length')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.String.length")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="http://developer.teradata.com/blog/jasonstrimpel/2011/11/javascript-string-length-and-internationalizing-web-applications">La propriété JavaScript <code>String.length</code> et l'internationalisation des applications web</a> (en anglais)</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/string/length/index.md b/files/fr/web/javascript/reference/global_objects/string/length/index.md
new file mode 100644
index 0000000000..4bbb30640d
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/string/length/index.md
@@ -0,0 +1,75 @@
+---
+title: String.length
+slug: Web/JavaScript/Reference/Global_Objects/String/length
+tags:
+  - JavaScript
+  - Propriété
+  - Prototype
+  - Reference
+  - String
+translation_of: Web/JavaScript/Reference/Global_Objects/String/length
+original_slug: Web/JavaScript/Reference/Objets_globaux/String/length
+---
+{{JSRef}}
+
+La propriété **`length`** représente la longueur d'une chaine de caractères, exprimée en nombre de points de code UTF-16. C'est une propriété accessible en lecture seule.
+
+{{EmbedInteractiveExample("pages/js/string-length.html")}}
+
+## Syntaxe
+
+    str.length
+
+## Description
+
+Cette propriété renvoie le nombre de « codets » (ou unités de code ou bien _code units_ en anglais) d'une chaîne de caractères. {{interwiki("wikipedia", "UTF-16")}}. Le format utilisé pour représenter les chaînes de caractères en JavaScript utilise un seul codet sur 16 bits pour représenter la plupart des caractères communs. En revanche, pour représenter les caractères plus rares, deux codets seront utilisés : la valeur renvoyée par `length` ne correspondra alors pas au nombre de caractères dans la chaîne.
+
+ECMAScript 2016 (la septième édition) établit une longueur maximale de `2^53 - 1` éléments. Auparavant, aucune longueur maximale n'était spécifiée. Pour Firefox, les chaînes ont une longueur maximale de `2^30-2` caractères (environ 1 Go). Pour les versions de Firefox antérieures à Firefox 65, la taille maximale était de de `2^28-1` (environ 256 Mo).
+
+Pour une chaine vide, on aura `length` égal à 0.
+
+La propriété statique `String.length` renvoie la valeur 1.
+
+## Exemples
+
+### Utiliser `String.length`
+
+```js
+const x = "Mozilla";
+const vide = "";
+
+console.log(x + " mesure " + x.length + " codets");
+/* "Mozilla mesure 7 codets" */
+
+console.log("La chaîne vide a une longueur de " + vide.length);
+/* "La chaîne vide a une longueur de 0" */
+```
+
+### Affecter une valeur à `length`
+
+```js
+const maChaine = "Sloubi";
+// Lorsqu'on tente d'affecter une valeur à la propriété length
+// rien d'observable ne se produit
+
+maChaine.length = 3;
+console.log(maChaine); /* Sloubi */
+console.log(maChaine.length); // 6
+```
+
+## Spécifications
+
+| Spécification                                                                                                                    | Statut                       | Commentaires                                          |
+| -------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- |
+| {{SpecName('ES1')}}                                                                                                         | {{Spec2('ES1')}}         | Définition initiale. Implémentée avec JavaScript 1.0. |
+| {{SpecName('ES5.1', '#sec-15.5.5.1', 'String.prototype.length')}}                                         | {{Spec2('ES5.1')}}     |                                                       |
+| {{SpecName('ES6', '#sec-properties-of-string-instances-length', 'String.prototype.length')}}     | {{Spec2('ES6')}}         |                                                       |
+| {{SpecName('ESDraft', '#sec-properties-of-string-instances-length', 'String.prototype.length')}} | {{Spec2('ESDraft')}} |                                                       |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.String.length")}}
+
+## Voir aussi
+
+- [La propriété JavaScript `String.length` et l'internationalisation des applications web](http://developer.teradata.com/blog/jasonstrimpel/2011/11/javascript-string-length-and-internationalizing-web-applications) (en anglais)
diff --git a/files/fr/web/javascript/reference/global_objects/string/link/index.html b/files/fr/web/javascript/reference/global_objects/string/link/index.html
deleted file mode 100644
index f942d61c5a..0000000000
--- a/files/fr/web/javascript/reference/global_objects/string/link/index.html
+++ /dev/null
@@ -1,84 +0,0 @@
----
-title: String.prototype.link()
-slug: Web/JavaScript/Reference/Global_Objects/String/link
-tags:
-  - JavaScript
-  - Méthode
-  - Prototype
-  - Reference
-  - String
-translation_of: Web/JavaScript/Reference/Global_Objects/String/link
-original_slug: Web/JavaScript/Reference/Objets_globaux/String/link
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <code><strong>link()</strong></code> permet de créer une chaîne de caractères représentant un élément HTML {{HTMLElement("a")}}, ce qui permet d'afficher la chaîne de caractères comme un lien hypertexte vers une URL donnée.</p>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>str</var>.link(<var>url</var>)</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>url</code></dt>
- <dd>Toute chaîne de caractères pouvant être utilisée comme valeur pour l'attribut <code>href</code> de la balise <code>a</code>. Cette chaîne doit être une URL valide (relative ou absolue) dont les caractères <code>&amp;</code> sont échappés en <code>&amp;amp;</code>, et dont les doubles quotes (<code>"</code>) doivent être échappées avec l'entité <code>&amp;quot;</code>.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Une chaîne de caractères représentant un élément HTML {{HTMLElement("a")}}.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>La méthode <code>link</code> permet de créer un fragment HTML avec un lien hypertexte. Le chaîne renvoyée par la méthode peut ensuite être ajoutée au document grâce aux méthodes {{domxref("document.write()")}} ou {{domxref("element.innerHTML")}}.</p>
-
-<p>Les liens créés avec la méthode <code>link</code> deviennent des éléments du tableau <code>links</code>, membre de l'objet <code>document</code>. Voir {{ Domxref("document.links") }}.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<p>L'exemple qui suit affiche le texte "MDN" avec un hyperlien qui envoie l'utilisateur vers le site du Mozilla Developer Network.</p>
-
-<pre class="brush:js">var texteAffiché = "MDN";
-var URL = "https://developer.mozilla.org/";
-
-console.log("Cliquer ici pour revenir sur " + texteAffiché.link(URL));
-// Cliquer ici pour revenir sur &lt;a href="https://developer.mozilla.org/"&gt;MDN&lt;/a&gt;</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-string.prototype.link', 'String.prototype.link')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td>Définition initiale. Implémentée avec JavaScript 1.0. Définie dans l'Annexe B (normative) pour les fonctionnalités ECMAScript additionnelles concernant les navigateurs web.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-string.prototype.link', 'String.prototype.link')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td>Définie dans l'Annexe B (normative) pour les fonctionnalités ECMAScript additionnelles concernant les navigateurs web.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.String.link")}}</p>
-
-<h2 id="Notes_relatives_à_Gecko">Notes relatives à Gecko</h2>
-
-<ul>
- <li>À partir de Gecko 17.0 {{geckoRelease("17")}} le symbole de double quote <strong>"</strong> est automatiquement remplacé par l'entité HTML de référence dans le paramètre <code>url</code>.</li>
-</ul>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("String.prototype.anchor()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/string/link/index.md b/files/fr/web/javascript/reference/global_objects/string/link/index.md
new file mode 100644
index 0000000000..d3188e88f6
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/string/link/index.md
@@ -0,0 +1,65 @@
+---
+title: String.prototype.link()
+slug: Web/JavaScript/Reference/Global_Objects/String/link
+tags:
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - String
+translation_of: Web/JavaScript/Reference/Global_Objects/String/link
+original_slug: Web/JavaScript/Reference/Objets_globaux/String/link
+---
+{{JSRef}}
+
+La méthode **`link()`** permet de créer une chaîne de caractères représentant un élément HTML {{HTMLElement("a")}}, ce qui permet d'afficher la chaîne de caractères comme un lien hypertexte vers une URL donnée.
+
+## Syntaxe
+
+    str.link(url)
+
+### Paramètres
+
+- `url`
+  - : Toute chaîne de caractères pouvant être utilisée comme valeur pour l'attribut `href` de la balise `a`. Cette chaîne doit être une URL valide (relative ou absolue) dont les caractères `&` sont échappés en `&amp;`, et dont les doubles quotes (`"`) doivent être échappées avec l'entité `&quot;`.
+
+### Valeur de retour
+
+Une chaîne de caractères représentant un élément HTML {{HTMLElement("a")}}.
+
+## Description
+
+La méthode `link` permet de créer un fragment HTML avec un lien hypertexte. Le chaîne renvoyée par la méthode peut ensuite être ajoutée au document grâce aux méthodes {{domxref("document.write()")}} ou {{domxref("element.innerHTML")}}.
+
+Les liens créés avec la méthode `link` deviennent des éléments du tableau `links`, membre de l'objet `document`. Voir {{ Domxref("document.links") }}.
+
+## Exemples
+
+L'exemple qui suit affiche le texte "MDN" avec un hyperlien qui envoie l'utilisateur vers le site du Mozilla Developer Network.
+
+```js
+var texteAffiché = "MDN";
+var URL = "https://developer.mozilla.org/";
+
+console.log("Cliquer ici pour revenir sur " + texteAffiché.link(URL));
+// Cliquer ici pour revenir sur <a href="https://developer.mozilla.org/">MDN</a>
+```
+
+## Spécifications
+
+| Spécification                                                                                            | État                         | Commentaires                                                                                                                                                                 |
+| -------------------------------------------------------------------------------------------------------- | ---------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| {{SpecName('ES6', '#sec-string.prototype.link', 'String.prototype.link')}}     | {{Spec2('ES6')}}         | Définition initiale. Implémentée avec JavaScript 1.0. Définie dans l'Annexe B (normative) pour les fonctionnalités ECMAScript additionnelles concernant les navigateurs web. |
+| {{SpecName('ESDraft', '#sec-string.prototype.link', 'String.prototype.link')}} | {{Spec2('ESDraft')}} | Définie dans l'Annexe B (normative) pour les fonctionnalités ECMAScript additionnelles concernant les navigateurs web.                                                       |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.String.link")}}
+
+## Notes relatives à Gecko
+
+- À partir de Gecko 17.0 {{geckoRelease("17")}} le symbole de double quote **"** est automatiquement remplacé par l'entité HTML de référence dans le paramètre `url`.
+
+## Voir aussi
+
+- {{jsxref("String.prototype.anchor()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/string/localecompare/index.html b/files/fr/web/javascript/reference/global_objects/string/localecompare/index.html
deleted file mode 100644
index 2b84d90be0..0000000000
--- a/files/fr/web/javascript/reference/global_objects/string/localecompare/index.html
+++ /dev/null
@@ -1,182 +0,0 @@
----
-title: String.prototype.localeCompare()
-slug: Web/JavaScript/Reference/Global_Objects/String/localeCompare
-tags:
-  - Internationalisation
-  - JavaScript
-  - Méthode
-  - Prototype
-  - Reference
-  - String
-translation_of: Web/JavaScript/Reference/Global_Objects/String/localeCompare
-original_slug: Web/JavaScript/Reference/Objets_globaux/String/localeCompare
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <code><strong>localeCompare()</strong></code> renvoie un nombre indiquant si la chaîne de caractères courante se situe avant, après ou est la même que la chaîne passée en paramètre, selon l'ordre lexicographique.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/string-localecompare.html")}}</div>
-
-
-
-<p>Les arguments <code>locales</code> et <code>options</code> permettent de définir la locale et des options pour adapter le comportement de la fonction. Les anciennes implémentations ignoreront les arguments <code>locales</code> et <code>options</code>. L'ordre de tri utilisé sera entièrement dépendant de l'implémentation.</p>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>str</var>.localeCompare(<var>chaineÀComparer</var> [, <var>locales</var> [, <var>options</var>]])</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<p>Voir le <a href="#compat" title="#Browser_compatibility">tableau de compatibilité des navigateurs</a> pour savoir quels navigateurs prennent en charge les arguments <code>locales</code> et <code>options</code>. L'<a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/localeCompare#Vérifier_le_support_des_arguments_locales_et_options">exemple pour vérifier le support des arguments <code>locales</code> et <code>options</code></a> fournit un fragment de code pour détecter la prise en charge de ces fonctionnalités.</p>
-
-<dl>
- <dt><code>chaineÀComparer</code></dt>
- <dd>La chaîne avec laquelle on souhaite comparer la chaîne de caractères courante.</dd>
-</dl>
-
-<div>{{page('fr/docs/Web/JavaScript/Reference/Objets_globaux/Collator','Param.C3.A8tres')}}</div>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Un nombre négatif si la chaîne de appelante est ordonnée avant la chaîne passée en argument, un nombre positif si elle se situe après, 0 si les deux chaînes sont équivalentes.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>Cette méthode renvoie un nombre entier qui indique si la chaîne de caractères courante se situe avant ou après la chaîne passée en argument selon l'ordre lexicographique tenant compte de la locale. Cette méthode renvoie</p>
-
-<ul>
- <li>un nombre négatif si la chaîne de caractères courant se situe avant la chaîne <code>chaineÀComparer</code></li>
- <li>un nombre positif si elle se situe après</li>
- <li>0 si les deux chaînes se situent au même niveau</li>
-</ul>
-
-<p>Attention à ne pas tester que les valeurs -1 et 1. Les valeurs entières utilisées peuvent varier en fonction des navigateurs et de leurs versions. En effet, la spécification indique uniquement le signe de la valeur à fournir. Par exemple, certains navigateurs pourront renvoyer -2 ou 2 (voire d'autres valeurs).</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Utiliser_la_méthode_localeCompare()">Utiliser la méthode <code>localeCompare()</code></h3>
-
-<p>L'exemple qui suit illustre les différents cas de figures lors de la comparaison des chaînes de caractères :</p>
-
-<pre class="brush: js">console.log('a'.localeCompare('c')); // -2, ou -1, ou toute autre valeur négative
-console.log('c'.localeCompare('a')); // 2, ou 1, ou toute autre valeur positive
-console.log('a'.localeCompare('a')); // 0
-</pre>
-
-<p>Les résultats illustrés ici peuvent varier entre les différents navigateurs et selon les versions des navigateurs. En effet, les valeurs renvoyées sont spécifiques selon les implémentations. La spécification définit uniquement le signe de la valeur à renvoyer.</p>
-
-<h3 id="Trier_un_tableau">Trier un tableau</h3>
-
-<p><code>localeCompare()</code> permet de trier un tableau sans tenir compte de la casse :</p>
-
-<pre class="brush: js">var items = ['réservé', 'Premier', 'Cliché', 'communiqué', 'café', 'Adieu'];
-items.sort((a, b) =&gt; a.localeCompare(b, 'fr', {ignorePunctuation: true}));
-// ['Adieu', 'café', 'Cliché', 'communiqué', 'Premier', 'réservé']
-</pre>
-
-<h3 id="Vérifier_le_support_des_arguments_locales_et_options">Vérifier le support des arguments <code>locales</code> et <code>options</code></h3>
-
-<p>Les argument <code>locales</code> et <code>options</code> ne sont pas supportés par tous les navigateurs. Pour vérifier qu'une implémentation supporte ces paramètres, il est possible d'utiliser un cas d'erreur quand on utilise une balise de langue incorrecte (ce qui provoque une exception {{jsxref("RangeError")}}) :</p>
-
-<pre class="brush: js">function localeCompareSupportsLocales() {
-    try {
-        "a".localeCompare​("b", "i");
-    } catch (e) {
-        return e​.name === "RangeError";
-    }
-    return false;
-}
-</pre>
-
-<h3 id="Utiliser_le_paramètre_locales">Utiliser le paramètre <code>locales</code></h3>
-
-<p>Les résultats fournis par la méthode <code>localeCompare()</code> peuvent varier selon les langues utilisées. Pour spécifier la langue à utiliser pour votre application, utiliser l'argument <code>locales</code> pour définir la locale à utiliser (et éventuellement des langues de recours) :</p>
-
-<pre class="brush: js">console.log('ä'.localeCompare('z', 'de')); // une valeur négative : en allemand ä est avant z
-console.log('ä'.localeCompare('z', 'sv')); // une valeur positive : en suédois, ä arrive après z
-</pre>
-
-<h3 id="Utiliser_le_paramètre_options">Utiliser le paramètre <code>options</code></h3>
-
-<p>Les résultats construits par la méthode <code>localeCompare()</code> peuvent être adaptés grâce au paramètre <code>options</code> :</p>
-
-<pre class="brush: js">// en allemand, ä et a ont la même lettre de base
-console.log('ä'.localeCompare('a', 'de', {sensitivity: "base"})); // 0
-
-// en suédois, ä et a n'ont pas la même lettre de base
-console.log('ä'.localeCompare('a', 'sv', {sensitivity: "base"})); // une valeur positive
-</pre>
-
-<h3 id="Tri_numérique">Tri numérique</h3>
-
-<pre class="brush: js">// Par défaut, selon l'ordre lexicographique, "2" est supérieur à "10"
-console.log("2".localeCompare("10")); // 1
-
-// En utilisant un ordre numérique :
-console.log("2".localeCompare("10", undefined, {numeric: true})); // -1
-
-// En utilisant une balise de locale:
-console.log("2".localeCompare("10","en-u-kn-true")); // -1
-</pre>
-
-<h2 id="Performances">Performances</h2>
-
-<p>Pour comparer un grand nombre de chaînes de caractères, par exemple pour trier de grands tableaux, il est préférable de créer un objet {{jsxref("Objets_globaux/Collator", "Intl.Collator")}} et utiliser la fonction fournie par la propriété {{jsxref("Collator.prototype.compare", "compare")}}.</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES3')}}</td>
-   <td>{{Spec2('ES3')}}</td>
-   <td>Définition initiale.<br>
-    Implémentée avec JavaScript 1.2</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-15.5.4.9', 'String.prototype.localeCompare')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-string.prototype.localecompare', 'String.prototype.localeCompare')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-string.prototype.localecompare', 'String.prototype.localeCompare')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES Int 1.0', '#sec-13.1.1', 'String.prototype.localeCompare')}}</td>
-   <td>{{Spec2('ES Int 1.0')}}</td>
-   <td>Définition des paramètres<code> locale</code> et <code>option</code></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES Int 2.0', '#sec-13.1.1', 'String.prototype.localeCompare')}}</td>
-   <td>{{Spec2('ES Int 2.0')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES Int Draft', '#sec-String.prototype.localeCompare', 'String.prototype.localeCompare')}}</td>
-   <td>{{Spec2('ES Int Draft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.String.localeCompare")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Objets_globaux/Collator", "Intl.Collator")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/string/localecompare/index.md b/files/fr/web/javascript/reference/global_objects/string/localecompare/index.md
new file mode 100644
index 0000000000..05df8c7347
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/string/localecompare/index.md
@@ -0,0 +1,144 @@
+---
+title: String.prototype.localeCompare()
+slug: Web/JavaScript/Reference/Global_Objects/String/localeCompare
+tags:
+  - Internationalisation
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - String
+translation_of: Web/JavaScript/Reference/Global_Objects/String/localeCompare
+original_slug: Web/JavaScript/Reference/Objets_globaux/String/localeCompare
+---
+{{JSRef}}
+
+La méthode **`localeCompare()`** renvoie un nombre indiquant si la chaîne de caractères courante se situe avant, après ou est la même que la chaîne passée en paramètre, selon l'ordre lexicographique.
+
+{{EmbedInteractiveExample("pages/js/string-localecompare.html")}}
+
+Les arguments `locales` et `options` permettent de définir la locale et des options pour adapter le comportement de la fonction. Les anciennes implémentations ignoreront les arguments `locales` et `options`. L'ordre de tri utilisé sera entièrement dépendant de l'implémentation.
+
+## Syntaxe
+
+    str.localeCompare(chaineÀComparer [, locales [, options]])
+
+### Paramètres
+
+Voir le [tableau de compatibilité des navigateurs](#compat "#Browser_compatibility") pour savoir quels navigateurs prennent en charge les arguments `locales` et `options`. L'[exemple pour vérifier le support des arguments `locales` et `options`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/localeCompare#Vérifier_le_support_des_arguments_locales_et_options) fournit un fragment de code pour détecter la prise en charge de ces fonctionnalités.
+
+- `chaineÀComparer`
+  - : La chaîne avec laquelle on souhaite comparer la chaîne de caractères courante.
+
+{{page('fr/docs/Web/JavaScript/Reference/Objets_globaux/Collator','Param.C3.A8tres')}}
+
+### Valeur de retour
+
+Un nombre négatif si la chaîne de appelante est ordonnée avant la chaîne passée en argument, un nombre positif si elle se situe après, 0 si les deux chaînes sont équivalentes.
+
+## Description
+
+Cette méthode renvoie un nombre entier qui indique si la chaîne de caractères courante se situe avant ou après la chaîne passée en argument selon l'ordre lexicographique tenant compte de la locale. Cette méthode renvoie
+
+- un nombre négatif si la chaîne de caractères courant se situe avant la chaîne `chaineÀComparer`
+- un nombre positif si elle se situe après
+- 0 si les deux chaînes se situent au même niveau
+
+Attention à ne pas tester que les valeurs -1 et 1. Les valeurs entières utilisées peuvent varier en fonction des navigateurs et de leurs versions. En effet, la spécification indique uniquement le signe de la valeur à fournir. Par exemple, certains navigateurs pourront renvoyer -2 ou 2 (voire d'autres valeurs).
+
+## Exemples
+
+### Utiliser la méthode `localeCompare()`
+
+L'exemple qui suit illustre les différents cas de figures lors de la comparaison des chaînes de caractères :
+
+```js
+console.log('a'.localeCompare('c')); // -2, ou -1, ou toute autre valeur négative
+console.log('c'.localeCompare('a')); // 2, ou 1, ou toute autre valeur positive
+console.log('a'.localeCompare('a')); // 0
+```
+
+Les résultats illustrés ici peuvent varier entre les différents navigateurs et selon les versions des navigateurs. En effet, les valeurs renvoyées sont spécifiques selon les implémentations. La spécification définit uniquement le signe de la valeur à renvoyer.
+
+### Trier un tableau
+
+`localeCompare()` permet de trier un tableau sans tenir compte de la casse :
+
+```js
+var items = ['réservé', 'Premier', 'Cliché', 'communiqué', 'café', 'Adieu'];
+items.sort((a, b) => a.localeCompare(b, 'fr', {ignorePunctuation: true}));
+// ['Adieu', 'café', 'Cliché', 'communiqué', 'Premier', 'réservé']
+```
+
+### Vérifier le support des arguments `locales` et `options`
+
+Les argument `locales` et `options` ne sont pas supportés par tous les navigateurs. Pour vérifier qu'une implémentation supporte ces paramètres, il est possible d'utiliser un cas d'erreur quand on utilise une balise de langue incorrecte (ce qui provoque une exception {{jsxref("RangeError")}}) :
+
+```js
+function localeCompareSupportsLocales() {
+    try {
+        "a".localeCompare​("b", "i");
+    } catch (e) {
+        return e​.name === "RangeError";
+    }
+    return false;
+}
+```
+
+### Utiliser le paramètre `locales`
+
+Les résultats fournis par la méthode `localeCompare()` peuvent varier selon les langues utilisées. Pour spécifier la langue à utiliser pour votre application, utiliser l'argument `locales` pour définir la locale à utiliser (et éventuellement des langues de recours) :
+
+```js
+console.log('ä'.localeCompare('z', 'de')); // une valeur négative : en allemand ä est avant z
+console.log('ä'.localeCompare('z', 'sv')); // une valeur positive : en suédois, ä arrive après z
+```
+
+### Utiliser le paramètre `options`
+
+Les résultats construits par la méthode `localeCompare()` peuvent être adaptés grâce au paramètre `options` :
+
+```js
+// en allemand, ä et a ont la même lettre de base
+console.log('ä'.localeCompare('a', 'de', {sensitivity: "base"})); // 0
+
+// en suédois, ä et a n'ont pas la même lettre de base
+console.log('ä'.localeCompare('a', 'sv', {sensitivity: "base"})); // une valeur positive
+```
+
+### Tri numérique
+
+```js
+// Par défaut, selon l'ordre lexicographique, "2" est supérieur à "10"
+console.log("2".localeCompare("10")); // 1
+
+// En utilisant un ordre numérique :
+console.log("2".localeCompare("10", undefined, {numeric: true})); // -1
+
+// En utilisant une balise de locale:
+console.log("2".localeCompare("10","en-u-kn-true")); // -1
+```
+
+## Performances
+
+Pour comparer un grand nombre de chaînes de caractères, par exemple pour trier de grands tableaux, il est préférable de créer un objet {{jsxref("Objets_globaux/Collator", "Intl.Collator")}} et utiliser la fonction fournie par la propriété {{jsxref("Collator.prototype.compare", "compare")}}.
+
+## Spécifications
+
+| Spécification                                                                                                                            | État                             | Commentaires                                         |
+| ---------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ---------------------------------------------------- |
+| {{SpecName('ES3')}}                                                                                                                 | {{Spec2('ES3')}}             | Définition initiale. Implémentée avec JavaScript 1.2 |
+| {{SpecName('ES5.1', '#sec-15.5.4.9', 'String.prototype.localeCompare')}}                                         | {{Spec2('ES5.1')}}         |                                                      |
+| {{SpecName('ES6', '#sec-string.prototype.localecompare', 'String.prototype.localeCompare')}}             | {{Spec2('ES6')}}             |                                                      |
+| {{SpecName('ESDraft', '#sec-string.prototype.localecompare', 'String.prototype.localeCompare')}}         | {{Spec2('ESDraft')}}     |                                                      |
+| {{SpecName('ES Int 1.0', '#sec-13.1.1', 'String.prototype.localeCompare')}}                                     | {{Spec2('ES Int 1.0')}} | Définition des paramètres` locale` et `option`       |
+| {{SpecName('ES Int 2.0', '#sec-13.1.1', 'String.prototype.localeCompare')}}                                     | {{Spec2('ES Int 2.0')}} |                                                      |
+| {{SpecName('ES Int Draft', '#sec-String.prototype.localeCompare', 'String.prototype.localeCompare')}} | {{Spec2('ES Int Draft')}} |                                                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.String.localeCompare")}}
+
+## Voir aussi
+
+- {{jsxref("Objets_globaux/Collator", "Intl.Collator")}}
diff --git a/files/fr/web/javascript/reference/global_objects/string/match/index.html b/files/fr/web/javascript/reference/global_objects/string/match/index.html
deleted file mode 100644
index 27d3d04e85..0000000000
--- a/files/fr/web/javascript/reference/global_objects/string/match/index.html
+++ /dev/null
@@ -1,154 +0,0 @@
----
-title: String.prototype.match()
-slug: Web/JavaScript/Reference/Global_Objects/String/match
-tags:
-  - Expressions rationnelles
-  - JavaScript
-  - Méthode
-  - Prototype
-  - Reference
-  - String
-translation_of: Web/JavaScript/Reference/Global_Objects/String/match
-original_slug: Web/JavaScript/Reference/Objets_globaux/String/match
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <strong><code>match()</code></strong> permet d'obtenir le tableau des correspondances entre la chaîne courante et une expression rationnelle.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/string-match.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>str</var>.match(<var>regexp</var>)</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>regexp</code></dt>
- <dd>Un objet représentant une expression rationnelle. Si ce n'est pas un objet de type <code>RegExp</code>, celui-ci sera converti en un objet {{jsxref("RegExp")}} grâce à <code>new RegExp(regexp)</code>. Si aucun paramètre n'est utilisé, cela renverra un tableau contenant un élément étant la chaîne vide : <code>[""]</code>.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Un tableau ({{jsxref("Array")}}) contenant les correspondances et les groupes capturés avec les parenthèses ou {{jsxref("null")}} s'il n'y a pas de correspondance. Le contenu de ce tableau dépend de l'utilisation du marqueur pour la recherche globale <code>g</code> :</p>
-
-<ul>
- <li>Si le marqueur <code>g</code> est utilisé, tous les résultats correspondants à l'expression rationnelle complète seront renvoyés mais les groupes capturants ne seront pas renvoyés.</li>
- <li>Si le marqueur <code>g</code> n'est pas utilisé, seule la première correspondance et ses groupes capturants seront renvoyés. Dans ce cas, l'élément renvoyé aura des propriétés supplémentaires listées ci-après.</li>
-</ul>
-
-<h4 id="Propriétés_supplémentaires">Propriétés supplémentaires</h4>
-
-<p>Comme indiqué ci-avant, les résultats peuvent contenir certaines propriétés supplémentaires :</p>
-
-<ul>
- <li><code>groups</code> : un tableau de groupes capturants nommés ou {{jsxref("undefined")}} si aucun groupe capturant n'a été défini. Voir <a href="/fr/docs/Web/JavaScript/Guide/Regular_Expressions/Groups_and_Ranges">la page sur les groupes et les intervalles</a> pour plus d'informations.</li>
- <li><code>index</code> : l'indice de la chaîne de caractères où a été trouvée la correspondance.</li>
- <li><code>input</code> : une copie de la chaîne sur laquelle a été effectuée la recherche.</li>
-</ul>
-
-<h2 id="Description">Description</h2>
-
-<p>Si l'expression n'utilise pas le drapeau (<em>flag</em>) <code>g</code>, le résultat obtenu sera le même qu'avec {{jsxref("RegExp.prototype.exec()", "RegExp.exec()")}}.</p>
-
-<h3 id="Voir_aussi_les_méthodes_de_RegExp">Voir aussi : les méthodes de <code>RegExp</code></h3>
-
-<ul>
- <li>Si on souhaite savoir s'il existe des correspondances entre une chaîne de caractères et une expression rationnelle {{jsxref("RegExp")}}, on pourra utiliser {{jsxref("RegExp.prototype.test()", "RegExp.test()")}}.</li>
- <li>Si on ne souhaite obtenir que la première correspondance, on pourra plutôt utiliser {{jsxref("RegExp.prototype.exec()", "RegExp.exec()")}} à la place.</li>
- <li>Si on souhaite obtenir les groupes correspondants et que le drapeau « global » est activé, il faudra utiliser {{jsxref("RegExp.prototype.exec()", "RegExp.exec()")}} à la place.</li>
-</ul>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Utiliser_match()">Utiliser <code>match()</code></h3>
-
-<p>Dans l'exemple suivant, on utilise <code>match()</code> afin de trouver la chaîne <code>'Chapitre'</code> suivie par un ou plusieurs chiffres séparés par des points. L'expression utilisée active le drapeau <code>i</code> afin que la casse ne soit pas prise en compte.</p>
-
-<pre class="brush: js">var str = 'Pour plus d\'informations, voir le chapitre 3.4.5.1';
-var re = /(chapitre \d+(\.\d)*)/i;
-var trouvé = str.match(re);
-
-console.log(trouvé);
-
-// logs ['chapitre 3.4.5.1', 'chapitre 3.4.5.1', '.1']
-
-// 'chapitre 3.4.5.1' est la première correspondance
-// 'chapitre 3.4.5.1' est la valeur gardée en mémoire par
-// `(chapitre \d+(\.\d)*)`.
-// '.1' est la valeur gardée en mémoire par `(\.\d)`.
-</pre>
-
-<h3 id="Utiliser_les_drapeaux_g_(global)_et_i_(ignorer_la_casse)_avec_match()">Utiliser les drapeaux <code>g</code> (global) et <code>i</code> (ignorer la casse) avec <code>match()</code></h3>
-
-<p>Dans cet exemple, on illustre comment utiliser des drapeaux avec l'expression rationnelle qui est un argument de <code>match()</code>. Chaque lettre de A à E et de a à e est renvoyée, chacune dans un élément du tableau de résultat.</p>
-
-<pre class="brush: js">var str = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz';
-var regexp = /[A-E]/gi;
-var tableau_correspondances = str.match(regexp);
-
-console.log(tableau_correspondances);
-// ['A', 'B', 'C', 'D', 'E', 'a', 'b', 'c', 'd', 'e']
-</pre>
-
-<h3 id="Utiliser_un_paramètre_qui_n'est_pas_une_RegExp">Utiliser un paramètre qui n'est pas une <code>RegExp</code></h3>
-
-<p>Lorsque le paramètre passé à la fonction est une chaîne de caractères ou un nombre, il est converti de façon implicite en un objet  {{jsxref("RegExp")}} grâce à <code>new RegExp(obj)</code>. Si c'est un nombre positif avec le signe +, la méthode <code>RegExp()</code> ignorera ce signe.</p>
-
-<pre class="brush: js">var str1 = "NaN signifie : qui n'est pas un nombre.";
-var str2 = "Mon père a 65 ans."
-str1.match("nombre");   // "nombre" est une chaîne, renvoie ["nombre"]
-str1.match(NaN);        // NaN est de type number, renvoie ["NaN"]
-str2.match(65);         // Renvoie ["65"]
-str2.match(+65);        // Renvoie également ["65"]</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES3')}}</td>
-   <td>{{Spec2('ES3')}}</td>
-   <td>Définition initiale. Implémentée avec JavaScript 1.2.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-15.5.4.10', 'String.prototype.match')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-string.prototype.match', 'String.prototype.match')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-string.prototype.match', 'String.prototype.match')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.String.match")}}</p>
-
-<h2 id="Notes_spécifiques_à_FirefoxGecko">Notes spécifiques à Firefox/Gecko</h2>
-
-<ul>
- <li><code>flags</code> était un second argument non standard présent uniquement sur Gecko : <var>str</var>.match(<var>regexp, flags</var>) et a été retiré avec Firefox 49.</li>
- <li>À partir de Firefox 27, cette méthode a été ajustée afin d'être conforme à ECMAScript. Lorsque <code>match()</code> est appelée sur une expression rationnelle globale, la propriété {{jsxref("RegExp.lastIndex")}} de l'objet sera redéfini à <code>0</code> ({{bug(501739)}}).</li>
-</ul>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("RegExp")}}</li>
- <li>{{jsxref("RegExp.prototype.exec()")}}</li>
- <li>{{jsxref("RegExp.prototype.test()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/string/match/index.md b/files/fr/web/javascript/reference/global_objects/string/match/index.md
new file mode 100644
index 0000000000..9b070559b6
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/string/match/index.md
@@ -0,0 +1,123 @@
+---
+title: String.prototype.match()
+slug: Web/JavaScript/Reference/Global_Objects/String/match
+tags:
+  - Expressions rationnelles
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - String
+translation_of: Web/JavaScript/Reference/Global_Objects/String/match
+original_slug: Web/JavaScript/Reference/Objets_globaux/String/match
+---
+{{JSRef}}
+
+La méthode **`match()`** permet d'obtenir le tableau des correspondances entre la chaîne courante et une expression rationnelle.
+
+{{EmbedInteractiveExample("pages/js/string-match.html")}}
+
+## Syntaxe
+
+    str.match(regexp)
+
+### Paramètres
+
+- `regexp`
+  - : Un objet représentant une expression rationnelle. Si ce n'est pas un objet de type `RegExp`, celui-ci sera converti en un objet {{jsxref("RegExp")}} grâce à `new RegExp(regexp)`. Si aucun paramètre n'est utilisé, cela renverra un tableau contenant un élément étant la chaîne vide : `[""]`.
+
+### Valeur de retour
+
+Un tableau ({{jsxref("Array")}}) contenant les correspondances et les groupes capturés avec les parenthèses ou {{jsxref("null")}} s'il n'y a pas de correspondance. Le contenu de ce tableau dépend de l'utilisation du marqueur pour la recherche globale `g` :
+
+- Si le marqueur `g` est utilisé, tous les résultats correspondants à l'expression rationnelle complète seront renvoyés mais les groupes capturants ne seront pas renvoyés.
+- Si le marqueur `g` n'est pas utilisé, seule la première correspondance et ses groupes capturants seront renvoyés. Dans ce cas, l'élément renvoyé aura des propriétés supplémentaires listées ci-après.
+
+#### Propriétés supplémentaires
+
+Comme indiqué ci-avant, les résultats peuvent contenir certaines propriétés supplémentaires :
+
+- `groups` : un tableau de groupes capturants nommés ou {{jsxref("undefined")}} si aucun groupe capturant n'a été défini. Voir [la page sur les groupes et les intervalles](/fr/docs/Web/JavaScript/Guide/Regular_Expressions/Groups_and_Ranges) pour plus d'informations.
+- `index` : l'indice de la chaîne de caractères où a été trouvée la correspondance.
+- `input` : une copie de la chaîne sur laquelle a été effectuée la recherche.
+
+## Description
+
+Si l'expression n'utilise pas le drapeau (_flag_) `g`, le résultat obtenu sera le même qu'avec {{jsxref("RegExp.prototype.exec()", "RegExp.exec()")}}.
+
+### Voir aussi : les méthodes de `RegExp`
+
+- Si on souhaite savoir s'il existe des correspondances entre une chaîne de caractères et une expression rationnelle {{jsxref("RegExp")}}, on pourra utiliser {{jsxref("RegExp.prototype.test()", "RegExp.test()")}}.
+- Si on ne souhaite obtenir que la première correspondance, on pourra plutôt utiliser {{jsxref("RegExp.prototype.exec()", "RegExp.exec()")}} à la place.
+- Si on souhaite obtenir les groupes correspondants et que le drapeau « global » est activé, il faudra utiliser {{jsxref("RegExp.prototype.exec()", "RegExp.exec()")}} à la place.
+
+## Exemples
+
+### Utiliser `match()`
+
+Dans l'exemple suivant, on utilise `match()` afin de trouver la chaîne `'Chapitre'` suivie par un ou plusieurs chiffres séparés par des points. L'expression utilisée active le drapeau `i` afin que la casse ne soit pas prise en compte.
+
+```js
+var str = 'Pour plus d\'informations, voir le chapitre 3.4.5.1';
+var re = /(chapitre \d+(\.\d)*)/i;
+var trouvé = str.match(re);
+
+console.log(trouvé);
+
+// logs ['chapitre 3.4.5.1', 'chapitre 3.4.5.1', '.1']
+
+// 'chapitre 3.4.5.1' est la première correspondance
+// 'chapitre 3.4.5.1' est la valeur gardée en mémoire par
+// `(chapitre \d+(\.\d)*)`.
+// '.1' est la valeur gardée en mémoire par `(\.\d)`.
+```
+
+### Utiliser les drapeaux `g` (global) et `i` (ignorer la casse) avec `match()`
+
+Dans cet exemple, on illustre comment utiliser des drapeaux avec l'expression rationnelle qui est un argument de `match()`. Chaque lettre de A à E et de a à e est renvoyée, chacune dans un élément du tableau de résultat.
+
+```js
+var str = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz';
+var regexp = /[A-E]/gi;
+var tableau_correspondances = str.match(regexp);
+
+console.log(tableau_correspondances);
+// ['A', 'B', 'C', 'D', 'E', 'a', 'b', 'c', 'd', 'e']
+```
+
+### Utiliser un paramètre qui n'est pas une `RegExp`
+
+Lorsque le paramètre passé à la fonction est une chaîne de caractères ou un nombre, il est converti de façon implicite en un objet  {{jsxref("RegExp")}} grâce à `new RegExp(obj)`. Si c'est un nombre positif avec le signe +, la méthode `RegExp()` ignorera ce signe.
+
+```js
+var str1 = "NaN signifie : qui n'est pas un nombre.";
+var str2 = "Mon père a 65 ans."
+str1.match("nombre");   // "nombre" est une chaîne, renvoie ["nombre"]
+str1.match(NaN);        // NaN est de type number, renvoie ["NaN"]
+str2.match(65);         // Renvoie ["65"]
+str2.match(+65);        // Renvoie également ["65"]
+```
+
+## Spécifications
+
+| Spécification                                                                                                | État                         | Commentaires                                          |
+| ------------------------------------------------------------------------------------------------------------ | ---------------------------- | ----------------------------------------------------- |
+| {{SpecName('ES3')}}                                                                                     | {{Spec2('ES3')}}         | Définition initiale. Implémentée avec JavaScript 1.2. |
+| {{SpecName('ES5.1', '#sec-15.5.4.10', 'String.prototype.match')}}                     | {{Spec2('ES5.1')}}     |                                                       |
+| {{SpecName('ES6', '#sec-string.prototype.match', 'String.prototype.match')}}         | {{Spec2('ES6')}}         |                                                       |
+| {{SpecName('ESDraft', '#sec-string.prototype.match', 'String.prototype.match')}} | {{Spec2('ESDraft')}} |                                                       |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.String.match")}}
+
+## Notes spécifiques à Firefox/Gecko
+
+- `flags` était un second argument non standard présent uniquement sur Gecko : _str_.match(_regexp, flags_) et a été retiré avec Firefox 49.
+- À partir de Firefox 27, cette méthode a été ajustée afin d'être conforme à ECMAScript. Lorsque `match()` est appelée sur une expression rationnelle globale, la propriété {{jsxref("RegExp.lastIndex")}} de l'objet sera redéfini à `0` ({{bug(501739)}}).
+
+## Voir aussi
+
+- {{jsxref("RegExp")}}
+- {{jsxref("RegExp.prototype.exec()")}}
+- {{jsxref("RegExp.prototype.test()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/string/matchall/index.html b/files/fr/web/javascript/reference/global_objects/string/matchall/index.html
deleted file mode 100644
index 5b9e8b50c9..0000000000
--- a/files/fr/web/javascript/reference/global_objects/string/matchall/index.html
+++ /dev/null
@@ -1,119 +0,0 @@
----
-title: String.prototype.matchAll()
-slug: Web/JavaScript/Reference/Global_Objects/String/matchAll
-tags:
-  - JavaScript
-  - Méthode
-  - Prototype
-  - Reference
-  - String
-translation_of: Web/JavaScript/Reference/Global_Objects/String/matchAll
-original_slug: Web/JavaScript/Reference/Objets_globaux/String/matchAll
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <strong><code>matchAll()</code></strong> renvoie un itérateur contenant l'ensemble des correspondances entre une chaîne de caractères d'une part et une expression rationnelle d'autre part (y compris les groupes capturants).</p>
-
-<div>{{EmbedInteractiveExample("pages/js/string-matchall.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>str</var>.matchAll(<var>regexp</var>)</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>regexp</code></dt>
- <dd>Un objet représentant une expression rationnelle. Si cet objet n'est pas une instance de {{jsxref("RegExp")}}, il est automatiquement et implicitement converti en une telle instance à l'aide de <code>new RegExp(obj)</code>.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Un <a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Guide/iterateurs_et_generateurs">itérateur</a>.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Regexp.exec()_et_matchAll()"><code>Regexp.exec()</code> et <code>matchAll()</code></h3>
-
-<p>Avant l'apparition de <code>matchAll()</code> en JavaScript, il était possible d'utiliser {{jsxref("RegExp.exec")}} (et des expressions rationnelles utilisant le marqueur <code>/g</code>) dans une boucle afin d'obtenir l'ensemble des correspondances :</p>
-
-<pre class="brush: js">const regexp = RegExp('foo*','g');
-const str = 'table football, foosball';
-
-while ((matches = regexp.exec(str)) !== null) {
-  console.log(`${matches[0]} trouvé. Prochaine recherche à partir de ${regexp.lastIndex}.`);
-  // dans la console : "foo trouvé. Prochaine recherche à partir de 9."
-  // dans la console : "foo trouvé. Prochaine recherche à partir de 19."
-}
-</pre>
-
-<p>Avec <code>matchAll()</code>, on peut éviter la boucle <code>while</code> et le marqueur global. On récupère l'itérateur et on utilise une boucle <code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/for...of">for...of</a></code>, <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Syntaxe_décomposition">la décomposition de tableau</a> ou encore {{jsxref("Array.from()")}} :</p>
-
-<pre class="brush: js">const regexp = RegExp('foo*','g');
-const str = 'table football, foosball';
-let matches = str.matchAll(regexp);
-
-for (const match of matches) {
-  console.log(match);
-}
-// Array [ "foo" ]
-// Array [ "foo" ]
-
-// l'itérateur est épuise après l'itération via for..of
-// On rappelle matchAll afin de créer un nouvel itérateur
-matches = str.matchAll(regexp);
-
-Array.from(matches, m =&gt; m[0]);
-// Array [ "foo", "foo" ]
-</pre>
-
-<h3 id="Meilleur_accès_aux_groupes_capturants">Meilleur accès aux groupes capturants</h3>
-
-<p>Un autre avantage de <code>matchAll()</code> est un meilleur accès aux groupes capturants. De fait, les groupes capturants sont ignorés par <code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/match">match()</a></code> lorsqu'on utilise le marqueur global <code>/g</code> :</p>
-
-<pre class="brush: js">var regexp = /t(e)(st(\d?))/g;
-var str = 'test1test2';
-
-str.match(regexp);
-// Array ['test1', 'test2']</pre>
-
-<p>Avec <code>matchAll()</code>, on peut y accéder :</p>
-
-<pre class="brush: js">let array = [...str.matchAll(regexp)];
-
-array[0];
-// ['test1', 'e', 'st1', '1', index: 0, input: 'test1test2', length: 4]
-array[1];
-// ['test2', 'e', 'st2', '2', index: 5, input: 'test1test2', length: 4]
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-string.prototype.matchall', 'String.prototype.matchAll')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.String.matchAll")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("RegExp")}}</li>
- <li>{{jsxref("RegExp.prototype.exec()")}}</li>
- <li>{{jsxref("RegExp.prototype.test()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/string/matchall/index.md b/files/fr/web/javascript/reference/global_objects/string/matchall/index.md
new file mode 100644
index 0000000000..440e124d00
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/string/matchall/index.md
@@ -0,0 +1,107 @@
+---
+title: String.prototype.matchAll()
+slug: Web/JavaScript/Reference/Global_Objects/String/matchAll
+tags:
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - String
+translation_of: Web/JavaScript/Reference/Global_Objects/String/matchAll
+original_slug: Web/JavaScript/Reference/Objets_globaux/String/matchAll
+---
+{{JSRef}}
+
+La méthode **`matchAll()`** renvoie un itérateur contenant l'ensemble des correspondances entre une chaîne de caractères d'une part et une expression rationnelle d'autre part (y compris les groupes capturants).
+
+{{EmbedInteractiveExample("pages/js/string-matchall.html")}}
+
+## Syntaxe
+
+    str.matchAll(regexp)
+
+### Paramètres
+
+- `regexp`
+  - : Un objet représentant une expression rationnelle. Si cet objet n'est pas une instance de {{jsxref("RegExp")}}, il est automatiquement et implicitement converti en une telle instance à l'aide de `new RegExp(obj)`.
+
+### Valeur de retour
+
+Un [itérateur](https://developer.mozilla.org/fr/docs/Web/JavaScript/Guide/iterateurs_et_generateurs).
+
+## Exemples
+
+### `Regexp.exec()` et `matchAll()`
+
+Avant l'apparition de `matchAll()` en JavaScript, il était possible d'utiliser {{jsxref("RegExp.exec")}} (et des expressions rationnelles utilisant le marqueur `/g`) dans une boucle afin d'obtenir l'ensemble des correspondances :
+
+```js
+const regexp = RegExp('foo*','g');
+const str = 'table football, foosball';
+
+while ((matches = regexp.exec(str)) !== null) {
+  console.log(`${matches[0]} trouvé. Prochaine recherche à partir de ${regexp.lastIndex}.`);
+  // dans la console : "foo trouvé. Prochaine recherche à partir de 9."
+  // dans la console : "foo trouvé. Prochaine recherche à partir de 19."
+}
+```
+
+Avec `matchAll()`, on peut éviter la boucle `while` et le marqueur global. On récupère l'itérateur et on utilise une boucle [`for...of`](/fr/docs/Web/JavaScript/Reference/Instructions/for...of), [la décomposition de tableau](/fr/docs/Web/JavaScript/Reference/Opérateurs/Syntaxe_décomposition) ou encore {{jsxref("Array.from()")}} :
+
+```js
+const regexp = RegExp('foo*','g');
+const str = 'table football, foosball';
+let matches = str.matchAll(regexp);
+
+for (const match of matches) {
+  console.log(match);
+}
+// Array [ "foo" ]
+// Array [ "foo" ]
+
+// l'itérateur est épuise après l'itération via for..of
+// On rappelle matchAll afin de créer un nouvel itérateur
+matches = str.matchAll(regexp);
+
+Array.from(matches, m => m[0]);
+// Array [ "foo", "foo" ]
+```
+
+### Meilleur accès aux groupes capturants
+
+Un autre avantage de `matchAll()` est un meilleur accès aux groupes capturants. De fait, les groupes capturants sont ignorés par [`match()`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/match) lorsqu'on utilise le marqueur global `/g` :
+
+```js
+var regexp = /t(e)(st(\d?))/g;
+var str = 'test1test2';
+
+str.match(regexp);
+// Array ['test1', 'test2']
+```
+
+Avec `matchAll()`, on peut y accéder :
+
+```js
+let array = [...str.matchAll(regexp)];
+
+array[0];
+// ['test1', 'e', 'st1', '1', index: 0, input: 'test1test2', length: 4]
+array[1];
+// ['test2', 'e', 'st2', '2', index: 5, input: 'test1test2', length: 4]
+```
+
+## Spécifications
+
+| Spécification                                                                                                        | État                         | Commentaires |
+| -------------------------------------------------------------------------------------------------------------------- | ---------------------------- | ------------ |
+| {{SpecName('ESDraft', '#sec-string.prototype.matchall', 'String.prototype.matchAll')}} | {{Spec2('ESDraft')}} |              |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.String.matchAll")}}
+
+## Voir aussi
+
+- {{jsxref("RegExp")}}
+- {{jsxref("RegExp.prototype.exec()")}}
+- {{jsxref("RegExp.prototype.test()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/string/normalize/index.html b/files/fr/web/javascript/reference/global_objects/string/normalize/index.html
deleted file mode 100644
index b35ff15f8b..0000000000
--- a/files/fr/web/javascript/reference/global_objects/string/normalize/index.html
+++ /dev/null
@@ -1,124 +0,0 @@
----
-title: String.prototype.normalize()
-slug: Web/JavaScript/Reference/Global_Objects/String/normalize
-tags:
-  - ECMAScript 2015
-  - JavaScript
-  - Méthode
-  - Prototype
-  - Reference
-  - String
-  - Unicode
-translation_of: Web/JavaScript/Reference/Global_Objects/String/normalize
-original_slug: Web/JavaScript/Reference/Objets_globaux/String/normalize
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <code><strong>normalize()</strong></code> permet de renvoyer la forme normalisée Unicode d'une chaîne de caractères (si la valeur n'est pas une chaîne de caractères, elle sera convertie).</p>
-
-<div>{{EmbedInteractiveExample("pages/js/string-normalize.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>str</var>.normalize([<var>form</var>]);</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>form</code></dt>
- <dd>Paramètre optionnel. Une chaîne parmi "NFC", "NFD", "NFKC", ou "NFKD", définissant la forme de normalisation Unicode à utiliser. Si le paramètre n'est pas précisé ou vaut {{jsxref("undefined")}}, la valeur par défaut utilisée sera "<code>NFC</code>".
- <ul>
-  <li><code>NFC</code> - Normalization Form Canonical Composition.</li>
-  <li><code>NFD</code> - Normalization Form Canonical Decomposition.</li>
-  <li><code>NFKC</code> - Normalization Form Compatibility Composition.</li>
-  <li><code>NFKD</code> - Normalization Form Compatibility Decomposition.</li>
- </ul>
- </dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Une chaîne de caractères qui est le forme Unicode normalisée de la chaîne appelante.</p>
-
-<h3 id="Exceptions">Exceptions</h3>
-
-<dl>
- <dt>{{jsxref("RangeError")}}</dt>
- <dd>Une exception <code>RangeError</code> est envoyée si le paramètre <code>form</code> n'est pas une des valeurs définies ci-avant.</dd>
-</dl>
-
-<h2 id="Description">Description</h2>
-
-<p>La méthode <code>normalize()</code> renvoie la forme normalisée Unicode de la chaîne de caractères. Elle n'affecte pas la valeur de la chaîne.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<pre class="brush:js;">// Chaîne initiale
-
-// U+1E9B: LATIN SMALL LETTER LONG S WITH DOT ABOVE
-// U+0323: COMBINING DOT BELOW
-var str = "\u1E9B\u0323";
-
-
-// Forme canonique composée (Canonically-composed form) (NFC)
-
-// U+1E9B: LATIN SMALL LETTER LONG S WITH DOT ABOVE
-// U+0323: COMBINING DOT BELOW
-str.normalize("NFC"); // "\u1E9B\u0323"
-str.normalize(); // la même chaîne que précédemment
-
-
-// Forme canonique décomposée (Canonically-decomposed form) (NFD)
-
-// U+017F: LATIN SMALL LETTER LONG S
-// U+0323: COMBINING DOT BELOW
-// U+0307: COMBINING DOT ABOVE
-str.normalize("NFD"); // "\u017F\u0323\u0307"
-
-
-// Forme composée compatible (NFKC)
-
-// U+1E69: LATIN SMALL LETTER S WITH DOT BELOW AND DOT ABOVE
-str.normalize("NFKC"); // "\u1E69"
-
-
-// Forme décomposée compatible (NFKD)
-
-// U+0073: LATIN SMALL LETTER S
-// U+0323: COMBINING DOT BELOW
-// U+0307: COMBINING DOT ABOVE
-str.normalize("NFKD"); // "\u0073\u0323\u0307"
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-string.prototype.normalize', 'String.prototype.normalize')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-string.prototype.normalize', 'String.prototype.normalize')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.String.normalize")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="https://www.unicode.org/reports/tr15/">Formes de normalisation Unicode, Annexe n°15 du standard Unicode</a></li>
- <li><a href="https://en.wikipedia.org/wiki/Unicode_equivalence">Équivalence Unicode</a></li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/string/normalize/index.md b/files/fr/web/javascript/reference/global_objects/string/normalize/index.md
new file mode 100644
index 0000000000..c3c1818ded
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/string/normalize/index.md
@@ -0,0 +1,103 @@
+---
+title: String.prototype.normalize()
+slug: Web/JavaScript/Reference/Global_Objects/String/normalize
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - String
+  - Unicode
+translation_of: Web/JavaScript/Reference/Global_Objects/String/normalize
+original_slug: Web/JavaScript/Reference/Objets_globaux/String/normalize
+---
+{{JSRef}}
+
+La méthode **`normalize()`** permet de renvoyer la forme normalisée Unicode d'une chaîne de caractères (si la valeur n'est pas une chaîne de caractères, elle sera convertie).
+
+{{EmbedInteractiveExample("pages/js/string-normalize.html")}}
+
+## Syntaxe
+
+    str.normalize([form]);
+
+### Paramètres
+
+- `form`
+
+  - : Paramètre optionnel. Une chaîne parmi "NFC", "NFD", "NFKC", ou "NFKD", définissant la forme de normalisation Unicode à utiliser. Si le paramètre n'est pas précisé ou vaut {{jsxref("undefined")}}, la valeur par défaut utilisée sera "`NFC`".
+
+    - `NFC` - Normalization Form Canonical Composition.
+    - `NFD` - Normalization Form Canonical Decomposition.
+    - `NFKC` - Normalization Form Compatibility Composition.
+    - `NFKD` - Normalization Form Compatibility Decomposition.
+
+### Valeur de retour
+
+Une chaîne de caractères qui est le forme Unicode normalisée de la chaîne appelante.
+
+### Exceptions
+
+- {{jsxref("RangeError")}}
+  - : Une exception `RangeError` est envoyée si le paramètre `form` n'est pas une des valeurs définies ci-avant.
+
+## Description
+
+La méthode `normalize()` renvoie la forme normalisée Unicode de la chaîne de caractères. Elle n'affecte pas la valeur de la chaîne.
+
+## Exemples
+
+```js
+// Chaîne initiale
+
+// U+1E9B: LATIN SMALL LETTER LONG S WITH DOT ABOVE
+// U+0323: COMBINING DOT BELOW
+var str = "\u1E9B\u0323";
+
+
+// Forme canonique composée (Canonically-composed form) (NFC)
+
+// U+1E9B: LATIN SMALL LETTER LONG S WITH DOT ABOVE
+// U+0323: COMBINING DOT BELOW
+str.normalize("NFC"); // "\u1E9B\u0323"
+str.normalize(); // la même chaîne que précédemment
+
+
+// Forme canonique décomposée (Canonically-decomposed form) (NFD)
+
+// U+017F: LATIN SMALL LETTER LONG S
+// U+0323: COMBINING DOT BELOW
+// U+0307: COMBINING DOT ABOVE
+str.normalize("NFD"); // "\u017F\u0323\u0307"
+
+
+// Forme composée compatible (NFKC)
+
+// U+1E69: LATIN SMALL LETTER S WITH DOT BELOW AND DOT ABOVE
+str.normalize("NFKC"); // "\u1E69"
+
+
+// Forme décomposée compatible (NFKD)
+
+// U+0073: LATIN SMALL LETTER S
+// U+0323: COMBINING DOT BELOW
+// U+0307: COMBINING DOT ABOVE
+str.normalize("NFKD"); // "\u0073\u0323\u0307"
+```
+
+## Spécifications
+
+| Spécification                                                                                                        | État                         | Commentaires         |
+| -------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName('ES2015', '#sec-string.prototype.normalize', 'String.prototype.normalize')}} | {{Spec2('ES2015')}}     | Définition initiale. |
+| {{SpecName('ESDraft', '#sec-string.prototype.normalize', 'String.prototype.normalize')}} | {{Spec2('ESDraft')}} |                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.String.normalize")}}
+
+## Voir aussi
+
+- [Formes de normalisation Unicode, Annexe n°15 du standard Unicode](https://www.unicode.org/reports/tr15/)
+- [Équivalence Unicode](https://en.wikipedia.org/wiki/Unicode_equivalence)
diff --git a/files/fr/web/javascript/reference/global_objects/string/padend/index.html b/files/fr/web/javascript/reference/global_objects/string/padend/index.html
deleted file mode 100644
index 2039f7be3c..0000000000
--- a/files/fr/web/javascript/reference/global_objects/string/padend/index.html
+++ /dev/null
@@ -1,73 +0,0 @@
----
-title: String.prototype.padEnd()
-slug: Web/JavaScript/Reference/Global_Objects/String/padEnd
-tags:
-  - JavaScript
-  - Méthode
-  - Reference
-  - String
-translation_of: Web/JavaScript/Reference/Global_Objects/String/padEnd
-original_slug: Web/JavaScript/Reference/Objets_globaux/String/padEnd
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <strong><code>padEnd()</code></strong> permet de compléter la chaîne courante avec une chaîne de caractères donnée afin d'obtenir une chaîne de longueur fixée. Pour atteindre cette longueur, la chaîne complémentaire peut être répétée. La chaîne courante est complétée depuis la fin.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/string-padend.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>str</var>.padEnd(<var>longueurCible</var> [, <var>chaîneComplémentaire</var>])</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>longueurCible</code></dt>
- <dd>La longueur de la chaîne qu'on souhaite obtenir. Si la longueur indiquée est inférieure à celle de la chaîne courante, cette dernière est renvoyée telle quelle.</dd>
- <dt><code>chaîneComplémentaire</code> {{optional_inline}}</dt>
- <dd>La chaîne de caractères avec laquelle on veut compléter la chaîne courante. Si cette chaîne est trop longue, on prendra uniquement le début (la partie la plus à gauche pour les langues écrites de gauche à droite et la partie la plus à droite pour les langues écrites de droite à gauche). La valeur par défaut de ce paramètre est l'espace " " (U+0020). Si cette chaîne est trop courte, elle sera répétée.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Une chaîne de caractères ({{jsxref("String")}}) dont la longueur est celle indiquée, complétée avec la chaîne fournie.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<pre class="brush: js">'abc'.padEnd(10);         // "abc       "
-'abc'.padEnd(10, "toto"); // "abctototot"
-'abc'.padEnd(6,"123456"); // "abc123"
-'abc'.padEnd(1);          // "abc"
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-string.prototype.padend', 'String.prototype.padEnd')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES8', '#sec-string.prototype.padend', 'String.prototype.padEnd')}}</td>
-   <td>{{Spec2('ES8')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.String.padEnd")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("String.prototype.padStart()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/string/padend/index.md b/files/fr/web/javascript/reference/global_objects/string/padend/index.md
new file mode 100644
index 0000000000..07462ad3f9
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/string/padend/index.md
@@ -0,0 +1,55 @@
+---
+title: String.prototype.padEnd()
+slug: Web/JavaScript/Reference/Global_Objects/String/padEnd
+tags:
+  - JavaScript
+  - Méthode
+  - Reference
+  - String
+translation_of: Web/JavaScript/Reference/Global_Objects/String/padEnd
+original_slug: Web/JavaScript/Reference/Objets_globaux/String/padEnd
+---
+{{JSRef}}
+
+La méthode **`padEnd()`** permet de compléter la chaîne courante avec une chaîne de caractères donnée afin d'obtenir une chaîne de longueur fixée. Pour atteindre cette longueur, la chaîne complémentaire peut être répétée. La chaîne courante est complétée depuis la fin.
+
+{{EmbedInteractiveExample("pages/js/string-padend.html")}}
+
+## Syntaxe
+
+    str.padEnd(longueurCible [, chaîneComplémentaire])
+
+### Paramètres
+
+- `longueurCible`
+  - : La longueur de la chaîne qu'on souhaite obtenir. Si la longueur indiquée est inférieure à celle de la chaîne courante, cette dernière est renvoyée telle quelle.
+- `chaîneComplémentaire` {{optional_inline}}
+  - : La chaîne de caractères avec laquelle on veut compléter la chaîne courante. Si cette chaîne est trop longue, on prendra uniquement le début (la partie la plus à gauche pour les langues écrites de gauche à droite et la partie la plus à droite pour les langues écrites de droite à gauche). La valeur par défaut de ce paramètre est l'espace " " (U+0020). Si cette chaîne est trop courte, elle sera répétée.
+
+### Valeur de retour
+
+Une chaîne de caractères ({{jsxref("String")}}) dont la longueur est celle indiquée, complétée avec la chaîne fournie.
+
+## Exemples
+
+```js
+'abc'.padEnd(10);         // "abc       "
+'abc'.padEnd(10, "toto"); // "abctototot"
+'abc'.padEnd(6,"123456"); // "abc123"
+'abc'.padEnd(1);          // "abc"
+```
+
+## Spécifications
+
+| Spécification                                                                                                | État                         | Commentaires         |
+| ------------------------------------------------------------------------------------------------------------ | ---------------------------- | -------------------- |
+| {{SpecName('ESDraft', '#sec-string.prototype.padend', 'String.prototype.padEnd')}} | {{Spec2('ESDraft')}} |                      |
+| {{SpecName('ES8', '#sec-string.prototype.padend', 'String.prototype.padEnd')}}     | {{Spec2('ES8')}}         | Définition initiale. |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.String.padEnd")}}
+
+## Voir aussi
+
+- {{jsxref("String.prototype.padStart()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/string/padstart/index.html b/files/fr/web/javascript/reference/global_objects/string/padstart/index.html
deleted file mode 100644
index 85ecc07e2d..0000000000
--- a/files/fr/web/javascript/reference/global_objects/string/padstart/index.html
+++ /dev/null
@@ -1,75 +0,0 @@
----
-title: String.prototype.padStart()
-slug: Web/JavaScript/Reference/Global_Objects/String/padStart
-tags:
-  - JavaScript
-  - Méthode
-  - Reference
-  - String
-translation_of: Web/JavaScript/Reference/Global_Objects/String/padStart
-original_slug: Web/JavaScript/Reference/Objets_globaux/String/padStart
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <strong><code>padStart()</code></strong> permet de compléter la chaîne courante avec une chaîne de caractères donnée afin d'obtenir une chaîne de longueur fixée. Pour atteindre cette longueur, la chaîne complémentaire peut être répétée. La chaîne courante est complétée depuis le début.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/string-padstart.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>str</var>.padStart(<var>longueurCible</var> [, <var>chaîneComplémentaire</var>])</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>longueurCible</code></dt>
- <dd>La longueur de la chaîne qu'on souhaite obtenir. Si la longueur indiquée est inférieure à celle de la chaîne courante, cette dernière est renvoyée telle quelle.</dd>
- <dt><code>chaîneComplémentaire</code> {{optional_inline}}</dt>
- <dd>La chaîne de caractères avec laquelle on veut compléter la chaîne courante. Si cette chaîne est trop longue, on prendra uniquement le début (la partie la plus à gauche quand la langue s'écrit de gauche à droite). La valeur par défaut de ce paramètre est l'espace " " (U+0020). Si cette chaîne est trop courte, elle sera répétée.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Une chaîne de caractères ({{jsxref("String")}}) dont la longueur est celle indiquée, complétée avec la chaîne fournie au début de la chaîne courante.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<pre class="brush: js">'abc'.padStart(10);         // "        abc"
-'abc'.padStart(10, "toto"); // "totototabc"
-'abc'.padStart(6,"123465"); // "123abc"
-'abc'.padStart(8, "0");     // "00000abc"
-'abc'.padStart(1);          // "abc"</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-string.prototype.padstart', 'String.prototype.padStart')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES8', '#sec-string.prototype.padstart', 'String.prototype.padStart')}}</td>
-   <td>{{Spec2('ES8')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.String.padStart")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("String.prototype.padEnd()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/string/padstart/index.md b/files/fr/web/javascript/reference/global_objects/string/padstart/index.md
new file mode 100644
index 0000000000..1957a024e6
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/string/padstart/index.md
@@ -0,0 +1,56 @@
+---
+title: String.prototype.padStart()
+slug: Web/JavaScript/Reference/Global_Objects/String/padStart
+tags:
+  - JavaScript
+  - Méthode
+  - Reference
+  - String
+translation_of: Web/JavaScript/Reference/Global_Objects/String/padStart
+original_slug: Web/JavaScript/Reference/Objets_globaux/String/padStart
+---
+{{JSRef}}
+
+La méthode **`padStart()`** permet de compléter la chaîne courante avec une chaîne de caractères donnée afin d'obtenir une chaîne de longueur fixée. Pour atteindre cette longueur, la chaîne complémentaire peut être répétée. La chaîne courante est complétée depuis le début.
+
+{{EmbedInteractiveExample("pages/js/string-padstart.html")}}
+
+## Syntaxe
+
+    str.padStart(longueurCible [, chaîneComplémentaire])
+
+### Paramètres
+
+- `longueurCible`
+  - : La longueur de la chaîne qu'on souhaite obtenir. Si la longueur indiquée est inférieure à celle de la chaîne courante, cette dernière est renvoyée telle quelle.
+- `chaîneComplémentaire` {{optional_inline}}
+  - : La chaîne de caractères avec laquelle on veut compléter la chaîne courante. Si cette chaîne est trop longue, on prendra uniquement le début (la partie la plus à gauche quand la langue s'écrit de gauche à droite). La valeur par défaut de ce paramètre est l'espace " " (U+0020). Si cette chaîne est trop courte, elle sera répétée.
+
+### Valeur de retour
+
+Une chaîne de caractères ({{jsxref("String")}}) dont la longueur est celle indiquée, complétée avec la chaîne fournie au début de la chaîne courante.
+
+## Exemples
+
+```js
+'abc'.padStart(10);         // "        abc"
+'abc'.padStart(10, "toto"); // "totototabc"
+'abc'.padStart(6,"123465"); // "123abc"
+'abc'.padStart(8, "0");     // "00000abc"
+'abc'.padStart(1);          // "abc"
+```
+
+## Spécifications
+
+| Spécification                                                                                                        | État                         | Commentaires         |
+| -------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName('ESDraft', '#sec-string.prototype.padstart', 'String.prototype.padStart')}} | {{Spec2('ESDraft')}} |                      |
+| {{SpecName('ES8', '#sec-string.prototype.padstart', 'String.prototype.padStart')}}         | {{Spec2('ES8')}}         | Définition initiale. |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.String.padStart")}}
+
+## Voir aussi
+
+- {{jsxref("String.prototype.padEnd()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/string/raw/index.html b/files/fr/web/javascript/reference/global_objects/string/raw/index.html
deleted file mode 100644
index 9a9724ffc9..0000000000
--- a/files/fr/web/javascript/reference/global_objects/string/raw/index.html
+++ /dev/null
@@ -1,113 +0,0 @@
----
-title: String.raw()
-slug: Web/JavaScript/Reference/Global_Objects/String/raw
-tags:
-  - ECMAScript 2015
-  - JavaScript
-  - Méthode
-  - Reference
-  - String
-translation_of: Web/JavaScript/Reference/Global_Objects/String/raw
-original_slug: Web/JavaScript/Reference/Objets_globaux/String/raw
----
-<div>{{JSRef}}</div>
-
-<p>La méthode statique <code><strong>String.raw()</strong></code> est une fonction d'étiquetage (<em>tag function</em>) pour les <a href="/fr/docs/Web/JavaScript/Reference/Littéraux_gabarits#Les_gabarits_étiquetés">gabarits de chaînes de caractères</a> (elle est <a href="https://bugs.chromium.org/p/v8/issues/detail?id=5016">semblable</a> au préfixe <code>r</code> en Python ou au préfixe <code>@</code> en C#). Cette fonction permet d'obtenir la chaîne brute pour un gabarit (les caractères spéciaux ne sont pas pris en compte mais retranscrits tels quels, les séquences d'échappement ne sont pas interprétées et les emplacements (ex. <code>${toto}</code>) sont traités).</p>
-
-<div>{{EmbedInteractiveExample("pages/js/string-raw.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox notranslate">String.raw(callSite, <em>...substitutions</em>)
-
-String.raw`gabaritChaîne`
-</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>callSite</code></dt>
- <dd>Un site d'appel bien formé pour un gabarit (<em>call site object</em>) tel que <code>{raw: "string"}</code>.</dd>
- <dt>...substitutions</dt>
- <dd>Paramètre contenant les valeurs à substituer.</dd>
- <dt>gabaritChaîne</dt>
- <dd><a href="/fr/docs/Web/JavaScript/Reference/Gabarit_chaînes_caractères">Un gabarit de chaîne de caractères</a>, éventuellement avec des substitutions (<code>${...}</code>).</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>La chaîne de caractères brute correspondant à un gabarit donné.</p>
-
-<h3 id="Exceptions">Exceptions</h3>
-
-<dl>
- <dt>{{jsxref("TypeError")}}</dt>
- <dd>Une exception <code>TypeError</code> est renvoyée si le premier argument n'est pas un objet bien formé.</dd>
-</dl>
-
-<h2 id="Description">Description</h2>
-
-<p>Dans la plupart des cas, <code>String.raw()</code> est utilisé avec des gabarits de chaînes de caractères. La première syntaxe, présentée ci-avant est rarement utilisée. En effet, le moteur JavaScript appellera cette forme avec les arguments appropriés, comme pour les <a href="/fr/docs/Web/JavaScript/Reference/Gabarit_chaînes_caractères#Les_gabarits_de_cha.C3.AEnes_.C3.A9tiquett.C3.A9s">fonctions d'étiquetage (<em>tag</em>)</a>.</p>
-
-<p>La méthode <code>String.raw()</code> est la seule méthode d'étiquetage native pour les chaînes de caractères. Elle fonctionne comme la fonction par défaut pour les gabarits et permet d'effectuer des concaténations. Il est également possible d'implémenter cette méthode avec du code JavaScript.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<pre class="brush: js notranslate">String.raw`Hi\n${2+3}!`;
-// "Hi\n5!", le caractère après "Hi" n'est pas
-// le caractère de nouvelle ligne
-// "\" et "n" sont bien deux caractères distincts
-// ici.
-
-String.raw`Hi\u000A!`;
-// "Hi\u000A!", de même ici. Les caractères
-//  \, u, 0, 0, 0, A et 6 sont distincts.
-// Tous les caractères d'échappement seront
-// inefficaces. Des backslashes peuvent donc être
-// présents dans la chaîne produite. Cela peut
-// être vérifié avec la propriété .length de la
-// chaîne.
-
-let nom = "Bob";
-String.raw`Hi\n${nom}!`;
-// "Hi\nBob!", les remplacements sont effectués.
-
-// Généralement, on n'appelle pas String.raw
-// comme une fonction, mais c'est possible :
-String.raw({raw: "test"}, 0, 1, 2);
-// "t0e1s2t"
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-string.raw', 'String.raw')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-string.raw', 'String.raw')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.String.raw")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/JavaScript/Reference/Gabarit_chaînes_caractères">Gabarits de chaînes de caractères</a></li>
- <li>{{jsxref("String")}}</li>
- <li><a href="/fr/docs/Web/JavaScript/Reference/Grammaire_lexicale">Grammaire lexicale JavaScript</a></li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/string/raw/index.md b/files/fr/web/javascript/reference/global_objects/string/raw/index.md
new file mode 100644
index 0000000000..17e88c7b4a
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/string/raw/index.md
@@ -0,0 +1,92 @@
+---
+title: String.raw()
+slug: Web/JavaScript/Reference/Global_Objects/String/raw
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Méthode
+  - Reference
+  - String
+translation_of: Web/JavaScript/Reference/Global_Objects/String/raw
+original_slug: Web/JavaScript/Reference/Objets_globaux/String/raw
+---
+{{JSRef}}
+
+La méthode statique **`String.raw()`** est une fonction d'étiquetage (_tag function_) pour les [gabarits de chaînes de caractères](/fr/docs/Web/JavaScript/Reference/Littéraux_gabarits#Les_gabarits_étiquetés) (elle est [semblable](https://bugs.chromium.org/p/v8/issues/detail?id=5016) au préfixe `r` en Python ou au préfixe `@` en C#). Cette fonction permet d'obtenir la chaîne brute pour un gabarit (les caractères spéciaux ne sont pas pris en compte mais retranscrits tels quels, les séquences d'échappement ne sont pas interprétées et les emplacements (ex. `${toto}`) sont traités).
+
+{{EmbedInteractiveExample("pages/js/string-raw.html")}}
+
+## Syntaxe
+
+    String.raw(callSite, ...substitutions)
+
+    String.raw`gabaritChaîne`
+
+### Paramètres
+
+- `callSite`
+  - : Un site d'appel bien formé pour un gabarit (_call site object_) tel que `{raw: "string"}`.
+- ...substitutions
+  - : Paramètre contenant les valeurs à substituer.
+- gabaritChaîne
+  - : [Un gabarit de chaîne de caractères](/fr/docs/Web/JavaScript/Reference/Gabarit_chaînes_caractères), éventuellement avec des substitutions (`${...}`).
+
+### Valeur de retour
+
+La chaîne de caractères brute correspondant à un gabarit donné.
+
+### Exceptions
+
+- {{jsxref("TypeError")}}
+  - : Une exception `TypeError` est renvoyée si le premier argument n'est pas un objet bien formé.
+
+## Description
+
+Dans la plupart des cas, `String.raw()` est utilisé avec des gabarits de chaînes de caractères. La première syntaxe, présentée ci-avant est rarement utilisée. En effet, le moteur JavaScript appellera cette forme avec les arguments appropriés, comme pour les [fonctions d'étiquetage (_tag_)](/fr/docs/Web/JavaScript/Reference/Gabarit_chaînes_caractères#Les_gabarits_de_cha.C3.AEnes_.C3.A9tiquett.C3.A9s).
+
+La méthode `String.raw()` est la seule méthode d'étiquetage native pour les chaînes de caractères. Elle fonctionne comme la fonction par défaut pour les gabarits et permet d'effectuer des concaténations. Il est également possible d'implémenter cette méthode avec du code JavaScript.
+
+## Exemples
+
+```js
+String.raw`Hi\n${2+3}!`;
+// "Hi\n5!", le caractère après "Hi" n'est pas
+// le caractère de nouvelle ligne
+// "\" et "n" sont bien deux caractères distincts
+// ici.
+
+String.raw`Hi\u000A!`;
+// "Hi\u000A!", de même ici. Les caractères
+//  \, u, 0, 0, 0, A et 6 sont distincts.
+// Tous les caractères d'échappement seront
+// inefficaces. Des backslashes peuvent donc être
+// présents dans la chaîne produite. Cela peut
+// être vérifié avec la propriété .length de la
+// chaîne.
+
+let nom = "Bob";
+String.raw`Hi\n${nom}!`;
+// "Hi\nBob!", les remplacements sont effectués.
+
+// Généralement, on n'appelle pas String.raw
+// comme une fonction, mais c'est possible :
+String.raw({raw: "test"}, 0, 1, 2);
+// "t0e1s2t"
+```
+
+## Spécifications
+
+| Spécification                                                                | État                         | Commentaires         |
+| ---------------------------------------------------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName('ES2015', '#sec-string.raw', 'String.raw')}}     | {{Spec2('ES2015')}}     | Définition initiale. |
+| {{SpecName('ESDraft', '#sec-string.raw', 'String.raw')}} | {{Spec2('ESDraft')}} |                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.String.raw")}}
+
+## Voir aussi
+
+- [Gabarits de chaînes de caractères](/fr/docs/Web/JavaScript/Reference/Gabarit_chaînes_caractères)
+- {{jsxref("String")}}
+- [Grammaire lexicale JavaScript](/fr/docs/Web/JavaScript/Reference/Grammaire_lexicale)
diff --git a/files/fr/web/javascript/reference/global_objects/string/repeat/index.html b/files/fr/web/javascript/reference/global_objects/string/repeat/index.html
deleted file mode 100644
index 77600fdf96..0000000000
--- a/files/fr/web/javascript/reference/global_objects/string/repeat/index.html
+++ /dev/null
@@ -1,84 +0,0 @@
----
-title: String.prototype.repeat()
-slug: Web/JavaScript/Reference/Global_Objects/String/repeat
-tags:
-  - ECMAScript 2015
-  - JavaScript
-  - Méthode
-  - Prototype
-  - Reference
-  - String
-  - polyfill
-translation_of: Web/JavaScript/Reference/Global_Objects/String/repeat
-original_slug: Web/JavaScript/Reference/Objets_globaux/String/repeat
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <code><strong>repeat()</strong></code> construit et renvoie une nouvelle chaine de caractères qui contient le nombre de copie demandée de la chaine de caractères sur laquelle la méthode a été appelée, concaténées les unes aux autres.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/string-repeat.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>str</var>.repeat(<var>compte</var>)</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>compte</code></dt>
- <dd>Un nombre entier entre 0 and +∞ : [ 0, +∞[, indiquant le nombre de fois que la chaine de caractères doit être repétée dans la nouvelle chaine de caractères.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Une nouvelle chaîne de caractères composée du nombre indiqué de copies de la chaîne appelante.</p>
-
-<h3 id="Exceptions">Exceptions</h3>
-
-<ul>
- <li>{{jsxref("Erreurs/Negative_repetition_count", "RangeError")}} : le nombre de répétition doit être positif.</li>
- <li>{{jsxref("Erreurs/Resulting_string_too_large", "RangeError")}} : le nombre de répétition ne doit pas être infini et la taille de la chaîne résultante ne doit pas dépasser la taille maximale pour une chaîne de caractères.</li>
-</ul>
-
-<dl>
- <dt>{{jsxref("RangeError")}}</dt>
- <dd>La compteur doit être positif et inférieur à l'infini.</dd>
-</dl>
-
-<h2 id="Exemples">Exemples</h2>
-
-<pre class="brush:js">"abc".repeat(-1)     // RangeError
-"abc".repeat(0)      // ""
-"abc".repeat(1)      // "abc"
-"abc".repeat(2)      // "abcabc"
-"abc".repeat(3.5)    // "abcabcabc" (le compteur est converti en un nombre entier)
-"abc".repeat(1/0)    // RangeError
-
-({toString : () =&gt; "abc", repeat : String.prototype.repeat}).repeat(2)
-// "abcabc" (repeat() est une méthode générique)</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-string.prototype.repeat', 'String.prototype.repeat')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td>Première définition.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-string.prototype.repeat', 'String.prototype.repeat')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.String.repeat")}}</p>
diff --git a/files/fr/web/javascript/reference/global_objects/string/repeat/index.md b/files/fr/web/javascript/reference/global_objects/string/repeat/index.md
new file mode 100644
index 0000000000..94d7c0e7eb
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/string/repeat/index.md
@@ -0,0 +1,67 @@
+---
+title: String.prototype.repeat()
+slug: Web/JavaScript/Reference/Global_Objects/String/repeat
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - String
+  - polyfill
+translation_of: Web/JavaScript/Reference/Global_Objects/String/repeat
+original_slug: Web/JavaScript/Reference/Objets_globaux/String/repeat
+---
+{{JSRef}}
+
+La méthode **`repeat()`** construit et renvoie une nouvelle chaine de caractères qui contient le nombre de copie demandée de la chaine de caractères sur laquelle la méthode a été appelée, concaténées les unes aux autres.
+
+{{EmbedInteractiveExample("pages/js/string-repeat.html")}}
+
+## Syntaxe
+
+    str.repeat(compte)
+
+### Paramètres
+
+- `compte`
+  - : Un nombre entier entre 0 and +∞ : \[ 0, +∞\[, indiquant le nombre de fois que la chaine de caractères doit être repétée dans la nouvelle chaine de caractères.
+
+### Valeur de retour
+
+Une nouvelle chaîne de caractères composée du nombre indiqué de copies de la chaîne appelante.
+
+### Exceptions
+
+- {{jsxref("Erreurs/Negative_repetition_count", "RangeError")}} : le nombre de répétition doit être positif.
+- {{jsxref("Erreurs/Resulting_string_too_large", "RangeError")}} : le nombre de répétition ne doit pas être infini et la taille de la chaîne résultante ne doit pas dépasser la taille maximale pour une chaîne de caractères.
+
+<!---->
+
+- {{jsxref("RangeError")}}
+  - : La compteur doit être positif et inférieur à l'infini.
+
+## Exemples
+
+```js
+"abc".repeat(-1)     // RangeError
+"abc".repeat(0)      // ""
+"abc".repeat(1)      // "abc"
+"abc".repeat(2)      // "abcabc"
+"abc".repeat(3.5)    // "abcabcabc" (le compteur est converti en un nombre entier)
+"abc".repeat(1/0)    // RangeError
+
+({toString : () => "abc", repeat : String.prototype.repeat}).repeat(2)
+// "abcabc" (repeat() est une méthode générique)
+```
+
+## Spécifications
+
+| Spécification                                                                                                | État                         | Commentaire          |
+| ------------------------------------------------------------------------------------------------------------ | ---------------------------- | -------------------- |
+| {{SpecName('ES2015', '#sec-string.prototype.repeat', 'String.prototype.repeat')}} | {{Spec2('ES2015')}}     | Première définition. |
+| {{SpecName('ESDraft', '#sec-string.prototype.repeat', 'String.prototype.repeat')}} | {{Spec2('ESDraft')}} |                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.String.repeat")}}
diff --git a/files/fr/web/javascript/reference/global_objects/string/replace/index.html b/files/fr/web/javascript/reference/global_objects/string/replace/index.html
deleted file mode 100644
index 69816aace6..0000000000
--- a/files/fr/web/javascript/reference/global_objects/string/replace/index.html
+++ /dev/null
@@ -1,306 +0,0 @@
----
-title: String.prototype.replace()
-slug: Web/JavaScript/Reference/Global_Objects/String/replace
-tags:
-  - Chaîne
-  - Expression
-  - JavaScript
-  - Méthode
-  - Prototype
-  - Reference
-  - Régulière
-translation_of: Web/JavaScript/Reference/Global_Objects/String/replace
-original_slug: Web/JavaScript/Reference/Objets_globaux/String/replace
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <code><strong>replace()</strong></code> renvoie une nouvelle chaîne de caractères dans laquelle tout ou partie des correspondances à un <code>modèle</code> sont remplacées par un <code>remplacement</code>. Le <code>modèle</code> utilisé peut être une {{jsxref("RegExp")}} et le remplacement peut être une chaîne ou une fonction à appeler pour chaque correspondance. Si <code>modèle</code> est une chaîne de caractères, seule la première correspondance sera remplacée.</p>
-
-<p>La chaîne de caractère originale reste inchangée.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/string-replace.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>chn</var>.replace(<var>regexp</var>|<var>souschn</var>, nouv<var>Souschn</var>|<var>fonction</var>)</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>regexp</code> (modèle)</dt>
- <dd>Un objet ou un littéral {{jsxref("RegExp")}}. La ou les correspondances sont remplacées  par <code>nouvSouschn</code> ou par la valeur retournée par la <code>fonction</code> indiquée.</dd>
- <dt><code>souschn</code> (modèle)</dt>
- <dd>Une {{jsxref("String")}} qui est à remplacer par <code>nouvSouschn</code>. Elle est traitée comme une chaîne de caractères verbatim et elle n'est <em>pas</em> interprétée comme une expression régulière. Seule la première occurrence sera remplacée.</dd>
- <dt><code>nouvSouschn</code> (remplacement)</dt>
- <dd>La {{jsxref("String")}} qui remplace la chaîne de caractères indiquée par le paramètre <code>regexp</code> ou <code>souschn</code>. Un certain nombre de modèles de remplacement spéciaux sont supportés ; voir la section "<a href="#Indiquer_une_chaîne_de_caractère_comme_paramètre">Indiquer une chaîne de caractères comme paramètre</a>" ci-dessous.</dd>
- <dt><code>fonction</code> (remplacement)</dt>
- <dd>Une fonction à appeler pour créer la nouvelle sous-chaîne de caractères à utiliser pour remplacer la <code>regexp</code> ou la <code>souschn</code> donnée. Les arguments passés à cette fonction sont décrits dans la section "<a href="#Indiquer_une_fonction_comme_paramètre">Indiquer une fonction comme paramètre</a>" ci-dessous.</dd>
-</dl>
-
-<h3 id="Valeur_retournée">Valeur retournée</h3>
-
-<p>Une nouvelle chaîne de caractères avec tout ou partie des correspondances du modèle remplacées par un remplacement.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>Cette méthode ne change pas l'objet {{jsxref("String")}} auquel elle est appliquée. Elle retourne simplement une nouvelle chaîne de caractères.</p>
-
-<p>Pour réaliser une recherche et remplacement global(e), incluez le commutateur <code>g</code> dans l'expression régulière.</p>
-
-<h3 id="Indiquer_une_chaîne_de_caractère_comme_paramètre">Indiquer une chaîne de caractère comme paramètre</h3>
-
-<p>La chaîne de caractère de remplacement peut inclure les modèles de remplacement spéciaux suivants :</p>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <td class="header">Modèle</td>
-   <td class="header">Insère</td>
-  </tr>
-  <tr>
-   <td><code>$$</code></td>
-   <td>Insère un "$".</td>
-  </tr>
-  <tr>
-   <td><code>$&amp;</code></td>
-   <td>Insère la chaine de caractère en correspondance.</td>
-  </tr>
-  <tr>
-   <td><code>$`</code></td>
-   <td>Insère la partie de la chaîne de caractère qui précède la sous-chaîne en correspondance.</td>
-  </tr>
-  <tr>
-   <td><code>$'</code></td>
-   <td>Insère la partie de la chaîne de caractère qui suit la sous-chaîne en correspondance.</td>
-  </tr>
-  <tr>
-   <td><code>$n</code></td>
-   <td>
-    <p>Où <code><em>n</em></code> est un entier positif inférieur à 100. Insère la <em>n</em> ième chaîne de sous-correspondance entre parenthèses, à condition que le premier argument ait été un objet {{jsxref("RegExp")}}. Notez que ceci est réalisé en indices base 1.</p>
-   </td>
-  </tr>
- </tbody>
-</table>
-
-<h3 id="Indiquer_une_fonction_comme_paramètre">Indiquer une fonction comme paramètre</h3>
-
-<p>Vous pouvez indiquer une fonction comme second paramètre. Dans ce cas, cette fonction sera appelée après que la recherche a été effectuée. Le résultat de la fonction (valeur retournée) sera utilisé comme chaîne de remplacement. (Note : les modèles de remplacement spéciaux mentionnés ci-dessus ne s'appliquent <em>pas</em> dans ce cas). Notez que cette fonction sera appelée plusieurs fois, pour chaque correspondance complète à remplacer si l'expression régulière dans le premier paramètre est globale.</p>
-
-<p>Les arguments de cette fonction sont les suivants :</p>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <td class="header">Nom possible</td>
-   <td class="header">Valeur fournie</td>
-  </tr>
-  <tr>
-   <td><code>correspondance</code></td>
-   <td>La chaîne de caractère en correspondance. (Correspond au <code>$&amp;</code> défini ci-dessus.)</td>
-  </tr>
-  <tr>
-   <td><code>p1, p2, ...</code></td>
-   <td>
-    <p>La <em>n</em>-ième chaîne de sous-correspondance entre parenthèses capturantes, à condition que le premier argument de <code>replace()</code> soit un objet <code>RegExp</code>. (Correspond aux <code>$1</code>, <code>$2</code>, etc. ci-dessus.) Par exemple, si <code>/(\a+)(\b+)/</code> a été indiqué, <code>p1</code> correspond à <code>\a+</code>, et <code>p2</code> à <code>\b+</code>.</p>
-   </td>
-  </tr>
-  <tr>
-   <td><code>decalage</code></td>
-   <td>Le décalage entre la sous-chaîne en correspondance à l'intérieur de la chaîne complète en cours d'analyse. (Par exemple, si la chaîne complète était <code>'abcd'</code>, et que le chaîne en correspondance était <code>'bc'</code>, alors cet argument vaudra 1.)</td>
-  </tr>
-  <tr>
-   <td><code>chaine</code></td>
-   <td>La chaîne complète en cours d'analyse.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>(Le nombre exact d'arguments varie suivant que le premier paramètre est ou non un objet {{jsxref("RegExp")}} et, dans ce cas, du nombre de sous-correspondances entre parenthèses qu'il indique.)</p>
-
-<p>L'exemple suivant affectera <code>'abc - 12345 - #$*%'</code> à la variable <code>nouvelleChaine</code> :</p>
-
-<pre class="brush: js">function remplaceur(correspondance, p1, p2, p3, decalage, chaine) {
-  // p1 est non numérique, p2 numérique, et p3 non-alphanumérique
-  return [p1, p2, p3].join(' - ');
-}
-var nouvelleChaine = 'abc12345#$*%'.replace(/([^\d]*)(\d*)([^\w]*)/, remplaceur);
-console.log(nouvelleChaine); // abc - 12345 - #$*%
-</pre>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Définition_de_lexpression_régulière_dans_replace">Définition de l'expression régulière dans <code>replace()</code></h3>
-
-<p>Dans l'exemple suivant, l'expression régulière est définie dans <code>replace()</code> et inclut l'indicateur d'indifférence à la casse.</p>
-
-<pre class="brush: js">var chn = 'Twas the night before Xmas...';
-var nouvChn = chn.replace(/xmas/i, 'Christmas');
-console.log(nouvChn); // Twas the night before Christmas...</pre>
-
-<p>Cela affiche 'Twas the night before Christmas...'.</p>
-
-<div class="note">
-<p><strong>Note :</strong> Voir <a href="/fr/docs/Web/JavaScript/Guide/Expressions_r%C3%A9guli%C3%A8res">ce guide</a> pour plus d'explications concernant les expressions régulières.</p>
-</div>
-
-<h3 id="Utilisation_de_global_et_ignore_avec_replace">Utilisation de <code>global</code> et <code>ignore</code> avec <code>replace()</code></h3>
-
-<p>Le remplacement global ne peut être fait qu'avec une expression régulière. Dans l'exemple suivant, l'expression régulière inclut les indicateurs global et indifférence à la casse, qui permettent à <code>replace()</code> de remplacer chaque occurrence de 'pommes' dans la chaîne par 'oranges'.</p>
-
-<pre class="brush: js">var re = /pommes/gi;
-var chn = 'Les pommes sont rondes, et les pommes sont juteuses.';
-var nouvChn = chn.replace(re, 'oranges');
-console.log(nouvChn); // Les oranges sont rondes, et les oranges sont juteuses.
-</pre>
-
-<p>Cela affiche 'Les oranges sont rondes, et les oranges sont juteuses.'.</p>
-
-<h3 id="Inverser_des_mots_dans_une_chaîne_de_caractères">Inverser des mots dans une chaîne de caractères</h3>
-
-<p>Le script suivant intervertit les mots dans la chaîne de caractères. Pour le texte de remplacement, le script utilise les modèles de remplacement <code>$1</code> et <code>$2</code>.</p>
-
-<pre class="brush: js">var re = /(\w+)\s(\w+)/;
-var chn = 'Jean Martin';
-var nouvChn = chn.replace(re, "$2, $1");
-console.log(nouvChn); // Martin, Jean
-</pre>
-
-<p>Cela affiche 'Martin, Jean'.</p>
-
-<h3 id="Utilisation_dune_fonction_inline_modifiant_les_caractères_en_correspondance">Utilisation d'une fonction inline modifiant les caractères en correspondance</h3>
-
-<p>Dans cet exemple, toutes les occurrences des lettres majuscules sont converties en minuscules, et un tiret est inséré juste avant l'emplacement de la correspondance. La chose importante ici est que des opérations suppémentaires sont nécessaires sur l'élément en correspondance avant qu'il ne soit retourné comme remplacement.</p>
-
-<p>La fonction de remplacement accepte le fragment en correspondance comme paramètre, et elle l'utilise pour transformer sa casse et y concaténer le tiret avant de le retourner.</p>
-
-<pre class="brush: js">function styleFormatTiret(nomPropriete) {
-  function majusculesEnTiretMinuscules(correspondance, decalage, chaine) {
-    return (decalage &gt; 0 ? '-' : '') + correspondance.toLowerCase();
-  }
-  return nomPropriete.replace(/[A-Z]/g, majusculesEnTiretMinuscules);
-}
-</pre>
-
-<p>Avec <code>styleFormatTiret(</code><code>'borderTop')</code>, cela renvoie 'border-top'.</p>
-
-<p>Du fait que nous voulons transformer davantage le résultat de la correspondance avant la substitution finale, nous devons utiliser une fonction. Cela force l'évaluation de la correspondance avant la méthode {{jsxref ("String.prototype.toLowerCase()", "toLowerCase()")}}. Si nous avions essayé de le faire en utilisant la correspondance sans fonction, le {{jsxref ("String.prototype.toLowerCase()", "toLowerCase()")}} n'aurait eu aucun effet.</p>
-
-<pre class="brush: js">var nouvChn = nomPropriete.replace(/[A-Z]/g, '-' + '$&amp;'.toLowerCase()); // ne fonctionne pas
-</pre>
-
-<p>Ceci est dû au fait que <code>'$&amp;'.toLowerCase()</code> serait d'abord évalué comme un littéral de chaîne (résultant en le même <code>'$&amp;'</code>) avant d'utiliser les caractères comme modèle.</p>
-
-<h3 id="Remplacer_un_degré_Fahrenheit_par_son_équivalent_Celsius">Remplacer un degré Fahrenheit par son équivalent Celsius</h3>
-
-<p>L'exemple suivant remplace des degrés Fahrenheit par leur équivalent en degrés Celsius. Les degrés Fahrenheit doivent être un nombre se terminant par F. La fonction renvoie le nombre en Celsius se terminant par C. Par exemple, si le nombre de départ est 212F, la fonction renvoie 100C. Si le nombre de départ est 0F, la fonction retourne -17.77777777777778C.</p>
-
-<p>L'expression régulière <code>test</code> vérifie tout nombre se terminant par F. Le nombre de degrés Fahrenheit est accessible à la fonction via son deuxième paramètre, <code>p1</code>. La fonction définit le nombre Celsius sur la base des degrés Fahrenheit transmis dans une chaîne à la fonction <code>f2c()</code>. <code>f2c()</code> renvoie ensuite le nombre Celsius. Cette fonction se rapproche de l'indicateur <code>s///e</code> de Perl.</p>
-
-<pre class="brush: js">function f2c(x) {
-  function convertir(chn, p1, decalage, s) {
-    return ((p1-32) * 5/9) + 'C';
-  }
-  var s = String(x);
-  var test = /(-?\d+(?:\.\d*)?)F\b/g;
-  return s.replace(test, convertir);
-}
-</pre>
-
-<h3 id="Utiliser_une_fonction_inline_avec_une_expression_régulière_pour_éviter_des_boucles_for">Utiliser une fonction inline avec une expression régulière pour éviter des boucles <code>for</code></h3>
-
-<p>L'exemple suivant accepte un modèle chaîne et le convertit en un tableau d'objets.</p>
-
-<p><strong>Entrée : </strong></p>
-
-<p>Une chaîne de caractères composée des caractères <code>x</code>, <code>-</code> et <code>_</code></p>
-
-<pre class="brush: js">x-x_
-x---x---x---x---
-x-xxx-xx-x-
-x_x_x___x___x___</pre>
-
-<div><strong>Sortie :</strong></div>
-
-<div></div>
-
-<div>Un tableau d'objets. Un <code>'x'</code> dénote un état <code>'marche'</code>, un <code>'-'</code> symbolise un état '<code>arret</code>' et un  <code>'_'</code> (blanc souligné) symbolise la longueur d'un état <code>'<code>marche</code>'</code>.</div>
-
-<div></div>
-
-<pre class="brush: json">[
-  { marche: true, longueur: 1 },
-  { marche: false, longueur: 1 },
-  { marche: true, longueur: 2 }
-  ...
-]</pre>
-
-<div><strong>Fragment :</strong></div>
-
-<div></div>
-
-<div>
-<pre class="brush: js">var chn = 'x-x_';
-var tabRet = [];
-chn.replace(/(x_*)|(-)/g, function(correspondance, $1, $2){
-  if($1) tabRet.push({ marche: true, longueur: $1.length });
-  if($2) tabRet.push({ marche: false, longueur: 1 });
-});
-
-console.log(tabRet);</pre>
-</div>
-
-<div>Ce fragment génère un tableau de 3 objets au format désiré sans utiliser de boucle <code>for</code>.</div>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES3')}}</td>
-   <td>{{Spec2('ES3')}}</td>
-   <td>Définition initiale. Implémentée en JavaScript 1.2</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-15.5.4.11', 'String.prototype.replace')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-string.prototype.replace', 'String.prototype.replace')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-string.prototype.replace', 'String.prototype.replace')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.String.replace")}}</p>
-
-<h2 id="Notes_spécifiques_à_Firefox">Notes spécifiques à Firefox</h2>
-
-<ul>
- <li><code>flags</code> était un troisième argument non standard disponible uniquement dans Gecko : <var>str</var>.replace(<var>regexp</var>|<var>substr</var>, <var>newSubStr</var>|<var>function, flags</var>)</li>
- <li>À partir de Gecko 27 {{geckoRelease(27)}}, cette méthode a été modifiée pour être conforme à la spécification ECMAScript. Lorsque <code>replace()</code> est appelée avec une expression régulière globale, la propriété {{jsxref("RegExp.lastIndex")}} (si elle est définie) sera remise à <code>0</code> ({{bug(501739)}}).</li>
- <li>À partir de Gecko 39 {{geckoRelease(39)}}, l'argument non-standard <code>flags</code> est désapprouvé et déclenche un avertissement dans la console ({{bug(1142351)}}).</li>
- <li>À partir de Gecko 47 {{geckoRelease(47)}}, l'argument non-standard <code>flags</code> n'est plus supporté dans les versions non distribution et sera bientôt retiré complètement ({{bug(1245801)}}).</li>
- <li>À partir de Gecko 49 {{geckoRelease(49)}}, l'argument non-standard <code>flags</code> n'est plus supporté ({{bug(1108382)}}).</li>
-</ul>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("String.prototype.match()")}}</li>
- <li>{{jsxref("RegExp.prototype.exec()")}}</li>
- <li>{{jsxref("RegExp.prototype.test()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/string/replace/index.md b/files/fr/web/javascript/reference/global_objects/string/replace/index.md
new file mode 100644
index 0000000000..3dbd06edb5
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/string/replace/index.md
@@ -0,0 +1,308 @@
+---
+title: String.prototype.replace()
+slug: Web/JavaScript/Reference/Global_Objects/String/replace
+tags:
+  - Chaîne
+  - Expression
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - Régulière
+translation_of: Web/JavaScript/Reference/Global_Objects/String/replace
+original_slug: Web/JavaScript/Reference/Objets_globaux/String/replace
+---
+{{JSRef}}
+
+La méthode **`replace()`** renvoie une nouvelle chaîne de caractères dans laquelle tout ou partie des correspondances à un `modèle` sont remplacées par un `remplacement`. Le `modèle` utilisé peut être une {{jsxref("RegExp")}} et le remplacement peut être une chaîne ou une fonction à appeler pour chaque correspondance. Si `modèle` est une chaîne de caractères, seule la première correspondance sera remplacée.
+
+La chaîne de caractère originale reste inchangée.
+
+{{EmbedInteractiveExample("pages/js/string-replace.html")}}
+
+## Syntaxe
+
+    chn.replace(regexp|souschn, nouvSouschn|fonction)
+
+### Paramètres
+
+- `regexp` (modèle)
+  - : Un objet ou un littéral {{jsxref("RegExp")}}. La ou les correspondances sont remplacées  par `nouvSouschn` ou par la valeur retournée par la `fonction` indiquée.
+- `souschn` (modèle)
+  - : Une {{jsxref("String")}} qui est à remplacer par `nouvSouschn`. Elle est traitée comme une chaîne de caractères verbatim et elle n'est _pas_ interprétée comme une expression régulière. Seule la première occurrence sera remplacée.
+- `nouvSouschn` (remplacement)
+  - : La {{jsxref("String")}} qui remplace la chaîne de caractères indiquée par le paramètre `regexp` ou `souschn`. Un certain nombre de modèles de remplacement spéciaux sont supportés ; voir la section "[Indiquer une chaîne de caractères comme paramètre](#Indiquer_une_chaîne_de_caractère_comme_paramètre)" ci-dessous.
+- `fonction` (remplacement)
+  - : Une fonction à appeler pour créer la nouvelle sous-chaîne de caractères à utiliser pour remplacer la `regexp` ou la `souschn` donnée. Les arguments passés à cette fonction sont décrits dans la section "[Indiquer une fonction comme paramètre](#Indiquer_une_fonction_comme_paramètre)" ci-dessous.
+
+### Valeur retournée
+
+Une nouvelle chaîne de caractères avec tout ou partie des correspondances du modèle remplacées par un remplacement.
+
+## Description
+
+Cette méthode ne change pas l'objet {{jsxref("String")}} auquel elle est appliquée. Elle retourne simplement une nouvelle chaîne de caractères.
+
+Pour réaliser une recherche et remplacement global(e), incluez le commutateur `g` dans l'expression régulière.
+
+### Indiquer une chaîne de caractère comme paramètre
+
+La chaîne de caractère de remplacement peut inclure les modèles de remplacement spéciaux suivants :
+
+<table class="standard-table">
+  <tbody>
+    <tr>
+      <td class="header">Modèle</td>
+      <td class="header">Insère</td>
+    </tr>
+    <tr>
+      <td><code>$$</code></td>
+      <td>Insère un "$".</td>
+    </tr>
+    <tr>
+      <td><code>$&#x26;</code></td>
+      <td>Insère la chaine de caractère en correspondance.</td>
+    </tr>
+    <tr>
+      <td><code>$`</code></td>
+      <td>
+        Insère la partie de la chaîne de caractère qui précède la sous-chaîne en
+        correspondance.
+      </td>
+    </tr>
+    <tr>
+      <td><code>$'</code></td>
+      <td>
+        Insère la partie de la chaîne de caractère qui suit la sous-chaîne en
+        correspondance.
+      </td>
+    </tr>
+    <tr>
+      <td><code>$n</code></td>
+      <td>
+        <p>
+          Où <code><em>n</em></code> est un entier positif inférieur à 100.
+          Insère la <em>n</em> ième chaîne de sous-correspondance entre
+          parenthèses, à condition que le premier argument ait été un objet
+          {{jsxref("RegExp")}}. Notez que ceci est réalisé en
+          indices base 1.
+        </p>
+      </td>
+    </tr>
+  </tbody>
+</table>
+
+### Indiquer une fonction comme paramètre
+
+Vous pouvez indiquer une fonction comme second paramètre. Dans ce cas, cette fonction sera appelée après que la recherche a été effectuée. Le résultat de la fonction (valeur retournée) sera utilisé comme chaîne de remplacement. (Note : les modèles de remplacement spéciaux mentionnés ci-dessus ne s'appliquent _pas_ dans ce cas). Notez que cette fonction sera appelée plusieurs fois, pour chaque correspondance complète à remplacer si l'expression régulière dans le premier paramètre est globale.
+
+Les arguments de cette fonction sont les suivants :
+
+<table class="standard-table">
+  <tbody>
+    <tr>
+      <td class="header">Nom possible</td>
+      <td class="header">Valeur fournie</td>
+    </tr>
+    <tr>
+      <td><code>correspondance</code></td>
+      <td>
+        La chaîne de caractère en correspondance. (Correspond au
+        <code>$&#x26;</code> défini ci-dessus.)
+      </td>
+    </tr>
+    <tr>
+      <td><code>p1, p2, ...</code></td>
+      <td>
+        <p>
+          La <em>n</em>-ième chaîne de sous-correspondance entre parenthèses
+          capturantes, à condition que le premier argument de <code
+            >replace()</code
+          >
+          soit un objet <code>RegExp</code>. (Correspond aux <code>$1</code>,
+          <code>$2</code>, etc. ci-dessus.) Par exemple,
+          si <code>/(\a+)(\b+)/</code> a été indiqué, <code>p1</code> correspond
+          à <code>\a+</code>, et <code>p2</code> à <code>\b+</code>.
+        </p>
+      </td>
+    </tr>
+    <tr>
+      <td><code>decalage</code></td>
+      <td>
+        Le décalage entre la sous-chaîne en correspondance à l'intérieur de la
+        chaîne complète en cours d'analyse. (Par exemple, si la chaîne complète
+        était <code>'abcd'</code>, et que le chaîne en correspondance
+        était <code>'bc'</code>, alors cet argument vaudra 1.)
+      </td>
+    </tr>
+    <tr>
+      <td><code>chaine</code></td>
+      <td>La chaîne complète en cours d'analyse.</td>
+    </tr>
+  </tbody>
+</table>
+
+(Le nombre exact d'arguments varie suivant que le premier paramètre est ou non un objet {{jsxref("RegExp")}} et, dans ce cas, du nombre de sous-correspondances entre parenthèses qu'il indique.)
+
+L'exemple suivant affectera `'abc - 12345 - #$*%'` à la variable `nouvelleChaine` :
+
+```js
+function remplaceur(correspondance, p1, p2, p3, decalage, chaine) {
+  // p1 est non numérique, p2 numérique, et p3 non-alphanumérique
+  return [p1, p2, p3].join(' - ');
+}
+var nouvelleChaine = 'abc12345#$*%'.replace(/([^\d]*)(\d*)([^\w]*)/, remplaceur);
+console.log(nouvelleChaine); // abc - 12345 - #$*%
+```
+
+## Exemples
+
+### Définition de l'expression régulière dans `replace()`
+
+Dans l'exemple suivant, l'expression régulière est définie dans `replace()` et inclut l'indicateur d'indifférence à la casse.
+
+```js
+var chn = 'Twas the night before Xmas...';
+var nouvChn = chn.replace(/xmas/i, 'Christmas');
+console.log(nouvChn); // Twas the night before Christmas...
+```
+
+Cela affiche 'Twas the night before Christmas...'.
+
+> **Note :** Voir [ce guide](/fr/docs/Web/JavaScript/Guide/Expressions_r%C3%A9guli%C3%A8res) pour plus d'explications concernant les expressions régulières.
+
+### Utilisation de `global` et `ignore` avec `replace()`
+
+Le remplacement global ne peut être fait qu'avec une expression régulière. Dans l'exemple suivant, l'expression régulière inclut les indicateurs global et indifférence à la casse, qui permettent à `replace()` de remplacer chaque occurrence de 'pommes' dans la chaîne par 'oranges'.
+
+```js
+var re = /pommes/gi;
+var chn = 'Les pommes sont rondes, et les pommes sont juteuses.';
+var nouvChn = chn.replace(re, 'oranges');
+console.log(nouvChn); // Les oranges sont rondes, et les oranges sont juteuses.
+```
+
+Cela affiche 'Les oranges sont rondes, et les oranges sont juteuses.'.
+
+### Inverser des mots dans une chaîne de caractères
+
+Le script suivant intervertit les mots dans la chaîne de caractères. Pour le texte de remplacement, le script utilise les modèles de remplacement `$1` et `$2`.
+
+```js
+var re = /(\w+)\s(\w+)/;
+var chn = 'Jean Martin';
+var nouvChn = chn.replace(re, "$2, $1");
+console.log(nouvChn); // Martin, Jean
+```
+
+Cela affiche 'Martin, Jean'.
+
+### Utilisation d'une fonction inline modifiant les caractères en correspondance
+
+Dans cet exemple, toutes les occurrences des lettres majuscules sont converties en minuscules, et un tiret est inséré juste avant l'emplacement de la correspondance. La chose importante ici est que des opérations suppémentaires sont nécessaires sur l'élément en correspondance avant qu'il ne soit retourné comme remplacement.
+
+La fonction de remplacement accepte le fragment en correspondance comme paramètre, et elle l'utilise pour transformer sa casse et y concaténer le tiret avant de le retourner.
+
+```js
+function styleFormatTiret(nomPropriete) {
+  function majusculesEnTiretMinuscules(correspondance, decalage, chaine) {
+    return (decalage > 0 ? '-' : '') + correspondance.toLowerCase();
+  }
+  return nomPropriete.replace(/[A-Z]/g, majusculesEnTiretMinuscules);
+}
+```
+
+Avec ` styleFormatTiret(``'borderTop') `, cela renvoie 'border-top'.
+
+Du fait que nous voulons transformer davantage le résultat de la correspondance avant la substitution finale, nous devons utiliser une fonction. Cela force l'évaluation de la correspondance avant la méthode {{jsxref ("String.prototype.toLowerCase()", "toLowerCase()")}}. Si nous avions essayé de le faire en utilisant la correspondance sans fonction, le {{jsxref ("String.prototype.toLowerCase()", "toLowerCase()")}} n'aurait eu aucun effet.
+
+```js
+var nouvChn = nomPropriete.replace(/[A-Z]/g, '-' + '$&'.toLowerCase()); // ne fonctionne pas
+```
+
+Ceci est dû au fait que `'$&'.toLowerCase()` serait d'abord évalué comme un littéral de chaîne (résultant en le même `'$&'`) avant d'utiliser les caractères comme modèle.
+
+### Remplacer un degré Fahrenheit par son équivalent Celsius
+
+L'exemple suivant remplace des degrés Fahrenheit par leur équivalent en degrés Celsius. Les degrés Fahrenheit doivent être un nombre se terminant par F. La fonction renvoie le nombre en Celsius se terminant par C. Par exemple, si le nombre de départ est 212F, la fonction renvoie 100C. Si le nombre de départ est 0F, la fonction retourne -17.77777777777778C.
+
+L'expression régulière `test` vérifie tout nombre se terminant par F. Le nombre de degrés Fahrenheit est accessible à la fonction via son deuxième paramètre, `p1`. La fonction définit le nombre Celsius sur la base des degrés Fahrenheit transmis dans une chaîne à la fonction `f2c()`. `f2c()` renvoie ensuite le nombre Celsius. Cette fonction se rapproche de l'indicateur `s///e` de Perl.
+
+```js
+function f2c(x) {
+  function convertir(chn, p1, decalage, s) {
+    return ((p1-32) * 5/9) + 'C';
+  }
+  var s = String(x);
+  var test = /(-?\d+(?:\.\d*)?)F\b/g;
+  return s.replace(test, convertir);
+}
+```
+
+### Utiliser une fonction inline avec une expression régulière pour éviter des boucles `for`
+
+L'exemple suivant accepte un modèle chaîne et le convertit en un tableau d'objets.
+
+**Entrée :**
+
+Une chaîne de caractères composée des caractères `x`, `-` et `_`
+
+```js
+x-x_
+x---x---x---x---
+x-xxx-xx-x-
+x_x_x___x___x___
+```
+
+**Sortie :**Un tableau d'objets. Un `'x'` dénote un état `'marche'`, un `'-'` symbolise un état '`arret`' et un  `'_'` (blanc souligné) symbolise la longueur d'un état `'marche'`.
+
+```json
+[
+  { marche: true, longueur: 1 },
+  { marche: false, longueur: 1 },
+  { marche: true, longueur: 2 }
+  ...
+]
+```
+
+**Fragment :**
+
+```js
+var chn = 'x-x_';
+var tabRet = [];
+chn.replace(/(x_*)|(-)/g, function(correspondance, $1, $2){
+  if($1) tabRet.push({ marche: true, longueur: $1.length });
+  if($2) tabRet.push({ marche: false, longueur: 1 });
+});
+
+console.log(tabRet);
+```
+
+Ce fragment génère un tableau de 3 objets au format désiré sans utiliser de boucle `for`.
+
+## Spécifications
+
+| Spécification                                                                                                    | Statut                       | Commentaire                                        |
+| ---------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------------------------------------- |
+| {{SpecName('ES3')}}                                                                                         | {{Spec2('ES3')}}         | Définition initiale. Implémentée en JavaScript 1.2 |
+| {{SpecName('ES5.1', '#sec-15.5.4.11', 'String.prototype.replace')}}                         | {{Spec2('ES5.1')}}     |                                                    |
+| {{SpecName('ES6', '#sec-string.prototype.replace', 'String.prototype.replace')}}     | {{Spec2('ES6')}}         |                                                    |
+| {{SpecName('ESDraft', '#sec-string.prototype.replace', 'String.prototype.replace')}} | {{Spec2('ESDraft')}} |                                                    |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.String.replace")}}
+
+## Notes spécifiques à Firefox
+
+- `flags` était un troisième argument non standard disponible uniquement dans Gecko : *str*.replace(_regexp_|_substr_, _newSubStr_|_function, flags_)
+- À partir de Gecko 27 {{geckoRelease(27)}}, cette méthode a été modifiée pour être conforme à la spécification ECMAScript. Lorsque `replace()` est appelée avec une expression régulière globale, la propriété {{jsxref("RegExp.lastIndex")}} (si elle est définie) sera remise à `0` ({{bug(501739)}}).
+- À partir de Gecko 39 {{geckoRelease(39)}}, l'argument non-standard `flags` est désapprouvé et déclenche un avertissement dans la console ({{bug(1142351)}}).
+- À partir de Gecko 47 {{geckoRelease(47)}}, l'argument non-standard `flags` n'est plus supporté dans les versions non distribution et sera bientôt retiré complètement ({{bug(1245801)}}).
+- À partir de Gecko 49 {{geckoRelease(49)}}, l'argument non-standard `flags` n'est plus supporté ({{bug(1108382)}}).
+
+## Voir aussi
+
+- {{jsxref("String.prototype.match()")}}
+- {{jsxref("RegExp.prototype.exec()")}}
+- {{jsxref("RegExp.prototype.test()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/string/replaceall/index.html b/files/fr/web/javascript/reference/global_objects/string/replaceall/index.html
deleted file mode 100644
index c06b93eca3..0000000000
--- a/files/fr/web/javascript/reference/global_objects/string/replaceall/index.html
+++ /dev/null
@@ -1,167 +0,0 @@
----
-title: String.prototype.replaceAll()
-slug: Web/JavaScript/Reference/Global_Objects/String/replaceAll
-translation_of: Web/JavaScript/Reference/Global_Objects/String/replaceAll
-original_slug: Web/JavaScript/Reference/Objets_globaux/String/replaceAll
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <strong><code>replaceAll()</code></strong> retourne une nouvelle chaîne de caractères dans laquelle toutes les occurrences d'un motif donné ont été remplacées par une chaîne de remplacement. L'argument <code>pattern</code> fournit pour décrire le motif peut être une chaîne de caractères ou une expression rationnelle (<a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/RegExp"><code>RegExp</code></a>), l'argument <code>replacement</code> peut être une chaîne de caractères ou une fonction qui sera appelée pour chaque correspondance.</p>
-
-<p>La chaîne de caractères initiale restera inchangée.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/string-replaceall.html")}}</div>
-
-<h2 id="syntax">Syntaxe</h2>
-
-<pre class="brush: js">const newStr = <var>str</var>.replaceAll(<var>regexp</var>|<var>substr</var>, <var>newSubstr</var>|<var>function</var>)
-</pre>
-
-<div class="notecard note">
-<p><strong>Note :</strong> Quand on utilise une expression rationnelle, il est nécessaire d'utiliser le marqueur global ("g"); autrement, l'exception <code>TypeError</code>: <i>"replaceAll must be called with a global RegExp"</i> sera levée.</p>
-</div>
-
-<h3 id="parameters">Paramètres</h3>
-
-<dl>
- <dt><code><var>regexp</var></code> (le motif à rechercher)</dt>
- <dd>Un objet ou littérale <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/RegExp"><code>RegExp</code></a> avec le marqueur global. Les correspondances sont remplacées par <code><var>newSubstr</var></code> ou la valeur retournée par la <code><var>function</var></code> spécifiée. Une RegExp sans le marqueur global ("g") renverra l'erreur <code>TypeError</code>: "replaceAll must be called with a global RegExp".</dd>
- <dt><code><var>substr</var></code></dt>
- <dd>Une chaîne de caractères (<a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/String"><code>String</code></a>) qui sera remplacée par <code><var>newSubstr</var></code>. Elle est traitée comme une chaîne de caracères littérale et <em>non pas</em> comme une expression régulière.</dd>
- <dt><code><var>newSubstr</var></code> (remplacement)</dt>
- <dd>La chaîne de caractères (<a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/String"><code>String</code></a>) qui remplacera la sous-chaîne indiquée par la <code><var>regexp</var></code> ou <code><var>substr</var></code> donnée en paramètre. Un certain nombre de motifs spéciaux pour le remplacement sont pris en charge, voir la section "<a href="#specifying_a_string_as_a_parameter">Spécifier une chaîne de caractères comme paramètre</a>" ci-dessous.</dd>
- <dt><code><var>function</var></code> (remplacement)</dt>
- <dd>Une fonction qui a pour but de créer la nouvelle sous-chaîne qui remplacera les occurrences trouvées via la <code><var>regexp</var></code> ou <code><var>substr</var></code> donnée en paramètre. Les arguments passés à cette fonction sont détaillés dans la section "<a href="#specifying_a_function_as_a_parameter">Spécifier une fonction comme paramètre</a>" ci-dessous.</dd>
-</dl>
-
-<h3 id="return_value">Valeur de retour</h3>
-
-<p>Une nouvelle chaîne avec toutes les occurrences trouvées remplacées par le pattern de remplacement.</p>
-
-<h2 id="description">Description</h2>
-
-<p>Cette méthode ne remplace ni ne modifie l'objet <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/String"><code>String</code></a> original. Elle retourne juste une nouvelle chaîne de caractères.</p>
-
-<h3 id="specifying_a_string_as_a_parameter">Spécifier une chaîne de caractères comme paramètre</h3>
-
-<p>La chaîne de caractères de remplacement peut inclure les motifs de remplacement spéciaux suivants :</p>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th class="header" scope="col">Motif</th>
-   <th class="header" scope="col">Insertion</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><code>$$</code></td>
-   <td>Insère un <code>"$"</code>.</td>
-  </tr>
-  <tr>
-   <td><code>$&amp;</code></td>
-   <td>Insère la chaîne de caractères trouvée.</td>
-  </tr>
-  <tr>
-   <td><code>$`</code></td>
-   <td>Insère la portion de chaîne de caractères qui précède celle trouvée.</td>
-  </tr>
-  <tr>
-   <td><code>$'</code></td>
-   <td>Insère la portion de chaîne de caractères qui suit celle trouvée.</td>
-  </tr>
-  <tr>
-   <td><code>$<var>n</var></code></td>
-   <td>Où <code><var>n</var></code> est un entier positif inférieur à 100. Insère la n-ième occurrence trouvée, à condition que le premier argument soit un objet <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/RegExp"><code>RegExp</code></a>. Cet indice démarre à partir de 1.</td>
-  </tr>
- </tbody>
-</table>
-
-<h3 id="specifying_a_function_as_a_parameter">Spécifier une fonction comme paramètre</h3>
-
-<p>Vous pouvez passer une fonction comme second paramètre. Dans ce cas, la fonction sera appelée après qu'une occurrence soit trouvée. Le résultat de la fonction (valeur de retour) sera utilisé comme chaîne de remplacement. (<strong>Note : </strong>les remplacements spéciaux mentionnés plus haut <em>ne s'appliqueront pas</em> dans ce cas.)</p>
-
-<p>À noter que la fonction sera utilisée à chaque fois qu'une occurrence sera rencontrée, si l'expression régulière donnée en paramètre est globale.</p>
-
-<p>La fonction admet les arguments suivants :</p>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th class="header" scope="col">Nom possible</th>
-   <th class="header" scope="col">Valeur fournie</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><code>match</code></td>
-   <td>L'occurrence trouvée. (Correspond au <code>$&amp;</code> du précédent tableau.)</td>
-  </tr>
-  <tr>
-   <td><code>p1, p2…</code></td>
-   <td>
-    <p>Le n-ième chaîne de caractères trouvée par une sous-correspondance entre parenthèses, à condition que le premier paramètre soit un objet de type <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/RegExp"><code>RegExp</code></a>.<br>
-     (Correspond aux <code>$1</code>, <code>$2</code>… précédents.) Par exemple, si <code>/(\a+)(\b+)/</code> a été passé en paramètre, <code>p1</code> est la correspondance pour <code>\a+</code>, et <code>p2</code> pour <code>\b+</code>.</p>
-   </td>
-  </tr>
-  <tr>
-   <td><code>offset</code></td>
-   <td>Le décalage de la sous-chaîne trouvée dans la chaîne d'entrée (par exemple, si la chaîne complète d'entrée était <code>'abcd'</code> et la sous-chaîne <code>'bc'</code> alors, cet argument vaudra 1.)</td>
-  </tr>
-  <tr>
-   <td><code>string</code></td>
-   <td>La chaîne compète examinée.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>Le nombre d'arguments exact dépend du premier argument de <code>replaceAll()</code> : si c'est un objet de type <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/RegExp"><code>RegExp</code></a> et, si tel est le cas, du nombre de sous-correspondances entre parenthèses qu'il spécifie.</p>
-
-<h2 id="examples">Exemples</h2>
-
-<h3 id="using_replaceAll">Utiliser replaceAll()</h3>
-
-<pre class="brush: js">'aabbcc'.replaceAll('b', '.');
-// 'aa..cc'</pre>
-
-<h3 id="non-global_regex_throws">Exceptions pour les expressions rationnelles non globales</h3>
-
-<p>Quand on utilise une expression rationnelle pour chercher une valeur, celle-ci doit être globale. Le code suivant ne fonctionnera pas :</p>
-
-<pre class="brush: js; example-bad">'aabbcc'.replaceAll(/b/, '.');
-TypeError: replaceAll must be called with a global RegExp
-</pre>
-
-<p>L'exemple suivant, utilisant le marqueur <code>g</code>, fonctionnera :</p>
-
-<pre class="brush: js; example-good">'aabbcc'.replaceAll(/b/g, '.');
-"aa..cc"
-</pre>
-
-<h2 id="specifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-string.prototype.replaceall', 'String.prototype.replaceAll')}}</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.String.replaceAll")}}</p>
-
-<h2 id="see_also">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/String/replace"><code>String.prototype.replace()</code></a></li>
- <li><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/String/match"><code>String.prototype.match()</code></a></li>
- <li><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/RegExp/exec"><code>RegExp.prototype.exec()</code></a></li>
- <li><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/RegExp/test"><code>RegExp.prototype.test()</code></a></li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/string/replaceall/index.md b/files/fr/web/javascript/reference/global_objects/string/replaceall/index.md
new file mode 100644
index 0000000000..32d1bcef6b
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/string/replaceall/index.md
@@ -0,0 +1,150 @@
+---
+title: String.prototype.replaceAll()
+slug: Web/JavaScript/Reference/Global_Objects/String/replaceAll
+translation_of: Web/JavaScript/Reference/Global_Objects/String/replaceAll
+original_slug: Web/JavaScript/Reference/Objets_globaux/String/replaceAll
+---
+{{JSRef}}
+
+La méthode **`replaceAll()`** retourne une nouvelle chaîne de caractères dans laquelle toutes les occurrences d'un motif donné ont été remplacées par une chaîne de remplacement. L'argument `pattern` fournit pour décrire le motif peut être une chaîne de caractères ou une expression rationnelle ([`RegExp`](/fr/docs/Web/JavaScript/Reference/Global_Objects/RegExp)), l'argument `replacement` peut être une chaîne de caractères ou une fonction qui sera appelée pour chaque correspondance.
+
+La chaîne de caractères initiale restera inchangée.
+
+{{EmbedInteractiveExample("pages/js/string-replaceall.html")}}
+
+## Syntaxe
+
+```js
+const newStr = str.replaceAll(regexp|substr, newSubstr|function)
+```
+
+> **Note :** Quand on utilise une expression rationnelle, il est nécessaire d'utiliser le marqueur global ("g"); autrement, l'exception `TypeError`: _"replaceAll must be called with a global RegExp"_ sera levée.
+
+### Paramètres
+
+- `regexp` (le motif à rechercher)
+  - : Un objet ou littérale [`RegExp`](/fr/docs/Web/JavaScript/Reference/Global_Objects/RegExp) avec le marqueur global. Les correspondances sont remplacées par `newSubstr` ou la valeur retournée par la `function` spécifiée. Une RegExp sans le marqueur global ("g") renverra l'erreur `TypeError`: "replaceAll must be called with a global RegExp".
+- `substr`
+  - : Une chaîne de caractères ([`String`](/fr/docs/Web/JavaScript/Reference/Global_Objects/String)) qui sera remplacée par `newSubstr`. Elle est traitée comme une chaîne de caracères littérale et _non pas_ comme une expression régulière.
+- `newSubstr` (remplacement)
+  - : La chaîne de caractères ([`String`](/fr/docs/Web/JavaScript/Reference/Global_Objects/String)) qui remplacera la sous-chaîne indiquée par la `regexp` ou `substr` donnée en paramètre. Un certain nombre de motifs spéciaux pour le remplacement sont pris en charge, voir la section "[Spécifier une chaîne de caractères comme paramètre](#specifying_a_string_as_a_parameter)" ci-dessous.
+- `function` (remplacement)
+  - : Une fonction qui a pour but de créer la nouvelle sous-chaîne qui remplacera les occurrences trouvées via la `regexp` ou `substr` donnée en paramètre. Les arguments passés à cette fonction sont détaillés dans la section "[Spécifier une fonction comme paramètre](#specifying_a_function_as_a_parameter)" ci-dessous.
+
+### Valeur de retour
+
+Une nouvelle chaîne avec toutes les occurrences trouvées remplacées par le pattern de remplacement.
+
+## Description
+
+Cette méthode ne remplace ni ne modifie l'objet [`String`](/fr/docs/Web/JavaScript/Reference/Global_Objects/String) original. Elle retourne juste une nouvelle chaîne de caractères.
+
+### Spécifier une chaîne de caractères comme paramètre
+
+La chaîne de caractères de remplacement peut inclure les motifs de remplacement spéciaux suivants :
+
+| Motif    | Insertion                                                                                                                                                                                                                                   |
+| -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `$$`     | Insère un `"$"`.                                                                                                                                                                                                                            |
+| `$&`     | Insère la chaîne de caractères trouvée.                                                                                                                                                                                                     |
+| `` $` `` | Insère la portion de chaîne de caractères qui précède celle trouvée.                                                                                                                                                                        |
+| `$'`     | Insère la portion de chaîne de caractères qui suit celle trouvée.                                                                                                                                                                           |
+| `$n`     | Où `n` est un entier positif inférieur à 100. Insère la n-ième occurrence trouvée, à condition que le premier argument soit un objet [`RegExp`](/fr/docs/Web/JavaScript/Reference/Global_Objects/RegExp). Cet indice démarre à partir de 1. |
+
+### Spécifier une fonction comme paramètre
+
+Vous pouvez passer une fonction comme second paramètre. Dans ce cas, la fonction sera appelée après qu'une occurrence soit trouvée. Le résultat de la fonction (valeur de retour) sera utilisé comme chaîne de remplacement. (**Note :** les remplacements spéciaux mentionnés plus haut _ne s'appliqueront pas_ dans ce cas.)
+
+À noter que la fonction sera utilisée à chaque fois qu'une occurrence sera rencontrée, si l'expression régulière donnée en paramètre est globale.
+
+La fonction admet les arguments suivants :
+
+<table class="standard-table">
+  <thead>
+    <tr>
+      <th class="header" scope="col">Nom possible</th>
+      <th class="header" scope="col">Valeur fournie</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td><code>match</code></td>
+      <td>
+        L'occurrence trouvée. (Correspond au <code>$&#x26;</code> du précédent
+        tableau.)
+      </td>
+    </tr>
+    <tr>
+      <td><code>p1, p2…</code></td>
+      <td>
+        <p>
+          Le n-ième chaîne de caractères trouvée par une sous-correspondance
+          entre parenthèses, à condition que le premier paramètre soit un objet
+          de type
+          <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/RegExp"
+            ><code>RegExp</code></a
+          >.<br />(Correspond aux <code>$1</code>, <code>$2</code>… précédents.)
+          Par exemple, si <code>/(\a+)(\b+)/</code> a été passé en paramètre,
+          <code>p1</code> est la correspondance pour <code>\a+</code>, et
+          <code>p2</code> pour <code>\b+</code>.
+        </p>
+      </td>
+    </tr>
+    <tr>
+      <td><code>offset</code></td>
+      <td>
+        Le décalage de la sous-chaîne trouvée dans la chaîne d'entrée (par
+        exemple, si la chaîne complète d'entrée était <code>'abcd'</code> et la
+        sous-chaîne <code>'bc'</code> alors, cet argument vaudra 1.)
+      </td>
+    </tr>
+    <tr>
+      <td><code>string</code></td>
+      <td>La chaîne compète examinée.</td>
+    </tr>
+  </tbody>
+</table>
+
+Le nombre d'arguments exact dépend du premier argument de `replaceAll()` : si c'est un objet de type [`RegExp`](/fr/docs/Web/JavaScript/Reference/Global_Objects/RegExp) et, si tel est le cas, du nombre de sous-correspondances entre parenthèses qu'il spécifie.
+
+## Exemples
+
+### Utiliser replaceAll()
+
+```js
+'aabbcc'.replaceAll('b', '.');
+// 'aa..cc'
+```
+
+### Exceptions pour les expressions rationnelles non globales
+
+Quand on utilise une expression rationnelle pour chercher une valeur, celle-ci doit être globale. Le code suivant ne fonctionnera pas :
+
+```js example-bad
+'aabbcc'.replaceAll(/b/, '.');
+TypeError: replaceAll must be called with a global RegExp
+```
+
+L'exemple suivant, utilisant le marqueur `g`, fonctionnera :
+
+```js example-good
+'aabbcc'.replaceAll(/b/g, '.');
+"aa..cc"
+```
+
+## Spécifications
+
+| Spécification                                                                                                            |
+| ------------------------------------------------------------------------------------------------------------------------ |
+| {{SpecName('ESDraft', '#sec-string.prototype.replaceall', 'String.prototype.replaceAll')}} |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.String.replaceAll")}}
+
+## Voir aussi
+
+- [`String.prototype.replace()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/String/replace)
+- [`String.prototype.match()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/String/match)
+- [`RegExp.prototype.exec()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/RegExp/exec)
+- [`RegExp.prototype.test()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/RegExp/test)
diff --git a/files/fr/web/javascript/reference/global_objects/string/search/index.html b/files/fr/web/javascript/reference/global_objects/string/search/index.html
deleted file mode 100644
index aa1828528f..0000000000
--- a/files/fr/web/javascript/reference/global_objects/string/search/index.html
+++ /dev/null
@@ -1,103 +0,0 @@
----
-title: String.prototype.search()
-slug: Web/JavaScript/Reference/Global_Objects/String/search
-tags:
-  - Expressions rationnelles
-  - JavaScript
-  - Méthode
-  - Prototype
-  - Reference
-  - String
-translation_of: Web/JavaScript/Reference/Global_Objects/String/search
-original_slug: Web/JavaScript/Reference/Objets_globaux/String/search
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <code><strong>search()</strong></code> éxecute une recherche dans une chaine de caractères grâce à une expression rationnelle appliquée sur la chaîne courante.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/string-search.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>str</var>.search(<var>regexp</var>)</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>regexp</code></dt>
- <dd>Un objet représentant une expression rationnelle. Si l'objet passé n'est pas un objet d'expression régulière, il est directement converti en une instance de {{jsxref("RegExp")}} en utilisant <code>new RegExp(obj)</code>.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Si la recherche aboutit, <code>search()</code> renvoie un entier qui correspond à l'indice de la première correspondance trouvée dans la chaîne. Si rien n'est trouvé, la méthode renvoie <code>-1</code>.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>Si la recherche est positive, <code>search()</code> renvoie l'indice de la première correspondance pour l'expression rationnelle au sein de la chaine de caractères. Sinon, la méthode renvoie -1.</p>
-
-<p>Si on souhaite savoir si un motif est trouvé dans une chaine de caractères, on utilisera cette méthode (semblable à la méthode {{jsxref("RegExp.prototype.test", "test()")}}) du prototype de <code>RegExp</code> ; pour plus d'informations (mais une éxecution plus lente), on utilisera {{jsxref("String.prototype.match", "match()")}} (semblable à la méthode {{jsxref("RegExp.prototype.exec", "exec()")}} pour les expressions rationnelles). La méthode <code>test</code> est semblable mais renvoie uniquement un booléen indiquant si une correspondance a été trouvée.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<p>Dans l'exemple suivant, on utilise une chaîne de caractères pour laquelle on applique deux expressions rationnelles (la première permet d'obtenir une correspondance et la seconde n'en trouve aucune).</p>
-
-<pre class="brush: js">var maChaine = "CoucOu";
-var regex1 = /[A-Z]/g;
-var regex2 = /[.]/g;
-
-console.log(maChaine.search(regex1)); // Renvoie 0, la position de la première majuscule
-console.log(maChaine.search(regex2)); // Renvoie -1 car il n'y a aucun point dans la chaîne</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES3')}}</td>
-   <td>{{Spec2('ES3')}}</td>
-   <td>Définition initiale. Implémentée avec JavaScript 1.2</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-15.5.4.12', 'String.prototype.search')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-string.prototype.search', 'String.prototype.search')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-string.prototype.search', 'String.prototype.search')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.String.search")}}</p>
-
-<h2 id="Notes_spécifiques_à_Gecko">Notes spécifiques à Gecko</h2>
-
-<ul>
- <li><code>flags</code> était un second argument non standard présent uniquement sur Gecko : <var>str</var>.search(<var>regexp, flags</var>)</li>
- <li>Avant {{Gecko("8.0")}}, <code>search()</code> n'était pas implémenté correctement ; quand il était appelé sans paramètre ou avec {{jsxref("undefined")}}, la recherche validait la chaine de caractères "undefined", au lieu de valider une chaine de caractères vide. Cela a été corrigé ; désormais, <code>"a".search()</code> et <code>"a".search(undefined)</code> renvoient bien 0.</li>
- <li>À partir de Gecko 39 {{geckoRelease(39)}}, les arguments non-standards (<code>flags</code>) pour les drapeaux sont dépréciés et déclenchent des avertissements dans la console ({{bug(1142351)}}). Cette propriété est spécifique à Gecko et sera retirée à l'avenir.</li>
- <li>À partir de Gecko 47 {{geckoRelease(47)}}, l'argument non-standard <code>flags</code> n'est plus supporté dans les versions hors <em>release</em> et sera bientôt retiré définitivement ({{bug(1245801)}}).</li>
- <li>À partir de Gecko 49 {{geckoRelease(49)}}, l'argument non-standard <code>flags</code> n'est plus pris en charge ({{bug(1108382)}}).</li>
-</ul>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("String.prototype.match()")}}</li>
- <li>{{jsxref("RegExp.prototype.exec()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/string/search/index.md b/files/fr/web/javascript/reference/global_objects/string/search/index.md
new file mode 100644
index 0000000000..29c4facc8d
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/string/search/index.md
@@ -0,0 +1,76 @@
+---
+title: String.prototype.search()
+slug: Web/JavaScript/Reference/Global_Objects/String/search
+tags:
+  - Expressions rationnelles
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - String
+translation_of: Web/JavaScript/Reference/Global_Objects/String/search
+original_slug: Web/JavaScript/Reference/Objets_globaux/String/search
+---
+{{JSRef}}
+
+La méthode **`search()`** éxecute une recherche dans une chaine de caractères grâce à une expression rationnelle appliquée sur la chaîne courante.
+
+{{EmbedInteractiveExample("pages/js/string-search.html")}}
+
+## Syntaxe
+
+    str.search(regexp)
+
+### Paramètres
+
+- `regexp`
+  - : Un objet représentant une expression rationnelle. Si l'objet passé n'est pas un objet d'expression régulière, il est directement converti en une instance de {{jsxref("RegExp")}} en utilisant `new RegExp(obj)`.
+
+### Valeur de retour
+
+Si la recherche aboutit, `search()` renvoie un entier qui correspond à l'indice de la première correspondance trouvée dans la chaîne. Si rien n'est trouvé, la méthode renvoie `-1`.
+
+## Description
+
+Si la recherche est positive, `search()` renvoie l'indice de la première correspondance pour l'expression rationnelle au sein de la chaine de caractères. Sinon, la méthode renvoie -1.
+
+Si on souhaite savoir si un motif est trouvé dans une chaine de caractères, on utilisera cette méthode (semblable à la méthode {{jsxref("RegExp.prototype.test", "test()")}}) du prototype de `RegExp` ; pour plus d'informations (mais une éxecution plus lente), on utilisera {{jsxref("String.prototype.match", "match()")}} (semblable à la méthode {{jsxref("RegExp.prototype.exec", "exec()")}} pour les expressions rationnelles). La méthode `test` est semblable mais renvoie uniquement un booléen indiquant si une correspondance a été trouvée.
+
+## Exemples
+
+Dans l'exemple suivant, on utilise une chaîne de caractères pour laquelle on applique deux expressions rationnelles (la première permet d'obtenir une correspondance et la seconde n'en trouve aucune).
+
+```js
+var maChaine = "CoucOu";
+var regex1 = /[A-Z]/g;
+var regex2 = /[.]/g;
+
+console.log(maChaine.search(regex1)); // Renvoie 0, la position de la première majuscule
+console.log(maChaine.search(regex2)); // Renvoie -1 car il n'y a aucun point dans la chaîne
+```
+
+## Spécifications
+
+| Spécification                                                                                                | État                         | Commentaires                                         |
+| ------------------------------------------------------------------------------------------------------------ | ---------------------------- | ---------------------------------------------------- |
+| {{SpecName('ES3')}}                                                                                     | {{Spec2('ES3')}}         | Définition initiale. Implémentée avec JavaScript 1.2 |
+| {{SpecName('ES5.1', '#sec-15.5.4.12', 'String.prototype.search')}}                     | {{Spec2('ES5.1')}}     |                                                      |
+| {{SpecName('ES6', '#sec-string.prototype.search', 'String.prototype.search')}}     | {{Spec2('ES6')}}         |                                                      |
+| {{SpecName('ESDraft', '#sec-string.prototype.search', 'String.prototype.search')}} | {{Spec2('ESDraft')}} |                                                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.String.search")}}
+
+## Notes spécifiques à Gecko
+
+- `flags` était un second argument non standard présent uniquement sur Gecko : _str_.search(_regexp, flags_)
+- Avant {{Gecko("8.0")}}, `search()` n'était pas implémenté correctement ; quand il était appelé sans paramètre ou avec {{jsxref("undefined")}}, la recherche validait la chaine de caractères "undefined", au lieu de valider une chaine de caractères vide. Cela a été corrigé ; désormais, `"a".search()` et `"a".search(undefined)` renvoient bien 0.
+- À partir de Gecko 39 {{geckoRelease(39)}}, les arguments non-standards (`flags`) pour les drapeaux sont dépréciés et déclenchent des avertissements dans la console ({{bug(1142351)}}). Cette propriété est spécifique à Gecko et sera retirée à l'avenir.
+- À partir de Gecko 47 {{geckoRelease(47)}}, l'argument non-standard `flags` n'est plus supporté dans les versions hors _release_ et sera bientôt retiré définitivement ({{bug(1245801)}}).
+- À partir de Gecko 49 {{geckoRelease(49)}}, l'argument non-standard `flags` n'est plus pris en charge ({{bug(1108382)}}).
+
+## Voir aussi
+
+- {{jsxref("String.prototype.match()")}}
+- {{jsxref("RegExp.prototype.exec()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/string/slice/index.html b/files/fr/web/javascript/reference/global_objects/string/slice/index.html
deleted file mode 100644
index a43faa2bd1..0000000000
--- a/files/fr/web/javascript/reference/global_objects/string/slice/index.html
+++ /dev/null
@@ -1,126 +0,0 @@
----
-title: String.prototype.slice()
-slug: Web/JavaScript/Reference/Global_Objects/String/slice
-tags:
-  - Chaîne
-  - JavaScript
-  - Méthode
-  - Prototype
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/String/slice
-original_slug: Web/JavaScript/Reference/Objets_globaux/String/slice
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <code><strong>slice()</strong></code> extrait une section d'une chaine de caractères et la retourne comme une nouvelle chaine de caractères. La chaîne de caractères courante n'est pas modifiée.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/string-slice.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><em>chn</em>.slice(<em>indiceDe<var>but</var></em>[, <em>indiceF</em><var><em>in</em></var>])</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>indiceDebut</code></dt>
- <dd>L'indice base 0 auquel commencer l'extraction. Si négatif, il est traité comme (<code>longueurSource + indiceDebut</code>) où <code>longueurSource</code> est la longueur de la chaine de caractères (par exemple, si <code>indiceDebut</code> est -3, il sera traité comme <code>longueurSource - 3</code>). Si <code>indiceDebut</code> est supérieur à la longueur de la chaîne, <code>slice()</code> renvoie une chaîne vide.</dd>
- <dt><code>indiceFin</code></dt>
- <dd>Paramètre optionnel. Un indice base 0 <em>avant</em> lequel terminer l'extraction. Le caractère à cet indice ne sera pas inclus. Si <code>indiceFin</code> est absent, <code>slice()</code> extraira jusqu'à la fin de la chaine de caractères. Si négatif, il sera traité comme (<code>longueurSource + indiceFin</code>) où <code>longueurSource</code> est la longueur de la chaine de caractères (par exemple s'il vaut <code>-3</code>, il sera traité comme <code>longueurSource - 3</code>)</dd>
-</dl>
-
-<h3 id="Valeur_retournée">Valeur retournée</h3>
-
-<p>Une nouvelle chaîne de caractères contenant la section extraite de la chaîne.</p>
-
-<h2 id="Description">Description</h2>
-
-<p><code>slice()</code> extrait le texte d'une chaine de caractères et retourne une nouvelle chaîne de caractères. Les changements au texte dans une chaine de caractères n'affectent pas l'autre chaîne.</p>
-
-<p><code>slice()</code> extrait jusqu'à <code>indiceFin</code>, mais sans l'inclure. Par exemple, <code>chn.slice(1, 4)</code> extrait du second caractère jusqu'au quatrième caractère (caractères d'indices 1, 2 et 3).</p>
-
-<p>Par exemple, <code>chn.slice(2, -1)</code> extrait du troisième caractère jusqu'à l'avant-dernier caractère de la chaine de caractères.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Utilisation_de_slice()_pour_créer_une_nouvelle_chaîne_de_caractères">Utilisation de <code>slice()</code> pour créer une nouvelle chaîne de caractères</h3>
-
-<p>L'exemple suivant utilise <code>slice()</code> pour créer une nouvelle chaîne de caractères.</p>
-
-<pre class="brush: js">var chn1 = 'Le matin est sur nous.', // la longueur de chn1 est de 22
-<code>    </code>chn<code>2 = </code>chn<code>1.slice(1, 8),
-    </code>chn<code>3 = </code>chn<code>1.slice(3, -2),
-    </code>chn<code>4 = </code>chn<code>1.slice(13),
-    </code>chn<code>5 = </code>chn<code>1.slice(30);
-console.log(</code>chn<code>2); // SORTIE : </code>e matin<code>
-console.log(</code>chn<code>3); // SORTIE : m</code>atin est sur nou<code>
-console.log(</code>chn<code>4); // SORTIE : </code>sur nous.<code>
-console.log(</code>chn<code>5); // SORTIE : ""</code></pre>
-
-<h3 id="Utilisation_de_slice()_avec_des_indices_négatifs">Utilisation de <code>slice()</code> avec des indices négatifs</h3>
-
-<p>L'exemple suivant utilise <code>slice()</code> avec des indices négatifs.</p>
-
-<pre class="brush:js">var chn = 'Le matin est sur nous.';
-chn.slice(-3);     // retourne "us."
-chn.slice(-3, -1); // retourne "us"
-chn.slice(0, -1);  // retourne "Le matin est sur nous"
-</pre>
-
-<p>Dans l'exemple qui suit, on commence à chercher l'indice de début à partir de la fin de la chaîne avec l'argument <code>-11</code> et on utilise un indice de fin positif avec <code>16</code> :</p>
-
-<pre class="brush: js">console.log(chn.slice(-11, 16)); // "st sur"</pre>
-
-<p>On utilise ensuite un indice de début positif (la recherche est effectuée depuis le début de la chaîne) et un indice de fin négatif pour parvenir au même résultat :</p>
-
-<pre class="brush: js">console.log(chn.slice(10, -5)); // "st sur"</pre>
-
-<p>Enfin, on utilise deux indices négatifs : la position de début et la position de fin sont recherchées à parti de la fin de la chaîne :</p>
-
-<pre class="brush: js">console.log(chn.slice(-11, -5)); // "st sur"</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('ES3')}}</td>
-   <td>{{Spec2('ES3')}}</td>
-   <td>Définition initiale. Implémentée dans JavaScript 1.2.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-15.5.4.13', 'String.prototype.slice')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-string.prototype.slice', 'String.prototype.slice')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-string.prototype.slice', 'String.prototype.slice')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.String.slice")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("String.prototype.substr()")}} {{deprecated_inline}}</li>
- <li>{{jsxref("String.prototype.substring()")}}</li>
- <li>{{jsxref("Array.prototype.slice()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/string/slice/index.md b/files/fr/web/javascript/reference/global_objects/string/slice/index.md
new file mode 100644
index 0000000000..5360b4ab0e
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/string/slice/index.md
@@ -0,0 +1,106 @@
+---
+title: String.prototype.slice()
+slug: Web/JavaScript/Reference/Global_Objects/String/slice
+tags:
+  - Chaîne
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/String/slice
+original_slug: Web/JavaScript/Reference/Objets_globaux/String/slice
+---
+{{JSRef}}
+
+La méthode **`slice()`** extrait une section d'une chaine de caractères et la retourne comme une nouvelle chaine de caractères. La chaîne de caractères courante n'est pas modifiée.
+
+{{EmbedInteractiveExample("pages/js/string-slice.html")}}
+
+## Syntaxe
+
+    chn.slice(indiceDebut[, indiceFin])
+
+### Paramètres
+
+- `indiceDebut`
+  - : L'indice base 0 auquel commencer l'extraction. Si négatif, il est traité comme (`longueurSource + indiceDebut`) où `longueurSource` est la longueur de la chaine de caractères (par exemple, si `indiceDebut` est -3, il sera traité comme `longueurSource - 3`). Si `indiceDebut` est supérieur à la longueur de la chaîne, `slice()` renvoie une chaîne vide.
+- `indiceFin`
+  - : Paramètre optionnel. Un indice base 0 _avant_ lequel terminer l'extraction. Le caractère à cet indice ne sera pas inclus. Si `indiceFin` est absent, `slice()` extraira jusqu'à la fin de la chaine de caractères. Si négatif, il sera traité comme (`longueurSource + indiceFin`) où `longueurSource` est la longueur de la chaine de caractères (par exemple s'il vaut `-3`, il sera traité comme `longueurSource - 3`)
+
+### Valeur retournée
+
+Une nouvelle chaîne de caractères contenant la section extraite de la chaîne.
+
+## Description
+
+`slice()` extrait le texte d'une chaine de caractères et retourne une nouvelle chaîne de caractères. Les changements au texte dans une chaine de caractères n'affectent pas l'autre chaîne.
+
+`slice()` extrait jusqu'à `indiceFin`, mais sans l'inclure. Par exemple, `chn.slice(1, 4)` extrait du second caractère jusqu'au quatrième caractère (caractères d'indices 1, 2 et 3).
+
+Par exemple, `chn.slice(2, -1)` extrait du troisième caractère jusqu'à l'avant-dernier caractère de la chaine de caractères.
+
+## Exemples
+
+### Utilisation de `slice()` pour créer une nouvelle chaîne de caractères
+
+L'exemple suivant utilise `slice()` pour créer une nouvelle chaîne de caractères.
+
+```js
+var chn1 = 'Le matin est sur nous.', // la longueur de chn1 est de 22
+    chn2 = chn1.slice(1, 8),
+    chn3 = chn1.slice(3, -2),
+    chn4 = chn1.slice(13),
+    chn5 = chn1.slice(30);
+console.log(chn2); // SORTIE : e matin
+console.log(chn3); // SORTIE : matin est sur nou
+console.log(chn4); // SORTIE : sur nous.
+console.log(chn5); // SORTIE : ""
+```
+
+### Utilisation de `slice()` avec des indices négatifs
+
+L'exemple suivant utilise `slice()` avec des indices négatifs.
+
+```js
+var chn = 'Le matin est sur nous.';
+chn.slice(-3);     // retourne "us."
+chn.slice(-3, -1); // retourne "us"
+chn.slice(0, -1);  // retourne "Le matin est sur nous"
+```
+
+Dans l'exemple qui suit, on commence à chercher l'indice de début à partir de la fin de la chaîne avec l'argument `-11` et on utilise un indice de fin positif avec `16` :
+
+```js
+console.log(chn.slice(-11, 16)); // "st sur"
+```
+
+On utilise ensuite un indice de début positif (la recherche est effectuée depuis le début de la chaîne) et un indice de fin négatif pour parvenir au même résultat :
+
+```js
+console.log(chn.slice(10, -5)); // "st sur"
+```
+
+Enfin, on utilise deux indices négatifs : la position de début et la position de fin sont recherchées à parti de la fin de la chaîne :
+
+```js
+console.log(chn.slice(-11, -5)); // "st sur"
+```
+
+## Spécifications
+
+| Spécification                                                                                                | Statut                       | Commentaire                                           |
+| ------------------------------------------------------------------------------------------------------------ | ---------------------------- | ----------------------------------------------------- |
+| {{SpecName('ES3')}}                                                                                     | {{Spec2('ES3')}}         | Définition initiale. Implémentée dans JavaScript 1.2. |
+| {{SpecName('ES5.1', '#sec-15.5.4.13', 'String.prototype.slice')}}                     | {{Spec2('ES5.1')}}     |                                                       |
+| {{SpecName('ES6', '#sec-string.prototype.slice', 'String.prototype.slice')}}         | {{Spec2('ES6')}}         |                                                       |
+| {{SpecName('ESDraft', '#sec-string.prototype.slice', 'String.prototype.slice')}} | {{Spec2('ESDraft')}} |                                                       |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.String.slice")}}
+
+## Voir aussi
+
+- {{jsxref("String.prototype.substr()")}} {{deprecated_inline}}
+- {{jsxref("String.prototype.substring()")}}
+- {{jsxref("Array.prototype.slice()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/string/small/index.html b/files/fr/web/javascript/reference/global_objects/string/small/index.html
deleted file mode 100644
index 5fba5a585f..0000000000
--- a/files/fr/web/javascript/reference/global_objects/string/small/index.html
+++ /dev/null
@@ -1,79 +0,0 @@
----
-title: String.prototype.small()
-slug: Web/JavaScript/Reference/Global_Objects/String/small
-tags:
-  - Deprecated
-  - HTML wrapper methods
-  - JavaScript
-  - Méthode
-  - Prototype
-  - Reference
-  - String
-translation_of: Web/JavaScript/Reference/Global_Objects/String/small
-original_slug: Web/JavaScript/Reference/Objets_globaux/String/small
----
-<div>{{JSRef}}{{deprecated_header}}</div>
-
-<p>La méthode <code><strong>small()</strong></code> permet de créer un élément HTML {{HTMLElement("small")}}, ce qui permet d'afficher la chaîne de caractères dans une fonte de petite taille.</p>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>str</var>.small()</pre>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Une chaîne de caractères représentant un élément HTML {{HTMLElement("small")}}.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>La méthode <code>small()</code> encadre la chaîne courante dans une balise <code>&lt;small&gt;</code> :<br>
- <code>"&lt;small&gt;str&lt;/small&gt;</code>"</p>
-
-<h2 id="Exemple">Exemple</h2>
-
-<h3 id="Utiliser_la_méthode_small()">Utiliser la méthode <code>small()</code></h3>
-
-<p>L'exemple suivant illustre les différentes méthodes de <code>String</code> permettant de changer la taille d'une chaîne de caractères :</p>
-
-<pre class="brush:js">var worldString = "Coucou monde";
-
-console.log(worldString.small());     // &lt;small&gt;Coucou monde&lt;/small&gt;
-console.log(worldString.big());       // &lt;big&gt;Coucou monde&lt;/big&gt;
-console.log(worldString.fontsize(7)); // &lt;font size="7"&gt;Coucou monde&lt;/fontsize&gt;</pre>
-
-<p>L'objet {{domxref("HTMLElement.style", "element.style")}} permet d'utiliser l'attribut <code>style</code> de l'élément et de le manipuler de façon générique. Par exemple :</p>
-
-<pre class="brush: js">document.getElementById('IDélément').style.fontSize = '0.7em'</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-string.prototype.small', 'String.prototype.small')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td>Définition initiale. Implémentée dans JavaScript 1.0. Définie dans l'annexe B (normative) pour les fonctionnalités ECMAScript additionnelles pour les navigateurs web.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-string.prototype.small', 'String.prototype.small')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td>Définie dans l'annexe B (normative) pour les fonctionnalités ECMAScript additionnelles pour les navigateurs web.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.String.small")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("String.prototype.fontsize()")}}</li>
- <li>{{jsxref("String.prototype.big()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/string/small/index.md b/files/fr/web/javascript/reference/global_objects/string/small/index.md
new file mode 100644
index 0000000000..f3f5b9941d
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/string/small/index.md
@@ -0,0 +1,66 @@
+---
+title: String.prototype.small()
+slug: Web/JavaScript/Reference/Global_Objects/String/small
+tags:
+  - Deprecated
+  - HTML wrapper methods
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - String
+translation_of: Web/JavaScript/Reference/Global_Objects/String/small
+original_slug: Web/JavaScript/Reference/Objets_globaux/String/small
+---
+{{JSRef}}{{deprecated_header}}
+
+La méthode **`small()`** permet de créer un élément HTML {{HTMLElement("small")}}, ce qui permet d'afficher la chaîne de caractères dans une fonte de petite taille.
+
+## Syntaxe
+
+    str.small()
+
+### Valeur de retour
+
+Une chaîne de caractères représentant un élément HTML {{HTMLElement("small")}}.
+
+## Description
+
+La méthode `small()` encadre la chaîne courante dans une balise `<small>` :
+`"<small>str</small>`"
+
+## Exemple
+
+### Utiliser la méthode `small()`
+
+L'exemple suivant illustre les différentes méthodes de `String` permettant de changer la taille d'une chaîne de caractères :
+
+```js
+var worldString = "Coucou monde";
+
+console.log(worldString.small());     // <small>Coucou monde</small>
+console.log(worldString.big());       // <big>Coucou monde</big>
+console.log(worldString.fontsize(7)); // <font size="7">Coucou monde</fontsize>
+```
+
+L'objet {{domxref("HTMLElement.style", "element.style")}} permet d'utiliser l'attribut `style` de l'élément et de le manipuler de façon générique. Par exemple :
+
+```js
+document.getElementById('IDélément').style.fontSize = '0.7em'
+```
+
+## Spécifications
+
+| Spécification                                                                                                | État                         | Commentaires                                                                                                                                                           |
+| ------------------------------------------------------------------------------------------------------------ | ---------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| {{SpecName('ES6', '#sec-string.prototype.small', 'String.prototype.small')}}         | {{Spec2('ES6')}}         | Définition initiale. Implémentée dans JavaScript 1.0. Définie dans l'annexe B (normative) pour les fonctionnalités ECMAScript additionnelles pour les navigateurs web. |
+| {{SpecName('ESDraft', '#sec-string.prototype.small', 'String.prototype.small')}} | {{Spec2('ESDraft')}} | Définie dans l'annexe B (normative) pour les fonctionnalités ECMAScript additionnelles pour les navigateurs web.                                                       |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.String.small")}}
+
+## Voir aussi
+
+- {{jsxref("String.prototype.fontsize()")}}
+- {{jsxref("String.prototype.big()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/string/split/index.html b/files/fr/web/javascript/reference/global_objects/string/split/index.html
deleted file mode 100644
index 208f978a7d..0000000000
--- a/files/fr/web/javascript/reference/global_objects/string/split/index.html
+++ /dev/null
@@ -1,212 +0,0 @@
----
-title: String.prototype.split()
-slug: Web/JavaScript/Reference/Global_Objects/String/split
-tags:
-  - JavaScript
-  - Method
-  - Prototype
-  - Reference
-  - Regular Expressions
-  - String
-translation_of: Web/JavaScript/Reference/Global_Objects/String/split
-original_slug: Web/JavaScript/Reference/Objets_globaux/String/split
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <strong><code>split()</code></strong> divise une <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/String">chaîne de caractères</a> en une liste ordonnée de sous-chaînes, place ces sous-chaînes dans un tableau et retourne le tableau. La division est effectuée en recherchant un motif ; où le motif est fourni comme premier paramètre dans l'appel de la méthode.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/string-split.html", "taller")}}</div>
-
-<h2 id="syntax">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>str</var>.split([<var>separator</var>[, limit]])</pre>
-
-<h3 id="parameters">Paramètres</h3>
-
-<dl>
-  <dt><code>separator</code> Facultatif</dt>
-  <dd>
-    <p>Le motif décrivant où chaque séparation doit se produire. Le <code>separator</code> peut être une simple chaîne de caractères ou peut être une <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/RegExp">expression régulière</a>.</p>
-
-    <ul>
-      <li>Le cas le plus simple est celui où <code>separator</code> n'est qu'un seul caractère ; il est utilisé pour diviser une chaîne délimitée. Par exemple, une chaîne contenant des valeurs séparées par des tabulations (TSV) pourrait être analysée en passant un caractère de tabulation comme séparateur, comme ceci : <code>myString.split("\t")</code>.</li>
-      <li>Si <code>separator</code> contient plusieurs caractères, cette séquence de caractères entière doit être trouvée afin de diviser la chaîne.</li>
-      <li>Si <code>separator</code> est omis ou n'apparaît pas dans la chaîne <code>str</code>, le tableau retourné contient un élément constitué de la chaîne entière.</li>
-      <li>Si <code>separator</code> apparaît au début (ou à la fin) de la chaîne, il a quand même l'effet de division. Le résultat est une chaîne vide (c'est-à-dire de longueur nulle), qui apparaît à la première (ou dernière) position du tableau retourné.</li>
-      <li>Si <code>separator</code> est une chaîne vide (<code>""</code>), la chaîne <code>str</code> est convertie en un tableau de chacun de ses "caractères" UTF-16.</li>
-    </ul>
-
-    <div class="warning">
-      <p><strong>Attention :</strong> Lorsque une chaîne vide (<code>""</code>) est utilisée comme séparateur, la chaîne n'est <strong>pas</strong> divisée par des <em>caractères perçus par l'utilisateur</em> (<a href="https://unicode.org/reports/tr29/#Grapheme_Cluster_Boundaries">grappes de graphèmes</a>) ou des caractères unicodes (codepoints), mais par des unités de code UTF-16. Cela détruit les <a href="http://unicode.org/faq/utf_bom.html#utf16-2">paires de substituts</a>. Voir <a href="https://stackoverflow.com/a/34717402">« Comment obtenir une chaîne de caractères vers un tableau de caractères en JavaScript ? » sur StackOverflow</a>.</p>
-    </div>
-  </dd>
-  <dt><code>limit</code> Facultatif</dt>
-  <dd>
-    <p>Un nombre entier non négatif spécifiant une limite sur le nombre de sous-chaînes à inclure dans le tableau. S'il est fourni, il divise la chaîne de caractères à chaque occurrence du <code>separator</code> spécifié, mais s'arrête lorsque la <code>limit</code> (limite) d'entrées a été atteinte dans le tableau. Tout texte restant n'est pas du tout inclus dans le tableau.</p>
-
-    <ul>
-      <li>Le tableau peut contenir moins d'entrées que la <code>limit</code> (limite), si la fin de la chaîne de caractères est atteinte avant que la limite ne soit atteinte.</li>
-      <li>Si <code>limit</code> est paramétré sur <code>0</code>, un tableau vide <code>[]</code> est retourné.</li>
-    </ul>
-  </dd>
-</dl>
-
-<h3 id="return_value">Valeur de retour</h3>
-
-<p>Un tableau (<a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Array"><code>Array</code></a>) qui contient les fragments de la chaîne de caractères, découpée en fonction du séparateur indiqué.</p>
-
-<h2 id="description">Description</h2>
-
-<p>Lorsqu'il est trouvé, <code>separator</code> est supprimé de la chaîne de caractère, et les sous-chaînes sont retournées dans un tableau.</p>
-
-<p>Si <code>separator</code> est une expression régulière avec des parenthèses de capture, alors chaque fois que <code>separator</code> correspond, les résultats (y compris tout résultat <code>undefined</code>) des parenthèses de capture sont joints au tableau de sortie.</p>
-
-<p>Si le séparateur est un tableau, alors ce tableau est converti en une chaîne de caractères et est utilisé comme séparateur.</p>
-
-<h2 id="examples">Exemples</h2>
-
-<h3 id="using_split">Utiliser <code>split()</code></h3>
-
-<p>Lorsque la chaîne de caractères est vide, <code>split()</code> retourne un tableau contenant une chaîne de caractères vide, plutôt qu'un tableau vide. Si la chaîne et le séparateur sont tous deux des chaînes vides, un tableau vide est retourné.</p>
-
-<pre class="brush: js">const myString = ''
-const splits = myString.split()
-
-console.log(splits)
-
-// ↪ [""]</pre>
-
-<p>L'exemple suivant définit une fonction qui divise une chaîne en un tableau de chaînes selon un délimiteur spécifié. Après la coupe de la chaîne, la fonction affiche des messages indiquant la chaîne initiale (avant la coupe), le délimiteur utilisé, le nombre d'éléments dans le tableau, et les éléments du tableau retourné.</p>
-
-<pre class="brush: js">function splitString(stringToSplit, separator) {
-  var arrayOfStrings = stringToSplit.split(separator);
-
-  console.log(`La chaine d'origine est : ${stringToSplit}`);
-  console.log(`Le délimiteur est : ${separator}`);
-  console.log(`Le tableau comporte ${arrayOfStrings.length} elements : `, arrayOfStrings.join(' / '));
-}
-
-var tempestString = "Oh brave new world that has such people in it.";
-var monthString = "Jan,Feb,Mar,Apr,May,Jun,Jul,Aug,Sep,Oct,Nov,Dec";
-
-var espace = " ";
-var virgule = ",";
-
-splitString(tempestString, espace);
-splitString(tempestString);
-splitString(monthString, virgule);
-</pre>
-
-<p>Cet exemple produira la sortie suivante :</p>
-
-<pre class="brush: js">La chaine d'origine est : "Oh brave new world that has such people in it."
-Le délimiteur est : " "
-Le tableau comporte 10 elements : Oh / brave / new / world / that / has / such / people / in / it. /
-
-La chaine d'origine est : "Oh brave new world that has such people in it."
-Le délimiteur est : "undefined"
-Le tableau comporte 1 elements : Oh brave new world that has such people in it. /
-
-La chaine d'origine est : "Jan,Feb,Mar,Apr,May,Jun,Jul,Aug,Sep,Oct,Nov,Dec"
-Le délimiteur est : ","
-Le tableau comporte 12 elements : Jan / Feb / Mar / Apr / May / Jun / Jul / Aug / Sep / Oct / Nov / Dec /
-</pre>
-
-<h3 id="removing_spaces_from_a_string">Supprimer les espaces d'une chaîne</h3>
-
-<p>Dans l'exemple suivant, <code>split</code> recherche zéro ou plusieurs espaces suivis d'un point-virgule, lui-même suivi par zéro ou plus espaces. Lorsque ce « motif » est trouvé, cela supprime celui-ci de la chaîne. <code>nameList</code> est le tableau retourné du résultat de <code>split</code>.</p>
-
-<pre class="brush: js">var names = "Harry Trump ;Fred Barney; Helen Rigby ; Bill Abel ;Chris Hand ";
-
-console.log(names);
-
-var re = /\s*(;|$)\s*/;
-var nameList = names.split(re);
-
-console.log(nameList);</pre>
-
-<p>Ceci affichera deux lignes dans la console ; la première ligne correspondant à la chaîne d'origine, et la seconde au tableau de résultats.</p>
-
-<pre class="brush: js">Harry Trump ;Fred Barney; Helen Rigby ; Bill Abel ;Chris Hand
-["Harry Trump","Fred Barney","Helen Rigby","Bill Abel","Chris Hand"]</pre>
-
-<h3 id="returning_a_limited_number_of_splits">Retourner un nombre limité de sous-chaînes</h3>
-
-<p>Dans l'exemple suivant, <code>split()</code> recherche des espaces dans une chaîne et retourne les 3 premières sous-chaînes qui correspondent.</p>
-
-<pre class="brush: js">var myString = "Hello World. How are you doing?";
-var splits = myString.split(" ", 3);
-
-console.log(splits);</pre>
-
-<p>Ce script affichera :</p>
-
-<pre class="brush: js">["Hello", "World.", "How"]</pre>
-
-<h3 id="splitting_with_a_regexp_to_include_parts_of_the_separator_in_the_result">Découper une expression rationnelle - Parenthèses capturantes</h3>
-
-<p>Si le paramètre <code>séparateur</code> est une expression rationnelle qui contient des parenthèses de capture, les résultats seront retournés dans le tableau.</p>
-
-<pre class="brush: js">var myString = "Hello 1 word. Sentence number 2.";
-var splits = myString.split(/(\d)/);
-
-console.log(splits);</pre>
-
-<p>Ce script affichera :</p>
-
-<pre class="brush: js">[ "Hello ", "1", " word. Sentence number ", "2", "." ]</pre>
-
-<div class="note">
-  <p><strong>Note :</strong> <code>\d</code> correspond à la <a href="/fr/docs/Web/JavaScript/Guide/Regular_Expressions/Character_Classes">classe de caractères</a> pour les chiffres compris entre 0 et 9.</p>
-</div>
-
-<h3 id="reversing_a_string_using_split">Inverser une chaîne en utilisant <code>split()</code></h3>
-
-<div class="warning">
-  <p><strong>Attention :</strong> Ce n'est pas une façon robuste d'inverser une chaîne :</p>
-
-  <pre class="brush: js example-bad">const str = 'asdfghjkl'
-const strReverse = str.split('').reverse().join('')
-// 'lkjhgfdsa'
-
-// split() retourne un tableau sur lequel reverse() et join() peuvent être appliqués.</pre>
-
-  <p>Cela ne fonctionne pas si la chaîne de caractères contient des groupes de graphèmes, même en utilisant une division sensible aux unicodes. (Utilisez, par exemple, <a href="https://github.com/mathiasbynens/esrever">esrever</a> à la place).</p>
-
-  <pre class="brush: js example-bad">const str = 'résumé'
-const strReverse = str.split(/(?:)/u).reverse().join('')
-// =&gt; "́emuśer"
-</pre>
-
-  <p><strong>Bonus :</strong> utiliser l'opérateur <a href="/fr/docs/Web/JavaScript/Reference/Operators"><code>===</code></a> pour tester si la chaîne d'origine est un palindrome.</p>
-</div>
-
-<h2 id="specifications">Spécifications</h2>
-
-<table class="standard-table">
-  <thead>
-    <tr>
-      <th scope="col">Spécification</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td>{{SpecName('ESDraft', '#sec-string.prototype.split', 'String.prototype.split')}}
-      </td>
-    </tr>
-  </tbody>
-</table>
-
-<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.String.split")}}</p>
-
-<h2 id="see_also">Voir aussi</h2>
-
-<ul>
-  <li><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/String/charAt"><code>String.prototype.charAt()</code></a></li>
-  <li><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/String/indexOf"><code>String.prototype.indexOf()</code></a></li>
-  <li><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/String/lastIndexOf"><code>String.prototype.lastIndexOf()</code></a></li>
-  <li><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/join"><code>Array.prototype.join()</code></a></li>
-  <li><a href="/fr/docs/Web/JavaScript/Guide/Regular_Expressions">Expressions régulières</a></li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/string/split/index.md b/files/fr/web/javascript/reference/global_objects/string/split/index.md
new file mode 100644
index 0000000000..c076dff412
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/string/split/index.md
@@ -0,0 +1,206 @@
+---
+title: String.prototype.split()
+slug: Web/JavaScript/Reference/Global_Objects/String/split
+tags:
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+  - Regular Expressions
+  - String
+translation_of: Web/JavaScript/Reference/Global_Objects/String/split
+original_slug: Web/JavaScript/Reference/Objets_globaux/String/split
+---
+{{JSRef}}
+
+La méthode **`split()`** divise une [chaîne de caractères](/fr/docs/Web/JavaScript/Reference/Global_Objects/String) en une liste ordonnée de sous-chaînes, place ces sous-chaînes dans un tableau et retourne le tableau. La division est effectuée en recherchant un motif ; où le motif est fourni comme premier paramètre dans l'appel de la méthode.
+
+{{EmbedInteractiveExample("pages/js/string-split.html", "taller")}}
+
+## Syntaxe
+
+    str.split([separator[, limit]])
+
+### Paramètres
+
+- `separator` Facultatif
+
+  - : Le motif décrivant où chaque séparation doit se produire. Le `separator` peut être une simple chaîne de caractères ou peut être une [expression régulière](/fr/docs/Web/JavaScript/Reference/Global_Objects/RegExp).
+
+    - Le cas le plus simple est celui où `separator` n'est qu'un seul caractère ; il est utilisé pour diviser une chaîne délimitée. Par exemple, une chaîne contenant des valeurs séparées par des tabulations (TSV) pourrait être analysée en passant un caractère de tabulation comme séparateur, comme ceci : `myString.split("\t")`.
+    - Si `separator` contient plusieurs caractères, cette séquence de caractères entière doit être trouvée afin de diviser la chaîne.
+    - Si `separator` est omis ou n'apparaît pas dans la chaîne `str`, le tableau retourné contient un élément constitué de la chaîne entière.
+    - Si `separator` apparaît au début (ou à la fin) de la chaîne, il a quand même l'effet de division. Le résultat est une chaîne vide (c'est-à-dire de longueur nulle), qui apparaît à la première (ou dernière) position du tableau retourné.
+    - Si `separator` est une chaîne vide (`""`), la chaîne `str` est convertie en un tableau de chacun de ses "caractères" UTF-16.
+
+    > **Attention :** Lorsque une chaîne vide (`""`) est utilisée comme séparateur, la chaîne n'est **pas** divisée par des _caractères perçus par l'utilisateur_ ([grappes de graphèmes](https://unicode.org/reports/tr29/#Grapheme_Cluster_Boundaries)) ou des caractères unicodes (codepoints), mais par des unités de code UTF-16. Cela détruit les [paires de substituts](http://unicode.org/faq/utf_bom.html#utf16-2). Voir [« Comment obtenir une chaîne de caractères vers un tableau de caractères en JavaScript ? » sur StackOverflow](https://stackoverflow.com/a/34717402).
+
+- `limit` Facultatif
+
+  - : Un nombre entier non négatif spécifiant une limite sur le nombre de sous-chaînes à inclure dans le tableau. S'il est fourni, il divise la chaîne de caractères à chaque occurrence du `separator` spécifié, mais s'arrête lorsque la `limit` (limite) d'entrées a été atteinte dans le tableau. Tout texte restant n'est pas du tout inclus dans le tableau.
+
+    - Le tableau peut contenir moins d'entrées que la `limit` (limite), si la fin de la chaîne de caractères est atteinte avant que la limite ne soit atteinte.
+    - Si `limit` est paramétré sur `0`, un tableau vide `[]` est retourné.
+
+### Valeur de retour
+
+Un tableau ([`Array`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array)) qui contient les fragments de la chaîne de caractères, découpée en fonction du séparateur indiqué.
+
+## Description
+
+Lorsqu'il est trouvé, `separator` est supprimé de la chaîne de caractère, et les sous-chaînes sont retournées dans un tableau.
+
+Si `separator` est une expression régulière avec des parenthèses de capture, alors chaque fois que `separator` correspond, les résultats (y compris tout résultat `undefined`) des parenthèses de capture sont joints au tableau de sortie.
+
+Si le séparateur est un tableau, alors ce tableau est converti en une chaîne de caractères et est utilisé comme séparateur.
+
+## Exemples
+
+### Utiliser `split()`
+
+Lorsque la chaîne de caractères est vide, `split()` retourne un tableau contenant une chaîne de caractères vide, plutôt qu'un tableau vide. Si la chaîne et le séparateur sont tous deux des chaînes vides, un tableau vide est retourné.
+
+```js
+const myString = ''
+const splits = myString.split()
+
+console.log(splits)
+
+// ↪ [""]
+```
+
+L'exemple suivant définit une fonction qui divise une chaîne en un tableau de chaînes selon un délimiteur spécifié. Après la coupe de la chaîne, la fonction affiche des messages indiquant la chaîne initiale (avant la coupe), le délimiteur utilisé, le nombre d'éléments dans le tableau, et les éléments du tableau retourné.
+
+```js
+function splitString(stringToSplit, separator) {
+  var arrayOfStrings = stringToSplit.split(separator);
+
+  console.log(`La chaine d'origine est : ${stringToSplit}`);
+  console.log(`Le délimiteur est : ${separator}`);
+  console.log(`Le tableau comporte ${arrayOfStrings.length} elements : `, arrayOfStrings.join(' / '));
+}
+
+var tempestString = "Oh brave new world that has such people in it.";
+var monthString = "Jan,Feb,Mar,Apr,May,Jun,Jul,Aug,Sep,Oct,Nov,Dec";
+
+var espace = " ";
+var virgule = ",";
+
+splitString(tempestString, espace);
+splitString(tempestString);
+splitString(monthString, virgule);
+```
+
+Cet exemple produira la sortie suivante :
+
+```js
+La chaine d'origine est : "Oh brave new world that has such people in it."
+Le délimiteur est : " "
+Le tableau comporte 10 elements : Oh / brave / new / world / that / has / such / people / in / it. /
+
+La chaine d'origine est : "Oh brave new world that has such people in it."
+Le délimiteur est : "undefined"
+Le tableau comporte 1 elements : Oh brave new world that has such people in it. /
+
+La chaine d'origine est : "Jan,Feb,Mar,Apr,May,Jun,Jul,Aug,Sep,Oct,Nov,Dec"
+Le délimiteur est : ","
+Le tableau comporte 12 elements : Jan / Feb / Mar / Apr / May / Jun / Jul / Aug / Sep / Oct / Nov / Dec /
+```
+
+### Supprimer les espaces d'une chaîne
+
+Dans l'exemple suivant, `split` recherche zéro ou plusieurs espaces suivis d'un point-virgule, lui-même suivi par zéro ou plus espaces. Lorsque ce « motif » est trouvé, cela supprime celui-ci de la chaîne. `nameList` est le tableau retourné du résultat de `split`.
+
+```js
+var names = "Harry Trump ;Fred Barney; Helen Rigby ; Bill Abel ;Chris Hand ";
+
+console.log(names);
+
+var re = /\s*(;|$)\s*/;
+var nameList = names.split(re);
+
+console.log(nameList);
+```
+
+Ceci affichera deux lignes dans la console ; la première ligne correspondant à la chaîne d'origine, et la seconde au tableau de résultats.
+
+```js
+Harry Trump ;Fred Barney; Helen Rigby ; Bill Abel ;Chris Hand
+["Harry Trump","Fred Barney","Helen Rigby","Bill Abel","Chris Hand"]
+```
+
+### Retourner un nombre limité de sous-chaînes
+
+Dans l'exemple suivant, `split()` recherche des espaces dans une chaîne et retourne les 3 premières sous-chaînes qui correspondent.
+
+```js
+var myString = "Hello World. How are you doing?";
+var splits = myString.split(" ", 3);
+
+console.log(splits);
+```
+
+Ce script affichera :
+
+```js
+["Hello", "World.", "How"]
+```
+
+### Découper une expression rationnelle - Parenthèses capturantes
+
+Si le paramètre `séparateur` est une expression rationnelle qui contient des parenthèses de capture, les résultats seront retournés dans le tableau.
+
+```js
+var myString = "Hello 1 word. Sentence number 2.";
+var splits = myString.split(/(\d)/);
+
+console.log(splits);
+```
+
+Ce script affichera :
+
+```js
+[ "Hello ", "1", " word. Sentence number ", "2", "." ]
+```
+
+> **Note :** `\d` correspond à la [classe de caractères](/fr/docs/Web/JavaScript/Guide/Regular_Expressions/Character_Classes) pour les chiffres compris entre 0 et 9.
+
+### Inverser une chaîne en utilisant `split()`
+
+> **Attention :** Ce n'est pas une façon robuste d'inverser une chaîne :
+>
+> ```js example-bad
+> const str = 'asdfghjkl'
+> const strReverse = str.split('').reverse().join('')
+> // 'lkjhgfdsa'
+>
+> // split() retourne un tableau sur lequel reverse() et join() peuvent être appliqués.
+> ```
+>
+> Cela ne fonctionne pas si la chaîne de caractères contient des groupes de graphèmes, même en utilisant une division sensible aux unicodes. (Utilisez, par exemple, [esrever](https://github.com/mathiasbynens/esrever) à la place).
+>
+> ```js example-bad
+> const str = 'résumé'
+> const strReverse = str.split(/(?:)/u).reverse().join('')
+> // => "́emuśer"
+> ```
+>
+> **Bonus :** utiliser l'opérateur [`===`](/fr/docs/Web/JavaScript/Reference/Operators) pour tester si la chaîne d'origine est un palindrome.
+
+## Spécifications
+
+| Spécification                                                                                                |
+| ------------------------------------------------------------------------------------------------------------ |
+| {{SpecName('ESDraft', '#sec-string.prototype.split', 'String.prototype.split')}} |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.String.split")}}
+
+## Voir aussi
+
+- [`String.prototype.charAt()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/String/charAt)
+- [`String.prototype.indexOf()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/String/indexOf)
+- [`String.prototype.lastIndexOf()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/String/lastIndexOf)
+- [`Array.prototype.join()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/join)
+- [Expressions régulières](/fr/docs/Web/JavaScript/Guide/Regular_Expressions)
diff --git a/files/fr/web/javascript/reference/global_objects/string/startswith/index.html b/files/fr/web/javascript/reference/global_objects/string/startswith/index.html
deleted file mode 100644
index 6216df303c..0000000000
--- a/files/fr/web/javascript/reference/global_objects/string/startswith/index.html
+++ /dev/null
@@ -1,84 +0,0 @@
----
-title: String.prototype.startsWith()
-slug: Web/JavaScript/Reference/Global_Objects/String/startsWith
-tags:
-  - ECMAScript6
-  - JavaScript
-  - Méthode
-  - Prototype
-  - Reference
-  - String
-  - polyfill
-translation_of: Web/JavaScript/Reference/Global_Objects/String/startsWith
-original_slug: Web/JavaScript/Reference/Objets_globaux/String/startsWith
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <code><strong>startsWith()</strong></code> renvoie un booléen indiquant si la chaine de caractères commence par la deuxième chaine de caractères fournie en argument.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/string-startswith.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>str</var>.startsWith(<var>chaîneRecherchée</var> [, <var>position</var>]);</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>chaîneRecherchée</code></dt>
- <dd>Les caractères à rechercher au début de la chaine de caractères.</dd>
- <dt><code>position</code> {{optional_inline}}</dt>
- <dd>La position à laquelle commencer la recherche de <code><var>chaîneRecherchée</var></code> ; par défaut 0.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p><code>true</code> si la chaîne de caractères commence avec la sous-chaîne en argument, <code>false</code> sinon</p>
-
-<h2 id="Description">Description</h2>
-
-<p>Cette méthode permet de savoir si une chaine de caractères commence avec une autre chaine de caractères (comme pour les autres méthodes fonctionnant avec les chaînes de caractères, cette méthode est sensible à la casse).</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<pre class="brush:js;">var str = "Être, ou ne pas être : telle est la question.";
-
-console.log(str.startsWith("Être"));         // true
-console.log(str.startsWith("pas être"));     // false
-console.log(str.startsWith("pas être", 12)); // true</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-string.prototype.startswith', 'String.prototype.startsWith')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-string.prototype.startswith', 'String.prototype.startsWith')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.String.startsWith")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("String.prototype.endsWith()")}}</li>
- <li>{{jsxref("String.prototype.includes()")}}</li>
- <li>{{jsxref("String.prototype.indexOf()")}}</li>
- <li>{{jsxref("String.prototype.lastIndexOf()")}}</li>
- <li><a href="https://github.com/mathiasbynens/String.prototype.startsWith">Prothèse (<em>polyfill</em>) de Mathias Bynens</a></li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/string/startswith/index.md b/files/fr/web/javascript/reference/global_objects/string/startswith/index.md
new file mode 100644
index 0000000000..7c6803b778
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/string/startswith/index.md
@@ -0,0 +1,67 @@
+---
+title: String.prototype.startsWith()
+slug: Web/JavaScript/Reference/Global_Objects/String/startsWith
+tags:
+  - ECMAScript6
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - String
+  - polyfill
+translation_of: Web/JavaScript/Reference/Global_Objects/String/startsWith
+original_slug: Web/JavaScript/Reference/Objets_globaux/String/startsWith
+---
+{{JSRef}}
+
+La méthode **`startsWith()`** renvoie un booléen indiquant si la chaine de caractères commence par la deuxième chaine de caractères fournie en argument.
+
+{{EmbedInteractiveExample("pages/js/string-startswith.html")}}
+
+## Syntaxe
+
+    str.startsWith(chaîneRecherchée [, position]);
+
+### Paramètres
+
+- `chaîneRecherchée`
+  - : Les caractères à rechercher au début de la chaine de caractères.
+- `position` {{optional_inline}}
+  - : La position à laquelle commencer la recherche de `chaîneRecherchée` ; par défaut 0.
+
+### Valeur de retour
+
+`true` si la chaîne de caractères commence avec la sous-chaîne en argument, `false` sinon
+
+## Description
+
+Cette méthode permet de savoir si une chaine de caractères commence avec une autre chaine de caractères (comme pour les autres méthodes fonctionnant avec les chaînes de caractères, cette méthode est sensible à la casse).
+
+## Exemples
+
+```js
+var str = "Être, ou ne pas être : telle est la question.";
+
+console.log(str.startsWith("Être"));         // true
+console.log(str.startsWith("pas être"));     // false
+console.log(str.startsWith("pas être", 12)); // true
+```
+
+## Spécifications
+
+| Spécification                                                                                                            | État                         | Commentaires         |
+| ------------------------------------------------------------------------------------------------------------------------ | ---------------------------- | -------------------- |
+| {{SpecName('ES2015', '#sec-string.prototype.startswith', 'String.prototype.startsWith')}} | {{Spec2('ES2015')}}     | Définition initiale. |
+| {{SpecName('ESDraft', '#sec-string.prototype.startswith', 'String.prototype.startsWith')}} | {{Spec2('ESDraft')}} |                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.String.startsWith")}}
+
+## Voir aussi
+
+- {{jsxref("String.prototype.endsWith()")}}
+- {{jsxref("String.prototype.includes()")}}
+- {{jsxref("String.prototype.indexOf()")}}
+- {{jsxref("String.prototype.lastIndexOf()")}}
+- [Prothèse (_polyfill_) de Mathias Bynens](https://github.com/mathiasbynens/String.prototype.startsWith)
diff --git a/files/fr/web/javascript/reference/global_objects/string/strike/index.html b/files/fr/web/javascript/reference/global_objects/string/strike/index.html
deleted file mode 100644
index 9dc8d4aa4a..0000000000
--- a/files/fr/web/javascript/reference/global_objects/string/strike/index.html
+++ /dev/null
@@ -1,82 +0,0 @@
----
-title: String.prototype.strike()
-slug: Web/JavaScript/Reference/Global_Objects/String/strike
-tags:
-  - Deprecated
-  - HTML wrapper methods
-  - JavaScript
-  - Méthode
-  - Prototype
-  - Reference
-  - String
-translation_of: Web/JavaScript/Reference/Global_Objects/String/strike
-original_slug: Web/JavaScript/Reference/Objets_globaux/String/strike
----
-<div>{{JSRef}}{{deprecated_header}}</div>
-
-<p>La méthode <code><strong>strike()</strong></code> permet de créer un élément HTML {{HTMLElement("strike")}} qui permet d'afficher la chaîne comme un texte barré.</p>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>str</var>.strike()</pre>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Une chaîne de caractères représentant un élément HTML {{HTMLElement("strike")}}.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>Cette méthode encadre la chaîne de caractères dans une balise <code>&lt;strike&gt;</code> :<br>
- <code>"&lt;strike&gt;str&lt;/strike&gt;</code>"</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<p>Les méthodes suivantes peuvent être utilisées pour modifier le formatage d'une chaîne de caractères :</p>
-
-<pre class="brush:js">var worldString = "Coucou monde";
-
-console.log(worldString.blink());
-console.log(worldString.bold());
-console.log(worldString.italics());
-console.log(worldString.strike());</pre>
-
-<p>Cela produira le code HTML suivant dans la console :</p>
-
-<pre class="brush:html">&lt;blink&gt;Coucou monde&lt;/blink&gt;
-&lt;b&gt;Coucou monde&lt;/b&gt;
-&lt;i&gt;Coucou monde&lt;/i&gt;
-&lt;strike&gt;Coucou monde&lt;/strike&gt;</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-string.prototype.strike', 'String.prototype.strike')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td>Définition initiale. Implémentée dans JavaScript 1.0. Définie dans l'annexe B (normative) pour les fonctionnalités ECMAScript additionnelles pour les navigateurs web.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-string.prototype.strike', 'String.prototype.strike')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td>Définie dans l'annexe B (normative) pour les fonctionnalités ECMAScript additionnelles pour les navigateurs web.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.String.strike")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("String.prototype.blink()")}}</li>
- <li>{{jsxref("String.prototype.bold()")}}</li>
- <li>{{jsxref("String.prototype.italics()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/string/strike/index.md b/files/fr/web/javascript/reference/global_objects/string/strike/index.md
new file mode 100644
index 0000000000..22a9cb1804
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/string/strike/index.md
@@ -0,0 +1,69 @@
+---
+title: String.prototype.strike()
+slug: Web/JavaScript/Reference/Global_Objects/String/strike
+tags:
+  - Deprecated
+  - HTML wrapper methods
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - String
+translation_of: Web/JavaScript/Reference/Global_Objects/String/strike
+original_slug: Web/JavaScript/Reference/Objets_globaux/String/strike
+---
+{{JSRef}}{{deprecated_header}}
+
+La méthode **`strike()`** permet de créer un élément HTML {{HTMLElement("strike")}} qui permet d'afficher la chaîne comme un texte barré.
+
+## Syntaxe
+
+    str.strike()
+
+### Valeur de retour
+
+Une chaîne de caractères représentant un élément HTML {{HTMLElement("strike")}}.
+
+## Description
+
+Cette méthode encadre la chaîne de caractères dans une balise `<strike>` :
+`"<strike>str</strike>`"
+
+## Exemples
+
+Les méthodes suivantes peuvent être utilisées pour modifier le formatage d'une chaîne de caractères :
+
+```js
+var worldString = "Coucou monde";
+
+console.log(worldString.blink());
+console.log(worldString.bold());
+console.log(worldString.italics());
+console.log(worldString.strike());
+```
+
+Cela produira le code HTML suivant dans la console :
+
+```html
+<blink>Coucou monde</blink>
+<b>Coucou monde</b>
+<i>Coucou monde</i>
+<strike>Coucou monde</strike>
+```
+
+## Spécifications
+
+| Spécification                                                                                                | État                         | Commentaires                                                                                                                                                           |
+| ------------------------------------------------------------------------------------------------------------ | ---------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| {{SpecName('ES6', '#sec-string.prototype.strike', 'String.prototype.strike')}}     | {{Spec2('ES6')}}         | Définition initiale. Implémentée dans JavaScript 1.0. Définie dans l'annexe B (normative) pour les fonctionnalités ECMAScript additionnelles pour les navigateurs web. |
+| {{SpecName('ESDraft', '#sec-string.prototype.strike', 'String.prototype.strike')}} | {{Spec2('ESDraft')}} | Définie dans l'annexe B (normative) pour les fonctionnalités ECMAScript additionnelles pour les navigateurs web.                                                       |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.String.strike")}}
+
+## Voir aussi
+
+- {{jsxref("String.prototype.blink()")}}
+- {{jsxref("String.prototype.bold()")}}
+- {{jsxref("String.prototype.italics()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/string/sub/index.html b/files/fr/web/javascript/reference/global_objects/string/sub/index.html
deleted file mode 100644
index 2f53665a08..0000000000
--- a/files/fr/web/javascript/reference/global_objects/string/sub/index.html
+++ /dev/null
@@ -1,75 +0,0 @@
----
-title: String.prototype.sub()
-slug: Web/JavaScript/Reference/Global_Objects/String/sub
-tags:
-  - Deprecated
-  - HTML wrapper methods
-  - JavaScript
-  - Méthode
-  - Prototype
-  - Reference
-  - String
-translation_of: Web/JavaScript/Reference/Global_Objects/String/sub
-original_slug: Web/JavaScript/Reference/Objets_globaux/String/sub
----
-<div>{{JSRef}}{{deprecated_header}}</div>
-
-<p>La méthode <code><strong>sub()</strong></code> crée un élément HTML {{HTMLElement("sub")}} qui entraîne l'affichage de la chaîne en indice.</p>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>str</var>.sub()</pre>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Une chaîne de caractères représentant un élément HTML {{HTMLElement("sub")}}.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>La méthode <code>sub</code> encapsule une chaîne dans une balise <code>&lt;sub&gt;</code> :<br>
- <code>"&lt;sub&gt;str&lt;/sub&gt;</code>".</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<p>L'exemple suivant utilise les méthodes <code>sub()</code> et {{jsxref("String.prototype.sup()", "sup()")}} pour mettre en forme une chaîne :</p>
-
-<pre class="brush: js">var superText = "exposant";
-var subText = "indice";
-
-console.log("Ceci illustre l'affichage d'un texte en " + superText.sup() + ".");
-// "Ceci illustre l'affichage d'un texte en &lt;sup&gt;expostant&lt;/sup&gt;
-
-console.log("Ceci illustre l'affichage d'un texte en " + subText.sub() + ".");
-// "Ceci illustre l'affichage d'un texte en &lt;sub&gt;indice&lt;/sub&gt;</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-string.prototype.sub', 'String.prototype.sub')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td>Définition initiale. Implementée avec JavaScript 1.0. Définie dans l'annexe B (normative) des fonctionnalités ECMAScript additionnelles pour les navigateurs web.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-string.prototype.sub', 'String.prototype.sub')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td>Définie dans l'annexe B (normative) des fonctionnalités ECMAScript additionnelles pour les navigateurs web.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.String.sub")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("String.prototype.sup()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/string/sub/index.md b/files/fr/web/javascript/reference/global_objects/string/sub/index.md
new file mode 100644
index 0000000000..6e407df677
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/string/sub/index.md
@@ -0,0 +1,60 @@
+---
+title: String.prototype.sub()
+slug: Web/JavaScript/Reference/Global_Objects/String/sub
+tags:
+  - Deprecated
+  - HTML wrapper methods
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - String
+translation_of: Web/JavaScript/Reference/Global_Objects/String/sub
+original_slug: Web/JavaScript/Reference/Objets_globaux/String/sub
+---
+{{JSRef}}{{deprecated_header}}
+
+La méthode **`sub()`** crée un élément HTML {{HTMLElement("sub")}} qui entraîne l'affichage de la chaîne en indice.
+
+## Syntaxe
+
+    str.sub()
+
+### Valeur de retour
+
+Une chaîne de caractères représentant un élément HTML {{HTMLElement("sub")}}.
+
+## Description
+
+La méthode `sub` encapsule une chaîne dans une balise `<sub>` :
+`"<sub>str</sub>`".
+
+## Exemples
+
+L'exemple suivant utilise les méthodes `sub()` et {{jsxref("String.prototype.sup()", "sup()")}} pour mettre en forme une chaîne :
+
+```js
+var superText = "exposant";
+var subText = "indice";
+
+console.log("Ceci illustre l'affichage d'un texte en " + superText.sup() + ".");
+// "Ceci illustre l'affichage d'un texte en <sup>expostant</sup>
+
+console.log("Ceci illustre l'affichage d'un texte en " + subText.sub() + ".");
+// "Ceci illustre l'affichage d'un texte en <sub>indice</sub>
+```
+
+## Spécifications
+
+| Spécification                                                                                        | État                         | Commentaire                                                                                                                                                       |
+| ---------------------------------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| {{SpecName('ES6', '#sec-string.prototype.sub', 'String.prototype.sub')}}     | {{Spec2('ES6')}}         | Définition initiale. Implementée avec JavaScript 1.0. Définie dans l'annexe B (normative) des fonctionnalités ECMAScript additionnelles pour les navigateurs web. |
+| {{SpecName('ESDraft', '#sec-string.prototype.sub', 'String.prototype.sub')}} | {{Spec2('ESDraft')}} | Définie dans l'annexe B (normative) des fonctionnalités ECMAScript additionnelles pour les navigateurs web.                                                       |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.String.sub")}}
+
+## Voir aussi
+
+- {{jsxref("String.prototype.sup()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/string/substr/index.html b/files/fr/web/javascript/reference/global_objects/string/substr/index.html
deleted file mode 100644
index 9ee8253861..0000000000
--- a/files/fr/web/javascript/reference/global_objects/string/substr/index.html
+++ /dev/null
@@ -1,136 +0,0 @@
----
-title: String.prototype.substr()
-slug: Web/JavaScript/Reference/Global_Objects/String/substr
-tags:
-  - Déprécié
-  - JavaScript
-  - Méthode
-  - Prototype
-  - Reference
-  - String
-translation_of: Web/JavaScript/Reference/Global_Objects/String/substr
-original_slug: Web/JavaScript/Reference/Objets_globaux/String/substr
----
-<div>{{JSRef}}</div>
-
-<div class="warning"><p><strong>Attention :</strong> Bien que <code>String.prototype.substr(…)</code> ne soit pas strictement obsolète (au sens où elle n'a pas été retirée des standards), elle est définie au sein de <a href="https://www.ecma-international.org/ecma-262/9.0/index.html#sec-additional-ecmascript-features-for-web-browsers">l'Annexe B</a> du standard ECMA-262 qui définit l'ensemble des fonctionnalités historiques qui doivent être évitées autant que possible. On utilisera la méthode {{jsxref("String.prototype.substring()")}} à la place.</p></div>
-
-<p>La méthode <strong><code>substr()</code></strong> retourne la partie d'une chaîne de caractères comprise entre l'indice de départ et un certain nombre de caractères après celui-ci.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/string-substr.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><em>chn</em>.substr(<var>début</var>[, <var>longueur</var>])</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>début</code></dt>
- <dd>L'indice du premier caractère à inclure dans la sous-chaîne retournée.</dd>
- <dt><code>longueur</code></dt>
- <dd>Optionnel. Le nombre de caractères à extraire.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Une nouvelle chaîne contenant la partie indiquée de la chaîne donnée.</p>
-
-<h2 id="Description">Description</h2>
-
-<p><code>substr()</code> extrait <code>longueur</code> caractères d'une <code>string</code>, en comptant à partir de l'indice <code>début</code>.</p>
-
-<p>Si <code>début</code> est un nombre positif, l'indice commence à compter du début de la chaîne. Sa valeur est limitée à <code>chn.length</code>.</p>
-
-<p>Si <code>début</code> est un nombre négatif, l'indice commence à compter de la fin de la chaîne. Sa valeur est limitée à <code>-chn.length</code>.</p>
-
-<p>Note : dans JScript de Microsoft, les valeurs négatives de l'argument <code>début</code> ne sont pas considérées comme faisant référence à la fin de la chaîne.</p>
-
-<p>Si <code>longueur</code> est omise, <code>substr()</code> extrait les caractères jusqu'à la fin de la chaîne.</p>
-
-<p>Si <code>longueur</code> est {{jsxref("undefined")}}, <code>substr()</code> extrait les caractères jusqu'à la fin de la chaîne.</p>
-
-<p>Si <code>longueur</code> est négative, elle est traitée comme 0.</p>
-
-<p>Pour <code>début</code> comme pour <code>longueur</code>, NaN est traité comme 0.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<pre class="brush: js">var uneChaine = 'Mozilla';
-
-<code>console.log(</code>uneChaine<code>.substr(0, 1));   // 'M'
-console.log(</code>uneChaine<code>.substr(1, 0));   // ''
-console.log(</code>uneChaine<code>.substr(-1, 1));  // 'a'
-console.log(</code>uneChaine<code>.substr(1, -1));  // ''
-console.log(</code>uneChaine<code>.substr(-3));     // 'lla'
-console.log(</code>uneChaine<code>.substr(1));      // 'ozilla'
-console.log(</code>uneChaine<code>.substr(-20, 2)); // 'Mo'
-console.log(</code>uneChaine<code>.substr(20, 2));  // ''</code></pre>
-
-<h2 id="Prothèse_d'émulation_(polyfill)">Prothèse d'émulation (<em>polyfill</em>)</h2>
-
-<p>JScript de Microsoft ne supporte pas les valeurs négatives pour l'indice de début. Pour utiliser cette fonctionnalité, vous pouvez utiliser le code suivant :</p>
-
-<pre class="brush: js">// N'appliquer que lorsque la fonction est incomplète
-if ('ab'.substr(-1) != 'b') {
-  /**
-   *  Obtenir la sous-chaîne d'une chaîne
-   *  @param  {entier}  début     où démarrer la sous-chaîne
-   *  @param  {entier}  longueur  combien de caractères à retourner
-   *  @return {chaîne}
-   */
-  String.prototype.substr = function(substr) {
-    return function(début, longueur) {
-      <code>// Appel de la méthode originale
-      return </code>substr<code>.call(this,</code>
-        // Si on a un début négatif, calculer combien il vaut à partir du début de la chaîne
-        // Ajuster le paramètre pour une valeur négative
-<code>        début &lt; 0 ? this.length + début : début,
-        longueur)
-    </code>}
-  }(String.prototype.substr);
-}
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES3')}}</td>
-   <td>{{Spec2('ES3')}}</td>
-   <td>Définie dans la Compatibility Annex B (informative). Implémentée dans JavaScript 1.0.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-B.2.3', 'String.prototype.substr')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td>Définie dans la Compatibility Annex B (informative).</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-string.prototype.substr', 'String.prototype.substr')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td>Définie dans l'Annex B (normative) pour les Additional ECMAScript Features for Web Browsers.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-string.prototype.substr', 'String.prototype.substr')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td>Définie dans l'Annex B (normative) pour les Additional ECMAScript Features for Web Browsers</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.String.substr")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("String.prototype.slice()")}}</li>
- <li>{{jsxref("String.prototype.substring()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/string/substr/index.md b/files/fr/web/javascript/reference/global_objects/string/substr/index.md
new file mode 100644
index 0000000000..00eabdbffd
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/string/substr/index.md
@@ -0,0 +1,112 @@
+---
+title: String.prototype.substr()
+slug: Web/JavaScript/Reference/Global_Objects/String/substr
+tags:
+  - Déprécié
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - String
+translation_of: Web/JavaScript/Reference/Global_Objects/String/substr
+original_slug: Web/JavaScript/Reference/Objets_globaux/String/substr
+---
+{{JSRef}}
+
+> **Attention :** Bien que `String.prototype.substr(…)` ne soit pas strictement obsolète (au sens où elle n'a pas été retirée des standards), elle est définie au sein de [l'Annexe B](https://www.ecma-international.org/ecma-262/9.0/index.html#sec-additional-ecmascript-features-for-web-browsers) du standard ECMA-262 qui définit l'ensemble des fonctionnalités historiques qui doivent être évitées autant que possible. On utilisera la méthode {{jsxref("String.prototype.substring()")}} à la place.
+
+La méthode **`substr()`** retourne la partie d'une chaîne de caractères comprise entre l'indice de départ et un certain nombre de caractères après celui-ci.
+
+{{EmbedInteractiveExample("pages/js/string-substr.html")}}
+
+## Syntaxe
+
+    chn.substr(début[, longueur])
+
+### Paramètres
+
+- `début`
+  - : L'indice du premier caractère à inclure dans la sous-chaîne retournée.
+- `longueur`
+  - : Optionnel. Le nombre de caractères à extraire.
+
+### Valeur de retour
+
+Une nouvelle chaîne contenant la partie indiquée de la chaîne donnée.
+
+## Description
+
+`substr()` extrait `longueur` caractères d'une `string`, en comptant à partir de l'indice `début`.
+
+Si `début` est un nombre positif, l'indice commence à compter du début de la chaîne. Sa valeur est limitée à `chn.length`.
+
+Si `début` est un nombre négatif, l'indice commence à compter de la fin de la chaîne. Sa valeur est limitée à `-chn.length`.
+
+Note : dans JScript de Microsoft, les valeurs négatives de l'argument `début` ne sont pas considérées comme faisant référence à la fin de la chaîne.
+
+Si `longueur` est omise, `substr()` extrait les caractères jusqu'à la fin de la chaîne.
+
+Si `longueur` est {{jsxref("undefined")}}, `substr()` extrait les caractères jusqu'à la fin de la chaîne.
+
+Si `longueur` est négative, elle est traitée comme 0.
+
+Pour `début` comme pour `longueur`, NaN est traité comme 0.
+
+## Exemples
+
+```js
+var uneChaine = 'Mozilla';
+
+console.log(uneChaine.substr(0, 1));   // 'M'
+console.log(uneChaine.substr(1, 0));   // ''
+console.log(uneChaine.substr(-1, 1));  // 'a'
+console.log(uneChaine.substr(1, -1));  // ''
+console.log(uneChaine.substr(-3));     // 'lla'
+console.log(uneChaine.substr(1));      // 'ozilla'
+console.log(uneChaine.substr(-20, 2)); // 'Mo'
+console.log(uneChaine.substr(20, 2));  // ''
+```
+
+## Prothèse d'émulation (_polyfill_)
+
+JScript de Microsoft ne supporte pas les valeurs négatives pour l'indice de début. Pour utiliser cette fonctionnalité, vous pouvez utiliser le code suivant :
+
+```js
+// N'appliquer que lorsque la fonction est incomplète
+if ('ab'.substr(-1) != 'b') {
+  /**
+   *  Obtenir la sous-chaîne d'une chaîne
+   *  @param  {entier}  début     où démarrer la sous-chaîne
+   *  @param  {entier}  longueur  combien de caractères à retourner
+   *  @return {chaîne}
+   */
+  String.prototype.substr = function(substr) {
+    return function(début, longueur) {
+      // Appel de la méthode originale
+      return substr.call(this,
+        // Si on a un début négatif, calculer combien il vaut à partir du début de la chaîne
+        // Ajuster le paramètre pour une valeur négative
+        début < 0 ? this.length + début : début,
+        longueur)
+    }
+  }(String.prototype.substr);
+}
+```
+
+## Spécifications
+
+| Spécification                                                                                                | État                         | Commentaires                                                                                 |
+| ------------------------------------------------------------------------------------------------------------ | ---------------------------- | -------------------------------------------------------------------------------------------- |
+| {{SpecName('ES3')}}                                                                                     | {{Spec2('ES3')}}         | Définie dans la Compatibility Annex B (informative). Implémentée dans JavaScript 1.0.        |
+| {{SpecName('ES5.1', '#sec-B.2.3', 'String.prototype.substr')}}                         | {{Spec2('ES5.1')}}     | Définie dans la Compatibility Annex B (informative).                                         |
+| {{SpecName('ES6', '#sec-string.prototype.substr', 'String.prototype.substr')}}     | {{Spec2('ES6')}}         | Définie dans l'Annex B (normative) pour les Additional ECMAScript Features for Web Browsers. |
+| {{SpecName('ESDraft', '#sec-string.prototype.substr', 'String.prototype.substr')}} | {{Spec2('ESDraft')}} | Définie dans l'Annex B (normative) pour les Additional ECMAScript Features for Web Browsers  |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.String.substr")}}
+
+## Voir aussi
+
+- {{jsxref("String.prototype.slice()")}}
+- {{jsxref("String.prototype.substring()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/string/substring/index.html b/files/fr/web/javascript/reference/global_objects/string/substring/index.html
deleted file mode 100644
index df6dc3157c..0000000000
--- a/files/fr/web/javascript/reference/global_objects/string/substring/index.html
+++ /dev/null
@@ -1,177 +0,0 @@
----
-title: String.prototype.substring()
-slug: Web/JavaScript/Reference/Global_Objects/String/substring
-tags:
-  - JavaScript
-  - Méthode
-  - Prototype
-  - Reference
-  - String
-translation_of: Web/JavaScript/Reference/Global_Objects/String/substring
-original_slug: Web/JavaScript/Reference/Objets_globaux/String/substring
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <code><strong>substring()</strong></code> retourne une sous-chaîne de la chaîne courante, entre un indice de début et un indice de fin.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/string-substring.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>str</var>.substring(<var>indiceA</var>[, <var>indiceB</var>])</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>indiceA</code></dt>
- <dd>Un entier compris entre 0 et la longueur de la chaîne.</dd>
- <dt><code>indiceB</code></dt>
- <dd>Paramètre optionnel : un entier compris entre 0 et la longueur de la chaine.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Une nouvelle chaîne de caractères qui correspond à la section souhaitée de la chaîne appelante.</p>
-
-<h2 id="Description">Description</h2>
-
-<p><code>substring</code> extrait des caractères de la chaîne courante à partir de <code>indiceA</code> jusqu'à <code>indiceB</code> (non compris). On a notamment :</p>
-
-<ul>
- <li>Si <code>indiceA</code> est égal à <code>indiceB</code>, <code>substring</code> retournera une chaîne vide.</li>
- <li>Si <code>indiceB</code> est omis, <code>substring</code> effectuera l'extraction des caractères jusqu'à la fin de la chaîne.</li>
- <li>Si l'un des deux arguments est négatif ou vaut {{jsxref("NaN")}}, il sera traité comme 0.</li>
- <li>Si l'un des deux arguments est plus grand que <code>str.length</code>, il sera traité comme <code>str.length</code>.</li>
-</ul>
-
-<p>Si <code>indiceA</code> est supérieur à <code>indiceB</code>, la fonction <code>substring()</code> intervertira ces deux valeurs afin de les traiter comme si elles avaient été passées dans le bon ordre. Par exemple : <code><var>str</var>.substring(1, 0) == <var>str</var>.substring(0, 1)</code>.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Utiliser_substring()">Utiliser <code>substring()</code></h3>
-
-<p>Les exemples suivants utilisent la méthode <code>substring()</code> pour extraire et afficher des caractères à partir de la chaine "<code>Mozilla</code>" :</p>
-
-<pre class="brush:js">var uneChaîne = "Mozilla";
-
-// Affiche "Moz"
-console.log(uneChaîne.substring(0,3));
-console.log(uneChaîne.substring(3,0));
-
-// Affiche "lla"
-console.log(uneChaîne.substring(4,7));
-console.log(uneChaîne.substring(4));
-console.log(uneChaîne.substring(7,4));
-
-// Affiche "Mozill"
-console.log(uneChaîne.substring(0,6));
-
-// Affiche "Mozilla"
-console.log(uneChaîne.substring(0,7));
-console.log(uneChaîne.substring(0,10));
-</pre>
-
-<h3 id="Remplacer_une_sous-chaîne_dans_une_chaîne">Remplacer une sous-chaîne dans une chaîne</h3>
-
-<p>L'exemple suivant remplace une partie d'une chaine. Elle remplace à la fois les caractères individuels et les sous-chaines. La fonction appelée à la fin de cet exemple transforme la chaine "<code>Brave New World</code>" en "<code>Brave New Web</code>".</p>
-
-<pre class="brush:js">function replaceString(oldS, newS, fullS) {
-// On remplace oldS avec newS dans fullS
-  for (var i = 0; i &lt; fullS.length; i++) {
-    if (fullS.substring(i, i + oldS.length) == oldS) {
-     fullS = fullS.substring(0, i) + newS + fullS.substring(i + oldS.length, fullS.length);
-    }
-  }
-  return fullS;
-}
-
-replaceString("World", "Web", "Brave New World");</pre>
-
-<p>Attention : ceci peut résulter en une boucle infinie si <code>oldS</code> est elle-même une sous-chaine de <code>newS</code> -- par exemple, si on essaie de remplacer "World" par "OtherWorld". Une meilleure solution serait de remplacer les chaines de cette manière :</p>
-
-<pre class="brush:js">function replaceString(oldS, newS,fullS){
-  return fullS.split(oldS).join(newS);
-}</pre>
-
-<p>Le code ci-dessus sert d'exemple pour les opérations sur les sous-chaines. S'il est nécessaire de remplacer des sous-chaines, la plupart du temps il faudrait préférer l'utilisation de {{jsxref("String.prototype.replace()")}}.</p>
-
-<h3 id="Différence_entre_substring()_et_substr()">Différence entre <code>substring()</code> et <code>substr()</code></h3>
-
-<p>Il existe une légère différence entre les méthodes <code>substring()</code> et {{jsxref("String.substr", "substr()")}}. Les deux ne doivent pas être confondues.</p>
-
-<p>Les arguments de la méthode <code>substring()</code> représentent les indices de début et de fin sur la chaîne. Pour <code>substr()</code>, les arguments représentent l'indice de début et le nombre de caractères à utiliser pour la chaîne résultante.</p>
-
-<pre class="brush: js">var texte = "Mozilla";
-console.log(texte.substring(2,5)); // =&gt; "zil"
-console.log(texte.substr(2,3)); // =&gt; "zil"
-</pre>
-
-<h3 id="Différences_entre_substring()_et_slice()">Différences entre <code>substring()</code> et <code>slice()</code></h3>
-
-<p>Les méthodes <code>substring()</code> et {{jsxref("String.slice", "slice()")}} sont très proches mais certaines différences les distinguent, notamment la façon de gérer les arguments négatifs.</p>
-
-<p>La méthode <code>substring()</code> échangera les deux arguments si <code>indiceA</code> est supérieur à <code>indiceB</code> et renverra donc une chaîne de caractères. La méthode {{jsxref("String.slice", "slice()")}} n'échange pas les arguments et renvoie donc une chaîne vide si le premier est supérieur au second :</p>
-
-<pre class="brush: js">var text = 'Mozilla';
-console.log(text.substring(5, 2)); // =&gt; "zil"
-console.log(text.slice(5, 2));     // =&gt; ""
-</pre>
-
-<p>Si l'un ou l'autre des arguments sont négatifs ou valent <code>NaN</code>, la méthode <code>substring()</code> les traitera comme s'ils valaient <code>0</code>.</p>
-
-<pre class="brush: js">console.log(text.substring(-5, 2)); // =&gt; "Mo"
-console.log(text.substring(-5, -2)); // =&gt; ""
-</pre>
-
-<p><code>slice()</code> traite également <code>NaN</code> comme <code>0</code>, mais parcourt la chaîne à partir de la fin lorsque des arguments négatifs sont utilisés.</p>
-
-<pre class="brush: js">console.log(text.slice(-5, 2)); // =&gt; ""
-console.log(text.slice(-5, -2)); // =&gt; "zil"
-</pre>
-
-<p>Pour plus d'exemples sur l'utilisation d'arguments négatifs, voir la page {{jsxref("String.slice", "slice()")}}.</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('ES1')}}</td>
-   <td>{{Spec2('ES1')}}</td>
-   <td>Implémentée avec JavaScript 1.0.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-15.5.4.15', 'String.prototype.substring')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-string.prototype.substring', 'String.prototype.substring')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-string.prototype.substring', 'String.prototype.substring')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.String.substring")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("String.prototype.substr()")}} {{deprecated_inline}}</li>
- <li>{{jsxref("String.prototype.slice()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/string/substring/index.md b/files/fr/web/javascript/reference/global_objects/string/substring/index.md
new file mode 100644
index 0000000000..5fbc2431f5
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/string/substring/index.md
@@ -0,0 +1,155 @@
+---
+title: String.prototype.substring()
+slug: Web/JavaScript/Reference/Global_Objects/String/substring
+tags:
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - String
+translation_of: Web/JavaScript/Reference/Global_Objects/String/substring
+original_slug: Web/JavaScript/Reference/Objets_globaux/String/substring
+---
+{{JSRef}}
+
+La méthode **`substring()`** retourne une sous-chaîne de la chaîne courante, entre un indice de début et un indice de fin.
+
+{{EmbedInteractiveExample("pages/js/string-substring.html")}}
+
+## Syntaxe
+
+    str.substring(indiceA[, indiceB])
+
+### Paramètres
+
+- `indiceA`
+  - : Un entier compris entre 0 et la longueur de la chaîne.
+- `indiceB`
+  - : Paramètre optionnel : un entier compris entre 0 et la longueur de la chaine.
+
+### Valeur de retour
+
+Une nouvelle chaîne de caractères qui correspond à la section souhaitée de la chaîne appelante.
+
+## Description
+
+`substring` extrait des caractères de la chaîne courante à partir de `indiceA` jusqu'à `indiceB` (non compris). On a notamment :
+
+- Si `indiceA` est égal à `indiceB`, `substring` retournera une chaîne vide.
+- Si `indiceB` est omis, `substring` effectuera l'extraction des caractères jusqu'à la fin de la chaîne.
+- Si l'un des deux arguments est négatif ou vaut {{jsxref("NaN")}}, il sera traité comme 0.
+- Si l'un des deux arguments est plus grand que `str.length`, il sera traité comme `str.length`.
+
+Si `indiceA` est supérieur à `indiceB`, la fonction `substring()` intervertira ces deux valeurs afin de les traiter comme si elles avaient été passées dans le bon ordre. Par exemple : `str.substring(1, 0) == str.substring(0, 1)`.
+
+## Exemples
+
+### Utiliser `substring()`
+
+Les exemples suivants utilisent la méthode `substring()` pour extraire et afficher des caractères à partir de la chaine "`Mozilla`" :
+
+```js
+var uneChaîne = "Mozilla";
+
+// Affiche "Moz"
+console.log(uneChaîne.substring(0,3));
+console.log(uneChaîne.substring(3,0));
+
+// Affiche "lla"
+console.log(uneChaîne.substring(4,7));
+console.log(uneChaîne.substring(4));
+console.log(uneChaîne.substring(7,4));
+
+// Affiche "Mozill"
+console.log(uneChaîne.substring(0,6));
+
+// Affiche "Mozilla"
+console.log(uneChaîne.substring(0,7));
+console.log(uneChaîne.substring(0,10));
+```
+
+### Remplacer une sous-chaîne dans une chaîne
+
+L'exemple suivant remplace une partie d'une chaine. Elle remplace à la fois les caractères individuels et les sous-chaines. La fonction appelée à la fin de cet exemple transforme la chaine "`Brave New World`" en "`Brave New Web`".
+
+```js
+function replaceString(oldS, newS, fullS) {
+// On remplace oldS avec newS dans fullS
+  for (var i = 0; i < fullS.length; i++) {
+    if (fullS.substring(i, i + oldS.length) == oldS) {
+     fullS = fullS.substring(0, i) + newS + fullS.substring(i + oldS.length, fullS.length);
+    }
+  }
+  return fullS;
+}
+
+replaceString("World", "Web", "Brave New World");
+```
+
+Attention : ceci peut résulter en une boucle infinie si `oldS` est elle-même une sous-chaine de `newS` -- par exemple, si on essaie de remplacer "World" par "OtherWorld". Une meilleure solution serait de remplacer les chaines de cette manière :
+
+```js
+function replaceString(oldS, newS,fullS){
+  return fullS.split(oldS).join(newS);
+}
+```
+
+Le code ci-dessus sert d'exemple pour les opérations sur les sous-chaines. S'il est nécessaire de remplacer des sous-chaines, la plupart du temps il faudrait préférer l'utilisation de {{jsxref("String.prototype.replace()")}}.
+
+### Différence entre `substring()` et `substr()`
+
+Il existe une légère différence entre les méthodes `substring()` et {{jsxref("String.substr", "substr()")}}. Les deux ne doivent pas être confondues.
+
+Les arguments de la méthode `substring()` représentent les indices de début et de fin sur la chaîne. Pour `substr()`, les arguments représentent l'indice de début et le nombre de caractères à utiliser pour la chaîne résultante.
+
+```js
+var texte = "Mozilla";
+console.log(texte.substring(2,5)); // => "zil"
+console.log(texte.substr(2,3)); // => "zil"
+```
+
+### Différences entre `substring()` et `slice()`
+
+Les méthodes `substring()` et {{jsxref("String.slice", "slice()")}} sont très proches mais certaines différences les distinguent, notamment la façon de gérer les arguments négatifs.
+
+La méthode `substring()` échangera les deux arguments si `indiceA` est supérieur à `indiceB` et renverra donc une chaîne de caractères. La méthode {{jsxref("String.slice", "slice()")}} n'échange pas les arguments et renvoie donc une chaîne vide si le premier est supérieur au second :
+
+```js
+var text = 'Mozilla';
+console.log(text.substring(5, 2)); // => "zil"
+console.log(text.slice(5, 2));     // => ""
+```
+
+Si l'un ou l'autre des arguments sont négatifs ou valent `NaN`, la méthode `substring()` les traitera comme s'ils valaient `0`.
+
+```js
+console.log(text.substring(-5, 2)); // => "Mo"
+console.log(text.substring(-5, -2)); // => ""
+```
+
+`slice()` traite également `NaN` comme `0`, mais parcourt la chaîne à partir de la fin lorsque des arguments négatifs sont utilisés.
+
+```js
+console.log(text.slice(-5, 2)); // => ""
+console.log(text.slice(-5, -2)); // => "zil"
+```
+
+Pour plus d'exemples sur l'utilisation d'arguments négatifs, voir la page {{jsxref("String.slice", "slice()")}}.
+
+## Spécifications
+
+| Spécification                                                                                                        | État                         | Commentaires                     |
+| -------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------------------- |
+| {{SpecName('ES1')}}                                                                                             | {{Spec2('ES1')}}         | Implémentée avec JavaScript 1.0. |
+| {{SpecName('ES5.1', '#sec-15.5.4.15', 'String.prototype.substring')}}                         | {{Spec2('ES5.1')}}     |                                  |
+| {{SpecName('ES6', '#sec-string.prototype.substring', 'String.prototype.substring')}}     | {{Spec2('ES6')}}         |                                  |
+| {{SpecName('ESDraft', '#sec-string.prototype.substring', 'String.prototype.substring')}} | {{Spec2('ESDraft')}} |                                  |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.String.substring")}}
+
+## Voir aussi
+
+- {{jsxref("String.prototype.substr()")}} {{deprecated_inline}}
+- {{jsxref("String.prototype.slice()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/string/sup/index.html b/files/fr/web/javascript/reference/global_objects/string/sup/index.html
deleted file mode 100644
index a7806d7dbe..0000000000
--- a/files/fr/web/javascript/reference/global_objects/string/sup/index.html
+++ /dev/null
@@ -1,75 +0,0 @@
----
-title: String.prototype.sup()
-slug: Web/JavaScript/Reference/Global_Objects/String/sup
-tags:
-  - Deprecated
-  - HTML wrapper methods
-  - JavaScript
-  - Méthode
-  - Prototype
-  - Reference
-  - String
-translation_of: Web/JavaScript/Reference/Global_Objects/String/sup
-original_slug: Web/JavaScript/Reference/Objets_globaux/String/sup
----
-<div>{{JSRef}} {{deprecated_header}}</div>
-
-<p>La méthode <code><strong>sup()</strong></code> crée un élément HTML {{HTMLElement("sup")}} qui entraîne l'affichage de la chaîne en exposant.</p>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>str</var>.sup()</pre>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Une chaîne de caractères représentant un élément HTML {{HTMLElement("sup")}}.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>La méthode <code>sup</code> encapsule une chaîne dans une balise <code>&lt;sup&gt;</code> :<br>
- <code>"&lt;sup&gt;str&lt;/sup&gt;</code>".</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<p>L'exemple suivant utilise les méthodes {{jsxref("String.prototype.sub()", "sub()")}} et <code>sup</code> pour mettre en forme une chaîne :</p>
-
-<pre class="brush: js">var superText = "exposant";
-var subText = "indice";
-
-console.log("Ceci illustre l'affichage d'un texte en " + superText.sup() + ".");
-// Ceci illustre l'affichage d'un texte en &lt;sup&gt;exposant&lt;/sup&gt;.
-console.log("Ceci illustre l'affichage d'un texte en " + subText.sub() + ".");
-Ceci illustre l'affichage d'un texte en &lt;sub&gt;indice&lt;/sub&gt;.
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-string.prototype.sup', 'String.prototype.sup')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td>Définition initiale. Implémentée avec JavaScript 1.0. Définie dans l'annexe B (normative) pour les fonctionnalités ECMAScript additionnelles des navigateurs web.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-string.prototype.sup', 'String.prototype.sup')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td>Définition initiale. Implémentée avec JavaScript 1.0. Définie dans l'annexe B (normative) pour les fonctionnalités ECMAScript additionnelles des navigateurs web.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.String.sup")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("String.prototype.sub()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/string/sup/index.md b/files/fr/web/javascript/reference/global_objects/string/sup/index.md
new file mode 100644
index 0000000000..c8fd418ecf
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/string/sup/index.md
@@ -0,0 +1,59 @@
+---
+title: String.prototype.sup()
+slug: Web/JavaScript/Reference/Global_Objects/String/sup
+tags:
+  - Deprecated
+  - HTML wrapper methods
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - String
+translation_of: Web/JavaScript/Reference/Global_Objects/String/sup
+original_slug: Web/JavaScript/Reference/Objets_globaux/String/sup
+---
+{{JSRef}} {{deprecated_header}}
+
+La méthode **`sup()`** crée un élément HTML {{HTMLElement("sup")}} qui entraîne l'affichage de la chaîne en exposant.
+
+## Syntaxe
+
+    str.sup()
+
+### Valeur de retour
+
+Une chaîne de caractères représentant un élément HTML {{HTMLElement("sup")}}.
+
+## Description
+
+La méthode `sup` encapsule une chaîne dans une balise `<sup>` :
+`"<sup>str</sup>`".
+
+## Exemples
+
+L'exemple suivant utilise les méthodes {{jsxref("String.prototype.sub()", "sub()")}} et `sup` pour mettre en forme une chaîne :
+
+```js
+var superText = "exposant";
+var subText = "indice";
+
+console.log("Ceci illustre l'affichage d'un texte en " + superText.sup() + ".");
+// Ceci illustre l'affichage d'un texte en <sup>exposant</sup>.
+console.log("Ceci illustre l'affichage d'un texte en " + subText.sub() + ".");
+Ceci illustre l'affichage d'un texte en <sub>indice</sub>.
+```
+
+## Spécifications
+
+| Spécification                                                                                        | État                         | Commentaires                                                                                                                                                      |
+| ---------------------------------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| {{SpecName('ES6', '#sec-string.prototype.sup', 'String.prototype.sup')}}     | {{Spec2('ES6')}}         | Définition initiale. Implémentée avec JavaScript 1.0. Définie dans l'annexe B (normative) pour les fonctionnalités ECMAScript additionnelles des navigateurs web. |
+| {{SpecName('ESDraft', '#sec-string.prototype.sup', 'String.prototype.sup')}} | {{Spec2('ESDraft')}} | Définition initiale. Implémentée avec JavaScript 1.0. Définie dans l'annexe B (normative) pour les fonctionnalités ECMAScript additionnelles des navigateurs web. |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.String.sup")}}
+
+## Voir aussi
+
+- {{jsxref("String.prototype.sub()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/string/tolocalelowercase/index.html b/files/fr/web/javascript/reference/global_objects/string/tolocalelowercase/index.html
deleted file mode 100644
index caf1c9c0c8..0000000000
--- a/files/fr/web/javascript/reference/global_objects/string/tolocalelowercase/index.html
+++ /dev/null
@@ -1,106 +0,0 @@
----
-title: String.prototype.toLocaleLowerCase()
-slug: Web/JavaScript/Reference/Global_Objects/String/toLocaleLowerCase
-tags:
-  - Internationalisation
-  - JavaScript
-  - Méthode
-  - Prototype
-  - Reference
-  - String
-  - i18n
-translation_of: Web/JavaScript/Reference/Global_Objects/String/toLocaleLowerCase
-original_slug: Web/JavaScript/Reference/Objets_globaux/String/toLocaleLowerCase
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <code><strong>toLocaleLowerCase()</strong></code> renvoie la chaîne de caractères qui appelle la méthode en une chaîne de caractères représentées en minuscules, en tenant compte des correspondances de caractères propres aux différentes locales.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/string-tolocalelowercase.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>str</var>.toLocaleLowerCase()
-<var>str</var>.toLocaleLowerCase(locale)
-<var>str</var>.toLocaleLowerCase([locale, locale, ...])</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>locale</code> {{optional_inline}}</dt>
- <dd>Ce paramètre indique la locale dans laquelle convertir la chaîne en minuscules en utilisant les correspondances de cette locale. Si plusieurs locales sont fournies au sein d'un tableau, c'est la meilleure locale disponible qui est utilisée. La locale par défaut est celle utilisée par le système hôte.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Une nouvelle chaîne de caractères obtenue à partir de la chaîne appelante, convertie en minuscules en tenant compte de la locale.</p>
-
-<h3 id="Exceptions">Exceptions</h3>
-
-<p>Cette méthode peut lever les exceptions suivantes :</p>
-
-<ul>
- <li>{{jsxref("RangeError")}} ("invalid language tag: xx_yy") si l'argument <code>locale</code> ne correspond pas à une balise de langue valide.</li>
- <li>{{jsxref("TypeError")}} ("invalid element in locales argument") si un des éléments du tableau passé en argument n'est pas une chaîne de caractères.</li>
-</ul>
-
-<h2 id="Description">Description</h2>
-
-<p>La méthode <code>toLocaleLowerCase()</code> renvoie la valeur de la chaîne de caractères, convertie en minuscules selon les correspondances propres à la la locale. <code>toLocaleLowerCase()</code> ne modifie pas la chaîne d'origine. Dans la plupart des cas, cette méthode produira le même résultat que {{jsxref("String.toLowerCase", "toLowerCase()")}}. En revanche, pour certaines locales, par exemple les locales turques dont les correspondances entre les caractères ne sont pas celles par défaut, prévues par Unicode, cette méthode pourra produire un résultat différent.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<pre class="brush:js">"ALPHABET".toLocaleLowerCase(); // "alphabet"
-
-"\u0130".toLocaleLowerCase("tr") === "i"; // true
-"\u0130".toLocaleLowerCase("en-US") === "i"; // false
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES3')}}</td>
-   <td>{{Spec2('ES3')}}</td>
-   <td>Définition initiale. Implémentée avec JavaScript 1.2.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-15.5.4.17', 'String.prototype.toLocaleLowerCase')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-string.prototype.tolocalelowercase', 'String.prototype.toLocaleLowerCase')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-string.prototype.tolocalelowercase', 'String.prototype.toLocaleLowerCase')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES Int Draft', '#sup-string.prototype.tolocalelowercase', 'String.prototype.toLocaleLowerCase')}}</td>
-   <td>{{Spec2('ES Int Draft')}}</td>
-   <td>Ajout du paramètre <code>locale</code> dans ES Intl 2017</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.String.toLocaleLowerCase")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("String.prototype.toLocaleUpperCase()")}}</li>
- <li>{{jsxref("String.prototype.toLowerCase()")}}</li>
- <li>{{jsxref("String.prototype.toUpperCase()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/string/tolocalelowercase/index.md b/files/fr/web/javascript/reference/global_objects/string/tolocalelowercase/index.md
new file mode 100644
index 0000000000..9eccd4d59d
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/string/tolocalelowercase/index.md
@@ -0,0 +1,74 @@
+---
+title: String.prototype.toLocaleLowerCase()
+slug: Web/JavaScript/Reference/Global_Objects/String/toLocaleLowerCase
+tags:
+  - Internationalisation
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - String
+  - i18n
+translation_of: Web/JavaScript/Reference/Global_Objects/String/toLocaleLowerCase
+original_slug: Web/JavaScript/Reference/Objets_globaux/String/toLocaleLowerCase
+---
+{{JSRef}}
+
+La méthode **`toLocaleLowerCase()`** renvoie la chaîne de caractères qui appelle la méthode en une chaîne de caractères représentées en minuscules, en tenant compte des correspondances de caractères propres aux différentes locales.
+
+{{EmbedInteractiveExample("pages/js/string-tolocalelowercase.html")}}
+
+## Syntaxe
+
+    str.toLocaleLowerCase()
+    str.toLocaleLowerCase(locale)
+    str.toLocaleLowerCase([locale, locale, ...])
+
+### Paramètres
+
+- `locale` {{optional_inline}}
+  - : Ce paramètre indique la locale dans laquelle convertir la chaîne en minuscules en utilisant les correspondances de cette locale. Si plusieurs locales sont fournies au sein d'un tableau, c'est la meilleure locale disponible qui est utilisée. La locale par défaut est celle utilisée par le système hôte.
+
+### Valeur de retour
+
+Une nouvelle chaîne de caractères obtenue à partir de la chaîne appelante, convertie en minuscules en tenant compte de la locale.
+
+### Exceptions
+
+Cette méthode peut lever les exceptions suivantes :
+
+- {{jsxref("RangeError")}} ("invalid language tag: xx_yy") si l'argument `locale` ne correspond pas à une balise de langue valide.
+- {{jsxref("TypeError")}} ("invalid element in locales argument") si un des éléments du tableau passé en argument n'est pas une chaîne de caractères.
+
+## Description
+
+La méthode `toLocaleLowerCase()` renvoie la valeur de la chaîne de caractères, convertie en minuscules selon les correspondances propres à la la locale. `toLocaleLowerCase()` ne modifie pas la chaîne d'origine. Dans la plupart des cas, cette méthode produira le même résultat que {{jsxref("String.toLowerCase", "toLowerCase()")}}. En revanche, pour certaines locales, par exemple les locales turques dont les correspondances entre les caractères ne sont pas celles par défaut, prévues par Unicode, cette méthode pourra produire un résultat différent.
+
+## Exemples
+
+```js
+"ALPHABET".toLocaleLowerCase(); // "alphabet"
+
+"\u0130".toLocaleLowerCase("tr") === "i"; // true
+"\u0130".toLocaleLowerCase("en-US") === "i"; // false
+```
+
+## Spécifications
+
+| Spécification                                                                                                                                    | État                             | Commentaires                                          |
+| ------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ----------------------------------------------------- |
+| {{SpecName('ES3')}}                                                                                                                         | {{Spec2('ES3')}}             | Définition initiale. Implémentée avec JavaScript 1.2. |
+| {{SpecName('ES5.1', '#sec-15.5.4.17', 'String.prototype.toLocaleLowerCase')}}                                         | {{Spec2('ES5.1')}}         |                                                       |
+| {{SpecName('ES6', '#sec-string.prototype.tolocalelowercase', 'String.prototype.toLocaleLowerCase')}}             | {{Spec2('ES6')}}             |                                                       |
+| {{SpecName('ESDraft', '#sec-string.prototype.tolocalelowercase', 'String.prototype.toLocaleLowerCase')}}     | {{Spec2('ESDraft')}}     |                                                       |
+| {{SpecName('ES Int Draft', '#sup-string.prototype.tolocalelowercase', 'String.prototype.toLocaleLowerCase')}} | {{Spec2('ES Int Draft')}} | Ajout du paramètre `locale` dans ES Intl 2017         |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.String.toLocaleLowerCase")}}
+
+## Voir aussi
+
+- {{jsxref("String.prototype.toLocaleUpperCase()")}}
+- {{jsxref("String.prototype.toLowerCase()")}}
+- {{jsxref("String.prototype.toUpperCase()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/string/tolocaleuppercase/index.html b/files/fr/web/javascript/reference/global_objects/string/tolocaleuppercase/index.html
deleted file mode 100644
index 0116ac288d..0000000000
--- a/files/fr/web/javascript/reference/global_objects/string/tolocaleuppercase/index.html
+++ /dev/null
@@ -1,107 +0,0 @@
----
-title: String.prototype.toLocaleUpperCase()
-slug: Web/JavaScript/Reference/Global_Objects/String/toLocaleUpperCase
-tags:
-  - Internationalisation
-  - JavaScript
-  - Méthode
-  - Prototype
-  - Reference
-  - String
-  - i18n
-translation_of: Web/JavaScript/Reference/Global_Objects/String/toLocaleUpperCase
-original_slug: Web/JavaScript/Reference/Objets_globaux/String/toLocaleUpperCase
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <code><strong>toLocaleUpperCase()</strong></code> renvoie la chaîne de caractères qui appelle la méthode en caractères majuscules, selon les correspondances de caractères propres aux différentes locales.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/string-tolocaleuppercase.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>str</var>.toLocaleUpperCase()
-<var>str</var>.toLocaleUpperCase(locale)
-<var>str</var>.toLocaleUpperCase([locale, locale, ...])</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>locale</code> {{optional_inline}}</dt>
- <dd>Le paramètre <code>locale</code> indique la locale dans laquelle convertir la chaîne en majuscules afin que la méthode utilise les correspondances de cette locale. Si plusieurs locales sont fournies au sein d'un tableau, la meilleure locale disponible est alors utilisée. La locale par défaut est celle utilisée par le système hôte.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Une nouvelle chaîne de caractères obtenue en transformant la chaîne de caractères appelante en majuscules et en tenant compte de la locale.</p>
-
-<h3 id="Exceptions">Exceptions</h3>
-
-<p>Cette méthode peut lever les exceptions suivantes :</p>
-
-<ul>
- <li>{{jsxref("RangeError")}} ("invalid language tag: xx_yy") si l'argument <code>locale</code> ne correspond pas à une balise de langue valide.</li>
- <li>{{jsxref("TypeError")}} ("invalid element in locales arguments") si un élément du tableau de locales passé en argument n'est pas une chaîne de caractères.</li>
-</ul>
-
-<h2 id="Description">Description</h2>
-
-<p>La méthode <code>toLocaleUpperCase()</code> renvoie la valeur de la chaîne de caractères, convertie en majuscules selon les correspondances propres à la la locale. <code>toLocaleUpperCase()</code> ne modifie pas la chaîne d'origine. Dans la plupart des cas, cette méthode produira le même résultat que {{jsxref("String.toUpperCase", "toUpperCase()")}}. En revanche, pour certaines locales, par exemple les locales turques dont les correspondances entre les caractères ne sont pas celles par défaut prévue par Unicode, cette méthode pourra produire un résultat différent.</p>
-
-<p>On notera également que la conversion ne repose pas sur une correspondance un à un de chaque caractère. En effet, certains caractères produisent deux (voire plus) caractères lorsqu'ils sont convertis en majuscules. Ainsi, la longueur de la chaîne passée en majuscules peut être différente de la longueur de la chaîne originale. Cela implique que la transformation n'est pas stable, autrement dit, l'instruction suivante pourra renvoyer <code>false</code> : <code>x.toLocaleLowerCase() === x.toLocaleUpperCase().toLocaleLowerCase()</code>.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<pre class="brush: js">"alphabet".toLocaleUpperCase();       // "ALPHABET"
-'Gesäß'.toLocaleUpperCase();          // 'GESÄSS'
-"i\u0307".toLocaleUpperCase("lt-LT"); // "I"
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES3')}}</td>
-   <td>{{Spec2('ES3')}}</td>
-   <td>Définition initiale. Implémentée avec JavaScript 1.2.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-15.5.4.19', 'String.prototype.toLocaleUpperCase')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-string.prototype.tolocaleuppercase', 'String.prototype.toLocaleUpperCase')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-string.prototype.tolocaleuppercase', 'String.prototype.toLocaleUpperCase')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES Int Draft', '#sup-string.prototype.tolocaleuppercase', 'String.prototype.toLocaleUpperCase')}}</td>
-   <td>{{Spec2('ES Int Draft')}}</td>
-   <td>Ajout du paramètre <code>locale</code> dans ES Intl 2017.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.String.toLocaleUpperCase")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("String.prototype.toLocaleLowerCase()")}}</li>
- <li>{{jsxref("String.prototype.toLowerCase()")}}</li>
- <li>{{jsxref("String.prototype.toUpperCase()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/string/tolocaleuppercase/index.md b/files/fr/web/javascript/reference/global_objects/string/tolocaleuppercase/index.md
new file mode 100644
index 0000000000..016286cab7
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/string/tolocaleuppercase/index.md
@@ -0,0 +1,75 @@
+---
+title: String.prototype.toLocaleUpperCase()
+slug: Web/JavaScript/Reference/Global_Objects/String/toLocaleUpperCase
+tags:
+  - Internationalisation
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - String
+  - i18n
+translation_of: Web/JavaScript/Reference/Global_Objects/String/toLocaleUpperCase
+original_slug: Web/JavaScript/Reference/Objets_globaux/String/toLocaleUpperCase
+---
+{{JSRef}}
+
+La méthode **`toLocaleUpperCase()`** renvoie la chaîne de caractères qui appelle la méthode en caractères majuscules, selon les correspondances de caractères propres aux différentes locales.
+
+{{EmbedInteractiveExample("pages/js/string-tolocaleuppercase.html")}}
+
+## Syntaxe
+
+    str.toLocaleUpperCase()
+    str.toLocaleUpperCase(locale)
+    str.toLocaleUpperCase([locale, locale, ...])
+
+### Paramètres
+
+- `locale` {{optional_inline}}
+  - : Le paramètre `locale` indique la locale dans laquelle convertir la chaîne en majuscules afin que la méthode utilise les correspondances de cette locale. Si plusieurs locales sont fournies au sein d'un tableau, la meilleure locale disponible est alors utilisée. La locale par défaut est celle utilisée par le système hôte.
+
+### Valeur de retour
+
+Une nouvelle chaîne de caractères obtenue en transformant la chaîne de caractères appelante en majuscules et en tenant compte de la locale.
+
+### Exceptions
+
+Cette méthode peut lever les exceptions suivantes :
+
+- {{jsxref("RangeError")}} ("invalid language tag: xx_yy") si l'argument `locale` ne correspond pas à une balise de langue valide.
+- {{jsxref("TypeError")}} ("invalid element in locales arguments") si un élément du tableau de locales passé en argument n'est pas une chaîne de caractères.
+
+## Description
+
+La méthode `toLocaleUpperCase()` renvoie la valeur de la chaîne de caractères, convertie en majuscules selon les correspondances propres à la la locale. `toLocaleUpperCase()` ne modifie pas la chaîne d'origine. Dans la plupart des cas, cette méthode produira le même résultat que {{jsxref("String.toUpperCase", "toUpperCase()")}}. En revanche, pour certaines locales, par exemple les locales turques dont les correspondances entre les caractères ne sont pas celles par défaut prévue par Unicode, cette méthode pourra produire un résultat différent.
+
+On notera également que la conversion ne repose pas sur une correspondance un à un de chaque caractère. En effet, certains caractères produisent deux (voire plus) caractères lorsqu'ils sont convertis en majuscules. Ainsi, la longueur de la chaîne passée en majuscules peut être différente de la longueur de la chaîne originale. Cela implique que la transformation n'est pas stable, autrement dit, l'instruction suivante pourra renvoyer `false` : `x.toLocaleLowerCase() === x.toLocaleUpperCase().toLocaleLowerCase()`.
+
+## Exemples
+
+```js
+"alphabet".toLocaleUpperCase();       // "ALPHABET"
+'Gesäß'.toLocaleUpperCase();          // 'GESÄSS'
+"i\u0307".toLocaleUpperCase("lt-LT"); // "I"
+```
+
+## Spécifications
+
+| Spécification                                                                                                                                    | État                             | Commentaires                                          |
+| ------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ----------------------------------------------------- |
+| {{SpecName('ES3')}}                                                                                                                         | {{Spec2('ES3')}}             | Définition initiale. Implémentée avec JavaScript 1.2. |
+| {{SpecName('ES5.1', '#sec-15.5.4.19', 'String.prototype.toLocaleUpperCase')}}                                         | {{Spec2('ES5.1')}}         |                                                       |
+| {{SpecName('ES6', '#sec-string.prototype.tolocaleuppercase', 'String.prototype.toLocaleUpperCase')}}             | {{Spec2('ES6')}}             |                                                       |
+| {{SpecName('ESDraft', '#sec-string.prototype.tolocaleuppercase', 'String.prototype.toLocaleUpperCase')}}     | {{Spec2('ESDraft')}}     |                                                       |
+| {{SpecName('ES Int Draft', '#sup-string.prototype.tolocaleuppercase', 'String.prototype.toLocaleUpperCase')}} | {{Spec2('ES Int Draft')}} | Ajout du paramètre `locale` dans ES Intl 2017.        |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.String.toLocaleUpperCase")}}
+
+## Voir aussi
+
+- {{jsxref("String.prototype.toLocaleLowerCase()")}}
+- {{jsxref("String.prototype.toLowerCase()")}}
+- {{jsxref("String.prototype.toUpperCase()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/string/tolowercase/index.html b/files/fr/web/javascript/reference/global_objects/string/tolowercase/index.html
deleted file mode 100644
index 88a37a316c..0000000000
--- a/files/fr/web/javascript/reference/global_objects/string/tolowercase/index.html
+++ /dev/null
@@ -1,78 +0,0 @@
----
-title: String.prototype.toLowerCase()
-slug: Web/JavaScript/Reference/Global_Objects/String/toLowerCase
-tags:
-  - JavaScript
-  - Méthode
-  - Prototype
-  - Reference
-  - String
-translation_of: Web/JavaScript/Reference/Global_Objects/String/toLowerCase
-original_slug: Web/JavaScript/Reference/Objets_globaux/String/toLowerCase
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <code><strong>toLowerCase()</strong></code> retourne la chaîne de caractères courante en minuscules.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/string-tolowercase.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>str</var>.toLowerCase()</pre>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Une nouvelle chaîne de caractères qui est obtenue en passant la chaîne appelante en minuscules.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>La méthode <code>toLowerCase()</code> renvoie la valeur de la chaîne convertie en minuscules. <code>toLowerCase()</code> ne modifie pas la valeur de la chaîne courante.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<pre class="brush: js">console.log( "ALPHABET".toLowerCase() ); // "alphabet"
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES1')}}</td>
-   <td>{{Spec2('ES1')}}</td>
-   <td>Définition initiale. Implémentée avec JavaScript 1.0.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-15.5.4.16', 'String.prototype.toLowerCase')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-string.prototype.tolowercase', 'String.prototype.toLowerCase')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-string.prototype.tolowercase', 'String.prototype.toLowerCase')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.String.toLowerCase")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("String.prototype.toLocaleLowerCase()")}}</li>
- <li>{{jsxref("String.prototype.toLocaleUpperCase()")}}</li>
- <li>{{jsxref("String.prototype.toUpperCase()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/string/tolowercase/index.md b/files/fr/web/javascript/reference/global_objects/string/tolowercase/index.md
new file mode 100644
index 0000000000..abd97d98aa
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/string/tolowercase/index.md
@@ -0,0 +1,54 @@
+---
+title: String.prototype.toLowerCase()
+slug: Web/JavaScript/Reference/Global_Objects/String/toLowerCase
+tags:
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - String
+translation_of: Web/JavaScript/Reference/Global_Objects/String/toLowerCase
+original_slug: Web/JavaScript/Reference/Objets_globaux/String/toLowerCase
+---
+{{JSRef}}
+
+La méthode **`toLowerCase()`** retourne la chaîne de caractères courante en minuscules.
+
+{{EmbedInteractiveExample("pages/js/string-tolowercase.html")}}
+
+## Syntaxe
+
+    str.toLowerCase()
+
+### Valeur de retour
+
+Une nouvelle chaîne de caractères qui est obtenue en passant la chaîne appelante en minuscules.
+
+## Description
+
+La méthode `toLowerCase()` renvoie la valeur de la chaîne convertie en minuscules. `toLowerCase()` ne modifie pas la valeur de la chaîne courante.
+
+## Exemples
+
+```js
+console.log( "ALPHABET".toLowerCase() ); // "alphabet"
+```
+
+## Spécifications
+
+| Spécification                                                                                                                | État                         | Commentaires                                          |
+| ---------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- |
+| {{SpecName('ES1')}}                                                                                                     | {{Spec2('ES1')}}         | Définition initiale. Implémentée avec JavaScript 1.0. |
+| {{SpecName('ES5.1', '#sec-15.5.4.16', 'String.prototype.toLowerCase')}}                             | {{Spec2('ES5.1')}}     |                                                       |
+| {{SpecName('ES6', '#sec-string.prototype.tolowercase', 'String.prototype.toLowerCase')}}         | {{Spec2('ES6')}}         |                                                       |
+| {{SpecName('ESDraft', '#sec-string.prototype.tolowercase', 'String.prototype.toLowerCase')}} | {{Spec2('ESDraft')}} |                                                       |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.String.toLowerCase")}}
+
+## Voir aussi
+
+- {{jsxref("String.prototype.toLocaleLowerCase()")}}
+- {{jsxref("String.prototype.toLocaleUpperCase()")}}
+- {{jsxref("String.prototype.toUpperCase()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/string/tosource/index.html b/files/fr/web/javascript/reference/global_objects/string/tosource/index.html
deleted file mode 100644
index 2fb635149a..0000000000
--- a/files/fr/web/javascript/reference/global_objects/string/tosource/index.html
+++ /dev/null
@@ -1,57 +0,0 @@
----
-title: String.prototype.toSource()
-slug: Web/JavaScript/Reference/Global_Objects/String/toSource
-tags:
-  - JavaScript
-  - Méthode
-  - Non-standard
-  - Prototype
-  - Reference
-  - String
-translation_of: Web/JavaScript/Reference/Global_Objects/String/toSource
-original_slug: Web/JavaScript/Reference/Objets_globaux/String/toSource
----
-<div>{{JSRef}} {{Non-standard_header}}</div>
-
-<p>La méthode <code><strong>toSource()</strong></code> permet de renvoyer une chaîne de caractères représentant le code source de l'objet.</p>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">String.toSource()
-<var>str</var>.toSource()
-</pre>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Une chaîne de caractères qui représente le code source de la chaîne de caractères appelante.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>La méthode <code>toSource()</code> renvoie les valeurs suivantes :</p>
-
-<ul>
- <li>Pour l'objet natif {{jsxref("String")}}, <code>toSource()</code> renvoie la chaîne de caractère suivante, indiquant que le code source n'est pas disponible :
-
-  <pre class="brush: js">function String() {
-    [native code]
-}
-</pre>
- </li>
- <li>Pour les instances de {{jsxref("String")}} ou les littéraux de chaînes de caractères, <code>toSource()</code> renvoie une chaîne de caractère représentant le code source.</li>
-</ul>
-
-<p>Généralement, cette méthode est appelée par du code interne au moteur JavaScript et n'est pas trouvée dans du code JavaScript externe.</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<p>Cette méthode ne fait partie d'aucun standard. Elle a été implémentée avec JavaScript 1.3.</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.String.toSource")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Object.prototype.toSource()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/string/tosource/index.md b/files/fr/web/javascript/reference/global_objects/string/tosource/index.md
new file mode 100644
index 0000000000..501689fa18
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/string/tosource/index.md
@@ -0,0 +1,53 @@
+---
+title: String.prototype.toSource()
+slug: Web/JavaScript/Reference/Global_Objects/String/toSource
+tags:
+  - JavaScript
+  - Méthode
+  - Non-standard
+  - Prototype
+  - Reference
+  - String
+translation_of: Web/JavaScript/Reference/Global_Objects/String/toSource
+original_slug: Web/JavaScript/Reference/Objets_globaux/String/toSource
+---
+{{JSRef}} {{Non-standard_header}}
+
+La méthode **`toSource()`** permet de renvoyer une chaîne de caractères représentant le code source de l'objet.
+
+## Syntaxe
+
+    String.toSource()
+    str.toSource()
+
+### Valeur de retour
+
+Une chaîne de caractères qui représente le code source de la chaîne de caractères appelante.
+
+## Description
+
+La méthode `toSource()` renvoie les valeurs suivantes :
+
+- Pour l'objet natif {{jsxref("String")}}, `toSource()` renvoie la chaîne de caractère suivante, indiquant que le code source n'est pas disponible :
+
+  ```js
+    function String() {
+        [native code]
+    }
+    ```
+
+- Pour les instances de {{jsxref("String")}} ou les littéraux de chaînes de caractères, `toSource()` renvoie une chaîne de caractère représentant le code source.
+
+Généralement, cette méthode est appelée par du code interne au moteur JavaScript et n'est pas trouvée dans du code JavaScript externe.
+
+## Spécifications
+
+Cette méthode ne fait partie d'aucun standard. Elle a été implémentée avec JavaScript 1.3.
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.String.toSource")}}
+
+## Voir aussi
+
+- {{jsxref("Object.prototype.toSource()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/string/tostring/index.html b/files/fr/web/javascript/reference/global_objects/string/tostring/index.html
deleted file mode 100644
index 0cdc5b48b2..0000000000
--- a/files/fr/web/javascript/reference/global_objects/string/tostring/index.html
+++ /dev/null
@@ -1,81 +0,0 @@
----
-title: String.prototype.toString()
-slug: Web/JavaScript/Reference/Global_Objects/String/toString
-tags:
-  - JavaScript
-  - Méthode
-  - Prototype
-  - Reference
-  - String
-translation_of: Web/JavaScript/Reference/Global_Objects/String/toString
-original_slug: Web/JavaScript/Reference/Objets_globaux/String/toString
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <code><strong>toString()</strong></code> renvoie une chaine de caractères représentant l'objet renseigné.</p>
-
-
-
-<div>{{EmbedInteractiveExample("pages/js/string-tostring.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>str</var>.toString()</pre>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Une chaîne de caractères représentant la chaîne appelante.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>L'objet {{jsxref("String")}} surcharge la méthode <code>toString()</code> de l'objet {{jsxref("Object")}} ; il n'hérite pas de {{jsxref("Object.toString","Object.prototype.toString()")}}. Pour Les objets <code>String</code>, la méthode <code>toString()</code> renvoie une chaine de caractères représentant l'objet, et est similaire à la méthode {{jsxref("String.prototype.valueOf()")}}.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<p>L'exemple suivant affiche la valeur textuelle d'un objet  {{jsxref("String")}} :</p>
-
-<pre class="brush:js">var x = new String("coucou monde");
-console.log(x.toString()); // affiche "coucou monde"</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES3')}}</td>
-   <td>{{Spec2('ES3')}}</td>
-   <td>Définition initiale. Implémentée avec JavaScript 1.1.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-15.5.4.2', 'String.prototype.toString')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-string.prototype.tostring', 'String.prototype.toString')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-string.prototype.tostring', 'String.prototype.toString')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.String.toString")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Object.prototype.toSource()")}}</li>
- <li>{{jsxref("String.prototype.valueOf()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/string/tostring/index.md b/files/fr/web/javascript/reference/global_objects/string/tostring/index.md
new file mode 100644
index 0000000000..630a4a4d32
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/string/tostring/index.md
@@ -0,0 +1,56 @@
+---
+title: String.prototype.toString()
+slug: Web/JavaScript/Reference/Global_Objects/String/toString
+tags:
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - String
+translation_of: Web/JavaScript/Reference/Global_Objects/String/toString
+original_slug: Web/JavaScript/Reference/Objets_globaux/String/toString
+---
+{{JSRef}}
+
+La méthode **`toString()`** renvoie une chaine de caractères représentant l'objet renseigné.
+
+{{EmbedInteractiveExample("pages/js/string-tostring.html")}}
+
+## Syntaxe
+
+    str.toString()
+
+### Valeur de retour
+
+Une chaîne de caractères représentant la chaîne appelante.
+
+## Description
+
+L'objet {{jsxref("String")}} surcharge la méthode `toString()` de l'objet {{jsxref("Object")}} ; il n'hérite pas de {{jsxref("Object.toString","Object.prototype.toString()")}}. Pour Les objets `String`, la méthode `toString()` renvoie une chaine de caractères représentant l'objet, et est similaire à la méthode {{jsxref("String.prototype.valueOf()")}}.
+
+## Exemples
+
+L'exemple suivant affiche la valeur textuelle d'un objet  {{jsxref("String")}} :
+
+```js
+var x = new String("coucou monde");
+console.log(x.toString()); // affiche "coucou monde"
+```
+
+## Spécifications
+
+| Spécification                                                                                                        | État                         | Commentaires                                          |
+| -------------------------------------------------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- |
+| {{SpecName('ES3')}}                                                                                             | {{Spec2('ES3')}}         | Définition initiale. Implémentée avec JavaScript 1.1. |
+| {{SpecName('ES5.1', '#sec-15.5.4.2', 'String.prototype.toString')}}                             | {{Spec2('ES5.1')}}     |                                                       |
+| {{SpecName('ES6', '#sec-string.prototype.tostring', 'String.prototype.toString')}}         | {{Spec2('ES6')}}         |                                                       |
+| {{SpecName('ESDraft', '#sec-string.prototype.tostring', 'String.prototype.toString')}} | {{Spec2('ESDraft')}} |                                                       |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.String.toString")}}
+
+## Voir aussi
+
+- {{jsxref("Object.prototype.toSource()")}}
+- {{jsxref("String.prototype.valueOf()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/string/touppercase/index.html b/files/fr/web/javascript/reference/global_objects/string/touppercase/index.html
deleted file mode 100644
index cd9d6b0f9b..0000000000
--- a/files/fr/web/javascript/reference/global_objects/string/touppercase/index.html
+++ /dev/null
@@ -1,104 +0,0 @@
----
-title: String.prototype.toUpperCase()
-slug: Web/JavaScript/Reference/Global_Objects/String/toUpperCase
-tags:
-  - JavaScript
-  - Méthode
-  - Prototype
-  - Reference
-  - String
-translation_of: Web/JavaScript/Reference/Global_Objects/String/toUpperCase
-original_slug: Web/JavaScript/Reference/Objets_globaux/String/toUpperCase
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <code><strong>toUpperCase()</strong></code> retourne la valeur de la chaîne courante, convertie en majuscules.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/string-touppercase.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>str</var>.toUpperCase()</pre>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Une nouvelle chaîne de caractères obtenue à partir de la chaîne appelante, passée en majuscules.</p>
-
-<h3 id="Exceptions_levées">Exceptions levées</h3>
-
-<dl>
- <dt>{{jsxref("TypeError")}}</dt>
- <dd>Une telle exception sera levée si on appelle cette méthode sur {{jsxref("null")}} ou {{jsxref("undefined")}} (en utilisant <code>Function.prototype.call()</code> par exemple).</dd>
-</dl>
-
-<h2 id="Description">Description</h2>
-
-<p>La méthode <code>toUpperCase()</code> retourne la valeur de la chaîne convertie en majuscules. <code>toUpperCase</code> n'affecte pas la valeur de la chaîne elle-même.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Utiliser_toUpperCase()">Utiliser <code>toUpperCase()</code></h3>
-
-<pre class="brush: js">console.log( "alphabet".toUpperCase() ); // "ALPHABET"</pre>
-
-<h3 id="Convertir_une_valeur_this_en_chaîne_de_caractères">Convertir une valeur <code>this</code> en chaîne de caractères</h3>
-
-<p class="brush: js">Cette peut être utilisée pour convertir une valeur qui n'est pas une chaîne de caractères lorsque celle-ci est fournie comme valeur <code>this</code> : ​​​​</p>
-
-<pre class="brush: js">var obj = {
-  toString: function toString(){
-    return 'abcdef';
-  }
-};
-var a = String.prototype.toUpperCase.call(obj);
-var b = String.prototype.toUpperCase.call(true);
-
-console.log(a); // Affiche 'ABCDEF' dans la console
-console.log(b); // Affiche 'TRUE' dans la console
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('ES1')}}</td>
-   <td>{{Spec2('ES1')}}</td>
-   <td>Définition initiale. Implémentée avec JavaScript 1.0.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-15.5.4.18', 'String.prototype.toUpperCase')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-string.prototype.touppercase', 'String.prototype.toUpperCase')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-string.prototype.touppercase', 'String.prototype.toUpperCase')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.String.toUpperCase")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("String.prototype.toLocaleLowerCase()")}}</li>
- <li>{{jsxref("String.prototype.toLocaleUpperCase()")}}</li>
- <li>{{jsxref("String.prototype.toLowerCase()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/string/touppercase/index.md b/files/fr/web/javascript/reference/global_objects/string/touppercase/index.md
new file mode 100644
index 0000000000..efa4875d7d
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/string/touppercase/index.md
@@ -0,0 +1,78 @@
+---
+title: String.prototype.toUpperCase()
+slug: Web/JavaScript/Reference/Global_Objects/String/toUpperCase
+tags:
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - String
+translation_of: Web/JavaScript/Reference/Global_Objects/String/toUpperCase
+original_slug: Web/JavaScript/Reference/Objets_globaux/String/toUpperCase
+---
+{{JSRef}}
+
+La méthode **`toUpperCase()`** retourne la valeur de la chaîne courante, convertie en majuscules.
+
+{{EmbedInteractiveExample("pages/js/string-touppercase.html")}}
+
+## Syntaxe
+
+    str.toUpperCase()
+
+### Valeur de retour
+
+Une nouvelle chaîne de caractères obtenue à partir de la chaîne appelante, passée en majuscules.
+
+### Exceptions levées
+
+- {{jsxref("TypeError")}}
+  - : Une telle exception sera levée si on appelle cette méthode sur {{jsxref("null")}} ou {{jsxref("undefined")}} (en utilisant `Function.prototype.call()` par exemple).
+
+## Description
+
+La méthode `toUpperCase()` retourne la valeur de la chaîne convertie en majuscules. `toUpperCase` n'affecte pas la valeur de la chaîne elle-même.
+
+## Exemples
+
+### Utiliser `toUpperCase()`
+
+```js
+console.log( "alphabet".toUpperCase() ); // "ALPHABET"
+```
+
+### Convertir une valeur `this` en chaîne de caractères
+
+Cette peut être utilisée pour convertir une valeur qui n'est pas une chaîne de caractères lorsque celle-ci est fournie comme valeur `this` : ​​​​
+
+```js
+var obj = {
+  toString: function toString(){
+    return 'abcdef';
+  }
+};
+var a = String.prototype.toUpperCase.call(obj);
+var b = String.prototype.toUpperCase.call(true);
+
+console.log(a); // Affiche 'ABCDEF' dans la console
+console.log(b); // Affiche 'TRUE' dans la console
+```
+
+## Spécifications
+
+| Spécification                                                                                                                | État                         | Commentaires                                          |
+| ---------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- |
+| {{SpecName('ES1')}}                                                                                                     | {{Spec2('ES1')}}         | Définition initiale. Implémentée avec JavaScript 1.0. |
+| {{SpecName('ES5.1', '#sec-15.5.4.18', 'String.prototype.toUpperCase')}}                             | {{Spec2('ES5.1')}}     |                                                       |
+| {{SpecName('ES6', '#sec-string.prototype.touppercase', 'String.prototype.toUpperCase')}}         | {{Spec2('ES6')}}         |                                                       |
+| {{SpecName('ESDraft', '#sec-string.prototype.touppercase', 'String.prototype.toUpperCase')}} | {{Spec2('ESDraft')}} |                                                       |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.String.toUpperCase")}}
+
+## Voir aussi
+
+- {{jsxref("String.prototype.toLocaleLowerCase()")}}
+- {{jsxref("String.prototype.toLocaleUpperCase()")}}
+- {{jsxref("String.prototype.toLowerCase()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/string/trim/index.html b/files/fr/web/javascript/reference/global_objects/string/trim/index.html
deleted file mode 100644
index 24146f8e6f..0000000000
--- a/files/fr/web/javascript/reference/global_objects/string/trim/index.html
+++ /dev/null
@@ -1,93 +0,0 @@
----
-title: String.prototype.trim()
-slug: Web/JavaScript/Reference/Global_Objects/String/Trim
-tags:
-  - ECMAScript 2015
-  - JavaScript
-  - Méthode
-  - Prototype
-  - Reference
-  - String
-  - polyfill
-translation_of: Web/JavaScript/Reference/Global_Objects/String/Trim
-original_slug: Web/JavaScript/Reference/Objets_globaux/String/trim
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <strong><code>trim()</code></strong> permet de retirer les blancs en début et fin de chaîne. Les blancs considérés sont les caractères d'espacement (espace, tabulation, espace insécable, etc.) ainsi que les caractères de fin de ligne (LF, CR, etc.).</p>
-
-<div>{{EmbedInteractiveExample("pages/js/string-trim.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>str</var>.trim()</pre>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Une nouvelle chaîne de caractères dérivant de la chaîne appelante pour laquelle les blancs ont été retirés aux deux extrémités de la chaîne.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>La méthode <code>trim()</code> renvoie la chaîne sans blanc au début et à la fin. La méthode <code>trim()</code> n'affecte pas la valeur de la chaîne courante.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<p>L'exemple qui suit affiche la chaîne <code>'toto'</code> :</p>
-
-<pre class="brush: js">var chaîneOriginale = '   toto  ';
-console.log(chaîneOriginale.trim()); // 'toto'
-
-// Un autre exemple de .trim() qui enlève les espaces juste d'un côté
-
-var chaîneOriginale = 'toto    ';
-console.log(chaîneOriginale.trim()); // 'toto'
-</pre>
-
-<h2 id="Prothèse_d'émulation_(polyfill)">Prothèse d'émulation (<em>polyfill</em>)</h2>
-
-<p>Si l'environnement utilisé ne possède pas cette méthode, il est possible de l'émuler avec le fragment de code suivant :</p>
-
-<pre class="brush: js">if (!String.prototype.trim) {
-  String.prototype.trim = function () {
-    return this.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, '');
-  };
-}
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-15.5.4.20', 'String.prototype.trim')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td>Définition initiale. Implémentée avec JavaScript 1.8.1.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-string.prototype.trim', 'String.prototype.trim')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-string.prototype.trim', 'String.prototype.trim')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.String.trim")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("String.prototype.trimStart()")}}</li>
- <li>{{jsxref("String.prototype.trimEnd()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/string/trim/index.md b/files/fr/web/javascript/reference/global_objects/string/trim/index.md
new file mode 100644
index 0000000000..a36df76b58
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/string/trim/index.md
@@ -0,0 +1,74 @@
+---
+title: String.prototype.trim()
+slug: Web/JavaScript/Reference/Global_Objects/String/Trim
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - String
+  - polyfill
+translation_of: Web/JavaScript/Reference/Global_Objects/String/Trim
+original_slug: Web/JavaScript/Reference/Objets_globaux/String/trim
+---
+{{JSRef}}
+
+La méthode **`trim()`** permet de retirer les blancs en début et fin de chaîne. Les blancs considérés sont les caractères d'espacement (espace, tabulation, espace insécable, etc.) ainsi que les caractères de fin de ligne (LF, CR, etc.).
+
+{{EmbedInteractiveExample("pages/js/string-trim.html")}}
+
+## Syntaxe
+
+    str.trim()
+
+### Valeur de retour
+
+Une nouvelle chaîne de caractères dérivant de la chaîne appelante pour laquelle les blancs ont été retirés aux deux extrémités de la chaîne.
+
+## Description
+
+La méthode `trim()` renvoie la chaîne sans blanc au début et à la fin. La méthode `trim()` n'affecte pas la valeur de la chaîne courante.
+
+## Exemples
+
+L'exemple qui suit affiche la chaîne `'toto'` :
+
+```js
+var chaîneOriginale = '   toto  ';
+console.log(chaîneOriginale.trim()); // 'toto'
+
+// Un autre exemple de .trim() qui enlève les espaces juste d'un côté
+
+var chaîneOriginale = 'toto    ';
+console.log(chaîneOriginale.trim()); // 'toto'
+```
+
+## Prothèse d'émulation (_polyfill_)
+
+Si l'environnement utilisé ne possède pas cette méthode, il est possible de l'émuler avec le fragment de code suivant :
+
+```js
+if (!String.prototype.trim) {
+  String.prototype.trim = function () {
+    return this.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, '');
+  };
+}
+```
+
+## Spécifications
+
+| Spécification                                                                                            | État                         | Commentaires                                            |
+| -------------------------------------------------------------------------------------------------------- | ---------------------------- | ------------------------------------------------------- |
+| {{SpecName('ES5.1', '#sec-15.5.4.20', 'String.prototype.trim')}}                     | {{Spec2('ES5.1')}}     | Définition initiale. Implémentée avec JavaScript 1.8.1. |
+| {{SpecName('ES6', '#sec-string.prototype.trim', 'String.prototype.trim')}}     | {{Spec2('ES6')}}         |                                                         |
+| {{SpecName('ESDraft', '#sec-string.prototype.trim', 'String.prototype.trim')}} | {{Spec2('ESDraft')}} |                                                         |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.String.trim")}}
+
+## Voir aussi
+
+- {{jsxref("String.prototype.trimStart()")}}
+- {{jsxref("String.prototype.trimEnd()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/string/trimend/index.html b/files/fr/web/javascript/reference/global_objects/string/trimend/index.html
deleted file mode 100644
index 3f3ea377c8..0000000000
--- a/files/fr/web/javascript/reference/global_objects/string/trimend/index.html
+++ /dev/null
@@ -1,79 +0,0 @@
----
-title: String.prototype.trimEnd()
-slug: Web/JavaScript/Reference/Global_Objects/String/trimEnd
-tags:
-  - JavaScript
-  - Méthode
-  - Prototype
-  - Reference
-  - String
-translation_of: Web/JavaScript/Reference/Global_Objects/String/trimEnd
-original_slug: Web/JavaScript/Reference/Objets_globaux/String/trimEnd
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <code><strong>trimEnd()</strong></code> permet de retirer les blancs situés à la fin d'une chaîne de caractères. <code>trimRight()</code> est un synonyme pour cette méthode.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/string-trimend.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>str</var>.trimEnd();
-str.trimRight();</pre>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Une nouvelle chaîne de caractères basée sur la chaîne appelante et dont les blancs en fin de chaîne ont été supprimés.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>La méthode <code>trimEnd()</code> renvoie la chaîne de caractères sans les blancs présents à partir de la droite de la chaîne. <code>trimEnd()</code> ne modifie pas la chaîne elle-même.</p>
-
-<h3 id="Synonyme">Synonyme</h3>
-
-<p>Pour des raisons de cohérence avec les méthodes existantes comme {{jsxref("String.prototype.padEnd")}}, le nom standard de cette méthode est <code>trimEnd</code>. Toutefois, à des fins de compatibilité web, <code>trimRight</code> est un synonyme de <code>trimEnd</code>. Pour certains moteurs JavaScript, on pourra donc avoir :</p>
-
-<pre class="brush: js">String.prototype.trimRight.name === "trimEnd";</pre>
-
-<h2 id="Exemples">Exemples</h2>
-
-<p>L'exemple qui suit illustre comment afficher la chaîne "   toto":</p>
-
-<pre class="brush:js">var str = "   toto  ";
-
-console.log(str.length); // 9
-
-str = str.trimEnd();
-console.log(str.length); // 7
-console.log(str);        // "   toto"
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>Proposition pour <code><a href="https://github.com/tc39/proposal-string-left-right-trim/#stringprototypetrimstart--stringprototypetrimend">String.prototype.{trimStart,trimEnd}</a></code></td>
-   <td>Brouillon de niveau 4</td>
-   <td>Attendu pour ES2019</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.String.trimEnd")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("String.prototype.trim()")}}</li>
- <li>{{jsxref("String.prototype.trimStart()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/string/trimend/index.md b/files/fr/web/javascript/reference/global_objects/string/trimend/index.md
new file mode 100644
index 0000000000..ded81deeb9
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/string/trimend/index.md
@@ -0,0 +1,67 @@
+---
+title: String.prototype.trimEnd()
+slug: Web/JavaScript/Reference/Global_Objects/String/trimEnd
+tags:
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - String
+translation_of: Web/JavaScript/Reference/Global_Objects/String/trimEnd
+original_slug: Web/JavaScript/Reference/Objets_globaux/String/trimEnd
+---
+{{JSRef}}
+
+La méthode **`trimEnd()`** permet de retirer les blancs situés à la fin d'une chaîne de caractères. `trimRight()` est un synonyme pour cette méthode.
+
+{{EmbedInteractiveExample("pages/js/string-trimend.html")}}
+
+## Syntaxe
+
+    str.trimEnd();
+    str.trimRight();
+
+### Valeur de retour
+
+Une nouvelle chaîne de caractères basée sur la chaîne appelante et dont les blancs en fin de chaîne ont été supprimés.
+
+## Description
+
+La méthode `trimEnd()` renvoie la chaîne de caractères sans les blancs présents à partir de la droite de la chaîne. `trimEnd()` ne modifie pas la chaîne elle-même.
+
+### Synonyme
+
+Pour des raisons de cohérence avec les méthodes existantes comme {{jsxref("String.prototype.padEnd")}}, le nom standard de cette méthode est `trimEnd`. Toutefois, à des fins de compatibilité web, `trimRight` est un synonyme de `trimEnd`. Pour certains moteurs JavaScript, on pourra donc avoir :
+
+```js
+String.prototype.trimRight.name === "trimEnd";
+```
+
+## Exemples
+
+L'exemple qui suit illustre comment afficher la chaîne "   toto":
+
+```js
+var str = "   toto  ";
+
+console.log(str.length); // 9
+
+str = str.trimEnd();
+console.log(str.length); // 7
+console.log(str);        // "   toto"
+```
+
+## Spécifications
+
+| Spécification                                                                                                                                                        | État                  | Commentaires        |
+| -------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- | ------------------- |
+| Proposition pour [`String.prototype.{trimStart,trimEnd}`](https://github.com/tc39/proposal-string-left-right-trim/#stringprototypetrimstart--stringprototypetrimend) | Brouillon de niveau 4 | Attendu pour ES2019 |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.String.trimEnd")}}
+
+## Voir aussi
+
+- {{jsxref("String.prototype.trim()")}}
+- {{jsxref("String.prototype.trimStart()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/string/trimstart/index.html b/files/fr/web/javascript/reference/global_objects/string/trimstart/index.html
deleted file mode 100644
index fb06eafc08..0000000000
--- a/files/fr/web/javascript/reference/global_objects/string/trimstart/index.html
+++ /dev/null
@@ -1,79 +0,0 @@
----
-title: String.prototype.trimStart()
-slug: Web/JavaScript/Reference/Global_Objects/String/trimStart
-tags:
-  - JavaScript
-  - Méthode
-  - Prototype
-  - Reference
-  - String
-translation_of: Web/JavaScript/Reference/Global_Objects/String/trimStart
-original_slug: Web/JavaScript/Reference/Objets_globaux/String/trimStart
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <code><strong>trimStart()</strong></code> permet de retirer les blancs au début de la chaîne de caractères. <code>trimLeft()</code> est un synonyme pour cette méthode.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/string-trimstart.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>str</var>.trimStart();
-<var>str</var>.trimLeft();</pre>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Une nouvelle chaîne de caractères dérivant de la chaîne appelante pour laquelle les blancs en début de chaîne ont été retirés.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>La méthode <code>trimStart()</code> renvoie la chaîne de caractères dont les blancs à gauche ont été retirés. <code>trimStart</code> ne modifie pas la chaîne elle-même.</p>
-
-<h3 id="Synonyme">Synonyme</h3>
-
-<p>Pour des raisons de cohérences avec les méthodes préexistantes (telles que {{jsxref("String.prototype.padStart")}}), le nom standard de cette méthode est <code>trimStart</code>. Toutefois, à des fins de compatibilité web, le nom <code>trimLeft</code> sera gardé comme un synonyme. Pour certains moteurs JavaScript, on pourra donc avoir :</p>
-
-<pre class="brush: js">String.prototype.trimLeft.name === "trimStart";</pre>
-
-<h2 id="Exemple">Exemple</h2>
-
-<p>L'exemple qui suit illustre comment afficher la chaîne de caractères <code>"toto  "</code> en minuscules :</p>
-
-<pre class="brush:js">var str = "   toto  ";
-
-console.log(str.length); // 8
-
-str = str.trimStart();
-console.log(str.length); // 5
-console.log(str);        // "toto  "
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>Proposition pour <code><a href="https://github.com/tc39/proposal-string-left-right-trim/#stringprototypetrimstart--stringprototypetrimend">String.prototype.{trimStart,trimEnd}</a></code></td>
-   <td>Brouillon de niveau 4</td>
-   <td>Attendu pour ES2019</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.String.trimStart")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("String.prototype.trim()")}}</li>
- <li>{{jsxref("String.prototype.trimEnd()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/string/trimstart/index.md b/files/fr/web/javascript/reference/global_objects/string/trimstart/index.md
new file mode 100644
index 0000000000..1e22e0a695
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/string/trimstart/index.md
@@ -0,0 +1,67 @@
+---
+title: String.prototype.trimStart()
+slug: Web/JavaScript/Reference/Global_Objects/String/trimStart
+tags:
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - String
+translation_of: Web/JavaScript/Reference/Global_Objects/String/trimStart
+original_slug: Web/JavaScript/Reference/Objets_globaux/String/trimStart
+---
+{{JSRef}}
+
+La méthode **`trimStart()`** permet de retirer les blancs au début de la chaîne de caractères. `trimLeft()` est un synonyme pour cette méthode.
+
+{{EmbedInteractiveExample("pages/js/string-trimstart.html")}}
+
+## Syntaxe
+
+    str.trimStart();
+    str.trimLeft();
+
+### Valeur de retour
+
+Une nouvelle chaîne de caractères dérivant de la chaîne appelante pour laquelle les blancs en début de chaîne ont été retirés.
+
+## Description
+
+La méthode `trimStart()` renvoie la chaîne de caractères dont les blancs à gauche ont été retirés. `trimStart` ne modifie pas la chaîne elle-même.
+
+### Synonyme
+
+Pour des raisons de cohérences avec les méthodes préexistantes (telles que {{jsxref("String.prototype.padStart")}}), le nom standard de cette méthode est `trimStart`. Toutefois, à des fins de compatibilité web, le nom `trimLeft` sera gardé comme un synonyme. Pour certains moteurs JavaScript, on pourra donc avoir :
+
+```js
+String.prototype.trimLeft.name === "trimStart";
+```
+
+## Exemple
+
+L'exemple qui suit illustre comment afficher la chaîne de caractères `"toto "` en minuscules :
+
+```js
+var str = "   toto  ";
+
+console.log(str.length); // 8
+
+str = str.trimStart();
+console.log(str.length); // 5
+console.log(str);        // "toto  "
+```
+
+## Spécifications
+
+| Spécification                                                                                                                                                        | État                  | Commentaires        |
+| -------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- | ------------------- |
+| Proposition pour [`String.prototype.{trimStart,trimEnd}`](https://github.com/tc39/proposal-string-left-right-trim/#stringprototypetrimstart--stringprototypetrimend) | Brouillon de niveau 4 | Attendu pour ES2019 |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.String.trimStart")}}
+
+## Voir aussi
+
+- {{jsxref("String.prototype.trim()")}}
+- {{jsxref("String.prototype.trimEnd()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/string/valueof/index.html b/files/fr/web/javascript/reference/global_objects/string/valueof/index.html
deleted file mode 100644
index edacaf0f0c..0000000000
--- a/files/fr/web/javascript/reference/global_objects/string/valueof/index.html
+++ /dev/null
@@ -1,80 +0,0 @@
----
-title: String.prototype.valueOf()
-slug: Web/JavaScript/Reference/Global_Objects/String/valueOf
-tags:
-  - JavaScript
-  - Méthode
-  - Prototype
-  - Reference
-  - String
-translation_of: Web/JavaScript/Reference/Global_Objects/String/valueOf
-original_slug: Web/JavaScript/Reference/Objets_globaux/String/valueOf
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <code><strong>valueOf()</strong></code> renvoie la valeur primitive de l'objet {{jsxref("String")}}.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/string-valueof.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>str</var>.valueOf()</pre>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Une chaîne de caractères qui représente la valeur primitive d'un objet {{jsxref("String")}}.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>La méthode <code>valueOf()</code> de <code>String</code> renvoie la valeur primitive de l'objet <code>String</code> sous la forme d'une chaine de caractères. Cette valeur est équivalente à {{jsxref("String.prototype.toString()")}}.</p>
-
-<p>Cette méthode est généralement appelée en interne par JavaScript et non explicitement dans du code.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<pre class="brush: js">var x = new String("Coucou monde");
-console.log(x.valueOf()); // affiche "Coucou monde"
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES1')}}</td>
-   <td>{{Spec2('ES1')}}</td>
-   <td>Définition initiale. Implémentée avec JavaScript 1.1.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-15.5.4.3', 'String.prototype.valueOf')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-string.prototype.valueof', 'String.prototype.valueOf')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-string.prototype.valueof', 'String.prototype.valueOf')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.String.valueOf")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("String.prototype.toString()")}}</li>
- <li>{{jsxref("Object.prototype.valueOf()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/string/valueof/index.md b/files/fr/web/javascript/reference/global_objects/string/valueof/index.md
new file mode 100644
index 0000000000..e1ba2b7fd6
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/string/valueof/index.md
@@ -0,0 +1,56 @@
+---
+title: String.prototype.valueOf()
+slug: Web/JavaScript/Reference/Global_Objects/String/valueOf
+tags:
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - String
+translation_of: Web/JavaScript/Reference/Global_Objects/String/valueOf
+original_slug: Web/JavaScript/Reference/Objets_globaux/String/valueOf
+---
+{{JSRef}}
+
+La méthode **`valueOf()`** renvoie la valeur primitive de l'objet {{jsxref("String")}}.
+
+{{EmbedInteractiveExample("pages/js/string-valueof.html")}}
+
+## Syntaxe
+
+    str.valueOf()
+
+### Valeur de retour
+
+Une chaîne de caractères qui représente la valeur primitive d'un objet {{jsxref("String")}}.
+
+## Description
+
+La méthode `valueOf()` de `String` renvoie la valeur primitive de l'objet `String` sous la forme d'une chaine de caractères. Cette valeur est équivalente à {{jsxref("String.prototype.toString()")}}.
+
+Cette méthode est généralement appelée en interne par JavaScript et non explicitement dans du code.
+
+## Exemples
+
+```js
+var x = new String("Coucou monde");
+console.log(x.valueOf()); // affiche "Coucou monde"
+```
+
+## Spécifications
+
+| Spécification                                                                                                    | État                         | Commentaires                                          |
+| ---------------------------------------------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- |
+| {{SpecName('ES1')}}                                                                                         | {{Spec2('ES1')}}         | Définition initiale. Implémentée avec JavaScript 1.1. |
+| {{SpecName('ES5.1', '#sec-15.5.4.3', 'String.prototype.valueOf')}}                         | {{Spec2('ES5.1')}}     |                                                       |
+| {{SpecName('ES6', '#sec-string.prototype.valueof', 'String.prototype.valueOf')}}     | {{Spec2('ES6')}}         |                                                       |
+| {{SpecName('ESDraft', '#sec-string.prototype.valueof', 'String.prototype.valueOf')}} | {{Spec2('ESDraft')}} |                                                       |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.String.valueOf")}}
+
+## Voir aussi
+
+- {{jsxref("String.prototype.toString()")}}
+- {{jsxref("Object.prototype.valueOf()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/symbol/@@toprimitive/index.html b/files/fr/web/javascript/reference/global_objects/symbol/@@toprimitive/index.html
deleted file mode 100644
index 601aaceead..0000000000
--- a/files/fr/web/javascript/reference/global_objects/symbol/@@toprimitive/index.html
+++ /dev/null
@@ -1,63 +0,0 @@
----
-title: Symbol.prototype[@@toPrimitive]
-slug: Web/JavaScript/Reference/Global_Objects/Symbol/@@toPrimitive
-tags:
-  - ECMAScript 2015
-  - JavaScript
-  - Méthode
-  - Prototype
-  - Reference
-  - Symbol
-translation_of: Web/JavaScript/Reference/Global_Objects/Symbol/@@toPrimitive
-original_slug: Web/JavaScript/Reference/Objets_globaux/Symbol/@@toPrimitive
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <code><strong>[@@toPrimitive]()</strong></code> permet de convertir un objet symbole en une valeur primitive.</p>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>Symbol()[Symbol.toPrimitive](hint);
-</var></pre>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>La valeur primitive de l'objet {{jsxref("Symbol")}} indiqué.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>La méthode <code>[@@toPrimitive]()</code> de {{jsxref("Symbol")}} renvoie la valeur primitive d'un objet <code>Symbol</code> (le résultat sera  donc un symbole au sens primitif). L'argument <code>hint</code> n'est pas utilisé.</p>
-
-<p>Le moteur JavaScript appelle la méthode <code>[@@toPrimitive]()</code> afin de convertir un objet en une valeur primitive. Généralement, il n'est pas nécessaire d'appeler <code>[@@toPrimitive]()</code> car le moteur JavaScript l'appelle automatiquement lorsqu'il détecte un objet là où une valeur primitive est attendue.</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-symbol.prototype-@@toprimitive', 'Symbol.prototype.@@toPrimitive')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-symbol.prototype-@@toprimitive', 'Symbol.prototype.@@toPrimitive')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Symbol.@@toPrimitive")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Symbol.toPrimitive")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/symbol/@@toprimitive/index.md b/files/fr/web/javascript/reference/global_objects/symbol/@@toprimitive/index.md
new file mode 100644
index 0000000000..28b41fe086
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/symbol/@@toprimitive/index.md
@@ -0,0 +1,45 @@
+---
+title: Symbol.prototype[@@toPrimitive]
+slug: Web/JavaScript/Reference/Global_Objects/Symbol/@@toPrimitive
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - Symbol
+translation_of: Web/JavaScript/Reference/Global_Objects/Symbol/@@toPrimitive
+original_slug: Web/JavaScript/Reference/Objets_globaux/Symbol/@@toPrimitive
+---
+{{JSRef}}
+
+La méthode **`[@@toPrimitive]()`** permet de convertir un objet symbole en une valeur primitive.
+
+## Syntaxe
+
+    Symbol()[Symbol.toPrimitive](hint);
+
+### Valeur de retour
+
+La valeur primitive de l'objet {{jsxref("Symbol")}} indiqué.
+
+## Description
+
+La méthode `[@@toPrimitive]()` de {{jsxref("Symbol")}} renvoie la valeur primitive d'un objet `Symbol` (le résultat sera  donc un symbole au sens primitif). L'argument `hint` n'est pas utilisé.
+
+Le moteur JavaScript appelle la méthode `[@@toPrimitive]()` afin de convertir un objet en une valeur primitive. Généralement, il n'est pas nécessaire d'appeler `[@@toPrimitive]()` car le moteur JavaScript l'appelle automatiquement lorsqu'il détecte un objet là où une valeur primitive est attendue.
+
+## Spécifications
+
+| Spécification                                                                                                                    | État                         | Commentaires         |
+| -------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName('ES2015', '#sec-symbol.prototype-@@toprimitive', 'Symbol.prototype.@@toPrimitive')}} | {{Spec2('ES2015')}}     | Définition initiale. |
+| {{SpecName('ESDraft', '#sec-symbol.prototype-@@toprimitive', 'Symbol.prototype.@@toPrimitive')}} | {{Spec2('ESDraft')}} |                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Symbol.@@toPrimitive")}}
+
+## Voir aussi
+
+- {{jsxref("Symbol.toPrimitive")}}
diff --git a/files/fr/web/javascript/reference/global_objects/symbol/asynciterator/index.html b/files/fr/web/javascript/reference/global_objects/symbol/asynciterator/index.html
deleted file mode 100644
index c70f09bb88..0000000000
--- a/files/fr/web/javascript/reference/global_objects/symbol/asynciterator/index.html
+++ /dev/null
@@ -1,79 +0,0 @@
----
-title: Symbol.asyncIterator
-slug: Web/JavaScript/Reference/Global_Objects/Symbol/asyncIterator
-tags:
-  - ECMAScript 2018
-  - JavaScript
-  - Propriété
-  - Reference
-  - Symbole
-translation_of: Web/JavaScript/Reference/Global_Objects/Symbol/asyncIterator
-original_slug: Web/JavaScript/Reference/Objets_globaux/Symbol/asyncIterator
----
-<div>{{JSRef}}</div>
-
-<p>Le symbole connu <code><strong>Symbol.asyncIterator</strong></code> définit l'itérateur asynchrone par défaut d'un objet. Si cette propriété est définie sur un objet, celui-ci est un itérable asynchrone et peut être utilisé avec une boucle <code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/for-await...of">for await...of</a></code>.</p>
-
-<p>{{js_property_attributes(0,0,0)}}</p>
-
-<h2 id="Description">Description</h2>
-
-<p>Le symbole <code>Symbol.asyncIterator</code> est un symbole natif utilisé pour accéder à la méthode <code>@@asyncIterator</code> d'un objet. Pour qu'un objet soit un itérable asynchrone, il doit avoir une clé <code>Symbol.asyncIterator</code>.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Itérable_asynchrone_personnalisé">Itérable asynchrone personnalisé</h3>
-
-<p>Il est possible de définir son propre itérable en définissant la propriété <code>[Symbol.asyncIterator]</code> d'un objet :</p>
-
-<pre class="brush: js">const myAsyncIterable = new Object();
-myAsyncIterable[Symbol.asyncIterator] = async function*() {
-    yield "coucou";
-    yield "l'itération";
-    yield "asynchrone !";
-};
-
-(async () =&gt; {
-    for await (const x of myAsyncIterable) {
-        console.log(x);
-        // expected output:
-        //    "coucou"
-        //    "l'itération"
-        //    "asynchrone !"
-    }
-})();
-</pre>
-
-<h3 id="Itérables_asynchrones_natifs">Itérables asynchrones natifs</h3>
-
-<p>Il n'existe actuellement pas d'objets JavaScript natifs qui possèdent la clé <code>[Symbol.asyncIterator]</code> par défaut. Toutefois, les flux (<em>Streams</em>) WHATWG pourraient devenir les premiers objets natifs itérables asynchrones.</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('ES2018', '#sec-symbol.asynciterator', 'Symbol.asyncIterator')}}</td>
-   <td>{{Spec2('ES2018')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{compat("javascript.builtins.Symbol.asyncIterator")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/JavaScript/Reference/Les_protocoles_iteration">Les protocoles d'itération</a></li>
- <li><code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/for-await...of">for await... of</a></code></li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/symbol/asynciterator/index.md b/files/fr/web/javascript/reference/global_objects/symbol/asynciterator/index.md
new file mode 100644
index 0000000000..502ee237b5
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/symbol/asynciterator/index.md
@@ -0,0 +1,65 @@
+---
+title: Symbol.asyncIterator
+slug: Web/JavaScript/Reference/Global_Objects/Symbol/asyncIterator
+tags:
+  - ECMAScript 2018
+  - JavaScript
+  - Propriété
+  - Reference
+  - Symbole
+translation_of: Web/JavaScript/Reference/Global_Objects/Symbol/asyncIterator
+original_slug: Web/JavaScript/Reference/Objets_globaux/Symbol/asyncIterator
+---
+{{JSRef}}
+
+Le symbole connu **`Symbol.asyncIterator`** définit l'itérateur asynchrone par défaut d'un objet. Si cette propriété est définie sur un objet, celui-ci est un itérable asynchrone et peut être utilisé avec une boucle [`for await...of`](/fr/docs/Web/JavaScript/Reference/Instructions/for-await...of).
+
+{{js_property_attributes(0,0,0)}}
+
+## Description
+
+Le symbole `Symbol.asyncIterator` est un symbole natif utilisé pour accéder à la méthode `@@asyncIterator` d'un objet. Pour qu'un objet soit un itérable asynchrone, il doit avoir une clé `Symbol.asyncIterator`.
+
+## Exemples
+
+### Itérable asynchrone personnalisé
+
+Il est possible de définir son propre itérable en définissant la propriété `[Symbol.asyncIterator]` d'un objet :
+
+```js
+const myAsyncIterable = new Object();
+myAsyncIterable[Symbol.asyncIterator] = async function*() {
+    yield "coucou";
+    yield "l'itération";
+    yield "asynchrone !";
+};
+
+(async () => {
+    for await (const x of myAsyncIterable) {
+        console.log(x);
+        // expected output:
+        //    "coucou"
+        //    "l'itération"
+        //    "asynchrone !"
+    }
+})();
+```
+
+### Itérables asynchrones natifs
+
+Il n'existe actuellement pas d'objets JavaScript natifs qui possèdent la clé `[Symbol.asyncIterator]` par défaut. Toutefois, les flux (_Streams_) WHATWG pourraient devenir les premiers objets natifs itérables asynchrones.
+
+## Spécifications
+
+| Spécification                                                                                        | État                     | Commentaires |
+| ---------------------------------------------------------------------------------------------------- | ------------------------ | ------------ |
+| {{SpecName('ES2018', '#sec-symbol.asynciterator', 'Symbol.asyncIterator')}} | {{Spec2('ES2018')}} |              |
+
+## Compatibilité des navigateurs
+
+{{compat("javascript.builtins.Symbol.asyncIterator")}}
+
+## Voir aussi
+
+- [Les protocoles d'itération](/fr/docs/Web/JavaScript/Reference/Les_protocoles_iteration)
+- [`for await... of`](/fr/docs/Web/JavaScript/Reference/Instructions/for-await...of)
diff --git a/files/fr/web/javascript/reference/global_objects/symbol/description/index.html b/files/fr/web/javascript/reference/global_objects/symbol/description/index.html
deleted file mode 100644
index c538e5f35f..0000000000
--- a/files/fr/web/javascript/reference/global_objects/symbol/description/index.html
+++ /dev/null
@@ -1,71 +0,0 @@
----
-title: Symbol.prototype.description
-slug: Web/JavaScript/Reference/Global_Objects/Symbol/description
-tags:
-  - JavaScript
-  - Propriété
-  - Prototype
-  - Reference
-  - Symbol
-translation_of: Web/JavaScript/Reference/Global_Objects/Symbol/description
-original_slug: Web/JavaScript/Reference/Objets_globaux/Symbol/description
----
-<div>{{JSRef}}</div>
-
-<p>La propriété en lecture seule <code><strong>description</strong></code> est une chaîne de caractères qui renvoie la description optionnelle de l'objet {{jsxref("Symbol")}}.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/symbol-prototype-description.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">Symbol('maDescription').description;
-Symbol.iterator.description;
-Symbol.for('toto').description;
-</pre>
-
-<h2 id="Description">Description</h2>
-
-<p>Les objets {{jsxref("Symbol")}} peuvent être créés avec une description facultative qui peut être utilisée pour du débogage mais sans accéder au symbole. La propriété <code>Symbol.prototype.description</code> peut être utilisée afin de lire cette description. Cette propriété est différente de <code>Symbol.prototype.toString()</code> car elle ne contient pas la chaîne de caractères "<code>Symbol()</code>" autour de la description (voir les exemples qui suivent).</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<pre class="brush: js">Symbol('desc').toString();   // "Symbol(desc)"
-Symbol('desc').description;  // "desc"
-Symbol('').description;      // ""
-Symbol().description;        // undefined
-
-// symboles connus
-Symbol.iterator.toString();  // "Symbol(Symbol.iterator)"
-Symbol.iterator.description; // "Symbol.iterator"
-
-// symboles globaux
-Symbol.for('toto').toString();  // "Symbol(toto)"
-Symbol.for('toto').description; // "toto"
-
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-  </tr>
-  <tr>
-   <td><a href="https://tc39.github.io/proposal-Symbol-description/#sec-symbol.prototype.description">Proposition pour <code>Symbol.prototype.description</code></a></td>
-   <td>Proposition de niveau 4</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Symbol.description")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Symbol.prototype.toString()")}}</li>
- <li>Prothèse d'émulation / <em>Polyfill</em> : <a href="https://npmjs.com/symbol.prototype.description">https://npmjs.com/symbol.prototype.description</a></li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/symbol/description/index.md b/files/fr/web/javascript/reference/global_objects/symbol/description/index.md
new file mode 100644
index 0000000000..d2913955c4
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/symbol/description/index.md
@@ -0,0 +1,59 @@
+---
+title: Symbol.prototype.description
+slug: Web/JavaScript/Reference/Global_Objects/Symbol/description
+tags:
+  - JavaScript
+  - Propriété
+  - Prototype
+  - Reference
+  - Symbol
+translation_of: Web/JavaScript/Reference/Global_Objects/Symbol/description
+original_slug: Web/JavaScript/Reference/Objets_globaux/Symbol/description
+---
+{{JSRef}}
+
+La propriété en lecture seule **`description`** est une chaîne de caractères qui renvoie la description optionnelle de l'objet {{jsxref("Symbol")}}.
+
+{{EmbedInteractiveExample("pages/js/symbol-prototype-description.html")}}
+
+## Syntaxe
+
+    Symbol('maDescription').description;
+    Symbol.iterator.description;
+    Symbol.for('toto').description;
+
+## Description
+
+Les objets {{jsxref("Symbol")}} peuvent être créés avec une description facultative qui peut être utilisée pour du débogage mais sans accéder au symbole. La propriété `Symbol.prototype.description` peut être utilisée afin de lire cette description. Cette propriété est différente de `Symbol.prototype.toString()` car elle ne contient pas la chaîne de caractères "`Symbol()`" autour de la description (voir les exemples qui suivent).
+
+## Exemples
+
+```js
+Symbol('desc').toString();   // "Symbol(desc)"
+Symbol('desc').description;  // "desc"
+Symbol('').description;      // ""
+Symbol().description;        // undefined
+
+// symboles connus
+Symbol.iterator.toString();  // "Symbol(Symbol.iterator)"
+Symbol.iterator.description; // "Symbol.iterator"
+
+// symboles globaux
+Symbol.for('toto').toString();  // "Symbol(toto)"
+Symbol.for('toto').description; // "toto"
+```
+
+## Spécifications
+
+| Spécification                                                                                                                           | État                    |
+| --------------------------------------------------------------------------------------------------------------------------------------- | ----------------------- |
+| [Proposition pour `Symbol.prototype.description`](https://tc39.github.io/proposal-Symbol-description/#sec-symbol.prototype.description) | Proposition de niveau 4 |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Symbol.description")}}
+
+## Voir aussi
+
+- {{jsxref("Symbol.prototype.toString()")}}
+- Prothèse d'émulation / _Polyfill_ : <https://npmjs.com/symbol.prototype.description>
diff --git a/files/fr/web/javascript/reference/global_objects/symbol/for/index.html b/files/fr/web/javascript/reference/global_objects/symbol/for/index.html
deleted file mode 100644
index 06bb734b9f..0000000000
--- a/files/fr/web/javascript/reference/global_objects/symbol/for/index.html
+++ /dev/null
@@ -1,110 +0,0 @@
----
-title: Symbol.for()
-slug: Web/JavaScript/Reference/Global_Objects/Symbol/for
-tags:
-  - ECMAScript 2015
-  - JavaScript
-  - Méthode
-  - Reference
-  - Symbol
-translation_of: Web/JavaScript/Reference/Global_Objects/Symbol/for
-original_slug: Web/JavaScript/Reference/Objets_globaux/Symbol/for
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <code><strong>Symbol.for(clé)</strong></code> permet de chercher parmi les symboles existants enregistrés dans le registre global de l'environnement d'exécution. Si un symbole associé à la clé donnée existe, il est renvoyé par la fonction, sinon un nouveau symbole associé à cette clé est créé dans le registre.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/symbol-for.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>Symbol.for(clé)</var>;</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt>clé</dt>
- <dd>Une chaîne de caractères, obligatoire. La clé correspondant au symbole (également utilisée pour la description du symbole).</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Un symbole existant s'il en a été trouvé un avec la clé fournie. Sinon, un nouveau symbole est créé puis renvoyé par la méthode.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>À la différence de <code>Symbol()</code>, la méthode <code>Symbol.for()</code> crée un symbole enregistré dans le registre global. <code>Symbol.for()</code> ne crée pas nécessairement un nouveau symbole pour chaque appel, elle vérifie d'abord si un symbole avec la <code>clé</code> donnée est d'ores et déjà présent dans le registre. Si c'est le cas, le symbole correspondant est renvoyé, sinon <code>Symbol.for()</code> crée un nouveau symbol global.</p>
-
-<h3 id="Registre_global_pour_les_symboles">Registre global pour les symboles</h3>
-
-<p>Le registre global des symboles est une liste, initialement vide, dont les éléments ont la structure suivante :</p>
-
-<table class="standard-table">
- <caption>Structure d'un enregistrement dans le registre global des symboles</caption>
- <tbody>
-  <tr>
-   <th>Nom du champ</th>
-   <th>Valeur</th>
-  </tr>
-  <tr>
-   <td>[[key]]</td>
-   <td>Une chaîne de caractères représentant la clé pour identifier un symbole en particulier.</td>
-  </tr>
-  <tr>
-   <td>[[symbol]]</td>
-   <td>Un symbole enregistré de façon globale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Exemples">Exemples</h2>
-
-<pre class="brush: js">Symbol.for("toto"); // crée un nouveau symbole global
-Symbol.for("toto"); // renvoie le symbole déjà existant
-
-// Globalement on a un symbole par clé, localement non
-Symbol.for("machin") === Symbol.for("machin"); // true
-Symbol("machin") === Symbol("machin"); // false
-
-// La clé sert également de description
-var sym = Symbol.for("mario");
-sym.toString(); // "Symbol(mario)"
-</pre>
-
-<p>Afin d'éviter des conflits entre les clés des symboles globaux liés à votre application et les autres symboles potentiels (bibliothèques externes, etc...), il peut être judicieux de les préfixer :</p>
-
-<pre class="brush: js">Symbol.for("mdn.toto");
-Symbol.for("mdn.machin");
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-symbol.for', 'Symbol.for')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-symbol.for', 'Symbol.for')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Symbol.for")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Symbol.keyFor()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/symbol/for/index.md b/files/fr/web/javascript/reference/global_objects/symbol/for/index.md
new file mode 100644
index 0000000000..febba50125
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/symbol/for/index.md
@@ -0,0 +1,80 @@
+---
+title: Symbol.for()
+slug: Web/JavaScript/Reference/Global_Objects/Symbol/for
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Méthode
+  - Reference
+  - Symbol
+translation_of: Web/JavaScript/Reference/Global_Objects/Symbol/for
+original_slug: Web/JavaScript/Reference/Objets_globaux/Symbol/for
+---
+{{JSRef}}
+
+La méthode **`Symbol.for(clé)`** permet de chercher parmi les symboles existants enregistrés dans le registre global de l'environnement d'exécution. Si un symbole associé à la clé donnée existe, il est renvoyé par la fonction, sinon un nouveau symbole associé à cette clé est créé dans le registre.
+
+{{EmbedInteractiveExample("pages/js/symbol-for.html")}}
+
+## Syntaxe
+
+    Symbol.for(clé);
+
+### Paramètres
+
+- clé
+  - : Une chaîne de caractères, obligatoire. La clé correspondant au symbole (également utilisée pour la description du symbole).
+
+### Valeur de retour
+
+Un symbole existant s'il en a été trouvé un avec la clé fournie. Sinon, un nouveau symbole est créé puis renvoyé par la méthode.
+
+## Description
+
+À la différence de `Symbol()`, la méthode `Symbol.for()` crée un symbole enregistré dans le registre global. `Symbol.for()` ne crée pas nécessairement un nouveau symbole pour chaque appel, elle vérifie d'abord si un symbole avec la `clé` donnée est d'ores et déjà présent dans le registre. Si c'est le cas, le symbole correspondant est renvoyé, sinon `Symbol.for()` crée un nouveau symbol global.
+
+### Registre global pour les symboles
+
+Le registre global des symboles est une liste, initialement vide, dont les éléments ont la structure suivante :
+
+| Nom du champ | Valeur                                                                                  |
+| ------------ | --------------------------------------------------------------------------------------- |
+| [[key]]      | Une chaîne de caractères représentant la clé pour identifier un symbole en particulier. |
+| [[symbol]]   | Un symbole enregistré de façon globale.                                                 |
+
+## Exemples
+
+```js
+Symbol.for("toto"); // crée un nouveau symbole global
+Symbol.for("toto"); // renvoie le symbole déjà existant
+
+// Globalement on a un symbole par clé, localement non
+Symbol.for("machin") === Symbol.for("machin"); // true
+Symbol("machin") === Symbol("machin"); // false
+
+// La clé sert également de description
+var sym = Symbol.for("mario");
+sym.toString(); // "Symbol(mario)"
+```
+
+Afin d'éviter des conflits entre les clés des symboles globaux liés à votre application et les autres symboles potentiels (bibliothèques externes, etc...), il peut être judicieux de les préfixer :
+
+```js
+Symbol.for("mdn.toto");
+Symbol.for("mdn.machin");
+```
+
+## Spécifications
+
+| Spécification                                                                | État                         | Commentaires         |
+| ---------------------------------------------------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName('ES2015', '#sec-symbol.for', 'Symbol.for')}}     | {{Spec2('ES2015')}}     | Définition initiale. |
+| {{SpecName('ESDraft', '#sec-symbol.for', 'Symbol.for')}} | {{Spec2('ESDraft')}} |                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Symbol.for")}}
+
+## Voir aussi
+
+- {{jsxref("Symbol.keyFor()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/symbol/hasinstance/index.html b/files/fr/web/javascript/reference/global_objects/symbol/hasinstance/index.html
deleted file mode 100644
index 4809e68bcc..0000000000
--- a/files/fr/web/javascript/reference/global_objects/symbol/hasinstance/index.html
+++ /dev/null
@@ -1,64 +0,0 @@
----
-title: Symbol.hasInstance
-slug: Web/JavaScript/Reference/Global_Objects/Symbol/hasInstance
-tags:
-  - ECMAScript 2015
-  - JavaScript
-  - Propriété
-  - Reference
-  - Symbol
-translation_of: Web/JavaScript/Reference/Global_Objects/Symbol/hasInstance
-original_slug: Web/JavaScript/Reference/Objets_globaux/Symbol/hasInstance
----
-<div>{{JSRef}}</div>
-
-<p>Le symbole « connu » <strong><code>Symbol.hasInstance</code></strong> est utilisé afin de déterminer si un objet constructeur reconnaît un objet comme une de ses instances. On peut donc adapter/personnaliser le comportement de l'opérateur {{jsxref("Opérateurs/instanceof", "instanceof")}} grâce à ce symbole.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/symbol-hasinstance.html")}}</div>
-
-
-
-<div>{{js_property_attributes(0,0,0)}}</div>
-
-<h2 id="Exemples">Exemples</h2>
-
-<p>On peut implémenter un comportement différent pour <code>instanceof</code> de cette façon :</p>
-
-<pre class="brush: js">class MonArray {
-  static [Symbol.hasInstance](instance) {
-    return Array.isArray(instance);
-  }
-}
-console.log([] instanceof MonArray); // true</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-symbol.hasinstance', 'Symbol.hasInstance')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-symbol.hasinstance', 'Symbol.hasInstance')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Symbol.hasInstance")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Opérateurs/instanceof", "instanceof")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/symbol/hasinstance/index.md b/files/fr/web/javascript/reference/global_objects/symbol/hasinstance/index.md
new file mode 100644
index 0000000000..164f5067d1
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/symbol/hasinstance/index.md
@@ -0,0 +1,45 @@
+---
+title: Symbol.hasInstance
+slug: Web/JavaScript/Reference/Global_Objects/Symbol/hasInstance
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Propriété
+  - Reference
+  - Symbol
+translation_of: Web/JavaScript/Reference/Global_Objects/Symbol/hasInstance
+original_slug: Web/JavaScript/Reference/Objets_globaux/Symbol/hasInstance
+---
+{{JSRef}}
+
+Le symbole « connu » **`Symbol.hasInstance`** est utilisé afin de déterminer si un objet constructeur reconnaît un objet comme une de ses instances. On peut donc adapter/personnaliser le comportement de l'opérateur {{jsxref("Opérateurs/instanceof", "instanceof")}} grâce à ce symbole.
+
+{{EmbedInteractiveExample("pages/js/symbol-hasinstance.html")}}{{js_property_attributes(0,0,0)}}
+
+## Exemples
+
+On peut implémenter un comportement différent pour `instanceof` de cette façon :
+
+```js
+class MonArray {
+  static [Symbol.hasInstance](instance) {
+    return Array.isArray(instance);
+  }
+}
+console.log([] instanceof MonArray); // true
+```
+
+## Spécifications
+
+| Spécification                                                                                    | État                         | Commentaires         |
+| ------------------------------------------------------------------------------------------------ | ---------------------------- | -------------------- |
+| {{SpecName('ES2015', '#sec-symbol.hasinstance', 'Symbol.hasInstance')}} | {{Spec2('ES2015')}}     | Définition initiale. |
+| {{SpecName('ESDraft', '#sec-symbol.hasinstance', 'Symbol.hasInstance')}} | {{Spec2('ESDraft')}} |                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Symbol.hasInstance")}}
+
+## Voir aussi
+
+- {{jsxref("Opérateurs/instanceof", "instanceof")}}
diff --git a/files/fr/web/javascript/reference/global_objects/symbol/index.html b/files/fr/web/javascript/reference/global_objects/symbol/index.html
deleted file mode 100644
index fdeffa85f1..0000000000
--- a/files/fr/web/javascript/reference/global_objects/symbol/index.html
+++ /dev/null
@@ -1,226 +0,0 @@
----
-title: Symbol
-slug: Web/JavaScript/Reference/Global_Objects/Symbol
-tags:
-  - ECMAScript 2015
-  - JavaScript
-  - Reference
-  - Symbol
-translation_of: Web/JavaScript/Reference/Global_Objects/Symbol
-original_slug: Web/JavaScript/Reference/Objets_globaux/Symbol
----
-<div>{{JSRef}}</div>
-
-<p>Un<strong> symbole</strong> est un <a href="/fr/docs/Web/JavaScript/Structures_de_données#Les_valeurs_primitives">type de données primitif</a> représentant une donnée unique et inchangeable qui peut être utilisée afin de représenter des identifiants pour des propriétés d'un objet. L'objet <code>Symbol</code> est un conteneur objet implicite pour le {{Glossary("Primitive", "type de données primitif")}} symbole.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/symbol-constructor.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">Symbol([<var>description</var>])</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>description</code> {{optional_inline}}</dt>
- <dd>Une chaîne de caractères optionnelle. Correspond à une description du symbole, elle peut être utile pour déboguer (mais pas pour accéder au symbole).</dd>
-</dl>
-
-<h2 id="Description">Description</h2>
-
-<p>Pour créer un nouveau symbole, il suffit d'appeler <code>Symbol()</code>, éventuellement avec une chaîne de caractère descriptive :</p>
-
-<pre class="brush: js">var sym1 = Symbol();
-var sym2 = Symbol("toto");
-var sym3 = Symbol("toto");
-</pre>
-
-<p>Le fragment de code ci-dessus permet de créer trois nouveaux symboles. On notera que l'instruction <code>Symbol("toto")</code> ne convertit pas la chaîne "toto" en un symbole. On crée bien un nouveau symbole pour chaque instruction ci-avant.</p>
-
-<pre class="brush: js">Symbol("toto") === Symbol("toto"); // false</pre>
-
-<p>La syntaxe suivante, utilisant l'opérateur {{jsxref("Opérateurs/L_opérateur_new", "new")}}, entraînera une exception {{jsxref("TypeError")}}:</p>
-
-<pre class="brush: js">var sym = new Symbol(); // TypeError</pre>
-
-<p>Cela est fait pour empêcher d'écrire un conteneur (<em>wrapper</em>) explicite de <code>Symbol</code> plutôt qu'une nouvelle valeur, cela peut être surprenant car généralement, on peut créer des objets « autour » de types primitifs (par exemple avec <code>new Boolean</code>, <code>new String</code> et <code>new Number</code>).</p>
-
-<p>Si on souhaite obtenir un object contenant un symbole, on pourra toujours utiliser la fonction <code>Object()</code> :</p>
-
-<pre class="brush: js">var sym = Symbol("toto");
-typeof sym;     // "symbol"
-var symObj = Object(sym);
-typeof symObj;  // "object"</pre>
-
-<h3 id="Symboles_partagés_et_registre_global_des_symboles">Symboles partagés et registre global des symboles</h3>
-
-<p>La syntaxe manipulée ci-avant, utilisant la fonction <code>Symbol()</code>, ne crée pas un symbole global, disponible partout dans votre code. Pour créer des symboles qui soient disponibles pour différents fichiers et appartiennent à l'environnement global, il faut utiliser les méthodes {{jsxref("Symbol.for()")}} et {{jsxref("Symbol.keyFor()")}} afin de définir et de récupérer les symboles listés dans le registre global.</p>
-
-<h3 id="Trouver_les_propriétés_identifiées_par_des_symboles_pour_un_objet">Trouver les propriétés identifiées par des symboles pour un objet</h3>
-
-<p>La méthode {{jsxref("Object.getOwnPropertySymbols()")}} renvoie un tableau de symboles, permettant ainsi de connaître les propriétés identifiées par un symbole pour un objet donné. À l'initialisation, un objet ne contient aucune propriété propre identifiée par un symbole, ce tableau sera donc vide jusqu'à ce qu'une propriété, identifiée par un symbole, lui soit ajoutée.</p>
-
-<h3 id="Les_symboles_et_les_conversions">Les symboles et les conversions</h3>
-
-<p>Lorsqu'on utilise des mécanismes de conversion de types avec les symboles, on aura le comportement suivant :</p>
-
-<ul>
- <li>Lorsqu'on tente de convertir un symbole en un nombre, cela provoquera une exception {{jsxref("TypeError")}} (par exemple avec <code>+sym</code> ou <code>sym | 0</code>).</li>
- <li>L'égalité faible permet d'obtenir <code>true</code> avec <code>Object(sym) == sym</code><code>.</code></li>
- <li><code>Symbol("toto") + "truc" </code>lève une exception {{jsxref("TypeError")}} (le symbole ne peut pas être converti en une chaîne de caractères), cela permet par exemple d'éviter de créer (sans s'en rendre compte) des noms de propriétés basés sur des symboles.</li>
- <li>La méthode utilisant la conversion avec {{jsxref("String","String()")}} fonctionnera comme un appel à {{jsxref("Symbol.prototype.toString()")}}. En revanche, <code>new String(sym)</code> renverra une erreur.</li>
-</ul>
-
-<h2 id="Propriétés">Propriétés</h2>
-
-<dl>
- <dt><code>Symbol.length</code></dt>
- <dd>La propriété length dont la valeur est 0.</dd>
- <dt>{{jsxref("Symbol.prototype")}}</dt>
- <dd>Cette propriété représente le prototype du constructeur <code>Symbol</code>.</dd>
-</dl>
-
-<h3 id="Symboles_connus">Symboles connus</h3>
-
-<p>En plus des symboles que vous pouvez créer, JavaScript possède certains symboles natifs représentant des aspects internes du langages qui, pour ECMAScript 5 et les versions précédentes, n'étaient pas exposées aux développeurs. Il est possible d'accéder à ces symboles en utilisant les propriétés suivantes :</p>
-
-<h4 id="Symboles_ditération">Symboles d'itération</h4>
-
-<dl>
- <dt>{{jsxref("Symbol.iterator")}}</dt>
- <dd>Une méthode qui renvoie l'itérateur par défaut d'un objet. Ce symbole est utilisé par la boucle {{jsxref("Instructions/for...of","for...of")}}.</dd>
- <dt>{{jsxref("Symbol.asyncIterator")}}</dt>
- <dd>Une méthode qui renvoie l'itérateur asynchrone par défaut d'un objet. Ce symbole est utilisé par la boucle <code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/for-await...of">for await...of</a></code>.</dd>
-</dl>
-
-<h4 id="Symboles_liés_aux_expressions_rationnelles">Symboles liés aux expressions rationnelles</h4>
-
-<dl>
- <dt>{{jsxref("Symbol.match")}}</dt>
- <dd>Une méthode qui fait correspondre une expression rationnelle avec une chaîne de caractères. Elle est aussi utilisée pour déterminer si un objet peut être utilisé comme une expression rationnelle.</dd>
- <dt>{{jsxref("Symbol.matchAll")}}</dt>
- <dd>Une méthode qui renvoie un itérateur permettant de parcourir l'ensemble des correspondances entre une chaîne de caractères et une expression rationnelle. Ce symbole est utilisé par {{jsxref("String.prototype.matchAll()")}}.</dd>
- <dt>{{jsxref("Symbol.replace")}}</dt>
- <dd>Une méthode qui remplace les sous-chaînes correspondantes dans une chaîne de caractères. Utilisée par {{jsxref("String.prototype.replace()")}}.</dd>
- <dt>{{jsxref("Symbol.search")}}</dt>
- <dd>Une méthode qui renvoie l'indice d'une chaîne de caractères pour lequel on a une correspondance avec une expression rationnelle. Utilisée par {{jsxref("String.prototype.search()")}}.</dd>
- <dt>{{jsxref("Symbol.split")}}</dt>
- <dd>Une méthode qui découpe la chaîne à l'indice donné par la correspondance avec une expression rationnelle. Utilisée par {{jsxref("String.prototype.split()")}}.</dd>
-</dl>
-
-<h4 id="Autres_symboles">Autres symboles</h4>
-
-<dl>
- <dt>{{jsxref("Symbol.hasInstance")}}</dt>
- <dd>Une méthode qui permet de déterminer si un constructeur reconnaît un objet comme son instance. Utilisé par {{jsxref("Opérateurs/instanceof", "instanceof")}}.</dd>
- <dt>{{jsxref("Symbol.isConcatSpreadable")}}</dt>
- <dd>Une valeur booléenne qui indique si un objet devrait être réduit à la concaténation des éléments de son tableau via  {{jsxref("Array.prototype.concat()")}}.</dd>
- <dt>{{jsxref("Symbol.unscopables")}}</dt>
- <dd>Un objet dont les noms des propriétés propres et héritées sont exclues de l'objet associé lors de l'utilisation de <code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/with">with</a></code>.</dd>
- <dt>{{jsxref("Symbol.species")}}</dt>
- <dd>Un constructeur utilisé pour construire des objets dérivés.</dd>
- <dt>{{jsxref("Symbol.toPrimitive")}}</dt>
- <dd>Spécifié comme @@toPrimitive. Une méthode qui convertit un objet en sa valeur primitive.</dd>
- <dt>{{jsxref("Symbol.toStringTag")}}</dt>
- <dd>Spécifié comme @@toStringTag. Une chaîne de caractères utilisée pour la description d'un objet. Ce symbole est utilisé par {{jsxref("Object.prototype.toString()")}}.</dd>
-</dl>
-
-<h2 id="Méthodes">Méthodes</h2>
-
-<dl>
- <dt>{{jsxref("Symbol.for()", "Symbol.for(key)")}}</dt>
- <dd>Recherche parmi les symboles existants un symbole désigné par cette clé. S'il est trouvé, le symbole est renvoyé, sinon un nouveau symbole est créé et enregistré avec cette clé dans le registre global des symboles.</dd>
- <dt>{{jsxref("Symbol.keyFor", "Symbol.keyFor(sym)")}}</dt>
- <dd>Pour un symbole donné, récupère la clé d'un symbole partagé depuis le registre global.</dd>
-</dl>
-
-<h2 id="Prototype_Symbol">Prototype <code>Symbol</code></h2>
-
-<p>Tous les symboles héritent de {{jsxref("Symbol.prototype")}}.</p>
-
-<h3 id="Propriétés_2">Propriétés</h3>
-
-<p>{{page('fr/docs/Web/JavaScript/Reference/Objets_globaux/Symbol/prototype','Propri.C3.A9t.C3.A9s')}}</p>
-
-<h3 id="Méthodes_2">Méthodes</h3>
-
-<p>{{page('fr/docs/Web/JavaScript/Reference/Objets_globaux/Symbol/prototype','M.C3.A9thodes')}}</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Utiliser_lopérateur_typeof_avec_des_symboles">Utiliser l'opérateur <code>typeof</code> avec des symboles</h3>
-
-<p>L'opérateur {{jsxref("Opérateurs/L_opérateur_typeof", "typeof")}} permet d'identifier des symboles :</p>
-
-<pre class="brush: js">typeof Symbol() === 'symbol'
-typeof Symbol('toto') === 'symbol'
-typeof Symbol.iterator === 'symbol'
-</pre>
-
-<h3 id="Les_symboles_et_les_boucles_for...in">Les symboles et les boucles <code>for...in</code></h3>
-
-<p>Les symboles ne peuvent pas être énumérés dans les boucles <a href="/fr/docs/JavaScript/Reference/Instructions/for...in"><code>for...in</code></a>. De plus, la méthode {{jsxref("Object.getOwnPropertyNames()")}} ne renverra pas les propriétés identifiées par des symboles. La méthode {{jsxref("Object.getOwnPropertySymbols()")}} permet d'avoir accès à ces propriétés.</p>
-
-<pre class="brush: js">var obj = {};
-
-obj[Symbol("a")] = "a";
-obj[Symbol.for("b")] = "b";
-obj["c"] = "c";
-obj.d = "d";
-
-for (var i in obj) {
-   console.log(i); // enregistre "c" et "d"
-}</pre>
-
-<h3 id="Les_symboles_et_JSON.stringify">Les symboles et <code>JSON.stringify()</code></h3>
-
-<p>Les propriétés identifiées par des symboles seront totalement ignorées par <code>JSON.stringify()</code>:</p>
-
-<pre class="brush: js">JSON.stringify({[Symbol("toto")]: "toto"});
-// '{}'</pre>
-
-<p>Pour plus de détails, voir la page {{jsxref("JSON.stringify()")}}.</p>
-
-<h3 id="Utiliser_les_symboles_enveloppés_dans_un_objet">Utiliser les symboles enveloppés dans un objet</h3>
-
-<p>Lors qu'on on utilise un objet pour contenir la valeur du symbole et faire référence à une propriété, l'objet sera ramené au symbole d'origine :</p>
-
-<pre class="brush: js">var sym = Symbol("toto")
-var obj = {[sym]: 1};
-obj[sym];              // 1
-obj[Object(sym)];      // toujours 1</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-symbol-objects', 'Symbol')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-symbol-objects', 'Symbol')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Symbol")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{Glossary("Symbole","Le type de données Symbol dans le glossaire")}}</li>
- <li>{{jsxref("Opérateurs/L_opérateur_typeof", "typeof")}}</li>
- <li><a href="/fr/docs/Web/JavaScript/Structures_de_données">Les types de données et les structures de données</a></li>
- <li><a href="https://tech.mozfr.org">L'article ES6 en détails sur les symboles disponible sur tech.mozfr.org</a></li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/symbol/index.md b/files/fr/web/javascript/reference/global_objects/symbol/index.md
new file mode 100644
index 0000000000..a4da4d0175
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/symbol/index.md
@@ -0,0 +1,209 @@
+---
+title: Symbol
+slug: Web/JavaScript/Reference/Global_Objects/Symbol
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Reference
+  - Symbol
+translation_of: Web/JavaScript/Reference/Global_Objects/Symbol
+original_slug: Web/JavaScript/Reference/Objets_globaux/Symbol
+---
+{{JSRef}}
+
+Un **symbole** est un [type de données primitif](/fr/docs/Web/JavaScript/Structures_de_données#Les_valeurs_primitives) représentant une donnée unique et inchangeable qui peut être utilisée afin de représenter des identifiants pour des propriétés d'un objet. L'objet `Symbol` est un conteneur objet implicite pour le {{Glossary("Primitive", "type de données primitif")}} symbole.
+
+{{EmbedInteractiveExample("pages/js/symbol-constructor.html")}}
+
+## Syntaxe
+
+    Symbol([description])
+
+### Paramètres
+
+- `description` {{optional_inline}}
+  - : Une chaîne de caractères optionnelle. Correspond à une description du symbole, elle peut être utile pour déboguer (mais pas pour accéder au symbole).
+
+## Description
+
+Pour créer un nouveau symbole, il suffit d'appeler `Symbol()`, éventuellement avec une chaîne de caractère descriptive :
+
+```js
+var sym1 = Symbol();
+var sym2 = Symbol("toto");
+var sym3 = Symbol("toto");
+```
+
+Le fragment de code ci-dessus permet de créer trois nouveaux symboles. On notera que l'instruction `Symbol("toto")` ne convertit pas la chaîne "toto" en un symbole. On crée bien un nouveau symbole pour chaque instruction ci-avant.
+
+```js
+Symbol("toto") === Symbol("toto"); // false
+```
+
+La syntaxe suivante, utilisant l'opérateur {{jsxref("Opérateurs/L_opérateur_new", "new")}}, entraînera une exception {{jsxref("TypeError")}}:
+
+```js
+var sym = new Symbol(); // TypeError
+```
+
+Cela est fait pour empêcher d'écrire un conteneur (_wrapper_) explicite de `Symbol` plutôt qu'une nouvelle valeur, cela peut être surprenant car généralement, on peut créer des objets « autour » de types primitifs (par exemple avec `new Boolean`, `new String` et `new Number`).
+
+Si on souhaite obtenir un object contenant un symbole, on pourra toujours utiliser la fonction `Object()` :
+
+```js
+var sym = Symbol("toto");
+typeof sym;     // "symbol"
+var symObj = Object(sym);
+typeof symObj;  // "object"
+```
+
+### Symboles partagés et registre global des symboles
+
+La syntaxe manipulée ci-avant, utilisant la fonction `Symbol()`, ne crée pas un symbole global, disponible partout dans votre code. Pour créer des symboles qui soient disponibles pour différents fichiers et appartiennent à l'environnement global, il faut utiliser les méthodes {{jsxref("Symbol.for()")}} et {{jsxref("Symbol.keyFor()")}} afin de définir et de récupérer les symboles listés dans le registre global.
+
+### Trouver les propriétés identifiées par des symboles pour un objet
+
+La méthode {{jsxref("Object.getOwnPropertySymbols()")}} renvoie un tableau de symboles, permettant ainsi de connaître les propriétés identifiées par un symbole pour un objet donné. À l'initialisation, un objet ne contient aucune propriété propre identifiée par un symbole, ce tableau sera donc vide jusqu'à ce qu'une propriété, identifiée par un symbole, lui soit ajoutée.
+
+### Les symboles et les conversions
+
+Lorsqu'on utilise des mécanismes de conversion de types avec les symboles, on aura le comportement suivant :
+
+- Lorsqu'on tente de convertir un symbole en un nombre, cela provoquera une exception {{jsxref("TypeError")}} (par exemple avec `+sym` ou `sym | 0`).
+- L'égalité faible permet d'obtenir `true` avec ` Object(sym) == sym``. `
+- `Symbol("toto") + "truc" `lève une exception {{jsxref("TypeError")}} (le symbole ne peut pas être converti en une chaîne de caractères), cela permet par exemple d'éviter de créer (sans s'en rendre compte) des noms de propriétés basés sur des symboles.
+- La méthode utilisant la conversion avec {{jsxref("String","String()")}} fonctionnera comme un appel à {{jsxref("Symbol.prototype.toString()")}}. En revanche, `new String(sym)` renverra une erreur.
+
+## Propriétés
+
+- `Symbol.length`
+  - : La propriété length dont la valeur est 0.
+- {{jsxref("Symbol.prototype")}}
+  - : Cette propriété représente le prototype du constructeur `Symbol`.
+
+### Symboles connus
+
+En plus des symboles que vous pouvez créer, JavaScript possède certains symboles natifs représentant des aspects internes du langages qui, pour ECMAScript 5 et les versions précédentes, n'étaient pas exposées aux développeurs. Il est possible d'accéder à ces symboles en utilisant les propriétés suivantes :
+
+#### Symboles d'itération
+
+- {{jsxref("Symbol.iterator")}}
+  - : Une méthode qui renvoie l'itérateur par défaut d'un objet. Ce symbole est utilisé par la boucle {{jsxref("Instructions/for...of","for...of")}}.
+- {{jsxref("Symbol.asyncIterator")}}
+  - : Une méthode qui renvoie l'itérateur asynchrone par défaut d'un objet. Ce symbole est utilisé par la boucle [`for await...of`](/fr/docs/Web/JavaScript/Reference/Instructions/for-await...of).
+
+#### Symboles liés aux expressions rationnelles
+
+- {{jsxref("Symbol.match")}}
+  - : Une méthode qui fait correspondre une expression rationnelle avec une chaîne de caractères. Elle est aussi utilisée pour déterminer si un objet peut être utilisé comme une expression rationnelle.
+- {{jsxref("Symbol.matchAll")}}
+  - : Une méthode qui renvoie un itérateur permettant de parcourir l'ensemble des correspondances entre une chaîne de caractères et une expression rationnelle. Ce symbole est utilisé par {{jsxref("String.prototype.matchAll()")}}.
+- {{jsxref("Symbol.replace")}}
+  - : Une méthode qui remplace les sous-chaînes correspondantes dans une chaîne de caractères. Utilisée par {{jsxref("String.prototype.replace()")}}.
+- {{jsxref("Symbol.search")}}
+  - : Une méthode qui renvoie l'indice d'une chaîne de caractères pour lequel on a une correspondance avec une expression rationnelle. Utilisée par {{jsxref("String.prototype.search()")}}.
+- {{jsxref("Symbol.split")}}
+  - : Une méthode qui découpe la chaîne à l'indice donné par la correspondance avec une expression rationnelle. Utilisée par {{jsxref("String.prototype.split()")}}.
+
+#### Autres symboles
+
+- {{jsxref("Symbol.hasInstance")}}
+  - : Une méthode qui permet de déterminer si un constructeur reconnaît un objet comme son instance. Utilisé par {{jsxref("Opérateurs/instanceof", "instanceof")}}.
+- {{jsxref("Symbol.isConcatSpreadable")}}
+  - : Une valeur booléenne qui indique si un objet devrait être réduit à la concaténation des éléments de son tableau via  {{jsxref("Array.prototype.concat()")}}.
+- {{jsxref("Symbol.unscopables")}}
+  - : Un objet dont les noms des propriétés propres et héritées sont exclues de l'objet associé lors de l'utilisation de [`with`](/fr/docs/Web/JavaScript/Reference/Instructions/with).
+- {{jsxref("Symbol.species")}}
+  - : Un constructeur utilisé pour construire des objets dérivés.
+- {{jsxref("Symbol.toPrimitive")}}
+  - : Spécifié comme @@toPrimitive. Une méthode qui convertit un objet en sa valeur primitive.
+- {{jsxref("Symbol.toStringTag")}}
+  - : Spécifié comme @@toStringTag. Une chaîne de caractères utilisée pour la description d'un objet. Ce symbole est utilisé par {{jsxref("Object.prototype.toString()")}}.
+
+## Méthodes
+
+- {{jsxref("Symbol.for()", "Symbol.for(key)")}}
+  - : Recherche parmi les symboles existants un symbole désigné par cette clé. S'il est trouvé, le symbole est renvoyé, sinon un nouveau symbole est créé et enregistré avec cette clé dans le registre global des symboles.
+- {{jsxref("Symbol.keyFor", "Symbol.keyFor(sym)")}}
+  - : Pour un symbole donné, récupère la clé d'un symbole partagé depuis le registre global.
+
+## Prototype `Symbol`
+
+Tous les symboles héritent de {{jsxref("Symbol.prototype")}}.
+
+### Propriétés
+
+{{page('fr/docs/Web/JavaScript/Reference/Objets_globaux/Symbol/prototype','Propri.C3.A9t.C3.A9s')}}
+
+### Méthodes
+
+{{page('fr/docs/Web/JavaScript/Reference/Objets_globaux/Symbol/prototype','M.C3.A9thodes')}}
+
+## Exemples
+
+### Utiliser l'opérateur `typeof` avec des symboles
+
+L'opérateur {{jsxref("Opérateurs/L_opérateur_typeof", "typeof")}} permet d'identifier des symboles :
+
+```js
+typeof Symbol() === 'symbol'
+typeof Symbol('toto') === 'symbol'
+typeof Symbol.iterator === 'symbol'
+```
+
+### Les symboles et les boucles `for...in`
+
+Les symboles ne peuvent pas être énumérés dans les boucles [`for...in`](/fr/docs/JavaScript/Reference/Instructions/for...in). De plus, la méthode {{jsxref("Object.getOwnPropertyNames()")}} ne renverra pas les propriétés identifiées par des symboles. La méthode {{jsxref("Object.getOwnPropertySymbols()")}} permet d'avoir accès à ces propriétés.
+
+```js
+var obj = {};
+
+obj[Symbol("a")] = "a";
+obj[Symbol.for("b")] = "b";
+obj["c"] = "c";
+obj.d = "d";
+
+for (var i in obj) {
+   console.log(i); // enregistre "c" et "d"
+}
+```
+
+### Les symboles et `JSON.stringify()`
+
+Les propriétés identifiées par des symboles seront totalement ignorées par `JSON.stringify()`:
+
+```js
+JSON.stringify({[Symbol("toto")]: "toto"});
+// '{}'
+```
+
+Pour plus de détails, voir la page {{jsxref("JSON.stringify()")}}.
+
+### Utiliser les symboles enveloppés dans un objet
+
+Lors qu'on on utilise un objet pour contenir la valeur du symbole et faire référence à une propriété, l'objet sera ramené au symbole d'origine :
+
+```js
+var sym = Symbol("toto")
+var obj = {[sym]: 1};
+obj[sym];              // 1
+obj[Object(sym)];      // toujours 1
+```
+
+## Spécifications
+
+| Spécification                                                                | État                         | Commentaires         |
+| ---------------------------------------------------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName('ES2015', '#sec-symbol-objects', 'Symbol')}}     | {{Spec2('ES2015')}}     | Définition initiale. |
+| {{SpecName('ESDraft', '#sec-symbol-objects', 'Symbol')}} | {{Spec2('ESDraft')}} |                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Symbol")}}
+
+## Voir aussi
+
+- {{Glossary("Symbole","Le type de données Symbol dans le glossaire")}}
+- {{jsxref("Opérateurs/L_opérateur_typeof", "typeof")}}
+- [Les types de données et les structures de données](/fr/docs/Web/JavaScript/Structures_de_données)
+- [L'article ES6 en détails sur les symboles disponible sur tech.mozfr.org](https://tech.mozfr.org)
diff --git a/files/fr/web/javascript/reference/global_objects/symbol/isconcatspreadable/index.html b/files/fr/web/javascript/reference/global_objects/symbol/isconcatspreadable/index.html
deleted file mode 100644
index 4d106382a2..0000000000
--- a/files/fr/web/javascript/reference/global_objects/symbol/isconcatspreadable/index.html
+++ /dev/null
@@ -1,109 +0,0 @@
----
-title: Symbol.isConcatSpreadable
-slug: Web/JavaScript/Reference/Global_Objects/Symbol/isConcatSpreadable
-tags:
-  - ECMAScript 2015
-  - JavaScript
-  - Propriété
-  - Reference
-  - Symbol
-translation_of: Web/JavaScript/Reference/Global_Objects/Symbol/isConcatSpreadable
-original_slug: Web/JavaScript/Reference/Objets_globaux/Symbol/isConcatSpreadable
----
-<div>{{JSRef}}</div>
-
-<p>Le symbole connu <strong><code>Symbol.isConcatSpreadable</code></strong> est utilisé pour configurer la façon dont un tableau est aplati lors d'une concaténation via la méthode  {{jsxref("Array.prototype.concat()")}}.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/symbol-isconcatspreadable.html")}}</div>
-
-
-
-<h2 id="Description">Description</h2>
-
-<p>Le symbole <code>@@isConcatSpreadable</code> (<code>Symbol.isConcatSpreadable</code>) peut être défini comme une propriété propre ou héritée. C'est une valeur booléenne qui contrôle le comportement des tableaux et des objets semblables à des tableaux :</p>
-
-<ul>
- <li>Pour les tableaux, <code>concat</code> aplatira les tableaux par défaut. <code>Symbol.isConcatSpreadable</code> peut être utilisé pour obtenir le comportement opposé.</li>
- <li>Pour les objets semblables à des tableaux, par défaut, il n'y aucune mise à plat. <code>Symbol.isConcatSpreadable</code> permet de forcer cette mise à plat.</li>
-</ul>
-
-<p>{{js_property_attributes(0,0,0)}}</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Tableaux_(Array)">Tableaux (<code>Array</code>)</h3>
-
-<p>Par défaut, {{jsxref("Array.prototype.concat()")}} aplatit les tableaux pour le résultat de la concaténation :</p>
-
-<pre class="brush: js">var alpha = ['a', 'b', 'c'],
-    numérique = [1, 2, 3];
-
-var alphaNumérique = alpha.concat(numérique);
-
-console.log(alphaNumérique);
-// Résultat : ['a', 'b', 'c', 1, 2, 3]
-</pre>
-
-<p>En définissant <code>Symbol.isConcatSpreadable</code> avec <code>false</code>, on peut désactiver le comportement par défaut :</p>
-
-<pre class="brush: js">var alpha = ['a', 'b', 'c'],
-    numérique = [1, 2, 3];
-
-numérique[Symbol.isConcatSpreadable] = false;
-var alphaNumérique = alpha.concat(numérique);
-
-console.log(alphaNumérique);
-// Résultat: ['a', 'b', 'c', [1, 2, 3] ]
-</pre>
-
-<h3 id="Objets_semblables_à_des_tableaux">Objets semblables à des tableaux</h3>
-
-<p>Pour les objets semblables à un tableau, par défaut, il n'y a pas de fusion. Il faut donc que <code>Symbol.isConcatSpreadable</code> vaille <code>true</code> pour aplatir le tableau :</p>
-
-<pre class="brush: js">var x = [1, 2, 3];
-
-var fauxTableau = {
-  [Symbol.isConcatSpreadable]: true,
-  length: 2,
-  0: "coucou",
-  1: "monde"
-}
-
-x.concat(fauxTableau); // [1, 2, 3, "coucou", "monde"]
-</pre>
-
-<div class="note">
-<p><strong>Note :</strong> La propriété <code>length</code> indique ici le nombre de propriétés à ajouter au tableau.</p>
-</div>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-symbol.isconcatspreadable', 'Symbol.isconcatspreadable')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-symbol.isconcatspreadable', 'Symbol.isconcatspreadable')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td>Aucune modification.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Symbol.isConcatSpreadable")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Array.prototype.concat()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/symbol/isconcatspreadable/index.md b/files/fr/web/javascript/reference/global_objects/symbol/isconcatspreadable/index.md
new file mode 100644
index 0000000000..503c3b97af
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/symbol/isconcatspreadable/index.md
@@ -0,0 +1,89 @@
+---
+title: Symbol.isConcatSpreadable
+slug: Web/JavaScript/Reference/Global_Objects/Symbol/isConcatSpreadable
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Propriété
+  - Reference
+  - Symbol
+translation_of: Web/JavaScript/Reference/Global_Objects/Symbol/isConcatSpreadable
+original_slug: Web/JavaScript/Reference/Objets_globaux/Symbol/isConcatSpreadable
+---
+{{JSRef}}
+
+Le symbole connu **`Symbol.isConcatSpreadable`** est utilisé pour configurer la façon dont un tableau est aplati lors d'une concaténation via la méthode  {{jsxref("Array.prototype.concat()")}}.
+
+{{EmbedInteractiveExample("pages/js/symbol-isconcatspreadable.html")}}
+
+## Description
+
+Le symbole `@@isConcatSpreadable` (`Symbol.isConcatSpreadable`) peut être défini comme une propriété propre ou héritée. C'est une valeur booléenne qui contrôle le comportement des tableaux et des objets semblables à des tableaux :
+
+- Pour les tableaux, `concat` aplatira les tableaux par défaut. `Symbol.isConcatSpreadable` peut être utilisé pour obtenir le comportement opposé.
+- Pour les objets semblables à des tableaux, par défaut, il n'y aucune mise à plat. `Symbol.isConcatSpreadable` permet de forcer cette mise à plat.
+
+{{js_property_attributes(0,0,0)}}
+
+## Exemples
+
+### Tableaux (`Array`)
+
+Par défaut, {{jsxref("Array.prototype.concat()")}} aplatit les tableaux pour le résultat de la concaténation :
+
+```js
+var alpha = ['a', 'b', 'c'],
+    numérique = [1, 2, 3];
+
+var alphaNumérique = alpha.concat(numérique);
+
+console.log(alphaNumérique);
+// Résultat : ['a', 'b', 'c', 1, 2, 3]
+```
+
+En définissant `Symbol.isConcatSpreadable` avec `false`, on peut désactiver le comportement par défaut :
+
+```js
+var alpha = ['a', 'b', 'c'],
+    numérique = [1, 2, 3];
+
+numérique[Symbol.isConcatSpreadable] = false;
+var alphaNumérique = alpha.concat(numérique);
+
+console.log(alphaNumérique);
+// Résultat: ['a', 'b', 'c', [1, 2, 3] ]
+```
+
+### Objets semblables à des tableaux
+
+Pour les objets semblables à un tableau, par défaut, il n'y a pas de fusion. Il faut donc que `Symbol.isConcatSpreadable` vaille `true` pour aplatir le tableau :
+
+```js
+var x = [1, 2, 3];
+
+var fauxTableau = {
+  [Symbol.isConcatSpreadable]: true,
+  length: 2,
+  0: "coucou",
+  1: "monde"
+}
+
+x.concat(fauxTableau); // [1, 2, 3, "coucou", "monde"]
+```
+
+> **Note :** La propriété `length` indique ici le nombre de propriétés à ajouter au tableau.
+
+## Spécifications
+
+| Spécification                                                                                                        | État                         | Commentaires         |
+| -------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName('ES2015', '#sec-symbol.isconcatspreadable', 'Symbol.isconcatspreadable')}}     | {{Spec2('ES2015')}}     | Définition initiale. |
+| {{SpecName('ESDraft', '#sec-symbol.isconcatspreadable', 'Symbol.isconcatspreadable')}} | {{Spec2('ESDraft')}} | Aucune modification. |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Symbol.isConcatSpreadable")}}
+
+## Voir aussi
+
+- {{jsxref("Array.prototype.concat()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/symbol/iterator/index.html b/files/fr/web/javascript/reference/global_objects/symbol/iterator/index.html
deleted file mode 100644
index 2b3d9bf367..0000000000
--- a/files/fr/web/javascript/reference/global_objects/symbol/iterator/index.html
+++ /dev/null
@@ -1,121 +0,0 @@
----
-title: Symbol.iterator
-slug: Web/JavaScript/Reference/Global_Objects/Symbol/iterator
-tags:
-  - ECMAScript 2015
-  - JavaScript
-  - Propriété
-  - Reference
-  - Symbol
-translation_of: Web/JavaScript/Reference/Global_Objects/Symbol/iterator
-original_slug: Web/JavaScript/Reference/Objets_globaux/Symbol/iterator
----
-<div>{{JSRef}}</div>
-
-<p>Le symbole <code><strong>Symbol.iterator</strong></code> définit l'itérateur par défaut d'un objet. C'est l'itérateur qui sera utilisé par <a href="/fr/docs/Web/JavaScript/Reference/Instructions/for...of"><code>for...of</code></a>.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/symbol-iterator.html")}}</div>
-
-
-
-<h2 id="Description">Description</h2>
-
-<p>Lorsqu'on doit itérer sur un objet (par exemple avec une boucle <code>for..of</code>), sa méthode <code>@@iterator</code> est appelée sans argument et l'itérateur renvoyé par la méthode est utilisé pour récupérer les valeurs sur lesquelles itérer.</p>
-
-<p>Certains types natifs possèdent un comportement par défaut pour l'itération, d'autres types (tels qu'{{jsxref("Object")}}) n'ont pas de tel comportement. Les types natifs qui disposent d'une méthode <code>@@iterator</code> sont :</p>
-
-<ul>
- <li>{{jsxref("Array.@@iterator", "Array.prototype[@@iterator]()")}}</li>
- <li>{{jsxref("TypedArray.@@iterator", "TypedArray.prototype[@@iterator]()")}}</li>
- <li>{{jsxref("String.@@iterator", "String.prototype[@@iterator]()")}}</li>
- <li>{{jsxref("Map.@@iterator", "Map.prototype[@@iterator]()")}}</li>
- <li>{{jsxref("Set.@@iterator", "Set.prototype[@@iterator]()")}}</li>
-</ul>
-
-<p>Pour plus d'informations, voir aussi <a href="/fr/docs/Web/JavaScript/Reference/Les_protocoles_iteration">la page sur les protocoles d'itération</a>.</p>
-
-<p>{{js_property_attributes(0,0,0)}}</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Itérables_définis_par_l'utilisateur">Itérables définis par l'utilisateur</h3>
-
-<p>Il est possible de construire un itérable de la façon suivante :</p>
-
-<pre class="brush: js">var monItérable = {}
-monItérable[Symbol.iterator] = function* () {
-    yield 1;
-    yield 2;
-    yield 3;
-};
-[...monItérable] // [1, 2, 3]
-</pre>
-
-<p>On peut également définir ces itérables via des propriétés calculées dans des déclarations de classe ou dans des littéraux objets :</p>
-
-<pre class="brush: js">class Toto {
-  *[Symbol.iterator] () {
-    yield 1;
-    yield 2;
-    yield 3;
-  }
-}
-
-const monObj = {
-  *[Symbol.iterator] () {
-    yield "a";
-    yield "b";
-  }
-}
-
-[... new Toto] // [1, 2, 3]
-[... monObj]   // ["a", "b"]
-</pre>
-
-<h3 id="Itérables_mal-formés">Itérables mal-formés</h3>
-
-<p>Si la méthode <code>@@iterator</code> d'un itérable ne renvoie pas un itérateur, on dira que c'est un itérable mal-formé. Utiliser un tel itérable peut provoquer des erreurs lors de l'exécution :</p>
-
-<pre class="brush: js">var itérableMalFormé = {}
-itérableMalFormé[Symbol.iterator] = () =&gt; 1
-[...itérableMalFormé] // TypeError: [] is not a function
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-symbol.iterator', 'Symbol.iterator')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-symbol.iterator', 'Symbol.iterator')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Symbol.iterator")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/JavaScript/Reference/Les_protocoles_iteration">Les protocoles d'itération</a></li>
- <li>{{jsxref("Array.@@iterator", "Array.prototype[@@iterator]()")}}</li>
- <li>{{jsxref("TypedArray.@@iterator", "TypedArray.prototype[@@iterator]()")}}</li>
- <li>{{jsxref("String.@@iterator", "String.prototype[@@iterator]()")}}</li>
- <li>{{jsxref("Map.@@iterator", "Map.prototype[@@iterator]()")}}</li>
- <li>{{jsxref("Set.@@iterator", "Set.prototype[@@iterator]()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/symbol/iterator/index.md b/files/fr/web/javascript/reference/global_objects/symbol/iterator/index.md
new file mode 100644
index 0000000000..7b3abbbe88
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/symbol/iterator/index.md
@@ -0,0 +1,101 @@
+---
+title: Symbol.iterator
+slug: Web/JavaScript/Reference/Global_Objects/Symbol/iterator
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Propriété
+  - Reference
+  - Symbol
+translation_of: Web/JavaScript/Reference/Global_Objects/Symbol/iterator
+original_slug: Web/JavaScript/Reference/Objets_globaux/Symbol/iterator
+---
+{{JSRef}}
+
+Le symbole **`Symbol.iterator`** définit l'itérateur par défaut d'un objet. C'est l'itérateur qui sera utilisé par [`for...of`](/fr/docs/Web/JavaScript/Reference/Instructions/for...of).
+
+{{EmbedInteractiveExample("pages/js/symbol-iterator.html")}}
+
+## Description
+
+Lorsqu'on doit itérer sur un objet (par exemple avec une boucle `for..of`), sa méthode `@@iterator` est appelée sans argument et l'itérateur renvoyé par la méthode est utilisé pour récupérer les valeurs sur lesquelles itérer.
+
+Certains types natifs possèdent un comportement par défaut pour l'itération, d'autres types (tels qu'{{jsxref("Object")}}) n'ont pas de tel comportement. Les types natifs qui disposent d'une méthode `@@iterator` sont :
+
+- {{jsxref("Array.@@iterator", "Array.prototype[@@iterator]()")}}
+- {{jsxref("TypedArray.@@iterator", "TypedArray.prototype[@@iterator]()")}}
+- {{jsxref("String.@@iterator", "String.prototype[@@iterator]()")}}
+- {{jsxref("Map.@@iterator", "Map.prototype[@@iterator]()")}}
+- {{jsxref("Set.@@iterator", "Set.prototype[@@iterator]()")}}
+
+Pour plus d'informations, voir aussi [la page sur les protocoles d'itération](/fr/docs/Web/JavaScript/Reference/Les_protocoles_iteration).
+
+{{js_property_attributes(0,0,0)}}
+
+## Exemples
+
+### Itérables définis par l'utilisateur
+
+Il est possible de construire un itérable de la façon suivante :
+
+```js
+var monItérable = {}
+monItérable[Symbol.iterator] = function* () {
+    yield 1;
+    yield 2;
+    yield 3;
+};
+[...monItérable] // [1, 2, 3]
+```
+
+On peut également définir ces itérables via des propriétés calculées dans des déclarations de classe ou dans des littéraux objets :
+
+```js
+class Toto {
+  *[Symbol.iterator] () {
+    yield 1;
+    yield 2;
+    yield 3;
+  }
+}
+
+const monObj = {
+  *[Symbol.iterator] () {
+    yield "a";
+    yield "b";
+  }
+}
+
+[... new Toto] // [1, 2, 3]
+[... monObj]   // ["a", "b"]
+```
+
+### Itérables mal-formés
+
+Si la méthode `@@iterator` d'un itérable ne renvoie pas un itérateur, on dira que c'est un itérable mal-formé. Utiliser un tel itérable peut provoquer des erreurs lors de l'exécution :
+
+```js
+var itérableMalFormé = {}
+itérableMalFormé[Symbol.iterator] = () => 1
+[...itérableMalFormé] // TypeError: [] is not a function
+```
+
+## Spécifications
+
+| Spécification                                                                            | État                         | Commentaires         |
+| ---------------------------------------------------------------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName('ES2015', '#sec-symbol.iterator', 'Symbol.iterator')}} | {{Spec2('ES2015')}}     | Définition initiale. |
+| {{SpecName('ESDraft', '#sec-symbol.iterator', 'Symbol.iterator')}} | {{Spec2('ESDraft')}} |                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Symbol.iterator")}}
+
+## Voir aussi
+
+- [Les protocoles d'itération](/fr/docs/Web/JavaScript/Reference/Les_protocoles_iteration)
+- {{jsxref("Array.@@iterator", "Array.prototype[@@iterator]()")}}
+- {{jsxref("TypedArray.@@iterator", "TypedArray.prototype[@@iterator]()")}}
+- {{jsxref("String.@@iterator", "String.prototype[@@iterator]()")}}
+- {{jsxref("Map.@@iterator", "Map.prototype[@@iterator]()")}}
+- {{jsxref("Set.@@iterator", "Set.prototype[@@iterator]()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/symbol/keyfor/index.html b/files/fr/web/javascript/reference/global_objects/symbol/keyfor/index.html
deleted file mode 100644
index 804b089fe1..0000000000
--- a/files/fr/web/javascript/reference/global_objects/symbol/keyfor/index.html
+++ /dev/null
@@ -1,77 +0,0 @@
----
-title: Symbol.keyFor()
-slug: Web/JavaScript/Reference/Global_Objects/Symbol/keyFor
-tags:
-  - ECMAScript 2015
-  - JavaScript
-  - Méthode
-  - Reference
-  - Symbol
-translation_of: Web/JavaScript/Reference/Global_Objects/Symbol/keyFor
-original_slug: Web/JavaScript/Reference/Objets_globaux/Symbol/keyFor
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <code><strong>Symbol.keyFor(sym)</strong></code> permet de récupérer la clé d'un symbole donné qui est partagé via le registre global des symboles.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/symbol-keyfor.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">Symbol.keyFor(<var>sym</var>);</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>sym</code></dt>
- <dd>Le symbole dont on souhaite connaître la clé. Ce paramètre est obligatoire.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Une chaîne de caractères qui représente la clé d'un symbole donné si celui-ci est trouvé dans le registre global ou {{jsxref("undefined")}} sinon.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<pre class="brush: js">var symboleGlobal = Symbol.for("toto"); // on crée un symbole global
-Symbol.keyFor(symboleGlobal); // "toto"
-
-var symboleLocal = Symbol();
-Symbol.keyFor(symboleLocal); // undefined
-
-// les symboles connus ne sont pas dans le registre
-// global
-Symbol.keyFor(Symbol.iterator); // undefined
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-symbol.keyfor', 'Symbol.keyFor')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-symbol.keyfor', 'Symbol.keyFor')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Symbol.keyFor")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Symbol.for()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/symbol/keyfor/index.md b/files/fr/web/javascript/reference/global_objects/symbol/keyfor/index.md
new file mode 100644
index 0000000000..d9963f9a23
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/symbol/keyfor/index.md
@@ -0,0 +1,59 @@
+---
+title: Symbol.keyFor()
+slug: Web/JavaScript/Reference/Global_Objects/Symbol/keyFor
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Méthode
+  - Reference
+  - Symbol
+translation_of: Web/JavaScript/Reference/Global_Objects/Symbol/keyFor
+original_slug: Web/JavaScript/Reference/Objets_globaux/Symbol/keyFor
+---
+{{JSRef}}
+
+La méthode **`Symbol.keyFor(sym)`** permet de récupérer la clé d'un symbole donné qui est partagé via le registre global des symboles.
+
+{{EmbedInteractiveExample("pages/js/symbol-keyfor.html")}}
+
+## Syntaxe
+
+    Symbol.keyFor(sym);
+
+### Paramètres
+
+- `sym`
+  - : Le symbole dont on souhaite connaître la clé. Ce paramètre est obligatoire.
+
+### Valeur de retour
+
+Une chaîne de caractères qui représente la clé d'un symbole donné si celui-ci est trouvé dans le registre global ou {{jsxref("undefined")}} sinon.
+
+## Exemples
+
+```js
+var symboleGlobal = Symbol.for("toto"); // on crée un symbole global
+Symbol.keyFor(symboleGlobal); // "toto"
+
+var symboleLocal = Symbol();
+Symbol.keyFor(symboleLocal); // undefined
+
+// les symboles connus ne sont pas dans le registre
+// global
+Symbol.keyFor(Symbol.iterator); // undefined
+```
+
+## Spécifications
+
+| Spécification                                                                        | État                         | Commentaires         |
+| ------------------------------------------------------------------------------------ | ---------------------------- | -------------------- |
+| {{SpecName('ES2015', '#sec-symbol.keyfor', 'Symbol.keyFor')}}     | {{Spec2('ES2015')}}     | Définition initiale. |
+| {{SpecName('ESDraft', '#sec-symbol.keyfor', 'Symbol.keyFor')}} | {{Spec2('ESDraft')}} |                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Symbol.keyFor")}}
+
+## Voir aussi
+
+- {{jsxref("Symbol.for()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/symbol/match/index.html b/files/fr/web/javascript/reference/global_objects/symbol/match/index.html
deleted file mode 100644
index c1b0aed572..0000000000
--- a/files/fr/web/javascript/reference/global_objects/symbol/match/index.html
+++ /dev/null
@@ -1,78 +0,0 @@
----
-title: Symbol.match
-slug: Web/JavaScript/Reference/Global_Objects/Symbol/match
-tags:
-  - ECMAScript 2015
-  - JavaScript
-  - Propriété
-  - Reference
-  - Symbol
-translation_of: Web/JavaScript/Reference/Global_Objects/Symbol/match
-original_slug: Web/JavaScript/Reference/Objets_globaux/Symbol/match
----
-<div>{{JSRef}}</div>
-
-<p>Le symbole <code><strong>Symbol.match</strong></code> définit la correspondance d'une expression rationnelle par rapport à une chaîne de caractères. Cette fonction est appelée par la méthode {{jsxref("String.prototype.match()")}}.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/symbol-match.html")}}</div>
-
-
-
-<h2 id="Description">Description</h2>
-
-<p>Cette fonction est également utilisée pour identifier les objets qui jouent un rôle avec les expressions rationnelles. Ainsi, les méthodes {{jsxref("String.prototype.startsWith()")}}, {{jsxref("String.prototype.endsWith()")}} et {{jsxref("String.prototype.includes()")}} vérifient si leur premier argument est une expression rationnelle et lèvent une exception {{jsxref("TypeError")}} si c'est le cas. Si le symbole <code>match</code> est modifié et vaut une valeur <code>false</code> (ou équivalente), cela indique que l'objet ne doit pas être utilisé comme une expression rationnelle.</p>
-
-<p>{{js_property_attributes(0,0,0)}}</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<p>Le code suivant renverra une exception {{jsxref("TypeError")}} :</p>
-
-<pre class="brush: js">"/truc/".startsWith(/truc/);
-
-// lève une TypeError car /truc/
-// est une expression rationnelle
-// et que Symbol.match n'a pas été modifié.</pre>
-
-<p>Cependant, si <code>Symbol.match</code> vaut <code>false</code>, cette vérification <code>isRegExp</code> indiquera que l'objet à prendre en compte n'est pas une expression rationnelle. Les méthodes <code>startsWith</code> et <code>endsWith</code> ne déclencheront donc pas d'exception <code>TypeError</code>.</p>
-
-<pre class="brush: js">var re = /toto/;
-re[Symbol.match] = false;
-"/toto/".startsWith(re); // true
-"/truc/".endsWith(re);   // false
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-symbol.match', 'Symbol.match')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-symbol.match', 'Symbol.match')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Symbol.match")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Symbol.replace")}}</li>
- <li>{{jsxref("Symbol.search")}}</li>
- <li>{{jsxref("Symbol.split")}}</li>
- <li>{{jsxref("RegExp.@@match", "RegExp.prototype[@@match]()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/symbol/match/index.md b/files/fr/web/javascript/reference/global_objects/symbol/match/index.md
new file mode 100644
index 0000000000..ec609b6c6a
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/symbol/match/index.md
@@ -0,0 +1,62 @@
+---
+title: Symbol.match
+slug: Web/JavaScript/Reference/Global_Objects/Symbol/match
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Propriété
+  - Reference
+  - Symbol
+translation_of: Web/JavaScript/Reference/Global_Objects/Symbol/match
+original_slug: Web/JavaScript/Reference/Objets_globaux/Symbol/match
+---
+{{JSRef}}
+
+Le symbole **`Symbol.match`** définit la correspondance d'une expression rationnelle par rapport à une chaîne de caractères. Cette fonction est appelée par la méthode {{jsxref("String.prototype.match()")}}.
+
+{{EmbedInteractiveExample("pages/js/symbol-match.html")}}
+
+## Description
+
+Cette fonction est également utilisée pour identifier les objets qui jouent un rôle avec les expressions rationnelles. Ainsi, les méthodes {{jsxref("String.prototype.startsWith()")}}, {{jsxref("String.prototype.endsWith()")}} et {{jsxref("String.prototype.includes()")}} vérifient si leur premier argument est une expression rationnelle et lèvent une exception {{jsxref("TypeError")}} si c'est le cas. Si le symbole `match` est modifié et vaut une valeur `false` (ou équivalente), cela indique que l'objet ne doit pas être utilisé comme une expression rationnelle.
+
+{{js_property_attributes(0,0,0)}}
+
+## Exemples
+
+Le code suivant renverra une exception {{jsxref("TypeError")}} :
+
+```js
+"/truc/".startsWith(/truc/);
+
+// lève une TypeError car /truc/
+// est une expression rationnelle
+// et que Symbol.match n'a pas été modifié.
+```
+
+Cependant, si `Symbol.match` vaut `false`, cette vérification `isRegExp` indiquera que l'objet à prendre en compte n'est pas une expression rationnelle. Les méthodes `startsWith` et `endsWith` ne déclencheront donc pas d'exception `TypeError`.
+
+```js
+var re = /toto/;
+re[Symbol.match] = false;
+"/toto/".startsWith(re); // true
+"/truc/".endsWith(re);   // false
+```
+
+## Spécifications
+
+| Spécification                                                                    | État                         | Commentaires         |
+| -------------------------------------------------------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName('ES2015', '#sec-symbol.match', 'Symbol.match')}} | {{Spec2('ES2015')}}     | Définition initiale. |
+| {{SpecName('ESDraft', '#sec-symbol.match', 'Symbol.match')}} | {{Spec2('ESDraft')}} |                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Symbol.match")}}
+
+## Voir aussi
+
+- {{jsxref("Symbol.replace")}}
+- {{jsxref("Symbol.search")}}
+- {{jsxref("Symbol.split")}}
+- {{jsxref("RegExp.@@match", "RegExp.prototype[@@match]()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/symbol/matchall/index.html b/files/fr/web/javascript/reference/global_objects/symbol/matchall/index.html
deleted file mode 100644
index e3fa6b44aa..0000000000
--- a/files/fr/web/javascript/reference/global_objects/symbol/matchall/index.html
+++ /dev/null
@@ -1,64 +0,0 @@
----
-title: Symbol.matchAll
-slug: Web/JavaScript/Reference/Global_Objects/Symbol/matchAll
-tags:
-  - JavaScript
-  - Propriété
-  - Reference
-  - Symbol
-translation_of: Web/JavaScript/Reference/Global_Objects/Symbol/matchAll
-original_slug: Web/JavaScript/Reference/Objets_globaux/Symbol/matchAll
----
-<div>{{JSRef}}</div>
-
-<p>Le symbole connu <code><strong>Symbol.matchAll</strong></code> renvoie un itérateur qui fournit l'ensemble des correspondances entre une expression rationnelle et une chaîne de caractères. Cette fonction est implicitement appelée par la méthode {{jsxref("String.prototype.matchAll()")}}.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/symbol-matchall.html")}}</div>
-
-<h2 id="Description">Description</h2>
-
-<div>
-<p>Ce symbole est utilisé par {{jsxref("String.prototype.matchAll()")}} et plus particulièrement par {{jsxref("RegExp.@@matchAll", "RegExp.prototype[@@matchAll]()")}}. Les deux lignes qui suivent renverront le même résultat :</p>
-
-<pre class="brush: js">'abc'.matchAll(/a/);
-
-/a/[Symbol.matchAll]('abc');</pre>
-
-<p>Cette méthode existe afin de personnaliser le comportement des correspondances pour les sous-classes de {{jsxref("RegExp")}}.</p>
-
-<p>{{js_property_attributes(0,0,0)}}</p>
-</div>
-
-<h2 id="Exemples">Exemples</h2>
-
-<p>Voir les pages {{jsxref("String.prototype.matchAll()")}} et {{jsxref("RegExp.@@matchAll", "RegExp.prototype[@@matchAll]()")}} pour plus d'exemples.</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-symbol.matchall', 'Symbol.matchAll')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Symbol.matchAll")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("String.prototype.matchAll()")}}</li>
- <li>{{jsxref("RegExp.@@matchAll", "RegExp.prototype[@@matchAll]()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/symbol/matchall/index.md b/files/fr/web/javascript/reference/global_objects/symbol/matchall/index.md
new file mode 100644
index 0000000000..ef0df351c6
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/symbol/matchall/index.md
@@ -0,0 +1,49 @@
+---
+title: Symbol.matchAll
+slug: Web/JavaScript/Reference/Global_Objects/Symbol/matchAll
+tags:
+  - JavaScript
+  - Propriété
+  - Reference
+  - Symbol
+translation_of: Web/JavaScript/Reference/Global_Objects/Symbol/matchAll
+original_slug: Web/JavaScript/Reference/Objets_globaux/Symbol/matchAll
+---
+{{JSRef}}
+
+Le symbole connu **`Symbol.matchAll`** renvoie un itérateur qui fournit l'ensemble des correspondances entre une expression rationnelle et une chaîne de caractères. Cette fonction est implicitement appelée par la méthode {{jsxref("String.prototype.matchAll()")}}.
+
+{{EmbedInteractiveExample("pages/js/symbol-matchall.html")}}
+
+## Description
+
+Ce symbole est utilisé par {{jsxref("String.prototype.matchAll()")}} et plus particulièrement par {{jsxref("RegExp.@@matchAll", "RegExp.prototype[@@matchAll]()")}}. Les deux lignes qui suivent renverront le même résultat :
+
+```js
+'abc'.matchAll(/a/);
+
+/a/[Symbol.matchAll]('abc');
+```
+
+Cette méthode existe afin de personnaliser le comportement des correspondances pour les sous-classes de {{jsxref("RegExp")}}.
+
+{{js_property_attributes(0,0,0)}}
+
+## Exemples
+
+Voir les pages {{jsxref("String.prototype.matchAll()")}} et {{jsxref("RegExp.@@matchAll", "RegExp.prototype[@@matchAll]()")}} pour plus d'exemples.
+
+## Spécifications
+
+| Spécification                                                                            | État                         | Commentaires |
+| ---------------------------------------------------------------------------------------- | ---------------------------- | ------------ |
+| {{SpecName('ESDraft', '#sec-symbol.matchall', 'Symbol.matchAll')}} | {{Spec2('ESDraft')}} |              |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Symbol.matchAll")}}
+
+## Voir aussi
+
+- {{jsxref("String.prototype.matchAll()")}}
+- {{jsxref("RegExp.@@matchAll", "RegExp.prototype[@@matchAll]()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/symbol/replace/index.html b/files/fr/web/javascript/reference/global_objects/symbol/replace/index.html
deleted file mode 100644
index 8b8e11ecbb..0000000000
--- a/files/fr/web/javascript/reference/global_objects/symbol/replace/index.html
+++ /dev/null
@@ -1,58 +0,0 @@
----
-title: Symbol.replace
-slug: Web/JavaScript/Reference/Global_Objects/Symbol/replace
-tags:
-  - ECMAScript 2015
-  - JavaScript
-  - Propriété
-  - Reference
-  - Symbol
-translation_of: Web/JavaScript/Reference/Global_Objects/Symbol/replace
-original_slug: Web/JavaScript/Reference/Objets_globaux/Symbol/replace
----
-<div>{{JSRef}}</div>
-
-<p>Le symbole connu <code><strong>Symbol.replace</strong></code> définit la méthode utilisée pour remplacer les correspondances trouvées dans une chaîne de caractères. Cette fonction est appelée par la méthode {{jsxref("String.prototype.replace()")}}.</p>
-
-<p>Pour plus d'informations, se référer aux pages sur {{jsxref("RegExp.@@replace", "RegExp.prototype[@@replace]()")}} et {{jsxref("String.prototype.replace()")}}.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/symbol-replace.html")}}</div>
-
-
-
-<div>{{js_property_attributes(0,0,0)}}</div>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-symbol.replace', 'Symbol.replace')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-symbol.replace', 'Symbol.replace')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Symbol.replace")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Symbol.match")}}</li>
- <li>{{jsxref("Symbol.search")}}</li>
- <li>{{jsxref("Symbol.split")}}</li>
- <li>{{jsxref("RegExp.@@replace", "RegExp.prototype[@@replace]()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/symbol/replace/index.md b/files/fr/web/javascript/reference/global_objects/symbol/replace/index.md
new file mode 100644
index 0000000000..6ec4f7d191
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/symbol/replace/index.md
@@ -0,0 +1,37 @@
+---
+title: Symbol.replace
+slug: Web/JavaScript/Reference/Global_Objects/Symbol/replace
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Propriété
+  - Reference
+  - Symbol
+translation_of: Web/JavaScript/Reference/Global_Objects/Symbol/replace
+original_slug: Web/JavaScript/Reference/Objets_globaux/Symbol/replace
+---
+{{JSRef}}
+
+Le symbole connu **`Symbol.replace`** définit la méthode utilisée pour remplacer les correspondances trouvées dans une chaîne de caractères. Cette fonction est appelée par la méthode {{jsxref("String.prototype.replace()")}}.
+
+Pour plus d'informations, se référer aux pages sur {{jsxref("RegExp.@@replace", "RegExp.prototype[@@replace]()")}} et {{jsxref("String.prototype.replace()")}}.
+
+{{EmbedInteractiveExample("pages/js/symbol-replace.html")}}{{js_property_attributes(0,0,0)}}
+
+## Spécifications
+
+| Spécification                                                                        | État                         | Commentaires         |
+| ------------------------------------------------------------------------------------ | ---------------------------- | -------------------- |
+| {{SpecName('ES2015', '#sec-symbol.replace', 'Symbol.replace')}} | {{Spec2('ES2015')}}     | Définition initiale. |
+| {{SpecName('ESDraft', '#sec-symbol.replace', 'Symbol.replace')}} | {{Spec2('ESDraft')}} |                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Symbol.replace")}}
+
+## Voir aussi
+
+- {{jsxref("Symbol.match")}}
+- {{jsxref("Symbol.search")}}
+- {{jsxref("Symbol.split")}}
+- {{jsxref("RegExp.@@replace", "RegExp.prototype[@@replace]()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/symbol/search/index.html b/files/fr/web/javascript/reference/global_objects/symbol/search/index.html
deleted file mode 100644
index 0b517d7c13..0000000000
--- a/files/fr/web/javascript/reference/global_objects/symbol/search/index.html
+++ /dev/null
@@ -1,58 +0,0 @@
----
-title: Symbol.search
-slug: Web/JavaScript/Reference/Global_Objects/Symbol/search
-tags:
-  - ECMAScript 2015
-  - JavaScript
-  - Propriété
-  - Reference
-  - Symbol
-translation_of: Web/JavaScript/Reference/Global_Objects/Symbol/search
-original_slug: Web/JavaScript/Reference/Objets_globaux/Symbol/search
----
-<div>{{JSRef}}</div>
-
-<p>Le symbole connu <code><strong>Symbol.search</strong></code> définit la méthode qui renvoie l'indice indiquant la position d'une correspondance trouvée dans une chaîne de caractères grâce à une expression rationnelle. Cette fonction est appelée par la méthode {{jsxref("String.prototype.search()")}}.</p>
-
-<p>Pour plus d'informations, se référer aux pages sur {{jsxref("RegExp.@@search", "RegExp.prototype[@@search]()")}} et {{jsxref("String.prototype.search()")}}.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/symbol-search.html")}}</div>
-
-
-
-<div>{{js_property_attributes(0,0,0)}}</div>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-symbol.search', 'Symbol.search')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-symbol.search', 'Symbol.search')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Symbol.search")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Symbol.match")}}</li>
- <li>{{jsxref("Symbol.replace")}}</li>
- <li>{{jsxref("Symbol.split")}}</li>
- <li>{{jsxref("RegExp.@@search", "RegExp.prototype[@@search]()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/symbol/search/index.md b/files/fr/web/javascript/reference/global_objects/symbol/search/index.md
new file mode 100644
index 0000000000..ac3ddb1ae3
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/symbol/search/index.md
@@ -0,0 +1,37 @@
+---
+title: Symbol.search
+slug: Web/JavaScript/Reference/Global_Objects/Symbol/search
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Propriété
+  - Reference
+  - Symbol
+translation_of: Web/JavaScript/Reference/Global_Objects/Symbol/search
+original_slug: Web/JavaScript/Reference/Objets_globaux/Symbol/search
+---
+{{JSRef}}
+
+Le symbole connu **`Symbol.search`** définit la méthode qui renvoie l'indice indiquant la position d'une correspondance trouvée dans une chaîne de caractères grâce à une expression rationnelle. Cette fonction est appelée par la méthode {{jsxref("String.prototype.search()")}}.
+
+Pour plus d'informations, se référer aux pages sur {{jsxref("RegExp.@@search", "RegExp.prototype[@@search]()")}} et {{jsxref("String.prototype.search()")}}.
+
+{{EmbedInteractiveExample("pages/js/symbol-search.html")}}{{js_property_attributes(0,0,0)}}
+
+## Spécifications
+
+| Spécification                                                                        | État                         | Commentaires         |
+| ------------------------------------------------------------------------------------ | ---------------------------- | -------------------- |
+| {{SpecName('ES2015', '#sec-symbol.search', 'Symbol.search')}}     | {{Spec2('ES2015')}}     | Définition initiale. |
+| {{SpecName('ESDraft', '#sec-symbol.search', 'Symbol.search')}} | {{Spec2('ESDraft')}} |                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Symbol.search")}}
+
+## Voir aussi
+
+- {{jsxref("Symbol.match")}}
+- {{jsxref("Symbol.replace")}}
+- {{jsxref("Symbol.split")}}
+- {{jsxref("RegExp.@@search", "RegExp.prototype[@@search]()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/symbol/species/index.html b/files/fr/web/javascript/reference/global_objects/symbol/species/index.html
deleted file mode 100644
index 1d533ecbc4..0000000000
--- a/files/fr/web/javascript/reference/global_objects/symbol/species/index.html
+++ /dev/null
@@ -1,72 +0,0 @@
----
-title: Symbol.species
-slug: Web/JavaScript/Reference/Global_Objects/Symbol/species
-tags:
-  - ECMAScript 2015
-  - JavaScript
-  - Propriété
-  - Reference
-  - Symbol
-translation_of: Web/JavaScript/Reference/Global_Objects/Symbol/species
-original_slug: Web/JavaScript/Reference/Objets_globaux/Symbol/species
----
-<div>{{JSRef}}</div>
-
-<p>Le symbole <code><strong>Symbol.species</strong></code> correspond à une fonction utilisée comme constructeur pour créer des objets dérivés.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/symbol-species.html")}}</div>
-
-
-
-<h2 id="Description">Description</h2>
-
-<p>L'accesseur <code>species</code> permettent aux classes filles de surcharger le constructeur par défaut des objets.</p>
-
-<p>{{js_property_attributes(0,0,0)}}</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<p>Dans certains cas, vous pouvez avoir besoin de renvoyer {{jsxref("Array")}} pour les objets de votre classe dérivée <code>MonArray</code>. Cela permet par exemple d'utiliser le constructeur par défaut lors d'un appel à {{jsxref("Array.map", "map()")}}. De cette façon, ces méthodes renverront un objet <code>Array</code> plutôt qu'un objet <code>MonArray</code>. Grâce au symbole <code>species</code>, vous pouvez donc faire :</p>
-
-<pre class="brush: js">class MonArray extends Array {
-  // On surcharge species avec le constructeur parent Array
-  static get [Symbol.species]() { return Array; }
-}
-var a = new MonArray(1,2,3);
-var mapped = a.map(x =&gt; x * x);
-
-console.log(mapped instanceof MonArray); // false
-console.log(mapped instanceof Array);    // true</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-symbol.species', 'Symbol.species')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-symbol.species', 'Symbol.species')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Symbol.species")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Map.@@species", "Map[@@species]")}}</li>
- <li>{{jsxref("Set.@@species", "Set[@@species]")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/symbol/species/index.md b/files/fr/web/javascript/reference/global_objects/symbol/species/index.md
new file mode 100644
index 0000000000..8301da4fa2
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/symbol/species/index.md
@@ -0,0 +1,55 @@
+---
+title: Symbol.species
+slug: Web/JavaScript/Reference/Global_Objects/Symbol/species
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Propriété
+  - Reference
+  - Symbol
+translation_of: Web/JavaScript/Reference/Global_Objects/Symbol/species
+original_slug: Web/JavaScript/Reference/Objets_globaux/Symbol/species
+---
+{{JSRef}}
+
+Le symbole **`Symbol.species`** correspond à une fonction utilisée comme constructeur pour créer des objets dérivés.
+
+{{EmbedInteractiveExample("pages/js/symbol-species.html")}}
+
+## Description
+
+L'accesseur `species` permettent aux classes filles de surcharger le constructeur par défaut des objets.
+
+{{js_property_attributes(0,0,0)}}
+
+## Exemples
+
+Dans certains cas, vous pouvez avoir besoin de renvoyer {{jsxref("Array")}} pour les objets de votre classe dérivée `MonArray`. Cela permet par exemple d'utiliser le constructeur par défaut lors d'un appel à {{jsxref("Array.map", "map()")}}. De cette façon, ces méthodes renverront un objet `Array` plutôt qu'un objet `MonArray`. Grâce au symbole `species`, vous pouvez donc faire :
+
+```js
+class MonArray extends Array {
+  // On surcharge species avec le constructeur parent Array
+  static get [Symbol.species]() { return Array; }
+}
+var a = new MonArray(1,2,3);
+var mapped = a.map(x => x * x);
+
+console.log(mapped instanceof MonArray); // false
+console.log(mapped instanceof Array);    // true
+```
+
+## Spécifications
+
+| Spécification                                                                        | État                         | Commentaires         |
+| ------------------------------------------------------------------------------------ | ---------------------------- | -------------------- |
+| {{SpecName('ES2015', '#sec-symbol.species', 'Symbol.species')}} | {{Spec2('ES2015')}}     | Définition initiale. |
+| {{SpecName('ESDraft', '#sec-symbol.species', 'Symbol.species')}} | {{Spec2('ESDraft')}} |                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Symbol.species")}}
+
+## Voir aussi
+
+- {{jsxref("Map.@@species", "Map[@@species]")}}
+- {{jsxref("Set.@@species", "Set[@@species]")}}
diff --git a/files/fr/web/javascript/reference/global_objects/symbol/split/index.html b/files/fr/web/javascript/reference/global_objects/symbol/split/index.html
deleted file mode 100644
index 46b881a57b..0000000000
--- a/files/fr/web/javascript/reference/global_objects/symbol/split/index.html
+++ /dev/null
@@ -1,58 +0,0 @@
----
-title: Symbol.split
-slug: Web/JavaScript/Reference/Global_Objects/Symbol/split
-tags:
-  - ECMAScript 2015
-  - JavaScript
-  - Propriété
-  - Reference
-  - Symbol
-translation_of: Web/JavaScript/Reference/Global_Objects/Symbol/split
-original_slug: Web/JavaScript/Reference/Objets_globaux/Symbol/split
----
-<div>{{JSRef}}</div>
-
-<p>Le symbole connu <code><strong>Symbol.split</strong></code> définit la méthode qui est utilisée pour découper une chaîne de caractères à l'emplacement où une correspondance a été trouvée grâce à une expression rationnelle. Cette fonction est appelée par la méthode {{jsxref("String.prototype.split()")}}.</p>
-
-<p>Pour plus d'informations, se référer aux pages sur {{jsxref("RegExp.@@split", "RegExp.prototype[@@split]()")}} et {{jsxref("String.prototype.split()")}}.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/symbol-split.html")}}</div>
-
-
-
-<div>{{js_property_attributes(0,0,0)}}</div>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-symbol.split', 'Symbol.split')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-symbol.split', 'Symbol.split')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Symbol.split")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Symbol.match")}}</li>
- <li>{{jsxref("Symbol.replace")}}</li>
- <li>{{jsxref("Symbol.search")}}</li>
- <li>{{jsxref("RegExp.@@split", "RegExp.prototype[@@split]()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/symbol/split/index.md b/files/fr/web/javascript/reference/global_objects/symbol/split/index.md
new file mode 100644
index 0000000000..b1e4f5b419
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/symbol/split/index.md
@@ -0,0 +1,37 @@
+---
+title: Symbol.split
+slug: Web/JavaScript/Reference/Global_Objects/Symbol/split
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Propriété
+  - Reference
+  - Symbol
+translation_of: Web/JavaScript/Reference/Global_Objects/Symbol/split
+original_slug: Web/JavaScript/Reference/Objets_globaux/Symbol/split
+---
+{{JSRef}}
+
+Le symbole connu **`Symbol.split`** définit la méthode qui est utilisée pour découper une chaîne de caractères à l'emplacement où une correspondance a été trouvée grâce à une expression rationnelle. Cette fonction est appelée par la méthode {{jsxref("String.prototype.split()")}}.
+
+Pour plus d'informations, se référer aux pages sur {{jsxref("RegExp.@@split", "RegExp.prototype[@@split]()")}} et {{jsxref("String.prototype.split()")}}.
+
+{{EmbedInteractiveExample("pages/js/symbol-split.html")}}{{js_property_attributes(0,0,0)}}
+
+## Spécifications
+
+| Spécification                                                                    | État                         | Commentaires         |
+| -------------------------------------------------------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName('ES2015', '#sec-symbol.split', 'Symbol.split')}} | {{Spec2('ES2015')}}     | Définition initiale. |
+| {{SpecName('ESDraft', '#sec-symbol.split', 'Symbol.split')}} | {{Spec2('ESDraft')}} |                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Symbol.split")}}
+
+## Voir aussi
+
+- {{jsxref("Symbol.match")}}
+- {{jsxref("Symbol.replace")}}
+- {{jsxref("Symbol.search")}}
+- {{jsxref("RegExp.@@split", "RegExp.prototype[@@split]()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/symbol/toprimitive/index.html b/files/fr/web/javascript/reference/global_objects/symbol/toprimitive/index.html
deleted file mode 100644
index 61a0cc823f..0000000000
--- a/files/fr/web/javascript/reference/global_objects/symbol/toprimitive/index.html
+++ /dev/null
@@ -1,87 +0,0 @@
----
-title: Symbol.toPrimitive
-slug: Web/JavaScript/Reference/Global_Objects/Symbol/toPrimitive
-tags:
-  - ECMAScript 2015
-  - JavaScript
-  - Propriété
-  - Reference
-  - Symbol
-translation_of: Web/JavaScript/Reference/Global_Objects/Symbol/toPrimitive
-original_slug: Web/JavaScript/Reference/Objets_globaux/Symbol/toPrimitive
----
-<div>{{JSRef}}</div>
-
-<p>Le symbole « connu » <code><strong>Symbol.toPrimitive</strong></code> définit une fonction qui est appelée pour convertir un objet en une valeur primitive.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/symbol-toprimitive.html")}}</div>
-
-
-
-<h2 id="Description">Description</h2>
-
-<p>Lorsqu'on convertit un objet en une valeur primitive et que l'objet possède une propriété <code>Symbol.toPrimitive</code> dont la valeur est une fonction, la fonction est appelée avec une chaîne de caractère (<code>hint</code>) qui définit le type qu'on privilégie pour la valeur primitive. L'argument <code>hint</code> peut prendre l'une des valeurs suivantes : <code>"number"</code>, <code>"string"</code> ou <code>"default"</code>.</p>
-
-<p>{{js_property_attributes(0,0,0)}}</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<p>Dans l'exemple qui suit, on voit comment la propriété <code>Symbol.toPrimitive</code> peut modifier la valeur primitive obtenue lors de la conversion d'un objet.</p>
-
-<pre class="brush: js">// Premier cas avec un objet sans Symbol.toPrimitive.
-let obj1 = {};
-console.log(+obj1);     // NaN
-console.log(`${obj1}`); // "[object Object]"
-console.log(obj1 + ""); // "[object Object]"
-
-// Second cas : l'objet a une propriété Symbol.toPrimitive
-var obj2 = {
-  [Symbol.toPrimitive](hint) {
-    if (hint === "number") {
-      return 10;
-    }
-    if (hint === "string") {
-      return "coucou";
-    }
-    return true;
-  }
-};
-console.log(+obj2);     // 10       -- hint vaut "number"
-console.log(`${obj2}`); // "coucou" -- hint vaut "string"
-console.log(obj2 + ""); // true     -- hint vaut "default"
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Etat</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-symbol.toprimitive', 'Symbol.toPrimitive')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-symbol.toprimitive', 'Symbol.toPrimitive')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Symbol.toPrimitive")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Date.@@toPrimitive", "Date.prototype[@@toPrimitive]")}}</li>
- <li>{{jsxref("Symbol.@@toPrimitive", "Symbol.prototype[@@toPrimitive]")}}</li>
- <li>{{jsxref("Object.prototype.toString()")}}</li>
- <li>{{jsxref("Object.prototype.valueOf()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/symbol/toprimitive/index.md b/files/fr/web/javascript/reference/global_objects/symbol/toprimitive/index.md
new file mode 100644
index 0000000000..8d73e8466e
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/symbol/toprimitive/index.md
@@ -0,0 +1,69 @@
+---
+title: Symbol.toPrimitive
+slug: Web/JavaScript/Reference/Global_Objects/Symbol/toPrimitive
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Propriété
+  - Reference
+  - Symbol
+translation_of: Web/JavaScript/Reference/Global_Objects/Symbol/toPrimitive
+original_slug: Web/JavaScript/Reference/Objets_globaux/Symbol/toPrimitive
+---
+{{JSRef}}
+
+Le symbole « connu » **`Symbol.toPrimitive`** définit une fonction qui est appelée pour convertir un objet en une valeur primitive.
+
+{{EmbedInteractiveExample("pages/js/symbol-toprimitive.html")}}
+
+## Description
+
+Lorsqu'on convertit un objet en une valeur primitive et que l'objet possède une propriété `Symbol.toPrimitive` dont la valeur est une fonction, la fonction est appelée avec une chaîne de caractère (`hint`) qui définit le type qu'on privilégie pour la valeur primitive. L'argument `hint` peut prendre l'une des valeurs suivantes : `"number"`, `"string"` ou `"default"`.
+
+{{js_property_attributes(0,0,0)}}
+
+## Exemples
+
+Dans l'exemple qui suit, on voit comment la propriété `Symbol.toPrimitive` peut modifier la valeur primitive obtenue lors de la conversion d'un objet.
+
+```js
+// Premier cas avec un objet sans Symbol.toPrimitive.
+let obj1 = {};
+console.log(+obj1);     // NaN
+console.log(`${obj1}`); // "[object Object]"
+console.log(obj1 + ""); // "[object Object]"
+
+// Second cas : l'objet a une propriété Symbol.toPrimitive
+var obj2 = {
+  [Symbol.toPrimitive](hint) {
+    if (hint === "number") {
+      return 10;
+    }
+    if (hint === "string") {
+      return "coucou";
+    }
+    return true;
+  }
+};
+console.log(+obj2);     // 10       -- hint vaut "number"
+console.log(`${obj2}`); // "coucou" -- hint vaut "string"
+console.log(obj2 + ""); // true     -- hint vaut "default"
+```
+
+## Spécifications
+
+| Spécification                                                                                    | Etat                         | Commentaires         |
+| ------------------------------------------------------------------------------------------------ | ---------------------------- | -------------------- |
+| {{SpecName('ES2015', '#sec-symbol.toprimitive', 'Symbol.toPrimitive')}} | {{Spec2('ES2015')}}     | Définition initiale. |
+| {{SpecName('ESDraft', '#sec-symbol.toprimitive', 'Symbol.toPrimitive')}} | {{Spec2('ESDraft')}} |                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Symbol.toPrimitive")}}
+
+## Voir aussi
+
+- {{jsxref("Date.@@toPrimitive", "Date.prototype[@@toPrimitive]")}}
+- {{jsxref("Symbol.@@toPrimitive", "Symbol.prototype[@@toPrimitive]")}}
+- {{jsxref("Object.prototype.toString()")}}
+- {{jsxref("Object.prototype.valueOf()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/symbol/tosource/index.html b/files/fr/web/javascript/reference/global_objects/symbol/tosource/index.html
deleted file mode 100644
index 45796e26bb..0000000000
--- a/files/fr/web/javascript/reference/global_objects/symbol/tosource/index.html
+++ /dev/null
@@ -1,59 +0,0 @@
----
-title: Symbol.prototype.toSource()
-slug: Web/JavaScript/Reference/Global_Objects/Symbol/toSource
-tags:
-  - JavaScript
-  - Méthode
-  - Non-standard
-  - Prototype
-  - Reference
-  - Symbol
-translation_of: Web/JavaScript/Reference/Global_Objects/Symbol/toSource
-original_slug: Web/JavaScript/Reference/Objets_globaux/Symbol/toSource
----
-<div>{{JSRef}} {{non-standard_header}}</div>
-
-<p>La méthode <code><strong>toSource()</strong></code> renvoie une chaîne de caractères représentant le code source de l'objet.</p>
-
-<p>L'utilisation de cette méthode est généralement interne au moteur JavaScript.</p>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>Symbol</var>.toSource();
-
-var <var>sym</var> = Symbol();
-<var>sym</var>.toSource();</pre>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Une chaîne de caractères qui représente le code source de l'objet.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>La méthode <code>toSource</code> renvoie les valeurs suivantes :</p>
-
-<ul>
- <li>Pour l'objet <code>Symbol</code> natif, <code>toSource()</code> renvoie la chaîne suivante, indiquant que le code source n'est pas disponible :
-
-  <pre class="brush:js">"function Symbol() {
-   [native code]
-}"</pre>
- </li>
- <li>Pour les instances de <code>Symbol</code>, <code>toSource()</code> renvoie une chaîne représentant le code source :
-  <pre class="brush: js">"Symbol()"</pre>
- </li>
-</ul>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<p>Cette méthode ne fait partie d'aucun standard.</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Symbol.toSource")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Object.prototype.toSource()")}} {{Non-standard_inline()}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/symbol/tosource/index.md b/files/fr/web/javascript/reference/global_objects/symbol/tosource/index.md
new file mode 100644
index 0000000000..0a19959210
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/symbol/tosource/index.md
@@ -0,0 +1,59 @@
+---
+title: Symbol.prototype.toSource()
+slug: Web/JavaScript/Reference/Global_Objects/Symbol/toSource
+tags:
+  - JavaScript
+  - Méthode
+  - Non-standard
+  - Prototype
+  - Reference
+  - Symbol
+translation_of: Web/JavaScript/Reference/Global_Objects/Symbol/toSource
+original_slug: Web/JavaScript/Reference/Objets_globaux/Symbol/toSource
+---
+{{JSRef}} {{non-standard_header}}
+
+La méthode **`toSource()`** renvoie une chaîne de caractères représentant le code source de l'objet.
+
+L'utilisation de cette méthode est généralement interne au moteur JavaScript.
+
+## Syntaxe
+
+    Symbol.toSource();
+
+    var sym = Symbol();
+    sym.toSource();
+
+### Valeur de retour
+
+Une chaîne de caractères qui représente le code source de l'objet.
+
+## Description
+
+La méthode `toSource` renvoie les valeurs suivantes :
+
+- Pour l'objet `Symbol` natif, `toSource()` renvoie la chaîne suivante, indiquant que le code source n'est pas disponible :
+
+  ```js
+    "function Symbol() {
+       [native code]
+    }"
+    ```
+
+- Pour les instances de `Symbol`, `toSource()` renvoie une chaîne représentant le code source :
+
+  ```js
+    "Symbol()"
+    ```
+
+## Spécifications
+
+Cette méthode ne fait partie d'aucun standard.
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Symbol.toSource")}}
+
+## Voir aussi
+
+- {{jsxref("Object.prototype.toSource()")}} {{Non-standard_inline()}}
diff --git a/files/fr/web/javascript/reference/global_objects/symbol/tostring/index.html b/files/fr/web/javascript/reference/global_objects/symbol/tostring/index.html
deleted file mode 100644
index 7ab3b55791..0000000000
--- a/files/fr/web/javascript/reference/global_objects/symbol/tostring/index.html
+++ /dev/null
@@ -1,79 +0,0 @@
----
-title: Symbol.prototype.toString()
-slug: Web/JavaScript/Reference/Global_Objects/Symbol/toString
-tags:
-  - ECMAScript 2015
-  - JavaScript
-  - Méthode
-  - Prototype
-  - Reference
-  - Symbol
-translation_of: Web/JavaScript/Reference/Global_Objects/Symbol/toString
-original_slug: Web/JavaScript/Reference/Objets_globaux/Symbol/toString
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <code><strong>toString()</strong></code> renvoie une chaîne de caractères représentant l'objet <code>Symbol</code>.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/symbol-prototype-tostring.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>Symbol().toString()</var>;</pre>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Une chaîne de caractères qui représente l'objet {{jsxref("Symbol")}}.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>L'objet {{jsxref("Symbol")}} surcharge la méthode <code>toString()</code> d'{{jsxref("Object")}} et n'hérite pas de {{jsxref("Object.prototype.toString()")}}. Pour les objets <code>Symbol</code>, la méthode <code>toString()</code> renvoie représentation de l'objet sous forme d'une chaîne de caractères.</p>
-
-<h3 id="Concaténation_de_chaînes_et_symboles">Concaténation de chaînes et symboles</h3>
-
-<p>Bien qu'il soit possible d'appeler <code>toString()</code> pour les symboles, il n'est pas possible de concaténer une chaîne de caractères avec ce type d'objet :</p>
-
-<pre class="brush: js">Symbol("toto") + "machin";  // TypeError : Impossible de convertir un symbole en chaîne de caractères</pre>
-
-<h2 id="Exemples">Exemples</h2>
-
-<pre class="brush: js">Symbol("desc").toString();   // "Symbol(desc)"
-
-// symboles connus
-Symbol.iterator.toString();  // "Symbol(Symbol.iterator)
-
-// symboles globaux
-Symbol.for("toto").toString() // "Symbol(toto)"
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-symbol.prototype.tostring', 'Symbol.prototype.toString')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td>Définition initiale</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-symbol.prototype.tostring', 'Symbol.prototype.toString')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Symbol.toString")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Object.prototype.toString()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/symbol/tostring/index.md b/files/fr/web/javascript/reference/global_objects/symbol/tostring/index.md
new file mode 100644
index 0000000000..6f9bcd119f
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/symbol/tostring/index.md
@@ -0,0 +1,65 @@
+---
+title: Symbol.prototype.toString()
+slug: Web/JavaScript/Reference/Global_Objects/Symbol/toString
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - Symbol
+translation_of: Web/JavaScript/Reference/Global_Objects/Symbol/toString
+original_slug: Web/JavaScript/Reference/Objets_globaux/Symbol/toString
+---
+{{JSRef}}
+
+La méthode **`toString()`** renvoie une chaîne de caractères représentant l'objet `Symbol`.
+
+{{EmbedInteractiveExample("pages/js/symbol-prototype-tostring.html")}}
+
+## Syntaxe
+
+    Symbol().toString();
+
+### Valeur de retour
+
+Une chaîne de caractères qui représente l'objet {{jsxref("Symbol")}}.
+
+## Description
+
+L'objet {{jsxref("Symbol")}} surcharge la méthode `toString()` d'{{jsxref("Object")}} et n'hérite pas de {{jsxref("Object.prototype.toString()")}}. Pour les objets `Symbol`, la méthode `toString()` renvoie représentation de l'objet sous forme d'une chaîne de caractères.
+
+### Concaténation de chaînes et symboles
+
+Bien qu'il soit possible d'appeler `toString()` pour les symboles, il n'est pas possible de concaténer une chaîne de caractères avec ce type d'objet :
+
+```js
+Symbol("toto") + "machin";  // TypeError : Impossible de convertir un symbole en chaîne de caractères
+```
+
+## Exemples
+
+```js
+Symbol("desc").toString();   // "Symbol(desc)"
+
+// symboles connus
+Symbol.iterator.toString();  // "Symbol(Symbol.iterator)
+
+// symboles globaux
+Symbol.for("toto").toString() // "Symbol(toto)"
+```
+
+## Spécifications
+
+| Spécification                                                                                                        | État                         | Commentaires        |
+| -------------------------------------------------------------------------------------------------------------------- | ---------------------------- | ------------------- |
+| {{SpecName('ES2015', '#sec-symbol.prototype.tostring', 'Symbol.prototype.toString')}}     | {{Spec2('ES2015')}}     | Définition initiale |
+| {{SpecName('ESDraft', '#sec-symbol.prototype.tostring', 'Symbol.prototype.toString')}} | {{Spec2('ESDraft')}} |                     |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Symbol.toString")}}
+
+## Voir aussi
+
+- {{jsxref("Object.prototype.toString()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/symbol/tostringtag/index.html b/files/fr/web/javascript/reference/global_objects/symbol/tostringtag/index.html
deleted file mode 100644
index a5c2a0a439..0000000000
--- a/files/fr/web/javascript/reference/global_objects/symbol/tostringtag/index.html
+++ /dev/null
@@ -1,92 +0,0 @@
----
-title: Symbol.toStringTag
-slug: Web/JavaScript/Reference/Global_Objects/Symbol/toStringTag
-tags:
-  - ECMAScript 2015
-  - JavaScript
-  - Propriété
-  - Reference
-  - Symbol
-translation_of: Web/JavaScript/Reference/Global_Objects/Symbol/toStringTag
-original_slug: Web/JavaScript/Reference/Objets_globaux/Symbol/toStringTag
----
-<div>{{JSRef}}</div>
-
-<p>Le symbole connu <strong><code>Symbol.toStringTag</code></strong> est une propriété qui est une chaîne de caractères qui est utilisée pour la description textuelle par défaut d'un objet. Ce symbole est utilisé par le moteur JavaScript via la méthode {{jsxref("Object.prototype.toString()")}}.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/symbol-tostringtag.html")}}</div>
-
-
-
-<div>{{js_property_attributes(0,0,0)}}</div>
-
-<h2 id="Description">Description</h2>
-
-<p>La plupart des types JavaScript ont des étiquettes par défaut :</p>
-
-<pre class="brush: js">Object.prototype.toString.call('toto');    // "[object String]"
-Object.prototype.toString.call([1, 2]);    // "[object Array]"
-Object.prototype.toString.call(3);         // "[object Number]"
-Object.prototype.toString.call(true);      // "[object Boolean]"
-Object.prototype.toString.call(undefined); // "[object Undefined]"
-Object.prototype.toString.call(null);      // "[object Null]"
-// etc.
-</pre>
-
-<p>D'autres ont le symbole natif <code>toStringTag</code> défini :</p>
-
-<pre class="brush: js">Object.prototype.toString.call(new Map());         // "[object Map]"
-Object.prototype.toString.call(function* () {});   // "[object GeneratorFunction]"
-Object.prototype.toString.call(Promise.resolve()); // "[object Promise]"
-// etc.
-</pre>
-
-<p>Lorsqu'on crée des classes personnalisées, JavaScript utilise l'étiquette "Object" par défaut :</p>
-
-<pre class="brush: js">class ValidatorClass {}
-
-Object.prototype.toString.call(new ValidatorClass()); // "[object Object]"
-</pre>
-
-<p>Si on utilise le symbole <code>toStringTag</code> on peut définir une étiquette personnalisée :</p>
-
-<pre class="brush: js">class ValidatorClass {
-  get [Symbol.toStringTag]() {
-    return "Validator";
-  }
-}
-
-Object.prototype.toString.call(new ValidatorClass()); // "[object Validator]"
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-symbol.tostringtag', 'Symbol.toStringTag')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-symbol.tostringtag', 'Symbol.toStringTag')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Symbol.toStringTag")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Object.prototype.toString()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/symbol/tostringtag/index.md b/files/fr/web/javascript/reference/global_objects/symbol/tostringtag/index.md
new file mode 100644
index 0000000000..89667ea0f1
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/symbol/tostringtag/index.md
@@ -0,0 +1,75 @@
+---
+title: Symbol.toStringTag
+slug: Web/JavaScript/Reference/Global_Objects/Symbol/toStringTag
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Propriété
+  - Reference
+  - Symbol
+translation_of: Web/JavaScript/Reference/Global_Objects/Symbol/toStringTag
+original_slug: Web/JavaScript/Reference/Objets_globaux/Symbol/toStringTag
+---
+{{JSRef}}
+
+Le symbole connu **`Symbol.toStringTag`** est une propriété qui est une chaîne de caractères qui est utilisée pour la description textuelle par défaut d'un objet. Ce symbole est utilisé par le moteur JavaScript via la méthode {{jsxref("Object.prototype.toString()")}}.
+
+{{EmbedInteractiveExample("pages/js/symbol-tostringtag.html")}}{{js_property_attributes(0,0,0)}}
+
+## Description
+
+La plupart des types JavaScript ont des étiquettes par défaut :
+
+```js
+Object.prototype.toString.call('toto');    // "[object String]"
+Object.prototype.toString.call([1, 2]);    // "[object Array]"
+Object.prototype.toString.call(3);         // "[object Number]"
+Object.prototype.toString.call(true);      // "[object Boolean]"
+Object.prototype.toString.call(undefined); // "[object Undefined]"
+Object.prototype.toString.call(null);      // "[object Null]"
+// etc.
+```
+
+D'autres ont le symbole natif `toStringTag` défini :
+
+```js
+Object.prototype.toString.call(new Map());         // "[object Map]"
+Object.prototype.toString.call(function* () {});   // "[object GeneratorFunction]"
+Object.prototype.toString.call(Promise.resolve()); // "[object Promise]"
+// etc.
+```
+
+Lorsqu'on crée des classes personnalisées, JavaScript utilise l'étiquette "Object" par défaut :
+
+```js
+class ValidatorClass {}
+
+Object.prototype.toString.call(new ValidatorClass()); // "[object Object]"
+```
+
+Si on utilise le symbole `toStringTag` on peut définir une étiquette personnalisée :
+
+```js
+class ValidatorClass {
+  get [Symbol.toStringTag]() {
+    return "Validator";
+  }
+}
+
+Object.prototype.toString.call(new ValidatorClass()); // "[object Validator]"
+```
+
+## Spécifications
+
+| Spécification                                                                                    | État                         | Commentaires         |
+| ------------------------------------------------------------------------------------------------ | ---------------------------- | -------------------- |
+| {{SpecName('ES2015', '#sec-symbol.tostringtag', 'Symbol.toStringTag')}} | {{Spec2('ES2015')}}     | Définition initiale. |
+| {{SpecName('ESDraft', '#sec-symbol.tostringtag', 'Symbol.toStringTag')}} | {{Spec2('ESDraft')}} |                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Symbol.toStringTag")}}
+
+## Voir aussi
+
+- {{jsxref("Object.prototype.toString()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/symbol/unscopables/index.html b/files/fr/web/javascript/reference/global_objects/symbol/unscopables/index.html
deleted file mode 100644
index 4ec9b35407..0000000000
--- a/files/fr/web/javascript/reference/global_objects/symbol/unscopables/index.html
+++ /dev/null
@@ -1,92 +0,0 @@
----
-title: Symbol.unscopables
-slug: Web/JavaScript/Reference/Global_Objects/Symbol/unscopables
-tags:
-  - ECMAScript 2015
-  - JavaScript
-  - Propriété
-  - Reference
-  - Symbol
-translation_of: Web/JavaScript/Reference/Global_Objects/Symbol/unscopables
-original_slug: Web/JavaScript/Reference/Objets_globaux/Symbol/unscopables
----
-<div>{{JSRef}}</div>
-
-<p>Le symbole connu <strong><code>Symbol.unscopables</code></strong> est utilisé afin de définir les noms des propriétés propres et héritées qui sont exclues de l'objet lors de l'utilisation de <code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/with">with</a></code> sur l'objet en question.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/symbol-unscopables.html")}}</div>
-
-
-
-<h2 id="Description">Description</h2>
-
-<p>Le symbole <code>@@unscopables</code> (<code>Symbol.unscopables</code>) peut être défini sur n'importe quel objet afin de ne pas exposer certaines propriétés lors des liaisons lexicales avec <code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/with">with</a></code>. Note : en mode strict, l'instruction <code>with</code> n'est pas disponible et ce symbole est donc probablement moins nécessaire.</p>
-
-<p>En définissant une propriété comme <code>true</code> dans un objet <code>unscopables</code>, cela exclura la propriété de la portée lexicale. En définissant une propriété comme <code>false</code>, celle-ci pourra faire partie de la portée lexicale et être manipulée dans un bloc <code>with</code>.</p>
-
-<p>{{js_property_attributes(0,0,0)}}</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<p>Le code qui suit fonctionne bien pour ES5 et les versions antérieures. En revanche, pour ECMAScript 2015 (ES6) et les versions ultérieures où la méthode  {{jsxref("Array.prototype.keys()")}} existe, lorsqu'on utilise un environnement créé avec <code>with</code>, <code>"keys"</code> serait désormais la méthode et non la variable. C'est là que le symbole natif <code>@@unscopables</code> <code>Array.prototype[@@unscopables]</code> intervient et empêche d'explorer ces méthodes avec <code>with</code>.</p>
-
-<pre class="brush: js">var keys = [];
-
-with(Array.prototype) {
-  keys.push("something");
-}
-
-Object.keys(Array.prototype[Symbol.unscopables]);
-// ["copyWithin", "entries", "fill", "find", "findIndex",
-//  "includes", "keys", "values"]</pre>
-
-<p>On peut également manipuler <code>unscopables</code> sur ses propres objets :</p>
-
-<pre class="brush: js">var obj = {
-  toto: 1,
-  truc: 2
-};
-
-obj[Symbol.unscopables] = {
-  toto: false,
-  truc: true
-};
-
-with(obj) {
-  console.log(toto); // 1
-  console.log(truc); // ReferenceError: truc is not defined
-}
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-symbol.unscopables', 'Symbol.unscopables')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-symbol.unscopables', 'Symbol.unscopables')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Symbol.unscopables")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Array.@@unscopables", "Array.prototype[@@unscopables]")}}</li>
- <li><a href="/fr/docs/Web/JavaScript/Reference/Instructions/with">L'instruction <code>with</code></a> (qui n'est pas disponible <a href="/fr/docs/Web/JavaScript/Reference/Strict_mode">en mode strict</a>)</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/symbol/unscopables/index.md b/files/fr/web/javascript/reference/global_objects/symbol/unscopables/index.md
new file mode 100644
index 0000000000..dcfc3a91e1
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/symbol/unscopables/index.md
@@ -0,0 +1,76 @@
+---
+title: Symbol.unscopables
+slug: Web/JavaScript/Reference/Global_Objects/Symbol/unscopables
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Propriété
+  - Reference
+  - Symbol
+translation_of: Web/JavaScript/Reference/Global_Objects/Symbol/unscopables
+original_slug: Web/JavaScript/Reference/Objets_globaux/Symbol/unscopables
+---
+{{JSRef}}
+
+Le symbole connu **`Symbol.unscopables`** est utilisé afin de définir les noms des propriétés propres et héritées qui sont exclues de l'objet lors de l'utilisation de [`with`](/fr/docs/Web/JavaScript/Reference/Instructions/with) sur l'objet en question.
+
+{{EmbedInteractiveExample("pages/js/symbol-unscopables.html")}}
+
+## Description
+
+Le symbole `@@unscopables` (`Symbol.unscopables`) peut être défini sur n'importe quel objet afin de ne pas exposer certaines propriétés lors des liaisons lexicales avec [`with`](/fr/docs/Web/JavaScript/Reference/Instructions/with). Note : en mode strict, l'instruction `with` n'est pas disponible et ce symbole est donc probablement moins nécessaire.
+
+En définissant une propriété comme `true` dans un objet `unscopables`, cela exclura la propriété de la portée lexicale. En définissant une propriété comme `false`, celle-ci pourra faire partie de la portée lexicale et être manipulée dans un bloc `with`.
+
+{{js_property_attributes(0,0,0)}}
+
+## Exemples
+
+Le code qui suit fonctionne bien pour ES5 et les versions antérieures. En revanche, pour ECMAScript 2015 (ES6) et les versions ultérieures où la méthode  {{jsxref("Array.prototype.keys()")}} existe, lorsqu'on utilise un environnement créé avec `with`, `"keys"` serait désormais la méthode et non la variable. C'est là que le symbole natif `@@unscopables` `Array.prototype[@@unscopables]` intervient et empêche d'explorer ces méthodes avec `with`.
+
+```js
+var keys = [];
+
+with(Array.prototype) {
+  keys.push("something");
+}
+
+Object.keys(Array.prototype[Symbol.unscopables]);
+// ["copyWithin", "entries", "fill", "find", "findIndex",
+//  "includes", "keys", "values"]
+```
+
+On peut également manipuler `unscopables` sur ses propres objets :
+
+```js
+var obj = {
+  toto: 1,
+  truc: 2
+};
+
+obj[Symbol.unscopables] = {
+  toto: false,
+  truc: true
+};
+
+with(obj) {
+  console.log(toto); // 1
+  console.log(truc); // ReferenceError: truc is not defined
+}
+```
+
+## Spécifications
+
+| Spécification                                                                                    | État                         | Commentaires         |
+| ------------------------------------------------------------------------------------------------ | ---------------------------- | -------------------- |
+| {{SpecName('ES2015', '#sec-symbol.unscopables', 'Symbol.unscopables')}} | {{Spec2('ES2015')}}     | Définition initiale. |
+| {{SpecName('ESDraft', '#sec-symbol.unscopables', 'Symbol.unscopables')}} | {{Spec2('ESDraft')}} |                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Symbol.unscopables")}}
+
+## Voir aussi
+
+- {{jsxref("Array.@@unscopables", "Array.prototype[@@unscopables]")}}
+- [L'instruction `with`](/fr/docs/Web/JavaScript/Reference/Instructions/with) (qui n'est pas disponible [en mode strict](/fr/docs/Web/JavaScript/Reference/Strict_mode))
diff --git a/files/fr/web/javascript/reference/global_objects/symbol/valueof/index.html b/files/fr/web/javascript/reference/global_objects/symbol/valueof/index.html
deleted file mode 100644
index 48d99785a5..0000000000
--- a/files/fr/web/javascript/reference/global_objects/symbol/valueof/index.html
+++ /dev/null
@@ -1,63 +0,0 @@
----
-title: Symbol.prototype.valueOf()
-slug: Web/JavaScript/Reference/Global_Objects/Symbol/valueOf
-tags:
-  - ECMAScript 2015
-  - JavaScript
-  - Méthode
-  - Prototype
-  - Reference
-  - Symbol
-translation_of: Web/JavaScript/Reference/Global_Objects/Symbol/valueOf
-original_slug: Web/JavaScript/Reference/Objets_globaux/Symbol/valueOf
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <code><strong>valueOf()</strong></code> renvoie la valeur primitive correspondant à l'objet <code>Symbol</code>.</p>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>Symbol().valueOf();
-</var></pre>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>La valeur primitive de l'objet {{jsxref("Symbol")}} indiqué.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>La méthode <code>valueOf</code> de {{jsxref("Symbol")}} renvoie une valeur dont le type est le type primitif symbole à partir de l'objet <code>Symbol</code> donné.</p>
-
-<p>JavaScript appelle la méthode <code>valueOf</code> afin de convertir l'objet en une valeur primitive. La plupart du temps, il n'est pas nécessaire d'appeler explicitement la méthode <code>valueOf</code>. JavaScript l'appelle automatiquement dans les cas où une valeur primitive est attendue.</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-symbol.prototype.valueof', 'Symbol.prototype.valueOf')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-symbol.prototype.valueof', 'Symbol.prototype.valueOf')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Symbol.valueOf")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Object.prototype.valueOf()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/symbol/valueof/index.md b/files/fr/web/javascript/reference/global_objects/symbol/valueof/index.md
new file mode 100644
index 0000000000..f202db038f
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/symbol/valueof/index.md
@@ -0,0 +1,45 @@
+---
+title: Symbol.prototype.valueOf()
+slug: Web/JavaScript/Reference/Global_Objects/Symbol/valueOf
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - Symbol
+translation_of: Web/JavaScript/Reference/Global_Objects/Symbol/valueOf
+original_slug: Web/JavaScript/Reference/Objets_globaux/Symbol/valueOf
+---
+{{JSRef}}
+
+La méthode **`valueOf()`** renvoie la valeur primitive correspondant à l'objet `Symbol`.
+
+## Syntaxe
+
+    Symbol().valueOf();
+
+### Valeur de retour
+
+La valeur primitive de l'objet {{jsxref("Symbol")}} indiqué.
+
+## Description
+
+La méthode `valueOf` de {{jsxref("Symbol")}} renvoie une valeur dont le type est le type primitif symbole à partir de l'objet `Symbol` donné.
+
+JavaScript appelle la méthode `valueOf` afin de convertir l'objet en une valeur primitive. La plupart du temps, il n'est pas nécessaire d'appeler explicitement la méthode `valueOf`. JavaScript l'appelle automatiquement dans les cas où une valeur primitive est attendue.
+
+## Spécifications
+
+| Spécification                                                                                                    | État                         | Commentaires         |
+| ---------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName('ES2015', '#sec-symbol.prototype.valueof', 'Symbol.prototype.valueOf')}} | {{Spec2('ES2015')}}     | Définition initiale. |
+| {{SpecName('ESDraft', '#sec-symbol.prototype.valueof', 'Symbol.prototype.valueOf')}} | {{Spec2('ESDraft')}} |                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Symbol.valueOf")}}
+
+## Voir aussi
+
+- {{jsxref("Object.prototype.valueOf()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/syntaxerror/index.html b/files/fr/web/javascript/reference/global_objects/syntaxerror/index.html
deleted file mode 100644
index bddaea8370..0000000000
--- a/files/fr/web/javascript/reference/global_objects/syntaxerror/index.html
+++ /dev/null
@@ -1,130 +0,0 @@
----
-title: SyntaxError
-slug: Web/JavaScript/Reference/Global_Objects/SyntaxError
-tags:
-  - Error
-  - JavaScript
-  - Object
-  - Reference
-  - SyntaxError
-translation_of: Web/JavaScript/Reference/Global_Objects/SyntaxError
-original_slug: Web/JavaScript/Reference/Objets_globaux/SyntaxError
----
-<div>{{JSRef}}</div>
-
-<p>L'objet <code><strong>SyntaxError</strong></code> représente une erreur qui se produit lors de l'interprétation d'un code dont la syntaxe est invalide.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>Une exception <code>SyntaxError</code> est levée lorsque le moteur JavaScript rencontre des entités lexicales invalide ou dans un ordre invalide par rapport à la grammaire du langage.</p>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><code>new SyntaxError([<var>message</var>[, <var>nomFichier</var>[, <var>numLigne</var>]]])</code></pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>message</code>{{optional_inline}}</dt>
- <dd>Une description, lisible par un humain, de l'erreur.</dd>
- <dt><code>nomFichier</code> {{optional_inline}}{{non-standard_inline}}</dt>
- <dd>Le nom du fichier contenant le code provoquant l'erreur.</dd>
- <dt><code>numLigne</code> {{optional_inline}}{{non-standard_inline}}</dt>
- <dd>Le numéro de la ligne du code qui a provoqué l'exception.</dd>
-</dl>
-
-<h2 id="Propriétés">Propriétés</h2>
-
-<dl>
- <dt>{{jsxref("SyntaxError.prototype")}}</dt>
- <dd>Cette méthode permet d'ajouter des propriétés aux instance de <code>SyntaxError</code>.</dd>
-</dl>
-
-<h2 id="Méthodes">Méthodes</h2>
-
-<p>L'objet global <code>SyntaxError</code> ne contient pas de méthodes directes. En revanche, il hérite de méthodes grâce à sa chaîne de prototypes.</p>
-
-<h2 id="Instances_de_SyntaxError">Instances de <code>SyntaxError</code></h2>
-
-<h3 id="Propriétés_2">Propriétés</h3>
-
-<div>{{page('/fr/docs/Web/JavaScript/Reference/Objets_globaux/SyntaxError/prototype', 'Propriétés')}}</div>
-
-<h3 id="Méthodes_2">Méthodes</h3>
-
-<div>{{page('/fr/docs/Web/JavaScript/Reference/Objets_globaux/SyntaxError/prototype', 'Méthodes')}}</div>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Intercepter_une_exception_SyntaxError">Intercepter une exception <code>SyntaxError</code></h3>
-
-<pre class="brush: js">try {
-  eval('toto truc');
-} catch (e) {
-  console.log(e instanceof SyntaxError); // true
-  console.log(e.message);                // "missing ; before statement"
-  console.log(e.name);                   // "SyntaxError"
-  console.log(e.fileName);               // "Scratchpad/1"
-  console.log(e.lineNumber);             // 1
-  console.log(e.columnNumber);           // 4
-  console.log(e.stack);                  // "@Scratchpad/1:2:3\n"
-}
-</pre>
-
-<h3 id="Créer_une_exception_SyntaxError">Créer une exception <code>SyntaxError</code></h3>
-
-<pre class="brush: js">try {
-  throw new SyntaxError('Coucou', 'unFichier.js', 10);
-} catch (e) {
-  console.log(e instanceof SyntaxError); // true
-  console.log(e.message);                // "Coucou"
-  console.log(e.name);                   // "SyntaxError"
-  console.log(e.fileName);               // "unFichier.js"
-  console.log(e.lineNumber);             // 10
-  console.log(e.columnNumber);           // 0
-  console.log(e.stack);                  // "@Scratchpad/2:11:9\n"
-}
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES3')}}</td>
-   <td>{{Spec2('ES3')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-15.11.6.4', 'SyntaxError')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-native-error-types-used-in-this-standard-syntaxerror', 'SyntaxError')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-native-error-types-used-in-this-standard-syntaxerror', 'SyntaxError')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.SyntaxError")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Error")}}</li>
- <li>{{jsxref("SyntaxError.prototype")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/syntaxerror/index.md b/files/fr/web/javascript/reference/global_objects/syntaxerror/index.md
new file mode 100644
index 0000000000..8e02ba78e1
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/syntaxerror/index.md
@@ -0,0 +1,103 @@
+---
+title: SyntaxError
+slug: Web/JavaScript/Reference/Global_Objects/SyntaxError
+tags:
+  - Error
+  - JavaScript
+  - Object
+  - Reference
+  - SyntaxError
+translation_of: Web/JavaScript/Reference/Global_Objects/SyntaxError
+original_slug: Web/JavaScript/Reference/Objets_globaux/SyntaxError
+---
+{{JSRef}}
+
+L'objet **`SyntaxError`** représente une erreur qui se produit lors de l'interprétation d'un code dont la syntaxe est invalide.
+
+## Description
+
+Une exception `SyntaxError` est levée lorsque le moteur JavaScript rencontre des entités lexicales invalide ou dans un ordre invalide par rapport à la grammaire du langage.
+
+## Syntaxe
+
+    new SyntaxError([message[, nomFichier[, numLigne]]])
+
+### Paramètres
+
+- `message`{{optional_inline}}
+  - : Une description, lisible par un humain, de l'erreur.
+- `nomFichier` {{optional_inline}}{{non-standard_inline}}
+  - : Le nom du fichier contenant le code provoquant l'erreur.
+- `numLigne` {{optional_inline}}{{non-standard_inline}}
+  - : Le numéro de la ligne du code qui a provoqué l'exception.
+
+## Propriétés
+
+- {{jsxref("SyntaxError.prototype")}}
+  - : Cette méthode permet d'ajouter des propriétés aux instance de `SyntaxError`.
+
+## Méthodes
+
+L'objet global `SyntaxError` ne contient pas de méthodes directes. En revanche, il hérite de méthodes grâce à sa chaîne de prototypes.
+
+## Instances de `SyntaxError`
+
+### Propriétés
+
+{{page('/fr/docs/Web/JavaScript/Reference/Objets_globaux/SyntaxError/prototype', 'Propriétés')}}
+
+### Méthodes
+
+{{page('/fr/docs/Web/JavaScript/Reference/Objets_globaux/SyntaxError/prototype', 'Méthodes')}}
+
+## Exemples
+
+### Intercepter une exception `SyntaxError`
+
+```js
+try {
+  eval('toto truc');
+} catch (e) {
+  console.log(e instanceof SyntaxError); // true
+  console.log(e.message);                // "missing ; before statement"
+  console.log(e.name);                   // "SyntaxError"
+  console.log(e.fileName);               // "Scratchpad/1"
+  console.log(e.lineNumber);             // 1
+  console.log(e.columnNumber);           // 4
+  console.log(e.stack);                  // "@Scratchpad/1:2:3\n"
+}
+```
+
+### Créer une exception `SyntaxError`
+
+```js
+try {
+  throw new SyntaxError('Coucou', 'unFichier.js', 10);
+} catch (e) {
+  console.log(e instanceof SyntaxError); // true
+  console.log(e.message);                // "Coucou"
+  console.log(e.name);                   // "SyntaxError"
+  console.log(e.fileName);               // "unFichier.js"
+  console.log(e.lineNumber);             // 10
+  console.log(e.columnNumber);           // 0
+  console.log(e.stack);                  // "@Scratchpad/2:11:9\n"
+}
+```
+
+## Spécifications
+
+| Spécification                                                                                                                        | Statut                       | Commentaires         |
+| ------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------- | -------------------- |
+| {{SpecName('ES3')}}                                                                                                             | {{Spec2('ES3')}}         | Définition initiale. |
+| {{SpecName('ES5.1', '#sec-15.11.6.4', 'SyntaxError')}}                                                             | {{Spec2('ES5.1')}}     |                      |
+| {{SpecName('ES6', '#sec-native-error-types-used-in-this-standard-syntaxerror', 'SyntaxError')}}     | {{Spec2('ES6')}}         |                      |
+| {{SpecName('ESDraft', '#sec-native-error-types-used-in-this-standard-syntaxerror', 'SyntaxError')}} | {{Spec2('ESDraft')}} |                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.SyntaxError")}}
+
+## Voir aussi
+
+- {{jsxref("Error")}}
+- {{jsxref("SyntaxError.prototype")}}
diff --git a/files/fr/web/javascript/reference/global_objects/typedarray/@@iterator/index.html b/files/fr/web/javascript/reference/global_objects/typedarray/@@iterator/index.html
deleted file mode 100644
index 761dce12fe..0000000000
--- a/files/fr/web/javascript/reference/global_objects/typedarray/@@iterator/index.html
+++ /dev/null
@@ -1,85 +0,0 @@
----
-title: TypedArray.prototype[@@iterator]()
-slug: Web/JavaScript/Reference/Global_Objects/TypedArray/@@iterator
-tags:
-  - Iterator
-  - JavaScript
-  - Méthode
-  - Prototype
-  - Reference
-  - TypedArray
-  - TypedArrays
-translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/@@iterator
-original_slug: Web/JavaScript/Reference/Objets_globaux/TypedArray/@@iterator
----
-<div>{{JSRef}}</div>
-
-<p>La valeur initiale de la propriété @@iterator est le même objet fonction que la valeur initiale de {{jsxref("TypedArray.prototype.values()", "values")}}.</p>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>typedarray</var>[Symbol.iterator]()</pre>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Une fonction d'itération sur le tableau typé, par défaut, c'est la fonction {{jsxref("TypedArray.prototype.values()","values()")}}.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Parcourir_un_tableau_typé_avec_for...of">Parcourir un tableau typé avec <code>for...of</code></h3>
-
-<pre class="brush: js">var arr = new Uint8Array([10, 20, 30, 40, 50]);
-// prérequis : le navigateur doit supporter les boucles
-// for..of et les variables dont la portée est définie
-// par let
-for (let n of arr) {
-  console.log(n);
-}
-</pre>
-
-<h3 id="Autre_méthode_d'itération">Autre méthode d'itération</h3>
-
-<pre class="brush: js">var arr = new Uint8Array([10, 20, 30, 40, 50]);
-var eArr = arr[Symbol.iterator]();
-console.log(eArr.next().value); // 10
-console.log(eArr.next().value); // 20
-console.log(eArr.next().value); // 30
-console.log(eArr.next().value); // 40
-console.log(eArr.next().value); // 50
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-%typedarray%.prototype-@@iterator', '%TypedArray%.prototype[@@iterator]()')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td>Définition initiale</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-%typedarray%.prototype-@@iterator', '%TypedArray%.prototype[@@iterator]()')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.TypedArray.@@iterator")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/JavaScript/Tableaux_typés">Les tableaux typés en JavaScript</a></li>
- <li>{{jsxref("TypedArray")}}</li>
- <li>{{jsxref("TypedArray.prototype.entries()")}}</li>
- <li>{{jsxref("TypedArray.prototype.keys()")}}</li>
- <li>{{jsxref("TypedArray.prototype.values()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/typedarray/@@iterator/index.md b/files/fr/web/javascript/reference/global_objects/typedarray/@@iterator/index.md
new file mode 100644
index 0000000000..1046aa4f23
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/typedarray/@@iterator/index.md
@@ -0,0 +1,70 @@
+---
+title: TypedArray.prototype[@@iterator]()
+slug: Web/JavaScript/Reference/Global_Objects/TypedArray/@@iterator
+tags:
+  - Iterator
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - TypedArray
+  - TypedArrays
+translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/@@iterator
+original_slug: Web/JavaScript/Reference/Objets_globaux/TypedArray/@@iterator
+---
+{{JSRef}}
+
+La valeur initiale de la propriété @@iterator est le même objet fonction que la valeur initiale de {{jsxref("TypedArray.prototype.values()", "values")}}.
+
+## Syntaxe
+
+    typedarray[Symbol.iterator]()
+
+### Valeur de retour
+
+Une fonction d'itération sur le tableau typé, par défaut, c'est la fonction {{jsxref("TypedArray.prototype.values()","values()")}}.
+
+## Exemples
+
+### Parcourir un tableau typé avec `for...of`
+
+```js
+var arr = new Uint8Array([10, 20, 30, 40, 50]);
+// prérequis : le navigateur doit supporter les boucles
+// for..of et les variables dont la portée est définie
+// par let
+for (let n of arr) {
+  console.log(n);
+}
+```
+
+### Autre méthode d'itération
+
+```js
+var arr = new Uint8Array([10, 20, 30, 40, 50]);
+var eArr = arr[Symbol.iterator]();
+console.log(eArr.next().value); // 10
+console.log(eArr.next().value); // 20
+console.log(eArr.next().value); // 30
+console.log(eArr.next().value); // 40
+console.log(eArr.next().value); // 50
+```
+
+## Spécifications
+
+| Spécification                                                                                                                                | État                         | Commentaires        |
+| -------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | ------------------- |
+| {{SpecName('ES6', '#sec-%typedarray%.prototype-@@iterator', '%TypedArray%.prototype[@@iterator]()')}}     | {{Spec2('ES6')}}         | Définition initiale |
+| {{SpecName('ESDraft', '#sec-%typedarray%.prototype-@@iterator', '%TypedArray%.prototype[@@iterator]()')}} | {{Spec2('ESDraft')}} |                     |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.TypedArray.@@iterator")}}
+
+## Voir aussi
+
+- [Les tableaux typés en JavaScript](/fr/docs/Web/JavaScript/Tableaux_typés)
+- {{jsxref("TypedArray")}}
+- {{jsxref("TypedArray.prototype.entries()")}}
+- {{jsxref("TypedArray.prototype.keys()")}}
+- {{jsxref("TypedArray.prototype.values()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/typedarray/@@species/index.html b/files/fr/web/javascript/reference/global_objects/typedarray/@@species/index.html
deleted file mode 100644
index fffeff1ac4..0000000000
--- a/files/fr/web/javascript/reference/global_objects/typedarray/@@species/index.html
+++ /dev/null
@@ -1,87 +0,0 @@
----
-title: get TypedArray[@@species]
-slug: Web/JavaScript/Reference/Global_Objects/TypedArray/@@species
-tags:
-  - JavaScript
-  - Propriété
-  - Prototype
-  - Reference
-  - TypedArray
-  - TypedArrays
-translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/@@species
-original_slug: Web/JavaScript/Reference/Objets_globaux/TypedArray/@@species
----
-<div>{{JSRef}}</div>
-
-<p>La propriété d'accesseur <code><strong>TypedArray[@@species]</strong></code> renvoie le constructeur <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/TypedArray#Les_objets_TypedArray">du tableau typé</a>.</p>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><em>TypedArray</em>[Symbol.species]
-
-où <em>TypedArray</em> vaut :
-
-Int8Array
-Uint8Array
-Uint8ClampedArray
-Int16Array
-Uint16Array
-Int32Array
-Uint32Array
-Float32Array
-Float64Array
-</pre>
-
-<h2 id="Description">Description</h2>
-
-<p>L'accesseur <code>species</code> renvoie le constructeur par défaut pour les tableaux typés. Les constructeurs des sous-classes peuvent surcharger ce symbole pour modifier l'affectation du constructeur.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<p>La propriété <code>species</code> renvoie le constructeur par défaut qui est l'un des constructeurs de tableau typé (selon le type <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/TypedArray#Les_objets_TypedArray">de tableau typé</a> de l'objet) :</p>
-
-<pre class="brush: js">Int8Array[Symbol.species];    // function Int8Array()
-Uint8Array[Symbol.species];   // function Uint8Array()
-Float32Array[Symbol.species]; // function Float32Array()
-</pre>
-
-<p>Pour un objet construit sur mesure (par exemple une tableau <code>MonTableauTypé</code>), le symbole <code>species</code> de <code>MonTableauTypé</code> sera le constructeur <code>MonTableauTypé</code>. Mais on peut vouloir surcharger ce comportement pour renvoyer le constructeur du type parent :</p>
-
-<pre class="brush: js">class MonTableauTypé extends Uint8Array {
-  // On surcharge species pour MonTableauTypé
-  // pour récupérer le constructeur Uint8Array
-  static get [Symbol.species]() { return Uint8Array; }
-}</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-get-%typedarray%-@@species', 'get %TypedArray% [ @@species ]')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-get-%typedarray%-@@species', 'get %TypedArray% [ @@species ]')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.TypedArray.@@species")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("TypedArray")}}</li>
- <li>{{jsxref("Symbol.species")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/typedarray/@@species/index.md b/files/fr/web/javascript/reference/global_objects/typedarray/@@species/index.md
new file mode 100644
index 0000000000..4037082e08
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/typedarray/@@species/index.md
@@ -0,0 +1,72 @@
+---
+title: get TypedArray[@@species]
+slug: Web/JavaScript/Reference/Global_Objects/TypedArray/@@species
+tags:
+  - JavaScript
+  - Propriété
+  - Prototype
+  - Reference
+  - TypedArray
+  - TypedArrays
+translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/@@species
+original_slug: Web/JavaScript/Reference/Objets_globaux/TypedArray/@@species
+---
+{{JSRef}}
+
+La propriété d'accesseur **`TypedArray[@@species]`** renvoie le constructeur [du tableau typé](/fr/docs/Web/JavaScript/Reference/Objets_globaux/TypedArray#Les_objets_TypedArray).
+
+## Syntaxe
+
+    TypedArray[Symbol.species]
+
+    où TypedArray vaut :
+
+    Int8Array
+    Uint8Array
+    Uint8ClampedArray
+    Int16Array
+    Uint16Array
+    Int32Array
+    Uint32Array
+    Float32Array
+    Float64Array
+
+## Description
+
+L'accesseur `species` renvoie le constructeur par défaut pour les tableaux typés. Les constructeurs des sous-classes peuvent surcharger ce symbole pour modifier l'affectation du constructeur.
+
+## Exemples
+
+La propriété `species` renvoie le constructeur par défaut qui est l'un des constructeurs de tableau typé (selon le type [de tableau typé](/fr/docs/Web/JavaScript/Reference/Objets_globaux/TypedArray#Les_objets_TypedArray) de l'objet) :
+
+```js
+Int8Array[Symbol.species];    // function Int8Array()
+Uint8Array[Symbol.species];   // function Uint8Array()
+Float32Array[Symbol.species]; // function Float32Array()
+```
+
+Pour un objet construit sur mesure (par exemple une tableau `MonTableauTypé`), le symbole `species` de `MonTableauTypé` sera le constructeur `MonTableauTypé`. Mais on peut vouloir surcharger ce comportement pour renvoyer le constructeur du type parent :
+
+```js
+class MonTableauTypé extends Uint8Array {
+  // On surcharge species pour MonTableauTypé
+  // pour récupérer le constructeur Uint8Array
+  static get [Symbol.species]() { return Uint8Array; }
+}
+```
+
+## Spécifications
+
+| Spécification                                                                                                                | État                         | Commentaires         |
+| ---------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName('ES6', '#sec-get-%typedarray%-@@species', 'get %TypedArray% [ @@species ]')}}         | {{Spec2('ES6')}}         | Définition initiale. |
+| {{SpecName('ESDraft', '#sec-get-%typedarray%-@@species', 'get %TypedArray% [ @@species ]')}} | {{Spec2('ESDraft')}} |                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.TypedArray.@@species")}}
+
+## Voir aussi
+
+- {{jsxref("TypedArray")}}
+- {{jsxref("Symbol.species")}}
diff --git a/files/fr/web/javascript/reference/global_objects/typedarray/buffer/index.html b/files/fr/web/javascript/reference/global_objects/typedarray/buffer/index.html
deleted file mode 100644
index 081dfd8855..0000000000
--- a/files/fr/web/javascript/reference/global_objects/typedarray/buffer/index.html
+++ /dev/null
@@ -1,65 +0,0 @@
----
-title: TypedArray.prototype.buffer
-slug: Web/JavaScript/Reference/Global_Objects/TypedArray/buffer
-tags:
-  - JavaScript
-  - Propriété
-  - Prototype
-  - Reference
-  - TypedArray
-translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/buffer
-original_slug: Web/JavaScript/Reference/Objets_globaux/TypedArray/buffer
----
-<div>{{JSRef}}</div>
-
-<p>La propriété <strong><code>buffer</code></strong> est un accesseur représentant l'{{jsxref("ArrayBuffer")}} représenté par le <em>TypedArray</em> lors de la construction de l'objet.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/typedarray-buffer.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>typedArray</var>.buffer</pre>
-
-<h2 id="Description">Description</h2>
-
-<p>La propriété <code>buffer</code> est un accesseur dont le mutateur correspondant vaut <code>undefined</code>. Cela signifie que cette propriété n'est accessible qu'en lecture seule. La valeur de la propriété est déterminée lors de la construction du <em>TypedArray</em> et ne peut pas être modifiée. <em>TypedArray</em> est un des objets <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/TypedArray#Les_objets_TypedArray">TypedArray</a>.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<pre class="brush:js">var buffer = new ArrayBuffer(8);
-var uint16 = new Uint16Array(buffer);
-uint16.buffer; // ArrayBuffer { byteLength: 8 }
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-get-%typedarray%.prototype.buffer', 'TypedArray.prototype.buffer')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-get-%typedarray%.prototype.buffer', 'TypedArray.prototype.buffer')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.TypedArray.buffer")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/JavaScript/Tableaux_typés">Les tableaux typés en JavaScript</a></li>
- <li>{{jsxref("TypedArray")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/typedarray/buffer/index.md b/files/fr/web/javascript/reference/global_objects/typedarray/buffer/index.md
new file mode 100644
index 0000000000..4c1500fe83
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/typedarray/buffer/index.md
@@ -0,0 +1,49 @@
+---
+title: TypedArray.prototype.buffer
+slug: Web/JavaScript/Reference/Global_Objects/TypedArray/buffer
+tags:
+  - JavaScript
+  - Propriété
+  - Prototype
+  - Reference
+  - TypedArray
+translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/buffer
+original_slug: Web/JavaScript/Reference/Objets_globaux/TypedArray/buffer
+---
+{{JSRef}}
+
+La propriété **`buffer`** est un accesseur représentant l'{{jsxref("ArrayBuffer")}} représenté par le _TypedArray_ lors de la construction de l'objet.
+
+{{EmbedInteractiveExample("pages/js/typedarray-buffer.html")}}
+
+## Syntaxe
+
+    typedArray.buffer
+
+## Description
+
+La propriété `buffer` est un accesseur dont le mutateur correspondant vaut `undefined`. Cela signifie que cette propriété n'est accessible qu'en lecture seule. La valeur de la propriété est déterminée lors de la construction du _TypedArray_ et ne peut pas être modifiée. _TypedArray_ est un des objets [TypedArray](/fr/docs/Web/JavaScript/Reference/Objets_globaux/TypedArray#Les_objets_TypedArray).
+
+## Exemples
+
+```js
+var buffer = new ArrayBuffer(8);
+var uint16 = new Uint16Array(buffer);
+uint16.buffer; // ArrayBuffer { byteLength: 8 }
+```
+
+## Spécifications
+
+| Spécification                                                                                                                    | Statut                       | Commentaires         |
+| -------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName('ES6', '#sec-get-%typedarray%.prototype.buffer', 'TypedArray.prototype.buffer')}}     | {{Spec2('ES6')}}         | Définition initiale. |
+| {{SpecName('ESDraft', '#sec-get-%typedarray%.prototype.buffer', 'TypedArray.prototype.buffer')}} | {{Spec2('ESDraft')}} |                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.TypedArray.buffer")}}
+
+## Voir aussi
+
+- [Les tableaux typés en JavaScript](/fr/docs/Web/JavaScript/Tableaux_typés)
+- {{jsxref("TypedArray")}}
diff --git a/files/fr/web/javascript/reference/global_objects/typedarray/bytelength/index.html b/files/fr/web/javascript/reference/global_objects/typedarray/bytelength/index.html
deleted file mode 100644
index 16e7d36355..0000000000
--- a/files/fr/web/javascript/reference/global_objects/typedarray/bytelength/index.html
+++ /dev/null
@@ -1,72 +0,0 @@
----
-title: TypedArray.prototype.byteLength
-slug: Web/JavaScript/Reference/Global_Objects/TypedArray/byteLength
-tags:
-  - JavaScript
-  - Propriété
-  - Prototype
-  - Reference
-  - TypedArray
-translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/byteLength
-original_slug: Web/JavaScript/Reference/Objets_globaux/TypedArray/byteLength
----
-<div>{{JSRef}}</div>
-
-<p>La propriété <strong><code>byteLength</code></strong> est un accesseur qui représente la longueur, exprimée en octets, du tableau typé à partir du début de l'{{jsxref("ArrayBuffer")}} correspondant.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/typedarray-bytelength.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>typedarray</var>.byteLength</pre>
-
-<h2 id="Description">Description</h2>
-
-<p>La propriété <code>byteLength</code> est un accesseur dont le mutateur correspondant vaut <code>undefined</code>, ce qui signifie qu'elle n'est accessible qu'en lecture. La valeur de la propriété est déterminée lors de la construction du <em>TypedArray</em> et ne peut pas être modifiée. Si l'objet <em>TypedArray</em> n'utilise pas de <code>byteOffset</code> ou une <code>length</code>, ce sera la propriété <code>length</code> de l'<code>ArrayBuffer</code> référencé par le tableau qui sera renvoyée. <em>TypedArray</em> est l'un des objets <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/TypedArray#Les_objets_TypedArray">TypedArray</a>.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<pre class="brush:js">var tampon = new ArrayBuffer(8);
-
-var uint8 = new Uint8Array(tampon);
-uint8.byteLength; // 8 (correspond au byteLength du tampon correspondant)
-
-var uint8 = new Uint8Array(tampon, 1, 5);
-uint8.byteLength; // 5 (correspond à la longueur spécifiée dans le constructeur)
-
-var uint8 = new Uint8Array(tampon, 2);
-uint8.byteLength; // 6 (en raison du décalage utilisé pour la construction du Uint8Array)
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-get-%typedarray%.prototype.bytelength', 'TypedArray.prototype.byteLength')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-get-%typedarray%.prototype.bytelength', 'TypedArray.prototype.byteLength')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.TypedArray.byteLength")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/JavaScript/Tableaux_typés">Les tableaux typés en JavaScript</a></li>
- <li>{{jsxref("TypedArray")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/typedarray/bytelength/index.md b/files/fr/web/javascript/reference/global_objects/typedarray/bytelength/index.md
new file mode 100644
index 0000000000..16b00bf27f
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/typedarray/bytelength/index.md
@@ -0,0 +1,56 @@
+---
+title: TypedArray.prototype.byteLength
+slug: Web/JavaScript/Reference/Global_Objects/TypedArray/byteLength
+tags:
+  - JavaScript
+  - Propriété
+  - Prototype
+  - Reference
+  - TypedArray
+translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/byteLength
+original_slug: Web/JavaScript/Reference/Objets_globaux/TypedArray/byteLength
+---
+{{JSRef}}
+
+La propriété **`byteLength`** est un accesseur qui représente la longueur, exprimée en octets, du tableau typé à partir du début de l'{{jsxref("ArrayBuffer")}} correspondant.
+
+{{EmbedInteractiveExample("pages/js/typedarray-bytelength.html")}}
+
+## Syntaxe
+
+    typedarray.byteLength
+
+## Description
+
+La propriété `byteLength` est un accesseur dont le mutateur correspondant vaut `undefined`, ce qui signifie qu'elle n'est accessible qu'en lecture. La valeur de la propriété est déterminée lors de la construction du _TypedArray_ et ne peut pas être modifiée. Si l'objet _TypedArray_ n'utilise pas de `byteOffset` ou une `length`, ce sera la propriété `length` de l'`ArrayBuffer` référencé par le tableau qui sera renvoyée. _TypedArray_ est l'un des objets [TypedArray](/fr/docs/Web/JavaScript/Reference/Objets_globaux/TypedArray#Les_objets_TypedArray).
+
+## Exemples
+
+```js
+var tampon = new ArrayBuffer(8);
+
+var uint8 = new Uint8Array(tampon);
+uint8.byteLength; // 8 (correspond au byteLength du tampon correspondant)
+
+var uint8 = new Uint8Array(tampon, 1, 5);
+uint8.byteLength; // 5 (correspond à la longueur spécifiée dans le constructeur)
+
+var uint8 = new Uint8Array(tampon, 2);
+uint8.byteLength; // 6 (en raison du décalage utilisé pour la construction du Uint8Array)
+```
+
+## Spécifications
+
+| Spécification                                                                                                                                | État                         | Commentaires         |
+| -------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName('ES6', '#sec-get-%typedarray%.prototype.bytelength', 'TypedArray.prototype.byteLength')}}         | {{Spec2('ES6')}}         | Définition initiale. |
+| {{SpecName('ESDraft', '#sec-get-%typedarray%.prototype.bytelength', 'TypedArray.prototype.byteLength')}} | {{Spec2('ESDraft')}} |                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.TypedArray.byteLength")}}
+
+## Voir aussi
+
+- [Les tableaux typés en JavaScript](/fr/docs/Web/JavaScript/Tableaux_typés)
+- {{jsxref("TypedArray")}}
diff --git a/files/fr/web/javascript/reference/global_objects/typedarray/byteoffset/index.html b/files/fr/web/javascript/reference/global_objects/typedarray/byteoffset/index.html
deleted file mode 100644
index d6430c0ce9..0000000000
--- a/files/fr/web/javascript/reference/global_objects/typedarray/byteoffset/index.html
+++ /dev/null
@@ -1,67 +0,0 @@
----
-title: TypedArray.prototype.byteOffset
-slug: Web/JavaScript/Reference/Global_Objects/TypedArray/byteOffset
-tags:
-  - JavaScript
-  - Propriété
-  - Prototype
-  - Reference
-  - TypedArray
-translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/byteOffset
-original_slug: Web/JavaScript/Reference/Objets_globaux/TypedArray/byteOffset
----
-<div>{{JSRef}}</div>
-
-<p>La propriété <strong><code>byteOffset</code></strong> est un accesseur qui représente le décalage, exprimé en octets, entre le début du tableau typé par rapport au début du {{jsxref("ArrayBuffer")}} correspondant.</p>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>typedarray</var>.byteOffset</pre>
-
-<h2 id="Description">Description</h2>
-
-<p>La propriété <code>byteOffset</code> est un accesseur dont le mutateur correspondant vaut <code>undefined</code>, ce qui signifie qu'elle n'est accessible qu'en lecture seule. La valeur de cette propriété est déterminée lors de la construction du <em>TypedArray</em> et ne peut pas être modifiée.<em> TypedArray</em> est l'un des objets <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/TypedArray#Les_objets_TypedArray">TypedArray</a>.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<pre class="brush:js">var tampon = new ArrayBuffer(8);
-
-var uint8 = new Uint8Array(tampon);
-uint8.byteOffset; // 0 (aucun décalage n'a été défini)
-
-var uint8 = new Uint8Array(tampon, 3);
-uint8.byteOffset; // 3 (correspond au décalage défini lors de la construction du Uint8Array)
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-get-%typedarray%.prototype.byteoffset', 'TypedArray.prototype.byteOffset')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-get-%typedarray%.prototype.byteoffset', 'TypedArray.prototype.byteOffset')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.TypedArray.byteOffset")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/JavaScript/Tableaux_typés">Les tableaux typés en JavaScript</a></li>
- <li>{{jsxref("TypedArray")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/typedarray/byteoffset/index.md b/files/fr/web/javascript/reference/global_objects/typedarray/byteoffset/index.md
new file mode 100644
index 0000000000..1b667e67de
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/typedarray/byteoffset/index.md
@@ -0,0 +1,51 @@
+---
+title: TypedArray.prototype.byteOffset
+slug: Web/JavaScript/Reference/Global_Objects/TypedArray/byteOffset
+tags:
+  - JavaScript
+  - Propriété
+  - Prototype
+  - Reference
+  - TypedArray
+translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/byteOffset
+original_slug: Web/JavaScript/Reference/Objets_globaux/TypedArray/byteOffset
+---
+{{JSRef}}
+
+La propriété **`byteOffset`** est un accesseur qui représente le décalage, exprimé en octets, entre le début du tableau typé par rapport au début du {{jsxref("ArrayBuffer")}} correspondant.
+
+## Syntaxe
+
+    typedarray.byteOffset
+
+## Description
+
+La propriété `byteOffset` est un accesseur dont le mutateur correspondant vaut `undefined`, ce qui signifie qu'elle n'est accessible qu'en lecture seule. La valeur de cette propriété est déterminée lors de la construction du _TypedArray_ et ne peut pas être modifiée. _TypedArray_ est l'un des objets [TypedArray](/fr/docs/Web/JavaScript/Reference/Objets_globaux/TypedArray#Les_objets_TypedArray).
+
+## Exemples
+
+```js
+var tampon = new ArrayBuffer(8);
+
+var uint8 = new Uint8Array(tampon);
+uint8.byteOffset; // 0 (aucun décalage n'a été défini)
+
+var uint8 = new Uint8Array(tampon, 3);
+uint8.byteOffset; // 3 (correspond au décalage défini lors de la construction du Uint8Array)
+```
+
+## Spécifications
+
+| Spécification                                                                                                                                | Statut                       | Commentaires         |
+| -------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName('ES6', '#sec-get-%typedarray%.prototype.byteoffset', 'TypedArray.prototype.byteOffset')}}         | {{Spec2('ES6')}}         | Définition initiale. |
+| {{SpecName('ESDraft', '#sec-get-%typedarray%.prototype.byteoffset', 'TypedArray.prototype.byteOffset')}} | {{Spec2('ESDraft')}} |                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.TypedArray.byteOffset")}}
+
+## Voir aussi
+
+- [Les tableaux typés en JavaScript](/fr/docs/Web/JavaScript/Tableaux_typés)
+- {{jsxref("TypedArray")}}
diff --git a/files/fr/web/javascript/reference/global_objects/typedarray/bytes_per_element/index.html b/files/fr/web/javascript/reference/global_objects/typedarray/bytes_per_element/index.html
deleted file mode 100644
index 62ed0da922..0000000000
--- a/files/fr/web/javascript/reference/global_objects/typedarray/bytes_per_element/index.html
+++ /dev/null
@@ -1,79 +0,0 @@
----
-title: TypedArray.BYTES_PER_ELEMENT
-slug: Web/JavaScript/Reference/Global_Objects/TypedArray/BYTES_PER_ELEMENT
-tags:
-  - JavaScript
-  - Propriété
-  - Reference
-  - TypedArray
-  - TypedArrays
-translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/BYTES_PER_ELEMENT
-original_slug: Web/JavaScript/Reference/Objets_globaux/TypedArray/BYTES_PER_ELEMENT
----
-<div>{{JSRef}}</div>
-
-<p>La propriété <code><strong>TypedArray.BYTES_PER_ELEMENT</strong></code> représente la taille, exprimée en octets, de chaque élément du tableau typé.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/typedarray-bytes-per-element.html")}}</div>
-
-
-
-<div>{{js_property_attributes(0,0,0)}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>TypedArray</var>.BYTES_PER_ELEMENT;</pre>
-
-<h2 id="Description">Description</h2>
-
-<p>La taille des éléments d'un tableau typé varie en fonction du type de <code>TypedArray</code> utilisé. Le nombre d'octets utilisé pour un élément sera différent en fonction du type de tableau. La propriété <code>BYTES_PER_ELEMENT</code> permet de savoir le nombre d'octets contenus dans chaque élément du tableau typé courant.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<pre class="brush:js">Int8Array.BYTES_PER_ELEMENT;         // 1
-Uint8Array.BYTES_PER_ELEMENT;        // 1
-Uint8ClampedArray.BYTES_PER_ELEMENT; // 1
-Int16Array.BYTES_PER_ELEMENT;        // 2
-Uint16Array.BYTES_PER_ELEMENT;       // 2
-Int32Array.BYTES_PER_ELEMENT;        // 4
-Uint32Array.BYTES_PER_ELEMENT;       // 4
-Float32Array.BYTES_PER_ELEMENT;      // 4
-Float64Array.BYTES_PER_ELEMENT;      // 8</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Typed Array')}}</td>
-   <td>{{Spec2('Typed Array')}}</td>
-   <td>Spécification englobée par ECMAScript 6.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-typedarray.bytes_per_element', 'TypedArray.BYTES_PER_ELEMENT')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td>Définition initiale au sein d'un standard ECMA.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-typedarray.bytes_per_element', 'TypedArray.BYTES_PER_ELEMENT')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.TypedArray.BYTES_PER_ELEMENT")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/JavaScript/Tableaux_typés">Les tableaux typés en JavaScript</a></li>
- <li>{{jsxref("TypedArray")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/typedarray/bytes_per_element/index.md b/files/fr/web/javascript/reference/global_objects/typedarray/bytes_per_element/index.md
new file mode 100644
index 0000000000..f2ae06a0e6
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/typedarray/bytes_per_element/index.md
@@ -0,0 +1,56 @@
+---
+title: TypedArray.BYTES_PER_ELEMENT
+slug: Web/JavaScript/Reference/Global_Objects/TypedArray/BYTES_PER_ELEMENT
+tags:
+  - JavaScript
+  - Propriété
+  - Reference
+  - TypedArray
+  - TypedArrays
+translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/BYTES_PER_ELEMENT
+original_slug: Web/JavaScript/Reference/Objets_globaux/TypedArray/BYTES_PER_ELEMENT
+---
+{{JSRef}}
+
+La propriété **`TypedArray.BYTES_PER_ELEMENT`** représente la taille, exprimée en octets, de chaque élément du tableau typé.
+
+{{EmbedInteractiveExample("pages/js/typedarray-bytes-per-element.html")}}{{js_property_attributes(0,0,0)}}
+
+## Syntaxe
+
+    TypedArray.BYTES_PER_ELEMENT;
+
+## Description
+
+La taille des éléments d'un tableau typé varie en fonction du type de `TypedArray` utilisé. Le nombre d'octets utilisé pour un élément sera différent en fonction du type de tableau. La propriété `BYTES_PER_ELEMENT` permet de savoir le nombre d'octets contenus dans chaque élément du tableau typé courant.
+
+## Exemples
+
+```js
+Int8Array.BYTES_PER_ELEMENT;         // 1
+Uint8Array.BYTES_PER_ELEMENT;        // 1
+Uint8ClampedArray.BYTES_PER_ELEMENT; // 1
+Int16Array.BYTES_PER_ELEMENT;        // 2
+Uint16Array.BYTES_PER_ELEMENT;       // 2
+Int32Array.BYTES_PER_ELEMENT;        // 4
+Uint32Array.BYTES_PER_ELEMENT;       // 4
+Float32Array.BYTES_PER_ELEMENT;      // 4
+Float64Array.BYTES_PER_ELEMENT;      // 8
+```
+
+## Spécifications
+
+| Spécification                                                                                                                | Statut                           | Commentaires                                    |
+| ---------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------------------------------------------- |
+| {{SpecName('Typed Array')}}                                                                                         | {{Spec2('Typed Array')}} | Spécification englobée par ECMAScript 6.        |
+| {{SpecName('ES6', '#sec-typedarray.bytes_per_element', 'TypedArray.BYTES_PER_ELEMENT')}}         | {{Spec2('ES6')}}             | Définition initiale au sein d'un standard ECMA. |
+| {{SpecName('ESDraft', '#sec-typedarray.bytes_per_element', 'TypedArray.BYTES_PER_ELEMENT')}} | {{Spec2('ESDraft')}}     |                                                 |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.TypedArray.BYTES_PER_ELEMENT")}}
+
+## Voir aussi
+
+- [Les tableaux typés en JavaScript](/fr/docs/Web/JavaScript/Tableaux_typés)
+- {{jsxref("TypedArray")}}
diff --git a/files/fr/web/javascript/reference/global_objects/typedarray/copywithin/index.html b/files/fr/web/javascript/reference/global_objects/typedarray/copywithin/index.html
deleted file mode 100644
index b2c33d295f..0000000000
--- a/files/fr/web/javascript/reference/global_objects/typedarray/copywithin/index.html
+++ /dev/null
@@ -1,84 +0,0 @@
----
-title: TypedArray.prototype.copyWithin()
-slug: Web/JavaScript/Reference/Global_Objects/TypedArray/copyWithin
-tags:
-  - JavaScript
-  - Méthode
-  - Prototype
-  - Reference
-  - TypedArray
-translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/copyWithin
-original_slug: Web/JavaScript/Reference/Objets_globaux/TypedArray/copyWithin
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <code><strong>copyWithin()</strong></code> permet de copier des éléments d'un tableau dans le tableau typé à partir de la position <code>cible</code>. Les éléments copiés sont ceux contenus entre les index <code>début</code> et <code>fin</code>. L'argument <code>fin</code> est optionnel, sa valeur par défaut correspondra à la longueur du tableau dont on souhaite copier les éléments. Cette méthode utilise le même algorithme que {{jsxref("Array.prototype.copyWithin")}}<em>.</em> <em>TypedArray</em> est l'un des types de <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/TypedArray#Les_objets_TypedArray">tableaux typés</a>.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/typedarray-copywithin.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>typedarray</var>.copyWithin(<var>cible</var>, <var>début</var>[, fin = this.length])</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>cible</code></dt>
- <dd>La position, dans le tableau typé, à partir de laquelle on souhaite copier les éléments.</dd>
- <dt><code>début</code></dt>
- <dd>La position du tableau contenant les éléments à copier à partir de laquelle copier les éléments.</dd>
- <dt><code>fin {{optional_inline}}</code></dt>
- <dd>Paramètre optionnel. La position jusqu'à laquelle prendre les éléments à copier.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Le tableau typé, modifié par la fonction.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>Voir la page {{jsxref("Array.prototype.copyWithin")}} pour plus d'informations.</p>
-
-<p>Cette méthode remplace la méthode expérimentale {{jsxref("TypedArray.prototype.move()")}}.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<pre class="brush: js">var buffer = new ArrayBuffer(8);
-var uint8 = new Uint8Array(buffer);
-uint8.set([1,2,3]);
-console.log(uint8); // Uint8Array [ 1, 2, 3, 0, 0, 0, 0, 0 ]
-uint8.copyWithin(3,0,3);
-console.log(uint8); // Uint8Array [ 1, 2, 3, 1, 2, 3, 0, 0 ]
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-%typedarray%.prototype.copywithin', 'TypedArray.prototype.copyWithin')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-%typedarray%.prototype.copywithin', 'TypedArray.prototype.copyWithin')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.TypedArray.copyWithin")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("TypedArray")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/typedarray/copywithin/index.md b/files/fr/web/javascript/reference/global_objects/typedarray/copywithin/index.md
new file mode 100644
index 0000000000..4a2b5aa7c7
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/typedarray/copywithin/index.md
@@ -0,0 +1,66 @@
+---
+title: TypedArray.prototype.copyWithin()
+slug: Web/JavaScript/Reference/Global_Objects/TypedArray/copyWithin
+tags:
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - TypedArray
+translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/copyWithin
+original_slug: Web/JavaScript/Reference/Objets_globaux/TypedArray/copyWithin
+---
+{{JSRef}}
+
+La méthode **`copyWithin()`** permet de copier des éléments d'un tableau dans le tableau typé à partir de la position `cible`. Les éléments copiés sont ceux contenus entre les index `début` et `fin`. L'argument `fin` est optionnel, sa valeur par défaut correspondra à la longueur du tableau dont on souhaite copier les éléments. Cette méthode utilise le même algorithme que {{jsxref("Array.prototype.copyWithin")}}_._ _TypedArray_ est l'un des types de [tableaux typés](/fr/docs/Web/JavaScript/Reference/Objets_globaux/TypedArray#Les_objets_TypedArray).
+
+{{EmbedInteractiveExample("pages/js/typedarray-copywithin.html")}}
+
+## Syntaxe
+
+    typedarray.copyWithin(cible, début[, fin = this.length])
+
+### Paramètres
+
+- `cible`
+  - : La position, dans le tableau typé, à partir de laquelle on souhaite copier les éléments.
+- `début`
+  - : La position du tableau contenant les éléments à copier à partir de laquelle copier les éléments.
+- `fin {{optional_inline}}`
+  - : Paramètre optionnel. La position jusqu'à laquelle prendre les éléments à copier.
+
+### Valeur de retour
+
+Le tableau typé, modifié par la fonction.
+
+## Description
+
+Voir la page {{jsxref("Array.prototype.copyWithin")}} pour plus d'informations.
+
+Cette méthode remplace la méthode expérimentale {{jsxref("TypedArray.prototype.move()")}}.
+
+## Exemples
+
+```js
+var buffer = new ArrayBuffer(8);
+var uint8 = new Uint8Array(buffer);
+uint8.set([1,2,3]);
+console.log(uint8); // Uint8Array [ 1, 2, 3, 0, 0, 0, 0, 0 ]
+uint8.copyWithin(3,0,3);
+console.log(uint8); // Uint8Array [ 1, 2, 3, 1, 2, 3, 0, 0 ]
+```
+
+## Spécifications
+
+| Spécification                                                                                                                        | État                         | Commentaires         |
+| ------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------- | -------------------- |
+| {{SpecName('ES6', '#sec-%typedarray%.prototype.copywithin', 'TypedArray.prototype.copyWithin')}}     | {{Spec2('ES6')}}         | Définition initiale. |
+| {{SpecName('ESDraft', '#sec-%typedarray%.prototype.copywithin', 'TypedArray.prototype.copyWithin')}} | {{Spec2('ESDraft')}} |                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.TypedArray.copyWithin")}}
+
+## Voir aussi
+
+- {{jsxref("TypedArray")}}
diff --git a/files/fr/web/javascript/reference/global_objects/typedarray/entries/index.html b/files/fr/web/javascript/reference/global_objects/typedarray/entries/index.html
deleted file mode 100644
index 3b861d745e..0000000000
--- a/files/fr/web/javascript/reference/global_objects/typedarray/entries/index.html
+++ /dev/null
@@ -1,90 +0,0 @@
----
-title: TypedArray.prototype.entries()
-slug: Web/JavaScript/Reference/Global_Objects/TypedArray/entries
-tags:
-  - ECMAScript 2015
-  - Iterator
-  - JavaScript
-  - Méthode
-  - Prototype
-  - Reference
-  - TypedArrays
-translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/entries
-original_slug: Web/JavaScript/Reference/Objets_globaux/TypedArray/entries
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <strong><code>entries()</code></strong> renvoie un nouvel objet <code>Array Iterator</code> qui contient les paires clé/valeur pour chaque indice du tableau.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/typedarray-entries.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>arr</var>.entries()</pre>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Un nouvel objet <code>Array Iterator</code>.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Parcourir_un_tableau_avec_une_boucle_for...of">Parcourir un tableau avec une boucle <code>for...of</code></h3>
-
-<pre class="brush: js">var arr = new Uint8Array([10, 20, 30, 40, 50]);
-var eArray = arr.entries();
-// prérequis nécessaire : le navigateur doit
-// supporter les boucles for..of
-// et les variables dont la portée est définie par let
-for (let n of eArray) {
-  console.log(n);
-}
-</pre>
-
-<h3 id="Une_autre_méthode_d'itération">Une autre méthode d'itération</h3>
-
-<pre class="brush: js">var arr = new Uint8Array([10, 20, 30, 40, 50]);
-var eArr = arr.entries();
-console.log(eArr.next().value); // [0, 10]
-console.log(eArr.next().value); // [1, 20]
-console.log(eArr.next().value); // [2, 30]
-console.log(eArr.next().value); // [3, 40]
-console.log(eArr.next().value); // [4, 50]
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-%typedarray%.prototype.entries', '%TypedArray%.prototype.entries()')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td>
-    <p>Définition initiale.</p>
-   </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-%typedarray%.prototype.entries', '%TypedArray%.prototype.entries()')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.TypedArray.entries")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/JavaScript/Tableaux_typés">Les tableaux typés en JavaScript</a></li>
- <li>{{jsxref("TypedArray")}}</li>
- <li>{{jsxref("TypedArray.prototype.keys()")}}</li>
- <li>{{jsxref("TypedArray.prototype.values()")}}</li>
- <li>{{jsxref("TypedArray.prototype.@@iterator()", "TypedArray.prototype[@@iterator]()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/typedarray/entries/index.md b/files/fr/web/javascript/reference/global_objects/typedarray/entries/index.md
new file mode 100644
index 0000000000..9e1217d1d1
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/typedarray/entries/index.md
@@ -0,0 +1,92 @@
+---
+title: TypedArray.prototype.entries()
+slug: Web/JavaScript/Reference/Global_Objects/TypedArray/entries
+tags:
+  - ECMAScript 2015
+  - Iterator
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - TypedArrays
+translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/entries
+original_slug: Web/JavaScript/Reference/Objets_globaux/TypedArray/entries
+---
+{{JSRef}}
+
+La méthode **`entries()`** renvoie un nouvel objet `Array Iterator` qui contient les paires clé/valeur pour chaque indice du tableau.
+
+{{EmbedInteractiveExample("pages/js/typedarray-entries.html")}}
+
+## Syntaxe
+
+    arr.entries()
+
+### Valeur de retour
+
+Un nouvel objet `Array Iterator`.
+
+## Exemples
+
+### Parcourir un tableau avec une boucle `for...of`
+
+```js
+var arr = new Uint8Array([10, 20, 30, 40, 50]);
+var eArray = arr.entries();
+// prérequis nécessaire : le navigateur doit
+// supporter les boucles for..of
+// et les variables dont la portée est définie par let
+for (let n of eArray) {
+  console.log(n);
+}
+```
+
+### Une autre méthode d'itération
+
+```js
+var arr = new Uint8Array([10, 20, 30, 40, 50]);
+var eArr = arr.entries();
+console.log(eArr.next().value); // [0, 10]
+console.log(eArr.next().value); // [1, 20]
+console.log(eArr.next().value); // [2, 30]
+console.log(eArr.next().value); // [3, 40]
+console.log(eArr.next().value); // [4, 50]
+```
+
+## Spécifications
+
+<table class="standard-table">
+  <tbody>
+    <tr>
+      <th scope="col">Spécification</th>
+      <th scope="col">État</th>
+      <th scope="col">Commentaires</th>
+    </tr>
+    <tr>
+      <td>
+        {{SpecName('ES2015', '#sec-%typedarray%.prototype.entries', '%TypedArray%.prototype.entries()')}}
+      </td>
+      <td>{{Spec2('ES2015')}}</td>
+      <td><p>Définition initiale.</p></td>
+    </tr>
+    <tr>
+      <td>
+        {{SpecName('ESDraft', '#sec-%typedarray%.prototype.entries', '%TypedArray%.prototype.entries()')}}
+      </td>
+      <td>{{Spec2('ESDraft')}}</td>
+      <td> </td>
+    </tr>
+  </tbody>
+</table>
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.TypedArray.entries")}}
+
+## Voir aussi
+
+- [Les tableaux typés en JavaScript](/fr/docs/Web/JavaScript/Tableaux_typés)
+- {{jsxref("TypedArray")}}
+- {{jsxref("TypedArray.prototype.keys()")}}
+- {{jsxref("TypedArray.prototype.values()")}}
+- {{jsxref("TypedArray.prototype.@@iterator()", "TypedArray.prototype[@@iterator]()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/typedarray/every/index.html b/files/fr/web/javascript/reference/global_objects/typedarray/every/index.html
deleted file mode 100644
index 2ad3a1780f..0000000000
--- a/files/fr/web/javascript/reference/global_objects/typedarray/every/index.html
+++ /dev/null
@@ -1,107 +0,0 @@
----
-title: TypedArray.prototype.every()
-slug: Web/JavaScript/Reference/Global_Objects/TypedArray/every
-tags:
-  - ECMAScript 2015
-  - JavaScript
-  - Méthode
-  - Prototype
-  - Reference
-  - TypedArray
-  - TypedArrays
-translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/every
-original_slug: Web/JavaScript/Reference/Objets_globaux/TypedArray/every
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <code><strong>every()</strong></code> teste si tous les éléments du tableau typé satisfont une condition implémentée par la fonction de test fournie. Cette méthode utilise le même algorithme {{jsxref("Array.prototype.every()")}}. Pour le reste de cet article, <em>TypedArray</em> correspond à un des <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/TypedArray#Les_objets_TypedArray">types de tableaux typés</a>.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/typedarray-every.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>typedarray</var>.every(<var>callback</var>[, <var>thisArg</var>])&gt;</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>callback</code></dt>
- <dd>La fonction utilisée pour tester chaque élément du tableau. Elle utilise trois arguments :
- <dl>
-  <dt><code>valeurCourante</code></dt>
-  <dd>L'élément du tableau typé qui est en cours de traitement.</dd>
-  <dt><code>index</code></dt>
-  <dd>L'indice de l'élément du tableau typé en cours de traitement.</dd>
-  <dt><code>array</code></dt>
-  <dd>Le tableau typé sur lequel on a appelé la méthode <code>every</code>.</dd>
- </dl>
- </dd>
- <dt><code>thisArg</code></dt>
- <dd>Paramètre optionnel, la valeur à utiliser en tant que <code>this</code> lors de l'exécution de <code>callback</code>.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p><code>true</code> si la fonction de rappel obtient une valeur équivalente à vrai (<em>truthy</em>) pour chaque élément du tableau typé, <code>false</code> sinon.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>La méthode <code>every</code> exécute la fonction <code>callback</code> fournie pour chaque élément du tableau typé jusqu'à ce que <code>callback</code> renvoie une valeur fausse (une valeur qui vaut <code>false</code> lorsqu'elle est convertie en un booléen). Si un tel élément est trouvé, la méthode <code>every</code> renvoie immédiatement <code>false</code>. Dans le cas contraire, si <code>callback</code> renvoie une valeur vraie pour tous les éléments, la méthode <code>every</code> renverra <code>true</code>.</p>
-
-<p><code>callback</code> est appelé avec trois arguments : la valeur de l'élément, l'indice de cet élément et le tableau qui est parcouru.</p>
-
-<p>Si le paramètre <code>thisArg</code> est utilisé, il sera passé à la fonction <code>callback</code> en tant que valeur <code>this</code>. Sinon, la valeur <code>undefined</code> sera utilisée comme valeur <code>this</code>. La valeur <code>this</code> définitivement prise en compte par la fonction <code>callback</code> est déterminée selon <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_this">les règles usuelles de détermination de <code>this</code></a>.</p>
-
-<p><code>every</code> ne modifie pas le tableau typé sur lequel elle a été appelée.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Tester_la_taille_des_éléments_d'un_tableau_typé">Tester la taille des éléments d'un tableau typé</h3>
-
-<p>Dans l'exemple suivant, on teste si tous les éléments du tableau typé sont supérieurs à 10 :</p>
-
-<pre class="brush: js">function estGrand(element, index, array) {
-  return element &gt;= 10;
-}
-new Uint8Array([12, 5, 8, 130, 44]).every(estGrand);   // false
-new Uint8Array([12, 54, 18, 130, 44]).every(estGrand); // true</pre>
-
-<h3 id="Tester_les_éléments_d'un_tableau_typé_avec_les_fonctions_fléchées">Tester les éléments d'un tableau typé avec les fonctions fléchées</h3>
-
-<p><a href="/fr/docs/Web/JavaScript/Reference/Fonctions/Fonctions_fléchées">Les fonctions fléchées</a> permettent d'utiliser une syntaxe plus concise pour parvenir au même résultat :</p>
-
-<pre class="brush: js">new Uint8Array([12, 5, 8, 130, 44]).every(elem =&gt; elem &gt;= 10); // false
-new Uint8Array([12, 54, 18, 130, 44]).every(elem =&gt; elem &gt;= 10); // true</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-%typedarray%.prototype.every', 'TypedArray.prototype.every')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-%typedarray%.prototype.every', 'TypedArray.prototype.every')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.TypedArray.every")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("TypedArray.prototype.some()")}}</li>
- <li>{{jsxref("Array.prototype.every()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/typedarray/every/index.md b/files/fr/web/javascript/reference/global_objects/typedarray/every/index.md
new file mode 100644
index 0000000000..64f2525a90
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/typedarray/every/index.md
@@ -0,0 +1,92 @@
+---
+title: TypedArray.prototype.every()
+slug: Web/JavaScript/Reference/Global_Objects/TypedArray/every
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - TypedArray
+  - TypedArrays
+translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/every
+original_slug: Web/JavaScript/Reference/Objets_globaux/TypedArray/every
+---
+{{JSRef}}
+
+La méthode **`every()`** teste si tous les éléments du tableau typé satisfont une condition implémentée par la fonction de test fournie. Cette méthode utilise le même algorithme {{jsxref("Array.prototype.every()")}}. Pour le reste de cet article, _TypedArray_ correspond à un des [types de tableaux typés](/fr/docs/Web/JavaScript/Reference/Objets_globaux/TypedArray#Les_objets_TypedArray).
+
+{{EmbedInteractiveExample("pages/js/typedarray-every.html")}}
+
+## Syntaxe
+
+    typedarray.every(callback[, thisArg])>
+
+### Paramètres
+
+- `callback`
+
+  - : La fonction utilisée pour tester chaque élément du tableau. Elle utilise trois arguments :
+
+    - `valeurCourante`
+      - : L'élément du tableau typé qui est en cours de traitement.
+    - `index`
+      - : L'indice de l'élément du tableau typé en cours de traitement.
+    - `array`
+      - : Le tableau typé sur lequel on a appelé la méthode `every`.
+
+- `thisArg`
+  - : Paramètre optionnel, la valeur à utiliser en tant que `this` lors de l'exécution de `callback`.
+
+### Valeur de retour
+
+`true` si la fonction de rappel obtient une valeur équivalente à vrai (_truthy_) pour chaque élément du tableau typé, `false` sinon.
+
+## Description
+
+La méthode `every` exécute la fonction `callback` fournie pour chaque élément du tableau typé jusqu'à ce que `callback` renvoie une valeur fausse (une valeur qui vaut `false` lorsqu'elle est convertie en un booléen). Si un tel élément est trouvé, la méthode `every` renvoie immédiatement `false`. Dans le cas contraire, si `callback` renvoie une valeur vraie pour tous les éléments, la méthode `every` renverra `true`.
+
+`callback` est appelé avec trois arguments : la valeur de l'élément, l'indice de cet élément et le tableau qui est parcouru.
+
+Si le paramètre `thisArg` est utilisé, il sera passé à la fonction `callback` en tant que valeur `this`. Sinon, la valeur `undefined` sera utilisée comme valeur `this`. La valeur `this` définitivement prise en compte par la fonction `callback` est déterminée selon [les règles usuelles de détermination de `this`](/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_this).
+
+`every` ne modifie pas le tableau typé sur lequel elle a été appelée.
+
+## Exemples
+
+### Tester la taille des éléments d'un tableau typé
+
+Dans l'exemple suivant, on teste si tous les éléments du tableau typé sont supérieurs à 10 :
+
+```js
+function estGrand(element, index, array) {
+  return element >= 10;
+}
+new Uint8Array([12, 5, 8, 130, 44]).every(estGrand);   // false
+new Uint8Array([12, 54, 18, 130, 44]).every(estGrand); // true
+```
+
+### Tester les éléments d'un tableau typé avec les fonctions fléchées
+
+[Les fonctions fléchées](/fr/docs/Web/JavaScript/Reference/Fonctions/Fonctions_fléchées) permettent d'utiliser une syntaxe plus concise pour parvenir au même résultat :
+
+```js
+new Uint8Array([12, 5, 8, 130, 44]).every(elem => elem >= 10); // false
+new Uint8Array([12, 54, 18, 130, 44]).every(elem => elem >= 10); // true
+```
+
+## Spécifications
+
+| Spécification                                                                                                            | État                         | Commentaires         |
+| ------------------------------------------------------------------------------------------------------------------------ | ---------------------------- | -------------------- |
+| {{SpecName('ES2015', '#sec-%typedarray%.prototype.every', 'TypedArray.prototype.every')}} | {{Spec2('ES2015')}}     | Définition initiale. |
+| {{SpecName('ESDraft', '#sec-%typedarray%.prototype.every', 'TypedArray.prototype.every')}} | {{Spec2('ESDraft')}} |                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.TypedArray.every")}}
+
+## Voir aussi
+
+- {{jsxref("TypedArray.prototype.some()")}}
+- {{jsxref("Array.prototype.every()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/typedarray/fill/index.html b/files/fr/web/javascript/reference/global_objects/typedarray/fill/index.html
deleted file mode 100644
index 4f7d43efd6..0000000000
--- a/files/fr/web/javascript/reference/global_objects/typedarray/fill/index.html
+++ /dev/null
@@ -1,97 +0,0 @@
----
-title: TypedArray.prototype.fill()
-slug: Web/JavaScript/Reference/Global_Objects/TypedArray/fill
-tags:
-  - ECMAScript 2015
-  - JavaScript
-  - Méthode
-  - Prototype
-  - Reference
-  - TypedArrays
-  - polyfill
-translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/fill
-original_slug: Web/JavaScript/Reference/Objets_globaux/TypedArray/fill
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <code><strong>fill()</strong></code> remplit les éléments d'un tableau typé contenu entre un indice de début et un indice de fin avec une valeur statique. Cette méthode utilise le même algorithme que {{jsxref("Array.prototype.fill()")}}. Dans le reste de cet article, <em>TypedArray</em> correspond à l'un des <a href="/fr/docs/Web/JavaScript/Tableaux_typés#Les_objets_TypedArray">types de tableaux typés</a>.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/typedarray-fill.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>typedarray</var>.fill(<var>valeur</var>[, <var>début<var> = 0[, <var>fin</var> = this.length]])</var></var></pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>valeur</code></dt>
- <dd>La valeur avec laquelle on souhaite remplir le tableau.</dd>
- <dt><code>début</code></dt>
- <dd>Paramètre optionnel qui représente l'indice à partir duquel remplir le tableau. La valeur par défaut est 0.</dd>
- <dt><code>fin</code></dt>
- <dd>Paramètre optionnel qui représente l'indice jusqu'auquel remplir le tableau. La valeur par défaut est la longueur du tableau (<code>this.length</code>).</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Le tableau typé, modifié par la fonction.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>L'intervalle d'éléments à modifier est [<code>début</code>, <code>fin</code>).</p>
-
-<p>La méthode <strong><code>fill</code></strong> utilise jusqu'à trois arguments : <code>valeur</code>, <code>début</code> et <code>fin</code>. <code>début</code> et <code>fin</code> sont optionnels, leurs valeurs par défaut respectives sont <code>0</code> et la valeur de la propriété <code>length</code> de l'objet <code>this</code>.</p>
-
-<p>Si <code>début</code> est négatif, on le traite comme <code>length+début</code> où <code>length</code> représente la longueur du tableau. Si <code>fin</code> est négative, on le traite comme <code>length+fin</code>.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<pre class="brush: js">new Uint8Array([1, 2, 3]).fill(4);         // Uint8Array [4, 4, 4]
-new Uint8Array([1, 2, 3]).fill(4, 1);      // Uint8Array [1, 4, 4]
-new Uint8Array([1, 2, 3]).fill(4, 1, 2);   // Uint8Array [1, 4, 3]
-new Uint8Array([1, 2, 3]).fill(4, 1, 1);   // Uint8Array [1, 2, 3]
-new Uint8Array([1, 2, 3]).fill(4, -3, -2); // Uint8Array [4, 2, 3]
-</pre>
-
-<h2 id="Prothèse_d'émulation_(polyfill)">Prothèse d'émulation (<em>polyfill</em>)</h2>
-
-<p>Il n'existe pas d'objet global avec le nom <em>TypedArray</em>, la prothèse doit donc être appliquée uniquement si nécessaire, aussi {{jsxref("Array.prototype.fill()")}} pourra éventuellement être utilisé (voire la prothèse de cette dernière).</p>
-
-<pre class="brush: js">// https://tc39.github.io/ecma262/#sec-%typedarray%.prototype.fill
-if (!Uint8Array.prototype.fill) {
-  Uint8Array.prototype.fill = Array.prototype.fill;
-}
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-%typedarray%.prototype.fill', 'TypedArray.prototype.fill')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-%typedarray%.prototype.fill', 'TypedArray.prototype.fill')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.TypedArray.fill")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Array.prototype.fill()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/typedarray/fill/index.md b/files/fr/web/javascript/reference/global_objects/typedarray/fill/index.md
new file mode 100644
index 0000000000..b9b1d668b2
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/typedarray/fill/index.md
@@ -0,0 +1,80 @@
+---
+title: TypedArray.prototype.fill()
+slug: Web/JavaScript/Reference/Global_Objects/TypedArray/fill
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - TypedArrays
+  - polyfill
+translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/fill
+original_slug: Web/JavaScript/Reference/Objets_globaux/TypedArray/fill
+---
+{{JSRef}}
+
+La méthode **`fill()`** remplit les éléments d'un tableau typé contenu entre un indice de début et un indice de fin avec une valeur statique. Cette méthode utilise le même algorithme que {{jsxref("Array.prototype.fill()")}}. Dans le reste de cet article, _TypedArray_ correspond à l'un des [types de tableaux typés](/fr/docs/Web/JavaScript/Tableaux_typés#Les_objets_TypedArray).
+
+{{EmbedInteractiveExample("pages/js/typedarray-fill.html")}}
+
+## Syntaxe
+
+    typedarray.fill(valeur[, début = 0[, fin = this.length]])
+
+### Paramètres
+
+- `valeur`
+  - : La valeur avec laquelle on souhaite remplir le tableau.
+- `début`
+  - : Paramètre optionnel qui représente l'indice à partir duquel remplir le tableau. La valeur par défaut est 0.
+- `fin`
+  - : Paramètre optionnel qui représente l'indice jusqu'auquel remplir le tableau. La valeur par défaut est la longueur du tableau (`this.length`).
+
+### Valeur de retour
+
+Le tableau typé, modifié par la fonction.
+
+## Description
+
+L'intervalle d'éléments à modifier est \[`début`, `fin`).
+
+La méthode **`fill`** utilise jusqu'à trois arguments : `valeur`, `début` et `fin`. `début` et `fin` sont optionnels, leurs valeurs par défaut respectives sont `0` et la valeur de la propriété `length` de l'objet `this`.
+
+Si `début` est négatif, on le traite comme `length+début` où `length` représente la longueur du tableau. Si `fin` est négative, on le traite comme `length+fin`.
+
+## Exemples
+
+```js
+new Uint8Array([1, 2, 3]).fill(4);         // Uint8Array [4, 4, 4]
+new Uint8Array([1, 2, 3]).fill(4, 1);      // Uint8Array [1, 4, 4]
+new Uint8Array([1, 2, 3]).fill(4, 1, 2);   // Uint8Array [1, 4, 3]
+new Uint8Array([1, 2, 3]).fill(4, 1, 1);   // Uint8Array [1, 2, 3]
+new Uint8Array([1, 2, 3]).fill(4, -3, -2); // Uint8Array [4, 2, 3]
+```
+
+## Prothèse d'émulation (_polyfill_)
+
+Il n'existe pas d'objet global avec le nom _TypedArray_, la prothèse doit donc être appliquée uniquement si nécessaire, aussi {{jsxref("Array.prototype.fill()")}} pourra éventuellement être utilisé (voire la prothèse de cette dernière).
+
+```js
+// https://tc39.github.io/ecma262/#sec-%typedarray%.prototype.fill
+if (!Uint8Array.prototype.fill) {
+  Uint8Array.prototype.fill = Array.prototype.fill;
+}
+```
+
+## Spécifications
+
+| Spécification                                                                                                        | État                         | Commentaires         |
+| -------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName('ES2015', '#sec-%typedarray%.prototype.fill', 'TypedArray.prototype.fill')}} | {{Spec2('ES2015')}}     | Définition initiale. |
+| {{SpecName('ESDraft', '#sec-%typedarray%.prototype.fill', 'TypedArray.prototype.fill')}} | {{Spec2('ESDraft')}} |                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.TypedArray.fill")}}
+
+## Voir aussi
+
+- {{jsxref("Array.prototype.fill()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/typedarray/filter/index.html b/files/fr/web/javascript/reference/global_objects/typedarray/filter/index.html
deleted file mode 100644
index 122a6abaf5..0000000000
--- a/files/fr/web/javascript/reference/global_objects/typedarray/filter/index.html
+++ /dev/null
@@ -1,108 +0,0 @@
----
-title: TypedArray.prototype.filter()
-slug: Web/JavaScript/Reference/Global_Objects/TypedArray/filter
-tags:
-  - ECMAScript 2015
-  - JavaScript
-  - Méthode
-  - Prototype
-  - Reference
-  - TypedArray
-  - TypedArrays
-translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/filter
-original_slug: Web/JavaScript/Reference/Objets_globaux/TypedArray/filter
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <code><strong>filter()</strong></code> crée un nouveau tableau qui contient l'ensemble des éléments qui remplissent une condition fournie par la fonction de test passée en argument. Cette méthode utilise le même algorithme que {{jsxref("Array.prototype.filter()")}}<em>.</em> <em>TypedArray</em> est utilisé ici de façon générique pour représenter <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/TypedArray#Les_objets_TypedArray">l'un des types de tableaux typés possibles</a>.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/typedarray-filter.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>typedarray</var>.filter(<var>callback</var>[, <var>thisArg</var>])</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>callback</code></dt>
- <dd>Une fonction qui est utilisée pour tester chacun des éléments du tableau typé. Cette fonction est appelée avec trois arguments <code>(élément, index, tableautypé)</code>. La fonction renvoie <code>true</code> si on souhaite conserver l'élément, <code>false</code> sinon.</dd>
- <dt><code>thisArg {{optional_inline}}</code></dt>
- <dd>La valeur à utiliser pour <code>this</code> lors de l'appel à <code>callback</code>.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Un nouveau tableau typé contenant les éléments qui remplissent la condition donnée par la fonction de rappel.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>La méthode <code>filter()</code> appelle une fonction <code>callback</code> appelée une fois pour chaque élément du tableau typé. Elle construit un nouveau tableau typé constitué des valeurs du tableau original pour lesquelles <code>callback</code> a renvoyé <code>true</code>. <code>callback</code> est appelée uniquement pour les éléments du tableau auxquels on a affecté une valeur, elle n'est pas appelé pour les éléments supprimés ou ceux qui n'ont jamais reçu de valeurs. Les éléments du tableau typé qui ne passent pas le test de la fonction ne sont pas inclus dans le nouveau tableau typé.</p>
-
-<p><code>callback</code> est appelée avec trois arguments :</p>
-
-<ol>
- <li>la valeur de l'élément</li>
- <li>l'indice de l'élément</li>
- <li>le tableau typé courant</li>
-</ol>
-
-<p>Si le paramètre <code>thisArg</code> est fourni, il sera utilisé comme objet <code>this</code> lors de l'appel de la fonction <code>callback</code>. Sinon, la valeur <code>undefined</code> sera utilisée à la place. Par ailleurs, la valeur de <code>this</code> accessible depuis la fonction <code>callback</code> est déterminée selon <a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/L_op%C3%A9rateur_this">les règles usuelles déterminant la valeur this au sein d'une fonction</a>.</p>
-
-<p><code>filter()</code> ne modifie pas le tableau typé sur lequel elle a été appelée.</p>
-
-<p>La liste des éléments parcourus par <code>filter()</code> est définie avant la première invocation de la fonction <code>callback</code>. Les éléments qui sont ajoutés au tableau typé après le début de l'appel de <code>filter()</code> (grâce à la fonction <code>callback</code> par exemple) ne seront pas visités. Si des éléments existants du tableau typé ont modifiés ou supprimés, la valeur fournie à la fonction <code>callback</code> sera leur valeur au moment où <code>filter()</code> les visite - les éléments supprimés ne seront pas traités par la fonction.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Filtrer_les_valeurs_inférieures_à_un_seuil">Filtrer les valeurs inférieures à un seuil</h3>
-
-<p>Dans l'exemple qui suit, on utilise <code>filter()</code> pour créer un nouveau tableau typé qui contient uniquement les éléments supérieurs à 10.</p>
-
-<pre class="brush: js">function supSeuil(élément, indice, tableauTypé) {
-  return élément &gt;= 10;
-}
-new Uint8Array([12, 5, 8, 130, 44]).filter(supSeuil);
-// Uint8Array [ 12, 130, 44 ]
-</pre>
-
-<h3 id="Filtrer_les_éléments_d'un_tableau_typé_avec_les_fonctions_fléchées">Filtrer les éléments d'un tableau typé avec les fonctions fléchées</h3>
-
-<p><a href="/fr/docs/Web/JavaScript/Reference/Fonctions/Fonctions_fléchées">Les fonctions fléchées</a> permettent d'utiliser une syntaxe plus concise pour réaliser le même test que montré précédemment :</p>
-
-<pre class="brush: js">new Uint8Array([12, 5, 8, 130, 44]).filter(élém =&gt; élém &gt;= 10);
-// Uint8Array [ 12, 130, 44 ]</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-%typedarray%.prototype.filter', 'TypedArray.prototype.filter')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-%typedarray%.prototype.filter', 'TypedArray.prototype.filter')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.TypedArray.filter")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("TypedArray.prototype.every()")}}</li>
- <li>{{jsxref("TypedArray.prototype.some()")}}</li>
- <li>{{jsxref("Array.prototype.filter()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/typedarray/filter/index.md b/files/fr/web/javascript/reference/global_objects/typedarray/filter/index.md
new file mode 100644
index 0000000000..ba1ac88002
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/typedarray/filter/index.md
@@ -0,0 +1,90 @@
+---
+title: TypedArray.prototype.filter()
+slug: Web/JavaScript/Reference/Global_Objects/TypedArray/filter
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - TypedArray
+  - TypedArrays
+translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/filter
+original_slug: Web/JavaScript/Reference/Objets_globaux/TypedArray/filter
+---
+{{JSRef}}
+
+La méthode **`filter()`** crée un nouveau tableau qui contient l'ensemble des éléments qui remplissent une condition fournie par la fonction de test passée en argument. Cette méthode utilise le même algorithme que {{jsxref("Array.prototype.filter()")}}_._ _TypedArray_ est utilisé ici de façon générique pour représenter [l'un des types de tableaux typés possibles](/fr/docs/Web/JavaScript/Reference/Objets_globaux/TypedArray#Les_objets_TypedArray).
+
+{{EmbedInteractiveExample("pages/js/typedarray-filter.html")}}
+
+## Syntaxe
+
+    typedarray.filter(callback[, thisArg])
+
+### Paramètres
+
+- `callback`
+  - : Une fonction qui est utilisée pour tester chacun des éléments du tableau typé. Cette fonction est appelée avec trois arguments `(élément, index, tableautypé)`. La fonction renvoie `true` si on souhaite conserver l'élément, `false` sinon.
+- `thisArg {{optional_inline}}`
+  - : La valeur à utiliser pour `this` lors de l'appel à `callback`.
+
+### Valeur de retour
+
+Un nouveau tableau typé contenant les éléments qui remplissent la condition donnée par la fonction de rappel.
+
+## Description
+
+La méthode `filter()` appelle une fonction `callback` appelée une fois pour chaque élément du tableau typé. Elle construit un nouveau tableau typé constitué des valeurs du tableau original pour lesquelles `callback` a renvoyé `true`. `callback` est appelée uniquement pour les éléments du tableau auxquels on a affecté une valeur, elle n'est pas appelé pour les éléments supprimés ou ceux qui n'ont jamais reçu de valeurs. Les éléments du tableau typé qui ne passent pas le test de la fonction ne sont pas inclus dans le nouveau tableau typé.
+
+`callback` est appelée avec trois arguments :
+
+1.  la valeur de l'élément
+2.  l'indice de l'élément
+3.  le tableau typé courant
+
+Si le paramètre `thisArg` est fourni, il sera utilisé comme objet `this` lors de l'appel de la fonction `callback`. Sinon, la valeur `undefined` sera utilisée à la place. Par ailleurs, la valeur de `this` accessible depuis la fonction `callback` est déterminée selon [les règles usuelles déterminant la valeur this au sein d'une fonction](/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/L_op%C3%A9rateur_this).
+
+`filter()` ne modifie pas le tableau typé sur lequel elle a été appelée.
+
+La liste des éléments parcourus par `filter()` est définie avant la première invocation de la fonction `callback`. Les éléments qui sont ajoutés au tableau typé après le début de l'appel de `filter()` (grâce à la fonction `callback` par exemple) ne seront pas visités. Si des éléments existants du tableau typé ont modifiés ou supprimés, la valeur fournie à la fonction `callback` sera leur valeur au moment où `filter()` les visite - les éléments supprimés ne seront pas traités par la fonction.
+
+## Exemples
+
+### Filtrer les valeurs inférieures à un seuil
+
+Dans l'exemple qui suit, on utilise `filter()` pour créer un nouveau tableau typé qui contient uniquement les éléments supérieurs à 10.
+
+```js
+function supSeuil(élément, indice, tableauTypé) {
+  return élément >= 10;
+}
+new Uint8Array([12, 5, 8, 130, 44]).filter(supSeuil);
+// Uint8Array [ 12, 130, 44 ]
+```
+
+### Filtrer les éléments d'un tableau typé avec les fonctions fléchées
+
+[Les fonctions fléchées](/fr/docs/Web/JavaScript/Reference/Fonctions/Fonctions_fléchées) permettent d'utiliser une syntaxe plus concise pour réaliser le même test que montré précédemment :
+
+```js
+new Uint8Array([12, 5, 8, 130, 44]).filter(élém => élém >= 10);
+// Uint8Array [ 12, 130, 44 ]
+```
+
+## Spécifications
+
+| Spécification                                                                                                                | État                         | Commentaires         |
+| ---------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName('ES2015', '#sec-%typedarray%.prototype.filter', 'TypedArray.prototype.filter')}}     | {{Spec2('ES2015')}}     | Définition initiale. |
+| {{SpecName('ESDraft', '#sec-%typedarray%.prototype.filter', 'TypedArray.prototype.filter')}} | {{Spec2('ESDraft')}} |                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.TypedArray.filter")}}
+
+## Voir aussi
+
+- {{jsxref("TypedArray.prototype.every()")}}
+- {{jsxref("TypedArray.prototype.some()")}}
+- {{jsxref("Array.prototype.filter()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/typedarray/find/index.html b/files/fr/web/javascript/reference/global_objects/typedarray/find/index.html
deleted file mode 100644
index e45999369d..0000000000
--- a/files/fr/web/javascript/reference/global_objects/typedarray/find/index.html
+++ /dev/null
@@ -1,111 +0,0 @@
----
-title: TypedArray.prototype.find()
-slug: Web/JavaScript/Reference/Global_Objects/TypedArray/find
-tags:
-  - ECMAScript 2015
-  - JavaScript
-  - Méthode
-  - Prototype
-  - Reference
-  - TypedArray
-  - TypedArrays
-translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/find
-original_slug: Web/JavaScript/Reference/Objets_globaux/TypedArray/find
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <code><strong>find()</strong></code> renvoie une <strong>valeur</strong> du tableau typé si un élément du tableau remplit la condition définie par la fonction de test fournie. Si aucun élément ne remplit la condition, la valeur {{jsxref("undefined")}} sera renvoyée. Pour la suite de cet article <em>TypedArray</em> correspond à l'un des <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/TypedArray#Les_objets_TypedArray">types de tableaux typés</a>.</p>
-
-<p>Voir également la page sur la méthohde {{jsxref("TypedArray.findIndex", "findIndex()")}} qui renvoie l'<strong>indice</strong> de l'élément trouvé (et non sa valeur).</p>
-
-<div>{{EmbedInteractiveExample("pages/js/typedarray-find.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>typedarray</var>.find(<var>callback</var>[, <var>thisArg</var>])</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>callback</code></dt>
- <dd>La fonction à exécuter pour chaque valeur du tableau typé. Elle prend trois arguments :
- <dl>
-  <dt><code>élément</code></dt>
-  <dd>L'élément du tableau typé en cours de traitement.</dd>
-  <dt><code>index</code></dt>
-  <dd>L'indice de l'élément du tableau typé en cours de traitement.</dd>
-  <dt><code>array</code></dt>
-  <dd>Le tableau sur lequel la méthode <code>find</code> a été appelée.</dd>
- </dl>
- </dd>
- <dt><code>thisArg</code></dt>
- <dd>Paramètre optionnel, il correspond à l'objet à utiliser en tant que <code>this</code> lors de l'exécution de la fonction <code>callback</code>.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Une valeur du tableau qui remplit la condition définie par la fonction de rappel, {{jsxref("undefined")}} sinon.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>La méthode <code>find</code> exécute la fonction <code>callback</code> une fois pour chacun des éléments présents dans le tableau typé jusqu'à ce que la fonction <code>callback</code> renvoie une valeur vraie. Si un tel élément est trouvé, <code>find</code> retourne immédiatement la valeur de cet élément, sinon <code>find</code> renvoie {{jsxref("undefined")}}. <code>callback</code> est appelée uniquement pour les indices du tableau typé qui possèdent une valeur, elle n'est pas appelée pour les indices qui ont été supprimés ou qui ne possèdent pas de valeurs.</p>
-
-<p><code>callback</code> est invoquée avec trois arguments : la valeur de l'élément, son indice et le tableau typé parcouru.</p>
-
-<p>Si la paramètre <code>thisArg</code> est utilisé, il sera utilisé en tant que <code>this</code> pour chaque appel à <code>callback</code>. S'il n'est pas fourni, la valeur {{jsxref("undefined")}} sera utilisée.</p>
-
-<p><code>find</code> ne modifie pas le tableau typé sur lequel elle est appelé.</p>
-
-<p>La liste des éléments traités par <code>find</code> est définie avant le premier appel à <code>callback</code>. Les éléments qui sont ajoutés au tableau typé après que l'appel à <code>find</code> ait commencé ne seront pas traités par <code>callback</code>. Si un élément du tableau qui n'a pas encore été traité est modifié par un appel précédent de <code>callback</code>, la valeur utilisée au moment où il est traité est celle qu'il aura lorsque <code>find</code> atteindra cet indice. Les éléments qui sont supprimés ne sont pas traités par la fonction.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Trouver_un_nombre_premier">Trouver un nombre premier</h3>
-
-<p>Dans l'exemple qui suit, on cherche un élément d'un tableau typé qui est un nombre premier (on renvoie <code>undefined</code> s'il n'y a pas de nombre premier).</p>
-
-<pre class="brush: js">function estPremier(élément, index, array) {
-  var début = 2;
-  while (début &lt;= Math.sqrt(élément)) {
-    if (élément % début++ &lt; 1) {
-      return false;
-    }
-  }
-  return élément &gt; 1;
-}
-
-var uint8 = new Uint8Array([4, 5, 8, 12]);
-console.log(uint8.find(estPremier)); // 5</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-%typedarray%.prototype.find', '%TypedArray%.prototype.find')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-%typedarray%.prototype.find', '%TypedArray%.prototype.find')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.TypedArray.find")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("TypedArray.prototype.findIndex()")}}</li>
- <li>{{jsxref("TypedArray.prototype.every()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/typedarray/find/index.md b/files/fr/web/javascript/reference/global_objects/typedarray/find/index.md
new file mode 100644
index 0000000000..d76794588c
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/typedarray/find/index.md
@@ -0,0 +1,94 @@
+---
+title: TypedArray.prototype.find()
+slug: Web/JavaScript/Reference/Global_Objects/TypedArray/find
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - TypedArray
+  - TypedArrays
+translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/find
+original_slug: Web/JavaScript/Reference/Objets_globaux/TypedArray/find
+---
+{{JSRef}}
+
+La méthode **`find()`** renvoie une **valeur** du tableau typé si un élément du tableau remplit la condition définie par la fonction de test fournie. Si aucun élément ne remplit la condition, la valeur {{jsxref("undefined")}} sera renvoyée. Pour la suite de cet article _TypedArray_ correspond à l'un des [types de tableaux typés](/fr/docs/Web/JavaScript/Reference/Objets_globaux/TypedArray#Les_objets_TypedArray).
+
+Voir également la page sur la méthohde {{jsxref("TypedArray.findIndex", "findIndex()")}} qui renvoie l'**indice** de l'élément trouvé (et non sa valeur).
+
+{{EmbedInteractiveExample("pages/js/typedarray-find.html")}}
+
+## Syntaxe
+
+    typedarray.find(callback[, thisArg])
+
+### Paramètres
+
+- `callback`
+
+  - : La fonction à exécuter pour chaque valeur du tableau typé. Elle prend trois arguments :
+
+    - `élément`
+      - : L'élément du tableau typé en cours de traitement.
+    - `index`
+      - : L'indice de l'élément du tableau typé en cours de traitement.
+    - `array`
+      - : Le tableau sur lequel la méthode `find` a été appelée.
+
+- `thisArg`
+  - : Paramètre optionnel, il correspond à l'objet à utiliser en tant que `this` lors de l'exécution de la fonction `callback`.
+
+### Valeur de retour
+
+Une valeur du tableau qui remplit la condition définie par la fonction de rappel, {{jsxref("undefined")}} sinon.
+
+## Description
+
+La méthode `find` exécute la fonction `callback` une fois pour chacun des éléments présents dans le tableau typé jusqu'à ce que la fonction `callback` renvoie une valeur vraie. Si un tel élément est trouvé, `find` retourne immédiatement la valeur de cet élément, sinon `find` renvoie {{jsxref("undefined")}}. `callback` est appelée uniquement pour les indices du tableau typé qui possèdent une valeur, elle n'est pas appelée pour les indices qui ont été supprimés ou qui ne possèdent pas de valeurs.
+
+`callback` est invoquée avec trois arguments : la valeur de l'élément, son indice et le tableau typé parcouru.
+
+Si la paramètre `thisArg` est utilisé, il sera utilisé en tant que `this` pour chaque appel à `callback`. S'il n'est pas fourni, la valeur {{jsxref("undefined")}} sera utilisée.
+
+`find` ne modifie pas le tableau typé sur lequel elle est appelé.
+
+La liste des éléments traités par `find` est définie avant le premier appel à `callback`. Les éléments qui sont ajoutés au tableau typé après que l'appel à `find` ait commencé ne seront pas traités par `callback`. Si un élément du tableau qui n'a pas encore été traité est modifié par un appel précédent de `callback`, la valeur utilisée au moment où il est traité est celle qu'il aura lorsque `find` atteindra cet indice. Les éléments qui sont supprimés ne sont pas traités par la fonction.
+
+## Exemples
+
+### Trouver un nombre premier
+
+Dans l'exemple qui suit, on cherche un élément d'un tableau typé qui est un nombre premier (on renvoie `undefined` s'il n'y a pas de nombre premier).
+
+```js
+function estPremier(élément, index, array) {
+  var début = 2;
+  while (début <= Math.sqrt(élément)) {
+    if (élément % début++ < 1) {
+      return false;
+    }
+  }
+  return élément > 1;
+}
+
+var uint8 = new Uint8Array([4, 5, 8, 12]);
+console.log(uint8.find(estPremier)); // 5
+```
+
+## Spécifications
+
+| Spécification                                                                                                            | État                         | Commentaires         |
+| ------------------------------------------------------------------------------------------------------------------------ | ---------------------------- | -------------------- |
+| {{SpecName('ES2015', '#sec-%typedarray%.prototype.find', '%TypedArray%.prototype.find')}} | {{Spec2('ES2015')}}     | Définition initiale. |
+| {{SpecName('ESDraft', '#sec-%typedarray%.prototype.find', '%TypedArray%.prototype.find')}} | {{Spec2('ESDraft')}} |                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.TypedArray.find")}}
+
+## Voir aussi
+
+- {{jsxref("TypedArray.prototype.findIndex()")}}
+- {{jsxref("TypedArray.prototype.every()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/typedarray/findindex/index.html b/files/fr/web/javascript/reference/global_objects/typedarray/findindex/index.html
deleted file mode 100644
index 9cca0653d7..0000000000
--- a/files/fr/web/javascript/reference/global_objects/typedarray/findindex/index.html
+++ /dev/null
@@ -1,113 +0,0 @@
----
-title: TypedArray.prototype.findIndex()
-slug: Web/JavaScript/Reference/Global_Objects/TypedArray/findIndex
-tags:
-  - ECMAScript 2015
-  - JavaScript
-  - Méthode
-  - Prototype
-  - Reference
-  - TypedArray
-  - TypedArrrays
-translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/findIndex
-original_slug: Web/JavaScript/Reference/Objets_globaux/TypedArray/findIndex
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <code><strong>findIndex()</strong></code> renvoie un <strong>indice</strong> d'un élément d'un tableau typé si cet élément remplit une condition définie par une fonction de test donnée. S'il n'y a aucun élément satisfaisant, -1 sera renvoyé.</p>
-
-<p>Voir aussi la méthode {{jsxref("TypedArray.find", "find()")}} qui renvoie la <strong>valeur</strong> de l'élément trouvé (au lieu de son indice).</p>
-
-<div>{{EmbedInteractiveExample("pages/js/typedarray-findindex.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>typedarray</var>.findIndex(<var>callback</var>[, <var>thisArg</var>])</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>callback</code></dt>
- <dd>La fonction à exécuter pour chaque valeur du tableau typé. Elle prend trois arguments :
- <dl>
-  <dt><code>élément</code></dt>
-  <dd>L'élément du tableau typé en cours de traitement.</dd>
-  <dt><code>index</code></dt>
-  <dd>L'indice de l'élément du tableau typé en cours de traitement.</dd>
-  <dt><code>array</code></dt>
-  <dd>Le tableau typé sur lequel la méthode <code>findIndex</code> a été appelée.</dd>
- </dl>
- </dd>
- <dt><code>thisArg</code></dt>
- <dd>Paramètre optionnel, l'objet à utiliser en tant que <code>this</code> pour les appels à <code>callback</code>.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Un indice du tableau pour lequel l'élément remplit la condition décrite par la fonction, <code>-1</code> sinon.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>La méthode <code>findIndex</code> exécute la fonction <code>callback</code> une fois pour chacun des éléments présent dans le tableau typé jusqu'à ce que <code>callback</code> renvoie une valeur vraie pour un élément. Si un tel élément est trouvé, <code>findIndex</code> retournera immédiatement l'indice de cet élément. Sinon, <code>findIndex</code> renverra -1. <code>callback</code> est appelé uniquement pour les éléments du tableau qui possèdent une valeur, les éléments qui ont été supprimés ou qui n'ont pas de valeur ne sont pas traités.</p>
-
-<p><code>callback</code> est appelé avec trois arguments : la valeur de l'élément, son indice et le tableau typé qui est parcouru.</p>
-
-<p>Si un paramètre <code>thisArg</code> a été fourni à <code>findIndex</code>, celui-ci sera utilisé en tant que <code>this</code> pour chaque appel de <code>callback</code>. Dans le cas contraire, la valeur {{jsxref("undefined")}} sera utilisée.</p>
-
-<p><code>findIndex</code> ne modifie pas le tableau typé sur lequel elle a été appelée.</p>
-
-<p>La liste des éléments traités par <code>findIndex</code> est définie avant le premier appel à <code>callback</code>. Les éléments qui sont ajoutés au tableau typés après que <code>findIndex</code> ait débuté ne sont pas traités par <code>callback</code>. Si un élément est modifié par un appel à <code>callback</code> précédent, la valeur passée à <code>callback</code> lors du traitement sera celle au moment où <code>findIndex</code> traite l'indice de l'élément. Les éléments qui sont supprimés ne sont pas pris en compte.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<p>Dans l'exemple suivant, on utilise la méthode pour trouver l'indice d'un nombre premier dans le tableau typé (ou -1 dans le cas où il n'y a pas de nombre premier) :</p>
-
-<pre class="brush: js">function estPremier(élément, index, array) {
-  var début = 2;
-  while (début &lt;= Math.sqrt(élément)) {
-    if (élément % début++ &lt; 1) {
-      return false;
-    }
-  }
-  return élément &gt; 1;
-}
-
-var uint8 = new Uint8Array([4, 6, 8, 12]);
-var uint16 = new Uint16Array([4, 6, 7, 12]);
-
-console.log(uint8.findIndex(estPremier)); // -1, non trouvé
-console.log(uint16.findIndex(estPremier)); // 2
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-%typedarray%.prototype.findindex', '%TypedArray%.prototype.findIndex')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-%typedarray%.prototype.findindex', '%TypedArray%.prototype.findIndex')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.TypedArray.findIndex")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("TypedArray.prototype.find()")}}</li>
- <li>{{jsxref("TypedArray.prototype.indexOf()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/typedarray/findindex/index.md b/files/fr/web/javascript/reference/global_objects/typedarray/findindex/index.md
new file mode 100644
index 0000000000..5a47252cf2
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/typedarray/findindex/index.md
@@ -0,0 +1,95 @@
+---
+title: TypedArray.prototype.findIndex()
+slug: Web/JavaScript/Reference/Global_Objects/TypedArray/findIndex
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - TypedArray
+  - TypedArrrays
+translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/findIndex
+original_slug: Web/JavaScript/Reference/Objets_globaux/TypedArray/findIndex
+---
+{{JSRef}}
+
+La méthode **`findIndex()`** renvoie un **indice** d'un élément d'un tableau typé si cet élément remplit une condition définie par une fonction de test donnée. S'il n'y a aucun élément satisfaisant, -1 sera renvoyé.
+
+Voir aussi la méthode {{jsxref("TypedArray.find", "find()")}} qui renvoie la **valeur** de l'élément trouvé (au lieu de son indice).
+
+{{EmbedInteractiveExample("pages/js/typedarray-findindex.html")}}
+
+## Syntaxe
+
+    typedarray.findIndex(callback[, thisArg])
+
+### Paramètres
+
+- `callback`
+
+  - : La fonction à exécuter pour chaque valeur du tableau typé. Elle prend trois arguments :
+
+    - `élément`
+      - : L'élément du tableau typé en cours de traitement.
+    - `index`
+      - : L'indice de l'élément du tableau typé en cours de traitement.
+    - `array`
+      - : Le tableau typé sur lequel la méthode `findIndex` a été appelée.
+
+- `thisArg`
+  - : Paramètre optionnel, l'objet à utiliser en tant que `this` pour les appels à `callback`.
+
+### Valeur de retour
+
+Un indice du tableau pour lequel l'élément remplit la condition décrite par la fonction, `-1` sinon.
+
+## Description
+
+La méthode `findIndex` exécute la fonction `callback` une fois pour chacun des éléments présent dans le tableau typé jusqu'à ce que `callback` renvoie une valeur vraie pour un élément. Si un tel élément est trouvé, `findIndex` retournera immédiatement l'indice de cet élément. Sinon, `findIndex` renverra -1. `callback` est appelé uniquement pour les éléments du tableau qui possèdent une valeur, les éléments qui ont été supprimés ou qui n'ont pas de valeur ne sont pas traités.
+
+`callback` est appelé avec trois arguments : la valeur de l'élément, son indice et le tableau typé qui est parcouru.
+
+Si un paramètre `thisArg` a été fourni à `findIndex`, celui-ci sera utilisé en tant que `this` pour chaque appel de `callback`. Dans le cas contraire, la valeur {{jsxref("undefined")}} sera utilisée.
+
+`findIndex` ne modifie pas le tableau typé sur lequel elle a été appelée.
+
+La liste des éléments traités par `findIndex` est définie avant le premier appel à `callback`. Les éléments qui sont ajoutés au tableau typés après que `findIndex` ait débuté ne sont pas traités par `callback`. Si un élément est modifié par un appel à `callback` précédent, la valeur passée à `callback` lors du traitement sera celle au moment où `findIndex` traite l'indice de l'élément. Les éléments qui sont supprimés ne sont pas pris en compte.
+
+## Exemples
+
+Dans l'exemple suivant, on utilise la méthode pour trouver l'indice d'un nombre premier dans le tableau typé (ou -1 dans le cas où il n'y a pas de nombre premier) :
+
+```js
+function estPremier(élément, index, array) {
+  var début = 2;
+  while (début <= Math.sqrt(élément)) {
+    if (élément % début++ < 1) {
+      return false;
+    }
+  }
+  return élément > 1;
+}
+
+var uint8 = new Uint8Array([4, 6, 8, 12]);
+var uint16 = new Uint16Array([4, 6, 7, 12]);
+
+console.log(uint8.findIndex(estPremier)); // -1, non trouvé
+console.log(uint16.findIndex(estPremier)); // 2
+```
+
+## Spécifications
+
+| Spécification                                                                                                                        | État                         | Commentaires         |
+| ------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------- | -------------------- |
+| {{SpecName('ES2015', '#sec-%typedarray%.prototype.findindex', '%TypedArray%.prototype.findIndex')}} | {{Spec2('ES2015')}}     | Définition initiale. |
+| {{SpecName('ESDraft', '#sec-%typedarray%.prototype.findindex', '%TypedArray%.prototype.findIndex')}} | {{Spec2('ESDraft')}} |                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.TypedArray.findIndex")}}
+
+## Voir aussi
+
+- {{jsxref("TypedArray.prototype.find()")}}
+- {{jsxref("TypedArray.prototype.indexOf()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/typedarray/foreach/index.html b/files/fr/web/javascript/reference/global_objects/typedarray/foreach/index.html
deleted file mode 100644
index 0ae4aab666..0000000000
--- a/files/fr/web/javascript/reference/global_objects/typedarray/foreach/index.html
+++ /dev/null
@@ -1,113 +0,0 @@
----
-title: TypedArray.prototype.forEach()
-slug: Web/JavaScript/Reference/Global_Objects/TypedArray/forEach
-tags:
-  - ECMAScript 2015
-  - JavaScript
-  - Méthode
-  - Reference
-  - TypedArray
-  - TypedArrays
-translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/forEach
-original_slug: Web/JavaScript/Reference/Objets_globaux/TypedArray/forEach
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <code><strong>forEach()</strong></code> permet d'exécuter une fonction donnée sur chaque élément du tableau. Cette méthode implémente le même algorithme que {{jsxref("Array.prototype.forEach()")}}.</p>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>tableauTypé</var>.forEach(<var>callback</var>[, <var>thisArg</var>])</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>callback</code></dt>
- <dd>La fonction à utiliser pour chaque élément du tableau typé. Elle prend trois arguments :
- <dl>
-  <dt><code>valeurÉlément</code></dt>
-  <dd>La valeur de l'élément traité actuellement.</dd>
-  <dt><code>indiceÉlément</code></dt>
-  <dd>L'indice de l'élément traité actuellement.</dd>
-  <dt><code>tableau</code></dt>
-  <dd>Le tableau parcouru par <code>forEach()</code>.</dd>
- </dl>
- </dd>
- <dt><code>thisArg</code></dt>
- <dd>Optionnel. La valeur utilisée pour <code>this</code> lors de l'appel à <code>callback()</code>.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>{{jsxref("undefined")}}.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>La méthode <code>forEach()</code> exécute la fonction <code>callback()</code> une fois pour chaque élément présent dans le tableau typé, par ordre d'indice croissant. Cette fonction n'est pas appelée pour les indices sur lesquels les éléments ont été supprimés ou n'ont pas été définis. <code>callback()</code> est cependant appelée pour les éléments qui portent la valeur {{jsxref("undefined")}}.</p>
-
-<p><code>callback()</code> accepte <strong>trois arguments</strong> :</p>
-
-<ul>
- <li>la <strong>valeur de l'élément</strong></li>
- <li>l'<strong>indice de l'élément</strong></li>
- <li>le <strong>le tableau typé traversé</strong></li>
-</ul>
-
-<p>Si le paramètre <code>thisArg</code> est fourni à <code>forEach()</code>, il sera la valeur du <code>this</code> utilisé par chaque exécution de <code>callback()</code>. Dans le cas contraire, la valeur {{jsxref("undefined")}} sera utilisée par défaut. Pour déterminer la valeur de <code>this</code> véritablement visible par <code>callback()</code> durant son exécution, les règles habituelles pour {{jsxref("Operators/this", "déterminer la valeur de this du point de vue d'une fonction")}} sont appliquées.</p>
-
-<p>L'ensemble des éléments visités par <code>forEach()</code> est fixé avant le premier appel à <code>callback</code>. Ainsi, les éléments qui sont ajoutés au tableau typé après que l'exécution de <code>forEach()</code> soit lancée ne seront pas traités. Cependant, si la valeur d'un élément à traiter est modifiée pendant l'exécution de <code>forEach()</code>, la valeur passée à <code>callback()</code> sera celle de l'élément au moment où il est traité. Si un élément est supprimé avant d'être visité, il ne sera pas traité.</p>
-
-<p><code>forEach()</code> lance un appel à la fonction <code>callback()</code> pour chaque élément du tableau typé ; à la différence de {{jsxref("TypedArray.prototype.every()", "every()")}} et {{jsxref("TypedArray.prototype.some()", "some()")}} cette méthode renvoie toujours {{jsxref("undefined")}}.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Exemple_Affichage_du_contenu_d'un_tableau_typé">Exemple: Affichage du contenu d'un tableau typé</h3>
-
-<p>Le code ci-dessous affiche une ligne pour chaque élément du tableau typé :</p>
-
-<pre class="brush:js">function affichageContenuTableau(élément, index, tableau) {
-  console.log('a[' + index + '] = ' + élément);
-}
-
-new Uint8Array([0, 1, 2, 3]).forEach(affichageContenuTableau);
-// log :
-// a[0] = 0
-// a[1] = 1
-// a[2] = 2
-// a[3] = 3
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-%typedarray%.prototype.foreach', '%TypedArray%.prototype.forEach')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-%typedarray%.prototype.foreach', '%TypedArray%.prototype.forEach')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.TypedArray.forEach")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("TypedArray.prototype.map()")}}</li>
- <li>{{jsxref("TypedArray.prototype.every()")}}</li>
- <li>{{jsxref("TypedArray.prototype.some()")}}</li>
- <li>{{jsxref("Array.prototype.forEach()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/typedarray/foreach/index.md b/files/fr/web/javascript/reference/global_objects/typedarray/foreach/index.md
new file mode 100644
index 0000000000..5e8e660ebc
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/typedarray/foreach/index.md
@@ -0,0 +1,93 @@
+---
+title: TypedArray.prototype.forEach()
+slug: Web/JavaScript/Reference/Global_Objects/TypedArray/forEach
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Méthode
+  - Reference
+  - TypedArray
+  - TypedArrays
+translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/forEach
+original_slug: Web/JavaScript/Reference/Objets_globaux/TypedArray/forEach
+---
+{{JSRef}}
+
+La méthode **`forEach()`** permet d'exécuter une fonction donnée sur chaque élément du tableau. Cette méthode implémente le même algorithme que {{jsxref("Array.prototype.forEach()")}}.
+
+## Syntaxe
+
+    tableauTypé.forEach(callback[, thisArg])
+
+### Paramètres
+
+- `callback`
+
+  - : La fonction à utiliser pour chaque élément du tableau typé. Elle prend trois arguments :
+
+    - `valeurÉlément`
+      - : La valeur de l'élément traité actuellement.
+    - `indiceÉlément`
+      - : L'indice de l'élément traité actuellement.
+    - `tableau`
+      - : Le tableau parcouru par `forEach()`.
+
+- `thisArg`
+  - : Optionnel. La valeur utilisée pour `this` lors de l'appel à `callback()`.
+
+### Valeur de retour
+
+{{jsxref("undefined")}}.
+
+## Description
+
+La méthode `forEach()` exécute la fonction `callback()` une fois pour chaque élément présent dans le tableau typé, par ordre d'indice croissant. Cette fonction n'est pas appelée pour les indices sur lesquels les éléments ont été supprimés ou n'ont pas été définis. `callback()` est cependant appelée pour les éléments qui portent la valeur {{jsxref("undefined")}}.
+
+`callback()` accepte **trois arguments** :
+
+- la **valeur de l'élément**
+- l'**indice de l'élément**
+- le **le tableau typé traversé**
+
+Si le paramètre `thisArg` est fourni à `forEach()`, il sera la valeur du `this` utilisé par chaque exécution de `callback()`. Dans le cas contraire, la valeur {{jsxref("undefined")}} sera utilisée par défaut. Pour déterminer la valeur de `this` véritablement visible par `callback()` durant son exécution, les règles habituelles pour {{jsxref("Operators/this", "déterminer la valeur de this du point de vue d'une fonction")}} sont appliquées.
+
+L'ensemble des éléments visités par `forEach()` est fixé avant le premier appel à `callback`. Ainsi, les éléments qui sont ajoutés au tableau typé après que l'exécution de `forEach()` soit lancée ne seront pas traités. Cependant, si la valeur d'un élément à traiter est modifiée pendant l'exécution de `forEach()`, la valeur passée à `callback()` sera celle de l'élément au moment où il est traité. Si un élément est supprimé avant d'être visité, il ne sera pas traité.
+
+`forEach()` lance un appel à la fonction `callback()` pour chaque élément du tableau typé ; à la différence de {{jsxref("TypedArray.prototype.every()", "every()")}} et {{jsxref("TypedArray.prototype.some()", "some()")}} cette méthode renvoie toujours {{jsxref("undefined")}}.
+
+## Exemples
+
+### Exemple: Affichage du contenu d'un tableau typé
+
+Le code ci-dessous affiche une ligne pour chaque élément du tableau typé :
+
+```js
+function affichageContenuTableau(élément, index, tableau) {
+  console.log('a[' + index + '] = ' + élément);
+}
+
+new Uint8Array([0, 1, 2, 3]).forEach(affichageContenuTableau);
+// log :
+// a[0] = 0
+// a[1] = 1
+// a[2] = 2
+// a[3] = 3
+```
+
+## Spécifications
+
+| Spécification                                                                                                                    | État                         | Commentaires         |
+| -------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName('ES2015', '#sec-%typedarray%.prototype.foreach', '%TypedArray%.prototype.forEach')}} | {{Spec2('ES2015')}}     | Définition initiale. |
+| {{SpecName('ESDraft', '#sec-%typedarray%.prototype.foreach', '%TypedArray%.prototype.forEach')}} | {{Spec2('ESDraft')}} |                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.TypedArray.forEach")}}
+
+## Voir aussi
+
+- {{jsxref("TypedArray.prototype.map()")}}
+- {{jsxref("TypedArray.prototype.every()")}}
+- {{jsxref("TypedArray.prototype.some()")}}
+- {{jsxref("Array.prototype.forEach()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/typedarray/from/index.html b/files/fr/web/javascript/reference/global_objects/typedarray/from/index.html
deleted file mode 100644
index 3e4f7a9953..0000000000
--- a/files/fr/web/javascript/reference/global_objects/typedarray/from/index.html
+++ /dev/null
@@ -1,129 +0,0 @@
----
-title: TypedArray.from()
-slug: Web/JavaScript/Reference/Global_Objects/TypedArray/from
-tags:
-  - ECMAScript 2015
-  - JavaScript
-  - Méthode
-  - Reference
-  - TypedArray
-  - TypedArrays
-  - polyfill
-translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/from
-original_slug: Web/JavaScript/Reference/Objets_globaux/TypedArray/from
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <code><strong>TypedArray.from()</strong></code> crée un nouvel objet {{jsxref("TypedArray", "TypedArray", "#Les_objets_TypedArray")}} à partir d'un objet itérable ou d'un objet semblable à un tableau. Cette méthode est similaire à {{jsxref("Array.from()")}}.</p>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>TypedArray</var>.from(<var>source</var>[, <var>mapFn</var>[,<var> thisArg</var>]])
-
-où <var>TypedArray</var> est l'un de :
-
-Int8Array
-Uint8Array
-Uint8ClampedArray
-Int16Array
-Uint16Array
-Int32Array
-Uint32Array
-Float32Array
-Float64Array
-BigInt64Array
-BigUint64Array
-</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>source</code></dt>
- <dd>Un objet semblable à un tableau ou un objet itérable, et à partir duquel on souhaite créer un tableau typé.</dd>
- <dt><code>fonctionMap</code></dt>
- <dd>Argument optionnel, une fonction à appliquer à chacun des éléments du tableau.</dd>
- <dt><code>thisArg</code></dt>
- <dd>Argument optionnel. La valeur à utiliser pour <code>this</code> lors de l'exécution de la fonction <code>fonctionMap</code>.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Une nouvelle instance de {{jsxref("TypedArray")}}.</p>
-
-<h2 id="Description">Description</h2>
-
-<p><code><var>TypedArray</var>.from()</code> permet de créer des tableaux typés à partir :</p>
-
-<ul>
- <li>d'<a href="/fr/docs/Web/JavaScript/Guide/Objets_élémentaires_JavaScript#Manipuler_des_objets_semblables_aux_tableaux">objets semblables à des tableaux</a> (qui disposent d'une propriété <code>length</code> et d'éléments indexés) ou</li>
- <li>d'<a href="/fr/docs/Web/JavaScript/Guide/iterable">objets itérables</a> (par exemple des objets {{jsxref("Map")}} ou {{jsxref("Set")}}).</li>
-</ul>
-
-<p><code>Array.from</code> possède un paramètre optionnel <code>fonctionMap</code>, qui permet d'exécuter une fonction {{jsxref("Array.prototype.map", "map")}} sur chacun des éléments du tableau typé (ou de l'instance de la classe fille) qui est créé. Autrement dit <code><var>TypedArray</var>.from(obj, fonctionMap, thisArg)</code> correspond exactement à <code><var>TypedArray</var>.from(obj).map(fonctionMap, thisArg)</code>.</p>
-
-<p>Il existe de légères différences entre {{jsxref("Array.from()")}} et <code><var>TypedArray</var>.from()</code> :</p>
-
-<ul>
- <li>Si la valeur de <code>this</code> passée à <code><var>TypedArray</var>.from</code> n'est pas un constructeur, <code><var>TypedArray</var>.from</code> lèvera une exception {{jsxref("TypeError")}}, tandis que <code>Array.from</code> créera un nouvel objet {{jsxref("Array")}}.</li>
- <li><code><var>TypedArray</var>.from</code> utilise <code>[[Set]]</code> tandis que <code>Array.from</code> utilise <code>[[DefineProperty]]</code>. Ainsi par exemple lorsque des objets {{jsxref("Proxy")}} sont manipulés la première méthode appellera {{jsxref("Objets_globaux/Proxy/handler/set", "handler.set")}} pour créer les nouveaux éléments et la seconde appellera {{jsxref("Objets_globaux/Proxy/handler/defineProperty", "handler.defineProperty")}}.</li>
- <li>Lorsque <code>source</code> est un itérable, <code><var>TypedArray</var>.from</code> va dans un premier temps récupérer toutes ses valeurs, puis initialiser une instance de <code>this</code> à l'aide de leur nombre, et enfin ajouter ces valeurs à l'instance. <code>Array.from</code> ajoute les valeurs au nouvel objet lors du parcours de l'itérateur et ne définit la taille de l'objet qu'en dernière étape.</li>
- <li>Si <code>Array.from</code> reçoit un objet semblable à un tableau qui n'est pas un itérable, les valeurs non définies sont conservées. <code><var>TypedArray</var>.from</code> construit un objet dense en éliminant ces valeurs.</li>
-</ul>
-
-<h2 id="Exemples">Exemples</h2>
-
-<pre class="brush: js">// Set (objet itérable)
-var s = new Set([1, 2, 3]);
-Uint8Array.from(s);
-// Uint8Array [ 1, 2, 3 ]
-
-
-// String
-Int16Array.from("123");
-// Int16Array [ 1, 2, 3 ]
-
-
-// En utilisant un fonction fléchée en tant que
-// fonctionMap pour manipuler les éléments
-Float32Array.from([1, 2, 3], x =&gt; x + x);
-// Float32Array [ 2, 4, 6 ]
-
-
-// Pour construire une séquence de nombres
-Uint8Array.from({length: 5}, (v, k) =&gt; k);
-// Uint8Array [ 0, 1, 2, 3, 4 ]
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-%typedarray%.from', '%TypedArray%.from')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-%typedarray%.from', '%TypedArray%.from')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.TypedArray.from")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("TypedArray.of()")}}</li>
- <li>{{jsxref("Array.from()")}}</li>
- <li>{{jsxref("Array.prototype.map()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/typedarray/from/index.md b/files/fr/web/javascript/reference/global_objects/typedarray/from/index.md
new file mode 100644
index 0000000000..3322aaca1b
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/typedarray/from/index.md
@@ -0,0 +1,106 @@
+---
+title: TypedArray.from()
+slug: Web/JavaScript/Reference/Global_Objects/TypedArray/from
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Méthode
+  - Reference
+  - TypedArray
+  - TypedArrays
+  - polyfill
+translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/from
+original_slug: Web/JavaScript/Reference/Objets_globaux/TypedArray/from
+---
+{{JSRef}}
+
+La méthode **`TypedArray.from()`** crée un nouvel objet {{jsxref("TypedArray", "TypedArray", "#Les_objets_TypedArray")}} à partir d'un objet itérable ou d'un objet semblable à un tableau. Cette méthode est similaire à {{jsxref("Array.from()")}}.
+
+## Syntaxe
+
+    TypedArray.from(source[, mapFn[, thisArg]])
+
+    où TypedArray est l'un de :
+
+    Int8Array
+    Uint8Array
+    Uint8ClampedArray
+    Int16Array
+    Uint16Array
+    Int32Array
+    Uint32Array
+    Float32Array
+    Float64Array
+    BigInt64Array
+    BigUint64Array
+
+### Paramètres
+
+- `source`
+  - : Un objet semblable à un tableau ou un objet itérable, et à partir duquel on souhaite créer un tableau typé.
+- `fonctionMap`
+  - : Argument optionnel, une fonction à appliquer à chacun des éléments du tableau.
+- `thisArg`
+  - : Argument optionnel. La valeur à utiliser pour `this` lors de l'exécution de la fonction `fonctionMap`.
+
+### Valeur de retour
+
+Une nouvelle instance de {{jsxref("TypedArray")}}.
+
+## Description
+
+`TypedArray.from()` permet de créer des tableaux typés à partir :
+
+- d'[objets semblables à des tableaux](/fr/docs/Web/JavaScript/Guide/Objets_élémentaires_JavaScript#Manipuler_des_objets_semblables_aux_tableaux) (qui disposent d'une propriété `length` et d'éléments indexés) ou
+- d'[objets itérables](/fr/docs/Web/JavaScript/Guide/iterable) (par exemple des objets {{jsxref("Map")}} ou {{jsxref("Set")}}).
+
+`Array.from` possède un paramètre optionnel `fonctionMap`, qui permet d'exécuter une fonction {{jsxref("Array.prototype.map", "map")}} sur chacun des éléments du tableau typé (ou de l'instance de la classe fille) qui est créé. Autrement dit `TypedArray.from(obj, fonctionMap, thisArg)` correspond exactement à `TypedArray.from(obj).map(fonctionMap, thisArg)`.
+
+Il existe de légères différences entre {{jsxref("Array.from()")}} et `TypedArray.from()` :
+
+- Si la valeur de `this` passée à `TypedArray.from` n'est pas un constructeur, `TypedArray.from` lèvera une exception {{jsxref("TypeError")}}, tandis que `Array.from` créera un nouvel objet {{jsxref("Array")}}.
+- `TypedArray.from` utilise `[[Set]]` tandis que `Array.from` utilise `[[DefineProperty]]`. Ainsi par exemple lorsque des objets {{jsxref("Proxy")}} sont manipulés la première méthode appellera {{jsxref("Objets_globaux/Proxy/handler/set", "handler.set")}} pour créer les nouveaux éléments et la seconde appellera {{jsxref("Objets_globaux/Proxy/handler/defineProperty", "handler.defineProperty")}}.
+- Lorsque `source` est un itérable, `TypedArray.from` va dans un premier temps récupérer toutes ses valeurs, puis initialiser une instance de `this` à l'aide de leur nombre, et enfin ajouter ces valeurs à l'instance. `Array.from` ajoute les valeurs au nouvel objet lors du parcours de l'itérateur et ne définit la taille de l'objet qu'en dernière étape.
+- Si `Array.from` reçoit un objet semblable à un tableau qui n'est pas un itérable, les valeurs non définies sont conservées. `TypedArray.from` construit un objet dense en éliminant ces valeurs.
+
+## Exemples
+
+```js
+// Set (objet itérable)
+var s = new Set([1, 2, 3]);
+Uint8Array.from(s);
+// Uint8Array [ 1, 2, 3 ]
+
+
+// String
+Int16Array.from("123");
+// Int16Array [ 1, 2, 3 ]
+
+
+// En utilisant un fonction fléchée en tant que
+// fonctionMap pour manipuler les éléments
+Float32Array.from([1, 2, 3], x => x + x);
+// Float32Array [ 2, 4, 6 ]
+
+
+// Pour construire une séquence de nombres
+Uint8Array.from({length: 5}, (v, k) => k);
+// Uint8Array [ 0, 1, 2, 3, 4 ]
+```
+
+## Spécifications
+
+| Spécification                                                                                | État                         | Commentaires         |
+| -------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName('ES2015', '#sec-%typedarray%.from', '%TypedArray%.from')}} | {{Spec2('ES2015')}}     | Définition initiale. |
+| {{SpecName('ESDraft', '#sec-%typedarray%.from', '%TypedArray%.from')}} | {{Spec2('ESDraft')}} |                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.TypedArray.from")}}
+
+## Voir aussi
+
+- {{jsxref("TypedArray.of()")}}
+- {{jsxref("Array.from()")}}
+- {{jsxref("Array.prototype.map()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/typedarray/includes/index.html b/files/fr/web/javascript/reference/global_objects/typedarray/includes/index.html
deleted file mode 100644
index 3d145adb92..0000000000
--- a/files/fr/web/javascript/reference/global_objects/typedarray/includes/index.html
+++ /dev/null
@@ -1,83 +0,0 @@
----
-title: TypedArray.prototype.includes()
-slug: Web/JavaScript/Reference/Global_Objects/TypedArray/includes
-tags:
-  - ECMAScript 2016
-  - JavaScript
-  - Méthode
-  - Prototype
-  - Reference
-  - TypedArray
-  - TypedArrays
-translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/includes
-original_slug: Web/JavaScript/Reference/Objets_globaux/TypedArray/includes
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <code><strong>includes()</strong></code> détermine si un tableau typé possède un certain élément et renvoie <code>true</code> ou <code>false</code> selon le cas de figure. Cette méthode utilise le même algorithme que la méthode {{jsxref("Array.prototype.includes()")}}. Dans le reste de l'article <em>TypedArray</em> fait référence à un des <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/TypedArray#Les_objets_TypedArray">types de tableau typé</a>.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/typedarray-includes.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>typedarray</var>.includes(élémentRecherché[, <var>indiceDébut</var>]);</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>élémentRecherché</code></dt>
- <dd>L'élément qu'on cherche au sein du tableau typé.</dd>
- <dt><code>indiceDébut</code></dt>
- <dd>Paramètre optionnel qui correspond à la position du tableau à partir de laquelle effectuer la recherche. La valeur par défaut est 0.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Un booléen indiquant la présence de l'élément (<code>true</code> s'il y est, <code>false</code> sinon).</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<pre class="brush: js">var uint8 = new Uint8Array([1,2,3]);
-uint8.includes(2);     // true
-uint8.includes(4);     // false
-uint8.includes(3, 3);  // false
-
-// Gestion de NaN (vrai uniquement pour Float32 et Float64)
-new Uint8Array([NaN]).includes(NaN); // false car NaN est converti en 0 par le constructeur
-new Float32Array([NaN]).includes(NaN); // true;
-new Float64Array([NaN]).includes(NaN); // true;
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES7', '#sec-%typedarray%.prototype.includes', 'TypedArray.prototype.includes')}}</td>
-   <td>{{Spec2('ES7')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-%typedarray%.prototype.includes', 'TypedArray.prototype.includes')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.TypedArray.includes")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Array.prototype.includes()")}}</li>
- <li>{{jsxref("String.prototype.includes()")}}</li>
- <li>{{jsxref("TypedArray.prototype.indexOf()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/typedarray/includes/index.md b/files/fr/web/javascript/reference/global_objects/typedarray/includes/index.md
new file mode 100644
index 0000000000..492c0b9676
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/typedarray/includes/index.md
@@ -0,0 +1,65 @@
+---
+title: TypedArray.prototype.includes()
+slug: Web/JavaScript/Reference/Global_Objects/TypedArray/includes
+tags:
+  - ECMAScript 2016
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - TypedArray
+  - TypedArrays
+translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/includes
+original_slug: Web/JavaScript/Reference/Objets_globaux/TypedArray/includes
+---
+{{JSRef}}
+
+La méthode **`includes()`** détermine si un tableau typé possède un certain élément et renvoie `true` ou `false` selon le cas de figure. Cette méthode utilise le même algorithme que la méthode {{jsxref("Array.prototype.includes()")}}. Dans le reste de l'article _TypedArray_ fait référence à un des [types de tableau typé](/fr/docs/Web/JavaScript/Reference/Objets_globaux/TypedArray#Les_objets_TypedArray).
+
+{{EmbedInteractiveExample("pages/js/typedarray-includes.html")}}
+
+## Syntaxe
+
+    typedarray.includes(élémentRecherché[, indiceDébut]);
+
+### Paramètres
+
+- `élémentRecherché`
+  - : L'élément qu'on cherche au sein du tableau typé.
+- `indiceDébut`
+  - : Paramètre optionnel qui correspond à la position du tableau à partir de laquelle effectuer la recherche. La valeur par défaut est 0.
+
+### Valeur de retour
+
+Un booléen indiquant la présence de l'élément (`true` s'il y est, `false` sinon).
+
+## Exemples
+
+```js
+var uint8 = new Uint8Array([1,2,3]);
+uint8.includes(2);     // true
+uint8.includes(4);     // false
+uint8.includes(3, 3);  // false
+
+// Gestion de NaN (vrai uniquement pour Float32 et Float64)
+new Uint8Array([NaN]).includes(NaN); // false car NaN est converti en 0 par le constructeur
+new Float32Array([NaN]).includes(NaN); // true;
+new Float64Array([NaN]).includes(NaN); // true;
+```
+
+## Spécifications
+
+| Spécification                                                                                                                    | État                         | Commentaires         |
+| -------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName('ES7', '#sec-%typedarray%.prototype.includes', 'TypedArray.prototype.includes')}}     | {{Spec2('ES7')}}         | Définition initiale. |
+| {{SpecName('ESDraft', '#sec-%typedarray%.prototype.includes', 'TypedArray.prototype.includes')}} | {{Spec2('ESDraft')}} |                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.TypedArray.includes")}}
+
+## Voir aussi
+
+- {{jsxref("Array.prototype.includes()")}}
+- {{jsxref("String.prototype.includes()")}}
+- {{jsxref("TypedArray.prototype.indexOf()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/typedarray/index.html b/files/fr/web/javascript/reference/global_objects/typedarray/index.html
deleted file mode 100644
index c0ce667605..0000000000
--- a/files/fr/web/javascript/reference/global_objects/typedarray/index.html
+++ /dev/null
@@ -1,283 +0,0 @@
----
-title: TypedArray
-slug: Web/JavaScript/Reference/Global_Objects/TypedArray
-tags:
-  - JavaScript
-  - Reference
-  - TypedArray
-translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray
-original_slug: Web/JavaScript/Reference/Objets_globaux/TypedArray
----
-<div>{{JSRef}}</div>
-
-<p>Un objet <strong><em>TypedArray</em></strong> décrit une vue organisée à la façon d'un tableau pour manipuler <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/ArrayBuffer">un tampon (<em>buffer</em>) de données binaires</a>. <code>TypedArray</code> n'est pas une propriété globale, il n'existe pas non plus de constructeur <code>TypedArray</code>.  En revanche, plusieurs propriétés globales existent et leurs valeurs permettent de construire des tableaux typés (<em>typed arrays</em>) avec différents types de données. Ceux-ci sont listés ci-après. Les pages suivantes permettent de décrire les propriétés et méthodes qui peuvent être utilisées sur les différents tableaux typés.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/typedarray-constructor.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">new<em> TypedArray</em>(<var>longueur</var>);
-new <em>TypedArray</em>(<var>tableauTypé</var>);
-new <em>TypedArray</em>(<var>objet</var>);
-new <em>TypedArray</em>(<var>tampon</var> [, <var>décalageEnOctet</var> [, <var>longueur</var>]]);
-
-// où <em>TypedArray()</em> est l'un de :
-
-Int8Array();
-Uint8Array();
-Uint8ClampedArray();
-Int16Array();
-Uint16Array();
-Int32Array();
-Uint32Array();
-Float32Array();
-Float64Array();
-BigInt64Array();
-BigUint64Array();
-</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>longueur</code></dt>
- <dd>Lorsque le constructeur est appelé avec un argument <code>longueur</code>, un tableau typé sera créé, contenant autant de zéros que <code>longueur</code> (par exemple avec une longueur de 3, on aura un tableau dont les trois éléments seront des zéros).</dd>
- <dt><code>tableauTypé</code></dt>
- <dd>Lorsque le constructeur est appelé avec un argument <code>tableauTypé</code>, qui peut être un tableau typé de n'importe quel type (par exemple <code>Int32Array</code>), le <code>tableauTypé</code> est copié dans un nouveau tableau typé. Chaque valeur du <code>tableauTypé</code> est convertie dans le type correspondant du nouveau tableau. Enfin, la longueur du tableau typé est fixée avec la longueur de <code>tableauTypé</code>.</dd>
- <dt><code>objet</code></dt>
- <dd>Lorsque le constructeur est invoqué avec un argument <code>objet</code>, un nouveau tableau typé est créé avec la méthode <code><em>TypedArray</em>.from()</code>.</dd>
- <dt><code>tampon</code>,<code> décalageOctet</code>, <code> longueur</code></dt>
- <dd>Lorsque le constructeur est appelé avec un <code>tampon</code> (<em>buffer</em>) ainsi qu'avec les paramètres optionnels <code>décalageOctet</code> et <code>longueur</code>, un nouveau tableau typé est créé comme une vue pour l'objet {{jsxref("ArrayBuffer")}}. Les paramètres <code>décalageOctet</code> et <code>longueur</code> permettent de définir l'intervalle de mémoire du buffer qui est présenté dans la vue qu'est le tableau typé. Si les deux derniers paramètres sont absents, l'ensemble du <code>tampon</code> sera considéré. Si <code>longueur </code>est absent, on considèrera l'ensemble de <code>tampon</code> à partir de l'octet <em>décalageOctet</em>.</dd>
-</dl>
-
-<h2 id="Description">Description</h2>
-
-<p>ECMAScript 2015 (ES6) définit un constructeur <code>%TypedArray%</code> qui est un <code>[[Prototype]]</code> de tous les constructeurs <em>TypedArray</em>. Ce constructeur n'est pas accessible directement. Il n'existe pas de  <code>%TypedArray%</code> global ou de propriété <code>TypedArray</code>.  Il est uniquement accessible via <code>Object.getPrototypeOf(Int8Array.prototype)</code> ou avec les méthodes semblables. L'ensemble des différents constructeurs <em>TypedArray</em>s hérite de propriétés communes de la fonction <code>%TypedArray%</code>. De plus, tous les prototypes des tableaux typés (<em>TypedArray</em><code>.prototype</code>) ont <code>%TypedArray%.prototype</code> pour <code>[[Prototype]]</code>.</p>
-
-<p>Le constructeur <code>%TypedArray%</code> en tant que tel n'est pas très utile. Toute tentative d'appel ou d'utilisation avec une expression <code>new</code> renverra <code>TypeError</code>, sauf quand il est utilisé par le moteur JavaScript lors de la création de l'objet quand le moteur supporte les sous-classes. À l'heure actuelle, il n'existe pas de tels moteurs, pour cette raison <code>%TypedArray%</code> est uniquement utile dans les fonctions d'émulation (<em>polyfill</em>) our pour les propriétés des différents constructeurs <em>TypedArray</em>.</p>
-
-<p>Lorsqu'on crée une instance de <em>TypedArray</em> (ex. une instance de <code>Int8Array</code> ou autre), un tampon de mémoire tableau est créé en interne par le moteur (si un objet <code>ArrayBuffer</code> est passé en argument, c'est celui-ci qui est utilisé). C'est l'adresse de cette mémoire tampon qui est sauvegardée comme une propriété interne à l'objet. Toutes les méthodes de <code>%TypedArray%.prototype</code> utiliseront ensuite cet espace pour les opérations.</p>
-
-<h3 id="Accès_aux_propriétés">Accès aux propriétés</h3>
-
-<p>Il est possible d'accéder aux éléments du tableau en utilisant la notation usuelle avec les crochets. Cependant, définir ou accéder à des propriétés indexées ne se fera pas avec la chaîne de prototypes, même si l'indice utilisé est en dehors des limites du tableau. Les propriétés indexées seront uniquement basées sur le contenu du {{jsxref("ArrayBuffer")}} et ne consulteront pas les propriétés des objets. En revanche, il est toujours possible d'utiliser des propriétés nommées, comme avec les autres objets.</p>
-
-<pre class="brush: js">// Définir et accéder du contenu avec la syntaxe usuelle
-var int16 = new Int16Array(2);
-int16[0] = 42;
-console.log(int16[0]); // 42
-
-// Les propriétés indexées sur les prototypes ne sont pas consultées (Fx 25)
-Int8Array.prototype[20] = "toto";
-(new Int8Array(32))[20]; // 0
-// y compris en dehors des limites
-Int8Array.prototype[20] = "toto";
-(new Int8Array(8))[20]; // undefined
-// ou avec des index négatifs
-Int8Array.prototype[-1] = "toto";
-(new Int8Array(8))[-1]; // undefined
-
-// Mais il est possible d'utiliser des propriétés nommées (Fx 30)
-Int8Array.prototype.toto = "truc";
-(new Int8Array(32)).toto; // "truc" </pre>
-
-<h2 id="Les_objets_TypedArray">Les objets <code>TypedArray</code></h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <td class="header">Type</td>
-   <td class="header">Intervalle</td>
-   <td class="header">Taille (exprimée en octets)</td>
-   <td class="header">Description</td>
-   <td class="header">Type Web IDL</td>
-   <td class="header">Type équivalent en C</td>
-  </tr>
-  <tr>
-   <td>{{jsxref("Int8Array")}}</td>
-   <td>-128 à 127</td>
-   <td>1</td>
-   <td>Entier signé en complément à deux sur 8 bits.</td>
-   <td><code>byte</code></td>
-   <td><code>int8_t</code></td>
-  </tr>
-  <tr>
-   <td>{{jsxref("Uint8Array")}}</td>
-   <td>0 à 255</td>
-   <td>1</td>
-   <td>Entier non signé sur 8 bits.</td>
-   <td><code>octet</code></td>
-   <td><code>uint8_t</code></td>
-  </tr>
-  <tr>
-   <td>{{jsxref("Uint8ClampedArray")}}</td>
-   <td>0 à 255</td>
-   <td>1</td>
-   <td>Entier non signé sur 8 bits (compris entre 0 et 255).</td>
-   <td><code>octet</code></td>
-   <td><code>uint8_t</code></td>
-  </tr>
-  <tr>
-   <td>{{jsxref("Int16Array")}}</td>
-   <td>-32768 à 32767</td>
-   <td>2</td>
-   <td>Entier signé en complément à deux sur 16 bits.</td>
-   <td><code>short</code></td>
-   <td><code>int16_t</code></td>
-  </tr>
-  <tr>
-   <td>{{jsxref("Uint16Array")}}</td>
-   <td>0 à 65535</td>
-   <td>2</td>
-   <td>Entier non signé sur 16 bits.</td>
-   <td><code>unsigned short</code></td>
-   <td><code>uint16_t</code></td>
-  </tr>
-  <tr>
-   <td>{{jsxref("Int32Array")}}</td>
-   <td>-2147483648 à 2147483647</td>
-   <td>4</td>
-   <td>Entier signé en complément à deux sur 32 bits.</td>
-   <td><code>long</code></td>
-   <td><code>int32_t</code></td>
-  </tr>
-  <tr>
-   <td>{{jsxref("Uint32Array")}}</td>
-   <td>0 à 4294967295</td>
-   <td>4</td>
-   <td>Entier non signé sur 32 bits.</td>
-   <td><code>unsigned long</code></td>
-   <td><code>uint32_t</code></td>
-  </tr>
-  <tr>
-   <td>{{jsxref("Float32Array")}}</td>
-   <td>1.2x10^-38 à 3.4x10^38</td>
-   <td>4</td>
-   <td>Nombre flottant sur 32 bits selon la représentation IEEE (7 chiffres significatifs).</td>
-   <td><code>unrestricted float</code></td>
-   <td><code>float</code></td>
-  </tr>
-  <tr>
-   <td>{{jsxref("Float64Array")}}</td>
-   <td>5.0x10^-324 à 1.8x10^308</td>
-   <td>8</td>
-   <td>Nombre flottant sur 64 bits selon la représentation IEEE (16 chiffres significatifs).</td>
-   <td><code>unrestricted double</code></td>
-   <td><code>double</code></td>
-  </tr>
-  <tr>
-   <td>{{jsxref("BigInt64Array")}}</td>
-   <td>-2^63 à 2^63-1</td>
-   <td>8</td>
-   <td>Nombre entier signé sur 64 bits en complément à deux.</td>
-   <td><code>bigint</code></td>
-   <td><code>int64_t (signed long long)</code></td>
-  </tr>
-  <tr>
-   <td>{{jsxref("BigUint64Array")}}</td>
-   <td>0 à 2^64-1</td>
-   <td>8</td>
-   <td>Nombre entier non signé sur 64 bits.</td>
-   <td><code>bigint</code></td>
-   <td><code>uint64_t (unsigned long long)</code></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Propriétés">Propriétés</h2>
-
-<dl>
- <dt>{{jsxref("TypedArray.BYTES_PER_ELEMENT")}}</dt>
- <dd>Cette propriété renvoie un nombre correspondant à la taille d'un élément du tableau selon le type de tableau utilisé.</dd>
- <dt><em>TypedArray</em>.length</dt>
- <dd>La propriété de longueur, elle vaut 3.</dd>
- <dt>{{jsxref("TypedArray.name")}}</dt>
- <dd>Cette propriété renvoie la chaîne de caractères correspondant au nom du constructeur (par exemple "Int8Array").</dd>
- <dt>{{jsxref("TypedArray.@@species", "get TypedArray[@@species]")}}</dt>
- <dd>La fonction de construction utilisée pour créer des objets dérivés.</dd>
- <dt>{{jsxref("TypedArray.prototype")}}</dt>
- <dd>Le prototype des objets <em>TypedArray</em>.</dd>
-</dl>
-
-<h2 id="Méthodes">Méthodes</h2>
-
-<dl>
- <dt>{{jsxref("TypedArray.from()")}}</dt>
- <dd>Cette méthode permet de créer un nouveau tableau typé à partir d'un itérable ou d'un objet semblable à un tableau. Voir aussi {{jsxref("Array.from()")}}.</dd>
- <dt>{{jsxref("TypedArray.of()")}}</dt>
- <dd>Cette méthode permet de créer un nouveau tableau typé à partir d'un nombre variable d'arguments. Voir aussi {{jsxref("Array.of()")}}.</dd>
-</dl>
-
-<h2 id="Prototype_TypedArray">Prototype <code>TypedArray</code></h2>
-
-<p>Toutes les instances de <em>TypedArray</em>s héritent de {{jsxref("TypedArray.prototype")}}.</p>
-
-<h3 id="Propriétés_2">Propriétés</h3>
-
-<p>{{page('fr/docs/Web/JavaScript/Reference/Objets_globaux/TypedArray/prototype','Propriétés')}}</p>
-
-<h3 id="Méthodes_2">Méthodes</h3>
-
-<p>{{page('fr/docs/Web/JavaScript/Reference/Objets_globaux/TypedArray/prototype','Méthodes')}}</p>
-
-<h2 id="Prothèse_d'émulation_(polyfill)">Prothèse d'émulation (<em>polyfill</em>)</h2>
-
-<p>La plupart des méthodes des tableaux typés peuvent être en partie émulées grâce aux méthodes rattachées à {{jsxref("Array")}} :</p>
-
-<pre class="brush: js">var typedArrayTypes = [Int8Array, Uint8Array, Uint8ClampedArray, Int16Array, Uint16Array, ​​​Int32Array, Uint32Array, ​​​Float32Array, Float64Array];
-for (var k in typedArrayTypes){
-  for (var v in Array.prototype){
-    if (Array.prototype.hasOwnProperty(v) &amp;&amp;
-  ​​​​​         !typedArrayTypes[k].prototype.hasOwnProperty(v)){
-      typedArrayTypes[k].prototype[v] = Array.prototype[v];
-    }
-  }
-}</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Typed Array')}}</td>
-   <td>{{Spec2('Typed Array')}}</td>
-   <td>Défini comme <code>TypedArray</code> et interface <code>ArrayBufferView</code> avec les différents types de vues des tableaux typés. Cette spécification a été englobée dans ECMAScript 2015.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-typedarray-objects', 'TypedArray Objects')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td>Définition initiale au sein d'un standard ECMA. <code>new</code> est obligatoire.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-typedarray-objects', 'TypedArray Objects')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td>ECMAScript 2017 a modifié les constructeurs <code><em>TypedArray</em></code> afin qu'ils utilisent l'opération <code>ToIndex</code> et puissent être utilisés sans argument.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.TypedArray")}}</p>
-
-<h2 id="Notes_de_compatibilité">Notes de compatibilité</h2>
-
-<p>À partir d'ECMAScript 2015 (ES6), les constructeurs <code>TypedArray</code> doivent être utilisés avec {{jsxref("Opérateurs/L_opérateur_new", "new")}}. Appeler un constructeur <code>TypedArray</code> comme une fonction, sans <code>new</code>, provoquera une exception {{jsxref("TypeError")}}.</p>
-
-<pre class="brush: js example-bad">var dv = Float64Array([1, 2, 3]);
-// TypeError: calling a builtin Float64Array constructor
-// without new is forbidden</pre>
-
-<pre class="brush: js example-good">var dv = new Float64Array([1, 2, 3]);</pre>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/JavaScript/Tableaux_typés">Les tableaux typés en JavaScript</a></li>
- <li>{{jsxref("ArrayBuffer")}}</li>
- <li>{{jsxref("DataView")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/typedarray/index.md b/files/fr/web/javascript/reference/global_objects/typedarray/index.md
new file mode 100644
index 0000000000..c932ac7cfb
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/typedarray/index.md
@@ -0,0 +1,269 @@
+---
+title: TypedArray
+slug: Web/JavaScript/Reference/Global_Objects/TypedArray
+tags:
+  - JavaScript
+  - Reference
+  - TypedArray
+translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray
+original_slug: Web/JavaScript/Reference/Objets_globaux/TypedArray
+---
+{{JSRef}}
+
+Un objet **_TypedArray_** décrit une vue organisée à la façon d'un tableau pour manipuler [un tampon (_buffer_) de données binaires](/fr/docs/Web/JavaScript/Reference/Objets_globaux/ArrayBuffer). `TypedArray` n'est pas une propriété globale, il n'existe pas non plus de constructeur `TypedArray`.  En revanche, plusieurs propriétés globales existent et leurs valeurs permettent de construire des tableaux typés (_typed arrays_) avec différents types de données. Ceux-ci sont listés ci-après. Les pages suivantes permettent de décrire les propriétés et méthodes qui peuvent être utilisées sur les différents tableaux typés.
+
+{{EmbedInteractiveExample("pages/js/typedarray-constructor.html")}}
+
+## Syntaxe
+
+    new TypedArray(longueur);
+    new TypedArray(tableauTypé);
+    new TypedArray(objet);
+    new TypedArray(tampon [, décalageEnOctet [, longueur]]);
+
+    // où TypedArray() est l'un de :
+
+    Int8Array();
+    Uint8Array();
+    Uint8ClampedArray();
+    Int16Array();
+    Uint16Array();
+    Int32Array();
+    Uint32Array();
+    Float32Array();
+    Float64Array();
+    BigInt64Array();
+    BigUint64Array();
+
+### Paramètres
+
+- `longueur`
+  - : Lorsque le constructeur est appelé avec un argument `longueur`, un tableau typé sera créé, contenant autant de zéros que `longueur` (par exemple avec une longueur de 3, on aura un tableau dont les trois éléments seront des zéros).
+- `tableauTypé`
+  - : Lorsque le constructeur est appelé avec un argument `tableauTypé`, qui peut être un tableau typé de n'importe quel type (par exemple `Int32Array`), le `tableauTypé` est copié dans un nouveau tableau typé. Chaque valeur du `tableauTypé` est convertie dans le type correspondant du nouveau tableau. Enfin, la longueur du tableau typé est fixée avec la longueur de `tableauTypé`.
+- `objet`
+  - : Lorsque le constructeur est invoqué avec un argument `objet`, un nouveau tableau typé est créé avec la méthode `TypedArray.from()`.
+- `tampon`,` décalageOctet`, `longueur`
+  - : Lorsque le constructeur est appelé avec un `tampon` (_buffer_) ainsi qu'avec les paramètres optionnels `décalageOctet` et `longueur`, un nouveau tableau typé est créé comme une vue pour l'objet {{jsxref("ArrayBuffer")}}. Les paramètres `décalageOctet` et `longueur` permettent de définir l'intervalle de mémoire du buffer qui est présenté dans la vue qu'est le tableau typé. Si les deux derniers paramètres sont absents, l'ensemble du `tampon` sera considéré. Si `longueur `est absent, on considèrera l'ensemble de `tampon` à partir de l'octet _décalageOctet_.
+
+## Description
+
+ECMAScript 2015 (ES6) définit un constructeur `%TypedArray%` qui est un `[[Prototype]]` de tous les constructeurs _TypedArray_. Ce constructeur n'est pas accessible directement. Il n'existe pas de  `%TypedArray%` global ou de propriété `TypedArray`.  Il est uniquement accessible via `Object.getPrototypeOf(Int8Array.prototype)` ou avec les méthodes semblables. L'ensemble des différents constructeurs *TypedArray*s hérite de propriétés communes de la fonction `%TypedArray%`. De plus, tous les prototypes des tableaux typés (_TypedArray_`.prototype`) ont `%TypedArray%.prototype` pour `[[Prototype]]`.
+
+Le constructeur `%TypedArray%` en tant que tel n'est pas très utile. Toute tentative d'appel ou d'utilisation avec une expression `new` renverra `TypeError`, sauf quand il est utilisé par le moteur JavaScript lors de la création de l'objet quand le moteur supporte les sous-classes. À l'heure actuelle, il n'existe pas de tels moteurs, pour cette raison `%TypedArray%` est uniquement utile dans les fonctions d'émulation (_polyfill_) our pour les propriétés des différents constructeurs _TypedArray_.
+
+Lorsqu'on crée une instance de _TypedArray_ (ex. une instance de `Int8Array` ou autre), un tampon de mémoire tableau est créé en interne par le moteur (si un objet `ArrayBuffer` est passé en argument, c'est celui-ci qui est utilisé). C'est l'adresse de cette mémoire tampon qui est sauvegardée comme une propriété interne à l'objet. Toutes les méthodes de `%TypedArray%.prototype` utiliseront ensuite cet espace pour les opérations.
+
+### Accès aux propriétés
+
+Il est possible d'accéder aux éléments du tableau en utilisant la notation usuelle avec les crochets. Cependant, définir ou accéder à des propriétés indexées ne se fera pas avec la chaîne de prototypes, même si l'indice utilisé est en dehors des limites du tableau. Les propriétés indexées seront uniquement basées sur le contenu du {{jsxref("ArrayBuffer")}} et ne consulteront pas les propriétés des objets. En revanche, il est toujours possible d'utiliser des propriétés nommées, comme avec les autres objets.
+
+```js
+// Définir et accéder du contenu avec la syntaxe usuelle
+var int16 = new Int16Array(2);
+int16[0] = 42;
+console.log(int16[0]); // 42
+
+// Les propriétés indexées sur les prototypes ne sont pas consultées (Fx 25)
+Int8Array.prototype[20] = "toto";
+(new Int8Array(32))[20]; // 0
+// y compris en dehors des limites
+Int8Array.prototype[20] = "toto";
+(new Int8Array(8))[20]; // undefined
+// ou avec des index négatifs
+Int8Array.prototype[-1] = "toto";
+(new Int8Array(8))[-1]; // undefined
+
+// Mais il est possible d'utiliser des propriétés nommées (Fx 30)
+Int8Array.prototype.toto = "truc";
+(new Int8Array(32)).toto; // "truc" 
+```
+
+## Les objets `TypedArray`
+
+<table class="standard-table">
+  <tbody>
+    <tr>
+      <td class="header">Type</td>
+      <td class="header">Intervalle</td>
+      <td class="header">Taille (exprimée en octets)</td>
+      <td class="header">Description</td>
+      <td class="header">Type Web IDL</td>
+      <td class="header">Type équivalent en C</td>
+    </tr>
+    <tr>
+      <td>{{jsxref("Int8Array")}}</td>
+      <td>-128 à 127</td>
+      <td>1</td>
+      <td>Entier signé en complément à deux sur 8 bits.</td>
+      <td><code>byte</code></td>
+      <td><code>int8_t</code></td>
+    </tr>
+    <tr>
+      <td>{{jsxref("Uint8Array")}}</td>
+      <td>0 à 255</td>
+      <td>1</td>
+      <td>Entier non signé sur 8 bits.</td>
+      <td><code>octet</code></td>
+      <td><code>uint8_t</code></td>
+    </tr>
+    <tr>
+      <td>{{jsxref("Uint8ClampedArray")}}</td>
+      <td>0 à 255</td>
+      <td>1</td>
+      <td>Entier non signé sur 8 bits (compris entre 0 et 255).</td>
+      <td><code>octet</code></td>
+      <td><code>uint8_t</code></td>
+    </tr>
+    <tr>
+      <td>{{jsxref("Int16Array")}}</td>
+      <td>-32768 à 32767</td>
+      <td>2</td>
+      <td>Entier signé en complément à deux sur 16 bits.</td>
+      <td><code>short</code></td>
+      <td><code>int16_t</code></td>
+    </tr>
+    <tr>
+      <td>{{jsxref("Uint16Array")}}</td>
+      <td>0 à 65535</td>
+      <td>2</td>
+      <td>Entier non signé sur 16 bits.</td>
+      <td><code>unsigned short</code></td>
+      <td><code>uint16_t</code></td>
+    </tr>
+    <tr>
+      <td>{{jsxref("Int32Array")}}</td>
+      <td>-2147483648 à 2147483647</td>
+      <td>4</td>
+      <td>Entier signé en complément à deux sur 32 bits.</td>
+      <td><code>long</code></td>
+      <td><code>int32_t</code></td>
+    </tr>
+    <tr>
+      <td>{{jsxref("Uint32Array")}}</td>
+      <td>0 à 4294967295</td>
+      <td>4</td>
+      <td>Entier non signé sur 32 bits.</td>
+      <td><code>unsigned long</code></td>
+      <td><code>uint32_t</code></td>
+    </tr>
+    <tr>
+      <td>{{jsxref("Float32Array")}}</td>
+      <td>1.2x10^-38 à 3.4x10^38</td>
+      <td>4</td>
+      <td>
+        Nombre flottant sur 32 bits selon la représentation IEEE (7 chiffres
+        significatifs).
+      </td>
+      <td><code>unrestricted float</code></td>
+      <td><code>float</code></td>
+    </tr>
+    <tr>
+      <td>{{jsxref("Float64Array")}}</td>
+      <td>5.0x10^-324 à 1.8x10^308</td>
+      <td>8</td>
+      <td>
+        Nombre flottant sur 64 bits selon la représentation IEEE (16 chiffres
+        significatifs).
+      </td>
+      <td><code>unrestricted double</code></td>
+      <td><code>double</code></td>
+    </tr>
+    <tr>
+      <td>{{jsxref("BigInt64Array")}}</td>
+      <td>-2^63 à 2^63-1</td>
+      <td>8</td>
+      <td>Nombre entier signé sur 64 bits en complément à deux.</td>
+      <td><code>bigint</code></td>
+      <td><code>int64_t (signed long long)</code></td>
+    </tr>
+    <tr>
+      <td>{{jsxref("BigUint64Array")}}</td>
+      <td>0 à 2^64-1</td>
+      <td>8</td>
+      <td>Nombre entier non signé sur 64 bits.</td>
+      <td><code>bigint</code></td>
+      <td><code>uint64_t (unsigned long long)</code></td>
+    </tr>
+  </tbody>
+</table>
+
+## Propriétés
+
+- {{jsxref("TypedArray.BYTES_PER_ELEMENT")}}
+  - : Cette propriété renvoie un nombre correspondant à la taille d'un élément du tableau selon le type de tableau utilisé.
+- _TypedArray_.length
+  - : La propriété de longueur, elle vaut 3.
+- {{jsxref("TypedArray.name")}}
+  - : Cette propriété renvoie la chaîne de caractères correspondant au nom du constructeur (par exemple "Int8Array").
+- {{jsxref("TypedArray.@@species", "get TypedArray[@@species]")}}
+  - : La fonction de construction utilisée pour créer des objets dérivés.
+- {{jsxref("TypedArray.prototype")}}
+  - : Le prototype des objets _TypedArray_.
+
+## Méthodes
+
+- {{jsxref("TypedArray.from()")}}
+  - : Cette méthode permet de créer un nouveau tableau typé à partir d'un itérable ou d'un objet semblable à un tableau. Voir aussi {{jsxref("Array.from()")}}.
+- {{jsxref("TypedArray.of()")}}
+  - : Cette méthode permet de créer un nouveau tableau typé à partir d'un nombre variable d'arguments. Voir aussi {{jsxref("Array.of()")}}.
+
+## Prototype `TypedArray`
+
+Toutes les instances de *TypedArray*s héritent de {{jsxref("TypedArray.prototype")}}.
+
+### Propriétés
+
+{{page('fr/docs/Web/JavaScript/Reference/Objets_globaux/TypedArray/prototype','Propriétés')}}
+
+### Méthodes
+
+{{page('fr/docs/Web/JavaScript/Reference/Objets_globaux/TypedArray/prototype','Méthodes')}}
+
+## Prothèse d'émulation (_polyfill_)
+
+La plupart des méthodes des tableaux typés peuvent être en partie émulées grâce aux méthodes rattachées à {{jsxref("Array")}} :
+
+```js
+var typedArrayTypes = [Int8Array, Uint8Array, Uint8ClampedArray, Int16Array, Uint16Array, ​​​Int32Array, Uint32Array, ​​​Float32Array, Float64Array];
+for (var k in typedArrayTypes){
+  for (var v in Array.prototype){
+    if (Array.prototype.hasOwnProperty(v) &&
+  ​​​​​         !typedArrayTypes[k].prototype.hasOwnProperty(v)){
+      typedArrayTypes[k].prototype[v] = Array.prototype[v];
+    }
+  }
+}
+```
+
+## Spécifications
+
+| Spécification                                                                                    | État                             | Commentaires                                                                                                                                                            |
+| ------------------------------------------------------------------------------------------------ | -------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| {{SpecName('Typed Array')}}                                                             | {{Spec2('Typed Array')}} | Défini comme `TypedArray` et interface `ArrayBufferView` avec les différents types de vues des tableaux typés. Cette spécification a été englobée dans ECMAScript 2015. |
+| {{SpecName('ES6', '#sec-typedarray-objects', 'TypedArray Objects')}}     | {{Spec2('ES6')}}             | Définition initiale au sein d'un standard ECMA. `new` est obligatoire.                                                                                                  |
+| {{SpecName('ESDraft', '#sec-typedarray-objects', 'TypedArray Objects')}} | {{Spec2('ESDraft')}}     | ECMAScript 2017 a modifié les constructeurs `TypedArray` afin qu'ils utilisent l'opération `ToIndex` et puissent être utilisés sans argument.                           |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.TypedArray")}}
+
+## Notes de compatibilité
+
+À partir d'ECMAScript 2015 (ES6), les constructeurs `TypedArray` doivent être utilisés avec {{jsxref("Opérateurs/L_opérateur_new", "new")}}. Appeler un constructeur `TypedArray` comme une fonction, sans `new`, provoquera une exception {{jsxref("TypeError")}}.
+
+```js example-bad
+var dv = Float64Array([1, 2, 3]);
+// TypeError: calling a builtin Float64Array constructor
+// without new is forbidden
+```
+
+```js example-good
+var dv = new Float64Array([1, 2, 3]);
+```
+
+## Voir aussi
+
+- [Les tableaux typés en JavaScript](/fr/docs/Web/JavaScript/Tableaux_typés)
+- {{jsxref("ArrayBuffer")}}
+- {{jsxref("DataView")}}
diff --git a/files/fr/web/javascript/reference/global_objects/typedarray/indexof/index.html b/files/fr/web/javascript/reference/global_objects/typedarray/indexof/index.html
deleted file mode 100644
index 028758d5e7..0000000000
--- a/files/fr/web/javascript/reference/global_objects/typedarray/indexof/index.html
+++ /dev/null
@@ -1,89 +0,0 @@
----
-title: TypedArray.prototype.indexOf()
-slug: Web/JavaScript/Reference/Global_Objects/TypedArray/indexOf
-tags:
-  - ECMAScript 2015
-  - JavaScript
-  - Méthode
-  - Prototype
-  - Reference
-  - TypedArray
-  - TypedArrays
-translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/indexOf
-original_slug: Web/JavaScript/Reference/Objets_globaux/TypedArray/indexOf
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <code><strong>indexOf()</strong></code> renvoie le premier indice (le plus petit) auquel on peut trouver un élément donné dans le tableau typé. Si l'élément n'est pas trouvé, la valeur de retour sera -1. L'algorithme utilisé pour cette méthode est le même que celui pour {{jsxref("Array.prototype.indexOf()")}}. Pour le reste de l'article <em>TypedArray</em> correspond à l'un des <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/TypedArray#Les_objets_TypedArray">types de tableau typé</a>.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/typedarray-indexof.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>typedarray</var>.<var>indexOf(élémentRecherché[, indiceDébut = 0])</var></pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>élémentRecherché</code></dt>
- <dd>L'élément qu'on souhaite situer dans le tableau typé.</dd>
- <dt><code>indiceDébut</code></dt>
- <dd>Paramètre optionnel représentant l'indice à partir duquel commencer la recherche de l'élément. Si l'indice est supérieur ou égal à la longueur du tableau, la méthode renverra -1 et le tableau typé ne sera pas parcouru. Si la valeur fournie est négative, la recherche commencera à partir de l'élément situé à l'indice <code>length-indiceDébut</code>. Note : même si la valeur fournie est négative, le parcours du tableau typé s'effectuera toujours du plus petit index vers le plus grand. Si la valeur calculée pour l'indice de début est inférieure à 0, l'ensemble du tableau typé sera parcouru. La valeur par défaut de ce paramètre est 0 (tout le tableau est parcouru).</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Le premier indice du tableau pour lequel l'élément a été trouvé, <code>-1</code> s'il n'a pas été trouvé.</p>
-
-<h2 id="Description">Description</h2>
-
-<p><code>indexOf</code> compare <code>élémentRecherché</code> aux éléments du tableau typé en utilisant l'<a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_de_comparaison#Using_the_Equality_Operators">égalité stricte</a> (celle utilisée par l'opérateur ===).</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<pre class="brush: js">var uint8 = new Uint8Array([2, 5, 9]);
-uint8.indexOf(2);     // 0
-uint8.indexOf(7);     // -1
-uint8.indexOf(9, 2);  // 2
-uint8.indexOf(2, -1); // -1
-uint8.indexOf(2, -3); // 0
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-%typedarray%.prototype.indexof', 'TypedArray.prototype.indexOf')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-%typedarray%.prototype.indexof', 'TypedArray.prototype.indexOf')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.TypedArray.indexOf")}}</p>
-
-<h2 id="Notes_de_compatibilité">Notes de compatibilité</h2>
-
-<ul>
- <li>À partir de Firefox 47 ({{geckoRelease(47)}}), cette méthode ne renverra plus <code>-0</code>. Ainsi, <code>new Uint8Array([0]).indexOf(0, -0)</code> renverra toujours <code>+0</code> (cf. {{bug(1242043)}}).</li>
-</ul>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("TypedArray.prototype.lastIndexOf()")}}</li>
- <li>{{jsxref("Array.prototype.indexOf()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/typedarray/indexof/index.md b/files/fr/web/javascript/reference/global_objects/typedarray/indexof/index.md
new file mode 100644
index 0000000000..d849bb21b8
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/typedarray/indexof/index.md
@@ -0,0 +1,69 @@
+---
+title: TypedArray.prototype.indexOf()
+slug: Web/JavaScript/Reference/Global_Objects/TypedArray/indexOf
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - TypedArray
+  - TypedArrays
+translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/indexOf
+original_slug: Web/JavaScript/Reference/Objets_globaux/TypedArray/indexOf
+---
+{{JSRef}}
+
+La méthode **`indexOf()`** renvoie le premier indice (le plus petit) auquel on peut trouver un élément donné dans le tableau typé. Si l'élément n'est pas trouvé, la valeur de retour sera -1. L'algorithme utilisé pour cette méthode est le même que celui pour {{jsxref("Array.prototype.indexOf()")}}. Pour le reste de l'article _TypedArray_ correspond à l'un des [types de tableau typé](/fr/docs/Web/JavaScript/Reference/Objets_globaux/TypedArray#Les_objets_TypedArray).
+
+{{EmbedInteractiveExample("pages/js/typedarray-indexof.html")}}
+
+## Syntaxe
+
+    typedarray.indexOf(élémentRecherché[, indiceDébut = 0])
+
+### Paramètres
+
+- `élémentRecherché`
+  - : L'élément qu'on souhaite situer dans le tableau typé.
+- `indiceDébut`
+  - : Paramètre optionnel représentant l'indice à partir duquel commencer la recherche de l'élément. Si l'indice est supérieur ou égal à la longueur du tableau, la méthode renverra -1 et le tableau typé ne sera pas parcouru. Si la valeur fournie est négative, la recherche commencera à partir de l'élément situé à l'indice `length-indiceDébut`. Note : même si la valeur fournie est négative, le parcours du tableau typé s'effectuera toujours du plus petit index vers le plus grand. Si la valeur calculée pour l'indice de début est inférieure à 0, l'ensemble du tableau typé sera parcouru. La valeur par défaut de ce paramètre est 0 (tout le tableau est parcouru).
+
+### Valeur de retour
+
+Le premier indice du tableau pour lequel l'élément a été trouvé, `-1` s'il n'a pas été trouvé.
+
+## Description
+
+`indexOf` compare `élémentRecherché` aux éléments du tableau typé en utilisant l'[égalité stricte](/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_de_comparaison#Using_the_Equality_Operators) (celle utilisée par l'opérateur ===).
+
+## Exemples
+
+```js
+var uint8 = new Uint8Array([2, 5, 9]);
+uint8.indexOf(2);     // 0
+uint8.indexOf(7);     // -1
+uint8.indexOf(9, 2);  // 2
+uint8.indexOf(2, -1); // -1
+uint8.indexOf(2, -3); // 0
+```
+
+## Spécifications
+
+| Spécification                                                                                                                | État                         | Commentaires         |
+| ---------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName('ES2015', '#sec-%typedarray%.prototype.indexof', 'TypedArray.prototype.indexOf')}} | {{Spec2('ES2015')}}     | Définition initiale. |
+| {{SpecName('ESDraft', '#sec-%typedarray%.prototype.indexof', 'TypedArray.prototype.indexOf')}} | {{Spec2('ESDraft')}} |                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.TypedArray.indexOf")}}
+
+## Notes de compatibilité
+
+- À partir de Firefox 47 ({{geckoRelease(47)}}), cette méthode ne renverra plus `-0`. Ainsi, `new Uint8Array([0]).indexOf(0, -0)` renverra toujours `+0` (cf. {{bug(1242043)}}).
+
+## Voir aussi
+
+- {{jsxref("TypedArray.prototype.lastIndexOf()")}}
+- {{jsxref("Array.prototype.indexOf()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/typedarray/join/index.html b/files/fr/web/javascript/reference/global_objects/typedarray/join/index.html
deleted file mode 100644
index a55abeca68..0000000000
--- a/files/fr/web/javascript/reference/global_objects/typedarray/join/index.html
+++ /dev/null
@@ -1,89 +0,0 @@
----
-title: TypedArray.prototype.join()
-slug: Web/JavaScript/Reference/Global_Objects/TypedArray/join
-tags:
-  - ECMAScript6
-  - JavaScript
-  - Méthode
-  - Prototype
-  - Reference
-  - TypedArray
-  - TypedArrays
-translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/join
-original_slug: Web/JavaScript/Reference/Objets_globaux/TypedArray/join
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <code><strong>join()</strong></code> fusionne l'ensemble des éléments d'un tableau en une chaîne de caractères. Cette méthode utilise le même algorithme que {{jsxref("Array.prototype.join()")}}. Dans le reste de cet article <em>TypedArray</em> fait référence à l'un des <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/TypedArray#Les_objets_TypedArray">types de tableaux typés</a>.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/typedarray-join.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>typedarray</var>.join([<var>séparateur</var> = ',']);</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>séparateur</code></dt>
- <dd>Paramètre optionnel qui définit la chaîne de caractères à utiliser pour séparer chaque élément. Si nécessaire, le séparateur sera converti en une chaîne de caractère. La valeur par défaut du paramètre est une virgule (",").</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Une chaîne de caractères formée par la concaténation des différents éléments du tableau typé.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<pre class="brush: js">var uint8 = new Uint8Array([1,2,3]);
-uint8.join();      // '1,2,3'
-uint8.join(' / '); // '1 / 2 / 3'
-uint8.join('');    // '123'
-</pre>
-
-<h2 id="Prothèse_d'émulation_(polyfill)">Prothèse d'émulation (<em>polyfill</em>)</h2>
-
-<p>Il n'existe pas d'objet global <em>TypedArray</em>, il faut donc ajouter une prothèse correspondant à chaque type de tableau typé.</p>
-
-<pre class="brush: js">// https://tc39.github.io/ecma262/#sec-%typedarray%.prototype.join
-if (!Uint8Array.prototype.join) {
-  Object.defineProperty(Uint8Array.prototype, 'join', {
-    value: Array.prototype.join
-  });
-}
-</pre>
-
-<p>Mieux vaut ne pas ajouter de prothèses pour <code>TypedArray.prototype</code> si le moteur JavaScript ne prend pas en charge {{jsxref("Object.defineProperty()")}} car on ne peut pas les rendre non-énumérables.</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-%typedarray%.prototype.join', 'TypedArray.prototype.join')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-%typedarray%.prototype.join', 'TypedArray.prototype.join')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.TypedArray.join")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("TypedArray")}}</li>
- <li>{{jsxref("Array.prototype.join()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/typedarray/join/index.md b/files/fr/web/javascript/reference/global_objects/typedarray/join/index.md
new file mode 100644
index 0000000000..afa7c3fb66
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/typedarray/join/index.md
@@ -0,0 +1,72 @@
+---
+title: TypedArray.prototype.join()
+slug: Web/JavaScript/Reference/Global_Objects/TypedArray/join
+tags:
+  - ECMAScript6
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - TypedArray
+  - TypedArrays
+translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/join
+original_slug: Web/JavaScript/Reference/Objets_globaux/TypedArray/join
+---
+{{JSRef}}
+
+La méthode **`join()`** fusionne l'ensemble des éléments d'un tableau en une chaîne de caractères. Cette méthode utilise le même algorithme que {{jsxref("Array.prototype.join()")}}. Dans le reste de cet article _TypedArray_ fait référence à l'un des [types de tableaux typés](/fr/docs/Web/JavaScript/Reference/Objets_globaux/TypedArray#Les_objets_TypedArray).
+
+{{EmbedInteractiveExample("pages/js/typedarray-join.html")}}
+
+## Syntaxe
+
+    typedarray.join([séparateur = ',']);
+
+### Paramètres
+
+- `séparateur`
+  - : Paramètre optionnel qui définit la chaîne de caractères à utiliser pour séparer chaque élément. Si nécessaire, le séparateur sera converti en une chaîne de caractère. La valeur par défaut du paramètre est une virgule (",").
+
+### Valeur de retour
+
+Une chaîne de caractères formée par la concaténation des différents éléments du tableau typé.
+
+## Exemples
+
+```js
+var uint8 = new Uint8Array([1,2,3]);
+uint8.join();      // '1,2,3'
+uint8.join(' / '); // '1 / 2 / 3'
+uint8.join('');    // '123'
+```
+
+## Prothèse d'émulation (_polyfill_)
+
+Il n'existe pas d'objet global _TypedArray_, il faut donc ajouter une prothèse correspondant à chaque type de tableau typé.
+
+```js
+// https://tc39.github.io/ecma262/#sec-%typedarray%.prototype.join
+if (!Uint8Array.prototype.join) {
+  Object.defineProperty(Uint8Array.prototype, 'join', {
+    value: Array.prototype.join
+  });
+}
+```
+
+Mieux vaut ne pas ajouter de prothèses pour `TypedArray.prototype` si le moteur JavaScript ne prend pas en charge {{jsxref("Object.defineProperty()")}} car on ne peut pas les rendre non-énumérables.
+
+## Spécifications
+
+| Spécification                                                                                                        | État                         | Commentaires         |
+| -------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName('ES2015', '#sec-%typedarray%.prototype.join', 'TypedArray.prototype.join')}} | {{Spec2('ES2015')}}     | Définition initiale. |
+| {{SpecName('ESDraft', '#sec-%typedarray%.prototype.join', 'TypedArray.prototype.join')}} | {{Spec2('ESDraft')}} |                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.TypedArray.join")}}
+
+## Voir aussi
+
+- {{jsxref("TypedArray")}}
+- {{jsxref("Array.prototype.join()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/typedarray/keys/index.html b/files/fr/web/javascript/reference/global_objects/typedarray/keys/index.html
deleted file mode 100644
index 647ea49a72..0000000000
--- a/files/fr/web/javascript/reference/global_objects/typedarray/keys/index.html
+++ /dev/null
@@ -1,91 +0,0 @@
----
-title: TypedArray.prototype.keys()
-slug: Web/JavaScript/Reference/Global_Objects/TypedArray/keys
-tags:
-  - ECMAScript 2015
-  - Iterator
-  - JavaScript
-  - Méthode
-  - Prototype
-  - Reference
-  - TypedArray
-  - TypedArrays
-translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/keys
-original_slug: Web/JavaScript/Reference/Objets_globaux/TypedArray/keys
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <strong><code>keys()</code></strong> renvoie un nouvel objet <code>Array Iterator</code> contenant les clés pour chaque indice du tableau typé.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/typedarray-keys.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>arr</var>.keys()</pre>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Un nouvel objet <code>Array Iterator</code>.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Parcourir_un_tableau_avec_for...of">Parcourir un tableau avec <code>for...of</code></h3>
-
-<pre class="brush: js">var arr = new Uint8Array([10, 20, 30, 40, 50]);
-var eArray = arr.keys();
-// prérequis : le navigateur doit supporter les
-// boucles for..of et les variables dont la portée
-// est définie par let
-for (let n of eArray) {
-  console.log(n);
-}
-</pre>
-
-<h3 id="Une_autre_méthode_d'itération">Une autre méthode d'itération</h3>
-
-<pre class="brush: js">var arr = new Uint8Array([10, 20, 30, 40, 50]);
-var eArr = arr.keys();
-console.log(eArr.next().value); // 0
-console.log(eArr.next().value); // 1
-console.log(eArr.next().value); // 2
-console.log(eArr.next().value); // 3
-console.log(eArr.next().value); // 4
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-%typedarray%.prototype.keys', '%TypedArray%.prototype.keys()')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-%typedarray%.prototype.keys', '%TypedArray%.prototype.keys()')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.TypedArray.keys")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/JavaScript/Tableaux_typés">Les tableaux typés JavaScript</a></li>
- <li>{{jsxref("TypedArray")}}</li>
- <li>{{jsxref("TypedArray.prototype.entries()")}}</li>
- <li>{{jsxref("TypedArray.prototype.values()")}}</li>
- <li>{{jsxref("TypedArray.prototype.@@iterator()", "TypedArray.prototype[@@iterator]()")}}</li>
- <li><code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/for...of">for...of</a></code></li>
- <li><a href="/fr/docs/Web/JavaScript/Reference/Les_protocoles_iteration">Les protocoles d'itération</a></li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/typedarray/keys/index.md b/files/fr/web/javascript/reference/global_objects/typedarray/keys/index.md
new file mode 100644
index 0000000000..70f303d5b3
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/typedarray/keys/index.md
@@ -0,0 +1,76 @@
+---
+title: TypedArray.prototype.keys()
+slug: Web/JavaScript/Reference/Global_Objects/TypedArray/keys
+tags:
+  - ECMAScript 2015
+  - Iterator
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - TypedArray
+  - TypedArrays
+translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/keys
+original_slug: Web/JavaScript/Reference/Objets_globaux/TypedArray/keys
+---
+{{JSRef}}
+
+La méthode **`keys()`** renvoie un nouvel objet `Array Iterator` contenant les clés pour chaque indice du tableau typé.
+
+{{EmbedInteractiveExample("pages/js/typedarray-keys.html")}}
+
+## Syntaxe
+
+    arr.keys()
+
+### Valeur de retour
+
+Un nouvel objet `Array Iterator`.
+
+## Exemples
+
+### Parcourir un tableau avec `for...of`
+
+```js
+var arr = new Uint8Array([10, 20, 30, 40, 50]);
+var eArray = arr.keys();
+// prérequis : le navigateur doit supporter les
+// boucles for..of et les variables dont la portée
+// est définie par let
+for (let n of eArray) {
+  console.log(n);
+}
+```
+
+### Une autre méthode d'itération
+
+```js
+var arr = new Uint8Array([10, 20, 30, 40, 50]);
+var eArr = arr.keys();
+console.log(eArr.next().value); // 0
+console.log(eArr.next().value); // 1
+console.log(eArr.next().value); // 2
+console.log(eArr.next().value); // 3
+console.log(eArr.next().value); // 4
+```
+
+## Spécifications
+
+| Spécification                                                                                                                | État                         | Commentaires         |
+| ---------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName('ES2015', '#sec-%typedarray%.prototype.keys', '%TypedArray%.prototype.keys()')}}     | {{Spec2('ES2015')}}     | Définition initiale. |
+| {{SpecName('ESDraft', '#sec-%typedarray%.prototype.keys', '%TypedArray%.prototype.keys()')}} | {{Spec2('ESDraft')}} |                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.TypedArray.keys")}}
+
+## Voir aussi
+
+- [Les tableaux typés JavaScript](/fr/docs/Web/JavaScript/Tableaux_typés)
+- {{jsxref("TypedArray")}}
+- {{jsxref("TypedArray.prototype.entries()")}}
+- {{jsxref("TypedArray.prototype.values()")}}
+- {{jsxref("TypedArray.prototype.@@iterator()", "TypedArray.prototype[@@iterator]()")}}
+- [`for...of`](/fr/docs/Web/JavaScript/Reference/Instructions/for...of)
+- [Les protocoles d'itération](/fr/docs/Web/JavaScript/Reference/Les_protocoles_iteration)
diff --git a/files/fr/web/javascript/reference/global_objects/typedarray/lastindexof/index.html b/files/fr/web/javascript/reference/global_objects/typedarray/lastindexof/index.html
deleted file mode 100644
index 382e254d04..0000000000
--- a/files/fr/web/javascript/reference/global_objects/typedarray/lastindexof/index.html
+++ /dev/null
@@ -1,84 +0,0 @@
----
-title: TypedArray.prototype.lastIndexOf()
-slug: Web/JavaScript/Reference/Global_Objects/TypedArray/lastIndexOf
-tags:
-  - ECMAScript 2015
-  - JavaScript
-  - Méthode
-  - Prototype
-  - Reference
-  - TypedArray
-  - TypedArrays
-translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/lastIndexOf
-original_slug: Web/JavaScript/Reference/Objets_globaux/TypedArray/lastIndexOf
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <code><strong>lastIndexOf()</strong></code> renvoie le dernier indice (le plus grand) pour lequel un élément donné est trouvé. Si l'élément cherché n'est pas trouvé, la valeur de retour sera -1. Le tableau typé est parcouru dans l'ordre des indices décroissants (de la fin vers le début) à partir de <code>indexDépart</code>. Cette méthode utilise le même algorithme que {{jsxref("Array.prototype.lastIndexOf()")}}. Dans le reste de l'article, <em>TypedArray</em> correspond à l'un des <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/TypedArray#Les_objets_TypedArray">types de tableaux typés</a>.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/typedarray-lastindexof.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>typedarray</var>.<var>lastIndexOf(élémentRecherché[, indiceDépart = typedarray.length])</var></pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>élémentRecherché</code></dt>
- <dd>L'élément qu'on souhaite situer dans le tableau.</dd>
- <dt><code>indiceDépart</code></dt>
- <dd>Paramètre optionnel qui représente l'indice à partir duquel parcourir le tableau dans le sens inverse. La valeur par défaut correspond à la longueur du tableau (c'est-à-dire que tout le tableau sera parcouru). Si l'indice est supérieur ou égal à la longueur du tableau typé, tout le tableau typé sera parcouru. Si la valeur est négative, le parcours commencera à <code>length+indiceDépart</code> (le sens de parcours ne change pas). Si l'indice calculé est négatif, la valeur de retour sera -1 et le tableau ne sera pas parcouru.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Le dernier indice du tableau typé pour lequel l'élément a été trouvé ou <code>-1</code> s'il n'a pas été trouvé.</p>
-
-<h2 id="Description">Description</h2>
-
-<p><code>lastIndexOf</code> compare <code>élémentRecherché</code> avec les éléments du tableau typé en utilisant l'<a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_de_comparaison#Using_the_Equality_Operators">égalité stricte</a> (celle utilisée par l'opérateur ===).</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<pre class="brush: js">var uint8 = new Uint8Array([2, 5, 9, 2]);
-uint8.lastIndexOf(2);     // 3
-uint8.lastIndexOf(7);     // -1
-uint8.lastIndexOf(2, 3);  // 3
-uint8.lastIndexOf(2, 2);  // 0
-uint8.lastIndexOf(2, -2); // 0
-uint8.lastIndexOf(2, -1); // 3
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-%typedarray%.prototype.lastindexof', 'TypedArray.prototype.lastIndexOf')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-%typedarray%.prototype.lastindexof', 'TypedArray.prototype.lastIndexOf')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.TypedArray.lastIndexOf")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("TypedArray.prototype.indexOf()")}}</li>
- <li>{{jsxref("Array.prototype.lastIndexOf()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/typedarray/lastindexof/index.md b/files/fr/web/javascript/reference/global_objects/typedarray/lastindexof/index.md
new file mode 100644
index 0000000000..e23c8468b6
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/typedarray/lastindexof/index.md
@@ -0,0 +1,66 @@
+---
+title: TypedArray.prototype.lastIndexOf()
+slug: Web/JavaScript/Reference/Global_Objects/TypedArray/lastIndexOf
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - TypedArray
+  - TypedArrays
+translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/lastIndexOf
+original_slug: Web/JavaScript/Reference/Objets_globaux/TypedArray/lastIndexOf
+---
+{{JSRef}}
+
+La méthode **`lastIndexOf()`** renvoie le dernier indice (le plus grand) pour lequel un élément donné est trouvé. Si l'élément cherché n'est pas trouvé, la valeur de retour sera -1. Le tableau typé est parcouru dans l'ordre des indices décroissants (de la fin vers le début) à partir de `indexDépart`. Cette méthode utilise le même algorithme que {{jsxref("Array.prototype.lastIndexOf()")}}. Dans le reste de l'article, *TypedArray* correspond à l'un des [types de tableaux typés](/fr/docs/Web/JavaScript/Reference/Objets_globaux/TypedArray#Les_objets_TypedArray).
+
+{{EmbedInteractiveExample("pages/js/typedarray-lastindexof.html")}}
+
+## Syntaxe
+
+    typedarray.lastIndexOf(élémentRecherché[, indiceDépart = typedarray.length])
+
+### Paramètres
+
+- `élémentRecherché`
+  - : L'élément qu'on souhaite situer dans le tableau.
+- `indiceDépart`
+  - : Paramètre optionnel qui représente l'indice à partir duquel parcourir le tableau dans le sens inverse. La valeur par défaut correspond à la longueur du tableau (c'est-à-dire que tout le tableau sera parcouru). Si l'indice est supérieur ou égal à la longueur du tableau typé, tout le tableau typé sera parcouru. Si la valeur est négative, le parcours commencera à `length+indiceDépart` (le sens de parcours ne change pas). Si l'indice calculé est négatif, la valeur de retour sera -1 et le tableau ne sera pas parcouru.
+
+### Valeur de retour
+
+Le dernier indice du tableau typé pour lequel l'élément a été trouvé ou `-1` s'il n'a pas été trouvé.
+
+## Description
+
+`lastIndexOf` compare `élémentRecherché` avec les éléments du tableau typé en utilisant l'[égalité stricte](/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_de_comparaison#Using_the_Equality_Operators) (celle utilisée par l'opérateur ===).
+
+## Exemples
+
+```js
+var uint8 = new Uint8Array([2, 5, 9, 2]);
+uint8.lastIndexOf(2);     // 3
+uint8.lastIndexOf(7);     // -1
+uint8.lastIndexOf(2, 3);  // 3
+uint8.lastIndexOf(2, 2);  // 0
+uint8.lastIndexOf(2, -2); // 0
+uint8.lastIndexOf(2, -1); // 3
+```
+
+## Spécifications
+
+| Spécification                                                                                                                            | État                         | Commentaires         |
+| ---------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName('ES2015', '#sec-%typedarray%.prototype.lastindexof', 'TypedArray.prototype.lastIndexOf')}} | {{Spec2('ES2015')}}     | Définition initiale. |
+| {{SpecName('ESDraft', '#sec-%typedarray%.prototype.lastindexof', 'TypedArray.prototype.lastIndexOf')}} | {{Spec2('ESDraft')}} |                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.TypedArray.lastIndexOf")}}
+
+## Voir aussi
+
+- {{jsxref("TypedArray.prototype.indexOf()")}}
+- {{jsxref("Array.prototype.lastIndexOf()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/typedarray/length/index.html b/files/fr/web/javascript/reference/global_objects/typedarray/length/index.html
deleted file mode 100644
index c7e8b1772d..0000000000
--- a/files/fr/web/javascript/reference/global_objects/typedarray/length/index.html
+++ /dev/null
@@ -1,72 +0,0 @@
----
-title: TypedArray.prototype.length
-slug: Web/JavaScript/Reference/Global_Objects/TypedArray/length
-tags:
-  - JavaScript
-  - Propriété
-  - Prototype
-  - Reference
-  - TypedArray
-translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/length
-original_slug: Web/JavaScript/Reference/Objets_globaux/TypedArray/length
----
-<div>{{JSRef}}</div>
-
-<p>La propriété <strong><code>length</code></strong> est un accesseur qui permet de représenter la longueur, en nombre d'éléments, d'un tableau typé.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/typedarray-length.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>typedarray</var>.length</pre>
-
-<h2 id="Description">Description</h2>
-
-<p>La propriété <code>length</code> est un accesseur dont le mutateur correspondant vaut <code>undefined</code>, ce qui signifie qu'elle n'est accessible qu'en lecture. La valeur de la propriété est déterminée lors de la construction du <em>TypedArray</em> et ne peut pas être modifiée. Si le <em>TypedArray</em> n'utilise pas de <code>byteOffset</code> ou de <code>length</code>, le résultat correspondra à la longueur du {{jsxref("ArrayBuffer")}} correspondant. <em>TypedArray</em> est l'un des objets <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/TypedArray#Les_objets_TypedArray">TypedArray</a>.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<pre class="brush:js">var tampon = new ArrayBuffer(8);
-
-var uint8 = new Uint8Array(tampon);
-uint8.length; // 8 (correspond à la longueur du tampon/buffer)
-
-var uint8 = new Uint8Array(tampon, 1, 5);
-uint8.length; // 5 (correspond à la longueur définie lors de la construction)
-
-var uint8 = new Uint8Array(tampon, 2);
-uint8.length; // 6 (correspond à la longueur en prenant en compte le décalage utilisé)
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-get-%typedarray%.prototype.length', 'TypedArray.prototype.length')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-get-%typedarray%.prototype.length', 'TypedArray.prototype.length')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.TypedArray.length")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/JavaScript/Tableaux_typés">Les tableaux typés en JavaScript</a></li>
- <li>{{jsxref("TypedArray")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/typedarray/length/index.md b/files/fr/web/javascript/reference/global_objects/typedarray/length/index.md
new file mode 100644
index 0000000000..0497fdae14
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/typedarray/length/index.md
@@ -0,0 +1,56 @@
+---
+title: TypedArray.prototype.length
+slug: Web/JavaScript/Reference/Global_Objects/TypedArray/length
+tags:
+  - JavaScript
+  - Propriété
+  - Prototype
+  - Reference
+  - TypedArray
+translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/length
+original_slug: Web/JavaScript/Reference/Objets_globaux/TypedArray/length
+---
+{{JSRef}}
+
+La propriété **`length`** est un accesseur qui permet de représenter la longueur, en nombre d'éléments, d'un tableau typé.
+
+{{EmbedInteractiveExample("pages/js/typedarray-length.html")}}
+
+## Syntaxe
+
+    typedarray.length
+
+## Description
+
+La propriété `length` est un accesseur dont le mutateur correspondant vaut `undefined`, ce qui signifie qu'elle n'est accessible qu'en lecture. La valeur de la propriété est déterminée lors de la construction du _TypedArray_ et ne peut pas être modifiée. Si le _TypedArray_ n'utilise pas de `byteOffset` ou de `length`, le résultat correspondra à la longueur du {{jsxref("ArrayBuffer")}} correspondant. _TypedArray_ est l'un des objets [TypedArray](/fr/docs/Web/JavaScript/Reference/Objets_globaux/TypedArray#Les_objets_TypedArray).
+
+## Exemples
+
+```js
+var tampon = new ArrayBuffer(8);
+
+var uint8 = new Uint8Array(tampon);
+uint8.length; // 8 (correspond à la longueur du tampon/buffer)
+
+var uint8 = new Uint8Array(tampon, 1, 5);
+uint8.length; // 5 (correspond à la longueur définie lors de la construction)
+
+var uint8 = new Uint8Array(tampon, 2);
+uint8.length; // 6 (correspond à la longueur en prenant en compte le décalage utilisé)
+```
+
+## Spécifications
+
+| Spécification                                                                                                                    | Statut                       | Commentaires         |
+| -------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName('ES6', '#sec-get-%typedarray%.prototype.length', 'TypedArray.prototype.length')}}     | {{Spec2('ES6')}}         | Définition initiale. |
+| {{SpecName('ESDraft', '#sec-get-%typedarray%.prototype.length', 'TypedArray.prototype.length')}} | {{Spec2('ESDraft')}} |                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.TypedArray.length")}}
+
+## Voir aussi
+
+- [Les tableaux typés en JavaScript](/fr/docs/Web/JavaScript/Tableaux_typés)
+- {{jsxref("TypedArray")}}
diff --git a/files/fr/web/javascript/reference/global_objects/typedarray/map/index.html b/files/fr/web/javascript/reference/global_objects/typedarray/map/index.html
deleted file mode 100644
index 0819de5af5..0000000000
--- a/files/fr/web/javascript/reference/global_objects/typedarray/map/index.html
+++ /dev/null
@@ -1,114 +0,0 @@
----
-title: TypedArray.prototype.map()
-slug: Web/JavaScript/Reference/Global_Objects/TypedArray/map
-tags:
-  - ECMAScript 2015
-  - JavaScript
-  - Méthode
-  - Prototype
-  - Reference
-  - TypedArray
-  - TypedArrays
-translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/map
-original_slug: Web/JavaScript/Reference/Objets_globaux/TypedArray/map
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <code><strong>map()</strong></code> crée un nouveau tableau typé dont les éléments sont les images des éléments du tableau typé courant par une fonction donnée. Cette méthode utilise le même algorithme que {{jsxref("Array.prototype.map()")}}<em>.</em> <em>TypedArray</em> est utilisé ici de façon générique pour représenter <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/TypedArray#Les_objets_TypedArray">l'un des types de tableaux typés possibles</a>.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/typedarray-map.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>typedarray</var>.map(<var>callback</var>[, <var>thisArg</var>])</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>callback</code></dt>
- <dd>La fonction qui renvoie l'élément à placer dans le nouveau tableau typé. Cette fonction utilise trois arguments :
- <dl>
-  <dt><code>valeurCourante</code></dt>
-  <dd>La valeur de l'élément du tableau typé courant, celui traité par la fonction.</dd>
-  <dt><code>indice</code></dt>
-  <dd>L'indice de l'élément du tableau typé en cours de traitement.</dd>
-  <dt><code>tableauTypé</code></dt>
-  <dd>Le tableau typé sur lequel <code>map()</code> a été appelée.</dd>
- </dl>
- </dd>
- <dt><code>thisArg</code></dt>
- <dd>Paramètre optionnel. La valeur à utiliser pour <code>this</code> lors de l'appel à <code>callback</code>.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Un nouveau tableau typé.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>La méthode <code>map()</code> appelle la fonction <code>callback()</code> passée en argument une fois pour chaque élément du tableau typé pour construire un nouveau tableau à partir des résultats de la fonction. Les appels à callback sont effectués dans l'ordre du tableau typé. <code>callback()</code> n'est appelée que pour les éléments du tableaux qui ont une valeur, elle n'est pas appelée pour les éléments qui sont indéfinis ou qui ont été supprimés.</p>
-
-<p><code>callback()</code> est appelée avec trois arguments : la valeur de l'élément, l'indice de cet élément et enfin le tableau typé courant.</p>
-
-<p>Si un paramètre <code>thisArg</code> est fourni pour <code>map()</code>, il sera passé à <code>callback</code> pour les différents appels et servira de valeur <code>this</code>. Par défaut, la valeur {{jsxref("undefined")}} sera passée à la fonction pour la valeur <code>this</code>. Par ailleurs, la valeur de <code>this</code> accessible depuis la fonction <code>callback</code> est déterminée selon <a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/L_op%C3%A9rateur_this">les règles usuelles déterminant la valeur <code>this</code> au sein d'une fonction</a>.</p>
-
-<p><code>map()</code> ne modifie pas le tableau typé sur lequel elle a été appelée (indirectement, c'est la fonction <code>callback</code> qui pourra éventuellement modifier le tableau).</p>
-
-<p>La liste des éléments parcourus par <code>map()</code> est définie avant la première invocation de la fonction <code>callback</code>. Les éléments qui sont ajoutés au tableau typé après le début de l'appel de <code>map()</code> (grâce à la fonction <code>callback</code> par exemple) ne seront pas visités. Si des éléments existants du tableau typé ont modifiés ou supprimés, la valeur fournie à la fonction <code>callback</code> sera leur valeur au moment où <code>map()</code> les visite - les éléments supprimés ne seront pas traités par la fonction.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Obtenir_un_tableau_typé_des_racines_carrées_des_éléments_d'un_premier_tableau_typé">Obtenir un tableau typé des racines carrées des éléments d'un premier tableau typé</h3>
-
-<p>Dans l'exemple suivant, on crée un nouveau tableau typé dont les éléments seront les racines carrées respectives des éléments d'un tableau typé existant.</p>
-
-<pre class="brush: js">var nombres = new Uint8Array([1, 4, 9]);
-var racines = nombres.map(Math.sqrt);
-// racines vaut désormais Uint8Array [1, 2, 3],
-// nombres vaut toujours Uint8Array [1, 4, 9]
-</pre>
-
-<h3 id="Utiliser_map()_avec_une_fonction_qui_prend_un_argument">Utiliser <code>map()</code> avec une fonction qui prend un argument</h3>
-
-<p>Ici, on illustre comment une fonction utilisant un argument peut être utilisée avec <code>map()</code>. Cet argument recevra automatiquement la valeur de chaque élément du tableau typé au fur et à mesure du parcours.</p>
-
-<pre class="brush: js">var nombres = new Uint8Array([1, 4, 9]);
-var doubles = nombres.map(function(num) {
-  return num * 2;
-});
-// doubles vaut désormais Uint8Array [2, 8, 18]
-// nombres vaut toujours Uint8Array [1, 4, 9]
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-%typedarray%.prototype.map', 'TypedArray.prototype.map')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-%typedarray%.prototype.map', 'TypedArray.prototype.map')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.TypedArray.map")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("TypedArray.prototype.filter()")}}</li>
- <li>{{jsxref("Array.prototype.map()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/typedarray/map/index.md b/files/fr/web/javascript/reference/global_objects/typedarray/map/index.md
new file mode 100644
index 0000000000..3445e8b589
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/typedarray/map/index.md
@@ -0,0 +1,97 @@
+---
+title: TypedArray.prototype.map()
+slug: Web/JavaScript/Reference/Global_Objects/TypedArray/map
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - TypedArray
+  - TypedArrays
+translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/map
+original_slug: Web/JavaScript/Reference/Objets_globaux/TypedArray/map
+---
+{{JSRef}}
+
+La méthode **`map()`** crée un nouveau tableau typé dont les éléments sont les images des éléments du tableau typé courant par une fonction donnée. Cette méthode utilise le même algorithme que {{jsxref("Array.prototype.map()")}}_._ _TypedArray_ est utilisé ici de façon générique pour représenter [l'un des types de tableaux typés possibles](/fr/docs/Web/JavaScript/Reference/Objets_globaux/TypedArray#Les_objets_TypedArray).
+
+{{EmbedInteractiveExample("pages/js/typedarray-map.html")}}
+
+## Syntaxe
+
+    typedarray.map(callback[, thisArg])
+
+### Paramètres
+
+- `callback`
+
+  - : La fonction qui renvoie l'élément à placer dans le nouveau tableau typé. Cette fonction utilise trois arguments :
+
+    - `valeurCourante`
+      - : La valeur de l'élément du tableau typé courant, celui traité par la fonction.
+    - `indice`
+      - : L'indice de l'élément du tableau typé en cours de traitement.
+    - `tableauTypé`
+      - : Le tableau typé sur lequel `map()` a été appelée.
+
+- `thisArg`
+  - : Paramètre optionnel. La valeur à utiliser pour `this` lors de l'appel à `callback`.
+
+### Valeur de retour
+
+Un nouveau tableau typé.
+
+## Description
+
+La méthode `map()` appelle la fonction `callback()` passée en argument une fois pour chaque élément du tableau typé pour construire un nouveau tableau à partir des résultats de la fonction. Les appels à callback sont effectués dans l'ordre du tableau typé. `callback()` n'est appelée que pour les éléments du tableaux qui ont une valeur, elle n'est pas appelée pour les éléments qui sont indéfinis ou qui ont été supprimés.
+
+`callback()` est appelée avec trois arguments : la valeur de l'élément, l'indice de cet élément et enfin le tableau typé courant.
+
+Si un paramètre `thisArg` est fourni pour `map()`, il sera passé à `callback` pour les différents appels et servira de valeur `this`. Par défaut, la valeur {{jsxref("undefined")}} sera passée à la fonction pour la valeur `this`. Par ailleurs, la valeur de `this` accessible depuis la fonction `callback` est déterminée selon [les règles usuelles déterminant la valeur `this` au sein d'une fonction](/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/L_op%C3%A9rateur_this).
+
+`map()` ne modifie pas le tableau typé sur lequel elle a été appelée (indirectement, c'est la fonction `callback` qui pourra éventuellement modifier le tableau).
+
+La liste des éléments parcourus par `map()` est définie avant la première invocation de la fonction `callback`. Les éléments qui sont ajoutés au tableau typé après le début de l'appel de `map()` (grâce à la fonction `callback` par exemple) ne seront pas visités. Si des éléments existants du tableau typé ont modifiés ou supprimés, la valeur fournie à la fonction `callback` sera leur valeur au moment où `map()` les visite - les éléments supprimés ne seront pas traités par la fonction.
+
+## Exemples
+
+### Obtenir un tableau typé des racines carrées des éléments d'un premier tableau typé
+
+Dans l'exemple suivant, on crée un nouveau tableau typé dont les éléments seront les racines carrées respectives des éléments d'un tableau typé existant.
+
+```js
+var nombres = new Uint8Array([1, 4, 9]);
+var racines = nombres.map(Math.sqrt);
+// racines vaut désormais Uint8Array [1, 2, 3],
+// nombres vaut toujours Uint8Array [1, 4, 9]
+```
+
+### Utiliser `map()` avec une fonction qui prend un argument
+
+Ici, on illustre comment une fonction utilisant un argument peut être utilisée avec `map()`. Cet argument recevra automatiquement la valeur de chaque élément du tableau typé au fur et à mesure du parcours.
+
+```js
+var nombres = new Uint8Array([1, 4, 9]);
+var doubles = nombres.map(function(num) {
+  return num * 2;
+});
+// doubles vaut désormais Uint8Array [2, 8, 18]
+// nombres vaut toujours Uint8Array [1, 4, 9]
+```
+
+## Spécifications
+
+| Spécification                                                                                                        | État                         | Commentaires         |
+| -------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName('ES2015', '#sec-%typedarray%.prototype.map', 'TypedArray.prototype.map')}}     | {{Spec2('ES2015')}}     | Définition initiale. |
+| {{SpecName('ESDraft', '#sec-%typedarray%.prototype.map', 'TypedArray.prototype.map')}} | {{Spec2('ESDraft')}} |                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.TypedArray.map")}}
+
+## Voir aussi
+
+- {{jsxref("TypedArray.prototype.filter()")}}
+- {{jsxref("Array.prototype.map()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/typedarray/name/index.html b/files/fr/web/javascript/reference/global_objects/typedarray/name/index.html
deleted file mode 100644
index 6c52d94874..0000000000
--- a/files/fr/web/javascript/reference/global_objects/typedarray/name/index.html
+++ /dev/null
@@ -1,74 +0,0 @@
----
-title: TypedArray.name
-slug: Web/JavaScript/Reference/Global_Objects/TypedArray/name
-tags:
-  - JavaScript
-  - Propriété
-  - Reference
-  - TypedArray
-  - TypedArrays
-translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/name
-original_slug: Web/JavaScript/Reference/Objets_globaux/TypedArray/name
----
-<div>{{JSRef}}</div>
-
-<p>La propriété <code><strong>TypedArray.name</strong></code> est une chaîne de caractères représentant le nom du constructeur du tableau typé.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/typedarray-name.html")}}</div>
-
-
-
-<div>{{js_property_attributes(0,0,0)}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>TypedArray</var>.name;</pre>
-
-<h2 id="Description">Description</h2>
-
-<p>Les objets <code>TypedArray</code> varient en fonction du nombre d'octets correspondant pour chaque élément du tableau et de la façon dont les octets sont interprétés. La propriété <code>name</code> permet de décrire le type de données du tableau. La première partie du nom peut être <code>Int</code> pour les tableaux d'entiers (<strong>Int</strong><em>eger</em>) ou <code>Uint</code> pour les tableaux d'entiers non signés (<strong>U</strong>nsigned <strong>Int</strong>eger) ou <code>Float</code> pour les nombres décimaux (<strong>float</strong>ing). La deuxième partie correspond au nombre de bits de chaque élément. Enfin, la troisième composante du nom est <code>Array</code>, <code>ClampedArray</code> étant un cas spécifique. Voir la page {{jsxref("Uint8ClampedArray")}} pour plus d'informations sur ce tableau typé.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<pre class="brush:js">Int8Array.name;         // "Int8Array"
-Uint8Array.name;        // "Uint8Array"
-Uint8ClampedArray.name; // "Uint8ClampedArray"
-Int16Array.name;        // "Int16Array"
-Uint16Array.name;       // "Uint16Array"
-Int32Array.name;        // "Int32Array"
-Uint32Array.name;       // "Uint32Array"
-Float32Array.name;      // "Float32Array"
-Float64Array.name;      // "Float64Array"</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-properties-of-the-typedarray-constructors', 'TypedArray.name')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-properties-of-the-typedarray-constructors', 'TypedArray.name')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.TypedArray.name")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/JavaScript/Tableaux_typés">Les tableaux typés en JavaScript</a></li>
- <li>{{jsxref("TypedArray")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/typedarray/name/index.md b/files/fr/web/javascript/reference/global_objects/typedarray/name/index.md
new file mode 100644
index 0000000000..c028fc2703
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/typedarray/name/index.md
@@ -0,0 +1,55 @@
+---
+title: TypedArray.name
+slug: Web/JavaScript/Reference/Global_Objects/TypedArray/name
+tags:
+  - JavaScript
+  - Propriété
+  - Reference
+  - TypedArray
+  - TypedArrays
+translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/name
+original_slug: Web/JavaScript/Reference/Objets_globaux/TypedArray/name
+---
+{{JSRef}}
+
+La propriété **`TypedArray.name`** est une chaîne de caractères représentant le nom du constructeur du tableau typé.
+
+{{EmbedInteractiveExample("pages/js/typedarray-name.html")}}{{js_property_attributes(0,0,0)}}
+
+## Syntaxe
+
+    TypedArray.name;
+
+## Description
+
+Les objets `TypedArray` varient en fonction du nombre d'octets correspondant pour chaque élément du tableau et de la façon dont les octets sont interprétés. La propriété `name` permet de décrire le type de données du tableau. La première partie du nom peut être `Int` pour les tableaux d'entiers (**Int\***eger\*) ou `Uint` pour les tableaux d'entiers non signés (**U**nsigned **Int**eger) ou `Float` pour les nombres décimaux (**float**ing). La deuxième partie correspond au nombre de bits de chaque élément. Enfin, la troisième composante du nom est `Array`, `ClampedArray` étant un cas spécifique. Voir la page {{jsxref("Uint8ClampedArray")}} pour plus d'informations sur ce tableau typé.
+
+## Exemples
+
+```js
+Int8Array.name;         // "Int8Array"
+Uint8Array.name;        // "Uint8Array"
+Uint8ClampedArray.name; // "Uint8ClampedArray"
+Int16Array.name;        // "Int16Array"
+Uint16Array.name;       // "Uint16Array"
+Int32Array.name;        // "Int32Array"
+Uint32Array.name;       // "Uint32Array"
+Float32Array.name;      // "Float32Array"
+Float64Array.name;      // "Float64Array"
+```
+
+## Spécifications
+
+| Spécification                                                                                                                | État                         | Commentaires         |
+| ---------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName('ES6', '#sec-properties-of-the-typedarray-constructors', 'TypedArray.name')}}         | {{Spec2('ES6')}}         | Définition initiale. |
+| {{SpecName('ESDraft', '#sec-properties-of-the-typedarray-constructors', 'TypedArray.name')}} | {{Spec2('ESDraft')}} |                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.TypedArray.name")}}
+
+## Voir aussi
+
+- [Les tableaux typés en JavaScript](/fr/docs/Web/JavaScript/Tableaux_typés)
+- {{jsxref("TypedArray")}}
diff --git a/files/fr/web/javascript/reference/global_objects/typedarray/of/index.html b/files/fr/web/javascript/reference/global_objects/typedarray/of/index.html
deleted file mode 100644
index b03ce593e4..0000000000
--- a/files/fr/web/javascript/reference/global_objects/typedarray/of/index.html
+++ /dev/null
@@ -1,96 +0,0 @@
----
-title: TypedArray.of()
-slug: Web/JavaScript/Reference/Global_Objects/TypedArray/of
-tags:
-  - ECMAScript 2015
-  - JavaScript
-  - Méthode
-  - Reference
-  - TypedArray
-translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/of
-original_slug: Web/JavaScript/Reference/Objets_globaux/TypedArray/of
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <code><strong>TypedArray.of()</strong></code> crée un nouvel objet {{jsxref("TypedArray", "TypedArray", "#Les_objets_TypedArray")}} à partir d'un nombre variable d'arguments. Cette méthode est similaire à {{jsxref("Array.of()")}}.</p>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><em><var>TypedArray</var></em>.of(<var>élément0</var>[, <var>élément1</var>[, ...[, <var>élémentN</var>]]])
-
-où <em>TypedArray</em> est l'un de :
-
-Int8Array
-Uint8Array
-Uint8ClampedArray
-Int16Array
-Uint16Array
-Int32Array
-Uint32Array
-Float32Array
-Float64Array
-BigInt64Array
-BigUint64Array</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>élémentN</code></dt>
- <dd>Les éléments avec lesquels on souhaite construire le nouveau tableau typé.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Une nouvelle instance de {{jsxref("TypedArray")}}.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>Il existe de légères différences entre {{jsxref("Array.of()")}} et <code><em>TypedArray</em>.of()</code> :</p>
-
-<ul>
- <li>Si la valeur de <code>this</code> passée à <code><em>TypedArray</em>.of</code> n'est pas un constructeur, <code><em>TypedArray</em>.of</code> lèvera une exception {{jsxref("TypeError")}}, tandis que <code>Array.of</code> créera un nouvel objet {{jsxref("Array")}}.</li>
- <li><code><em>TypedArray</em>.of</code> utilise <code>[[Put]]</code> tandis que <code>Array.of</code> utilise <code>[[DefineProperty]]</code>. Ainsi lorsque les arguments sont des objets {{jsxref("Proxy")}} la première méthode appellera {{jsxref("Objets_globaux/Proxy/handler/set", "handler.set")}} pour créer les nouveaux éléments et la seconde appellera {{jsxref("Objets_globaux/Proxy/handler/defineProperty", "handler.defineProperty")}}.</li>
-</ul>
-
-<h2 id="Exemples">Exemples</h2>
-
-<pre class="brush: js">Uint8Array.of(1);            // Uint8Array [ 1 ]
-Int8Array.of("1", "2", "3"); // Int8Array [ 1, 2, 3 ]
-Float32Array.of(1, 2, 3);    // Float32Array [ 1, 2, 3 ]
-Int16Array.of(undefined);    // Int16Array [ 0 ]
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-%typedarray%.of', '%TypedArray%.of')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td>Définition initiale au sein d'un standard ECMA.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-%typedarray%.of', '%TypedArray%.of')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.TypedArray.of")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("TypedArray.from()")}}</li>
- <li>{{jsxref("Array.of()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/typedarray/of/index.md b/files/fr/web/javascript/reference/global_objects/typedarray/of/index.md
new file mode 100644
index 0000000000..646aef4738
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/typedarray/of/index.md
@@ -0,0 +1,74 @@
+---
+title: TypedArray.of()
+slug: Web/JavaScript/Reference/Global_Objects/TypedArray/of
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Méthode
+  - Reference
+  - TypedArray
+translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/of
+original_slug: Web/JavaScript/Reference/Objets_globaux/TypedArray/of
+---
+{{JSRef}}
+
+La méthode **`TypedArray.of()`** crée un nouvel objet {{jsxref("TypedArray", "TypedArray", "#Les_objets_TypedArray")}} à partir d'un nombre variable d'arguments. Cette méthode est similaire à {{jsxref("Array.of()")}}.
+
+## Syntaxe
+
+    TypedArray.of(élément0[, élément1[, ...[, élémentN]]])
+
+    où TypedArray est l'un de :
+
+    Int8Array
+    Uint8Array
+    Uint8ClampedArray
+    Int16Array
+    Uint16Array
+    Int32Array
+    Uint32Array
+    Float32Array
+    Float64Array
+    BigInt64Array
+    BigUint64Array
+
+### Paramètres
+
+- `élémentN`
+  - : Les éléments avec lesquels on souhaite construire le nouveau tableau typé.
+
+### Valeur de retour
+
+Une nouvelle instance de {{jsxref("TypedArray")}}.
+
+## Description
+
+Il existe de légères différences entre {{jsxref("Array.of()")}} et `TypedArray.of()` :
+
+- Si la valeur de `this` passée à `TypedArray.of` n'est pas un constructeur, `TypedArray.of` lèvera une exception {{jsxref("TypeError")}}, tandis que `Array.of` créera un nouvel objet {{jsxref("Array")}}.
+- `TypedArray.of` utilise `[[Put]]` tandis que `Array.of` utilise `[[DefineProperty]]`. Ainsi lorsque les arguments sont des objets {{jsxref("Proxy")}} la première méthode appellera {{jsxref("Objets_globaux/Proxy/handler/set", "handler.set")}} pour créer les nouveaux éléments et la seconde appellera {{jsxref("Objets_globaux/Proxy/handler/defineProperty", "handler.defineProperty")}}.
+
+## Exemples
+
+```js
+Uint8Array.of(1);            // Uint8Array [ 1 ]
+Int8Array.of("1", "2", "3"); // Int8Array [ 1, 2, 3 ]
+Float32Array.of(1, 2, 3);    // Float32Array [ 1, 2, 3 ]
+Int16Array.of(undefined);    // Int16Array [ 0 ]
+```
+
+## Spécifications
+
+| Spécification                                                                            | État                         | Commentaires                                    |
+| ---------------------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------- |
+| {{SpecName('ES2015', '#sec-%typedarray%.of', '%TypedArray%.of')}} | {{Spec2('ES2015')}}     | Définition initiale au sein d'un standard ECMA. |
+| {{SpecName('ESDraft', '#sec-%typedarray%.of', '%TypedArray%.of')}} | {{Spec2('ESDraft')}} |                                                 |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.TypedArray.of")}}
+
+## Voir aussi
+
+- {{jsxref("TypedArray.from()")}}
+- {{jsxref("Array.of()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/typedarray/reduce/index.html b/files/fr/web/javascript/reference/global_objects/typedarray/reduce/index.html
deleted file mode 100644
index ef3e79f68f..0000000000
--- a/files/fr/web/javascript/reference/global_objects/typedarray/reduce/index.html
+++ /dev/null
@@ -1,95 +0,0 @@
----
-title: TypedArray.prototype.reduce()
-slug: Web/JavaScript/Reference/Global_Objects/TypedArray/reduce
-tags:
-  - JavaScript
-  - Méthode
-  - Prototype
-  - Reference
-  - TypedArray
-  - TypedArrays
-translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/reduce
-original_slug: Web/JavaScript/Reference/Objets_globaux/TypedArray/reduce
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <code><strong>reduce()</strong></code> applique une fonction sur un accumulateur et chaque valeur du tableau typé (de la gauche vers la droite) afin de réduire le tableau en une seule valeur. Cette méthode utilise le même algorithme que {{jsxref("Array.prototype.reduce()")}}. Dans le reste de cet article <em>TypedArray</em> correspond à un des <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/TypedArray#Les_objets_TypedArray">types de tableaux typés</a>.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/typedarray-reduce.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>typedarray</var>.reduce(<var>callback</var>[, <var>valeurInitiale</var>])</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>callback</code></dt>
- <dd>La fonction à exécuter sur chaque valeur du tableau typé. Elle utilise quatre arguments :
- <dl>
-  <dt><code>valeurPrécédente</code></dt>
-  <dd>La valeur renvoyée précédemment par l'appel précédent à <code>callback</code>. Dans le cadre du premier élément, ce sera <code>valeurInitiale</code> si ce paramètre est fourni (voir ci-après).</dd>
-  <dt><code>valeurCourante</code></dt>
-  <dd>L'élément du tableau typé en cours de traitement</dd>
-  <dt><code>index</code></dt>
-  <dd>L'indice de l'élément du tableau typé en cours de traitement.</dd>
-  <dt><code>array</code></dt>
-  <dd>Le tableau typé pour lequel <code>reduce</code> a été appelée.</dd>
- </dl>
- </dd>
- <dt><code>valeurInitiale</code></dt>
- <dd>Paramètre optionnel qui correspond à l'objet à utiliser en tant que premier argument pour le premier appel à <code>callback</code>.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>La valeur obtenue à partir de la réduction du tableau typé.</p>
-
-<h2 id="Description">Description</h2>
-
-<p><code>reduce</code> exécute la fonction <code>callback</code> une fois pour chaque élément présent dans le tableau typé (les éléments vides ou supprimés ne sont pas traités). La fonction <code>callback</code> utilise quatre arguments : la valeur initiale ou la valeur précédemment calculée, la valeur de l'élément courant, l'indice de l'élément courant et le tableau typé qui est parcouru.</p>
-
-<p>Lors du premier appel à la fonction callback, <code>valeurPrécédente</code> et <code>valeurCourante</code> peuvent être un ou deux valeurs différentes. Si <code>valeurInitiale</code> est fournie, <code>valeurPrécédente</code> sera alors égale à <code>valeurInitiale</code> et <code>valeurCourante</code> sera égale à la première valeur du tableau. Si le paramètre <code>valeurInitiale</code> n'est pas utilisé, <code>valeurPrécédente</code> sera égale au premier élément du tableau typé et <code>valeurCourante</code> sera égale au second élément.</p>
-
-<p>Si le tableau typé est vide et que le paramètre <code>valeurInitiale</code> n'a pas été fourni, une exception {{jsxref("TypeError")}} sera levée. SI le tableau typé ne possède qu'un seul élément et que <code>valeurInitiale</code> n'a pas été fourni (ou que <code>valeurInitiale</code> a été utilisée mais que le tableau typé est vide), la valeur unique sera renvoyée et <code>callback</code> ne sera pas appelée.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<pre class="brush: js">var total = new Uint8Array([0, 1, 2, 3]).reduce(function(a, b) {
-  return a + b;
-});
-// total == 6
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-%typedarray%.prototype.reduce', '%TypedArray%.prototype.reduce')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-%typedarray%.prototype.reduce', '%TypedArray%.prototype.reduce')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.TypedArray.reduce")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("TypedArray.prototype.reduceRight()")}}</li>
- <li>{{jsxref("Array.prototype.reduce()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/typedarray/reduce/index.md b/files/fr/web/javascript/reference/global_objects/typedarray/reduce/index.md
new file mode 100644
index 0000000000..820f23c6c0
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/typedarray/reduce/index.md
@@ -0,0 +1,77 @@
+---
+title: TypedArray.prototype.reduce()
+slug: Web/JavaScript/Reference/Global_Objects/TypedArray/reduce
+tags:
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - TypedArray
+  - TypedArrays
+translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/reduce
+original_slug: Web/JavaScript/Reference/Objets_globaux/TypedArray/reduce
+---
+{{JSRef}}
+
+La méthode **`reduce()`** applique une fonction sur un accumulateur et chaque valeur du tableau typé (de la gauche vers la droite) afin de réduire le tableau en une seule valeur. Cette méthode utilise le même algorithme que {{jsxref("Array.prototype.reduce()")}}. Dans le reste de cet article _TypedArray_ correspond à un des [types de tableaux typés](/fr/docs/Web/JavaScript/Reference/Objets_globaux/TypedArray#Les_objets_TypedArray).
+
+{{EmbedInteractiveExample("pages/js/typedarray-reduce.html")}}
+
+## Syntaxe
+
+    typedarray.reduce(callback[, valeurInitiale])
+
+### Paramètres
+
+- `callback`
+
+  - : La fonction à exécuter sur chaque valeur du tableau typé. Elle utilise quatre arguments :
+
+    - `valeurPrécédente`
+      - : La valeur renvoyée précédemment par l'appel précédent à `callback`. Dans le cadre du premier élément, ce sera `valeurInitiale` si ce paramètre est fourni (voir ci-après).
+    - `valeurCourante`
+      - : L'élément du tableau typé en cours de traitement
+    - `index`
+      - : L'indice de l'élément du tableau typé en cours de traitement.
+    - `array`
+      - : Le tableau typé pour lequel `reduce` a été appelée.
+
+- `valeurInitiale`
+  - : Paramètre optionnel qui correspond à l'objet à utiliser en tant que premier argument pour le premier appel à `callback`.
+
+### Valeur de retour
+
+La valeur obtenue à partir de la réduction du tableau typé.
+
+## Description
+
+`reduce` exécute la fonction `callback` une fois pour chaque élément présent dans le tableau typé (les éléments vides ou supprimés ne sont pas traités). La fonction `callback` utilise quatre arguments : la valeur initiale ou la valeur précédemment calculée, la valeur de l'élément courant, l'indice de l'élément courant et le tableau typé qui est parcouru.
+
+Lors du premier appel à la fonction callback, `valeurPrécédente` et `valeurCourante` peuvent être un ou deux valeurs différentes. Si `valeurInitiale` est fournie, `valeurPrécédente` sera alors égale à `valeurInitiale` et `valeurCourante` sera égale à la première valeur du tableau. Si le paramètre `valeurInitiale` n'est pas utilisé, `valeurPrécédente` sera égale au premier élément du tableau typé et `valeurCourante` sera égale au second élément.
+
+Si le tableau typé est vide et que le paramètre `valeurInitiale` n'a pas été fourni, une exception {{jsxref("TypeError")}} sera levée. SI le tableau typé ne possède qu'un seul élément et que `valeurInitiale` n'a pas été fourni (ou que `valeurInitiale` a été utilisée mais que le tableau typé est vide), la valeur unique sera renvoyée et `callback` ne sera pas appelée.
+
+## Exemples
+
+```js
+var total = new Uint8Array([0, 1, 2, 3]).reduce(function(a, b) {
+  return a + b;
+});
+// total == 6
+```
+
+## Spécifications
+
+| Spécification                                                                                                                | État                         | Commentaires         |
+| ---------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName('ES6', '#sec-%typedarray%.prototype.reduce', '%TypedArray%.prototype.reduce')}}     | {{Spec2('ES6')}}         | Définition initiale. |
+| {{SpecName('ESDraft', '#sec-%typedarray%.prototype.reduce', '%TypedArray%.prototype.reduce')}} | {{Spec2('ESDraft')}} |                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.TypedArray.reduce")}}
+
+## Voir aussi
+
+- {{jsxref("TypedArray.prototype.reduceRight()")}}
+- {{jsxref("Array.prototype.reduce()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/typedarray/reduceright/index.html b/files/fr/web/javascript/reference/global_objects/typedarray/reduceright/index.html
deleted file mode 100644
index 13df61f9bd..0000000000
--- a/files/fr/web/javascript/reference/global_objects/typedarray/reduceright/index.html
+++ /dev/null
@@ -1,99 +0,0 @@
----
-title: TypedArray.prototype.reduceRight()
-slug: Web/JavaScript/Reference/Global_Objects/TypedArray/reduceRight
-tags:
-  - JavaScript
-  - Méthode
-  - Prototype
-  - Reference
-  - TypedArray
-  - TypedArrays
-translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/reduceRight
-original_slug: Web/JavaScript/Reference/Objets_globaux/TypedArray/reduceRight
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <code><strong>reduceRight()</strong></code> applique une fonction sur un accumulateur et chaque valeur du tableau typé (de la droite vers la gauche) afin de réduire le tableau en une seule valeur. Cette méthode utilise le même algorithme que {{jsxref("Array.prototype.reduceRight()")}}. Dans le reste de cet article <em>TypedArray</em> correspond à un des <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/TypedArray#Les_objets_TypedArray">types de tableaux typés</a>.</p>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>typedarray</var>.reduceRight(<var>callback</var>[, <var>valeurInitiale</var>])</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>callback</code></dt>
- <dd>La fonction à exécuter sur chaque valeur du tableau typé. Elle utilise quatre arguments :
- <dl>
-  <dt><code>valeurPrécédente</code></dt>
-  <dd>La valeur renvoyée précédemment par l'appel précédent à <code>callback</code>. Dans le cadre du premier élément, ce sera <code>valeurInitiale</code> si ce paramètre est fourni (voir ci-après).</dd>
-  <dt><code>valeurCourante</code></dt>
-  <dd>L'élément du tableau typé en cours de traitement</dd>
-  <dt><code>index</code></dt>
-  <dd>L'indice de l'élément du tableau typé en cours de traitement.</dd>
-  <dt><code>array</code></dt>
-  <dd>Le tableau typé pour lequel <code>reduceRight</code> a été appelée.</dd>
- </dl>
- </dd>
- <dt><code>valeurInitiale</code></dt>
- <dd>Paramètre optionnel qui correspond à l'objet à utiliser en tant que premier argument pour le premier appel à <code>callback</code>.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>La valeur obtenue à partir de la réduction du tableau typé.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>La méthode <code>reduceRight</code> exécute la fonction <code>callback</code> une fois pour chaque élément présent dans le tableau typé (les éléments vides ou supprimés ne sont pas traités). La fonction <code>callback</code> utilise quatre arguments : la valeur initiale ou la valeur précédemment calculée, la valeur de l'élément courant, l'indice de l'élément courant et le tableau typé qui est parcouru.</p>
-
-<p>L'appel à <code>reduceRight</code> utilisant la fonction <code>callback</code> ressemble à :</p>
-
-<pre class="brush: js">typedarray.reduceRight(function(valeurPrécédente, valeurCourante, index, typedarray) {
-  // ...
-});</pre>
-
-<p>Lors du premier appel à la fonction callback, <code>valeurPrécédente</code> et <code>valeurCourante</code> peuvent être un ou deux valeurs différentes. Si <code>valeurInitiale</code> est fournie, <code>valeurPrécédente</code> sera alors égale à <code>valeurInitiale</code> et <code>valeurCourante</code> sera égale à la première valeur du tableau. Si le paramètre <code>valeurInitiale</code> n'est pas utilisé, <code>valeurPrécédente</code> sera égale au premier élément du tableau typé et <code>valeurCourante</code> sera égale au second élément.</p>
-
-<p>Si le tableau typé est vide et que le paramètre <code>valeurInitiale</code> n'a pas été fourni, une exception {{jsxref("TypeError")}} sera levée. SI le tableau typé ne possède qu'un seul élément et que <code>valeurInitiale</code> n'a pas été fourni (ou que <code>valeurInitiale</code> a été utilisée mais que le tableau typé est vide), la valeur unique sera renvoyée et <code>callback</code> ne sera pas appelée.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<pre class="brush: js">var total = new Uint8Array([0, 1, 2, 3]).reduceRight(function(a, b) {
-  return a + b;
-});
-// total == 6
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-%typedarray%.prototype.reduceRight', '%TypedArray%.prototype.reduceRight')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-%typedarray%.prototype.reduceRight', '%TypedArray%.prototype.reduceRight')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.TypedArray.reduceRight")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("TypedArray.prototype.reduce()")}}</li>
- <li>{{jsxref("Array.prototype.reduceRight()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/typedarray/reduceright/index.md b/files/fr/web/javascript/reference/global_objects/typedarray/reduceright/index.md
new file mode 100644
index 0000000000..3925756143
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/typedarray/reduceright/index.md
@@ -0,0 +1,83 @@
+---
+title: TypedArray.prototype.reduceRight()
+slug: Web/JavaScript/Reference/Global_Objects/TypedArray/reduceRight
+tags:
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - TypedArray
+  - TypedArrays
+translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/reduceRight
+original_slug: Web/JavaScript/Reference/Objets_globaux/TypedArray/reduceRight
+---
+{{JSRef}}
+
+La méthode **`reduceRight()`** applique une fonction sur un accumulateur et chaque valeur du tableau typé (de la droite vers la gauche) afin de réduire le tableau en une seule valeur. Cette méthode utilise le même algorithme que {{jsxref("Array.prototype.reduceRight()")}}. Dans le reste de cet article _TypedArray_ correspond à un des [types de tableaux typés](/fr/docs/Web/JavaScript/Reference/Objets_globaux/TypedArray#Les_objets_TypedArray).
+
+## Syntaxe
+
+    typedarray.reduceRight(callback[, valeurInitiale])
+
+### Paramètres
+
+- `callback`
+
+  - : La fonction à exécuter sur chaque valeur du tableau typé. Elle utilise quatre arguments :
+
+    - `valeurPrécédente`
+      - : La valeur renvoyée précédemment par l'appel précédent à `callback`. Dans le cadre du premier élément, ce sera `valeurInitiale` si ce paramètre est fourni (voir ci-après).
+    - `valeurCourante`
+      - : L'élément du tableau typé en cours de traitement
+    - `index`
+      - : L'indice de l'élément du tableau typé en cours de traitement.
+    - `array`
+      - : Le tableau typé pour lequel `reduceRight` a été appelée.
+
+- `valeurInitiale`
+  - : Paramètre optionnel qui correspond à l'objet à utiliser en tant que premier argument pour le premier appel à `callback`.
+
+### Valeur de retour
+
+La valeur obtenue à partir de la réduction du tableau typé.
+
+## Description
+
+La méthode `reduceRight` exécute la fonction `callback` une fois pour chaque élément présent dans le tableau typé (les éléments vides ou supprimés ne sont pas traités). La fonction `callback` utilise quatre arguments : la valeur initiale ou la valeur précédemment calculée, la valeur de l'élément courant, l'indice de l'élément courant et le tableau typé qui est parcouru.
+
+L'appel à `reduceRight` utilisant la fonction `callback` ressemble à :
+
+```js
+typedarray.reduceRight(function(valeurPrécédente, valeurCourante, index, typedarray) {
+  // ...
+});
+```
+
+Lors du premier appel à la fonction callback, `valeurPrécédente` et `valeurCourante` peuvent être un ou deux valeurs différentes. Si `valeurInitiale` est fournie, `valeurPrécédente` sera alors égale à `valeurInitiale` et `valeurCourante` sera égale à la première valeur du tableau. Si le paramètre `valeurInitiale` n'est pas utilisé, `valeurPrécédente` sera égale au premier élément du tableau typé et `valeurCourante` sera égale au second élément.
+
+Si le tableau typé est vide et que le paramètre `valeurInitiale` n'a pas été fourni, une exception {{jsxref("TypeError")}} sera levée. SI le tableau typé ne possède qu'un seul élément et que `valeurInitiale` n'a pas été fourni (ou que `valeurInitiale` a été utilisée mais que le tableau typé est vide), la valeur unique sera renvoyée et `callback` ne sera pas appelée.
+
+## Exemples
+
+```js
+var total = new Uint8Array([0, 1, 2, 3]).reduceRight(function(a, b) {
+  return a + b;
+});
+// total == 6
+```
+
+## Spécifications
+
+| Spécification                                                                                                                                | État                         | Commentaires         |
+| -------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName('ES6', '#sec-%typedarray%.prototype.reduceRight', '%TypedArray%.prototype.reduceRight')}}         | {{Spec2('ES6')}}         | Définition initiale. |
+| {{SpecName('ESDraft', '#sec-%typedarray%.prototype.reduceRight', '%TypedArray%.prototype.reduceRight')}} | {{Spec2('ESDraft')}} |                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.TypedArray.reduceRight")}}
+
+## Voir aussi
+
+- {{jsxref("TypedArray.prototype.reduce()")}}
+- {{jsxref("Array.prototype.reduceRight()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/typedarray/reverse/index.html b/files/fr/web/javascript/reference/global_objects/typedarray/reverse/index.html
deleted file mode 100644
index 66222aa510..0000000000
--- a/files/fr/web/javascript/reference/global_objects/typedarray/reverse/index.html
+++ /dev/null
@@ -1,67 +0,0 @@
----
-title: TypedArray.prototype.reverse()
-slug: Web/JavaScript/Reference/Global_Objects/TypedArray/reverse
-tags:
-  - ECMAScript 2015
-  - JavaScript
-  - Méthode
-  - Prototype
-  - Reference
-  - TypedArray
-  - TypedArrays
-translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/reverse
-original_slug: Web/JavaScript/Reference/Objets_globaux/TypedArray/reverse
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <code><strong>reverse()</strong></code> inverse les éléments d'un tableau. Le premier élément du tableau typé devient le dernier, le dernier élément devient le premier et ainsi de suite. Cette méthode utilise le même algorithme que {{jsxref("Array.prototype.reverse()")}}<em>.</em> Dans le reste de cet article <em>TypedArray</em> correspond à un des <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/TypedArray#Les_objets_TypedArray">types de tableaux typés</a>.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/typedarray-reverse.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>typedarray</var>.reverse();</pre>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Le tableau typé dont les éléments ont été inversés.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<pre class="brush: js">var uint8 = new Uint8Array([1, 2, 3]);
-uint8.reverse();
-
-console.log(uint8); // Uint8Array [3, 2, 1]
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-%typedarray%.prototype.reverse', 'TypedArray.prototype.reverse')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-%typedarray%.prototype.reverse', 'TypedArray.prototype.reverse')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.TypedArray.reverse")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Array.prototype.reverse()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/typedarray/reverse/index.md b/files/fr/web/javascript/reference/global_objects/typedarray/reverse/index.md
new file mode 100644
index 0000000000..7fe0172573
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/typedarray/reverse/index.md
@@ -0,0 +1,51 @@
+---
+title: TypedArray.prototype.reverse()
+slug: Web/JavaScript/Reference/Global_Objects/TypedArray/reverse
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - TypedArray
+  - TypedArrays
+translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/reverse
+original_slug: Web/JavaScript/Reference/Objets_globaux/TypedArray/reverse
+---
+{{JSRef}}
+
+La méthode **`reverse()`** inverse les éléments d'un tableau. Le premier élément du tableau typé devient le dernier, le dernier élément devient le premier et ainsi de suite. Cette méthode utilise le même algorithme que {{jsxref("Array.prototype.reverse()")}}_._ Dans le reste de cet article _TypedArray_ correspond à un des [types de tableaux typés](/fr/docs/Web/JavaScript/Reference/Objets_globaux/TypedArray#Les_objets_TypedArray).
+
+{{EmbedInteractiveExample("pages/js/typedarray-reverse.html")}}
+
+## Syntaxe
+
+    typedarray.reverse();
+
+### Valeur de retour
+
+Le tableau typé dont les éléments ont été inversés.
+
+## Exemples
+
+```js
+var uint8 = new Uint8Array([1, 2, 3]);
+uint8.reverse();
+
+console.log(uint8); // Uint8Array [3, 2, 1]
+```
+
+## Spécifications
+
+| Spécification                                                                                                                | État                         | Commentaires         |
+| ---------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName('ES2015', '#sec-%typedarray%.prototype.reverse', 'TypedArray.prototype.reverse')}} | {{Spec2('ES2015')}}     | Définition initiale. |
+| {{SpecName('ESDraft', '#sec-%typedarray%.prototype.reverse', 'TypedArray.prototype.reverse')}} | {{Spec2('ESDraft')}} |                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.TypedArray.reverse")}}
+
+## Voir aussi
+
+- {{jsxref("Array.prototype.reverse()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/typedarray/set/index.html b/files/fr/web/javascript/reference/global_objects/typedarray/set/index.html
deleted file mode 100644
index e66c8815da..0000000000
--- a/files/fr/web/javascript/reference/global_objects/typedarray/set/index.html
+++ /dev/null
@@ -1,94 +0,0 @@
----
-title: TypedArray.prototype.set()
-slug: Web/JavaScript/Reference/Global_Objects/TypedArray/set
-tags:
-  - JavaScript
-  - Méthode
-  - Prototype
-  - Reference
-  - TypedArray
-translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/set
-original_slug: Web/JavaScript/Reference/Objets_globaux/TypedArray/set
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <strong><code>set()</code></strong> permet d'enregistrer plusieurs valeurs dans le tableau typé à partir d'un tableau donné.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/typedarray-set.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>typedArr</var>.set(<var>tableau</var> [, <var>décalage</var>])
-<var>typedArr</var>.set(<var>tableauTypé</var> [, <var>décalage</var>])
-</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>tableau</code></dt>
- <dd>Le tableau à partir duquel on copie les valeurs. Toutes les valeurs du tableau source seront copiées dans le tableau cible sauf si la longueur du tableau cible est trop courte en fonction du décalage défini et de la longueur du tableau source : dans ce cas, un exception sera renvoyée.</dd>
- <dt><code>tableauTypé</code></dt>
- <dd>Si le tableau source est un tableau typé, il se peut que les deux tableaux partagent le même {{jsxref("ArrayBuffer")}} ; le moteur effectuera alors une copie intelligente entre le tableau source et le tableau ciblé.</dd>
- <dt><code>décalage</code> {{optional_inline}}</dt>
- <dd>Le décalage, exprimé en nombre d'éléments, à partir duquel copier les valeurs du tableau source dans le tableau cible. Si le paramètre n'est pas utilisé, la valeur par défaut sera 0 (ce qui correspond au cas où les éléments seront copiés au début du tableau).</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>{{jsxref("undefined")}}.</p>
-
-<h3 id="Exceptions">Exceptions</h3>
-
-<dl>
- <dt>{{jsxref("RangeError")}}</dt>
- <dd>Cette exception est renvoyée lorsque le <code>décalage</code> est tel que des valeurs seraient enregistrées en dehors du tableau typé.</dd>
-</dl>
-
-<h2 id="Exemples">Exemples</h2>
-
-<pre class="brush:js">var buffer = new ArrayBuffer(8);
-var uint8 = new Uint8Array(buffer);
-
-uint8.set([1, 2, 3], 3);
-
-console.log(uint8); // Uint8Array [ 0, 0, 0, 1, 2, 3, 0, 0 ]
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Typed Array')}}</td>
-   <td>{{Spec2('Typed Array')}}</td>
-   <td>Englobée avec ECMAScript 6.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-%typedarray%.prototype.set-array-offset', 'TypedArray.prototype.set')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td>Définition initiale au sein d'un standard ECMA.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-%typedarray%.prototype.set-array-offset', 'TypedArray.prototype.set')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.TypedArray.set")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/JavaScript/Tableaux_typés">Les tableaux typés en JavaScript</a></li>
- <li>{{jsxref("TypedArray")}}</li>
- <li>{{jsxref("ArrayBuffer")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/typedarray/set/index.md b/files/fr/web/javascript/reference/global_objects/typedarray/set/index.md
new file mode 100644
index 0000000000..91c4412769
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/typedarray/set/index.md
@@ -0,0 +1,69 @@
+---
+title: TypedArray.prototype.set()
+slug: Web/JavaScript/Reference/Global_Objects/TypedArray/set
+tags:
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - TypedArray
+translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/set
+original_slug: Web/JavaScript/Reference/Objets_globaux/TypedArray/set
+---
+{{JSRef}}
+
+La méthode **`set()`** permet d'enregistrer plusieurs valeurs dans le tableau typé à partir d'un tableau donné.
+
+{{EmbedInteractiveExample("pages/js/typedarray-set.html")}}
+
+## Syntaxe
+
+    typedArr.set(tableau [, décalage])
+    typedArr.set(tableauTypé [, décalage])
+
+### Paramètres
+
+- `tableau`
+  - : Le tableau à partir duquel on copie les valeurs. Toutes les valeurs du tableau source seront copiées dans le tableau cible sauf si la longueur du tableau cible est trop courte en fonction du décalage défini et de la longueur du tableau source : dans ce cas, un exception sera renvoyée.
+- `tableauTypé`
+  - : Si le tableau source est un tableau typé, il se peut que les deux tableaux partagent le même {{jsxref("ArrayBuffer")}} ; le moteur effectuera alors une copie intelligente entre le tableau source et le tableau ciblé.
+- `décalage` {{optional_inline}}
+  - : Le décalage, exprimé en nombre d'éléments, à partir duquel copier les valeurs du tableau source dans le tableau cible. Si le paramètre n'est pas utilisé, la valeur par défaut sera 0 (ce qui correspond au cas où les éléments seront copiés au début du tableau).
+
+### Valeur de retour
+
+{{jsxref("undefined")}}.
+
+### Exceptions
+
+- {{jsxref("RangeError")}}
+  - : Cette exception est renvoyée lorsque le `décalage` est tel que des valeurs seraient enregistrées en dehors du tableau typé.
+
+## Exemples
+
+```js
+var buffer = new ArrayBuffer(8);
+var uint8 = new Uint8Array(buffer);
+
+uint8.set([1, 2, 3], 3);
+
+console.log(uint8); // Uint8Array [ 0, 0, 0, 1, 2, 3, 0, 0 ]
+```
+
+## Spécifications
+
+| Spécification                                                                                                                        | État                             | Commentaires                                    |
+| ------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ----------------------------------------------- |
+| {{SpecName('Typed Array')}}                                                                                                 | {{Spec2('Typed Array')}} | Englobée avec ECMAScript 6.                     |
+| {{SpecName('ES6', '#sec-%typedarray%.prototype.set-array-offset', 'TypedArray.prototype.set')}}     | {{Spec2('ES6')}}             | Définition initiale au sein d'un standard ECMA. |
+| {{SpecName('ESDraft', '#sec-%typedarray%.prototype.set-array-offset', 'TypedArray.prototype.set')}} | {{Spec2('ESDraft')}}     |                                                 |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.TypedArray.set")}}
+
+## Voir aussi
+
+- [Les tableaux typés en JavaScript](/fr/docs/Web/JavaScript/Tableaux_typés)
+- {{jsxref("TypedArray")}}
+- {{jsxref("ArrayBuffer")}}
diff --git a/files/fr/web/javascript/reference/global_objects/typedarray/slice/index.html b/files/fr/web/javascript/reference/global_objects/typedarray/slice/index.html
deleted file mode 100644
index 14a77b759d..0000000000
--- a/files/fr/web/javascript/reference/global_objects/typedarray/slice/index.html
+++ /dev/null
@@ -1,101 +0,0 @@
----
-title: TypedArray.prototype.slice()
-slug: Web/JavaScript/Reference/Global_Objects/TypedArray/slice
-tags:
-  - ECMAScript 2015
-  - JavaScript
-  - Méthode
-  - Prototype
-  - Reference
-  - TypedArray
-  - TypedArrays
-  - polyfill
-translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/slice
-original_slug: Web/JavaScript/Reference/Objets_globaux/TypedArray/slice
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <code><strong>slice()</strong></code> renvoie une copie superficielle (shallow copy) d'un fragment du tableau typé courant dans un nouveau tableau typé. Cette méthode utilise le même algorithme que {{jsxref("Array.prototype.slice()")}}<em>.</em> <em>TypedArray</em> est utilisé par la suite de façon générique pour réprésenter l'un des <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/TypedArray#Les_objets_TypedArray">types de tableaux typés</a>.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/typedarray-slice.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>typedarr</var>ay.slice([<var>début</var>[, fin]])</pre>
-
-<h2 id="Paramètres">Paramètres</h2>
-
-<dl>
- <dt><code>début</code> {{optional_inline}}</dt>
- <dd>L'indice (compté à partir de zéro) à partir duquel commencer le fragment. Si l'indice fourni est négatif, <code>début</code> indiquera le décalage par rapport à la fin de la séquence. Par exemple, <code>slice(-2)</code> extrait les deux derniers éléments de la séquence. Par défaut, si <code>début</code> n'est pas utilisé, <code>slice()</code> commencera à partir de l'indice <code>0</code>.</dd>
- <dt><code>fin</code> {{optional_inline}}</dt>
- <dd>L'indice (compté à partir de zéro) jusqu'auquel extraire le fragment. Le fragment obtenu n'incluera pas l'élément situé à l'indice <code>fin</code>. <code>slice(1,4)</code> extrait par exemple à partir du deuxième élément et jusqu'au quatrième (c'est-à-dire les éléments dont les indices respectifs sont 1, 2, et 3). Si l'indice utilisé est négatif, <code>fin</code> indiquera le décalage par rapport à la fin de la séquence. Ainsi, <code>slice(2,-1)</code> extraira à partir du troisième élément et jusqu'à l'avant dernier élément (compris). Par défaut, si <code>fin</code> n'est pas utilisé, <code>slice()</code> extraira les éléments jusqu'à la fin de la séquence (<code>arr.length</code>).</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Un nouveau tableau typé qui contient les éléments extraits.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>La méthode <code>slice()</code> ne modifie pas le tableau typé courant, elle renvoie une copie superficielle (<em>shallow copy</em>) du tableau typé original.</p>
-
-<p>Si un nouvel élément est ajouté à l'un des deux tableaux typés, l'autre ne sera pas impacté.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<pre class="brush: js">var uint8 = new Uint8Array([1,2,3]);
-uint8.slice(1);   // Uint8Array [ 2, 3 ]
-uint8.slice(2);   // Uint8Array [ 3 ]
-uint8.slice(-2);  // Uint8Array [ 2, 3 ]
-uint8.slice(0,1); // Uint8Array [ 1 ]</pre>
-
-<h2 id="Prothèse_d'émulation_(polyfill)">Prothèse d'émulation (<em>polyfill</em>)</h2>
-
-<p>Il n'existe pas d'objet global intitulé <em>TypedArray</em>, la prothèse doit donc uniquement être employée si nécessaire :</p>
-
-<pre class="brush: js">// https://tc39.github.io/ecma262/#sec-%typedarray%.prototype.slice
-if (!Uint8Array.prototype.slice) {
-  Object.defineProperty(Uint8Array.prototype, 'slice', {
-    value: function (begin, end){
-      return new Uint8Array(Array.prototype.slice.call(this, begin, end));
-    }
-  });
-}
-</pre>
-
-<p>De plus cette prothèse n'est pas parfaite car elle renvoie une instance d'<code>Array</code> et pas de <code>Uint8Array</code>. Elle manque donc des propriétés normalement associées aux objets <code>TypedArray</code>.</p>
-
-<p>S'il faut également prendre en charge les moteurs JavaScript qui ne prennent pas en charge la méthode {{jsxref("Object.defineProperty")}}, mieux vaut ne pas ajouter de prothèse du tout pour <code>TypedArray.prototype</code> car on ne peut pas les rendre non-énumérables.</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-%typedarray%.prototype.slice', '%TypedArray%.prototype.slice')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-%typedarray%.prototype.slice', '%TypedArray%.prototype.slice')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.TypedArray.slice")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Array.prototype.slice()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/typedarray/slice/index.md b/files/fr/web/javascript/reference/global_objects/typedarray/slice/index.md
new file mode 100644
index 0000000000..6c12dce8c1
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/typedarray/slice/index.md
@@ -0,0 +1,85 @@
+---
+title: TypedArray.prototype.slice()
+slug: Web/JavaScript/Reference/Global_Objects/TypedArray/slice
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - TypedArray
+  - TypedArrays
+  - polyfill
+translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/slice
+original_slug: Web/JavaScript/Reference/Objets_globaux/TypedArray/slice
+---
+{{JSRef}}
+
+La méthode **`slice()`** renvoie une copie superficielle (shallow copy) d'un fragment du tableau typé courant dans un nouveau tableau typé. Cette méthode utilise le même algorithme que {{jsxref("Array.prototype.slice()")}}_._ _TypedArray_ est utilisé par la suite de façon générique pour réprésenter l'un des [types de tableaux typés](/fr/docs/Web/JavaScript/Reference/Objets_globaux/TypedArray#Les_objets_TypedArray).
+
+{{EmbedInteractiveExample("pages/js/typedarray-slice.html")}}
+
+## Syntaxe
+
+    typedarray.slice([début[, fin]])
+
+## Paramètres
+
+- `début` {{optional_inline}}
+  - : L'indice (compté à partir de zéro) à partir duquel commencer le fragment. Si l'indice fourni est négatif, `début` indiquera le décalage par rapport à la fin de la séquence. Par exemple, `slice(-2)` extrait les deux derniers éléments de la séquence. Par défaut, si `début` n'est pas utilisé, `slice()` commencera à partir de l'indice `0`.
+- `fin` {{optional_inline}}
+  - : L'indice (compté à partir de zéro) jusqu'auquel extraire le fragment. Le fragment obtenu n'incluera pas l'élément situé à l'indice `fin`. `slice(1,4)` extrait par exemple à partir du deuxième élément et jusqu'au quatrième (c'est-à-dire les éléments dont les indices respectifs sont 1, 2, et 3). Si l'indice utilisé est négatif, `fin` indiquera le décalage par rapport à la fin de la séquence. Ainsi, `slice(2,-1)` extraira à partir du troisième élément et jusqu'à l'avant dernier élément (compris). Par défaut, si `fin` n'est pas utilisé, `slice()` extraira les éléments jusqu'à la fin de la séquence (`arr.length`).
+
+### Valeur de retour
+
+Un nouveau tableau typé qui contient les éléments extraits.
+
+## Description
+
+La méthode `slice()` ne modifie pas le tableau typé courant, elle renvoie une copie superficielle (_shallow copy_) du tableau typé original.
+
+Si un nouvel élément est ajouté à l'un des deux tableaux typés, l'autre ne sera pas impacté.
+
+## Exemples
+
+```js
+var uint8 = new Uint8Array([1,2,3]);
+uint8.slice(1);   // Uint8Array [ 2, 3 ]
+uint8.slice(2);   // Uint8Array [ 3 ]
+uint8.slice(-2);  // Uint8Array [ 2, 3 ]
+uint8.slice(0,1); // Uint8Array [ 1 ]
+```
+
+## Prothèse d'émulation (_polyfill_)
+
+Il n'existe pas d'objet global intitulé _TypedArray_, la prothèse doit donc uniquement être employée si nécessaire :
+
+```js
+// https://tc39.github.io/ecma262/#sec-%typedarray%.prototype.slice
+if (!Uint8Array.prototype.slice) {
+  Object.defineProperty(Uint8Array.prototype, 'slice', {
+    value: function (begin, end){
+      return new Uint8Array(Array.prototype.slice.call(this, begin, end));
+    }
+  });
+}
+```
+
+De plus cette prothèse n'est pas parfaite car elle renvoie une instance d'`Array` et pas de `Uint8Array`. Elle manque donc des propriétés normalement associées aux objets `TypedArray`.
+
+S'il faut également prendre en charge les moteurs JavaScript qui ne prennent pas en charge la méthode {{jsxref("Object.defineProperty")}}, mieux vaut ne pas ajouter de prothèse du tout pour `TypedArray.prototype` car on ne peut pas les rendre non-énumérables.
+
+## Spécifications
+
+| Spécification                                                                                                                | État                         | Commentaires         |
+| ---------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName('ES2015', '#sec-%typedarray%.prototype.slice', '%TypedArray%.prototype.slice')}}     | {{Spec2('ES2015')}}     | Définition initiale. |
+| {{SpecName('ESDraft', '#sec-%typedarray%.prototype.slice', '%TypedArray%.prototype.slice')}} | {{Spec2('ESDraft')}} |                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.TypedArray.slice")}}
+
+## Voir aussi
+
+- {{jsxref("Array.prototype.slice()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/typedarray/some/index.html b/files/fr/web/javascript/reference/global_objects/typedarray/some/index.html
deleted file mode 100644
index a0ce1c602a..0000000000
--- a/files/fr/web/javascript/reference/global_objects/typedarray/some/index.html
+++ /dev/null
@@ -1,122 +0,0 @@
----
-title: TypedArray.prototype.some()
-slug: Web/JavaScript/Reference/Global_Objects/TypedArray/some
-tags:
-  - ECMAScript 2015
-  - JavaScript
-  - Méthode
-  - Prototype
-  - Reference
-  - TypedArray
-  - TypedArrays
-translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/some
-original_slug: Web/JavaScript/Reference/Objets_globaux/TypedArray/some
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <code><strong>some()</strong></code> teste si certains éléments du tableau typé remplissent une condition décrite par la fonction de test donnée. Cette méthode utilise le même algorithme que {{jsxref("Array.prototype.some()")}}<em>. </em>Dans le reste de cet article <em>TypedArray</em> correspond à un des <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/TypedArray#Les_objets_TypedArray">types de tableaux typés</a>.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/typedarray-some.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>typedarray</var>.some(<var>callback</var>[, <var>thisArg</var>])</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>callback</code></dt>
- <dd>La fonction à tester pour chaque élément. Elle prend trois arguments :
- <dl>
-  <dt><code>valeurCourante</code></dt>
-  <dd>L'élément du tableau typé en cours de traitement.</dd>
-  <dt><code>index</code></dt>
-  <dd>L'indice de l'élément du tableau typé en cours de traitement.</dd>
-  <dt><code>array</code></dt>
-  <dd>Le tableau typé sur lequel la méthode <code>some</code> a été appelée.</dd>
- </dl>
- </dd>
- <dt><code>thisArg</code></dt>
- <dd>Paramètre optionnel, la valeur à utiliser en tant que <code>this</code> lors de l'exécution de <code>callback</code>.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p><code>true</code> si la fonction de rappel renvoie une valeur équivalente à <code>true</code> pour chaque élément du tableau typé, <code>false</code> sinon.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>La méthode <code>some</code> exécute la fonction <code>callback</code> fournie pour chaque élément du tableau typé jusqu'à ce que <code>callback</code> renvoie une valeur vraie (une valeur qui vaut <code>true</code> lorsqu'elle est convertie en un booléen). Si un tel élément est trouvé, la méthode <code>some</code> renvoie immédiatement <code>true</code>. Dans le cas contraire, si <code>callback</code> renvoie une valeur fausse pour tous les éléments, la méthode <code>some</code> renverra <code>false</code>.</p>
-
-<p><code>callback</code> est appelé avec trois arguments : la valeur de l'élément, l'indice de cet élément et le tableau qui est parcouru.</p>
-
-<p>Si le paramètre <code>thisArg</code> est utilisé, il sera passé à la fonction <code>callback</code> en tant que valeur <code>this</code>. Sinon, la valeur <code>undefined</code> sera utilisée comme valeur <code>this</code>. La valeur <code>this</code> définitivement prise en compte par la fonction <code>callback</code> est déterminée selon <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_this">les règles usuelles de détermination de <code>this</code></a>.</p>
-
-<p><code>some</code> ne modifie pas le tableau typé sur lequel elle a été appelée.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Tester_la_valeur_des_éléments_d'un_tableau_typé">Tester la valeur des éléments d'un tableau typé</h3>
-
-<p>Dans l'exemple qui suit, on teste s'il existe au moins un élément du tableau typé qui est supérieur à 10.</p>
-
-<pre class="brush: js">function supérieurÀ10(élément, index, array) {
-  return élément &gt; 10;
-}
-new Uint8Array([2, 5, 8, 1, 4]).some(supérieurÀ10);  // false
-new Uint8Array([12, 5, 8, 1, 4]).some(supérieurÀ10); // true
-</pre>
-
-<h3 id="Tester_la_valeur_des_éléments_avec_les_fonctions_fléchées">Tester la valeur des éléments avec les fonctions fléchées</h3>
-
-<p><a href="/fr/docs/Web/JavaScript/Reference/Functions/Arrow_functions">Les fonctions fléchées</a> permettent d'utiliser une syntaxe plus concise pour arriver au même résultat :</p>
-
-<pre class="brush: js">new Uint8Array([2, 5, 8, 1, 4]).some(elem =&gt; elem &gt; 10); // false
-new Uint8Array([12, 5, 8, 1, 4]).some(elem =&gt; elem &gt; 10); // true</pre>
-
-<h2 id="Prothèse_d'émulation_(polyfill)">Prothèse d'émulation (<em>polyfill</em>)</h2>
-
-<p>Il n'existe pas d'objet global intitulé <em>TypedArray</em>, la prothèse doit donc uniquement être employée si nécessaire :</p>
-
-<pre class="brush: js">// https://tc39.github.io/ecma262/#sec-%typedarray%.prototype.slice
-if (!Uint8Array.prototype.some) {
-  Object.defineProperty(Uint8Array.prototype, 'some', {
-    value: Array.prototype.some
-  });
-}
-</pre>
-
-<p>S'il faut également prendre en charge les moteurs JavaScript qui ne prennent pas en charge la méthode {{jsxref("Object.defineProperty")}}, mieux vaut ne pas ajouter de prothèse du tout pour <code>TypedArray.prototype</code> car on ne peut pas les rendre non-énumérables.</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-%typedarray%.prototype.some', 'TypedArray.prototype.some')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-%typedarray%.prototype.some', 'TypedArray.prototype.some')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.TypedArray.some")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("TypedArray.prototype.every()")}}</li>
- <li>{{jsxref("Array.prototype.some()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/typedarray/some/index.md b/files/fr/web/javascript/reference/global_objects/typedarray/some/index.md
new file mode 100644
index 0000000000..2ac4e5d3f4
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/typedarray/some/index.md
@@ -0,0 +1,107 @@
+---
+title: TypedArray.prototype.some()
+slug: Web/JavaScript/Reference/Global_Objects/TypedArray/some
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - TypedArray
+  - TypedArrays
+translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/some
+original_slug: Web/JavaScript/Reference/Objets_globaux/TypedArray/some
+---
+{{JSRef}}
+
+La méthode **`some()`** teste si certains éléments du tableau typé remplissent une condition décrite par la fonction de test donnée. Cette méthode utilise le même algorithme que {{jsxref("Array.prototype.some()")}}_._ Dans le reste de cet article _TypedArray_ correspond à un des [types de tableaux typés](/fr/docs/Web/JavaScript/Reference/Objets_globaux/TypedArray#Les_objets_TypedArray).
+
+{{EmbedInteractiveExample("pages/js/typedarray-some.html")}}
+
+## Syntaxe
+
+    typedarray.some(callback[, thisArg])
+
+### Paramètres
+
+- `callback`
+
+  - : La fonction à tester pour chaque élément. Elle prend trois arguments :
+
+    - `valeurCourante`
+      - : L'élément du tableau typé en cours de traitement.
+    - `index`
+      - : L'indice de l'élément du tableau typé en cours de traitement.
+    - `array`
+      - : Le tableau typé sur lequel la méthode `some` a été appelée.
+
+- `thisArg`
+  - : Paramètre optionnel, la valeur à utiliser en tant que `this` lors de l'exécution de `callback`.
+
+### Valeur de retour
+
+`true` si la fonction de rappel renvoie une valeur équivalente à `true` pour chaque élément du tableau typé, `false` sinon.
+
+## Description
+
+La méthode `some` exécute la fonction `callback` fournie pour chaque élément du tableau typé jusqu'à ce que `callback` renvoie une valeur vraie (une valeur qui vaut `true` lorsqu'elle est convertie en un booléen). Si un tel élément est trouvé, la méthode `some` renvoie immédiatement `true`. Dans le cas contraire, si `callback` renvoie une valeur fausse pour tous les éléments, la méthode `some` renverra `false`.
+
+`callback` est appelé avec trois arguments : la valeur de l'élément, l'indice de cet élément et le tableau qui est parcouru.
+
+Si le paramètre `thisArg` est utilisé, il sera passé à la fonction `callback` en tant que valeur `this`. Sinon, la valeur `undefined` sera utilisée comme valeur `this`. La valeur `this` définitivement prise en compte par la fonction `callback` est déterminée selon [les règles usuelles de détermination de `this`](/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_this).
+
+`some` ne modifie pas le tableau typé sur lequel elle a été appelée.
+
+## Exemples
+
+### Tester la valeur des éléments d'un tableau typé
+
+Dans l'exemple qui suit, on teste s'il existe au moins un élément du tableau typé qui est supérieur à 10.
+
+```js
+function supérieurÀ10(élément, index, array) {
+  return élément > 10;
+}
+new Uint8Array([2, 5, 8, 1, 4]).some(supérieurÀ10);  // false
+new Uint8Array([12, 5, 8, 1, 4]).some(supérieurÀ10); // true
+```
+
+### Tester la valeur des éléments avec les fonctions fléchées
+
+[Les fonctions fléchées](/fr/docs/Web/JavaScript/Reference/Functions/Arrow_functions) permettent d'utiliser une syntaxe plus concise pour arriver au même résultat :
+
+```js
+new Uint8Array([2, 5, 8, 1, 4]).some(elem => elem > 10); // false
+new Uint8Array([12, 5, 8, 1, 4]).some(elem => elem > 10); // true
+```
+
+## Prothèse d'émulation (_polyfill_)
+
+Il n'existe pas d'objet global intitulé _TypedArray_, la prothèse doit donc uniquement être employée si nécessaire :
+
+```js
+// https://tc39.github.io/ecma262/#sec-%typedarray%.prototype.slice
+if (!Uint8Array.prototype.some) {
+  Object.defineProperty(Uint8Array.prototype, 'some', {
+    value: Array.prototype.some
+  });
+}
+```
+
+S'il faut également prendre en charge les moteurs JavaScript qui ne prennent pas en charge la méthode {{jsxref("Object.defineProperty")}}, mieux vaut ne pas ajouter de prothèse du tout pour `TypedArray.prototype` car on ne peut pas les rendre non-énumérables.
+
+## Spécifications
+
+| Spécification                                                                                                        | État                         | Commentaires         |
+| -------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName('ES2015', '#sec-%typedarray%.prototype.some', 'TypedArray.prototype.some')}} | {{Spec2('ES2015')}}     | Définition initiale. |
+| {{SpecName('ESDraft', '#sec-%typedarray%.prototype.some', 'TypedArray.prototype.some')}} | {{Spec2('ESDraft')}} |                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.TypedArray.some")}}
+
+## Voir aussi
+
+- {{jsxref("TypedArray.prototype.every()")}}
+- {{jsxref("Array.prototype.some()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/typedarray/sort/index.html b/files/fr/web/javascript/reference/global_objects/typedarray/sort/index.html
deleted file mode 100644
index ed4f466418..0000000000
--- a/files/fr/web/javascript/reference/global_objects/typedarray/sort/index.html
+++ /dev/null
@@ -1,89 +0,0 @@
----
-title: TypedArray.prototype.sort()
-slug: Web/JavaScript/Reference/Global_Objects/TypedArray/sort
-tags:
-  - ECMAScript 2015
-  - JavaScript
-  - Méthode
-  - Prototype
-  - Reference
-  - TypedArray
-  - TypedArrays
-translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/sort
-original_slug: Web/JavaScript/Reference/Objets_globaux/TypedArray/sort
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <code><strong>sort()</strong></code> permet de trier numériquement les éléments d'un tableau typé, à même ce tableau. Cette méthode utilise le même algorithme que {{jsxref("Array.prototype.sort()")}} en triant les valeurs par ordre numérique plutôt que par ordre lexicographique<em>.</em> Par la suite, <em>TypedArray</em> désigne l'un des <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/TypedArray#Les_objets_TypedArray">types de tableau typé</a> here.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/typedarray-sort.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>typedarray</var>.sort([<var>fonctionComparaison</var>])</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>fonctionComparaison</code> {{optional_inline}}</dt>
- <dd>Cette fonction définit l'ordre de tri à appliquer.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Le tableau typé trié.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<p>Pour plus d'exemples, voir la page sur la méthode {{jsxref("Array.prototype.sort()")}}.</p>
-
-<pre class="brush: js">var nombres = new Uint8Array([40, 1, 5, 200]);
-nombres.sort();
-// Uint8Array [ 1, 5, 40, 200 ]
-// Contrairement aux tableaux classiques (Array), une fonction
-// de comparaison n'est pas nécessaire pour les nombres
-
-var nombres2 = [40, 1, 5, 200];
-nombres2.sort();
-// Les éléments d'un tableau classique sont triés comme des chaînes
-// [1, 200, 40, 5]
-
-function comparaisonNombres(a, b) {
-  return a - b;
-}
-
-nombres.sort(comparaisonNombres);
-// [ 1, 5, 40, 200 ]
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-%typedarray%.prototype.sort', 'TypedArray.prototype.sort')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-%typedarray%.prototype.sort', 'TypedArray.prototype.sort')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.TypedArray.sort")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Array.prototype.sort()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/typedarray/sort/index.md b/files/fr/web/javascript/reference/global_objects/typedarray/sort/index.md
new file mode 100644
index 0000000000..816d1cb388
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/typedarray/sort/index.md
@@ -0,0 +1,71 @@
+---
+title: TypedArray.prototype.sort()
+slug: Web/JavaScript/Reference/Global_Objects/TypedArray/sort
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - TypedArray
+  - TypedArrays
+translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/sort
+original_slug: Web/JavaScript/Reference/Objets_globaux/TypedArray/sort
+---
+{{JSRef}}
+
+La méthode **`sort()`** permet de trier numériquement les éléments d'un tableau typé, à même ce tableau. Cette méthode utilise le même algorithme que {{jsxref("Array.prototype.sort()")}} en triant les valeurs par ordre numérique plutôt que par ordre lexicographique*.* Par la suite, _TypedArray_ désigne l'un des [types de tableau typé](/fr/docs/Web/JavaScript/Reference/Objets_globaux/TypedArray#Les_objets_TypedArray) here.
+
+{{EmbedInteractiveExample("pages/js/typedarray-sort.html")}}
+
+## Syntaxe
+
+    typedarray.sort([fonctionComparaison])
+
+### Paramètres
+
+- `fonctionComparaison` {{optional_inline}}
+  - : Cette fonction définit l'ordre de tri à appliquer.
+
+### Valeur de retour
+
+Le tableau typé trié.
+
+## Exemples
+
+Pour plus d'exemples, voir la page sur la méthode {{jsxref("Array.prototype.sort()")}}.
+
+```js
+var nombres = new Uint8Array([40, 1, 5, 200]);
+nombres.sort();
+// Uint8Array [ 1, 5, 40, 200 ]
+// Contrairement aux tableaux classiques (Array), une fonction
+// de comparaison n'est pas nécessaire pour les nombres
+
+var nombres2 = [40, 1, 5, 200];
+nombres2.sort();
+// Les éléments d'un tableau classique sont triés comme des chaînes
+// [1, 200, 40, 5]
+
+function comparaisonNombres(a, b) {
+  return a - b;
+}
+
+nombres.sort(comparaisonNombres);
+// [ 1, 5, 40, 200 ]
+```
+
+## Spécifications
+
+| Spécification                                                                                                        | État                         | Commentaires         |
+| -------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName('ES2015', '#sec-%typedarray%.prototype.sort', 'TypedArray.prototype.sort')}} | {{Spec2('ES2015')}}     | Définition initiale. |
+| {{SpecName('ESDraft', '#sec-%typedarray%.prototype.sort', 'TypedArray.prototype.sort')}} | {{Spec2('ESDraft')}} |                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.TypedArray.sort")}}
+
+## Voir aussi
+
+- {{jsxref("Array.prototype.sort()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/typedarray/subarray/index.html b/files/fr/web/javascript/reference/global_objects/typedarray/subarray/index.html
deleted file mode 100644
index 7e7d20243d..0000000000
--- a/files/fr/web/javascript/reference/global_objects/typedarray/subarray/index.html
+++ /dev/null
@@ -1,93 +0,0 @@
----
-title: TypedArray.prototype.subarray()
-slug: Web/JavaScript/Reference/Global_Objects/TypedArray/subarray
-tags:
-  - JavaScript
-  - Méthode
-  - Prototype
-  - Reference
-  - TypedArray
-translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/subarray
-original_slug: Web/JavaScript/Reference/Objets_globaux/TypedArray/subarray
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <code>subarray()</code> permet de renvoyer un nouvel objet <em>TypedArray</em> basé sur le même {{jsxref("ArrayBuffer")}} et dont les éléments sont du même type que l'objet <em>TypedArray</em> courant. Le paramètre <code>début</code> est à considérer au sens large et le paramètre <code>end</code> est à considérer au sens strict. <em>TypedArray</em> est l'un des types de <a href="/fr/docs/Web/JavaScript/Tableaux_typés#Les_objets_TypedArray">tableaux typés</a>.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/typedarray-subarray.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>typedarr</var>ay.subarray([début[,fin]])
-</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>début</code>{{optional_inline}}</dt>
- <dd>L'élément à partir duquel commencer le nouveau tableau typé. Cet élément initial sera inclus dans le nouveau tableau (sens large). Si la valeur n'est pas définie, tout le tableau sera inclus dans la nouvelle vue.</dd>
- <dt><code>fin</code>{{optional_inline}}</dt>
- <dd>L'élément auquel finir le nouveau tableau typé. Cet élément ne fera pas partie du nouveau tableau (sens strict). Si ce paramètre n'est pas utilisé, tous les éléments contenus à partir de <code>début</code> jusqu'à la fin du tableau courant seront inclus dans la nouvelle vue.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Un nouvel objet {{jsxref("TypedArray")}}.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>L'intervalle défini par <code>début</code> et <code>fin</code> est redimensionné si besoin pour être un intervalle valide en regard du tableau courant. Si la longueur du nouveau tableau est négative, elle est ramenée à zéro. Si <code>début </code>ou <code>fin </code>a une valeur négative, on prendra en compte la position à partir de la fin du tableau et non à partir du début de celui-ci.</p>
-
-<p>On notera que cette méthode permet de créer un nouvelle vue sur le tampon (<em>buffer</em>) existant, tous les changements apportés via le nouvel objet impacteront le tableau typé initial et vice versa.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<pre class="brush:js">var buffer = new ArrayBuffer(8);
-var uint8 = new Uint8Array(buffer);
-uint8.set([1,2,3]);
-
-console.log(uint8); // Uint8Array [ 1, 2, 3, 0, 0, 0, 0, 0 ]
-
-var sub = uint8.subarray(0,4);
-
-console.log(sub);   // Uint8Array [ 1, 2, 3, 0 ]
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Typed Array')}}</td>
-   <td>{{Spec2('Typed Array')}}</td>
-   <td>Remplacée par ECMAScript 6.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-%typedarray%.prototype.subarray', 'TypedArray.prototype.subarray')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td>Définition initiale au sein d'un standard ECMA.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-%typedarray%.prototype.subarray', 'TypedArray.prototype.subarray')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.TypedArray.subarray")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/JavaScript/Tableaux_typés">Les tableaux typés JavaScript</a></li>
- <li>{{jsxref("TypedArray")}}</li>
- <li>{{jsxref("ArrayBuffer")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/typedarray/subarray/index.md b/files/fr/web/javascript/reference/global_objects/typedarray/subarray/index.md
new file mode 100644
index 0000000000..bb82c9a1a2
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/typedarray/subarray/index.md
@@ -0,0 +1,70 @@
+---
+title: TypedArray.prototype.subarray()
+slug: Web/JavaScript/Reference/Global_Objects/TypedArray/subarray
+tags:
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - TypedArray
+translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/subarray
+original_slug: Web/JavaScript/Reference/Objets_globaux/TypedArray/subarray
+---
+{{JSRef}}
+
+La méthode `subarray()` permet de renvoyer un nouvel objet _TypedArray_ basé sur le même {{jsxref("ArrayBuffer")}} et dont les éléments sont du même type que l'objet _TypedArray_ courant. Le paramètre `début` est à considérer au sens large et le paramètre `end` est à considérer au sens strict. _TypedArray_ est l'un des types de [tableaux typés](/fr/docs/Web/JavaScript/Tableaux_typés#Les_objets_TypedArray).
+
+{{EmbedInteractiveExample("pages/js/typedarray-subarray.html")}}
+
+## Syntaxe
+
+    typedarray.subarray([début[,fin]])
+
+### Paramètres
+
+- `début`{{optional_inline}}
+  - : L'élément à partir duquel commencer le nouveau tableau typé. Cet élément initial sera inclus dans le nouveau tableau (sens large). Si la valeur n'est pas définie, tout le tableau sera inclus dans la nouvelle vue.
+- `fin`{{optional_inline}}
+  - : L'élément auquel finir le nouveau tableau typé. Cet élément ne fera pas partie du nouveau tableau (sens strict). Si ce paramètre n'est pas utilisé, tous les éléments contenus à partir de `début` jusqu'à la fin du tableau courant seront inclus dans la nouvelle vue.
+
+### Valeur de retour
+
+Un nouvel objet {{jsxref("TypedArray")}}.
+
+## Description
+
+L'intervalle défini par `début` et `fin` est redimensionné si besoin pour être un intervalle valide en regard du tableau courant. Si la longueur du nouveau tableau est négative, elle est ramenée à zéro. Si `début `ou `fin `a une valeur négative, on prendra en compte la position à partir de la fin du tableau et non à partir du début de celui-ci.
+
+On notera que cette méthode permet de créer un nouvelle vue sur le tampon (_buffer_) existant, tous les changements apportés via le nouvel objet impacteront le tableau typé initial et vice versa.
+
+## Exemples
+
+```js
+var buffer = new ArrayBuffer(8);
+var uint8 = new Uint8Array(buffer);
+uint8.set([1,2,3]);
+
+console.log(uint8); // Uint8Array [ 1, 2, 3, 0, 0, 0, 0, 0 ]
+
+var sub = uint8.subarray(0,4);
+
+console.log(sub);   // Uint8Array [ 1, 2, 3, 0 ]
+```
+
+## Spécifications
+
+| Spécification                                                                                                                    | État                             | Commentaires                                    |
+| -------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------------------------------------------- |
+| {{SpecName('Typed Array')}}                                                                                             | {{Spec2('Typed Array')}} | Remplacée par ECMAScript 6.                     |
+| {{SpecName('ES6', '#sec-%typedarray%.prototype.subarray', 'TypedArray.prototype.subarray')}}     | {{Spec2('ES6')}}             | Définition initiale au sein d'un standard ECMA. |
+| {{SpecName('ESDraft', '#sec-%typedarray%.prototype.subarray', 'TypedArray.prototype.subarray')}} | {{Spec2('ESDraft')}}     |                                                 |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.TypedArray.subarray")}}
+
+## Voir aussi
+
+- [Les tableaux typés JavaScript](/fr/docs/Web/JavaScript/Tableaux_typés)
+- {{jsxref("TypedArray")}}
+- {{jsxref("ArrayBuffer")}}
diff --git a/files/fr/web/javascript/reference/global_objects/typedarray/tolocalestring/index.html b/files/fr/web/javascript/reference/global_objects/typedarray/tolocalestring/index.html
deleted file mode 100644
index b7eab6f284..0000000000
--- a/files/fr/web/javascript/reference/global_objects/typedarray/tolocalestring/index.html
+++ /dev/null
@@ -1,77 +0,0 @@
----
-title: TypedArray.prototype.toLocaleString()
-slug: Web/JavaScript/Reference/Global_Objects/TypedArray/toLocaleString
-tags:
-  - ECMAScript 2015
-  - JavaScript
-  - Méthode
-  - Prototype
-  - Reference
-  - TypedArray
-  - TypedArrays
-translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/toLocaleString
-original_slug: Web/JavaScript/Reference/Objets_globaux/TypedArray/toLocaleString
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <code><strong>toLocaleString()</strong></code> renvoie une chaîne de caractères uqi représente les éléments du tableau typé. Les éléments sont convertis en chaînes de caractères et séparés par une chaîne de caractères qui est fonction de la locale (la virgule « , » par exemple). Cette méthode utilise le même algorithme que {{jsxref("Array.prototype.toLocaleString()")}} et vu que les éléments d'un tableau typé sont des nombres, elle utilise le même algorithme que {{jsxref("Number.prototype.toLocaleString()")}} pour chaque élément. Dans la suite de cet article, <em>TypedArray</em> fait référence à <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/TypedArray#Les_objets_TypedArray">l'un des types de tableau typé listés ici</a>.</p>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>typedarr</var>ay.toLocaleString([locales [, options]]);</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<div>{{page('/fr/docs/Web/JavaScript/Référence/Objets_globaux/NumberFormat', 'Paramètres')}}</div>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Une chaîne de caractères qui représente les éléments du tableau typé.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<pre class="brush: js">var uint = new Uint32Array([2000, 500, 8123, 12, 4212]);
-
-uint.toLocaleString();
-// Si on utilise la locale de-DE
-// "2.000,500,8.123,12,4.212"
-
-uint.toLocaleString("en-US");
-// "2,000,500,8,123,12,4,212"
-
-uint.toLocaleString('ja-JP', { style: 'currency', currency: 'JPY' });
-// "￥2,000,￥500,￥8,123,￥12,￥4,212"
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-%typedarray%.prototype.tolocalestring', 'TypedArray.prototype.toLocaleString')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-%typedarray%.prototype.tolocalestring', 'TypedArray.prototype.toLocaleString')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.TypedArray.toLocaleString")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Array.prototype.toLocaleString()")}}</li>
- <li>{{jsxref("Number.prototype.toLocaleString()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/typedarray/tolocalestring/index.md b/files/fr/web/javascript/reference/global_objects/typedarray/tolocalestring/index.md
new file mode 100644
index 0000000000..683c501395
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/typedarray/tolocalestring/index.md
@@ -0,0 +1,61 @@
+---
+title: TypedArray.prototype.toLocaleString()
+slug: Web/JavaScript/Reference/Global_Objects/TypedArray/toLocaleString
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - TypedArray
+  - TypedArrays
+translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/toLocaleString
+original_slug: Web/JavaScript/Reference/Objets_globaux/TypedArray/toLocaleString
+---
+{{JSRef}}
+
+La méthode **`toLocaleString()`** renvoie une chaîne de caractères uqi représente les éléments du tableau typé. Les éléments sont convertis en chaînes de caractères et séparés par une chaîne de caractères qui est fonction de la locale (la virgule « , » par exemple). Cette méthode utilise le même algorithme que {{jsxref("Array.prototype.toLocaleString()")}} et vu que les éléments d'un tableau typé sont des nombres, elle utilise le même algorithme que {{jsxref("Number.prototype.toLocaleString()")}} pour chaque élément. Dans la suite de cet article, _TypedArray_ fait référence à [l'un des types de tableau typé listés ici](/fr/docs/Web/JavaScript/Reference/Objets_globaux/TypedArray#Les_objets_TypedArray).
+
+## Syntaxe
+
+    typedarray.toLocaleString([locales [, options]]);
+
+### Paramètres
+
+{{page('/fr/docs/Web/JavaScript/Référence/Objets_globaux/NumberFormat', 'Paramètres')}}
+
+### Valeur de retour
+
+Une chaîne de caractères qui représente les éléments du tableau typé.
+
+## Exemples
+
+```js
+var uint = new Uint32Array([2000, 500, 8123, 12, 4212]);
+
+uint.toLocaleString();
+// Si on utilise la locale de-DE
+// "2.000,500,8.123,12,4.212"
+
+uint.toLocaleString("en-US");
+// "2,000,500,8,123,12,4,212"
+
+uint.toLocaleString('ja-JP', { style: 'currency', currency: 'JPY' });
+// "￥2,000,￥500,￥8,123,￥12,￥4,212"
+```
+
+## Spécifications
+
+| Spécification                                                                                                                                    | État                         | Commentaires         |
+| ------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------- | -------------------- |
+| {{SpecName('ES2015', '#sec-%typedarray%.prototype.tolocalestring', 'TypedArray.prototype.toLocaleString')}} | {{Spec2('ES2015')}}     | Définition initiale. |
+| {{SpecName('ESDraft', '#sec-%typedarray%.prototype.tolocalestring', 'TypedArray.prototype.toLocaleString')}} | {{Spec2('ESDraft')}} |                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.TypedArray.toLocaleString")}}
+
+## Voir aussi
+
+- {{jsxref("Array.prototype.toLocaleString()")}}
+- {{jsxref("Number.prototype.toLocaleString()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/typedarray/tostring/index.html b/files/fr/web/javascript/reference/global_objects/typedarray/tostring/index.html
deleted file mode 100644
index 860990180c..0000000000
--- a/files/fr/web/javascript/reference/global_objects/typedarray/tostring/index.html
+++ /dev/null
@@ -1,76 +0,0 @@
----
-title: TypedArray.prototype.toString()
-slug: Web/JavaScript/Reference/Global_Objects/TypedArray/toString
-tags:
-  - ECMAScript 2015
-  - JavaScript
-  - Méthode
-  - Prototype
-  - Reference
-  - TypedArray
-translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/toString
-original_slug: Web/JavaScript/Reference/Objets_globaux/TypedArray/toString
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <code><strong>toString()</strong></code> renvoie une chaîne de caractères qui représente le tableau typé et ses éléments. Cette méthode utilise le même algorithme que {{jsxref("Array.prototype.toString()")}}<em>.</em> Dans la suite de cet article, <em>TypedArray</em> fait référence à <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/TypedArray#Les_objets_TypedArray">l'un des types de tableau typé listés ici</a>.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/typedarray-tostring.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>typedarray</var>.toString()</pre>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Une chaîne de caractères qui représente les éléments du tableau typé.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>Les objets {{jsxref("TypedArray")}} surchargent la méthode <code>toString</code> de {{jsxref("Object")}}. Pour les objets <code>TypedArray</code>, la méthode <code>toString</code> fusionne le tableau et renovoie une chaîne de caractères contenant les éléments du tableau, chacun séparés par une virgule. Par exemple :</p>
-
-<pre class="brush: js">var numbers = new Uint8Array([2, 5, 8, 1, 4])
-numbers.toString(); // "2,5,8,1,4"
-</pre>
-
-<p>JavaScript appelle automatiquement la méthode <code>toString()</code> lorsqu'un tableau typé doit être manipulé sous une forme textuelle (par exemple lorsqu'il est utilisé avec une chaîne de caractères dans une concaténation).</p>
-
-<h3 id="Compatibilité">Compatibilité</h3>
-
-<p>Si un navigateur ne prend pas encore en charge la méthode <code>TypedArray.prototype.toString()</code>, le moteur JavaScript utilisera la méthode <code>toString</code> rattachée à {{jsxref("Object")}} :</p>
-
-<pre class="brush: js">var numbers = new Uint8Array([2, 5, 8, 1, 4])
-numbers.toString(); // "[object Uint8Array]"
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-%typedarray%.prototype.tostring', 'TypedArray.prototype.toString')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-%typedarray%.prototype.tostring', 'Array.prototype.toString')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.TypedArray.toString")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("TypedArray.prototype.join()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/typedarray/tostring/index.md b/files/fr/web/javascript/reference/global_objects/typedarray/tostring/index.md
new file mode 100644
index 0000000000..aa522a3cfd
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/typedarray/tostring/index.md
@@ -0,0 +1,61 @@
+---
+title: TypedArray.prototype.toString()
+slug: Web/JavaScript/Reference/Global_Objects/TypedArray/toString
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - TypedArray
+translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/toString
+original_slug: Web/JavaScript/Reference/Objets_globaux/TypedArray/toString
+---
+{{JSRef}}
+
+La méthode **`toString()`** renvoie une chaîne de caractères qui représente le tableau typé et ses éléments. Cette méthode utilise le même algorithme que {{jsxref("Array.prototype.toString()")}}_._ Dans la suite de cet article, _TypedArray_ fait référence à [l'un des types de tableau typé listés ici](/fr/docs/Web/JavaScript/Reference/Objets_globaux/TypedArray#Les_objets_TypedArray).
+
+{{EmbedInteractiveExample("pages/js/typedarray-tostring.html")}}
+
+## Syntaxe
+
+    typedarray.toString()
+
+### Valeur de retour
+
+Une chaîne de caractères qui représente les éléments du tableau typé.
+
+## Description
+
+Les objets {{jsxref("TypedArray")}} surchargent la méthode `toString` de {{jsxref("Object")}}. Pour les objets `TypedArray`, la méthode `toString` fusionne le tableau et renovoie une chaîne de caractères contenant les éléments du tableau, chacun séparés par une virgule. Par exemple :
+
+```js
+var numbers = new Uint8Array([2, 5, 8, 1, 4])
+numbers.toString(); // "2,5,8,1,4"
+```
+
+JavaScript appelle automatiquement la méthode `toString()` lorsqu'un tableau typé doit être manipulé sous une forme textuelle (par exemple lorsqu'il est utilisé avec une chaîne de caractères dans une concaténation).
+
+### Compatibilité
+
+Si un navigateur ne prend pas encore en charge la méthode `TypedArray.prototype.toString()`, le moteur JavaScript utilisera la méthode `toString` rattachée à {{jsxref("Object")}} :
+
+```js
+var numbers = new Uint8Array([2, 5, 8, 1, 4])
+numbers.toString(); // "[object Uint8Array]"
+```
+
+## Spécifications
+
+| Spécification                                                                                                                    | État                         | Commentaires         |
+| -------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName('ES2015', '#sec-%typedarray%.prototype.tostring', 'TypedArray.prototype.toString')}} | {{Spec2('ES2015')}}     | Définition initiale. |
+| {{SpecName('ESDraft', '#sec-%typedarray%.prototype.tostring', 'Array.prototype.toString')}}         | {{Spec2('ESDraft')}} |                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.TypedArray.toString")}}
+
+## Voir aussi
+
+- {{jsxref("TypedArray.prototype.join()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/typedarray/values/index.html b/files/fr/web/javascript/reference/global_objects/typedarray/values/index.html
deleted file mode 100644
index 202b7278a6..0000000000
--- a/files/fr/web/javascript/reference/global_objects/typedarray/values/index.html
+++ /dev/null
@@ -1,89 +0,0 @@
----
-title: TypedArray.prototype.values()
-slug: Web/JavaScript/Reference/Global_Objects/TypedArray/values
-tags:
-  - ECMAScript 2015
-  - Iterator
-  - JavaScript
-  - Méthode
-  - Prototype
-  - Reference
-  - TypedArray
-  - TypedArrays
-translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/values
-original_slug: Web/JavaScript/Reference/Objets_globaux/TypedArray/values
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <strong><code>values()</code></strong> renvoie un nouvel objet <code>Array Iterator</code> qui contient les valeurs pour chaque indice du tableau.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/typedarray-values.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>typedArr</var>.values()</pre>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Un nouvel objet <code>Array Iterator</code>.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Parcourir_le_tableau_typé_avec_for...of">Parcourir le tableau typé avec <code>for...of</code></h3>
-
-<pre class="brush: js">var arr = new Uint8Array([10, 20, 30, 40, 50]);
-var eArray = arr.values();
-// prérequis : le navigateur doit supporter les boucles
-// for..of et les variables dont la portée est définie
-// par let
-for (let n of eArray) {
-  console.log(n);
-}
-</pre>
-
-<h3 id="Une_autre_méthode_d'itération">Une autre méthode d'itération</h3>
-
-<pre class="brush: js">var arr = new Uint8Array([10, 20, 30, 40, 50]);
-var eArr = arr.values();
-console.log(eArr.next().value); // 10
-console.log(eArr.next().value); // 20
-console.log(eArr.next().value); // 30
-console.log(eArr.next().value); // 40
-console.log(eArr.next().value); // 50
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-%typedarray%.prototype.values', '%TypedArray%.prototype.values()')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-%typedarray%.prototype.values', '%TypedArray%.prototype.values()')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.TypedArray.values")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/JavaScript/Tableaux_typés">Les tableaux typés en JavaScript</a></li>
- <li>{{jsxref("TypedArray")}}</li>
- <li>{{jsxref("TypedArray.prototype.entries()")}}</li>
- <li>{{jsxref("TypedArray.prototype.keys()")}}</li>
- <li>{{jsxref("TypedArray.prototype.@@iterator()", "TypedArray.prototype[@@iterator]()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/typedarray/values/index.md b/files/fr/web/javascript/reference/global_objects/typedarray/values/index.md
new file mode 100644
index 0000000000..de4ab82e80
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/typedarray/values/index.md
@@ -0,0 +1,74 @@
+---
+title: TypedArray.prototype.values()
+slug: Web/JavaScript/Reference/Global_Objects/TypedArray/values
+tags:
+  - ECMAScript 2015
+  - Iterator
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - TypedArray
+  - TypedArrays
+translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/values
+original_slug: Web/JavaScript/Reference/Objets_globaux/TypedArray/values
+---
+{{JSRef}}
+
+La méthode **`values()`** renvoie un nouvel objet `Array Iterator` qui contient les valeurs pour chaque indice du tableau.
+
+{{EmbedInteractiveExample("pages/js/typedarray-values.html")}}
+
+## Syntaxe
+
+    typedArr.values()
+
+### Valeur de retour
+
+Un nouvel objet `Array Iterator`.
+
+## Exemples
+
+### Parcourir le tableau typé avec `for...of`
+
+```js
+var arr = new Uint8Array([10, 20, 30, 40, 50]);
+var eArray = arr.values();
+// prérequis : le navigateur doit supporter les boucles
+// for..of et les variables dont la portée est définie
+// par let
+for (let n of eArray) {
+  console.log(n);
+}
+```
+
+### Une autre méthode d'itération
+
+```js
+var arr = new Uint8Array([10, 20, 30, 40, 50]);
+var eArr = arr.values();
+console.log(eArr.next().value); // 10
+console.log(eArr.next().value); // 20
+console.log(eArr.next().value); // 30
+console.log(eArr.next().value); // 40
+console.log(eArr.next().value); // 50
+```
+
+## Spécifications
+
+| Spécification                                                                                                                    | État                         | Commentaires         |
+| -------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName('ES2015', '#sec-%typedarray%.prototype.values', '%TypedArray%.prototype.values()')}} | {{Spec2('ES2015')}}     | Définition initiale. |
+| {{SpecName('ESDraft', '#sec-%typedarray%.prototype.values', '%TypedArray%.prototype.values()')}} | {{Spec2('ESDraft')}} |                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.TypedArray.values")}}
+
+## Voir aussi
+
+- [Les tableaux typés en JavaScript](/fr/docs/Web/JavaScript/Tableaux_typés)
+- {{jsxref("TypedArray")}}
+- {{jsxref("TypedArray.prototype.entries()")}}
+- {{jsxref("TypedArray.prototype.keys()")}}
+- {{jsxref("TypedArray.prototype.@@iterator()", "TypedArray.prototype[@@iterator]()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/typeerror/index.html b/files/fr/web/javascript/reference/global_objects/typeerror/index.html
deleted file mode 100644
index 16ae2f8e1b..0000000000
--- a/files/fr/web/javascript/reference/global_objects/typeerror/index.html
+++ /dev/null
@@ -1,130 +0,0 @@
----
-title: TypeError
-slug: Web/JavaScript/Reference/Global_Objects/TypeError
-tags:
-  - Error
-  - JavaScript
-  - Object
-  - Reference
-  - TypeError
-translation_of: Web/JavaScript/Reference/Global_Objects/TypeError
-original_slug: Web/JavaScript/Reference/Objets_globaux/TypeError
----
-<div>{{JSRef}}</div>
-
-<p>L'objet <code><strong>TypeError</strong></code> représente une erreur qui intervient lorsque la valeur n'est pas du type attendu.</p>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><code>new TypeError([<var>message</var>[, <var>nomFichier</var>[, <var>numLigne</var>]]])</code></pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>message</code></dt>
- <dd>Paramètre optionnel. Une description de l'erreur dans un format compréhensible par un humain.</dd>
- <dt><code>nomFichier</code> {{Non-standard_inline}}</dt>
- <dd>Paramètre optionnel. Le nom du fichier contenant le code qui a causé l'erreur.</dd>
- <dt><code>numLigne</code> {{Non-standard_inline}}</dt>
- <dd>Paramètre optionnel. Le numéro de ligne du code qui a causé l'erreur</dd>
-</dl>
-
-<h2 id="Description">Description</h2>
-
-<p>Une exception <code>TypeError</code> est levée lorsque qu'un argument ou un opérande est utilisé avec une fonction ou un opérateur incompatible avec le type attendu.</p>
-
-<h2 id="Propriétés">Propriétés</h2>
-
-<dl>
- <dt>{{jsxref("TypeError.prototype")}}</dt>
- <dd>Permet d'ajouter des propriétés aux instances de <code>TypeError</code>.</dd>
-</dl>
-
-<h2 id="Méthodes">Méthodes</h2>
-
-<p>L'objet global <code>TypeError</code> ne contient pas de méthodes qui lui sont propres. Il possède malgré tout des méthodes héritées via sa chaîne de prototypes.</p>
-
-<h2 id="Instances_de_TypeError">Instances de TypeError</h2>
-
-<h3 id="Propriétés_2">Propriétés</h3>
-
-<p>{{ page('fr/docs/Web/JavaScript/Reference/Objets_globaux/TypeError/prototype', 'Propri.C3.A9t.C3.A9s') }}</p>
-
-<h3 id="Méthodes_2">Méthodes</h3>
-
-<p>{{ page('fr/docs/Web/JavaScript/Reference/Objets_globaux/TypeError/prototype', 'M.C3.A9thodes') }}</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Intercepter_une_exception_TypeError">Intercepter une exception <code>TypeError</code></h3>
-
-<pre class="brush: js">try {
-  null.f();
-} catch (e) {
-  console.log(e instanceof TypeError); // true
-  console.log(e.message);              // "null has no properties"
-  console.log(e.name);                 // "TypeError"
-  console.log(e.fileName);             // "Scratchpad/1"
-  console.log(e.lineNumber);           // 2
-  console.log(e.columnNumber);         // 2
-  console.log(e.stack);                // "@Scratchpad/2:2:3\n"
-}
-</pre>
-
-<h3 id="Créer_une_exception_TypeError">Créer une exception <code>TypeError</code></h3>
-
-<pre class="brush: js">try {
-  throw new TypeError('Coucou', "unFichier.js", 10);
-} catch (e) {
-  console.log(e instanceof TypeError); // true
-  console.log(e.message);              // "Coucou"
-  console.log(e.name);                 // "TypeError"
-  console.log(e.fileName);             // "unFichier.js"
-  console.log(e.lineNumber);           // 10
-  console.log(e.columnNumber);         // 0
-  console.log(e.stack);                // "@Scratchpad/2:2:9\n"
-}
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES3', '#sec-15.11.6.5', 'TypeError')}}</td>
-   <td>{{Spec2('ES3')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-15.11.6.5', 'TypeError')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-native-error-types-used-in-this-standard-typeerror', 'TypeError')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-native-error-types-used-in-this-standard-typeerror', 'TypeError')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.TypeError")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Error")}}</li>
- <li>{{jsxref("TypeError.prototype")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/typeerror/index.md b/files/fr/web/javascript/reference/global_objects/typeerror/index.md
new file mode 100644
index 0000000000..712e7799b6
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/typeerror/index.md
@@ -0,0 +1,103 @@
+---
+title: TypeError
+slug: Web/JavaScript/Reference/Global_Objects/TypeError
+tags:
+  - Error
+  - JavaScript
+  - Object
+  - Reference
+  - TypeError
+translation_of: Web/JavaScript/Reference/Global_Objects/TypeError
+original_slug: Web/JavaScript/Reference/Objets_globaux/TypeError
+---
+{{JSRef}}
+
+L'objet **`TypeError`** représente une erreur qui intervient lorsque la valeur n'est pas du type attendu.
+
+## Syntaxe
+
+    new TypeError([message[, nomFichier[, numLigne]]])
+
+### Paramètres
+
+- `message`
+  - : Paramètre optionnel. Une description de l'erreur dans un format compréhensible par un humain.
+- `nomFichier` {{Non-standard_inline}}
+  - : Paramètre optionnel. Le nom du fichier contenant le code qui a causé l'erreur.
+- `numLigne` {{Non-standard_inline}}
+  - : Paramètre optionnel. Le numéro de ligne du code qui a causé l'erreur
+
+## Description
+
+Une exception `TypeError` est levée lorsque qu'un argument ou un opérande est utilisé avec une fonction ou un opérateur incompatible avec le type attendu.
+
+## Propriétés
+
+- {{jsxref("TypeError.prototype")}}
+  - : Permet d'ajouter des propriétés aux instances de `TypeError`.
+
+## Méthodes
+
+L'objet global `TypeError` ne contient pas de méthodes qui lui sont propres. Il possède malgré tout des méthodes héritées via sa chaîne de prototypes.
+
+## Instances de TypeError
+
+### Propriétés
+
+{{ page('fr/docs/Web/JavaScript/Reference/Objets_globaux/TypeError/prototype', 'Propri.C3.A9t.C3.A9s') }}
+
+### Méthodes
+
+{{ page('fr/docs/Web/JavaScript/Reference/Objets_globaux/TypeError/prototype', 'M.C3.A9thodes') }}
+
+## Exemples
+
+### Intercepter une exception `TypeError`
+
+```js
+try {
+  null.f();
+} catch (e) {
+  console.log(e instanceof TypeError); // true
+  console.log(e.message);              // "null has no properties"
+  console.log(e.name);                 // "TypeError"
+  console.log(e.fileName);             // "Scratchpad/1"
+  console.log(e.lineNumber);           // 2
+  console.log(e.columnNumber);         // 2
+  console.log(e.stack);                // "@Scratchpad/2:2:3\n"
+}
+```
+
+### Créer une exception `TypeError`
+
+```js
+try {
+  throw new TypeError('Coucou', "unFichier.js", 10);
+} catch (e) {
+  console.log(e instanceof TypeError); // true
+  console.log(e.message);              // "Coucou"
+  console.log(e.name);                 // "TypeError"
+  console.log(e.fileName);             // "unFichier.js"
+  console.log(e.lineNumber);           // 10
+  console.log(e.columnNumber);         // 0
+  console.log(e.stack);                // "@Scratchpad/2:2:9\n"
+}
+```
+
+## Spécifications
+
+| Spécification                                                                                                                    | Statut                       | Commentaires         |
+| -------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName('ES3', '#sec-15.11.6.5', 'TypeError')}}                                                             | {{Spec2('ES3')}}         | Définition initiale. |
+| {{SpecName('ES5.1', '#sec-15.11.6.5', 'TypeError')}}                                                             | {{Spec2('ES5.1')}}     |                      |
+| {{SpecName('ES6', '#sec-native-error-types-used-in-this-standard-typeerror', 'TypeError')}}         | {{Spec2('ES6')}}         |                      |
+| {{SpecName('ESDraft', '#sec-native-error-types-used-in-this-standard-typeerror', 'TypeError')}} | {{Spec2('ESDraft')}} |                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.TypeError")}}
+
+## Voir aussi
+
+- {{jsxref("Error")}}
+- {{jsxref("TypeError.prototype")}}
diff --git a/files/fr/web/javascript/reference/global_objects/uint16array/index.html b/files/fr/web/javascript/reference/global_objects/uint16array/index.html
deleted file mode 100644
index 97cdc87d6a..0000000000
--- a/files/fr/web/javascript/reference/global_objects/uint16array/index.html
+++ /dev/null
@@ -1,205 +0,0 @@
----
-title: Uint16Array
-slug: Web/JavaScript/Reference/Global_Objects/Uint16Array
-tags:
-  - Constructor
-  - JavaScript
-  - Reference
-  - TypedArray
-  - TypedArrays
-  - Uint16Array
-translation_of: Web/JavaScript/Reference/Global_Objects/Uint16Array
-original_slug: Web/JavaScript/Reference/Objets_globaux/Uint16Array
----
-<div>{{JSRef}}</div>
-
-<p>Le tableau typé <strong><code>Uint16Array</code></strong> permet de représenter un tableau d'entiers non signés représentés sur 16 bits, où l'ordre des octets correspond à celui de la plateforme utilisée. Si on souhaite contrôler l'ordre des octets utilisé (le « boutisme »), on utilisera un objet {{jsxref("DataView")}} à la place. Les éléments du tableau sont initialisés à <code>0</code>. 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).</p>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">new Uint16Array(); // apparu avec ES2017
-new Uint16Array(<var>longueur</var>);
-new Uint16Array(<var>tableauTypé</var>);
-new Uint16Array(<var>objet</var>);
-new Uint16Array(<var>tampon</var> [, <var>décalage</var> [, <var>longueur</var>]]);</pre>
-
-<p>Pour plus d'informations sur la syntaxe du constructeur et le rôle des différents paramètres, voir la page <em><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/TypedArray#Syntaxe">TypedArray</a></em>.</p>
-
-<h2 id="Propriétés">Propriétés</h2>
-
-<dl>
- <dt>{{jsxref("TypedArray.BYTES_PER_ELEMENT", "Uint16Array.BYTES_PER_ELEMENT")}}</dt>
- <dd>Cette propriété renvoie un nombre correspondant à la quantité d'octets pour un élément du tableau. Dans le cas d'<code>Uint16Array</code>, ce sera <code>2</code>.</dd>
- <dt><code>Uint16Array.length</code></dt>
- <dd>La propriété de longueur statique qui vaut 3. Pour connaître le nombre d'élément, voir {{jsxref("TypedArray.prototype.length", "Uint16Array.prototype.length")}}.</dd>
- <dt>{{jsxref("TypedArray.name", "Uint16Array.name")}}</dt>
- <dd>Cette propriété renvoie la chaîne de caractères correspondant au nom du constructeur. Pour <code>Uint16Array</code> ce sera : "Uint16Array".</dd>
- <dt>{{jsxref("TypedArray.prototype", "Uint16Array.prototype")}}</dt>
- <dd>Le prototype des objets <em>TypedArray</em>.</dd>
-</dl>
-
-<h2 id="Méthodes">Méthodes</h2>
-
-<dl>
- <dt>{{jsxref("TypedArray.from","Uint16Array.from()")}}</dt>
- <dd>Cette méthode permet de créer un <code>Uint16Array</code> à partir d'un itérable ou d'un objet semblable à un tableau. Voir aussi {{jsxref("Array.from()")}}.</dd>
- <dt>{{jsxref("TypedArray.of","Uint16Array.of()")}}</dt>
- <dd>Cette méthode permet de créer un Uint16Array à partir d'un nombre variable d'arguments. Voir aussi {{jsxref("Array.of()")}}.</dd>
-</dl>
-
-<h2 id="Prototype_Uint16Array">Prototype <code>Uint16Array</code></h2>
-
-<p>Tous les objets <code>Uint16Array</code> héritent de {{jsxref("TypedArray.prototype", "%TypedArray%.prototype")}}.</p>
-
-<h3 id="Propriétés_2">Propriétés</h3>
-
-<dl>
- <dt><code>Uint16Array.prototype.constructor</code></dt>
- <dd>Cette propriété renvoie la fonction qui a créé l'instance du prototype. Par défaut, ce sera le constructeur <code>Uint16Array</code>.</dd>
- <dt>{{jsxref("TypedArray.prototype.buffer", "Uint16Array.prototype.buffer")}} {{readonlyInline}}</dt>
- <dd>Cette propriété renvoie l'objet {{jsxref("ArrayBuffer")}} référencé par l'objet <code>Uint16Array</code> Elle est déterminée lors de la construction et est accessible uniquement en <strong>lecture seule</strong>.</dd>
- <dt>{{jsxref("TypedArray.prototype.byteLength", "Uint16Array.prototype.byteLength")}} {{readonlyInline}}</dt>
- <dd>Cette propriété renvoie la longueur, exprimée en octets, de l'objet <code>Uint16Array</code> à partir du début de l'objet {{jsxref("ArrayBuffer")}} correspondant. Elle est déterminée lors de la construction et est accessible uniquement en <strong>lecture seule</strong>.</dd>
- <dt>{{jsxref("TypedArray.prototype.byteOffset", "Uint16Array.prototype.byteOffset")}} {{readonlyInline}}</dt>
- <dd>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 <strong>lecture seule</strong>.</dd>
- <dt>{{jsxref("TypedArray.prototype.length", "Uint16Array.prototype.length")}} {{readonlyInline}}</dt>
- <dd>Cette propriété renvoie le nombre d'éléments contenus dans le tableau <code>Uint16Array</code>. Elle est déterminée lors de la construction et est accessible uniquement en <strong>lecture seule</strong>.</dd>
-</dl>
-
-<h3 id="Méthodes_2">Méthodes</h3>
-
-<dl>
- <dt>{{jsxref("TypedArray.copyWithin", "Uint16Array.prototype.copyWithin()")}}</dt>
- <dd>Copie une suite d'éléments d'un tableau dans le tableau. Voir également {{jsxref("Array.prototype.copyWithin()")}}.</dd>
- <dt>{{jsxref("TypedArray.entries", "Uint16Array.prototype.entries()")}}</dt>
- <dd>Renvoie un nouvel objet <code>Array Iterator</code> qui contient les paires clé/valeur pour chaque indice du tableau. Voir également {{jsxref("Array.prototype.entries()")}}.</dd>
- <dt>{{jsxref("TypedArray.every", "Uint16Array.prototype.every()")}}</dt>
- <dd>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()")}}.</dd>
- <dt>{{jsxref("TypedArray.fill", "Uint16Array.prototype.fill()")}}</dt>
- <dd>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()")}}.</dd>
- <dt>{{jsxref("TypedArray.filter", "Uint16Array.prototype.filter()")}}</dt>
- <dd>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()")}}.</dd>
- <dt>{{jsxref("TypedArray.find", "Uint16Array.prototype.find()")}}</dt>
- <dd>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 <code>undefined</code> sera renvoyé. Voir également {{jsxref("Array.prototype.find()")}}.</dd>
- <dt>{{jsxref("TypedArray.findIndex", "Uint16Array.prototype.findIndex()")}}</dt>
- <dd>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()")}}.</dd>
- <dt>{{jsxref("TypedArray.forEach", "Uint16Array.prototype.forEach()")}}</dt>
- <dd>Appelle une fonction pour chacun des élément du tableau. Voir également {{jsxref("Array.prototype.forEach()")}}.</dd>
- <dt>{{jsxref("TypedArray.includes", "Uint16Array.prototype.includes()")}}</dt>
- <dd>Détermine si le tableau typé contient un élément donné. Cette méthode renvoie <code>true</code> ou <code>false</code> selon le cas de figure. Voir également {{jsxref("Array.prototype.includes()")}}.</dd>
- <dt>{{jsxref("TypedArray.indexOf", "Uint16Array.prototype.indexOf()")}}</dt>
- <dd>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()")}}.</dd>
- <dt>{{jsxref("TypedArray.join", "Uint16Array.prototype.join()")}}</dt>
- <dd>Fusionne l'ensemble des éléments du tableau en une chaîne de caractères. Voir également {{jsxref("Array.prototype.join()")}}.</dd>
- <dt>{{jsxref("TypedArray.keys", "Uint16Array.prototype.keys()")}}</dt>
- <dd>Renvoie un nouvel objet <code>Array Iterator</code> qui contient les clés de chaque indice du tableau. Voir également {{jsxref("Array.prototype.keys()")}}.</dd>
- <dt>{{jsxref("TypedArray.lastIndexOf", "Uint16Array.prototype.lastIndexOf()")}}</dt>
- <dd>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()")}}.</dd>
- <dt>{{jsxref("TypedArray.map", "Uint16Array.prototype.map()")}}</dt>
- <dd>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()")}}.</dd>
- <dt>{{jsxref("TypedArray.move", "Uint16Array.prototype.move()")}} {{non-standard_inline}} {{unimplemented_inline}}</dt>
- <dd>Ancienne version, non-standard, de {{jsxref("TypedArray.copyWithin", "Uint16Array.prototype.copyWithin()")}}.</dd>
- <dt>{{jsxref("TypedArray.reduce", "Uint16Array.prototype.reduce()")}}</dt>
- <dd>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()")}}.</dd>
- <dt>{{jsxref("TypedArray.reduceRight", "Uint16Array.prototype.reduceRight()")}}</dt>
- <dd>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()")}}.</dd>
- <dt>{{jsxref("TypedArray.reverse", "Uint16Array.prototype.reverse()")}}</dt>
- <dd>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()")}}.</dd>
- <dt>{{jsxref("TypedArray.set", "Uint16Array.prototype.set()")}}</dt>
- <dd>Enregistre plusieurs valeurs dans le tableau typé à partir de valeurs d'un autre tableau.</dd>
- <dt>{{jsxref("TypedArray.slice", "Uint16Array.prototype.slice()")}}</dt>
- <dd>Extrait un fragment d'un tableau et renvoie ce fragment. Voir également {{jsxref("Array.prototype.slice()")}}.</dd>
- <dt>{{jsxref("TypedArray.some", "Uint16Array.prototype.some()")}}</dt>
- <dd>Renvoie <code>true</code> si au moins un des éléments remplit une condition donnée par une fonction de test. Voir également {{jsxref("Array.prototype.some()")}}.</dd>
- <dt>{{jsxref("TypedArray.sort", "Uint16Array.prototype.sort()")}}</dt>
- <dd>Trie les éléments du tableau et renvoie ce tableau. Voir également {{jsxref("Array.prototype.sort()")}}.</dd>
- <dt>{{jsxref("TypedArray.subarray", "Uint16Array.prototype.subarray()")}}</dt>
- <dd>Renvoie un nouvel objet <code>Uint16Array</code> qui est le fragment du tableau courant, entre les indices de début et de fin donnés.</dd>
- <dt>{{jsxref("TypedArray.values", "Uint16Array.prototype.values()")}}</dt>
- <dd>Renvoie un nouvel objet <code>Array Iterator</code> qui contient les valeurs correspondantes à chaque indice du tableau. Voir également {{jsxref("Array.prototype.values()")}}.</dd>
- <dt>{{jsxref("TypedArray.toLocaleString", "Uint16Array.prototype.toLocaleString()")}}</dt>
- <dd>Renvoie une chaîne de caractères localisée qui représente le tableau et ses éléments. Voir également {{jsxref("Array.prototype.toLocaleString()")}}.</dd>
- <dt>{{jsxref("TypedArray.toString", "Uint16Array.prototype.toString()")}}</dt>
- <dd>Renvoie une chaîne de caractère qui représente le tableau et ses éléments. Voir également {{jsxref("Array.prototype.toString()")}}.</dd>
- <dt>{{jsxref("TypedArray.@@iterator", "Uint16Array.prototype[@@iterator]()")}}</dt>
- <dd>Renvoie un nouvel objet <code>Array Iterator</code> qui contient les valeurs correspondantes à chaque indice du tableau.</dd>
-</dl>
-
-<h2 id="Exemples">Exemples</h2>
-
-<p>Différentes façons de créer un objet <code>Uint16Array</code> :</p>
-
-<pre class="brush: js">// Construction à partir d'une longueur
-var uint16 = new Uint16Array(2);
-uint16[0] = 42;
-console.log(uint16[0]); // 42
-console.log(uint16.length); // 2
-console.log(uint16.BYTES_PER_ELEMENT); // 2
-
-// Construction à partir d'un tableau
-var arr = new Uint16Array([21,31]);
-console.log(arr[1]); // 31
-
-// Construction à partir d'un tableau typé
-var x = new Uint16Array([21, 31]);
-var y = new Uint16Array(x);
-console.log(y[0]); // 21
-
-// Construction à partir d'un ArrayBuffer
-var buffer = new ArrayBuffer(8);
-var z = new Uint16Array(buffer, 0, 4);
-
-// Construction à partir d'un itérable
-var iterable = function*(){ yield* [1,2,3]; }();
-var uint16 = new Uint16Array(iterable);
-// Uint16Array[1, 2, 3]
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Typed Array')}}</td>
-   <td>{{Spec2('Typed Array')}}</td>
-   <td>Englobée par ECMAScript 2015.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2015', '#table-49', 'TypedArray constructors')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td>Définition initiale au sein d'un standard ECMA. <code>new</code> est obligatoire.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#table-49', 'TypedArray constructors')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td>ECMAScript 2017 a modifié le constructeur <code>Uint16Array</code> afin qu'il utilise l'opération <code>ToIndex</code> et qu'il puisse être utilisé sans argument.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Uint16Array")}}</p>
-
-<h2 id="Notes_de_compatibilité">Notes de compatibilité</h2>
-
-<p>À partir d'ECMAScript 2015 (ES6), <code>Uint16Array</code> doit être utilisé avec {{jsxref("Opérateurs/L_opérateur_new", "new")}}. Appeler un constructeur <code>Uint16Array</code> comme une fonction, sans <code>new</code>, provoquera une exception {{jsxref("TypeError")}}.</p>
-
-<pre class="brush: js example-bad">var dv = Uint16Array([1, 2, 3]);
-// TypeError: calling a builtin Uint16Array constructor
-// without new is forbidden</pre>
-
-<pre class="brush: js example-good">var dv = new Uint16Array([1, 2, 3]);</pre>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/JavaScript/Tableaux_typés">Les tableaux typés en JavaScript</a></li>
- <li>{{jsxref("ArrayBuffer")}}</li>
- <li>{{jsxref("DataView")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/uint16array/index.md b/files/fr/web/javascript/reference/global_objects/uint16array/index.md
new file mode 100644
index 0000000000..abbec07ee1
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/uint16array/index.md
@@ -0,0 +1,181 @@
+---
+title: Uint16Array
+slug: Web/JavaScript/Reference/Global_Objects/Uint16Array
+tags:
+  - Constructor
+  - JavaScript
+  - Reference
+  - TypedArray
+  - TypedArrays
+  - Uint16Array
+translation_of: Web/JavaScript/Reference/Global_Objects/Uint16Array
+original_slug: Web/JavaScript/Reference/Objets_globaux/Uint16Array
+---
+{{JSRef}}
+
+Le tableau typé **`Uint16Array`** permet de représenter un tableau d'entiers non signés représentés sur 16 bits, où l'ordre des octets correspond à celui de la plateforme utilisée. Si on souhaite contrôler l'ordre des octets utilisé (le « boutisme »), on utilisera un objet {{jsxref("DataView")}} à la place. 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
+
+    new Uint16Array(); // apparu avec ES2017
+    new Uint16Array(longueur);
+    new Uint16Array(tableauTypé);
+    new Uint16Array(objet);
+    new Uint16Array(tampon [, décalage [, longueur]]);
+
+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
+
+- {{jsxref("TypedArray.BYTES_PER_ELEMENT", "Uint16Array.BYTES_PER_ELEMENT")}}
+  - : Cette propriété renvoie un nombre correspondant à la quantité d'octets pour un élément du tableau. Dans le cas d'`Uint16Array`, ce sera `2`.
+- `Uint16Array.length`
+  - : La propriété de longueur statique qui vaut 3. Pour connaître le nombre d'élément, voir {{jsxref("TypedArray.prototype.length", "Uint16Array.prototype.length")}}.
+- {{jsxref("TypedArray.name", "Uint16Array.name")}}
+  - : Cette propriété renvoie la chaîne de caractères correspondant au nom du constructeur. Pour `Uint16Array` ce sera : "Uint16Array".
+- {{jsxref("TypedArray.prototype", "Uint16Array.prototype")}}
+  - : Le prototype des objets _TypedArray_.
+
+## Méthodes
+
+- {{jsxref("TypedArray.from","Uint16Array.from()")}}
+  - : Cette méthode permet de créer un `Uint16Array` à partir d'un itérable ou d'un objet semblable à un tableau. Voir aussi {{jsxref("Array.from()")}}.
+- {{jsxref("TypedArray.of","Uint16Array.of()")}}
+  - : Cette méthode permet de créer un Uint16Array à partir d'un nombre variable d'arguments. Voir aussi {{jsxref("Array.of()")}}.
+
+## Prototype `Uint16Array`
+
+Tous les objets `Uint16Array` héritent de {{jsxref("TypedArray.prototype", "%TypedArray%.prototype")}}.
+
+### Propriétés
+
+- `Uint16Array.prototype.constructor`
+  - : Cette propriété renvoie la fonction qui a créé l'instance du prototype. Par défaut, ce sera le constructeur `Uint16Array`.
+- {{jsxref("TypedArray.prototype.buffer", "Uint16Array.prototype.buffer")}} {{readonlyInline}}
+  - : Cette propriété renvoie l'objet {{jsxref("ArrayBuffer")}} référencé par l'objet `Uint16Array` Elle est déterminée lors de la construction et est accessible uniquement en **lecture seule**.
+- {{jsxref("TypedArray.prototype.byteLength", "Uint16Array.prototype.byteLength")}} {{readonlyInline}}
+  - : Cette propriété renvoie la longueur, exprimée en octets, de l'objet `Uint16Array` à 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", "Uint16Array.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", "Uint16Array.prototype.length")}} {{readonlyInline}}
+  - : Cette propriété renvoie le nombre d'éléments contenus dans le tableau `Uint16Array`. Elle est déterminée lors de la construction et est accessible uniquement en **lecture seule**.
+
+### Méthodes
+
+- {{jsxref("TypedArray.copyWithin", "Uint16Array.prototype.copyWithin()")}}
+  - : Copie une suite d'éléments d'un tableau dans le tableau. Voir également {{jsxref("Array.prototype.copyWithin()")}}.
+- {{jsxref("TypedArray.entries", "Uint16Array.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", "Uint16Array.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", "Uint16Array.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", "Uint16Array.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", "Uint16Array.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", "Uint16Array.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", "Uint16Array.prototype.forEach()")}}
+  - : Appelle une fonction pour chacun des élément du tableau. Voir également {{jsxref("Array.prototype.forEach()")}}.
+- {{jsxref("TypedArray.includes", "Uint16Array.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", "Uint16Array.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", "Uint16Array.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", "Uint16Array.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", "Uint16Array.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", "Uint16Array.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", "Uint16Array.prototype.move()")}} {{non-standard_inline}} {{unimplemented_inline}}
+  - : Ancienne version, non-standard, de {{jsxref("TypedArray.copyWithin", "Uint16Array.prototype.copyWithin()")}}.
+- {{jsxref("TypedArray.reduce", "Uint16Array.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", "Uint16Array.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", "Uint16Array.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", "Uint16Array.prototype.set()")}}
+  - : Enregistre plusieurs valeurs dans le tableau typé à partir de valeurs d'un autre tableau.
+- {{jsxref("TypedArray.slice", "Uint16Array.prototype.slice()")}}
+  - : Extrait un fragment d'un tableau et renvoie ce fragment. Voir également {{jsxref("Array.prototype.slice()")}}.
+- {{jsxref("TypedArray.some", "Uint16Array.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", "Uint16Array.prototype.sort()")}}
+  - : Trie les éléments du tableau et renvoie ce tableau. Voir également {{jsxref("Array.prototype.sort()")}}.
+- {{jsxref("TypedArray.subarray", "Uint16Array.prototype.subarray()")}}
+  - : Renvoie un nouvel objet `Uint16Array` qui est le fragment du tableau courant, entre les indices de début et de fin donnés.
+- {{jsxref("TypedArray.values", "Uint16Array.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", "Uint16Array.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", "Uint16Array.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", "Uint16Array.prototype[@@iterator]()")}}
+  - : Renvoie un nouvel objet `Array Iterator` qui contient les valeurs correspondantes à chaque indice du tableau.
+
+## Exemples
+
+Différentes façons de créer un objet `Uint16Array` :
+
+```js
+// Construction à partir d'une longueur
+var uint16 = new Uint16Array(2);
+uint16[0] = 42;
+console.log(uint16[0]); // 42
+console.log(uint16.length); // 2
+console.log(uint16.BYTES_PER_ELEMENT); // 2
+
+// Construction à partir d'un tableau
+var arr = new Uint16Array([21,31]);
+console.log(arr[1]); // 31
+
+// Construction à partir d'un tableau typé
+var x = new Uint16Array([21, 31]);
+var y = new Uint16Array(x);
+console.log(y[0]); // 21
+
+// Construction à partir d'un ArrayBuffer
+var buffer = new ArrayBuffer(8);
+var z = new Uint16Array(buffer, 0, 4);
+
+// Construction à partir d'un itérable
+var iterable = function*(){ yield* [1,2,3]; }();
+var uint16 = new Uint16Array(iterable);
+// Uint16Array[1, 2, 3]
+```
+
+## Spécifications
+
+| Spécification                                                                        | État                             | Commentaires                                                                                                                                 |
+| ------------------------------------------------------------------------------------ | -------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------- |
+| {{SpecName('Typed Array')}}                                                 | {{Spec2('Typed Array')}} | Englobée par ECMAScript 2015.                                                                                                                |
+| {{SpecName('ES2015', '#table-49', 'TypedArray constructors')}} | {{Spec2('ES2015')}}         | 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 `Uint16Array` afin qu'il utilise l'opération `ToIndex` et qu'il puisse être utilisé sans argument. |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Uint16Array")}}
+
+## Notes de compatibilité
+
+À partir d'ECMAScript 2015 (ES6), `Uint16Array` doit être utilisé avec {{jsxref("Opérateurs/L_opérateur_new", "new")}}. Appeler un constructeur `Uint16Array` comme une fonction, sans `new`, provoquera une exception {{jsxref("TypeError")}}.
+
+```js example-bad
+var dv = Uint16Array([1, 2, 3]);
+// TypeError: calling a builtin Uint16Array constructor
+// without new is forbidden
+```
+
+```js example-good
+var dv = new Uint16Array([1, 2, 3]);
+```
+
+## Voir aussi
+
+- [Les tableaux typés en JavaScript](/fr/docs/Web/JavaScript/Tableaux_typés)
+- {{jsxref("ArrayBuffer")}}
+- {{jsxref("DataView")}}
diff --git a/files/fr/web/javascript/reference/global_objects/uint32array/index.html b/files/fr/web/javascript/reference/global_objects/uint32array/index.html
deleted file mode 100644
index 10e2b1e58c..0000000000
--- a/files/fr/web/javascript/reference/global_objects/uint32array/index.html
+++ /dev/null
@@ -1,205 +0,0 @@
----
-title: Uint32Array
-slug: Web/JavaScript/Reference/Global_Objects/Uint32Array
-tags:
-  - Constructor
-  - JavaScript
-  - Reference
-  - TypedArray
-  - TypedArrays
-  - Uint32Array
-translation_of: Web/JavaScript/Reference/Global_Objects/Uint32Array
-original_slug: Web/JavaScript/Reference/Objets_globaux/Uint32Array
----
-<div>{{JSRef}}</div>
-
-<p>Le tableau typé <strong><code>Uint32Array</code></strong> permet de représenter un tableau d'entiers non signés représentés sur 32 bits, où l'ordre des octets correspond à celui de la plateforme utilisée. Si on souhaite contrôler l'ordre des octets utilisé (le « boutisme »), on utilisera un objet {{jsxref("DataView")}} à la place. Les éléments du tableau sont initialisés à <code>0</code>. 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).</p>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">new Uint32Array(); // apparu avec ES2017
-new Uint32Array(longueur);
-new Uint32Array(tableauTypé);
-new Uint32Array(objet);
-new Uint32Array(tampon [, décalage [, longueur]]);</pre>
-
-<p>Pour plus d'informations sur la syntaxe du constructeur et le rôle des différents paramètres, voir la page <em><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/TypedArray#Syntaxe">TypedArray</a></em>.</p>
-
-<h2 id="Propriétés">Propriétés</h2>
-
-<dl>
- <dt>{{jsxref("TypedArray.BYTES_PER_ELEMENT", "Uint32Array.BYTES_PER_ELEMENT")}}</dt>
- <dd>Cette propriété renvoie un nombre correspondant à la quantité d'octets pour un élément du tableau. Dans le cas d'<code>Uint32Array</code>, ce sera <code>4</code>.</dd>
- <dt><code>Uint32Array.length</code></dt>
- <dd>La propriété de longueur statique qui vaut 3. Pour connaître le nombre d'élément, voir {{jsxref("TypedArray.prototype.length", "Uint32Array.prototype.length")}}.</dd>
- <dt>{{jsxref("TypedArray.name", "Uint32Array.name")}}</dt>
- <dd>Cette propriété renvoie la chaîne de caractères correspondant au nom du constructeur. Pour <code>Uint32Array</code> ce sera : "Uint32Array".</dd>
- <dt>{{jsxref("TypedArray.prototype", "Uint32Array.prototype")}}</dt>
- <dd>Le prototype des objets <em>TypedArray</em>.</dd>
-</dl>
-
-<h2 id="Méthodes">Méthodes</h2>
-
-<dl>
- <dt>{{jsxref("TypedArray.from", "Uint32Array.from()")}}</dt>
- <dd>Cette méthode permet de créer un nouveau tableau typé <code>Uint32Array</code> à partir d'un itérable ou d'un objet semblable à un tableau. Voir aussi {{jsxref("Array.from()")}}.</dd>
- <dt>{{jsxref("TypedArray.of", "Uint32Array.of()")}}</dt>
- <dd>Cette méthode permet de créer un nouvel objet <code>Uint32Array</code> à partir d'un nombre d'arguments variables. Voir aussi {{jsxref("Array.of()")}}.</dd>
-</dl>
-
-<h2 id="Prototype_Uint32Array">Prototype <code>Uint32Array</code></h2>
-
-<p>Tous les objets <code>Uint32Array</code> héritent de {{jsxref("TypedArray.prototype", "%TypedArray%.prototype")}}.</p>
-
-<h3 id="Propriétés_2">Propriétés</h3>
-
-<dl>
- <dt><code>Uint32Array.prototype.constructor</code></dt>
- <dd>Cette propriété renvoie la fonction qui a créé l'instance du prototype. Par défaut, ce sera le constructeur <code>Uint32Array</code>.</dd>
- <dt>{{jsxref("TypedArray.prototype.buffer", "Uint32Array.prototype.buffer")}} {{readonlyInline}}</dt>
- <dd>Cette propriété renvoie l'objet {{jsxref("ArrayBuffer")}} référencé par l'objet <code>Uint32Array</code> Elle est déterminée lors de la construction et est accessible uniquement en <strong>lecture seule</strong>.</dd>
- <dt>{{jsxref("TypedArray.prototype.byteLength", "Uint32Array.prototype.byteLength")}} {{readonlyInline}}</dt>
- <dd>Cette propriété renvoie la longueur, exprimée en octets, de l'objet <code>Uint32Array</code> à partir du début de l'objet {{jsxref("ArrayBuffer")}} correspondant. Elle est déterminée lors de la construction et est accessible uniquement en <strong>lecture seule</strong>.</dd>
- <dt>{{jsxref("TypedArray.prototype.byteOffset", "Uint32Array.prototype.byteOffset")}} {{readonlyInline}}</dt>
- <dd>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 <strong>lecture seule</strong>.</dd>
- <dt>{{jsxref("TypedArray.prototype.length", "Uint32Array.prototype.length")}} {{readonlyInline}}</dt>
- <dd>Cette propriété renvoie le nombre d'éléments contenus dans le tableau <code>Uint32Array</code>. Elle est déterminée lors de la construction et est accessible uniquement en <strong>lecture seule</strong>.</dd>
-</dl>
-
-<h3 id="Méthodes_2">Méthodes</h3>
-
-<dl>
- <dt>{{jsxref("TypedArray.copyWithin", "Uint32Array.prototype.copyWithin()")}}</dt>
- <dd>Copie une suite d'éléments d'un tableau dans le tableau. Voir également {{jsxref("Array.prototype.copyWithin()")}}.</dd>
- <dt>{{jsxref("TypedArray.entries", "Uint32Array.prototype.entries()")}}</dt>
- <dd>Renvoie un nouvel objet <code>Array Iterator</code> qui contient les paires clé/valeur pour chaque indice du tableau. Voir également {{jsxref("Array.prototype.entries()")}}.</dd>
- <dt>{{jsxref("TypedArray.every", "Uint32Array.prototype.every()")}}</dt>
- <dd>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()")}}.</dd>
- <dt>{{jsxref("TypedArray.fill", "Uint32Array.prototype.fill()")}}</dt>
- <dd>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()")}}.</dd>
- <dt>{{jsxref("TypedArray.filter", "Uint32Array.prototype.filter()")}}</dt>
- <dd>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()")}}.</dd>
- <dt>{{jsxref("TypedArray.find", "Uint32Array.prototype.find()")}}</dt>
- <dd>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 <code>undefined</code> sera renvoyé. Voir également {{jsxref("Array.prototype.find()")}}.</dd>
- <dt>{{jsxref("TypedArray.findIndex", "Uint32Array.prototype.findIndex()")}}</dt>
- <dd>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()")}}.</dd>
- <dt>{{jsxref("TypedArray.forEach", "Uint32Array.prototype.forEach()")}}</dt>
- <dd>Appelle une fonction pour chacun des élément du tableau. Voir également {{jsxref("Array.prototype.forEach()")}}.</dd>
- <dt>{{jsxref("TypedArray.includes", "Uint32Array.prototype.includes()")}}</dt>
- <dd>Détermine si le tableau typé contient un élément donné. Cette méthode renvoie <code>true</code> ou <code>false</code> selon le cas de figure. Voir également {{jsxref("Array.prototype.includes()")}}.</dd>
- <dt>{{jsxref("TypedArray.indexOf", "Uint32Array.prototype.indexOf()")}}</dt>
- <dd>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()")}}.</dd>
- <dt>{{jsxref("TypedArray.join", "Uint32Array.prototype.join()")}}</dt>
- <dd>Fusionne l'ensemble des éléments du tableau en une chaîne de caractères. Voir également {{jsxref("Array.prototype.join()")}}.</dd>
- <dt>{{jsxref("TypedArray.keys", "Uint32Array.prototype.keys()")}}</dt>
- <dd>Renvoie un nouvel objet <code>Array Iterator</code> qui contient les clés de chaque indice du tableau. Voir également {{jsxref("Array.prototype.keys()")}}.</dd>
- <dt>{{jsxref("TypedArray.lastIndexOf", "Uint32Array.prototype.lastIndexOf()")}}</dt>
- <dd>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()")}}.</dd>
- <dt>{{jsxref("TypedArray.map", "Uint32Array.prototype.map()")}}</dt>
- <dd>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()")}}.</dd>
- <dt>{{jsxref("TypedArray.move", "Uint32Array.prototype.move()")}} {{non-standard_inline}} {{unimplemented_inline}}</dt>
- <dd>Ancienne version, non-standard, de {{jsxref("TypedArray.copyWithin", "Uint32Array.prototype.copyWithin()")}}.</dd>
- <dt>{{jsxref("TypedArray.reduce", "Uint32Array.prototype.reduce()")}}</dt>
- <dd>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()")}}.</dd>
- <dt>{{jsxref("TypedArray.reduceRight", "Uint32Array.prototype.reduceRight()")}}</dt>
- <dd>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()")}}.</dd>
- <dt>{{jsxref("TypedArray.reverse", "Uint32Array.prototype.reverse()")}}</dt>
- <dd>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()")}}.</dd>
- <dt>{{jsxref("TypedArray.set", "Uint32Array.prototype.set()")}}</dt>
- <dd>Enregistre plusieurs valeurs dans le tableau typé à partir de valeurs d'un autre tableau.</dd>
- <dt>{{jsxref("TypedArray.slice", "Uint32Array.prototype.slice()")}}</dt>
- <dd>Extrait un fragment d'un tableau et renvoie ce fragment. Voir également {{jsxref("Array.prototype.slice()")}}.</dd>
- <dt>{{jsxref("TypedArray.some", "Uint32Array.prototype.some()")}}</dt>
- <dd>Renvoie <code>true</code> si au moins un des éléments remplit une condition donnée par une fonction de test. Voir également {{jsxref("Array.prototype.some()")}}.</dd>
- <dt>{{jsxref("TypedArray.sort", "Uint32Array.prototype.sort()")}}</dt>
- <dd>Trie les éléments du tableau et renvoie ce tableau. Voir également {{jsxref("Array.prototype.sort()")}}.</dd>
- <dt>{{jsxref("TypedArray.subarray", "Uint32Array.prototype.subarray()")}}</dt>
- <dd>Renvoie un nouvel objet <code>Uint32Array</code> qui est le fragment du tableau courant, entre les indices de début et de fin donnés.</dd>
- <dt>{{jsxref("TypedArray.values", "Uint32Array.prototype.values()")}}</dt>
- <dd>Renvoie un nouvel objet <code>Array Iterator</code> qui contient les valeurs correspondantes à chaque indice du tableau. Voir également {{jsxref("Array.prototype.values()")}}.</dd>
- <dt>{{jsxref("TypedArray.toLocaleString", "Uint32Array.prototype.toLocaleString()")}}</dt>
- <dd>Renvoie une chaîne de caractères localisée qui représente le tableau et ses éléments. Voir également {{jsxref("Array.prototype.toLocaleString()")}}.</dd>
- <dt>{{jsxref("TypedArray.toString", "Uint32Array.prototype.toString()")}}</dt>
- <dd>Renvoie une chaîne de caractère qui représente le tableau et ses éléments. Voir également {{jsxref("Array.prototype.toString()")}}.</dd>
- <dt>{{jsxref("TypedArray.@@iterator", "Uint32Array.prototype[@@iterator]()")}}</dt>
- <dd>Renvoie un nouvel objet <code>Array Iterator</code> qui contient les valeurs correspondantes à chaque indice du tableau.</dd>
-</dl>
-
-<h2 id="Exemples">Exemples</h2>
-
-<p>Différentes façons de créer un objet <code>Uint32Array</code> :</p>
-
-<pre class="brush: js">// Construction à partir d'une longueur
-var uint32 = new Uint32Array(2);
-uint32[0] = 42;
-console.log(uint32[0]); // 42
-console.log(uint32.length); // 2
-console.log(uint32.BYTES_PER_ELEMENT); // 4
-
-// Construction à partir d'un tableau
-var arr = new Uint32Array([21,31]);
-console.log(arr[1]); // 31
-
-// Construction à partir d'un tableau typé
-var x = new Uint32Array([21, 31]);
-var y = new Uint32Array(x);
-console.log(y[0]); // 21
-
-// Construction à partir d'un ArrayBuffer
-var buffer = new ArrayBuffer(16);
-var z = new Uint32Array(buffer, 0, 4);
-
-// Construction à partir d'un itérable
-var iterable = function*(){ yield* [1,2,3]; }();
-var uint32 = new Uint32Array(iterable);
-// Uint32Array[1, 2, 3]
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Typed Array')}}</td>
-   <td>{{Spec2('Typed Array')}}</td>
-   <td>Englobée par ECMAScript 2015.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2015', '#table-49', 'TypedArray constructors')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td>Définition initiale au sein d'un standard ECMA. <code>new</code> est obligatoire.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#table-49', 'TypedArray constructors')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td>ECMAScript 2017 a modifié le constructeur <code>Uint32Array</code> afin qu'il utilise l'opération <code>ToIndex</code> et qu'il puisse être utilisé sans argument.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Uint32Array")}}</p>
-
-<h2 id="Notes_de_compatibilité">Notes de compatibilité</h2>
-
-<p>À partir d'ECMAScript 2015 (ES6), <code>Uint32Array</code> doit être utilisé avec {{jsxref("Opérateurs/L_opérateur_new", "new")}}. Appeler un constructeur <code>Uint32Array</code> comme une fonction, sans <code>new</code>, provoquera une exception {{jsxref("TypeError")}}.</p>
-
-<pre class="brush: js example-bad">var dv = Uint32Array([1, 2, 3]);
-// TypeError: calling a builtin Uint32Array constructor
-// without new is forbidden</pre>
-
-<pre class="brush: js example-good">var dv = new Uint32Array([1, 2, 3]);</pre>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/JavaScript/Tableaux_typés">Les tableaux typés en JavaScript</a></li>
- <li>{{jsxref("ArrayBuffer")}}</li>
- <li>{{jsxref("DataView")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/uint32array/index.md b/files/fr/web/javascript/reference/global_objects/uint32array/index.md
new file mode 100644
index 0000000000..1420fa4999
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/uint32array/index.md
@@ -0,0 +1,181 @@
+---
+title: Uint32Array
+slug: Web/JavaScript/Reference/Global_Objects/Uint32Array
+tags:
+  - Constructor
+  - JavaScript
+  - Reference
+  - TypedArray
+  - TypedArrays
+  - Uint32Array
+translation_of: Web/JavaScript/Reference/Global_Objects/Uint32Array
+original_slug: Web/JavaScript/Reference/Objets_globaux/Uint32Array
+---
+{{JSRef}}
+
+Le tableau typé **`Uint32Array`** permet de représenter un tableau d'entiers non signés représentés sur 32 bits, où l'ordre des octets correspond à celui de la plateforme utilisée. Si on souhaite contrôler l'ordre des octets utilisé (le « boutisme »), on utilisera un objet {{jsxref("DataView")}} à la place. 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
+
+    new Uint32Array(); // apparu avec ES2017
+    new Uint32Array(longueur);
+    new Uint32Array(tableauTypé);
+    new Uint32Array(objet);
+    new Uint32Array(tampon [, décalage [, longueur]]);
+
+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
+
+- {{jsxref("TypedArray.BYTES_PER_ELEMENT", "Uint32Array.BYTES_PER_ELEMENT")}}
+  - : Cette propriété renvoie un nombre correspondant à la quantité d'octets pour un élément du tableau. Dans le cas d'`Uint32Array`, ce sera `4`.
+- `Uint32Array.length`
+  - : La propriété de longueur statique qui vaut 3. Pour connaître le nombre d'élément, voir {{jsxref("TypedArray.prototype.length", "Uint32Array.prototype.length")}}.
+- {{jsxref("TypedArray.name", "Uint32Array.name")}}
+  - : Cette propriété renvoie la chaîne de caractères correspondant au nom du constructeur. Pour `Uint32Array` ce sera : "Uint32Array".
+- {{jsxref("TypedArray.prototype", "Uint32Array.prototype")}}
+  - : Le prototype des objets _TypedArray_.
+
+## Méthodes
+
+- {{jsxref("TypedArray.from", "Uint32Array.from()")}}
+  - : Cette méthode permet de créer un nouveau tableau typé `Uint32Array` à partir d'un itérable ou d'un objet semblable à un tableau. Voir aussi {{jsxref("Array.from()")}}.
+- {{jsxref("TypedArray.of", "Uint32Array.of()")}}
+  - : Cette méthode permet de créer un nouvel objet `Uint32Array` à partir d'un nombre d'arguments variables. Voir aussi {{jsxref("Array.of()")}}.
+
+## Prototype `Uint32Array`
+
+Tous les objets `Uint32Array` héritent de {{jsxref("TypedArray.prototype", "%TypedArray%.prototype")}}.
+
+### Propriétés
+
+- `Uint32Array.prototype.constructor`
+  - : Cette propriété renvoie la fonction qui a créé l'instance du prototype. Par défaut, ce sera le constructeur `Uint32Array`.
+- {{jsxref("TypedArray.prototype.buffer", "Uint32Array.prototype.buffer")}} {{readonlyInline}}
+  - : Cette propriété renvoie l'objet {{jsxref("ArrayBuffer")}} référencé par l'objet `Uint32Array` Elle est déterminée lors de la construction et est accessible uniquement en **lecture seule**.
+- {{jsxref("TypedArray.prototype.byteLength", "Uint32Array.prototype.byteLength")}} {{readonlyInline}}
+  - : Cette propriété renvoie la longueur, exprimée en octets, de l'objet `Uint32Array` à 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", "Uint32Array.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", "Uint32Array.prototype.length")}} {{readonlyInline}}
+  - : Cette propriété renvoie le nombre d'éléments contenus dans le tableau `Uint32Array`. Elle est déterminée lors de la construction et est accessible uniquement en **lecture seule**.
+
+### Méthodes
+
+- {{jsxref("TypedArray.copyWithin", "Uint32Array.prototype.copyWithin()")}}
+  - : Copie une suite d'éléments d'un tableau dans le tableau. Voir également {{jsxref("Array.prototype.copyWithin()")}}.
+- {{jsxref("TypedArray.entries", "Uint32Array.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", "Uint32Array.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", "Uint32Array.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", "Uint32Array.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", "Uint32Array.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", "Uint32Array.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", "Uint32Array.prototype.forEach()")}}
+  - : Appelle une fonction pour chacun des élément du tableau. Voir également {{jsxref("Array.prototype.forEach()")}}.
+- {{jsxref("TypedArray.includes", "Uint32Array.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", "Uint32Array.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", "Uint32Array.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", "Uint32Array.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", "Uint32Array.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", "Uint32Array.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", "Uint32Array.prototype.move()")}} {{non-standard_inline}} {{unimplemented_inline}}
+  - : Ancienne version, non-standard, de {{jsxref("TypedArray.copyWithin", "Uint32Array.prototype.copyWithin()")}}.
+- {{jsxref("TypedArray.reduce", "Uint32Array.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", "Uint32Array.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", "Uint32Array.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", "Uint32Array.prototype.set()")}}
+  - : Enregistre plusieurs valeurs dans le tableau typé à partir de valeurs d'un autre tableau.
+- {{jsxref("TypedArray.slice", "Uint32Array.prototype.slice()")}}
+  - : Extrait un fragment d'un tableau et renvoie ce fragment. Voir également {{jsxref("Array.prototype.slice()")}}.
+- {{jsxref("TypedArray.some", "Uint32Array.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", "Uint32Array.prototype.sort()")}}
+  - : Trie les éléments du tableau et renvoie ce tableau. Voir également {{jsxref("Array.prototype.sort()")}}.
+- {{jsxref("TypedArray.subarray", "Uint32Array.prototype.subarray()")}}
+  - : Renvoie un nouvel objet `Uint32Array` qui est le fragment du tableau courant, entre les indices de début et de fin donnés.
+- {{jsxref("TypedArray.values", "Uint32Array.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", "Uint32Array.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", "Uint32Array.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", "Uint32Array.prototype[@@iterator]()")}}
+  - : Renvoie un nouvel objet `Array Iterator` qui contient les valeurs correspondantes à chaque indice du tableau.
+
+## Exemples
+
+Différentes façons de créer un objet `Uint32Array` :
+
+```js
+// Construction à partir d'une longueur
+var uint32 = new Uint32Array(2);
+uint32[0] = 42;
+console.log(uint32[0]); // 42
+console.log(uint32.length); // 2
+console.log(uint32.BYTES_PER_ELEMENT); // 4
+
+// Construction à partir d'un tableau
+var arr = new Uint32Array([21,31]);
+console.log(arr[1]); // 31
+
+// Construction à partir d'un tableau typé
+var x = new Uint32Array([21, 31]);
+var y = new Uint32Array(x);
+console.log(y[0]); // 21
+
+// Construction à partir d'un ArrayBuffer
+var buffer = new ArrayBuffer(16);
+var z = new Uint32Array(buffer, 0, 4);
+
+// Construction à partir d'un itérable
+var iterable = function*(){ yield* [1,2,3]; }();
+var uint32 = new Uint32Array(iterable);
+// Uint32Array[1, 2, 3]
+```
+
+## Spécifications
+
+| Spécification                                                                        | État                             | Commentaires                                                                                                                                 |
+| ------------------------------------------------------------------------------------ | -------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------- |
+| {{SpecName('Typed Array')}}                                                 | {{Spec2('Typed Array')}} | Englobée par ECMAScript 2015.                                                                                                                |
+| {{SpecName('ES2015', '#table-49', 'TypedArray constructors')}} | {{Spec2('ES2015')}}         | 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 `Uint32Array` afin qu'il utilise l'opération `ToIndex` et qu'il puisse être utilisé sans argument. |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Uint32Array")}}
+
+## Notes de compatibilité
+
+À partir d'ECMAScript 2015 (ES6), `Uint32Array` doit être utilisé avec {{jsxref("Opérateurs/L_opérateur_new", "new")}}. Appeler un constructeur `Uint32Array` comme une fonction, sans `new`, provoquera une exception {{jsxref("TypeError")}}.
+
+```js example-bad
+var dv = Uint32Array([1, 2, 3]);
+// TypeError: calling a builtin Uint32Array constructor
+// without new is forbidden
+```
+
+```js example-good
+var dv = new Uint32Array([1, 2, 3]);
+```
+
+## Voir aussi
+
+- [Les tableaux typés en JavaScript](/fr/docs/Web/JavaScript/Tableaux_typés)
+- {{jsxref("ArrayBuffer")}}
+- {{jsxref("DataView")}}
diff --git a/files/fr/web/javascript/reference/global_objects/uint8array/index.html b/files/fr/web/javascript/reference/global_objects/uint8array/index.html
deleted file mode 100644
index d041a440d2..0000000000
--- a/files/fr/web/javascript/reference/global_objects/uint8array/index.html
+++ /dev/null
@@ -1,205 +0,0 @@
----
-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
----
-<div>{{JSRef}}</div>
-
-<p>Le tableau typé <strong><code>Uint8Array</code></strong> représente un tableau d'entiers non signés, représentés sur 8 bits. Les éléments du tableau sont initialisés à <code>0</code>. 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).</p>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">new Uint8Array(); // apparu avec ES2017
-new Uint8Array(longueur);
-new Uint8Array(tableauTypé);
-new Uint8Array(objet);
-new Uint8Array(tampon [, décalage [, longueur]]);</pre>
-
-<p>Pour plus d'informations sur la syntaxe du constructeur et le rôle des différents paramètres, voir la page <em><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/TypedArray#Syntaxe">TypedArray</a></em>.</p>
-
-<h2 id="Propriétés">Propriétés</h2>
-
-<dl>
- <dt>{{jsxref("TypedArray.BYTES_PER_ELEMENT", "Uint8Array.BYTES_PER_ELEMENT")}}</dt>
- <dd>Cette propriété renvoie la taille d'un élément du tableau, en octets. En l'occurence, pour <code>Uint8Array</code> ce sera <code>1</code>.</dd>
- <dt>Uint8Array.length</dt>
- <dd>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")}}.</dd>
- <dt>{{jsxref("TypedArray.name", "Uint8Array.name")}}</dt>
- <dd>Cette propriété renvoie la chaîne de caractères correspondant au nom du constructeur. Pour <code>Uint8Array</code> ce sera : "Uint8Array".</dd>
- <dt>{{jsxref("TypedArray.prototype", "Uint8Array.prototype")}}</dt>
- <dd>Le prototype des objets <em>TypedArray</em>.</dd>
-</dl>
-
-<h2 id="Méthodes">Méthodes</h2>
-
-<dl>
- <dt>{{jsxref("TypedArray.from", "Uint8Array.from()")}}</dt>
- <dd>Cette méthode permet de créer un nouvel objet <code>Uint8Array</code> à partir d'un itérable ou d'un objet semblable à un tableau. Voir aussi {{jsxref("Array.from()")}}.</dd>
- <dt>{{jsxref("TypedArray.of", "Uint8Array.of()")}}</dt>
- <dd>Cette méthode permet de créer un nouvel objet <code>Uint8Array</code> à partir d'un nombre variables d'arguments. Voir aussi {{jsxref("Array.of()")}}.</dd>
-</dl>
-
-<h2 id="Prototype_Uint8Array">Prototype <code>Uint8Array</code></h2>
-
-<p>Tous les objets <code>Uint8Array</code> héritent de {{jsxref("TypedArray.prototype", "%TypedArray%.prototype")}}.</p>
-
-<h3 id="Propriétés_2">Propriétés</h3>
-
-<dl>
- <dt><code>Uint8Array.prototype.constructor</code></dt>
- <dd>Cette propriété renvoie la fonction qui a créé l'instance du prototype. Par défaut, ce sera le constructeur <code>Uint8Array</code>.</dd>
- <dt>{{jsxref("TypedArray.prototype.buffer", "Uint8Array.prototype.buffer")}} {{readonlyInline}}</dt>
- <dd>Cette propriété renvoie l'objet {{jsxref("ArrayBuffer")}} référencé par l'objet <code>Uint8Array</code> Elle est déterminée lors de la construction et est accessible uniquement en <strong>lecture seule</strong>.</dd>
- <dt>{{jsxref("TypedArray.prototype.byteLength", "Uint8Array.prototype.byteLength")}} {{readonlyInline}}</dt>
- <dd>Cette propriété renvoie la longueur, exprimée en octets, de l'objet <code>Uint8Array</code> à partir du début de l'objet {{jsxref("ArrayBuffer")}} correspondant. Elle est déterminée lors de la construction et est accessible uniquement en <strong>lecture seule</strong>.</dd>
- <dt>{{jsxref("TypedArray.prototype.byteOffset", "Uint8Array.prototype.byteOffset")}} {{readonlyInline}}</dt>
- <dd>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 <strong>lecture seule</strong>.</dd>
- <dt>{{jsxref("TypedArray.prototype.length", "Uint8Array.prototype.length")}} {{readonlyInline}}</dt>
- <dd>Cette propriété renvoie le nombre d'éléments contenus dans le tableau <code>Uint8Array</code>. Elle est déterminée lors de la construction et est accessible uniquement en <strong>lecture seule</strong>.</dd>
-</dl>
-
-<h3 id="Méthodes_2">Méthodes</h3>
-
-<dl>
- <dt>{{jsxref("TypedArray.copyWithin", "Uint8Array.prototype.copyWithin()")}}</dt>
- <dd>Copie une suite d'éléments d'un tableau dans le tableau. Voir également {{jsxref("Array.prototype.copyWithin()")}}.</dd>
- <dt>{{jsxref("TypedArray.entries", "Uint8Array.prototype.entries()")}}</dt>
- <dd>Renvoie un nouvel objet <code>Array Iterator</code> qui contient les paires clé/valeur pour chaque indice du tableau. Voir également {{jsxref("Array.prototype.entries()")}}.</dd>
- <dt>{{jsxref("TypedArray.every", "Uint8Array.prototype.every()")}}</dt>
- <dd>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()")}}.</dd>
- <dt>{{jsxref("TypedArray.fill", "Uint8Array.prototype.fill()")}}</dt>
- <dd>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()")}}.</dd>
- <dt>{{jsxref("TypedArray.filter", "Uint8Array.prototype.filter()")}}</dt>
- <dd>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()")}}.</dd>
- <dt>{{jsxref("TypedArray.find", "Uint8Array.prototype.find()")}}</dt>
- <dd>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 <code>undefined</code> sera renvoyé. Voir également {{jsxref("Array.prototype.find()")}}.</dd>
- <dt>{{jsxref("TypedArray.findIndex", "Uint8Array.prototype.findIndex()")}}</dt>
- <dd>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()")}}.</dd>
- <dt>{{jsxref("TypedArray.forEach", "Uint8Array.prototype.forEach()")}}</dt>
- <dd>Appelle une fonction pour chacun des élément du tableau. Voir également {{jsxref("Array.prototype.forEach()")}}.</dd>
- <dt>{{jsxref("TypedArray.includes", "Uint8Array.prototype.includes()")}}</dt>
- <dd>Détermine si le tableau typé contient un élément donné. Cette méthode renvoie <code>true</code> ou <code>false</code> selon le cas de figure. Voir également {{jsxref("Array.prototype.includes()")}}.</dd>
- <dt>{{jsxref("TypedArray.indexOf", "Uint8Array.prototype.indexOf()")}}</dt>
- <dd>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()")}}.</dd>
- <dt>{{jsxref("TypedArray.join", "Uint8Array.prototype.join()")}}</dt>
- <dd>Fusionne l'ensemble des éléments du tableau en une chaîne de caractères. Voir également {{jsxref("Array.prototype.join()")}}.</dd>
- <dt>{{jsxref("TypedArray.keys", "Uint8Array.prototype.keys()")}}</dt>
- <dd>Renvoie un nouvel objet <code>Array Iterator</code> qui contient les clés de chaque indice du tableau. Voir également {{jsxref("Array.prototype.keys()")}}.</dd>
- <dt>{{jsxref("TypedArray.lastIndexOf", "Uint8Array.prototype.lastIndexOf()")}}</dt>
- <dd>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()")}}.</dd>
- <dt>{{jsxref("TypedArray.map", "Uint8Array.prototype.map()")}}</dt>
- <dd>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()")}}.</dd>
- <dt>{{jsxref("TypedArray.move", "Uint8Array.prototype.move()")}} {{non-standard_inline}} {{unimplemented_inline}}</dt>
- <dd>Ancienne version, non-standard, de {{jsxref("TypedArray.copyWithin", "Uint8Array.prototype.copyWithin()")}}.</dd>
- <dt>{{jsxref("TypedArray.reduce", "Uint8Array.prototype.reduce()")}}</dt>
- <dd>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()")}}.</dd>
- <dt>{{jsxref("TypedArray.reduceRight", "Uint8Array.prototype.reduceRight()")}}</dt>
- <dd>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()")}}.</dd>
- <dt>{{jsxref("TypedArray.reverse", "Uint8Array.prototype.reverse()")}}</dt>
- <dd>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()")}}.</dd>
- <dt>{{jsxref("TypedArray.set", "Uint8Array.prototype.set()")}}</dt>
- <dd>Enregistre plusieurs valeurs dans le tableau typé à partir de valeurs d'un autre tableau.</dd>
- <dt>{{jsxref("TypedArray.slice", "Uint8Array.prototype.slice()")}}</dt>
- <dd>Extrait un fragment d'un tableau et renvoie ce fragment. Voir également {{jsxref("Array.prototype.slice()")}}.</dd>
- <dt>{{jsxref("TypedArray.some", "Uint8Array.prototype.some()")}}</dt>
- <dd>Renvoie <code>true</code> si au moins un des éléments remplit une condition donnée par une fonction de test. Voir également {{jsxref("Array.prototype.some()")}}.</dd>
- <dt>{{jsxref("TypedArray.sort", "Uint8Array.prototype.sort()")}}</dt>
- <dd>Trie les éléments du tableau et renvoie ce tableau. Voir également {{jsxref("Array.prototype.sort()")}}.</dd>
- <dt>{{jsxref("TypedArray.subarray", "Uint8Array.prototype.subarray()")}}</dt>
- <dd>Renvoie un nouvel objet <code>Uint8Array</code> qui est le fragment du tableau courant, entre les indices de début et de fin donnés.</dd>
- <dt>{{jsxref("TypedArray.values", "Uint8Array.prototype.values()")}}</dt>
- <dd>Renvoie un nouvel objet <code>Array Iterator</code> qui contient les valeurs correspondantes à chaque indice du tableau. Voir également {{jsxref("Array.prototype.values()")}}.</dd>
- <dt>{{jsxref("TypedArray.toLocaleString", "Uint8Array.prototype.toLocaleString()")}}</dt>
- <dd>Renvoie une chaîne de caractères localisée qui représente le tableau et ses éléments. Voir également {{jsxref("Array.prototype.toLocaleString()")}}.</dd>
- <dt>{{jsxref("TypedArray.toString", "Uint8Array.prototype.toString()")}}</dt>
- <dd>Renvoie une chaîne de caractère qui représente le tableau et ses éléments. Voir également {{jsxref("Array.prototype.toString()")}}.</dd>
- <dt>{{jsxref("TypedArray.@@iterator", "Uint8Array.prototype[@@iterator]()")}}</dt>
- <dd>Renvoie un nouvel objet <code>Array Iterator</code> qui contient les valeurs correspondantes à chaque indice du tableau.</dd>
-</dl>
-
-<h2 id="Exemples">Exemples</h2>
-
-<p>Différentes façons de construire un objet <code>Uint8Array</code> :</p>
-
-<pre class="brush: js">// Construction à partir d'une longueur
-var 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]);
-console.log(arr[1]); // 31
-
-// Construction à partir d'un tableau typé
-var x = new Uint8Array([21, 31]);
-var 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);
-
-// Construction à partir d'un itérable
-var iterable = function*(){ yield* [1,2,3]; }();
-var uint8 = new Uint8Array(iterable);
-// Uint8Array[1, 2, 3]
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Typed Array')}}</td>
-   <td>{{Spec2('Typed Array')}}</td>
-   <td>Englobée par ECMAScript 2015.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#table-49', 'TypedArray constructors')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td>Définition initiale au sein d'un standard ECMA. <code>new</code> est obligatoire.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#table-49', 'TypedArray constructors')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td>ECMAScript 2017 a modifié le constructeur <code>Uint8Array</code> afin qu'il utilise l'opération <code>ToIndex</code> et qu'il puisse être utilisé sans argument.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Uint8Array")}}</p>
-
-<h2 id="Notes_de_compatibilité">Notes de compatibilité</h2>
-
-<p>À partir d'ECMAScript 2015 (ES6), <code>Uint8Array</code> doit être utilisé avec {{jsxref("Opérateurs/L_opérateur_new", "new")}}. Appeler un constructeur <code>Uint8Array</code> comme une fonction, sans <code>new</code>, provoquera une exception {{jsxref("TypeError")}}.</p>
-
-<pre class="brush: js example-bad">var dv = Uint8Array([1, 2, 3]);
-// TypeError: calling a builtin Uint8Array constructor
-// without new is forbidden</pre>
-
-<pre class="brush: js example-good">var dv = new Uint8Array([1, 2, 3]);</pre>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/JavaScript/Tableaux_typés">Les tableaux typés en JavaScript</a></li>
- <li>{{jsxref("ArrayBuffer")}}</li>
- <li>{{jsxref("DataView")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/uint8array/index.md b/files/fr/web/javascript/reference/global_objects/uint8array/index.md
new file mode 100644
index 0000000000..e4cb8de79c
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/uint8array/index.md
@@ -0,0 +1,181 @@
+---
+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
+---
+{{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
+
+    new Uint8Array(); // apparu avec ES2017
+    new Uint8Array(longueur);
+    new Uint8Array(tableauTypé);
+    new Uint8Array(objet);
+    new Uint8Array(tampon [, décalage [, longueur]]);
+
+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
+
+- {{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
+
+- {{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()")}}.
+
+## 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}}
+  - : 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()")}}
+  - : 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.
+
+## Exemples
+
+Différentes façons de construire un objet `Uint8Array` :
+
+```js
+// Construction à partir d'une longueur
+var 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]);
+console.log(arr[1]); // 31
+
+// Construction à partir d'un tableau typé
+var x = new Uint8Array([21, 31]);
+var 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);
+
+// Construction à partir d'un itérable
+var iterable = function*(){ yield* [1,2,3]; }();
+var 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. |
+
+## 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]);
+```
+
+## Voir aussi
+
+- [Les tableaux typés en JavaScript](/fr/docs/Web/JavaScript/Tableaux_typés)
+- {{jsxref("ArrayBuffer")}}
+- {{jsxref("DataView")}}
diff --git a/files/fr/web/javascript/reference/global_objects/uint8clampedarray/index.html b/files/fr/web/javascript/reference/global_objects/uint8clampedarray/index.html
deleted file mode 100644
index 8a6dc95446..0000000000
--- a/files/fr/web/javascript/reference/global_objects/uint8clampedarray/index.html
+++ /dev/null
@@ -1,207 +0,0 @@
----
-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
----
-<div>{{JSRef}}</div>
-
-<p>Le tableau typé <strong><code>Uint8ClampedArray</code></strong> 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 à <code>0</code>. 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).</p>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">new Uint8ClampedArray(); // apparu avec ES2017
-new Uint8ClampedArray(longueur);
-new Uint8ClampedArray(tableauTypé);
-new Uint8ClampedArray(objet);
-new Uint8ClampedArray(tampon [, décalage [, longueur]]);</pre>
-
-<p>Pour plus d'informations sur la syntaxe du constructeur et le rôle des différents paramètres, voir la page <em><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/TypedArray#Syntaxe">TypedArray</a></em>.</p>
-
-<h2 id="Propriétés">Propriétés</h2>
-
-<dl>
- <dt>{{jsxref("TypedArray.BYTES_PER_ELEMENT", "Uint8ClampedArray.BYTES_PER_ELEMENT")}}</dt>
- <dd>Cette propriété renvoie la taille d'un élément du tableau, en octets. En l'occurence, pour <code>Uint8ClampedArray</code> ce sera <code>1</code>.</dd>
- <dt>Uint8ClampedArray.length</dt>
- <dd>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")}}.</dd>
- <dt>{{jsxref("TypedArray.name", "Uint8ClampedArray.name")}}</dt>
- <dd>Cette propriété renvoie la chaîne de caractères correspondant au nom du constructeur. Pour <code>Uint8ClampedArray</code> ce sera : "Uint8ClampedArray".</dd>
- <dt>{{jsxref("TypedArray.prototype", "Uint8ClampedArray.prototype")}}</dt>
- <dd>Le prototype des objets <em>TypedArray</em>.</dd>
-</dl>
-
-<h2 id="Méthodes">Méthodes</h2>
-
-<dl>
- <dt>{{jsxref("TypedArray.from", "Uint8ClampedArray.from()")}}</dt>
- <dd>Cette méthode permet de créer un nouvel objet <code>Uint8ClampedArray</code> à partir d'un itérable ou d'un objet semblable à un tableau. Voir aussi {{jsxref("Array.from()")}}.</dd>
- <dt>{{jsxref("TypedArray.of", "Uint8ClampedArray.of()")}}</dt>
- <dd>Cette méthode permet de créer un nouvel objet <code>Uint8ClampedArray</code> à partir d'un nombre variable d'arguments. Voir aussi {{jsxref("Array.of()")}}.</dd>
-</dl>
-
-<h2 id="Prototype_Uint8ClampedArray">Prototype <code>Uint8ClampedArray</code></h2>
-
-<p>Tous les objets <code>Uint8ClampedArray</code> héritent de {{jsxref("TypedArray.prototype", "%TypedArray%.prototype")}}.</p>
-
-<h3 id="Propriétés_2">Propriétés</h3>
-
-<dl>
- <dt><code>Uint8ClampedArray.prototype.constructor</code></dt>
- <dd>Cette propriété renvoie la fonction qui a créé l'instance du prototype. Par défaut, ce sera le constructeur <code>Uint8ClampedArray</code>.</dd>
- <dt>{{jsxref("TypedArray.prototype.buffer", "Uint8ClampedArray.prototype.buffer")}} {{readonlyInline}}</dt>
- <dd>Cette propriété renvoie l'objet {{jsxref("ArrayBuffer")}} référencé par l'objet <code>Uint8ClampedArray</code> Elle est déterminée lors de la construction et est accessible uniquement en <strong>lecture seule</strong>.</dd>
- <dt>{{jsxref("TypedArray.prototype.byteLength", "Uint8ClampedArray.prototype.byteLength")}} {{readonlyInline}}</dt>
- <dd>Cette propriété renvoie la longueur, exprimée en octets, de l'objet <code>Uint8ClampedArray</code> à partir du début de l'objet {{jsxref("ArrayBuffer")}} correspondant. Elle est déterminée lors de la construction et est accessible uniquement en <strong>lecture seule</strong>.</dd>
- <dt>{{jsxref("TypedArray.prototype.byteOffset", "Uint8ClampedArray.prototype.byteOffset")}} {{readonlyInline}}</dt>
- <dd>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 <strong>lecture seule</strong>.</dd>
- <dt>{{jsxref("TypedArray.prototype.length", "Uint8ClampedArray.prototype.length")}} {{readonlyInline}}</dt>
- <dd>Cette propriété renvoie le nombre d'éléments contenus dans le tableau <code>Uint8ClampedArray</code>. Elle est déterminée lors de la construction et est accessible uniquement en <strong>lecture seule</strong>.</dd>
-</dl>
-
-<h3 id="Méthodes_2">Méthodes</h3>
-
-<dl>
- <dt>{{jsxref("TypedArray.copyWithin", "Uint8ClampedArray.prototype.copyWithin()")}}</dt>
- <dd>Copie une suite d'éléments d'un tableau dans le tableau. Voir également {{jsxref("Array.prototype.copyWithin()")}}.</dd>
- <dt>{{jsxref("TypedArray.entries", "Uint8ClampedArray.prototype.entries()")}}</dt>
- <dd>Renvoie un nouvel objet <code>Array Iterator</code> qui contient les paires clé/valeur pour chaque indice du tableau. Voir également {{jsxref("Array.prototype.entries()")}}.</dd>
- <dt>{{jsxref("TypedArray.every", "Uint8ClampedArray.prototype.every()")}}</dt>
- <dd>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()")}}.</dd>
- <dt>{{jsxref("TypedArray.fill", "Uint8ClampedArray.prototype.fill()")}}</dt>
- <dd>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()")}}.</dd>
- <dt>{{jsxref("TypedArray.filter", "Uint8ClampedArray.prototype.filter()")}}</dt>
- <dd>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()")}}.</dd>
- <dt>{{jsxref("TypedArray.find", "Uint8ClampedArray.prototype.find()")}}</dt>
- <dd>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 <code>undefined</code> sera renvoyé. Voir également {{jsxref("Array.prototype.find()")}}.</dd>
- <dt>{{jsxref("TypedArray.findIndex", "Uint8ClampedArray.prototype.findIndex()")}}</dt>
- <dd>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()")}}.</dd>
- <dt>{{jsxref("TypedArray.forEach", "Uint8ClampedArray.prototype.forEach()")}}</dt>
- <dd>Appelle une fonction pour chacun des élément du tableau. Voir également {{jsxref("Array.prototype.forEach()")}}.</dd>
- <dt>{{jsxref("TypedArray.includes", "Uint8ClampedArray.prototype.includes()")}}</dt>
- <dd>Détermine si le tableau typé contient un élément donné. Cette méthode renvoie <code>true</code> ou <code>false</code> selon le cas de figure. Voir également {{jsxref("Array.prototype.includes()")}}.</dd>
- <dt>{{jsxref("TypedArray.indexOf", "Uint8ClampedArray.prototype.indexOf()")}}</dt>
- <dd>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()")}}.</dd>
- <dt>{{jsxref("TypedArray.join", "Uint8ClampedArray.prototype.join()")}}</dt>
- <dd>Fusionne l'ensemble des éléments du tableau en une chaîne de caractères. Voir également {{jsxref("Array.prototype.join()")}}.</dd>
- <dt>{{jsxref("TypedArray.keys", "Uint8ClampedArray.prototype.keys()")}}</dt>
- <dd>Renvoie un nouvel objet <code>Array Iterator</code> qui contient les clés de chaque indice du tableau. Voir également {{jsxref("Array.prototype.keys()")}}.</dd>
- <dt>{{jsxref("TypedArray.lastIndexOf", "Uint8ClampedArray.prototype.lastIndexOf()")}}</dt>
- <dd>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()")}}.</dd>
- <dt>{{jsxref("TypedArray.map", "Uint8ClampedArray.prototype.map()")}}</dt>
- <dd>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()")}}.</dd>
- <dt>{{jsxref("TypedArray.move", "Uint8ClampedArray.prototype.move()")}} {{non-standard_inline}} {{unimplemented_inline}}</dt>
- <dd>Ancienne version, non-standard, de {{jsxref("TypedArray.copyWithin", "Uint8ClampedArray.prototype.copyWithin()")}}.</dd>
- <dt>{{jsxref("TypedArray.reduce", "Uint8ClampedArray.prototype.reduce()")}}</dt>
- <dd>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()")}}.</dd>
- <dt>{{jsxref("TypedArray.reduceRight", "Uint8ClampedArray.prototype.reduceRight()")}}</dt>
- <dd>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()")}}.</dd>
- <dt>{{jsxref("TypedArray.reverse", "Uint8ClampedArray.prototype.reverse()")}}</dt>
- <dd>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()")}}.</dd>
- <dt>{{jsxref("TypedArray.set", "Uint8ClampedArray.prototype.set()")}}</dt>
- <dd>Enregistre plusieurs valeurs dans le tableau typé à partir de valeurs d'un autre tableau.</dd>
- <dt>{{jsxref("TypedArray.slice", "Uint8ClampedArray.prototype.slice()")}}</dt>
- <dd>Extrait un fragment d'un tableau et renvoie ce fragment. Voir également {{jsxref("Array.prototype.slice()")}}.</dd>
- <dt>{{jsxref("TypedArray.some", "Uint8ClampedArray.prototype.some()")}}</dt>
- <dd>Renvoie <code>true</code> si au moins un des éléments remplit une condition donnée par une fonction de test. Voir également {{jsxref("Array.prototype.some()")}}.</dd>
- <dt>{{jsxref("TypedArray.sort", "Uint8ClampedArray.prototype.sort()")}}</dt>
- <dd>Trie les éléments du tableau et renvoie ce tableau. Voir également {{jsxref("Array.prototype.sort()")}}.</dd>
- <dt>{{jsxref("TypedArray.subarray", "Uint8ClampedArray.prototype.subarray()")}}</dt>
- <dd>Renvoie un nouvel objet <code>Uint8ClampedArray</code> qui est le fragment du tableau courant, entre les indices de début et de fin donnés.</dd>
- <dt>{{jsxref("TypedArray.values", "Uint8ClampedArray.prototype.values()")}}</dt>
- <dd>Renvoie un nouvel objet <code>Array Iterator</code> qui contient les valeurs correspondantes à chaque indice du tableau. Voir également {{jsxref("Array.prototype.values()")}}.</dd>
- <dt>{{jsxref("TypedArray.toLocaleString", "Uint8ClampedArray.prototype.toLocaleString()")}}</dt>
- <dd>Renvoie une chaîne de caractères localisée qui représente le tableau et ses éléments. Voir également {{jsxref("Array.prototype.toLocaleString()")}}.</dd>
- <dt>{{jsxref("TypedArray.toString", "Uint8ClampedArray.prototype.toString()")}}</dt>
- <dd>Renvoie une chaîne de caractère qui représente le tableau et ses éléments. Voir également {{jsxref("Array.prototype.toString()")}}.</dd>
- <dt>{{jsxref("TypedArray.@@iterator", "Uint8ClampedArray.prototype[@@iterator]()")}}</dt>
- <dd>Renvoie un nouvel objet <code>Array Iterator</code> qui contient les valeurs correspondantes à chaque indice du tableau.</dd>
-</dl>
-
-<h2 id="Exemples">Exemples</h2>
-
-<p>Différentes façon de créer un objet <code>Uint8ClampedArray</code> :</p>
-
-<pre class="brush: js">// Construction à partir d'une longueur
-var uintc8 = new Uint8ClampedArray(2);
-uintc8[0] = 42;
-uintc8[1] = 1337;
-console.log(uintc8[0]); // 42
-console.log(uintc8[1]); // 255 (valeur ramenée à 255)
-console.log(uintc8.length); // 2
-console.log(uintc8.BYTES_PER_ELEMENT); // 1
-
-// Construction à partir d'un tableau
-var 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);
-console.log(y[0]); // 21
-
-// Construction à partir d'un ArrayBuffer
-var buffer = new ArrayBuffer(8);
-var z = new Uint8ClampedArray(buffer, 1, 4);
-
-// Construction à partir d'un itérable
-var iterable = function*(){ yield* [1,2,3]; }();
-var uintc8 = new Uint8ClampedArray(iterable);
-// Uint8ClampedArray[1, 2, 3]
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Typed Array')}}</td>
-   <td>{{Spec2('Typed Array')}}</td>
-   <td>Englobée par ECMAScript 2015</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#table-49', 'TypedArray constructors')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td>Définition initiale au sein d'un standard ECMA. <code>new</code> est obligatoire.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#table-49', 'TypedArray constructors')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td>ECMAScript 2017 a modifié le constructeur <code>Uint8ClampedArray</code> afin qu'il utilise l'opération <code>ToIndex</code> et qu'il puisse être utilisé sans argument.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Uint8ClampedArray")}}</p>
-
-<h2 id="Notes_de_compatibilité">Notes de compatibilité</h2>
-
-<p>À partir d'ECMAScript 2015 (ES6), <code>Uint8ClampedArray</code> doit être utilisé avec {{jsxref("Opérateurs/L_opérateur_new", "new")}}. Appeler <code>Uint8ClampedArray</code> comme une fonction, sans <code>new</code>, provoquera une exception {{jsxref("TypeError")}}.</p>
-
-<pre class="brush: js example-bad">var dv = Uint8ClampedArray([1, 2, 3]);
-// TypeError: calling a builtin Uint8ClampedArray constructor
-// without new is forbidden</pre>
-
-<pre class="brush: js example-good">var dv = new Uint8ClampedArray([1, 2, 3]);</pre>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/JavaScript/Tableaux_typés">Les tableaux typés en JavaScript</a></li>
- <li>{{jsxref("ArrayBuffer")}}</li>
- <li>{{jsxref("DataView")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/uint8clampedarray/index.md b/files/fr/web/javascript/reference/global_objects/uint8clampedarray/index.md
new file mode 100644
index 0000000000..d8c0d29dcf
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/uint8clampedarray/index.md
@@ -0,0 +1,183 @@
+---
+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
+---
+{{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
+
+    new Uint8ClampedArray(); // apparu avec ES2017
+    new Uint8ClampedArray(longueur);
+    new Uint8ClampedArray(tableauTypé);
+    new Uint8ClampedArray(objet);
+    new Uint8ClampedArray(tampon [, décalage [, longueur]]);
+
+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
+
+- {{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
+
+- {{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()")}}.
+
+## 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}}
+  - : 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()")}}
+  - : 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()")}}
+  - : 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.
+
+## Exemples
+
+Différentes façon de créer un objet `Uint8ClampedArray` :
+
+```js
+// Construction à partir d'une longueur
+var uintc8 = new Uint8ClampedArray(2);
+uintc8[0] = 42;
+uintc8[1] = 1337;
+console.log(uintc8[0]); // 42
+console.log(uintc8[1]); // 255 (valeur ramenée à 255)
+console.log(uintc8.length); // 2
+console.log(uintc8.BYTES_PER_ELEMENT); // 1
+
+// Construction à partir d'un tableau
+var 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);
+console.log(y[0]); // 21
+
+// Construction à partir d'un ArrayBuffer
+var buffer = new ArrayBuffer(8);
+var z = new Uint8ClampedArray(buffer, 1, 4);
+
+// Construction à partir d'un itérable
+var iterable = function*(){ yield* [1,2,3]; }();
+var 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. |
+
+## 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]);
+```
+
+## Voir aussi
+
+- [Les tableaux typés en JavaScript](/fr/docs/Web/JavaScript/Tableaux_typés)
+- {{jsxref("ArrayBuffer")}}
+- {{jsxref("DataView")}}
diff --git a/files/fr/web/javascript/reference/global_objects/undefined/index.html b/files/fr/web/javascript/reference/global_objects/undefined/index.html
deleted file mode 100644
index 07af77f642..0000000000
--- a/files/fr/web/javascript/reference/global_objects/undefined/index.html
+++ /dev/null
@@ -1,134 +0,0 @@
----
-title: undefined
-slug: Web/JavaScript/Reference/Global_Objects/undefined
-tags:
-  - JavaScript
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/undefined
-original_slug: Web/JavaScript/Reference/Objets_globaux/undefined
----
-<div>{{jsSidebar("Objects")}}</div>
-
-<p>La propriété globale <strong><code>undefined</code></strong> représente la valeur <code>undefined</code><em>.</em> Cette valeur est l'<a href="/fr/docs/Web/JavaScript/Structures_de_données#Le_type_ind.C3.A9fini">un des types primitifs de JavaScript</a>.</p>
-
-<p>{{js_property_attributes(0,0,0)}}</p>
-
-<div>{{EmbedInteractiveExample("pages/js/globalprops-undefined.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">undefined</pre>
-
-<h2 id="Description">Description</h2>
-
-<p><code>undefined</code> est une propriété de <em>l'objet global</em>, c'est-à-dire qu'elle est accessible globalement. La valeur initiale d'<code>undefined</code> est la valeur primitive <code>undefined</code>.</p>
-
-<p>Dans les navigateurs modernes, d'après la spécification ECMAScript 5, <code>undefined</code> est une propriété non-configurable et non accessible en écriture. Si, toutefois, elle peut être modifiée dans l'environnement utilisé, il faut éviter de l'écraser.</p>
-
-<p>Une variable pour laquelle aucune valeur n'a été assignée sera de type <code>undefined</code>. Une méthode ou instruction renvoie également <code>undefined</code> si la variable à évaluer n'a pas de valeur assignée. Une fonction renvoie <code>undefined</code> si aucune valeur n'a été {{jsxref("Instructions/return", "retournée","",1)}}.</p>
-
-<div class="warning">
-<p><strong>Attention :</strong> Puisque <code>undefined</code> n'est pas un <a href="/fr/docs/Web/JavaScript/Reference/Grammaire_lexicale#Mots-cl.C3.A9s">mot réservé du langage JavaScript</a>, il peut être utilisé comme <a href="/fr/docs/Web/JavaScript/Guide/Valeurs,_variables,_et_littéraux#Variables">identifiant</a> (nom de variable) dans toute portée autre que la portée globale. Ceci est une très mauvaise idée pour la lisibilité du code et sa maintenabilité.</p>
-
-<pre class="brush: js">// À NE PAS FAIRE
-
-// écrit "toto string" dans la console
-(function() { var undefined = 'toto'; console.log(undefined, typeof undefined); })();
-
-// écrit "toto string" dans la console
-(function(undefined) { console.log(undefined, typeof undefined); })('toto');
-</pre>
-</div>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="L'égalité_stricte_et_undefined">L'égalité stricte et <code>undefined</code></h3>
-
-<p>Il est possible d'utiliser <code>undefined</code> et les opérateurs stricts pour l''égalité et l'inégalité strictes afin de déterminer si une variable a une valeur affectée. Dans le code qui suit, la variable <code>x</code> n'est pas initialisée et la première instruction <code>if</code> sera évaluée à <code>true</code> (vrai).</p>
-
-<pre class="brush: js">var x;
-if (x === undefined) {
-   // ces instructions seront exécutées
-}
-if (x !== undefined) {
-   // ces instructions ne seront pas exécutées
-}
-</pre>
-
-<div class="note">
-<p><strong>Note :</strong> L'opérateur d'égalité stricte doit être utilisé ici plutôt que l'opérateur d'égalité simple. En effet, <code>x == undefined</code> vérifie également si <code>x</code> vaut <code>null</code>, tandis que l'égalité stricte ne le fait pas. <code>null</code> n'est pas équivalent à <code>undefined</code>. Voir la page sur les {{jsxref("Opérateurs/Opérateurs_de_comparaison","opérateurs de comparaison","",1)}} pour plus de détails.</p>
-</div>
-
-<h3 id="L'opérateur_typeof_et_undefined">L'opérateur <code>typeof</code> et <code>undefined</code></h3>
-
-<p>L'opérateur {{jsxref("Opérateurs/L_opérateur_typeof", "typeof")}} peut également être utilisé :</p>
-
-<pre class="brush: js">var x;
-if (typeof x == 'undefined') {
-   // ces instructions seront exécutées
-}
-</pre>
-
-<p>Une des raisons pour utiliser {{jsxref("Opérateurs/L_opérateur_typeof", "typeof")}} est qu'il ne renverra pas d'erreur si la variable n'a pas été définie :</p>
-
-<pre class="brush: js">// x n'a pas encore été défini
-if (typeof x === 'undefined') { // donnera true sans erreur
-   // ces instructions seront exécutées
-}
-
-if (x === undefined) { // déclenche une ReferenceError
-
-}
-</pre>
-
-<h3 id="L'opérateur_void_et_undefined">L'opérateur <code>void</code> et <code>undefined</code></h3>
-
-<p>L'opérateur {{jsxref("Opérateurs/L_opérateur_void", "void")}} est une troisième solution.</p>
-
-<pre class="brush: js">var x;
-if (x === void 0) {
-   // ces instructions seront exécutées
-}
-
-// y n'a pas été défini avant
-if (y === void 0) {
-   // déclenche une ReferenceError: y is not defined
-   // (contrairement à `typeof`)
-}
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES1', '#sec-4.3.9', 'undefined')}}</td>
-   <td>{{Spec2('ES1')}}</td>
-   <td>Définition initiale. Implémentée avec JavaScript 1.3.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-15.1.1.3', 'undefined')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-undefined', 'undefined')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-undefined', 'undefined')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.undefined")}}</p>
diff --git a/files/fr/web/javascript/reference/global_objects/undefined/index.md b/files/fr/web/javascript/reference/global_objects/undefined/index.md
new file mode 100644
index 0000000000..18917f5b36
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/undefined/index.md
@@ -0,0 +1,112 @@
+---
+title: undefined
+slug: Web/JavaScript/Reference/Global_Objects/undefined
+tags:
+  - JavaScript
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/undefined
+original_slug: Web/JavaScript/Reference/Objets_globaux/undefined
+---
+{{jsSidebar("Objects")}}
+
+La propriété globale **`undefined`** représente la valeur `undefined`_._ Cette valeur est l'[un des types primitifs de JavaScript](/fr/docs/Web/JavaScript/Structures_de_données#Le_type_ind.C3.A9fini).
+
+{{js_property_attributes(0,0,0)}}
+
+{{EmbedInteractiveExample("pages/js/globalprops-undefined.html")}}
+
+## Syntaxe
+
+    undefined
+
+## Description
+
+`undefined` est une propriété de _l'objet global_, c'est-à-dire qu'elle est accessible globalement. La valeur initiale d'`undefined` est la valeur primitive `undefined`.
+
+Dans les navigateurs modernes, d'après la spécification ECMAScript 5, `undefined` est une propriété non-configurable et non accessible en écriture. Si, toutefois, elle peut être modifiée dans l'environnement utilisé, il faut éviter de l'écraser.
+
+Une variable pour laquelle aucune valeur n'a été assignée sera de type `undefined`. Une méthode ou instruction renvoie également `undefined` si la variable à évaluer n'a pas de valeur assignée. Une fonction renvoie `undefined` si aucune valeur n'a été {{jsxref("Instructions/return", "retournée","",1)}}.
+
+> **Attention :** Puisque `undefined` n'est pas un [mot réservé du langage JavaScript](/fr/docs/Web/JavaScript/Reference/Grammaire_lexicale#Mots-cl.C3.A9s), il peut être utilisé comme [identifiant](/fr/docs/Web/JavaScript/Guide/Valeurs,_variables,_et_littéraux#Variables) (nom de variable) dans toute portée autre que la portée globale. Ceci est une très mauvaise idée pour la lisibilité du code et sa maintenabilité.
+>
+> ```js
+> // À NE PAS FAIRE
+>
+> // écrit "toto string" dans la console
+> (function() { var undefined = 'toto'; console.log(undefined, typeof undefined); })();
+>
+> // écrit "toto string" dans la console
+> (function(undefined) { console.log(undefined, typeof undefined); })('toto');
+> ```
+
+## Exemples
+
+### L'égalité stricte et `undefined`
+
+Il est possible d'utiliser `undefined` et les opérateurs stricts pour l''égalité et l'inégalité strictes afin de déterminer si une variable a une valeur affectée. Dans le code qui suit, la variable `x` n'est pas initialisée et la première instruction `if` sera évaluée à `true` (vrai).
+
+```js
+var x;
+if (x === undefined) {
+   // ces instructions seront exécutées
+}
+if (x !== undefined) {
+   // ces instructions ne seront pas exécutées
+}
+```
+
+> **Note :** L'opérateur d'égalité stricte doit être utilisé ici plutôt que l'opérateur d'égalité simple. En effet, `x == undefined` vérifie également si `x` vaut `null`, tandis que l'égalité stricte ne le fait pas. `null` n'est pas équivalent à `undefined`. Voir la page sur les {{jsxref("Opérateurs/Opérateurs_de_comparaison","opérateurs de comparaison","",1)}} pour plus de détails.
+
+### L'opérateur `typeof` et `undefined`
+
+L'opérateur {{jsxref("Opérateurs/L_opérateur_typeof", "typeof")}} peut également être utilisé :
+
+```js
+var x;
+if (typeof x == 'undefined') {
+   // ces instructions seront exécutées
+}
+```
+
+Une des raisons pour utiliser {{jsxref("Opérateurs/L_opérateur_typeof", "typeof")}} est qu'il ne renverra pas d'erreur si la variable n'a pas été définie :
+
+```js
+// x n'a pas encore été défini
+if (typeof x === 'undefined') { // donnera true sans erreur
+   // ces instructions seront exécutées
+}
+
+if (x === undefined) { // déclenche une ReferenceError
+
+}
+```
+
+### L'opérateur `void` et `undefined`
+
+L'opérateur {{jsxref("Opérateurs/L_opérateur_void", "void")}} est une troisième solution.
+
+```js
+var x;
+if (x === void 0) {
+   // ces instructions seront exécutées
+}
+
+// y n'a pas été défini avant
+if (y === void 0) {
+   // déclenche une ReferenceError: y is not defined
+   // (contrairement à `typeof`)
+}
+```
+
+## Spécifications
+
+| Spécification                                                            | État                         | Commentaires                                          |
+| ------------------------------------------------------------------------ | ---------------------------- | ----------------------------------------------------- |
+| {{SpecName('ES1', '#sec-4.3.9', 'undefined')}}             | {{Spec2('ES1')}}         | Définition initiale. Implémentée avec JavaScript 1.3. |
+| {{SpecName('ES5.1', '#sec-15.1.1.3', 'undefined')}}     | {{Spec2('ES5.1')}}     |                                                       |
+| {{SpecName('ES6', '#sec-undefined', 'undefined')}}     | {{Spec2('ES6')}}         |                                                       |
+| {{SpecName('ESDraft', '#sec-undefined', 'undefined')}} | {{Spec2('ESDraft')}} |                                                       |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.undefined")}}
diff --git a/files/fr/web/javascript/reference/global_objects/unescape/index.html b/files/fr/web/javascript/reference/global_objects/unescape/index.html
deleted file mode 100644
index dbb70f0962..0000000000
--- a/files/fr/web/javascript/reference/global_objects/unescape/index.html
+++ /dev/null
@@ -1,91 +0,0 @@
----
-title: unescape()
-slug: Web/JavaScript/Reference/Global_Objects/unescape
-tags:
-  - Déprécié
-  - JavaScript
-translation_of: Web/JavaScript/Reference/Global_Objects/unescape
-original_slug: Web/JavaScript/Reference/Objets_globaux/unescape
----
-<div>{{jsSidebar("Objects")}}</div>
-
-<div class="warning"><p><strong>Attention :</strong> Bien que <code>unescape(…)</code> ne soit pas strictement obsolète (au sens où elle n'a pas été retirée des standards), elle est définie au sein de <a href="https://www.ecma-international.org/ecma-262/9.0/index.html#sec-additional-ecmascript-features-for-web-browsers">l'Annexe B</a> du standard ECMA-262 qui commence par :
-
-<blockquote>… L'ensemble des fonctionnalités et comportements définis dans cette annexe possède une ou plusieurs caractéristiques indésirables. En l'absence d'une utilisation historique, ces fonctionnalités seraient retirés de la spécification. …<br>
-… Les développeurs ne devraient pas utiliser ces fonctionnalités et comportements ou présupposer qu'elles existent lors de l'écriture de nouveau code ECMAScript. …</blockquote>
-</p>
-</div>
-
-<p>La fonction dépréciée <code><strong>unescape()</strong></code> calcule une nouvelle chaîne de caractères et remplace les séquences d'échappement hexadécimales par les caractères qu'elles représentent. Les séquences d'échappement peuvent provenir de la fonction {{jsxref("escape")}}. Cette méthode est obsolète, c'est pourquoi il est conseillé d'utiliser {{jsxref("decodeURI")}} ou {{jsxref("decodeURIComponent")}} à la place.</p>
-
-<div class="note"><p><strong>Note :</strong> <code>unescape()</code> ne doit pas être utilisée pour décoder les URI. À la place, utilisez <code>decodeURI</code>.</p></div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">unescape(<var>str</var>)</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>str</code></dt>
- <dd>La chaîne de caractères à décoder.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Une nouvelle chaîne de caractères dont les caractères ont été décodés.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>La fonction <code>unescape</code> est une propriété de l'<em>objet global</em>.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<pre class="brush: js">unescape("abc123");     // "abc123"
-unescape("%E4%F6%FC");  // "äöü"
-unescape("%u0107");     // "ć"
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-unescape-string', 'unescape')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td>Définie dans l'annexe B (normative) pour les fonctionnalités additionnelles d'ECMAScript pour les navigateurs Web.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-unescape-string', 'unescape')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td>Définie dans l'annexe B (normative) pour les fonctionnalités additionnelles d'ECMAScript pour les navigateurs Web.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-B.2.2', 'unescape')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td>Définie dans l'annexe B (informative) sur la compatibilité.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES1', '#sec-15.1.2.5', 'unescape')}}</td>
-   <td>{{Spec2('ES1')}}</td>
-   <td>Définition initiale</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.unescape")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("decodeURI")}}</li>
- <li>{{jsxref("decodeURIComponent")}}</li>
- <li>{{jsxref("escape")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/unescape/index.md b/files/fr/web/javascript/reference/global_objects/unescape/index.md
new file mode 100644
index 0000000000..8e012065d9
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/unescape/index.md
@@ -0,0 +1,63 @@
+---
+title: unescape()
+slug: Web/JavaScript/Reference/Global_Objects/unescape
+tags:
+  - Déprécié
+  - JavaScript
+translation_of: Web/JavaScript/Reference/Global_Objects/unescape
+original_slug: Web/JavaScript/Reference/Objets_globaux/unescape
+---
+{{jsSidebar("Objects")}}
+
+> **Attention :** Bien que `unescape(…)` ne soit pas strictement obsolète (au sens où elle n'a pas été retirée des standards), elle est définie au sein de [l'Annexe B](https://www.ecma-international.org/ecma-262/9.0/index.html#sec-additional-ecmascript-features-for-web-browsers) du standard ECMA-262 qui commence par :
+>
+> > … L'ensemble des fonctionnalités et comportements définis dans cette annexe possède une ou plusieurs caractéristiques indésirables. En l'absence d'une utilisation historique, ces fonctionnalités seraient retirés de la spécification. …
+> > … Les développeurs ne devraient pas utiliser ces fonctionnalités et comportements ou présupposer qu'elles existent lors de l'écriture de nouveau code ECMAScript. …
+
+La fonction dépréciée **`unescape()`** calcule une nouvelle chaîne de caractères et remplace les séquences d'échappement hexadécimales par les caractères qu'elles représentent. Les séquences d'échappement peuvent provenir de la fonction {{jsxref("escape")}}. Cette méthode est obsolète, c'est pourquoi il est conseillé d'utiliser {{jsxref("decodeURI")}} ou {{jsxref("decodeURIComponent")}} à la place.
+
+> **Note :** `unescape()` ne doit pas être utilisée pour décoder les URI. À la place, utilisez `decodeURI`.
+
+## Syntaxe
+
+    unescape(str)
+
+### Paramètres
+
+- `str`
+  - : La chaîne de caractères à décoder.
+
+### Valeur de retour
+
+Une nouvelle chaîne de caractères dont les caractères ont été décodés.
+
+## Description
+
+La fonction `unescape` est une propriété de l'_objet global_.
+
+## Exemples
+
+```js
+unescape("abc123");     // "abc123"
+unescape("%E4%F6%FC");  // "äöü"
+unescape("%u0107");     // "ć"
+```
+
+## Spécifications
+
+| Spécification                                                                    | État                         | Commentaires                                                                                                       |
+| -------------------------------------------------------------------------------- | ---------------------------- | ------------------------------------------------------------------------------------------------------------------ |
+| {{SpecName('ESDraft', '#sec-unescape-string', 'unescape')}} | {{Spec2('ESDraft')}} | Définie dans l'annexe B (normative) pour les fonctionnalités additionnelles d'ECMAScript pour les navigateurs Web. |
+| {{SpecName('ES6', '#sec-unescape-string', 'unescape')}}         | {{Spec2('ES6')}}         | Définie dans l'annexe B (normative) pour les fonctionnalités additionnelles d'ECMAScript pour les navigateurs Web. |
+| {{SpecName('ES5.1', '#sec-B.2.2', 'unescape')}}                 | {{Spec2('ES5.1')}}     | Définie dans l'annexe B (informative) sur la compatibilité.                                                        |
+| {{SpecName('ES1', '#sec-15.1.2.5', 'unescape')}}                 | {{Spec2('ES1')}}         | Définition initiale                                                                                                |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.unescape")}}
+
+## Voir aussi
+
+- {{jsxref("decodeURI")}}
+- {{jsxref("decodeURIComponent")}}
+- {{jsxref("escape")}}
diff --git a/files/fr/web/javascript/reference/global_objects/uneval/index.html b/files/fr/web/javascript/reference/global_objects/uneval/index.html
deleted file mode 100644
index 31b0b47555..0000000000
--- a/files/fr/web/javascript/reference/global_objects/uneval/index.html
+++ /dev/null
@@ -1,68 +0,0 @@
----
-title: uneval()
-slug: Web/JavaScript/Reference/Global_Objects/uneval
-tags:
-  - Fonction
-  - JavaScript
-  - Non-standard
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/uneval
-original_slug: Web/JavaScript/Reference/Objets_globaux/uneval
----
-<div>{{jsSidebar("Objects")}}{{Non-standard_header}}</div>
-
-<p>La fonction <code><strong>uneval()</strong></code> renvoie une chaîne de caractères représentant le code source d'un objet.</p>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">uneval(<var>objet</var>)</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>objet</code></dt>
- <dd>Une instruction ou une expression JavaScript.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Une chaîne de caractères qui représente le code source de l'objet indiqué.</p>
-
-<div class="note"><p><strong>Note :</strong> Le résultat obtenu ne sera pas une représentation JSON valide de l'objet.</p></div>
-
-<h2 id="Description">Description</h2>
-
-<p><code>uneval()</code> est une fonction disponible au plus haut niveau et n'est rattachée à aucun objet.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<pre class="brush:js">var a = 1;
-uneval(a); // renvoie une chaîne qui contient 1
-
-var b = "1";
-uneval(b) // renvoie une chaîne qui contient "1"
-
-uneval(function toto(){}); // renvoie "(function toto(){})"
-
-
-var a = uneval(function toto(){return 'salut'});
-var toto = eval(a);
-toto(); // renvoie "salut"
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<p>Cette méthode ne fait partie d'aucune spécification.</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.uneval")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Objets_globaux/eval", "eval()")}}</li>
- <li>{{jsxref("JSON.stringify()")}}</li>
- <li>{{jsxref("JSON.parse()")}}</li>
- <li>{{jsxref("Object.toSource()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/uneval/index.md b/files/fr/web/javascript/reference/global_objects/uneval/index.md
new file mode 100644
index 0000000000..de5f4d7fe4
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/uneval/index.md
@@ -0,0 +1,65 @@
+---
+title: uneval()
+slug: Web/JavaScript/Reference/Global_Objects/uneval
+tags:
+  - Fonction
+  - JavaScript
+  - Non-standard
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/uneval
+original_slug: Web/JavaScript/Reference/Objets_globaux/uneval
+---
+{{jsSidebar("Objects")}}{{Non-standard_header}}
+
+La fonction **`uneval()`** renvoie une chaîne de caractères représentant le code source d'un objet.
+
+## Syntaxe
+
+    uneval(objet)
+
+### Paramètres
+
+- `objet`
+  - : Une instruction ou une expression JavaScript.
+
+### Valeur de retour
+
+Une chaîne de caractères qui représente le code source de l'objet indiqué.
+
+> **Note :** Le résultat obtenu ne sera pas une représentation JSON valide de l'objet.
+
+## Description
+
+`uneval()` est une fonction disponible au plus haut niveau et n'est rattachée à aucun objet.
+
+## Exemples
+
+```js
+var a = 1;
+uneval(a); // renvoie une chaîne qui contient 1
+
+var b = "1";
+uneval(b) // renvoie une chaîne qui contient "1"
+
+uneval(function toto(){}); // renvoie "(function toto(){})"
+
+
+var a = uneval(function toto(){return 'salut'});
+var toto = eval(a);
+toto(); // renvoie "salut"
+```
+
+## Spécifications
+
+Cette méthode ne fait partie d'aucune spécification.
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.uneval")}}
+
+## Voir aussi
+
+- {{jsxref("Objets_globaux/eval", "eval()")}}
+- {{jsxref("JSON.stringify()")}}
+- {{jsxref("JSON.parse()")}}
+- {{jsxref("Object.toSource()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/urierror/index.html b/files/fr/web/javascript/reference/global_objects/urierror/index.html
deleted file mode 100644
index 3b83e72f11..0000000000
--- a/files/fr/web/javascript/reference/global_objects/urierror/index.html
+++ /dev/null
@@ -1,134 +0,0 @@
----
-title: URIError
-slug: Web/JavaScript/Reference/Global_Objects/URIError
-tags:
-  - Error
-  - JavaScript
-  - Object
-  - Reference
-  - URIError
-translation_of: Web/JavaScript/Reference/Global_Objects/URIError
-original_slug: Web/JavaScript/Reference/Objets_globaux/URIError
----
-<div>{{JSRef}}</div>
-
-<p>L'objet <code><strong>URIError</strong></code> représente une erreur renvoyée lorsqu'une fonction de manipulation d'URI a été utilisée de façon inappropriée.</p>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><code>new URIError([<var>message</var>[, <var>nomFichier</var>[, <var>numéroLigne</var>]]])</code></pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>message</code></dt>
- <dd>Ce paramètre est optionnel. Il correspond à un chaîne de caractères décrivant l'erreur de façon compréhensible.</dd>
- <dt><code>nomFichier</code> {{non-standard_inline}}</dt>
- <dd>Ce paramètre est optionnel. Il correspond au nom du fichier contenant le code à l'origine de l'exception.</dd>
- <dt><code>numéroLigne</code> {{non-standard_inline}}</dt>
- <dd>Ce paramètre est optionnel. Il correspond au numéro de la ligne dans le fichier contenant le code qui a entraîné l'exception.</dd>
-</dl>
-
-<h2 id="Description">Description</h2>
-
-<p>Une exception <code>URIError</code> est lancée lorsque les fonctions de gestion d'URI reçoivent une URI mal formée.</p>
-
-<h2 id="Propriétés">Propriétés</h2>
-
-<dl>
- <dt>{{jsxref("URIError.prototype")}}</dt>
- <dd>Cette propriété permet d'ajouter des propriétés à un objet <code>URIError</code>.</dd>
-</dl>
-
-<h2 id="Méthodes">Méthodes</h2>
-
-<p>L'objet global <code>URIError</code> ne contient aucune méthode qui lui soit directement attachée. Cependant, il hérite de certaines méthodes grâce à sa chaîne de prototypes.</p>
-
-<h2 id="Instances_d'URIError">Instances d'<code>URIError</code></h2>
-
-<h3 id="Propriétés_2">Propriétés</h3>
-
-<div>{{page('/fr/docs/Web/JavaScript/Reference/Objets_globaux/URIError/prototype', 'Propriétés')}}</div>
-
-<h3 id="Méthodes_2">Méthodes</h3>
-
-<div>{{page('/fr/docs/Web/JavaScript/Reference/Objets_globaux/URIError/prototype', 'Méthodes')}}</div>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Intercepter_une_exception_URIError">Intercepter une exception <code>URIError</code></h3>
-
-<pre class="brush: js">try {
-  decodeURIComponent('%');
-} catch (e) {
-  console.log(e instanceof URIError); // true
-  console.log(e.message);             // "malformed URI sequence"
-  console.log(e.name);                // "URIError"
-  console.log(e.fileName);            // "Scratchpad/1"
-  console.log(e.lineNumber);          // 2
-  console.log(e.columnNumber);        // 2
-  console.log(e.stack);               // "@Scratchpad/2:2:3\n"
-}
-</pre>
-
-<h3 id="Créer_une_exception_URIError">Créer une exception <code>URIError</code></h3>
-
-<pre class="brush: js">try {
-  throw new URIError('Coucou', 'monFichier.js', 10);
-} catch (e) {
-  console.log(e instanceof URIError); // true
-  console.log(e.message);             // "Coucou"
-  console.log(e.name);                // "URIError"
-  console.log(e.fileName);            // "monFichier.js"
-  console.log(e.lineNumber);          // 10
-  console.log(e.columnNumber);        // 0
-  console.log(e.stack);               // "@Scratchpad/2:2:9\n"
-}
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES3', '#sec-15.11.6.6', 'URIError')}}</td>
-   <td>{{Spec2('ES3')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-15.11.6.6', 'URIError')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-native-error-types-used-in-this-standard-urierror', 'URIError')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-native-error-types-used-in-this-standard-urierror', 'URIError')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.URIError")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Error")}}</li>
- <li>{{jsxref("URIError.prototype")}}</li>
- <li>{{jsxref("Objets_globaux/decodeURI", "decodeURI()")}}</li>
- <li>{{jsxref("Objets_globaux/decodeURIComponent", "decodeURIComponent()")}}</li>
- <li>{{jsxref("Objets_globaux/encodeURI", "encodeURI()")}}</li>
- <li>{{jsxref("Objets_globaux/encodeURIComponent", "encodeURIComponent()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/urierror/index.md b/files/fr/web/javascript/reference/global_objects/urierror/index.md
new file mode 100644
index 0000000000..d4dcd6db35
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/urierror/index.md
@@ -0,0 +1,107 @@
+---
+title: URIError
+slug: Web/JavaScript/Reference/Global_Objects/URIError
+tags:
+  - Error
+  - JavaScript
+  - Object
+  - Reference
+  - URIError
+translation_of: Web/JavaScript/Reference/Global_Objects/URIError
+original_slug: Web/JavaScript/Reference/Objets_globaux/URIError
+---
+{{JSRef}}
+
+L'objet **`URIError`** représente une erreur renvoyée lorsqu'une fonction de manipulation d'URI a été utilisée de façon inappropriée.
+
+## Syntaxe
+
+    new URIError([message[, nomFichier[, numéroLigne]]])
+
+### Paramètres
+
+- `message`
+  - : Ce paramètre est optionnel. Il correspond à un chaîne de caractères décrivant l'erreur de façon compréhensible.
+- `nomFichier` {{non-standard_inline}}
+  - : Ce paramètre est optionnel. Il correspond au nom du fichier contenant le code à l'origine de l'exception.
+- `numéroLigne` {{non-standard_inline}}
+  - : Ce paramètre est optionnel. Il correspond au numéro de la ligne dans le fichier contenant le code qui a entraîné l'exception.
+
+## Description
+
+Une exception `URIError` est lancée lorsque les fonctions de gestion d'URI reçoivent une URI mal formée.
+
+## Propriétés
+
+- {{jsxref("URIError.prototype")}}
+  - : Cette propriété permet d'ajouter des propriétés à un objet `URIError`.
+
+## Méthodes
+
+L'objet global `URIError` ne contient aucune méthode qui lui soit directement attachée. Cependant, il hérite de certaines méthodes grâce à sa chaîne de prototypes.
+
+## Instances d'`URIError`
+
+### Propriétés
+
+{{page('/fr/docs/Web/JavaScript/Reference/Objets_globaux/URIError/prototype', 'Propriétés')}}
+
+### Méthodes
+
+{{page('/fr/docs/Web/JavaScript/Reference/Objets_globaux/URIError/prototype', 'Méthodes')}}
+
+## Exemples
+
+### Intercepter une exception `URIError`
+
+```js
+try {
+  decodeURIComponent('%');
+} catch (e) {
+  console.log(e instanceof URIError); // true
+  console.log(e.message);             // "malformed URI sequence"
+  console.log(e.name);                // "URIError"
+  console.log(e.fileName);            // "Scratchpad/1"
+  console.log(e.lineNumber);          // 2
+  console.log(e.columnNumber);        // 2
+  console.log(e.stack);               // "@Scratchpad/2:2:3\n"
+}
+```
+
+### Créer une exception `URIError`
+
+```js
+try {
+  throw new URIError('Coucou', 'monFichier.js', 10);
+} catch (e) {
+  console.log(e instanceof URIError); // true
+  console.log(e.message);             // "Coucou"
+  console.log(e.name);                // "URIError"
+  console.log(e.fileName);            // "monFichier.js"
+  console.log(e.lineNumber);          // 10
+  console.log(e.columnNumber);        // 0
+  console.log(e.stack);               // "@Scratchpad/2:2:9\n"
+}
+```
+
+## Spécifications
+
+| Spécification                                                                                                                | Statut                       | Commentaires         |
+| ---------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName('ES3', '#sec-15.11.6.6', 'URIError')}}                                                             | {{Spec2('ES3')}}         | Définition initiale. |
+| {{SpecName('ES5.1', '#sec-15.11.6.6', 'URIError')}}                                                         | {{Spec2('ES5.1')}}     |                      |
+| {{SpecName('ES6', '#sec-native-error-types-used-in-this-standard-urierror', 'URIError')}}     | {{Spec2('ES6')}}         |                      |
+| {{SpecName('ESDraft', '#sec-native-error-types-used-in-this-standard-urierror', 'URIError')}} | {{Spec2('ESDraft')}} |                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.URIError")}}
+
+## Voir aussi
+
+- {{jsxref("Error")}}
+- {{jsxref("URIError.prototype")}}
+- {{jsxref("Objets_globaux/decodeURI", "decodeURI()")}}
+- {{jsxref("Objets_globaux/decodeURIComponent", "decodeURIComponent()")}}
+- {{jsxref("Objets_globaux/encodeURI", "encodeURI()")}}
+- {{jsxref("Objets_globaux/encodeURIComponent", "encodeURIComponent()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/weakmap/clear/index.html b/files/fr/web/javascript/reference/global_objects/weakmap/clear/index.html
deleted file mode 100644
index f270e94820..0000000000
--- a/files/fr/web/javascript/reference/global_objects/weakmap/clear/index.html
+++ /dev/null
@@ -1,51 +0,0 @@
----
-title: WeakMap.prototype.clear()
-slug: Web/JavaScript/Reference/Global_Objects/WeakMap/clear
-tags:
-  - JavaScript
-  - Méthode
-  - Obsolete
-  - Prototype
-  - Reference
-  - WeakMap
-translation_of: Web/JavaScript/Reference/Global_Objects/WeakMap/clear
-original_slug: Web/JavaScript/Reference/Objets_globaux/WeakMap/clear
----
-<div>{{JSRef}} {{obsolete_header}}</div>
-
-<p>La méthode <code><strong>clear()</strong></code> permettait de retirer tous les éléments d'un objet <code>WeakMap</code> mais celle-ci ne fait plus partie d'ECMAScript.</p>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><code><var>wm</var>.clear();</code></pre>
-
-<h2 id="Exemples">Exemples</h2>
-
-<pre class="brush: js">var wm = new WeakMap();
-var obj = {};
-
-wm.set(obj, "toto");
-wm.set(window, "truc");
-
-wm.has(obj); // true
-wm.has(window); // true
-
-wm.clear();
-
-wm.has(obj);  // false
-wm.has(window);  // false
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<p>Cette méthode ne fait partie d'aucune spécification ou brouillon. Cette méthode a fait partie du brouillon ECMAScript 6 jusqu'à la révision 28 (version du 14 octobre 2014) mais a été retiré par la suite. Cette méthode ne fait pas partie du standard final.</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.WeakMap.clear")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("WeakMap")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/weakmap/clear/index.md b/files/fr/web/javascript/reference/global_objects/weakmap/clear/index.md
new file mode 100644
index 0000000000..f08ccf1dad
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/weakmap/clear/index.md
@@ -0,0 +1,50 @@
+---
+title: WeakMap.prototype.clear()
+slug: Web/JavaScript/Reference/Global_Objects/WeakMap/clear
+tags:
+  - JavaScript
+  - Méthode
+  - Obsolete
+  - Prototype
+  - Reference
+  - WeakMap
+translation_of: Web/JavaScript/Reference/Global_Objects/WeakMap/clear
+original_slug: Web/JavaScript/Reference/Objets_globaux/WeakMap/clear
+---
+{{JSRef}} {{obsolete_header}}
+
+La méthode **`clear()`** permettait de retirer tous les éléments d'un objet `WeakMap` mais celle-ci ne fait plus partie d'ECMAScript.
+
+## Syntaxe
+
+    wm.clear();
+
+## Exemples
+
+```js
+var wm = new WeakMap();
+var obj = {};
+
+wm.set(obj, "toto");
+wm.set(window, "truc");
+
+wm.has(obj); // true
+wm.has(window); // true
+
+wm.clear();
+
+wm.has(obj);  // false
+wm.has(window);  // false
+```
+
+## Spécifications
+
+Cette méthode ne fait partie d'aucune spécification ou brouillon. Cette méthode a fait partie du brouillon ECMAScript 6 jusqu'à la révision 28 (version du 14 octobre 2014) mais a été retiré par la suite. Cette méthode ne fait pas partie du standard final.
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.WeakMap.clear")}}
+
+## Voir aussi
+
+- {{jsxref("WeakMap")}}
diff --git a/files/fr/web/javascript/reference/global_objects/weakmap/delete/index.html b/files/fr/web/javascript/reference/global_objects/weakmap/delete/index.html
deleted file mode 100644
index 6f042da1f2..0000000000
--- a/files/fr/web/javascript/reference/global_objects/weakmap/delete/index.html
+++ /dev/null
@@ -1,75 +0,0 @@
----
-title: WeakMap.prototype.delete()
-slug: Web/JavaScript/Reference/Global_Objects/WeakMap/delete
-tags:
-  - ECMAScript 2015
-  - JavaScript
-  - Méthode
-  - Prototype
-  - Reference
-  - WeakMap
-translation_of: Web/JavaScript/Reference/Global_Objects/WeakMap/delete
-original_slug: Web/JavaScript/Reference/Objets_globaux/WeakMap/delete
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <code><strong>delete()</strong></code> retire un élément donné de l'objet {{jsxref("WeakMap")}}.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/weakmap-prototype-delete.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>wm</var>.delete(<var>clé</var>);</pre>
-
-<h3 id="Paramètre">Paramètre</h3>
-
-<dl>
- <dt><code>clé</code></dt>
- <dd>Il correspond à la clé de l'élément qu'on souhaite retirer de l'objet <code>WeakMap</code>.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p><code>true</code> si un élément de l'objet <code>WeakMap</code> a bien été retiré, <code>false</code> si la clé n'a pas été trouvée ou si la clé n'est pas un objet.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<pre class="brush: js">var wm = new WeakMap();
-wm.set(window, "toto");
-
-wm.delete(window); // Renvoie true. La suppression a bien eu lieu.
-
-wm.has(window);    // Renvoie false. L'objet window n'est plus dans la WeakMap.
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-weakmap.prototype.delete', 'WeakMap.prototype.delete')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td>Définition initiale</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-weakmap.prototype.delete', 'WeakMap.prototype.delete')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.WeakMap.delete")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("WeakMap")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/weakmap/delete/index.md b/files/fr/web/javascript/reference/global_objects/weakmap/delete/index.md
new file mode 100644
index 0000000000..4fbde04d8b
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/weakmap/delete/index.md
@@ -0,0 +1,57 @@
+---
+title: WeakMap.prototype.delete()
+slug: Web/JavaScript/Reference/Global_Objects/WeakMap/delete
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - WeakMap
+translation_of: Web/JavaScript/Reference/Global_Objects/WeakMap/delete
+original_slug: Web/JavaScript/Reference/Objets_globaux/WeakMap/delete
+---
+{{JSRef}}
+
+La méthode **`delete()`** retire un élément donné de l'objet {{jsxref("WeakMap")}}.
+
+{{EmbedInteractiveExample("pages/js/weakmap-prototype-delete.html")}}
+
+## Syntaxe
+
+    wm.delete(clé);
+
+### Paramètre
+
+- `clé`
+  - : Il correspond à la clé de l'élément qu'on souhaite retirer de l'objet `WeakMap`.
+
+### Valeur de retour
+
+`true` si un élément de l'objet `WeakMap` a bien été retiré, `false` si la clé n'a pas été trouvée ou si la clé n'est pas un objet.
+
+## Exemples
+
+```js
+var wm = new WeakMap();
+wm.set(window, "toto");
+
+wm.delete(window); // Renvoie true. La suppression a bien eu lieu.
+
+wm.has(window);    // Renvoie false. L'objet window n'est plus dans la WeakMap.
+```
+
+## Spécifications
+
+| Spécification                                                                                                    | État                         | Commentaires        |
+| ---------------------------------------------------------------------------------------------------------------- | ---------------------------- | ------------------- |
+| {{SpecName('ES2015', '#sec-weakmap.prototype.delete', 'WeakMap.prototype.delete')}} | {{Spec2('ES2015')}}     | Définition initiale |
+| {{SpecName('ESDraft', '#sec-weakmap.prototype.delete', 'WeakMap.prototype.delete')}} | {{Spec2('ESDraft')}} |                     |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.WeakMap.delete")}}
+
+## Voir aussi
+
+- {{jsxref("WeakMap")}}
diff --git a/files/fr/web/javascript/reference/global_objects/weakmap/get/index.html b/files/fr/web/javascript/reference/global_objects/weakmap/get/index.html
deleted file mode 100644
index 5b6165d7a1..0000000000
--- a/files/fr/web/javascript/reference/global_objects/weakmap/get/index.html
+++ /dev/null
@@ -1,76 +0,0 @@
----
-title: WeakMap.prototype.get()
-slug: Web/JavaScript/Reference/Global_Objects/WeakMap/get
-tags:
-  - ECMAScript 2015
-  - JavaScript
-  - Méthode
-  - Prototype
-  - Reference
-  - WeakMap
-translation_of: Web/JavaScript/Reference/Global_Objects/WeakMap/get
-original_slug: Web/JavaScript/Reference/Objets_globaux/WeakMap/get
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <code><strong>get()</strong></code> permet de renvoyer un élément donné d'un objet <code>WeakMap</code>.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/weakmap-prototype-get.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>wm</var>.get(<var>clé</var>);</pre>
-
-<h3 id="Paramètre">Paramètre</h3>
-
-<dl>
- <dt><code>clé</code></dt>
- <dd>Ce paramètre est obligatoire. Il correspond à la clé de l'élément qu'on souhaite récupérer depuis l'objet <code>WeakMap</code>.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>L'élément associé à la clé donnée ou <code>undefined</code> si la clé ne peut pas être trouvée dans l'objet <code>WeakMap</code>.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<pre class="brush: js">var wm = new WeakMap();
-wm.set(window, "toto");
-
-wm.get(window); // Renvoie "toto"
-wm.get("machin");  // Renvoie undefined.
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-weakmap.prototype.get', 'WeakMap.prototype.get')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-weakmap.prototype.get', 'WeakMap.prototype.get')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.WeakMap.get")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("WeakMap")}}</li>
- <li>{{jsxref("WeakMap.set()")}}</li>
- <li>{{jsxref("WeakMap.has()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/weakmap/get/index.md b/files/fr/web/javascript/reference/global_objects/weakmap/get/index.md
new file mode 100644
index 0000000000..6064f0c769
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/weakmap/get/index.md
@@ -0,0 +1,58 @@
+---
+title: WeakMap.prototype.get()
+slug: Web/JavaScript/Reference/Global_Objects/WeakMap/get
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - WeakMap
+translation_of: Web/JavaScript/Reference/Global_Objects/WeakMap/get
+original_slug: Web/JavaScript/Reference/Objets_globaux/WeakMap/get
+---
+{{JSRef}}
+
+La méthode **`get()`** permet de renvoyer un élément donné d'un objet `WeakMap`.
+
+{{EmbedInteractiveExample("pages/js/weakmap-prototype-get.html")}}
+
+## Syntaxe
+
+    wm.get(clé);
+
+### Paramètre
+
+- `clé`
+  - : Ce paramètre est obligatoire. Il correspond à la clé de l'élément qu'on souhaite récupérer depuis l'objet `WeakMap`.
+
+### Valeur de retour
+
+L'élément associé à la clé donnée ou `undefined` si la clé ne peut pas être trouvée dans l'objet `WeakMap`.
+
+## Exemples
+
+```js
+var wm = new WeakMap();
+wm.set(window, "toto");
+
+wm.get(window); // Renvoie "toto"
+wm.get("machin");  // Renvoie undefined.
+```
+
+## Spécifications
+
+| Spécification                                                                                            | État                         | Commentaires         |
+| -------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName('ES2015', '#sec-weakmap.prototype.get', 'WeakMap.prototype.get')}} | {{Spec2('ES2015')}}     | Définition initiale. |
+| {{SpecName('ESDraft', '#sec-weakmap.prototype.get', 'WeakMap.prototype.get')}} | {{Spec2('ESDraft')}} |                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.WeakMap.get")}}
+
+## Voir aussi
+
+- {{jsxref("WeakMap")}}
+- {{jsxref("WeakMap.set()")}}
+- {{jsxref("WeakMap.has()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/weakmap/has/index.html b/files/fr/web/javascript/reference/global_objects/weakmap/has/index.html
deleted file mode 100644
index 69fd37a8e4..0000000000
--- a/files/fr/web/javascript/reference/global_objects/weakmap/has/index.html
+++ /dev/null
@@ -1,76 +0,0 @@
----
-title: WeakMap.prototype.has()
-slug: Web/JavaScript/Reference/Global_Objects/WeakMap/has
-tags:
-  - ECMAScript 2015
-  - JavaScript
-  - Méthode
-  - Prototype
-  - Reference
-  - WeakMap
-translation_of: Web/JavaScript/Reference/Global_Objects/WeakMap/has
-original_slug: Web/JavaScript/Reference/Objets_globaux/WeakMap/has
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <code><strong>has()</strong></code> renvoie un booléen qui indique s'il existe (ou non) un élément avec une clé donnée au sein de l'objet <code>WeakMap</code>.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/weakmap-prototype-has.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>wm</var>.has(<var>clé</var>);</pre>
-
-<h3 id="Paramètre">Paramètre</h3>
-
-<dl>
- <dt><code>clé</code></dt>
- <dd>Ce paramètre est obligatoire. Il correspond à la clé de l'élément dont on souhaite savoir s'il est présent dans l'objet <code>WeakMap</code>.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>La méthode renvoie <code>true</code> s'il existe un élément du <code>WeakMap</code> avec la clé donné, <code>false</code> sinon.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<pre class="brush: js">var wm = new WeakMap();
-wm.set(window, "toto");
-
-wm.has(window); // renvoie true
-wm.has("machin");  // renvoie false
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-weakmap.prototype.has', 'WeakMap.prototype.has')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-weakmap.prototype.has', 'WeakMap.prototype.has')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.WeakMap.has")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("WeakMap")}}</li>
- <li>{{jsxref("WeakMap.prototype.set()")}}</li>
- <li>{{jsxref("WeakMap.prototype.get()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/weakmap/has/index.md b/files/fr/web/javascript/reference/global_objects/weakmap/has/index.md
new file mode 100644
index 0000000000..4cfc9faac8
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/weakmap/has/index.md
@@ -0,0 +1,58 @@
+---
+title: WeakMap.prototype.has()
+slug: Web/JavaScript/Reference/Global_Objects/WeakMap/has
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - WeakMap
+translation_of: Web/JavaScript/Reference/Global_Objects/WeakMap/has
+original_slug: Web/JavaScript/Reference/Objets_globaux/WeakMap/has
+---
+{{JSRef}}
+
+La méthode **`has()`** renvoie un booléen qui indique s'il existe (ou non) un élément avec une clé donnée au sein de l'objet `WeakMap`.
+
+{{EmbedInteractiveExample("pages/js/weakmap-prototype-has.html")}}
+
+## Syntaxe
+
+    wm.has(clé);
+
+### Paramètre
+
+- `clé`
+  - : Ce paramètre est obligatoire. Il correspond à la clé de l'élément dont on souhaite savoir s'il est présent dans l'objet `WeakMap`.
+
+### Valeur de retour
+
+La méthode renvoie `true` s'il existe un élément du `WeakMap` avec la clé donné, `false` sinon.
+
+## Exemples
+
+```js
+var wm = new WeakMap();
+wm.set(window, "toto");
+
+wm.has(window); // renvoie true
+wm.has("machin");  // renvoie false
+```
+
+## Spécifications
+
+| Spécification                                                                                            | État                         | Commentaires         |
+| -------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName('ES2015', '#sec-weakmap.prototype.has', 'WeakMap.prototype.has')}} | {{Spec2('ES2015')}}     | Définition initiale. |
+| {{SpecName('ESDraft', '#sec-weakmap.prototype.has', 'WeakMap.prototype.has')}} | {{Spec2('ESDraft')}} |                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.WeakMap.has")}}
+
+## Voir aussi
+
+- {{jsxref("WeakMap")}}
+- {{jsxref("WeakMap.prototype.set()")}}
+- {{jsxref("WeakMap.prototype.get()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/weakmap/index.html b/files/fr/web/javascript/reference/global_objects/weakmap/index.html
deleted file mode 100644
index 6dd5ddfcd3..0000000000
--- a/files/fr/web/javascript/reference/global_objects/weakmap/index.html
+++ /dev/null
@@ -1,162 +0,0 @@
----
-title: WeakMap
-slug: Web/JavaScript/Reference/Global_Objects/WeakMap
-tags:
-  - ECMAScript 2015
-  - JavaScript
-  - Reference
-  - WeakMap
-translation_of: Web/JavaScript/Reference/Global_Objects/WeakMap
-original_slug: Web/JavaScript/Reference/Objets_globaux/WeakMap
----
-<div>{{JSRef}}</div>
-
-<p>L'objet <strong><code>WeakMap</code></strong> représente une collection de paires clé-valeur dont les clés sont des objets et pour lesquelles les références sont « faibles » et les valeurs des valeurs quelconques.</p>
-
-<div class="note">
-<p><strong>Note :</strong> vous pouvez en savoir plus sur les <code>WeakMap</code> en lisant l'article sur <a href="/fr/docs/Web/JavaScript/Guide/Collections_avec_clés#Le_type_WeakMap">les collections à clé</a>.</p>
-</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">new WeakMap([<var>itérable</var>])
-</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>itérable</code></dt>
- <dd>Paramètre optionnel. Un tableau (objet <code>Array</code>) ou tout autre objet itérable dont les éléments sont des paires composées d'une clé et d'une valeur (des tableaux de 2 éléments). Chaque paire sera ajoutée à la carte (<em>map</em> en anglais). {{jsxref("null")}} sera traité comme {{jsxref("undefined")}}.</dd>
-</dl>
-
-<h2 id="Description">Description</h2>
-
-<p>Les clés des objets <code>WeakMap</code> sont nécessairement du type <code>Object</code>. {{Glossary("Primitive", "Des types de données primitifs")}} ne sont pas autorisés pour les clés (ex : un {{jsxref("Symbol")}} ne peut pas être une clé dans un <code>WeakMap</code>).</p>
-
-<p>Les clés d'une <code>WeakMap</code> sont référencées <em>faiblement</em>. Cela signifie que s'il n'existe aucune autre référence « forte » vers la clé, l'élément (la clé et la valeur) sera retiré de la <code>WeakMap</code> par le ramasse-miettes.</p>
-
-<h3 id="Pourquoi_WeakMap">Pourquoi <em>Weak</em>Map ?</h3>
-
-<p>Avec un certain recul, on peut voir que cette API aurait pu être implémentée en JavaScript grâce à deux tableaux (un tableau pour stocker les clés, l'autre pour les valeurs) associées à 4 méthodes.</p>
-
-<p>Une telle implémentation présente deux inconvénients principaux. Le premier est que la recherche serait effectué en O(n) (avec n le nombre de clés). Le second inconvénient concerne les fuites mémoires. Si la carte (<em>map</em>) est construite manuellement, le tableau contenant les clés serait obligé de garder les références vers les objets que sont les clés, ce qui les empêcheraient d'être nettoyés par le ramasse-miette. Grâce aux objets natifs <code>WeakMap</code>, les références vers les clés sont faibles (<em>weak</em>) ce qui permet au ramasse miette de nettoyer l'objet au cas où il n'y aurait pas d'autres références vers cet objet.</p>
-
-<p>Étant donné que les références sont faibles, il est impossible d'énumérer les clés des objets <code>WeakMap</code> (c'est-à-dire qu'on ne dispose pas d'une méthode renvoyant la liste des clés). Si c'était le cas, la liste dépendrait d'un état lié au ramasse-miette et il n'y aurait pas de façon déterministe de connaître le résultat. Si vous souhaitez avoir une liste de clés, vous devriez plutôt utiliser un objet {{jsxref("Map")}}.</p>
-
-<h2 id="Propriétés">Propriétés</h2>
-
-<dl>
- <dt><code>WeakMap.length</code></dt>
- <dd>La valeur de la propriété <code>length</code> vaut 0.</dd>
- <dt>{{jsxref("WeakMap.prototype")}}</dt>
- <dd>Cette propriété représente le prototype du constructeur <code>WeakMap</code>. Il permet d'ajouter des propriétés pour toutes les instances de <code>WeakMap</code>.</dd>
-</dl>
-
-<h2 id="Instances_de_WeakMap">Instances de <code>WeakMap</code></h2>
-
-<p>Toutes les instances de <code>WeakMap</code> héritent de {{jsxref("WeakMap.prototype")}}.</p>
-
-<h3 id="Propriétés_2">Propriétés</h3>
-
-<p>{{page('fr/docs/Web/JavaScript/Reference/Objets_globaux/WeakMap/prototype','Properties')}}</p>
-
-<h3 id="Méthodes">Méthodes</h3>
-
-<p>{{page('fr/docs/Web/JavaScript/Reference/Objets_globaux/WeakMap/prototype','Methods')}}</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Utiliser_WeakMap">Utiliser <code>WeakMap</code></h3>
-
-<pre class="brush: js">var wm1 = new WeakMap(),
-    wm2 = new WeakMap(),
-    wm3 = new WeakMap();
-var o1 = {},
-    o2 = function(){},
-    o3 = window;
-
-wm1.set(o1, 37);
-wm1.set(o2, "azerty");
-wm2.set(o1, o2); // une valeur peut être n'importe quoi, y compris un objet ou une fonction
-wm2.set(o3, undefined);
-wm2.set(wm1, wm2); // Les clés et les valeurs peuvent n'importe quels objets, y compris des WeakMap
-
-wm1.get(o2); // "azerty"
-wm2.get(o2); // undefined car il n'y a pas de valeur pour o2 sur wm2
-wm2.get(o3); // undefined car c'est la valeur utilisée
-
-wm1.has(o2); // true
-wm2.has(o2); // false
-wm2.has(o3); // true (même si la valeur est 'undefined')
-
-wm3.set(o1, 37);
-wm3.get(o1); // 37
-
-wm1.has(o1);   // true
-wm1.delete(o1);
-wm1.has(o1);   // false
-
-</pre>
-
-<h3 id="Implémenter_une_classe_semblable_à_WeakMap_avec_une_méthode_.clear()">Implémenter une classe semblable à <code>WeakMap</code> avec une méthode .clear()</h3>
-
-<pre class="brush: js">class ClearableWeakMap {
-    constructor(init) {
-        this._wm = new WeakMap(init)
-    }
-    clear() {
-        this._wm = new WeakMap()
-    }
-    delete(k) {
-        return this._wm.delete(k)
-    }
-    get(k) {
-        return this._wm.get(k)
-    }
-    has(k) {
-        return this._wm.has(k)
-    }
-    set(k, v) {
-        this._wm.set(k, v)
-        return this
-    }
-}
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-weakmap-objects', 'WeakMap')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-weakmap-objects', 'WeakMap')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.WeakMap")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a class="link-https" href="/fr/docs/Web/JavaScript/Guide/Collections_avec_clés#Le_type_WeakMap">Le guide sur les collections à clé JavaScript</a></li>
- <li><a href="https://fitzgeraldnick.com/weblog/53/">Masquer des détails d'implémentation avec les WeakMaps ECMAScript 2015</a> (en anglais)</li>
- <li>{{jsxref("Map")}}</li>
- <li>{{jsxref("Set")}}</li>
- <li>{{jsxref("WeakSet")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/weakmap/index.md b/files/fr/web/javascript/reference/global_objects/weakmap/index.md
new file mode 100644
index 0000000000..ab6d2c13cd
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/weakmap/index.md
@@ -0,0 +1,137 @@
+---
+title: WeakMap
+slug: Web/JavaScript/Reference/Global_Objects/WeakMap
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Reference
+  - WeakMap
+translation_of: Web/JavaScript/Reference/Global_Objects/WeakMap
+original_slug: Web/JavaScript/Reference/Objets_globaux/WeakMap
+---
+{{JSRef}}
+
+L'objet **`WeakMap`** représente une collection de paires clé-valeur dont les clés sont des objets et pour lesquelles les références sont « faibles » et les valeurs des valeurs quelconques.
+
+> **Note :** vous pouvez en savoir plus sur les `WeakMap` en lisant l'article sur [les collections à clé](/fr/docs/Web/JavaScript/Guide/Collections_avec_clés#Le_type_WeakMap).
+
+## Syntaxe
+
+    new WeakMap([itérable])
+
+### Paramètres
+
+- `itérable`
+  - : Paramètre optionnel. Un tableau (objet `Array`) ou tout autre objet itérable dont les éléments sont des paires composées d'une clé et d'une valeur (des tableaux de 2 éléments). Chaque paire sera ajoutée à la carte (_map_ en anglais). {{jsxref("null")}} sera traité comme {{jsxref("undefined")}}.
+
+## Description
+
+Les clés des objets `WeakMap` sont nécessairement du type `Object`. {{Glossary("Primitive", "Des types de données primitifs")}} ne sont pas autorisés pour les clés (ex : un {{jsxref("Symbol")}} ne peut pas être une clé dans un `WeakMap`).
+
+Les clés d'une `WeakMap` sont référencées _faiblement_. Cela signifie que s'il n'existe aucune autre référence « forte » vers la clé, l'élément (la clé et la valeur) sera retiré de la `WeakMap` par le ramasse-miettes.
+
+### Pourquoi *Weak*Map ?
+
+Avec un certain recul, on peut voir que cette API aurait pu être implémentée en JavaScript grâce à deux tableaux (un tableau pour stocker les clés, l'autre pour les valeurs) associées à 4 méthodes.
+
+Une telle implémentation présente deux inconvénients principaux. Le premier est que la recherche serait effectué en O(n) (avec n le nombre de clés). Le second inconvénient concerne les fuites mémoires. Si la carte (_map_) est construite manuellement, le tableau contenant les clés serait obligé de garder les références vers les objets que sont les clés, ce qui les empêcheraient d'être nettoyés par le ramasse-miette. Grâce aux objets natifs `WeakMap`, les références vers les clés sont faibles (_weak_) ce qui permet au ramasse miette de nettoyer l'objet au cas où il n'y aurait pas d'autres références vers cet objet.
+
+Étant donné que les références sont faibles, il est impossible d'énumérer les clés des objets `WeakMap` (c'est-à-dire qu'on ne dispose pas d'une méthode renvoyant la liste des clés). Si c'était le cas, la liste dépendrait d'un état lié au ramasse-miette et il n'y aurait pas de façon déterministe de connaître le résultat. Si vous souhaitez avoir une liste de clés, vous devriez plutôt utiliser un objet {{jsxref("Map")}}.
+
+## Propriétés
+
+- `WeakMap.length`
+  - : La valeur de la propriété `length` vaut 0.
+- {{jsxref("WeakMap.prototype")}}
+  - : Cette propriété représente le prototype du constructeur `WeakMap`. Il permet d'ajouter des propriétés pour toutes les instances de `WeakMap`.
+
+## Instances de `WeakMap`
+
+Toutes les instances de `WeakMap` héritent de {{jsxref("WeakMap.prototype")}}.
+
+### Propriétés
+
+{{page('fr/docs/Web/JavaScript/Reference/Objets_globaux/WeakMap/prototype','Properties')}}
+
+### Méthodes
+
+{{page('fr/docs/Web/JavaScript/Reference/Objets_globaux/WeakMap/prototype','Methods')}}
+
+## Exemples
+
+### Utiliser `WeakMap`
+
+```js
+var wm1 = new WeakMap(),
+    wm2 = new WeakMap(),
+    wm3 = new WeakMap();
+var o1 = {},
+    o2 = function(){},
+    o3 = window;
+
+wm1.set(o1, 37);
+wm1.set(o2, "azerty");
+wm2.set(o1, o2); // une valeur peut être n'importe quoi, y compris un objet ou une fonction
+wm2.set(o3, undefined);
+wm2.set(wm1, wm2); // Les clés et les valeurs peuvent n'importe quels objets, y compris des WeakMap
+
+wm1.get(o2); // "azerty"
+wm2.get(o2); // undefined car il n'y a pas de valeur pour o2 sur wm2
+wm2.get(o3); // undefined car c'est la valeur utilisée
+
+wm1.has(o2); // true
+wm2.has(o2); // false
+wm2.has(o3); // true (même si la valeur est 'undefined')
+
+wm3.set(o1, 37);
+wm3.get(o1); // 37
+
+wm1.has(o1);   // true
+wm1.delete(o1);
+wm1.has(o1);   // false
+```
+
+### Implémenter une classe semblable à `WeakMap` avec une méthode .clear()
+
+```js
+class ClearableWeakMap {
+    constructor(init) {
+        this._wm = new WeakMap(init)
+    }
+    clear() {
+        this._wm = new WeakMap()
+    }
+    delete(k) {
+        return this._wm.delete(k)
+    }
+    get(k) {
+        return this._wm.get(k)
+    }
+    has(k) {
+        return this._wm.has(k)
+    }
+    set(k, v) {
+        this._wm.set(k, v)
+        return this
+    }
+}
+```
+
+## Spécifications
+
+| Spécification                                                                | État                         | Commentaires         |
+| ---------------------------------------------------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName('ESDraft', '#sec-weakmap-objects', 'WeakMap')}} | {{Spec2('ESDraft')}} |                      |
+| {{SpecName('ES2015', '#sec-weakmap-objects', 'WeakMap')}} | {{Spec2('ES2015')}}     | Définition initiale. |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.WeakMap")}}
+
+## Voir aussi
+
+- [Le guide sur les collections à clé JavaScript](/fr/docs/Web/JavaScript/Guide/Collections_avec_clés#Le_type_WeakMap)
+- [Masquer des détails d'implémentation avec les WeakMaps ECMAScript 2015](https://fitzgeraldnick.com/weblog/53/) (en anglais)
+- {{jsxref("Map")}}
+- {{jsxref("Set")}}
+- {{jsxref("WeakSet")}}
diff --git a/files/fr/web/javascript/reference/global_objects/weakmap/set/index.html b/files/fr/web/javascript/reference/global_objects/weakmap/set/index.html
deleted file mode 100644
index 40181140c0..0000000000
--- a/files/fr/web/javascript/reference/global_objects/weakmap/set/index.html
+++ /dev/null
@@ -1,87 +0,0 @@
----
-title: WeakMap.prototype.set()
-slug: Web/JavaScript/Reference/Global_Objects/WeakMap/set
-tags:
-  - ECMAScript 2015
-  - JavaScript
-  - Méthode
-  - Prototype
-  - Reference
-  - WeakMap
-translation_of: Web/JavaScript/Reference/Global_Objects/WeakMap/set
-original_slug: Web/JavaScript/Reference/Objets_globaux/WeakMap/set
----
-<div>s{{JSRef}}</div>
-
-<p>La méthode <code><strong>set()</strong></code> permet d'ajouter un nouvel élément avec une <code>clé</code> et une <code>valeur</code> à un objet <code>WeakMap</code>.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/weakmap-prototype-set.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>wm</var>.set(<var>clé</var>, <var>valeur</var>);</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>clé</code></dt>
- <dd>Ce paramètre est obligatoire et doit être un objet. Il correspond à la clé de l'élément qu'on souhaite ajouter à l'objet <code>WeakMap</code>.</dd>
- <dt><code>valeur</code></dt>
- <dd>Ce paramètre est obligatoire et peut avoir n'importe quel type. Il correspond à la valeur de l'élément qu'on souhaite ajouter à l'objet <code>WeakMap</code>.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Cette méthode renvoie l'objet <code>WeakMap</code> potentiellement mis à jour.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<pre class="brush: js">var wm = new WeakMap();
-var obj = {};
-
-// Ajouter un nouvel élément à la WeakMap
-wm.set(obj, "toto").set(window, "truc"); // on peut chaîner les instructions
-
-// Mettre à jour un élément de la WeakMap
-wm.set(obj, "machin");
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-weakmap.prototype.set', 'WeakMap.prototype.set')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-weakmap.prototype.set', 'WeakMap.prototype.set')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.WeakMap.set")}}</p>
-
-<h2 id="Notes_relatives_à_Firefox">Notes relatives à Firefox</h2>
-
-<ul>
- <li>Avant Firefox 33 {{geckoRelease("33")}}, <code>WeakMap.prototype.set</code> renvoyait <code>undefined</code> et ne pouvait donc pas être utilisé à la chaîne (voir l'exemple ci-avant). Ceci a été corrigé avec le {{bug(1031632)}}. Ce comportement a été le même pour Chrome/v8 et fut également corrigé (<a href="https://code.google.com/p/v8/issues/detail?id=3410">issue</a>).</li>
-</ul>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("WeakMap")}}</li>
- <li>{{jsxref("WeakMap.prototype.get()")}}</li>
- <li>{{jsxref("WeakMap.prototype.has()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/weakmap/set/index.md b/files/fr/web/javascript/reference/global_objects/weakmap/set/index.md
new file mode 100644
index 0000000000..8951eaa897
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/weakmap/set/index.md
@@ -0,0 +1,67 @@
+---
+title: WeakMap.prototype.set()
+slug: Web/JavaScript/Reference/Global_Objects/WeakMap/set
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - WeakMap
+translation_of: Web/JavaScript/Reference/Global_Objects/WeakMap/set
+original_slug: Web/JavaScript/Reference/Objets_globaux/WeakMap/set
+---
+s{{JSRef}}
+
+La méthode **`set()`** permet d'ajouter un nouvel élément avec une `clé` et une `valeur` à un objet `WeakMap`.
+
+{{EmbedInteractiveExample("pages/js/weakmap-prototype-set.html")}}
+
+## Syntaxe
+
+    wm.set(clé, valeur);
+
+### Paramètres
+
+- `clé`
+  - : Ce paramètre est obligatoire et doit être un objet. Il correspond à la clé de l'élément qu'on souhaite ajouter à l'objet `WeakMap`.
+- `valeur`
+  - : Ce paramètre est obligatoire et peut avoir n'importe quel type. Il correspond à la valeur de l'élément qu'on souhaite ajouter à l'objet `WeakMap`.
+
+### Valeur de retour
+
+Cette méthode renvoie l'objet `WeakMap` potentiellement mis à jour.
+
+## Exemples
+
+```js
+var wm = new WeakMap();
+var obj = {};
+
+// Ajouter un nouvel élément à la WeakMap
+wm.set(obj, "toto").set(window, "truc"); // on peut chaîner les instructions
+
+// Mettre à jour un élément de la WeakMap
+wm.set(obj, "machin");
+```
+
+## Spécifications
+
+| Spécification                                                                                            | État                         | Commentaires         |
+| -------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName('ES2015', '#sec-weakmap.prototype.set', 'WeakMap.prototype.set')}} | {{Spec2('ES2015')}}     | Définition initiale. |
+| {{SpecName('ESDraft', '#sec-weakmap.prototype.set', 'WeakMap.prototype.set')}} | {{Spec2('ESDraft')}} |                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.WeakMap.set")}}
+
+## Notes relatives à Firefox
+
+- Avant Firefox 33 {{geckoRelease("33")}}, `WeakMap.prototype.set` renvoyait `undefined` et ne pouvait donc pas être utilisé à la chaîne (voir l'exemple ci-avant). Ceci a été corrigé avec le {{bug(1031632)}}. Ce comportement a été le même pour Chrome/v8 et fut également corrigé ([issue](https://code.google.com/p/v8/issues/detail?id=3410)).
+
+## Voir aussi
+
+- {{jsxref("WeakMap")}}
+- {{jsxref("WeakMap.prototype.get()")}}
+- {{jsxref("WeakMap.prototype.has()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/weakset/add/index.html b/files/fr/web/javascript/reference/global_objects/weakset/add/index.html
deleted file mode 100644
index dea306520c..0000000000
--- a/files/fr/web/javascript/reference/global_objects/weakset/add/index.html
+++ /dev/null
@@ -1,81 +0,0 @@
----
-title: WeakSet.prototype.add()
-slug: Web/JavaScript/Reference/Global_Objects/WeakSet/add
-tags:
-  - ECMAScript 2015
-  - JavaScript
-  - Méthode
-  - Prototype
-  - Reference
-  - WeakSet
-translation_of: Web/JavaScript/Reference/Global_Objects/WeakSet/add
-original_slug: Web/JavaScript/Reference/Objets_globaux/WeakSet/add
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <code><strong>add()</strong></code> permet d'ajouter un nouvel objet à un objet <code>WeakSet</code>.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/weakset-prototype-add.html", "taller")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>ws</var>.add(<var>valeur</var>);</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>valeur</code></dt>
- <dd>Ce paramètre est obligatoire. Il correspond à l'objet qu'on souhaite ajouter à l'ensemble<code> WeakSet</code>.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>L'objet {{jsxref("WeakSet")}}.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<pre class="brush: js">var ws = new WeakSet();
-
-ws.add(window); // on ajouter l'objet window à l'objet WeakSet
-
-ws.has(window); // tru
-
-// WeakSet ne peut contenir que des objets
-ws.add(1);
-// TypeError: Invalid value used in weak set -&gt; Chrome
-// TypeError: 1 is not a non-null obect -&gt; Firefox
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-weakset.prototype.add', 'WeakSet.prototype.add')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-weakset.prototype.add', 'WeakSet.prototype.add')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.WeakSet.add")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("WeakSet")}}</li>
- <li>{{jsxref("WeakSet.prototype.delete()")}}</li>
- <li>{{jsxref("WeakSet.prototype.has()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/weakset/add/index.md b/files/fr/web/javascript/reference/global_objects/weakset/add/index.md
new file mode 100644
index 0000000000..d4a6d7e8da
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/weakset/add/index.md
@@ -0,0 +1,63 @@
+---
+title: WeakSet.prototype.add()
+slug: Web/JavaScript/Reference/Global_Objects/WeakSet/add
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - WeakSet
+translation_of: Web/JavaScript/Reference/Global_Objects/WeakSet/add
+original_slug: Web/JavaScript/Reference/Objets_globaux/WeakSet/add
+---
+{{JSRef}}
+
+La méthode **`add()`** permet d'ajouter un nouvel objet à un objet `WeakSet`.
+
+{{EmbedInteractiveExample("pages/js/weakset-prototype-add.html", "taller")}}
+
+## Syntaxe
+
+    ws.add(valeur);
+
+### Paramètres
+
+- `valeur`
+  - : Ce paramètre est obligatoire. Il correspond à l'objet qu'on souhaite ajouter à l'ensemble` WeakSet`.
+
+### Valeur de retour
+
+L'objet {{jsxref("WeakSet")}}.
+
+## Exemples
+
+```js
+var ws = new WeakSet();
+
+ws.add(window); // on ajouter l'objet window à l'objet WeakSet
+
+ws.has(window); // tru
+
+// WeakSet ne peut contenir que des objets
+ws.add(1);
+// TypeError: Invalid value used in weak set -> Chrome
+// TypeError: 1 is not a non-null obect -> Firefox
+```
+
+## Spécifications
+
+| Spécification                                                                                            | État                         | Commentaires         |
+| -------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName('ES2015', '#sec-weakset.prototype.add', 'WeakSet.prototype.add')}} | {{Spec2('ES2015')}}     | Définition initiale. |
+| {{SpecName('ESDraft', '#sec-weakset.prototype.add', 'WeakSet.prototype.add')}} | {{Spec2('ESDraft')}} |                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.WeakSet.add")}}
+
+## Voir aussi
+
+- {{jsxref("WeakSet")}}
+- {{jsxref("WeakSet.prototype.delete()")}}
+- {{jsxref("WeakSet.prototype.has()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/weakset/delete/index.html b/files/fr/web/javascript/reference/global_objects/weakset/delete/index.html
deleted file mode 100644
index 0acea3aeee..0000000000
--- a/files/fr/web/javascript/reference/global_objects/weakset/delete/index.html
+++ /dev/null
@@ -1,79 +0,0 @@
----
-title: WeakSet.prototype.delete()
-slug: Web/JavaScript/Reference/Global_Objects/WeakSet/delete
-tags:
-  - ECMAScript 2015
-  - JavaScript
-  - Méthode
-  - Prototype
-  - Reference
-  - WeakSet
-translation_of: Web/JavaScript/Reference/Global_Objects/WeakSet/delete
-original_slug: Web/JavaScript/Reference/Objets_globaux/WeakSet/delete
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <code><strong>delete()</strong></code> permet de retirer un élément donné d'un objet <code>WeakSet</code>.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/weakset-prototype-delete.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>ws</var>.delete(<var>valeur</var>);</pre>
-
-<h3 id="Paramètre">Paramètre</h3>
-
-<dl>
- <dt><code>valeur</code></dt>
- <dd>Ce paramètre est obligatoire. Il correspond à l'objet qu'on souhaite retirer de l'ensemble <code>WeakSet</code>.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p><code>true</code> si un élément de l'objet <code>WeakSet</code> a bien été retiré, <code>false</code> sinon (dans le cas où la clé n'a pas été trouvée ou si la clé n'est pas un objet).</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<pre class="brush: js">var ws = new WeakSet();
-var obj = {};
-
-ws.add(window);
-
-ws.delete(obj);    // Renvoie false. Aucun objet obj n'a été trouvé ni retiré.
-ws.delete(window); // Renvoie true, l'objet window a pu être retiré.
-
-ws.has(window);    // Renvoie false, window n'appartient plus au WeakSet.
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-weakset.prototype.delete', 'WeakSet.prototype.delete')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-weakset.prototype.delete', 'WeakSet.prototype.delete')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.WeakSet.delete")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("WeakSet")}}</li>
- <li>{{jsxref("WeakSet.prototype.clear()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/weakset/delete/index.md b/files/fr/web/javascript/reference/global_objects/weakset/delete/index.md
new file mode 100644
index 0000000000..05a92dcddc
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/weakset/delete/index.md
@@ -0,0 +1,61 @@
+---
+title: WeakSet.prototype.delete()
+slug: Web/JavaScript/Reference/Global_Objects/WeakSet/delete
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - WeakSet
+translation_of: Web/JavaScript/Reference/Global_Objects/WeakSet/delete
+original_slug: Web/JavaScript/Reference/Objets_globaux/WeakSet/delete
+---
+{{JSRef}}
+
+La méthode **`delete()`** permet de retirer un élément donné d'un objet `WeakSet`.
+
+{{EmbedInteractiveExample("pages/js/weakset-prototype-delete.html")}}
+
+## Syntaxe
+
+    ws.delete(valeur);
+
+### Paramètre
+
+- `valeur`
+  - : Ce paramètre est obligatoire. Il correspond à l'objet qu'on souhaite retirer de l'ensemble `WeakSet`.
+
+### Valeur de retour
+
+`true` si un élément de l'objet `WeakSet` a bien été retiré, `false` sinon (dans le cas où la clé n'a pas été trouvée ou si la clé n'est pas un objet).
+
+## Exemples
+
+```js
+var ws = new WeakSet();
+var obj = {};
+
+ws.add(window);
+
+ws.delete(obj);    // Renvoie false. Aucun objet obj n'a été trouvé ni retiré.
+ws.delete(window); // Renvoie true, l'objet window a pu être retiré.
+
+ws.has(window);    // Renvoie false, window n'appartient plus au WeakSet.
+```
+
+## Spécifications
+
+| Spécification                                                                                                    | État                         | Commentaires         |
+| ---------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName('ES2015', '#sec-weakset.prototype.delete', 'WeakSet.prototype.delete')}} | {{Spec2('ES2015')}}     | Définition initiale. |
+| {{SpecName('ESDraft', '#sec-weakset.prototype.delete', 'WeakSet.prototype.delete')}} | {{Spec2('ESDraft')}} |                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.WeakSet.delete")}}
+
+## Voir aussi
+
+- {{jsxref("WeakSet")}}
+- {{jsxref("WeakSet.prototype.clear()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/weakset/has/index.html b/files/fr/web/javascript/reference/global_objects/weakset/has/index.html
deleted file mode 100644
index 4b1e5ddf92..0000000000
--- a/files/fr/web/javascript/reference/global_objects/weakset/has/index.html
+++ /dev/null
@@ -1,80 +0,0 @@
----
-title: WeakSet.prototype.has()
-slug: Web/JavaScript/Reference/Global_Objects/WeakSet/has
-tags:
-  - ECMAScript 2015
-  - JavaScript
-  - Méthode
-  - Prototype
-  - Reference
-  - WeakSet
-translation_of: Web/JavaScript/Reference/Global_Objects/WeakSet/has
-original_slug: Web/JavaScript/Reference/Objets_globaux/WeakSet/has
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <code><strong>has()</strong></code> renvoie un booléen indiquant si un objet donné est contenu dans l'ensemble<code> WeakSet</code>.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/weakset-prototype-has.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var>ws</var>.has(<var>valeur</var>);</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>valeur</code></dt>
- <dd>Ce paramètre est obligatoire. Il représente l'objet dont on souhaite savoir s'il est, ou non, présent dans l'objet <code>WeakSet</code>.</dd>
-</dl>
-
-<h3 id="Valeur_renvoyée">Valeur renvoyée</h3>
-
-<dl>
- <dt>Booléen</dt>
- <dd>La méthode renvoie <code>true</code> si l'objet <code>WeakSet </code>contient bien un élément avec la valeur donnée, <code>false </code>sinon.</dd>
-</dl>
-
-<h2 id="Exemples">Exemples</h2>
-
-<pre class="brush: js">var ws = new WeakSet();
-var obj = {};
-ws.add(window);
-
-mySet.has(window);  // renvoie true
-mySet.has(obj);     // renvoie false
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-weakset.prototype.has', 'WeakSet.prototype.has')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-weakset.prototype.has', 'WeakSet.prototype.has')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.WeakSet.has")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("WeakSet")}}</li>
- <li>{{jsxref("WeakSet.prototype.add()")}}</li>
- <li>{{jsxref("WeakSet.prototype.delete()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/weakset/has/index.md b/files/fr/web/javascript/reference/global_objects/weakset/has/index.md
new file mode 100644
index 0000000000..92a8ffa9af
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/weakset/has/index.md
@@ -0,0 +1,60 @@
+---
+title: WeakSet.prototype.has()
+slug: Web/JavaScript/Reference/Global_Objects/WeakSet/has
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - WeakSet
+translation_of: Web/JavaScript/Reference/Global_Objects/WeakSet/has
+original_slug: Web/JavaScript/Reference/Objets_globaux/WeakSet/has
+---
+{{JSRef}}
+
+La méthode **`has()`** renvoie un booléen indiquant si un objet donné est contenu dans l'ensemble` WeakSet`.
+
+{{EmbedInteractiveExample("pages/js/weakset-prototype-has.html")}}
+
+## Syntaxe
+
+    ws.has(valeur);
+
+### Paramètres
+
+- `valeur`
+  - : Ce paramètre est obligatoire. Il représente l'objet dont on souhaite savoir s'il est, ou non, présent dans l'objet `WeakSet`.
+
+### Valeur renvoyée
+
+- Booléen
+  - : La méthode renvoie `true` si l'objet `WeakSet `contient bien un élément avec la valeur donnée, `false `sinon.
+
+## Exemples
+
+```js
+var ws = new WeakSet();
+var obj = {};
+ws.add(window);
+
+mySet.has(window);  // renvoie true
+mySet.has(obj);     // renvoie false
+```
+
+## Spécifications
+
+| Spécification                                                                                            | État                         | Commentaires         |
+| -------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName('ES2015', '#sec-weakset.prototype.has', 'WeakSet.prototype.has')}} | {{Spec2('ES2015')}}     | Définition initiale. |
+| {{SpecName('ESDraft', '#sec-weakset.prototype.has', 'WeakSet.prototype.has')}} | {{Spec2('ESDraft')}} |                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.WeakSet.has")}}
+
+## Voir aussi
+
+- {{jsxref("WeakSet")}}
+- {{jsxref("WeakSet.prototype.add()")}}
+- {{jsxref("WeakSet.prototype.delete()")}}
diff --git a/files/fr/web/javascript/reference/global_objects/weakset/index.html b/files/fr/web/javascript/reference/global_objects/weakset/index.html
deleted file mode 100644
index d9709e78fd..0000000000
--- a/files/fr/web/javascript/reference/global_objects/weakset/index.html
+++ /dev/null
@@ -1,145 +0,0 @@
----
-title: WeakSet
-slug: Web/JavaScript/Reference/Global_Objects/WeakSet
-tags:
-  - ECMAScript 2015
-  - JavaScript
-  - Reference
-  - WeakSet
-translation_of: Web/JavaScript/Reference/Global_Objects/WeakSet
-original_slug: Web/JavaScript/Reference/Objets_globaux/WeakSet
----
-<div>{{JSRef}}</div>
-
-<p>L'objet <strong><code>WeakSet</code></strong> permet de créer un ensemble dont les objets sont contenus avec des références <em>faibles</em>.</p>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">new WeakSet([<var>itérable</var>]);</pre>
-
-<h3 id="Paramètre">Paramètre</h3>
-
-<dl>
- <dt><code>itérable</code></dt>
- <dd>Si un <a href="/fr/docs/Web/JavaScript/Reference/Les_protocoles_iteration#Le_protocole_.C2.AB_it.C3.A9rable_.C2.BB">objet itérable</a> est présent comme argument, ses éléments seront ajoutés au nouvel objet <code>WeakSet</code>. {{jsxref("null")}} est traité comme {{jsxref("undefined")}}.</dd>
-</dl>
-
-<h2 id="Exemples">Exemples</h2>
-
-<pre class="brush: js">var ws = new WeakSet();
-var toto = {};
-var truc = {};
-
-ws.add(toto);
-ws.add(truc);
-
-ws.has(toto);  // true
-ws.has(truc);  // true
-
-ws.delete(toto); // retire toto de l'ensemble
-ws.has(toto);    // false, toto a été enlevé
-</pre>
-
-<p>On notera que <code>toto !== truc</code>. Bien que ce soient des objets similaires, ce ne sont pas les mêmes objets. Aussi, les deux sont ajoutés à l'ensemble.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>Les <code>WeakSet</code> sont des ensembles d'objets. Un objet présent dans un objet <code>WeakSet</code> ne peut apparaître qu'une seule fois, il est unique pour un <code>WeakSet</code> donné.</p>
-
-<p>Les principales différences avec l'objet {{jsxref("Set")}} sont les suivantes :</p>
-
-<ul>
- <li>Contrairement aux <code>Sets</code>, les <code>WeakSets</code> sont des <strong>ensembles uniquement constitués d'objets </strong>et ne peuvent pas contenir des valeurs de n'importe quel type.</li>
- <li>L'objet <code>WeakSet</code> est <em>faible :</em> Les références vers les objets de l'ensemble sont des références faibles. Si aucune autre référence vers l'objet n'est présente en dehors du <code>WeakSet</code>, l'objet pourra alors être nettoyé par le ramasse-miette. Cela signifie également qu'on ne peut pas lister les objets contenus à un instant donné dans l'ensemble. Les objets <code>WeakSets</code> ne sont pas énumérables.</li>
-</ul>
-
-<h2 id="Propriétés">Propriétés</h2>
-
-<dl>
- <dt><code>WeakSet.length</code></dt>
- <dd>La valeur de la propriété <code>length</code> est 0.</dd>
- <dt>{{jsxref("WeakSet.prototype")}}</dt>
- <dd>Cette propriété représente le prototype pour le constructeur <code>WeakSet</code>. Il permet d'ajouter des propriétés pour tous les objets <code>WeakSet</code>.</dd>
-</dl>
-
-<h2 id="Instances_de_WeakSet">Instances de <code>WeakSet</code></h2>
-
-<p>Toutes les instances de <code>WeakSet</code> héritent de {{jsxref("WeakSet.prototype")}}.</p>
-
-<h3 id="Propriétés_2">Propriétés</h3>
-
-<p>{{page('fr/docs/Web/JavaScript/Reference/Objets_globaux/WeakSet/prototype','Propri.C3.A9t.C3.A9s')}}</p>
-
-<h3 id="Méthodes">Méthodes</h3>
-
-<p>{{page('fr/docs/Web/JavaScript/Reference/Objets_globaux/WeakSet/prototype','M.C3.A9thodes')}}</p>
-
-<h2 id="Exemples_2">Exemples</h2>
-
-<h3 id="Détecter_les_références_circulaires">Détecter les références circulaires</h3>
-
-<p>Les fonctions récursives doivent faire attention aux structures de données circulaire qu'elles consommeraient. Les objets <code>WeakSets</code> peuvent être utilisé pour ça :</p>
-
-<pre class="brush: js">// Appeler un callback sur ce qui est stocké dans un objet
-function execRecursively(fn, subject, _refs = null){
-  if(!_refs)
-    _refs = new WeakSet();
-
-  // On évite une récursion infinie
-  if(_refs.has(subject))
-    return;
-
-  fn(subject);
-  if("object" === typeof subject){
-    _refs.add(subject);
-    for(let key in subject)
-      execRecursively(fn, subject[key], _refs);
-  }
-}
-
-const toto = {
-  toto: "Toto",
-  truc: {
-    truc: "Truc"
-  }
-};
-
-toto.truc.machin = toto; // Référence circulaire !
-execRecursively(obj =&gt; console.log(obj), toto);
-</pre>
-
-<p>Ici, on a un objet <code>WeakSet</code> qui est créé lors de la première exécution et qui est passé ensuite à chaque appel qui suit (via l'argument interne <code>_refs</code>). Le nombre d'objets ou l'ordre de parcours n'a pas d'importance et un objet <code>WeakSet</code> est donc plus adapté (y compris en termes de performances) qu'un {{jsxref("Set")}}, notamment si un grand nombre d'objets sont concernés.</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-weakset-objects', 'WeakSet')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-weakset-objects', 'WeakSet')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.WeakSet")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Map")}}</li>
- <li>{{jsxref("Set")}}</li>
- <li>{{jsxref("WeakMap")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/weakset/index.md b/files/fr/web/javascript/reference/global_objects/weakset/index.md
new file mode 100644
index 0000000000..3d4e82650c
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/weakset/index.md
@@ -0,0 +1,124 @@
+---
+title: WeakSet
+slug: Web/JavaScript/Reference/Global_Objects/WeakSet
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Reference
+  - WeakSet
+translation_of: Web/JavaScript/Reference/Global_Objects/WeakSet
+original_slug: Web/JavaScript/Reference/Objets_globaux/WeakSet
+---
+{{JSRef}}
+
+L'objet **`WeakSet`** permet de créer un ensemble dont les objets sont contenus avec des références _faibles_.
+
+## Syntaxe
+
+    new WeakSet([itérable]);
+
+### Paramètre
+
+- `itérable`
+  - : Si un [objet itérable](/fr/docs/Web/JavaScript/Reference/Les_protocoles_iteration#Le_protocole_.C2.AB_it.C3.A9rable_.C2.BB) est présent comme argument, ses éléments seront ajoutés au nouvel objet `WeakSet`. {{jsxref("null")}} est traité comme {{jsxref("undefined")}}.
+
+## Exemples
+
+```js
+var ws = new WeakSet();
+var toto = {};
+var truc = {};
+
+ws.add(toto);
+ws.add(truc);
+
+ws.has(toto);  // true
+ws.has(truc);  // true
+
+ws.delete(toto); // retire toto de l'ensemble
+ws.has(toto);    // false, toto a été enlevé
+```
+
+On notera que `toto !== truc`. Bien que ce soient des objets similaires, ce ne sont pas les mêmes objets. Aussi, les deux sont ajoutés à l'ensemble.
+
+## Description
+
+Les `WeakSet` sont des ensembles d'objets. Un objet présent dans un objet `WeakSet` ne peut apparaître qu'une seule fois, il est unique pour un `WeakSet` donné.
+
+Les principales différences avec l'objet {{jsxref("Set")}} sont les suivantes :
+
+- Contrairement aux `Sets`, les `WeakSets` sont des **ensembles uniquement constitués d'objets** et ne peuvent pas contenir des valeurs de n'importe quel type.
+- L'objet `WeakSet` est _faible :_ Les références vers les objets de l'ensemble sont des références faibles. Si aucune autre référence vers l'objet n'est présente en dehors du `WeakSet`, l'objet pourra alors être nettoyé par le ramasse-miette. Cela signifie également qu'on ne peut pas lister les objets contenus à un instant donné dans l'ensemble. Les objets `WeakSets` ne sont pas énumérables.
+
+## Propriétés
+
+- `WeakSet.length`
+  - : La valeur de la propriété `length` est 0.
+- {{jsxref("WeakSet.prototype")}}
+  - : Cette propriété représente le prototype pour le constructeur `WeakSet`. Il permet d'ajouter des propriétés pour tous les objets `WeakSet`.
+
+## Instances de `WeakSet`
+
+Toutes les instances de `WeakSet` héritent de {{jsxref("WeakSet.prototype")}}.
+
+### Propriétés
+
+{{page('fr/docs/Web/JavaScript/Reference/Objets_globaux/WeakSet/prototype','Propri.C3.A9t.C3.A9s')}}
+
+### Méthodes
+
+{{page('fr/docs/Web/JavaScript/Reference/Objets_globaux/WeakSet/prototype','M.C3.A9thodes')}}
+
+## Exemples
+
+### Détecter les références circulaires
+
+Les fonctions récursives doivent faire attention aux structures de données circulaire qu'elles consommeraient. Les objets `WeakSets` peuvent être utilisé pour ça :
+
+```js
+// Appeler un callback sur ce qui est stocké dans un objet
+function execRecursively(fn, subject, _refs = null){
+  if(!_refs)
+    _refs = new WeakSet();
+
+  // On évite une récursion infinie
+  if(_refs.has(subject))
+    return;
+
+  fn(subject);
+  if("object" === typeof subject){
+    _refs.add(subject);
+    for(let key in subject)
+      execRecursively(fn, subject[key], _refs);
+  }
+}
+
+const toto = {
+  toto: "Toto",
+  truc: {
+    truc: "Truc"
+  }
+};
+
+toto.truc.machin = toto; // Référence circulaire !
+execRecursively(obj => console.log(obj), toto);
+```
+
+Ici, on a un objet `WeakSet` qui est créé lors de la première exécution et qui est passé ensuite à chaque appel qui suit (via l'argument interne `_refs`). Le nombre d'objets ou l'ordre de parcours n'a pas d'importance et un objet `WeakSet` est donc plus adapté (y compris en termes de performances) qu'un {{jsxref("Set")}}, notamment si un grand nombre d'objets sont concernés.
+
+## Spécifications
+
+| Spécification                                                                | État                         | Commentaires         |
+| ---------------------------------------------------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName('ES2015', '#sec-weakset-objects', 'WeakSet')}} | {{Spec2('ES2015')}}     | Définition initiale. |
+| {{SpecName('ESDraft', '#sec-weakset-objects', 'WeakSet')}} | {{Spec2('ESDraft')}} |                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.WeakSet")}}
+
+## Voir aussi
+
+- {{jsxref("Map")}}
+- {{jsxref("Set")}}
+- {{jsxref("WeakMap")}}
diff --git a/files/fr/web/javascript/reference/global_objects/webassembly/compile/index.html b/files/fr/web/javascript/reference/global_objects/webassembly/compile/index.html
deleted file mode 100644
index 5e98ae5ba7..0000000000
--- a/files/fr/web/javascript/reference/global_objects/webassembly/compile/index.html
+++ /dev/null
@@ -1,86 +0,0 @@
----
-title: WebAssembly.compile()
-slug: Web/JavaScript/Reference/Global_Objects/WebAssembly/compile
-tags:
-  - API
-  - JavaScript
-  - Méthode
-  - Reference
-  - WebAssembly
-translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/compile
-original_slug: Web/JavaScript/Reference/Objets_globaux/WebAssembly/compile
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <strong><code>WebAssembly.compile()</code></strong>, permet de compiler un module ({{jsxref("WebAssembly.Module")}} à partir d'un code binaire WebAssembly. Cette fonction est utile lorsqu'il est nécessaire de compiler un module avant de l'instancier (dans les autres cas, la méthode {{jsxref("WebAssembly.instantiate()")}} sera plus pertinente).</p>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">Promise&lt;WebAssembly.Module&gt; WebAssembly.compile(bufferSource);</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>bufferSource</code></dt>
- <dd>Un <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/TypedArray">tableau typé</a> ou un {{jsxref("ArrayBuffer")}} contenant le <em>bytecode</em> du module WebAssembly qu'on souhaite compiler.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Une promesse ({{jsxref("Promise")}}) dont la valeur de résolution est une instance de {{jsxref("WebAssembly.Module")}} qui représente le module compilé.</p>
-
-<h3 id="Exceptions">Exceptions</h3>
-
-<ul>
- <li>Si <code>bufferSource</code> n'est pas un tableau typé, une exception {{jsxref("TypeError")}} sera levée.</li>
- <li>Si la compilation échoue, la promesse sera rompue avec une exception {{jsxref("WebAssembly.CompileError")}}.</li>
-</ul>
-
-<h2 id="Exemples">Exemples</h2>
-
-<p>Dans l'exemple qui suit, on compile le <em>bytecode</em> <code>simple.wasm</code> grâce à la méthode <code>compile()</code> puis on envoie le contenu à <a href="https://developer.mozilla.org/fr/docs/Web/API/Web_Workers_API">un <em>worker</em></a> grâce à la méthode <code><a href="/fr/docs/Web/API/Worker/postMessage">postMessage()</a></code>.</p>
-
-<pre class="brush: js">var worker = new Worker("wasm_worker.js");
-
-fetch('simple.wasm').then(response =&gt;
-  response.arrayBuffer()
-).then(bytes =&gt;
-  WebAssembly.compile(bytes)
-).then(mod =&gt;
-  worker.postMessage(mod)
-);</pre>
-
-<div class="note">
-<p><strong>Note :</strong> Dans la plupart des cas, mieux vaudra utiliser {{jsxref("WebAssembly.compileStreaming()")}} qui est plus efficace que <code>compile()</code>.</p>
-</div>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('WebAssembly JS', '#webassemblycompile', 'compile()')}}</td>
-   <td>{{Spec2('WebAssembly JS')}}</td>
-   <td>Brouillon de définition initiale pour WebAssembly.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.WebAssembly.compile")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/WebAssembly">Le portail WebAssembly</a></li>
- <li><a href="/fr/docs/WebAssembly/Concepts">Les concepts relatifs à WebAssembly</a></li>
- <li><a href="/fr/docs/WebAssembly/Using_the_JavaScript_API">Utiliser l'API JavaScript WebAssembly</a></li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/webassembly/compile/index.md b/files/fr/web/javascript/reference/global_objects/webassembly/compile/index.md
new file mode 100644
index 0000000000..4cb8965534
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/webassembly/compile/index.md
@@ -0,0 +1,67 @@
+---
+title: WebAssembly.compile()
+slug: Web/JavaScript/Reference/Global_Objects/WebAssembly/compile
+tags:
+  - API
+  - JavaScript
+  - Méthode
+  - Reference
+  - WebAssembly
+translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/compile
+original_slug: Web/JavaScript/Reference/Objets_globaux/WebAssembly/compile
+---
+{{JSRef}}
+
+La méthode **`WebAssembly.compile()`**, permet de compiler un module ({{jsxref("WebAssembly.Module")}} à partir d'un code binaire WebAssembly. Cette fonction est utile lorsqu'il est nécessaire de compiler un module avant de l'instancier (dans les autres cas, la méthode {{jsxref("WebAssembly.instantiate()")}} sera plus pertinente).
+
+## Syntaxe
+
+    Promise<WebAssembly.Module> WebAssembly.compile(bufferSource);
+
+### Paramètres
+
+- `bufferSource`
+  - : Un [tableau typé](/fr/docs/Web/JavaScript/Reference/Objets_globaux/TypedArray) ou un {{jsxref("ArrayBuffer")}} contenant le _bytecode_ du module WebAssembly qu'on souhaite compiler.
+
+### Valeur de retour
+
+Une promesse ({{jsxref("Promise")}}) dont la valeur de résolution est une instance de {{jsxref("WebAssembly.Module")}} qui représente le module compilé.
+
+### Exceptions
+
+- Si `bufferSource` n'est pas un tableau typé, une exception {{jsxref("TypeError")}} sera levée.
+- Si la compilation échoue, la promesse sera rompue avec une exception {{jsxref("WebAssembly.CompileError")}}.
+
+## Exemples
+
+Dans l'exemple qui suit, on compile le _bytecode_ `simple.wasm` grâce à la méthode `compile()` puis on envoie le contenu à [un _worker_](https://developer.mozilla.org/fr/docs/Web/API/Web_Workers_API) grâce à la méthode [`postMessage()`](/fr/docs/Web/API/Worker/postMessage).
+
+```js
+var worker = new Worker("wasm_worker.js");
+
+fetch('simple.wasm').then(response =>
+  response.arrayBuffer()
+).then(bytes =>
+  WebAssembly.compile(bytes)
+).then(mod =>
+  worker.postMessage(mod)
+);
+```
+
+> **Note :** Dans la plupart des cas, mieux vaudra utiliser {{jsxref("WebAssembly.compileStreaming()")}} qui est plus efficace que `compile()`.
+
+## Spécifications
+
+| Spécification                                                                            | État                                 | Commentaires                                       |
+| ---------------------------------------------------------------------------------------- | ------------------------------------ | -------------------------------------------------- |
+| {{SpecName('WebAssembly JS', '#webassemblycompile', 'compile()')}} | {{Spec2('WebAssembly JS')}} | Brouillon de définition initiale pour WebAssembly. |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.WebAssembly.compile")}}
+
+## Voir aussi
+
+- [Le portail WebAssembly](/fr/docs/WebAssembly)
+- [Les concepts relatifs à WebAssembly](/fr/docs/WebAssembly/Concepts)
+- [Utiliser l'API JavaScript WebAssembly](/fr/docs/WebAssembly/Using_the_JavaScript_API)
diff --git a/files/fr/web/javascript/reference/global_objects/webassembly/compileerror/index.html b/files/fr/web/javascript/reference/global_objects/webassembly/compileerror/index.html
deleted file mode 100644
index 0807afd7da..0000000000
--- a/files/fr/web/javascript/reference/global_objects/webassembly/compileerror/index.html
+++ /dev/null
@@ -1,117 +0,0 @@
----
-title: WebAssembly.CompileError()
-slug: Web/JavaScript/Reference/Global_Objects/WebAssembly/CompileError
-tags:
-  - API
-  - CompileError
-  - Constructeur
-  - Error
-  - JavaScript
-  - NativeError
-  - Reference
-  - WebAssembly
-translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/CompileError
-original_slug: Web/JavaScript/Reference/Objets_globaux/WebAssembly/CompileError
----
-<div>{{JSRef}}</div>
-
-<p>Le constructeur <code><strong>WebAssembly.CompileError()</strong></code> permet de créer une nouvelle instance de <code>CompileError</code> qui indique qu'une erreur s'est produite lors du décodage du code WebAssembly ou lors de sa validation.</p>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">new WebAssembly.CompileError(<var>message</var>, <var>nomFichier</var>, <var>numeroLigne</var>)</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>message</code> {{optional_inline}}</dt>
- <dd>Une description, compréhensible par un humain, de l'erreur qui s'est produite.</dd>
- <dt><code>nomFichier</code> {{optional_inline}}{{non-standard_inline}}</dt>
- <dd>Le nom du fichier contenant le code à l'origine de l'exception.</dd>
- <dt><code>numeroLigne</code> {{optional_inline}}{{non-standard_inline}}</dt>
- <dd>Le numéro de la ligne du fichier à l'origine de l'exception.</dd>
-</dl>
-
-<h2 id="Propriétés">Propriétés</h2>
-
-<p><em>Le constructeur <code>CompileError</code> ne possède aucune propriété propre. En revanche, il hérite de certaines propriétés via sa chaîne de prototypes.</em></p>
-
-<dl>
- <dt><code>WebAssembly.CompileError.prototype.constructor</code></dt>
- <dd>Définit la fonction qui crée le prototype d'une instance.</dd>
- <dt>{{jsxref("Error.prototype.message", "WebAssembly.CompileError.prototype.message")}}</dt>
- <dd>Le message qui décrit l'erreur. Bien qu'ECMA-262 indique que  l'instance devrait fournir sa propre propriété <code>message</code>, pour <a href="/fr/docs/SpiderMonkey">SpiderMonkey</a>, celle-ci est héritée depuis {{jsxref("Error.prototype.message")}}.</dd>
- <dt>{{jsxref("Error.prototype.name", "WebAssembly.CompileError.prototype.name")}}</dt>
- <dd>Le nom de l'erreur. Cette propriété est héritée depuis {{jsxref("Error")}}.</dd>
- <dt>{{jsxref("Error.prototype.fileName", "WebAssembly.CompileError.prototype.fileName")}}</dt>
- <dd>Le chemin vers le fichier qui a entraîné l'erreur. Cette propriété est héritée via {{jsxref("Error")}}.</dd>
- <dt>{{jsxref("Error.prototype.lineNumber", "WebAssembly.CompileError.prototype.lineNumber")}}</dt>
- <dd>Le numéro de la ligne dans le fichier qui a entraîné l'erreur. Cette propriété est héritée via {{jsxref("Error")}}.</dd>
- <dt>{{jsxref("Error.prototype.columnNumber", "WebAssembly.CompileError.prototype.columnNumber")}}</dt>
- <dd>Le numéro de la colonne dans la ligne du fichier qui a entraîné l'erreur. Cette propriété est héritée via {{jsxref("Error")}}.</dd>
- <dt>{{jsxref("Error.prototype.stack", "WebAssembly.CompileError.prototype.stack")}}</dt>
- <dd>La pile d'appel. Cette propriété est héritée via {{jsxref("Error")}}.</dd>
-</dl>
-
-<h2 id="Méthodes">Méthodes</h2>
-
-<p><em>Le constructeur <code>CompileError</code> ne contient aucune méthode qui lui soit propre. En revanche, il hérite de certaines méthodes grâce à sa chaîne de prototypes.</em></p>
-
-<dl>
- <dt>{{jsxref("Error.prototype.toSource", "WebAssembly.CompileError.prototype.toSource()")}}</dt>
- <dd>Cette méthode renvoie un code qui pourrait provoquer la même erreur. Elle est héritée via {{jsxref("Error")}}.</dd>
- <dt>{{jsxref("Error.prototype.toString", "WebAssembly.CompileError.prototype.toString()")}}</dt>
- <dd>Cette méthode renvoie une chaîne de caractères qui représente l'objet de l'erreur. Elle est héritée via {{jsxref("Error")}}.</dd>
-</dl>
-
-<h2 id="Exemples">Exemples</h2>
-
-<p>Le fragment de code qui suit crée une instance de <code>CompileError</code> puis imprime ses détails dans la console :</p>
-
-<pre class="brush: js">try {
-  throw new WebAssembly.CompileError('Coucou', 'unFichier', 10);
-} catch (e) {
-  console.log(e instanceof CompileError); // true
-  console.log(e.message);                 // "Coucou"
-  console.log(e.name);                    // "CompileError"
-  console.log(e.fileName);                // "unFichier"
-  console.log(e.lineNumber);              // 10
-  console.log(e.columnNumber);            // 0
-  console.log(e.stack);                   // la pile d'appel pour le code
-}</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('WebAssembly JS', '#constructor-properties-of-the-webassembly-object', 'WebAssembly constructors')}}</td>
-   <td>{{Spec2('WebAssembly JS')}}</td>
-   <td>Brouillon pour la définition Initiale de WebAssembly.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-native-error-types-used-in-this-standard', 'NativeError')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td>Définition des types standards pour <code>NativeError</code>.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.WebAssembly.CompileError")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/WebAssembly">Le portail WebAssembly</a></li>
- <li><a href="/fr/docs/WebAssembly/Concepts">Les concepts relatifs à WebAssembly</a></li>
- <li><a href="/fr/docs/WebAssembly/Using_the_JavaScript_API">Utiliser l'API JavaScript WebAssembly</a></li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/webassembly/compileerror/index.md b/files/fr/web/javascript/reference/global_objects/webassembly/compileerror/index.md
new file mode 100644
index 0000000000..be5311cebf
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/webassembly/compileerror/index.md
@@ -0,0 +1,94 @@
+---
+title: WebAssembly.CompileError()
+slug: Web/JavaScript/Reference/Global_Objects/WebAssembly/CompileError
+tags:
+  - API
+  - CompileError
+  - Constructeur
+  - Error
+  - JavaScript
+  - NativeError
+  - Reference
+  - WebAssembly
+translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/CompileError
+original_slug: Web/JavaScript/Reference/Objets_globaux/WebAssembly/CompileError
+---
+{{JSRef}}
+
+Le constructeur **`WebAssembly.CompileError()`** permet de créer une nouvelle instance de `CompileError` qui indique qu'une erreur s'est produite lors du décodage du code WebAssembly ou lors de sa validation.
+
+## Syntaxe
+
+    new WebAssembly.CompileError(message, nomFichier, numeroLigne)
+
+### Paramètres
+
+- `message` {{optional_inline}}
+  - : Une description, compréhensible par un humain, de l'erreur qui s'est produite.
+- `nomFichier` {{optional_inline}}{{non-standard_inline}}
+  - : Le nom du fichier contenant le code à l'origine de l'exception.
+- `numeroLigne` {{optional_inline}}{{non-standard_inline}}
+  - : Le numéro de la ligne du fichier à l'origine de l'exception.
+
+## Propriétés
+
+_Le constructeur `CompileError` ne possède aucune propriété propre. En revanche, il hérite de certaines propriétés via sa chaîne de prototypes._
+
+- `WebAssembly.CompileError.prototype.constructor`
+  - : Définit la fonction qui crée le prototype d'une instance.
+- {{jsxref("Error.prototype.message", "WebAssembly.CompileError.prototype.message")}}
+  - : Le message qui décrit l'erreur. Bien qu'ECMA-262 indique que  l'instance devrait fournir sa propre propriété `message`, pour [SpiderMonkey](/fr/docs/SpiderMonkey), celle-ci est héritée depuis {{jsxref("Error.prototype.message")}}.
+- {{jsxref("Error.prototype.name", "WebAssembly.CompileError.prototype.name")}}
+  - : Le nom de l'erreur. Cette propriété est héritée depuis {{jsxref("Error")}}.
+- {{jsxref("Error.prototype.fileName", "WebAssembly.CompileError.prototype.fileName")}}
+  - : Le chemin vers le fichier qui a entraîné l'erreur. Cette propriété est héritée via {{jsxref("Error")}}.
+- {{jsxref("Error.prototype.lineNumber", "WebAssembly.CompileError.prototype.lineNumber")}}
+  - : Le numéro de la ligne dans le fichier qui a entraîné l'erreur. Cette propriété est héritée via {{jsxref("Error")}}.
+- {{jsxref("Error.prototype.columnNumber", "WebAssembly.CompileError.prototype.columnNumber")}}
+  - : Le numéro de la colonne dans la ligne du fichier qui a entraîné l'erreur. Cette propriété est héritée via {{jsxref("Error")}}.
+- {{jsxref("Error.prototype.stack", "WebAssembly.CompileError.prototype.stack")}}
+  - : La pile d'appel. Cette propriété est héritée via {{jsxref("Error")}}.
+
+## Méthodes
+
+_Le constructeur `CompileError` ne contient aucune méthode qui lui soit propre. En revanche, il hérite de certaines méthodes grâce à sa chaîne de prototypes._
+
+- {{jsxref("Error.prototype.toSource", "WebAssembly.CompileError.prototype.toSource()")}}
+  - : Cette méthode renvoie un code qui pourrait provoquer la même erreur. Elle est héritée via {{jsxref("Error")}}.
+- {{jsxref("Error.prototype.toString", "WebAssembly.CompileError.prototype.toString()")}}
+  - : Cette méthode renvoie une chaîne de caractères qui représente l'objet de l'erreur. Elle est héritée via {{jsxref("Error")}}.
+
+## Exemples
+
+Le fragment de code qui suit crée une instance de `CompileError` puis imprime ses détails dans la console :
+
+```js
+try {
+  throw new WebAssembly.CompileError('Coucou', 'unFichier', 10);
+} catch (e) {
+  console.log(e instanceof CompileError); // true
+  console.log(e.message);                 // "Coucou"
+  console.log(e.name);                    // "CompileError"
+  console.log(e.fileName);                // "unFichier"
+  console.log(e.lineNumber);              // 10
+  console.log(e.columnNumber);            // 0
+  console.log(e.stack);                   // la pile d'appel pour le code
+}
+```
+
+## Spécifications
+
+| Spécification                                                                                                                                        | État                                 | Commentaires                                          |
+| ---------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------ | ----------------------------------------------------- |
+| {{SpecName('WebAssembly JS', '#constructor-properties-of-the-webassembly-object', 'WebAssembly constructors')}} | {{Spec2('WebAssembly JS')}} | Brouillon pour la définition Initiale de WebAssembly. |
+| {{SpecName('ESDraft', '#sec-native-error-types-used-in-this-standard', 'NativeError')}}                                 | {{Spec2('ESDraft')}}         | Définition des types standards pour `NativeError`.    |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.WebAssembly.CompileError")}}
+
+## Voir aussi
+
+- [Le portail WebAssembly](/fr/docs/WebAssembly)
+- [Les concepts relatifs à WebAssembly](/fr/docs/WebAssembly/Concepts)
+- [Utiliser l'API JavaScript WebAssembly](/fr/docs/WebAssembly/Using_the_JavaScript_API)
diff --git a/files/fr/web/javascript/reference/global_objects/webassembly/compilestreaming/index.html b/files/fr/web/javascript/reference/global_objects/webassembly/compilestreaming/index.html
deleted file mode 100644
index 539c7b3e2f..0000000000
--- a/files/fr/web/javascript/reference/global_objects/webassembly/compilestreaming/index.html
+++ /dev/null
@@ -1,80 +0,0 @@
----
-title: WebAssembly.compileStreaming()
-slug: Web/JavaScript/Reference/Global_Objects/WebAssembly/compileStreaming
-tags:
-  - API
-  - JavaScript
-  - Méthode
-  - Object
-  - Reference
-  - WebAssembly
-translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/compileStreaming
-original_slug: Web/JavaScript/Reference/Objets_globaux/WebAssembly/compileStreaming
----
-<div>{{JSRef}}</div>
-
-<p>La fonction <strong><code>WebAssembly.compileStreaming()</code></strong> permet de compiler un module WebAssembly (c'est-à-dire un objet {{jsxref("WebAssembly.Module")}}) depuis un flux source. Cette fonction est utile si on doit compiler un module avant de l'instancier séparement, sinon on utilisera plutôt {{jsxref("WebAssembly.instantiateStreaming()")}}.</p>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">Promise&lt;WebAssembly.Module&gt; WebAssembly.compileStreaming(<em>source</em>);</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>source</code></dt>
- <dd>Un objet {{domxref("Response")}} ou une promesse qui sera résolue avec un objet {{domxref("Response")}} qui représentee la source du module .wasm qu'on souhaite manipuler comme un flux et compiler.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Un objet <code>Promise</code> dont la valeur de résolution est un objet {{jsxref("WebAssembly.Module")}} qui représente le module compilé.</p>
-
-<h3 id="Exceptions">Exceptions</h3>
-
-<ul>
- <li>Si la compilation échoue, la promesse est rejetée avec une exception {{jsxref("WebAssembly.CompileError")}}.</li>
-</ul>
-
-<h2 id="Exemples">Exemples</h2>
-
-<p>Dans l'exemple suivant (également disponible sur GitHub : <a href="https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/compile-streaming.html">compile-streaming.html</a> et avec <a href="https://mdn.github.io/webassembly-examples/js-api-examples/compile-streaming.html">le résultat <em>live</em></a>), on récupère un flux dedpuis un module .wasm puis on le compile en un objet {{jsxref("WebAssembly.Module")}}. La fonction <code>compileStreaming()</code>  acceptant une promesse pour un objet {{domxref("Response")}}, on peut directement passer l'appel à  {{domxref("WindowOrWorkerGlobalScope.fetch()")}} qui transfèrera la réponse dès que la promesse sera tenue.</p>
-
-<pre class="brush: js">var importObject = { imports: { imported_func: arg =&gt; console.log(arg) } };
-
-WebAssembly.compileStreaming(fetch('simple.wasm'))
-.then(module =&gt; WebAssembly.instantiate(module, importObject))
-.then(instance =&gt; instance.exports.exported_func());</pre>
-
-<p>Le module est ensuite instancié grâce à la fonction {{jsxref("WebAssembly.instantiate()")}}. Enfin, on appelle la fonction exportée.</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('WebAssembly Embedding', '#webassemblycompilestreaming', 'compileStreaming()')}}</td>
-   <td>{{Spec2('WebAssembly Embedding')}}</td>
-   <td>Brouillon pour la définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.WebAssembly.compileStreaming")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/WebAssembly">La page d'aperçu de WebAssembly</a></li>
- <li><a href="/fr/docs/WebAssembly/Concepts">Les concepts relatifs à WebAssembly</a></li>
- <li><a href="/fr/docs/WebAssembly/Using_the_JavaScript_API">Utiliser l'API JavaScript de WebAssembly</a></li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/webassembly/compilestreaming/index.md b/files/fr/web/javascript/reference/global_objects/webassembly/compilestreaming/index.md
new file mode 100644
index 0000000000..5328b248d6
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/webassembly/compilestreaming/index.md
@@ -0,0 +1,63 @@
+---
+title: WebAssembly.compileStreaming()
+slug: Web/JavaScript/Reference/Global_Objects/WebAssembly/compileStreaming
+tags:
+  - API
+  - JavaScript
+  - Méthode
+  - Object
+  - Reference
+  - WebAssembly
+translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/compileStreaming
+original_slug: Web/JavaScript/Reference/Objets_globaux/WebAssembly/compileStreaming
+---
+{{JSRef}}
+
+La fonction **`WebAssembly.compileStreaming()`** permet de compiler un module WebAssembly (c'est-à-dire un objet {{jsxref("WebAssembly.Module")}}) depuis un flux source. Cette fonction est utile si on doit compiler un module avant de l'instancier séparement, sinon on utilisera plutôt {{jsxref("WebAssembly.instantiateStreaming()")}}.
+
+## Syntaxe
+
+    Promise<WebAssembly.Module> WebAssembly.compileStreaming(source);
+
+### Paramètres
+
+- `source`
+  - : Un objet {{domxref("Response")}} ou une promesse qui sera résolue avec un objet {{domxref("Response")}} qui représentee la source du module .wasm qu'on souhaite manipuler comme un flux et compiler.
+
+### Valeur de retour
+
+Un objet `Promise` dont la valeur de résolution est un objet {{jsxref("WebAssembly.Module")}} qui représente le module compilé.
+
+### Exceptions
+
+- Si la compilation échoue, la promesse est rejetée avec une exception {{jsxref("WebAssembly.CompileError")}}.
+
+## Exemples
+
+Dans l'exemple suivant (également disponible sur GitHub : [compile-streaming.html](https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/compile-streaming.html) et avec [le résultat _live_](https://mdn.github.io/webassembly-examples/js-api-examples/compile-streaming.html)), on récupère un flux dedpuis un module .wasm puis on le compile en un objet {{jsxref("WebAssembly.Module")}}. La fonction `compileStreaming()`  acceptant une promesse pour un objet {{domxref("Response")}}, on peut directement passer l'appel à  {{domxref("WindowOrWorkerGlobalScope.fetch()")}} qui transfèrera la réponse dès que la promesse sera tenue.
+
+```js
+var importObject = { imports: { imported_func: arg => console.log(arg) } };
+
+WebAssembly.compileStreaming(fetch('simple.wasm'))
+.then(module => WebAssembly.instantiate(module, importObject))
+.then(instance => instance.exports.exported_func());
+```
+
+Le module est ensuite instancié grâce à la fonction {{jsxref("WebAssembly.instantiate()")}}. Enfin, on appelle la fonction exportée.
+
+## Spécifications
+
+| Spécification                                                                                                            | État                                         | Commentaires                           |
+| ------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------- | -------------------------------------- |
+| {{SpecName('WebAssembly Embedding', '#webassemblycompilestreaming', 'compileStreaming()')}} | {{Spec2('WebAssembly Embedding')}} | Brouillon pour la définition initiale. |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.WebAssembly.compileStreaming")}}
+
+## Voir aussi
+
+- [La page d'aperçu de WebAssembly](/fr/docs/WebAssembly)
+- [Les concepts relatifs à WebAssembly](/fr/docs/WebAssembly/Concepts)
+- [Utiliser l'API JavaScript de WebAssembly](/fr/docs/WebAssembly/Using_the_JavaScript_API)
diff --git a/files/fr/web/javascript/reference/global_objects/webassembly/global/index.html b/files/fr/web/javascript/reference/global_objects/webassembly/global/index.html
deleted file mode 100644
index d31849c70e..0000000000
--- a/files/fr/web/javascript/reference/global_objects/webassembly/global/index.html
+++ /dev/null
@@ -1,116 +0,0 @@
----
-title: WebAssembly.Global
-slug: Web/JavaScript/Reference/Global_Objects/WebAssembly/Global
-tags:
-  - API
-  - Constructor
-  - JavaScript
-  - Reference
-  - TopicStub
-  - WebAssembly
-  - global
-translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/Global
-original_slug: Web/JavaScript/Reference/Objets_globaux/WebAssembly/Global
----
-<div>{{JSRef}}</div>
-
-<p>Un objet <strong><code>WebAssembly.Global</code></strong> représente une instance d'une variable globale, accessible depuis le code JavaScript et importable/exportable pour un ou plusieurs modules WebAssembly ({{jsxref("WebAssembly.Module")}}). Cela permet de lier dynamiquement plusieurs modules.</p>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox notranslate">var maGlobale = new WebAssembly.Global(<em>descripteur</em>, <em>valeur</em>);</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>descripteur</code></dt>
- <dd>Un dictionnaire <code>GlobalDescriptor</code> qui contient deux propriétés :
- <ul>
-  <li><code>value</code> : une valeur {{domxref("USVString")}} qui représente le type de donnée de la variable globale. Ce type peut être <code>i32</code>, <code>i64</code>, <code>f32</code> ou <code>f64</code>.</li>
-  <li><code>mutable</code> : un booléen qui indique si la variable globale peut être modifiée ou non. Par défaut, cette propriété vaut <code>false</code>.</li>
- </ul>
- </dd>
- <dt><code>valeur</code></dt>
- <dd>La valeur que la variable doit contenir. Ce peut être n'importe quelle valeur qui respecte le type de donnée de la variable. Si aucune valeur n'est indiquée, c'est une valeur nulle typée qui est utilisée, tel qu'indiqué dans l'<a href="https://webassembly.github.io/spec/js-api/#defaultvalue">algorithme <code>DefaultValue</code></a>.</dd>
-</dl>
-
-<h2 id="Propriétés">Propriétés</h2>
-
-<p>Aucune.</p>
-
-<h2 id="Instances_de_WebAssembly.Global">Instances de <code>WebAssembly.Global</code></h2>
-
-<p>Toutes les instances de <code>Global</code> héritent du <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Global/prototype">prototype </a>du constructeur <code>Global()</code>. Ce prototype peut être modifié afin d'avoir un impact sur l'ensemble des instances de <code>Global</code>.</p>
-
-<h3 id="Propriétés_des_instances">Propriétés des instances</h3>
-
-<p>{{page('/fr/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Global/prototype', 'Propriétés')}}</p>
-
-<h3 id="Méthodes_des_instances">Méthodes des instances</h3>
-
-<p>{{page('/fr/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Global/prototype', 'Méthodes')}}</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<p>Dans l'exemple suivant, on montre comment créer une nouvelle instance globale grâce au constructeur <code>WebAssembly.Global()</code>. Cette instance globale est définie avec le type <code>i32</code> et est indiquée comme modifiable. Sa valeur initiale est 0.</p>
-
-<p>On change ensuite la valeur de la variable globale en la passant à 42 grâce à la propriété <code>Global.value</code> puis en la passant à 43 grâce à la fonction <code>incGlobal()</code> qui a été exportée depuis le module <code>global.wasm</code> (cette fonction ajoute 1 à n'imorte quelle valeur puis renvoie cette nouvelle valeur).</p>
-
-<pre class="brush: js notranslate">const output = document.getElementById('output');
-
-function assertEq(msg, got, expected) {
-    output.innerHTML += `Testing ${msg}: `;
-    if (got !== expected)
-        output.innerHTML += `FAIL!&lt;br&gt;Got: ${got}&lt;br&gt;Expected: ${expected}&lt;br&gt;`;
-    else
-        output.innerHTML += `SUCCESS! Got: ${got}&lt;br&gt;`;
-}
-
-assertEq("WebAssembly.Global exists", typeof WebAssembly.Global, "function");
-
-const global = new WebAssembly.Global({value:'i32', mutable:true}, 0);
-
-WebAssembly.instantiateStreaming(fetch('global.wasm'), { js: { global } })
-.then(({instance}) =&gt; {
-    assertEq("getting initial value from wasm", instance.exports.getGlobal(), 0);
-    global.value = 42;
-    assertEq("getting JS-updated value from wasm", instance.exports.getGlobal(), 42);
-    instance.exports.incGlobal();
-    assertEq("getting wasm-updated value from JS", global.value, 43);
-});</pre>
-
-<div class="note">
-<p><strong>Note :</strong> Cet exemple est<a href="https://mdn.github.io/webassembly-examples/js-api-examples/global.html"> utilisable sur GitHub</a> et <a href="https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/global.html">son code source est également disponible</a>.</p>
-</div>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('WebAssembly JS', '#globals', 'WebAssembly.Global()')}}</td>
-   <td>{{Spec2('WebAssembly JS')}}</td>
-   <td>Brouillon de spécification initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.WebAssembly.Global")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/WebAssembly">Page principale pour la section WebAssembly de MDN</a></li>
- <li><a href="/fr/docs/WebAssembly/Concepts">Concepts WebAssembly</a></li>
- <li><a href="/fr/docs/WebAssembly/Using_the_JavaScript_API">Utiliser l'API JavaScript WebAssembly</a></li>
- <li><a href="https://github.com/WebAssembly/mutable-global/blob/master/proposals/mutable-global/Overview.md">La proposition pour l'import/export de variables globales modifiables</a></li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/webassembly/global/index.md b/files/fr/web/javascript/reference/global_objects/webassembly/global/index.md
new file mode 100644
index 0000000000..67133e3992
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/webassembly/global/index.md
@@ -0,0 +1,99 @@
+---
+title: WebAssembly.Global
+slug: Web/JavaScript/Reference/Global_Objects/WebAssembly/Global
+tags:
+  - API
+  - Constructor
+  - JavaScript
+  - Reference
+  - TopicStub
+  - WebAssembly
+  - global
+translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/Global
+original_slug: Web/JavaScript/Reference/Objets_globaux/WebAssembly/Global
+---
+{{JSRef}}
+
+Un objet **`WebAssembly.Global`** représente une instance d'une variable globale, accessible depuis le code JavaScript et importable/exportable pour un ou plusieurs modules WebAssembly ({{jsxref("WebAssembly.Module")}}). Cela permet de lier dynamiquement plusieurs modules.
+
+## Syntaxe
+
+    var maGlobale = new WebAssembly.Global(descripteur, valeur);
+
+### Paramètres
+
+- `descripteur`
+
+  - : Un dictionnaire `GlobalDescriptor` qui contient deux propriétés :
+
+    - `value` : une valeur {{domxref("USVString")}} qui représente le type de donnée de la variable globale. Ce type peut être `i32`, `i64`, `f32` ou `f64`.
+    - `mutable` : un booléen qui indique si la variable globale peut être modifiée ou non. Par défaut, cette propriété vaut `false`.
+
+- `valeur`
+  - : La valeur que la variable doit contenir. Ce peut être n'importe quelle valeur qui respecte le type de donnée de la variable. Si aucune valeur n'est indiquée, c'est une valeur nulle typée qui est utilisée, tel qu'indiqué dans l'[algorithme `DefaultValue`](https://webassembly.github.io/spec/js-api/#defaultvalue).
+
+## Propriétés
+
+Aucune.
+
+## Instances de `WebAssembly.Global`
+
+Toutes les instances de `Global` héritent du [prototype ](/en-US/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Global/prototype)du constructeur `Global()`. Ce prototype peut être modifié afin d'avoir un impact sur l'ensemble des instances de `Global`.
+
+### Propriétés des instances
+
+{{page('/fr/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Global/prototype', 'Propriétés')}}
+
+### Méthodes des instances
+
+{{page('/fr/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Global/prototype', 'Méthodes')}}
+
+## Exemples
+
+Dans l'exemple suivant, on montre comment créer une nouvelle instance globale grâce au constructeur `WebAssembly.Global()`. Cette instance globale est définie avec le type `i32` et est indiquée comme modifiable. Sa valeur initiale est 0.
+
+On change ensuite la valeur de la variable globale en la passant à 42 grâce à la propriété `Global.value` puis en la passant à 43 grâce à la fonction `incGlobal()` qui a été exportée depuis le module `global.wasm` (cette fonction ajoute 1 à n'imorte quelle valeur puis renvoie cette nouvelle valeur).
+
+```js
+const output = document.getElementById('output');
+
+function assertEq(msg, got, expected) {
+    output.innerHTML += `Testing ${msg}: `;
+    if (got !== expected)
+        output.innerHTML += `FAIL!<br>Got: ${got}<br>Expected: ${expected}<br>`;
+    else
+        output.innerHTML += `SUCCESS! Got: ${got}<br>`;
+}
+
+assertEq("WebAssembly.Global exists", typeof WebAssembly.Global, "function");
+
+const global = new WebAssembly.Global({value:'i32', mutable:true}, 0);
+
+WebAssembly.instantiateStreaming(fetch('global.wasm'), { js: { global } })
+.then(({instance}) => {
+    assertEq("getting initial value from wasm", instance.exports.getGlobal(), 0);
+    global.value = 42;
+    assertEq("getting JS-updated value from wasm", instance.exports.getGlobal(), 42);
+    instance.exports.incGlobal();
+    assertEq("getting wasm-updated value from JS", global.value, 43);
+});
+```
+
+> **Note :** Cet exemple est[ utilisable sur GitHub](https://mdn.github.io/webassembly-examples/js-api-examples/global.html) et [son code source est également disponible](https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/global.html).
+
+## Spécifications
+
+| Spécification                                                                            | État                                 | Commentaires                         |
+| ---------------------------------------------------------------------------------------- | ------------------------------------ | ------------------------------------ |
+| {{SpecName('WebAssembly JS', '#globals', 'WebAssembly.Global()')}} | {{Spec2('WebAssembly JS')}} | Brouillon de spécification initiale. |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.WebAssembly.Global")}}
+
+## Voir aussi
+
+- [Page principale pour la section WebAssembly de MDN](/fr/docs/WebAssembly)
+- [Concepts WebAssembly](/fr/docs/WebAssembly/Concepts)
+- [Utiliser l'API JavaScript WebAssembly](/fr/docs/WebAssembly/Using_the_JavaScript_API)
+- [La proposition pour l'import/export de variables globales modifiables](https://github.com/WebAssembly/mutable-global/blob/master/proposals/mutable-global/Overview.md)
diff --git a/files/fr/web/javascript/reference/global_objects/webassembly/index.html b/files/fr/web/javascript/reference/global_objects/webassembly/index.html
deleted file mode 100644
index eb71d2c673..0000000000
--- a/files/fr/web/javascript/reference/global_objects/webassembly/index.html
+++ /dev/null
@@ -1,105 +0,0 @@
----
-title: WebAssembly
-slug: Web/JavaScript/Reference/Global_Objects/WebAssembly
-tags:
-  - API
-  - JavaScript
-  - Object
-  - Reference
-  - WebAssembly
-translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly
-original_slug: Web/JavaScript/Reference/Objets_globaux/WebAssembly
----
-<div>{{JSRef}}</div>
-
-<p>L'objet JavaScript <strong><code>WebAssembly</code></strong> est un objet global qui agit comme un espace de noms (<em>namespace</em>) pour les différentes fonctionnalités JavaScript relatives à <a href="/fr/docs/WebAssembly">WebAssembly</a>.</p>
-
-<p>À la différence des autres objets globaux, <code>WebAssembly</code> n'est pas un constructeur (au même titre que {{jsxref("Math")}} qui agit comme un espace de noms pour les constantes et fonctions mathématiques ou comme {{jsxref("Intl")}} qui centralise les constructeurs et les opérations relatives à l'internationalisation).</p>
-
-<h2 id="Description">Description</h2>
-
-<p>L'objet <code>WebAssembly</code> est notamment utilisé pour :</p>
-
-<ul>
- <li>Charger du code WebAssembly grâce à la fonction {{jsxref("WebAssembly.instantiate()")}}</li>
- <li>Créer des zones mémoires et des instances de tableaux grâce aux constructeurs  {{jsxref("WebAssembly.Memory()")}}/{{jsxref("WebAssembly.Table()")}}.</li>
- <li>Fournir des outils de gestion d'erreur WebAssembly grâce aux constructeurs {{jsxref("WebAssembly.CompileError()")}}/{{jsxref("WebAssembly.LinkError()")}}/{{jsxref("WebAssembly.RuntimeError()")}}.</li>
-</ul>
-
-<h2 id="Méthodes">Méthodes</h2>
-
-<dl>
- <dt>{{jsxref("WebAssembly.instantiate()")}}</dt>
- <dd>La méthode qu'on utilisera la plupart du temps pour compiler et instancier du code WebAssembly, elle renvoie une promesse qui est résolue en une <code>Instance</code> ou en une <code>Instance</code> et un <code>Module</code>.</dd>
- <dt>{{jsxref("WebAssembly.instantiateStreaming()")}}</dt>
- <dd>Cette méthode peremet de compiler et d'instancier un module WebAssembly à partir d'un flux source (<em>streamed source</em>). Elle renvoie à la fois un objet <code>Module</code> et sa première <code>Instance</code>.</dd>
- <dt>{{jsxref("WebAssembly.compile()")}}</dt>
- <dd>Cette méthode permet de compiler un {{jsxref("WebAssembly.Module")}} à partir de <em>bytecode</em>  WebAssembly, l'instanciation doit alors être effectuée dans une autre étape.</dd>
- <dt>{{jsxref("WebAssembly.compileStreaming()")}}</dt>
- <dd>Cette méthode permet de compiler un module {{jsxref("WebAssembly.Module")}} à partir d'un flux source (<em>streamed source</em>). L'instanciation devra alors être réalisée avec une autre étape.</dd>
- <dt>{{jsxref("WebAssembly.validate()")}}</dt>
- <dd>Cette méthode permet de valider un tableau typé censé contenir du <em>bytecode</em> WebAssembly : elle renvoie <code>true</code> si les octets forment un code WebAssembly valide ou <code>false</code> sinon.</dd>
-</dl>
-
-<h2 id="Constructeurs">Constructeurs</h2>
-
-<dl>
- <dt>{{jsxref("WebAssembly.Global()")}}</dt>
- <dd>Ce constructeur permet de créer un nouvel objet WebAssembly <code>Global</code>.</dd>
- <dt>{{jsxref("WebAssembly.Module()")}}</dt>
- <dd>Ce constructeur permet de créer un objet WebAssembly <code>Module</code>.</dd>
- <dt>{{jsxref("WebAssembly.Instance()")}}</dt>
- <dd>Ce constructeur permet de créer un objet WebAssembly <code>Instance</code>.</dd>
- <dt>{{jsxref("WebAssembly.Memory()")}}</dt>
- <dd>Ce constructeur permet de créer un objet WebAssembly <code>Memory</code>.</dd>
- <dt>{{jsxref("WebAssembly.Table()")}}</dt>
- <dd>Ce constructeur permet de créer un objet WebAssembly <code>Table</code>.</dd>
- <dt>{{jsxref("WebAssembly.CompileError()")}}</dt>
- <dd>Ce constructeur permet de créer un objet WebAssembly <code>CompileError</code>.</dd>
- <dt>{{jsxref("WebAssembly.LinkError()")}}</dt>
- <dd>Ce constructeur permet de créer un objet WebAssembly <code>LinkError</code>.</dd>
- <dt>{{jsxref("WebAssembly.RuntimeError()")}}</dt>
- <dd>Ce constructeur permet de créer un objet WebAssembly <code>RuntimeError</code>.</dd>
-</dl>
-
-<h2 id="Exemples">Exemples</h2>
-
-<p>L'exemple suivant (cf. le fichier <code><a href="https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/instantiate-streaming.html">instantiate-streaming.html</a></code> sur GitHub et <a href="https://mdn.github.io/webassembly-examples/js-api-examples/instantiate-streaming.html">le résultat obtenu</a>) permet de récupérer le module WebAssembly via un flux depuis une source, de le compiler, puis de l'instancier. La promesse est résolue avec un objet <code>ResultObject</code>. La méthode <code>instantiateStreaming()</code> accepte une promesse pour l'argument {{domxref("Response")}}, on peut lui passer directement un appel à {{domxref("WindowOrWorkerGlobalScope.fetch()")}} qui passera ensuite la réponse à la fonction lors de la complétion de la promesse.</p>
-
-<pre class="brush: js">var importObject = { imports: { imported_func: arg =&gt; console.log(arg) } };
-
-WebAssembly.instantiateStreaming(fetch('simple.wasm'), importObject)
-.then(obj =&gt; obj.instance.exports.exported_func());</pre>
-
-<p>On accède alors à la propriété de l'instance <code>ResultObject</code> puis on appelle la fonction exportée.</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('WebAssembly JS', '#the-webassembly-object', 'WebAssembly')}}</td>
-   <td>{{Spec2('WebAssembly JS')}}</td>
-   <td>Brouillon de définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.WebAssembly")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/WebAssembly">Le portail WebAssembly</a></li>
- <li><a href="/fr/docs/WebAssembly/Concepts">Les concepts relatifs à WebAssembly</a></li>
- <li><a href="/fr/docs/WebAssembly/Using_the_JavaScript_API">Utiliser l'API JavaScript WebAssembly</a></li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/webassembly/index.md b/files/fr/web/javascript/reference/global_objects/webassembly/index.md
new file mode 100644
index 0000000000..5ee009f9cb
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/webassembly/index.md
@@ -0,0 +1,86 @@
+---
+title: WebAssembly
+slug: Web/JavaScript/Reference/Global_Objects/WebAssembly
+tags:
+  - API
+  - JavaScript
+  - Object
+  - Reference
+  - WebAssembly
+translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly
+original_slug: Web/JavaScript/Reference/Objets_globaux/WebAssembly
+---
+{{JSRef}}
+
+L'objet JavaScript **`WebAssembly`** est un objet global qui agit comme un espace de noms (_namespace_) pour les différentes fonctionnalités JavaScript relatives à [WebAssembly](/fr/docs/WebAssembly).
+
+À la différence des autres objets globaux, `WebAssembly` n'est pas un constructeur (au même titre que {{jsxref("Math")}} qui agit comme un espace de noms pour les constantes et fonctions mathématiques ou comme {{jsxref("Intl")}} qui centralise les constructeurs et les opérations relatives à l'internationalisation).
+
+## Description
+
+L'objet `WebAssembly` est notamment utilisé pour :
+
+- Charger du code WebAssembly grâce à la fonction {{jsxref("WebAssembly.instantiate()")}}
+- Créer des zones mémoires et des instances de tableaux grâce aux constructeurs  {{jsxref("WebAssembly.Memory()")}}/{{jsxref("WebAssembly.Table()")}}.
+- Fournir des outils de gestion d'erreur WebAssembly grâce aux constructeurs {{jsxref("WebAssembly.CompileError()")}}/{{jsxref("WebAssembly.LinkError()")}}/{{jsxref("WebAssembly.RuntimeError()")}}.
+
+## Méthodes
+
+- {{jsxref("WebAssembly.instantiate()")}}
+  - : La méthode qu'on utilisera la plupart du temps pour compiler et instancier du code WebAssembly, elle renvoie une promesse qui est résolue en une `Instance` ou en une `Instance` et un `Module`.
+- {{jsxref("WebAssembly.instantiateStreaming()")}}
+  - : Cette méthode peremet de compiler et d'instancier un module WebAssembly à partir d'un flux source (_streamed source_). Elle renvoie à la fois un objet `Module` et sa première `Instance`.
+- {{jsxref("WebAssembly.compile()")}}
+  - : Cette méthode permet de compiler un {{jsxref("WebAssembly.Module")}} à partir de *bytecode*  WebAssembly, l'instanciation doit alors être effectuée dans une autre étape.
+- {{jsxref("WebAssembly.compileStreaming()")}}
+  - : Cette méthode permet de compiler un module {{jsxref("WebAssembly.Module")}} à partir d'un flux source (_streamed source_). L'instanciation devra alors être réalisée avec une autre étape.
+- {{jsxref("WebAssembly.validate()")}}
+  - : Cette méthode permet de valider un tableau typé censé contenir du _bytecode_ WebAssembly : elle renvoie `true` si les octets forment un code WebAssembly valide ou `false` sinon.
+
+## Constructeurs
+
+- {{jsxref("WebAssembly.Global()")}}
+  - : Ce constructeur permet de créer un nouvel objet WebAssembly `Global`.
+- {{jsxref("WebAssembly.Module()")}}
+  - : Ce constructeur permet de créer un objet WebAssembly `Module`.
+- {{jsxref("WebAssembly.Instance()")}}
+  - : Ce constructeur permet de créer un objet WebAssembly `Instance`.
+- {{jsxref("WebAssembly.Memory()")}}
+  - : Ce constructeur permet de créer un objet WebAssembly `Memory`.
+- {{jsxref("WebAssembly.Table()")}}
+  - : Ce constructeur permet de créer un objet WebAssembly `Table`.
+- {{jsxref("WebAssembly.CompileError()")}}
+  - : Ce constructeur permet de créer un objet WebAssembly `CompileError`.
+- {{jsxref("WebAssembly.LinkError()")}}
+  - : Ce constructeur permet de créer un objet WebAssembly `LinkError`.
+- {{jsxref("WebAssembly.RuntimeError()")}}
+  - : Ce constructeur permet de créer un objet WebAssembly `RuntimeError`.
+
+## Exemples
+
+L'exemple suivant (cf. le fichier [`instantiate-streaming.html`](https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/instantiate-streaming.html) sur GitHub et [le résultat obtenu](https://mdn.github.io/webassembly-examples/js-api-examples/instantiate-streaming.html)) permet de récupérer le module WebAssembly via un flux depuis une source, de le compiler, puis de l'instancier. La promesse est résolue avec un objet `ResultObject`. La méthode `instantiateStreaming()` accepte une promesse pour l'argument {{domxref("Response")}}, on peut lui passer directement un appel à {{domxref("WindowOrWorkerGlobalScope.fetch()")}} qui passera ensuite la réponse à la fonction lors de la complétion de la promesse.
+
+```js
+var importObject = { imports: { imported_func: arg => console.log(arg) } };
+
+WebAssembly.instantiateStreaming(fetch('simple.wasm'), importObject)
+.then(obj => obj.instance.exports.exported_func());
+```
+
+On accède alors à la propriété de l'instance `ResultObject` puis on appelle la fonction exportée.
+
+## Spécifications
+
+| Spécification                                                                                    | État                                 | Commentaires                      |
+| ------------------------------------------------------------------------------------------------ | ------------------------------------ | --------------------------------- |
+| {{SpecName('WebAssembly JS', '#the-webassembly-object', 'WebAssembly')}} | {{Spec2('WebAssembly JS')}} | Brouillon de définition initiale. |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.WebAssembly")}}
+
+## Voir aussi
+
+- [Le portail WebAssembly](/fr/docs/WebAssembly)
+- [Les concepts relatifs à WebAssembly](/fr/docs/WebAssembly/Concepts)
+- [Utiliser l'API JavaScript WebAssembly](/fr/docs/WebAssembly/Using_the_JavaScript_API)
diff --git a/files/fr/web/javascript/reference/global_objects/webassembly/instance/exports/index.html b/files/fr/web/javascript/reference/global_objects/webassembly/instance/exports/index.html
deleted file mode 100644
index 86bece9671..0000000000
--- a/files/fr/web/javascript/reference/global_objects/webassembly/instance/exports/index.html
+++ /dev/null
@@ -1,68 +0,0 @@
----
-title: WebAssembly.Instance.prototype.exports
-slug: Web/JavaScript/Reference/Global_Objects/WebAssembly/Instance/exports
-tags:
-  - API
-  - Experimental
-  - JavaScript
-  - Propriété
-  - Reference
-  - WebAssembly
-  - instance
-translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/Instance/exports
-original_slug: Web/JavaScript/Reference/Objets_globaux/WebAssembly/Instance/exports
----
-<div>{{JSRef}}</div>
-
-<p>La propriété <strong><code>exports</code></strong> du prototype de {{jsxref("WebAssembly.Instance")}} est une propriété en lecture seul qui renvoie un objet dont les propriétés sont les différentes fonctions exportées depuis l'instance du module WebAssembly. Cela permet d'y accéder et de les manipuler en JavaScript.</p>
-
-<pre class="syntaxbox">instance.exports</pre>
-
-<h2 id="Exemples">Exemples</h2>
-
-<p>Après avoir récupéré le <em>bytecode</em> WebAssembly grâce à la méthode <code>fetch()</code>, on le compile et on instancie le module grâce à la fonction {{jsxref("WebAssembly.instantiateStreaming()")}}. Lorsqu'on utilise cette fonction, on importe une fonction dans le module. Ensuite, on appelle <a href="/fr/docs/WebAssembly/Exported_functions">une fonction WebAssembly exportée</a> qui est exposée via l'instance.</p>
-
-<pre class="brush: js">var importObject = {
-  imports: {
-    imported_func: function(arg) {
-      console.log(arg);
-    }
-  }
-};
-WebAssembly.instantiateStreaming(fetch('simple.wasm'), importObject)
-.then(obj =&gt; obj.instance.exports.exported_func());</pre>
-
-<div class="note">
-<p><strong>Note :</strong> Voir le fichier <a href="https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/index.html">index.html</a> sur GitHub (ainsi que <a href="https://mdn.github.io/webassembly-examples/js-api-examples/">la démonstration</a>) pour un exemple.</p>
-</div>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('WebAssembly JS', '#webassemblyinstance-objects', 'WebAssembly.Instance objects')}}</td>
-   <td>{{Spec2('WebAssembly JS')}}</td>
-   <td>Brouillon de définition initiale pour WebAssembly.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.WebAssembly.Instance.exports")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/WebAssembly">Le portail WebAssembly</a></li>
- <li><a href="/fr/docs/WebAssembly/Concepts">Les concepts relatifs à WebAssembly</a></li>
- <li><a href="/fr/docs/WebAssembly/Using_the_JavaScript_API">Utiliser l'API JavaScript WebAssembly</a></li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/webassembly/instance/exports/index.md b/files/fr/web/javascript/reference/global_objects/webassembly/instance/exports/index.md
new file mode 100644
index 0000000000..6a18d00743
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/webassembly/instance/exports/index.md
@@ -0,0 +1,53 @@
+---
+title: WebAssembly.Instance.prototype.exports
+slug: Web/JavaScript/Reference/Global_Objects/WebAssembly/Instance/exports
+tags:
+  - API
+  - Experimental
+  - JavaScript
+  - Propriété
+  - Reference
+  - WebAssembly
+  - instance
+translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/Instance/exports
+original_slug: Web/JavaScript/Reference/Objets_globaux/WebAssembly/Instance/exports
+---
+{{JSRef}}
+
+La propriété **`exports`** du prototype de {{jsxref("WebAssembly.Instance")}} est une propriété en lecture seul qui renvoie un objet dont les propriétés sont les différentes fonctions exportées depuis l'instance du module WebAssembly. Cela permet d'y accéder et de les manipuler en JavaScript.
+
+    instance.exports
+
+## Exemples
+
+Après avoir récupéré le _bytecode_ WebAssembly grâce à la méthode `fetch()`, on le compile et on instancie le module grâce à la fonction {{jsxref("WebAssembly.instantiateStreaming()")}}. Lorsqu'on utilise cette fonction, on importe une fonction dans le module. Ensuite, on appelle [une fonction WebAssembly exportée](/fr/docs/WebAssembly/Exported_functions) qui est exposée via l'instance.
+
+```js
+var importObject = {
+  imports: {
+    imported_func: function(arg) {
+      console.log(arg);
+    }
+  }
+};
+WebAssembly.instantiateStreaming(fetch('simple.wasm'), importObject)
+.then(obj => obj.instance.exports.exported_func());
+```
+
+> **Note :** Voir le fichier [index.html](https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/index.html) sur GitHub (ainsi que [la démonstration](https://mdn.github.io/webassembly-examples/js-api-examples/)) pour un exemple.
+
+## Spécifications
+
+| Spécification                                                                                                                | État                                 | Commentaires                                       |
+| ---------------------------------------------------------------------------------------------------------------------------- | ------------------------------------ | -------------------------------------------------- |
+| {{SpecName('WebAssembly JS', '#webassemblyinstance-objects', 'WebAssembly.Instance objects')}} | {{Spec2('WebAssembly JS')}} | Brouillon de définition initiale pour WebAssembly. |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.WebAssembly.Instance.exports")}}
+
+## Voir aussi
+
+- [Le portail WebAssembly](/fr/docs/WebAssembly)
+- [Les concepts relatifs à WebAssembly](/fr/docs/WebAssembly/Concepts)
+- [Utiliser l'API JavaScript WebAssembly](/fr/docs/WebAssembly/Using_the_JavaScript_API)
diff --git a/files/fr/web/javascript/reference/global_objects/webassembly/instance/index.html b/files/fr/web/javascript/reference/global_objects/webassembly/instance/index.html
deleted file mode 100644
index 1fceef26d9..0000000000
--- a/files/fr/web/javascript/reference/global_objects/webassembly/instance/index.html
+++ /dev/null
@@ -1,78 +0,0 @@
----
-title: WebAssembly.Instance()
-slug: Web/JavaScript/Reference/Global_Objects/WebAssembly/Instance
-tags:
-  - API
-  - Constructeur
-  - JavaScript
-  - Reference
-  - WebAssembly
-  - instance
-translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/Instance
-original_slug: Web/JavaScript/Reference/Objets_globaux/WebAssembly/Instance
----
-<div>{{JSRef}}</div>
-
-<p>Un objet <strong><code>WebAssembly.Instance</code></strong> représente un objet exécutable, avec un état, qui est une instance d'un <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/WebAssembly/Module">module WebAssembly</a>. Un objet <code>Instance</code> contient l'ensemble <a href="/fr/docs/WebAssembly/Exported_functions">des fonctions WebAssembly exportées</a> qui permettent d'invoquer du code WebAssembly depuis du code JavaScript.</p>
-
-<p>Le constructeur <code>WebAssembly.Instance()</code> peut être appelé afin de créer, de façon synchrone, une instance d'un {{jsxref("WebAssembly.Module")}} donné. Toutefois, pour obtenir une instance, on utilisera généralement la fonction asynchrone {{jsxref("WebAssembly.instantiateStreaming()")}}.</p>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<div class="warning">
-<p><strong>Attention :</strong>L'instanciation de modules volumineux peut être coûteuse en temps/ressource. <code>Instance()</code> ne doit être utilisée que lorsqu'une instanciation synchrone est nécessaire. Pour tous les autres cas, c'est la méthode {{jsxref("WebAssembly.instantiateStreaming()")}} qui devrait être utilisée.</p>
-</div>
-
-<pre class="syntaxbox">var monInstance = new WebAssembly.Instance(<em>module</em>, <em>importObject</em>);</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>module</code></dt>
- <dd>L'objet <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/WebAssembly/Module" title="The Module() constructor of the WebAssembly global object creates a new Module object instance."><code>WebAssembly.Module</code></a> qu'on souhaite instancier.</dd>
- <dt><code>importObject</code> {{optional_inline}}</dt>
- <dd>Un objet qui contient des valeurs à importer dans l'instance. Ce peuvent être des fonctions ou des objets <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/WebAssembly/Memory" title="The Memory() constructor of the WebAssembly global object creates a new Memory object instance, which represents a WebAssembly memory. These can be thought of as resizeable array buffers, wrappers around WebAssembly memories."><code>WebAssembly.Memory</code></a>. Il doit exister une propriété correspondante pour chaque import, si ce n'est pas le cas, un exception <code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/WebAssembly/LinkError">WebAssembly.LinkError</a></code> sera levée.</dd>
-</dl>
-
-<h2 id="Instances_d'Instance">Instances d'<code>Instance</code></h2>
-
-<p>Toutes les instances du type <code>Instance</code> héritent du prototype du constructeur <code>Instance()</code>. Celui-ci peut être modifié afin de modifier l'ensemble des instances de <code>Instance</code>.</p>
-
-<h3 id="Propriétés">Propriétés</h3>
-
-<p>{{page('/fr/docs/Web/JavaScript/Reference/Objets_globaux/WebAssembly/Instance/prototype', 'Propriétés')}}</p>
-
-<h3 id="Méthodes">Méthodes</h3>
-
-<p>{{page('/fr/docs/Web/JavaScript/Reference/Objets_globaux/WebAssembly/Instance/prototype', 'Méthodes')}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('WebAssembly JS', '#webassemblyinstance-objects', 'Instance')}}</td>
-   <td>{{Spec2('WebAssembly JS')}}</td>
-   <td>Définition initiale dans un brouillon de spécification.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.WebAssembly.Instance")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/WebAssembly">Le portail WebAssembly</a></li>
- <li><a href="/fr/docs/WebAssembly/Concepts">Les concepts relatifs à WebAssembly</a></li>
- <li><a href="/fr/docs/WebAssembly/Using_the_JavaScript_API">Utiliser l'API JavaScript WebAssembly</a></li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/webassembly/instance/index.md b/files/fr/web/javascript/reference/global_objects/webassembly/instance/index.md
new file mode 100644
index 0000000000..3c06a69d03
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/webassembly/instance/index.md
@@ -0,0 +1,59 @@
+---
+title: WebAssembly.Instance()
+slug: Web/JavaScript/Reference/Global_Objects/WebAssembly/Instance
+tags:
+  - API
+  - Constructeur
+  - JavaScript
+  - Reference
+  - WebAssembly
+  - instance
+translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/Instance
+original_slug: Web/JavaScript/Reference/Objets_globaux/WebAssembly/Instance
+---
+{{JSRef}}
+
+Un objet **`WebAssembly.Instance`** représente un objet exécutable, avec un état, qui est une instance d'un [module WebAssembly](/fr/docs/Web/JavaScript/Reference/Objets_globaux/WebAssembly/Module). Un objet `Instance` contient l'ensemble [des fonctions WebAssembly exportées](/fr/docs/WebAssembly/Exported_functions) qui permettent d'invoquer du code WebAssembly depuis du code JavaScript.
+
+Le constructeur `WebAssembly.Instance()` peut être appelé afin de créer, de façon synchrone, une instance d'un {{jsxref("WebAssembly.Module")}} donné. Toutefois, pour obtenir une instance, on utilisera généralement la fonction asynchrone {{jsxref("WebAssembly.instantiateStreaming()")}}.
+
+## Syntaxe
+
+> **Attention :**L'instanciation de modules volumineux peut être coûteuse en temps/ressource. `Instance()` ne doit être utilisée que lorsqu'une instanciation synchrone est nécessaire. Pour tous les autres cas, c'est la méthode {{jsxref("WebAssembly.instantiateStreaming()")}} qui devrait être utilisée.
+
+    var monInstance = new WebAssembly.Instance(module, importObject);
+
+### Paramètres
+
+- `module`
+  - : L'objet [`WebAssembly.Module`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/WebAssembly/Module "The Module() constructor of the WebAssembly global object creates a new Module object instance.") qu'on souhaite instancier.
+- `importObject` {{optional_inline}}
+  - : Un objet qui contient des valeurs à importer dans l'instance. Ce peuvent être des fonctions ou des objets [`WebAssembly.Memory`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/WebAssembly/Memory "The Memory() constructor of the WebAssembly global object creates a new Memory object instance, which represents a WebAssembly memory. These can be thought of as resizeable array buffers, wrappers around WebAssembly memories."). Il doit exister une propriété correspondante pour chaque import, si ce n'est pas le cas, un exception [`WebAssembly.LinkError`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/WebAssembly/LinkError) sera levée.
+
+## Instances d'`Instance`
+
+Toutes les instances du type `Instance` héritent du prototype du constructeur `Instance()`. Celui-ci peut être modifié afin de modifier l'ensemble des instances de `Instance`.
+
+### Propriétés
+
+{{page('/fr/docs/Web/JavaScript/Reference/Objets_globaux/WebAssembly/Instance/prototype', 'Propriétés')}}
+
+### Méthodes
+
+{{page('/fr/docs/Web/JavaScript/Reference/Objets_globaux/WebAssembly/Instance/prototype', 'Méthodes')}}
+
+## Spécifications
+
+| Spécification                                                                                        | État                                 | Commentaires                                            |
+| ---------------------------------------------------------------------------------------------------- | ------------------------------------ | ------------------------------------------------------- |
+| {{SpecName('WebAssembly JS', '#webassemblyinstance-objects', 'Instance')}} | {{Spec2('WebAssembly JS')}} | Définition initiale dans un brouillon de spécification. |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.WebAssembly.Instance")}}
+
+## Voir aussi
+
+- [Le portail WebAssembly](/fr/docs/WebAssembly)
+- [Les concepts relatifs à WebAssembly](/fr/docs/WebAssembly/Concepts)
+- [Utiliser l'API JavaScript WebAssembly](/fr/docs/WebAssembly/Using_the_JavaScript_API)
diff --git a/files/fr/web/javascript/reference/global_objects/webassembly/instantiate/index.html b/files/fr/web/javascript/reference/global_objects/webassembly/instantiate/index.html
deleted file mode 100644
index 5ec32f1f87..0000000000
--- a/files/fr/web/javascript/reference/global_objects/webassembly/instantiate/index.html
+++ /dev/null
@@ -1,172 +0,0 @@
----
-title: WebAssembly.instantiate()
-slug: Web/JavaScript/Reference/Global_Objects/WebAssembly/instantiate
-tags:
-  - API
-  - JavaScript
-  - Méthode
-  - Reference
-  - WebAssembly
-translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/instantiate
-original_slug: Web/JavaScript/Reference/Objets_globaux/WebAssembly/instantiate
----
-<div>{{JSRef}}</div>
-
-<p>La fonction <strong><code>WebAssembly.instantiate()</code></strong> permet de compiler et d'instancier du code WebAssembly. Cette fonction possède deux formes :</p>
-
-<ul>
- <li>La première forme prend un code binaire WebAssembly sous forme d'un <a href="/fr/docs/Web/JavaScript/Tableaux_typés">tableau typé</a> ou d'un {{jsxref("ArrayBuffer")}} et effectue les étapes de compilation et d'instanciation en une fois. La valeur de résolution de la promesse renvoyée se compose d'un module {{jsxref("WebAssembly.Module")}} compilé et de sa première instance {{jsxref("WebAssembly.Instance")}}.</li>
- <li>La seconde forme prend un module ({{jsxref("WebAssembly.Module")}}) déjà compilé et renvoie une promesse dont la valeur de résolution est une instance de ce module. Cette forme s'avère utile lorsque le module a déjà été compilé.</li>
-</ul>
-
-<div class="warning">
-<p><strong>Attention :</strong> Tant que faire se peut, utiliser la méthode {{jsxref("WebAssembly.instantiateStreaming()")}} car elle est plus efficace et récupère, compile et instancie un module en une seule étape à partir du <em>bytecode</em> et il n'est pas nécessaire de passer par une conversion en {{jsxref("ArrayBuffer")}}.</p>
-</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<h3 id="Première_forme_utiliser_le_bytecode_WebAssembly">Première forme : utiliser le <em>bytecode</em> WebAssembly</h3>
-
-<pre class="syntaxbox">Promise&lt;ResultObject&gt; WebAssembly.instantiate(bufferSource, importObject);
-</pre>
-
-<h4 id="Paramètres">Paramètres</h4>
-
-<dl>
- <dt><code>bufferSource</code></dt>
- <dd>Un <a href="/fr/docs/Web/JavaScript/Tableaux_typés">tableau typé</a> ou un {{jsxref("ArrayBuffer")}} qui contient le <em>bytecode</em> du module WebAssembly qu'on souhaite compiler.</dd>
- <dt><code>importObject</code> {{optional_inline}}</dt>
- <dd>Un objet qui contient les valeurs à importer dans l'instance qui sera créée. Ces valeurs peuvent être des fonctions ou des objets {{jsxref("WebAssembly.Memory")}}. Il doit y avoir une propriété correspondante au sein du module compilé pour chacun des imports, si ce n'est pas le cas, une exception {{jsxref("WebAssembly.LinkError")}} sera levée.</dd>
-</dl>
-
-<h4 id="Valeur_de_retour">Valeur de retour</h4>
-
-<p>Une promesse qui est résoluee en un objet qui contient deux champs :</p>
-
-<ul>
- <li><code>module</code> : un objet {{jsxref("WebAssembly.Module")}} qui représente le module WebAssembly compilé. Ce module peut être instancié à nouveau grâce à  {{domxref("Worker.postMessage", "postMessage()")}} ou via <a href="/fr/docs/WebAssembly/Caching_modules">un cache IndexedDB</a>.</li>
- <li><code>instance</code> : un objet {{jsxref("WebAssembly.Instance")}} qui contient l'ensemble <a href="/fr/docs/WebAssembly/Exported_functions">des fonctions WebAssembly exportées</a>.</li>
-</ul>
-
-<h4 id="Exceptions">Exceptions</h4>
-
-<ul>
- <li>Si l'un des paramètres n'a pas le bon type ou la bonne structure, une exception {{jsxref("TypeError")}} sera levée.</li>
- <li>Si l'opération échoue, la promesse est rompue avec une exception {{jsxref("WebAssembly.CompileError")}}, {{jsxref("WebAssembly.LinkError")}} ou {{jsxref("WebAssembly.RuntimeError")}} selon l'origine de l'échec.</li>
-</ul>
-
-<h3 id="Seconde_forme_utiliser_une_instance_d'un_module">Seconde forme : utiliser une instance d'un module</h3>
-
-<pre class="syntaxbox">Promise&lt;WebAssembly.Instance&gt; WebAssembly.instantiate(module, importObject);
-</pre>
-
-<h4 id="Paramètres_2">Paramètres</h4>
-
-<dl>
- <dt><code>module</code></dt>
- <dd>L'objet {{jsxref("WebAssembly.Module")}} qui doit être instancié.</dd>
- <dt><code>importObject</code> {{optional_inline}}</dt>
- <dd>Un objet qui contient les valeurs à importer dans l'instance qui sera créée. Ces valeurs peuvent être des fonctions ou des objets {{jsxref("WebAssembly.Memory")}}. Il doit y avoir une propriété correspondante au sein du module compilé pour chacun des imports, si ce n'est pas le cas, une exception {{jsxref("WebAssembly.LinkError")}} sera levée.</dd>
-</dl>
-
-<h4 id="Valeur_de_retour_2">Valeur de retour</h4>
-
-<p>Une promesse qui est résolue en un objet {{jsxref("WebAssembly.Instance")}}.</p>
-
-<h4 id="Exceptions_2">Exceptions</h4>
-
-<ul>
- <li>Si l'un des paramètres n'est pas du bon type ou n'a pas la bonne structure, une exception {{jsxref("TypeError")}} est levée.</li>
- <li>Si l'opération échoue, la promesse sera rompue avec une exception {{jsxref("WebAssembly.CompileError")}}, {{jsxref("WebAssembly.LinkError")}} ou {{jsxref("WebAssembly.RuntimeError")}} selon l'origine de l'échec.</li>
-</ul>
-
-<h2 id="Exemples">Exemples</h2>
-
-<div class="blockIndicator note">
-<p><strong>Note :</strong> Dans la plupart des cas, on utilisera plus vraisemblablement {{jsxref("WebAssembly.instantiateStreaming()")}} qui est plus efficace que <code>instantiate()</code>.</p>
-</div>
-
-<h3 id="Première_forme">Première forme</h3>
-
-<p>Après avoir récupéré le <em>bytecode</em> WebAssembly grâce à <code>fetch()</code>, on compile et on instancie le module grâce à la fonction  {{jsxref("WebAssembly.instantiate()")}} et on importe une fonction JavaScript dans le module lors de cette étape. Ensuite, on invoque <a href="/fr/docs/WebAssembly/Exported_functions">une fonction WebAssembly exportée</a> via l'instance.</p>
-
-<pre class="brush: js">var importObject = {
-  imports: {
-    imported_func: function(arg) {
-      console.log(arg);
-    }
-  }
-};
-
-fetch('simple.wasm').then(response =&gt;
-  response.arrayBuffer()
-).then(bytes =&gt;
-  WebAssembly.instantiate(bytes, importObject)
-).then(result =&gt;
-  result.instance.exports.exported_func()
-);</pre>
-
-<div class="note">
-<p><strong>Note :</strong> Voir le fichier <a href="https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/index.html">index.html</a> sur GitHub (<a href="https://mdn.github.io/webassembly-examples/js-api-examples/">ainsi que la démonstration associée</a>) qui contient un exemple analogue et qui utilise la fonction utilitaire <code><a href="https://github.com/mdn/webassembly-examples/blob/master/wasm-utils.js#L1">fetchAndInstantiate()</a></code>.</p>
-</div>
-
-<h3 id="Seconde_forme">Seconde forme</h3>
-
-<p>Dans l'exemple qui suit (tiré du fichier <code><a href="https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/index-compile.html">index-compile.html</a></code> sur GitHub et qui dispose d'<a href="https://mdn.github.io/webassembly-examples/js-api-examples/index-compile.html">une démonstration</a>), on compile le <em>bytecode</em> du module chargé <code>simple.wasm</code> grâce à la fonction {{jsxref("WebAssembly.compileStreaming()")}} puis on envoie le résultat à un <em><a href="/fr/docs/Web/API/Web_Workers_API">worker</a></em> grâce à la méthode {{domxref("Worker.postMessage", "postMessage()")}}.</p>
-
-<pre class="brush: js">var worker = new Worker("wasm_worker.js");
-
-WebAssembly.compileStreaming(fetch('simple.wasm'))
-.then(mod =&gt;
-  worker.postMessage(mod)
-);</pre>
-
-<p>Dans le <em>worker</em> (cf. <code><a href="https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/wasm_worker.js">wasm_worker.js</a></code>), on définit un objet d'import qui sera utilisé par le module puis on paramètre un gestionnaire d'évènement afin de recevoir le module depuis le <em>thread</em> principal. Lorsqu'on reçoit le module, on en crée une instance grâce à la méthode {{jsxref("WebAssembly.instantiate()")}} puis on appelle une fonction exportée depuis le module.</p>
-
-<pre class="brush: js">var importObject = {
-  imports: {
-    imported_func: function(arg) {
-      console.log(arg);
-    }
-  }
-};
-
-onmessage = function(e) {
-  console.log('module reçu depuis le thread principal');
-  var mod = e.data;
-
-  WebAssembly.instantiate(mod, importObject).then(function(instance) {
-    instance.exports.exported_func();
-  });
-};</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('WebAssembly JS', '#webassemblyinstantiate', 'instantiate()')}}</td>
-   <td>{{Spec2('WebAssembly JS')}}</td>
-   <td>Brouillon de définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.WebAssembly.instantiate")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/WebAssembly">Le portail WebAssembly</a></li>
- <li><a href="/fr/docs/WebAssembly/Concepts">Les concepts relatifs à WebAssembly</a></li>
- <li><a href="/fr/docs/WebAssembly/Using_the_JavaScript_API">Utiliser l'API JavaScript WebAssembly</a></li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/webassembly/instantiate/index.md b/files/fr/web/javascript/reference/global_objects/webassembly/instantiate/index.md
new file mode 100644
index 0000000000..9c01958668
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/webassembly/instantiate/index.md
@@ -0,0 +1,143 @@
+---
+title: WebAssembly.instantiate()
+slug: Web/JavaScript/Reference/Global_Objects/WebAssembly/instantiate
+tags:
+  - API
+  - JavaScript
+  - Méthode
+  - Reference
+  - WebAssembly
+translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/instantiate
+original_slug: Web/JavaScript/Reference/Objets_globaux/WebAssembly/instantiate
+---
+{{JSRef}}
+
+La fonction **`WebAssembly.instantiate()`** permet de compiler et d'instancier du code WebAssembly. Cette fonction possède deux formes :
+
+- La première forme prend un code binaire WebAssembly sous forme d'un [tableau typé](/fr/docs/Web/JavaScript/Tableaux_typés) ou d'un {{jsxref("ArrayBuffer")}} et effectue les étapes de compilation et d'instanciation en une fois. La valeur de résolution de la promesse renvoyée se compose d'un module {{jsxref("WebAssembly.Module")}} compilé et de sa première instance {{jsxref("WebAssembly.Instance")}}.
+- La seconde forme prend un module ({{jsxref("WebAssembly.Module")}}) déjà compilé et renvoie une promesse dont la valeur de résolution est une instance de ce module. Cette forme s'avère utile lorsque le module a déjà été compilé.
+
+> **Attention :** Tant que faire se peut, utiliser la méthode {{jsxref("WebAssembly.instantiateStreaming()")}} car elle est plus efficace et récupère, compile et instancie un module en une seule étape à partir du _bytecode_ et il n'est pas nécessaire de passer par une conversion en {{jsxref("ArrayBuffer")}}.
+
+## Syntaxe
+
+### Première forme : utiliser le _bytecode_ WebAssembly
+
+    Promise<ResultObject> WebAssembly.instantiate(bufferSource, importObject);
+
+#### Paramètres
+
+- `bufferSource`
+  - : Un [tableau typé](/fr/docs/Web/JavaScript/Tableaux_typés) ou un {{jsxref("ArrayBuffer")}} qui contient le _bytecode_ du module WebAssembly qu'on souhaite compiler.
+- `importObject` {{optional_inline}}
+  - : Un objet qui contient les valeurs à importer dans l'instance qui sera créée. Ces valeurs peuvent être des fonctions ou des objets {{jsxref("WebAssembly.Memory")}}. Il doit y avoir une propriété correspondante au sein du module compilé pour chacun des imports, si ce n'est pas le cas, une exception {{jsxref("WebAssembly.LinkError")}} sera levée.
+
+#### Valeur de retour
+
+Une promesse qui est résoluee en un objet qui contient deux champs :
+
+- `module` : un objet {{jsxref("WebAssembly.Module")}} qui représente le module WebAssembly compilé. Ce module peut être instancié à nouveau grâce à  {{domxref("Worker.postMessage", "postMessage()")}} ou via [un cache IndexedDB](/fr/docs/WebAssembly/Caching_modules).
+- `instance` : un objet {{jsxref("WebAssembly.Instance")}} qui contient l'ensemble [des fonctions WebAssembly exportées](/fr/docs/WebAssembly/Exported_functions).
+
+#### Exceptions
+
+- Si l'un des paramètres n'a pas le bon type ou la bonne structure, une exception {{jsxref("TypeError")}} sera levée.
+- Si l'opération échoue, la promesse est rompue avec une exception {{jsxref("WebAssembly.CompileError")}}, {{jsxref("WebAssembly.LinkError")}} ou {{jsxref("WebAssembly.RuntimeError")}} selon l'origine de l'échec.
+
+### Seconde forme : utiliser une instance d'un module
+
+    Promise<WebAssembly.Instance> WebAssembly.instantiate(module, importObject);
+
+#### Paramètres
+
+- `module`
+  - : L'objet {{jsxref("WebAssembly.Module")}} qui doit être instancié.
+- `importObject` {{optional_inline}}
+  - : Un objet qui contient les valeurs à importer dans l'instance qui sera créée. Ces valeurs peuvent être des fonctions ou des objets {{jsxref("WebAssembly.Memory")}}. Il doit y avoir une propriété correspondante au sein du module compilé pour chacun des imports, si ce n'est pas le cas, une exception {{jsxref("WebAssembly.LinkError")}} sera levée.
+
+#### Valeur de retour
+
+Une promesse qui est résolue en un objet {{jsxref("WebAssembly.Instance")}}.
+
+#### Exceptions
+
+- Si l'un des paramètres n'est pas du bon type ou n'a pas la bonne structure, une exception {{jsxref("TypeError")}} est levée.
+- Si l'opération échoue, la promesse sera rompue avec une exception {{jsxref("WebAssembly.CompileError")}}, {{jsxref("WebAssembly.LinkError")}} ou {{jsxref("WebAssembly.RuntimeError")}} selon l'origine de l'échec.
+
+## Exemples
+
+> **Note :** Dans la plupart des cas, on utilisera plus vraisemblablement {{jsxref("WebAssembly.instantiateStreaming()")}} qui est plus efficace que `instantiate()`.
+
+### Première forme
+
+Après avoir récupéré le _bytecode_ WebAssembly grâce à `fetch()`, on compile et on instancie le module grâce à la fonction  {{jsxref("WebAssembly.instantiate()")}} et on importe une fonction JavaScript dans le module lors de cette étape. Ensuite, on invoque [une fonction WebAssembly exportée](/fr/docs/WebAssembly/Exported_functions) via l'instance.
+
+```js
+var importObject = {
+  imports: {
+    imported_func: function(arg) {
+      console.log(arg);
+    }
+  }
+};
+
+fetch('simple.wasm').then(response =>
+  response.arrayBuffer()
+).then(bytes =>
+  WebAssembly.instantiate(bytes, importObject)
+).then(result =>
+  result.instance.exports.exported_func()
+);
+```
+
+> **Note :** Voir le fichier [index.html](https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/index.html) sur GitHub ([ainsi que la démonstration associée](https://mdn.github.io/webassembly-examples/js-api-examples/)) qui contient un exemple analogue et qui utilise la fonction utilitaire [`fetchAndInstantiate()`](https://github.com/mdn/webassembly-examples/blob/master/wasm-utils.js#L1).
+
+### Seconde forme
+
+Dans l'exemple qui suit (tiré du fichier [`index-compile.html`](https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/index-compile.html) sur GitHub et qui dispose d'[une démonstration](https://mdn.github.io/webassembly-examples/js-api-examples/index-compile.html)), on compile le _bytecode_ du module chargé `simple.wasm` grâce à la fonction {{jsxref("WebAssembly.compileStreaming()")}} puis on envoie le résultat à un _[worker](/fr/docs/Web/API/Web_Workers_API)_ grâce à la méthode {{domxref("Worker.postMessage", "postMessage()")}}.
+
+```js
+var worker = new Worker("wasm_worker.js");
+
+WebAssembly.compileStreaming(fetch('simple.wasm'))
+.then(mod =>
+  worker.postMessage(mod)
+);
+```
+
+Dans le _worker_ (cf. [`wasm_worker.js`](https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/wasm_worker.js)), on définit un objet d'import qui sera utilisé par le module puis on paramètre un gestionnaire d'évènement afin de recevoir le module depuis le _thread_ principal. Lorsqu'on reçoit le module, on en crée une instance grâce à la méthode {{jsxref("WebAssembly.instantiate()")}} puis on appelle une fonction exportée depuis le module.
+
+```js
+var importObject = {
+  imports: {
+    imported_func: function(arg) {
+      console.log(arg);
+    }
+  }
+};
+
+onmessage = function(e) {
+  console.log('module reçu depuis le thread principal');
+  var mod = e.data;
+
+  WebAssembly.instantiate(mod, importObject).then(function(instance) {
+    instance.exports.exported_func();
+  });
+};
+```
+
+## Spécifications
+
+| Spécification                                                                                        | État                                 | Commentaires                      |
+| ---------------------------------------------------------------------------------------------------- | ------------------------------------ | --------------------------------- |
+| {{SpecName('WebAssembly JS', '#webassemblyinstantiate', 'instantiate()')}} | {{Spec2('WebAssembly JS')}} | Brouillon de définition initiale. |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.WebAssembly.instantiate")}}
+
+## Voir aussi
+
+- [Le portail WebAssembly](/fr/docs/WebAssembly)
+- [Les concepts relatifs à WebAssembly](/fr/docs/WebAssembly/Concepts)
+- [Utiliser l'API JavaScript WebAssembly](/fr/docs/WebAssembly/Using_the_JavaScript_API)
diff --git a/files/fr/web/javascript/reference/global_objects/webassembly/instantiatestreaming/index.html b/files/fr/web/javascript/reference/global_objects/webassembly/instantiatestreaming/index.html
deleted file mode 100644
index a9cbf1ead2..0000000000
--- a/files/fr/web/javascript/reference/global_objects/webassembly/instantiatestreaming/index.html
+++ /dev/null
@@ -1,87 +0,0 @@
----
-title: WebAssembly.instantiateStreaming()
-slug: Web/JavaScript/Reference/Global_Objects/WebAssembly/instantiateStreaming
-tags:
-  - API
-  - JavaScript
-  - Méthode
-  - Object
-  - Reference
-  - WebAssembly
-translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/instantiateStreaming
-original_slug: Web/JavaScript/Reference/Objets_globaux/WebAssembly/instantiateStreaming
----
-<div>{{JSRef}}</div>
-
-<p>La fonction <strong><code>WebAssembly.instantiateStreaming()</code></strong> permet de compiler et d'instancier un module WebAssembly depuis un flux source. C'est la méthode la plus efficace, et la plus optimisée, permettant de charger du code WebAssembly.</p>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">Promise&lt;ResultObject&gt; WebAssembly.instantiateStreaming(<em>source</em>, <em>importObject</em>);</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>source</code></dt>
- <dd>Un objet {{domxref("Response")}} ou une promesse qui sera tenue avec une valeur {{domxref("Response")}} qui représente la source du module .wasm dont on souhaite récupérer le flux, la compiler puis l'instanciere.</dd>
- <dt><code>importObject</code> {{optional_inline}}</dt>
- <dd>Un objet qui contient les valeurs qui doivent être importées dans le nouvel objet <code>Instance</code> résultant. Cela peut être des fonctions ou des objets {{jsxref("WebAssembly.Memory")}}. Il est nécessaire qu'il y ait une propriété correspondante pour chaque import déclaré dans le module compilé, sinon, une exception <code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/WebAssembly/LinkError">WebAssembly.LinkError</a></code> sera levée.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Un objet <code>Promise</code> dont la valeur de résolution est un objet <code>ResultObject</code> contenant deux champs :</p>
-
-<ul>
- <li><code>module</code> : un objet {{jsxref("WebAssembly.Module")}} qui représente le module WebAssembly compilé. Ce module pourra être instancié à nouveau, partagé avec <code><a href="/fr/docs/Web/API/Worker/postMessage">postMessage()</a></code>.</li>
- <li><code>instance</code> : un objet {{jsxref("WebAssembly.Instance")}} qui contient l'ensemble <a href="/fr/docs/WebAssembly/Exported_functions">des fonctions WebAssembly exportées</a>.</li>
-</ul>
-
-<h3 id="Exceptions">Exceptions</h3>
-
-<ul>
- <li>Si l'un des paramètres n'est pas du bon type ou ne possède pas la bonne structure, une exception {{jsxref("TypeError")}} est déclenchée.</li>
- <li>Si l'opération échoue, la promesse lève une exception {{jsxref("WebAssembly.CompileError")}}, {{jsxref("WebAssembly.LinkError")}} ou {{jsxref("WebAssembly.RuntimeError")}} selon la cause de l'échec.</li>
-</ul>
-
-<h2 id="Examples">Examples</h2>
-
-<p>Dans l'exemple suivant (également disponible sur GitHub : <a href="https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/instantiate-streaming.html">instantiate-streaming.html</a> et avec <a href="https://mdn.github.io/webassembly-examples/js-api-examples/instantiate-streaming.html">le résultat <em>live</em></a>), on récupère le flux d'un module .wasm depuis une source, on le compile et on l'instancie. La promesse est alors résolue avec un objet <code>ResultObject</code>. La méthode <code>instantiateStreaming()</code>  acceptant une promesse fournissant un objet {{domxref("Response")}}, on peut directement l'appel de {{domxref("WindowOrWorkerGlobalScope.fetch()")}} en argument qui transfèrera la réponse lorsque la promesse résultante sera tenue.</p>
-
-<pre class="brush: js">var importObject = { imports: { imported_func: arg =&gt; console.log(arg) } };
-
-WebAssembly.instantiateStreaming(fetch('simple.wasm'), importObject)
-.then(obj =&gt; obj.instance.exports.exported_func());</pre>
-
-<p>Ensuite, on accède au champ <code>instance</code> de l'objet <code>ResultObject</code> afin de pouvoir invoquer une des fonctions exportées.</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('WebAssembly Embedding', '#webassemblyinstantiatestreaming', 'instantiateStreaming()')}}</td>
-   <td>{{Spec2('WebAssembly Embedding')}}</td>
-   <td>Brouillon de définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.WebAssembly.instantiateStreaming")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/WebAssembly">La page d'aperçu de WebAssembly</a></li>
- <li><a href="/fr/docs/WebAssembly/Concepts">Les concepts relatifs à WebAssembly</a></li>
- <li><a href="/fr/docs/WebAssembly/Using_the_JavaScript_API">Utiliser l'API JavaScript de WebAssembly</a></li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/webassembly/instantiatestreaming/index.md b/files/fr/web/javascript/reference/global_objects/webassembly/instantiatestreaming/index.md
new file mode 100644
index 0000000000..783fc228bf
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/webassembly/instantiatestreaming/index.md
@@ -0,0 +1,68 @@
+---
+title: WebAssembly.instantiateStreaming()
+slug: Web/JavaScript/Reference/Global_Objects/WebAssembly/instantiateStreaming
+tags:
+  - API
+  - JavaScript
+  - Méthode
+  - Object
+  - Reference
+  - WebAssembly
+translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/instantiateStreaming
+original_slug: Web/JavaScript/Reference/Objets_globaux/WebAssembly/instantiateStreaming
+---
+{{JSRef}}
+
+La fonction **`WebAssembly.instantiateStreaming()`** permet de compiler et d'instancier un module WebAssembly depuis un flux source. C'est la méthode la plus efficace, et la plus optimisée, permettant de charger du code WebAssembly.
+
+## Syntaxe
+
+    Promise<ResultObject> WebAssembly.instantiateStreaming(source, importObject);
+
+### Paramètres
+
+- `source`
+  - : Un objet {{domxref("Response")}} ou une promesse qui sera tenue avec une valeur {{domxref("Response")}} qui représente la source du module .wasm dont on souhaite récupérer le flux, la compiler puis l'instanciere.
+- `importObject` {{optional_inline}}
+  - : Un objet qui contient les valeurs qui doivent être importées dans le nouvel objet `Instance` résultant. Cela peut être des fonctions ou des objets {{jsxref("WebAssembly.Memory")}}. Il est nécessaire qu'il y ait une propriété correspondante pour chaque import déclaré dans le module compilé, sinon, une exception [`WebAssembly.LinkError`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/WebAssembly/LinkError) sera levée.
+
+### Valeur de retour
+
+Un objet `Promise` dont la valeur de résolution est un objet `ResultObject` contenant deux champs :
+
+- `module` : un objet {{jsxref("WebAssembly.Module")}} qui représente le module WebAssembly compilé. Ce module pourra être instancié à nouveau, partagé avec [`postMessage()`](/fr/docs/Web/API/Worker/postMessage).
+- `instance` : un objet {{jsxref("WebAssembly.Instance")}} qui contient l'ensemble [des fonctions WebAssembly exportées](/fr/docs/WebAssembly/Exported_functions).
+
+### Exceptions
+
+- Si l'un des paramètres n'est pas du bon type ou ne possède pas la bonne structure, une exception {{jsxref("TypeError")}} est déclenchée.
+- Si l'opération échoue, la promesse lève une exception {{jsxref("WebAssembly.CompileError")}}, {{jsxref("WebAssembly.LinkError")}} ou {{jsxref("WebAssembly.RuntimeError")}} selon la cause de l'échec.
+
+## Examples
+
+Dans l'exemple suivant (également disponible sur GitHub : [instantiate-streaming.html](https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/instantiate-streaming.html) et avec [le résultat _live_](https://mdn.github.io/webassembly-examples/js-api-examples/instantiate-streaming.html)), on récupère le flux d'un module .wasm depuis une source, on le compile et on l'instancie. La promesse est alors résolue avec un objet `ResultObject`. La méthode `instantiateStreaming()`  acceptant une promesse fournissant un objet {{domxref("Response")}}, on peut directement l'appel de {{domxref("WindowOrWorkerGlobalScope.fetch()")}} en argument qui transfèrera la réponse lorsque la promesse résultante sera tenue.
+
+```js
+var importObject = { imports: { imported_func: arg => console.log(arg) } };
+
+WebAssembly.instantiateStreaming(fetch('simple.wasm'), importObject)
+.then(obj => obj.instance.exports.exported_func());
+```
+
+Ensuite, on accède au champ `instance` de l'objet `ResultObject` afin de pouvoir invoquer une des fonctions exportées.
+
+## Spécifications
+
+| Spécification                                                                                                                        | État                                         | Commentaires                      |
+| ------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------- | --------------------------------- |
+| {{SpecName('WebAssembly Embedding', '#webassemblyinstantiatestreaming', 'instantiateStreaming()')}} | {{Spec2('WebAssembly Embedding')}} | Brouillon de définition initiale. |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.WebAssembly.instantiateStreaming")}}
+
+## Voir aussi
+
+- [La page d'aperçu de WebAssembly](/fr/docs/WebAssembly)
+- [Les concepts relatifs à WebAssembly](/fr/docs/WebAssembly/Concepts)
+- [Utiliser l'API JavaScript de WebAssembly](/fr/docs/WebAssembly/Using_the_JavaScript_API)
diff --git a/files/fr/web/javascript/reference/global_objects/webassembly/linkerror/index.html b/files/fr/web/javascript/reference/global_objects/webassembly/linkerror/index.html
deleted file mode 100644
index fe881933bb..0000000000
--- a/files/fr/web/javascript/reference/global_objects/webassembly/linkerror/index.html
+++ /dev/null
@@ -1,116 +0,0 @@
----
-title: WebAssembly.LinkError()
-slug: Web/JavaScript/Reference/Global_Objects/WebAssembly/LinkError
-tags:
-  - API
-  - Constructeur
-  - JavaScript
-  - LinkError
-  - Reference
-  - WebAssembly
-translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/LinkError
-original_slug: Web/JavaScript/Reference/Objets_globaux/WebAssembly/LinkError
----
-<div>{{JSRef}}</div>
-
-<p>Le constructeur <code><strong>WebAssembly.LinkError()</strong></code> permet de créer un nouvel objet WebAssembly <code>LinkError</code> qui indique qu'une erreur s'est produite lors de l'instanciation du module (en plus <a href="http://webassembly.org/docs/semantics/#traps">des trappes</a> provenant de la fonction initiale).</p>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">new WebAssembly.LinkError(<var>message</var>, <var>nomFichier</var>, <var>numeroLigne</var>)</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>message</code> {{optional_inline}}</dt>
- <dd>Une description, compréhensible par un humain, de l'erreur qui s'est produite.</dd>
- <dt><code>nomFichier</code> {{optional_inline}}{{non-standard_inline}}</dt>
- <dd>Le nom du fichier qui contient le code à l'origine de l'exception.</dd>
- <dt><code>numeroLigne</code> {{optional_inline}}{{non-standard_inline}}</dt>
- <dd>Le numéro de ligne dans le fichier contenant le code à l'origine de l'exception.</dd>
-</dl>
-
-<h2 id="Propriétés">Propriétés</h2>
-
-<p><em>Le constructeur <code>LinkError</code> ne contient pas de propriétés qui lui soient propres. Il hérite cependant de certaines propriétés via sa chaîne de prototypes.</em></p>
-
-<dl>
- <dt><code>WebAssembly.LinkError.prototype.constructor</code></dt>
- <dd>Cette propriété est la fonction qui permet de créer le prototype de l'instance.</dd>
- <dt>{{jsxref("Error.prototype.message", "WebAssembly.LinkError.prototype.message")}}</dt>
- <dd>Le message d'erreur. Bien qu'ECMA-262 indique que l'objet doive fournir sa propre propriété <code>message</code>, dans <a href="/fr/docs/Mozilla/Projects/SpiderMonkey">SpiderMonkey</a>, celle-ci est héritée depuis {{jsxref("Error.prototype.message")}}.</dd>
- <dt>{{jsxref("Error.prototype.name", "WebAssembly.LinkError.prototype.name")}}</dt>
- <dd>Le nom de l'erreur. Cette propriété est héritée via {{jsxref("Error")}}.</dd>
- <dt>{{jsxref("Error.prototype.fileName", "WebAssembly.LinkError.prototype.fileName")}}</dt>
- <dd>Le chemin du fichier qui a entraîné l'erreur. Cette propriété est héritée via {{jsxref("Error")}}.</dd>
- <dt>{{jsxref("Error.prototype.lineNumber", "WebAssembly.LinkError.prototype.lineNumber")}}</dt>
- <dd>Le numéro de ligne dans le fichier qui a entraîné l'erreur. Cette propriété est héritée via {{jsxref("Error")}}.</dd>
- <dt>{{jsxref("Error.prototype.columnNumber", "WebAssembly.LinkError.prototype.columnNumber")}}</dt>
- <dd>Le numéro de la colonne dans la ligne du fichier qui a entraîné l'erreur. Cette propriété est héritée via {{jsxref("Error")}}.</dd>
- <dt>{{jsxref("Error.prototype.stack", "WebAssembly.LinkError.prototype.stack")}}</dt>
- <dd>La pile d'appels à l'origine de l'erreur. Cette propriété est héritée depuis {{jsxref("Error")}}.</dd>
-</dl>
-
-<h2 id="Méthodes">Méthodes</h2>
-
-<p><em>Le constructeur <code>LinkError</code> ne contient pas de méthodes qui lui soient propres. Il hérite toutefois de méthodes grâce à sa chaîne de prototypes.</em></p>
-
-<dl>
- <dt>{{jsxref("Error.prototype.toSource", "WebAssembly.LinkError.prototype.toSource()")}}</dt>
- <dd>Cette méthode renvoie un code qui pourrait être évalué et causere la même erreur. Elle est héritée via {{jsxref("Error")}}.</dd>
- <dt>{{jsxref("Error.prototype.toString", "WebAssembly.LinkError.prototype.toString()")}}</dt>
- <dd>Cette méthode renvoie une chaîne de caractères qui représente l'objet de l'erreur. Elle est héritée via {{jsxref("Error")}}.</dd>
-</dl>
-
-<h2 id="Exemples">Exemples</h2>
-
-<p>Dans le fragment de code qui suit, on crée un nouvelle instance de <code>LinkError</code> puis on imprime les détails dans la console :</p>
-
-<pre class="brush: js">try {
-  throw new WebAssembly.LinkError('Coucou', 'unFichier', 10);
-} catch (e) {
-  console.log(e instanceof LinkError); // true
-  console.log(e.message);                 // "Coucou"
-  console.log(e.name);                    // "LinkError"
-  console.log(e.fileName);                // "unFichier"
-  console.log(e.lineNumber);              // 10
-  console.log(e.columnNumber);            // 0
-  console.log(e.stack);                   // renvoie la pile d'appels
-                                          // à l'origine de l'erreur
-}</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('WebAssembly JS', '#constructor-properties-of-the-webassembly-object', 'WebAssembly constructors')}}</td>
-   <td>{{Spec2('WebAssembly JS')}}</td>
-   <td>Brouillon de définition initiale pour WebAssembly.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-native-error-types-used-in-this-standard', 'NativeError')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td>Définition des types standards <code>NativeError</code>.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.WebAssembly.LinkError")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/WebAssembly">Le portail WebAssembly</a></li>
- <li><a href="/fr/docs/WebAssembly/Concepts">Les concepts relatifs à WebAssembly</a></li>
- <li><a href="/fr/docs/WebAssembly/Using_the_JavaScript_API">Utiliser l'API JavaScript WebAssembly</a></li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/webassembly/linkerror/index.md b/files/fr/web/javascript/reference/global_objects/webassembly/linkerror/index.md
new file mode 100644
index 0000000000..c12eeab0ec
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/webassembly/linkerror/index.md
@@ -0,0 +1,93 @@
+---
+title: WebAssembly.LinkError()
+slug: Web/JavaScript/Reference/Global_Objects/WebAssembly/LinkError
+tags:
+  - API
+  - Constructeur
+  - JavaScript
+  - LinkError
+  - Reference
+  - WebAssembly
+translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/LinkError
+original_slug: Web/JavaScript/Reference/Objets_globaux/WebAssembly/LinkError
+---
+{{JSRef}}
+
+Le constructeur **`WebAssembly.LinkError()`** permet de créer un nouvel objet WebAssembly `LinkError` qui indique qu'une erreur s'est produite lors de l'instanciation du module (en plus [des trappes](http://webassembly.org/docs/semantics/#traps) provenant de la fonction initiale).
+
+## Syntaxe
+
+    new WebAssembly.LinkError(message, nomFichier, numeroLigne)
+
+### Paramètres
+
+- `message` {{optional_inline}}
+  - : Une description, compréhensible par un humain, de l'erreur qui s'est produite.
+- `nomFichier` {{optional_inline}}{{non-standard_inline}}
+  - : Le nom du fichier qui contient le code à l'origine de l'exception.
+- `numeroLigne` {{optional_inline}}{{non-standard_inline}}
+  - : Le numéro de ligne dans le fichier contenant le code à l'origine de l'exception.
+
+## Propriétés
+
+_Le constructeur `LinkError` ne contient pas de propriétés qui lui soient propres. Il hérite cependant de certaines propriétés via sa chaîne de prototypes._
+
+- `WebAssembly.LinkError.prototype.constructor`
+  - : Cette propriété est la fonction qui permet de créer le prototype de l'instance.
+- {{jsxref("Error.prototype.message", "WebAssembly.LinkError.prototype.message")}}
+  - : Le message d'erreur. Bien qu'ECMA-262 indique que l'objet doive fournir sa propre propriété `message`, dans [SpiderMonkey](/fr/docs/Mozilla/Projects/SpiderMonkey), celle-ci est héritée depuis {{jsxref("Error.prototype.message")}}.
+- {{jsxref("Error.prototype.name", "WebAssembly.LinkError.prototype.name")}}
+  - : Le nom de l'erreur. Cette propriété est héritée via {{jsxref("Error")}}.
+- {{jsxref("Error.prototype.fileName", "WebAssembly.LinkError.prototype.fileName")}}
+  - : Le chemin du fichier qui a entraîné l'erreur. Cette propriété est héritée via {{jsxref("Error")}}.
+- {{jsxref("Error.prototype.lineNumber", "WebAssembly.LinkError.prototype.lineNumber")}}
+  - : Le numéro de ligne dans le fichier qui a entraîné l'erreur. Cette propriété est héritée via {{jsxref("Error")}}.
+- {{jsxref("Error.prototype.columnNumber", "WebAssembly.LinkError.prototype.columnNumber")}}
+  - : Le numéro de la colonne dans la ligne du fichier qui a entraîné l'erreur. Cette propriété est héritée via {{jsxref("Error")}}.
+- {{jsxref("Error.prototype.stack", "WebAssembly.LinkError.prototype.stack")}}
+  - : La pile d'appels à l'origine de l'erreur. Cette propriété est héritée depuis {{jsxref("Error")}}.
+
+## Méthodes
+
+_Le constructeur `LinkError` ne contient pas de méthodes qui lui soient propres. Il hérite toutefois de méthodes grâce à sa chaîne de prototypes._
+
+- {{jsxref("Error.prototype.toSource", "WebAssembly.LinkError.prototype.toSource()")}}
+  - : Cette méthode renvoie un code qui pourrait être évalué et causere la même erreur. Elle est héritée via {{jsxref("Error")}}.
+- {{jsxref("Error.prototype.toString", "WebAssembly.LinkError.prototype.toString()")}}
+  - : Cette méthode renvoie une chaîne de caractères qui représente l'objet de l'erreur. Elle est héritée via {{jsxref("Error")}}.
+
+## Exemples
+
+Dans le fragment de code qui suit, on crée un nouvelle instance de `LinkError` puis on imprime les détails dans la console :
+
+```js
+try {
+  throw new WebAssembly.LinkError('Coucou', 'unFichier', 10);
+} catch (e) {
+  console.log(e instanceof LinkError); // true
+  console.log(e.message);                 // "Coucou"
+  console.log(e.name);                    // "LinkError"
+  console.log(e.fileName);                // "unFichier"
+  console.log(e.lineNumber);              // 10
+  console.log(e.columnNumber);            // 0
+  console.log(e.stack);                   // renvoie la pile d'appels
+                                          // à l'origine de l'erreur
+}
+```
+
+## Spécifications
+
+| Spécification                                                                                                                                        | État                                 | Commentaires                                       |
+| ---------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------ | -------------------------------------------------- |
+| {{SpecName('WebAssembly JS', '#constructor-properties-of-the-webassembly-object', 'WebAssembly constructors')}} | {{Spec2('WebAssembly JS')}} | Brouillon de définition initiale pour WebAssembly. |
+| {{SpecName('ESDraft', '#sec-native-error-types-used-in-this-standard', 'NativeError')}}                                 | {{Spec2('ESDraft')}}         | Définition des types standards `NativeError`.      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.WebAssembly.LinkError")}}
+
+## Voir aussi
+
+- [Le portail WebAssembly](/fr/docs/WebAssembly)
+- [Les concepts relatifs à WebAssembly](/fr/docs/WebAssembly/Concepts)
+- [Utiliser l'API JavaScript WebAssembly](/fr/docs/WebAssembly/Using_the_JavaScript_API)
diff --git a/files/fr/web/javascript/reference/global_objects/webassembly/memory/buffer/index.html b/files/fr/web/javascript/reference/global_objects/webassembly/memory/buffer/index.html
deleted file mode 100644
index cd6e68ecec..0000000000
--- a/files/fr/web/javascript/reference/global_objects/webassembly/memory/buffer/index.html
+++ /dev/null
@@ -1,64 +0,0 @@
----
-title: WebAssembly.Memory.prototype.buffer
-slug: Web/JavaScript/Reference/Global_Objects/WebAssembly/Memory/buffer
-tags:
-  - API
-  - JavaScript
-  - Propriété
-  - Reference
-  - WebAssembly
-  - memory
-translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/Memory/buffer
-original_slug: Web/JavaScript/Reference/Objets_globaux/WebAssembly/Memory/buffer
----
-<div>{{JSRef}}</div>
-
-<p>La propriété <strong><code>buffer</code></strong>, rattachée au prototype de l'objet <code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/WebAssembly/Memory">Memory</a></code>, renvoie le tampon (<em>buffer</em>) contenu dans l'espace mémoire.</p>
-
-<pre class="syntaxbox">memory.buffer
-</pre>
-
-<h2 id="Exemples">Exemples</h2>
-
-<p>Dans l'exemple suivant (cf. le fichier <a href="https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/memory.html">memory.html</a> sur GitHub ainsi que <a href="https://mdn.github.io/webassembly-examples/js-api-examples/memory.html">le résultat obtenu</a>), on récupère puis on instancie le <em>bytecode</em> <code>memory.wasm</code> grâce à la méthode {{jsxref("WebAssembly.instantiateStreaming()")}} tout en important la mémoire créée à la ligne précédente. Ensuite, on enregistre certaines valeurs dans cette mémoire puis on exporte une fonction afin de l'utiliser pour additionner certaines valeurs.</p>
-
-<pre class="brush: js">WebAssembly.instantiateStreaming(fetch('memory.wasm'), { js: { mem: memory } })
-.then(obj =&gt; {
-  var i32 = new Uint32Array(memory.buffer);
-  for (var i = 0; i &lt; 10; i++) {
-    i32[i] = i;
-  }
-  var sum = obj.instance.exports.accumulate(0, 10);
-  console.log(sum);
-});</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('WebAssembly JS', '#webassemblymemoryprototypebuffer', 'buffer')}}</td>
-   <td>{{Spec2('WebAssembly JS')}}</td>
-   <td>Brouillon de définition initiale pour WebAssembly.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.WebAssembly.Memory.buffer")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/WebAssembly">Le portail WebAssembly</a></li>
- <li><a href="/fr/docs/WebAssembly/Concepts">Les concepts relatifs à WebAssembly</a></li>
- <li><a href="/fr/docs/WebAssembly/Using_the_JavaScript_API">Utiliser l'API JavaScript WebAssembly</a></li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/webassembly/memory/buffer/index.md b/files/fr/web/javascript/reference/global_objects/webassembly/memory/buffer/index.md
new file mode 100644
index 0000000000..54b2b1dd81
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/webassembly/memory/buffer/index.md
@@ -0,0 +1,50 @@
+---
+title: WebAssembly.Memory.prototype.buffer
+slug: Web/JavaScript/Reference/Global_Objects/WebAssembly/Memory/buffer
+tags:
+  - API
+  - JavaScript
+  - Propriété
+  - Reference
+  - WebAssembly
+  - memory
+translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/Memory/buffer
+original_slug: Web/JavaScript/Reference/Objets_globaux/WebAssembly/Memory/buffer
+---
+{{JSRef}}
+
+La propriété **`buffer`**, rattachée au prototype de l'objet [`Memory`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/WebAssembly/Memory), renvoie le tampon (_buffer_) contenu dans l'espace mémoire.
+
+    memory.buffer
+
+## Exemples
+
+Dans l'exemple suivant (cf. le fichier [memory.html](https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/memory.html) sur GitHub ainsi que [le résultat obtenu](https://mdn.github.io/webassembly-examples/js-api-examples/memory.html)), on récupère puis on instancie le _bytecode_ `memory.wasm` grâce à la méthode {{jsxref("WebAssembly.instantiateStreaming()")}} tout en important la mémoire créée à la ligne précédente. Ensuite, on enregistre certaines valeurs dans cette mémoire puis on exporte une fonction afin de l'utiliser pour additionner certaines valeurs.
+
+```js
+WebAssembly.instantiateStreaming(fetch('memory.wasm'), { js: { mem: memory } })
+.then(obj => {
+  var i32 = new Uint32Array(memory.buffer);
+  for (var i = 0; i < 10; i++) {
+    i32[i] = i;
+  }
+  var sum = obj.instance.exports.accumulate(0, 10);
+  console.log(sum);
+});
+```
+
+## Spécifications
+
+| Spécification                                                                                            | État                                 | Commentaires                                       |
+| -------------------------------------------------------------------------------------------------------- | ------------------------------------ | -------------------------------------------------- |
+| {{SpecName('WebAssembly JS', '#webassemblymemoryprototypebuffer', 'buffer')}} | {{Spec2('WebAssembly JS')}} | Brouillon de définition initiale pour WebAssembly. |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.WebAssembly.Memory.buffer")}}
+
+## Voir aussi
+
+- [Le portail WebAssembly](/fr/docs/WebAssembly)
+- [Les concepts relatifs à WebAssembly](/fr/docs/WebAssembly/Concepts)
+- [Utiliser l'API JavaScript WebAssembly](/fr/docs/WebAssembly/Using_the_JavaScript_API)
diff --git a/files/fr/web/javascript/reference/global_objects/webassembly/memory/grow/index.html b/files/fr/web/javascript/reference/global_objects/webassembly/memory/grow/index.html
deleted file mode 100644
index 7d4426fc4a..0000000000
--- a/files/fr/web/javascript/reference/global_objects/webassembly/memory/grow/index.html
+++ /dev/null
@@ -1,78 +0,0 @@
----
-title: WebAssembly.Memory.prototype.grow()
-slug: Web/JavaScript/Reference/Global_Objects/WebAssembly/Memory/grow
-tags:
-  - API
-  - JavaScript
-  - Méthode
-  - Reference
-  - WebAssembly
-  - memory
-translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/Memory/grow
-original_slug: Web/JavaScript/Reference/Objets_globaux/WebAssembly/Memory/grow
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <strong><code>grow()</code></strong>, rattachée au prototype de l'objet <code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/WebAssembly/Memory">Memory</a></code>, permet d'augmenter la taille de l'espace mémoire correspondant d'un nombre de pages WebAssembly.</p>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">memory.grow(<em>nombre</em>);
-</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>nombre</code></dt>
- <dd>Le nombre de pages WebAssembly duquel on veut augmenter l'espace mémoire correspondant à l'objet courant (une page mémoire WebAssembly correspond à 64 Ko).</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>La taille de l'espace mémoire avant l'extension, exprimée en nombre de pages WebAssembly.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<p>Dans le code qui suit, on crée une instance de <code>Memory</code> qui mesure initialement 1 page (soit 64 Ko) et dont la taille maximale est de 10 pages (soit 6,4 Mo).</p>
-
-<pre class="brush: js">var memory = new WebAssembly.Memory({initial:10, maximum:100});</pre>
-
-<p>Ensuite, on augmente la taille de l'espace mémoire d'une page grâce à la méthode :</p>
-
-<pre class="brush: js">const bytesPerPage = 64 * 1024;
-console.log(memory.buffer.byteLength / bytesPerPage);  // "1"
-console.log(memory.grow(1));                           // "1"
-console.log(memory.buffer.byteLength / bytesPerPage);  // "2"</pre>
-
-<p>On voit ici que la valeur de <code>grow()</code> indique l'espace utilisé avant l'agrandissement de la mémoire.</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('WebAssembly JS', '#webassemblymemoryprototypegrow', 'grow()')}}</td>
-   <td>{{Spec2('WebAssembly JS')}}</td>
-   <td>Brouillon de définition initiale pour WebAssembly.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.WebAssembly.Memory.grow")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/WebAssembly">Le portail WebAssembly</a></li>
- <li><a href="/fr/docs/WebAssembly/Concepts">Les concepts relatifs à WebAssembly</a></li>
- <li><a href="/fr/docs/WebAssembly/Using_the_JavaScript_API">Utiliser l'API JavaScript WebAssembly</a></li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/webassembly/memory/grow/index.md b/files/fr/web/javascript/reference/global_objects/webassembly/memory/grow/index.md
new file mode 100644
index 0000000000..5872525372
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/webassembly/memory/grow/index.md
@@ -0,0 +1,64 @@
+---
+title: WebAssembly.Memory.prototype.grow()
+slug: Web/JavaScript/Reference/Global_Objects/WebAssembly/Memory/grow
+tags:
+  - API
+  - JavaScript
+  - Méthode
+  - Reference
+  - WebAssembly
+  - memory
+translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/Memory/grow
+original_slug: Web/JavaScript/Reference/Objets_globaux/WebAssembly/Memory/grow
+---
+{{JSRef}}
+
+La méthode **`grow()`**, rattachée au prototype de l'objet [`Memory`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/WebAssembly/Memory), permet d'augmenter la taille de l'espace mémoire correspondant d'un nombre de pages WebAssembly.
+
+## Syntaxe
+
+    memory.grow(nombre);
+
+### Paramètres
+
+- `nombre`
+  - : Le nombre de pages WebAssembly duquel on veut augmenter l'espace mémoire correspondant à l'objet courant (une page mémoire WebAssembly correspond à 64 Ko).
+
+### Valeur de retour
+
+La taille de l'espace mémoire avant l'extension, exprimée en nombre de pages WebAssembly.
+
+## Exemples
+
+Dans le code qui suit, on crée une instance de `Memory` qui mesure initialement 1 page (soit 64 Ko) et dont la taille maximale est de 10 pages (soit 6,4 Mo).
+
+```js
+var memory = new WebAssembly.Memory({initial:10, maximum:100});
+```
+
+Ensuite, on augmente la taille de l'espace mémoire d'une page grâce à la méthode :
+
+```js
+const bytesPerPage = 64 * 1024;
+console.log(memory.buffer.byteLength / bytesPerPage);  // "1"
+console.log(memory.grow(1));                           // "1"
+console.log(memory.buffer.byteLength / bytesPerPage);  // "2"
+```
+
+On voit ici que la valeur de `grow()` indique l'espace utilisé avant l'agrandissement de la mémoire.
+
+## Spécifications
+
+| Spécification                                                                                        | État                                 | Commentaires                                       |
+| ---------------------------------------------------------------------------------------------------- | ------------------------------------ | -------------------------------------------------- |
+| {{SpecName('WebAssembly JS', '#webassemblymemoryprototypegrow', 'grow()')}} | {{Spec2('WebAssembly JS')}} | Brouillon de définition initiale pour WebAssembly. |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.WebAssembly.Memory.grow")}}
+
+## Voir aussi
+
+- [Le portail WebAssembly](/fr/docs/WebAssembly)
+- [Les concepts relatifs à WebAssembly](/fr/docs/WebAssembly/Concepts)
+- [Utiliser l'API JavaScript WebAssembly](/fr/docs/WebAssembly/Using_the_JavaScript_API)
diff --git a/files/fr/web/javascript/reference/global_objects/webassembly/memory/index.html b/files/fr/web/javascript/reference/global_objects/webassembly/memory/index.html
deleted file mode 100644
index 5c5d36d7cd..0000000000
--- a/files/fr/web/javascript/reference/global_objects/webassembly/memory/index.html
+++ /dev/null
@@ -1,120 +0,0 @@
----
-title: WebAssembly.Memory()
-slug: Web/JavaScript/Reference/Global_Objects/WebAssembly/Memory
-tags:
-  - API
-  - Constructeur
-  - JavaScript
-  - Object
-  - Reference
-  - WebAssembly
-translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/Memory
-original_slug: Web/JavaScript/Reference/Objets_globaux/WebAssembly/Memory
----
-<div>{{JSRef}}</div>
-
-<p>Le constructeur <code><strong>WebAssembly.Memory()</strong></code> crée un nouvel objet <code>Memory</code> dont la propriété {{jsxref("WebAssembly/Memory/buffer","buffer")}} est un {{jsxref("ArrayBuffer")}} redimensionnable qui contient les octets de mémoire bruts accessibles par une instance WebAssembly.</p>
-
-<p>Un espace mémoire créé depuis du code JavaScript ou depuis du code WebAssembly sera accessible et modifiable (<em>mutable</em>) depuis JavaScript <strong>et</strong> depuis WebAssembly.</p>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">var maMemoire = new WebAssembly.Memory(descripteurMemoire);</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>descripteurMemoire</code></dt>
- <dd>Un objet qui contient les propriétés suivantes :
- <dl>
-  <dt><code>initial</code></dt>
-  <dd>La taille initiale de cet espace mémoire WebAssembly, exprimée en nombre de pages WebAssembly.</dd>
-  <dt><code>maximum</code> {{optional_inline}}</dt>
-  <dd>La taille maximale autorisée pour cet espace mémoire WebAssembly, exprimée en nombre de pages WebAssembly. Lorsque ce paramètre est utilisé, il est fournit comme indication au moteur pour que celui-ci réserve l'espace mémoire correspondant. Toutefois, le moteur peut choisir d'ignorer cette indication. Dans la plupart des cas, il n'est pas nécessaire d'indiquer un maximum pour les modules WebAssembly.</dd>
- </dl>
- </dd>
-</dl>
-
-<div class="note">
-<p><strong>Note :</strong> Une page mémoire WebAssembly correspond à une taille fixe de 65 536 octets, soit environ 64 Ko.</p>
-</div>
-
-<h3 id="Exceptions">Exceptions</h3>
-
-<ul>
- <li>Si <code>descripteurMemoire</code> n'est pas un objet, une exception {{jsxref("TypeError")}} sera levée.</li>
- <li>Si <code>maximum</code> est indiqué et qu'il est inférieur à <code>initial</code>, une exception {{jsxref("RangeError")}} sera levée.</li>
-</ul>
-
-<h2 id="Méthodes_du_constructeur_Memory">Méthodes du constructeur <code>Memory</code></h2>
-
-<p>Aucune.</p>
-
-<h2 id="Instances_de_Memory">Instances de <code>Memory</code></h2>
-
-<p>Toutes les instances de <code>Memory</code> héritent des propriétés du <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/WebAssembly/Memory/prototype">prototype du constructeur</a> <code>Memory()</code> qui peut être utilisé afin de modifier le comportement de l'ensemble des instances de <code>Memory</code>.</p>
-
-<h3 id="Propriétés">Propriétés</h3>
-
-<dl>
- <dt><code>Memory.prototype.constructor</code></dt>
- <dd>Renvoie la fonction qui a créé l'instance de l'objet. Par défaut, c'est le constructeur {{jsxref("WebAssembly.Memory()")}}.</dd>
- <dt>{{jsxref("WebAssembly/Memory/buffer","Memory.prototype.buffer")}}</dt>
- <dd>Une propriété d'accesseur qui renvoie le tampon contenu dans l'espace mémoire.</dd>
-</dl>
-
-<h3 id="Méthodes">Méthodes</h3>
-
-<dl>
- <dt>{{jsxref("WebAssembly/Memory/grow","Memory.prototype.grow()")}}</dt>
- <dd>Cette méthode permet d'augmenter la taille de l'espace mémoire d'un nombre de pages donné (dont chacune mesure 64 Ko).</dd>
-</dl>
-
-<h2 id="Exemples">Exemples</h2>
-
-<p>Il existe deux façons de créer un objet <code>WebAssembly.Memory</code>. La première consiste à le créer explicitement en JavaScript. Avec l'instruction qui suit, on crée un espace mémoire avec une taille initiale de 10 pages (soit 640 Ko) et une taille maximale de 100 pages (soit 6,4 Mo).</p>
-
-<pre class="brush: js">var memoire = new WebAssembly.Memory({initial:10, maximum:100});</pre>
-
-<p>La seconde méthode permettant d'obtenir un objet <code>WebAssembly.Memory</code> est de l'exporter depuis un module WebAssembly. Dans l'exemple suivant (cf. le fichier <a href="https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/memory.html">memory.html</a> sur GitHub ainsi que <a href="https://mdn.github.io/webassembly-examples/js-api-examples/memory.html">le résultat obtenu</a>) on récupère et on instancie le <em>bytecode</em> <code>memory.wasm</code> grâce à la méthode {{jsxref("WebAssembly.instantiateStreaming()")}} tout en important la mémoire créée à la ligne précédente. Ensuite, on enregistre des valeurs au sein de cette mémoire puis on exporte une fonction qu'on utilise pour additionner certaines valeurs.</p>
-
-<pre class="brush: js">WebAssembly.instantiateStreaming(fetch('memory.wasm'), { js: { mem: memory } })
-.then(obj =&gt; {
-  var i32 = new Uint32Array(memory.buffer);
-  for (var i = 0; i &lt; 10; i++) {
-    i32[i] = i;
-  }
-  var sum = obj.instance.exports.accumulate(0, 10);
-  console.log(sum);
-});</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('WebAssembly JS', '#webassemblymemory-objects', 'Memory')}}</td>
-   <td>{{Spec2('WebAssembly JS')}}</td>
-   <td>Brouillon de définition initiale pour WebAssembly.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.WebAssembly.Memory")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/WebAssembly">Le portail WebAssembly</a></li>
- <li><a href="/fr/docs/WebAssembly/Concepts">Les concepts relatifs à WebAssembly</a></li>
- <li><a href="/fr/docs/WebAssembly/Using_the_JavaScript_API">Utiliser l'API JavaScript WebAssembly</a></li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/webassembly/memory/index.md b/files/fr/web/javascript/reference/global_objects/webassembly/memory/index.md
new file mode 100644
index 0000000000..dcd8256662
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/webassembly/memory/index.md
@@ -0,0 +1,98 @@
+---
+title: WebAssembly.Memory()
+slug: Web/JavaScript/Reference/Global_Objects/WebAssembly/Memory
+tags:
+  - API
+  - Constructeur
+  - JavaScript
+  - Object
+  - Reference
+  - WebAssembly
+translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/Memory
+original_slug: Web/JavaScript/Reference/Objets_globaux/WebAssembly/Memory
+---
+{{JSRef}}
+
+Le constructeur **`WebAssembly.Memory()`** crée un nouvel objet `Memory` dont la propriété {{jsxref("WebAssembly/Memory/buffer","buffer")}} est un {{jsxref("ArrayBuffer")}} redimensionnable qui contient les octets de mémoire bruts accessibles par une instance WebAssembly.
+
+Un espace mémoire créé depuis du code JavaScript ou depuis du code WebAssembly sera accessible et modifiable (_mutable_) depuis JavaScript **et** depuis WebAssembly.
+
+## Syntaxe
+
+    var maMemoire = new WebAssembly.Memory(descripteurMemoire);
+
+### Paramètres
+
+- `descripteurMemoire`
+
+  - : Un objet qui contient les propriétés suivantes :
+
+    - `initial`
+      - : La taille initiale de cet espace mémoire WebAssembly, exprimée en nombre de pages WebAssembly.
+    - `maximum` {{optional_inline}}
+      - : La taille maximale autorisée pour cet espace mémoire WebAssembly, exprimée en nombre de pages WebAssembly. Lorsque ce paramètre est utilisé, il est fournit comme indication au moteur pour que celui-ci réserve l'espace mémoire correspondant. Toutefois, le moteur peut choisir d'ignorer cette indication. Dans la plupart des cas, il n'est pas nécessaire d'indiquer un maximum pour les modules WebAssembly.
+
+> **Note :** Une page mémoire WebAssembly correspond à une taille fixe de 65 536 octets, soit environ 64 Ko.
+
+### Exceptions
+
+- Si `descripteurMemoire` n'est pas un objet, une exception {{jsxref("TypeError")}} sera levée.
+- Si `maximum` est indiqué et qu'il est inférieur à `initial`, une exception {{jsxref("RangeError")}} sera levée.
+
+## Méthodes du constructeur `Memory`
+
+Aucune.
+
+## Instances de `Memory`
+
+Toutes les instances de `Memory` héritent des propriétés du [prototype du constructeur](/fr/docs/Web/JavaScript/Reference/Objets_globaux/WebAssembly/Memory/prototype) `Memory()` qui peut être utilisé afin de modifier le comportement de l'ensemble des instances de `Memory`.
+
+### Propriétés
+
+- `Memory.prototype.constructor`
+  - : Renvoie la fonction qui a créé l'instance de l'objet. Par défaut, c'est le constructeur {{jsxref("WebAssembly.Memory()")}}.
+- {{jsxref("WebAssembly/Memory/buffer","Memory.prototype.buffer")}}
+  - : Une propriété d'accesseur qui renvoie le tampon contenu dans l'espace mémoire.
+
+### Méthodes
+
+- {{jsxref("WebAssembly/Memory/grow","Memory.prototype.grow()")}}
+  - : Cette méthode permet d'augmenter la taille de l'espace mémoire d'un nombre de pages donné (dont chacune mesure 64 Ko).
+
+## Exemples
+
+Il existe deux façons de créer un objet `WebAssembly.Memory`. La première consiste à le créer explicitement en JavaScript. Avec l'instruction qui suit, on crée un espace mémoire avec une taille initiale de 10 pages (soit 640 Ko) et une taille maximale de 100 pages (soit 6,4 Mo).
+
+```js
+var memoire = new WebAssembly.Memory({initial:10, maximum:100});
+```
+
+La seconde méthode permettant d'obtenir un objet `WebAssembly.Memory` est de l'exporter depuis un module WebAssembly. Dans l'exemple suivant (cf. le fichier [memory.html](https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/memory.html) sur GitHub ainsi que [le résultat obtenu](https://mdn.github.io/webassembly-examples/js-api-examples/memory.html)) on récupère et on instancie le _bytecode_ `memory.wasm` grâce à la méthode {{jsxref("WebAssembly.instantiateStreaming()")}} tout en important la mémoire créée à la ligne précédente. Ensuite, on enregistre des valeurs au sein de cette mémoire puis on exporte une fonction qu'on utilise pour additionner certaines valeurs.
+
+```js
+WebAssembly.instantiateStreaming(fetch('memory.wasm'), { js: { mem: memory } })
+.then(obj => {
+  var i32 = new Uint32Array(memory.buffer);
+  for (var i = 0; i < 10; i++) {
+    i32[i] = i;
+  }
+  var sum = obj.instance.exports.accumulate(0, 10);
+  console.log(sum);
+});
+```
+
+## Spécifications
+
+| Spécification                                                                                | État                                 | Commentaires                                       |
+| -------------------------------------------------------------------------------------------- | ------------------------------------ | -------------------------------------------------- |
+| {{SpecName('WebAssembly JS', '#webassemblymemory-objects', 'Memory')}} | {{Spec2('WebAssembly JS')}} | Brouillon de définition initiale pour WebAssembly. |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.WebAssembly.Memory")}}
+
+## Voir aussi
+
+- [Le portail WebAssembly](/fr/docs/WebAssembly)
+- [Les concepts relatifs à WebAssembly](/fr/docs/WebAssembly/Concepts)
+- [Utiliser l'API JavaScript WebAssembly](/fr/docs/WebAssembly/Using_the_JavaScript_API)
diff --git a/files/fr/web/javascript/reference/global_objects/webassembly/module/customsections/index.html b/files/fr/web/javascript/reference/global_objects/webassembly/module/customsections/index.html
deleted file mode 100644
index dd76bbe66d..0000000000
--- a/files/fr/web/javascript/reference/global_objects/webassembly/module/customsections/index.html
+++ /dev/null
@@ -1,95 +0,0 @@
----
-title: WebAssembly.Module.customSections()
-slug: Web/JavaScript/Reference/Global_Objects/WebAssembly/Module/customSections
-tags:
-  - API
-  - Constructeur
-  - JavaScript
-  - Module
-  - Méthode
-  - Object
-  - Reference
-  - WebAssembly
-translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/Module/customSections
-original_slug: Web/JavaScript/Reference/Objets_globaux/WebAssembly/Module/customSections
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <strong><code>WebAssembly.customSections()</code></strong> renvoie un tableau qui contient les sections personnalisées (<em>custom sections</em>) disponibles dans un module WebAssembly et qui ont un nom donné.</p>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">var custSec = WebAssembly.Module.customSections(<em>module</em>, <em>nomSection</em>);</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>module</code></dt>
- <dd>L'objet {{jsxref("WebAssembly.Module")}} pour lequel on veut obtenir les sections personnalisées.</dd>
- <dt><code>nomSection</code></dt>
- <dd>Le nom de la section personnalisée qu'on souhaite obtenir.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Un tableau contenant des {{domxref("ArrayBuffer")}} dont chacun contient les données d'une section personnalisée du module qui correspond à <code>nomSection</code>.</p>
-
-<h3 id="Exceptions">Exceptions</h3>
-
-<p>Si le module passé en argument n'est pas une instance de {{jsxref("WebAssembly.Module")}}, la méthode lèvera une exception {{jsxref("TypeError")}}.</p>
-
-<h2 id="Les_sections_personnalisées">Les sections personnalisées</h2>
-
-<p>Un module wasm contient une série de <strong>sections</strong>. La plupart de ces sections sont spécifiées et validées par la spécification WebAssembly mais les modules peuvent contenir certaines sections « personnalisées » (<em>custom sections</em>) qui sont ignorées lors de la phase de validation. Pour plus d'informations, consulter<a href="https://github.com/WebAssembly/design/blob/master/BinaryEncoding.md#high-level-structure"> l'article sur les structures de haut niveau</a> qui détaille la structure des sections et les différences entre les sections normales (« connues ») et les sections personnalisées.</p>
-
-<p>Cela permet aux développeurs d'inclure des données personnalisées dans un module WebAssembly pour d'autres desseins. Par exemple, on peut avoir <a href="https://github.com/WebAssembly/design/blob/master/BinaryEncoding.md#name-section">une section personnalisée <code>name</code></a>, qui permet aux développeurs de fournir des noms pour les fonctions et les variables locales du module (à la façon des « symboles » utilisé pour les programmes compilés).</p>
-
-<p>Le format WebAssembly ne possède actuellement aucune syntaxe pour ajouter une section personnalisée. Il est toutefois possible d'ajouter une section nommée au module wasm pendant la conversion du texte vers .wasm. La commande <code>wast2wasm</code>, disponible avec l'outil <code><a href="https://github.com/webassembly/wabt">wabt</a></code>, possède une option <code>--debug-names</code> qui permet de créer un module <code>.wasm</code> avec une section personnalisée <code>name</code> :</p>
-
-<pre class="brush: bash">wast2wasm simple-name-section.was -o simple-name-section.wasm --debug-names</pre>
-
-<h2 id="Exemples">Exemples</h2>
-
-<p>Dans l'exemple qui suit (tiré de <a href="https://github.com/mdn/webassembly-examples/blob/master/other-examples/custom-section.html">ce fichier source</a> et de <a href="https://mdn.github.io/webassembly-examples/other-examples/custom-section.html">cette démonstration</a>), on compile et on instancie le bytecode <code>simple-name-section.wasm</code> et on importe une fonction JavaScript dans le module lors de cette étape. Ensuite, on exporte une fonction depuis le module grâce à <code>Instance.exports</code>.</p>
-
-<p>On faut aussi une vérification sur <code>WebAssembly.Module.customSections</code> pour vérifier si celle-ci contient une section personnalisée <code>"name"</code> dont on vérifie si la longueur est supérieure à 0. Ce module contenant une section <code>name</code>, les appels à <code>console.log()</code> sont exécutés et montrent que le tableau renvoyé par la méthode contient des objets {{domxref("ArrayBuffer")}}.</p>
-
-<pre class="brush: js">WebAssembly.compileStreaming(fetch('simple-name-section.wasm'))
-.then(function(mod) {
-  var nameSections = WebAssembly.Module.customSections(mod, "name");
-  if (nameSections.length != 0) {
-    console.log("Le module contient une section nommée");
-    console.log(nameSections[0]);
-  };
-});</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('WebAssembly JS', '#webassemblymodulecustomsections', 'customSections()')}}</td>
-   <td>{{Spec2('WebAssembly JS')}}</td>
-   <td>Brouillon de définition initiale pour WebAssembly.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.WebAssembly.Module.customSections")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/WebAssembly">Le portail WebAssembly</a></li>
- <li><a href="/fr/docs/WebAssembly/Concepts">Les concepts relatifs à WebAssembly</a></li>
- <li><a href="/fr/docs/WebAssembly/Using_the_JavaScript_API">Utiliser l'API JavaScript WebAssembly</a></li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/webassembly/module/customsections/index.md b/files/fr/web/javascript/reference/global_objects/webassembly/module/customsections/index.md
new file mode 100644
index 0000000000..63877bff3b
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/webassembly/module/customsections/index.md
@@ -0,0 +1,82 @@
+---
+title: WebAssembly.Module.customSections()
+slug: Web/JavaScript/Reference/Global_Objects/WebAssembly/Module/customSections
+tags:
+  - API
+  - Constructeur
+  - JavaScript
+  - Module
+  - Méthode
+  - Object
+  - Reference
+  - WebAssembly
+translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/Module/customSections
+original_slug: Web/JavaScript/Reference/Objets_globaux/WebAssembly/Module/customSections
+---
+{{JSRef}}
+
+La méthode **`WebAssembly.customSections()`** renvoie un tableau qui contient les sections personnalisées (_custom sections_) disponibles dans un module WebAssembly et qui ont un nom donné.
+
+## Syntaxe
+
+    var custSec = WebAssembly.Module.customSections(module, nomSection);
+
+### Paramètres
+
+- `module`
+  - : L'objet {{jsxref("WebAssembly.Module")}} pour lequel on veut obtenir les sections personnalisées.
+- `nomSection`
+  - : Le nom de la section personnalisée qu'on souhaite obtenir.
+
+### Valeur de retour
+
+Un tableau contenant des {{domxref("ArrayBuffer")}} dont chacun contient les données d'une section personnalisée du module qui correspond à `nomSection`.
+
+### Exceptions
+
+Si le module passé en argument n'est pas une instance de {{jsxref("WebAssembly.Module")}}, la méthode lèvera une exception {{jsxref("TypeError")}}.
+
+## Les sections personnalisées
+
+Un module wasm contient une série de **sections**. La plupart de ces sections sont spécifiées et validées par la spécification WebAssembly mais les modules peuvent contenir certaines sections « personnalisées » (_custom sections_) qui sont ignorées lors de la phase de validation. Pour plus d'informations, consulter[ l'article sur les structures de haut niveau](https://github.com/WebAssembly/design/blob/master/BinaryEncoding.md#high-level-structure) qui détaille la structure des sections et les différences entre les sections normales (« connues ») et les sections personnalisées.
+
+Cela permet aux développeurs d'inclure des données personnalisées dans un module WebAssembly pour d'autres desseins. Par exemple, on peut avoir [une section personnalisée `name`](https://github.com/WebAssembly/design/blob/master/BinaryEncoding.md#name-section), qui permet aux développeurs de fournir des noms pour les fonctions et les variables locales du module (à la façon des « symboles » utilisé pour les programmes compilés).
+
+Le format WebAssembly ne possède actuellement aucune syntaxe pour ajouter une section personnalisée. Il est toutefois possible d'ajouter une section nommée au module wasm pendant la conversion du texte vers .wasm. La commande `wast2wasm`, disponible avec l'outil [`wabt`](https://github.com/webassembly/wabt), possède une option `--debug-names` qui permet de créer un module `.wasm` avec une section personnalisée `name` :
+
+```bash
+wast2wasm simple-name-section.was -o simple-name-section.wasm --debug-names
+```
+
+## Exemples
+
+Dans l'exemple qui suit (tiré de [ce fichier source](https://github.com/mdn/webassembly-examples/blob/master/other-examples/custom-section.html) et de [cette démonstration](https://mdn.github.io/webassembly-examples/other-examples/custom-section.html)), on compile et on instancie le bytecode `simple-name-section.wasm` et on importe une fonction JavaScript dans le module lors de cette étape. Ensuite, on exporte une fonction depuis le module grâce à `Instance.exports`.
+
+On faut aussi une vérification sur `WebAssembly.Module.customSections` pour vérifier si celle-ci contient une section personnalisée `"name"` dont on vérifie si la longueur est supérieure à 0. Ce module contenant une section `name`, les appels à `console.log()` sont exécutés et montrent que le tableau renvoyé par la méthode contient des objets {{domxref("ArrayBuffer")}}.
+
+```js
+WebAssembly.compileStreaming(fetch('simple-name-section.wasm'))
+.then(function(mod) {
+  var nameSections = WebAssembly.Module.customSections(mod, "name");
+  if (nameSections.length != 0) {
+    console.log("Le module contient une section nommée");
+    console.log(nameSections[0]);
+  };
+});
+```
+
+## Spécifications
+
+| Spécification                                                                                                        | État                                 | Commentaires                                       |
+| -------------------------------------------------------------------------------------------------------------------- | ------------------------------------ | -------------------------------------------------- |
+| {{SpecName('WebAssembly JS', '#webassemblymodulecustomsections', 'customSections()')}} | {{Spec2('WebAssembly JS')}} | Brouillon de définition initiale pour WebAssembly. |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.WebAssembly.Module.customSections")}}
+
+## Voir aussi
+
+- [Le portail WebAssembly](/fr/docs/WebAssembly)
+- [Les concepts relatifs à WebAssembly](/fr/docs/WebAssembly/Concepts)
+- [Utiliser l'API JavaScript WebAssembly](/fr/docs/WebAssembly/Using_the_JavaScript_API)
diff --git a/files/fr/web/javascript/reference/global_objects/webassembly/module/exports/index.html b/files/fr/web/javascript/reference/global_objects/webassembly/module/exports/index.html
deleted file mode 100644
index d16223a07c..0000000000
--- a/files/fr/web/javascript/reference/global_objects/webassembly/module/exports/index.html
+++ /dev/null
@@ -1,105 +0,0 @@
----
-title: WebAssembly.Module.exports()
-slug: Web/JavaScript/Reference/Global_Objects/WebAssembly/Module/exports
-tags:
-  - API
-  - Constructeur
-  - JavaScript
-  - Module
-  - Méthode
-  - Object
-  - Reference
-  - WebAssembly
-translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/Module/exports
-original_slug: Web/JavaScript/Reference/Objets_globaux/WebAssembly/Module/exports
----
-<div>{{JSRef}}</div>
-
-<p>La fonction <strong><code>WebAssembly.Module.exports()</code></strong> renvoie un tableau qui contient les descriptions des exports déclarés pour un module donné.</p>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">var exports = WebAssembly.Module.exports(module);</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>module</code></dt>
- <dd>Un objet {{jsxref("WebAssembly.Module")}}.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Un tableau qui contient des objets représentants les fonctions exportés du module passé en argument.</p>
-
-<h3 id="Exceptions">Exceptions</h3>
-
-<p>Si l'argument n'est pas une instance de {{jsxref("WebAssembly.Module")}}, une exception {{jsxref("TypeError")}} sera levée.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<p>Dans l'exemple suivant (basé sur le fichier <code><a href="https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/index-compile.html">index-compile.html</a></code> disponible sur GitHub avec <a href="https://mdn.github.io/webassembly-examples/js-api-examples/index-compile.html">la démonstration correspondante</a>), on compile le <em>bytecode</em> <code>simple.wasm</code> grâce à la fonction {{jsxref("WebAssembly.compileStreaming()")}} puis on envoie le résultat à un <em><a href="/fr/docs/Web/API/Web_Workers_API">worker</a></em> grâce à la méthode <code><a href="/fr/docs/Web/API/Worker/postMessage">postMessage()</a></code>.</p>
-
-<pre class="brush: js">var worker = new Worker("wasm_worker.js");
-
-WebAssembly.compileStreaming(fetch("simple.wasm"))
-.then(mod =&gt;
-  worker.postMessage(mod)
-);</pre>
-
-<p>Dans le <em>worker</em> (cf. <code><a href="https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/wasm_worker.js">wasm_worker.js</a></code>), on définit un objet d'import pour le module puis on paramètre un gestionnaire d'évènement afin de recevoir le module depuis le <em>thread</em> principal. Lorsqu'on reçoit le module, on en crée une instance via la méthode {{jsxref("WebAssembly.Instantiate()")}} puis on appelle une fonction exportée et enfin, on affiche les informations relatives aux exports disponibles grâce à <code>WebAssembly.Module.exports</code>.</p>
-
-<pre class="brush: js">var importObject = {
-  imports: {
-    imported_func: function(arg) {
-      console.log(arg);
-    }
-  }
-};
-
-onmessage = function(e) {
-  console.log('module reçu du thread principal');
-  var mod = e.data;
-
-  WebAssembly.instantiate(mod, importObject).then(function(instance) {
-    instance.exports.exported_func();
-  });
-
-  var exports = WebAssembly.Module.exports(mod);
-  console.log(exports[0]);
-};</pre>
-
-<p>La valeur <code>exports[0]</code> ressemblera alors à :</p>
-
-<pre class="brush: js">{ name: "exported_func", kind: "function" }</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('WebAssembly JS', '#webassemblymoduleexports', 'exports()')}}</td>
-   <td>{{Spec2('WebAssembly JS')}}</td>
-   <td>Brouillon de définition initiale pour WebAssembly.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.WebAssembly.Module.exports")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/WebAssembly">Le portail WebAssembly</a></li>
- <li><a href="/fr/docs/WebAssembly/Concepts">Les concepts relatifs à WebAssembly</a></li>
- <li><a href="/fr/docs/WebAssembly/Using_the_JavaScript_API">Utiliser l'API JavaScript WebAssembly</a></li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/webassembly/module/exports/index.md b/files/fr/web/javascript/reference/global_objects/webassembly/module/exports/index.md
new file mode 100644
index 0000000000..6f7722bdb1
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/webassembly/module/exports/index.md
@@ -0,0 +1,94 @@
+---
+title: WebAssembly.Module.exports()
+slug: Web/JavaScript/Reference/Global_Objects/WebAssembly/Module/exports
+tags:
+  - API
+  - Constructeur
+  - JavaScript
+  - Module
+  - Méthode
+  - Object
+  - Reference
+  - WebAssembly
+translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/Module/exports
+original_slug: Web/JavaScript/Reference/Objets_globaux/WebAssembly/Module/exports
+---
+{{JSRef}}
+
+La fonction **`WebAssembly.Module.exports()`** renvoie un tableau qui contient les descriptions des exports déclarés pour un module donné.
+
+## Syntaxe
+
+    var exports = WebAssembly.Module.exports(module);
+
+### Paramètres
+
+- `module`
+  - : Un objet {{jsxref("WebAssembly.Module")}}.
+
+### Valeur de retour
+
+Un tableau qui contient des objets représentants les fonctions exportés du module passé en argument.
+
+### Exceptions
+
+Si l'argument n'est pas une instance de {{jsxref("WebAssembly.Module")}}, une exception {{jsxref("TypeError")}} sera levée.
+
+## Exemples
+
+Dans l'exemple suivant (basé sur le fichier [`index-compile.html`](https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/index-compile.html) disponible sur GitHub avec [la démonstration correspondante](https://mdn.github.io/webassembly-examples/js-api-examples/index-compile.html)), on compile le _bytecode_ `simple.wasm` grâce à la fonction {{jsxref("WebAssembly.compileStreaming()")}} puis on envoie le résultat à un _[worker](/fr/docs/Web/API/Web_Workers_API)_ grâce à la méthode [`postMessage()`](/fr/docs/Web/API/Worker/postMessage).
+
+```js
+var worker = new Worker("wasm_worker.js");
+
+WebAssembly.compileStreaming(fetch("simple.wasm"))
+.then(mod =>
+  worker.postMessage(mod)
+);
+```
+
+Dans le _worker_ (cf. [`wasm_worker.js`](https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/wasm_worker.js)), on définit un objet d'import pour le module puis on paramètre un gestionnaire d'évènement afin de recevoir le module depuis le _thread_ principal. Lorsqu'on reçoit le module, on en crée une instance via la méthode {{jsxref("WebAssembly.Instantiate()")}} puis on appelle une fonction exportée et enfin, on affiche les informations relatives aux exports disponibles grâce à `WebAssembly.Module.exports`.
+
+```js
+var importObject = {
+  imports: {
+    imported_func: function(arg) {
+      console.log(arg);
+    }
+  }
+};
+
+onmessage = function(e) {
+  console.log('module reçu du thread principal');
+  var mod = e.data;
+
+  WebAssembly.instantiate(mod, importObject).then(function(instance) {
+    instance.exports.exported_func();
+  });
+
+  var exports = WebAssembly.Module.exports(mod);
+  console.log(exports[0]);
+};
+```
+
+La valeur `exports[0]` ressemblera alors à :
+
+```js
+{ name: "exported_func", kind: "function" }
+```
+
+## Spécifications
+
+| Spécification                                                                                    | État                                 | Commentaires                                       |
+| ------------------------------------------------------------------------------------------------ | ------------------------------------ | -------------------------------------------------- |
+| {{SpecName('WebAssembly JS', '#webassemblymoduleexports', 'exports()')}} | {{Spec2('WebAssembly JS')}} | Brouillon de définition initiale pour WebAssembly. |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.WebAssembly.Module.exports")}}
+
+## Voir aussi
+
+- [Le portail WebAssembly](/fr/docs/WebAssembly)
+- [Les concepts relatifs à WebAssembly](/fr/docs/WebAssembly/Concepts)
+- [Utiliser l'API JavaScript WebAssembly](/fr/docs/WebAssembly/Using_the_JavaScript_API)
diff --git a/files/fr/web/javascript/reference/global_objects/webassembly/module/imports/index.html b/files/fr/web/javascript/reference/global_objects/webassembly/module/imports/index.html
deleted file mode 100644
index ac039a3fc7..0000000000
--- a/files/fr/web/javascript/reference/global_objects/webassembly/module/imports/index.html
+++ /dev/null
@@ -1,81 +0,0 @@
----
-title: WebAssembly.Module.imports()
-slug: Web/JavaScript/Reference/Global_Objects/WebAssembly/Module/imports
-tags:
-  - API
-  - JavaScript
-  - Module
-  - Méthode
-  - Reference
-  - WebAssembly
-translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/Module/imports
-original_slug: Web/JavaScript/Reference/Objets_globaux/WebAssembly/Module/imports
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <strong><code>WebAssembly.imports()</code></strong> renvoie un tableau qui contient les références des fonctions importées qui sont disponibles dans un module WebAssembly donné.</p>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">var arrImport = WebAssembly.Module.imports(module);</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>module</code></dt>
- <dd>Une instance de {{jsxref("WebAssembly.Module")}}.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Un tableau qui contient des objets représentant les fonctions importées du module passé en argument.</p>
-
-<h3 id="Exceptions">Exceptions</h3>
-
-<p>Si <code>module</code> n'est pas une instance de {{jsxref("WebAssembly.Module")}}, une exception {{jsxref("TypeError")}} sera levée.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<p>Dans l'exemple qui suit, on compile le module <code>simple.wasm</code> puis on parcourt ses imports (cf. aussi <a href="https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/imports.html">le code sur GitHub</a> et <a href="https://mdn.github.io/webassembly-examples/js-api-examples/imports.html">l'exemple <em>live</em></a>)</p>
-
-<pre class="brush: js">WebAssembly.compileStreaming(fetch('simple.wasm'))
-.then(function(mod) {
-  var imports = WebAssembly.Module.imports(mod);
-  console.log(imports[0]);
-});
-</pre>
-
-<p>Le résultat affiché dans la console ressemble alors à :</p>
-
-<pre class="brush: js">{ module: "imports", name: "imported_func", kind: "function" }</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('WebAssembly JS', '#webassemblymoduleimports', 'imports()')}}</td>
-   <td>{{Spec2('WebAssembly JS')}}</td>
-   <td>Brouillon de définition initial pour WebAssembly.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.WebAssembly.Module.imports")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/WebAssembly">Le portail WebAssembly</a></li>
- <li><a href="/fr/docs/WebAssembly/Concepts">Les concepts relatifs à WebAssembly</a></li>
- <li><a href="/fr/docs/WebAssembly/Using_the_JavaScript_API">Utiliser l'API JavaScript WebAssembly</a></li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/webassembly/module/imports/index.md b/files/fr/web/javascript/reference/global_objects/webassembly/module/imports/index.md
new file mode 100644
index 0000000000..154d821286
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/webassembly/module/imports/index.md
@@ -0,0 +1,67 @@
+---
+title: WebAssembly.Module.imports()
+slug: Web/JavaScript/Reference/Global_Objects/WebAssembly/Module/imports
+tags:
+  - API
+  - JavaScript
+  - Module
+  - Méthode
+  - Reference
+  - WebAssembly
+translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/Module/imports
+original_slug: Web/JavaScript/Reference/Objets_globaux/WebAssembly/Module/imports
+---
+{{JSRef}}
+
+La méthode **`WebAssembly.imports()`** renvoie un tableau qui contient les références des fonctions importées qui sont disponibles dans un module WebAssembly donné.
+
+## Syntaxe
+
+    var arrImport = WebAssembly.Module.imports(module);
+
+### Paramètres
+
+- `module`
+  - : Une instance de {{jsxref("WebAssembly.Module")}}.
+
+### Valeur de retour
+
+Un tableau qui contient des objets représentant les fonctions importées du module passé en argument.
+
+### Exceptions
+
+Si `module` n'est pas une instance de {{jsxref("WebAssembly.Module")}}, une exception {{jsxref("TypeError")}} sera levée.
+
+## Exemples
+
+Dans l'exemple qui suit, on compile le module `simple.wasm` puis on parcourt ses imports (cf. aussi [le code sur GitHub](https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/imports.html) et [l'exemple _live_](https://mdn.github.io/webassembly-examples/js-api-examples/imports.html))
+
+```js
+WebAssembly.compileStreaming(fetch('simple.wasm'))
+.then(function(mod) {
+  var imports = WebAssembly.Module.imports(mod);
+  console.log(imports[0]);
+});
+```
+
+Le résultat affiché dans la console ressemble alors à :
+
+```js
+{ module: "imports", name: "imported_func", kind: "function" }
+```
+
+## Spécifications
+
+| Spécification                                                                                    | État                                 | Commentaires                                      |
+| ------------------------------------------------------------------------------------------------ | ------------------------------------ | ------------------------------------------------- |
+| {{SpecName('WebAssembly JS', '#webassemblymoduleimports', 'imports()')}} | {{Spec2('WebAssembly JS')}} | Brouillon de définition initial pour WebAssembly. |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.WebAssembly.Module.imports")}}
+
+## Voir aussi
+
+- [Le portail WebAssembly](/fr/docs/WebAssembly)
+- [Les concepts relatifs à WebAssembly](/fr/docs/WebAssembly/Concepts)
+- [Utiliser l'API JavaScript WebAssembly](/fr/docs/WebAssembly/Using_the_JavaScript_API)
diff --git a/files/fr/web/javascript/reference/global_objects/webassembly/module/index.html b/files/fr/web/javascript/reference/global_objects/webassembly/module/index.html
deleted file mode 100644
index cd6b46e8a9..0000000000
--- a/files/fr/web/javascript/reference/global_objects/webassembly/module/index.html
+++ /dev/null
@@ -1,86 +0,0 @@
----
-title: WebAssembly.Module()
-slug: Web/JavaScript/Reference/Global_Objects/WebAssembly/Module
-tags:
-  - Constructeur
-  - JavaScript
-  - Module
-  - Reference
-  - WebAssembly
-translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/Module
-original_slug: Web/JavaScript/Reference/Objets_globaux/WebAssembly/Module
----
-<div>{{JSRef}}</div>
-
-<p>Un objet <strong><code>WebAssembly.Module</code></strong> contient du code WebAssembly, sans état et qui a déjà été compilé par le navigateur. Ce code peut être <a href="/fr/docs/Web/API/Worker/postMessage">partagé avec des <em>web worker</em></a> et être instancié à plusieurs reprises. Pour instancier le module, on pourra appeler la forme secondaire de {{jsxref("WebAssembly.instantiate()")}}.</p>
-
-<p>Le constructeur <code>WebAssembly.Module()</code> peut être appelé de façon synchrone pour compiler du code WebAssembly. Toutefois, on utilisera généralement la fonction asynchrone {{jsxref("WebAssembly.compile()")}} qui permet de compiler du <em>bytecode</em>.</p>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<div class="warning">
-<p><strong>Attention :</strong> La compilation de modules volumineux peut être consommatrice de ressources et de temps. Le constructeur <code>Module()</code> doit uniqument être utilisé lorsqu'il faut absolument avoir une compilation  synchrone. Pour tous les autres cas de figures, on privilégiera la méthode asynchrone {{jsxref("WebAssembly.compileStreaming()")}}.</p>
-</div>
-
-<pre class="syntaxbox">var monModule = new WebAssembly.Module(bufferSource);</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>bufferSource</code></dt>
- <dd>Un <a href="/fr/docs/Web/JavaScript/Tableaux_typés">tableau typé</a> ou un {{jsxref("ArrayBuffer")}} qui contient le <em>bytecode</em> du module WebAssembly qu'on souhaite compiler.</dd>
-</dl>
-
-<h2 id="Méthodes_du_constructeur_Module">Méthodes du constructeur <code>Module</code></h2>
-
-<dl>
- <dt>{{jsxref("Objets_globaux/WebAssembly/Module/customSections", "WebAssembly.Module.customSections()")}}</dt>
- <dd>Pour un module donné et une chaîne de caractères donnée, cette méthode renvoie une copie des sections personnalisées (<em>custom sections</em>) du module qui ont le nom correspondant à la chaîne.</dd>
- <dt>{{jsxref("Objets_globaux/WebAssembly/Module/exports", "WebAssembly.Module.exports()")}}</dt>
- <dd>Pour un module donné, cette méthode renvoie un tableau dont les éléments sont des descriptions des exports déclarés.</dd>
- <dt>{{jsxref("Objets_globaux/WebAssembly/Module/imports", "WebAssembly.Module.imports()")}}</dt>
- <dd>Pour un module donné, cette méthode renvoie un tableau dont les éléments sont des descriptions des imports déclarés.</dd>
-</dl>
-
-<h2 id="Instances_de_Module">Instances de <code>Module</code></h2>
-
-<p>Toutes les instances de <code>Module</code> héritent du prototype du constructeur <code>Module()</code>, celui-ci peut être modifié afin de moifier le comportement de l'ensemble des instances de <code>Module</code>.</p>
-
-<h3 id="Propriétés">Propriétés</h3>
-
-<p>{{page('/fr/docs/Web/JavaScript/Reference/Objets_globaux/WebAssembly/Module/prototype', 'Propriétés')}}</p>
-
-<h3 id="Méthodes">Méthodes</h3>
-
-<p>Les instances de <code>Module</code> ne disposent pas de méthodes en propre.</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('WebAssembly JS', '#webassemblymodule-objects', 'WebAssembly.Module()')}}</td>
-   <td>{{Spec2('WebAssembly JS')}}</td>
-   <td>Brouillon de définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.WebAssembly.Module")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/WebAssembly">Le portail WebAssembly</a></li>
- <li><a href="/fr/docs/WebAssembly/Concepts">Les concepts relatifs à WebAssembly</a></li>
- <li><a href="/fr/docs/WebAssembly/Using_the_JavaScript_API">Utiliser l'API JavaScript WebAssembly</a></li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/webassembly/module/index.md b/files/fr/web/javascript/reference/global_objects/webassembly/module/index.md
new file mode 100644
index 0000000000..ce946737a8
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/webassembly/module/index.md
@@ -0,0 +1,65 @@
+---
+title: WebAssembly.Module()
+slug: Web/JavaScript/Reference/Global_Objects/WebAssembly/Module
+tags:
+  - Constructeur
+  - JavaScript
+  - Module
+  - Reference
+  - WebAssembly
+translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/Module
+original_slug: Web/JavaScript/Reference/Objets_globaux/WebAssembly/Module
+---
+{{JSRef}}
+
+Un objet **`WebAssembly.Module`** contient du code WebAssembly, sans état et qui a déjà été compilé par le navigateur. Ce code peut être [partagé avec des _web worker_](/fr/docs/Web/API/Worker/postMessage) et être instancié à plusieurs reprises. Pour instancier le module, on pourra appeler la forme secondaire de {{jsxref("WebAssembly.instantiate()")}}.
+
+Le constructeur `WebAssembly.Module()` peut être appelé de façon synchrone pour compiler du code WebAssembly. Toutefois, on utilisera généralement la fonction asynchrone {{jsxref("WebAssembly.compile()")}} qui permet de compiler du _bytecode_.
+
+## Syntaxe
+
+> **Attention :** La compilation de modules volumineux peut être consommatrice de ressources et de temps. Le constructeur `Module()` doit uniqument être utilisé lorsqu'il faut absolument avoir une compilation  synchrone. Pour tous les autres cas de figures, on privilégiera la méthode asynchrone {{jsxref("WebAssembly.compileStreaming()")}}.
+
+    var monModule = new WebAssembly.Module(bufferSource);
+
+### Paramètres
+
+- `bufferSource`
+  - : Un [tableau typé](/fr/docs/Web/JavaScript/Tableaux_typés) ou un {{jsxref("ArrayBuffer")}} qui contient le _bytecode_ du module WebAssembly qu'on souhaite compiler.
+
+## Méthodes du constructeur `Module`
+
+- {{jsxref("Objets_globaux/WebAssembly/Module/customSections", "WebAssembly.Module.customSections()")}}
+  - : Pour un module donné et une chaîne de caractères donnée, cette méthode renvoie une copie des sections personnalisées (_custom sections_) du module qui ont le nom correspondant à la chaîne.
+- {{jsxref("Objets_globaux/WebAssembly/Module/exports", "WebAssembly.Module.exports()")}}
+  - : Pour un module donné, cette méthode renvoie un tableau dont les éléments sont des descriptions des exports déclarés.
+- {{jsxref("Objets_globaux/WebAssembly/Module/imports", "WebAssembly.Module.imports()")}}
+  - : Pour un module donné, cette méthode renvoie un tableau dont les éléments sont des descriptions des imports déclarés.
+
+## Instances de `Module`
+
+Toutes les instances de `Module` héritent du prototype du constructeur `Module()`, celui-ci peut être modifié afin de moifier le comportement de l'ensemble des instances de `Module`.
+
+### Propriétés
+
+{{page('/fr/docs/Web/JavaScript/Reference/Objets_globaux/WebAssembly/Module/prototype', 'Propriétés')}}
+
+### Méthodes
+
+Les instances de `Module` ne disposent pas de méthodes en propre.
+
+## Spécifications
+
+| Spécification                                                                                                    | État                                 | Commentaires                      |
+| ---------------------------------------------------------------------------------------------------------------- | ------------------------------------ | --------------------------------- |
+| {{SpecName('WebAssembly JS', '#webassemblymodule-objects', 'WebAssembly.Module()')}} | {{Spec2('WebAssembly JS')}} | Brouillon de définition initiale. |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.WebAssembly.Module")}}
+
+## Voir aussi
+
+- [Le portail WebAssembly](/fr/docs/WebAssembly)
+- [Les concepts relatifs à WebAssembly](/fr/docs/WebAssembly/Concepts)
+- [Utiliser l'API JavaScript WebAssembly](/fr/docs/WebAssembly/Using_the_JavaScript_API)
diff --git a/files/fr/web/javascript/reference/global_objects/webassembly/runtimeerror/index.html b/files/fr/web/javascript/reference/global_objects/webassembly/runtimeerror/index.html
deleted file mode 100644
index fe5a6d50e8..0000000000
--- a/files/fr/web/javascript/reference/global_objects/webassembly/runtimeerror/index.html
+++ /dev/null
@@ -1,116 +0,0 @@
----
-title: WebAssembly.RuntimeError()
-slug: Web/JavaScript/Reference/Global_Objects/WebAssembly/RuntimeError
-tags:
-  - API
-  - Constructeur
-  - JavaScript
-  - Reference
-  - RuntimeError
-  - WebAssembly
-translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/RuntimeError
-original_slug: Web/JavaScript/Reference/Objets_globaux/WebAssembly/RuntimeError
----
-<div>{{JSRef}}</div>
-
-<p>Le constructeur <code><strong>WebAssembly.RuntimeError()</strong></code> permet de créer un nouvel objet WebAssembly <code>RuntimeError</code>. C'est ce type d'exception qui est déclenchée lorsque WebAssembly définit <a href="http://webassembly.org/docs/semantics/#traps">une trappe</a>.</p>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">new WebAssembly.RuntimeError(<var>message</var>, <var>nomFichier</var>, <var>numeroLigne</var>)</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>message</code> {{optional_inline}}</dt>
- <dd>Une description, compréhensible par un humain, de l'erreur qui s'est produite.</dd>
- <dt><code>fileName</code> {{optional_inline}}{{non-standard_inline}}</dt>
- <dd>Le nom du fichier qui contient le code à l'origine de l'exception.</dd>
- <dt><code>lineNumber</code> {{optional_inline}}{{non-standard_inline}}</dt>
- <dd>Le numéro de la ligne de code à l'origine de l'exception.</dd>
-</dl>
-
-<h2 id="Propriétés">Propriétés</h2>
-
-<p><em>Le constructeur <code>RuntimeError</code> ne contient aucune propriété qui lui soit propre. En revanche, il hérite de certaines propriétés grâce à sa chaîne de prototypes.</em></p>
-
-<dl>
- <dt><code>WebAssembly.RuntimeError.prototype.constructor</code></dt>
- <dd>La fonction qui a créé le prototype de l'instance.</dd>
- <dt>{{jsxref("Error.prototype.message", "WebAssembly.RuntimeError.prototype.message")}}</dt>
- <dd>Le message qui décrit l'erreur. Bien qu'ECMA-262 indique que chaque instance doit fournir sa propre propriété <code>message</code>, dans <a href="/fr/docs/Mozilla/Projects/SpiderMonkey">SpiderMonkey</a>, elle est héritée depuis {{jsxref("Error.prototype.message")}}.</dd>
- <dt>{{jsxref("Error.prototype.name", "WebAssembly.RuntimeError.prototype.name")}}</dt>
- <dd>Le nom de l'erreur. Cette propriété est héritée depuis {{jsxref("Error")}}.</dd>
- <dt>{{jsxref("Error.prototype.fileName", "WebAssembly.RuntimeError.prototype.fileName")}}</dt>
- <dd>Le chemin du fichier à l'origine de l'erreur. Cette propriété est héritée depuis {{jsxref("Error")}}.</dd>
- <dt>{{jsxref("Error.prototype.lineNumber", "WebAssembly.RuntimeError.prototype.lineNumber")}}</dt>
- <dd>Le numéro de la ligne à l'origine de l'erreur. Cette propriété est héritée depuis {{jsxref("Error")}}.</dd>
- <dt>{{jsxref("Error.prototype.columnNumber", "WebAssembly.RuntimeError.prototype.columnNumber")}}</dt>
- <dd>Le numéro de la colonne dans la ligne qui est à l'origine de l'erreur. Cette propriété est héritée depuis {{jsxref("Error")}}.</dd>
- <dt>{{jsxref("Error.prototype.stack", "WebAssembly.RuntimeError.prototype.stack")}}</dt>
- <dd>La pile d'appels à l'origine de l'erreur. Cette propriété est héritée depuis {{jsxref("Error")}}.</dd>
-</dl>
-
-<h2 id="Méthodes">Méthodes</h2>
-
-<p><em>Le constructeur <code>RuntimeError</code> ne contient aucune méthode qui lui soit propre. En revanche, il hérite de certaines méthodes grâce à sa chaîne de prototypes.</em></p>
-
-<dl>
- <dt>{{jsxref("Error.prototype.toSource", "WebAssembly.RuntimeError.prototype.toSource()")}}</dt>
- <dd>Cette méthode renvoie un code qui, évalué, entraînerait la même erreur. Elle est héritée via {{jsxref("Error")}}.</dd>
- <dt>{{jsxref("Error.prototype.toString", "WebAssembly.RuntimeError.prototype.toString()")}}</dt>
- <dd>Cette méthode renvoie une chaîne de caractères qui représente l'objet <code>Error</code>. Elle est héritée via {{jsxref("Error")}}.</dd>
-</dl>
-
-<h2 id="Exemples">Exemples</h2>
-
-<p>Dans le fragment de code qui suit, on crée une instance de <code>RuntimeError</code> et on imprime les détails de cette erreur dans la console :</p>
-
-<pre class="brush: js">try {
-  throw new WebAssembly.RuntimeError('Coucou', 'unFichier', 10);
-} catch (e) {
-  console.log(e instanceof RuntimeError); // true
-  console.log(e.message);                 // "Coucou"
-  console.log(e.name);                    // "RuntimeError"
-  console.log(e.fileName);                // "unFichier"
-  console.log(e.lineNumber);              // 10
-  console.log(e.columnNumber);            // 0
-  console.log(e.stack);                   // renvoie la pile d'appels
-                                           // à l'origine de l'erreur
-}</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('WebAssembly JS', '#constructor-properties-of-the-webassembly-object', 'WebAssembly constructors')}}</td>
-   <td>{{Spec2('WebAssembly JS')}}</td>
-   <td>Brouillon de définition initial pour WebAssembly.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-native-error-types-used-in-this-standard', 'NativeError')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td>Définition des types standards <code>NativeError</code>.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.WebAssembly.RuntimeError")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/WebAssembly">Le portail WebAssembly</a></li>
- <li><a href="/fr/docs/WebAssembly/Concepts">Les concepts relatifs à WebAssembly</a></li>
- <li><a href="/fr/docs/WebAssembly/Using_the_JavaScript_API">Utiliser l'API JavaScript WebAssembly</a></li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/webassembly/runtimeerror/index.md b/files/fr/web/javascript/reference/global_objects/webassembly/runtimeerror/index.md
new file mode 100644
index 0000000000..de39df2f33
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/webassembly/runtimeerror/index.md
@@ -0,0 +1,93 @@
+---
+title: WebAssembly.RuntimeError()
+slug: Web/JavaScript/Reference/Global_Objects/WebAssembly/RuntimeError
+tags:
+  - API
+  - Constructeur
+  - JavaScript
+  - Reference
+  - RuntimeError
+  - WebAssembly
+translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/RuntimeError
+original_slug: Web/JavaScript/Reference/Objets_globaux/WebAssembly/RuntimeError
+---
+{{JSRef}}
+
+Le constructeur **`WebAssembly.RuntimeError()`** permet de créer un nouvel objet WebAssembly `RuntimeError`. C'est ce type d'exception qui est déclenchée lorsque WebAssembly définit [une trappe](http://webassembly.org/docs/semantics/#traps).
+
+## Syntaxe
+
+    new WebAssembly.RuntimeError(message, nomFichier, numeroLigne)
+
+### Paramètres
+
+- `message` {{optional_inline}}
+  - : Une description, compréhensible par un humain, de l'erreur qui s'est produite.
+- `fileName` {{optional_inline}}{{non-standard_inline}}
+  - : Le nom du fichier qui contient le code à l'origine de l'exception.
+- `lineNumber` {{optional_inline}}{{non-standard_inline}}
+  - : Le numéro de la ligne de code à l'origine de l'exception.
+
+## Propriétés
+
+_Le constructeur `RuntimeError` ne contient aucune propriété qui lui soit propre. En revanche, il hérite de certaines propriétés grâce à sa chaîne de prototypes._
+
+- `WebAssembly.RuntimeError.prototype.constructor`
+  - : La fonction qui a créé le prototype de l'instance.
+- {{jsxref("Error.prototype.message", "WebAssembly.RuntimeError.prototype.message")}}
+  - : Le message qui décrit l'erreur. Bien qu'ECMA-262 indique que chaque instance doit fournir sa propre propriété `message`, dans [SpiderMonkey](/fr/docs/Mozilla/Projects/SpiderMonkey), elle est héritée depuis {{jsxref("Error.prototype.message")}}.
+- {{jsxref("Error.prototype.name", "WebAssembly.RuntimeError.prototype.name")}}
+  - : Le nom de l'erreur. Cette propriété est héritée depuis {{jsxref("Error")}}.
+- {{jsxref("Error.prototype.fileName", "WebAssembly.RuntimeError.prototype.fileName")}}
+  - : Le chemin du fichier à l'origine de l'erreur. Cette propriété est héritée depuis {{jsxref("Error")}}.
+- {{jsxref("Error.prototype.lineNumber", "WebAssembly.RuntimeError.prototype.lineNumber")}}
+  - : Le numéro de la ligne à l'origine de l'erreur. Cette propriété est héritée depuis {{jsxref("Error")}}.
+- {{jsxref("Error.prototype.columnNumber", "WebAssembly.RuntimeError.prototype.columnNumber")}}
+  - : Le numéro de la colonne dans la ligne qui est à l'origine de l'erreur. Cette propriété est héritée depuis {{jsxref("Error")}}.
+- {{jsxref("Error.prototype.stack", "WebAssembly.RuntimeError.prototype.stack")}}
+  - : La pile d'appels à l'origine de l'erreur. Cette propriété est héritée depuis {{jsxref("Error")}}.
+
+## Méthodes
+
+_Le constructeur `RuntimeError` ne contient aucune méthode qui lui soit propre. En revanche, il hérite de certaines méthodes grâce à sa chaîne de prototypes._
+
+- {{jsxref("Error.prototype.toSource", "WebAssembly.RuntimeError.prototype.toSource()")}}
+  - : Cette méthode renvoie un code qui, évalué, entraînerait la même erreur. Elle est héritée via {{jsxref("Error")}}.
+- {{jsxref("Error.prototype.toString", "WebAssembly.RuntimeError.prototype.toString()")}}
+  - : Cette méthode renvoie une chaîne de caractères qui représente l'objet `Error`. Elle est héritée via {{jsxref("Error")}}.
+
+## Exemples
+
+Dans le fragment de code qui suit, on crée une instance de `RuntimeError` et on imprime les détails de cette erreur dans la console :
+
+```js
+try {
+  throw new WebAssembly.RuntimeError('Coucou', 'unFichier', 10);
+} catch (e) {
+  console.log(e instanceof RuntimeError); // true
+  console.log(e.message);                 // "Coucou"
+  console.log(e.name);                    // "RuntimeError"
+  console.log(e.fileName);                // "unFichier"
+  console.log(e.lineNumber);              // 10
+  console.log(e.columnNumber);            // 0
+  console.log(e.stack);                   // renvoie la pile d'appels
+                                           // à l'origine de l'erreur
+}
+```
+
+## Spécifications
+
+| Spécification                                                                                                                                        | État                                 | Commentaires                                      |
+| ---------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------ | ------------------------------------------------- |
+| {{SpecName('WebAssembly JS', '#constructor-properties-of-the-webassembly-object', 'WebAssembly constructors')}} | {{Spec2('WebAssembly JS')}} | Brouillon de définition initial pour WebAssembly. |
+| {{SpecName('ESDraft', '#sec-native-error-types-used-in-this-standard', 'NativeError')}}                                 | {{Spec2('ESDraft')}}         | Définition des types standards `NativeError`.     |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.WebAssembly.RuntimeError")}}
+
+## Voir aussi
+
+- [Le portail WebAssembly](/fr/docs/WebAssembly)
+- [Les concepts relatifs à WebAssembly](/fr/docs/WebAssembly/Concepts)
+- [Utiliser l'API JavaScript WebAssembly](/fr/docs/WebAssembly/Using_the_JavaScript_API)
diff --git a/files/fr/web/javascript/reference/global_objects/webassembly/table/get/index.html b/files/fr/web/javascript/reference/global_objects/webassembly/table/get/index.html
deleted file mode 100644
index 717a8d70e1..0000000000
--- a/files/fr/web/javascript/reference/global_objects/webassembly/table/get/index.html
+++ /dev/null
@@ -1,84 +0,0 @@
----
-title: WebAssembly.Table.prototype.get()
-slug: Web/JavaScript/Reference/Global_Objects/WebAssembly/Table/get
-tags:
-  - API
-  - JavaScript
-  - Méthode
-  - Reference
-  - WebAssembly
-  - table
-translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/Table/get
-original_slug: Web/JavaScript/Reference/Objets_globaux/WebAssembly/Table/get
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <code><strong>get()</strong></code>, rattachéee au prototype de  {{jsxref("WebAssembly.Table()")}}, permet de récupérer une référence à une fonction stockée dans le tableau WebAssembly grâce à sa position. dans le tableau.</p>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">var funcRef = table.get(<em>index</em>);
-</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>index</code></dt>
- <dd>L'index de la référence de fonction qu'on souhaite récupérer.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Une référence de fonction, c'est-à-dire <a href="/fr/docs/WebAssembly/Exported_functions">une fonction WebAssembly exportée</a> qui est une enveloppe JavaScript pour manipuler la fonction WebAssembly sous-jacente.</p>
-
-<h3 id="Exceptions">Exceptions</h3>
-
-<p>Si <code>index</code> est supérieur ou égal à {{jsxref("WebAssembly/Table/length","Table.prototype.length")}}, la méthode lèvera une exception {{jsxref("RangeError")}}.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<p>Dans l'exemple suivant (cf. le fichier <code><a href="https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/table.html">table.html</a></code> sur GitHub ainsi que <a href="https://mdn.github.io/webassembly-examples/js-api-examples/table.html">le résultat obtenu</a>), on compile et on instancie le <em>bytecode</em> chargé, <code>table.wasm</code>, grâce à la méthode {{jsxref("WebAssembly.instantiateStreaming()")}}. On récupère ensuite les références stockées dans le tableau d'export.</p>
-
-<pre class="brush: js">WebAssembly.instantiateStreaming(fetch('table.wasm'))
-.then(function(obj) {
-  var tbl = obj.instance.exports.tbl;
-  console.log(tbl.get(0)());  // 13
-  console.log(tbl.get(1)());  // 42
-});</pre>
-
-<p>On note ici qu'il est nécessaire d'avoir un deuxième opérateur d'appel après l'accesseur pour récupérer le valeur stockée dans la référence (autrement dit, on utilise <code>get(0)()</code> plutôt que <code>get(0)</code>). La valeur exportée est une fonction plutôt qu'une valeur simple.</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('WebAssembly JS', '#webassemblytableprototypeget', 'get()')}}</td>
-   <td>{{Spec2('WebAssembly JS')}}</td>
-   <td>Brouillon de définition initial pour WebAssembly.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<div>
-
-
-<p>{{Compat("javascript.builtins.WebAssembly.Table.get")}}</p>
-</div>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/WebAssembly">Le portail WebAssembly</a></li>
- <li><a href="/fr/docs/WebAssembly/Concepts">Les concepts relatifs à WebAssembly</a></li>
- <li><a href="/fr/docs/WebAssembly/Using_the_JavaScript_API">Utiliser l'API JavaScript WebAssembly</a></li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/webassembly/table/get/index.md b/files/fr/web/javascript/reference/global_objects/webassembly/table/get/index.md
new file mode 100644
index 0000000000..3d263884fe
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/webassembly/table/get/index.md
@@ -0,0 +1,64 @@
+---
+title: WebAssembly.Table.prototype.get()
+slug: Web/JavaScript/Reference/Global_Objects/WebAssembly/Table/get
+tags:
+  - API
+  - JavaScript
+  - Méthode
+  - Reference
+  - WebAssembly
+  - table
+translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/Table/get
+original_slug: Web/JavaScript/Reference/Objets_globaux/WebAssembly/Table/get
+---
+{{JSRef}}
+
+La méthode **`get()`**, rattachéee au prototype de  {{jsxref("WebAssembly.Table()")}}, permet de récupérer une référence à une fonction stockée dans le tableau WebAssembly grâce à sa position. dans le tableau.
+
+## Syntaxe
+
+    var funcRef = table.get(index);
+
+### Paramètres
+
+- `index`
+  - : L'index de la référence de fonction qu'on souhaite récupérer.
+
+### Valeur de retour
+
+Une référence de fonction, c'est-à-dire [une fonction WebAssembly exportée](/fr/docs/WebAssembly/Exported_functions) qui est une enveloppe JavaScript pour manipuler la fonction WebAssembly sous-jacente.
+
+### Exceptions
+
+Si `index` est supérieur ou égal à {{jsxref("WebAssembly/Table/length","Table.prototype.length")}}, la méthode lèvera une exception {{jsxref("RangeError")}}.
+
+## Exemples
+
+Dans l'exemple suivant (cf. le fichier [`table.html`](https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/table.html) sur GitHub ainsi que [le résultat obtenu](https://mdn.github.io/webassembly-examples/js-api-examples/table.html)), on compile et on instancie le _bytecode_ chargé, `table.wasm`, grâce à la méthode {{jsxref("WebAssembly.instantiateStreaming()")}}. On récupère ensuite les références stockées dans le tableau d'export.
+
+```js
+WebAssembly.instantiateStreaming(fetch('table.wasm'))
+.then(function(obj) {
+  var tbl = obj.instance.exports.tbl;
+  console.log(tbl.get(0)());  // 13
+  console.log(tbl.get(1)());  // 42
+});
+```
+
+On note ici qu'il est nécessaire d'avoir un deuxième opérateur d'appel après l'accesseur pour récupérer le valeur stockée dans la référence (autrement dit, on utilise `get(0)()` plutôt que `get(0)`). La valeur exportée est une fonction plutôt qu'une valeur simple.
+
+## Spécifications
+
+| Spécification                                                                                    | État                                 | Commentaires                                      |
+| ------------------------------------------------------------------------------------------------ | ------------------------------------ | ------------------------------------------------- |
+| {{SpecName('WebAssembly JS', '#webassemblytableprototypeget', 'get()')}} | {{Spec2('WebAssembly JS')}} | Brouillon de définition initial pour WebAssembly. |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.WebAssembly.Table.get")}}
+
+## Voir aussi
+
+- [Le portail WebAssembly](/fr/docs/WebAssembly)
+- [Les concepts relatifs à WebAssembly](/fr/docs/WebAssembly/Concepts)
+- [Utiliser l'API JavaScript WebAssembly](/fr/docs/WebAssembly/Using_the_JavaScript_API)
diff --git a/files/fr/web/javascript/reference/global_objects/webassembly/table/grow/index.html b/files/fr/web/javascript/reference/global_objects/webassembly/table/grow/index.html
deleted file mode 100644
index d5356522b6..0000000000
--- a/files/fr/web/javascript/reference/global_objects/webassembly/table/grow/index.html
+++ /dev/null
@@ -1,80 +0,0 @@
----
-title: WebAssembly.Table.prototype.grow()
-slug: Web/JavaScript/Reference/Global_Objects/WebAssembly/Table/grow
-tags:
-  - API
-  - JavaScript
-  - Méthode
-  - Reference
-  - WebAssembly
-  - table
-translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/Table/grow
-original_slug: Web/JavaScript/Reference/Objets_globaux/WebAssembly/Table/grow
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <code><strong>grow()</strong></code>, rattachée au prototype de {{jsxref("WebAssembly.Table")}}, permet d'augmenter la taille du tableau WebAssembly d'un nombre d'éléments donné.</p>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">table.grow(<em>nombre</em>);
-</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>nombre</code></dt>
- <dd>Le nombre d'éléments qu'on souhaite ajouter au tableau.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>La taille du tableau avant l'agrandissement.</p>
-
-<h3 id="Exceptions">Exceptions</h3>
-
-<p>Si l'opération <code>grow()</code> échoue, pour quelque raison que ce soit, une exception {{jsxref("RangeError")}} sera levée.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<p>Dans l'exemple qui suit, on crée une instance de <code>Table</code> pour représenter un tableau WebAssembly avec une taille initiale de 2 et une taille maximale de 10.</p>
-
-<pre class="brush: js">var table = new WebAssembly.Table({ element: "anyfunc", initial: 2, maximum: 10 });</pre>
-
-<p>On étend ensuite le tableau d'une unité en utilisant la méthode <code>grow()</code> :</p>
-
-<pre class="brush: js">console.log(table.length);   // "2"
-console.log(table.grow(1));  // "2"
-console.log(table.length);   // "3"
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('WebAssembly JS', '#webassemblytableprototypegrow', 'grow()')}}</td>
-   <td>{{Spec2('WebAssembly JS')}}</td>
-   <td>Brouillon de définition initiale pour WebAssembly.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.WebAssembly.Table.grow")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/WebAssembly">Le portail WebAssembly</a></li>
- <li><a href="/fr/docs/WebAssembly/Concepts">Les concepts relatifs à WebAssembly</a></li>
- <li><a href="/fr/docs/WebAssembly/Using_the_JavaScript_API">Utiliser l'API JavaScript WebAssembly</a></li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/webassembly/table/grow/index.md b/files/fr/web/javascript/reference/global_objects/webassembly/table/grow/index.md
new file mode 100644
index 0000000000..9b8745086b
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/webassembly/table/grow/index.md
@@ -0,0 +1,65 @@
+---
+title: WebAssembly.Table.prototype.grow()
+slug: Web/JavaScript/Reference/Global_Objects/WebAssembly/Table/grow
+tags:
+  - API
+  - JavaScript
+  - Méthode
+  - Reference
+  - WebAssembly
+  - table
+translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/Table/grow
+original_slug: Web/JavaScript/Reference/Objets_globaux/WebAssembly/Table/grow
+---
+{{JSRef}}
+
+La méthode **`grow()`**, rattachée au prototype de {{jsxref("WebAssembly.Table")}}, permet d'augmenter la taille du tableau WebAssembly d'un nombre d'éléments donné.
+
+## Syntaxe
+
+    table.grow(nombre);
+
+### Paramètres
+
+- `nombre`
+  - : Le nombre d'éléments qu'on souhaite ajouter au tableau.
+
+### Valeur de retour
+
+La taille du tableau avant l'agrandissement.
+
+### Exceptions
+
+Si l'opération `grow()` échoue, pour quelque raison que ce soit, une exception {{jsxref("RangeError")}} sera levée.
+
+## Exemples
+
+Dans l'exemple qui suit, on crée une instance de `Table` pour représenter un tableau WebAssembly avec une taille initiale de 2 et une taille maximale de 10.
+
+```js
+var table = new WebAssembly.Table({ element: "anyfunc", initial: 2, maximum: 10 });
+```
+
+On étend ensuite le tableau d'une unité en utilisant la méthode `grow()` :
+
+```js
+console.log(table.length);   // "2"
+console.log(table.grow(1));  // "2"
+console.log(table.length);   // "3"
+```
+
+## Spécifications
+
+| Spécification                                                                                        | État                                 | Commentaires                                       |
+| ---------------------------------------------------------------------------------------------------- | ------------------------------------ | -------------------------------------------------- |
+| {{SpecName('WebAssembly JS', '#webassemblytableprototypegrow', 'grow()')}} | {{Spec2('WebAssembly JS')}} | Brouillon de définition initiale pour WebAssembly. |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.WebAssembly.Table.grow")}}
+
+## Voir aussi
+
+- [Le portail WebAssembly](/fr/docs/WebAssembly)
+- [Les concepts relatifs à WebAssembly](/fr/docs/WebAssembly/Concepts)
+- [Utiliser l'API JavaScript WebAssembly](/fr/docs/WebAssembly/Using_the_JavaScript_API)
diff --git a/files/fr/web/javascript/reference/global_objects/webassembly/table/index.html b/files/fr/web/javascript/reference/global_objects/webassembly/table/index.html
deleted file mode 100644
index 27df06ebb6..0000000000
--- a/files/fr/web/javascript/reference/global_objects/webassembly/table/index.html
+++ /dev/null
@@ -1,134 +0,0 @@
----
-title: WebAssembly.Table()
-slug: Web/JavaScript/Reference/Global_Objects/WebAssembly/Table
-tags:
-  - API
-  - Constructeur
-  - JavaScript
-  - Reference
-  - WebAssembly
-  - table
-translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/Table
-original_slug: Web/JavaScript/Reference/Objets_globaux/WebAssembly/Table
----
-<div>{{JSRef}}</div>
-
-<p>Le constructeur <code><strong>WebAssembly.Table()</strong></code> permet de créer un nouvel objet <code>Table</code>.</p>
-
-<p>Cet objet est une enveloppe JavaScript qui représente un tableau WebAssembly et qui contient des références à des fonctions. Un tableau créé en JavaScript ou dans du code WebAssembly sera accessible et modifiable depuis du code JavaScript et depuis du code WebAssembly.</p>
-
-<div class="note">
-<p><strong>Note :</strong> Actuellement, les tableaux WebAssembly peuvent uniquement stocker des références à des fonctions. Cette fonctionnalité sera vraisemblablement étendue par la suite.</p>
-</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">var monTableau = new WebAssembly.Table(descripteurTableau);</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>descripteurTableau</code></dt>
- <dd>Un objet composé des propriétés qui suivent :
- <dl>
-  <dt><code>element</code></dt>
-  <dd>Une chaîne de caractères qui représente le type de référence enregistrée dans le tableau. Actuellement, la seule valeur possible est <code>"anyfunc"</code> (pour indiquer des fonctions).</dd>
-  <dt><code>initial</code></dt>
-  <dd>La longueur initiale du tableau WebAssembly. Cela correspond au nombre d'éléments contenus dans le tableau.</dd>
-  <dt><code>maximum {{optional_inline}}</code></dt>
-  <dd>La taille maximale que pourra avoir tableau WebAssembly s'il est étendu.</dd>
- </dl>
- </dd>
-</dl>
-
-<h3 id="Exceptions">Exceptions</h3>
-
-<ul>
- <li>Si <code>tableDescriptor</code> n'est pas un objet, une exception {{jsxref("TypeError")}} sera levée.</li>
- <li>Si <code>maximum</code> est défini et est inférieur à <code>initial</code>, une exception {{jsxref("RangeError")}} sera levée.</li>
-</ul>
-
-<h2 id="Instances_de_Table">Instances de <code>Table</code></h2>
-
-<p>Toutes les instances <code>Table</code> héritent des propriétés <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/WebAssembly/Table/prototype">du prototype du constructeur</a> <code>Table()</code>. Ce dernier peut être utilisé afin de modifier l'ensemble des instances <code>Table</code>.</p>
-
-<h3 id="Propriétés">Propriétés</h3>
-
-<dl>
- <dt><code>Table.prototype.constructor</code></dt>
- <dd>Renvoie la fonction qui a créé l'instance. Par défaut, c'est le constructeur {{jsxref("WebAssembly.Table()")}}.</dd>
- <dt>{{jsxref("WebAssembly/Table/length","Table.prototype.length")}}</dt>
- <dd>Renvoie la longueur du tableau, c'est-à-dire le nombre de références qui sont enregistrées dans le tableau.</dd>
-</dl>
-
-<h3 id="Méthodes">Méthodes</h3>
-
-<dl>
- <dt>{{jsxref("WebAssembly/Table/get","Table.prototype.get()")}}</dt>
- <dd>Une fonction d'accès qui permet d'obtenir l'élément du tableau situé à une position donnée.</dd>
- <dt>{{jsxref("WebAssembly/Table/grow","Table.prototype.grow()")}}</dt>
- <dd>Cette méthode permet d'augmenter la taille du tableau <code>Tabl</code><code>e</code> d'un incrément donné.</dd>
- <dt>{{jsxref("WebAssembly/Table/set","Table.prototype.set()")}}</dt>
- <dd>Cette méthode permet de modifier un élément du tableau situé à une position donnée.</dd>
-</dl>
-
-<h2 id="Exemples">Exemples</h2>
-
-<p>Dans l'exemple qui suit (tiré du fichier <a href="https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/table2.html">table2.html</a> et qui dispose <a href="https://mdn.github.io/webassembly-examples/js-api-examples/table2.html">d'une démonstration</a>), on crée une nouvelle instance d'un tableau WebAssembly avec une taille initiale permettant de stocker 2 références. Ensuite, on imprime la longueur du tableau et le contenu des deux éléments (obtenus grâce à la méthode {{jsxref("WebAssembly/Table/get", "Table.prototype.get()")}} afin de montrer que la longueur vaut 2 et que le tableau ne contient encore aucune référence de fonction (pour les deux positions, on a la valeur {{jsxref("null")}}).</p>
-
-<pre class="brush: js">var tbl = new WebAssembly.Table({initial:2, element:"anyfunc"});
-console.log(tbl.length);
-console.log(tbl.get(0));
-console.log(tbl.get(1));</pre>
-
-<p>Ensuite, on crée un objet d'import qui contient une référence au tableau :</p>
-
-<pre class="brush: js">var importObj = {
-  js: {
-    tbl:tbl
-  }
-};</pre>
-
-<p>Enfin, on charge et on instancie un module WebAssembly (table2.wasm) grâce à la fonction {{jsxref("WebAssembly.instantiateStreaming()")}}. Le module <code>table2.wasm</code> a ajouté deux références de fonctions (cf. <a href="https://github.com/mdn/webassembly-examples/blob/0991effbbf2e2cce38a7dbadebd2f3495e3f4e07/js-api-examples/table2.wat">sa représentation textuelle</a>). Chacune de ces fonctions fournit une valeur simple :</p>
-
-<pre class="brush: js">WebAssembly.instantiateStreaming(fetch('table2.wasm'), importObject)
-.then(function(obj) {
-  console.log(tbl.length);   // "2"
-  console.log(tbl.get(0)()); // "42"
-  console.log(tbl.get(1)()); // "83"
-});</pre>
-
-<p>On voit ici qu'il faut d'abord récupérer la fonction puis effectuer une invocation pour obtenir la valeur correspondante à partir de l'accesseur (autrement dit, on écrit <code>get(0)()</code> plutôt que <code>get(0)</code> pour obtenir le résultat de la fonction) .</p>
-
-<p>Dans cet exemple, on voit comment créer et manipuler le tableau depuis du code JavaScript mais ce même tableau est également accessible depuis l'instance WebAssembly.</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('WebAssembly JS', '#webassemblytable-objects', 'Table')}}</td>
-   <td>{{Spec2('WebAssembly JS')}}</td>
-   <td>Brouillon de définition initial pour WebAssembly.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.WebAssembly.Table")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/WebAssembly">Le portail WebAssembly</a></li>
- <li><a href="/fr/docs/WebAssembly/Concepts">Les concepts relatifs à WebAssembly</a></li>
- <li><a href="/fr/docs/WebAssembly/Using_the_JavaScript_API">Utiliser l'API JavaScript WebAssembly</a></li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/webassembly/table/index.md b/files/fr/web/javascript/reference/global_objects/webassembly/table/index.md
new file mode 100644
index 0000000000..6e2380a974
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/webassembly/table/index.md
@@ -0,0 +1,114 @@
+---
+title: WebAssembly.Table()
+slug: Web/JavaScript/Reference/Global_Objects/WebAssembly/Table
+tags:
+  - API
+  - Constructeur
+  - JavaScript
+  - Reference
+  - WebAssembly
+  - table
+translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/Table
+original_slug: Web/JavaScript/Reference/Objets_globaux/WebAssembly/Table
+---
+{{JSRef}}
+
+Le constructeur **`WebAssembly.Table()`** permet de créer un nouvel objet `Table`.
+
+Cet objet est une enveloppe JavaScript qui représente un tableau WebAssembly et qui contient des références à des fonctions. Un tableau créé en JavaScript ou dans du code WebAssembly sera accessible et modifiable depuis du code JavaScript et depuis du code WebAssembly.
+
+> **Note :** Actuellement, les tableaux WebAssembly peuvent uniquement stocker des références à des fonctions. Cette fonctionnalité sera vraisemblablement étendue par la suite.
+
+## Syntaxe
+
+    var monTableau = new WebAssembly.Table(descripteurTableau);
+
+### Paramètres
+
+- `descripteurTableau`
+
+  - : Un objet composé des propriétés qui suivent :
+
+    - `element`
+      - : Une chaîne de caractères qui représente le type de référence enregistrée dans le tableau. Actuellement, la seule valeur possible est `"anyfunc"` (pour indiquer des fonctions).
+    - `initial`
+      - : La longueur initiale du tableau WebAssembly. Cela correspond au nombre d'éléments contenus dans le tableau.
+    - `maximum {{optional_inline}}`
+      - : La taille maximale que pourra avoir tableau WebAssembly s'il est étendu.
+
+### Exceptions
+
+- Si `tableDescriptor` n'est pas un objet, une exception {{jsxref("TypeError")}} sera levée.
+- Si `maximum` est défini et est inférieur à `initial`, une exception {{jsxref("RangeError")}} sera levée.
+
+## Instances de `Table`
+
+Toutes les instances `Table` héritent des propriétés [du prototype du constructeur](/fr/docs/Web/JavaScript/Reference/Objets_globaux/WebAssembly/Table/prototype) `Table()`. Ce dernier peut être utilisé afin de modifier l'ensemble des instances `Table`.
+
+### Propriétés
+
+- `Table.prototype.constructor`
+  - : Renvoie la fonction qui a créé l'instance. Par défaut, c'est le constructeur {{jsxref("WebAssembly.Table()")}}.
+- {{jsxref("WebAssembly/Table/length","Table.prototype.length")}}
+  - : Renvoie la longueur du tableau, c'est-à-dire le nombre de références qui sont enregistrées dans le tableau.
+
+### Méthodes
+
+- {{jsxref("WebAssembly/Table/get","Table.prototype.get()")}}
+  - : Une fonction d'accès qui permet d'obtenir l'élément du tableau situé à une position donnée.
+- {{jsxref("WebAssembly/Table/grow","Table.prototype.grow()")}}
+  - : Cette méthode permet d'augmenter la taille du tableau ` Tabl``e ` d'un incrément donné.
+- {{jsxref("WebAssembly/Table/set","Table.prototype.set()")}}
+  - : Cette méthode permet de modifier un élément du tableau situé à une position donnée.
+
+## Exemples
+
+Dans l'exemple qui suit (tiré du fichier [table2.html](https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/table2.html) et qui dispose [d'une démonstration](https://mdn.github.io/webassembly-examples/js-api-examples/table2.html)), on crée une nouvelle instance d'un tableau WebAssembly avec une taille initiale permettant de stocker 2 références. Ensuite, on imprime la longueur du tableau et le contenu des deux éléments (obtenus grâce à la méthode {{jsxref("WebAssembly/Table/get", "Table.prototype.get()")}} afin de montrer que la longueur vaut 2 et que le tableau ne contient encore aucune référence de fonction (pour les deux positions, on a la valeur {{jsxref("null")}}).
+
+```js
+var tbl = new WebAssembly.Table({initial:2, element:"anyfunc"});
+console.log(tbl.length);
+console.log(tbl.get(0));
+console.log(tbl.get(1));
+```
+
+Ensuite, on crée un objet d'import qui contient une référence au tableau :
+
+```js
+var importObj = {
+  js: {
+    tbl:tbl
+  }
+};
+```
+
+Enfin, on charge et on instancie un module WebAssembly (table2.wasm) grâce à la fonction {{jsxref("WebAssembly.instantiateStreaming()")}}. Le module `table2.wasm` a ajouté deux références de fonctions (cf. [sa représentation textuelle](https://github.com/mdn/webassembly-examples/blob/0991effbbf2e2cce38a7dbadebd2f3495e3f4e07/js-api-examples/table2.wat)). Chacune de ces fonctions fournit une valeur simple :
+
+```js
+WebAssembly.instantiateStreaming(fetch('table2.wasm'), importObject)
+.then(function(obj) {
+  console.log(tbl.length);   // "2"
+  console.log(tbl.get(0)()); // "42"
+  console.log(tbl.get(1)()); // "83"
+});
+```
+
+On voit ici qu'il faut d'abord récupérer la fonction puis effectuer une invocation pour obtenir la valeur correspondante à partir de l'accesseur (autrement dit, on écrit `get(0)()` plutôt que `get(0)` pour obtenir le résultat de la fonction) .
+
+Dans cet exemple, on voit comment créer et manipuler le tableau depuis du code JavaScript mais ce même tableau est également accessible depuis l'instance WebAssembly.
+
+## Spécifications
+
+| Spécification                                                                                | État                                 | Commentaires                                      |
+| -------------------------------------------------------------------------------------------- | ------------------------------------ | ------------------------------------------------- |
+| {{SpecName('WebAssembly JS', '#webassemblytable-objects', 'Table')}} | {{Spec2('WebAssembly JS')}} | Brouillon de définition initial pour WebAssembly. |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.WebAssembly.Table")}}
+
+## Voir aussi
+
+- [Le portail WebAssembly](/fr/docs/WebAssembly)
+- [Les concepts relatifs à WebAssembly](/fr/docs/WebAssembly/Concepts)
+- [Utiliser l'API JavaScript WebAssembly](/fr/docs/WebAssembly/Using_the_JavaScript_API)
diff --git a/files/fr/web/javascript/reference/global_objects/webassembly/table/length/index.html b/files/fr/web/javascript/reference/global_objects/webassembly/table/length/index.html
deleted file mode 100644
index 878447d1e1..0000000000
--- a/files/fr/web/javascript/reference/global_objects/webassembly/table/length/index.html
+++ /dev/null
@@ -1,65 +0,0 @@
----
-title: WebAssembly.Table.prototype.length
-slug: Web/JavaScript/Reference/Global_Objects/WebAssembly/Table/length
-tags:
-  - API
-  - JavaScript
-  - Propriété
-  - Reference
-  - WebAssembly
-  - table
-translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/Table/length
-original_slug: Web/JavaScript/Reference/Objets_globaux/WebAssembly/Table/length
----
-<div>{{JSRef}}</div>
-
-<p>La propriété <code><strong>length</strong></code>, rattachée au prototype de l'objet {{jsxref("WebAssembly.Table")}}, renvoie la longueur du tableau WebAssembly, c'est-à-dire le nombre d'éléments qui y sont stockées.</p>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">table.length;
-</pre>
-
-<h2 id="Exemples">Exemples</h2>
-
-<p>Avec l'instruction qui suit, on crée un tableau WebAssembly avec une taille initiale de 2 éléments et avec une taille maximale de 10.</p>
-
-<pre class="brush: js">var table = new WebAssembly.Table({ element: "anyfunc", initial: 2, maximum: 10 });</pre>
-
-<p>On peut ensuite étendre le tableau d'un élément :</p>
-
-<pre class="brush: js">console.log(table.length);   // "2"
-console.log(table.grow(1));  // "2"
-console.log(table.length);   // "3"
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('WebAssembly JS', '#webassemblytableprototypelength', 'length')}}</td>
-   <td>{{Spec2('WebAssembly JS')}}</td>
-   <td>Brouillon de définition initiale pour WebAssembly.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.WebAssembly.Table.length")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/WebAssembly">Le portail WebAssembly</a></li>
- <li><a href="/fr/docs/WebAssembly/Concepts">Les concepts relatifs à WebAssembly</a></li>
- <li><a href="/fr/docs/WebAssembly/Using_the_JavaScript_API">Utiliser l'API JavaScript WebAssembly</a></li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/webassembly/table/length/index.md b/files/fr/web/javascript/reference/global_objects/webassembly/table/length/index.md
new file mode 100644
index 0000000000..6812a496a5
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/webassembly/table/length/index.md
@@ -0,0 +1,52 @@
+---
+title: WebAssembly.Table.prototype.length
+slug: Web/JavaScript/Reference/Global_Objects/WebAssembly/Table/length
+tags:
+  - API
+  - JavaScript
+  - Propriété
+  - Reference
+  - WebAssembly
+  - table
+translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/Table/length
+original_slug: Web/JavaScript/Reference/Objets_globaux/WebAssembly/Table/length
+---
+{{JSRef}}
+
+La propriété **`length`**, rattachée au prototype de l'objet {{jsxref("WebAssembly.Table")}}, renvoie la longueur du tableau WebAssembly, c'est-à-dire le nombre d'éléments qui y sont stockées.
+
+## Syntaxe
+
+    table.length;
+
+## Exemples
+
+Avec l'instruction qui suit, on crée un tableau WebAssembly avec une taille initiale de 2 éléments et avec une taille maximale de 10.
+
+```js
+var table = new WebAssembly.Table({ element: "anyfunc", initial: 2, maximum: 10 });
+```
+
+On peut ensuite étendre le tableau d'un élément :
+
+```js
+console.log(table.length);   // "2"
+console.log(table.grow(1));  // "2"
+console.log(table.length);   // "3"
+```
+
+## Spécifications
+
+| Spécification                                                                                        | État                                 | Commentaires                                       |
+| ---------------------------------------------------------------------------------------------------- | ------------------------------------ | -------------------------------------------------- |
+| {{SpecName('WebAssembly JS', '#webassemblytableprototypelength', 'length')}} | {{Spec2('WebAssembly JS')}} | Brouillon de définition initiale pour WebAssembly. |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.WebAssembly.Table.length")}}
+
+## Voir aussi
+
+- [Le portail WebAssembly](/fr/docs/WebAssembly)
+- [Les concepts relatifs à WebAssembly](/fr/docs/WebAssembly/Concepts)
+- [Utiliser l'API JavaScript WebAssembly](/fr/docs/WebAssembly/Using_the_JavaScript_API)
diff --git a/files/fr/web/javascript/reference/global_objects/webassembly/table/set/index.html b/files/fr/web/javascript/reference/global_objects/webassembly/table/set/index.html
deleted file mode 100644
index 5413168f5e..0000000000
--- a/files/fr/web/javascript/reference/global_objects/webassembly/table/set/index.html
+++ /dev/null
@@ -1,102 +0,0 @@
----
-title: WebAssembly.Table.prototype.set()
-slug: Web/JavaScript/Reference/Global_Objects/WebAssembly/Table/set
-tags:
-  - API
-  - JavaScript
-  - Méthode
-  - Reference
-  - WebAssembly
-  - table
-translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/Table/set
-original_slug: Web/JavaScript/Reference/Objets_globaux/WebAssembly/Table/set
----
-<div>{{JSRef}}</div>
-
-<p>La méthode <code><strong>set()</strong></code>, rattachée au prototype de {{jsxref("WebAssembly.Table")}}, permet de modifier une référence de fonction stockée dans un tableau WebAssembly.</p>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">table.set(<em>index</em>, <em>valeur</em>);
-</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>index</code></dt>
- <dd>L'index de la référence de la fonction qu'on souhaite modifier.</dd>
- <dt><code>valeur</code></dt>
- <dd>La valeur par laquelle on souhaite remplacer la référence. Cette valeur doit être <a href="/fr/docs/WebAssembly/Exported_functions">une fonction exportée WebAssembly</a> (c'est-à-dire une enveloppe JavaScript représentant une fonction WebAssembly sous-jacente).</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Aucune.</p>
-
-<h3 id="Exceptions">Exceptions</h3>
-
-<ul>
- <li>Si <code>index</code> est supérieur ou égal à {{jsxref("WebAssembly/Table/length","Table.prototype.length")}}, une exception {{jsxref("RangeError")}} sera levée.</li>
- <li>Si <code>valeur</code> n'est pas une fonction WebAssembly exportée ou la valeur {{jsxref("null")}}, une exception {{jsxref("TypeError")}} sera levée.</li>
-</ul>
-
-<h2 id="Exemples">Exemples</h2>
-
-<p>Dans l'exemple qui suit (basé sur le <a href="https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/table2.html">code source de <code>table2.html</code></a> et qui dispose <a href="https://mdn.github.io/webassembly-examples/js-api-examples/table2.html">d'une démonstration</a>), on crée ue nouvelle instance d'un tableau WebAssembly (<code>Table</code>) qui permet initialement de stocker 2 référence. On imprime alors la longueur du tableau dans la console ainsi que le contenu pour les deux premiers index (obtenus grâce à la méthode {{jsxref("WebAssembly/Table/get","Table.prototype.get()")}}) afin de montrer qu la longueur vaut 2 et qu'initialement, les deux éléments du tableau ne contiennent aucune référence (ils ont tous les deux la valeur {{jsxref("null")}}).</p>
-
-<pre class="brush: js">var tbl = new WebAssembly.Table({initial:2, element:"anyfunc"});
-console.log(tbl.length);
-console.log(tbl.get(0));
-console.log(tbl.get(1));</pre>
-
-<p>On crée ensuite un objet d'import qui contient une référence au tableau :</p>
-
-<pre class="brush: js">var importObj = {
-  js: {
-    tbl:tbl
-  }
-};</pre>
-
-<p>Enfin, on charge et on instancie le module WebAssembly (<code>table2.wasm</code>) grâce à la méthode {{jsxref("WebAssembly.instantiateStreaming()")}}, on logge la longueur du tableau et on appelle les deux fonctions référencées qui sont désormais dans le tableau (le module <code>table2.wasm</code> (cf. <a href="https://github.com/mdn/webassembly-examples/blob/master/text-format-examples/table2.was">la représentation textuelle</a>) ajoute deux références de fonctions au tableau et chacune affiche une valeur simple) :</p>
-
-<pre class="brush: js">WebAssembly.instantiateStreaming(fetch('table2.wasm'), importObject)
-.then(function(obj) {
-  console.log(tbl.length);
-  console.log(tbl.get(0)());
-  console.log(tbl.get(1)());
-});</pre>
-
-<p>On voit ici qu'il faut appeler la fonction après avoir appeler l'opérateur sur l'accesseur (autrement dit, on écrit <code>get(0)()</code> plutôt que <code>get(0)</code>) .</p>
-
-<p>Dans cet exemple, on montre comment créer et manipuler un tableau en JavaScript mais ce tableau est également accessible et manipulable depuis l'instance WebAssembly.</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('WebAssembly JS', '#webassemblytableprototypeset', 'set()')}}</td>
-   <td>{{Spec2('WebAssembly JS')}}</td>
-   <td>Brouillon de définition initiale pour WebAssembly.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.WebAssembly.Table.set")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/WebAssembly">Le portail WebAssembly</a></li>
- <li><a href="/fr/docs/WebAssembly/Concepts">Les concepts relatifs à WebAssembly</a></li>
- <li><a href="/fr/docs/WebAssembly/Using_the_JavaScript_API">Utiliser l'API JavaScript WebAssembly</a></li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/webassembly/table/set/index.md b/files/fr/web/javascript/reference/global_objects/webassembly/table/set/index.md
new file mode 100644
index 0000000000..4b1ca9f3f1
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/webassembly/table/set/index.md
@@ -0,0 +1,88 @@
+---
+title: WebAssembly.Table.prototype.set()
+slug: Web/JavaScript/Reference/Global_Objects/WebAssembly/Table/set
+tags:
+  - API
+  - JavaScript
+  - Méthode
+  - Reference
+  - WebAssembly
+  - table
+translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/Table/set
+original_slug: Web/JavaScript/Reference/Objets_globaux/WebAssembly/Table/set
+---
+{{JSRef}}
+
+La méthode **`set()`**, rattachée au prototype de {{jsxref("WebAssembly.Table")}}, permet de modifier une référence de fonction stockée dans un tableau WebAssembly.
+
+## Syntaxe
+
+    table.set(index, valeur);
+
+### Paramètres
+
+- `index`
+  - : L'index de la référence de la fonction qu'on souhaite modifier.
+- `valeur`
+  - : La valeur par laquelle on souhaite remplacer la référence. Cette valeur doit être [une fonction exportée WebAssembly](/fr/docs/WebAssembly/Exported_functions) (c'est-à-dire une enveloppe JavaScript représentant une fonction WebAssembly sous-jacente).
+
+### Valeur de retour
+
+Aucune.
+
+### Exceptions
+
+- Si `index` est supérieur ou égal à {{jsxref("WebAssembly/Table/length","Table.prototype.length")}}, une exception {{jsxref("RangeError")}} sera levée.
+- Si `valeur` n'est pas une fonction WebAssembly exportée ou la valeur {{jsxref("null")}}, une exception {{jsxref("TypeError")}} sera levée.
+
+## Exemples
+
+Dans l'exemple qui suit (basé sur le [code source de `table2.html`](https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/table2.html) et qui dispose [d'une démonstration](https://mdn.github.io/webassembly-examples/js-api-examples/table2.html)), on crée ue nouvelle instance d'un tableau WebAssembly (`Table`) qui permet initialement de stocker 2 référence. On imprime alors la longueur du tableau dans la console ainsi que le contenu pour les deux premiers index (obtenus grâce à la méthode {{jsxref("WebAssembly/Table/get","Table.prototype.get()")}}) afin de montrer qu la longueur vaut 2 et qu'initialement, les deux éléments du tableau ne contiennent aucune référence (ils ont tous les deux la valeur {{jsxref("null")}}).
+
+```js
+var tbl = new WebAssembly.Table({initial:2, element:"anyfunc"});
+console.log(tbl.length);
+console.log(tbl.get(0));
+console.log(tbl.get(1));
+```
+
+On crée ensuite un objet d'import qui contient une référence au tableau :
+
+```js
+var importObj = {
+  js: {
+    tbl:tbl
+  }
+};
+```
+
+Enfin, on charge et on instancie le module WebAssembly (`table2.wasm`) grâce à la méthode {{jsxref("WebAssembly.instantiateStreaming()")}}, on logge la longueur du tableau et on appelle les deux fonctions référencées qui sont désormais dans le tableau (le module `table2.wasm` (cf. [la représentation textuelle](https://github.com/mdn/webassembly-examples/blob/master/text-format-examples/table2.was)) ajoute deux références de fonctions au tableau et chacune affiche une valeur simple) :
+
+```js
+WebAssembly.instantiateStreaming(fetch('table2.wasm'), importObject)
+.then(function(obj) {
+  console.log(tbl.length);
+  console.log(tbl.get(0)());
+  console.log(tbl.get(1)());
+});
+```
+
+On voit ici qu'il faut appeler la fonction après avoir appeler l'opérateur sur l'accesseur (autrement dit, on écrit `get(0)()` plutôt que `get(0)`) .
+
+Dans cet exemple, on montre comment créer et manipuler un tableau en JavaScript mais ce tableau est également accessible et manipulable depuis l'instance WebAssembly.
+
+## Spécifications
+
+| Spécification                                                                                    | État                                 | Commentaires                                       |
+| ------------------------------------------------------------------------------------------------ | ------------------------------------ | -------------------------------------------------- |
+| {{SpecName('WebAssembly JS', '#webassemblytableprototypeset', 'set()')}} | {{Spec2('WebAssembly JS')}} | Brouillon de définition initiale pour WebAssembly. |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.WebAssembly.Table.set")}}
+
+## Voir aussi
+
+- [Le portail WebAssembly](/fr/docs/WebAssembly)
+- [Les concepts relatifs à WebAssembly](/fr/docs/WebAssembly/Concepts)
+- [Utiliser l'API JavaScript WebAssembly](/fr/docs/WebAssembly/Using_the_JavaScript_API)
diff --git a/files/fr/web/javascript/reference/global_objects/webassembly/validate/index.html b/files/fr/web/javascript/reference/global_objects/webassembly/validate/index.html
deleted file mode 100644
index df8887431d..0000000000
--- a/files/fr/web/javascript/reference/global_objects/webassembly/validate/index.html
+++ /dev/null
@@ -1,78 +0,0 @@
----
-title: WebAssembly.validate()
-slug: Web/JavaScript/Reference/Global_Objects/WebAssembly/validate
-tags:
-  - API
-  - JavaScript
-  - Méthode
-  - Reference
-  - WebAssembly
-translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/validate
-original_slug: Web/JavaScript/Reference/Objets_globaux/WebAssembly/validate
----
-<div>{{JSRef}}</div>
-
-<p>La fonction <strong><code>WebAssembly.validate()</code></strong> permet de valider un <a href="/fr/docs/Web/JavaScript/Tableaux_typés">tableau typé</a> de <em>bytecode</em> WebAssembly et renvoie un booléen qui indique si le contenu du tableau forme un module WebAssembly valide (<code>true</code>) ou non (<code>false</code>).</p>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">WebAssembly.validate(bufferSource);</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>bufferSource</code></dt>
- <dd>Un <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/TypedArray">tableau typé</a> ou un {{jsxref("ArrayBuffer")}} qui contient le <em>bytecode</em> du module qu'on souhaite valider.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Un booléen qui indique si la source est un code WebAssembly valide (<code>true</code>) ou non (<code>false</code>).</p>
-
-<h3 id="Exceptions">Exceptions</h3>
-
-<p>Si la valeur passée en argument n'est pas un tableau typé ou un {{jsxref("ArrayBuffer")}}, une exception {{jsxref("TypeError")}} sera levée.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<p>Dans l'exemple suivant, (cf. le fichier <code>validate.html</code> du <a href="https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/validate.html">code source</a>, ainsi que <a href="https://mdn.github.io/webassembly-examples/js-api-examples/validate.html">l'exemple <em>live</em></a>), on récupère un module .wasm et on le convertit en un tableau typé. Ensuite, on appelle la méthode <code>validate()</code> afin de vérifier si le module est valide.</p>
-
-<pre class="brush: js">fetch('simple.wasm').then(response =&gt;
-  response.arrayBuffer()
-).then(function(bytes) {
-  var valid = WebAssembly.validate(bytes);
-  console.log("Les octets forment un module "
-    + (valid ? "" : "in") + "valide.");
-});
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('WebAssembly JS', '#webassemblyvalidate', 'validate()')}}</td>
-   <td>{{Spec2('WebAssembly JS')}}</td>
-   <td>Brouillon de définition initiale pour WebAssembly.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.WebAssembly.validate")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/WebAssembly">Le portail WebAssembly</a></li>
- <li><a href="/fr/docs/WebAssembly/Concepts">Les concepts relatifs à WebAssembly</a></li>
- <li><a href="/fr/docs/WebAssembly/Using_the_JavaScript_API">Utiliser l'API JavaScript WebAssembly</a></li>
-</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/webassembly/validate/index.md b/files/fr/web/javascript/reference/global_objects/webassembly/validate/index.md
new file mode 100644
index 0000000000..2098e3eb62
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/webassembly/validate/index.md
@@ -0,0 +1,62 @@
+---
+title: WebAssembly.validate()
+slug: Web/JavaScript/Reference/Global_Objects/WebAssembly/validate
+tags:
+  - API
+  - JavaScript
+  - Méthode
+  - Reference
+  - WebAssembly
+translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/validate
+original_slug: Web/JavaScript/Reference/Objets_globaux/WebAssembly/validate
+---
+{{JSRef}}
+
+La fonction **`WebAssembly.validate()`** permet de valider un [tableau typé](/fr/docs/Web/JavaScript/Tableaux_typés) de _bytecode_ WebAssembly et renvoie un booléen qui indique si le contenu du tableau forme un module WebAssembly valide (`true`) ou non (`false`).
+
+## Syntaxe
+
+    WebAssembly.validate(bufferSource);
+
+### Paramètres
+
+- `bufferSource`
+  - : Un [tableau typé](/fr/docs/Web/JavaScript/Reference/Objets_globaux/TypedArray) ou un {{jsxref("ArrayBuffer")}} qui contient le _bytecode_ du module qu'on souhaite valider.
+
+### Valeur de retour
+
+Un booléen qui indique si la source est un code WebAssembly valide (`true`) ou non (`false`).
+
+### Exceptions
+
+Si la valeur passée en argument n'est pas un tableau typé ou un {{jsxref("ArrayBuffer")}}, une exception {{jsxref("TypeError")}} sera levée.
+
+## Exemples
+
+Dans l'exemple suivant, (cf. le fichier `validate.html` du [code source](https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/validate.html), ainsi que [l'exemple _live_](https://mdn.github.io/webassembly-examples/js-api-examples/validate.html)), on récupère un module .wasm et on le convertit en un tableau typé. Ensuite, on appelle la méthode `validate()` afin de vérifier si le module est valide.
+
+```js
+fetch('simple.wasm').then(response =>
+  response.arrayBuffer()
+).then(function(bytes) {
+  var valid = WebAssembly.validate(bytes);
+  console.log("Les octets forment un module "
+    + (valid ? "" : "in") + "valide.");
+});
+```
+
+## Spécifications
+
+| Spécification                                                                                | État                                 | Commentaires                                       |
+| -------------------------------------------------------------------------------------------- | ------------------------------------ | -------------------------------------------------- |
+| {{SpecName('WebAssembly JS', '#webassemblyvalidate', 'validate()')}} | {{Spec2('WebAssembly JS')}} | Brouillon de définition initiale pour WebAssembly. |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.WebAssembly.validate")}}
+
+## Voir aussi
+
+- [Le portail WebAssembly](/fr/docs/WebAssembly)
+- [Les concepts relatifs à WebAssembly](/fr/docs/WebAssembly/Concepts)
+- [Utiliser l'API JavaScript WebAssembly](/fr/docs/WebAssembly/Using_the_JavaScript_API)
diff --git a/files/fr/web/javascript/reference/index.html b/files/fr/web/javascript/reference/index.html
deleted file mode 100644
index 96f86980b6..0000000000
--- a/files/fr/web/javascript/reference/index.html
+++ /dev/null
@@ -1,50 +0,0 @@
----
-title: Référence JavaScript
-slug: Web/JavaScript/Reference
-tags:
-  - ECMAScript
-  - JavaScript
-  - Reference
-translation_of: Web/JavaScript/Reference
----
-<div>{{JsSidebar}}</div>
-
-<p>Cette partie de la section JavaScript de MDN regroupe plusieurs notions sur le langage JavaScript. En savoir plus <a href="/fr/docs/Web/JavaScript/Reference/A_propos">à propos de cette référence</a>.</p>
-
-<h2 id="Les_objets_globaux">Les objets globaux</h2>
-
-<p>Ce chapitre documente l'ensemble des <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux">objets natifs standards JavaScript </a>ainsi que leurs méthodes et leurs propriétés.</p>
-
-<div>{{page('/fr/docs/Web/JavaScript/Reference/Objets_globaux', 'Objets_globaux_standards_(par_catégorie)')}}</div>
-
-<h2 id="Les_instructions">Les instructions</h2>
-
-<p>Ce chapitre documente les différentes <a href="/fr/docs/Web/JavaScript/Reference/Instructions">instructions et déclarations JavaScript</a>.</p>
-
-<div>{{page('/fr/docs/Web/JavaScript/Reference/Instructions', 'Instructions_et_déclarations_par_catégorie')}}</div>
-
-<h2 id="Les_expressions_et_opérateurs">Les expressions et opérateurs</h2>
-
-<p>Ce chapitre documente l'ensemble des <a href="/fr/docs/JavaScript/Reference/Op%C3%A9rateurs">expressions et opérateurs JavaScript</a>.</p>
-
-<div>{{page('/fr/docs/JavaScript/Reference/Opérateurs', 'Expressions_et_opérateurs_par_catégorie')}}</div>
-
-<h2 id="Les_fonctions">Les fonctions</h2>
-
-<p>Ce chapitre aborde les manières de travailler avec <a href="/fr/docs/Web/JavaScript/Reference/Fonctions">les fonctions JavaScript</a> pour développer vos applications.</p>
-
-<ul>
- <li><a href="/fr/docs/Web/JavaScript/Reference/Fonctions/arguments"><code>arguments</code></a></li>
- <li><a href="/fr/docs/Web/JavaScript/Reference/Fonctions/Fonctions_fl%C3%A9ch%C3%A9es">Les fonctions fléchées</a></li>
- <li><a href="/fr/docs/Web/JavaScript/Reference/Fonctions/Valeurs_par_défaut_des_arguments">Les paramètres par défaut</a></li>
- <li><a href="/fr/docs/Web/JavaScript/Reference/Fonctions/param%C3%A8tres_du_reste">Les paramètres du reste</a></li>
-</ul>
-
-<h2 id="Autres_pages_de_référence">Autres pages de référence</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/JavaScript/Reference/Grammaire_lexicale">Grammaire lexicale de JavaScript</a></li>
- <li><a href="/fr/docs/Web/JavaScript/Structures_de_donn%C3%A9es">Les types de données et les structures de données</a></li>
- <li><a href="/fr/docs/Web/JavaScript/Reference/Strict_mode">Le mode strict</a></li>
- <li><a href="/fr/docs/JavaScript/Reference/Annexes/Fonctionnalités_dépréciées">Les fonctionnalités obsolètes</a></li>
-</ul>
diff --git a/files/fr/web/javascript/reference/index.md b/files/fr/web/javascript/reference/index.md
new file mode 100644
index 0000000000..2ab690bbe3
--- /dev/null
+++ b/files/fr/web/javascript/reference/index.md
@@ -0,0 +1,46 @@
+---
+title: Référence JavaScript
+slug: Web/JavaScript/Reference
+tags:
+  - ECMAScript
+  - JavaScript
+  - Reference
+translation_of: Web/JavaScript/Reference
+---
+{{JsSidebar}}
+
+Cette partie de la section JavaScript de MDN regroupe plusieurs notions sur le langage JavaScript. En savoir plus [à propos de cette référence](/fr/docs/Web/JavaScript/Reference/A_propos).
+
+## Les objets globaux
+
+Ce chapitre documente l'ensemble des [objets natifs standards JavaScript ](/fr/docs/Web/JavaScript/Reference/Objets_globaux)ainsi que leurs méthodes et leurs propriétés.
+
+{{page('/fr/docs/Web/JavaScript/Reference/Objets_globaux', 'Objets_globaux_standards_(par_catégorie)')}}
+
+## Les instructions
+
+Ce chapitre documente les différentes [instructions et déclarations JavaScript](/fr/docs/Web/JavaScript/Reference/Instructions).
+
+{{page('/fr/docs/Web/JavaScript/Reference/Instructions', 'Instructions_et_déclarations_par_catégorie')}}
+
+## Les expressions et opérateurs
+
+Ce chapitre documente l'ensemble des [expressions et opérateurs JavaScript](/fr/docs/JavaScript/Reference/Op%C3%A9rateurs).
+
+{{page('/fr/docs/JavaScript/Reference/Opérateurs', 'Expressions_et_opérateurs_par_catégorie')}}
+
+## Les fonctions
+
+Ce chapitre aborde les manières de travailler avec [les fonctions JavaScript](/fr/docs/Web/JavaScript/Reference/Fonctions) pour développer vos applications.
+
+- [`arguments`](/fr/docs/Web/JavaScript/Reference/Fonctions/arguments)
+- [Les fonctions fléchées](/fr/docs/Web/JavaScript/Reference/Fonctions/Fonctions_fl%C3%A9ch%C3%A9es)
+- [Les paramètres par défaut](/fr/docs/Web/JavaScript/Reference/Fonctions/Valeurs_par_défaut_des_arguments)
+- [Les paramètres du reste](/fr/docs/Web/JavaScript/Reference/Fonctions/param%C3%A8tres_du_reste)
+
+## Autres pages de référence
+
+- [Grammaire lexicale de JavaScript](/fr/docs/Web/JavaScript/Reference/Grammaire_lexicale)
+- [Les types de données et les structures de données](/fr/docs/Web/JavaScript/Structures_de_donn%C3%A9es)
+- [Le mode strict](/fr/docs/Web/JavaScript/Reference/Strict_mode)
+- [Les fonctionnalités obsolètes](/fr/docs/JavaScript/Reference/Annexes/Fonctionnalités_dépréciées)
diff --git a/files/fr/web/javascript/reference/iteration_protocols/index.html b/files/fr/web/javascript/reference/iteration_protocols/index.html
deleted file mode 100644
index 6e1b27bbae..0000000000
--- a/files/fr/web/javascript/reference/iteration_protocols/index.html
+++ /dev/null
@@ -1,354 +0,0 @@
----
-title: Les protocoles d'itération
-slug: Web/JavaScript/Reference/Iteration_protocols
-tags:
-  - ECMAScript 2015
-  - Intermédiaire
-  - Iterator
-  - JavaScript
-  - Reference
-translation_of: Web/JavaScript/Reference/Iteration_protocols
-original_slug: Web/JavaScript/Reference/Les_protocoles_iteration
----
-<div>{{jsSidebar("More")}}</div>
-
-<p>Un des ajouts à ECMAScript 2015 (ES6) n'est ni une nouvelle syntaxe ni un nouvel objet natif mais des protocoles. Ces protocoles peuvent être implémentés par n'importe quel objet qui respecte certaines conventions.</p>
-
-<p>Il existe deux protocoles concernant l'itération : <a href="#itérable">le protocole « itérable »</a> et <a href="#itérateur">le protocole « itérateur »</a>.</p>
-
-<h2 id="Le_protocole_«_itérable_»">Le protocole « itérable »</h2>
-
-<p>Le protocole «<strong> itérable</strong> » permet aux objets JavaScript de définir ou de personnaliser leur comportement lors d'une itération, par exemple la façon dont les valeurs seront parcourues avec une boucle {{jsxref("Instructions/for...of", "for..of")}}. Certains types natifs tels que {{jsxref("Array")}} ou {{jsxref("Map")}} possèdent un comportement itératif par défaut, d'autres types, comme {{jsxref("Object")}} n'ont pas ce type de comportement.</p>
-
-<p>Afin d'être <strong>itérable</strong>, un objet doit implémenter la méthode <code><strong>@@iterator</strong></code>, cela signifie que l'objet (ou un des objets de <a href="/fr/docs/Web/JavaScript/Guide/Inheritance_and_the_prototype_chain">sa chaîne de prototypes</a>) doit avoir une propriété avec une clé <strong><code>@@iterator</code></strong> qui est accessible via {{jsxref("Symbol.iterator")}} :</p>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Propriété</th>
-   <th scope="col">Valeur</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><code>[Symbol.iterator]</code></td>
-   <td>Une fonction sans argument qui renvoie un objet conforme au <a href="#itérateur">protocole itérateur</a>.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>Lorsqu'on doit itérer sur un objet (ex. : au début d'une boucle <code>for..of</code>), sa méthode <code>@@iterator</code> est appelée sans argument et l'<strong>itérateur</strong> qui est renvoyé est utilisé afin d'obtenir les valeurs sur lesquelles itérer.</p>
-
-<h2 id="Le_protocole_«_itérateur_»">Le protocole « itérateur »</h2>
-
-<p>Le protocole « <strong>itérateur</strong> » définit une façon standard pour produire une suite de valeurs (finie ou infinie) ainsi qu'une valeur de retour lorsque toutes les valeurs ont été générées.</p>
-
-<p>Un objet est considéré comme un itérateur lorsqu'il implémente une méthode <code><strong>next()</strong></code> avec la sémantique suivante :</p>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Propriété</th>
-   <th scope="col">Valeur</th>
-  </tr>
-  <tr>
-   <td><code>next</code></td>
-   <td>
-    <p>Une fonction sans argument qui renvoie un objet qui possède au moins deux propriétés :</p>
-
-    <ul>
-     <li><code>done</code> (un booléen)
-
-      <ul>
-       <li>Qui vaut <code>true</code> lorsque l'itérateur a fini la suite. Dans ce cas, la propriété <code>value</code> sera facultative et permettra de spécifier la valeur de retour de l'itérateur. Les valeurs de retour sont détaillées <a href="https://www.2ality.com/2013/06/iterators-generators.html#generators-as-threads">ici</a>.</li>
-       <li>Qui vaut <code>false</code> lorsque l'itérateur a pu produire la prochaine valeur de la suite. Si on ne définit pas la propriété <code>done</code>, on aura ce comportement par défaut.</li>
-      </ul>
-     </li>
-     <li><code>value</code> : n'importe quelle valeur JavaScript, renvoyée par l'itérateur. Cette propriété peut être absente lorsque <code>done</code> vaut <code>true</code>.</li>
-    </ul>
-
-    <p>La méthode <code>next</code> doit toujours renvoyer un objet contenant les propriétés <code>done</code> et <code>value</code>. Si c'est une valeur primitive qui est renvoyée (ex. <code>false</code> ou <code>undefined</code>), une exception {{jsxref("TypeError")}} sera levée ("iterator.next() returned a non-object value").</p>
-   </td>
-  </tr>
- </tbody>
-</table>
-
-<p>Certains itérateurs sont des itérables :</p>
-
-<pre class="brush: js">var unTableau = [1, 5, 7];
-var élémentsDuTableau = unTableau.entries();
-
-élémentsDuTableau.toString();    // "[object Array Iterator]"
-élémentsDuTableau === élémentsDuTableau[Symbol.iterator]();    // true
-</pre>
-
-<h2 id="Exemples_d'utilisation_des_protocoles_d'itération">Exemples d'utilisation des protocoles d'itération</h2>
-
-<p>Une {{jsxref("String")}} est un exemple d'objet natif itérable :</p>
-
-<pre class="brush: js">var uneChaîne = "coucou";
-typeof uneChaîne[Symbol.iterator];           // "function"
-</pre>
-
-<p><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/@@iterator">L'itérateur par défaut d'un objet <code>String</code></a> renverra les caractères de la chaîne les uns à la suite des autres :</p>
-
-<pre class="brush: js">var itérateur = uneChaîne[Symbol.iterator]();
-itérateur + "";     // "[object String Iterator]"
-
-itérateur.next();  // { value: "c", done: false }
-itérateur.next();  // { value: "o", done: false }
-itérateur.next();  // { value: "u", done: false }
-itérateur.next();  // { value: "c", done: false }
-itérateur.next();  // { value: "o", done: false }
-itérateur.next();  // { value: "u", done: false }
-itérateur.next();  // { value: undefined, done: true }</pre>
-
-<p>Certains éléments natifs du langage, tels que <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateur_de_décomposition">la syntaxe de décomposition</a>, utilisent ce même protocole :</p>
-
-<pre class="brush: js">[...uneChaîne];   // ["c", "o", "u", "c", "o", "u"]</pre>
-
-<p>Il est possible de redéfinir le comportement par défaut en définissant soi-même le symbole <code>@@iterator</code> :</p>
-
-<pre class="brush: js">var uneChaîne = new String("yo");          // on construit un objet String explicitement afin d'éviter la conversion automatique
-
-uneChaîne[Symbol.iterator] = function() {
-  return { // l'objet itérateur qui renvoie un seul élément, la chaîne "bop"
-    next: function() {
-      if (this._first) {
-        this._first = false;
-        return { value: "bop", done: false };
-      } else {
-        return { done: true };
-      }
-    },
-    _first: true
-  };
-};
-</pre>
-
-<p>On notera que redéfinir le symbole <code>@@iterator</code> affecte également le comportement des éléments du langage qui utilisent le protocole :</p>
-
-<pre class="brush: js">[...uneChaîne];  // ["bop"]
-uneChaîne + "";  // "yo"
-</pre>
-
-<h2 id="Exemples_d'itérables">Exemples d'itérables</h2>
-
-<h3 id="Les_itérables_natifs">Les itérables natifs</h3>
-
-<p>{{jsxref("String")}}, {{jsxref("Array")}}, {{jsxref("TypedArray")}}, {{jsxref("Map")}} et {{jsxref("Set")}} sont des itérables natifs car leurs prototypes possèdent une méthode <code>@@iterator</code>.</p>
-
-<h3 id="Les_itérables_définis_par_l'utilisateur">Les itérables définis par l'utilisateur</h3>
-
-<p>Il est possible de construire un itérable dans un script de la façon suivante :</p>
-
-<pre class="brush: js">var monItérable = {};
-monItérable[Symbol.iterator] = function* () {
-    yield 1;
-    yield 2;
-    yield 3;
-};
-[...monItérable]; // [1, 2, 3]
-</pre>
-
-<h3 id="Les_API_natives_utilisant_des_itérables">Les API natives utilisant des itérables</h3>
-
-<p>Plusieurs API utilisent les itérables, par exemple : {{jsxref("Map", "Map([itérable])")}}, {{jsxref("WeakMap", "WeakMap([itérable])")}}, {{jsxref("Set", "Set([itérable])")}} et {{jsxref("WeakSet", "WeakSet([itérable])")}} :</p>
-
-<pre class="brush: js">var monObjet = {};
-new Map([[1,"a"],[2,"b"],[3,"c"]]).get(2);  // "b"
-new WeakMap([[{},"a"],[monObjet,"b"],[{},"c"]]).get(monObjet); // "b"
-new Set([1, 2, 3]).has(3);    // true
-new Set("123").has("2");      // true
-new WeakSet(function*() {
-    yield {};
-    yield monObjet;
-    yield {};
-}()).has(monObjet);           // true
-</pre>
-
-<p>ainsi que {{jsxref("Promise.all", "Promise.all(itérable)")}}, {{jsxref("Promise.race", "Promise.race(itérable)")}}, {{jsxref("Array.from", "Array.from()")}}</p>
-
-<h3 id="Les_éléments_de_syntaxe_utilisant_des_itérables">Les éléments de syntaxe utilisant des itérables</h3>
-
-<p>Certains éléments du langage utilisent des itérables, par exemple : <code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/for...of">for..of</a></code>, <a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateur_de_d%C3%A9composition">la syntaxe de décomposition</a>, <a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/yield*">yield*</a>, <a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Affecter_par_d%C3%A9composition">l'affectation par décomposition</a> :</p>
-
-<pre class="brush: js">for(let value of ["a", "b", "c"]){
-    console.log(value);
-}
-// "a"
-// "b"
-// "c"
-
-[..."abc"]; // ["a", "b", "c"]
-
-function* gen(){
-  yield* ["a", "b", "c"];
-}
-
-gen().next(); // { value:"a", done:false }
-
-[a, b, c] = new Set(["a", "b", "c"]);
-a; // "a"
-
-</pre>
-
-<h3 id="Itérables_mal-formés">Itérables mal-formés</h3>
-
-<p>Si une méthode <code>@@iterator</code> d'un objet itérable ne renvoie pas d'objet itérateur, on dira que cet objet est un itérable mal-formé. Utiliser de tels itérables peut provoquer des exceptions lors de l'exécution ou un comportement erratique :</p>
-
-<pre class="brush: js">var itérableMalFormé = {}
-itérableMalFormé[Symbol.iterator] = () =&gt; 1
-[...itérableMalFormé] // TypeError: [] is not a function
-</pre>
-
-<h2 id="Exemples_d'itérateurs">Exemples d'itérateurs</h2>
-
-<h3 id="Un_itérateur_simple">Un itérateur simple</h3>
-
-<pre class="brush: js">function créerItérateur(tableau){
-    var nextIndex = 0;
-
-    return {
-       next: function(){
-           return nextIndex &lt; tableau.length ?
-               {value: tableau[nextIndex++], done: false} :
-               {done: true};
-       }
-    }
-}
-
-var it = créerItérateur(['yo', 'ya']);
-
-console.log(it.next().value); // 'yo'
-console.log(it.next().value); // 'ya'
-console.log(it.next().done);  // true
-</pre>
-
-<h3 id="Un_itérateur_infini">Un itérateur infini</h3>
-
-<pre class="brush: js">function créateurID(){
-    var index = 0;
-
-    return {
-       next: function(){
-           return {value: index++, done: false};
-       }
-    };
-}
-
-var it = créateurID();
-
-console.log(it.next().value); // '0'
-console.log(it.next().value); // '1'
-console.log(it.next().value); // '2'
-// ...
-</pre>
-
-<h3 id="Avec_un_générateur">Avec un générateur</h3>
-
-<pre class="brush: js">function* créerUnGénérateurSimple(tableau){
-    var nextIndex = 0;
-
-    while(nextIndex &lt; tableau.length){
-        yield tableau[nextIndex++];
-    }
-}
-
-var gen = créerUnGénérateurSimple(['yo', 'ya']);
-
-console.log(gen.next().value); // 'yo'
-console.log(gen.next().value); // 'ya'
-console.log(gen.next().done);  // true
-
-function* créateurID(){
-    var index = 0;
-    while(true)
-        yield index++;
-}
-
-var gen = créateurID();
-
-console.log(gen.next().value); // '0'
-console.log(gen.next().value); // '1'
-console.log(gen.next().value); // '2'
-</pre>
-
-<h3 id="Avec_une_classe_ECMAScript_2015_(ES6)">Avec une classe ECMAScript 2015 (ES6)</h3>
-
-<pre class="brush: js">class ClasseSimple {
-  constructor(data) {
-    this.index = 0;
-    this.data = data;
-  }
-
-  [Symbol.iterator]() {
-    return {
-      next: () =&gt; {
-        if (this.index &lt; this.data.length) {
-          return {value: this.data[this.index++], done: false};
-        } else {
-          this.index = 0;
-          // En réinitialisant l'index, on peut
-          // "reprendre" l'itérateure sans avoir
-          // à gérer de mise à jour manuelle
-          return {done: true};
-        }
-      }
-    };
-  }
-}
-
-const simple = new ClasseSimple([1,2,3,4,5]);
-
-for (const val of simple) {
-  console.log(val);  // '1' '2' '3' '4' '5'
-}
-</pre>
-
-<h2 id="Un_générateur_est-il_un_itérateur_ou_un_itérable">Un générateur est-il un itérateur ou un itérable ?</h2>
-
-<p>Les deux réponses sont correctes :</p>
-
-<pre class="brush: js">var unObjetGénérateur = function*(){
-    yield 1;
-    yield 2;
-    yield 3;
-}()
-typeof unObjetGénérateur.next
-// "function", car il possède une fonction next, c'est donc un itérateur
-typeof unObjetGénérateur[Symbol.iterator]
-// "function", car il possède une méthode @@iterator, c'est donc un itérable
-unObjetGénérateur[Symbol.iterator]() === unObjetGénérateur
-// vrai car la méthode @@iterator renvoie elle-même, un itérateur, c'est donc un itérable bien formé
-[...unObjetGénérateur]
-// [1, 2, 3]
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-iteration', 'Iteration')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td>Définition initiale</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-iteration', 'Iteration')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>Pour plus d'informations sur les générateurs définis par ES2015, voir <a href="/fr/docs/Web/JavaScript/Reference/Instructions/function*">la page dédiée</a>.</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/iteration_protocols/index.md b/files/fr/web/javascript/reference/iteration_protocols/index.md
new file mode 100644
index 0000000000..a6e2b15f68
--- /dev/null
+++ b/files/fr/web/javascript/reference/iteration_protocols/index.md
@@ -0,0 +1,367 @@
+---
+title: Les protocoles d'itération
+slug: Web/JavaScript/Reference/Iteration_protocols
+tags:
+  - ECMAScript 2015
+  - Intermédiaire
+  - Iterator
+  - JavaScript
+  - Reference
+translation_of: Web/JavaScript/Reference/Iteration_protocols
+original_slug: Web/JavaScript/Reference/Les_protocoles_iteration
+---
+{{jsSidebar("More")}}
+
+Un des ajouts à ECMAScript 2015 (ES6) n'est ni une nouvelle syntaxe ni un nouvel objet natif mais des protocoles. Ces protocoles peuvent être implémentés par n'importe quel objet qui respecte certaines conventions.
+
+Il existe deux protocoles concernant l'itération : [le protocole « itérable »](#itérable) et [le protocole « itérateur »](#itérateur).
+
+## Le protocole « itérable »
+
+Le protocole « **itérable** » permet aux objets JavaScript de définir ou de personnaliser leur comportement lors d'une itération, par exemple la façon dont les valeurs seront parcourues avec une boucle {{jsxref("Instructions/for...of", "for..of")}}. Certains types natifs tels que {{jsxref("Array")}} ou {{jsxref("Map")}} possèdent un comportement itératif par défaut, d'autres types, comme {{jsxref("Object")}} n'ont pas ce type de comportement.
+
+Afin d'être **itérable**, un objet doit implémenter la méthode **`@@iterator`**, cela signifie que l'objet (ou un des objets de [sa chaîne de prototypes](/fr/docs/Web/JavaScript/Guide/Inheritance_and_the_prototype_chain)) doit avoir une propriété avec une clé **`@@iterator`** qui est accessible via {{jsxref("Symbol.iterator")}} :
+
+| Propriété           | Valeur                                                                                         |
+| ------------------- | ---------------------------------------------------------------------------------------------- |
+| `[Symbol.iterator]` | Une fonction sans argument qui renvoie un objet conforme au [protocole itérateur](#itérateur). |
+
+Lorsqu'on doit itérer sur un objet (ex. : au début d'une boucle `for..of`), sa méthode `@@iterator` est appelée sans argument et l'**itérateur** qui est renvoyé est utilisé afin d'obtenir les valeurs sur lesquelles itérer.
+
+## Le protocole « itérateur »
+
+Le protocole « **itérateur** » définit une façon standard pour produire une suite de valeurs (finie ou infinie) ainsi qu'une valeur de retour lorsque toutes les valeurs ont été générées.
+
+Un objet est considéré comme un itérateur lorsqu'il implémente une méthode **`next()`** avec la sémantique suivante :
+
+<table class="standard-table">
+  <tbody>
+    <tr>
+      <th scope="col">Propriété</th>
+      <th scope="col">Valeur</th>
+    </tr>
+    <tr>
+      <td><code>next</code></td>
+      <td>
+        <p>
+          Une fonction sans argument qui renvoie un objet qui possède au moins
+          deux propriétés :
+        </p>
+        <ul>
+          <li>
+            <code>done</code> (un booléen)
+            <ul>
+              <li>
+                Qui vaut <code>true</code> lorsque l'itérateur a fini la suite.
+                Dans ce cas, la propriété <code>value</code> sera facultative et
+                permettra de spécifier la valeur de retour de l'itérateur. Les
+                valeurs de retour sont détaillées
+                <a
+                  href="https://www.2ality.com/2013/06/iterators-generators.html#generators-as-threads"
+                  >ici</a
+                >.
+              </li>
+              <li>
+                Qui vaut <code>false</code> lorsque l'itérateur a pu produire la
+                prochaine valeur de la suite. Si on ne définit pas la propriété
+                <code>done</code>, on aura ce comportement par défaut.
+              </li>
+            </ul>
+          </li>
+          <li>
+            <code>value</code> : n'importe quelle valeur JavaScript, renvoyée
+            par l'itérateur. Cette propriété peut être absente lorsque
+            <code>done</code> vaut <code>true</code>.
+          </li>
+        </ul>
+        <p>
+          La méthode <code>next</code> doit toujours renvoyer un objet contenant
+          les propriétés <code>done</code> et <code>value</code>. Si c'est une
+          valeur primitive qui est renvoyée (ex. <code>false</code> ou
+          <code>undefined</code>), une exception
+          {{jsxref("TypeError")}} sera levée ("iterator.next() returned
+          a non-object value").
+        </p>
+      </td>
+    </tr>
+  </tbody>
+</table>
+
+Certains itérateurs sont des itérables :
+
+```js
+var unTableau = [1, 5, 7];
+var élémentsDuTableau = unTableau.entries();
+
+élémentsDuTableau.toString();    // "[object Array Iterator]"
+élémentsDuTableau === élémentsDuTableau[Symbol.iterator]();    // true
+```
+
+## Exemples d'utilisation des protocoles d'itération
+
+Une {{jsxref("String")}} est un exemple d'objet natif itérable :
+
+```js
+var uneChaîne = "coucou";
+typeof uneChaîne[Symbol.iterator];           // "function"
+```
+
+[L'itérateur par défaut d'un objet `String`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/@@iterator) renverra les caractères de la chaîne les uns à la suite des autres :
+
+```js
+var itérateur = uneChaîne[Symbol.iterator]();
+itérateur + "";     // "[object String Iterator]"
+
+itérateur.next();  // { value: "c", done: false }
+itérateur.next();  // { value: "o", done: false }
+itérateur.next();  // { value: "u", done: false }
+itérateur.next();  // { value: "c", done: false }
+itérateur.next();  // { value: "o", done: false }
+itérateur.next();  // { value: "u", done: false }
+itérateur.next();  // { value: undefined, done: true }
+```
+
+Certains éléments natifs du langage, tels que [la syntaxe de décomposition](/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateur_de_décomposition), utilisent ce même protocole :
+
+```js
+[...uneChaîne];   // ["c", "o", "u", "c", "o", "u"]
+```
+
+Il est possible de redéfinir le comportement par défaut en définissant soi-même le symbole `@@iterator` :
+
+```js
+var uneChaîne = new String("yo");          // on construit un objet String explicitement afin d'éviter la conversion automatique
+
+uneChaîne[Symbol.iterator] = function() {
+  return { // l'objet itérateur qui renvoie un seul élément, la chaîne "bop"
+    next: function() {
+      if (this._first) {
+        this._first = false;
+        return { value: "bop", done: false };
+      } else {
+        return { done: true };
+      }
+    },
+    _first: true
+  };
+};
+```
+
+On notera que redéfinir le symbole `@@iterator` affecte également le comportement des éléments du langage qui utilisent le protocole :
+
+```js
+[...uneChaîne];  // ["bop"]
+uneChaîne + "";  // "yo"
+```
+
+## Exemples d'itérables
+
+### Les itérables natifs
+
+{{jsxref("String")}}, {{jsxref("Array")}}, {{jsxref("TypedArray")}}, {{jsxref("Map")}} et {{jsxref("Set")}} sont des itérables natifs car leurs prototypes possèdent une méthode `@@iterator`.
+
+### Les itérables définis par l'utilisateur
+
+Il est possible de construire un itérable dans un script de la façon suivante :
+
+```js
+var monItérable = {};
+monItérable[Symbol.iterator] = function* () {
+    yield 1;
+    yield 2;
+    yield 3;
+};
+[...monItérable]; // [1, 2, 3]
+```
+
+### Les API natives utilisant des itérables
+
+Plusieurs API utilisent les itérables, par exemple : {{jsxref("Map", "Map([itérable])")}}, {{jsxref("WeakMap", "WeakMap([itérable])")}}, {{jsxref("Set", "Set([itérable])")}} et {{jsxref("WeakSet", "WeakSet([itérable])")}} :
+
+```js
+var monObjet = {};
+new Map([[1,"a"],[2,"b"],[3,"c"]]).get(2);  // "b"
+new WeakMap([[{},"a"],[monObjet,"b"],[{},"c"]]).get(monObjet); // "b"
+new Set([1, 2, 3]).has(3);    // true
+new Set("123").has("2");      // true
+new WeakSet(function*() {
+    yield {};
+    yield monObjet;
+    yield {};
+}()).has(monObjet);           // true
+```
+
+ainsi que {{jsxref("Promise.all", "Promise.all(itérable)")}}, {{jsxref("Promise.race", "Promise.race(itérable)")}}, {{jsxref("Array.from", "Array.from()")}}
+
+### Les éléments de syntaxe utilisant des itérables
+
+Certains éléments du langage utilisent des itérables, par exemple : [`for..of`](/fr/docs/Web/JavaScript/Reference/Instructions/for...of), [la syntaxe de décomposition](/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateur_de_d%C3%A9composition), [yield\*](/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/yield*), [l'affectation par décomposition](/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Affecter_par_d%C3%A9composition) :
+
+```js
+for(let value of ["a", "b", "c"]){
+    console.log(value);
+}
+// "a"
+// "b"
+// "c"
+
+[..."abc"]; // ["a", "b", "c"]
+
+function* gen(){
+  yield* ["a", "b", "c"];
+}
+
+gen().next(); // { value:"a", done:false }
+
+[a, b, c] = new Set(["a", "b", "c"]);
+a; // "a"
+```
+
+### Itérables mal-formés
+
+Si une méthode `@@iterator` d'un objet itérable ne renvoie pas d'objet itérateur, on dira que cet objet est un itérable mal-formé. Utiliser de tels itérables peut provoquer des exceptions lors de l'exécution ou un comportement erratique :
+
+```js
+var itérableMalFormé = {}
+itérableMalFormé[Symbol.iterator] = () => 1
+[...itérableMalFormé] // TypeError: [] is not a function
+```
+
+## Exemples d'itérateurs
+
+### Un itérateur simple
+
+```js
+function créerItérateur(tableau){
+    var nextIndex = 0;
+
+    return {
+       next: function(){
+           return nextIndex < tableau.length ?
+               {value: tableau[nextIndex++], done: false} :
+               {done: true};
+       }
+    }
+}
+
+var it = créerItérateur(['yo', 'ya']);
+
+console.log(it.next().value); // 'yo'
+console.log(it.next().value); // 'ya'
+console.log(it.next().done);  // true
+```
+
+### Un itérateur infini
+
+```js
+function créateurID(){
+    var index = 0;
+
+    return {
+       next: function(){
+           return {value: index++, done: false};
+       }
+    };
+}
+
+var it = créateurID();
+
+console.log(it.next().value); // '0'
+console.log(it.next().value); // '1'
+console.log(it.next().value); // '2'
+// ...
+```
+
+### Avec un générateur
+
+```js
+function* créerUnGénérateurSimple(tableau){
+    var nextIndex = 0;
+
+    while(nextIndex < tableau.length){
+        yield tableau[nextIndex++];
+    }
+}
+
+var gen = créerUnGénérateurSimple(['yo', 'ya']);
+
+console.log(gen.next().value); // 'yo'
+console.log(gen.next().value); // 'ya'
+console.log(gen.next().done);  // true
+
+function* créateurID(){
+    var index = 0;
+    while(true)
+        yield index++;
+}
+
+var gen = créateurID();
+
+console.log(gen.next().value); // '0'
+console.log(gen.next().value); // '1'
+console.log(gen.next().value); // '2'
+```
+
+### Avec une classe ECMAScript 2015 (ES6)
+
+```js
+class ClasseSimple {
+  constructor(data) {
+    this.index = 0;
+    this.data = data;
+  }
+
+  [Symbol.iterator]() {
+    return {
+      next: () => {
+        if (this.index < this.data.length) {
+          return {value: this.data[this.index++], done: false};
+        } else {
+          this.index = 0;
+          // En réinitialisant l'index, on peut
+          // "reprendre" l'itérateure sans avoir
+          // à gérer de mise à jour manuelle
+          return {done: true};
+        }
+      }
+    };
+  }
+}
+
+const simple = new ClasseSimple([1,2,3,4,5]);
+
+for (const val of simple) {
+  console.log(val);  // '1' '2' '3' '4' '5'
+}
+```
+
+## Un générateur est-il un itérateur ou un itérable ?
+
+Les deux réponses sont correctes :
+
+```js
+var unObjetGénérateur = function*(){
+    yield 1;
+    yield 2;
+    yield 3;
+}()
+typeof unObjetGénérateur.next
+// "function", car il possède une fonction next, c'est donc un itérateur
+typeof unObjetGénérateur[Symbol.iterator]
+// "function", car il possède une méthode @@iterator, c'est donc un itérable
+unObjetGénérateur[Symbol.iterator]() === unObjetGénérateur
+// vrai car la méthode @@iterator renvoie elle-même, un itérateur, c'est donc un itérable bien formé
+[...unObjetGénérateur]
+// [1, 2, 3]
+```
+
+## Spécifications
+
+| Spécification                                                            | État                         | Commentaires        |
+| ------------------------------------------------------------------------ | ---------------------------- | ------------------- |
+| {{SpecName('ES2015', '#sec-iteration', 'Iteration')}} | {{Spec2('ES2015')}}     | Définition initiale |
+| {{SpecName('ESDraft', '#sec-iteration', 'Iteration')}} | {{Spec2('ESDraft')}} |                     |
+
+## Voir aussi
+
+- Pour plus d'informations sur les générateurs définis par ES2015, voir [la page dédiée](/fr/docs/Web/JavaScript/Reference/Instructions/function*).
diff --git a/files/fr/web/javascript/reference/lexical_grammar/index.html b/files/fr/web/javascript/reference/lexical_grammar/index.html
deleted file mode 100644
index a15866e5ee..0000000000
--- a/files/fr/web/javascript/reference/lexical_grammar/index.html
+++ /dev/null
@@ -1,592 +0,0 @@
----
-title: Grammaire lexicale
-slug: Web/JavaScript/Reference/Lexical_grammar
-tags:
-  - Avancé
-  - Grammaire
-  - JavaScript
-  - Reference
-translation_of: Web/JavaScript/Reference/Lexical_grammar
-original_slug: Web/JavaScript/Reference/Grammaire_lexicale
----
-<div>{{JsSidebar("More")}}</div>
-
-<p>Cette page décrit la grammaire lexicale de JavaScript. Le code source d'un script ECMAScript est analysé de gauche à droite et est converti en une série d'éléments qui sont : des jetons, des caractères de contrôle, des terminateurs de lignes, des commentaires ou des blancs. ECMAScript définit également certains mots-clés et littéraux. ECMAScript possède également des règles pour insérer automatiquement des points-virgules à la fin des instructions.</p>
-
-<h2 id="Caractères_de_contrôle">Caractères de contrôle</h2>
-
-<p>Les caractères de contrôle n'ont aucune représentation visuelle mais sont utilisés pour contrôler l'interprétation du texte.</p>
-
-<table class="standard-table">
- <caption>Caractères de contrôle au format Unicode</caption>
- <tbody>
-  <tr>
-   <th>Point de code</th>
-   <th>Nom</th>
-   <th>Abréviation</th>
-   <th>Description</th>
-  </tr>
-  <tr>
-   <td><code>U+200C</code></td>
-   <td>Antiliant sans chasse (<em>zero width non-joiner</em> en anglais)</td>
-   <td>&lt;ZWNJ&gt;</td>
-   <td>Placé entre des caractères pour empêcher qu'ils soient connectés par une ligature dans certaines langues (<a href="https://fr.wikipedia.org/wiki/Antiliant_sans_chasse">Wikipédia</a>).</td>
-  </tr>
-  <tr>
-   <td><code>U+200D</code></td>
-   <td>Liant sans chasse (<em>zero width joiner</em> en anglais)</td>
-   <td>&lt;ZWJ&gt;</td>
-   <td>Placé entre des caractères qui ne seraient normalement pas connectés pour les afficher comme connectés dans certaines langues (<a href="https://fr.wikipedia.org/wiki/Liant_sans_chasse">Wikipédia</a>).</td>
-  </tr>
-  <tr>
-   <td><code>U+FEFF</code></td>
-   <td>Indicateur d'ordre des octets (<em>byte order mark</em> en anglais)</td>
-   <td>&lt;BOM&gt;</td>
-   <td>Utilisé au début d'un script pour indiquer qu'il est en Unicode et quel est l'ordre des octets (<a href="https://fr.wikipedia.org/wiki/Indicateur_d%27ordre_des_octets">Wikipedia</a>).</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Blancs">Blancs</h2>
-
-<p>Les caractères d'espacement (blancs) sont utilisés pour des raisons de lisibilité et permetttent de séparer les différents fragments entre eux. Ces caractères sont généralement inutiles au code. Les outils de <a href="https://en.wikipedia.org/wiki/Minification_%28programming%29">minification</a> sont souvent utilisés pour retirer les blancs afin de réduire le volume de données à transférer.</p>
-
-<table class="standard-table">
- <caption>Caractères d'espacament</caption>
- <tbody>
-  <tr>
-   <th>Point de code</th>
-   <th>Nom</th>
-   <th>Abréviation</th>
-   <th>Description</th>
-   <th>Séquence d'échappement</th>
-  </tr>
-  <tr>
-   <td>U+0009</td>
-   <td>Tabulation (horizontale)</td>
-   <td>&lt;HT&gt;</td>
-   <td>Tabulation horizontale</td>
-   <td>\t</td>
-  </tr>
-  <tr>
-   <td>U+000B</td>
-   <td>Tabulation verticale</td>
-   <td>&lt;VT&gt;</td>
-   <td>Tabulation verticale</td>
-   <td>\v</td>
-  </tr>
-  <tr>
-   <td>U+000C</td>
-   <td>Caractère de saut de page (<em>form feed</em> en anglais)</td>
-   <td>&lt;FF&gt;</td>
-   <td>Caractère de contrôle pour le saut de page (<a href="http://en.wikipedia.org/wiki/Page_break#Form_feed">Wikipédia</a>).</td>
-   <td>\f</td>
-  </tr>
-  <tr>
-   <td>U+0020</td>
-   <td>Espace sécable (<em>space</em> en anglais)</td>
-   <td>&lt;SP&gt;</td>
-   <td>Espace sécable</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>U+00A0</td>
-   <td>Espace insécable (<em>no-break space</em> en anglais)</td>
-   <td>&lt;NBSP&gt;</td>
-   <td>Espace insécable</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>Autres</td>
-   <td>Autres caractères d'espaces Unicode</td>
-   <td>&lt;USP&gt;</td>
-   <td><a href="http://en.wikipedia.org/wiki/Space_%28punctuation%29#Spaces_in_Unicode">Espaces Unicode sur Wikipédia</a></td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Terminateurs_de_lignes">Terminateurs de lignes</h2>
-
-<p>En plus des blancs, les caractères de fin de ligne (terminateurs de lignes) sont utilisés pour améliorer la lisibilité du texte. Cependant, dans certains cas, les terminateurs de lignes peuvent influencer l'exécution du code JavaScript là où ils sont interdits. Les terminateurs de lignes affectent également le processus d'<a href="#Automatic_semicolon_insertion">insertion automatique des points-virgules</a>. Les terminateurs de lignes correspondent à la classe <strong>\s</strong> <a href="/fr/docs/Web/JavaScript/Guide/Expressions_régulières">des expressions rationnelles</a>.</p>
-
-<p>Seuls les points de code Unicode qui suivent sont traités comme des fins de lignes en ECMAScript, les autres caractères sont traités comme des blancs (par exemple : <em>Next Line </em>(nouvelle ligne) : NEL, U+0085 est considéré comme un blanc).</p>
-
-<table class="standard-table">
- <caption>Caractères de fin de ligne</caption>
- <tbody>
-  <tr>
-   <th>Point de code</th>
-   <th>Nom</th>
-   <th>Abréviation</th>
-   <th>Description</th>
-   <th>Séquence d'échappement</th>
-  </tr>
-  <tr>
-   <td>U+000A</td>
-   <td>Nouvelle ligne</td>
-   <td>&lt;LF&gt;</td>
-   <td>Caractère de nouvelle ligne pour les systèmes UNIX.</td>
-   <td>\n</td>
-  </tr>
-  <tr>
-   <td>U+000D</td>
-   <td>Retour chariot</td>
-   <td>&lt;CR&gt;</td>
-   <td>Caractère de nouvelle ligne pour les systèmes Commodore et les premiers Mac.</td>
-   <td>\r</td>
-  </tr>
-  <tr>
-   <td>U+2028</td>
-   <td>Séparateur de ligne</td>
-   <td>&lt;LS&gt;</td>
-   <td><a href="https://fr.wikipedia.org/wiki/Fin_de_ligne">Wikipédia</a></td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>U+2029</td>
-   <td>Séparateur de paragraphe</td>
-   <td>&lt;PS&gt;</td>
-   <td><a href="https://fr.wikipedia.org/wiki/Fin_de_ligne">Wikipédia</a></td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Commentaires">Commentaires</h2>
-
-<p>Les commentaires sont utilisés pour fournir des notes, des suggestions, des indications ou des avertissements sur le code JavaScript. Cela peut en faciliter la lecture et la compréhension. Ils peuvent également être utilisés pour empêcher l'exécution d'un certain code ; cela peut être pratique lors du débogage.</p>
-
-<p>En JavaScript, Il existe actuellement deux façons de former des commentaires (cf. ci-après pour une troisième méthode en cours de discussion).</p>
-
-<h3 id="Commentaire_sur_une_ligne">Commentaire sur une ligne</h3>
-
-<p>La première façon est d'utiliser <code>//</code> (double barre oblique), pour commenter tout le texte qui suit (sur la même ligne). Par exemple :</p>
-
-<pre class="brush: js">function comment() {
-  // Voici un commentaire d'une ligne en JavaScript
-  console.log("Hello world !");
-}
-comment();
-</pre>
-
-<h3 id="Commentaire_sur_plusieurs_lignes">Commentaire sur plusieurs lignes</h3>
-
-<p>La seconde façon est d'utiliser <code>/* */</code>, qui est plus flexible.</p>
-
-<p>Il est possible d'utiliser cette forme sur une seule ligne :</p>
-
-<pre class="brush: js">function comment() {
-  /* Voici un commentaire d'une ligne en JavaScript */
-  console.log("Hello world !");
-}
-comment();</pre>
-
-<p>Mais également sur plusieurs lignes, comme ceci :</p>
-
-<pre class="brush: js">function comment() {
- /* Ce commentaire s'étend sur plusieurs lignes. Il n'y a
-    pas besoin de clore le commentaire avant d'avoir
-     fini. */
-  console.log("Hello world !");
-}
-comment();</pre>
-
-<p>Il est également possible d'utiliser un commentaire au milieu d'une ligne. En revanche, cela rend le code plus difficile à lire et devrait être utilisé avec attention :</p>
-
-<pre class="brush: js">function comment(x) {
-  console.log("Hello " + x /* insérer la valeur de x */ + " !");
-}
-comment("world");</pre>
-
-<p>On peut également encadrer du code pour l'empêcher d'être exécuté. Par exemple :</p>
-
-<pre class="brush: js">function comment() {
-  /* console.log("Hello world !"); */
-}
-comment();</pre>
-
-<p>Ici, l'appel <code>console.log()</code> n'a jamais lieu car il fait partie d'un commentaire. On peut ainsi désactiver plusieurs lignes de code d'un coup.</p>
-
-<h3 id="Commentaire_d'environnement_(hashbang)">Commentaire d'environnement (<em>hashbang</em>)</h3>
-
-<p>Une troisième syntaxe, en cours de standardisation par ECMAScript, permet d'indiquer l'environnement dans lequel est exécuté le script via <a href="https://github.com/tc39/proposal-hashbang">un commentaire <em>hashbang</em></a>. Un tel commentaire commence par <code>#!</code> et est <strong>uniquement valide au tout début du script ou du module</strong> (aucun espace/blanc n'est autorisé avant <code>#!</code>). Un tel commentaire ne tient que sur une seule ligne et il ne peut y avoir qu'un seul commentaire de ce type.</p>
-
-<pre class="brush: js">#!/usr/bin/env node
-
-console.log("Coucou le monde");
-</pre>
-
-<p>Les commentaires d'environnements sont conçus pour fonctionner comme <a href="https://en.wikipedia.org/wiki/Shebang_(Unix)">les <em>shebangs</em> qu'on peut trouver sous Unix</a> et indiquent l'interpréteur à utiliser pour exécuter le script ou le module.</p>
-
-<div class="warning">
-<p><strong>Attention :</strong> Bien qu'utiliser un <a href="https://fr.wikipedia.org/wiki/Indicateur_d%27ordre_des_octets">BOM</a> avant le <em>hashbang</em> fonctionne dans un navigateur, cela n'est pas conseillé. En effet, un BOM empêchera le bon fonctionnement sous Unix/Linux. Utilisez un encodage UTF-8 sans BOM si vous souhaitez exécuter vos scripts depuis une invite de commande.</p>
-</div>
-
-<p>Si vous souhaitez placer un commentaire en début de fichier sans indiquer d'environnement d'exécution spécifique, on pourra utiliser le commentaire classique avec <code>//</code>.</p>
-
-<h2 id="Mots-clés">Mots-clés</h2>
-
-<h3 id="Mots-clés_réservés_selon_ECMAScript_2015">Mots-clés réservés selon ECMAScript 2015</h3>
-
-<div class="threecolumns">
-<ul>
- <li>{{jsxref("Instructions/break", "break")}}</li>
- <li>{{jsxref("Instructions/switch", "case")}}</li>
- <li>{{jsxref("Opérateurs/class","class")}}</li>
- <li>{{jsxref("Instructions/try...catch", "catch")}}</li>
- <li>{{jsxref("Instructions/const", "const")}}</li>
- <li>{{jsxref("Instructions/continue", "continue")}}</li>
- <li>{{jsxref("Instructions/debugger", "debugger")}}</li>
- <li>{{jsxref("Instructions/default", "default")}}</li>
- <li>{{jsxref("Opérateurs/L_opérateur_delete", "delete")}}</li>
- <li>{{jsxref("Instructions/while", "do")}}</li>
- <li>{{jsxref("Instructions/if...else", "else")}}</li>
- <li>{{jsxref("Instructions/export", "export")}}</li>
- <li>{{jsxref("Classes/extends","extends")}}</li>
- <li>{{jsxref("Instructions/try...catch", "finally")}}</li>
- <li>{{jsxref("Instructions/for", "for")}}</li>
- <li>{{jsxref("Instructions/function", "function")}}</li>
- <li>{{jsxref("Instructions/if...else", "if")}}</li>
- <li>{{jsxref("Instructions/import", "import")}}</li>
- <li>{{jsxref("Instructions/for...in", "in")}}</li>
- <li>{{jsxref("Opérateurs/instanceof", "instanceof")}}</li>
- <li>{{jsxref("Opérateurs/L_opérateur_new", "new")}}</li>
- <li>{{jsxref("Instructions/return", "return")}}</li>
- <li>{{jsxref("Opérateurs/super", "super")}}</li>
- <li>{{jsxref("Instructions/switch", "switch")}}</li>
- <li>{{jsxref("Opérateurs/L_opérateur_this", "this")}}</li>
- <li>{{jsxref("Instructions/throw", "throw")}}</li>
- <li>{{jsxref("Instructions/try...catch", "try")}}</li>
- <li>{{jsxref("Opérateurs/L_opérateur_typeof", "typeof")}}</li>
- <li>{{jsxref("Instructions/var", "var")}}</li>
- <li>{{jsxref("Opérateurs/L_opérateur_void", "void")}}</li>
- <li>{{jsxref("Instructions/while", "while")}}</li>
- <li>{{jsxref("Instructions/with", "with")}}</li>
- <li>{{jsxref("Opérateurs/yield","yield")}}</li>
-</ul>
-</div>
-
-<h3 id="Mots-clés_réservés_pour_le_futur">Mots-clés réservés pour le futur</h3>
-
-<p>Les mots-clés qui suivent ont été réservés pour une utilisation future dans la spécification ECMAScript. Ils n'ont actuellement aucune utilité mais pourrait être utilisés par la suite. Ils ne peuvent donc pas être utilisés comme identifiants. Ces mots-clés ne peuvent être utilisés ni en mode strict ni en mode non strict.</p>
-
-<ul>
- <li><code>enum</code></li>
- <li><code>await</code> (lorsqu'il est utilisé dans le contexte d'un module)</li>
-</ul>
-
-<p>Les mots-clés suivants sont réservés dans du code en mode strict :</p>
-
-<div class="threecolumns">
-<ul>
- <li><code>implements</code></li>
- <li>{{jsxref("Instructions/let", "let")}}</li>
- <li><code>package</code></li>
- <li><code>protected</code></li>
- <li><code>static</code></li>
- <li><code>interface</code></li>
- <li><code>private</code></li>
- <li><code>public</code></li>
-</ul>
-</div>
-
-<h4 id="Mots-clés_réservés_pour_un_usage_future_dans_les_anciens_standards">Mots-clés réservés pour un usage future dans les anciens standards</h4>
-
-<p>Les mots-clés suivants sont réservés dans les anciennes spécifications ECMAScript (ECMAScript 1 à 3).</p>
-
-<div class="threecolumns">
-<ul>
- <li><code>abstract</code></li>
- <li><code>boolean</code></li>
- <li><code>byte</code></li>
- <li><code>char</code></li>
- <li><code>double</code></li>
- <li><code>final</code></li>
- <li><code>float</code></li>
- <li><code>goto</code></li>
- <li><code>int</code></li>
- <li><code>long</code></li>
- <li><code>native</code></li>
- <li><code>short</code></li>
- <li><code>synchronized</code></li>
- <li><code>throws</code></li>
- <li><code>transient</code></li>
- <li><code>volatile</code></li>
-</ul>
-</div>
-
-<p>Par ailleurs, les littéraux <code>null</code>, <code>true</code>, et<code> false</code> sont réservés dans ECMAScript pour leur usage normal.</p>
-
-<h3 id="Utilisation_des_mots-clés_réservés">Utilisation des mots-clés réservés</h3>
-
-<p>Les mots-clés réservés ne le sont que pour les identifiants (et non pour les <code>IdentifierNames</code>) . Comme décrit dans <a href="http://es5.github.com/#A.1">es5.github.com/#A.1</a>, dans l'exemple qui suit, on a, légalement, des <code>IdentifierNames</code> qui utilisent des <code>ReservedWords</code>.</p>
-
-<pre class="brush: js">a.import
-a["import"]
-a = { import: "test" }.
-</pre>
-
-<p>En revanche, dans ce qui suit, c'est illégal car c'est un identifiant. Un identifiant peut être un <code>IdentifierName</code> mais pas un mot-clé réservé. Les identifiants sont utilisés pour les <code>FunctionDeclaration</code> (déclarations de fonction), les <code>FunctionExpression</code> (expressions de fonction), les <code>VariableDeclaration</code> (déclarations de variable)<code>.</code></p>
-
-<pre class="brush: js">function import() {} // Illégal.</pre>
-
-<h2 id="Littéraux">Littéraux</h2>
-
-<h3 id="Littéral_null">Littéral <code>null</code></h3>
-
-<p>Voir aussi la page {{jsxref("null")}} pour plus d'informations.</p>
-
-<pre class="brush: js">null</pre>
-
-<h3 id="Littéraux_booléens">Littéraux booléens</h3>
-
-<p>Voir aussi la page {{jsxref("Boolean")}} pour plus d'informations.</p>
-
-<pre class="brush: js">true
-false</pre>
-
-<h3 id="Littéraux_numériques">Littéraux numériques</h3>
-
-<h4 id="Décimaux">Décimaux</h4>
-
-<pre class="brush: js">1234567890
-42
-
-// Attention à l'utilisation de zéros en début :
-
-0888 // 888 est compris comme décimal
-0777 // est compris comme octal et égale 511 en décimal
-</pre>
-
-<p>Les littéraux décimaux peuvent commencer par un zéro (<code>0</code>) suivi d'un autre chiffre. Mais si tous les chiffres après le 0 sont (strictement) inférieurs à 8, le nombre sera analysé comme un nombre octal. Cela n'entraînera pas d'erreur JavaScript, voir {{bug(957513)}}. Voir aussi la page sur {{jsxref("parseInt", "parseInt()")}}.</p>
-
-<h4 id="Binaires">Binaires</h4>
-
-<p>La représentation binaire des nombres peut être utilisée avec une syntaxe qui comporte un zéro (0) suivi par le caractère latin "B" (minuscule ou majuscule) (<code>0b</code> ou <code>0B</code>). Cette syntaxe est apparue avec ECMAScript 2015 et il faut donc faire attention au tableau de compatibilité pour cette fonctionnalité. Si les chiffres qui composent le nombre ne sont pas 0 ou 1, cela entraînera une erreur {{jsxref("SyntaxError")}} : "Missing binary digits after 0b".</p>
-
-<pre class="brush: js">var FLT_SIGNBIT  = 0b10000000000000000000000000000000; // 2147483648
-var FLT_EXPONENT = 0b01111111100000000000000000000000; // 2139095040
-var FLT_MANTISSA = 0B00000000011111111111111111111111; // 8388607</pre>
-
-<h4 id="Octaux">Octaux</h4>
-
-<p>La syntaxe pour représenter des nombres sous forme octale est : un zéro (0), suivi par la lettre latine "O" (minuscule ou majuscule) (ce qui donne <code>0o</code> ou <code>0O)</code>. Cette syntaxe est apparue avec ECMAScript 2015 et il faut donc faire attention au tableau de compatibilité pour cette fonctionnalité. Si les chiffres qui composent le nombre ne sont pas compris entre 0 et 7, cela entraînera une erreur {{jsxref("SyntaxError")}} : "Missing octal digits after 0o".</p>
-
-<pre class="brush: js">var n = 0O755; // 493
-var m = 0o644; // 420
-
-// Aussi possible en utilisant des zéros en début du nombre (voir la note ci-avant)
-0755
-0644
-</pre>
-
-<h4 id="Hexadécimaux">Hexadécimaux</h4>
-
-<p>Les littéraux hexadécimaux ont pour syntaxe : un zéro (0), suivi par la lettre latine "X" (minuscule ou majuscule) (ce qui donne <code>0x</code> ou <code>0X)</code>. Si les chiffres qui composent le nombre sont en dehors des unités hexadécimales (0123456789ABCDEF), cela entraînera une erreur {{jsxref("SyntaxError")}} : "Identifier starts immediately after numeric literal".</p>
-
-<pre class="brush: js">0xFFFFFFFFFFFFFFFFF // 295147905179352830000
-0x123456789ABCDEF   // 81985529216486900
-0XA                 // 10
-</pre>
-
-<h4 id="Littéraux_BigInt">Littéraux <code>BigInt</code></h4>
-
-<p>Le type {{jsxref("BigInt")}} est un type numérique primitif de JavaScript qui permet de représenter des entiers avec une précision arbitraire. De tels littéraux s'écrivent en ajoutant un <code>n</code> à la fin d'un entier.</p>
-
-<pre class="brush: js">123456789123456789n (nombre décimal, en base 10)
-0o7777777777777777n (nombre octal, en base 8)
-0x123456789ABCDEF1n (nombre hexadécimal, en base 16)
-0b0101010101110101n (nombre binaire, en base 2)
-</pre>
-
-<p>Voir aussi <a href="/fr/docs/Web/JavaScript/Structures_de_données#Le_type_BigInt">le paragraphe sur les grands entiers/BigInt sur les structures de données en JavaScript</a>.</p>
-
-<h3 id="Littéraux_objets">Littéraux objets</h3>
-
-<p>Voir aussi les pages {{jsxref("Object")}} et {{jsxref("Opérateurs/Initialisateur_objet","Initialisateur d'objet","",1)}} pour plus d'informations.</p>
-
-<pre class="brush: js">var o = { a: "toto", b: "truc", c: 42 };
-
-// notation raccourcie depuis ES6
-var a = "toto", b = "truc", c = 42;
-var o = {a, b, c};
-// plutôt que
-var o = { a: a, b: b, c: c };
-</pre>
-
-<h3 id="Littéraux_de_tableaux">Littéraux de tableaux</h3>
-
-<p>Voir aussi la page {{jsxref("Array")}} pour plus d'informations.</p>
-
-<pre class="brush: js">[1954, 1974, 1990, 2014]</pre>
-
-<h3 id="Littéraux_de_chaînes_de_caractères">Littéraux de chaînes de caractères</h3>
-
-<p>Un littéral de chaîne de caractères correspond à zéro ou plusieurs codets Unicode entourés de simples ou de doubles quotes. Les codets Unicode peuvent également être représentés avec des séquences d'échappements. Tous les codets peuvent apparaître dans un littéral de chaîne de caractères à l'exception de ces trois codets :</p>
-
-<ul>
- <li>U+005C \ (barre oblique inverse)</li>
- <li>U+000D (retour chariot, <em>carriage return</em>, <em>CR</em>)</li>
- <li>U+000A (saut de ligne, <em>line feed</em>, <em>LF</em>)</li>
-</ul>
-
-<p>Avant la proposition consistant à rendre les chaînes JSON valides selon ECMA-262, les caractères U+2028 et U+2029 étaient également interdits.</p>
-
-<p>Tous les codets peuvent être écrits sous la forme d'une séquence d'échappement. Les littéraux de chaînes de caractères sont évalués comme des valeurs <code>String</code> ECMAScript. Lorsque ces valeurs <code>String</code> sont générées, les codets Unicode sont encodés en UTF-16.</p>
-
-<pre class="brush: js">'toto'
-"truc"</pre>
-
-<h4 id="Séquence_d'échappement_hexadécimale">Séquence d'échappement hexadécimale</h4>
-
-<p>Une séquence d'échappement hexadécimale consiste en la succession de <code>\x</code> et de deux chiffres hexadécimaux représentant un codet sur l'intervalle 0x0000 à 0x00FF.</p>
-
-<pre class="brush: js">'\xA9' // "©"
-</pre>
-
-<h4 id="Séquence_d'échappement_Unicode">Séquence d'échappement Unicode</h4>
-
-<p>La séquence d'échappement Unicode est composée de <code>\u</code> suivi de quatre chiffres hexadécimaux. Chacun de ces chiffres définit un caractères sur deux octets selon l'encodage UTF-16. Pour les codes situés entre <code>U+0000</code> et <code>U+FFFF</code>, les chiffres à utiliser sont identiques au code. Pour les codes supérieurs, il faudra utiliser deux séquences d'échappement dont chacune représentera un demi-codet de la paire de <em>surrogates</em>.</p>
-
-<p>Voir aussi {{jsxref("String.fromCharCode()")}} et {{jsxref("String.prototype.charCodeAt()")}}.</p>
-
-<pre class="brush: js">'\u00A9' // "©" (U+A9)</pre>
-
-<h4 id="Échappement_de_points_de_code_Unicode">Échappement de points de code Unicode</h4>
-
-<p>Apparu avec ECMAScript 2015, l'échappement de points de code Unicode permet d'échapper n'importe quel caractère en utilisant une notation hexadécimale. Il est possible de le faire pour échapper les points de code Unicode dont la représentation va jusqu'à <code>0x10FFFF</code>. Avec la séquence « simple » d'échappement Unicode, il était nécessaire d'échapper respectivement les deux demi-codets d'une paire si on voulait échapper le caractère correspondant, avec cette nouvelle méthode, ce n'est plus nécessaire de faire la distinction.</p>
-
-<p>Voir également {{jsxref("String.fromCodePoint()")}} et {{jsxref("String.prototype.codePointAt()")}}.</p>
-
-<pre class="brush: js">'\u{2F804}' // CJK COMPATIBILITY IDEOGRAPH-2F804 (U+2F804)
-
-// avec l'ancienne méthode d'échappement, cela aurait été écrit
-// avec une paire de surrogates
-'\uD87E\uDC04'</pre>
-
-<h3 id="Littéraux_d'expressions_rationnelles">Littéraux d'expressions rationnelles</h3>
-
-<p>Voir la page <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/RegExp"><code>RegExp</code></a> pour plus d'informations.</p>
-
-<pre class="brush: js">/ab+c/g
-
-// Un littéral pour une expression rationnelle
-// vide. Le groupe non-capturant est utilisé pour
-// lever l'ambigüité avec les commentaires
-/(?:)/</pre>
-
-<h3 id="Littéraux_modèles_(gabarits_ou_templates)">Littéraux modèles (gabarits ou <em>templates</em>)</h3>
-
-<p>Voir également la page sur <a href="/fr/docs/Web/JavaScript/Reference/Gabarit_chaînes_caractères">les gabarits de chaînes de caractères</a> pour plus d'informations.</p>
-
-<pre class="brush: js">`chaîne de caractères`
-
-`chaîne de caractères ligne 1
- chaîne de caractères ligne 2`
-
-`chaîne1 ${expression} chaîne2`
-
-tag `chaîne1 ${expression} chaîne2`</pre>
-
-<h2 id="Insertion_automatique_de_points-virgules">Insertion automatique de points-virgules</h2>
-
-<p>Certaines <a href="/fr/docs/Web/JavaScript/Reference/Statements">instructions JavaScript</a> doivent finir par un point-virgule et sont donc concernées par l'insertion automatique de points-virgules (ASI pour <em>automatic semicolon insertion</em> en anglais) :</p>
-
-<ul>
- <li>Instruction vide</li>
- <li>instruction de variable, <code>let</code>, <code>const</code></li>
- <li><code>import</code>, <code>export</code>, déclaration de module</li>
- <li>Instruction d'expression</li>
- <li><code>debugger</code></li>
- <li><code>continue</code>, <code>break</code>, <code>throw</code></li>
- <li><code>return</code></li>
-</ul>
-
-<p>La spécification ECMAScript mentionne <a href="https://tc39.github.io/ecma262/#sec-rules-of-automatic-semicolon-insertion">trois règles quant à l'insertion de points-virgules</a> :</p>
-
-<p>1. Un point-vrigule est inséré avant un <a href="#Line_terminators">terminateur de ligne</a> ou une accolade ("}") quand celui ou celle-ci n'est pas autorisé par la grammaire</p>
-
-<pre class="brush: js">{ 1 2 } 3
-// est donc transformé, après ASI, en :
-{ 1 2 ;} 3;</pre>
-
-<p>2. Un point-virgule est inséré à la fin lorsqu'on détecte la fin d'une série de jetons en flux d'entrée et que le parseur est incapable d'analyser le flux d'entrée comme un programme complet.</p>
-
-<p>Ici <code>++</code> n'est pas traité comme <a href="/fr/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Increment">opérateur postfixe</a> s'appliquant à la variable <code>b</code> car il y a un terminateur de ligne entre <code>b</code> et <code>++</code>.</p>
-
-<pre class="brush: js">a = b
-++c
-
-// devient, après ASI :
-
-a = b;
-++c;
-</pre>
-
-<p>3. Un point-virgule est inséré à la fin, lorsqu'une instruction, à production limitée pour la grammaire, est suivie par un terminateur de ligne. Les instructions concernées par cette règle sont :</p>
-
-<ul>
- <li>Expressions postfixes (<code>++</code> et <code>--</code>)</li>
- <li><code>continue</code></li>
- <li><code>break</code></li>
- <li><code>return</code></li>
- <li><code>yield</code>, <code>yield*</code></li>
- <li><code>module</code></li>
-</ul>
-
-<pre class="brush: js">return
-a + b
-
-// est transformé, après ASI, en :
-
-return;
-a + b;
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName("ES1")}}</td>
-   <td>{{Spec2("ES1")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-7', 'Lexical Conventions')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-ecmascript-language-lexical-grammar', 'Lexical Grammar')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td>Ajout : littéraux binaires et octaux, échappements de points de code Unicode, modèles</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-ecmascript-language-lexical-grammar', 'Lexical Grammar')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.grammar")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="http://whereswalden.com/2013/08/12/micro-feature-from-es6-now-in-firefox-aurora-and-nightly-binary-and-octal-numbers/">Jeff Walden : Nombres binaires et forme octale (en anglais)</a></li>
- <li><a href="http://mathiasbynens.be/notes/javascript-escapes">Mathias Bynens : Séquences d'échappements de caractères (en anglais)</a></li>
- <li>{{jsxref("Boolean")}}</li>
- <li>{{jsxref("Number")}}</li>
- <li>{{jsxref("RegExp")}}</li>
- <li>{{jsxref("String")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/lexical_grammar/index.md b/files/fr/web/javascript/reference/lexical_grammar/index.md
new file mode 100644
index 0000000000..c6b22e90af
--- /dev/null
+++ b/files/fr/web/javascript/reference/lexical_grammar/index.md
@@ -0,0 +1,482 @@
+---
+title: Grammaire lexicale
+slug: Web/JavaScript/Reference/Lexical_grammar
+tags:
+  - Avancé
+  - Grammaire
+  - JavaScript
+  - Reference
+translation_of: Web/JavaScript/Reference/Lexical_grammar
+original_slug: Web/JavaScript/Reference/Grammaire_lexicale
+---
+{{JsSidebar("More")}}
+
+Cette page décrit la grammaire lexicale de JavaScript. Le code source d'un script ECMAScript est analysé de gauche à droite et est converti en une série d'éléments qui sont : des jetons, des caractères de contrôle, des terminateurs de lignes, des commentaires ou des blancs. ECMAScript définit également certains mots-clés et littéraux. ECMAScript possède également des règles pour insérer automatiquement des points-virgules à la fin des instructions.
+
+## Caractères de contrôle
+
+Les caractères de contrôle n'ont aucune représentation visuelle mais sont utilisés pour contrôler l'interprétation du texte.
+
+| Point de code | Nom                                                          | Abréviation | Description                                                                                                                                                                                   |
+| ------------- | ------------------------------------------------------------ | ----------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `U+200C`      | Antiliant sans chasse (_zero width non-joiner_ en anglais)   | <ZWNJ>      | Placé entre des caractères pour empêcher qu'ils soient connectés par une ligature dans certaines langues ([Wikipédia](https://fr.wikipedia.org/wiki/Antiliant_sans_chasse)).                  |
+| `U+200D`      | Liant sans chasse (_zero width joiner_ en anglais)           | <ZWJ>       | Placé entre des caractères qui ne seraient normalement pas connectés pour les afficher comme connectés dans certaines langues ([Wikipédia](https://fr.wikipedia.org/wiki/Liant_sans_chasse)). |
+| `U+FEFF`      | Indicateur d'ordre des octets (_byte order mark_ en anglais) | <BOM>       | Utilisé au début d'un script pour indiquer qu'il est en Unicode et quel est l'ordre des octets ([Wikipedia](https://fr.wikipedia.org/wiki/Indicateur_d%27ordre_des_octets)).                  |
+
+## Blancs
+
+Les caractères d'espacement (blancs) sont utilisés pour des raisons de lisibilité et permetttent de séparer les différents fragments entre eux. Ces caractères sont généralement inutiles au code. Les outils de [minification](https://en.wikipedia.org/wiki/Minification_%28programming%29) sont souvent utilisés pour retirer les blancs afin de réduire le volume de données à transférer.
+
+| Point de code | Nom                                                | Abréviation | Description                                                                                                  | Séquence d'échappement |
+| ------------- | -------------------------------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------ | ---------------------- |
+| U+0009        | Tabulation (horizontale)                           | <HT>        | Tabulation horizontale                                                                                       | \t                     |
+| U+000B        | Tabulation verticale                               | <VT>        | Tabulation verticale                                                                                         | \v                     |
+| U+000C        | Caractère de saut de page (_form feed_ en anglais) | <FF>        | Caractère de contrôle pour le saut de page ([Wikipédia](http://en.wikipedia.org/wiki/Page_break#Form_feed)). | \f                     |
+| U+0020        | Espace sécable (_space_ en anglais)                | <SP>        | Espace sécable                                                                                               |                        |
+| U+00A0        | Espace insécable (_no-break space_ en anglais)     | <NBSP>      | Espace insécable                                                                                             |                        |
+| Autres        | Autres caractères d'espaces Unicode                | <USP>       | [Espaces Unicode sur Wikipédia](http://en.wikipedia.org/wiki/Space_%28punctuation%29#Spaces_in_Unicode)      |                        |
+
+## Terminateurs de lignes
+
+En plus des blancs, les caractères de fin de ligne (terminateurs de lignes) sont utilisés pour améliorer la lisibilité du texte. Cependant, dans certains cas, les terminateurs de lignes peuvent influencer l'exécution du code JavaScript là où ils sont interdits. Les terminateurs de lignes affectent également le processus d'[insertion automatique des points-virgules](#Automatic_semicolon_insertion). Les terminateurs de lignes correspondent à la classe **\s** [des expressions rationnelles](/fr/docs/Web/JavaScript/Guide/Expressions_régulières).
+
+Seuls les points de code Unicode qui suivent sont traités comme des fins de lignes en ECMAScript, les autres caractères sont traités comme des blancs (par exemple : _Next Line_ (nouvelle ligne) : NEL, U+0085 est considéré comme un blanc).
+
+| Point de code | Nom                      | Abréviation | Description                                                                  | Séquence d'échappement |
+| ------------- | ------------------------ | ----------- | ---------------------------------------------------------------------------- | ---------------------- |
+| U+000A        | Nouvelle ligne           | <LF>        | Caractère de nouvelle ligne pour les systèmes UNIX.                          | \n                     |
+| U+000D        | Retour chariot           | <CR>        | Caractère de nouvelle ligne pour les systèmes Commodore et les premiers Mac. | \r                     |
+| U+2028        | Séparateur de ligne      | <LS>        | [Wikipédia](https://fr.wikipedia.org/wiki/Fin_de_ligne)                      |                        |
+| U+2029        | Séparateur de paragraphe | <PS>        | [Wikipédia](https://fr.wikipedia.org/wiki/Fin_de_ligne)                      |                        |
+
+## Commentaires
+
+Les commentaires sont utilisés pour fournir des notes, des suggestions, des indications ou des avertissements sur le code JavaScript. Cela peut en faciliter la lecture et la compréhension. Ils peuvent également être utilisés pour empêcher l'exécution d'un certain code ; cela peut être pratique lors du débogage.
+
+En JavaScript, Il existe actuellement deux façons de former des commentaires (cf. ci-après pour une troisième méthode en cours de discussion).
+
+### Commentaire sur une ligne
+
+La première façon est d'utiliser `//` (double barre oblique), pour commenter tout le texte qui suit (sur la même ligne). Par exemple :
+
+```js
+function comment() {
+  // Voici un commentaire d'une ligne en JavaScript
+  console.log("Hello world !");
+}
+comment();
+```
+
+### Commentaire sur plusieurs lignes
+
+La seconde façon est d'utiliser `/* */`, qui est plus flexible.
+
+Il est possible d'utiliser cette forme sur une seule ligne :
+
+```js
+function comment() {
+  /* Voici un commentaire d'une ligne en JavaScript */
+  console.log("Hello world !");
+}
+comment();
+```
+
+Mais également sur plusieurs lignes, comme ceci :
+
+```js
+function comment() {
+ /* Ce commentaire s'étend sur plusieurs lignes. Il n'y a
+    pas besoin de clore le commentaire avant d'avoir
+     fini. */
+  console.log("Hello world !");
+}
+comment();
+```
+
+Il est également possible d'utiliser un commentaire au milieu d'une ligne. En revanche, cela rend le code plus difficile à lire et devrait être utilisé avec attention :
+
+```js
+function comment(x) {
+  console.log("Hello " + x /* insérer la valeur de x */ + " !");
+}
+comment("world");
+```
+
+On peut également encadrer du code pour l'empêcher d'être exécuté. Par exemple :
+
+```js
+function comment() {
+  /* console.log("Hello world !"); */
+}
+comment();
+```
+
+Ici, l'appel `console.log()` n'a jamais lieu car il fait partie d'un commentaire. On peut ainsi désactiver plusieurs lignes de code d'un coup.
+
+### Commentaire d'environnement (_hashbang_)
+
+Une troisième syntaxe, en cours de standardisation par ECMAScript, permet d'indiquer l'environnement dans lequel est exécuté le script via [un commentaire _hashbang_](https://github.com/tc39/proposal-hashbang). Un tel commentaire commence par `#!` et est **uniquement valide au tout début du script ou du module** (aucun espace/blanc n'est autorisé avant `#!`). Un tel commentaire ne tient que sur une seule ligne et il ne peut y avoir qu'un seul commentaire de ce type.
+
+```js
+#!/usr/bin/env node
+
+console.log("Coucou le monde");
+```
+
+Les commentaires d'environnements sont conçus pour fonctionner comme [les _shebangs_ qu'on peut trouver sous Unix](<https://en.wikipedia.org/wiki/Shebang_(Unix)>) et indiquent l'interpréteur à utiliser pour exécuter le script ou le module.
+
+> **Attention :** Bien qu'utiliser un [BOM](https://fr.wikipedia.org/wiki/Indicateur_d%27ordre_des_octets) avant le _hashbang_ fonctionne dans un navigateur, cela n'est pas conseillé. En effet, un BOM empêchera le bon fonctionnement sous Unix/Linux. Utilisez un encodage UTF-8 sans BOM si vous souhaitez exécuter vos scripts depuis une invite de commande.
+
+Si vous souhaitez placer un commentaire en début de fichier sans indiquer d'environnement d'exécution spécifique, on pourra utiliser le commentaire classique avec `//`.
+
+## Mots-clés
+
+### Mots-clés réservés selon ECMAScript 2015
+
+- {{jsxref("Instructions/break", "break")}}
+- {{jsxref("Instructions/switch", "case")}}
+- {{jsxref("Opérateurs/class","class")}}
+- {{jsxref("Instructions/try...catch", "catch")}}
+- {{jsxref("Instructions/const", "const")}}
+- {{jsxref("Instructions/continue", "continue")}}
+- {{jsxref("Instructions/debugger", "debugger")}}
+- {{jsxref("Instructions/default", "default")}}
+- {{jsxref("Opérateurs/L_opérateur_delete", "delete")}}
+- {{jsxref("Instructions/while", "do")}}
+- {{jsxref("Instructions/if...else", "else")}}
+- {{jsxref("Instructions/export", "export")}}
+- {{jsxref("Classes/extends","extends")}}
+- {{jsxref("Instructions/try...catch", "finally")}}
+- {{jsxref("Instructions/for", "for")}}
+- {{jsxref("Instructions/function", "function")}}
+- {{jsxref("Instructions/if...else", "if")}}
+- {{jsxref("Instructions/import", "import")}}
+- {{jsxref("Instructions/for...in", "in")}}
+- {{jsxref("Opérateurs/instanceof", "instanceof")}}
+- {{jsxref("Opérateurs/L_opérateur_new", "new")}}
+- {{jsxref("Instructions/return", "return")}}
+- {{jsxref("Opérateurs/super", "super")}}
+- {{jsxref("Instructions/switch", "switch")}}
+- {{jsxref("Opérateurs/L_opérateur_this", "this")}}
+- {{jsxref("Instructions/throw", "throw")}}
+- {{jsxref("Instructions/try...catch", "try")}}
+- {{jsxref("Opérateurs/L_opérateur_typeof", "typeof")}}
+- {{jsxref("Instructions/var", "var")}}
+- {{jsxref("Opérateurs/L_opérateur_void", "void")}}
+- {{jsxref("Instructions/while", "while")}}
+- {{jsxref("Instructions/with", "with")}}
+- {{jsxref("Opérateurs/yield","yield")}}
+
+### Mots-clés réservés pour le futur
+
+Les mots-clés qui suivent ont été réservés pour une utilisation future dans la spécification ECMAScript. Ils n'ont actuellement aucune utilité mais pourrait être utilisés par la suite. Ils ne peuvent donc pas être utilisés comme identifiants. Ces mots-clés ne peuvent être utilisés ni en mode strict ni en mode non strict.
+
+- `enum`
+- `await` (lorsqu'il est utilisé dans le contexte d'un module)
+
+Les mots-clés suivants sont réservés dans du code en mode strict :
+
+- `implements`
+- {{jsxref("Instructions/let", "let")}}
+- `package`
+- `protected`
+- `static`
+- `interface`
+- `private`
+- `public`
+
+#### Mots-clés réservés pour un usage future dans les anciens standards
+
+Les mots-clés suivants sont réservés dans les anciennes spécifications ECMAScript (ECMAScript 1 à 3).
+
+- `abstract`
+- `boolean`
+- `byte`
+- `char`
+- `double`
+- `final`
+- `float`
+- `goto`
+- `int`
+- `long`
+- `native`
+- `short`
+- `synchronized`
+- `throws`
+- `transient`
+- `volatile`
+
+Par ailleurs, les littéraux `null`, `true`, et` false` sont réservés dans ECMAScript pour leur usage normal.
+
+### Utilisation des mots-clés réservés
+
+Les mots-clés réservés ne le sont que pour les identifiants (et non pour les `IdentifierNames`) . Comme décrit dans [es5.github.com/#A.1](http://es5.github.com/#A.1), dans l'exemple qui suit, on a, légalement, des `IdentifierNames` qui utilisent des `ReservedWords`.
+
+```js
+a.import
+a["import"]
+a = { import: "test" }.
+```
+
+En revanche, dans ce qui suit, c'est illégal car c'est un identifiant. Un identifiant peut être un `IdentifierName` mais pas un mot-clé réservé. Les identifiants sont utilisés pour les `FunctionDeclaration` (déclarations de fonction), les `FunctionExpression` (expressions de fonction), les `VariableDeclaration` (déclarations de variable)`.`
+
+```js
+function import() {} // Illégal.
+```
+
+## Littéraux
+
+### Littéral `null`
+
+Voir aussi la page {{jsxref("null")}} pour plus d'informations.
+
+```js
+null
+```
+
+### Littéraux booléens
+
+Voir aussi la page {{jsxref("Boolean")}} pour plus d'informations.
+
+```js
+true
+false
+```
+
+### Littéraux numériques
+
+#### Décimaux
+
+```js
+1234567890
+42
+
+// Attention à l'utilisation de zéros en début :
+
+0888 // 888 est compris comme décimal
+0777 // est compris comme octal et égale 511 en décimal
+```
+
+Les littéraux décimaux peuvent commencer par un zéro (`0`) suivi d'un autre chiffre. Mais si tous les chiffres après le 0 sont (strictement) inférieurs à 8, le nombre sera analysé comme un nombre octal. Cela n'entraînera pas d'erreur JavaScript, voir {{bug(957513)}}. Voir aussi la page sur {{jsxref("parseInt", "parseInt()")}}.
+
+#### Binaires
+
+La représentation binaire des nombres peut être utilisée avec une syntaxe qui comporte un zéro (0) suivi par le caractère latin "B" (minuscule ou majuscule) (`0b` ou `0B`). Cette syntaxe est apparue avec ECMAScript 2015 et il faut donc faire attention au tableau de compatibilité pour cette fonctionnalité. Si les chiffres qui composent le nombre ne sont pas 0 ou 1, cela entraînera une erreur {{jsxref("SyntaxError")}} : "Missing binary digits after 0b".
+
+```js
+var FLT_SIGNBIT  = 0b10000000000000000000000000000000; // 2147483648
+var FLT_EXPONENT = 0b01111111100000000000000000000000; // 2139095040
+var FLT_MANTISSA = 0B00000000011111111111111111111111; // 8388607
+```
+
+#### Octaux
+
+La syntaxe pour représenter des nombres sous forme octale est : un zéro (0), suivi par la lettre latine "O" (minuscule ou majuscule) (ce qui donne `0o` ou `0O)`. Cette syntaxe est apparue avec ECMAScript 2015 et il faut donc faire attention au tableau de compatibilité pour cette fonctionnalité. Si les chiffres qui composent le nombre ne sont pas compris entre 0 et 7, cela entraînera une erreur {{jsxref("SyntaxError")}} : "Missing octal digits after 0o".
+
+```js
+var n = 0O755; // 493
+var m = 0o644; // 420
+
+// Aussi possible en utilisant des zéros en début du nombre (voir la note ci-avant)
+0755
+0644
+```
+
+#### Hexadécimaux
+
+Les littéraux hexadécimaux ont pour syntaxe : un zéro (0), suivi par la lettre latine "X" (minuscule ou majuscule) (ce qui donne `0x` ou `0X)`. Si les chiffres qui composent le nombre sont en dehors des unités hexadécimales (0123456789ABCDEF), cela entraînera une erreur {{jsxref("SyntaxError")}} : "Identifier starts immediately after numeric literal".
+
+```js
+0xFFFFFFFFFFFFFFFFF // 295147905179352830000
+0x123456789ABCDEF   // 81985529216486900
+0XA                 // 10
+```
+
+#### Littéraux `BigInt`
+
+Le type {{jsxref("BigInt")}} est un type numérique primitif de JavaScript qui permet de représenter des entiers avec une précision arbitraire. De tels littéraux s'écrivent en ajoutant un `n` à la fin d'un entier.
+
+```js
+123456789123456789n (nombre décimal, en base 10)
+0o7777777777777777n (nombre octal, en base 8)
+0x123456789ABCDEF1n (nombre hexadécimal, en base 16)
+0b0101010101110101n (nombre binaire, en base 2)
+```
+
+Voir aussi [le paragraphe sur les grands entiers/BigInt sur les structures de données en JavaScript](/fr/docs/Web/JavaScript/Structures_de_données#Le_type_BigInt).
+
+### Littéraux objets
+
+Voir aussi les pages {{jsxref("Object")}} et {{jsxref("Opérateurs/Initialisateur_objet","Initialisateur d'objet","",1)}} pour plus d'informations.
+
+```js
+var o = { a: "toto", b: "truc", c: 42 };
+
+// notation raccourcie depuis ES6
+var a = "toto", b = "truc", c = 42;
+var o = {a, b, c};
+// plutôt que
+var o = { a: a, b: b, c: c };
+```
+
+### Littéraux de tableaux
+
+Voir aussi la page {{jsxref("Array")}} pour plus d'informations.
+
+```js
+[1954, 1974, 1990, 2014]
+```
+
+### Littéraux de chaînes de caractères
+
+Un littéral de chaîne de caractères correspond à zéro ou plusieurs codets Unicode entourés de simples ou de doubles quotes. Les codets Unicode peuvent également être représentés avec des séquences d'échappements. Tous les codets peuvent apparaître dans un littéral de chaîne de caractères à l'exception de ces trois codets :
+
+- U+005C \ (barre oblique inverse)
+- U+000D (retour chariot, _carriage return_, _CR_)
+- U+000A (saut de ligne, _line feed_, _LF_)
+
+Avant la proposition consistant à rendre les chaînes JSON valides selon ECMA-262, les caractères U+2028 et U+2029 étaient également interdits.
+
+Tous les codets peuvent être écrits sous la forme d'une séquence d'échappement. Les littéraux de chaînes de caractères sont évalués comme des valeurs `String` ECMAScript. Lorsque ces valeurs `String` sont générées, les codets Unicode sont encodés en UTF-16.
+
+```js
+'toto'
+"truc"
+```
+
+#### Séquence d'échappement hexadécimale
+
+Une séquence d'échappement hexadécimale consiste en la succession de `\x` et de deux chiffres hexadécimaux représentant un codet sur l'intervalle 0x0000 à 0x00FF.
+
+```js
+'\xA9' // "©"
+```
+
+#### Séquence d'échappement Unicode
+
+La séquence d'échappement Unicode est composée de `\u` suivi de quatre chiffres hexadécimaux. Chacun de ces chiffres définit un caractères sur deux octets selon l'encodage UTF-16. Pour les codes situés entre `U+0000` et `U+FFFF`, les chiffres à utiliser sont identiques au code. Pour les codes supérieurs, il faudra utiliser deux séquences d'échappement dont chacune représentera un demi-codet de la paire de _surrogates_.
+
+Voir aussi {{jsxref("String.fromCharCode()")}} et {{jsxref("String.prototype.charCodeAt()")}}.
+
+```js
+'\u00A9' // "©" (U+A9)
+```
+
+#### Échappement de points de code Unicode
+
+Apparu avec ECMAScript 2015, l'échappement de points de code Unicode permet d'échapper n'importe quel caractère en utilisant une notation hexadécimale. Il est possible de le faire pour échapper les points de code Unicode dont la représentation va jusqu'à `0x10FFFF`. Avec la séquence « simple » d'échappement Unicode, il était nécessaire d'échapper respectivement les deux demi-codets d'une paire si on voulait échapper le caractère correspondant, avec cette nouvelle méthode, ce n'est plus nécessaire de faire la distinction.
+
+Voir également {{jsxref("String.fromCodePoint()")}} et {{jsxref("String.prototype.codePointAt()")}}.
+
+```js
+'\u{2F804}' // CJK COMPATIBILITY IDEOGRAPH-2F804 (U+2F804)
+
+// avec l'ancienne méthode d'échappement, cela aurait été écrit
+// avec une paire de surrogates
+'\uD87E\uDC04'
+```
+
+### Littéraux d'expressions rationnelles
+
+Voir la page [`RegExp`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/RegExp) pour plus d'informations.
+
+```js
+/ab+c/g
+
+// Un littéral pour une expression rationnelle
+// vide. Le groupe non-capturant est utilisé pour
+// lever l'ambigüité avec les commentaires
+/(?:)/
+```
+
+### Littéraux modèles (gabarits ou _templates_)
+
+Voir également la page sur [les gabarits de chaînes de caractères](/fr/docs/Web/JavaScript/Reference/Gabarit_chaînes_caractères) pour plus d'informations.
+
+```js
+`chaîne de caractères`
+
+`chaîne de caractères ligne 1
+ chaîne de caractères ligne 2`
+
+`chaîne1 ${expression} chaîne2`
+
+tag `chaîne1 ${expression} chaîne2`
+```
+
+## Insertion automatique de points-virgules
+
+Certaines [instructions JavaScript](/fr/docs/Web/JavaScript/Reference/Statements) doivent finir par un point-virgule et sont donc concernées par l'insertion automatique de points-virgules (ASI pour _automatic semicolon insertion_ en anglais) :
+
+- Instruction vide
+- instruction de variable, `let`, `const`
+- `import`, `export`, déclaration de module
+- Instruction d'expression
+- `debugger`
+- `continue`, `break`, `throw`
+- `return`
+
+La spécification ECMAScript mentionne [trois règles quant à l'insertion de points-virgules](https://tc39.github.io/ecma262/#sec-rules-of-automatic-semicolon-insertion) :
+
+1\. Un point-vrigule est inséré avant un [terminateur de ligne](#Line_terminators) ou une accolade ("}") quand celui ou celle-ci n'est pas autorisé par la grammaire
+
+```js
+{ 1 2 } 3
+// est donc transformé, après ASI, en :
+{ 1 2 ;} 3;
+```
+
+2\. Un point-virgule est inséré à la fin lorsqu'on détecte la fin d'une série de jetons en flux d'entrée et que le parseur est incapable d'analyser le flux d'entrée comme un programme complet.
+
+Ici `++` n'est pas traité comme [opérateur postfixe](/fr/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Increment) s'appliquant à la variable `b` car il y a un terminateur de ligne entre `b` et `++`.
+
+```js
+a = b
+++c
+
+// devient, après ASI :
+
+a = b;
+++c;
+```
+
+3\. Un point-virgule est inséré à la fin, lorsqu'une instruction, à production limitée pour la grammaire, est suivie par un terminateur de ligne. Les instructions concernées par cette règle sont :
+
+- Expressions postfixes (`++` et `--`)
+- `continue`
+- `break`
+- `return`
+- `yield`, `yield*`
+- `module`
+
+```js
+return
+a + b
+
+// est transformé, après ASI, en :
+
+return;
+a + b;
+```
+
+## Spécifications
+
+| Spécification                                                                                                        | État                         | Commentaires                                                                          |
+| -------------------------------------------------------------------------------------------------------------------- | ---------------------------- | ------------------------------------------------------------------------------------- |
+| {{SpecName("ES1")}}                                                                                             | {{Spec2("ES1")}}         | Définition initiale.                                                                  |
+| {{SpecName('ES5.1', '#sec-7', 'Lexical Conventions')}}                                             | {{Spec2('ES5.1')}}     |                                                                                       |
+| {{SpecName('ES6', '#sec-ecmascript-language-lexical-grammar', 'Lexical Grammar')}}         | {{Spec2('ES6')}}         | Ajout : littéraux binaires et octaux, échappements de points de code Unicode, modèles |
+| {{SpecName('ESDraft', '#sec-ecmascript-language-lexical-grammar', 'Lexical Grammar')}} | {{Spec2('ESDraft')}} |                                                                                       |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.grammar")}}
+
+## Voir aussi
+
+- [Jeff Walden : Nombres binaires et forme octale (en anglais)](http://whereswalden.com/2013/08/12/micro-feature-from-es6-now-in-firefox-aurora-and-nightly-binary-and-octal-numbers/)
+- [Mathias Bynens : Séquences d'échappements de caractères (en anglais)](http://mathiasbynens.be/notes/javascript-escapes)
+- {{jsxref("Boolean")}}
+- {{jsxref("Number")}}
+- {{jsxref("RegExp")}}
+- {{jsxref("String")}}
diff --git a/files/fr/web/javascript/reference/operators/addition/index.html b/files/fr/web/javascript/reference/operators/addition/index.html
deleted file mode 100644
index e67da71cd6..0000000000
--- a/files/fr/web/javascript/reference/operators/addition/index.html
+++ /dev/null
@@ -1,70 +0,0 @@
----
-title: Addition (+)
-slug: Web/JavaScript/Reference/Operators/Addition
-tags:
-  - JavaScript
-  - Opérateur
-  - Reference
-translation_of: Web/JavaScript/Reference/Operators/Addition
-original_slug: Web/JavaScript/Reference/Opérateurs/Addition
-browser-compat: javascript.operators.addition
----
-<div>{{jsSidebar("Operators")}}</div>
-
-<p>L'opérateur d'addition (<code>+</code>) produit la somme de deux opérandes numériques ou la concaténation de deux chaînes de caractères.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/expressions-addition.html")}}</div>
-
-<h2 id="syntaxe">Syntaxe</h2>
-
-<pre class="brush: js">
-<strong>Opérateur :</strong> <var>x</var> + <var>y</var>
-</pre>
-
-<h2 id="examples">Exemples</h2>
-
-<h3 id="numeric_addition">Addition numérique</h3>
-
-<pre class="brush: js">
-// Number + Number -&gt; addition
-1 + 2 // 3
-
-// Boolean + Number -&gt; addition
-true + 1 // 2
-
-// Boolean + Boolean -&gt; addition
-false + false // 0
-</pre>
-
-<h3 id="string_concatenation">Concaténation de chaînes de caractères</h3>
-
-<pre class="brush: js">// String + String -&gt; concatenation
-'toto' + 'truc' // "tototruc"
-
-// Number + String -&gt; concatenation
-5 + 'toto' // "5toto"
-
-// String + Boolean -&gt; concatenation
-'toto' + false // "totofalse"</pre>
-
-<h2 id="specifications">Spécifications</h2>
-
-<p>{{Specifications}}</p>
-
-<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
-
-<p>{{Compat}}</p>
-
-<h2 id="see_also">Voir aussi</h2>
-
-<ul>
-  <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Subtraction">Opérateur de soustraction</a></li>
-  <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Multiplication">Opérateur de multiplication</a></li>
-  <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Division">Opérateur de division</a></li>
-  <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Remainder">Opérateur de reste</a></li>
-  <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Exponentiation">Opérateur d'exponentiation</a></li>
-  <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Increment">Opérateur d'incrémentation</a></li>
-  <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Decrement">Opérateur de décrémentation</a></li>
-  <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Unary_negation">Opérateur de négation unaire</a></li>
-  <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Unary_plus">Opérateur plus unaire</a></li>
-</ul>
diff --git a/files/fr/web/javascript/reference/operators/addition/index.md b/files/fr/web/javascript/reference/operators/addition/index.md
new file mode 100644
index 0000000000..68cdc61723
--- /dev/null
+++ b/files/fr/web/javascript/reference/operators/addition/index.md
@@ -0,0 +1,70 @@
+---
+title: Addition (+)
+slug: Web/JavaScript/Reference/Operators/Addition
+tags:
+  - JavaScript
+  - Opérateur
+  - Reference
+translation_of: Web/JavaScript/Reference/Operators/Addition
+original_slug: Web/JavaScript/Reference/Opérateurs/Addition
+browser-compat: javascript.operators.addition
+---
+{{jsSidebar("Operators")}}
+
+L'opérateur d'addition (`+`) produit la somme de deux opérandes numériques ou la concaténation de deux chaînes de caractères.
+
+{{EmbedInteractiveExample("pages/js/expressions-addition.html")}}
+
+## Syntaxe
+
+```js
+Opérateur : x + y
+```
+
+## Exemples
+
+### Addition numérique
+
+```js
+// Number + Number -> addition
+1 + 2 // 3
+
+// Boolean + Number -> addition
+true + 1 // 2
+
+// Boolean + Boolean -> addition
+false + false // 0
+```
+
+### Concaténation de chaînes de caractères
+
+```js
+// String + String -> concatenation
+'toto' + 'truc' // "tototruc"
+
+// Number + String -> concatenation
+5 + 'toto' // "5toto"
+
+// String + Boolean -> concatenation
+'toto' + false // "totofalse"
+```
+
+## Spécifications
+
+{{Specifications}}
+
+## Compatibilité des navigateurs
+
+{{Compat}}
+
+## Voir aussi
+
+- [Opérateur de soustraction](/fr/docs/Web/JavaScript/Reference/Operators/Subtraction)
+- [Opérateur de multiplication](/fr/docs/Web/JavaScript/Reference/Operators/Multiplication)
+- [Opérateur de division](/fr/docs/Web/JavaScript/Reference/Operators/Division)
+- [Opérateur de reste](/fr/docs/Web/JavaScript/Reference/Operators/Remainder)
+- [Opérateur d'exponentiation](/fr/docs/Web/JavaScript/Reference/Operators/Exponentiation)
+- [Opérateur d'incrémentation](/fr/docs/Web/JavaScript/Reference/Operators/Increment)
+- [Opérateur de décrémentation](/fr/docs/Web/JavaScript/Reference/Operators/Decrement)
+- [Opérateur de négation unaire](/fr/docs/Web/JavaScript/Reference/Operators/Unary_negation)
+- [Opérateur plus unaire](/fr/docs/Web/JavaScript/Reference/Operators/Unary_plus)
diff --git a/files/fr/web/javascript/reference/operators/addition_assignment/index.html b/files/fr/web/javascript/reference/operators/addition_assignment/index.html
deleted file mode 100644
index c0a2136c3d..0000000000
--- a/files/fr/web/javascript/reference/operators/addition_assignment/index.html
+++ /dev/null
@@ -1,66 +0,0 @@
----
-title: Affectation après addition (+=)
-slug: Web/JavaScript/Reference/Operators/Addition_assignment
-tags:
-- Assignment operator
-- JavaScript
-- Language feature
-- Operator
-- Reference
-translation-of: Web/JavaScript/Reference/Operators/Addition_assignment
-browser-compat: javascript.operators.addition_assignment
----
-<div>{{jsSidebar("Operators")}}</div>
-
-<p>L'opérateur d'addition et d'affectation (<code>+=</code>) calcule la somme ou la concaténation de ses deux opérandes puis affecte le résultat à la variable représentée par l'opérande gauche. C'est le type des opérandes qui détermine s'il y a somme ou concaténation.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/expressions-addition-assignment.html")}}</div>
-
-<h2 id="syntax">Syntax</h2>
-
-<pre class="brush: js">
-<strong>Opérateur :</strong> x += y
-<strong>Signification :</strong>  x  = x + y
-</pre>
-
-<h2 id="examples">Exemples</h2>
-
-<h3 id="using_addition_assignment">Utiliser l'opérateur d'addition et d'affectation</h3>
-
-<pre class="brush: js">
-let toto = "toto";
-let truc = 5;
-let machin = true;
-
-// nombre + nombre -&gt; addition
-truc += 2; // 7
-
-// booléen + nombre -&gt; addition
-machin += 1; // 2
-
-// booléen + booléen -&gt; addition
-machin += false; // 1
-
-// nombre + chaîne de caractères -&gt; concaténation
-truc += 'toto'; // "5toto"
-
-// chaîne de caractères + booléen -&gt; concaténation
-toto += false // "totofalse"
-
-// chaîne de caractères + chaîne de caractères -&gt; concaténation
-toto += 'truc' // "tototruc"</pre>
-
-<h2 id="specifications">Spécifications</h2>
-
-<p>{{Specifications}}</p>
-
-<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
-
-<p>{{Compat}}</p>
-
-<h2 id="see_also">Voir aussi</h2>
-
-<ul>
-  <li><a href="/fr/docs/Web/JavaScript/Guide/Expressions_and_Operators#assignment">Les opérateurs d'affectation dans le guide JavaScript</a></li>
-  <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Addition">L'opérateur d'addition/concaténation</a></li>
-</ul>
diff --git a/files/fr/web/javascript/reference/operators/addition_assignment/index.md b/files/fr/web/javascript/reference/operators/addition_assignment/index.md
new file mode 100644
index 0000000000..6c18bdb866
--- /dev/null
+++ b/files/fr/web/javascript/reference/operators/addition_assignment/index.md
@@ -0,0 +1,64 @@
+---
+title: Affectation après addition (+=)
+slug: Web/JavaScript/Reference/Operators/Addition_assignment
+tags:
+  - Assignment operator
+  - JavaScript
+  - Language feature
+  - Operator
+  - Reference
+browser-compat: javascript.operators.addition_assignment
+---
+{{jsSidebar("Operators")}}
+
+L'opérateur d'addition et d'affectation (`+=`) calcule la somme ou la concaténation de ses deux opérandes puis affecte le résultat à la variable représentée par l'opérande gauche. C'est le type des opérandes qui détermine s'il y a somme ou concaténation.
+
+{{EmbedInteractiveExample("pages/js/expressions-addition-assignment.html")}}
+
+## Syntax
+
+```js
+Opérateur : x += y
+Signification :  x  = x + y
+```
+
+## Exemples
+
+### Utiliser l'opérateur d'addition et d'affectation
+
+```js
+let toto = "toto";
+let truc = 5;
+let machin = true;
+
+// nombre + nombre -> addition
+truc += 2; // 7
+
+// booléen + nombre -> addition
+machin += 1; // 2
+
+// booléen + booléen -> addition
+machin += false; // 1
+
+// nombre + chaîne de caractères -> concaténation
+truc += 'toto'; // "5toto"
+
+// chaîne de caractères + booléen -> concaténation
+toto += false // "totofalse"
+
+// chaîne de caractères + chaîne de caractères -> concaténation
+toto += 'truc' // "tototruc"
+```
+
+## Spécifications
+
+{{Specifications}}
+
+## Compatibilité des navigateurs
+
+{{Compat}}
+
+## Voir aussi
+
+- [Les opérateurs d'affectation dans le guide JavaScript](/fr/docs/Web/JavaScript/Guide/Expressions_and_Operators#assignment)
+- [L'opérateur d'addition/concaténation](/fr/docs/Web/JavaScript/Reference/Operators/Addition)
diff --git a/files/fr/web/javascript/reference/operators/assignment/index.html b/files/fr/web/javascript/reference/operators/assignment/index.html
deleted file mode 100644
index afd2cae36d..0000000000
--- a/files/fr/web/javascript/reference/operators/assignment/index.html
+++ /dev/null
@@ -1,62 +0,0 @@
----
-title: Assignement (=)
-slug: Web/JavaScript/Reference/Operators/Assignment
-tags:
-  - Fonctionnalités du language
-  - JavaScript
-  - Opérateur
-  - Opérateur d'assignement
-  - Reference
-translation_of: Web/JavaScript/Reference/Operators/Assignment
-original_slug: Web/JavaScript/Reference/Opérateurs/Assignement
----
-<div>{{jsSidebar("Operators")}}</div>
-
-<p>L'opérateur d'assignement simple (<code>=</code>) est utilisé pour définir la valeur d'une variable. Il est possible d'ajouter une valeur à plusieurs variables en chaînant les variables.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/expressions-assignment.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox notranslate"><strong>Opérateur :</strong> x = y
-</pre>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Assignement_simple_et_variables_en_chaînes">Assignement simple et variables en chaînes</h3>
-
-<pre class="brush: js notranslate">// On considère les variables suivantes :
-var x = 5;
-var y = 10;
-var z = 25;
-
-x = y;
-// x est égale à 10
-
-x = y = z;
-// x, y et z sont égales à 25</pre>
-
-<h2 id="Specifications">Specifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Specification</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-assignment-operators', 'Assignment operators')}}</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-
-
-<p>{{Compat("javascript.operators.assignment")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Guide/Expressions_et_Opérateurs">Assignment operators in the JS guide</a></li>
-</ul>
diff --git a/files/fr/web/javascript/reference/operators/assignment/index.md b/files/fr/web/javascript/reference/operators/assignment/index.md
new file mode 100644
index 0000000000..b793a0aafb
--- /dev/null
+++ b/files/fr/web/javascript/reference/operators/assignment/index.md
@@ -0,0 +1,52 @@
+---
+title: Assignement (=)
+slug: Web/JavaScript/Reference/Operators/Assignment
+tags:
+  - Fonctionnalités du language
+  - JavaScript
+  - Opérateur
+  - Opérateur d'assignement
+  - Reference
+translation_of: Web/JavaScript/Reference/Operators/Assignment
+original_slug: Web/JavaScript/Reference/Opérateurs/Assignement
+---
+{{jsSidebar("Operators")}}
+
+L'opérateur d'assignement simple (`=`) est utilisé pour définir la valeur d'une variable. Il est possible d'ajouter une valeur à plusieurs variables en chaînant les variables.
+
+{{EmbedInteractiveExample("pages/js/expressions-assignment.html")}}
+
+## Syntaxe
+
+    Opérateur : x = y
+
+## Exemples
+
+### Assignement simple et variables en chaînes
+
+```js
+// On considère les variables suivantes :
+var x = 5;
+var y = 10;
+var z = 25;
+
+x = y;
+// x est égale à 10
+
+x = y = z;
+// x, y et z sont égales à 25
+```
+
+## Specifications
+
+| Specification                                                                                        |
+| ---------------------------------------------------------------------------------------------------- |
+| {{SpecName('ESDraft', '#sec-assignment-operators', 'Assignment operators')}} |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.operators.assignment")}}
+
+## Voir aussi
+
+- [Assignment operators in the JS guide](https://developer.mozilla.org/fr/docs/Web/JavaScript/Guide/Expressions_et_Opérateurs)
diff --git a/files/fr/web/javascript/reference/operators/async_function/index.html b/files/fr/web/javascript/reference/operators/async_function/index.html
deleted file mode 100644
index 2f5f493295..0000000000
--- a/files/fr/web/javascript/reference/operators/async_function/index.html
+++ /dev/null
@@ -1,115 +0,0 @@
----
-title: Expression async function
-slug: Web/JavaScript/Reference/Operators/async_function
-tags:
-  - Function
-  - JavaScript
-  - Opérateur
-  - Reference
-translation_of: Web/JavaScript/Reference/Operators/async_function
-original_slug: Web/JavaScript/Reference/Opérateurs/async_function
----
-<div>{{jsSidebar("Operators")}}</div>
-
-<p>Le mot-clé <strong><code>async function</code></strong> peut être utilisé pour définir une fonction asynchrone au sein d'une expression.</p>
-
-<div class="note">
-<p><strong>Note :</strong> Il est aussi possible de définir une fonction asynchrone en utilisant une <a href="/fr/docs/Web/JavaScript/Reference/Instructions/async_function">instruction <code>async function</code></a>.</p>
-</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">async function [<em>name</em>]([<em>param1</em>[, <em>param2[</em>, ..., <em>paramN</em>]]]) {
-   <em>instructions</em>
-}</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>name</code></dt>
- <dd>Le nom de la fonction. Il est facultatif et s'il n'est pas utilisé, la fonction est <em>anonyme</em>. Le nom utilisé est uniquement local pour le corps de la fonction.</dd>
- <dt><code>paramN</code></dt>
- <dd>Le nom d'un argument à passer à la fonction.</dd>
- <dt><code>instructions</code></dt>
- <dd>Les instructions qui composent le corps de la fonction.</dd>
-</dl>
-
-<div class="note">
-<p><strong>Note :</strong> À partir d'ES2015 (ES6), il est aussi possible d'utiliser des <a href="/fr/docs/Web/JavaScript/Reference/Fonctions/Fonctions_fl%C3%A9ch%C3%A9es">fonctions fléchées</a> pour les expressions de fonction asynchrone.</p>
-</div>
-
-<h2 id="Description">Description</h2>
-
-<p>Une expression <code>async function</code> est très proche, et partage quasiment la même syntaxe avec {{jsxref('Instructions/async_function', 'une instruction async function',"",1)}}. La différence principale entre une expression async <code>function</code> et une instruction async <code>function</code> est qu'on peut omettre le nom de la fonction dans les expressions <code>async function</code>. On peut donc utiliser une expression <code>async function</code> afin de créer une <em>IIFE</em> (pour <em>Immediately Invoked Function Expression</em>) qu'on appelle au moment de sa définition. Voir également le chapitre sur <a href="/fr/docs/Web/JavaScript/Reference/Fonctions">les fonctions</a> pour plus d'informations.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Exemple_simple">Exemple simple</h3>
-
-<pre class="brush: js">function resolveAfter2Seconds(x) {
-  return new Promise(resolve =&gt; {
-    setTimeout(() =&gt; {
-      resolve(x);
-    }, 2000);
-  });
-};
-
-(async function(x) { // fonction asynchrone immédiatement appelée
-  var a = resolveAfter2Seconds(20);
-  var b = resolveAfter2Seconds(30);
-  return x + await a + await b;
-})(10).then(v =&gt; {
-  console.log(v);  // affiche 60 après 2 secondes.
-});
-
-var add = async function(x) {
-  var a = await resolveAfter2Seconds(20);
-  var b = await resolveAfter2Seconds(30);
-  return x + a + b;
-};
-
-add(10).then(v =&gt; {
-  console.log(v);  // affiche 60 après 4 secondes.
-});
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-async-function-definitions', 'async function')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2018', '#sec-async-function-definitions', 'async function')}}</td>
-   <td>{{Spec2('ES2018')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2017', '#sec-async-function-definitions', 'async function')}}</td>
-   <td>{{Spec2('ES2017')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.operators.async_function_expression")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Instructions/async_function", "async function")}}</li>
- <li>L'objet {{jsxref("AsyncFunction")}}</li>
- <li>{{jsxref("Opérateurs/await", "await")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/operators/async_function/index.md b/files/fr/web/javascript/reference/operators/async_function/index.md
new file mode 100644
index 0000000000..38334b17ee
--- /dev/null
+++ b/files/fr/web/javascript/reference/operators/async_function/index.md
@@ -0,0 +1,87 @@
+---
+title: Expression async function
+slug: Web/JavaScript/Reference/Operators/async_function
+tags:
+  - Function
+  - JavaScript
+  - Opérateur
+  - Reference
+translation_of: Web/JavaScript/Reference/Operators/async_function
+original_slug: Web/JavaScript/Reference/Opérateurs/async_function
+---
+{{jsSidebar("Operators")}}
+
+Le mot-clé **`async function`** peut être utilisé pour définir une fonction asynchrone au sein d'une expression.
+
+> **Note :** Il est aussi possible de définir une fonction asynchrone en utilisant une [instruction `async function`](/fr/docs/Web/JavaScript/Reference/Instructions/async_function).
+
+## Syntaxe
+
+    async function [name]([param1[, param2[, ..., paramN]]]) {
+       instructions
+    }
+
+### Paramètres
+
+- `name`
+  - : Le nom de la fonction. Il est facultatif et s'il n'est pas utilisé, la fonction est _anonyme_. Le nom utilisé est uniquement local pour le corps de la fonction.
+- `paramN`
+  - : Le nom d'un argument à passer à la fonction.
+- `instructions`
+  - : Les instructions qui composent le corps de la fonction.
+
+> **Note :** À partir d'ES2015 (ES6), il est aussi possible d'utiliser des [fonctions fléchées](/fr/docs/Web/JavaScript/Reference/Fonctions/Fonctions_fl%C3%A9ch%C3%A9es) pour les expressions de fonction asynchrone.
+
+## Description
+
+Une expression `async function` est très proche, et partage quasiment la même syntaxe avec {{jsxref('Instructions/async_function', 'une instruction async function',"",1)}}. La différence principale entre une expression async `function` et une instruction async `function` est qu'on peut omettre le nom de la fonction dans les expressions `async function`. On peut donc utiliser une expression `async function` afin de créer une _IIFE_ (pour _Immediately Invoked Function Expression_) qu'on appelle au moment de sa définition. Voir également le chapitre sur [les fonctions](/fr/docs/Web/JavaScript/Reference/Fonctions) pour plus d'informations.
+
+## Exemples
+
+### Exemple simple
+
+```js
+function resolveAfter2Seconds(x) {
+  return new Promise(resolve => {
+    setTimeout(() => {
+      resolve(x);
+    }, 2000);
+  });
+};
+
+(async function(x) { // fonction asynchrone immédiatement appelée
+  var a = resolveAfter2Seconds(20);
+  var b = resolveAfter2Seconds(30);
+  return x + await a + await b;
+})(10).then(v => {
+  console.log(v);  // affiche 60 après 2 secondes.
+});
+
+var add = async function(x) {
+  var a = await resolveAfter2Seconds(20);
+  var b = await resolveAfter2Seconds(30);
+  return x + a + b;
+};
+
+add(10).then(v => {
+  console.log(v);  // affiche 60 après 4 secondes.
+});
+```
+
+## Spécifications
+
+| Spécification                                                                                        | État                         | Commentaires         |
+| ---------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName('ESDraft', '#sec-async-function-definitions', 'async function')}} | {{Spec2('ESDraft')}} |                      |
+| {{SpecName('ES2018', '#sec-async-function-definitions', 'async function')}} | {{Spec2('ES2018')}}     |                      |
+| {{SpecName('ES2017', '#sec-async-function-definitions', 'async function')}} | {{Spec2('ES2017')}}     | Définition initiale. |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.operators.async_function_expression")}}
+
+## Voir aussi
+
+- {{jsxref("Instructions/async_function", "async function")}}
+- L'objet {{jsxref("AsyncFunction")}}
+- {{jsxref("Opérateurs/await", "await")}}
diff --git a/files/fr/web/javascript/reference/operators/await/index.html b/files/fr/web/javascript/reference/operators/await/index.html
deleted file mode 100644
index de103593fa..0000000000
--- a/files/fr/web/javascript/reference/operators/await/index.html
+++ /dev/null
@@ -1,131 +0,0 @@
----
-title: await
-slug: Web/JavaScript/Reference/Operators/await
-tags:
-  - JavaScript
-  - Opérateur
-  - Reference
-translation_of: Web/JavaScript/Reference/Operators/await
-original_slug: Web/JavaScript/Reference/Opérateurs/await
----
-<div>{{jsSidebar("Operators")}}</div>
-
-<p>L'opérateur <strong><code>await</code></strong> permet d'attendre la résolution d'une promesse ({{jsxref("Promise")}}). Il ne peut être utilisé qu'au sein d'une fonction asynchrone (définie avec l'instruction {{jsxref("Instructions/async_function", "async function")}}).</p>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">[<em>rv</em>] = await <em>expression</em>;</pre>
-
-<dl>
- <dt><code>expression</code></dt>
- <dd>Une promesse ({{jsxref("Promise")}}) ou toute autre valeur dont on souhaite attendre la résolution.</dd>
- <dt><code>rv</code></dt>
- <dd>
- <p>La valeur de retour qui est celle de la promesse lorsqu'elle est résolue ou la valeur de l'expression lorsque celle-ci n'est pas une promesse.</p>
- </dd>
-</dl>
-
-<h2 id="Description">Description</h2>
-
-<p>L'expression <code>await</code> interrompt l'exécution d'une fonction asynchrone et attend la résolution d'une promesse. Lorsque la promesse est résolue (tenue ou rompue), la valeur est renvoyée et l'exécution de la fonction asynchrone reprend. Si la valeur de l'expression n'est pas une promesse, elle est convertie en une promesse résolue ayant cette valeur.</p>
-
-<p>Si la promesse est rompue, l'expression <code>await</code> lève une exception avec la raison.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<p>Si on passe une promesse à une expression <code>await</code>, celle-ci attendra jusqu'à la résolution de la promesse et renverra la valeur de résolution.</p>
-
-<pre class="brush: js">function resolveAfter2Seconds(x) {
-  return new Promise(resolve =&gt; {
-    setTimeout(() =&gt; {
-      resolve(x);
-    }, 2000);
-  });
-}
-
-async function f1() {
-  var x = await resolveAfter2Seconds(10);
-  console.log(x); // 10
-}
-f1();
-</pre>
-
-<p>Les objets dotés d'une méthode <code>then()</code> (<em>thenable</em> en anglais) seront également résolus :</p>
-
-<pre class="brush: js">async function f0() {
-  const thenable = {
-    then: function(resolve, _reject) {
-      resolve("résolu :)");
-    }
-  };
-  console.log(await thenable); // résolu :)
-}
-f0();</pre>
-
-<p>Si la valeur n'est pas une promesse, elle est convertie en une promesse résolue :</p>
-
-<pre class="brush: js">async function f2() {
-  var y = await 20;
-  console.log(y); // 20
-}
-f2();</pre>
-
-<p>Si la promesse est rejetée, la raison est fournie avec l'exception.</p>
-
-<pre class="brush: js">async function f3() {
-  try {
-    var z = await Promise.reject(30);
-  } catch (e) {
-    console.log(e); // 30
-  }
-}
-f3();</pre>
-
-<p>On peut également gérer le cas où la promesse est rejetée grâce à {{jsxref("Promise.prototype.catch()")}} :</p>
-
-<pre class="brush: js">var response = await maFonctionPromesse().catch(
-  (err) =&gt; {
-    console.log(err);
-  }
-);</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("ESDraft", "#sec-async-function-definitions", "async functions")}}</td>
-   <td>{{Spec2("ESDraft")}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName("ES2018", "#sec-async-function-definitions", "async functions")}}</td>
-   <td>{{Spec2('ES2018')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName("ES2017", "#sec-async-function-definitions", "async functions")}}</td>
-   <td>{{Spec2('ES2017')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.operators.await")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>L'instruction {{jsxref("Instructions/async_function", "async function")}}</li>
- <li>L'expression {{jsxref("Opérateurs/async_function", "async function")}}</li>
- <li>L'objet {{jsxref("AsyncFunction")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/operators/await/index.md b/files/fr/web/javascript/reference/operators/await/index.md
new file mode 100644
index 0000000000..5b30dcfeba
--- /dev/null
+++ b/files/fr/web/javascript/reference/operators/await/index.md
@@ -0,0 +1,113 @@
+---
+title: await
+slug: Web/JavaScript/Reference/Operators/await
+tags:
+  - JavaScript
+  - Opérateur
+  - Reference
+translation_of: Web/JavaScript/Reference/Operators/await
+original_slug: Web/JavaScript/Reference/Opérateurs/await
+---
+{{jsSidebar("Operators")}}
+
+L'opérateur **`await`** permet d'attendre la résolution d'une promesse ({{jsxref("Promise")}}). Il ne peut être utilisé qu'au sein d'une fonction asynchrone (définie avec l'instruction {{jsxref("Instructions/async_function", "async function")}}).
+
+## Syntaxe
+
+    [rv] = await expression;
+
+- `expression`
+  - : Une promesse ({{jsxref("Promise")}}) ou toute autre valeur dont on souhaite attendre la résolution.
+- `rv`
+  - : La valeur de retour qui est celle de la promesse lorsqu'elle est résolue ou la valeur de l'expression lorsque celle-ci n'est pas une promesse.
+
+## Description
+
+L'expression `await` interrompt l'exécution d'une fonction asynchrone et attend la résolution d'une promesse. Lorsque la promesse est résolue (tenue ou rompue), la valeur est renvoyée et l'exécution de la fonction asynchrone reprend. Si la valeur de l'expression n'est pas une promesse, elle est convertie en une promesse résolue ayant cette valeur.
+
+Si la promesse est rompue, l'expression `await` lève une exception avec la raison.
+
+## Exemples
+
+Si on passe une promesse à une expression `await`, celle-ci attendra jusqu'à la résolution de la promesse et renverra la valeur de résolution.
+
+```js
+function resolveAfter2Seconds(x) {
+  return new Promise(resolve => {
+    setTimeout(() => {
+      resolve(x);
+    }, 2000);
+  });
+}
+
+async function f1() {
+  var x = await resolveAfter2Seconds(10);
+  console.log(x); // 10
+}
+f1();
+```
+
+Les objets dotés d'une méthode `then()` (_thenable_ en anglais) seront également résolus :
+
+```js
+async function f0() {
+  const thenable = {
+    then: function(resolve, _reject) {
+      resolve("résolu :)");
+    }
+  };
+  console.log(await thenable); // résolu :)
+}
+f0();
+```
+
+Si la valeur n'est pas une promesse, elle est convertie en une promesse résolue :
+
+```js
+async function f2() {
+  var y = await 20;
+  console.log(y); // 20
+}
+f2();
+```
+
+Si la promesse est rejetée, la raison est fournie avec l'exception.
+
+```js
+async function f3() {
+  try {
+    var z = await Promise.reject(30);
+  } catch (e) {
+    console.log(e); // 30
+  }
+}
+f3();
+```
+
+On peut également gérer le cas où la promesse est rejetée grâce à {{jsxref("Promise.prototype.catch()")}} :
+
+```js
+var response = await maFonctionPromesse().catch(
+  (err) => {
+    console.log(err);
+  }
+);
+```
+
+## Spécifications
+
+| Spécification                                                                                            | État                         | Commentaires         |
+| -------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName("ESDraft", "#sec-async-function-definitions", "async functions")}} | {{Spec2("ESDraft")}} |                      |
+| {{SpecName("ES2018", "#sec-async-function-definitions", "async functions")}}     | {{Spec2('ES2018')}}     |                      |
+| {{SpecName("ES2017", "#sec-async-function-definitions", "async functions")}}     | {{Spec2('ES2017')}}     | Définition initiale. |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.operators.await")}}
+
+## Voir aussi
+
+- L'instruction {{jsxref("Instructions/async_function", "async function")}}
+- L'expression {{jsxref("Opérateurs/async_function", "async function")}}
+- L'objet {{jsxref("AsyncFunction")}}
diff --git a/files/fr/web/javascript/reference/operators/bitwise_and/index.html b/files/fr/web/javascript/reference/operators/bitwise_and/index.html
deleted file mode 100644
index b1a3ca024b..0000000000
--- a/files/fr/web/javascript/reference/operators/bitwise_and/index.html
+++ /dev/null
@@ -1,102 +0,0 @@
----
-title: ET binaire (&)
-slug: Web/JavaScript/Reference/Operators/Bitwise_AND
-tags:
-  - Bitwise operator
-  - JavaScript
-  - Language feature
-  - Operator
-  - Reference
-browser-compat: javascript.operators.bitwise_and
-translation-of: Web/JavaScript/Reference/Operators/Bitwise_AND
----
-<div>{{jsSidebar("Operators")}}</div>
-
-<p>L'opérateur ET binaire (<code>&amp;</code>) renvoie un nombre dont la représentation binaire est une séquence de bits où il y a un <code>1</code> pour chaque position où les bits des deux opérandes valent <code>1</code>.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/expressions-bitwise-and.html")}}</div>
-
-<h2 id="syntax">Syntaxe</h2>
-
-<pre class="brush: js">
-<var>a</var> &amp; <var>b</var>
-</pre>
-
-<h2 id="description">Description</h2>
-
-<p>Les opérandes sont convertis en entiers sur 32 bits et exprimés comme une séquence de bits. Les nombres sur plus de 32 bits ont leurs bits en excès écartés. Par exemple, l'entier suivant nécessite plus de 32 bits pour être représenté et il sera converti en un entier sur 32 bits :</p>
-
-<pre class="brush: js">
-Avant:  11100110111110100000000000000110000000000001
-Après:              10100000000000000110000000000001
-</pre>
-
-<p>Chaque bit du premier opérande est associé avec le bit correspondant du second opérande. Lorsque les deux valent 1, le bit correspondant du résultat sera placé à 1. Le résultat est donc construit binairement.</p>
-
-<p>La table de vérité pour l'opérateur ET est :</p>
-
-<table class="standard-table">
-  <thead>
-    <tr>
-      <th class="header" scope="col">a</th>
-      <th class="header" scope="col">b</th>
-      <th class="header" scope="col">a ET b</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td>0</td>
-      <td>0</td>
-      <td>0</td>
-    </tr>
-    <tr>
-      <td>0</td>
-      <td>1</td>
-      <td>0</td>
-    </tr>
-    <tr>
-      <td>1</td>
-      <td>0</td>
-      <td>0</td>
-    </tr>
-    <tr>
-      <td>1</td>
-      <td>1</td>
-      <td>1</td>
-    </tr>
-  </tbody>
-</table>
-
-<pre class="brush: js">
-     9 (base 10) = 00000000000000000000000000001001 (base 2)
-    14 (base 10) = 00000000000000000000000000001110 (base 2)
-                   --------------------------------
-14 &amp; 9 (base 10) = 00000000000000000000000000001000 (base 2) = 8 (base 10)
-</pre>
-
-<p>Utiliser un ET binaire sur n'importe quel nombre <code><var>x</var></code> d'une part et <code>0</code> d'autre part renverra <code>0</code>.</p>
-
-<h2 id="examples">Exemples</h2>
-
-<h3 id="using_bitwise_and">Utiliser l'opérateur ET binaire</h3>
-
-<pre class="brush: js">
-// 5: 00000000000000000000000000000101
-// 2: 00000000000000000000000000000010
-5 &amp; 2; // 0
-</pre>
-
-<h2 id="specifications">Spécifications</h2>
-
-<p>{{Specifications}}</p>
-
-<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
-
-<p>{{Compat}}</p>
-
-<h2 id="see_also">Voir aussi</h2>
-
-<ul>
-  <li><a href="/fr/docs/Web/JavaScript/Guide/Expressions_and_Operators#bitwise">Les opérateurs binaires dans le guide JavaScript</a></li>
-  <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Bitwise_AND_assignment">L'opérateur ET binaire et d'affectation</a></li>
-</ul>
diff --git a/files/fr/web/javascript/reference/operators/bitwise_and/index.md b/files/fr/web/javascript/reference/operators/bitwise_and/index.md
new file mode 100644
index 0000000000..9bfc4a4d4d
--- /dev/null
+++ b/files/fr/web/javascript/reference/operators/bitwise_and/index.md
@@ -0,0 +1,74 @@
+---
+title: ET binaire (&)
+slug: Web/JavaScript/Reference/Operators/Bitwise_AND
+tags:
+  - Bitwise operator
+  - JavaScript
+  - Language feature
+  - Operator
+  - Reference
+browser-compat: javascript.operators.bitwise_and
+---
+{{jsSidebar("Operators")}}
+
+L'opérateur ET binaire (`&`) renvoie un nombre dont la représentation binaire est une séquence de bits où il y a un `1` pour chaque position où les bits des deux opérandes valent `1`.
+
+{{EmbedInteractiveExample("pages/js/expressions-bitwise-and.html")}}
+
+## Syntaxe
+
+```js
+a & b
+```
+
+## Description
+
+Les opérandes sont convertis en entiers sur 32 bits et exprimés comme une séquence de bits. Les nombres sur plus de 32 bits ont leurs bits en excès écartés. Par exemple, l'entier suivant nécessite plus de 32 bits pour être représenté et il sera converti en un entier sur 32 bits :
+
+```js
+Avant:  11100110111110100000000000000110000000000001
+Après:              10100000000000000110000000000001
+```
+
+Chaque bit du premier opérande est associé avec le bit correspondant du second opérande. Lorsque les deux valent 1, le bit correspondant du résultat sera placé à 1. Le résultat est donc construit binairement.
+
+La table de vérité pour l'opérateur ET est :
+
+| a   | b   | a ET b |
+| --- | --- | ------ |
+| 0   | 0   | 0      |
+| 0   | 1   | 0      |
+| 1   | 0   | 0      |
+| 1   | 1   | 1      |
+
+```js
+     9 (base 10) = 00000000000000000000000000001001 (base 2)
+    14 (base 10) = 00000000000000000000000000001110 (base 2)
+                   --------------------------------
+14 & 9 (base 10) = 00000000000000000000000000001000 (base 2) = 8 (base 10)
+```
+
+Utiliser un ET binaire sur n'importe quel nombre `x` d'une part et `0` d'autre part renverra `0`.
+
+## Exemples
+
+### Utiliser l'opérateur ET binaire
+
+```js
+// 5: 00000000000000000000000000000101
+// 2: 00000000000000000000000000000010
+5 & 2; // 0
+```
+
+## Spécifications
+
+{{Specifications}}
+
+## Compatibilité des navigateurs
+
+{{Compat}}
+
+## Voir aussi
+
+- [Les opérateurs binaires dans le guide JavaScript](/fr/docs/Web/JavaScript/Guide/Expressions_and_Operators#bitwise)
+- [L'opérateur ET binaire et d'affectation](/fr/docs/Web/JavaScript/Reference/Operators/Bitwise_AND_assignment)
diff --git a/files/fr/web/javascript/reference/operators/bitwise_and_assignment/index.html b/files/fr/web/javascript/reference/operators/bitwise_and_assignment/index.html
deleted file mode 100644
index 3300032225..0000000000
--- a/files/fr/web/javascript/reference/operators/bitwise_and_assignment/index.html
+++ /dev/null
@@ -1,50 +0,0 @@
----
-title: Affectation après ET binaire (&=)
-slug: Web/JavaScript/Reference/Operators/Bitwise_AND_assignment
-tags:
-  - Assignment operator
-  - JavaScript
-  - Language feature
-  - Operator
-  - Reference
-browser-compat: javascript.operators.bitwise_and_assignment
-translation-of: Web/JavaScript/Reference/Operators/Bitwise_AND_assignment
----
-<div>{{jsSidebar("Operators")}}</div>
-
-<p>L'opérateur d'affectation après ET binaire (<code>&amp;=</code>) utilise la représentation binaire des deux opérandes, applique un ET logique entre chaque puis affecte le résultat de l'opération à la variable représentée par l'opérande gauche.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/expressions-bitwise-and-assignment.html")}}</div>
-
-<h2 id="syntax">Syntaxe</h2>
-
-<pre class="brush: js">
-<strong>Opérateur :</strong> x &amp;= y
-<strong>Signification :</strong>  x  = x &amp; y
-</pre>
-
-<h2 id="examples">Exemples</h2>
-
-<h3 id="using_bitwise_and_assignment">Utiliser l'affectation après ET binaire</h3>
-
-<pre class="brush: js">
-let a = 5;
-// 5:     00000000000000000000000000000101
-// 2:     00000000000000000000000000000010
-a &amp;= 2; // 0
-</pre>
-
-<h2 id="specifications">Spécifications</h2>
-
-<p>{{Specifications}}</p>
-
-<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
-
-<p>{{Compat}}</p>
-
-<h2 id="see_also">Voir aussi</h2>
-
-<ul>
-  <li><a href="/fr/docs/Web/JavaScript/Guide/Expressions_and_Operators#assignment">Les opérateurs d'affectation dans le guide JavaScript</a></li>
-  <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Bitwise_AND">L'opérateur ET binaire</a></li>
-</ul>
diff --git a/files/fr/web/javascript/reference/operators/bitwise_and_assignment/index.md b/files/fr/web/javascript/reference/operators/bitwise_and_assignment/index.md
new file mode 100644
index 0000000000..cf970acb34
--- /dev/null
+++ b/files/fr/web/javascript/reference/operators/bitwise_and_assignment/index.md
@@ -0,0 +1,47 @@
+---
+title: Affectation après ET binaire (&=)
+slug: Web/JavaScript/Reference/Operators/Bitwise_AND_assignment
+tags:
+  - Assignment operator
+  - JavaScript
+  - Language feature
+  - Operator
+  - Reference
+browser-compat: javascript.operators.bitwise_and_assignment
+---
+{{jsSidebar("Operators")}}
+
+L'opérateur d'affectation après ET binaire (`&=`) utilise la représentation binaire des deux opérandes, applique un ET logique entre chaque puis affecte le résultat de l'opération à la variable représentée par l'opérande gauche.
+
+{{EmbedInteractiveExample("pages/js/expressions-bitwise-and-assignment.html")}}
+
+## Syntaxe
+
+```js
+Opérateur : x &= y
+Signification :  x  = x & y
+```
+
+## Exemples
+
+### Utiliser l'affectation après ET binaire
+
+```js
+let a = 5;
+// 5:     00000000000000000000000000000101
+// 2:     00000000000000000000000000000010
+a &= 2; // 0
+```
+
+## Spécifications
+
+{{Specifications}}
+
+## Compatibilité des navigateurs
+
+{{Compat}}
+
+## Voir aussi
+
+- [Les opérateurs d'affectation dans le guide JavaScript](/fr/docs/Web/JavaScript/Guide/Expressions_and_Operators#assignment)
+- [L'opérateur ET binaire](/fr/docs/Web/JavaScript/Reference/Operators/Bitwise_AND)
diff --git a/files/fr/web/javascript/reference/operators/bitwise_not/index.html b/files/fr/web/javascript/reference/operators/bitwise_not/index.html
deleted file mode 100644
index f3e1856a90..0000000000
--- a/files/fr/web/javascript/reference/operators/bitwise_not/index.html
+++ /dev/null
@@ -1,90 +0,0 @@
----
-title: NON binaire (~)
-slug: Web/JavaScript/Reference/Operators/Bitwise_NOT
-tags:
-  - Bitwise operator
-  - JavaScript
-  - Language feature
-  - Operator
-  - Reference
-browser-compat: javascript.operators.bitwise_not
-translation_of: Web/JavaScript/Reference/Operators/Bitwise_NOT
----
-<div>{{jsSidebar("Operators")}}</div>
-
-<p>L'opérateur binaire NON (<code>~</code>) prend l'opposé de chaque bit de son opérande et fournit la valeur ainsi obtenue. À l'instar des autres opérateurs binaires, il convertit son opérande en un entier signé sur 32 bits.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/expressions-bitwise-not.html")}}</div>
-
-<h2 id="syntaxe">Syntaxe</h2>
-
-<pre class="brush: js">
-~a
-</pre>
-
-<h2 id="description">Description</h2>
-
-<p>L'opérande est converti en un entier signé sur 32 bits. Les nombres avec plus de 32 bits voient leurs bits les plus significatifs être tronqués. Voici un exemple où l'entier qui suit est supérieur à une valeur pouvant être exprimée sur 32 bits : la conversion écrête la valeur pour obtenir un entier signé sur 32 bits :</p>
-
-<pre class="brush: js">
-Avant : 11100110111110100000000000000110000000000001
-Après :             10100000000000000110000000000001
-</pre>
-
-<p>Pour former le résultat, chaque bit qui compose l'opérande est inversé.</p>
-
-<p>La table de vérité pour l'opération <code>NON</code> est :</p>
-
-<table class="standard-table">
-  <thead>
-    <tr>
-      <th class="header" scope="col">a</th>
-      <th class="header" scope="col">NON a</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td>0</td>
-      <td>1</td>
-    </tr>
-    <tr>
-      <td>1</td>
-      <td>0</td>
-    </tr>
-  </tbody>
-</table>
-
-<pre class="brush: js">
- 9 (base 10) = 00000000000000000000000000001001 (base 2)
-               --------------------------------
-~9 (base 10) = 11111111111111111111111111110110 (base 2) = -10 (base 10)
-</pre>
-
-<p>L'entier signé sur 32 bits est inversé selon <a href="https://fr.wikipedia.org/wiki/Compl%C3%A9ment_%C3%A0_deux">le complément à deux</a>. Autrement dit, la présence du bit le plus significatif est utilisée pour exprimer des entiers négatifs.</p>
-
-<p>Appliquer un NON binaire sur n'importe quel nombre <code>x</code> fournira la valeur <code>-(x + 1)</code>. Ainsi, <code>~-5</code> renverra <code>4</code>.</p>
-
-<p>Étant donné l'utilisation d'une représentation sur 32 bits, <code>~-1</code> et <code>~4294967295</code> (2^32 - 1) donneront tous les deux <code>0</code>.</p>
-
-<h2 id="examples">Exemples</h2>
-
-<h3 id="Using_bitwise_NOT">Utiliser le NON binaire</h3>
-
-<pre class="brush: js">~0;  // -1
-~-1; // 0
-~1;  // -2
-</pre>
-
-<h2 id="specifications">Spécifications</h2>
-
-<p>{{Specifications}}</p>
-
-<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
-
-<p>{{Compat}}</p>
-
-<h2 id="see_also">Voir aussi</h2>
-
-<ul>
-  <li><a href="/fr/docs/Web/JavaScript/Guide/Expressions_and_Operators#bitwise">Les opérateurs binaires dans le guide JavaScript</a></li>
-</ul>
diff --git a/files/fr/web/javascript/reference/operators/bitwise_not/index.md b/files/fr/web/javascript/reference/operators/bitwise_not/index.md
new file mode 100644
index 0000000000..e8e5f673a7
--- /dev/null
+++ b/files/fr/web/javascript/reference/operators/bitwise_not/index.md
@@ -0,0 +1,75 @@
+---
+title: NON binaire (~)
+slug: Web/JavaScript/Reference/Operators/Bitwise_NOT
+tags:
+  - Bitwise operator
+  - JavaScript
+  - Language feature
+  - Operator
+  - Reference
+translation_of: Web/JavaScript/Reference/Operators/Bitwise_NOT
+browser-compat: javascript.operators.bitwise_not
+---
+{{jsSidebar("Operators")}}
+
+L'opérateur binaire NON (`~`) prend l'opposé de chaque bit de son opérande et fournit la valeur ainsi obtenue. À l'instar des autres opérateurs binaires, il convertit son opérande en un entier signé sur 32 bits.
+
+{{EmbedInteractiveExample("pages/js/expressions-bitwise-not.html")}}
+
+## Syntaxe
+
+```js
+~a
+```
+
+## Description
+
+L'opérande est converti en un entier signé sur 32 bits. Les nombres avec plus de 32 bits voient leurs bits les plus significatifs être tronqués. Voici un exemple où l'entier qui suit est supérieur à une valeur pouvant être exprimée sur 32 bits : la conversion écrête la valeur pour obtenir un entier signé sur 32 bits :
+
+```js
+Avant : 11100110111110100000000000000110000000000001
+Après :             10100000000000000110000000000001
+```
+
+Pour former le résultat, chaque bit qui compose l'opérande est inversé.
+
+La table de vérité pour l'opération `NON` est :
+
+| a   | NON a |
+| --- | ----- |
+| 0   | 1     |
+| 1   | 0     |
+
+```js
+ 9 (base 10) = 00000000000000000000000000001001 (base 2)
+               --------------------------------
+~9 (base 10) = 11111111111111111111111111110110 (base 2) = -10 (base 10)
+```
+
+L'entier signé sur 32 bits est inversé selon [le complément à deux](https://fr.wikipedia.org/wiki/Compl%C3%A9ment_%C3%A0_deux). Autrement dit, la présence du bit le plus significatif est utilisée pour exprimer des entiers négatifs.
+
+Appliquer un NON binaire sur n'importe quel nombre `x` fournira la valeur `-(x + 1)`. Ainsi, `~-5` renverra `4`.
+
+Étant donné l'utilisation d'une représentation sur 32 bits, `~-1` et `~4294967295` (2^32 - 1) donneront tous les deux `0`.
+
+## Exemples
+
+### Utiliser le NON binaire
+
+```js
+~0;  // -1
+~-1; // 0
+~1;  // -2
+```
+
+## Spécifications
+
+{{Specifications}}
+
+## Compatibilité des navigateurs
+
+{{Compat}}
+
+## Voir aussi
+
+- [Les opérateurs binaires dans le guide JavaScript](/fr/docs/Web/JavaScript/Guide/Expressions_and_Operators#bitwise)
diff --git a/files/fr/web/javascript/reference/operators/bitwise_or/index.html b/files/fr/web/javascript/reference/operators/bitwise_or/index.html
deleted file mode 100644
index 72d4ed3043..0000000000
--- a/files/fr/web/javascript/reference/operators/bitwise_or/index.html
+++ /dev/null
@@ -1,104 +0,0 @@
----
-title: OU binaire (|)
-slug: Web/JavaScript/Reference/Operators/Bitwise_OR
-tags:
-  - Bitwise operator
-  - JavaScript
-  - Language feature
-  - Operator
-  - Reference
-browser-compat: javascript.operators.bitwise_or
-translation-of: Web/JavaScript/Reference/Operators/Bitwise_OR
----
-<div>{{jsSidebar("Operators")}}</div>
-
-<p>L'opérateur OU binaire (<code>|</code>) renvoie un nombre dont la représentation binaire est une séquence de bits où il y a un <code>1</code> pour chaque position où au moins un des bits des deux opérandes vaut <code>1</code>.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/expressions-bitwise-or.html")}}</div>
-
-<h2 id="syntax">Syntaxe</h2>
-
-<pre class="brush: js">
-<var>a</var> | <var>b</var>
-</pre>
-
-<h2 id="description">Description</h2>
-
-<p>Les opérandes sont convertis en entiers sur 32 bits et exprimés comme une séquence de bits. Les nombres sur plus de 32 bits ont leurs bits en excès écartés. Par exemple, l'entier suivant nécessite plus de 32 bits pour être représenté et il sera converti en un entier sur 32 bits :</p>
-
-<pre class="brush: js">
-Avant:  11100110111110100000000000000110000000000001
-Après:              10100000000000000110000000000001
-</pre>
-
-<p>Chaque bit du premier opérande est associé avec le bit correspondant du second opérande. Lorsqu'au moins un de ces bit vaut 1, le bit correspondant du résultat sera placé à 1. Le résultat est donc construit binairement.</p>
-
-<p>La table de vérité pour l'opérateur OU est :</p>
-
-<table class="standard-table">
-  <thead>
-    <tr>
-      <th class="header" scope="col">a</th>
-      <th class="header" scope="col">b</th>
-      <th class="header" scope="col">a OU b</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td>0</td>
-      <td>0</td>
-      <td>0</td>
-    </tr>
-    <tr>
-      <td>0</td>
-      <td>1</td>
-      <td>1</td>
-    </tr>
-    <tr>
-      <td>1</td>
-      <td>0</td>
-      <td>1</td>
-    </tr>
-    <tr>
-      <td>1</td>
-      <td>1</td>
-      <td>1</td>
-    </tr>
-  </tbody>
-</table>
-
-<pre class="brush: js">
-     9 (base 10) = 00000000000000000000000000001001 (base 2)
-    14 (base 10) = 00000000000000000000000000001110 (base 2)
-                   --------------------------------
-14 | 9 (base 10) = 00000000000000000000000000001111 (base 2) = 15 (base 10)
-</pre>
-
-<p>Utiliser le OU binaire avec n'importe quel nombre <code><var>x</var></code> d'une part et <code>0</code> renverra toujours <code><var>x</var></code>.</p>
-
-<h2 id="examples">Exemples</h2>
-
-<h3 id="using_bitwise_or">Utiliser l'opérateur OU binaire</h3>
-
-<pre class="brush: js">
-// 9  (00000000000000000000000000001001)
-// 14 (00000000000000000000000000001110)
-
-14 | 9;
-// 15 (00000000000000000000000000001111)
-</pre>
-
-<h2 id="specifications">Spécifications</h2>
-
-<p>{{Specifications}}</p>
-
-<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
-
-<p>{{Compat}}</p>
-
-<h2 id="see_also">Voir aussi</h2>
-
-<ul>
-  <li><a href="/fr/docs/Web/JavaScript/Guide/Expressions_and_Operators#bitwise">Les opérateurs binaires dans le guide JavaScript</a></li>
-  <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Bitwise_AND_assignment">L'opérateur ET binaire et d'affectation</a></li>
-</ul>
diff --git a/files/fr/web/javascript/reference/operators/bitwise_or/index.md b/files/fr/web/javascript/reference/operators/bitwise_or/index.md
new file mode 100644
index 0000000000..4565551bfb
--- /dev/null
+++ b/files/fr/web/javascript/reference/operators/bitwise_or/index.md
@@ -0,0 +1,76 @@
+---
+title: OU binaire (|)
+slug: Web/JavaScript/Reference/Operators/Bitwise_OR
+tags:
+  - Bitwise operator
+  - JavaScript
+  - Language feature
+  - Operator
+  - Reference
+browser-compat: javascript.operators.bitwise_or
+---
+{{jsSidebar("Operators")}}
+
+L'opérateur OU binaire (`|`) renvoie un nombre dont la représentation binaire est une séquence de bits où il y a un `1` pour chaque position où au moins un des bits des deux opérandes vaut `1`.
+
+{{EmbedInteractiveExample("pages/js/expressions-bitwise-or.html")}}
+
+## Syntaxe
+
+```js
+a | b
+```
+
+## Description
+
+Les opérandes sont convertis en entiers sur 32 bits et exprimés comme une séquence de bits. Les nombres sur plus de 32 bits ont leurs bits en excès écartés. Par exemple, l'entier suivant nécessite plus de 32 bits pour être représenté et il sera converti en un entier sur 32 bits :
+
+```js
+Avant:  11100110111110100000000000000110000000000001
+Après:              10100000000000000110000000000001
+```
+
+Chaque bit du premier opérande est associé avec le bit correspondant du second opérande. Lorsqu'au moins un de ces bit vaut 1, le bit correspondant du résultat sera placé à 1. Le résultat est donc construit binairement.
+
+La table de vérité pour l'opérateur OU est :
+
+| a   | b   | a OU b |
+| --- | --- | ------ |
+| 0   | 0   | 0      |
+| 0   | 1   | 1      |
+| 1   | 0   | 1      |
+| 1   | 1   | 1      |
+
+```js
+     9 (base 10) = 00000000000000000000000000001001 (base 2)
+    14 (base 10) = 00000000000000000000000000001110 (base 2)
+                   --------------------------------
+14 | 9 (base 10) = 00000000000000000000000000001111 (base 2) = 15 (base 10)
+```
+
+Utiliser le OU binaire avec n'importe quel nombre `x` d'une part et `0` renverra toujours `x`.
+
+## Exemples
+
+### Utiliser l'opérateur OU binaire
+
+```js
+// 9  (00000000000000000000000000001001)
+// 14 (00000000000000000000000000001110)
+
+14 | 9;
+// 15 (00000000000000000000000000001111)
+```
+
+## Spécifications
+
+{{Specifications}}
+
+## Compatibilité des navigateurs
+
+{{Compat}}
+
+## Voir aussi
+
+- [Les opérateurs binaires dans le guide JavaScript](/fr/docs/Web/JavaScript/Guide/Expressions_and_Operators#bitwise)
+- [L'opérateur ET binaire et d'affectation](/fr/docs/Web/JavaScript/Reference/Operators/Bitwise_AND_assignment)
diff --git a/files/fr/web/javascript/reference/operators/bitwise_or_assignment/index.html b/files/fr/web/javascript/reference/operators/bitwise_or_assignment/index.html
deleted file mode 100644
index 5c03784a45..0000000000
--- a/files/fr/web/javascript/reference/operators/bitwise_or_assignment/index.html
+++ /dev/null
@@ -1,53 +0,0 @@
----
-title: Affectation après OU binaire (|=)
-slug: Web/JavaScript/Reference/Operators/Bitwise_OR_assignment
-tags:
-  - Assignment operator
-  - JavaScript
-  - Language feature
-  - Operator
-  - Reference
-browser-compat: javascript.operators.bitwise_or_assignment
-translation-of: Web/JavaScript/Reference/Operators/Bitwise_OR_assignment
----
-<div>{{jsSidebar("Operators")}}</div>
-
-<p>L'opérateur d'affectation après OU binaire (<code>|=</code>) utilise la représentation binaire des deux opérandes et effectue un OU logique entre chaque puis affecte le résultat à la variable représentée par l'opérande gauche.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/expressions-bitwise-or-assignment.html")}}</div>
-
-<h2 id="syntax">Syntaxe</h2>
-
-<pre class="brush: js">
-<strong>Opérateur :</strong> x |= y
-<strong>Signification :</strong>  x = x | y
-</pre>
-
-<h2 id="examples">Exemples</h2>
-
-<h3 id="using_bitwise_or_assignment">Utiliser l'affectation après OU binaire</h3>
-
-<pre class="brush: js">
-let a = 5;
-a |= 2; // 7
-// 5: 00000000000000000000000000000101
-// 2: 00000000000000000000000000000010
-// -----------------------------------
-// 7: 00000000000000000000000000000111
-</pre>
-
-<h2 id="specifications">Spécifications</h2>
-
-<p>{{Specifications}}</p>
-
-<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
-
-<p>{{Compat}}</p>
-
-<h2 id="see_also">Voir aussi</h2>
-
-<ul>
-  <li><a href="/fr/docs/Web/JavaScript/Guide/Expressions_and_Operators#assignment">Les opérateurs d'affectation dans le guide JavaScript</a></li>
-  <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Bitwise_OR">L'opérateur OU binaire</a></li>
-  <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Logical_OR_assignment">L'opérateur d'affectation après OU logique (<code>||=</code>)</a></li>
-</ul>
diff --git a/files/fr/web/javascript/reference/operators/bitwise_or_assignment/index.md b/files/fr/web/javascript/reference/operators/bitwise_or_assignment/index.md
new file mode 100644
index 0000000000..0f81ba1e32
--- /dev/null
+++ b/files/fr/web/javascript/reference/operators/bitwise_or_assignment/index.md
@@ -0,0 +1,50 @@
+---
+title: Affectation après OU binaire (|=)
+slug: Web/JavaScript/Reference/Operators/Bitwise_OR_assignment
+tags:
+  - Assignment operator
+  - JavaScript
+  - Language feature
+  - Operator
+  - Reference
+browser-compat: javascript.operators.bitwise_or_assignment
+---
+{{jsSidebar("Operators")}}
+
+L'opérateur d'affectation après OU binaire (`|=`) utilise la représentation binaire des deux opérandes et effectue un OU logique entre chaque puis affecte le résultat à la variable représentée par l'opérande gauche.
+
+{{EmbedInteractiveExample("pages/js/expressions-bitwise-or-assignment.html")}}
+
+## Syntaxe
+
+```js
+Opérateur : x |= y
+Signification :  x = x | y
+```
+
+## Exemples
+
+### Utiliser l'affectation après OU binaire
+
+```js
+let a = 5;
+a |= 2; // 7
+// 5: 00000000000000000000000000000101
+// 2: 00000000000000000000000000000010
+// -----------------------------------
+// 7: 00000000000000000000000000000111
+```
+
+## Spécifications
+
+{{Specifications}}
+
+## Compatibilité des navigateurs
+
+{{Compat}}
+
+## Voir aussi
+
+- [Les opérateurs d'affectation dans le guide JavaScript](/fr/docs/Web/JavaScript/Guide/Expressions_and_Operators#assignment)
+- [L'opérateur OU binaire](/fr/docs/Web/JavaScript/Reference/Operators/Bitwise_OR)
+- [L'opérateur d'affectation après OU logique (`||=`)](/fr/docs/Web/JavaScript/Reference/Operators/Logical_OR_assignment)
diff --git a/files/fr/web/javascript/reference/operators/bitwise_xor/index.html b/files/fr/web/javascript/reference/operators/bitwise_xor/index.html
deleted file mode 100644
index eff1d79f8f..0000000000
--- a/files/fr/web/javascript/reference/operators/bitwise_xor/index.html
+++ /dev/null
@@ -1,104 +0,0 @@
----
-title: OU exclusif binaire (^)
-slug: Web/JavaScript/Reference/Operators/Bitwise_XOR
-tags:
-  - Bitwise operator
-  - JavaScript
-  - Language feature
-  - Operator
-  - Reference
-browser-compat: javascript.operators.bitwise_xor
-translation-of: Web/JavaScript/Reference/Operators/Bitwise_XOR
----
-<div>{{jsSidebar("Operators")}}</div>
-
-<p>L'opérateur binaire OU exclusif (XOR) (<code>^</code>) renvoie un nombre dont la représentation binaire est une séquence de bits où il y a un <code>1</code> pour chaque position où exactement un des bits des deux opérandes vaut <code>1</code>.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/expressions-bitwise-xor.html")}}</div>
-
-<h2 id="syntax">Syntaxe</h2>
-
-<pre class="brush: js">
-<var>a</var> ^ <var>b</var>
-</pre>
-
-<h2 id="description">Description</h2>
-
-<p>Les opérandes sont convertis en entiers sur 32 bits et exprimés comme une séquence de bits. Les nombres sur plus de 32 bits ont leurs bits en excès écartés. Par exemple, l'entier suivant nécessite plus de 32 bits pour être représenté et il sera converti en un entier sur 32 bits :</p>
-
-<pre class="brush: js">
-Avant:  11100110111110100000000000000110000000000001
-Après:              10100000000000000110000000000001
-</pre>
-
-<p>Chaque bit du premier opérande est associé avec le bit correspondant du second opérande. Lorsqu'exactement un de ces bit vaut 1, le bit correspondant du résultat sera placé à 1. Le résultat est donc construit binairement.</p>
-
-<p>La table de vérité pour l'opérateur OU exclusif (XOR) est :</p>
-
-<table class="standard-table">
-  <thead>
-    <tr>
-      <th class="header" scope="col">a</th>
-      <th class="header" scope="col">b</th>
-      <th class="header" scope="col">a XOR b</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td>0</td>
-      <td>0</td>
-      <td>0</td>
-    </tr>
-    <tr>
-      <td>0</td>
-      <td>1</td>
-      <td>1</td>
-    </tr>
-    <tr>
-      <td>1</td>
-      <td>0</td>
-      <td>1</td>
-    </tr>
-    <tr>
-      <td>1</td>
-      <td>1</td>
-      <td>0</td>
-    </tr>
-  </tbody>
-</table>
-
-<pre class="brush: js">
-.    9 (base 10) = 00000000000000000000000000001001 (base 2)
-    14 (base 10) = 00000000000000000000000000001110 (base 2)
-                   --------------------------------
-14 ^ 9 (base 10) = 00000000000000000000000000000111 (base 2) = 7 (base 10)
-</pre>
-
-<p>Utiliser le OU exclusif binaire avec n'importe quel nombre <code><var>x</var></code> d'une part et <code>0</code> d'autre part renverra <code><var>x</var></code>.</p>
-
-<h2 id="examples">Exemples</h2>
-
-<h3 id="using_bitwise_xor">Utiliser le OU exclusif binaire</h3>
-
-<pre class="brush: js">
-// 9  (00000000000000000000000000001001)
-// 14 (00000000000000000000000000001110)
-
-14 ^ 9;
-// 7  (00000000000000000000000000000111)
-</pre>
-
-<h2 id="specifications">Spécifications</h2>
-
-<p>{{Specifications}}</p>
-
-<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
-
-<p>{{Compat}}</p>
-
-<h2 id="see_also">Voir aussi</h2>
-
-<ul>
-  <li><a href="/fr/docs/Web/JavaScript/Guide/Expressions_and_Operators#bitwise">Les opérateurs binaires dans le guide javascript</a></li>
-  <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Bitwise_AND_assignment">L'opérateur ET binaire et d'affectation</a></li>
-</ul>
diff --git a/files/fr/web/javascript/reference/operators/bitwise_xor/index.md b/files/fr/web/javascript/reference/operators/bitwise_xor/index.md
new file mode 100644
index 0000000000..80a928c2f6
--- /dev/null
+++ b/files/fr/web/javascript/reference/operators/bitwise_xor/index.md
@@ -0,0 +1,76 @@
+---
+title: OU exclusif binaire (^)
+slug: Web/JavaScript/Reference/Operators/Bitwise_XOR
+tags:
+  - Bitwise operator
+  - JavaScript
+  - Language feature
+  - Operator
+  - Reference
+browser-compat: javascript.operators.bitwise_xor
+---
+{{jsSidebar("Operators")}}
+
+L'opérateur binaire OU exclusif (XOR) (`^`) renvoie un nombre dont la représentation binaire est une séquence de bits où il y a un `1` pour chaque position où exactement un des bits des deux opérandes vaut `1`.
+
+{{EmbedInteractiveExample("pages/js/expressions-bitwise-xor.html")}}
+
+## Syntaxe
+
+```js
+a ^ b
+```
+
+## Description
+
+Les opérandes sont convertis en entiers sur 32 bits et exprimés comme une séquence de bits. Les nombres sur plus de 32 bits ont leurs bits en excès écartés. Par exemple, l'entier suivant nécessite plus de 32 bits pour être représenté et il sera converti en un entier sur 32 bits :
+
+```js
+Avant:  11100110111110100000000000000110000000000001
+Après:              10100000000000000110000000000001
+```
+
+Chaque bit du premier opérande est associé avec le bit correspondant du second opérande. Lorsqu'exactement un de ces bit vaut 1, le bit correspondant du résultat sera placé à 1. Le résultat est donc construit binairement.
+
+La table de vérité pour l'opérateur OU exclusif (XOR) est :
+
+| a   | b   | a XOR b |
+| --- | --- | ------- |
+| 0   | 0   | 0       |
+| 0   | 1   | 1       |
+| 1   | 0   | 1       |
+| 1   | 1   | 0       |
+
+```js
+.    9 (base 10) = 00000000000000000000000000001001 (base 2)
+    14 (base 10) = 00000000000000000000000000001110 (base 2)
+                   --------------------------------
+14 ^ 9 (base 10) = 00000000000000000000000000000111 (base 2) = 7 (base 10)
+```
+
+Utiliser le OU exclusif binaire avec n'importe quel nombre `x` d'une part et `0` d'autre part renverra `x`.
+
+## Exemples
+
+### Utiliser le OU exclusif binaire
+
+```js
+// 9  (00000000000000000000000000001001)
+// 14 (00000000000000000000000000001110)
+
+14 ^ 9;
+// 7  (00000000000000000000000000000111)
+```
+
+## Spécifications
+
+{{Specifications}}
+
+## Compatibilité des navigateurs
+
+{{Compat}}
+
+## Voir aussi
+
+- [Les opérateurs binaires dans le guide javascript](/fr/docs/Web/JavaScript/Guide/Expressions_and_Operators#bitwise)
+- [L'opérateur ET binaire et d'affectation](/fr/docs/Web/JavaScript/Reference/Operators/Bitwise_AND_assignment)
diff --git a/files/fr/web/javascript/reference/operators/bitwise_xor_assignment/index.html b/files/fr/web/javascript/reference/operators/bitwise_xor_assignment/index.html
deleted file mode 100644
index 15074eaf64..0000000000
--- a/files/fr/web/javascript/reference/operators/bitwise_xor_assignment/index.html
+++ /dev/null
@@ -1,57 +0,0 @@
----
-title: Affectation après OU exclusif binaire (^=)
-slug: Web/JavaScript/Reference/Operators/Bitwise_XOR_assignment
-tags:
-  - Assignment operator
-  - JavaScript
-  - Language feature
-  - Operator
-  - Reference
-browser-compat: javascript.operators.bitwise_xor_assignment
-translation-of: Web/JavaScript/Reference/Operators/Bitwise_XOR_assignment
----
-<div>{{jsSidebar("Operators")}}</div>
-
-<p>L'opérateur d'affectation après OU exclusif (XOR) binaire (<code>^=</code>) utilise la représentation binaire des deux opérandes, effectue un OU exclusif entre chaque puis affecte le résultat obtenu à la variable représentée par l'opérande gauche.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/expressions-bitwise-xor-assignment.html")}}</div>
-
-<h2 id="syntax">Syntaxe</h2>
-
-<pre class="brush: js">
-<strong>Opérateur :</strong> x ^= y
-<strong>Signification :</strong>  x  = x ^ y
-</pre>
-
-<h2 id="examples">Exemples</h2>
-
-<h3 id="using_bitwise_xor_assignment">Utiliser l'affectation après OU exclusif binaire</h3>
-
-<pre class="brush: js">
-let a = 5;      // 00000000000000000000000000000101
-a ^= 3;         // 00000000000000000000000000000011
-
-console.log(a); // 00000000000000000000000000000110
-// 6
-
-let b = 5;      // 00000000000000000000000000000101
-b ^= 0;         // 00000000000000000000000000000000
-
-console.log(b); // 00000000000000000000000000000101
-// 5
-</pre>
-
-<h2 id="specifications">Spécifications</h2>
-
-<p>{{Specifications}}</p>
-
-<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
-
-<p>{{Compat}}</p>
-
-<h2 id="see_also">Voir aussi</h2>
-
-<ul>
-  <li><a href="/fr/docs/Web/JavaScript/Guide/Expressions_and_Operators#assignment">Les opérateurs d'affectation dans le guide JavaScript</a></li>
-  <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Bitwise_XOR">L'opérateur OU exclusif binaire</a></li>
-</ul>
diff --git a/files/fr/web/javascript/reference/operators/bitwise_xor_assignment/index.md b/files/fr/web/javascript/reference/operators/bitwise_xor_assignment/index.md
new file mode 100644
index 0000000000..5cc27d9ec3
--- /dev/null
+++ b/files/fr/web/javascript/reference/operators/bitwise_xor_assignment/index.md
@@ -0,0 +1,54 @@
+---
+title: Affectation après OU exclusif binaire (^=)
+slug: Web/JavaScript/Reference/Operators/Bitwise_XOR_assignment
+tags:
+  - Assignment operator
+  - JavaScript
+  - Language feature
+  - Operator
+  - Reference
+browser-compat: javascript.operators.bitwise_xor_assignment
+---
+{{jsSidebar("Operators")}}
+
+L'opérateur d'affectation après OU exclusif (XOR) binaire (`^=`) utilise la représentation binaire des deux opérandes, effectue un OU exclusif entre chaque puis affecte le résultat obtenu à la variable représentée par l'opérande gauche.
+
+{{EmbedInteractiveExample("pages/js/expressions-bitwise-xor-assignment.html")}}
+
+## Syntaxe
+
+```js
+Opérateur : x ^= y
+Signification :  x  = x ^ y
+```
+
+## Exemples
+
+### Utiliser l'affectation après OU exclusif binaire
+
+```js
+let a = 5;      // 00000000000000000000000000000101
+a ^= 3;         // 00000000000000000000000000000011
+
+console.log(a); // 00000000000000000000000000000110
+// 6
+
+let b = 5;      // 00000000000000000000000000000101
+b ^= 0;         // 00000000000000000000000000000000
+
+console.log(b); // 00000000000000000000000000000101
+// 5
+```
+
+## Spécifications
+
+{{Specifications}}
+
+## Compatibilité des navigateurs
+
+{{Compat}}
+
+## Voir aussi
+
+- [Les opérateurs d'affectation dans le guide JavaScript](/fr/docs/Web/JavaScript/Guide/Expressions_and_Operators#assignment)
+- [L'opérateur OU exclusif binaire](/fr/docs/Web/JavaScript/Reference/Operators/Bitwise_XOR)
diff --git a/files/fr/web/javascript/reference/operators/class/index.html b/files/fr/web/javascript/reference/operators/class/index.html
deleted file mode 100644
index 0b9f789d4c..0000000000
--- a/files/fr/web/javascript/reference/operators/class/index.html
+++ /dev/null
@@ -1,108 +0,0 @@
----
-title: class
-slug: Web/JavaScript/Reference/Operators/class
-tags:
-  - ECMAScript 2015
-  - JavaScript
-  - Opérateur
-  - Reference
-translation_of: Web/JavaScript/Reference/Operators/class
-original_slug: Web/JavaScript/Reference/Opérateurs/class
----
-<div>{{JSSidebar("Operators")}}</div>
-
-<p>Une <strong>expression de classe</strong> est un moyen de définir une classe avec ECMASCript 2015 (ES6). Semblable aux <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_function">expressions de fonctions</a>, les expressions de classes peuvent être nommées ou anonymes. Si l'expression est nommée, le nom de la classe ne sera local que pour le corps de la fonction. Cette syntaxe n'est qu'un « sucre syntaxique » pour faciliter l'écriture du code, elle ne modifie en aucun cas le modèle d'héritage utilisé par JavaScript qui est un modèle à base de prototypes.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/expressions-classexpression.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">var MaClasse = class [nomClasse] [extends] {
-  // corps de la classe
-};</pre>
-
-<h2 id="Description">Description</h2>
-
-<p>Une expression de classe utilise une syntaxe similaire à celle d'une <a href="/fr/docs/Web/JavaScript/Reference/Instructions/class">instruction de classe</a>. En revanche, avec les expressions de classes, il est possible de ne pas nommer la classe, ce qu'il est impossible de faire avec les instructions de classes. De plus, en utilisant les expressions de classe, on peut redéfinir/redéclarer les classes si nécessaire. Le type d'une classe sera toujours <code>"function"</code>.</p>
-
-<p>Le corps d'une classe sera exécuté en <a href="/fr/docs/Web/JavaScript/Reference/Strict_mode">mode strict</a> (pour les instructions et les expressions de classe).</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Une_expression_simple">Une expression simple</h3>
-
-<p>Ici, on utilise une expression de classe anonyme qu'on lie à la variable <code>Toto</code>.</p>
-
-<pre class="brush: js">var Toto = class {
-  constructor() {}
-  truc() {
-    return "Coucou monde !";
-  }
-};
-
-var instance = new Toto();
-instance.truc(); // "Coucou monde !"
-Toto.name; // "Toto"
-</pre>
-
-<h3 id="Des_expressions_nommées">Des expressions nommées</h3>
-
-<p>Si on souhaite faire référence à la classe, au sein du corps de la classe, on pourra utiliser une expression nommée. Le nom utilisé ne sera visible que depuis l'intérieur de la portée de l'expression de classe.</p>
-
-<pre class="brush: js">// TBD
-var Toto = class TotoNommé {
-  constructor() {}
-  quiEstLa() {
-    return TotoNommé.name;
-  }
-}
-
-var truc = new Toto;
-truc.quiEstLa(); // "TotoNommmé"
-TotoNommé.name;  // ReferenceError
-Toto.name;       // "TotoNommé"
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-class-definitions', 'Class definitions')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td>Définition initiale</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2016', '#sec-class-definitions', 'Class definitions')}}</td>
-   <td>{{Spec2('ES2016')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2017', '#sec-class-definitions', 'Class definitions')}}</td>
-   <td>{{Spec2('ES2017')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-class-definitions', 'Class definitions')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.operators.class")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_function">Les expressions <code>function</code></a></li>
- <li><a href="/fr/docs/Web/JavaScript/Reference/Instructions/class">Les déclaration <code>class</code></a></li>
- <li><a href="/fr/docs/Web/JavaScript/Reference/Classes">Les classes</a></li>
-</ul>
diff --git a/files/fr/web/javascript/reference/operators/class/index.md b/files/fr/web/javascript/reference/operators/class/index.md
new file mode 100644
index 0000000000..bb3c259708
--- /dev/null
+++ b/files/fr/web/javascript/reference/operators/class/index.md
@@ -0,0 +1,85 @@
+---
+title: class
+slug: Web/JavaScript/Reference/Operators/class
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Opérateur
+  - Reference
+translation_of: Web/JavaScript/Reference/Operators/class
+original_slug: Web/JavaScript/Reference/Opérateurs/class
+---
+{{JSSidebar("Operators")}}
+
+Une **expression de classe** est un moyen de définir une classe avec ECMASCript 2015 (ES6). Semblable aux [expressions de fonctions](/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_function), les expressions de classes peuvent être nommées ou anonymes. Si l'expression est nommée, le nom de la classe ne sera local que pour le corps de la fonction. Cette syntaxe n'est qu'un « sucre syntaxique » pour faciliter l'écriture du code, elle ne modifie en aucun cas le modèle d'héritage utilisé par JavaScript qui est un modèle à base de prototypes.
+
+{{EmbedInteractiveExample("pages/js/expressions-classexpression.html")}}
+
+## Syntaxe
+
+    var MaClasse = class [nomClasse] [extends] {
+      // corps de la classe
+    };
+
+## Description
+
+Une expression de classe utilise une syntaxe similaire à celle d'une [instruction de classe](/fr/docs/Web/JavaScript/Reference/Instructions/class). En revanche, avec les expressions de classes, il est possible de ne pas nommer la classe, ce qu'il est impossible de faire avec les instructions de classes. De plus, en utilisant les expressions de classe, on peut redéfinir/redéclarer les classes si nécessaire. Le type d'une classe sera toujours `"function"`.
+
+Le corps d'une classe sera exécuté en [mode strict](/fr/docs/Web/JavaScript/Reference/Strict_mode) (pour les instructions et les expressions de classe).
+
+## Exemples
+
+### Une expression simple
+
+Ici, on utilise une expression de classe anonyme qu'on lie à la variable `Toto`.
+
+```js
+var Toto = class {
+  constructor() {}
+  truc() {
+    return "Coucou monde !";
+  }
+};
+
+var instance = new Toto();
+instance.truc(); // "Coucou monde !"
+Toto.name; // "Toto"
+```
+
+### Des expressions nommées
+
+Si on souhaite faire référence à la classe, au sein du corps de la classe, on pourra utiliser une expression nommée. Le nom utilisé ne sera visible que depuis l'intérieur de la portée de l'expression de classe.
+
+```js
+// TBD
+var Toto = class TotoNommé {
+  constructor() {}
+  quiEstLa() {
+    return TotoNommé.name;
+  }
+}
+
+var truc = new Toto;
+truc.quiEstLa(); // "TotoNommmé"
+TotoNommé.name;  // ReferenceError
+Toto.name;       // "TotoNommé"
+```
+
+## Spécifications
+
+| Spécification                                                                                | État                         | Commentaires        |
+| -------------------------------------------------------------------------------------------- | ---------------------------- | ------------------- |
+| {{SpecName('ES2015', '#sec-class-definitions', 'Class definitions')}} | {{Spec2('ES2015')}}     | Définition initiale |
+| {{SpecName('ES2016', '#sec-class-definitions', 'Class definitions')}} | {{Spec2('ES2016')}}     |                     |
+| {{SpecName('ES2017', '#sec-class-definitions', 'Class definitions')}} | {{Spec2('ES2017')}}     |                     |
+| {{SpecName('ESDraft', '#sec-class-definitions', 'Class definitions')}} | {{Spec2('ESDraft')}} |                     |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.operators.class")}}
+
+## Voir aussi
+
+- [Les expressions `function`](/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_function)
+- [Les déclaration `class`](/fr/docs/Web/JavaScript/Reference/Instructions/class)
+- [Les classes](/fr/docs/Web/JavaScript/Reference/Classes)
diff --git a/files/fr/web/javascript/reference/operators/comma_operator/index.html b/files/fr/web/javascript/reference/operators/comma_operator/index.html
deleted file mode 100644
index e4c4d3d969..0000000000
--- a/files/fr/web/javascript/reference/operators/comma_operator/index.html
+++ /dev/null
@@ -1,104 +0,0 @@
----
-title: L'opérateur virgule
-slug: Web/JavaScript/Reference/Operators/Comma_Operator
-tags:
-  - JavaScript
-  - Opérateur
-  - Reference
-translation_of: Web/JavaScript/Reference/Operators/Comma_Operator
-original_slug: Web/JavaScript/Reference/Opérateurs/L_opérateur_virgule
----
-<div>{{jsSidebar("Operators")}}</div>
-
-<p>L'opérateur<strong> virgule</strong> permet d'évaluer chacun de ses opérandes (de la gauche vers la droite) et de renvoyer la valeur du dernier opérande.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/expressions-commaoperators.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><em>expr1</em>, <em>expr2, expr3...</em></pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>expr1</code>, <code>expr2, expr3...</code></dt>
- <dd>Des expressions JavaScript.</dd>
-</dl>
-
-<h2 id="Description">Description</h2>
-
-<p>L'opérateur virgule peut être utilisé lorsqu'on souhaite utiliser plusieurs expressions là où la syntaxe n'en attend qu'une seule. Cet opérateur est souvent utilisé dans une boucle {{jsxref("Instructions/for","for")}} afin de fournir plusieurs paramètres.</p>
-
-<p>L'opérateur virgule est à différencier de la virgule utilisée pour séparer les éléments d'un tableau ou les propriétés d'un objet ou encore les arguments d'une fonction.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<p>SI on a un tableau à 2 dimensions appelé <code>monTableau</code>, qui possède 10 éléments ayant chacun 10 éléments, on peut utiliser le code suivant avec l'opérateur virgule afin d'incrémenter deux variables (<code>i</code> et <code>j</code>) à la fois. Attention, la virgule utilisée au sein de l'instruction <code>var</code> <strong>n'est pas</strong> l'opérateur virgule (car il ne peut exister au sein d'une expression) ; ici c'est un caractère spécial de l'instruction {{jsxref("Instructions/var","var")}}. Le code qui suit affiche les éléments présents sur la diagonale de cette matrice :</p>
-
-<pre class="brush:js">for (var i = 0, j = 9; i &lt;= 9; i++, j--){
-  console.log("monTableau[" + i + "][" + j + "] = " + monTableau[i][j]);
-}</pre>
-
-<p>Dans le code suivant, <code>a</code> est défini avec la valeur de <code>b = 3</code> (qui est 3) et l'expression <code>c = 4</code> est toujours évaluée et c'est ce résultat affiché dans la console du fait de la précédence et de l'associativité des opérateurs.</p>
-
-<pre class="brush: js">var a, b, c;
-a = b = 3, c = 4; // Renvoie 4 dans la console
-console.log(a);   // 3</pre>
-
-<p>Pour isoler la précédence de l'opérateur, on peut utiliser des parenthèses :</p>
-
-<pre class="brush: js">var x, y, z;
-x = (y = 5, z = 6); // Renvoie 6 dans la console
-console.log(x);     // 6</pre>
-
-<h3 id="Effectuer_un_traitement_puis_renvoyer_une_valeur">Effectuer un traitement puis renvoyer une valeur</h3>
-
-<p>Un autre exemple consiste à effectuer un certain traitement sur la variable puis à renvoyer le résultat. Par définition, seul le dernier élément sera renvoyé mais les instructions précédentes seront bien exécutées. AInsi, on pourrait avoir :</p>
-
-<pre class="brush: js">function maFonction () {
-  var x = 0;
-
-  return (x += 1, x); // ce qui revient à renvoyer ++x
-}</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-comma-operator', 'Comma operator')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-comma-operator', 'Comma operator')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-11.14', 'Comma operator')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES1', '#sec-11.14', 'Comma operator')}}</td>
-   <td>{{Spec2('ES1')}}</td>
-   <td>Définition initiale</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.operators.comma")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>Les boucles {{jsxref("Instructions/for","for")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/operators/comma_operator/index.md b/files/fr/web/javascript/reference/operators/comma_operator/index.md
new file mode 100644
index 0000000000..e227672b69
--- /dev/null
+++ b/files/fr/web/javascript/reference/operators/comma_operator/index.md
@@ -0,0 +1,85 @@
+---
+title: L'opérateur virgule
+slug: Web/JavaScript/Reference/Operators/Comma_Operator
+tags:
+  - JavaScript
+  - Opérateur
+  - Reference
+translation_of: Web/JavaScript/Reference/Operators/Comma_Operator
+original_slug: Web/JavaScript/Reference/Opérateurs/L_opérateur_virgule
+---
+{{jsSidebar("Operators")}}
+
+L'opérateur **virgule** permet d'évaluer chacun de ses opérandes (de la gauche vers la droite) et de renvoyer la valeur du dernier opérande.
+
+{{EmbedInteractiveExample("pages/js/expressions-commaoperators.html")}}
+
+## Syntaxe
+
+    expr1, expr2, expr3...
+
+### Paramètres
+
+- `expr1`, `expr2, expr3...`
+  - : Des expressions JavaScript.
+
+## Description
+
+L'opérateur virgule peut être utilisé lorsqu'on souhaite utiliser plusieurs expressions là où la syntaxe n'en attend qu'une seule. Cet opérateur est souvent utilisé dans une boucle {{jsxref("Instructions/for","for")}} afin de fournir plusieurs paramètres.
+
+L'opérateur virgule est à différencier de la virgule utilisée pour séparer les éléments d'un tableau ou les propriétés d'un objet ou encore les arguments d'une fonction.
+
+## Exemples
+
+SI on a un tableau à 2 dimensions appelé `monTableau`, qui possède 10 éléments ayant chacun 10 éléments, on peut utiliser le code suivant avec l'opérateur virgule afin d'incrémenter deux variables (`i` et `j`) à la fois. Attention, la virgule utilisée au sein de l'instruction `var` **n'est pas** l'opérateur virgule (car il ne peut exister au sein d'une expression) ; ici c'est un caractère spécial de l'instruction {{jsxref("Instructions/var","var")}}. Le code qui suit affiche les éléments présents sur la diagonale de cette matrice :
+
+```js
+for (var i = 0, j = 9; i <= 9; i++, j--){
+  console.log("monTableau[" + i + "][" + j + "] = " + monTableau[i][j]);
+}
+```
+
+Dans le code suivant, `a` est défini avec la valeur de `b = 3` (qui est 3) et l'expression `c = 4` est toujours évaluée et c'est ce résultat affiché dans la console du fait de la précédence et de l'associativité des opérateurs.
+
+```js
+var a, b, c;
+a = b = 3, c = 4; // Renvoie 4 dans la console
+console.log(a);   // 3
+```
+
+Pour isoler la précédence de l'opérateur, on peut utiliser des parenthèses :
+
+```js
+var x, y, z;
+x = (y = 5, z = 6); // Renvoie 6 dans la console
+console.log(x);     // 6
+```
+
+### Effectuer un traitement puis renvoyer une valeur
+
+Un autre exemple consiste à effectuer un certain traitement sur la variable puis à renvoyer le résultat. Par définition, seul le dernier élément sera renvoyé mais les instructions précédentes seront bien exécutées. AInsi, on pourrait avoir :
+
+```js
+function maFonction () {
+  var x = 0;
+
+  return (x += 1, x); // ce qui revient à renvoyer ++x
+}
+```
+
+## Spécifications
+
+| Spécification                                                                        | État                         | Commentaires        |
+| ------------------------------------------------------------------------------------ | ---------------------------- | ------------------- |
+| {{SpecName('ESDraft', '#sec-comma-operator', 'Comma operator')}} | {{Spec2('ESDraft')}} |                     |
+| {{SpecName('ES6', '#sec-comma-operator', 'Comma operator')}}     | {{Spec2('ES6')}}         |                     |
+| {{SpecName('ES5.1', '#sec-11.14', 'Comma operator')}}             | {{Spec2('ES5.1')}}     |                     |
+| {{SpecName('ES1', '#sec-11.14', 'Comma operator')}}                 | {{Spec2('ES1')}}         | Définition initiale |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.operators.comma")}}
+
+## Voir aussi
+
+- Les boucles {{jsxref("Instructions/for","for")}}
diff --git a/files/fr/web/javascript/reference/operators/conditional_operator/index.html b/files/fr/web/javascript/reference/operators/conditional_operator/index.html
deleted file mode 100644
index 3df094db59..0000000000
--- a/files/fr/web/javascript/reference/operators/conditional_operator/index.html
+++ /dev/null
@@ -1,146 +0,0 @@
----
-title: L'opérateur conditionnel
-slug: Web/JavaScript/Reference/Operators/Conditional_Operator
-tags:
-  - JavaScript
-  - Opérateur
-translation_of: Web/JavaScript/Reference/Operators/Conditional_Operator
-original_slug: Web/JavaScript/Reference/Opérateurs/L_opérateur_conditionnel
----
-<div>{{jsSidebar("Operators")}}</div>
-
-<p>L'<strong>opérateur (ternaire) conditionnel</strong> est le seul opérateur JavaScript qui comporte trois opérandes. Cet opérateur est fréquemment utilisé comme raccourci pour la déclaration de {{jsxref("Instructions/if...else")}}.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/expressions-conditionaloperators.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><em>condition</em> ? <em>exprSiVrai</em> : <em>exprSiFaux</em> </pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>condition</code></dt>
- <dd>Une expression qui est évaluée en un booléen (<code>true</code> ou <code>false</code>).</dd>
- <dt><code>exprSiVrai</code></dt>
- <dd>Une expression qui est évaluée si la condition est équivalente à <code>true</code> (<em>truthy</em>)</dd>
- <dt><code>exprSiFaux</code></dt>
- <dd>Une expression qui est évaluée si la condition est équivalente à <code>false</code> (<em>falsy</em>).</dd>
-</dl>
-
-<h2 id="Description">Description</h2>
-
-<p>SI <code>condition</code> vaut <code>true</code>, l'opérateur renverra la valeur d'<code>exprSiVrai;</code> dans le cas contraire, il renverra la valeur de <code>exprSiFaux</code>. Par exemple, on peut afficher un message différent en fonction d'une variable <code>estMembre</code> avec cette déclaration :</p>
-
-<pre class="brush: js">"Le prix est : " + (estMembre ? "15 €" : "30 €")
-</pre>
-
-<p>On peut également affecter des variables dont la valeur dépendra du test :</p>
-
-<pre class="brush: js">var elvisLives = Math.PI &gt; 4 ? "Yep" : "Nope";</pre>
-
-<p>On peut enchaîner plusieurs évaluations ternaires l'une à la suite de l'autre (cet opérateur se propage de la gauche vers la droite) :</p>
-
-<pre class="brush: js">var premierControle = false,
-    secondControle = false,
-    acces = premierControle ? "Accès refusé" : secondControle ? "Accès refusé" : "Accès autorisé";
-
-console.log(acces); // "Accès autorisé"</pre>
-
-<p>Il est également possible d'utiliser cet opérateur pour effectuer l'une ou l'autre expression selon le cas de figure qui se présente :</p>
-
-<pre class="brush: js">var stop = false, age = 16;
-
-age &gt; 18 ? location.assign("continue.html") : stop = true;
-</pre>
-
-<p>en utilisant l'{{jsxref("Opérateurs/L_opérateur_virgule","opérateur virgule")}}, on peut même y placer plusieurs instructions (attention toutefois à la lisibilité et à se demander si un {{jsxref("Instructions/if...else","if...else")}} n'est pas plus approprié).</p>
-
-<pre class="brush: js">var stop = false, age = 23;
-
-age &gt; 18 ? (
-    console.log("OK, accès autorisé."),
-    location.assign("continue.html")
-) : (
-    stop = true,
-    console.log("Accès refusé !")
-);
-</pre>
-
-<p>De la même façon, on peut effectuer plusieurs opérations, encadrées par des parenthèses, avant d'affecter le résultat de l'opérateur à une variable. Conformément à l'opérateur virgule, ce sera <strong><em>la dernière valeur qui sera affectée</em></strong>. Ici aussi, attention à la lisibilité du code relativement à un <code>if...else</code>.</p>
-
-<pre class="brush: js">var age = 16;
-
-var url = age &gt; 18 ? (
-    console.log("Accès autorisé."),
-    // console.log renvoie "undefined", mais cela importe peu car
-    // ce n'est pas le dernier élément de l'expression
-    "continue.html" // la valeur à affecter si âge &gt; 18
-) : (
-    console.log("Accès refusé !"),
-    // etc.
-    "stop.html" // la valeur à affecter si âge &lt;= 18
-);
-
-location.assign(url); // "stop.html"</pre>
-
-<h3 id="Utiliser_l'opérateur_ternaire_dans_la_valeur_de_retour">Utiliser l'opérateur ternaire dans la valeur de retour</h3>
-
-<p>On peut utiliser l'opérateur ternaire (voire une imbrication de celui-ci) pour remplacer certaines formulations avec <code>if...else</code> où <code>return</code> est la seule instruction utilisée :</p>
-
-<pre class="brush: js">var func1 = function( .. ) {
-  if (condition1) { return valeur1 }
-  else if (condition2) { return valeur2 }
-  else if (condition3) { return valeur3 }
-  else { return value4 }
-}
-
-var func2 = function( .. ) {
-  return condition1 ? valeur1
-       : condition2 ? valeur2
-       : condition3 ? valeur3
-       :              valeur4
-}</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-conditional-operator', 'Conditional Operator')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-conditional-operator', 'Conditional Operator')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-11.12', 'The conditional operator')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES1', '#sec-11.12', 'The conditional operator')}}</td>
-   <td>{{Spec2('ES1')}}</td>
-   <td>Définition initiale, implémentée avec JavaScript 1.0.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.operators.conditional")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>L'instruction {{jsxref("Instructions/if...else","if...else")}}</li>
- <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Optional_chaining">Le chaînage optionnel</a></li>
-</ul>
diff --git a/files/fr/web/javascript/reference/operators/conditional_operator/index.md b/files/fr/web/javascript/reference/operators/conditional_operator/index.md
new file mode 100644
index 0000000000..d48dfca9fd
--- /dev/null
+++ b/files/fr/web/javascript/reference/operators/conditional_operator/index.md
@@ -0,0 +1,130 @@
+---
+title: L'opérateur conditionnel
+slug: Web/JavaScript/Reference/Operators/Conditional_Operator
+tags:
+  - JavaScript
+  - Opérateur
+translation_of: Web/JavaScript/Reference/Operators/Conditional_Operator
+original_slug: Web/JavaScript/Reference/Opérateurs/L_opérateur_conditionnel
+---
+{{jsSidebar("Operators")}}
+
+L'**opérateur (ternaire) conditionnel** est le seul opérateur JavaScript qui comporte trois opérandes. Cet opérateur est fréquemment utilisé comme raccourci pour la déclaration de {{jsxref("Instructions/if...else")}}.
+
+{{EmbedInteractiveExample("pages/js/expressions-conditionaloperators.html")}}
+
+## Syntaxe
+
+    condition ? exprSiVrai : exprSiFaux
+
+### Paramètres
+
+- `condition`
+  - : Une expression qui est évaluée en un booléen (`true` ou `false`).
+- `exprSiVrai`
+  - : Une expression qui est évaluée si la condition est équivalente à `true` (_truthy_)
+- `exprSiFaux`
+  - : Une expression qui est évaluée si la condition est équivalente à `false` (_falsy_).
+
+## Description
+
+SI `condition` vaut `true`, l'opérateur renverra la valeur d'`exprSiVrai;` dans le cas contraire, il renverra la valeur de `exprSiFaux`. Par exemple, on peut afficher un message différent en fonction d'une variable `estMembre` avec cette déclaration :
+
+```js
+"Le prix est : " + (estMembre ? "15 €" : "30 €")
+```
+
+On peut également affecter des variables dont la valeur dépendra du test :
+
+```js
+var elvisLives = Math.PI > 4 ? "Yep" : "Nope";
+```
+
+On peut enchaîner plusieurs évaluations ternaires l'une à la suite de l'autre (cet opérateur se propage de la gauche vers la droite) :
+
+```js
+var premierControle = false,
+    secondControle = false,
+    acces = premierControle ? "Accès refusé" : secondControle ? "Accès refusé" : "Accès autorisé";
+
+console.log(acces); // "Accès autorisé"
+```
+
+Il est également possible d'utiliser cet opérateur pour effectuer l'une ou l'autre expression selon le cas de figure qui se présente :
+
+```js
+var stop = false, age = 16;
+
+age > 18 ? location.assign("continue.html") : stop = true;
+```
+
+en utilisant l'{{jsxref("Opérateurs/L_opérateur_virgule","opérateur virgule")}}, on peut même y placer plusieurs instructions (attention toutefois à la lisibilité et à se demander si un {{jsxref("Instructions/if...else","if...else")}} n'est pas plus approprié).
+
+```js
+var stop = false, age = 23;
+
+age > 18 ? (
+    console.log("OK, accès autorisé."),
+    location.assign("continue.html")
+) : (
+    stop = true,
+    console.log("Accès refusé !")
+);
+```
+
+De la même façon, on peut effectuer plusieurs opérations, encadrées par des parenthèses, avant d'affecter le résultat de l'opérateur à une variable. Conformément à l'opérateur virgule, ce sera **_la dernière valeur qui sera affectée_**. Ici aussi, attention à la lisibilité du code relativement à un `if...else`.
+
+```js
+var age = 16;
+
+var url = age > 18 ? (
+    console.log("Accès autorisé."),
+    // console.log renvoie "undefined", mais cela importe peu car
+    // ce n'est pas le dernier élément de l'expression
+    "continue.html" // la valeur à affecter si âge > 18
+) : (
+    console.log("Accès refusé !"),
+    // etc.
+    "stop.html" // la valeur à affecter si âge <= 18
+);
+
+location.assign(url); // "stop.html"
+```
+
+### Utiliser l'opérateur ternaire dans la valeur de retour
+
+On peut utiliser l'opérateur ternaire (voire une imbrication de celui-ci) pour remplacer certaines formulations avec `if...else` où `return` est la seule instruction utilisée :
+
+```js
+var func1 = function( .. ) {
+  if (condition1) { return valeur1 }
+  else if (condition2) { return valeur2 }
+  else if (condition3) { return valeur3 }
+  else { return value4 }
+}
+
+var func2 = function( .. ) {
+  return condition1 ? valeur1
+       : condition2 ? valeur2
+       : condition3 ? valeur3
+       :              valeur4
+}
+```
+
+## Spécifications
+
+| Spécification                                                                                        | Statut                       | Commentaires                                          |
+| ---------------------------------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- |
+| {{SpecName('ESDraft', '#sec-conditional-operator', 'Conditional Operator')}} | {{Spec2('ESDraft')}} |                                                       |
+| {{SpecName('ES6', '#sec-conditional-operator', 'Conditional Operator')}}     | {{Spec2('ES6')}}         |                                                       |
+| {{SpecName('ES5.1', '#sec-11.12', 'The conditional operator')}}                 | {{Spec2('ES5.1')}}     |                                                       |
+| {{SpecName('ES1', '#sec-11.12', 'The conditional operator')}}                     | {{Spec2('ES1')}}         | Définition initiale, implémentée avec JavaScript 1.0. |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.operators.conditional")}}
+
+## Voir aussi
+
+- L'instruction {{jsxref("Instructions/if...else","if...else")}}
+- [Le chaînage optionnel](/fr/docs/Web/JavaScript/Reference/Operators/Optional_chaining)
diff --git a/files/fr/web/javascript/reference/operators/decrement/index.html b/files/fr/web/javascript/reference/operators/decrement/index.html
deleted file mode 100644
index 291f46393f..0000000000
--- a/files/fr/web/javascript/reference/operators/decrement/index.html
+++ /dev/null
@@ -1,70 +0,0 @@
----
-title: Décrémentation (--)
-slug: Web/JavaScript/Reference/Operators/Decrement
-tags:
-  - Decrement
-  - JavaScript
-  - Language feature
-  - Operator
-browser-compat: javascript.operators.decrement
-translation_of: Web/JavaScript/Reference/Operators/Decrement
----
-<div>{{jsSidebar("Operators")}}</div>
-
-<p>L'opérateur de décrémentation (<code>--</code>) permet de décrémenter (c'est-à-dire de soustraire un) son opérande et renvoie une valeur qui est le résultat avant ou après la modification.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/expressions-decrement.html")}}</div>
-
-<h2 id="syntax">Syntaxe</h2>
-
-<pre class="brush: js">
-<strong>Opérateur :</strong> <var>x</var>-- ou --<var>x</var>
-</pre>
-
-<h2 id="description">Description</h2>
-
-<p>Utilisé comme suffixe (l'opérateur étant placé après l'opérande), comme dans <code><var>x</var>--</code>, l'opérateur décrémentera la valeur et renverra la valeur avant l'incrément.</p>
-
-<p>Utilisé comme préfixe (l'opérateur étant placé avant l'opérande), comme dans <code>--<var>x</var></code>, l'opérateur décrémentera la valeur et renverra la valeur après l'incrément.</p>
-
-<h2 id="examples">Exemples</h2>
-
-<h3 id="postfix_decrement">Décrément en suffixe</h3>
-
-<pre class="brush: js">let x = 3;
-let y = x--;
-
-// y = 3
-// x = 2
-</pre>
-
-<h3 id="prefix_decrement">Décrément en préfixe</h3>
-
-<pre class="brush: js">let a = 2;
-let b = --a;
-
-// a = 1
-// b = 1
-</pre>
-
-<h2 id="specifications">Spécifications</h2>
-
-<p>{{Specifications}}</p>
-
-<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
-
-<p>{{Compat}}</p>
-
-<h2 id="see_also">Voir aussi</h2>
-
-<ul>
-  <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Addition">Opérateur d'addition</a></li>
-  <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Subtraction">Opérateur de soustraction</a></li>
-  <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Division">Opérateur de division</a></li>
-  <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Multiplication">Opérateur de multiplication</a></li>
-  <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Remainder">Opérateur de reste</a></li>
-  <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Exponentiation">Opérateur d'exponentiation</a></li>
-  <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Increment">Opérateur d'incrémentation</a></li>
-  <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Unary_negation">Opérateur de négation unaire</a></li>
-  <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Unary_plus">Opérateur de plus unaire</a></li>
-</ul>
diff --git a/files/fr/web/javascript/reference/operators/decrement/index.md b/files/fr/web/javascript/reference/operators/decrement/index.md
new file mode 100644
index 0000000000..53c894a20c
--- /dev/null
+++ b/files/fr/web/javascript/reference/operators/decrement/index.md
@@ -0,0 +1,70 @@
+---
+title: Décrémentation (--)
+slug: Web/JavaScript/Reference/Operators/Decrement
+tags:
+  - Decrement
+  - JavaScript
+  - Language feature
+  - Operator
+translation_of: Web/JavaScript/Reference/Operators/Decrement
+browser-compat: javascript.operators.decrement
+---
+{{jsSidebar("Operators")}}
+
+L'opérateur de décrémentation (`--`) permet de décrémenter (c'est-à-dire de soustraire un) son opérande et renvoie une valeur qui est le résultat avant ou après la modification.
+
+{{EmbedInteractiveExample("pages/js/expressions-decrement.html")}}
+
+## Syntaxe
+
+```js
+Opérateur : x-- ou --x
+```
+
+## Description
+
+Utilisé comme suffixe (l'opérateur étant placé après l'opérande), comme dans `x--`, l'opérateur décrémentera la valeur et renverra la valeur avant l'incrément.
+
+Utilisé comme préfixe (l'opérateur étant placé avant l'opérande), comme dans `--x`, l'opérateur décrémentera la valeur et renverra la valeur après l'incrément.
+
+## Exemples
+
+### Décrément en suffixe
+
+```js
+let x = 3;
+let y = x--;
+
+// y = 3
+// x = 2
+```
+
+### Décrément en préfixe
+
+```js
+let a = 2;
+let b = --a;
+
+// a = 1
+// b = 1
+```
+
+## Spécifications
+
+{{Specifications}}
+
+## Compatibilité des navigateurs
+
+{{Compat}}
+
+## Voir aussi
+
+- [Opérateur d'addition](/fr/docs/Web/JavaScript/Reference/Operators/Addition)
+- [Opérateur de soustraction](/fr/docs/Web/JavaScript/Reference/Operators/Subtraction)
+- [Opérateur de division](/fr/docs/Web/JavaScript/Reference/Operators/Division)
+- [Opérateur de multiplication](/fr/docs/Web/JavaScript/Reference/Operators/Multiplication)
+- [Opérateur de reste](/fr/docs/Web/JavaScript/Reference/Operators/Remainder)
+- [Opérateur d'exponentiation](/fr/docs/Web/JavaScript/Reference/Operators/Exponentiation)
+- [Opérateur d'incrémentation](/fr/docs/Web/JavaScript/Reference/Operators/Increment)
+- [Opérateur de négation unaire](/fr/docs/Web/JavaScript/Reference/Operators/Unary_negation)
+- [Opérateur de plus unaire](/fr/docs/Web/JavaScript/Reference/Operators/Unary_plus)
diff --git a/files/fr/web/javascript/reference/operators/delete/index.html b/files/fr/web/javascript/reference/operators/delete/index.html
deleted file mode 100644
index 30d049ae30..0000000000
--- a/files/fr/web/javascript/reference/operators/delete/index.html
+++ /dev/null
@@ -1,302 +0,0 @@
----
-title: L'opérateur delete
-slug: Web/JavaScript/Reference/Operators/delete
-tags:
-  - JavaScript
-  - Opérateur
-  - Reference
-translation_of: Web/JavaScript/Reference/Operators/delete
-original_slug: Web/JavaScript/Reference/Opérateurs/L_opérateur_delete
----
-<div>{{jsSidebar("Operators")}}</div>
-
-<p>L'opérateur <strong><code>delete</code></strong> permet de retirer une propriété d'un objet.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/expressions-deleteoperator.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">delete <em>expression</em></pre>
-
-<p>où <em>expression</em> est évaluée comme une référence à une propriété :</p>
-
-<pre class="syntaxbox">delete <em>objet.propriete</em>
-delete <em>objet</em>['propriete']
-</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>objet</code></dt>
- <dd>Le nom d'un objet ou une expression dont l'évaluation fournit un objet.</dd>
- <dt><code>propriete</code></dt>
- <dd>La propriété qu'on souhaite supprimer.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p><code>true</code> pour tous les cas sauf lorsque la propriété est une propriété <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty">propre</a> <a href="/fr/docs/Web/JavaScript/Reference/Erreurs/Cant_delete">non-configurable</a> auquel cas <code>false</code> est renvoyé en mode non-strict.</p>
-
-<h3 id="Exceptions">Exceptions</h3>
-
-<p>Cet opérateur lève une exception {{jsxref("TypeError")}} en <a href="/fr/docs/Web/JavaScript/Reference/Strict_mode">mode strict</a> si la propriété est une propriété propre qui est non-configurable.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>Contrairement à ce qu'on pourrait penser, l'opérateur <code>delete</code> n'a rien à voir avec une libération de mémoire directe. La gestion de la mémoire en JavaScript est réalisée de façon indirecte en tenant compte des références, <a href="/fr/docs/Web/JavaScript/Gestion_de_la_mémoire">voir cette page pour plus de détails</a>.</p>
-
-<p>L'opérateur <code><strong>delete</strong></code> permet de retirer une propriété donnée d'un objet. Lorsque la suppression se déroule sans problème, l'opération renvoie <code>true</code>, sinon c'est la valeur <code>false</code> qui est renvoyée. Voici quelques scénarios importants qui précisent ce comportement :</p>
-
-<ul>
- <li>Si la propriété qu'on souhaite supprimer n'existe pas, <code>delete</code> n'aura aucun effet et l'opération renverra <code>true</code></li>
- <li>Si une propriété du même nom existe sur la chaîne de prototypes, après la suppression, l'objet utilisera la propriété disponible sur la chaîne de prototypes. Autrement dit, <code>delete</code> n'a d'effet que sur les propriétés directement rattachées à un objet (les propriétés « propres »).</li>
- <li>Toute propriété déclarée avec {{jsxref("Instructions/var","var")}} ne peut pas être supprimée de la portée globale ou de la portée d'une fonction.
-  <ul>
-   <li>Aussi, <code>delete</code> ne pourra supprimer des fonctions de la portée globale (que ce soit une définition de fonction ou une expression de fonction).</li>
-   <li>Les fonctions qui font partie d'un objet (à l'exception de la portée globale) peuvent être supprimées avec <code>delete</code>.</li>
-  </ul>
- </li>
- <li>Toute propriété déclarée avec {{jsxref("Instructions/let","let")}} ou {{jsxref("Instructions/const","const")}} ne peut être supprimée de la portée dans laquelle elles ont été créées.</li>
- <li>Les propriétés non-configurable ne peuvent pas être retirées. Cela inclut les propriétés des objets natifs comme {{jsxref("Math")}}, {{jsxref("Array")}}, {{jsxref("Object")}} et les propriétés qui sont créées comme non-configurable grâce à la méthode {{jsxref("Object.defineProperty()")}}.</li>
-</ul>
-
-<p>Voici un fragment de code qui illustre certains cas :</p>
-
-<pre class="brush: js">var Employe = {
-  age: 28,
-  nom: 'abc',
-  designation: 'developpeur'
-}
-
-console.log(delete Employe.nom);  // renvoie true
-console.log(delete Employe.age);  // renvoie true
-
-// Lorsqu'on souhaite supprimer une propriété
-// inexistante, on obtient true
-console.log(delete Employe.salaire); // renvoie true
-</pre>
-
-<h3 id="Les_propriétés_non-configurables">Les propriétés non-configurables</h3>
-
-<p>Lorsqu'une propriété est marquée comme non-configurable, <code>delete</code> n'aura aucun effet et l'opération renverra <code>false</code>. En mode strict, cela déclenchera une exception <code>TypeError</code>.</p>
-
-<pre class="brush: js">var Employe = {};
-Object.defineProperty(Employe, 'nom', {configurable: false});
-
-console.log(delete Employe.nom);  // renvoie false
-</pre>
-
-<p>{{jsxref("Instructions/var","var")}} (ou <code>let</code> ou <code>const</code>) crée des propriétés non-configurables qui ne peuvent pas être supprimées via <code>delete</code> :</p>
-
-<pre class="brush: js">var autreNom = 'XYZ';
-
-// On peut accéder à la description de cette
-// propriété globale grâce à :
-Object.getOwnPropertyDescriptor(window, 'autreNom')
-
-/* Object {value: "XYZ",
-                  writable: true,
-                  enumerable: true,
-                  <strong>configurable: false</strong>}
-*/
-
-// On voit que "autreNom", ajouté avec var
-// est marquée comme "non-configurable"
-
-delete autreNom;   // renvoie false</pre>
-
-<p>En mode strict, cela aurait déclenché une exception.</p>
-
-<h3 id="Mode_strict_ou_non-strict">Mode strict ou non-strict ?</h3>
-
-<p>Lorsqu'on est en mode strict, si <code>delete</code> est utilisé sur une référence directe à une variable, un argument de fonction ou un nom de fonction, il déclenchera une exception {{jsxref("SyntaxError")}}<strong>.</strong></p>
-
-<p>Toute variable définie avec <code>var</code> est marquée comme non-configurable. Dans l'exemple qui suit, <code>salaire</code> est non-configurable et ne peut pas être supprimé. En mode non-strict, l'opération <code>delete</code> renverra <code>false</code>.</p>
-
-<pre class="brush: js">function Employe() {
-  delete salaire;
-  var salaire;
-}
-
-Employe();
-</pre>
-
-<p>Voyons comment ce code se comporte en mode strict : au lieu de renvoyer false, l'instruction lève une exception <code>SyntaxError</code>.</p>
-
-<pre class="brush: js">"use strict";
-
-function Employe() {
-  delete salaire;  // SyntaxError
-  var salaire;
-}
-
-// De même, tout accès direct à une fonction
-// avec delete lèvera une SyntaxError
-
-function DemoFunction() {
-  //du code
-}
-
-delete DemoFunction; // SyntaxError
-</pre>
-
-<h2 id="Exemples">Exemples</h2>
-
-<pre class="brush: js">// on crée la propriété adminName sur la portée globale
-adminName = 'xyz';
-
-// on crée la propriété empCount sur la portée globale
-// On utilise var, elle est donc non-configurable
-var empCount = 43;
-
-EmployeeDetails = {
-  name: 'xyz',
-  age: 5,
-  designation: 'Developer'
-};
-
-// adminName est une propriété de la portée globale
-// qui peut être supprimée car configurable.
-delete adminName;       // renvoie true
-
-// En revanche empCount n'est pas configurable
-// car c'est var qui a été utilisée.
-delete empCount;        // renvoie false
-
-// delete peut être utilisé pour retirer des propriétés
-// d'objets
-delete EmployeeDetails.name; // renvoie true
-
-<strong>// </strong>Même lorsque la propriété n'existe pas,
-// l'opération renvoie "true"
-delete EmployeeDetails.salary; // renvoie true
-
-// delete n'a pas d'impact sur les propriétés
-// statiques natives
-delete Math.PI; // renvoie false
-
-// EmployeeDetails est une propriété de la portée globale
-// définie sans var, elle est donc configurable
-delete EmployeeDetails;   // renvoie true
-
-function f() {
-  var z = 44;
-
-  // delete n'a pas d'impact sur les noms
-  // des variables locales
-  delete z;     // returns false
-}
-</pre>
-
-<h3 id="delete_et_la_chaîne_de_prototypes"><code>delete</code> et la chaîne de prototypes</h3>
-
-<p>Dans l'exemple qui suit, on supprime une propriété directement rattachée à un objet (une propriété « propre ») alors qu'une propriété du même nom existe sur la chaîne de prototypes :</p>
-
-<pre class="brush: js">function Toto(){
-  this.truc = 10;
-}
-
-Toto.prototype.truc = 42;
-
-var toto = new Toto();
-
-// L'instruction suivante renvoie true,
-// après avoir effectivement supprimé
-// la propriété de l'objet toto
-delete toto.truc;
-
-// toto.truc est toujours disponible car
-// elle est disponible sur la chaîne de
-// prototypes
-console.log(toto.truc);
-
-// Ici on supprime la propriété du prototype
-delete Toto.prototype.truc;
-
-// On aura "undefined" dans la console
-// car l'objet n'hérite plus de cette propriété
-// qui a été supprimée
-console.log(toto.truc);</pre>
-
-<h3 id="Supprimer_les_éléments_dun_tableau">Supprimer les éléments d'un tableau</h3>
-
-<p>Lorsqu'on supprime un élément d'un tableau, la longueur du tableau n'est pas modifiée. Cela vaut également lorsqu'on supprime le dernier élément du tableau.</p>
-
-<p>Lorsqu'on utilise <code>delete</code> pour retirer un élément du tableau, cet élément n'est plus dans le tableau. Dans l'exemple suivant, on retire <code>arbres[3]</code> grâce à <code>delete</code>.</p>
-
-<pre class="brush: js">var arbres = ["cèdre","pin","chêne","érable","sapin"];
-delete arbres[3];
-if (3 in arbres) {
-    // Le code ici ne sera pas exécuté
-}</pre>
-
-<p>Si on veut conserver l'existence d'un élément du tableau avec une valeur indéfinie, on pourra affecter la valeur <code>undefined</code> à cet élément. Ainsi, contrairement à l'exemple précédent, en utilisant <code>undefined</code>, <code>arbres[3]</code> continue d'être présent :</p>
-
-<pre class="brush: js">var arbres = ["cèdre","pin","chêne","érable","sapin"];
-arbres[3] = undefined;
-if (3 in arbres) {
-  // Le code ici sera bien exécuté
-}</pre>
-
-<p>Si on souhaite plutôt retirer un élément du tableau en changeant le contenu du tableau, on pourra utiliser la méthode {{jsxref("Array.splice()")}}. Dans l'exemple qui suit, la valeur actuelle de <code>arbres[3]</code> est retirée du tableau grâce à <code>splice()</code> mais l'index suivant se décale et arbres[4] devient arbres[3] :</p>
-
-<pre class="brush: js">var arbres = ["cèdre","pin","chêne","érable","sapin"];
-if (3 in arbres) {
- // Le code ici sera exécuté
-}
-arbres.splice(3, 1);
-console.log(arbres); // ["cèdre","pin","chêne","sapin"];
-if (3 in arbres) {
- // Le code ici sera également exécuté
-}
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-delete-operator', 'The delete Operator')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-delete-operator', 'The delete Operator')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-11.4.1', 'The delete Operator')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES1', '#sec-11.4.1', 'The delete Operator')}}</td>
-   <td>{{Spec2('ES1')}}</td>
-   <td>Définition initiale. Implémenté avec JavaScript 1.2.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.operators.delete")}}</p>
-
-<h2 id="Notes_de_compatibilité">Notes de compatibilité</h2>
-
-<p>Bien que l'ordre d'itération des objets soit laissé à l'implémentation selon le standard ECMAScript, il semblerait que la plupart des navigateurs utilise un ordre d'itération basé sur l'ordre d'ajout des propriétés (au moins pour les propriétés propres). Toutefois, pour Internet Explorer, lorsqu'on utilise <code>delete</code> sur une propriété puis qu'on redéfinit plus tard une propriété avec le même nom, l'ordre d'itération de cette propriété sera le même que précédemment (alors que dans les autres navigateurs, cette « nouvelle » propriété sera parcourue en dernier).</p>
-
-<p>Aussi, si on veut simuler un tableau associatif ordonné de façon transparente et pour plusieurs navigateurs, il faudra utiliser deux tableaux ou, mieux encore, un objet {{jsxref("Map")}} si celui-ci est disponible.</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="https://perfectionkills.com/understanding-delete/">Une analyse de <code>delete</code> par Kangax, en anglais</a></li>
- <li>{{jsxref("Reflect.deleteProperty()")}}</li>
- <li>{{jsxref("Map.prototype.delete()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/operators/delete/index.md b/files/fr/web/javascript/reference/operators/delete/index.md
new file mode 100644
index 0000000000..76b7f120bd
--- /dev/null
+++ b/files/fr/web/javascript/reference/operators/delete/index.md
@@ -0,0 +1,285 @@
+---
+title: L'opérateur delete
+slug: Web/JavaScript/Reference/Operators/delete
+tags:
+  - JavaScript
+  - Opérateur
+  - Reference
+translation_of: Web/JavaScript/Reference/Operators/delete
+original_slug: Web/JavaScript/Reference/Opérateurs/L_opérateur_delete
+---
+{{jsSidebar("Operators")}}
+
+L'opérateur **`delete`** permet de retirer une propriété d'un objet.
+
+{{EmbedInteractiveExample("pages/js/expressions-deleteoperator.html")}}
+
+## Syntaxe
+
+    delete expression
+
+où _expression_ est évaluée comme une référence à une propriété :
+
+    delete objet.propriete
+    delete objet['propriete']
+
+### Paramètres
+
+- `objet`
+  - : Le nom d'un objet ou une expression dont l'évaluation fournit un objet.
+- `propriete`
+  - : La propriété qu'on souhaite supprimer.
+
+### Valeur de retour
+
+`true` pour tous les cas sauf lorsque la propriété est une propriété [propre](/fr/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty) [non-configurable](/fr/docs/Web/JavaScript/Reference/Erreurs/Cant_delete) auquel cas `false` est renvoyé en mode non-strict.
+
+### Exceptions
+
+Cet opérateur lève une exception {{jsxref("TypeError")}} en [mode strict](/fr/docs/Web/JavaScript/Reference/Strict_mode) si la propriété est une propriété propre qui est non-configurable.
+
+## Description
+
+Contrairement à ce qu'on pourrait penser, l'opérateur `delete` n'a rien à voir avec une libération de mémoire directe. La gestion de la mémoire en JavaScript est réalisée de façon indirecte en tenant compte des références, [voir cette page pour plus de détails](/fr/docs/Web/JavaScript/Gestion_de_la_mémoire).
+
+L'opérateur **`delete`** permet de retirer une propriété donnée d'un objet. Lorsque la suppression se déroule sans problème, l'opération renvoie `true`, sinon c'est la valeur `false` qui est renvoyée. Voici quelques scénarios importants qui précisent ce comportement :
+
+- Si la propriété qu'on souhaite supprimer n'existe pas, `delete` n'aura aucun effet et l'opération renverra `true`
+- Si une propriété du même nom existe sur la chaîne de prototypes, après la suppression, l'objet utilisera la propriété disponible sur la chaîne de prototypes. Autrement dit, `delete` n'a d'effet que sur les propriétés directement rattachées à un objet (les propriétés « propres »).
+- Toute propriété déclarée avec {{jsxref("Instructions/var","var")}} ne peut pas être supprimée de la portée globale ou de la portée d'une fonction.
+
+  - Aussi, `delete` ne pourra supprimer des fonctions de la portée globale (que ce soit une définition de fonction ou une expression de fonction).
+  - Les fonctions qui font partie d'un objet (à l'exception de la portée globale) peuvent être supprimées avec `delete`.
+
+- Toute propriété déclarée avec {{jsxref("Instructions/let","let")}} ou {{jsxref("Instructions/const","const")}} ne peut être supprimée de la portée dans laquelle elles ont été créées.
+- Les propriétés non-configurable ne peuvent pas être retirées. Cela inclut les propriétés des objets natifs comme {{jsxref("Math")}}, {{jsxref("Array")}}, {{jsxref("Object")}} et les propriétés qui sont créées comme non-configurable grâce à la méthode {{jsxref("Object.defineProperty()")}}.
+
+Voici un fragment de code qui illustre certains cas :
+
+```js
+var Employe = {
+  age: 28,
+  nom: 'abc',
+  designation: 'developpeur'
+}
+
+console.log(delete Employe.nom);  // renvoie true
+console.log(delete Employe.age);  // renvoie true
+
+// Lorsqu'on souhaite supprimer une propriété
+// inexistante, on obtient true
+console.log(delete Employe.salaire); // renvoie true
+```
+
+### Les propriétés non-configurables
+
+Lorsqu'une propriété est marquée comme non-configurable, `delete` n'aura aucun effet et l'opération renverra `false`. En mode strict, cela déclenchera une exception `TypeError`.
+
+```js
+var Employe = {};
+Object.defineProperty(Employe, 'nom', {configurable: false});
+
+console.log(delete Employe.nom);  // renvoie false
+```
+
+{{jsxref("Instructions/var","var")}} (ou `let` ou `const`) crée des propriétés non-configurables qui ne peuvent pas être supprimées via `delete` :
+
+```js
+var autreNom = 'XYZ';
+
+// On peut accéder à la description de cette
+// propriété globale grâce à :
+Object.getOwnPropertyDescriptor(window, 'autreNom')
+
+/* Object {value: "XYZ",
+                  writable: true,
+                  enumerable: true,
+                  configurable: false}
+*/
+
+// On voit que "autreNom", ajouté avec var
+// est marquée comme "non-configurable"
+
+delete autreNom;   // renvoie false
+```
+
+En mode strict, cela aurait déclenché une exception.
+
+### Mode strict ou non-strict ?
+
+Lorsqu'on est en mode strict, si `delete` est utilisé sur une référence directe à une variable, un argument de fonction ou un nom de fonction, il déclenchera une exception {{jsxref("SyntaxError")}}**.**
+
+Toute variable définie avec `var` est marquée comme non-configurable. Dans l'exemple qui suit, `salaire` est non-configurable et ne peut pas être supprimé. En mode non-strict, l'opération `delete` renverra `false`.
+
+```js
+function Employe() {
+  delete salaire;
+  var salaire;
+}
+
+Employe();
+```
+
+Voyons comment ce code se comporte en mode strict : au lieu de renvoyer false, l'instruction lève une exception `SyntaxError`.
+
+```js
+"use strict";
+
+function Employe() {
+  delete salaire;  // SyntaxError
+  var salaire;
+}
+
+// De même, tout accès direct à une fonction
+// avec delete lèvera une SyntaxError
+
+function DemoFunction() {
+  //du code
+}
+
+delete DemoFunction; // SyntaxError
+```
+
+## Exemples
+
+```js
+// on crée la propriété adminName sur la portée globale
+adminName = 'xyz';
+
+// on crée la propriété empCount sur la portée globale
+// On utilise var, elle est donc non-configurable
+var empCount = 43;
+
+EmployeeDetails = {
+  name: 'xyz',
+  age: 5,
+  designation: 'Developer'
+};
+
+// adminName est une propriété de la portée globale
+// qui peut être supprimée car configurable.
+delete adminName;       // renvoie true
+
+// En revanche empCount n'est pas configurable
+// car c'est var qui a été utilisée.
+delete empCount;        // renvoie false
+
+// delete peut être utilisé pour retirer des propriétés
+// d'objets
+delete EmployeeDetails.name; // renvoie true
+
+// Même lorsque la propriété n'existe pas,
+// l'opération renvoie "true"
+delete EmployeeDetails.salary; // renvoie true
+
+// delete n'a pas d'impact sur les propriétés
+// statiques natives
+delete Math.PI; // renvoie false
+
+// EmployeeDetails est une propriété de la portée globale
+// définie sans var, elle est donc configurable
+delete EmployeeDetails;   // renvoie true
+
+function f() {
+  var z = 44;
+
+  // delete n'a pas d'impact sur les noms
+  // des variables locales
+  delete z;     // returns false
+}
+```
+
+### `delete` et la chaîne de prototypes
+
+Dans l'exemple qui suit, on supprime une propriété directement rattachée à un objet (une propriété « propre ») alors qu'une propriété du même nom existe sur la chaîne de prototypes :
+
+```js
+function Toto(){
+  this.truc = 10;
+}
+
+Toto.prototype.truc = 42;
+
+var toto = new Toto();
+
+// L'instruction suivante renvoie true,
+// après avoir effectivement supprimé
+// la propriété de l'objet toto
+delete toto.truc;
+
+// toto.truc est toujours disponible car
+// elle est disponible sur la chaîne de
+// prototypes
+console.log(toto.truc);
+
+// Ici on supprime la propriété du prototype
+delete Toto.prototype.truc;
+
+// On aura "undefined" dans la console
+// car l'objet n'hérite plus de cette propriété
+// qui a été supprimée
+console.log(toto.truc);
+```
+
+### Supprimer les éléments d'un tableau
+
+Lorsqu'on supprime un élément d'un tableau, la longueur du tableau n'est pas modifiée. Cela vaut également lorsqu'on supprime le dernier élément du tableau.
+
+Lorsqu'on utilise `delete` pour retirer un élément du tableau, cet élément n'est plus dans le tableau. Dans l'exemple suivant, on retire `arbres[3]` grâce à `delete`.
+
+```js
+var arbres = ["cèdre","pin","chêne","érable","sapin"];
+delete arbres[3];
+if (3 in arbres) {
+    // Le code ici ne sera pas exécuté
+}
+```
+
+Si on veut conserver l'existence d'un élément du tableau avec une valeur indéfinie, on pourra affecter la valeur `undefined` à cet élément. Ainsi, contrairement à l'exemple précédent, en utilisant `undefined`, `arbres[3]` continue d'être présent :
+
+```js
+var arbres = ["cèdre","pin","chêne","érable","sapin"];
+arbres[3] = undefined;
+if (3 in arbres) {
+  // Le code ici sera bien exécuté
+}
+```
+
+Si on souhaite plutôt retirer un élément du tableau en changeant le contenu du tableau, on pourra utiliser la méthode {{jsxref("Array.splice()")}}. Dans l'exemple qui suit, la valeur actuelle de `arbres[3]` est retirée du tableau grâce à `splice()` mais l'index suivant se décale et arbres\[4] devient arbres\[3] :
+
+```js
+var arbres = ["cèdre","pin","chêne","érable","sapin"];
+if (3 in arbres) {
+ // Le code ici sera exécuté
+}
+arbres.splice(3, 1);
+console.log(arbres); // ["cèdre","pin","chêne","sapin"];
+if (3 in arbres) {
+ // Le code ici sera également exécuté
+}
+```
+
+## Spécifications
+
+| Spécification                                                                                | État                         | Commentaires                                         |
+| -------------------------------------------------------------------------------------------- | ---------------------------- | ---------------------------------------------------- |
+| {{SpecName('ESDraft', '#sec-delete-operator', 'The delete Operator')}} | {{Spec2('ESDraft')}} |                                                      |
+| {{SpecName('ES6', '#sec-delete-operator', 'The delete Operator')}}     | {{Spec2('ES6')}}         |                                                      |
+| {{SpecName('ES5.1', '#sec-11.4.1', 'The delete Operator')}}             | {{Spec2('ES5.1')}}     |                                                      |
+| {{SpecName('ES1', '#sec-11.4.1', 'The delete Operator')}}                 | {{Spec2('ES1')}}         | Définition initiale. Implémenté avec JavaScript 1.2. |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.operators.delete")}}
+
+## Notes de compatibilité
+
+Bien que l'ordre d'itération des objets soit laissé à l'implémentation selon le standard ECMAScript, il semblerait que la plupart des navigateurs utilise un ordre d'itération basé sur l'ordre d'ajout des propriétés (au moins pour les propriétés propres). Toutefois, pour Internet Explorer, lorsqu'on utilise `delete` sur une propriété puis qu'on redéfinit plus tard une propriété avec le même nom, l'ordre d'itération de cette propriété sera le même que précédemment (alors que dans les autres navigateurs, cette « nouvelle » propriété sera parcourue en dernier).
+
+Aussi, si on veut simuler un tableau associatif ordonné de façon transparente et pour plusieurs navigateurs, il faudra utiliser deux tableaux ou, mieux encore, un objet {{jsxref("Map")}} si celui-ci est disponible.
+
+## Voir aussi
+
+- [Une analyse de `delete` par Kangax, en anglais](https://perfectionkills.com/understanding-delete/)
+- {{jsxref("Reflect.deleteProperty()")}}
+- {{jsxref("Map.prototype.delete()")}}
diff --git a/files/fr/web/javascript/reference/operators/destructuring_assignment/index.html b/files/fr/web/javascript/reference/operators/destructuring_assignment/index.html
deleted file mode 100644
index f5a14835af..0000000000
--- a/files/fr/web/javascript/reference/operators/destructuring_assignment/index.html
+++ /dev/null
@@ -1,426 +0,0 @@
----
-title: Affecter par décomposition
-slug: Web/JavaScript/Reference/Operators/Destructuring_assignment
-tags:
-  - Destructuration
-  - Affectation de déstructuration
-  - ECMAScript 2015
-  - ES6
-  - JavaScript
-  - Caractéristiques de la langue
-  - Déstructuration des objets imbriqués et des tableaux
-  - Opérateur
-  - Reference
-translation_of: Web/JavaScript/Reference/Operators/Destructuring_assignment
-original_slug: Web/JavaScript/Reference/Opérateurs/Affecter_par_décomposition
----
-<div>{{jsSidebar("Operators")}}</div>
-
-<p>L'<strong>affectation par décomposition </strong>(<em>destructuring </em>en anglais) est une expression JavaScript qui permet d'extraire (<em>unpack</em> en anglais) des données d'un tableau ou d'un objet grâce à une syntaxe dont la forme ressemble à la structure du tableau ou de l'objet.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/expressions-destructuringassignment.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="brush: js">let a, b, rest;
-[a, b] = [10, 20];
-console.log(a); // 10
-console.log(b); // 20
-
-[a, b, ...rest] = [10, 20, 30, 40, 50];
-console.log(a); // 10
-console.log(b); // 20
-console.log(rest); // [30, 40, 50]
-
-({a, b} = {a: 10, b: 20});
-console.log(a); // 10
-console.log(b); // 20
-
-// Proposition de syntaxe (niveau 4)
-({a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40});
-console.log(a); // 10
-console.log(b); // 20
-console.log(rest); // {c: 30, d: 40}
-</pre>
-
-<div class="note">
-<p><strong>Note :</strong> <code>{a, b} = {a:1, b:2}</code> n'est pas syntaxiquement valide en tant que tel, en effet <code>{a, b}</code> est ici considéré comme un bloc et non comme un objet littéral.</p>
-
-<p>Cependant, <code>({a, b} = {a:1, b:2})</code> sera valide comme pour la forme <code>let {a, b} = {a:1, b:2}</code>.</p>
-</div>
-
-<h2 id="Description">Description</h2>
-
-<p>Ces expressions utilisant des littéraux pour les <a href="/fr/docs/Web/JavaScript/Guide/Valeurs,_variables,_et_littéraux#Litt.C3.A9raux_objets">objets</a> ou les <a href="/fr/docs/Web/JavaScript/Guide/Valeurs,_variables,_et_littéraux#Litt.C3.A9raux_de_tableaux">tableaux</a> permettent de créer simplement des données regroupées. Une fois créées, on peut les utiliser de n'importe quelle façon, y compris comme valeur renvoyée par une fonction.</p>
-
-<pre class="brush: js">const x = [1, 2, 3, 4, 5]; // On crée un "paquet" de données
-const [y, z] = x; // On utilise l'affectation par décomposition
-console.log(y); // 1
-console.log(z); // 2
-</pre>
-
-<p>L'intérêt de l'assignation par décomposition est de pouvoir lire une structure entière en une seule instruction. Il y a également d'autres choses que vous pouvez faire avec cette expression, comme montré dans les exemples ci-dessous.</p>
-
-<p>Cette syntaxe est semblable aux fonctionnalités offertes par des langages tels que Perl et Python.</p>
-
-<h2 id="Décomposition_dun_tableau">Décomposition d'un tableau</h2>
-
-<h3 id="Exemple_simple">Exemple simple</h3>
-
-<pre class="brush: js">const toto = ["un", "deux", "trois"];
-
-// sans utiliser la décomposition
-const un    = toto[0];
-const deux  = toto[1];
-const trois = toto[2];
-
-// en utilisant la décomposition
-const [un, deux, trois] = toto;</pre>
-
-<h3 id="Affectation_sans_déclaration">Affectation sans déclaration</h3>
-
-<p>L'affectation par décomposition peut être effectuée sans qu'il y ait de déclaration directement dans l'instruction d'affectation. Par exemple :</p>
-
-<pre class="brush: js">let a, b;
-[a, b] = [1, 2];
-console.log(a);  // 1
-console.log(b);  // 2</pre>
-
-<h3 id="Valeurs_par_défaut">Valeurs par défaut</h3>
-
-<p>On peut définir une valeur par défaut au cas où la valeur extraite du tableau soit {{jsxref("undefined")}}. Par exemple :</p>
-
-<pre class="brush: js">let a, b;
-
-[a = 5, b = 7] = [1];
-console.log(a); // 1
-console.log(b); // 7
-</pre>
-
-<h3 id="Échange_de_variables">Échange de variables</h3>
-
-<p>Une fois le fragment de code exécuté, on aura <var>b</var> égal à 1 et <var>a</var> égal à 3. S'il n'avait pas été possible d'utiliser l'affectation par décomposition, l'échange des valeurs aurait nécessité une variable temporaire (pour des données binaires, on aurait pu utiliser une <a class="external" href="https://fr.wikipedia.org/wiki/Permutation_(informatique)#En_utilisant_l.27op.C3.A9ration_XOR">permutation XOR</a>).</p>
-
-<pre class="brush:js">let a = 1;
-let b = 3;
-
-[a, b] = [b, a];
-console.log(a); // 3
-console.log(b); // 1</pre>
-
-<h3 id="Renvoyer_plusieurs_valeurs">Renvoyer plusieurs valeurs</h3>
-
-<p>Grâce à l'affectation par décomposition, les fonctions peuvent renvoyer plusieurs valeurs. Il était déjà possible de renvoyer un tableau mais cela ajoute un nouveau degré de flexibilité.</p>
-
-<pre class="brush:js">function f() {
-  return [1, 2];
-}
-</pre>
-
-<p>Les valeurs de retour sont déclarées via une syntaxe semblable à celle utilisée pour déclarer les tableaux, utilisant les crochets. On peut ainsi renvoyer autant de valeurs que souhaité. Dans cet exemple, <code>f()</code> renvoie les valeurs <code>[1, 2]</code>.</p>
-
-<pre class="brush:js">let a, b;
-[a, b] = f();
-console.log("A vaut " + a + " B vaut " + b);
-</pre>
-
-<p>L'instruction <code>[a, b] = f()</code> assigne, dans l'ordre, les résultats de la fonction aux variables représentées entre les crochets. Ainsi, ici <var>a</var> vaut 1 et b vaut 2.</p>
-
-<p>On peut également récupérer la valeur de retour comme un tableau :</p>
-
-<pre class="brush:js">const x = f();
-console.log("X vaut " + x);
-</pre>
-
-<p>Et on aura x qui sera égal au tableau contenant 1 et 2.</p>
-
-<h3 id="Ignorer_certaines_valeurs">Ignorer certaines valeurs</h3>
-
-<p>On peut également ignorer certaines des valeurs renvoyées qu'on ne souhaiterait pas traiter :</p>
-
-<pre class="brush:js">function f() {
-  return [1, 2, 3];
-}
-
-const [a, , b] = f();
-console.log("A vaut " + a + " B vaut " + b);
-</pre>
-
-<p>Après avoir exécuté ce code, on aura a égal à 1 et b égal à 3. La valeur 2 est ignorée. On peut ignorer n'importe laquelle des valeurs (voire toutes). Par exemple :</p>
-
-<pre class="brush:js">[,,] = f();
-</pre>
-
-<h3 id="Exploiter_les_résultats_dune_expression_rationnelle">Exploiter les résultats d'une expression rationnelle</h3>
-
-<p>Lorsque la méthode <code><a href="/fr/docs/JavaScript/Reference/Objets_globaux/Object/RegExp/Exec">exec()</a></code>, liées aux expressions rationnelles, trouve une correspondance, elle renvoie un tableau qui contient d'abord la partie complète de la chaîne qui correspond puis ensuite les différentes portions correspondant aux différents groupes. L'affectation par décomposition permet de filtrer simplement les valeurs qu'on souhaite exploiter. Ici, on ignore le premier élément qui est la correspondance complète :</p>
-
-<pre class="brush:js">function parseProtocol(url) {
-  const parsedURL = /^(\w+)\:\/\/([^\/]+)\/(.*)$/.exec(url);
-  if (!parsedURL) {
-    return false;
-  }
-  console.log(parsedURL); // ["https://developer.mozilla.org/fr/Web/JavaScript", "https", "developer.mozilla.org", "fr/Web/JavaScript"]
-
-  const [, protocol, fullhost, fullpath] = parsedURL;
-  return protocol;
-}
-
-console.log(parseProtocol('https://developer.mozilla.org/en-US/Web/JavaScript')); // "https"
-</pre>
-
-<h3 id="Affecter_le_reste_dun_tableau_à_une_variable">Affecter le reste d'un tableau à une variable</h3>
-
-<p>On peut également utiliser la décomposition d'un tableau afin d'en affecter une partie à une variable :</p>
-
-<pre class="brush: js">const [a, ...b] = [1, 2, 3];
-console.log(a); // 1
-console.log(b); // [2, 3]</pre>
-
-<p>Un exception {{jsxref("SyntaxError")}} sera levée si une virgule est laissée à la fin de l'élément du reste du tableau de gauche :</p>
-
-<pre class="brush: js example-bad">const [a, ...b,] = [1, 2, 3]
-// SyntaxError : un élément du reste ne peut pas avoir
-//               de virgule à la fin</pre>
-
-<h2 id="Décomposer_un_objet">Décomposer un objet</h2>
-
-<h3 id="Exemple_simple_2">Exemple simple</h3>
-
-<pre class="brush: js">const o = {p: 42, q: true};
-const {p, q} = o;
-
-console.log(p); // 42
-console.log(q); // true
-
-// Assign new variable names
-const {p: toto, q: truc} = o;
-
-console.log(toto); // 42
-console.log(truc); // true
-</pre>
-
-<h3 id="Affectation_sans_déclaration_2">Affectation sans déclaration</h3>
-
-<p>Il est possible d'effectuer une affectation par décomposition même si aucune déclaration n'est directement utilisée dans l'instruction d'affectation. Par exemple :</p>
-
-<pre class="brush: js">let a, b;
-({a, b} = {a:1, b:2});
-</pre>
-
-<div class="note">
-<p><strong>Note :</strong> Les parenthèses <code>( ... )</code> utilisées autour de l'instruction sont nécessaires pour que la partie gauche soit bien interprétée comme un objet littéral et non comme un bloc. Il est également nécessaire d'avoir un point-virgule avant les parenthèses de l'instruction car sinon, ces parenthèses peuvent être interprétées comme un appel de fonction.</p>
-</div>
-
-<h3 id="Affecter_avec_un_nom_différent">Affecter avec un nom différent</h3>
-
-<p>Lorsqu'on décompose un objet, on peut affecter la variable obtenue sur une variable qui possède un autre nom (que celui de la propriété) :</p>
-
-<pre class="brush: js">const o = {p: 42, q: true};
-const {p: toto, q: truc} = o;
-
-console.log(toto); // 42
-console.log(truc); // true</pre>
-
-<p>Ici, par exemple, <code>const {p: toto} = o</code> prend la propriété <code>p</code> de l'objet <code>o</code> pour l'affecter à une variable locale intitulée <code>toto</code>.</p>
-
-<h3 id="Valeurs_par_défaut_2">Valeurs par défaut</h3>
-
-<p>Une variable peut recevoir une valeur par défaut lors de la décomposition si la propriété correspondante de l'objet vaut <code>undefined</code>.</p>
-
-<pre class="brush: js">const {a = 10, b = 5} = {a: 3};
-
-console.log(a); // 3
-console.log(b); // 5</pre>
-
-<h3 id="Affecter_de_nouveaux_noms_aux_variables_et_fournir_des_valeurs_par_défaut">Affecter de nouveaux noms aux variables et fournir des valeurs par défaut</h3>
-
-<p>Il est possible d'extraitre une valeur d'un objet pour lui affecter un nouveau nom et lui affecter une valeur par défaut au cas où la valeur extraite vaut <code>undefined</code>.</p>
-
-<pre class="brush: js">const {a: aa = 10, b: bb = 5} = {a: 3};
-
-console.log(aa); // 3
-console.log(bb); // 5</pre>
-
-<h3 id="Arguments_par_défaut_dune_fonction">Arguments par défaut d'une fonction</h3>
-
-<h4 id="Version_ES5">Version ES5</h4>
-
-<pre class="brush: js">function dessinGrapheES5(options) {
-  options = options === undefined ? {} : options;
-  var size = options.size === undefined ? 'big' : options.size;
-  var coords = options.coords === undefined ? { x: 0, y: 0 } : options.coords;
-  var radius = options.radius === undefined ? 25 : options.radius;
-  console.log(size, coords, radius);
-  // seulement ensuite on dessine le graphe
-}
-
-dessinGrapheES5({
-  coords: { x: 18, y: 30 },
-  radius: 30
-});</pre>
-
-<h4 id="Version_ES2015">Version ES2015</h4>
-
-<pre class="brush: js">function dessinGrapheES2015({size = 'big', coords = { x: 0, y: 0 }, radius = 25} = {})
-{
-  console.log(size, coords, radius);
-  // on dessine le graphe
-}
-
-dessinGrapheES2015({
-  coords: { x: 18, y: 30 },
-  radius: 30
-});</pre>
-
-<div class="note">
-<p><strong>Note :</strong> Dans la signature de la fonction <code>dessinGrapheES2015</code> ci avant, la valeur décomposée à gauche utilise un objet vide comme opérande droit (<code>{size = 'big', coords = { x: 0, y: 0 }, radius = 25} = {}</code>). On aurait également pu écrire la fonction sans cet objet vide mais, dans ce cas, il aurait fallu au moins un argument pour utiliser la fonction. Avec cette « forme », <code>dessinGrapheES2015()</code> pourra être appelée sans paramètre.</p>
-</div>
-
-<h3 id="Décomposition_imbriquée_avec_objets_et_tableaux">Décomposition imbriquée avec objets et tableaux</h3>
-
-<pre class="brush:js">const metadata = {
-    title: "Scratchpad",
-    translations: [
-       {
-        locale: "de",
-        localization_tags: [ ],
-        last_edit: "2014-04-14T08:43:37",
-        url: "/de/docs/Tools/Scratchpad",
-        title: "JavaScript-Umgebung"
-       }
-    ],
-    url: "/en-US/docs/Tools/Scratchpad"
-};
-
-let { title: englishTitle, translations: [{ title: localeTitle }] } = metadata;
-
-console.log(englishTitle); // "Scratchpad"
-console.log(localeTitle);  // "JavaScript-Umgebung"</pre>
-
-<h3 id="Décomposition_et_utilisation_de_for_of">Décomposition et utilisation de <a href="/fr/docs/JavaScript/Référence_JavaScript/Instructions/for...of">for of</a></h3>
-
-<pre class="brush: js">const personnes = [
-  {
-    nom: "Alain Dupont",
-    famille: {
-      mere: "Isabelle Dupont",
-      pere: "Jean Dupont",
-      soeur: "Laure Dupont"
-    },
-    age: 35
-  },
-  {
-    nom: "Luc Marchetoile",
-    famille: {
-      mere: "Patricia Marchetoile",
-      pere: "Antonin Marchetoile",
-      frere: "Yann Marchetoile"
-    },
-    age: 25
-  }
-];
-
-for (const {nom: n, famille: { pere: f } } of personnes) {
-  console.log("Nom : " + n + ", Père : " + f);
-}
-
-// "Nom : Alain Dupont, Père : Jean Dupont"
-// "Nom : Luc Marchetoile, Père : Antonin Marchetoile"</pre>
-
-<h3 id="Décomposer_les_propriétés_dobjets_passés_en_arguments">Décomposer les propriétés d'objets passés en arguments</h3>
-
-<pre class="brush:js">const user = {
-  id: 42,
-  displayName: "jbiche",
-  fullName: {
-    firstName: "Jean",
-    lastName: "Biche"
-  }
-};
-
-function userId({id}) {
-  return id;
-}
-
-function whois({displayName: displayName, fullName: {firstName: name}}){
-  console.log(displayName + " est " + name);
-}
-
-console.log("userId: " + userId(user)); w// "userId: 42"
-whois(user); // "jbiche est Jean"</pre>
-
-<p>Cela permet d'accéder directement à <code>id</code>, <code>displayName</code> et <code>firstName</code> depuis l'objet <code>user</code>.</p>
-
-<h3 id="Les_noms_de_propriétés_calculés_et_la_décomposition">Les noms de propriétés calculés et la décomposition</h3>
-
-<p>Il est possible d'utiliser des noms de propriétés calculés, comme avec les <a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Initialisateur_objet#Noms_de_propri.C3.A9t.C3.A9s_calcul.C3.A9s">littéraux objets</a>, avec la décomposition.</p>
-
-<pre class="brush: js">let clef = "z";
-let { [clef]: toto } = { z: "truc" };
-
-console.log(toto); // "truc"</pre>
-
-<h3 id="Syntaxe_du_«_reste_»_et_décomposition_dun_objet">Syntaxe du « reste » et décomposition d'un objet</h3>
-
-<p><a href="https://github.com/tc39/proposal-object-rest-spread">La proposition de décomposition des propriétés et de la syntaxe du reste dans ECMAScript</a> ajoute <a href="/fr/docs/Web/JavaScript/Reference/Fonctions/paramètres_du_reste">la syntaxe du reste</a> pour la décomposition. La propriété du reste permet de collecter les propriétés énumérables restantes qui n'auraient pas été extraites par la décomposition :</p>
-
-<pre class="brush: js">let {a, b, ...reste } = {a: 10, b: 20, c: 30, d: 40};
-a; // 10
-b; // 20
-reste; // { c: 30, d: 40 }</pre>
-
-<h3 id="Gestion_des_identifiants_invalides_comme_noms_de_propriétés">Gestion des identifiants invalides comme noms de propriétés</h3>
-
-<p>Si besoin, on peut également utiliser la décomposition pour fournir un alias à des noms de propriétés qui ne seraient pas des identifiants valides. Par exemple :</p>
-
-<pre class="brush: js">const toto = {'truc-bidule': true}
-const {'truc-bidule': trucBidule } = toto;
-
-console.log(trucBidule);  // "true"</pre>
-
-<h3 id="Combiner_la_décomposition_de_tableaux_et_dobjets">Combiner la décomposition de tableaux et d'objets</h3>
-
-<p>Il est possible de décomposer un tableau et un objet simultanément. Dans l'exemple qui suit, on accède ainsi à la propriété <code>nom</code> du troisième élément du tableau <code>props</code>:</p>
-
-<pre class="brush: js">const props = [
-  { id: 1, nom: "Toto"},
-  { id: 2, nom: "Truc"},
-  { id: 3, nom: "Bidule"}
-];
-
-const [,, {nom}] = props;
-console.log(nom); // Bidule</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-destructuring-assignment', 'Destructuring assignment')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-destructuring-assignment', 'Destructuring assignment')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.operators.destructuring")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_d_affectation">Opérateurs d'affectation</a></li>
- <li><a href="https://tech.mozfr.org/post/2015/06/05/ES6-en-details-%3A-la-decomposition">ES6 en détails : La décomposition sur tech.mozfr.org</a></li>
-</ul>
diff --git a/files/fr/web/javascript/reference/operators/destructuring_assignment/index.md b/files/fr/web/javascript/reference/operators/destructuring_assignment/index.md
new file mode 100644
index 0000000000..e602c383be
--- /dev/null
+++ b/files/fr/web/javascript/reference/operators/destructuring_assignment/index.md
@@ -0,0 +1,448 @@
+---
+title: Affecter par décomposition
+slug: Web/JavaScript/Reference/Operators/Destructuring_assignment
+tags:
+  - Destructuration
+  - Affectation de déstructuration
+  - ECMAScript 2015
+  - ES6
+  - JavaScript
+  - Caractéristiques de la langue
+  - Déstructuration des objets imbriqués et des tableaux
+  - Opérateur
+  - Reference
+translation_of: Web/JavaScript/Reference/Operators/Destructuring_assignment
+original_slug: Web/JavaScript/Reference/Opérateurs/Affecter_par_décomposition
+---
+{{jsSidebar("Operators")}}
+
+L'**affectation par décomposition** (_destructuring_ en anglais) est une expression JavaScript qui permet d'extraire (_unpack_ en anglais) des données d'un tableau ou d'un objet grâce à une syntaxe dont la forme ressemble à la structure du tableau ou de l'objet.
+
+{{EmbedInteractiveExample("pages/js/expressions-destructuringassignment.html")}}
+
+## Syntaxe
+
+```js
+let a, b, rest;
+[a, b] = [10, 20];
+console.log(a); // 10
+console.log(b); // 20
+
+[a, b, ...rest] = [10, 20, 30, 40, 50];
+console.log(a); // 10
+console.log(b); // 20
+console.log(rest); // [30, 40, 50]
+
+({a, b} = {a: 10, b: 20});
+console.log(a); // 10
+console.log(b); // 20
+
+// Proposition de syntaxe (niveau 4)
+({a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40});
+console.log(a); // 10
+console.log(b); // 20
+console.log(rest); // {c: 30, d: 40}
+```
+
+> **Note :** `{a, b} = {a:1, b:2}` n'est pas syntaxiquement valide en tant que tel, en effet `{a, b}` est ici considéré comme un bloc et non comme un objet littéral.
+>
+> Cependant, `({a, b} = {a:1, b:2})` sera valide comme pour la forme `let {a, b} = {a:1, b:2}`.
+
+## Description
+
+Ces expressions utilisant des littéraux pour les [objets](/fr/docs/Web/JavaScript/Guide/Valeurs,_variables,_et_littéraux#Litt.C3.A9raux_objets) ou les [tableaux](/fr/docs/Web/JavaScript/Guide/Valeurs,_variables,_et_littéraux#Litt.C3.A9raux_de_tableaux) permettent de créer simplement des données regroupées. Une fois créées, on peut les utiliser de n'importe quelle façon, y compris comme valeur renvoyée par une fonction.
+
+```js
+const x = [1, 2, 3, 4, 5]; // On crée un "paquet" de données
+const [y, z] = x; // On utilise l'affectation par décomposition
+console.log(y); // 1
+console.log(z); // 2
+```
+
+L'intérêt de l'assignation par décomposition est de pouvoir lire une structure entière en une seule instruction. Il y a également d'autres choses que vous pouvez faire avec cette expression, comme montré dans les exemples ci-dessous.
+
+Cette syntaxe est semblable aux fonctionnalités offertes par des langages tels que Perl et Python.
+
+## Décomposition d'un tableau
+
+### Exemple simple
+
+```js
+const toto = ["un", "deux", "trois"];
+
+// sans utiliser la décomposition
+const un    = toto[0];
+const deux  = toto[1];
+const trois = toto[2];
+
+// en utilisant la décomposition
+const [un, deux, trois] = toto;
+```
+
+### Affectation sans déclaration
+
+L'affectation par décomposition peut être effectuée sans qu'il y ait de déclaration directement dans l'instruction d'affectation. Par exemple :
+
+```js
+let a, b;
+[a, b] = [1, 2];
+console.log(a);  // 1
+console.log(b);  // 2
+```
+
+### Valeurs par défaut
+
+On peut définir une valeur par défaut au cas où la valeur extraite du tableau soit {{jsxref("undefined")}}. Par exemple :
+
+```js
+let a, b;
+
+[a = 5, b = 7] = [1];
+console.log(a); // 1
+console.log(b); // 7
+```
+
+### Échange de variables
+
+Une fois le fragment de code exécuté, on aura _b_ égal à 1 et _a_ égal à 3. S'il n'avait pas été possible d'utiliser l'affectation par décomposition, l'échange des valeurs aurait nécessité une variable temporaire (pour des données binaires, on aurait pu utiliser une [permutation XOR](<https://fr.wikipedia.org/wiki/Permutation_(informatique)#En_utilisant_l.27op.C3.A9ration_XOR>)).
+
+```js
+let a = 1;
+let b = 3;
+
+[a, b] = [b, a];
+console.log(a); // 3
+console.log(b); // 1
+```
+
+### Renvoyer plusieurs valeurs
+
+Grâce à l'affectation par décomposition, les fonctions peuvent renvoyer plusieurs valeurs. Il était déjà possible de renvoyer un tableau mais cela ajoute un nouveau degré de flexibilité.
+
+```js
+function f() {
+  return [1, 2];
+}
+```
+
+Les valeurs de retour sont déclarées via une syntaxe semblable à celle utilisée pour déclarer les tableaux, utilisant les crochets. On peut ainsi renvoyer autant de valeurs que souhaité. Dans cet exemple, `f()` renvoie les valeurs `[1, 2]`.
+
+```js
+let a, b;
+[a, b] = f();
+console.log("A vaut " + a + " B vaut " + b);
+```
+
+L'instruction `[a, b] = f()` assigne, dans l'ordre, les résultats de la fonction aux variables représentées entre les crochets. Ainsi, ici _a_ vaut 1 et b vaut 2.
+
+On peut également récupérer la valeur de retour comme un tableau :
+
+```js
+const x = f();
+console.log("X vaut " + x);
+```
+
+Et on aura x qui sera égal au tableau contenant 1 et 2.
+
+### Ignorer certaines valeurs
+
+On peut également ignorer certaines des valeurs renvoyées qu'on ne souhaiterait pas traiter :
+
+```js
+function f() {
+  return [1, 2, 3];
+}
+
+const [a, , b] = f();
+console.log("A vaut " + a + " B vaut " + b);
+```
+
+Après avoir exécuté ce code, on aura a égal à 1 et b égal à 3. La valeur 2 est ignorée. On peut ignorer n'importe laquelle des valeurs (voire toutes). Par exemple :
+
+```js
+[,,] = f();
+```
+
+### Exploiter les résultats d'une expression rationnelle
+
+Lorsque la méthode [`exec()`](/fr/docs/JavaScript/Reference/Objets_globaux/Object/RegExp/Exec), liées aux expressions rationnelles, trouve une correspondance, elle renvoie un tableau qui contient d'abord la partie complète de la chaîne qui correspond puis ensuite les différentes portions correspondant aux différents groupes. L'affectation par décomposition permet de filtrer simplement les valeurs qu'on souhaite exploiter. Ici, on ignore le premier élément qui est la correspondance complète :
+
+```js
+function parseProtocol(url) {
+  const parsedURL = /^(\w+)\:\/\/([^\/]+)\/(.*)$/.exec(url);
+  if (!parsedURL) {
+    return false;
+  }
+  console.log(parsedURL); // ["https://developer.mozilla.org/fr/Web/JavaScript", "https", "developer.mozilla.org", "fr/Web/JavaScript"]
+
+  const [, protocol, fullhost, fullpath] = parsedURL;
+  return protocol;
+}
+
+console.log(parseProtocol('https://developer.mozilla.org/en-US/Web/JavaScript')); // "https"
+```
+
+### Affecter le reste d'un tableau à une variable
+
+On peut également utiliser la décomposition d'un tableau afin d'en affecter une partie à une variable :
+
+```js
+const [a, ...b] = [1, 2, 3];
+console.log(a); // 1
+console.log(b); // [2, 3]
+```
+
+Un exception {{jsxref("SyntaxError")}} sera levée si une virgule est laissée à la fin de l'élément du reste du tableau de gauche :
+
+```js example-bad
+const [a, ...b,] = [1, 2, 3]
+// SyntaxError : un élément du reste ne peut pas avoir
+//               de virgule à la fin
+```
+
+## Décomposer un objet
+
+### Exemple simple
+
+```js
+const o = {p: 42, q: true};
+const {p, q} = o;
+
+console.log(p); // 42
+console.log(q); // true
+
+// Assign new variable names
+const {p: toto, q: truc} = o;
+
+console.log(toto); // 42
+console.log(truc); // true
+```
+
+### Affectation sans déclaration
+
+Il est possible d'effectuer une affectation par décomposition même si aucune déclaration n'est directement utilisée dans l'instruction d'affectation. Par exemple :
+
+```js
+let a, b;
+({a, b} = {a:1, b:2});
+```
+
+> **Note :** Les parenthèses `( ... )` utilisées autour de l'instruction sont nécessaires pour que la partie gauche soit bien interprétée comme un objet littéral et non comme un bloc. Il est également nécessaire d'avoir un point-virgule avant les parenthèses de l'instruction car sinon, ces parenthèses peuvent être interprétées comme un appel de fonction.
+
+### Affecter avec un nom différent
+
+Lorsqu'on décompose un objet, on peut affecter la variable obtenue sur une variable qui possède un autre nom (que celui de la propriété) :
+
+```js
+const o = {p: 42, q: true};
+const {p: toto, q: truc} = o;
+
+console.log(toto); // 42
+console.log(truc); // true
+```
+
+Ici, par exemple, `const {p: toto} = o` prend la propriété `p` de l'objet `o` pour l'affecter à une variable locale intitulée `toto`.
+
+### Valeurs par défaut
+
+Une variable peut recevoir une valeur par défaut lors de la décomposition si la propriété correspondante de l'objet vaut `undefined`.
+
+```js
+const {a = 10, b = 5} = {a: 3};
+
+console.log(a); // 3
+console.log(b); // 5
+```
+
+### Affecter de nouveaux noms aux variables et fournir des valeurs par défaut
+
+Il est possible d'extraitre une valeur d'un objet pour lui affecter un nouveau nom et lui affecter une valeur par défaut au cas où la valeur extraite vaut `undefined`.
+
+```js
+const {a: aa = 10, b: bb = 5} = {a: 3};
+
+console.log(aa); // 3
+console.log(bb); // 5
+```
+
+### Arguments par défaut d'une fonction
+
+#### Version ES5
+
+```js
+function dessinGrapheES5(options) {
+  options = options === undefined ? {} : options;
+  var size = options.size === undefined ? 'big' : options.size;
+  var coords = options.coords === undefined ? { x: 0, y: 0 } : options.coords;
+  var radius = options.radius === undefined ? 25 : options.radius;
+  console.log(size, coords, radius);
+  // seulement ensuite on dessine le graphe
+}
+
+dessinGrapheES5({
+  coords: { x: 18, y: 30 },
+  radius: 30
+});
+```
+
+#### Version ES2015
+
+```js
+function dessinGrapheES2015({size = 'big', coords = { x: 0, y: 0 }, radius = 25} = {})
+{
+  console.log(size, coords, radius);
+  // on dessine le graphe
+}
+
+dessinGrapheES2015({
+  coords: { x: 18, y: 30 },
+  radius: 30
+});
+```
+
+> **Note :** Dans la signature de la fonction `dessinGrapheES2015` ci avant, la valeur décomposée à gauche utilise un objet vide comme opérande droit (`{size = 'big', coords = { x: 0, y: 0 }, radius = 25} = {}`). On aurait également pu écrire la fonction sans cet objet vide mais, dans ce cas, il aurait fallu au moins un argument pour utiliser la fonction. Avec cette « forme », `dessinGrapheES2015()` pourra être appelée sans paramètre.
+
+### Décomposition imbriquée avec objets et tableaux
+
+```js
+const metadata = {
+    title: "Scratchpad",
+    translations: [
+       {
+        locale: "de",
+        localization_tags: [ ],
+        last_edit: "2014-04-14T08:43:37",
+        url: "/de/docs/Tools/Scratchpad",
+        title: "JavaScript-Umgebung"
+       }
+    ],
+    url: "/en-US/docs/Tools/Scratchpad"
+};
+
+let { title: englishTitle, translations: [{ title: localeTitle }] } = metadata;
+
+console.log(englishTitle); // "Scratchpad"
+console.log(localeTitle);  // "JavaScript-Umgebung"
+```
+
+### Décomposition et utilisation de [for of](/fr/docs/JavaScript/Référence_JavaScript/Instructions/for...of)
+
+```js
+const personnes = [
+  {
+    nom: "Alain Dupont",
+    famille: {
+      mere: "Isabelle Dupont",
+      pere: "Jean Dupont",
+      soeur: "Laure Dupont"
+    },
+    age: 35
+  },
+  {
+    nom: "Luc Marchetoile",
+    famille: {
+      mere: "Patricia Marchetoile",
+      pere: "Antonin Marchetoile",
+      frere: "Yann Marchetoile"
+    },
+    age: 25
+  }
+];
+
+for (const {nom: n, famille: { pere: f } } of personnes) {
+  console.log("Nom : " + n + ", Père : " + f);
+}
+
+// "Nom : Alain Dupont, Père : Jean Dupont"
+// "Nom : Luc Marchetoile, Père : Antonin Marchetoile"
+```
+
+### Décomposer les propriétés d'objets passés en arguments
+
+```js
+const user = {
+  id: 42,
+  displayName: "jbiche",
+  fullName: {
+    firstName: "Jean",
+    lastName: "Biche"
+  }
+};
+
+function userId({id}) {
+  return id;
+}
+
+function whois({displayName: displayName, fullName: {firstName: name}}){
+  console.log(displayName + " est " + name);
+}
+
+console.log("userId: " + userId(user)); w// "userId: 42"
+whois(user); // "jbiche est Jean"
+```
+
+Cela permet d'accéder directement à `id`, `displayName` et `firstName` depuis l'objet `user`.
+
+### Les noms de propriétés calculés et la décomposition
+
+Il est possible d'utiliser des noms de propriétés calculés, comme avec les [littéraux objets](/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Initialisateur_objet#Noms_de_propri.C3.A9t.C3.A9s_calcul.C3.A9s), avec la décomposition.
+
+```js
+let clef = "z";
+let { [clef]: toto } = { z: "truc" };
+
+console.log(toto); // "truc"
+```
+
+### Syntaxe du « reste » et décomposition d'un objet
+
+[La proposition de décomposition des propriétés et de la syntaxe du reste dans ECMAScript](https://github.com/tc39/proposal-object-rest-spread) ajoute [la syntaxe du reste](/fr/docs/Web/JavaScript/Reference/Fonctions/paramètres_du_reste) pour la décomposition. La propriété du reste permet de collecter les propriétés énumérables restantes qui n'auraient pas été extraites par la décomposition :
+
+```js
+let {a, b, ...reste } = {a: 10, b: 20, c: 30, d: 40};
+a; // 10
+b; // 20
+reste; // { c: 30, d: 40 }
+```
+
+### Gestion des identifiants invalides comme noms de propriétés
+
+Si besoin, on peut également utiliser la décomposition pour fournir un alias à des noms de propriétés qui ne seraient pas des identifiants valides. Par exemple :
+
+```js
+const toto = {'truc-bidule': true}
+const {'truc-bidule': trucBidule } = toto;
+
+console.log(trucBidule);  // "true"
+```
+
+### Combiner la décomposition de tableaux et d'objets
+
+Il est possible de décomposer un tableau et un objet simultanément. Dans l'exemple qui suit, on accède ainsi à la propriété `nom` du troisième élément du tableau `props`:
+
+```js
+const props = [
+  { id: 1, nom: "Toto"},
+  { id: 2, nom: "Truc"},
+  { id: 3, nom: "Bidule"}
+];
+
+const [,, {nom}] = props;
+console.log(nom); // Bidule
+```
+
+## Spécifications
+
+| Spécification                                                                                                    | État                         | Commentaires         |
+| ---------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName('ES2015', '#sec-destructuring-assignment', 'Destructuring assignment')}} | {{Spec2('ES2015')}}     | Définition initiale. |
+| {{SpecName('ESDraft', '#sec-destructuring-assignment', 'Destructuring assignment')}} | {{Spec2('ESDraft')}} |                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.operators.destructuring")}}
+
+## Voir aussi
+
+- [Opérateurs d'affectation](/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_d_affectation)
+- [ES6 en détails : La décomposition sur tech.mozfr.org](https://tech.mozfr.org/post/2015/06/05/ES6-en-details-%3A-la-decomposition)
diff --git a/files/fr/web/javascript/reference/operators/division/index.html b/files/fr/web/javascript/reference/operators/division/index.html
deleted file mode 100644
index 25d572fce0..0000000000
--- a/files/fr/web/javascript/reference/operators/division/index.html
+++ /dev/null
@@ -1,63 +0,0 @@
----
-title: Division (/)
-slug: Web/JavaScript/Reference/Operators/Division
-tags:
-  - JavaScript
-  - Language feature
-  - Operator
-  - Reference
-browser-compat: javascript.operators.division
-translation-of: Web/JavaScript/Reference/Operators/Division
----
-<div>{{jsSidebar("Operators")}}</div>
-
-<p>L'opérateur de division (<code>/</code>) fournit le quotient de l'opérande gauche (le numérateur) divisé par l'opérande droite (le dénominateur).</p>
-
-<div>{{EmbedInteractiveExample("pages/js/expressions-division.html")}}</div>
-
-<h2 id="syntax">Syntaxe</h2>
-
-<pre class="brush: js">
-<strong>Opérateur :</strong> <var>x</var> / <var>y</var>
-</pre>
-
-<h2 id="examples">Exemples</h2>
-
-<h3 id="basic_division">Divisions simples</h3>
-
-<pre class="brush: js">
-1 / 2             // 0.5
-Math.floor(3 / 2) // 1
-1.0 / 2.0         // 0.5
-</pre>
-
-<h3 id="division_by_zero">Division par zéro</h3>
-
-<pre class="brush: js">
-2.0 / 0     // Infinity
-2.0 / 0.0   // Infinity, because 0.0 === 0
-2.0 / -0.0  // -Infinity
-</pre>
-
-<h2 id="specifications">Spécifications</h2>
-
-<p>{{Specifications}}</p>
-
-<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
-
-<p>{{Compat}}</p>
-
-<h2 id="see_also">Voir aussi</h2>
-
-<ul>
-  <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Addition">Opérateur d'addition</a></li>
-  <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Subtraction">Opérateur de soustraction</a></li>
-  <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Division">Opérateur de division</a></li>
-  <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Multiplication">Opérateur de multiplication</a></li>
-  <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Remainder">Opérateur de reste</a></li>
-  <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Exponentiation">Opérateur d'exponentiation</a></li>
-  <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Increment">Opérateur d'incrémentation</a></li>
-  <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Decrement">Opérateur de décrémentation</a></li>
-  <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Unary_negation">Opérateur de négation unaire</a></li>
-  <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Unary_plus">Opérateur plus unaire</a></li>
-</ul>
diff --git a/files/fr/web/javascript/reference/operators/division/index.md b/files/fr/web/javascript/reference/operators/division/index.md
new file mode 100644
index 0000000000..ada0f7215e
--- /dev/null
+++ b/files/fr/web/javascript/reference/operators/division/index.md
@@ -0,0 +1,60 @@
+---
+title: Division (/)
+slug: Web/JavaScript/Reference/Operators/Division
+tags:
+  - JavaScript
+  - Language feature
+  - Operator
+  - Reference
+browser-compat: javascript.operators.division
+---
+{{jsSidebar("Operators")}}
+
+L'opérateur de division (`/`) fournit le quotient de l'opérande gauche (le numérateur) divisé par l'opérande droite (le dénominateur).
+
+{{EmbedInteractiveExample("pages/js/expressions-division.html")}}
+
+## Syntaxe
+
+```js
+Opérateur : x / y
+```
+
+## Exemples
+
+### Divisions simples
+
+```js
+1 / 2             // 0.5
+Math.floor(3 / 2) // 1
+1.0 / 2.0         // 0.5
+```
+
+### Division par zéro
+
+```js
+2.0 / 0     // Infinity
+2.0 / 0.0   // Infinity, because 0.0 === 0
+2.0 / -0.0  // -Infinity
+```
+
+## Spécifications
+
+{{Specifications}}
+
+## Compatibilité des navigateurs
+
+{{Compat}}
+
+## Voir aussi
+
+- [Opérateur d'addition](/fr/docs/Web/JavaScript/Reference/Operators/Addition)
+- [Opérateur de soustraction](/fr/docs/Web/JavaScript/Reference/Operators/Subtraction)
+- [Opérateur de division](/fr/docs/Web/JavaScript/Reference/Operators/Division)
+- [Opérateur de multiplication](/fr/docs/Web/JavaScript/Reference/Operators/Multiplication)
+- [Opérateur de reste](/fr/docs/Web/JavaScript/Reference/Operators/Remainder)
+- [Opérateur d'exponentiation](/fr/docs/Web/JavaScript/Reference/Operators/Exponentiation)
+- [Opérateur d'incrémentation](/fr/docs/Web/JavaScript/Reference/Operators/Increment)
+- [Opérateur de décrémentation](/fr/docs/Web/JavaScript/Reference/Operators/Decrement)
+- [Opérateur de négation unaire](/fr/docs/Web/JavaScript/Reference/Operators/Unary_negation)
+- [Opérateur plus unaire](/fr/docs/Web/JavaScript/Reference/Operators/Unary_plus)
diff --git a/files/fr/web/javascript/reference/operators/division_assignment/index.html b/files/fr/web/javascript/reference/operators/division_assignment/index.html
deleted file mode 100644
index cd72e5d239..0000000000
--- a/files/fr/web/javascript/reference/operators/division_assignment/index.html
+++ /dev/null
@@ -1,51 +0,0 @@
----
-title: Affectation après division (/=)
-slug: Web/JavaScript/Reference/Operators/Division_assignment
-tags:
-  - Assignment operator
-  - JavaScript
-  - Language feature
-  - Operator
-  - Reference
-browser-compat: javascript.operators.division_assignment
-translation-of: Web/JavaScript/Reference/Operators/Division_assignment
----
-<div>{{jsSidebar("Operators")}}</div>
-
-<p>L'opérateur de division et d'affectation (<code>/=</code>) divise la variable fournie par l'opérande gauche par la valeur indiquée par l'opérande droit puis affecte le résultat à la variable représentée par l'opérande gauche.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/expressions-division-assignment.html")}}</div>
-
-<h2 id="syntax">Syntaxe</h2>
-
-<pre class="brush: js">
-<strong>Opérateur :</strong> x /= y
-<strong>Signification:</strong>  x  = x / y
-</pre>
-
-<h2 id="examples">Exemples</h2>
-
-<h3 id="using_division_assignment">Utiliser l'opérateur de division et d'affectation</h3>
-
-<pre class="brush: js">
-let truc = 5;
-truc /= 2;      // 2.5
-truc /= 2;      // 1.25
-truc /= 0;      // Infinity
-truc /= 'toto'; // NaN
-</pre>
-
-<h2 id="specifications">Spécifications</h2>
-
-<p>{{Specifications}}</p>
-
-<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
-
-<p>{{Compat}}</p>
-
-<h2 id="see_also">Voir aussi</h2>
-
-<ul>
-  <li><a href="/fr/docs/Web/JavaScript/Guide/Expressions_and_Operators#assignment">Les opérateurs d'affectation dans le guide JavaScript</a></li>
-  <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Division">L'opérateur de division</a></li>
-</ul>
diff --git a/files/fr/web/javascript/reference/operators/division_assignment/index.md b/files/fr/web/javascript/reference/operators/division_assignment/index.md
new file mode 100644
index 0000000000..612aabe6b4
--- /dev/null
+++ b/files/fr/web/javascript/reference/operators/division_assignment/index.md
@@ -0,0 +1,48 @@
+---
+title: Affectation après division (/=)
+slug: Web/JavaScript/Reference/Operators/Division_assignment
+tags:
+  - Assignment operator
+  - JavaScript
+  - Language feature
+  - Operator
+  - Reference
+browser-compat: javascript.operators.division_assignment
+---
+{{jsSidebar("Operators")}}
+
+L'opérateur de division et d'affectation (`/=`) divise la variable fournie par l'opérande gauche par la valeur indiquée par l'opérande droit puis affecte le résultat à la variable représentée par l'opérande gauche.
+
+{{EmbedInteractiveExample("pages/js/expressions-division-assignment.html")}}
+
+## Syntaxe
+
+```js
+Opérateur : x /= y
+Signification:  x  = x / y
+```
+
+## Exemples
+
+### Utiliser l'opérateur de division et d'affectation
+
+```js
+let truc = 5;
+truc /= 2;      // 2.5
+truc /= 2;      // 1.25
+truc /= 0;      // Infinity
+truc /= 'toto'; // NaN
+```
+
+## Spécifications
+
+{{Specifications}}
+
+## Compatibilité des navigateurs
+
+{{Compat}}
+
+## Voir aussi
+
+- [Les opérateurs d'affectation dans le guide JavaScript](/fr/docs/Web/JavaScript/Guide/Expressions_and_Operators#assignment)
+- [L'opérateur de division](/fr/docs/Web/JavaScript/Reference/Operators/Division)
diff --git a/files/fr/web/javascript/reference/operators/equality/index.html b/files/fr/web/javascript/reference/operators/equality/index.html
deleted file mode 100644
index 0668aa74d4..0000000000
--- a/files/fr/web/javascript/reference/operators/equality/index.html
+++ /dev/null
@@ -1,125 +0,0 @@
----
-title: Égalité (==)
-slug: Web/JavaScript/Reference/Operators/Equality
-tags:
-  - JavaScript
-  - Language feature
-  - Operator
-  - Reference
-browser-compat: javascript.operators.equality
-translation-of: Web/JavaScript/Reference/Operators/Equality
----
-<div>{{jsSidebar("Operators")}}</div>
-
-<p>L'opérateur d'égalité (<code>==</code>) vérifie si ses deux opérandes sont égaux et renvoie un booléen indiquant le résultat de la comparaison. À la différence de l'opérateur <a href="/fr/docs/Web/JavaScript/Reference/Operators/Strict_equality">d'égalité stricte</a>, l'opérateur d'égalité tente de convertir ses opérandes avant la comparaison si ceux-ci sont de types différents.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/expressions-equality.html")}}</div>
-
-<h2 id="syntax">Syntaxe</h2>
-
-<pre class="brush: js">
-x == y
-</pre>
-
-<h2 id="description">Description</h2>
-
-<p>Les opérateurs d'égalité (<code>==</code> et <code>!=</code>) utilisent <a href="https://www.ecma-international.org/ecma-262/5.1/#sec-11.9.3">l'algorithme de comparaison d'égalité abstraite</a> pour comparer deux opérandes. On peut le résumer ainsi :</p>
-
-<ul>
-  <li>Si les opérandes sont deux objets, on renvoie <code>true</code> uniquement si les deux opérandes référencent le même objet.</li>
-  <li>Si un opérande vaut <code>null</code> et que l'autre vaut <code>undefined</code>, on renvoie <code>true</code>.</li>
-  <li>Si les opérandes sont de types différents, on tente une conversion pour avoir le même type de part et d'autre avant la comparaison :
-    <ul>
-      <li>Si on compare un nombre à une chaîne de caractères, on tentera de convertir la chaîne en une valeur numérique.</li>
-      <li>Si l'un des opérandes est un booléen, on le convertira en 1 s'il vaut <code>true</code> et en +0 s'il vaut <code>false</code>.</li>
-      <li>Si l'un des opérandes est un objet et que l'autre est un nombre ou une chaîne de caractères, on tentera de convertir l'objet en une valeur primitive grâce aux méthodes <code>valueOf()</code> et <code>toString()</code> de l'objet.</li>
-    </ul>
-  </li>
-  <li>Si les opérandes sont du même types, on les compare comme suit :
-    <ul>
-      <li><code>String</code> : on renvoie <code>true</code> uniquement si les deux opérandes ont les mêmes caractères dans le même ordre.</li>
-      <li><code>Number</code> : on renvoie <code>true</code> uniquement si les deux opérandes ont la même valeur. <code>+0</code> et <code>-0</code> sont considérés comme la même valeur. Si au moins un des opérandes vaut <code>NaN</code>, on renvoie <code>false</code>.</li>
-      <li><code>Boolean</code> : on renvoie <code>true</code> uniquement si les deux opérandes valent tous les deux <code>true</code> ou s'ils valent tous les deux <code>false</code>.</li>
-    </ul>
-  </li>
-</ul>
-
-<p>La différence fondamentale entre cet opérateur et <a href="/fr/docs/Web/JavaScript/Reference/Operators/Strict_equality">l'opérateur d'égalité stricte</a> (<code>===</code>) est que ce dernier n'opère pas de conversion de type. L'opérateur d'égalité stricte considère toujours que deux valeurs de types différents sont différentes.</p>
-
-<h2 id="examples">Exemples</h2>
-
-<h3 id="comparison_with_no_type_conversion">Comparaison sans conversion de types</h3>
-
-<pre class="brush: js">
-1 == 1;              // true
-"coucou" == "coucou";  // true
-</pre>
-
-<h3 id="comparison_with_type_conversion">Comparaison avec conversion de types</h3>
-
-<pre class="brush: js">
-"1" ==  1;            // true
-1 == "1";             // true
-0 == false;           // true
-0 == null;            // false
-0 == undefined;       // false
-0 == !!null;          // true, voir la documentation pour !!
-0 == !!undefined;     // true, voir la documentation pour !!
-null == undefined;    // true
-
-const nombre1 = new Number(3);
-const nombre2 = new Number(3);
-nombre1 == 3;         // true
-nombre1 == nombre2;   // false
-</pre>
-
-<h3 id="comparison_of_objects">Comparaison d'objets</h3>
-
-<pre class="brush: js">
-const objet1 = {"clé": "valeur"}
-const objet2 = {"clé": "valeur"};
-
-objet1 == objet2 // false
-objet2 == objet2 // true
-</pre>
-
-<h3 id="comparing_strings_and_string_objects">Comparaison entre des chaînes de caractères et des objets String</h3>
-
-<p>On notera que les chaînes de caractères construites avec <code>new String()</code> sont des objets. Si on compare une telle valeur avec une chaîne de caractères "primitives", l'objet <code>String</code> sera converti en une chaîne de caractères et les contenus de ces chaînes seront comparés. Toutefois, si les deux opérandes sont des objets <code>String</code>, ils seront comparés comme tels et devront référencer le même objet pour être considérés égaux :</p>
-
-<pre class="brush: js">
-const string1 = "coucou";
-const string2 = String("coucou");
-const string3 = new String("coucou");
-const string4 = new String("coucou");
-
-console.log(string1 == string2); // true
-console.log(string1 == string3); // true
-console.log(string2 == string3); // true
-console.log(string3 == string4); // false
-console.log(string4 == string4); // true
-</pre>
-
-<h3 id="comparing_dates_and_strings">Comparaison entre les dates et les chaînes de caractères</h3>
-
-<pre class="brush: js">
-const d = new Date('December 17, 1995 03:24:00');
-const s = d.toString(); // par exemple : "Sun Dec 17 1995 03:24:00 GMT-0800 (Pacific Standard Time)"
-console.log(d == s);    //true
-</pre>
-
-<h2 id="specifications">Spécifications</h2>
-
-<p>{{Specifications}}</p>
-
-<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
-
-<p>{{Compat}}</p>
-
-<h2 id="see_also">Voir aussi</h2>
-
-<ul>
-  <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Inequality">L'opérateur d'inégalité</a></li>
-  <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Strict_equality">L'opérateur d'égalité stricte</a></li>
-  <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Strict_inequality">L'opérateur d'inégalité stricte</a></li>
-</ul>
diff --git a/files/fr/web/javascript/reference/operators/equality/index.md b/files/fr/web/javascript/reference/operators/equality/index.md
new file mode 100644
index 0000000000..5598ca09d6
--- /dev/null
+++ b/files/fr/web/javascript/reference/operators/equality/index.md
@@ -0,0 +1,117 @@
+---
+title: Égalité (==)
+slug: Web/JavaScript/Reference/Operators/Equality
+tags:
+  - JavaScript
+  - Language feature
+  - Operator
+  - Reference
+browser-compat: javascript.operators.equality
+---
+{{jsSidebar("Operators")}}
+
+L'opérateur d'égalité (`==`) vérifie si ses deux opérandes sont égaux et renvoie un booléen indiquant le résultat de la comparaison. À la différence de l'opérateur [d'égalité stricte](/fr/docs/Web/JavaScript/Reference/Operators/Strict_equality), l'opérateur d'égalité tente de convertir ses opérandes avant la comparaison si ceux-ci sont de types différents.
+
+{{EmbedInteractiveExample("pages/js/expressions-equality.html")}}
+
+## Syntaxe
+
+```js
+x == y
+```
+
+## Description
+
+Les opérateurs d'égalité (`==` et `!=`) utilisent [l'algorithme de comparaison d'égalité abstraite](https://www.ecma-international.org/ecma-262/5.1/#sec-11.9.3) pour comparer deux opérandes. On peut le résumer ainsi :
+
+- Si les opérandes sont deux objets, on renvoie `true` uniquement si les deux opérandes référencent le même objet.
+- Si un opérande vaut `null` et que l'autre vaut `undefined`, on renvoie `true`.
+- Si les opérandes sont de types différents, on tente une conversion pour avoir le même type de part et d'autre avant la comparaison :
+
+  - Si on compare un nombre à une chaîne de caractères, on tentera de convertir la chaîne en une valeur numérique.
+  - Si l'un des opérandes est un booléen, on le convertira en 1 s'il vaut `true` et en +0 s'il vaut `false`.
+  - Si l'un des opérandes est un objet et que l'autre est un nombre ou une chaîne de caractères, on tentera de convertir l'objet en une valeur primitive grâce aux méthodes `valueOf()` et `toString()` de l'objet.
+
+- Si les opérandes sont du même types, on les compare comme suit :
+
+  - `String` : on renvoie `true` uniquement si les deux opérandes ont les mêmes caractères dans le même ordre.
+  - `Number` : on renvoie `true` uniquement si les deux opérandes ont la même valeur. `+0` et `-0` sont considérés comme la même valeur. Si au moins un des opérandes vaut `NaN`, on renvoie `false`.
+  - `Boolean` : on renvoie `true` uniquement si les deux opérandes valent tous les deux `true` ou s'ils valent tous les deux `false`.
+
+La différence fondamentale entre cet opérateur et [l'opérateur d'égalité stricte](/fr/docs/Web/JavaScript/Reference/Operators/Strict_equality) (`===`) est que ce dernier n'opère pas de conversion de type. L'opérateur d'égalité stricte considère toujours que deux valeurs de types différents sont différentes.
+
+## Exemples
+
+### Comparaison sans conversion de types
+
+```js
+1 == 1;              // true
+"coucou" == "coucou";  // true
+```
+
+### Comparaison avec conversion de types
+
+```js
+"1" ==  1;            // true
+1 == "1";             // true
+0 == false;           // true
+0 == null;            // false
+0 == undefined;       // false
+0 == !!null;          // true, voir la documentation pour !!
+0 == !!undefined;     // true, voir la documentation pour !!
+null == undefined;    // true
+
+const nombre1 = new Number(3);
+const nombre2 = new Number(3);
+nombre1 == 3;         // true
+nombre1 == nombre2;   // false
+```
+
+### Comparaison d'objets
+
+```js
+const objet1 = {"clé": "valeur"}
+const objet2 = {"clé": "valeur"};
+
+objet1 == objet2 // false
+objet2 == objet2 // true
+```
+
+### Comparaison entre des chaînes de caractères et des objets String
+
+On notera que les chaînes de caractères construites avec `new String()` sont des objets. Si on compare une telle valeur avec une chaîne de caractères "primitives", l'objet `String` sera converti en une chaîne de caractères et les contenus de ces chaînes seront comparés. Toutefois, si les deux opérandes sont des objets `String`, ils seront comparés comme tels et devront référencer le même objet pour être considérés égaux :
+
+```js
+const string1 = "coucou";
+const string2 = String("coucou");
+const string3 = new String("coucou");
+const string4 = new String("coucou");
+
+console.log(string1 == string2); // true
+console.log(string1 == string3); // true
+console.log(string2 == string3); // true
+console.log(string3 == string4); // false
+console.log(string4 == string4); // true
+```
+
+### Comparaison entre les dates et les chaînes de caractères
+
+```js
+const d = new Date('December 17, 1995 03:24:00');
+const s = d.toString(); // par exemple : "Sun Dec 17 1995 03:24:00 GMT-0800 (Pacific Standard Time)"
+console.log(d == s);    //true
+```
+
+## Spécifications
+
+{{Specifications}}
+
+## Compatibilité des navigateurs
+
+{{Compat}}
+
+## Voir aussi
+
+- [L'opérateur d'inégalité](/fr/docs/Web/JavaScript/Reference/Operators/Inequality)
+- [L'opérateur d'égalité stricte](/fr/docs/Web/JavaScript/Reference/Operators/Strict_equality)
+- [L'opérateur d'inégalité stricte](/fr/docs/Web/JavaScript/Reference/Operators/Strict_inequality)
diff --git a/files/fr/web/javascript/reference/operators/exponentiation/index.html b/files/fr/web/javascript/reference/operators/exponentiation/index.html
deleted file mode 100644
index 310a21c8fe..0000000000
--- a/files/fr/web/javascript/reference/operators/exponentiation/index.html
+++ /dev/null
@@ -1,95 +0,0 @@
----
-title: Exponentiation (**)
-slug: Web/JavaScript/Reference/Operators/Exponentiation
-tags:
-  - JavaScript
-  - Language feature
-  - Operator
-  - Reference
-browser-compat: javascript.operators.exponentiation
-translation-of: Web/JavaScript/Reference/Operators/Exponentiation
----
-<div>{{jsSidebar("Operators")}}</div>
-
-<p>L'opérateur d'exponentiation (<code>**</code>) fournit le résultat obtenu lorsqu'on élève le premier opérande à la puissance indiquée par le second. Il est équivalent <code>Math.pow</code> exception faite que cet opérateur permet également d'utiliser des valeurs BigInt comme opérandes.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/expressions-exponentiation.html")}}</div>
-
-<h2 id="syntax">Syntaxe</h2>
-
-<pre class="brush: js">
-<strong>Opérateur :</strong> <var>var1</var> ** <var>var2</var>
-</pre>
-
-<h2 id="description">Description</h2>
-
-<p>L'opérateur d'exponentiation est associatif à droite : <code><var>a</var> ** <var>b</var> ** <var>c</var></code> est équivalent à <code><var>a</var> ** (<var>b</var> ** <var>c</var>)</code>.</p>
-
-<p>Pour la plupart des langages possédant un opérateur d'exponentiation (ex. PHP, Python, etc.), l'opérateur d'exponentiation possède une précédence plus élevée que les opérateurs unaires (comme l'addition unaire <code>+</code> ou la soustraction unaire <code>-</code>). Il existe toutefois quelques exceptions comme Bash, où <code>**</code> possède une précédence inférieure à celles des opérateurs unaires.</p>
-
-<p>En JavaScript, il est impossible d'écrire une expression d'exponentiation ambigüe : on ne peut pas placer un opérateur unaire (<code>+/-/~/!/delete/void/typeof</code>) avant le nombre servant de base, cela provoquera une exception <code>SyntaxError</code>.</p>
-
-<pre class="brush: js">
--2 ** 2;
-// 4 en Bash, -4 pour d'autres langages.
-// Invalide en JavaScript car l'opération est ambigüe.
-
--(2 ** 2);
-// -4 en JavaScript, les parenthèses évitent l'ambiguité.
-</pre>
-
-<p>Attnetion, certains langages de programmation utilisent l'accent circonflexe <kbd>^</kbd> pour exprimer l'exponentiaion mais JavaScript utilise ce symbole pour <a href="/fr/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#Bitwise_XOR">l'opérateur binaire OU exclusif (XOR)</a>.</p>
-
-<h2 id="examples">Exemples</h2>
-
-<h3 id="basic_exponentiation">Exponentiation simple</h3>
-
-<pre class="brush: js">
-2 ** 3   // 8
-3 ** 2   // 9
-3 ** 2.5 // 15.588457268119896
-10 ** -1 // 0.1
-NaN ** 2 // NaN
-</pre>
-
-<h3 id="associativity">Associativité</h3>
-
-<pre class="brush: js">
-2 ** 3 ** 2   // 512
-2 ** (3 ** 2) // 512
-(2 ** 3) ** 2 // 64</pre>
-
-<h3 id="usage_with_unary_operators">Avec les opérateurs unaires</h3>
-
-<p>Pour prendre l'opposé du résultat :</p>
-
-<pre class="brush: js">
--(2 ** 2) // -4
-</pre>
-
-<p>Pour forcer le signe de la base en négatif :</p>
-
-<pre class="brush: js">(-2) ** 2 // 4
-</pre>
-
-<h2 id="specifications">Spécifications</h2>
-
-<p>{{Specifications}}</p>
-
-<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
-
-<p>{{Compat}}</p>
-
-<h2 id="see_also">Voir aussi</h2>
-
-<ul>
-  <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Addition">Opérateur d'addition</a></li>
-  <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Subtraction">Opérateur de soustraction</a></li>
-  <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Multiplication">Opérateur de multiplication</a></li>
-  <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Division">Opérateur de division</a></li>
-  <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Remainder">Opérateur de reste</a></li>
-  <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Increment">Opérateur d'incrémentation</a></li>
-  <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Decrement">Opérateur de décrémentation</a></li>
-  <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Unary_negation">Opérateur de négation unaire</a></li>
-  <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Unary_plus">Opérateur plus unaire</a></li>
-</ul>
diff --git a/files/fr/web/javascript/reference/operators/exponentiation/index.md b/files/fr/web/javascript/reference/operators/exponentiation/index.md
new file mode 100644
index 0000000000..05e4fa2cf7
--- /dev/null
+++ b/files/fr/web/javascript/reference/operators/exponentiation/index.md
@@ -0,0 +1,94 @@
+---
+title: Exponentiation (**)
+slug: Web/JavaScript/Reference/Operators/Exponentiation
+tags:
+  - JavaScript
+  - Language feature
+  - Operator
+  - Reference
+browser-compat: javascript.operators.exponentiation
+---
+{{jsSidebar("Operators")}}
+
+L'opérateur d'exponentiation (`**`) fournit le résultat obtenu lorsqu'on élève le premier opérande à la puissance indiquée par le second. Il est équivalent `Math.pow` exception faite que cet opérateur permet également d'utiliser des valeurs BigInt comme opérandes.
+
+{{EmbedInteractiveExample("pages/js/expressions-exponentiation.html")}}
+
+## Syntaxe
+
+```js
+Opérateur : var1 ** var2
+```
+
+## Description
+
+L'opérateur d'exponentiation est associatif à droite : `a ** b ** c` est équivalent à `a ** (b ** c)`.
+
+Pour la plupart des langages possédant un opérateur d'exponentiation (ex. PHP, Python, etc.), l'opérateur d'exponentiation possède une précédence plus élevée que les opérateurs unaires (comme l'addition unaire `+` ou la soustraction unaire `-`). Il existe toutefois quelques exceptions comme Bash, où `**` possède une précédence inférieure à celles des opérateurs unaires.
+
+En JavaScript, il est impossible d'écrire une expression d'exponentiation ambigüe : on ne peut pas placer un opérateur unaire (`+/-/~/!/delete/void/typeof`) avant le nombre servant de base, cela provoquera une exception `SyntaxError`.
+
+```js
+-2 ** 2;
+// 4 en Bash, -4 pour d'autres langages.
+// Invalide en JavaScript car l'opération est ambigüe.
+
+-(2 ** 2);
+// -4 en JavaScript, les parenthèses évitent l'ambiguité.
+```
+
+Attnetion, certains langages de programmation utilisent l'accent circonflexe <kbd>^</kbd> pour exprimer l'exponentiaion mais JavaScript utilise ce symbole pour [l'opérateur binaire OU exclusif (XOR)](/fr/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#Bitwise_XOR).
+
+## Exemples
+
+### Exponentiation simple
+
+```js
+2 ** 3   // 8
+3 ** 2   // 9
+3 ** 2.5 // 15.588457268119896
+10 ** -1 // 0.1
+NaN ** 2 // NaN
+```
+
+### Associativité
+
+```js
+2 ** 3 ** 2   // 512
+2 ** (3 ** 2) // 512
+(2 ** 3) ** 2 // 64
+```
+
+### Avec les opérateurs unaires
+
+Pour prendre l'opposé du résultat :
+
+```js
+-(2 ** 2) // -4
+```
+
+Pour forcer le signe de la base en négatif :
+
+```js
+(-2) ** 2 // 4
+```
+
+## Spécifications
+
+{{Specifications}}
+
+## Compatibilité des navigateurs
+
+{{Compat}}
+
+## Voir aussi
+
+- [Opérateur d'addition](/fr/docs/Web/JavaScript/Reference/Operators/Addition)
+- [Opérateur de soustraction](/fr/docs/Web/JavaScript/Reference/Operators/Subtraction)
+- [Opérateur de multiplication](/fr/docs/Web/JavaScript/Reference/Operators/Multiplication)
+- [Opérateur de division](/fr/docs/Web/JavaScript/Reference/Operators/Division)
+- [Opérateur de reste](/fr/docs/Web/JavaScript/Reference/Operators/Remainder)
+- [Opérateur d'incrémentation](/fr/docs/Web/JavaScript/Reference/Operators/Increment)
+- [Opérateur de décrémentation](/fr/docs/Web/JavaScript/Reference/Operators/Decrement)
+- [Opérateur de négation unaire](/fr/docs/Web/JavaScript/Reference/Operators/Unary_negation)
+- [Opérateur plus unaire](/fr/docs/Web/JavaScript/Reference/Operators/Unary_plus)
diff --git a/files/fr/web/javascript/reference/operators/exponentiation_assignment/index.html b/files/fr/web/javascript/reference/operators/exponentiation_assignment/index.html
deleted file mode 100644
index b83a331cf4..0000000000
--- a/files/fr/web/javascript/reference/operators/exponentiation_assignment/index.html
+++ /dev/null
@@ -1,49 +0,0 @@
----
-title: Affectation après exponentiation (**=)
-slug: Web/JavaScript/Reference/Operators/Exponentiation_assignment
-tags:
-  - Assignment operator
-  - JavaScript
-  - Language feature
-  - Operator
-  - Reference
-browser-compat: javascript.operators.exponentiation_assignment
-translation-of: Web/JavaScript/Reference/Operators/Exponentiation_assignment
----
-<div>{{jsSidebar("Operators")}}</div>
-
-<p>L'opérateur d'exponentiation et d'affectation (<code>**=</code>) élève la valeur de la variable fournie par son opérande gauche à la puissance indiquée par son opérande droit puis affecte le résultat à la variable représentée par l'opérande gauche.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/expressions-exponentiation-assignment.html")}}</div>
-
-<h2 id="syntax">Syntaxe</h2>
-
-<pre class="brush: js">
-<strong>Opérateur :</strong> x **= y
-<strong>Signification :</strong>  x  = x ** y
-</pre>
-
-<h2 id="examples">Exemples</h2>
-
-<h3 id="using_exponentiation_assignment">Utiliser l'opérateur d'exponentiation et d'affectation</h3>
-
-<pre class="brush: js">
-let truc = 5;
-truc **= 2;      // 25
-truc **= 'toto'; // NaN
-</pre>
-
-<h2 id="specifications">Spécifications</h2>
-
-<p>{{Specifications}}</p>
-
-<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
-
-<p>{{Compat}}</p>
-
-<h2 id="see_also">Voir aussi</h2>
-
-<ul>
-  <li><a href="/fr/docs/Web/JavaScript/Guide/Expressions_and_Operators#assignment">Les opérateurs d'affectation dans le guide JavaScript</a></li>
-  <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Exponentiation">L'opérateur d'exponentiation</a></li>
-</ul>
diff --git a/files/fr/web/javascript/reference/operators/exponentiation_assignment/index.md b/files/fr/web/javascript/reference/operators/exponentiation_assignment/index.md
new file mode 100644
index 0000000000..2358751fd3
--- /dev/null
+++ b/files/fr/web/javascript/reference/operators/exponentiation_assignment/index.md
@@ -0,0 +1,46 @@
+---
+title: Affectation après exponentiation (**=)
+slug: Web/JavaScript/Reference/Operators/Exponentiation_assignment
+tags:
+  - Assignment operator
+  - JavaScript
+  - Language feature
+  - Operator
+  - Reference
+browser-compat: javascript.operators.exponentiation_assignment
+---
+{{jsSidebar("Operators")}}
+
+L'opérateur d'exponentiation et d'affectation (`**=`) élève la valeur de la variable fournie par son opérande gauche à la puissance indiquée par son opérande droit puis affecte le résultat à la variable représentée par l'opérande gauche.
+
+{{EmbedInteractiveExample("pages/js/expressions-exponentiation-assignment.html")}}
+
+## Syntaxe
+
+```js
+Opérateur : x **= y
+Signification :  x  = x ** y
+```
+
+## Exemples
+
+### Utiliser l'opérateur d'exponentiation et d'affectation
+
+```js
+let truc = 5;
+truc **= 2;      // 25
+truc **= 'toto'; // NaN
+```
+
+## Spécifications
+
+{{Specifications}}
+
+## Compatibilité des navigateurs
+
+{{Compat}}
+
+## Voir aussi
+
+- [Les opérateurs d'affectation dans le guide JavaScript](/fr/docs/Web/JavaScript/Guide/Expressions_and_Operators#assignment)
+- [L'opérateur d'exponentiation](/fr/docs/Web/JavaScript/Reference/Operators/Exponentiation)
diff --git a/files/fr/web/javascript/reference/operators/function/index.html b/files/fr/web/javascript/reference/operators/function/index.html
deleted file mode 100644
index 83dd3e1f77..0000000000
--- a/files/fr/web/javascript/reference/operators/function/index.html
+++ /dev/null
@@ -1,154 +0,0 @@
----
-title: L'opérateur function
-slug: Web/JavaScript/Reference/Operators/function
-tags:
-  - Function
-  - JavaScript
-  - Operator
-  - Reference
-translation_of: Web/JavaScript/Reference/Operators/function
-original_slug: Web/JavaScript/Reference/Opérateurs/L_opérateur_function
----
-<div>{{jsSidebar("Operators")}}</div>
-
-<p>Le mot-clé <strong><code>function</code></strong> permet de définir une fonction à l'intérieur d'une expression.</p>
-
-<div class="note">
-<p><strong>Note :</strong> Il est également possible de définir des fonctions grâce au constructeur <code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Function">Function</a></code> et aux <a href="/fr/docs/Web/JavaScript/Reference/Instructions/function">déclarations de fonction</a>.</p>
-</div>
-
-<div>{{EmbedInteractiveExample("pages/js/expressions-functionexpression.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">function [<em>nom</em>]([<em>param1</em>[, <em>param2[</em>, ..., <em>paramN</em>]]]) {
-   <em>instructions</em>
-}</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>nom</code></dt>
- <dd>Le nom de la fonction. Peut être omis, auquel cas on parlera d'une fonction <em>anonyme</em>.</dd>
- <dt><code>paramN</code></dt>
- <dd>Le nom d'un paramètre à passer à la fonction.</dd>
- <dt><code>instructions</code></dt>
- <dd>Les instructions constituant le corps de la fonction.</dd>
-</dl>
-
-<div class="note">
-<p><strong>Note :</strong> À partir d'ES2015/ES6, on peut également former des expressions de fonction avec <a href="/fr/docs/Web/JavaScript/Reference/Fonctions/Fonctions_fl%C3%A9ch%C3%A9es">des fonctions fléchées</a>.</p>
-</div>
-
-<h2 id="Description">Description</h2>
-
-<p>Une expression de fonction est très similaire et a presque la même syntaxe qu'une déclaration de fonction (consultez la page sur l'instruction <a href="/fr/docs/Web/JavaScript/Reference/Instructions/function"><code>function</code></a> pour plus de détails). La différence principale entre une expression de fonction et une instruction est le nom de la fonction. En effet, pour les expressions, celui peut être omis (on parle alors d'une fonction <em>anonyme</em>). Consultez l'article <a href="/fr/docs/Web/JavaScript/Guide/Fonctions">Fonctions</a> pour des informations concernant les différences entre les instructions de fonctions et les expressions de fonctions. Une fonction peut être appelée <a href="/fr/docs/Glossaire/IIFE">immédiatement après sa définition (on parle alors de fonction invoquée immédiatement ou <em>IIFE</em> pour <em>Immediately Invoked Function Expression</em> en anglais)</a>.</p>
-
-<h3 id="Remontée_(hoisting)_des_expressions_de_fonction">Remontée (<em>hoisting</em>) des expressions de fonction</h3>
-
-<p>En JavaScript, les expressions de fonction ne sont pas remontées (à la différence des déclarations de fonction). Il est donc impossible d'utiliser les expressions de fonction avant leur définition :</p>
-
-<pre class="brush: js">nonRemontée(); // TypeError: nonRemontée is not a function
-
-var nonRemontée = function() {
-  console.log("truc");
-}
-</pre>
-
-<h2 id="Exemples">Exemples</h2>
-
-<p>L'exemple qui suit définit une fonction anonyme et l'assigne à une variable <code>x</code>. La fonction renvoie le carré de son paramètre :</p>
-
-<pre class="brush: js">var x = function(y) {
-   return y * y;
-};
-</pre>
-
-<h3 id="Expression_nommée">Expression nommée</h3>
-
-<p>Si on souhaite faire référence à une fonction au sein du corps de la fonction, il faudra créer une expression de fonction nommée. Le nom sera alors local au corps de la fonction (portée). Cela permet entre autres d'éviter d'utiliser la propriété non-standard <code><a href="/fr/docs/Web/JavaScript/Reference/Fonctions/arguments/callee">arguments.callee</a></code>.</p>
-
-<pre class="brush: js">var math = {
-  'factorielle': function factorielle(n) {
-    if (n &lt;= 1) {
-      return 1;
-    }
-    return n * factorielle(n - 1);
-  }
-};</pre>
-
-<p>La variable affectée à l'expression de fonction aura une propriété <code>name</code>. Ce nom n'est pas modifié si la variable est réaffectée. Si le nom de la fonction est absent, ce sera celui de la variable (nom « implicite »). Cela vaut également pour <a href="/fr/docs/Web/JavaScript/Reference/Fonctions/Fonctions_fl%C3%A9ch%C3%A9es">les fonctions fléchées</a> :</p>
-
-<pre class="brush: js">var toto = function() {};
-console.log(toto.name); // "toto"
-
-var toto2 = toto;
-console.log(toto2.name); // "toto"
-
-var truc = function machin() {}
-console.log(truc.name); // "machin"
-</pre>
-
-<h3 id="IIFE_pour_Immediately_Invoked_Function_Expression_ou_expression_de_fonction_immédiatement_appelée">IIFE pour <em>Immediately Invoked Function Expression</em> ou expression de fonction immédiatement appelée</h3>
-
-<p>On peut utiliser une expression de fonction pour créer une « IIFE », c'est-à-dire une expression de fonction qu'on appelle dès sa définition :</p>
-
-<pre class="brush: js">var a = "coucou";
-var b = "monde";
-
-// IIFE
-(function(x, y) {
-  console.log(x + " " + y);
-})(a, b);
-// coucou monde
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-function-definitions', 'Function definitions')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-function-definitions', 'Définitions de fonction')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-13', 'Définitions de fonction')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES3', '#sec-13', 'Définitions de fonction')}}</td>
-   <td>{{Spec2('ES3')}}</td>
-   <td>Définition initiale. Implémentée avec JavaScript 1.5.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.operators.function")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Fonctions", "Fonctions et portée des fonctions")}}</li>
- <li>{{jsxref("Objets_globaux/Function","L'objet Function")}}</li>
- <li>{{jsxref("Instructions/function", "Instruction function")}}</li>
- <li>{{jsxref("Instructions/function*", "Instruction function*")}}</li>
- <li>{{jsxref("Opérateurs/function*", "Expression function*")}}</li>
- <li>{{jsxref("GeneratorFunction")}}</li>
- <li><a href="/fr/docs/Web/JavaScript/Reference/Fonctions/Fonctions_fl%C3%A9ch%C3%A9es">Les fonctions fléchées</a></li>
- <li><a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/async_function">Les expressions de fonctions asynchrones (l'opérateur <code>async function</code>)</a></li>
- <li><a href="/fr/docs/Web/JavaScript/Reference/Instructions/async_function">Les déclarations de fonctions asynchrones (l'instruction <code>async function</code>)</a></li>
-</ul>
diff --git a/files/fr/web/javascript/reference/operators/function/index.md b/files/fr/web/javascript/reference/operators/function/index.md
new file mode 100644
index 0000000000..34213fa6f1
--- /dev/null
+++ b/files/fr/web/javascript/reference/operators/function/index.md
@@ -0,0 +1,129 @@
+---
+title: L'opérateur function
+slug: Web/JavaScript/Reference/Operators/function
+tags:
+  - Function
+  - JavaScript
+  - Operator
+  - Reference
+translation_of: Web/JavaScript/Reference/Operators/function
+original_slug: Web/JavaScript/Reference/Opérateurs/L_opérateur_function
+---
+{{jsSidebar("Operators")}}
+
+Le mot-clé **`function`** permet de définir une fonction à l'intérieur d'une expression.
+
+> **Note :** Il est également possible de définir des fonctions grâce au constructeur [`Function`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Function) et aux [déclarations de fonction](/fr/docs/Web/JavaScript/Reference/Instructions/function).
+
+{{EmbedInteractiveExample("pages/js/expressions-functionexpression.html")}}
+
+## Syntaxe
+
+    function [nom]([param1[, param2[, ..., paramN]]]) {
+       instructions
+    }
+
+### Paramètres
+
+- `nom`
+  - : Le nom de la fonction. Peut être omis, auquel cas on parlera d'une fonction _anonyme_.
+- `paramN`
+  - : Le nom d'un paramètre à passer à la fonction.
+- `instructions`
+  - : Les instructions constituant le corps de la fonction.
+
+> **Note :** À partir d'ES2015/ES6, on peut également former des expressions de fonction avec [des fonctions fléchées](/fr/docs/Web/JavaScript/Reference/Fonctions/Fonctions_fl%C3%A9ch%C3%A9es).
+
+## Description
+
+Une expression de fonction est très similaire et a presque la même syntaxe qu'une déclaration de fonction (consultez la page sur l'instruction [`function`](/fr/docs/Web/JavaScript/Reference/Instructions/function) pour plus de détails). La différence principale entre une expression de fonction et une instruction est le nom de la fonction. En effet, pour les expressions, celui peut être omis (on parle alors d'une fonction _anonyme_). Consultez l'article [Fonctions](/fr/docs/Web/JavaScript/Guide/Fonctions) pour des informations concernant les différences entre les instructions de fonctions et les expressions de fonctions. Une fonction peut être appelée [immédiatement après sa définition (on parle alors de fonction invoquée immédiatement ou _IIFE_ pour _Immediately Invoked Function Expression_ en anglais)](/fr/docs/Glossaire/IIFE).
+
+### Remontée (_hoisting_) des expressions de fonction
+
+En JavaScript, les expressions de fonction ne sont pas remontées (à la différence des déclarations de fonction). Il est donc impossible d'utiliser les expressions de fonction avant leur définition :
+
+```js
+nonRemontée(); // TypeError: nonRemontée is not a function
+
+var nonRemontée = function() {
+  console.log("truc");
+}
+```
+
+## Exemples
+
+L'exemple qui suit définit une fonction anonyme et l'assigne à une variable `x`. La fonction renvoie le carré de son paramètre :
+
+```js
+var x = function(y) {
+   return y * y;
+};
+```
+
+### Expression nommée
+
+Si on souhaite faire référence à une fonction au sein du corps de la fonction, il faudra créer une expression de fonction nommée. Le nom sera alors local au corps de la fonction (portée). Cela permet entre autres d'éviter d'utiliser la propriété non-standard [`arguments.callee`](/fr/docs/Web/JavaScript/Reference/Fonctions/arguments/callee).
+
+```js
+var math = {
+  'factorielle': function factorielle(n) {
+    if (n <= 1) {
+      return 1;
+    }
+    return n * factorielle(n - 1);
+  }
+};
+```
+
+La variable affectée à l'expression de fonction aura une propriété `name`. Ce nom n'est pas modifié si la variable est réaffectée. Si le nom de la fonction est absent, ce sera celui de la variable (nom « implicite »). Cela vaut également pour [les fonctions fléchées](/fr/docs/Web/JavaScript/Reference/Fonctions/Fonctions_fl%C3%A9ch%C3%A9es) :
+
+```js
+var toto = function() {};
+console.log(toto.name); // "toto"
+
+var toto2 = toto;
+console.log(toto2.name); // "toto"
+
+var truc = function machin() {}
+console.log(truc.name); // "machin"
+```
+
+### IIFE pour _Immediately Invoked Function Expression_ ou expression de fonction immédiatement appelée
+
+On peut utiliser une expression de fonction pour créer une « IIFE », c'est-à-dire une expression de fonction qu'on appelle dès sa définition :
+
+```js
+var a = "coucou";
+var b = "monde";
+
+// IIFE
+(function(x, y) {
+  console.log(x + " " + y);
+})(a, b);
+// coucou monde
+```
+
+## Spécifications
+
+| Spécification                                                                                        | État                         | Commentaires                                          |
+| ---------------------------------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- |
+| {{SpecName('ESDraft', '#sec-function-definitions', 'Function definitions')}} | {{Spec2('ESDraft')}} |                                                       |
+| {{SpecName('ES6', '#sec-function-definitions', 'Définitions de fonction')}} | {{Spec2('ES6')}}         |                                                       |
+| {{SpecName('ES5.1', '#sec-13', 'Définitions de fonction')}}                     | {{Spec2('ES5.1')}}     |                                                       |
+| {{SpecName('ES3', '#sec-13', 'Définitions de fonction')}}                         | {{Spec2('ES3')}}         | Définition initiale. Implémentée avec JavaScript 1.5. |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.operators.function")}}
+
+## Voir aussi
+
+- {{jsxref("Fonctions", "Fonctions et portée des fonctions")}}
+- {{jsxref("Objets_globaux/Function","L'objet Function")}}
+- {{jsxref("Instructions/function", "Instruction function")}}
+- {{jsxref("Instructions/function*", "Instruction function*")}}
+- {{jsxref("Opérateurs/function*", "Expression function*")}}
+- {{jsxref("GeneratorFunction")}}
+- [Les fonctions fléchées](/fr/docs/Web/JavaScript/Reference/Fonctions/Fonctions_fl%C3%A9ch%C3%A9es)
+- [Les expressions de fonctions asynchrones (l'opérateur `async function`)](/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/async_function)
+- [Les déclarations de fonctions asynchrones (l'instruction `async function`)](/fr/docs/Web/JavaScript/Reference/Instructions/async_function)
diff --git a/files/fr/web/javascript/reference/operators/function_star_/index.html b/files/fr/web/javascript/reference/operators/function_star_/index.html
deleted file mode 100644
index 8ffb95d5bd..0000000000
--- a/files/fr/web/javascript/reference/operators/function_star_/index.html
+++ /dev/null
@@ -1,88 +0,0 @@
----
-title: Expression function*
-slug: Web/JavaScript/Reference/Operators/function*
-tags:
-  - ECMAScript 2015
-  - Function
-  - Iterator
-  - JavaScript
-  - Operator
-  - Reference
-translation_of: Web/JavaScript/Reference/Operators/function*
-original_slug: Web/JavaScript/Reference/Opérateurs/function*
----
-<div>{{jsSidebar("Operators")}}</div>
-
-<p>Le mot-clé <strong><code>function*</code></strong> peut être utilisé pour définir une fonction génératrice à l'intérieur d'une expression.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/expressions-functionasteriskexpression.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">function* [<em>nom</em>]([<em>param1</em>[, <em>param2[</em>, ..., <em>paramN</em>]]]) {
-   <em>instructions</em>
-}</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>nom</code></dt>
- <dd>Le nom de la fonction. Ce paramètre est optionnel, auquel cas la fonction sera une fonction <em>anonyme</em>. Le nom sera local par rapport au corps de la fonction.</dd>
- <dt><code>paramN</code></dt>
- <dd>Le nom d'un argument à passer à la fonction. Une fonction peut avoir jusqu'à 255 arguments.</dd>
- <dt><code>instructions</code></dt>
- <dd>Les instructions qui forment le corps de la fonction.</dd>
-</dl>
-
-<h2 id="Description">Description</h2>
-
-<p>Une expression <code>function*</code> est très semblable à une instruction {{jsxref('Instructions/function*', 'function*')}}, elle possède également une syntaxe similaire. La différence principale entre une expression <code>function*</code> et une instruction <code>function*</code> est le nom de la fonction. En effet, dans les expressions, le nom peut être omis pour créer une fonction génératrice<em> anonyme</em>. Voir également le chapitre sur les <a href="/fr/docs/Web/JavaScript/Reference/Fonctions">fonctions</a> pour plus d'informations.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<p>L'exemple qui suit illustre comment définir une génératrice anonyme et l'affecter à une variable <code>x</code>. Cette fonction génèrera le carré de son argument :</p>
-
-<pre class="brush: js">var x = function*(y) {
-   yield y * y;
-};
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-generator-function-definitions', 'function*')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-generator-function-definitions', 'function*')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.operators.function_star")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>L'instruction {{jsxref("Instructions/function*", "function*")}}</li>
- <li>L'objet {{jsxref("GeneratorFunction")}}</li>
- <li><a href="/fr/docs/Web/JavaScript/Guide/The_Iterator_protocol">Le protocole itérateur</a></li>
- <li>{{jsxref("Opérateurs/yield", "yield")}}</li>
- <li>{{jsxref("Opérateurs/yield*", "yield*")}}</li>
- <li>L'objet {{jsxref("Function")}}</li>
- <li>L'instruction {{jsxref("Instructions/function", "function")}}</li>
- <li>L'expression {{jsxref("Opérateurs/L_opérateur_function", "function")}}</li>
- <li>{{jsxref("Fonctions", "Fonctions et portée des fonctions","","1")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/operators/function_star_/index.md b/files/fr/web/javascript/reference/operators/function_star_/index.md
new file mode 100644
index 0000000000..2585ad0c1b
--- /dev/null
+++ b/files/fr/web/javascript/reference/operators/function_star_/index.md
@@ -0,0 +1,70 @@
+---
+title: Expression function*
+slug: Web/JavaScript/Reference/Operators/function*
+tags:
+  - ECMAScript 2015
+  - Function
+  - Iterator
+  - JavaScript
+  - Operator
+  - Reference
+translation_of: Web/JavaScript/Reference/Operators/function*
+original_slug: Web/JavaScript/Reference/Opérateurs/function*
+---
+{{jsSidebar("Operators")}}
+
+Le mot-clé **`function*`** peut être utilisé pour définir une fonction génératrice à l'intérieur d'une expression.
+
+{{EmbedInteractiveExample("pages/js/expressions-functionasteriskexpression.html")}}
+
+## Syntaxe
+
+    function* [nom]([param1[, param2[, ..., paramN]]]) {
+       instructions
+    }
+
+### Paramètres
+
+- `nom`
+  - : Le nom de la fonction. Ce paramètre est optionnel, auquel cas la fonction sera une fonction _anonyme_. Le nom sera local par rapport au corps de la fonction.
+- `paramN`
+  - : Le nom d'un argument à passer à la fonction. Une fonction peut avoir jusqu'à 255 arguments.
+- `instructions`
+  - : Les instructions qui forment le corps de la fonction.
+
+## Description
+
+Une expression `function*` est très semblable à une instruction {{jsxref('Instructions/function*', 'function*')}}, elle possède également une syntaxe similaire. La différence principale entre une expression `function*` et une instruction `function*` est le nom de la fonction. En effet, dans les expressions, le nom peut être omis pour créer une fonction génératrice _anonyme_. Voir également le chapitre sur les [fonctions](/fr/docs/Web/JavaScript/Reference/Fonctions) pour plus d'informations.
+
+## Exemples
+
+L'exemple qui suit illustre comment définir une génératrice anonyme et l'affecter à une variable `x`. Cette fonction génèrera le carré de son argument :
+
+```js
+var x = function*(y) {
+   yield y * y;
+};
+```
+
+## Spécifications
+
+| Spécification                                                                                        | État                         | Commentaires         |
+| ---------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName('ES2015', '#sec-generator-function-definitions', 'function*')}} | {{Spec2('ES2015')}}     | Définition initiale. |
+| {{SpecName('ESDraft', '#sec-generator-function-definitions', 'function*')}} | {{Spec2('ESDraft')}} |                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.operators.function_star")}}
+
+## Voir aussi
+
+- L'instruction {{jsxref("Instructions/function*", "function*")}}
+- L'objet {{jsxref("GeneratorFunction")}}
+- [Le protocole itérateur](/fr/docs/Web/JavaScript/Guide/The_Iterator_protocol)
+- {{jsxref("Opérateurs/yield", "yield")}}
+- {{jsxref("Opérateurs/yield*", "yield*")}}
+- L'objet {{jsxref("Function")}}
+- L'instruction {{jsxref("Instructions/function", "function")}}
+- L'expression {{jsxref("Opérateurs/L_opérateur_function", "function")}}
+- {{jsxref("Fonctions", "Fonctions et portée des fonctions","","1")}}
diff --git a/files/fr/web/javascript/reference/operators/greater_than/index.html b/files/fr/web/javascript/reference/operators/greater_than/index.html
deleted file mode 100644
index 84d44509a0..0000000000
--- a/files/fr/web/javascript/reference/operators/greater_than/index.html
+++ /dev/null
@@ -1,100 +0,0 @@
----
-title: Supérieur strict (>)
-slug: Web/JavaScript/Reference/Operators/Greater_than
-tags:
-  - JavaScript
-  - Language feature
-  - Operator
-  - Reference
-browser-compat: javascript.operators.greater_than
-translation-of: Web/JavaScript/Reference/Operators/Greater_than
----
-<div>{{jsSidebar("Operators")}}</div>
-
-<p>L'opérateur supérieur strict (<code>&gt;</code>) renvoie <code>true</code> si l'opérande gauche est strictement supérieur à l'opérande droit et <code>false</code> sinon.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/expressions-greater-than.html")}}</div>
-
-<h2 id="syntax">Syntaxe</h2>
-
-<pre class="brush: js">
-x &gt; y
-</pre>
-
-<h2 id="description">Description</h2>
-
-<p>Les opérandes sont comparés avec l'algorithme de <a href="https://tc39.es/ecma262/#sec-abstract-relational-comparison">comparaison abstraite relationnelle</a>. Voir la documentation de <a href="/fr/docs/Web/JavaScript/Reference/Operators/Less_than">l'opérateur inférieur strict</a> pour un résumé de cet algorithme.</p>
-
-<h2 id="examples">Exemples</h2>
-
-<h3 id="number_to_number_comparison">Comparaison numérique</h3>
-
-<pre class="brush: js">
-console.log(5 &gt; 3);            // true
-console.log(3 &gt; 3);            // false
-console.log(3 &gt; 5);            // false
-</pre>
-
-<h3 id="number_to_bigint_comparison">Comparaison entre un nombre et un BigInt</h3>
-
-<pre class="brush: js">
-console.log(5n &gt; 3);           // true
-console.log(3 &gt; 5n);           // false
-</pre>
-
-<h3 id="string_to_string_comparison">Comparaison entre chaînes de caractères</h3>
-
-<pre class="brush: js">
-console.log("a" &gt; "b");        // false
-console.log("a" &gt; "a");        // false
-console.log("a" &gt; "3");        // true
-</pre>
-
-<h3 id="string_to_number_comparison">Comparaison entre nombres et chaînes de caractères</h3>
-
-<pre class="brush: js">
-console.log("5" &gt; 3);          // true
-console.log("3" &gt; 3);          // false
-console.log("3" &gt; 5);          // false
-
-console.log("coucou" &gt; 5);      // false
-console.log(5 &gt; "coucou");      // false
-
-console.log("5" &gt; 3n);         // true
-console.log("3" &gt; 5n);         // false
-</pre>
-
-<h3 id="comparing_boolean_null_undefined_nan">Comparaison avec des booléens, null, undefined, NaN</h3>
-
-<pre class="brush: js">
-console.log(true &gt; false);     // true
-console.log(false &gt; true);     // false
-
-console.log(true &gt; 0);         // true
-console.log(true &gt; 1);         // false
-
-console.log(null &gt; 0);         // false
-console.log(1 &gt; null);         // true
-
-console.log(undefined &gt; 3);    // false
-console.log(3 &gt; undefined);    // false
-
-console.log(3 &gt; NaN);          // false
-console.log(NaN &gt; 3);          // false
-</pre>
-
-<h2 id="specifications">Spécifications</h2>
-
-<p>{{Specifications}}</p>
-
-<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
-
-<p>{{Compat}}</p>
-
-<h2 id="see_also">Voir aussi</h2>
-
-<ul>
-  <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Greater_than_or_equal">L'opérateur supérieur ou égal</a></li>
-  <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Less_than">L'opérateur inférieur strict</a></li>
-  <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Less_than_or_equal">L'opérateur inférieur ou égal</a></li>
-</ul>
diff --git a/files/fr/web/javascript/reference/operators/greater_than/index.md b/files/fr/web/javascript/reference/operators/greater_than/index.md
new file mode 100644
index 0000000000..a9e72a200e
--- /dev/null
+++ b/files/fr/web/javascript/reference/operators/greater_than/index.md
@@ -0,0 +1,97 @@
+---
+title: Supérieur strict (>)
+slug: Web/JavaScript/Reference/Operators/Greater_than
+tags:
+  - JavaScript
+  - Language feature
+  - Operator
+  - Reference
+browser-compat: javascript.operators.greater_than
+---
+{{jsSidebar("Operators")}}
+
+L'opérateur supérieur strict (`>`) renvoie `true` si l'opérande gauche est strictement supérieur à l'opérande droit et `false` sinon.
+
+{{EmbedInteractiveExample("pages/js/expressions-greater-than.html")}}
+
+## Syntaxe
+
+```js
+x > y
+```
+
+## Description
+
+Les opérandes sont comparés avec l'algorithme de [comparaison abstraite relationnelle](https://tc39.es/ecma262/#sec-abstract-relational-comparison). Voir la documentation de [l'opérateur inférieur strict](/fr/docs/Web/JavaScript/Reference/Operators/Less_than) pour un résumé de cet algorithme.
+
+## Exemples
+
+### Comparaison numérique
+
+```js
+console.log(5 > 3);            // true
+console.log(3 > 3);            // false
+console.log(3 > 5);            // false
+```
+
+### Comparaison entre un nombre et un BigInt
+
+```js
+console.log(5n > 3);           // true
+console.log(3 > 5n);           // false
+```
+
+### Comparaison entre chaînes de caractères
+
+```js
+console.log("a" > "b");        // false
+console.log("a" > "a");        // false
+console.log("a" > "3");        // true
+```
+
+### Comparaison entre nombres et chaînes de caractères
+
+```js
+console.log("5" > 3);          // true
+console.log("3" > 3);          // false
+console.log("3" > 5);          // false
+
+console.log("coucou" > 5);      // false
+console.log(5 > "coucou");      // false
+
+console.log("5" > 3n);         // true
+console.log("3" > 5n);         // false
+```
+
+### Comparaison avec des booléens, null, undefined, NaN
+
+```js
+console.log(true > false);     // true
+console.log(false > true);     // false
+
+console.log(true > 0);         // true
+console.log(true > 1);         // false
+
+console.log(null > 0);         // false
+console.log(1 > null);         // true
+
+console.log(undefined > 3);    // false
+console.log(3 > undefined);    // false
+
+console.log(3 > NaN);          // false
+console.log(NaN > 3);          // false
+```
+
+## Spécifications
+
+{{Specifications}}
+
+## Compatibilité des navigateurs
+
+{{Compat}}
+
+## Voir aussi
+
+- [L'opérateur supérieur ou égal](/fr/docs/Web/JavaScript/Reference/Operators/Greater_than_or_equal)
+- [L'opérateur inférieur strict](/fr/docs/Web/JavaScript/Reference/Operators/Less_than)
+- [L'opérateur inférieur ou égal](/fr/docs/Web/JavaScript/Reference/Operators/Less_than_or_equal)
diff --git a/files/fr/web/javascript/reference/operators/greater_than_or_equal/index.html b/files/fr/web/javascript/reference/operators/greater_than_or_equal/index.html
deleted file mode 100644
index 4737d5161d..0000000000
--- a/files/fr/web/javascript/reference/operators/greater_than_or_equal/index.html
+++ /dev/null
@@ -1,99 +0,0 @@
----
-title: Supérieur ou égal (>=)
-slug: Web/JavaScript/Reference/Operators/Greater_than_or_equal
-tags:
-  - JavaScript
-  - Language feature
-  - Operator
-  - Reference
-browser-compat: javascript.operators.greater_than_or_equal
-translation-of: Web/JavaScript/Reference/Operators/Greater_than_or_equal
----
-<div>{{jsSidebar("Operators")}}</div>
-
-<p>L'opérateur supérieur ou égal (<code>&gt;=</code>) renvoie <code>true</code> si l'opérande gauche est supérieur ou égal à l'opérande droit et <code>false</code> sinon.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/expressions-greater-than-or-equal.html")}}</div>
-
-<h2 id="syntax">Syntaxe</h2>
-
-<pre class="brush: js">
-x &gt;= y
-</pre>
-
-<h2 id="description">Description</h2>
-
-<p>Les opérandes sont comparés avec l'algorithme de <a href="https://tc39.es/ecma262/#sec-abstract-relational-comparison">comparaison abstraite relationnelle</a>. Voir la documentation de <a href="/fr/docs/Web/JavaScript/Reference/Operators/Less_than">l'opérateur inférieur strict</a> pour un résumé de cet algorithme.</p>
-
-<h2 id="examples">Exemples</h2>
-
-<h3 id="number_to_number_comparison">Comparaison numérique</h3>
-
-<pre class="brush: js">
-console.log(5 &gt;= 3);         // true
-console.log(3 &gt;= 3);         // true
-console.log(3 &gt;= 5);         // false
-</pre>
-
-<h3 id="number_to_bigint_comparison">Comparaison entre un nombre et un BigInt</h3>
-
-<pre class="brush: js">
-console.log(5n &gt;= 3);        // true
-console.log(3 &gt;= 3n);        // true
-console.log(3 &gt;= 5n);        // false
-</pre>
-
-<h3 id="string_to_string_comparison">Comparaison entre chaînes de caractères</h3>
-
-<pre class="brush: js">
-console.log("a" &gt;= "b");     // false
-console.log("a" &gt;= "a");     // true
-console.log("a" &gt;= "3");     // true
-</pre>
-
-<h3 id="string_to_number_comparison">Comparaison entre nombres et chaînes de caractères</h3>
-
-<pre class="brush: js">
-console.log("5" &gt;= 3);       // true
-console.log("3" &gt;= 3);       // true
-console.log("3" &gt;= 5);       // false
-
-console.log("coucou" &gt;= 5);   // false
-console.log(5 &gt;= "coucou");   // false
-</pre>
-
-<h3 id="comparing_boolean_null_undefined_nan">Comparaison avec des booléens, null, undefined, NaN</h3>
-
-<pre class="brush: js">
-console.log(true &gt;= false);  // true
-console.log(true &gt;= true);   // true
-console.log(false &gt;= true);  // false
-
-console.log(true &gt;= 0);      // true
-console.log(true &gt;= 1);      // true
-
-console.log(null &gt;= 0);      // true
-console.log(1 &gt;= null);      // true
-
-console.log(undefined &gt;= 3); // false
-console.log(3 &gt;= undefined); // false
-
-console.log(3 &gt;= NaN);       // false
-console.log(NaN &gt;= 3);       // false
-</pre>
-
-<h2 id="specifications">Spécifications</h2>
-
-<p>{{Specifications}}</p>
-
-<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
-
-<p>{{Compat}}</p>
-
-<h2 id="see_also">Voir aussi</h2>
-
-<ul>
-  <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Greater_than">L'opérateur supérieur strict</a></li>
-  <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Less_than">L'opérateur inférieur strict</a></li>
-  <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Less_than_or_equal">L'opérateur inférieur ou égal</a></li>
-</ul>
diff --git a/files/fr/web/javascript/reference/operators/greater_than_or_equal/index.md b/files/fr/web/javascript/reference/operators/greater_than_or_equal/index.md
new file mode 100644
index 0000000000..f1a7c6bb8b
--- /dev/null
+++ b/files/fr/web/javascript/reference/operators/greater_than_or_equal/index.md
@@ -0,0 +1,96 @@
+---
+title: Supérieur ou égal (>=)
+slug: Web/JavaScript/Reference/Operators/Greater_than_or_equal
+tags:
+  - JavaScript
+  - Language feature
+  - Operator
+  - Reference
+browser-compat: javascript.operators.greater_than_or_equal
+---
+{{jsSidebar("Operators")}}
+
+L'opérateur supérieur ou égal (`>=`) renvoie `true` si l'opérande gauche est supérieur ou égal à l'opérande droit et `false` sinon.
+
+{{EmbedInteractiveExample("pages/js/expressions-greater-than-or-equal.html")}}
+
+## Syntaxe
+
+```js
+x >= y
+```
+
+## Description
+
+Les opérandes sont comparés avec l'algorithme de [comparaison abstraite relationnelle](https://tc39.es/ecma262/#sec-abstract-relational-comparison). Voir la documentation de [l'opérateur inférieur strict](/fr/docs/Web/JavaScript/Reference/Operators/Less_than) pour un résumé de cet algorithme.
+
+## Exemples
+
+### Comparaison numérique
+
+```js
+console.log(5 >= 3);         // true
+console.log(3 >= 3);         // true
+console.log(3 >= 5);         // false
+```
+
+### Comparaison entre un nombre et un BigInt
+
+```js
+console.log(5n >= 3);        // true
+console.log(3 >= 3n);        // true
+console.log(3 >= 5n);        // false
+```
+
+### Comparaison entre chaînes de caractères
+
+```js
+console.log("a" >= "b");     // false
+console.log("a" >= "a");     // true
+console.log("a" >= "3");     // true
+```
+
+### Comparaison entre nombres et chaînes de caractères
+
+```js
+console.log("5" >= 3);       // true
+console.log("3" >= 3);       // true
+console.log("3" >= 5);       // false
+
+console.log("coucou" >= 5);   // false
+console.log(5 >= "coucou");   // false
+```
+
+### Comparaison avec des booléens, null, undefined, NaN
+
+```js
+console.log(true >= false);  // true
+console.log(true >= true);   // true
+console.log(false >= true);  // false
+
+console.log(true >= 0);      // true
+console.log(true >= 1);      // true
+
+console.log(null >= 0);      // true
+console.log(1 >= null);      // true
+
+console.log(undefined >= 3); // false
+console.log(3 >= undefined); // false
+
+console.log(3 >= NaN);       // false
+console.log(NaN >= 3);       // false
+```
+
+## Spécifications
+
+{{Specifications}}
+
+## Compatibilité des navigateurs
+
+{{Compat}}
+
+## Voir aussi
+
+- [L'opérateur supérieur strict](/fr/docs/Web/JavaScript/Reference/Operators/Greater_than)
+- [L'opérateur inférieur strict](/fr/docs/Web/JavaScript/Reference/Operators/Less_than)
+- [L'opérateur inférieur ou égal](/fr/docs/Web/JavaScript/Reference/Operators/Less_than_or_equal)
diff --git a/files/fr/web/javascript/reference/operators/grouping/index.html b/files/fr/web/javascript/reference/operators/grouping/index.html
deleted file mode 100644
index 50bc0b5125..0000000000
--- a/files/fr/web/javascript/reference/operators/grouping/index.html
+++ /dev/null
@@ -1,88 +0,0 @@
----
-title: Opérateur de groupement
-slug: Web/JavaScript/Reference/Operators/Grouping
-tags:
-  - JavaScript
-  - Operator
-  - Primary Expressions
-translation_of: Web/JavaScript/Reference/Operators/Grouping
-original_slug: Web/JavaScript/Reference/Opérateurs/Groupement
----
-<div>{{jsSidebar("Operators")}}</div>
-
-<p>L'opérateur de groupement <code>( )</code> contrôle la précédence de l'évaluation dans les expressions.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/expressions-groupingoperator.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"> ( )</pre>
-
-<h2 id="Description">Description</h2>
-
-<p>L'opérateur de groupement consiste en une paire de parenthèses encadrant une expression et permettant de surcharger la <a href="/fr/docs/JavaScript/Reference/Operateurs/Précédence_des_opérateurs">précédence normale des opérateurs </a>afin que les expressions dont la précédence est plus basse soient évaluées avant.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<p>Normalement, la multiplication et la division sont prises en compte avant l'addition et la soustraction. On peut changer ce comportement avec l'opérateur de groupement.</p>
-
-<pre class="brush:js">var a = 1;
-var b = 2;
-var c = 3;
-
-// précédence normale
-a + b * c     // 7
-// l'évaluation est effectuée de cette façon
-a + (b * c)   // 7
-
-// précédence surchargée avec le groupement
-// on additionne avant de multiplier
-(a + b) * c   // 9
-
-// mathématiquement, cela est équivalent à
-a * c + b * c // 9
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-grouping-operator', 'The Grouping Operator')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-grouping-operator', 'L\'opérateur de groupement')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-11.1.6', 'L\'opérateur de groupement')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES1', '#sec-11.1.4','L\'opérateur de groupement')}}</td>
-   <td>{{Spec2('ES1')}}</td>
-   <td>Définition initiale, implémentée avec JavaScript 1.0.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.operators.grouping")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/JavaScript/Reference/Operateurs/Précédence_des_opérateurs">Précédence des opérators</a></li>
- <li>{{jsxref("Operators/delete", "delete")}}</li>
- <li>{{jsxref("Operators/typeof", "typeof")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/operators/grouping/index.md b/files/fr/web/javascript/reference/operators/grouping/index.md
new file mode 100644
index 0000000000..0705c32d1e
--- /dev/null
+++ b/files/fr/web/javascript/reference/operators/grouping/index.md
@@ -0,0 +1,64 @@
+---
+title: Opérateur de groupement
+slug: Web/JavaScript/Reference/Operators/Grouping
+tags:
+  - JavaScript
+  - Operator
+  - Primary Expressions
+translation_of: Web/JavaScript/Reference/Operators/Grouping
+original_slug: Web/JavaScript/Reference/Opérateurs/Groupement
+---
+{{jsSidebar("Operators")}}
+
+L'opérateur de groupement `( )` contrôle la précédence de l'évaluation dans les expressions.
+
+{{EmbedInteractiveExample("pages/js/expressions-groupingoperator.html")}}
+
+## Syntaxe
+
+     ( )
+
+## Description
+
+L'opérateur de groupement consiste en une paire de parenthèses encadrant une expression et permettant de surcharger la [précédence normale des opérateurs ](/fr/docs/JavaScript/Reference/Operateurs/Précédence_des_opérateurs)afin que les expressions dont la précédence est plus basse soient évaluées avant.
+
+## Exemples
+
+Normalement, la multiplication et la division sont prises en compte avant l'addition et la soustraction. On peut changer ce comportement avec l'opérateur de groupement.
+
+```js
+var a = 1;
+var b = 2;
+var c = 3;
+
+// précédence normale
+a + b * c     // 7
+// l'évaluation est effectuée de cette façon
+a + (b * c)   // 7
+
+// précédence surchargée avec le groupement
+// on additionne avant de multiplier
+(a + b) * c   // 9
+
+// mathématiquement, cela est équivalent à
+a * c + b * c // 9
+```
+
+## Spécifications
+
+| Spécification                                                                                        | Statut                       | Commentaires                                          |
+| ---------------------------------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- |
+| {{SpecName('ESDraft', '#sec-grouping-operator', 'The Grouping Operator')}} | {{Spec2('ESDraft')}} |                                                       |
+| {{SpecName('ES6', '#sec-grouping-operator', 'L\'opérateur de groupement')}} | {{Spec2('ES6')}}         |                                                       |
+| {{SpecName('ES5.1', '#sec-11.1.6', 'L\'opérateur de groupement')}}             | {{Spec2('ES5.1')}}     |                                                       |
+| {{SpecName('ES1', '#sec-11.1.4','L\'opérateur de groupement')}}                 | {{Spec2('ES1')}}         | Définition initiale, implémentée avec JavaScript 1.0. |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.operators.grouping")}}
+
+## Voir aussi
+
+- [Précédence des opérators](/fr/docs/JavaScript/Reference/Operateurs/Précédence_des_opérateurs)
+- {{jsxref("Operators/delete", "delete")}}
+- {{jsxref("Operators/typeof", "typeof")}}
diff --git a/files/fr/web/javascript/reference/operators/in/index.html b/files/fr/web/javascript/reference/operators/in/index.html
deleted file mode 100644
index da96f277bc..0000000000
--- a/files/fr/web/javascript/reference/operators/in/index.html
+++ /dev/null
@@ -1,139 +0,0 @@
----
-title: L'opérateur in
-slug: Web/JavaScript/Reference/Operators/in
-tags:
-  - JavaScript
-  - Operator
-  - Reference
-translation_of: Web/JavaScript/Reference/Operators/in
-original_slug: Web/JavaScript/Reference/Opérateurs/L_opérateur_in
----
-<div>{{jsSidebar("Operators")}}</div>
-
-<p>L'<strong>opérateur <code>in</code></strong> renvoie <code>true</code> si une propriété donnée appartient à l'objet donné (directement ou via sa chaîne de prototype).</p>
-
-<div>{{EmbedInteractiveExample("pages/js/expressions-inoperator.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><em>propriété</em> in <em>nomObjet</em>
-</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>propriété</code></dt>
- <dd>Une expression évaluée en un nombre ou une chaîne de caractères qui représente le nom d'une propriété ou l'indice d'un tableau.</dd>
- <dt><code>nomObjet</code></dt>
- <dd>Le nom de l'objet qu'on souhaite inspecter.</dd>
-</dl>
-
-<h2 id="Description">Description</h2>
-
-<p>Les exemples suivants illustrent certaines utilisation de l'opérateur <code>in</code>.</p>
-
-<pre class="brush: js">// Tableaux
-var arbres = ["sapin", "hêtre", "cèdre", "chêne", "érable"];
-0 in arbres        // renvoie true
-3 in arbres        // renvoie true
-6 in arbres        // renvoie false
-"hêtre" in arbres  // renvoie false (l'indice doit être spécifié, pas la valeur à cet indice)
-"length" in arbres // renvoie true (length est une propriété des objets Array)
-Symbol.iterator in arbres // renvoie true (les tableaux sont itérables, à partir d'ES6)
-
-// Objets prédéfinis
-"PI" in Math           // renvoie true
-var ma_chaine = new String("corail");
-"length" in ma_chaine  // renvoie true
-
-// Objets personnalisés
-var voiture = {marque : "Honda", modèle : "Accord", année : 1998};
-"marque" in voiture  // renvoie true
-"modèle" in voiture  // renvoie true
-"marque" in voiture // renvoie true
-"Accord" in voiture // renvoie false
-</pre>
-
-<p>L'opérande droit doit toujours être du type objet (et pas un autre type primitif). Par exemple, on peut utiliser une  chaîne créée avec le constructeur <code>String</code>, mais pas une chaîne littérale.</p>
-
-<pre class="brush: js">var couleur1 = new String("vert");
-"length" in couleur1 // renvoie true
-var couleur2 = "corail";
-"length" in couleur2 // génère une erreur (couleur n'est pas un objet String)
-</pre>
-
-<h3 id="Utilisation_de_l'opérateur_in_avec_des_propriétés_supprimées_ou_indéfinies">Utilisation de l'opérateur <code>in</code> avec des propriétés supprimées ou indéfinies</h3>
-
-<p>Si une propriété est supprimée avec l'opérateur <code><a href="fr/R%c3%a9f%c3%a9rence_de_JavaScript_1.5_Core/Op%c3%a9rateurs/Op%c3%a9rateurs_sp%c3%a9ciaux/L'op%c3%a9rateur_delete">delete</a></code>, l'opérateur <code>in</code> renvoie <code>false</code> pour cette propriété.</p>
-
-<pre class="brush: js">var voiture = {marque : "Honda", modèle : "Accord", année : 1998};
-delete voiture.marque;
-"marque" in voiture  // renvoie false
-
-var arbres = new Array("sapin", "hêtre", "cèdre", "chêne", "érable");
-delete arbres[3];
-3 in arbres // renvoie false
-</pre>
-
-<p>Si une propriété est définie à {{jsxref("Objets_globaux/undefined", "undefined")}} mais n'est pas supprimée, l'opérateur <code>in</code> renverra <code>true</code> pour cette propriété.</p>
-
-<pre class="brush: js">var voiture = {marque : "Honda", modèle : "Accord", année : 1998};
-voiture.marque = undefined;
-"marque" in voiture  // renvoie true
-
-var arbres = new Array("sapin", "hêtre", "cèdre", "chêne", "érable");
-arbres[3] = undefined;
-3 in arbres // renvoie true
-</pre>
-
-<h3 id="Propriétés_héritées">Propriétés héritées</h3>
-
-<p>L'opérateur <code>in</code> renvoie <code>true</code> pour les propriétés qui appartiennent à la chaîne de prototypes. SI on souhaite la présence d'une propriété non-héritée, on utilisera plutôt {{jsxref("Object.prototype.hasOwnProperty()")}}.</p>
-
-<pre class="brush: js">"toString" in {}; // renvoie true</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-relational-operators', 'Relational Operators')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-relational-operators', 'Opérateurs relationnels')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-11.8.7', 'Opérateur in')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES3', '#sec-11.8.7', 'Opérateurs in')}}</td>
-   <td>{{Spec2('ES3')}}</td>
-   <td>Définition initiale. Implémentée avec JavaScript 1.4.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.operators.in")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Instructions/for...in","for...in")}}</li>
- <li>{{jsxref("Opérateurs/L_opérateur_delete","delete")}}</li>
- <li>{{jsxref("Object.prototype.hasOwnProperty()")}}</li>
- <li>{{jsxref("Reflect.has()")}}</li>
- <li><a href="/fr/docs/Web/JavaScript/Caractère_énumérable_des_propriétés_et_rattachement">Caractère énumérable des propriétés et rattachement</a></li>
-</ul>
diff --git a/files/fr/web/javascript/reference/operators/in/index.md b/files/fr/web/javascript/reference/operators/in/index.md
new file mode 100644
index 0000000000..cb4f40c8e2
--- /dev/null
+++ b/files/fr/web/javascript/reference/operators/in/index.md
@@ -0,0 +1,117 @@
+---
+title: L'opérateur in
+slug: Web/JavaScript/Reference/Operators/in
+tags:
+  - JavaScript
+  - Operator
+  - Reference
+translation_of: Web/JavaScript/Reference/Operators/in
+original_slug: Web/JavaScript/Reference/Opérateurs/L_opérateur_in
+---
+{{jsSidebar("Operators")}}
+
+L'**opérateur `in`** renvoie `true` si une propriété donnée appartient à l'objet donné (directement ou via sa chaîne de prototype).
+
+{{EmbedInteractiveExample("pages/js/expressions-inoperator.html")}}
+
+## Syntaxe
+
+    propriété in nomObjet
+
+### Paramètres
+
+- `propriété`
+  - : Une expression évaluée en un nombre ou une chaîne de caractères qui représente le nom d'une propriété ou l'indice d'un tableau.
+- `nomObjet`
+  - : Le nom de l'objet qu'on souhaite inspecter.
+
+## Description
+
+Les exemples suivants illustrent certaines utilisation de l'opérateur `in`.
+
+```js
+// Tableaux
+var arbres = ["sapin", "hêtre", "cèdre", "chêne", "érable"];
+0 in arbres        // renvoie true
+3 in arbres        // renvoie true
+6 in arbres        // renvoie false
+"hêtre" in arbres  // renvoie false (l'indice doit être spécifié, pas la valeur à cet indice)
+"length" in arbres // renvoie true (length est une propriété des objets Array)
+Symbol.iterator in arbres // renvoie true (les tableaux sont itérables, à partir d'ES6)
+
+// Objets prédéfinis
+"PI" in Math           // renvoie true
+var ma_chaine = new String("corail");
+"length" in ma_chaine  // renvoie true
+
+// Objets personnalisés
+var voiture = {marque : "Honda", modèle : "Accord", année : 1998};
+"marque" in voiture  // renvoie true
+"modèle" in voiture  // renvoie true
+"marque" in voiture // renvoie true
+"Accord" in voiture // renvoie false
+```
+
+L'opérande droit doit toujours être du type objet (et pas un autre type primitif). Par exemple, on peut utiliser une  chaîne créée avec le constructeur `String`, mais pas une chaîne littérale.
+
+```js
+var couleur1 = new String("vert");
+"length" in couleur1 // renvoie true
+var couleur2 = "corail";
+"length" in couleur2 // génère une erreur (couleur n'est pas un objet String)
+```
+
+### Utilisation de l'opérateur `in` avec des propriétés supprimées ou indéfinies
+
+Si une propriété est supprimée avec l'opérateur [`delete`](fr/R%c3%a9f%c3%a9rence_de_JavaScript_1.5_Core/Op%c3%a9rateurs/Op%c3%a9rateurs_sp%c3%a9ciaux/L'op%c3%a9rateur_delete), l'opérateur `in` renvoie `false` pour cette propriété.
+
+```js
+var voiture = {marque : "Honda", modèle : "Accord", année : 1998};
+delete voiture.marque;
+"marque" in voiture  // renvoie false
+
+var arbres = new Array("sapin", "hêtre", "cèdre", "chêne", "érable");
+delete arbres[3];
+3 in arbres // renvoie false
+```
+
+Si une propriété est définie à {{jsxref("Objets_globaux/undefined", "undefined")}} mais n'est pas supprimée, l'opérateur `in` renverra `true` pour cette propriété.
+
+```js
+var voiture = {marque : "Honda", modèle : "Accord", année : 1998};
+voiture.marque = undefined;
+"marque" in voiture  // renvoie true
+
+var arbres = new Array("sapin", "hêtre", "cèdre", "chêne", "érable");
+arbres[3] = undefined;
+3 in arbres // renvoie true
+```
+
+### Propriétés héritées
+
+L'opérateur `in` renvoie `true` pour les propriétés qui appartiennent à la chaîne de prototypes. SI on souhaite la présence d'une propriété non-héritée, on utilisera plutôt {{jsxref("Object.prototype.hasOwnProperty()")}}.
+
+```js
+"toString" in {}; // renvoie true
+```
+
+## Spécifications
+
+| Spécification                                                                                            | État                         | Commentaires                                          |
+| -------------------------------------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- |
+| {{SpecName('ESDraft', '#sec-relational-operators', 'Relational Operators')}}     | {{Spec2('ESDraft')}} |                                                       |
+| {{SpecName('ES2015', '#sec-relational-operators', 'Opérateurs relationnels')}} | {{Spec2('ES2015')}}     |                                                       |
+| {{SpecName('ES5.1', '#sec-11.8.7', 'Opérateur in')}}                                 | {{Spec2('ES5.1')}}     |                                                       |
+| {{SpecName('ES3', '#sec-11.8.7', 'Opérateurs in')}}                                     | {{Spec2('ES3')}}         | Définition initiale. Implémentée avec JavaScript 1.4. |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.operators.in")}}
+
+## Voir aussi
+
+- {{jsxref("Instructions/for...in","for...in")}}
+- {{jsxref("Opérateurs/L_opérateur_delete","delete")}}
+- {{jsxref("Object.prototype.hasOwnProperty()")}}
+- {{jsxref("Reflect.has()")}}
+- [Caractère énumérable des propriétés et rattachement](/fr/docs/Web/JavaScript/Caractère_énumérable_des_propriétés_et_rattachement)
diff --git a/files/fr/web/javascript/reference/operators/increment/index.html b/files/fr/web/javascript/reference/operators/increment/index.html
deleted file mode 100644
index ab9d79b09f..0000000000
--- a/files/fr/web/javascript/reference/operators/increment/index.html
+++ /dev/null
@@ -1,70 +0,0 @@
----
-title: Incrémentation (++)
-slug: Web/JavaScript/Reference/Operators/Increment
-tags:
-  - JavaScript
-  - Language feature
-  - Operator
-  - Reference
-browser-compat: javascript.operators.increment
-translation_of: Web/JavaScript/Reference/Operators/Increment
----
-<div>{{jsSidebar("Operators")}}</div>
-
-<p>L'opérateur d'incrémentation (<code>++</code>) permet d'incrémenter (c'est-à-dire d'ajouter un) à son opérande et de renvoyer une valeur qui est le résultat avant ou après la modification.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/expressions-increment.html")}}</div>
-
-<h2 id="syntax">Syntaxe</h2>
-
-<pre class="brush: js">
-<strong>Opérateur :</strong> <var>x</var>++ ou ++<var>x</var>
-</pre>
-
-<h2 id="description">Description</h2>
-
-<p>Utilisé comme suffixe (l'opérateur étant placé après l'opérande), comme dans <code><var>x</var>++</code>, l'opérateur incrémentera la valeur et renverra la valeur avant l'incrément.</p>
-
-<p>Utilisé comme préfixe (l'opérateur étant placé avant l'opérande), comme dans <code>++<var>x</var></code>, l'opérateur incrémentera la valeur et renverra la valeur après l'incrément.</p>
-
-<h2 id="examples">Exemples</h2>
-
-<h3 id="postfix_increment">Incrément en suffixe</h3>
-
-<pre class="brush: js">let x = 3;
-let y = x++;
-
-// y = 3
-// x = 4
-</pre>
-
-<h3 id="prefix_increment">Incrément en préfixe</h3>
-
-<pre class="brush: js">let a = 2;
-let b = ++a;
-
-// a = 3
-// b = 3
-</pre>
-
-<h2 id="specifications">Spécifications</h2>
-
-<p>{{Specifications}}</p>
-
-<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
-
-<p>{{Compat}}</p>
-
-<h2 id="See_also">Voir aussi</h2>
-
-<ul>
-  <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Addition">Opérateur d'addition</a></li>
-  <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Subtraction">Opérateur de soustraction</a></li>
-  <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Division">Opérateur de division</a></li>
-  <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Multiplication">Opérateur de multiplication</a></li>
-  <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Remainder">Opérateur de reste</a></li>
-  <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Exponentiation">Opérateur d'exponentiation</a></li>
-  <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Decrement">Opérateur de décrémentation</a></li>
-  <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Unary_negation">Opérateur de négation unaire</a></li>
-  <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Unary_plus">Opérateur de plus unaire</a></li>
-</ul>
diff --git a/files/fr/web/javascript/reference/operators/increment/index.md b/files/fr/web/javascript/reference/operators/increment/index.md
new file mode 100644
index 0000000000..cedb7c38b6
--- /dev/null
+++ b/files/fr/web/javascript/reference/operators/increment/index.md
@@ -0,0 +1,70 @@
+---
+title: Incrémentation (++)
+slug: Web/JavaScript/Reference/Operators/Increment
+tags:
+  - JavaScript
+  - Language feature
+  - Operator
+  - Reference
+translation_of: Web/JavaScript/Reference/Operators/Increment
+browser-compat: javascript.operators.increment
+---
+{{jsSidebar("Operators")}}
+
+L'opérateur d'incrémentation (`++`) permet d'incrémenter (c'est-à-dire d'ajouter un) à son opérande et de renvoyer une valeur qui est le résultat avant ou après la modification.
+
+{{EmbedInteractiveExample("pages/js/expressions-increment.html")}}
+
+## Syntaxe
+
+```js
+Opérateur : x++ ou ++x
+```
+
+## Description
+
+Utilisé comme suffixe (l'opérateur étant placé après l'opérande), comme dans `x++`, l'opérateur incrémentera la valeur et renverra la valeur avant l'incrément.
+
+Utilisé comme préfixe (l'opérateur étant placé avant l'opérande), comme dans `++x`, l'opérateur incrémentera la valeur et renverra la valeur après l'incrément.
+
+## Exemples
+
+### Incrément en suffixe
+
+```js
+let x = 3;
+let y = x++;
+
+// y = 3
+// x = 4
+```
+
+### Incrément en préfixe
+
+```js
+let a = 2;
+let b = ++a;
+
+// a = 3
+// b = 3
+```
+
+## Spécifications
+
+{{Specifications}}
+
+## Compatibilité des navigateurs
+
+{{Compat}}
+
+## Voir aussi
+
+- [Opérateur d'addition](/fr/docs/Web/JavaScript/Reference/Operators/Addition)
+- [Opérateur de soustraction](/fr/docs/Web/JavaScript/Reference/Operators/Subtraction)
+- [Opérateur de division](/fr/docs/Web/JavaScript/Reference/Operators/Division)
+- [Opérateur de multiplication](/fr/docs/Web/JavaScript/Reference/Operators/Multiplication)
+- [Opérateur de reste](/fr/docs/Web/JavaScript/Reference/Operators/Remainder)
+- [Opérateur d'exponentiation](/fr/docs/Web/JavaScript/Reference/Operators/Exponentiation)
+- [Opérateur de décrémentation](/fr/docs/Web/JavaScript/Reference/Operators/Decrement)
+- [Opérateur de négation unaire](/fr/docs/Web/JavaScript/Reference/Operators/Unary_negation)
+- [Opérateur de plus unaire](/fr/docs/Web/JavaScript/Reference/Operators/Unary_plus)
diff --git a/files/fr/web/javascript/reference/operators/index.html b/files/fr/web/javascript/reference/operators/index.html
deleted file mode 100644
index 48e7718b29..0000000000
--- a/files/fr/web/javascript/reference/operators/index.html
+++ /dev/null
@@ -1,286 +0,0 @@
----
-title: Expressions et opérateurs
-slug: Web/JavaScript/Reference/Operators
-tags:
-  - JavaScript
-  - Landing page
-  - Operators
-  - Overview
-  - Reference
-translation_of: Web/JavaScript/Reference/Operators
-original_slug: Web/JavaScript/Reference/Opérateurs
-browser-compat: javascript.operators
----
-<div>{{jsSidebar("Operators")}}</div>
-
-<p>Ce chapitre documente l'ensemble des opérateurs, expressions et mots-clés pour le langage JavaScript.</p>
-
-<h2 id="expressions_and_operators_by_category">Expressions et opérateurs par catégorie</h2>
-
-<p>Pour une liste triée par ordre alphabétique, voir sur la barre de navigation à gauche.</p>
-
-<h3 id="primary_expressions">Expressions primaires</h3>
-
-<p>Mots-clés de base et expressions générales en JavaScript.</p>
-
-<dl>
- <dt><a href="/fr/docs/Web/JavaScript/Reference/Operators/this"><code>this</code></a></dt>
- <dd>Le mot-clé <code>this</code> fait référence à une propriété spéciale indiquant le contexte d'exécution.</dd>
- <dt><a href="/fr/docs/Web/JavaScript/Reference/Operators/function"><code>function</code></a></dt>
- <dd>Le mot-clé <code>function</code> définit une expression de fonction.</dd>
- <dt><a href="/fr/docs/Web/JavaScript/Reference/Operators/class"><code>class</code></a></dt>
- <dd>Le mot-clé <code>class</code> définit une expression de classe.</dd>
- <dt><a href="/fr/docs/Web/JavaScript/Reference/Operators/function*"><code>function*</code></a></dt>
- <dd>Le mot-clé <code>function*</code> définit une expression de générateur.</dd>
- <dt><a href="/fr/docs/Web/JavaScript/Reference/Operators/yield"><code>yield</code></a></dt>
- <dd>Ce mot-clé permet de suspendre ou de reprendre l'exécution d'une fonction génératrice.</dd>
- <dt><a href="/fr/docs/Web/JavaScript/Reference/Operators/yield*"><code>yield*</code></a></dt>
- <dd>Ce mot-clé délègue à une autre fonction génératrice ou à un objet itérable.</dd>
- <dt><a href="/fr/docs/Web/JavaScript/Reference/Operators/async_function"><code>async function</code></a></dt>
- <dd>Le couple de mots-clés <code>async function</code> définit une expression de fonction asynchrone.</dd>
- <dt><a href="/fr/docs/Web/JavaScript/Reference/Operators/await"><code>await</code></a></dt>
- <dd>Ce mot-clé permet de suspendre et de reprendre l'exécution d'une fonction asynchrone et d'attendre la résolution ou l'échec de la promesse.</dd>
- <dt><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Array"><code>[]</code></a></dt>
- <dd>Syntaxe d'initialisation littérale pour les tableaux.</dd>
- <dt><a href="/fr/docs/Web/JavaScript/Reference/Operators/Object_initializer"><code>{}</code></a></dt>
- <dd>Syntaxe d'initialisation littérale pour les objets.</dd>
- <dt><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/RegExp"><code>/ab+c/i</code></a></dt>
- <dd>Syntaxe pour les expressions littérales d'expressions rationnelles.</dd>
- <dt><a href="/fr/docs/Web/JavaScript/Reference/Operators/Grouping"><code>( )</code></a></dt>
- <dd>Opérateur de groupement.</dd>
-</dl>
-
-<h3 id="left-hand-side_expressions">Expression « vers la gauche »</h3>
-
-<p>Les valeurs situées à gauche sont la cible de l'affectation.</p>
-
-<dl>
- <dt><a href="/fr/docs/Web/JavaScript/Reference/Operators/Property_Accessors">Accesseurs de propriété</a></dt>
- <dd>Les opérateurs d'accès aux membres permettent d'accéder à une propriété ou à une méthode d'un objet.<br>
- (cela regroupe <code>objet.propriete</code> et <code>objet["propriete"]</code>).</dd>
- <dt><a href="/fr/docs/Web/JavaScript/Reference/Operators/new"><code>new</code></a></dt>
- <dd>L'opérateur <code>new</code> crée une instance grâce à un constructeur.</dd>
- <dt><a href="/fr/docs/Web/JavaScript/Reference/Operators/new.target"><code>new.target</code></a></dt>
- <dd>Pour les constructeurs, <code>new.target</code> fait référence au constructeur invoqué avec <a href="/fr/docs/Web/JavaScript/Reference/Operators/new"><code>new</code></a>.</dd>
- <dt><a href="/fr/docs/Web/JavaScript/Reference/Statements/import.meta"><code>import.meta</code></a></dt>
- <dd>Un objet qui expose des métadonnées spécifiques au contexte pour un module JavaScript.</dd>
- <dt><a href="/fr/docs/Web/JavaScript/Reference/Operators/super"><code>super</code></a></dt>
- <dd>Le mot-clé <code>super</code> appelle le constructeur parent.</dd>
- <dt><a href="/fr/docs/Web/JavaScript/Reference/Operators/Spread_syntax"><code>...obj</code></a></dt>
- <dd>La syntaxe de décomposition permet de développer une expression là où plusieurs arguments (dans le cas des appels à une fonction) ou là où plusieurs éléments (dans le cas des tableaux) sont attendus.</dd>
-</dl>
-
-<h3 id="increment_and_decrement">Incrémentation et décrémentation</h3>
-
-<p>Des opérateurs préfixes ou suffixes pour incrémenter/décrémenter.</p>
-
-<dl>
- <dt><a href="/fr/docs/Web/JavaScript/Reference/Operators/Increment"><code>A++</code></a></dt>
- <dd>L'opérateur d'incrémentation suffixe.</dd>
- <dt><a href="/fr/docs/Web/JavaScript/Reference/Operators/Decrement"><code>A--</code></a></dt>
- <dd>L'opérateur de décrémentation suffixe.</dd>
- <dt><a href="/fr/docs/Web/JavaScript/Reference/Operators/Increment"><code>++A</code></a></dt>
- <dd>L'opérateur d'incrémentation préfixe.</dd>
- <dt><a href="/fr/docs/Web/JavaScript/Reference/Operators/Decrement"><code>--A</code></a></dt>
- <dd>L'opérateur de décrémentation préfixe.</dd>
-</dl>
-
-<h3 id="unary_operators">Opérateurs unaires</h3>
-
-<p>Une opération unaire est une opération qui ne manipule qu'un seul opérande.</p>
-
-<dl>
- <dt><a href="/fr/docs/Web/JavaScript/Reference/Operators/delete"><code>delete</code></a></dt>
- <dd>L'opérateur <code>delete</code> permet de supprimer une propriété d'un objet.</dd>
- <dt><a href="/fr/docs/Web/JavaScript/Reference/Operators/void"><code>void</code></a></dt>
- <dd>L'opérateur <code>void</code> permet d'ignorer la valeur de retour d'une expression.</dd>
- <dt><a href="/fr/docs/Web/JavaScript/Reference/Operators/typeof"><code>typeof</code></a></dt>
- <dd>L'opérateur <code>typeof</code> détermine le type d'un objet donné.</dd>
- <dt><a href="/fr/docs/Web/JavaScript/Reference/Operators/Unary_plus"><code>+</code></a></dt>
- <dd>L'opérateur unaire <code>+</code> convertit son opérande en une valeur de type <code>number</code>.</dd>
- <dt><a href="/fr/docs/Web/JavaScript/Reference/Operators/Unary_negation"><code>-</code></a></dt>
- <dd>L'opérateur unaire <code>-</code> convertit son opérande en nombre puis prend son opposé.</dd>
- <dt><a href="/fr/docs/Web/JavaScript/Reference/Operators/Bitwise_NOT"><code>~</code></a></dt>
- <dd>L'opérateur binaire NON.</dd>
- <dt><a href="/fr/docs/Web/JavaScript/Reference/Operators/Logical_NOT"><code>!</code></a></dt>
- <dd>L'opérateur logique NON.</dd>
-</dl>
-
-<h3 id="arithmetic_operators">Opérateurs arithmétiques</h3>
-
-<p>Les opérateurs arithmétiques utilisent des valeurs numériques (littérales ou variables) pour leurs opérandes et renvoient une seule valeur numérique en résultat.</p>
-
-<dl>
- <dt><a href="/fr/docs/Web/JavaScript/Reference/Operators/Addition"><code>+</code></a></dt>
- <dd>L'opérateur d'addition.</dd>
- <dt><a href="/fr/docs/Web/JavaScript/Reference/Operators/Subtraction"><code>-</code></a></dt>
- <dd>L'opérateur de soustraction.</dd>
- <dt><a href="/fr/docs/Web/JavaScript/Reference/Operators/Division"><code>/</code></a></dt>
- <dd>L'opérateur de division.</dd>
- <dt><a href="/fr/docs/Web/JavaScript/Reference/Operators/Multiplication"><code>*</code></a></dt>
- <dd>L'opérateur de multiplication.</dd>
- <dt><a href="/fr/docs/Web/JavaScript/Reference/Operators/Remainder"><code>%</code></a></dt>
- <dd>L'opérateur du reste.</dd>
- <dt><a href="/fr/docs/Web/JavaScript/Reference/Operators/Exponentiation"><code>**</code></a></dt>
- <dd>L'opérateur d'exponentiation.</dd>
-</dl>
-
-<h3 id="relational_operators">Opérateurs relationnels</h3>
-
-<p>Un opérateur de comparaison compare ses opérandes et renvoie une valeur booléenne en fonction de la vérité de cette comparaison.</p>
-
-<dl>
- <dt><a href="/fr/docs/Web/JavaScript/Reference/Operators/in"><code>in</code></a></dt>
- <dd>L'opérateur <code>in</code> détermine la présence d'une propriété donnée au sein d'un objet.</dd>
- <dt><a href="/fr/docs/Web/JavaScript/Reference/Operators/instanceof"><code>instanceof</code></a></dt>
- <dd>L'opérateur <code>instanceof</code> détermine si un objet est une instance d'un autre objet.</dd>
- <dt><a href="/fr/docs/Web/JavaScript/Reference/Operators/Less_than"><code>&lt;</code></a></dt>
- <dd>L'opérateur d'infériorité strict.</dd>
- <dt><a href="/fr/docs/Web/JavaScript/Reference/Operators/Greater_than"><code>&gt;</code></a></dt>
- <dd>L'opérateur de supériorité stricte.</dd>
- <dt><a href="/fr/docs/Web/JavaScript/Reference/Operators/Less_than_or_equal"><code>&lt;=</code></a></dt>
- <dd>L'opérateur d'infériorité.</dd>
- <dt><a href="/fr/docs/Web/JavaScript/Reference/Operators/Greater_than_or_equal"><code>&gt;=</code></a></dt>
- <dd>L'opérateur de supériorité.</dd>
-</dl>
-
-<div class="notecard note">
-<p><strong>Note :</strong> <code>=&gt;</code> n'est pas un opérateur mais la notation utilisée pour <a href="/fr/docs/Web/JavaScript/Reference/Functions/Arrow_functions">les fonctions fléchées</a>.</p>
-</div>
-
-<h3 id="equality_operators">Opérateurs d'égalité</h3>
-
-<p>Le résultat de l'évaluation fournie par un opérateur d'égalité est toujours un booléen, fonction de la vérité de la comparaison effectuée.</p>
-
-<dl>
- <dt><a href="/fr/docs/Web/JavaScript/Reference/Operators/Equality"><code>==</code></a></dt>
- <dd>L'opérateur d'égalité.</dd>
- <dt><a href="/fr/docs/Web/JavaScript/Reference/Operators/Inequality"><code>!=</code></a></dt>
- <dd>L'opérateur d'inégalité.</dd>
- <dt><a href="/fr/docs/Web/JavaScript/Reference/Operators/Strict_equality"><code>===</code></a></dt>
- <dd>L'opérateur d'identité.</dd>
- <dt><a href="/fr/docs/Web/JavaScript/Reference/Operators/Strict_inequality"><code>!==</code></a></dt>
- <dd>L'opérateur d'inégalité stricte.</dd>
-</dl>
-
-<h3 id="bitwise_shift_operators">Opérateurs de décalage binaires</h3>
-
-<p>Ces opérations permettent de décaler les bits de la représentation binaire de l'opérande.</p>
-
-<dl>
- <dt><a href="/fr/docs/Web/JavaScript/Reference/Operators/Left_shift"><code>&lt;&lt;</code></a></dt>
- <dd>Opérateur de décalage binaire à gauche.</dd>
- <dt><a href="/fr/docs/Web/JavaScript/Reference/Operators/Right_shift"><code>&gt;&gt;</code></a></dt>
- <dd>Opérateur de décalage binaire à droite.</dd>
- <dt><a href="/fr/docs/Web/JavaScript/Reference/Operators/Unsigned_right_shift"><code>&gt;&gt;&gt;</code></a></dt>
- <dd>Opérateur de décalage binaire à droite non signé.</dd>
-</dl>
-
-<h3 id="Binary_bitwise_operators">Opérateurs binaires booléens</h3>
-
-<p>Ces opérateurs manipulent leurs opérandes comme des ensembles de 32 bits et renvoient des valeurs numériques standard.</p>
-
-<dl>
- <dt><a href="/fr/docs/Web/JavaScript/Reference/Operators/Bitwise_AND"><code>&amp;</code></a></dt>
- <dd>Opérateur ET/AND binaire.</dd>
- <dt><a href="/fr/docs/Web/JavaScript/Reference/Operators/Bitwise_OR"><code>|</code></a></dt>
- <dd>Opérateur OU/OR binaire.</dd>
- <dt><a href="/fr/docs/Web/JavaScript/Reference/Operators/Bitwise_XOR"><code>^</code></a></dt>
- <dd>Opérateur OU exclusif/XOR binaire.</dd>
-</dl>
-
-<h3 id="binary_logical_operators">Opérateurs logiques</h3>
-
-<p>Les opérateurs logiques sont généralement utilisés avec des valeurs booléennes, quand c'est le cas, la valeur de retour de l'expression est une valeur booléenne.</p>
-
-<dl>
- <dt><a href="/fr/docs/Web/JavaScript/Reference/Operators/Logical_AND"><code>&amp;&amp;</code></a></dt>
- <dd>Opérateur logique ET/AND.</dd>
- <dt><a href="/fr/docs/Web/JavaScript/Reference/Operators/Logical_OR"><code>||</code></a></dt>
- <dd>Opérateur logique OU/OR.</dd>
- <dt><a href="/fr/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator"><code>??</code></a></dt>
- <dd>Opérateur de coalescence des nuls.</dd>
-</dl>
-
-<h3 id="conditional_ternary_operator">Opérateur conditionnel ternaire</h3>
-
-<dl>
- <dt><a href="/fr/docs/Web/JavaScript/Reference/Operators/Conditional_Operator"><code>(condition ? ifTrue : ifFalse)</code></a></dt>
- <dd>
- <p>L'opérateur conditionnel renvoie une valeur parmi deux selon la valeur logique de la condition portée par le premier opérande.</p>
- </dd>
-</dl>
-
-<h3 id="optional_chaining_operator">Opérateur de chaînage optionnel</h3>
-
-<dl>
- <dt><a href="/fr/docs/Web/JavaScript/Reference/Operators/Optional_chaining"><code>?.</code></a></dt>
- <dd>
- <p>L'opérateur de chaînage optionnel renvoie <code>undefined</code> plutôt que de causer une erreur si une référence vaut <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/null"><code>null</code></a> ou <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/undefined"><code>undefined</code></a>.</p>
- </dd>
-</dl>
-
-<h3 id="assignment_operators">Opérateurs d'affectation</h3>
-
-<p>Un opérateur d'affectation permet d'affecter une valeur à son opérande gauche en fonction de la valeur de son opérande droit.</p>
-
-<dl>
- <dt><a href="/fr/docs/Web/JavaScript/Reference/Operators/Assignment"><code>=</code></a></dt>
- <dd>Opérateur d'affectation.</dd>
- <dt><a href="/fr/docs/Web/JavaScript/Reference/Operators/Multiplication_assignment"><code>*=</code></a></dt>
- <dd>Opérateur de multiplication et d'affectation.</dd>
- <dt><a href="/fr/docs/Web/JavaScript/Reference/Operators/Exponentiation_assignment"><code>**=</code></a></dt>
- <dd>Opérateur d'exponentiation et d'affectation.</dd>
- <dt><a href="/fr/docs/Web/JavaScript/Reference/Operators/Division_assignment"><code>/=</code></a></dt>
- <dd>Opérateur de division et d'affectation.</dd>
- <dt><a href="/fr/docs/Web/JavaScript/Reference/Operators/Remainder_assignment"><code>%=</code></a></dt>
- <dd>Opérateur de reste et d'affectation.</dd>
- <dt><a href="/fr/docs/Web/JavaScript/Reference/Operators/Addition_assignment"><code>+=</code></a></dt>
- <dd>Opérateur d'addition et d'affectation.</dd>
- <dt><a href="/fr/docs/Web/JavaScript/Reference/Operators/Subtraction_assignment"><code>-=</code></a></dt>
- <dd>Opérateur de soustraction et d'affectation</dd>
- <dt><a href="/fr/docs/Web/JavaScript/Reference/Operators/Left_shift_assignment"><code>&lt;&lt;=</code></a></dt>
- <dd>Opérateur de décalage à gauche et d'affectation.</dd>
- <dt><a href="/fr/docs/Web/JavaScript/Reference/Operators/Right_shift_assignment"><code>&gt;&gt;=</code></a></dt>
- <dd>Opérateur de décalage à droite et d'affectation.</dd>
- <dt><a href="/fr/docs/Web/JavaScript/Reference/Operators/Unsigned_right_shift_assignment"><code>&gt;&gt;&gt;=</code></a></dt>
- <dd>Opérateur de décalage à droite non signé et d'affectation.</dd>
- <dt><a href="/fr/docs/Web/JavaScript/Reference/Operators/Bitwise_AND_assignment"><code>&amp;=</code></a></dt>
- <dd>Opérateur binaire ET et d'affectation.</dd>
- <dt><a href="/fr/docs/Web/JavaScript/Reference/Operators/Bitwise_XOR_assignment"><code>^=</code></a></dt>
- <dd>Opérateur binaire OU exclusif et d'affectation.</dd>
- <dt><a href="/fr/docs/Web/JavaScript/Reference/Operators/Bitwise_OR_assignment"><code>|=</code></a></dt>
- <dd>Opérateur binaire OU et d'affectation.</dd>
- <dt><a href="/fr/docs/Web/JavaScript/Reference/Operators/Logical_AND_assignment"><code>&amp;&amp;=</code></a></dt>
- <dd>Opérateur booléen ET et d'affectation.</dd>
- <dt><a href="/fr/docs/Web/JavaScript/Reference/Operators/Logical_OR_assignment"><code>||=</code></a></dt>
- <dd>Opérateur booléen OU et d'affectation.</dd>
- <dt><a href="/fr/docs/Web/JavaScript/Reference/Operators/Logical_nullish_assignment"><code>??=</code></a></dt>
- <dd>Opérateur d'affectation et de logique nulle.</dd>
- <dt><a href="/fr/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment"><code>[a, b] = [1, 2]</code></a><br>
- <a href="/fr/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment"><code>{a, b} = {a:1, b:2}</code></a></dt>
- <dd>
- <p>L'affectation par décomposition permet d'affecter les propriétés d'un tableau ou d'un objet à des variables en utilisant une syntaxe similaire à celle des littéraux pour les tableaux et les objets.</p>
- </dd>
-</dl>
-
-<h3 id="comma_operator">Opérateur virgule</h3>
-
-<dl>
- <dt><a href="/fr/docs/Web/JavaScript/Reference/Operators/Comma_Operator"><code>,</code></a></dt>
- <dd>L'opérateur virgule permet d'évaluer plusieurs expressions dans une seule instruction et renvoie le résultat de la dernière expression.</dd>
-</dl>
-
-<h2 id="specifications">Spécifications</h2>
-
-<p>{{Specifications}}</p>
-
-<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
-
-<p>{{Compat}}</p>
-
-<h2 id="see_also">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Operator_Precedence">Précédence des opérateurs en JavaScript</a></li>
-</ul>
diff --git a/files/fr/web/javascript/reference/operators/index.md b/files/fr/web/javascript/reference/operators/index.md
new file mode 100644
index 0000000000..f042113b24
--- /dev/null
+++ b/files/fr/web/javascript/reference/operators/index.md
@@ -0,0 +1,248 @@
+---
+title: Expressions et opérateurs
+slug: Web/JavaScript/Reference/Operators
+tags:
+  - JavaScript
+  - Landing page
+  - Operators
+  - Overview
+  - Reference
+translation_of: Web/JavaScript/Reference/Operators
+original_slug: Web/JavaScript/Reference/Opérateurs
+browser-compat: javascript.operators
+---
+{{jsSidebar("Operators")}}
+
+Ce chapitre documente l'ensemble des opérateurs, expressions et mots-clés pour le langage JavaScript.
+
+## Expressions et opérateurs par catégorie
+
+Pour une liste triée par ordre alphabétique, voir sur la barre de navigation à gauche.
+
+### Expressions primaires
+
+Mots-clés de base et expressions générales en JavaScript.
+
+- [`this`](/fr/docs/Web/JavaScript/Reference/Operators/this)
+  - : Le mot-clé `this` fait référence à une propriété spéciale indiquant le contexte d'exécution.
+- [`function`](/fr/docs/Web/JavaScript/Reference/Operators/function)
+  - : Le mot-clé `function` définit une expression de fonction.
+- [`class`](/fr/docs/Web/JavaScript/Reference/Operators/class)
+  - : Le mot-clé `class` définit une expression de classe.
+- [`function*`](/fr/docs/Web/JavaScript/Reference/Operators/function*)
+  - : Le mot-clé `function*` définit une expression de générateur.
+- [`yield`](/fr/docs/Web/JavaScript/Reference/Operators/yield)
+  - : Ce mot-clé permet de suspendre ou de reprendre l'exécution d'une fonction génératrice.
+- [`yield*`](/fr/docs/Web/JavaScript/Reference/Operators/yield*)
+  - : Ce mot-clé délègue à une autre fonction génératrice ou à un objet itérable.
+- [`async function`](/fr/docs/Web/JavaScript/Reference/Operators/async_function)
+  - : Le couple de mots-clés `async function` définit une expression de fonction asynchrone.
+- [`await`](/fr/docs/Web/JavaScript/Reference/Operators/await)
+  - : Ce mot-clé permet de suspendre et de reprendre l'exécution d'une fonction asynchrone et d'attendre la résolution ou l'échec de la promesse.
+- [`[]`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array)
+  - : Syntaxe d'initialisation littérale pour les tableaux.
+- [`{}`](/fr/docs/Web/JavaScript/Reference/Operators/Object_initializer)
+  - : Syntaxe d'initialisation littérale pour les objets.
+- [`/ab+c/i`](/fr/docs/Web/JavaScript/Reference/Global_Objects/RegExp)
+  - : Syntaxe pour les expressions littérales d'expressions rationnelles.
+- [`( )`](/fr/docs/Web/JavaScript/Reference/Operators/Grouping)
+  - : Opérateur de groupement.
+
+### Expression « vers la gauche »
+
+Les valeurs situées à gauche sont la cible de l'affectation.
+
+- [Accesseurs de propriété](/fr/docs/Web/JavaScript/Reference/Operators/Property_Accessors)
+  - : Les opérateurs d'accès aux membres permettent d'accéder à une propriété ou à une méthode d'un objet.
+    (cela regroupe `objet.propriete` et `objet["propriete"]`).
+- [`new`](/fr/docs/Web/JavaScript/Reference/Operators/new)
+  - : L'opérateur `new` crée une instance grâce à un constructeur.
+- [`new.target`](/fr/docs/Web/JavaScript/Reference/Operators/new.target)
+  - : Pour les constructeurs, `new.target` fait référence au constructeur invoqué avec [`new`](/fr/docs/Web/JavaScript/Reference/Operators/new).
+- [`import.meta`](/fr/docs/Web/JavaScript/Reference/Statements/import.meta)
+  - : Un objet qui expose des métadonnées spécifiques au contexte pour un module JavaScript.
+- [`super`](/fr/docs/Web/JavaScript/Reference/Operators/super)
+  - : Le mot-clé `super` appelle le constructeur parent.
+- [`...obj`](/fr/docs/Web/JavaScript/Reference/Operators/Spread_syntax)
+  - : La syntaxe de décomposition permet de développer une expression là où plusieurs arguments (dans le cas des appels à une fonction) ou là où plusieurs éléments (dans le cas des tableaux) sont attendus.
+
+### Incrémentation et décrémentation
+
+Des opérateurs préfixes ou suffixes pour incrémenter/décrémenter.
+
+- [`A++`](/fr/docs/Web/JavaScript/Reference/Operators/Increment)
+  - : L'opérateur d'incrémentation suffixe.
+- [`A--`](/fr/docs/Web/JavaScript/Reference/Operators/Decrement)
+  - : L'opérateur de décrémentation suffixe.
+- [`++A`](/fr/docs/Web/JavaScript/Reference/Operators/Increment)
+  - : L'opérateur d'incrémentation préfixe.
+- [`--A`](/fr/docs/Web/JavaScript/Reference/Operators/Decrement)
+  - : L'opérateur de décrémentation préfixe.
+
+### Opérateurs unaires
+
+Une opération unaire est une opération qui ne manipule qu'un seul opérande.
+
+- [`delete`](/fr/docs/Web/JavaScript/Reference/Operators/delete)
+  - : L'opérateur `delete` permet de supprimer une propriété d'un objet.
+- [`void`](/fr/docs/Web/JavaScript/Reference/Operators/void)
+  - : L'opérateur `void` permet d'ignorer la valeur de retour d'une expression.
+- [`typeof`](/fr/docs/Web/JavaScript/Reference/Operators/typeof)
+  - : L'opérateur `typeof` détermine le type d'un objet donné.
+- [`+`](/fr/docs/Web/JavaScript/Reference/Operators/Unary_plus)
+  - : L'opérateur unaire `+` convertit son opérande en une valeur de type `number`.
+- [`-`](/fr/docs/Web/JavaScript/Reference/Operators/Unary_negation)
+  - : L'opérateur unaire `-` convertit son opérande en nombre puis prend son opposé.
+- [`~`](/fr/docs/Web/JavaScript/Reference/Operators/Bitwise_NOT)
+  - : L'opérateur binaire NON.
+- [`!`](/fr/docs/Web/JavaScript/Reference/Operators/Logical_NOT)
+  - : L'opérateur logique NON.
+
+### Opérateurs arithmétiques
+
+Les opérateurs arithmétiques utilisent des valeurs numériques (littérales ou variables) pour leurs opérandes et renvoient une seule valeur numérique en résultat.
+
+- [`+`](/fr/docs/Web/JavaScript/Reference/Operators/Addition)
+  - : L'opérateur d'addition.
+- [`-`](/fr/docs/Web/JavaScript/Reference/Operators/Subtraction)
+  - : L'opérateur de soustraction.
+- [`/`](/fr/docs/Web/JavaScript/Reference/Operators/Division)
+  - : L'opérateur de division.
+- [`*`](/fr/docs/Web/JavaScript/Reference/Operators/Multiplication)
+  - : L'opérateur de multiplication.
+- [`%`](/fr/docs/Web/JavaScript/Reference/Operators/Remainder)
+  - : L'opérateur du reste.
+- [`**`](/fr/docs/Web/JavaScript/Reference/Operators/Exponentiation)
+  - : L'opérateur d'exponentiation.
+
+### Opérateurs relationnels
+
+Un opérateur de comparaison compare ses opérandes et renvoie une valeur booléenne en fonction de la vérité de cette comparaison.
+
+- [`in`](/fr/docs/Web/JavaScript/Reference/Operators/in)
+  - : L'opérateur `in` détermine la présence d'une propriété donnée au sein d'un objet.
+- [`instanceof`](/fr/docs/Web/JavaScript/Reference/Operators/instanceof)
+  - : L'opérateur `instanceof` détermine si un objet est une instance d'un autre objet.
+- [`<`](/fr/docs/Web/JavaScript/Reference/Operators/Less_than)
+  - : L'opérateur d'infériorité strict.
+- [`>`](/fr/docs/Web/JavaScript/Reference/Operators/Greater_than)
+  - : L'opérateur de supériorité stricte.
+- [`<=`](/fr/docs/Web/JavaScript/Reference/Operators/Less_than_or_equal)
+  - : L'opérateur d'infériorité.
+- [`>=`](/fr/docs/Web/JavaScript/Reference/Operators/Greater_than_or_equal)
+  - : L'opérateur de supériorité.
+
+> **Note :** `=>` n'est pas un opérateur mais la notation utilisée pour [les fonctions fléchées](/fr/docs/Web/JavaScript/Reference/Functions/Arrow_functions).
+
+### Opérateurs d'égalité
+
+Le résultat de l'évaluation fournie par un opérateur d'égalité est toujours un booléen, fonction de la vérité de la comparaison effectuée.
+
+- [`==`](/fr/docs/Web/JavaScript/Reference/Operators/Equality)
+  - : L'opérateur d'égalité.
+- [`!=`](/fr/docs/Web/JavaScript/Reference/Operators/Inequality)
+  - : L'opérateur d'inégalité.
+- [`===`](/fr/docs/Web/JavaScript/Reference/Operators/Strict_equality)
+  - : L'opérateur d'identité.
+- [`!==`](/fr/docs/Web/JavaScript/Reference/Operators/Strict_inequality)
+  - : L'opérateur d'inégalité stricte.
+
+### Opérateurs de décalage binaires
+
+Ces opérations permettent de décaler les bits de la représentation binaire de l'opérande.
+
+- [`<<`](/fr/docs/Web/JavaScript/Reference/Operators/Left_shift)
+  - : Opérateur de décalage binaire à gauche.
+- [`>>`](/fr/docs/Web/JavaScript/Reference/Operators/Right_shift)
+  - : Opérateur de décalage binaire à droite.
+- [`>>>`](/fr/docs/Web/JavaScript/Reference/Operators/Unsigned_right_shift)
+  - : Opérateur de décalage binaire à droite non signé.
+
+### Opérateurs binaires booléens
+
+Ces opérateurs manipulent leurs opérandes comme des ensembles de 32 bits et renvoient des valeurs numériques standard.
+
+- [`&`](/fr/docs/Web/JavaScript/Reference/Operators/Bitwise_AND)
+  - : Opérateur ET/AND binaire.
+- [`|`](/fr/docs/Web/JavaScript/Reference/Operators/Bitwise_OR)
+  - : Opérateur OU/OR binaire.
+- [`^`](/fr/docs/Web/JavaScript/Reference/Operators/Bitwise_XOR)
+  - : Opérateur OU exclusif/XOR binaire.
+
+### Opérateurs logiques
+
+Les opérateurs logiques sont généralement utilisés avec des valeurs booléennes, quand c'est le cas, la valeur de retour de l'expression est une valeur booléenne.
+
+- [`&&`](/fr/docs/Web/JavaScript/Reference/Operators/Logical_AND)
+  - : Opérateur logique ET/AND.
+- [`||`](/fr/docs/Web/JavaScript/Reference/Operators/Logical_OR)
+  - : Opérateur logique OU/OR.
+- [`??`](/fr/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator)
+  - : Opérateur de coalescence des nuls.
+
+### Opérateur conditionnel ternaire
+
+- [`(condition ? ifTrue : ifFalse)`](/fr/docs/Web/JavaScript/Reference/Operators/Conditional_Operator)
+  - : L'opérateur conditionnel renvoie une valeur parmi deux selon la valeur logique de la condition portée par le premier opérande.
+
+### Opérateur de chaînage optionnel
+
+- [`?.`](/fr/docs/Web/JavaScript/Reference/Operators/Optional_chaining)
+  - : L'opérateur de chaînage optionnel renvoie `undefined` plutôt que de causer une erreur si une référence vaut [`null`](/fr/docs/Web/JavaScript/Reference/Global_Objects/null) ou [`undefined`](/fr/docs/Web/JavaScript/Reference/Global_Objects/undefined).
+
+### Opérateurs d'affectation
+
+Un opérateur d'affectation permet d'affecter une valeur à son opérande gauche en fonction de la valeur de son opérande droit.
+
+- [`=`](/fr/docs/Web/JavaScript/Reference/Operators/Assignment)
+  - : Opérateur d'affectation.
+- [`*=`](/fr/docs/Web/JavaScript/Reference/Operators/Multiplication_assignment)
+  - : Opérateur de multiplication et d'affectation.
+- [`**=`](/fr/docs/Web/JavaScript/Reference/Operators/Exponentiation_assignment)
+  - : Opérateur d'exponentiation et d'affectation.
+- [`/=`](/fr/docs/Web/JavaScript/Reference/Operators/Division_assignment)
+  - : Opérateur de division et d'affectation.
+- [`%=`](/fr/docs/Web/JavaScript/Reference/Operators/Remainder_assignment)
+  - : Opérateur de reste et d'affectation.
+- [`+=`](/fr/docs/Web/JavaScript/Reference/Operators/Addition_assignment)
+  - : Opérateur d'addition et d'affectation.
+- [`-=`](/fr/docs/Web/JavaScript/Reference/Operators/Subtraction_assignment)
+  - : Opérateur de soustraction et d'affectation
+- [`<<=`](/fr/docs/Web/JavaScript/Reference/Operators/Left_shift_assignment)
+  - : Opérateur de décalage à gauche et d'affectation.
+- [`>>=`](/fr/docs/Web/JavaScript/Reference/Operators/Right_shift_assignment)
+  - : Opérateur de décalage à droite et d'affectation.
+- [`>>>=`](/fr/docs/Web/JavaScript/Reference/Operators/Unsigned_right_shift_assignment)
+  - : Opérateur de décalage à droite non signé et d'affectation.
+- [`&=`](/fr/docs/Web/JavaScript/Reference/Operators/Bitwise_AND_assignment)
+  - : Opérateur binaire ET et d'affectation.
+- [`^=`](/fr/docs/Web/JavaScript/Reference/Operators/Bitwise_XOR_assignment)
+  - : Opérateur binaire OU exclusif et d'affectation.
+- [`|=`](/fr/docs/Web/JavaScript/Reference/Operators/Bitwise_OR_assignment)
+  - : Opérateur binaire OU et d'affectation.
+- [`&&=`](/fr/docs/Web/JavaScript/Reference/Operators/Logical_AND_assignment)
+  - : Opérateur booléen ET et d'affectation.
+- [`||=`](/fr/docs/Web/JavaScript/Reference/Operators/Logical_OR_assignment)
+  - : Opérateur booléen OU et d'affectation.
+- [`??=`](/fr/docs/Web/JavaScript/Reference/Operators/Logical_nullish_assignment)
+  - : Opérateur d'affectation et de logique nulle.
+- [`[a, b] = [1, 2]`](/fr/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment)
+  [`{a, b} = {a:1, b:2}`](/fr/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment)
+  - : L'affectation par décomposition permet d'affecter les propriétés d'un tableau ou d'un objet à des variables en utilisant une syntaxe similaire à celle des littéraux pour les tableaux et les objets.
+
+### Opérateur virgule
+
+- [`,`](/fr/docs/Web/JavaScript/Reference/Operators/Comma_Operator)
+  - : L'opérateur virgule permet d'évaluer plusieurs expressions dans une seule instruction et renvoie le résultat de la dernière expression.
+
+## Spécifications
+
+{{Specifications}}
+
+## Compatibilité des navigateurs
+
+{{Compat}}
+
+## Voir aussi
+
+- [Précédence des opérateurs en JavaScript](/fr/docs/Web/JavaScript/Reference/Operators/Operator_Precedence)
diff --git a/files/fr/web/javascript/reference/operators/inequality/index.html b/files/fr/web/javascript/reference/operators/inequality/index.html
deleted file mode 100644
index d9465f8ba5..0000000000
--- a/files/fr/web/javascript/reference/operators/inequality/index.html
+++ /dev/null
@@ -1,102 +0,0 @@
----
-title: Inégalité (!=)
-slug: Web/JavaScript/Reference/Operators/Inequality
-tags:
-  - JavaScript
-  - Language feature
-  - Operator
-  - Reference
-browser-compat: javascript.operators.inequality
-translation-of: Web/JavaScript/Reference/Operators/Inequality
----
-<div>{{jsSidebar("Operators")}}</div>
-
-<p>L'opérateur d'inégalité (<code>!=</code>) vérifie si ses deux opérandes ne sont pas égaux et renvoie un booléen correspondant au résultat. À la différence de l'opérateur <a href="/fr/docs/Web/JavaScript/Reference/Operators/Strict_inequality">d'inégalité stricte</a>, l'opérateur d'inégalité tente une conversion de ses opérandes avant la comparaison si ceux-ci sont de types différents.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/expressions-inequality.html")}}</div>
-
-<h2 id="syntax">Syntaxe</h2>
-
-<pre class="brush: js">
-x != y
-</pre>
-
-<h2 id="description">Description</h2>
-
-<p>L'opérateur d'inégalité vérifie si ses deux opérandes ne sont pas égaux. Il s'agit de la négation de <a href="/fr/docs/Web/JavaScript/Reference/Operators/Equality">l'opérateur d'égalité</a> et les deux lignes suivantes fourniront donc toujours le même résultat :</p>
-
-<pre class="brush: js">
-x != y
-!(x == y)
-</pre>
-
-<p>Pour plus de détails sur l'algorithme de comparaison utilisé, voir <a href="/fr/docs/Web/JavaScript/Reference/Operators/Equality">la page relative à l'opérateur d'égalité</a>.
-</p>
-
-<p>À l'instar de l'opérateur d'égalité, l'opérateur d'inégalité tentera une conversion des opérandes si ceux-ci ne sont pas de même type :</p>
-
-<pre class="brush: js">
-3 != "3"; // false
-</pre>
-
-<p>Si cette conversion implicite n'est pas souhaitable et qu'on souhaite considérer des valeurs de types différents comme étant différentes, on privilégiera <a href="/fr/docs/Web/JavaScript/Reference/Operators/Strict_inequality">l'opérateur d'inégalité stricte</a> à la place :</p>
-
-<pre class="brush: js">
-3 !== "3"; // true
-</pre>
-
-<h2 id="examples">Exemples</h2>
-
-<h3 id="comparison_with_no_type_conversion">Comparaison sans conversion de types</h3>
-
-<pre class="brush: js">
-1 != 2;              // true
-"hello" != "hola";   // true
-
-1 != 1;              // false
-"hello" != "hello";  // false
-</pre>
-
-<h3 id="comparison_with_type_conversion">Comparaison avec conversion de types</h3>
-
-<pre class="brush: js">
-"1" !=  1;            // false
-1 != "1";             // false
-0 != false;           // false
-0 != null;            // true
-0 != undefined;       // true
-0 != !!null;          // false, voir la documentation pour !!
-0 != !!undefined;     // false, voir la documentation pour !!
-null != undefined;    // false
-
-const number1 = new Number(3);
-const number2 = new Number(3);
-number1 != 3;         // false
-number1 != number2;   // true
-</pre>
-
-<h3 id="comparison_of_objects">Comparaison d'objets</h3>
-
-<pre class="brush: js">
-const objet1 = {"clé": "valeur"}
-const objet2 = {"clé": "valeur"};
-
-objet1 != objet2 // true
-objet2 != objet2 // false
-</pre>
-
-<h2 id="specifications">Spécifications</h2>
-
-<p>{{Specifications}}</p>
-
-<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
-
-<p>{{Compat}}</p>
-
-<h2 id="see_also">Voir aussi</h2>
-
-<ul>
-  <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Equality">L'opérateur d'égalité</a></li>
-  <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Strict_equality">L'opérateur d'égalité stricte</a></li>
-  <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Strict_inequality">L'opérateur d'inégalité stricte</a></li>
-</ul>
diff --git a/files/fr/web/javascript/reference/operators/inequality/index.md b/files/fr/web/javascript/reference/operators/inequality/index.md
new file mode 100644
index 0000000000..7d54f35adb
--- /dev/null
+++ b/files/fr/web/javascript/reference/operators/inequality/index.md
@@ -0,0 +1,98 @@
+---
+title: Inégalité (!=)
+slug: Web/JavaScript/Reference/Operators/Inequality
+tags:
+  - JavaScript
+  - Language feature
+  - Operator
+  - Reference
+browser-compat: javascript.operators.inequality
+---
+{{jsSidebar("Operators")}}
+
+L'opérateur d'inégalité (`!=`) vérifie si ses deux opérandes ne sont pas égaux et renvoie un booléen correspondant au résultat. À la différence de l'opérateur [d'inégalité stricte](/fr/docs/Web/JavaScript/Reference/Operators/Strict_inequality), l'opérateur d'inégalité tente une conversion de ses opérandes avant la comparaison si ceux-ci sont de types différents.
+
+{{EmbedInteractiveExample("pages/js/expressions-inequality.html")}}
+
+## Syntaxe
+
+```js
+x != y
+```
+
+## Description
+
+L'opérateur d'inégalité vérifie si ses deux opérandes ne sont pas égaux. Il s'agit de la négation de [l'opérateur d'égalité](/fr/docs/Web/JavaScript/Reference/Operators/Equality) et les deux lignes suivantes fourniront donc toujours le même résultat :
+
+```js
+x != y
+!(x == y)
+```
+
+Pour plus de détails sur l'algorithme de comparaison utilisé, voir [la page relative à l'opérateur d'égalité](/fr/docs/Web/JavaScript/Reference/Operators/Equality).
+
+À l'instar de l'opérateur d'égalité, l'opérateur d'inégalité tentera une conversion des opérandes si ceux-ci ne sont pas de même type :
+
+```js
+3 != "3"; // false
+```
+
+Si cette conversion implicite n'est pas souhaitable et qu'on souhaite considérer des valeurs de types différents comme étant différentes, on privilégiera [l'opérateur d'inégalité stricte](/fr/docs/Web/JavaScript/Reference/Operators/Strict_inequality) à la place :
+
+```js
+3 !== "3"; // true
+```
+
+## Exemples
+
+### Comparaison sans conversion de types
+
+```js
+1 != 2;              // true
+"hello" != "hola";   // true
+
+1 != 1;              // false
+"hello" != "hello";  // false
+```
+
+### Comparaison avec conversion de types
+
+```js
+"1" !=  1;            // false
+1 != "1";             // false
+0 != false;           // false
+0 != null;            // true
+0 != undefined;       // true
+0 != !!null;          // false, voir la documentation pour !!
+0 != !!undefined;     // false, voir la documentation pour !!
+null != undefined;    // false
+
+const number1 = new Number(3);
+const number2 = new Number(3);
+number1 != 3;         // false
+number1 != number2;   // true
+```
+
+### Comparaison d'objets
+
+```js
+const objet1 = {"clé": "valeur"}
+const objet2 = {"clé": "valeur"};
+
+objet1 != objet2 // true
+objet2 != objet2 // false
+```
+
+## Spécifications
+
+{{Specifications}}
+
+## Compatibilité des navigateurs
+
+{{Compat}}
+
+## Voir aussi
+
+- [L'opérateur d'égalité](/fr/docs/Web/JavaScript/Reference/Operators/Equality)
+- [L'opérateur d'égalité stricte](/fr/docs/Web/JavaScript/Reference/Operators/Strict_equality)
+- [L'opérateur d'inégalité stricte](/fr/docs/Web/JavaScript/Reference/Operators/Strict_inequality)
diff --git a/files/fr/web/javascript/reference/operators/instanceof/index.html b/files/fr/web/javascript/reference/operators/instanceof/index.html
deleted file mode 100644
index c620472cbe..0000000000
--- a/files/fr/web/javascript/reference/operators/instanceof/index.html
+++ /dev/null
@@ -1,164 +0,0 @@
----
-title: instanceof
-slug: Web/JavaScript/Reference/Operators/instanceof
-tags:
-  - JavaScript
-  - Operator
-  - Prototype
-  - Reference
-  - instanceof
-translation_of: Web/JavaScript/Reference/Operators/instanceof
-original_slug: Web/JavaScript/Reference/Opérateurs/instanceof
----
-<div>{{jsSidebar("Operators")}}</div>
-
-<p>L'<strong>opérateur <code>instanceof</code></strong> permet de tester si un objet possède, dans sa chaîne de prototype, la propriété <code>prototype</code> d'un certain constructeur.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/expressions-instanceof.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox notranslate"><em>objet</em> instanceof <em>constructeur</em></pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>objet</code></dt>
- <dd>L'objet qu'on souhaite analyser.</dd>
- <dt><code>constructeur</code></dt>
- <dd>La fonction dont on souhaite vérifier la présence dans la chaîne de prototypes.</dd>
-</dl>
-
-<h2 id="Description">Description</h2>
-
-<p>L'opérateur <code>instanceof</code> teste la présence de <code>constructeur.prototype</code> dans la chaîne de prototypes d'<code>objet</code>.</p>
-
-<pre class="brush: js notranslate">function C(){} // Définition du constructeur
-function D(){} // Définition d'un autre constructeur
-
-var o = new C();
-
-// true, car : Object.getPrototypeOf(o) === C.prototype
-o instanceof C;
-
-// false, car D.prototype n'existe pas dans la chaîne de prototype de o
-o instanceof D;
-
-o instanceof Object; // true, car:
-C.prototype instanceof Object // true
-
-C.prototype = {};
-var o2 = new C();
-
-o2 instanceof C; // true
-
-// false, car C.prototype n'existe plus dans la chaîne de prototype de o
-o instanceof C;
-
-D.prototype = new C(); // Utilisation de l'héritage
-var o3 = new D();
-o3 instanceof D; // true
-o3 instanceof C; // true car C.prototype fait partie de la chaîne de o3
-</pre>
-
-<p>À noter que la valeur retournée par <code>instanceof</code> peut être différente suite à un changement de la propriété <code>prototype</code> du constructeur, notamment via la méthode <code>Object.setPrototypeOf()</code>. On peut aussi utiliser la pseudo-propriété <code>__proto__</code> qui n'était pas standard avant ECMAScript 2015.</p>
-
-<h3 id="instanceof_dans_dautres_contextes_frames_ou_fenêtres"><code>instanceof</code> dans d'autres contextes (frames ou fenêtres)</h3>
-
-<p>Différents niveaux d'intégrations ont différents environnements. Cela signifie que les valeurs retournées sont différentes (objet globaux différents, constructeurs différents, etc.). Cela peut engendrer des résultats inattendus. Par exemple, <code>[] instanceof window.frames[0].Array</code> renverra <code>false</code>, car <code>Array !== </code><code>window.frames[0].Array</code> et que les tableaux héritent de leur constructeur.</p>
-
-<p>Cela peut être contre-intuitif au début, mais lorsqu'il est nécessaire de travailler avec plusieurs frames ou fenêtres, et que des objets sont transférés via des fonctions, cela sera un obstacle valide et important. Par contre, il est tout à fait possible d'utiliser <code>Array.isArray(myObj)</code> pour vérifier de manière sécurisée qu'un tableau est effectivement un tableau.</p>
-
-<p>Ainsi, pour vérifier qu'un <a href="/fr/docs/Web/API/Node">nœud</a> est bien un objet de type <a href="/fr/docs/Web/API/SVGElement">SVGElement</a> dans un autre contexte, on pourra utiliser <code>monNœud instanceof monNœud.documentMaitre.vue.SVGElement</code>.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Démonstration_que_String_et_Date_sont_de_type_Object_et_cas_aux_limites_des_littéraux">Démonstration que <code>String</code> et <code>Date</code> sont de type <code>Object</code> et cas aux limites des littéraux</h3>
-
-<p>Le code suivant utilise <code>instanceof</code> pour démontrer que les objets <code>String</code> et <code>Date</code> sont aussi de type <code>Object</code> (ils dérivent d'<code>Object</code>).</p>
-
-<p>Cependant, les objets créés à partir de littéraux objets sont une exception : en effet, bien que leur prototype ne soit pas défini, <code>instanceof Object</code> renvoie <code>true</code>.</p>
-
-<pre class="brush: js notranslate">var chaîneSimple = "Une chaîne simple";
-var maChaîne  = new String();
-var newChaîne = new String("Chaîne créée avec un constructeur");
-var maDate    = new Date();
-var monObjet  = {};
-var monNonObjet = Object.create(null);
-
-chaîneSimple instanceof String; //false car le prototype vaut undefined
-maChaîne  instanceof String; // true
-newChaîne instanceof String; // true
-maChaîne  instanceof Object; // true
-
-monObjet instanceof Object;  // true, bien que le protoype soit undefined
-({}) instanceof Object;      // true, comme pour le cas précédent
-monNonObjet instance Object; // false
-
-maChaîne instanceof Date;   // false
-
-maDate instanceof Date;     // true
-maDate instanceof Object;   // true
-maDate instanceof String;   // false
-</pre>
-
-<h3 id="Démonstration_que_mavoiture_est_de_type_Voiture_et_de_type_Object">Démonstration que <code>mavoiture</code> est de type <code>Voiture</code> et de type <code>Object</code></h3>
-
-<p>Le code suivant créé un objet de type <code>Voiture</code> et une instance de cet objet, <code>mavoiture</code>. L'opérateur <code>instanceof</code> montre que l'objet <code>mavoiture</code> est de type <code>Voiture</code> et de type <code>Object</code>.</p>
-
-<pre class="brush: js notranslate">function Voiture(fabricant, modele, annee) {
-  this.fabricant = fabricant;
-  this.modele = modele;
-  this.annee = annee;
-}
-var mavoiture = new Voiture("Citroën", "C3", 2006);
-var a = mavoiture instanceof Voiture; // retourne true
-var b = mavoiture instanceof Object;  // retourne true
-</pre>
-
-<h3 id="Attention_à_la_précédence_des_opérateurs">Attention à la précédence des opérateurs</h3>
-
-<p>Pour tester qu'un objet n'est pas une instance d'un constructeur donné, on pourra faire le test <code>!(monObj instanceof Constructor)</code>. Toutefois, attention à ne pas écrire <code>!monObj instanceof Constructor</code> car <code>!monObj</code> serait traité en priorité et on testerait donc <code>false instanceof Constructor</code> qui sera toujours faux.</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-relational-operators', 'Relational Operators')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-relational-operators', 'Opérateurs relationnels')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-11.8.6', 'Opérateur instanceof')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES3', '#sec-11.8.6', 'Opérateur instanceof')}}</td>
-   <td>{{Spec2('ES3')}}</td>
-   <td>Définition initiale. Implémentée avec JavaScript 1.4.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.operators.instanceof")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Opérateurs/L_opérateur_typeof","typeof")}}</li>
- <li>{{jsxref("Symbol.hasInstance")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/operators/instanceof/index.md b/files/fr/web/javascript/reference/operators/instanceof/index.md
new file mode 100644
index 0000000000..b6bb3248cd
--- /dev/null
+++ b/files/fr/web/javascript/reference/operators/instanceof/index.md
@@ -0,0 +1,140 @@
+---
+title: instanceof
+slug: Web/JavaScript/Reference/Operators/instanceof
+tags:
+  - JavaScript
+  - Operator
+  - Prototype
+  - Reference
+  - instanceof
+translation_of: Web/JavaScript/Reference/Operators/instanceof
+original_slug: Web/JavaScript/Reference/Opérateurs/instanceof
+---
+{{jsSidebar("Operators")}}
+
+L'**opérateur `instanceof`** permet de tester si un objet possède, dans sa chaîne de prototype, la propriété `prototype` d'un certain constructeur.
+
+{{EmbedInteractiveExample("pages/js/expressions-instanceof.html")}}
+
+## Syntaxe
+
+    objet instanceof constructeur
+
+### Paramètres
+
+- `objet`
+  - : L'objet qu'on souhaite analyser.
+- `constructeur`
+  - : La fonction dont on souhaite vérifier la présence dans la chaîne de prototypes.
+
+## Description
+
+L'opérateur `instanceof` teste la présence de `constructeur.prototype` dans la chaîne de prototypes d'`objet`.
+
+```js
+function C(){} // Définition du constructeur
+function D(){} // Définition d'un autre constructeur
+
+var o = new C();
+
+// true, car : Object.getPrototypeOf(o) === C.prototype
+o instanceof C;
+
+// false, car D.prototype n'existe pas dans la chaîne de prototype de o
+o instanceof D;
+
+o instanceof Object; // true, car:
+C.prototype instanceof Object // true
+
+C.prototype = {};
+var o2 = new C();
+
+o2 instanceof C; // true
+
+// false, car C.prototype n'existe plus dans la chaîne de prototype de o
+o instanceof C;
+
+D.prototype = new C(); // Utilisation de l'héritage
+var o3 = new D();
+o3 instanceof D; // true
+o3 instanceof C; // true car C.prototype fait partie de la chaîne de o3
+```
+
+À noter que la valeur retournée par `instanceof` peut être différente suite à un changement de la propriété `prototype` du constructeur, notamment via la méthode `Object.setPrototypeOf()`. On peut aussi utiliser la pseudo-propriété `__proto__` qui n'était pas standard avant ECMAScript 2015.
+
+### `instanceof` dans d'autres contextes (frames ou fenêtres)
+
+Différents niveaux d'intégrations ont différents environnements. Cela signifie que les valeurs retournées sont différentes (objet globaux différents, constructeurs différents, etc.). Cela peut engendrer des résultats inattendus. Par exemple, `[] instanceof window.frames[0].Array` renverra `false`, car ` Array !== ``window.frames[0].Array` et que les tableaux héritent de leur constructeur.
+
+Cela peut être contre-intuitif au début, mais lorsqu'il est nécessaire de travailler avec plusieurs frames ou fenêtres, et que des objets sont transférés via des fonctions, cela sera un obstacle valide et important. Par contre, il est tout à fait possible d'utiliser `Array.isArray(myObj)` pour vérifier de manière sécurisée qu'un tableau est effectivement un tableau.
+
+Ainsi, pour vérifier qu'un [nœud](/fr/docs/Web/API/Node) est bien un objet de type [SVGElement](/fr/docs/Web/API/SVGElement) dans un autre contexte, on pourra utiliser `monNœud instanceof monNœud.documentMaitre.vue.SVGElement`.
+
+## Exemples
+
+### Démonstration que `String` et `Date` sont de type `Object` et cas aux limites des littéraux
+
+Le code suivant utilise `instanceof` pour démontrer que les objets `String` et `Date` sont aussi de type `Object` (ils dérivent d'`Object`).
+
+Cependant, les objets créés à partir de littéraux objets sont une exception : en effet, bien que leur prototype ne soit pas défini, `instanceof Object` renvoie `true`.
+
+```js
+var chaîneSimple = "Une chaîne simple";
+var maChaîne  = new String();
+var newChaîne = new String("Chaîne créée avec un constructeur");
+var maDate    = new Date();
+var monObjet  = {};
+var monNonObjet = Object.create(null);
+
+chaîneSimple instanceof String; //false car le prototype vaut undefined
+maChaîne  instanceof String; // true
+newChaîne instanceof String; // true
+maChaîne  instanceof Object; // true
+
+monObjet instanceof Object;  // true, bien que le protoype soit undefined
+({}) instanceof Object;      // true, comme pour le cas précédent
+monNonObjet instance Object; // false
+
+maChaîne instanceof Date;   // false
+
+maDate instanceof Date;     // true
+maDate instanceof Object;   // true
+maDate instanceof String;   // false
+```
+
+### Démonstration que `mavoiture` est de type `Voiture` et de type `Object`
+
+Le code suivant créé un objet de type `Voiture` et une instance de cet objet, `mavoiture`. L'opérateur `instanceof` montre que l'objet `mavoiture` est de type `Voiture` et de type `Object`.
+
+```js
+function Voiture(fabricant, modele, annee) {
+  this.fabricant = fabricant;
+  this.modele = modele;
+  this.annee = annee;
+}
+var mavoiture = new Voiture("Citroën", "C3", 2006);
+var a = mavoiture instanceof Voiture; // retourne true
+var b = mavoiture instanceof Object;  // retourne true
+```
+
+### Attention à la précédence des opérateurs
+
+Pour tester qu'un objet n'est pas une instance d'un constructeur donné, on pourra faire le test `!(monObj instanceof Constructor)`. Toutefois, attention à ne pas écrire `!monObj instanceof Constructor` car `!monObj` serait traité en priorité et on testerait donc `false instanceof Constructor` qui sera toujours faux.
+
+## Spécifications
+
+| Spécification                                                                                        | État                         | Commentaires                                          |
+| ---------------------------------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- |
+| {{SpecName('ESDraft', '#sec-relational-operators', 'Relational Operators')}} | {{Spec2('ESDraft')}} |                                                       |
+| {{SpecName('ES6', '#sec-relational-operators', 'Opérateurs relationnels')}} | {{Spec2('ES6')}}         |                                                       |
+| {{SpecName('ES5.1', '#sec-11.8.6', 'Opérateur instanceof')}}                     | {{Spec2('ES5.1')}}     |                                                       |
+| {{SpecName('ES3', '#sec-11.8.6', 'Opérateur instanceof')}}                     | {{Spec2('ES3')}}         | Définition initiale. Implémentée avec JavaScript 1.4. |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.operators.instanceof")}}
+
+## Voir aussi
+
+- {{jsxref("Opérateurs/L_opérateur_typeof","typeof")}}
+- {{jsxref("Symbol.hasInstance")}}
diff --git a/files/fr/web/javascript/reference/operators/left_shift/index.html b/files/fr/web/javascript/reference/operators/left_shift/index.html
deleted file mode 100644
index 325adc9947..0000000000
--- a/files/fr/web/javascript/reference/operators/left_shift/index.html
+++ /dev/null
@@ -1,62 +0,0 @@
----
-title: Décalage binaire à gauche (<<)
-slug: Web/JavaScript/Reference/Operators/Left_shift
-tags:
-  - Bitwise operator
-  - JavaScript
-  - Language feature
-  - Operator
-  - Reference
-browser-compat: javascript.operators.left_shift
-translation-of: Web/JavaScript/Reference/Operators/Left_shift
----
-<div>{{jsSidebar("Operators")}}</div>
-
-<p>L'opérateur de <strong>décalage binaire à gauche (<code>&lt;&lt;</code>)</strong> décale la séquence de bits représentée par le premier opérande d'autant de bits vers la gauche que le nombre indiqué par le second opérande. Les bits en excès à gauche sont écartés et des bits à zéro sont introduits à droite.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/expressions-left-shift.html")}}</div>
-
-<h2 id="syntax">Syntaxe</h2>
-
-<pre class="brush: js">
-<var>a</var> &lt;&lt; <var>b</var>
-</pre>
-
-<h2 id="description">Description</h2>
-
-<p>Cet opérateur décale les bits du premier opérande vers la gauche, d'autant que le nombre indiqué par le second opérande. Les bits qui dépassent à gauche sont abandonnés et des zéros sont introduits à droite.</p>
-
-<p>Ainsi, <code>9 &lt;&lt; 2</code> donnera la valeur 36 (en base 10) :</p>
-
-<pre class="brush: js">
-       9 (base 10): 00000000000000000000000000001001 (base 2)
-                    --------------------------------
-  9 &lt;&lt; 2 (base 10): 00000000000000000000000000100100 (base 2) = 36 (base 10)
-</pre>
-
-<p>Le décalage binaire de tout nombre <code>x</code> de <code>y</code> bits vers la gauche donnera comme résultat <code>x * 2 ** y</code>. Par exemple, <code>9 &lt;&lt; 3</code> pourra être reformulé en <code>9 * (2 ** 3) = 9 * (8) = 72</code>.</p>
-
-<h2 id="examples">Exemples</h2>
-
-<h3 id="using_left_shift">Utiliser le décalage binaire à gauche</h3>
-
-<pre class="brush: js">
-9 &lt;&lt; 3; // 72
-
-// 9 * (2 ** 3) = 9 * (8) = 72
-</pre>
-
-<h2 id="specifications">Spécifications</h2>
-
-<p>{{Specifications}}</p>
-
-<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
-
-<p>{{Compat}}</p>
-
-<h2 id="see_also">Voir aussi</h2>
-
-<ul>
-  <li><a href="/fr/docs/Web/JavaScript/Guide/Expressions_and_Operators#bitwise">Les opérateurs binaires dans le guide JavaScript</a></li>
-  <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Left_shift_assignment">L'opérateur de décalage binaire à gauche et d'affectation</a></li>
-</ul>
diff --git a/files/fr/web/javascript/reference/operators/left_shift/index.md b/files/fr/web/javascript/reference/operators/left_shift/index.md
new file mode 100644
index 0000000000..f1749017db
--- /dev/null
+++ b/files/fr/web/javascript/reference/operators/left_shift/index.md
@@ -0,0 +1,59 @@
+---
+title: Décalage binaire à gauche (<<)
+slug: Web/JavaScript/Reference/Operators/Left_shift
+tags:
+  - Bitwise operator
+  - JavaScript
+  - Language feature
+  - Operator
+  - Reference
+browser-compat: javascript.operators.left_shift
+---
+{{jsSidebar("Operators")}}
+
+L'opérateur de **décalage binaire à gauche (`<<`)** décale la séquence de bits représentée par le premier opérande d'autant de bits vers la gauche que le nombre indiqué par le second opérande. Les bits en excès à gauche sont écartés et des bits à zéro sont introduits à droite.
+
+{{EmbedInteractiveExample("pages/js/expressions-left-shift.html")}}
+
+## Syntaxe
+
+```js
+a << b
+```
+
+## Description
+
+Cet opérateur décale les bits du premier opérande vers la gauche, d'autant que le nombre indiqué par le second opérande. Les bits qui dépassent à gauche sont abandonnés et des zéros sont introduits à droite.
+
+Ainsi, `9 << 2` donnera la valeur 36 (en base 10) :
+
+```js
+       9 (base 10): 00000000000000000000000000001001 (base 2)
+                    --------------------------------
+  9 << 2 (base 10): 00000000000000000000000000100100 (base 2) = 36 (base 10)
+```
+
+Le décalage binaire de tout nombre `x` de `y` bits vers la gauche donnera comme résultat `x * 2 ** y`. Par exemple, `9 << 3` pourra être reformulé en `9 * (2 ** 3) = 9 * (8) = 72`.
+
+## Exemples
+
+### Utiliser le décalage binaire à gauche
+
+```js
+9 << 3; // 72
+
+// 9 * (2 ** 3) = 9 * (8) = 72
+```
+
+## Spécifications
+
+{{Specifications}}
+
+## Compatibilité des navigateurs
+
+{{Compat}}
+
+## Voir aussi
+
+- [Les opérateurs binaires dans le guide JavaScript](/fr/docs/Web/JavaScript/Guide/Expressions_and_Operators#bitwise)
+- [L'opérateur de décalage binaire à gauche et d'affectation](/fr/docs/Web/JavaScript/Reference/Operators/Left_shift_assignment)
diff --git a/files/fr/web/javascript/reference/operators/left_shift_assignment/index.html b/files/fr/web/javascript/reference/operators/left_shift_assignment/index.html
deleted file mode 100644
index 85b349301b..0000000000
--- a/files/fr/web/javascript/reference/operators/left_shift_assignment/index.html
+++ /dev/null
@@ -1,51 +0,0 @@
----
-title: Affectation après décalage à gauche (<<=)
-slug: Web/JavaScript/Reference/Operators/Left_shift_assignment
-tags:
-  - Assignment operator
-  - JavaScript
-  - Language feature
-  - Operator
-  - Reference
-translation-of: Web/JavaScript/Reference/Operators/Left_shift_assignment
-browser-compat: javascript.operators.left_shift_assignment
----
-<div>{{jsSidebar("Operators")}}</div>
-
-<p>L'opérateur de décalage à gauche et d'affectation (<code>&lt;&lt;=</code>) décale la séquence de bits représentée par l'opérande gauche d'autant de bits qu'indiqué par l'opérande droit puis affecte le résultat obtenu à la variable représentée par l'opérande gauche.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/expressions-left-shift-assignment.html")}}</div>
-
-<h2 id="syntax">Syntaxe</h2>
-
-<pre class="brush: js">
-<strong>Opérateur :</strong> x &lt;&lt;= y
-<strong>Signification :</strong>  x   = x &lt;&lt; y
-</pre>
-
-<h2 id="examples">Exemples</h2>
-
-<h3 id="using_left_shift_assignment">Utiliser l'opérateur de décalage à gauche et d'affectation</h3>
-
-<pre class="brush: js">
-let a = 5;
-// 00000000000000000000000000000101
-
-a &lt;&lt;= 2; // 20
-// 00000000000000000000000000010100
-</pre>
-
-<h2 id="specifications">Spécifications</h2>
-
-<p>{{Specifications}}</p>
-
-<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
-
-<p>{{Compat}}</p>
-
-<h2 id="see_also">Voir aussi</h2>
-
-<ul>
-  <li><a href="/fr/docs/Web/JavaScript/Guide/Expressions_and_Operators#assignment">Les opérateurs d'affectation dans le guide JavaScript</a></li>
-  <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Left_shift">L'opérateur de décalage à gauche binaire</a></li>
-</ul>
diff --git a/files/fr/web/javascript/reference/operators/left_shift_assignment/index.md b/files/fr/web/javascript/reference/operators/left_shift_assignment/index.md
new file mode 100644
index 0000000000..a19e39c4f8
--- /dev/null
+++ b/files/fr/web/javascript/reference/operators/left_shift_assignment/index.md
@@ -0,0 +1,48 @@
+---
+title: Affectation après décalage à gauche (<<=)
+slug: Web/JavaScript/Reference/Operators/Left_shift_assignment
+tags:
+  - Assignment operator
+  - JavaScript
+  - Language feature
+  - Operator
+  - Reference
+browser-compat: javascript.operators.left_shift_assignment
+---
+{{jsSidebar("Operators")}}
+
+L'opérateur de décalage à gauche et d'affectation (`<<=`) décale la séquence de bits représentée par l'opérande gauche d'autant de bits qu'indiqué par l'opérande droit puis affecte le résultat obtenu à la variable représentée par l'opérande gauche.
+
+{{EmbedInteractiveExample("pages/js/expressions-left-shift-assignment.html")}}
+
+## Syntaxe
+
+```js
+Opérateur : x <<= y
+Signification :  x   = x << y
+```
+
+## Exemples
+
+### Utiliser l'opérateur de décalage à gauche et d'affectation
+
+```js
+let a = 5;
+// 00000000000000000000000000000101
+
+a <<= 2; // 20
+// 00000000000000000000000000010100
+```
+
+## Spécifications
+
+{{Specifications}}
+
+## Compatibilité des navigateurs
+
+{{Compat}}
+
+## Voir aussi
+
+- [Les opérateurs d'affectation dans le guide JavaScript](/fr/docs/Web/JavaScript/Guide/Expressions_and_Operators#assignment)
+- [L'opérateur de décalage à gauche binaire](/fr/docs/Web/JavaScript/Reference/Operators/Left_shift)
diff --git a/files/fr/web/javascript/reference/operators/less_than/index.html b/files/fr/web/javascript/reference/operators/less_than/index.html
deleted file mode 100644
index 5748798f15..0000000000
--- a/files/fr/web/javascript/reference/operators/less_than/index.html
+++ /dev/null
@@ -1,115 +0,0 @@
----
-title: Inférieur strict (<)
-slug: Web/JavaScript/Reference/Operators/Less_than
-tags:
-  - JavaScript
-  - Language feature
-  - Operator
-  - Reference
-translation-of: Web/JavaScript/Reference/Operators/Less_than
-browser-compat: javascript.operators.less_than
----
-<div>{{jsSidebar("Operators")}}</div>
-
-<p>L'opérateur inférieur strict (<code>&lt;</code>) renvoie <code>true</code> si son opérande gauche est strictement inférieur à son opérande droit et <code>false</code> sinon.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/expressions-less-than.html")}}</div>
-
-<h2 id="syntax">Syntaxe</h2>
-
-<pre class="brush: js">
-x &lt; y
-</pre>
-
-<h2 id="description">Description</h2>
-
-<p>Les opérandes sont comparés avec l'algorithme de <a href="https://tc39.es/ecma262/#sec-abstract-relational-comparison">comparaison abstraite relationnelle</a> résumé comme suit :</p>
-
-<ul>
- <li>Tout d'abord, les objets sont convertis en valeurs primitives avec <code><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Symbol/toPrimitive">Symbol.ToPrimitive</a></code> en utilisant le paramètre <code>hint</code> avec la valeur <code>'number'</code>.</li>
- <li>Si les deux valeurs sont des chaînes de caractères, elles sont comparées comme telles selon les valeurs des codes Unicode qu'elles contiennent.</li>
- <li>Sinon, le moteur JavaScript tente de convertir les valeurs primitives non-numériques en valeurs numériques :
-  <ul>
-   <li>Les valeurs booléennes <code>true</code> et <code>false</code> sont respectivement converties en 1 et 0.</li>
-   <li><code>null</code> est converti en 0.</li>
-   <li><code>undefined</code> est converti en <code>NaN</code>.</li>
-   <li>Les chaînes de caractères sont converties en fonction de la valeur qu'elles contiennent et, si elles ne contiennent pas de valeurs numériques, elles sont converties en <code>NaN</code>.</li>
-  </ul>
- </li>
- <li>Si l'une des valeurs vaut <code><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/NaN">NaN</a></code>, l'opérateur renverra <code>false</code>.</li>
- <li>Sinon, les valeurs sont comparées numériquement.</li>
-</ul>
-
-<h2 id="examples">Exemples</h2>
-
-<h3 id="number_to_number_comparison">Comparaison numérique</h3>
-
-<pre class="brush: js">
-console.log(5 &lt; 3);            // false
-console.log(3 &lt; 3);            // false
-console.log(3 &lt; 5);            // true
-</pre>
-
-<h3 id="number_to_bigint_comparison">Comparaison entre un nombre et un BigInt</h3>
-
-<pre class="brush: js">
-console.log(5n &lt; 3);           // false
-console.log(3 &lt; 5n);           // true
-</pre>
-
-<h3 id="string_to_string_comparison">Comparaison entre chaînes de caractères</h3>
-
-<pre class="brush: js">
-console.log("a" &lt; "b");        // true
-console.log("a" &lt; "a");        // false
-console.log("a" &lt; "3");        // false
-</pre>
-
-<h3 id="string_to_number_comparison">Comparaison entre nombres et chaînes de caractères</h3>
-
-<pre class="brush: js">
-console.log("5" &lt; 3);          // false
-console.log("3" &lt; 3);          // false
-console.log("3" &lt; 5);          // true
-
-console.log("coucou" &lt; 5);      // false
-console.log(5 &lt; "coucou");      // false
-
-console.log("5" &lt; 3n);         // false
-console.log("3" &lt; 5n);         // true
-</pre>
-
-<h3 id="comparing_boolean_null_undefined_nan">Comparaison avec des booléens, null, undefined, NaN</h3>
-
-<pre class="brush: js">
-console.log(true &lt; false);     // false
-console.log(false &lt; true);     // true
-
-console.log(0 &lt; true);         // true
-console.log(true &lt; 1);         // false
-
-console.log(null &lt; 0);         // false
-console.log(null &lt; 1);         // true
-
-console.log(undefined &lt; 3);    // false
-console.log(3 &lt; undefined);    // false
-
-console.log(3 &lt; NaN);          // false
-console.log(NaN &lt; 3);          // false
-</pre>
-
-<h2 id="specifications">Spécifications</h2>
-
-<p>{{Specifications}}</p>
-
-<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
-
-<p>{{Compat}}</p>
-
-<h2 id="see_also">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Greater_than">L'opérateur supérieur strict</a></li>
- <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Greater_than_or_equal">L'opérateur supérieur ou égal</a></li>
- <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Less_than_or_equal">L'opérateur inférieur ou égal</a></li>
-</ul>
diff --git a/files/fr/web/javascript/reference/operators/less_than/index.md b/files/fr/web/javascript/reference/operators/less_than/index.md
new file mode 100644
index 0000000000..1ba272b20e
--- /dev/null
+++ b/files/fr/web/javascript/reference/operators/less_than/index.md
@@ -0,0 +1,109 @@
+---
+title: Inférieur strict (<)
+slug: Web/JavaScript/Reference/Operators/Less_than
+tags:
+  - JavaScript
+  - Language feature
+  - Operator
+  - Reference
+browser-compat: javascript.operators.less_than
+---
+{{jsSidebar("Operators")}}
+
+L'opérateur inférieur strict (`<`) renvoie `true` si son opérande gauche est strictement inférieur à son opérande droit et `false` sinon.
+
+{{EmbedInteractiveExample("pages/js/expressions-less-than.html")}}
+
+## Syntaxe
+
+```js
+x < y
+```
+
+## Description
+
+Les opérandes sont comparés avec l'algorithme de [comparaison abstraite relationnelle](https://tc39.es/ecma262/#sec-abstract-relational-comparison) résumé comme suit :
+
+- Tout d'abord, les objets sont convertis en valeurs primitives avec [`Symbol.ToPrimitive`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Symbol/toPrimitive) en utilisant le paramètre `hint` avec la valeur `'number'`.
+- Si les deux valeurs sont des chaînes de caractères, elles sont comparées comme telles selon les valeurs des codes Unicode qu'elles contiennent.
+- Sinon, le moteur JavaScript tente de convertir les valeurs primitives non-numériques en valeurs numériques :
+
+  - Les valeurs booléennes `true` et `false` sont respectivement converties en 1 et 0.
+  - `null` est converti en 0.
+  - `undefined` est converti en `NaN`.
+  - Les chaînes de caractères sont converties en fonction de la valeur qu'elles contiennent et, si elles ne contiennent pas de valeurs numériques, elles sont converties en `NaN`.
+
+- Si l'une des valeurs vaut [`NaN`](/fr/docs/Web/JavaScript/Reference/Global_Objects/NaN), l'opérateur renverra `false`.
+- Sinon, les valeurs sont comparées numériquement.
+
+## Exemples
+
+### Comparaison numérique
+
+```js
+console.log(5 < 3);            // false
+console.log(3 < 3);            // false
+console.log(3 < 5);            // true
+```
+
+### Comparaison entre un nombre et un BigInt
+
+```js
+console.log(5n < 3);           // false
+console.log(3 < 5n);           // true
+```
+
+### Comparaison entre chaînes de caractères
+
+```js
+console.log("a" < "b");        // true
+console.log("a" < "a");        // false
+console.log("a" < "3");        // false
+```
+
+### Comparaison entre nombres et chaînes de caractères
+
+```js
+console.log("5" < 3);          // false
+console.log("3" < 3);          // false
+console.log("3" < 5);          // true
+
+console.log("coucou" < 5);      // false
+console.log(5 < "coucou");      // false
+
+console.log("5" < 3n);         // false
+console.log("3" < 5n);         // true
+```
+
+### Comparaison avec des booléens, null, undefined, NaN
+
+```js
+console.log(true < false);     // false
+console.log(false < true);     // true
+
+console.log(0 < true);         // true
+console.log(true < 1);         // false
+
+console.log(null < 0);         // false
+console.log(null < 1);         // true
+
+console.log(undefined < 3);    // false
+console.log(3 < undefined);    // false
+
+console.log(3 < NaN);          // false
+console.log(NaN < 3);          // false
+```
+
+## Spécifications
+
+{{Specifications}}
+
+## Compatibilité des navigateurs
+
+{{Compat}}
+
+## Voir aussi
+
+- [L'opérateur supérieur strict](/fr/docs/Web/JavaScript/Reference/Operators/Greater_than)
+- [L'opérateur supérieur ou égal](/fr/docs/Web/JavaScript/Reference/Operators/Greater_than_or_equal)
+- [L'opérateur inférieur ou égal](/fr/docs/Web/JavaScript/Reference/Operators/Less_than_or_equal)
diff --git a/files/fr/web/javascript/reference/operators/less_than_or_equal/index.html b/files/fr/web/javascript/reference/operators/less_than_or_equal/index.html
deleted file mode 100644
index 19d84e0f8c..0000000000
--- a/files/fr/web/javascript/reference/operators/less_than_or_equal/index.html
+++ /dev/null
@@ -1,99 +0,0 @@
----
-title: Inférieur ou égal (<=)
-slug: Web/JavaScript/Reference/Operators/Less_than_or_equal
-tags:
-  - JavaScript
-  - Language feature
-  - Operator
-  - Reference
-translation-of: Web/JavaScript/Reference/Operators/Less_than_or_equal
-browser-compat: javascript.operators.less_than_or_equal
----
-<div>{{jsSidebar("Operators")}}</div>
-
-<p>L'opérateur inférieur ou égal (<code>&lt;=</code>) renvoie <code>true</code> si l'opérande gauche est inférieur ou égal à l'opérande droit et <code>false</code> sinon.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/expressions-less-than-or-equal.html")}}</div>
-
-<h2 id="syntax">Syntaxe</h2>
-
-<pre class="brush: js">
-x &lt;= y
-</pre>
-
-<h2 id="description">Description</h2>
-
-<p>Les opérandes sont comparés avec l'algorithme de <a href="https://tc39.es/ecma262/#sec-abstract-relational-comparison">comparaison abstraite relationnelle</a>. Voir la documentation de <a href="/fr/docs/Web/JavaScript/Reference/Operators/Less_than">l'opérateur inférieur strict</a> pour un résumé de cet algorithme.</p>
-
-<h2 id="examples">Exemples</h2>
-
-<h3 id="number_to_number_comparison">Comparaison numérique</h3>
-
-<pre class="brush: js">
-console.log(5 &lt;= 3);         // false
-console.log(3 &lt;= 3);         // true
-console.log(3 &lt;= 5);         // true
-</pre>
-
-<h3 id="number_to_bigint_comparison">Comparaison entre un nombre et un BigInt</h3>
-
-<pre class="brush: js">
-console.log(5n &lt;= 3);        // false
-console.log(3 &lt;= 3n);        // true
-console.log(3 &lt;= 5n);        // true
-</pre>
-
-<h3 id="string_to_string_comparison">Comparaison entre chaînes de caractères</h3>
-
-<pre class="brush: js">
-console.log("a" &lt;= "b");     // true
-console.log("a" &lt;= "a");     // true
-console.log("a" &lt;= "3");     // false
-</pre>
-
-<h3 id="string_to_number_comparison">Comparaison entre nombres et chaînes de caractères</h3>
-
-<pre class="brush: js">
-console.log("5" &lt;= 3);       // false
-console.log("3" &lt;= 3);       // true
-console.log("3" &lt;= 5);       // true
-
-console.log("coucou" &lt;= 5);   // false
-console.log(5 &lt;= "coucou");   // false
-</pre>
-
-<h3 id="comparing_boolean_null_undefined_nan">Comparaison avec des booléens, null, undefined, NaN</h3>
-
-<pre class="brush: js">
-console.log(true &lt;= false);  // false
-console.log(true &lt;= true);   // true
-console.log(false &lt;= true);  // true
-
-console.log(true &lt;= 0);      // false
-console.log(true &lt;= 1);      // true
-
-console.log(null &lt;= 0);      // true
-console.log(1 &lt;= null);      // false
-
-console.log(undefined &lt;= 3); // false
-console.log(3 &lt;= undefined); // false
-
-console.log(3 &lt;= NaN);       // false
-console.log(NaN &lt;= 3);       // false
-</pre>
-
-<h2 id="specifications">Spécifications</h2>
-
-<p>{{Specifications}}</p>
-
-<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
-
-<p>{{Compat}}</p>
-
-<h2 id="see_also">Voir aussi</h2>
-
-<ul>
-  <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Greater_than_or_equal">L'opérateur supérieur ou égal</a></li>
-  <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Greater_than">L'opérateur supérieur strict</a></li>
-  <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Less_than">L'opérateur inférieur strict</a></li>
-</ul>
diff --git a/files/fr/web/javascript/reference/operators/less_than_or_equal/index.md b/files/fr/web/javascript/reference/operators/less_than_or_equal/index.md
new file mode 100644
index 0000000000..c601782b2a
--- /dev/null
+++ b/files/fr/web/javascript/reference/operators/less_than_or_equal/index.md
@@ -0,0 +1,96 @@
+---
+title: Inférieur ou égal (<=)
+slug: Web/JavaScript/Reference/Operators/Less_than_or_equal
+tags:
+  - JavaScript
+  - Language feature
+  - Operator
+  - Reference
+browser-compat: javascript.operators.less_than_or_equal
+---
+{{jsSidebar("Operators")}}
+
+L'opérateur inférieur ou égal (`<=`) renvoie `true` si l'opérande gauche est inférieur ou égal à l'opérande droit et `false` sinon.
+
+{{EmbedInteractiveExample("pages/js/expressions-less-than-or-equal.html")}}
+
+## Syntaxe
+
+```js
+x <= y
+```
+
+## Description
+
+Les opérandes sont comparés avec l'algorithme de [comparaison abstraite relationnelle](https://tc39.es/ecma262/#sec-abstract-relational-comparison). Voir la documentation de [l'opérateur inférieur strict](/fr/docs/Web/JavaScript/Reference/Operators/Less_than) pour un résumé de cet algorithme.
+
+## Exemples
+
+### Comparaison numérique
+
+```js
+console.log(5 <= 3);         // false
+console.log(3 <= 3);         // true
+console.log(3 <= 5);         // true
+```
+
+### Comparaison entre un nombre et un BigInt
+
+```js
+console.log(5n <= 3);        // false
+console.log(3 <= 3n);        // true
+console.log(3 <= 5n);        // true
+```
+
+### Comparaison entre chaînes de caractères
+
+```js
+console.log("a" <= "b");     // true
+console.log("a" <= "a");     // true
+console.log("a" <= "3");     // false
+```
+
+### Comparaison entre nombres et chaînes de caractères
+
+```js
+console.log("5" <= 3);       // false
+console.log("3" <= 3);       // true
+console.log("3" <= 5);       // true
+
+console.log("coucou" <= 5);   // false
+console.log(5 <= "coucou");   // false
+```
+
+### Comparaison avec des booléens, null, undefined, NaN
+
+```js
+console.log(true <= false);  // false
+console.log(true <= true);   // true
+console.log(false <= true);  // true
+
+console.log(true <= 0);      // false
+console.log(true <= 1);      // true
+
+console.log(null <= 0);      // true
+console.log(1 <= null);      // false
+
+console.log(undefined <= 3); // false
+console.log(3 <= undefined); // false
+
+console.log(3 <= NaN);       // false
+console.log(NaN <= 3);       // false
+```
+
+## Spécifications
+
+{{Specifications}}
+
+## Compatibilité des navigateurs
+
+{{Compat}}
+
+## Voir aussi
+
+- [L'opérateur supérieur ou égal](/fr/docs/Web/JavaScript/Reference/Operators/Greater_than_or_equal)
+- [L'opérateur supérieur strict](/fr/docs/Web/JavaScript/Reference/Operators/Greater_than)
+- [L'opérateur inférieur strict](/fr/docs/Web/JavaScript/Reference/Operators/Less_than)
diff --git a/files/fr/web/javascript/reference/operators/logical_and/index.html b/files/fr/web/javascript/reference/operators/logical_and/index.html
deleted file mode 100644
index c40d0a1c2c..0000000000
--- a/files/fr/web/javascript/reference/operators/logical_and/index.html
+++ /dev/null
@@ -1,157 +0,0 @@
----
-title: ET logique (&&)
-slug: Web/JavaScript/Reference/Operators/Logical_AND
-tags:
-  - JavaScript
-  - Language feature
-  - Logical Operator
-  - Operator
-  - Reference
-browser-compat: javascript.operators.logical_and
-translation-of: Web/JavaScript/Reference/Operators/Logical_AND
----
-<div>{{jsSidebar("Operators")}}</div>
-
-<p>L'opérateur ET logique (<code>&amp;&amp;</code>) (conjonction logique) renvoie vrai si et uniquement si ses deux opérandes sont <code>true</code> ou équivalents à <code>true</code>. Il est généralement utilisé avec des valeurs booléennes et, quand c'est le cas, il renvoie une valeur booléenne. Toutefois, l'opérateur <code>&amp;&amp;</code> renvoie en fait la valeur d'un de ses opérandes et, si cet opérateur est utilisé avec des valeurs non-booléennes, il renverra une valeur non-booléenne.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/expressions-logical-and.html", "shorter")}}</div>
-
-<h2 id="syntax">Syntaxe</h2>
-
-<pre class="brush: js">
-<var>expr1</var> &amp;&amp; <var>expr2</var>
-</pre>
-
-<h2 id="description">Description</h2>
-
-<p>Si <code>expr1</code> peut être converti en <code>true</code>, le résultat sera <code>expr2</code> ; sinon, ce sera <code>expr1</code>.
-</p>
-
-<p>Si une valeur peut être convertie en <code>true</code>, elle peut être qualifiée de <a href="/fr/docs/Glossary/Truthy"><i>truthy</i></a>. Si une valeur peut être convertie en <code>false</code>, on la qualifiera alors de <a href="/fr/docs/Glossary/Falsy"><i>falsy</i></a>.</p>
-
-<p>Parmi les expressions qui peuvent être converties en <code>false</code>, on a :</p>
-
-<ul>
-  <li><code>null</code> ;</li>
-  <li><code>NaN</code> ;</li>
-  <li><code>0</code> ;</li>
-  <li>la chaîne de caractères vide (<code>""</code> ou <code>''</code> ou <code>``</code>) ;</li>
-  <li><code>undefined</code>.</li>
-</ul>
-
-<p>Bien que l'opérateur <code>&amp;&amp;</code> puisse être utilisé avec des opérandes qui ne soient pas des valeurs booléennes, il reste un opérateur booléen, car sa valeur de retour peut toujours être convertie en <a href="/fr/docs/Web/JavaScript/Data_structures#boolean_type">une valeur primitive booléenne</a>. Pour convertir explicitement la valeur de retour (ou tout expression de façon plus générale) dans sa valeur booléenne correspondante, on pourra utiliser un double <a href="/fr/docs/Web/JavaScript/Reference/Operators/Logical_NOT">opérateur NON (<code>!</code>)</a> ou le constructeur <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Boolean/Boolean"><code>Boolean()</code></a>.</p>
-
-<h3 id="short-circuit_evaluation">Évaluation en court-circuit</h3>
-
-<p>L'expression utilisant un ET logique est évaluée de gauche à droite. Le moteur cherche s'il est possible d'utiliser un court-circuit de la façon suivante :</p>
-
-<p><code>(une expression équivalente à faux) &amp;&amp; <var>expr</var></code> sera court-circuité pour fournir directement le résultat de l'expression équivalente à faux.</p>
-
-<p>Cette notion de court-circuit indique que la partie <code><var>expr</var></code> ci-avant <strong>n'est pas évaluée</strong>, tout effet de bord lié à cette évaluation n'aura pas lieu (par exemple, si <code><var>expr</var></code> est un appel de fonction, la fonction n'est pas appelée). Ce fonctionnement a lieu, car la valeur du résultat peut d'office être déterminée par l'évaluation du premier opérande. Par exemple :</p>
-
-<pre class="brush: js">
-function A(){
-  console.log('A a été appelée');
-  return false;
-}
-
-function B(){
-  console.log('B a été appelée');
-  return true;
-}
-
-console.log( A() &amp;&amp; B() );
-// affichera "A a été appelée" dans la console via l'appel de la fonction
-// puis affichera false (la valeur du résultat de l'expression avec l'opérateur)
-// on voit que la fonction B n'est pas du tout appelée
-</pre>
-
-<h3 id="operator_precedence">Précédence des opérateurs</h3>
-
-<p>Les expressions suivantes peuvent sembler équivalentes mais ne le sont pas. En effet, l'opérateur <code>&amp;&amp;</code> est exécuté avant l'opérateur <code>||</code> (voir <a href="/fr/docs/Web/JavaScript/Reference/Operators/Operator_Precedence">l'article sur la précédence des opérateurs</a>).</p>
-
-<pre class="brush: js">
-true || false &amp;&amp; false      // renvoie true, car &amp;&amp; est exécuté en premier
-(true || false) &amp;&amp; false    // renvoie false, car la précédence par défaut ne s'applique pas
-                                    // avec les parenthèses
-</pre>
-
-<h2 id="examples">Exemples</h2>
-
-<h3 id="using_AND">Utiliser le ET logique</h3>
-
-<p>Le code suivant illustre quelques usages de l'opérateur ET logique <code>&amp;&amp;</code>.</p>
-
-<pre class="brush: js">
-a1 = true   &amp;&amp; true       // t &amp;&amp; t renvoie true
-a2 = true   &amp;&amp; false      // t &amp;&amp; f renvoie false
-a3 = false  &amp;&amp; true       // f &amp;&amp; t renvoie false
-a4 = false  &amp;&amp; (3 == 4)   // f &amp;&amp; f renvoie false
-a5 = 'Chat' &amp;&amp; 'Chien'    // t &amp;&amp; t renvoie "Chien"
-a6 = false  &amp;&amp; 'Chat'     // f &amp;&amp; t renvoie false
-a7 = 'Chat' &amp;&amp; false      // t &amp;&amp; f renvoie false
-a8 = ''     &amp;&amp; false      // f &amp;&amp; f renvoie ""
-a9 = false  &amp;&amp; ''         // f &amp;&amp; f renvoie false
-</pre>
-
-<h3 id="conversion_rules_for_booleans">Règles de conversion booléennes</h3>
-
-<h4 id="converting_and_to_or">Convertir ET en OU</h4>
-
-<p>L'opération suivante, utilisant des <strong>booléens</strong> :</p>
-
-<pre class="brush: js">
-bCondition1 &amp;&amp; bCondition2
-</pre>
-
-<p>sera toujours équivalente à :</p>
-
-<pre class="brush: js">
-!(!bCondition1 || !bCondition2)
-</pre>
-
-<h4 id="converting_or_to_and">Convertir OU en ET</h4>
-
-<p>L'opération suivante, utilisant des <strong>booléens</strong> :</p>
-
-<pre class="brush: js">
-bCondition1 || bCondition2
-</pre>
-
-<p>sera toujours équivalente à :</p>
-
-<pre class="brush: js">
-!(!bCondition1 &amp;&amp; !bCondition2)
-</pre>
-
-<h3 id="removing_nested_parentheses">Retrait des parenthèses imbriquées</h3>
-
-<p>Les expressions logiques sont évaluées de gauche à droite, il est donc possible de retirer les parenthèses d'une expression complexe en suivant quelques règles.</p>
-
-<p>L'opération composite suivant, qui utilise des <strong>booléens</strong> :</p>
-
-<pre class="brush: js">
-bCondition1 || (bCondition2 &amp;&amp; bCondition3)
-</pre>
-
-<p>sera toujours égale à :</p>
-
-<pre class="brush: js">
-bCondition1 || bCondition2 &amp;&amp; bCondition3
-</pre>
-
-<h2 id="specifications">Spécifications</h2>
-
-<p>{{Specifications}}</p>
-
-<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
-
-<p>{{Compat}}</p>
-
-<h2 id="see_also">Voir aussi</h2>
-
-<ul>
-  <li><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Boolean"><code>Boolean</code></a></li>
-  <li><a href="/fr/docs/Glossary/Truthy"><i>Truthy</i></a></li>
-  <li><a href="/fr/docs/Glossary/Falsy"><i>Falsy</i></a></li>
-</ul>
diff --git a/files/fr/web/javascript/reference/operators/logical_and/index.md b/files/fr/web/javascript/reference/operators/logical_and/index.md
new file mode 100644
index 0000000000..ba907bd2c3
--- /dev/null
+++ b/files/fr/web/javascript/reference/operators/logical_and/index.md
@@ -0,0 +1,151 @@
+---
+title: ET logique (&&)
+slug: Web/JavaScript/Reference/Operators/Logical_AND
+tags:
+  - JavaScript
+  - Language feature
+  - Logical Operator
+  - Operator
+  - Reference
+browser-compat: javascript.operators.logical_and
+---
+{{jsSidebar("Operators")}}
+
+L'opérateur ET logique (`&&`) (conjonction logique) renvoie vrai si et uniquement si ses deux opérandes sont `true` ou équivalents à `true`. Il est généralement utilisé avec des valeurs booléennes et, quand c'est le cas, il renvoie une valeur booléenne. Toutefois, l'opérateur `&&` renvoie en fait la valeur d'un de ses opérandes et, si cet opérateur est utilisé avec des valeurs non-booléennes, il renverra une valeur non-booléenne.
+
+{{EmbedInteractiveExample("pages/js/expressions-logical-and.html", "shorter")}}
+
+## Syntaxe
+
+```js
+expr1 && expr2
+```
+
+## Description
+
+Si `expr1` peut être converti en `true`, le résultat sera `expr2` ; sinon, ce sera `expr1`.
+
+Si une valeur peut être convertie en `true`, elle peut être qualifiée de [_truthy_](/fr/docs/Glossary/Truthy). Si une valeur peut être convertie en `false`, on la qualifiera alors de [_falsy_](/fr/docs/Glossary/Falsy).
+
+Parmi les expressions qui peuvent être converties en `false`, on a :
+
+- `null` ;
+- `NaN` ;
+- `0` ;
+- la chaîne de caractères vide (`""` ou `''` ou ` `` `) ;
+- `undefined`.
+
+Bien que l'opérateur `&&` puisse être utilisé avec des opérandes qui ne soient pas des valeurs booléennes, il reste un opérateur booléen, car sa valeur de retour peut toujours être convertie en [une valeur primitive booléenne](/fr/docs/Web/JavaScript/Data_structures#boolean_type). Pour convertir explicitement la valeur de retour (ou tout expression de façon plus générale) dans sa valeur booléenne correspondante, on pourra utiliser un double [opérateur NON (`!`)](/fr/docs/Web/JavaScript/Reference/Operators/Logical_NOT) ou le constructeur [`Boolean()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Boolean/Boolean).
+
+### Évaluation en court-circuit
+
+L'expression utilisant un ET logique est évaluée de gauche à droite. Le moteur cherche s'il est possible d'utiliser un court-circuit de la façon suivante :
+
+`(une expression équivalente à faux) && expr` sera court-circuité pour fournir directement le résultat de l'expression équivalente à faux.
+
+Cette notion de court-circuit indique que la partie `expr` ci-avant **n'est pas évaluée**, tout effet de bord lié à cette évaluation n'aura pas lieu (par exemple, si `expr` est un appel de fonction, la fonction n'est pas appelée). Ce fonctionnement a lieu, car la valeur du résultat peut d'office être déterminée par l'évaluation du premier opérande. Par exemple :
+
+```js
+function A(){
+  console.log('A a été appelée');
+  return false;
+}
+
+function B(){
+  console.log('B a été appelée');
+  return true;
+}
+
+console.log( A() && B() );
+// affichera "A a été appelée" dans la console via l'appel de la fonction
+// puis affichera false (la valeur du résultat de l'expression avec l'opérateur)
+// on voit que la fonction B n'est pas du tout appelée
+```
+
+### Précédence des opérateurs
+
+Les expressions suivantes peuvent sembler équivalentes mais ne le sont pas. En effet, l'opérateur `&&` est exécuté avant l'opérateur `||` (voir [l'article sur la précédence des opérateurs](/fr/docs/Web/JavaScript/Reference/Operators/Operator_Precedence)).
+
+```js
+true || false && false      // renvoie true, car && est exécuté en premier
+(true || false) && false    // renvoie false, car la précédence par défaut ne s'applique pas
+                                    // avec les parenthèses
+```
+
+## Exemples
+
+### Utiliser le ET logique
+
+Le code suivant illustre quelques usages de l'opérateur ET logique `&&`.
+
+```js
+a1 = true   && true       // t && t renvoie true
+a2 = true   && false      // t && f renvoie false
+a3 = false  && true       // f && t renvoie false
+a4 = false  && (3 == 4)   // f && f renvoie false
+a5 = 'Chat' && 'Chien'    // t && t renvoie "Chien"
+a6 = false  && 'Chat'     // f && t renvoie false
+a7 = 'Chat' && false      // t && f renvoie false
+a8 = ''     && false      // f && f renvoie ""
+a9 = false  && ''         // f && f renvoie false
+```
+
+### Règles de conversion booléennes
+
+#### Convertir ET en OU
+
+L'opération suivante, utilisant des **booléens** :
+
+```js
+bCondition1 && bCondition2
+```
+
+sera toujours équivalente à :
+
+```js
+!(!bCondition1 || !bCondition2)
+```
+
+#### Convertir OU en ET
+
+L'opération suivante, utilisant des **booléens** :
+
+```js
+bCondition1 || bCondition2
+```
+
+sera toujours équivalente à :
+
+```js
+!(!bCondition1 && !bCondition2)
+```
+
+### Retrait des parenthèses imbriquées
+
+Les expressions logiques sont évaluées de gauche à droite, il est donc possible de retirer les parenthèses d'une expression complexe en suivant quelques règles.
+
+L'opération composite suivant, qui utilise des **booléens** :
+
+```js
+bCondition1 || (bCondition2 && bCondition3)
+```
+
+sera toujours égale à :
+
+```js
+bCondition1 || bCondition2 && bCondition3
+```
+
+## Spécifications
+
+{{Specifications}}
+
+## Compatibilité des navigateurs
+
+{{Compat}}
+
+## Voir aussi
+
+- [`Boolean`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Boolean)
+- [_Truthy_](/fr/docs/Glossary/Truthy)
+- [_Falsy_](/fr/docs/Glossary/Falsy)
diff --git a/files/fr/web/javascript/reference/operators/logical_and_assignment/index.html b/files/fr/web/javascript/reference/operators/logical_and_assignment/index.html
deleted file mode 100644
index e788d794d6..0000000000
--- a/files/fr/web/javascript/reference/operators/logical_and_assignment/index.html
+++ /dev/null
@@ -1,78 +0,0 @@
----
-title: Affectation après ET logique (&&=)
-slug: Web/JavaScript/Reference/Operators/Logical_AND_assignment
-tags:
-  - JavaScript
-  - Language feature
-  - Logical assignment
-  - Operator
-  - Reference
-browser-compat: javascript.operators.logical_and_assignment
-translation-of: Web/JavaScript/Reference/Operators/Logical_AND_assignment
----
-<div>{{jsSidebar("Operators")}}</div>
-
-<p>L'opérateur d'affectation après ET logique (<code>x &amp;&amp;= y</code>) n'affecte la valeur de l'opérande droit uniquement si l'opérande gauche est <a href="/fr/docs/Glossary/Truthy">équivalent à vrai (<i>truthy</i>)</a>.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/expressions-logical-and-assignment.html")}}</div>
-
-<h2 id="syntax">Syntaxe</h2>
-
-<pre class="brush: js">
-<var>expr1</var> &amp;&amp;= <var>expr2</var>
-</pre>
-
-<h2 id="description">Description</h2>
-
-<h3 id="short-circuit_evaluation">Évaluation en court-circuit</h3>
-
-<p>L'opérateur <a href="/fr/docs/Web/JavaScript/Reference/Operators/Logical_AND">ET logique</a> est évalué de gauche à droite et le moteur vérifie s'il peut utiliser un court-circuit avec la régle suivante :</p>
-
-<p><code>(une expression équivalente à faux) &amp;&amp; expr</code> sera court-circuitée pour fournir directement l'expression équivalente à faux.</p>
-
-<p>Ce « court-circuit » indique que <code><var>expr</var></code> <strong>n'est pas évaluée</strong>. Tout effet de bord lié à cette évaluation n'aura pas lieu (par exemple si <code><var>expr</var></code> est un appel de fonction, la fonction n'est pas exécutée).</p>
-
-<p>L'opérateur d'affectation après ET logique utilise également ce court-circuit et <code>x &amp;&amp;= y</code> est donc équivalent à :</p>
-
-<pre class="brush: js">
-x &amp;&amp; (x = y);
-</pre>
-
-<p>En revanche, <strong>il n'est pas équivalent</strong> à ce qui suit, et qui effectue quoi qu'il arrive une affectation :</p>
-
-<pre class="brush: js example-bad">
-x = x &amp;&amp; y;
-</pre>
-
-<h2 id="examples">Exemples</h2>
-
-<h3 id="using_logical_and_assignment">Utiliser l'affectation après ET logique</h3>
-
-<pre class="brush: js">
-let x = 0;
-let y = 1;
-
-x &amp;&amp;= 0; // 0
-x &amp;&amp;= 1; // 0
-y &amp;&amp;= 1; // 1
-y &amp;&amp;= 0; // 0
-</pre>
-
-<h2 id="specifications">Spécifications</h2>
-
-<p>{{Specifications}}</p>
-
-<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
-
-<p>{{Compat}}</p>
-
-<h2 id="see_also">Voir aussi</h2>
-
-<ul>
-  <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Logical_AND">L'opérateur ET logique (&amp;&amp;)</a></li>
-  <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator">L'opérateur de coalescence des nuls (<code>??</code>)</a></li>
-  <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Bitwise_AND_assignment">L'opérateur d'affectation après ET binaire (<code>&amp;=</code>)</a></li>
-  <li><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Boolean">Le type <code>Boolean</code></a>
-  <li><a href="/fr/docs/Glossary/Truthy"><i>Truthy</i></a></li>
-  <li><a href="/fr/docs/Glossary/Falsy"><i>Falsy</i></a></li>
-</ul>
diff --git a/files/fr/web/javascript/reference/operators/logical_and_assignment/index.md b/files/fr/web/javascript/reference/operators/logical_and_assignment/index.md
new file mode 100644
index 0000000000..167b775d28
--- /dev/null
+++ b/files/fr/web/javascript/reference/operators/logical_and_assignment/index.md
@@ -0,0 +1,75 @@
+---
+title: Affectation après ET logique (&&=)
+slug: Web/JavaScript/Reference/Operators/Logical_AND_assignment
+tags:
+  - JavaScript
+  - Language feature
+  - Logical assignment
+  - Operator
+  - Reference
+browser-compat: javascript.operators.logical_and_assignment
+---
+{{jsSidebar("Operators")}}
+
+L'opérateur d'affectation après ET logique (`x &&= y`) n'affecte la valeur de l'opérande droit uniquement si l'opérande gauche est [équivalent à vrai (_truthy_)](/fr/docs/Glossary/Truthy).
+
+{{EmbedInteractiveExample("pages/js/expressions-logical-and-assignment.html")}}
+
+## Syntaxe
+
+```js
+expr1 &&= expr2
+```
+
+## Description
+
+### Évaluation en court-circuit
+
+L'opérateur [ET logique](/fr/docs/Web/JavaScript/Reference/Operators/Logical_AND) est évalué de gauche à droite et le moteur vérifie s'il peut utiliser un court-circuit avec la régle suivante :
+
+`(une expression équivalente à faux) && expr` sera court-circuitée pour fournir directement l'expression équivalente à faux.
+
+Ce « court-circuit » indique que `expr` **n'est pas évaluée**. Tout effet de bord lié à cette évaluation n'aura pas lieu (par exemple si `expr` est un appel de fonction, la fonction n'est pas exécutée).
+
+L'opérateur d'affectation après ET logique utilise également ce court-circuit et `x &&= y` est donc équivalent à :
+
+```js
+x && (x = y);
+```
+
+En revanche, **il n'est pas équivalent** à ce qui suit, et qui effectue quoi qu'il arrive une affectation :
+
+```js example-bad
+x = x && y;
+```
+
+## Exemples
+
+### Utiliser l'affectation après ET logique
+
+```js
+let x = 0;
+let y = 1;
+
+x &&= 0; // 0
+x &&= 1; // 0
+y &&= 1; // 1
+y &&= 0; // 0
+```
+
+## Spécifications
+
+{{Specifications}}
+
+## Compatibilité des navigateurs
+
+{{Compat}}
+
+## Voir aussi
+
+- [L'opérateur ET logique (&&)](/fr/docs/Web/JavaScript/Reference/Operators/Logical_AND)
+- [L'opérateur de coalescence des nuls (`??`)](/fr/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator)
+- [L'opérateur d'affectation après ET binaire (`&=`)](/fr/docs/Web/JavaScript/Reference/Operators/Bitwise_AND_assignment)
+- [Le type `Boolean`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Boolean)
+- [_Truthy_](/fr/docs/Glossary/Truthy)
+- [_Falsy_](/fr/docs/Glossary/Falsy)
diff --git a/files/fr/web/javascript/reference/operators/logical_not/index.html b/files/fr/web/javascript/reference/operators/logical_not/index.html
deleted file mode 100644
index da1f26ea14..0000000000
--- a/files/fr/web/javascript/reference/operators/logical_not/index.html
+++ /dev/null
@@ -1,95 +0,0 @@
----
-title: NON logique (!)
-slug: Web/JavaScript/Reference/Operators/Logical_NOT
-tags:
-  - JavaScript
-  - Language feature
-  - Logical Operator
-  - Operator
-  - Reference
-browser-compat: javascript.operators.logical_not
-translation-of: Web/JavaScript/Reference/Operators/Logical_NOT
----
-<div>{{jsSidebar("Operators")}}</div>
-
-<p>L'opérateur logique NON (<code>!</code>) prend l'opposé logique de la valeur fournie par son opérande. Vrai devient faux et vice versa. Il est généralement utilisé avec les <a href="/fr/docs/Web/JavaScript/Data_structures#boolean_type">booléens</a>. Lorsque cet opérateur est utilisé avec une valeur non-booléenne, il renvoie <code>false</code> si son opérande peut être converti en <code>true</code> et <code>true</code> sinon.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/expressions-logical-not.html", "shorter")}}</div>
-
-<h2 id="syntax">Syntaxe</h2>
-
-<pre class="brush: js">
-!<var>expr</var>
-</pre>
-
-<h2 id="description">Description</h2>
-
-<p>Cet opérateur renvoie <code>false</code> si son opérande peut être converti en <code>true</code> ; sinon il renvoie <code>true</code>.</p>
-
-<p>Si une valeur peut être convertie en <code>true</code>, on dira en anglais qu'elle est <a href="/fr/docs/Glossary/Truthy"><i>truthy</i></a>. À l'inverse, si elle peut être convertie en <code>false</code>, on dira en anglais qu'elle est <a href="/fr/docs/Glossary/Falsy"><i>falsy</i></a>.</p>
-
-<p>Voici des exemples d'expression qui peuvent être converties en <code>false</code> :</p>
-
-<ul>
-  <li><code>null</code> ;</li>
-  <li><code>NaN</code> ;</li>
-  <li><code>0</code> ;</li>
-  <li>la chaîne vide (<code>""</code> ou <code>''</code> ou <code>``</code>) ;</li>
-  <li><code>undefined</code>.</li>
-</ul>
-
-<p>Bien que l'opérateur <code>!</code> puisse être utilisé avec des opérandes non booléens, sa valeur de retour sera toujours un <a href="/fr/docs/Web/JavaScript/Data_structures#boolean_type">booléen</a>. Pour convertir une valeur (ou une expression) en sa valeur booléenne correspondante, on pourra utiliser un double NON ou le constructeur <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Boolean"><code>Boolean</code></a>.</p>
-
-<h2 id="examples">Exemples</h2>
-
-<h3 id="using_NOT">Utiliser NON</h3>
-
-<p>Le code suivant illustre l'utilisation de l'opérateur <code>!</code> pour le NON logique.</p>
-
-<pre class="brush: js">
-let n1 = !true     // !t renvoie false
-let n2 = !false    // !f renvoie true
-let n3 = !''       // !f renvoie true
-let n4 = !'Cat'    // !t renvoie false
-</pre>
-
-<h3 id="Double_NOT_!!">Double NON (<code>!!</code>)</h3>
-
-<p>Il est possible d'utiliser deux opérateurs NON à la suite pour convertir n'importe quelle valeur en booléen selon qu'elle est <a href="/fr/docs/Glossary/Truthy"><i>truthy</i></a> ou <a href="/fr/docs/Glossary/Falsy"><i>falsy</i></a>.</p>
-
-<p>Une conversion équivalente pourra être obtenue avec le constructeur <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Boolean"><code>Boolean</code></a>.</p>
-
-<pre class="brush: js">
-let n1 = !!true                   // !!truthy renvoie true
-let n2 = !!{}                     // !!truthy renvoie true : <strong>tout</strong> objet est truthy
-let n3 = !!(new Boolean(false))   // Attention, un objet Boolean est toujours truthy !
-let n4 = !!false                  // !!falsy renvoie false
-let n5 = !!""                     // !!falsy renvoie false
-let n6 = !!Boolean(false)         // !!falsy renvoie false
-</pre>
-
-<h3 id="Converting_between_NOTs">Équivalence booléenne de la double négation</h3>
-
-<p>L'expression qui suit, utilisée avec des booléens :</p>
-
-<pre class="brush: js">!!bCondition</pre>
-
-<p>est toujours égale à :</p>
-
-<pre class="brush: js">bCondition</pre>
-
-<h2 id="specifications">Spécifications</h2>
-
-<p>{{Specifications}}</p>
-
-<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
-
-<p>{{Compat}}</p>
-
-<h2 id="see_also">Voir aussi</h2>
-
-<ul>
-  <li>{{jsxref("Boolean")}}</li>
-  <li>{{Glossary("Truthy")}}</li>
-  <li>{{Glossary("Falsy")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/operators/logical_not/index.md b/files/fr/web/javascript/reference/operators/logical_not/index.md
new file mode 100644
index 0000000000..783ba35fb0
--- /dev/null
+++ b/files/fr/web/javascript/reference/operators/logical_not/index.md
@@ -0,0 +1,94 @@
+---
+title: NON logique (!)
+slug: Web/JavaScript/Reference/Operators/Logical_NOT
+tags:
+  - JavaScript
+  - Language feature
+  - Logical Operator
+  - Operator
+  - Reference
+browser-compat: javascript.operators.logical_not
+---
+{{jsSidebar("Operators")}}
+
+L'opérateur logique NON (`!`) prend l'opposé logique de la valeur fournie par son opérande. Vrai devient faux et vice versa. Il est généralement utilisé avec les [booléens](/fr/docs/Web/JavaScript/Data_structures#boolean_type). Lorsque cet opérateur est utilisé avec une valeur non-booléenne, il renvoie `false` si son opérande peut être converti en `true` et `true` sinon.
+
+{{EmbedInteractiveExample("pages/js/expressions-logical-not.html", "shorter")}}
+
+## Syntaxe
+
+```js
+!expr
+```
+
+## Description
+
+Cet opérateur renvoie `false` si son opérande peut être converti en `true` ; sinon il renvoie `true`.
+
+Si une valeur peut être convertie en `true`, on dira en anglais qu'elle est [_truthy_](/fr/docs/Glossary/Truthy). À l'inverse, si elle peut être convertie en `false`, on dira en anglais qu'elle est [_falsy_](/fr/docs/Glossary/Falsy).
+
+Voici des exemples d'expression qui peuvent être converties en `false` :
+
+- `null` ;
+- `NaN` ;
+- `0` ;
+- la chaîne vide (`""` ou `''` ou ` `` `) ;
+- `undefined`.
+
+Bien que l'opérateur `!` puisse être utilisé avec des opérandes non booléens, sa valeur de retour sera toujours un [booléen](/fr/docs/Web/JavaScript/Data_structures#boolean_type). Pour convertir une valeur (ou une expression) en sa valeur booléenne correspondante, on pourra utiliser un double NON ou le constructeur [`Boolean`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Boolean).
+
+## Exemples
+
+### Utiliser NON
+
+Le code suivant illustre l'utilisation de l'opérateur `!` pour le NON logique.
+
+```js
+let n1 = !true     // !t renvoie false
+let n2 = !false    // !f renvoie true
+let n3 = !''       // !f renvoie true
+let n4 = !'Cat'    // !t renvoie false
+```
+
+### Double NON (`!!`)
+
+Il est possible d'utiliser deux opérateurs NON à la suite pour convertir n'importe quelle valeur en booléen selon qu'elle est [_truthy_](/fr/docs/Glossary/Truthy) ou [_falsy_](/fr/docs/Glossary/Falsy).
+
+Une conversion équivalente pourra être obtenue avec le constructeur [`Boolean`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Boolean).
+
+```js
+let n1 = !!true                   // !!truthy renvoie true
+let n2 = !!{}                     // !!truthy renvoie true : tout objet est truthy
+let n3 = !!(new Boolean(false))   // Attention, un objet Boolean est toujours truthy !
+let n4 = !!false                  // !!falsy renvoie false
+let n5 = !!""                     // !!falsy renvoie false
+let n6 = !!Boolean(false)         // !!falsy renvoie false
+```
+
+### Équivalence booléenne de la double négation
+
+L'expression qui suit, utilisée avec des booléens :
+
+```js
+!!bCondition
+```
+
+est toujours égale à :
+
+```js
+bCondition
+```
+
+## Spécifications
+
+{{Specifications}}
+
+## Compatibilité des navigateurs
+
+{{Compat}}
+
+## Voir aussi
+
+- {{jsxref("Boolean")}}
+- {{Glossary("Truthy")}}
+- {{Glossary("Falsy")}}
diff --git a/files/fr/web/javascript/reference/operators/logical_nullish_assignment/index.html b/files/fr/web/javascript/reference/operators/logical_nullish_assignment/index.html
deleted file mode 100644
index 4860c3558b..0000000000
--- a/files/fr/web/javascript/reference/operators/logical_nullish_assignment/index.html
+++ /dev/null
@@ -1,78 +0,0 @@
----
-title: Affectation après coalescence des nuls (??=)
-slug: Web/JavaScript/Reference/Operators/Logical_nullish_assignment
-tags:
-  - Assignment operator
-  - JavaScript
-  - Language feature
-  - Logical Operator
-  - Operator
-  - Reference
-browser-compat: javascript.operators.logical_nullish_assignment
-translation-of: Web/JavaScript/Reference/Operators/Logical_nullish_assignment
----
-<div>{{jsSidebar("Operators")}}</div>
-
-<p>L'opérateur d'affectation après coalescence des nuls (<code>x ??= y</code>) effectue une affectation uniquement si l'opérande de gauche (<code>x</code>) vaut <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/null"><code>null</code></a> ou <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/null"><code>undefined</code></a>.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/expressions-logical-nullish-assignment.html")}}</div>
-
-<h2 id="syntax">Syntaxe</h2>
-
-<pre class="brush: js">
-<var>expr1</var> ??= <var>expr2</var>
-</pre>
-
-<h2 id="description">Description</h2>
-
-<h3 id="short-circuit_evaluation">Évaluation en court-circuit</h3>
-
-<p>L'opérateur de <a href="/fr/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator">coalescence des nuls</a> est évalué de gauche à droite et le moteur teste s'il est possible d'utiliser un court-circuit grâce à la règle suivante :</p>
-
-<p><code>(une expression qui renvoie null ou undefined) ?? expr</code> sera court-circuité pour fournir l'opérande gauche si celle-ci ne vaut ni <code>null</code> ni <code>undefined</code>.</p>
-
-<p>Ce « court-circuit » implique que l'expression <code><var>expr</var></code> <strong>n'est pas évaluée</strong> si ce n'est pas nécessaire. Ainsi, tout effet de bord lié à celle-ci n'aura pas lieu (par exemple, si <code><var>expr</var></code> appelle une fonction, cette dernière n'est pas exécutée).</p>
-
-<p>L'opérateur d'affectation après coalescence des nuls obéit également à cette logique. Ainsi, <code>x ??= y</code> sera équivalent à :</p>
-
-<pre class="brush: js">
-x ?? (x = y);
-</pre>
-
-<p>En revanche, ce ne sera pas équivalent à l'expression suivante qui effectue une affectation quoi qu'il arrive :</p>
-
-<pre class="brush: js example-bad">
-x = x ?? y;
-</pre>
-
-<h2 id="examples">Exemples</h2>
-
-<h3 id="using_logical_nullish_assignment">Utiliser l'opérateur d'affectation après coalescence des nuls</h3>
-
-<pre class="brush: js">
-function config(options) {
-  options.duration ??= 100;
-  options.speed ??= 25;
-  return options;
-}
-
-config({ duration: 125 }); // { duration: 125, speed: 25 }
-config({}); // { duration: 100, speed: 25 }
-</pre>
-
-<h2 id="specifications">Spécifications</h2>
-
-<p>{{Specifications}}</p>
-
-<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
-
-<p>{{Compat}}</p>
-
-<h2 id="see_also">Voir aussi</h2>
-
-<ul>
-  <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator">L'opérateur de coalescence des nuls (<code>??</code>)</a></li>
-  <li><a href="/fr/docs/Glossary/Nullish"><i>Nullish</i></a></li>
-  <li><a href="/fr/docs/Glossary/Truthy"><i>Truthy</i></a></li>
-  <li><a href="/fr/docs/Glossary/Falsy"><i>Falsy</i></a></li>
-</ul>
diff --git a/files/fr/web/javascript/reference/operators/logical_nullish_assignment/index.md b/files/fr/web/javascript/reference/operators/logical_nullish_assignment/index.md
new file mode 100644
index 0000000000..907a4722a1
--- /dev/null
+++ b/files/fr/web/javascript/reference/operators/logical_nullish_assignment/index.md
@@ -0,0 +1,75 @@
+---
+title: Affectation après coalescence des nuls (??=)
+slug: Web/JavaScript/Reference/Operators/Logical_nullish_assignment
+tags:
+  - Assignment operator
+  - JavaScript
+  - Language feature
+  - Logical Operator
+  - Operator
+  - Reference
+browser-compat: javascript.operators.logical_nullish_assignment
+---
+{{jsSidebar("Operators")}}
+
+L'opérateur d'affectation après coalescence des nuls (`x ??= y`) effectue une affectation uniquement si l'opérande de gauche (`x`) vaut [`null`](/fr/docs/Web/JavaScript/Reference/Global_Objects/null) ou [`undefined`](/fr/docs/Web/JavaScript/Reference/Global_Objects/null).
+
+{{EmbedInteractiveExample("pages/js/expressions-logical-nullish-assignment.html")}}
+
+## Syntaxe
+
+```js
+expr1 ??= expr2
+```
+
+## Description
+
+### Évaluation en court-circuit
+
+L'opérateur de [coalescence des nuls](/fr/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator) est évalué de gauche à droite et le moteur teste s'il est possible d'utiliser un court-circuit grâce à la règle suivante :
+
+`(une expression qui renvoie null ou undefined) ?? expr` sera court-circuité pour fournir l'opérande gauche si celle-ci ne vaut ni `null` ni `undefined`.
+
+Ce « court-circuit » implique que l'expression `expr` **n'est pas évaluée** si ce n'est pas nécessaire. Ainsi, tout effet de bord lié à celle-ci n'aura pas lieu (par exemple, si `expr` appelle une fonction, cette dernière n'est pas exécutée).
+
+L'opérateur d'affectation après coalescence des nuls obéit également à cette logique. Ainsi, `x ??= y` sera équivalent à :
+
+```js
+x ?? (x = y);
+```
+
+En revanche, ce ne sera pas équivalent à l'expression suivante qui effectue une affectation quoi qu'il arrive :
+
+```js example-bad
+x = x ?? y;
+```
+
+## Exemples
+
+### Utiliser l'opérateur d'affectation après coalescence des nuls
+
+```js
+function config(options) {
+  options.duration ??= 100;
+  options.speed ??= 25;
+  return options;
+}
+
+config({ duration: 125 }); // { duration: 125, speed: 25 }
+config({}); // { duration: 100, speed: 25 }
+```
+
+## Spécifications
+
+{{Specifications}}
+
+## Compatibilité des navigateurs
+
+{{Compat}}
+
+## Voir aussi
+
+- [L'opérateur de coalescence des nuls (`??`)](/fr/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator)
+- [_Nullish_](/fr/docs/Glossary/Nullish)
+- [_Truthy_](/fr/docs/Glossary/Truthy)
+- [_Falsy_](/fr/docs/Glossary/Falsy)
diff --git a/files/fr/web/javascript/reference/operators/logical_or/index.html b/files/fr/web/javascript/reference/operators/logical_or/index.html
deleted file mode 100644
index 1ea61c09f6..0000000000
--- a/files/fr/web/javascript/reference/operators/logical_or/index.html
+++ /dev/null
@@ -1,158 +0,0 @@
----
-title: OU logique (||)
-slug: Web/JavaScript/Reference/Operators/Logical_OR
-tags:
-  - JavaScript
-  - Language feature
-  - Logical Operator
-  - Operator
-  - Reference
-browser-compat: javascript.operators.logical_or
-translation-of: Web/JavaScript/Reference/Operators/Logical_OR
----
-<div>{{jsSidebar("Operators")}}</div>
-
-<p>L'opérateur OU logique (<code>||</code>) (disjonction logique) renvoie vrai si et seulement si au moins un de ses opérandes est vrai. Cet opérateur est généralement utilisé avec des valeurs booléennes et, lorsque c'est le cas, il renvoie une valeur booléenne. Toutefois, <code>||</code> peut aussi être utilisé avec des valeurs non-booléennes et, dans ce cas, renverra une valeur non-booléenne.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/expressions-logical-or.html", "shorter")}}</div>
-
-<h2 id="syntax">Syntax</h2>
-
-<pre class="brush: js">
-<var>expr1</var> || <var>expr2</var>
-</pre>
-
-<h2 id="description">Description</h2>
-
-<p>Si <code>expr1</code> peut être converti en <code>true</code>, c'est <code>expr1</code> qui sera renvoyé, sinon ce sera <code>expr2</code>.</p>
-
-<p>Si une valeur peut être convertie en <code>true</code>, elle peut être qualifiée de <a href="/fr/docs/Glossary/Truthy"><i>truthy</i></a>. Si une valeur peut être convertie en <code>false</code>, on la qualifiera alors de <a href="/fr/docs/Glossary/Falsy"><i>falsy</i></a>.</p>
-
-<p>Parmi les expressions qui peuvent être converties en <code>false</code>, on a :</p>
-
-<ul>
-  <li><code>null</code> ;</li>
-  <li><code>NaN</code> ;</li>
-  <li><code>0</code> ;</li>
-  <li>la chaîne de caractères vide (<code>""</code> ou <code>''</code> ou <code>``</code>) ;</li>
-  <li><code>undefined</code>.</li>
-</ul>
-
-<p>Bien que l'opérateur <code>||</code> puisse être utilisé avec des opérandes qui ne soient pas des valeurs booléennes, il reste un opérateur booléen, car sa valeur de retour peut toujours être convertie en <a href="/fr/docs/Web/JavaScript/Data_structures#boolean_type">une valeur primitive booléenne</a>. Pour convertir explicitement la valeur de retour (ou tout expression de façon plus générale) dans sa valeur booléenne correspondante, on pourra utiliser un double <a href="/fr/docs/Web/JavaScript/Reference/Operators/Logical_NOT">opérateur NON (<code>!</code>)</a> ou le constructeur <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Boolean/Boolean"><code>Boolean()</code></a>.</p>
-
-<h3 id="short-circuit_evaluation">Évaluation en court-circuit</h3>
-
-<p>L'expression utilisant un OU logique est évaluée de gauche à droite. Le moteur cherche s'il est possible d'utiliser un court-circuit de la façon suivante :</p>
-
-<p><code>(une expression équivalente à vrai) || <var>expr</var></code> sera court-circuité pour fournir directement le résultat de l'expression équivalente à vrai.</p>
-
-<p>Cette notion de court-circuit indique que la partie <code><var>expr</var></code> ci-avant <strong>n'est pas évaluée</strong>, tout effet de bord lié à cette évaluation n'aura pas lieu (par exemple, si <code><var>expr</var></code> est un appel de fonction, la fonction n'est pas appelée). Ce fonctionnement a lieu, car la valeur du résultat peut d'office être déterminée par l'évaluation du premier opérande. Par exemple :</p>
-
-<pre class="brush: js">
-function A(){
-  console.log('A a été appelée');
-  return false;
-}
-
-function B(){
-  console.log('B a été appelée');
-  return true;
-}
-
-console.log( B() || A() );
-// affichera "B a été appelée" dans la console via l'appel de la fonction
-// puis affichera true (la valeur du résultat de l'expression avec l'opérateur)
-// on voit que la fonction A n'est pas du tout appelée
-</pre>
-
-<h3 id="operator_precedence">Précédence des opérateurs</h3>
-
-<p>Les expressions suivantes peuvent sembler équivalentes mais ne le sont pas. En effet, l'opérateur <code>&amp;&amp;</code> est exécuté avant l'opérateur <code>||</code> (voir <a href="/fr/docs/Web/JavaScript/Reference/Operators/Operator_Precedence">l'article sur la précédence des opérateurs</a>).</p>
-
-<pre class="brush: js">
-true || false &amp;&amp; false      // renvoie true, car &amp;&amp; est exécuté en premier
-(true || false) &amp;&amp; false    // renvoie false, car la précédence par défaut ne s'applique pas
-                                    // avec les parenthèses
-</pre>
-
-<h2 id="examples">Exemples</h2>
-
-<h3 id="using_or">Utiliser le OU logique</h3>
-
-<p>Le code suivant illustre quelques usages de l'opérateur OU logique <code>||</code>.</p>
-
-<pre class="brush: js">
-o1 = true   || true      // t || t renvoie true
-o2 = false  || true      // f || t renvoie true
-o3 = true   || false     // t || f renvoie true
-o4 = false  || (3 == 4)  // f || f renvoie false
-o5 = 'Chat' || 'Chien'   // t || t renvoie "Chat"
-o6 = false  || 'Chat'    // f || t renvoie "Chat"
-o7 = 'Chat' || false     // t || f renvoie "Chat"
-o8 = ''     || false     // f || f renvoie false
-o9 = false  || ''        // f || f renvoie ""
-o10 = false || varObject // f || object renvoie varObject
-</pre>
-
-<div class="notecard note">
-  <p><strong>Note :</strong> Si vous utilisez cet opérateur afin de fournir une valeur par défaut à une variable. Soyez conscient⋅e qu'une valeur équivalente à <code>false</code> ne pourra pas être utilisée ainsi. Si vous souhaitez uniquement écarter <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/null"><code>null</code></a> ou <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/undefined"><code>undefined</code></a>, privilégiez l'utilisation de <a href="/fr/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator">l'opérateur de coalescence des nuls</a>.</p>
-</div>
-
-<h3 id="conversion_rules_for_booleans">Règles de conversion booléennes</h3>
-
-<h4 id="converting_and_to_or">Convertir ET en OU</h4>
-
-<p>L'opération suivante, utilisant des <strong>booléens</strong> :</p>
-
-<pre class="brush: js">bCondition1 &amp;&amp; bCondition2</pre>
-
-<p>sera toujours équivalente à :</p>
-
-<pre class="brush: js">
-!(!bCondition1 || !bCondition2)
-</pre>
-
-<h4 id="converting_or_to_and">Convertir OU en ET</h4>
-
-<p>L'opération suivante, utilisant des <strong>booléens</strong> :</p>
-
-<pre class="brush: js">bCondition1 || bCondition2</pre>
-
-<p>sera toujours équivalente à :</p>
-
-<pre class="brush: js">
-!(!bCondition1 &amp;&amp; !bCondition2)
-</pre>
-
-<h3 id="removing_nested_parentheses">Retrait des parenthèses imbriquées</h3>
-
-<p>Les expressions logiques sont évaluées de gauche à droite, il est donc possible de retirer les parenthèses d'une expression complexe en suivant quelques règles.</p>
-
-<p>L'opération composite suivante, utilisant des <strong>booléens</strong> :</p>
-
-<pre class="brush: js">
-bCondition1 &amp;&amp; (bCondition2 || bCondition3)
-</pre>
-
-<p>sera toujours équivalente à :</p>
-
-<pre class="brush: js">
-!(!bCondition1 || !bCondition2 &amp;&amp; !bCondition3)
-</pre>
-
-<h2 id="specifications">Spécifications</h2>
-
-<p>{{Specifications}}</p>
-
-<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
-
-<p>{{Compat}}</p>
-
-<h2 id="see_also">Voir aussi</h2>
-
-<ul>
-  <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator">L'opérateur de coalescence des nuls (<code>??</code>)</a></li>
-  <li><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Boolean"><code>Boolean</code></a></li>
-  <li><a href="/fr/docs/Glossary/Truthy"><i>Truthy</i></a></li>
-  <li><a href="/fr/docs/Glossary/Falsy"><i>Falsy</i></a></li>
-</ul>
diff --git a/files/fr/web/javascript/reference/operators/logical_or/index.md b/files/fr/web/javascript/reference/operators/logical_or/index.md
new file mode 100644
index 0000000000..cb78f16e10
--- /dev/null
+++ b/files/fr/web/javascript/reference/operators/logical_or/index.md
@@ -0,0 +1,155 @@
+---
+title: OU logique (||)
+slug: Web/JavaScript/Reference/Operators/Logical_OR
+tags:
+  - JavaScript
+  - Language feature
+  - Logical Operator
+  - Operator
+  - Reference
+browser-compat: javascript.operators.logical_or
+---
+{{jsSidebar("Operators")}}
+
+L'opérateur OU logique (`||`) (disjonction logique) renvoie vrai si et seulement si au moins un de ses opérandes est vrai. Cet opérateur est généralement utilisé avec des valeurs booléennes et, lorsque c'est le cas, il renvoie une valeur booléenne. Toutefois, `||` peut aussi être utilisé avec des valeurs non-booléennes et, dans ce cas, renverra une valeur non-booléenne.
+
+{{EmbedInteractiveExample("pages/js/expressions-logical-or.html", "shorter")}}
+
+## Syntax
+
+```js
+expr1 || expr2
+```
+
+## Description
+
+Si `expr1` peut être converti en `true`, c'est `expr1` qui sera renvoyé, sinon ce sera `expr2`.
+
+Si une valeur peut être convertie en `true`, elle peut être qualifiée de [_truthy_](/fr/docs/Glossary/Truthy). Si une valeur peut être convertie en `false`, on la qualifiera alors de [_falsy_](/fr/docs/Glossary/Falsy).
+
+Parmi les expressions qui peuvent être converties en `false`, on a :
+
+- `null` ;
+- `NaN` ;
+- `0` ;
+- la chaîne de caractères vide (`""` ou `''` ou ` `` `) ;
+- `undefined`.
+
+Bien que l'opérateur `||` puisse être utilisé avec des opérandes qui ne soient pas des valeurs booléennes, il reste un opérateur booléen, car sa valeur de retour peut toujours être convertie en [une valeur primitive booléenne](/fr/docs/Web/JavaScript/Data_structures#boolean_type). Pour convertir explicitement la valeur de retour (ou tout expression de façon plus générale) dans sa valeur booléenne correspondante, on pourra utiliser un double [opérateur NON (`!`)](/fr/docs/Web/JavaScript/Reference/Operators/Logical_NOT) ou le constructeur [`Boolean()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Boolean/Boolean).
+
+### Évaluation en court-circuit
+
+L'expression utilisant un OU logique est évaluée de gauche à droite. Le moteur cherche s'il est possible d'utiliser un court-circuit de la façon suivante :
+
+`(une expression équivalente à vrai) || expr` sera court-circuité pour fournir directement le résultat de l'expression équivalente à vrai.
+
+Cette notion de court-circuit indique que la partie `expr` ci-avant **n'est pas évaluée**, tout effet de bord lié à cette évaluation n'aura pas lieu (par exemple, si `expr` est un appel de fonction, la fonction n'est pas appelée). Ce fonctionnement a lieu, car la valeur du résultat peut d'office être déterminée par l'évaluation du premier opérande. Par exemple :
+
+```js
+function A(){
+  console.log('A a été appelée');
+  return false;
+}
+
+function B(){
+  console.log('B a été appelée');
+  return true;
+}
+
+console.log( B() || A() );
+// affichera "B a été appelée" dans la console via l'appel de la fonction
+// puis affichera true (la valeur du résultat de l'expression avec l'opérateur)
+// on voit que la fonction A n'est pas du tout appelée
+```
+
+### Précédence des opérateurs
+
+Les expressions suivantes peuvent sembler équivalentes mais ne le sont pas. En effet, l'opérateur `&&` est exécuté avant l'opérateur `||` (voir [l'article sur la précédence des opérateurs](/fr/docs/Web/JavaScript/Reference/Operators/Operator_Precedence)).
+
+```js
+true || false && false      // renvoie true, car && est exécuté en premier
+(true || false) && false    // renvoie false, car la précédence par défaut ne s'applique pas
+                                    // avec les parenthèses
+```
+
+## Exemples
+
+### Utiliser le OU logique
+
+Le code suivant illustre quelques usages de l'opérateur OU logique `||`.
+
+```js
+o1 = true   || true      // t || t renvoie true
+o2 = false  || true      // f || t renvoie true
+o3 = true   || false     // t || f renvoie true
+o4 = false  || (3 == 4)  // f || f renvoie false
+o5 = 'Chat' || 'Chien'   // t || t renvoie "Chat"
+o6 = false  || 'Chat'    // f || t renvoie "Chat"
+o7 = 'Chat' || false     // t || f renvoie "Chat"
+o8 = ''     || false     // f || f renvoie false
+o9 = false  || ''        // f || f renvoie ""
+o10 = false || varObject // f || object renvoie varObject
+```
+
+> **Note :** Si vous utilisez cet opérateur afin de fournir une valeur par défaut à une variable. Soyez conscient⋅e qu'une valeur équivalente à `false` ne pourra pas être utilisée ainsi. Si vous souhaitez uniquement écarter [`null`](/fr/docs/Web/JavaScript/Reference/Global_Objects/null) ou [`undefined`](/fr/docs/Web/JavaScript/Reference/Global_Objects/undefined), privilégiez l'utilisation de [l'opérateur de coalescence des nuls](/fr/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator).
+
+### Règles de conversion booléennes
+
+#### Convertir ET en OU
+
+L'opération suivante, utilisant des **booléens** :
+
+```js
+bCondition1 && bCondition2
+```
+
+sera toujours équivalente à :
+
+```js
+!(!bCondition1 || !bCondition2)
+```
+
+#### Convertir OU en ET
+
+L'opération suivante, utilisant des **booléens** :
+
+```js
+bCondition1 || bCondition2
+```
+
+sera toujours équivalente à :
+
+```js
+!(!bCondition1 && !bCondition2)
+```
+
+### Retrait des parenthèses imbriquées
+
+Les expressions logiques sont évaluées de gauche à droite, il est donc possible de retirer les parenthèses d'une expression complexe en suivant quelques règles.
+
+L'opération composite suivante, utilisant des **booléens** :
+
+```js
+bCondition1 && (bCondition2 || bCondition3)
+```
+
+sera toujours équivalente à :
+
+```js
+!(!bCondition1 || !bCondition2 && !bCondition3)
+```
+
+## Spécifications
+
+{{Specifications}}
+
+## Compatibilité des navigateurs
+
+{{Compat}}
+
+## Voir aussi
+
+- [L'opérateur de coalescence des nuls (`??`)](/fr/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator)
+- [`Boolean`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Boolean)
+- [_Truthy_](/fr/docs/Glossary/Truthy)
+- [_Falsy_](/fr/docs/Glossary/Falsy)
diff --git a/files/fr/web/javascript/reference/operators/logical_or_assignment/index.html b/files/fr/web/javascript/reference/operators/logical_or_assignment/index.html
deleted file mode 100644
index 433c5f2109..0000000000
--- a/files/fr/web/javascript/reference/operators/logical_or_assignment/index.html
+++ /dev/null
@@ -1,84 +0,0 @@
----
-title: Affectation après OU logique (||=)
-slug: Web/JavaScript/Reference/Operators/Logical_OR_assignment
-tags:
-  - JavaScript
-  - Language feature
-  - Logical Operator
-  - Operator
-  - Reference
-browser-compat: javascript.operators.logical_or_assignment
-translation-of: Web/JavaScript/Reference/Operators/Logical_OR_assignment
----
-<div>{{jsSidebar("Operators")}}</div>
-
-<p>L'opérateur d'affectation après OU logique (<code>x ||= y</code>) n'affecte la valeur de l'opérande droit uniquement si l'opérande gauche est <a href="/fr/docs/Glossary/Falsy">équivalent à faux (<i>falsy</i>)</a>.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/expressions-logical-or-assignment.html")}}</div>
-
-<h2 id="syntax">Syntaxe</h2>
-
-<pre class="brush: js">
-<var>expr1</var> ||= <var>expr2</var>
-</pre>
-
-<h2 id="description">Description</h2>
-
-<h3 id="short-circuit_evaluation">Évaluation en court-circuit</h3>
-
-<p>L'opérateur <a href="/fr/docs/Web/JavaScript/Reference/Operators/Logical_OR">OU logique</a> fonctionne ainsi :</p>
-
-<pre class="brush: js">
-x || y;
-// renvoie x lorsque x est équivalent à vrai
-// renvoie y lorsque x n'est pas équivalent à vrai
-</pre>
-
-<p>L'opérateur OU logique peut utiliser un court-circuit : le second opérande est uniquement évalué si le premier opérande n'est pas équivalent à vrai.</p>
-
-<p>L'opérateur d'affectation après OU logique observe les mêmes règles : l'affectation a uniquement lieu si l'opération logique a besoin d'évaluer l'opérande droit. Autrement dit, <code>x ||= y</code> est équivalent à :</p>
-
-<pre class="brush: js">
-x || (x = y);
-</pre>
-
-<p>En revanche, il n'est pas équivalent à l'expression suivante qui effectue, quoi qu'il arrive, une affectation :</p>
-
-<pre class="brush: js example-bad">
-x = x || y;
-</pre>
-
-<p>On notera que ce comportement est différent entre les opérateurs binaires et les opérateurs logiques.</p>
-
-<h2 id="examples">Exemples</h2>
-
-<h3 id="setting_default_content">Affecter une valeur par défaut</h3>
-
-<p>Dans l'exemple qui suit, si <code>paroles</code> est vide, on y place une valeur par défaut :</p>
-
-<pre class="brush: js">
-document.getElementById('paroles').textContent ||= 'Aucune parole.'
-</pre>
-
-<p>Ici, la notion de court-circuit est utile, car l'élément ne sera pas mis à jour si ce n'est pas nécessaire. Il n'y aura pas d'effet de bord indésiré comme une autre étape de rendu ou la perte du focus, etc.</p>
-
-<p>Attention toutefois à la valeur qu'on teste. Si on souhaite affecter une valeur lorsqu'on rencontre une chaîne de caractère vide (équivalente à faux), on pourra utiliser <code>||=</code>. Sinon, si on souhaite uniquement distinguer <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/null"><code>null</code></a> ou <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/null"><code>undefined</code></a>, on utilisera l'opérateur <a href="/fr/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator"><code>??=</code></a>.</p>
-
-<h2 id="specifications">Spécifications</h2>
-
-<p>{{Specifications}}</p>
-
-<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
-
-<p>{{Compat}}</p>
-
-<h2 id="see_also">Voir aussi</h2>
-
-<ul>
-  <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Logical_OR">L'opérateur OU logique (||)</a></li>
-  <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator">L'opérateur de coalescence des nuls (<code>??</code>)</a></li>
-  <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Bitwise_OR_assignment">L'opérateur d'affectation après OU binaire (<code>|=</code>)</a></li>
-  <li><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Boolean">Le type <code>Boolean</code></a>
-  <li><a href="/fr/docs/Glossary/Truthy"><i>Truthy</i></a></li>
-  <li><a href="/fr/docs/Glossary/Falsy"><i>Falsy</i></a></li>
-</ul>
diff --git a/files/fr/web/javascript/reference/operators/logical_or_assignment/index.md b/files/fr/web/javascript/reference/operators/logical_or_assignment/index.md
new file mode 100644
index 0000000000..34d97a79f8
--- /dev/null
+++ b/files/fr/web/javascript/reference/operators/logical_or_assignment/index.md
@@ -0,0 +1,81 @@
+---
+title: Affectation après OU logique (||=)
+slug: Web/JavaScript/Reference/Operators/Logical_OR_assignment
+tags:
+  - JavaScript
+  - Language feature
+  - Logical Operator
+  - Operator
+  - Reference
+browser-compat: javascript.operators.logical_or_assignment
+---
+{{jsSidebar("Operators")}}
+
+L'opérateur d'affectation après OU logique (`x ||= y`) n'affecte la valeur de l'opérande droit uniquement si l'opérande gauche est [équivalent à faux (_falsy_)](/fr/docs/Glossary/Falsy).
+
+{{EmbedInteractiveExample("pages/js/expressions-logical-or-assignment.html")}}
+
+## Syntaxe
+
+```js
+expr1 ||= expr2
+```
+
+## Description
+
+### Évaluation en court-circuit
+
+L'opérateur [OU logique](/fr/docs/Web/JavaScript/Reference/Operators/Logical_OR) fonctionne ainsi :
+
+```js
+x || y;
+// renvoie x lorsque x est équivalent à vrai
+// renvoie y lorsque x n'est pas équivalent à vrai
+```
+
+L'opérateur OU logique peut utiliser un court-circuit : le second opérande est uniquement évalué si le premier opérande n'est pas équivalent à vrai.
+
+L'opérateur d'affectation après OU logique observe les mêmes règles : l'affectation a uniquement lieu si l'opération logique a besoin d'évaluer l'opérande droit. Autrement dit, `x ||= y` est équivalent à :
+
+```js
+x || (x = y);
+```
+
+En revanche, il n'est pas équivalent à l'expression suivante qui effectue, quoi qu'il arrive, une affectation :
+
+```js example-bad
+x = x || y;
+```
+
+On notera que ce comportement est différent entre les opérateurs binaires et les opérateurs logiques.
+
+## Exemples
+
+### Affecter une valeur par défaut
+
+Dans l'exemple qui suit, si `paroles` est vide, on y place une valeur par défaut :
+
+```js
+document.getElementById('paroles').textContent ||= 'Aucune parole.'
+```
+
+Ici, la notion de court-circuit est utile, car l'élément ne sera pas mis à jour si ce n'est pas nécessaire. Il n'y aura pas d'effet de bord indésiré comme une autre étape de rendu ou la perte du focus, etc.
+
+Attention toutefois à la valeur qu'on teste. Si on souhaite affecter une valeur lorsqu'on rencontre une chaîne de caractère vide (équivalente à faux), on pourra utiliser `||=`. Sinon, si on souhaite uniquement distinguer [`null`](/fr/docs/Web/JavaScript/Reference/Global_Objects/null) ou [`undefined`](/fr/docs/Web/JavaScript/Reference/Global_Objects/null), on utilisera l'opérateur [`??=`](/fr/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator).
+
+## Spécifications
+
+{{Specifications}}
+
+## Compatibilité des navigateurs
+
+{{Compat}}
+
+## Voir aussi
+
+- [L'opérateur OU logique (||)](/fr/docs/Web/JavaScript/Reference/Operators/Logical_OR)
+- [L'opérateur de coalescence des nuls (`??`)](/fr/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator)
+- [L'opérateur d'affectation après OU binaire (`|=`)](/fr/docs/Web/JavaScript/Reference/Operators/Bitwise_OR_assignment)
+- [Le type `Boolean`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Boolean)
+- [_Truthy_](/fr/docs/Glossary/Truthy)
+- [_Falsy_](/fr/docs/Glossary/Falsy)
diff --git a/files/fr/web/javascript/reference/operators/multiplication/index.html b/files/fr/web/javascript/reference/operators/multiplication/index.html
deleted file mode 100644
index 8729f46328..0000000000
--- a/files/fr/web/javascript/reference/operators/multiplication/index.html
+++ /dev/null
@@ -1,65 +0,0 @@
----
-title: Multiplication (*)
-slug: Web/JavaScript/Reference/Operators/Multiplication
-tags:
-  - JavaScript
-  - Language feature
-  - Operator
-  - Reference
-browser-compat: javascript.operators.multiplication
-translation-of: Web/JavaScript/Reference/Operators/Multiplication
----
-<div>{{jsSidebar("Operators")}}</div>
-
-<p>L'opérateur de multiplication (<code>*</code>) fournit le produit de la multiplication des deux opérandes.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/expressions-multiplication.html")}}</div>
-
-<h2 id="syntax">Syntaxe</h2>
-
-<pre class="brush: js">
-<strong>Opérateur :</strong> <var>x</var> * <var>y</var>
-</pre>
-
-<h2 id="examples">Exemples</h2>
-
-<h3 id="multiplication_using_numbers">Avec des nombres</h3>
-
-<pre class="brush: js"> 2 * 2      // 4
--2 * 2     // -4
-</pre>
-
-<h3 id="multiplication_with_infinity">Avec l'infini</h3>
-
-<pre class="brush: js">
-Infinity * 0         // NaN
-Infinity * Infinity  // Infinity
-</pre>
-
-<h3 id="multiplication_with_non-numbers">Avec des valeurs non-numériques</h3>
-
-<pre class="brush: js">
-'foo' * 2 // NaN
-</pre>
-
-<h2 id="specifications">Spécifications</h2>
-
-<p>{{Specifications}}</p>
-
-<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
-
-<p>{{Compat}}</p>
-
-<h2 id="see_also">Voir aussi</h2>
-
-<ul>
-  <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Addition">Opérateur d'addition</a></li>
-  <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Subtraction">Opérateur de soustraction</a></li>
-  <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Division">Opérateur de division</a></li>
-  <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Remainder">Opérateur de reste</a></li>
-  <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Exponentiation">Opérateur d'exponentiation</a></li>
-  <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Increment">Opérateur d'incrémentation</a></li>
-  <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Decrement">Opérateur de décrémentation</a></li>
-  <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Unary_negation">Opérateur de négation unaire</a></li>
-  <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Unary_plus">Opérateur plus unaire</a></li>
-</ul>
diff --git a/files/fr/web/javascript/reference/operators/multiplication/index.md b/files/fr/web/javascript/reference/operators/multiplication/index.md
new file mode 100644
index 0000000000..484d2b45f3
--- /dev/null
+++ b/files/fr/web/javascript/reference/operators/multiplication/index.md
@@ -0,0 +1,63 @@
+---
+title: Multiplication (*)
+slug: Web/JavaScript/Reference/Operators/Multiplication
+tags:
+  - JavaScript
+  - Language feature
+  - Operator
+  - Reference
+browser-compat: javascript.operators.multiplication
+---
+{{jsSidebar("Operators")}}
+
+L'opérateur de multiplication (`*`) fournit le produit de la multiplication des deux opérandes.
+
+{{EmbedInteractiveExample("pages/js/expressions-multiplication.html")}}
+
+## Syntaxe
+
+```js
+Opérateur : x * y
+```
+
+## Exemples
+
+### Avec des nombres
+
+```js
+ 2 * 2      // 4
+-2 * 2     // -4
+```
+
+### Avec l'infini
+
+```js
+Infinity * 0         // NaN
+Infinity * Infinity  // Infinity
+```
+
+### Avec des valeurs non-numériques
+
+```js
+'foo' * 2 // NaN
+```
+
+## Spécifications
+
+{{Specifications}}
+
+## Compatibilité des navigateurs
+
+{{Compat}}
+
+## Voir aussi
+
+- [Opérateur d'addition](/fr/docs/Web/JavaScript/Reference/Operators/Addition)
+- [Opérateur de soustraction](/fr/docs/Web/JavaScript/Reference/Operators/Subtraction)
+- [Opérateur de division](/fr/docs/Web/JavaScript/Reference/Operators/Division)
+- [Opérateur de reste](/fr/docs/Web/JavaScript/Reference/Operators/Remainder)
+- [Opérateur d'exponentiation](/fr/docs/Web/JavaScript/Reference/Operators/Exponentiation)
+- [Opérateur d'incrémentation](/fr/docs/Web/JavaScript/Reference/Operators/Increment)
+- [Opérateur de décrémentation](/fr/docs/Web/JavaScript/Reference/Operators/Decrement)
+- [Opérateur de négation unaire](/fr/docs/Web/JavaScript/Reference/Operators/Unary_negation)
+- [Opérateur plus unaire](/fr/docs/Web/JavaScript/Reference/Operators/Unary_plus)
diff --git a/files/fr/web/javascript/reference/operators/multiplication_assignment/index.html b/files/fr/web/javascript/reference/operators/multiplication_assignment/index.html
deleted file mode 100644
index 13d0a6d9e7..0000000000
--- a/files/fr/web/javascript/reference/operators/multiplication_assignment/index.html
+++ /dev/null
@@ -1,48 +0,0 @@
----
-title: Affectation après multiplication (*=)
-slug: Web/JavaScript/Reference/Operators/Multiplication_assignment
-tags:
-  - Assignment operator
-  - JavaScript
-  - Language feature
-  - Operator
-  - Reference
-browser-compat: javascript.operators.multiplication_assignment
-translation-of: Web/JavaScript/Reference/Operators/Multiplication_assignment
----
-<div>{{jsSidebar("Operators")}}</div>
-
-<p>L'opérateur de multiplication et d'affectation (<code>*=</code>) multiplie une variable fournie par l'opérande gauche par la valeur fournie par l'opérande droit puis affecte le résultat de l'opération à la variable représentée par l'opérande gauche.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/expressions-multiplication-assignment.html")}}</div>
-
-<h2 id="syntax">Syntaxe</h2>
-
-<pre class="brush: js">
-<strong>Opérateur :</strong> x *= y
-<strong>Signification :</strong>  x  = x * y
-</pre>
-
-<h2 id="examples">Exemples</h2>
-
-<h3 id="using_multiplication_assignment">Utiliser l'opérateur de multiplication et d'affectation</h3>
-
-<pre class="brush: js">
-let truc = 5;
-truc *= 2;      // 10
-truc *= 'toto'; // NaN</pre>
-
-<h2 id="specifications">Spécifications</h2>
-
-<p>{{Specifications}}</p>
-
-<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
-
-<p>{{Compat}}</p>
-
-<h2 id="see_also">Voir aussi</h2>
-
-<ul>
-  <li><a href="/fr/docs/Web/JavaScript/Guide/Expressions_and_Operators#assignment">Les opérateurs d'affectation dans le guide JavaScript</a></li>
-  <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Multiplication">L'opérateur de multiplication</a></li>
-</ul>
diff --git a/files/fr/web/javascript/reference/operators/multiplication_assignment/index.md b/files/fr/web/javascript/reference/operators/multiplication_assignment/index.md
new file mode 100644
index 0000000000..abe84b04c2
--- /dev/null
+++ b/files/fr/web/javascript/reference/operators/multiplication_assignment/index.md
@@ -0,0 +1,46 @@
+---
+title: Affectation après multiplication (*=)
+slug: Web/JavaScript/Reference/Operators/Multiplication_assignment
+tags:
+  - Assignment operator
+  - JavaScript
+  - Language feature
+  - Operator
+  - Reference
+browser-compat: javascript.operators.multiplication_assignment
+---
+{{jsSidebar("Operators")}}
+
+L'opérateur de multiplication et d'affectation (`*=`) multiplie une variable fournie par l'opérande gauche par la valeur fournie par l'opérande droit puis affecte le résultat de l'opération à la variable représentée par l'opérande gauche.
+
+{{EmbedInteractiveExample("pages/js/expressions-multiplication-assignment.html")}}
+
+## Syntaxe
+
+```js
+Opérateur : x *= y
+Signification :  x  = x * y
+```
+
+## Exemples
+
+### Utiliser l'opérateur de multiplication et d'affectation
+
+```js
+let truc = 5;
+truc *= 2;      // 10
+truc *= 'toto'; // NaN
+```
+
+## Spécifications
+
+{{Specifications}}
+
+## Compatibilité des navigateurs
+
+{{Compat}}
+
+## Voir aussi
+
+- [Les opérateurs d'affectation dans le guide JavaScript](/fr/docs/Web/JavaScript/Guide/Expressions_and_Operators#assignment)
+- [L'opérateur de multiplication](/fr/docs/Web/JavaScript/Reference/Operators/Multiplication)
diff --git a/files/fr/web/javascript/reference/operators/new.target/index.html b/files/fr/web/javascript/reference/operators/new.target/index.html
deleted file mode 100644
index 16544ca4fa..0000000000
--- a/files/fr/web/javascript/reference/operators/new.target/index.html
+++ /dev/null
@@ -1,107 +0,0 @@
----
-title: new.target
-slug: Web/JavaScript/Reference/Operators/new.target
-tags:
-  - ECMAScript 2015
-  - JavaScript
-  - Reference
-translation_of: Web/JavaScript/Reference/Operators/new.target
-original_slug: Web/JavaScript/Reference/Opérateurs/new.target
----
-<div>{{JSSidebar("Operators")}}</div>
-
-<p>La syntaxe<strong> <code>new.target</code></strong> est disponible dans toutes les fonctions et permet entre autres de tester si une fonction ou un constructeur a été appelé avec <code>new</code>. Dans les constructeurs, il fait référence au constructeur invoqué par <code><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_new">new</a></code>. Dans les appels de fonction « normaux », <code>new.target</code> vaut {{jsxref("undefined")}}.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/expressions-newtarget.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">new.target</pre>
-
-<h2 id="Description">Description</h2>
-
-<p>La syntaxe <code>new.target</code> se compose du mot-clé <code>new</code>, suivi d'un point puis d'un nom de propriété (ici <code>target</code>). Généralement et par ailleurs, <code>new.</code> est utilisé comme contexte pour accéder à une propriété. Ici, <code>new.</code> ne fait pas réellement référence à un objet. Dans les appels de constructeurs, <code>new.target</code> fait référence au constructeur qui a été appelé par <code>new</code>. Cette syntaxe permet donc de récupérer cette valeur.</p>
-
-<p><code>new.target</code> est une méta-propriété, disponible pour toutes les fonctions. Dans <a href="/fr/docs/Web/JavaScript/Reference/Fonctions/Fonctions_fl%C3%A9ch%C3%A9es">les fonctions fléchées</a>, <code>new.target</code> fait référence au <code>new.target</code> de la fonction englobante.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Utilisation_de_new.target_dans_les_appels_de_fonction">Utilisation de <code>new.target</code> dans les appels de fonction</h3>
-
-<p>Utilisé dans les appels de fonctions « classiques » (autrement dit pour les fonctions qui ne sont pas des constructeurs), <code>new.target</code> vaut {{jsxref("undefined")}}. Cela permet de détecter si une fonction a été appelée comme constructeur avec <code><a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/L_op%C3%A9rateur_new">new</a></code> :</p>
-
-<pre class="brush: js">function Toto(){
-  if (!new.target) throw "Toto() doit être appelé avec new"
-  console.log("Toto instancié avec new");
-}
-
-new Toto(); // affiche "Toto instancié avec new" dans la console
-Toto(); // lève l'exception avec "Toto doit être appelé avec new"
-</pre>
-
-<h3 id="Utilisation_de_new.target_dans_les_constructeurs">Utilisation de <code>new.target</code> dans les constructeurs</h3>
-
-<p>Utilisés dans les appels de constructeurs de classe, <code>new.target</code> fait référence au constructeur utilisé directement avec <code>new</code>. C'est également le cas quand le constructeur est présent dans une classe parente et est délégué depuis le constructeur fils :</p>
-
-<pre class="brush: js">class A {
-  constructor() {
-    console.log(new.target.name);
-  }
-}
-
-class B extends A { constructor() { super(); } }
-
-var a = new A(); // affiche "A"
-var b = new B(); // affiche "B"
-
-class C {
-  constructor() {
-    console.log(new.target);
-  }
-}
-
-class D extends C {
-  constructor() {
-    super();
-  }
-}
-
-var c = new C(); // function C()
-var d = new D(); // function D()
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-built-in-function-objects', 'Built-in Function Objects')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-built-in-function-objects', 'Built-in Function Objects')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.operators.new_target")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/JavaScript/Reference/Fonctions">Les fonctions</a></li>
- <li><a href="/fr/docs/Web/JavaScript/Reference/Classes">Les classes</a></li>
- <li><code><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_new">new</a></code></li>
- <li><code><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_this">this</a></code></li>
- <li><a href="https://tech.mozfr.org/post/2015/08/12/ES6-en-details-%3A-les-sous-classes-et-l-heritage">Cet article sur les classes traduit en français</a></li>
-</ul>
diff --git a/files/fr/web/javascript/reference/operators/new.target/index.md b/files/fr/web/javascript/reference/operators/new.target/index.md
new file mode 100644
index 0000000000..3b55b94273
--- /dev/null
+++ b/files/fr/web/javascript/reference/operators/new.target/index.md
@@ -0,0 +1,92 @@
+---
+title: new.target
+slug: Web/JavaScript/Reference/Operators/new.target
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Reference
+translation_of: Web/JavaScript/Reference/Operators/new.target
+original_slug: Web/JavaScript/Reference/Opérateurs/new.target
+---
+{{JSSidebar("Operators")}}
+
+La syntaxe** `new.target`** est disponible dans toutes les fonctions et permet entre autres de tester si une fonction ou un constructeur a été appelé avec `new`. Dans les constructeurs, il fait référence au constructeur invoqué par [`new`](/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_new). Dans les appels de fonction « normaux », `new.target` vaut {{jsxref("undefined")}}.
+
+{{EmbedInteractiveExample("pages/js/expressions-newtarget.html")}}
+
+## Syntaxe
+
+    new.target
+
+## Description
+
+La syntaxe `new.target` se compose du mot-clé `new`, suivi d'un point puis d'un nom de propriété (ici `target`). Généralement et par ailleurs, `new.` est utilisé comme contexte pour accéder à une propriété. Ici, `new.` ne fait pas réellement référence à un objet. Dans les appels de constructeurs, `new.target` fait référence au constructeur qui a été appelé par `new`. Cette syntaxe permet donc de récupérer cette valeur.
+
+`new.target` est une méta-propriété, disponible pour toutes les fonctions. Dans [les fonctions fléchées](/fr/docs/Web/JavaScript/Reference/Fonctions/Fonctions_fl%C3%A9ch%C3%A9es), `new.target` fait référence au `new.target` de la fonction englobante.
+
+## Exemples
+
+### Utilisation de `new.target` dans les appels de fonction
+
+Utilisé dans les appels de fonctions « classiques » (autrement dit pour les fonctions qui ne sont pas des constructeurs), `new.target` vaut {{jsxref("undefined")}}. Cela permet de détecter si une fonction a été appelée comme constructeur avec [`new`](/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/L_op%C3%A9rateur_new) :
+
+```js
+function Toto(){
+  if (!new.target) throw "Toto() doit être appelé avec new"
+  console.log("Toto instancié avec new");
+}
+
+new Toto(); // affiche "Toto instancié avec new" dans la console
+Toto(); // lève l'exception avec "Toto doit être appelé avec new"
+```
+
+### Utilisation de `new.target` dans les constructeurs
+
+Utilisés dans les appels de constructeurs de classe, `new.target` fait référence au constructeur utilisé directement avec `new`. C'est également le cas quand le constructeur est présent dans une classe parente et est délégué depuis le constructeur fils :
+
+```js
+class A {
+  constructor() {
+    console.log(new.target.name);
+  }
+}
+
+class B extends A { constructor() { super(); } }
+
+var a = new A(); // affiche "A"
+var b = new B(); // affiche "B"
+
+class C {
+  constructor() {
+    console.log(new.target);
+  }
+}
+
+class D extends C {
+  constructor() {
+    super();
+  }
+}
+
+var c = new C(); // function C()
+var d = new D(); // function D()
+```
+
+## Spécifications
+
+| Spécification                                                                                                        | État                         | Commentaire          |
+| -------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName('ES2015', '#sec-built-in-function-objects', 'Built-in Function Objects')}}     | {{Spec2('ES2015')}}     | Définition initiale. |
+| {{SpecName('ESDraft', '#sec-built-in-function-objects', 'Built-in Function Objects')}} | {{Spec2('ESDraft')}} |                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.operators.new_target")}}
+
+## Voir aussi
+
+- [Les fonctions](/fr/docs/Web/JavaScript/Reference/Fonctions)
+- [Les classes](/fr/docs/Web/JavaScript/Reference/Classes)
+- [`new`](/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_new)
+- [`this`](/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_this)
+- [Cet article sur les classes traduit en français](https://tech.mozfr.org/post/2015/08/12/ES6-en-details-%3A-les-sous-classes-et-l-heritage)
diff --git a/files/fr/web/javascript/reference/operators/new/index.html b/files/fr/web/javascript/reference/operators/new/index.html
deleted file mode 100644
index 1e4074256c..0000000000
--- a/files/fr/web/javascript/reference/operators/new/index.html
+++ /dev/null
@@ -1,194 +0,0 @@
----
-title: L'opérateur new
-slug: Web/JavaScript/Reference/Operators/new
-tags:
-  - JavaScript
-  - Operator
-  - Reference
-translation_of: Web/JavaScript/Reference/Operators/new
-original_slug: Web/JavaScript/Reference/Opérateurs/L_opérateur_new
----
-<div>{{jsSidebar("Operators")}}</div>
-
-<p>L'<strong>opérateur <code>new</code></strong> permet de créer une instance d'un certain type d'objet à partir du constructeur qui existe pour celui-ci (natif ou défini par l'utilisateur).</p>
-
-<p>Le mot-clé <code>new</code>, utilisé avec une fonction, applique les 4 étapes suivantes :</p>
-
-<ol>
- <li>Il crée un nouvel objet à partir de zéro</li>
- <li>Il lie cet objet à un autre objet en le définissant comme son prototype.</li>
- <li>Le nouvel objet, créé à l'étape 1, est passé comme valeur <code>this</code> à la fonction</li>
- <li>Si la fonction ne renvoie pas d'objet, c'est la valeur <code>this</code> qui est renvoyée.</li>
-</ol>
-
-<div>{{EmbedInteractiveExample("pages/js/expressions-newoperator.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">new <em>constructeur</em>[([<em>arguments</em>])]</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>constructeur</code></dt>
- <dd>Une fonction ou une classe qui définit le type de l'objet qui sera une instance.</dd>
- <dt><code>arguments</code></dt>
- <dd>Une liste de valeurs correspondant aux arguments avec lesquels appeler le <code>constructeur</code>.</dd>
-</dl>
-
-<h2 id="Description">Description</h2>
-
-<p>La création d'un objet personnalisé se fait en deux étapes :</p>
-
-<ol>
- <li>Définition du type d'objet en écrivant une fonction.</li>
- <li>Création d'une instance de l'objet avec <code>new</code>.</li>
-</ol>
-
-<p>Pour définir un type d'objet, créez une fonction pour ce type qui spécifie son nom, ses propriétés et ses méthodes. Un objet peut avoir des propriétés qui sont elles-mêmes des objets, comme on pourra le voir dans les exemples ci-dessous.</p>
-
-<p>Lorsque le code <code>new <em>Toto</em>(...)</code> est exécuté, voici ce qui se passe :</p>
-
-<ol>
- <li>Un nouvel objet est créé qui hérite de <code><em>Toto</em>.prototype</code>.</li>
- <li>La fonction constructrice <code><em>Toto</em></code> est appelée avec les arguments fournis, <code><a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/L_op%C3%A9rateur_this">this</a></code> étant lié au nouvel objet créé. <code>new <em>Toto</em></code> sera équivalent à <code>new <em>Toto</em>()</code> (i.e. un appel sans argument).</li>
- <li>L'objet renvoyé par le constructeur devient le résultat de l'expression qui contient <code>new</code>. Si le constructeur ne renvoie pas d'objet de façon explicite, l'objet créé à l'étape 1 sera utilisé. (En général, les constructeurs ne renvoient pas de valeurs mais si on souhaite surcharger le processus habituel, on peut utiliser cette valeur de retour).</li>
-</ol>
-
-<p>Il est toujours possible d'ajouter une propriété à un objet défini précédemment. Par exemple, l'instruction <code>voiture1.couleur = "noir"</code> ajoute une propriété couleur à <code>voiture1</code>, et lui assigne une valeur : "<code>noir</code>". Cependant, ceci n'affecte aucunement les autres objets. Pour ajouter une nouvelle propriété à tous les objets du même type, cette propriété doit être ajoutée à la définition du type d'objet <code>Voiture</code>.</p>
-
-<p>Il est possible d'ajouter une propriété partagée par tous les objets d'un type déjà défini auparavant en utilisant sa propriété <code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Function/prototype">Function.prototype</a></code>. Ceci permet de définir une propriété partagée par tous les objets créés avec cette fonction, plutôt que simplement par une seule instance de ce type d'objet. Le code qui suit ajoute une propriété couleur avec la valeur <code>"couleur standard"</code> à tous les objets de type <code>Voiture</code>, et redéfinit ensuite cette valeur avec la chaîne "<code>noir</code>" uniquement pour l'instance d'objet <code>voiture1</code>. Pour plus d'informations, voir la page sur <a href="/fr/docs/Web/JavaScript/Guide/Inheritance_and_the_prototype_chain">prototype</a>.</p>
-
-<pre class="brush: js">function Voiture() {}
-voiture1 = new Voiture();
-voiture2 = new Voiture();
-
-console.log(voiture1.couleur);            // undefined
-
-Voiture.prototype.couleur = "couleur standard";
-console.log(voiture1.couleur);            // couleur standard
-
-voiture1.couleur = "noir";
-console.log(voiture1.couleur);            // noir
-
-console.log(voiture1.__proto__.couleur);  // couleur standard
-console.log(voiture2.__proto__.couleur);  // couleur standard
-console.log(voiture1.couleur);            // noir
-console.log(voiture2.couleur);            // couleur standard
-</pre>
-
-<div class="note">
-<p><strong>Note :</strong> Si on n'écrit pas l'appel du constructeur avec l'opérateur <code>new</code>, le constructeur est appelé comme une fonction normale et ne crée pas d'objet. Dans ce cas, la valeur de <code>this</code> sera différente.</p>
-</div>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Exemple_type_d'objet_et_instance_d'objet">Exemple : type d'objet et instance d'objet</h3>
-
-<p>Supposons que vous vouliez créer un type d'objet pour les voitures. Vous voulez que ce type d'objet s'appelle <code>Voiture</code>, et qu'il ait des propriétés pour la marque, le modèle et l'année. Pour ce faire, vous écririez la fonction suivante :</p>
-
-<pre class="brush: js">function Voiture(marque, modèle, année) {
-   this.marque = marque;
-   this.modèle = modèle;
-   this.année = année;
-}
-</pre>
-
-<p>À présent, vous pouvez créer un objet appelé <code>ma_voiture</code> de la manière suivante :</p>
-
-<pre class="brush: js">ma_voiture = new Voiture("Volkswagen", "Golf TDi", 1997);
-</pre>
-
-<p>Cette instruction crée l'objet <code>ma_voiture</code> et assigne les valeurs spécifiées à ses propriétés. La valeur de <code>ma_voiture.marque</code> est alors la chaîne <code>"Volkswagen"</code>, celle de <code>ma_voiture.année</code> est l'entier 1997, et ainsi de suite.</p>
-
-<p>Il est possible de créer un nombre illimité d'objets <code>Voiture</code> en appelant <code>new</code>. Par exemple :</p>
-
-<pre class="brush: js">voiture_de_ken = new Voiture("Nissan", "300ZX", 1992);
-</pre>
-
-<h3 id="Exemple_propriété_d'objet_qui_est_elle-même_un_autre_objet">Exemple : propriété d'objet qui est elle-même un autre objet</h3>
-
-<p>Supposons que vous ayez défini un objet appelé <code>Personne</code> de la manière suivante :</p>
-
-<pre class="brush: js">function Personne(nom, age, surnom) {
-   this.nom = nom;
-   this.age = age;
-   this.surnom = surnom;
-}
-</pre>
-
-<p>Et que vous avez ensuite instancié deux nouveaux objets <code>Personne</code> de la manière suivante :</p>
-
-<pre class="brush: js">rand = new Personne("Rand McNally", 33, "Randy");
-ken = new Personne("Ken Jones", 39, "Kenny");
-</pre>
-
-<p>Vous pouvez alors réécrire la définition de <code>Voiture</code> pour contenir une propriété <code>propriétaire</code> qui reçoit un objet <code>Personne</code>, comme ceci :</p>
-
-<pre class="brush: js">function Voiture(marque, modèle, année, propriétaire) {
-   this.marque = marque;
-   this.modèle = modèle;
-   this.année = année;
-   this.propriétaire = propriétaire;
-}
-</pre>
-
-<p>Pour instancier les nouveaux objets, vous utiliserez ensuite :</p>
-
-<pre class="brush: js">voiture1 = new Voiture("Volkswagen", "Golf TDi", 1997, rand);
-voiture2 = new Voiture("Nissan", "300ZX", 1992, ken);
-</pre>
-
-<p>Plutôt que de passer une chaîne littérale ou une valeur entière lors de la création des nouveaux objets, les instructions ci-dessus utilisent les objets <code>rand</code> et <code>ken</code> comme paramètres pour les propriétaires. Pour connaître le nom du propriétaire de <code>voiture2</code>, on peut alors accéder à la propriété suivante :</p>
-
-<pre class="brush: js">voiture2.propriétaire.nom
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-new-operator', 'Opérateur new')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-new-operator', 'Opérateur new')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-11.2.2', 'Opérateur new')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES3', '#sec-11.2.2', 'Opérateur new')}}</td>
-   <td>{{Spec2('ES3')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES1', '#sec-11.2.2', 'Opérateur new')}}</td>
-   <td>{{Spec2('ES1')}}</td>
-   <td>Définition initiale. Implémentée avec JavaScript 1.0.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.operators.new")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Function")}}</li>
- <li>{{jsxref("Reflect.construct()")}}</li>
- <li>{{jsxref("Object.prototype")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/operators/new/index.md b/files/fr/web/javascript/reference/operators/new/index.md
new file mode 100644
index 0000000000..7a0424c8fa
--- /dev/null
+++ b/files/fr/web/javascript/reference/operators/new/index.md
@@ -0,0 +1,164 @@
+---
+title: L'opérateur new
+slug: Web/JavaScript/Reference/Operators/new
+tags:
+  - JavaScript
+  - Operator
+  - Reference
+translation_of: Web/JavaScript/Reference/Operators/new
+original_slug: Web/JavaScript/Reference/Opérateurs/L_opérateur_new
+---
+{{jsSidebar("Operators")}}
+
+L'**opérateur `new`** permet de créer une instance d'un certain type d'objet à partir du constructeur qui existe pour celui-ci (natif ou défini par l'utilisateur).
+
+Le mot-clé `new`, utilisé avec une fonction, applique les 4 étapes suivantes :
+
+1.  Il crée un nouvel objet à partir de zéro
+2.  Il lie cet objet à un autre objet en le définissant comme son prototype.
+3.  Le nouvel objet, créé à l'étape 1, est passé comme valeur `this` à la fonction
+4.  Si la fonction ne renvoie pas d'objet, c'est la valeur `this` qui est renvoyée.
+
+{{EmbedInteractiveExample("pages/js/expressions-newoperator.html")}}
+
+## Syntaxe
+
+    new constructeur[([arguments])]
+
+### Paramètres
+
+- `constructeur`
+  - : Une fonction ou une classe qui définit le type de l'objet qui sera une instance.
+- `arguments`
+  - : Une liste de valeurs correspondant aux arguments avec lesquels appeler le `constructeur`.
+
+## Description
+
+La création d'un objet personnalisé se fait en deux étapes :
+
+1.  Définition du type d'objet en écrivant une fonction.
+2.  Création d'une instance de l'objet avec `new`.
+
+Pour définir un type d'objet, créez une fonction pour ce type qui spécifie son nom, ses propriétés et ses méthodes. Un objet peut avoir des propriétés qui sont elles-mêmes des objets, comme on pourra le voir dans les exemples ci-dessous.
+
+Lorsque le code `new Toto(...)` est exécuté, voici ce qui se passe :
+
+1.  Un nouvel objet est créé qui hérite de `Toto.prototype`.
+2.  La fonction constructrice `Toto` est appelée avec les arguments fournis, [`this`](/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/L_op%C3%A9rateur_this) étant lié au nouvel objet créé. `new Toto` sera équivalent à `new Toto()` (i.e. un appel sans argument).
+3.  L'objet renvoyé par le constructeur devient le résultat de l'expression qui contient `new`. Si le constructeur ne renvoie pas d'objet de façon explicite, l'objet créé à l'étape 1 sera utilisé. (En général, les constructeurs ne renvoient pas de valeurs mais si on souhaite surcharger le processus habituel, on peut utiliser cette valeur de retour).
+
+Il est toujours possible d'ajouter une propriété à un objet défini précédemment. Par exemple, l'instruction `voiture1.couleur = "noir"` ajoute une propriété couleur à `voiture1`, et lui assigne une valeur : "`noir`". Cependant, ceci n'affecte aucunement les autres objets. Pour ajouter une nouvelle propriété à tous les objets du même type, cette propriété doit être ajoutée à la définition du type d'objet `Voiture`.
+
+Il est possible d'ajouter une propriété partagée par tous les objets d'un type déjà défini auparavant en utilisant sa propriété [`Function.prototype`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Function/prototype). Ceci permet de définir une propriété partagée par tous les objets créés avec cette fonction, plutôt que simplement par une seule instance de ce type d'objet. Le code qui suit ajoute une propriété couleur avec la valeur `"couleur standard"` à tous les objets de type `Voiture`, et redéfinit ensuite cette valeur avec la chaîne "`noir`" uniquement pour l'instance d'objet `voiture1`. Pour plus d'informations, voir la page sur [prototype](/fr/docs/Web/JavaScript/Guide/Inheritance_and_the_prototype_chain).
+
+```js
+function Voiture() {}
+voiture1 = new Voiture();
+voiture2 = new Voiture();
+
+console.log(voiture1.couleur);            // undefined
+
+Voiture.prototype.couleur = "couleur standard";
+console.log(voiture1.couleur);            // couleur standard
+
+voiture1.couleur = "noir";
+console.log(voiture1.couleur);            // noir
+
+console.log(voiture1.__proto__.couleur);  // couleur standard
+console.log(voiture2.__proto__.couleur);  // couleur standard
+console.log(voiture1.couleur);            // noir
+console.log(voiture2.couleur);            // couleur standard
+```
+
+> **Note :** Si on n'écrit pas l'appel du constructeur avec l'opérateur `new`, le constructeur est appelé comme une fonction normale et ne crée pas d'objet. Dans ce cas, la valeur de `this` sera différente.
+
+## Exemples
+
+### Exemple : type d'objet et instance d'objet
+
+Supposons que vous vouliez créer un type d'objet pour les voitures. Vous voulez que ce type d'objet s'appelle `Voiture`, et qu'il ait des propriétés pour la marque, le modèle et l'année. Pour ce faire, vous écririez la fonction suivante :
+
+```js
+function Voiture(marque, modèle, année) {
+   this.marque = marque;
+   this.modèle = modèle;
+   this.année = année;
+}
+```
+
+À présent, vous pouvez créer un objet appelé `ma_voiture` de la manière suivante :
+
+```js
+ma_voiture = new Voiture("Volkswagen", "Golf TDi", 1997);
+```
+
+Cette instruction crée l'objet `ma_voiture` et assigne les valeurs spécifiées à ses propriétés. La valeur de `ma_voiture.marque` est alors la chaîne `"Volkswagen"`, celle de `ma_voiture.année` est l'entier 1997, et ainsi de suite.
+
+Il est possible de créer un nombre illimité d'objets `Voiture` en appelant `new`. Par exemple :
+
+```js
+voiture_de_ken = new Voiture("Nissan", "300ZX", 1992);
+```
+
+### Exemple : propriété d'objet qui est elle-même un autre objet
+
+Supposons que vous ayez défini un objet appelé `Personne` de la manière suivante :
+
+```js
+function Personne(nom, age, surnom) {
+   this.nom = nom;
+   this.age = age;
+   this.surnom = surnom;
+}
+```
+
+Et que vous avez ensuite instancié deux nouveaux objets `Personne` de la manière suivante :
+
+```js
+rand = new Personne("Rand McNally", 33, "Randy");
+ken = new Personne("Ken Jones", 39, "Kenny");
+```
+
+Vous pouvez alors réécrire la définition de `Voiture` pour contenir une propriété `propriétaire` qui reçoit un objet `Personne`, comme ceci :
+
+```js
+function Voiture(marque, modèle, année, propriétaire) {
+   this.marque = marque;
+   this.modèle = modèle;
+   this.année = année;
+   this.propriétaire = propriétaire;
+}
+```
+
+Pour instancier les nouveaux objets, vous utiliserez ensuite :
+
+```js
+voiture1 = new Voiture("Volkswagen", "Golf TDi", 1997, rand);
+voiture2 = new Voiture("Nissan", "300ZX", 1992, ken);
+```
+
+Plutôt que de passer une chaîne littérale ou une valeur entière lors de la création des nouveaux objets, les instructions ci-dessus utilisent les objets `rand` et `ken` comme paramètres pour les propriétaires. Pour connaître le nom du propriétaire de `voiture2`, on peut alors accéder à la propriété suivante :
+
+```js
+voiture2.propriétaire.nom
+```
+
+## Spécifications
+
+| Spécification                                                                        | Statut                       | Commentaires                                          |
+| ------------------------------------------------------------------------------------ | ---------------------------- | ----------------------------------------------------- |
+| {{SpecName('ESDraft', '#sec-new-operator', 'Opérateur new')}} | {{Spec2('ESDraft')}} |                                                       |
+| {{SpecName('ES6', '#sec-new-operator', 'Opérateur new')}}         | {{Spec2('ES6')}}         |                                                       |
+| {{SpecName('ES5.1', '#sec-11.2.2', 'Opérateur new')}}             | {{Spec2('ES5.1')}}     |                                                       |
+| {{SpecName('ES3', '#sec-11.2.2', 'Opérateur new')}}                 | {{Spec2('ES3')}}         |                                                       |
+| {{SpecName('ES1', '#sec-11.2.2', 'Opérateur new')}}                 | {{Spec2('ES1')}}         | Définition initiale. Implémentée avec JavaScript 1.0. |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.operators.new")}}
+
+## Voir aussi
+
+- {{jsxref("Function")}}
+- {{jsxref("Reflect.construct()")}}
+- {{jsxref("Object.prototype")}}
diff --git a/files/fr/web/javascript/reference/operators/nullish_coalescing_operator/index.html b/files/fr/web/javascript/reference/operators/nullish_coalescing_operator/index.html
deleted file mode 100644
index c703a8d82e..0000000000
--- a/files/fr/web/javascript/reference/operators/nullish_coalescing_operator/index.html
+++ /dev/null
@@ -1,142 +0,0 @@
----
-title: Opérateur de coalescence des nuls (Nullish coalescing operator)
-slug: Web/JavaScript/Reference/Operators/Nullish_coalescing_operator
-tags:
-  - Coalescence
-  - JavaScript
-  - Opérateur
-  - Reference
-  - falsy
-  - nullish
-translation_of: Web/JavaScript/Reference/Operators/Nullish_coalescing_operator
-original_slug: Web/JavaScript/Reference/Opérateurs/Nullish_coalescing_operator
----
-<p>{{JSSidebar("Operators")}}</p>
-
-<p>L'<strong>opérateur de coalescence des nuls</strong> (<code>??</code>), est un opérateur logique qui renvoie son opérande de droite lorsque son opérande de gauche vaut <code>{{jsxref("null")}}</code> ou <code>{{jsxref("undefined")}}</code> et qui renvoie son opérande de gauche sinon.</p>
-
-<p>Contrairement à <a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_logiques">l'opérateur logique OU (<code>||</code>)</a>, l'opérande de gauche sera renvoyé s'il s'agit d'une <a href="/fr/docs/Glossaire/Falsy">valeur équivalente à <code>false</code></a> <strong>qui n'est ni</strong> <code>null</code><strong>, ni</strong> <code>undefined</code>. En d'autres termes, si vous utilisez <code>||</code> pour fournir une valeur par défaut à une variable <code>foo</code>, vous pourriez rencontrer des comportements inattendus si vous considérez certaines valeurs <em>falsy</em> comme utilisables (par exemple une chaine vide <code>''</code> ou <code>0</code>). Voir ci-dessous pour plus d'exemples.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/expressions-nullishcoalescingoperator.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox notranslate"><var>leftExpr</var> ?? <var>rightExpr</var>
-</pre>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Utilisation_de_lopérateur_de_coalescence_des_nuls">Utilisation de l'opérateur de coalescence des nuls</h3>
-
-<p>Dans cet exemple, nous fournirons des valeurs par défaut mais conserverons des valeurs autres que <code>null</code> ou <code>undefined</code>.</p>
-
-<pre class="brush: js notranslate">const valeurNulle = null;
-const texteVide = ""; // falsy
-const unNombre = 42;
-
-const valA = valeurNulle ?? "valeur par défaut pour A";
-const valB = texteVide ?? "valeur par défaut pour B";
-const valC = unNombre ?? 0;
-
-console.log(valA); // "valeur par défaut pour A"
-console.log(valB); // "" (car la chaine vide n'est ni `<code>null`</code> ni `<code>undefined`</code>)
-console.log(valC); // 42</pre>
-
-<h3 id="Affectation_dune_valeur_par_défaut_à_une_variable">Affectation d'une valeur par défaut à une variable</h3>
-
-<p>Auparavant, lorsque l'on voulait attribuer une valeur par défaut à une variable, une solution fréquente consistait à utiliser l'opérateur logique OU (<code>||</code>) :</p>
-
-<pre class="brush: js notranslate">let toto;
-
-// toto ne se voit jamais attribuer de valeur, il vaut donc undefined
-let unTexteBateau = toto || 'Coucou !';</pre>
-
-<p>Cependant, parce que <code>||</code> est un opérateur logique booléen, l'opérande de gauche a été converti en un booléen pour l'évaluation et aucune valeur <em>falsy</em> (<code>0</code>, <code>''</code>, <code>NaN</code>, <code>null</code>, <code>undefined</code>) n'a été renvoyée. Ce comportement peut entraîner des conséquences inattendues si on souhaite considérer <code>0</code>, <code>''</code> ou <code>NaN</code> comme des valeurs valides.</p>
-
-<pre class="brush: js notranslate">let compteur = 0;
-let texte = "";
-
-let qté = compteur || 42;
-let message = texte || "Coucou !";
-console.log(qté);     // 42 et non 0
-console.log(message); // "Coucou !" et non ""
-</pre>
-
-<p>L'opérateur de coalescence des nuls évite ce risque en ne renvoyant le deuxième opérande que lorsque le premier vaut <code>null</code> ou <code>undefined</code> (mais pas d'autres valeurs <em>falsy</em>) :</p>
-
-<pre class="brush: js notranslate">let monTexte = ''; // Un chaine vide (qui est donc une valeur falsy)
-
-let notFalsyText = monTexte || 'Hello world';
-console.log(notFalsyText); // Hello world
-
-let preservingFalsy = monTexte ?? 'Salut le voisin';
-console.log(preservingFalsy); // '' (car monTexte n'est ni null ni undefined)
-</pre>
-
-<h3 id="Court-circuitage">Court-circuitage</h3>
-
-<p>À l'instar des opérateurs logiques OR (<code>||</code>) et AND (<code>&amp;&amp;</code>), l'expression de droite n'est pas évaluée si celle de gauche ne vaut ni <code>null</code> ni <code>undefined</code>.</p>
-
-<pre class="brush: js notranslate">function A() { console.log('A a été appelée'); return undefined; }
-function B() { console.log('B a été appelée'); return false; }
-function C() { console.log('C a été appelée'); return "toto"; }
-
-console.log( A() ?? C() );
-// Inscrit "A a été appelée" puis "C a été appelée" et enfin "toto"
-// puisque : A() retourne undefined, les deux expressions sont donc évaluées
-
-console.log( B() ?? C() );
-// Inscrit "B a été appelée" puis false
-// puisque : B() retourne false (et non null ou undefined) et
-// l'opérande de droite n'est pas évaluée
-</pre>
-
-<h3 id="Pas_de_chaînage_possible_avec_les_opérateurs_AND_ou_OR">Pas de chaînage possible avec les opérateurs AND ou OR</h3>
-
-<p>Il n'est pas possible de combiner les opérateurs AND (<code>&amp;&amp;</code>) ou OR (<code>||</code>) directement avec l'opérateur de coalescence des nuls (<code>??</code>). Un tel cas lèverait une exception <code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/SyntaxError">SyntaxError</a></code>.</p>
-
-<pre class="brush: js example-bad notranslate">null || undefined ?? "toto"; // soulève une SyntaxError
-true || undefined ?? "toto"; // soulève une SyntaxError</pre>
-
-<p>Cependant, fournir des parenthèses pour indiquer explicitement la priorité est correct :</p>
-
-<pre class="brush: js example-good notranslate">(null || undefined) ?? "toto"; // Renvoie "toto"
-</pre>
-
-<h3 id="Relation_avec_lopérateur_de_chaînage_optionnel_.">Relation avec l'opérateur de chaînage optionnel (<code>?.</code>)</h3>
-
-<p>Tout comme l'opérateur de coalescence des nuls, l'<a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Optional_chaining">opérateur de chaînage optionnel (?.)</a> traite les valeurs <code>null</code> et <code>undefined</code> comme des valeurs spécifiques. Ce qui permet d'accéder à une propriété d'un objet qui peut être <code>null</code> ou <code>undefined</code>.</p>
-
-<pre class="brush: js notranslate">let toto = { uneProprieteToto: "coucou" };
-
-console.log(toto.uneProprieteToto?.toUpperCase());  // "COUCOU"
-console.log(toto.uneProprieteTiti?.toUpperCase()); // undefined
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('ESDraft', '#prod-Nulli', 'nullish coalescing expression')}}</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.operators.nullish_coalescing")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Glossaire/Falsy"><em>Falsy values</em> (Valeurs équivalentes à <code>false</code> dans un contexte booléen)</a></li>
- <li><a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Optional_chaining">Opérateur de chaînage optionnel (<em>optional chaining</em>)</a></li>
- <li><a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_logiques#Logical_OR">Opérateur logique OU (<code>||</code>)</a></li>
- <li><a href="/fr/docs/Web/JavaScript/Reference/Fonctions/Valeurs_par_d%C3%A9faut_des_arguments">Valeurs par défaut des arguments</a></li>
-</ul>
diff --git a/files/fr/web/javascript/reference/operators/nullish_coalescing_operator/index.md b/files/fr/web/javascript/reference/operators/nullish_coalescing_operator/index.md
new file mode 100644
index 0000000000..d9b1e5e3b4
--- /dev/null
+++ b/files/fr/web/javascript/reference/operators/nullish_coalescing_operator/index.md
@@ -0,0 +1,141 @@
+---
+title: Opérateur de coalescence des nuls (Nullish coalescing operator)
+slug: Web/JavaScript/Reference/Operators/Nullish_coalescing_operator
+tags:
+  - Coalescence
+  - JavaScript
+  - Opérateur
+  - Reference
+  - falsy
+  - nullish
+translation_of: Web/JavaScript/Reference/Operators/Nullish_coalescing_operator
+original_slug: Web/JavaScript/Reference/Opérateurs/Nullish_coalescing_operator
+---
+{{JSSidebar("Operators")}}
+
+L'**opérateur de coalescence des nuls** (`??`), est un opérateur logique qui renvoie son opérande de droite lorsque son opérande de gauche vaut `{{jsxref("null")}}` ou `{{jsxref("undefined")}}` et qui renvoie son opérande de gauche sinon.
+
+Contrairement à [l'opérateur logique OU (`||`)](/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_logiques), l'opérande de gauche sera renvoyé s'il s'agit d'une [valeur équivalente à `false`](/fr/docs/Glossaire/Falsy) **qui n'est ni** `null`**, ni** `undefined`. En d'autres termes, si vous utilisez `||` pour fournir une valeur par défaut à une variable `foo`, vous pourriez rencontrer des comportements inattendus si vous considérez certaines valeurs _falsy_ comme utilisables (par exemple une chaine vide `''` ou `0`). Voir ci-dessous pour plus d'exemples.
+
+{{EmbedInteractiveExample("pages/js/expressions-nullishcoalescingoperator.html")}}
+
+## Syntaxe
+
+    leftExpr ?? rightExpr
+
+## Exemples
+
+### Utilisation de l'opérateur de coalescence des nuls
+
+Dans cet exemple, nous fournirons des valeurs par défaut mais conserverons des valeurs autres que `null` ou `undefined`.
+
+```js
+const valeurNulle = null;
+const texteVide = ""; // falsy
+const unNombre = 42;
+
+const valA = valeurNulle ?? "valeur par défaut pour A";
+const valB = texteVide ?? "valeur par défaut pour B";
+const valC = unNombre ?? 0;
+
+console.log(valA); // "valeur par défaut pour A"
+console.log(valB); // "" (car la chaine vide n'est ni `null` ni `undefined`)
+console.log(valC); // 42
+```
+
+### Affectation d'une valeur par défaut à une variable
+
+Auparavant, lorsque l'on voulait attribuer une valeur par défaut à une variable, une solution fréquente consistait à utiliser l'opérateur logique OU (`||`) :
+
+```js
+let toto;
+
+// toto ne se voit jamais attribuer de valeur, il vaut donc undefined
+let unTexteBateau = toto || 'Coucou !';
+```
+
+Cependant, parce que `||` est un opérateur logique booléen, l'opérande de gauche a été converti en un booléen pour l'évaluation et aucune valeur _falsy_ (`0`, `''`, `NaN`, `null`, `undefined`) n'a été renvoyée. Ce comportement peut entraîner des conséquences inattendues si on souhaite considérer `0`, `''` ou `NaN` comme des valeurs valides.
+
+```js
+let compteur = 0;
+let texte = "";
+
+let qté = compteur || 42;
+let message = texte || "Coucou !";
+console.log(qté);     // 42 et non 0
+console.log(message); // "Coucou !" et non ""
+```
+
+L'opérateur de coalescence des nuls évite ce risque en ne renvoyant le deuxième opérande que lorsque le premier vaut `null` ou `undefined` (mais pas d'autres valeurs _falsy_) :
+
+```js
+let monTexte = ''; // Un chaine vide (qui est donc une valeur falsy)
+
+let notFalsyText = monTexte || 'Hello world';
+console.log(notFalsyText); // Hello world
+
+let preservingFalsy = monTexte ?? 'Salut le voisin';
+console.log(preservingFalsy); // '' (car monTexte n'est ni null ni undefined)
+```
+
+### Court-circuitage
+
+À l'instar des opérateurs logiques OR (`||`) et AND (`&&`), l'expression de droite n'est pas évaluée si celle de gauche ne vaut ni `null` ni `undefined`.
+
+```js
+function A() { console.log('A a été appelée'); return undefined; }
+function B() { console.log('B a été appelée'); return false; }
+function C() { console.log('C a été appelée'); return "toto"; }
+
+console.log( A() ?? C() );
+// Inscrit "A a été appelée" puis "C a été appelée" et enfin "toto"
+// puisque : A() retourne undefined, les deux expressions sont donc évaluées
+
+console.log( B() ?? C() );
+// Inscrit "B a été appelée" puis false
+// puisque : B() retourne false (et non null ou undefined) et
+// l'opérande de droite n'est pas évaluée
+```
+
+### Pas de chaînage possible avec les opérateurs AND ou OR
+
+Il n'est pas possible de combiner les opérateurs AND (`&&`) ou OR (`||`) directement avec l'opérateur de coalescence des nuls (`??`). Un tel cas lèverait une exception [`SyntaxError`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/SyntaxError).
+
+```js example-bad
+null || undefined ?? "toto"; // soulève une SyntaxError
+true || undefined ?? "toto"; // soulève une SyntaxError
+```
+
+Cependant, fournir des parenthèses pour indiquer explicitement la priorité est correct :
+
+```js example-good
+(null || undefined) ?? "toto"; // Renvoie "toto"
+```
+
+### Relation avec l'opérateur de chaînage optionnel (`?.`)
+
+Tout comme l'opérateur de coalescence des nuls, l'[opérateur de chaînage optionnel (?.)](/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Optional_chaining) traite les valeurs `null` et `undefined` comme des valeurs spécifiques. Ce qui permet d'accéder à une propriété d'un objet qui peut être `null` ou `undefined`.
+
+```js
+let toto = { uneProprieteToto: "coucou" };
+
+console.log(toto.uneProprieteToto?.toUpperCase());  // "COUCOU"
+console.log(toto.uneProprieteTiti?.toUpperCase()); // undefined
+```
+
+## Spécifications
+
+| Spécification                                                                                    |
+| ------------------------------------------------------------------------------------------------ |
+| {{SpecName('ESDraft', '#prod-Nulli', 'nullish coalescing expression')}} |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.operators.nullish_coalescing")}}
+
+## Voir aussi
+
+- [_Falsy values_ (Valeurs équivalentes à `false` dans un contexte booléen)](/fr/docs/Glossaire/Falsy)
+- [Opérateur de chaînage optionnel (_optional chaining_)](/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Optional_chaining)
+- [Opérateur logique OU (`||`)](/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_logiques#Logical_OR)
+- [Valeurs par défaut des arguments](/fr/docs/Web/JavaScript/Reference/Fonctions/Valeurs_par_d%C3%A9faut_des_arguments)
diff --git a/files/fr/web/javascript/reference/operators/object_initializer/index.html b/files/fr/web/javascript/reference/operators/object_initializer/index.html
deleted file mode 100644
index b2ee021922..0000000000
--- a/files/fr/web/javascript/reference/operators/object_initializer/index.html
+++ /dev/null
@@ -1,302 +0,0 @@
----
-title: Initialisateur d'objet
-slug: Web/JavaScript/Reference/Operators/Object_initializer
-tags:
-  - ECMAScript 2015
-  - JavaScript
-  - Object
-  - Reference
-translation_of: Web/JavaScript/Reference/Operators/Object_initializer
-original_slug: Web/JavaScript/Reference/Opérateurs/Initialisateur_objet
----
-<div>{{JsSidebar("Operators")}}</div>
-
-<p>Il est possible d'initialiser un objet en utilisant les notations <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object"><code>new Object()</code></a>,<code> <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object/create">Object.create()</a></code>, ou grâce à un littéral (appelée initialisateur). Un initialisateur d'objet est une liste contenant plusieurs (éventuellement 0) propriétés, séparées par des virgules, et leurs valeurs associées, cette liste étant entourée d'accolades (<code>{}</code>).</p>
-
-<div>{{EmbedInteractiveExample("pages/js/expressions-objectinitializer.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="brush: js">var o = {};
-var o = { a: "toto", b: 42, c: {} };
-
-var a = "toto", b = 42, c = {};
-var o = { a: a, b: b, c: c };
-
-var o = {
-  <var>property: function </var>(<var>paramètres</var>) {},
-  get property() {},
-  set property(<var>valeur</var>) {}
-};
-</pre>
-
-<h3 id="Nouvelles_notations_ECMAScript_2015_(ES6)">Nouvelles notations ECMAScript 2015 (ES6)</h3>
-
-<p>ECMAScript 2015 (ES6) introduit de nouvelles notations. Pour plus d'informations sur la compatibilité de ces notations avec les différents environnements, se référer au tableau de compatibilité ci-après.</p>
-
-<pre class="brush: js">// Raccourcis pour les noms de propriétés (ES2015)
-var a = "toto", b = 42, c = {};
-var o = { a, b, c };
-
-// Raccourcis pour les noms de méthodes(ES2015)
-var o = {
-  <var>property</var>(<var>paramètres</var>) {}
-};
-
-// Noms calculés pour les propriétés (ES2015)
-var prop = "toto";
-var o = {
-  [prop]: "hey",
-  ["tr" + "uc"]: "ho",
-};</pre>
-
-<h2 id="Description">Description</h2>
-
-<p>Un initialisateur d'objet est une expression qui permet de décrire l'initialisation d'un {{jsxref("Object")}}. Les objets sont constitués de propriétés qui permettent de les décrire. Les valeurs des propriétés d'un objet peuvent être construites à partir de <a href="/fr/docs/Web/JavaScript/Structures_de_données#Les_valeurs_primitives">types de données primitifs</a> ou à partir d'autres objets.</p>
-
-<h3 id="Créer_des_objets">Créer des objets</h3>
-
-<p>On peut créer un objet sans aucune propriété grâce à l'expression suivante :</p>
-
-<pre class="brush: js">var objet = {};</pre>
-
-<p>Cependant, en utilisant un littéral ou un initialisateur, on peut créer des objets disposant de propriétés rapidement. Il suffit d'inscrire une liste de clés-valeurs séparées par des virgules. Le fragment de code qui suit permet de créer un objet avec trois propriétés identifiées par les clés <code>"toto"</code>, <code>"âge"</code> et <code>"machin"</code>. Les valeurs respectives de ces différentes propriétés sont : la chaîne de caractères <code>"truc"</code>, le nombre <code>42</code> et un autre objet.</p>
-
-<pre class="brush: js">var object = {
-  toto: 'truc',
-  âge: 42,
-  machin: { maProp: 12 },
-}</pre>
-
-<h3 id="Accéder_à_des_propriétés">Accéder à des propriétés</h3>
-
-<p>Après la création d'un objet, vous pourrez avoir besoin de consulter ou de modifier ses propriétés. Il est possible d'accéder aux propriétés d'un objet en utilisant un point ou des crochets. Voir la page sur les <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_de_membres">accesseurs de propriétés</a> pour plus d'information.</p>
-
-<pre class="brush: js">object.toto; // "truc"
-object['âge']; // 42
-
-object.toto = 'machin';
-</pre>
-
-<h3 id="Définir_des_propriétés">Définir des propriétés</h3>
-
-<p>On a déjà vu comment on pouvait utiliser la syntaxe de l'initialisateur pour définir des propriétés. Il arrive souvent de vouloir utiliser des variables comme propriétés d'un objet. C'est pourquoi on peut trouver le code suivant :</p>
-
-<pre class="brush: js">var a = 'toto',
-    b = 42,
-    c = {};
-
-var o = {
-  a: a,
-  b: b,
-  c: c
-};</pre>
-
-<p>Avec ECMAScript 2015 (ES6), on peut utiliser une notation plus courte pour un résultat égal :</p>
-
-<pre class="brush: js">var a = 'toto',
-    b = 42,
-    c = {};
-
-// Raccourcis sur les noms de propriétés (ES2015)
-var o = { a, b, c };
-
-// Autrement dit
-console.log((o.a === { a }.a)); // true
-</pre>
-
-<h4 id="Les_duplicatas_et_les_noms_de_propriétés">Les duplicatas et les noms de propriétés</h4>
-
-<p>Si le même nom est utilisé plusieurs fois pour différentes propriétés, ce sera la dernière propriété qui sera prise en compte :</p>
-
-<pre class="brush: js">var a = {x: 1, x: 2};
-console.log(a); // { x: 2}
-</pre>
-
-<p>Le mode strict d'ECMAScript 5 renvoyait une exception {{jsxref("SyntaxError")}} lorsque plusieurs propriétés avaient le même nom. ECMAScript 2015 (ES6) permettant de créer des propriétés avec des noms qui sont calculés à l'exécution, cette restriction a été retirée.</p>
-
-<pre class="brush: js">function vérifierSémantiqueES2015(){
-  'use strict';
-  try {
-    ({ prop: 1, prop: 2 });
-
-    // Aucune erreur, la sémantique en cours consiste à accepter les propriétés dupliquées
-    return true;
-  } catch (e) {
-    // Une erreur est renvoyée : les duplicatas sont interdits en mode strict
-    return false;
-  }
-}</pre>
-
-<h3 id="Définitions_de_méthodes">Définitions de méthodes</h3>
-
-<p>Une propriété d'un objet peut être une <a href="/fr/docs/Web/JavaScript/Reference/Functions">function</a>, un <a href="/fr/docs/Web/JavaScript/Reference/Functions/get">accesseur</a> ou un <a href="/fr/docs/Web/JavaScript/Reference/Functions/set">mutateur</a> :</p>
-
-<pre class="brush: js">var o = {
-  <var>property: function </var>(<var>paramètres</var>) {},
-  get <var>property</var>() {},
-  set <var>property</var>(<var>valeur</var>) {}
-};</pre>
-
-<p>Avec ECMAScript 2015 (ES6), une notation raccourcie permet de ne plus utiliser le mot-clé "<code>function</code>".</p>
-
-<pre class="brush: js">// Raccourci pour les noms de méthodes (ES2015)
-var o = {
-  <var>property</var>(<em>paramètres</em>) {},
-  *<var>generator</var>() {}
-};</pre>
-
-<p>Ou encore :</p>
-
-<pre class="brush: js">var o = {
-  *generator() {
-    ...
-  }
-};</pre>
-
-<p>En utilisant uniquement ECMAScript 5, on aurait écrit :</p>
-
-<p><em>(Il n'y a pas de function génératrice en ECMAScript5, mais l'exemple permet de comprendre l'évolution de la syntaxe) :</em></p>
-
-<pre class="brush: js">var o = {
-  generator: function* (){}
-};
-</pre>
-
-<p>Pour plus d'informations et d'exemples sur les méthodes, voir la page concernant les<a href="/fr/docs/Web/JavaScript/Reference/Functions/Method_definitions"> définitions de méthode</a>.</p>
-
-<h3 id="Noms_de_propriétés_calculés">Noms de propriétés calculés</h3>
-
-<p>Avec ECMAScript 2015 (ES6), on peut utiliser un initialisateur et avoir des noms de propriétés qui soient calculés lors de l'exécution. Ainsi, en plaçant une expression entre crochets <code>[]</code>, celle-ci sera calculée pour déterminer le nom de la propriété. Cette notation est la symétrique des crochets utilisés pour accéder aux propriétés. Il est désormais possible d'utiliser cette notation dans les littéraux objets :</p>
-
-<pre class="brush: js">// Calcul des noms de propriétés (ES2015)
-var i = 0;
-var a = {
-  ['toto' + ++i]: i,
-  ['toto' + ++i]: i,
-  ['toto' + ++i]: i
-};
-
-console.log(a.toto1); // 1
-console.log(a.toto2); // 2
-console.log(a.toto3); // 3
-
-var param = 'taille';
-var config = {
-  [param]: 12,
-  ['mobile' + param.charAt(0).toUpperCase() + param.slice(1)]: 4
-};
-
-console.log(config); // { taille: 12, mobileTaille: 4 }</pre>
-
-<h3 id="Décomposition_des_propriétés">Décomposition des propriétés</h3>
-
-<p>La proposition de la décomposition des propriétés à ECMAScript (au niveau 4, finalisée) vise à permettre la décomposition des propriétés dans les littéraux objets. Cela permet de copier les propriétés énumérables directes à partir d'un objet source vers un nouvel objet.</p>
-
-<p>Le clonage superficiel (sans rattacher le prototype) ou la fusion d'objets pourra désormais être écrite de façon plus concise qu'avec {{jsxref("Object.assign()")}}.</p>
-
-<pre class="brush: js">var obj1 = { toto: 'truc', x: 42 };
-var obj2 = { toto: 'bidule', y: 13 };
-
-var clone = { ...obj1 };
-// Object { toto: 'truc', x: 42 }
-
-var fusion = { ...obj1, ...obj2 };
-// Object { toto: 'bidule', x: 42, y: 13 };
-</pre>
-
-<p>On notera que la méthode {{jsxref("Object.assign()")}} déclenche <a href="/fr/docs/Web/JavaScript/Reference/Fonctions/set">les mutateurs</a>, ce qui n'est pas le cas de l'opérateur de décomposition.</p>
-
-<h3 id="Changement_de_prototype">Changement de prototype</h3>
-
-<p>Définir une propriété avec la syntaxe <code>__proto__: valeur</code> ou <code>"__proto__": valeur</code> ne permet pas de créer une propriété avec le nom <code>__proto__</code>. Si la valeur fournie est un objet ou est <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/null"><code>null</code></a>, cela modifie le <code>[[Prototype]]</code> de l'objet. (Si la valeur fournie n'est pas un objet ou n'est pas null, l'objet ne sera pas modifié.)</p>
-
-<pre class="brush: js">var obj1 = {};
-assert(Object.getPrototypeOf(obj1) === Object.prototype);
-
-var obj2 = { __proto__: null };
-assert(Object.getPrototypeOf(obj2) === null);
-
-var protoObj = {};
-var obj3 = { '__proto__': protoObj };
-assert(Object.getPrototypeOf(obj3) === protoObj);
-
-var obj4 = { __proto__: "not an object or null" };
-assert(Object.getPrototypeOf(obj4) === Object.prototype);
-assert(!obj4.hasOwnProperty("__proto__"));
-</pre>
-
-<p>On ne peut modifier le prototype qu'une seule fois pour une même notation littérale. Toute tentative pour modifier le prototype plusieurs fois renverra une erreur de syntaxe.</p>
-
-<p>Les définitions de propriétés qui n'utilisent pas les deux points ne permettent pas de modifier le prototype, elles définieront une propriété de façon classique.</p>
-
-<pre class="brush: js">var __proto__ = 'variable';
-
-var obj1 = { __proto__ };
-assert(Object.getPrototypeOf(obj1) === Object.prototype);
-assert(obj1.hasOwnProperty('__proto__'));
-assert(obj1.__proto__ === 'variable');
-
-var obj2 = { __proto__() { return 'hello'; } };
-assert(obj2.__proto__() === 'hello');
-
-var obj3 = { ['__prot' + 'o__']: 17 };
-assert(obj3.__proto__ === 17);
-</pre>
-
-<h2 id="Notation_littérale_et_JSON">Notation littérale et JSON</h2>
-
-<p>La notation utilisant un littéral objet n'est pas identique à celle utilisée par la <strong>J</strong>ava<strong>S</strong>cript <strong>O</strong>bject <strong>N</strong>otation (<a href="/fr/docs/JSON">JSON</a>). Bien que ces notations se ressemblent, il existe certaines différences :</p>
-
-<ul>
- <li>JSON ne permet de définir des propriétés qu'en utilisant la syntaxe <code>"propriété": valeur</code>. Le nom de la propriété doit être entouré de double-quotes et la définition de la propriété ne peut pas être raccourcie.</li>
- <li>En JSON les valeurs ne peuvent être uniquement que des chaînes de caractères, des nombres, des tableaux, <code>true</code>, <code>false</code>, <code>null</code>, ou tout autre objet (JSON).</li>
- <li>Une valeur de fonction (voir le paragraphe "Méthodes" ci-avant) ne peut pas être affectée comme valeur en JSON.</li>
- <li>Les objets {{jsxref("Date")}} seront convertis en chaînes de caractères avec {{jsxref("JSON.parse()")}}.</li>
- <li>{{jsxref("JSON.parse()")}} rejètera les noms de propriétés calculés et renverra une erreur dans ce cas.</li>
-</ul>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES1')}}</td>
-   <td>{{Spec2('ES1')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-11.1.5', 'Object Initializer')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td><a href="/fr/docs/Web/JavaScript/Reference/Functions/get">Ajout des <em>getter</em> et </a><em><a href="/fr/docs/Web/JavaScript/Reference/Functions/set">setter</a></em> (accesseur/mutateur).</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-object-initializer', 'Object Initializer')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td>Ajout des raccourcis pour les noms de méthodes et propriétés et des noms de propriétés calculés.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-object-initializer', 'Object Initializer')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.operators.object_initializer")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_de_membres">Accesseurs de propriétés</a></li>
- <li><code><a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/L_op%C3%A9rateur_get">get</a></code> / <code><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_set">set</a></code></li>
- <li><a href="/fr/docs/Web/JavaScript/Reference/Fonctions/Définition_de_méthode">Définitions de méthode</a></li>
- <li><a href="/fr/docs/Web/JavaScript/Reference/Grammaire_lexicale">Grammaire lexicale</a> de JavaScript</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/operators/object_initializer/index.md b/files/fr/web/javascript/reference/operators/object_initializer/index.md
new file mode 100644
index 0000000000..05f0cabe3f
--- /dev/null
+++ b/files/fr/web/javascript/reference/operators/object_initializer/index.md
@@ -0,0 +1,301 @@
+---
+title: Initialisateur d'objet
+slug: Web/JavaScript/Reference/Operators/Object_initializer
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Object
+  - Reference
+translation_of: Web/JavaScript/Reference/Operators/Object_initializer
+original_slug: Web/JavaScript/Reference/Opérateurs/Initialisateur_objet
+---
+{{JsSidebar("Operators")}}
+
+Il est possible d'initialiser un objet en utilisant les notations [`new Object()`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object),` Object.create()`, ou grâce à un littéral (appelée initialisateur). Un initialisateur d'objet est une liste contenant plusieurs (éventuellement 0) propriétés, séparées par des virgules, et leurs valeurs associées, cette liste étant entourée d'accolades (`{}`).
+
+{{EmbedInteractiveExample("pages/js/expressions-objectinitializer.html")}}
+
+## Syntaxe
+
+```js
+var o = {};
+var o = { a: "toto", b: 42, c: {} };
+
+var a = "toto", b = 42, c = {};
+var o = { a: a, b: b, c: c };
+
+var o = {
+  property: function (paramètres) {},
+  get property() {},
+  set property(valeur) {}
+};
+```
+
+### Nouvelles notations ECMAScript 2015 (ES6)
+
+ECMAScript 2015 (ES6) introduit de nouvelles notations. Pour plus d'informations sur la compatibilité de ces notations avec les différents environnements, se référer au tableau de compatibilité ci-après.
+
+```js
+// Raccourcis pour les noms de propriétés (ES2015)
+var a = "toto", b = 42, c = {};
+var o = { a, b, c };
+
+// Raccourcis pour les noms de méthodes(ES2015)
+var o = {
+  property(paramètres) {}
+};
+
+// Noms calculés pour les propriétés (ES2015)
+var prop = "toto";
+var o = {
+  [prop]: "hey",
+  ["tr" + "uc"]: "ho",
+};
+```
+
+## Description
+
+Un initialisateur d'objet est une expression qui permet de décrire l'initialisation d'un {{jsxref("Object")}}. Les objets sont constitués de propriétés qui permettent de les décrire. Les valeurs des propriétés d'un objet peuvent être construites à partir de [types de données primitifs](/fr/docs/Web/JavaScript/Structures_de_données#Les_valeurs_primitives) ou à partir d'autres objets.
+
+### Créer des objets
+
+On peut créer un objet sans aucune propriété grâce à l'expression suivante :
+
+```js
+var objet = {};
+```
+
+Cependant, en utilisant un littéral ou un initialisateur, on peut créer des objets disposant de propriétés rapidement. Il suffit d'inscrire une liste de clés-valeurs séparées par des virgules. Le fragment de code qui suit permet de créer un objet avec trois propriétés identifiées par les clés `"toto"`, `"âge"` et `"machin"`. Les valeurs respectives de ces différentes propriétés sont : la chaîne de caractères `"truc"`, le nombre `42` et un autre objet.
+
+```js
+var object = {
+  toto: 'truc',
+  âge: 42,
+  machin: { maProp: 12 },
+}
+```
+
+### Accéder à des propriétés
+
+Après la création d'un objet, vous pourrez avoir besoin de consulter ou de modifier ses propriétés. Il est possible d'accéder aux propriétés d'un objet en utilisant un point ou des crochets. Voir la page sur les [accesseurs de propriétés](/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_de_membres) pour plus d'information.
+
+```js
+object.toto; // "truc"
+object['âge']; // 42
+
+object.toto = 'machin';
+```
+
+### Définir des propriétés
+
+On a déjà vu comment on pouvait utiliser la syntaxe de l'initialisateur pour définir des propriétés. Il arrive souvent de vouloir utiliser des variables comme propriétés d'un objet. C'est pourquoi on peut trouver le code suivant :
+
+```js
+var a = 'toto',
+    b = 42,
+    c = {};
+
+var o = {
+  a: a,
+  b: b,
+  c: c
+};
+```
+
+Avec ECMAScript 2015 (ES6), on peut utiliser une notation plus courte pour un résultat égal :
+
+```js
+var a = 'toto',
+    b = 42,
+    c = {};
+
+// Raccourcis sur les noms de propriétés (ES2015)
+var o = { a, b, c };
+
+// Autrement dit
+console.log((o.a === { a }.a)); // true
+```
+
+#### Les duplicatas et les noms de propriétés
+
+Si le même nom est utilisé plusieurs fois pour différentes propriétés, ce sera la dernière propriété qui sera prise en compte :
+
+```js
+var a = {x: 1, x: 2};
+console.log(a); // { x: 2}
+```
+
+Le mode strict d'ECMAScript 5 renvoyait une exception {{jsxref("SyntaxError")}} lorsque plusieurs propriétés avaient le même nom. ECMAScript 2015 (ES6) permettant de créer des propriétés avec des noms qui sont calculés à l'exécution, cette restriction a été retirée.
+
+```js
+function vérifierSémantiqueES2015(){
+  'use strict';
+  try {
+    ({ prop: 1, prop: 2 });
+
+    // Aucune erreur, la sémantique en cours consiste à accepter les propriétés dupliquées
+    return true;
+  } catch (e) {
+    // Une erreur est renvoyée : les duplicatas sont interdits en mode strict
+    return false;
+  }
+}
+```
+
+### Définitions de méthodes
+
+Une propriété d'un objet peut être une [function](/fr/docs/Web/JavaScript/Reference/Functions), un [accesseur](/fr/docs/Web/JavaScript/Reference/Functions/get) ou un [mutateur](/fr/docs/Web/JavaScript/Reference/Functions/set) :
+
+```js
+var o = {
+  property: function (paramètres) {},
+  get property() {},
+  set property(valeur) {}
+};
+```
+
+Avec ECMAScript 2015 (ES6), une notation raccourcie permet de ne plus utiliser le mot-clé "`function`".
+
+```js
+// Raccourci pour les noms de méthodes (ES2015)
+var o = {
+  property(paramètres) {},
+  *generator() {}
+};
+```
+
+Ou encore :
+
+```js
+var o = {
+  *generator() {
+    ...
+  }
+};
+```
+
+En utilisant uniquement ECMAScript 5, on aurait écrit :
+
+_(Il n'y a pas de function génératrice en ECMAScript5, mais l'exemple permet de comprendre l'évolution de la syntaxe) :_
+
+```js
+var o = {
+  generator: function* (){}
+};
+```
+
+Pour plus d'informations et d'exemples sur les méthodes, voir la page concernant les[ définitions de méthode](/fr/docs/Web/JavaScript/Reference/Functions/Method_definitions).
+
+### Noms de propriétés calculés
+
+Avec ECMAScript 2015 (ES6), on peut utiliser un initialisateur et avoir des noms de propriétés qui soient calculés lors de l'exécution. Ainsi, en plaçant une expression entre crochets `[]`, celle-ci sera calculée pour déterminer le nom de la propriété. Cette notation est la symétrique des crochets utilisés pour accéder aux propriétés. Il est désormais possible d'utiliser cette notation dans les littéraux objets :
+
+```js
+// Calcul des noms de propriétés (ES2015)
+var i = 0;
+var a = {
+  ['toto' + ++i]: i,
+  ['toto' + ++i]: i,
+  ['toto' + ++i]: i
+};
+
+console.log(a.toto1); // 1
+console.log(a.toto2); // 2
+console.log(a.toto3); // 3
+
+var param = 'taille';
+var config = {
+  [param]: 12,
+  ['mobile' + param.charAt(0).toUpperCase() + param.slice(1)]: 4
+};
+
+console.log(config); // { taille: 12, mobileTaille: 4 }
+```
+
+### Décomposition des propriétés
+
+La proposition de la décomposition des propriétés à ECMAScript (au niveau 4, finalisée) vise à permettre la décomposition des propriétés dans les littéraux objets. Cela permet de copier les propriétés énumérables directes à partir d'un objet source vers un nouvel objet.
+
+Le clonage superficiel (sans rattacher le prototype) ou la fusion d'objets pourra désormais être écrite de façon plus concise qu'avec {{jsxref("Object.assign()")}}.
+
+```js
+var obj1 = { toto: 'truc', x: 42 };
+var obj2 = { toto: 'bidule', y: 13 };
+
+var clone = { ...obj1 };
+// Object { toto: 'truc', x: 42 }
+
+var fusion = { ...obj1, ...obj2 };
+// Object { toto: 'bidule', x: 42, y: 13 };
+```
+
+On notera que la méthode {{jsxref("Object.assign()")}} déclenche [les mutateurs](/fr/docs/Web/JavaScript/Reference/Fonctions/set), ce qui n'est pas le cas de l'opérateur de décomposition.
+
+### Changement de prototype
+
+Définir une propriété avec la syntaxe `__proto__: valeur` ou `"__proto__": valeur` ne permet pas de créer une propriété avec le nom `__proto__`. Si la valeur fournie est un objet ou est [`null`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/null), cela modifie le `[[Prototype]]` de l'objet. (Si la valeur fournie n'est pas un objet ou n'est pas null, l'objet ne sera pas modifié.)
+
+```js
+var obj1 = {};
+assert(Object.getPrototypeOf(obj1) === Object.prototype);
+
+var obj2 = { __proto__: null };
+assert(Object.getPrototypeOf(obj2) === null);
+
+var protoObj = {};
+var obj3 = { '__proto__': protoObj };
+assert(Object.getPrototypeOf(obj3) === protoObj);
+
+var obj4 = { __proto__: "not an object or null" };
+assert(Object.getPrototypeOf(obj4) === Object.prototype);
+assert(!obj4.hasOwnProperty("__proto__"));
+```
+
+On ne peut modifier le prototype qu'une seule fois pour une même notation littérale. Toute tentative pour modifier le prototype plusieurs fois renverra une erreur de syntaxe.
+
+Les définitions de propriétés qui n'utilisent pas les deux points ne permettent pas de modifier le prototype, elles définieront une propriété de façon classique.
+
+```js
+var __proto__ = 'variable';
+
+var obj1 = { __proto__ };
+assert(Object.getPrototypeOf(obj1) === Object.prototype);
+assert(obj1.hasOwnProperty('__proto__'));
+assert(obj1.__proto__ === 'variable');
+
+var obj2 = { __proto__() { return 'hello'; } };
+assert(obj2.__proto__() === 'hello');
+
+var obj3 = { ['__prot' + 'o__']: 17 };
+assert(obj3.__proto__ === 17);
+```
+
+## Notation littérale et JSON
+
+La notation utilisant un littéral objet n'est pas identique à celle utilisée par la **J**ava**S**cript **O**bject **N**otation ([JSON](/fr/docs/JSON)). Bien que ces notations se ressemblent, il existe certaines différences :
+
+- JSON ne permet de définir des propriétés qu'en utilisant la syntaxe `"propriété": valeur`. Le nom de la propriété doit être entouré de double-quotes et la définition de la propriété ne peut pas être raccourcie.
+- En JSON les valeurs ne peuvent être uniquement que des chaînes de caractères, des nombres, des tableaux, `true`, `false`, `null`, ou tout autre objet (JSON).
+- Une valeur de fonction (voir le paragraphe "Méthodes" ci-avant) ne peut pas être affectée comme valeur en JSON.
+- Les objets {{jsxref("Date")}} seront convertis en chaînes de caractères avec {{jsxref("JSON.parse()")}}.
+- {{jsxref("JSON.parse()")}} rejètera les noms de propriétés calculés et renverra une erreur dans ce cas.
+
+## Spécifications
+
+| Spécification                                                                                    | État                         | Commentaires                                                                                                                                               |
+| ------------------------------------------------------------------------------------------------ | ---------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| {{SpecName('ES1')}}                                                                         | {{Spec2('ES1')}}         | Définition initiale.                                                                                                                                       |
+| {{SpecName('ES5.1', '#sec-11.1.5', 'Object Initializer')}}                     | {{Spec2('ES5.1')}}     | [Ajout des _getter_ et ](/fr/docs/Web/JavaScript/Reference/Functions/get)_[setter](/fr/docs/Web/JavaScript/Reference/Functions/set)_ (accesseur/mutateur). |
+| {{SpecName('ES2015', '#sec-object-initializer', 'Object Initializer')}} | {{Spec2('ES2015')}}     | Ajout des raccourcis pour les noms de méthodes et propriétés et des noms de propriétés calculés.                                                           |
+| {{SpecName('ESDraft', '#sec-object-initializer', 'Object Initializer')}} | {{Spec2('ESDraft')}} |                                                                                                                                                            |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.operators.object_initializer")}}
+
+## Voir aussi
+
+- [Accesseurs de propriétés](/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_de_membres)
+- [`get`](/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/L_op%C3%A9rateur_get) / [`set`](/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_set)
+- [Définitions de méthode](/fr/docs/Web/JavaScript/Reference/Fonctions/Définition_de_méthode)
+- [Grammaire lexicale](/fr/docs/Web/JavaScript/Reference/Grammaire_lexicale) de JavaScript
diff --git a/files/fr/web/javascript/reference/operators/operator_precedence/index.html b/files/fr/web/javascript/reference/operators/operator_precedence/index.html
deleted file mode 100644
index ca76cf3985..0000000000
--- a/files/fr/web/javascript/reference/operators/operator_precedence/index.html
+++ /dev/null
@@ -1,360 +0,0 @@
----
-title: Précédence des opérateurs
-slug: Web/JavaScript/Reference/Operators/Operator_Precedence
-tags:
-  - JavaScript
-  - Opérateur
-  - Reference
-  - precedence
-translation_of: Web/JavaScript/Reference/Operators/Operator_Precedence
-original_slug: Web/JavaScript/Reference/Opérateurs/Précédence_des_opérateurs
----
-<div>{{jsSidebar("Operators")}}</div>
-
-<p>La <strong>précédence des opérateurs</strong> détermine l'ordre dans lequel les opérateurs sont évalués. Les opérateurs avec la plus haute précédence sont évalués en premier.</p>
-
-<p>Ainsi, l'opérateur de multiplication (« <code>*</code> ») (ayant une précédence plus haute que l'opérateur d'addition (« <code>+</code> »)) est évalué en premier et l'expression <code>6 * 4 + 2</code> renverra 26 (et pas 36).</p>
-
-<div>{{EmbedInteractiveExample("pages/js/expressions-operatorprecedence.html")}}</div>
-
-
-
-<h2 id="Associativité">Associativité</h2>
-
-<p>L'associativité détermine l'ordre dans lequel des opérateurs de même précédence sont évalués. Par exemple, considérons l'expression suivante :</p>
-
-<pre class="syntaxbox">a OP b OP c
-</pre>
-
-<p>Une associativité de gauche (gauche à droite) signifie qu'elle est évaluée comme <code>(a OP b) OP c</code>, tandis qu'une associativité de droite (droite à gauche) signifie qu'elle est interprétée comme <code>a OP (b OP c)</code>. Les opérateurs d'affectation sont associatifs de droite, on peut donc écrire :</p>
-
-<pre class="brush:js">a = b = 5;
-</pre>
-
-<p>avec le résultat attendu que <code>a</code> et <code>b</code> obtiennent la même valeur de 5. C'est parce que l'opérateur d'affectation retourne la valeur qu'il affecte. D'abord, <code>b</code> est défini à la valeur 5. Ensuite, <code>a</code> est défini avec la valeur renvoyée par <code>b = 5</code> qui est 5.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<pre class="brush: js">3 &gt; 2 &amp;&amp; 2 &gt; 1
-// renvoie true
-
-3 &gt; 2 &gt; 1
-// renvoie false car 3 &gt; 2 vaut true et que true &gt; 1 vaut false
-// En ajoutant des parenthèses, on y voit plus clair (3 &gt; 2) &gt; 1
-</pre>
-
-<h2 id="Tableau">Tableau</h2>
-
-<p>Le tableau suivant est classé de la plus haute (0) à la plus basse (19) précédence.</p>
-
-<table class="fullwidth-table">
- <tbody>
-  <tr>
-   <th>Précédence</th>
-   <th>Type d'opérateur</th>
-   <th>Associativité</th>
-   <th>Opérateurs individuels</th>
-  </tr>
-  <tr>
-   <td>0</td>
-   <td><a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Groupement">Groupement</a></td>
-   <td>Non applicable</td>
-   <td><code>( … )</code></td>
-  </tr>
-  <tr>
-   <td colspan="1" rowspan="5">1</td>
-   <td><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_de_membres#Notation_avec_point">Accès à un membre</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_membres#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'op%C3%A9rateur_new">new</a></code> (avec une liste d'arguments)</td>
-   <td>Non applicable</td>
-   <td><code>new … ( … )</code></td>
-  </tr>
-  <tr>
-   <td><a href="/fr/docs/Web/JavaScript/Guide/Fonctions">Appel de fonction</a></td>
-   <td>Gauche à droite</td>
-   <td><code>… ( <var>… </var>)</code></td>
-  </tr>
-  <tr>
-   <td><a href="/fr/docs/Web/JavaScript/Reference/Operators/Optional_chaining">Chaînage optionnel</a></td>
-   <td>Gauche à droite</td>
-   <td><code>?.</code></td>
-  </tr>
-  <tr>
-   <td>2</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'op%C3%A9rateur_new">new</a></code> (sans liste d'arguments)</td>
-   <td>Droite à gauche</td>
-   <td><code>new …</code></td>
-  </tr>
-  <tr>
-   <td rowspan="2">3</td>
-   <td><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_arithmétiques#Incr.C3.A9ment_(.2B.2B)">Incrémentation suffixe</a></td>
-   <td>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_(--)">Décrémentation suffixe</a></td>
-   <td>Non applicable</td>
-   <td><code>… --</code></td>
-  </tr>
-  <tr>
-   <td colspan="1" rowspan="10">4</td>
-   <td><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_logiques#Logical_NOT_.28.21.29">NON logique</a></td>
-   <td>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></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></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></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)">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_(--)">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">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">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">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">await</a></code></td>
-   <td>Droite à gauche</td>
-   <td><code>await …</code></td>
-  </tr>
-  <tr>
-   <td rowspan="4">5</td>
-   <td><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_arithmétiques#Exponentiation_(**)">Exponentiation</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#Multiplication_(*)">Multiplication</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#Division_(.2F)">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></td>
-   <td>Gauche à droite</td>
-   <td><code>… % …</code></td>
-  </tr>
-  <tr>
-   <td rowspan="2">6</td>
-   <td><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_arithmétiques#Addition_(.2B)">Addition</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#Soustraction_(-)">Soustraction</a></td>
-   <td>Gauche à droite</td>
-   <td><code>… - …</code></td>
-  </tr>
-  <tr>
-   <td rowspan="3">7</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></td>
-   <td>Gauche à droite</td>
-   <td><code>… &lt;&lt; …</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></td>
-   <td>Gauche à droite</td>
-   <td><code>… &gt;&gt; …</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></td>
-   <td>Gauche à droite</td>
-   <td><code>… &gt;&gt;&gt; …</code></td>
-  </tr>
-  <tr>
-   <td rowspan="6">8</td>
-   <td><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_de_comparaison#Inf.C3.A9rieur_strict_(&lt;)">Inférieur strict</a></td>
-   <td>Gauche à droite</td>
-   <td><code>… &lt; …</code></td>
-  </tr>
-  <tr>
-   <td><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_de_comparaison#Inf.C3.A9rieur_ou_.C3.A9gal_(&lt;.3D)">Inférieur ou égal</a></td>
-   <td>Gauche à droite</td>
-   <td><code>… &lt;= …</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></td>
-   <td>Gauche à droite</td>
-   <td><code>… &gt; …</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></td>
-   <td>Gauche à droite</td>
-   <td><code>… &gt;= …</code></td>
-  </tr>
-  <tr>
-   <td><code><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_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">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></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_simple_(!.3D)">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></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></td>
-   <td>Gauche à droite</td>
-   <td><code>… !== …</code></td>
-  </tr>
-  <tr>
-   <td>10</td>
-   <td><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_binaires#&amp;_.28ET_binaire.29">ET binaire</a></td>
-   <td>Gauche à droite</td>
-   <td><code>… &amp; …</code></td>
-  </tr>
-  <tr>
-   <td>11</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></td>
-   <td>Gauche à droite</td>
-   <td><code>… ^ …</code></td>
-  </tr>
-  <tr>
-   <td>12</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></td>
-   <td>Gauche à droite</td>
-   <td><code>… | …</code></td>
-  </tr>
-  <tr>
-   <td>13</td>
-   <td><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_logiques#Logical_AND_.28&amp;&amp;.29">ET logique</a></td>
-   <td>Gauche à droite</td>
-   <td><code>… &amp;&amp; …</code></td>
-  </tr>
-  <tr>
-   <td>14</td>
-   <td><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_logiques#OU_logique_(.7C.7C)">OU logique</a></td>
-   <td>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">Opérateur conditionnel ternaire</a></td>
-   <td>Droite à gauche</td>
-   <td><code>… ? … : …</code></td>
-  </tr>
-  <tr>
-   <td rowspan="13">16</td>
-   <td rowspan="13"><a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_d_affectation">Affectation</a></td>
-   <td rowspan="13">Droite à gauche</td>
-   <td><code>… = …</code></td>
-  </tr>
-  <tr>
-   <td><code>… += …</code></td>
-  </tr>
-  <tr>
-   <td><code>… -= …</code></td>
-  </tr>
-  <tr>
-   <td><code>… *= …</code></td>
-  </tr>
-  <tr>
-   <td><code>… /= …</code></td>
-  </tr>
-  <tr>
-   <td><code>… **= …</code></td>
-  </tr>
-  <tr>
-   <td><code>… %= …</code></td>
-  </tr>
-  <tr>
-   <td><code>… &lt;&lt;= …</code></td>
-  </tr>
-  <tr>
-   <td><code>… &gt;&gt;= …</code></td>
-  </tr>
-  <tr>
-   <td><code>… &gt;&gt;&gt;= …</code></td>
-  </tr>
-  <tr>
-   <td><code>… &amp;= …</code></td>
-  </tr>
-  <tr>
-   <td><code>… ^= …</code></td>
-  </tr>
-  <tr>
-   <td><code>… |= …</code></td>
-  </tr>
-  <tr>
-   <td colspan="1" rowspan="2">17</td>
-   <td><code><a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/yield">yield</a></code></td>
-   <td>Droite à gauche</td>
-   <td><code>yield …</code></td>
-  </tr>
-  <tr>
-   <td><code><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/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><a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/L_op%C3%A9rateur_virgule">Virgule</a></td>
-   <td>Gauche à droite</td>
-   <td><code>… , …</code></td>
-  </tr>
- </tbody>
-</table>
diff --git a/files/fr/web/javascript/reference/operators/operator_precedence/index.md b/files/fr/web/javascript/reference/operators/operator_precedence/index.md
new file mode 100644
index 0000000000..367e9624fb
--- /dev/null
+++ b/files/fr/web/javascript/reference/operators/operator_precedence/index.md
@@ -0,0 +1,620 @@
+---
+title: Précédence des opérateurs
+slug: Web/JavaScript/Reference/Operators/Operator_Precedence
+tags:
+  - JavaScript
+  - Opérateur
+  - Reference
+  - precedence
+translation_of: Web/JavaScript/Reference/Operators/Operator_Precedence
+original_slug: Web/JavaScript/Reference/Opérateurs/Précédence_des_opérateurs
+---
+{{jsSidebar("Operators")}}
+
+La **précédence des opérateurs** détermine l'ordre dans lequel les opérateurs sont évalués. Les opérateurs avec la plus haute précédence sont évalués en premier.
+
+Ainsi, l'opérateur de multiplication (« `*` ») (ayant une précédence plus haute que l'opérateur d'addition (« `+` »)) est évalué en premier et l'expression `6 * 4 + 2` renverra 26 (et pas 36).
+
+{{EmbedInteractiveExample("pages/js/expressions-operatorprecedence.html")}}
+
+## Associativité
+
+L'associativité détermine l'ordre dans lequel des opérateurs de même précédence sont évalués. Par exemple, considérons l'expression suivante :
+
+    a OP b OP c
+
+Une associativité de gauche (gauche à droite) signifie qu'elle est évaluée comme `(a OP b) OP c`, tandis qu'une associativité de droite (droite à gauche) signifie qu'elle est interprétée comme `a OP (b OP c)`. Les opérateurs d'affectation sont associatifs de droite, on peut donc écrire :
+
+```js
+a = b = 5;
+```
+
+avec le résultat attendu que `a` et `b` obtiennent la même valeur de 5. C'est parce que l'opérateur d'affectation retourne la valeur qu'il affecte. D'abord, `b` est défini à la valeur 5. Ensuite, `a` est défini avec la valeur renvoyée par `b = 5` qui est 5.
+
+## Exemples
+
+```js
+3 > 2 && 2 > 1
+// renvoie true
+
+3 > 2 > 1
+// renvoie false car 3 > 2 vaut true et que true > 1 vaut false
+// En ajoutant des parenthèses, on y voit plus clair (3 > 2) > 1
+```
+
+## Tableau
+
+Le tableau suivant est classé de la plus haute (0) à la plus basse (19) précédence.
+
+<table class="fullwidth-table">
+  <tbody>
+    <tr>
+      <th>Précédence</th>
+      <th>Type d'opérateur</th>
+      <th>Associativité</th>
+      <th>Opérateurs individuels</th>
+    </tr>
+    <tr>
+      <td>0</td>
+      <td>
+        <a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Groupement"
+          >Groupement</a
+        >
+      </td>
+      <td>Non applicable</td>
+      <td><code>( … )</code></td>
+    </tr>
+    <tr>
+      <td colspan="1" rowspan="5">1</td>
+      <td>
+        <a
+          href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_de_membres#Notation_avec_point"
+          >Accès à un membre</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_membres#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"
+            >new</a
+          ></code
+        >
+        (avec une liste d'arguments)
+      </td>
+      <td>Non applicable</td>
+      <td><code>new … ( … )</code></td>
+    </tr>
+    <tr>
+      <td>
+        <a href="/fr/docs/Web/JavaScript/Guide/Fonctions">Appel de fonction</a>
+      </td>
+      <td>Gauche à droite</td>
+      <td>
+        <code>… ( <var>… </var>)</code>
+      </td>
+    </tr>
+    <tr>
+      <td>
+        <a href="/fr/docs/Web/JavaScript/Reference/Operators/Optional_chaining"
+          >Chaînage optionnel</a
+        >
+      </td>
+      <td>Gauche à droite</td>
+      <td><code>?.</code></td>
+    </tr>
+    <tr>
+      <td>2</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"
+            >new</a
+          ></code
+        >
+        (sans liste d'arguments)
+      </td>
+      <td>Droite à gauche</td>
+      <td><code>new …</code></td>
+    </tr>
+    <tr>
+      <td rowspan="2">3</td>
+      <td>
+        <a
+          href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_arithmétiques#Incr.C3.A9ment_(.2B.2B)"
+          >Incrémentation suffixe</a
+        >
+      </td>
+      <td>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_(--)"
+          >Décrémentation suffixe</a
+        >
+      </td>
+      <td>Non applicable</td>
+      <td><code>… --</code></td>
+    </tr>
+    <tr>
+      <td colspan="1" rowspan="10">4</td>
+      <td>
+        <a
+          href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_logiques#Logical_NOT_.28.21.29"
+          >NON logique</a
+        >
+      </td>
+      <td>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
+        >
+      </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
+        >
+      </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
+        >
+      </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)"
+          >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_(--)"
+          >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"
+            >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"
+            >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"
+            >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"
+            >await</a
+          ></code
+        >
+      </td>
+      <td>Droite à gauche</td>
+      <td><code>await …</code></td>
+    </tr>
+    <tr>
+      <td rowspan="4">5</td>
+      <td>
+        <a
+          href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_arithmétiques#Exponentiation_(**)"
+          >Exponentiation</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#Multiplication_(*)"
+          >Multiplication</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#Division_(.2F)"
+          >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
+        >
+      </td>
+      <td>Gauche à droite</td>
+      <td><code>… % …</code></td>
+    </tr>
+    <tr>
+      <td rowspan="2">6</td>
+      <td>
+        <a
+          href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_arithmétiques#Addition_(.2B)"
+          >Addition</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#Soustraction_(-)"
+          >Soustraction</a
+        >
+      </td>
+      <td>Gauche à droite</td>
+      <td><code>… - …</code></td>
+    </tr>
+    <tr>
+      <td rowspan="3">7</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
+        >
+      </td>
+      <td>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
+        >
+      </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
+        >
+      </td>
+      <td>Gauche à droite</td>
+      <td><code>… >>> …</code></td>
+    </tr>
+    <tr>
+      <td rowspan="6">8</td>
+      <td>
+        <a
+          href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_de_comparaison#Inf.C3.A9rieur_strict_(<)"
+          >Inférieur strict</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#Inf.C3.A9rieur_ou_.C3.A9gal_(<.3D)"
+          >Inférieur ou égal</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
+        >
+      </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
+        >
+      </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"
+            >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"
+            >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
+        >
+      </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_simple_(!.3D)"
+          >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
+        >
+      </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
+        >
+      </td>
+      <td>Gauche à droite</td>
+      <td><code>… !== …</code></td>
+    </tr>
+    <tr>
+      <td>10</td>
+      <td>
+        <a
+          href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_binaires#&#x26;_.28ET_binaire.29"
+          >ET binaire</a
+        >
+      </td>
+      <td>Gauche à droite</td>
+      <td><code>… &#x26; …</code></td>
+    </tr>
+    <tr>
+      <td>11</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
+        >
+      </td>
+      <td>Gauche à droite</td>
+      <td><code>… ^ …</code></td>
+    </tr>
+    <tr>
+      <td>12</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
+        >
+      </td>
+      <td>Gauche à droite</td>
+      <td><code>… | …</code></td>
+    </tr>
+    <tr>
+      <td>13</td>
+      <td>
+        <a
+          href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_logiques#Logical_AND_.28&#x26;&#x26;.29"
+          >ET logique</a
+        >
+      </td>
+      <td>Gauche à droite</td>
+      <td><code>… &#x26;&#x26; …</code></td>
+    </tr>
+    <tr>
+      <td>14</td>
+      <td>
+        <a
+          href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_logiques#OU_logique_(.7C.7C)"
+          >OU logique</a
+        >
+      </td>
+      <td>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"
+          >Opérateur conditionnel ternaire</a
+        >
+      </td>
+      <td>Droite à gauche</td>
+      <td><code>… ? … : …</code></td>
+    </tr>
+    <tr>
+      <td rowspan="13">16</td>
+      <td rowspan="13">
+        <a
+          href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_d_affectation"
+          >Affectation</a
+        >
+      </td>
+      <td rowspan="13">Droite à gauche</td>
+      <td><code>… = …</code></td>
+    </tr>
+    <tr>
+      <td><code>… += …</code></td>
+    </tr>
+    <tr>
+      <td><code>… -= …</code></td>
+    </tr>
+    <tr>
+      <td><code>… *= …</code></td>
+    </tr>
+    <tr>
+      <td><code>… /= …</code></td>
+    </tr>
+    <tr>
+      <td><code>… **= …</code></td>
+    </tr>
+    <tr>
+      <td><code>… %= …</code></td>
+    </tr>
+    <tr>
+      <td><code>… &#x3C;&#x3C;= …</code></td>
+    </tr>
+    <tr>
+      <td><code>… >>= …</code></td>
+    </tr>
+    <tr>
+      <td><code>… >>>= …</code></td>
+    </tr>
+    <tr>
+      <td><code>… &#x26;= …</code></td>
+    </tr>
+    <tr>
+      <td><code>… ^= …</code></td>
+    </tr>
+    <tr>
+      <td><code>… |= …</code></td>
+    </tr>
+    <tr>
+      <td colspan="1" rowspan="2">17</td>
+      <td>
+        <code
+          ><a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/yield"
+            >yield</a
+          ></code
+        >
+      </td>
+      <td>Droite à gauche</td>
+      <td><code>yield …</code></td>
+    </tr>
+    <tr>
+      <td>
+        <code
+          ><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/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>
+        <a
+          href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/L_op%C3%A9rateur_virgule"
+          >Virgule</a
+        >
+      </td>
+      <td>Gauche à droite</td>
+      <td><code>… , …</code></td>
+    </tr>
+  </tbody>
+</table>
diff --git a/files/fr/web/javascript/reference/operators/optional_chaining/index.html b/files/fr/web/javascript/reference/operators/optional_chaining/index.html
deleted file mode 100644
index 7fd8595772..0000000000
--- a/files/fr/web/javascript/reference/operators/optional_chaining/index.html
+++ /dev/null
@@ -1,185 +0,0 @@
----
-title: Chaînage optionnel (optional chaining)
-slug: Web/JavaScript/Reference/Operators/Optional_chaining
-tags:
-  - Chaînage
-  - Chaînage optionnel
-  - Coalescence
-  - JavaScript
-  - Operator
-  - Opérateur
-  - Reference
-translation_of: Web/JavaScript/Reference/Operators/Optional_chaining
-original_slug: Web/JavaScript/Reference/Opérateurs/Optional_chaining
----
-<div>{{jsSidebar("Operators")}}</div>
-
-<p>L'opérateur de <strong>chaînage optionnel</strong> <strong><code>?.</code></strong> permet de lire la valeur d'une propriété située profondément dans une chaîne d'objets connectés sans avoir à valider expressément que chaque référence dans la chaîne est valide. L'opérateur <code>?.</code> fonctionne de manière similaire à l'opérateur de chaînage <code>.</code>, à ceci près qu'au lieu de causer une erreur si une référence est {{jsxref("null")}} ou {{jsxref("undefined")}}, l'expression se court-circuite avec <code>undefined</code> pour valeur de retour. Quand il est utilisé avec des appels de fonctions, il retourne <code>undefined</code> si la fonction donnée n'existe pas.</p>
-
-<p>Ceci résulte en des expressions plus courtes et plus simples lors de l'accès à des propriétés chaînées quand il est possible qu'une référence soit manquante. Ceci peut aussi être utile lors de l'exploration du contenu d'un objet lorsqu'il n'y a aucune garantie concernant les propriétés qui sont requises.</p>
-
-<p>Le chainage optionnel ne peut pas être utilisé sur un objet initialement inexistant. Il ne remplace les vérifications du type <code>if (typeof a == "undefined")</code>.</p>
-
-<p>{{EmbedInteractiveExample("pages/js/expressions-optionalchainingoperator.html")}}</p>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox notranslate"><var>obj</var>?.<var>prop</var>
-<var>obj</var>?.[<var>expr</var>]
-<em>arr?.[index]</em>
-<var>func</var>?.(<var>args</var>)
-</pre>
-
-<h2 id="Description">Description</h2>
-
-<p>L'opérateur de chaînage optionnel fournit un moyen de simplifier l'accès aux valeurs au sein d'objets connectés quand il est possible qu'une référence ou une fonction soit <code>undefined</code> ou <code>null</code>.</p>
-
-<p>Par exemple, considérant un objet <code>obj</code> qui a une structure imbriquée. Sans chaînage optionnel, chercher une sous-propriété imbriquée en profondeur requiert de valider les références intermédiaires, tel que :</p>
-
-<pre class="brush: js notranslate">let nestedProp = obj.premier &amp;&amp; obj.premier.second;</pre>
-
-<p>La valeur de <code>obj.premier</code> est confirmée comme n'étant pas <code>null</code> (ni <code>undefined</code>) avant que d'accéder à la valeur de <code>obj.premier.second</code>. Ceci prévient l'erreur qui pourrait survenir si vous accédiez simplement <code>obj.premier.second</code> directement sans vérifier <code>obj.premier</code>.</p>
-
-<p>Avec l'opérateur de chaînage optionnel (<code>?.</code>), vous n'avez pas besoin de vérifier explicitement et de court-circuiter la vérification selon l'état de <code>obj.premier</code> avant que d'accéder à <code>obj.premier.second</code> :</p>
-
-<pre class="brush: js notranslate">let nestedProp = obj.<code>premier</code>?.second;</pre>
-
-<p>En utilisant l'opérateur <code>?.</code> au lieu de l'opérateur <code>.</code>, JavaScript sait implicitement qu'il doit vérifier <code>obj.premier</code> pour être certain qu'il ne soit <code>null</code> ou <code>undefined</code> avant que de tenter d'accéder à <code>obj.first.second</code>. Si <code>obj.premier</code> est <code>null</code> ou <code>undefined</code>, l'expression se court-circuite automatiquement et retourne <code>undefined</code>.</p>
-
-<p>C'est équivalent à : </p>
-
-<pre class="brush: js notranslate">let temp = obj.<code>premier</code>;
-let nestedProp = ((temp === null || temp === undefined) ? undefined : temp.second);
-</pre>
-
-<h3 id="Chaînage_optionnel_avec_des_appels_de_fonctions">Chaînage optionnel avec des appels de fonctions</h3>
-
-<p>Vous pouvez utiliser le chaînage optionnel lorsque vous tentez d'appeler une méthode qui pourrait ne pas exister. Ceci peut être une aide précieuse, par exemple, lorsque vous utilisez une API dans laquelle une méthode pourrait être indisponible, à cause d'une implantation datée ou à cause d'une fonctionnalité qui n'est pas disponible sur l'appareil de l'utilisateur.</p>
-
-<p>Utiliser le chaînage optionnel avec les appels de fonction entraîne le retour automatique de la valeur <code>undefined</code> pour l'expression plutôt que de jeter une exception si la méthode n'est pas trouvée :</p>
-
-<pre class="brush: js notranslate">let result = uneInterface.uneMéthode?.();</pre>
-
-<div class="blockIndicator note">
-<p><strong>Note :</strong> S'il est une propriété qui porte ce nom et qui n'est pas une fonction, utiliser <code>?.</code> jètera aussi une exception {{jsxref("TypeError")}} (<code>x.y</code><code> is not a function</code>).</p>
-</div>
-
-<h4 id="Réaliser_des_fonctions_de_rappel_optionnelles_ou_des_écouteurs_dévènements">Réaliser des fonctions de rappel optionnelles ou des écouteurs d'évènements</h4>
-
-<p>Si vous utilisez des fonctions ou des méthodes de recherche depuis un objet avec <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Object_destructuring">une affectation par décomposition</a>, vous pourriez avoir des valeurs inexistantes que vous ne pouvez appeler comme fonction à moins que vous ayez vérifié leur existance. En utilisant <code>?.</code>, vous pourriez vous passer de cette vérification supplémentaire :</p>
-
-<pre class="brush: js notranslate">// ES2019
-function doSomething(onContent, onError) {
-  try {
-    // ... faire quelque chose avec les données
-  }
-  catch (err) {
-    if (onError) { // vérifier que onError existe réellement
-      onError(err.message);
-    }
-  }
-}
-</pre>
-
-<pre class="brush: js notranslate">// Utiliser le chaînage optionnel avec les appels de fonctions
-function doSomething(onContent, onError) {
-  try {
-   // ... faire quelque chose avec les données
-  }
-  catch (err) {
-    onError?.(err.message); // pas d'exception si onError n'est pas défini
-  }
-}
-</pre>
-
-<h3 id="Chaînage_optionnel_avec_les_expressions">Chaînage optionnel avec les expressions</h3>
-
-<p>Vous pouvez aussi utiliser l'opérateur de chaînage optionnel lorsque vous accédez aux propriétés avec une expression en utilisant <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Property_Accessors#Bracket_notation">la notation avec crochets des accesseurs de propriétés</a> :</p>
-
-<pre class="brush: js notranslate">let nestedProp = obj?.['propName'];
-</pre>
-
-<h3 id="Chaînage_optionnel_invalide_depuis_le_côté_gauche_dune_affectation">Chaînage optionnel invalide depuis le côté gauche d'une affectation</h3>
-
-<pre class="notranslate"><code>let objet = {};
-objet?.propriété = 1; // Uncaught SyntaxError: Invalid left-hand side in assignment</code></pre>
-
-<h3 id="Accès_aux_éléments_de_tableau_avec_le_chaînage_optionnel">Accès aux éléments de tableau avec le chaînage optionnel</h3>
-
-<pre class="notranslate">let élément = arr?.[42];</pre>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Exemple_basique">Exemple basique</h3>
-
-<p>Cet exemple cherche la valeur de la propriété <code>name</code> dans un objet stocké comme propriété de nom <code>bar</code> d'un objet Map alors que cet objet <code>bar</code> n'existe pas. Le résultat est donc <code>undefined</code>.</p>
-
-<pre class="brush: js notranslate">let monMap = new Map();
-monMap.set("foo", {name: "baz", desc: "inga"});
-
-let nameBar = monMap.get("bar")?.name;</pre>
-
-<h3 id="Court-circuiter_une_évaluation">Court-circuiter une évaluation</h3>
-
-<p>Lorsque vous utilisez le chaînage optionnel avec une expression, si l'opérande gauche est <code>null</code> ou <code>undefined</code>, l'expression ne sera par évaluée. Par exemple :</p>
-
-<pre class="brush: js notranslate">let objetPotentiellementNul = null;
-let x = 0;
-let prop = objetPotentiellementNul?.[x++];
-
-console.log(x); // 0 car x n'a pas été incrémenté
-</pre>
-
-<h3 id="Empiler_les_opérateurs_de_chaînage_optionnel">Empiler les opérateurs de chaînage optionnel</h3>
-
-<p>Avec les structures imbriquées, il est possible d'utiliser le chaînage optionnel plusieurs fois :</p>
-
-<pre class="brush: js notranslate">let client = {
-  nom: "Carl",
-  details: {
-    age: 82,
-    localisation: "Paradise Falls"
-    // adresse détaillée inconnue
-  }
-};
-let villeDuClient = client.details?.adresse?.ville;
-
-// … cela fonctionne aussi avec le chaînage optionnel sur les appels de fonction
-let durée = vacations.trip?.getTime?.();
-</pre>
-
-<h3 id="Combinaison_avec_lopérateur_de_coalescence_des_nuls_Nullish_coalescing_operator">Combinaison avec l'opérateur de coalescence des nuls (Nullish coalescing operator)</h3>
-
-<p>L'{{JSxRef("Opérateurs/Nullish_coalescing_operator", "Opérateur de coalescence des nuls (Nullish coalescing operator)", '', 1)}} peut être utilisé après un chaînage optionnel afin de construire une valeur par défaut quand aucune n'a été trouvée :</p>
-
-<pre class="notranslate">let client = {
-  nom: "Carl",
-  details: { age: 82 }
-};
-const villeDuClient = client?.ville ?? "Ville Inconnue";
-console.log(villeDuClient); // Ville inconnue</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Specification</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('ESDraft', '#prod-OptionalExpression', 'optional expression')}}</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.operators.optional_chaining")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{JSxRef("Operators/Nullish_Coalescing_Operator", "Opérateur de coalescence des nuls (Nullish coalescing operator)", '', 1)}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/operators/optional_chaining/index.md b/files/fr/web/javascript/reference/operators/optional_chaining/index.md
new file mode 100644
index 0000000000..f7f2379ba4
--- /dev/null
+++ b/files/fr/web/javascript/reference/operators/optional_chaining/index.md
@@ -0,0 +1,185 @@
+---
+title: Chaînage optionnel (optional chaining)
+slug: Web/JavaScript/Reference/Operators/Optional_chaining
+tags:
+  - Chaînage
+  - Chaînage optionnel
+  - Coalescence
+  - JavaScript
+  - Operator
+  - Opérateur
+  - Reference
+translation_of: Web/JavaScript/Reference/Operators/Optional_chaining
+original_slug: Web/JavaScript/Reference/Opérateurs/Optional_chaining
+---
+{{jsSidebar("Operators")}}
+
+L'opérateur de **chaînage optionnel** **`?.`** permet de lire la valeur d'une propriété située profondément dans une chaîne d'objets connectés sans avoir à valider expressément que chaque référence dans la chaîne est valide. L'opérateur `?.` fonctionne de manière similaire à l'opérateur de chaînage `.`, à ceci près qu'au lieu de causer une erreur si une référence est {{jsxref("null")}} ou {{jsxref("undefined")}}, l'expression se court-circuite avec `undefined` pour valeur de retour. Quand il est utilisé avec des appels de fonctions, il retourne `undefined` si la fonction donnée n'existe pas.
+
+Ceci résulte en des expressions plus courtes et plus simples lors de l'accès à des propriétés chaînées quand il est possible qu'une référence soit manquante. Ceci peut aussi être utile lors de l'exploration du contenu d'un objet lorsqu'il n'y a aucune garantie concernant les propriétés qui sont requises.
+
+Le chainage optionnel ne peut pas être utilisé sur un objet initialement inexistant. Il ne remplace les vérifications du type `if (typeof a == "undefined")`.
+
+{{EmbedInteractiveExample("pages/js/expressions-optionalchainingoperator.html")}}
+
+## Syntaxe
+
+    obj?.prop
+    obj?.[expr]
+    arr?.[index]
+    func?.(args)
+
+## Description
+
+L'opérateur de chaînage optionnel fournit un moyen de simplifier l'accès aux valeurs au sein d'objets connectés quand il est possible qu'une référence ou une fonction soit `undefined` ou `null`.
+
+Par exemple, considérant un objet `obj` qui a une structure imbriquée. Sans chaînage optionnel, chercher une sous-propriété imbriquée en profondeur requiert de valider les références intermédiaires, tel que :
+
+```js
+let nestedProp = obj.premier && obj.premier.second;
+```
+
+La valeur de `obj.premier` est confirmée comme n'étant pas `null` (ni `undefined`) avant que d'accéder à la valeur de `obj.premier.second`. Ceci prévient l'erreur qui pourrait survenir si vous accédiez simplement `obj.premier.second` directement sans vérifier `obj.premier`.
+
+Avec l'opérateur de chaînage optionnel (`?.`), vous n'avez pas besoin de vérifier explicitement et de court-circuiter la vérification selon l'état de `obj.premier` avant que d'accéder à `obj.premier.second` :
+
+```js
+let nestedProp = obj.premier?.second;
+```
+
+En utilisant l'opérateur `?.` au lieu de l'opérateur `.`, JavaScript sait implicitement qu'il doit vérifier `obj.premier` pour être certain qu'il ne soit `null` ou `undefined` avant que de tenter d'accéder à `obj.first.second`. Si `obj.premier` est `null` ou `undefined`, l'expression se court-circuite automatiquement et retourne `undefined`.
+
+C'est équivalent à :
+
+```js
+let temp = obj.premier;
+let nestedProp = ((temp === null || temp === undefined) ? undefined : temp.second);
+```
+
+### Chaînage optionnel avec des appels de fonctions
+
+Vous pouvez utiliser le chaînage optionnel lorsque vous tentez d'appeler une méthode qui pourrait ne pas exister. Ceci peut être une aide précieuse, par exemple, lorsque vous utilisez une API dans laquelle une méthode pourrait être indisponible, à cause d'une implantation datée ou à cause d'une fonctionnalité qui n'est pas disponible sur l'appareil de l'utilisateur.
+
+Utiliser le chaînage optionnel avec les appels de fonction entraîne le retour automatique de la valeur `undefined` pour l'expression plutôt que de jeter une exception si la méthode n'est pas trouvée :
+
+```js
+let result = uneInterface.uneMéthode?.();
+```
+
+> **Note :** S'il est une propriété qui porte ce nom et qui n'est pas une fonction, utiliser `?.` jètera aussi une exception {{jsxref("TypeError")}} (` x.y`` is not a function  `).
+
+#### Réaliser des fonctions de rappel optionnelles ou des écouteurs d'évènements
+
+Si vous utilisez des fonctions ou des méthodes de recherche depuis un objet avec [une affectation par décomposition](/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Object_destructuring), vous pourriez avoir des valeurs inexistantes que vous ne pouvez appeler comme fonction à moins que vous ayez vérifié leur existance. En utilisant `?.`, vous pourriez vous passer de cette vérification supplémentaire :
+
+```js
+// ES2019
+function doSomething(onContent, onError) {
+  try {
+    // ... faire quelque chose avec les données
+  }
+  catch (err) {
+    if (onError) { // vérifier que onError existe réellement
+      onError(err.message);
+    }
+  }
+}
+```
+
+```js
+// Utiliser le chaînage optionnel avec les appels de fonctions
+function doSomething(onContent, onError) {
+  try {
+   // ... faire quelque chose avec les données
+  }
+  catch (err) {
+    onError?.(err.message); // pas d'exception si onError n'est pas défini
+  }
+}
+```
+
+### Chaînage optionnel avec les expressions
+
+Vous pouvez aussi utiliser l'opérateur de chaînage optionnel lorsque vous accédez aux propriétés avec une expression en utilisant [la notation avec crochets des accesseurs de propriétés](/en-US/docs/Web/JavaScript/Reference/Operators/Property_Accessors#Bracket_notation) :
+
+```js
+let nestedProp = obj?.['propName'];
+```
+
+### Chaînage optionnel invalide depuis le côté gauche d'une affectation
+
+    let objet = {};
+    objet?.propriété = 1; // Uncaught SyntaxError: Invalid left-hand side in assignment
+
+### Accès aux éléments de tableau avec le chaînage optionnel
+
+    let élément = arr?.[42];
+
+## Exemples
+
+### Exemple basique
+
+Cet exemple cherche la valeur de la propriété `name` dans un objet stocké comme propriété de nom `bar` d'un objet Map alors que cet objet `bar` n'existe pas. Le résultat est donc `undefined`.
+
+```js
+let monMap = new Map();
+monMap.set("foo", {name: "baz", desc: "inga"});
+
+let nameBar = monMap.get("bar")?.name;
+```
+
+### Court-circuiter une évaluation
+
+Lorsque vous utilisez le chaînage optionnel avec une expression, si l'opérande gauche est `null` ou `undefined`, l'expression ne sera par évaluée. Par exemple :
+
+```js
+let objetPotentiellementNul = null;
+let x = 0;
+let prop = objetPotentiellementNul?.[x++];
+
+console.log(x); // 0 car x n'a pas été incrémenté
+```
+
+### Empiler les opérateurs de chaînage optionnel
+
+Avec les structures imbriquées, il est possible d'utiliser le chaînage optionnel plusieurs fois :
+
+```js
+let client = {
+  nom: "Carl",
+  details: {
+    age: 82,
+    localisation: "Paradise Falls"
+    // adresse détaillée inconnue
+  }
+};
+let villeDuClient = client.details?.adresse?.ville;
+
+// … cela fonctionne aussi avec le chaînage optionnel sur les appels de fonction
+let durée = vacations.trip?.getTime?.();
+```
+
+### Combinaison avec l'opérateur de coalescence des nuls (Nullish coalescing operator)
+
+L'{{JSxRef("Opérateurs/Nullish_coalescing_operator", "Opérateur de coalescence des nuls (Nullish coalescing operator)", '', 1)}} peut être utilisé après un chaînage optionnel afin de construire une valeur par défaut quand aucune n'a été trouvée :
+
+    let client = {
+      nom: "Carl",
+      details: { age: 82 }
+    };
+    const villeDuClient = client?.ville ?? "Ville Inconnue";
+    console.log(villeDuClient); // Ville inconnue
+
+## Spécifications
+
+| Specification                                                                                        |
+| ---------------------------------------------------------------------------------------------------- |
+| {{SpecName('ESDraft', '#prod-OptionalExpression', 'optional expression')}} |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.operators.optional_chaining")}}
+
+## Voir aussi
+
+- {{JSxRef("Operators/Nullish_Coalescing_Operator", "Opérateur de coalescence des nuls (Nullish coalescing operator)", '', 1)}}
diff --git a/files/fr/web/javascript/reference/operators/property_accessors/index.html b/files/fr/web/javascript/reference/operators/property_accessors/index.html
deleted file mode 100644
index 8a1ab4bbd6..0000000000
--- a/files/fr/web/javascript/reference/operators/property_accessors/index.html
+++ /dev/null
@@ -1,151 +0,0 @@
----
-title: Accesseurs de propriétés
-slug: Web/JavaScript/Reference/Operators/Property_Accessors
-tags:
-  - JavaScript
-  - Opérateur
-  - Reference
-translation_of: Web/JavaScript/Reference/Operators/Property_Accessors
-original_slug: Web/JavaScript/Reference/Opérateurs/Opérateurs_de_membres
----
-<div>{{jsSidebar("Operators")}}</div>
-
-<p>Les <strong>accesseurs de propriété</strong> permettent de fournir un accès aux propriétés d'un objet en utilisant une notation avec un point ou une notation avec des crochets</p>
-
-<div>{{EmbedInteractiveExample("pages/js/expressions-propertyaccessors.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">objet.propriété
-objet["propriété"]
-</pre>
-
-<h2 id="Description">Description</h2>
-
-<p>Les objets peuvent être vus comme des tableaux associatifs (<em>map</em>, dictionnaires, table de hachage, annuaire, etc.). Les <em>clés</em> (<em>keys</em>) de ce tableau sont les noms des propriétés de l'objet. Lorsqu'on parle d'objets, on fait généralement une distinction entre les propriétés et les méthodes. En réalité cette différence est plus dûe à une convention qu'à une réelle distinction. En effet, une méthode est simplement une propriété qu'on peut appeler (sa valeur fera souvent référence à une instance de {{jsxref("Function")}}).</p>
-
-<p>Il existe deux façons d'accéder aux propriétés d'un objet : la notation avec point et la notation avec crochets.</p>
-
-<h3 id="Notation_avec_point">Notation avec point</h3>
-
-<pre class="brush: js">obtenir = objet.propriété;
-objet.propriété = définir;
-</pre>
-
-<p><code>propriété</code> doit être un identifiant JavaScript valide, c'est-à-dire une séquence de caractères alphanumériques, soulignés (« <code>_</code> ») et signes dollar (« <code>$</code> »), qui ne peut commencer par un nombre. Par exemple, <code>objet.$1</code> est valide, mais <code>objet.1</code> ne l'est pas.</p>
-
-<pre class="brush: js">document.createElement('pre');
-</pre>
-
-<p>Ici, la méthode <code>createElement</code> est obtenue depuis l'objet <code>document</code> et est appelée.</p>
-
-<p>Si on utilise une méthode pour un littéral numérique et que celui-ci ne possède pas de point décimal ni d'exposant lié à la notation scientifique, il faudra laisser un ou plusieurs blancs afin que l'appel soit bien interprété comme un appel de méthode plutôt que comme un séparateur décimal :</p>
-
-<pre class="brush: js">77 .toExponential();
-// ou
-77
-.toExponential();
-// ou, mieux pour la lisibilité
-(77).toExponential();
-// ou encore
-77.0.toExponential();
-// 77. correspond à 77.0 et là il n'y a aucun doute
-</pre>
-
-<h3 id="Notation_avec_crochets">Notation avec crochets</h3>
-
-<pre class="brush: js">obtenir = objet[nom_de_propriété];
-objet[nom_de_propriété] = définir;
-</pre>
-
-<p><code>nom_de_propriété</code> est une chaîne de caractères ou un {{jsxref("Symbol","symbole","","")}}. Elle n'a pas besoin d'être un identifiant valide ; elle peut avoir n'importe quelle valeur, par exemple <code>"1foo"</code>, <code>"!bar!"</code> ou même <code>" "</code> (une espace).</p>
-
-<h4 id="Exemple">Exemple</h4>
-
-<pre class="brush: js">document['createElement']('pre');
-</pre>
-
-<p>Cette ligne fait exactement la même chose que l'exemple précédent.</p>
-
-<h3 id="Noms_de_propriétés">Noms de propriétés</h3>
-
-<p>Les noms de propriétés doivent être des chaînes de caractères ou des symboles. Cela signifie que les autres types d'objet ne peuvent pas être utilisés comme clés d'un objet. Tout autre type d'objet, même un nombre, sera converti en une chaîne via sa méthode <a href="fr/R%c3%a9f%c3%a9rence_de_JavaScript_1.5_Core/Objets_globaux/Object/toString"><code>toString</code></a>.</p>
-
-<h4 id="Exemples">Exemples</h4>
-
-<pre class="brush: js">var objet = {};
-objet['1'] = 'valeur';
-console.log(objet[1]);
-</pre>
-
-<p>Ceci affichera « valeur », étant donné que le nombre <code>1</code> sera converti en une chaîne <code>"1"</code>.</p>
-
-<pre class="brush: js">var toto = {propriété_unique : 1}, truc = {propriété_unique : 2}, objet = {};
-objet[toto] = 'valeur';
-console.log(objet[truc]);
-</pre>
-
-<p>Ce code affichera également « valeur », étant donné que <code>toto</code> et <code>truc</code> seront convertis en la même chaîne de caractères. Dans le cas du moteur JavaScript <a href="fr/SpiderMonkey">SpiderMonkey</a>, cette chaîne serait <code>"['object Object']"</code>.</p>
-
-<h3 id="Liaison_de_méthodes">Liaison de méthodes</h3>
-
-<p>Une méthode n'est pas liée à l'objet dont elle est une méthode. En particulier, <code>this</code> n'est pas défini dans une méthode, c'est-à-dire que <code>this</code> ne fait pas nécessairement référence à un objet contenant la méthode. En réalité, <code>this</code> est « passé » par l'appel de la fonction.</p>
-
-<p>Pour plus d'informations, consultez la page sur <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_this#Liaison_de_m.C3.A9thodes">l'opérateur <code>this</code> et les liaisons de méthodes</a>.</p>
-
-<h3 id="Note_concernant_eval">Note concernant <code>eval</code></h3>
-
-<p>Les nouveaux venus en JavaScript font souvent l'erreur d'utiliser {{jsxref("eval", "eval()")}} alors que la notation avec crochets pourrait être utilisée. Par exemple, la syntaxe suivante est utilisée dans de nombreux scripts.</p>
-
-<pre class="brush: js">x = eval('document.formulaire.' + controle + '.value');
-</pre>
-
-<p><code>eval</code> est lente et insécurisée et devrait être évitée dès que possible. Il est préférable d'utiliser la notation avec crochets :</p>
-
-<pre class="brush: js">x = document.formulaire[controle].value;
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-property-accessors', 'Property Accessors')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-property-accessors', 'Accesseurs de propriété')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-11.2.1', 'Accesseurs de propriété')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES1', '#sec-11.2.1', 'Accesseurs de propriété')}}</td>
-   <td>{{Spec2('ES1')}}</td>
-   <td>Définition initiale, implémentée avec JavaScript 1.0.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.operators.property_accessors")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Object")}}</li>
- <li>{{jsxref("Object.defineProperty()")}}</li>
- <li><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Affecter_par_décomposition">L'affectation par décomposition</a></li>
- <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Optional_chaining">Le chaînage optionnel</a></li>
-</ul>
diff --git a/files/fr/web/javascript/reference/operators/property_accessors/index.md b/files/fr/web/javascript/reference/operators/property_accessors/index.md
new file mode 100644
index 0000000000..c71814b931
--- /dev/null
+++ b/files/fr/web/javascript/reference/operators/property_accessors/index.md
@@ -0,0 +1,134 @@
+---
+title: Accesseurs de propriétés
+slug: Web/JavaScript/Reference/Operators/Property_Accessors
+tags:
+  - JavaScript
+  - Opérateur
+  - Reference
+translation_of: Web/JavaScript/Reference/Operators/Property_Accessors
+original_slug: Web/JavaScript/Reference/Opérateurs/Opérateurs_de_membres
+---
+{{jsSidebar("Operators")}}
+
+Les **accesseurs de propriété** permettent de fournir un accès aux propriétés d'un objet en utilisant une notation avec un point ou une notation avec des crochets
+
+{{EmbedInteractiveExample("pages/js/expressions-propertyaccessors.html")}}
+
+## Syntaxe
+
+    objet.propriété
+    objet["propriété"]
+
+## Description
+
+Les objets peuvent être vus comme des tableaux associatifs (_map_, dictionnaires, table de hachage, annuaire, etc.). Les _clés_ (_keys_) de ce tableau sont les noms des propriétés de l'objet. Lorsqu'on parle d'objets, on fait généralement une distinction entre les propriétés et les méthodes. En réalité cette différence est plus dûe à une convention qu'à une réelle distinction. En effet, une méthode est simplement une propriété qu'on peut appeler (sa valeur fera souvent référence à une instance de {{jsxref("Function")}}).
+
+Il existe deux façons d'accéder aux propriétés d'un objet : la notation avec point et la notation avec crochets.
+
+### Notation avec point
+
+```js
+obtenir = objet.propriété;
+objet.propriété = définir;
+```
+
+`propriété` doit être un identifiant JavaScript valide, c'est-à-dire une séquence de caractères alphanumériques, soulignés (« `_` ») et signes dollar (« `$` »), qui ne peut commencer par un nombre. Par exemple, `objet.$1` est valide, mais `objet.1` ne l'est pas.
+
+```js
+document.createElement('pre');
+```
+
+Ici, la méthode `createElement` est obtenue depuis l'objet `document` et est appelée.
+
+Si on utilise une méthode pour un littéral numérique et que celui-ci ne possède pas de point décimal ni d'exposant lié à la notation scientifique, il faudra laisser un ou plusieurs blancs afin que l'appel soit bien interprété comme un appel de méthode plutôt que comme un séparateur décimal :
+
+```js
+77 .toExponential();
+// ou
+77
+.toExponential();
+// ou, mieux pour la lisibilité
+(77).toExponential();
+// ou encore
+77.0.toExponential();
+// 77. correspond à 77.0 et là il n'y a aucun doute
+```
+
+### Notation avec crochets
+
+```js
+obtenir = objet[nom_de_propriété];
+objet[nom_de_propriété] = définir;
+```
+
+`nom_de_propriété` est une chaîne de caractères ou un {{jsxref("Symbol","symbole","","")}}. Elle n'a pas besoin d'être un identifiant valide ; elle peut avoir n'importe quelle valeur, par exemple `"1foo"`, `"!bar!"` ou même `" "` (une espace).
+
+#### Exemple
+
+```js
+document['createElement']('pre');
+```
+
+Cette ligne fait exactement la même chose que l'exemple précédent.
+
+### Noms de propriétés
+
+Les noms de propriétés doivent être des chaînes de caractères ou des symboles. Cela signifie que les autres types d'objet ne peuvent pas être utilisés comme clés d'un objet. Tout autre type d'objet, même un nombre, sera converti en une chaîne via sa méthode [`toString`](fr/R%c3%a9f%c3%a9rence_de_JavaScript_1.5_Core/Objets_globaux/Object/toString).
+
+#### Exemples
+
+```js
+var objet = {};
+objet['1'] = 'valeur';
+console.log(objet[1]);
+```
+
+Ceci affichera « valeur », étant donné que le nombre `1` sera converti en une chaîne `"1"`.
+
+```js
+var toto = {propriété_unique : 1}, truc = {propriété_unique : 2}, objet = {};
+objet[toto] = 'valeur';
+console.log(objet[truc]);
+```
+
+Ce code affichera également « valeur », étant donné que `toto` et `truc` seront convertis en la même chaîne de caractères. Dans le cas du moteur JavaScript [SpiderMonkey](fr/SpiderMonkey), cette chaîne serait `"['object Object']"`.
+
+### Liaison de méthodes
+
+Une méthode n'est pas liée à l'objet dont elle est une méthode. En particulier, `this` n'est pas défini dans une méthode, c'est-à-dire que `this` ne fait pas nécessairement référence à un objet contenant la méthode. En réalité, `this` est « passé » par l'appel de la fonction.
+
+Pour plus d'informations, consultez la page sur [l'opérateur `this` et les liaisons de méthodes](/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_this#Liaison_de_m.C3.A9thodes).
+
+### Note concernant `eval`
+
+Les nouveaux venus en JavaScript font souvent l'erreur d'utiliser {{jsxref("eval", "eval()")}} alors que la notation avec crochets pourrait être utilisée. Par exemple, la syntaxe suivante est utilisée dans de nombreux scripts.
+
+```js
+x = eval('document.formulaire.' + controle + '.value');
+```
+
+`eval` est lente et insécurisée et devrait être évitée dès que possible. Il est préférable d'utiliser la notation avec crochets :
+
+```js
+x = document.formulaire[controle].value;
+```
+
+## Spécifications
+
+| Spécification                                                                                        | État                         | Commentaires                                          |
+| ---------------------------------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- |
+| {{SpecName('ESDraft', '#sec-property-accessors', 'Property Accessors')}}     | {{Spec2('ESDraft')}} |                                                       |
+| {{SpecName('ES6', '#sec-property-accessors', 'Accesseurs de propriété')}} | {{Spec2('ES6')}}         |                                                       |
+| {{SpecName('ES5.1', '#sec-11.2.1', 'Accesseurs de propriété')}}             | {{Spec2('ES5.1')}}     |                                                       |
+| {{SpecName('ES1', '#sec-11.2.1', 'Accesseurs de propriété')}}                 | {{Spec2('ES1')}}         | Définition initiale, implémentée avec JavaScript 1.0. |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.operators.property_accessors")}}
+
+## Voir aussi
+
+- {{jsxref("Object")}}
+- {{jsxref("Object.defineProperty()")}}
+- [L'affectation par décomposition](/fr/docs/Web/JavaScript/Reference/Opérateurs/Affecter_par_décomposition)
+- [Le chaînage optionnel](/fr/docs/Web/JavaScript/Reference/Operators/Optional_chaining)
diff --git a/files/fr/web/javascript/reference/operators/remainder/index.html b/files/fr/web/javascript/reference/operators/remainder/index.html
deleted file mode 100644
index c5df6dd43d..0000000000
--- a/files/fr/web/javascript/reference/operators/remainder/index.html
+++ /dev/null
@@ -1,80 +0,0 @@
----
-title: Reste (%)
-slug: Web/JavaScript/Reference/Operators/Remainder
-tags:
-  - JavaScript
-  - Language feature
-  - Operator
-  - Reference
-browser-compat: javascript.operators.remainder
-translation-of: Web/JavaScript/Reference/Operators/Remainder
----
-<div>{{jsSidebar("Operators")}}</div>
-
-<p>L'opérateur du reste (<code>%</code>) renvoie le reste de la division de l'opérande gauche par l'opérande droit. Le résultat a toujours le signe du numérateur.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/expressions-remainder.html")}}</div>
-
-<p>Bien que dans la plupart des langages, <code>%</code> est un opérateur de reste, pour d'autres (par exemple <a href="https://en.wikipedia.org/wiki/Modulo_operation#In_programming_languages">Python, Perl</a>) c'est un opérateur de modulo. Lorsqu'on utilise des valeurs positives, les deux opérateurs sont équivalents mais lorsque le numérateur et de dénominateur ont des signes différents, le reste et le modulo fourniront des signes différents. Pour obtenir une opération équivalente au modulo en JavaScript, on pourra utiliser <code>((a % n ) + n ) % n</code>.</p>
-
-<h2 id="syntax">Syntaxe</h2>
-
-<pre class="brush: js">
-<strong>Opérateur :</strong> <var>var1</var> % <var>var2</var>
-</pre>
-
-<h2 id="examples">Exemples</h2>
-
-<h3 id="remainder_with_positive_dividend">Reste avec numérateur positif</h3>
-
-<pre class="brush: js">
-12 % 5  //  2
- 1 % -2 //  1
- 1 % 2  //  1
- 2 % 3  //  2
-5.5 % 2 // 1.5
-</pre>
-
-<h3 id="remainder_with_negative_dividend">Reste avec numérateur négatif</h3>
-
-<pre class="brush: js">
--12 % 5 // -2
--1 % 2  // -1
--4 % 2  // -0
-</pre>
-
-<h3 id="remainder_with_nan">Reste avec NaN</h3>
-
-<pre class="brush: js">
-NaN % 2 // NaN
-</pre>
-
-<h3 id="remainder_with_infinity">Reste avec l'infini</h3>
-
-<pre class="brush: js">
-Infinity % 2 // NaN
-Infinity % 0 // NaN
-Infinity % Infinity // NaN
-</pre>
-
-<h2 id="specifications">Spécifications</h2>
-
-<p>{{Specifications}}</p>
-
-<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
-
-<p>{{Compat}}</p>
-
-<h2 id="see_also">Voir aussi</h2>
-
-<ul>
-  <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Addition">Opérateur d'addition</a></li>
-  <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Subtraction">Opérateur de soustraction</a></li>
-  <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Multiplication">Opérateur de multiplication</a></li>
-  <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Division">Opérateur de division</a></li>
-  <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Exponentiation">Opérateur d'exponentiation</a></li>
-  <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Increment">Opérateur d'incrémentation</a></li>
-  <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Decrement">Opérateur de décrémentation</a></li>
-  <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Unary_negation">Opérateur de négation unaire</a></li>
-  <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Unary_plus">Opérateur plus unaire</a></li>
-</ul>
diff --git a/files/fr/web/javascript/reference/operators/remainder/index.md b/files/fr/web/javascript/reference/operators/remainder/index.md
new file mode 100644
index 0000000000..7cafa91697
--- /dev/null
+++ b/files/fr/web/javascript/reference/operators/remainder/index.md
@@ -0,0 +1,77 @@
+---
+title: Reste (%)
+slug: Web/JavaScript/Reference/Operators/Remainder
+tags:
+  - JavaScript
+  - Language feature
+  - Operator
+  - Reference
+browser-compat: javascript.operators.remainder
+---
+{{jsSidebar("Operators")}}
+
+L'opérateur du reste (`%`) renvoie le reste de la division de l'opérande gauche par l'opérande droit. Le résultat a toujours le signe du numérateur.
+
+{{EmbedInteractiveExample("pages/js/expressions-remainder.html")}}
+
+Bien que dans la plupart des langages, `%` est un opérateur de reste, pour d'autres (par exemple [Python, Perl](https://en.wikipedia.org/wiki/Modulo_operation#In_programming_languages)) c'est un opérateur de modulo. Lorsqu'on utilise des valeurs positives, les deux opérateurs sont équivalents mais lorsque le numérateur et de dénominateur ont des signes différents, le reste et le modulo fourniront des signes différents. Pour obtenir une opération équivalente au modulo en JavaScript, on pourra utiliser `((a % n ) + n ) % n`.
+
+## Syntaxe
+
+```js
+Opérateur : var1 % var2
+```
+
+## Exemples
+
+### Reste avec numérateur positif
+
+```js
+12 % 5  //  2
+ 1 % -2 //  1
+ 1 % 2  //  1
+ 2 % 3  //  2
+5.5 % 2 // 1.5
+```
+
+### Reste avec numérateur négatif
+
+```js
+-12 % 5 // -2
+-1 % 2  // -1
+-4 % 2  // -0
+```
+
+### Reste avec NaN
+
+```js
+NaN % 2 // NaN
+```
+
+### Reste avec l'infini
+
+```js
+Infinity % 2 // NaN
+Infinity % 0 // NaN
+Infinity % Infinity // NaN
+```
+
+## Spécifications
+
+{{Specifications}}
+
+## Compatibilité des navigateurs
+
+{{Compat}}
+
+## Voir aussi
+
+- [Opérateur d'addition](/fr/docs/Web/JavaScript/Reference/Operators/Addition)
+- [Opérateur de soustraction](/fr/docs/Web/JavaScript/Reference/Operators/Subtraction)
+- [Opérateur de multiplication](/fr/docs/Web/JavaScript/Reference/Operators/Multiplication)
+- [Opérateur de division](/fr/docs/Web/JavaScript/Reference/Operators/Division)
+- [Opérateur d'exponentiation](/fr/docs/Web/JavaScript/Reference/Operators/Exponentiation)
+- [Opérateur d'incrémentation](/fr/docs/Web/JavaScript/Reference/Operators/Increment)
+- [Opérateur de décrémentation](/fr/docs/Web/JavaScript/Reference/Operators/Decrement)
+- [Opérateur de négation unaire](/fr/docs/Web/JavaScript/Reference/Operators/Unary_negation)
+- [Opérateur plus unaire](/fr/docs/Web/JavaScript/Reference/Operators/Unary_plus)
diff --git a/files/fr/web/javascript/reference/operators/remainder_assignment/index.html b/files/fr/web/javascript/reference/operators/remainder_assignment/index.html
deleted file mode 100644
index 87a47940d9..0000000000
--- a/files/fr/web/javascript/reference/operators/remainder_assignment/index.html
+++ /dev/null
@@ -1,50 +0,0 @@
----
-title: Affectation après reste (%=)
-slug: Web/JavaScript/Reference/Operators/Remainder_assignment
-tags:
-  - Assignment operator
-  - JavaScript
-  - Language feature
-  - Operator
-  - Reference
-browser-compat: javascript.operators.remainder_assignment
-translation-of: Web/JavaScript/Reference/Operators/Remainder_assignment
----
-<div>{{jsSidebar("Operators")}}</div>
-
-<p>L'opérateur de reste et d'affectation (<code>%=</code>) calcule le reste de la division de l'opérande gauche par l'opérande droit et affecte ce résultat à la variable représentée par l'opérande gauche.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/expressions-remainder-assignment.html")}}</div>
-
-<h2 id="syntax">Syntaxe</h2>
-
-<pre class="brush: js">
-<strong>Opérateur :</strong> x %= y
-<strong>Signification :</strong>  x  = x % y
-</pre>
-
-<h2 id="examples">Exemples</h2>
-
-<h3 id="using_remainder_assignment">Utiliser l'opérateur de reste et d'affectation</h3>
-
-<pre class="brush: js">
-let truc = 5;
-truc %= 2;      // 1
-truc %= 'toto'; // NaN
-truc %= 0;      // NaN
-</pre>
-
-<h2 id="specifications">Spécifications</h2>
-
-<p>{{Specifications}}</p>
-
-<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
-
-<p>{{Compat}}</p>
-
-<h2 id="see_also">Voir aussi</h2>
-
-<ul>
-  <li><a href="/fr/docs/Web/JavaScript/Guide/Expressions_and_Operators#assignment">Les opérateurs d'affectation dans le guide JavaScript</a></li>
-  <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Remainder">L'opérateur de reste</a></li>
-</ul>
diff --git a/files/fr/web/javascript/reference/operators/remainder_assignment/index.md b/files/fr/web/javascript/reference/operators/remainder_assignment/index.md
new file mode 100644
index 0000000000..a31cc9a472
--- /dev/null
+++ b/files/fr/web/javascript/reference/operators/remainder_assignment/index.md
@@ -0,0 +1,47 @@
+---
+title: Affectation après reste (%=)
+slug: Web/JavaScript/Reference/Operators/Remainder_assignment
+tags:
+  - Assignment operator
+  - JavaScript
+  - Language feature
+  - Operator
+  - Reference
+browser-compat: javascript.operators.remainder_assignment
+---
+{{jsSidebar("Operators")}}
+
+L'opérateur de reste et d'affectation (`%=`) calcule le reste de la division de l'opérande gauche par l'opérande droit et affecte ce résultat à la variable représentée par l'opérande gauche.
+
+{{EmbedInteractiveExample("pages/js/expressions-remainder-assignment.html")}}
+
+## Syntaxe
+
+```js
+Opérateur : x %= y
+Signification :  x  = x % y
+```
+
+## Exemples
+
+### Utiliser l'opérateur de reste et d'affectation
+
+```js
+let truc = 5;
+truc %= 2;      // 1
+truc %= 'toto'; // NaN
+truc %= 0;      // NaN
+```
+
+## Spécifications
+
+{{Specifications}}
+
+## Compatibilité des navigateurs
+
+{{Compat}}
+
+## Voir aussi
+
+- [Les opérateurs d'affectation dans le guide JavaScript](/fr/docs/Web/JavaScript/Guide/Expressions_and_Operators#assignment)
+- [L'opérateur de reste](/fr/docs/Web/JavaScript/Reference/Operators/Remainder)
diff --git a/files/fr/web/javascript/reference/operators/right_shift/index.html b/files/fr/web/javascript/reference/operators/right_shift/index.html
deleted file mode 100644
index 79c94864a3..0000000000
--- a/files/fr/web/javascript/reference/operators/right_shift/index.html
+++ /dev/null
@@ -1,67 +0,0 @@
----
-title: Décalage binaire à droite (>>)
-slug: Web/JavaScript/Reference/Operators/Right_shift
-tags:
-  - Bitwise operator
-  - JavaScript
-  - Language feature
-  - Operator
-  - Reference
-browser-compat: javascript.operators.right_shift
-translation-of: Web/JavaScript/Reference/Operators/Right_shift
----
-<div>{{jsSidebar("Operators")}}</div>
-
-<p>L'opérateur de <strong>décalage binaire à droite (<code>&gt;&gt;</code>)</strong> décale la séquence de bits représentée par le premier opérande d'autant de bits vers la droite que le nombre indiqué par le second opérande. Les bits en excès à droite sont écartés. Pour le remplissage des bits par la gauche, c'est le bit le plus à gauche initialement qui est recopié autant de fois que nécessaire. Aussi, le bit le plus à gauche dans le résultat sera le même que le bit le plus à gauche de l'opérande et les deux valeurs auront donc le même signe.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/expressions-right-shift.html")}}</div>
-
-<h2 id="syntax">Syntaxe</h2>
-
-<pre class="brush: js">
-<var>a</var> &gt;&gt; <var>b</var>
-</pre>
-
-<h2 id="description">Description</h2>
-
-<p>Cet opérateur décale les bits de la valeur fournie par le premier opérande d'autant de fois qu'indiqué par le deuxième opérande. Les bits en excès à droite sont écartés et pour les bits les plus à gauche, c'est le bit initialement le plus à gauche qui est dupliqué. On garde ainsi le même signe entre la valeur du premier opérande et la valeur fournie par le résultat.</p>
-
-<p>Ainsi, <code>9 &gt;&gt; 2</code> donnera <code>2</code> :</p>
-
-<pre class="brush: js">
-       9 (base 10): 00000000000000000000000000001001 (base 2)
-                    --------------------------------
-  9 &gt;&gt; 2 (base 10): 00000000000000000000000000000010 (base 2) = 2 (base 10)
-</pre>
-
-<p>De même, <code>-9 &gt;&gt; 2</code> donnera <code>-3</code>, car le signe est préservé :</p>
-
-<pre class="brush: js">
-       -9 (base 10): 11111111111111111111111111110111 (base 2)
-                     --------------------------------
-  -9 &gt;&gt; 2 (base 10): 11111111111111111111111111111101 (base 2) = -3 (base 10)
-</pre>
-
-<h2 id="examples">Exemples</h2>
-
-<h3 id="using_right_shift">Utiliser le décalage à droite</h3>
-
-<pre class="brush: js">
- 9 &gt;&gt; 2; //  2
--9 &gt;&gt; 2; // -3
-</pre>
-
-<h2 id="specifications">Spécifications</h2>
-
-<p>{{Specifications}}</p>
-
-<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
-
-<p>{{Compat}}</p>
-
-<h2 id="see_also">Voir aussi</h2>
-
-<ul>
-  <li><a href="/fr/docs/Web/JavaScript/Guide/Expressions_and_Operators#bitwise">Les opérateurs binaires dans le guide JavaScript</a></li>
-  <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Right_shift_assignment">L'opérateur de décalage binaire à droite et d'affectation</a></li>
-</ul>
diff --git a/files/fr/web/javascript/reference/operators/right_shift/index.md b/files/fr/web/javascript/reference/operators/right_shift/index.md
new file mode 100644
index 0000000000..ebd9092f33
--- /dev/null
+++ b/files/fr/web/javascript/reference/operators/right_shift/index.md
@@ -0,0 +1,64 @@
+---
+title: Décalage binaire à droite (>>)
+slug: Web/JavaScript/Reference/Operators/Right_shift
+tags:
+  - Bitwise operator
+  - JavaScript
+  - Language feature
+  - Operator
+  - Reference
+browser-compat: javascript.operators.right_shift
+---
+{{jsSidebar("Operators")}}
+
+L'opérateur de **décalage binaire à droite (`>>`)** décale la séquence de bits représentée par le premier opérande d'autant de bits vers la droite que le nombre indiqué par le second opérande. Les bits en excès à droite sont écartés. Pour le remplissage des bits par la gauche, c'est le bit le plus à gauche initialement qui est recopié autant de fois que nécessaire. Aussi, le bit le plus à gauche dans le résultat sera le même que le bit le plus à gauche de l'opérande et les deux valeurs auront donc le même signe.
+
+{{EmbedInteractiveExample("pages/js/expressions-right-shift.html")}}
+
+## Syntaxe
+
+```js
+a >> b
+```
+
+## Description
+
+Cet opérateur décale les bits de la valeur fournie par le premier opérande d'autant de fois qu'indiqué par le deuxième opérande. Les bits en excès à droite sont écartés et pour les bits les plus à gauche, c'est le bit initialement le plus à gauche qui est dupliqué. On garde ainsi le même signe entre la valeur du premier opérande et la valeur fournie par le résultat.
+
+Ainsi, `9 >> 2` donnera `2` :
+
+```js
+       9 (base 10): 00000000000000000000000000001001 (base 2)
+                    --------------------------------
+  9 >> 2 (base 10): 00000000000000000000000000000010 (base 2) = 2 (base 10)
+```
+
+De même, `-9 >> 2` donnera `-3`, car le signe est préservé :
+
+```js
+       -9 (base 10): 11111111111111111111111111110111 (base 2)
+                     --------------------------------
+  -9 >> 2 (base 10): 11111111111111111111111111111101 (base 2) = -3 (base 10)
+```
+
+## Exemples
+
+### Utiliser le décalage à droite
+
+```js
+ 9 >> 2; //  2
+-9 >> 2; // -3
+```
+
+## Spécifications
+
+{{Specifications}}
+
+## Compatibilité des navigateurs
+
+{{Compat}}
+
+## Voir aussi
+
+- [Les opérateurs binaires dans le guide JavaScript](/fr/docs/Web/JavaScript/Guide/Expressions_and_Operators#bitwise)
+- [L'opérateur de décalage binaire à droite et d'affectation](/fr/docs/Web/JavaScript/Reference/Operators/Right_shift_assignment)
diff --git a/files/fr/web/javascript/reference/operators/right_shift_assignment/index.html b/files/fr/web/javascript/reference/operators/right_shift_assignment/index.html
deleted file mode 100644
index 1674985313..0000000000
--- a/files/fr/web/javascript/reference/operators/right_shift_assignment/index.html
+++ /dev/null
@@ -1,51 +0,0 @@
----
-title: Affectation après décalage à droite (>>=)
-slug: Web/JavaScript/Reference/Operators/Right_shift_assignment
-tags:
-  - Assignment operator
-  - JavaScript
-  - Language feature
-  - Operator
-  - Reference
-browser-compat: javascript.operators.right_shift_assignment
-translation: Web/JavaScript/Reference/Operators/Right_shift_assignment
----
-<div>{{jsSidebar("Operators")}}</div>
-
-<p>L'opérateur de décalage à droite et d'affectation (<code>&gt;&gt;=</code>) décale la séquence de bits indiquée par l'opérande gauche d'autant de bits qu'indiqués par l'opérande droit puis affecte le résultat obtenu à la variable représentée par l'opérande gauche.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/expressions-right-shift-assignment.html")}}</div>
-
-<h2 id="syntax">Syntaxe</h2>
-
-<pre class="brush: js">
-<strong>Opérateur :</strong> x &gt;&gt;= y
-<strong>Signification :</strong>  x   = x &gt;&gt; y
-</pre>
-
-<h2 id="examples">Exemples</h2>
-
-<h3 id="using_right_shift_assignment">Utiliser l'opérateur de décalage à droite et d'affectation</h3>
-
-<pre class="brush: js">
-let a = 5; //   (00000000000000000000000000000101)
-a &gt;&gt;= 2;   // 1 (00000000000000000000000000000001)
-
-let b = -5; //  (-00000000000000000000000000000101)
-b &gt;&gt;= 2;  // -2 (-00000000000000000000000000000010)
-</pre>
-
-<h2 id="specifications">Spécifications</h2>
-
-<p>{{Specifications}}</p>
-
-<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
-
-<p>{{Compat}}</p>
-
-<h2 id="see_also">Voir aussi</h2>
-
-<ul>
-  <li><a href="/fr/docs/Web/JavaScript/Guide/Expressions_and_Operators#assignment">Les opérateurs d'affectation dans le guide JavaScript</a></li>
-  <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Right_shift">L'opérateur de décalage à droite</a></li>
-</ul>
diff --git a/files/fr/web/javascript/reference/operators/right_shift_assignment/index.md b/files/fr/web/javascript/reference/operators/right_shift_assignment/index.md
new file mode 100644
index 0000000000..255478be31
--- /dev/null
+++ b/files/fr/web/javascript/reference/operators/right_shift_assignment/index.md
@@ -0,0 +1,48 @@
+---
+title: Affectation après décalage à droite (>>=)
+slug: Web/JavaScript/Reference/Operators/Right_shift_assignment
+tags:
+  - Assignment operator
+  - JavaScript
+  - Language feature
+  - Operator
+  - Reference
+browser-compat: javascript.operators.right_shift_assignment
+---
+{{jsSidebar("Operators")}}
+
+L'opérateur de décalage à droite et d'affectation (`>>=`) décale la séquence de bits indiquée par l'opérande gauche d'autant de bits qu'indiqués par l'opérande droit puis affecte le résultat obtenu à la variable représentée par l'opérande gauche.
+
+{{EmbedInteractiveExample("pages/js/expressions-right-shift-assignment.html")}}
+
+## Syntaxe
+
+```js
+Opérateur : x >>= y
+Signification :  x   = x >> y
+```
+
+## Exemples
+
+### Utiliser l'opérateur de décalage à droite et d'affectation
+
+```js
+let a = 5; //   (00000000000000000000000000000101)
+a >>= 2;   // 1 (00000000000000000000000000000001)
+
+let b = -5; //  (-00000000000000000000000000000101)
+b >>= 2;  // -2 (-00000000000000000000000000000010)
+```
+
+## Spécifications
+
+{{Specifications}}
+
+## Compatibilité des navigateurs
+
+{{Compat}}
+
+## Voir aussi
+
+- [Les opérateurs d'affectation dans le guide JavaScript](/fr/docs/Web/JavaScript/Guide/Expressions_and_Operators#assignment)
+- [L'opérateur de décalage à droite](/fr/docs/Web/JavaScript/Reference/Operators/Right_shift)
diff --git a/files/fr/web/javascript/reference/operators/spread_syntax/index.html b/files/fr/web/javascript/reference/operators/spread_syntax/index.html
deleted file mode 100644
index a9e21fa187..0000000000
--- a/files/fr/web/javascript/reference/operators/spread_syntax/index.html
+++ /dev/null
@@ -1,259 +0,0 @@
----
-title: Syntaxe de décomposition
-slug: Web/JavaScript/Reference/Operators/Spread_syntax
-tags:
-  - ECMAScript 2015
-  - ECMAScript6
-  - JavaScript
-  - Reference
-  - Syntaxe
-translation_of: Web/JavaScript/Reference/Operators/Spread_syntax
-original_slug: Web/JavaScript/Reference/Opérateurs/Syntaxe_décomposition
----
-<div>{{jsSidebar("Operators")}}</div>
-
-<p>La <strong>syntaxe de décomposition</strong> permet d'étendre un itérable (par exemple une expression de tableau ou une chaîne de caractères) en lieu et place de plusieurs arguments (pour les appels de fonctions) ou de plusieurs éléments (pour les littéraux de tableaux) ou de paires clés-valeurs (pour les littéraux d'objets).</p>
-
-<div>{{EmbedInteractiveExample("pages/js/expressions-spreadsyntax.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<p>Pour l'utilisation de la décomposition dans les appels de fonction :</p>
-
-<pre class="syntaxbox notranslate">f(...objetIterable);
-</pre>
-
-<p>Pour les littéraux de tableaux :</p>
-
-<pre class="syntaxbox notranslate">[...objetIterable, 4, 5, 6]</pre>
-
-<p>Pour les littéraux objets (nouvelle fonctionnalité pour ECMAScript, actuellement en proposition de niveau 4, finalisée) :</p>
-
-<pre class="syntaxbox notranslate">let objClone = { ...obj };</pre>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Utiliser_la_décomposition_dans_les_appels_de_fonction">Utiliser la décomposition dans les appels de fonction</h3>
-
-<h4 id="Améliorer_la_fonction_apply">Améliorer la fonction <code>apply()</code></h4>
-
-<p>Il arrive souvent qu'on veuille utiliser {{jsxref( "Function.prototype.apply")}} avec un tableau parmi les arguments de la fonction utilisée :</p>
-
-<pre class="brush: js notranslate">function f(x, y, z) { }
-var args = [0, 1, 2];
-f.apply(null, args);</pre>
-
-<p>avec la décomposition, on peut désormais écrire :</p>
-
-<pre class="brush: js notranslate">function f(x, y, z) { }
-var args = [0, 1, 2];
-f(...args);</pre>
-
-<p>Tout argument passé à une fonction peut être décomposé grâce à cette syntaxe et cette syntaxe peut être utilisée pour plusieurs arguments.</p>
-
-<pre class="brush: js notranslate">function f(v, w, x, y, z) { }
-var args = [0, 1];
-f(-1, ...args, 2, ...[3]);</pre>
-
-<h4 id="Utiliser_apply_avec_lopérateur_new">Utiliser <code>apply()</code> avec l'opérateur <code>new</code></h4>
-
-<p>Avec ES5, il n'est pas possible d'utiliser <code>new</code> avec <code>apply</code> (selon ES5 <code>apply</code> effectue un appel <code>[[Call]]</code> et pas un appel <code>[[Construct]]</code>). Avec ES2015, la syntaxe de décomposition permet de le faire naturellement :</p>
-
-<pre class="brush: js notranslate">var champsDate = lireChampsDate(maBaseDeDonnées);
-var d = new Date(...champsDate);</pre>
-
-<p>Afin d'utiliser <code>new</code> avec un tableau de paramètres, sans utiliser la décomposition, il faudrait l'employer indirectement grâce à une application partielle :</p>
-
-<pre class="brush: js notranslate">function applyAndNew(constructor, args) {
-   function partial () {
-      return constructor.apply(this, args);
-   };
-   if (typeof constructor.prototype === "object") {
-      partial.prototype = Object.create(constructor.prototype);
-   }
-   return partial;
-}
-
-
-function monConstructeur () {
-   console.log("arguments.length: " + arguments.length);
-   console.log(arguments);
-   this.prop1="val1";
-   this.prop2="val2";
-};
-
-var mesArguments = ["bi", "bop", "bup", null];
-var monConstructeurAvecArguments = applyAndNew(monConstructor, mesArguments);
-
-console.log(new monConstructeurAvecArguments);
-// (log fourni par monConstructeur):           arguments.length: 4
-// (log fourni par monConstructeur):           ["bi", "bop", "bup", null]
-// (log fourni par "new monConstructeurAvecArguments"): {prop1: "val1", prop2: "val2"}
-</pre>
-
-<h3 id="Utiliser_la_décomposition_dans_les_littéraux_de_tableau">Utiliser la décomposition dans les littéraux de tableau</h3>
-
-<h4 id="Améliorer_les_littéraux_de_tableau">Améliorer les littéraux de tableau</h4>
-
-<p>À l'heure actuelle, sans la décomposition, si on a un tableau et qu'on souhaite créer un nouveau tableau composé du premier, on ne peut pas utiliser un littéral de tableau et il faut utiliser des fonctions comme {{jsxref("Array.prototype.push", "push()")}}, {{jsxref("Array.prototype.splice", "splice()")}}, {{jsxref("Array.prototype.concat", "concat()")}}, etc. Avec la syntaxe de décomposition, cela devient plus succinct :</p>
-
-<pre class="brush: js notranslate">var articulations = ['épaules', 'genoux'];
-var corps = ['têtes', ...articulations, 'bras', 'pieds'];
-// ["têtes", "épaules", "genoux", "bras", "pieds"]
-</pre>
-
-<p>Comme pour les fonctions, la syntaxe peut être utilisé plusieurs fois.</p>
-
-<h4 id="Copier_un_tableau">Copier un tableau</h4>
-
-<pre class="brush: js notranslate">var arr = [1, 2, 3];
-var arr2 = [...arr];
-arr2.push(4);
-
-console.log(arr2); // [1, 2, 3, 4]
-console.log(arr);  // [1, 2, 3] (inchangé)
-</pre>
-
-<div class="note">
-<p><strong>Note :</strong> Lorsqu'on utilise la décomposition pour copier un tableau, celle-ci ne s'applique qu'au premier niveau de profondeur. Par conséquent, il peut ne pas convenir pour la copie des tableaux multidimensionnels (des tableaux imbriqués dans d'autres tableaux) comme le montre l’exemple suivant (il en va de même avec {{jsxref("Object.assign()")}} et la décomposition).</p>
-</div>
-
-<pre class="brush: js notranslate">var a = [[1], [2], [3]];
-var b = [...a]; // b vaut [[1], [2], [3]]
-
-b.shift().shift(); // *a* vaut désormais [[], [2], [3]];
-</pre>
-
-<h4 id="Une_meilleure_façon_de_concaténer_des_tableaux">Une meilleure façon de concaténer des tableaux</h4>
-
-<p>{{jsxref("Array.prototype.concat", "concat")}} est souvent utilisé afin de concaténer un tableau à la suite d'une autre. Avec ES5, on aurait le code suivant :</p>
-
-<pre class="brush: js notranslate">var arr1 = [0, 1, 2];
-var arr2 = [3, 4, 5];
-// On ajoute les éléments de arr2 après ceux de arr1
-var nouveauTableau = arr1.concat(arr2);</pre>
-
-<p>Avec ES2015 et la décomposition, on peut écrire :</p>
-
-<pre class="brush: js notranslate">var arr1 = [0, 1, 2];
-var arr2 = [3, 4, 5];
-arr1 = [...arr1, ...arr2]; // arr1 vaut [0, 1, 2, 3, 4, 5]
-</pre>
-
-<p>{{jsxref("Array.prototype.unshift", "unshift")}} est souvent utilisé afin d'insérer des valeurs d'un tableau au début d'un autre tableau. Avec ES5, on peut écrire :</p>
-
-<pre class="brush: js notranslate">var arr1 = [0, 1, 2];
-var arr2 = [3, 4, 5];
-// On ajoute tous les éléments
-// de arr2 au début de arr1
-Array.prototype.unshift.apply(arr1, arr2) // arr1 vaut [3, 4, 5, 0, 1, 2]</pre>
-
-<p>Avec ES2015 et la décomposition, on peut écrire :</p>
-
-<pre class="brush: js notranslate">var arr1 = [4, 5, 6];
-var arr2 = [1, 2, 3];
-arr1 = [...arr2, ...arr1];
-// arr1 vaut désormais [1, 2, 3, 4, 5, 6]
-</pre>
-
-<div class="note">
-<p><strong>Note :</strong> Il y a une différence avec <code>unshift()</code> : ici, on crée un nouveau tableau qui est affecté à <code>arr1</code>, le tableau original de <code>arr1</code> n'est pas modifié "sur place".</p>
-</div>
-
-<h3 id="Utiliser_la_décomposition_avec_les_littéraux_objet">Utiliser la décomposition avec les littéraux objet</h3>
-
-<p><a href="https://github.com/tc39/proposal-object-rest-spread">La proposition relative à la décomposition des propriétés (actuellement au stade de proposition de niveau 4)</a> vise à ajouter la décomposition des propriétés pour <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Initialisateur_objet">les littéraux objets</a>. Cela permet de copier les propriétés énumérables directement rattachées à un objet source sur un nouvel objet.</p>
-
-<p>Le clonage superficiel (qui ne rattache pas le prototype) ou la fusion d'objets peut donc être obtenue avec une syntaxe plus concise que celle utilisant {{jsxref("Object.assign()")}}.</p>
-
-<pre class="brush: js notranslate">var profil = { prenom: 'Sarah', profilComplet: false };
-var profilMisAJour = { nom: 'Dupont', profilComplet: true };
-
-var clone = { ...profil };
-// Object { prenom: 'Sarah', profilComplet: false }
-
-var fusion = { ...profil, ...profilMisAJour };
-// Object { prenom: 'Sarah', nom: 'Dupont', profilComplet: true };</pre>
-
-<p>On notera que {{jsxref("Object.assign()")}} déclenche <a href="/fr/docs/Web/JavaScript/Reference/Fonctions/set">les mutateurs</a>, ce qui n'est pas le cas pour la syntaxe de décomposition.</p>
-
-<p>Il n'est pas possible de remplacer ou de recopier le comportement de la fonction {{jsxref("Object.assign()")}} :</p>
-
-<pre class="brush: js notranslate">var profil = { prenom: 'Sarah', profilComplet: false };
-var profilMisAJour = { nom: 'Dupont', profilComplet: true };
-
-const fusionner = ( ...objets) =&gt; {...objets};
-var nouveauProfil = fusionner(profil, profilMisAJour);
-// Object { 0: { prenom: 'Sarah', profilComplet: false }, 1: { nom: 'Dupont', profilComplet: true } }
-
-var autreNouveauProfil = fusion({}, obj1, obj2);
-// Object { 0: {}, 1: { prenom: 'Sarah', profilComplet: false }, 2: { nom: 'Dupont', profilComplet: true } }
-</pre>
-
-<p>Dans l'exemple précédent, la syntaxe de décomposition ne fonctionne pas comme on pourrait s'y attendre : il décompose les arguments en un tableau grâce au paramètre du reste.</p>
-
-<h3 id="La_décomposition_ne_sapplique_quaux_itérables">La décomposition ne s'applique qu'aux itérables</h3>
-
-<p>Pour rappel : la syntaxe de décomposition ne s'applique qu'<a href="/fr/docs/Web/JavaScript/Guide/iterable">aux objets itérables</a> :</p>
-
-<pre class="brush: js notranslate">var obj = {"clé1" : "valeur1"};
-function maFonction(x) {
-  console.log(x); // undefined
-}
-maFonction(...obj);
-var args = [...obj];
-console.log(args, args.length) //[] 0</pre>
-
-<h3 id="Utiliser_la_décomposition_avec_de_nombreuses_valeurs">Utiliser la décomposition avec de nombreuses valeurs</h3>
-
-<p>Lorsqu'on utilise la décomposition (comme dans les exemples précédents), il faut faire attention à ne pas dépasser le nombre maximal d'arguments du moteur JavaScript. En effet, la décomposition place toutes les valeurs sources dans la pile. Pour plus d'informations, consulter {{jsxref( "Function.prototype.apply")}}.</p>
-
-<h2 id="Les_paramètres_du_reste">Les paramètres du reste</h2>
-
-<p>La syntaxe des paramètres du reste ressemble à la syntaxe de décomposition mais est utilisée afin de destructurer des tableaux et des objets. D'une certaine façon, la syntaxe du reste est l'opposée de la décomposition : la première collecte plusieurs éléments et les condense en un seul élément tandis que la seconde explose les éléments. Pour plus d'informations, voir la page sur <a href="/fr/docs/Web/JavaScript/Reference/Fonctions/paramètres_du_reste">les paramètres du reste</a>.</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-array-initializer')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td>Définie dans plusieurs sections de la spécification : <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-array-initializer">initialisateur de tableau</a>, <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-argument-lists">listes d'argument</a>.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2018', '#sec-object-initializer')}}</td>
-   <td>{{Spec2('ES2018')}}</td>
-   <td>Définie dans la section sur les <a href="http://www.ecma-international.org/ecma-262/9.0/#sec-object-initializer">initialisateurs d'objet.</a></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-array-initializer')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td>Aucune modification.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-object-initializer')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td>Aucune modification.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.operators.spread")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/JavaScript/Reference/Fonctions/paramètres_du_reste">Paramètres du reste</a></li>
- <li><a href="https://tech.mozfr.org/post/2015/06/05/ES6-en-details-%3A-la-decomposition">Le billet de ES6 en détails sur la décomposition</a></li>
- <li>{{jsxref("Function.prototype.apply()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/operators/spread_syntax/index.md b/files/fr/web/javascript/reference/operators/spread_syntax/index.md
new file mode 100644
index 0000000000..cfc56cf9a8
--- /dev/null
+++ b/files/fr/web/javascript/reference/operators/spread_syntax/index.md
@@ -0,0 +1,250 @@
+---
+title: Syntaxe de décomposition
+slug: Web/JavaScript/Reference/Operators/Spread_syntax
+tags:
+  - ECMAScript 2015
+  - ECMAScript6
+  - JavaScript
+  - Reference
+  - Syntaxe
+translation_of: Web/JavaScript/Reference/Operators/Spread_syntax
+original_slug: Web/JavaScript/Reference/Opérateurs/Syntaxe_décomposition
+---
+{{jsSidebar("Operators")}}
+
+La **syntaxe de décomposition** permet d'étendre un itérable (par exemple une expression de tableau ou une chaîne de caractères) en lieu et place de plusieurs arguments (pour les appels de fonctions) ou de plusieurs éléments (pour les littéraux de tableaux) ou de paires clés-valeurs (pour les littéraux d'objets).
+
+{{EmbedInteractiveExample("pages/js/expressions-spreadsyntax.html")}}
+
+## Syntaxe
+
+Pour l'utilisation de la décomposition dans les appels de fonction :
+
+    f(...objetIterable);
+
+Pour les littéraux de tableaux :
+
+    [...objetIterable, 4, 5, 6]
+
+Pour les littéraux objets (nouvelle fonctionnalité pour ECMAScript, actuellement en proposition de niveau 4, finalisée) :
+
+    let objClone = { ...obj };
+
+## Exemples
+
+### Utiliser la décomposition dans les appels de fonction
+
+#### Améliorer la fonction `apply()`
+
+Il arrive souvent qu'on veuille utiliser {{jsxref( "Function.prototype.apply")}} avec un tableau parmi les arguments de la fonction utilisée :
+
+```js
+function f(x, y, z) { }
+var args = [0, 1, 2];
+f.apply(null, args);
+```
+
+avec la décomposition, on peut désormais écrire :
+
+```js
+function f(x, y, z) { }
+var args = [0, 1, 2];
+f(...args);
+```
+
+Tout argument passé à une fonction peut être décomposé grâce à cette syntaxe et cette syntaxe peut être utilisée pour plusieurs arguments.
+
+```js
+function f(v, w, x, y, z) { }
+var args = [0, 1];
+f(-1, ...args, 2, ...[3]);
+```
+
+#### Utiliser `apply()` avec l'opérateur `new`
+
+Avec ES5, il n'est pas possible d'utiliser `new` avec `apply` (selon ES5 `apply` effectue un appel `[[Call]]` et pas un appel `[[Construct]]`). Avec ES2015, la syntaxe de décomposition permet de le faire naturellement :
+
+```js
+var champsDate = lireChampsDate(maBaseDeDonnées);
+var d = new Date(...champsDate);
+```
+
+Afin d'utiliser `new` avec un tableau de paramètres, sans utiliser la décomposition, il faudrait l'employer indirectement grâce à une application partielle :
+
+```js
+function applyAndNew(constructor, args) {
+   function partial () {
+      return constructor.apply(this, args);
+   };
+   if (typeof constructor.prototype === "object") {
+      partial.prototype = Object.create(constructor.prototype);
+   }
+   return partial;
+}
+
+
+function monConstructeur () {
+   console.log("arguments.length: " + arguments.length);
+   console.log(arguments);
+   this.prop1="val1";
+   this.prop2="val2";
+};
+
+var mesArguments = ["bi", "bop", "bup", null];
+var monConstructeurAvecArguments = applyAndNew(monConstructor, mesArguments);
+
+console.log(new monConstructeurAvecArguments);
+// (log fourni par monConstructeur):           arguments.length: 4
+// (log fourni par monConstructeur):           ["bi", "bop", "bup", null]
+// (log fourni par "new monConstructeurAvecArguments"): {prop1: "val1", prop2: "val2"}
+```
+
+### Utiliser la décomposition dans les littéraux de tableau
+
+#### Améliorer les littéraux de tableau
+
+À l'heure actuelle, sans la décomposition, si on a un tableau et qu'on souhaite créer un nouveau tableau composé du premier, on ne peut pas utiliser un littéral de tableau et il faut utiliser des fonctions comme {{jsxref("Array.prototype.push", "push()")}}, {{jsxref("Array.prototype.splice", "splice()")}}, {{jsxref("Array.prototype.concat", "concat()")}}, etc. Avec la syntaxe de décomposition, cela devient plus succinct :
+
+```js
+var articulations = ['épaules', 'genoux'];
+var corps = ['têtes', ...articulations, 'bras', 'pieds'];
+// ["têtes", "épaules", "genoux", "bras", "pieds"]
+```
+
+Comme pour les fonctions, la syntaxe peut être utilisé plusieurs fois.
+
+#### Copier un tableau
+
+```js
+var arr = [1, 2, 3];
+var arr2 = [...arr];
+arr2.push(4);
+
+console.log(arr2); // [1, 2, 3, 4]
+console.log(arr);  // [1, 2, 3] (inchangé)
+```
+
+> **Note :** Lorsqu'on utilise la décomposition pour copier un tableau, celle-ci ne s'applique qu'au premier niveau de profondeur. Par conséquent, il peut ne pas convenir pour la copie des tableaux multidimensionnels (des tableaux imbriqués dans d'autres tableaux) comme le montre l’exemple suivant (il en va de même avec {{jsxref("Object.assign()")}} et la décomposition).
+
+```js
+var a = [[1], [2], [3]];
+var b = [...a]; // b vaut [[1], [2], [3]]
+
+b.shift().shift(); // *a* vaut désormais [[], [2], [3]];
+```
+
+#### Une meilleure façon de concaténer des tableaux
+
+{{jsxref("Array.prototype.concat", "concat")}} est souvent utilisé afin de concaténer un tableau à la suite d'une autre. Avec ES5, on aurait le code suivant :
+
+```js
+var arr1 = [0, 1, 2];
+var arr2 = [3, 4, 5];
+// On ajoute les éléments de arr2 après ceux de arr1
+var nouveauTableau = arr1.concat(arr2);
+```
+
+Avec ES2015 et la décomposition, on peut écrire :
+
+```js
+var arr1 = [0, 1, 2];
+var arr2 = [3, 4, 5];
+arr1 = [...arr1, ...arr2]; // arr1 vaut [0, 1, 2, 3, 4, 5]
+```
+
+{{jsxref("Array.prototype.unshift", "unshift")}} est souvent utilisé afin d'insérer des valeurs d'un tableau au début d'un autre tableau. Avec ES5, on peut écrire :
+
+```js
+var arr1 = [0, 1, 2];
+var arr2 = [3, 4, 5];
+// On ajoute tous les éléments
+// de arr2 au début de arr1
+Array.prototype.unshift.apply(arr1, arr2) // arr1 vaut [3, 4, 5, 0, 1, 2]
+```
+
+Avec ES2015 et la décomposition, on peut écrire :
+
+```js
+var arr1 = [4, 5, 6];
+var arr2 = [1, 2, 3];
+arr1 = [...arr2, ...arr1];
+// arr1 vaut désormais [1, 2, 3, 4, 5, 6]
+```
+
+> **Note :** Il y a une différence avec `unshift()` : ici, on crée un nouveau tableau qui est affecté à `arr1`, le tableau original de `arr1` n'est pas modifié "sur place".
+
+### Utiliser la décomposition avec les littéraux objet
+
+[La proposition relative à la décomposition des propriétés (actuellement au stade de proposition de niveau 4)](https://github.com/tc39/proposal-object-rest-spread) vise à ajouter la décomposition des propriétés pour [les littéraux objets](/fr/docs/Web/JavaScript/Reference/Opérateurs/Initialisateur_objet). Cela permet de copier les propriétés énumérables directement rattachées à un objet source sur un nouvel objet.
+
+Le clonage superficiel (qui ne rattache pas le prototype) ou la fusion d'objets peut donc être obtenue avec une syntaxe plus concise que celle utilisant {{jsxref("Object.assign()")}}.
+
+```js
+var profil = { prenom: 'Sarah', profilComplet: false };
+var profilMisAJour = { nom: 'Dupont', profilComplet: true };
+
+var clone = { ...profil };
+// Object { prenom: 'Sarah', profilComplet: false }
+
+var fusion = { ...profil, ...profilMisAJour };
+// Object { prenom: 'Sarah', nom: 'Dupont', profilComplet: true };
+```
+
+On notera que {{jsxref("Object.assign()")}} déclenche [les mutateurs](/fr/docs/Web/JavaScript/Reference/Fonctions/set), ce qui n'est pas le cas pour la syntaxe de décomposition.
+
+Il n'est pas possible de remplacer ou de recopier le comportement de la fonction {{jsxref("Object.assign()")}} :
+
+```js
+var profil = { prenom: 'Sarah', profilComplet: false };
+var profilMisAJour = { nom: 'Dupont', profilComplet: true };
+
+const fusionner = ( ...objets) => {...objets};
+var nouveauProfil = fusionner(profil, profilMisAJour);
+// Object { 0: { prenom: 'Sarah', profilComplet: false }, 1: { nom: 'Dupont', profilComplet: true } }
+
+var autreNouveauProfil = fusion({}, obj1, obj2);
+// Object { 0: {}, 1: { prenom: 'Sarah', profilComplet: false }, 2: { nom: 'Dupont', profilComplet: true } }
+```
+
+Dans l'exemple précédent, la syntaxe de décomposition ne fonctionne pas comme on pourrait s'y attendre : il décompose les arguments en un tableau grâce au paramètre du reste.
+
+### La décomposition ne s'applique qu'aux itérables
+
+Pour rappel : la syntaxe de décomposition ne s'applique qu'[aux objets itérables](/fr/docs/Web/JavaScript/Guide/iterable) :
+
+```js
+var obj = {"clé1" : "valeur1"};
+function maFonction(x) {
+  console.log(x); // undefined
+}
+maFonction(...obj);
+var args = [...obj];
+console.log(args, args.length) //[] 0
+```
+
+### Utiliser la décomposition avec de nombreuses valeurs
+
+Lorsqu'on utilise la décomposition (comme dans les exemples précédents), il faut faire attention à ne pas dépasser le nombre maximal d'arguments du moteur JavaScript. En effet, la décomposition place toutes les valeurs sources dans la pile. Pour plus d'informations, consulter {{jsxref( "Function.prototype.apply")}}.
+
+## Les paramètres du reste
+
+La syntaxe des paramètres du reste ressemble à la syntaxe de décomposition mais est utilisée afin de destructurer des tableaux et des objets. D'une certaine façon, la syntaxe du reste est l'opposée de la décomposition : la première collecte plusieurs éléments et les condense en un seul élément tandis que la seconde explose les éléments. Pour plus d'informations, voir la page sur [les paramètres du reste](/fr/docs/Web/JavaScript/Reference/Fonctions/paramètres_du_reste).
+
+## Spécifications
+
+| Spécification                                                        | État                         | Commentaires                                                                                                                                                                                                                                       |
+| -------------------------------------------------------------------- | ---------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| {{SpecName('ES2015', '#sec-array-initializer')}}     | {{Spec2('ES2015')}}     | Définie dans plusieurs sections de la spécification : [initialisateur de tableau](http://www.ecma-international.org/ecma-262/6.0/#sec-array-initializer), [listes d'argument](http://www.ecma-international.org/ecma-262/6.0/#sec-argument-lists). |
+| {{SpecName('ES2018', '#sec-object-initializer')}}     | {{Spec2('ES2018')}}     | Définie dans la section sur les [initialisateurs d'objet.](http://www.ecma-international.org/ecma-262/9.0/#sec-object-initializer)                                                                                                                 |
+| {{SpecName('ESDraft', '#sec-array-initializer')}}     | {{Spec2('ESDraft')}} | Aucune modification.                                                                                                                                                                                                                               |
+| {{SpecName('ESDraft', '#sec-object-initializer')}} | {{Spec2('ESDraft')}} | Aucune modification.                                                                                                                                                                                                                               |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.operators.spread")}}
+
+## Voir aussi
+
+- [Paramètres du reste](/fr/docs/Web/JavaScript/Reference/Fonctions/paramètres_du_reste)
+- [Le billet de ES6 en détails sur la décomposition](https://tech.mozfr.org/post/2015/06/05/ES6-en-details-%3A-la-decomposition)
+- {{jsxref("Function.prototype.apply()")}}
diff --git a/files/fr/web/javascript/reference/operators/strict_equality/index.html b/files/fr/web/javascript/reference/operators/strict_equality/index.html
deleted file mode 100644
index ba45dffaae..0000000000
--- a/files/fr/web/javascript/reference/operators/strict_equality/index.html
+++ /dev/null
@@ -1,100 +0,0 @@
----
-title: Égalité stricte (===)
-slug: Web/JavaScript/Reference/Operators/Strict_equality
-tags:
-  - JavaScript
-  - Language feature
-  - Operator
-  - Reference
-browser-compat: javascript.operators.strict_equality
-translation-of: Web/JavaScript/Reference/Operators/Strict_equality
----
-<div>{{jsSidebar("Operators")}}</div>
-
-<p>L'opérateur d'égalité stricte (<code>===</code>) vérifie si ses deux opérandes sont égaux et renvoie un booléen correspondant au résultat. À la différence de <a href="/fr/docs/Web/JavaScript/Reference/Operators/Equality">l'opérateur d'égalité</a>, l'opérateur d'égalité stricte considère toujours des opérandes de types différents comme étant différents.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/expressions-strict-equality.html")}}</div>
-
-<h2 id="syntax">Syntaxe</h2>
-
-<pre class="brush: js">
-x === y
-</pre>
-
-<h2 id="description">Description</h2>
-
-<p>Les opérateurs d'égalité stricte (<code>===</code> et <code>!==</code>) utilisent <a href="https://www.ecma-international.org/ecma-262/5.1/#sec-11.9.6">l'algorithme de comparaison d'égalité stricte</a> pour comparer deux opérandes.</p>
-
-<ul>
-  <li>Si les opérandes sont de types différents, on renvoie <code>false</code>.</li>
-  <li>Si les deux opérandes sont des objets, on renvoie <code>true</code> uniquement s'ils réfèrent au même objet.</li>
-  <li>Si les deux opérandes valent <code>null</code> ou si les deux opérandes valent <code>undefined</code>, on renvoie <code>true</code>.</li>
-  <li>Si au moins l'un des opérandes vaut <code>NaN</code>, on renvoie <code>false</code>.</li>
-  <li>Sinon, on compare la valeur des deux opérandes :
-    <ul>
-      <li>Les nombres doivent avoir la même valeur. <code>+0</code> and <code>-0</code> sont considérés comme égaux.</li>
-      <li>Les chaînes de caractères doivent avoir les mêmes caractères, dans le même ordre.</li>
-      <li>Les booléens doivent avoir la même valeur (tous les deux <code>true</code> ou tous les deux <code>false</code>).</li>
-    </ul>
-  </li>
-</ul>
-
-<p>La différence fondamentale avec <a href="/fr/docs/Web/JavaScript/Reference/Operators/Equality">l'opérateur d'égalité</a> (<code>==</code>) est que, lorsque les opérandes sont de types différents, <code>==</code> tentera une conversion vers un type commun avant la comparaison.</p>
-
-<h2 id="examples">Exemples</h2>
-
-<h3 id="comparing_operands_of_the_same_type">Comparaison d'opérandes de même type</h3>
-
-<pre class="brush: js">
-console.log("hello" === "hello");   // true
-console.log("hello" === "hola");    // false
-
-console.log(3 === 3);               // true
-console.log(3 === 4);               // false
-
-console.log(true === true);         // true
-console.log(true === false);        // false
-
-console.log(null === null);         // true
-</pre>
-
-<h3 id="comparing_operands_of_different_types">Comparaison d'opérandes de types différents</h3>
-
-<pre class="brush: js">
-console.log("3" === 3);           // false
-
-console.log(true === 1);          // false
-
-console.log(null === undefined);  // false
-</pre>
-
-<h3 id="comparing_objects">Comparaison d'objets</h3>
-
-<pre class="brush: js">
-const objet1 = {
-  name: "coucou"
-}
-
-const objet2 = {
-  name: "coucou"
-}
-
-console.log(objet1 === objet2);  // false
-console.log(objet1 === objet1);  // true
-</pre>
-
-<h2 id="specifications">Spécifications</h2>
-
-<p>{{Specifications}}</p>
-
-<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
-
-<p>{{Compat}}</p>
-
-<h2 id="see_also">Voir aussi</h2>
-
-<ul>
-  <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Inequality">L'opérateur d'inégalité</a></li>
-  <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Equality">L'opérateur d'égalité</a></li>
-  <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Strict_inequality">L'opérateur d'inégalité stricte</a></li>
-</ul>
diff --git a/files/fr/web/javascript/reference/operators/strict_equality/index.md b/files/fr/web/javascript/reference/operators/strict_equality/index.md
new file mode 100644
index 0000000000..297f4f4f67
--- /dev/null
+++ b/files/fr/web/javascript/reference/operators/strict_equality/index.md
@@ -0,0 +1,93 @@
+---
+title: Égalité stricte (===)
+slug: Web/JavaScript/Reference/Operators/Strict_equality
+tags:
+  - JavaScript
+  - Language feature
+  - Operator
+  - Reference
+browser-compat: javascript.operators.strict_equality
+---
+{{jsSidebar("Operators")}}
+
+L'opérateur d'égalité stricte (`===`) vérifie si ses deux opérandes sont égaux et renvoie un booléen correspondant au résultat. À la différence de [l'opérateur d'égalité](/fr/docs/Web/JavaScript/Reference/Operators/Equality), l'opérateur d'égalité stricte considère toujours des opérandes de types différents comme étant différents.
+
+{{EmbedInteractiveExample("pages/js/expressions-strict-equality.html")}}
+
+## Syntaxe
+
+```js
+x === y
+```
+
+## Description
+
+Les opérateurs d'égalité stricte (`===` et `!==`) utilisent [l'algorithme de comparaison d'égalité stricte](https://www.ecma-international.org/ecma-262/5.1/#sec-11.9.6) pour comparer deux opérandes.
+
+- Si les opérandes sont de types différents, on renvoie `false`.
+- Si les deux opérandes sont des objets, on renvoie `true` uniquement s'ils réfèrent au même objet.
+- Si les deux opérandes valent `null` ou si les deux opérandes valent `undefined`, on renvoie `true`.
+- Si au moins l'un des opérandes vaut `NaN`, on renvoie `false`.
+- Sinon, on compare la valeur des deux opérandes :
+
+  - Les nombres doivent avoir la même valeur. `+0` and `-0` sont considérés comme égaux.
+  - Les chaînes de caractères doivent avoir les mêmes caractères, dans le même ordre.
+  - Les booléens doivent avoir la même valeur (tous les deux `true` ou tous les deux `false`).
+
+La différence fondamentale avec [l'opérateur d'égalité](/fr/docs/Web/JavaScript/Reference/Operators/Equality) (`==`) est que, lorsque les opérandes sont de types différents, `==` tentera une conversion vers un type commun avant la comparaison.
+
+## Exemples
+
+### Comparaison d'opérandes de même type
+
+```js
+console.log("hello" === "hello");   // true
+console.log("hello" === "hola");    // false
+
+console.log(3 === 3);               // true
+console.log(3 === 4);               // false
+
+console.log(true === true);         // true
+console.log(true === false);        // false
+
+console.log(null === null);         // true
+```
+
+### Comparaison d'opérandes de types différents
+
+```js
+console.log("3" === 3);           // false
+
+console.log(true === 1);          // false
+
+console.log(null === undefined);  // false
+```
+
+### Comparaison d'objets
+
+```js
+const objet1 = {
+  name: "coucou"
+}
+
+const objet2 = {
+  name: "coucou"
+}
+
+console.log(objet1 === objet2);  // false
+console.log(objet1 === objet1);  // true
+```
+
+## Spécifications
+
+{{Specifications}}
+
+## Compatibilité des navigateurs
+
+{{Compat}}
+
+## Voir aussi
+
+- [L'opérateur d'inégalité](/fr/docs/Web/JavaScript/Reference/Operators/Inequality)
+- [L'opérateur d'égalité](/fr/docs/Web/JavaScript/Reference/Operators/Equality)
+- [L'opérateur d'inégalité stricte](/fr/docs/Web/JavaScript/Reference/Operators/Strict_inequality)
diff --git a/files/fr/web/javascript/reference/operators/strict_inequality/index.html b/files/fr/web/javascript/reference/operators/strict_inequality/index.html
deleted file mode 100644
index d436d5af46..0000000000
--- a/files/fr/web/javascript/reference/operators/strict_inequality/index.html
+++ /dev/null
@@ -1,97 +0,0 @@
----
-title: Inégalité stricte (!==)
-slug: Web/JavaScript/Reference/Operators/Strict_inequality
-tags:
-  - JavaScript
-  - Language feature
-  - Operator
-  - Reference
-browser-compat: javascript.operators.strict_inequality
-translation-of: Web/JavaScript/Reference/Operators/Strict_inequality
----
-<div>{{jsSidebar("Operators")}}</div>
-
-<p>L'opérateur d'inégalité stricte (<code>!==</code>) vérifie si ses deux opérandes ne sont pas égaux et renvoie un booléen correspondant au résultat. À la différence de <a href="/fr/docs/Web/JavaScript/Reference/Operators/Inequality">l'opérateur d'inégalité</a>, l'opérateur d'inégalité stricte considère toujours des opérandes de types différents comme étant différents.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/expressions-strict-inequality.html")}}</div>
-
-<h2 id="syntax">Syntaxe</h2>
-
-<pre class="brush: js">
-x !== y
-</pre>
-
-<h2 id="description">Description</h2>
-
-<p>L'opérateur d'inégalité stricte vérifie que ses deux opérandes ne sont pas égaux. Il s'agit de la négation de <a href="/fr/docs/Web/JavaScript/Reference/Operators/Strict_equality">l'opérateur d'égalité stricte</a>. Les deux expressions suivantes fourniront toujours le même résultat :</p>
-
-<pre class="brush: js">
-x !== y
-!(x === y)
-</pre>
-
-<p>Pour plus de détails sur l'algorithme de comparaison utilisé, voir <a href="/fr/docs/Web/JavaScript/Reference/Operators/Strict_equality">la page sur l'opérateur d'égalité stricte</a>.</p>
-
-<p>À l'instar de l'opérateur d'égalité stricte, l'opérateur d'inégalité stricte considèrera toujours des opérandes de types différents comme étant différents :</p>
-
-<pre class="brush: js">
-3 !== "3"; // true
-</pre>
-
-<h2 id="examples">Exemples</h2>
-
-<h3 id="comparing_operands_of_the_same_type">Comparaison d'opérandes de même type</h3>
-
-<pre class="brush: js">
-console.log("hello" !== "hello");   // false
-console.log("hello" !== "hola");    // true
-
-console.log(3 !== 3);               // false
-console.log(3 !== 4);               // true
-
-console.log(true !== true);         // false
-console.log(true !== false);        // true
-
-console.log(null !== null);         // false
-</pre>
-
-<h3 id="comparing_operands_of_different_types">Comparaison d'opérandes de types différents</h3>
-
-<pre class="brush: js">
-console.log("3" !== 3);           // true
-
-console.log(true !== 1);          // true
-
-console.log(null !== undefined);  // true
-</pre>
-
-<h3 id="comparing_objects">Comparaison d'objets</h3>
-
-<pre class="brush: js">
-const objet1 = {
-  name: "coucou"
-}
-
-const objet2 = {
-  name: "coucou"
-}
-
-console.log(objet1 !== objet2);  // true
-console.log(objet1 !== objet1);  // false
-</pre>
-
-<h2 id="specifications">Spécifications</h2>
-
-<p>{{Specifications}}</p>
-
-<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
-
-<p>{{Compat}}</p>
-
-<h2 id="see_also">Voir aussi</h2>
-
-<ul>
-  <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Inequality">L'opérateur d'inégalité</a></li>
-  <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Equality">L'opérateur d'égalité</a></li>
-  <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Strict_equality">L'opérateur d'égalité stricte</a></li>
-</ul>
diff --git a/files/fr/web/javascript/reference/operators/strict_inequality/index.md b/files/fr/web/javascript/reference/operators/strict_inequality/index.md
new file mode 100644
index 0000000000..e76668d052
--- /dev/null
+++ b/files/fr/web/javascript/reference/operators/strict_inequality/index.md
@@ -0,0 +1,94 @@
+---
+title: Inégalité stricte (!==)
+slug: Web/JavaScript/Reference/Operators/Strict_inequality
+tags:
+  - JavaScript
+  - Language feature
+  - Operator
+  - Reference
+browser-compat: javascript.operators.strict_inequality
+---
+{{jsSidebar("Operators")}}
+
+L'opérateur d'inégalité stricte (`!==`) vérifie si ses deux opérandes ne sont pas égaux et renvoie un booléen correspondant au résultat. À la différence de [l'opérateur d'inégalité](/fr/docs/Web/JavaScript/Reference/Operators/Inequality), l'opérateur d'inégalité stricte considère toujours des opérandes de types différents comme étant différents.
+
+{{EmbedInteractiveExample("pages/js/expressions-strict-inequality.html")}}
+
+## Syntaxe
+
+```js
+x !== y
+```
+
+## Description
+
+L'opérateur d'inégalité stricte vérifie que ses deux opérandes ne sont pas égaux. Il s'agit de la négation de [l'opérateur d'égalité stricte](/fr/docs/Web/JavaScript/Reference/Operators/Strict_equality). Les deux expressions suivantes fourniront toujours le même résultat :
+
+```js
+x !== y
+!(x === y)
+```
+
+Pour plus de détails sur l'algorithme de comparaison utilisé, voir [la page sur l'opérateur d'égalité stricte](/fr/docs/Web/JavaScript/Reference/Operators/Strict_equality).
+
+À l'instar de l'opérateur d'égalité stricte, l'opérateur d'inégalité stricte considèrera toujours des opérandes de types différents comme étant différents :
+
+```js
+3 !== "3"; // true
+```
+
+## Exemples
+
+### Comparaison d'opérandes de même type
+
+```js
+console.log("hello" !== "hello");   // false
+console.log("hello" !== "hola");    // true
+
+console.log(3 !== 3);               // false
+console.log(3 !== 4);               // true
+
+console.log(true !== true);         // false
+console.log(true !== false);        // true
+
+console.log(null !== null);         // false
+```
+
+### Comparaison d'opérandes de types différents
+
+```js
+console.log("3" !== 3);           // true
+
+console.log(true !== 1);          // true
+
+console.log(null !== undefined);  // true
+```
+
+### Comparaison d'objets
+
+```js
+const objet1 = {
+  name: "coucou"
+}
+
+const objet2 = {
+  name: "coucou"
+}
+
+console.log(objet1 !== objet2);  // true
+console.log(objet1 !== objet1);  // false
+```
+
+## Spécifications
+
+{{Specifications}}
+
+## Compatibilité des navigateurs
+
+{{Compat}}
+
+## Voir aussi
+
+- [L'opérateur d'inégalité](/fr/docs/Web/JavaScript/Reference/Operators/Inequality)
+- [L'opérateur d'égalité](/fr/docs/Web/JavaScript/Reference/Operators/Equality)
+- [L'opérateur d'égalité stricte](/fr/docs/Web/JavaScript/Reference/Operators/Strict_equality)
diff --git a/files/fr/web/javascript/reference/operators/subtraction/index.html b/files/fr/web/javascript/reference/operators/subtraction/index.html
deleted file mode 100644
index cdada5f8cb..0000000000
--- a/files/fr/web/javascript/reference/operators/subtraction/index.html
+++ /dev/null
@@ -1,59 +0,0 @@
----
-title: Soustraction (-)
-slug: Web/JavaScript/Reference/Operators/Subtraction
-tags:
-  - JavaScript
-  - Language feature
-  - Operator
-  - Reference
-browser-compat: javascript.operators.subtraction
-translation-of: Web/JavaScript/Reference/Operators/Subtraction
----
-<div>{{jsSidebar("Operators")}}</div>
-
-<p>L'opérateur de soustraction (<code>-</code>) effectue la soustraction entre les deux opérandes et fournit la différence obtenue.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/expressions-subtraction.html")}}</div>
-
-<h2 id="syntax">Syntaxe</h2>
-
-<pre class="brush: js">
-<strong>Opérateur :</strong> <var>x</var> - <var>y</var>
-</pre>
-
-<h2 id="examples">Exemples</h2>
-
-<h3 id="subtraction_with_numbers">Avec des valeurs numériques</h3>
-
-<pre class="brush: js">
-5 - 3     // 2
-3 - 5     // -2
-</pre>
-
-<h3 id="subtraction_with_non-numbers">Avec des valeurs non-numériques</h3>
-
-<pre class="brush: js">
-'toto' - 3 // NaN
-</pre>
-
-<h2 id="specifications">Spécifications</h2>
-
-<p>{{Specifications}}</p>
-
-<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
-
-<p>{{Compat}}</p>
-
-<h2 id="see_also">Voir aussi</h2>
-
-<ul>
-  <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Addition">Opérateur d'addition</a></li>
-  <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Division">Opérateur de division</a></li>
-  <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Multiplication">Opérateur de multiplication</a></li>
-  <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Remainder">Opérateur de reste</a></li>
-  <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Exponentiation">Opérateur d'exponentiation</a></li>
-  <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Increment">Opérateur d'incrémentation</a></li>
-  <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Decrement">Opérateur de décrémentation</a></li>
-  <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Unary_negation">Opérateur de négation unaire</a></li>
-  <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Unary_plus">Opérateur plus unaire</a></li>
-</ul>
diff --git a/files/fr/web/javascript/reference/operators/subtraction/index.md b/files/fr/web/javascript/reference/operators/subtraction/index.md
new file mode 100644
index 0000000000..6aa275294c
--- /dev/null
+++ b/files/fr/web/javascript/reference/operators/subtraction/index.md
@@ -0,0 +1,56 @@
+---
+title: Soustraction (-)
+slug: Web/JavaScript/Reference/Operators/Subtraction
+tags:
+  - JavaScript
+  - Language feature
+  - Operator
+  - Reference
+browser-compat: javascript.operators.subtraction
+---
+{{jsSidebar("Operators")}}
+
+L'opérateur de soustraction (`-`) effectue la soustraction entre les deux opérandes et fournit la différence obtenue.
+
+{{EmbedInteractiveExample("pages/js/expressions-subtraction.html")}}
+
+## Syntaxe
+
+```js
+Opérateur : x - y
+```
+
+## Exemples
+
+### Avec des valeurs numériques
+
+```js
+5 - 3     // 2
+3 - 5     // -2
+```
+
+### Avec des valeurs non-numériques
+
+```js
+'toto' - 3 // NaN
+```
+
+## Spécifications
+
+{{Specifications}}
+
+## Compatibilité des navigateurs
+
+{{Compat}}
+
+## Voir aussi
+
+- [Opérateur d'addition](/fr/docs/Web/JavaScript/Reference/Operators/Addition)
+- [Opérateur de division](/fr/docs/Web/JavaScript/Reference/Operators/Division)
+- [Opérateur de multiplication](/fr/docs/Web/JavaScript/Reference/Operators/Multiplication)
+- [Opérateur de reste](/fr/docs/Web/JavaScript/Reference/Operators/Remainder)
+- [Opérateur d'exponentiation](/fr/docs/Web/JavaScript/Reference/Operators/Exponentiation)
+- [Opérateur d'incrémentation](/fr/docs/Web/JavaScript/Reference/Operators/Increment)
+- [Opérateur de décrémentation](/fr/docs/Web/JavaScript/Reference/Operators/Decrement)
+- [Opérateur de négation unaire](/fr/docs/Web/JavaScript/Reference/Operators/Unary_negation)
+- [Opérateur plus unaire](/fr/docs/Web/JavaScript/Reference/Operators/Unary_plus)
diff --git a/files/fr/web/javascript/reference/operators/subtraction_assignment/index.html b/files/fr/web/javascript/reference/operators/subtraction_assignment/index.html
deleted file mode 100644
index ad67f469d6..0000000000
--- a/files/fr/web/javascript/reference/operators/subtraction_assignment/index.html
+++ /dev/null
@@ -1,49 +0,0 @@
----
-title: Affectation après soustraction (-=)
-slug: Web/JavaScript/Reference/Operators/Subtraction_assignment
-tags:
-  - Assignment operator
-  - JavaScript
-  - Language feature
-  - Operator
-  - Reference
-browser-compat: javascript.operators.subtraction_assignment
-translation-of: Web/JavaScript/Reference/Operators/Subtraction_assignment
----
-<div>{{jsSidebar("Operators")}}</div>
-
-<p>L'opérateur d'affectation après soustraction (<code>-=</code>) calcule la soustraction de l'opérande gauche par l'opérande droit puis affecte le résultat à la variable représentée par l'opérande gauche.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/expressions-subtraction-assignment.html")}}</div>
-
-<h2 id="syntax">Syntaxe</h2>
-
-<pre class="brush: js">
-<strong>Opérateur :</strong> x -= y
-<strong>Signification :</strong>  x  = x - y
-</pre>
-
-<h2 id="examples">Exemples</h2>
-
-<h3 id="using_subtraction_assignment">Utiliser l'opérateur de soustraction et d'affectation</h3>
-
-<pre class="brush: js">
-let truc = 5;
-truc -= 2;      // 3
-truc -= 'toto'; // NaN
-</pre>
-
-<h2 id="specifications">Spécifications</h2>
-
-<p>{{Specifications}}</p>
-
-<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
-
-<p>{{Compat}}</p>
-
-<h2 id="see_also">Voir aussi</h2>
-
-<ul>
-  <li><a href="/fr/docs/Web/JavaScript/Guide/Expressions_and_Operators#assignment">Les opérateurs d'affectation dans le guide JavaScript</a></li>
-  <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Subtraction">L'opérateur de soustraction</a></li>
-</ul>
diff --git a/files/fr/web/javascript/reference/operators/subtraction_assignment/index.md b/files/fr/web/javascript/reference/operators/subtraction_assignment/index.md
new file mode 100644
index 0000000000..dd658d604d
--- /dev/null
+++ b/files/fr/web/javascript/reference/operators/subtraction_assignment/index.md
@@ -0,0 +1,46 @@
+---
+title: Affectation après soustraction (-=)
+slug: Web/JavaScript/Reference/Operators/Subtraction_assignment
+tags:
+  - Assignment operator
+  - JavaScript
+  - Language feature
+  - Operator
+  - Reference
+browser-compat: javascript.operators.subtraction_assignment
+---
+{{jsSidebar("Operators")}}
+
+L'opérateur d'affectation après soustraction (`-=`) calcule la soustraction de l'opérande gauche par l'opérande droit puis affecte le résultat à la variable représentée par l'opérande gauche.
+
+{{EmbedInteractiveExample("pages/js/expressions-subtraction-assignment.html")}}
+
+## Syntaxe
+
+```js
+Opérateur : x -= y
+Signification :  x  = x - y
+```
+
+## Exemples
+
+### Utiliser l'opérateur de soustraction et d'affectation
+
+```js
+let truc = 5;
+truc -= 2;      // 3
+truc -= 'toto'; // NaN
+```
+
+## Spécifications
+
+{{Specifications}}
+
+## Compatibilité des navigateurs
+
+{{Compat}}
+
+## Voir aussi
+
+- [Les opérateurs d'affectation dans le guide JavaScript](/fr/docs/Web/JavaScript/Guide/Expressions_and_Operators#assignment)
+- [L'opérateur de soustraction](/fr/docs/Web/JavaScript/Reference/Operators/Subtraction)
diff --git a/files/fr/web/javascript/reference/operators/super/index.html b/files/fr/web/javascript/reference/operators/super/index.html
deleted file mode 100644
index 372dfcd497..0000000000
--- a/files/fr/web/javascript/reference/operators/super/index.html
+++ /dev/null
@@ -1,165 +0,0 @@
----
-title: super
-slug: Web/JavaScript/Reference/Operators/super
-tags:
-  - Classes
-  - ECMAScript 2015
-  - JavaScript
-  - Language feature
-  - Left-hand-side expressions
-  - Operator
-translation_of: Web/JavaScript/Reference/Operators/super
-original_slug: Web/JavaScript/Reference/Opérateurs/super
-browser-compat: javascript.operators.super
----
-<div>{{jsSidebar("Operators")}}</div>
-
-<p>Le mot-clé <code><strong>super</strong></code> est utilisé afin d'appeler ou d'accéder à des fonctions définies sur l'objet parent.</p>
-
-<p>Les expressions de la forme <code>super.propriete</code> et <code>super[expr]</code> sont valides pour n'importe quelle <a href="/fr/docs/Web/JavaScript/Reference/Functions/Method_definitions">définition de méthode</a>, que ce soit au sein d'une <a href="/fr/docs/Web/JavaScript/Reference/Classes">classe</a> ou d'un <a href="/fr/docs/Web/JavaScript/Reference/Operators/Object_initializer">littéral objet</a>.</p>
-
-<h2 id="syntax">Syntaxe</h2>
-
-<pre class="brush: js">super([arguments]); // Le constructeur parent est appelé
-super.functionOnParent([arguments]);
-</pre>
-
-<h2 id="description">Description</h2>
-
-<p>Lorsqu'il est utilisé dans un constructeur, le mot-clé <code>super</code> est utilisé seul et doit apparaître avant le mot-clé <code>this</code>. Ce mot-clé peut également être utilisé afin d'appeler des fonctions sur un objet parent.</p>
-
-<h2 id="examples">Exemples</h2>
-
-<h3 id="using_super_in_classes">Utiliser <code>super</code> avec les classes</h3>
-
-<p>Ce fragment de code est tiré de <a href="https://github.com/GoogleChrome/samples/blob/gh-pages/classes-es6/index.html">cet exemple</a>. Ici on utilise <code>super()</code> afin d'éviter la duplication des parties communes entre le constructeur de <code>Rectangle</code> et de <code>Carre</code>.</p>
-
-<pre class="brush: js">class Rectangle {
-  constructor(hauteur, largeur) {
-    this.name = 'Rectangle';
-    this.hauteur = hauteur;
-    this.largeur = largeur;
-  }
-  coucou(){
-    console.log('Coucou, je suis un ' + this.name + '.');
-  }
-  get aire() {
-    return this.hauteur * this.largeur;
-  }
-  set aire(valeur) {
-    this.hauteur = Math.sqrt(valeur);
-    this.largeur = Math.sqrt(valeur);
-  }
-}
-
-class Carre extends Rectangle {
-  constructor(longueur) {
-
-    // Ici, on appelle le constructeur de Rectangle
-    // qui est l'objet « parent » de Carré
-    super(longueur, longueur);
-
-    // Pour les classes dérivées, super() doit être appelé
-    // avant d'utiliser 'this' sinon cela entraînera une
-    // exception ReferenceError.
-    this.name = 'Carré';
-  }
-}</pre>
-
-<h3 id="super-calling_static_methods">Utiliser super pour appeler des méthodes statiques</h3>
-
-<p>Il est possible d'utiliser super pour invoquer des méthodes <a href="/fr/docs/Web/JavaScript/Reference/Classes/static">statiques</a> :</p>
-
-<pre class="brush: js">class Rectangle {
-  constructor() {}
-  static logNbCotes() {
-    return "J'ai 4 côtés";
-  }
-}
-
-class Carre extends Rectangle {
-  constructor(){}
-  static logDescription() {
-    return super.logNbCotes() + ' qui sont tous égaux';
-  }
-}
-Carre.logDescription(); // "J'ai 4 côtés qui sont tous égaux"
-</pre>
-
-<h3 id="deleting_super_properties_will_throw_an_error">Supprimer des propriétés parentes lèvera une exception</h3>
-
-<p>Il n'est pas possible d'utiliser l'opérateur <code><a href="/fr/docs/Web/JavaScript/Reference/Operators/delete">delete</a></code> sur <code>super.prop</code> ou <code>super[expr]</code> pour supprimer une propriété de la classe parente, cela renverra une exception <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/ReferenceError"><code>ReferenceError</code></a> :</p>
-
-<pre class="brush: js">class Base {
-  toto() {}
-}
-
-class Derivee extends Base {
-  delete() {
-    delete super.toto; // À ne pas faire
-  }
-}
-
-new Derivee().delete();
-// ReferenceError : suppression invalide avec 'super'</pre>
-
-<h3 id="super.prop_cannot_overwrite_non-writable_properties"><code>super.prop</code> ne peut pas surcharger les propriétés non modifiables</h3>
-
-<p>Lorsque des propriétés sont définies sans accès en écriture (<em>non-writable</em>), par exemple avec <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty"><code>Object.defineProperty()</code></a>, <code>super</code> ne peut pas surcharger les valeurs de ces propriétés.</p>
-
-<pre class="brush: js">class X {
-  constructor() {
-    Object.defineProperty(this, "prop", {
-      configurable: true,
-      writable: false,
-      value: 1
-    });
-  }
-}
-class Y extends X {
-  constructor() {
-    super();
-  }
-  toto(){
-    super.prop = 2; // Impossible de surcharger
-  }
-}
-const y = new Y();
-y.toto(); // TypeError "prop" est en lecture seule
-console.log(y.prop); // 1
-</pre>
-
-<h3 id="Utiliser_super.prop_sur_les_littéraux_objets">Utiliser <code>super.prop</code> sur les littéraux objets</h3>
-
-<p><code>super</code> peut également être utilisé avec <a
-    href="/fr/docs/Web/JavaScript/Reference/Operators/Object_initializer">la notation littérale</a>. Dans l'exemple qui suit, deux objets définissent chacun une méthode. Le deuxième objet utilise <code>super</code> pour appeler la méthode du premier objet. Cela fonctionne grâce à <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Object/setPrototypeOf"><code>Object.setPrototypeOf()</code></a> avec lequel on définit que le prototype de <code>obj2</code> est <code>obj1</code>. De cette façon, super peut parcourir la chaîne de prototypes et trouver <code>methode1</code> dans <code>obj1</code>.</p>
-
-<pre class="brush: js">const obj1 = {
-  methode1() {
-    console.log("méthode 1");
-  }
-}
-
-const obj2 = {
-  methode2() {
-    super.methode1();
-  }
-}
-
-Object.setPrototypeOf(obj2, obj1);
-obj2.methode2(); // affiche "méthode 1" dans la console
-</pre>
-
-<h2 id="specifications">Spécifications</h2>
-
-<p>{{Specifications}}</p>
-
-<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
-
-<p>{{Compat}}</p>
-
-<h2 id="see_also">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/JavaScript/Reference/Classes">Les classes</a></li>
-</ul>
diff --git a/files/fr/web/javascript/reference/operators/super/index.md b/files/fr/web/javascript/reference/operators/super/index.md
new file mode 100644
index 0000000000..98f1ced4b5
--- /dev/null
+++ b/files/fr/web/javascript/reference/operators/super/index.md
@@ -0,0 +1,170 @@
+---
+title: super
+slug: Web/JavaScript/Reference/Operators/super
+tags:
+  - Classes
+  - ECMAScript 2015
+  - JavaScript
+  - Language feature
+  - Left-hand-side expressions
+  - Operator
+translation_of: Web/JavaScript/Reference/Operators/super
+original_slug: Web/JavaScript/Reference/Opérateurs/super
+browser-compat: javascript.operators.super
+---
+{{jsSidebar("Operators")}}
+
+Le mot-clé **`super`** est utilisé afin d'appeler ou d'accéder à des fonctions définies sur l'objet parent.
+
+Les expressions de la forme `super.propriete` et `super[expr]` sont valides pour n'importe quelle [définition de méthode](/fr/docs/Web/JavaScript/Reference/Functions/Method_definitions), que ce soit au sein d'une [classe](/fr/docs/Web/JavaScript/Reference/Classes) ou d'un [littéral objet](/fr/docs/Web/JavaScript/Reference/Operators/Object_initializer).
+
+## Syntaxe
+
+```js
+super([arguments]); // Le constructeur parent est appelé
+super.functionOnParent([arguments]);
+```
+
+## Description
+
+Lorsqu'il est utilisé dans un constructeur, le mot-clé `super` est utilisé seul et doit apparaître avant le mot-clé `this`. Ce mot-clé peut également être utilisé afin d'appeler des fonctions sur un objet parent.
+
+## Exemples
+
+### Utiliser `super` avec les classes
+
+Ce fragment de code est tiré de [cet exemple](https://github.com/GoogleChrome/samples/blob/gh-pages/classes-es6/index.html). Ici on utilise `super()` afin d'éviter la duplication des parties communes entre le constructeur de `Rectangle` et de `Carre`.
+
+```js
+class Rectangle {
+  constructor(hauteur, largeur) {
+    this.name = 'Rectangle';
+    this.hauteur = hauteur;
+    this.largeur = largeur;
+  }
+  coucou(){
+    console.log('Coucou, je suis un ' + this.name + '.');
+  }
+  get aire() {
+    return this.hauteur * this.largeur;
+  }
+  set aire(valeur) {
+    this.hauteur = Math.sqrt(valeur);
+    this.largeur = Math.sqrt(valeur);
+  }
+}
+
+class Carre extends Rectangle {
+  constructor(longueur) {
+
+    // Ici, on appelle le constructeur de Rectangle
+    // qui est l'objet « parent » de Carré
+    super(longueur, longueur);
+
+    // Pour les classes dérivées, super() doit être appelé
+    // avant d'utiliser 'this' sinon cela entraînera une
+    // exception ReferenceError.
+    this.name = 'Carré';
+  }
+}
+```
+
+### Utiliser super pour appeler des méthodes statiques
+
+Il est possible d'utiliser super pour invoquer des méthodes [statiques](/fr/docs/Web/JavaScript/Reference/Classes/static) :
+
+```js
+class Rectangle {
+  constructor() {}
+  static logNbCotes() {
+    return "J'ai 4 côtés";
+  }
+}
+
+class Carre extends Rectangle {
+  constructor(){}
+  static logDescription() {
+    return super.logNbCotes() + ' qui sont tous égaux';
+  }
+}
+Carre.logDescription(); // "J'ai 4 côtés qui sont tous égaux"
+```
+
+### Supprimer des propriétés parentes lèvera une exception
+
+Il n'est pas possible d'utiliser l'opérateur [`delete`](/fr/docs/Web/JavaScript/Reference/Operators/delete) sur `super.prop` ou `super[expr]` pour supprimer une propriété de la classe parente, cela renverra une exception [`ReferenceError`](/fr/docs/Web/JavaScript/Reference/Global_Objects/ReferenceError) :
+
+```js
+class Base {
+  toto() {}
+}
+
+class Derivee extends Base {
+  delete() {
+    delete super.toto; // À ne pas faire
+  }
+}
+
+new Derivee().delete();
+// ReferenceError : suppression invalide avec 'super'
+```
+
+### `super.prop` ne peut pas surcharger les propriétés non modifiables
+
+Lorsque des propriétés sont définies sans accès en écriture (_non-writable_), par exemple avec [`Object.defineProperty()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty), `super` ne peut pas surcharger les valeurs de ces propriétés.
+
+```js
+class X {
+  constructor() {
+    Object.defineProperty(this, "prop", {
+      configurable: true,
+      writable: false,
+      value: 1
+    });
+  }
+}
+class Y extends X {
+  constructor() {
+    super();
+  }
+  toto(){
+    super.prop = 2; // Impossible de surcharger
+  }
+}
+const y = new Y();
+y.toto(); // TypeError "prop" est en lecture seule
+console.log(y.prop); // 1
+```
+
+### Utiliser `super.prop` sur les littéraux objets
+
+`super` peut également être utilisé avec [la notation littérale](/fr/docs/Web/JavaScript/Reference/Operators/Object_initializer). Dans l'exemple qui suit, deux objets définissent chacun une méthode. Le deuxième objet utilise `super` pour appeler la méthode du premier objet. Cela fonctionne grâce à [`Object.setPrototypeOf()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Object/setPrototypeOf) avec lequel on définit que le prototype de `obj2` est `obj1`. De cette façon, super peut parcourir la chaîne de prototypes et trouver `methode1` dans `obj1`.
+
+```js
+const obj1 = {
+  methode1() {
+    console.log("méthode 1");
+  }
+}
+
+const obj2 = {
+  methode2() {
+    super.methode1();
+  }
+}
+
+Object.setPrototypeOf(obj2, obj1);
+obj2.methode2(); // affiche "méthode 1" dans la console
+```
+
+## Spécifications
+
+{{Specifications}}
+
+## Compatibilité des navigateurs
+
+{{Compat}}
+
+## Voir aussi
+
+- [Les classes](/fr/docs/Web/JavaScript/Reference/Classes)
diff --git a/files/fr/web/javascript/reference/operators/this/index.html b/files/fr/web/javascript/reference/operators/this/index.html
deleted file mode 100644
index 17677cc5a1..0000000000
--- a/files/fr/web/javascript/reference/operators/this/index.html
+++ /dev/null
@@ -1,417 +0,0 @@
----
-title: L'opérateur this
-slug: Web/JavaScript/Reference/Operators/this
-tags:
-  - JavaScript
-  - Operator
-  - Reference
-translation_of: Web/JavaScript/Reference/Operators/this
-original_slug: Web/JavaScript/Reference/Opérateurs/L_opérateur_this
----
-<div>{{jsSidebar("Operators")}}</div>
-
-<p>En JavaScript, <strong>le mot-clé <code>this</code></strong> se comporte légèrement différemment des autres langages de programmation. Son comportement variera également légèrement selon qu'on utilise le <a href="/fr/docs/Web/JavaScript/Reference/Strict_mode">mode strict</a> ou le mode non-strict.</p>
-
-<p>Dans la plupart des cas, la valeur de <code>this</code> sera déterminée à partir de la façon dont une fonction est appelée. Il n'est pas possible de lui affecter une valeur lors de l'exécution et sa valeur peut être différente à chaque fois que la fonction est appelée. La méthode {{jsxref("Function.prototype.bind()","bind()")}} a été introduite avec ECMAScript 5 pour <a href="#bind">définir la valeur de <code>this</code> pour une fonction, indépendamment de la façon dont elle est appelée</a>. ECMAScript 2015 (ES6) a ajouté <a href="/fr/docs/Web/JavaScript/Reference/Fonctions/Fonctions_fl%C3%A9ch%C3%A9es">les fonctions fléchées</a> dans lesquelles <code>this</code> correspond à la valeur du contexte englobant.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/expressions-this.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">this</pre>
-
-<h3 id="Valeur">Valeur</h3>
-
-<p>L'objet JavaScript représentant le contexte dans lequel le code courant est exécuté.</p>
-
-<h2 id="Dans_le_contexte_global">Dans le contexte global</h2>
-
-<p>Dans le contexte global d'exécution (c'est-à-dire, celui en dehors de toute fonction), <code>this</code> fait référence à l'objet global (qu'on utilise ou non le mode strict).</p>
-
-<pre class="brush:js">// Si l'environnement de script est un navigateur,
-// l'objet window sera l'objet global
-console.log(this === window); // true
-
-this.a = 37;
-console.log(window.a); // 37
-
-this.b = "MDN";
-console.log(window.b); // "MDN"
-console.log(b);        // "MDN"
-</pre>
-
-<div class="note">
-<p><strong>Note :</strong> Il est également possible d'accéder au contexte global avec la propriété {{jsxref("globalThis")}} quel que soit le contexte utilisé pour l'exécution.</p>
-</div>
-
-<h2 id="Dans_le_contexte_dune_fonction">Dans le contexte d'une fonction</h2>
-
-<p>S'il est utilisé dans une fonction, la valeur de <code>this</code> dépendra de la façon dont la fonction a été appelée.</p>
-
-<h3 id="Avec_un_appel_simple">Avec un appel simple</h3>
-
-<pre class="brush:js">function f1(){
-  return this;
-}
-
-// Dans un navigateur
-f1() === window; // true (objet global)
-
-// Côté serveur (ex. Node)
-f1() === global; // true
-</pre>
-
-<p>Dans cet exemple, la valeur de <code>this</code> n'est pas définie lors de l'appel. Le code n'étant pas en mode strict, <code>this</code> doit toujours être un objet et ce sera donc l'objet global (soit {{domxref("Window", "window")}} pour un navigateur).</p>
-
-<pre class="brush:js">function f2(){
-  "use strict"; // on utilise le mode strict
-  return this;
-}
-
-f2() === undefined; // true
-</pre>
-
-<p>En mode strict, la valeur de <code>this</code> est conservée (il reste le même) entre le moment de sa définition et l'entrée dans le contexte d'exécution. S'il n'est pas défini, il reste <code>undefined</code>. Il pourrait être défini avec n'importe quelle autre valeur, telle que <code>null</code> ou <code>42</code> ou <code>"Je ne suis pas this"</code>.</p>
-
-<div class="note"><p><strong>Note :</strong> Dans ce deuxième exemple,<code>this</code> vaut {{jsxref("undefined")}} car <code>f2</code> a été appelé sans « base » (ex. : <code>window.f2()</code>). Cette fonctionnalité ne fut pas correctement implémentée dans certains navigateurs aux débuts du mode strict, en effet, certains renvoyaient alors l'objet <code>window</code>.</p></div>
-
-<h3 id="call_et_apply"><code>call</code> et <code>apply</code></h3>
-
-<p>Pour passer <code>this</code> d'un contexte à un autre, on pourra utiliser {{jsxref("Function.prototype.call()", "call()")}} ou {{jsxref("Function.prototype.apply()", "apply()")}} :</p>
-
-<pre class="brush: js">// Un objet peut être passé en premier argument
-// de call ou de apply
-var obj = { a: "Toto" };
-
-// Ici, on déclare une variable et la variable est affectée à l'objet global window comme propriété de celui-ci
-var a = "Global";
-
-function whatsThis(arg) {
-  // La valeur de this ici dépend de la façon
-  // dont la fonction est appelée
-  return this.a;
-}
-
-whatsThis();          // 'Global' car celui-ci dans la fonction n'est pas défini, il est donc défini par défaut sur l'objet global window
-whatsThis.call(obj);  // "Toto"
-whatsThis.apply(obj); // "Toto"
-</pre>
-
-<p>Lorsque le mot-clé <code>this</code> est utilisé dans le corps d'une fonction, il est possible d'utiliser les méthodes {{jsxref("Function.prototype.call()", "call()")}} ou {{jsxref("Function.prototype.apply()", "apply()")}} pour lier <code>this</code> à un objet donné. Toutes les fonctions héritent de ces méthodes grâce à {{jsxref("Function.prototype")}}.</p>
-
-<pre class="brush:js">function ajout(c, d){
-  return this.a + this.b + c + d;
-}
-
-var o = {a:1, b:3};
-
-// Le premier paramètre correspond à l'objet qu'on souhaite
-// lier à 'this', les paramètres suivants sont les arguments
-// à utiliser dans l'appel de la fonction
-ajout.call(o, 5, 7); // 1 + 3 + 5 + 7 = 16
-
-// Le premier paramètre correspond à l'objet qu'on souhaite
-// lier à 'this', le second paramètre est le tableau dont les
-// les éléments sont les arguments à passer à la fonction
-ajout.apply(o, [10, 20]); // 1 + 3 + 10 + 20 = 34
-</pre>
-
-<p>Note : En mode non-strict, si la valeur à lier à <code>this</code>, passée à <code>call</code> ou <code>apply</code>, n'est pas un objet, le moteur JavaScript tentera de la convertir en un objet grâce à l'opération interne <code>ToObject</code>. Si la valeur est d'un type primitif autre qu'objet, <code>7</code> ou <code>'toto'</code> par exemple, elle sera convertie en un objet grâce au constructeur associé. Ainsi, on aura le nombre <code>7</code> converti en un objet grâce à <code>new Number(7)</code> et la chaîne <code>'toto'</code> convertie en objet grâce à <code>new String('toto')</code>.</p>
-
-<pre class="brush:js">function truc() {
-  console.log(Object.prototype.toString.call(this));
-}
-
-truc.call(7);     // [object Number]
-truc.call('foo'); // [object String]
-</pre>
-
-<h3 id="La_méthode_bind">La méthode <code>bind</code></h3>
-
-<p>Avec ECMAScript 5, une nouvelle fonction fut introduite : {{jsxref("Function.prototype.bind()")}}. Lorsqu'on appelle <code>f.bind(unObjet)</code>, on crée une nouvelle fonction qui possède le même corps et la même portée que <code>f</code>, mais où <code>this</code> sera lié, de façon permanente, au premier argument passé à <code>bind</code>, quelle que soit la façon dont la méthode est utilisée.</p>
-
-<pre class="brush:js">function f(){
-  return this.a;
-}
-
-var g = f.bind({a:"azerty"});
-console.log(g()); // azerty
-
-var h = g.bind({a:"coucou"}); // bind ne fonctionne qu'une seule fois
-console.log(h()); // azerty
-
-var o = {a:37, f:f, g:g, h:h};
-console.log(o.a, o.f(), o.g(), o.h()); // 37, 37, azerty, azerty
-</pre>
-
-<h3 id="Avec_les_fonctions_fléchées">Avec les fonctions fléchées</h3>
-
-<p>En utilisant <a href="/fr/docs/Web/JavaScript/Reference/Fonctions/Fonctions_fléchées">les fonctions fléchées</a>, <code>this</code> correspond à la valeur de <code>this</code> utilisé dans le contexte englobant. Lorsqu'on utilise une fonction fléchée dans du code global, <code>this</code> sera l'objet global :</p>
-
-<pre class="brush: js">var objetGlobal = this;
-var toto = (() =&gt; this);
-console.log(toto() === objetGlobal); // true</pre>
-
-<p>Peu importe la façon dont <code>toto</code> sera appelée, <code>this</code> sera toujours l'objet global. Cela est également valable pour les méthodes d'objet (où généralement <code>this</code> correspond à l'objet courant) ou lorsque <code>call</code>, <code>apply</code> ou <code>bind</code> sont utilisés :</p>
-
-<pre class="brush: js">// Appelé comme la méthode d'un objet
-var obj = {toto: toto};
-console.log(obj.toto() === objetGlobal); // true
-
-// Ici on utilise call
-console.log(toto.call(obj) === objetGlobal); // true
-// Là on utilise bind
-toto = toto.bind(obj);
-console.log(toto() === objetGlobal); // true</pre>
-
-<p>Quelle que soit la méthode utilisée le <code>this</code> de <code>toto</code> sera défini avec la valeur qu'il avait lors de la création (dans l'exemple précédent, il s'agit de l'objet global). Cela vaut également pour les fonctions fléchées créées dans d'autres fonctions : <code>this</code> prendra la valeur de <code>this</code> dans le contexte englobant.</p>
-
-<pre class="brush: js">// On crée un objet obj qui a une méthode truc
-// qui renvoie une fonction qui renvoie la
-// valeur de this.
-// La fonction qui est renvoyée est créée sous
-// la forme d'une fonction fléchée. this est
-// donc fixé de façon permanente avec la valeur
-// de this du contexte englobant.
-var obj = { truc : function() {
-                    var x = (() =&gt; this);
-                    return x;
-                  }
-          };
-// On appelle truc comme une méthode d'obj, this
-// vaudra donc obj. On récupère la fonction
-// renvoyée par truc et on en stocke une référence
-// avec la variable fn
-var fn = obj.truc();
-
-// On appelle fn sans définir this, par défaut
-// en mode strict cela correspondrait à l'objet
-// global ou à undefined
-console.log(fn() === obj); // true
-
-// Attention à ne pas référence la méthode d'obj
-// sans l'appeler
-var fn2 = obj.truc;
-// Appeler le this de la fonction fléchée dans ce contexte
-// renverra window car c'est le this associé à fn2 (qui
-// correspond au contexte global)
-console.log(fn2()() == window); // true</pre>
-
-<p>Dans l'exemple précédent, la fonction affectée à <code>obj.truc</code> renvoie une autre fonction créée sous la forme d'une fonction fléchée. Par conséquent, <code>this</code> vaut toujours <code>obj.truc</code> lorsque la fonction est appelée. Lorsque la fonction est renvoyée, <code>this</code> continue de correspondre à la valeur initiale. Dans ce code, <code>this</code> vaut <code>obj</code> et garde cette valeur, même lorsqu'il est appelé plus tard.</p>
-
-<h3 id="En_tant_que_méthode_dun_objet">En tant que méthode d'un objet</h3>
-
-<p>Lorsqu'une fonction est appelée comme méthode d'un objet, <code>this</code> correspondra à l'objet possédant la méthode qu'on appelle.</p>
-
-<p>Ainsi, dans l'exemple suivant, lorsqu'on appelle <code>o.f()</code>, le <code>this</code> contenu à l'intérieur de la fonction correspond à l'objet <code>o</code>.</p>
-
-<pre class="brush:js">var o = {
-  prop: 37,
-  f: function() {
-    return this.prop;
-  }
-};
-
-console.log(o.f()); // 37
-</pre>
-
-<p>On notera que ce comportement n'est pas du tout affecté par la façon ou l'endroit de la définition de la fonction. Dans l'exemple précédent, on aurait très bien pu définir la fonction plus tard et la rattacher à une propriété de <code>o</code> plutôt que de la déclarer de cette façon. On aura le même résultat en faisant ainsi :</p>
-
-<pre class="brush:js">var o = {prop: 37};
-
-function indépendante() {
-  return this.prop;
-}
-
-o.f = indépendante;
-
-console.log(o.f()); // 37
-</pre>
-
-<p>On voit ici que ce qui importe est la façon dont la fonction est appelée et non pas la façon dont elle est définie. Ici la fonction est appelée comme une propriété (méthode) de <code>o</code>.</p>
-
-<p>De la même façon, <code>this</code> n'est affecté que par la référence la plus proche. Autrement dit, dans l'exemple suivant quand on appelle la fonction <code>o.b.g</code>, on appelle la méthode <code>g</code> de l'objet <code>o.b</code>. Ainsi, au moment de l'exécution, <code>this</code> fera référence à <code>o.b</code>. Le fait que cet objet soit une propriété de <code>o</code> n'a aucun impact : seule la référence objet la plus proche compte.</p>
-
-<pre class="brush:js">o.b = {g: indépendante, prop: 42};
-console.log(o.b.g()); // 42
-</pre>
-
-<h4 id="this_sur_la_chaîne_de_prototypes_de_lobjet"><code>this</code> sur la chaîne de prototypes de l'objet</h4>
-
-<p>Ce qui a été vu ci-avant est également applicable pour les méthodes qui sont présentes sur la chaîne de prototypes de l'objet. Si une méthode se situe sur la chaîne de prototype, <code>this</code> fera référence à l'objet appelant (de la même façon que si la méthode était une propriété directe de l'objet).</p>
-
-<pre class="brush:js">var o = {f:function(){ return this.a + this.b; }};
-var p = Object.create(o);
-p.a = 1;
-p.b = 4;
-
-console.log(p.f()); // 5
-</pre>
-
-<p>Dans cet exemple, l'objet qui est affecté à la variable <code>p</code> ne possède pas directement la propriété <code>f</code>, il en hérite de par son prototype. Cela n'impacte en rien la détermination de <code>this</code> car la recherche de la propriété <code>f</code> remonte le long de la chaîne de prototype et s'arrête à <code>o</code>. Au début de cette recherche, on a une référence à <code>p.f</code>, aussi <code>this</code> fera référence à l'objet représenté par <code>p</code>. Autrement dit <code>f</code> étant appelé comme une méthode de <code>p</code>, <code>this</code> fera ici référence à <code>p</code>. Cette fonctionnalité fait partie des caractéristiques de l'héritage prototypal de JavaScript.</p>
-
-<h4 id="this_dans_un_getter_ou_setter"><code>this</code> dans un <em>getter</em> ou <em>setter</em></h4>
-
-<p>Ici aussi, on a le même principe lorsque la fonction est appelée à partir d'un accesseur (<em>getter</em>) ou d'un mutateur (<em>setter</em>). Une fonction utilisée comme accesseur ou mutateur verra son <code>this</code> lié à l'objet à partir duquel on souhaite accéder/changer la propriété.</p>
-
-<pre class="brush:js">function moduleRéel(){
-  return Math.sqrt(this.re * this.re + this.im * this.im);
-}
-
-var o = {
-  re: 1,
-  im: -1,
-  get phase(){
-    return Math.atan2(this.im, this.re);
-  }
-};
-
-Object.defineProperty(o, 'moduleRéel', {
-    get: moduleRéel, enumerable:true, configurable:true});
-
-console.log(o.phase, o.moduleRéel); // logs -0.78 1.4142
-</pre>
-
-<h3 id="En_tant_que_constructeur">En tant que constructeur</h3>
-
-<p>Lorsqu'une fonction est utilisée comme constructeur (c'est-à-dire qu'elle est invoquée avec le mot-clé {{jsxref("Opérateurs/L_opérateur_new","new")}}), le <code>this</code> correspondant sera lié au nouvel objet en train d'être construit.</p>
-
-<div class="note">
-<p><strong>Note :</strong> Par défaut, un constructeur renverra l'objet auquel <code>this</code> fait référence. Cependant si la valeur de retour du constructeur est définie et est un objet, ce sera elle qui sera renvoyée (sinon ce sera la valeur de <code>this</code>).</p>
-</div>
-
-<pre class="brush:js">/*
- * Les constructeurs fonctionnent de la façon suivante :
- *
- * function MonConstructeur(){
- *   // le corps de la fonction
- *   // on crée des propriétés sur |this|
- *   // par exemple
- *   this.fum = "nom";
- *   // etc.
- *
- *   // Si la fonction utilise une instruction de
- *   // retour (return) et renvoie un objet
- *   // ce sera cet objet qui sera le résultat de
- *   // l'expression |new|.
- *   // Sinon, le résultat sera l'objet
- *   // lié à |this|
- *   // (ce second cas est celui qu'on rencontre
- *   // fréquemment).
- * }
- */
-
-function C(){
-  this.a = 37;
-}
-
-var o = new C();
-console.log(o.a); // 37
-
-
-function C2(){
-  this.a = 37;
-  return {a:38};
-}
-
-o = new C2();
-console.log(o.a); // 38
-</pre>
-
-<p>Dans le dernier exemple (<code>C2</code>), on renvoie un objet lors de la construction. L'objet qui était lié <code>this</code> est alors abandonné. (L'instruction "<code>this.a = 37;</code>" devient alors totalement inutile, bien qu'elle soit exécutée, elle n'aura aucun effet de bord.)</p>
-
-<h3 id="En_tant_que_gestionnaire_dévénement_DOM">En tant que gestionnaire d'événement DOM</h3>
-
-<p>Lorsqu'une fonction est utilisée comme gestionnaire d'événement (<em>event handler</em>), le <code>this</code> correspondant prendra la valeur de l'élément ayant déclenché l'événement (certains navigateurs ne suivent pas cette convention et les gestionnaires sont ajoutés dynamiquement avec d'autres méthodes qu'{{domxref("EventTarget.addEventListener()", "addEventListener()")}}).</p>
-
-<pre class="brush:js">// Lorsque cette fonction est appelée
-// comme listener, l'élément associé
-// sera coloré en bleu
-function bluify(e){
-  // Cette proposition est toujours vraie
-  console.log(this === e.currentTarget);
-
-  // true lorsque currentTarget et target correspondent
-  // au même objet
-  console.log(this === e.target);
-
-  this.style.backgroundColor = '#A5D9F3';
-}
-
-// On obtient une liste de tous les éléments
-// contenus dans le document
-var elements = document.getElementsByTagName('*');
-
-// On ajout le listener bluify pour réagier au clic
-// Quand on clique sur un élément, il deviendra bleu
-for(var i=0 ; i&lt;elements.length ; i++){
-  elements[i].addEventListener('click', bluify, false);
-}</pre>
-
-<h3 id="En_tant_que_gestionnaire_dévénements_in-line">En tant que gestionnaire d'événements <em>in-line</em></h3>
-
-<p>Lorsque le code est appelé depuis un gestionnaire d'événement « en ligne » (<em>in-line</em>), la valeur de <code>this</code> correspondra à l'élément du DOM sur lequel on a placé le <em>listener</em>. Ainsi :</p>
-
-<pre class="brush:js">&lt;button onclick="console.log(this.tagName.toLowerCase());"&gt;
-  Afficher this
-&lt;/button&gt;
-</pre>
-
-<p>montrera le texte <code>button</code> lorsqu'on cliquera dessus. Attention, seul le code externe verra la valeur de <code>this</code> affectée de cette façon :</p>
-
-<pre class="brush:js">&lt;button onclick="console.log((function(){return this})());"&gt;
-  Afficher le this interne
-&lt;/button&gt;
-</pre>
-
-<p>Ici, on utilise <code>this </code>à l'intérieur d'une fonction et il n'est pas défini en amont. Il renvoie donc l'objet global (l'objet <code>window</code> pour un navigateur avec du code non-strict).</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-this-keyword', 'Le mot-clé this')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-this-keyword', 'Le mot-clé this')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-11.1.1', 'Le mot-clé this')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES3', '#sec-11.1.1', 'Le mot-clé this')}}</td>
-   <td>{{Spec2('ES3')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES1', '#sec-11.1.1', 'Le mot-clé this')}}</td>
-   <td>{{Spec2('ES1')}}</td>
-   <td>Définition initiale. Implémentée avec JavaScript 1.0.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.operators.this")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/JavaScript/Reference/Strict_mode">Le mode strict</a></li>
- <li><a href="https://github.com/getify/You-Dont-Know-JS/blob/master/this%20&amp;%20object%20prototypes/README.md#you-dont-know-js-this--object-prototypes">this &amp; les prototypes objet</a> de Kyle Simpson sur GitHub (en anglais)</li>
- <li><a href="https://dmitripavlutin.com/gentle-explanation-of-this-in-javascript/">Un article explicatif sur <code>this</code> (en anglais)</a></li>
- <li>La propriété {{jsxref("globalThis")}} qui permet d'accéder à l'objet global <code>this</code></li>
-</ul>
diff --git a/files/fr/web/javascript/reference/operators/this/index.md b/files/fr/web/javascript/reference/operators/this/index.md
new file mode 100644
index 0000000000..f1d09c2d32
--- /dev/null
+++ b/files/fr/web/javascript/reference/operators/this/index.md
@@ -0,0 +1,407 @@
+---
+title: L'opérateur this
+slug: Web/JavaScript/Reference/Operators/this
+tags:
+  - JavaScript
+  - Operator
+  - Reference
+translation_of: Web/JavaScript/Reference/Operators/this
+original_slug: Web/JavaScript/Reference/Opérateurs/L_opérateur_this
+---
+{{jsSidebar("Operators")}}
+
+En JavaScript, **le mot-clé `this`** se comporte légèrement différemment des autres langages de programmation. Son comportement variera également légèrement selon qu'on utilise le [mode strict](/fr/docs/Web/JavaScript/Reference/Strict_mode) ou le mode non-strict.
+
+Dans la plupart des cas, la valeur de `this` sera déterminée à partir de la façon dont une fonction est appelée. Il n'est pas possible de lui affecter une valeur lors de l'exécution et sa valeur peut être différente à chaque fois que la fonction est appelée. La méthode {{jsxref("Function.prototype.bind()","bind()")}} a été introduite avec ECMAScript 5 pour [définir la valeur de `this` pour une fonction, indépendamment de la façon dont elle est appelée](#bind). ECMAScript 2015 (ES6) a ajouté [les fonctions fléchées](/fr/docs/Web/JavaScript/Reference/Fonctions/Fonctions_fl%C3%A9ch%C3%A9es) dans lesquelles `this` correspond à la valeur du contexte englobant.
+
+{{EmbedInteractiveExample("pages/js/expressions-this.html")}}
+
+## Syntaxe
+
+    this
+
+### Valeur
+
+L'objet JavaScript représentant le contexte dans lequel le code courant est exécuté.
+
+## Dans le contexte global
+
+Dans le contexte global d'exécution (c'est-à-dire, celui en dehors de toute fonction), `this` fait référence à l'objet global (qu'on utilise ou non le mode strict).
+
+```js
+// Si l'environnement de script est un navigateur,
+// l'objet window sera l'objet global
+console.log(this === window); // true
+
+this.a = 37;
+console.log(window.a); // 37
+
+this.b = "MDN";
+console.log(window.b); // "MDN"
+console.log(b);        // "MDN"
+```
+
+> **Note :** Il est également possible d'accéder au contexte global avec la propriété {{jsxref("globalThis")}} quel que soit le contexte utilisé pour l'exécution.
+
+## Dans le contexte d'une fonction
+
+S'il est utilisé dans une fonction, la valeur de `this` dépendra de la façon dont la fonction a été appelée.
+
+### Avec un appel simple
+
+```js
+function f1(){
+  return this;
+}
+
+// Dans un navigateur
+f1() === window; // true (objet global)
+
+// Côté serveur (ex. Node)
+f1() === global; // true
+```
+
+Dans cet exemple, la valeur de `this` n'est pas définie lors de l'appel. Le code n'étant pas en mode strict, `this` doit toujours être un objet et ce sera donc l'objet global (soit {{domxref("Window", "window")}} pour un navigateur).
+
+```js
+function f2(){
+  "use strict"; // on utilise le mode strict
+  return this;
+}
+
+f2() === undefined; // true
+```
+
+En mode strict, la valeur de `this` est conservée (il reste le même) entre le moment de sa définition et l'entrée dans le contexte d'exécution. S'il n'est pas défini, il reste `undefined`. Il pourrait être défini avec n'importe quelle autre valeur, telle que `null` ou `42` ou `"Je ne suis pas this"`.
+
+> **Note :** Dans ce deuxième exemple,`this` vaut {{jsxref("undefined")}} car `f2` a été appelé sans « base » (ex. : `window.f2()`). Cette fonctionnalité ne fut pas correctement implémentée dans certains navigateurs aux débuts du mode strict, en effet, certains renvoyaient alors l'objet `window`.
+
+### `call` et `apply`
+
+Pour passer `this` d'un contexte à un autre, on pourra utiliser {{jsxref("Function.prototype.call()", "call()")}} ou {{jsxref("Function.prototype.apply()", "apply()")}} :
+
+```js
+// Un objet peut être passé en premier argument
+// de call ou de apply
+var obj = { a: "Toto" };
+
+// Ici, on déclare une variable et la variable est affectée à l'objet global window comme propriété de celui-ci
+var a = "Global";
+
+function whatsThis(arg) {
+  // La valeur de this ici dépend de la façon
+  // dont la fonction est appelée
+  return this.a;
+}
+
+whatsThis();          // 'Global' car celui-ci dans la fonction n'est pas défini, il est donc défini par défaut sur l'objet global window
+whatsThis.call(obj);  // "Toto"
+whatsThis.apply(obj); // "Toto"
+```
+
+Lorsque le mot-clé `this` est utilisé dans le corps d'une fonction, il est possible d'utiliser les méthodes {{jsxref("Function.prototype.call()", "call()")}} ou {{jsxref("Function.prototype.apply()", "apply()")}} pour lier `this` à un objet donné. Toutes les fonctions héritent de ces méthodes grâce à {{jsxref("Function.prototype")}}.
+
+```js
+function ajout(c, d){
+  return this.a + this.b + c + d;
+}
+
+var o = {a:1, b:3};
+
+// Le premier paramètre correspond à l'objet qu'on souhaite
+// lier à 'this', les paramètres suivants sont les arguments
+// à utiliser dans l'appel de la fonction
+ajout.call(o, 5, 7); // 1 + 3 + 5 + 7 = 16
+
+// Le premier paramètre correspond à l'objet qu'on souhaite
+// lier à 'this', le second paramètre est le tableau dont les
+// les éléments sont les arguments à passer à la fonction
+ajout.apply(o, [10, 20]); // 1 + 3 + 10 + 20 = 34
+```
+
+Note : En mode non-strict, si la valeur à lier à `this`, passée à `call` ou `apply`, n'est pas un objet, le moteur JavaScript tentera de la convertir en un objet grâce à l'opération interne `ToObject`. Si la valeur est d'un type primitif autre qu'objet, `7` ou `'toto'` par exemple, elle sera convertie en un objet grâce au constructeur associé. Ainsi, on aura le nombre `7` converti en un objet grâce à `new Number(7)` et la chaîne `'toto'` convertie en objet grâce à `new String('toto')`.
+
+```js
+function truc() {
+  console.log(Object.prototype.toString.call(this));
+}
+
+truc.call(7);     // [object Number]
+truc.call('foo'); // [object String]
+```
+
+### La méthode `bind`
+
+Avec ECMAScript 5, une nouvelle fonction fut introduite : {{jsxref("Function.prototype.bind()")}}. Lorsqu'on appelle `f.bind(unObjet)`, on crée une nouvelle fonction qui possède le même corps et la même portée que `f`, mais où `this` sera lié, de façon permanente, au premier argument passé à `bind`, quelle que soit la façon dont la méthode est utilisée.
+
+```js
+function f(){
+  return this.a;
+}
+
+var g = f.bind({a:"azerty"});
+console.log(g()); // azerty
+
+var h = g.bind({a:"coucou"}); // bind ne fonctionne qu'une seule fois
+console.log(h()); // azerty
+
+var o = {a:37, f:f, g:g, h:h};
+console.log(o.a, o.f(), o.g(), o.h()); // 37, 37, azerty, azerty
+```
+
+### Avec les fonctions fléchées
+
+En utilisant [les fonctions fléchées](/fr/docs/Web/JavaScript/Reference/Fonctions/Fonctions_fléchées), `this` correspond à la valeur de `this` utilisé dans le contexte englobant. Lorsqu'on utilise une fonction fléchée dans du code global, `this` sera l'objet global :
+
+```js
+var objetGlobal = this;
+var toto = (() => this);
+console.log(toto() === objetGlobal); // true
+```
+
+Peu importe la façon dont `toto` sera appelée, `this` sera toujours l'objet global. Cela est également valable pour les méthodes d'objet (où généralement `this` correspond à l'objet courant) ou lorsque `call`, `apply` ou `bind` sont utilisés :
+
+```js
+// Appelé comme la méthode d'un objet
+var obj = {toto: toto};
+console.log(obj.toto() === objetGlobal); // true
+
+// Ici on utilise call
+console.log(toto.call(obj) === objetGlobal); // true
+// Là on utilise bind
+toto = toto.bind(obj);
+console.log(toto() === objetGlobal); // true
+```
+
+Quelle que soit la méthode utilisée le `this` de `toto` sera défini avec la valeur qu'il avait lors de la création (dans l'exemple précédent, il s'agit de l'objet global). Cela vaut également pour les fonctions fléchées créées dans d'autres fonctions : `this` prendra la valeur de `this` dans le contexte englobant.
+
+```js
+// On crée un objet obj qui a une méthode truc
+// qui renvoie une fonction qui renvoie la
+// valeur de this.
+// La fonction qui est renvoyée est créée sous
+// la forme d'une fonction fléchée. this est
+// donc fixé de façon permanente avec la valeur
+// de this du contexte englobant.
+var obj = { truc : function() {
+                    var x = (() => this);
+                    return x;
+                  }
+          };
+// On appelle truc comme une méthode d'obj, this
+// vaudra donc obj. On récupère la fonction
+// renvoyée par truc et on en stocke une référence
+// avec la variable fn
+var fn = obj.truc();
+
+// On appelle fn sans définir this, par défaut
+// en mode strict cela correspondrait à l'objet
+// global ou à undefined
+console.log(fn() === obj); // true
+
+// Attention à ne pas référence la méthode d'obj
+// sans l'appeler
+var fn2 = obj.truc;
+// Appeler le this de la fonction fléchée dans ce contexte
+// renverra window car c'est le this associé à fn2 (qui
+// correspond au contexte global)
+console.log(fn2()() == window); // true
+```
+
+Dans l'exemple précédent, la fonction affectée à `obj.truc` renvoie une autre fonction créée sous la forme d'une fonction fléchée. Par conséquent, `this` vaut toujours `obj.truc` lorsque la fonction est appelée. Lorsque la fonction est renvoyée, `this` continue de correspondre à la valeur initiale. Dans ce code, `this` vaut `obj` et garde cette valeur, même lorsqu'il est appelé plus tard.
+
+### En tant que méthode d'un objet
+
+Lorsqu'une fonction est appelée comme méthode d'un objet, `this` correspondra à l'objet possédant la méthode qu'on appelle.
+
+Ainsi, dans l'exemple suivant, lorsqu'on appelle `o.f()`, le `this` contenu à l'intérieur de la fonction correspond à l'objet `o`.
+
+```js
+var o = {
+  prop: 37,
+  f: function() {
+    return this.prop;
+  }
+};
+
+console.log(o.f()); // 37
+```
+
+On notera que ce comportement n'est pas du tout affecté par la façon ou l'endroit de la définition de la fonction. Dans l'exemple précédent, on aurait très bien pu définir la fonction plus tard et la rattacher à une propriété de `o` plutôt que de la déclarer de cette façon. On aura le même résultat en faisant ainsi :
+
+```js
+var o = {prop: 37};
+
+function indépendante() {
+  return this.prop;
+}
+
+o.f = indépendante;
+
+console.log(o.f()); // 37
+```
+
+On voit ici que ce qui importe est la façon dont la fonction est appelée et non pas la façon dont elle est définie. Ici la fonction est appelée comme une propriété (méthode) de `o`.
+
+De la même façon, `this` n'est affecté que par la référence la plus proche. Autrement dit, dans l'exemple suivant quand on appelle la fonction `o.b.g`, on appelle la méthode `g` de l'objet `o.b`. Ainsi, au moment de l'exécution, `this` fera référence à `o.b`. Le fait que cet objet soit une propriété de `o` n'a aucun impact : seule la référence objet la plus proche compte.
+
+```js
+o.b = {g: indépendante, prop: 42};
+console.log(o.b.g()); // 42
+```
+
+#### `this` sur la chaîne de prototypes de l'objet
+
+Ce qui a été vu ci-avant est également applicable pour les méthodes qui sont présentes sur la chaîne de prototypes de l'objet. Si une méthode se situe sur la chaîne de prototype, `this` fera référence à l'objet appelant (de la même façon que si la méthode était une propriété directe de l'objet).
+
+```js
+var o = {f:function(){ return this.a + this.b; }};
+var p = Object.create(o);
+p.a = 1;
+p.b = 4;
+
+console.log(p.f()); // 5
+```
+
+Dans cet exemple, l'objet qui est affecté à la variable `p` ne possède pas directement la propriété `f`, il en hérite de par son prototype. Cela n'impacte en rien la détermination de `this` car la recherche de la propriété `f` remonte le long de la chaîne de prototype et s'arrête à `o`. Au début de cette recherche, on a une référence à `p.f`, aussi `this` fera référence à l'objet représenté par `p`. Autrement dit `f` étant appelé comme une méthode de `p`, `this` fera ici référence à `p`. Cette fonctionnalité fait partie des caractéristiques de l'héritage prototypal de JavaScript.
+
+#### `this` dans un _getter_ ou _setter_
+
+Ici aussi, on a le même principe lorsque la fonction est appelée à partir d'un accesseur (_getter_) ou d'un mutateur (_setter_). Une fonction utilisée comme accesseur ou mutateur verra son `this` lié à l'objet à partir duquel on souhaite accéder/changer la propriété.
+
+```js
+function moduleRéel(){
+  return Math.sqrt(this.re * this.re + this.im * this.im);
+}
+
+var o = {
+  re: 1,
+  im: -1,
+  get phase(){
+    return Math.atan2(this.im, this.re);
+  }
+};
+
+Object.defineProperty(o, 'moduleRéel', {
+    get: moduleRéel, enumerable:true, configurable:true});
+
+console.log(o.phase, o.moduleRéel); // logs -0.78 1.4142
+```
+
+### En tant que constructeur
+
+Lorsqu'une fonction est utilisée comme constructeur (c'est-à-dire qu'elle est invoquée avec le mot-clé {{jsxref("Opérateurs/L_opérateur_new","new")}}), le `this` correspondant sera lié au nouvel objet en train d'être construit.
+
+> **Note :** Par défaut, un constructeur renverra l'objet auquel `this` fait référence. Cependant si la valeur de retour du constructeur est définie et est un objet, ce sera elle qui sera renvoyée (sinon ce sera la valeur de `this`).
+
+```js
+/*
+ * Les constructeurs fonctionnent de la façon suivante :
+ *
+ * function MonConstructeur(){
+ *   // le corps de la fonction
+ *   // on crée des propriétés sur |this|
+ *   // par exemple
+ *   this.fum = "nom";
+ *   // etc.
+ *
+ *   // Si la fonction utilise une instruction de
+ *   // retour (return) et renvoie un objet
+ *   // ce sera cet objet qui sera le résultat de
+ *   // l'expression |new|.
+ *   // Sinon, le résultat sera l'objet
+ *   // lié à |this|
+ *   // (ce second cas est celui qu'on rencontre
+ *   // fréquemment).
+ * }
+ */
+
+function C(){
+  this.a = 37;
+}
+
+var o = new C();
+console.log(o.a); // 37
+
+
+function C2(){
+  this.a = 37;
+  return {a:38};
+}
+
+o = new C2();
+console.log(o.a); // 38
+```
+
+Dans le dernier exemple (`C2`), on renvoie un objet lors de la construction. L'objet qui était lié `this` est alors abandonné. (L'instruction "`this.a = 37;`" devient alors totalement inutile, bien qu'elle soit exécutée, elle n'aura aucun effet de bord.)
+
+### En tant que gestionnaire d'événement DOM
+
+Lorsqu'une fonction est utilisée comme gestionnaire d'événement (_event handler_), le `this` correspondant prendra la valeur de l'élément ayant déclenché l'événement (certains navigateurs ne suivent pas cette convention et les gestionnaires sont ajoutés dynamiquement avec d'autres méthodes qu'{{domxref("EventTarget.addEventListener()", "addEventListener()")}}).
+
+```js
+// Lorsque cette fonction est appelée
+// comme listener, l'élément associé
+// sera coloré en bleu
+function bluify(e){
+  // Cette proposition est toujours vraie
+  console.log(this === e.currentTarget);
+
+  // true lorsque currentTarget et target correspondent
+  // au même objet
+  console.log(this === e.target);
+
+  this.style.backgroundColor = '#A5D9F3';
+}
+
+// On obtient une liste de tous les éléments
+// contenus dans le document
+var elements = document.getElementsByTagName('*');
+
+// On ajout le listener bluify pour réagier au clic
+// Quand on clique sur un élément, il deviendra bleu
+for(var i=0 ; i<elements.length ; i++){
+  elements[i].addEventListener('click', bluify, false);
+}
+```
+
+### En tant que gestionnaire d'événements _in-line_
+
+Lorsque le code est appelé depuis un gestionnaire d'événement « en ligne » (_in-line_), la valeur de `this` correspondra à l'élément du DOM sur lequel on a placé le _listener_. Ainsi :
+
+```js
+<button onclick="console.log(this.tagName.toLowerCase());">
+  Afficher this
+</button>
+```
+
+montrera le texte `button` lorsqu'on cliquera dessus. Attention, seul le code externe verra la valeur de `this` affectée de cette façon :
+
+```js
+<button onclick="console.log((function(){return this})());">
+  Afficher le this interne
+</button>
+```
+
+Ici, on utilise `this `à l'intérieur d'une fonction et il n'est pas défini en amont. Il renvoie donc l'objet global (l'objet `window` pour un navigateur avec du code non-strict).
+
+## Spécifications
+
+| Spécification                                                                        | État                         | Commentaires                                          |
+| ------------------------------------------------------------------------------------ | ---------------------------- | ----------------------------------------------------- |
+| {{SpecName('ESDraft', '#sec-this-keyword', 'Le mot-clé this')}} | {{Spec2('ESDraft')}} |                                                       |
+| {{SpecName('ES2015', '#sec-this-keyword', 'Le mot-clé this')}} | {{Spec2('ES2015')}}     |                                                       |
+| {{SpecName('ES5.1', '#sec-11.1.1', 'Le mot-clé this')}}         | {{Spec2('ES5.1')}}     |                                                       |
+| {{SpecName('ES3', '#sec-11.1.1', 'Le mot-clé this')}}             | {{Spec2('ES3')}}         |                                                       |
+| {{SpecName('ES1', '#sec-11.1.1', 'Le mot-clé this')}}             | {{Spec2('ES1')}}         | Définition initiale. Implémentée avec JavaScript 1.0. |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.operators.this")}}
+
+## Voir aussi
+
+- [Le mode strict](/fr/docs/Web/JavaScript/Reference/Strict_mode)
+- [this & les prototypes objet](https://github.com/getify/You-Dont-Know-JS/blob/master/this%20&%20object%20prototypes/README.md#you-dont-know-js-this--object-prototypes) de Kyle Simpson sur GitHub (en anglais)
+- [Un article explicatif sur `this` (en anglais)](https://dmitripavlutin.com/gentle-explanation-of-this-in-javascript/)
+- La propriété {{jsxref("globalThis")}} qui permet d'accéder à l'objet global `this`
diff --git a/files/fr/web/javascript/reference/operators/typeof/index.html b/files/fr/web/javascript/reference/operators/typeof/index.html
deleted file mode 100644
index 87cbf9acc3..0000000000
--- a/files/fr/web/javascript/reference/operators/typeof/index.html
+++ /dev/null
@@ -1,270 +0,0 @@
----
-title: L'opérateur typeof
-slug: Web/JavaScript/Reference/Operators/typeof
-tags:
-  - JavaScript
-  - Operator
-  - Reference
-translation_of: Web/JavaScript/Reference/Operators/typeof
-original_slug: Web/JavaScript/Reference/Opérateurs/L_opérateur_typeof
----
-<div>{{jsSidebar("Operators")}}</div>
-
-<p>L'opérateur <strong><code>typeof</code></strong> renvoie une chaîne qui indique le type de son opérande.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/expressions-typeof.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<p>L'opérateur <code>typeof</code> est suivi de son opérande :</p>
-
-<pre class="syntaxbox">typeof <em>operande</em></pre>
-
-<h3 id="Paramètre">Paramètre</h3>
-
-<p><code><em>operande</em></code> est une expression qui représente la valeur dont on souhaite obtenir le type.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>Le tableau qui suit liste les résultats possibles de l'opérateur <code>typeof</code>. Pour plus d'informations sur les types et valeurs primitives en JavaScript, voir la page sur <a href="/fr/docs/Web/JavaScript/Structures_de_données#Les_valeurs_primitives">les types et structures de données JavaScript</a>.</p>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Type</th>
-   <th scope="col">Résultat</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>indéfini</td>
-   <td><code>"undefined"</code></td>
-  </tr>
-  <tr>
-   <td>nul</td>
-   <td><code>"object" </code>(voir ci-après)</td>
-  </tr>
-  <tr>
-   <td>booléen</td>
-   <td><code>"boolean"</code></td>
-  </tr>
-  <tr>
-   <td>nombre</td>
-   <td><code>"number"</code></td>
-  </tr>
-  <tr>
-   <td>grand entier</td>
-   <td><code>"bigint"</code></td>
-  </tr>
-  <tr>
-   <td>chaîne de caractère</td>
-   <td><code>"string"</code></td>
-  </tr>
-  <tr>
-   <td>symbole (nouveauté d'ECMAScript 6 / 2015)</td>
-   <td><code>"symbol"</code></td>
-  </tr>
-  <tr>
-   <td>objet de l'environnement (fourni par l'environnement dans lequel est utilisé JS)</td>
-   <td><em>Résultat différent selon l'implémentation</em></td>
-  </tr>
-  <tr>
-   <td>Objet Function (au sens ECMA-262, un objet qui implémente [[Call]])</td>
-   <td><code>"function"</code></td>
-  </tr>
-  <tr>
-   <td>Tout autre objet</td>
-   <td><code>"object"</code></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Exemples">Exemples</h2>
-
-<pre class="brush:js">// Pour les nombres
-typeof 37 === 'number';
-typeof 3.14 === 'number';
-typeof(42) === 'number';
-typeof Math.LN2 === 'number';
-typeof Infinity === 'number';
-typeof NaN === 'number'; // Bien que littéralement ce soit "Not-A-Number"…
-typeof Number('1') === 'number'; // Number essaie de convertir l'argument en nombre
-
-// Grand entier
-typeof 42n === 'bigint';
-
-// Les chaînes de caractères
-typeof "" === 'string';
-typeof "bla" === 'string';
-typeof "1" === 'string'; // on a ici un nombre écrit sous forme d'une chaîne
-typeof (typeof 1) === 'string'; // typeof renvoie toujours une chaîne
-typeof String(1) === 'string'; // String convertit n'importe quelle valeur en chaîne
-
-
-// Les booléens
-typeof true === 'boolean';
-typeof false === 'boolean';
-typeof Boolean(1) === 'boolean'; // Boolean convertit n'importe quelle valeur en son équivalent logique
-typeof !!(1) === 'boolean'; // deux appels à l'opérateur ! (le NON logique) sont équivalents à Boolean()
-
-
-// Les symboles
-typeof Symbol() === 'symbol'
-typeof Symbol('foo') === 'symbol'
-typeof Symbol.iterator === 'symbol'
-
-
-// Indéfini
-typeof undefined === 'undefined';
-typeof blabla === 'undefined'; // pour une variable indéfinie
-
-
-// Les objets
-typeof {a:1} === 'object';
-
-// Utiliser la méthode <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/isArray">Array.isArray</a> ou Object.prototype.toString.call
-// afin de différencier les objets des tableaux
-typeof [1, 2, 4] === 'object';
-
-typeof new Date() === 'object';
-typeof /regex/ === 'object'; // Voir la section sur les expressions rationnelles
-
-// Les expressions suivantes sont source de confusion
-// à ne pas utiliser sous cette forme
-typeof new Boolean(true) === 'object';
-typeof new Number(1) === 'object';
-typeof new String("abc") === 'object';
-
-
-// Les fonctions
-typeof function(){} === 'function';
-typeof class C {} === 'function';
-typeof Math.sin === 'function';
-</pre>
-
-<h2 id="Informations_supplémentaires">Informations supplémentaires</h2>
-
-<h3 id="null"><code>null</code></h3>
-
-<pre class="brush:js">// Cela est valable depuis les commencements de JavaScript
-typeof null === 'object';
-</pre>
-
-<p>Lors de la première implémentation de JavaScript, les valeurs JavaScript étaient représentées avec une étiquette de type et une valeur. Pour les objets, l'étiquette de type était 0. <code>null</code> était représenté par la valeur NULL (0x00 pour la plupart des plates-formes). Par conséquent, l'étiquette de type de <code>null</code> valait 0, d'où le comportement de <code>typeof</code> (<a href="https://www.2ality.com/2013/10/typeof-null.html">source</a>).</p>
-
-<p>Un correctif fut proposé pour ECMAScript mais il fut <a class="external" href="https://web.archive.org/web/20160331031419/http://wiki.ecmascript.org:80/doku.php?id=harmony:typeof_null">refusé</a>. Avec cette version, on aurait eu <code>typeof null === 'null'</code>.</p>
-
-<h3 id="Utiliser_l'opérateur_new">Utiliser l'opérateur <code>new</code></h3>
-
-<pre class="brush: js">// Tous les constructeurs doivent être employés
-// avec le mot-clé "new"
-var maChaine = new String("toto");
-var monNombre = new Number(100);
-
-typeof maChaine;  // renverra "object"
-typeof monNombre; // renverra "object"
-
-// En revanche avec le constructeur Function,
-// on aura :
-var maFonction = new Function();
-typeof maFonction; // renverra "function"</pre>
-
-<h3 id="Utilisation_des_parenthèses">Utilisation des parenthèses</h3>
-
-<pre class="brush: js">// Les parenthèses peuvent s'avérer utile pour
-// déterminer le type de données d'une expression
-// complète
-
-var maDonnee = 99;
-
-typeof maDonnee + 'Toto';   // renverra 'number Toto'
-typeof (maDonnee + 'Toto'); // renverra 'string'
-</pre>
-
-<h3 id="Expressions_rationnelles">Expressions rationnelles</h3>
-
-<p>Les expressions rationnelles qu'on peut appeler directement furent parfois ajoutées de façon non standard dans certains navigateurs.</p>
-
-<pre class="brush:js">typeof /s/ === 'function'; // Chrome 1 à 12 : Non conforme à ECMAScript 5.1
-typeof /s/ === 'object';   // À partir de Firefox 5 : Conforme à ECMAScript 5.1
-</pre>
-
-<h3 id="Zone_morte_temporaire_(Temporal_Dead_Zone_TDZ)">Zone morte temporaire (<em>Temporal Dead Zone</em> / TDZ)</h3>
-
-<p>Avant ECMAScript 2015 (ES6), <code>typeof</code> retournait toujours une chaîne de caractères, quel que soit l'opérande utilisé. On ne pouvait pas avoir d'erreur en utilisant <code>typeof</code>.</p>
-
-<p>Avec l'apparition des opérateurs <code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/let">let</a></code> et <code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/const">const</a></code>, si on utilise <code>typeof</code> sur des variables déclarées avec ces opérateurs (ou avec une classe) avant leur déclaration, cela déclenchera une erreur {{jsxref("ReferenceError")}}. Si on utilise <code>typeof</code> sur une variable déclarée avec <code>var</code> avant la déclaration, cela renverra <code>undefined</code>. Les variables déclarées avec <code>let</code> et <code>const</code> sont en fait placées dans une <em><a href="/fr/docs/Web/JavaScript/Reference/Instructions/let#Zone_morte_temporaire_(Temporal_Dead_Zone_TDZ)_et_les_erreurs_liées_à_let">zone morte temporaire </a></em>entre le début du bloc et leur initialisation et dans cette zone, tout accès à la variable produit une erreur.</p>
-
-<pre class="brush: js">typeof variableGlobaleNonDeclaree === "undefined";
-
-typeof variableLet; // ReferenceError
-let variableLet;
-
-typeof constante;   // ReferenceError
-const constante = "coucou";
-
-typeof maClasse; // ReferenceError
-class maClasse{};</pre>
-
-<h3 id="Exceptions">Exceptions</h3>
-
-<p>Tous les navigateurs actuels exposent un objet non-standard {{domxref("document.all")}} dont le type est <code>"undefined"</code>.</p>
-
-<pre class="brush: js">typeof document.all === "undefined";</pre>
-
-<p>Bien que la spécification requière que les objets exostiques aient des types différents, ces types doivent être des chaînes différentes des chaînes existantes pour les objets standards. À ce titre, le type de <code>document.all</code> représente une violation « volontaire » du standard ECMAScript original.</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-typeof-operator', 'Opérateur typeof')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-typeof-operator', 'Opérateur typeof')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-11.4.3', 'Opérateur typeof')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES3', '#sec-11.4.3', 'Opérateur typeof')}}</td>
-   <td>{{Spec2('ES3')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES1', '#sec-11.4.3', 'Opérateur typeof')}}</td>
-   <td>{{Spec2('ES1')}}</td>
-   <td>Définition initiale, implémentée avec JavaScript 1.1.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.operators.typeof")}}</p>
-
-<h2 id="Notes_spécifiques_à_IE">Notes spécifiques à IE</h2>
-
-<p>Pour les versions 6, 7 et 8 d'Internet Explorer, les objets de l'environnement hôte sont des objets et non des fonctions. Par exemple, on aura :</p>
-
-<pre class="brush: js">typeof alert === 'object'</pre>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>L'opérateur {{jsxref("Opérateurs/instanceof","instanceof")}}</li>
- <li><a href="http://es-discourse.com/t/why-typeof-is-no-longer-safe/15">Discussion es-discuss sur l'évolution de <code>typeof</code> avec ECMAScript 2015 et <code>let</code></a></li>
- <li><a href="https://github.com/tc39/ecma262/issues/668">À propos du non-respect volontaire du standard avec le type de <code>document.all</code></a></li>
-</ul>
diff --git a/files/fr/web/javascript/reference/operators/typeof/index.md b/files/fr/web/javascript/reference/operators/typeof/index.md
new file mode 100644
index 0000000000..d31c1d7b6b
--- /dev/null
+++ b/files/fr/web/javascript/reference/operators/typeof/index.md
@@ -0,0 +1,215 @@
+---
+title: L'opérateur typeof
+slug: Web/JavaScript/Reference/Operators/typeof
+tags:
+  - JavaScript
+  - Operator
+  - Reference
+translation_of: Web/JavaScript/Reference/Operators/typeof
+original_slug: Web/JavaScript/Reference/Opérateurs/L_opérateur_typeof
+---
+{{jsSidebar("Operators")}}
+
+L'opérateur **`typeof`** renvoie une chaîne qui indique le type de son opérande.
+
+{{EmbedInteractiveExample("pages/js/expressions-typeof.html")}}
+
+## Syntaxe
+
+L'opérateur `typeof` est suivi de son opérande :
+
+    typeof operande
+
+### Paramètre
+
+`operande` est une expression qui représente la valeur dont on souhaite obtenir le type.
+
+## Description
+
+Le tableau qui suit liste les résultats possibles de l'opérateur `typeof`. Pour plus d'informations sur les types et valeurs primitives en JavaScript, voir la page sur [les types et structures de données JavaScript](/fr/docs/Web/JavaScript/Structures_de_données#Les_valeurs_primitives).
+
+| Type                                                                             | Résultat                                    |
+| -------------------------------------------------------------------------------- | ------------------------------------------- |
+| indéfini                                                                         | `"undefined"`                               |
+| nul                                                                              | `"object" `(voir ci-après)                  |
+| booléen                                                                          | `"boolean"`                                 |
+| nombre                                                                           | `"number"`                                  |
+| grand entier                                                                     | `"bigint"`                                  |
+| chaîne de caractère                                                              | `"string"`                                  |
+| symbole (nouveauté d'ECMAScript 6 / 2015)                                        | `"symbol"`                                  |
+| objet de l'environnement (fourni par l'environnement dans lequel est utilisé JS) | _Résultat différent selon l'implémentation_ |
+| Objet Function (au sens ECMA-262, un objet qui implémente [[Call]])              | `"function"`                                |
+| Tout autre objet                                                                 | `"object"`                                  |
+
+## Exemples
+
+```js
+// Pour les nombres
+typeof 37 === 'number';
+typeof 3.14 === 'number';
+typeof(42) === 'number';
+typeof Math.LN2 === 'number';
+typeof Infinity === 'number';
+typeof NaN === 'number'; // Bien que littéralement ce soit "Not-A-Number"…
+typeof Number('1') === 'number'; // Number essaie de convertir l'argument en nombre
+
+// Grand entier
+typeof 42n === 'bigint';
+
+// Les chaînes de caractères
+typeof "" === 'string';
+typeof "bla" === 'string';
+typeof "1" === 'string'; // on a ici un nombre écrit sous forme d'une chaîne
+typeof (typeof 1) === 'string'; // typeof renvoie toujours une chaîne
+typeof String(1) === 'string'; // String convertit n'importe quelle valeur en chaîne
+
+
+// Les booléens
+typeof true === 'boolean';
+typeof false === 'boolean';
+typeof Boolean(1) === 'boolean'; // Boolean convertit n'importe quelle valeur en son équivalent logique
+typeof !!(1) === 'boolean'; // deux appels à l'opérateur ! (le NON logique) sont équivalents à Boolean()
+
+
+// Les symboles
+typeof Symbol() === 'symbol'
+typeof Symbol('foo') === 'symbol'
+typeof Symbol.iterator === 'symbol'
+
+
+// Indéfini
+typeof undefined === 'undefined';
+typeof blabla === 'undefined'; // pour une variable indéfinie
+
+
+// Les objets
+typeof {a:1} === 'object';
+
+// Utiliser la méthode Array.isArray ou Object.prototype.toString.call
+// afin de différencier les objets des tableaux
+typeof [1, 2, 4] === 'object';
+
+typeof new Date() === 'object';
+typeof /regex/ === 'object'; // Voir la section sur les expressions rationnelles
+
+// Les expressions suivantes sont source de confusion
+// à ne pas utiliser sous cette forme
+typeof new Boolean(true) === 'object';
+typeof new Number(1) === 'object';
+typeof new String("abc") === 'object';
+
+
+// Les fonctions
+typeof function(){} === 'function';
+typeof class C {} === 'function';
+typeof Math.sin === 'function';
+```
+
+## Informations supplémentaires
+
+### `null`
+
+```js
+// Cela est valable depuis les commencements de JavaScript
+typeof null === 'object';
+```
+
+Lors de la première implémentation de JavaScript, les valeurs JavaScript étaient représentées avec une étiquette de type et une valeur. Pour les objets, l'étiquette de type était 0. `null` était représenté par la valeur NULL (0x00 pour la plupart des plates-formes). Par conséquent, l'étiquette de type de `null` valait 0, d'où le comportement de `typeof` ([source](https://www.2ality.com/2013/10/typeof-null.html)).
+
+Un correctif fut proposé pour ECMAScript mais il fut [refusé](https://web.archive.org/web/20160331031419/http://wiki.ecmascript.org:80/doku.php?id=harmony:typeof_null). Avec cette version, on aurait eu `typeof null === 'null'`.
+
+### Utiliser l'opérateur `new`
+
+```js
+// Tous les constructeurs doivent être employés
+// avec le mot-clé "new"
+var maChaine = new String("toto");
+var monNombre = new Number(100);
+
+typeof maChaine;  // renverra "object"
+typeof monNombre; // renverra "object"
+
+// En revanche avec le constructeur Function,
+// on aura :
+var maFonction = new Function();
+typeof maFonction; // renverra "function"
+```
+
+### Utilisation des parenthèses
+
+```js
+// Les parenthèses peuvent s'avérer utile pour
+// déterminer le type de données d'une expression
+// complète
+
+var maDonnee = 99;
+
+typeof maDonnee + 'Toto';   // renverra 'number Toto'
+typeof (maDonnee + 'Toto'); // renverra 'string'
+```
+
+### Expressions rationnelles
+
+Les expressions rationnelles qu'on peut appeler directement furent parfois ajoutées de façon non standard dans certains navigateurs.
+
+```js
+typeof /s/ === 'function'; // Chrome 1 à 12 : Non conforme à ECMAScript 5.1
+typeof /s/ === 'object';   // À partir de Firefox 5 : Conforme à ECMAScript 5.1
+```
+
+### Zone morte temporaire (_Temporal Dead Zone_ / TDZ)
+
+Avant ECMAScript 2015 (ES6), `typeof` retournait toujours une chaîne de caractères, quel que soit l'opérande utilisé. On ne pouvait pas avoir d'erreur en utilisant `typeof`.
+
+Avec l'apparition des opérateurs [`let`](/fr/docs/Web/JavaScript/Reference/Instructions/let) et [`const`](/fr/docs/Web/JavaScript/Reference/Instructions/const), si on utilise `typeof` sur des variables déclarées avec ces opérateurs (ou avec une classe) avant leur déclaration, cela déclenchera une erreur {{jsxref("ReferenceError")}}. Si on utilise `typeof` sur une variable déclarée avec `var` avant la déclaration, cela renverra `undefined`. Les variables déclarées avec `let` et `const` sont en fait placées dans une *[zone morte temporaire ](</fr/docs/Web/JavaScript/Reference/Instructions/let#Zone_morte_temporaire_(Temporal_Dead_Zone_TDZ)_et_les_erreurs_liées_à_let>)*entre le début du bloc et leur initialisation et dans cette zone, tout accès à la variable produit une erreur.
+
+```js
+typeof variableGlobaleNonDeclaree === "undefined";
+
+typeof variableLet; // ReferenceError
+let variableLet;
+
+typeof constante;   // ReferenceError
+const constante = "coucou";
+
+typeof maClasse; // ReferenceError
+class maClasse{};
+```
+
+### Exceptions
+
+Tous les navigateurs actuels exposent un objet non-standard {{domxref("document.all")}} dont le type est `"undefined"`.
+
+```js
+typeof document.all === "undefined";
+```
+
+Bien que la spécification requière que les objets exostiques aient des types différents, ces types doivent être des chaînes différentes des chaînes existantes pour les objets standards. À ce titre, le type de `document.all` représente une violation « volontaire » du standard ECMAScript original.
+
+## Spécifications
+
+| Spécification                                                                                | État                         | Commentaires                                          |
+| -------------------------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- |
+| {{SpecName('ESDraft', '#sec-typeof-operator', 'Opérateur typeof')}} | {{Spec2('ESDraft')}} |                                                       |
+| {{SpecName('ES6', '#sec-typeof-operator', 'Opérateur typeof')}}         | {{Spec2('ES6')}}         |                                                       |
+| {{SpecName('ES5.1', '#sec-11.4.3', 'Opérateur typeof')}}                 | {{Spec2('ES5.1')}}     |                                                       |
+| {{SpecName('ES3', '#sec-11.4.3', 'Opérateur typeof')}}                     | {{Spec2('ES3')}}         |                                                       |
+| {{SpecName('ES1', '#sec-11.4.3', 'Opérateur typeof')}}                     | {{Spec2('ES1')}}         | Définition initiale, implémentée avec JavaScript 1.1. |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.operators.typeof")}}
+
+## Notes spécifiques à IE
+
+Pour les versions 6, 7 et 8 d'Internet Explorer, les objets de l'environnement hôte sont des objets et non des fonctions. Par exemple, on aura :
+
+```js
+typeof alert === 'object'
+```
+
+## Voir aussi
+
+- L'opérateur {{jsxref("Opérateurs/instanceof","instanceof")}}
+- [Discussion es-discuss sur l'évolution de `typeof` avec ECMAScript 2015 et `let`](http://es-discourse.com/t/why-typeof-is-no-longer-safe/15)
+- [À propos du non-respect volontaire du standard avec le type de `document.all`](https://github.com/tc39/ecma262/issues/668)
diff --git a/files/fr/web/javascript/reference/operators/unary_negation/index.html b/files/fr/web/javascript/reference/operators/unary_negation/index.html
deleted file mode 100644
index bbe81aaeb6..0000000000
--- a/files/fr/web/javascript/reference/operators/unary_negation/index.html
+++ /dev/null
@@ -1,65 +0,0 @@
----
-title: Négation unaire (-)
-slug: Web/JavaScript/Reference/Operators/Unary_negation
-tags:
-  - JavaScript
-  - Language feature
-  - Operator
-  - Reference
-browser-compat: javascript.operators.unary_negation
-translation_of: Web/JavaScript/Reference/Operators/Unary_negation
----
-<div>{{jsSidebar("Operators")}}</div>
-
-<p>L'opérateur de négation unaire (<code>-</code>) se place devant son opérande et le transforme en son opposé.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/expressions-unary-negation.html")}}</div>
-
-<h2 id="syntax">Syntaxe</h2>
-
-<pre class="brush: js">
-<strong>Opérateur :</strong> -<var>x</var>
-</pre>
-
-<h2 id="examples">Exemples</h2>
-
-<h3 id="negating_numbers">Avec des nombres</h3>
-
-<pre class="brush: js">const x = 3;
-const y = -x;
-
-// y = -3
-// x = 3
-</pre>
-
-<h3 id="negating_non-numbers">Avec des valeurs non-numériques</h3>
-
-<p>L'opérateur de négation unaire peut être utilisé pour convertir une valeur non-numérique en nombre.</p>
-
-<pre class="brush: js">const x = "4";
-const y = -x;
-
-// y = -4
-</pre>
-
-<h2 id="specifications">Spécifications</h2>
-
-<p>{{Specifications}}</p>
-
-<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
-
-<p>{{Compat}}</p>
-
-<h2 id="see_also">Voir aussi</h2>
-
-<ul>
-  <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Addition">Opérateur d'addition</a></li>
-  <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Subtraction">Opérateur de soustraction</a></li>
-  <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Division">Opérateur de division</a></li>
-  <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Multiplication">Opérateur de multiplication</a></li>
-  <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Remainder">Opérateur de reste</a></li>
-  <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Exponentiation">Opérateur d'exponentiation</a></li>
-  <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Increment">Opérateur d'incrémentation</a></li>
-  <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Decrement">Opérateur de décrémentation</a></li>
-  <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Unary_plus">Opérateur plus unaire</a></li>
-</ul>
diff --git a/files/fr/web/javascript/reference/operators/unary_negation/index.md b/files/fr/web/javascript/reference/operators/unary_negation/index.md
new file mode 100644
index 0000000000..fbf8caf6f0
--- /dev/null
+++ b/files/fr/web/javascript/reference/operators/unary_negation/index.md
@@ -0,0 +1,65 @@
+---
+title: Négation unaire (-)
+slug: Web/JavaScript/Reference/Operators/Unary_negation
+tags:
+  - JavaScript
+  - Language feature
+  - Operator
+  - Reference
+translation_of: Web/JavaScript/Reference/Operators/Unary_negation
+browser-compat: javascript.operators.unary_negation
+---
+{{jsSidebar("Operators")}}
+
+L'opérateur de négation unaire (`-`) se place devant son opérande et le transforme en son opposé.
+
+{{EmbedInteractiveExample("pages/js/expressions-unary-negation.html")}}
+
+## Syntaxe
+
+```js
+Opérateur : -x
+```
+
+## Exemples
+
+### Avec des nombres
+
+```js
+const x = 3;
+const y = -x;
+
+// y = -3
+// x = 3
+```
+
+### Avec des valeurs non-numériques
+
+L'opérateur de négation unaire peut être utilisé pour convertir une valeur non-numérique en nombre.
+
+```js
+const x = "4";
+const y = -x;
+
+// y = -4
+```
+
+## Spécifications
+
+{{Specifications}}
+
+## Compatibilité des navigateurs
+
+{{Compat}}
+
+## Voir aussi
+
+- [Opérateur d'addition](/fr/docs/Web/JavaScript/Reference/Operators/Addition)
+- [Opérateur de soustraction](/fr/docs/Web/JavaScript/Reference/Operators/Subtraction)
+- [Opérateur de division](/fr/docs/Web/JavaScript/Reference/Operators/Division)
+- [Opérateur de multiplication](/fr/docs/Web/JavaScript/Reference/Operators/Multiplication)
+- [Opérateur de reste](/fr/docs/Web/JavaScript/Reference/Operators/Remainder)
+- [Opérateur d'exponentiation](/fr/docs/Web/JavaScript/Reference/Operators/Exponentiation)
+- [Opérateur d'incrémentation](/fr/docs/Web/JavaScript/Reference/Operators/Increment)
+- [Opérateur de décrémentation](/fr/docs/Web/JavaScript/Reference/Operators/Decrement)
+- [Opérateur plus unaire](/fr/docs/Web/JavaScript/Reference/Operators/Unary_plus)
diff --git a/files/fr/web/javascript/reference/operators/unary_plus/index.html b/files/fr/web/javascript/reference/operators/unary_plus/index.html
deleted file mode 100644
index 37e7148369..0000000000
--- a/files/fr/web/javascript/reference/operators/unary_plus/index.html
+++ /dev/null
@@ -1,69 +0,0 @@
----
-title: Plus unaire (+)
-slug: Web/JavaScript/Reference/Operators/Unary_plus
-tags:
-  - JavaScript
-  - Language feature
-  - Operator
-  - Reference
-browser-compat: javascript.operators.unary_plus
-translation_of: Web/JavaScript/Reference/Operators/Unary_plus
----
-<div>{{jsSidebar("Operators")}}</div>
-
-<p>L'opérateur de plus unaire (<code>+</code>) précède son opérande et évalue son opérande en essayant de le convertir en nombre si ce n'est pas déjà une valeur numérique.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/expressions-unary-plus.html", "taller")}}</div>
-
-<h2 id="syntax">Syntaxe</h2>
-
-<pre class="brush: js">
-<strong>Opérateur :</strong> +<var>x</var>
-</pre>
-
-<h2 id="description">Description</h2>
-
-<p>Bien que la négation unaire (<code>-</code>) puisse également être utilisée pour convertir des valeurs non-numérique, le plus unaire est plus rapide et plus conventionnel, car il n'effectue pas d'autres opérations que la conversion. Il peut être utilisé pour convertir les représentations textuelles d'entiers ou de flottants ainsi que les valeurs <code>true</code>, <code>false</code>, et <code>null</code>. Les représentations entières au format décimal ou hexadécimal sont toutes les deux prises en charge. Les nombres négatifs sont pris en charge (hors représentation hexadécimale). L'utilisation de cet opérateur sur les valeurs de type <code>BigInt</code> déclenchera une exception <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/TypeError"><code>TypeError</code></a>. Si l'analyse de valeur ne permet pas de déduire une valeur numérique, le résultat sera <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/NaN"><code>NaN</code></a>.</p>
-
-<h2 id="examples">Exemples</h2>
-
-<h3 id="usage_with_numbers">Avec des nombres</h3>
-
-<pre class="brush: js">const x = 1;
-const y = -1;
-
-console.log(+x);
-// 1
-console.log(+y);
-// -1</pre>
-
-<h3 id="usage_with_non-numbers">Avec des valeurs non-numériques</h3>
-
-<pre class="brush: js">+true  // 1
-+false // 0
-+null  // 0
-+function(val){ return val } // NaN
-+1n    // throws TypeError: Cannot convert BigInt value to number
-</pre>
-
-<h2 id="specifications">Spécifications</h2>
-
-<p>{{Specifications}}</p>
-
-<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
-
-<p>{{Compat}}</p>
-
-<h2 id="see_also">Voir aussi</h2>
-
-<ul>
-  <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Addition">Opérateur d'addition</a></li>
-  <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Subtraction">Opérateur de soustraction</a></li>
-  <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Division">Opérateur de division</a></li>
-  <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Multiplication">Opérateur de multiplication</a></li>
-  <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Remainder">Opérateur de reste</a></li>
-  <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Exponentiation">Opérateur d'exponentiation</a></li>
-  <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Increment">Opérateur d'incrémentation</a></li>
-  <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Decrement">Opérateur de décrémentation</a></li>
-  <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Unary_negation">Opérateur de négation unaire</a></li>
-</ul>
diff --git a/files/fr/web/javascript/reference/operators/unary_plus/index.md b/files/fr/web/javascript/reference/operators/unary_plus/index.md
new file mode 100644
index 0000000000..0d25476c2c
--- /dev/null
+++ b/files/fr/web/javascript/reference/operators/unary_plus/index.md
@@ -0,0 +1,70 @@
+---
+title: Plus unaire (+)
+slug: Web/JavaScript/Reference/Operators/Unary_plus
+tags:
+  - JavaScript
+  - Language feature
+  - Operator
+  - Reference
+translation_of: Web/JavaScript/Reference/Operators/Unary_plus
+browser-compat: javascript.operators.unary_plus
+---
+{{jsSidebar("Operators")}}
+
+L'opérateur de plus unaire (`+`) précède son opérande et évalue son opérande en essayant de le convertir en nombre si ce n'est pas déjà une valeur numérique.
+
+{{EmbedInteractiveExample("pages/js/expressions-unary-plus.html", "taller")}}
+
+## Syntaxe
+
+```js
+Opérateur : +x
+```
+
+## Description
+
+Bien que la négation unaire (`-`) puisse également être utilisée pour convertir des valeurs non-numérique, le plus unaire est plus rapide et plus conventionnel, car il n'effectue pas d'autres opérations que la conversion. Il peut être utilisé pour convertir les représentations textuelles d'entiers ou de flottants ainsi que les valeurs `true`, `false`, et `null`. Les représentations entières au format décimal ou hexadécimal sont toutes les deux prises en charge. Les nombres négatifs sont pris en charge (hors représentation hexadécimale). L'utilisation de cet opérateur sur les valeurs de type `BigInt` déclenchera une exception [`TypeError`](/fr/docs/Web/JavaScript/Reference/Global_Objects/TypeError). Si l'analyse de valeur ne permet pas de déduire une valeur numérique, le résultat sera [`NaN`](/fr/docs/Web/JavaScript/Reference/Global_Objects/NaN).
+
+## Exemples
+
+### Avec des nombres
+
+```js
+const x = 1;
+const y = -1;
+
+console.log(+x);
+// 1
+console.log(+y);
+// -1
+```
+
+### Avec des valeurs non-numériques
+
+```js
++true  // 1
++false // 0
++null  // 0
++function(val){ return val } // NaN
++1n    // throws TypeError: Cannot convert BigInt value to number
+```
+
+## Spécifications
+
+{{Specifications}}
+
+## Compatibilité des navigateurs
+
+{{Compat}}
+
+## Voir aussi
+
+- [Opérateur d'addition](/fr/docs/Web/JavaScript/Reference/Operators/Addition)
+- [Opérateur de soustraction](/fr/docs/Web/JavaScript/Reference/Operators/Subtraction)
+- [Opérateur de division](/fr/docs/Web/JavaScript/Reference/Operators/Division)
+- [Opérateur de multiplication](/fr/docs/Web/JavaScript/Reference/Operators/Multiplication)
+- [Opérateur de reste](/fr/docs/Web/JavaScript/Reference/Operators/Remainder)
+- [Opérateur d'exponentiation](/fr/docs/Web/JavaScript/Reference/Operators/Exponentiation)
+- [Opérateur d'incrémentation](/fr/docs/Web/JavaScript/Reference/Operators/Increment)
+- [Opérateur de décrémentation](/fr/docs/Web/JavaScript/Reference/Operators/Decrement)
+- [Opérateur de négation unaire](/fr/docs/Web/JavaScript/Reference/Operators/Unary_negation)
diff --git a/files/fr/web/javascript/reference/operators/unsigned_right_shift/index.html b/files/fr/web/javascript/reference/operators/unsigned_right_shift/index.html
deleted file mode 100644
index e3255ae767..0000000000
--- a/files/fr/web/javascript/reference/operators/unsigned_right_shift/index.html
+++ /dev/null
@@ -1,66 +0,0 @@
----
-title: Décalage binaire à droite non-signé (>>>)
-slug: Web/JavaScript/Reference/Operators/Unsigned_right_shift
-tags:
-  - Bitwise operator
-  - JavaScript
-  - Language feature
-  - Operator
-  - Reference
-browser-compat: javascript.operators.unsigned_right_shift
----
-<div>{{jsSidebar("Operators")}}</div>
-
-<p>L'opérateur de <strong>décalage binaire à droite non-signé (<code>&gt;&gt;&gt;</code>)</strong> décale la séquence de bits formée par le premier opérande d'autant de bits vers la droite que la valeur indiquée par le second opérande. Les bits en excès à droite sont écartés et ce sont des zéros qui sont ajoutés à gauches. Le bit de signe devient alors nécessairement <code>0</code> et le résultat est donc positif. À la différence des autres opérateurs binaires, cet opérateur renvoie un entier non-signé sur 32 bits.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/expressions-unsigned-right-shift.html")}}</div>
-
-<h2 id="syntax">Syntaxe</h2>
-
-<pre class="brush: js">
-<var>a</var> &gt;&gt;&gt; <var>b</var>
-</pre>
-
-<h2 id="description">Description</h2>
-
-<p>Ce opérateur décale les bits du premier opérande vers la droite, selon la valeur du deuxième opérande. Les bits dépassant à droite sont éliminés tandis que des zéros sont ajoutés à gauche. Le bit de signe vaut alors <code>0</code> et en conséquence le résultat est positif. La valeur fournie par cet opérateur, à la différence des autres opérateurs binaires, est une valeur entière sur 32 bits non-signée.</p>
-
-<p>Pour les nombres positifts, le décalage binaire à droite et le décalage binaire à droite non-signés renverront le même résultat. Par exemple, <code>9 &gt;&gt;&gt; 2</code> renvoie 2, également renvoyé par <code>9 &gt;&gt; 2</code>:</p>
-
-<pre class="brush: js">
-        9 (base 10): 00000000000000000000000000001001 (base 2)
-                     --------------------------------
-  9 &gt;&gt;&gt; 2 (base 10): 00000000000000000000000000000010 (base 2) = 2 (base 10)
-</pre>
-
-<p>Toutefois, ce n'est pas le cas pour les nombres négatifs : <code>-9 &gt;&gt;&gt; 2</code> renverra 1073741821, qui est différent de  <code>-9 &gt;&gt; 2</code> (qui renvoie <code>-3</code>) :</p>
-
-<pre class="brush: js">
-        -9 (base 10): 11111111111111111111111111110111 (base 2)
-                      --------------------------------
-  -9 &gt;&gt;&gt; 2 (base 10): 00111111111111111111111111111101 (base 2) = 1073741821 (base 10)
-</pre>
-
-<h2 id="examples">Exemples</h2>
-
-<h3 id="using_unsigned_right_shift">Utiliser le décalage à droite non-signé</h3>
-
-<pre class="brush: js">
- 9 &gt;&gt;&gt; 2; // 2
--9 &gt;&gt;&gt; 2; // 1073741821
-</pre>
-
-<h2 id="specifications">Spécifications</h2>
-
-<p>{{Specifications}}</p>
-
-<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
-
-<p>{{Compat}}</p>
-
-<h2 id="see_also">Voir aussi</h2>
-
-<ul>
-  <li><a href="/fr/docs/Web/JavaScript/Guide/Expressions_and_Operators#bitwise">Les opérateurs binaires dans le guide JavaScript</a></li>
-  <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Unsigned_right_shift_assignment">L'opérateur de décalage binaire à droite non-signé et d'affectation</a></li>
-</ul>
diff --git a/files/fr/web/javascript/reference/operators/unsigned_right_shift/index.md b/files/fr/web/javascript/reference/operators/unsigned_right_shift/index.md
new file mode 100644
index 0000000000..a88a775af9
--- /dev/null
+++ b/files/fr/web/javascript/reference/operators/unsigned_right_shift/index.md
@@ -0,0 +1,64 @@
+---
+title: Décalage binaire à droite non-signé (>>>)
+slug: Web/JavaScript/Reference/Operators/Unsigned_right_shift
+tags:
+  - Bitwise operator
+  - JavaScript
+  - Language feature
+  - Operator
+  - Reference
+browser-compat: javascript.operators.unsigned_right_shift
+---
+{{jsSidebar("Operators")}}
+
+L'opérateur de **décalage binaire à droite non-signé (`>>>`)** décale la séquence de bits formée par le premier opérande d'autant de bits vers la droite que la valeur indiquée par le second opérande. Les bits en excès à droite sont écartés et ce sont des zéros qui sont ajoutés à gauches. Le bit de signe devient alors nécessairement `0` et le résultat est donc positif. À la différence des autres opérateurs binaires, cet opérateur renvoie un entier non-signé sur 32 bits.
+
+{{EmbedInteractiveExample("pages/js/expressions-unsigned-right-shift.html")}}
+
+## Syntaxe
+
+```js
+a >>> b
+```
+
+## Description
+
+Ce opérateur décale les bits du premier opérande vers la droite, selon la valeur du deuxième opérande. Les bits dépassant à droite sont éliminés tandis que des zéros sont ajoutés à gauche. Le bit de signe vaut alors `0` et en conséquence le résultat est positif. La valeur fournie par cet opérateur, à la différence des autres opérateurs binaires, est une valeur entière sur 32 bits non-signée.
+
+Pour les nombres positifts, le décalage binaire à droite et le décalage binaire à droite non-signés renverront le même résultat. Par exemple, `9 >>> 2` renvoie 2, également renvoyé par `9 >> 2`:
+
+```js
+        9 (base 10): 00000000000000000000000000001001 (base 2)
+                     --------------------------------
+  9 >>> 2 (base 10): 00000000000000000000000000000010 (base 2) = 2 (base 10)
+```
+
+Toutefois, ce n'est pas le cas pour les nombres négatifs : `-9 >>> 2` renverra 1073741821, qui est différent de `-9 >> 2` (qui renvoie `-3`) :
+
+```js
+        -9 (base 10): 11111111111111111111111111110111 (base 2)
+                      --------------------------------
+  -9 >>> 2 (base 10): 00111111111111111111111111111101 (base 2) = 1073741821 (base 10)
+```
+
+## Exemples
+
+### Utiliser le décalage à droite non-signé
+
+```js
+ 9 >>> 2; // 2
+-9 >>> 2; // 1073741821
+```
+
+## Spécifications
+
+{{Specifications}}
+
+## Compatibilité des navigateurs
+
+{{Compat}}
+
+## Voir aussi
+
+- [Les opérateurs binaires dans le guide JavaScript](/fr/docs/Web/JavaScript/Guide/Expressions_and_Operators#bitwise)
+- [L'opérateur de décalage binaire à droite non-signé et d'affectation](/fr/docs/Web/JavaScript/Reference/Operators/Unsigned_right_shift_assignment)
diff --git a/files/fr/web/javascript/reference/operators/unsigned_right_shift_assignment/index.html b/files/fr/web/javascript/reference/operators/unsigned_right_shift_assignment/index.html
deleted file mode 100644
index 1196307586..0000000000
--- a/files/fr/web/javascript/reference/operators/unsigned_right_shift_assignment/index.html
+++ /dev/null
@@ -1,51 +0,0 @@
----
-title: Affectation après décalage à droite non signé (>>>=)
-slug: Web/JavaScript/Reference/Operators/Unsigned_right_shift_assignment
-tags:
-  - Assignment operator
-  - JavaScript
-  - Language feature
-  - Operator
-  - Reference
-browser-compat: javascript.operators.unsigned_right_shift_assignment
-translation-of: Web/JavaScript/Reference/Operators/Unsigned_right_shift_assignment
----
-<div>{{jsSidebar("Operators")}}</div>
-
-<p>L'opérateur de décalage à droite non signé et d'affectation (<em><code>&gt;&gt;&gt;=</code></em>) décale la séquence de bits fournie par l'opérande gauche vers la droite, d'autant de bits qu'indiqués par l'opérande droit, puis affecte le résultat de l'opération à la variable indiquée par l'opérande gauche.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/expressions-unsigned-right-shift-assignment.html")}}</div>
-
-<h2 id="syntax">Syntax</h2>
-
-<pre class="brush: js">
-<strong>Opérateur :</strong> x &gt;&gt;&gt;= y
-<strong>Signification :</strong>  x    = x &gt;&gt;&gt; y
-</pre>
-
-<h2 id="examples">Exemples</h2>
-
-<h3 id="using_unsigned_right_shift_assignment">Utiliser l'opérateur de décalage à droite non signé et d'affectation</h3>
-
-<pre class="brush: js">
-let a = 5; //   (00000000000000000000000000000101)
-a &gt;&gt;&gt;= 2;  // 1 (00000000000000000000000000000001)
-
-let b = -5; // (-00000000000000000000000000000101)
-b &gt;&gt;&gt;= 2;   // 1073741822 (00111111111111111111111111111110)
-</pre>
-
-<h2 id="specifications">Spécifications</h2>
-
-<p>{{Specifications}}</p>
-
-<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
-
-<p>{{Compat}}</p>
-
-<h2 id="see_also">Voir aussi</h2>
-
-<ul>
-  <li><a href="/fr/docs/Web/JavaScript/Guide/Expressions_and_Operators#assignment">Les opérateurs d'affectation dans le guide JavaScript</a></li>
-  <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Unsigned_right_shift">L'opérateur de décalage à droite</a></li>
-</ul>
diff --git a/files/fr/web/javascript/reference/operators/unsigned_right_shift_assignment/index.md b/files/fr/web/javascript/reference/operators/unsigned_right_shift_assignment/index.md
new file mode 100644
index 0000000000..0aa12d952a
--- /dev/null
+++ b/files/fr/web/javascript/reference/operators/unsigned_right_shift_assignment/index.md
@@ -0,0 +1,48 @@
+---
+title: Affectation après décalage à droite non signé (>>>=)
+slug: Web/JavaScript/Reference/Operators/Unsigned_right_shift_assignment
+tags:
+  - Assignment operator
+  - JavaScript
+  - Language feature
+  - Operator
+  - Reference
+browser-compat: javascript.operators.unsigned_right_shift_assignment
+---
+{{jsSidebar("Operators")}}
+
+L'opérateur de décalage à droite non signé et d'affectation (_`>>>=`_) décale la séquence de bits fournie par l'opérande gauche vers la droite, d'autant de bits qu'indiqués par l'opérande droit, puis affecte le résultat de l'opération à la variable indiquée par l'opérande gauche.
+
+{{EmbedInteractiveExample("pages/js/expressions-unsigned-right-shift-assignment.html")}}
+
+## Syntax
+
+```js
+Opérateur : x >>>= y
+Signification :  x    = x >>> y
+```
+
+## Exemples
+
+### Utiliser l'opérateur de décalage à droite non signé et d'affectation
+
+```js
+let a = 5; //   (00000000000000000000000000000101)
+a >>>= 2;  // 1 (00000000000000000000000000000001)
+
+let b = -5; // (-00000000000000000000000000000101)
+b >>>= 2;   // 1073741822 (00111111111111111111111111111110)
+```
+
+## Spécifications
+
+{{Specifications}}
+
+## Compatibilité des navigateurs
+
+{{Compat}}
+
+## Voir aussi
+
+- [Les opérateurs d'affectation dans le guide JavaScript](/fr/docs/Web/JavaScript/Guide/Expressions_and_Operators#assignment)
+- [L'opérateur de décalage à droite](/fr/docs/Web/JavaScript/Reference/Operators/Unsigned_right_shift)
diff --git a/files/fr/web/javascript/reference/operators/void/index.html b/files/fr/web/javascript/reference/operators/void/index.html
deleted file mode 100644
index 19a2c21318..0000000000
--- a/files/fr/web/javascript/reference/operators/void/index.html
+++ /dev/null
@@ -1,119 +0,0 @@
----
-title: L'opérateur void
-slug: Web/JavaScript/Reference/Operators/void
-tags:
-  - JavaScript
-  - Operator
-  - Reference
-translation_of: Web/JavaScript/Reference/Operators/void
-original_slug: Web/JavaScript/Reference/Opérateurs/L_opérateur_void
----
-<div>{{jsSidebar("Operators")}}</div>
-
-<p>L'<strong>opérateur <code>void</code></strong> permet d'évaluer une <em>expression</em> donnée et de renvoyer <code>undefined</code>.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/expressions-voidoperator.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">void <em>expression</em></pre>
-
-<h2 id="Description">Description</h2>
-
-<p>Cet opérateur permet d'évaluer des expressions retournant une valeur là où on attend une expression qui vaut {{jsxref("undefined")}}.</p>
-
-<p>L'opérateur <code>void</code> est souvent utilisé pour obtenir la valeur <code>undefined</code>, généralement avec "<code>void(0)</code>" (qui est l'équivalent de "<code>void 0</code>"). Pour ce cas d'exemple, on aurait très bien pu utiliser la variable globale {{jsxref("undefined")}}.</p>
-
-<p>Attention à <a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Pr%C3%A9c%C3%A9dence_des_op%C3%A9rateurs">la précédence des opérateurs</a> et notamment de celle de <code>void</code>, si besoin, on pourra utiliser des parenthèses pour clarifier la résolution de l'expression :</p>
-
-<pre class="brush: js">void 2 == '2';    // renvoie false
-void (2 === '2'); // renvoie undefined</pre>
-
-<h2 id="Expressions_de_fonction_appelées_immédiatement">Expressions de fonction appelées immédiatement</h2>
-
-<p>Lorsqu'on utilise tout un script dans une fonction qu'on évalue immédiatement, <code>void</code> peut être utilisé pour que le mot-clé <code>function</code> soit traité comme une expression plutôt que comme une déclaration.</p>
-
-<pre class="brush: js">void function iife() {
-    var toto = function () {};
-    var machin = function () {};
-    var truc = function () {
-        toto();
-        machin();
-     };
-    var bidule = function () {};
-
-    truc();
-    bidule();
-}();
-</pre>
-
-<h2 id="Les_URI_JavaScript">Les URI JavaScript</h2>
-
-<p>Lorsqu'un navigateur utilise une URI avec <code>javascript:</code>, le code de l'URI est évalué et le résultat remplace le contenu de la page, sauf si la valeur renvoyée vaut {{jsxref("Objets_globaux/undefined","undefined")}}. L'utilisateur <code>void</code> peut alors être utilisé pour renvoyer cette valeur. Par exemple :</p>
-
-<pre>&lt;a href="javascript:void(0);"&gt;
-  Cliquer ici (sans effet)
-&lt;/a&gt;
-
-&lt;a href="javascript:void(document.body.style.backgroundColor='green');"&gt;
-  Cliquer ici pour rendre le fond vert
-&lt;/a&gt;</pre>
-
-<p>Malgré cela, il n'est pas recommandé d'utiliser le pseudo-protocole <code>javascript:</code>, on lui préférera des méthodes moins risquées et moins intrusives comme les gestionnaires d'événements.</p>
-
-<h2 id="Fonctions_fléchées_sans_valeur_de_retour">Fonctions fléchées sans valeur de retour</h2>
-
-<p>Les fonctions fléchées raccourcissent la syntaxe pour obtenir la valeur d'une fonction avec le résultat d'une expression qui constitue le corps de la fonction. Ainsi, la fonction renvoie nécessairement une valeur. Aussi, convertir une base de code afin d'utiliser des fonctions fléchées peut avoir certains effets de bord lorsqu'on souhaite qu'une fonction soit simplement exécutée mais pas que sa valeur de retour interfère avec le reste.</p>
-
-<p>Pour éviter de transmettre cette valeur de retour, on pourra utiliser l'opérateur <code>void</code> :</p>
-
-<pre class="brush: js">button.onclick = () =&gt; void faireQQc();</pre>
-
-<p>Ainsi, la valeur de retour de la fonction <code>faireQQc</code> sera bloquée par <code>void</code> et c'est <code>undefined</code> qui sera la valeur de retour de la fonction fléchée. Cela s'avère utile si on change l'API de <code>faireQQc</code> par exemple et qu'on souhaite éviter les effets de bord causés par cette modification.</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-void-operator', 'Opérateur void')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-void-operator', 'L\'opérateur void')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-11.4.2', 'L\'opérateur void')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES3', '#sec-11.4.2', 'L\'opérateur void')}}</td>
-   <td>{{Spec2('ES3')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES1', '#sec-11.4.2', 'L\'opérateur void')}}</td>
-   <td>{{Spec2('ES1')}}</td>
-   <td>Définition initiale. Implémentée avec JavaScript 1.1</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.operators.void")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("undefined")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/operators/void/index.md b/files/fr/web/javascript/reference/operators/void/index.md
new file mode 100644
index 0000000000..3b87959b55
--- /dev/null
+++ b/files/fr/web/javascript/reference/operators/void/index.md
@@ -0,0 +1,95 @@
+---
+title: L'opérateur void
+slug: Web/JavaScript/Reference/Operators/void
+tags:
+  - JavaScript
+  - Operator
+  - Reference
+translation_of: Web/JavaScript/Reference/Operators/void
+original_slug: Web/JavaScript/Reference/Opérateurs/L_opérateur_void
+---
+{{jsSidebar("Operators")}}
+
+L'**opérateur `void`** permet d'évaluer une _expression_ donnée et de renvoyer `undefined`.
+
+{{EmbedInteractiveExample("pages/js/expressions-voidoperator.html")}}
+
+## Syntaxe
+
+    void expression
+
+## Description
+
+Cet opérateur permet d'évaluer des expressions retournant une valeur là où on attend une expression qui vaut {{jsxref("undefined")}}.
+
+L'opérateur `void` est souvent utilisé pour obtenir la valeur `undefined`, généralement avec "`void(0)`" (qui est l'équivalent de "`void 0`"). Pour ce cas d'exemple, on aurait très bien pu utiliser la variable globale {{jsxref("undefined")}}.
+
+Attention à [la précédence des opérateurs](/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Pr%C3%A9c%C3%A9dence_des_op%C3%A9rateurs) et notamment de celle de `void`, si besoin, on pourra utiliser des parenthèses pour clarifier la résolution de l'expression :
+
+```js
+void 2 == '2';    // renvoie false
+void (2 === '2'); // renvoie undefined
+```
+
+## Expressions de fonction appelées immédiatement
+
+Lorsqu'on utilise tout un script dans une fonction qu'on évalue immédiatement, `void` peut être utilisé pour que le mot-clé `function` soit traité comme une expression plutôt que comme une déclaration.
+
+```js
+void function iife() {
+    var toto = function () {};
+    var machin = function () {};
+    var truc = function () {
+        toto();
+        machin();
+     };
+    var bidule = function () {};
+
+    truc();
+    bidule();
+}();
+```
+
+## Les URI JavaScript
+
+Lorsqu'un navigateur utilise une URI avec `javascript:`, le code de l'URI est évalué et le résultat remplace le contenu de la page, sauf si la valeur renvoyée vaut {{jsxref("Objets_globaux/undefined","undefined")}}. L'utilisateur `void` peut alors être utilisé pour renvoyer cette valeur. Par exemple :
+
+    <a href="javascript:void(0);">
+      Cliquer ici (sans effet)
+    </a>
+
+    <a href="javascript:void(document.body.style.backgroundColor='green');">
+      Cliquer ici pour rendre le fond vert
+    </a>
+
+Malgré cela, il n'est pas recommandé d'utiliser le pseudo-protocole `javascript:`, on lui préférera des méthodes moins risquées et moins intrusives comme les gestionnaires d'événements.
+
+## Fonctions fléchées sans valeur de retour
+
+Les fonctions fléchées raccourcissent la syntaxe pour obtenir la valeur d'une fonction avec le résultat d'une expression qui constitue le corps de la fonction. Ainsi, la fonction renvoie nécessairement une valeur. Aussi, convertir une base de code afin d'utiliser des fonctions fléchées peut avoir certains effets de bord lorsqu'on souhaite qu'une fonction soit simplement exécutée mais pas que sa valeur de retour interfère avec le reste.
+
+Pour éviter de transmettre cette valeur de retour, on pourra utiliser l'opérateur `void` :
+
+```js
+button.onclick = () => void faireQQc();
+```
+
+Ainsi, la valeur de retour de la fonction `faireQQc` sera bloquée par `void` et c'est `undefined` qui sera la valeur de retour de la fonction fléchée. Cela s'avère utile si on change l'API de `faireQQc` par exemple et qu'on souhaite éviter les effets de bord causés par cette modification.
+
+## Spécifications
+
+| Spécification                                                                        | Statut                       | Commentaires                                         |
+| ------------------------------------------------------------------------------------ | ---------------------------- | ---------------------------------------------------- |
+| {{SpecName('ESDraft', '#sec-void-operator', 'Opérateur void')}} | {{Spec2('ESDraft')}} |                                                      |
+| {{SpecName('ES6', '#sec-void-operator', 'L\'opérateur void')}} | {{Spec2('ES6')}}         |                                                      |
+| {{SpecName('ES5.1', '#sec-11.4.2', 'L\'opérateur void')}}         | {{Spec2('ES5.1')}}     |                                                      |
+| {{SpecName('ES3', '#sec-11.4.2', 'L\'opérateur void')}}         | {{Spec2('ES3')}}         |                                                      |
+| {{SpecName('ES1', '#sec-11.4.2', 'L\'opérateur void')}}         | {{Spec2('ES1')}}         | Définition initiale. Implémentée avec JavaScript 1.1 |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.operators.void")}}
+
+## Voir aussi
+
+- {{jsxref("undefined")}}
diff --git a/files/fr/web/javascript/reference/operators/yield/index.html b/files/fr/web/javascript/reference/operators/yield/index.html
deleted file mode 100644
index b3b31488d4..0000000000
--- a/files/fr/web/javascript/reference/operators/yield/index.html
+++ /dev/null
@@ -1,124 +0,0 @@
----
-title: yield
-slug: Web/JavaScript/Reference/Operators/yield
-tags:
-  - ECMAScript 2015
-  - Générateurs
-  - Itérateur
-  - JavaScript
-  - Opérateur
-translation_of: Web/JavaScript/Reference/Operators/yield
-original_slug: Web/JavaScript/Reference/Opérateurs/yield
----
-<div>{{jsSidebar("Operators")}}</div>
-
-<p>Le mot-clé <code>yield</code> est utilisé pour suspendre et reprendre une fonction génératrice ({{jsxref("Statements/function*", "function*")}} ou <a href="/fr/docs/Web/JavaScript/Reference/Statements/Legacy_generator_function">une fonction génératrice historique</a>).</p>
-
-<div>{{EmbedInteractiveExample("pages/js/expressions-yield.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><em>[[rv =]]</em> yield [[<em>expression</em>]];</pre>
-
-<dl>
- <dt><code>expression</code></dt>
- <dd>Définit la valeur à retourner depuis la fonction génératrice via <a href="/fr/docs/Web/JavaScript/Reference/Les_protocoles_iteration#Le_protocole_«_itérateur_»">le protocole itérateur</a>. Si omise, <code>undefined</code> sera retournée à la place.</dd>
- <dt><code>rv</code></dt>
- <dd>Retourne la valeur optionnelle passée à la méthode <code>next()</code> pour reprendre son exécution.</dd>
-</dl>
-
-<h2 id="Description">Description</h2>
-
-<p>Le mot-clé <code>yield</code> suspend une fonction génératrice et la valeur de l'expression suivant le mot-clé <code>yield</code> est retournée à l'appelant du générateur. Il peut être vu comme une version générateur du mot-clé <code>return</code>.</p>
-
-<p>Le mot-clé <code>yield</code> ne peut être appelé qu'à partir de la fonction génératrice qui le contient. Il ne peut pas être utilisé depuis des fonctions imbriquées ou avec des <em>callbacks</em>.</p>
-
-<p>Le mot-clé <code>yield</code> retourne en fait un objet <code>IteratorResult</code> ayant deux propriétés, <code>value</code> et <code>done.</code> La propriété <code>value</code> est le résultat de l'évaluation de l'expression <code>yield</code>, et <code>done</code> est <code>false</code>, indiquant que la fonction génératrice n'est pas complètement terminée.</p>
-
-<p>Une fois suspendue sur une expression <code>yield</code>, l'exécution du code du générateur reste suspendue jusqu'à ce que la méthode <code>next()</code> du générateur soit appelée. Chaque fois que la méthode <code>next()</code> du générateur est appelée, le générateur reprend l'exécution et s'exécute jusqu'à ce qu'elle atteigne l'une des situations suivantes :</p>
-
-<ul>
- <li>
-  <p>un <code>yield</code>, ce qui provoque une nouvelle pause du générateur et retourne la nouvelle valeur du générateur ; la prochaine fois que <code>next()</code> sera appelé, l'exécution reprendra à l'instruction immédiatement après le <code>yield</code> ;</p>
- </li>
- <li>
-  <p>{{jsxref ("Statements/throw", "throw")}} est utilisé pour déclencher une exception depuis le générateur ; cela arrête entièrement l'exécution du générateur et l'exécution reprend dans l'appelant, comme c'est normalement le cas lorsqu'une exception est déclenchée ;</p>
- </li>
- <li>
-  <p>la fin de la fonction génératrice est atteinte ; dans ce cas, l'exécution du générateur se termine et un <code>IteratorResult</code> est retourné à l'appelant, dans lequel la valeur est {{jsxref ("undefined")}} et <code>done</code> est <code>true</code> ;</p>
- </li>
- <li>
-  <p>une instruction {{jsxref ("Statements/return", "return")}} est atteinte ; dans ce cas, l'exécution du générateur se termine et un <code>IteratorResult</code> est retourné à l'appelant dans lequel la <code>value</code> est la valeur spécifiée par l'instruction <code>return</code> et <code>done</code> vaut <code>true</code>.</p>
- </li>
-</ul>
-
-<p>Si une valeur optionnelle est passée à la méthode <code>next()</code> du générateur, cette valeur devient la valeur retournée par l'opération <code>yield</code> en cours du générateur.</p>
-
-<p>Entre le chemin de code du générateur, ses opérateurs <code>yield</code>, et la possibilité de spécifier une nouvelle valeur de départ en la passant à {{jsxref ("Generator.prototype.next()")}}, les générateurs offrent énormément de puissance et de contrôle.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<p>Le code suivant est la déclaration d'un exemple de fonction génératrice :</p>
-
-<pre><code>function* compteVentesPommes () {
-  var listeVentes = [3, 7, 5];
-  for (var i = 0; i &lt; listeVentes.length; i++) {
-    yield listeVentes[i];
-  }
-}</code></pre>
-
-<p>Une fois qu'une fonction génératrice est définie, elle peut être utilisée en construisant un itérateur comme indiqué.</p>
-
-<pre><code>var magasinPommes = compteVentesPommes(); // Générateur { }
-console.log(magasinPommes.next()); // { value: 3, done: false }
-console.log(magasinPommes.next()); // { value: 7, done: false }
-console.log(magasinPommes.next()); // { value: 5, done: false }
-console.log(magasinPommes.next()); // { value: undefined, done: true }</code></pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('ES2015', '#prod-YieldExpression', 'Yield')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#prod-YieldExpression', 'Yield')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.operators.yield")}}</p>
-
-<h2 id="Notes_spécifiques_à_Firefox">Notes spécifiques à Firefox</h2>
-
-<ul>
- <li>À partir de Gecko 29 {{geckoRelease(29)}}, une fonction génératrice terminée ne déclenche plus une {{jsxref("TypeError")}} "generator has already finished". À la place, elle renvoie un objet <code>IteratorResult</code> tel que <code>{ value: undefined, done: true }</code> ({{bug(958951)}}).</li>
- <li>À partir de Gecko 33 {{geckoRelease(33)}}, l'analyse de l'expression <code>yield</code> a été mise à jour afin d'être conforme aux spécifications ES2015 ({{bug(981599)}}):
-  <ul>
-   <li>L'expression après le mot-clé <code>yield</code> est optionnelle et l'omettre ne déclenche plus une {{jsxref("SyntaxError")}} : <code>function* compteVentesPommes() { yield; }</code></li>
-  </ul>
- </li>
-</ul>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/JavaScript/Guide/Le_protocole_iterator">Le protocole itérateur</a></li>
- <li>L'instruction {{jsxref("Instructions/function*", "function*")}}</li>
- <li>L'expression {{jsxref("Opérateurs/function*", "function*")}}</li>
- <li>L'opérateur {{jsxref("Opérateurs/yield*", "yield*")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/operators/yield/index.md b/files/fr/web/javascript/reference/operators/yield/index.md
new file mode 100644
index 0000000000..da998c2c0c
--- /dev/null
+++ b/files/fr/web/javascript/reference/operators/yield/index.md
@@ -0,0 +1,89 @@
+---
+title: yield
+slug: Web/JavaScript/Reference/Operators/yield
+tags:
+  - ECMAScript 2015
+  - Générateurs
+  - Itérateur
+  - JavaScript
+  - Opérateur
+translation_of: Web/JavaScript/Reference/Operators/yield
+original_slug: Web/JavaScript/Reference/Opérateurs/yield
+---
+{{jsSidebar("Operators")}}
+
+Le mot-clé `yield` est utilisé pour suspendre et reprendre une fonction génératrice ({{jsxref("Statements/function*", "function*")}} ou [une fonction génératrice historique](/fr/docs/Web/JavaScript/Reference/Statements/Legacy_generator_function)).
+
+{{EmbedInteractiveExample("pages/js/expressions-yield.html")}}
+
+## Syntaxe
+
+    [[rv =]] yield [[expression]];
+
+- `expression`
+  - : Définit la valeur à retourner depuis la fonction génératrice via [le protocole itérateur](/fr/docs/Web/JavaScript/Reference/Les_protocoles_iteration#Le_protocole_«_itérateur_»). Si omise, `undefined` sera retournée à la place.
+- `rv`
+  - : Retourne la valeur optionnelle passée à la méthode `next()` pour reprendre son exécution.
+
+## Description
+
+Le mot-clé `yield` suspend une fonction génératrice et la valeur de l'expression suivant le mot-clé `yield` est retournée à l'appelant du générateur. Il peut être vu comme une version générateur du mot-clé `return`.
+
+Le mot-clé `yield` ne peut être appelé qu'à partir de la fonction génératrice qui le contient. Il ne peut pas être utilisé depuis des fonctions imbriquées ou avec des _callbacks_.
+
+Le mot-clé `yield` retourne en fait un objet `IteratorResult` ayant deux propriétés, `value` et `done.` La propriété `value` est le résultat de l'évaluation de l'expression `yield`, et `done` est `false`, indiquant que la fonction génératrice n'est pas complètement terminée.
+
+Une fois suspendue sur une expression `yield`, l'exécution du code du générateur reste suspendue jusqu'à ce que la méthode `next()` du générateur soit appelée. Chaque fois que la méthode `next()` du générateur est appelée, le générateur reprend l'exécution et s'exécute jusqu'à ce qu'elle atteigne l'une des situations suivantes :
+
+- un `yield`, ce qui provoque une nouvelle pause du générateur et retourne la nouvelle valeur du générateur ; la prochaine fois que `next()` sera appelé, l'exécution reprendra à l'instruction immédiatement après le `yield` ;
+- {{jsxref ("Statements/throw", "throw")}} est utilisé pour déclencher une exception depuis le générateur ; cela arrête entièrement l'exécution du générateur et l'exécution reprend dans l'appelant, comme c'est normalement le cas lorsqu'une exception est déclenchée ;
+- la fin de la fonction génératrice est atteinte ; dans ce cas, l'exécution du générateur se termine et un `IteratorResult` est retourné à l'appelant, dans lequel la valeur est {{jsxref ("undefined")}} et `done` est `true` ;
+- une instruction {{jsxref ("Statements/return", "return")}} est atteinte ; dans ce cas, l'exécution du générateur se termine et un `IteratorResult` est retourné à l'appelant dans lequel la `value` est la valeur spécifiée par l'instruction `return` et `done` vaut `true`.
+
+Si une valeur optionnelle est passée à la méthode `next()` du générateur, cette valeur devient la valeur retournée par l'opération `yield` en cours du générateur.
+
+Entre le chemin de code du générateur, ses opérateurs `yield`, et la possibilité de spécifier une nouvelle valeur de départ en la passant à {{jsxref ("Generator.prototype.next()")}}, les générateurs offrent énormément de puissance et de contrôle.
+
+## Exemples
+
+Le code suivant est la déclaration d'un exemple de fonction génératrice :
+
+    function* compteVentesPommes () {
+      var listeVentes = [3, 7, 5];
+      for (var i = 0; i < listeVentes.length; i++) {
+        yield listeVentes[i];
+      }
+    }
+
+Une fois qu'une fonction génératrice est définie, elle peut être utilisée en construisant un itérateur comme indiqué.
+
+    var magasinPommes = compteVentesPommes(); // Générateur { }
+    console.log(magasinPommes.next()); // { value: 3, done: false }
+    console.log(magasinPommes.next()); // { value: 7, done: false }
+    console.log(magasinPommes.next()); // { value: 5, done: false }
+    console.log(magasinPommes.next()); // { value: undefined, done: true }
+
+## Spécifications
+
+| Spécification                                                                | Statut                       | Commentaires         |
+| ---------------------------------------------------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName('ES2015', '#prod-YieldExpression', 'Yield')}} | {{Spec2('ES2015')}}     | Définition initiale. |
+| {{SpecName('ESDraft', '#prod-YieldExpression', 'Yield')}} | {{Spec2('ESDraft')}} |                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.operators.yield")}}
+
+## Notes spécifiques à Firefox
+
+- À partir de Gecko 29 {{geckoRelease(29)}}, une fonction génératrice terminée ne déclenche plus une {{jsxref("TypeError")}} "generator has already finished". À la place, elle renvoie un objet `IteratorResult` tel que `{ value: undefined, done: true }` ({{bug(958951)}}).
+- À partir de Gecko 33 {{geckoRelease(33)}}, l'analyse de l'expression `yield` a été mise à jour afin d'être conforme aux spécifications ES2015 ({{bug(981599)}}):
+
+  - L'expression après le mot-clé `yield` est optionnelle et l'omettre ne déclenche plus une {{jsxref("SyntaxError")}} : `function* compteVentesPommes() { yield; }`
+
+## Voir aussi
+
+- [Le protocole itérateur](/fr/docs/Web/JavaScript/Guide/Le_protocole_iterator)
+- L'instruction {{jsxref("Instructions/function*", "function*")}}
+- L'expression {{jsxref("Opérateurs/function*", "function*")}}
+- L'opérateur {{jsxref("Opérateurs/yield*", "yield*")}}
diff --git a/files/fr/web/javascript/reference/operators/yield_star_/index.html b/files/fr/web/javascript/reference/operators/yield_star_/index.html
deleted file mode 100644
index 0ce1a73abd..0000000000
--- a/files/fr/web/javascript/reference/operators/yield_star_/index.html
+++ /dev/null
@@ -1,159 +0,0 @@
----
-title: yield*
-slug: Web/JavaScript/Reference/Operators/yield*
-tags:
-  - ECMAScript 2015
-  - Generators
-  - Iterable
-  - Iterator
-  - JavaScript
-  - Operator
-  - Reference
-translation_of: Web/JavaScript/Reference/Operators/yield*
-original_slug: Web/JavaScript/Reference/Opérateurs/yield*
----
-<div>{{jsSidebar("Operators")}}</div>
-
-<p>Une <strong>expression <code>yield*</code></strong> est utilisée afin de déléguer le mécanisme d'itération/génération à un autre {{jsxref("Instructions/function*", "générateur")}} ou à un autre objet itérable.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/expressions-yieldasterisk.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"> yield* [[expression]];</pre>
-
-<dl>
- <dt><code>expression</code></dt>
- <dd>L'expression qui renvoie un objet itérable.</dd>
-</dl>
-
-<h2 id="Description">Description</h2>
-
-<p>L'expression <code>yield*</code> itère sur l'opérande et génère chaque valeur générée par l'opérande.</p>
-
-<p>La valeur de l'expression <code>yield*</code> est la valeur renvoyée par l'itérateur lorsque celui est terminé (la propriété <code>done</code> vaut <code>true</code>).</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Délégation_de_la_génération">Délégation de la génération</h3>
-
-<p>Dans le code suivant, les valeurs générées par <code>g1()</code> sont renvoyées grâce aux appels à la fonction <code>next()</code>, comme pour celles renvoyées par <code>g2()</code>.</p>
-
-<pre class="brush: js">function* g1() {
-  yield 2;
-  yield 3;
-  yield 4;
-}
-function* g2() {
-  yield 1;
-  yield* g1();
-  yield 5;
-}
-
-var iterator = g2();
-
-console.log(iterator.next()); // { value: 1, done: false }
-console.log(iterator.next()); // { value: 2, done: false }
-console.log(iterator.next()); // { value: 3, done: false }
-console.log(iterator.next()); // { value: 4, done: false }
-console.log(iterator.next()); // { value: 5, done: false }
-console.log(iterator.next()); // { value: undefined, done: true }
-</pre>
-
-<h3 id="Les_autres_objets_itérables">Les autres objets itérables</h3>
-
-<p><code>yield*</code> peut également être utilisé avec d'autres sortes d'itérables (chaînes, tableaux ou arguments) :</p>
-
-<pre class="brush: js">function* g3() {
-  yield* [1, 2];
-  yield* "34";
-  yield* Array.from(arguments);
-}
-
-var iterator = g3(5, 6);
-
-console.log(iterator.next()); // { value: 1, done: false }
-console.log(iterator.next()); // { value: 2, done: false }
-console.log(iterator.next()); // { value: "3", done: false }
-console.log(iterator.next()); // { value: "4", done: false }
-console.log(iterator.next()); // { value: 5, done: false }
-console.log(iterator.next()); // { value: 6, done: false }
-console.log(iterator.next()); // { value: undefined, done: true }</pre>
-
-<h3 id="La_valeur_de_l'expression_yield*">La valeur de l'expression <code>yield*</code></h3>
-
-<p><code>yield*</code> est une expression et non une instruction, elle est donc évaluée et fournit une valeur :</p>
-
-<pre class="brush: js">function* g4() {
-  yield* [1, 2, 3];
-  return "toto";
-}
-
-var résultat;
-
-function* g5() {
-  résultat = yield* g4();
-}
-
-var iterator = g5();
-
-console.log(iterator.next()); // { value: 1, done: false }
-console.log(iterator.next()); // { value: 2, done: false }
-console.log(iterator.next()); // { value: 3, done: false }
-console.log(iterator.next()); // { value: undefined, done: true },
-                              // g4() renvoie{ value: "toto", done: true } at this point
-
-console.log(résultat);          // "toto"</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-generator-function-definitions-runtime-semantics-evaluation', 'Yield')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td>Définition initiale</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-generator-function-definitions-runtime-semantics-evaluation', 'Yield')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.operators.yield_star")}}</p>
-
-<h2 id="Notes_relatives_à_Firefox">Notes relatives à Firefox</h2>
-
-<ul>
- <li>À partir de Gecko 33 {{geckoRelease(33)}}, l'analyse de l'expression <code>yield</code> a été mise à jour pour être conforme aux spécifications ES2015 ({{bug(981599)}}) :
-
-  <ul>
-   <li>La restriction concernant les terminateurs de lignes est désormais implémentée. Il n'est pas autorisé d'avoir un terminateur de ligne entre "yield" et "*". Le code suivant lèvera une exception {{jsxref("SyntaxError")}}:
-    <pre class="brush: js">function* toto() {
-  yield
-  *[];
-}</pre>
-   </li>
-  </ul>
- </li>
-</ul>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/JavaScript/Guide/Le_protocole_iterator">Le protocole itérateur</a></li>
- <li>L'instruction {{jsxref("Instruction/function*", "function*")}}</li>
- <li>L'expression {{jsxref("Opérateurs/function*", "function*")}}</li>
- <li>{{jsxref("Opérateurs/yield", "yield")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/operators/yield_star_/index.md b/files/fr/web/javascript/reference/operators/yield_star_/index.md
new file mode 100644
index 0000000000..86ad5717d8
--- /dev/null
+++ b/files/fr/web/javascript/reference/operators/yield_star_/index.md
@@ -0,0 +1,140 @@
+---
+title: yield*
+slug: Web/JavaScript/Reference/Operators/yield*
+tags:
+  - ECMAScript 2015
+  - Generators
+  - Iterable
+  - Iterator
+  - JavaScript
+  - Operator
+  - Reference
+translation_of: Web/JavaScript/Reference/Operators/yield*
+original_slug: Web/JavaScript/Reference/Opérateurs/yield*
+---
+{{jsSidebar("Operators")}}
+
+Une **expression `yield*`** est utilisée afin de déléguer le mécanisme d'itération/génération à un autre {{jsxref("Instructions/function*", "générateur")}} ou à un autre objet itérable.
+
+{{EmbedInteractiveExample("pages/js/expressions-yieldasterisk.html")}}
+
+## Syntaxe
+
+     yield* [[expression]];
+
+- `expression`
+  - : L'expression qui renvoie un objet itérable.
+
+## Description
+
+L'expression `yield*` itère sur l'opérande et génère chaque valeur générée par l'opérande.
+
+La valeur de l'expression `yield*` est la valeur renvoyée par l'itérateur lorsque celui est terminé (la propriété `done` vaut `true`).
+
+## Exemples
+
+### Délégation de la génération
+
+Dans le code suivant, les valeurs générées par `g1()` sont renvoyées grâce aux appels à la fonction `next()`, comme pour celles renvoyées par `g2()`.
+
+```js
+function* g1() {
+  yield 2;
+  yield 3;
+  yield 4;
+}
+function* g2() {
+  yield 1;
+  yield* g1();
+  yield 5;
+}
+
+var iterator = g2();
+
+console.log(iterator.next()); // { value: 1, done: false }
+console.log(iterator.next()); // { value: 2, done: false }
+console.log(iterator.next()); // { value: 3, done: false }
+console.log(iterator.next()); // { value: 4, done: false }
+console.log(iterator.next()); // { value: 5, done: false }
+console.log(iterator.next()); // { value: undefined, done: true }
+```
+
+### Les autres objets itérables
+
+`yield*` peut également être utilisé avec d'autres sortes d'itérables (chaînes, tableaux ou arguments) :
+
+```js
+function* g3() {
+  yield* [1, 2];
+  yield* "34";
+  yield* Array.from(arguments);
+}
+
+var iterator = g3(5, 6);
+
+console.log(iterator.next()); // { value: 1, done: false }
+console.log(iterator.next()); // { value: 2, done: false }
+console.log(iterator.next()); // { value: "3", done: false }
+console.log(iterator.next()); // { value: "4", done: false }
+console.log(iterator.next()); // { value: 5, done: false }
+console.log(iterator.next()); // { value: 6, done: false }
+console.log(iterator.next()); // { value: undefined, done: true }
+```
+
+### La valeur de l'expression `yield*`
+
+`yield*` est une expression et non une instruction, elle est donc évaluée et fournit une valeur :
+
+```js
+function* g4() {
+  yield* [1, 2, 3];
+  return "toto";
+}
+
+var résultat;
+
+function* g5() {
+  résultat = yield* g4();
+}
+
+var iterator = g5();
+
+console.log(iterator.next()); // { value: 1, done: false }
+console.log(iterator.next()); // { value: 2, done: false }
+console.log(iterator.next()); // { value: 3, done: false }
+console.log(iterator.next()); // { value: undefined, done: true },
+                              // g4() renvoie{ value: "toto", done: true } at this point
+
+console.log(résultat);          // "toto"
+```
+
+## Spécifications
+
+| Spécification                                                                                                                        | État                         | Commentaires        |
+| ------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------- | ------------------- |
+| {{SpecName('ES2015', '#sec-generator-function-definitions-runtime-semantics-evaluation', 'Yield')}} | {{Spec2('ES2015')}}     | Définition initiale |
+| {{SpecName('ESDraft', '#sec-generator-function-definitions-runtime-semantics-evaluation', 'Yield')}} | {{Spec2('ESDraft')}} |                     |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.operators.yield_star")}}
+
+## Notes relatives à Firefox
+
+- À partir de Gecko 33 {{geckoRelease(33)}}, l'analyse de l'expression `yield` a été mise à jour pour être conforme aux spécifications ES2015 ({{bug(981599)}}) :
+
+  - La restriction concernant les terminateurs de lignes est désormais implémentée. Il n'est pas autorisé d'avoir un terminateur de ligne entre "yield" et "\*". Le code suivant lèvera une exception {{jsxref("SyntaxError")}}:
+
+    ```js
+        function* toto() {
+          yield
+          *[];
+        }
+        ```
+
+## Voir aussi
+
+- [Le protocole itérateur](/fr/docs/Web/JavaScript/Guide/Le_protocole_iterator)
+- L'instruction {{jsxref("Instruction/function*", "function*")}}
+- L'expression {{jsxref("Opérateurs/function*", "function*")}}
+- {{jsxref("Opérateurs/yield", "yield")}}
diff --git a/files/fr/web/javascript/reference/statements/async_function/index.html b/files/fr/web/javascript/reference/statements/async_function/index.html
deleted file mode 100644
index 02131e514b..0000000000
--- a/files/fr/web/javascript/reference/statements/async_function/index.html
+++ /dev/null
@@ -1,258 +0,0 @@
----
-title: async function
-slug: Web/JavaScript/Reference/Statements/async_function
-tags:
-  - Experimental
-  - Function
-  - Instruction
-  - JavaScript
-  - Reference
-translation_of: Web/JavaScript/Reference/Statements/async_function
-original_slug: Web/JavaScript/Reference/Instructions/async_function
----
-<div>{{jsSidebar("Statements")}}</div>
-
-<p>La déclaration <code><strong>async function</strong></code> définit une fonction asynchrone qui renvoie un objet {{jsxref("Objets_globaux/AsyncFunction","AsyncFunction")}}. Une fonction asynchrone est une fonction qui s'exécute de façon asynchrone grâce à la boucle d'évènement en utilisant une promesse ({{jsxref("Promise")}}) comme valeur de retour.</p>
-
-<div class="noinclude">
-<p>On peut également définir des fonctions asynchrones grâce au constructeur {{jsxref("AsyncFunction")}} et via une {{jsxref("Opérateurs/async_function", "expression de fonction asynchrone","",1)}}.</p>
-</div>
-
-<div>{{EmbedInteractiveExample("pages/js/statement-async.html", "taller")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">async function <em>name</em>([<em>param</em>[, <em>param</em>[, ... <em>param</em>]]]) {
-   <em>instructions</em>
-}
-</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>name</code></dt>
- <dd>Le nom de la fonction.</dd>
- <dt><code>param</code></dt>
- <dd>Le nom d'un argument à passer à la fonction.</dd>
- <dt><code>instructions</code></dt>
- <dd>Les instructions qui composent le corps de la fonction.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Une promesse ({{jsxref("Promise")}}) qui sera résolue avec la valeur renvoyée par la fonction asynchrone ou qui sera rompue s'il y a une exception non interceptée émise depuis la fonction asynchrone.</p>
-
-<h2 id="Description">Description</h2>
-
-<p>Une fonction <code>async</code> peut contenir une expression {{jsxref("Opérateurs/await", "await")}} qui interrompt l'exécution de la fonction asynchrone et attend la résolution de la promesse passée <code>Promise</code>. La fonction asynchrone reprend ensuite puis renvoie la valeur de résolution.<br>
- <br>
- Le mot-clé <code>await</code> est uniquement valide au sein des fonctions asynchrones. Si ce mot-clé est utilisé en dehors du corps d'une fonction asynchrone, cela provoquera une exception {{jsxref("SyntaxError")}}.</p>
-
-<div class="blockIndicator note">
-<p><strong>Note :</strong> Lorsqu'une fonction aysnchrone est mise en pause, la fonction appelante continue son exécution (car elle a reçu la promesse implicite renvoyée par la fonction <code>async</code>).</p>
-</div>
-
-<div class="note">
-<p><strong>Note :</strong> Le but des fonctions <code>async</code>/<code>await</code> est de simplifier l'utilisation synchrone des promesses et d'opérer sur des groupes de promesses. De la même façon que les promesses sont semblables à des <em>callbacks</em> structurés, <code>async</code>/<code>await</code> est semblable à la combinaison des générateurs et des promesses.</p>
-</div>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Exemple_simple">Exemple simple</h3>
-
-<pre class="brush: js">var resolveAfter2Seconds = function() {
-  console.log("Initialisation de la promesse lente");
-  return new Promise(resolve =&gt; {
-    setTimeout(function() {
-      resolve("lente");
-      console.log("La promesse lente est terminée");
-    }, 2000);
-  });
-};
-
-var resolveAfter1Second = function() {
-  console.log("Initialisation de la promesse rapide");
-  return new Promise(resolve =&gt; {
-    setTimeout(function() {
-      resolve("rapide");
-      console.log("La promesse rapide est terminée");
-    }, 1000);
-  });
-};
-
-var sequentialStart = async function() {
-  console.log('==Début séquentiel==');
-
-  // 1. L'exécution atteint ce point quasi-instantanément
-  const lente = await resolveAfter2Seconds();
-  console.log(lente); // 2. cela s'exécute 2s après 1.
-
-  const rapide = await resolveAfter1Second();
-  console.log(rapide); // 3. cela s'exécute 3s après 1.
-}
-
-var concurrentStart = async function() {
-  console.log('==Début concurrentiel avec await==');
-  const lente = resolveAfter2Seconds(); // le minuteur démarre immédiatement
-  const rapide = resolveAfter1Second();  // le minuteur démarre immédiatement
-
-  // 1. L'exécution atteint ce point quasi-instantanément
-  console.log(await lente); // 2. s'exécute 2s après 1.
-  console.log(await rapide); // 3. s'exécute 2s après 1., immédiatement après 2.,
-                             // car "rapide" est déjà résolue
-}
-
-var concurrentPromise = function() {
-  console.log('==Début concurrentiel avec Promise.all==');
-  return Promise.all([resolveAfter2Seconds(), resolveAfter1Second()]).then((messages) =&gt; {
-    console.log(messages[0]); // lente
-    console.log(messages[1]); // rapide
-  });
-}
-
-var parallel = async function() {
-  console.log('==Exécution parallèle avec await Promise.all==');
-
-  // Démarre 2 tâches en parallèle et on attend que les deux soient finies
-  await Promise.all([
-      (async()=&gt;console.log(await resolveAfter2Seconds()))(),
-      (async()=&gt;console.log(await resolveAfter1Second()))()
-  ]);
-}
-
-// Cette fonction ne gère pas les erreurs
-// voir les avertissement ci-après !
-var parallelPromise = function() {
-  console.log('==Exécution parallèle avec Promise.then==');
-  resolveAfter2Seconds().then((message)=&gt;console.log(message));
-  resolveAfter1Second().then((message)=&gt;console.log(message));
-}
-
-sequentialStart(); // après 2 secondes, "lente" est affichée, après une
-                   // autre seconde, c'est "rapide" qui est affichée
-
-// on attend que l'étape précédente soit terminée
-setTimeout(concurrentStart, 4000); // 2s avant d'afficher "lente" puis "rapide"
-
-// on attend à nouveau
-setTimeout(concurrentPromise, 7000); // identique à concurrentStart
-
-// on attend à nouveau
-setTimeout(parallel, 10000); // réellement parallele : après 1 seconde,
-                             // affiche "rapide" et après une autre seconde
-                             // affiche "lente"
-
-// on attend à nouveau
-setTimeout(parallelPromise, 13000); // identique à parallel
-</pre>
-
-<h4 id="await_et_lexécution_parallèle"><code>await</code> et l'exécution parallèle</h4>
-
-<p>Dans <code>sequentialStart</code>, l'exécution est arrêtée pendant deux secondes avant le premier <code>await</code> puis encore une autre seconde avant le deuxième <code>await</code>. Le deuxième minuteur n'est pas créé tant que le premier n'est pas écoulé. Le code s'exécute donc au moins en 3 secondes.</p>
-
-<p>Avec <code>concurrentStart</code>, les deux minuteurs sont créés puis attendus derrière un <code>await</code> Les minuteurs sont exécutés de façon concurrente. L'ensemble du code se termine donc en au moins 2 secondes plutôt qu'en 3 secondes.<br>
- Toutefois, les appels utilisant  <code>await</code> sont exécutés séquentiellement et la deuxième instruction avec <code>await</code> attendra que la première ait été  traitée. Le minuteur le plus rapide est donc créé juste après le premier.</p>
-
-<p>Si on souhaite avoir deux tâches qui s'exécutent réellement en parallèle, on pourra utiliser  <code>await Promise.all([job1(), job2()])</code> comme illustré ci-avant avec <code>parallel</code>.</p>
-
-<h4 id="asyncawait_Promise.prototype.then_et_la_gestion_des_erreurs"><code>async</code>/<code>await</code>, <code>Promise.prototype.then()</code> et la gestion des erreurs</h4>
-
-<p>La plupart des fonctions asynchrones peuvent être écrites avec des promesses. Toutefois, les fonctions asynchrones qui utilisent <code>async</code> se prêtent mieux à la gestion des erreurs.</p>
-
-<p><code>concurrentStart</code> et <code>concurrentPromise</code> sont fonctionnellement équivalentes.<br>
- Avec <code>concurrentStart</code>, si l'un des deux appels échoue, l'exception sera immédiatement interceptée et l'exécution de la fonction asynchrone sera interrompue. L'erreur sera propagée à la fonction appelante via la valeur de retour qui est une promesse implicite.<br>
- Pour obtenir les mêmes sécurités avec les promesses, il faut s'assurer que la fonction renvoie une promesse qui gère ce cas d'échec. Pour <code>concurrentPromise</code> cela signifie qu'il faut renvoyer la promesse de <code>Promise.all([]).then()</code>.</p>
-
-<p>Bien entendu, il est toutefois possible d'avoir des fonctions asynchrones (avec <code>async</code>) qui gobent des erreurs involontairement. Si on considère la fonction <code>parallel</code> ci-avant, s'il n'y avait eu aucun <code>await</code> ou <code>return</code> pour le résultat de <code>Promise.all([])</code>, aucune erreur n'aurait été propagée.<br>
- Bien que l'exemple <code>parallelPromise</code> paraisse simple, il ne gère aucune erreur du tout. Il aurait fallu utiliser un <code>return </code><code>Promise.all([])</code> analogue.</p>
-
-<h3 id="Réécrire_une_chaîne_de_promesses_avec_une_fonction_asynchrone">Réécrire une chaîne de promesses avec une fonction asynchrone</h3>
-
-<p>Lorsqu'on utilise une API qui renvoie des promesses ({{jsxref("Promise")}}), on construit une chaîne de promesses et on divise la fonction en de nombreuses branches :</p>
-
-<pre class="brush: js">function getProcessedData(url) {
-  return downloadData(url) // renvoie une promesse
-    .catch(e =&gt; {
-      return downloadFallbackData(url);  // renvoie une promesse
-    })
-    .then(v =&gt; {
-      return processDataInWorker(v); // renvoie une promesse
-    });
-}
-</pre>
-
-<p>Cela peut être réécrit avec une seule fonction asynchrone, de la façon suivante :</p>
-
-<pre class="brush: js">async function getProcessedData(url) {
-  let v;
-  try {
-    v = await downloadData(url);
-  } catch(e) {
-    v = await downloadFallbackData(url);
-  }
-  return processDataInWorker(v);
-}
-</pre>
-
-<p>On voit dans l'exemple précédent qu'il n'y a pas de <code>await</code> pour l'instruction <code>return</code> car la valeur de retour d'une fonction asynchrone est implicitement enveloppée dans un appel à {{jsxref("Promise.resolve")}}.</p>
-
-<h3 id="Différences_entre_return_et_return_await">Différences entre <code>return</code> et <code>return await</code></h3>
-
-<p>La conversion automatique des valeurs en promesses avec {{jsxref("Promise.resolve")}} ne signifie pas que <code>return await valeurPromesse</code> sera équivalent à <code>return valeurPromesse</code>.</p>
-
-<p>Si on reprend l'exemple précédent et qu'on le réécrit avec <code>return await</code> et qu'on intercepte une éventuelle erreur de la promesse :</p>
-
-<pre class="brush: js">async function getProcessedData(url) {
-  let v;
-  try {
-     v = await downloadData(url);
-  } catch(e) {
-    v = await downloadFallbackData(url);
-  }
-  try {
-    return await processDataInWorker(v); // et non plus simplement return
-  } catch(e) {
-    return null;
-  }
-}</pre>
-
-<p>Si on avait simplement écrit <code>return processDataInWorker(v);</code>, la promesse renvoyée par la fonction aurait déclenché une exception plutôt que d'être résolue avec la valeur <code>null</code>.</p>
-
-<p>Lorsqu'on utilise <code>return toto;</code>, la valeur <code>toto</code> sera immédiatement renvoyée (sans lever d'exception, quel que soit le cas), tandis que <code>return await toto;</code> attendra la résolution de <code>toto</code> ou son échec et lèvera une exception si besoin <strong>avant de parvenir à renvoyer une valeur</strong>.</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-async-function-definitions', 'async function')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES8', '#sec-async-function-definitions', 'async function')}}</td>
-   <td>{{Spec2('ES8')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.statements.async_function")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Operators/async_function", "async function expression")}}</li>
- <li>{{jsxref("AsyncFunction")}} object</li>
- <li>{{jsxref("Operators/await", "await")}}</li>
- <li><a href="http://innolitics.com/10x/javascript-decorators-for-promise-returning-functions/">Créer des décorateurs asynchrones en JavaScript (billet en anglais sur innolitics.com)</a></li>
-</ul>
diff --git a/files/fr/web/javascript/reference/statements/async_function/index.md b/files/fr/web/javascript/reference/statements/async_function/index.md
new file mode 100644
index 0000000000..4c068e174e
--- /dev/null
+++ b/files/fr/web/javascript/reference/statements/async_function/index.md
@@ -0,0 +1,235 @@
+---
+title: async function
+slug: Web/JavaScript/Reference/Statements/async_function
+tags:
+  - Experimental
+  - Function
+  - Instruction
+  - JavaScript
+  - Reference
+translation_of: Web/JavaScript/Reference/Statements/async_function
+original_slug: Web/JavaScript/Reference/Instructions/async_function
+---
+{{jsSidebar("Statements")}}
+
+La déclaration **`async function`** définit une fonction asynchrone qui renvoie un objet {{jsxref("Objets_globaux/AsyncFunction","AsyncFunction")}}. Une fonction asynchrone est une fonction qui s'exécute de façon asynchrone grâce à la boucle d'évènement en utilisant une promesse ({{jsxref("Promise")}}) comme valeur de retour.
+
+On peut également définir des fonctions asynchrones grâce au constructeur {{jsxref("AsyncFunction")}} et via une {{jsxref("Opérateurs/async_function", "expression de fonction asynchrone","",1)}}.
+
+{{EmbedInteractiveExample("pages/js/statement-async.html", "taller")}}
+
+## Syntaxe
+
+    async function name([param[, param[, ... param]]]) {
+       instructions
+    }
+
+### Paramètres
+
+- `name`
+  - : Le nom de la fonction.
+- `param`
+  - : Le nom d'un argument à passer à la fonction.
+- `instructions`
+  - : Les instructions qui composent le corps de la fonction.
+
+### Valeur de retour
+
+Une promesse ({{jsxref("Promise")}}) qui sera résolue avec la valeur renvoyée par la fonction asynchrone ou qui sera rompue s'il y a une exception non interceptée émise depuis la fonction asynchrone.
+
+## Description
+
+Une fonction `async` peut contenir une expression {{jsxref("Opérateurs/await", "await")}} qui interrompt l'exécution de la fonction asynchrone et attend la résolution de la promesse passée `Promise`. La fonction asynchrone reprend ensuite puis renvoie la valeur de résolution.
+
+Le mot-clé `await` est uniquement valide au sein des fonctions asynchrones. Si ce mot-clé est utilisé en dehors du corps d'une fonction asynchrone, cela provoquera une exception {{jsxref("SyntaxError")}}.
+
+> **Note :** Lorsqu'une fonction aysnchrone est mise en pause, la fonction appelante continue son exécution (car elle a reçu la promesse implicite renvoyée par la fonction `async`).
+
+> **Note :** Le but des fonctions `async`/`await` est de simplifier l'utilisation synchrone des promesses et d'opérer sur des groupes de promesses. De la même façon que les promesses sont semblables à des _callbacks_ structurés, `async`/`await` est semblable à la combinaison des générateurs et des promesses.
+
+## Exemples
+
+### Exemple simple
+
+```js
+var resolveAfter2Seconds = function() {
+  console.log("Initialisation de la promesse lente");
+  return new Promise(resolve => {
+    setTimeout(function() {
+      resolve("lente");
+      console.log("La promesse lente est terminée");
+    }, 2000);
+  });
+};
+
+var resolveAfter1Second = function() {
+  console.log("Initialisation de la promesse rapide");
+  return new Promise(resolve => {
+    setTimeout(function() {
+      resolve("rapide");
+      console.log("La promesse rapide est terminée");
+    }, 1000);
+  });
+};
+
+var sequentialStart = async function() {
+  console.log('==Début séquentiel==');
+
+  // 1. L'exécution atteint ce point quasi-instantanément
+  const lente = await resolveAfter2Seconds();
+  console.log(lente); // 2. cela s'exécute 2s après 1.
+
+  const rapide = await resolveAfter1Second();
+  console.log(rapide); // 3. cela s'exécute 3s après 1.
+}
+
+var concurrentStart = async function() {
+  console.log('==Début concurrentiel avec await==');
+  const lente = resolveAfter2Seconds(); // le minuteur démarre immédiatement
+  const rapide = resolveAfter1Second();  // le minuteur démarre immédiatement
+
+  // 1. L'exécution atteint ce point quasi-instantanément
+  console.log(await lente); // 2. s'exécute 2s après 1.
+  console.log(await rapide); // 3. s'exécute 2s après 1., immédiatement après 2.,
+                             // car "rapide" est déjà résolue
+}
+
+var concurrentPromise = function() {
+  console.log('==Début concurrentiel avec Promise.all==');
+  return Promise.all([resolveAfter2Seconds(), resolveAfter1Second()]).then((messages) => {
+    console.log(messages[0]); // lente
+    console.log(messages[1]); // rapide
+  });
+}
+
+var parallel = async function() {
+  console.log('==Exécution parallèle avec await Promise.all==');
+
+  // Démarre 2 tâches en parallèle et on attend que les deux soient finies
+  await Promise.all([
+      (async()=>console.log(await resolveAfter2Seconds()))(),
+      (async()=>console.log(await resolveAfter1Second()))()
+  ]);
+}
+
+// Cette fonction ne gère pas les erreurs
+// voir les avertissement ci-après !
+var parallelPromise = function() {
+  console.log('==Exécution parallèle avec Promise.then==');
+  resolveAfter2Seconds().then((message)=>console.log(message));
+  resolveAfter1Second().then((message)=>console.log(message));
+}
+
+sequentialStart(); // après 2 secondes, "lente" est affichée, après une
+                   // autre seconde, c'est "rapide" qui est affichée
+
+// on attend que l'étape précédente soit terminée
+setTimeout(concurrentStart, 4000); // 2s avant d'afficher "lente" puis "rapide"
+
+// on attend à nouveau
+setTimeout(concurrentPromise, 7000); // identique à concurrentStart
+
+// on attend à nouveau
+setTimeout(parallel, 10000); // réellement parallele : après 1 seconde,
+                             // affiche "rapide" et après une autre seconde
+                             // affiche "lente"
+
+// on attend à nouveau
+setTimeout(parallelPromise, 13000); // identique à parallel
+```
+
+#### `await` et l'exécution parallèle
+
+Dans `sequentialStart`, l'exécution est arrêtée pendant deux secondes avant le premier `await` puis encore une autre seconde avant le deuxième `await`. Le deuxième minuteur n'est pas créé tant que le premier n'est pas écoulé. Le code s'exécute donc au moins en 3 secondes.
+
+Avec `concurrentStart`, les deux minuteurs sont créés puis attendus derrière un `await` Les minuteurs sont exécutés de façon concurrente. L'ensemble du code se termine donc en au moins 2 secondes plutôt qu'en 3 secondes.
+Toutefois, les appels utilisant  `await` sont exécutés séquentiellement et la deuxième instruction avec `await` attendra que la première ait été  traitée. Le minuteur le plus rapide est donc créé juste après le premier.
+
+Si on souhaite avoir deux tâches qui s'exécutent réellement en parallèle, on pourra utiliser  `await Promise.all([job1(), job2()])` comme illustré ci-avant avec `parallel`.
+
+#### `async`/`await`, `Promise.prototype.then()` et la gestion des erreurs
+
+La plupart des fonctions asynchrones peuvent être écrites avec des promesses. Toutefois, les fonctions asynchrones qui utilisent `async` se prêtent mieux à la gestion des erreurs.
+
+`concurrentStart` et `concurrentPromise` sont fonctionnellement équivalentes.
+Avec `concurrentStart`, si l'un des deux appels échoue, l'exception sera immédiatement interceptée et l'exécution de la fonction asynchrone sera interrompue. L'erreur sera propagée à la fonction appelante via la valeur de retour qui est une promesse implicite.
+Pour obtenir les mêmes sécurités avec les promesses, il faut s'assurer que la fonction renvoie une promesse qui gère ce cas d'échec. Pour `concurrentPromise` cela signifie qu'il faut renvoyer la promesse de `Promise.all([]).then()`.
+
+Bien entendu, il est toutefois possible d'avoir des fonctions asynchrones (avec `async`) qui gobent des erreurs involontairement. Si on considère la fonction `parallel` ci-avant, s'il n'y avait eu aucun `await` ou `return` pour le résultat de `Promise.all([])`, aucune erreur n'aurait été propagée.
+Bien que l'exemple `parallelPromise` paraisse simple, il ne gère aucune erreur du tout. Il aurait fallu utiliser un ` return ``Promise.all([])` analogue.
+
+### Réécrire une chaîne de promesses avec une fonction asynchrone
+
+Lorsqu'on utilise une API qui renvoie des promesses ({{jsxref("Promise")}}), on construit une chaîne de promesses et on divise la fonction en de nombreuses branches :
+
+```js
+function getProcessedData(url) {
+  return downloadData(url) // renvoie une promesse
+    .catch(e => {
+      return downloadFallbackData(url);  // renvoie une promesse
+    })
+    .then(v => {
+      return processDataInWorker(v); // renvoie une promesse
+    });
+}
+```
+
+Cela peut être réécrit avec une seule fonction asynchrone, de la façon suivante :
+
+```js
+async function getProcessedData(url) {
+  let v;
+  try {
+    v = await downloadData(url);
+  } catch(e) {
+    v = await downloadFallbackData(url);
+  }
+  return processDataInWorker(v);
+}
+```
+
+On voit dans l'exemple précédent qu'il n'y a pas de `await` pour l'instruction `return` car la valeur de retour d'une fonction asynchrone est implicitement enveloppée dans un appel à {{jsxref("Promise.resolve")}}.
+
+### Différences entre `return` et `return await`
+
+La conversion automatique des valeurs en promesses avec {{jsxref("Promise.resolve")}} ne signifie pas que `return await valeurPromesse` sera équivalent à `return valeurPromesse`.
+
+Si on reprend l'exemple précédent et qu'on le réécrit avec `return await` et qu'on intercepte une éventuelle erreur de la promesse :
+
+```js
+async function getProcessedData(url) {
+  let v;
+  try {
+     v = await downloadData(url);
+  } catch(e) {
+    v = await downloadFallbackData(url);
+  }
+  try {
+    return await processDataInWorker(v); // et non plus simplement return
+  } catch(e) {
+    return null;
+  }
+}
+```
+
+Si on avait simplement écrit `return processDataInWorker(v);`, la promesse renvoyée par la fonction aurait déclenché une exception plutôt que d'être résolue avec la valeur `null`.
+
+Lorsqu'on utilise `return toto;`, la valeur `toto` sera immédiatement renvoyée (sans lever d'exception, quel que soit le cas), tandis que `return await toto;` attendra la résolution de `toto` ou son échec et lèvera une exception si besoin **avant de parvenir à renvoyer une valeur**.
+
+## Spécifications
+
+| Spécification                                                                                        | État                         | Commentaires         |
+| ---------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName('ESDraft', '#sec-async-function-definitions', 'async function')}} | {{Spec2('ESDraft')}} |                      |
+| {{SpecName('ES8', '#sec-async-function-definitions', 'async function')}}     | {{Spec2('ES8')}}         | Définition initiale. |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.statements.async_function")}}
+
+## Voir aussi
+
+- {{jsxref("Operators/async_function", "async function expression")}}
+- {{jsxref("AsyncFunction")}} object
+- {{jsxref("Operators/await", "await")}}
+- [Créer des décorateurs asynchrones en JavaScript (billet en anglais sur innolitics.com)](http://innolitics.com/10x/javascript-decorators-for-promise-returning-functions/)
diff --git a/files/fr/web/javascript/reference/statements/block/index.html b/files/fr/web/javascript/reference/statements/block/index.html
deleted file mode 100644
index 74780b7415..0000000000
--- a/files/fr/web/javascript/reference/statements/block/index.html
+++ /dev/null
@@ -1,117 +0,0 @@
----
-title: bloc
-slug: Web/JavaScript/Reference/Statements/block
-tags:
-  - JavaScript
-  - Language feature
-  - Reference
-  - Statement
-browser-compat: javascript.statements.block
-translation_of: Web/JavaScript/Reference/Statements/block
-original_slug: Web/JavaScript/Reference/Instructions/bloc
----
-<div>{{jsSidebar("Statements")}}</div>
-
-<p>Une <strong>instruction de bloc</strong> est utilisée afin de grouper zéro ou plusieurs instructions. Le bloc est délimité par une paire d'accolades. On peut éventuellement « étiqueter » un bloc avec un <a href="/fr/docs/Web/JavaScript/Reference/Statements/label">label</a>.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/statement-block.html", "taller")}}</div>
-
-<h2 id="syntax">Syntaxe</h2>
-
-<h3 id="block_statement">Instruction de bloc</h3>
-
-<pre class="brush: js">{
-  <em>instruction_1</em>;
-  <em>instruction_2</em>;
-  ...
-  <em>instruction_n</em>;
-}
-</pre>
-
-<h3 id="labelled_block_statement">Instruction de bloc étiquetée</h3>
-
-<pre class="brush: js">// ou, avec une étiquette :
-label: {
-  <em>instruction_1</em>;
-  <em>instruction_2</em>;
-  ...
-  <em>instruction_n</em>;
-}
-</pre>
-
-<dl>
-  <dt><code>instruction_1</code>, <code>instruction_2</code>, <code>instruction_n</code></dt>
-  <dd>Les instructions qu'on souhaite regrouper au sein du bloc.</dd>
-  <dt><code>label</code> {{optional_inline}}</dt>
-  <dd>Une <a href="/fr/docs/Web/JavaScript/Reference/Statements/label">étiquette</a> qui permet une identification visuelle de la cible d'une instruction <code><a href="/fr/docs/Web/JavaScript/Reference/Statements/break">break</a></code>.</dd>
-</dl>
-
-<h2 id="description">Description</h2>
-
-<p>Cette instruction est le plus souvent utilisée avec les instructions de contrôle (ex. <a href="/fr/docs/Web/JavaScript/Reference/Statements/if...else"><code>if…else</code></a>, <a href="/fr/docs/Web/JavaScript/Reference/Statements/for"><code>for</code></a>, <a href="/fr/docs/Web/JavaScript/Reference/Statements/while"><code>while</code></a>). On verra ainsi :</p>
-
-<pre class="brush: js">while (x &lt; 10) {
-  x++;
-}
-</pre>
-
-<p>On peut voir dans cet exemple que cette instruction se termine sans point-virgule.</p>
-
-<p>L'instruction de bloc est souvent appelée <strong>instruction composée (<em>compound statement</em>)</strong> dans d'autres langages. En effet, elle permet d'utiliser plusieurs instructions là où JavaScript n'attend qu'une instruction. C'est une pratique courante que de combiner plusieurs instructions grâce aux blocs. À l'opposé, on peut utiliser une <a href="/fr/docs/Web/JavaScript/Reference/Statements/Empty">instruction vide</a> pour ne rien faire là où JavaScript attend une instruction.</p>
-
-<h2 id="examples">Exemples</h2>
-
-<h3 id="block_scoping_rules_with_var_or_function_declaration_in_non-strict_mode">Règles de portée pour var ou les déclarations de fonction en mode non-strict</h3>
-
-<p>Les variables déclarées avec <code>var</code> ou créées avec <a href="/fr/docs/Web/JavaScript/Reference/Statements/function">une déclaration de fonction</a> en mode non-strict <strong>n'ont pas une portée limitée au bloc</strong>. Les variables introduites dans un bloc auront la portée de la fonction ou du script englobant ce bloc. Les variables pourront alors être utilisées en dehors du bloc. Autrement dit, une instruction de bloc n'introduit pas une portée :</p>
-
-<pre class="brush: js example-bad">var x = 1;
-{
-  var x = 2;
-}
-console.log(x); // affiche 2 dans la console
-</pre>
-
-<p>On voit 2 dans la console, car l'instruction <code>var x</code> contenue dans le bloc appartient à la même portée que l'instruction <code>var x</code> située avant le bloc.</p>
-
-<p>En mode non-strict, les déclarations de fonction à l'intérieur des blocs peuvent se comporter étrangement, il est déconseillé de les utiliser.</p>
-
-<h3 id="block_scoping_rules_with_let_const_or_function_declaration_in_strict_mode">Règles de portée pour let, const ou les déclarations de fonction en mode strict</h3>
-
-<p>En revanche, les identifiants déclarés avec <a href="/fr/docs/Web/JavaScript/Reference/Statements/let"><code>let</code></a> et <a href="/fr/docs/Web/JavaScript/Reference/Statements/const"><code>const</code></a> <strong>possèdent une portée limitée au bloc</strong> :</p>
-
-<pre class="brush: js">let x = 1;
-{
-  let x = 2;
-}
-console.log(x); // affiche 1 dans la console</pre>
-
-<p>L'instruction <code>x = 2</code> est limitée à la portée du bloc dans laquelle elle est présente.</p>
-
-<p>Il en va de même pour <code>const</code>:</p>
-
-<pre class="brush: js">const c = 1;
-{
-  const c = 2;
-}
-console.log(c); // affiche 1, ne déclenche pas de SyntaxError</pre>
-
-<p>L'instruction <code>const c = 2</code> <em>ne déclenche pas</em> <code>SyntaxError: Identifier 'c' has already been declared</code>, car cet identifiant est bien unique pour ce bloc.</p>
-
-<p>En <a href="/fr/docs/Web/JavaScript/Reference/Strict_mode">mode strict</a>, à partir de ES2015, les fonctions à l'intérieur des blocs ont une portée qui correspond à ce bloc. Avant ES2015, les fonctions de bloc étaient interdites.</p>
-
-<h2 id="specifications">Spécifications</h2>
-
-<p>{{Specifications}}</p>
-
-<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
-
-<p>{{Compat}}</p>
-
-<h2 id="see_also">Voir aussi</h2>
-
-<ul>
-  <li><a href="/fr/docs/Web/JavaScript/Reference/Statements/while" ><code>while</code></a></li>
-  <li><a href="/fr/docs/Web/JavaScript/Reference/Statements/if...else" ><code>if...else</code></a></li>
-  <li><a href="/fr/docs/Web/JavaScript/Reference/Statements/let" ><code>let</code></a></li>
-</ul>
diff --git a/files/fr/web/javascript/reference/statements/block/index.md b/files/fr/web/javascript/reference/statements/block/index.md
new file mode 100644
index 0000000000..b2ad423120
--- /dev/null
+++ b/files/fr/web/javascript/reference/statements/block/index.md
@@ -0,0 +1,121 @@
+---
+title: bloc
+slug: Web/JavaScript/Reference/Statements/block
+tags:
+  - JavaScript
+  - Language feature
+  - Reference
+  - Statement
+translation_of: Web/JavaScript/Reference/Statements/block
+original_slug: Web/JavaScript/Reference/Instructions/bloc
+browser-compat: javascript.statements.block
+---
+{{jsSidebar("Statements")}}
+
+Une **instruction de bloc** est utilisée afin de grouper zéro ou plusieurs instructions. Le bloc est délimité par une paire d'accolades. On peut éventuellement « étiqueter » un bloc avec un [label](/fr/docs/Web/JavaScript/Reference/Statements/label).
+
+{{EmbedInteractiveExample("pages/js/statement-block.html", "taller")}}
+
+## Syntaxe
+
+### Instruction de bloc
+
+```js
+{
+  instruction_1;
+  instruction_2;
+  ...
+  instruction_n;
+}
+```
+
+### Instruction de bloc étiquetée
+
+```js
+// ou, avec une étiquette :
+label: {
+  instruction_1;
+  instruction_2;
+  ...
+  instruction_n;
+}
+```
+
+- `instruction_1`, `instruction_2`, `instruction_n`
+  - : Les instructions qu'on souhaite regrouper au sein du bloc.
+- `label` {{optional_inline}}
+  - : Une [étiquette](/fr/docs/Web/JavaScript/Reference/Statements/label) qui permet une identification visuelle de la cible d'une instruction [`break`](/fr/docs/Web/JavaScript/Reference/Statements/break).
+
+## Description
+
+Cette instruction est le plus souvent utilisée avec les instructions de contrôle (ex. [`if…else`](/fr/docs/Web/JavaScript/Reference/Statements/if...else), [`for`](/fr/docs/Web/JavaScript/Reference/Statements/for), [`while`](/fr/docs/Web/JavaScript/Reference/Statements/while)). On verra ainsi :
+
+```js
+while (x < 10) {
+  x++;
+}
+```
+
+On peut voir dans cet exemple que cette instruction se termine sans point-virgule.
+
+L'instruction de bloc est souvent appelée **instruction composée (_compound statement_)** dans d'autres langages. En effet, elle permet d'utiliser plusieurs instructions là où JavaScript n'attend qu'une instruction. C'est une pratique courante que de combiner plusieurs instructions grâce aux blocs. À l'opposé, on peut utiliser une [instruction vide](/fr/docs/Web/JavaScript/Reference/Statements/Empty) pour ne rien faire là où JavaScript attend une instruction.
+
+## Exemples
+
+### Règles de portée pour var ou les déclarations de fonction en mode non-strict
+
+Les variables déclarées avec `var` ou créées avec [une déclaration de fonction](/fr/docs/Web/JavaScript/Reference/Statements/function) en mode non-strict **n'ont pas une portée limitée au bloc**. Les variables introduites dans un bloc auront la portée de la fonction ou du script englobant ce bloc. Les variables pourront alors être utilisées en dehors du bloc. Autrement dit, une instruction de bloc n'introduit pas une portée :
+
+```js example-bad
+var x = 1;
+{
+  var x = 2;
+}
+console.log(x); // affiche 2 dans la console
+```
+
+On voit 2 dans la console, car l'instruction `var x` contenue dans le bloc appartient à la même portée que l'instruction `var x` située avant le bloc.
+
+En mode non-strict, les déclarations de fonction à l'intérieur des blocs peuvent se comporter étrangement, il est déconseillé de les utiliser.
+
+### Règles de portée pour let, const ou les déclarations de fonction en mode strict
+
+En revanche, les identifiants déclarés avec [`let`](/fr/docs/Web/JavaScript/Reference/Statements/let) et [`const`](/fr/docs/Web/JavaScript/Reference/Statements/const) **possèdent une portée limitée au bloc** :
+
+```js
+let x = 1;
+{
+  let x = 2;
+}
+console.log(x); // affiche 1 dans la console
+```
+
+L'instruction `x = 2` est limitée à la portée du bloc dans laquelle elle est présente.
+
+Il en va de même pour `const`:
+
+```js
+const c = 1;
+{
+  const c = 2;
+}
+console.log(c); // affiche 1, ne déclenche pas de SyntaxError
+```
+
+L'instruction `const c = 2` _ne déclenche pas_ `SyntaxError: Identifier 'c' has already been declared`, car cet identifiant est bien unique pour ce bloc.
+
+En [mode strict](/fr/docs/Web/JavaScript/Reference/Strict_mode), à partir de ES2015, les fonctions à l'intérieur des blocs ont une portée qui correspond à ce bloc. Avant ES2015, les fonctions de bloc étaient interdites.
+
+## Spécifications
+
+{{Specifications}}
+
+## Compatibilité des navigateurs
+
+{{Compat}}
+
+## Voir aussi
+
+- [`while`](/fr/docs/Web/JavaScript/Reference/Statements/while)
+- [`if...else`](/fr/docs/Web/JavaScript/Reference/Statements/if...else)
+- [`let`](/fr/docs/Web/JavaScript/Reference/Statements/let)
diff --git a/files/fr/web/javascript/reference/statements/break/index.html b/files/fr/web/javascript/reference/statements/break/index.html
deleted file mode 100644
index 95e5144230..0000000000
--- a/files/fr/web/javascript/reference/statements/break/index.html
+++ /dev/null
@@ -1,153 +0,0 @@
----
-title: break
-slug: Web/JavaScript/Reference/Statements/break
-tags:
-  - JavaScript
-  - Reference
-  - Statement
-translation_of: Web/JavaScript/Reference/Statements/break
-original_slug: Web/JavaScript/Reference/Instructions/break
----
-<div>{{jsSidebar("Statements")}}</div>
-
-<p>L'instruction <strong><code>break</code></strong> permet de terminer la boucle en cours ou l'instruction {{jsxref("Instructions/switch", "switch")}} ou {{jsxref("Instructions/label", "label")}} en cours et de passer le contrôle du programme à l'instruction suivant l'instruction terminée.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/statement-break.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><code>break [label];</code></pre>
-
-<dl>
- <dt><code>label</code> {{optional_inline}}</dt>
- <dd>Un identifiant optionnel associé avec l'étiquette (<em>label</em>) de l'instruction. Si l'instruction à terminer n'est pas une boucle ou une instruction {{jsxref("Instructions/switch", "switch")}}, ce paramètre est nécessaire.</dd>
-</dl>
-
-<h2 id="Description">Description</h2>
-
-<p>L'instruction <code>break</code> peut être utilisée avec une étiquette (<em>label</em>) optionnelle qui permet d'interrompre une instruction étiquetée. L'instruction <code>break</code> doit être imbriquée au sein de l'instruction référencée. L'instruction étiquetée peut correspondre à n'importe quel instruction de {{jsxref("Instructions/bloc", "bloc","",1)}} ; il n'est pas nécessaire qu'elle soit précédée par une instruction de boucle.</p>
-
-<p>Une instruction <code>break</code>, suivie ou non d'une étiquette, ne peut pas être utilisée dans le corps d'une fonction appartenant elle-même à une boucle, à une instruction {{jsxref("Instructions/switch")}} ou à une instruction <code>label</code>.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Exemple_simple_utilisant_break">Exemple simple utilisant <code>break</code></h3>
-
-<p>La fonction qui suit utilise une instruction <code>break</code> qui interrompt la boucle {{jsxref("Instructions/while", "while")}} lorsque <code>i</code> vaut 3, grâce à l'instruction qui suit, la fonction renvoie 3 * <code>x</code>.</p>
-
-<pre class="brush:js">function testBreak(x) {
-   var i = 0;
-
-   while (i &lt; 6) {
-      if (i == 3) {
-         break;
-      }
-      i += 1;
-   }
-   return i * x;
-}</pre>
-
-<h3 id="Utiliser_break_avec_les_labels">Utiliser <code>break</code> avec les labels</h3>
-
-<p>Dans le code suivant, on utilise les instructions <code>break</code> avec des blocs étiquetés. Une instruction <code>break</code> doit être présente à l'intérieur du bloc auquel elle fait référence. Ici, on voit que <code>bloc_interne</code> est compris dans <code>bloc_externe</code>.</p>
-
-<pre class="brush:js">bloc_externe: {
-
-  bloc_interne: {
-    console.log ('1');
-    break bloc_externe;  // interrompt bloc_externe ET bloc_interne
-    console.log (':-('); // ignoré
-  }
-
-  console.log ('2');     // ignoré
-}
-</pre>
-
-<p>Dans le code qui suit, on utilise également des instructions <code>break</code> avec des blocs étiquetés mais on obtient une exception <code>SyntaxError</code> car l'instruction <code>break</code> au sein de <code>bloc_1</code> référence <code>bloc_2</code>, or <code>bloc_1</code> n'est pas compris dans <code>bloc_2</code> :</p>
-
-<pre class="brush:js">bloc_1: {
-  console.log ('1');
-  break bloc_2;  // SyntaxError: label not found
-}
-
-bloc_2: {
-  console.log ('2');
-}
-</pre>
-
-<h3 id="Utiliser_break_dans_des_fonctions_imbriquées_dans_des_boucles">Utiliser <code>break</code> dans des fonctions imbriquées dans des boucles</h3>
-
-<p>Dans le cas d'une fonction imbriquée dans une boucle <code>while</code> :</p>
-
-<pre class="brush: js">function testBreak(x){
-  var i = 0;
-  while (i &lt; 6) {
-    if (i === 3) {
-      (function() {
-        break;
-      })();
-    }
-    i += 1;
-  }
-  return i * x;
-}
-
-testBreak(1); // SyntaxError: Illegal break statement</pre>
-
-<p>Dans le cas d'une fonction imbriquée dans une instruction <code>label</code> :</p>
-
-<pre class="brush: js">bloc_1: {
-  console.log('1');
-  (function() {
-    break bloc_1; // SyntaxError: Undefined label 'bloc_1'
-  })();
-}</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES1')}}</td>
-   <td>{{Spec2('ES1')}}</td>
-   <td>Définition initiale. Version non étiquetée.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES3')}}</td>
-   <td>{{Spec2('ES3')}}</td>
-   <td>Version étiquetée ajoutée.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-12.8', 'instruction break')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-break-statement', 'instruction break')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-break-statement', 'Break statement')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.statements.break")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Instructions/continue", "continue")}}</li>
- <li>{{jsxref("Instructions/label", "label")}}</li>
- <li>{{jsxref("Instructions/switch", "switch")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/statements/break/index.md b/files/fr/web/javascript/reference/statements/break/index.md
new file mode 100644
index 0000000000..56826770a7
--- /dev/null
+++ b/files/fr/web/javascript/reference/statements/break/index.md
@@ -0,0 +1,130 @@
+---
+title: break
+slug: Web/JavaScript/Reference/Statements/break
+tags:
+  - JavaScript
+  - Reference
+  - Statement
+translation_of: Web/JavaScript/Reference/Statements/break
+original_slug: Web/JavaScript/Reference/Instructions/break
+---
+{{jsSidebar("Statements")}}
+
+L'instruction **`break`** permet de terminer la boucle en cours ou l'instruction {{jsxref("Instructions/switch", "switch")}} ou {{jsxref("Instructions/label", "label")}} en cours et de passer le contrôle du programme à l'instruction suivant l'instruction terminée.
+
+{{EmbedInteractiveExample("pages/js/statement-break.html")}}
+
+## Syntaxe
+
+    break [label];
+
+- `label` {{optional_inline}}
+  - : Un identifiant optionnel associé avec l'étiquette (_label_) de l'instruction. Si l'instruction à terminer n'est pas une boucle ou une instruction {{jsxref("Instructions/switch", "switch")}}, ce paramètre est nécessaire.
+
+## Description
+
+L'instruction `break` peut être utilisée avec une étiquette (_label_) optionnelle qui permet d'interrompre une instruction étiquetée. L'instruction `break` doit être imbriquée au sein de l'instruction référencée. L'instruction étiquetée peut correspondre à n'importe quel instruction de {{jsxref("Instructions/bloc", "bloc","",1)}} ; il n'est pas nécessaire qu'elle soit précédée par une instruction de boucle.
+
+Une instruction `break`, suivie ou non d'une étiquette, ne peut pas être utilisée dans le corps d'une fonction appartenant elle-même à une boucle, à une instruction {{jsxref("Instructions/switch")}} ou à une instruction `label`.
+
+## Exemples
+
+### Exemple simple utilisant `break`
+
+La fonction qui suit utilise une instruction `break` qui interrompt la boucle {{jsxref("Instructions/while", "while")}} lorsque `i` vaut 3, grâce à l'instruction qui suit, la fonction renvoie 3 \* `x`.
+
+```js
+function testBreak(x) {
+   var i = 0;
+
+   while (i < 6) {
+      if (i == 3) {
+         break;
+      }
+      i += 1;
+   }
+   return i * x;
+}
+```
+
+### Utiliser `break` avec les labels
+
+Dans le code suivant, on utilise les instructions `break` avec des blocs étiquetés. Une instruction `break` doit être présente à l'intérieur du bloc auquel elle fait référence. Ici, on voit que `bloc_interne` est compris dans `bloc_externe`.
+
+```js
+bloc_externe: {
+
+  bloc_interne: {
+    console.log ('1');
+    break bloc_externe;  // interrompt bloc_externe ET bloc_interne
+    console.log (':-('); // ignoré
+  }
+
+  console.log ('2');     // ignoré
+}
+```
+
+Dans le code qui suit, on utilise également des instructions `break` avec des blocs étiquetés mais on obtient une exception `SyntaxError` car l'instruction `break` au sein de `bloc_1` référence `bloc_2`, or `bloc_1` n'est pas compris dans `bloc_2` :
+
+```js
+bloc_1: {
+  console.log ('1');
+  break bloc_2;  // SyntaxError: label not found
+}
+
+bloc_2: {
+  console.log ('2');
+}
+```
+
+### Utiliser `break` dans des fonctions imbriquées dans des boucles
+
+Dans le cas d'une fonction imbriquée dans une boucle `while` :
+
+```js
+function testBreak(x){
+  var i = 0;
+  while (i < 6) {
+    if (i === 3) {
+      (function() {
+        break;
+      })();
+    }
+    i += 1;
+  }
+  return i * x;
+}
+
+testBreak(1); // SyntaxError: Illegal break statement
+```
+
+Dans le cas d'une fonction imbriquée dans une instruction `label` :
+
+```js
+bloc_1: {
+  console.log('1');
+  (function() {
+    break bloc_1; // SyntaxError: Undefined label 'bloc_1'
+  })();
+}
+```
+
+## Spécifications
+
+| Spécification                                                                            | Statut                       | Commentaires                                |
+| ---------------------------------------------------------------------------------------- | ---------------------------- | ------------------------------------------- |
+| {{SpecName('ES1')}}                                                                 | {{Spec2('ES1')}}         | Définition initiale. Version non étiquetée. |
+| {{SpecName('ES3')}}                                                                 | {{Spec2('ES3')}}         | Version étiquetée ajoutée.                  |
+| {{SpecName('ES5.1', '#sec-12.8', 'instruction break')}}                 | {{Spec2('ES5.1')}}     |                                             |
+| {{SpecName('ES6', '#sec-break-statement', 'instruction break')}}     | {{Spec2('ES6')}}         |                                             |
+| {{SpecName('ESDraft', '#sec-break-statement', 'Break statement')}} | {{Spec2('ESDraft')}} |                                             |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.statements.break")}}
+
+## Voir aussi
+
+- {{jsxref("Instructions/continue", "continue")}}
+- {{jsxref("Instructions/label", "label")}}
+- {{jsxref("Instructions/switch", "switch")}}
diff --git a/files/fr/web/javascript/reference/statements/class/index.html b/files/fr/web/javascript/reference/statements/class/index.html
deleted file mode 100644
index f88cd3f9b3..0000000000
--- a/files/fr/web/javascript/reference/statements/class/index.html
+++ /dev/null
@@ -1,113 +0,0 @@
----
-title: class
-slug: Web/JavaScript/Reference/Statements/class
-tags:
-  - Classes
-  - ECMAScript 2015
-  - Instruction
-  - JavaScript
-  - Reference
-translation_of: Web/JavaScript/Reference/Statements/class
-original_slug: Web/JavaScript/Reference/Instructions/class
----
-<div>{{jsSidebar("Statements")}}</div>
-
-<p>La <strong>déclaration class</strong> crée une nouvelle classe avec le nom fourni en utilisant l'héritage à base de prototypes pour émuler le fonctionnement de classe.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/statement-class.html")}}</div>
-
-
-
-<p>Il est aussi possible de définir une classe avec une {{jsxref("Opérateurs/class", "expression class","",1)}}.</p>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">class <em>nom</em> [extends]{
-  // corps de la classe
-}
-</pre>
-
-<h2 id="Description">Description</h2>
-
-<p>Les déclarations qui composent le corps de la classe sont exécutées en <a href="/fr/docs/Web/JavaScript/Reference/Strict_mode">mode strict</a>. La propriété du constructeur est optionnelle.</p>
-
-<p>Les déclarations utilisées dans les classes ne sont pas remontées (<em>hoisted</em>) (à la différence des <a href="/fr/docs/Web/JavaScript/Reference/Instructions/function">déclarations de fonctions</a>).</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Déclarer_une_classe_simple">Déclarer une classe simple</h3>
-
-<p>Dans l'exemple qui suit, on définit une classe <code>Polygone</code> pour laquelle on crée un sous-classe <code>Carré</code>. On note ici que la méthode <code>super()</code> ne peut être utilisée qu'au sein d'un constructeur et doit être appelée avant l'utilisation du mot-clé <code>this</code>.</p>
-
-<pre class="brush: js">class Polygone {
-  constructor(hauteur, largeur) {
-    this.nom = 'Polygone';
-    this.hauteur = hauteur;
-    this.largeur = largeur;
-  }
-}
-
-class Carré extends Polygone {
-  constructor(longueur) {
-    super(longueur,longueur);
-    this.nom = 'Carré';
-  }
-}
-</pre>
-
-<div class="warning">
-<p><strong>Attention :</strong> Déclarer une classe deux fois lèvera une exception <code>SyntaxError</code>. De même, on ne pourra pas réutiliser un nom qui a déjà été utilisé dans une expression de classe.</p>
-
-<pre class="brush: js">// Deux déclarations avec le même nom
-class Toto {};
-class Toto {}; // Uncaught SyntaxError: Identifier 'Toto' has already been declared
-
-// Expression puis déclaration
-var Truc = class {};
-class Truc {}; // Uncaught TypeError: Identifier 'Truc' has already been declared
-</pre>
-</div>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-class-definitions', 'Définitions de classe')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2016', '#sec-class-definitions', 'Class definitions')}}</td>
-   <td>{{Spec2('ES2016')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2017', '#sec-class-definitions', 'Class definitions')}}</td>
-   <td>{{Spec2('ES2017')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-class-definitions', 'Définitions de classe')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.statements.class")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/JavaScript/Reference/Instructions/function">Les déclarations <code>function</code></a></li>
- <li><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/class">Les expressions <code>class</code></a></li>
- <li><a href="/fr/docs/Web/JavaScript/Reference/Classes">Les classes</a></li>
-</ul>
diff --git a/files/fr/web/javascript/reference/statements/class/index.md b/files/fr/web/javascript/reference/statements/class/index.md
new file mode 100644
index 0000000000..51b852a022
--- /dev/null
+++ b/files/fr/web/javascript/reference/statements/class/index.md
@@ -0,0 +1,85 @@
+---
+title: class
+slug: Web/JavaScript/Reference/Statements/class
+tags:
+  - Classes
+  - ECMAScript 2015
+  - Instruction
+  - JavaScript
+  - Reference
+translation_of: Web/JavaScript/Reference/Statements/class
+original_slug: Web/JavaScript/Reference/Instructions/class
+---
+{{jsSidebar("Statements")}}
+
+La **déclaration class** crée une nouvelle classe avec le nom fourni en utilisant l'héritage à base de prototypes pour émuler le fonctionnement de classe.
+
+{{EmbedInteractiveExample("pages/js/statement-class.html")}}
+
+Il est aussi possible de définir une classe avec une {{jsxref("Opérateurs/class", "expression class","",1)}}.
+
+## Syntaxe
+
+    class nom [extends]{
+      // corps de la classe
+    }
+
+## Description
+
+Les déclarations qui composent le corps de la classe sont exécutées en [mode strict](/fr/docs/Web/JavaScript/Reference/Strict_mode). La propriété du constructeur est optionnelle.
+
+Les déclarations utilisées dans les classes ne sont pas remontées (_hoisted_) (à la différence des [déclarations de fonctions](/fr/docs/Web/JavaScript/Reference/Instructions/function)).
+
+## Exemples
+
+### Déclarer une classe simple
+
+Dans l'exemple qui suit, on définit une classe `Polygone` pour laquelle on crée un sous-classe `Carré`. On note ici que la méthode `super()` ne peut être utilisée qu'au sein d'un constructeur et doit être appelée avant l'utilisation du mot-clé `this`.
+
+```js
+class Polygone {
+  constructor(hauteur, largeur) {
+    this.nom = 'Polygone';
+    this.hauteur = hauteur;
+    this.largeur = largeur;
+  }
+}
+
+class Carré extends Polygone {
+  constructor(longueur) {
+    super(longueur,longueur);
+    this.nom = 'Carré';
+  }
+}
+```
+
+> **Attention :** Déclarer une classe deux fois lèvera une exception `SyntaxError`. De même, on ne pourra pas réutiliser un nom qui a déjà été utilisé dans une expression de classe.
+>
+> ```js
+> // Deux déclarations avec le même nom
+> class Toto {};
+> class Toto {}; // Uncaught SyntaxError: Identifier 'Toto' has already been declared
+>
+> // Expression puis déclaration
+> var Truc = class {};
+> class Truc {}; // Uncaught TypeError: Identifier 'Truc' has already been declared
+> ```
+
+## Spécifications
+
+| Spécification                                                                                        | État                         | Commentaires         |
+| ---------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName('ES2015', '#sec-class-definitions', 'Définitions de classe')}} | {{Spec2('ES2015')}}     | Définition initiale. |
+| {{SpecName('ES2016', '#sec-class-definitions', 'Class definitions')}}         | {{Spec2('ES2016')}}     |                      |
+| {{SpecName('ES2017', '#sec-class-definitions', 'Class definitions')}}         | {{Spec2('ES2017')}}     |                      |
+| {{SpecName('ESDraft', '#sec-class-definitions', 'Définitions de classe')}} | {{Spec2('ESDraft')}} |                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.statements.class")}}
+
+## Voir aussi
+
+- [Les déclarations `function`](/fr/docs/Web/JavaScript/Reference/Instructions/function)
+- [Les expressions `class`](/fr/docs/Web/JavaScript/Reference/Opérateurs/class)
+- [Les classes](/fr/docs/Web/JavaScript/Reference/Classes)
diff --git a/files/fr/web/javascript/reference/statements/const/index.html b/files/fr/web/javascript/reference/statements/const/index.html
deleted file mode 100644
index ed27748ab3..0000000000
--- a/files/fr/web/javascript/reference/statements/const/index.html
+++ /dev/null
@@ -1,141 +0,0 @@
----
-title: const
-slug: Web/JavaScript/Reference/Statements/const
-tags:
-  - ECMAScript 2015
-  - Instruction
-  - JavaScript
-  - Reference
-translation_of: Web/JavaScript/Reference/Statements/const
-original_slug: Web/JavaScript/Reference/Instructions/const
----
-<div>{{jsSidebar("Statements")}}</div>
-
-<p>La <strong>déclaration <code>const</code></strong> permet de créer une constante nommée accessible uniquement en lecture. Cela ne signifie pas que la valeur contenue est immuable, uniquement que l'identifiant ne peut pas être réaffecté. Autrement dit la valeur d'une constante ne peut pas être modifiée par des réaffectations ultérieures. Une constante ne peut pas être déclarée à nouveau.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/statement-const.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">const <var>nom1</var> = <var>valeur1</var> [, <var>nom2</var> = <var>valeur2</var> [, ... [, <var>nomN</var> = <var>valeurN</var>]]];</pre>
-
-<dl>
- <dt><code>nomN</code></dt>
- <dd>Le nom de la constante. Ce nom peut être n'importe quel identifiant valide.</dd>
- <dt><code>valeurN</code></dt>
- <dd>La valeur à associer à la constante. Cette valeur peut être n'importe quelle <a href="/fr/docs/Web/JavaScript/Guide/Expressions_et_Opérateurs#new">expression</a> valide (éventuellement <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_function">une expression de fonction</a>).</dd>
-</dl>
-
-<h2 id="Description">Description</h2>
-
-<p>Cette déclaration permet de créer une constante qui peut être globale ou locale pour la fonction dans laquelle elle a été déclarée. Les constantes font partie de la portée du bloc (comme les variables définies avec <code>let</code>). À la différence des variables définies avec <code>var</code>, les constantes déclarées au niveau global <strong>ne sont pas</strong> des propriétés de l'objet global ({{domxref("window")}} dans le cas du navigateur). Il est nécessaire d'initialiser une constante lors de sa déclaration. Au sein d'une même portée, il est impossible d'avoir une constante qui partage le même nom qu'une variable ou qu'une fonction.</p>
-
-<p>Attention, la déclaration <code>const</code> crée une référence en lecture seule vers une valeur. Cela ne signifie pas que la valeur référencée ne peut pas être modifiée ! Ainsi, si le contenu de la constante est un objet, l'objet lui-même pourra toujours être modifié.</p>
-
-<div class="note">
-<p><strong>Note :</strong> Les aspects liés à la <a href="/fr/docs/Web/JavaScript/Reference/Instructions/let#Zone_morte_temporaire_(Temporal_Dead_Zone_TDZ)_et_les_erreurs_liées_à_let">zone morte temporelle</a> de <code>let</code> s'appliquent également à <code>const</code>.</p>
-</div>
-
-<h2 id="Exemples">Exemples</h2>
-
-<p>Les instructions suivantes illustrent comment fonctionne cette déclaration. On pourra tester ces instructions dans la console afin d'observer le comportement obtenu :</p>
-
-<pre class="brush:js">// On définit ma_fav comme une constante
-// et on lui affecte la valeur 7
-// Généralement, par convention, les
-// constantes sont en majuscules
-const MA_FAV = 7;
-
-// Cette réaffectation lèvera une exception TypeError
-MA_FAV = 20;
-
-// affichera 7
-console.log("mon nombre favori est : " + MA_FAV);
-
-// toute tentative de redéclaration renvoie une erreur
-// SyntaxError: Identifier 'MY_FAV' has already been declared
-const MA_FAV = 20;
-
-// le nom ma_fav est réservé par la constante ci-dessus
-// cette déclaration échouera donc également
-var MA_FAV = 20;
-
-// cela renvoie également une erreur
-let MA_FAV = 20;
-
-
-// On notera l'importance de la portée de bloc :
-if (MA_FAV === 7) {
-  // cela fonctionne sans problème et crée
-  // une nouvelle variable dans cette portée
-  let MA_FAV =  20;
-
-  // Ici, MA_FAV vaut 20
-  console.log("mon nombre préféré est " + MA_FAV);
-
-  // L'instruction suivante est remontée dans le
-  // contexte global et provoque une erreur !
-  var MA_FAV = 20;
-
-}
-
-// MA_FAV vaut toujours 7
-console.log("mon nombre favori est " + MA_FAV);
-
-// const nécessite une initialisation
-const TOTO; // SyntaxError: Missing initializer in const
-
-// const fonctionne également avec les objects
-const monObjet = {"clé": "valeur"};
-
-// Écraser l'objet échouera comme précédemment
-monObjet = {"autreClé": "valeur"};
-
-// En revanche, les clés d'un objet ne sont pas
-// protégés et on peut donc, de façon valide, avoir
-monObjet.clé = "autreValeur";
-// On utilisera Object.freeze() afin qu'un objet soit immuable
-
-// Il en va de même avec les tableaux
-const mon_tableau = [];
-// On peut ajouter des éléments au tableau
-mon_tableau.push("A"); // ["A"]
-// Mais on ne peut pas affecter une nouvelle valeur
-mon_tableau = ["B"]; // lève une exception
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-let-and-const-declarations', 'Déclarations let et const')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td>Aucune modification.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-let-and-const-declarations', 'Déclarations let et const')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.statements.const")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Instructions/var","var")}}</li>
- <li>{{jsxref("Instructions/let","let")}}</li>
- <li><a href="/fr/docs/Web/JavaScript/Guide/Valeurs,_variables,_et_littéraux#Constantes">Les constantes dans le guide JavaScript</a></li>
-</ul>
diff --git a/files/fr/web/javascript/reference/statements/const/index.md b/files/fr/web/javascript/reference/statements/const/index.md
new file mode 100644
index 0000000000..bb57f64976
--- /dev/null
+++ b/files/fr/web/javascript/reference/statements/const/index.md
@@ -0,0 +1,119 @@
+---
+title: const
+slug: Web/JavaScript/Reference/Statements/const
+tags:
+  - ECMAScript 2015
+  - Instruction
+  - JavaScript
+  - Reference
+translation_of: Web/JavaScript/Reference/Statements/const
+original_slug: Web/JavaScript/Reference/Instructions/const
+---
+{{jsSidebar("Statements")}}
+
+La **déclaration `const`** permet de créer une constante nommée accessible uniquement en lecture. Cela ne signifie pas que la valeur contenue est immuable, uniquement que l'identifiant ne peut pas être réaffecté. Autrement dit la valeur d'une constante ne peut pas être modifiée par des réaffectations ultérieures. Une constante ne peut pas être déclarée à nouveau.
+
+{{EmbedInteractiveExample("pages/js/statement-const.html")}}
+
+## Syntaxe
+
+    const nom1 = valeur1 [, nom2 = valeur2 [, ... [, nomN = valeurN]]];
+
+- `nomN`
+  - : Le nom de la constante. Ce nom peut être n'importe quel identifiant valide.
+- `valeurN`
+  - : La valeur à associer à la constante. Cette valeur peut être n'importe quelle [expression](/fr/docs/Web/JavaScript/Guide/Expressions_et_Opérateurs#new) valide (éventuellement [une expression de fonction](/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_function)).
+
+## Description
+
+Cette déclaration permet de créer une constante qui peut être globale ou locale pour la fonction dans laquelle elle a été déclarée. Les constantes font partie de la portée du bloc (comme les variables définies avec `let`). À la différence des variables définies avec `var`, les constantes déclarées au niveau global **ne sont pas** des propriétés de l'objet global ({{domxref("window")}} dans le cas du navigateur). Il est nécessaire d'initialiser une constante lors de sa déclaration. Au sein d'une même portée, il est impossible d'avoir une constante qui partage le même nom qu'une variable ou qu'une fonction.
+
+Attention, la déclaration `const` crée une référence en lecture seule vers une valeur. Cela ne signifie pas que la valeur référencée ne peut pas être modifiée ! Ainsi, si le contenu de la constante est un objet, l'objet lui-même pourra toujours être modifié.
+
+> **Note :** Les aspects liés à la [zone morte temporelle](</fr/docs/Web/JavaScript/Reference/Instructions/let#Zone_morte_temporaire_(Temporal_Dead_Zone_TDZ)_et_les_erreurs_liées_à_let>) de `let` s'appliquent également à `const`.
+
+## Exemples
+
+Les instructions suivantes illustrent comment fonctionne cette déclaration. On pourra tester ces instructions dans la console afin d'observer le comportement obtenu :
+
+```js
+// On définit ma_fav comme une constante
+// et on lui affecte la valeur 7
+// Généralement, par convention, les
+// constantes sont en majuscules
+const MA_FAV = 7;
+
+// Cette réaffectation lèvera une exception TypeError
+MA_FAV = 20;
+
+// affichera 7
+console.log("mon nombre favori est : " + MA_FAV);
+
+// toute tentative de redéclaration renvoie une erreur
+// SyntaxError: Identifier 'MY_FAV' has already been declared
+const MA_FAV = 20;
+
+// le nom ma_fav est réservé par la constante ci-dessus
+// cette déclaration échouera donc également
+var MA_FAV = 20;
+
+// cela renvoie également une erreur
+let MA_FAV = 20;
+
+
+// On notera l'importance de la portée de bloc :
+if (MA_FAV === 7) {
+  // cela fonctionne sans problème et crée
+  // une nouvelle variable dans cette portée
+  let MA_FAV =  20;
+
+  // Ici, MA_FAV vaut 20
+  console.log("mon nombre préféré est " + MA_FAV);
+
+  // L'instruction suivante est remontée dans le
+  // contexte global et provoque une erreur !
+  var MA_FAV = 20;
+
+}
+
+// MA_FAV vaut toujours 7
+console.log("mon nombre favori est " + MA_FAV);
+
+// const nécessite une initialisation
+const TOTO; // SyntaxError: Missing initializer in const
+
+// const fonctionne également avec les objects
+const monObjet = {"clé": "valeur"};
+
+// Écraser l'objet échouera comme précédemment
+monObjet = {"autreClé": "valeur"};
+
+// En revanche, les clés d'un objet ne sont pas
+// protégés et on peut donc, de façon valide, avoir
+monObjet.clé = "autreValeur";
+// On utilisera Object.freeze() afin qu'un objet soit immuable
+
+// Il en va de même avec les tableaux
+const mon_tableau = [];
+// On peut ajouter des éléments au tableau
+mon_tableau.push("A"); // ["A"]
+// Mais on ne peut pas affecter une nouvelle valeur
+mon_tableau = ["B"]; // lève une exception
+```
+
+## Spécifications
+
+| Spécification                                                                                                        | État                         | Commentaires         |
+| -------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName('ESDraft', '#sec-let-and-const-declarations', 'Déclarations let et const')}} | {{Spec2('ESDraft')}} | Aucune modification. |
+| {{SpecName('ES2015', '#sec-let-and-const-declarations', 'Déclarations let et const')}} | {{Spec2('ES2015')}}     | Définition initiale. |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.statements.const")}}
+
+## Voir aussi
+
+- {{jsxref("Instructions/var","var")}}
+- {{jsxref("Instructions/let","let")}}
+- [Les constantes dans le guide JavaScript](/fr/docs/Web/JavaScript/Guide/Valeurs,_variables,_et_littéraux#Constantes)
diff --git a/files/fr/web/javascript/reference/statements/continue/index.html b/files/fr/web/javascript/reference/statements/continue/index.html
deleted file mode 100644
index 97157d8740..0000000000
--- a/files/fr/web/javascript/reference/statements/continue/index.html
+++ /dev/null
@@ -1,160 +0,0 @@
----
-title: continue
-slug: Web/JavaScript/Reference/Statements/continue
-tags:
-  - JavaScript
-  - Reference
-  - Statement
-translation_of: Web/JavaScript/Reference/Statements/continue
-original_slug: Web/JavaScript/Reference/Instructions/continue
----
-<div>{{jsSidebar("Statements")}}</div>
-
-<p>L'instruction <code><strong>continue</strong></code> arrête l'exécution des instructions pour l'itération de la boucle courante ou de la boucle étiquetée. L'exécution est reprise à l'itération suivante.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/statement-continue.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">continue [ <em><var>label</var></em> ];</pre>
-
-<dl>
- <dt><code>label</code></dt>
- <dd>Paramètre optionnel. Un identifiant associé à l'étiquette (<em>label</em>) de l'instruction pour laquelle on souhaite finir l'itération en cours.</dd>
-</dl>
-
-<h2 id="Description">Description</h2>
-
-<p>Contrairement à {{jsxref("Instructions/break", "break")}}, <code>continue</code> ne termine pas la boucle complètement :</p>
-
-<ul>
- <li>au sein d'une boucle {{jsxref("Instructions/while", "while")}}, elle repart à la phase de la condition.</li>
-</ul>
-
-<ul>
- <li>au sein d'une boucle {{jsxref("Instructions/for", "for")}}, elle repart à l'expression de mise à jour de la boucle.</li>
-</ul>
-
-<p>L'instruction <code>continue</code> peut éventuellement contenir une étiquette (<em>label</em>) qui permet de tirer parti des instructions de boucles étiquetées (plutôt que de ne traiter que la boucle courante). Dans le cas où l'étiquette est utilisée, il faut que l'instruction <code>continue</code> soit imbriquée dans l'instruction étiquetée.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Utiliser_continue_avec_while">Utiliser <code>continue</code> avec <code>while</code></h3>
-
-<p>L'instruction suivante illustre comment on peut utiliser continue au sein d'une boucle {{jsxref("Instructions/while", "while")}}, ici <code>continue</code> est utilisé lorsque <code>i</code> vaut 3. On a donc <code>n</code> qui prend les valeurs 1, 3, 7, et 12.</p>
-
-<pre class="brush: js">var i = 0;
-var n = 0;
-while (i &lt; 5) {
-  i++;
-  if (i === 3) {
-    continue;
-  }
-  n += i;
-}
-</pre>
-
-<h3 id="Utiliser_continue_avec_une_étiquette">Utiliser <code>continue</code> avec une étiquette</h3>
-
-<p>Dans l'exemple suivant, on a une instruction étiquetée <code>vérifIetJ</code> qui contient une autre instruction étiquetée <code>vérifJ</code>. Si l'instruction <code>continue</code> est utilisée, le programme reprend l'exécution au début de l'instruction <code>vérifJ</code>. Chaque fois que <code>continue</code> utilisé, <code>vérifJ</code> réitère jusqu'à ce que sa condition renvoie <code>false</code>. Lorsque c'est le cas, le reste de l'instruction <code>vérifIetJ</code> est exécuté.</p>
-
-<p>Si <code>continue</code> utilisait l'étiquette <code>vérifIetJ</code>, le programme continuerait au début de l'instruction <code>vérifIetJ</code>.</p>
-
-<p>Voir aussi {{jsxref("Instructions/label", "label")}}.</p>
-
-<pre class="brush: js">var i = 0;
-var j = 8;
-
-vérifIetJ: while (i &lt; 4) {
-  console.log("i : " + i);
-  i += 1;
-
-  vérifJ: while (j &gt; 4) {
-    console.log("j : "+ j);
-    j -= 1;
-    if ((j % 2) == 0){
-      continue vérifJ;
-    }
-    console.log(j + " est impaire.");
-   }
-   console.log("i = " + i);
-   console.log("j = " + j);
-}
-</pre>
-
-<p>En utilisant le fragment ci-avant, on aura le résultat suivant :</p>
-
-<pre class="brush: js">"i : 0"
-
-// début de vérifJ
-"j : 8"
-"7 est impair"
-"j : 7"
-"j : 6"
-"5 est impair."
-"j : 5"
-// fin de vérifJ
-
-"i = 1"
-"j = 4"
-
-"i : 1"
-"i = 2"
-"j = 4"
-
-"i : 2"
-"i = 3"
-"j = 4"
-
-"i : 3"
-"i = 4"
-"j = 4"
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES1')}}</td>
-   <td>{{Spec2('ES1')}}</td>
-   <td>Définition initiale. Pas de version étiquetée.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES3')}}</td>
-   <td>{{Spec2('ES3')}}</td>
-   <td>Ajout de la version étiquetée.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-12.7', 'instruction continue')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-continue-statement', 'instruction continue')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-continue-statement', 'instruction continue')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.statements.continue")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Instructions/break", "break")}}</li>
- <li>{{jsxref("Instructions/label", "label")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/statements/continue/index.md b/files/fr/web/javascript/reference/statements/continue/index.md
new file mode 100644
index 0000000000..f0083f8248
--- /dev/null
+++ b/files/fr/web/javascript/reference/statements/continue/index.md
@@ -0,0 +1,130 @@
+---
+title: continue
+slug: Web/JavaScript/Reference/Statements/continue
+tags:
+  - JavaScript
+  - Reference
+  - Statement
+translation_of: Web/JavaScript/Reference/Statements/continue
+original_slug: Web/JavaScript/Reference/Instructions/continue
+---
+{{jsSidebar("Statements")}}
+
+L'instruction **`continue`** arrête l'exécution des instructions pour l'itération de la boucle courante ou de la boucle étiquetée. L'exécution est reprise à l'itération suivante.
+
+{{EmbedInteractiveExample("pages/js/statement-continue.html")}}
+
+## Syntaxe
+
+    continue [ label ];
+
+- `label`
+  - : Paramètre optionnel. Un identifiant associé à l'étiquette (_label_) de l'instruction pour laquelle on souhaite finir l'itération en cours.
+
+## Description
+
+Contrairement à {{jsxref("Instructions/break", "break")}}, `continue` ne termine pas la boucle complètement :
+
+- au sein d'une boucle {{jsxref("Instructions/while", "while")}}, elle repart à la phase de la condition.
+
+<!---->
+
+- au sein d'une boucle {{jsxref("Instructions/for", "for")}}, elle repart à l'expression de mise à jour de la boucle.
+
+L'instruction `continue` peut éventuellement contenir une étiquette (_label_) qui permet de tirer parti des instructions de boucles étiquetées (plutôt que de ne traiter que la boucle courante). Dans le cas où l'étiquette est utilisée, il faut que l'instruction `continue` soit imbriquée dans l'instruction étiquetée.
+
+## Exemples
+
+### Utiliser `continue` avec `while`
+
+L'instruction suivante illustre comment on peut utiliser continue au sein d'une boucle {{jsxref("Instructions/while", "while")}}, ici `continue` est utilisé lorsque `i` vaut 3. On a donc `n` qui prend les valeurs 1, 3, 7, et 12.
+
+```js
+var i = 0;
+var n = 0;
+while (i < 5) {
+  i++;
+  if (i === 3) {
+    continue;
+  }
+  n += i;
+}
+```
+
+### Utiliser `continue` avec une étiquette
+
+Dans l'exemple suivant, on a une instruction étiquetée `vérifIetJ` qui contient une autre instruction étiquetée `vérifJ`. Si l'instruction `continue` est utilisée, le programme reprend l'exécution au début de l'instruction `vérifJ`. Chaque fois que `continue` utilisé, `vérifJ` réitère jusqu'à ce que sa condition renvoie `false`. Lorsque c'est le cas, le reste de l'instruction `vérifIetJ` est exécuté.
+
+Si `continue` utilisait l'étiquette `vérifIetJ`, le programme continuerait au début de l'instruction `vérifIetJ`.
+
+Voir aussi {{jsxref("Instructions/label", "label")}}.
+
+```js
+var i = 0;
+var j = 8;
+
+vérifIetJ: while (i < 4) {
+  console.log("i : " + i);
+  i += 1;
+
+  vérifJ: while (j > 4) {
+    console.log("j : "+ j);
+    j -= 1;
+    if ((j % 2) == 0){
+      continue vérifJ;
+    }
+    console.log(j + " est impaire.");
+   }
+   console.log("i = " + i);
+   console.log("j = " + j);
+}
+```
+
+En utilisant le fragment ci-avant, on aura le résultat suivant :
+
+```js
+"i : 0"
+
+// début de vérifJ
+"j : 8"
+"7 est impair"
+"j : 7"
+"j : 6"
+"5 est impair."
+"j : 5"
+// fin de vérifJ
+
+"i = 1"
+"j = 4"
+
+"i : 1"
+"i = 2"
+"j = 4"
+
+"i : 2"
+"i = 3"
+"j = 4"
+
+"i : 3"
+"i = 4"
+"j = 4"
+```
+
+## Spécifications
+
+| Spécification                                                                                        | État                         | Commentaires                                   |
+| ---------------------------------------------------------------------------------------------------- | ---------------------------- | ---------------------------------------------- |
+| {{SpecName('ES1')}}                                                                             | {{Spec2('ES1')}}         | Définition initiale. Pas de version étiquetée. |
+| {{SpecName('ES3')}}                                                                             | {{Spec2('ES3')}}         | Ajout de la version étiquetée.                 |
+| {{SpecName('ES5.1', '#sec-12.7', 'instruction continue')}}                         | {{Spec2('ES5.1')}}     |                                                |
+| {{SpecName('ES6', '#sec-continue-statement', 'instruction continue')}}         | {{Spec2('ES6')}}         |                                                |
+| {{SpecName('ESDraft', '#sec-continue-statement', 'instruction continue')}} | {{Spec2('ESDraft')}} |                                                |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.statements.continue")}}
+
+## Voir aussi
+
+- {{jsxref("Instructions/break", "break")}}
+- {{jsxref("Instructions/label", "label")}}
diff --git a/files/fr/web/javascript/reference/statements/debugger/index.html b/files/fr/web/javascript/reference/statements/debugger/index.html
deleted file mode 100644
index 9307a7f217..0000000000
--- a/files/fr/web/javascript/reference/statements/debugger/index.html
+++ /dev/null
@@ -1,78 +0,0 @@
----
-title: debugger
-slug: Web/JavaScript/Reference/Statements/debugger
-tags:
-  - JavaScript
-  - Reference
-  - Statement
-translation_of: Web/JavaScript/Reference/Statements/debugger
-original_slug: Web/JavaScript/Reference/Instructions/debugger
----
-<div>{{jsSidebar("Statements")}}</div>
-
-<p>L'instruction <strong><code>debugger</code> </strong>permet de faire appel à un outil de débogage (qui peut par exemple permettre de placer un point d'arrêt). Si cette fonctionnalité de débogage n'est pas disponible, l'instruction n'aura aucun effet.</p>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><code>debugger;</code></pre>
-
-<h2 id="Exemples">Exemples</h2>
-
-<p>Dans l'exemple qui suit, on utilise un code avec l'instruction <code>debugger</code> qui permet de démarrer un débogueur (s'il existe) lorsque la fonction est appelée :</p>
-
-<pre class="brush:js">function codeProbablementBogue() {
-    debugger;
-    // exécuter des instructions qu'on veut
-    // examiner, exécuter pas à pas etc.
-}</pre>
-
-<p>Lors que le débogueur est lancé, l'exécution est interrompue au niveau de l'instruction <code>debugger</code>. Cela agit comme un point d'arrêt dans le code du script :</p>
-
-<p><a href="https://mdn.mozillademos.org/files/6963/Screen Shot 2014-02-07 at 9.14.35 AM.png"><img alt="Paused at a debugger statement." src="https://mdn.mozillademos.org/files/6963/Screen%20Shot%202014-02-07%20at%209.14.35%20AM.png"></a></p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-debugger-statement', 'Debugger statement')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-debugger-statement', 'instruction debugger')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-12.15', 'instruction debugger')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td>Définition initiale</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES3', '#sec-7.5.3', 'instruction debugger')}}</td>
-   <td>{{Spec2('ES3')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES1', '#sec-7.4.3', 'instruction debugger')}}</td>
-   <td>{{Spec2('ES1')}}</td>
-   <td>Uniquement mentionné comme mot-clé réservé.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.statements.debugger")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Outils/Debugger">Le débogueur des outils de développement Firefox</a></li>
-</ul>
diff --git a/files/fr/web/javascript/reference/statements/debugger/index.md b/files/fr/web/javascript/reference/statements/debugger/index.md
new file mode 100644
index 0000000000..a50ba04612
--- /dev/null
+++ b/files/fr/web/javascript/reference/statements/debugger/index.md
@@ -0,0 +1,51 @@
+---
+title: debugger
+slug: Web/JavaScript/Reference/Statements/debugger
+tags:
+  - JavaScript
+  - Reference
+  - Statement
+translation_of: Web/JavaScript/Reference/Statements/debugger
+original_slug: Web/JavaScript/Reference/Instructions/debugger
+---
+{{jsSidebar("Statements")}}
+
+L'instruction **`debugger` **permet de faire appel à un outil de débogage (qui peut par exemple permettre de placer un point d'arrêt). Si cette fonctionnalité de débogage n'est pas disponible, l'instruction n'aura aucun effet.
+
+## Syntaxe
+
+    debugger;
+
+## Exemples
+
+Dans l'exemple qui suit, on utilise un code avec l'instruction `debugger` qui permet de démarrer un débogueur (s'il existe) lorsque la fonction est appelée :
+
+```js
+function codeProbablementBogue() {
+    debugger;
+    // exécuter des instructions qu'on veut
+    // examiner, exécuter pas à pas etc.
+}
+```
+
+Lors que le débogueur est lancé, l'exécution est interrompue au niveau de l'instruction `debugger`. Cela agit comme un point d'arrêt dans le code du script :
+
+[![Paused at a debugger statement.](https://mdn.mozillademos.org/files/6963/Screen%20Shot%202014-02-07%20at%209.14.35%20AM.png)](<https://mdn.mozillademos.org/files/6963/Screen Shot 2014-02-07 at 9.14.35 AM.png>)
+
+## Spécifications
+
+| Spécification                                                                                    | Statut                       | Commentaires                                |
+| ------------------------------------------------------------------------------------------------ | ---------------------------- | ------------------------------------------- |
+| {{SpecName('ESDraft', '#sec-debugger-statement', 'Debugger statement')}} | {{Spec2('ESDraft')}} |                                             |
+| {{SpecName('ES6', '#sec-debugger-statement', 'instruction debugger')}}     | {{Spec2('ES6')}}         |                                             |
+| {{SpecName('ES5.1', '#sec-12.15', 'instruction debugger')}}                 | {{Spec2('ES5.1')}}     | Définition initiale                         |
+| {{SpecName('ES3', '#sec-7.5.3', 'instruction debugger')}}                     | {{Spec2('ES3')}}         |                                             |
+| {{SpecName('ES1', '#sec-7.4.3', 'instruction debugger')}}                     | {{Spec2('ES1')}}         | Uniquement mentionné comme mot-clé réservé. |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.statements.debugger")}}
+
+## Voir aussi
+
+- [Le débogueur des outils de développement Firefox](/fr/docs/Outils/Debugger)
diff --git a/files/fr/web/javascript/reference/statements/do...while/index.html b/files/fr/web/javascript/reference/statements/do...while/index.html
deleted file mode 100644
index 4913e642ce..0000000000
--- a/files/fr/web/javascript/reference/statements/do...while/index.html
+++ /dev/null
@@ -1,87 +0,0 @@
----
-title: do...while
-slug: Web/JavaScript/Reference/Statements/do...while
-tags:
-  - JavaScript
-  - Reference
-  - Statement
-translation_of: Web/JavaScript/Reference/Statements/do...while
-original_slug: Web/JavaScript/Reference/Instructions/do...while
----
-<div>{{jsSidebar("Statements")}}</div>
-
-<p>L'instruction <strong><code>do...while</code></strong> crée une boucle qui exécute une instruction jusqu'à ce qu'une condition de test ne soit plus vérifiée. La condition est testée après que l'instruction soit exécutée, le bloc d'instructions défini dans la boucle est donc exécuté au moins une fois.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/statement-dowhile.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">do
-   <em>instruction</em>
-while (<em>condition</em>);
-</pre>
-
-<dl>
- <dt><code>instruction</code></dt>
- <dd>Une instruction exécutée au moins une fois et ré-exécutée chaque fois que la condition de test est évaluée à <code>true</code>. On peut exécuter plusieurs instructions au sein d'une boucle grâce à l'instruction {{jsxref("Instructions/block", "block")}} (<code>{ ... }</code>) qui permet de grouper différentes instructions en une seule.</dd>
- <dt><code>condition</code></dt>
- <dd>Une expression évaluée après chaque passage dans la boucle. Si l'évaluation de la <code>condition</code> donne <code>true</code> (la condition est vérifiée), <code>instruction</code> sera exécutée à nouveau. Lorsque <code>condition</code> donne <code>false</code>, le contrôle passe à l'instruction suivant la boucle <code>do...while</code>.</dd>
-</dl>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Utiliser_do...while">Utiliser <code>do...while</code></h3>
-
-<p>Dans l'exemple suivant, la boucle <code>do...while</code> est parcourue au moins une fois et répétée jusqu'à ce que <code>i</code> ne soit plus strictement inférieur à 5.</p>
-
-<pre class="brush: js">var i = 0;
-do {
-   i += 1;
-   console.log(i);
-} while (i &lt; 5);
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES3')}}</td>
-   <td>{{Spec2('ES3')}}</td>
-   <td>Définition initiale. Implémentée avec JavaScript 1.2</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-12.6.1', 'instruction do-while')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-do-while-statement', 'instruction do-while')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td>Le point-virgule de fin est désormais optionnel.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-do-while-statement', 'instruction do-while')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-
-
-<p>{{Compat("javascript.statements.do_while")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Instructions/while", "while")}}</li>
- <li>{{jsxref("Instructions/for", "for")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/statements/do...while/index.md b/files/fr/web/javascript/reference/statements/do...while/index.md
new file mode 100644
index 0000000000..96265c32d8
--- /dev/null
+++ b/files/fr/web/javascript/reference/statements/do...while/index.md
@@ -0,0 +1,58 @@
+---
+title: do...while
+slug: Web/JavaScript/Reference/Statements/do...while
+tags:
+  - JavaScript
+  - Reference
+  - Statement
+translation_of: Web/JavaScript/Reference/Statements/do...while
+original_slug: Web/JavaScript/Reference/Instructions/do...while
+---
+{{jsSidebar("Statements")}}
+
+L'instruction **`do...while`** crée une boucle qui exécute une instruction jusqu'à ce qu'une condition de test ne soit plus vérifiée. La condition est testée après que l'instruction soit exécutée, le bloc d'instructions défini dans la boucle est donc exécuté au moins une fois.
+
+{{EmbedInteractiveExample("pages/js/statement-dowhile.html")}}
+
+## Syntaxe
+
+    do
+       instruction
+    while (condition);
+
+- `instruction`
+  - : Une instruction exécutée au moins une fois et ré-exécutée chaque fois que la condition de test est évaluée à `true`. On peut exécuter plusieurs instructions au sein d'une boucle grâce à l'instruction {{jsxref("Instructions/block", "block")}} (`{ ... }`) qui permet de grouper différentes instructions en une seule.
+- `condition`
+  - : Une expression évaluée après chaque passage dans la boucle. Si l'évaluation de la `condition` donne `true` (la condition est vérifiée), `instruction` sera exécutée à nouveau. Lorsque `condition` donne `false`, le contrôle passe à l'instruction suivant la boucle `do...while`.
+
+## Exemples
+
+### Utiliser `do...while`
+
+Dans l'exemple suivant, la boucle `do...while` est parcourue au moins une fois et répétée jusqu'à ce que `i` ne soit plus strictement inférieur à 5.
+
+```js
+var i = 0;
+do {
+   i += 1;
+   console.log(i);
+} while (i < 5);
+```
+
+## Spécifications
+
+| Spécification                                                                                        | État                         | Commentaires                                         |
+| ---------------------------------------------------------------------------------------------------- | ---------------------------- | ---------------------------------------------------- |
+| {{SpecName('ES3')}}                                                                             | {{Spec2('ES3')}}         | Définition initiale. Implémentée avec JavaScript 1.2 |
+| {{SpecName('ES5.1', '#sec-12.6.1', 'instruction do-while')}}                     | {{Spec2('ES5.1')}}     |                                                      |
+| {{SpecName('ES6', '#sec-do-while-statement', 'instruction do-while')}}         | {{Spec2('ES6')}}         | Le point-virgule de fin est désormais optionnel.     |
+| {{SpecName('ESDraft', '#sec-do-while-statement', 'instruction do-while')}} | {{Spec2('ESDraft')}} |                                                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.statements.do_while")}}
+
+## Voir aussi
+
+- {{jsxref("Instructions/while", "while")}}
+- {{jsxref("Instructions/for", "for")}}
diff --git a/files/fr/web/javascript/reference/statements/empty/index.html b/files/fr/web/javascript/reference/statements/empty/index.html
deleted file mode 100644
index a1dbfb03c2..0000000000
--- a/files/fr/web/javascript/reference/statements/empty/index.html
+++ /dev/null
@@ -1,105 +0,0 @@
----
-title: vide
-slug: Web/JavaScript/Reference/Statements/Empty
-tags:
-  - Instruction
-  - JavaScript
-  - Reference
-translation_of: Web/JavaScript/Reference/Statements/Empty
-original_slug: Web/JavaScript/Reference/Instructions/Vide
----
-<div>{{jsSidebar("Statements")}}</div>
-
-<p>Une <strong>instruction vide</strong> est utilisée pour ne fournir aucune instruction là où JavaScript en attendrait une.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/statement-empty.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">;
-</pre>
-
-<h2 id="Description">Description</h2>
-
-<p>L'instruction vide est représentée par un point-virgule (;) qui indique qu'il n'y a aucune instruction à exécuter, même si JavaScript requiert une instruction à cet emplacement. Le comportement réciproque, où on souhaite exécuter plusieurs instructions là où JavaScript en attend une est possible grâce <a href="/fr/docs/JavaScript/Reference/Instructions/block">à l'instruction bloc</a> qui permet de combiner plusieurs instructions en une seule.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<p>L'instruction vide peut être utilisée dans les boucles. Par exemple, ici on a un corps de boucle totalement vide :</p>
-
-<pre class="brush: js">var arr = [1, 2, 3];
-
-// Affecter 0 pour toutes les valeurs du tableau
-for (i = 0; i &lt; arr.length; arr[i++] = 0) /* instruction vide */ ;
-
-console.log(arr)
-// [0, 0, 0]
-</pre>
-
-<div class="note">
-<p><strong>Note :</strong> Cela peut être raisonnable que de commenter l'utilisation d'une instruction vide pour la rendre visible et l'expliciter. Par exemple, dans le code qui suit, le point-virgule ne semble pas intentionnel :</p>
-</div>
-
-<pre class="brush: js">if (condition);  // Attention, ce "if" ne fait rien !
-   finDuMonde()  // Cette méthode est donc toujours lancée !!!
-</pre>
-
-<p>Un autre exemple avec une instruction {{jsxref("Instructions/if...else")}} sans accolade (<code>{}</code>). Si <code>trois</code> vaut <code>true</code>, rien ne sera exécuté, peu importera la valeur de <code>quatre</code>, la fonction <code>chargerFusée()</code> ne sera pas exécutée.</p>
-
-<pre class="brush: js">if (un)
-  faire1èreEtape();
-else if (deux)
-  faire4èmeEtape();
-else if (trois)
-  ; // rien ici
-else if (quatre)
-  faire4èmeEtape();
-else
-  chargerFusée();</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-empty-statement', 'Instruction vide')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-empty-statement', 'instruction vide')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-12.3', 'instruction vide')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES3', '#sec-12.3', 'instruction vide')}}</td>
-   <td>{{Spec2('ES3')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES1', '#sec-12.3', 'instruction vide')}}</td>
-   <td>{{Spec2('ES1')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.statements.empty")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Instructions/block", "L'instruction de bloc","",1)}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/statements/empty/index.md b/files/fr/web/javascript/reference/statements/empty/index.md
new file mode 100644
index 0000000000..32e9e3fb81
--- /dev/null
+++ b/files/fr/web/javascript/reference/statements/empty/index.md
@@ -0,0 +1,77 @@
+---
+title: vide
+slug: Web/JavaScript/Reference/Statements/Empty
+tags:
+  - Instruction
+  - JavaScript
+  - Reference
+translation_of: Web/JavaScript/Reference/Statements/Empty
+original_slug: Web/JavaScript/Reference/Instructions/Vide
+---
+{{jsSidebar("Statements")}}
+
+Une **instruction vide** est utilisée pour ne fournir aucune instruction là où JavaScript en attendrait une.
+
+{{EmbedInteractiveExample("pages/js/statement-empty.html")}}
+
+## Syntaxe
+
+    ;
+
+## Description
+
+L'instruction vide est représentée par un point-virgule (;) qui indique qu'il n'y a aucune instruction à exécuter, même si JavaScript requiert une instruction à cet emplacement. Le comportement réciproque, où on souhaite exécuter plusieurs instructions là où JavaScript en attend une est possible grâce [à l'instruction bloc](/fr/docs/JavaScript/Reference/Instructions/block) qui permet de combiner plusieurs instructions en une seule.
+
+## Exemples
+
+L'instruction vide peut être utilisée dans les boucles. Par exemple, ici on a un corps de boucle totalement vide :
+
+```js
+var arr = [1, 2, 3];
+
+// Affecter 0 pour toutes les valeurs du tableau
+for (i = 0; i < arr.length; arr[i++] = 0) /* instruction vide */ ;
+
+console.log(arr)
+// [0, 0, 0]
+```
+
+> **Note :** Cela peut être raisonnable que de commenter l'utilisation d'une instruction vide pour la rendre visible et l'expliciter. Par exemple, dans le code qui suit, le point-virgule ne semble pas intentionnel :
+
+```js
+if (condition);  // Attention, ce "if" ne fait rien !
+   finDuMonde()  // Cette méthode est donc toujours lancée !!!
+```
+
+Un autre exemple avec une instruction {{jsxref("Instructions/if...else")}} sans accolade (`{}`). Si `trois` vaut `true`, rien ne sera exécuté, peu importera la valeur de `quatre`, la fonction `chargerFusée()` ne sera pas exécutée.
+
+```js
+if (un)
+  faire1èreEtape();
+else if (deux)
+  faire4èmeEtape();
+else if (trois)
+  ; // rien ici
+else if (quatre)
+  faire4èmeEtape();
+else
+  chargerFusée();
+```
+
+## Spécifications
+
+| Spécification                                                                            | État                         | Commentaires         |
+| ---------------------------------------------------------------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName('ESDraft', '#sec-empty-statement', 'Instruction vide')}} | {{Spec2('ESDraft')}} |                      |
+| {{SpecName('ES6', '#sec-empty-statement', 'instruction vide')}}     | {{Spec2('ES6')}}         |                      |
+| {{SpecName('ES5.1', '#sec-12.3', 'instruction vide')}}                 | {{Spec2('ES5.1')}}     |                      |
+| {{SpecName('ES3', '#sec-12.3', 'instruction vide')}}                     | {{Spec2('ES3')}}         |                      |
+| {{SpecName('ES1', '#sec-12.3', 'instruction vide')}}                     | {{Spec2('ES1')}}         | Définition initiale. |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.statements.empty")}}
+
+## Voir aussi
+
+- {{jsxref("Instructions/block", "L'instruction de bloc","",1)}}
diff --git a/files/fr/web/javascript/reference/statements/export/index.html b/files/fr/web/javascript/reference/statements/export/index.html
deleted file mode 100644
index 30f421a8c5..0000000000
--- a/files/fr/web/javascript/reference/statements/export/index.html
+++ /dev/null
@@ -1,181 +0,0 @@
----
-title: export
-slug: Web/JavaScript/Reference/Statements/export
-tags:
-  - ECMAScript 2015
-  - Instruction
-  - JavaScript
-  - Modules
-  - export
-translation_of: Web/JavaScript/Reference/Statements/export
-original_slug: Web/JavaScript/Reference/Instructions/export
----
-<div>{{jsSidebar("Statements")}}</div>
-
-<p>L'instruction <strong><code>export</code></strong> est utilisée lors de la création de modules JavaScript pour exporter des fonctions, des objets ou des valeurs primitives à partir du module, de sorte qu'ils puissent être utilisés par d'autres programmes grâce à l'instruction {{jsxref("Instructions/import", "import")}}.</p>
-
-<p>Les modules exportés sont interprétés en <a href="/fr/docs/Web/JavaScript/Reference/Strict_mode">mode strict</a> dans tous les cas. L'instruction <code>export</code> ne peut pas être utilisée dans les scripts embarqués.</p>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">// Exporter des propriétés individuelles
-export let <var>nom1</var>, <var>nom2</var>, …, <var>nomN</var>; // utilisable avec var, const
-export let <var>nom1</var> = …, <var>nom2</var> = …, …, <var>nomN</var>; // utilisable avec var, const
-export function nomFonction(){...}
-export class NomClasse {...}
-
-// Export d'une liste de valeur
-export { <var>nom1</var>, <var>nom2</var>, …, <var>nomN</var> };
-
-// Renommage des valeurs exportées
-export { <var>variable1</var> as <var>nom1</var>, <var>variable2</var> as <var>nom2</var>, …, <var>nomN</var> };
-
-// Renommage avec la décomposition pour l'affectation
-export const { <var>nom1</var>, <var>nom2: truc</var><var> </var>} = o;
-
-// Exports par défauts
-export default <em>expression</em>;
-export default function (…) { … } // fonctionne avec class, function*
-export default function nom1(…) { … } // fonctionne avec class, function*
-export { <var>nom1</var> as default, … };
-
-// Agrégation de modules
-export * from …;
-export { <var>nom1</var>, <var>nom2</var>, …, <var>nomN</var> } from …;
-export { <var>import1</var> as <var>nom1</var>, <var>import2</var> as <var>nom2</var>, …, <var>nomN</var> } from …;
-export { default } from …;</pre>
-
-<dl>
- <dt><code>nomN</code></dt>
- <dd>Identifiant à exporter (afin qu'il puisse être importé via {{jsxref("Statements/import", "import")}} dans un autre script).</dd>
-</dl>
-
-<h2 id="Description">Description</h2>
-
-<p>Il existe deux types d'export différents : les exports <strong>nommés</strong> et les exports <strong>par défaut</strong>. Il est possible d'avoir plusieurs exports nommés mais un seul export par défaut. Chaque type correspond à une des syntaxes ci-dessus :</p>
-
-<ul>
- <li>Les exports nommés :
-  <pre class="brush: js">// exporte une fonction déclarée précédemment
-export { maFonction };
-
-// exporte une constante
-export const machin = Math.sqrt(2);</pre>
- </li>
- <li>Les exports par défaut (fonction) :
-  <pre class="brush: js">export default function() {} </pre>
- </li>
- <li>Les exports par défaut (classe) :
-  <pre class="brush: js">export default class {} </pre>
- </li>
-</ul>
-
-<p>Les exports nommés sont utiles pour exporter plusieurs valeurs. Lors de l'importation, il est obligatoire d'utiliser le même nom de l'objet correspondant.</p>
-
-<p>Mais un export par défaut peut être importé avec n'importe quel nom, par exemple :</p>
-
-<pre class="brush: js">let k;
-export default k = 12; // dans le fichier test.js
-import m from './test'; // notez que nous avons la liberté d'utiliser import m au lieu de import k, parce que k était l'export par défaut
-console.log (m); // enregistrera 12</pre>
-
-<p>La syntaxe suivante n'exporte pas le défaut depuis le module importé :</p>
-
-<pre class="brush: js">export * from …;</pre>
-
-<p>Si vous avez besoin d'exporter le défaut, écrivez ce qui suit à la place :</p>
-
-<pre class="brush: js">export {default} from 'mod';</pre>
-
-<p>Il est possible de renommer un export afin d'éviter des conflits de nommage :</p>
-
-<pre class="brush: js">export { maFonction as fonction1
-         maVariable as variable1 };</pre>
-
-<p>On peut également agréger les valeurs exportées à celles d'autres modules qu'on aurait importés :</p>
-
-<pre class="brush: js">// Dans moduleParent.js
-export { maFonction, maVariable } from 'moduleFils1.js';
-export { maClasse } from 'moduleFils2.js'
-
-// Dans le module de plus haut niveau
-import { maFonction, maVariable, maClasse } from 'moduleParent.js';</pre>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Utilisation_d'exports_nommés">Utilisation d'exports nommés</h3>
-
-<p>Dans le module, on pourra utiliser le code suivant :</p>
-
-<pre class="brush: js">// module "mon-module.js"
-function cube(x) {
-  return x * x * x;
-}
-const machin = Math.PI + Math.SQRT2;
-export { cube, machin };
-</pre>
-
-<p>De cette façon, dans un autre script, on pourra avoir :</p>
-
-<pre class="brush: js">import { cube, machin } from 'mon-module';
-console.log(cube(3)); // 27
-console.log(machin);    // 4.555806215962888</pre>
-
-<div class="note">
-<p><strong>Note :</strong> Si l'import est réalisé dans un script HTML, il faut que celui-ci soit chargé avec l'attribut {{htmlattrxref("type")}} <code>"module"</code> : <code>&lt;script type="module" src="./demo.js"&gt;&lt;/script&gt;</code> sinon il y aura une erreur quant aux origines multiples (<a href="/fr/docs/Web/HTTP/CORS">CORS</a>).<br>
- Il n'est pas possible de charger des modules JavaScript via une URL <code>file://</code> pour des raisons de sécurité (voir <a href="/fr/docs/Web/HTTP/CORS">CORS</a> également). Il faudra utiliser un serveur HTTP.</p>
-</div>
-
-<h3 id="Utilisation_d'exports_par_défaut">Utilisation d'exports par défaut</h3>
-
-<p>Si on souhaite n'exporter qu'une seule valeur ou avoir une valeur de secours<em> </em>pour le module, on peut utiliser un export par défaut :</p>
-
-<pre class="brush: js">// module "mon-module.js"
-export default function cube(x) {
-  return x * x * x;
-}
-</pre>
-
-<p>Alors, dans un autre script, il sera facile d'importer l'export par défaut :</p>
-
-<pre class="brush: js">import cube from './mon-module.js';
-console.log(cube(3)); // 27
-</pre>
-
-<p>Notez qu'il n'est pas possible d'utiliser <code>var</code>, <code>let</code> ou <code>const</code> avec <code>export default</code>.</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-exports', 'Exports')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td>Définition initiale</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-exports', 'Exports')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.statements.export")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Instructions/import", "import")}}</li>
- <li><a href="/fr/docs/Web/JavaScript/Guide/Modules">Guide sur les modules JavaScript</a></li>
- <li><a href="https://hacks.mozilla.org/2015/08/es6-in-depth-modules/">ES6 in Depth: Modules</a>, Hacks blog post par Jason Orendorff</li>
- <li><a href="https://exploringjs.com/es6/ch_modules.html">Livre d'Axel Rauschmayer : "Exploring JS: Modules"</a></li>
- <li><a href="https://tech.mozfr.org/post/2018/04/06/Une-plongee-illustree-dans-les-modules-ECMAScript">Un billet illustré de Lin Clark, traduit en français, sur les modules</a></li>
-</ul>
diff --git a/files/fr/web/javascript/reference/statements/export/index.md b/files/fr/web/javascript/reference/statements/export/index.md
new file mode 100644
index 0000000000..0241dc3518
--- /dev/null
+++ b/files/fr/web/javascript/reference/statements/export/index.md
@@ -0,0 +1,181 @@
+---
+title: export
+slug: Web/JavaScript/Reference/Statements/export
+tags:
+  - ECMAScript 2015
+  - Instruction
+  - JavaScript
+  - Modules
+  - export
+translation_of: Web/JavaScript/Reference/Statements/export
+original_slug: Web/JavaScript/Reference/Instructions/export
+---
+{{jsSidebar("Statements")}}
+
+L'instruction **`export`** est utilisée lors de la création de modules JavaScript pour exporter des fonctions, des objets ou des valeurs primitives à partir du module, de sorte qu'ils puissent être utilisés par d'autres programmes grâce à l'instruction {{jsxref("Instructions/import", "import")}}.
+
+Les modules exportés sont interprétés en [mode strict](/fr/docs/Web/JavaScript/Reference/Strict_mode) dans tous les cas. L'instruction `export` ne peut pas être utilisée dans les scripts embarqués.
+
+## Syntaxe
+
+    // Exporter des propriétés individuelles
+    export let nom1, nom2, …, nomN; // utilisable avec var, const
+    export let nom1 = …, nom2 = …, …, nomN; // utilisable avec var, const
+    export function nomFonction(){...}
+    export class NomClasse {...}
+
+    // Export d'une liste de valeur
+    export { nom1, nom2, …, nomN };
+
+    // Renommage des valeurs exportées
+    export { variable1 as nom1, variable2 as nom2, …, nomN };
+
+    // Renommage avec la décomposition pour l'affectation
+    export const { nom1, nom2: truc } = o;
+
+    // Exports par défauts
+    export default expression;
+    export default function (…) { … } // fonctionne avec class, function*
+    export default function nom1(…) { … } // fonctionne avec class, function*
+    export { nom1 as default, … };
+
+    // Agrégation de modules
+    export * from …;
+    export { nom1, nom2, …, nomN } from …;
+    export { import1 as nom1, import2 as nom2, …, nomN } from …;
+    export { default } from …;
+
+- `nomN`
+  - : Identifiant à exporter (afin qu'il puisse être importé via {{jsxref("Statements/import", "import")}} dans un autre script).
+
+## Description
+
+Il existe deux types d'export différents : les exports **nommés** et les exports **par défaut**. Il est possible d'avoir plusieurs exports nommés mais un seul export par défaut. Chaque type correspond à une des syntaxes ci-dessus :
+
+- Les exports nommés :
+
+  ```js
+    // exporte une fonction déclarée précédemment
+    export { maFonction };
+
+    // exporte une constante
+    export const machin = Math.sqrt(2);
+    ```
+
+- Les exports par défaut (fonction) :
+
+  ```js
+    export default function() {} 
+    ```
+
+- Les exports par défaut (classe) :
+
+  ```js
+    export default class {} 
+    ```
+
+Les exports nommés sont utiles pour exporter plusieurs valeurs. Lors de l'importation, il est obligatoire d'utiliser le même nom de l'objet correspondant.
+
+Mais un export par défaut peut être importé avec n'importe quel nom, par exemple :
+
+```js
+let k;
+export default k = 12; // dans le fichier test.js
+import m from './test'; // notez que nous avons la liberté d'utiliser import m au lieu de import k, parce que k était l'export par défaut
+console.log (m); // enregistrera 12
+```
+
+La syntaxe suivante n'exporte pas le défaut depuis le module importé :
+
+```js
+export * from …;
+```
+
+Si vous avez besoin d'exporter le défaut, écrivez ce qui suit à la place :
+
+```js
+export {default} from 'mod';
+```
+
+Il est possible de renommer un export afin d'éviter des conflits de nommage :
+
+```js
+export { maFonction as fonction1
+         maVariable as variable1 };
+```
+
+On peut également agréger les valeurs exportées à celles d'autres modules qu'on aurait importés :
+
+```js
+// Dans moduleParent.js
+export { maFonction, maVariable } from 'moduleFils1.js';
+export { maClasse } from 'moduleFils2.js'
+
+// Dans le module de plus haut niveau
+import { maFonction, maVariable, maClasse } from 'moduleParent.js';
+```
+
+## Exemples
+
+### Utilisation d'exports nommés
+
+Dans le module, on pourra utiliser le code suivant :
+
+```js
+// module "mon-module.js"
+function cube(x) {
+  return x * x * x;
+}
+const machin = Math.PI + Math.SQRT2;
+export { cube, machin };
+```
+
+De cette façon, dans un autre script, on pourra avoir :
+
+```js
+import { cube, machin } from 'mon-module';
+console.log(cube(3)); // 27
+console.log(machin);    // 4.555806215962888
+```
+
+> **Note :** Si l'import est réalisé dans un script HTML, il faut que celui-ci soit chargé avec l'attribut {{htmlattrxref("type")}} `"module"` : `<script type="module" src="./demo.js"></script>` sinon il y aura une erreur quant aux origines multiples ([CORS](/fr/docs/Web/HTTP/CORS)).
+> Il n'est pas possible de charger des modules JavaScript via une URL `file://` pour des raisons de sécurité (voir [CORS](/fr/docs/Web/HTTP/CORS) également). Il faudra utiliser un serveur HTTP.
+
+### Utilisation d'exports par défaut
+
+Si on souhaite n'exporter qu'une seule valeur ou avoir une valeur de secours\* \*pour le module, on peut utiliser un export par défaut :
+
+```js
+// module "mon-module.js"
+export default function cube(x) {
+  return x * x * x;
+}
+```
+
+Alors, dans un autre script, il sera facile d'importer l'export par défaut :
+
+```js
+import cube from './mon-module.js';
+console.log(cube(3)); // 27
+```
+
+Notez qu'il n'est pas possible d'utiliser `var`, `let` ou `const` avec `export default`.
+
+## Spécifications
+
+| Spécification                                                        | Statut                       | Commentaire         |
+| -------------------------------------------------------------------- | ---------------------------- | ------------------- |
+| {{SpecName('ES2015', '#sec-exports', 'Exports')}}     | {{Spec2('ES2015')}}     | Définition initiale |
+| {{SpecName('ESDraft', '#sec-exports', 'Exports')}} | {{Spec2('ESDraft')}} |                     |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.statements.export")}}
+
+## Voir aussi
+
+- {{jsxref("Instructions/import", "import")}}
+- [Guide sur les modules JavaScript](/fr/docs/Web/JavaScript/Guide/Modules)
+- [ES6 in Depth: Modules](https://hacks.mozilla.org/2015/08/es6-in-depth-modules/), Hacks blog post par Jason Orendorff
+- [Livre d'Axel Rauschmayer : "Exploring JS: Modules"](https://exploringjs.com/es6/ch_modules.html)
+- [Un billet illustré de Lin Clark, traduit en français, sur les modules](https://tech.mozfr.org/post/2018/04/06/Une-plongee-illustree-dans-les-modules-ECMAScript)
diff --git a/files/fr/web/javascript/reference/statements/for-await...of/index.html b/files/fr/web/javascript/reference/statements/for-await...of/index.html
deleted file mode 100644
index 131c9c4ef3..0000000000
--- a/files/fr/web/javascript/reference/statements/for-await...of/index.html
+++ /dev/null
@@ -1,139 +0,0 @@
----
-title: for await...of
-slug: Web/JavaScript/Reference/Statements/for-await...of
-tags:
-  - Instruction
-  - JavaScript
-  - Reference
-translation_of: Web/JavaScript/Reference/Statements/for-await...of
-original_slug: Web/JavaScript/Reference/Instructions/for-await...of
----
-<div>{{jsSidebar("Statements")}}</div>
-
-<p>L'instruction <strong><code>for await...of</code> </strong>permet de créer une boucle qui parcourt les objets itérables asynchrones de la même façon qu'on parcourt les itérables synchrones (tels que les chaînes de caractères ({{jsxref("String")}}), les tableaux {{jsxref("Array")}}, les objets semblables aux tableaux comme {{jsxref("Fonctions/arguments", "arguments")}} ou {{domxref("NodeList")}}), {{jsxref("TypedArray")}}, {{jsxref("Map")}}, {{jsxref("Set")}}. Cette instruction invoque un mécanisme d'itération spécifique et les instructions à exécuter pour chaque propriété de l'objet.</p>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">for await (<em>variable</em> of <em>iterable</em>) {
-  <em>instruction
-</em>}
-</pre>
-
-<dl>
- <dt><code>variable</code></dt>
- <dd>À chaque itération, la valeur d'une propriété différente est affectée à <em>variable</em>. Cette variable peut être déclarée avec <code>const</code>, <code>let</code> ou <code>var</code>.</dd>
- <dt><code>iterable</code></dt>
- <dd>Un objet pour lequel on parcourt les propriétés itérables.</dd>
-</dl>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Parcourir_des_itérables_asynchrones">Parcourir des itérables asynchrones</h3>
-
-<pre class="brush:js">var asyncIterable = {
-  [Symbol.asyncIterator]() {
-    return {
-      i: 0,
-      next() {
-        if (this.i &lt; 3) {
-          return Promise.resolve({ value: this.i++, done: false });
-        }
-
-        return Promise.resolve({ done: true });
-      }
-    };
-  }
-};
-
-(async function() {
-   for await (let num of asyncIterable) {
-     console.log(num);
-  }
-})();
-// 0
-// 1
-// 2
-</pre>
-
-<h3 id="Parcourir_des_générateurs_asynchrones">Parcourir des générateurs asynchrones</h3>
-
-<p>Les générateurs asynchrones implémentent le protocole d'itérateur asynchrone et on peut donc les parcourir avec <code>for await...of</code>:</p>
-
-<pre>async function* asyncGenerator() {
-  var i = 0;
-  while (i &lt; 3) {
-    yield i++;
-  }
-}
-
-(async function() {
-  for await (let num of asyncGenerator()) {
-    console.log(num);
-  }
-})();
-// 0
-// 1
-// 2</pre>
-
-<p>Pour prendre un exemple plus concret, on peut parcourir les données fournies par une API avec un générateur asynchrone grâce à <code>for await... of</code>. Dans cet exemple, on commence par créer un itérateur asynchrone à partir d'un flux de données puis on utilise cet itérateur et <code>for await...of</code> afin de calculer la taille de la réponse fournie par l'API :</p>
-
-<pre class="brush: js">async function* streamAsyncIterator(stream) {
-  const reader = stream.getReader();
-  try {
-    while (true) {
-      const { done, value } = await reader.read();
-      if (done) {
-        return;
-      }
-      yield value;
-    }
-  } finally {
-    reader.releaseLock();
-  }
-}
-// On récupère les données d'une URL et
-// on calcule la taille de la réponse
-// avec un générateur asynchrone
-async function getResponseSize(url) {
-  const response = await fetch(url);
-  // La taille de la réponse, exprimée en octets.
-  let responseSize = 0;
-  // La boucle for-await-of qui parcourt, de façon asynchrone,
-  // chaque portion de la réponse.
-  for await (const chunk of streamAsyncIterator(response.body)) {
-    responseSize += chunk.length;
-  }
-
-  console.log(`Taille de la réponse : ${responseSize} octets`);
-  return responseSize;
-}
-getResponseSize('https://jsonplaceholder.typicode.com/photos');</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-for-in-and-for-of-statements', 'ECMAScript Language: The for-in, for-of, and for-await-of Statements')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.statements.for_await_of")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Instructions/for...of")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/statements/for-await...of/index.md b/files/fr/web/javascript/reference/statements/for-await...of/index.md
new file mode 100644
index 0000000000..cf6c423365
--- /dev/null
+++ b/files/fr/web/javascript/reference/statements/for-await...of/index.md
@@ -0,0 +1,124 @@
+---
+title: for await...of
+slug: Web/JavaScript/Reference/Statements/for-await...of
+tags:
+  - Instruction
+  - JavaScript
+  - Reference
+translation_of: Web/JavaScript/Reference/Statements/for-await...of
+original_slug: Web/JavaScript/Reference/Instructions/for-await...of
+---
+{{jsSidebar("Statements")}}
+
+L'instruction **`for await...of` **permet de créer une boucle qui parcourt les objets itérables asynchrones de la même façon qu'on parcourt les itérables synchrones (tels que les chaînes de caractères ({{jsxref("String")}}), les tableaux {{jsxref("Array")}}, les objets semblables aux tableaux comme {{jsxref("Fonctions/arguments", "arguments")}} ou {{domxref("NodeList")}}), {{jsxref("TypedArray")}}, {{jsxref("Map")}}, {{jsxref("Set")}}. Cette instruction invoque un mécanisme d'itération spécifique et les instructions à exécuter pour chaque propriété de l'objet.
+
+## Syntaxe
+
+    for await (variable of iterable) {
+      instruction
+    }
+
+- `variable`
+  - : À chaque itération, la valeur d'une propriété différente est affectée à _variable_. Cette variable peut être déclarée avec `const`, `let` ou `var`.
+- `iterable`
+  - : Un objet pour lequel on parcourt les propriétés itérables.
+
+## Exemples
+
+### Parcourir des itérables asynchrones
+
+```js
+var asyncIterable = {
+  [Symbol.asyncIterator]() {
+    return {
+      i: 0,
+      next() {
+        if (this.i < 3) {
+          return Promise.resolve({ value: this.i++, done: false });
+        }
+
+        return Promise.resolve({ done: true });
+      }
+    };
+  }
+};
+
+(async function() {
+   for await (let num of asyncIterable) {
+     console.log(num);
+  }
+})();
+// 0
+// 1
+// 2
+```
+
+### Parcourir des générateurs asynchrones
+
+Les générateurs asynchrones implémentent le protocole d'itérateur asynchrone et on peut donc les parcourir avec `for await...of`:
+
+    async function* asyncGenerator() {
+      var i = 0;
+      while (i < 3) {
+        yield i++;
+      }
+    }
+
+    (async function() {
+      for await (let num of asyncGenerator()) {
+        console.log(num);
+      }
+    })();
+    // 0
+    // 1
+    // 2
+
+Pour prendre un exemple plus concret, on peut parcourir les données fournies par une API avec un générateur asynchrone grâce à `for await... of`. Dans cet exemple, on commence par créer un itérateur asynchrone à partir d'un flux de données puis on utilise cet itérateur et `for await...of` afin de calculer la taille de la réponse fournie par l'API :
+
+```js
+async function* streamAsyncIterator(stream) {
+  const reader = stream.getReader();
+  try {
+    while (true) {
+      const { done, value } = await reader.read();
+      if (done) {
+        return;
+      }
+      yield value;
+    }
+  } finally {
+    reader.releaseLock();
+  }
+}
+// On récupère les données d'une URL et
+// on calcule la taille de la réponse
+// avec un générateur asynchrone
+async function getResponseSize(url) {
+  const response = await fetch(url);
+  // La taille de la réponse, exprimée en octets.
+  let responseSize = 0;
+  // La boucle for-await-of qui parcourt, de façon asynchrone,
+  // chaque portion de la réponse.
+  for await (const chunk of streamAsyncIterator(response.body)) {
+    responseSize += chunk.length;
+  }
+
+  console.log(`Taille de la réponse : ${responseSize} octets`);
+  return responseSize;
+}
+getResponseSize('https://jsonplaceholder.typicode.com/photos');
+```
+
+## Spécifications
+
+| Spécification                                                                                                                                                                    | État                         | Commentaires |
+| -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | ------------ |
+| {{SpecName('ESDraft', '#sec-for-in-and-for-of-statements', 'ECMAScript Language: The for-in, for-of, and for-await-of Statements')}} | {{Spec2('ESDraft')}} |              |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.statements.for_await_of")}}
+
+## Voir aussi
+
+- {{jsxref("Instructions/for...of")}}
diff --git a/files/fr/web/javascript/reference/statements/for...in/index.html b/files/fr/web/javascript/reference/statements/for...in/index.html
deleted file mode 100644
index 09e460472d..0000000000
--- a/files/fr/web/javascript/reference/statements/for...in/index.html
+++ /dev/null
@@ -1,156 +0,0 @@
----
-title: for...in
-slug: Web/JavaScript/Reference/Statements/for...in
-tags:
-  - Instruction
-  - JavaScript
-  - Reference
-  - Statement
-translation_of: Web/JavaScript/Reference/Statements/for...in
-original_slug: Web/JavaScript/Reference/Instructions/for...in
----
-<div>{{jsSidebar("Statements")}}</div>
-
-<p>L'<strong>instruction <code>for...in</code></strong> permet d'itérer sur les <a href="/fr/docs/Web/JavaScript/Caract%C3%A8re_%C3%A9num%C3%A9rable_des_propri%C3%A9t%C3%A9s_et_rattachement">propriétés énumérables</a> d'un objet qui ne sont pas <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Symbol">des symboles</a>. Pour chaque propriété obtenue, on exécute une instruction (ou plusieurs grâce à un {{jsxref("Instructions/bloc","bloc","",1)}} d'instructions).</p>
-
-<div>{{EmbedInteractiveExample("pages/js/statement-forin.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">for (<var>variable</var> in <var>objet</var>) {
-<em>  instructions</em>
-}</pre>
-
-<dl>
- <dt><code>variable</code></dt>
- <dd>Un nom de propriété différent est assigné à la variable à chaque itération de la boucle.</dd>
- <dt><code>objet</code></dt>
- <dd>L'objet dont les propriétés énumérables et qui ne sont pas des symboles sont parcourues par la boucle.</dd>
-</dl>
-
-<h2 id="Description">Description</h2>
-
-<p>Une boucle <code>for...in</code> ne parcourt que les propriétés énumérables et qui ne sont pas des symboles. Les objets qui ont été créés par des constructeurs intégrés comme Array et Object ont hérité de propriétés non énumérables de <code>Object.prototype</code> et <code>String.prototype</code> comme les méthodes {{jsxref("String.prototype.indexOf","indexOf()")}} du type {{jsxref("String")}} ou {{jsxref("Object.prototype.toString","toString()")}} depuis {{jsxref("Object")}}. La boucle parcourera toutes les propriétés énumérables de l'objet et aussi celles dont il hérite du prototype du constructeur (les propriétés les plus proches de l'objet dans la chaîne des prototypes primeront sur les propriétés des prototypes).</p>
-
-<h3 id="Les_propriétés_ajoutées_modifiées_ou_supprimées">Les propriétés ajoutées, modifiées ou supprimées</h3>
-
-<p>Une boucle <code>for...in</code> parcourt les propriétés d'un objet dans un ordre arbitraire (voir l'opérateur {{jsxref("Opérateurs/L_opérateur_delete","delete")}} pour plus d'explications quant à l'impossibilité de se fier à un tel ordre, au moins dans le cas où on souhaite gérer plusieurs navigateurs).</p>
-
-<p>Si une propriété est modifiée dans une des itérations de la boucle et que la boucle itère ensuite sur cette propriété, sa valeur sera celle qui a été modifiée. Une propriété qui a été supprimée avant que la boucle n'itère sur celle-là ne sera pas dans la boucle. Les propriétés qui ont été ajoutées à l'objet pendant la boucle peuvent être ou ne pas être pris en compte.</p>
-
-<p>Une bonne pratique consiste à ne pas ajouter, modifier ou supprimer une propriété d'un objet lors d'une itération qui ne concerne pas cette propriété. Il n'y a aucune certitude concernant la prise en compte d'une propriété ajoutée lors d'une telle boucle et il en va de même pour savoir si on a visité une propriété avant ou après qu'elle ait été modifiée ou de savoir si une itération de la boucle concernera une propriété avant que celle-ci soit supprimée.</p>
-
-<h3 id="Utiliser_for...in_et_parcourir_un_tableau">Utiliser <code>for...in</code> et parcourir un tableau</h3>
-
-<div class="note">
-<p><strong>Note :</strong> <code>for...in</code> ne doit pas être utilisée pour parcourir un {{jsxref("Array")}} lorsque l'ordre des éléments est important.</p>
-</div>
-
-<p>Les éléments des indices d'un tableau sont des propriétés énumérables dont les noms sont des entiers, excepté cela, elles sont en tout point identiques aux propriétés des objets en général. Ici aussi, il n'y a aucune certitude que <code>for...in</code> renvoie les indices dans un ordre particulier. Cette instruction listera également les propriétés énumérables dont les noms ne sont pas des entiers et celles qui sont héritées.</p>
-
-<p>L'ordre dans lequel le parcours est effectué dépend de l'implémentation. Dans le cas d'un parcours de tableau utilisant <code>for...in</code>, on pourrait très bien avoir un ordre qui ne soit pas le même entre les différents environnements. Pour cette raison, il est préférable d'utiliser une boucle {{jsxref("Instructions/for","for")}} utilisant un compteur numérique (ou {{jsxref("Array.prototype.forEach","Array.forEach()")}} ou encore {{jsxref("Instructions/for...of","for...of")}}) lorsqu'on souhaite parcourir des tableaux dans un ordre bien défini.</p>
-
-<h3 id="Itérer_uniquement_sur_les_propriétés_non_héritées">Itérer uniquement sur les propriétés non héritées</h3>
-
-<p>Si on souhaite ne parcourir que les propriétés propres d'un objet et pas celles rattachées à ses prototypes, on peut utiliser la méthode {{jsxref("Object.getOwnPropertyNames()")}} ou bien effectuer un test grâce à la méthode {{jsxref("Object.prototype.hasOwnProperty()")}} voire avec {{jsxref("Object.prototype.propertyIsEnumerable()")}}</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<p>La boucle <code>for...in</code> qui suit utilise parcourt l'objet <code>obj</code> et ses propriétés énumérables qui ne sont pas des symboles en fournissant la chaîne de caractères qui décrit le nom de la propriété et sa valeur.</p>
-
-<pre class="brush: js">var obj = {a:1, b:2, c:3};
-
-for (var prop in obj) {
-  console.log(`obj.${prop} = ${obj[prop]}`);
-}
-
-// Affiche dans la console :
-// "obj.a = 1"
-// "obj.b = 2"
-// "obj.c = 3"</pre>
-
-<p>La fonction qui suit utilise {{jsxref("Object.hasOwnProperty", "hasOwnProperty()")}} pour ne pas afficher les propriétés héritées :</p>
-
-<pre class="brush: js">var triangle = {a:1, b:2, c:3};
-
-function TriangleCouleur() {
-  this.couleur = "rouge";
-}
-
-TriangleCouleur.prototype = triangle;
-
-var obj = new TriangleCouleur();
-
-for (var prop in obj) {
-  if( obj.hasOwnProperty( prop ) ) {
-    console.log(`obj.${prop} = ${obj[prop]}`);
-  }
-}
-
-// Affichera dans la console :
-// "obj.couleur = rouge"</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES1', '#sec-12.6.3', 'for...in statement')}}</td>
-   <td>{{Spec2('ES1')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-12.6.4', 'for...in statement')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-for-in-and-for-of-statements', 'for...in statement')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-for-in-and-for-of-statements', 'for...in statement')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.statements.for_in")}}</p>
-
-<h3 id="Expressions_avec_initialisateur">Expressions avec initialisateur</h3>
-
-<p>Avant SpiderMonkey 40 {{geckoRelease(40)}}, il était possible d'utiliser un initialisateur (<code>i=0</code>) dans un boucle <code>for...in</code> :</p>
-
-<pre class="brush: js example-bad">var obj = {a:1, b:2, c:3};
-for(var i=0 in obj) {
-  console.log(obj[i]);
-}
-// 1
-// 2
-// 3
-</pre>
-
-<p>Ce comportement non-standard a été retiré avec la version 40. Cela provoquera désormais une exception {{jsxref("SyntaxError")}} ("<em><a href="/fr/docs/Web/JavaScript/Reference/Erreurs/Invalid_for-in_initializer">for-in loop head declarations may not have initializers</a></em>") en <a href="/fr/docs/Web/JavaScript/Reference/Strict_mode">mode strict</a> (cf. {{bug(748550)}} et {{bug(1164741)}}).</p>
-
-<p>Les autres moteurs, tels que v8 (Chrome), Chakra (IE/Edge) et JSC (WebKit/Safari) recherchent également comment retirer ce comportement non standard.</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Instructions/for...of","for...of")}} : une instruction semblable qui permet d'itérer sur les valeurs des propriétés</li>
- <li>{{jsxref("Instructions/for","for")}}</li>
- <li><a href="/fr/docs/Web/JavaScript/Caractère_énumérable_des_propriétés_et_rattachement">Le rattachement et le caractère énumérable des propriétés</a></li>
- <li>{{jsxref("Object.getOwnPropertyNames()")}}</li>
- <li>{{jsxref("Object.prototype.hasOwnProperty()")}}</li>
- <li>{{jsxref("Array.prototype.forEach()")}}</li>
- <li>{{jsxref("Instructions/for_each...in", "for each...in")}} {{deprecated_inline}} : une instruction semblable, dépréciée, qui parcourt les valeurs des propriétés d'un objet plutôt que les noms.</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/statements/for...in/index.md b/files/fr/web/javascript/reference/statements/for...in/index.md
new file mode 100644
index 0000000000..bff2b835d6
--- /dev/null
+++ b/files/fr/web/javascript/reference/statements/for...in/index.md
@@ -0,0 +1,132 @@
+---
+title: for...in
+slug: Web/JavaScript/Reference/Statements/for...in
+tags:
+  - Instruction
+  - JavaScript
+  - Reference
+  - Statement
+translation_of: Web/JavaScript/Reference/Statements/for...in
+original_slug: Web/JavaScript/Reference/Instructions/for...in
+---
+{{jsSidebar("Statements")}}
+
+L'**instruction `for...in`** permet d'itérer sur les [propriétés énumérables](/fr/docs/Web/JavaScript/Caract%C3%A8re_%C3%A9num%C3%A9rable_des_propri%C3%A9t%C3%A9s_et_rattachement) d'un objet qui ne sont pas [des symboles](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Symbol). Pour chaque propriété obtenue, on exécute une instruction (ou plusieurs grâce à un {{jsxref("Instructions/bloc","bloc","",1)}} d'instructions).
+
+{{EmbedInteractiveExample("pages/js/statement-forin.html")}}
+
+## Syntaxe
+
+    for (variable in objet) {
+      instructions
+    }
+
+- `variable`
+  - : Un nom de propriété différent est assigné à la variable à chaque itération de la boucle.
+- `objet`
+  - : L'objet dont les propriétés énumérables et qui ne sont pas des symboles sont parcourues par la boucle.
+
+## Description
+
+Une boucle `for...in` ne parcourt que les propriétés énumérables et qui ne sont pas des symboles. Les objets qui ont été créés par des constructeurs intégrés comme Array et Object ont hérité de propriétés non énumérables de `Object.prototype` et `String.prototype` comme les méthodes {{jsxref("String.prototype.indexOf","indexOf()")}} du type {{jsxref("String")}} ou {{jsxref("Object.prototype.toString","toString()")}} depuis {{jsxref("Object")}}. La boucle parcourera toutes les propriétés énumérables de l'objet et aussi celles dont il hérite du prototype du constructeur (les propriétés les plus proches de l'objet dans la chaîne des prototypes primeront sur les propriétés des prototypes).
+
+### Les propriétés ajoutées, modifiées ou supprimées
+
+Une boucle `for...in` parcourt les propriétés d'un objet dans un ordre arbitraire (voir l'opérateur {{jsxref("Opérateurs/L_opérateur_delete","delete")}} pour plus d'explications quant à l'impossibilité de se fier à un tel ordre, au moins dans le cas où on souhaite gérer plusieurs navigateurs).
+
+Si une propriété est modifiée dans une des itérations de la boucle et que la boucle itère ensuite sur cette propriété, sa valeur sera celle qui a été modifiée. Une propriété qui a été supprimée avant que la boucle n'itère sur celle-là ne sera pas dans la boucle. Les propriétés qui ont été ajoutées à l'objet pendant la boucle peuvent être ou ne pas être pris en compte.
+
+Une bonne pratique consiste à ne pas ajouter, modifier ou supprimer une propriété d'un objet lors d'une itération qui ne concerne pas cette propriété. Il n'y a aucune certitude concernant la prise en compte d'une propriété ajoutée lors d'une telle boucle et il en va de même pour savoir si on a visité une propriété avant ou après qu'elle ait été modifiée ou de savoir si une itération de la boucle concernera une propriété avant que celle-ci soit supprimée.
+
+### Utiliser `for...in` et parcourir un tableau
+
+> **Note :** `for...in` ne doit pas être utilisée pour parcourir un {{jsxref("Array")}} lorsque l'ordre des éléments est important.
+
+Les éléments des indices d'un tableau sont des propriétés énumérables dont les noms sont des entiers, excepté cela, elles sont en tout point identiques aux propriétés des objets en général. Ici aussi, il n'y a aucune certitude que `for...in` renvoie les indices dans un ordre particulier. Cette instruction listera également les propriétés énumérables dont les noms ne sont pas des entiers et celles qui sont héritées.
+
+L'ordre dans lequel le parcours est effectué dépend de l'implémentation. Dans le cas d'un parcours de tableau utilisant `for...in`, on pourrait très bien avoir un ordre qui ne soit pas le même entre les différents environnements. Pour cette raison, il est préférable d'utiliser une boucle {{jsxref("Instructions/for","for")}} utilisant un compteur numérique (ou {{jsxref("Array.prototype.forEach","Array.forEach()")}} ou encore {{jsxref("Instructions/for...of","for...of")}}) lorsqu'on souhaite parcourir des tableaux dans un ordre bien défini.
+
+### Itérer uniquement sur les propriétés non héritées
+
+Si on souhaite ne parcourir que les propriétés propres d'un objet et pas celles rattachées à ses prototypes, on peut utiliser la méthode {{jsxref("Object.getOwnPropertyNames()")}} ou bien effectuer un test grâce à la méthode {{jsxref("Object.prototype.hasOwnProperty()")}} voire avec {{jsxref("Object.prototype.propertyIsEnumerable()")}}
+
+## Exemples
+
+La boucle `for...in` qui suit utilise parcourt l'objet `obj` et ses propriétés énumérables qui ne sont pas des symboles en fournissant la chaîne de caractères qui décrit le nom de la propriété et sa valeur.
+
+```js
+var obj = {a:1, b:2, c:3};
+
+for (var prop in obj) {
+  console.log(`obj.${prop} = ${obj[prop]}`);
+}
+
+// Affiche dans la console :
+// "obj.a = 1"
+// "obj.b = 2"
+// "obj.c = 3"
+```
+
+La fonction qui suit utilise {{jsxref("Object.hasOwnProperty", "hasOwnProperty()")}} pour ne pas afficher les propriétés héritées :
+
+```js
+var triangle = {a:1, b:2, c:3};
+
+function TriangleCouleur() {
+  this.couleur = "rouge";
+}
+
+TriangleCouleur.prototype = triangle;
+
+var obj = new TriangleCouleur();
+
+for (var prop in obj) {
+  if( obj.hasOwnProperty( prop ) ) {
+    console.log(`obj.${prop} = ${obj[prop]}`);
+  }
+}
+
+// Affichera dans la console :
+// "obj.couleur = rouge"
+```
+
+## Spécifications
+
+| Spécification                                                                                                | État                         | Commentaires         |
+| ------------------------------------------------------------------------------------------------------------ | ---------------------------- | -------------------- |
+| {{SpecName('ES1', '#sec-12.6.3', 'for...in statement')}}                                 | {{Spec2('ES1')}}         | Définition initiale. |
+| {{SpecName('ES5.1', '#sec-12.6.4', 'for...in statement')}}                                 | {{Spec2('ES5.1')}}     |                      |
+| {{SpecName('ES6', '#sec-for-in-and-for-of-statements', 'for...in statement')}}     | {{Spec2('ES6')}}         |                      |
+| {{SpecName('ESDraft', '#sec-for-in-and-for-of-statements', 'for...in statement')}} | {{Spec2('ESDraft')}} |                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.statements.for_in")}}
+
+### Expressions avec initialisateur
+
+Avant SpiderMonkey 40 {{geckoRelease(40)}}, il était possible d'utiliser un initialisateur (`i=0`) dans un boucle `for...in` :
+
+```js example-bad
+var obj = {a:1, b:2, c:3};
+for(var i=0 in obj) {
+  console.log(obj[i]);
+}
+// 1
+// 2
+// 3
+```
+
+Ce comportement non-standard a été retiré avec la version 40. Cela provoquera désormais une exception {{jsxref("SyntaxError")}} ("_[for-in loop head declarations may not have initializers](/fr/docs/Web/JavaScript/Reference/Erreurs/Invalid_for-in_initializer)_") en [mode strict](/fr/docs/Web/JavaScript/Reference/Strict_mode) (cf. {{bug(748550)}} et {{bug(1164741)}}).
+
+Les autres moteurs, tels que v8 (Chrome), Chakra (IE/Edge) et JSC (WebKit/Safari) recherchent également comment retirer ce comportement non standard.
+
+## Voir aussi
+
+- {{jsxref("Instructions/for...of","for...of")}} : une instruction semblable qui permet d'itérer sur les valeurs des propriétés
+- {{jsxref("Instructions/for","for")}}
+- [Le rattachement et le caractère énumérable des propriétés](/fr/docs/Web/JavaScript/Caractère_énumérable_des_propriétés_et_rattachement)
+- {{jsxref("Object.getOwnPropertyNames()")}}
+- {{jsxref("Object.prototype.hasOwnProperty()")}}
+- {{jsxref("Array.prototype.forEach()")}}
+- {{jsxref("Instructions/for_each...in", "for each...in")}} {{deprecated_inline}} : une instruction semblable, dépréciée, qui parcourt les valeurs des propriétés d'un objet plutôt que les noms.
diff --git a/files/fr/web/javascript/reference/statements/for...of/index.html b/files/fr/web/javascript/reference/statements/for...of/index.html
deleted file mode 100644
index dfda033855..0000000000
--- a/files/fr/web/javascript/reference/statements/for...of/index.html
+++ /dev/null
@@ -1,313 +0,0 @@
----
-title: for...of
-slug: Web/JavaScript/Reference/Statements/for...of
-tags:
-  - ECMAScript 2015
-  - Instruction
-  - JavaScript
-  - Reference
-translation_of: Web/JavaScript/Reference/Statements/for...of
-original_slug: Web/JavaScript/Reference/Instructions/for...of
----
-<div>{{jsSidebar("Statements")}}</div>
-
-<p>L'<strong>instruction <code>for...of</code></strong> permet de créer une boucle {{jsxref("Array")}} qui parcourt un {{jsxref("Les_protocoles_iteration","objet itérable","#Le_protocole_.C2.AB_it.C3.A9rable_.C2.BB",1)}} (ce qui inclut les objets {{jsxref("Array")}}, {{jsxref("Map")}}, {{jsxref("Set")}}, {{jsxref("String")}}, {{jsxref("TypedArray")}}, l'objet {{jsxref("Fonctions/arguments","arguments")}}, etc.) et qui permet d'exécuter une ou plusieurs instructions pour la valeur de chaque propriété.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/statement-forof.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">for (<em><var>variable</var></em> of iterable)
-  <em>instruction</em>
-</pre>
-
-<dl>
- <dt><code>variable</code></dt>
- <dd>À chaque itération, la valeur d'une propriété différente est affectée à <code><em>variable</em></code> (cette variable peut être déclarée avec <code>const</code>, <code>let</code> ou <code>var</code>).</dd>
- <dt><code>iterable</code></dt>
- <dd>L'objet dont on parcourt les propriétés énumérables.</dd>
- <dt><code>instruction</code></dt>
- <dd>Une instruction à exécuter pour chaque propriété, cette instruction peut être composée de plusieurs instructions en utilisant un {{jsxref("Instructions/bloc","bloc","",1)}} d'instructions.</dd>
-</dl>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Utiliser_for...of_sur_un_tableau">Utiliser <code>for...of</code> sur un tableau</h3>
-
-<pre class="brush: js">let tableauItérable = [1, 2, 3];
-
-for (let valeur of tableauItérable) {
-  console.log(valeur);
-}
-// 1
-// 2
-// 3</pre>
-
-<p>Si la variable n'est pas réaffectée dans la boucle, on pourra également utiliser <code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/const">const</a></code> à la place de <code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/let">let</a></code> :</p>
-
-<pre class="brush: js">let tableauItérable = [1, 2, 3];
-
-for (const valeur of tableauItérable) {
-  console.log(valeur);
-}
-// 1
-// 2
-// 3</pre>
-
-<h3 id="Parcourir_une_chaîne_de_caractères_avec_for...of">Parcourir une chaîne de caractères avec <code>for...of</code></h3>
-
-<pre class="brush: js">let iterable = 'pixel';
-
-for (let valeur of iterable) {
-  console.log(valeur);
-}
-// p
-// i
-// x
-// e
-// l</pre>
-
-<h3 id="Parcourir_un_tableau_typé_(jsxref(TypedArray))">Parcourir un tableau typé ({{jsxref("TypedArray")}})</h3>
-
-<pre class="brush: js">let iterable = new Uint8Array([0x00, 0xff]);
-
-for (let valeur of iterable) {
-  console.log(valeur);
-}
-// 0
-// 255</pre>
-
-<h3 id="Parcourir_une_jsxref(Map)">Parcourir une {{jsxref("Map")}}</h3>
-
-<pre class="brush: js">let iterable = new Map([['a', 1], ['b', 2], ['c', 3]]);
-
-for (let element of iterable) {
-  console.log(element);
-}
-// ['a', 1]
-// ['b', 2]
-// ['c', 3]
-
-for (let [clef, valeur] of iterable) {
-  console.log(valeur);
-}
-// 1
-// 2
-// 3</pre>
-
-<h3 id="Utiliser_Array.prototype.forEach()">Utiliser <code>Array.prototype.forEach()</code></h3>
-
-<p>Pour obtenir les mêmes valeurs qu'avec une boucle <code>for...of</code>, on peut utiliser la méthode {{jsxref("Array.prototype.forEach()")}} :</p>
-
-<pre class="brush: js">let arr = [3, 5, 7];
-arr.toto = "coucou";
-
-arr.forEach(function (element, index) {
-  console.log(element); // affiche "3", "5", "7"
-  console.log(index);  // affiche "0", "1", "2"
-});
-
-// ou avec Object.keys()
-
-Object.keys(arr).forEach(function (element, index) {
-  console.log(arr[element]); // affiche "3", "5", "7", "coucou"
-  console.log(arr[index]);  // affiche "3", "5", "7", undefined
-});</pre>
-
-<h3 id="Parcourir_l'objet_arguments">Parcourir l'objet <code>arguments</code></h3>
-
-<p>Il est possible de parcourir l'objet {{jsxref("Fonctions/arguments", "arguments")}} afin d'examiner l'ensemble des paramètres passés à la fonction :</p>
-
-<pre class="brush: js">(function() {
-  for (let argument of arguments){
-    console.log(argument);
-  }
-})(1, 2, 3);
-
-// 1
-// 2
-// 3
-</pre>
-
-<h3 id="Parcourir_des_collections_DOM">Parcourir des collections DOM</h3>
-
-<p>Il est possible de parcourir des collections DOM telles que {{domxref("NodeList")}}. Dans cet exemple, on ajoute une classe <code>read</code> aux paragraphes qui sont des descendants directs d'un article :</p>
-
-<pre class="brush:js">// Note : Cela ne fonctionnera que pour les plates-formes
-// qui implémentent NodeList.prototype[Symbol.iterator]
-let articleParagraphs = document.querySelectorAll("article &gt; p");
-
-for (let paragraph of articleParagraphs) {
-  paragraph.classList.add("read");
-}
-</pre>
-
-<h3 id="Clôturer_les_itérateurs">Clôturer les itérateurs</h3>
-
-<p>Dans les boucles <code>for...of</code>, on peut provoquer la fin de l'itérateur avec <code>break</code>, <code>continue</code>, <code>throw</code>, ou <code>return</code>. Dans ces cas, l'itérateur est fermé.</p>
-
-<pre class="brush: js">function* toto() {
-  yield 1;
-  yield 2;
-  yield 3;
-};
-
-for (let o of toto()) {
-  console.log(o);
-  break; // L'itérateur est fermé
-}
-</pre>
-
-<h3 id="Itérer_sur_les_générateurs">Itérer sur les générateurs</h3>
-
-<p>Grâce à cette instruction, on peut également itérer sur les {{jsxref("Instructions/function*","générateurs","",1)}} :</p>
-
-<pre class="brush:js">function* fibonacci() { // une fonction génératrice
-  let [prev, curr] = [0, 1];
-  while (true) {
-    [prev, curr] = [curr, prev + curr];
-    yield curr;
-  }
-}
-
-for (let n of fibonacci()) {
-  console.log(n);
-  // on arrête la séquence à 1000
-  if (n &gt;= 1000){
-    break;
-  }
-}
-</pre>
-
-<h3 id="Itérer_sur_les_autres_objets_itérables">Itérer sur les autres objets itérables</h3>
-
-<p>Il est aussi possible d'itérer sur un objet qui implémente <a href="/fr/docs/Web/JavaScript/Reference/Les_protocoles_iteration#Le_protocole_«_itérable_»">le protocole itérable</a> de façon explicite :</p>
-
-<pre class="brush: js">var iterable = {
-  [Symbol.iterator]() {
-    return {
-      i: 0,
-      next() {
-        if (this.i &lt; 3) {
-          return { value: this.i++, done: false };
-        }
-        return { value: undefined, done: true };
-      }
-    };
-  }
-};
-
-for (let value of iterable) {
-  console.log(value);
-}
-console.log("fini !");
-// 0
-// 1
-// 2</pre>
-
-<h3 id="Les_différences_entre_for...of_et_for...in">Les différences entre <code>for...of</code> et <code>for...in</code></h3>
-
-<p>Les deux instructions <code>for...in</code> et <code>for...of</code> permettent de parcourir un ensemble. Mais elles ne parcourent pas le même ensemble.</p>
-
-<p>L'instruction {{jsxref("Instructions/for...in", "for...in")}} permet de parcourir <a href="/fr/docs/Web/JavaScript/Caractère_énumérable_des_propriétés_et_rattachement">les propriétés énumérables</a> d'un objet dans un ordre arbitraire.</p>
-
-<p>L'instruction <code>for...of</code> permet quant à elle de parcourir les données contenues dans l'<a href="/fr/docs/Web/JavaScript/Guide/iterateurs_et_generateurs#Itérables">objet itérable</a> visé.</p>
-
-<p>Dans l'exemple qui suit, on illustre la différence de comportement entre une boucle <code>for...of</code> et une boucle <code>for...in</code> utilisées sur un tableau ({{jsxref("Array")}}).</p>
-
-<pre class="brush:js">Object.prototype.objCustom = function() {};
-Array.prototype.arrCustom = function() {};
-
-let iterable = [3, 5, 7];
-iterable.toto = 'coucou';
-
-for (let i in iterable) {
-  console.log(i); // affiche 0, 1, 2, "toto",
-                  // "arrCustom", "objCustom"
-}
-
-for (let i in iterable) {
-  if (iterable.hasOwnProperty(i)) {
-    console.log(i); // affiche 0, 1, 2, "toto"
-  }
-}
-
-for (let i of iterable) {
-  console.log(i); // affiche 3, 5, 7
-}
-</pre>
-
-<p>Chaque objet héritera de la propriété <code>objCustom</code> et chaque objet qui est un tableau ({{jsxref("Array")}}) héritera de la propriété <code>arrCustom</code> car on les ajoute aux prototypes {{jsxref("Object.prototype")}} et {{jsxref("Array.prototype")}}. L'objet <code>iterable</code> hérite donc des propriétés <code>objCustom</code> et <code>arrCustom</code> grâce <a href="/fr/docs/Web/JavaScript/Héritage_et_chaîne_de_prototypes">à l'héritage et à la chaîne de prototypes</a>.</p>
-
-<pre class="brush: js">for (let i in iterable) {
-  console.log(i); // affiche 0, 1, 2, "toto",
-                  // "arrCustom" et "objCustom"
-}</pre>
-
-<p>Cette boucle ne parcourt que les <a href="/fr/docs/Web/JavaScript/Caractère_énumérable_des_propriétés_et_rattachement">propriétés énumérables</a> de l'objet <code>iterable</code> dans un ordre arbitraire. Les éléments du tableau <code>3</code>, <code>5</code>, <code>7</code> ou <code>hello</code> ne sont pas affichés car ce ne sont pas des propriétés (et encore moins des propriétés énumérables). En revanche, on retrouve bien les indices du tableau et les propriétés <code>arrCustom</code> et <code>objCustom</code>. Pour décrire plus précisément ce comportement, vous pouvez consulter {{jsxref("Instructions/for...in", "for...in", "#/fr/docs/Web/JavaScript/Reference/Instructions/for...in#Utiliser_for...in_et_parcourir_un_tableau")}}.</p>
-
-<pre class="brush: js">for (let i in iterable) {
-  if (iterable.hasOwnProperty(i)) {
-    console.log(i); // affiche 0, 1, 2, "toto"
-  }
-}</pre>
-
-<p>Cette boucle ressemble à la première mais ajoute la méthode {{jsxref("Object.prototype.hasOwnProperty()", "hasOwnProperty()")}} qui permet de vérifier si la propriété énumérable recensée est directement disponible sur l'objet (c'est-à-dire si elle n'est pas héritée). La console affiche donc les propriétés <code>0</code>, <code>1</code>, <code>2</code> et <code>toto</code> car ce sont des propriétés directement rattachées à l'objet <code>iterable</code>. En revanche, les propriétés <code>arrCustom</code> et <code>objCustom</code> ne sont pas affichées car elles proviennent de l'héritage.</p>
-
-<pre class="brush: js">for (let i of iterable) {
-  console.log(i); // affiche 3, 5, 7
-}</pre>
-
-<p>Cette boucle parcourt les valeurs définies comme itérables par <a href="/fr/docs/Web/JavaScript/Reference/Les_protocoles_iteration#Le_protocole_.C2.AB_it.C3.A9rable_.C2.BB">l'objet itérable</a><strong> </strong>et dans ce cas ce sont les éléments du tableau <code>3</code>, <code>5</code>, <code>7</code> et pas les propriétés de l'objet.</p>
-
-<h3 id="Attention_à_ne_pas_réutiliser_les_générateurs">Attention à ne pas réutiliser les générateurs</h3>
-
-<p>Les générateurs ne doivent pas être réutilisés, même lorsque la boucle <code>for...of</code> a été interrompue (par exemple lorsque {{jsxref("Instructions/break","break")}} est utilisé). Lorsqu'on quitte une boucle, le générateur est clôturé et si on l'utilise à nouveau, il ne fournira aucun résultat. Firefox n'a pas encore implémenté ce comportement standard (cf. {{bug("1147371")}}).</p>
-
-<pre class="brush: js">var gen = (function *(){
-  yield 1;
-  yield 2;
-  yield 3;
-})();
-for (let o of gen) {
-  console.log(o);
-  break; // L'itérateur est fermé
-}
-
-// Le générateur ne doit pas être réutilisé !
-for (let o of gen){
-  console.log(o); // Ceci n'est jamais exécuté
-}</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-for-in-and-for-of-statements', 'instruction for...of')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-for-in-and-for-of-statements', 'instruction for...of')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.statements.for_of")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Array.prototype.forEach()")}}</li>
- <li>{{jsxref("Map.prototype.forEach()")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/statements/for...of/index.md b/files/fr/web/javascript/reference/statements/for...of/index.md
new file mode 100644
index 0000000000..3152676b06
--- /dev/null
+++ b/files/fr/web/javascript/reference/statements/for...of/index.md
@@ -0,0 +1,320 @@
+---
+title: for...of
+slug: Web/JavaScript/Reference/Statements/for...of
+tags:
+  - ECMAScript 2015
+  - Instruction
+  - JavaScript
+  - Reference
+translation_of: Web/JavaScript/Reference/Statements/for...of
+original_slug: Web/JavaScript/Reference/Instructions/for...of
+---
+{{jsSidebar("Statements")}}
+
+L'**instruction `for...of`** permet de créer une boucle {{jsxref("Array")}} qui parcourt un {{jsxref("Les_protocoles_iteration","objet itérable","#Le_protocole_.C2.AB_it.C3.A9rable_.C2.BB",1)}} (ce qui inclut les objets {{jsxref("Array")}}, {{jsxref("Map")}}, {{jsxref("Set")}}, {{jsxref("String")}}, {{jsxref("TypedArray")}}, l'objet {{jsxref("Fonctions/arguments","arguments")}}, etc.) et qui permet d'exécuter une ou plusieurs instructions pour la valeur de chaque propriété.
+
+{{EmbedInteractiveExample("pages/js/statement-forof.html")}}
+
+## Syntaxe
+
+    for (variable of iterable)
+      instruction
+
+- `variable`
+  - : À chaque itération, la valeur d'une propriété différente est affectée à `variable` (cette variable peut être déclarée avec `const`, `let` ou `var`).
+- `iterable`
+  - : L'objet dont on parcourt les propriétés énumérables.
+- `instruction`
+  - : Une instruction à exécuter pour chaque propriété, cette instruction peut être composée de plusieurs instructions en utilisant un {{jsxref("Instructions/bloc","bloc","",1)}} d'instructions.
+
+## Exemples
+
+### Utiliser `for...of` sur un tableau
+
+```js
+let tableauItérable = [1, 2, 3];
+
+for (let valeur of tableauItérable) {
+  console.log(valeur);
+}
+// 1
+// 2
+// 3
+```
+
+Si la variable n'est pas réaffectée dans la boucle, on pourra également utiliser [`const`](/fr/docs/Web/JavaScript/Reference/Instructions/const) à la place de [`let`](/fr/docs/Web/JavaScript/Reference/Instructions/let) :
+
+```js
+let tableauItérable = [1, 2, 3];
+
+for (const valeur of tableauItérable) {
+  console.log(valeur);
+}
+// 1
+// 2
+// 3
+```
+
+### Parcourir une chaîne de caractères avec `for...of`
+
+```js
+let iterable = 'pixel';
+
+for (let valeur of iterable) {
+  console.log(valeur);
+}
+// p
+// i
+// x
+// e
+// l
+```
+
+### Parcourir un tableau typé ({{jsxref("TypedArray")}})
+
+```js
+let iterable = new Uint8Array([0x00, 0xff]);
+
+for (let valeur of iterable) {
+  console.log(valeur);
+}
+// 0
+// 255
+```
+
+### Parcourir une {{jsxref("Map")}}
+
+```js
+let iterable = new Map([['a', 1], ['b', 2], ['c', 3]]);
+
+for (let element of iterable) {
+  console.log(element);
+}
+// ['a', 1]
+// ['b', 2]
+// ['c', 3]
+
+for (let [clef, valeur] of iterable) {
+  console.log(valeur);
+}
+// 1
+// 2
+// 3
+```
+
+### Utiliser `Array.prototype.forEach()`
+
+Pour obtenir les mêmes valeurs qu'avec une boucle `for...of`, on peut utiliser la méthode {{jsxref("Array.prototype.forEach()")}} :
+
+```js
+let arr = [3, 5, 7];
+arr.toto = "coucou";
+
+arr.forEach(function (element, index) {
+  console.log(element); // affiche "3", "5", "7"
+  console.log(index);  // affiche "0", "1", "2"
+});
+
+// ou avec Object.keys()
+
+Object.keys(arr).forEach(function (element, index) {
+  console.log(arr[element]); // affiche "3", "5", "7", "coucou"
+  console.log(arr[index]);  // affiche "3", "5", "7", undefined
+});
+```
+
+### Parcourir l'objet `arguments`
+
+Il est possible de parcourir l'objet {{jsxref("Fonctions/arguments", "arguments")}} afin d'examiner l'ensemble des paramètres passés à la fonction :
+
+```js
+(function() {
+  for (let argument of arguments){
+    console.log(argument);
+  }
+})(1, 2, 3);
+
+// 1
+// 2
+// 3
+```
+
+### Parcourir des collections DOM
+
+Il est possible de parcourir des collections DOM telles que {{domxref("NodeList")}}. Dans cet exemple, on ajoute une classe `read` aux paragraphes qui sont des descendants directs d'un article :
+
+```js
+// Note : Cela ne fonctionnera que pour les plates-formes
+// qui implémentent NodeList.prototype[Symbol.iterator]
+let articleParagraphs = document.querySelectorAll("article > p");
+
+for (let paragraph of articleParagraphs) {
+  paragraph.classList.add("read");
+}
+```
+
+### Clôturer les itérateurs
+
+Dans les boucles `for...of`, on peut provoquer la fin de l'itérateur avec `break`, `continue`, `throw`, ou `return`. Dans ces cas, l'itérateur est fermé.
+
+```js
+function* toto() {
+  yield 1;
+  yield 2;
+  yield 3;
+};
+
+for (let o of toto()) {
+  console.log(o);
+  break; // L'itérateur est fermé
+}
+```
+
+### Itérer sur les générateurs
+
+Grâce à cette instruction, on peut également itérer sur les {{jsxref("Instructions/function*","générateurs","",1)}} :
+
+```js
+function* fibonacci() { // une fonction génératrice
+  let [prev, curr] = [0, 1];
+  while (true) {
+    [prev, curr] = [curr, prev + curr];
+    yield curr;
+  }
+}
+
+for (let n of fibonacci()) {
+  console.log(n);
+  // on arrête la séquence à 1000
+  if (n >= 1000){
+    break;
+  }
+}
+```
+
+### Itérer sur les autres objets itérables
+
+Il est aussi possible d'itérer sur un objet qui implémente [le protocole itérable](/fr/docs/Web/JavaScript/Reference/Les_protocoles_iteration#Le_protocole_«_itérable_») de façon explicite :
+
+```js
+var iterable = {
+  [Symbol.iterator]() {
+    return {
+      i: 0,
+      next() {
+        if (this.i < 3) {
+          return { value: this.i++, done: false };
+        }
+        return { value: undefined, done: true };
+      }
+    };
+  }
+};
+
+for (let value of iterable) {
+  console.log(value);
+}
+console.log("fini !");
+// 0
+// 1
+// 2
+```
+
+### Les différences entre `for...of` et `for...in`
+
+Les deux instructions `for...in` et `for...of` permettent de parcourir un ensemble. Mais elles ne parcourent pas le même ensemble.
+
+L'instruction {{jsxref("Instructions/for...in", "for...in")}} permet de parcourir [les propriétés énumérables](/fr/docs/Web/JavaScript/Caractère_énumérable_des_propriétés_et_rattachement) d'un objet dans un ordre arbitraire.
+
+L'instruction `for...of` permet quant à elle de parcourir les données contenues dans l'[objet itérable](/fr/docs/Web/JavaScript/Guide/iterateurs_et_generateurs#Itérables) visé.
+
+Dans l'exemple qui suit, on illustre la différence de comportement entre une boucle `for...of` et une boucle `for...in` utilisées sur un tableau ({{jsxref("Array")}}).
+
+```js
+Object.prototype.objCustom = function() {};
+Array.prototype.arrCustom = function() {};
+
+let iterable = [3, 5, 7];
+iterable.toto = 'coucou';
+
+for (let i in iterable) {
+  console.log(i); // affiche 0, 1, 2, "toto",
+                  // "arrCustom", "objCustom"
+}
+
+for (let i in iterable) {
+  if (iterable.hasOwnProperty(i)) {
+    console.log(i); // affiche 0, 1, 2, "toto"
+  }
+}
+
+for (let i of iterable) {
+  console.log(i); // affiche 3, 5, 7
+}
+```
+
+Chaque objet héritera de la propriété `objCustom` et chaque objet qui est un tableau ({{jsxref("Array")}}) héritera de la propriété `arrCustom` car on les ajoute aux prototypes {{jsxref("Object.prototype")}} et {{jsxref("Array.prototype")}}. L'objet `iterable` hérite donc des propriétés `objCustom` et `arrCustom` grâce [à l'héritage et à la chaîne de prototypes](/fr/docs/Web/JavaScript/Héritage_et_chaîne_de_prototypes).
+
+```js
+for (let i in iterable) {
+  console.log(i); // affiche 0, 1, 2, "toto",
+                  // "arrCustom" et "objCustom"
+}
+```
+
+Cette boucle ne parcourt que les [propriétés énumérables](/fr/docs/Web/JavaScript/Caractère_énumérable_des_propriétés_et_rattachement) de l'objet `iterable` dans un ordre arbitraire. Les éléments du tableau `3`, `5`, `7` ou `hello` ne sont pas affichés car ce ne sont pas des propriétés (et encore moins des propriétés énumérables). En revanche, on retrouve bien les indices du tableau et les propriétés `arrCustom` et `objCustom`. Pour décrire plus précisément ce comportement, vous pouvez consulter {{jsxref("Instructions/for...in", "for...in", "#/fr/docs/Web/JavaScript/Reference/Instructions/for...in#Utiliser_for...in_et_parcourir_un_tableau")}}.
+
+```js
+for (let i in iterable) {
+  if (iterable.hasOwnProperty(i)) {
+    console.log(i); // affiche 0, 1, 2, "toto"
+  }
+}
+```
+
+Cette boucle ressemble à la première mais ajoute la méthode {{jsxref("Object.prototype.hasOwnProperty()", "hasOwnProperty()")}} qui permet de vérifier si la propriété énumérable recensée est directement disponible sur l'objet (c'est-à-dire si elle n'est pas héritée). La console affiche donc les propriétés `0`, `1`, `2` et `toto` car ce sont des propriétés directement rattachées à l'objet `iterable`. En revanche, les propriétés `arrCustom` et `objCustom` ne sont pas affichées car elles proviennent de l'héritage.
+
+```js
+for (let i of iterable) {
+  console.log(i); // affiche 3, 5, 7
+}
+```
+
+Cette boucle parcourt les valeurs définies comme itérables par [l'objet itérable](/fr/docs/Web/JavaScript/Reference/Les_protocoles_iteration#Le_protocole_.C2.AB_it.C3.A9rable_.C2.BB)\*\* \*\*et dans ce cas ce sont les éléments du tableau `3`, `5`, `7` et pas les propriétés de l'objet.
+
+### Attention à ne pas réutiliser les générateurs
+
+Les générateurs ne doivent pas être réutilisés, même lorsque la boucle `for...of` a été interrompue (par exemple lorsque {{jsxref("Instructions/break","break")}} est utilisé). Lorsqu'on quitte une boucle, le générateur est clôturé et si on l'utilise à nouveau, il ne fournira aucun résultat. Firefox n'a pas encore implémenté ce comportement standard (cf. {{bug("1147371")}}).
+
+```js
+var gen = (function *(){
+  yield 1;
+  yield 2;
+  yield 3;
+})();
+for (let o of gen) {
+  console.log(o);
+  break; // L'itérateur est fermé
+}
+
+// Le générateur ne doit pas être réutilisé !
+for (let o of gen){
+  console.log(o); // Ceci n'est jamais exécuté
+}
+```
+
+## Spécifications
+
+| Spécification                                                                                                    | État                         | Commentaires         |
+| ---------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName('ES2015', '#sec-for-in-and-for-of-statements', 'instruction for...of')}} | {{Spec2('ES2015')}}     | Définition initiale. |
+| {{SpecName('ESDraft', '#sec-for-in-and-for-of-statements', 'instruction for...of')}} | {{Spec2('ESDraft')}} |                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.statements.for_of")}}
+
+## Voir aussi
+
+- {{jsxref("Array.prototype.forEach()")}}
+- {{jsxref("Map.prototype.forEach()")}}
diff --git a/files/fr/web/javascript/reference/statements/for/index.html b/files/fr/web/javascript/reference/statements/for/index.html
deleted file mode 100644
index 7b8da7b5f4..0000000000
--- a/files/fr/web/javascript/reference/statements/for/index.html
+++ /dev/null
@@ -1,145 +0,0 @@
----
-title: for
-slug: Web/JavaScript/Reference/Statements/for
-tags:
-  - Instruction
-  - JavaScript
-  - Reference
-translation_of: Web/JavaScript/Reference/Statements/for
-original_slug: Web/JavaScript/Reference/Instructions/for
----
-<div>{{jsSidebar("Statements")}}</div>
-
-<p>L'instruction <code><strong>for</strong></code> crée une boucle composée de trois expressions optionnelles séparées par des points-virgules et encadrées entre des parenthèses qui sont suivies par une instruction (généralement <a href="/fr/docs/Web/JavaScript/Reference/Instructions/bloc">une instruction de bloc</a>) à exécuter dans la boucle.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/statement-for.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">for ([<em>initialisation</em>]; [<em>condition</em>]; [<em>expression_finale</em>])
-   <em>instruction</em>
-</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>initialisation</code></dt>
- <dd>Une expression (pouvant être une expression d'affectation) ou une déclaration de variable. Cette expression est évaluée une fois avant que la boucle démarre. On utilise généralement une variable qui agit comme un compteur. Cette expression peut éventuellement déclarer de nouvelles variables avec le mot-clé <code>var</code> ou <code>let</code>. Les variables déclarées avec <code>var</code> se situent dans la même portée que la boucle <code>for</code> (elles ne sont pas locales au sein de la boucle), les variables déclarées avec <code>let</code> sont locales à la boucle. Le résultat de l'expression n'est pas utilisé.</dd>
- <dt><code>condition</code></dt>
- <dd>Une expression qui est évaluée avant chaque itération de la boucle. Si cette expression est vérifiée, l'<code>instruction </code>est exécutée. Ce test est optionnel. S'il n'est pas présent, la condition sera toujours vérifiée. Si l'expression n'est pas vérifiée (i.e. vaut <code>false</code>), l'exécution se poursuivra à la première expression qui suit la boucle <code>for</code>.</dd>
- <dt><code>expression_finale</code></dt>
- <dd>Une expression qui est évaluée à la fin de chaque itération. Cela se produit avant l'évaluation de l'expression <code>condition</code>. Cette expression est généralement utilisée pour mettre à jour ou incrémenter le compteur qu'est la variable d'initialisation.</dd>
- <dt><code>instruction</code></dt>
- <dd>Une instruction qui est exécutée tant que la condition de la boucle est vérifiée. Afin d'exécuter plusieurs instructions au sein d'une telle boucle, il faudra utiliser une instruction de <a href="/fr/docs/JavaScript/Rérence_JavaScript/Instructions/block">bloc</a> (<code>{ ... }</code>) qui regroupera ces différentes instructions.</dd>
-</dl>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Utiliser_for">Utiliser <code>for</code></h3>
-
-<p>L'instruction <code>for</code> qui suit débute en déclarant la variable <code>i</code> et en l'initialisant à 0. Elle vérifie que <code>i</code> est inférieur (strictement) à 9 et exécute ensuite les deux instructions contenues dans la boucle, ensuite elle incrémente <code>i</code> de 1, ce qui sera fait à chaque passage dans la boucle.</p>
-
-<pre class="brush: js">for (var i = 0; i &lt; 9; i++) {
-   n += i;
-   myfunc(n);
-}
-</pre>
-
-<h3 id="Expressions_optionnelles_pour_for">Expressions optionnelles pour <code>for</code></h3>
-
-<p>Les trois expressions qui composent l'instruction <code>for</code> sont optionnelles :</p>
-
-<p>Par exemple, le bloc pour l'initialisation peut ne pas être utilisé :</p>
-
-<pre class="brush: js">var i = 0;
-for (; i &lt; 9; i++) {
-    console.log(i);
-    // d'autres instructions
-}
-</pre>
-
-<p>De même que pour le bloc d'initialisation, l'expression de condition est optionnelle. Attention, si l'expression de condition n'est pas utilisée, il faut s'assurer d'interrompre la boucle et de ne pas créer une boucle infinie.</p>
-
-<pre class="brush: js">for (var i = 0;; i++) {
-   console.log(i);
-   if (i &gt; 3) break;
-   // d'autres instructions
-}</pre>
-
-<p>Les trois blocs d'expressions peuvent être omis. Encore une fois, il faudra utiliser une instruction {{jsxref("Instructions/break")}} pour terminer la boucle. Si le test se fait sur un seuil, on veillera à incrémenter la variable pour que la condition d'arrêt modifiée soit respectée.</p>
-
-<pre class="brush: js">var i = 0;
-
-for (;;) {
-  if (i &gt; 3) break;
-  console.log(i);
-  i++;
-}
-</pre>
-
-<h3 id="Utiliser_for_avec_une_instruction_vide">Utiliser <code>for</code> avec une instruction vide</h3>
-
-<p>L'instruction <code>for</code> qui suit calcule le décalage d'un nœud et le fait dans la section qui correspond à l'expression finale. Il n'y a donc aucun intérêt à ajouter une instruction ou un bloc d'instruction dans la boucle pour faire ce calcul.</p>
-
-<pre class="brush: js">function showOffsetPos (sId) {
-  var nLeft = 0, nTop = 0;
-
-  for (var oItNode = document.getElementById(sId); oItNode; nLeft += oItNode.offsetLeft, nTop += oItNode.offsetTop, oItNode = oItNode.offsetParent);
-
-  console.log("Décalage de position : \"" + sId + "\" element:\n left: " + nLeft + "px;\n top: " + nTop + "px;");
-}</pre>
-
-<div class="note"><p><strong>Note :</strong> Dans cas, où on n'utilise pas la section d'instruction,<strong> il faut mettre un point-virgule immédiatement après la déclaration de la boucle.</strong></p></div>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-for-statement', 'for statement')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-for-statement', 'instruction for')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-12.6.3', 'instruction for')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES3', '#sec-12.6.3', 'instruction for')}}</td>
-   <td>{{Spec2('ES3')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES1', '#sec-12.6.2', 'instruction for')}}</td>
-   <td>{{Spec2('ES1')}}</td>
-   <td>Définition initiale</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.statements.for")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Instructions/break", "break")}}</li>
- <li>{{jsxref("Instructions/continue", "continue")}}</li>
- <li>{{jsxref("Instructions/vide", "Instruction vide","",1)}}</li>
- <li>{{jsxref("Instructions/while", "while")}}</li>
- <li>{{jsxref("Instructions/do...while", "do...while")}}</li>
- <li>{{jsxref("Instructions/for...in", "for...in")}}</li>
- <li>{{jsxref("Instructions/for...of", "for...of")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/statements/for/index.md b/files/fr/web/javascript/reference/statements/for/index.md
new file mode 100644
index 0000000000..977a80baff
--- /dev/null
+++ b/files/fr/web/javascript/reference/statements/for/index.md
@@ -0,0 +1,120 @@
+---
+title: for
+slug: Web/JavaScript/Reference/Statements/for
+tags:
+  - Instruction
+  - JavaScript
+  - Reference
+translation_of: Web/JavaScript/Reference/Statements/for
+original_slug: Web/JavaScript/Reference/Instructions/for
+---
+{{jsSidebar("Statements")}}
+
+L'instruction **`for`** crée une boucle composée de trois expressions optionnelles séparées par des points-virgules et encadrées entre des parenthèses qui sont suivies par une instruction (généralement [une instruction de bloc](/fr/docs/Web/JavaScript/Reference/Instructions/bloc)) à exécuter dans la boucle.
+
+{{EmbedInteractiveExample("pages/js/statement-for.html")}}
+
+## Syntaxe
+
+    for ([initialisation]; [condition]; [expression_finale])
+       instruction
+
+### Paramètres
+
+- `initialisation`
+  - : Une expression (pouvant être une expression d'affectation) ou une déclaration de variable. Cette expression est évaluée une fois avant que la boucle démarre. On utilise généralement une variable qui agit comme un compteur. Cette expression peut éventuellement déclarer de nouvelles variables avec le mot-clé `var` ou `let`. Les variables déclarées avec `var` se situent dans la même portée que la boucle `for` (elles ne sont pas locales au sein de la boucle), les variables déclarées avec `let` sont locales à la boucle. Le résultat de l'expression n'est pas utilisé.
+- `condition`
+  - : Une expression qui est évaluée avant chaque itération de la boucle. Si cette expression est vérifiée, l'`instruction `est exécutée. Ce test est optionnel. S'il n'est pas présent, la condition sera toujours vérifiée. Si l'expression n'est pas vérifiée (i.e. vaut `false`), l'exécution se poursuivra à la première expression qui suit la boucle `for`.
+- `expression_finale`
+  - : Une expression qui est évaluée à la fin de chaque itération. Cela se produit avant l'évaluation de l'expression `condition`. Cette expression est généralement utilisée pour mettre à jour ou incrémenter le compteur qu'est la variable d'initialisation.
+- `instruction`
+  - : Une instruction qui est exécutée tant que la condition de la boucle est vérifiée. Afin d'exécuter plusieurs instructions au sein d'une telle boucle, il faudra utiliser une instruction de [bloc](/fr/docs/JavaScript/Rérence_JavaScript/Instructions/block) (`{ ... }`) qui regroupera ces différentes instructions.
+
+## Exemples
+
+### Utiliser `for`
+
+L'instruction `for` qui suit débute en déclarant la variable `i` et en l'initialisant à 0. Elle vérifie que `i` est inférieur (strictement) à 9 et exécute ensuite les deux instructions contenues dans la boucle, ensuite elle incrémente `i` de 1, ce qui sera fait à chaque passage dans la boucle.
+
+```js
+for (var i = 0; i < 9; i++) {
+   n += i;
+   myfunc(n);
+}
+```
+
+### Expressions optionnelles pour `for`
+
+Les trois expressions qui composent l'instruction `for` sont optionnelles :
+
+Par exemple, le bloc pour l'initialisation peut ne pas être utilisé :
+
+```js
+var i = 0;
+for (; i < 9; i++) {
+    console.log(i);
+    // d'autres instructions
+}
+```
+
+De même que pour le bloc d'initialisation, l'expression de condition est optionnelle. Attention, si l'expression de condition n'est pas utilisée, il faut s'assurer d'interrompre la boucle et de ne pas créer une boucle infinie.
+
+```js
+for (var i = 0;; i++) {
+   console.log(i);
+   if (i > 3) break;
+   // d'autres instructions
+}
+```
+
+Les trois blocs d'expressions peuvent être omis. Encore une fois, il faudra utiliser une instruction {{jsxref("Instructions/break")}} pour terminer la boucle. Si le test se fait sur un seuil, on veillera à incrémenter la variable pour que la condition d'arrêt modifiée soit respectée.
+
+```js
+var i = 0;
+
+for (;;) {
+  if (i > 3) break;
+  console.log(i);
+  i++;
+}
+```
+
+### Utiliser `for` avec une instruction vide
+
+L'instruction `for` qui suit calcule le décalage d'un nœud et le fait dans la section qui correspond à l'expression finale. Il n'y a donc aucun intérêt à ajouter une instruction ou un bloc d'instruction dans la boucle pour faire ce calcul.
+
+```js
+function showOffsetPos (sId) {
+  var nLeft = 0, nTop = 0;
+
+  for (var oItNode = document.getElementById(sId); oItNode; nLeft += oItNode.offsetLeft, nTop += oItNode.offsetTop, oItNode = oItNode.offsetParent);
+
+  console.log("Décalage de position : \"" + sId + "\" element:\n left: " + nLeft + "px;\n top: " + nTop + "px;");
+}
+```
+
+> **Note :** Dans cas, où on n'utilise pas la section d'instruction, **il faut mettre un point-virgule immédiatement après la déclaration de la boucle.**
+
+## Spécifications
+
+| Spécification                                                                        | État                         | Commentaires        |
+| ------------------------------------------------------------------------------------ | ---------------------------- | ------------------- |
+| {{SpecName('ESDraft', '#sec-for-statement', 'for statement')}} | {{Spec2('ESDraft')}} |                     |
+| {{SpecName('ES6', '#sec-for-statement', 'instruction for')}}     | {{Spec2('ES6')}}         |                     |
+| {{SpecName('ES5.1', '#sec-12.6.3', 'instruction for')}}             | {{Spec2('ES5.1')}}     |                     |
+| {{SpecName('ES3', '#sec-12.6.3', 'instruction for')}}             | {{Spec2('ES3')}}         |                     |
+| {{SpecName('ES1', '#sec-12.6.2', 'instruction for')}}             | {{Spec2('ES1')}}         | Définition initiale |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.statements.for")}}
+
+## Voir aussi
+
+- {{jsxref("Instructions/break", "break")}}
+- {{jsxref("Instructions/continue", "continue")}}
+- {{jsxref("Instructions/vide", "Instruction vide","",1)}}
+- {{jsxref("Instructions/while", "while")}}
+- {{jsxref("Instructions/do...while", "do...while")}}
+- {{jsxref("Instructions/for...in", "for...in")}}
+- {{jsxref("Instructions/for...of", "for...of")}}
diff --git a/files/fr/web/javascript/reference/statements/function/index.html b/files/fr/web/javascript/reference/statements/function/index.html
deleted file mode 100644
index 9a27ccb426..0000000000
--- a/files/fr/web/javascript/reference/statements/function/index.html
+++ /dev/null
@@ -1,172 +0,0 @@
----
-title: function
-slug: Web/JavaScript/Reference/Statements/function
-tags:
-  - JavaScript
-  - Reference
-  - Statement
-translation_of: Web/JavaScript/Reference/Statements/function
-original_slug: Web/JavaScript/Reference/Instructions/function
----
-<div>{{jsSidebar("Statements")}}</div>
-
-<p>La déclaration <strong><code>function</code></strong> (ou l'instruction <code>function</code>) permet de définir une fonction et les paramètres que celle-ci utilise.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/statement-function.html")}}</div>
-
-
-
-<p>Il est également possible de définir des fonctions en utilisant le constructeur {{jsxref("Function")}} et une {{jsxref("Opérateurs/L_opérateur_function", "expression de fonction","",1)}}.</p>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">function <em>nom</em>([<em>param1</em>[, <em>param2</em>,[..., <em>paramN</em>]]]) {
-   [<em>instructions</em>]
-}
-</pre>
-
-<dl>
- <dt><code>nom</code></dt>
- <dd>Le nom de la fonction.</dd>
- <dt><code>param</code>N</dt>
- <dd>Le nom d'un argument à passer à la fonction. Une fonction peut avoir jusqu'à 255 arguments (cela peut varier en fonction des moteurs).</dd>
- <dt><code>instructions</code></dt>
- <dd>Les instructions qui constituent le corps de la fonction.</dd>
-</dl>
-
-<h2 id="Description">Description</h2>
-
-<p>Une fonction créée via une déclaration de fonction est un objet <code>Function</code> et possède toutes les caractéristiques (propriétés, méthodes et comportement) d'un objet <code>Function</code>. Voir la page {{jsxref("Function")}} pour plus d'informations sur ces caractéristiques.</p>
-
-<p>Une fonction peut également être créée en utilisant une expression (voir {{jsxref("Opérateurs/L_opérateur_function", "les expressions de fonctions","",1)}}).</p>
-
-<p>Par défaut, une fonction renvoie {{jsxref("undefined")}}. Pour renvoyer une autre valeur en résultat, une fonction doit utiliser une instruction {{jsxref("Instructions/return", "return")}} qui définit la valeur à retourner.</p>
-
-<h3 id="Fonctions_créées_conditionnellement">Fonctions créées conditionnellement</h3>
-
-<p>Il est possible de déclarer des fonctions de façon conditionnelle (c'est-à-dire qu'on peut placer une instruction de déclaration de fonction au sein d'une instruction <code>if</code>). La plupart des navigateurs, autres que ceux basés sur Gecko, traiteront cette déclaration conditionnelle comme si elle était inconditionnelle (que la condition souhaitée soit vérifiée ou non) (voir <a href="https://kangax.github.io/nfe/#function-statements">cet article</a> (en anglais) pour un aperçu). Pour cette raison, les déclarations de fonctions ne devraient pas être utilisées pour créer des fonctions de façon conditionnelle. Pour ce faire, il faut privilégier les expressions de fonctions.</p>
-
-<pre class="brush: js">var remontee = "toto" in this;
-console.log(`'toto' ${remontee ? "est" : "n'est pas"} remontée. typeof toto vaut ${typeof toto}`);
-if (false) {
-  function toto(){ return 1; }
-}
-
-// Pour Chrome:
-// 'toto' est remontée. typeof toto vaut undefined
-//
-// Pour Firefox:
-// 'toto' est remontée. typeof toto vaut undefined
-//
-// Pour Edge:
-// 'toto' n'est pas remontée. typeof toto vaut undefined
-//
-// Pour Safari:
-// 'toto' est remontée. typeof toto vaut function
-</pre>
-
-<p>On obtient exactement les mêmes résultats si la condition est vérifiée (ici avec <code>true</code>) :</p>
-
-<pre class="brush: js">var remontee = "toto" in this;
-console.log(`'toto' ${remontee ? "est" : "n'est pas"} remontée. typeof toto vaut ${typeof toto}`);
-if (true) {
-  function toto(){ return 1; }
-}
-
-// Pour Chrome:
-// 'toto' est remontée. typeof toto vaut undefined
-//
-// Pour Firefox:
-// 'toto' est remontée. typeof toto vaut undefined
-//
-// Pour Edge:
-// 'toto' n'est pas remontée. typeof toto vaut undefined
-//
-// Pour Safari:
-// 'toto' est remontée. typeof toto vaut function</pre>
-
-<h3 id="La_«_remontée_»_des_déclarations_de_fonction">La « remontée » des déclarations de fonction</h3>
-
-<p>Lorsqu'on utilise une déclaration de fonction pour créer une fonction, la définition de la fonction est « remontée ». Il devient donc possible d'utiliser la fonction avant de l'avoir déclarée :</p>
-
-<pre class="brush: js">remontée(); // affiche "toto" dans la console
-
-function remontée() {
-  console.log("toto");
-}
-</pre>
-
-<p>On notera que les {{jsxref("Opérateurs/L_opérateur_function", "expressions de fonctions","",1)}} ne sont pas remontées :</p>
-
-<pre class="brush: js">nonRemontée(); // TypeError: nonRemontée is not a function
-
-var nonRemontée = function() {
-   console.log("truc");
-};
-</pre>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Utiliser_function">Utiliser <code>function</code></h3>
-
-<p>Dans l'exemple qui suit, on déclare une fonction qui renvoie le total des ventes en fonction des nombres d'unités vendues pour les produits <code>a</code>, <code>b</code>, et <code>c</code>.</p>
-
-<pre class="brush: js">function calc_ventes(nb_produits_a, nb_produits_b, nb_produits_c) {
-   return nb_produits_a*79 + nb_produits_b * 129 + nb_produits_c * 699;
-}
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-function-definitions', 'Function definitions')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-function-definitions', 'Définition de fonction')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-13', 'Définition de fonction')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES3', '#sec-13', 'Définition de fonction')}}</td>
-   <td>{{Spec2('ES3')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES1', '#sec-13', 'Définition de fonction')}}</td>
-   <td>{{Spec2('ES1')}}</td>
-   <td>Définition initiale. Implémentée avec JavaScript 1.0.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.statements.function")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Fonctions", "Les fonctions","",1)}}</li>
- <li>{{jsxref("Function")}}</li>
- <li>{{jsxref("Opérateurs/L_opérateur_function", "Les expressions de fonction","",1)}}</li>
- <li>L'instruction {{jsxref("Instructions/function*", "function*")}}</li>
- <li>L'expression {{jsxref("Opérateurs/function*", "function*")}}</li>
- <li>{{jsxref("Fonctions/Fonctions_fléchées", "Les fonctions fléchées","",1)}}</li>
- <li>{{jsxref("GeneratorFunction")}}</li>
- <li><a href="/fr/docs/Web/JavaScript/Reference/Instructions/async_function">L'instruction <code>async function</code> (les déclarations des fonctions asynchrones)</a></li>
- <li><a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/async_function">L'opérateur <code>async function</code> (les expressions de fonctions asynchrones)</a></li>
-</ul>
diff --git a/files/fr/web/javascript/reference/statements/function/index.md b/files/fr/web/javascript/reference/statements/function/index.md
new file mode 100644
index 0000000000..0ad6510645
--- /dev/null
+++ b/files/fr/web/javascript/reference/statements/function/index.md
@@ -0,0 +1,144 @@
+---
+title: function
+slug: Web/JavaScript/Reference/Statements/function
+tags:
+  - JavaScript
+  - Reference
+  - Statement
+translation_of: Web/JavaScript/Reference/Statements/function
+original_slug: Web/JavaScript/Reference/Instructions/function
+---
+{{jsSidebar("Statements")}}
+
+La déclaration **`function`** (ou l'instruction `function`) permet de définir une fonction et les paramètres que celle-ci utilise.
+
+{{EmbedInteractiveExample("pages/js/statement-function.html")}}
+
+Il est également possible de définir des fonctions en utilisant le constructeur {{jsxref("Function")}} et une {{jsxref("Opérateurs/L_opérateur_function", "expression de fonction","",1)}}.
+
+## Syntaxe
+
+    function nom([param1[, param2,[..., paramN]]]) {
+       [instructions]
+    }
+
+- `nom`
+  - : Le nom de la fonction.
+- `param`N
+  - : Le nom d'un argument à passer à la fonction. Une fonction peut avoir jusqu'à 255 arguments (cela peut varier en fonction des moteurs).
+- `instructions`
+  - : Les instructions qui constituent le corps de la fonction.
+
+## Description
+
+Une fonction créée via une déclaration de fonction est un objet `Function` et possède toutes les caractéristiques (propriétés, méthodes et comportement) d'un objet `Function`. Voir la page {{jsxref("Function")}} pour plus d'informations sur ces caractéristiques.
+
+Une fonction peut également être créée en utilisant une expression (voir {{jsxref("Opérateurs/L_opérateur_function", "les expressions de fonctions","",1)}}).
+
+Par défaut, une fonction renvoie {{jsxref("undefined")}}. Pour renvoyer une autre valeur en résultat, une fonction doit utiliser une instruction {{jsxref("Instructions/return", "return")}} qui définit la valeur à retourner.
+
+### Fonctions créées conditionnellement
+
+Il est possible de déclarer des fonctions de façon conditionnelle (c'est-à-dire qu'on peut placer une instruction de déclaration de fonction au sein d'une instruction `if`). La plupart des navigateurs, autres que ceux basés sur Gecko, traiteront cette déclaration conditionnelle comme si elle était inconditionnelle (que la condition souhaitée soit vérifiée ou non) (voir [cet article](https://kangax.github.io/nfe/#function-statements) (en anglais) pour un aperçu). Pour cette raison, les déclarations de fonctions ne devraient pas être utilisées pour créer des fonctions de façon conditionnelle. Pour ce faire, il faut privilégier les expressions de fonctions.
+
+```js
+var remontee = "toto" in this;
+console.log(`'toto' ${remontee ? "est" : "n'est pas"} remontée. typeof toto vaut ${typeof toto}`);
+if (false) {
+  function toto(){ return 1; }
+}
+
+// Pour Chrome:
+// 'toto' est remontée. typeof toto vaut undefined
+//
+// Pour Firefox:
+// 'toto' est remontée. typeof toto vaut undefined
+//
+// Pour Edge:
+// 'toto' n'est pas remontée. typeof toto vaut undefined
+//
+// Pour Safari:
+// 'toto' est remontée. typeof toto vaut function
+```
+
+On obtient exactement les mêmes résultats si la condition est vérifiée (ici avec `true`) :
+
+```js
+var remontee = "toto" in this;
+console.log(`'toto' ${remontee ? "est" : "n'est pas"} remontée. typeof toto vaut ${typeof toto}`);
+if (true) {
+  function toto(){ return 1; }
+}
+
+// Pour Chrome:
+// 'toto' est remontée. typeof toto vaut undefined
+//
+// Pour Firefox:
+// 'toto' est remontée. typeof toto vaut undefined
+//
+// Pour Edge:
+// 'toto' n'est pas remontée. typeof toto vaut undefined
+//
+// Pour Safari:
+// 'toto' est remontée. typeof toto vaut function
+```
+
+### La « remontée » des déclarations de fonction
+
+Lorsqu'on utilise une déclaration de fonction pour créer une fonction, la définition de la fonction est « remontée ». Il devient donc possible d'utiliser la fonction avant de l'avoir déclarée :
+
+```js
+remontée(); // affiche "toto" dans la console
+
+function remontée() {
+  console.log("toto");
+}
+```
+
+On notera que les {{jsxref("Opérateurs/L_opérateur_function", "expressions de fonctions","",1)}} ne sont pas remontées :
+
+```js
+nonRemontée(); // TypeError: nonRemontée is not a function
+
+var nonRemontée = function() {
+   console.log("truc");
+};
+```
+
+## Exemples
+
+### Utiliser `function`
+
+Dans l'exemple qui suit, on déclare une fonction qui renvoie le total des ventes en fonction des nombres d'unités vendues pour les produits `a`, `b`, et `c`.
+
+```js
+function calc_ventes(nb_produits_a, nb_produits_b, nb_produits_c) {
+   return nb_produits_a*79 + nb_produits_b * 129 + nb_produits_c * 699;
+}
+```
+
+## Spécifications
+
+| Spécification                                                                                        | État                         | Commentaires                                          |
+| ---------------------------------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- |
+| {{SpecName('ESDraft', '#sec-function-definitions', 'Function definitions')}} | {{Spec2('ESDraft')}} |                                                       |
+| {{SpecName('ES6', '#sec-function-definitions', 'Définition de fonction')}} | {{Spec2('ES6')}}         |                                                       |
+| {{SpecName('ES5.1', '#sec-13', 'Définition de fonction')}}                     | {{Spec2('ES5.1')}}     |                                                       |
+| {{SpecName('ES3', '#sec-13', 'Définition de fonction')}}                         | {{Spec2('ES3')}}         |                                                       |
+| {{SpecName('ES1', '#sec-13', 'Définition de fonction')}}                         | {{Spec2('ES1')}}         | Définition initiale. Implémentée avec JavaScript 1.0. |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.statements.function")}}
+
+## Voir aussi
+
+- {{jsxref("Fonctions", "Les fonctions","",1)}}
+- {{jsxref("Function")}}
+- {{jsxref("Opérateurs/L_opérateur_function", "Les expressions de fonction","",1)}}
+- L'instruction {{jsxref("Instructions/function*", "function*")}}
+- L'expression {{jsxref("Opérateurs/function*", "function*")}}
+- {{jsxref("Fonctions/Fonctions_fléchées", "Les fonctions fléchées","",1)}}
+- {{jsxref("GeneratorFunction")}}
+- [L'instruction `async function` (les déclarations des fonctions asynchrones)](/fr/docs/Web/JavaScript/Reference/Instructions/async_function)
+- [L'opérateur `async function` (les expressions de fonctions asynchrones)](/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/async_function)
diff --git a/files/fr/web/javascript/reference/statements/function_star_/index.html b/files/fr/web/javascript/reference/statements/function_star_/index.html
deleted file mode 100644
index 2d13a1b8ae..0000000000
--- a/files/fr/web/javascript/reference/statements/function_star_/index.html
+++ /dev/null
@@ -1,241 +0,0 @@
----
-title: function*
-slug: Web/JavaScript/Reference/Statements/function*
-tags:
-  - ECMAScript 2015
-  - Function
-  - Generator
-  - Instruction
-  - Iterator
-  - JavaScript
-  - Reference
-translation_of: Web/JavaScript/Reference/Statements/function*
-original_slug: Web/JavaScript/Reference/Instructions/function*
----
-<div>{{jsSidebar("Statements")}}</div>
-
-<p>La déclaration <code><strong>function*</strong></code> (le mot-clé <code>function</code> suivi par un astérisque) permet de définir un générateur (aussi appelé une fonction génératrice) (un générateur est un objet {{jsxref("Generator")}}).</p>
-
-<div>{{EmbedInteractiveExample("pages/js/statement-functionasterisk.html")}}</div>
-
-
-
-<div>
-<p>Il est également possible de définir un générateur en utilisant le constructeur {{jsxref("GeneratorFunction")}} et une expression {{jsxref("Opérateurs/function*", "function*")}}.</p>
-</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox notranslate">function* <em>nom</em>([<em>param1</em>[, <em>param2</em>[, ... <em>paramN</em>]]]) {
-   <em>instructions</em>
-}
-</pre>
-
-<dl>
- <dt><code>nom</code></dt>
- <dd>Le nom de la fonction.</dd>
- <dt><code>paramN</code></dt>
- <dd>Le nom d'un paramètre formel passé à la fonction.</dd>
- <dt><code>instructions</code></dt>
- <dd>Les instructions qui constituent le corps de la fonction.</dd>
-</dl>
-
-<h2 id="Description">Description</h2>
-
-<p>Les générateurs sont des fonctions qu'il est possible de quitter puis de reprendre. Le contexte d'un générateur (les liaisons avec ses variables) est sauvegardé entre les reprises successives.</p>
-
-<p>Les générateurs, combinés avec <a href="/fr/docs/Web/JavaScript/Guide/Utiliser_les_promesses">les promesses</a>, sont des outils de programmation asynchrones puissants qui permettent de réduire les inconvénients causés par les <em>callbacks</em> (fonctions de rappel) et <a href="https://frontendmasters.com/courses/rethinking-async-js/callback-problems-inversion-of-control/">l'inversion de contrôle</a>.</p>
-
-<p>Lorsqu'on appelle une fonction génératrice, son corps n'est pas exécuté immédiatement, c'est un {{jsxref("Les_protocoles_iteration","itérateur","#Le_protocole_.C2.AB_it.C3.A9rateur_.C2.BB",1)}} qui est renvoyé pour la fonction. Lorsque la méthode <code>next()</code> de l'itérateur est appelée, le corps de la fonction génératrice est utilisé jusqu'à ce que la première expression {{jsxref("Opérateurs/yield", "yield")}} soit trouvée. Cette expression définira la valeur à renvoyer pour l'itérateur. Si on utilise {{jsxref("Opérateurs/yield*", "yield*")}}, on pourra déléguer la génération des valeurs à une autre fonction génératrice. La méthode <code>next()</code> renvoie un objet dont la propriété <code>value</code> contient la valeur générée et une propriété <code>done</code> qui indique si le générateur a produit sa dernière valeur ou non. Lorsqu'on appelle la méthode <code>next()</code> avec un argument, cela reprendra l'exécution de la fonction génératrice et remplacera la valeur de l'expression <code>yield</code> (là où l'exécution avait été interrompue) avec la valeur de l'argument passé à <code>next()</code>.</p>
-
-<p>On peut utiliser une instruction <code>return</code> dans un générateur. Lorsque cette instruction sera exécutée, le générateur sera terminé (<code>done</code> vaudra <code>true</code>). La valeur renvoyée par l'instruction <code>return</code> sera la valeur de terminaison du générateur. Une fois qu'un générateur est terminé, il ne peut plus produire d'autres valeurs.</p>
-
-<p>À l'instar d'une instruction <code>return</code>, une exception levée à l'intérieur du générateur entraînera la terminaison du générateur sauf si cette exception est interceptée. Lorsqu'un générateur est terminé, les appels suivants à <code>next()</code> n'exécuteront aucun code provenant du générateur, ils renverront simplement un objet de la forme <code>{value: undefined, done: true}</code>.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Exemple_simple">Exemple simple</h3>
-
-<pre class="brush: js notranslate">function* creerID(){
-  var index = 0;
-  while (true) {
-    yield index++;
-  }
-}
-
-var gen = creerID();
-
-console.log(gen.next().value); // 0
-console.log(gen.next().value); // 1
-console.log(gen.next().value); // 2
-console.log(gen.next().value); // 3
-</pre>
-
-<h3 id="Exemple_utilisant_des_arguments">Exemple utilisant des arguments</h3>
-
-<pre class="brush: js notranslate">function* logGenerator() {
-  console.log(yield);
-  console.log(yield);
-  console.log(yield);
-}
-
-var gen = logGenerator();
-
-// le premier appel à next exécute la fonction depuis son
-// début jusqu'au premier yield rencontré
-gen.next();
-gen.next('bretzel');    // bretzel
-gen.next('california'); // california
-gen.next('mayonnaise'); // mayonnaise
-</pre>
-
-<h3 id="Exemple_utilisant_yield*">Exemple utilisant <code>yield*</code></h3>
-
-<pre class="brush: js notranslate">function* autreGenerateur(i) {
-  yield i + 1;
-  yield i + 2;
-  yield i + 3;
-}
-function* generateur(i){
-  yield i;
-  yield* autreGenerateur(i);
-  yield i + 10;
-}
-
-var gen = generateur(10);
-
-console.log(gen.next().value); // 10
-console.log(gen.next().value); // 11
-console.log(gen.next().value); // 12
-console.log(gen.next().value); // 13
-console.log(gen.next().value); // 20
-</pre>
-
-<h3 id="Utilisation_de_return">Utilisation de <code>return</code></h3>
-
-<pre class="brush: js notranslate">function* yieldAndReturn() {
-  yield "Y";
-  return "R";
-  yield "inaccessible";
-}
-
-var gen = yieldAndReturn();
-
-console.log(gen.next()); // { value: "Y", done: false }
-console.log(gen.next()); // { value: "R", done: true }
-console.log(gen.next()); // { value: undefined, done: true }
-</pre>
-
-<h3 id="Utiliser_un_générateur_comme_propriété">Utiliser un générateur comme propriété</h3>
-
-<pre class="brush: js notranslate">const monObj = {
-  *generator () {
-    yield "a";
-    yield "b";
-  }
-}
-
-const gen = monObj.generator();
-
-console.log(gen.next()); // { value: "a", done: false }
-console.log(gen.next()); // { value: "b", done: false }
-console.log(gen.next()); // { value: undefined, done: true }</pre>
-
-<h3 id="Utiliser_un_générateur_comme_propriété_calculée">Utiliser un générateur comme propriété calculée</h3>
-
-<pre class="brush: js notranslate">class Toto {
-  *[Symbol.iterator] () {
-    yield 1;
-    yield 2;
-  }
-}
-
-const monObj = {
-  *[Symbol.iterator] () {
-    yield "a";
-    yield "b";
-  }
-}
-
-console.log(Array.from(new Toto)); // [1, 2]
-console.log(Array.from(monObj));   // [ "a", "b"]</pre>
-
-<h3 id="Les_générateurs_ne_sont_pas_constructibles">Les générateurs ne sont pas constructibles</h3>
-
-<pre class="brush: js example-bad notranslate">function* f() {}
-var obj = new f; // lève une TypeError: f n'est pas un constructeur
-</pre>
-
-<h3 id="Générateur_défini_avec_une_expression">Générateur défini avec une expression</h3>
-
-<pre class="brush: js notranslate">const toto = function* () {
-  yield 10;
-  yield 20;
-};
-const truc = toto();
-console.log(truc.next()); // {value: 10, done: false}</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-generator-function-definitions', 'function*')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td>Définition initiale</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2016', '#sec-generator-function-definitions', 'function*')}}</td>
-   <td>{{Spec2('ES2016')}}</td>
-   <td>Les générateurs ne doivent pas gérer la trappe [[Construct]] et déclencher une exception s'ils sont utilisés avec <code>new</code>.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-generator-function-definitions', 'function*')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.statements.generator_function")}}</p>
-
-<h2 id="Notes_spécifiques_à_Firefox">Notes spécifiques à Firefox</h2>
-
-<h3 id="Les_générateurs_et_itérateurs_dans_Firefox_pour_les_versions_antérieures_à_Firefox_26">Les générateurs et itérateurs dans Firefox pour les versions antérieures à Firefox 26</h3>
-
-<p>Les anciennes versions de Firefox implémentaient une ancienne version de la proposition pour les générateurs. Dans cette version, les générateurs étaient définis avec le mot-clé <code>function</code> (sans astérisque) et étaient différents selon d'autres aspects. Voir <a href="/fr/docs/Web/JavaScript/Reference/Instructions/Fonction_génératrice_historique">la page sur les générateurs historiques</a> pour plus d'informations.</p>
-
-<h3 id="IteratorResult_au_lieu_dune_exception"><code>IteratorResult</code> au lieu d'une exception</h3>
-
-<p>À partir de Gecko 29 {{geckoRelease(29)}}, lorsqu'un générateur est terminé, il ne renvoie plus une exception {{jsxref("TypeError")}} « generator has already finished ». Il renvoie désormais un objet <code>IteratorResult</code> comme <code>{ value: undefined, done: true }</code> ({{bug(958951)}}).</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>L'expression {{jsxref("Opérateurs/function*", "function*")}}</li>
- <li>L'objet {{jsxref("GeneratorFunction")}}</li>
- <li>{{jsxref("Les_protocoles_iteration","itérateur","#Le_protocole_.C2.AB_it.C3.A9rateur_.C2.BB",1)}}</li>
- <li>{{jsxref("Opérateurs/yield", "yield")}}</li>
- <li>{{jsxref("Opérateurs/yield*", "yield*")}}</li>
- <li>L'objet {{jsxref("Function")}}</li>
- <li>{{jsxref("Instructions/function", "Les déclarations de fonction","",1)}}</li>
- <li>{{jsxref("Opérateurs/L_opérateur_function", "Les expressions de fonction","",1)}}</li>
- <li>{{jsxref("Fonctions", "Les fonctions","",1)}}</li>
- <li>D'autres ressources disponibles sur le Web :
-  <ul>
-   <li><a href="https://facebook.github.io/regenerator/">Regenerator</a> un compilateur permettant de traduire des générateurs ES2015 en du code JavaScript basé sur ES5</li>
-   <li><a href="https://www.youtube.com/watch?v=qbKWsbJ76-s">Forbes Lindesay: Promises and Generators: control flow utopia -- JSConf EU 2013</a> (vidéo en anglais)</li>
-   <li><a href="https://github.com/mozilla/task.js">Task.js</a></li>
-   <li><a href="https://github.com/getify/You-Dont-Know-JS/blob/1st-ed/async%20%26%20performance/ch4.md#iterating-generators-asynchronously">Itérer de façon asynchrone sur des générateurs</a></li>
-  </ul>
- </li>
-</ul>
diff --git a/files/fr/web/javascript/reference/statements/function_star_/index.md b/files/fr/web/javascript/reference/statements/function_star_/index.md
new file mode 100644
index 0000000000..32e34f029a
--- /dev/null
+++ b/files/fr/web/javascript/reference/statements/function_star_/index.md
@@ -0,0 +1,220 @@
+---
+title: function*
+slug: Web/JavaScript/Reference/Statements/function*
+tags:
+  - ECMAScript 2015
+  - Function
+  - Generator
+  - Instruction
+  - Iterator
+  - JavaScript
+  - Reference
+translation_of: Web/JavaScript/Reference/Statements/function*
+original_slug: Web/JavaScript/Reference/Instructions/function*
+---
+{{jsSidebar("Statements")}}
+
+La déclaration **`function*`** (le mot-clé `function` suivi par un astérisque) permet de définir un générateur (aussi appelé une fonction génératrice) (un générateur est un objet {{jsxref("Generator")}}).
+
+{{EmbedInteractiveExample("pages/js/statement-functionasterisk.html")}}
+
+Il est également possible de définir un générateur en utilisant le constructeur {{jsxref("GeneratorFunction")}} et une expression {{jsxref("Opérateurs/function*", "function*")}}.
+
+## Syntaxe
+
+    function* nom([param1[, param2[, ... paramN]]]) {
+       instructions
+    }
+
+- `nom`
+  - : Le nom de la fonction.
+- `paramN`
+  - : Le nom d'un paramètre formel passé à la fonction.
+- `instructions`
+  - : Les instructions qui constituent le corps de la fonction.
+
+## Description
+
+Les générateurs sont des fonctions qu'il est possible de quitter puis de reprendre. Le contexte d'un générateur (les liaisons avec ses variables) est sauvegardé entre les reprises successives.
+
+Les générateurs, combinés avec [les promesses](/fr/docs/Web/JavaScript/Guide/Utiliser_les_promesses), sont des outils de programmation asynchrones puissants qui permettent de réduire les inconvénients causés par les _callbacks_ (fonctions de rappel) et [l'inversion de contrôle](https://frontendmasters.com/courses/rethinking-async-js/callback-problems-inversion-of-control/).
+
+Lorsqu'on appelle une fonction génératrice, son corps n'est pas exécuté immédiatement, c'est un {{jsxref("Les_protocoles_iteration","itérateur","#Le_protocole_.C2.AB_it.C3.A9rateur_.C2.BB",1)}} qui est renvoyé pour la fonction. Lorsque la méthode `next()` de l'itérateur est appelée, le corps de la fonction génératrice est utilisé jusqu'à ce que la première expression {{jsxref("Opérateurs/yield", "yield")}} soit trouvée. Cette expression définira la valeur à renvoyer pour l'itérateur. Si on utilise {{jsxref("Opérateurs/yield*", "yield*")}}, on pourra déléguer la génération des valeurs à une autre fonction génératrice. La méthode `next()` renvoie un objet dont la propriété `value` contient la valeur générée et une propriété `done` qui indique si le générateur a produit sa dernière valeur ou non. Lorsqu'on appelle la méthode `next()` avec un argument, cela reprendra l'exécution de la fonction génératrice et remplacera la valeur de l'expression `yield` (là où l'exécution avait été interrompue) avec la valeur de l'argument passé à `next()`.
+
+On peut utiliser une instruction `return` dans un générateur. Lorsque cette instruction sera exécutée, le générateur sera terminé (`done` vaudra `true`). La valeur renvoyée par l'instruction `return` sera la valeur de terminaison du générateur. Une fois qu'un générateur est terminé, il ne peut plus produire d'autres valeurs.
+
+À l'instar d'une instruction `return`, une exception levée à l'intérieur du générateur entraînera la terminaison du générateur sauf si cette exception est interceptée. Lorsqu'un générateur est terminé, les appels suivants à `next()` n'exécuteront aucun code provenant du générateur, ils renverront simplement un objet de la forme `{value: undefined, done: true}`.
+
+## Exemples
+
+### Exemple simple
+
+```js
+function* creerID(){
+  var index = 0;
+  while (true) {
+    yield index++;
+  }
+}
+
+var gen = creerID();
+
+console.log(gen.next().value); // 0
+console.log(gen.next().value); // 1
+console.log(gen.next().value); // 2
+console.log(gen.next().value); // 3
+```
+
+### Exemple utilisant des arguments
+
+```js
+function* logGenerator() {
+  console.log(yield);
+  console.log(yield);
+  console.log(yield);
+}
+
+var gen = logGenerator();
+
+// le premier appel à next exécute la fonction depuis son
+// début jusqu'au premier yield rencontré
+gen.next();
+gen.next('bretzel');    // bretzel
+gen.next('california'); // california
+gen.next('mayonnaise'); // mayonnaise
+```
+
+### Exemple utilisant `yield*`
+
+```js
+function* autreGenerateur(i) {
+  yield i + 1;
+  yield i + 2;
+  yield i + 3;
+}
+function* generateur(i){
+  yield i;
+  yield* autreGenerateur(i);
+  yield i + 10;
+}
+
+var gen = generateur(10);
+
+console.log(gen.next().value); // 10
+console.log(gen.next().value); // 11
+console.log(gen.next().value); // 12
+console.log(gen.next().value); // 13
+console.log(gen.next().value); // 20
+```
+
+### Utilisation de `return`
+
+```js
+function* yieldAndReturn() {
+  yield "Y";
+  return "R";
+  yield "inaccessible";
+}
+
+var gen = yieldAndReturn();
+
+console.log(gen.next()); // { value: "Y", done: false }
+console.log(gen.next()); // { value: "R", done: true }
+console.log(gen.next()); // { value: undefined, done: true }
+```
+
+### Utiliser un générateur comme propriété
+
+```js
+const monObj = {
+  *generator () {
+    yield "a";
+    yield "b";
+  }
+}
+
+const gen = monObj.generator();
+
+console.log(gen.next()); // { value: "a", done: false }
+console.log(gen.next()); // { value: "b", done: false }
+console.log(gen.next()); // { value: undefined, done: true }
+```
+
+### Utiliser un générateur comme propriété calculée
+
+```js
+class Toto {
+  *[Symbol.iterator] () {
+    yield 1;
+    yield 2;
+  }
+}
+
+const monObj = {
+  *[Symbol.iterator] () {
+    yield "a";
+    yield "b";
+  }
+}
+
+console.log(Array.from(new Toto)); // [1, 2]
+console.log(Array.from(monObj));   // [ "a", "b"]
+```
+
+### Les générateurs ne sont pas constructibles
+
+```js example-bad
+function* f() {}
+var obj = new f; // lève une TypeError: f n'est pas un constructeur
+```
+
+### Générateur défini avec une expression
+
+```js
+const toto = function* () {
+  yield 10;
+  yield 20;
+};
+const truc = toto();
+console.log(truc.next()); // {value: 10, done: false}
+```
+
+## Spécifications
+
+| Spécification                                                                                        | État                         | Commentaires                                                                                                             |
+| ---------------------------------------------------------------------------------------------------- | ---------------------------- | ------------------------------------------------------------------------------------------------------------------------ |
+| {{SpecName('ES2015', '#sec-generator-function-definitions', 'function*')}} | {{Spec2('ES2015')}}     | Définition initiale                                                                                                      |
+| {{SpecName('ES2016', '#sec-generator-function-definitions', 'function*')}} | {{Spec2('ES2016')}}     | Les générateurs ne doivent pas gérer la trappe [[Construct]] et déclencher une exception s'ils sont utilisés avec `new`. |
+| {{SpecName('ESDraft', '#sec-generator-function-definitions', 'function*')}} | {{Spec2('ESDraft')}} |                                                                                                                          |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.statements.generator_function")}}
+
+## Notes spécifiques à Firefox
+
+### Les générateurs et itérateurs dans Firefox pour les versions antérieures à Firefox 26
+
+Les anciennes versions de Firefox implémentaient une ancienne version de la proposition pour les générateurs. Dans cette version, les générateurs étaient définis avec le mot-clé `function` (sans astérisque) et étaient différents selon d'autres aspects. Voir [la page sur les générateurs historiques](/fr/docs/Web/JavaScript/Reference/Instructions/Fonction_génératrice_historique) pour plus d'informations.
+
+### `IteratorResult` au lieu d'une exception
+
+À partir de Gecko 29 {{geckoRelease(29)}}, lorsqu'un générateur est terminé, il ne renvoie plus une exception {{jsxref("TypeError")}} « generator has already finished ». Il renvoie désormais un objet `IteratorResult` comme `{ value: undefined, done: true }` ({{bug(958951)}}).
+
+## Voir aussi
+
+- L'expression {{jsxref("Opérateurs/function*", "function*")}}
+- L'objet {{jsxref("GeneratorFunction")}}
+- {{jsxref("Les_protocoles_iteration","itérateur","#Le_protocole_.C2.AB_it.C3.A9rateur_.C2.BB",1)}}
+- {{jsxref("Opérateurs/yield", "yield")}}
+- {{jsxref("Opérateurs/yield*", "yield*")}}
+- L'objet {{jsxref("Function")}}
+- {{jsxref("Instructions/function", "Les déclarations de fonction","",1)}}
+- {{jsxref("Opérateurs/L_opérateur_function", "Les expressions de fonction","",1)}}
+- {{jsxref("Fonctions", "Les fonctions","",1)}}
+- D'autres ressources disponibles sur le Web :
+
+  - [Regenerator](https://facebook.github.io/regenerator/) un compilateur permettant de traduire des générateurs ES2015 en du code JavaScript basé sur ES5
+  - [Forbes Lindesay: Promises and Generators: control flow utopia -- JSConf EU 2013](https://www.youtube.com/watch?v=qbKWsbJ76-s) (vidéo en anglais)
+  - [Task.js](https://github.com/mozilla/task.js)
+  - [Itérer de façon asynchrone sur des générateurs](https://github.com/getify/You-Dont-Know-JS/blob/1st-ed/async%20%26%20performance/ch4.md#iterating-generators-asynchronously)
diff --git a/files/fr/web/javascript/reference/statements/if...else/index.html b/files/fr/web/javascript/reference/statements/if...else/index.html
deleted file mode 100644
index 9af4f80a14..0000000000
--- a/files/fr/web/javascript/reference/statements/if...else/index.html
+++ /dev/null
@@ -1,128 +0,0 @@
----
-title: if...else
-slug: Web/JavaScript/Reference/Statements/if...else
-tags:
-  - JavaScript
-  - Reference
-  - Statement
-browser-compat: javascript.statements.if_else
-translation_of: Web/JavaScript/Reference/Statements/if...else
-original_slug: Web/JavaScript/Reference/Instructions/if...else
----
-<div>{{jsSidebar("Statements")}}</div>
-
-<p>L'instruction <strong><code>if</code></strong> exécute une instruction si une condition donnée est vraie ou équivalente à vrai. Si la condition n'est pas vérifiée, il est possible d'utiliser une autre instruction.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/statement-ifelse.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">if (<em>condition</em>)
-  <em>statement1</em>
-} else {
-  <em>statement2</em>
-}</pre>
-
-<dl>
-  <dt><code>condition</code></dt>
-  <dd>Une <a href="/fr/docs/Web/JavaScript/Guide/Expressions_and_Operators#expressions">expression</a> qui est évaluée à <code>true</code> ou <code>false</code>.</dd>
-  <dt><code>statement1</code></dt>
-  <dd>L'instruction qui est exécutée si la condition est vérifiée (i.e. est évaluée à <code>true</code>). Cette instruction peut être n'importe quelle instruction valide, y compris une imbrication d'autres instructions <code>if</code>. Pour exécuter plusieurs instructions, on pourra utiliser un <a href="/fr/docs/Web/JavaScript/Reference/Statements/block">bloc d'instructions</a> ({ ... }) qui permet de les regrouper. Pour n'exécuter aucune instruction, on pourra utiliser <a href="/fr/docs/Web/JavaScript/Reference/Statements/Empty">l'instruction vide</a>.</dd>
-  <dt><code>statement2</code></dt>
-  <dd>Si la clause <code>else</code> existe, l'instruction qui est exécutée si la <code>condition</code> est évaluée à <code>false</code>. Comme pour la première, cette instruction peut être n'importe quelle instruction valide : une autre instruction <code>if</code> imbriquée, un bloc d'instruction, une instruction vide, etc.</dd>
-</dl>
-
-<h2 id="description">Description</h2>
-
-<p>Plusieurs instructions <code>if...else</code> peuvent être imbriquées afin de créer une structure <code>else if</code> (on notera qu'il n'y a pas de mot-clé <code>elseif</code> en JavaScript).</p>
-
-<pre class="brush: js">if (<em>condition1</em>)
-  <em>instruction1</em>
-else if (<em>condition2</em>)
-  <em>instruction2</em>
-else if (<em>condition3</em>)
-  <em>instruction3</em>
-...
-else
-  <em>instructionN</em>
-</pre>
-
-<p>Si on indente correctement le code, on retrouve la structure exactement équivalente :</p>
-
-<pre class="brush: js">if (<em>condition1</em>)
-  <em>instruction1</em>
-else
-  if (<em>condition2</em>)
-    <em>instruction2</em>
-  else
-    if (<em>condition3</em>)
-...
-</pre>
-
-<p>Afin d'exécuter plusieurs instructions, on utilisera un {{jsxref("Statements/block","bloc d'instructions","",1)}} (<code>{ ... }</code>) pour regrouper les instructions souhaitées. Utiliser les blocs d'instructions est une bonne façon d'organiser son code, surtout lorsque celui-ci comporte des instructions conditionnelles imbriquées.</p>
-
-<pre class="brush: js">if (<em>condition</em>) {
-  <em>instructions1</em>
-} else {
-  <em>instructions2</em>
-}
-</pre>
-
-<p>Attention à ne pas confondre les valeurs booléennes « primitives » <code>true</code> et <code>false</code> avec les valeurs true et false d'un objet <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Boolean"><code>Boolean</code></a>. Toute valeur qui n'est pas <code>false</code>, <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/undefined"><code>undefined</code></a>, <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/null"><code>null</code></a>, <code>0</code>, <code>-0</code>, <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/NaN"><code>NaN</code></a> ou la chaîne vide (<code>""</code>), et tout objet, y compris un objet <code>Boolean</code> dont la valeur est <code>false</code>, seront évalués à <code>true</code> lors d'une instruction conditionnelle <code>if</code>. Ainsi :</p>
-
-<pre class="brush: js">var b = new Boolean(false);
-if (b) // la condition sera évaluée à true
-</pre>
-
-<h2 id="examples">Exemples</h2>
-
-<h3 id="using_if...else">Utiliser <code>if...else</code></h3>
-
-<pre class="brush: js">if (cipher_char == from_char) {
-  result = result + to_char;
-  x++;
-} else {
-  result = result + clear_char;
-}</pre>
-
-<h3 id="using_else_if">Utiliser <code>else if</code></h3>
-
-<p>Bien qu'il n'y ait pas de mot-clé elseif dans le langage JavaScript, il est possible d'imbriquer des instructions if...else à la suite les une des autres en plaçant un espace entre else et le début de l'instruction if imbriquée :</p>
-
-<pre class="brush: js">if (x &gt; 50){
-  // faire quelque chose
-} else if (x &gt; 5) {
-  // faire autre chose
-} else {
-  // faire encore autre chose
-}</pre>
-
-<h3 id="assignment_within_the_conditional_expression">Affectation de variable dans l'expression conditionnelle</h3>
-
-<p>Il est conseillé de ne pas utiliser d'affectation au sein des expressions conditionnelles. En effet, l'affectation peut être confondue avec un test d'égalité lorsqu'on analyse le code. Il ne faut donc pas utiliser le code suivant (bien qu'il fonctionne) :</p>
-
-<pre class="brush: js example-bad">if (x = y) {
-  /* exécuter les instructions */
-}</pre>
-
-<p>S'il est nécessaire d'effectuer une telle affectation, une pratique courante consiste à ajouter des parenthèses de cette manière afin d'alerter le lecteur du code (exemple à utiliser) :</p>
-
-<pre class="brush: js example-good">if ((x = y)) {
-  /* exécuter les instructions */
-}</pre>
-
-<h2 id="specifications">Spécifications</h2>
-
-{{Specifications}}
-
-<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
-
-<p>{{Compat}}</p>
-
-<h2 id="see_also">Voir aussi</h2>
-
-<ul>
-  <li><a href="/fr/docs/JavaScript/Reference/Statements/block">block</a></li>
-  <li><a href="/fr/docs/JavaScript/Reference/Statements/switch">switch</a></li>
-  <li><a href="/fr/docs/JavaScript/Reference/Operators/Conditional_Operator">L'opérateur conditionnel</a></li>
-</ul>
diff --git a/files/fr/web/javascript/reference/statements/if...else/index.md b/files/fr/web/javascript/reference/statements/if...else/index.md
new file mode 100644
index 0000000000..5a96cdd1a1
--- /dev/null
+++ b/files/fr/web/javascript/reference/statements/if...else/index.md
@@ -0,0 +1,136 @@
+---
+title: if...else
+slug: Web/JavaScript/Reference/Statements/if...else
+tags:
+  - JavaScript
+  - Reference
+  - Statement
+translation_of: Web/JavaScript/Reference/Statements/if...else
+original_slug: Web/JavaScript/Reference/Instructions/if...else
+browser-compat: javascript.statements.if_else
+---
+{{jsSidebar("Statements")}}
+
+L'instruction **`if`** exécute une instruction si une condition donnée est vraie ou équivalente à vrai. Si la condition n'est pas vérifiée, il est possible d'utiliser une autre instruction.
+
+{{EmbedInteractiveExample("pages/js/statement-ifelse.html")}}
+
+## Syntaxe
+
+    if (condition)
+      statement1
+    } else {
+      statement2
+    }
+
+- `condition`
+  - : Une [expression](/fr/docs/Web/JavaScript/Guide/Expressions_and_Operators#expressions) qui est évaluée à `true` ou `false`.
+- `statement1`
+  - : L'instruction qui est exécutée si la condition est vérifiée (i.e. est évaluée à `true`). Cette instruction peut être n'importe quelle instruction valide, y compris une imbrication d'autres instructions `if`. Pour exécuter plusieurs instructions, on pourra utiliser un [bloc d'instructions](/fr/docs/Web/JavaScript/Reference/Statements/block) ({ ... }) qui permet de les regrouper. Pour n'exécuter aucune instruction, on pourra utiliser [l'instruction vide](/fr/docs/Web/JavaScript/Reference/Statements/Empty).
+- `statement2`
+  - : Si la clause `else` existe, l'instruction qui est exécutée si la `condition` est évaluée à `false`. Comme pour la première, cette instruction peut être n'importe quelle instruction valide : une autre instruction `if` imbriquée, un bloc d'instruction, une instruction vide, etc.
+
+## Description
+
+Plusieurs instructions `if...else` peuvent être imbriquées afin de créer une structure `else if` (on notera qu'il n'y a pas de mot-clé `elseif` en JavaScript).
+
+```js
+if (condition1)
+  instruction1
+else if (condition2)
+  instruction2
+else if (condition3)
+  instruction3
+...
+else
+  instructionN
+```
+
+Si on indente correctement le code, on retrouve la structure exactement équivalente :
+
+```js
+if (condition1)
+  instruction1
+else
+  if (condition2)
+    instruction2
+  else
+    if (condition3)
+...
+```
+
+Afin d'exécuter plusieurs instructions, on utilisera un {{jsxref("Statements/block","bloc d'instructions","",1)}} (`{ ... }`) pour regrouper les instructions souhaitées. Utiliser les blocs d'instructions est une bonne façon d'organiser son code, surtout lorsque celui-ci comporte des instructions conditionnelles imbriquées.
+
+```js
+if (condition) {
+  instructions1
+} else {
+  instructions2
+}
+```
+
+Attention à ne pas confondre les valeurs booléennes « primitives » `true` et `false` avec les valeurs true et false d'un objet [`Boolean`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Boolean). Toute valeur qui n'est pas `false`, [`undefined`](/fr/docs/Web/JavaScript/Reference/Global_Objects/undefined), [`null`](/fr/docs/Web/JavaScript/Reference/Global_Objects/null), `0`, `-0`, [`NaN`](/fr/docs/Web/JavaScript/Reference/Global_Objects/NaN) ou la chaîne vide (`""`), et tout objet, y compris un objet `Boolean` dont la valeur est `false`, seront évalués à `true` lors d'une instruction conditionnelle `if`. Ainsi :
+
+```js
+var b = new Boolean(false);
+if (b) // la condition sera évaluée à true
+```
+
+## Exemples
+
+### Utiliser `if...else`
+
+```js
+if (cipher_char == from_char) {
+  result = result + to_char;
+  x++;
+} else {
+  result = result + clear_char;
+}
+```
+
+### Utiliser `else if`
+
+Bien qu'il n'y ait pas de mot-clé elseif dans le langage JavaScript, il est possible d'imbriquer des instructions if...else à la suite les une des autres en plaçant un espace entre else et le début de l'instruction if imbriquée :
+
+```js
+if (x > 50){
+  // faire quelque chose
+} else if (x > 5) {
+  // faire autre chose
+} else {
+  // faire encore autre chose
+}
+```
+
+### Affectation de variable dans l'expression conditionnelle
+
+Il est conseillé de ne pas utiliser d'affectation au sein des expressions conditionnelles. En effet, l'affectation peut être confondue avec un test d'égalité lorsqu'on analyse le code. Il ne faut donc pas utiliser le code suivant (bien qu'il fonctionne) :
+
+```js example-bad
+if (x = y) {
+  /* exécuter les instructions */
+}
+```
+
+S'il est nécessaire d'effectuer une telle affectation, une pratique courante consiste à ajouter des parenthèses de cette manière afin d'alerter le lecteur du code (exemple à utiliser) :
+
+```js example-good
+if ((x = y)) {
+  /* exécuter les instructions */
+}
+```
+
+## Spécifications
+
+{{Specifications}}
+
+## Compatibilité des navigateurs
+
+{{Compat}}
+
+## Voir aussi
+
+- [block](/fr/docs/JavaScript/Reference/Statements/block)
+- [switch](/fr/docs/JavaScript/Reference/Statements/switch)
+- [L'opérateur conditionnel](/fr/docs/JavaScript/Reference/Operators/Conditional_Operator)
diff --git a/files/fr/web/javascript/reference/statements/import.meta/index.html b/files/fr/web/javascript/reference/statements/import.meta/index.html
deleted file mode 100644
index b4316ca46c..0000000000
--- a/files/fr/web/javascript/reference/statements/import.meta/index.html
+++ /dev/null
@@ -1,69 +0,0 @@
----
-title: import.meta
-slug: Web/JavaScript/Reference/Statements/import.meta
-tags:
-  - JavaScript
-  - Modules
-  - Reference
-translation_of: Web/JavaScript/Reference/Statements/import.meta
-original_slug: Web/JavaScript/Reference/Instructions/import.meta
----
-<div>{{JSSidebar("Statements")}}</div>
-
-<p>L'objet<strong> <code>import.meta</code></strong> est une méta-propriété qui expose des métadonnées d'un module JavaScript spécifiques au contexte. Cet objet contient des informations à propos du module, telles que l'URL du module.</p>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">import.meta</pre>
-
-<h2 id="Description">Description</h2>
-
-<p>L'objet <code>import.meta</code> se compose d'un mot-clé <code>"import</code>", suivi d'un point, puis du nom de propriété <code>"meta"</code>. En temps normal, "<code>import."</code> serait utilisé comme contexte pour un accès à une propriété mais, dans ce cas, <code>"import."</code> n'est pas, à proprement parler, un objet.</p>
-
-<p>L'objet <code>import.meta</code> est créé par l'implémentation ECMAScript avec un prototype qui vaut {{jsxref("null")}}. Cet objet est extensible et ses propriétés sont accessibles en écriture, configurables et énumérables.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<p>Soit un module <code>mon-module.js</code></p>
-
-<pre class="brush: html">&lt;script type="module" src="mon-module.js"&gt;&lt;/script&gt;
-</pre>
-
-<p>Il est possible d'accéder aux métadonnées du module grâce à l'objet <code>import.meta</code>.</p>
-
-<pre class="brush: js">console.log(import.meta); // { url: "file:///home/user/mon-module.js" }</pre>
-
-<p>Cet objet contient une propriété <code>url</code> qui indique l'URL de base du module. Dans le cas des scripts externes, celle-ci sera l'URL à partir de laquelle le script a été obtenu. Pour les scripts écrits dans le document, ce sera l'URL de base du document englobant.</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td><a href="https://github.com/tc39/proposal-import-meta/#importmeta">Proposition pour <code>import.meta</code></a></td>
-   <td>Niveau 3</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName("HTML WHATWG","webappapis.html#hostgetimportmetaproperties","import.meta")}}</td>
-   <td>{{Spec2("HTML WHATWG")}}</td>
-   <td>Définition des propriétés <code>import.meta</code> en HTML.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.statements.import_meta")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Instructions/import","import")}}</li>
- <li>{{jsxref("Instructions/export","export")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/statements/import.meta/index.md b/files/fr/web/javascript/reference/statements/import.meta/index.md
new file mode 100644
index 0000000000..be581c4b15
--- /dev/null
+++ b/files/fr/web/javascript/reference/statements/import.meta/index.md
@@ -0,0 +1,55 @@
+---
+title: import.meta
+slug: Web/JavaScript/Reference/Statements/import.meta
+tags:
+  - JavaScript
+  - Modules
+  - Reference
+translation_of: Web/JavaScript/Reference/Statements/import.meta
+original_slug: Web/JavaScript/Reference/Instructions/import.meta
+---
+{{JSSidebar("Statements")}}
+
+L'objet** `import.meta`** est une méta-propriété qui expose des métadonnées d'un module JavaScript spécifiques au contexte. Cet objet contient des informations à propos du module, telles que l'URL du module.
+
+## Syntaxe
+
+    import.meta
+
+## Description
+
+L'objet `import.meta` se compose d'un mot-clé `"import`", suivi d'un point, puis du nom de propriété `"meta"`. En temps normal, "`import."` serait utilisé comme contexte pour un accès à une propriété mais, dans ce cas, `"import."` n'est pas, à proprement parler, un objet.
+
+L'objet `import.meta` est créé par l'implémentation ECMAScript avec un prototype qui vaut {{jsxref("null")}}. Cet objet est extensible et ses propriétés sont accessibles en écriture, configurables et énumérables.
+
+## Exemples
+
+Soit un module `mon-module.js`
+
+```html
+<script type="module" src="mon-module.js"></script>
+```
+
+Il est possible d'accéder aux métadonnées du module grâce à l'objet `import.meta`.
+
+```js
+console.log(import.meta); // { url: "file:///home/user/mon-module.js" }
+```
+
+Cet objet contient une propriété `url` qui indique l'URL de base du module. Dans le cas des scripts externes, celle-ci sera l'URL à partir de laquelle le script a été obtenu. Pour les scripts écrits dans le document, ce sera l'URL de base du document englobant.
+
+## Spécifications
+
+| Spécification                                                                                                        | État                             | Commentaires                                     |
+| -------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------------------------------------------ |
+| [Proposition pour `import.meta`](https://github.com/tc39/proposal-import-meta/#importmeta)                           | Niveau 3                         | Définition initiale.                             |
+| {{SpecName("HTML WHATWG","webappapis.html#hostgetimportmetaproperties","import.meta")}} | {{Spec2("HTML WHATWG")}} | Définition des propriétés `import.meta` en HTML. |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.statements.import_meta")}}
+
+## Voir aussi
+
+- {{jsxref("Instructions/import","import")}}
+- {{jsxref("Instructions/export","export")}}
diff --git a/files/fr/web/javascript/reference/statements/import/index.html b/files/fr/web/javascript/reference/statements/import/index.html
deleted file mode 100644
index e998fe745c..0000000000
--- a/files/fr/web/javascript/reference/statements/import/index.html
+++ /dev/null
@@ -1,235 +0,0 @@
----
-title: import
-slug: Web/JavaScript/Reference/Statements/import
-tags:
-  - ECMAScript 2015
-  - Instruction
-  - JavaScript
-  - Modules
-  - import
-translation_of: Web/JavaScript/Reference/Statements/import
-original_slug: Web/JavaScript/Reference/Instructions/import
----
-<div>{{jsSidebar("Statements")}}</div>
-
-<p>L'instruction <code><strong>import</strong></code> est utilisée pour importer des liens qui sont exportés par un autre module. Les modules importés sont interprétés en <a href="/fr/docs/Web/JavaScript/Reference/Strict_mode">mode strict</a> dans tous les cas. L'instruction <code>import</code> ne peut pas être utilisée dans les scripts embarqués sauf si ceux-ci proviennent de ressources avec <code><a href="/fr/docs/Web/HTML/Element/script#Attributs">type="module"</a></code>.</p>
-
-<div class="note">
-<p><strong>Note :</strong> Il existe également une forme fonctionnelle, <code>import()</code> (cf. <a href="#dyn">ci-après</a>) qui permet d'avoir des chargements dynamiques. La compatibilité ascendante peut être atteinte en utilisant l'attribut <code>nomodule</code> sur la balise {{HTMLElement("script")}}.</p>
-</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">import <em>exportParDefaut</em> from "<em>nom-module</em>";
-import * as <em>nom</em> from "<em>nom-module</em>";
-import { <em>export </em>} from "<em>nom-module</em>";
-import { <em>export</em> as <em>alias </em>} from "<em>nom-module</em>";
-import { <em>export1 , export2</em> } from "<em>nom-module</em>";
-import { <em>export1 , export2</em> as <em>alias2</em> , <em>[...]</em> } from "<em>nom-module</em>";
-import <em>exportParDefaut</em>, { <em>export</em> [ , <em>[...]</em> ] } from "<em>nom-module</em>";
-import <em>exportParDefaut</em>, * as <em>nom</em> from "<em>nom-module</em>";
-import "<em>nom-module</em>";
-import { <em>toto , truc</em> } from "<em>nom-module/chemin/vers/fichier-non-exporte</em>";
-let <em>promesse</em> = import("<em>nom-module</em>");</pre>
-
-<dl>
- <dt><code>exportParDefaut</code></dt>
- <dd>Nom qui fera référence à l'export par défaut du module.</dd>
- <dt><code>nom-module</code></dt>
- <dd>Le module depuis lequel importer. C'est souvent un chemin absolu ou relatif vers le fichier <code>.js</code> contenant le module. Certains empaqueteurs peuvent permettre ou requérir l'utilisation de l'extension ; vérifier votre environnement. Seules les String à apostrophes simples ou doubles sont autorisées.</dd>
- <dt><code>nom</code></dt>
- <dd>Nom de l'objet module qui sera utilisé comme un genre d'espace de noms lors de références aux imports.</dd>
- <dt><code>export</code>, <code>exportN</code></dt>
- <dd>Nom des exports à importer.</dd>
- <dt><code>alias</code>, <code>aliasN</code></dt>
- <dd>Noms qui feront référence aux imports nommés.</dd>
-</dl>
-
-<h2 id="Description">Description</h2>
-
-<p>Le paramètre <code>nom</code> est le nom de l'"objet module" qui sera utilisé comme un genre d'espace de noms lors de références aux exports. Les paramètres <code>export</code> indiquent les exports nommés individuellement, tandis que la syntaxe <code>import * as nom</code> les importe tous. Ci-dessous d'autres exemples pour clarifier la syntaxe.</p>
-
-<h3 id="Importer_lintégralité_du_contenu_dun_module">Importer l'intégralité du contenu d'un module</h3>
-
-<p>Ce qui suit insère <code>monModule</code> dans la portée courante, contenant tous les exports  du module dans le fichier situé dans <code>/modules/mon-module.js</code>.</p>
-
-<pre class="brush: js">import * as monModule from '/modules/mon-module.js';
-</pre>
-
-<p>Ici, accéder aux exports signifie utiliser le nom du module (ici <code>monModule</code>) comme un espace de noms. Par exemple, si le module importé ci-dessus incluait un export <code>faireToutesLesChosesIncroyables()</code>, vous l'écririez comme ceci :</p>
-
-<pre class="brush: js">monModule.faireToutesLesChosesIncroyables();</pre>
-
-<h3 id="Importer_un_seul_export_depuis_un_module">Importer un seul export depuis un module</h3>
-
-<p>Étant donné un objet ou une valeur nommé(e) <code>monExport</code> qui est exporté(e) depuis le module <code>mon-module</code>, soit implicitement (parce que l'intégralité du module est exportée), soit explicitement (en utilisant l'instruction {{jsxref("Statements/export", "export")}}), ce qui suit insére <code>monExport</code> dans la portée courante.</p>
-
-<pre class="brush: js">import {monExport} from '/modules/mon-module.js';</pre>
-
-<h3 id="Importer_plusieurs_éléments_exportés_depuis_un_module">Importer plusieurs éléments exportés depuis un module</h3>
-
-<p>Ce qui suit insère à la fois <code>machin</code> et <code>truc</code> dans la portée courante.</p>
-
-<pre class="brush: js">import {machin, truc} from '/modules/mon-module.js';</pre>
-
-<h3 id="Importer_un_élément_exporté_avec_un_alias">Importer un élément exporté avec un alias</h3>
-
-<p>Vous pouvez renommer un export lors de l'importation. Par exemple, ce qui suit insére <code>nomCourt</code> dans la portée courante.</p>
-
-<pre class="brush: js">import {nomDExportDeModuleVraimentVraimentLong as nomCourt}
-  from '/modules/mon-module.js';</pre>
-
-<h3 id="Renommer_plusieurs_exports_pendant_limport">Renommer plusieurs exports pendant l'import</h3>
-
-<p>Importe des exports multiples depuis un module avec des alias commodes :</p>
-
-<pre class="brush: js">import {
-  nomDExportDeModuleVraimentVraimentLong as nomCourt,
-  unAutreNomDeModuleLong as court
-} from '/modules/mon-module.js';</pre>
-
-<h3 id="Importer_un_module_uniquement_pour_ses_effets_de_bord">Importer un module uniquement pour ses effets de bord</h3>
-
-<p>Importe un module complet pour ses effets de bord seulement, sans importer quoi que ce soit. Ce qui suit exécute le code global du module, mais n'importe en fait aucune valeur.</p>
-
-<pre class="brush: js">import '/modules/mon-module.js';
-</pre>
-
-<h3 id="Importation_des_défauts">Importation des défauts</h3>
-
-<p>Il est possible d'avoir un {{jsxref("Statements/export", "export")}} par défaut (que ce soit un objet, une fonction, une classe, etc.). L'instruction <code>import</code> peut alors être utilisée pour importer ces défauts.</p>
-
-<p>La version la plus simple importe directement le défaut :</p>
-
-<pre class="brush: js">import monDefaut from '/modules/mon-module.js';</pre>
-
-<p>Il est également possible d'utiliser la syntaxe de défaut avec celles vues ci-dessus (imports d'espaces de noms ou imports nommés). Dans de tels cas, l'import par défaut devra être déclaré en premier. Par exemple :</p>
-
-<pre class="brush: js">import monDefaut, * as monModule from '/modules/mon-module.js';
-// monModule utilisé comme un espace de noms</pre>
-
-<p>ou</p>
-
-<pre class="brush: js">import monDefaut, {machin, truc} from '/modules/mon-module.js';
-// imports nommés spécifiques
-</pre>
-
-<h3 id="Imports_dynamiques">Imports dynamiques</h3>
-
-<p>Le mot-clé <code>import</code> peut être utilisé comme une fonction afin d'importer dynamiquement un module (utile lorsqu'on souhaite charger un module selon une condition donnée ou faire du chargement à la demande). Lorsqu'il est utilisé de cette façon, il renvoie une promesse :</p>
-
-<pre class="brush: js">import('/modules/mon-module.js')
-  .then((module) =&gt; {
-    // Faire quelque chose avec le module
-  });</pre>
-
-<p>On peut utiliser cette forme avec le mot-clé <code>await</code> :</p>
-
-<pre class="brush: js">let module = await import('/modules/mon-module.js');</pre>
-
-<h2 id="Exemples">Exemples</h2>
-
-<p>Importation depuis un module secondaire pour aider le traitement d'une requête AJAX JSON.</p>
-
-<h3 id="Le_module_fichier.js">Le module : fichier.js</h3>
-
-<pre class="brush: js; highlight: [14]">function getJSON(url, rappel) {
-  let xhr = new XMLHttpRequest();
-  xhr.onload = function () {
-    rappel(this.responseText)
-  };
-  xhr.open('GET', url, true);
-  xhr.send();
-}
-
-export function recupererContenuUtile(url, rappel) {
-  getJSON(url, donnees =&gt; rappel(JSON.parse(donnees)));
-}</pre>
-
-<h3 id="Le_programme_principal_principal.js">Le programme principal : principal.js</h3>
-
-<pre class="brush: js">import { recupererContenuUtile } from '/modules/fichier.js';
-
-recupererContenuUtile('http://www.example.com',
-    donnees =&gt; { faireQuelqueChoseDUtile(donnees); });</pre>
-
-<h3 id="Import_dynamique">Import dynamique</h3>
-
-<p>Dans cet exemple, on voit comment charger une fonctionnalité sur une page lorsqu'un utilisateur effectue une certaine action. Ici, lorsque l'utilisateur clique sur un bouton, cela déclenche l'appel d'une fonction dans le module.</p>
-
-<pre class="brush: js">const main = document.querySelector("main");
-for (const link of document.querySelectorAll("nav &gt; a")) {
-  link.addEventListener("click", e =&gt; {
-    e.preventDefault();
-
-    import('/modules/mon-module.js')
-      .then(module =&gt; {
-        module.loadPageInto(main);
-      })
-      .catch(err =&gt; {
-        main.textContent = err.message;
-      });
-  });
-}
-
-;</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><a href="https://github.com/tc39/proposal-dynamic-import/#import">Proposition pour les imports dynamiques « fonctionnels »</a></td>
-   <td>Proposition de niveau 4</td>
-   <td>Fera partie de ECMAScript 2020</td>
-  </tr>
-  <tr>
-   <td>{{SpecName("ESDraft", "#sec-imports", "Imports")}}</td>
-   <td>{{Spec2("ESDraft")}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName("ES2018", "#sec-imports", "Imports")}}</td>
-   <td>{{Spec2("ES2018")}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName("ES2017", "#sec-imports", "Imports")}}</td>
-   <td>{{Spec2("ES2017")}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName("ES2016", "#sec-imports", "Imports")}}</td>
-   <td>{{Spec2("ES2016")}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName("ES2015", "#sec-imports", "Imports")}}</td>
-   <td>{{Spec2("ES2015")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.statements.import")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Instructions/export", "export")}}</li>
- <li><code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/import.meta">import.meta</a></code></li>
- <li>Limin Zhu, Brian Terlson et l'équipe Microsoft Edge : <a href="https://blogs.windows.com/msedgedev/2016/05/17/es6-modules-and-beyond/">Previewing ES6 Modules and more from ES2015, ES2016 and beyond</a></li>
- <li><a href="https://tech.mozfr.org/post/2015/08/21/ES6-en-details-%3A-les-modules">Jason Orendorff : ES6 en détails : les modules</a></li>
- <li><a class="external" href="https://exploringjs.com/es6/ch_modules.html">Le livre d'Axel Rauschmayer : Exploring JS: Modules</a></li>
- <li><a href="https://tech.mozfr.org/post/2018/04/06/Une-plongee-illustree-dans-les-modules-ECMAScript">Un billet illustré de Lin Clark, traduit en français, sur les modules</a></li>
- <li><a href="https://javascript.info/import-export">Tutoriel JavaScript sur <code>export</code> et <code>import</code></a></li>
-</ul>
diff --git a/files/fr/web/javascript/reference/statements/import/index.md b/files/fr/web/javascript/reference/statements/import/index.md
new file mode 100644
index 0000000000..f924b45481
--- /dev/null
+++ b/files/fr/web/javascript/reference/statements/import/index.md
@@ -0,0 +1,223 @@
+---
+title: import
+slug: Web/JavaScript/Reference/Statements/import
+tags:
+  - ECMAScript 2015
+  - Instruction
+  - JavaScript
+  - Modules
+  - import
+translation_of: Web/JavaScript/Reference/Statements/import
+original_slug: Web/JavaScript/Reference/Instructions/import
+---
+{{jsSidebar("Statements")}}
+
+L'instruction **`import`** est utilisée pour importer des liens qui sont exportés par un autre module. Les modules importés sont interprétés en [mode strict](/fr/docs/Web/JavaScript/Reference/Strict_mode) dans tous les cas. L'instruction `import` ne peut pas être utilisée dans les scripts embarqués sauf si ceux-ci proviennent de ressources avec [`type="module"`](/fr/docs/Web/HTML/Element/script#Attributs).
+
+> **Note :** Il existe également une forme fonctionnelle, `import()` (cf. [ci-après](#dyn)) qui permet d'avoir des chargements dynamiques. La compatibilité ascendante peut être atteinte en utilisant l'attribut `nomodule` sur la balise {{HTMLElement("script")}}.
+
+## Syntaxe
+
+    import exportParDefaut from "nom-module";
+    import * as nom from "nom-module";
+    import { export } from "nom-module";
+    import { export as alias } from "nom-module";
+    import { export1 , export2 } from "nom-module";
+    import { export1 , export2 as alias2 , [...] } from "nom-module";
+    import exportParDefaut, { export [ , [...] ] } from "nom-module";
+    import exportParDefaut, * as nom from "nom-module";
+    import "nom-module";
+    import { toto , truc } from "nom-module/chemin/vers/fichier-non-exporte";
+    let promesse = import("nom-module");
+
+- `exportParDefaut`
+  - : Nom qui fera référence à l'export par défaut du module.
+- `nom-module`
+  - : Le module depuis lequel importer. C'est souvent un chemin absolu ou relatif vers le fichier `.js` contenant le module. Certains empaqueteurs peuvent permettre ou requérir l'utilisation de l'extension ; vérifier votre environnement. Seules les String à apostrophes simples ou doubles sont autorisées.
+- `nom`
+  - : Nom de l'objet module qui sera utilisé comme un genre d'espace de noms lors de références aux imports.
+- `export`, `exportN`
+  - : Nom des exports à importer.
+- `alias`, `aliasN`
+  - : Noms qui feront référence aux imports nommés.
+
+## Description
+
+Le paramètre `nom` est le nom de l'"objet module" qui sera utilisé comme un genre d'espace de noms lors de références aux exports. Les paramètres `export` indiquent les exports nommés individuellement, tandis que la syntaxe `import * as nom` les importe tous. Ci-dessous d'autres exemples pour clarifier la syntaxe.
+
+### Importer l'intégralité du contenu d'un module
+
+Ce qui suit insère `monModule` dans la portée courante, contenant tous les exports  du module dans le fichier situé dans `/modules/mon-module.js`.
+
+```js
+import * as monModule from '/modules/mon-module.js';
+```
+
+Ici, accéder aux exports signifie utiliser le nom du module (ici `monModule`) comme un espace de noms. Par exemple, si le module importé ci-dessus incluait un export `faireToutesLesChosesIncroyables()`, vous l'écririez comme ceci :
+
+```js
+monModule.faireToutesLesChosesIncroyables();
+```
+
+### Importer un seul export depuis un module
+
+Étant donné un objet ou une valeur nommé(e) `monExport` qui est exporté(e) depuis le module `mon-module`, soit implicitement (parce que l'intégralité du module est exportée), soit explicitement (en utilisant l'instruction {{jsxref("Statements/export", "export")}}), ce qui suit insére `monExport` dans la portée courante.
+
+```js
+import {monExport} from '/modules/mon-module.js';
+```
+
+### Importer plusieurs éléments exportés depuis un module
+
+Ce qui suit insère à la fois `machin` et `truc` dans la portée courante.
+
+```js
+import {machin, truc} from '/modules/mon-module.js';
+```
+
+### Importer un élément exporté avec un alias
+
+Vous pouvez renommer un export lors de l'importation. Par exemple, ce qui suit insére `nomCourt` dans la portée courante.
+
+```js
+import {nomDExportDeModuleVraimentVraimentLong as nomCourt}
+  from '/modules/mon-module.js';
+```
+
+### Renommer plusieurs exports pendant l'import
+
+Importe des exports multiples depuis un module avec des alias commodes :
+
+```js
+import {
+  nomDExportDeModuleVraimentVraimentLong as nomCourt,
+  unAutreNomDeModuleLong as court
+} from '/modules/mon-module.js';
+```
+
+### Importer un module uniquement pour ses effets de bord
+
+Importe un module complet pour ses effets de bord seulement, sans importer quoi que ce soit. Ce qui suit exécute le code global du module, mais n'importe en fait aucune valeur.
+
+```js
+import '/modules/mon-module.js';
+```
+
+### Importation des défauts
+
+Il est possible d'avoir un {{jsxref("Statements/export", "export")}} par défaut (que ce soit un objet, une fonction, une classe, etc.). L'instruction `import` peut alors être utilisée pour importer ces défauts.
+
+La version la plus simple importe directement le défaut :
+
+```js
+import monDefaut from '/modules/mon-module.js';
+```
+
+Il est également possible d'utiliser la syntaxe de défaut avec celles vues ci-dessus (imports d'espaces de noms ou imports nommés). Dans de tels cas, l'import par défaut devra être déclaré en premier. Par exemple :
+
+```js
+import monDefaut, * as monModule from '/modules/mon-module.js';
+// monModule utilisé comme un espace de noms
+```
+
+ou
+
+```js
+import monDefaut, {machin, truc} from '/modules/mon-module.js';
+// imports nommés spécifiques
+```
+
+### Imports dynamiques
+
+Le mot-clé `import` peut être utilisé comme une fonction afin d'importer dynamiquement un module (utile lorsqu'on souhaite charger un module selon une condition donnée ou faire du chargement à la demande). Lorsqu'il est utilisé de cette façon, il renvoie une promesse :
+
+```js
+import('/modules/mon-module.js')
+  .then((module) => {
+    // Faire quelque chose avec le module
+  });
+```
+
+On peut utiliser cette forme avec le mot-clé `await` :
+
+```js
+let module = await import('/modules/mon-module.js');
+```
+
+## Exemples
+
+Importation depuis un module secondaire pour aider le traitement d'une requête AJAX JSON.
+
+### Le module : fichier.js
+
+```js
+function getJSON(url, rappel) {
+  let xhr = new XMLHttpRequest();
+  xhr.onload = function () {
+    rappel(this.responseText)
+  };
+  xhr.open('GET', url, true);
+  xhr.send();
+}
+
+export function recupererContenuUtile(url, rappel) {
+  getJSON(url, donnees => rappel(JSON.parse(donnees)));
+}
+```
+
+### Le programme principal : principal.js
+
+```js
+import { recupererContenuUtile } from '/modules/fichier.js';
+
+recupererContenuUtile('http://www.example.com',
+    donnees => { faireQuelqueChoseDUtile(donnees); });
+```
+
+### Import dynamique
+
+Dans cet exemple, on voit comment charger une fonctionnalité sur une page lorsqu'un utilisateur effectue une certaine action. Ici, lorsque l'utilisateur clique sur un bouton, cela déclenche l'appel d'une fonction dans le module.
+
+```js
+const main = document.querySelector("main");
+for (const link of document.querySelectorAll("nav > a")) {
+  link.addEventListener("click", e => {
+    e.preventDefault();
+
+    import('/modules/mon-module.js')
+      .then(module => {
+        module.loadPageInto(main);
+      })
+      .catch(err => {
+        main.textContent = err.message;
+      });
+  });
+}
+
+;
+```
+
+## Spécifications
+
+| Spécification                                                                                                       | État                         | Commentaires                   |
+| ------------------------------------------------------------------------------------------------------------------- | ---------------------------- | ------------------------------ |
+| [Proposition pour les imports dynamiques « fonctionnels »](https://github.com/tc39/proposal-dynamic-import/#import) | Proposition de niveau 4      | Fera partie de ECMAScript 2020 |
+| {{SpecName("ESDraft", "#sec-imports", "Imports")}}                                                | {{Spec2("ESDraft")}} |                                |
+| {{SpecName("ES2018", "#sec-imports", "Imports")}}                                                    | {{Spec2("ES2018")}}     |                                |
+| {{SpecName("ES2017", "#sec-imports", "Imports")}}                                                    | {{Spec2("ES2017")}}     |                                |
+| {{SpecName("ES2016", "#sec-imports", "Imports")}}                                                    | {{Spec2("ES2016")}}     |                                |
+| {{SpecName("ES2015", "#sec-imports", "Imports")}}                                                    | {{Spec2("ES2015")}}     | Définition initiale.           |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.statements.import")}}
+
+## Voir aussi
+
+- {{jsxref("Instructions/export", "export")}}
+- [`import.meta`](/fr/docs/Web/JavaScript/Reference/Instructions/import.meta)
+- Limin Zhu, Brian Terlson et l'équipe Microsoft Edge : [Previewing ES6 Modules and more from ES2015, ES2016 and beyond](https://blogs.windows.com/msedgedev/2016/05/17/es6-modules-and-beyond/)
+- [Jason Orendorff : ES6 en détails : les modules](https://tech.mozfr.org/post/2015/08/21/ES6-en-details-%3A-les-modules)
+- [Le livre d'Axel Rauschmayer : Exploring JS: Modules](https://exploringjs.com/es6/ch_modules.html)
+- [Un billet illustré de Lin Clark, traduit en français, sur les modules](https://tech.mozfr.org/post/2018/04/06/Une-plongee-illustree-dans-les-modules-ECMAScript)
+- [Tutoriel JavaScript sur `export` et `import`](https://javascript.info/import-export)
diff --git a/files/fr/web/javascript/reference/statements/index.html b/files/fr/web/javascript/reference/statements/index.html
deleted file mode 100644
index 1e372ad996..0000000000
--- a/files/fr/web/javascript/reference/statements/index.html
+++ /dev/null
@@ -1,149 +0,0 @@
----
-title: Instructions
-slug: Web/JavaScript/Reference/Statements
-tags:
-  - JavaScript
-  - Reference
-  - statements
-translation_of: Web/JavaScript/Reference/Statements
-original_slug: Web/JavaScript/Reference/Instructions
----
-<div>{{jsSidebar("Statements")}}</div>
-
-<p>Les applications JavaScript sont composées de plusieurs instructions organisées grâce à une syntaxe. Une instruction peut s'étaler sur plusieurs lignes et on peut avoir plusieurs instructions sur une seule ligne si chaque instruction est séparée de la suivante par un point-virgule.</p>
-
-<h2 id="Instructions_et_déclarations_par_catégorie">Instructions et déclarations, par catégorie</h2>
-
-<p>Pour une liste alphabétique, voir le volet de navigation situé à gauche sur cette page.</p>
-
-<h3 id="Contrôle_du_flux">Contrôle du flux</h3>
-
-<dl>
- <dt>{{jsxref("Instructions/bloc", "Bloc")}}</dt>
- <dd>Une instruction de bloc est utilisée pour regrouper zéro ou plusieurs instructions. Un bloc est délimité par une paire d'accolades.</dd>
- <dt>{{jsxref("Instructions/break", "break")}}</dt>
- <dd>Cette instruction termine la boucle ou l'instruction <code>switch</code> ou l'instruction <code>label</code> en cours et continue l'exécution sur l'instruction suivant l'instruction terminée.</dd>
- <dt>{{jsxref("Instructions/continue", "continue")}}</dt>
- <dd>Cette instruction termine l'exécution des instructions dans la boucle courante, ou la boucle avec une étiquette correspondante, et continue l'exécution de la boucle dans l'itération suivante.</dd>
- <dt>{{jsxref("Instructions/vide", "Vide")}}</dt>
- <dd>Une instruction vide est utilisée pour ne fournir aucune instruction là où JavaScript en attendrait une.</dd>
- <dt>{{jsxref("Instructions/if...else","if...else")}}</dt>
- <dd>Cette instruction exécute une instruction si une condition donnée est vérifiée. Si la condition n'est pas vérifiée une autre instruction pourra être exécutée.</dd>
- <dt>{{jsxref("Instructions/switch", "switch")}}</dt>
- <dd>Cette instruction permet d'évaluer une expression et de faire correspondre le résultat de cette expression avec différents cas et d'exécuter les instructions associées aux cas qui ont chacun un identifiant.</dd>
- <dt>{{jsxref("Instructions/throw", "throw")}}</dt>
- <dd>Cette instruction lève une exception.</dd>
- <dt>{{jsxref("Instructions/try...catch","try...catch")}}</dt>
- <dd>Cette instruction permet de spécifier un ensemble d'instructions à tenter, et de préciser le traitement à effectuer dans le cas où une exception est produite.</dd>
-</dl>
-
-<h3 id="Déclarations">Déclarations</h3>
-
-<dl>
- <dt>{{jsxref("Instructions/var", "var")}}</dt>
- <dd>
- <p>Cette instruction permet de déclarer une variable, éventuellement en fournissant une valeur pour permettant de l'initialiser.</p>
- </dd>
- <dt>{{jsxref("Instructions/let", "let")}}</dt>
- <dd>Cette instruction permet de déclarer une variable locale dans une portée d'un bloc et éventuellement d'initialiser sa valeur.</dd>
- <dt>{{jsxref("Instructions/const", "const")}}</dt>
- <dd>Cette instruction déclare une constante en lecture seule.</dd>
-</dl>
-
-<h3 id="Fonctions_et_classes">Fonctions et classes</h3>
-
-<dl>
- <dt>{{jsxref("Instructions/function", "function")}}</dt>
- <dd>Cette instruction déclare une fonction avec les paramètres donnés.</dd>
- <dt>{{jsxref("Instructions/function*", "function*")}}</dt>
- <dd>Les fonctions génératrices permettent de créer des <a href="/fr/docs/Web/JavaScript/Guide/Le_protocole_iterator">itérateurs</a> plus simplement.</dd>
- <dt>{{experimental_inline}} {{jsxref("Instructions/async_function", "async function")}}</dt>
- <dd>Cette instruction déclare une fonction asynchrone avec les paramètres associés.</dd>
- <dt>{{jsxref("Instructions/return", "return")}}</dt>
- <dd>Cette instruction spécifie la valeur de retour renvoyée par une fonction.</dd>
- <dt>{{jsxref("Instructions/class", "class")}}</dt>
- <dd>Déclare une classe.</dd>
-</dl>
-
-<h3 id="Itérations">Itérations</h3>
-
-<dl>
- <dt>{{jsxref("Instructions/do...while", "do...while")}}</dt>
- <dd>Cette instruction crée une boucle qui s'exécute tant que la condition est vraie. La condition est évaluée après avoir exécuté une itération de boucle, ce qui fait que cette boucle sera exécutée au moins une fois.</dd>
- <dt>{{jsxref("Instructions/for", "for")}}</dt>
- <dd>Cette instruction crée une boucle qui se base sur trois expressions facultatives. Ces expressions sont entre parenthèses, séparées par des points virgules et suivies par l'instruction à exécuter dans la boucle.</dd>
- <dt>{{jsxref("Instructions/for_each...in", "for each...in")}} {{deprecated_inline}} {{non-standard_inline}}</dt>
- <dd>Cette instruction itère une variable donnée sur toutes les propriétés d'un objet. Pour chaque propriété distincte, une instruction spécifique est exécutée.</dd>
- <dt>{{jsxref("Instructions/for...in", "for...in")}}</dt>
- <dd>Cette instruction effectue, dans un ordre arbitraire, une boucle sur les propriétés énumérables d'un objet. Pour chacune des différentes propriétés, des instructions peuvent être exécutées.</dd>
- <dt>{{jsxref("Instructions/for...of", "for...of")}}</dt>
- <dd>Cette instruction parcourt les objets sur lesquels on peut itérer (comme les tableaux, les <a href="/fr/docs/Web/JavaScript/Guide/iterateurs_et_generateurs">itérateurs et générateurs</a>). Pour ce faire, elle utilise un mécanisme d'itération sur mesure utilisant des instructions à exécuter pour chacune des différentes propriétés.</dd>
- <dt>{{jsxref("Instructions/for-await...of","for await...of")}}</dt>
- <dd>Cette instruction parcourt les objets itérables asynchrones tels que les tableaux, les <a href="/fr/docs/Web/JavaScript/Guide/iterateurs_et_generateurs">itérateurs et générateurs</a>. Elle utilise un mécanisme d'itération spécifique et des instructions sont exécutées pour la valeur de chaque propriété.</dd>
- <dt>{{jsxref("Instructions/while", "while")}}</dt>
- <dd>Cette instruction permet de créer une boucle qui s'exécute tant qu'une condition de test est vérifiée. La condition est évaluée avant d'exécuter l'instruction contenue dans la boucle.</dd>
-</dl>
-
-<h3 id="Autres">Autres</h3>
-
-<dl>
- <dt>{{jsxref("Instructions/debugger", "debugger")}}</dt>
- <dd>Cette instruction appelle une fonctionnalité de débogage. Si aucune fonctionnalité de débogage n'est disponible, l'instruction n'a aucun effet.</dd>
- <dt>{{jsxref("Instructions/export", "export")}}</dt>
- <dd>Cette instruction permet à un script signé de fournir des propriétés, fonctions et des objets à d'autres scripts (signés ou non).</dd>
- <dt>{{jsxref("Instructions/import", "import")}}</dt>
- <dd>Cette instruction permet à un script d'importer des propriétés, fonctions ou objets depuis un script qui les exporte.</dd>
- <dt><a href="/fr/docs/Web/JavaScript/Reference/Instructions/import.meta"><code>import.meta</code></a></dt>
- <dd>Une méta propriété qui expose des métadonnées à propos du module JavaScript.</dd>
- <dt>{{jsxref("Instructions/label", "label")}}</dt>
- <dd>Cette instruction fournit un identifiant auquel il est possible de se référer en utilisant une instruction <code>break</code> ou <code>continue</code>.</dd>
- <dt>{{jsxref("Instructions/with", "with")}} {{deprecated_inline}}</dt>
- <dd>Cette instruction permet d'étendre la portée chaînée d'une instruction.</dd>
-</dl>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES1', '#sec-12', 'Statements')}}</td>
-   <td>{{Spec2('ES1')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES3', '#sec-12', 'Statements')}}</td>
-   <td>{{Spec2('ES3')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-12', 'Statements')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-ecmascript-language-statements-and-declarations', 'ECMAScript Language: Statements and Declarations')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td>Nouveaux éléments : <code>function*</code>, <code>let</code>, <code>for...of</code>, <code>yield</code>, <code>class</code></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-ecmascript-language-statements-and-declarations', 'ECMAScript Language: Statements and Declarations')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.statements")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>Le chapitre de cette référence sur les <a href="/fr/docs/JavaScript/Reference/Op%C3%A9rateurs">opérateurs JavaScript</a>.</li>
-</ul>
\ No newline at end of file
diff --git a/files/fr/web/javascript/reference/statements/index.md b/files/fr/web/javascript/reference/statements/index.md
new file mode 100644
index 0000000000..4b784f29ac
--- /dev/null
+++ b/files/fr/web/javascript/reference/statements/index.md
@@ -0,0 +1,108 @@
+---
+title: Instructions
+slug: Web/JavaScript/Reference/Statements
+tags:
+  - JavaScript
+  - Reference
+  - statements
+translation_of: Web/JavaScript/Reference/Statements
+original_slug: Web/JavaScript/Reference/Instructions
+---
+{{jsSidebar("Statements")}}
+
+Les applications JavaScript sont composées de plusieurs instructions organisées grâce à une syntaxe. Une instruction peut s'étaler sur plusieurs lignes et on peut avoir plusieurs instructions sur une seule ligne si chaque instruction est séparée de la suivante par un point-virgule.
+
+## Instructions et déclarations, par catégorie
+
+Pour une liste alphabétique, voir le volet de navigation situé à gauche sur cette page.
+
+### Contrôle du flux
+
+- {{jsxref("Instructions/bloc", "Bloc")}}
+  - : Une instruction de bloc est utilisée pour regrouper zéro ou plusieurs instructions. Un bloc est délimité par une paire d'accolades.
+- {{jsxref("Instructions/break", "break")}}
+  - : Cette instruction termine la boucle ou l'instruction `switch` ou l'instruction `label` en cours et continue l'exécution sur l'instruction suivant l'instruction terminée.
+- {{jsxref("Instructions/continue", "continue")}}
+  - : Cette instruction termine l'exécution des instructions dans la boucle courante, ou la boucle avec une étiquette correspondante, et continue l'exécution de la boucle dans l'itération suivante.
+- {{jsxref("Instructions/vide", "Vide")}}
+  - : Une instruction vide est utilisée pour ne fournir aucune instruction là où JavaScript en attendrait une.
+- {{jsxref("Instructions/if...else","if...else")}}
+  - : Cette instruction exécute une instruction si une condition donnée est vérifiée. Si la condition n'est pas vérifiée une autre instruction pourra être exécutée.
+- {{jsxref("Instructions/switch", "switch")}}
+  - : Cette instruction permet d'évaluer une expression et de faire correspondre le résultat de cette expression avec différents cas et d'exécuter les instructions associées aux cas qui ont chacun un identifiant.
+- {{jsxref("Instructions/throw", "throw")}}
+  - : Cette instruction lève une exception.
+- {{jsxref("Instructions/try...catch","try...catch")}}
+  - : Cette instruction permet de spécifier un ensemble d'instructions à tenter, et de préciser le traitement à effectuer dans le cas où une exception est produite.
+
+### Déclarations
+
+- {{jsxref("Instructions/var", "var")}}
+  - : Cette instruction permet de déclarer une variable, éventuellement en fournissant une valeur pour permettant de l'initialiser.
+- {{jsxref("Instructions/let", "let")}}
+  - : Cette instruction permet de déclarer une variable locale dans une portée d'un bloc et éventuellement d'initialiser sa valeur.
+- {{jsxref("Instructions/const", "const")}}
+  - : Cette instruction déclare une constante en lecture seule.
+
+### Fonctions et classes
+
+- {{jsxref("Instructions/function", "function")}}
+  - : Cette instruction déclare une fonction avec les paramètres donnés.
+- {{jsxref("Instructions/function*", "function*")}}
+  - : Les fonctions génératrices permettent de créer des [itérateurs](/fr/docs/Web/JavaScript/Guide/Le_protocole_iterator) plus simplement.
+- {{experimental_inline}} {{jsxref("Instructions/async_function", "async function")}}
+  - : Cette instruction déclare une fonction asynchrone avec les paramètres associés.
+- {{jsxref("Instructions/return", "return")}}
+  - : Cette instruction spécifie la valeur de retour renvoyée par une fonction.
+- {{jsxref("Instructions/class", "class")}}
+  - : Déclare une classe.
+
+### Itérations
+
+- {{jsxref("Instructions/do...while", "do...while")}}
+  - : Cette instruction crée une boucle qui s'exécute tant que la condition est vraie. La condition est évaluée après avoir exécuté une itération de boucle, ce qui fait que cette boucle sera exécutée au moins une fois.
+- {{jsxref("Instructions/for", "for")}}
+  - : Cette instruction crée une boucle qui se base sur trois expressions facultatives. Ces expressions sont entre parenthèses, séparées par des points virgules et suivies par l'instruction à exécuter dans la boucle.
+- {{jsxref("Instructions/for_each...in", "for each...in")}} {{deprecated_inline}} {{non-standard_inline}}
+  - : Cette instruction itère une variable donnée sur toutes les propriétés d'un objet. Pour chaque propriété distincte, une instruction spécifique est exécutée.
+- {{jsxref("Instructions/for...in", "for...in")}}
+  - : Cette instruction effectue, dans un ordre arbitraire, une boucle sur les propriétés énumérables d'un objet. Pour chacune des différentes propriétés, des instructions peuvent être exécutées.
+- {{jsxref("Instructions/for...of", "for...of")}}
+  - : Cette instruction parcourt les objets sur lesquels on peut itérer (comme les tableaux, les [itérateurs et générateurs](/fr/docs/Web/JavaScript/Guide/iterateurs_et_generateurs)). Pour ce faire, elle utilise un mécanisme d'itération sur mesure utilisant des instructions à exécuter pour chacune des différentes propriétés.
+- {{jsxref("Instructions/for-await...of","for await...of")}}
+  - : Cette instruction parcourt les objets itérables asynchrones tels que les tableaux, les [itérateurs et générateurs](/fr/docs/Web/JavaScript/Guide/iterateurs_et_generateurs). Elle utilise un mécanisme d'itération spécifique et des instructions sont exécutées pour la valeur de chaque propriété.
+- {{jsxref("Instructions/while", "while")}}
+  - : Cette instruction permet de créer une boucle qui s'exécute tant qu'une condition de test est vérifiée. La condition est évaluée avant d'exécuter l'instruction contenue dans la boucle.
+
+### Autres
+
+- {{jsxref("Instructions/debugger", "debugger")}}
+  - : Cette instruction appelle une fonctionnalité de débogage. Si aucune fonctionnalité de débogage n'est disponible, l'instruction n'a aucun effet.
+- {{jsxref("Instructions/export", "export")}}
+  - : Cette instruction permet à un script signé de fournir des propriétés, fonctions et des objets à d'autres scripts (signés ou non).
+- {{jsxref("Instructions/import", "import")}}
+  - : Cette instruction permet à un script d'importer des propriétés, fonctions ou objets depuis un script qui les exporte.
+- [`import.meta`](/fr/docs/Web/JavaScript/Reference/Instructions/import.meta)
+  - : Une méta propriété qui expose des métadonnées à propos du module JavaScript.
+- {{jsxref("Instructions/label", "label")}}
+  - : Cette instruction fournit un identifiant auquel il est possible de se référer en utilisant une instruction `break` ou `continue`.
+- {{jsxref("Instructions/with", "with")}} {{deprecated_inline}}
+  - : Cette instruction permet d'étendre la portée chaînée d'une instruction.
+
+## Spécifications
+
+| Spécification                                                                                                                                                                    | Statut                       | Commentaires                                                         |
+| -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------------------------------------------------------- |
+| {{SpecName('ES1', '#sec-12', 'Statements')}}                                                                                                                     | {{Spec2('ES1')}}         | Définition initiale.                                                 |
+| {{SpecName('ES3', '#sec-12', 'Statements')}}                                                                                                                     | {{Spec2('ES3')}}         |                                                                      |
+| {{SpecName('ES5.1', '#sec-12', 'Statements')}}                                                                                                                     | {{Spec2('ES5.1')}}     |                                                                      |
+| {{SpecName('ES6', '#sec-ecmascript-language-statements-and-declarations', 'ECMAScript Language: Statements and Declarations')}}         | {{Spec2('ES6')}}         | Nouveaux éléments : `function*`, `let`, `for...of`, `yield`, `class` |
+| {{SpecName('ESDraft', '#sec-ecmascript-language-statements-and-declarations', 'ECMAScript Language: Statements and Declarations')}} | {{Spec2('ESDraft')}} |                                                                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.statements")}}
+
+## Voir aussi
+
+- Le chapitre de cette référence sur les [opérateurs JavaScript](/fr/docs/JavaScript/Reference/Op%C3%A9rateurs).
diff --git a/files/fr/web/javascript/reference/statements/label/index.html b/files/fr/web/javascript/reference/statements/label/index.html
deleted file mode 100644
index 1e0c12243a..0000000000
--- a/files/fr/web/javascript/reference/statements/label/index.html
+++ /dev/null
@@ -1,205 +0,0 @@
----
-title: label
-slug: Web/JavaScript/Reference/Statements/label
-tags:
-  - JavaScript
-  - Reference
-  - Statement
-translation_of: Web/JavaScript/Reference/Statements/label
-original_slug: Web/JavaScript/Reference/Instructions/label
----
-<div>{{jsSidebar("Statements")}}</div>
-
-<p>Une <strong>instruction étiquetée (<em>labeled</em> en anglais)</strong> peut être utilisée avec les instructions {{jsxref("Instructions/break", "break")}} ou {{jsxref("Instructions/continue", "continue")}}. Un label permet d'identifier une instruction avec un identifiant pour y faire référence plus tard.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/statement-label.html")}}</div>
-
-
-
-<div class="note">
-<p><strong>Note :</strong> Les boucles ou les blocs étiquetés sont très rares et on peut généralement utiliser des appels de fonction plutôt que des sauts de boucle.</p>
-</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><em>label</em> :
-   <em>instruction</em>
-</pre>
-
-<dl>
- <dt><code>label</code></dt>
- <dd>N'importe quel identifiant JavaScript qui n'est pas un mot-clé réservé.</dd>
- <dt><code>instruction</code></dt>
- <dd>Une instruction. <code>break</code> peut être utilisé avec n'importe quelle instruction identifiée. <code>continue</code> ne peut être utilisé qu'avec des instructions de boucle.</dd>
-</dl>
-
-<h2 id="Description">Description</h2>
-
-<p>Une étiquette (<em>label</em>) peut être utilisée pour identifier une boucle et pour y faire référence à l'intérieur en utilisant les instructions <code>break</code> ou <code>continue</code> afin d'interrompre cette boucle ou de reprendre son exécution.</p>
-
-<p>JavaScript <em>ne possède pas</em> d'instruction <code>goto</code>, les étiquettes ne peuvent être utilisées que par les instructions <code>break</code> ou <code>continue</code>.</p>
-
-<p>En <a href="/fr/docs/Web/JavaScript/Reference/Strict_mode">mode strict</a>, on ne peut pas utiliser <code>let</code> comme étiquette, cela lèvera une exception {{jsxref("SyntaxError")}} (<code>let</code> est un identifiant réservé).</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Faire_référence_à_une_étiquette_avec_continue_dans_une_boucle">Faire référence à une étiquette avec <code>continue</code> dans une boucle</h3>
-
-<pre class="brush: js">var i, j;
-
-boucle1:
-for (i = 0; i &lt; 3; i++) {      //Le premier for correspond à "boucle1"
-   boucle2:
-   for (j = 0; j &lt; 3; j++) {   //Le second for correspond à "boucle2"
-      if (i === 1 &amp;&amp; j === 1) {
-         continue boucle1;
-      } else {
-         console.log("i = " + i + ", j = " + j);
-      }
-   }
-}
-
-// On aura les résultats suivants :
-//   "i = 0, j = 0"
-//   "i = 0, j = 1"
-//   "i = 0, j = 2"
-//   "i = 1, j = 0"
-//   "i = 2, j = 0"
-//   "i = 2, j = 1"
-//   "i = 2, j = 2"
-// On voit bien l'absence de "i = 1, j = 1" et "i = 1, j = 2"
-</pre>
-
-<h3 id="Second_exemple_utilisant_continue">Second exemple utilisant <code>continue</code></h3>
-
-<p>Étant donné un tableau d'élément et un tableau de tests, cet exemple donne le nombre d'éléments qui ont réussi tous les tests.</p>
-
-<pre class="brush: js">var nbItemsReussis = 0;
-var i, j;
-
-top:
-for (i = 0; i &lt; items.length; i++){
-  for (j = 0; j &lt; tests.length; j++){
-    if (!tests[j].reussi(items[i])){
-      continue top;
-    }
-  }
-  nbItemsReussis++;
-}</pre>
-
-<h3 id="Utiliser_break_avec_une_étiquette_au_sein_d'une_boucle_for">Utiliser <code>break</code> avec une étiquette au sein d'une boucle <code>for</code></h3>
-
-<pre class="brush: js">var i, j;
-
-boucle1:
-for (i = 0; i &lt; 3; i++) { // première boucle étiquetée « boucle1 »
-  boucle2:
-  for (j =0; j &lt; 3; j++) { // seconde boucle étiquetée « boucle2 »
-    if (i == 1 &amp;&amp; j == 1) {
-      break boucle1;
-    }
-    console.log("i = " + i + ", j = " + j);
-  }
-}
-
-// Ce qui produira en sortie
-// (dans la console)
-// "i = 0, j = 0"
-// "i = 0, j = 1"
-// "i = 0, j = 2"
-// "i = 1, j = 0"
-// Ici on voit la différence avec l'exemple précédent utilisant continue
-</pre>
-
-<h3 id="Second_exemple_utilisant_un_label_et_break">Second exemple utilisant un label et <code>break</code></h3>
-
-<p>Étant donné un tableau d'éléments et un tableau de tests, cet exemple permet de déterminer si oui ou non tous les éléments ont réussis tous les tests.</p>
-
-<pre class="brush: js">var toutReussi = true;
-var i, j;
-
-top:
-for (i = 0; items.length; i++)
-  for (j = 0; j &lt; tests.length; i++)
-    if (!tests[j].reusi(items[i])){
-      toutReussi = false;
-      break top;
-    }
-</pre>
-
-<h3 id="Utilise_un_bloc_étiqueté_avec_break">Utilise un bloc étiqueté avec <code>break</code></h3>
-
-<p>On peut utiliser des étiquettes dans des blocs simples mais seul <code>break</code> permettra de faire référence à des étiquettes en dehors d'une boucle.</p>
-
-<pre class="brush: js">toto: {
-  console.log("face");
-  break toto;
-  console.log("this will not be executed");
-}
-console.log("swap");
-
-// On aura alors dans la console :
-
-// "face"
-// "swap </pre>
-
-<h3 id="Déclarations_de_fonctions_étiquetées">Déclarations de fonctions étiquetées</h3>
-
-<p>À partir d'ECMAScript 2015, les déclarations de fonctions étiquetées sont standardisées pour du code non-strict <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-labelled-function-declarations">au sein de l'annexe de la spécification relative à la compatibilité web</a>.</p>
-
-<pre class="brush: js">L: function F() {}</pre>
-
-<p>En revanche, en <a href="/fr/docs/Web/JavaScript/Reference/Strict_mode">mode strict</a>, cela lèvera une exception {{jsxref("SyntaxError")}}:</p>
-
-<pre class="brush: js">"use strict";
-L: function F() {}
-// SyntaxError: functions cannot be labelled</pre>
-
-<p><a href="/fr/docs/Web/JavaScript/Reference/Instructions/function*">Les fonctions génératrices</a> ne peuvent pas être étiquetées, en mode strict, comme en mode non-strict :</p>
-
-<pre class="brush: js">L: function* F() {}
-// SyntaxError: generator functions cannot be labelled
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES3')}}</td>
-   <td>{{Spec2('ES3')}}</td>
-   <td>Définition initiale. Implémentée avec JavaScript 1.2.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-12.12', 'Labelled statement')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-labelled-statements', 'Labelled statement')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-labelled-statements', 'Labelled statement')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.statements.label")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Instructions/break", "break")}}</li>
- <li>{{jsxref("Instructions/continue", "continue")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/statements/label/index.md b/files/fr/web/javascript/reference/statements/label/index.md
new file mode 100644
index 0000000000..ac0e02216e
--- /dev/null
+++ b/files/fr/web/javascript/reference/statements/label/index.md
@@ -0,0 +1,185 @@
+---
+title: label
+slug: Web/JavaScript/Reference/Statements/label
+tags:
+  - JavaScript
+  - Reference
+  - Statement
+translation_of: Web/JavaScript/Reference/Statements/label
+original_slug: Web/JavaScript/Reference/Instructions/label
+---
+{{jsSidebar("Statements")}}
+
+Une **instruction étiquetée (_labeled_ en anglais)** peut être utilisée avec les instructions {{jsxref("Instructions/break", "break")}} ou {{jsxref("Instructions/continue", "continue")}}. Un label permet d'identifier une instruction avec un identifiant pour y faire référence plus tard.
+
+{{EmbedInteractiveExample("pages/js/statement-label.html")}}
+
+> **Note :** Les boucles ou les blocs étiquetés sont très rares et on peut généralement utiliser des appels de fonction plutôt que des sauts de boucle.
+
+## Syntaxe
+
+    label :
+       instruction
+
+- `label`
+  - : N'importe quel identifiant JavaScript qui n'est pas un mot-clé réservé.
+- `instruction`
+  - : Une instruction. `break` peut être utilisé avec n'importe quelle instruction identifiée. `continue` ne peut être utilisé qu'avec des instructions de boucle.
+
+## Description
+
+Une étiquette (_label_) peut être utilisée pour identifier une boucle et pour y faire référence à l'intérieur en utilisant les instructions `break` ou `continue` afin d'interrompre cette boucle ou de reprendre son exécution.
+
+JavaScript _ne possède pas_ d'instruction `goto`, les étiquettes ne peuvent être utilisées que par les instructions `break` ou `continue`.
+
+En [mode strict](/fr/docs/Web/JavaScript/Reference/Strict_mode), on ne peut pas utiliser `let` comme étiquette, cela lèvera une exception {{jsxref("SyntaxError")}} (`let` est un identifiant réservé).
+
+## Exemples
+
+### Faire référence à une étiquette avec `continue` dans une boucle
+
+```js
+var i, j;
+
+boucle1:
+for (i = 0; i < 3; i++) {      //Le premier for correspond à "boucle1"
+   boucle2:
+   for (j = 0; j < 3; j++) {   //Le second for correspond à "boucle2"
+      if (i === 1 && j === 1) {
+         continue boucle1;
+      } else {
+         console.log("i = " + i + ", j = " + j);
+      }
+   }
+}
+
+// On aura les résultats suivants :
+//   "i = 0, j = 0"
+//   "i = 0, j = 1"
+//   "i = 0, j = 2"
+//   "i = 1, j = 0"
+//   "i = 2, j = 0"
+//   "i = 2, j = 1"
+//   "i = 2, j = 2"
+// On voit bien l'absence de "i = 1, j = 1" et "i = 1, j = 2"
+```
+
+### Second exemple utilisant `continue`
+
+Étant donné un tableau d'élément et un tableau de tests, cet exemple donne le nombre d'éléments qui ont réussi tous les tests.
+
+```js
+var nbItemsReussis = 0;
+var i, j;
+
+top:
+for (i = 0; i < items.length; i++){
+  for (j = 0; j < tests.length; j++){
+    if (!tests[j].reussi(items[i])){
+      continue top;
+    }
+  }
+  nbItemsReussis++;
+}
+```
+
+### Utiliser `break` avec une étiquette au sein d'une boucle `for`
+
+```js
+var i, j;
+
+boucle1:
+for (i = 0; i < 3; i++) { // première boucle étiquetée « boucle1 »
+  boucle2:
+  for (j =0; j < 3; j++) { // seconde boucle étiquetée « boucle2 »
+    if (i == 1 && j == 1) {
+      break boucle1;
+    }
+    console.log("i = " + i + ", j = " + j);
+  }
+}
+
+// Ce qui produira en sortie
+// (dans la console)
+// "i = 0, j = 0"
+// "i = 0, j = 1"
+// "i = 0, j = 2"
+// "i = 1, j = 0"
+// Ici on voit la différence avec l'exemple précédent utilisant continue
+```
+
+### Second exemple utilisant un label et `break`
+
+Étant donné un tableau d'éléments et un tableau de tests, cet exemple permet de déterminer si oui ou non tous les éléments ont réussis tous les tests.
+
+```js
+var toutReussi = true;
+var i, j;
+
+top:
+for (i = 0; items.length; i++)
+  for (j = 0; j < tests.length; i++)
+    if (!tests[j].reusi(items[i])){
+      toutReussi = false;
+      break top;
+    }
+```
+
+### Utilise un bloc étiqueté avec `break`
+
+On peut utiliser des étiquettes dans des blocs simples mais seul `break` permettra de faire référence à des étiquettes en dehors d'une boucle.
+
+```js
+toto: {
+  console.log("face");
+  break toto;
+  console.log("this will not be executed");
+}
+console.log("swap");
+
+// On aura alors dans la console :
+
+// "face"
+// "swap 
+```
+
+### Déclarations de fonctions étiquetées
+
+À partir d'ECMAScript 2015, les déclarations de fonctions étiquetées sont standardisées pour du code non-strict [au sein de l'annexe de la spécification relative à la compatibilité web](http://www.ecma-international.org/ecma-262/6.0/#sec-labelled-function-declarations).
+
+```js
+L: function F() {}
+```
+
+En revanche, en [mode strict](/fr/docs/Web/JavaScript/Reference/Strict_mode), cela lèvera une exception {{jsxref("SyntaxError")}}:
+
+```js
+"use strict";
+L: function F() {}
+// SyntaxError: functions cannot be labelled
+```
+
+[Les fonctions génératrices](/fr/docs/Web/JavaScript/Reference/Instructions/function*) ne peuvent pas être étiquetées, en mode strict, comme en mode non-strict :
+
+```js
+L: function* F() {}
+// SyntaxError: generator functions cannot be labelled
+```
+
+## Spécifications
+
+| Spécification                                                                                    | État                         | Commentaires                                          |
+| ------------------------------------------------------------------------------------------------ | ---------------------------- | ----------------------------------------------------- |
+| {{SpecName('ES3')}}                                                                         | {{Spec2('ES3')}}         | Définition initiale. Implémentée avec JavaScript 1.2. |
+| {{SpecName('ES5.1', '#sec-12.12', 'Labelled statement')}}                     | {{Spec2('ES5.1')}}     |                                                       |
+| {{SpecName('ES6', '#sec-labelled-statements', 'Labelled statement')}}     | {{Spec2('ES6')}}         |                                                       |
+| {{SpecName('ESDraft', '#sec-labelled-statements', 'Labelled statement')}} | {{Spec2('ESDraft')}} |                                                       |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.statements.label")}}
+
+## Voir aussi
+
+- {{jsxref("Instructions/break", "break")}}
+- {{jsxref("Instructions/continue", "continue")}}
diff --git a/files/fr/web/javascript/reference/statements/let/index.html b/files/fr/web/javascript/reference/statements/let/index.html
deleted file mode 100644
index da0d43626c..0000000000
--- a/files/fr/web/javascript/reference/statements/let/index.html
+++ /dev/null
@@ -1,368 +0,0 @@
----
-title: let
-slug: Web/JavaScript/Reference/Statements/let
-tags:
-  - ECMAScript 2015
-  - Instruction
-  - JavaScript
-  - Reference
-translation_of: Web/JavaScript/Reference/Statements/let
-original_slug: Web/JavaScript/Reference/Instructions/let
----
-<div>{{jsSidebar("Statements")}}</div>
-
-<p>L'instruction <strong><code>let</code></strong> permet de déclarer une variable dont la portée est celle du bloc courant, éventuellement en initialisant sa valeur.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/statement-let.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">let var1 [= valeur1] [, var2 [= valeur2]] [, ..., varN [= valeurN]];</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>var1</code>, <code>var2</code>, …, <code>varN</code></dt>
- <dd>Le nom de la ou des variables. Ces noms doivent être des identifiants JavaScript valides.</dd>
- <dt><code>valeur1</code>, <code>valeur2</code>, …, <code>valeurN</code>{{optional_inline}}</dt>
- <dd>Pour chaque variable déclaré, on peut indiquer, de façon optionnelle, sa valeur initiale. Ces valeurs peuvent être n'importe quelle expression légale.</dd>
-</dl>
-
-<h2 id="Description">Description</h2>
-
-<p><code>let</code> permet de déclarer des variables dont la portée est limitée à celle du <a href="/fr/docs/Web/JavaScript/Reference/Instructions/bloc">bloc</a> dans lequel elles sont déclarées. Le mot-clé {{jsxref("Instructions/var","var")}}, quant à lui, permet de définir une variable globale ou locale à une fonction (sans distinction des blocs utilisés dans la fonction).</p>
-
-<p>Une autre différence entre <code>let</code> et <code>var</code> est la façon dont la variable est initialisée : pour <code>let</code>, la variable est initialisée à l'endroit où le parseur évalue son contenu (cf. ci-après).</p>
-
-<p>À l'instar de {{jsxref("instructions/const", "const")}}, <code>let</code> ne crée pas de propriété sur l'objet {{domxref("window")}} quand les variables sont déclarées au niveau global.</p>
-
-<p>L'origine du nom <code>let</code> est décrite <a href="https://stackoverflow.com/questions/37916940/why-was-the-name-let-chosen-for-block-scoped-variable-declarations-in-javascri">dans cette réponse (en anglais)</a>.</p>
-
-<h3 id="Les_portées_de_bloc_avec_let">Les portées de bloc avec <code>let</code></h3>
-
-<p>Le mot-clé <code>let</code> permet de définir des variables au sein d'un bloc et des blocs qu'il contient. <code>var</code> permet quant à lui de définir une variable dont la portée est celle de la fonction englobante.</p>
-
-<pre class="brush:js">if (x &gt; y) {
-  let gamma = 12.7 + y;
-  i = gamma * x;
-}
-
-function varTest() {
-  var x = 1;
-  if (true) {
-    var x = 2;  // c'est la même variable !
-    console.log(x);  // 2
-  }
-  console.log(x);  // 2
-}
-
-function letTest() {
-  let x = 1;
-  if (true) {
-    let x = 2;  // c'est une variable différente
-    console.log(x);  // 2
-  }
-  console.log(x);  // 1
-}
-</pre>
-
-<h3 id="Une_meilleure_lisibilité_pour_les_fonctions_internes">Une meilleure lisibilité pour les fonctions internes</h3>
-
-<p><code>let</code> peut parfois permettre de rendre le code plus lisible lorsqu'on utilise des fonctions internes.</p>
-
-<pre class="brush:js">var list = document.getElementById("list");
-
-for (let i = 1; i &lt;= 5; i++) {
-  var item = document.createElement("li");
-  item.appendChild(document.createTextNode("Élément " + i));
-
-  item.onclick = function (ev) {
-    console.log("Clic sur l'élément " + i + ".");
-  };
-  list.appendChild(item);
-}
-
-// Pour obtenir le même effet avec var
-// il aurait fallu créer un contexte différent
-// avec une fermeture (closure) pour la valeur
-
-for (var i = 1; i &lt;= 5; i++) {
-  var item = document.createElement("li");
-  item.appendChild(document.createTextNode("Item " + i));
-
-  (function(i) {
-    item.onclick = function(ev) {
-      console.log("Item " + i + " a reçu un clic.");
-    };
-  })(i);
-  list.appendChild(item);
-}
-</pre>
-
-<p>Dans l'exemple précédent, cela fonctionne comme on l'attend car les cinq instances de la fonction anonyme sont liées à cinq instances différentes de <code>i</code>. Si on remplace <code>let</code> par {{jsxref("Instructions/var","var")}}, on n'obtiendra pas l'effet escompté car on aura une même variable pour cette portée <code>i=6</code> (au lieu de 5 différentes).</p>
-
-<h4 id="Règles_de_portées">Règles de portées</h4>
-
-<p>Les variables déclarées avec <code>let</code> appartiennent à la portée du bloc dans lequel elles sont définies et indirectement aux portées des blocs de ce bloc. D'une certaine façon <code>let</code> fonctionne comme <code>var</code>, la seule différence dans cette analogie est que <code>let</code> fonctionne avec les portées de bloc et <code>var</code> avec les portées des fonctions :</p>
-
-<pre class="brush:js">function varTest() {
-  var x = 31;
-  if (true) {
-    var x = 71;  // c'est la même variable !
-    console.log(x);  // 71
-  }
-  console.log(x);  // 71
-}
-
-function letTest() {
-  let x = 31;
-  if (true) {
-    let x = 71;  // c'est une variable différente
-    console.log(x);  // 71
-  }
-  console.log(x);  // 31
-}
-</pre>
-
-<p>Au niveau le plus haut (la portée globale), <code>let</code> crée une variable globale alors que <code>var</code> ajoute une propriété à l'objet global :</p>
-
-<pre class="brush:js">var x = 'global';
-let y = 'global2';
-console.log(this.x); // "global"
-console.log(this.y); // undefined
-console.log(y);      // "global2"
-</pre>
-
-<h3 id="Émuler_le_fonctionnement_des_interfaces_privées">Émuler le fonctionnement des interfaces privées</h3>
-
-<p>En utilisant l'instruction <code>let</code> avec <a href="/fr/docs/Glossaire/Constructeur">des constructeurs</a>, on peut créer des <em>interfaces privées</em> sans avoir à utiliser <a href="/fr/docs/Web/JavaScript/Closures">de fermetures</a> :</p>
-
-<pre class="brush: js">var Truc;
-
-{
-  let porteePrivee = new WeakMap();
-  let compteur = 0;
-
-  Truc = function() {
-    this.unePropriete = 'toto';
-
-    porteePrivee.set(this, {
-      cachee: ++compteur,
-    });
-  };
-
-  Truc.prototype.montrerPublique = function() {
-    return this.unePropriete;
-  };
-
-  Truc.prototype.montrerPrivee = function() {
-    return porteePrivee.get(this).cachee;
-  };
-}
-
-console.log(typeof porteePrivee);
-// "undefined"
-
-var truc = new Truc();
-
-console.log(truc);
-// Truc {unePropriete: "toto"}
-
-truc.montrerPublique();
-// "toto"
-
-truc.montrerPrivee();
-// 1
-</pre>
-
-<p>Cette technique permet d'obtenir un état privé « statique ». Ainsi, dans l'exemple qui précède, toutes les instances de <code>Truc</code> partageront la même <code>portéePrivée</code>.<br>
- Il était possible d'obtenir un tel isolement avec <code>var</code> mais il fallait passer par des fonctions isolées (généralement des fonctions immédiatement appelées (<em>IIFE</em>)).</p>
-
-<h3 id="Zone_morte_temporaire_(Temporal_Dead_Zone_TDZ)_et_les_erreurs_liées_à_let">Zone morte temporaire (<em>Temporal Dead Zone</em> / TDZ)  et les erreurs liées à <code>let</code></h3>
-
-<p>Lorsqu'on redéclare une même variable au sein d'une même portée de bloc, cela entraîne une exception {{jsxref("SyntaxError")}}.</p>
-
-<pre class="brush: js example-bad">if (x) {
-  let toto;
-  let toto; // SyntaxError
-}</pre>
-
-<p>Avec ECMAScript 2015 (ES6), <code>let</code><strong> remontera</strong> (<em>hoisting</em>) la déclaration variable au début de la portée (au début du bloc) mais pas l'initialisation. Si on fait référence à une variable dans un bloc avant la déclaration de celle-ci avec <code>let</code>, cela entraînera une exception {{jsxref("ReferenceError")}}. En effet, la variable est placée dans une « zone morte temporaire » entre le début du bloc et le moment où la déclaration est traitée. Autrement dit, la déclaration est bien remontée mais la variable ne peut pas être utilisée tant que l'affectation (qui n'est pas remontée) n'a pas été effectuée.</p>
-
-<pre class="brush: js example-bad">function faire_quelque_chose() {
-  console.log(truc); // undefined
-  console.log(toto); // ReferenceError
-  let toto = 2;
-  var truc = 1;
-}</pre>
-
-<p>Il est possible d'obtenir des erreurs au sein de l'instruction {{jsxref("Instructions/switch")}}. En effet, il y a un seul bloc implicite pour cette instruction.</p>
-
-<pre class="brush: js example-bad">switch (x) {
-  case 0:
-    let toto;
-    break;
-
-  case 1:
-    let toto; // SyntaxError for redeclaration.
-    break;
-}</pre>
-
-<p>Par contre, si on ajoute une instruction de bloc dans la clause <code>case</code>, cela créera une nouvelle portée et empêchera l'erreur :</p>
-
-<pre class="brush: js">let x = 1;
-
-switch(x) {
-  case 0: {
-    let toto;
-    break;
-  }
-  case 1: {
-    let toto;
-    break;
-  }
-}</pre>
-
-<h3 id="Autres_situations">Autres situations</h3>
-
-<p>Lorsqu'on utilise <code>let</code> dans un bloc, sa portée est limitée à celle du bloc. On notera ici la différence avec <code>var</code> dont la portée est celle de la fonction où il est utilisé.</p>
-
-<pre class="brush: js">var a = 1;
-var b = 2;
-
-if (a === 1) {
-  var a = 11; // la portée est la portée globale
-  let b = 22; // la portée est celle du bloc if
-
-  console.log(a);  // 11
-  console.log(b);  // 22
-}
-
-console.log(a); // 11
-console.log(b); // 2
-</pre>
-
-<p>Cependant, la combinaison utilisée ci-après déclenchera une exception <code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/SyntaxError">SyntaxError</a></code> car la déclaration avec <code>var</code> est remontée en haut du bloc et il y a donc une redéclaration implicite de la variable (également utilisée avec <code>let</code>).</p>
-
-<pre class="brush: js example-bad">let x = 1;
-
-if (true) {
-  var x = 2; // SyntaxError liée à la redéclaration
-}
-</pre>
-
-<h3 id="La_zone_morte_temporaire_et_typeof">La zone morte temporaire et <code>typeof</code></h3>
-
-<p>Si on utilise <code>typeof</code> sur des variables non déclarées ou qui valent {{jsxref("undefined")}}, on obtiendra la valeur <code>undefined</code>. Mais si on utilise <code>typeof</code> sur une variable au sein de la zone morte temporaire de cette variable, cela déclenchera une {{jsxref("ReferenceError")}} :</p>
-
-<pre class="brush: js">console.log(typeof variableNonDeclaree); // affiche 'undefined'
-
-console.log(typeof i); // ReferenceError
-let i = 10;</pre>
-
-<h3 id="Autre_exemple_lié_à_la_zone_morte_temporaire_et_aux_portées_lexicales">Autre exemple lié à la zone morte temporaire et aux portées lexicales</h3>
-
-<p>Dans l'exemple qui suit, dans l'expression <code>toto + 55</code>, l'identifiant <code>toto</code> fait référence à la variable du bloc courant et non à celle qui est déclarée au dessus et qui a la valeur 33. Dans l'instruction <code>let toto = (toto + 55);</code> l'instruction est bien remontée mais l'endroit où on utilise <code>toto</code> (dans le fragment <code>(toto + 55</code>)) est toujours dans la zone morte temporaire car <code>toto</code> n'a pas encore été affecté.</p>
-
-<pre class="brush: js example-bad">function test(){
-  var toto = 33;
-  if (true) {
-    let toto = (toto + 55); // ReferenceError: can't access lexical declaration `toto` before initialization
-  }
-}
-test();
-</pre>
-
-<p>Si on utilise <code>let</code> avec un nom de variable qui est le même que celui de l'argument passé à la fonction, on aura une erreur due à la confusion des portées :</p>
-
-<pre class="brush: js example-bad">function go(n) {
-  for (let n of n.a){ // ReferenceError: can't access lexical declaration `n' before initialization
-    console.log(n);
-  }
-}
-go({a:[1, 2, 3]});
-</pre>
-
-<h3 id="Les_variables_déclarées_avec_let_et_les_boucles_for">Les variables déclarées avec <code>let</code> et les boucles <code>for</code></h3>
-
-<p>Le mot-clé <code>let</code> permet de lier des variables localement dans la portée des boucles for. Contrairement au mot-clé var qui lui rend les variables visibles depuis l'ensemble de la fonction qui contient la boucle.</p>
-
-<pre class="brush:js">var a = 0;
-for ( let i = a; i &lt; 10; i++ ) {
-  console.log(i);
-}
-</pre>
-
-<h4 id="Règles_de_portées_2">Règles de portées</h4>
-
-<pre class="eval">for (let <var>expr1</var>; <var>expr2</var>; <var>expr3</var>) instruction</pre>
-
-<p>Dans cet exemple, <code><var>expr2</var></code>, <code><var>expr3</var></code>, et <code>instruction</code> sont contenues dans un bloc implicite qui contient la variable de bloc local déclarée avec <code>let <var>expr1</var></code>.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="let_var"><code>let</code> / <code>var</code></h3>
-
-<p>Lorsqu'il est utilisé dans un bloc, <code>let</code> permet de limiter la portée de la variable à ce bloc. <em>var </em>quant à lui limite la portée de la variable à la fonction.</p>
-
-<pre class="brush: js">var a = 5;
-var b = 10;
-
-if (a === 5) {
-  let a = 4; // La portée est celle du bloc if
-  var b = 1; // La portée est celle interne à la fonction
-
-  console.log(a);  // 4
-  console.log(b);  // 1
-}
-
-console.log(a); // 5
-console.log(b); // 1</pre>
-
-<h3 id="let_utilisé_dans_les_boucles"><code>let</code> utilisé dans les boucles</h3>
-
-<p>Le mot-clé let permet de lier des variables à la portée de la boucle plutôt qu'à celle de la fonction (avec <code>var</code>) :</p>
-
-<pre class="brush: js">for (let i = 0; i&lt;10; i++) {
-  console.log(i); // 0, 1, 2, 3, 4 ... 9
-}
-
-console.log(i); // i n'est pas défini</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-let-and-const-declarations', 'Let and Const Declarations')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td>Définition initiale. Cette définition n'inclue pas les expressions et blocs <code>let</code>.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-let-and-const-declarations', 'Let and Const Declarations')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.statements.let")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Instructions/var","var")}}</li>
- <li>{{jsxref("Instructions/const","const")}}</li>
- <li><a href="https://tech.mozfr.org/post/2015/08/06/ES6-en-details-%3A-let-et-const">ES6 en détails : <code>let</code> et <code>const</code></a></li>
- <li><a href="https://blog.mozilla.org/addons/2015/10/14/breaking-changes-let-const-firefox-nightly-44/">Changements liés à <code>let</code> et <code>const</code> dans Firefox 44 (en anglais)</a></li>
- <li><a href="https://github.com/getify/You-Dont-Know-JS/blob/master/scope%20%26%20closures/ch3.md">Le chapitre de <em>You Don't Know JS</em> sur la portée des fonctions et des blocs</a> (en anglais)</li>
- <li><a href="https://stackoverflow.com/a/33198850/1125029">StackOverflow : qu'est-ce que la zone morte temporaire ?</a></li>
- <li><a href="https://stackoverflow.com/questions/762011/whats-the-difference-between-using-let-and-var-to-declare-a-variable">StackOverflow : quelle est la différence entre <code>let</code> et <code>var</code> ?</a></li>
-</ul>
diff --git a/files/fr/web/javascript/reference/statements/let/index.md b/files/fr/web/javascript/reference/statements/let/index.md
new file mode 100644
index 0000000000..df64126959
--- /dev/null
+++ b/files/fr/web/javascript/reference/statements/let/index.md
@@ -0,0 +1,373 @@
+---
+title: let
+slug: Web/JavaScript/Reference/Statements/let
+tags:
+  - ECMAScript 2015
+  - Instruction
+  - JavaScript
+  - Reference
+translation_of: Web/JavaScript/Reference/Statements/let
+original_slug: Web/JavaScript/Reference/Instructions/let
+---
+{{jsSidebar("Statements")}}
+
+L'instruction **`let`** permet de déclarer une variable dont la portée est celle du bloc courant, éventuellement en initialisant sa valeur.
+
+{{EmbedInteractiveExample("pages/js/statement-let.html")}}
+
+## Syntaxe
+
+    let var1 [= valeur1] [, var2 [= valeur2]] [, ..., varN [= valeurN]];
+
+### Paramètres
+
+- `var1`, `var2`, …, `varN`
+  - : Le nom de la ou des variables. Ces noms doivent être des identifiants JavaScript valides.
+- `valeur1`, `valeur2`, …, `valeurN`{{optional_inline}}
+  - : Pour chaque variable déclaré, on peut indiquer, de façon optionnelle, sa valeur initiale. Ces valeurs peuvent être n'importe quelle expression légale.
+
+## Description
+
+`let` permet de déclarer des variables dont la portée est limitée à celle du [bloc](/fr/docs/Web/JavaScript/Reference/Instructions/bloc) dans lequel elles sont déclarées. Le mot-clé {{jsxref("Instructions/var","var")}}, quant à lui, permet de définir une variable globale ou locale à une fonction (sans distinction des blocs utilisés dans la fonction).
+
+Une autre différence entre `let` et `var` est la façon dont la variable est initialisée : pour `let`, la variable est initialisée à l'endroit où le parseur évalue son contenu (cf. ci-après).
+
+À l'instar de {{jsxref("instructions/const", "const")}}, `let` ne crée pas de propriété sur l'objet {{domxref("window")}} quand les variables sont déclarées au niveau global.
+
+L'origine du nom `let` est décrite [dans cette réponse (en anglais)](https://stackoverflow.com/questions/37916940/why-was-the-name-let-chosen-for-block-scoped-variable-declarations-in-javascri).
+
+### Les portées de bloc avec `let`
+
+Le mot-clé `let` permet de définir des variables au sein d'un bloc et des blocs qu'il contient. `var` permet quant à lui de définir une variable dont la portée est celle de la fonction englobante.
+
+```js
+if (x > y) {
+  let gamma = 12.7 + y;
+  i = gamma * x;
+}
+
+function varTest() {
+  var x = 1;
+  if (true) {
+    var x = 2;  // c'est la même variable !
+    console.log(x);  // 2
+  }
+  console.log(x);  // 2
+}
+
+function letTest() {
+  let x = 1;
+  if (true) {
+    let x = 2;  // c'est une variable différente
+    console.log(x);  // 2
+  }
+  console.log(x);  // 1
+}
+```
+
+### Une meilleure lisibilité pour les fonctions internes
+
+`let` peut parfois permettre de rendre le code plus lisible lorsqu'on utilise des fonctions internes.
+
+```js
+var list = document.getElementById("list");
+
+for (let i = 1; i <= 5; i++) {
+  var item = document.createElement("li");
+  item.appendChild(document.createTextNode("Élément " + i));
+
+  item.onclick = function (ev) {
+    console.log("Clic sur l'élément " + i + ".");
+  };
+  list.appendChild(item);
+}
+
+// Pour obtenir le même effet avec var
+// il aurait fallu créer un contexte différent
+// avec une fermeture (closure) pour la valeur
+
+for (var i = 1; i <= 5; i++) {
+  var item = document.createElement("li");
+  item.appendChild(document.createTextNode("Item " + i));
+
+  (function(i) {
+    item.onclick = function(ev) {
+      console.log("Item " + i + " a reçu un clic.");
+    };
+  })(i);
+  list.appendChild(item);
+}
+```
+
+Dans l'exemple précédent, cela fonctionne comme on l'attend car les cinq instances de la fonction anonyme sont liées à cinq instances différentes de `i`. Si on remplace `let` par {{jsxref("Instructions/var","var")}}, on n'obtiendra pas l'effet escompté car on aura une même variable pour cette portée `i=6` (au lieu de 5 différentes).
+
+#### Règles de portées
+
+Les variables déclarées avec `let` appartiennent à la portée du bloc dans lequel elles sont définies et indirectement aux portées des blocs de ce bloc. D'une certaine façon `let` fonctionne comme `var`, la seule différence dans cette analogie est que `let` fonctionne avec les portées de bloc et `var` avec les portées des fonctions :
+
+```js
+function varTest() {
+  var x = 31;
+  if (true) {
+    var x = 71;  // c'est la même variable !
+    console.log(x);  // 71
+  }
+  console.log(x);  // 71
+}
+
+function letTest() {
+  let x = 31;
+  if (true) {
+    let x = 71;  // c'est une variable différente
+    console.log(x);  // 71
+  }
+  console.log(x);  // 31
+}
+```
+
+Au niveau le plus haut (la portée globale), `let` crée une variable globale alors que `var` ajoute une propriété à l'objet global :
+
+```js
+var x = 'global';
+let y = 'global2';
+console.log(this.x); // "global"
+console.log(this.y); // undefined
+console.log(y);      // "global2"
+```
+
+### Émuler le fonctionnement des interfaces privées
+
+En utilisant l'instruction `let` avec [des constructeurs](/fr/docs/Glossaire/Constructeur), on peut créer des _interfaces privées_ sans avoir à utiliser [de fermetures](/fr/docs/Web/JavaScript/Closures) :
+
+```js
+var Truc;
+
+{
+  let porteePrivee = new WeakMap();
+  let compteur = 0;
+
+  Truc = function() {
+    this.unePropriete = 'toto';
+
+    porteePrivee.set(this, {
+      cachee: ++compteur,
+    });
+  };
+
+  Truc.prototype.montrerPublique = function() {
+    return this.unePropriete;
+  };
+
+  Truc.prototype.montrerPrivee = function() {
+    return porteePrivee.get(this).cachee;
+  };
+}
+
+console.log(typeof porteePrivee);
+// "undefined"
+
+var truc = new Truc();
+
+console.log(truc);
+// Truc {unePropriete: "toto"}
+
+truc.montrerPublique();
+// "toto"
+
+truc.montrerPrivee();
+// 1
+```
+
+Cette technique permet d'obtenir un état privé « statique ». Ainsi, dans l'exemple qui précède, toutes les instances de `Truc` partageront la même `portéePrivée`.
+Il était possible d'obtenir un tel isolement avec `var` mais il fallait passer par des fonctions isolées (généralement des fonctions immédiatement appelées (_IIFE_)).
+
+### Zone morte temporaire (_Temporal Dead Zone_ / TDZ)  et les erreurs liées à `let`
+
+Lorsqu'on redéclare une même variable au sein d'une même portée de bloc, cela entraîne une exception {{jsxref("SyntaxError")}}.
+
+```js example-bad
+if (x) {
+  let toto;
+  let toto; // SyntaxError
+}
+```
+
+Avec ECMAScript 2015 (ES6), `let` **remontera** (_hoisting_) la déclaration variable au début de la portée (au début du bloc) mais pas l'initialisation. Si on fait référence à une variable dans un bloc avant la déclaration de celle-ci avec `let`, cela entraînera une exception {{jsxref("ReferenceError")}}. En effet, la variable est placée dans une « zone morte temporaire » entre le début du bloc et le moment où la déclaration est traitée. Autrement dit, la déclaration est bien remontée mais la variable ne peut pas être utilisée tant que l'affectation (qui n'est pas remontée) n'a pas été effectuée.
+
+```js example-bad
+function faire_quelque_chose() {
+  console.log(truc); // undefined
+  console.log(toto); // ReferenceError
+  let toto = 2;
+  var truc = 1;
+}
+```
+
+Il est possible d'obtenir des erreurs au sein de l'instruction {{jsxref("Instructions/switch")}}. En effet, il y a un seul bloc implicite pour cette instruction.
+
+```js example-bad
+switch (x) {
+  case 0:
+    let toto;
+    break;
+
+  case 1:
+    let toto; // SyntaxError for redeclaration.
+    break;
+}
+```
+
+Par contre, si on ajoute une instruction de bloc dans la clause `case`, cela créera une nouvelle portée et empêchera l'erreur :
+
+```js
+let x = 1;
+
+switch(x) {
+  case 0: {
+    let toto;
+    break;
+  }
+  case 1: {
+    let toto;
+    break;
+  }
+}
+```
+
+### Autres situations
+
+Lorsqu'on utilise `let` dans un bloc, sa portée est limitée à celle du bloc. On notera ici la différence avec `var` dont la portée est celle de la fonction où il est utilisé.
+
+```js
+var a = 1;
+var b = 2;
+
+if (a === 1) {
+  var a = 11; // la portée est la portée globale
+  let b = 22; // la portée est celle du bloc if
+
+  console.log(a);  // 11
+  console.log(b);  // 22
+}
+
+console.log(a); // 11
+console.log(b); // 2
+```
+
+Cependant, la combinaison utilisée ci-après déclenchera une exception [`SyntaxError`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/SyntaxError) car la déclaration avec `var` est remontée en haut du bloc et il y a donc une redéclaration implicite de la variable (également utilisée avec `let`).
+
+```js example-bad
+let x = 1;
+
+if (true) {
+  var x = 2; // SyntaxError liée à la redéclaration
+}
+```
+
+### La zone morte temporaire et `typeof`
+
+Si on utilise `typeof` sur des variables non déclarées ou qui valent {{jsxref("undefined")}}, on obtiendra la valeur `undefined`. Mais si on utilise `typeof` sur une variable au sein de la zone morte temporaire de cette variable, cela déclenchera une {{jsxref("ReferenceError")}} :
+
+```js
+console.log(typeof variableNonDeclaree); // affiche 'undefined'
+
+console.log(typeof i); // ReferenceError
+let i = 10;
+```
+
+### Autre exemple lié à la zone morte temporaire et aux portées lexicales
+
+Dans l'exemple qui suit, dans l'expression `toto + 55`, l'identifiant `toto` fait référence à la variable du bloc courant et non à celle qui est déclarée au dessus et qui a la valeur 33. Dans l'instruction `let toto = (toto + 55);` l'instruction est bien remontée mais l'endroit où on utilise `toto` (dans le fragment `(toto + 55`)) est toujours dans la zone morte temporaire car `toto` n'a pas encore été affecté.
+
+```js example-bad
+function test(){
+  var toto = 33;
+  if (true) {
+    let toto = (toto + 55); // ReferenceError: can't access lexical declaration `toto` before initialization
+  }
+}
+test();
+```
+
+Si on utilise `let` avec un nom de variable qui est le même que celui de l'argument passé à la fonction, on aura une erreur due à la confusion des portées :
+
+```js example-bad
+function go(n) {
+  for (let n of n.a){ // ReferenceError: can't access lexical declaration `n' before initialization
+    console.log(n);
+  }
+}
+go({a:[1, 2, 3]});
+```
+
+### Les variables déclarées avec `let` et les boucles `for`
+
+Le mot-clé `let` permet de lier des variables localement dans la portée des boucles for. Contrairement au mot-clé var qui lui rend les variables visibles depuis l'ensemble de la fonction qui contient la boucle.
+
+```js
+var a = 0;
+for ( let i = a; i < 10; i++ ) {
+  console.log(i);
+}
+```
+
+#### Règles de portées
+
+    for (let expr1; expr2; expr3) instruction
+
+Dans cet exemple, `expr2`, `expr3`, et `instruction` sont contenues dans un bloc implicite qui contient la variable de bloc local déclarée avec `let expr1`.
+
+## Exemples
+
+### `let` / `var`
+
+Lorsqu'il est utilisé dans un bloc, `let` permet de limiter la portée de la variable à ce bloc. _var_ quant à lui limite la portée de la variable à la fonction.
+
+```js
+var a = 5;
+var b = 10;
+
+if (a === 5) {
+  let a = 4; // La portée est celle du bloc if
+  var b = 1; // La portée est celle interne à la fonction
+
+  console.log(a);  // 4
+  console.log(b);  // 1
+}
+
+console.log(a); // 5
+console.log(b); // 1
+```
+
+### `let` utilisé dans les boucles
+
+Le mot-clé let permet de lier des variables à la portée de la boucle plutôt qu'à celle de la fonction (avec `var`) :
+
+```js
+for (let i = 0; i<10; i++) {
+  console.log(i); // 0, 1, 2, 3, 4 ... 9
+}
+
+console.log(i); // i n'est pas défini
+```
+
+## Spécifications
+
+| Spécification                                                                                                        | État                         | Commentaires                                                                       |
+| -------------------------------------------------------------------------------------------------------------------- | ---------------------------- | ---------------------------------------------------------------------------------- |
+| {{SpecName('ES2015', '#sec-let-and-const-declarations', 'Let and Const Declarations')}} | {{Spec2('ES2015')}}     | Définition initiale. Cette définition n'inclue pas les expressions et blocs `let`. |
+| {{SpecName('ESDraft', '#sec-let-and-const-declarations', 'Let and Const Declarations')}} | {{Spec2('ESDraft')}} |                                                                                    |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.statements.let")}}
+
+## Voir aussi
+
+- {{jsxref("Instructions/var","var")}}
+- {{jsxref("Instructions/const","const")}}
+- [ES6 en détails : `let` et `const`](https://tech.mozfr.org/post/2015/08/06/ES6-en-details-%3A-let-et-const)
+- [Changements liés à `let` et `const` dans Firefox 44 (en anglais)](https://blog.mozilla.org/addons/2015/10/14/breaking-changes-let-const-firefox-nightly-44/)
+- [Le chapitre de _You Don't Know JS_ sur la portée des fonctions et des blocs](https://github.com/getify/You-Dont-Know-JS/blob/master/scope%20%26%20closures/ch3.md) (en anglais)
+- [StackOverflow : qu'est-ce que la zone morte temporaire ?](https://stackoverflow.com/a/33198850/1125029)
+- [StackOverflow : quelle est la différence entre `let` et `var` ?](https://stackoverflow.com/questions/762011/whats-the-difference-between-using-let-and-var-to-declare-a-variable)
diff --git a/files/fr/web/javascript/reference/statements/return/index.html b/files/fr/web/javascript/reference/statements/return/index.html
deleted file mode 100644
index 44a2bc220f..0000000000
--- a/files/fr/web/javascript/reference/statements/return/index.html
+++ /dev/null
@@ -1,166 +0,0 @@
----
-title: return
-slug: Web/JavaScript/Reference/Statements/return
-tags:
-  - JavaScript
-  - Reference
-  - Statement
-translation_of: Web/JavaScript/Reference/Statements/return
-original_slug: Web/JavaScript/Reference/Instructions/return
----
-<div>{{jsSidebar("Statements")}}</div>
-
-<p>L'instruction <strong><code>return</code> </strong>met fin à l'exécution d'une fonction et définit une valeur à renvoyer à la fonction appelante.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/statement-return.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">return [[expression]]; </pre>
-
-<dl>
- <dt><code>expression</code></dt>
- <dd>L'expression dont on souhaite renvoyer la valeur. Si elle est absente, la valeur renvoyée par défaut sera {{jsxref("undefined")}}.</dd>
-</dl>
-
-<h2 id="Description">Description</h2>
-
-<p>Lorsqu'une instruction <code>return</code> est utilisée dans une fonction, l'exécution de la fonction se termine. Si une valeur est fournie, elle sera renvoyée à l'appelant de la fonction. Si l'expression définissant la valeur de retour de la fonction est absente, la valeur <code>undefined</code> sera renvoyée. Par exemple, voici une fonction qui renvoie le carré de son argument <code>x</code> (où <code>x</code> est un nombre) :</p>
-
-<pre class="brush: js">function carre(x) {
-  return x * x;
-}
-var demo = carre(3);
-// demo vaudra alors 9
-</pre>
-
-<p>Les instructions qui suivent causeront chacune l'arrêt de l'exécution d'une fonction :</p>
-
-<pre class="brush: js">return;
-return true;
-return false;
-return x;
-return x + y / 3;
-</pre>
-
-<h3 id="Ajout_automatique_de_point-virgule">Ajout automatique de point-virgule</h3>
-
-<p>L'instruction <code>return</code> peut être impactée par <a href="/fr/docs/Web/JavaScript/Reference/Grammaire_lexicale#Insertion_automatique_de_points-virgules">l'ajout automatique de point-virgule (<em>ASI</em> en anglais)</a>. Il est interdit d'avoir un caractère de fin de ligne entre le mot-clé <code>return</code> et l'expression :</p>
-
-<pre class="brush: js">return
-a + b;
-
-</pre>
-
-<p>Après ASI, cela sera transformé en :</p>
-
-<pre class="brush: js">return;
-a + b;
-// Avertissement console : "expression non accessible
-// après une instruction return sans point-virgule"
-</pre>
-
-<div class="note">
-<p><strong>Note :</strong> À partir de Gecko 40 {{geckoRelease(40)}}, un avertissement sera affiché dans la console si l'analyse du code trouve une instruction semblable à une expression après une instruction <code>return</code> sans point-virgule. Voir le {{bug(1005110)}} pour plus d'informations.</p>
-</div>
-
-<p>Pour éviter ce problème et l'insertion automatique, on peut, si besoin, utiliser des parenthèses.</p>
-
-<pre class="brush: js">return (
-  a + b;
-);</pre>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Utiliser_return">Utiliser <code>return</code></h3>
-
-<p>La fonction suivante renvoie le carré de son argument :</p>
-
-<pre class="brush: js">function carré(x) {
-   return x * x;
-}
-</pre>
-
-<h3 id="Interrompre_une_fonction">Interrompre une fonction</h3>
-
-<p>Une fonction s'arrête immédiatement à l'instant où l'instruction <code>return</code> est traitée.</p>
-
-<pre class="brush: js">function compteur() {
-  for (var compte = 1; ; compte++) {  // boucle infinie
-    console.log(compte + "A"); // jusqu'à 5
-      if (compte === 5) {
-        return;
-      }
-      console.log(compte + "B");  // jusqu'à 4
-    }
-  console.log(compte + "C");  // cette instruction n'est jamais utilisée
-}
-
-compteur();
-
-// Résultat dans la console :
-// 1A
-// 1B
-// 2A
-// 2B
-// 3A
-// 3B
-// 4A
-// 4B
-// 5A
-</pre>
-
-<h3 id="Renvoyer_une_fonction">Renvoyer une fonction</h3>
-
-<p>Pour en savoir plus sur les fermetures (<em>closures</em>), voir <a href="/fr/docs/Web/JavaScript/Closures">cet article sur les fermetures</a>.</p>
-
-<pre class="brush: js">function magique() {
-  return function calc(x) { return x * 42 };
-}
-
-var réponse = magique();
-réponse(1337); // 56154
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES1')}}</td>
-   <td>{{Spec2('ES1')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-12.9', 'Return statement')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-return-statement', 'Return statement')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-return-statement', 'Return statement')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.statements.return")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Fonctions","Les fonctions","",1)}}</li>
- <li><a href="/fr/docs/Web/JavaScript/Closures">Les fermetures (closures)</a></li>
-</ul>
diff --git a/files/fr/web/javascript/reference/statements/return/index.md b/files/fr/web/javascript/reference/statements/return/index.md
new file mode 100644
index 0000000000..442081d8a6
--- /dev/null
+++ b/files/fr/web/javascript/reference/statements/return/index.md
@@ -0,0 +1,145 @@
+---
+title: return
+slug: Web/JavaScript/Reference/Statements/return
+tags:
+  - JavaScript
+  - Reference
+  - Statement
+translation_of: Web/JavaScript/Reference/Statements/return
+original_slug: Web/JavaScript/Reference/Instructions/return
+---
+{{jsSidebar("Statements")}}
+
+L'instruction **`return` **met fin à l'exécution d'une fonction et définit une valeur à renvoyer à la fonction appelante.
+
+{{EmbedInteractiveExample("pages/js/statement-return.html")}}
+
+## Syntaxe
+
+    return [[expression]];
+
+- `expression`
+  - : L'expression dont on souhaite renvoyer la valeur. Si elle est absente, la valeur renvoyée par défaut sera {{jsxref("undefined")}}.
+
+## Description
+
+Lorsqu'une instruction `return` est utilisée dans une fonction, l'exécution de la fonction se termine. Si une valeur est fournie, elle sera renvoyée à l'appelant de la fonction. Si l'expression définissant la valeur de retour de la fonction est absente, la valeur `undefined` sera renvoyée. Par exemple, voici une fonction qui renvoie le carré de son argument `x` (où `x` est un nombre) :
+
+```js
+function carre(x) {
+  return x * x;
+}
+var demo = carre(3);
+// demo vaudra alors 9
+```
+
+Les instructions qui suivent causeront chacune l'arrêt de l'exécution d'une fonction :
+
+```js
+return;
+return true;
+return false;
+return x;
+return x + y / 3;
+```
+
+### Ajout automatique de point-virgule
+
+L'instruction `return` peut être impactée par [l'ajout automatique de point-virgule (_ASI_ en anglais)](/fr/docs/Web/JavaScript/Reference/Grammaire_lexicale#Insertion_automatique_de_points-virgules). Il est interdit d'avoir un caractère de fin de ligne entre le mot-clé `return` et l'expression :
+
+```js
+return
+a + b;
+```
+
+Après ASI, cela sera transformé en :
+
+```js
+return;
+a + b;
+// Avertissement console : "expression non accessible
+// après une instruction return sans point-virgule"
+```
+
+> **Note :** À partir de Gecko 40 {{geckoRelease(40)}}, un avertissement sera affiché dans la console si l'analyse du code trouve une instruction semblable à une expression après une instruction `return` sans point-virgule. Voir le {{bug(1005110)}} pour plus d'informations.
+
+Pour éviter ce problème et l'insertion automatique, on peut, si besoin, utiliser des parenthèses.
+
+```js
+return (
+  a + b;
+);
+```
+
+## Exemples
+
+### Utiliser `return`
+
+La fonction suivante renvoie le carré de son argument :
+
+```js
+function carré(x) {
+   return x * x;
+}
+```
+
+### Interrompre une fonction
+
+Une fonction s'arrête immédiatement à l'instant où l'instruction `return` est traitée.
+
+```js
+function compteur() {
+  for (var compte = 1; ; compte++) {  // boucle infinie
+    console.log(compte + "A"); // jusqu'à 5
+      if (compte === 5) {
+        return;
+      }
+      console.log(compte + "B");  // jusqu'à 4
+    }
+  console.log(compte + "C");  // cette instruction n'est jamais utilisée
+}
+
+compteur();
+
+// Résultat dans la console :
+// 1A
+// 1B
+// 2A
+// 2B
+// 3A
+// 3B
+// 4A
+// 4B
+// 5A
+```
+
+### Renvoyer une fonction
+
+Pour en savoir plus sur les fermetures (_closures_), voir [cet article sur les fermetures](/fr/docs/Web/JavaScript/Closures).
+
+```js
+function magique() {
+  return function calc(x) { return x * 42 };
+}
+
+var réponse = magique();
+réponse(1337); // 56154
+```
+
+## Spécifications
+
+| Spécification                                                                                | État                         | Commentaires         |
+| -------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName('ES1')}}                                                                     | {{Spec2('ES1')}}         | Définition initiale. |
+| {{SpecName('ES5.1', '#sec-12.9', 'Return statement')}}                     | {{Spec2('ES5.1')}}     |                      |
+| {{SpecName('ES6', '#sec-return-statement', 'Return statement')}}         | {{Spec2('ES6')}}         |                      |
+| {{SpecName('ESDraft', '#sec-return-statement', 'Return statement')}} | {{Spec2('ESDraft')}} |                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.statements.return")}}
+
+## Voir aussi
+
+- {{jsxref("Fonctions","Les fonctions","",1)}}
+- [Les fermetures (closures)](/fr/docs/Web/JavaScript/Closures)
diff --git a/files/fr/web/javascript/reference/statements/switch/index.html b/files/fr/web/javascript/reference/statements/switch/index.html
deleted file mode 100644
index 7bf20d5913..0000000000
--- a/files/fr/web/javascript/reference/statements/switch/index.html
+++ /dev/null
@@ -1,314 +0,0 @@
----
-title: switch
-slug: Web/JavaScript/Reference/Statements/switch
-tags:
-  - Instruction
-  - JavaScript
-  - Reference
-translation_of: Web/JavaScript/Reference/Statements/switch
-original_slug: Web/JavaScript/Reference/Instructions/switch
----
-<div>{{jsSidebar("Statements")}}</div>
-
-<p>L'instruction <strong><code>switch</code></strong> évalue une expression et, selon le résultat obtenu et le cas associé, exécute les instructions correspondantes.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/statement-switch.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">switch (expression) {
-  case valeur1:
-    // Instructions à exécuter lorsque le résultat
-    // de l'expression correspond à valeur1
-    instructions1;
-    [break;]
-  case valeur2:
-    // Instructions à exécuter lorsque le résultat
-    // de l'expression correspond à valeur2
-    instructions 2;
-    [break;]
-  ...
-  case valeurN:
-    // Instructions à exécuter lorsque le résultat
-    // de l'expression à valeurN
-    instructionsN;
-    [break;]
-  [default:
-    // Instructions à exécuter lorsqu'aucune des valeurs
-    // ne correspond
-    instructions_def;
-    [break;]]
-}</pre>
-
-<dl>
- <dt><code>expression</code></dt>
- <dd>Une expression à comparer avec chacune des clause <code>case</code>.</dd>
- <dt><code>case expressionN </code> {{optional_inline}}</dt>
- <dd>Une clause qu'on compare avec <code>expression</code>.</dd>
- <dt><code>default </code>{{optional_inline}}</dt>
- <dd>Une clause exécutée si aucune correspondance n'est trouvée avec les clause <code>case</code> (et/ou s'il n'y a pas de <code>break</code> pour les clauses <code>case</code> précédentes).</dd>
- <dt><code>instructionsN</code></dt>
- <dd>Les instructions à exécuter lorsque l'<code>expression</code> correspond au cas présenté pour cette clause.</dd>
- <dt><code>instructions_def</code></dt>
- <dd>Les instructions à exécuter si l'<code>expression</code> ne correspond à aucun cas de figure précédemment décrit.</dd>
-</dl>
-
-<h2 id="Description">Description</h2>
-
-<p>Une instruction <code>switch</code> commence par évaluer l'expression fournie (cette évaluation ne se produit qu'une fois). Si une correspondance est trouvée, le programme exécutera les instructions associées. Si plusieurs cas de figure correspondent, le premier sera sélectionné (même si les cas sont différents les uns des autres).</p>
-
-<p>Le programme recherche tout d'abord une clause <code>case</code> dont l'expression est évaluée avec la même valeur que l'expression d'entrée (au sens de {{jsxref("Opérateurs/Opérateurs_de_comparaison","l'égalité stricte","#.C3.89galit.C3.A9_stricte_(.3D.3D.3D)",1)}}. Si une telle clause est trouvée, les instructions associées sont exécutées. Si aucune clause <code>case</code> n'est trouvée, le programme recherche la clause optionnelle <code>default</code> et si elle existe, les instructions correspondantes sont exécutées. Si cette clause optionnelle n'est pas utilisée, le programme continue son exécution après l'instruction <code>switch</code>. Par convention, la clause <code>default</code> est utilisée en dernière mais cela n'est pas nécessaire.</p>
-
-<p>L'instruction {{jsxref("Instructions/break","break")}} peut optionnellement être utilisée pour chaque cas et permet de s'assurer que seules les instructions associées à ce cas seront exécutées. Si <code>break</code> n'est pas utilisé, le programme continuera son exécution avec les instructions suivantes (des autres cas de l'instruction <code>switch</code>).</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Utiliser_switch">Utiliser <code>switch</code></h3>
-
-<p>Dans l'exemple suivant, si l'expression <code>expr</code> vaut "Bananes", le programme trouve la correspondance et exécute l'instruction associée. Lorsque l'instruction <code>break</code> est trouvée, le programme « sort » de l'instruction <code>switch</code> et continue l'exécution avec les instructions  suivantes. Si <code>break</code> n'avait pas été utilisé, l'instruction du cas "Cerises" aurait également été exécutée.</p>
-
-<pre class="brush: js">switch (expr) {
-  case "Oranges":
-    console.log("Oranges : 0.59 € le kilo.");
-    break;
-  case "Pommes":
-    console.log("Pommes : 0.32 € le kilo.");
-    break;
-  case "Bananes":
-    console.log("Bananes : 0.48 € le kilo.");
-    break;
-  case "Cerises":
-    console.log("Cerises : 3.00 € le kilo.");
-    break;
-  case "Mangues":
-  case "Papayes":
-    console.log("Mangues et papayes : 2.79 € le kilo.");
-    break;
-  default:
-    console.log("Désolé, nous n'avons plus de " + expr + ".");
-}
-
-console.log("Autre chose ?");
-</pre>
-
-<h3 id="Que_se_passe-t-il_si_on_oublie_un_break">Que se passe-t-il si on oublie un <code>break</code> ?</h3>
-
-<p>Si on omet une instruction <code>break</code>, le script exécutera les instructions pour le cas correspondant et aussi celles pour les cas suivants jusqu'à la fin de l'instruction <code>switch</code> ou jusqu'à une instruction <code>break</code>. Par exemple :</p>
-
-<pre class="brush: js">var toto = 0;
-switch (toto) {
-    case -1:
-        console.log('moins un');
-        break;
-    case 0: // toto vaut 0 donc ce cas correspond
-        console.log(0);
-        // NOTE : le break aurait du être placé ici
-    case 1: // pas de break pour 'case 0:' les instructions de ce cas sont
-            // exécutées aussi
-        console.log(1);
-        break; // on a un break a ce niveau donc les instructions
-               // des cas suivants ne seront pas exécutées
-    case 2:
-        console.log(2);
-        break;
-    default:
-        console.log('default');
-}</pre>
-
-<h3 id="Peut-on_intercaler_la_règle_par_défaut">Peut-on intercaler la règle par défaut ?</h3>
-
-<p>Oui, il est possible de placer le cas <code>default</code> entre deux autres cas. Ainsi, si on a une valeur qui ne correspond pas aux différents cas, elle passera par le bloc <code>default</code> puis par les autres s'il n'y a pas de <code>break</code>. Par exemple :</p>
-
-<pre class="brush: js">var toto = 5
-switch (toto) {
-  case 2:
-    console.log(2); // ne sera pas exécuté
-    break;
-  default:
-    console.log("default"); // sera exécuté
-  case 1:
-    console.log("1"); // sera exécuté car il n'y a
-                      // pas de break avant
-}
-// La console affichera "default" puis "1"
-</pre>
-
-<h3 id="Méthodes_pour_regrouper_différents_cas">Méthodes pour regrouper différents cas</h3>
-
-<p>Pour la source depuis laquelle les exemples suivants ont été adaptés, voir <a href="https://stackoverflow.com/questions/13207927/switch-statement-multiple-cases-in-javascript">cette question Stack Overflow</a>.</p>
-
-<h4 id="Regrouper_différents_cas_pour_exécuter_une_unique_opération">Regrouper différents cas pour exécuter une unique opération</h4>
-
-<p>Cette méthode utilise le fait que s'il n'y a pas d'instruction {{jsxref("Instructions/break","break")}}, l'exécution se poursuivra avec les instructions des cas suivants (même si les expressions de ces cas ne correspondent pas à la valeur de l'expression d'entrée).</p>
-
-<p>On peut donc regrouper différentes valeurs les unes à la suite des autres pour exécuter des instructions pour ces valeurs :</p>
-
-<pre class="brush: js">var animal = 'girafe';
-switch (animal) {
-    case 'vache':
-    case 'girafe':
-    case 'chien':
-    case 'cochon':
-        console.log('Cet animal est un mammifère');
-        break;
-    case 'oiseau':
-    default:
-        console.log('Cet animal n\'est pas un mammifère.');
-}</pre>
-
-<h4 id="Chaîner_des_opérations">Chaîner des opérations</h4>
-
-<p>Dans l'exemple qui suit, on illustre comment exécuter une série d'instructions qui varie en fonction du paramètre (ici un entier) fourni. Cela montre que les différents cas sont testés dans l'ordre dans lequel ils sont mis au sein du <code>switch</code> :</p>
-
-<pre class="brush: js">var toto = 1;
-var output = 'Résultat : ';
-switch (toto) {
-    case 0:
-        output += 'Donc ';
-    case 1:
-        output += 'quel ';
-        output += 'est ';
-    case 2:
-        output += 'votre ';
-    case 3:
-        output += 'nom ';
-    case 4:
-        output += '?';
-        console.log(output);
-        break;
-    case 5:
-        output += '!';
-        console.log(output);
-        break;
-    default:
-        console.log('Veuillez choisir un nombre entre 0 et 5 !');
-}</pre>
-
-<p>Selon les valeurs fournies à la variable <code>toto</code>, on aura les résultats suivants :</p>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Valeur</th>
-   <th scope="col">Texte</th>
-  </tr>
-  <tr>
-   <td>toto vaut {{jsxref("NaN")}} ou est différent de 1, 2, 3, 4, 5 ou 0</td>
-   <td>Veuillez choisir un nombre entre 0 et 5 !</td>
-  </tr>
-  <tr>
-   <td>0</td>
-   <td>Résultat : Donc quel est votre nom ?</td>
-  </tr>
-  <tr>
-   <td>1</td>
-   <td>Résultat : quel est votre nom ?</td>
-  </tr>
-  <tr>
-   <td>2</td>
-   <td>Résultat : votre nom ?</td>
-  </tr>
-  <tr>
-   <td>3</td>
-   <td>Résultat : nom ?</td>
-  </tr>
-  <tr>
-   <td>4</td>
-   <td>Résultat : ?</td>
-  </tr>
-  <tr>
-   <td>5</td>
-   <td>Résultat : !</td>
-  </tr>
- </tbody>
-</table>
-
-<h3 id="switch_et_les_variables_avec_une_portée_de_bloc"><code>switch</code> et les variables avec une portée de bloc</h3>
-
-<p>Avec ECMAScript 2015 (ES6), on peut utiliser les instructions <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/let">let</a></code> et <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/const">const</a></code> pour déclarer des variables dont la portée sera celle du bloc englobant.</p>
-
-<p>Prenons cet exemple :</p>
-
-<pre class="brush: js">const action = 'dire_bonjour';
-switch (action) {
-  case 'dire_bonjour':
-    let message = 'bonjour';
-    console.log(message);
-    break;
-  case 'dire_coucou':
-    let message = 'coucou';
-    console.log(message);
-    break;
-  default:
-    console.log('Aucune action reçue.');
-    break;
-}</pre>
-
-<p>Si on exécute cet exemple, on aura l'erreur <code>Uncaught SyntaxError: Identifier 'message' has already been declared</code> qui n'est probablement pas le résultat espéré.</p>
-
-<p>Cela se produit car la première instruction <code>let message = 'bonjour';</code> entre en conflit avec <code>let message = 'coucou';</code> bien qu'elles soient rattachées à deux instructions <code>case</code> distinctes <code>case 'dire_bonjour':</code> et <code>case 'dire_coucou':</code> mais ces deux instructions s'inscrivent dans le même bloc et on a donc <code>message</code> déclaré deux fois dans le même bloc, soit deux fois dans la même portée.</p>
-
-<p>Pour régler ce problème, il suffit de rajouter des accolades pour définir un bloc d'instructions pour chaque <code>case</code> :</p>
-
-<pre class="brush: js">const action = 'dire_bonjour';
-switch (action) {
-  case 'dire_bonjour': <strong>{ // accolade ajoutée</strong>
-    let message = 'bonjour';
-    console.log(message);
-    break;
-  <strong>} // accolade ajoutée</strong>
-  case 'dire_coucou': <strong>{ // accolade ajoutée</strong>
-    let message = 'coucou';
-    console.log(message);
-    break;
-  <strong>} // accolade ajoutée</strong>
-  default: <strong>{ // accolade ajoutée</strong>
-    console.log('Aucune action reçue.');
-    break;
-  <strong>} // accolade ajoutée</strong>
-}</pre>
-
-<p>Cette nouvelle version, exécutée, produira <code>"bonjour"</code> dans la console, sans causer d'erreur.</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES3')}}</td>
-   <td>{{Spec2('ES3')}}</td>
-   <td>Définition initiale. Implémentée avec JavaScript 1.2</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-12.11', 'instruction switch')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-switch-statement', 'instruction switch')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-switch-statement', 'switch statement')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.statements.switch")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Instructions/if...else","if...else")}}</li>
- <li>{{jsxref("Instructions/break","break")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/statements/switch/index.md b/files/fr/web/javascript/reference/statements/switch/index.md
new file mode 100644
index 0000000000..98c11927bf
--- /dev/null
+++ b/files/fr/web/javascript/reference/statements/switch/index.md
@@ -0,0 +1,272 @@
+---
+title: switch
+slug: Web/JavaScript/Reference/Statements/switch
+tags:
+  - Instruction
+  - JavaScript
+  - Reference
+translation_of: Web/JavaScript/Reference/Statements/switch
+original_slug: Web/JavaScript/Reference/Instructions/switch
+---
+{{jsSidebar("Statements")}}
+
+L'instruction **`switch`** évalue une expression et, selon le résultat obtenu et le cas associé, exécute les instructions correspondantes.
+
+{{EmbedInteractiveExample("pages/js/statement-switch.html")}}
+
+## Syntaxe
+
+    switch (expression) {
+      case valeur1:
+        // Instructions à exécuter lorsque le résultat
+        // de l'expression correspond à valeur1
+        instructions1;
+        [break;]
+      case valeur2:
+        // Instructions à exécuter lorsque le résultat
+        // de l'expression correspond à valeur2
+        instructions 2;
+        [break;]
+      ...
+      case valeurN:
+        // Instructions à exécuter lorsque le résultat
+        // de l'expression à valeurN
+        instructionsN;
+        [break;]
+      [default:
+        // Instructions à exécuter lorsqu'aucune des valeurs
+        // ne correspond
+        instructions_def;
+        [break;]]
+    }
+
+- `expression`
+  - : Une expression à comparer avec chacune des clause `case`.
+- `case expressionN `{{optional_inline}}
+  - : Une clause qu'on compare avec `expression`.
+- `default `{{optional_inline}}
+  - : Une clause exécutée si aucune correspondance n'est trouvée avec les clause `case` (et/ou s'il n'y a pas de `break` pour les clauses `case` précédentes).
+- `instructionsN`
+  - : Les instructions à exécuter lorsque l'`expression` correspond au cas présenté pour cette clause.
+- `instructions_def`
+  - : Les instructions à exécuter si l'`expression` ne correspond à aucun cas de figure précédemment décrit.
+
+## Description
+
+Une instruction `switch` commence par évaluer l'expression fournie (cette évaluation ne se produit qu'une fois). Si une correspondance est trouvée, le programme exécutera les instructions associées. Si plusieurs cas de figure correspondent, le premier sera sélectionné (même si les cas sont différents les uns des autres).
+
+Le programme recherche tout d'abord une clause `case` dont l'expression est évaluée avec la même valeur que l'expression d'entrée (au sens de {{jsxref("Opérateurs/Opérateurs_de_comparaison","l'égalité stricte","#.C3.89galit.C3.A9_stricte_(.3D.3D.3D)",1)}}. Si une telle clause est trouvée, les instructions associées sont exécutées. Si aucune clause `case` n'est trouvée, le programme recherche la clause optionnelle `default` et si elle existe, les instructions correspondantes sont exécutées. Si cette clause optionnelle n'est pas utilisée, le programme continue son exécution après l'instruction `switch`. Par convention, la clause `default` est utilisée en dernière mais cela n'est pas nécessaire.
+
+L'instruction {{jsxref("Instructions/break","break")}} peut optionnellement être utilisée pour chaque cas et permet de s'assurer que seules les instructions associées à ce cas seront exécutées. Si `break` n'est pas utilisé, le programme continuera son exécution avec les instructions suivantes (des autres cas de l'instruction `switch`).
+
+## Exemples
+
+### Utiliser `switch`
+
+Dans l'exemple suivant, si l'expression `expr` vaut "Bananes", le programme trouve la correspondance et exécute l'instruction associée. Lorsque l'instruction `break` est trouvée, le programme « sort » de l'instruction `switch` et continue l'exécution avec les instructions  suivantes. Si `break` n'avait pas été utilisé, l'instruction du cas "Cerises" aurait également été exécutée.
+
+```js
+switch (expr) {
+  case "Oranges":
+    console.log("Oranges : 0.59 € le kilo.");
+    break;
+  case "Pommes":
+    console.log("Pommes : 0.32 € le kilo.");
+    break;
+  case "Bananes":
+    console.log("Bananes : 0.48 € le kilo.");
+    break;
+  case "Cerises":
+    console.log("Cerises : 3.00 € le kilo.");
+    break;
+  case "Mangues":
+  case "Papayes":
+    console.log("Mangues et papayes : 2.79 € le kilo.");
+    break;
+  default:
+    console.log("Désolé, nous n'avons plus de " + expr + ".");
+}
+
+console.log("Autre chose ?");
+```
+
+### Que se passe-t-il si on oublie un `break` ?
+
+Si on omet une instruction `break`, le script exécutera les instructions pour le cas correspondant et aussi celles pour les cas suivants jusqu'à la fin de l'instruction `switch` ou jusqu'à une instruction `break`. Par exemple :
+
+```js
+var toto = 0;
+switch (toto) {
+    case -1:
+        console.log('moins un');
+        break;
+    case 0: // toto vaut 0 donc ce cas correspond
+        console.log(0);
+        // NOTE : le break aurait du être placé ici
+    case 1: // pas de break pour 'case 0:' les instructions de ce cas sont
+            // exécutées aussi
+        console.log(1);
+        break; // on a un break a ce niveau donc les instructions
+               // des cas suivants ne seront pas exécutées
+    case 2:
+        console.log(2);
+        break;
+    default:
+        console.log('default');
+}
+```
+
+### Peut-on intercaler la règle par défaut ?
+
+Oui, il est possible de placer le cas `default` entre deux autres cas. Ainsi, si on a une valeur qui ne correspond pas aux différents cas, elle passera par le bloc `default` puis par les autres s'il n'y a pas de `break`. Par exemple :
+
+```js
+var toto = 5
+switch (toto) {
+  case 2:
+    console.log(2); // ne sera pas exécuté
+    break;
+  default:
+    console.log("default"); // sera exécuté
+  case 1:
+    console.log("1"); // sera exécuté car il n'y a
+                      // pas de break avant
+}
+// La console affichera "default" puis "1"
+```
+
+### Méthodes pour regrouper différents cas
+
+Pour la source depuis laquelle les exemples suivants ont été adaptés, voir [cette question Stack Overflow](https://stackoverflow.com/questions/13207927/switch-statement-multiple-cases-in-javascript).
+
+#### Regrouper différents cas pour exécuter une unique opération
+
+Cette méthode utilise le fait que s'il n'y a pas d'instruction {{jsxref("Instructions/break","break")}}, l'exécution se poursuivra avec les instructions des cas suivants (même si les expressions de ces cas ne correspondent pas à la valeur de l'expression d'entrée).
+
+On peut donc regrouper différentes valeurs les unes à la suite des autres pour exécuter des instructions pour ces valeurs :
+
+```js
+var animal = 'girafe';
+switch (animal) {
+    case 'vache':
+    case 'girafe':
+    case 'chien':
+    case 'cochon':
+        console.log('Cet animal est un mammifère');
+        break;
+    case 'oiseau':
+    default:
+        console.log('Cet animal n\'est pas un mammifère.');
+}
+```
+
+#### Chaîner des opérations
+
+Dans l'exemple qui suit, on illustre comment exécuter une série d'instructions qui varie en fonction du paramètre (ici un entier) fourni. Cela montre que les différents cas sont testés dans l'ordre dans lequel ils sont mis au sein du `switch` :
+
+```js
+var toto = 1;
+var output = 'Résultat : ';
+switch (toto) {
+    case 0:
+        output += 'Donc ';
+    case 1:
+        output += 'quel ';
+        output += 'est ';
+    case 2:
+        output += 'votre ';
+    case 3:
+        output += 'nom ';
+    case 4:
+        output += '?';
+        console.log(output);
+        break;
+    case 5:
+        output += '!';
+        console.log(output);
+        break;
+    default:
+        console.log('Veuillez choisir un nombre entre 0 et 5 !');
+}
+```
+
+Selon les valeurs fournies à la variable `toto`, on aura les résultats suivants :
+
+| Valeur                                                                    | Texte                                     |
+| ------------------------------------------------------------------------- | ----------------------------------------- |
+| toto vaut {{jsxref("NaN")}} ou est différent de 1, 2, 3, 4, 5 ou 0 | Veuillez choisir un nombre entre 0 et 5 ! |
+| 0                                                                         | Résultat : Donc quel est votre nom ?      |
+| 1                                                                         | Résultat : quel est votre nom ?           |
+| 2                                                                         | Résultat : votre nom ?                    |
+| 3                                                                         | Résultat : nom ?                          |
+| 4                                                                         | Résultat : ?                              |
+| 5                                                                         | Résultat : !                              |
+
+### `switch` et les variables avec une portée de bloc
+
+Avec ECMAScript 2015 (ES6), on peut utiliser les instructions [`let`](/en-US/docs/Web/JavaScript/Reference/Statements/let) et [`const`](/en-US/docs/Web/JavaScript/Reference/Statements/const) pour déclarer des variables dont la portée sera celle du bloc englobant.
+
+Prenons cet exemple :
+
+```js
+const action = 'dire_bonjour';
+switch (action) {
+  case 'dire_bonjour':
+    let message = 'bonjour';
+    console.log(message);
+    break;
+  case 'dire_coucou':
+    let message = 'coucou';
+    console.log(message);
+    break;
+  default:
+    console.log('Aucune action reçue.');
+    break;
+}
+```
+
+Si on exécute cet exemple, on aura l'erreur `Uncaught SyntaxError: Identifier 'message' has already been declared` qui n'est probablement pas le résultat espéré.
+
+Cela se produit car la première instruction `let message = 'bonjour';` entre en conflit avec `let message = 'coucou';` bien qu'elles soient rattachées à deux instructions `case` distinctes `case 'dire_bonjour':` et `case 'dire_coucou':` mais ces deux instructions s'inscrivent dans le même bloc et on a donc `message` déclaré deux fois dans le même bloc, soit deux fois dans la même portée.
+
+Pour régler ce problème, il suffit de rajouter des accolades pour définir un bloc d'instructions pour chaque `case` :
+
+```js
+const action = 'dire_bonjour';
+switch (action) {
+  case 'dire_bonjour': { // accolade ajoutée
+    let message = 'bonjour';
+    console.log(message);
+    break;
+  } // accolade ajoutée
+  case 'dire_coucou': { // accolade ajoutée
+    let message = 'coucou';
+    console.log(message);
+    break;
+  } // accolade ajoutée
+  default: { // accolade ajoutée
+    console.log('Aucune action reçue.');
+    break;
+  } // accolade ajoutée
+}
+```
+
+Cette nouvelle version, exécutée, produira `"bonjour"` dans la console, sans causer d'erreur.
+
+## Spécifications
+
+| Spécification                                                                                | État                         | Commentaires                                         |
+| -------------------------------------------------------------------------------------------- | ---------------------------- | ---------------------------------------------------- |
+| {{SpecName('ES3')}}                                                                     | {{Spec2('ES3')}}         | Définition initiale. Implémentée avec JavaScript 1.2 |
+| {{SpecName('ES5.1', '#sec-12.11', 'instruction switch')}}                 | {{Spec2('ES5.1')}}     |                                                      |
+| {{SpecName('ES6', '#sec-switch-statement', 'instruction switch')}}     | {{Spec2('ES6')}}         |                                                      |
+| {{SpecName('ESDraft', '#sec-switch-statement', 'switch statement')}} | {{Spec2('ESDraft')}} |                                                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.statements.switch")}}
+
+## Voir aussi
+
+- {{jsxref("Instructions/if...else","if...else")}}
+- {{jsxref("Instructions/break","break")}}
diff --git a/files/fr/web/javascript/reference/statements/throw/index.html b/files/fr/web/javascript/reference/statements/throw/index.html
deleted file mode 100644
index 4f250245c0..0000000000
--- a/files/fr/web/javascript/reference/statements/throw/index.html
+++ /dev/null
@@ -1,198 +0,0 @@
----
-title: throw
-slug: Web/JavaScript/Reference/Statements/throw
-tags:
-  - Exception
-  - JavaScript
-  - Reference
-  - Statement
-translation_of: Web/JavaScript/Reference/Statements/throw
-original_slug: Web/JavaScript/Reference/Instructions/throw
----
-<div>{{jsSidebar("Statements")}}</div>
-
-<p>L'instruction <strong><code>throw</code></strong> permet de lever une exception définie par l'utilisateur. L'exécution de la fonction courante sera stoppée (les instructions situées après l'instruction <code>throw</code> ne seront pas exécutées) et le contrôle sera passé au premier bloc {{jsxref("Instructions/try...catch","catch")}} de la pile d'appels. Si aucun bloc <code>catch</code> ne se trouve dans les fonctions de la pile d'appels, le programme sera terminé.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/statement-throw.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">throw <em>expression</em>; </pre>
-
-<dl>
- <dt><code>expression</code></dt>
- <dd>L'expression qui fournit l'exception à lever.</dd>
-</dl>
-
-<h2 id="Description">Description</h2>
-
-<p>L'instruction <code>throw</code> permet de lever (<em>throw</em> en anglais) une exception. Lorsqu'on lève une exception, <code>expression</code> fournit la valeur de l'exception. Chacune des instructions ci-après permet de lever une exception :</p>
-
-<pre class="brush: js">throw "monErreur"; // génère une exception étant une chaîne de caractères
-throw 42;          // génère une exception ayant la valeur 42
-throw true;        // génère une exception ayant la valeur true
-throw new Error("Obligatoire");  // génère un objet Error avec le message "Obligatoire"</pre>
-
-<p>On notera également que l'instruction <code>throw</code> est affectée par {{jsxref("Grammaire_lexicale","l'insertion automatique de point-virgule","#Insertion_automatique_de_points-virgules",1)}} car il n'est pas permis d'avoir un caractère de fin de ligne entre le mot-clé <code>throw</code> et l'expression.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Lever_une_exception_qui_est_un_objet">Lever une exception qui est un objet</h3>
-
-<p>Il est possible de lever une exception qui est un objet et de faire référence aux propriétés de cet objet au sein du bloc <code>catch</code>. Dans l'exemple suivant, on crée un objet <code>monException</code> du type <code>ExceptionUtilisateur</code> puis on utilise cet objet avec une instruction <code>throw</code>.</p>
-
-<pre class="brush: js">function ExceptionUtilisateur(message) {
-   this.message = message;
-   this.name = "ExceptionUtilisateur";
-}
-function getNomMois(mo) {
-   mo = mo-1; // Adjust month number for array index (1=Jan, 12=Dec)
-   var mois = ["Jan", "Fév", "Mar", "Avr", "Mai", "Juin", "Juil",
-      "Août", "Sept", "Oct", "Nov", "Déc"];
-   if (mois[mo] !== undefined) {
-      return mois[mo];
-   } else {
-      throw new ExceptionUtilisateur("Numéro de mois invalide");
-   }
-}
-
-try {
-   // les instructions à tenter
-   var monMois = 15; // 15 est en dehors des limites prévues
-   var nomMois = getNomMois(monMois);
-} catch (e) {
-   nomMois = "unknown";
-   console.error(e.message, e.name); // on passe les caractéristiques de l'exception
-                                     // à un gestionnaire d'erreur
-}
-</pre>
-
-<h3 id="Deuxième_exemple_avec_un_objet">Deuxième exemple avec un objet</h3>
-
-<p>Ici, on cherche à valider une chaîne de caractères représentant un code postal américain. Si le format utilisé est invalide, cela provoquera une exception avec un objet du type <code>ZipFormatIncorrectException</code>. (Le mot-clé {{jsxref("Instructions/const","const")}} introduit avec ECMAScript 6 est utilisé dans cet exemple).</p>
-
-<pre class="brush: js">/*
- * Crée un objet ZipCode.
- *
- * Les formats acceptés sont :
- *    12345
- *    12345-6789
- *    123456789
- *    12345 6789
- *
- * Si l'argument passé au constructeur ZipCode n'est pas conforme
- * à un de ces formats, une exception sera levée.
- */
-
-function ZipCode(zip) {
-   zip = new String(zip);
-   pattern = /[0-9]{5}([- ]?[0-9]{4})?/;
-   if (pattern.test(zip)) {
-      // la valeur du code sera la première correspondance
-      // dans la chaîne
-      this.value = zip.match(pattern)[0];
-      this.valueOf = function() {
-         return this.value
-      };
-      this.toString = function() {
-         return String(this.value)
-      };
-   } else {
-      throw new ZipFormatIncorrectException(zip);
-   }
-}
-
-function ZipFormatIncorrectException(value) {
-   this.value = value;
-   this.message = "le format n'est pas conforme";
-   this.toString = function() {
-      return this.value + this.message;
-   };
-}
-
-/*
- * Cette fonction pourrait être utilisée dans un script
- * pour valider des adresses
- */
-
-const ZIPCODE_INVALID = -1;
-const ZIPCODE_UNKNOWN_ERROR = -2;
-
-function vérifierZipCode(z) {
-   try {
-      z = new ZipCode(z);
-   } catch (e) {
-      if (e instanceof ZipFormatIncorrectException) {
-         return ZIPCODE_INVALID;
-      } else {
-         return ZIPCODE_UNKNOWN_ERROR;
-      }
-   }
-   return z;
-}
-
-a = vérifierZipCode(95060);         // renvoie 95060
-b = vérifierZipCode(9560);          // renvoie -1
-c = vérifierZipCode("a");           // renvoie -1
-d = vérifierZipCode("95060");       // renvoie 95060
-e = vérifierZipCode("95060 1234");  // renvoie 95060 1234
-</pre>
-
-<h3 id="Propager_une_exception">Propager une exception</h3>
-
-<p>L'instruction <code>throw</code> peut être utilisée pour transmettre une exception qui aurait été interceptée avec {{jsxref("Instructions/try...catch","catch")}}. Dans l'exemple suivant, on intercepte une exception avec une valeur numérique et on propage l'exception si la valeur est supérieure à 50. L'exception qui est levée se propage dans la fonction appelante ou au niveau le plus haut, visible par l'utilisateur.</p>
-
-<pre class="brush: js">try {
-   throw n; // lève une exception avec une valeur numérique
-} catch (e) {
-   if (e &lt;= 50) {
-      // des instructions pour gérer les cas entre 1 et 50
-   } else {
-      // ce cas ne peut pas être géré maintenant, on transmet l'exception
-      throw e;
-   }
-}
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES3')}}</td>
-   <td>{{Spec2('ES3')}}</td>
-   <td>Définition initiale. Implémentée avec JavaScript 1.4</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-12.13', 'throw statement')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-throw-statement', 'throw statement')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-throw-statement', 'throw statement')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.statements.throw")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Instructions/try...catch","try...catch")}}</li>
- <li>{{jsxref("Error")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/statements/throw/index.md b/files/fr/web/javascript/reference/statements/throw/index.md
new file mode 100644
index 0000000000..ea94fd6e09
--- /dev/null
+++ b/files/fr/web/javascript/reference/statements/throw/index.md
@@ -0,0 +1,176 @@
+---
+title: throw
+slug: Web/JavaScript/Reference/Statements/throw
+tags:
+  - Exception
+  - JavaScript
+  - Reference
+  - Statement
+translation_of: Web/JavaScript/Reference/Statements/throw
+original_slug: Web/JavaScript/Reference/Instructions/throw
+---
+{{jsSidebar("Statements")}}
+
+L'instruction **`throw`** permet de lever une exception définie par l'utilisateur. L'exécution de la fonction courante sera stoppée (les instructions situées après l'instruction `throw` ne seront pas exécutées) et le contrôle sera passé au premier bloc {{jsxref("Instructions/try...catch","catch")}} de la pile d'appels. Si aucun bloc `catch` ne se trouve dans les fonctions de la pile d'appels, le programme sera terminé.
+
+{{EmbedInteractiveExample("pages/js/statement-throw.html")}}
+
+## Syntaxe
+
+    throw expression;
+
+- `expression`
+  - : L'expression qui fournit l'exception à lever.
+
+## Description
+
+L'instruction `throw` permet de lever (_throw_ en anglais) une exception. Lorsqu'on lève une exception, `expression` fournit la valeur de l'exception. Chacune des instructions ci-après permet de lever une exception :
+
+```js
+throw "monErreur"; // génère une exception étant une chaîne de caractères
+throw 42;          // génère une exception ayant la valeur 42
+throw true;        // génère une exception ayant la valeur true
+throw new Error("Obligatoire");  // génère un objet Error avec le message "Obligatoire"
+```
+
+On notera également que l'instruction `throw` est affectée par {{jsxref("Grammaire_lexicale","l'insertion automatique de point-virgule","#Insertion_automatique_de_points-virgules",1)}} car il n'est pas permis d'avoir un caractère de fin de ligne entre le mot-clé `throw` et l'expression.
+
+## Exemples
+
+### Lever une exception qui est un objet
+
+Il est possible de lever une exception qui est un objet et de faire référence aux propriétés de cet objet au sein du bloc `catch`. Dans l'exemple suivant, on crée un objet `monException` du type `ExceptionUtilisateur` puis on utilise cet objet avec une instruction `throw`.
+
+```js
+function ExceptionUtilisateur(message) {
+   this.message = message;
+   this.name = "ExceptionUtilisateur";
+}
+function getNomMois(mo) {
+   mo = mo-1; // Adjust month number for array index (1=Jan, 12=Dec)
+   var mois = ["Jan", "Fév", "Mar", "Avr", "Mai", "Juin", "Juil",
+      "Août", "Sept", "Oct", "Nov", "Déc"];
+   if (mois[mo] !== undefined) {
+      return mois[mo];
+   } else {
+      throw new ExceptionUtilisateur("Numéro de mois invalide");
+   }
+}
+
+try {
+   // les instructions à tenter
+   var monMois = 15; // 15 est en dehors des limites prévues
+   var nomMois = getNomMois(monMois);
+} catch (e) {
+   nomMois = "unknown";
+   console.error(e.message, e.name); // on passe les caractéristiques de l'exception
+                                     // à un gestionnaire d'erreur
+}
+```
+
+### Deuxième exemple avec un objet
+
+Ici, on cherche à valider une chaîne de caractères représentant un code postal américain. Si le format utilisé est invalide, cela provoquera une exception avec un objet du type `ZipFormatIncorrectException`. (Le mot-clé {{jsxref("Instructions/const","const")}} introduit avec ECMAScript 6 est utilisé dans cet exemple).
+
+```js
+/*
+ * Crée un objet ZipCode.
+ *
+ * Les formats acceptés sont :
+ *    12345
+ *    12345-6789
+ *    123456789
+ *    12345 6789
+ *
+ * Si l'argument passé au constructeur ZipCode n'est pas conforme
+ * à un de ces formats, une exception sera levée.
+ */
+
+function ZipCode(zip) {
+   zip = new String(zip);
+   pattern = /[0-9]{5}([- ]?[0-9]{4})?/;
+   if (pattern.test(zip)) {
+      // la valeur du code sera la première correspondance
+      // dans la chaîne
+      this.value = zip.match(pattern)[0];
+      this.valueOf = function() {
+         return this.value
+      };
+      this.toString = function() {
+         return String(this.value)
+      };
+   } else {
+      throw new ZipFormatIncorrectException(zip);
+   }
+}
+
+function ZipFormatIncorrectException(value) {
+   this.value = value;
+   this.message = "le format n'est pas conforme";
+   this.toString = function() {
+      return this.value + this.message;
+   };
+}
+
+/*
+ * Cette fonction pourrait être utilisée dans un script
+ * pour valider des adresses
+ */
+
+const ZIPCODE_INVALID = -1;
+const ZIPCODE_UNKNOWN_ERROR = -2;
+
+function vérifierZipCode(z) {
+   try {
+      z = new ZipCode(z);
+   } catch (e) {
+      if (e instanceof ZipFormatIncorrectException) {
+         return ZIPCODE_INVALID;
+      } else {
+         return ZIPCODE_UNKNOWN_ERROR;
+      }
+   }
+   return z;
+}
+
+a = vérifierZipCode(95060);         // renvoie 95060
+b = vérifierZipCode(9560);          // renvoie -1
+c = vérifierZipCode("a");           // renvoie -1
+d = vérifierZipCode("95060");       // renvoie 95060
+e = vérifierZipCode("95060 1234");  // renvoie 95060 1234
+```
+
+### Propager une exception
+
+L'instruction `throw` peut être utilisée pour transmettre une exception qui aurait été interceptée avec {{jsxref("Instructions/try...catch","catch")}}. Dans l'exemple suivant, on intercepte une exception avec une valeur numérique et on propage l'exception si la valeur est supérieure à 50. L'exception qui est levée se propage dans la fonction appelante ou au niveau le plus haut, visible par l'utilisateur.
+
+```js
+try {
+   throw n; // lève une exception avec une valeur numérique
+} catch (e) {
+   if (e <= 50) {
+      // des instructions pour gérer les cas entre 1 et 50
+   } else {
+      // ce cas ne peut pas être géré maintenant, on transmet l'exception
+      throw e;
+   }
+}
+```
+
+## Spécifications
+
+| Spécification                                                                            | État                         | Commentaires                                         |
+| ---------------------------------------------------------------------------------------- | ---------------------------- | ---------------------------------------------------- |
+| {{SpecName('ES3')}}                                                                 | {{Spec2('ES3')}}         | Définition initiale. Implémentée avec JavaScript 1.4 |
+| {{SpecName('ES5.1', '#sec-12.13', 'throw statement')}}                 | {{Spec2('ES5.1')}}     |                                                      |
+| {{SpecName('ES6', '#sec-throw-statement', 'throw statement')}}     | {{Spec2('ES6')}}         |                                                      |
+| {{SpecName('ESDraft', '#sec-throw-statement', 'throw statement')}} | {{Spec2('ESDraft')}} |                                                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.statements.throw")}}
+
+## Voir aussi
+
+- {{jsxref("Instructions/try...catch","try...catch")}}
+- {{jsxref("Error")}}
diff --git a/files/fr/web/javascript/reference/statements/try...catch/index.html b/files/fr/web/javascript/reference/statements/try...catch/index.html
deleted file mode 100644
index 3eaf41da6e..0000000000
--- a/files/fr/web/javascript/reference/statements/try...catch/index.html
+++ /dev/null
@@ -1,291 +0,0 @@
----
-title: try...catch
-slug: Web/JavaScript/Reference/Statements/try...catch
-tags:
-  - JavaScript
-  - Reference
-  - Statement
-translation_of: Web/JavaScript/Reference/Statements/try...catch
-original_slug: Web/JavaScript/Reference/Instructions/try...catch
----
-<div>{{jsSidebar("Statements")}}</div>
-
-<p>L'instruction <strong><code>try...catch</code></strong> regroupe des instructions à exécuter et définit une réponse si l'une de ces instructions provoque une exception.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/statement-trycatch.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">try {
-   <em>instructions_try</em>
-}
-[catch (<em>exception_var_1</em> if <em>condition_1</em>) { // non-standard
-   <em>instructions_catch_1</em>
-}]
-...
-[catch (<em>exception_var_2</em>) {
-   <em>instructions_catch_2</em>
-}]
-[finally {
-   <em>instructions_finally</em>
-}]
-</pre>
-
-<dl>
- <dt><code>instructions_try</code></dt>
- <dd>Les instructions qu'on souhaite exécuter.</dd>
- <dt><code>instructions_catch_1</code>, <code>instructions_catch_2</code></dt>
- <dd>Les instructions à exécuter si une exception est levée dans le bloc <code>try</code>.</dd>
- <dt><code>exception_var_1</code>, <code>exception_var_2</code></dt>
- <dd>Un identifiant qui permet de récupérer la valeur de l'exception associée à la clause <code>catch</code>.</dd>
- <dt><code>condition_1</code></dt>
- <dd>Une expression conditionnelle.</dd>
- <dt><code>instructions_finally</code></dt>
- <dd>Les instructions à exécuter une fois que l'instruction <code>try</code> est terminée. Ces instructions s'exécuteront, qu'il y ait eu une exception ou non.</dd>
-</dl>
-
-<h2 id="Description">Description</h2>
-
-<p>L'instruction <code>try</code> est composée d'un bloc <code>try</code> contenant une ou plusieurs instructions, d'au moins une clause <code>catch</code> ou d'une clause <code>finally</code> ou des deux. On peut donc avoir les trois formes suivantes pour cette instruction :</p>
-
-<ol>
- <li><code>try...catch</code></li>
- <li><code>try...finally</code></li>
- <li><code>try...catch...finally</code></li>
-</ol>
-
-<p>Une clause <code>catch</code> contient les instructions à exécuter si une exception est levée par une instruction du bloc <code>try</code>. On souhaite généralement que le bloc <code>try</code> se déroule sans problème. Si toutefois une erreur se produit, on veut pouvoir contrôler ce qui se passe et on transmet donc le contrôle au bloc <code>catch</code>. Si une instruction contenue dans le bloc <code>try</code> (ou une fonction appelée depuis le bloc <code>try</code>) renvoie une exception, le contrôle sera immédiatement passé à la clause <code>catch</code>. Si aucune exception n'est levée, la clause <code>catch</code> ne sera pas utilisée.</p>
-
-<p>La clause <code>finally</code> s'exécute après le bloc <code>try</code> et après le bloc <code>catch</code> (si celui-ci a été déclenché) mais avant les instructions qui suivent. Les instructions de cette clause sont toujours exécutées, qu'il y ait eu ou non une exception de déclenchée et/ou d'interceptée.</p>
-
-<p>Il est possible d'imbriquer plusieurs instructions <code>try</code>. Si un <code>try</code> imbriqué ne possède pas de clause <code>catch</code>, la clause <code>catch</code> du <code>try</code> du niveau supérieur sera utilisée (et ainsi de suite).</p>
-
-<p>Pour plus d'informations sur les exceptions et les erreurs en JavaScript, voir le chapitre du <a href="/fr/docs/Web/JavaScript/Guide/Instructions#Les_instructions_utilis.C3.A9es_pour_les_exceptions">Guide JavaScript</a> correspondant.</p>
-
-<h3 id="Clause_catch_inconditionnelle">Clause <code>catch</code> inconditionnelle</h3>
-
-<p>Lorsqu'une seule clause <code>catch</code> inconditionnelle est utilisée, le bloc <code>catch</code> est utilisée pour n'importe quelle exception qui est levée. Ainsi, dans le fragment de code qui suit, pour toute exception produite, le contrôle de l'exécution passera à la clause <code>catch</code>.</p>
-
-<pre class="brush: js">try {
-   throw "monException"; // génère une exception
-}
-catch (e) {
-   // les instructions utilisées pour gérer les
-   // exceptions
-   logErreurs(e); // on transfère l'objet de l'exception à une méthode
-                  // gestionnaire
-}
-</pre>
-
-<p>La clause <code>catch</code> définit un identifiant (dans l'exemple précédent, c'est <code>e</code>) qui contient la valeur définie par l'instruction <code>throw</code>. Ce bloc <code>catch</code> est en quelque sorte unique en JavaScript car l'identifiant est créé lors de l'entrée dans le bloc <code>catch</code>, la valeur est alors ajoutée à la portée courant et la durée de vie de l'identifiant est limitée au bloc <code>catch</code>. Une fois que le bloc <code>catch</code> a été exécuté, l'identifiant n'est plus disponible.</p>
-
-<h3 id="Clauses_catch_conditionnelles">Clauses <code>catch</code> conditionnelles</h3>
-
-<p>{{non-standard_header}}</p>
-
-<p>Il est aussi possible d'utiliser une ou plusieurs clauses <code>catch</code> conditionnelles afin de gérer des exceptions spécifiques. Dans ce cas, selon l'exception produite, la clause <code>catch</code> appropriée sera utilisée. Dans l'exemple qui suit, le code contenu dans le bloc <code>try</code> peut produire trois exceptions : {{jsxref("TypeError")}}, {{jsxref("RangeError")}}, et {{jsxref("EvalError")}}. Lorsqu'une exception se produit, le contrôle de l'exécution est passé à la clause <code>catch</code> correspondante. SI l'exception qui est déclenchée ne correspond à aucune des conditions, le contrôle passera à la clause <code>catch</code> non-conditionnelle si elle est trouvée..</p>
-
-<p>Si on utilise une clause <code>catch</code> inconditionnelle avec une ou plusieurs clauses <code>catch</code> conditionnelles, la clause inconditionnelle doit être spécifiée en dernière. Si ce n'est pas le cas, la clause <code>catch</code> inconditionnelle interceptera tous les types d'exceptions avant les autres clauses.</p>
-
-<pre class="brush: js">try {
-    maRoutine(); // peut déclencher trois types d'exceptions
-} catch (e if e instanceof TypeError) {
-    // les instructions pour gérer TypeError
-} catch (e if e instanceof RangeError) {
-    // les instructions pour gérer RangeError
-} catch (e if e instanceof EvalError) {
-    // les instructions pour gérer EvalError
-} catch (e) {
-    // les instructions pour gérer les autres exceptions
-}
-</pre>
-
-<p>Dans le fragment de code qui suit, on aura le même fonctionnement mais en utilisant uniquement des fonctionnalités standard (selon ECMAScript). Ce code est plus long mais fonctionne pour tous les environnements conformes à ECMAScript :</p>
-
-<pre class="brush: js">try {
-    maRoutine(); // may throw three types of exceptions
-} catch (e) {
-    if (e instanceof TypeError) {
-        // les instructions pour gérer TypeError
-    } else if (e instanceof RangeError) {
-        // les instructions pour gérer RangeError
-    } else if (e instanceof EvalError) {
-        // les instructions pour gérer EvalError
-    } else {
-       // les instructions pour gérer les autres exceptions
-    }
-}
-</pre>
-
-<h3 id="L'identifiant_de_l'exception">L'identifiant de l'exception</h3>
-
-<p>Lorsqu'une exception est levée dans le bloc <code>try</code>, <em><code>exception_var</code></em> (par exemple le <code>e</code> dans « <code>catch (e)</code> ») contient la valeur définie par l'instruction {{jsxref("Instructions/throw","throw")}}. Cet identifiant peut être utilisé pour accéder aux propriétés de l'objet et ainsi obtenir des informations sur l'exception qui a eu lieu. Cet identifiant est local à la clause <code>catch</code>, il est créé lorsqu'on rentre dans la clause <code>catch</code> et n'est plus disponible une fois que la clause a fini son exécution.</p>
-
-<pre class="brush: js">function isValidJSON(txt){
-  try {
-    JSON.parse(txt);
-    return true;
-  } catch {
-    return false;
-  }
-}</pre>
-
-<h3 id="La_clause_finally">La clause <code>finally</code></h3>
-
-<p>La clause <code>finally</code> contient les instructions à exécuter après que les instructions du bloc <code>try</code> et éventuellement celles de la clause <code>catch</code> aient été exécutées mais avant que les instructions suivant l'instruction <code>try</code> soient exécutées. La clause <code>finally</code> est exécutée dans tous les cas (si on a eu une exception ou non). Si une exception est levée et qu'il n'y a pas de clause <code>catch</code>, les instructions de la clause <code>finally</code> sont tout de même exécutées.</p>
-
-<p>Cela peut paraître étrange qu'un bloc de code qui s'exécute même lorsqu'il y a une exception… Il faut comprendre que le code qui suit le bloc try...catch ne sera <strong>pas</strong> exécuté. Aussi, le bloc <code>finally</code> permet de contenir toutes les instructions de clôture/nettoyage nécessaire. On évite donc de dupliquer ce code qui doit toujours être utilisé.</p>
-
-<p>La clause <code>finally</code> peut être utilisée afin d'exécuter les actions nécessaires pour que le script « échoue correctement » en cas d'erreur. On peut par exemple tirer parti de <code>finally</code> pour fermer un flux, libérer une ressource, etc. Dans l'exemple suivant, exécuté côté serveur, le script accède à un fichier. Si une exception se produit lorsque le fichier est ouvert, la clause <code>finally</code> permet de fermer le fichier avant que le script échoue. Le code contenu dans le bloc <code>finally</code> sera exécuté même si on a une instruction <code>return</code> dans la section <code>try</code> ou dans la section <code>catch</code>.</p>
-
-<pre class="brush: js">ouvrirMonFichier()
-try {
-   // on utilise une ressource
-   écrireDansMonFichier(mesDonnées);
-}
-finally {
-   fermerMonFichier(); // on ferme toujours la ressource
-}
-</pre>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Blocs_try_imbriqués">Blocs <code>try</code> imbriqués</h3>
-
-<p>Tout d'abord, on utilise ce fragment de code, qui produit le résultat suivant :</p>
-
-<pre class="brush: js">try {
-  try {
-    throw new Error("oups");
-  }
-  finally {
-    console.log("finally");
-  }
-}
-catch (ex) {
-  console.error("externe", ex.message);
-}
-
-// Produira dans la console :
-// "finally"
-// "externe" "oups"
-</pre>
-
-<p>Et maintenant, si on a déjà intercepté l'exception avec une clause <code>catch</code> dans le bloc imbriqué :</p>
-
-<pre class="brush: js">try {
-  try {
-    throw new Error("oups");
-  }
-  catch (ex) {
-    console.error("interne", ex.message);
-  }
-  finally {
-    console.log("finally");
-  }
-}
-catch (ex) {
-  console.error("externe", ex.message);
-}
-
-// Produira dans la console:
-// "interne" "oups"
-// "finally"
-</pre>
-
-<p>Ensuite, si on propage l'erreur à nouveau :</p>
-
-<pre class="brush: js">try {
-  try {
-    throw new Error("oups");
-  }
-  catch (ex) {
-    console.error("interne", ex.message);
-    throw ex;
-  }
-  finally {
-    console.log("finally");
-  }
-}
-catch (ex) {
-  console.error("externe", ex.message);
-}
-
-// Produira dans la console :
-// "interne" "oups"
-// "finally"
-// "externe" "oups"
-</pre>
-
-<p>Toute exception ne sera interceptée qu'une seule fois par le bloc <code>catch</code> le plus « proche » à moins qu'elle ne soit retransmise à nouveau. Bien entendu, toute exception qui aura été levée par le bloc interne (il se peut que les instructions d'une clause catch provoquent une erreur) sera interceptée par le bloc externe.</p>
-
-<h3 id="Valeur_de_retour_et_bloc_finally">Valeur de retour et bloc <code>finally</code></h3>
-
-<p>Lorsque le bloc <code>finally</code> renvoie une valeur, c'est cette valeur qui devient la valeur de retour pour l'ensemble du bloc <code>try-catch-finally</code> et ce, peu importe, s'il y a des instructions {{jsxref("Instructions/return","return")}} dans les blocs <code>try</code> et <code>catch</code>. Cela inclue également les exceptions levées dans le bloc <code>catch</code> :</p>
-
-<pre class="brush: js">try {
-  try {
-    throw new Error("oups");
-  }
-  catch (ex) {
-    console.error("interne", ex.message);
-    throw ex;
-  }
-  finally {
-    console.log("finally");
-    return;
-  }
-}
-catch (ex) {
-  console.error("externe", ex.message);
-}
-
-// Produira dans la console :
-// "interne" "oups"
-// "finally"
-</pre>
-
-<p>Le "oups" externe n'est pas renvoyé car l'instruction <code>return</code> est utilisée dans la clause <code>finally</code> du bloc interne. Cela aurait également été le cas avec n'importe quelle valeur renvoyée par le bloc <code>catch</code>.</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES3')}}</td>
-   <td>{{Spec2('ES3')}}</td>
-   <td>Définition initiale. Implémentée avec JavaScript 1.4</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-12.14', 'instruction try')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-try-statement', 'Instruction try')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-try-statement', 'try statement')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td>Points ne faisant pas partie du standard ECMA-262 actuel : utilisation de plusieurs clauses catch et de plusieurs clauses conditionnelles (extension liée à SpiderMonkey, correspondant à JavaScript 1.5).</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.statements.try_catch")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Error")}}</li>
- <li>{{jsxref("Instructions/throw", "throw")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/statements/try...catch/index.md b/files/fr/web/javascript/reference/statements/try...catch/index.md
new file mode 100644
index 0000000000..358ae2ee42
--- /dev/null
+++ b/files/fr/web/javascript/reference/statements/try...catch/index.md
@@ -0,0 +1,271 @@
+---
+title: try...catch
+slug: Web/JavaScript/Reference/Statements/try...catch
+tags:
+  - JavaScript
+  - Reference
+  - Statement
+translation_of: Web/JavaScript/Reference/Statements/try...catch
+original_slug: Web/JavaScript/Reference/Instructions/try...catch
+---
+{{jsSidebar("Statements")}}
+
+L'instruction **`try...catch`** regroupe des instructions à exécuter et définit une réponse si l'une de ces instructions provoque une exception.
+
+{{EmbedInteractiveExample("pages/js/statement-trycatch.html")}}
+
+## Syntaxe
+
+    try {
+       instructions_try
+    }
+    [catch (exception_var_1 if condition_1) { // non-standard
+       instructions_catch_1
+    }]
+    ...
+    [catch (exception_var_2) {
+       instructions_catch_2
+    }]
+    [finally {
+       instructions_finally
+    }]
+
+- `instructions_try`
+  - : Les instructions qu'on souhaite exécuter.
+- `instructions_catch_1`, `instructions_catch_2`
+  - : Les instructions à exécuter si une exception est levée dans le bloc `try`.
+- `exception_var_1`, `exception_var_2`
+  - : Un identifiant qui permet de récupérer la valeur de l'exception associée à la clause `catch`.
+- `condition_1`
+  - : Une expression conditionnelle.
+- `instructions_finally`
+  - : Les instructions à exécuter une fois que l'instruction `try` est terminée. Ces instructions s'exécuteront, qu'il y ait eu une exception ou non.
+
+## Description
+
+L'instruction `try` est composée d'un bloc `try` contenant une ou plusieurs instructions, d'au moins une clause `catch` ou d'une clause `finally` ou des deux. On peut donc avoir les trois formes suivantes pour cette instruction :
+
+1.  `try...catch`
+2.  `try...finally`
+3.  `try...catch...finally`
+
+Une clause `catch` contient les instructions à exécuter si une exception est levée par une instruction du bloc `try`. On souhaite généralement que le bloc `try` se déroule sans problème. Si toutefois une erreur se produit, on veut pouvoir contrôler ce qui se passe et on transmet donc le contrôle au bloc `catch`. Si une instruction contenue dans le bloc `try` (ou une fonction appelée depuis le bloc `try`) renvoie une exception, le contrôle sera immédiatement passé à la clause `catch`. Si aucune exception n'est levée, la clause `catch` ne sera pas utilisée.
+
+La clause `finally` s'exécute après le bloc `try` et après le bloc `catch` (si celui-ci a été déclenché) mais avant les instructions qui suivent. Les instructions de cette clause sont toujours exécutées, qu'il y ait eu ou non une exception de déclenchée et/ou d'interceptée.
+
+Il est possible d'imbriquer plusieurs instructions `try`. Si un `try` imbriqué ne possède pas de clause `catch`, la clause `catch` du `try` du niveau supérieur sera utilisée (et ainsi de suite).
+
+Pour plus d'informations sur les exceptions et les erreurs en JavaScript, voir le chapitre du [Guide JavaScript](/fr/docs/Web/JavaScript/Guide/Instructions#Les_instructions_utilis.C3.A9es_pour_les_exceptions) correspondant.
+
+### Clause `catch` inconditionnelle
+
+Lorsqu'une seule clause `catch` inconditionnelle est utilisée, le bloc `catch` est utilisée pour n'importe quelle exception qui est levée. Ainsi, dans le fragment de code qui suit, pour toute exception produite, le contrôle de l'exécution passera à la clause `catch`.
+
+```js
+try {
+   throw "monException"; // génère une exception
+}
+catch (e) {
+   // les instructions utilisées pour gérer les
+   // exceptions
+   logErreurs(e); // on transfère l'objet de l'exception à une méthode
+                  // gestionnaire
+}
+```
+
+La clause `catch` définit un identifiant (dans l'exemple précédent, c'est `e`) qui contient la valeur définie par l'instruction `throw`. Ce bloc `catch` est en quelque sorte unique en JavaScript car l'identifiant est créé lors de l'entrée dans le bloc `catch`, la valeur est alors ajoutée à la portée courant et la durée de vie de l'identifiant est limitée au bloc `catch`. Une fois que le bloc `catch` a été exécuté, l'identifiant n'est plus disponible.
+
+### Clauses `catch` conditionnelles
+
+{{non-standard_header}}
+
+Il est aussi possible d'utiliser une ou plusieurs clauses `catch` conditionnelles afin de gérer des exceptions spécifiques. Dans ce cas, selon l'exception produite, la clause `catch` appropriée sera utilisée. Dans l'exemple qui suit, le code contenu dans le bloc `try` peut produire trois exceptions : {{jsxref("TypeError")}}, {{jsxref("RangeError")}}, et {{jsxref("EvalError")}}. Lorsqu'une exception se produit, le contrôle de l'exécution est passé à la clause `catch` correspondante. SI l'exception qui est déclenchée ne correspond à aucune des conditions, le contrôle passera à la clause `catch` non-conditionnelle si elle est trouvée..
+
+Si on utilise une clause `catch` inconditionnelle avec une ou plusieurs clauses `catch` conditionnelles, la clause inconditionnelle doit être spécifiée en dernière. Si ce n'est pas le cas, la clause `catch` inconditionnelle interceptera tous les types d'exceptions avant les autres clauses.
+
+```js
+try {
+    maRoutine(); // peut déclencher trois types d'exceptions
+} catch (e if e instanceof TypeError) {
+    // les instructions pour gérer TypeError
+} catch (e if e instanceof RangeError) {
+    // les instructions pour gérer RangeError
+} catch (e if e instanceof EvalError) {
+    // les instructions pour gérer EvalError
+} catch (e) {
+    // les instructions pour gérer les autres exceptions
+}
+```
+
+Dans le fragment de code qui suit, on aura le même fonctionnement mais en utilisant uniquement des fonctionnalités standard (selon ECMAScript). Ce code est plus long mais fonctionne pour tous les environnements conformes à ECMAScript :
+
+```js
+try {
+    maRoutine(); // may throw three types of exceptions
+} catch (e) {
+    if (e instanceof TypeError) {
+        // les instructions pour gérer TypeError
+    } else if (e instanceof RangeError) {
+        // les instructions pour gérer RangeError
+    } else if (e instanceof EvalError) {
+        // les instructions pour gérer EvalError
+    } else {
+       // les instructions pour gérer les autres exceptions
+    }
+}
+```
+
+### L'identifiant de l'exception
+
+Lorsqu'une exception est levée dans le bloc `try`, _`exception_var`_ (par exemple le `e` dans « `catch (e)` ») contient la valeur définie par l'instruction {{jsxref("Instructions/throw","throw")}}. Cet identifiant peut être utilisé pour accéder aux propriétés de l'objet et ainsi obtenir des informations sur l'exception qui a eu lieu. Cet identifiant est local à la clause `catch`, il est créé lorsqu'on rentre dans la clause `catch` et n'est plus disponible une fois que la clause a fini son exécution.
+
+```js
+function isValidJSON(txt){
+  try {
+    JSON.parse(txt);
+    return true;
+  } catch {
+    return false;
+  }
+}
+```
+
+### La clause `finally`
+
+La clause `finally` contient les instructions à exécuter après que les instructions du bloc `try` et éventuellement celles de la clause `catch` aient été exécutées mais avant que les instructions suivant l'instruction `try` soient exécutées. La clause `finally` est exécutée dans tous les cas (si on a eu une exception ou non). Si une exception est levée et qu'il n'y a pas de clause `catch`, les instructions de la clause `finally` sont tout de même exécutées.
+
+Cela peut paraître étrange qu'un bloc de code qui s'exécute même lorsqu'il y a une exception… Il faut comprendre que le code qui suit le bloc try...catch ne sera **pas** exécuté. Aussi, le bloc `finally` permet de contenir toutes les instructions de clôture/nettoyage nécessaire. On évite donc de dupliquer ce code qui doit toujours être utilisé.
+
+La clause `finally` peut être utilisée afin d'exécuter les actions nécessaires pour que le script « échoue correctement » en cas d'erreur. On peut par exemple tirer parti de `finally` pour fermer un flux, libérer une ressource, etc. Dans l'exemple suivant, exécuté côté serveur, le script accède à un fichier. Si une exception se produit lorsque le fichier est ouvert, la clause `finally` permet de fermer le fichier avant que le script échoue. Le code contenu dans le bloc `finally` sera exécuté même si on a une instruction `return` dans la section `try` ou dans la section `catch`.
+
+```js
+ouvrirMonFichier()
+try {
+   // on utilise une ressource
+   écrireDansMonFichier(mesDonnées);
+}
+finally {
+   fermerMonFichier(); // on ferme toujours la ressource
+}
+```
+
+## Exemples
+
+### Blocs `try` imbriqués
+
+Tout d'abord, on utilise ce fragment de code, qui produit le résultat suivant :
+
+```js
+try {
+  try {
+    throw new Error("oups");
+  }
+  finally {
+    console.log("finally");
+  }
+}
+catch (ex) {
+  console.error("externe", ex.message);
+}
+
+// Produira dans la console :
+// "finally"
+// "externe" "oups"
+```
+
+Et maintenant, si on a déjà intercepté l'exception avec une clause `catch` dans le bloc imbriqué :
+
+```js
+try {
+  try {
+    throw new Error("oups");
+  }
+  catch (ex) {
+    console.error("interne", ex.message);
+  }
+  finally {
+    console.log("finally");
+  }
+}
+catch (ex) {
+  console.error("externe", ex.message);
+}
+
+// Produira dans la console:
+// "interne" "oups"
+// "finally"
+```
+
+Ensuite, si on propage l'erreur à nouveau :
+
+```js
+try {
+  try {
+    throw new Error("oups");
+  }
+  catch (ex) {
+    console.error("interne", ex.message);
+    throw ex;
+  }
+  finally {
+    console.log("finally");
+  }
+}
+catch (ex) {
+  console.error("externe", ex.message);
+}
+
+// Produira dans la console :
+// "interne" "oups"
+// "finally"
+// "externe" "oups"
+```
+
+Toute exception ne sera interceptée qu'une seule fois par le bloc `catch` le plus « proche » à moins qu'elle ne soit retransmise à nouveau. Bien entendu, toute exception qui aura été levée par le bloc interne (il se peut que les instructions d'une clause catch provoquent une erreur) sera interceptée par le bloc externe.
+
+### Valeur de retour et bloc `finally`
+
+Lorsque le bloc `finally` renvoie une valeur, c'est cette valeur qui devient la valeur de retour pour l'ensemble du bloc `try-catch-finally` et ce, peu importe, s'il y a des instructions {{jsxref("Instructions/return","return")}} dans les blocs `try` et `catch`. Cela inclue également les exceptions levées dans le bloc `catch` :
+
+```js
+try {
+  try {
+    throw new Error("oups");
+  }
+  catch (ex) {
+    console.error("interne", ex.message);
+    throw ex;
+  }
+  finally {
+    console.log("finally");
+    return;
+  }
+}
+catch (ex) {
+  console.error("externe", ex.message);
+}
+
+// Produira dans la console :
+// "interne" "oups"
+// "finally"
+```
+
+Le "oups" externe n'est pas renvoyé car l'instruction `return` est utilisée dans la clause `finally` du bloc interne. Cela aurait également été le cas avec n'importe quelle valeur renvoyée par le bloc `catch`.
+
+## Spécifications
+
+| Spécification                                                                        | État                         | Commentaires                                                                                                                                                                                               |
+| ------------------------------------------------------------------------------------ | ---------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| {{SpecName('ES3')}}                                                             | {{Spec2('ES3')}}         | Définition initiale. Implémentée avec JavaScript 1.4                                                                                                                                                       |
+| {{SpecName('ES5.1', '#sec-12.14', 'instruction try')}}             | {{Spec2('ES5.1')}}     |                                                                                                                                                                                                            |
+| {{SpecName('ES6', '#sec-try-statement', 'Instruction try')}}     | {{Spec2('ES6')}}         |                                                                                                                                                                                                            |
+| {{SpecName('ESDraft', '#sec-try-statement', 'try statement')}} | {{Spec2('ESDraft')}} | Points ne faisant pas partie du standard ECMA-262 actuel : utilisation de plusieurs clauses catch et de plusieurs clauses conditionnelles (extension liée à SpiderMonkey, correspondant à JavaScript 1.5). |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.statements.try_catch")}}
+
+## Voir aussi
+
+- {{jsxref("Error")}}
+- {{jsxref("Instructions/throw", "throw")}}
diff --git a/files/fr/web/javascript/reference/statements/var/index.html b/files/fr/web/javascript/reference/statements/var/index.html
deleted file mode 100644
index 044870b84c..0000000000
--- a/files/fr/web/javascript/reference/statements/var/index.html
+++ /dev/null
@@ -1,217 +0,0 @@
----
-title: var
-slug: Web/JavaScript/Reference/Statements/var
-tags:
-  - Instruction
-  - JavaScript
-  - Reference
-translation_of: Web/JavaScript/Reference/Statements/var
-original_slug: Web/JavaScript/Reference/Instructions/var
----
-<div>{{jsSidebar("Statements")}}</div>
-
-<p>L'instruction <strong><code>var</code></strong> (pour variable) permet de déclarer une variable et éventuellement d'initialiser sa valeur.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/statement-var.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">var <em>nomVar1 [</em>= <em>valeur1] [</em>, <em>nomVar2 [</em>= <em>valeur2] </em><em>... [</em>, <em>nomVarN [</em>= <em>valeurN]]]</em>;</pre>
-
-<dl>
- <dt><code>nomvarN</code></dt>
- <dd>Le nom de la variable, cela peut être n'importe quel identifiant valide.</dd>
- <dt><code>valeurN</code></dt>
- <dd>La valeur initiale à affecter à la variable, cela peut être n'importe quelle expression valide. S'il n'y a aucune valeur fournie, la variable vaudra {{jsxref("undefined")}}.</dd>
-</dl>
-
-<h2 id="Description">Description</h2>
-
-<p>Les déclarations de variables sont traitées avant que le code soit exécuté, quel que soit leur emplacement dans le code. La portée d'une variable déclarée avec <code>var</code> est le <em>contexte d'exécution</em> courant, c'est-à-dire : <strong>la fonction</strong> qui contient la déclaration <strong>ou le contexte global</strong> si la variable est déclarée en dehors de toute fonction.</p>
-
-<p>Si on affecte une valeur à une variable qui n'a pas été déclarée (le mot-clé <code>var</code> n'a pas été utilisé), cela devient une variable globale (une propriété de l'objet global) lorsque l'affectation est exécutée. Les différences entre les variables déclarées et les variables non-déclarées sont :</p>
-
-<ol>
- <li>Les variables déclarées sont contraintes dans le contexte d'exécution dans lequel elles sont déclarées. Les variables non-déclarées sont toujours globales.
-  <pre class="brush: js">function x() {
-  y = 1;   // Lève une exception ReferenceError en mode strict
-  var z = 2;
-}
-
-x();
-
-console.log(y); // Affiche "1" dans la console
-console.log(z); // Lève une exception ReferenceError:
-                // z n'est pas définie en dehors de x
-</pre>
- </li>
- <li>Les variables déclarées sont créées avant que n'importe quel autre code soit exécuté. Les variables non-déclarées n'existent pas tant que leur code n'est pas exécuté.
-  <pre class="brush: js">console.log(a);                // Lève une exception ReferenceError.
-console.log('on continue...'); // N'est jamais exécuté</pre>
-
-  <pre class="brush: js">var a;
-console.log(a);                // Affiche "undefined".
-console.log('on continue...'); // Affiche "on continue...".</pre>
- </li>
- <li>Les variables déclarées sont des propriétés non-configurables de leur contexte d'exécution (la fonction courante ou le contexte global). Les variables non-déclarées sont configurables (ce qui signifie qu'elles peuvent être supprimées).
-  <pre class="brush: js">var a = 1;
-b = 2;
-
-delete this.a; // Lève une TypeError en mode strict. Échoue silencieusement sinon.
-delete this.b;
-
-console.log(a, b); // Lève une exception ReferenceError.
-// La propriété 'b' a été supprimée et n'existe plus.</pre>
- </li>
-</ol>
-
-<p>En raison de ces trois différences, il faut éviter de ne pas déclarer une variable car cela peut provoquer des résultats inattendus. <strong>Il est donc fortement recommandé de toujours déclarer les variables, qu'elles soient dans une fonction ou dans la portée globale.</strong> Le <a href="/fr/docs/Web/JavaScript/Reference/Strict_mode">mode strict</a>, introduit avec ECMAScript 5, lève une exception lorsqu'une variable n'est pas déclarée.</p>
-
-<h3 id="La_remontée_de_variables_(hoisting)">La remontée de variables (<em>hoisting</em>)</h3>
-
-<p>Les déclarations de variables (et les déclarations en général) sont traitées avant que n'importe quel autre code soit exécuté. Ainsi, déclarer une variable n'importe où dans le code équivaut à la déclarer au début de son contexte d'exécution. Cela signifie qu'une variable peut également apparaître dans le code avant d'avoir été déclarée. Ce comportement est appelé « remontée » (<em>hoisting</em> en anglais) car la déclaration de la variable est « remontée » au début de la fonction courante ou du contexte global.</p>
-
-<pre class="brush: js">bla = 2
-var bla;
-// ...
-
-// est implicitement traité comme :
-
-var bla;
-bla = 2;
-</pre>
-
-<p>Étant donné ce comportement, il est recommandé de toujours déclarer les variables au début de leurs portées (le début du code global ou le début du corps de la fonction) afin de mieux (sa)voir quelles variables font partie de la fonction et lesquelles proviennent de la chaîne de portées.</p>
-
-<p>Il est important de noter que la remontée des variables affecte uniquement la déclaration et pas l'initialisation de la valeur. La valeur sera affectée lorsque le moteur accèdera à l'instruction d'affectation. Par exemple :</p>
-
-<pre class="brush: js">function faireQuelqueChose() {
-  console.log(truc); // undefined
-  var truc = 111;
-  console.log(truc); // 111
-}
-
-// Correspond en fait à :
-function faireQuelqueChose() {
-  var truc;
-  console.log(truc); // undefined
-  truc = 111;
-  console.log(truc); // 111
-}
-</pre>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Déclarer_et_initialiser_deux_variables">Déclarer et initialiser deux variables</h3>
-
-<pre class="brush: js">var a = 0, b = 0;
-</pre>
-
-<h3 id="Affecter_deux_variables_avec_la_même_chaîne_de_caractères">Affecter deux variables avec la même chaîne de caractères</h3>
-
-<pre class="brush: js">var a = "A";
-var b = a;
-
-// est équivalent à :
-
-var a, b = a = "A";
-</pre>
-
-<p>Attention à l'ordre :</p>
-
-<pre class="brush: js">var x = y, y = 'A';
-console.log(x + y); // undefinedA
-</pre>
-
-<p>Ici, <code>x</code> et <code>y</code> sont déclarées avant que n'importe quel code soit exécuté, <strong>les affectations sont réalisées après !</strong> Au moment où <code>x = y</code> est évalué, <code>y</code> existe donc on n'a pas d'erreur {{jsxref("ReferenceError")}} mais sa valeur est {{jsxref("undefined")}}. Ainsi, <code>x</code> reçoit la valeur <code>undefined</code>. Ensuite, <code>y</code> reçoit la valeur <code>'A'</code>. Après la première ligne de code, on a donc la situation où <code>x === undefined &amp;&amp; y === 'A'</code>, ce qui explique le résultat.</p>
-
-<h3 id="Initialiser_plusieurs_variables">Initialiser plusieurs variables</h3>
-
-<pre class="brush: js">var x = 0; // Variable dans la portée globale (le fichier)
-
-function f(){
-  var x = y = 1; // x est déclaré localement
-                 // ce qui n'est pas le cas de y !
-}
-f();
-
-console.log(x, y); // 0, 1
-// x a bien la valeur globale attendue
-// y a été contaminé dans la fonction !
-// Une exception ReferenceError sera levée en mode
-// strict car y n'est pas défini dans cette portée
-</pre>
-
-<h3 id="Les_variables_globales_implicites">Les variables globales implicites</h3>
-
-<p>Il est possible de faire référence à des variables qui sont des variables globales implicites depuis la portée d'une fonction externe :</p>
-
-<pre class="brush: js">var x = 0;  // Déclare x comme variable globale du fichier, on lui affecte 0
-
-console.log(typeof z); // "undefined", car z n'existe pas encore
-
-function a() {
-  var y = 2;   // Déclare y dans la portée de la fonction a
-               // Affecte 2 comme valeur à y
-
-  console.log(x, y);   // 0 2
-
-  function b() {
-    x = 3;  // Affecte 3 à la variable globale x
-            // Ne crée pas une nouvelle variable globale
-    y = 4;  // Affecte 4 à la variable externe y,
-            // Ne crée pas une nouvelle variable globale
-    z = 5;  // Crée une nouvelle variable globale
-            // et lui affecte la valeur 5.
-  }         // (lève une ReferenceError en mode strict.)
-
-  b();     // Crée z en tant que variable globale
-  console.log(x, y, z);  // 3 4 5
-}
-
-a();                   // l'appel à a() entraîne un appel à b()
-console.log(x, z);     // 3 5
-console.log(typeof y); // "undefined" car y est local à la fonction a</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES1')}}</td>
-   <td>{{Spec2('ES1')}}</td>
-   <td>Définition initiale. Implémentée avec JavaScript 1.0</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-12.2', 'instruction var')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-variable-statement', 'instruction de variable')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-variable-statement', 'variable statement')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.statements.var")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Instructions/let","let")}}</li>
- <li>{{jsxref("Instructions/const","const")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/statements/var/index.md b/files/fr/web/javascript/reference/statements/var/index.md
new file mode 100644
index 0000000000..613053dab3
--- /dev/null
+++ b/files/fr/web/javascript/reference/statements/var/index.md
@@ -0,0 +1,205 @@
+---
+title: var
+slug: Web/JavaScript/Reference/Statements/var
+tags:
+  - Instruction
+  - JavaScript
+  - Reference
+translation_of: Web/JavaScript/Reference/Statements/var
+original_slug: Web/JavaScript/Reference/Instructions/var
+---
+{{jsSidebar("Statements")}}
+
+L'instruction **`var`** (pour variable) permet de déclarer une variable et éventuellement d'initialiser sa valeur.
+
+{{EmbedInteractiveExample("pages/js/statement-var.html")}}
+
+## Syntaxe
+
+    var nomVar1 [= valeur1] [, nomVar2 [= valeur2] ... [, nomVarN [= valeurN]]];
+
+- `nomvarN`
+  - : Le nom de la variable, cela peut être n'importe quel identifiant valide.
+- `valeurN`
+  - : La valeur initiale à affecter à la variable, cela peut être n'importe quelle expression valide. S'il n'y a aucune valeur fournie, la variable vaudra {{jsxref("undefined")}}.
+
+## Description
+
+Les déclarations de variables sont traitées avant que le code soit exécuté, quel que soit leur emplacement dans le code. La portée d'une variable déclarée avec `var` est le _contexte d'exécution_ courant, c'est-à-dire : **la fonction** qui contient la déclaration **ou le contexte global** si la variable est déclarée en dehors de toute fonction.
+
+Si on affecte une valeur à une variable qui n'a pas été déclarée (le mot-clé `var` n'a pas été utilisé), cela devient une variable globale (une propriété de l'objet global) lorsque l'affectation est exécutée. Les différences entre les variables déclarées et les variables non-déclarées sont :
+
+1.  Les variables déclarées sont contraintes dans le contexte d'exécution dans lequel elles sont déclarées. Les variables non-déclarées sont toujours globales.
+
+    ```js
+    function x() {
+      y = 1;   // Lève une exception ReferenceError en mode strict
+      var z = 2;
+    }
+
+    x();
+
+    console.log(y); // Affiche "1" dans la console
+    console.log(z); // Lève une exception ReferenceError:
+                    // z n'est pas définie en dehors de x
+    ```
+
+2.  Les variables déclarées sont créées avant que n'importe quel autre code soit exécuté. Les variables non-déclarées n'existent pas tant que leur code n'est pas exécuté.
+
+    ```js
+    console.log(a);                // Lève une exception ReferenceError.
+    console.log('on continue...'); // N'est jamais exécuté
+    ```
+
+    ```js
+    var a;
+    console.log(a);                // Affiche "undefined".
+    console.log('on continue...'); // Affiche "on continue...".
+    ```
+
+3.  Les variables déclarées sont des propriétés non-configurables de leur contexte d'exécution (la fonction courante ou le contexte global). Les variables non-déclarées sont configurables (ce qui signifie qu'elles peuvent être supprimées).
+
+    ```js
+    var a = 1;
+    b = 2;
+
+    delete this.a; // Lève une TypeError en mode strict. Échoue silencieusement sinon.
+    delete this.b;
+
+    console.log(a, b); // Lève une exception ReferenceError.
+    // La propriété 'b' a été supprimée et n'existe plus.
+    ```
+
+En raison de ces trois différences, il faut éviter de ne pas déclarer une variable car cela peut provoquer des résultats inattendus. **Il est donc fortement recommandé de toujours déclarer les variables, qu'elles soient dans une fonction ou dans la portée globale.** Le [mode strict](/fr/docs/Web/JavaScript/Reference/Strict_mode), introduit avec ECMAScript 5, lève une exception lorsqu'une variable n'est pas déclarée.
+
+### La remontée de variables (_hoisting_)
+
+Les déclarations de variables (et les déclarations en général) sont traitées avant que n'importe quel autre code soit exécuté. Ainsi, déclarer une variable n'importe où dans le code équivaut à la déclarer au début de son contexte d'exécution. Cela signifie qu'une variable peut également apparaître dans le code avant d'avoir été déclarée. Ce comportement est appelé « remontée » (_hoisting_ en anglais) car la déclaration de la variable est « remontée » au début de la fonction courante ou du contexte global.
+
+```js
+bla = 2
+var bla;
+// ...
+
+// est implicitement traité comme :
+
+var bla;
+bla = 2;
+```
+
+Étant donné ce comportement, il est recommandé de toujours déclarer les variables au début de leurs portées (le début du code global ou le début du corps de la fonction) afin de mieux (sa)voir quelles variables font partie de la fonction et lesquelles proviennent de la chaîne de portées.
+
+Il est important de noter que la remontée des variables affecte uniquement la déclaration et pas l'initialisation de la valeur. La valeur sera affectée lorsque le moteur accèdera à l'instruction d'affectation. Par exemple :
+
+```js
+function faireQuelqueChose() {
+  console.log(truc); // undefined
+  var truc = 111;
+  console.log(truc); // 111
+}
+
+// Correspond en fait à :
+function faireQuelqueChose() {
+  var truc;
+  console.log(truc); // undefined
+  truc = 111;
+  console.log(truc); // 111
+}
+```
+
+## Exemples
+
+### Déclarer et initialiser deux variables
+
+```js
+var a = 0, b = 0;
+```
+
+### Affecter deux variables avec la même chaîne de caractères
+
+```js
+var a = "A";
+var b = a;
+
+// est équivalent à :
+
+var a, b = a = "A";
+```
+
+Attention à l'ordre :
+
+```js
+var x = y, y = 'A';
+console.log(x + y); // undefinedA
+```
+
+Ici, `x` et `y` sont déclarées avant que n'importe quel code soit exécuté, **les affectations sont réalisées après !** Au moment où `x = y` est évalué, `y` existe donc on n'a pas d'erreur {{jsxref("ReferenceError")}} mais sa valeur est {{jsxref("undefined")}}. Ainsi, `x` reçoit la valeur `undefined`. Ensuite, `y` reçoit la valeur `'A'`. Après la première ligne de code, on a donc la situation où `x === undefined && y === 'A'`, ce qui explique le résultat.
+
+### Initialiser plusieurs variables
+
+```js
+var x = 0; // Variable dans la portée globale (le fichier)
+
+function f(){
+  var x = y = 1; // x est déclaré localement
+                 // ce qui n'est pas le cas de y !
+}
+f();
+
+console.log(x, y); // 0, 1
+// x a bien la valeur globale attendue
+// y a été contaminé dans la fonction !
+// Une exception ReferenceError sera levée en mode
+// strict car y n'est pas défini dans cette portée
+```
+
+### Les variables globales implicites
+
+Il est possible de faire référence à des variables qui sont des variables globales implicites depuis la portée d'une fonction externe :
+
+```js
+var x = 0;  // Déclare x comme variable globale du fichier, on lui affecte 0
+
+console.log(typeof z); // "undefined", car z n'existe pas encore
+
+function a() {
+  var y = 2;   // Déclare y dans la portée de la fonction a
+               // Affecte 2 comme valeur à y
+
+  console.log(x, y);   // 0 2
+
+  function b() {
+    x = 3;  // Affecte 3 à la variable globale x
+            // Ne crée pas une nouvelle variable globale
+    y = 4;  // Affecte 4 à la variable externe y,
+            // Ne crée pas une nouvelle variable globale
+    z = 5;  // Crée une nouvelle variable globale
+            // et lui affecte la valeur 5.
+  }         // (lève une ReferenceError en mode strict.)
+
+  b();     // Crée z en tant que variable globale
+  console.log(x, y, z);  // 3 4 5
+}
+
+a();                   // l'appel à a() entraîne un appel à b()
+console.log(x, z);     // 3 5
+console.log(typeof y); // "undefined" car y est local à la fonction a
+```
+
+## Spécifications
+
+| Spécification                                                                                    | État                         | Commentaires                                         |
+| ------------------------------------------------------------------------------------------------ | ---------------------------- | ---------------------------------------------------- |
+| {{SpecName('ES1')}}                                                                         | {{Spec2('ES1')}}         | Définition initiale. Implémentée avec JavaScript 1.0 |
+| {{SpecName('ES5.1', '#sec-12.2', 'instruction var')}}                         | {{Spec2('ES5.1')}}     |                                                      |
+| {{SpecName('ES6', '#sec-variable-statement', 'instruction de variable')}} | {{Spec2('ES6')}}         |                                                      |
+| {{SpecName('ESDraft', '#sec-variable-statement', 'variable statement')}} | {{Spec2('ESDraft')}} |                                                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.statements.var")}}
+
+## Voir aussi
+
+- {{jsxref("Instructions/let","let")}}
+- {{jsxref("Instructions/const","const")}}
diff --git a/files/fr/web/javascript/reference/statements/while/index.html b/files/fr/web/javascript/reference/statements/while/index.html
deleted file mode 100644
index a9a03df043..0000000000
--- a/files/fr/web/javascript/reference/statements/while/index.html
+++ /dev/null
@@ -1,99 +0,0 @@
----
-title: while
-slug: Web/JavaScript/Reference/Statements/while
-tags:
-  - JavaScript
-  - Reference
-  - Statement
-translation_of: Web/JavaScript/Reference/Statements/while
-original_slug: Web/JavaScript/Reference/Instructions/while
----
-<div>{{jsSidebar("Statements")}}</div>
-
-<p>L'instruction <code><strong>while</strong></code> permet de créer une boucle qui s'exécute tant qu'une condition de test est vérifiée. La condition est évaluée avant d'exécuter l'instruction contenue dans la boucle.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/statement-while.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">while (<var>condition</var>) instruction</pre>
-
-<dl>
- <dt><code>condition</code></dt>
- <dd>Une expression qui est évaluée avant chaque passage dans la boucle. Si cette expression est évaluée à vrai, <code>instruction</code> est exécutée. Lorsque la condition n'est pas vérifiée, l'exécution se poursuit avec l'instruction qui suit la boucle <code>while</code>.</dd>
- <dt><code>instruction</code></dt>
- <dd>Une instruction optionnelle qui doit être exécutée tant que la condition d'entrée est vérifiée. Afin d'exécuter plusieurs instructions au sein de la boucle, on utilisera généralement un {{jsxref("Instructions/bloc","bloc d'instructions","",1)}} (<code>{ ... }</code>) pour les regrouper.<br>
- Note : on pourra utiliser l'instruction <code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/break">break</a></code> afin d'arrêter une boucle avant que la condition soit vérifiée.</dd>
-</dl>
-
-<h2 id="Exemples">Exemples</h2>
-
-<p>La boucle <code>while</code> qui suit s'exécute tant que <code>n</code> est strictement inférieur à 3.</p>
-
-<pre class="brush:js">var n = 0;
-var x = 0;
-
-while (n &lt; 3) {
-  n++;
-  x += n;
-}</pre>
-
-<p>À chaque itération, la boucle incrémente la valeur de <code>n</code> et l'ajoute à <code>x</code>. Ainsi, <code>x</code> et <code>n</code> prennent les valeurs suivantes :</p>
-
-<ul>
- <li>Après la première itération : <code>n</code> = 1 et <code>x</code> = 1</li>
- <li>Après la deuxième itération : <code>n</code> = 2 et <code>x</code> = 3</li>
- <li>Après la troisième itération : <code>n</code> = 3 et <code>x</code> = 6</li>
-</ul>
-
-<p>Une fois que la troisième itération est exécutée, la condition <code>n</code> &lt; 3 n'est plus vérifiée et donc la boucle se termine.</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-while-statement', 'while statement')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-while-statement', 'while statement')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-12.6.2', 'while statement')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES3', '#sec-12.6.2', 'while statement')}}</td>
-   <td>{{Spec2('ES3')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES1', '#sec-12.6.1', 'while statement')}}</td>
-   <td>{{Spec2('ES1')}}</td>
-   <td>Définition initiale</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.statements.while")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Instructions/do...while","do...while")}}</li>
- <li>{{jsxref("Instructions/for", "for")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/statements/while/index.md b/files/fr/web/javascript/reference/statements/while/index.md
new file mode 100644
index 0000000000..1dd4b2a94d
--- /dev/null
+++ b/files/fr/web/javascript/reference/statements/while/index.md
@@ -0,0 +1,66 @@
+---
+title: while
+slug: Web/JavaScript/Reference/Statements/while
+tags:
+  - JavaScript
+  - Reference
+  - Statement
+translation_of: Web/JavaScript/Reference/Statements/while
+original_slug: Web/JavaScript/Reference/Instructions/while
+---
+{{jsSidebar("Statements")}}
+
+L'instruction **`while`** permet de créer une boucle qui s'exécute tant qu'une condition de test est vérifiée. La condition est évaluée avant d'exécuter l'instruction contenue dans la boucle.
+
+{{EmbedInteractiveExample("pages/js/statement-while.html")}}
+
+## Syntaxe
+
+    while (condition) instruction
+
+- `condition`
+  - : Une expression qui est évaluée avant chaque passage dans la boucle. Si cette expression est évaluée à vrai, `instruction` est exécutée. Lorsque la condition n'est pas vérifiée, l'exécution se poursuit avec l'instruction qui suit la boucle `while`.
+- `instruction`
+  - : Une instruction optionnelle qui doit être exécutée tant que la condition d'entrée est vérifiée. Afin d'exécuter plusieurs instructions au sein de la boucle, on utilisera généralement un {{jsxref("Instructions/bloc","bloc d'instructions","",1)}} (`{ ... }`) pour les regrouper.
+    Note : on pourra utiliser l'instruction [`break`](/fr/docs/Web/JavaScript/Reference/Instructions/break) afin d'arrêter une boucle avant que la condition soit vérifiée.
+
+## Exemples
+
+La boucle `while` qui suit s'exécute tant que `n` est strictement inférieur à 3.
+
+```js
+var n = 0;
+var x = 0;
+
+while (n < 3) {
+  n++;
+  x += n;
+}
+```
+
+À chaque itération, la boucle incrémente la valeur de `n` et l'ajoute à `x`. Ainsi, `x` et `n` prennent les valeurs suivantes :
+
+- Après la première itération : `n` = 1 et `x` = 1
+- Après la deuxième itération : `n` = 2 et `x` = 3
+- Après la troisième itération : `n` = 3 et `x` = 6
+
+Une fois que la troisième itération est exécutée, la condition `n` < 3 n'est plus vérifiée et donc la boucle se termine.
+
+## Spécifications
+
+| Spécification                                                                            | Statut                       | Commentaires        |
+| ---------------------------------------------------------------------------------------- | ---------------------------- | ------------------- |
+| {{SpecName('ESDraft', '#sec-while-statement', 'while statement')}} | {{Spec2('ESDraft')}} |                     |
+| {{SpecName('ES6', '#sec-while-statement', 'while statement')}}     | {{Spec2('ES6')}}         |                     |
+| {{SpecName('ES5.1', '#sec-12.6.2', 'while statement')}}                 | {{Spec2('ES5.1')}}     |                     |
+| {{SpecName('ES3', '#sec-12.6.2', 'while statement')}}                 | {{Spec2('ES3')}}         |                     |
+| {{SpecName('ES1', '#sec-12.6.1', 'while statement')}}                 | {{Spec2('ES1')}}         | Définition initiale |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.statements.while")}}
+
+## Voir aussi
+
+- {{jsxref("Instructions/do...while","do...while")}}
+- {{jsxref("Instructions/for", "for")}}
diff --git a/files/fr/web/javascript/reference/statements/with/index.html b/files/fr/web/javascript/reference/statements/with/index.html
deleted file mode 100644
index 7215a32ed2..0000000000
--- a/files/fr/web/javascript/reference/statements/with/index.html
+++ /dev/null
@@ -1,134 +0,0 @@
----
-title: with
-slug: Web/JavaScript/Reference/Statements/with
-tags:
-  - Déprécié
-  - Instruction
-  - JavaScript
-  - Reference
-translation_of: Web/JavaScript/Reference/Statements/with
-original_slug: Web/JavaScript/Reference/Instructions/with
----
-<div>{{jsSidebar("Statements")}}</div>
-
-<div class="warning"><p><strong>Attention :</strong>Il n'est pas recommandé d'utiliser l'instruction <code>with</code>. En effet, elle est parfois source de problèmes de compatibilité ou de bogues. Se référer au paragraphe « Inconvénient : l'ambiguïté » de la section « Description » pour plus de détails.</p></div>
-
-<p>L'instruction <strong><code>with</code></strong> permet d'étendre la portée chaînée d'une instruction.</p>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">with (expression) {
-  instruction
-}
-</pre>
-
-<dl>
- <dt><code>expression</code></dt>
- <dd>L'expression fournie est ajoutée à la portée chaînée utilisée lors de l'évaluation de l'instruction. Les parenthèses sont obligatoires.</dd>
- <dt><code>instruction</code></dt>
- <dd>N'importe quelle instruction. Afin d'utiliser plusieurs instructions, on peut utiliser un bloc d'instructions ({ ... }) pour les regrouper.</dd>
-</dl>
-
-<h2 id="Description">Description</h2>
-
-<p>Dès qu'un nom non-qualifié est utilisé, JavaScript cherche dans la chaîne des portées associée à l'exécution une fonction ou un script qui contiendrait ce nom. L'instruction <code>with</code> ajoute l'objet donné à la tête de la chaîne des portées lors de l'évaluation des instructions qu'elle contient. Si un nom non-qualifié est utilisé parmi ces instructions correspond à une propriété de la chaîne des portées, le nom sera alors lié à la propriété et à l'objet contenant cette propriété, sinon une erreur <code>ReferenceError</code> est renvoyée.</p>
-
-<div class="note"><p><strong>Note :</strong> L'utilisation de l'instruction <code>with</code> n'est pas recommandée et est interdite dans le <a href="/fr/docs/Web/JavaScript/Reference/Strict_mode">mode strict</a> d'ECMAScript 5. L'alternative recommandée est d'assigner l'objet utilisant les propriétés désirées à une variable temporaire.</p></div>
-
-<h3 id="Avantages_et_inconvénients_les_performances">Avantages et inconvénients : les performances</h3>
-
-<ul>
- <li><strong>Avantage :</strong> l'instruction <code>with</code> permet de réduire la taille d'un fichier en réduisant la répétition d'un objet dont la dénomination est longue, et ce sans qu'il y ait d'impact sur les performances. Le changement apporté à la chaîne des portées ne représente pas un ajout de complexité important. Utiliser l'instruction de <code>with</code> soulagera l'interpréteur lors de l'analyses des références objets potentiellement longues. On notera que l'alternative présentée ci-dessus permet également d'aboutir à ces avantages.</li>
- <li><strong>Inconvénient :</strong> en utilisant <code>with</code>, l'objet spécifié sera utilisé à chaque fois en premier lors de la recherche des noms. Ainsi, tous les identifiants qui ne sont pas des membres de l'objet donné à l'instruction seront trouvés plus lentement. Quand il s'agit d'obtenir de bonnes performances, l'instruction <code>with</code> devrait seulement être utilisée pour englober des fragments de codes où il n'y a que des accès à des membres de l'objet spécifié.</li>
-</ul>
-
-<h3 id="Inconvénient_l'ambiguïté">Inconvénient : l'ambiguïté</h3>
-
-<ul>
- <li><strong>Inconvénient :</strong> l'instruction <code>with</code> peut rendre plus compliquée, que ce soit pour un humain ou un compilateur, la recherche d'un nom non-qualifié le long de la chaîne des portées. Ainsi, avec cet exemple :
-
-  <pre class="brush: js">function f(x, o) {
-  with (o)
-    console.log(x);
-}</pre>
-
-  <p>ce n'est que quand <code>f</code> est appelée que <code>x</code> est trouvé ou non, s'il est trouvé à partir de <code>o</code> ou (si o n'a pas de telle propriété) dans l'objet d'activation de <code>f </code>où <code>x</code> représente le premier argument de la fonction. Si <code>x</code> n'est pas défini dans l'objet passé en second argument, il n'y aura pas d'erreur renvoyée, juste des résultats imprévus.</p>
- </li>
- <li><strong>Inconvénient :</strong> Du code utilisant l'instruction <code>with</code> pourrait ne pas être compatible dans le futur, en particulier lorsqu'il est utilisé avec autre chose qu'un objet simple. Par exemple :
-  <div>
-  <pre class="brush:js">function f(toto, values) {
-  with (toto) {
-    console.log(values)
-  }
-}
-</pre>
-
-  <p>Si vous appelez <code>f([1,2,3], obj)</code> dans un environnement ECMAScript 5, la référence à <code>values</code> à l'intérieur de l'instruction <code>with</code> sera liée avec <code>obj</code>. Cependant, ECMAScript 2015 (ES6) a introduit une propriété <code>values</code> pour {{jsxref("Array.prototype")}} (afin qu'elle soit disponible pour chaque tableau). Dans un environnement ECMAScript 2015, la référence à <code>values</code> utilisée à l'intérieur de l'instruction <code>with</code> sera résolue avec <code>[1,2,3].values</code>.</p>
-  </div>
- </li>
-</ul>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Utiliser_with">Utiliser <code>with</code></h3>
-
-<p>L'instruction <code>with</code> suivante indique que l'objet {{jsxref("Math")}} est l'objet par défaut. Les instructions qui suivent font référence à la propriété {{jsxref("Math.PI")}} et aux méthodes {{jsxref("Math.cos()")}} et {{jsxref("Math.sin()")}}, sans objet spécifié. JavaScript utilise donc l'objet <code>Math</code> pour ces références.</p>
-
-<pre class="brush:js">var a, x, y;
-var r = 10;
-
-with (Math) {
-  a = PI * r * r;
-  x = r * cos(PI);
-  y = r * sin(PI / 2);
-}</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-with-statement', 'with statement')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-with-statement', 'Instruction with')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-12.10', 'Instruction with')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td>Désormais interdit en mode strict.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES3', '#sec-12.10', 'Instruction with')}}</td>
-   <td>{{Spec2('ES3')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES1', '#sec-12.10', 'Instruction with')}}</td>
-   <td>{{Spec2('ES1')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.statements.with")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Instructions/bloc", "Bloc d'instructions","",1)}}</li>
- <li>{{jsxref("Strict_mode","Mode strict","",1)}}</li>
- <li>{{jsxref("Symbol.unscopables")}}</li>
- <li>{{jsxref("Array.@@unscopables", "Array.prototype[@@unscopables]")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/statements/with/index.md b/files/fr/web/javascript/reference/statements/with/index.md
new file mode 100644
index 0000000000..52f8b053f2
--- /dev/null
+++ b/files/fr/web/javascript/reference/statements/with/index.md
@@ -0,0 +1,101 @@
+---
+title: with
+slug: Web/JavaScript/Reference/Statements/with
+tags:
+  - Déprécié
+  - Instruction
+  - JavaScript
+  - Reference
+translation_of: Web/JavaScript/Reference/Statements/with
+original_slug: Web/JavaScript/Reference/Instructions/with
+---
+{{jsSidebar("Statements")}}
+
+> **Attention :**Il n'est pas recommandé d'utiliser l'instruction `with`. En effet, elle est parfois source de problèmes de compatibilité ou de bogues. Se référer au paragraphe « Inconvénient : l'ambiguïté » de la section « Description » pour plus de détails.
+
+L'instruction **`with`** permet d'étendre la portée chaînée d'une instruction.
+
+## Syntaxe
+
+    with (expression) {
+      instruction
+    }
+
+- `expression`
+  - : L'expression fournie est ajoutée à la portée chaînée utilisée lors de l'évaluation de l'instruction. Les parenthèses sont obligatoires.
+- `instruction`
+  - : N'importe quelle instruction. Afin d'utiliser plusieurs instructions, on peut utiliser un bloc d'instructions ({ ... }) pour les regrouper.
+
+## Description
+
+Dès qu'un nom non-qualifié est utilisé, JavaScript cherche dans la chaîne des portées associée à l'exécution une fonction ou un script qui contiendrait ce nom. L'instruction `with` ajoute l'objet donné à la tête de la chaîne des portées lors de l'évaluation des instructions qu'elle contient. Si un nom non-qualifié est utilisé parmi ces instructions correspond à une propriété de la chaîne des portées, le nom sera alors lié à la propriété et à l'objet contenant cette propriété, sinon une erreur `ReferenceError` est renvoyée.
+
+> **Note :** L'utilisation de l'instruction `with` n'est pas recommandée et est interdite dans le [mode strict](/fr/docs/Web/JavaScript/Reference/Strict_mode) d'ECMAScript 5. L'alternative recommandée est d'assigner l'objet utilisant les propriétés désirées à une variable temporaire.
+
+### Avantages et inconvénients : les performances
+
+- **Avantage :** l'instruction `with` permet de réduire la taille d'un fichier en réduisant la répétition d'un objet dont la dénomination est longue, et ce sans qu'il y ait d'impact sur les performances. Le changement apporté à la chaîne des portées ne représente pas un ajout de complexité important. Utiliser l'instruction de `with` soulagera l'interpréteur lors de l'analyses des références objets potentiellement longues. On notera que l'alternative présentée ci-dessus permet également d'aboutir à ces avantages.
+- **Inconvénient :** en utilisant `with`, l'objet spécifié sera utilisé à chaque fois en premier lors de la recherche des noms. Ainsi, tous les identifiants qui ne sont pas des membres de l'objet donné à l'instruction seront trouvés plus lentement. Quand il s'agit d'obtenir de bonnes performances, l'instruction `with` devrait seulement être utilisée pour englober des fragments de codes où il n'y a que des accès à des membres de l'objet spécifié.
+
+### Inconvénient : l'ambiguïté
+
+- **Inconvénient :** l'instruction `with` peut rendre plus compliquée, que ce soit pour un humain ou un compilateur, la recherche d'un nom non-qualifié le long de la chaîne des portées. Ainsi, avec cet exemple :
+
+  ```js
+    function f(x, o) {
+      with (o)
+        console.log(x);
+    }
+    ```
+
+  ce n'est que quand `f` est appelée que `x` est trouvé ou non, s'il est trouvé à partir de `o` ou (si o n'a pas de telle propriété) dans l'objet d'activation de `f `où `x` représente le premier argument de la fonction. Si `x` n'est pas défini dans l'objet passé en second argument, il n'y aura pas d'erreur renvoyée, juste des résultats imprévus.
+
+- **Inconvénient :** Du code utilisant l'instruction `with` pourrait ne pas être compatible dans le futur, en particulier lorsqu'il est utilisé avec autre chose qu'un objet simple. Par exemple :
+
+  ```js
+    function f(toto, values) {
+      with (toto) {
+        console.log(values)
+      }
+    }
+    ```
+
+  Si vous appelez `f([1,2,3], obj)` dans un environnement ECMAScript 5, la référence à `values` à l'intérieur de l'instruction `with` sera liée avec `obj`. Cependant, ECMAScript 2015 (ES6) a introduit une propriété `values` pour {{jsxref("Array.prototype")}} (afin qu'elle soit disponible pour chaque tableau). Dans un environnement ECMAScript 2015, la référence à `values` utilisée à l'intérieur de l'instruction `with` sera résolue avec `[1,2,3].values`.
+
+## Exemples
+
+### Utiliser `with`
+
+L'instruction `with` suivante indique que l'objet {{jsxref("Math")}} est l'objet par défaut. Les instructions qui suivent font référence à la propriété {{jsxref("Math.PI")}} et aux méthodes {{jsxref("Math.cos()")}} et {{jsxref("Math.sin()")}}, sans objet spécifié. JavaScript utilise donc l'objet `Math` pour ces références.
+
+```js
+var a, x, y;
+var r = 10;
+
+with (Math) {
+  a = PI * r * r;
+  x = r * cos(PI);
+  y = r * sin(PI / 2);
+}
+```
+
+## Spécifications
+
+| Spécification                                                                        | État                         | Commentaires                       |
+| ------------------------------------------------------------------------------------ | ---------------------------- | ---------------------------------- |
+| {{SpecName('ESDraft', '#sec-with-statement', 'with statement')}} | {{Spec2('ESDraft')}} |                                    |
+| {{SpecName('ES6', '#sec-with-statement', 'Instruction with')}} | {{Spec2('ES6')}}         |                                    |
+| {{SpecName('ES5.1', '#sec-12.10', 'Instruction with')}}             | {{Spec2('ES5.1')}}     | Désormais interdit en mode strict. |
+| {{SpecName('ES3', '#sec-12.10', 'Instruction with')}}             | {{Spec2('ES3')}}         |                                    |
+| {{SpecName('ES1', '#sec-12.10', 'Instruction with')}}             | {{Spec2('ES1')}}         | Définition initiale.               |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.statements.with")}}
+
+## Voir aussi
+
+- {{jsxref("Instructions/bloc", "Bloc d'instructions","",1)}}
+- {{jsxref("Strict_mode","Mode strict","",1)}}
+- {{jsxref("Symbol.unscopables")}}
+- {{jsxref("Array.@@unscopables", "Array.prototype[@@unscopables]")}}
diff --git a/files/fr/web/javascript/reference/strict_mode/index.html b/files/fr/web/javascript/reference/strict_mode/index.html
deleted file mode 100644
index 46af582e3f..0000000000
--- a/files/fr/web/javascript/reference/strict_mode/index.html
+++ /dev/null
@@ -1,378 +0,0 @@
----
-title: Le mode strict
-slug: Web/JavaScript/Reference/Strict_mode
-tags:
-  - ECMAScript 5
-  - JavaScript
-  - Reference
-  - Strict Mode
-translation_of: Web/JavaScript/Reference/Strict_mode
----
-<div>{{JsSidebar("More")}}</div>
-
-<p>Le mode strict de <a class="external" href="https://www.ecma-international.org/publications/standards/Ecma-262.htm">ECMAScript 5</a> permet de choisir une variante restrictive de JavaScript. Le mode strict n'est pas seulement un sous-ensemble de JavaScript : il possède <em>intentionnellement</em> des sémantiques différentes du code normal. Les navigateurs ne supportant pas le mode strict exécuteront le code d'une façon légèrement différente de ceux le supportant, il ne faut donc pas compter sur le mode strict pour éviter des tests sur les navigateurs qui ne le supportent pas. Les codes en mode strict et en mode non-strict peuvent coexister, ce qui permet de réécrire les scripts en mode strict de façon incrémentale.</p>
-
-<p>Le mode strict apporte quelques changements à la sémantique « normale » de JavaScript:</p>
-
-<ol>
- <li>Le mode strict élimine quelques erreurs silencieuses de JavaScript en les changeant en erreurs explicites (une exception sera levée).</li>
- <li>Le mode strict corrige les erreurs qui font qu'autrement il est difficile pour les moteurs JavaScript d'effectuer des optimisations. Le code sera donc exécuté plus rapidement en mode strict, sans changer une seule ligne si cela n'est pas nécessaire.</li>
- <li>Le mode strict interdit les mot-clés susceptibles d'être définis dans les futures versions de ECMAScript.</li>
-</ol>
-
-<p>Voir la page <a href="/fr/docs/Web/JavaScript/Reference/Strict_mode/Passer_au_mode_strict">Passer au mode strict</a> pour plus de détails quant à la migration d'une base de code non-stricte vers une base de code compatible avec le mode strict.</p>
-
-<div class="note"><p><strong>Note :</strong> Le mode non strict (celui actif par défaut) est parfois appelé « <em>sloppy mode</em> » en anglais. Bien que ce ne soit pas la dénomination officielle, on la rencontre occasionnellement.</p>
-</div>
-
-<h2 id="Invoquer_le_mode_strict">Invoquer le mode strict</h2>
-
-<p>Le mode strict s'applique à des <em>scripts entiers</em> ou à des <em>fonctions individuelles</em>. Il ne peut s'appliquer à des blocs d'instructions entourés d'accolades <code>{}</code>; essayer de l'appliquer dans ces contextes ne fera rien. Les codes présents dans {{jsxref("Objets_globaux/eval","eval()")}}, {{jsxref("Function")}}, les attributs d'événements et les chaînes passées à <a href="/fr/docs/Web/API/WindowTimers/setTimeout"><code>setTimeout</code></a>, ou autres sont des scripts entiers, et invoquer le mode strict à l'intérieur de ceux-ci fonctionnera comme prévu.</p>
-
-<h3 id="Le_mode_strict_pour_les_scripts">Le mode strict pour les scripts</h3>
-
-<p>Pour invoquer le mode strict pour un script entier, on ajoutera l'instruction exacte <code>"use strict";</code> (ou <code>'use strict';</code>) avant toutes les autres instructions.</p>
-
-<pre class="brush: js">// Script entier en mode strict
-"use strict";
-var v = "Allo ! Je suis en mode strict !";
-</pre>
-
-<p>Cette syntaxe possède un piège dans lequel <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=579119">est déjà tombé</a> un site web connu : il n'est pas possible de concaténer du script en mode strict et du code en mode non-strict. En effet, si on concatène du code non-strict à la suite d'un code strict, tout le code sera considéré comme strict. De même si on concatène du code strict à la suite d'un code non-strict, le code entier aura l'air non-strict. Ainsi, on peut concaténer entre eux des codes stricts sans aucun problème et de même concaténer uniquement des codes non-stricts sans problème. En revanche, lorsqu'on mélange les deux, cela pose un problème. Lors d'une phase de transition, il est donc recommandé de n'activer le mode strict que fonction par fonction.</p>
-
-<p>Il est aussi possible d'adopter une approche qui consiste à englober le code du script dans une fonction et à donner à cette dernière le mode strict. Ce procédé élimine le problème de concaténation mais cela signifie aussi qu'on doit exporter chaque variable globale hors de la fonction principale nouvellement créée.</p>
-
-<h3 id="Le_mode_strict_pour_les_fonctions">Le mode strict pour les fonctions</h3>
-
-<p>De même, pour activer le mode strict pour une fonction, on placera l'instruction exacte <code>"use strict";</code> (ou <code>'use strict';</code>) dans le corps de la fonction avant toute autre déclaration.</p>
-
-<pre class="brush: js">function strict() {
-  // Syntaxe en mode strict au niveau de la fonction
-  'use strict';
-  function nested() { return "Ho que oui, je le suis !"; }
-  return "Allô ! Je suis une fonction en mode strict ! " + nested();
-}
-function notStrict() { return "Je ne suis pas strict."; }
-</pre>
-
-<h3 id="Mode_strict_pour_les_modules">Mode strict pour les modules</h3>
-
-<p>ECMAScript 2015 a vu apparaître les modules JavaScript. Le code de ces modules est automatiquement en mode strict et aucune instruction n'est nécessaire pour passer dans ce mode.</p>
-
-<pre class="brush: js">function maFonctionDeModule() {
-  // étant dans un module, le code présent
-  // ici sera d'office en mode strict
-}
-export default maFonctionDeModule;</pre>
-
-<h2 id="Différences_du_mode_strict">Différences du mode strict</h2>
-
-<p>Le mode strict modifie à la fois la syntaxe et le comportement à l'exécution. Les changements se déclinent généralement en trois catégories : ceux qui convertissent les fautes en erreurs (comme des erreurs de syntaxe ou les erreurs d'exécution), ceux qui simplifient comment une variable pour un nom donné est traitée, simplifiant {{jsxref("Objets_globaux/eval","eval()")}} et {{jsxref("Fonctions/arguments","arguments")}} et ceux qui permettent d'écrire plus simplement du code JavaScript pérenne qui anticipe les évolutions futures d'ECMAScript.</p>
-
-<h3 id="Convertir_les_fautes_en_erreurs">Convertir les fautes en erreurs</h3>
-
-<p>Le mode strict change quelques fautes précédemment acceptées, en erreurs. JavaScript a été conçu pour les développeurs novices et, quelquefois, il ne crée pas d'erreur explicite pour certaines instructions qui devraient être des erreurs. Parfois cela règle un problème immédiatement, mais cela peut aussi créer d'autres erreurs, plus loin dans le code. Le mode strict traite ces fautes comme des erreurs afin qu'elles soient découvertes et rapidement traitées.</p>
-
-<p>Premièrement, en mode strict, il est impossible de créer accidentellement des variables globales. En mode normal, ne pas déclarer une variable lors d'une affectation (oublier l'instruction {{jsxref("Instructions/var","var")}}) crée une nouvelle propriété sur l'objet global et le code continue de fonctionner (même si ça peut être une source de problèmes par la suite). Les affectations qui pourraient accidentellement créer des variables globales lèveront une erreur en mode strict:</p>
-
-<pre class="brush: js">"use strict";
-varialeMalDéclarée = 17; // lève une ReferenceError
-</pre>
-
-<p>Deuxièmement, le mode strict fait en sorte que les affectations qui échoueraient silencieusement lèveront aussi une exception. Par exemple, {{jsxref("Objets_globaux/NaN","NaN")}} est une variable globale en lecture seule. En mode normal, une affectation à <code>NaN</code> ne fera rien ; le développeur ne recevra aucun retour par rapport à cette faute. En mode strict, affecter une valeur quelconque à <code>NaN</code> lèvera une exception. Toute affectation qui échouera silencieusement en mode non-strict (affectation à une propriété en lecture seule, affectation à une propriété sans méthode <code>set</code>, affectation à une nouvelle propriété sur un objet <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object/preventExtensions">non-extensible</a>) lèvera une exception en mode strict :</p>
-
-<pre class="brush: js">"use strict";
-
-// Affectation à une propriété globale en lecture seule
-var undefined = 5;  // déclenche une exception TypeError
-var Infinity = 5;   // déclenche une exception TypeError
-
-// Affectation à une propriété en lecture seule
-var obj1 = {};
-Object.defineProperty(obj1, "x", { value: 42, writable: false });
-obj1.x = 9; // lève un TypeError
-
-// Affectation à une propriété qui n'a qu'une méthode get
-var obj2 = { get x() { return 17; } };
-obj2.x = 5; // lève un TypeError
-
-// Affectation d'une nouvelle propriété à un objet non-extensible
-var gele= {};
-Object.preventExtensions(gele);
-gele.nouvelleProp = "ohé"; // lève un TypeError
-</pre>
-
-<p>Troisièmement, le mode strict lèvera une exception lors d'une tentative de suppression d'une propriété non-supprimable (là où cela ne produisait aucun effet en mode non strict) :</p>
-
-<pre class="brush: js">"use strict";
-delete Object.prototype; // lève une TypeError
-</pre>
-
-<p>Quatrièmement, le mode strict, avant Gecko 34, requiert que toutes les propriétés nommées dans un objet littéral soient uniques. En mode non-strict, les propriétés peuvent être spécifiées deux fois, JavaScript ne retenant que la dernière valeur de la propriété. Cette duplication en devient alors une source de confusion, surtout dans le cas où, dans une modification de ce même code, on se met à changer la valeur de la propriété autrement qu'en changeant la dernière instance. Les noms de propriété en double sont une erreur de syntaxe en mode strict :</p>
-
-<pre class="brush: js">"use strict";
-var o = { p: 1, p: 2 }; // !!! erreur de syntaxe
-</pre>
-
-<div class="note">
-<p><strong>Note :</strong> Cela n'est plus le cas avec ECMAScript 2015 ({{bug(1041128)}}).</p>
-</div>
-
-<p>Cinquièmement, le mode strict requiert que les noms de paramètres de fonction soient uniques. En mode non-strict, le dernier argument dupliqué cache les arguments précédents ayant le même nom. Ces arguments précédents demeurent disponibles via <code>arguments[i]</code>, ils ne sont donc pas complètement inaccessibles. Pourtant, cette cachette n'a guère de sens et n'est probablement pas souhaitable (cela pourrait cacher une faute de frappe, par exemple). Donc en mode strict, les doublons de noms d'arguments sont une erreur de syntaxe :</p>
-
-<pre class="brush: js">function somme(a, a, c) { // !!! erreur de syntaxe
-  "use strict";
-  return a + b + c; // Ce code va planter s'il est exécuté
-}
-</pre>
-
-<p>Sixièmement, le mode strict interdit la syntaxe octale. La syntaxe octale ne fait pas partie d'ECMAScript 5, mais elle est supportée dans tous les navigateurs en préfixant le nombre octal d'un zéro : <code>0644 === 420</code> et <code>"\045" === "%"</code>. La notation octale est supportée en utilisant le préfixe "<code>0o</code>" :</p>
-
-<pre class="brush: js">let a = 0o10; // Notation octale ES2015</pre>
-
-<p>Les développeurs novices croient parfois qu'un zéro débutant un nombre n'a pas de signification sémantique, alors ils l'utilisent comme moyen d'aligner des colonnes de nombres mais ce faisant, ils changent la valeur du nombre ! La syntaxe octale est rarement utile et peut être utilisée de manière fautive, donc le mode strict le considère comme étant une erreur de syntaxe :</p>
-
-<pre class="brush: js">"use strict";
-var somme = 015 + // !!! erreur de syntaxe
-            197 +
-            142;
-</pre>
-
-<p>Septièmement, le mode strict, à partir d'ECMAScript 2015 interdit de définir des propriétés sur des valeurs primitives. Sans mode strict, de telles définitions sont ignorées. En activant le mode strict cela lèvera une exception {{jsxref("TypeError")}}.</p>
-
-<pre class="brush: js">(function() {
-"use strict";
-
-false.true = "";         // TypeError
-(14).calvados= "maison";     // TypeError
-"une chaîne".de = "caractères"; // TypeError
-
-})();</pre>
-
-<h3 id="Simplifier_l'utilisation_des_variables">Simplifier l'utilisation des variables</h3>
-
-<p>Le mode strict simplifie la façon dont les noms de variables sont mis en correspondance avec les définitions de variables dans le code. De nombreuses optimisations du compilateur reposent sur la capacité à dire à quel endroit la variable <em>X</em> est stockée : cela est essentiel pour optimiser pleinement le code JavaScript. JavaScript rend parfois cette mise en correspondance impossible à réaliser avant l'exécution du code. Le mode strict élimine la plupart des cas où cela se produit, de sorte que le compilateur peut mieux optimiser le code en mode strict.</p>
-
-<p>Premièrement, le mode strict interdit l'utilisation de <code>with</code>. Le problème avec <code>with</code> est que tout nom de variable à l'intérieur du bloc peut faire référence à une propriété de l'objet qui lui est passé, ou encore à une variable déclarée à l'extérieur du bloc, globale ou non, à l'exécution : il est impossible de le savoir d'avance. Le mode strict fait de <code>with</code> une erreur de syntaxe, donc il n'y a aucune chance pour qu'un nom déclaré dans un <code>with</code> fasse référence à un lieu inconnu à l'exécution :</p>
-
-<pre class="brush: js">"use strict";
-var x = 17;
-with (obj) // !!! erreur de syntaxe
-{
-  // Si on n'était pas en mode strict, serait-ce var x,
-  // ou serait-ce plutôt obj.x?  Il est impossible en général
-  // de le dire sans faire tourner le code, donc
-  // le nom ne peut pas être optimisé.
-  x;
-}
-</pre>
-
-<p>Au lieu d'utiliser <code>with</code>, on peut très bien assigner l'objet à une variable avec un nom court, puis accéder aux propriétés correspondantes à cette variable.</p>
-
-<p>Deuxièmement, <a class="external" href="https://whereswalden.com/2011/01/10/new-es5-strict-mode-support-new-vars-created-by-strict-mode-eval-code-are-local-to-that-code-only/"><code>eval</code> en mode strict ne doit pas créer de variables dont la portée dépasse celle du <code>eval</code></a>. En mode non-strict, <code>eval("var x;")</code> crée la variable <code>x</code> dans le code appelant <code>eval</code>. Ce qui signifie qu'en général, dans une fonction contenant un appel à <code>eval</code>, tous les noms qui ne réfèrent pas à un paramètre ou une variable locale devront être mis en correspondance avec une définition de variable lors de l'exécution (puisque cet <code>eval</code> a introduit une nouvelle variable qui serait susceptible de modifier la variable externe). En mode strict, <code>eval</code> ne crée des variables que pour le code étant évalué, ainsi <code>eval</code> ne peut pas réaliser d'affectation à une variable externe ou à une variable locale :</p>
-
-<pre class="brush: js">var x = 17;
-var evalX = eval("'use strict'; var x = 42; x");
-console.log(x === 17);
-console.log(evalX === 42);
-</pre>
-
-<p>De la même manière, si la fonction <code>eval</code> est invoquée par une expression de la forme <code>eval(...)</code> dans un code en mode strict, le code sera aussi évalué en mode strict. Le code peut déclarer explicitement le mode strict, mais il est inutile de le faire.</p>
-
-<pre class="brush: js">function strict1(str) {
-  "use strict";
-  return eval(str); // str sera évalué en mode strict
-}
-function strict2(f, str) {
-  "use strict";
-  return f(str); // pas de eval(...) : str est strict si et seulement si il est déclaré en mode strict
-}
-function nonstrict(str) {
-  return eval(str); // str est strict si et seulement si il est déclaré en mode strict
-}
-
-strict1("'Mode strict!'");
-strict1("'use strict'; 'Mode strict!'");
-strict2(eval, "'Mode non-strict.'");
-strict2(eval, "'use strict'; 'Mode strict!'");
-nonstrict("'Mode non-strict.'");
-nonstrict("'use strict'; 'Mode strict!'");
-</pre>
-
-<p>Ainsi, les noms dans le code <code>eval</code> en mode strict se comportent de la même façon que les noms dans le code en mode strict n'étant pas évalués comme le résultat de <code>eval</code>.</p>
-
-<p>Troisièmement, le mode strict interdit la suppression des variables déclarées. <code>delete name</code> en mode strict est une erreur de syntaxe:</p>
-
-<pre class="brush: js">"use strict";
-eval("var x; delete x;"); // !!! erreur de syntaxe
-</pre>
-
-<h3 id="Rendre_eval_et_arguments_plus_simples">Rendre <code>eval</code> et <code>arguments</code> plus simples</h3>
-
-<p>Le mode strict rend {{jsxref("Fonctions/arguments","arguments")}} et {{jsxref("Objets_globaux/eval","eval()")}} moins « étranges ». Les deux impliquent une quantité de comportements étranges dans le code en mode non-strict : <code>eval</code> afin d'ajouter et d'enlever des liaisons et pour changer les valeurs de liaisons, et <code>arguments</code> via ses propriétés indexées faisant référence à des arguments nommés. Le mode strict permet de mieux traîter <code>eval</code> et <code>arguments</code> comme des mots-clés à part entière, bien qu'une <em>réparation</em> complète ne devrait pas arriver avant une version future d'ECMAScript.</p>
-
-<p>Premièrement, les chaînes <code>eval</code> et <code>arguments</code> ne peuvent pas être utilisées comme identificateur. Tous les exemples suivants entraînent des erreurs de syntaxe :</p>
-
-<pre class="brush: js">"use strict";
-eval = 17;
-arguments++;
-++eval;
-var obj = { set p(arguments) { } };
-var eval;
-try { } catch (arguments) { }
-function x(eval) { }
-function arguments() { }
-var y = function eval() { };
-var f = new Function("arguments", "'use strict'; return 17;");
-</pre>
-
-<p>Deuxièmement, en mode strict on ne donnera pas d'alias aux propriétés de <code>arguments</code> avec les objets créées dans la fonction. En code normal, dans une fonction dont le premier argument est <code>arg</code>, modifier <code>arg</code> modifiera aussi <code>arguments[0]</code>, et vice versa (à moins qu'aucun argument ne soit fourni ou que <code>arguments[0]</code> soit supprimé). Les objets de <code>arguments</code> pour les fonctions en mode strict stockent les argument originaux, au moment où la fonction a été appelée. <code>arguments[i]</code> ne reflète pas la valeur de l'argument nommé correspondant, et vice-versa.</p>
-
-<pre class="brush: js">function f(a) {
-  "use strict";
-  a = 42;
-  return [a, arguments[0]];
-}
-var pair = f(17);
-console.log(pair[0] === 42);
-console.log(pair[1] === 17);
-</pre>
-
-<p>Troisièmement, <code>arguments.callee</code> n'est plus supporté. En temps normal <code>arguments.callee</code> contient la référence de la fonction courante. Il suffit d'appeler la fonction courante par son nom si elle n'est pas anonyme. <code>arguments.callee</code> en mode strict est une propriété non supprimable qui lèvera une erreur si elle est définie ou récupérée :</p>
-
-<pre class="brush: js">"use strict";
-var f = function() { return arguments.callee; };
-f(); // lève une TypeError
-</pre>
-
-<h3 id="«_Sécuriser_»_JavaScript">« Sécuriser » JavaScript</h3>
-
-<p>Le mode strict permet d'écrire plus simplement du code JavaScript sûr. Certains sites web fournissent aujourd'hui des outils pour que les utilisateurs puissent écrire du JavaScript qui sera exécuté sur le site pour les autres utilisateurs. Dans un navigateur web, le JavaScript peut accéder à certaines informations privées de l'utilisateur. Il faut donc transformer le JavaScript écrit par un utilisateur externe pour que le code correspondant soit exécuté de façon sécurisée pour les autres utilisateurs. Pour ce faire, il faut effectuer des vérifications au moment de l'exécution. En effet, JavaScript est suffisamment flexible pour que vérifier du code avant l'exécution soit très complexe voire impossible. En revanche, vérifier le comportement du code lors de l'exécution a un coût sur les performances. Pour réduire ce nombre de vérifications et bénéficier de meilleures performances dans ce scénario, on peut restreindre le code qui peut être envoyé à du code en mode strict.</p>
-
-<p>Tout d'abord, la valeur passée en tant que <code>this</code> à une fonction n'est pas nécessairement transformée en un objet en mode strict. Pour une fonction « normale », <code>this</code> est toujours un objet : soit l'objet fourni si la valeur fournie pour <code>this</code> était un objet, soit la valeur, transformée en un objet quand c'est un booléen, une chaîne de caractères ou un nombre. Cette valeur peut également être l'objet global si <code>this</code> vaut <code>null</code> ou <code>undefined</code> lorsqu'il est passé à la fonction. (Les fonctions {{jsxref("Function.prototype.call()")}}, {{jsxref("Function.prototype.apply()")}} ou {{jsxref("Function.prototype.bind()")}} peuvent être utilisées lorsqu'on souhaite spécifier une certaine valeur pour <code>this</code>.) Cette conversion automatique en objet a un certain coût en termes de performances mais cela peut également exposer l'objet global ce qui est dangereux dans les navigateurs : en effet, l'objet global permet d'accéder à certaines fonctionnalités qui rendraient le code non-sécurisé. Ainsi, en mode strict, la valeur <code>this</code> n'est pas transformée en un objet et si elle n'est pas définie, <code>this</code> sera {{jsxref("undefined")}} :</p>
-
-<pre class="brush: js">"use strict";
-function fun() { return this; }
-console.log(fun() === undefined);
-console.log(fun.call(2) === 2);
-console.log(fun.apply(null) === null);
-console.log(fun.call(undefined) === undefined);
-console.log(fun.bind(true)() === true);
-</pre>
-
-<p>Cela signifie entre autres qu'il est impossible de faire référence à l'objet <code>window</code> du navigateur grâce à <code>this</code> au sein d'une fonction en mode strict.</p>
-
-<p>Ensuite, en mode strict, il n'est plus possible de remonter la pile d'appels grâce aux extensions communément implémentées. Par exemple, dans du code non strict, lorsqu'une fonction <code>fun</code> est en train d'être appelée, <code>fun.caller</code> fait référence à la fonction qui a appelé <code>fun</code> la dernière et <code>fun.arguments</code> correspond à l'objet <code>arguments</code> pour cet appel à <code>fun</code>. Ces deux extensions posent problème pour la sécurité car elles permettent au code d'accéder à des fonctions privilégiées et à leurs arguments (éventuellement non sécurisés). Si <code>fun</code> est passée en mode strict, <code>fun.caller</code> et <code>fun.arguments</code> seront des propriétés non-supprimables qui lèveront une exception pour chaque tentative d'accès ou de modification :</p>
-
-<pre class="brush: js">function restricted()
-{
-  "use strict";
-  restricted.caller;    // lève une TypeError
-  restricted.arguments; // lève une TypeError
-}
-function privilegedInvoker()
-{
-  return restricted();
-}
-privilegedInvoker();
-</pre>
-
-<p>Enfin, pour une fonction en mode strict, <code>arguments</code> ne permet pas d'accéder aux variables passées à la fonction lors de l'appel. Dans certaines anciennes implémentations d'ECMAScript, <code>arguments.caller</code> était un objet dont les propriétés étaient des alias pour les variables passées à la fonction. Cela entraîne <a class="external" href="https://stuff.mit.edu/iap/2008/facebook/">un problème de sécurité</a> car cela empêche de cacher des valeurs privilégiées via l'abstraction des fonctions. Cela empêche aussi de nombreuses optimisations. Pour ces raisons, les navigateurs récents n'implémentent plus cet objet. Cependant, étant donné sa présence historique, en mode strict, <code>arguments.caller</code> est une propriété non-supprimable qui déclenche une exception pour toute tentative d'accès ou de modification :</p>
-
-<pre class="brush: js">"use strict";
-function fun(a, b)
-{
-  "use strict";
-  var v = 12;
-  return arguments.caller; // lève une TypeError
-}
-fun(1, 2); // n'expose pas v (ni a ou b)
-</pre>
-
-<h3 id="Prévoir_la_suite_les_prochaines_versions_d'ECMAScript">Prévoir la suite : les prochaines versions d'ECMAScript</h3>
-
-<p>Les prochaines versions d'ECMAScript inclueront certainement une nouvelle syntaxe, de nouveaux mots-clés. Le mode strict d'ECMAScript 5 applique certaines restrictions qui permettent de prévoir les transitions à venir lorsque des changements auront lieu. Il sera ainsi plus simple de modifier le code si les erreurs relatives à une nouvelle syntaxe sont mises en avant grâce au mode strict.</p>
-
-<p>Premièrement, en mode strict, une liste d'identifiants fait partie des mots-clés réservés. Ces termes sont : <code>implements</code>, <code>interface</code>, <code>let</code>, <code>package</code>, <code>private</code>, <code>protected</code>, <code>public</code>, <code>static</code>, et <code>yield</code>. En mode strict, il est donc impossible de nommer des variables ou des arguments avec ces noms.</p>
-
-<pre class="brush: js">function package(protected) { // !!!
-  "use strict";
-  var implements; // !!!
-
-  interface: // !!!
-  while (true) {
-    break interface; // !!!
-  }
-
-  function private() { } // !!!
-}
-function fun(static) { 'use strict'; } // !!!
-
-</pre>
-
-<p>Deux défauts liés à Mozilla Firefox : tout d'abord si votre code est en JavaScript 1.7 ou supérieur (par exemple pour du code qui concerne le chrome dans les extensions ou lorsqu'on utilise les balises <code>&lt;script type=""&gt;</code>) et qu'il est en mode strict, <code>let</code> et <code>yield</code> fonctionnent de la façon dont ils fonctionnaient originellement au sein de Firefox. En revanche, pour du code strict utilisé sur une page web et chargé avec <code>&lt;script src=""&gt;</code> ou <code>&lt;script&gt;...&lt;/script&gt;</code>, on ne pourra pas utiliser <code>let</code>/<code>yield</code> comme identifiants. Ensuite, bien qu'ES5 réserve les mots-clés <code>class</code>, <code>enum</code>, <code>export</code>, <code>extends</code>, <code>import</code>, et <code>super</code> pour le mode strict et le mode non strict, les versions antérieures à Firefox 5 ne réservaient ces mots-clés que pour le mode strict.</p>
-
-<p>Deuxièmement, <a class="external" href="https://whereswalden.com/2011/01/24/new-es5-strict-mode-requirement-function-statements-not-at-top-level-of-a-program-or-function-are-prohibited/">le mode strict interdit les déclarations de fonctions qui ne sont pas au niveau le plus haut d'un script ou d'une fonction</a>. En mode normal, il est possible de déclarer une fonction n'importe où avec une déclaration de fonction (voir {{jsxref("Instructions/function","function")}}). Ceci ne fait pas partie de la spécification ECMAScript et est donc une extension. <a class="external" href="https://wiki.ecmascript.org/doku.php?id=conventions:no_non_standard_strict_decls">Le mode strict interdit cela</a>, ce qui permet de lever toute ambiguité par rapport aux futures spécifications ECMAScript sur cette fonctionnalité.  On notera que les instructions de fonctions écrites en dehors du plus haut niveau sont autorisées avec ES2015 :</p>
-
-<pre class="brush: js">"use strict";
-if (true) {
-  function f() { } // !!! erreur de syntaxe
-  f();
-}
-
-for (var i = 0; i &lt; 5; i++) {
-  function f2() { } // !!! erreur de syntaxe
-  f2();
-}
-
-function truc() { // OK
-  function bidule() { } // OK également
-}
-</pre>
-
-<p>Cette interdiction n'est pas, à proprement parler, liée au mode strict. En effet, de telles déclarations de fonctions ne font pas partie d'ES5. Cependant, c'est un choix du comité ECMAScript que cette interdiction soit implémentée.</p>
-
-<h2 id="Le_mode_strict_dans_les_navigateurs">Le mode strict dans les navigateurs</h2>
-
-<p>Désormais, l'ensemble des navigateurs majeurs implémentent le mode strict. Cependant, il existe toujours un certain nombre de disparités et certains navigateurs actuels ou avec leurs anciennes versions ne supportent pas le mode strict. Le mode strict modifie des éléments de sémantique de JavaScript ; faire appel au mode strict pour des navigateurs qui ne le supportent pas peut donc entraîner des erreurs indésirables. Pour cette raison, il faut faire attention à la façon dont on exécute du code strict et bien tester ce code sur l'ensemble des navigateurs : ceux qui supportent le mode strict comme ceux qui ne supportent pas ce mode.</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-10.1.1', 'Strict Mode Code')}}<br>
-    {{SpecName('ES5.1', '#sec-C', 'Strict mode restriction and exceptions')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td>Définition initiale. Voir aussi : <a href="https://www.ecma-international.org/ecma-262/5.1/#sec-C">les restrictions du mode strict et les exceptions</a></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-strict-mode-code', 'Strict Mode Code')}}<br>
-    {{SpecName('ES2015', '#sec-strict-mode-of-ecmascript', 'Strict mode restriction and exceptions')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td><a href="https://www.ecma-international.org/ecma-262/6.0/#sec-strict-mode-of-ecmascript">Les restrictions du mode strict et les exceptions</a></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-strict-mode-code', 'Strict Mode Code')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td><a href="https://tc39.github.io/ecma262/#sec-strict-mode-of-ecmascript">Les restrictions du mode strict et les exceptions</a></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a class="external" href="https://whereswalden.com/2010/09/08/new-es5-strict-mode-support-now-with-poison-pills/">Where's Walden? » New ES5 strict mode support: now with poison pills!</a> (billet en anglais)</li>
- <li><a class="external" href="https://whereswalden.com/2011/01/24/new-es5-strict-mode-requirement-function-statements-not-at-top-level-of-a-program-or-function-are-prohibited/">Where's Walden? » New ES5 strict mode requirement: function statements not at top level of a program or function are prohibited</a> (billet en anglais)</li>
- <li><a class="external" href="https://whereswalden.com/2011/01/10/new-es5-strict-mode-support-new-vars-created-by-strict-mode-eval-code-are-local-to-that-code-only/">Where's Walden? » New ES5 strict mode support: new vars created by strict mode eval code are local to that code only</a> (billet en anglais)</li>
- <li><a class="external" href="https://ejohn.org/blog/ecmascript-5-strict-mode-json-and-more/">John Resig - ECMAScript 5 Strict Mode, JSON, and More</a> (billet en anglais)</li>
- <li><a class="external" href="https://dmitrysoshnikov.com/ecmascript/es5-chapter-2-strict-mode/">ECMA-262-5 in detail. Chapter 2. Strict Mode.</a> (billet en anglais)</li>
- <li><a class="external" href="https://kangax.github.io/compat-table/es5/#Strict_mode">Tableau de compatibilité pour le mode strict</a> (Kangax)</li>
- <li><a href="/fr/docs/Web/JavaScript/Reference/Strict_mode/Passer_au_mode_strict">Passer au mode strict</a></li>
-</ul>
diff --git a/files/fr/web/javascript/reference/strict_mode/index.md b/files/fr/web/javascript/reference/strict_mode/index.md
new file mode 100644
index 0000000000..ce165b7145
--- /dev/null
+++ b/files/fr/web/javascript/reference/strict_mode/index.md
@@ -0,0 +1,375 @@
+---
+title: Le mode strict
+slug: Web/JavaScript/Reference/Strict_mode
+tags:
+  - ECMAScript 5
+  - JavaScript
+  - Reference
+  - Strict Mode
+translation_of: Web/JavaScript/Reference/Strict_mode
+---
+{{JsSidebar("More")}}
+
+Le mode strict de [ECMAScript 5](https://www.ecma-international.org/publications/standards/Ecma-262.htm) permet de choisir une variante restrictive de JavaScript. Le mode strict n'est pas seulement un sous-ensemble de JavaScript : il possède _intentionnellement_ des sémantiques différentes du code normal. Les navigateurs ne supportant pas le mode strict exécuteront le code d'une façon légèrement différente de ceux le supportant, il ne faut donc pas compter sur le mode strict pour éviter des tests sur les navigateurs qui ne le supportent pas. Les codes en mode strict et en mode non-strict peuvent coexister, ce qui permet de réécrire les scripts en mode strict de façon incrémentale.
+
+Le mode strict apporte quelques changements à la sémantique « normale » de JavaScript:
+
+1.  Le mode strict élimine quelques erreurs silencieuses de JavaScript en les changeant en erreurs explicites (une exception sera levée).
+2.  Le mode strict corrige les erreurs qui font qu'autrement il est difficile pour les moteurs JavaScript d'effectuer des optimisations. Le code sera donc exécuté plus rapidement en mode strict, sans changer une seule ligne si cela n'est pas nécessaire.
+3.  Le mode strict interdit les mot-clés susceptibles d'être définis dans les futures versions de ECMAScript.
+
+Voir la page [Passer au mode strict](/fr/docs/Web/JavaScript/Reference/Strict_mode/Passer_au_mode_strict) pour plus de détails quant à la migration d'une base de code non-stricte vers une base de code compatible avec le mode strict.
+
+> **Note :** Le mode non strict (celui actif par défaut) est parfois appelé « _sloppy mode_ » en anglais. Bien que ce ne soit pas la dénomination officielle, on la rencontre occasionnellement.
+
+## Invoquer le mode strict
+
+Le mode strict s'applique à des _scripts entiers_ ou à des _fonctions individuelles_. Il ne peut s'appliquer à des blocs d'instructions entourés d'accolades `{}`; essayer de l'appliquer dans ces contextes ne fera rien. Les codes présents dans {{jsxref("Objets_globaux/eval","eval()")}}, {{jsxref("Function")}}, les attributs d'événements et les chaînes passées à [`setTimeout`](/fr/docs/Web/API/WindowTimers/setTimeout), ou autres sont des scripts entiers, et invoquer le mode strict à l'intérieur de ceux-ci fonctionnera comme prévu.
+
+### Le mode strict pour les scripts
+
+Pour invoquer le mode strict pour un script entier, on ajoutera l'instruction exacte `"use strict";` (ou `'use strict';`) avant toutes les autres instructions.
+
+```js
+// Script entier en mode strict
+"use strict";
+var v = "Allo ! Je suis en mode strict !";
+```
+
+Cette syntaxe possède un piège dans lequel [est déjà tombé](https://bugzilla.mozilla.org/show_bug.cgi?id=579119) un site web connu : il n'est pas possible de concaténer du script en mode strict et du code en mode non-strict. En effet, si on concatène du code non-strict à la suite d'un code strict, tout le code sera considéré comme strict. De même si on concatène du code strict à la suite d'un code non-strict, le code entier aura l'air non-strict. Ainsi, on peut concaténer entre eux des codes stricts sans aucun problème et de même concaténer uniquement des codes non-stricts sans problème. En revanche, lorsqu'on mélange les deux, cela pose un problème. Lors d'une phase de transition, il est donc recommandé de n'activer le mode strict que fonction par fonction.
+
+Il est aussi possible d'adopter une approche qui consiste à englober le code du script dans une fonction et à donner à cette dernière le mode strict. Ce procédé élimine le problème de concaténation mais cela signifie aussi qu'on doit exporter chaque variable globale hors de la fonction principale nouvellement créée.
+
+### Le mode strict pour les fonctions
+
+De même, pour activer le mode strict pour une fonction, on placera l'instruction exacte `"use strict";` (ou `'use strict';`) dans le corps de la fonction avant toute autre déclaration.
+
+```js
+function strict() {
+  // Syntaxe en mode strict au niveau de la fonction
+  'use strict';
+  function nested() { return "Ho que oui, je le suis !"; }
+  return "Allô ! Je suis une fonction en mode strict ! " + nested();
+}
+function notStrict() { return "Je ne suis pas strict."; }
+```
+
+### Mode strict pour les modules
+
+ECMAScript 2015 a vu apparaître les modules JavaScript. Le code de ces modules est automatiquement en mode strict et aucune instruction n'est nécessaire pour passer dans ce mode.
+
+```js
+function maFonctionDeModule() {
+  // étant dans un module, le code présent
+  // ici sera d'office en mode strict
+}
+export default maFonctionDeModule;
+```
+
+## Différences du mode strict
+
+Le mode strict modifie à la fois la syntaxe et le comportement à l'exécution. Les changements se déclinent généralement en trois catégories : ceux qui convertissent les fautes en erreurs (comme des erreurs de syntaxe ou les erreurs d'exécution), ceux qui simplifient comment une variable pour un nom donné est traitée, simplifiant {{jsxref("Objets_globaux/eval","eval()")}} et {{jsxref("Fonctions/arguments","arguments")}} et ceux qui permettent d'écrire plus simplement du code JavaScript pérenne qui anticipe les évolutions futures d'ECMAScript.
+
+### Convertir les fautes en erreurs
+
+Le mode strict change quelques fautes précédemment acceptées, en erreurs. JavaScript a été conçu pour les développeurs novices et, quelquefois, il ne crée pas d'erreur explicite pour certaines instructions qui devraient être des erreurs. Parfois cela règle un problème immédiatement, mais cela peut aussi créer d'autres erreurs, plus loin dans le code. Le mode strict traite ces fautes comme des erreurs afin qu'elles soient découvertes et rapidement traitées.
+
+Premièrement, en mode strict, il est impossible de créer accidentellement des variables globales. En mode normal, ne pas déclarer une variable lors d'une affectation (oublier l'instruction {{jsxref("Instructions/var","var")}}) crée une nouvelle propriété sur l'objet global et le code continue de fonctionner (même si ça peut être une source de problèmes par la suite). Les affectations qui pourraient accidentellement créer des variables globales lèveront une erreur en mode strict:
+
+```js
+"use strict";
+varialeMalDéclarée = 17; // lève une ReferenceError
+```
+
+Deuxièmement, le mode strict fait en sorte que les affectations qui échoueraient silencieusement lèveront aussi une exception. Par exemple, {{jsxref("Objets_globaux/NaN","NaN")}} est une variable globale en lecture seule. En mode normal, une affectation à `NaN` ne fera rien ; le développeur ne recevra aucun retour par rapport à cette faute. En mode strict, affecter une valeur quelconque à `NaN` lèvera une exception. Toute affectation qui échouera silencieusement en mode non-strict (affectation à une propriété en lecture seule, affectation à une propriété sans méthode `set`, affectation à une nouvelle propriété sur un objet [non-extensible](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object/preventExtensions)) lèvera une exception en mode strict :
+
+```js
+"use strict";
+
+// Affectation à une propriété globale en lecture seule
+var undefined = 5;  // déclenche une exception TypeError
+var Infinity = 5;   // déclenche une exception TypeError
+
+// Affectation à une propriété en lecture seule
+var obj1 = {};
+Object.defineProperty(obj1, "x", { value: 42, writable: false });
+obj1.x = 9; // lève un TypeError
+
+// Affectation à une propriété qui n'a qu'une méthode get
+var obj2 = { get x() { return 17; } };
+obj2.x = 5; // lève un TypeError
+
+// Affectation d'une nouvelle propriété à un objet non-extensible
+var gele= {};
+Object.preventExtensions(gele);
+gele.nouvelleProp = "ohé"; // lève un TypeError
+```
+
+Troisièmement, le mode strict lèvera une exception lors d'une tentative de suppression d'une propriété non-supprimable (là où cela ne produisait aucun effet en mode non strict) :
+
+```js
+"use strict";
+delete Object.prototype; // lève une TypeError
+```
+
+Quatrièmement, le mode strict, avant Gecko 34, requiert que toutes les propriétés nommées dans un objet littéral soient uniques. En mode non-strict, les propriétés peuvent être spécifiées deux fois, JavaScript ne retenant que la dernière valeur de la propriété. Cette duplication en devient alors une source de confusion, surtout dans le cas où, dans une modification de ce même code, on se met à changer la valeur de la propriété autrement qu'en changeant la dernière instance. Les noms de propriété en double sont une erreur de syntaxe en mode strict :
+
+```js
+"use strict";
+var o = { p: 1, p: 2 }; // !!! erreur de syntaxe
+```
+
+> **Note :** Cela n'est plus le cas avec ECMAScript 2015 ({{bug(1041128)}}).
+
+Cinquièmement, le mode strict requiert que les noms de paramètres de fonction soient uniques. En mode non-strict, le dernier argument dupliqué cache les arguments précédents ayant le même nom. Ces arguments précédents demeurent disponibles via `arguments[i]`, ils ne sont donc pas complètement inaccessibles. Pourtant, cette cachette n'a guère de sens et n'est probablement pas souhaitable (cela pourrait cacher une faute de frappe, par exemple). Donc en mode strict, les doublons de noms d'arguments sont une erreur de syntaxe :
+
+```js
+function somme(a, a, c) { // !!! erreur de syntaxe
+  "use strict";
+  return a + b + c; // Ce code va planter s'il est exécuté
+}
+```
+
+Sixièmement, le mode strict interdit la syntaxe octale. La syntaxe octale ne fait pas partie d'ECMAScript 5, mais elle est supportée dans tous les navigateurs en préfixant le nombre octal d'un zéro : `0644 === 420` et `"\045" === "%"`. La notation octale est supportée en utilisant le préfixe "`0o`" :
+
+```js
+let a = 0o10; // Notation octale ES2015
+```
+
+Les développeurs novices croient parfois qu'un zéro débutant un nombre n'a pas de signification sémantique, alors ils l'utilisent comme moyen d'aligner des colonnes de nombres mais ce faisant, ils changent la valeur du nombre ! La syntaxe octale est rarement utile et peut être utilisée de manière fautive, donc le mode strict le considère comme étant une erreur de syntaxe :
+
+```js
+"use strict";
+var somme = 015 + // !!! erreur de syntaxe
+            197 +
+            142;
+```
+
+Septièmement, le mode strict, à partir d'ECMAScript 2015 interdit de définir des propriétés sur des valeurs primitives. Sans mode strict, de telles définitions sont ignorées. En activant le mode strict cela lèvera une exception {{jsxref("TypeError")}}.
+
+```js
+(function() {
+"use strict";
+
+false.true = "";         // TypeError
+(14).calvados= "maison";     // TypeError
+"une chaîne".de = "caractères"; // TypeError
+
+})();
+```
+
+### Simplifier l'utilisation des variables
+
+Le mode strict simplifie la façon dont les noms de variables sont mis en correspondance avec les définitions de variables dans le code. De nombreuses optimisations du compilateur reposent sur la capacité à dire à quel endroit la variable _X_ est stockée : cela est essentiel pour optimiser pleinement le code JavaScript. JavaScript rend parfois cette mise en correspondance impossible à réaliser avant l'exécution du code. Le mode strict élimine la plupart des cas où cela se produit, de sorte que le compilateur peut mieux optimiser le code en mode strict.
+
+Premièrement, le mode strict interdit l'utilisation de `with`. Le problème avec `with` est que tout nom de variable à l'intérieur du bloc peut faire référence à une propriété de l'objet qui lui est passé, ou encore à une variable déclarée à l'extérieur du bloc, globale ou non, à l'exécution : il est impossible de le savoir d'avance. Le mode strict fait de `with` une erreur de syntaxe, donc il n'y a aucune chance pour qu'un nom déclaré dans un `with` fasse référence à un lieu inconnu à l'exécution :
+
+```js
+"use strict";
+var x = 17;
+with (obj) // !!! erreur de syntaxe
+{
+  // Si on n'était pas en mode strict, serait-ce var x,
+  // ou serait-ce plutôt obj.x?  Il est impossible en général
+  // de le dire sans faire tourner le code, donc
+  // le nom ne peut pas être optimisé.
+  x;
+}
+```
+
+Au lieu d'utiliser `with`, on peut très bien assigner l'objet à une variable avec un nom court, puis accéder aux propriétés correspondantes à cette variable.
+
+Deuxièmement, [`eval` en mode strict ne doit pas créer de variables dont la portée dépasse celle du `eval`](https://whereswalden.com/2011/01/10/new-es5-strict-mode-support-new-vars-created-by-strict-mode-eval-code-are-local-to-that-code-only/). En mode non-strict, `eval("var x;")` crée la variable `x` dans le code appelant `eval`. Ce qui signifie qu'en général, dans une fonction contenant un appel à `eval`, tous les noms qui ne réfèrent pas à un paramètre ou une variable locale devront être mis en correspondance avec une définition de variable lors de l'exécution (puisque cet `eval` a introduit une nouvelle variable qui serait susceptible de modifier la variable externe). En mode strict, `eval` ne crée des variables que pour le code étant évalué, ainsi `eval` ne peut pas réaliser d'affectation à une variable externe ou à une variable locale :
+
+```js
+var x = 17;
+var evalX = eval("'use strict'; var x = 42; x");
+console.log(x === 17);
+console.log(evalX === 42);
+```
+
+De la même manière, si la fonction `eval` est invoquée par une expression de la forme `eval(...)` dans un code en mode strict, le code sera aussi évalué en mode strict. Le code peut déclarer explicitement le mode strict, mais il est inutile de le faire.
+
+```js
+function strict1(str) {
+  "use strict";
+  return eval(str); // str sera évalué en mode strict
+}
+function strict2(f, str) {
+  "use strict";
+  return f(str); // pas de eval(...) : str est strict si et seulement si il est déclaré en mode strict
+}
+function nonstrict(str) {
+  return eval(str); // str est strict si et seulement si il est déclaré en mode strict
+}
+
+strict1("'Mode strict!'");
+strict1("'use strict'; 'Mode strict!'");
+strict2(eval, "'Mode non-strict.'");
+strict2(eval, "'use strict'; 'Mode strict!'");
+nonstrict("'Mode non-strict.'");
+nonstrict("'use strict'; 'Mode strict!'");
+```
+
+Ainsi, les noms dans le code `eval` en mode strict se comportent de la même façon que les noms dans le code en mode strict n'étant pas évalués comme le résultat de `eval`.
+
+Troisièmement, le mode strict interdit la suppression des variables déclarées. `delete name` en mode strict est une erreur de syntaxe:
+
+```js
+"use strict";
+eval("var x; delete x;"); // !!! erreur de syntaxe
+```
+
+### Rendre `eval` et `arguments` plus simples
+
+Le mode strict rend {{jsxref("Fonctions/arguments","arguments")}} et {{jsxref("Objets_globaux/eval","eval()")}} moins « étranges ». Les deux impliquent une quantité de comportements étranges dans le code en mode non-strict : `eval` afin d'ajouter et d'enlever des liaisons et pour changer les valeurs de liaisons, et `arguments` via ses propriétés indexées faisant référence à des arguments nommés. Le mode strict permet de mieux traîter `eval` et `arguments` comme des mots-clés à part entière, bien qu'une _réparation_ complète ne devrait pas arriver avant une version future d'ECMAScript.
+
+Premièrement, les chaînes `eval` et `arguments` ne peuvent pas être utilisées comme identificateur. Tous les exemples suivants entraînent des erreurs de syntaxe :
+
+```js
+"use strict";
+eval = 17;
+arguments++;
+++eval;
+var obj = { set p(arguments) { } };
+var eval;
+try { } catch (arguments) { }
+function x(eval) { }
+function arguments() { }
+var y = function eval() { };
+var f = new Function("arguments", "'use strict'; return 17;");
+```
+
+Deuxièmement, en mode strict on ne donnera pas d'alias aux propriétés de `arguments` avec les objets créées dans la fonction. En code normal, dans une fonction dont le premier argument est `arg`, modifier `arg` modifiera aussi `arguments[0]`, et vice versa (à moins qu'aucun argument ne soit fourni ou que `arguments[0]` soit supprimé). Les objets de `arguments` pour les fonctions en mode strict stockent les argument originaux, au moment où la fonction a été appelée. `arguments[i]` ne reflète pas la valeur de l'argument nommé correspondant, et vice-versa.
+
+```js
+function f(a) {
+  "use strict";
+  a = 42;
+  return [a, arguments[0]];
+}
+var pair = f(17);
+console.log(pair[0] === 42);
+console.log(pair[1] === 17);
+```
+
+Troisièmement, `arguments.callee` n'est plus supporté. En temps normal `arguments.callee` contient la référence de la fonction courante. Il suffit d'appeler la fonction courante par son nom si elle n'est pas anonyme. `arguments.callee` en mode strict est une propriété non supprimable qui lèvera une erreur si elle est définie ou récupérée :
+
+```js
+"use strict";
+var f = function() { return arguments.callee; };
+f(); // lève une TypeError
+```
+
+### « Sécuriser » JavaScript
+
+Le mode strict permet d'écrire plus simplement du code JavaScript sûr. Certains sites web fournissent aujourd'hui des outils pour que les utilisateurs puissent écrire du JavaScript qui sera exécuté sur le site pour les autres utilisateurs. Dans un navigateur web, le JavaScript peut accéder à certaines informations privées de l'utilisateur. Il faut donc transformer le JavaScript écrit par un utilisateur externe pour que le code correspondant soit exécuté de façon sécurisée pour les autres utilisateurs. Pour ce faire, il faut effectuer des vérifications au moment de l'exécution. En effet, JavaScript est suffisamment flexible pour que vérifier du code avant l'exécution soit très complexe voire impossible. En revanche, vérifier le comportement du code lors de l'exécution a un coût sur les performances. Pour réduire ce nombre de vérifications et bénéficier de meilleures performances dans ce scénario, on peut restreindre le code qui peut être envoyé à du code en mode strict.
+
+Tout d'abord, la valeur passée en tant que `this` à une fonction n'est pas nécessairement transformée en un objet en mode strict. Pour une fonction « normale », `this` est toujours un objet : soit l'objet fourni si la valeur fournie pour `this` était un objet, soit la valeur, transformée en un objet quand c'est un booléen, une chaîne de caractères ou un nombre. Cette valeur peut également être l'objet global si `this` vaut `null` ou `undefined` lorsqu'il est passé à la fonction. (Les fonctions {{jsxref("Function.prototype.call()")}}, {{jsxref("Function.prototype.apply()")}} ou {{jsxref("Function.prototype.bind()")}} peuvent être utilisées lorsqu'on souhaite spécifier une certaine valeur pour `this`.) Cette conversion automatique en objet a un certain coût en termes de performances mais cela peut également exposer l'objet global ce qui est dangereux dans les navigateurs : en effet, l'objet global permet d'accéder à certaines fonctionnalités qui rendraient le code non-sécurisé. Ainsi, en mode strict, la valeur `this` n'est pas transformée en un objet et si elle n'est pas définie, `this` sera {{jsxref("undefined")}} :
+
+```js
+"use strict";
+function fun() { return this; }
+console.log(fun() === undefined);
+console.log(fun.call(2) === 2);
+console.log(fun.apply(null) === null);
+console.log(fun.call(undefined) === undefined);
+console.log(fun.bind(true)() === true);
+```
+
+Cela signifie entre autres qu'il est impossible de faire référence à l'objet `window` du navigateur grâce à `this` au sein d'une fonction en mode strict.
+
+Ensuite, en mode strict, il n'est plus possible de remonter la pile d'appels grâce aux extensions communément implémentées. Par exemple, dans du code non strict, lorsqu'une fonction `fun` est en train d'être appelée, `fun.caller` fait référence à la fonction qui a appelé `fun` la dernière et `fun.arguments` correspond à l'objet `arguments` pour cet appel à `fun`. Ces deux extensions posent problème pour la sécurité car elles permettent au code d'accéder à des fonctions privilégiées et à leurs arguments (éventuellement non sécurisés). Si `fun` est passée en mode strict, `fun.caller` et `fun.arguments` seront des propriétés non-supprimables qui lèveront une exception pour chaque tentative d'accès ou de modification :
+
+```js
+function restricted()
+{
+  "use strict";
+  restricted.caller;    // lève une TypeError
+  restricted.arguments; // lève une TypeError
+}
+function privilegedInvoker()
+{
+  return restricted();
+}
+privilegedInvoker();
+```
+
+Enfin, pour une fonction en mode strict, `arguments` ne permet pas d'accéder aux variables passées à la fonction lors de l'appel. Dans certaines anciennes implémentations d'ECMAScript, `arguments.caller` était un objet dont les propriétés étaient des alias pour les variables passées à la fonction. Cela entraîne [un problème de sécurité](https://stuff.mit.edu/iap/2008/facebook/) car cela empêche de cacher des valeurs privilégiées via l'abstraction des fonctions. Cela empêche aussi de nombreuses optimisations. Pour ces raisons, les navigateurs récents n'implémentent plus cet objet. Cependant, étant donné sa présence historique, en mode strict, `arguments.caller` est une propriété non-supprimable qui déclenche une exception pour toute tentative d'accès ou de modification :
+
+```js
+"use strict";
+function fun(a, b)
+{
+  "use strict";
+  var v = 12;
+  return arguments.caller; // lève une TypeError
+}
+fun(1, 2); // n'expose pas v (ni a ou b)
+```
+
+### Prévoir la suite : les prochaines versions d'ECMAScript
+
+Les prochaines versions d'ECMAScript inclueront certainement une nouvelle syntaxe, de nouveaux mots-clés. Le mode strict d'ECMAScript 5 applique certaines restrictions qui permettent de prévoir les transitions à venir lorsque des changements auront lieu. Il sera ainsi plus simple de modifier le code si les erreurs relatives à une nouvelle syntaxe sont mises en avant grâce au mode strict.
+
+Premièrement, en mode strict, une liste d'identifiants fait partie des mots-clés réservés. Ces termes sont : `implements`, `interface`, `let`, `package`, `private`, `protected`, `public`, `static`, et `yield`. En mode strict, il est donc impossible de nommer des variables ou des arguments avec ces noms.
+
+```js
+function package(protected) { // !!!
+  "use strict";
+  var implements; // !!!
+
+  interface: // !!!
+  while (true) {
+    break interface; // !!!
+  }
+
+  function private() { } // !!!
+}
+function fun(static) { 'use strict'; } // !!!
+```
+
+Deux défauts liés à Mozilla Firefox : tout d'abord si votre code est en JavaScript 1.7 ou supérieur (par exemple pour du code qui concerne le chrome dans les extensions ou lorsqu'on utilise les balises `<script type="">`) et qu'il est en mode strict, `let` et `yield` fonctionnent de la façon dont ils fonctionnaient originellement au sein de Firefox. En revanche, pour du code strict utilisé sur une page web et chargé avec `<script src="">` ou `<script>...</script>`, on ne pourra pas utiliser `let`/`yield` comme identifiants. Ensuite, bien qu'ES5 réserve les mots-clés `class`, `enum`, `export`, `extends`, `import`, et `super` pour le mode strict et le mode non strict, les versions antérieures à Firefox 5 ne réservaient ces mots-clés que pour le mode strict.
+
+Deuxièmement, [le mode strict interdit les déclarations de fonctions qui ne sont pas au niveau le plus haut d'un script ou d'une fonction](https://whereswalden.com/2011/01/24/new-es5-strict-mode-requirement-function-statements-not-at-top-level-of-a-program-or-function-are-prohibited/). En mode normal, il est possible de déclarer une fonction n'importe où avec une déclaration de fonction (voir {{jsxref("Instructions/function","function")}}). Ceci ne fait pas partie de la spécification ECMAScript et est donc une extension. [Le mode strict interdit cela](https://wiki.ecmascript.org/doku.php?id=conventions:no_non_standard_strict_decls), ce qui permet de lever toute ambiguité par rapport aux futures spécifications ECMAScript sur cette fonctionnalité.  On notera que les instructions de fonctions écrites en dehors du plus haut niveau sont autorisées avec ES2015 :
+
+```js
+"use strict";
+if (true) {
+  function f() { } // !!! erreur de syntaxe
+  f();
+}
+
+for (var i = 0; i < 5; i++) {
+  function f2() { } // !!! erreur de syntaxe
+  f2();
+}
+
+function truc() { // OK
+  function bidule() { } // OK également
+}
+```
+
+Cette interdiction n'est pas, à proprement parler, liée au mode strict. En effet, de telles déclarations de fonctions ne font pas partie d'ES5. Cependant, c'est un choix du comité ECMAScript que cette interdiction soit implémentée.
+
+## Le mode strict dans les navigateurs
+
+Désormais, l'ensemble des navigateurs majeurs implémentent le mode strict. Cependant, il existe toujours un certain nombre de disparités et certains navigateurs actuels ou avec leurs anciennes versions ne supportent pas le mode strict. Le mode strict modifie des éléments de sémantique de JavaScript ; faire appel au mode strict pour des navigateurs qui ne le supportent pas peut donc entraîner des erreurs indésirables. Pour cette raison, il faut faire attention à la façon dont on exécute du code strict et bien tester ce code sur l'ensemble des navigateurs : ceux qui supportent le mode strict comme ceux qui ne supportent pas ce mode.
+
+## Spécifications
+
+| Spécification                                                                                                                                                                                                                 | État                         | Commentaires                                                                                                                                  |
+| ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------- |
+| {{SpecName('ES5.1', '#sec-10.1.1', 'Strict Mode Code')}} {{SpecName('ES5.1', '#sec-C', 'Strict mode restriction and exceptions')}}                                                 | {{Spec2('ES5.1')}}     | Définition initiale. Voir aussi : [les restrictions du mode strict et les exceptions](https://www.ecma-international.org/ecma-262/5.1/#sec-C) |
+| {{SpecName('ES2015', '#sec-strict-mode-code', 'Strict Mode Code')}} {{SpecName('ES2015', '#sec-strict-mode-of-ecmascript', 'Strict mode restriction and exceptions')}} | {{Spec2('ES2015')}}     | [Les restrictions du mode strict et les exceptions](https://www.ecma-international.org/ecma-262/6.0/#sec-strict-mode-of-ecmascript)           |
+| {{SpecName('ESDraft', '#sec-strict-mode-code', 'Strict Mode Code')}}                                                                                                                                  | {{Spec2('ESDraft')}} | [Les restrictions du mode strict et les exceptions](https://tc39.github.io/ecma262/#sec-strict-mode-of-ecmascript)                            |
+
+## Voir aussi
+
+- [Where's Walden? » New ES5 strict mode support: now with poison pills!](https://whereswalden.com/2010/09/08/new-es5-strict-mode-support-now-with-poison-pills/) (billet en anglais)
+- [Where's Walden? » New ES5 strict mode requirement: function statements not at top level of a program or function are prohibited](https://whereswalden.com/2011/01/24/new-es5-strict-mode-requirement-function-statements-not-at-top-level-of-a-program-or-function-are-prohibited/) (billet en anglais)
+- [Where's Walden? » New ES5 strict mode support: new vars created by strict mode eval code are local to that code only](https://whereswalden.com/2011/01/10/new-es5-strict-mode-support-new-vars-created-by-strict-mode-eval-code-are-local-to-that-code-only/) (billet en anglais)
+- [John Resig - ECMAScript 5 Strict Mode, JSON, and More](https://ejohn.org/blog/ecmascript-5-strict-mode-json-and-more/) (billet en anglais)
+- [ECMA-262-5 in detail. Chapter 2. Strict Mode.](https://dmitrysoshnikov.com/ecmascript/es5-chapter-2-strict-mode/) (billet en anglais)
+- [Tableau de compatibilité pour le mode strict](https://kangax.github.io/compat-table/es5/#Strict_mode) (Kangax)
+- [Passer au mode strict](/fr/docs/Web/JavaScript/Reference/Strict_mode/Passer_au_mode_strict)
diff --git a/files/fr/web/javascript/reference/strict_mode/transitioning_to_strict_mode/index.html b/files/fr/web/javascript/reference/strict_mode/transitioning_to_strict_mode/index.html
deleted file mode 100644
index 09bbdd415f..0000000000
--- a/files/fr/web/javascript/reference/strict_mode/transitioning_to_strict_mode/index.html
+++ /dev/null
@@ -1,142 +0,0 @@
----
-title: Passer au mode strict
-slug: Web/JavaScript/Reference/Strict_mode/Transitioning_to_strict_mode
-tags:
-  - Avancé
-  - JavaScript
-translation_of: Web/JavaScript/Reference/Strict_mode/Transitioning_to_strict_mode
-original_slug: Web/JavaScript/Reference/Strict_mode/Passer_au_mode_strict
----
-<div>{{jsSidebar("More")}}</div>
-
-<p>Le <a href="/fr/docs/Web/JavaScript/Reference/Strict_mode">mode strict</a> fut introduit avec ECMAScript 5 et est désormais présent dans les principaux navigateurs. Pour indiquer au navigateur l'utilisation de ce mode, il suffit d'ajouter <code>"use strict";</code> au début du code source. En revanche, il faut un peu plus de travail afin de migrer une base de code existante afin qu'elle utilise intégralement le mode strict.</p>
-
-<p>Cet article a pour but de guider les développeurs qui souhaitent effectuer cette migration.</p>
-
-<h2 id="Transition_progressive">Transition progressive</h2>
-
-<p>Le mode strict a été conçu afin que la transition puisse être effectuée de façon progressive. Il est possible de modifier chaque fichier individuellement voire, éventuellement, de descendre cette granularité aux fonctions.</p>
-
-<h2 id="Différences_entre_strict_et_non-strict">Différences entre strict et non-strict</h2>
-
-<h3 id="Erreurs_de_syntaxe">Erreurs de syntaxe</h3>
-
-<p>En utilisant <code>"use strict";</code>, certaines instructions ou fragments de code lanceront une exception {{jsxref("SyntaxError")}} avant l'exécution du script :</p>
-
-<ul>
- <li>La syntaxe pour la base octale : <code>var n = 023;</code></li>
- <li>L'instruction {{jsxref("Instructions/with","with")}}</li>
- <li>L'instruction {{jsxref("Instructions/delete","delete")}} pour un nom de variable <code>delete maVariable</code>;</li>
- <li>L'utilisation de {{jsxref("Objets_globaux/eval","eval()")}} ou {{jsxref("Fonctions/arguments","arguments")}} comme un nom de variable ou un nom d'argument</li>
- <li>L'utilisation d'un des nouveaux mots-clés réservés (en prévision d'ECMAScript 2015 (ES6)) : <code>implements</code>, <code>interface</code>, <code>let</code>, <code>package</code>, <code>private</code>, <code>protected</code>, <code>public</code>, <code>static</code>, et <code>yield</code></li>
- <li>La déclaration de fonctions dans des blocs <code>if(a&lt;b){ function f(){} }</code></li>
- <li>Les erreurs évidentes
-  <ul>
-   <li>Déclarer deux fois le nom d'une propriété dans un littéral objet<code> {a: 1, b: 3, a: 7}</code>. Ceci n'est plus le cas pour ECMAScript 2015 (ES6) : {{bug(1041128)}}</li>
-   <li>Déclarer deux arguments de fonction avec le même nom<code> function f(a, b, b){}</code></li>
-  </ul>
- </li>
-</ul>
-
-<p>Ces erreurs sont bienvenues car elles révèlent des mauvaises pratiques et certaines erreurs claires. Elles apparaissent avant l'exécution du code.</p>
-
-<h3 id="Erreurs_à_l'exécution">Erreurs à l'exécution</h3>
-
-<p>JavaScript échoue silencieusement dans certains contextes où une erreur se produit. Le mode strict lance une exception dans ces cas. Si votre code contient certains de ces cas, il sera nécessaire de faire des tests afin de vous assurer que rien n'est cassé. Encore une fois, il est possible d'utiliser le mode strict à la granularité des fonctions.</p>
-
-<h4 id="Attribuer_une_valeur_à_une_variable_non_déclarée">Attribuer une valeur à une variable non déclarée</h4>
-
-<pre class="brush: js">function f(x){
-  "use strict";
-  var a = 12;
-  b = a + x*35; // erreur !
-}
-f(42);
-</pre>
-
-<p>Cela a pour effet de changer une valeur de l'objet global, ce qui est rarement voulu. Si vous souhaitez définir une valeur pour l'objet global, utilisez le comme argument et assignez la propriété de façon explicite :</p>
-
-<pre class="brush: js">// au niveau le plus haut "this" fait toujours référence
-// à l'objet global
-var global = this;
-
-function f(x){
-  "use strict";
-  var a = 12;
-  global.b = a + x*35;
-}
-f(42);
-</pre>
-
-<h4 id="Essayer_de_supprimer_une_propriété_non-configurable">Essayer de supprimer une propriété non-configurable</h4>
-
-<pre class="brush: js">"use strict";
-delete Object.prototype; // erreur !
-</pre>
-
-<p>En mode non-strict, cela serait passé sous silence (contrairement à ce à quoi l'utilisateur pourrait s'attendre).</p>
-
-<h4 id="Utiliser_les_mauvaises_propriétés_d'arguments_et_function">Utiliser les mauvaises propriétés d'arguments et function</h4>
-
-<p>Utiliser <code>arguments.callee</code>, <code>arguments.caller</code>, <code>anyFunction.caller</code> ou encore <code>anyFunction.arguments</code> renverra une erreur en mode strict. Le seul cas légitime pour les utiliser serait :</p>
-
-<pre class="brush: js">// exemple tiré de vanillajs: http://vanilla-js.com/
-var s = document.getElementById('truc').style;
-s.opacity = 1;
-(function(){
-  if((s.opacity-=.1) &lt; 0)
-    s.display="none";
-  else
-    setTimeout(arguments.callee, 40);
-})();</pre>
-
-<p>qu'on peut réécrire en :</p>
-
-<pre class="brush: js">"use strict";
-var s = document.getElementById('truc').style;
-s.opacity = 1;
-(function fadeOut(){ // on nomme la fonction
-  if((s.opacity-=.1) &lt; 0)
-    s.display="none";
-  else
-    setTimeout(fadeOut, 40); // on utilise ce nom
-})();</pre>
-
-<h3 id="Les_différences_sémantiques">Les différences sémantiques</h3>
-
-<p>Ces différences sont très subtiles et il est possible qu'un ensemble de tests ne détecte pas ces différences. Il peut être alors nécessaire d'analyser votre code avec précaution afin de vérifier que la signification du code n'ait pas changé. Encore une fois, cela peut être fait fonction par fonction.</p>
-
-<h4 id="Le_sens_de_this_dans_les_appels_de_fonction">Le sens de <code>this</code> dans les appels de fonction</h4>
-
-<p>Lors de l'appel à une fonction comme <code>f()</code>, la valeur de <code>this</code> correspondait à l'objet global. En mode strict, cette valeur devient <code>undefined</code>. Lorsqu'une fonction était appelée avec {{jsxref("Function.prototype.call","call()")}} ou {{jsxref("Function.prototype.apply","apply()")}}, si la valeur était une valeur primitive, elle était placée dans un objet (ou dans l'objet global pour <code>undefined</code> et <code>null</code>). En mode strict, la valeur est passée directement, sans conversion ni remplacement.</p>
-
-<h4 id="arguments_ne_crée_pas_d'alias_pour_les_arguments_nommés_d'une_fonction"><code>arguments</code> ne crée pas d'alias pour les arguments nommés d'une fonction</h4>
-
-<p>En mode non-strict, la modification d'une valeur de l'objet <code>arguments</code> entraînait la modification de l'argument correspondant. Cela complexifie les optimisations des moteurs JavaScript et et la lecture du code. En mode strict, l'objet <code>arguments</code> est créé et initialisé avec les mêmes valeurs que les arguments nommés. En revanche, les changements apportés à l'objet <code>arguments</code> ou aux arguments nommés ne sont pas reproduit de l'un vers l'autre et réciproquement.</p>
-
-<h4 id="Changements_apportés_à_eval">Changements apportés à <code>eval</code></h4>
-
-<p>En mode strict, <code>eval</code> ne crée pas de nouvelle variable dans la portée depuis laquelle il a été appelé. Bien entendu, la chaîne évaluée est évaluée selon les règles du mode strict. Pour s'assurer du bon fonctionnement de cette évaluation, il faut s'assurer des cas de figures qui s'y présentent pour les tester. Rappel : il ne faut utiliser <code>eval</code> que si cela est nécessaire (les dangers liés à cette fonction font qu'on observe de mauvaises pratiques).</p>
-
-<h2 id="La_neutralité_du_code_quant_au_mode_strict">La neutralité du code quant au mode strict</h2>
-
-<p>Un des aspects négatifs de cette migration est la sémantique : le sens du code pourrait être différent dans les navigateurs historiques qui n'implémentent pas le mode strict. Dans quelques rares cas (une mauvaise concaténation ou minification), votre code pourrait ne pas fonctionner dans le mode que vous avez testé. Voici quelques règles pour que le code soit le plus neutre possible quant au mode choisi (strict ou non-strict) :</p>
-
-<ol>
- <li>Écrivez votre code « strictement » et assurez vous de lancer des exceptions dans le cadre d'erreurs liées au mode non-strict (voir la section « Erreurs à l'exécution » ci-avant)</li>
- <li>Minimisez l'utilisation des éléments dont la sémantique pourrait changer :
-  <ol>
-   <li><code>eval </code>: n'utilisez cette fonction uniquement si vous êtes certains que c'est l'unique solution</li>
-   <li><code>arguments</code> : utilisez les arguments d'une fonction via leur nom ou faites une copie de l'objet en utilisant :<br>
-    <code>var args = Array.prototype.slice.call(arguments)</code><br>
-    au tout début de votre fonction</li>
-   <li><code>this</code> : n'utilisez <code>this</code> que pour faire référence à un objet que vous avez créé</li>
-  </ol>
- </li>
-</ol>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/JavaScript/Reference/Strict_mode">Le mode strict</a></li>
-</ul>
diff --git a/files/fr/web/javascript/reference/strict_mode/transitioning_to_strict_mode/index.md b/files/fr/web/javascript/reference/strict_mode/transitioning_to_strict_mode/index.md
new file mode 100644
index 0000000000..8369472b37
--- /dev/null
+++ b/files/fr/web/javascript/reference/strict_mode/transitioning_to_strict_mode/index.md
@@ -0,0 +1,139 @@
+---
+title: Passer au mode strict
+slug: Web/JavaScript/Reference/Strict_mode/Transitioning_to_strict_mode
+tags:
+  - Avancé
+  - JavaScript
+translation_of: Web/JavaScript/Reference/Strict_mode/Transitioning_to_strict_mode
+original_slug: Web/JavaScript/Reference/Strict_mode/Passer_au_mode_strict
+---
+{{jsSidebar("More")}}
+
+Le [mode strict](/fr/docs/Web/JavaScript/Reference/Strict_mode) fut introduit avec ECMAScript 5 et est désormais présent dans les principaux navigateurs. Pour indiquer au navigateur l'utilisation de ce mode, il suffit d'ajouter `"use strict";` au début du code source. En revanche, il faut un peu plus de travail afin de migrer une base de code existante afin qu'elle utilise intégralement le mode strict.
+
+Cet article a pour but de guider les développeurs qui souhaitent effectuer cette migration.
+
+## Transition progressive
+
+Le mode strict a été conçu afin que la transition puisse être effectuée de façon progressive. Il est possible de modifier chaque fichier individuellement voire, éventuellement, de descendre cette granularité aux fonctions.
+
+## Différences entre strict et non-strict
+
+### Erreurs de syntaxe
+
+En utilisant `"use strict";`, certaines instructions ou fragments de code lanceront une exception {{jsxref("SyntaxError")}} avant l'exécution du script :
+
+- La syntaxe pour la base octale : `var n = 023;`
+- L'instruction {{jsxref("Instructions/with","with")}}
+- L'instruction {{jsxref("Instructions/delete","delete")}} pour un nom de variable `delete maVariable`;
+- L'utilisation de {{jsxref("Objets_globaux/eval","eval()")}} ou {{jsxref("Fonctions/arguments","arguments")}} comme un nom de variable ou un nom d'argument
+- L'utilisation d'un des nouveaux mots-clés réservés (en prévision d'ECMAScript 2015 (ES6)) : `implements`, `interface`, `let`, `package`, `private`, `protected`, `public`, `static`, et `yield`
+- La déclaration de fonctions dans des blocs `if(a<b){ function f(){} }`
+- Les erreurs évidentes
+
+  - Déclarer deux fois le nom d'une propriété dans un littéral objet` {a: 1, b: 3, a: 7}`. Ceci n'est plus le cas pour ECMAScript 2015 (ES6) : {{bug(1041128)}}
+  - Déclarer deux arguments de fonction avec le même nom` function f(a, b, b){}`
+
+Ces erreurs sont bienvenues car elles révèlent des mauvaises pratiques et certaines erreurs claires. Elles apparaissent avant l'exécution du code.
+
+### Erreurs à l'exécution
+
+JavaScript échoue silencieusement dans certains contextes où une erreur se produit. Le mode strict lance une exception dans ces cas. Si votre code contient certains de ces cas, il sera nécessaire de faire des tests afin de vous assurer que rien n'est cassé. Encore une fois, il est possible d'utiliser le mode strict à la granularité des fonctions.
+
+#### Attribuer une valeur à une variable non déclarée
+
+```js
+function f(x){
+  "use strict";
+  var a = 12;
+  b = a + x*35; // erreur !
+}
+f(42);
+```
+
+Cela a pour effet de changer une valeur de l'objet global, ce qui est rarement voulu. Si vous souhaitez définir une valeur pour l'objet global, utilisez le comme argument et assignez la propriété de façon explicite :
+
+```js
+// au niveau le plus haut "this" fait toujours référence
+// à l'objet global
+var global = this;
+
+function f(x){
+  "use strict";
+  var a = 12;
+  global.b = a + x*35;
+}
+f(42);
+```
+
+#### Essayer de supprimer une propriété non-configurable
+
+```js
+"use strict";
+delete Object.prototype; // erreur !
+```
+
+En mode non-strict, cela serait passé sous silence (contrairement à ce à quoi l'utilisateur pourrait s'attendre).
+
+#### Utiliser les mauvaises propriétés d'arguments et function
+
+Utiliser `arguments.callee`, `arguments.caller`, `anyFunction.caller` ou encore `anyFunction.arguments` renverra une erreur en mode strict. Le seul cas légitime pour les utiliser serait :
+
+```js
+// exemple tiré de vanillajs: http://vanilla-js.com/
+var s = document.getElementById('truc').style;
+s.opacity = 1;
+(function(){
+  if((s.opacity-=.1) < 0)
+    s.display="none";
+  else
+    setTimeout(arguments.callee, 40);
+})();
+```
+
+qu'on peut réécrire en :
+
+```js
+"use strict";
+var s = document.getElementById('truc').style;
+s.opacity = 1;
+(function fadeOut(){ // on nomme la fonction
+  if((s.opacity-=.1) < 0)
+    s.display="none";
+  else
+    setTimeout(fadeOut, 40); // on utilise ce nom
+})();
+```
+
+### Les différences sémantiques
+
+Ces différences sont très subtiles et il est possible qu'un ensemble de tests ne détecte pas ces différences. Il peut être alors nécessaire d'analyser votre code avec précaution afin de vérifier que la signification du code n'ait pas changé. Encore une fois, cela peut être fait fonction par fonction.
+
+#### Le sens de `this` dans les appels de fonction
+
+Lors de l'appel à une fonction comme `f()`, la valeur de `this` correspondait à l'objet global. En mode strict, cette valeur devient `undefined`. Lorsqu'une fonction était appelée avec {{jsxref("Function.prototype.call","call()")}} ou {{jsxref("Function.prototype.apply","apply()")}}, si la valeur était une valeur primitive, elle était placée dans un objet (ou dans l'objet global pour `undefined` et `null`). En mode strict, la valeur est passée directement, sans conversion ni remplacement.
+
+#### `arguments` ne crée pas d'alias pour les arguments nommés d'une fonction
+
+En mode non-strict, la modification d'une valeur de l'objet `arguments` entraînait la modification de l'argument correspondant. Cela complexifie les optimisations des moteurs JavaScript et et la lecture du code. En mode strict, l'objet `arguments` est créé et initialisé avec les mêmes valeurs que les arguments nommés. En revanche, les changements apportés à l'objet `arguments` ou aux arguments nommés ne sont pas reproduit de l'un vers l'autre et réciproquement.
+
+#### Changements apportés à `eval`
+
+En mode strict, `eval` ne crée pas de nouvelle variable dans la portée depuis laquelle il a été appelé. Bien entendu, la chaîne évaluée est évaluée selon les règles du mode strict. Pour s'assurer du bon fonctionnement de cette évaluation, il faut s'assurer des cas de figures qui s'y présentent pour les tester. Rappel : il ne faut utiliser `eval` que si cela est nécessaire (les dangers liés à cette fonction font qu'on observe de mauvaises pratiques).
+
+## La neutralité du code quant au mode strict
+
+Un des aspects négatifs de cette migration est la sémantique : le sens du code pourrait être différent dans les navigateurs historiques qui n'implémentent pas le mode strict. Dans quelques rares cas (une mauvaise concaténation ou minification), votre code pourrait ne pas fonctionner dans le mode que vous avez testé. Voici quelques règles pour que le code soit le plus neutre possible quant au mode choisi (strict ou non-strict) :
+
+1.  Écrivez votre code « strictement » et assurez vous de lancer des exceptions dans le cadre d'erreurs liées au mode non-strict (voir la section « Erreurs à l'exécution » ci-avant)
+2.  Minimisez l'utilisation des éléments dont la sémantique pourrait changer :
+
+    1.  `eval `: n'utilisez cette fonction uniquement si vous êtes certains que c'est l'unique solution
+    2.  `arguments` : utilisez les arguments d'une fonction via leur nom ou faites une copie de l'objet en utilisant :
+        `var args = Array.prototype.slice.call(arguments)`
+        au tout début de votre fonction
+    3.  `this` : n'utilisez `this` que pour faire référence à un objet que vous avez créé
+
+## Voir aussi
+
+- [Le mode strict](/fr/docs/Web/JavaScript/Reference/Strict_mode)
diff --git a/files/fr/web/javascript/reference/template_literals/index.html b/files/fr/web/javascript/reference/template_literals/index.html
deleted file mode 100644
index 4f266479e0..0000000000
--- a/files/fr/web/javascript/reference/template_literals/index.html
+++ /dev/null
@@ -1,246 +0,0 @@
----
-title: Littéraux de gabarits
-slug: Web/JavaScript/Reference/Template_literals
-tags:
-  - Chaîne de caractères
-  - ECMAScript 2015
-  - Guide
-  - JavaScript
-  - Littéraux de gabarits
-translation_of: Web/JavaScript/Reference/Template_literals
-original_slug: Web/JavaScript/Reference/Littéraux_gabarits
----
-<div>{{JsSidebar("More")}}</div>
-
-<p>Les littéraux de gabarits sont des littéraux de chaînes de caractères permettant d'intégrer des expressions. Avec eux, on peut utiliser des chaînes de caractères multi-lignes et des fonctionnalités d'interpolation.</p>
-
-<div class="blockIndicator note">
-<p><strong>Note :</strong> Dans les premières versions de la spécification ECMAScript 2015, cette fonctionnalité était intitulée « gabarits de chaîne de caractères ». Dans la suite de cet article, les expressions « gabarits de texte », « gabarits de libellés », « littéraux de gabarits » et « gabarits » seront équivalents.</p>
-</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">`texte`
-
-`ligne de texte 1
- ligne de texte 2`
-
-`texte ${expression} texte`
-
-etiquette `texte ${expression} texte`
-</pre>
-
-<h2 id="Description">Description</h2>
-
-<p>Les gabarits sont délimités par des caractères <a href="https://fr.wikipedia.org/wiki/Accent_grave">accent grave</a> (` `)  au lieu des apostrophes doubles ou simples. Les gabarits peuvent contenir des espaces réservés (<em>placeholders</em>). Ces espaces sont indiqués par le signe dollar ($) et des accolades (<code>${expression})</code>. Les expressions dans les espaces réservés et le texte compris dans ces espaces sont passés à une fonction.</p>
-
-<p>Pour créer la chaîne finale, la fonction par défaut concatène simplement les différentes parties en une seule chaîne. Toutefois, on peut utiliser une fonction spécifique pour obtenir un comportement différent et recomposer la chaîne avec une autre logique. On parlera alors <a href="#Gabarits_étiquetés">de gabarit étiqueté (cf. ci-après)</a>.</p>
-
-<pre class="brush: js">let rep = 42;
-console.log(`La réponse est ${rep}`); // Gabarit simple avec la concaténation par défaut
-
-function concatenationAdHoc(chaines, reponse){
-  let parite;
-  if(reponse % 2 === 0){
-    parite = "paire";
-  } else {
-    parite = "impaire";
-  }
-  return `${chaines[0]}${parite}.`;
-}
-// concaténation spécifique où on modifie la sortie
-console.log(concatenationAdHoc`La réponse est ${rep}.`);
-</pre>
-
-<p>Pour utiliser des accents graves dans un gabarit, on les échappera avec une barre oblique inverse (\) :</p>
-
-<pre class="brush: js">`\`` === "`"; // true</pre>
-
-<h3 id="Les_chaînes_de_caractères_multi-lignes">Les chaînes de caractères multi-lignes</h3>
-
-<p>Tous les caractères de saut de ligne insérés dans la source font partie du gabarit. Avec des chaînes de caractères normales, il aurait fallu utiliser la syntaxe suivante pour obtenir des chaînes multi-lignes :</p>
-
-<pre class="brush: js">console.log('ligne de texte 1\n'+
-'ligne de texte 2');
-// "ligne de texte 1
-// ligne de texte 2"</pre>
-
-<p>Pour obtenir le même effet avec les gabarits, on peut désormais écrire :</p>
-
-<pre class="brush: js">console.log(`ligne de texte 1
-ligne de texte 2`);
-// "ligne de texte 1
-//  ligne de texte 2"</pre>
-
-<h3 id="Interpolation_dexpressions">Interpolation d'expressions</h3>
-
-<p>Pour intégrer des expressions dans des chaînes de caractères normales, il fallait utiliser la syntaxe suivante :</p>
-
-<pre class="brush: js">let a = 5;
-let b = 10;
-console.log('Quinze vaut ' + (a + b) + ' et\nnon ' + (2 * a + b) + '.');
-// "Quinze vaut 15 et
-// non 20."</pre>
-
-<p>On peut désormais utiliser le sucre syntaxique fourni par les gabarits pour rendre les substitutions plus lisibles :</p>
-
-<pre class="brush: js">let a = 5;
-let b = 10;
-console.log(`Quinze vaut ${a + b} et
-non ${2 * a + b}.`);
-// "Quinze vaut 15 et
-// non 20."</pre>
-
-<h3 id="Imbrication_de_gabarits">Imbrication de gabarits</h3>
-
-<p>Parfois, l'imbrication d'un gabarit est la solution la plus simple (et peut-être la plus lisible) pour obtenir des chaînes de caractères configurables.</p>
-
-<p>En ES5 :</p>
-
-<pre class="brush: js">let classes = 'header'
-classes += (isLargeScreen() ?
-   '' : item.isCollapsed ?
-     ' icon-expander' : ' icon-collapser');
-</pre>
-
-<p>En ES2015 avec des gabarits et sans imbrication :</p>
-
-<pre class="brush: js">const classes = `header ${ isLargeScreen() ? '' :
-    (item.isCollapsed ? 'icon-expander' : 'icon-collapser') }`;</pre>
-
-<p>En ES2015 avec des gabarits imbriqués :</p>
-
-<pre class="brush: js">const classes = `header $<strong>{</strong> isLargeScreen() ? '' :
- `icon-${item.isCollapsed ? 'expander' : 'collapser'}`<strong> </strong><strong>}`</strong>;</pre>
-
-<h3 id="Gabarits_étiquetés_2">Gabarits étiquetés</h3>
-
-<p>Les <em>gabarits étiquetés</em> (<em>tagged templates</em>) sont une forme plus avancée de gabarits. On peut ici utiliser une fonction pour analyser les différents fragments du gabarit. Le premier argument passé à la fonction est l'ensemble de valeurs issues de chaînes de caractères sous la forme d'un tableau. Les arguments ensuite passés à la fonction seront les expressions contenues dans le gabarit. La fonction pourra ainsi créer une chaîne avec une autre forme de concaténation et utiliser une logique spécifique. La fonction utilisée pour le formatage du gabarit peut être nommée comme n'importe quelle autre fonction.</p>
-
-<pre class="brush: js">let personne = 'Michou';
-let age = 28;
-
-function monEtiquette(chaines, expPersonne, expAge) {
-  let chn0 = chaines[0]; // "ce "
-  let chn1 = chaines[1]; // " est un "
-
-  // Techniquement, il y a une chaîne après
-  // l'expression finale (dans notre exemple),
-  // mais elle est vide (""), donc ne pas en tenir compte.
-  // var chn2 = chaines[2];
-
-  let chnAge;
-  if (expAge &gt; 99){
-    chnAge = 'centenaire';
-  } else {
-    chnAge = 'jeunot';
-  }
-  // On peut tout à fait renvoyer une chaîne construite
-  // avec un gabarit
-  return `${chn0}${expPersonne}${chn1}${chnAge}`;
-}
-
-let sortie = monEtiquette`ce ${ personne } est un ${ age }`;
-
-console.log(sortie);
-// ce Michou est un jeunot
-</pre>
-
-<h3 id="Chaînes_brutes">Chaînes brutes</h3>
-
-<p>La propriété spéciale <code>raw</code>, disponible sur le premier argument de la fonction du gabarit étiqueté, vous permet d'accéder aux chaînes brutes, telles qu'elles ont été entrées, sans traiter <a href="/fr/docs/Web/JavaScript/Guide/Types_et_grammaire#Utilisation_des_caractères_spéciaux">les séquences d'échappement</a>.</p>
-
-<pre class="brush: js">function etiquette(chaines) {
-  console.log(chaines.raw[0]);
-}
-
-etiquette`ligne de texte 1 \n ligne de texte 2`;
-// affichera dans la console :
-// "ligne de texte 1 \n ligne de texte 2"
-</pre>
-
-<p>En outre, la méthode {{jsxref("String.raw()")}} a pour fonction de créer des chaînes de caractères brutes, exactement comme la fonction de gabarit et de concaténation de chaînes par défaut le ferait :</p>
-
-<pre class="brush: js">let chn = String.raw`Salut\n${2+3}!`;
-// "Salut\n5!"
-
-chn.length;
-// 9
-
-chn.split('').join(',');
-// "S,a,l,u,t,\,n,5,!"
-</pre>
-
-<h3 id="Les_gabarits_étiquetés_et_les_séquences_déchappement">Les gabarits étiquetés et les séquences d'échappement</h3>
-
-<h4 id="Comportement_de_ES2016">Comportement de ES2016</h4>
-
-<p>Quant à ECMAScript 2016, les gabarits étiquetés se conforment aux règles de séquences d'échappement suivantes :</p>
-
-<ul>
- <li>Les séquences d'échappement Unicode commencent par "\u", par exemple<code>\u00A9</code></li>
- <li>Les séquences d'échappement pour les points de code Unicode sont indiquées par "\u{}", par exemple <code>\u{2F804}</code></li>
- <li>Les séquences d'échappement hexadécimales commencent par "\x", par exemple <code>\xA9</code></li>
- <li>Les séquences d'échappement octales commencent par un "\0o" suivi d'un (ou plusieurs) chiffre(s), par exemple <code>\0o251</code>.</li>
-</ul>
-
-<p>Cela signifie qu'un gabarit étiqueté comme celui qui suit pose problème du fait que, selon la grammaire ECMAScript, un analyseur recherchera des séquences d'échappement Unicode valides, mais trouvera la syntaxe mal formée :</p>
-
-<pre class="brush: js">latex`\unicode`
-// Génère, dans les anciennes versions ECMAScript (ES2016 et précédentes)
-// SyntaxError: malformed Unicode character escape sequence</pre>
-
-<h4 id="Révision_ES2018_pour_les_séquences_déchappement_illégales">Révision ES2018 pour les séquences d'échappement illégales</h4>
-
-<p>Les gabarits étiquetés doivent permettre l'intégration d'autres langages (par exemple, des <a href="https://fr.wikipedia.org/wiki/Langage_d%C3%A9di%C3%A9">DSL</a> ou du <a href="https://fr.wikipedia.org/wiki/LaTeX">LaTeX</a>), dans lesquels d'autres séquences d'échappement sont fréquentes. La proposition <a href="https://tc39.github.io/proposal-template-literal-revision/">Template Literal Revision</a> pour ECMAScript (étape 4, à intégrer dans le standard ECMAScript 2018) supprime la restriction syntaxique des séquences d'échappement dans les gabarits étiquetés.</p>
-
-<p>Toutefois, les séquences d'échappement illégales doivent toujours être représentées dans la version "bidouillée". Elles seront affichées comme un élément {{jsxref("undefined")}} dans le tableau "bidouillé" :</p>
-
-<pre class="brush: js">function latex(chn) {
- return { "bidouillee": chn[0], "brute": chn.raw[0] }
-}
-
-latex`\unicode`
-
-// { bidouillee: undefined, brute: "\\unicode" }</pre>
-
-<p>Notez que la restriction sur les séquences d'échappement est uniquement supprimée pour les gabarits <em>étiquetés</em>, et non pour les gabarits de libellés <em>non étiquetés</em> :</p>
-
-<pre class="brush: js example-bad">let mauvaise = `mauvaise séquence d'échappement : \unicode`;</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-template-literals', 'Template Literals')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td>Définition initiale. Définie dans plusieurs sections de la spécification : <a href="https://www.ecma-international.org/ecma-262/6.0/#sec-template-literals">Template Literals</a>, <a href="https://www.ecma-international.org/ecma-262/6.0/#sec-tagged-templates">Tagged Templates</a></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-template-literals', 'Template Literals')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td>Définie dans plusieurs sections de la spécification : <a href="https://tc39.github.io/ecma262/#sec-template-literals">Template Literals</a>, <a href="https://tc39.github.io/ecma262/#sec-tagged-templates">Tagged Templates</a></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.grammar.template_literals")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("String")}}</li>
- <li>{{jsxref("String.raw()")}}</li>
- <li><a href="/fr/docs/Web/JavaScript/Reference/Grammaire_lexicale">Grammaire lexicale</a></li>
- <li><em><a href="https://gist.github.com/WebReflection/8f227532143e63649804">Template-like strings in ES3 compatible syntax</a></em></li>
- <li><a href="https://tech.mozfr.org/post/2015/05/27/ES6-en-details-%3A-les-gabarits-de-chaines-de-caracteres"><em>ES6 en détails : les gabarits de libellé</em> sur tech.mozfr.org</a></li>
- <li><em><a href="https://www.styled-components.com/">Styled Components</a></em></li>
-</ul>
diff --git a/files/fr/web/javascript/reference/template_literals/index.md b/files/fr/web/javascript/reference/template_literals/index.md
new file mode 100644
index 0000000000..e774c50664
--- /dev/null
+++ b/files/fr/web/javascript/reference/template_literals/index.md
@@ -0,0 +1,249 @@
+---
+title: Littéraux de gabarits
+slug: Web/JavaScript/Reference/Template_literals
+tags:
+  - Chaîne de caractères
+  - ECMAScript 2015
+  - Guide
+  - JavaScript
+  - Littéraux de gabarits
+translation_of: Web/JavaScript/Reference/Template_literals
+original_slug: Web/JavaScript/Reference/Littéraux_gabarits
+---
+{{JsSidebar("More")}}
+
+Les littéraux de gabarits sont des littéraux de chaînes de caractères permettant d'intégrer des expressions. Avec eux, on peut utiliser des chaînes de caractères multi-lignes et des fonctionnalités d'interpolation.
+
+> **Note :** Dans les premières versions de la spécification ECMAScript 2015, cette fonctionnalité était intitulée « gabarits de chaîne de caractères ». Dans la suite de cet article, les expressions « gabarits de texte », « gabarits de libellés », « littéraux de gabarits » et « gabarits » seront équivalents.
+
+## Syntaxe
+
+    `texte`
+
+    `ligne de texte 1
+     ligne de texte 2`
+
+    `texte ${expression} texte`
+
+    etiquette `texte ${expression} texte`
+
+## Description
+
+Les gabarits sont délimités par des caractères [accent grave](https://fr.wikipedia.org/wiki/Accent_grave) (\` \`)  au lieu des apostrophes doubles ou simples. Les gabarits peuvent contenir des espaces réservés (_placeholders_). Ces espaces sont indiqués par le signe dollar ($) et des accolades (`${expression})`. Les expressions dans les espaces réservés et le texte compris dans ces espaces sont passés à une fonction.
+
+Pour créer la chaîne finale, la fonction par défaut concatène simplement les différentes parties en une seule chaîne. Toutefois, on peut utiliser une fonction spécifique pour obtenir un comportement différent et recomposer la chaîne avec une autre logique. On parlera alors [de gabarit étiqueté (cf. ci-après)](#Gabarits_étiquetés).
+
+```js
+let rep = 42;
+console.log(`La réponse est ${rep}`); // Gabarit simple avec la concaténation par défaut
+
+function concatenationAdHoc(chaines, reponse){
+  let parite;
+  if(reponse % 2 === 0){
+    parite = "paire";
+  } else {
+    parite = "impaire";
+  }
+  return `${chaines[0]}${parite}.`;
+}
+// concaténation spécifique où on modifie la sortie
+console.log(concatenationAdHoc`La réponse est ${rep}.`);
+```
+
+Pour utiliser des accents graves dans un gabarit, on les échappera avec une barre oblique inverse (\\) :
+
+```js
+`\`` === "`"; // true
+```
+
+### Les chaînes de caractères multi-lignes
+
+Tous les caractères de saut de ligne insérés dans la source font partie du gabarit. Avec des chaînes de caractères normales, il aurait fallu utiliser la syntaxe suivante pour obtenir des chaînes multi-lignes :
+
+```js
+console.log('ligne de texte 1\n'+
+'ligne de texte 2');
+// "ligne de texte 1
+// ligne de texte 2"
+```
+
+Pour obtenir le même effet avec les gabarits, on peut désormais écrire :
+
+```js
+console.log(`ligne de texte 1
+ligne de texte 2`);
+// "ligne de texte 1
+//  ligne de texte 2"
+```
+
+### Interpolation d'expressions
+
+Pour intégrer des expressions dans des chaînes de caractères normales, il fallait utiliser la syntaxe suivante :
+
+```js
+let a = 5;
+let b = 10;
+console.log('Quinze vaut ' + (a + b) + ' et\nnon ' + (2 * a + b) + '.');
+// "Quinze vaut 15 et
+// non 20."
+```
+
+On peut désormais utiliser le sucre syntaxique fourni par les gabarits pour rendre les substitutions plus lisibles :
+
+```js
+let a = 5;
+let b = 10;
+console.log(`Quinze vaut ${a + b} et
+non ${2 * a + b}.`);
+// "Quinze vaut 15 et
+// non 20."
+```
+
+### Imbrication de gabarits
+
+Parfois, l'imbrication d'un gabarit est la solution la plus simple (et peut-être la plus lisible) pour obtenir des chaînes de caractères configurables.
+
+En ES5 :
+
+```js
+let classes = 'header'
+classes += (isLargeScreen() ?
+   '' : item.isCollapsed ?
+     ' icon-expander' : ' icon-collapser');
+```
+
+En ES2015 avec des gabarits et sans imbrication :
+
+```js
+const classes = `header ${ isLargeScreen() ? '' :
+    (item.isCollapsed ? 'icon-expander' : 'icon-collapser') }`;
+```
+
+En ES2015 avec des gabarits imbriqués :
+
+```js
+const classes = `header ${ isLargeScreen() ? '' :
+ `icon-${item.isCollapsed ? 'expander' : 'collapser'}` }`;
+```
+
+### Gabarits étiquetés
+
+Les _gabarits étiquetés_ (_tagged templates_) sont une forme plus avancée de gabarits. On peut ici utiliser une fonction pour analyser les différents fragments du gabarit. Le premier argument passé à la fonction est l'ensemble de valeurs issues de chaînes de caractères sous la forme d'un tableau. Les arguments ensuite passés à la fonction seront les expressions contenues dans le gabarit. La fonction pourra ainsi créer une chaîne avec une autre forme de concaténation et utiliser une logique spécifique. La fonction utilisée pour le formatage du gabarit peut être nommée comme n'importe quelle autre fonction.
+
+```js
+let personne = 'Michou';
+let age = 28;
+
+function monEtiquette(chaines, expPersonne, expAge) {
+  let chn0 = chaines[0]; // "ce "
+  let chn1 = chaines[1]; // " est un "
+
+  // Techniquement, il y a une chaîne après
+  // l'expression finale (dans notre exemple),
+  // mais elle est vide (""), donc ne pas en tenir compte.
+  // var chn2 = chaines[2];
+
+  let chnAge;
+  if (expAge > 99){
+    chnAge = 'centenaire';
+  } else {
+    chnAge = 'jeunot';
+  }
+  // On peut tout à fait renvoyer une chaîne construite
+  // avec un gabarit
+  return `${chn0}${expPersonne}${chn1}${chnAge}`;
+}
+
+let sortie = monEtiquette`ce ${ personne } est un ${ age }`;
+
+console.log(sortie);
+// ce Michou est un jeunot
+```
+
+### Chaînes brutes
+
+La propriété spéciale `raw`, disponible sur le premier argument de la fonction du gabarit étiqueté, vous permet d'accéder aux chaînes brutes, telles qu'elles ont été entrées, sans traiter [les séquences d'échappement](/fr/docs/Web/JavaScript/Guide/Types_et_grammaire#Utilisation_des_caractères_spéciaux).
+
+```js
+function etiquette(chaines) {
+  console.log(chaines.raw[0]);
+}
+
+etiquette`ligne de texte 1 \n ligne de texte 2`;
+// affichera dans la console :
+// "ligne de texte 1 \n ligne de texte 2"
+```
+
+En outre, la méthode {{jsxref("String.raw()")}} a pour fonction de créer des chaînes de caractères brutes, exactement comme la fonction de gabarit et de concaténation de chaînes par défaut le ferait :
+
+```js
+let chn = String.raw`Salut\n${2+3}!`;
+// "Salut\n5!"
+
+chn.length;
+// 9
+
+chn.split('').join(',');
+// "S,a,l,u,t,\,n,5,!"
+```
+
+### Les gabarits étiquetés et les séquences d'échappement
+
+#### Comportement de ES2016
+
+Quant à ECMAScript 2016, les gabarits étiquetés se conforment aux règles de séquences d'échappement suivantes :
+
+- Les séquences d'échappement Unicode commencent par "\u", par exemple`\u00A9`
+- Les séquences d'échappement pour les points de code Unicode sont indiquées par "\u{}", par exemple `\u{2F804}`
+- Les séquences d'échappement hexadécimales commencent par "\x", par exemple `\xA9`
+- Les séquences d'échappement octales commencent par un "\0o" suivi d'un (ou plusieurs) chiffre(s), par exemple `\0o251`.
+
+Cela signifie qu'un gabarit étiqueté comme celui qui suit pose problème du fait que, selon la grammaire ECMAScript, un analyseur recherchera des séquences d'échappement Unicode valides, mais trouvera la syntaxe mal formée :
+
+```js
+latex`\unicode`
+// Génère, dans les anciennes versions ECMAScript (ES2016 et précédentes)
+// SyntaxError: malformed Unicode character escape sequence
+```
+
+#### Révision ES2018 pour les séquences d'échappement illégales
+
+Les gabarits étiquetés doivent permettre l'intégration d'autres langages (par exemple, des [DSL](https://fr.wikipedia.org/wiki/Langage_d%C3%A9di%C3%A9) ou du [LaTeX](https://fr.wikipedia.org/wiki/LaTeX)), dans lesquels d'autres séquences d'échappement sont fréquentes. La proposition [Template Literal Revision](https://tc39.github.io/proposal-template-literal-revision/) pour ECMAScript (étape 4, à intégrer dans le standard ECMAScript 2018) supprime la restriction syntaxique des séquences d'échappement dans les gabarits étiquetés.
+
+Toutefois, les séquences d'échappement illégales doivent toujours être représentées dans la version "bidouillée". Elles seront affichées comme un élément {{jsxref("undefined")}} dans le tableau "bidouillé" :
+
+```js
+function latex(chn) {
+ return { "bidouillee": chn[0], "brute": chn.raw[0] }
+}
+
+latex`\unicode`
+
+// { bidouillee: undefined, brute: "\\unicode" }
+```
+
+Notez que la restriction sur les séquences d'échappement est uniquement supprimée pour les gabarits _étiquetés_, et non pour les gabarits de libellés *non étiquetés* :
+
+```js example-bad
+let mauvaise = `mauvaise séquence d'échappement : \unicode`;
+```
+
+## Spécifications
+
+| Spécification                                                                                | État                         | Commentaires                                                                                                                                                                                                                                                      |
+| -------------------------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| {{SpecName('ES2015', '#sec-template-literals', 'Template Literals')}} | {{Spec2('ES2015')}}     | Définition initiale. Définie dans plusieurs sections de la spécification : [Template Literals](https://www.ecma-international.org/ecma-262/6.0/#sec-template-literals), [Tagged Templates](https://www.ecma-international.org/ecma-262/6.0/#sec-tagged-templates) |
+| {{SpecName('ESDraft', '#sec-template-literals', 'Template Literals')}} | {{Spec2('ESDraft')}} | Définie dans plusieurs sections de la spécification : [Template Literals](https://tc39.github.io/ecma262/#sec-template-literals), [Tagged Templates](https://tc39.github.io/ecma262/#sec-tagged-templates)                                                        |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.grammar.template_literals")}}
+
+## Voir aussi
+
+- {{jsxref("String")}}
+- {{jsxref("String.raw()")}}
+- [Grammaire lexicale](/fr/docs/Web/JavaScript/Reference/Grammaire_lexicale)
+- _[Template-like strings in ES3 compatible syntax](https://gist.github.com/WebReflection/8f227532143e63649804)_
+- [_ES6 en détails : les gabarits de libellé_ sur tech.mozfr.org](https://tech.mozfr.org/post/2015/05/27/ES6-en-details-%3A-les-gabarits-de-chaines-de-caracteres)
+- _[Styled Components](https://www.styled-components.com/)_
diff --git a/files/fr/web/javascript/reference/trailing_commas/index.html b/files/fr/web/javascript/reference/trailing_commas/index.html
deleted file mode 100644
index 7c7f2f3a55..0000000000
--- a/files/fr/web/javascript/reference/trailing_commas/index.html
+++ /dev/null
@@ -1,182 +0,0 @@
----
-title: Virgules finales (trailing commas)
-slug: Web/JavaScript/Reference/Trailing_commas
-tags:
-  - ECMAScript2017
-  - ECMAScript5
-  - JavaScript
-  - Syntaxe
-  - Virgule
-translation_of: Web/JavaScript/Reference/Trailing_commas
-original_slug: Web/JavaScript/Reference/Virgules_finales
----
-<div>{{JsSidebar("More")}}</div>
-
-<p>Les <strong>virgules finales</strong> (<em>trailing commas</em> en anglais) s'avèrent utiles lorsqu'on souhaite ajouter de nouveaux éléments, paramètres ou de nouvelles propriétés à du code JavaScript. Si on souhaite ajouter une propriété en fin de course, on peut simplement ajouter une ligne sans avoir à modifier la précédente si celle-ci utilise une virgule finale. Cela permet d'avoir des vues de différences (<em>diffs</em>) plus claires et de simplifier l'édition de code.</p>
-
-<p>Les virgules finales peuvent être utilisées dans les littéraux de tableau depuis le début. Elles sont été ajoutées dans les littéraux objets à partir d'ECMAScript 5 et ECMAScript 2017 permet de les utiliser dans la liste des paramètres d'une fonction.</p>
-
-<p>{{Glossary("JSON")}}, en revanche, ne permet pas d'utiliser des virgules finales.</p>
-
-<h2 id="Les_virgules_finales_dans_les_littéraux">Les virgules finales dans les littéraux</h2>
-
-<h3 id="Tableaux">Tableaux</h3>
-
-<p>JavaScript ignore les virgules finales dans les tableaux :</p>
-
-<pre class="brush: js">var arr = [
-  1,
-  2,
-  3,
-];
-
-arr; // [1, 2, 3]
-arr.length; // 3</pre>
-
-<p>Si plusieurs virgules finales sont utilisées, cela crée un vide dans le tableau. Un tableau avec des vides est parfois qualifié de <em>parsemé</em> (ou <em>sparse</em> en anglais). Lorsqu'on parcourt un tableau avec les méthodes {{jsxref("Array.prototype.forEach()")}} ou {{jsxref("Array.prototype.map()")}}, par exemple, ces vides sont ignorés.</p>
-
-<pre class="brush: js">var arr = [1, 2, 3,,,];
-arr.length; // 5
-</pre>
-
-<h3 id="Objets">Objets</h3>
-
-<p>À partir d'ECMAScript 5, on peut également utiliser les virgules finales dans les littéraux objets :</p>
-
-<pre class="brush: js">var objet = {
-  toto: "truc",
-  bidule: "azerty",
-  age: 42,
-};</pre>
-
-<h2 id="Les_virgules_finales_dans_les_fonctions">Les virgules finales dans les fonctions</h2>
-
-<p>ECMAScript 2017 permet d'utiliser les virgules finales dans la liste des paramètres d'une fonction.</p>
-
-<h3 id="Définitions_des_paramètres">Définitions des paramètres</h3>
-
-<p>Pour chacune des deux paires de définitions qui suivent, les deux définitions sont autorisées et équivalentes entre elles. Les virgules finales n'ont pas d'impact sur la propriété <code>length</code> de la fonction ni sur l'objet <a href="/fr/docs/Web/JavaScript/Reference/Fonctions/arguments">arguments</a>.</p>
-
-<pre class="brush: js">function f(p) {}
-function f(p,) {}
-
-(p) =&gt; {};
-(p,) =&gt; {};
-</pre>
-
-<p>Les virgules finales peuvent également être utilisées lors <a href="/fr/docs/Web/JavaScript/Reference/Fonctions/Définition_de_méthode">des définitions de méthodes</a> dans les objets et les classes :</p>
-
-<pre class="brush: js">class C {
-  un(a,) {},
-  deux(a, b,) {},
-}
-
-var obj = {
-  un(a,) {},
-  deux(a, b,) {},
-};
-</pre>
-
-<h3 id="Appels_de_fonctions">Appels de fonctions</h3>
-
-<p>Pour chacune des deux paires d'appels qui suivent, les deux appels sont équivalents entre eux :</p>
-
-<pre class="brush: js">f(p);
-f(p,);
-
-Math.max(10, 20);
-Math.max(10, 20,);
-</pre>
-
-<h3 id="Virgules_finales_non-autorisées">Virgules finales non-autorisées</h3>
-
-<p>Les définitions de paramètres ou les appels de fonctions qui ne contiennent qu'une seule virgule lèveront une exception {{Jsxref("SyntaxError")}}. Par ailleurs, on ne peut pas utiliser de virgule finale avec <a href="/fr/docs/Web/JavaScript/Reference/Fonctions/paramètres_du_reste">les paramètres du reste</a> :</p>
-
-<pre class="brush: js example-bad">function f(,) {} // SyntaxError: missing formal parameter
-(,) =&gt; {};       // SyntaxError: expected expression, got ','
-f(,)             // SyntaxError: expected expression, got ','
-
-function f(...p,) {} // SyntaxError: parameter after rest parameter
-(...p,) =&gt; {}        // SyntaxError: expected closing parenthesis, got ','
-</pre>
-
-<h2 id="Les_virgules_finales_et_la_décomposition">Les virgules finales et la décomposition</h2>
-
-<p>On peut aussi utiliser une virgule finale dans l'opérande gauche lorsqu'on utilise <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Affecter_par_décomposition">l'affectation par décomposition</a> :</p>
-
-<pre class="brush: js">// Décomposition d'un tableau avec
-// une virgule finale
-[a, b,] = [1, 2];
-
-// Décomposition d'un objet avec une
-// virgule finale
-var o = {
-  p: 42,
-  q: true,
-};
-var {p, q,} = o;
-</pre>
-
-<p>Là encore, si on utilise un élément du reste, une exception {{jsxref("SyntaxError")}} sera levée :</p>
-
-<pre class="brush: js example-bad">var [a, ...b,] = [1, 2, 3];
-// SyntaxError: rest element may not have a trailing comma</pre>
-
-<h2 id="Les_virgules_finales_en_JSON">Les virgules finales en JSON</h2>
-
-<p>L'utilisation des virgules finales dans les objets a été introduite avec ECMAScript 5. Toutefois, le format JSON est basé sur la syntaxe JavaScript antérieure à ES5 <strong>et les virgules finales sont donc interdites en JSON</strong>.</p>
-
-<p>Les deux lignes suivantes lèveront une exception {{jsxref("SyntaxError")}} :</p>
-
-<pre class="brush: js example-bad">JSON.parse('[1, 2, 3, 4, ]');
-JSON.parse('{"foo" : 1, }');
-// SyntaxError JSON.parse: unexpected character
-// at line 1 column 14 of the JSON data
-</pre>
-
-<p>Pour analyser le JSON correctement, on évitera les virgules finales :</p>
-
-<pre class="brush: js example-good">JSON.parse('[1, 2, 3, 4 ]');
-JSON.parse('{"foo" : 1 }');</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td>Ajout des virgules finales pour les littéraux objets.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td>Aucune modification.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2017')}}</td>
-   <td>{{Spec2('ES2017')}}</td>
-   <td>Ajout des virgules finales à la liste des arguments d'une fonction (déclaration et appels).</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td>ES2017 added trailing function commas.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.grammar.trailing_commas")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>La proposition initiale pour ECMAScript, déposée par Jeff Morrison, afin d'utiliser <a href="https://github.com/tc39/proposal-trailing-function-commas">les virgules finales dans les fonctions</a>.</li>
-</ul>
diff --git a/files/fr/web/javascript/reference/trailing_commas/index.md b/files/fr/web/javascript/reference/trailing_commas/index.md
new file mode 100644
index 0000000000..6bc351d4d4
--- /dev/null
+++ b/files/fr/web/javascript/reference/trailing_commas/index.md
@@ -0,0 +1,172 @@
+---
+title: Virgules finales (trailing commas)
+slug: Web/JavaScript/Reference/Trailing_commas
+tags:
+  - ECMAScript2017
+  - ECMAScript5
+  - JavaScript
+  - Syntaxe
+  - Virgule
+translation_of: Web/JavaScript/Reference/Trailing_commas
+original_slug: Web/JavaScript/Reference/Virgules_finales
+---
+{{JsSidebar("More")}}
+
+Les **virgules finales** (_trailing commas_ en anglais) s'avèrent utiles lorsqu'on souhaite ajouter de nouveaux éléments, paramètres ou de nouvelles propriétés à du code JavaScript. Si on souhaite ajouter une propriété en fin de course, on peut simplement ajouter une ligne sans avoir à modifier la précédente si celle-ci utilise une virgule finale. Cela permet d'avoir des vues de différences (_diffs_) plus claires et de simplifier l'édition de code.
+
+Les virgules finales peuvent être utilisées dans les littéraux de tableau depuis le début. Elles sont été ajoutées dans les littéraux objets à partir d'ECMAScript 5 et ECMAScript 2017 permet de les utiliser dans la liste des paramètres d'une fonction.
+
+{{Glossary("JSON")}}, en revanche, ne permet pas d'utiliser des virgules finales.
+
+## Les virgules finales dans les littéraux
+
+### Tableaux
+
+JavaScript ignore les virgules finales dans les tableaux :
+
+```js
+var arr = [
+  1,
+  2,
+  3,
+];
+
+arr; // [1, 2, 3]
+arr.length; // 3
+```
+
+Si plusieurs virgules finales sont utilisées, cela crée un vide dans le tableau. Un tableau avec des vides est parfois qualifié de _parsemé_ (ou _sparse_ en anglais). Lorsqu'on parcourt un tableau avec les méthodes {{jsxref("Array.prototype.forEach()")}} ou {{jsxref("Array.prototype.map()")}}, par exemple, ces vides sont ignorés.
+
+```js
+var arr = [1, 2, 3,,,];
+arr.length; // 5
+```
+
+### Objets
+
+À partir d'ECMAScript 5, on peut également utiliser les virgules finales dans les littéraux objets :
+
+```js
+var objet = {
+  toto: "truc",
+  bidule: "azerty",
+  age: 42,
+};
+```
+
+## Les virgules finales dans les fonctions
+
+ECMAScript 2017 permet d'utiliser les virgules finales dans la liste des paramètres d'une fonction.
+
+### Définitions des paramètres
+
+Pour chacune des deux paires de définitions qui suivent, les deux définitions sont autorisées et équivalentes entre elles. Les virgules finales n'ont pas d'impact sur la propriété `length` de la fonction ni sur l'objet [arguments](/fr/docs/Web/JavaScript/Reference/Fonctions/arguments).
+
+```js
+function f(p) {}
+function f(p,) {}
+
+(p) => {};
+(p,) => {};
+```
+
+Les virgules finales peuvent également être utilisées lors [des définitions de méthodes](/fr/docs/Web/JavaScript/Reference/Fonctions/Définition_de_méthode) dans les objets et les classes :
+
+```js
+class C {
+  un(a,) {},
+  deux(a, b,) {},
+}
+
+var obj = {
+  un(a,) {},
+  deux(a, b,) {},
+};
+```
+
+### Appels de fonctions
+
+Pour chacune des deux paires d'appels qui suivent, les deux appels sont équivalents entre eux :
+
+```js
+f(p);
+f(p,);
+
+Math.max(10, 20);
+Math.max(10, 20,);
+```
+
+### Virgules finales non-autorisées
+
+Les définitions de paramètres ou les appels de fonctions qui ne contiennent qu'une seule virgule lèveront une exception {{Jsxref("SyntaxError")}}. Par ailleurs, on ne peut pas utiliser de virgule finale avec [les paramètres du reste](/fr/docs/Web/JavaScript/Reference/Fonctions/paramètres_du_reste) :
+
+```js example-bad
+function f(,) {} // SyntaxError: missing formal parameter
+(,) => {};       // SyntaxError: expected expression, got ','
+f(,)             // SyntaxError: expected expression, got ','
+
+function f(...p,) {} // SyntaxError: parameter after rest parameter
+(...p,) => {}        // SyntaxError: expected closing parenthesis, got ','
+```
+
+## Les virgules finales et la décomposition
+
+On peut aussi utiliser une virgule finale dans l'opérande gauche lorsqu'on utilise [l'affectation par décomposition](/fr/docs/Web/JavaScript/Reference/Opérateurs/Affecter_par_décomposition) :
+
+```js
+// Décomposition d'un tableau avec
+// une virgule finale
+[a, b,] = [1, 2];
+
+// Décomposition d'un objet avec une
+// virgule finale
+var o = {
+  p: 42,
+  q: true,
+};
+var {p, q,} = o;
+```
+
+Là encore, si on utilise un élément du reste, une exception {{jsxref("SyntaxError")}} sera levée :
+
+```js example-bad
+var [a, ...b,] = [1, 2, 3];
+// SyntaxError: rest element may not have a trailing comma
+```
+
+## Les virgules finales en JSON
+
+L'utilisation des virgules finales dans les objets a été introduite avec ECMAScript 5. Toutefois, le format JSON est basé sur la syntaxe JavaScript antérieure à ES5 **et les virgules finales sont donc interdites en JSON**.
+
+Les deux lignes suivantes lèveront une exception {{jsxref("SyntaxError")}} :
+
+```js example-bad
+JSON.parse('[1, 2, 3, 4, ]');
+JSON.parse('{"foo" : 1, }');
+// SyntaxError JSON.parse: unexpected character
+// at line 1 column 14 of the JSON data
+```
+
+Pour analyser le JSON correctement, on évitera les virgules finales :
+
+```js example-good
+JSON.parse('[1, 2, 3, 4 ]');
+JSON.parse('{"foo" : 1 }');
+```
+
+## Spécifications
+
+| Spécification                    | État                         | Commentaires                                                                                |
+| -------------------------------- | ---------------------------- | ------------------------------------------------------------------------------------------- |
+| {{SpecName('ES5.1')}}     | {{Spec2('ES5.1')}}     | Ajout des virgules finales pour les littéraux objets.                                       |
+| {{SpecName('ES6')}}         | {{Spec2('ES6')}}         | Aucune modification.                                                                        |
+| {{SpecName('ES2017')}}     | {{Spec2('ES2017')}}     | Ajout des virgules finales à la liste des arguments d'une fonction (déclaration et appels). |
+| {{SpecName('ESDraft')}} | {{Spec2('ESDraft')}} | ES2017 added trailing function commas.                                                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.grammar.trailing_commas")}}
+
+## Voir aussi
+
+- La proposition initiale pour ECMAScript, déposée par Jeff Morrison, afin d'utiliser [les virgules finales dans les fonctions](https://github.com/tc39/proposal-trailing-function-commas).
diff --git a/files/fr/web/javascript/shells/index.html b/files/fr/web/javascript/shells/index.html
deleted file mode 100644
index 735982aea9..0000000000
--- a/files/fr/web/javascript/shells/index.html
+++ /dev/null
@@ -1,43 +0,0 @@
----
-title: Shells JavaScript
-slug: Web/JavaScript/Shells
-tags:
-  - Extension
-  - JavaScript
-  - Tools
-translation_of: Web/JavaScript/Shells
----
-<div>{{JsSidebar}}</div>
-
-<p>Un <em>shell</em> (ou une interface système) JavaScript permet de tester rapidement des fragments de code <a href="/fr/docs/Web/JavaScript">JavaScript</a> sans devoir recharger constamment une page web. Ce type d'outil est très utile pour développer et déboguer du code.</p>
-
-<h2 id="Des_shells_JavaScript_autonomes">Des shells JavaScript autonomes</h2>
-
-<p>Les shells JavaScript suivants sont des environnements autonomes, comme ceux que l'on peut trouver pour Perl ou Python.</p>
-
-<ul>
- <li><a href="http://nodejs.org/">Node.js</a> - Node.js est une plateforme logicielle qui facilite la création d'applications réseau évolutives, elle est basée sur le moteur V8 de Chrome.</li>
- <li><a href="http://www.jsdb.org/">JSDB</a> - Ce shell autonome propose des binaires compilés pour Windows, Mac et Linux.</li>
- <li><a href="http://javalikescript.free.fr/">JavaLikeScript</a> - Ce shell autonome et extensible inclut des bibliothèques natives et JavaScript.</li>
- <li><a href="http://gluescript.sourceforge.net/">GLUEscript</a> - Ce shell autonome permet d'écrire des applications multiplateformes avec JavaScript. Il peut utiliser wxWidgets pour créer des applications graphiques, et était initialement appelé wxJavaScript.</li>
- <li><a href="http://jspl.msg.mx/">jspl</a> - Ce shell autonome est amélioré par Perl. Il peut utiliser des modules Perl directement depuis du code JavaScript : DBI pour se connecter à une base de données, GTK2 pour faire des applications graphiques, POSIX pour faire de la programmation système, etc. Bref, le meilleur de CPAN est à présent disponible pour les programmeurs JavaScript.</li>
- <li><a href="http://shelljs.org">ShellJS</a> - Une interface en ligne de commandes Unix portable pour Node.js.</li>
-</ul>
-
-<h2 id="Liste_des_shells_JavaScript">Liste des shells JavaScript</h2>
-
-<p>Les shells suivants fonctionnent avec Mozilla.</p>
-
-<ul>
- <li>Firefox intègre directement un <a href="/fr/docs/Tools/Web_Console/The_command_line_interpreter#le_mode_%C3%A9diteur_multiligne">éditeur multiligne</a> (aussi appelée Scratchpad) depuis la version 6.</li>
- <li><a href="/fr/docs/Introduction_au_shell_JavaScript">JavaScript Shell</a> (<code>js</code>) - Un interpréteur JavaScript en ligne de commande.</li>
- <li><a href="/fr/docs/xpcshell">xpcshell</a> est un shell qui peut utiliser <a href="/fr/docs/XPConnect">XPConnect</a>, ce qui est parfois utile pour du développement Mozilla.</li>
- <li><a href="http://jsconsole.com/">jsconsole.com</a> est une console JavaScript open-source, qui permet notamment de créer facilement des liens vers les expressions saisies précédemment.</li>
- <li><a href="http://www.squarefree.com/shell/">JavaScript Shell (page web)</a>  est aussi disponible avec l'extension <a class="link-https" href="https://addons.mozilla.org/fr/firefox/addon/extension-developer/">Developer Assistant</a>.</li>
- <li><a href="http://billyreisinger.com/jash/">Jash: JavaScript Shell</a> est un shell DHTML qui donne un accès en ligne de commande à une page web.</li>
- <li><a href="https://github.com/bard/mozrepl">MozRepl</a> permet de se connecter à Firefox et à d'autres applications Mozilla, de les explorer, et de les modifier depuis l'intérieur pendant leur exécution.</li>
- <li><a href="https://addons.mozilla.org/fr/firefox/addon/execute-js/">Execute JS</a> est une extension Firefox qui propose une console JavaScript améliorée, où il est possible d'exécuter facilement du code JavaScript et de modifier des fonctions. Cette extension n'est plus maintenue.</li>
- <li><a href="https://addons.mozilla.org/addon/159546">xqjs</a> est une console simple pour Firefox.</li>
- <li><a href="https://addons.mozilla.org/fr/firefox/addon/firebug/">Firebug</a> est un ensemble d'outils pour les développeurs, qui contient notamment une console.</li>
- <li><a href="http://es6console.com">ES6Console.com</a> - Une console JavaScript open-source qui permet de tester du code ECMAScript 2015 (ES6) dans le navigateur.</li>
-</ul>
diff --git a/files/fr/web/javascript/shells/index.md b/files/fr/web/javascript/shells/index.md
new file mode 100644
index 0000000000..dc0dd750b7
--- /dev/null
+++ b/files/fr/web/javascript/shells/index.md
@@ -0,0 +1,39 @@
+---
+title: Shells JavaScript
+slug: Web/JavaScript/Shells
+tags:
+  - Extension
+  - JavaScript
+  - Tools
+translation_of: Web/JavaScript/Shells
+---
+{{JsSidebar}}
+
+Un _shell_ (ou une interface système) JavaScript permet de tester rapidement des fragments de code [JavaScript](/fr/docs/Web/JavaScript) sans devoir recharger constamment une page web. Ce type d'outil est très utile pour développer et déboguer du code.
+
+## Des shells JavaScript autonomes
+
+Les shells JavaScript suivants sont des environnements autonomes, comme ceux que l'on peut trouver pour Perl ou Python.
+
+- [Node.js](http://nodejs.org/) - Node.js est une plateforme logicielle qui facilite la création d'applications réseau évolutives, elle est basée sur le moteur V8 de Chrome.
+- [JSDB](http://www.jsdb.org/) - Ce shell autonome propose des binaires compilés pour Windows, Mac et Linux.
+- [JavaLikeScript](http://javalikescript.free.fr/) - Ce shell autonome et extensible inclut des bibliothèques natives et JavaScript.
+- [GLUEscript](http://gluescript.sourceforge.net/) - Ce shell autonome permet d'écrire des applications multiplateformes avec JavaScript. Il peut utiliser wxWidgets pour créer des applications graphiques, et était initialement appelé wxJavaScript.
+- [jspl](http://jspl.msg.mx/) - Ce shell autonome est amélioré par Perl. Il peut utiliser des modules Perl directement depuis du code JavaScript : DBI pour se connecter à une base de données, GTK2 pour faire des applications graphiques, POSIX pour faire de la programmation système, etc. Bref, le meilleur de CPAN est à présent disponible pour les programmeurs JavaScript.
+- [ShellJS](http://shelljs.org) - Une interface en ligne de commandes Unix portable pour Node.js.
+
+## Liste des shells JavaScript
+
+Les shells suivants fonctionnent avec Mozilla.
+
+- Firefox intègre directement un [éditeur multiligne](/fr/docs/Tools/Web_Console/The_command_line_interpreter#le_mode_%C3%A9diteur_multiligne) (aussi appelée Scratchpad) depuis la version 6.
+- [JavaScript Shell](/fr/docs/Introduction_au_shell_JavaScript) (`js`) - Un interpréteur JavaScript en ligne de commande.
+- [xpcshell](/fr/docs/xpcshell) est un shell qui peut utiliser [XPConnect](/fr/docs/XPConnect), ce qui est parfois utile pour du développement Mozilla.
+- [jsconsole.com](http://jsconsole.com/) est une console JavaScript open-source, qui permet notamment de créer facilement des liens vers les expressions saisies précédemment.
+- [JavaScript Shell (page web)](http://www.squarefree.com/shell/)  est aussi disponible avec l'extension [Developer Assistant](https://addons.mozilla.org/fr/firefox/addon/extension-developer/).
+- [Jash: JavaScript Shell](http://billyreisinger.com/jash/) est un shell DHTML qui donne un accès en ligne de commande à une page web.
+- [MozRepl](https://github.com/bard/mozrepl) permet de se connecter à Firefox et à d'autres applications Mozilla, de les explorer, et de les modifier depuis l'intérieur pendant leur exécution.
+- [Execute JS](https://addons.mozilla.org/fr/firefox/addon/execute-js/) est une extension Firefox qui propose une console JavaScript améliorée, où il est possible d'exécuter facilement du code JavaScript et de modifier des fonctions. Cette extension n'est plus maintenue.
+- [xqjs](https://addons.mozilla.org/addon/159546) est une console simple pour Firefox.
+- [Firebug](https://addons.mozilla.org/fr/firefox/addon/firebug/) est un ensemble d'outils pour les développeurs, qui contient notamment une console.
+- [ES6Console.com](http://es6console.com) - Une console JavaScript open-source qui permet de tester du code ECMAScript 2015 (ES6) dans le navigateur.
diff --git a/files/fr/web/javascript/the_performance_hazards_of_prototype_mutation/index.html b/files/fr/web/javascript/the_performance_hazards_of_prototype_mutation/index.html
deleted file mode 100644
index cbdd057f2a..0000000000
--- a/files/fr/web/javascript/the_performance_hazards_of_prototype_mutation/index.html
+++ /dev/null
@@ -1,138 +0,0 @@
----
-title: 'Performance : les dangers liés à la modification de [[Prototype]'
-slug: Web/JavaScript/The_performance_hazards_of_prototype_mutation
-tags:
-  - JavaScript
-  - Performance
-translation_of: Web/JavaScript/The_performance_hazards_of__[[Prototype]]_mutation
-original_slug: Web/JavaScript/Performance_les_dangers_liés_à_la_modification_de_Prototype
----
-<div>{{draft}}</div>
-
-<p>Chaque objet JavaScript possède un prototype (que nous désignerons par la suite par <code>[[Prototype]]</code>, la notation utilisée par la spécification et les implémentations). Lorsqu'on recherche des propriétés sur un objet, on consulte d'abord cet objet puis on analyse son prototype (on « remonte la chaîne ») et ensuite le prototype de ce dernier et ainsi de suite jusqu'à trouver la propriété en question ou jusqu'à ce que la chaîne soit terminée. Cette chaîne est particulièrement utile pour émuler <a href="/fr/docs/Web/JavaScript/Héritage_et_chaîne_de_prototypes">l'héritage entre objets</a>.</p>
-
-<p>ECMAScript 6 introduit certaines méthode pour <em>modifier</em> <code>[[Prototype]]</code>. Cette flexibilité a un coût : la dégradation significative des performances. <strong>Modifier</strong> <strong><code>[[Prototype]]</code> impacte négativement les performances pour <em>tous</em> les moteurs JavaScript modernes.</strong> Dans cet article, nous expliquerons pourquoi et nous verrons les alternatives à privilégier.</p>
-
-<h2 id="De_l'optimisation_des_accès_aux_propriétés_dans_les_moteurs_JavaScript">De l'optimisation des accès aux propriétés dans les moteurs JavaScript</h2>
-
-<p>Les objets sont <a href="https://fr.wikipedia.org/wiki/Table_de_hachage">des tables de hachage</a>, ainsi, en théorie (et en pratique) l'accès à une propriété se fait en temps constant. En revanche, ce « temps constant » peut se décomposer en milliers d'instructions machine. Heureusement, les objets et les propriétés sont souvent « prédictibles » et dans ces cas, la structure sous-jacente peut également être prédictible. Les compilateurs à la volée (ou <em>JIT</em> pour <em>Just In Time</em>) reposent sur ce constat pour rendre les accès plus rapides.</p>
-
-<p>L'optimisation des moteurs s'applique grâce à l'ordre selon lequel les propriétés sont ajoutées aux objets. La plupart des propriétés ajoutées aux objets sont ajoutés dans un ordre semblable (exception faite des accès effectués sous la forme <code>obj[val]</code> où <code>val</code> est une valeur dynamique non constante).</p>
-
-<pre>function Landmark(lat, lon, desc) {
-  this.location = { lat: lat, long: lon };
-  this.description = desc;
-}
-var lm1 = new Landmark(-90, 0, "South Pole");
-var lm2 = new Landmark(-24.3756466, -128.311018, "Pitcairn Islands");</pre>
-
-<p>Dans cet exemple, chaque <code>Landmark</code> possède les propriétés <code>location</code> et <code>description</code>, <strong>dans cet ordre.</strong> Chaque objet <code>location</code> représentant l'emplacement enregistrera la latitude puis la longitude, <strong>dans cet ordre</strong>. Le code qui suit <em>pourrait</em> supprimer une propriété mais comme c'est peu probable, les moteurs peuvent être amenés à produire du code non optimal pour ces cas de figure. Pour SpiderMonkey, le moteur JavaScript de Firefox, l'ordre spécifique des propriétés (et de certains de leurs aspects en dehors de leurs valeurs) est appelé une <em>forme</em> (le moteur V8, utilisé par Chrome, intitule ce concept <em>structure ID</em>). Si deux objets partagent la même forme, leurs propriétés seront stockées de façon identique.</p>
-
-<p>À l'intérieur des moteurs, on retrouve donc une version C++ semblable à celle-ci (simplifiée ici) :</p>
-
-<pre class="brush: cpp">struct Property {
-  Property* prev;     // null si c'est la première propriété
-  String name;        // le nom de la propriété
-  unsigned int index; // l'index de la valeur dans le stockage
-};
-using Shape = Property*;
-struct Object {
-  Shape shape;
-  Value* properties;
-  Object* prototype;
-};</pre>
-
-<p>Avec ces exemples, voici à quoi correspondraient diverses expressions JavaScript basées sur le code ci-dessus, une fois traduites en C++ :</p>
-
-<pre class="brush: cpp">lm1-&gt;properties[0]; // loc1.location
-lm1-&gt;properties[1]; // loc1.description
-lm2-&gt;properties[0].toObject()-&gt;properties[1]; // loc2.location.long</pre>
-
-<p>Si un moteur connaît la forme d'un objet, il pourra présupposer la position des index pour toutes les propriétés de l'objet. Ainsi, quand on souhaite accéder à une propriété donnée, il suffit de quelques accès indirects par pointeur. Le code machine peut facilement vérifier si un objet a une forme donnée. Si c'est le cas, on utilisera la version rapide et sinon on utilisera la méthode lente.</p>
-
-<h2 id="L'optimisation_naïve_des_propriétés_héritées">L'optimisation naïve des propriétés héritées</h2>
-
-<p>La plupart des propriétés ne sont pas rattachées <em>directement</em> aux objets. Il faut souvent passer par la chaîne de prototypes. On ajoute donc quelques « sauts » via le champ <code>prototype</code> pour atterrir sur l'objet qui contient la propriété. Pour obtenir une optimisation <em>correcte</em>, il faut vérifier qu'aucun objet de la chaîne de prototypes n'a cette propriété. Autrement dit, à chaque saut, il faut vérifier la forme de l'objet.</p>
-
-<pre class="brush: js">var d = new Date();
-d.toDateString(); // Date.prototype.toDateString
-
-function Pair(x, y) { this.x = x; this.y = y; }
-Pair.prototype.sum = function() { return this.x + this.y; };
-
-var p = new Pair(3, 7);
-p.sum(); // Pair.prototype.sum</pre>
-
-<p>Dans la plupart des cas, les moteurs utilisent cette approche rapide. Toutefois, lorsque les performances jouent un rôle déterminant, cette approche n'est pas suffisante.</p>
-
-<h2 id="L'optimisation_intelligente_des_propriétés_héritées">L'optimisation intelligente des propriétés héritées</h2>
-
-<p>Lors des accès prédictibles, on trouve <em>généralement</em> la propriété en un nombre constant de sauts le long de la chaîne. Les objets de chaîne n'acquièrent <em>généralement</em> pas de nouvelle propriétés et l'objet final n'est <em>généralement</em> pas affecté par une <a href="Opérateurs/L_opérateur_delete">suppression</a> de propriétés. Enfin, <strong>la modification de <strong><code>[[Prototype]]</code> est</strong> rare</strong>.  Ces hypothèses sont nécessaires pour éviter de « sauter » sur chacun des prototypes. Les différents moteurs optent pour différentes approches afin d'optimiser les propriétés héritées de façon intelligente.</p>
-
-<dl>
- <dt>La forme de l'objet <em>final</em> qui contient la propriété héritée peut être vérifiée.</dt>
- <dd>Dans ce cas, si on teste les formes, cela implique qu'aucun prototype n'a été modifié sur la chaîne. Ainsi, lorsqu'un prototype est modifié, les formes de tous les objets situés sur le long de la chaîne doivent être changées.
- <pre class="brush: js">var obj1 = {};
-var obj2 = Object.create(obj1);
-var obj3 = Object.create(obj2);
-
-// Les objets dont la forme va changer
-// obj3, obj2, obj1, Object.prototype
-obj3.__proto__ = {};</pre>
- </dd>
- <dt>La forme de l'objet initial peut être vérifiée.</dt>
- <dd>Chaque objet qui peut hériter d'une propriété via un prototype modifié doit être modifié afin de refléter ces changements. 
- <pre class="brush: js">var obj1 = {};
-var obj2 = Object.create(obj1);
-var obj3 = Object.create(obj2);
-
-// Les objets dont la forme va changer
-// obj1, obj2, obj3
-obj1.__proto__ = {};</pre>
- </dd>
-</dl>
-
-<h2 id="Les_effets_néfastes_de_la_modification_de_Prototype">Les effets néfastes de la modification de <code>[[Prototype]]</code></h2>
-
-<p>Les changements de <code>[[Prototype]]</code> impactent les performances sur deux phases : lors du changement puis par la suite. Pour commencer, <strong>modifier <code>[[Prototype]]</code> est lent</strong>, ensuite <strong>modifier <code>[[Prototype]]</code> ralentit le code qui doit interagir avec les objets dont <code>[[Prototype]]</code> a été modifié</strong>.</p>
-
-<h3 id="Modifier_un_Prototype_prend_du_temps">Modifier un <code>[[Prototype]]</code> prend du temps</h3>
-
-<p>Bien que la spécification représente le changement de <code>[[Prototype]]</code> comme la simple modification d'une propriété cachée, les implémentations réelles sont beaucoup plus complexes. Les tactiques précédentes utilisant les formes nécessitent d'examiner (et de modifier) plus d'un objet. Dans la pratique, l'approche qui modifiera le moins d'objets sera différente en fonction de la charge provoquée par le cas d'usage.</p>
-
-<h3 id="Les_Prototypes_modifiés_ralentissent_le_code">Les <code>[[Prototype]]</code>s modifiés ralentissent le code</h3>
-
-<p>Les mauvaises nouvelles ne s'arrêtent une fois la modification terminée. De nombreuses opérations utilisées pour examiner les propriétés reposent sur l'hypothèse de conservation de la chaîne de <code>[[Prototype]]</code>. Lorsque le moteur observe une modification, l'objet avec le prototype modifié « empoisonne » tout le code qui manipule cet objet. Voici un cas d'école assez désastreux :</p>
-
-<pre class="brush: js">var obj = {};
-obj.__proto__ = { x: 3 }; // modification gratuite
-
-var arr = [obj];
-for (var i = 0; i &lt; 5; i++)
-  arr.push({ x: i });
-
-function f(v, i) {
-  var elt = v[i];
-  var r =  elt.x &gt; 2 // non optimal
-           ? elt
-           : { x: elt.x + 1 };
-  return r;
-}
-var c = f(arr, 0);
-c.x; // non optimal : la valeur a des propriétés inconnues
-c = f(arr, 1);
-c.x; // non optimal !
-
-var arr2 = [c];
-arr2[0].x; // non optimal
-</pre>
-
-<p>Seul le code exécuté à de nombreuses reprises est optimisé et cet exemple ne déclenche pas <em>tous</em> ces comportements. En revanche pour du code « chaud », on pourrait rencontrer ces problèmes.</p>
-
-<p>Pouvoir tracer l'utilisation d'un objet dont le prototype a été modifié, souvent parmi différents scripts, est extraordinairement complexe. Cela nécessite une analyse textuelle soignée et dépend des comportements à l'exécution. Des modifications indépendentes en apparence peuvent avoir des impacts bien plus loin et le code employé, auparavant optimal, sera alors sous-optimal et plus lent.</p>
-
-<p>Il faudrait sinon pouvoir stocker des informations <em>cross-objet</em>.</p>
-
-<p>Les informations <em>cross-objet</em> sont différentes des formes et on ne peut pas les vérifier simplement. Une modification apportée à cette information pourrait avoir des impacts à de nombreux emplacements, pas nécessairement évidents : dans ce cas, où vérifier que les hypothèses sont respectées ? Ainsi, plutôt que de vérifier ces hypothèses avant l'utilisation, on invalide <em>toutes</em> les hypothèses lorsqu'une modification se produit. Lorsque <code>[[Prototype]]</code> change, <em>tout</em> le code qui en dépend doit être rejeté.  L'opération <code>obj.__proto__ = ...</code> est donc lente par nature. En rejetant du code optimisé, cela rend le code beaucoup plus lent par la suite.</p>
-
-<p>Encore pire, lorsqu'on évalue <code>obj.prop</code>, le moteur voit que l'objet a eu son <code>[[Prototype]]</code> changé et les informations précédemment enregistrées à propos de l'objet deviennent inutiles et SpiderMonkey considère que l'objet possède des caractéristiques inconnues. Ainsi, tout code qui manipule cet objet par la suite prendra l'hypothèse correspondant au pire des cas. L'optimisation des moteurs de compilation à la volée fonctionnent sur l'hypothèse que <em>l'exécution à venir est similaire à l'exécution passée</em>. Si du code observe un objet avec un <code>[[Prototype]]</code> modifié, ce code observera vraisemblablement d'autres objets. C'est pourquoi, <strong>toutes les opérations qui intéragissent avec un objet dont le <code>[[Prototype]]</code> a changé, ne peuvent pas être optimisées</strong>.</p>
diff --git a/files/fr/web/javascript/the_performance_hazards_of_prototype_mutation/index.md b/files/fr/web/javascript/the_performance_hazards_of_prototype_mutation/index.md
new file mode 100644
index 0000000000..93b4752f87
--- /dev/null
+++ b/files/fr/web/javascript/the_performance_hazards_of_prototype_mutation/index.md
@@ -0,0 +1,150 @@
+---
+title: 'Performance : les dangers liés à la modification de [[Prototype]'
+slug: Web/JavaScript/The_performance_hazards_of_prototype_mutation
+tags:
+  - JavaScript
+  - Performance
+translation_of: Web/JavaScript/The_performance_hazards_of__[[Prototype]]_mutation
+original_slug: Web/JavaScript/Performance_les_dangers_liés_à_la_modification_de_Prototype
+---
+{{draft}}
+
+Chaque objet JavaScript possède un prototype (que nous désignerons par la suite par `[[Prototype]]`, la notation utilisée par la spécification et les implémentations). Lorsqu'on recherche des propriétés sur un objet, on consulte d'abord cet objet puis on analyse son prototype (on « remonte la chaîne ») et ensuite le prototype de ce dernier et ainsi de suite jusqu'à trouver la propriété en question ou jusqu'à ce que la chaîne soit terminée. Cette chaîne est particulièrement utile pour émuler [l'héritage entre objets](/fr/docs/Web/JavaScript/Héritage_et_chaîne_de_prototypes).
+
+ECMAScript 6 introduit certaines méthode pour _modifier_ `[[Prototype]]`. Cette flexibilité a un coût : la dégradation significative des performances. **Modifier** **`[[Prototype]]` impacte négativement les performances pour _tous_ les moteurs JavaScript modernes.** Dans cet article, nous expliquerons pourquoi et nous verrons les alternatives à privilégier.
+
+## De l'optimisation des accès aux propriétés dans les moteurs JavaScript
+
+Les objets sont [des tables de hachage](https://fr.wikipedia.org/wiki/Table_de_hachage), ainsi, en théorie (et en pratique) l'accès à une propriété se fait en temps constant. En revanche, ce « temps constant » peut se décomposer en milliers d'instructions machine. Heureusement, les objets et les propriétés sont souvent « prédictibles » et dans ces cas, la structure sous-jacente peut également être prédictible. Les compilateurs à la volée (ou _JIT_ pour _Just In Time_) reposent sur ce constat pour rendre les accès plus rapides.
+
+L'optimisation des moteurs s'applique grâce à l'ordre selon lequel les propriétés sont ajoutées aux objets. La plupart des propriétés ajoutées aux objets sont ajoutés dans un ordre semblable (exception faite des accès effectués sous la forme `obj[val]` où `val` est une valeur dynamique non constante).
+
+    function Landmark(lat, lon, desc) {
+      this.location = { lat: lat, long: lon };
+      this.description = desc;
+    }
+    var lm1 = new Landmark(-90, 0, "South Pole");
+    var lm2 = new Landmark(-24.3756466, -128.311018, "Pitcairn Islands");
+
+Dans cet exemple, chaque `Landmark` possède les propriétés `location` et `description`, **dans cet ordre.** Chaque objet `location` représentant l'emplacement enregistrera la latitude puis la longitude, **dans cet ordre**. Le code qui suit _pourrait_ supprimer une propriété mais comme c'est peu probable, les moteurs peuvent être amenés à produire du code non optimal pour ces cas de figure. Pour SpiderMonkey, le moteur JavaScript de Firefox, l'ordre spécifique des propriétés (et de certains de leurs aspects en dehors de leurs valeurs) est appelé une _forme_ (le moteur V8, utilisé par Chrome, intitule ce concept _structure ID_). Si deux objets partagent la même forme, leurs propriétés seront stockées de façon identique.
+
+À l'intérieur des moteurs, on retrouve donc une version C++ semblable à celle-ci (simplifiée ici) :
+
+```cpp
+struct Property {
+  Property* prev;     // null si c'est la première propriété
+  String name;        // le nom de la propriété
+  unsigned int index; // l'index de la valeur dans le stockage
+};
+using Shape = Property*;
+struct Object {
+  Shape shape;
+  Value* properties;
+  Object* prototype;
+};
+```
+
+Avec ces exemples, voici à quoi correspondraient diverses expressions JavaScript basées sur le code ci-dessus, une fois traduites en C++ :
+
+```cpp
+lm1->properties[0]; // loc1.location
+lm1->properties[1]; // loc1.description
+lm2->properties[0].toObject()->properties[1]; // loc2.location.long
+```
+
+Si un moteur connaît la forme d'un objet, il pourra présupposer la position des index pour toutes les propriétés de l'objet. Ainsi, quand on souhaite accéder à une propriété donnée, il suffit de quelques accès indirects par pointeur. Le code machine peut facilement vérifier si un objet a une forme donnée. Si c'est le cas, on utilisera la version rapide et sinon on utilisera la méthode lente.
+
+## L'optimisation naïve des propriétés héritées
+
+La plupart des propriétés ne sont pas rattachées _directement_ aux objets. Il faut souvent passer par la chaîne de prototypes. On ajoute donc quelques « sauts » via le champ `prototype` pour atterrir sur l'objet qui contient la propriété. Pour obtenir une optimisation _correcte_, il faut vérifier qu'aucun objet de la chaîne de prototypes n'a cette propriété. Autrement dit, à chaque saut, il faut vérifier la forme de l'objet.
+
+```js
+var d = new Date();
+d.toDateString(); // Date.prototype.toDateString
+
+function Pair(x, y) { this.x = x; this.y = y; }
+Pair.prototype.sum = function() { return this.x + this.y; };
+
+var p = new Pair(3, 7);
+p.sum(); // Pair.prototype.sum
+```
+
+Dans la plupart des cas, les moteurs utilisent cette approche rapide. Toutefois, lorsque les performances jouent un rôle déterminant, cette approche n'est pas suffisante.
+
+## L'optimisation intelligente des propriétés héritées
+
+Lors des accès prédictibles, on trouve _généralement_ la propriété en un nombre constant de sauts le long de la chaîne. Les objets de chaîne n'acquièrent _généralement_ pas de nouvelle propriétés et l'objet final n'est _généralement_ pas affecté par une [suppression](Opérateurs/L_opérateur_delete) de propriétés. Enfin, **la modification de **`[[Prototype]]` est** rare**.  Ces hypothèses sont nécessaires pour éviter de « sauter » sur chacun des prototypes. Les différents moteurs optent pour différentes approches afin d'optimiser les propriétés héritées de façon intelligente.
+
+- La forme de l'objet _final_ qui contient la propriété héritée peut être vérifiée.
+
+  - : Dans ce cas, si on teste les formes, cela implique qu'aucun prototype n'a été modifié sur la chaîne. Ainsi, lorsqu'un prototype est modifié, les formes de tous les objets situés sur le long de la chaîne doivent être changées.
+
+    ```js
+        var obj1 = {};
+        var obj2 = Object.create(obj1);
+        var obj3 = Object.create(obj2);
+
+        // Les objets dont la forme va changer
+        // obj3, obj2, obj1, Object.prototype
+        obj3.__proto__ = {};
+        ```
+
+- La forme de l'objet initial peut être vérifiée.
+
+  - : Chaque objet qui peut hériter d'une propriété via un prototype modifié doit être modifié afin de refléter ces changements.
+
+    ```js
+        var obj1 = {};
+        var obj2 = Object.create(obj1);
+        var obj3 = Object.create(obj2);
+
+        // Les objets dont la forme va changer
+        // obj1, obj2, obj3
+        obj1.__proto__ = {};
+        ```
+
+## Les effets néfastes de la modification de `[[Prototype]]`
+
+Les changements de `[[Prototype]]` impactent les performances sur deux phases : lors du changement puis par la suite. Pour commencer, **modifier `[[Prototype]]` est lent**, ensuite **modifier `[[Prototype]]` ralentit le code qui doit interagir avec les objets dont `[[Prototype]]` a été modifié**.
+
+### Modifier un `[[Prototype]]` prend du temps
+
+Bien que la spécification représente le changement de `[[Prototype]]` comme la simple modification d'une propriété cachée, les implémentations réelles sont beaucoup plus complexes. Les tactiques précédentes utilisant les formes nécessitent d'examiner (et de modifier) plus d'un objet. Dans la pratique, l'approche qui modifiera le moins d'objets sera différente en fonction de la charge provoquée par le cas d'usage.
+
+### Les `[[Prototype]]`s modifiés ralentissent le code
+
+Les mauvaises nouvelles ne s'arrêtent une fois la modification terminée. De nombreuses opérations utilisées pour examiner les propriétés reposent sur l'hypothèse de conservation de la chaîne de `[[Prototype]]`. Lorsque le moteur observe une modification, l'objet avec le prototype modifié « empoisonne » tout le code qui manipule cet objet. Voici un cas d'école assez désastreux :
+
+```js
+var obj = {};
+obj.__proto__ = { x: 3 }; // modification gratuite
+
+var arr = [obj];
+for (var i = 0; i < 5; i++)
+  arr.push({ x: i });
+
+function f(v, i) {
+  var elt = v[i];
+  var r =  elt.x > 2 // non optimal
+           ? elt
+           : { x: elt.x + 1 };
+  return r;
+}
+var c = f(arr, 0);
+c.x; // non optimal : la valeur a des propriétés inconnues
+c = f(arr, 1);
+c.x; // non optimal !
+
+var arr2 = [c];
+arr2[0].x; // non optimal
+```
+
+Seul le code exécuté à de nombreuses reprises est optimisé et cet exemple ne déclenche pas _tous_ ces comportements. En revanche pour du code « chaud », on pourrait rencontrer ces problèmes.
+
+Pouvoir tracer l'utilisation d'un objet dont le prototype a été modifié, souvent parmi différents scripts, est extraordinairement complexe. Cela nécessite une analyse textuelle soignée et dépend des comportements à l'exécution. Des modifications indépendentes en apparence peuvent avoir des impacts bien plus loin et le code employé, auparavant optimal, sera alors sous-optimal et plus lent.
+
+Il faudrait sinon pouvoir stocker des informations _cross-objet_.
+
+Les informations _cross-objet_ sont différentes des formes et on ne peut pas les vérifier simplement. Une modification apportée à cette information pourrait avoir des impacts à de nombreux emplacements, pas nécessairement évidents : dans ce cas, où vérifier que les hypothèses sont respectées ? Ainsi, plutôt que de vérifier ces hypothèses avant l'utilisation, on invalide _toutes_ les hypothèses lorsqu'une modification se produit. Lorsque `[[Prototype]]` change, _tout_ le code qui en dépend doit être rejeté.  L'opération `obj.__proto__ = ...` est donc lente par nature. En rejetant du code optimisé, cela rend le code beaucoup plus lent par la suite.
+
+Encore pire, lorsqu'on évalue `obj.prop`, le moteur voit que l'objet a eu son `[[Prototype]]` changé et les informations précédemment enregistrées à propos de l'objet deviennent inutiles et SpiderMonkey considère que l'objet possède des caractéristiques inconnues. Ainsi, tout code qui manipule cet objet par la suite prendra l'hypothèse correspondant au pire des cas. L'optimisation des moteurs de compilation à la volée fonctionnent sur l'hypothèse que _l'exécution à venir est similaire à l'exécution passée_. Si du code observe un objet avec un `[[Prototype]]` modifié, ce code observera vraisemblablement d'autres objets. C'est pourquoi, **toutes les opérations qui intéragissent avec un objet dont le `[[Prototype]]` a changé, ne peuvent pas être optimisées**.
diff --git a/files/fr/web/javascript/typed_arrays/index.html b/files/fr/web/javascript/typed_arrays/index.html
deleted file mode 100644
index 40bf2f727b..0000000000
--- a/files/fr/web/javascript/typed_arrays/index.html
+++ /dev/null
@@ -1,177 +0,0 @@
----
-title: Les tableaux typés en JavaScript
-slug: Web/JavaScript/Typed_arrays
-tags:
-  - Advanced
-  - Guide
-  - JavaScript
-  - Typed Arrays
-translation_of: Web/JavaScript/Typed_arrays
-original_slug: Web/JavaScript/Tableaux_typés
----
-<div>{{JsSidebar("Advanced")}}</div>
-
-<p>Les tableaux typés JavaScript sont des objets semblables à des tableaux qui permettent d'accéder à des données binaires brutes. Pour rappel, les objets {{jsxref("Array")}} qui représentent des tableaux en JavaScript peuvent être agrandis ou réduits dynamiquement et permettent de stocker n'importe quelle valeur JavaScript. Afin que la manipulation de ces objets soit efficace, le moteur JavaScript applique un certain nombre d'optimisations. Cependant, avec les avancées réalisées (telles que les flux audio et vidéo avec WebRTC et les WebSockets), il devient nécessaire de pouvoir manipuler des données binaires brutes au sein de tableaux typés, c'est pour ça que ces objets ont été introduits.</p>
-
-<p>Ne pas confondre les tableaux typés et les tableaux « classiques » ({{jsxref("Array")}}). En effet, la méthode {{jsxref("Array.isArray()")}} renverra <code>false</code> lorsqu'elle sera utilisée sur un tableau typé. De plus, certaines des méthodes des tableaux « classiques » ne sont pas disponibles pour les tableaux typés (par exemple <code>push</code> et <code>pop</code>).</p>
-
-<h2 id="Tampon_de_mémoire_et_vue_l'architecture_des_tableaux_typés">Tampon de mémoire et vue : l'architecture des tableaux typés</h2>
-
-<p>Afin de permettre une meilleure efficacité et une meilleure flexibilité, l'implémentation des tableaux typés JavaScript est séparée entre : les <strong>tampons de mémoire (<em>buffers</em>)</strong> d'une part et <strong>les vues (<em>views</em>)</strong> d'autre part. Un tampon de mémoire, implémenté avec l'objet {{jsxref("ArrayBuffer")}}, est un objet qui représente un fragment de données, il n'a pas de format à proprement parler et n'offre aucune fonctionnalité pour accéder à son contenu. Afin d'accéder à la mémoire contenue dans le tampon, on doit utiliser une vue. Une vue fournit un contexte (c'est-à-dire un type de donnée, un emplacement pour le début de la lecture (<em>offset</em>) et un nombre d'éléments ; c'est ce contexte qui permet de définir le tableau typé.</p>
-
-<p><img alt="Typed arrays in an ArrayBuffer" src="https://mdn.mozillademos.org/files/8629/typed_arrays.png"></p>
-
-<h3 id="ArrayBuffer"><code>ArrayBuffer</code></h3>
-
-<p>Le type {{jsxref("ArrayBuffer")}} est un type de données générique pour représenter un tampon de données de longueur fixe. Le contenu d'un <code>ArrayBuffer</code> ne peut pas être manipulé directement, il faut pour cela créer une vue sous forme d'un tableau typé ou une vue {{jsxref("DataView")}} qui représente le tampon dans un format donné et utiliser cet objet pour lire et écrire du contenu dans le tampon de données.</p>
-
-<h3 id="Les_vues_sous_forme_de_tableaux_typés">Les vues sous forme de tableaux typés</h3>
-
-<p>Les tableaux typés qui sont les vues sur ces tampons de mémoire possèdent des noms explicites correspondant aux types numériques habituels tels que <code>Int8</code>, <code>Uint32</code>, <code>Float64</code> et ainsi de suite. Il existe un type de tableau typé spécial, <code>Uint8ClampedArray</code>. Ce type permet de ramener (<em>clamp</em>) les valeurs observées entre 0 et 255. Cela peut notamment être utilisé pour <a href="/fr/docs/Web/API/ImageData">traiter les données d'un canvas</a> par exemple.</p>
-
-<p>{{page("/fr/docs/Web/JavaScript/Reference/Objets_globaux/TypedArray", "Les_objets_TypedArray")}}</p>
-
-<h3 id="DataView"><code>DataView</code></h3>
-
-<p>Le type {{jsxref("DataView")}} permet de créer des objets qui seront des interfaces (bas niveau) pour lire/écrire des données dans le tampon de mémoire. Cela peut par exemple être utile lorsqu'on souhaite manipuler différents types de données. Les vues sous forme de tableaux typés suivent le même boutisme (endianness) que la plate-forme. Avec un objet <code>DataView</code>, il est possible de définir l'ordre des octets à considérer (qui sera par défaut du grand boutisme (<em>big-endian</em>) mais qui pourra être défini en petit boutisme (<em>little-endian</em>) dans les différentes méthodes d'accès/écriture).</p>
-
-<h2 id="Les_API_Web_utilisant_les_tableaux_typés">Les API Web utilisant les tableaux typés</h2>
-
-<dl>
- <dt><a href="/fr/docs/Web/API/FileReader"><code>FileReader.prototype.readAsArrayBuffer()</code></a></dt>
- <dd>La méthode <code>FileReader.prototype.readAsArrayBuffer()</code> permet de lire le contenu d'un <a href="/fr/docs/Web/API/Blob"><code>Blob</code></a> ou <a href="/fr/docs/Web/API/File"><code>File</code></a> donné.</dd>
- <dt><a href="/fr/docs/Web/API/XMLHttpRequest"><code>XMLHttpRequest.prototype.send()</code></a></dt>
- <dd><code>XMLHttpRequest</code> et sa méthode <code>send()</code> peuvent désormais être utilisées avec un argument qui est un tableau typé ou un {{jsxref("ArrayBuffer")}}.</dd>
- <dt><code><a href="/fr/docs/Web/API/ImageData">ImageData.data</a></code></dt>
- <dd>Un objet du type {{jsxref("Uint8ClampedArray")}} qui représente un tableau unidimensionnel contenant les données de l'image dans l'ordre RGBA, les entiers utilisés sont compris entre <code>0</code> et <code>255</code> (au sens large).</dd>
-</dl>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Utiliser_les_vues_et_les_tampons">Utiliser les vues et les tampons</h3>
-
-<p>Tout d'abord, il faut créer un tampon (<em>buffer</em>). Ici, on crée un buffer de 16 octets :</p>
-
-<pre class="brush:js">let buffer = new ArrayBuffer(16);
-</pre>
-
-<p>Grâce à cette instruction, on dispose désormaits d'un fragment de mémoire dont tous les octets sont pré-initialisés à 0. Si c'est déjà une bonne chose de faite, cela n'a pas grande utilité. On peut déjà confirmer que la longueur du tampon est bien celle spécifiée initialement :</p>
-
-<pre class="brush:js">if (buffer.byteLength === 16) {
-  console.log("Oui, il mesure bien 16 octets.");
-} else {
-  console.log("Non, ce n'est pas la bonne taille !");
-}
-</pre>
-
-<p>Avant qu'on puisse travailler avec ce tampon, il faut créer une vue. Ici, on crée une vue qui traite le tampon comme un tableau d'entiers signés représentés sur 32 bits :</p>
-
-<pre class="brush:js">let int32View = new Int32Array(buffer);
-</pre>
-
-<p>Désormais, on peut accéder aux éléments du tableau typé comme avec un tableau classique :</p>
-
-<pre class="brush:js">for (let i = 0; i &lt; int32View.length; i++) {
-  int32View[i] = i * 2;
-}
-</pre>
-
-<p>Ce fragment de code permet de remplir les 4 éléments du tableau (4 éléments faisant chacun 4 octets, ce qui remplit les 16 octets du tableau) avec les valeurs 0, 2, 4, et 6.</p>
-
-<h3 id="Plusieurs_vues_sur_les_mêmes_données">Plusieurs vues sur les mêmes données</h3>
-
-<p>On commence à avoir des cas d'utilisation intéressants quand on peut créer plusieurs vues sur les mêmes données. Ainsi, en utilisant le code précédent, on peut continuer avec :</p>
-
-<pre class="brush:js">let int16View = new Int16Array(buffer);
-
-for (let i = 0; i &lt; int16View.length; i++) {
-  console.log("Élément " + i + " : " + int16View[i]);
-}
-</pre>
-
-<p>Ici, on crée une vue pour des éléments sur 16 bits qui partage le même tampon que la vue précédente (qui était une vue avec des éléments sur 32 bits) et on affiche les valeurs contenues dans le tampon sous formes d'entiers représentés sur 16 bits. Le résultat obtenu est ici 0, 0, 2, 0, 4, 0, 6, 0.</p>
-
-<p>On peut aller encore plus loin, par exemple :</p>
-
-<pre class="brush:js">int16View[0] = 32;
-console.log("L'élément 0 du tableau 32 bits est désormais " + int32View[0]);
-</pre>
-
-<p>Le résultat obtenu sera "L'élément 0 du tableau 32 bits est désormais 32". Autrement dit, les deux tableaux typés construits ne sont que des vues sur le même tampon de données. Ce genre de manipulation peut être effectuée avec n'importe quel <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/TypedArray#Les_objets_TypedArray">type de vue</a>.</p>
-
-<h3 id="Manipuler_des_structures_de_données_complexes">Manipuler des structures de données complexes</h3>
-
-<p>En combinant un même tampon et plusieurs vue de différents types, chacune commençant à un endroit différent dans le tampon, il est possible d'interagir avec des données qui représentent des objets contenant plusieurs types de données. Cela permet entre autres d'intéragir avec des structures de données complexes telles que <a href="/fr/docs/Web/WebGL">WebGL</a>, des fichiers de données, des structures C (notamment avec <a href="/fr/docs/Mozilla/js-ctypes">js-ctypes</a>).</p>
-
-<p>Si on a cette structure C :</p>
-
-<pre class="brush:cpp">struct uneStruct {
-  unsigned long id;
-  char nom_utilisateur[16];
-  float montant;
-};</pre>
-
-<p>On peut réceptionner les données d'un tampon qui contiendrait des objets de ce type grâce à:</p>
-
-<pre class="brush:js">let buffer = new ArrayBuffer(24);
-
-// ... on lit les données dans le tampon ...
-
-let vueId = new Uint32Array(buffer, 0, 1);
-let vueNomUtilisateur = new Uint8Array(buffer, 4, 16);
-let vueMontant = new Float32Array(buffer, 20, 1);</pre>
-
-<p>On peut ensuite accéder au montant lié à un utilisateur, par exemple, avec <code>vueMontant[0]</code>.</p>
-
-<div class="note"><p><strong>Note :</strong> <a href="https://fr.wikipedia.org/wiki/Alignement_en_m%C3%A9moire">L'alignement des structures de données</a> dans une structure C dépend de la plate-forme. Il est donc nécessaire de prendre des précautions quant au format attendu.</p></div>
-
-<h3 id="Convertir_un_tableau_typé_en_un_tableau_normal">Convertir un tableau typé en un tableau normal</h3>
-
-<p>Dans certains cas d'utilisation, après avoir traité un tableau typé, il peut être utile de convertir le tableau typé en un tableau normal ({{jsxref("Array")}}) afin de bénificier des propriétés du prototype d'<code>Array</code>. Pour cela, on peut utiliser la méthode {{jsxref("Array.from")}}. Si <code>Array.from()</code> n'est pas disponible, on peut effectuer cette conversion de la façon suivante :</p>
-
-<pre class="brush:js">let tableauTypé = new Uint8Array([1, 2, 3, 4]),
-    tableauNormal = Array.prototype.slice.call(tableauTypé);
-tableauNormal.length === 4;
-tableauNormal.constructor === Array;
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Typed Array')}}</td>
-   <td>{{Spec2('Typed Array')}}</td>
-   <td>Remplacée par ECMAScript 2015.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES2015', '#sec-typedarray-objects', 'TypedArray Objects')}}</td>
-   <td>{{Spec2('ES2015')}}</td>
-   <td>Définition initiale au sein d'un standard ECMA.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-typedarray-objects', 'TypedArray Objects')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.builtins.Int8Array")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Décoder_encoder_en_base64#Annexe_.3A_D.C3.A9coder_une_cha.C3.AEne_en_base64_en_un_objet_Uint8Array_ou_ArrayBuffer">Manipuler des chaînes encodées en base 64 avec des <code>ArrayBuffer</code>s ou des tableaux typés</a></li>
- <li><a href="/fr/docs/Code_snippets/StringView"><code>StringView</code> – une représentation des chaînes semblable à la réprésentation C, utilisant des tableaux typés</a></li>
- <li><a href="https://hacks.mozilla.org/2011/12/faster-canvas-pixel-manipulation-with-typed-arrays">Manipuler les pixels d'un canvas plus efficacement avec les tableaux typés</a> (en anglais)</li>
- <li><a href="https://www.html5rocks.com/en/tutorials/webgl/typed_arrays">Les tableaux typés : des données binaires arrivent dans le navigateur</a> (en anglais)</li>
- <li>{{Glossary("Boutisme")}}</li>
-</ul>
diff --git a/files/fr/web/javascript/typed_arrays/index.md b/files/fr/web/javascript/typed_arrays/index.md
new file mode 100644
index 0000000000..4b5c41b0f6
--- /dev/null
+++ b/files/fr/web/javascript/typed_arrays/index.md
@@ -0,0 +1,165 @@
+---
+title: Les tableaux typés en JavaScript
+slug: Web/JavaScript/Typed_arrays
+tags:
+  - Advanced
+  - Guide
+  - JavaScript
+  - Typed Arrays
+translation_of: Web/JavaScript/Typed_arrays
+original_slug: Web/JavaScript/Tableaux_typés
+---
+{{JsSidebar("Advanced")}}
+
+Les tableaux typés JavaScript sont des objets semblables à des tableaux qui permettent d'accéder à des données binaires brutes. Pour rappel, les objets {{jsxref("Array")}} qui représentent des tableaux en JavaScript peuvent être agrandis ou réduits dynamiquement et permettent de stocker n'importe quelle valeur JavaScript. Afin que la manipulation de ces objets soit efficace, le moteur JavaScript applique un certain nombre d'optimisations. Cependant, avec les avancées réalisées (telles que les flux audio et vidéo avec WebRTC et les WebSockets), il devient nécessaire de pouvoir manipuler des données binaires brutes au sein de tableaux typés, c'est pour ça que ces objets ont été introduits.
+
+Ne pas confondre les tableaux typés et les tableaux « classiques » ({{jsxref("Array")}}). En effet, la méthode {{jsxref("Array.isArray()")}} renverra `false` lorsqu'elle sera utilisée sur un tableau typé. De plus, certaines des méthodes des tableaux « classiques » ne sont pas disponibles pour les tableaux typés (par exemple `push` et `pop`).
+
+## Tampon de mémoire et vue : l'architecture des tableaux typés
+
+Afin de permettre une meilleure efficacité et une meilleure flexibilité, l'implémentation des tableaux typés JavaScript est séparée entre : les **tampons de mémoire (_buffers_)** d'une part et **les vues (_views_)** d'autre part. Un tampon de mémoire, implémenté avec l'objet {{jsxref("ArrayBuffer")}}, est un objet qui représente un fragment de données, il n'a pas de format à proprement parler et n'offre aucune fonctionnalité pour accéder à son contenu. Afin d'accéder à la mémoire contenue dans le tampon, on doit utiliser une vue. Une vue fournit un contexte (c'est-à-dire un type de donnée, un emplacement pour le début de la lecture (_offset_) et un nombre d'éléments ; c'est ce contexte qui permet de définir le tableau typé.
+
+![Typed arrays in an ArrayBuffer](https://mdn.mozillademos.org/files/8629/typed_arrays.png)
+
+### `ArrayBuffer`
+
+Le type {{jsxref("ArrayBuffer")}} est un type de données générique pour représenter un tampon de données de longueur fixe. Le contenu d'un `ArrayBuffer` ne peut pas être manipulé directement, il faut pour cela créer une vue sous forme d'un tableau typé ou une vue {{jsxref("DataView")}} qui représente le tampon dans un format donné et utiliser cet objet pour lire et écrire du contenu dans le tampon de données.
+
+### Les vues sous forme de tableaux typés
+
+Les tableaux typés qui sont les vues sur ces tampons de mémoire possèdent des noms explicites correspondant aux types numériques habituels tels que `Int8`, `Uint32`, `Float64` et ainsi de suite. Il existe un type de tableau typé spécial, `Uint8ClampedArray`. Ce type permet de ramener (_clamp_) les valeurs observées entre 0 et 255. Cela peut notamment être utilisé pour [traiter les données d'un canvas](/fr/docs/Web/API/ImageData) par exemple.
+
+{{page("/fr/docs/Web/JavaScript/Reference/Objets_globaux/TypedArray", "Les_objets_TypedArray")}}
+
+### `DataView`
+
+Le type {{jsxref("DataView")}} permet de créer des objets qui seront des interfaces (bas niveau) pour lire/écrire des données dans le tampon de mémoire. Cela peut par exemple être utile lorsqu'on souhaite manipuler différents types de données. Les vues sous forme de tableaux typés suivent le même boutisme (endianness) que la plate-forme. Avec un objet `DataView`, il est possible de définir l'ordre des octets à considérer (qui sera par défaut du grand boutisme (_big-endian_) mais qui pourra être défini en petit boutisme (_little-endian_) dans les différentes méthodes d'accès/écriture).
+
+## Les API Web utilisant les tableaux typés
+
+- [`FileReader.prototype.readAsArrayBuffer()`](/fr/docs/Web/API/FileReader)
+  - : La méthode `FileReader.prototype.readAsArrayBuffer()` permet de lire le contenu d'un [`Blob`](/fr/docs/Web/API/Blob) ou [`File`](/fr/docs/Web/API/File) donné.
+- [`XMLHttpRequest.prototype.send()`](/fr/docs/Web/API/XMLHttpRequest)
+  - : `XMLHttpRequest` et sa méthode `send()` peuvent désormais être utilisées avec un argument qui est un tableau typé ou un {{jsxref("ArrayBuffer")}}.
+- [`ImageData.data`](/fr/docs/Web/API/ImageData)
+  - : Un objet du type {{jsxref("Uint8ClampedArray")}} qui représente un tableau unidimensionnel contenant les données de l'image dans l'ordre RGBA, les entiers utilisés sont compris entre `0` et `255` (au sens large).
+
+## Exemples
+
+### Utiliser les vues et les tampons
+
+Tout d'abord, il faut créer un tampon (_buffer_). Ici, on crée un buffer de 16 octets :
+
+```js
+let buffer = new ArrayBuffer(16);
+```
+
+Grâce à cette instruction, on dispose désormaits d'un fragment de mémoire dont tous les octets sont pré-initialisés à 0. Si c'est déjà une bonne chose de faite, cela n'a pas grande utilité. On peut déjà confirmer que la longueur du tampon est bien celle spécifiée initialement :
+
+```js
+if (buffer.byteLength === 16) {
+  console.log("Oui, il mesure bien 16 octets.");
+} else {
+  console.log("Non, ce n'est pas la bonne taille !");
+}
+```
+
+Avant qu'on puisse travailler avec ce tampon, il faut créer une vue. Ici, on crée une vue qui traite le tampon comme un tableau d'entiers signés représentés sur 32 bits :
+
+```js
+let int32View = new Int32Array(buffer);
+```
+
+Désormais, on peut accéder aux éléments du tableau typé comme avec un tableau classique :
+
+```js
+for (let i = 0; i < int32View.length; i++) {
+  int32View[i] = i * 2;
+}
+```
+
+Ce fragment de code permet de remplir les 4 éléments du tableau (4 éléments faisant chacun 4 octets, ce qui remplit les 16 octets du tableau) avec les valeurs 0, 2, 4, et 6.
+
+### Plusieurs vues sur les mêmes données
+
+On commence à avoir des cas d'utilisation intéressants quand on peut créer plusieurs vues sur les mêmes données. Ainsi, en utilisant le code précédent, on peut continuer avec :
+
+```js
+let int16View = new Int16Array(buffer);
+
+for (let i = 0; i < int16View.length; i++) {
+  console.log("Élément " + i + " : " + int16View[i]);
+}
+```
+
+Ici, on crée une vue pour des éléments sur 16 bits qui partage le même tampon que la vue précédente (qui était une vue avec des éléments sur 32 bits) et on affiche les valeurs contenues dans le tampon sous formes d'entiers représentés sur 16 bits. Le résultat obtenu est ici 0, 0, 2, 0, 4, 0, 6, 0.
+
+On peut aller encore plus loin, par exemple :
+
+```js
+int16View[0] = 32;
+console.log("L'élément 0 du tableau 32 bits est désormais " + int32View[0]);
+```
+
+Le résultat obtenu sera "L'élément 0 du tableau 32 bits est désormais 32". Autrement dit, les deux tableaux typés construits ne sont que des vues sur le même tampon de données. Ce genre de manipulation peut être effectuée avec n'importe quel [type de vue](/fr/docs/Web/JavaScript/Reference/Objets_globaux/TypedArray#Les_objets_TypedArray).
+
+### Manipuler des structures de données complexes
+
+En combinant un même tampon et plusieurs vue de différents types, chacune commençant à un endroit différent dans le tampon, il est possible d'interagir avec des données qui représentent des objets contenant plusieurs types de données. Cela permet entre autres d'intéragir avec des structures de données complexes telles que [WebGL](/fr/docs/Web/WebGL), des fichiers de données, des structures C (notamment avec [js-ctypes](/fr/docs/Mozilla/js-ctypes)).
+
+Si on a cette structure C :
+
+```cpp
+struct uneStruct {
+  unsigned long id;
+  char nom_utilisateur[16];
+  float montant;
+};
+```
+
+On peut réceptionner les données d'un tampon qui contiendrait des objets de ce type grâce à:
+
+```js
+let buffer = new ArrayBuffer(24);
+
+// ... on lit les données dans le tampon ...
+
+let vueId = new Uint32Array(buffer, 0, 1);
+let vueNomUtilisateur = new Uint8Array(buffer, 4, 16);
+let vueMontant = new Float32Array(buffer, 20, 1);
+```
+
+On peut ensuite accéder au montant lié à un utilisateur, par exemple, avec `vueMontant[0]`.
+
+> **Note :** [L'alignement des structures de données](https://fr.wikipedia.org/wiki/Alignement_en_m%C3%A9moire) dans une structure C dépend de la plate-forme. Il est donc nécessaire de prendre des précautions quant au format attendu.
+
+### Convertir un tableau typé en un tableau normal
+
+Dans certains cas d'utilisation, après avoir traité un tableau typé, il peut être utile de convertir le tableau typé en un tableau normal ({{jsxref("Array")}}) afin de bénificier des propriétés du prototype d'`Array`. Pour cela, on peut utiliser la méthode {{jsxref("Array.from")}}. Si `Array.from()` n'est pas disponible, on peut effectuer cette conversion de la façon suivante :
+
+```js
+let tableauTypé = new Uint8Array([1, 2, 3, 4]),
+    tableauNormal = Array.prototype.slice.call(tableauTypé);
+tableauNormal.length === 4;
+tableauNormal.constructor === Array;
+```
+
+## Spécifications
+
+| Spécification                                                                                    | État                             | Commentaires                                    |
+| ------------------------------------------------------------------------------------------------ | -------------------------------- | ----------------------------------------------- |
+| {{SpecName('Typed Array')}}                                                             | {{Spec2('Typed Array')}} | Remplacée par ECMAScript 2015.                  |
+| {{SpecName('ES2015', '#sec-typedarray-objects', 'TypedArray Objects')}} | {{Spec2('ES2015')}}         | Définition initiale au sein d'un standard ECMA. |
+| {{SpecName('ESDraft', '#sec-typedarray-objects', 'TypedArray Objects')}} | {{Spec2('ESDraft')}}     |                                                 |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Int8Array")}}
+
+## Voir aussi
+
+- [Manipuler des chaînes encodées en base 64 avec des `ArrayBuffer`s ou des tableaux typés](/fr/docs/Décoder_encoder_en_base64#Annexe_.3A_D.C3.A9coder_une_cha.C3.AEne_en_base64_en_un_objet_Uint8Array_ou_ArrayBuffer)
+- [`StringView` – une représentation des chaînes semblable à la réprésentation C, utilisant des tableaux typés](/fr/docs/Code_snippets/StringView)
+- [Manipuler les pixels d'un canvas plus efficacement avec les tableaux typés](https://hacks.mozilla.org/2011/12/faster-canvas-pixel-manipulation-with-typed-arrays) (en anglais)
+- [Les tableaux typés : des données binaires arrivent dans le navigateur](https://www.html5rocks.com/en/tutorials/webgl/typed_arrays) (en anglais)
+- {{Glossary("Boutisme")}}
diff --git a/files/fr/web/mathml/examples/deriving_the_quadratic_formula/index.html b/files/fr/web/mathml/examples/deriving_the_quadratic_formula/index.html
index f3dbfab31d..4755024c50 100644
--- a/files/fr/web/mathml/examples/deriving_the_quadratic_formula/index.html
+++ b/files/fr/web/mathml/examples/deriving_the_quadratic_formula/index.html
@@ -1,14 +1,9 @@
 ---
 title: 'MathML: Dériver la formule quadratique'
 slug: Web/MathML/Examples/Deriving_the_Quadratic_Formula
-tags:
-  - Débutant
-  - Education
-  - Guide
-  - MathML
 translation_of: Web/MathML/Examples/Deriving_the_Quadratic_Formula
 original_slug: Web/MathML/Exemples/Dériver_la_Formule_Quadratique
 ---
-<p>Dans cette page, on rédige la démonstration de la détermination des racines d'un polynôme quadratique :</p>
+<p>Dans cette page, on rédige la démonstration de la détermination des racines d'un polynôme quadratique :</p>
 
-<p><math> <mtable columnalign="left"> <mtr> <mtd> <mrow> <mrow> <mrow> <mrow> <mspace depth="1ex" height="0.5ex" width="2.5ex"></mspace> <mi>a</mi> <mo>⁢</mo> <msup> <mi>x</mi> <mn>2</mn> </msup></mrow> <mo> + </mo> <mi>b</mi> <mo>⁢</mo> <mi>x</mi> </mrow> <mo> + </mo> <mi>c</mi> </mrow> <mo>=</mo> <mn>0</mn> </mrow> </mtd> </mtr> <mtr> <mtd> <mrow> <mrow> <mspace depth="1ex" height="0.5ex" width="2.5ex"></mspace> <mi>a</mi> <mo>⁢</mo> <msup> <mi>x</mi> <mn>2</mn> </msup></mrow> <mo> + </mo> <mi>b</mi> <mo>⁢</mo> <mi>x</mi> <mspace depth="1ex" height="0.5ex" width="2.5ex"></mspace> </mrow> <mo>=</mo> <mo>-</mo><mi> c</mi><mspace depth="1ex" height="0.5ex" width="2.5ex"></mspace> </mtd> </mtr> <mtr> <mtd> <mrow> <mrow> <mspace depth="1ex" height="0.5ex" width="2.5ex"></mspace> <msup> <mi>x</mi> <mn>2</mn> </msup></mrow> <mo> + </mo> <mfrac> <mrow> <mi>b</mi> </mrow> <mi>a</mi> </mfrac> <mo>⁤</mo> <mi>x</mi> </mrow> <mspace depth="1ex" height="0.5ex" width="2.5ex"></mspace> <mo>=</mo> <mfrac> <mrow> <mo>-</mo><mi>c</mi> </mrow> <mi>a</mi> </mfrac> <mspace depth="1ex" height="0.5ex" width="2ex"></mspace><mrow><mtext mathcolor="red" mathsize="10pt">On divise par le premier coefficient du polynôme.</mtext> </mrow> </mtd> </mtr> <mtr> <mtd> <mrow> <mrow> <mrow> <mspace depth="1ex" height="0.5ex" width="2.5ex"></mspace> <msup> <mi>x</mi> <mn>2</mn> </msup></mrow> <mo> + </mo> <mfrac> <mrow> <mi>b</mi> </mrow> <mi>a</mi> </mfrac> <mo>⁤</mo> <mi>x</mi> <mo> + </mo> <msup> <mfenced> <mfrac> <mrow> <mi>b</mi> </mrow> <mrow> <mn>2</mn> <mi>a</mi> </mrow> </mfrac> </mfenced> <mn>2</mn> </msup> </mrow> <mo>=</mo> <mfrac> <mrow> <mo>-</mo> <mi>c</mi> <mo>(</mo> <mn>4</mn> <mi>a</mi> <mo>)</mo> </mrow> <mrow> <mi>a</mi> <mo>(</mo> <mn>4</mn> <mi>a</mi> <mo>)</mo> </mrow></mfrac> </mrow> <mo> + </mo> <mfrac> <mrow> <msup> <mi>b</mi> <mn>2</mn> </msup> </mrow> <mrow> <mn>4</mn> <msup> <mi>a</mi> <mn>2</mn> </msup> </mrow></mfrac> <mspace depth="1ex" height="0.5ex" width="2ex"></mspace><mrow><mtext mathcolor="red" mathsize="10pt">On rajoute un terme pour avoir un carré.</mtext> </mrow> </mtd> </mtr> <mtr> <mtd> <mrow> <mrow> <mspace depth="1ex" height="0.5ex" width="2.5ex"></mspace> <mo>(</mo> <mi>x</mi> <mo> + </mo> <mfrac> <mrow> <mi>b</mi> </mrow> <mrow> <mn>2</mn> <mi>a</mi> </mrow></mfrac> <mo>)</mo> <mo>(</mo> <mi>x</mi> <mo> + </mo> <mfrac> <mrow> <mi>b</mi> </mrow> <mrow> <mn>2</mn> <mi>a</mi> </mrow></mfrac> <mo>)</mo> <mo>=</mo> <mfrac> <mrow> <msup> <mi>b</mi> <mn>2</mn> </msup> <mo> - </mo> <mn>4</mn> <mi>a</mi> <mi>c</mi> </mrow> <mrow> <mn>4</mn> <msup> <mi>a</mi> <mn>2</mn> </msup> </mrow></mfrac> </mrow> <mspace depth="1ex" height="0.5ex" width="2ex"></mspace><mrow><mtext mathcolor="red" mathsize="10pt">Ici, on obtient la valeur du discriminant.</mtext> </mrow> </mrow> </mtd> </mtr> <mtr> <mtd> <mrow> <mrow> <mspace depth="1ex" height="0.5ex" width="2.5ex"></mspace> <msup> <mrow> <mo>(</mo> <mi>x</mi> <mo> + </mo> <mfrac> <mrow> <mi>b</mi> </mrow> <mrow> <mn>2</mn> <mi>a</mi> </mrow></mfrac> <mo>)</mo> </mrow> <mn>2</mn> </msup> <mo>=</mo> <mfrac> <mrow> <msup> <mi>b</mi> <mn>2</mn> </msup> <mo> - </mo> <mn>4</mn> <mi>a</mi> <mi>c</mi> </mrow> <mrow> <mn>4</mn> <msup> <mi>a</mi> <mn>2</mn> </msup> </mrow></mfrac> </mrow> <mspace depth="1ex" height="0.5ex" width="2ex"></mspace><mrow><mtext mathcolor="red" mathsize="10pt"></mtext> </mrow> </mrow> </mtd> </mtr> <mtr> <mtd> <mrow> <mrow> <mspace depth="1ex" height="0.5ex" width="2.5ex"></mspace> <mrow> <mi>x</mi> <mo> + </mo> <mfrac> <mrow> <mi>b</mi> </mrow> <mrow> <mn>2</mn> <mi>a</mi> </mrow></mfrac> </mrow> <mo>=</mo> <msqrt> <mfrac> <mrow> <msup> <mi>b</mi> <mn>2</mn> </msup> <mo> - </mo> <mn>4</mn> <mi>a</mi> <mi>c</mi> </mrow> <mrow> <mn>4</mn> <msup> <mi>a</mi> <mn>2</mn> </msup> </mrow></mfrac> </msqrt> </mrow> <mspace depth="1ex" height="0.5ex" width="2ex"></mspace><mrow><mtext mathcolor="red" mathsize="10pt"></mtext> </mrow> </mrow> </mtd> </mtr> <mtr> <mtd> <mrow> <mrow> <mspace depth="1ex" height="0.5ex" width="2.5ex"></mspace> <mrow> <mi>x</mi> </mrow> <mo>=</mo> <mfrac> <mrow> <mo>-</mo><mi>b</mi> </mrow> <mrow> <mn>2</mn> <mi>a</mi> </mrow></mfrac> <mo>±</mo><mrow><mo>{</mo><mi>C</mi><mo>}</mo></mrow> <msqrt> <mfrac> <mrow> <msup> <mi>b</mi> <mn>2</mn> </msup> <mo> - </mo> <mn>4</mn> <mi>a</mi> <mi>c</mi> </mrow> <mrow> <mn>4</mn> <msup> <mi>a</mi> <mn>2</mn></msup></mrow></mfrac></msqrt></mrow><mspace depth="1ex" height="0.5ex" width="2ex"></mspace><mrow><mtext mathcolor="red" mathsize="10pt"></mtext></mrow></mrow></mtd></mtr><mtr><mtd><mrow><mrow><mspace depth="1ex" height="0.5ex" width="2.5ex"></mspace> <mrow> <mi>x</mi> </mrow> <mo>=</mo> <mfrac> <mrow> <mo>-</mo> <mi> b</mi> <mo>±</mo><mrow><mo>{</mo><mi>C</mi><mo>}</mo></mrow> <msqrt> <msup> <mi>b</mi> <mn>2</mn> </msup> <mo> - </mo> <mn>4</mn> <mi>a</mi> <mi>c</mi> </msqrt></mrow> <mrow> <mn>2</mn> <mi>a</mi> </mrow></mfrac> </mrow> <mspace depth="1ex" height="0.5ex" width="2ex"></mspace> <mrow><mtext mathcolor="red" mathsize="10pt"></mtext> </mrow> </mrow> </mtd> </mtr> </mtable></math></p>
+<p><math> <mtable columnalign="left"> <mtr> <mtd> <mrow> <mrow> <mrow> <mrow> <mspace depth="1ex" height="0.5ex" width="2.5ex"></mspace> <mi>a</mi> <mo>⁢</mo> <msup> <mi>x</mi> <mn>2</mn> </msup></mrow> <mo> + </mo> <mi>b</mi> <mo>⁢</mo> <mi>x</mi> </mrow> <mo> + </mo> <mi>c</mi> </mrow> <mo>=</mo> <mn>0</mn> </mrow> </mtd> </mtr> <mtr> <mtd> <mrow> <mrow> <mspace depth="1ex" height="0.5ex" width="2.5ex"></mspace> <mi>a</mi> <mo>⁢</mo> <msup> <mi>x</mi> <mn>2</mn> </msup></mrow> <mo> + </mo> <mi>b</mi> <mo>⁢</mo> <mi>x</mi> <mspace depth="1ex" height="0.5ex" width="2.5ex"></mspace> </mrow> <mo>=</mo> <mo>-</mo><mi> c</mi><mspace depth="1ex" height="0.5ex" width="2.5ex"></mspace> </mtd> </mtr> <mtr> <mtd> <mrow> <mrow> <mspace depth="1ex" height="0.5ex" width="2.5ex"></mspace> <msup> <mi>x</mi> <mn>2</mn> </msup></mrow> <mo> + </mo> <mfrac> <mrow> <mi>b</mi> </mrow> <mi>a</mi> </mfrac> <mo>⁤</mo> <mi>x</mi> </mrow> <mspace depth="1ex" height="0.5ex" width="2.5ex"></mspace> <mo>=</mo> <mfrac> <mrow> <mo>-</mo><mi>c</mi> </mrow> <mi>a</mi> </mfrac> <mspace depth="1ex" height="0.5ex" width="2ex"></mspace><mrow><mtext mathcolor="red" mathsize="10pt">On divise par le premier coefficient du polynôme.</mtext> </mrow> </mtd> </mtr> <mtr> <mtd> <mrow> <mrow> <mrow> <mspace depth="1ex" height="0.5ex" width="2.5ex"></mspace> <msup> <mi>x</mi> <mn>2</mn> </msup></mrow> <mo> + </mo> <mfrac> <mrow> <mi>b</mi> </mrow> <mi>a</mi> </mfrac> <mo>⁤</mo> <mi>x</mi> <mo> + </mo> <msup> <mfenced> <mfrac> <mrow> <mi>b</mi> </mrow> <mrow> <mn>2</mn> <mi>a</mi> </mrow> </mfrac> </mfenced> <mn>2</mn> </msup> </mrow> <mo>=</mo> <mfrac> <mrow> <mo>-</mo> <mi>c</mi> <mo>(</mo> <mn>4</mn> <mi>a</mi> <mo>)</mo> </mrow> <mrow> <mi>a</mi> <mo>(</mo> <mn>4</mn> <mi>a</mi> <mo>)</mo> </mrow></mfrac> </mrow> <mo> + </mo> <mfrac> <mrow> <msup> <mi>b</mi> <mn>2</mn> </msup> </mrow> <mrow> <mn>4</mn> <msup> <mi>a</mi> <mn>2</mn> </msup> </mrow></mfrac> <mspace depth="1ex" height="0.5ex" width="2ex"></mspace><mrow><mtext mathcolor="red" mathsize="10pt">On rajoute un terme pour avoir un carré.</mtext> </mrow> </mtd> </mtr> <mtr> <mtd> <mrow> <mrow> <mspace depth="1ex" height="0.5ex" width="2.5ex"></mspace> <mo>(</mo> <mi>x</mi> <mo> + </mo> <mfrac> <mrow> <mi>b</mi> </mrow> <mrow> <mn>2</mn> <mi>a</mi> </mrow></mfrac> <mo>)</mo> <mo>(</mo> <mi>x</mi> <mo> + </mo> <mfrac> <mrow> <mi>b</mi> </mrow> <mrow> <mn>2</mn> <mi>a</mi> </mrow></mfrac> <mo>)</mo> <mo>=</mo> <mfrac> <mrow> <msup> <mi>b</mi> <mn>2</mn> </msup> <mo> - </mo> <mn>4</mn> <mi>a</mi> <mi>c</mi> </mrow> <mrow> <mn>4</mn> <msup> <mi>a</mi> <mn>2</mn> </msup> </mrow></mfrac> </mrow> <mspace depth="1ex" height="0.5ex" width="2ex"></mspace><mrow><mtext mathcolor="red" mathsize="10pt">Ici, on obtient la valeur du discriminant.</mtext> </mrow> </mrow> </mtd> </mtr> <mtr> <mtd> <mrow> <mrow> <mspace depth="1ex" height="0.5ex" width="2.5ex"></mspace> <msup> <mrow> <mo>(</mo> <mi>x</mi> <mo> + </mo> <mfrac> <mrow> <mi>b</mi> </mrow> <mrow> <mn>2</mn> <mi>a</mi> </mrow></mfrac> <mo>)</mo> </mrow> <mn>2</mn> </msup> <mo>=</mo> <mfrac> <mrow> <msup> <mi>b</mi> <mn>2</mn> </msup> <mo> - </mo> <mn>4</mn> <mi>a</mi> <mi>c</mi> </mrow> <mrow> <mn>4</mn> <msup> <mi>a</mi> <mn>2</mn> </msup> </mrow></mfrac> </mrow> <mspace depth="1ex" height="0.5ex" width="2ex"></mspace><mrow><mtext mathcolor="red" mathsize="10pt"></mtext> </mrow> </mrow> </mtd> </mtr> <mtr> <mtd> <mrow> <mrow> <mspace depth="1ex" height="0.5ex" width="2.5ex"></mspace> <mrow> <mi>x</mi> <mo> + </mo> <mfrac> <mrow> <mi>b</mi> </mrow> <mrow> <mn>2</mn> <mi>a</mi> </mrow></mfrac> </mrow> <mo>=</mo> <mo>±</mo> <msqrt> <mfrac> <mrow> <msup> <mi>b</mi> <mn>2</mn> </msup> <mo> - </mo> <mn>4</mn> <mi>a</mi> <mi>c</mi> </mrow> <mrow> <mn>4</mn> <msup> <mi>a</mi> <mn>2</mn> </msup> </mrow></mfrac> </msqrt> </mrow> <mspace depth="1ex" height="0.5ex" width="2ex"></mspace><mrow><mtext mathcolor="red" mathsize="10pt"></mtext> </mrow> </mrow> </mtd> </mtr> <mtr> <mtd> <mrow> <mrow> <mspace depth="1ex" height="0.5ex" width="2.5ex"></mspace> <mrow> <mi>x</mi> </mrow> <mo>=</mo> <mfrac> <mrow> <mo>-</mo><mi>b</mi> </mrow> <mrow> <mn>2</mn> <mi>a</mi> </mrow></mfrac> <mo>±</mo> <msqrt> <mfrac> <mrow> <msup> <mi>b</mi> <mn>2</mn> </msup> <mo> - </mo> <mn>4</mn> <mi>a</mi> <mi>c</mi> </mrow> <mrow> <mn>4</mn> <msup> <mi>a</mi> <mn>2</mn></msup></mrow></mfrac></msqrt></mrow><mspace depth="1ex" height="0.5ex" width="2ex"></mspace><mrow><mtext mathcolor="red" mathsize="10pt"></mtext></mrow></mrow></mtd></mtr><mtr><mtd><mrow><mrow><mspace depth="1ex" height="0.5ex" width="2.5ex"></mspace> <mrow> <mi>x</mi> </mrow> <mo>=</mo> <mfrac> <mrow> <mo>-</mo> <mi> b</mi> <mo>±</mo> <msqrt> <msup> <mi>b</mi> <mn>2</mn> </msup> <mo> - </mo> <mn>4</mn> <mi>a</mi> <mi>c</mi> </msqrt></mrow> <mrow> <mn>2</mn> <mi>a</mi> </mrow></mfrac> </mrow> <mspace depth="1ex" height="0.5ex" width="2ex"></mspace> <mrow><mtext mathcolor="red" mathsize="10pt"></mtext> </mrow> </mrow> </mtd> </mtr> </mtable></math></p>
\ No newline at end of file
diff --git a/files/ja/_redirects.txt b/files/ja/_redirects.txt
index 50514d5776..8014f04141 100644
--- a/files/ja/_redirects.txt
+++ b/files/ja/_redirects.txt
@@ -140,7 +140,7 @@
 /ja/docs/Building_an_Extension	/ja/docs/Mozilla/Add-ons
 /ja/docs/CORS_Enabled_Image	/ja/docs/Web/HTML/CORS_enabled_image
 /ja/docs/CSS	/ja/docs/Web/CSS
-/ja/docs/CSS-2_Quick_Reference	/ja/docs/conflicting/Web/CSS
+/ja/docs/CSS-2_Quick_Reference	/ja/docs/Web/CSS
 /ja/docs/CSS-2_Quick_Reference/All_in_a_page	/ja/docs/Web/CSS/Reference
 /ja/docs/CSS-2_Quick_Reference:All_in_a_page	/ja/docs/Web/CSS/Reference
 /ja/docs/CSS-redirect-1	/ja/docs/Web/CSS
@@ -166,12 +166,12 @@
 /ja/docs/CSS/-moz-column-width	/ja/docs/Web/CSS/column-width
 /ja/docs/CSS/-moz-context-menu	/ja/docs/Web/CSS/cursor
 /ja/docs/CSS/-moz-copy	/ja/docs/Web/CSS/cursor
-/ja/docs/CSS/-moz-linear-gradient	/ja/docs/orphaned/Web/CSS/linear-gradient()
+/ja/docs/CSS/-moz-linear-gradient	/ja/docs/Web/CSS/gradient/linear-gradient()
 /ja/docs/CSS/-moz-orient	/ja/docs/Web/CSS/-moz-orient
 /ja/docs/CSS/-moz-outline	/ja/docs/Web/CSS/outline
 /ja/docs/CSS/-moz-outline-color	/ja/docs/Web/CSS/outline-color
 /ja/docs/CSS/-moz-outline-offset	/ja/docs/Web/CSS/outline-offset
-/ja/docs/CSS/-moz-radial-gradient	/ja/docs/orphaned/Web/CSS/radial-gradient()
+/ja/docs/CSS/-moz-radial-gradient	/ja/docs/Web/CSS/gradient/radial-gradient()
 /ja/docs/CSS/-moz-transform	/ja/docs/Web/CSS/transform
 /ja/docs/CSS/-moz-transform-origin	/ja/docs/Web/CSS/transform-origin
 /ja/docs/CSS/-moz-user-input	/ja/docs/Web/CSS/-moz-user-input
@@ -278,7 +278,7 @@
 /ja/docs/CSS/Media/Visual	/ja/docs/Web/CSS/@media
 /ja/docs/CSS/Media_queries	/ja/docs/Web/CSS/Media_queries
 /ja/docs/CSS/Multiple_backgrounds	/ja/docs/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds
-/ja/docs/CSS/Other_Resources	/ja/docs/conflicting/Web/CSS_eb0c7d23f84df658710ebb6b4bdec8ea
+/ja/docs/CSS/Other_Resources	/ja/docs/Web/CSS
 /ja/docs/CSS/Privacy_and_the_:visited_selector	/ja/docs/Web/CSS/Privacy_and_the_:visited_selector
 /ja/docs/CSS/Pseudo-classes	/ja/docs/Web/CSS/Pseudo-classes
 /ja/docs/CSS/Pseudo-elements	/ja/docs/Web/CSS/Pseudo-elements
@@ -439,7 +439,7 @@
 /ja/docs/CSS/left	/ja/docs/Web/CSS/left
 /ja/docs/CSS/letter-spacing	/ja/docs/Web/CSS/letter-spacing
 /ja/docs/CSS/line-height	/ja/docs/Web/CSS/line-height
-/ja/docs/CSS/linear-gradient	/ja/docs/orphaned/Web/CSS/linear-gradient()
+/ja/docs/CSS/linear-gradient	/ja/docs/Web/CSS/gradient/linear-gradient()
 /ja/docs/CSS/list-style	/ja/docs/Web/CSS/list-style
 /ja/docs/CSS/list-style-image	/ja/docs/Web/CSS/list-style-image
 /ja/docs/CSS/list-style-position	/ja/docs/Web/CSS/list-style-position
@@ -478,9 +478,9 @@
 /ja/docs/CSS/position	/ja/docs/Web/CSS/position
 /ja/docs/CSS/position_value	/ja/docs/Web/CSS/position_value
 /ja/docs/CSS/quotes	/ja/docs/Web/CSS/quotes
-/ja/docs/CSS/radial-gradient	/ja/docs/orphaned/Web/CSS/radial-gradient()
-/ja/docs/CSS/repeating-linear-gradient	/ja/docs/orphaned/Web/CSS/repeating-linear-gradient()
-/ja/docs/CSS/repeating-radial-gradient	/ja/docs/orphaned/Web/CSS/repeating-radial-gradient()
+/ja/docs/CSS/radial-gradient	/ja/docs/Web/CSS/gradient/radial-gradient()
+/ja/docs/CSS/repeating-linear-gradient	/ja/docs/Web/CSS/gradient/repeating-linear-gradient()
+/ja/docs/CSS/repeating-radial-gradient	/ja/docs/Web/CSS/gradient/repeating-radial-gradient()
 /ja/docs/CSS/resize	/ja/docs/Web/CSS/resize
 /ja/docs/CSS/resolution	/ja/docs/Web/CSS/resolution
 /ja/docs/CSS/right	/ja/docs/Web/CSS/right
@@ -547,7 +547,7 @@
 /ja/docs/CSS:Getting_Started:What_is_CSS	/en-US/docs/Learn/CSS/First_steps/How_CSS_works
 /ja/docs/CSS:Getting_Started:Why_use_CSS	/en-US/docs/Learn/CSS/First_steps/How_CSS_works
 /ja/docs/CSS:Media:Visual	/ja/docs/Web/CSS/@media
-/ja/docs/CSS:Other_Resources	/ja/docs/conflicting/Web/CSS_eb0c7d23f84df658710ebb6b4bdec8ea
+/ja/docs/CSS:Other_Resources	/ja/docs/Web/CSS
 /ja/docs/CSS:color	/ja/docs/Web/CSS/color
 /ja/docs/CSS:computed_value	/ja/docs/Web/CSS/computed_value
 /ja/docs/CSS:font	/ja/docs/Web/CSS/font
@@ -574,7 +574,7 @@
 /ja/docs/Core_JavaScript_1.5_Guide/About	/ja/docs/Web/JavaScript/Guide/Introduction
 /ja/docs/Core_JavaScript_1.5_Guide/About/Core_Language_Features	/ja/docs/orphaned/Web/JavaScript/Guide/Core_Language_Features
 /ja/docs/Core_JavaScript_1.5_Guide/Block_Statement	/ja/docs/Web/JavaScript/Guide/Control_flow_and_error_handling
-/ja/docs/Core_JavaScript_1.5_Guide/Class-Based_vs._Prototype-Based_Languages	/ja/docs/orphaned/Web/JavaScript/Guide/Class-Based_vs._Prototype-Based_Languages
+/ja/docs/Core_JavaScript_1.5_Guide/Class-Based_vs._Prototype-Based_Languages	/ja/docs/Web/JavaScript/Guide/Details_of_the_Object_Model
 /ja/docs/Core_JavaScript_1.5_Guide/Core_Language_Features	/ja/docs/orphaned/Web/JavaScript/Guide/Core_Language_Features
 /ja/docs/Core_JavaScript_1.5_Guide/Creating_New_Objects	/ja/docs/Web/JavaScript/Guide/Working_with_Objects#creating_new_objects
 /ja/docs/Core_JavaScript_1.5_Guide/Creating_New_Objects/Defining_Getters_and_Setters	/ja/docs/Web/JavaScript/Guide/Working_with_Objects#defining_getters_and_setters
@@ -619,7 +619,7 @@
 /ja/docs/Core_JavaScript_1.5_Guide:About	/ja/docs/Web/JavaScript/Guide/Introduction
 /ja/docs/Core_JavaScript_1.5_Guide:About:Core_Language_Features	/ja/docs/orphaned/Web/JavaScript/Guide/Core_Language_Features
 /ja/docs/Core_JavaScript_1.5_Guide:Block_Statement	/ja/docs/Web/JavaScript/Guide/Control_flow_and_error_handling
-/ja/docs/Core_JavaScript_1.5_Guide:Class-Based_vs._Prototype-Based_Languages	/ja/docs/orphaned/Web/JavaScript/Guide/Class-Based_vs._Prototype-Based_Languages
+/ja/docs/Core_JavaScript_1.5_Guide:Class-Based_vs._Prototype-Based_Languages	/ja/docs/Web/JavaScript/Guide/Details_of_the_Object_Model
 /ja/docs/Core_JavaScript_1.5_Guide:Core_Language_Features	/ja/docs/orphaned/Web/JavaScript/Guide/Core_Language_Features
 /ja/docs/Core_JavaScript_1.5_Guide:Creating_New_Objects	/ja/docs/Web/JavaScript/Guide/Working_with_Objects#creating_new_objects
 /ja/docs/Core_JavaScript_1.5_Guide:Creating_New_Objects:Defining_Getters_and_Setters	/ja/docs/Web/JavaScript/Guide/Working_with_Objects#defining_getters_and_setters
@@ -1451,18 +1451,18 @@
 /ja/docs/DOM/window.alert-redirect-1	/ja/docs/Web/API/Window/alert
 /ja/docs/DOM/window.applicationCache	/ja/docs/Web/API/Window/applicationCache
 /ja/docs/DOM/window.arguments	/ja/docs/orphaned/Working_with_windows_in_chrome_code
-/ja/docs/DOM/window.atob	/ja/docs/Web/API/WindowOrWorkerGlobalScope/atob
-/ja/docs/DOM/window.atob-redirect-1	/ja/docs/Web/API/WindowOrWorkerGlobalScope/atob
+/ja/docs/DOM/window.atob	/ja/docs/Web/API/atob
+/ja/docs/DOM/window.atob-redirect-1	/ja/docs/Web/API/atob
 /ja/docs/DOM/window.back	/ja/docs/Web/API/Window/back
 /ja/docs/DOM/window.back-redirect-1	/ja/docs/Web/API/Window/back
 /ja/docs/DOM/window.blur	/ja/docs/Web/API/Window/blur
 /ja/docs/DOM/window.blur-redirect-1	/ja/docs/Web/API/Window/blur
-/ja/docs/DOM/window.btoa	/ja/docs/Web/API/WindowOrWorkerGlobalScope/btoa
-/ja/docs/DOM/window.btoa-redirect-1	/ja/docs/Web/API/WindowOrWorkerGlobalScope/btoa
+/ja/docs/DOM/window.btoa	/ja/docs/Web/API/btoa
+/ja/docs/DOM/window.btoa-redirect-1	/ja/docs/Web/API/btoa
 /ja/docs/DOM/window.cancelAnimationFrame	/ja/docs/Web/API/Window/cancelAnimationFrame
 /ja/docs/DOM/window.captureEvents	/ja/docs/Web/API/Window/captureEvents
-/ja/docs/DOM/window.clearInterval	/ja/docs/Web/API/WindowOrWorkerGlobalScope/clearInterval
-/ja/docs/DOM/window.clearTimeout	/ja/docs/Web/API/WindowOrWorkerGlobalScope/clearTimeout
+/ja/docs/DOM/window.clearInterval	/ja/docs/Web/API/clearInterval
+/ja/docs/DOM/window.clearTimeout	/ja/docs/Web/API/clearTimeout
 /ja/docs/DOM/window.close	/ja/docs/Web/API/Window/close
 /ja/docs/DOM/window.closed	/ja/docs/Web/API/Window/closed
 /ja/docs/DOM/window.confirm	/ja/docs/Web/API/Window/confirm
@@ -1499,24 +1499,24 @@
 /ja/docs/DOM/window.mozInnerScreenY	/ja/docs/Web/API/Window/mozInnerScreenY
 /ja/docs/DOM/window.name	/ja/docs/Web/API/Window/name
 /ja/docs/DOM/window.navigator	/ja/docs/Web/API/Window/navigator
-/ja/docs/DOM/window.navigator.appCodeName	/ja/docs/orphaned/Web/API/NavigatorID/appCodeName
-/ja/docs/DOM/window.navigator.appCodeName-redirect-1	/ja/docs/orphaned/Web/API/NavigatorID/appCodeName
-/ja/docs/DOM/window.navigator.appName	/ja/docs/orphaned/Web/API/NavigatorID/appName
-/ja/docs/DOM/window.navigator.appVersion	/ja/docs/orphaned/Web/API/NavigatorID/appVersion
+/ja/docs/DOM/window.navigator.appCodeName	/ja/docs/Web/API/Navigator/appCodeName
+/ja/docs/DOM/window.navigator.appCodeName-redirect-1	/ja/docs/Web/API/Navigator/appCodeName
+/ja/docs/DOM/window.navigator.appName	/ja/docs/Web/API/Navigator/appName
+/ja/docs/DOM/window.navigator.appVersion	/ja/docs/Web/API/Navigator/appVersion
 /ja/docs/DOM/window.navigator.battery	/ja/docs/Web/API/Navigator/battery
 /ja/docs/DOM/window.navigator.buildID	/ja/docs/Web/API/Navigator/buildID
 /ja/docs/DOM/window.navigator.cookieEnabled	/ja/docs/Web/API/Navigator/cookieEnabled
 /ja/docs/DOM/window.navigator.isLocallyAvailable	/ja/docs/Web/API/Navigator/mozIsLocallyAvailable
-/ja/docs/DOM/window.navigator.language	/ja/docs/orphaned/Web/API/NavigatorLanguage/language
+/ja/docs/DOM/window.navigator.language	/ja/docs/Web/API/Navigator/language
 /ja/docs/DOM/window.navigator.mozIsLocallyAvailable	/ja/docs/Web/API/Navigator/mozIsLocallyAvailable
 /ja/docs/DOM/window.navigator.onLine	/ja/docs/Web/API/Navigator/onLine
 /ja/docs/DOM/window.navigator.oscpu	/ja/docs/Web/API/Navigator/oscpu
-/ja/docs/DOM/window.navigator.platform	/ja/docs/orphaned/Web/API/NavigatorID/platform
-/ja/docs/DOM/window.navigator.product	/ja/docs/orphaned/Web/API/NavigatorID/product
+/ja/docs/DOM/window.navigator.platform	/ja/docs/Web/API/Navigator/platform
+/ja/docs/DOM/window.navigator.product	/ja/docs/Web/API/Navigator/product
 /ja/docs/DOM/window.navigator.productSub	/ja/docs/Web/API/Navigator/productSub
 /ja/docs/DOM/window.navigator.registerContentHandler	/ja/docs/orphaned/Web/API/Navigator/registerContentHandler
 /ja/docs/DOM/window.navigator.registerProtocolHandler	/ja/docs/Web/API/Navigator/registerProtocolHandler
-/ja/docs/DOM/window.navigator.userAgent	/ja/docs/orphaned/Web/API/NavigatorID/userAgent
+/ja/docs/DOM/window.navigator.userAgent	/ja/docs/Web/API/Navigator/userAgent
 /ja/docs/DOM/window.navigator.vendor	/ja/docs/Web/API/Navigator/vendor
 /ja/docs/DOM/window.navigator.vendor-redirect-1	/ja/docs/Web/API/Navigator/vendor
 /ja/docs/DOM/window.navigator.vendorSub	/ja/docs/Web/API/Navigator/vendorSub
@@ -1570,8 +1570,8 @@
 /ja/docs/DOM/window.scrollY-redirect-1	/ja/docs/Web/API/Window/scrollY
 /ja/docs/DOM/window.scrollbars	/ja/docs/Web/API/Window/scrollbars
 /ja/docs/DOM/window.self	/ja/docs/Web/API/Window/self
-/ja/docs/DOM/window.setInterval	/ja/docs/Web/API/WindowOrWorkerGlobalScope/setInterval
-/ja/docs/DOM/window.setTimeout	/ja/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout
+/ja/docs/DOM/window.setInterval	/ja/docs/Web/API/setInterval
+/ja/docs/DOM/window.setTimeout	/ja/docs/Web/API/setTimeout
 /ja/docs/DOM/window.showModalDialog	/ja/docs/Web/API/Window/showModalDialog
 /ja/docs/DOM/window.sidebar	/ja/docs/Web/API/Window/sidebar
 /ja/docs/DOM/window.sizeToContent	/ja/docs/Web/API/Window/sizeToContent
@@ -1684,13 +1684,13 @@
 /ja/docs/DOM:window	/ja/docs/Web/API/Window
 /ja/docs/DOM:window.alert	/ja/docs/Web/API/Window/alert
 /ja/docs/DOM:window.applicationCache	/ja/docs/Web/API/Window/applicationCache
-/ja/docs/DOM:window.atob	/ja/docs/Web/API/WindowOrWorkerGlobalScope/atob
+/ja/docs/DOM:window.atob	/ja/docs/Web/API/atob
 /ja/docs/DOM:window.back	/ja/docs/Web/API/Window/back
 /ja/docs/DOM:window.blur	/ja/docs/Web/API/Window/blur
-/ja/docs/DOM:window.btoa	/ja/docs/Web/API/WindowOrWorkerGlobalScope/btoa
+/ja/docs/DOM:window.btoa	/ja/docs/Web/API/btoa
 /ja/docs/DOM:window.captureEvents	/ja/docs/Web/API/Window/captureEvents
-/ja/docs/DOM:window.clearInterval	/ja/docs/Web/API/WindowOrWorkerGlobalScope/clearInterval
-/ja/docs/DOM:window.clearTimeout	/ja/docs/Web/API/WindowOrWorkerGlobalScope/clearTimeout
+/ja/docs/DOM:window.clearInterval	/ja/docs/Web/API/clearInterval
+/ja/docs/DOM:window.clearTimeout	/ja/docs/Web/API/clearTimeout
 /ja/docs/DOM:window.close	/ja/docs/Web/API/Window/close
 /ja/docs/DOM:window.closed	/ja/docs/Web/API/Window/closed
 /ja/docs/DOM:window.confirm	/ja/docs/Web/API/Window/confirm
@@ -1723,22 +1723,22 @@
 /ja/docs/DOM:window.moveTo	/ja/docs/Web/API/Window/moveTo
 /ja/docs/DOM:window.name	/ja/docs/Web/API/Window/name
 /ja/docs/DOM:window.navigator	/ja/docs/Web/API/Window/navigator
-/ja/docs/DOM:window.navigator.appCodeName	/ja/docs/orphaned/Web/API/NavigatorID/appCodeName
-/ja/docs/DOM:window.navigator.appName	/ja/docs/orphaned/Web/API/NavigatorID/appName
-/ja/docs/DOM:window.navigator.appVersion	/ja/docs/orphaned/Web/API/NavigatorID/appVersion
+/ja/docs/DOM:window.navigator.appCodeName	/ja/docs/Web/API/Navigator/appCodeName
+/ja/docs/DOM:window.navigator.appName	/ja/docs/Web/API/Navigator/appName
+/ja/docs/DOM:window.navigator.appVersion	/ja/docs/Web/API/Navigator/appVersion
 /ja/docs/DOM:window.navigator.buildID	/ja/docs/Web/API/Navigator/buildID
 /ja/docs/DOM:window.navigator.cookieEnabled	/ja/docs/Web/API/Navigator/cookieEnabled
 /ja/docs/DOM:window.navigator.isLocallyAvailable	/ja/docs/Web/API/Navigator/mozIsLocallyAvailable
-/ja/docs/DOM:window.navigator.language	/ja/docs/orphaned/Web/API/NavigatorLanguage/language
+/ja/docs/DOM:window.navigator.language	/ja/docs/Web/API/Navigator/language
 /ja/docs/DOM:window.navigator.mozIsLocallyAvailable	/ja/docs/Web/API/Navigator/mozIsLocallyAvailable
 /ja/docs/DOM:window.navigator.onLine	/ja/docs/Web/API/Navigator/onLine
 /ja/docs/DOM:window.navigator.oscpu	/ja/docs/Web/API/Navigator/oscpu
-/ja/docs/DOM:window.navigator.platform	/ja/docs/orphaned/Web/API/NavigatorID/platform
-/ja/docs/DOM:window.navigator.product	/ja/docs/orphaned/Web/API/NavigatorID/product
+/ja/docs/DOM:window.navigator.platform	/ja/docs/Web/API/Navigator/platform
+/ja/docs/DOM:window.navigator.product	/ja/docs/Web/API/Navigator/product
 /ja/docs/DOM:window.navigator.productSub	/ja/docs/Web/API/Navigator/productSub
 /ja/docs/DOM:window.navigator.registerContentHandler	/ja/docs/orphaned/Web/API/Navigator/registerContentHandler
 /ja/docs/DOM:window.navigator.registerProtocolHandler	/ja/docs/Web/API/Navigator/registerProtocolHandler
-/ja/docs/DOM:window.navigator.userAgent	/ja/docs/orphaned/Web/API/NavigatorID/userAgent
+/ja/docs/DOM:window.navigator.userAgent	/ja/docs/Web/API/Navigator/userAgent
 /ja/docs/DOM:window.navigator.vendor	/ja/docs/Web/API/Navigator/vendor
 /ja/docs/DOM:window.navigator.vendorSub	/ja/docs/Web/API/Navigator/vendorSub
 /ja/docs/DOM:window.onabort	/ja/docs/Web/API/GlobalEventHandlers/onabort
@@ -1784,8 +1784,8 @@
 /ja/docs/DOM:window.scrollY	/ja/docs/Web/API/Window/scrollY
 /ja/docs/DOM:window.scrollbars	/ja/docs/Web/API/Window/scrollbars
 /ja/docs/DOM:window.self	/ja/docs/Web/API/Window/self
-/ja/docs/DOM:window.setInterval	/ja/docs/Web/API/WindowOrWorkerGlobalScope/setInterval
-/ja/docs/DOM:window.setTimeout	/ja/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout
+/ja/docs/DOM:window.setInterval	/ja/docs/Web/API/setInterval
+/ja/docs/DOM:window.setTimeout	/ja/docs/Web/API/setTimeout
 /ja/docs/DOM:window.showModalDialog	/ja/docs/Web/API/Window/showModalDialog
 /ja/docs/DOM:window.sidebar	/ja/docs/Web/API/Window/sidebar
 /ja/docs/DOM:window.sizeToContent	/ja/docs/Web/API/Window/sizeToContent
@@ -2114,7 +2114,7 @@
 /ja/docs/Installing_Extensions_and_Themes_From_Web_Pages	/ja/docs/orphaned/Installing_Extensions_and_Themes_From_Web_Pages
 /ja/docs/Installing_extensions	/ja/docs/orphaned/Installing_extensions
 /ja/docs/Introducing_Content_Security_Policy	/ja/docs/Web/HTTP/CSP
-/ja/docs/Introduction_to_DOM_Inspector	/ja/docs/orphaned/Introduction_to_DOM_Inspector
+/ja/docs/Introduction_to_DOM_Inspector	/ja/docs/Tools/Page_Inspector
 /ja/docs/Introduction_to_using_XPath_in_JavaScript	/ja/docs/Web/XPath/Introduction_to_using_XPath_in_JavaScript
 /ja/docs/JSON	/ja/docs/Glossary/JSON
 /ja/docs/JavaScript	/ja/docs/Web/JavaScript
@@ -2129,7 +2129,7 @@
 /ja/docs/JavaScript/Guide/About-redirect-1	/ja/docs/Web/JavaScript/Guide/Introduction
 /ja/docs/JavaScript/Guide/Block_Statement	/ja/docs/Web/JavaScript/Guide/Control_flow_and_error_handling
 /ja/docs/JavaScript/Guide/Block_Statement-redirect-1	/ja/docs/Web/JavaScript/Guide/Control_flow_and_error_handling
-/ja/docs/JavaScript/Guide/Class-Based_vs._Prototype-Based_Languages	/ja/docs/orphaned/Web/JavaScript/Guide/Class-Based_vs._Prototype-Based_Languages
+/ja/docs/JavaScript/Guide/Class-Based_vs._Prototype-Based_Languages	/ja/docs/Web/JavaScript/Guide/Details_of_the_Object_Model
 /ja/docs/JavaScript/Guide/Closures	/ja/docs/Web/JavaScript/Closures
 /ja/docs/JavaScript/Guide/Core_Language_Features	/ja/docs/orphaned/Web/JavaScript/Guide/Core_Language_Features
 /ja/docs/JavaScript/Guide/Creating_New_Objects	/ja/docs/Web/JavaScript/Guide/Working_with_Objects#creating_new_objects
@@ -2696,7 +2696,6 @@
 /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/How_to_contribute	/ja/docs/orphaned/Learn/How_to_contribute
 /ja/docs/Learn/JavaScript/Objects/継承	/ja/docs/Learn/JavaScript/Objects/Inheritance
 /ja/docs/Learn/JavaScript/非同期	/ja/docs/Learn/JavaScript/Asynchronous
 /ja/docs/Learn/Performance/Populating_the_page:_how_browsers_work	/ja/docs/Web/Performance/How_browsers_work
@@ -2759,20 +2758,15 @@
 /ja/docs/MDN/Contribute/Tools/KumaScript	/ja/docs/MDN/Tools/KumaScript
 /ja/docs/MDN/Contribute/Tools/KumaScript/Troubleshooting	/ja/docs/MDN/Tools/KumaScript/Troubleshooting
 /ja/docs/MDN/Contribute/Tools/Sample_server	/ja/docs/MDN/Tools/Sample_server
-/ja/docs/MDN/Contribute/Troubleshooting	/ja/docs/orphaned/MDN/Troubleshooting
-/ja/docs/MDN/Dashboards	/ja/docs/orphaned/MDN/Dashboards
-/ja/docs/MDN/Dashboards/Editors	/ja/docs/orphaned/MDN/Dashboards/Editors
 /ja/docs/MDN/Feedback	/ja/docs/MDN/Contribute/Feedback
 /ja/docs/MDN/Getting_started	/ja/docs/MDN/Contribute/Getting_started
 /ja/docs/MDN/Kuma	/ja/docs/MDN/Yari
-/ja/docs/MDN/Kuma/Server_charts	/ja/docs/orphaned/MDN/Kuma/Server_charts
 /ja/docs/MDN/Structures/API_references	/ja/docs/orphaned/MDN/Structures/API_references
 /ja/docs/MDN/Structures/API_references/API_reference_sidebars	/ja/docs/MDN/Contribute/Howto/Write_an_API_reference/Sidebars
 /ja/docs/MDN/Structures/API_references/What_does_an_API_reference_need	/ja/docs/orphaned/MDN/Structures/API_references/What_does_an_API_reference_need
 /ja/docs/MDN/Structures/Live_samples/Simple_live_sample_demo	/ja/docs/orphaned/MDN/Structures/Live_samples/Simple_live_sample_demo
 /ja/docs/MDN/Structures/Macros/Commonly-used_macros/creating_templates_for_multi-languages	/ja/docs/orphaned/MDN/Structures/Macros/Commonly-used_macros/creating_templates_for_multi-languages
 /ja/docs/MDN/Tools/Document_parameters	/ja/docs/MDN/Tools/Unsupported_GET_API
-/ja/docs/MDN/Troubleshooting	/ja/docs/orphaned/MDN/Troubleshooting
 /ja/docs/MDN/User_guide	/ja/docs/MDN/Tools
 /ja/docs/MDN/User_guide/Linking_to_MDN	/ja/docs/orphaned/MDN/About/Linking_to_MDN
 /ja/docs/MDN_at_ten	/ja/docs/MDN/At_ten
@@ -2801,7 +2795,6 @@
 /ja/docs/Mozilla/Add-ons/WebExtensions/前提条件	/ja/docs/Mozilla/Add-ons/WebExtensions/Prerequisites
 /ja/docs/Mozilla/Firefox/Releases/Firefox_47_for_developers	/ja/docs/Mozilla/Firefox/Releases/47
 /ja/docs/Mozilla_Addons_FAQ_(external)	https://addons.mozilla.org/faq.php
-/ja/docs/Mozmill	/ja/docs/orphaned/Mozmill
 /ja/docs/NPAPI/Constants	/ja/docs/Plugins/Guide/Constants
 /ja/docs/NPAPI:Constants	/ja/docs/Plugins/Guide/Constants
 /ja/docs/Namespace	/ja/docs/Glossary/Namespace
@@ -2820,12 +2813,10 @@
 /ja/docs/Notification_object/requestPermission	/ja/docs/Web/API/Notification/requestPermission
 /ja/docs/Notification_object/tag	/ja/docs/Web/API/Notification/tag
 /ja/docs/Notification_object/title	/ja/docs/Web/API/Notification/title
-/ja/docs/NsIDOMHTMLMediaElement	/ja/docs/orphaned/NsIDOMHTMLMediaElement
 /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/Other_JavaScript_tools	/ja/docs/Tools
 /ja/docs/Parsing_and_serializing_XML	/ja/docs/Web/Guide/Parsing_and_serializing_XML
-/ja/docs/Participating_in_the_Mozilla_project	/ja/docs/orphaned/Participating_in_the_Mozilla_project
 /ja/docs/Property_compatibility_table_for_form_widgets	/ja/docs/Learn/Forms/Property_compatibility_table_for_form_controls
 /ja/docs/Quirks_Mode_and_Standards_Mode	/ja/docs/Web/HTML/Quirks_Mode_and_Standards_Mode
 /ja/docs/Rich-Text_Editing_in_Mozilla	/ja/docs/Web/Guide/HTML/Editable_content/Rich-Text_Editing_in_Mozilla
@@ -2947,7 +2938,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/Memory/Comparing_heap_snapshots	/ja/docs/conflicting/Tools/Memory/Basic_operations
+/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
 /ja/docs/Tools/Page_Inspector-redirect-1	/ja/docs/Tools/Page_Inspector
@@ -2958,13 +2949,12 @@
 /ja/docs/Tools/Page_Inspector/Keyboard_shortcuts	/ja/docs/orphaned/Tools/Page_Inspector/Keyboard_shortcuts
 /ja/docs/Tools/Page_Inspector/Style_panel	/ja/docs/Tools/Page_Inspector
 /ja/docs/Tools/Performance/Profiler_walkthrough	/ja/docs/Tools/Performance/Call_Tree
-/ja/docs/Tools/Profiler	/ja/docs/conflicting/Tools/Performance
+/ja/docs/Tools/Profiler	/ja/docs/Tools/Performance
 /ja/docs/Tools/Release_notes	/ja/docs/Mozilla/Firefox/Releases
 /ja/docs/Tools/Remote_Debugging/Debugging_Firefox_for_Android_with_WebIDE_clone	/ja/docs/Tools/Remote_Debugging/Debugging_Firefox_for_Android_with_WebIDE
 /ja/docs/Tools/Responsive_Design_Mode_(before_Firefox_52)	/ja/docs/Tools/Responsive_Design_Mode
 /ja/docs/Tools/Responsive_Design_View	/ja/docs/Tools/Responsive_Design_Mode
 /ja/docs/Tools/Web_Console-redirect-1	/ja/docs/Tools/Web_Console
-/ja/docs/Tools/Web_Console/Keyboard_shortcuts	/ja/docs/orphaned/Tools/Web_Console/Keyboard_shortcuts
 /ja/docs/Tools/Web_Console/Opening_the_Web_Console	/ja/docs/Tools/Web_Console/UI_Tour
 /ja/docs/Tools/Web_Console/WebConsoleHelp	/en-US/docs/Tools/Web_Console/Helpers
 /ja/docs/Transforming_XML_with_XSLT	/ja/docs/Web/XSLT/Transforming_XML_with_XSLT
@@ -2987,7 +2977,6 @@
 /ja/docs/Using_XMLHttpRequest	/ja/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest
 /ja/docs/Using_XPath	/ja/docs/Web/XPath/Introduction_to_using_XPath_in_JavaScript
 /ja/docs/Using_audio_and_video_in_Firefox	/ja/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content
-/ja/docs/Using_audio_and_video_in_Firefox/NsIDOMHTMLMediaElement	/ja/docs/orphaned/NsIDOMHTMLMediaElement
 /ja/docs/Using_files_from_web_applications	/ja/docs/Web/API/File/Using_files_from_web_applications
 /ja/docs/Using_geolocation	/ja/docs/Web/API/Geolocation_API
 /ja/docs/Using_gradients	/ja/docs/Web/CSS/CSS_Images/Using_CSS_gradients
@@ -3112,7 +3101,7 @@
 /ja/docs/Web/API/Geolocation.watchPosition	/ja/docs/Web/API/Geolocation/watchPosition
 /ja/docs/Web/API/Geolocation/Using_geolocation	/ja/docs/Web/API/Geolocation_API
 /ja/docs/Web/API/GlobalFetch	/en-US/docs/Web/API/WindowOrWorkerGlobalScope
-/ja/docs/Web/API/GlobalFetch/fetch	/ja/docs/Web/API/WindowOrWorkerGlobalScope/fetch
+/ja/docs/Web/API/GlobalFetch/fetch	/ja/docs/Web/API/fetch
 /ja/docs/Web/API/HTMLFormElement.acceptCharset	/ja/docs/Web/API/HTMLFormElement/acceptCharset
 /ja/docs/Web/API/HTMLFormElement.action	/ja/docs/Web/API/HTMLFormElement/action
 /ja/docs/Web/API/HTMLFormElement.elements	/ja/docs/Web/API/HTMLFormElement/elements
@@ -3169,24 +3158,22 @@
 /ja/docs/Web/API/IDBFactory.cmp	/ja/docs/Web/API/IDBFactory/cmp
 /ja/docs/Web/API/IDBFactory.deleteDatabase	/ja/docs/Web/API/IDBFactory/deleteDatabase
 /ja/docs/Web/API/IDBFactory.open	/ja/docs/Web/API/IDBFactory/open
+/ja/docs/Web/API/Index	/ja/docs/conflicting/Web/API_49b9a84475f11fffb8fc271a7df3c49a
 /ja/docs/Web/API/IndexedDB_API/Basic_Concepts_Behind_IndexedDB	/ja/docs/Web/API/IndexedDB_API/Basic_Terminology
 /ja/docs/Web/API/MediaRecorder_API	/ja/docs/Web/API/MediaStream_Recording_API
 /ja/docs/Web/API/Navigator.getUserMedia	/ja/docs/Web/API/Navigator/getUserMedia
 /ja/docs/Web/API/Navigator/registerContentHandler	/ja/docs/orphaned/Web/API/Navigator/registerContentHandler
-/ja/docs/Web/API/Navigator/userAgent	/ja/docs/orphaned/Web/API/NavigatorID/userAgent
-/ja/docs/Web/API/NavigatorConcurrentHardware	/ja/docs/orphaned/Web/API/NavigatorConcurrentHardware
-/ja/docs/Web/API/NavigatorConcurrentHardware/hardwareConcurrency	/ja/docs/orphaned/Web/API/NavigatorConcurrentHardware/hardwareConcurrency
-/ja/docs/Web/API/NavigatorID	/ja/docs/orphaned/Web/API/NavigatorID
-/ja/docs/Web/API/NavigatorID/appCodeName	/ja/docs/orphaned/Web/API/NavigatorID/appCodeName
-/ja/docs/Web/API/NavigatorID/appName	/ja/docs/orphaned/Web/API/NavigatorID/appName
-/ja/docs/Web/API/NavigatorID/appVersion	/ja/docs/orphaned/Web/API/NavigatorID/appVersion
-/ja/docs/Web/API/NavigatorID/platform	/ja/docs/orphaned/Web/API/NavigatorID/platform
-/ja/docs/Web/API/NavigatorID/product	/ja/docs/orphaned/Web/API/NavigatorID/product
-/ja/docs/Web/API/NavigatorID/userAgent	/ja/docs/orphaned/Web/API/NavigatorID/userAgent
-/ja/docs/Web/API/NavigatorLanguage	/ja/docs/orphaned/Web/API/NavigatorLanguage
-/ja/docs/Web/API/NavigatorLanguage.languages	/ja/docs/orphaned/Web/API/NavigatorLanguage/languages
-/ja/docs/Web/API/NavigatorLanguage/language	/ja/docs/orphaned/Web/API/NavigatorLanguage/language
-/ja/docs/Web/API/NavigatorLanguage/languages	/ja/docs/orphaned/Web/API/NavigatorLanguage/languages
+/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
+/ja/docs/Web/API/NavigatorID/appVersion	/ja/docs/Web/API/Navigator/appVersion
+/ja/docs/Web/API/NavigatorID/platform	/ja/docs/Web/API/Navigator/platform
+/ja/docs/Web/API/NavigatorID/product	/ja/docs/Web/API/Navigator/product
+/ja/docs/Web/API/NavigatorID/userAgent	/ja/docs/Web/API/Navigator/userAgent
+/ja/docs/Web/API/NavigatorLanguage	/ja/docs/Web/API/Navigator
+/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	/ja/docs/Web/API/Navigator/onLine
 /ja/docs/Web/API/NavigatorStorage	/ja/docs/orphaned/Web/API/NavigatorStorage
@@ -3224,9 +3211,7 @@
 /ja/docs/Web/API/Node.replaceChild	/ja/docs/Web/API/Node/replaceChild
 /ja/docs/Web/API/Node.textContent	/ja/docs/Web/API/Node/textContent
 /ja/docs/Web/API/Node/baseURIObject	/ja/docs/Web/API/Node
-/ja/docs/Web/API/Node/cloneNode-old	/ja/docs/orphaned/Web/API/Node/getUserData
 /ja/docs/Web/API/Node/firstChild-temp	/ja/docs/Web/API/Node/firstChild
-/ja/docs/Web/API/Node/getUserData	/ja/docs/orphaned/Web/API/Node/getUserData
 /ja/docs/Web/API/Node/innerText	/ja/docs/Web/API/HTMLElement/innerText
 /ja/docs/Web/API/Node/localName	/ja/docs/Web/API/Element/localName
 /ja/docs/Web/API/Node/namespaceURI	/ja/docs/Web/API/Element/namespaceURI
@@ -3234,12 +3219,6 @@
 /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/ParentNode	/ja/docs/orphaned/Web/API/ParentNode
-/ja/docs/Web/API/ParentNode/append	/ja/docs/orphaned/Web/API/ParentNode/append
-/ja/docs/Web/API/ParentNode/childElementCount	/ja/docs/Web/API/Element/childElementCount
-/ja/docs/Web/API/ParentNode/children	/ja/docs/orphaned/Web/API/ParentNode/children
-/ja/docs/Web/API/ParentNode/prepend	/ja/docs/orphaned/Web/API/ParentNode/prepend
-/ja/docs/Web/API/ParentNode/querySelectorAll	/ja/docs/orphaned/Web/API/ParentNode/querySelectorAll
 /ja/docs/Web/API/Position	/ja/docs/Web/API/GeolocationPosition
 /ja/docs/Web/API/PositionError	/ja/docs/Web/API/GeolocationPositionError
 /ja/docs/Web/API/Push_API/Using_the_Push_API	/ja/docs/Web/API/Push_API
@@ -3323,28 +3302,40 @@
 /ja/docs/Web/API/Window/onreset	/ja/docs/Web/API/GlobalEventHandlers/onreset
 /ja/docs/Web/API/Window/onresize	/ja/docs/Web/API/GlobalEventHandlers/onresize
 /ja/docs/Web/API/Window/restore	/ja/docs/Web/API/Window/moveTo
-/ja/docs/Web/API/Window/setInterval	/ja/docs/Web/API/WindowOrWorkerGlobalScope/setInterval
-/ja/docs/Web/API/Window/setTimeout	/ja/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout
+/ja/docs/Web/API/Window/setInterval	/ja/docs/Web/API/setInterval
+/ja/docs/Web/API/Window/setTimeout	/ja/docs/Web/API/setTimeout
 /ja/docs/Web/API/Window/unescape	/ja/docs/Web/JavaScript/Reference/Global_Objects/unescape
 /ja/docs/Web/API/Window/vrdisplaydisconnected_event	/ja/docs/Web/API/Window/vrdisplaydisconnect_event
 /ja/docs/Web/API/WindowBase64	/ja/docs/Web/API/WindowOrWorkerGlobalScope
 /ja/docs/Web/API/WindowBase64/Base64_encoding_and_decoding	/ja/docs/Glossary/Base64
-/ja/docs/Web/API/WindowBase64/atob	/ja/docs/Web/API/WindowOrWorkerGlobalScope/atob
-/ja/docs/Web/API/WindowBase64/btoa	/ja/docs/Web/API/WindowOrWorkerGlobalScope/btoa
+/ja/docs/Web/API/WindowBase64/atob	/ja/docs/Web/API/atob
+/ja/docs/Web/API/WindowBase64/btoa	/ja/docs/Web/API/btoa
+/ja/docs/Web/API/WindowOrWorkerGlobalScope/atob	/ja/docs/Web/API/atob
+/ja/docs/Web/API/WindowOrWorkerGlobalScope/btoa	/ja/docs/Web/API/btoa
+/ja/docs/Web/API/WindowOrWorkerGlobalScope/caches	/ja/docs/Web/API/caches
+/ja/docs/Web/API/WindowOrWorkerGlobalScope/clearInterval	/ja/docs/Web/API/clearInterval
+/ja/docs/Web/API/WindowOrWorkerGlobalScope/clearTimeout	/ja/docs/Web/API/clearTimeout
+/ja/docs/Web/API/WindowOrWorkerGlobalScope/createImageBitmap	/ja/docs/Web/API/createImageBitmap
+/ja/docs/Web/API/WindowOrWorkerGlobalScope/fetch	/ja/docs/Web/API/fetch
+/ja/docs/Web/API/WindowOrWorkerGlobalScope/indexedDB	/ja/docs/Web/API/indexedDB
+/ja/docs/Web/API/WindowOrWorkerGlobalScope/isSecureContext	/ja/docs/Web/API/isSecureContext
+/ja/docs/Web/API/WindowOrWorkerGlobalScope/origin	/ja/docs/Web/API/origin
+/ja/docs/Web/API/WindowOrWorkerGlobalScope/setInterval	/ja/docs/Web/API/setInterval
+/ja/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout	/ja/docs/Web/API/setTimeout
 /ja/docs/Web/API/WindowTimers	/ja/docs/Web/API/WindowOrWorkerGlobalScope
-/ja/docs/Web/API/WindowTimers/clearInterval	/ja/docs/Web/API/WindowOrWorkerGlobalScope/clearInterval
-/ja/docs/Web/API/WindowTimers/clearTimeout	/ja/docs/Web/API/WindowOrWorkerGlobalScope/clearTimeout
-/ja/docs/Web/API/WindowTimers/setInterval	/ja/docs/Web/API/WindowOrWorkerGlobalScope/setInterval
-/ja/docs/Web/API/WindowTimers/setTimeout	/ja/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout
-/ja/docs/Web/API/WorkerGlobalScope/caches	/ja/docs/Web/API/WindowOrWorkerGlobalScope/caches
+/ja/docs/Web/API/WindowTimers/clearInterval	/ja/docs/Web/API/clearInterval
+/ja/docs/Web/API/WindowTimers/clearTimeout	/ja/docs/Web/API/clearTimeout
+/ja/docs/Web/API/WindowTimers/setInterval	/ja/docs/Web/API/setInterval
+/ja/docs/Web/API/WindowTimers/setTimeout	/ja/docs/Web/API/setTimeout
+/ja/docs/Web/API/WorkerGlobalScope/caches	/ja/docs/Web/API/caches
 /ja/docs/Web/API/XMLHttpRequest/openRequest	/ja/docs/orphaned/Web/API/XMLHttpRequest/openRequest
-/ja/docs/Web/API/XRHandedness	/ja/docs/conflicting/Web/API/XRInputSource/handedness
-/ja/docs/Web/API/XRReferenceSpaceEventInit	/ja/docs/conflicting/Web/API/XRReferenceSpaceEvent/XRReferenceSpaceEvent
-/ja/docs/Web/API/XRReferenceSpaceEventInit/referenceSpace	/ja/docs/conflicting/Web/API/XRReferenceSpaceEvent/XRReferenceSpaceEvent_0f733d39fd3094010931f093b9045686
-/ja/docs/Web/API/XRReferenceSpaceEventInit/transform	/ja/docs/conflicting/Web/API/XRReferenceSpaceEvent/XRReferenceSpaceEvent_7dfb381c892055a0c91980d537a86c6b
+/ja/docs/Web/API/XRHandedness	/ja/docs/Web/API/XRInputSource/handedness
+/ja/docs/Web/API/XRReferenceSpaceEventInit	/ja/docs/Web/API/XRReferenceSpaceEvent/XRReferenceSpaceEvent
+/ja/docs/Web/API/XRReferenceSpaceEventInit/referenceSpace	/ja/docs/Web/API/XRReferenceSpaceEvent/XRReferenceSpaceEvent
+/ja/docs/Web/API/XRReferenceSpaceEventInit/transform	/ja/docs/Web/API/XRReferenceSpaceEvent/XRReferenceSpaceEvent
 /ja/docs/Web/API/XRReferenceSpaceType	/ja/docs/Web/API/XRSession/requestReferenceSpace
 /ja/docs/Web/API/XRSessionMode	/ja/docs/orphaned/Web/API/XRSessionMode
-/ja/docs/Web/API/XRTargetRayMode	/ja/docs/conflicting/Web/API/XRInputSource/targetRayMode
+/ja/docs/Web/API/XRTargetRayMode	/ja/docs/Web/API/XRInputSource/targetRayMode
 /ja/docs/Web/API/console.dir	/ja/docs/Web/API/Console/dir
 /ja/docs/Web/API/console.log	/ja/docs/Web/API/Console/log
 /ja/docs/Web/API/console.time	/ja/docs/Web/API/Console/time
@@ -3451,14 +3442,14 @@
 /ja/docs/Web/API/window.alert	/ja/docs/Web/API/Window/alert
 /ja/docs/Web/API/window.applicationCache	/ja/docs/Web/API/Window/applicationCache
 /ja/docs/Web/API/window.arguments	/ja/docs/orphaned/Working_with_windows_in_chrome_code
-/ja/docs/Web/API/window.atob	/ja/docs/Web/API/WindowOrWorkerGlobalScope/atob
+/ja/docs/Web/API/window.atob	/ja/docs/Web/API/atob
 /ja/docs/Web/API/window.back	/ja/docs/Web/API/Window/back
 /ja/docs/Web/API/window.blur	/ja/docs/Web/API/Window/blur
-/ja/docs/Web/API/window.btoa	/ja/docs/Web/API/WindowOrWorkerGlobalScope/btoa
+/ja/docs/Web/API/window.btoa	/ja/docs/Web/API/btoa
 /ja/docs/Web/API/window.cancelAnimationFrame	/ja/docs/Web/API/Window/cancelAnimationFrame
 /ja/docs/Web/API/window.captureEvents	/ja/docs/Web/API/Window/captureEvents
-/ja/docs/Web/API/window.clearInterval	/ja/docs/Web/API/WindowOrWorkerGlobalScope/clearInterval
-/ja/docs/Web/API/window.clearTimeout	/ja/docs/Web/API/WindowOrWorkerGlobalScope/clearTimeout
+/ja/docs/Web/API/window.clearInterval	/ja/docs/Web/API/clearInterval
+/ja/docs/Web/API/window.clearTimeout	/ja/docs/Web/API/clearTimeout
 /ja/docs/Web/API/window.close	/ja/docs/Web/API/Window/close
 /ja/docs/Web/API/window.closed	/ja/docs/Web/API/Window/closed
 /ja/docs/Web/API/window.confirm	/ja/docs/Web/API/Window/confirm
@@ -3496,17 +3487,17 @@
 /ja/docs/Web/API/window.mozRequestAnimationFrame	/ja/docs/Web/API/Window/requestAnimationFrame
 /ja/docs/Web/API/window.name	/ja/docs/Web/API/Window/name
 /ja/docs/Web/API/window.navigator	/ja/docs/Web/API/Window/navigator
-/ja/docs/Web/API/window.navigator.appCodeName	/ja/docs/orphaned/Web/API/NavigatorID/appCodeName
-/ja/docs/Web/API/window.navigator.appName	/ja/docs/orphaned/Web/API/NavigatorID/appName
+/ja/docs/Web/API/window.navigator.appCodeName	/ja/docs/Web/API/Navigator/appCodeName
+/ja/docs/Web/API/window.navigator.appName	/ja/docs/Web/API/Navigator/appName
 /ja/docs/Web/API/window.navigator.battery	/ja/docs/Web/API/Navigator/battery
-/ja/docs/Web/API/window.navigator.language	/ja/docs/orphaned/Web/API/NavigatorLanguage/language
+/ja/docs/Web/API/window.navigator.language	/ja/docs/Web/API/Navigator/language
 /ja/docs/Web/API/window.navigator.onLine	/ja/docs/Web/API/Navigator/onLine
 /ja/docs/Web/API/window.navigator.oscpu	/ja/docs/Web/API/Navigator/oscpu
-/ja/docs/Web/API/window.navigator.platform	/ja/docs/orphaned/Web/API/NavigatorID/platform
-/ja/docs/Web/API/window.navigator.product	/ja/docs/orphaned/Web/API/NavigatorID/product
+/ja/docs/Web/API/window.navigator.platform	/ja/docs/Web/API/Navigator/platform
+/ja/docs/Web/API/window.navigator.product	/ja/docs/Web/API/Navigator/product
 /ja/docs/Web/API/window.navigator.productSub	/ja/docs/Web/API/Navigator/productSub
 /ja/docs/Web/API/window.navigator.registerContentHandler	/ja/docs/orphaned/Web/API/Navigator/registerContentHandler
-/ja/docs/Web/API/window.navigator.userAgent	/ja/docs/orphaned/Web/API/NavigatorID/userAgent
+/ja/docs/Web/API/window.navigator.userAgent	/ja/docs/Web/API/Navigator/userAgent
 /ja/docs/Web/API/window.navigator.vendor	/ja/docs/Web/API/Navigator/vendor
 /ja/docs/Web/API/window.navigator.vendorSub	/ja/docs/Web/API/Navigator/vendorSub
 /ja/docs/Web/API/window.onabort	/ja/docs/Web/API/GlobalEventHandlers/onabort
@@ -3562,8 +3553,8 @@
 /ja/docs/Web/API/window.scrollbars	/ja/docs/Web/API/Window/scrollbars
 /ja/docs/Web/API/window.self	/ja/docs/Web/API/Window/self
 /ja/docs/Web/API/window.setCursor	/ja/docs/Web/API/Window/setCursor
-/ja/docs/Web/API/window.setInterval	/ja/docs/Web/API/WindowOrWorkerGlobalScope/setInterval
-/ja/docs/Web/API/window.setTimeout	/ja/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout
+/ja/docs/Web/API/window.setInterval	/ja/docs/Web/API/setInterval
+/ja/docs/Web/API/window.setTimeout	/ja/docs/Web/API/setTimeout
 /ja/docs/Web/API/window.showModalDialog	/ja/docs/Web/API/Window/showModalDialog
 /ja/docs/Web/API/window.sidebar	/ja/docs/Web/API/Window/sidebar
 /ja/docs/Web/API/window.sizeToContent	/ja/docs/Web/API/Window/sizeToContent
@@ -3638,6 +3629,8 @@
 /ja/docs/Web/CSS/Background_Backup	/ja/docs/Web/CSS/background
 /ja/docs/Web/CSS/Block_formatting_context	/ja/docs/Web/Guide/CSS/Block_formatting_context
 /ja/docs/Web/CSS/CSS_Background_and_Borders	/ja/docs/Web/CSS/CSS_Backgrounds_and_Borders
+/ja/docs/Web/CSS/CSS_Background_and_Borders/Border-image_generator	/ja/docs/Web/CSS/CSS_Backgrounds_and_Borders/Border-image_generator
+/ja/docs/Web/CSS/CSS_Background_and_Borders/Border-radius_generator	/ja/docs/Web/CSS/CSS_Backgrounds_and_Borders/Border-radius_generator
 /ja/docs/Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds	/ja/docs/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds
 /ja/docs/Web/CSS/CSS_Backgrounds_and_Borders/Scaling_background_images	/ja/docs/Web/CSS/CSS_Backgrounds_and_Borders/Resizing_background_images
 /ja/docs/Web/CSS/CSS_Colors	/en-US/docs/Web/CSS/CSS_Color
@@ -3681,7 +3674,7 @@
 /ja/docs/Web/CSS/Media	/ja/docs/Web/CSS/@media
 /ja/docs/Web/CSS/Media/Visual	/ja/docs/Web/CSS/@media
 /ja/docs/Web/CSS/Motion_Path	/ja/docs/Web/CSS/CSS_Motion_Path
-/ja/docs/Web/CSS/Other_Resources	/ja/docs/conflicting/Web/CSS_eb0c7d23f84df658710ebb6b4bdec8ea
+/ja/docs/Web/CSS/Other_Resources	/ja/docs/Web/CSS
 /ja/docs/Web/CSS/Reference/@viewport	/ja/docs/Web/CSS/@viewport
 /ja/docs/Web/CSS/Reference/@viewport/max-zoom	/ja/docs/Web/CSS/@viewport
 /ja/docs/Web/CSS/Reference/@viewport/min-zoom	/ja/docs/Web/CSS/@viewport
@@ -3690,6 +3683,7 @@
 /ja/docs/Web/CSS/Reference/@viewport/zoom	/ja/docs/Web/CSS/@viewport
 /ja/docs/Web/CSS/Reference/Mozilla_Extensions	/ja/docs/Web/CSS/Mozilla_Extensions
 /ja/docs/Web/CSS/Scaling_background_images	/ja/docs/Web/CSS/CSS_Backgrounds_and_Borders/Resizing_background_images
+/ja/docs/Web/CSS/Tools	/ja/docs/conflicting/Web/CSS
 /ja/docs/Web/CSS/Understanding_z_index	/ja/docs/Web/CSS/CSS_Positioning/Understanding_z_index
 /ja/docs/Web/CSS/Understanding_z_index/Adding_z-index	/ja/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Adding_z-index
 /ja/docs/Web/CSS/Understanding_z_index/Stacking_and_float	/ja/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_and_float
@@ -3714,8 +3708,8 @@
 /ja/docs/Web/CSS/box_model	/ja/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model
 /ja/docs/Web/CSS/calc	/ja/docs/Web/CSS/calc()
 /ja/docs/Web/CSS/clamp	/ja/docs/Web/CSS/clamp()
-/ja/docs/Web/CSS/conic-gradient	/ja/docs/orphaned/Web/CSS/conic-gradient()
-/ja/docs/Web/CSS/conic-gradient()	/ja/docs/orphaned/Web/CSS/conic-gradient()
+/ja/docs/Web/CSS/conic-gradient	/ja/docs/Web/CSS/gradient/conic-gradient()
+/ja/docs/Web/CSS/conic-gradient()	/ja/docs/Web/CSS/gradient/conic-gradient()
 /ja/docs/Web/CSS/counter	/ja/docs/Web/CSS/counter()
 /ja/docs/Web/CSS/counters	/ja/docs/Web/CSS/counters()
 /ja/docs/Web/CSS/counters1	/ja/docs/Web/CSS/counters()
@@ -3735,25 +3729,25 @@
 /ja/docs/Web/CSS/grid-column-gap	/ja/docs/Web/CSS/column-gap
 /ja/docs/Web/CSS/grid-gap	/ja/docs/Web/CSS/gap
 /ja/docs/Web/CSS/grid-row-gap	/ja/docs/Web/CSS/row-gap
-/ja/docs/Web/CSS/image-set	/ja/docs/orphaned/Web/CSS/image-set()
-/ja/docs/Web/CSS/image-set()	/ja/docs/orphaned/Web/CSS/image-set()
-/ja/docs/Web/CSS/linear-gradient	/ja/docs/orphaned/Web/CSS/linear-gradient()
-/ja/docs/Web/CSS/linear-gradient()	/ja/docs/orphaned/Web/CSS/linear-gradient()
+/ja/docs/Web/CSS/image-set	/ja/docs/Web/CSS/image/image-set()
+/ja/docs/Web/CSS/image-set()	/ja/docs/Web/CSS/image/image-set()
+/ja/docs/Web/CSS/linear-gradient	/ja/docs/Web/CSS/gradient/linear-gradient()
+/ja/docs/Web/CSS/linear-gradient()	/ja/docs/Web/CSS/gradient/linear-gradient()
 /ja/docs/Web/CSS/margin-new	/ja/docs/Web/CSS/margin
 /ja/docs/Web/CSS/margin_collapsing	/ja/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing
 /ja/docs/Web/CSS/max	/ja/docs/Web/CSS/max()
 /ja/docs/Web/CSS/min	/ja/docs/Web/CSS/min()
 /ja/docs/Web/CSS/minmax	/ja/docs/Web/CSS/minmax()
 /ja/docs/Web/CSS/normal	/ja/docs/Web/CSS/font-variant
-/ja/docs/Web/CSS/paint	/ja/docs/orphaned/Web/CSS/paint()
-/ja/docs/Web/CSS/paint()	/ja/docs/orphaned/Web/CSS/paint()
-/ja/docs/Web/CSS/radial-gradient	/ja/docs/orphaned/Web/CSS/radial-gradient()
-/ja/docs/Web/CSS/radial-gradient()	/ja/docs/orphaned/Web/CSS/radial-gradient()
+/ja/docs/Web/CSS/paint	/ja/docs/Web/CSS/image/paint()
+/ja/docs/Web/CSS/paint()	/ja/docs/Web/CSS/image/paint()
+/ja/docs/Web/CSS/radial-gradient	/ja/docs/Web/CSS/gradient/radial-gradient()
+/ja/docs/Web/CSS/radial-gradient()	/ja/docs/Web/CSS/gradient/radial-gradient()
 /ja/docs/Web/CSS/repeat	/ja/docs/Web/CSS/repeat()
-/ja/docs/Web/CSS/repeating-linear-gradient	/ja/docs/orphaned/Web/CSS/repeating-linear-gradient()
-/ja/docs/Web/CSS/repeating-linear-gradient()	/ja/docs/orphaned/Web/CSS/repeating-linear-gradient()
-/ja/docs/Web/CSS/repeating-radial-gradient	/ja/docs/orphaned/Web/CSS/repeating-radial-gradient()
-/ja/docs/Web/CSS/repeating-radial-gradient()	/ja/docs/orphaned/Web/CSS/repeating-radial-gradient()
+/ja/docs/Web/CSS/repeating-linear-gradient	/ja/docs/Web/CSS/gradient/repeating-linear-gradient()
+/ja/docs/Web/CSS/repeating-linear-gradient()	/ja/docs/Web/CSS/gradient/repeating-linear-gradient()
+/ja/docs/Web/CSS/repeating-radial-gradient	/ja/docs/Web/CSS/gradient/repeating-radial-gradient()
+/ja/docs/Web/CSS/repeating-radial-gradient()	/ja/docs/Web/CSS/gradient/repeating-radial-gradient()
 /ja/docs/Web/CSS/single-transition-timing-function	/ja/docs/Web/CSS/easing-function
 /ja/docs/Web/CSS/timing-function	/ja/docs/Web/CSS/easing-function
 /ja/docs/Web/CSS/transform-function/matrix	/ja/docs/Web/CSS/transform-function/matrix()
@@ -3801,6 +3795,7 @@
 /ja/docs/Web/Compatibility_FAQ/Tips_Default_Style_Difference.html	/ja/docs/orphaned/Web/Compatibility_FAQ/Tips_Default_Style_Difference.html
 /ja/docs/Web/Compatibility_FAQ/Tips_Vendor_Prefix.html	/ja/docs/orphaned/Web/Compatibility_FAQ/Tips_Vendor_Prefix.html
 /ja/docs/Web/Compatibility_FAQ/Underline_Color_Diffrence.html	/ja/docs/orphaned/Web/Compatibility_FAQ/Underline_Color_Diffrence.html
+/ja/docs/Web/Demos_of_open_web_technologies	/ja/docs/Web/Demos
 /ja/docs/Web/Events/Activate	/ja/docs/Web/API/Element/DOMActivate_event
 /ja/docs/Web/Events/DOMContentLoaded	/ja/docs/Web/API/Window/DOMContentLoaded_event
 /ja/docs/Web/Events/abort	/ja/docs/Web/API/HTMLMediaElement/abort_event
@@ -3932,7 +3927,7 @@
 /ja/docs/Web/Guide/HTML/Forms/Styling_HTML_forms	/ja/docs/Learn/Forms/Styling_web_forms
 /ja/docs/Web/Guide/HTML/Forms/The_native_form_widgets	/ja/docs/Learn/Forms/Basic_native_form_controls
 /ja/docs/Web/Guide/HTML/HTML5	/ja/docs/orphaned/Web/Guide/HTML/HTML5
-/ja/docs/Web/Guide/HTML/HTML5/Constraint_validation	/ja/docs/orphaned/Web/Guide/HTML/HTML5/Constraint_validation
+/ja/docs/Web/Guide/HTML/HTML5/Constraint_validation	/ja/docs/Web/Guide/HTML/Constraint_validation
 /ja/docs/Web/Guide/HTML/HTML5/Forms_in_HTML5	/ja/docs/Learn/Forms
 /ja/docs/Web/Guide/HTML/HTML5/HTML5_Thematic_Classification	/ja/docs/orphaned/Web/Guide/HTML/HTML5
 /ja/docs/Web/Guide/HTML/HTML5/HTML5_element_list	/ja/docs/Web/HTML/Element
@@ -3998,7 +3993,7 @@
 /ja/docs/Web/HTML/Forms/The_native_form_widgets	/ja/docs/Learn/Forms/Basic_native_form_controls
 /ja/docs/Web/HTML/Forms_in_HTML	/ja/docs/Learn/Forms/HTML5_input_types
 /ja/docs/Web/HTML/HTML5	/ja/docs/orphaned/Web/Guide/HTML/HTML5
-/ja/docs/Web/HTML/HTML5/Constraint_validation	/ja/docs/orphaned/Web/Guide/HTML/HTML5/Constraint_validation
+/ja/docs/Web/HTML/HTML5/Constraint_validation	/ja/docs/Web/Guide/HTML/Constraint_validation
 /ja/docs/Web/HTML/HTML5/Forms_in_HTML5	/ja/docs/Learn/Forms/HTML5_input_types
 /ja/docs/Web/HTML/HTML5/HTML5_Thematic_Classification	/ja/docs/orphaned/Web/Guide/HTML/HTML5
 /ja/docs/Web/HTML/HTML5/HTML5_element_list	/ja/docs/Web/HTML/Element
@@ -4078,11 +4073,12 @@
 /ja/docs/Web/HTTP/Response_codes/204	/ja/docs/Web/HTTP/Status/204
 /ja/docs/Web/HTTP/Server-Side_Access_Control	/ja/docs/Web/HTTP/CORS
 /ja/docs/Web/HTTP/X-Frame-Options	/ja/docs/Web/HTTP/Headers/X-Frame-Options
+/ja/docs/Web/Houdini	/ja/docs/Web/Guide/Houdini
 /ja/docs/Web/JavaScript/Equality_comparisons_and_when_to_use_them	/ja/docs/Web/JavaScript/Equality_comparisons_and_sameness
 /ja/docs/Web/JavaScript/Getting_Started	/ja/docs/Learn/Getting_started_with_the_web/JavaScript_basics
 /ja/docs/Web/JavaScript/Guide/About	/ja/docs/Web/JavaScript/Guide/Introduction
 /ja/docs/Web/JavaScript/Guide/Block_Statement	/ja/docs/Web/JavaScript/Guide/Control_flow_and_error_handling
-/ja/docs/Web/JavaScript/Guide/Class-Based_vs._Prototype-Based_Languages	/ja/docs/orphaned/Web/JavaScript/Guide/Class-Based_vs._Prototype-Based_Languages
+/ja/docs/Web/JavaScript/Guide/Class-Based_vs._Prototype-Based_Languages	/ja/docs/Web/JavaScript/Guide/Details_of_the_Object_Model
 /ja/docs/Web/JavaScript/Guide/Closures	/ja/docs/Web/JavaScript/Closures
 /ja/docs/Web/JavaScript/Guide/Core_Language_Features	/ja/docs/orphaned/Web/JavaScript/Guide/Core_Language_Features
 /ja/docs/Web/JavaScript/Guide/Creating_New_Objects	/ja/docs/Web/JavaScript/Guide/Working_with_Objects#creating_new_objects
@@ -4275,7 +4271,6 @@
 /ja/docs/Web/JavaScript/Reference/Global_Objects/Uint32Array_temp	/ja/docs/Web/JavaScript/Reference/Global_objects/Uint32Array
 /ja/docs/Web/JavaScript/Reference/Global_Objects/Uint8Array_temp	/ja/docs/Web/JavaScript/Reference/Global_objects/Uint8Array
 /ja/docs/Web/JavaScript/Reference/Global_Objects/WeakMap/prototype	/ja/docs/Web/JavaScript/Reference/Global_Objects/WeakMap
-/ja/docs/Web/JavaScript/Reference/Global_Objects/WeakSet/clear	/ja/docs/orphaned/Web/JavaScript/Reference/Global_Objects/WeakSet/clear
 /ja/docs/Web/JavaScript/Reference/Global_Objects/WeakSet/prototype	/ja/docs/Web/JavaScript/Reference/Global_Objects/WeakSet
 /ja/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Instance/prototype	/ja/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Instance
 /ja/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Memory/prototype	/ja/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Memory
@@ -4366,7 +4361,6 @@
 /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/Element/solidColor	/ja/docs/orphaned/Web/SVG/Element/solidColor
 /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
@@ -4493,8 +4487,6 @@
 /ja/docs/XMLHttpRequest/timeout	/ja/docs/Web/API/XMLHttpRequest/timeout
 /ja/docs/XMLSerializer	/ja/docs/Web/API/XMLSerializer
 /ja/docs/XML_Introduction	/ja/docs/Web/XML/XML_Introduction
-/ja/docs/XPCOM_components_list	/ja/docs/orphaned/XPCOM_components_list
-/ja/docs/XPCOM_plans	/ja/docs/orphaned/XPCOM_plans
 /ja/docs/XPInstall_API_Reference/InstallTrigger_Object	/ja/docs/Web/API/InstallTrigger
 /ja/docs/XPInstall_API_Reference:InstallTrigger_Object	/ja/docs/Web/API/InstallTrigger
 /ja/docs/XPath	/ja/docs/Web/XPath
@@ -4939,17 +4931,15 @@
 /ja/docs/javascript_typed_arrays/Uint8Array	/ja/docs/Web/JavaScript/Reference/Global_objects/Uint8Array
 /ja/docs/lastIndexOf	/ja/docs/Web/JavaScript/Reference/Global_Objects/String/lastIndexOf
 /ja/docs/method	/ja/docs/Web/API/HTMLFormElement/method
-/ja/docs/mozIStorageService	/ja/docs/orphaned/mozIStorageService
 /ja/docs/mozillaのメール	/ja/docs/Web
-/ja/docs/nsIDynamicContainer	/ja/docs/orphaned/nsIDynamicContainer
 /ja/docs/reftest_opportunities_files	/ja/docs/orphaned/reftest_opportunities_files
 /ja/docs/slice	/ja/docs/Web/JavaScript/Reference/Global_Objects/String/slice
 /ja/docs/title	/ja/docs/Web/HTML/Element/title
 /ja/docs/toSource	/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/toSource
 /ja/docs/toString	/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/toString
 /ja/docs/width	/ja/docs/Web/CSS/width
-/ja/docs/window.clearInterval	/ja/docs/Web/API/WindowOrWorkerGlobalScope/clearInterval
+/ja/docs/window.clearInterval	/ja/docs/Web/API/clearInterval
 /ja/docs/window.screenY	/ja/docs/Web/API/Window/screenY
 /ja/docs/window.scrollMaxY	/ja/docs/Web/API/Window/scrollMaxY
-/ja/docs/window.setInterval	/ja/docs/Web/API/WindowOrWorkerGlobalScope/setInterval
+/ja/docs/window.setInterval	/ja/docs/Web/API/setInterval
 /ja/docs/メインページ	/ja/docs/Web
diff --git a/files/ja/_wikihistory.json b/files/ja/_wikihistory.json
index 99e3fe5e08..db3e031f5d 100644
--- a/files/ja/_wikihistory.json
+++ b/files/ja/_wikihistory.json
@@ -13592,6 +13592,14 @@
       "hashedhyphen"
     ]
   },
+  "Web/API/Element/append": {
+    "modified": "2020-10-15T22:19:11.886Z",
+    "contributors": [
+      "mfuji09",
+      "dskymd",
+      "isdh"
+    ]
+  },
   "Web/API/Element/attachShadow": {
     "modified": "2020-10-15T22:09:56.110Z",
     "contributors": [
@@ -13635,6 +13643,13 @@
       "Marsf"
     ]
   },
+  "Web/API/Element/children": {
+    "modified": "2020-11-23T04:45:58.549Z",
+    "contributors": [
+      "segayuu",
+      "sii"
+    ]
+  },
   "Web/API/Element/classList": {
     "modified": "2020-10-15T21:14:13.067Z",
     "contributors": [
@@ -14095,6 +14110,13 @@
       "sii"
     ]
   },
+  "Web/API/Element/prepend": {
+    "modified": "2020-10-15T22:22:02.876Z",
+    "contributors": [
+      "mfuji09",
+      "silverskyvicto"
+    ]
+  },
   "Web/API/Element/querySelector": {
     "modified": "2019-03-23T23:02:48.166Z",
     "contributors": [
@@ -17794,13 +17816,6 @@
       "ethertank"
     ]
   },
-  "Web/API/Index": {
-    "modified": "2019-01-16T21:57:23.880Z",
-    "contributors": [
-      "mfuji09",
-      "Marsf"
-    ]
-  },
   "Web/API/IndexedDB_API": {
     "modified": "2019-11-01T12:27:47.658Z",
     "contributors": [
@@ -18831,6 +18846,33 @@
       "rootx"
     ]
   },
+  "Web/API/Navigator/appCodeName": {
+    "modified": "2019-03-23T23:49:17.312Z",
+    "contributors": [
+      "fscholz",
+      "jsx",
+      "ethertank",
+      "Potappo"
+    ]
+  },
+  "Web/API/Navigator/appName": {
+    "modified": "2019-03-23T23:49:11.201Z",
+    "contributors": [
+      "fscholz",
+      "khalid32",
+      "ethertank",
+      "Potappo"
+    ]
+  },
+  "Web/API/Navigator/appVersion": {
+    "modified": "2019-03-23T23:49:20.671Z",
+    "contributors": [
+      "fscholz",
+      "khalid32",
+      "ethertank",
+      "Potappo"
+    ]
+  },
   "Web/API/Navigator/battery": {
     "modified": "2020-10-15T21:22:04.664Z",
     "contributors": [
@@ -18936,12 +18978,36 @@
       "rootx"
     ]
   },
+  "Web/API/Navigator/hardwareConcurrency": {
+    "modified": "2020-10-15T22:16:03.921Z",
+    "contributors": [
+      "shisama"
+    ]
+  },
   "Web/API/Navigator/keyboard": {
     "modified": "2020-10-15T22:09:25.704Z",
     "contributors": [
       "mfuji09"
     ]
   },
+  "Web/API/Navigator/language": {
+    "modified": "2020-10-15T21:16:44.985Z",
+    "contributors": [
+      "dskmori",
+      "benishouga",
+      "fscholz",
+      "khalid32",
+      "ethertank",
+      "Potappo"
+    ]
+  },
+  "Web/API/Navigator/languages": {
+    "modified": "2019-03-23T23:12:38.148Z",
+    "contributors": [
+      "fscholz",
+      "nshimizu"
+    ]
+  },
   "Web/API/Navigator/locks": {
     "modified": "2020-11-25T13:37:38.955Z",
     "contributors": [
@@ -19010,12 +19076,31 @@
       "Wind1808"
     ]
   },
+  "Web/API/Navigator/platform": {
+    "modified": "2020-10-15T21:16:44.396Z",
+    "contributors": [
+      "yyss",
+      "fscholz",
+      "arunpandianp",
+      "ethertank",
+      "Potappo"
+    ]
+  },
   "Web/API/Navigator/presentation": {
     "modified": "2020-11-03T12:01:37.262Z",
     "contributors": [
       "mfuji09"
     ]
   },
+  "Web/API/Navigator/product": {
+    "modified": "2019-03-23T23:49:28.986Z",
+    "contributors": [
+      "fscholz",
+      "khalid32",
+      "ethertank",
+      "Potappo"
+    ]
+  },
   "Web/API/Navigator/productSub": {
     "modified": "2020-10-15T21:16:44.835Z",
     "contributors": [
@@ -19074,6 +19159,18 @@
       "yuta0801"
     ]
   },
+  "Web/API/Navigator/userAgent": {
+    "modified": "2020-10-15T21:16:43.171Z",
+    "contributors": [
+      "mfuji09",
+      "pcw",
+      "kenmori",
+      "fscholz",
+      "khalid32",
+      "ethertank",
+      "Potappo"
+    ]
+  },
   "Web/API/Navigator/vendor": {
     "modified": "2020-10-15T21:16:44.842Z",
     "contributors": [
@@ -25323,136 +25420,6 @@
       "kenrick95"
     ]
   },
-  "Web/API/WindowOrWorkerGlobalScope/atob": {
-    "modified": "2020-10-15T21:16:19.721Z",
-    "contributors": [
-      "mfuji09",
-      "fscholz",
-      "khalid32",
-      "ethertank",
-      "Potappo"
-    ]
-  },
-  "Web/API/WindowOrWorkerGlobalScope/btoa": {
-    "modified": "2020-10-15T21:16:19.842Z",
-    "contributors": [
-      "mfuji09",
-      "SphinxKnight",
-      "fscholz",
-      "khalid32",
-      "ethertank",
-      "Potappo"
-    ]
-  },
-  "Web/API/WindowOrWorkerGlobalScope/caches": {
-    "modified": "2020-10-15T21:49:48.643Z",
-    "contributors": [
-      "Wind1808",
-      "unarist",
-      "YuichiNukiyama"
-    ]
-  },
-  "Web/API/WindowOrWorkerGlobalScope/clearInterval": {
-    "modified": "2019-03-23T23:49:51.484Z",
-    "contributors": [
-      ".Hiroya",
-      "fscholz",
-      "khalid32",
-      "teoli",
-      "ethertank",
-      "Marsf",
-      "Mgjbot",
-      "Hfjapancom"
-    ]
-  },
-  "Web/API/WindowOrWorkerGlobalScope/clearTimeout": {
-    "modified": "2020-10-15T21:16:17.778Z",
-    "contributors": [
-      "mfuji09",
-      ".Hiroya",
-      "mushahiroyuki",
-      "fscholz",
-      "jsx",
-      "ethertank",
-      "Potappo"
-    ]
-  },
-  "Web/API/WindowOrWorkerGlobalScope/createImageBitmap": {
-    "modified": "2020-10-15T22:34:31.000Z",
-    "contributors": [
-      "silverskyvicto"
-    ]
-  },
-  "Web/API/WindowOrWorkerGlobalScope/fetch": {
-    "modified": "2020-10-15T21:41:32.875Z",
-    "contributors": [
-      "mfuji09",
-      "gladenjoy",
-      "Uemmra3",
-      "hamasaki",
-      "woodmix",
-      "fscholz",
-      "mdmss37",
-      "dskmori",
-      "aliceinwire",
-      "lv7777",
-      "Piroro-hs",
-      "chikoski"
-    ]
-  },
-  "Web/API/WindowOrWorkerGlobalScope/indexedDB": {
-    "modified": "2019-03-23T22:01:21.947Z",
-    "contributors": [
-      "Marsf"
-    ]
-  },
-  "Web/API/WindowOrWorkerGlobalScope/isSecureContext": {
-    "modified": "2020-10-15T22:08:54.038Z",
-    "contributors": [
-      "k-kuwahara"
-    ]
-  },
-  "Web/API/WindowOrWorkerGlobalScope/origin": {
-    "modified": "2020-10-15T22:08:52.985Z",
-    "contributors": [
-      "k-kuwahara"
-    ]
-  },
-  "Web/API/WindowOrWorkerGlobalScope/setInterval": {
-    "modified": "2020-10-15T21:15:06.280Z",
-    "contributors": [
-      "Potappo",
-      "yyss",
-      "mushahiroyuki",
-      "teoli",
-      "jsx",
-      "ethertank",
-      "Ceth",
-      "Shoot",
-      "Marsf",
-      "Okome",
-      "Taken",
-      "Mgjbot",
-      "Hfjapancom"
-    ]
-  },
-  "Web/API/WindowOrWorkerGlobalScope/setTimeout": {
-    "modified": "2020-10-15T21:15:57.322Z",
-    "contributors": [
-      "mfuji09",
-      "yyss",
-      "hamasaki",
-      "teoli",
-      "AshfaqHossain",
-      "ethertank",
-      "dextra",
-      "Ceth",
-      "Shoot",
-      "Marsf",
-      "Mgjbot",
-      "Hfjapancom"
-    ]
-  },
   "Web/API/Worker": {
     "modified": "2020-10-15T21:37:11.821Z",
     "contributors": [
@@ -25998,7 +25965,7 @@
     ]
   },
   "Web/API/XRInputSource/handedness": {
-    "modified": "2020-12-07T01:54:31.459Z",
+    "modified": "2020-12-06T13:23:10.937Z",
     "contributors": [
       "Wind1808"
     ]
@@ -26010,7 +25977,7 @@
     ]
   },
   "Web/API/XRInputSource/targetRayMode": {
-    "modified": "2020-12-08T09:39:34.531Z",
+    "modified": "2020-12-08T09:23:22.538Z",
     "contributors": [
       "Wind1808"
     ]
@@ -26149,6 +26116,60 @@
       "Marsf"
     ]
   },
+  "Web/API/atob": {
+    "modified": "2020-10-15T21:16:19.721Z",
+    "contributors": [
+      "mfuji09",
+      "fscholz",
+      "khalid32",
+      "ethertank",
+      "Potappo"
+    ]
+  },
+  "Web/API/btoa": {
+    "modified": "2020-10-15T21:16:19.842Z",
+    "contributors": [
+      "mfuji09",
+      "SphinxKnight",
+      "fscholz",
+      "khalid32",
+      "ethertank",
+      "Potappo"
+    ]
+  },
+  "Web/API/caches": {
+    "modified": "2020-10-15T21:49:48.643Z",
+    "contributors": [
+      "Wind1808",
+      "unarist",
+      "YuichiNukiyama"
+    ]
+  },
+  "Web/API/clearInterval": {
+    "modified": "2019-03-23T23:49:51.484Z",
+    "contributors": [
+      ".Hiroya",
+      "fscholz",
+      "khalid32",
+      "teoli",
+      "ethertank",
+      "Marsf",
+      "Mgjbot",
+      "Hfjapancom"
+    ]
+  },
+  "Web/API/clearTimeout": {
+    "modified": "2020-10-15T21:16:17.778Z",
+    "contributors": [
+      "mfuji09",
+      ".Hiroya",
+      "mushahiroyuki",
+      "fscholz",
+      "jsx",
+      "ethertank",
+      "Potappo"
+    ]
+  },
   "Web/API/console": {
     "modified": "2020-10-15T21:08:48.807Z",
     "contributors": [
@@ -26269,6 +26290,29 @@
       "yyss"
     ]
   },
+  "Web/API/createImageBitmap": {
+    "modified": "2020-10-15T22:34:31.000Z",
+    "contributors": [
+      "silverskyvicto"
+    ]
+  },
+  "Web/API/fetch": {
+    "modified": "2020-10-15T21:41:32.875Z",
+    "contributors": [
+      "mfuji09",
+      "gladenjoy",
+      "Uemmra3",
+      "hamasaki",
+      "woodmix",
+      "fscholz",
+      "mdmss37",
+      "dskmori",
+      "aliceinwire",
+      "lv7777",
+      "Piroro-hs",
+      "chikoski"
+    ]
+  },
   "Web/API/globalEventhandlers/onmousedown": {
     "modified": "2020-10-15T21:23:57.929Z",
     "contributors": [
@@ -26278,6 +26322,59 @@
       "ethertank"
     ]
   },
+  "Web/API/indexedDB": {
+    "modified": "2019-03-23T22:01:21.947Z",
+    "contributors": [
+      "Marsf"
+    ]
+  },
+  "Web/API/isSecureContext": {
+    "modified": "2020-10-15T22:08:54.038Z",
+    "contributors": [
+      "k-kuwahara"
+    ]
+  },
+  "Web/API/origin": {
+    "modified": "2020-10-15T22:08:52.985Z",
+    "contributors": [
+      "k-kuwahara"
+    ]
+  },
+  "Web/API/setInterval": {
+    "modified": "2020-10-15T21:15:06.280Z",
+    "contributors": [
+      "Potappo",
+      "yyss",
+      "mushahiroyuki",
+      "teoli",
+      "jsx",
+      "ethertank",
+      "Ceth",
+      "Shoot",
+      "Marsf",
+      "Okome",
+      "Taken",
+      "Mgjbot",
+      "Hfjapancom"
+    ]
+  },
+  "Web/API/setTimeout": {
+    "modified": "2020-10-15T21:15:57.322Z",
+    "contributors": [
+      "mfuji09",
+      "yyss",
+      "hamasaki",
+      "teoli",
+      "AshfaqHossain",
+      "ethertank",
+      "dextra",
+      "Ceth",
+      "Shoot",
+      "Marsf",
+      "Mgjbot",
+      "Hfjapancom"
+    ]
+  },
   "Web/API/treeWalker": {
     "modified": "2020-10-15T21:21:02.292Z",
     "contributors": [
@@ -28065,20 +28162,20 @@
       "yyss"
     ]
   },
-  "Web/CSS/CSS_Background_and_Borders/Border-image_generator": {
-    "modified": "2019-03-18T21:41:18.820Z",
+  "Web/CSS/CSS_Backgrounds_and_Borders": {
+    "modified": "2020-04-17T14:34:56.933Z",
     "contributors": [
       "mfuji09"
     ]
   },
-  "Web/CSS/CSS_Background_and_Borders/Border-radius_generator": {
-    "modified": "2020-02-13T14:54:34.325Z",
+  "Web/CSS/CSS_Backgrounds_and_Borders/Border-image_generator": {
+    "modified": "2019-03-18T21:41:18.820Z",
     "contributors": [
       "mfuji09"
     ]
   },
-  "Web/CSS/CSS_Backgrounds_and_Borders": {
-    "modified": "2020-04-17T14:34:56.933Z",
+  "Web/CSS/CSS_Backgrounds_and_Borders/Border-radius_generator": {
+    "modified": "2020-02-13T14:54:34.325Z",
     "contributors": [
       "mfuji09"
     ]
@@ -29212,13 +29309,6 @@
       "sii"
     ]
   },
-  "Web/CSS/Tools": {
-    "modified": "2020-07-21T12:48:32.485Z",
-    "contributors": [
-      "mfuji09",
-      "sii"
-    ]
-  },
   "Web/CSS/Type_selectors": {
     "modified": "2020-10-15T21:20:42.015Z",
     "contributors": [
@@ -31232,6 +31322,20 @@
       "Taken"
     ]
   },
+  "Web/CSS/image/image-set()": {
+    "modified": "2020-11-16T08:53:38.885Z",
+    "contributors": [
+      "chrisdavidmills",
+      "mfuji09"
+    ]
+  },
+  "Web/CSS/image/paint()": {
+    "modified": "2020-11-16T09:09:19.836Z",
+    "contributors": [
+      "chrisdavidmills",
+      "mfuji09"
+    ]
+  },
   "Web/CSS/ime-mode": {
     "modified": "2020-10-15T21:14:16.842Z",
     "contributors": [
@@ -33256,7 +33360,7 @@
       "mpcjazz"
     ]
   },
-  "Web/Demos_of_open_web_technologies": {
+  "Web/Demos": {
     "modified": "2019-03-23T22:34:52.877Z",
     "contributors": [
       "dskmori"
@@ -33492,6 +33596,13 @@
       "Marsf"
     ]
   },
+  "Web/Guide/HTML/Constraint_validation": {
+    "modified": "2020-10-16T13:41:03.752Z",
+    "contributors": [
+      "mfuji09",
+      "Uemmra3"
+    ]
+  },
   "Web/Guide/HTML/Content_categories": {
     "modified": "2020-10-18T10:43:23.129Z",
     "contributors": [
@@ -33529,6 +33640,12 @@
       "mfuji09"
     ]
   },
+  "Web/Guide/Houdini": {
+    "modified": "2020-07-24T06:19:03.585Z",
+    "contributors": [
+      "Wind1808"
+    ]
+  },
   "Web/Guide/Index": {
     "modified": "2020-12-07T13:42:04.312Z",
     "contributors": [
@@ -37278,12 +37395,6 @@
       "silverskyvicto"
     ]
   },
-  "Web/Houdini": {
-    "modified": "2020-07-24T06:19:03.585Z",
-    "contributors": [
-      "Wind1808"
-    ]
-  },
   "Web/JavaScript": {
     "modified": "2020-11-14T07:07:05.393Z",
     "contributors": [
@@ -48463,20 +48574,6 @@
       "mantaroh"
     ]
   },
-  "conflicting/Tools/Memory/Basic_operations": {
-    "modified": "2020-07-16T22:36:28.978Z",
-    "contributors": [
-      "wbamberg",
-      "yyss"
-    ]
-  },
-  "conflicting/Tools/Performance": {
-    "modified": "2020-07-16T22:35:28.845Z",
-    "contributors": [
-      "wbamberg",
-      "yyss"
-    ]
-  },
   "conflicting/Web/API": {
     "modified": "2019-09-25T00:26:30.367Z",
     "contributors": [
@@ -48494,36 +48591,6 @@
       "ethertank"
     ]
   },
-  "conflicting/Web/API/XRInputSource/handedness": {
-    "modified": "2020-12-06T13:23:10.937Z",
-    "contributors": [
-      "Wind1808"
-    ]
-  },
-  "conflicting/Web/API/XRInputSource/targetRayMode": {
-    "modified": "2020-12-08T09:23:22.538Z",
-    "contributors": [
-      "Wind1808"
-    ]
-  },
-  "conflicting/Web/API/XRReferenceSpaceEvent/XRReferenceSpaceEvent": {
-    "modified": "2020-11-08T02:10:47.628Z",
-    "contributors": [
-      "Wind1808"
-    ]
-  },
-  "conflicting/Web/API/XRReferenceSpaceEvent/XRReferenceSpaceEvent_0f733d39fd3094010931f093b9045686": {
-    "modified": "2020-11-08T19:13:54.683Z",
-    "contributors": [
-      "Wind1808"
-    ]
-  },
-  "conflicting/Web/API/XRReferenceSpaceEvent/XRReferenceSpaceEvent_7dfb381c892055a0c91980d537a86c6b": {
-    "modified": "2020-11-08T19:23:29.842Z",
-    "contributors": [
-      "Wind1808"
-    ]
-  },
   "conflicting/Web/API_dd04ca1265cb79b990b8120e5f5070d3": {
     "modified": "2019-03-23T23:32:13.721Z",
     "contributors": [
@@ -48536,30 +48603,10 @@
     ]
   },
   "conflicting/Web/CSS": {
-    "modified": "2019-03-23T23:49:43.648Z",
-    "contributors": [
-      "Marsf"
-    ]
-  },
-  "conflicting/Web/CSS/Reference": {
-    "modified": "2019-01-16T15:49:24.673Z",
-    "contributors": [
-      "Marsf"
-    ]
-  },
-  "conflicting/Web/CSS_eb0c7d23f84df658710ebb6b4bdec8ea": {
-    "modified": "2019-03-23T23:44:01.923Z",
-    "contributors": [
-      "ethertank",
-      "Mgjbot",
-      "Okome",
-      "Shimono"
-    ]
-  },
-  "conflicting/Web/HTTP/Headers/X-DNS-Prefetch-Control": {
-    "modified": "2019-03-24T00:00:27.042Z",
+    "modified": "2020-07-21T12:48:32.485Z",
     "contributors": [
-      "RobinEgg"
+      "mfuji09",
+      "sii"
     ]
   },
   "orphaned/Building_a_Mozilla_Distribution": {
@@ -48586,246 +48633,6 @@
       "Taken Bot"
     ]
   },
-  "orphaned/DebNews": {
-    "modified": "2019-03-23T23:58:51.669Z",
-    "contributors": [
-      "wbamberg",
-      "Potappo"
-    ]
-  },
-  "orphaned/DevNews": {
-    "modified": "2019-03-24T00:01:17.379Z",
-    "contributors": [
-      "ethertank",
-      "Potappo",
-      "Aminevsky"
-    ]
-  },
-  "orphaned/DevNews/20060705": {
-    "modified": "2019-03-23T23:44:41.824Z",
-    "contributors": [
-      "SphinxKnight",
-      "Taken"
-    ]
-  },
-  "orphaned/DevNews/20060706": {
-    "modified": "2019-03-23T23:44:38.389Z",
-    "contributors": [
-      "SphinxKnight",
-      "Taken"
-    ]
-  },
-  "orphaned/DevNews/20060712": {
-    "modified": "2019-11-06T08:30:44.050Z",
-    "contributors": [
-      "dlwe",
-      "SphinxKnight",
-      "fscholz",
-      "Taken"
-    ]
-  },
-  "orphaned/DevNews/20060713": {
-    "modified": "2019-03-23T23:44:40.984Z",
-    "contributors": [
-      "SphinxKnight",
-      "Taken"
-    ]
-  },
-  "orphaned/DevNews/20060719": {
-    "modified": "2019-03-23T23:44:37.065Z",
-    "contributors": [
-      "SphinxKnight",
-      "Taken"
-    ]
-  },
-  "orphaned/DevNews/20060726": {
-    "modified": "2019-03-23T23:44:43.083Z",
-    "contributors": [
-      "SphinxKnight",
-      "Taken"
-    ]
-  },
-  "orphaned/DevNews/20060802": {
-    "modified": "2019-03-23T23:44:41.738Z",
-    "contributors": [
-      "SphinxKnight",
-      "Taken",
-      "Kozawa"
-    ]
-  },
-  "orphaned/DevNews/20060809": {
-    "modified": "2019-03-24T00:02:38.645Z",
-    "contributors": [
-      "SphinxKnight",
-      "fscholz",
-      "Taken"
-    ]
-  },
-  "orphaned/DevNews/20060817": {
-    "modified": "2019-03-23T23:44:37.587Z",
-    "contributors": [
-      "SphinxKnight",
-      "Taken"
-    ]
-  },
-  "orphaned/DevNews/20060818": {
-    "modified": "2019-03-23T23:44:38.793Z",
-    "contributors": [
-      "SphinxKnight",
-      "ethertank",
-      "Taken"
-    ]
-  },
-  "orphaned/DevNews/20060821": {
-    "modified": "2019-01-16T16:08:59.317Z",
-    "contributors": [
-      "SphinxKnight",
-      "Taken"
-    ]
-  },
-  "orphaned/DevNews/20060822": {
-    "modified": "2019-03-23T23:44:41.650Z",
-    "contributors": [
-      "SphinxKnight",
-      "Taken"
-    ]
-  },
-  "orphaned/DevNews/20060822-02": {
-    "modified": "2019-01-16T16:08:59.330Z",
-    "contributors": [
-      "SphinxKnight",
-      "Taken"
-    ]
-  },
-  "orphaned/DevNews/20060823": {
-    "modified": "2019-03-23T23:44:39.356Z",
-    "contributors": [
-      "SphinxKnight",
-      "Taken"
-    ]
-  },
-  "orphaned/DevNews/20060825": {
-    "modified": "2019-03-23T23:44:39.633Z",
-    "contributors": [
-      "SphinxKnight",
-      "Taken",
-      "Okome"
-    ]
-  },
-  "orphaned/DevNews/20060828": {
-    "modified": "2019-03-23T23:44:40.070Z",
-    "contributors": [
-      "SphinxKnight",
-      "Taken"
-    ]
-  },
-  "orphaned/DevNews/20061002": {
-    "modified": "2019-03-23T23:44:42.578Z",
-    "contributors": [
-      "SphinxKnight",
-      "Taken"
-    ]
-  },
-  "orphaned/DevNews/20061002-02": {
-    "modified": "2019-03-23T23:44:37.149Z",
-    "contributors": [
-      "SphinxKnight",
-      "Taken"
-    ]
-  },
-  "orphaned/DevNews/20061025": {
-    "modified": "2019-11-06T08:30:13.775Z",
-    "contributors": [
-      "dlwe",
-      "SphinxKnight",
-      "Taken",
-      "Shimono"
-    ]
-  },
-  "orphaned/DevNews/20061106": {
-    "modified": "2019-03-23T23:44:34.559Z",
-    "contributors": [
-      "SphinxKnight",
-      "Taken",
-      "Shimono"
-    ]
-  },
-  "orphaned/DevNews/20061107": {
-    "modified": "2019-03-23T23:44:28.948Z",
-    "contributors": [
-      "SphinxKnight",
-      "Taken",
-      "Shimono"
-    ]
-  },
-  "orphaned/DevNews/20061108": {
-    "modified": "2019-03-23T23:44:33.766Z",
-    "contributors": [
-      "SphinxKnight",
-      "Taken",
-      "Shimono"
-    ]
-  },
-  "orphaned/DevNews/20061114": {
-    "modified": "2019-01-16T16:09:15.429Z",
-    "contributors": [
-      "SphinxKnight",
-      "Taken",
-      "Shimono"
-    ]
-  },
-  "orphaned/DevNews/20061129": {
-    "modified": "2019-03-23T23:44:30.387Z",
-    "contributors": [
-      "SphinxKnight",
-      "Taken",
-      "Shimono"
-    ]
-  },
-  "orphaned/DevNews/20061208": {
-    "modified": "2019-03-23T23:44:34.792Z",
-    "contributors": [
-      "SphinxKnight",
-      "Taken",
-      "Shimono"
-    ]
-  },
-  "orphaned/DevNews/20061219": {
-    "modified": "2019-03-23T23:44:29.115Z",
-    "contributors": [
-      "SphinxKnight",
-      "Taken",
-      "Shimono"
-    ]
-  },
-  "orphaned/DevNews/20070207": {
-    "modified": "2019-03-23T23:44:39.720Z",
-    "contributors": [
-      "SphinxKnight",
-      "Shimono",
-      "Taken"
-    ]
-  },
-  "orphaned/MDN/Dashboards": {
-    "modified": "2019-03-18T21:20:57.974Z",
-    "contributors": [
-      "silverskyvicto",
-      "ExE-Boss"
-    ]
-  },
-  "orphaned/MDN/Dashboards/Editors": {
-    "modified": "2019-03-18T21:20:58.636Z",
-    "contributors": [
-      "silverskyvicto"
-    ]
-  },
-  "orphaned/MDN/Kuma/Server_charts": {
-    "modified": "2020-09-28T14:48:43.333Z",
-    "contributors": [
-      "mfuji09",
-      "silverskyvicto"
-    ]
-  },
   "orphaned/MDN/Structures/API_references": {
     "modified": "2020-11-28T12:21:15.783Z",
     "contributors": [
@@ -48858,15 +48665,6 @@
       "Potappo"
     ]
   },
-  "orphaned/MDN/Troubleshooting": {
-    "modified": "2020-09-30T16:58:23.514Z",
-    "contributors": [
-      "chrisdavidmills",
-      "eltociear",
-      "wbamberg",
-      "Uemmra3"
-    ]
-  },
   "orphaned/Map": {
     "modified": "2019-03-23T23:22:54.998Z",
     "contributors": [
@@ -48908,12 +48706,6 @@
       "Mgjbot"
     ]
   },
-  "orphaned/Mozmill": {
-    "modified": "2019-03-24T00:11:57.214Z",
-    "contributors": [
-      "Marsf"
-    ]
-  },
   "orphaned/New_in_JavaScript_1.8": {
     "modified": "2019-03-24T00:06:00.366Z",
     "contributors": [
@@ -48921,23 +48713,6 @@
       "Potappo"
     ]
   },
-  "orphaned/NsIDOMHTMLMediaElement": {
-    "modified": "2019-04-20T00:22:02.073Z",
-    "contributors": [
-      "wbamberg",
-      "SphinxKnight",
-      "teoli",
-      "Jürgen Jeka",
-      "RobinEgg"
-    ]
-  },
-  "orphaned/Participating_in_the_Mozilla_project": {
-    "modified": "2019-03-24T00:00:18.082Z",
-    "contributors": [
-      "Marsf",
-      "Potappo"
-    ]
-  },
   "orphaned/Setting_up_extension_development_environment": {
     "modified": "2019-03-23T23:54:13.028Z",
     "contributors": [
@@ -49169,13 +48944,6 @@
       "yyss"
     ]
   },
-  "orphaned/Tools/Web_Console/Keyboard_shortcuts": {
-    "modified": "2020-07-16T22:34:23.040Z",
-    "contributors": [
-      "wbamberg",
-      "yyss"
-    ]
-  },
   "orphaned/Tutorials": {
     "modified": "2019-03-23T23:15:45.631Z",
     "contributors": [
@@ -49200,12 +48968,6 @@
       "mikamikuh"
     ]
   },
-  "orphaned/Web/API/HTMLOrForeignElement": {
-    "modified": "2020-10-15T22:28:17.699Z",
-    "contributors": [
-      "mfuji09"
-    ]
-  },
   "orphaned/Web/API/Navigator/registerContentHandler": {
     "modified": "2020-10-15T21:15:53.115Z",
     "contributors": [
@@ -49222,101 +48984,6 @@
       "fscholz"
     ]
   },
-  "orphaned/Web/API/NavigatorConcurrentHardware/hardwareConcurrency": {
-    "modified": "2020-10-15T22:16:03.921Z",
-    "contributors": [
-      "shisama"
-    ]
-  },
-  "orphaned/Web/API/NavigatorID": {
-    "modified": "2019-03-23T23:01:19.867Z",
-    "contributors": [
-      "fscholz"
-    ]
-  },
-  "orphaned/Web/API/NavigatorID/appCodeName": {
-    "modified": "2019-03-23T23:49:17.312Z",
-    "contributors": [
-      "fscholz",
-      "jsx",
-      "ethertank",
-      "Potappo"
-    ]
-  },
-  "orphaned/Web/API/NavigatorID/appName": {
-    "modified": "2019-03-23T23:49:11.201Z",
-    "contributors": [
-      "fscholz",
-      "khalid32",
-      "ethertank",
-      "Potappo"
-    ]
-  },
-  "orphaned/Web/API/NavigatorID/appVersion": {
-    "modified": "2019-03-23T23:49:20.671Z",
-    "contributors": [
-      "fscholz",
-      "khalid32",
-      "ethertank",
-      "Potappo"
-    ]
-  },
-  "orphaned/Web/API/NavigatorID/platform": {
-    "modified": "2020-10-15T21:16:44.396Z",
-    "contributors": [
-      "yyss",
-      "fscholz",
-      "arunpandianp",
-      "ethertank",
-      "Potappo"
-    ]
-  },
-  "orphaned/Web/API/NavigatorID/product": {
-    "modified": "2019-03-23T23:49:28.986Z",
-    "contributors": [
-      "fscholz",
-      "khalid32",
-      "ethertank",
-      "Potappo"
-    ]
-  },
-  "orphaned/Web/API/NavigatorID/userAgent": {
-    "modified": "2020-10-15T21:16:43.171Z",
-    "contributors": [
-      "mfuji09",
-      "pcw",
-      "kenmori",
-      "fscholz",
-      "khalid32",
-      "ethertank",
-      "Potappo"
-    ]
-  },
-  "orphaned/Web/API/NavigatorLanguage": {
-    "modified": "2020-10-15T21:33:12.034Z",
-    "contributors": [
-      "mfuji09",
-      "fscholz"
-    ]
-  },
-  "orphaned/Web/API/NavigatorLanguage/language": {
-    "modified": "2020-10-15T21:16:44.985Z",
-    "contributors": [
-      "dskmori",
-      "benishouga",
-      "fscholz",
-      "khalid32",
-      "ethertank",
-      "Potappo"
-    ]
-  },
-  "orphaned/Web/API/NavigatorLanguage/languages": {
-    "modified": "2019-03-23T23:12:38.148Z",
-    "contributors": [
-      "fscholz",
-      "nshimizu"
-    ]
-  },
   "orphaned/Web/API/NavigatorPlugins": {
     "modified": "2019-03-23T23:01:18.262Z",
     "contributors": [
@@ -49362,56 +49029,6 @@
       "Wind1808"
     ]
   },
-  "orphaned/Web/API/Node/getUserData": {
-    "modified": "2020-10-15T21:14:35.305Z",
-    "contributors": [
-      "mfuji09",
-      "AshfaqHossain",
-      "teoli",
-      "ethertank",
-      "dextra",
-      "Potappo",
-      "Mgjbot",
-      "Shoot"
-    ]
-  },
-  "orphaned/Web/API/ParentNode": {
-    "modified": "2020-11-23T03:46:53.867Z",
-    "contributors": [
-      "segayuu",
-      "yyss",
-      "Marsf",
-      "YuichiNukiyama"
-    ]
-  },
-  "orphaned/Web/API/ParentNode/append": {
-    "modified": "2020-10-15T22:19:11.886Z",
-    "contributors": [
-      "mfuji09",
-      "dskymd",
-      "isdh"
-    ]
-  },
-  "orphaned/Web/API/ParentNode/children": {
-    "modified": "2020-11-23T04:45:58.549Z",
-    "contributors": [
-      "segayuu",
-      "sii"
-    ]
-  },
-  "orphaned/Web/API/ParentNode/prepend": {
-    "modified": "2020-10-15T22:22:02.876Z",
-    "contributors": [
-      "mfuji09",
-      "silverskyvicto"
-    ]
-  },
-  "orphaned/Web/API/ParentNode/querySelectorAll": {
-    "modified": "2020-10-15T22:26:50.502Z",
-    "contributors": [
-      "mfuji09"
-    ]
-  },
   "orphaned/Web/API/RTCIdentityErrorEvent": {
     "modified": "2019-03-23T22:51:24.405Z",
     "contributors": [
@@ -49540,13 +49157,6 @@
       "mfuji09"
     ]
   },
-  "orphaned/Web/CSS/image-set()": {
-    "modified": "2020-11-16T08:53:38.885Z",
-    "contributors": [
-      "chrisdavidmills",
-      "mfuji09"
-    ]
-  },
   "orphaned/Web/CSS/linear-gradient()": {
     "modified": "2020-11-16T08:57:22.063Z",
     "contributors": [
@@ -49564,13 +49174,6 @@
       "FredB"
     ]
   },
-  "orphaned/Web/CSS/paint()": {
-    "modified": "2020-11-16T09:09:19.836Z",
-    "contributors": [
-      "chrisdavidmills",
-      "mfuji09"
-    ]
-  },
   "orphaned/Web/CSS/radial-gradient()": {
     "modified": "2020-11-18T14:42:27.892Z",
     "contributors": [
@@ -49805,13 +49408,6 @@
       "Marsf"
     ]
   },
-  "orphaned/Web/Guide/HTML/HTML5/Constraint_validation": {
-    "modified": "2020-10-16T13:41:03.752Z",
-    "contributors": [
-      "mfuji09",
-      "Uemmra3"
-    ]
-  },
   "orphaned/Web/Guide/HTML/HTML5/Introduction_to_HTML5": {
     "modified": "2020-01-19T16:30:15.396Z",
     "contributors": [
@@ -49853,16 +49449,6 @@
       "mfuji09"
     ]
   },
-  "orphaned/Web/JavaScript/Guide/Class-Based_vs._Prototype-Based_Languages": {
-    "modified": "2019-01-16T14:43:33.903Z",
-    "contributors": [
-      "ethertank",
-      "happysadman",
-      "Mgjbot",
-      "electrolysis",
-      "Kozawa"
-    ]
-  },
   "orphaned/Web/JavaScript/Guide/Core_Language_Features": {
     "modified": "2019-03-23T23:42:43.617Z",
     "contributors": [
@@ -50110,12 +49696,6 @@
       "YuichiNukiyama"
     ]
   },
-  "orphaned/Web/JavaScript/Reference/Global_Objects/WeakSet/clear": {
-    "modified": "2019-03-23T22:54:31.675Z",
-    "contributors": [
-      "shide55"
-    ]
-  },
   "orphaned/Web/JavaScript/Reference/Operators/Pipeline_operator": {
     "modified": "2020-10-17T14:59:10.566Z",
     "contributors": [
@@ -50144,12 +49724,6 @@
       "mfuji09"
     ]
   },
-  "orphaned/Web/SVG/Element/solidColor": {
-    "modified": "2020-12-06T03:41:32.485Z",
-    "contributors": [
-      "mfuji09"
-    ]
-  },
   "orphaned/Web/Security/Information_Security_Basics": {
     "modified": "2020-03-15T03:29:26.429Z",
     "contributors": [
@@ -50178,43 +49752,12 @@
       "ethertank"
     ]
   },
-  "orphaned/XPCOM_components_list": {
-    "modified": "2019-01-16T15:43:28.878Z",
-    "contributors": [
-      "Mgjbot",
-      "Shimono",
-      "Okome"
-    ]
-  },
-  "orphaned/XPCOM_plans": {
-    "modified": "2019-01-16T14:37:34.536Z",
-    "contributors": [
-      "fscholz",
-      "kohei.yoshino"
-    ]
-  },
   "orphaned/ant_script_to_assemble_an_extension": {
     "modified": "2019-08-11T02:17:04.841Z",
     "contributors": [
       "Marsf"
     ]
   },
-  "orphaned/mozIStorageService": {
-    "modified": "2019-04-20T00:21:50.232Z",
-    "contributors": [
-      "wbamberg",
-      "teoli",
-      "tomotaka"
-    ]
-  },
-  "orphaned/nsIDynamicContainer": {
-    "modified": "2019-04-20T00:19:05.595Z",
-    "contributors": [
-      "wbamberg",
-      "teoli",
-      "tomotaka"
-    ]
-  },
   "orphaned/reftest_opportunities_files": {
     "modified": "2019-01-16T16:06:58.745Z",
     "contributors": [
diff --git a/files/ja/conflicting/tools/memory/basic_operations/index.html b/files/ja/conflicting/tools/memory/basic_operations/index.html
deleted file mode 100644
index cfaf1f0c45..0000000000
--- a/files/ja/conflicting/tools/memory/basic_operations/index.html
+++ /dev/null
@@ -1,16 +0,0 @@
----
-title: ヒープのスナップショットを比較する
-slug: conflicting/Tools/Memory/Basic_operations
-translation_of: Tools/Memory/Basic_operations
-translation_of_original: Tools/Memory/Comparing_heap_snapshots
-original_slug: Tools/Memory/Comparing_heap_snapshots
----
-<div>{{ToolsSidebar}}</div><div class="geckoVersionNote">
-<p>これは Firefox 45 の新機能です。</p>
-</div>
-
-<p>Firefox 45 より、2 つのヒープのスナップショットの差分を確認できます。これは 2 つのスナップショット間で、メモリのアロケートや空き状態の違いを表示します。</p>
-
-<p>差分を作成するにはカメラのアイコンの隣にある "+/-" ボタンを押下して、基準とするスナップショットを選択します。そして、比較するスナップショットを選択してください。ツールが 2 つのスナップショットの差分を表示します。単体のスナップショットの場合と同じビューを使用して、差分を分析できます。</p>
-
-<p>{{EmbedYouTube("rbDHVxCzqhU")}}</p>
diff --git a/files/ja/conflicting/tools/performance/index.html b/files/ja/conflicting/tools/performance/index.html
deleted file mode 100644
index b4c45173f3..0000000000
--- a/files/ja/conflicting/tools/performance/index.html
+++ /dev/null
@@ -1,146 +0,0 @@
----
-title: JavaScript プロファイラ
-slug: conflicting/Tools/Performance
-tags:
-  - Debugging
-  - Firefox
-  - Guide
-  - Profiler
-  - Profiling
-  - Tools
-translation_of: Tools/Performance
-translation_of_original: Tools/Profiler
-original_slug: Tools/Profiler
----
-<div>{{ToolsSidebar}}</div><p>プロファイラツールを使用して、JavaScript コードのボトルネックを見つけましょう。プロファイラは周期的に、サンプルについて現在の JavaScript コールスタックやコンパイルの統計情報を抽出します。</p>
-
-<p>"Web 開発" メニューから "プロファイラ" を選択することで、プロファイラを起動できます。"Web 開発" メニューは、Linux や OS X では "ツール" メニューの配下に、Windows では "Firefox" メニューの直下にあります。</p>
-
-<p><a href="/ja/docs/Tools/Tools_Toolbox" title="Tools/Tools_Toolbox">ツールボックス</a>が開いて、プロファイラが選択されます。</p>
-
-<h2 id="Sampling_profilers" name="Sampling_profilers"><a name="sampling-profilers">サンプリング型プロファイラ</a></h2>
-
-<p>JavaScript プロファイラは、サンプリング型のプロファイラです。これは JavaScript エンジンの状態を定期的にサンプリングして、その時点のコード実行のスタックを記録します。統計的に、個々の関数を実行しているときに取得したサンプル数はブラウザが実行にかけた時間に対応しますので、コード内のボトルネックを発見できます。<br>
- <br>
- <a name="profiling-example">例えば、以下のようなプログラムについて考えてみましょう:</a></p>
-
-<pre class="brush: js">function doSomething() {
-  var x = getTheValue();
-  x = x + 1;                   // -&gt; サンプル A
-  logTheValue(x);
-}
-
-function getTheValue() {
-  return 5;
-}
-
-function logTheValue(x) {
- console.log(x);               // -&gt; サンプル B、サンプル C
-}
-
-doSomething();</pre>
-
-<p>プロファイラをアクティブにしてこのプログラムを実行したら、実行時にプロファイラは上記のインラインコメントで示したように 3 つのサンプルを取得します。</p>
-
-<p>これらはすべて <code>doSomething()</code> の内部から取得されますが、2 番目の 2 つは <code>doSomething()</code> から呼び出された <code>logTheValue()</code> 関数の内部です。よってプロファイルは、以下のように 3 つのスタックトレースで構成されます:</p>
-
-<pre>サンプル A: doSomething()
-サンプル B: doSomething() &gt; logTheValue()
-サンプル C: doSomething() &gt; logTheValue()</pre>
-
-<p>これは私たちに何も伝えられない不十分なデータであることが明らかですが、より多くのサンプルにより、<code>logTheValue()</code> がコード内のボトルネックであると断定できるかもしれません。</p>
-
-<h2 id="Creating_a_profile" name="Creating_a_profile">プロファイルの作成</h2>
-
-<p>プロファイラで<em>ストップウォッチ</em>のボタンをクリックして、サンプルの記録を始めます。プロファイラが記録を行っている間は、ストップウォッチのボタンがハイライトされます。ボタンを再度押すと記録を停止して、新たなプロファイルを保存します:</p>
-
-<p style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/5977/Screen%20Shot%202013-08-26%20at%2010.35.47%20AM.png"></p>
-
-<p>"終了" をクリックすると、新しいプロファイルが自動的に開きます:</p>
-
-<p><img alt="" src="https://mdn.mozillademos.org/files/5981/Screen%20Shot%202013-08-26%20at%2011.07.18%20AM.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
-
-<p>このペインは 2 つのパーツに分かれています:</p>
-
-<ul>
- <li>左側は取得したすべてのプロファイルを一覧表示しており、それぞれのプロファイルを読み込むことができます。また、リストの上にボタンが 2 つあります。<em>ストップウォッチ</em>のボタンは新たなプロファイルの記録を、<em>インポート...</em> ボタンは以前に保存したデータのインポートを行います。プロファイルを選択しているときは、<em>保存</em>ボタンをクリックするとデータを JSON ファイルとして保存できます。</li>
- <li>右側は現在読み込んでいるプロファイルを表示します。</li>
-</ul>
-
-<h2 id="Analyzing_a_profile" name="Analyzing_a_profile">プロファイルの分析</h2>
-
-<p>プロファイルは 2 つのパーツに分かれています:</p>
-
-<ul>
- <li><a href="#profile-timeline" title="#profile-timeline">プロファイルのタイムライン</a></li>
- <li><a href="#profile-details" title="#profile-details">プロファイルの詳細</a></li>
-</ul>
-
-<h3 id="Profile_timeline" name="Profile_timeline"><a name="profile-timeline">プロファイルのタイムライン</a></h3>
-
-<p>プロファイルのタイムラインは、プロファイル表示の上部を占めています:</p>
-
-<p><img alt="" src="https://mdn.mozillademos.org/files/5987/timeline" style="display: block; margin-left: auto; margin-right: auto;">横軸は時間、縦軸はサンプルにおけるコールスタックのサイズを表します。コールスタックは、サンプルを取得したときにアクティブであった関数の量を表します。</p>
-
-<p>チャートで赤色のサンプルは、そのときにブラウザが応答していなかったことを示しており、ユーザはアニメーションや応答性が止まったことに気づいたかもしれません。プロファイルに赤色のサンプルがある場合は、そのコードをいくつかのイベントに分解することを検討したり、<a href="/ja/docs/Web/API/window.requestAnimationFrame" title="Web/API/window.requestAnimationFrame">requestAnimationFrame</a> や <a href="/ja/docs/Web/Guide/Performance/Using_web_workers" title="Web/Guide/Performance/Using_web_workers">Worker</a> の使用について調べたりしましょう。</p>
-
-<p>タイムラインでクリックアンドドラッグすることで、プロファイル内の特定の範囲を調査できます:</p>
-
-<p><img alt="" src="https://mdn.mozillademos.org/files/5989/Screen%20Shot%202013-08-26%20at%2011.17.59%20AM.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
-
-<p>タイムラインの上に "サンプリング範囲 [AAA, BBB]" というラベルがついた、新たなボタンが現れます。そのボタンを押すとプロファイルがズームされて、そのタイムスライスの詳細なビューが下部に表示されます:</p>
-
-<p><br>
- <img alt="" src="https://mdn.mozillademos.org/files/5991/Screen%20Shot%202013-08-26%20at%2011.18.03%20AM.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
-
-<h3 id="Profile_details" name="Profile_details"><a name="profile-details">プロファイルの詳細</a></h3>
-
-<p>プロファイルの詳細は、プロファイル表示の下部を占めています:</p>
-
-<p><img alt="" src="https://mdn.mozillademos.org/files/5993/profiler-details-highligted.png" style="display: block; margin-left: auto; margin-right: auto;">始めに新しいサンプルを開くと、サンプルペインには上のスクリーンショットのように "(total)" という名前の行があります。"(total)" の隣にある三角印をクリックすると、サンプル内にあるすべてのトップレベル関数がリストアップされます。</p>
-
-<p><img alt="" src="https://mdn.mozillademos.org/files/5995/Screen%20Shot%202013-08-26%20at%2011.22.10%20AM.png"></p>
-
-<p><strong>実行時間</strong>は当該関数が現れたサンプルの総数を示し<a href="#footnote-1"><sup>1</sup></a>、その後ろにプロファイル内で当該関数が現れた全サンプルのパーセント値があります。最上段の行はプロファイル全体で 2021 のサンプルがあることを表し、また 2 行目は 1914 サンプルすなわち全体の 94.7% が、<code>detectImage()</code> 関数内にいたことを表します。</p>
-
-<p><strong>滞在</strong> は当該関数そのものを実行する間に取得したサンプル数を示しており、関数を呼び出しているときではありません。前出の<a href="#profiling-example" title="#profiling-example">シンプルな例</a>では、<code>doSomething()</code> は<strong>実行時間</strong>が 3 (サンプル A、B、C) ですが、<strong>滞在</strong>の値は 1 (サンプル A) になるでしょう。</p>
-
-<p>3 列目は関数名およびファイル名と行数 (ローカルの関数) またはベースネームとドメイン名を表示します。灰色の関数はブラウザ組み込みの関数です。黒色の関数がページで読み込んだ JavaScript を表します。行にマウスポインタを乗せると、関数の識別名の右側に矢印が現れます: 矢印をクリックすると関数のソースを表示します。</p>
-
-<h3 id="Expanding_the_call_tree" name="Expanding_the_call_tree">コールツリーの展開</h3>
-
-<p>ある行で、この関数から呼び出された関数に滞在している間のサンプルが存在する場合 (すなわち、<strong>実行時間</strong>がその行の<strong>滞在</strong>より大きい場合) は、関数名の左側に三角印が表示され、コールツリーを展開できます。</p>
-
-<p>前出の<a href="#profiling-example" title="#profiling-example">シンプルな例</a>では、完全に展開したコールツリーは以下のようになります:</p>
-
-<table class="standard-table" style="height: 100px; width: 378px;">
- <tbody>
-  <tr>
-   <td style="text-align: center;"><strong>実行時間</strong></td>
-   <td style="text-align: center;"><strong>滞在</strong></td>
-   <td style="text-align: center;"> </td>
-  </tr>
-  <tr>
-   <td style="text-align: center;">3            100%</td>
-   <td style="text-align: center;">1</td>
-   <td style="text-align: center;">doSomething()</td>
-  </tr>
-  <tr>
-   <td style="text-align: center;">2              67%</td>
-   <td style="text-align: center;">2</td>
-   <td style="text-align: center;">logTheValue()</td>
-  </tr>
- </tbody>
-</table>
-
-<p>より実際的な例を見ましょう: 前出のスクリーンショットで、上から 2 行目を見ると <code>detectImage()</code> 関数の内部で 1914 サンプルかかっていることがわかります。しかし、そのすべては <code>detectImage()</code> から呼び出された関数でかかっています (<strong>滞在</strong> セルが 0 です)。コールツリーを展開して、ほとんどのサンプルがかかっていたとき実際に実行していた関数は何かを明らかにできます:</p>
-
-<p><img alt="" src="https://mdn.mozillademos.org/files/5999/bla.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
-
-<p>これは、<code>detectAtScale()</code> を実際に実行しているときに 6 サンプル、<code>getRect()</code> の実行に 12 サンプルかかっていたことなどを表します。</p>
-
-<h2 id="Footnotes" name="Footnotes">脚注</h2>
-
-<ol>
- <li><a name="footnote-1">関数がさまざまなソースから複数回呼び出される場合、プロファイラの出力にも複数回現れます。よって、<code>forEach</code> など汎用的な関数はコールツリー内に複数回現れるでしょう。</a></li>
-</ol>
diff --git a/files/ja/conflicting/web/api/xrinputsource/handedness/index.html b/files/ja/conflicting/web/api/xrinputsource/handedness/index.html
deleted file mode 100644
index ea3db01eec..0000000000
--- a/files/ja/conflicting/web/api/xrinputsource/handedness/index.html
+++ /dev/null
@@ -1,86 +0,0 @@
----
-title: XRHandedness
-slug: conflicting/Web/API/XRInputSource/handedness
-tags:
-  - API
-  - AR
-  - Enum
-  - Enumerated Type
-  - Handedness
-  - Reference
-  - Type
-  - VR
-  - WebXR
-  - WebXR Device API
-  - XRHandedness
-  - hand
-  - left
-  - right
-translation_of: Web/API/XRHandedness
-original_slug: Web/API/XRHandedness
----
-<p>{{APIRef("WebXR")}}</p>
-
-<p>WebXR の <strong><code>XRHandedness</code></strong> 列挙型は、使用している XR 入力デバイスに接続された特定の入力コントローラーを操作するために使用しているユーザーの手を識別する値を提供します。 <code>XRHandedness</code> は、{{domxref("XRInputSource")}} の {{domxref("XRInputSource.handedness", "handedness")}} プロパティの値として使用されます。</p>
-
-<h2 id="Values" name="Values">値</h2>
-
-<dl>
- <dt><code>none</code></dt>
- <dd>入力コントローラーは、ユーザーのいずれの手にも関連付けられていません。</dd>
- <dt><code>left</code></dt>
- <dd>入力コントローラーは、ユーザーの左手に握られているか、着用されているか、取り付けられています。</dd>
- <dt><code>right</code></dt>
- <dd>入力コントローラーは、ユーザーの右手に握られているか、着用されているか、取り付けられています。</dd>
-</dl>
-
-<h2 id="Examples" name="Examples">例</h2>
-
-<p><code>handedness</code> の重要な使用方法の1つは、コントローラーがどちらの手にあるかを判別して、仮想空間でその手（またはその手が制御しているデバイス）の表現を描画できるようにすることです。</p>
-
-<pre class="brush: js notranslate">function updateInputSources(session, frame, refSpace) {
-  for (let source of session.inputSources) {
-    if (source.gripSpace) {
-      let gripPose = frame.getPose(source.gripSpace, refSpace);
-
-      if (gripPose) {
-        myRenderHandObject(gripPose, inputSource.handedness);
-      }
-    }
-  }
-}
-</pre>
-
-<p>この関数は、すべてのアニメーションフレーム（または必要な滑らかさの程度とパフォーマンスの制約に応じて定期的に）で呼ばれ、入力ソースのリストをスキャンして、<code>null</code> ではない {{domxref("XRInputSource.gripSpace", "gripSpace")}} を持つものを探します。 <code>gripSpace</code> が存在する場合、それは入力ソースが何らかのハンドヘルドデバイスであることを意味するため、可能であれば視覚的にレンダリングする必要があります。</p>
-
-<p><code>gripSpace</code> が <code>null</code> 以外の場合、この関数は、現在の参照空間に変換された <code>gripSpace</code> のポーズを取得します。 それが有効であると仮定すると、<code>myRenderHandObject()</code> と呼ばれる関数が、グリップのポーズと <code>handedness</code> の値を使用して呼び出されます。 これらの値が手元にあれば（しゃれは意図していません）、<code>myRenderHandObject()</code> は、正しい手のために配置および形成された適切なモデルを描画できます。</p>
-
-<h2 id="Specifications" name="Specifications">仕様</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">仕様</th>
-   <th scope="col">状態</th>
-   <th scope="col">コメント</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('WebXR','#enumdef-xrhandedness','XRHandedness')}}</td>
-   <td>{{Spec2('WebXR')}}</td>
-   <td>初期定義</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
-
-<p>{{Compat("api.XRHandedness")}}</p>
-
-<h2 id="See_also" name="See_also">関連情報</h2>
-
-<ul>
- <li><a href="/ja/docs/Web/API/WebXR_Device_API">WebXR Device API</a></li>
- <li><a href="/ja/docs/Web/API/WebXR_Device_API/Inputs">入力と入力ソース</a></li>
- <li><a href="/ja/docs/Web/WebXR%20Device%20API/Gamepads">WebXR アプリケーションでのゲームパッドの使用</a></li>
- <li>{{domxref("XREye")}}: ビューを表示する対象の目を示します</li>
-</ul>
diff --git a/files/ja/conflicting/web/api/xrinputsource/targetraymode/index.html b/files/ja/conflicting/web/api/xrinputsource/targetraymode/index.html
deleted file mode 100644
index e787a3e7be..0000000000
--- a/files/ja/conflicting/web/api/xrinputsource/targetraymode/index.html
+++ /dev/null
@@ -1,103 +0,0 @@
----
-title: XRTargetRayMode
-slug: conflicting/Web/API/XRInputSource/targetRayMode
-tags:
-  - 3D
-  - API
-  - AR
-  - Enum
-  - Enumerated Type
-  - Input
-  - Reality
-  - Reference
-  - Type
-  - VR
-  - Virtual
-  - WebXR
-  - WebXR API
-  - WebXR Device API
-  - XR
-  - XRTargetRayMode
-  - augmented
-  - source
-  - target
-translation_of: Web/API/XRTargetRayMode
-original_slug: Web/API/XRTargetRayMode
----
-<p>{{APIRef("WebXR")}}</p>
-
-<p><span class="seoSummary"><a href="/ja/docs/Web/API/WebXR_Device_API">WebXR Device API</a> の <strong><code>XRTargetRayMode</code></strong> 列挙型は、入力コントローラーのターゲティング光線を生成する方法を記述します。</span> ターゲティングは、視線追跡システムを使用してターゲットを見るか、ハンドコントローラー、グローブ、またはモーショントラッキングシステムを使用してターゲットを指すか、画面上で指やマウスを使用してターゲットをタップまたはクリックすることによって行うことができます。</p>
-
-<p>通常、<strong>ターゲット光線</strong>は、ターゲティングシステムのソースから、ユーザーが見ている方向または指している方向にターゲット光線に沿って描画されます。 光線の終点を示す方法と同様に、光線のスタイルは一般的にあなた次第です。 ターゲットとなる点またはオブジェクトは、図形を描画するか、ターゲットとなる表面またはオブジェクトを強調表示することによって示される場合があります。</p>
-
-<div style="width: 42em;">
-<figure style="background: #eee; padding: 0.5em; border: 1px solid #aaa; border-radius: 1em; max-width: 504px; padding: 1em; margin: 1em auto;">
-<figcaption><strong>ハンドコントローラーから放出されるターゲット光線。</strong></figcaption>
-<img alt="ハンドコントローラーから放出されるターゲット光線を示すスクリーンショット" src="https://mdn.mozillademos.org/files/17089/example-target-ray.gif" style="width: 100%;"></figure>
-</div>
-
-<p>ターゲット光線は、単純な線（理想的には距離とともにフェードする）から、上のスクリーンショットに示されているサイエンスフィクションの「フェイザー」スタイルなどのアニメーション効果まで、何でもかまいません。</p>
-
-<h2 id="Values" name="Values">値</h2>
-
-<dl>
- <dt><code>gaze</code>（視線）</dt>
- <dd>ユーザーは、ユーザーが見ている方向を検出する視線追跡システム（または<strong>視線入力</strong>）を使用しています。 ターゲット光線は、ビューアーの目を起点として描画され、ビューアーが見ている方向に追従します。</dd>
- <dt><code>screen</code>（画面）</dt>
- <dd>ターゲット光線の方向は、タッチスクリーン、マウス、またはその他の触覚入力デバイスをタップして示します。</dd>
- <dt><code>tracked-pointer</code>（追跡ポインター）</dt>
- <dd>ターゲティングは、ユーザーがターゲットの方向に向けるハンドヘルドデバイスまたはハンドトラッキングシステムを使用して行われます。 ターゲット光線は、手（または手の中のオブジェクト）からターゲット方向に伸びます。 方向はプラットフォーム固有のルールを使用して決定されますが、そのようなルールが存在しない場合は、ユーザーが人差し指を手からまっすぐに向けていると仮定して方向が選択されます。</dd>
-</dl>
-
-<h2 id="Examples" name="Examples">例</h2>
-
-<p>このコードの断片は、フレームごとに1回呼び出される関数の一部を示しています。 <code>null</code> 以外の {{domxref("XRInputSource.targetRaySpace", "targetRaySpace")}} を持つ入力を探します。 このプロパティの値を持つ入力は、ターゲット光線をユーザーから外側に投影する入力を表します。</p>
-
-<p>このような入力ごとに、この例では、{{domxref("XRInputSource.targetRayMode", "targetRayMode")}} が <code>tracked-pointer</code> である入力を探します。 これは、入力が実際には、視線入力デバイス、画面タップ、またはマウスクリックではなく、ターゲティングデバイスを表すことを目的としていることを示しています。 追跡ポインターの場合、関数 <code>myRenderTargetRayAsBeam()</code> が呼び出され、入力コントローラーの仮想位置から、それが指している方向に外側にビームをレンダリングします。</p>
-
-<p>コードは、仮想空間でのユーザーの手の位置を表すコントローラーや任意のオブジェクトの描画、その他の入力関連のタスクなどを引き続き実行する必要があります。</p>
-
-<pre class="brush: js notranslate">function updateInputSources(session, frame, refSpace) {
-  for (let source of session.getInputSources()) {
-    let targetRayPose = frame.getPose(inputSource.targetRaySpace, refSpace);
-
-    if (targetRayPose) {
-      if (source.targetRayMode == "tracked-pointer") {
-        myRenderTargetRayAsBeam(targetRayPose);
-      }
-    }
-
-    /* ... */
-  }
-}
-</pre>
-
-<p>詳細とより完全な例については、<a href="/ja/docs/Web/API/WebXR_Device_API/Inputs">入力と入力ソース</a>の記事を参照してください。</p>
-
-<h2 id="Specifications" name="Specifications">仕様</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">仕様</th>
-   <th scope="col">状態</th>
-   <th scope="col">コメント</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('WebXR','#enumdef-xrtargetraymode','XRTargetRayMode')}}</td>
-   <td>{{Spec2('WebXR')}}</td>
-   <td>初期定義</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
-
-<p>{{Compat("api.XRTargetRayMode")}}</p>
-
-<h2 id="See_also" name="See_also">関連情報</h2>
-
-<ul>
- <li><a href="/ja/docs/Web/API/WebXR_Device_API">WebXR Device API</a></li>
- <li><a href="/ja/docs/Web/API/WebXR_Device_API/Inputs">入力と入力ソース</a></li>
-</ul>
diff --git a/files/ja/conflicting/web/api/xrreferencespaceevent/xrreferencespaceevent/index.html b/files/ja/conflicting/web/api/xrreferencespaceevent/xrreferencespaceevent/index.html
deleted file mode 100644
index 2ee7e3df6a..0000000000
--- a/files/ja/conflicting/web/api/xrreferencespaceevent/xrreferencespaceevent/index.html
+++ /dev/null
@@ -1,73 +0,0 @@
----
-title: XRReferenceSpaceEventInit
-slug: conflicting/Web/API/XRReferenceSpaceEvent/XRReferenceSpaceEvent
-tags:
-  - API
-  - AR
-  - Configuration
-  - Dictionary
-  - Mixed
-  - Options
-  - Reality
-  - Reference
-  - Settings
-  - VR
-  - Virtual
-  - WebXR
-  - WebXR API
-  - WebXR Device API
-  - XR
-  - XRReferenceSpaceEventInit
-  - augmented
-translation_of: Web/API/XRReferenceSpaceEventInit
-original_slug: Web/API/XRReferenceSpaceEventInit
----
-<p>{{APIRef("WebXR Device API")}}{{SecureContext_header}}</p>
-
-<p><strong><code>XRReferenceSpaceEventInit</code></strong> ディクショナリーは、{{domxref("XRReferenceSpaceEvent.XRReferenceSpaceEvent", "XRReferenceSpaceEvent()")}} コンストラクターを呼び出して、そのプロパティの値を提供するときに使用します。 プロパティは読み取り専用であるため、これが値を設定するために利用できる唯一の機会です。</p>
-
-<p>これらのイベントは WebXR インフラストラクチャーによって作成されるため、通常はこれを使用する必要はありません。</p>
-
-<h2 id="Properties" name="Properties">プロパティ</h2>
-
-<dl>
- <dt>{{domxref("XRReferenceSpaceEventInit.referenceSpace", "referenceSpace")}}</dt>
- <dd>イベントの発生元の {{domxref("XRReferenceSpace")}}。</dd>
- <dt>{{domxref("XRReferenceSpaceEventInit.transform", "transform")}}</dt>
- <dd>古い座標系（このイベントによって示される変更の前のもの）を新しい座標系にマップする {{domxref("XRRigidTransform")}}。</dd>
-</dl>
-
-<h2 id="Usage_notes" name="Usage_notes">使用上の注意</h2>
-
-<p>{{domxref("XRReferenceSpaceEvent.XRReferenceSpaceEvent", "XRReferenceSpaceEvent()")}} コンストラクターを呼び出す前に、このディクショナリーのすべてのプロパティに有効な値を設定する必要があります。</p>
-
-<h2 id="Examples" name="Examples">例</h2>
-
-<p>この単純なスニペットは、コンストラクターを呼び出して、{{domxref("XRReferenceSpace.reset_event", "reset")}} タイプの新しい参照空間イベントを作成します。</p>
-
-<pre class="brush: js notranslate">let refSpaceEvent = new XRReferenceSpaceEvent("reset", {
-      referenceSpace: myRefSpace,
-      transform: myTransform
-});
-</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('WebXR','#dictdef-xrreferencespaceeventinit','XRReferenceSpaceEventInit')}}</td>
-   <td>{{Spec2('WebXR')}}</td>
-   <td>初期定義</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
-
-<p>{{Compat("api.XRReferenceSpaceEventInit")}}</p>
diff --git a/files/ja/conflicting/web/api/xrreferencespaceevent/xrreferencespaceevent_0f733d39fd3094010931f093b9045686/index.html b/files/ja/conflicting/web/api/xrreferencespaceevent/xrreferencespaceevent_0f733d39fd3094010931f093b9045686/index.html
deleted file mode 100644
index 2523b17ea1..0000000000
--- a/files/ja/conflicting/web/api/xrreferencespaceevent/xrreferencespaceevent_0f733d39fd3094010931f093b9045686/index.html
+++ /dev/null
@@ -1,63 +0,0 @@
----
-title: XRReferenceSpaceEventInit.referenceSpace
-slug: >-
-  conflicting/Web/API/XRReferenceSpaceEvent/XRReferenceSpaceEvent_0f733d39fd3094010931f093b9045686
-tags:
-  - API
-  - AR
-  - Mixed
-  - Property
-  - Reality
-  - Reference
-  - VR
-  - Virtual
-  - WebXR
-  - WebXR API
-  - WebXR Device API
-  - XR
-  - XRReferenceSpaceEventInit
-  - augmented
-  - referenceSpace
-translation_of: Web/API/XRReferenceSpaceEventInit/referenceSpace
-original_slug: Web/API/XRReferenceSpaceEventInit/referenceSpace
----
-<p>{{APIRef("WebXR Device API")}}{{SecureContext_header}}</p>
-
-<p>{{domxref("XRReferenceSpaceEventInit")}} の <strong><code>referenceSpace</code></strong> プロパティは、{{domxref("XRReferenceSpaceEvent.XRReferenceSpaceEvent", "XRReferenceSpaceEvent()")}} コンストラクターを呼び出すときに、新しく構築される {{domxref("XRReferenceSpaceEvent")}} オブジェクトの値を確立するために使用します。</p>
-
-<h2 id="Syntax" name="Syntax">構文</h2>
-
-<pre class="syntaxbox notranslate">let <em>eventInitDict</em> = {
-  referenceSpace: <em>xrReferenceSpace</em>,
-  transform: <em>xrRigidTransform</em>
-});
-</pre>
-
-<h3 id="Value" name="Value">値</h3>
-
-<p>イベントのソースを示す {{domxref("XRReferenceSpace")}}。</p>
-
-<h2 id="Examples" name="Examples">例</h2>
-
-<p>{{page("/ja/docs/Web/API/XRReferenceSpaceEventInit", "Examples")}}</p>
-
-<h2 id="Specifications" name="Specifications">仕様</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">仕様</th>
-   <th scope="col">状態</th>
-   <th scope="col">コメント</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('WebXR','#dom-xrreferencespaceeventinit-referencespace','XRReferenceSpaceEventInit.referenceSpace')}}</td>
-   <td>{{Spec2('WebXR')}}</td>
-   <td>初期定義</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
-
-<p>{{Compat("api.XRReferenceSpaceEventInit.referenceSpace")}}</p>
diff --git a/files/ja/conflicting/web/api/xrreferencespaceevent/xrreferencespaceevent_7dfb381c892055a0c91980d537a86c6b/index.html b/files/ja/conflicting/web/api/xrreferencespaceevent/xrreferencespaceevent_7dfb381c892055a0c91980d537a86c6b/index.html
deleted file mode 100644
index 96da5a1fa1..0000000000
--- a/files/ja/conflicting/web/api/xrreferencespaceevent/xrreferencespaceevent_7dfb381c892055a0c91980d537a86c6b/index.html
+++ /dev/null
@@ -1,62 +0,0 @@
----
-title: XRReferenceSpaceEventInit.transform
-slug: >-
-  conflicting/Web/API/XRReferenceSpaceEvent/XRReferenceSpaceEvent_7dfb381c892055a0c91980d537a86c6b
-tags:
-  - API
-  - AR
-  - Mixed
-  - Property
-  - Reality
-  - Reference
-  - VR
-  - Virtual
-  - WebXR
-  - WebXR API
-  - WebXR Device API
-  - XR
-  - XRReferenceSpaceEventInit
-  - augmented
-  - transform
-translation_of: Web/API/XRReferenceSpaceEventInit/transform
-original_slug: Web/API/XRReferenceSpaceEventInit/transform
----
-<p>{{APIRef("WebXR Device API")}}{{SecureContext_header}}</p>
-
-<p><span class="seoSummary">{{domxref("XRReferenceSpaceEventInit")}} の <strong><code>transform</code></strong> プロパティは、イベントが表す変更が適用された後の、影響を受ける参照空間のネイティブの原点の位置と向きを示します。</span> <code>transform</code> は古い座標系を使用して定義します。 これにより、座標をイベント前の座標系からイベント後の座標系に変換するために使用できます。</p>
-
-<h2 id="Syntax" name="Syntax">構文</h2>
-
-<pre class="syntaxbox notranslate">let <em>eventInitDict</em> = {
-  referenceSpace: <em>xrReferenceSpace</em>,
-  transform: <em>xrRigidTransform</em>
-});</pre>
-
-<h3 id="Value" name="Value">値</h3>
-
-<p>座標をイベント前の座標系からイベント後の座標系に変換するために使用できる変換を提供する {{domxref("XRRigidTransform")}} オブジェクト。</p>
-
-<h2 id="Examples" name="Examples">例</h2>
-
-<p>{{page("/ja/docs/Web/API/XRReferenceSpaceEventInit", "Examples")}}</p>
-
-<h2 id="Specifications" name="Specifications">仕様</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">仕様</th>
-   <th scope="col">状態</th>
-   <th scope="col">コメント</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('WebXR','#dom-xrreferencespaceeventinit-transform','XRReferenceSpaceEventInit.transform')}}</td>
-   <td>{{Spec2('WebXR')}}</td>
-   <td>初期定義</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
-
-<p>{{Compat("api.XRReferenceSpaceEventInit.transform")}}</p>
diff --git a/files/ja/conflicting/web/api_49b9a84475f11fffb8fc271a7df3c49a/index.html b/files/ja/conflicting/web/api_49b9a84475f11fffb8fc271a7df3c49a/index.html
new file mode 100644
index 0000000000..cdd2b4c27d
--- /dev/null
+++ b/files/ja/conflicting/web/api_49b9a84475f11fffb8fc271a7df3c49a/index.html
@@ -0,0 +1,11 @@
+---
+title: 索引
+slug: conflicting/Web/API_49b9a84475f11fffb8fc271a7df3c49a
+tags:
+  - API
+  - Index
+  - Landing
+translation_of: Web/API/Index
+original_slug: Web/API/Index
+---
+<p>{{Index("/ja/docs/Web/API")}}</p>
diff --git a/files/ja/conflicting/web/css/index.html b/files/ja/conflicting/web/css/index.html
index 3b505b86f1..9585f457ed 100644
--- a/files/ja/conflicting/web/css/index.html
+++ b/files/ja/conflicting/web/css/index.html
@@ -1,32 +1,31 @@
 ---
-title: CSS-2 Quick Reference
+title: ツール
 slug: conflicting/Web/CSS
 tags:
   - CSS
-  - CSS2_Quick_Reference
-  - CSS_2.1
-translation_of: Web/CSS
-translation_of_original: CSS-2_Quick_Reference
-original_slug: CSS-2_Quick_Reference
+  - Guide
+  - NeedsUpdate
+  - ガイド
+translation_of: Web/CSS/Tools
+original_slug: Web/CSS/Tools
 ---
-<p> </p><p>この文書は、初心者からエキスパートまでのための CSS-2 仕様のクイックリファレンスです。スタイルプロパティは簡単な文法で書かれています。
-</p><p>&lt;big&gt;<b><a href="ja/CSS-2_Quick_Reference/All_in_a_page">CSS-2 クイックリファレンス(一括)</a></b>&lt;/big&gt;
-</p><p>さらに詳しい情報とブラウザのサポート:
-</p><p>&lt;big&gt;
-<b><a href="ja/CSS-2_Quick_Reference/Selectors">セレクタ</a></b><br>
-<b><a href="ja/CSS-2_Quick_Reference/Box_model">ボックスモデル</a></b><br>
-<b><a href="ja/CSS-2_Quick_Reference/Visual_formatting_model">視覚的構成モデル</a></b><br>
-<b><a href="ja/CSS-2_Quick_Reference/Visual_formatting_details">視覚的構成の詳細</a></b><br>
-<b><a href="ja/CSS-2_Quick_Reference/Visual_effects">視覚効果</a></b><br>
-<b><a href="ja/CSS-2_Quick_Reference/Lists">リスト</a></b><br>
-<b><a href="ja/CSS-2_Quick_Reference/Color_and_Background">カラーと背景</a></b><br>
-<b><a href="ja/CSS-2_Quick_Reference/Font">フォント</a></b><br>
-<b><a href="ja/CSS-2_Quick_Reference/Text">テキスト</a></b><br>
-<b><a href="ja/CSS-2_Quick_Reference/Tables">表組み</a></b><br>
-<b><a href="ja/CSS-2_Quick_Reference/User_interface">ユーザインタフェース</a></b><br>
-<b><a href="ja/CSS-2_Quick_Reference/Units">単位</a></b><br>
-&lt;/big&gt;
-</p>
-<div class="noinclude">
-</div>
-{{ languages( { "en": "en/CSS-2_Quick_Reference", "fr": "fr/Pr\u00e9cis_CSS_2", "pl": "pl/Szybka_dokumentacja_CSS-2" } ) }}
+<div></div>
+
+<p>CSS は強力な機能を多数提供していますが、その中には使いこなすのが面倒だったり、引数が多かったりするので、作業をしながら視覚化できると便利です。このページでは、これらの機能を使ってコンテンツのスタイルを整えるための CSS を構築するのに役立つ便利なツールへのリンクをいくつか紹介しています。</p>
+
+<p>{{LandingPageListSubpages}}</p>
+
+<h2 id="Other_tools" name="Other_tools">その他のツール</h2>
+
+<ul>
+ <li>CSS アニメーション - <a href="http://jeremyckahn.github.io/stylie/">Stylie</a></li>
+ <li>端末のディスプレイ情報を調べる ({{Glossary("responsive web design")}} で役立ちます) - <a href="http://mydevice.io">mydevice.io</a></li>
+ <li>CSS メニュー - <a href="http://cssmenumaker.com/">cssmenumaker.com</a></li>
+ <li>強力でモダンな CSS リンターで、一貫性のある規約を施行し、スタイルシートでのエラーを回避するのに役立ちます - <a href="https://stylelint.io/">stylelint</a></li>
+</ul>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/CSS">CSS</a></li>
+</ul>
diff --git a/files/ja/conflicting/web/css_eb0c7d23f84df658710ebb6b4bdec8ea/index.html b/files/ja/conflicting/web/css_eb0c7d23f84df658710ebb6b4bdec8ea/index.html
deleted file mode 100644
index c3f2335ad4..0000000000
--- a/files/ja/conflicting/web/css_eb0c7d23f84df658710ebb6b4bdec8ea/index.html
+++ /dev/null
@@ -1,29 +0,0 @@
----
-title: Other Resources
-slug: conflicting/Web/CSS_eb0c7d23f84df658710ebb6b4bdec8ea
-tags:
-  - CSS
-translation_of: Web/CSS
-translation_of_original: Web/CSS/Other_Resources
-original_slug: Web/CSS/Other_Resources
----
-<h2 id="W3C_Documents" name="W3C_Documents">W3C の文書</h2>
-<ul>
-  <li><a class="external" href="http://www.w3.org/Style/CSS/">CSS メインページ</a></li>
-  <li><a class="external" href="http://www.w3.org/TR/REC-CSS2/">CSS2 仕様</a></li>
-  <li><a class="external" href="http://www.w3.org/TR/CSS21/">CSS 2.1 仕様</a></li>
-  <li><a class="external" href="http://www.w3.org/Stylesheets/Core/">W3C での基本スタイルシート</a></li>
-  <li><a class="external" href="http://www.w3.org/Style/CSS/Test/current/">CSS1 テストスイート</a></li>
-  <li><a class="external" href="http://www.w3.org/Style/CSS/Test/CSS2.1/current/">CSS2.1 テストスイート</a></li>
-</ul>
-
-
-<h2 id="Other_Resources" name="Other_Resources">その他の資料</h2>
-<ul>
-  <li><a class="external" href="http://www.w3schools.com/css/">W3 Schools CSS tutorial pages</a></li>
-  <li><a class="external" href="http://gallery.theopalgroup.com/selectoracle/">SelectORacle</a></li>
-  <li><a class="external" href="http://www.westciv.com/style_master/house/">House of Style</a></li>
-  <li><a class="external" href="http://www.mako4css.com/">MaKo4CSS.com</a></li>
-  <li>css-discuss: <a class="external" href="http://archivist.incutio.com/css-discuss/">archives</a>, <a class="external" href="http://css-discuss.incutio.com/">wiki</a></li>
-  <li><a class="external" href="http://www.meyerweb.com/eric/css/edge/">css/edge</a></li>
-</ul>
diff --git a/files/ja/glossary/accessibility_tree/index.html b/files/ja/glossary/accessibility_tree/index.html
index 44f43dad41..e5fea12351 100644
--- a/files/ja/glossary/accessibility_tree/index.html
+++ b/files/ja/glossary/accessibility_tree/index.html
@@ -30,7 +30,7 @@ translation_of: Glossary/Accessibility_tree
 
 <p>加えて、アクセシビリティツリーは要素によって何が行われるのかについての情報を持つことがよくあります。リンクは <em>followed</em>、テキスト入力は <em>typed into</em>、などです。</p>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li><a href="/ja/docs/Glossary">用語集</a>
 
diff --git a/files/ja/glossary/adobe_flash/index.html b/files/ja/glossary/adobe_flash/index.html
index 94d75e0453..308303c964 100644
--- a/files/ja/glossary/adobe_flash/index.html
+++ b/files/ja/glossary/adobe_flash/index.html
@@ -11,7 +11,7 @@ translation_of: Glossary/Adobe_Flash
 ---
 <p id="Summary">Flash は Adobe によって開発された廃れつつある技術で、表現力のあるウェブアプリ、マルチメディアコンテンツ、ストリーミングメディアを表示します。 Adobe Flash は対応している{{Glossary("Browser","ウェブブラウザー")}}でプラグインを用いて実行することができます。</p>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li><a href="https://www.adobe.com/products/flashruntimes.html">公式ウェブサイト</a></li>
  <li><a href="https://mozilla.github.io/shumway/">Shumway: Mozilla によるフリーな実装</a></li>
diff --git a/files/ja/glossary/ajax/index.html b/files/ja/glossary/ajax/index.html
index 9112beff79..df4a7a3e76 100644
--- a/files/ja/glossary/ajax/index.html
+++ b/files/ja/glossary/ajax/index.html
@@ -16,7 +16,7 @@ translation_of: Glossary/AJAX
 
 <p>対話型のウェブサイトや最新のウェブ標準では、 AJAX は徐々に JavaScript フレームワーク内の関数や公式の {{domxref("Fetch API")}} 標準に置き換えられています。</p>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ul>
  <li><a href="/ja/docs/Glossary">MDN Web Docs 用語集</a>:
 
diff --git a/files/ja/glossary/blink/index.html b/files/ja/glossary/blink/index.html
index e5a9f6922e..8be8ea6116 100644
--- a/files/ja/glossary/blink/index.html
+++ b/files/ja/glossary/blink/index.html
@@ -14,7 +14,7 @@ translation_of: Glossary/Blink
 ---
 <p>Blink は、 Google によって Chromium の一部 (それゆえ {{glossary("Chrome", "Google Chrome")}} の一部でもある) として開発されたオープンソースのブラウザー用レイアウトエンジンです。特に、 Blink はレイアウト、レンダリング、 {{glossary("DOM")}} の処理を扱う {{glossary("WebKit")}} 内の WebCore ライブラリのフォークとして始まりましたが、現在は独立した{{glossary("rendering engine", "レンダリングエンジン")}}として成立しています。</p>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li>一般知識
   <ol>
diff --git a/files/ja/glossary/bootstrap/index.html b/files/ja/glossary/bootstrap/index.html
index f1cceee502..775161a6d5 100644
--- a/files/ja/glossary/bootstrap/index.html
+++ b/files/ja/glossary/bootstrap/index.html
@@ -14,7 +14,7 @@ translation_of: Glossary/Bootstrap
 
 <p>Bootstrap は当初 Twitter Blueprint と呼ばれ、 <a href="https://twitter.com/">Twitter</a> の従業員のチームで開発されました。レスポンシブデザインをサポートし、そのまま使用、あるいは自身のコードで必要に応じてカスタマイズできる、定義済みのデザインテンプレートがあります。 Bootstrap はすべての最新のブラウザーと {{glossary("Microsoft Internet Explorer", "Internet Explorer")}} の最近のバージョンと互換性があるので、他のブラウザーとの互換性について心配する必要はありません。</p>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li>Wikipedia 上の記事 {{interwiki("wikipedia", "Bootstrap", "Bootstrap")}}</li>
  <li><a href="https://getbootstrap.com/">Bootstrap をダウンロード</a></li>
diff --git a/files/ja/glossary/brotli_compression/index.html b/files/ja/glossary/brotli_compression/index.html
index e03602d8b3..ba7bf74147 100644
--- a/files/ja/glossary/brotli_compression/index.html
+++ b/files/ja/glossary/brotli_compression/index.html
@@ -22,7 +22,7 @@ translation_of: Glossary/brotli_compression
  <li><a href="https://caniuse.com/#feat=brotli">Brotli on Caniuse</a></li>
 </ul>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ul>
  <li>
   <details open><summary></summary> {{ListSubpages("/en-US/docs/Glossary")}}</details>
diff --git a/files/ja/glossary/browser/index.html b/files/ja/glossary/browser/index.html
index 50690ba09b..5fa78604a9 100644
--- a/files/ja/glossary/browser/index.html
+++ b/files/ja/glossary/browser/index.html
@@ -20,7 +20,7 @@ translation_of: Glossary/Browser
  <li><a href="https://www.opera.com/" rel="external">Opera ブラウザー</a></li>
 </ul>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li><a href="/ja/docs/Glossary">MDN Web Docs 用語集</a>
 
diff --git a/files/ja/glossary/cacheable/index.html b/files/ja/glossary/cacheable/index.html
index da0c62fbbc..6703108ad2 100644
--- a/files/ja/glossary/cacheable/index.html
+++ b/files/ja/glossary/cacheable/index.html
@@ -44,7 +44,7 @@ translation_of: Glossary/cacheable
 Cache-Control: no-cache
 (…)</pre>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li>一般知識
   <ol>
diff --git a/files/ja/glossary/call_stack/index.html b/files/ja/glossary/call_stack/index.html
index cc188a1e09..e316a30f1f 100644
--- a/files/ja/glossary/call_stack/index.html
+++ b/files/ja/glossary/call_stack/index.html
@@ -2,6 +2,7 @@
 title: Call stack (コールスタック)
 slug: Glossary/Call_stack
 tags:
+  - Call Stack
   - CodingScripting
   - Glossary
   - JavaScript
@@ -9,7 +10,7 @@ tags:
   - 用語集
 translation_of: Glossary/Call_stack
 ---
-<p><ruby><strong>コールスタック</strong><rp> (</rp><rt>call stack</rt><rp>) </rp></ruby>は、インタープリター (ウェブブラウザー内の JavaScript インタープリターなど) の仕組みの一つで、複数階層の{{glossary("function","関数")}}を呼び出したスクリプト内の位置を追跡し続けることです。 — どの関数が現在実行されているのか、その関数の中でどの関数が呼び出されたか、などです。</p>
+<p><strong>コールスタック</strong> (call stack) は、インタープリター (ウェブブラウザー内の JavaScript インタープリターなど) の仕組みの一つで、複数階層の{{glossary("function","関数")}}を呼び出したスクリプト内の位置を追跡し続けることです。 — どの関数が現在実行されているのか、その関数の中でどの関数が呼び出されたか、などです。</p>
 
 <ul>
  <li>スクリプトが関数を呼び出すとき、インタープリターはそれをコールスタックに追加し、それから関数の実行を始めます。</li>
@@ -18,12 +19,12 @@ translation_of: Glossary/Call_stack
  <li>スタックが割り当てられている量よりも多くのスペースを使用した場合、 "stack overflow" エラーとなります。</li>
 </ul>
 
-<h2 id="Example" name="Example">例</h2>
+<h2 id="Example">例</h2>
 
 <pre class="brush: js">function greeting() {
-   // [1] Some codes here
+   // [1] Some code here
    sayHi();
-   // [2] Some codes here
+   // [2] Some code here
 }
 function sayHi() {
    return "Hi!";
@@ -32,7 +33,7 @@ function sayHi() {
 // Invoke the `greeting` function
 greeting();
 
-// [3] Some codes here
+// [3] Some code here
 </pre>
 
 <p>上記のコードは次のように実行されます。</p>
@@ -73,15 +74,15 @@ greeting();
 
 <p>空のコールスタックで始め、関数を呼び出す度に、自動的にそれがコールスタックに追加され、コードをすべて実行した後、自動的にコールスタックから削除されます。最後に、またからのスタックで終了します。</p>
 
-<h2 id="Learn_more" name="Learn_more">より詳しく知る</h2>
+<h2 id="Learn_more">より詳しく知る</h2>
 
-<h3 id="General_knowledge" name="General_knowledge">一般知識</h3>
+<h3 id="General_knowledge">一般知識</h3>
 
 <ul>
  <li>ウィキペディアの{{Interwiki("wikipedia", "コールスタック")}}</li>
 </ul>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ul>
  <li><a href="/ja/docs/Glossary">MDN Web Docs 用語集</a>
 
diff --git a/files/ja/glossary/character_set/index.html b/files/ja/glossary/character_set/index.html
index ad352b9d4f..b61119f7c3 100644
--- a/files/ja/glossary/character_set/index.html
+++ b/files/ja/glossary/character_set/index.html
@@ -13,7 +13,7 @@ translation_of: Glossary/character_set
 
 <p>文字コードが誤って使用すると (例えば、Big5 でエンコードされた記事に Unicode を使用すると)、壊れた文字ばかりが表示されることがあり、これは{{Interwiki("wikipedia", "文字化け")}}と呼ばれます。</p>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li>Wikipedia の記事
   <ol>
diff --git a/files/ja/glossary/cipher/index.html b/files/ja/glossary/cipher/index.html
index b7c490fb22..d0da8882df 100644
--- a/files/ja/glossary/cipher/index.html
+++ b/files/ja/glossary/cipher/index.html
@@ -25,7 +25,7 @@ translation_of: Glossary/Cipher
  <li>{{Interwiki("wikipedia", "公開鍵暗号")}}は、暗号化と復号に異なる鍵を使用します。</li>
 </ul>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li>一般知識
   <ol>
diff --git a/files/ja/glossary/cors-safelisted_response_header/index.html b/files/ja/glossary/cors-safelisted_response_header/index.html
index f4167ef9cb..610851f1ea 100644
--- a/files/ja/glossary/cors-safelisted_response_header/index.html
+++ b/files/ja/glossary/cors-safelisted_response_header/index.html
@@ -28,7 +28,7 @@ translation_of: Glossary/CORS-safelisted_response_header
 
 <pre>Access-Control-Expose-Headers: X-Custom-Header, Content-Length</pre>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li>関連情報
   <ol>
diff --git a/files/ja/glossary/crawler/index.html b/files/ja/glossary/crawler/index.html
index 27b2a48e77..cbca2a132d 100644
--- a/files/ja/glossary/crawler/index.html
+++ b/files/ja/glossary/crawler/index.html
@@ -20,7 +20,7 @@ translation_of: Glossary/Crawler
  <li>Wikipedia の {{Interwiki("wikipedia", "クローラ")}}</li>
 </ul>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li><a href="/ja/docs/Glossary">MDN Web Docs 用語集</a>
   <ol>
diff --git a/files/ja/glossary/cross_axis/index.html b/files/ja/glossary/cross_axis/index.html
index 71ea43b706..54f812182a 100644
--- a/files/ja/glossary/cross_axis/index.html
+++ b/files/ja/glossary/cross_axis/index.html
@@ -44,7 +44,7 @@ translation_of: Glossary/Cross_Axis
  <li>CSS フレックスボックスガイド: <em><a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Mastering_Wrapping_of_Flex_Items">フレックスアイテムの折り返しのマスター</a></em></li>
 </ul>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li><a href="/ja/docs/Glossary">MDN Web Docs 用語集</a>
 
diff --git a/files/ja/glossary/cryptographic_hash_function/index.html b/files/ja/glossary/cryptographic_hash_function/index.html
index 6325537826..3adf8f4578 100644
--- a/files/ja/glossary/cryptographic_hash_function/index.html
+++ b/files/ja/glossary/cryptographic_hash_function/index.html
@@ -20,7 +20,7 @@ translation_of: Glossary/Cryptographic_hash_function
 
 <p>MD5 や SHA-1 などの暗号化ハッシュ関数は、衝突耐性を大幅に低下させる攻撃が見つかったため、破損しているとみなされています。</p>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ul>
  <li>Wikipedia 上の {{Interwiki("wikipedia", "暗号学的ハッシュ関数")}}</li>
  <li><a href="/ja/docs/Glossary">MDN Web Docs 用語集</a>
diff --git a/files/ja/glossary/cryptography/index.html b/files/ja/glossary/cryptography/index.html
index 3c3b66574a..d69cb85abc 100644
--- a/files/ja/glossary/cryptography/index.html
+++ b/files/ja/glossary/cryptography/index.html
@@ -12,7 +12,7 @@ translation_of: Glossary/Cryptography
 ---
 <p><span class="seoSummary"><strong>暗号学</strong>（Cryptography、cryptology）は、メッセージを安全に符号化して送信する方法を研究する科学です。暗号学は、安全でない環境でメッセージを符号化および復号するために使用されるアルゴリズムの設計および研究と、それらの応用です。</span><strong> データの機密性</strong>だけではなく、暗号学はまた、<strong>識別</strong>、<strong>認証</strong>、<strong>否認防止</strong>、および<strong>データの完全性</strong>にも取り組んでいます。したがって、<strong>暗号システム</strong>、つまり文脈における暗号方式の使い方も研究します。</p>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li>一般知識
   <ol>
diff --git a/files/ja/glossary/css_preprocessor/index.html b/files/ja/glossary/css_preprocessor/index.html
index 0b49383a52..477555d4a8 100644
--- a/files/ja/glossary/css_preprocessor/index.html
+++ b/files/ja/glossary/css_preprocessor/index.html
@@ -11,7 +11,7 @@ translation_of: Glossary/CSS_preprocessor
 
 <p>CSS プリプロセッサーを使うためには、 CSS コンパイラーをウェブ{{Glossary("server", "サーバー")}}にインストールするか、 CSS プリプロセッサーを使用して開発環境でコンパイルしてから、コンパイル済みの CSS ファイルをウェブサーバーにアップロードする必要があります。</p>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li>有名な CSS プリプロセッサーの例
   <ol>
diff --git a/files/ja/glossary/css_selector/index.html b/files/ja/glossary/css_selector/index.html
index 3f492fd842..3ce618a2dd 100644
--- a/files/ja/glossary/css_selector/index.html
+++ b/files/ja/glossary/css_selector/index.html
@@ -55,7 +55,7 @@ div.warning {
 
 <p>{{EmbedLiveSample("glossary-selector-details", 640, 210)}}</p>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li>CSS 入門内の <a href="/ja/docs/Learn/CSS/Introduction_to_CSS/Selectors">CSS セレクターについての詳細</a></li>
  <li>基本的なセレクター
diff --git a/files/ja/glossary/database/index.html b/files/ja/glossary/database/index.html
index 325a9fd9cb..04780b6718 100644
--- a/files/ja/glossary/database/index.html
+++ b/files/ja/glossary/database/index.html
@@ -15,7 +15,7 @@ translation_of: Glossary/Database
 
 <p>ブラウザー上で動く {{glossary("IndexedDB")}} と呼ばれる独自データベースシステムもあります。</p>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li>{{Interwiki("wikipedia", "データベース")}} (Wikipedia)
   <ol>
diff --git a/files/ja/glossary/document_directive/index.html b/files/ja/glossary/document_directive/index.html
index 62ab3c4f65..1bd12aec9b 100644
--- a/files/ja/glossary/document_directive/index.html
+++ b/files/ja/glossary/document_directive/index.html
@@ -20,7 +20,7 @@ translation_of: Glossary/Document_directive
 
 <p>完全な一覧は<a href="/ja/docs/Web/HTTP/Headers/Content-Security-Policy#Document_directives">文書ディレクティブ</a>を参照してください。</p>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li><a href="/ja/docs/Glossary">用語集</a>
 
diff --git a/files/ja/glossary/dom/index.html b/files/ja/glossary/dom/index.html
index ca4f417603..b3596d1125 100644
--- a/files/ja/glossary/dom/index.html
+++ b/files/ja/glossary/dom/index.html
@@ -14,7 +14,7 @@ translation_of: Glossary/DOM
 
 <p>DOM は当初、仕様書がありませんでしたが、ブラウザが{{Glossary("JavaScript")}} の実装を始めた頃に追加されました。このレガシーな DOM は DOM0 と呼ばれることもあります。今日、 WHATWG が DOM Living Standard を保守しています。</p>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li>Wikipedia 上の記事「{{interwiki("wikipedia", "Document_Object_Model", "The Document Object Model")}}」</li>
  <li>MDN 上の記事「<a href="/ja/docs/DOM">DOM ドキュメント</a>」</li>
diff --git a/files/ja/glossary/endianness/index.html b/files/ja/glossary/endianness/index.html
index 81e6499b26..c95e78710d 100644
--- a/files/ja/glossary/endianness/index.html
+++ b/files/ja/glossary/endianness/index.html
@@ -22,7 +22,7 @@ translation_of: Glossary/Endianness
  <li><em>ミックスドエンディアン</em> (古く非常に稀): <code>0x34 0x12 0x78 0x56</code></li>
 </ul>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li>関連情報
   <ol>
diff --git a/files/ja/glossary/favicon/index.html b/files/ja/glossary/favicon/index.html
index 56888a703d..8e64aa7598 100644
--- a/files/ja/glossary/favicon/index.html
+++ b/files/ja/glossary/favicon/index.html
@@ -16,7 +16,7 @@ translation_of: Glossary/Favicon
 
 <p>ファビコンはユーザエクスペリエンスを向上させ、ブランドの一貫性を保つために使用されます。例えば使い慣れたアイコンがブラウザのアドレスバーに表示されるのを見ることで、ユーザは自分が適切な場所 (<em>訳注:WEBページなど</em>) にいることを理解します。</p>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li>Wikipedia 上の {{interwiki("wikipedia", "Favicon", "Favicon")}}</li>
  <li>ツール
diff --git a/files/ja/glossary/fetch_directive/index.html b/files/ja/glossary/fetch_directive/index.html
index d67ab580cb..dc26da2516 100644
--- a/files/ja/glossary/fetch_directive/index.html
+++ b/files/ja/glossary/fetch_directive/index.html
@@ -14,7 +14,7 @@ translation_of: Glossary/Fetch_directive
 
 <p>完全な一覧については<a href="/ja/docs/Web/HTTP/Headers/Content-Security-Policy#Fetch_directives">フェッチディレクティブ</a>を参照してください。</p>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li><a href="/ja/docs/Glossary">用語集</a>
 
diff --git a/files/ja/glossary/first-class_function/index.html b/files/ja/glossary/first-class_function/index.html
index 65c47009f7..b1efc7acb3 100644
--- a/files/ja/glossary/first-class_function/index.html
+++ b/files/ja/glossary/first-class_function/index.html
@@ -94,7 +94,7 @@ sayHello()();
 
 <p><em>二重括弧 <code>()()</code> を使用して、返された関数を呼び出しています。</em></p>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li><em>Wikipedia の {{Interwiki("wikipedia", "First-class functions", "First-class functions")}}</em></li>
  <li><em><a href="/ja/docs/Glossary">MDN Web Docs 用語集</a> </em>
diff --git a/files/ja/glossary/flexbox/index.html b/files/ja/glossary/flexbox/index.html
index d07dc40a1d..ba18dce238 100644
--- a/files/ja/glossary/flexbox/index.html
+++ b/files/ja/glossary/flexbox/index.html
@@ -47,7 +47,7 @@ translation_of: Glossary/Flexbox
  <li>CSS Flexbox ガイド: <em><a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox">Flexbox の典型的な使用例</a></em></li>
 </ul>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li><a href="/ja/docs/Glossary">MDN Web Docs 用語集</a>
 
diff --git a/files/ja/glossary/forbidden_header_name/index.html b/files/ja/glossary/forbidden_header_name/index.html
index 0574d9ae23..b69c1ce340 100644
--- a/files/ja/glossary/forbidden_header_name/index.html
+++ b/files/ja/glossary/forbidden_header_name/index.html
@@ -46,7 +46,7 @@ translation_of: Glossary/Forbidden_header_name
 <p><strong>注</strong>: <code>User-Agent</code> ヘッダーは<a href="https://fetch.spec.whatwg.org/#terminology-headers">仕様としては</a>禁止ではなくなりました (Firefox 43 で実装された forbidden header name list を参照)。 Fetch の <a href="/ja/docs/Web/API/Headers">Headers</a> オブジェクトや、XHR の <a href="/ja/docs/Web/API/XMLHttpRequest#setRequestHeader%28%29">setRequestHeader()</a> などでこのヘッダーを設定することが可能です。ただし、 Chrome は Fetch リクエストからこのヘッダーを暗黙的に削除します（<a href="https://bugs.chromium.org/p/chromium/issues/detail?id=571722">Chromium バグ 571722</a> を参照）。</p>
 </div>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li><a href="/ja/docs/Glossary">MDN Web Docs 用語集</a>
 
diff --git a/files/ja/glossary/fork/index.html b/files/ja/glossary/fork/index.html
index f903f8c91e..7420671a57 100644
--- a/files/ja/glossary/fork/index.html
+++ b/files/ja/glossary/fork/index.html
@@ -25,7 +25,7 @@ translation_of: Glossary/Fork
  <li><a href="https://www.libreoffice.org/about-us/who-are-we/">LibreOffice (OpenOffice からのフォーク)</a></li>
 </ul>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li>General Knowledge
   <ol>
diff --git a/files/ja/glossary/fps/index.html b/files/ja/glossary/fps/index.html
index 0b7e8483e3..553be80946 100644
--- a/files/ja/glossary/fps/index.html
+++ b/files/ja/glossary/fps/index.html
@@ -12,7 +12,7 @@ translation_of: Glossary/FPS
 
 <p>映画では一般に、フレームレートは 24fps です。フレームレートが低くても大丈夫なのは、被写体ぶれで錯覚が発生するためです。コンピューターの画面上を動く場合は被写体ぶれはありません (被写体ぶれのある画像<a href="/ja/docs/Web/CSS/CSS_Images/Implementing_image_sprites_in_CSS">スプライト</a>を動かしている場合を除いて)。</p>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li><a href="/ja/docs/Glossary">Glossary</a>
 
diff --git a/files/ja/glossary/global_object/index.html b/files/ja/glossary/global_object/index.html
index b855e3940f..628dd47dc0 100644
--- a/files/ja/glossary/global_object/index.html
+++ b/files/ja/glossary/global_object/index.html
@@ -55,7 +55,7 @@ window.greeting(); // ふつうに greeting(); を呼び出すのと同じ
    console.log("Hi!");
 }</pre>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ul>
  <li><a href="/ja/docs/Glossary">MDN 用語集</a>
 
diff --git a/files/ja/glossary/graceful_degradation/index.html b/files/ja/glossary/graceful_degradation/index.html
index 8889a1f2ee..8aea866d62 100644
--- a/files/ja/glossary/graceful_degradation/index.html
+++ b/files/ja/glossary/graceful_degradation/index.html
@@ -14,7 +14,7 @@ translation_of: Glossary/Graceful_degradation
 
 <p>これは、ウェブサイトが複数の未知のユーザーエージェントからアクセスされるという状況下で、ウェブ開発者が最良の可能性を持ったウェブサイトを開発することに集中できるようにするために有用なテクニックです。{{Glossary("Progressive enhancement","プログレッシブエンハンスメント")}}は関連していますが、異なります。これはよくグレースフルデグラデーションとはがy句の方向に進むように見えます。実際には、両方のアプローチが有効であり、互いに補完することができます。</p>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li>Wikipedia 上の {{Interwiki("wikipedia", "en:Graceful degradation")}} (英語)</li>
  <li><a href="/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS">一般的な HTML と CSS の問題への対処</a></li>
diff --git a/files/ja/glossary/grid/index.html b/files/ja/glossary/grid/index.html
index 602be55cf9..cc152f0623 100644
--- a/files/ja/glossary/grid/index.html
+++ b/files/ja/glossary/grid/index.html
@@ -59,7 +59,7 @@ translation_of: Glossary/Grid
 
 <p>{{ EmbedLiveSample('example', '500', '330') }}</p>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li>CSS グリッドレイアウトガイド:<br>
   <em><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">グリッドレイアウトの基本コンセプト</a></em></li>
diff --git a/files/ja/glossary/grid_tracks/index.html b/files/ja/glossary/grid_tracks/index.html
index d5984585a5..f184db7037 100644
--- a/files/ja/glossary/grid_tracks/index.html
+++ b/files/ja/glossary/grid_tracks/index.html
@@ -58,7 +58,7 @@ translation_of: Glossary/Grid_Tracks
 
 <p>暗黙的グリッドにおけるトラックは、既定では自動的に大きさが決定されますが、 {{cssxref("grid-auto-rows")}} および {{cssxref("grid-auto-columns")}} プロパティでこれらのトラックの大きさを定義することもできます。</p>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li>CSS グリッドレイアウトガイド:<br>
   <em><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">グリッドレイアウトの基本概念</a></em></li>
diff --git a/files/ja/glossary/gzip_compression/index.html b/files/ja/glossary/gzip_compression/index.html
index 2be218311e..438bb68818 100644
--- a/files/ja/glossary/gzip_compression/index.html
+++ b/files/ja/glossary/gzip_compression/index.html
@@ -17,7 +17,7 @@ translation_of: Glossary/GZip_compression
  <li>ウィキペディアの「<a href="https://ja.wikipedia.org/wiki/Gzip">Gzip</a>」の記事</li>
 </ul>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ul>
  <li>
   <details><summary><a href="/ja/docs/Glossary">MDN 用語集</a></summary> {{ListSubpages("/ja/docs/Glossary/")}}</details>
diff --git a/files/ja/glossary/hotlink/index.html b/files/ja/glossary/hotlink/index.html
index 7342ea9432..c74cabf899 100644
--- a/files/ja/glossary/hotlink/index.html
+++ b/files/ja/glossary/hotlink/index.html
@@ -10,7 +10,7 @@ translation_of: Glossary/Hotlink
 
 <p>この行為は、リンク先のオブジェクトをホストしているウェブサイトの帯域幅を勝手に利用することになるため、多くの場合はひんしゅくを買う行為であり、また著作権上の懸念 — 許可なく行われた場合は窃盗とみなされます — を引き起こす可能性もあるためです。</p>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li>一般知識
   <ol>
diff --git a/files/ja/glossary/http_2/index.html b/files/ja/glossary/http_2/index.html
index 92c8b4eee3..5637de57a3 100644
--- a/files/ja/glossary/http_2/index.html
+++ b/files/ja/glossary/http_2/index.html
@@ -15,7 +15,7 @@ translation_of: Glossary/HTTP_2
 
 <p>HTTP/2 は HTTP のアプリケーション的な意味を何も変更していません。 HTTP 1.1 にあった主要な概念、たとえば HTTP メソッド、ステータスコード、 URI、ヘッダーフィールドなどはすべてそのまま残っています。その代わり、 HTTP/2 はデータを書式化 (フレーム化) するしてクライアントとサーバー間で転送する方法を、プロセス全体の管理と、新しいフレーム化レイヤーの中の複雑さをアプリケーションから隠蔽することの両面で変更しました。結果として、既存のすべてのアプリケーションが変更なしに配信することができます。</p>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li>一般知識
   <ol>
diff --git a/files/ja/glossary/http_3/index.html b/files/ja/glossary/http_3/index.html
index 3ab4b18867..a6ff8f0ab1 100644
--- a/files/ja/glossary/http_3/index.html
+++ b/files/ja/glossary/http_3/index.html
@@ -9,7 +9,7 @@ translation_of: Glossary/HTTP_3
 ---
 <p><span class="seoSummary"><strong>HTTP/3</strong> は {{glossary("HTTP 2", "HTTP/2")}} に続く <a href="/ja/docs/Web/HTTP/Basics_of_HTTP">HTTP ネットワークプロトコル</a> の今後のメジャーリビジョンです。</span> HTTP/3 の主なポイントは {{glossary("TCP")}} の代わりに QUIC という新しい {{glossary("UDP")}} プロトコルを使用することです。</p>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li>一般知識
   <ol>
diff --git a/files/ja/glossary/http_header/index.html b/files/ja/glossary/http_header/index.html
index b660077dc9..b14fc35fb4 100644
--- a/files/ja/glossary/http_header/index.html
+++ b/files/ja/glossary/http_header/index.html
@@ -47,7 +47,7 @@ X-Cache: Hit from cloudfront
 X-Cache-Info: cached
 </pre>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li>仕様書
   <ol>
diff --git a/files/ja/glossary/https/index.html b/files/ja/glossary/https/index.html
index f8dec3774e..e7a1222d58 100644
--- a/files/ja/glossary/https/index.html
+++ b/files/ja/glossary/https/index.html
@@ -11,9 +11,9 @@ tags:
   - 用語集
 translation_of: Glossary/https
 ---
-<p><strong>HTTPS</strong> は {{Glossary("HTTP")}} プロトコルを暗号化したバージョンです。 HTTPS は通常、 {{Glossary("SSL")}} または {{Glossary("TLS")}} を用いてクライアントとサーバー間のすべての通信を暗号化します。この安全な接続により、クライアントは機密データをサーバーと安全に交換できます (例えば、銀行取引やオンラインショッピングなどで)。</p>
+<p><strong>HTTPS</strong> (<strong><em>HyperText Transfer Protocol Secure</em></strong>) は {{Glossary("HTTP")}} プロトコルを暗号化したバージョンです。 HTTPS は通常、 {{Glossary("SSL")}} または {{Glossary("TLS")}} を用いてクライアントとサーバー間のすべての通信を暗号化します。この安全な接続により、クライアントは機密データをサーバーと安全に交換できます (例えば、銀行取引やオンラインショッピングなどで)。</p>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li>一般知識
   <ol>
diff --git a/files/ja/glossary/identifier/index.html b/files/ja/glossary/identifier/index.html
index e22d1551e4..1be1ea7bd6 100644
--- a/files/ja/glossary/identifier/index.html
+++ b/files/ja/glossary/identifier/index.html
@@ -22,7 +22,7 @@ translation_of: Glossary/Identifier
  <li>ウィキペディアの{{interwiki("wikipedia", "識別子#プログラミング言語における識別子", "識別子")}}の記事</li>
 </ul>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li><a href="/ja/docs/Glossary">用語集</a>
 
diff --git a/files/ja/glossary/iife/index.html b/files/ja/glossary/iife/index.html
index afc9e02e2d..2a4cdd8363 100644
--- a/files/ja/glossary/iife/index.html
+++ b/files/ja/glossary/iife/index.html
@@ -45,7 +45,7 @@ aName // "Uncaught ReferenceError: aName is not defined" が発生します
 // Immediately creates the output:
 result; // "Barry"</pre>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li>学習記事
   <ol>
diff --git a/files/ja/glossary/index.html b/files/ja/glossary/index.html
index 89c12fb984..d51376af2a 100644
--- a/files/ja/glossary/index.html
+++ b/files/ja/glossary/index.html
@@ -46,7 +46,7 @@ translation_of: Glossary
 <div class="hidden">
 <h2 id="Subnav">Subnav</h2>
 
-<section id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li><strong><a href="/ja/docs/Glossary">MDN Web Docs 用語集</a></strong>{{ListSubpagesForSidebar("/en-us/docs/Glossary", 1)}}</li>
 </ol>
diff --git a/files/ja/glossary/input_method_editor/index.html b/files/ja/glossary/input_method_editor/index.html
index 23e219fdc5..e1fb0a7083 100644
--- a/files/ja/glossary/input_method_editor/index.html
+++ b/files/ja/glossary/input_method_editor/index.html
@@ -13,7 +13,7 @@ translation_of: Glossary/Input_method_editor
  <li>手書き文字認識を使用したタッチ画面のテキスト入力</li>
 </ul>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li>Wikipedia の記事
   <ol>
diff --git a/files/ja/glossary/internationalization_and_localization/index.html b/files/ja/glossary/internationalization_and_localization/index.html
index c4d2c7a8f0..eec68b6b94 100644
--- a/files/ja/glossary/internationalization_and_localization/index.html
+++ b/files/ja/glossary/internationalization_and_localization/index.html
@@ -19,7 +19,7 @@ translation_of: Glossary/Internationalization_and_localization
  <li><a href="/ja/docs/Learn/CSS/CSS_layout/Flexbox">フレックスボックス</a> および <a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">グリッドレイアウト</a></li>
 </ul>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ul>
  <li>
   <details open><summary></summary> {{ListSubpages("/ja/docs/Glossary")}}</details>
diff --git a/files/ja/glossary/key/index.html b/files/ja/glossary/key/index.html
index df0a7de825..a08dee7426 100644
--- a/files/ja/glossary/key/index.html
+++ b/files/ja/glossary/key/index.html
@@ -13,7 +13,7 @@ translation_of: Glossary/Key
 
 <p>{{Glossary("symmetric-key cryptography", "共通鍵暗号")}}においては、同じ鍵が暗号化と復号の両方に使用されます。{{Glossary("public-key cryptography", "公開鍵暗号")}}においては、<em>公開鍵</em>と<em>秘密鍵</em>と呼ばれる、一対の関連した鍵が存在します。公開鍵は自由に使用できますが、一方、秘密鍵は秘密に保たれます。公開鍵は、メッセージを対応する秘密鍵だけで復号できるように暗号化できます。逆もまた同様です。</p>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li>一般知識
   <ol>
diff --git a/files/ja/glossary/latency/index.html b/files/ja/glossary/latency/index.html
index d84963a318..18025d1cb5 100644
--- a/files/ja/glossary/latency/index.html
+++ b/files/ja/glossary/latency/index.html
@@ -22,4 +22,4 @@ translation_of: Glossary/Latency
  <li><a href="/ja/docs/Web/Performance/Understanding_latency">レイテンシーを理解する</a></li>
 </ul>
 
-<section class="Quick_links" id="Quick_Links"></section>
+<section id="Quick_links"></section>
diff --git a/files/ja/glossary/ligature/index.html b/files/ja/glossary/ligature/index.html
index 10d86f4457..9add721662 100644
--- a/files/ja/glossary/ligature/index.html
+++ b/files/ja/glossary/ligature/index.html
@@ -12,7 +12,7 @@ translation_of: Glossary/Ligature
 
 <p>{{cssxref("font-variant-ligatures")}} を使用してウェブページで合字を実装できます。</p>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
  <ol>
   <li>Wikipedia 上の {{Interwiki("wikipedia", "合字")}}</li>
  </ol>
diff --git a/files/ja/glossary/local_variable/index.html b/files/ja/glossary/local_variable/index.html
index 2ebec4cb7a..c08ceb49c8 100644
--- a/files/ja/glossary/local_variable/index.html
+++ b/files/ja/glossary/local_variable/index.html
@@ -19,7 +19,7 @@ function fun(){
 }
 </pre>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li>一般知識
   <ol>
diff --git a/files/ja/glossary/loop/index.html b/files/ja/glossary/loop/index.html
index b578c13eec..87a3ad1569 100644
--- a/files/ja/glossary/loop/index.html
+++ b/files/ja/glossary/loop/index.html
@@ -74,7 +74,7 @@ while(i &lt; 5){
  <li>コードブロックは変数 (i) が5未満である限り、実行が継続します。</li>
 </ul>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li>General Knowledge
   <ol>
diff --git a/files/ja/glossary/lossless_compression/index.html b/files/ja/glossary/lossless_compression/index.html
index 02d357c941..4d19c7fb92 100644
--- a/files/ja/glossary/lossless_compression/index.html
+++ b/files/ja/glossary/lossless_compression/index.html
@@ -18,7 +18,7 @@ translation_of: Glossary/Lossless_compression
 
 <p>一方、{{glossary("Lossy compression", "非可逆圧縮")}}は元のファイルから一部のデータを犠牲にすることで厳密ではない近似値を使用しており、元に戻すことができない圧縮方法です。</p>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li><a href="/ja/docs/Glossary">用語集</a>
 
diff --git a/files/ja/glossary/ltr/index.html b/files/ja/glossary/ltr/index.html
index 397daf4258..7d217b681a 100644
--- a/files/ja/glossary/ltr/index.html
+++ b/files/ja/glossary/ltr/index.html
@@ -18,7 +18,7 @@ translation_of: Glossary/ltr
  <li><a href="/ja/docs/Web/Localization">ローカリゼーションと国際化</a></li>
 </ul>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ul>
  <li><a href="/ja/docs/Glossary">MDN Web Docs 用語集</a>
   <ul>
diff --git a/files/ja/glossary/main_thread/index.html b/files/ja/glossary/main_thread/index.html
index 9d00165a98..e938019977 100644
--- a/files/ja/glossary/main_thread/index.html
+++ b/files/ja/glossary/main_thread/index.html
@@ -11,7 +11,7 @@ translation_of: Glossary/Main_thread
 
 <p>意識的に <a href="/ja/docs/Web/API/Service_Worker_API/Using_Service_Workers">Service worker</a> などの <a href="/ja/docs/Web/API/Web_Workers_API/Using_web_workers">Web worker</a> を使用しない限り、 JavaScript はメインスレッド上で実行されるので、イベント処理や描画の中で簡単にスクリプトが遅延を発生させます。メインスレッドで動作させる必要がある処理が少ないほど、メインスレッドがユーザーのイベントに応答したり、描画したりすることが増え、ユーザーへの反応が全般的に良くなります。</p>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li>関連情報
   <ol>
diff --git a/files/ja/glossary/markup/index.html b/files/ja/glossary/markup/index.html
index 87720bac15..55a3f47d0b 100644
--- a/files/ja/glossary/markup/index.html
+++ b/files/ja/glossary/markup/index.html
@@ -25,7 +25,7 @@ translation_of: Glossary/markup
  <dd>文書の区間をプログラムがどのように扱うべきかでラベル付けします。例えば、 HTML の {{HTMLElement("td")}} は HTML の表でセルを定義します。</dd>
 </dl>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li><a href="/ja/docs/Glossary">MDN Web Docs 用語集</a>
 
diff --git a/files/ja/glossary/mathml/index.html b/files/ja/glossary/mathml/index.html
index b62d92e8eb..8b12fe6cf9 100644
--- a/files/ja/glossary/mathml/index.html
+++ b/files/ja/glossary/mathml/index.html
@@ -11,7 +11,7 @@ translation_of: Glossary/MathML
 ---
 <p id="Summary"><strong>MathML</strong> ({{glossary("XML")}} のアプリケーション) は、ウェブページにおいて数式を表現するためのオープンスタンダードです。 1998年に、 W3C は{{glossary("browser","ブラウザー")}}で数式を表現するための MathML の最初の勧告を行いました。 MathML には科学コンテンツや音声合成などの他のアプリケーションもあります。</p>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li>一般知識
   <ol>
diff --git a/files/ja/glossary/method/index.html b/files/ja/glossary/method/index.html
index 87ebec0b02..71cdb78a93 100644
--- a/files/ja/glossary/method/index.html
+++ b/files/ja/glossary/method/index.html
@@ -30,7 +30,7 @@ translation_of: Glossary/Method
  <li><a href="/ja/docs/Web/JavaScript/Reference/Methods_Index">JavaScript 内蔵メソッド一覧</a></li>
 </ul>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ul>
  <li><a href="/ja/docs/Glossary">MDN Web Docs 用語集</a>
 
diff --git a/files/ja/glossary/microsoft_edge/index.html b/files/ja/glossary/microsoft_edge/index.html
index 3ea638fa04..4c4d18d6a9 100644
--- a/files/ja/glossary/microsoft_edge/index.html
+++ b/files/ja/glossary/microsoft_edge/index.html
@@ -9,7 +9,7 @@ translation_of: Glossary/Microsoft_Edge
 ---
 <p><strong>Microsoft Edge</strong> は、グラフィカルな無料の{{glossary("World Wide Web", "ウェブ")}}{{Glossary("browser", "ブラウザー")}}で、 Microsoft Windows に付属しており、マイクロソフトが 2014年から開発しています。 Edge は、最初は Spartan として知られ、長い間使われた {{glossary("Microsoft Internet Explorer","Internet Explorer")}} を置き換えました。</p>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li>関連情報
   <ol>
diff --git a/files/ja/glossary/navigation_directive/index.html b/files/ja/glossary/navigation_directive/index.html
index dee9fa9d4c..12f4755214 100644
--- a/files/ja/glossary/navigation_directive/index.html
+++ b/files/ja/glossary/navigation_directive/index.html
@@ -35,7 +35,7 @@ translation_of: Glossary/Navigation_directive
 </ul>
 </div>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li><a href="/ja/docs/Glossary">用語集</a>
   <ol>
diff --git a/files/ja/glossary/null/index.html b/files/ja/glossary/null/index.html
index b30a109f76..947770c90b 100644
--- a/files/ja/glossary/null/index.html
+++ b/files/ja/glossary/null/index.html
@@ -14,7 +14,7 @@ translation_of: Glossary/Null
 
 <pre class="brush: js notranslate">typeof null === 'object' // true</pre>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ul>
  <li><strong><a href="/ja/docs/Glossary">用語集</a></strong>
 
diff --git a/files/ja/glossary/number/index.html b/files/ja/glossary/number/index.html
index b8a0f46148..c05c75d94c 100644
--- a/files/ja/glossary/number/index.html
+++ b/files/ja/glossary/number/index.html
@@ -27,7 +27,7 @@ translation_of: Glossary/Number
  <li>JavaScript のグローバルオブジェクト {{jsxref("Number")}}</li>
 </ul>
 
-<section id="Quick_Links">
+<section id="Quick_links">
 <ul>
  <li><a href="/ja/docs/Glossary">MDN 用語集</a>
 
diff --git a/files/ja/glossary/php/index.html b/files/ja/glossary/php/index.html
index fca5f317c4..e63281bdb2 100644
--- a/files/ja/glossary/php/index.html
+++ b/files/ja/glossary/php/index.html
@@ -46,7 +46,7 @@ translation_of: Glossary/PHP
  echo $email;
 ?&gt;</pre>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li><a href="http://php.net/">公式ウェブサイト</a></li>
  <li>Wikipedia 上の {{Interwiki("wikipedia", "PHP")}}</li>
diff --git a/files/ja/glossary/pop/index.html b/files/ja/glossary/pop/index.html
index dbc645592e..9e22ae74e1 100644
--- a/files/ja/glossary/pop/index.html
+++ b/files/ja/glossary/pop/index.html
@@ -12,7 +12,7 @@ translation_of: Glossary/POP
 
 <p>メールクライアントは通常、サーバーからすべてのメッセージを受信し、すべてのメッセージを削除します。 しかし、POP3 はサーバーにメッセージのコピーを残すことができます。現在、ほぼすべてのメールサーバーとクライアントは POP3 に対応しています。</p>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ul>
  <li>ウィキペディア上の {{Interwiki("wikipedia", "Post Office Protocol", "POP")}}</li>
  <li><a href="https://tools.ietf.org/html/rfc1734">RFC 1734</a> (POP3 認証機構の仕様)</li>
diff --git a/files/ja/glossary/primitive/index.html b/files/ja/glossary/primitive/index.html
index 9d5601efb7..8984a59342 100644
--- a/files/ja/glossary/primitive/index.html
+++ b/files/ja/glossary/primitive/index.html
@@ -106,7 +106,7 @@ console.log(foo);   // 5
  <li>Wikipedia の {{Interwiki("wikipedia", "プリミティブ型")}} の記事</li>
 </ul>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li><a href="/ja/docs/Glossary">用語集</a>
 
diff --git a/files/ja/glossary/public-key_cryptography/index.html b/files/ja/glossary/public-key_cryptography/index.html
index c07fd6eff7..6f56845f36 100644
--- a/files/ja/glossary/public-key_cryptography/index.html
+++ b/files/ja/glossary/public-key_cryptography/index.html
@@ -21,7 +21,7 @@ translation_of: Glossary/Public-key_cryptography
 
 <p>よく使われる公開鍵暗号システムには、 RSA (署名と暗号化の両方), DSA (署名用) Diffie-Hellman (キーの承認用) などがあります。</p>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ul>
  <li><a href="/ja/docs/Glossary">MDN 用語集</a>
 
diff --git a/files/ja/glossary/python/index.html b/files/ja/glossary/python/index.html
index 463f70a1e0..e4f1c2705c 100644
--- a/files/ja/glossary/python/index.html
+++ b/files/ja/glossary/python/index.html
@@ -16,7 +16,7 @@ translation_of: Glossary/Python
 
 <p>Python は OSI に承認されたオープンソースライセンスのもとで開発され、商用を含めて無料で利用や配布をすることができます。 Phython のライセンスは <a href="https://www.python.org/psf">Python Software Foundation</a> が管理しています。</p>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li>Learn more
   <ol>
diff --git a/files/ja/glossary/reporting_directive/index.html b/files/ja/glossary/reporting_directive/index.html
index 53016c2dc2..b99c3f66d7 100644
--- a/files/ja/glossary/reporting_directive/index.html
+++ b/files/ja/glossary/reporting_directive/index.html
@@ -14,7 +14,7 @@ translation_of: Glossary/Reporting_directive
 
 <p>完全な一覧については<a href="/ja/docs/Web/HTTP/Headers/Content-Security-Policy#Reporting_directives">報告ディレクティブ</a>を参照してください。</p>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li><a href="/ja/docs/Glossary">用語集</a>
 
diff --git a/files/ja/glossary/response_header/index.html b/files/ja/glossary/response_header/index.html
index ea7ab0a5e9..9ebbff20d8 100644
--- a/files/ja/glossary/response_header/index.html
+++ b/files/ja/glossary/response_header/index.html
@@ -30,7 +30,7 @@ X-Cache-Info: not cacheable; meta data too large
 X-kuma-revision: 1085259
 x-frame-options: DENY</pre>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li>Learn more
   <ol>
diff --git a/files/ja/glossary/rng/index.html b/files/ja/glossary/rng/index.html
index 7e9ab60041..b76c3aa1a5 100644
--- a/files/ja/glossary/rng/index.html
+++ b/files/ja/glossary/rng/index.html
@@ -29,7 +29,7 @@ translation_of: Glossary/RNG
  <li>{{domxref("Crypto.getRandomValues()")}}: 暗号学的に安全な数値を提供するためのものです。</li>
 </ul>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ul>
  <li>{{domxref("RandomSource")}}</li>
  <li>{{jsxref("Math.random()")}}</li>
diff --git a/files/ja/glossary/rtl/index.html b/files/ja/glossary/rtl/index.html
index 984c7c1b02..9a56edad73 100644
--- a/files/ja/glossary/rtl/index.html
+++ b/files/ja/glossary/rtl/index.html
@@ -11,7 +11,7 @@ translation_of: Glossary/rtl
 
 <p>RTL とは対照的に、LTR (Left To Right, 左書き) は、英語 (<code>en</code>, <code>en-US</code>, <code>en-GB</code>, など)、スペイン語 (<code>es</code>)、フランス語 (<code>fr</code>) などの他の言語で使用されます。</p>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ul>
  <li><a href="/ja/docs/Glossary">MDN Web Docs 用語集</a>
 
diff --git a/files/ja/glossary/rtsp/index.html b/files/ja/glossary/rtsp/index.html
index 5602756b37..34fb63db06 100644
--- a/files/ja/glossary/rtsp/index.html
+++ b/files/ja/glossary/rtsp/index.html
@@ -20,7 +20,7 @@ translation_of: Glossary/RTSP
  <li><a href="https://tools.ietf.org/html/rfc7826">RFC 7826</a> (このプロトコルの動作を詳細に定義した文書の一つ)</li>
 </ul>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ul>
  <li><a href="/ja/docs/Glossary">MDN Web Docs 用語集</a>
 
diff --git a/files/ja/glossary/same-origin_policy/index.html b/files/ja/glossary/same-origin_policy/index.html
index b32de8dbfd..fc1990bcc6 100644
--- a/files/ja/glossary/same-origin_policy/index.html
+++ b/files/ja/glossary/same-origin_policy/index.html
@@ -10,7 +10,7 @@ translation_of: Glossary/Same-origin_policy
 ---
 <p><span class="seoSummary"><strong>同一オリジンポリシー</strong>は重要なセキュリティの仕組みであり、ある{{Glossary("origin", "オリジン")}}から読み込まれた文書やスクリプトが、どのように他のオリジンからのリソースと対話することができるかを制限するものです。</span>悪意ある行動を起こしかねないリソースを分離し、攻撃の可能性を縮小するのに役立ちます。</p>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ul>
  <li><a href="/ja/docs/Glossary">MDN Web Docs 用語集</a>:
 
diff --git a/files/ja/glossary/scroll_container/index.html b/files/ja/glossary/scroll_container/index.html
index 0a14dc52dd..a7cf59a79f 100644
--- a/files/ja/glossary/scroll_container/index.html
+++ b/files/ja/glossary/scroll_container/index.html
@@ -10,7 +10,7 @@ translation_of: Glossary/Scroll_container
 
 <p>スクロールコンテナーによって、ユーザーは領域をあふれて表示から切り取られ非表示になる部分をスクロールさせることができます。スクロールコンテナーの見える部分は、{{glossary("Scrollport", "スクロールポート")}}と呼ばれます。</p>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ul>
  <li><a href="/ja/docs/Glossary">MDN Web Docs 用語集</a>:
 
diff --git a/files/ja/glossary/scrollport/index.html b/files/ja/glossary/scrollport/index.html
index 5312164657..f7b81d7c7c 100644
--- a/files/ja/glossary/scrollport/index.html
+++ b/files/ja/glossary/scrollport/index.html
@@ -10,7 +10,7 @@ translation_of: Glossary/Scrollport
 ---
 <p><ruby><strong>スクロールポート</strong><rp> (</rp><rt>scrollport</rt><rp>) </rp></ruby>は、文書の{{glossary("Scroll container", "スクロールコンテナー")}}の視覚的なビューポートです。スクロールコンテナーはコンテナーに <code>overflow: scroll</code> を適用するか、 <code>overflow: auto</code> であふれるほどの量のコンテンツがあるときに生成されます。スクロールポートはコンテナーのパディングボックスと一致し、ボックスとして見ることができるコンテンツがスクロールすることを表します。</p>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ul>
  <li><a href="/ja/docs/Glossary">MDN Web Docs 用語集</a>:
   <ul>
diff --git a/files/ja/glossary/semantics/index.html b/files/ja/glossary/semantics/index.html
index 70231ee848..6c37d8cc9a 100644
--- a/files/ja/glossary/semantics/index.html
+++ b/files/ja/glossary/semantics/index.html
@@ -77,7 +77,7 @@ translation_of: Glossary/Semantics
  <li>Wikipedia 上の {{interwiki("wikipedia", "意味論#コンピュータ科学", "コンピュータ科学におけるセマンティクスの意味")}}</li>
 </ul>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ul>
  <li><a href="/ja/docs/Glossary">MDN 用語集</a>
 
diff --git a/files/ja/glossary/simd/index.html b/files/ja/glossary/simd/index.html
index 927f59a073..58c01d9fdb 100644
--- a/files/ja/glossary/simd/index.html
+++ b/files/ja/glossary/simd/index.html
@@ -12,7 +12,7 @@ translation_of: Glossary/SIMD
 
 <p>処理やデータ集合に並列処理を使わない逐次的アーキテクチャの {{Glossary("SISD")}} についても参照ください。</p>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li>一般知識
   <ol>
diff --git a/files/ja/glossary/sld/index.html b/files/ja/glossary/sld/index.html
index 65fb5eace4..b2c008bed4 100644
--- a/files/ja/glossary/sld/index.html
+++ b/files/ja/glossary/sld/index.html
@@ -16,7 +16,7 @@ translation_of: Glossary/SLD
 
 <p>もう一つの例として、 <code>developer.mozilla.org</code> では、 <code>developer</code> サブドメインが、 Mozilla ウェブサイトの開発者向け (developer) の章を含むサブドメインを指定するのに使われています。</p>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li>Wikipedia articles
   <ol>
diff --git a/files/ja/glossary/smtp/index.html b/files/ja/glossary/smtp/index.html
index 07e25051e1..e7ce6f0d37 100644
--- a/files/ja/glossary/smtp/index.html
+++ b/files/ja/glossary/smtp/index.html
@@ -13,7 +13,7 @@ translation_of: Glossary/SMTP
 
 <p>このプロトコルは比較的単純です。最も複雑な部分は、様々な認証のメカニズム (<a class="external" href="http://en.wikipedia.org/wiki/Generic_Security_Services_Application_Program_Interface"><abbr title="Generic Security Services Application Program Interface">GSSAPI</abbr></a>、<a class="external" href="http://en.wikipedia.org/wiki/CRAM-MD5"><abbr title="challenge-response authentication mechanism">CRAM-MD5</abbr></a>、<a class="external" href="http://ja.wikipedia.org/wiki/NTLM"><abbr title="NT LAN Manager">NTLM</abbr></a>、MSN、AUTH LOGIN、AUTH PLAIN、他) をサポートすること、エラーレスポンスを取り扱うこと、そして認証メカニズムが失敗した時 (例、サーバーがあるメカニズムのサポートを要求するが、実際にはサポートしていない) にフォールバックを行うことです。</p>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li><a href="/ja/docs/Glossary">用語集</a>
 
diff --git a/files/ja/glossary/spa/index.html b/files/ja/glossary/spa/index.html
index 8104b00051..5606ba8dc0 100644
--- a/files/ja/glossary/spa/index.html
+++ b/files/ja/glossary/spa/index.html
@@ -25,7 +25,7 @@ translation_of: Glossary/SPA
  <li><a href="https://vuejs.org/">Vue.JS</a></li>
 </ul>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li>Wikipedia の記事
   <ol>
diff --git a/files/ja/glossary/ssl/index.html b/files/ja/glossary/ssl/index.html
index cce9581963..9b80b31eba 100644
--- a/files/ja/glossary/ssl/index.html
+++ b/files/ja/glossary/ssl/index.html
@@ -15,7 +15,7 @@ original_slug: Glossary/SSL_Glossary
 ---
 <p class="seoSummary">SSL (Secure Sockets Layer) は古いセキュリティ標準技術で、サーバーとクライアントの間に暗号化されたネットワークリンクを作成し、そこを通過するデータが非公開で安全であることを保証するためのものでした。SSL の現在のバージョンは 3.0 で、1999年に Netscape 社がリリースしたものですが、{{Glossary("TLS", "TLS (Transport Layer Security)")}} プロトコルに置き換えられました。</p>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li>関連情報
   <ol>
diff --git a/files/ja/glossary/static_method/index.html b/files/ja/glossary/static_method/index.html
index a2fb2df971..b5f0dc4213 100644
--- a/files/ja/glossary/static_method/index.html
+++ b/files/ja/glossary/static_method/index.html
@@ -32,7 +32,7 @@ translation_of: Glossary/Static_method
 
 myNotification.close();</pre>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li>一般知識
   <ol>
diff --git a/files/ja/glossary/static_typing/index.html b/files/ja/glossary/static_typing/index.html
new file mode 100644
index 0000000000..a12e8c98bd
--- /dev/null
+++ b/files/ja/glossary/static_typing/index.html
@@ -0,0 +1,18 @@
+---
+title: Static typing（静的型付け）
+slug: Glossary/Static_typing
+tags:
+  - CodingScripting
+  - Glossary
+  - Type
+translation_of: Glossary/Static_typing
+---
+<p><strong>静的型付け</strong>言語（例えば、Java, C, または C++ ）とは、コンパイル時に変数の型がわかる言語です。静的型付け言語の多くは、プログラマが明示的に型を指定しなければなりませんが、OCamlのように型推論によってプログラマが変数の型を指定しなくてもよい場合もあります。</p>
+
+<h2 id="Learn_more">詳細はこちら</h2>
+
+<h3 id="General_knowledge">一般的な知識</h3>
+
+<ul>
+ <li>{{Interwiki("wikipedia", "Type system")}} on Wikipedia</li>
+</ul>
diff --git a/files/ja/glossary/strict_mode/index.html b/files/ja/glossary/strict_mode/index.html
index 1c42c36f72..507089d112 100644
--- a/files/ja/glossary/strict_mode/index.html
+++ b/files/ja/glossary/strict_mode/index.html
@@ -11,7 +11,7 @@ translation_of: Glossary/strict_mode
 
 <p>スクリプト全体を厳格モードにする場合は、他の文の前に <code>"use strict";</code> 文を含めることで呼び出すことができます。</p>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li><a href="/ja/docs/Web/JavaScript/Reference/Strict_mode">厳格モード</a></li>
  <li><a href="/ja/docs/Web/JavaScript/Reference/Strict_mode/Transitioning_to_strict_mode">厳格モードへの移行</a></li>
diff --git a/files/ja/glossary/symbol/index.html b/files/ja/glossary/symbol/index.html
index 2f124346a1..3e79791c59 100644
--- a/files/ja/glossary/symbol/index.html
+++ b/files/ja/glossary/symbol/index.html
@@ -94,7 +94,7 @@ alert(_Sym.description); // Sym</pre>
  <li>{{jsxref("Object.getOwnPropertySymbols()")}}</li>
 </ul>
 
-<section id="Quick_Links">
+<section id="Quick_links">
 <ul>
  <li><a href="/ja/docs/Glossary">MDN 用語集</a>
 
diff --git a/files/ja/glossary/symmetric-key_cryptography/index.html b/files/ja/glossary/symmetric-key_cryptography/index.html
index cf1c615d08..d940480562 100644
--- a/files/ja/glossary/symmetric-key_cryptography/index.html
+++ b/files/ja/glossary/symmetric-key_cryptography/index.html
@@ -20,7 +20,7 @@ translation_of: Glossary/Symmetric-key_cryptography
 
 <p>現在使用されている共通鍵暗号アルゴリズムの多くはブロック暗号です。すなわち、データをブロック単位で暗号化します。それぞれのブロック長は固定長であり、アルゴリズムによって決まります。例えば、 {{Glossary("AES")}} は16バイトのブロックを使用します。ブロック暗号は常に<em>{{Glossary("Block cipher mode of operation", "モード")}}</em>とともに使用され、ブロック長よりも長いメッセージを安全に暗号化する方法を指定しています。例えば、 AES は cipher であるのに対し、 CTR, CBC, GCM はすべてのモードで使用されます。適切ではないモードを使用したり、モードを誤って使用したりした場合は、基礎となる暗号化によって提供されるセキュリティが完全に損なわれることがあります。</p>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ul>
  <li><a href="/ja/docs/Glossary">MDN Web Docs 用語集</a>
 
diff --git a/files/ja/glossary/tcp/index.html b/files/ja/glossary/tcp/index.html
index 794087a55b..f56a9624f3 100644
--- a/files/ja/glossary/tcp/index.html
+++ b/files/ja/glossary/tcp/index.html
@@ -15,7 +15,7 @@ translation_of: Glossary/TCP
 
 <p>TCP の役割は、パケットがエラーなく信頼性高く配信されることを保証することです。 TCP には輻輳制御があり、初期要件が小さいものから、コンピューター、サーバー、ネットワークが対応している帯域の水準まで大きさが拡大します。</p>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li><a href="/ja/docs/Glossary">用語集</a>
   <ol>
diff --git a/files/ja/glossary/thread/index.html b/files/ja/glossary/thread/index.html
index 0f00e80ab5..8d847273aa 100644
--- a/files/ja/glossary/thread/index.html
+++ b/files/ja/glossary/thread/index.html
@@ -18,7 +18,7 @@ translation_of: Glossary/Thread
 
 <p>全体的に見て、オペレーティングシステム内のこれらのスレッドは非常に有用であることがわかります。これらのスレッドは、コンテキストの切り替え時間を最小限に抑え、より効率的な通信を可能にし、マルチプロセッサアーキテクチャのさらなる利用を可能にします。</p>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li>関連情報
   <ol>
diff --git a/files/ja/glossary/tls/index.html b/files/ja/glossary/tls/index.html
index a1691b3135..4a0bc4c55f 100644
--- a/files/ja/glossary/tls/index.html
+++ b/files/ja/glossary/tls/index.html
@@ -17,7 +17,7 @@ translation_of: Glossary/TLS
 <p><strong>注</strong>: TLS 1.0 と 1.1 への対応は、2020年の初頭にすべての主要なブラウザーから削除される予定です。今後はウェブサーバーが TLS 1.2 や 1.3 に対応していることを確認する必要があります。 Firefox はバージョン74時点で、古いバージョンの TLS を使用しているサーバーに接続する場合に <a href="https://support.mozilla.org/en-US/kb/secure-connection-failed-firefox-did-not-connect">Secure Connection Failed</a> エラーを返すようになる予定です ({{bug(1606734)}})。</p>
 </div>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li>仕様書
   <ol>
diff --git a/files/ja/glossary/type_coercion/index.html b/files/ja/glossary/type_coercion/index.html
index 43d3788a49..bacbc44aaf 100644
--- a/files/ja/glossary/type_coercion/index.html
+++ b/files/ja/glossary/type_coercion/index.html
@@ -25,7 +25,7 @@ console.log(sum);</pre>
 
 <pre class="brush: js">sum = Number(value1) + value2;</pre>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li><a href="/ja/docs/Glossary">用語集</a>
 
diff --git a/files/ja/glossary/type_conversion/index.html b/files/ja/glossary/type_conversion/index.html
index e43a936f9d..8116cba723 100644
--- a/files/ja/glossary/type_conversion/index.html
+++ b/files/ja/glossary/type_conversion/index.html
@@ -13,7 +13,7 @@ translation_of: Glossary/Type_Conversion
 ---
 <p><ruby>型変換<rp> (</rp><rt>Type conversion</rt><rp>)</rp></ruby> (または<ruby>型キャスト<rp> (</rp><rt>typecasting</rt><rp>) </rp></ruby>) は、データをあるデータ型から別なデータ型に変換することを意味します。<em>暗黙の型変換</em>は、コンパイラーが自動的にデータ型を割り当てるものの、その場でソースコードで<em>明示的に</em>型変換が必要な場合もあります。例えば、 <code>5+2.0</code> という命令が与えられた場合、浮動小数点の <code>2.0</code> は暗黙的に整数に型キャストされますが、 <code>Number("0x11")</code> という命令が与えられた場合、 "0x11" の文字列は明示的に数値の17として型キャストされます。</p>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li><a href="/ja/docs/Glossary">用語集</a>
   <ol>
diff --git a/files/ja/glossary/user_agent/index.html b/files/ja/glossary/user_agent/index.html
index 944694e0a4..74ecbff310 100644
--- a/files/ja/glossary/user_agent/index.html
+++ b/files/ja/glossary/user_agent/index.html
@@ -39,7 +39,7 @@ translation_of: Glossary/User_agent
  <li>{{RFC(2616, "14.43")}}: The <code>User-Agent</code> header</li>
 </ul>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li><a href="/ja/docs/Glossary">MDN Web Docs 用語集</a>
 
diff --git a/files/ja/glossary/utf-8/index.html b/files/ja/glossary/utf-8/index.html
index ad01aa4731..112c3da3c1 100644
--- a/files/ja/glossary/utf-8/index.html
+++ b/files/ja/glossary/utf-8/index.html
@@ -9,15 +9,15 @@ tags:
   - Utf-8
 translation_of: Glossary/UTF-8
 ---
-<p>UTF-8 (UCS Transformation Format 8) は World Wide Web において最も一般的な{{Glossary("Character encoding", "文字エンコーディング")}}です。1文字あたり 1～4 バイトで表します。UTF-8 は {{Glossary("ASCII")}} に対して後方互換性を持っており、すべての標準 Unicode 文字を表現することができます。</p>
+<p>UTF-8 (UCS Transformation Format 8) は World Wide Web において最も一般的な{{Glossary("Character encoding", "文字エンコーディング")}}です。 1 文字あたり 1～4 バイトで表します。UTF-8 は {{Glossary("ASCII")}} に対して後方互換性を持っており、すべての標準 Unicode 文字を表現することができます。</p>
 
-<p>UTF-8 の最初の 128文字は、ASCII の 128文字（0～127）に正確に対応しており、つまり既存の ASCII 文字列はすでに UTF-8 として有効です。他の文字は 2～4 バイトを使用します。それぞれのバイトにはエンコードのためにいくつかのビットが予約されています。非 ASCII 文字は格納するために 2 バイト以上を必要とするため、バイト列が分割され再結合されない場合に破損する恐れがあります。</p>
+<p>UTF-8 の最初の 128 文字は、ASCII の 128文字 (0～127) に正確に対応しており、つまり既存の ASCII 文字列はすでに UTF-8 として有効です。他の文字は 2～4 バイトを使用します。それぞれのバイトにはエンコードのためにいくつかのビットが予約されています。非 ASCII 文字は格納するために 2 バイト以上を必要とするため、バイト列が分割され再結合されない場合に破損する恐れがあります。</p>
 
-<h2 id="Learn_more" name="Learn_more" style="line-height: 18px; font-size: 1.28571rem;"><strong style="font-size: 1.71428571428571rem;">関連情報</strong></h2>
+<h2 id="Learn_more">関連情報</h2>
 
-<h3 id="General_knowledge" name="General_knowledge"><strong>一般知識</strong></h3>
+<h3 id="General_knowledge">一般知識</h3>
 
 <ul>
  <li>ウィキペディアの {{Interwiki("wikipedia", "UTF-8")}}</li>
- <li><a href="http://www.unicode.org/faq/utf_bom.html#UTF8">FAQ about UTF-8 on Unicode website</a></li>
+ <li><a href="https://www.unicode.org/faq/utf_bom.html#UTF8">FAQ about UTF-8 on Unicode website</a></li>
 </ul>
diff --git a/files/ja/glossary/web_performance/index.html b/files/ja/glossary/web_performance/index.html
index bed6c986b2..08fcbf6fd6 100644
--- a/files/ja/glossary/web_performance/index.html
+++ b/files/ja/glossary/web_performance/index.html
@@ -20,7 +20,7 @@ translation_of: Glossary/Web_performance
  <li><a href="/ja/docs/Glossary/Perceived_performance">知覚パフォーマンス</a></li>
 </ul>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ul>
  <li>
   <details open><summary></summary> {{ListSubpages("/ja/docs/Glossary")}}</details>
diff --git a/files/ja/glossary/web_server/index.html b/files/ja/glossary/web_server/index.html
index bc9269cfcd..699b5c7300 100644
--- a/files/ja/glossary/web_server/index.html
+++ b/files/ja/glossary/web_server/index.html
@@ -8,7 +8,7 @@ translation_of: Glossary/Web_server
 ---
 <p>ウェブサーバーは、ユーザーにサービスを提供するハードウェアサーバー上で動作するソフトウェアのことで、通常はクライアントから参照されます。一方、サーバーは、一般的にデータセンターと呼ばれるコンピューターであふれた部屋にあるハードウェアの一部です。</p>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ul>
  <li><a href="/ja/docs/Learn/Common_questions/What_is_a_web_server">サーバーの紹介</a></li>
  <li>Wikipedia の {{interwiki("wikipedia", "サーバ")}}</li>
diff --git a/files/ja/glossary/webassembly/index.html b/files/ja/glossary/webassembly/index.html
index 0ab345779e..f53eb382ea 100644
--- a/files/ja/glossary/webassembly/index.html
+++ b/files/ja/glossary/webassembly/index.html
@@ -8,7 +8,7 @@ translation_of: Glossary/WebAssembly
 ---
 <p><strong>WebAssembly</strong> (<em>Wasm</em>) は、オープン{{Glossary("binary", "バイナリ")}}プログラミング言語です。モダンウェブ{{Glossary("Browser", "ブラウザ")}}で動作します。パフォーマンスを高め、かつ/もしくは、ウェブページのための新しい機能を提供します。</p>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li>詳細
   <ol>
diff --git a/files/ja/glossary/whitespace/index.html b/files/ja/glossary/whitespace/index.html
index b3400336fa..7b3baf85b9 100644
--- a/files/ja/glossary/whitespace/index.html
+++ b/files/ja/glossary/whitespace/index.html
@@ -19,7 +19,7 @@ translation_of: Glossary/Whitespace
 
 <p><a href="https://www.ecma-international.org/ecma-262/6.0/#sec-white-space">ECMAScript® 2015 言語仕様書</a>では、いくつかの Unicode コードポイントをホワイトスペースとして定めています。 U+0009 CHARACTER TABULATION &lt;TAB&gt;, U+000B LINE TABULATION &lt;VT&gt;, U+000C FORM FEED &lt;FF&gt;, U+0020 SPACE &lt;SP&gt;, U+00A0 NO-BREAK SPACE &lt;NBSP&gt;, U+FEFF ZERO WIDTH NO-BREAK SPACE &lt;ZWNBSP&gt; および その他のカテゴリ “Zs” Unicode の他の “Separator, space” コードポイント &lt;USP&gt; に属するすべての文字です。これらの文字はふつう、コードの機能性には不要なものです。</p>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li>仕様書
   <ol>
diff --git a/files/ja/glossary/wrapper/index.html b/files/ja/glossary/wrapper/index.html
index 3b7ab758af..13e1374c0a 100644
--- a/files/ja/glossary/wrapper/index.html
+++ b/files/ja/glossary/wrapper/index.html
@@ -18,7 +18,7 @@ translation_of: Glossary/Wrapper
 
 <p>Wikipedia の {{Interwiki("wikipedia", "Wrapper function")}}</p>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li><a href="/ja/docs/Glossary">MDN Web Docs 用語集</a>
 
diff --git a/files/ja/learn/css/building_blocks/cascade_and_inheritance/index.html b/files/ja/learn/css/building_blocks/cascade_and_inheritance/index.html
index 39fb4bce37..324308ee1f 100644
--- a/files/ja/learn/css/building_blocks/cascade_and_inheritance/index.html
+++ b/files/ja/learn/css/building_blocks/cascade_and_inheritance/index.html
@@ -112,7 +112,7 @@ translation_of: Learn/CSS/Building_blocks/Cascade_and_inheritance
 </div>
 
 <div class="blockIndicator note">
-<p><strong>注</strong>: それらの動作の詳細については <a href="/ja/docs/Web/CSS/Cascade">CSS カスケード入門</a>の <a href="/ja/docs/Web/CSS/Cascade#Origin_of_CSS_declarations">CSS 宣言のオリジン</a>を参照してください。</p>
+<p><strong>注</strong>: それらの動作の詳細については <a href="/ja/docs/Web/CSS/Cascade">CSS カスケード入門</a>の <a href="/ja/docs/Web/CSS/Cascade#css_%E5%AE%A3%E8%A8%80%E3%81%AE%E3%82%AA%E3%83%AA%E3%82%B8%E3%83%B3">CSS 宣言のオリジン</a>を参照してください。</p>
 </div>
 
 <p>リンクのリストを見て、ユニバーサル値 <em>(universal values)</em> がどのように機能するかを調べることができます。以下のライブサンプルでは、CSS に変更を加えて何が起こるかを確認できます。HTML と CSS を理解するには、実際にコードを試すのが最善の方法です。</p>
diff --git a/files/ja/learn/css/howto/create_fancy_boxes/index.html b/files/ja/learn/css/howto/create_fancy_boxes/index.html
index 74d0b3b379..1df6bf3bdc 100644
--- a/files/ja/learn/css/howto/create_fancy_boxes/index.html
+++ b/files/ja/learn/css/howto/create_fancy_boxes/index.html
@@ -71,12 +71,12 @@ translation_of: Learn/CSS/Howto/create_fancy_boxes
 
 <h2 id="Backgrounds" name="Backgrounds">Backgrounds</h2>
 
-<p>装飾的なボックスについて話すとき、それを扱うためのコアとなるプロパティは <a href="/ja/docs/Web/CSS/CSS_Background_and_Borders">background-* プロパティ</a>です。 背景をいじり始めると、CSS ボックスはあなたが満たすための空白のキャンバスになります。</p>
+<p>装飾的なボックスについて話すとき、それを扱うためのコアとなるプロパティは <a href="/ja/docs/Web/CSS/CSS_Backgrounds_and_Borders">background-* プロパティ</a>です。 背景をいじり始めると、CSS ボックスはあなたが満たすための空白のキャンバスになります。</p>
 
 <p>いくつかの実用的な例に進む前に、背景について知っておくべきことが2つあるので、少し後退しましょう。</p>
 
 <ul>
- <li>一つのボックスに<a href="/ja/docs/Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds">複数の背景</a>を設定することが可能です。 それらは層のように互いの上に積み重ねられています。</li>
+ <li>一つのボックスに<a href="/ja/docs/Web/CSS/CSS_Backgrounds_and_Borders/Using_CSS_multiple_backgrounds">複数の背景</a>を設定することが可能です。 それらは層のように互いの上に積み重ねられています。</li>
  <li>背景は単色や画像のどちらでもかまいません。 単色は常に表面全体を塗りつぶしますが、画像は拡大縮小して配置することができます。</li>
 </ul>
 
diff --git a/files/ja/learn/forms/form_validation/index.html b/files/ja/learn/forms/form_validation/index.html
index 156709f76a..c167a03576 100644
--- a/files/ja/learn/forms/form_validation/index.html
+++ b/files/ja/learn/forms/form_validation/index.html
@@ -428,7 +428,7 @@ input:focus:invalid {
  <li>    メッセージはブラウザーのロケールに依存しており、ある言語のページでエラーメッセージが別の言語で表示されることがあり、これは下記の Firefox スクリーンショットで見ることができます。</li>
 </ul>
 
-<p><img alt="Example of an error message with Firefox in French on an English page" src="https://wiki.developer.mozilla.org/files/4329/error-firefox-win7.png" style="height: 97px; width: 228px;"></p>
+<p><img alt="Example of an error message with Firefox in French on an English page" src="/files/4329/error-firefox-win7.png" style="height: 97px; width: 228px;"></p>
 
 <p>これらのメッセージの外見やテキストを変更するには、<a href="/ja/docs/Web/API/Constraint_validation" rel="external">制約検証 API</a> の最も一般的なユースケースです。この使用法を例で詳しく見てみましょう。</p>
 
diff --git a/files/ja/mdn/contribute/howto/create_and_edit_pages/index.html b/files/ja/mdn/contribute/howto/create_and_edit_pages/index.html
index a338b31625..7a0cf12f4c 100644
--- a/files/ja/mdn/contribute/howto/create_and_edit_pages/index.html
+++ b/files/ja/mdn/contribute/howto/create_and_edit_pages/index.html
@@ -111,7 +111,7 @@ translation_of: MDN/Contribute/Howto/Create_and_edit_pages
 
 <p><em>別のページからリンクせずに新しいページを作成するには</em>、ブラウザの URL フィールドに一意のページ名を入力します。たとえば、次のように入力します。</p>
 
-<pre class="language-html notranslate">https://wiki.developer.mozilla.org/en-US/docs/FooBar</pre>
+<pre class="language-html notranslate">https://developer.mozilla.org/en-US/docs/FooBar</pre>
 
 <p>MDN は "FooBar" というタイトルの新しいページを作成し、エディターを開いて新しいページにコンテンツを追加することができます。エディターモードの使用方法については、この記事の「<a href="#Editing_an_existing_page">既存のページを編集する</a>」セクションを参照してください。</p>
 
@@ -122,7 +122,7 @@ translation_of: MDN/Contribute/Howto/Create_and_edit_pages
  <li>ブラウザーの URL 欄に下記のように入力する</li>
 </ol>
 
-<pre class="language-html notranslate">https://wiki.developer.mozilla.org/en-US/docs/new</pre>
+<pre class="language-html notranslate">https://developer.mozilla.org/en-US/docs/new</pre>
 
 <p>MDN は新しいページを作成し、エディターを開いて新しいページにコンテンツを追加することができます。エディターモードの使用方法については、この記事の「<a href="#Editing_an_existing_page">既存のページを編集する</a>」セクションを参照してください。</p>
 
diff --git a/files/ja/mdn/contribute/howto/tag/index.html b/files/ja/mdn/contribute/howto/tag/index.html
index 2f8c6d0811..14c6353ddc 100644
--- a/files/ja/mdn/contribute/howto/tag/index.html
+++ b/files/ja/mdn/contribute/howto/tag/index.html
@@ -211,7 +211,7 @@ translation_of: MDN/Contribute/Howto/Tag
 
 <h2 id="Tagging_and_search_filters" name="Tagging_and_search_filters">タグ付けと検索フィルター</h2>
 
-<p>検索フィルターは、 MDN のページを正しくタグ付けしないと正しく動作しません。検索フィルターと検索するタグの一覧表は以下の通りです。(検索フィルターは <a href="https://wiki.developer.mozilla.org">wiki</a> (編集) サイトでのみ使用されます。読み込み専用サイトではフィルターなしの別の検索システムを使用しています。)</p>
+<p>検索フィルターは、 MDN のページを正しくタグ付けしないと正しく動作しません。検索フィルターと検索するタグの一覧表は以下の通りです。(検索フィルターは <a href="https://developer.mozilla.org">wiki</a> (編集) サイトでのみ使用されます。読み込み専用サイトではフィルターなしの別の検索システムを使用しています。)</p>
 
 <div class="blockIndicator note">
 <p><strong>注:</strong> もし「タグ名」のところに複数のタグがあった場合は、それらのタグのうち1つ以上が一致すれば検索されるという意味です。</p>
diff --git a/files/ja/mdn/contribute/localize/index.html b/files/ja/mdn/contribute/localize/index.html
index b62fbf6f67..6d17044446 100644
--- a/files/ja/mdn/contribute/localize/index.html
+++ b/files/ja/mdn/contribute/localize/index.html
@@ -30,7 +30,7 @@ translation_of: MDN/Contribute/Localize
 
 <ul>
  <li>ディスカッション: <a href="https://chat.mozilla.org/#/room/#l10n-fr:mozilla.org">Matrix (#l10n-fr channel)</a></li>
- <li>現在の貢献者: <a href="https://github.com/SphinxKnight">SphinxKnight</a>, <a href="https://github.com/tristantheb">tristantheb</a>, <a href="https://github.com/JNa0">JNa0</a>, <a href="https://github.com/nicolas-goudry">nicolas-goudry</a>, <a href="https://github.com/LEMIBANDDEXARI">LEMIBANDDEXARI</a></li>
+ <li>現在の貢献者: <a href="https://github.com/SphinxKnight">SphinxKnight</a>, <a href="https://github.com/tristantheb">tristantheb</a>, <a href="https://github.com/audrasjb">Jb Audras</a></li>
 </ul>
 
 <h3 id="Japanese_ja">日本語 (ja)</h3>
diff --git a/files/ja/mdn/guidelines/css_style_guide/index.html b/files/ja/mdn/guidelines/css_style_guide/index.html
index 46c2646719..7501925e4a 100644
--- a/files/ja/mdn/guidelines/css_style_guide/index.html
+++ b/files/ja/mdn/guidelines/css_style_guide/index.html
@@ -20,7 +20,7 @@ translation_of: MDN/Guidelines/CSS_style_guide
 <p>これらのスタイルは、記事内容のスタイリング中に発生する最も一般的な状況をカバーするように開発されているので、可能な限り使用可能なクラスを使用するようにしてください。標準的なコンテンツのルックアンドフィールからの分岐が多すぎると、一貫性や可読性を損ないます。あなたのページが絶対に特別なカスタムスタイリングを必要としていると感じたら、まず <a href="https://discourse.mozilla.org/c/mdn">MDN Discourse フォーラム</a>でその話題を切り出す必要があります。</p>
 
 <div class="blockIndicator note">
-<p><strong>注</strong>: 特定のクラスが MDN で使用されている場所を検索する場合は、<code>https://developer.mozilla.org/ja/search?locale=en-US&amp;css_classnames=<var>desired-css-class</var></code> という形式の URL を使用して検索できます。たとえば、 Google のカードグリッドレイアウトを使用するページを見つけるには、URL <a href="/ja/search?locale=*&amp;css_classnames=card-grid">https://wiki.developer.mozilla.org/ja/search?locale=*&amp;css_classnames=card-grid</a> を試してください。</p>
+<p><strong>注</strong>: 特定のクラスが MDN で使用されている場所を検索する場合は、<code>https://developer.mozilla.org/ja/search?locale=en-US&amp;css_classnames=<var>desired-css-class</var></code> という形式の URL を使用して検索できます。たとえば、 Google のカードグリッドレイアウトを使用するページを見つけるには、URL <a href="/ja/search?locale=*&amp;css_classnames=card-grid">https://developer.mozilla.org/ja/search?locale=*&amp;css_classnames=card-grid</a> を試してください。</p>
 </div>
 
 <div class="blockIndicator warning">
diff --git a/files/ja/mdn/structures/code_examples/index.html b/files/ja/mdn/structures/code_examples/index.html
index 4cfd04e729..1cf5b391dd 100644
--- a/files/ja/mdn/structures/code_examples/index.html
+++ b/files/ja/mdn/structures/code_examples/index.html
@@ -1,8 +1,9 @@
 ---
-title: コード例
+title: コードサンプル
 slug: MDN/Structures/Code_examples
 tags:
   - Code
+  - Examples
   - Landing
   - Live
   - MDN Meta
@@ -14,205 +15,115 @@ translation_of: MDN/Structures/Code_examples
 ---
 <div>{{MDNSidebar}}</div>
 
-<div>{{IncludeSubnav("/ja/docs/MDN")}}</div>
+<p class="summary">MDN では、ウェブプラットフォームの機能の使い方を示すために、ページ中に数多くのコードサンプルが挿入されています。この記事では、ページにコードサンプルを追加するためのさまざまな仕組みと、どのような場合にどのような仕組みを使うべきかについて説明します。</p>
 
-<p class="summary">MDN には、Web プラットフォーム機能の使用方法を示すために、多数のコード例がページ全体に挿入されています。この記事では、コード例をページに追加する際に使用できるさまざまなメカニズムと、使用する必要があるものとそのタイミングについて説明します。</p>
+<h2 id="What_types_of_code_example_are_available">利用できるコードサンプルの種類</h2>
 
-<h2 id="どのような種類のコード例が利用できますか？">どのような種類のコード例が利用できますか？</h2>
-
-<p>There are four types of code example available on MDN:</p>
+<p>MDN には 4 種類のコードサンプルがあります。</p>
 
 <ul>
- <li>Static examples — plain code blocks, possibly with a screenshot to statically show the result of such code if it were to be run.</li>
- <li>Traditional MDN "live samples" — A macro that takes plain code blocks, dynamically puts them into a document inside an {{htmlelement("iframe")}} element, and embeds it into the page to show the code running live.</li>
- <li>GitHub "live samples" — A macro that takes a document in a GitHub repo inside the <a href="https://github.com/mdn/">mdn organization</a>, puts it inside an {{htmlelement("iframe")}} element, and embeds it into the page to show the code running live.</li>
- <li>Interactive examples — Our system for creating <a href="https://github.com/mdn/interactive-examples">live interactive examples</a> that show the code running live but also allow you to change code on the fly to see what the effect is.</li>
+ <li>静的サンプル — プレーンなコードブロックで、そのようなコードを実行した場合の結果を静的に示すスクリーンショットが付いている場合があります。</li>
+ <li>MDN の従来型「ライブサンプル」 - 単体のコードブロックを {{htmlelement("iframe")}} 要素内の文書に動的に配置し、ページに埋め込んでコードの実行をライブで表示するマクロです。</li>
+ <li>GitHub 「ライブサンプル」 —  <a href="https://github.com/mdn/">mdn 組織</a>内の GitHub リポジトリにある文書を取り込んで {{htmlelement("iframe")}} 要素の中に入れ、それをページに埋め込んでコードをライブで表示するマクロです。</li>
+ <li>インタラクティブサンプル - <a href="https://github.com/mdn/interactive-examples">ライブでインタラクティブサンプル</a>を生成するためのシステムで、コードをライブで表示するだけでなく、その場でコードを変更して効果を確認したり、結果を簡単にコピーしたりすることができます。</li>
 </ul>
 
-<p>We'll discuss each one in later sections.</p>
+<p>それぞれの機能については後のセクションで説明します。</p>
 
-<h2 id="いつそれらを使うべきですか？">いつそれらを使うべきですか？</h2>
+<h2 id="When_should_you_use_each_one">使うべき場面</h2>
 
-<p>Each type of code example has it own use cases. When should you use each one?</p>
+<p>コードサンプルの種類ごとに、それぞれの用途があります。どのような場合に使用するのでしょうか。</p>
 
 <ul>
- <li>Static examples are useful if you just need to show some code, and it isn't super important to show what the live result is. Some people just want something to copy and paste. Maybe you are just showing an intermediate step, or the source code is enough. (For example, the article is for an advanced audience, and they just need to see the code.) Also, you might be demonstrating an API feature that doesn't work well as an embedded example, which might need its own separate page to link to.</li>
- <li>Traditional live samples are useful if you want to show source code on a page, then show it running, and you’re not that bothered about it being accessible as a standalone example. This approach also has the advantage that if you are showing source code and live examples side by side, you only need to update the code once to update both. They can however be awkward to edit and get working.</li>
- <li>GitHub live samples are useful when you’ve got an existing example you want to embed, don’t want to show the source code for, and/or you want to make sure the example is available in standalone form. They have a better contribution workflow, but it does require you to know GitHub. Also because on-page code and source code are in two different places, it is easier for them to get out of sync.</li>
- <li>The new interactive examples are great as readers can modify values on the fly — this is very valuable for learning. However, they are more complex to set up than the other forms, with more limitations, and are intended for specific purposes.</li>
+ <li>静的サンプルは、単にコードを表示するだけで、実際の結果を表示することがそれほど重要でない場合に便利です。何かをコピー＆ペーストだけしたいという人もいます。中間段階を示すだけの場合や、ソースコードで十分な場合もあるでしょう。(例えば、上級者向けの記事で、コードを見てもらえればよい場合など) また、埋め込み型のサンプルではうまくいかない API 機能のデモを行っている場合もあり、その場合はリンク先として別のページが必要になるかもしれません。</li>
+ <li>従来型ライブサンプルは、ページ上にソースコードを表示し、それを実行する様子を見せたい場合で、独立したサンプルとしてアクセスできるかどうかはそれほど気にしない場合に便利です。この方法は、ソースコードとライブサンプルを並べて表示した場合、コードを一度更新するだけで両方を更新できるという利点があります。しかし、編集したり動作させたりするのが面倒なこともあります。</li>
+ <li>GitHub ライブサンプルは、既存のサンプルを埋め込んでソースコードを見せたくないときや、そのサンプルがスタンドアロンで利用できることを確認したいときなどに便利です。協力するためのワークフローはより優れていますが、 GitHub を知っている必要があります。また、ページ上のコードとソースコードが 2 つの異なる場所にあるため、同期が取れなくなることもあります。</li>
+ <li>インタラクティブサンプルは、読者がその場で値を変更できるので、学習には非常に有効です。しかし、他のフォームよりも設定が複雑で、制限も多く、特定の目的のためのものです。
+</li>
 </ul>
 
-<p>If you are not sure which one to use, you should default to traditional or GitHub live samples, depending on which one you are most comfortable with. You are also welcome to ask for advice on our <a href="https://discourse.mozilla.org/c/mdn">Discourse forum</a>.</p>
+<p>どちらを使うべきか迷った場合は、まず従来型か GitHub のライブサンプルか、使いやすい方を検討してください。<a href="/ja/docs/MDN/Contribute/Getting_started#step_4_ask_for_help">助けを求めることp</a>も歓迎します。</p>
 
-<h2 id="一般的なガイドライン">一般的なガイドライン</h2>
+<h2 id="General_guidelines">一般的なガイドライン</h2>
 
-<p>Aside from the specific system for presenting the live samples, as summarized above, there are style and content cconsiderations to keep in mind when adding or updating samples on MDN?</p>
+<p>MDN でサンプルを追加・更新する際には、上記のようなライブサンプルを表示するための具体的なシステムの他に、スタイルやコンテンツについても考慮する必要があります。</p>
 
 <ul>
- <li>When placing samples on a page, try to ensure that all of the features or options of the API or concept you're writing about are covered. At a minimum, at least the most-common options or properties should be included in examples.</li>
- <li>Precede each example with an explanation of what  the example does and why it's interesting or useful.</li>
- <li>Follow each piece of code with an explanation of what it does.</li>
- <li>When possible, break large examples into smaller pieces. For instance, the "live sample" system will automatically concatenate all your code together into one piece before running the example, so you can actually break your JavaScript, HTML, and/or CSS into smaller pieces with descriptive text after each piece if you choose to do so. This is a great way to help explain long or complicated stretches of code more clearly.</li>
- <li>Go beyond just demonstrating how each piece of the API or technology works. Consider possible real-world use cases you might try to demonstrate.</li>
+ <li>サンプルをページに掲載する際には、書かれている API や概念のすべての機能やオプションをカバーするようにしてください。最低でも、最も一般的なオプションやプロパティはサンプルに含めるべきです。</li>
+ <li>それぞれのサンプルの前で、そのサンプルが何をしているのか、なぜそれが興味深いのか、役に立つのかを説明してください。</li>
+ <li>コードのそれぞれの部分の後には、それが何をするものなのかを説明してください。</li>
+ <li>可能な限り、大きなサンプルは小さく分割してください。例えば、「ライブサンプル」システムでは、サンプルを実行する前に、すべてのコードを自動的に 1 つにまとめてくれますが、実際には、JavaScript、HTML、CSS をより細かく分割し、それぞれの部分の後に説明文を付けることができます。これは、長いコードや複雑なコードをよりわかりやすく説明するためのよい方法です。</li>
+ <li>API や技術の各部分がどのように機能するかを説明するだけではありません。実際の使用例を考慮した上で、実演してみましょう。</li>
 </ul>
 
-<h2 id="静的サンプル">静的サンプル</h2>
+<h2 id="Static_examples">静的サンプル</h2>
 
-<p>By static examples, we are talking about static code blocks that show how a feature might be used in code. These are put on a page using the <strong>PRE</strong> and <strong>Syntax Highlighter</strong> buttons on the MDN editor UI. An example result might look like this:</p>
+<p>静的サンプルでは、ある機能がコードでどのように使われるかを示す静的なコードブロックです。<a href="/ja/docs/MDN/Guidelines/CSS_style_guide#code_syntax_highlighting">コードの構文強調</a>で説明したように、 <code>&lt;pre&gt;</code> 要素を使ってページに配置します。結果の例は次のようになります。</p>
 
-<pre class="brush: js notranslate">// This is a JS example
+<pre class="brush: js">// これは JS の例です
 var test = "Hello";
 console.log(test);</pre>
 
-<div class="note">
-<p><strong>Note</strong>: For more details on adding code blocks to MDN pages, see our <a href="/en-US/docs/MDN/Contribute/Editor/Syntax_highlighting">Syntax highlighting</a> article.</p>
-</div>
-
-<p>Optionally, you might want to show a static image of the code's resulting output. For example:</p>
-
-<p><img alt="" src="https://mdn.mozillademos.org/files/15523/console-example.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p>
-
-<div class="note">
-<p><strong>Note</strong>: For more details on adding images to MDN pages, see our <a href="/en-US/docs/MDN/Contribute/Editor/Images">Images</a> article.</p>
-</div>
-
-<h2 id="従来のライブサンプル">従来のライブサンプル</h2>
-
-<p>Traditional live samples are inserted into the page using the <span class="templateLink"><code><a class="external external-icon" href="https://github.com/mdn/kumascript/blob/master/macros/EmbedLiveSample.ejs">EmbedLiveSample</a></code></span> macro. An \{{EmbedLiveSample}} call dynamically grabs the code blocks in the same document section as itself and puts them into a document, which it then inserts into the page inside an {{htmlelement("iframe")}}. This is most easily demonstrated with an example, so let's look at one in this section and the next.</p>
-
-<ol>
- <li>The easiest way is to press the <strong>Insert Code Sample Template</strong> button, which asks us for a title. For the example in the "{{anch("test")}}" section below, we entered "test" for the title, and the button generated the entire section for us.</li>
- <li>Next, we entered some very simple sample code into the HTML, CSS, and JavaScript code blocks.</li>
- <li>Finally, we published the page; the \{{EmbedLiveSample('test')}} call you can see in the edit view was replaced with an <code>&lt;iframe&gt;</code> containing the code running live.</li>
-</ol>
-
-<p>If you look at the source inside the <code>&lt;iframe&gt;</code>, you'll see this:</p>
-
-<pre class="brush: html notranslate">&lt;!DOCTYPE html&gt;
-&lt;html&gt;
-  &lt;head&gt;
-    &lt;link href="https://developer.mozilla.org/static/build/styles/samples.css"
-          rel="stylesheet" type="text/css"&gt;
-
-    &lt;style type="text/css"&gt;
-      h1 {
-        color: blue;
-      }
-    &lt;/style&gt;
-  &lt;/head&gt;
-  &lt;body&gt;
-    &lt;h1&gt;Your example?&lt;/h1&gt;
-
-
-    &lt;script type="text/javascript"&gt;
-      document.querySelector('h1').onclick = function() {
-        document.querySelector('h1').textContent = 'Your example?';
-      };
-    &lt;/script&gt;
-
-  &lt;/body&gt;
-&lt;/html&gt;</pre>
-
-<h3 id="その他のマクロパラメータ">その他のマクロパラメータ</h3>
+<p>任意で、次のように出力結果を静的な画像で示すことができます。</p>
 
-<p>The call we've used in the below example only uses one parameter — \{{EmbedLiveSample('test')}}. This simply defines which section of the document the code blocks should be grabbed from — <code>test</code> is the ID defined on the heading "test" below, so the macro will will grab all the code blocks inside that heading. Put another way, it will grab all the blocks below that heading, up until another {{htmlelement("h2")}} is encountered.</p>
+<p><img alt="" src="console-example.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p>
 
-<p>There are some other optional parameters available too. You can include a second and third parameter, which will be a set width and height for the <code>&lt;iframe&gt;</code>. For example \{{EmbedLiveSample('test', '100%', '100px')}}. You can use pixel values or percentage values. Reasonable defaults are used if you omit these.</p>
+<h2 id="Traditional_live_samples">従来型ライブサンプル</h2>
 
-<p>There are also optional fourth and fifth parameters available, a screenshot URL that points to a screenshot showing the example should look like, and a page slug that points to another page on MDN —this is only used if you want to embed an example from another page. You won't use these two very often.</p>
+<p>従来型ライブサンプルは、 <code><a href="https://github.com/mdn/yari/blob/master/kumascript/macros/EmbedLiveSample.ejs">EmbedLiveSample</a></code> マクロを使ってページに挿入します。\{{EmbedLiveSample}} を呼び出すと、自分と同じ文書の節にあるコードブロックを動的に取得して文書に入れ、それを {{htmlelement("iframe")}} の中のページに挿入します。詳しくは<a href="/ja/docs/MDN/Structures/Live_samples">ライブサンプルガイド</a>をご覧ください。</p>
 
-<p>See <a href="/en-US/docs/MDN/Contribute/Structures/Live_samples#EmbedLiveSample_macro">EmbedLiveSample macro</a> for more details on all these parameters.</p>
+<h2 id="GitHub_live_samples">GitHub ライブサンプル</h2>
 
-<h3 id="伝統的なライブサンプルを使用するためのヒント">伝統的なライブサンプルを使用するためのヒント</h3>
+<p>GitHub ライブサンプルは、 <code><a href="https://github.com/mdn/yari/blob/master/kumascript/macros/EmbedGHLiveSample.ejs">EmbedGHLiveSample</a></code> マクロを使ってページに挿入します。\{{EmbedGHLiveSample}} を呼び出すと、指定した URL (GitHub の mdn 組織内のものでなければなりません) の文書を動的に取得し、ページ内の {{htmlelement("iframe")}} 内に挿入します。</p>
 
-<ul>
- <li>You don't need to use the <strong>Insert Code Sample Template</strong> button — but it is easier when you are getting used to using it. It is possible to just insert a \{{EmbedLiveSample('test')}} macro call inside any section of your page that contains code blocks, and it will work — as long as you set the first parameter to the ID of the document section it is inside.</li>
- <li>You don't need the <em>HTML</em>, <em>CSS</em>, <em>JavaScript</em>, and <em>Result</em> headings, but it is considered best practice to include them where appropriate as it makes it easier to see what is going on. If you don't include them, you should include descriptive text to tell the reader what is happening.</li>
- <li>You don't need HTML, CSS, and JavaScript code blocks — you can embed any combination you like — HTML and CSS, HTML and JavaScript, or even HTML only.</li>
- <li>Another approach is to wrap your code blocks inside a block-level element with an ID, and then give the macro call that ID. For example, you could put your code blocks inside <code>&lt;div id="test"&gt;&lt;/div&gt;</code>, then use \{{EmbedLiveSample('test')}}.</li>
- <li>In fact, this is a better option when you have a complex document hierarchy, and you are having trouble getting just the right code blocks to be embedded. In a complex document, this can be troublesome.</li>
-</ul>
-
-<div class="note">
-<p><strong>Note</strong>: You can find a lot more information about traditional Live samples in our <a href="/en-US/docs/MDN/Contribute/Structures/Live_samples">Live samples</a> article.</p>
-</div>
-
-<h2 id="テスト">テスト</h2>
-
-<h3 id="HTML">HTML</h3>
-
-<pre class="brush: html notranslate">&lt;h1&gt;My example?&lt;/h1&gt;</pre>
-
-<h3 id="CSS">CSS</h3>
-
-<pre class="brush: css notranslate">h1 {
-  color: blue;
-}</pre>
+<p>これらは従来のライブサンプルとよく似た動作をしますが、よりシンプルなものです。</p>
 
-<h3 id="JavaScript">JavaScript</h3>
+<p>ページ上のコードブロックの配置を気にする必要はありません。 GitHub リポジトリーの HTML 文書を取得して、<code>&lt;iframe&gt;</code> の中に挿入します。</p>
 
-<pre class="brush: js notranslate">document.querySelector('h1').onclick = function() {
-  document.querySelector('h1').textContent = 'Your example?';
-};</pre>
-
-<h3 id="結果">結果</h3>
-
-<p>{{EmbedLiveSample('test')}}</p>
-
-<h2 id="GitHub_ライブサンプル">GitHub ライブサンプル</h2>
-
-<p>GitHub live samples are inserted into the page using the <span class="templateLink"><code><a class="external external-icon" href="https://github.com/mdn/kumascript/blob/master/macros/EmbedGHLiveSample.ejs">EmbedGHLiveSample</a></code></span> macro. An \{{EmbedGHLiveSample}} call dynamically grabs the document at a specified URL (which has to be inside the <strong>mdn</strong> GitHub organization), and inserts into the page inside an {{htmlelement("iframe")}}.</p>
-
-<p>These work in a very similar way to the {{anch("Traditional live samples")}}, but they are a lot simpler:</p>
-
-<p>You don't have to worry about placement of code blocks on the page — it simply grabs an HTML document in a GitHub repo, and puts it in the <code>&lt;iframe&gt;</code>.</p>
-
-<p>The macro only has three parameters:</p>
+<p>マクロの引数は 3 つだけです。</p>
 
 <ol>
- <li>The URL of the document to embed — this is relative to the mdn organization, the top level directory of which is at <span class="pl-s1"><span class="pl-s"><code>https://mdn.github.io/</code>. So this parameter needs to contain the part of the URL after that, e.g. </span></span><code>my-subdirectory/example.html</code>. You can omit the filename if it is called <code>index.html</code>.</li>
- <li>The width of the <code>&lt;iframe&gt;</code>, which can be expressed as a percentage or in pixels.</li>
- <li>The height of the <code>&lt;iframe&gt;</code>, which can be expressed as a percentage or in pixels.</li>
+ <li>埋め込む文書の URL — これは、 <code>https://mdn.github.io/</code> にある最上位のディレクトリである mdn 組織からの相対 URL です。ですから、この引数には、<code>my-subdirectory/example.html</code> のように、URL の後の部分を含める必要があります。 <code>index.html</code> の場合は、ファイル名を省略できます。</li>
+ <li><code>&lt;iframe&gt;</code> の幅、パーセント値またはピクセル単位で表すことができます。</li>
+ <li><code>&lt;iframe&gt;</code> の高さ、パーセント値またはピクセル単位で表すことができます。</li>
 </ol>
 
-<p>Let's look at an example. Say we wanted to embed the code at <a href="https://mdn.github.io/learning-area/css/styling-boxes/backgrounds/">https://mdn.github.io/learning-area/css/styling-boxes/backgrounds/</a>. We could use the following call:</p>
+<p>例を見てみましょう。 <a href="https://mdn.github.io/learning-area/css/styling-boxes/backgrounds/">https://mdn.github.io/learning-area/css/styling-boxes/backgrounds/</a> のコードを埋め込みたいとします。次のように呼び出すことができます。</p>
 
 <p>\{{EmbedGHLiveSample("learning-area/css/styling-boxes/backgrounds/", '100%', 100)}}</p>
 
-<p>This looks like so when rendered:</p>
+<p>表示されるときには次のようになります。</p>
 
 <p>{{EmbedGHLiveSample("learning-area/css/styling-boxes/backgrounds/", '100%', 100)}}</p>
 
-<h3 id="GitHub_ライブサンプルを使用するためのヒント">GitHub ライブサンプルを使用するためのヒント</h3>
+<h3 id="Tips_for_using_GitHub_live_samples">GitHub ライブサンプルを使用するためのヒント</h3>
 
 <ul>
- <li>You obviously need to get a suitable code sample onto the <a href="https://github.com/mdn/">mdn GitHub organization</a> first. This needs to be done using Git. If you are not familiar with Git, check out our <a href="/en-US/docs/Learn/Common_questions/Using_Github_pages">How do I use GitHub Pages?</a> article, and <a href="/en-US/docs/MDN/Contribute/Structures/Compatibility_tables#Preparing_to_add_the_data">Preparing to add the data</a> for more advanced uses.</li>
- <li>Your code sample needs to be suitable to show what you are trying to demonstrate — it should contain one simple example that does one thing well, should have no offensive content in it, and should follow the MDN <a href="/en-US/docs/MDN/Contribute/Guidelines/Code_samples">Code sample guidelines</a>.</li>
+ <li>まず最初に、適切なコードサンプルを <a href="https://github.com/mdn/">GitHub の mdn 組織</a>に登録する必要があります。これは Git を使って行う必要があります。 Git に慣れていない方は、 <a href="/ja/docs/Learn/Common_questions/Using_Github_pages">GitHub ページの使い方</a>の記事を参照してください。もっと慣れている人は<a href="/ja/docs/MDN/Structures/Compatibility_tables#preparing_to_add_the_data">データを追加する準備</a>を参照してください。</li>
+ <li>コードサンプルは、実証しようとしていることを示すのに適したものでなければなりません。 1 つのことをうまく行う簡単なサンプルが含まれていること、不快な内容が含まれていないこと、そして MDN の<a href="/ja/docs/MDN/Guidelines/Code_guidelines">コードサンプルガイドライン</a>に従っている必要があります。</li>
 </ul>
 
-<h2 id="インタラクティブな例">インタラクティブな例</h2>
+<h2 id="Interactive_examples">インタラクティブサンプル</h2>
 
-<p>The newest form of live example available on MDN is interactive live examples. These provide a step up from live examples, because the reader can edit the code and the live example updates on the fly. This is great for learning and experimentation.</p>
+<p>MDN で利用できる最新のライブサンプルは、インタラクティブなライブサンプルです。これは、読者がコードを編集すると、ライブサンプルがその場で更新されるため、ライブサンプルからステップアップすることできます。これは、学習や実験に最適です。</p>
 
-<p>The interactive examples are intended to be used at the top of MDN reference pages — we are aiming to provide these to improve their value to beginners and other readers who want to just grab and play with an example quickly before seeing all the details of whatever they are looking up. There are a few important limitations to note about the interactive examples:</p>
+<p>インタラクティブなサンプルは、 MDN のリファレンスページの上部で使用されることを想定しています。初心者や、調べていることの詳細を見る前に、すぐに例題を手に取って遊びたいという読者にとっての価値を高めるために、これらを提供することを目指しています。インタラクティブサンプルについては、いくつかの重要な制限事項があります。</p>
 
 <ul>
- <li>They are specialised for a particular technology — the UI for JavaScript is different from the UI for CSS, and they only illustrate one technology in isolation. They are not appropriate if you want to show, for example, how to combine a particular HTML/CSS/JS structure.</li>
- <li>The interactive live examples are currently only set up to show CSS and JavaScript. For other technologies, you'll just have to wait.</li>
- <li>The UI is more performance-intensive than other code examples; you shouldn't put more than one on each MDN article you apply them to.</li>
- <li>They are not intended for large code examples — the UI supports a range of fixed sizes, which only really work for short (say, 10–15 line) examples.</li>
+ <li>インタラクティブサンプルは、特定の技術に特化しています。 — JavaScript の UI と CSS の UI は異なりますし、 1 つの技術を独立させて説明しているだけです。例えば、特定の HTML/CSS/JS 構造をどのように組み合わせるかを示したい場合には適していません。</li>
+ <li>インタラクティブなライブサンプルは、現在のところ CSS と JavaScript を表示するように設定されています。他の技術については、待つしかありません。</li>
+ <li>UIは他のコード例よりもパフォーマンスを重視していますので、適用する MDN の記事ごとに複数を置くべきではありません。</li>
+ <li>長いコードサンプルには適していません。 — この UI は本当に短い (10-15 行程度) サンプルでのみ利用できる固定された大きさの範囲でのみ有効です。</li>
 </ul>
 
-<p>If you want to submit an example, you can find out how at the <a href="https://github.com/mdn/interactive-examples/blob/master/CONTRIBUTING.md">interactive examples repo Contribution guide</a>.</p>
+<p>サンプルを投稿したい場合は、 <a href="https://github.com/mdn/interactive-examples/blob/master/CONTRIBUTING.md">interactive examples repo Contribution guide</a> でその方法を知ることができます。</p>
 
-<p>If you find a page that doesn't have an associated interactive example, you are welcome to contribute one! The <a href="https://discourse.mozilla.org/c/mdn">MDN Discourse forum</a> is a good place to ask for help or advice.</p>
+<p>関連するインタラクティブサンプルがないページを見つけた場合は、ぜひ投稿してください。</p>
 
-<h3 id="インタラクティブなサンプルデモ">インタラクティブなサンプルデモ</h3>
+<h3 id="Interactive_example_demo">インタラクティブサンプルのデモ</h3>
 
-<p>The <code>\{{EmbedInteractiveExample}}</code> macro is used to embed finished examples into MDN pages. For example, the macro call <code>\{{EmbedInteractiveExample("pages/js/array-push.html")}}</code> displays the following code example:</p>
+<p><code><a href="https://github.com/mdn/yari/blob/master/kumascript/macros/EmbedInteractiveExample.ejs">EmbedInteractiveExample</a></code> マクロを使用して、完成したサンプルを MDN ページに埋め込みます。たとえば、 \{{EmbedInteractiveExample("pages/js/array-push.html")}} というマクロ呼び出しで、次のコードサンプルが表示されます。</p>
 
 <div>{{EmbedInteractiveExample("pages/js/array-push.html")}}</div>
 
-<div> </div>
-
-<div>Try adjusting the code to see what happens, and playing with the controls.</div>
+<div>コードを調整して様子を見たり、操作をしたりしてみてください。</div>
diff --git a/files/ja/mozilla/add-ons/webextensions/api/index.html b/files/ja/mozilla/add-ons/webextensions/api/index.html
index 8a375f01eb..e7ffc434a7 100644
--- a/files/ja/mozilla/add-ons/webextensions/api/index.html
+++ b/files/ja/mozilla/add-ons/webextensions/api/index.html
@@ -8,7 +8,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/API
 <div>{{AddonSidebar}}</div>
 
 <div>
-<p>WebExtension 用の JavaScript API は拡張機能の<a href="https://developer.mozilla.org/ja/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#Background_scripts">バックグラウンドスクリプト</a>と、その他の拡張機能にバンドルした文書 (<a href="https://developer.mozilla.org/ja/Add-ons/WebExtensions/Browser_action">ブラウザーアクション</a>や<a href="https://developer.mozilla.org/ja/Add-ons/WebExtensions/Page_actions">ページアクション</a>ポップアップや<a href="https://developer.mozilla.org/ja/Add-ons/WebExtensions/Sidebars">サイドバー</a>や<a href="https://developer.mozilla.org/ja/Add-ons/WebExtensions/Options_pages">オプションページ</a>や<a href="https://developer.mozilla.org/ja/Add-ons/WebExtensions/manifest.json/chrome_url_overrides">新規タブページ</a>を含む) で使用できます。いくつかの API は拡張機能の<a href="https://developer.mozilla.org/ja/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#Content_scripts">コンテンツスクリプト</a>からもアクセスできます (<a href="https://developer.mozilla.org/ja/Add-ons/WebExtensions/Content_scripts#WebExtension_APIs">コンテンツスクリプトガイドの表</a>を見てください)。</p>
+<p>WebExtension 用の JavaScript API は拡張機能の<a href="https://developer.mozilla.org/ja/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#Background_scripts">バックグラウンドスクリプト</a>と、その他の拡張機能にバンドルした文書 (<a href="https://developer.mozilla.org/ja/Add-ons/WebExtensions/Browser_action">ブラウザーアクション</a>や<a href="https://developer.mozilla.org/ja/Add-ons/WebExtensions/Page_actions">ページアクション</a>ポップアップや<a href="https://developer.mozilla.org/ja/Add-ons/WebExtensions/Sidebars">サイドバー</a>や<a href="/ja/docs/Mozilla/Add-ons/WebExtensions/user_interface/Options_pages">オプションページ</a>や<a href="https://developer.mozilla.org/ja/Add-ons/WebExtensions/manifest.json/chrome_url_overrides">新規タブページ</a>を含む) で使用できます。いくつかの API は拡張機能の<a href="https://developer.mozilla.org/ja/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#Content_scripts">コンテンツスクリプト</a>からもアクセスできます (<a href="https://developer.mozilla.org/ja/Add-ons/WebExtensions/Content_scripts#WebExtension_APIs">コンテンツスクリプトガイドの表</a>を見てください)。</p>
 
 <p>もっと強力な API を使うには、拡張機能の <code>manifest.json</code> で<a href="https://developer.mozilla.org/ja/Add-ons/WebExtensions/manifest.json/permissions">パーミッションをリクエストする</a>必要があります。</p>
 
diff --git a/files/ja/mozilla/add-ons/webextensions/content_scripts/index.html b/files/ja/mozilla/add-ons/webextensions/content_scripts/index.html
index 6d6a7f5425..ee385edde7 100644
--- a/files/ja/mozilla/add-ons/webextensions/content_scripts/index.html
+++ b/files/ja/mozilla/add-ons/webextensions/content_scripts/index.html
@@ -9,7 +9,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/Content_scripts
 
 <p>コンテンツスクリプトは、特定のウェブページのコンテキストで実行される拡張機能の一部です（拡張機能の一部であるバックグラウンドスクリプトや、ウェブサイト自体の一部であるスクリプト、例えば {{HTMLElement("script")}} 要素みたいなものと対をなすような)。</p>
 
-<p><a href="/ja/Add-ons/WebExtensions/Background_scripts">バックグラウンドスクリプト</a>はすべての <a href="/ja/Add-ons/WebExtensions/API">WebExtension JavaScript API</a> にアクセスできますが、ウェブページのコンテンツに直接アクセスすることはできません。だからあなたの拡張機能がそれを行う必要がある場合は、コンテンツスクリプトが必要です。</p>
+<p><a href="/ja/docs/Mozilla/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#background_scripts">バックグラウンドスクリプト</a>はすべての <a href="/ja/Add-ons/WebExtensions/API">WebExtension JavaScript API</a> にアクセスできますが、ウェブページのコンテンツに直接アクセスすることはできません。だからあなたの拡張機能がそれを行う必要がある場合は、コンテンツスクリプトが必要です。</p>
 
 <p>通常のウェブページで読み込まれたスクリプトと同様に、コンテンツスクリプトは、標準の DOM API を使用してページのコンテンツを読み取り、変更することができます。</p>
 
diff --git a/files/ja/mozilla/add-ons/webextensions/manifest.json/content_scripts/index.html b/files/ja/mozilla/add-ons/webextensions/manifest.json/content_scripts/index.html
index 964a6191d1..54edea241a 100644
--- a/files/ja/mozilla/add-ons/webextensions/manifest.json/content_scripts/index.html
+++ b/files/ja/mozilla/add-ons/webextensions/manifest.json/content_scripts/index.html
@@ -61,7 +61,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/manifest.json/content_scripts
    <td><a id="all_frames"><code>all_frames</code></a></td>
    <td><code>Boolean</code></td>
    <td>
-    <p><code>true</code>: <code><a href="/ja/Add-ons/WebExtensions/manifest.json/content_scripts$edit#js">js</a></code> と <code><a href="/ja/Add-ons/WebExtensions/manifest.json/content_scripts$edit#css">css</a></code> で指定されたすべてのスクリプトを、指定した URL要求にマッチするすべてのフレームに(タブの最上位フレームでなくても)挿入します。これは親のフレームだけが URL要求にマッチしている子フレームには挿入しません。URL 要求は各フレームごとにチェックされます。</p>
+    <p><code>true</code>: <code><a href="/ja/Add-ons/WebExtensions/manifest.json/content_scripts#js">js</a></code> と <code><a href="/ja/Add-ons/WebExtensions/manifest.json/content_scripts#css">css</a></code> で指定されたすべてのスクリプトを、指定した URL要求にマッチするすべてのフレームに(タブの最上位フレームでなくても)挿入します。これは親のフレームだけが URL要求にマッチしている子フレームには挿入しません。URL 要求は各フレームごとにチェックされます。</p>
 
     <p><code>false</code>: タブの最上位フレームで URL要求にマッチしたフレームだけに挿入します。</p>
 
@@ -80,17 +80,17 @@ translation_of: Mozilla/Add-ons/WebExtensions/manifest.json/content_scripts
   <tr>
    <td><a id="exclude_globs"><code>exclude_globs</code></a></td>
    <td><code>Array</code></td>
-   <td>ワイルドカードを含む文字配列。下記の <a href="/ja/Add-ons/WebExtensions/manifest.json/content_scripts#Matching_URL_patterns">URL パターンにマッチする</a> を見てください。</td>
+   <td>ワイルドカードを含む文字配列。下記の <a href="/ja/Add-ons/WebExtensions/manifest.json/content_scripts#URL_パターンにマッチする">URL パターンにマッチする</a> を見てください。</td>
   </tr>
   <tr>
    <td><a id="exclude_matches"><code>exclude_matches</code></a></td>
    <td><code>Array</code></td>
-   <td><a href="/ja/Add-ons/WebExtensions/match_patterns">マッチパターン</a>の配列。下記の <a href="/ja/Add-ons/WebExtensions/manifest.json/content_scripts#Matching_URL_patterns">URL パターンにマッチする</a>を見てください。</td>
+   <td><a href="/ja/Add-ons/WebExtensions/match_patterns">マッチパターン</a>の配列。下記の <a href="/ja/Add-ons/WebExtensions/manifest.json/content_scripts#URL_パターンにマッチする">URL パターンにマッチする</a>を見てください。</td>
   </tr>
   <tr>
    <td><a id="include_globs"><code>include_globs</code></a></td>
    <td><code>Array</code></td>
-   <td>ワイルドカードを含む文字配列。下記の <a href="/ja/Add-ons/WebExtensions/manifest.json/content_scripts#Matching_URL_patterns">URL パターンにマッチする</a> を見てください。</td>
+   <td>ワイルドカードを含む文字配列。下記の <a href="/ja/Add-ons/WebExtensions/manifest.json/content_scripts#URL_パターンにマッチする">URL パターンにマッチする</a> を見てください。</td>
   </tr>
   <tr>
    <td><a id="js"><code>js</code></a></td>
@@ -105,14 +105,14 @@ translation_of: Mozilla/Add-ons/WebExtensions/manifest.json/content_scripts
 
     <p><code>こうすると <code>"my-content-script.js"</code> から jQuery を使えます。</code></p>
 
-    <p><code>ファイルは <code><a href="/ja/Add-ons/WebExtensions/manifest.json/content_scripts$edit#run_at">run_at</a></code> で指定した時に挿入されます。</code></p>
+    <p><code>ファイルは <code><a href="/ja/Add-ons/WebExtensions/manifest.json/content_scripts#run_at">run_at</a></code> で指定した時に挿入されます。</code></p>
    </td>
   </tr>
   <tr>
    <td><code><a id="match_about_blank">match_about_blank</a></code></td>
    <td><code>Boolean</code></td>
    <td>
-    <p>コンテンツスクリプトを <code>"about:blank"</code> もしくは<code>"about:srcdoc"</code>のURLを持つページに挿入します。 if the URL of the page that opened or created this page <a href="/ja/Add-ons/WebExtensions/manifest.json/content_scripts#Matching_URL_patterns">matches the patterns</a> specified in the rest of the <code>content_scripts</code> key.</p>
+    <p>コンテンツスクリプトを <code>"about:blank"</code> もしくは<code>"about:srcdoc"</code>のURLを持つページに挿入します。 if the URL of the page that opened or created this page <a href="/ja/Add-ons/WebExtensions/manifest.json/content_scripts#URL_パターンにマッチする">matches the patterns</a> specified in the rest of the <code>content_scripts</code> key.</p>
 
     <p>This is especially useful to run scripts in empty iframes , whose URL is <code>"about:blank"</code>. To do this you should also set the <code>all_frames</code> key.</p>
 
@@ -137,7 +137,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/manifest.json/content_scripts
    <td><a id="matches"><code>matches</code></a></td>
    <td><code>Array</code></td>
    <td>
-    <p><a href="/ja/docs/Mozilla/Add-ons/WebExtensions/Match_patterns">マッチパターン</a>の配列。下記の <a href="/ja/Add-ons/WebExtensions/manifest.json/content_scripts#Matching_URL_patterns">URLパターンにマッチする</a> を見てください。</p>
+    <p><a href="/ja/docs/Mozilla/Add-ons/WebExtensions/Match_patterns">マッチパターン</a>の配列。下記の <a href="/ja/Add-ons/WebExtensions/manifest.json/content_scripts#URL_パターンにマッチする">URLパターンにマッチする</a> を見てください。</p>
 
     <p>これは唯一の必須なキーです。</p>
    </td>
@@ -146,7 +146,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/manifest.json/content_scripts
    <td><a id="run_at"><code>run_at</code></a></td>
    <td><code>String</code></td>
    <td>
-    <p>This option determines when the scripts specified in <code><a href="/ja/Add-ons/WebExtensions/manifest.json/content_scripts$edit#js">js</a></code> are injected. You can supply one of three strings here, each of which identifies a state in the process of loading a document. The states directly correspond to {{domxref("Document/readyState", "Document.readyState")}}:</p>
+    <p>This option determines when the scripts specified in <code><a href="/ja/Add-ons/WebExtensions/manifest.json/content_scripts#js">js</a></code> are injected. You can supply one of three strings here, each of which identifies a state in the process of loading a document. The states directly correspond to {{domxref("Document/readyState", "Document.readyState")}}:</p>
 
     <ul>
      <li>"<code>document_start</code>": corresponds to <code>loading</code>. The DOM is still loading.</li>
@@ -156,7 +156,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/manifest.json/content_scripts
 
     <p>The default value is <code>"document_idle"</code>.</p>
 
-    <p>In all cases, files in <code><a href="/ja/Add-ons/WebExtensions/manifest.json/content_scripts$edit#js">js</a></code> are injected after files in <code><a href="/ja/Add-ons/WebExtensions/manifest.json/content_scripts$edit#css">css</a></code>.</p>
+    <p>In all cases, files in <code><a href="/ja/Add-ons/WebExtensions/manifest.json/content_scripts#js">js</a></code> are injected after files in <code><a href="/ja/Add-ons/WebExtensions/manifest.json/content_scripts#css">css</a></code>.</p>
    </td>
   </tr>
  </tbody>
@@ -169,11 +169,11 @@ translation_of: Mozilla/Add-ons/WebExtensions/manifest.json/content_scripts
 <ul>
  <li><code>matches</code>: <a href="/ja/docs/Mozilla/Add-ons/WebExtensions/Match_patterns">マッチパターン</a>の配列</li>
  <li><code>exclude_matches:</code> <a href="/ja/docs/Mozilla/Add-ons/WebExtensions/Match_patterns">マッチパターン</a>の配列</li>
- <li><code>include_globs</code>: <a href="/ja/Add-ons/WebExtensions/manifest.json/content_scripts$edit#globs">globs</a> の配列</li>
- <li><code>exclude_globs:</code> <a href="/ja/Add-ons/WebExtensions/manifest.json/content_scripts$edit#globs">globs</a> の配列</li>
+ <li><code>include_globs</code>: <a href="/ja/Add-ons/WebExtensions/manifest.json/content_scripts#globs">globs</a> の配列</li>
+ <li><code>exclude_globs:</code> <a href="/ja/Add-ons/WebExtensions/manifest.json/content_scripts#globs">globs</a> の配列</li>
 </ul>
 
-<p>これらのプロパティにマッチするには、URL は配列内で少なくとも 1 つの項目にマッチしなれりばなりません。例えばこのようなプロパティが与えられたら:</p>
+<p>これらのプロパティにマッチするには、URL は配列内で少なくとも 1 つの項目にマッチしなければなりません。例えばこのようなプロパティが与えられたら:</p>
 
 <pre class="brush: json no-line-numbers  language-json notranslate">"matches": ["*://*.example.org/*", "*://*.example.com/*"]</pre>
 
@@ -197,7 +197,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/manifest.json/content_scripts
  <li>"?" はちょうど 1個のキャラクターにマッチします</li>
 </ul>
 
-<p>例えば: <code>"*na?i"</code> は <code>"illuminati"</code> と <code>"annunaki"</code> にマッチし、<code>"sagnarelli"</code> にはマッチしせん</p>
+<p>例えば: <code>"*na?i"</code> は <code>"illuminati"</code> と <code>"annunaki"</code> にマッチし、<code>"sagnarelli"</code> にはマッチしません。</p>
 
 <h2 id="例">例</h2>
 
diff --git a/files/ja/mozilla/add-ons/webextensions/manifest.json/options_ui/index.html b/files/ja/mozilla/add-ons/webextensions/manifest.json/options_ui/index.html
index f462468481..5d49d029eb 100644
--- a/files/ja/mozilla/add-ons/webextensions/manifest.json/options_ui/index.html
+++ b/files/ja/mozilla/add-ons/webextensions/manifest.json/options_ui/index.html
@@ -31,13 +31,13 @@ translation_of: Mozilla/Add-ons/WebExtensions/manifest.json/options_ui
  </tbody>
 </table>
 
-<p><code>options_ui</code> キーは、拡張機能の<a href="https://developer.mozilla.org/ja/docs/Mozilla/Add-ons/WebExtensions/Options_pages">オプションページ</a>を定義するために使用します。</p>
+<p><code>options_ui</code> キーは、拡張機能の<a href="/ja/docs/Mozilla/Add-ons/WebExtensions/user_interface/Options_pages">オプションページ</a>を定義するために使用します。</p>
 
 <p>オプションページは、拡張機能の設定を含みます。オプションページはブラウザーのアドオンマネージャー、または拡張機能内で {{WebExtAPIRef("runtime.openOptionsPage()")}} を使用することでアクセスできます。</p>
 
 <p><code>options_ui</code> を拡張機能にパッケージされた HTML ファイルへのパスとして指定します。通常のウェブページのように、HTML、CSS、JavaScript ファイルを含めることができます。しかし、通常のページと異なり、拡張機能が<a href="https://developer.mozilla.org/ja/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions">権限</a>を持つすべての <a href="https://developer.mozilla.org/ja/Add-ons/WebExtensions/API">WebExtension API</a> を使用できます。しかし、バックグラウンドスクリプトとは異なるスコープで実行されます。</p>
 
-<p><strong>オプションページ</strong>と<strong>バックグラウンドスクリプト</strong>の JavaScript 上で、データや関数を<strong>共有したい</strong>場合、{{WebExtAPIRef("extension.getBackgroundPage()")}} を使用してバックグラウンドスクリプトの <a href="/ja/docs/Web/API/Window">Window</a> への参照を直接取得するか、{{WebExtAPIRef("extension.getViews()")}} で拡張機能内で実行されているいずれかのページの {{domxref("Window")}} を取得します。あるいは、JavaScript で <code><a href="/ja/docs/Mozilla/Add-ons/WebExtensions/API/runtime/sendMessage">runtime.sendMessage()</a></code> や <code><a href="/ja/docs/Mozilla/Add-ons/WebExtensions/API/runtime/onMessage">runtime.onMessage</a></code>、<code><a href="/ja/docs/Mozilla/Add-ons/WebExtensions/API/runtime/connect">runtime.connect()</a></code> を使用することで、オプションページとバックグラウンドスクリプト間で相互にコミュニケーションできます。後者の方法 (や同等の <code><a href="https://developer.mozilla.org/ja/docs/Mozilla/Add-ons/WebExtensions/API/runtime/Port">runtime.Port</a></code> ) でも <a href="https://developer.mozilla.org/ja/Add-ons/WebExtensions/Background_scripts">バックグラウンドスクリプト</a>と<strong><a href="https://developer.mozilla.org/ja/Add-ons/WebExtensions/Content_scripts">コンテンツスクリプト</a></strong>とでオプションを共有できます。</p>
+<p><strong>オプションページ</strong>と<strong>バックグラウンドスクリプト</strong>の JavaScript 上で、データや関数を<strong>共有したい</strong>場合、{{WebExtAPIRef("extension.getBackgroundPage()")}} を使用してバックグラウンドスクリプトの <a href="/ja/docs/Web/API/Window">Window</a> への参照を直接取得するか、{{WebExtAPIRef("extension.getViews()")}} で拡張機能内で実行されているいずれかのページの {{domxref("Window")}} を取得します。あるいは、JavaScript で <code><a href="/ja/docs/Mozilla/Add-ons/WebExtensions/API/runtime/sendMessage">runtime.sendMessage()</a></code> や <code><a href="/ja/docs/Mozilla/Add-ons/WebExtensions/API/runtime/onMessage">runtime.onMessage</a></code>、<code><a href="/ja/docs/Mozilla/Add-ons/WebExtensions/API/runtime/connect">runtime.connect()</a></code> を使用することで、オプションページとバックグラウンドスクリプト間で相互にコミュニケーションできます。後者の方法 (や同等の <code><a href="https://developer.mozilla.org/ja/docs/Mozilla/Add-ons/WebExtensions/API/runtime/Port">runtime.Port</a></code> ) でも <a href="/ja/docs/Mozilla/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#background_scripts">バックグラウンドスクリプト</a>と<strong><a href="https://developer.mozilla.org/ja/Add-ons/WebExtensions/Content_scripts">コンテンツスクリプト</a></strong>とでオプションを共有できます。</p>
 
 <p>一般的に、オプションページで変更されたオプションは、<a href="/ja/Add-ons/WebExtensions/API/storage">storage API</a> を使用して、<a href="/ja/docs/Mozilla/Add-ons/WebExtensions/API/storage/sync">storage.sync</a> (ユーザーがログインしているすべてのブラウザーインスタンス間で設定を同期する場合) か <a href="/ja/docs/Mozilla/Add-ons/WebExtensions/API/storage/local">storage.local</a> (現在のマシン / プロファイルのローカル設定にする場合) のいずれかに保存します。バックグラウンドスクリプトに変更を通知する必要がある場合、バックグラウンドスクリプトで <a href="/ja/docs/Mozilla/Add-ons/WebExtensions/API/storage/onChanged">storage.onChanged</a> にリスナーを追加します。</p>
 
diff --git a/files/ja/mozilla/firefox/releases/1.5/using_firefox_1.5_caching/index.html b/files/ja/mozilla/firefox/releases/1.5/using_firefox_1.5_caching/index.html
index defff78437..4f00d1637e 100644
--- a/files/ja/mozilla/firefox/releases/1.5/using_firefox_1.5_caching/index.html
+++ b/files/ja/mozilla/firefox/releases/1.5/using_firefox_1.5_caching/index.html
@@ -15,7 +15,7 @@ original_slug: Using_Firefox_1.5_caching
 
 <h2 id=".E3.81.AF.E3.81.98.E3.82.81.E3.81.AB" name=".E3.81.AF.E3.81.98.E3.82.81.E3.81.AB">はじめに</h2>
 
-<p><a href="/ja/Firefox_1.5_for_developers" title="ja/Firefox_1.5_for_developers">Firefox 1.5</a> ではウェブページ全体をその JavaScript の状態も含めてメモリ内にキャッシュし、1 つのブラウザセッションとして使用します。訪問したページ間の戻る、進むという動作にページのロードが不要になり、JavaScript の状態も保存されます。この機能によってページナビゲーションが非常に高速化します。この機能は <strong>bfcache</strong>（"Back-Forward Cache" のこと）と呼ばれることもあります。このキャッシュ状態はユーザがブラウザを閉じるまで保存されます。</p>
+<p><a href="/ja/Firefox_1.5_for_developers">Firefox 1.5</a> ではウェブページ全体をその JavaScript の状態も含めてメモリ内にキャッシュし、1 つのブラウザセッションとして使用します。訪問したページ間の戻る、進むという動作にページのロードが不要になり、JavaScript の状態も保存されます。この機能によってページナビゲーションが非常に高速化します。この機能は <strong>bfcache</strong>（"Back-Forward Cache" のこと）と呼ばれることもあります。このキャッシュ状態はユーザがブラウザを閉じるまで保存されます。</p>
 
 <p>Firefox がページをキャッシュしない場合があります。ページがキャッシュされないプログラム的な理由でよくあるものをいくつか以下に示します。</p>
 
@@ -187,6 +187,6 @@ function loadOnlyFirst() {
 
 <h2 id="Firefox_.E7.94.A8.E6.8B.A1.E5.BC.B5.E6.A9.9F.E8.83.BD.E3.81.AE.E9.96.8B.E7.99.BA" name="Firefox_.E7.94.A8.E6.8B.A1.E5.BC.B5.E6.A9.9F.E8.83.BD.E3.81.AE.E9.96.8B.E7.99.BA">Firefox 用拡張機能の開発</h2>
 
-<p>Firefox 1.5 の <a href="/ja/Building_an_Extension" title="ja/Building_an_Extension">拡張機能</a> はこのキャッシュ機能を許容するものである必要があります。1.5 とそれより前のバージョンの両方と互換性を持つ Firefox の拡張機能を開発したいのであれば、キャッシュされるようにするトリガについては <code>load</code> イベントをリスンし、キャッシュされないようにするトリガについては <code>pageshow</code> イベントをリスンしてください。</p>
+<p>Firefox 1.5 の <a href="/ja/Building_an_Extension">拡張機能</a> はこのキャッシュ機能を許容するものである必要があります。1.5 とそれより前のバージョンの両方と互換性を持つ Firefox の拡張機能を開発したいのであれば、キャッシュされるようにするトリガについては <code>load</code> イベントをリスンし、キャッシュされないようにするトリガについては <code>pageshow</code> イベントをリスンしてください。</p>
 
 <p>例えば Firefox 用 Google ツールバーは、1.5 とそれより前のバージョンの両方と互換性を持たせるためには、autolink 関数については <code>load</code> イベントをリスンすべきであり、PageRank 関数については <code>pageshow</code> イベントをリスンすべきです。</p>
diff --git a/files/ja/mozilla/firefox/releases/13/index.html b/files/ja/mozilla/firefox/releases/13/index.html
index 1be4add1b3..3b59a7e858 100644
--- a/files/ja/mozilla/firefox/releases/13/index.html
+++ b/files/ja/mozilla/firefox/releases/13/index.html
@@ -39,7 +39,7 @@ translation_of: Mozilla/Firefox/Releases/13
  <li>{{ domxref("window.setTimeout()") }} および {{ domxref("window.setInterval()") }} メソッドは、付加的な引数である "遅延" をコールバックルーチンに渡さないようになりました。</li>
  <li>{{ domxref("Blob","Blob.mozSlice()") }} メソッドの接頭辞を削除しました。</li>
  <li>{{ domxref("Blob") }} コンストラクタをサポートしました。</li>
- <li><a href="/ja/DOM/Storage#globalStorage" title="ja/DOM/Storage#globalStorage"><code>globalStorage</code></a> のサポートを削除しました。</li>
+ <li><a href="/ja/DOM/Storage#globalStorage"><code>globalStorage</code></a> のサポートを削除しました。</li>
  <li>バックグラウンドの処理の状態や結果を報告するために用いる {{ domxref("DOMRequest") }} インタフェースを新たに追加しました。</li>
  <li>{{ domxref("HTMLOptionElement", "HTMLOptionElement.index()") }} メソッドは、{{ HTMLElement("option") }} が {{ HTMLElement("datalist") }} HTML 要素の内部にあるときに誤った値 <code>-1</code> ではなく <code>0</code> を返すようになりました。</li>
  <li>{{ domxref("DOMException") }} のうち DOM Level 4 で定義された部分を実装しました。</li>
@@ -65,7 +65,7 @@ translation_of: Mozilla/Firefox/Releases/13
 <h3 id="WebGL">WebGL</h3>
 
 <ul>
- <li><a href="/ja/WebGL/Using_Extensions#EXT_texture_filter_anisotropic" title="ja/WebGL/Using_Extensions#EXT_texture_filter_anisotropic"><code>EXT_texture_filter_anisotropic</code></a> 拡張のサポートを追加しました。異方性テクスチャフィルタリングは、テクスチャが貼り付けられた斜めのプリミティブを表示する際のミップマップテクスチャのアクセスの品質を向上させます。</li>
+ <li><a href="/ja/WebGL/Using_Extensions#EXT_texture_filter_anisotropic"><code>EXT_texture_filter_anisotropic</code></a> 拡張のサポートを追加しました。異方性テクスチャフィルタリングは、テクスチャが貼り付けられた斜めのプリミティブを表示する際のミップマップテクスチャのアクセスの品質を向上させます。</li>
 </ul>
 
 <h3 id="MathML">MathML</h3>
diff --git a/files/ja/mozilla/firefox/releases/14/index.html b/files/ja/mozilla/firefox/releases/14/index.html
index 4e2ebb8a22..be3496df2a 100644
--- a/files/ja/mozilla/firefox/releases/14/index.html
+++ b/files/ja/mozilla/firefox/releases/14/index.html
@@ -24,14 +24,14 @@ translation_of: Mozilla/Firefox/Releases/14
 <h3 id="DOM">DOM</h3>
 
 <ul>
- <li><a href="/ja/DOM/DOM_event_reference/input" title="ja/DOM/DOM_event_reference/input">input</a> イベントが <a href="/en/DOM/Element.contentEditable" title="en/DOM/Element.contentEditable">contenteditable</a> エディタをホストしている要素および <a href="/en/DOM/document.designMode" title="document.designMode">designMode</a> エディタのルート要素上での編集でも発生するようになりました。</li>
+ <li><a href="/ja/DOM/DOM_event_reference/input">input</a> イベントが <a href="/en/DOM/Element.contentEditable" title="en/DOM/Element.contentEditable">contenteditable</a> エディタをホストしている要素および <a href="/en/DOM/document.designMode" title="document.designMode">designMode</a> エディタのルート要素上での編集でも発生するようになりました。</li>
  <li>{{ domxref("DOMException", "DOMException.code") }} は最新の DOM Level 4 仕様に従って非推奨になりました。</li>
  <li>{{ domxref("Range.insertNode()") }} が 折り畳まれた (collapsed) 範囲上で用いられたときに正しく動作するようになりました。</li>
  <li>{{ domxref("BlobBuilder", "MozBlobBuilder") }} インタフェースが {{ domxref("Blob") }} コンストラクタの利用を促すために非推奨になりました。<code>MozBlobBuilder</code> を利用した場合、Web コンソールに警告が表示されます。</li>
  <li>{{ domxref("DOM_Mutation_Observers","MutationObserver") }} のサポートが導入されました。これは、パフォーマンスに関する多くの問題がある DOM3  の Mutation Events の置き換えとして設計されました。</li>
  <li>{{ domxref("HTMLImageElement") }} インタフェースの <code>x</code> <code><code>プロパティおよび </code>y</code> プロパティは Gecko 7.0 で削除されましたが、互換性の理由でこのリリースから復活しました。</li>
  <li>{{ domxref("Document") }} のメソッドである <code>execCommandShowHelp()<code><code> と<code><code> </code></code></code></code></code><code>queryCommandText() は、今まで何もしませんでしたが、削除されました。</code></li>
- <li><code>GeoPositionAddress</code> インタフェースは、<a href="/Ja/Using_geolocation" title="Ja/Using_geolocation">Geolocation</a> API で廃止された仕様の一部であり、削除されました。</li>
+ <li><code>GeoPositionAddress</code> インタフェースは、<a href="/Ja/Using_geolocation">Geolocation</a> API で廃止された仕様の一部であり、削除されました。</li>
  <li>{{ domxref("Storage", "localStorage/sessionStorage") }} がプロパティアクセスを通した宣言されていないキーに対して <code>null</code> ではなく<code> undefined</code> を正しく返すようになりました。</li>
 </ul>
 
diff --git a/files/ja/mozilla/firefox/releases/19/index.html b/files/ja/mozilla/firefox/releases/19/index.html
index d61dcc05d8..3dae46cb2e 100644
--- a/files/ja/mozilla/firefox/releases/19/index.html
+++ b/files/ja/mozilla/firefox/releases/19/index.html
@@ -57,7 +57,7 @@ translation_of: Mozilla/Firefox/Releases/19
 
 <ul>
  <li><code>getBrowserSelection()</code> が、テキスト入力フィールドで選択されているテキストを返すようになりました。このため、ユーザがパスワードフィールドではないテキスト入力フィールドでテキストを選択したときに、<code>gContextMenu.isTextSelected</code> が <code>true</code> になります ({{bug("565717")}})。</li>
- <li><a href="/ja/docs/Mozilla/JavaScript_code_modules/Dict.jsm" title="ja/docs/Mozilla/JavaScript_code_modules/Dict.jsm">Dict.jsm</a>: <a href="/ja/docs/Mozilla/JavaScript_code_modules/Dict.jsm#Creating_a_dictionary" title="ja/docs/Mozilla/JavaScript_code_modules/Dict.jsm#Creating_a_dictionary"><code>Dict()</code></a> が JSON 文字列を受け入れるようになりました。<a href="/ja/docs/Mozilla/JavaScript_code_modules/Dict.jsm#toJSON()" title="ja/docs/Mozilla/JavaScript_code_modules/Dict.jsm#toJSON()"><code>Dict.toJSON()</code></a> メソッドが追加され、これは JSON 文字列を返します ({{bug("727967")}})。</li>
+ <li><a href="/ja/docs/Mozilla/JavaScript_code_modules/Dict.jsm">Dict.jsm</a>: <a href="/ja/docs/Mozilla/JavaScript_code_modules/Dict.jsm#Creating_a_dictionary"><code>Dict()</code></a> が JSON 文字列を受け入れるようになりました。<a href="/ja/docs/Mozilla/JavaScript_code_modules/Dict.jsm#toJSON()"><code>Dict.toJSON()</code></a> メソッドが追加され、これは JSON 文字列を返します ({{bug("727967")}})。</li>
 </ul>
 
 <h3 id="Interface_changes" name="Interface_changes">インタフェースの変更点</h3>
diff --git a/files/ja/mozilla/firefox/releases/3.5/updating_extensions/index.html b/files/ja/mozilla/firefox/releases/3.5/updating_extensions/index.html
index ea919ee652..c9e52ddc98 100644
--- a/files/ja/mozilla/firefox/releases/3.5/updating_extensions/index.html
+++ b/files/ja/mozilla/firefox/releases/3.5/updating_extensions/index.html
@@ -26,9 +26,9 @@ firefox -createProfile testBeta2
 <p>テストが完了したら、今度は常用のプロファイルを使って、再度その拡張機能を使ってみます。 この作業は、保存されている既存のデータとの互換性を確認するのに役立ちます。</p>
 <h3 id="addons.mozilla.org_に登録されている拡張機能の更新">addons.mozilla.org に登録されている拡張機能の更新</h3>
 <p>ついに、更新した拡張機能を公開するときが来ました。 もし自分の拡張機能に一切コードの変更が必要ない場合は、AMO のダッシュボードにログインして、互換性のあるバージョンを更新するだけで済みます。 何らかの変更を加えた場合は、新しいバージョンを AMO にアップロードする必要があります。</p>
-<p>詳しくは <a class="internal" href="/ja/Submitting_an_add-on_to_AMO" title="ja/Submitting an add-on to AMO">AMO へのアドオンの登録</a> を参照してください。</p>
+<p>詳しくは <a class="internal" href="/ja/Submitting_an_add-on_to_AMO">AMO へのアドオンの登録</a> を参照してください。</p>
 <h2 id="Places_データベースへのアクセス">Places データベースへのアクセス</h2>
-<p>Firefox 3.1 以前は、<a class="internal" href="/ja/Storage" title="ja/Storage">Storage API</a> を使って Places データベースへ直接アクセスする場合、以下のように少々工夫が必要でした。</p>
+<p>Firefox 3.1 以前は、<a class="internal" href="/ja/Storage">Storage API</a> を使って Places データベースへ直接アクセスする場合、以下のように少々工夫が必要でした。</p>
 <pre class="brush: js">var places = Components.classes["@mozilla.org/file/directory_service;1"].
                         getService(Components.interfaces.nsIProperties).
                         get("ProfD", Components.interfaces.nsIFile);
@@ -42,7 +42,7 @@ var db = Components.classes["@mozilla.org/storage/service;1"].
                     getService(Components.interfaces.nsPIPlacesDatabase).DBConnection;
 </pre>
 <h2 id="テキストボックスの検索">テキストボックスの検索</h2>
-<p><a class="internal" href="/ja/XUL/textbox" title="ja/XUL/Textbox"><code>textbox</code></a> の種類のひとつ、<code>timed</code> は廃止予定となりました。代わりに <code>search</code> を使ってください。</p>
+<p><a class="internal" href="/ja/XUL/textbox"><code>textbox</code></a> の種類のひとつ、<code>timed</code> は廃止予定となりました。代わりに <code>search</code> を使ってください。</p>
 <p>Firefox 3 では、以下のようなコードが使われていたはずです。</p>
 <pre>&lt;textbox type="timed" timeout="1000" oncommand="alert(this.value);"/&gt;
 </pre>
@@ -50,7 +50,7 @@ var db = Components.classes["@mozilla.org/storage/service;1"].
 <pre>&lt;textbox type="search" timeout="1000" oncommand="alert(this.value);"/&gt;
 </pre>
 <h2 id="JSON">JSON</h2>
-<p>JSON.jsm JavaScript モジュールは Firefox 3.1 では削除され、ネイティブの JSON オブジェクトサポートに置き換えられました。 詳しくは、<a class="internal" href="/ja/Using_JSON_in_Firefox" title="/ja/Using JSON in Firefox">Firefox で JSON を使用する</a> をご覧ください。JSON のより一般的な概要と、各種バージョンの Firefox で JSON を使う方法については、<a class="internal" href="/ja/JSON" title="ja/JSON">JSON</a> のページからリンクされている記事を参照してください。</p>
+<p>JSON.jsm JavaScript モジュールは Firefox 3.1 では削除され、ネイティブの JSON オブジェクトサポートに置き換えられました。 詳しくは、<a class="internal" href="/ja/Using_JSON_in_Firefox" title="/ja/Using JSON in Firefox">Firefox で JSON を使用する</a> をご覧ください。JSON のより一般的な概要と、各種バージョンの Firefox で JSON を使う方法については、<a class="internal" href="/ja/JSON">JSON</a> のページからリンクされている記事を参照してください。</p>
 <p>Firefox 3 と Firefox 3.1 の両方について互換性を確保するには、以下のように記述します。</p>
 <pre class="brush: js">if (typeof(JSON) == "undefined") {
   Components.utils.import("resource://gre/modules/JSON.jsm");
@@ -67,7 +67,7 @@ var db = Components.classes["@mozilla.org/storage/service;1"].
 <p>Firefox 3.1 では、カスタマイズ可能なツールバーの挙動が次のように変更されました。&lt;xul:toolbar/&gt; バインディングは、関連付けられた &lt;xul:toolbarpalette/&gt; からツールバー削除、もしくはツールバーへ追加するようになりました。これまでは、項目を複製してツールバーへコピーしていました。 つまり、パレットには、ツールバー上に存在しないアイテムしか含めることができません。これまでの挙動では、ツールバー上に表示されているかどうかに関わらず、カスタマイズ可能なすべての要素が含まれていました。 これは、&lt;xul:toolbarpalette/&gt; からカスタマイズ可能なすべてのツールバー項目を取得できることに依存した処理を行っていたり、ツールバーのカスタマイズ中に動的にパレットへ項目を挿入し、それらを利用可能にしようとしているアドオンで問題となる可能性があります。 詳しくは、{{ Bug(407725) }} と {{ Bug(467045) }} をご覧ください。</p>
 <h2 id="興味深い新機能">興味深い新機能</h2>
 <h3 id="すべてのタブのイベントを監視する">すべてのタブのイベントを監視する</h3>
-<p>Firefox 3.1 では、すべてのタブを監視するプログレスリスナーを追加、削除できるようになりました。 詳しくは、<a class="internal" href="/ja/Listening_to_events_on_all_tabs" title="ja/Listening to events on all tabs">すべてのタブのイベントを監視する</a> をご覧ください。</p>
+<p>Firefox 3.1 では、すべてのタブを監視するプログレスリスナーを追加、削除できるようになりました。 詳しくは、<a class="internal" href="/ja/Listening_to_events_on_all_tabs">すべてのタブのイベントを監視する</a> をご覧ください。</p>
 <h2 id="テーマ開発者の方へ">テーマ開発者の方へ</h2>
-<ul> <li><a class="internal" href="/ja/Theme_changes_in_Firefox_3.1" title="ja/Theme changes in Firefox 3.1">Firefox 3.1 でのテーマ関連の変更</a> を確認してください。</li> <li>Mozillazine フォーラムの <a class="topictitle external" href="http://forums.mozillazine.org/viewtopic.php?f=18&amp;t=665138" title="http://forums.mozillazine.org/viewtopic.php?f=18&amp;t=665138">Theme changes for FF3.1</a> を参照して、3.0 から 3.1 の間に行われた、テーマ開発者に影響するすべての変更の概要、一覧を確認してください。 このスレッドでは、CSS の新機能 (nth-child、-moz-box-shadow など)、既存の UI 部品への変更、UI 全体の改善、Firefox 3.1 の新機能 (audio/video のサポート、プライベートブラウジング、セッション復元機能の拡張、ボックス・ウィンドウ・テキストシャドウ) が議論されています。</li>
+<ul> <li><a class="internal" href="/ja/Theme_changes_in_Firefox_3.1">Firefox 3.1 でのテーマ関連の変更</a> を確認してください。</li> <li>Mozillazine フォーラムの <a class="topictitle external" href="http://forums.mozillazine.org/viewtopic.php?f=18&amp;t=665138" title="http://forums.mozillazine.org/viewtopic.php?f=18&amp;t=665138">Theme changes for FF3.1</a> を参照して、3.0 から 3.1 の間に行われた、テーマ開発者に影響するすべての変更の概要、一覧を確認してください。 このスレッドでは、CSS の新機能 (nth-child、-moz-box-shadow など)、既存の UI 部品への変更、UI 全体の改善、Firefox 3.1 の新機能 (audio/video のサポート、プライベートブラウジング、セッション復元機能の拡張、ボックス・ウィンドウ・テキストシャドウ) が議論されています。</li>
 </ul>
diff --git a/files/ja/mozilla/firefox/releases/3/updating_extensions/index.html b/files/ja/mozilla/firefox/releases/3/updating_extensions/index.html
index 910891d3dd..8a7859aa32 100644
--- a/files/ja/mozilla/firefox/releases/3/updating_extensions/index.html
+++ b/files/ja/mozilla/firefox/releases/3/updating_extensions/index.html
@@ -12,7 +12,7 @@ original_slug: Updating_extensions_for_Firefox_3
 
 <h3 id="Step_1_.E3.82.A4.E3.83.B3.E3.82.B9.E3.83.88.E3.83.BC.E3.83.AB.E5.AE.9A.E7.BE.A9.E3.83.95.E3.82.A1.E3.82.A4.E3.83.AB.E3.82.92.E6.9B.B4.E6.96.B0.E3.81.99.E3.82.8B" name="Step_1:_.E3.82.A4.E3.83.B3.E3.82.B9.E3.83.88.E3.83.BC.E3.83.AB.E5.AE.9A.E7.BE.A9.E3.83.95.E3.82.A1.E3.82.A4.E3.83.AB.E3.82.92.E6.9B.B4.E6.96.B0.E3.81.99.E3.82.8B">Step 1: インストール定義ファイルを更新する</h3>
 
-<p>最初のステップ、そして、ほとんどの拡張機能にとって必要となるたったひとつのステップは、Firefox 3 との互換性を示すために <a href="/ja/Install_Manifests" title="ja/Install_Manifests">インストール定義ファイル</a> (<code>install.rdf</code>) を更新する作業です。</p>
+<p>最初のステップ、そして、ほとんどの拡張機能にとって必要となるたったひとつのステップは、Firefox 3 との互換性を示すために <a href="/ja/Install_Manifests">インストール定義ファイル</a> (<code>install.rdf</code>) を更新する作業です。</p>
 
 <p>ファイルを開いて、互換性がある Firefox の最高バージョンを示す行を見つけます。Firefox 2 向けの拡張機能であれば、以下のように書かれているはずです。</p>
 
@@ -34,11 +34,11 @@ original_slug: Updating_extensions_for_Firefox_3
 
 <h4 id=".E3.82.A4.E3.83.B3.E3.82.B9.E3.83.88.E3.83.BC.E3.83.AB.E5.AE.9A.E7.BE.A9.E3.83.95.E3.82.A1.E3.82.A4.E3.83.AB.E3.81.AB.E7.BF.BB.E8.A8.B3.E3.82.92.E8.BF.BD.E5.8A.A0.E3.81.99.E3.82.8B" name=".E3.82.A4.E3.83.B3.E3.82.B9.E3.83.88.E3.83.BC.E3.83.AB.E5.AE.9A.E7.BE.A9.E3.83.95.E3.82.A1.E3.82.A4.E3.83.AB.E3.81.AB.E7.BF.BB.E8.A8.B3.E3.82.92.E8.BF.BD.E5.8A.A0.E3.81.99.E3.82.8B">インストール定義ファイルに翻訳を追加する</h4>
 
-<p>Firefox 3 は、翻訳された説明文を指定するための新しいプロパティを、インストール定義ファイル内でサポートしています。今までの方法も引き続き動作しますが、この新しい方法を利用すれば、アドオンが無効化されていたりインストールが保留されている場合も、各言語で説明文を表示できるようになります。詳しくは <a href="/ja/Localizing_extension_descriptions" title="ja/Localizing_extension_descriptions">拡張機能の説明の翻訳</a> をご覧ください。</p>
+<p>Firefox 3 は、翻訳された説明文を指定するための新しいプロパティを、インストール定義ファイル内でサポートしています。今までの方法も引き続き動作しますが、この新しい方法を利用すれば、アドオンが無効化されていたりインストールが保留されている場合も、各言語で説明文を表示できるようになります。詳しくは <a href="/ja/Localizing_extension_descriptions">拡張機能の説明の翻訳</a> をご覧ください。</p>
 
 <h3 id="Step_2_.E5.AE.89.E5.85.A8.E3.81.AA.E6.9B.B4.E6.96.B0.E3.82.92.E6.8F.90.E4.BE.9B.E3.81.97.E3.81.A6.E3.81.84.E3.82.8B.E3.81.8B.E7.A2.BA.E8.AA.8D.E3.81.99.E3.82.8B" name="Step_2:_.E5.AE.89.E5.85.A8.E3.81.AA.E6.9B.B4.E6.96.B0.E3.82.92.E6.8F.90.E4.BE.9B.E3.81.97.E3.81.A6.E3.81.84.E3.82.8B.E3.81.8B.E7.A2.BA.E8.AA.8D.E3.81.99.E3.82.8B">Step 2: 安全な更新を提供しているか確認する</h3>
 
-<p>あなたが独自にアドオンを配布していて、<a class="link-https" href="https://addons.mozilla.org">addons.mozilla.org</a> のような安全なアドオン提供サービスを利用していない場合、アドオンの更新に安全な方法を用いる必要があります。つまり、SSL を利用した Web サイト上で更新を提供するか、暗号鍵を使って更新情報に署名する必要があります。詳しくは <a href="/ja/Extension_Versioning,_Update_and_Compatibility#Securing_Updates" title="ja/Extension_Versioning,_Update_and_Compatibility#Securing_Updates">安全な更新</a> をご覧ください。</p>
+<p>あなたが独自にアドオンを配布していて、<a class="link-https" href="https://addons.mozilla.org">addons.mozilla.org</a> のような安全なアドオン提供サービスを利用していない場合、アドオンの更新に安全な方法を用いる必要があります。つまり、SSL を利用した Web サイト上で更新を提供するか、暗号鍵を使って更新情報に署名する必要があります。詳しくは <a href="/ja/Extension_Versioning,_Update_and_Compatibility#Securing_Updates">安全な更新</a> をご覧ください。</p>
 
 <h3 id="Step_3_.E5.A4.89.E6.9B.B4.E3.81.95.E3.82.8C.E3.81.9F_API_.E3.81.AB.E5.AF.BE.E5.BF.9C.E3.81.99.E3.82.8B" name="Step_3:_.E5.A4.89.E6.9B.B4.E3.81.95.E3.82.8C.E3.81.9F_API_.E3.81.AB.E5.AF.BE.E5.BF.9C.E3.81.99.E3.82.8B">Step 3: 変更された API に対応する</h3>
 
@@ -55,31 +55,31 @@ original_slug: Updating_extensions_for_Firefox_3
 
 <h4 id=".E3.83.96.E3.83.83.E3.82.AF.E3.83.9E.E3.83.BC.E3.82.AF.E3.81.A8.E5.B1.A5.E6.AD.B4" name=".E3.83.96.E3.83.83.E3.82.AF.E3.83.9E.E3.83.BC.E3.82.AF.E3.81.A8.E5.B1.A5.E6.AD.B4">ブックマークと履歴</h4>
 
-<p>あなたの拡張機能から何らかの方法でブックマークや履歴のデータにアクセスしている場合、Firefox 3 と互換性を持たせるには多くの作業が必要です。これらの情報にアクセスするための古い API は、<a href="/ja/Places" title="ja/Places">Places</a> という新しいアーキテクチャに置き換えられました。既存の拡張機能を Places API に対応させる方法については、<a href="/ja/Places_migration_guide" title="ja/Places_migration_guide">Places への移行ガイド</a> で詳しく解説しています。</p>
+<p>あなたの拡張機能から何らかの方法でブックマークや履歴のデータにアクセスしている場合、Firefox 3 と互換性を持たせるには多くの作業が必要です。これらの情報にアクセスするための古い API は、<a href="/ja/Places">Places</a> という新しいアーキテクチャに置き換えられました。既存の拡張機能を Places API に対応させる方法については、<a href="/ja/Places_migration_guide">Places への移行ガイド</a> で詳しく解説しています。</p>
 
 <h4 id=".E3.83.80.E3.82.A6.E3.83.B3.E3.83.AD.E3.83.BC.E3.83.89.E3.83.9E.E3.83.8D.E3.83.BC.E3.82.B8.E3.83.A3" name=".E3.83.80.E3.82.A6.E3.83.B3.E3.83.AD.E3.83.BC.E3.83.89.E3.83.9E.E3.83.8D.E3.83.BC.E3.82.B8.E3.83.A3">ダウンロードマネージャ</h4>
 
-<p>RDF データ形式から <a href="/ja/Storage" title="ja/Storage">Storage</a> API への移行にあたって、ダウンロードマネージャの API にも若干変更が加えられました。これに関する移行作業は非常に簡単なはずです。また、複数のダウンロードマネージャリスナーをサポートするため、ダウンロードの進捗状況を監視する API にも変更がありました。詳しくは <code><a href="/ja/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIDownloadManager" title="">nsIDownloadManager</a></code>、<code><a href="/ja/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIDownloadProgressListener" title="">nsIDownloadProgressListener</a></code>、<a href="/ja/Monitoring_downloads" title="ja/Monitoring_downloads">ダウンロードの監視</a> を参照してください。</p>
+<p>RDF データ形式から <a href="/ja/Storage">Storage</a> API への移行にあたって、ダウンロードマネージャの API にも若干変更が加えられました。これに関する移行作業は非常に簡単なはずです。また、複数のダウンロードマネージャリスナーをサポートするため、ダウンロードの進捗状況を監視する API にも変更がありました。詳しくは <code><a href="/ja/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIDownloadManager" title="">nsIDownloadManager</a></code>、<code><a href="/ja/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIDownloadProgressListener" title="">nsIDownloadProgressListener</a></code>、<a href="/ja/Monitoring_downloads">ダウンロードの監視</a> を参照してください。</p>
 
 <h4 id=".E3.83.91.E3.82.B9.E3.83.AF.E3.83.BC.E3.83.89.E3.83.9E.E3.83.8D.E3.83.BC.E3.82.B8.E3.83.A3" name=".E3.83.91.E3.82.B9.E3.83.AF.E3.83.BC.E3.83.89.E3.83.9E.E3.83.8D.E3.83.BC.E3.82.B8.E3.83.A3">パスワードマネージャ</h4>
 
 <p>あなたの拡張機能からパスワードマネージャを利用してユーザのログイン情報にアクセスしている場合、新しいログインマネージャ API を利用するように更新する必要があります。</p>
 
 <ul>
- <li><a href="/ja/Using_nsILoginManager" title="ja/Using_nsILoginManager">nsILoginManager の使い方</a> という記事には、パスワードマネージャとログインマネージャの両方を用いることで、Firefox 3 とそれ以前のバージョンの両方で機能拡張を動作させるデモなど、コードサンプルが載っています。</li>
- <li><code><a href="/ja/nsILoginInfo" title="ja/nsILoginInfo">nsILoginInfo</a></code></li>
- <li><code><a href="/ja/nsILoginManager" title="ja/nsILoginManager">nsILoginManager</a></code></li>
+ <li><a href="/ja/Using_nsILoginManager">nsILoginManager の使い方</a> という記事には、パスワードマネージャとログインマネージャの両方を用いることで、Firefox 3 とそれ以前のバージョンの両方で機能拡張を動作させるデモなど、コードサンプルが載っています。</li>
+ <li><code><a href="/ja/nsILoginInfo">nsILoginInfo</a></code></li>
+ <li><code><a href="/ja/nsILoginManager">nsILoginManager</a></code></li>
 </ul>
 
-<p>あなたが拡張機能の中で独自のパスワードストレージを提供したい場合は、組み込みのパスワードマネージャストレージを上書きすることもできます。詳しくは <a href="/ja/Creating_a_Login_Manager_storage_module" title="ja/Creating_a_Login_Manager_storage_module">ログインマネージャ用ストレージモジュールの作成</a> をご覧ください。</p>
+<p>あなたが拡張機能の中で独自のパスワードストレージを提供したい場合は、組み込みのパスワードマネージャストレージを上書きすることもできます。詳しくは <a href="/ja/Creating_a_Login_Manager_storage_module">ログインマネージャ用ストレージモジュールの作成</a> をご覧ください。</p>
 
 <h4 id=".E3.83.9D.E3.83.83.E3.83.97.E3.82.A2.E3.83.83.E3.83.97_.28.E3.83.A1.E3.83.8B.E3.83.A5.E3.83.BC.E3.80.81.E3.82.B3.E3.83.B3.E3.83.86.E3.82.AD.E3.82.B9.E3.83.88.E3.83.A1.E3.83.8B.E3.83.A5.E3.83.BC.E3.80.81.E3.83.84.E3.83.BC.E3.83.AB.E3.83.81.E3.83.83.E3.83.97.E3.80.81.E3.83.91.E3.83.8D.E3.83.AB.29" name=".E3.83.9D.E3.83.83.E3.83.97.E3.82.A2.E3.83.83.E3.83.97_.28.E3.83.A1.E3.83.8B.E3.83.A5.E3.83.BC.E3.80.81.E3.82.B3.E3.83.B3.E3.83.86.E3.82.AD.E3.82.B9.E3.83.88.E3.83.A1.E3.83.8B.E3.83.A5.E3.83.BC.E3.80.81.E3.83.84.E3.83.BC.E3.83.AB.E3.83.81.E3.83.83.E3.83.97.E3.80.81.E3.83.91.E3.83.8D.E3.83.AB.29">ポップアップ (メニュー、コンテキストメニュー、ツールチップ、パネル)</h4>
 
-<p>XUL のポップアップシステムは Firefox 3 で大幅に変更されました。ポップアップシステムには、メインメニュー、コンテキストメニュー、ポップアップパネルが含まれます。新しいシステムの仕組みについては <a href="/ja/XUL/PopupGuide" title="ja/XUL/PopupGuide">ポップアップの使用</a> ガイドをご覧ください。特筆すべき点は、<code>popup.<span id="m-showPopup"><code><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Method/showPopup">showPopup</a></code></span></code> が非推奨となり、新しい <code>popup.<span id="m-openPopup"><code><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Method/openPopup">openPopup</a></code></span></code> と <code>popup.<span id="m-openPopupAtScreen"><code><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Method/openPopupAtScreen">openPopupAtScreen</a></code></span></code> に置き換えられたことです。</p>
+<p>XUL のポップアップシステムは Firefox 3 で大幅に変更されました。ポップアップシステムには、メインメニュー、コンテキストメニュー、ポップアップパネルが含まれます。新しいシステムの仕組みについては <a href="/ja/XUL/PopupGuide">ポップアップの使用</a> ガイドをご覧ください。特筆すべき点は、<code>popup.<span id="m-showPopup"><code><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Method/showPopup">showPopup</a></code></span></code> が非推奨となり、新しい <code>popup.<span id="m-openPopup"><code><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Method/openPopup">openPopup</a></code></span></code> と <code>popup.<span id="m-openPopupAtScreen"><code><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Method/openPopupAtScreen">openPopupAtScreen</a></code></span></code> に置き換えられたことです。</p>
 
 <h4 id=".E8.87.AA.E5.8B.95.E8.A3.9C.E5.AE.8C" name=".E8.87.AA.E5.8B.95.E8.A3.9C.E5.AE.8C">自動補完</h4>
 
-<p><code><a href="/ja/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIAutoCompleteController" title="">nsIAutoCompleteController</a></code> インタフェースの <code><a href="/ja/NsIAutoCompleteController#handleEnter.28.29" title="ja/NsIAutoCompleteController#handleEnter.28.29">handleEnter()</a></code> メソッドは、テキストが自動補完ポップアップから選択されたか、ユーザが自分で入力した後 Enter キーを押したかを示す引数を受け付けるよう変更が行われました。</p>
+<p><code><a href="/ja/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIAutoCompleteController" title="">nsIAutoCompleteController</a></code> インタフェースの <code><a href="/ja/NsIAutoCompleteController#handleEnter.28.29">handleEnter()</a></code> メソッドは、テキストが自動補完ポップアップから選択されたか、ユーザが自分で入力した後 Enter キーを押したかを示す引数を受け付けるよう変更が行われました。</p>
 
 <h4 id="DOMParser" name="DOMParser">DOMParser</h4>
 
@@ -133,16 +133,16 @@ original_slug: Updating_extensions_for_Firefox_3
  <li><code><a class="external" rel="freelink">chrome://browser/base/utilityOverlay.js</a></code> は、セキュリティ上の理由からサポートされなくなりました。これまでこのスクリプトを利用していた場合は、<code><a class="external" rel="freelink">chrome://browser/content/utilityOverlay.js</a></code> へ切り替えてください。</li>
  <li><code><a href="/ja/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIAboutModule" title="">nsIAboutModule</a></code> の実装には、<code>getURIFlags</code> メソッドのサポートが必要になりました。詳しくは <a href="https://dxr.mozilla.org/mozilla-central/source/netwerk/protocol/about/public/nsIAboutModule.idl" rel="custom">nsIAboutModule.idl</a> を参照してください。これは新しい <code>about:</code> URI を提供する拡張機能に影響します (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=337746" title='FIXED: [FIX]Move "safe about" hardcoding out of security manager'>バグ 337746</a>)。</li>
  <li><code><a href="/ja/docs/Mozilla/Tech/XUL/tabbrowser" title="tabbrowser">tabbrowser</a></code> 要素は「ツールキット」の一部ではなくなりました (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=339964" title="FIXED: move tabbrowser.xml out of mozilla/toolkit and into mozilla/browser">バグ 339964</a>)。このため、この要素は今後 XUL アプリケーションや拡張機能の中では利用できません。ただし、Firefox のメインウィンドウ (browser.xul) では今後も使われます。</li>
- <li><a href="/ja/nsISupports_proxies" title="ja/nsISupports_proxies">nsISupports プロキシ</a> の変更と、おそらくスレッド関連インタフェースへの変更については、ドキュメントを用意する必要があります。</li>
+ <li><a href="/ja/nsISupports_proxies">nsISupports プロキシ</a> の変更と、おそらくスレッド関連インタフェースへの変更については、ドキュメントを用意する必要があります。</li>
  <li>XUL ファイル内で <code>&lt;?xml-stylesheet ?&gt;</code> などの XML 処理命令を用いている場合、<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=319654" title="FIXED: Processing instructions in XUL are not added to the content model">バグ 319654</a> で行われた以下の変更に注意してください。
   <ol>
    <li>XML PI が XUL ドキュメントの DOM に追加されました。これは、<a href="/ja/docs/Web/API/Document/firstChild" title="この項目についての文書はまだ書かれていません。書いてみませんか？"><code>document.firstChild</code></a> が必ずしもルート要素を返すとは限らない、ということを意味します。スクリプト内でルートドキュメントを得るには、代わりに <a href="/ja/docs/Web/API/Document/documentElement" title="Document.documentElement は、その document のルート要素 (例えば、 HTML 文書の場合は &lt;html> 要素) である Element を返します。"><code>document.documentElement</code></a> を用いてください。</li>
    <li><code>&lt;?xml-stylesheet ?&gt;</code> と <code>&lt;?xul-overlay ?&gt;</code> 処理命令は、ドキュメントの前文以外の場所に書かれた場合、動作しなくなりました。</li>
   </ol>
  </li>
- <li><code>window.addEventListener("load", myFunc, true)</code> が、Web コンテンツが読み込まれた際 (ブラウザのページ読み込み時) に呼び出されなくなりました。これは、inner ウィンドウと outer ウィンドウの関係が変わったことによります (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=296639" title="FIXED: Split windows into an inner and outer object">バグ 296639</a>)。簡単な修正方法は、<a href="/ja/Code_snippets/Tabbed_browser#Detecting_page_load" title="ja/Code_snippets/Tabbed_browser#Detecting_page_load">ここ</a> に書かれているように <code>gBrowser.addEventListener("load", myFunc, true)</code> を使うことです。この方法は Firefox 2 でも有効です。</li>
+ <li><code>window.addEventListener("load", myFunc, true)</code> が、Web コンテンツが読み込まれた際 (ブラウザのページ読み込み時) に呼び出されなくなりました。これは、inner ウィンドウと outer ウィンドウの関係が変わったことによります (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=296639" title="FIXED: Split windows into an inner and outer object">バグ 296639</a>)。簡単な修正方法は、<a href="/ja/Code_snippets/Tabbed_browser#Detecting_page_load">ここ</a> に書かれているように <code>gBrowser.addEventListener("load", myFunc, true)</code> を使うことです。この方法は Firefox 2 でも有効です。</li>
  <li><code>content.window.getSelection()</code> は、文字列を返す、非推奨となった <code>content.document.getSelection()</code> とは異なり、オブジェクトを返します (<code>toString()</code> を使えば文字列に変換できます)。</li>
- <li><code>event.preventBubble()</code> は Firefox 3 で非推奨となり、Firefox 3 で削除されました。Firefox 2 でも動作する <a href="/ja/DOM/event.stopPropagation" title="ja/DOM/event.stopPropagation"><code>event.stopPropagation()</code></a> を使ってください。</li>
+ <li><code>event.preventBubble()</code> は Firefox 3 で非推奨となり、Firefox 3 で削除されました。Firefox 2 でも動作する <a href="/ja/DOM/event.stopPropagation"><code>event.stopPropagation()</code></a> を使ってください。</li>
  <li><code>setTimeout()</code> を使って開始されるタイマーは、<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=52209" title="FIXED: JS timers can fire while a modal dialog is open">バグ 52209</a> のために行われた修正によって、モーダル形式のウィンドウではブロックされるようになりました。代わりに <code><a href="/ja/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsITimer" title="">nsITimer</a></code> を使ってください。</li>
  <li>信頼できないソース（例：Web サイト）が拡張のクロームにアクセスできるようにする必要がある場合は、新しい <a href="../../../../ja/Chrome_Registration#contentaccessible" rel="internal"><code>contentaccessible</code> フラグ</a> を使わなければなりません。</li>
 </ul>
diff --git a/files/ja/mozilla/firefox/releases/91/index.html b/files/ja/mozilla/firefox/releases/91/index.html
new file mode 100644
index 0000000000..44e62cdb71
--- /dev/null
+++ b/files/ja/mozilla/firefox/releases/91/index.html
@@ -0,0 +1,73 @@
+---

+title: Firefox 91 for developers

+slug: Mozilla/Firefox/Releases/91

+tags:

+  - '91'

+  - Firefox

+  - Mozilla

+  - Release

+---

+<p>{{FirefoxSidebar}}</p>

+

+<p class="summary">このページでは、開発者に影響する Firefox 91 の変更点をまとめています。Firefox 91 は 2021 年 8 月 10 日にリリースされました。</p>

+

+<div class="note notecard">

+  <h4>補足</h4>

+  <p>Mozilla Hacks の <a href="https://hacks.mozilla.org/2021/08/hopping-on-firefox-91/">Hopping on Firefox 91</a> もご覧ください。</p>

+</div>

+

+<h2 id="Changes_for_web_developers">ウェブ開発者向けの変更点一覧</h2>

+

+

+<h3 id="HTML">HTML</h3>

+

+<p>変更なし。</p>

+

+<h3 id="CSS">CSS</h3>

+

+<ul>

+  <li>{{cssxref("@counter-style/pad")}} ディスクリプターが負符号を扱う方法を修正しました ({{bug(1714445)}})。</li>

+  <li><code>-moz-tab-size</code> プロパティの接頭辞を削除して、標準化された {{cssxref("tab-size")}} にしました。また、接頭辞つきのプロパティを別名として維持します ({{bug(737785)}})。</li>

+</ul>

+

+<h4 id="removals_css">廃止</h4>

+

+<ul>

+  <li>非標準の {{cssxref("-moz-outline-radius")}} プロパティを削除しました ({{bug(1715984)}})。このプロパティは Firefox 88 からウェブ開発者が使用できず、このバージョンで完全に廃止しました。</li>

+</ul>

+

+<h3 id="JavaScript">JavaScript</h3>

+

+<ul>

+  <li>{{jsxref("Intl/DateTimeFormat/formatRange", "Intl.DateTimeFormat.prototype.formatRange()")}} および {{jsxref("Intl/DateTimeFormat/formatRangeToParts", "Intl.DateTimeFormat.prototype.formatRangeToParts()")}} を、Release ビルドでサポートしました。<code>formatRange()</code> メソッドは、2 つの {{jsxref("Date")}} オブジェクトの間の期間をローカライズおよび整形した文字列で返します (例: "21/01/05 – 21/01/10")。<code>formatRangeToParts()</code> メソッドは、整形された期間のロケール固有の<em>部品</em>を持つ配列を返します ({{bug(1653024)}})。</li>

+  <li>{{jsxref("Intl/DateTimeFormat/DateTimeFormat", "Intl.DateTimeFormat() コンストラクター")}} が、タイムゾーンの表示方法を整形するための <code>timeZoneName</code> オプションを新たに 4 種類受け入れるようになりました。これにはローカライズされた GMT 形式の <code>shortOffset</code> および <code>longOffset</code> と、一般的な非ロケーション形式の <code>shortGeneric</code> および <code>longGeneric</code> が含まれます ({{bug(1653024)}})。</li>

+  <li>{{jsxref("Global_Objects/Error/Error", "Error() コンストラクター")}} が、<code>option</code> 引数の値として <code>cause</code> をとれるようになりました。これはコードがエラーをキャッチして、元のエラーやスタックトレースを持つ新たなバージョン、または変更したバージョンのエラーを発生させることができます ({{bug(1653024)}})。</li>

+ </ul>

+

+

+<h3 id="HTTP">HTTP</h3>

+

+<ul>

+  <li><a href="/ja/docs/Web/API/Gamepad_API">Gamepad API</a> が <a href="/ja/docs/Web/Security/Secure_Contexts">安全なコンテキスト</a> を要求するようになりました ({{bug(1704005)}})。</li>

+</ul>

+

+<h3 id="APIs">API</h3>

+

+<h4 id="DOM">DOM</h4>

+

+<ul>

+  <li><a href="/ja/docs/Web/API/Visual_Viewport_API">Visual Viewport API</a> がデスクトップ版 Firefox でデフォルトで有効になりました (Android 版 Firefox はバージョン 68 で有効にしていました)。この API はドキュメントに対する {{Glossary("visual viewport", "視覚的ビューポート")}} の位置を表す情報へ、ウィンドウのコンテンツエリアと同様にアクセスする手段を提供します。また、ビューポートの変更を監視できるイベントも提供します ({{bug(1551302)}}).</li>

+  <li><a href="/ja/docs/Web/API/Gamepad_API">Gamepad API</a> が {{httpheader('Feature-Policy/gamepad','Feature-Policy: gamepad')}} で保護されるようになりました。<a href="/ja/docs/Web/HTTP/Feature_Policy">機能ポリシー</a> で拒否された場合は、{{domxref('Navigator.getGamepads()')}} を呼び出すと <code>SecurityError</code> {{domxref('DOMException')}} が発生して、{{event("gamepadconnected")}} および {{event("gamepaddisconnected")}} イベントは発生しません。既定の <code>allowlist</code> は <code>*</code> です。この既定値は、仕様書に合わせるため将来のリリースで <code>self</code> に更新する予定です ({{bug(1704005)}})。</li>

+  <li>最近の仕様書の更新に準拠するため、および他の主要なブラウザーとの互換性を向上させるために、<code>Window.clientInformation</code> を {{domxref("Window.navigator")}} の別名として追加しました ({{bug(1717072)}})。</li>

+</ul>

+

+

+<h3 id="webdriver_conformance_marionette">WebDriver conformance (Marionette)</h3>

+<ul>

+  <li>ポップアップウィンドウで開いたユーザープロンプトで、<code>WebDriver:AcceptAlert</code> および <code>WebDriver:DismissAlert</code> コマンドがハングアップを起こす不具合を修正しました ({{bug(1721982)}})。</li>

+  <li><code>webSocketUrl</code> 特性の不適切な取り扱いを修正しました。<code>webSocketUrl</code> が未サポートでしたが <code>true</code> を返していました ({{bug(1713775)}})。</li>

+</ul>

+

+<h2 id="Older_versions">過去のバージョン</h2>

+

+<p>{{Firefox_for_developers(90)}}</p>

diff --git a/files/ja/orphaned/developing_add-ons/index.html b/files/ja/orphaned/developing_add-ons/index.html
index 7cdb848269..2223fbf2a2 100644
--- a/files/ja/orphaned/developing_add-ons/index.html
+++ b/files/ja/orphaned/developing_add-ons/index.html
@@ -4,6 +4,6 @@ slug: orphaned/Developing_add-ons
 original_slug: Developing_add-ons
 ---
 <p>Mozilla ベースのソフトウェアはたいていアドオンを通して拡張可能です。アドオンには、拡張機能、プラグイン、テーマの 3 つの主なタイプがあります。このページはFirefox、Thunderbird、あるいは、Mozilla プラットフォームをベースにしたその他のソフトウェア向けのアドオンを作成するために必要となる情報、および、作成したアドオンを配布する方法のガイドを提供します。</p>
-<table class="mainpage-table"> <tbody> <tr> <td colspan="2"> <h2 id="アドオンに関するトピックス">アドオンに関するトピックス</h2> </td> </tr> <tr> <td> <dl> <dt><a class="internal" href="/ja/Submitting_an_add-on_to_AMO" title="ja/Submitting an add-on to AMO">アドオンを AMO に提出する</a></dt> <dd>アドオン開発者がアドオンを正しくパッケージし配布するために助けとなる情報を提供します。このページには Mozilla のアドオン配布 Web サイトである addons.mozilla.org についての情報が含まれています。</dd> <dt><a class="internal" href="/ja/Extensions" title="ja/Extensions">拡張機能</a></dt> <dd>拡張機能は Firefox や SeaMonkey、Thunderbird のような Mozilla アプリケーションに新しい機能を追加します。ツールバーボタンから完全に新しい形態のものまであらゆるものを追加できます。</dd> <dt><a class="internal" href="/ja/Plugins" title="ja/Plugins">プラグイン</a></dt> <dd>Mozilla ベースのソフトウェアにネイティブでは扱えないコンテンツを表示させることを可能にさせるバイナリコンポーネントである、プラグインの作成方法についての情報。</dd> <dt><a class="internal" href="/ja/Jetpack" title="ja/Jetpack">Jetpack</a></dt> <dd>あらゆる人のためのブラウザ拡張開発システムです。Jetpack 開発者はモダンな web のツールである HTML と CSS、JavaScript を知っているだけで良いのです。</dd> </dl> </td> <td> <dl> <dt><a class="internal" href="/ja/Themes" title="ja/Themes">テーマ</a></dt> <dd>テーマはユーザに Mozilla ベースのアプリケーションによって提供されているユーザインターフェースの見た目をカスタマイズさせることを可能にします。</dd> <dt><a class="internal" href="/ja/Creating_OpenSearch_plugins_for_Firefox" title="ja/Creating OpenSearch plugins for Firefox">検索エンジンプラグイン</a></dt> <dd>Firefox は検索ボックスで異なる検索エンジンをサポートすることを可能にする検索エンジンプラグインをサポートしています。</dd> <dt><a class="internal" href="/ja/addons.mozilla.org_(AMO)_API_Developers'_Guide" title="ja/addons.mozilla.org (AMO) API Developers' Guide">addons.mozilla.org (AMO) API Developers' Guide</a></dt> <dd>AMO Developers' Guide は addons.mozilla.org からアドオンにつての情報を入手するための AMO API の利用方法を説明します。</dd> <dt><a href="/ja/The_Mozilla_platform" title="ja/The Mozilla platform">Mozilla プラットフォーム</a></dt> <dd>API および技術のすべて、また、それらをあなた自身のプロジェクトで利用する方法を含む、Mozilla プラットフォームについての情報。</dd> </dl> </td> </tr> </tbody>
+<table class="mainpage-table"> <tbody> <tr> <td colspan="2"> <h2 id="アドオンに関するトピックス">アドオンに関するトピックス</h2> </td> </tr> <tr> <td> <dl> <dt><a class="internal" href="/ja/Submitting_an_add-on_to_AMO">アドオンを AMO に提出する</a></dt> <dd>アドオン開発者がアドオンを正しくパッケージし配布するために助けとなる情報を提供します。このページには Mozilla のアドオン配布 Web サイトである addons.mozilla.org についての情報が含まれています。</dd> <dt><a class="internal" href="/ja/Extensions">拡張機能</a></dt> <dd>拡張機能は Firefox や SeaMonkey、Thunderbird のような Mozilla アプリケーションに新しい機能を追加します。ツールバーボタンから完全に新しい形態のものまであらゆるものを追加できます。</dd> <dt><a class="internal" href="/ja/Plugins">プラグイン</a></dt> <dd>Mozilla ベースのソフトウェアにネイティブでは扱えないコンテンツを表示させることを可能にさせるバイナリコンポーネントである、プラグインの作成方法についての情報。</dd> <dt><a class="internal" href="/ja/Jetpack">Jetpack</a></dt> <dd>あらゆる人のためのブラウザ拡張開発システムです。Jetpack 開発者はモダンな web のツールである HTML と CSS、JavaScript を知っているだけで良いのです。</dd> </dl> </td> <td> <dl> <dt><a class="internal" href="/ja/Themes">テーマ</a></dt> <dd>テーマはユーザに Mozilla ベースのアプリケーションによって提供されているユーザインターフェースの見た目をカスタマイズさせることを可能にします。</dd> <dt><a class="internal" href="/ja/Creating_OpenSearch_plugins_for_Firefox">検索エンジンプラグイン</a></dt> <dd>Firefox は検索ボックスで異なる検索エンジンをサポートすることを可能にする検索エンジンプラグインをサポートしています。</dd> <dt><a class="internal" href="/ja/addons.mozilla.org_(AMO)_API_Developers'_Guide">addons.mozilla.org (AMO) API Developers' Guide</a></dt> <dd>AMO Developers' Guide は addons.mozilla.org からアドオンにつての情報を入手するための AMO API の利用方法を説明します。</dd> <dt><a href="/ja/The_Mozilla_platform">Mozilla プラットフォーム</a></dt> <dd>API および技術のすべて、また、それらをあなた自身のプロジェクトで利用する方法を含む、Mozilla プラットフォームについての情報。</dd> </dl> </td> </tr> </tbody>
 </table>
 <p>{{ languages( { "en": "en/Developing_add-ons", "zh-cn": "cn/Developing_add-ons"} ) }}</p>
diff --git a/files/ja/orphaned/installing_extensions/index.html b/files/ja/orphaned/installing_extensions/index.html
index 2451f21b18..bd870d9056 100644
--- a/files/ja/orphaned/installing_extensions/index.html
+++ b/files/ja/orphaned/installing_extensions/index.html
@@ -7,7 +7,7 @@ tags:
 original_slug: Installing_extensions
 ---
 <p>{{ Gecko_minversion_header(1.9) }}</p>
-<p>toolkit ベースのアプリケーション（Firefox やその他の <a href="/ja/XULRunner" title="ja/XULRunner">XULRunner</a> を使用したアプリケーション）向けの拡張機能をインストールする機能をインストーラに持たせたい場合について、Gecko 1.9（Firefox 3）は Windows、Mac OS X、Linux 上でそれを簡単に行えるようにするための機能を提供します。Windows ユーザについては、当面の所は<a href="/ja/Adding_Extensions_using_the_Windows_Registry" title="ja/Adding_Extensions_using_the_Windows_Registry">レジストリを使って拡張機能をインストールする方法</a>も利用できます。</p>
+<p>toolkit ベースのアプリケーション（Firefox やその他の <a href="/ja/XULRunner">XULRunner</a> を使用したアプリケーション）向けの拡張機能をインストールする機能をインストーラに持たせたい場合について、Gecko 1.9（Firefox 3）は Windows、Mac OS X、Linux 上でそれを簡単に行えるようにするための機能を提供します。Windows ユーザについては、当面の所は<a href="/ja/Adding_Extensions_using_the_Windows_Registry">レジストリを使って拡張機能をインストールする方法</a>も利用できます。</p>
 <p>現在、Mac OS X および Linux においては、ユーザのコンピュータ内のあらかじめ決められた位置のディレクトリに拡張機能をコピーするだけでよいです。</p>
 <p>この方法を通じてインストールされた拡張機能については、新しく作成された物・既に存在していた物を問わず、そのアプリケーションのすべてのプロファイルに対してインストールされる事に注意してください。</p>
 <h3 id="Windows" name="Windows">Windows</h3>
diff --git a/files/ja/orphaned/introduction_to_dom_inspector/index.html b/files/ja/orphaned/introduction_to_dom_inspector/index.html
deleted file mode 100644
index 66b2844ffe..0000000000
--- a/files/ja/orphaned/introduction_to_dom_inspector/index.html
+++ /dev/null
@@ -1,39 +0,0 @@
----
-title: DOM Inspector 入門
-slug: orphaned/Introduction_to_DOM_Inspector
-original_slug: Introduction_to_DOM_Inspector
----
-<p>DOM Inspector はブラウザの <strong>Tools &gt; Web Development</strong> メニューからアクセスできる Mozilla のアプリケーションです。これはウェブ開発者が <a href="/en/DOM" title="en/DOM">DOM</a> 全体を見たり、必要なら手動で DOM を更新したりできるようにします。</p>
-<div class="note"><strong>注意:</strong> Firefox 3 以降、DOM Inspector はデフォルトインストールには含まれなくなりました。替わりに、Mozilla add-ons サイトから <a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/6622">ダウンロードしてインストールする</a> 必要があります。</div>
-<p>DOM Inspector を最初に起動すると、Mozilla ブラウザに似た2ペインのアプリケーションウィンドウが開きます。ブラウザのように DOM Inspector は URL バー、サイドバー（左ペイン）、メニューを持ち、<strong>Window</strong> や <strong>Tools</strong> メニューは Mail や Chatzilla やその他の小さな拡張機能やダイアログのようなブラウザスイートのメインアプリケーションへのアクセスを提供します。</p>
-<p><img align="none" alt="empty DOM Inspector" class=" internal" src="/@api/deki/files/177/=Di_empty.gif"></p>
-<h2 id="Starting_the_DOM_Inspector" name="Starting_the_DOM_Inspector">DOM Inspector を開始する</h2>
-<p>DOM Inspector の利用を開始するには、以下の3つのうちのひとつを行います:</p>
-<h3 id="File_.3E_Inspect_a_Window_.3E" name="File_.3E_Inspect_a_Window_.3E">File &gt; Inspect a Window &gt;</h3>
-<p><strong>Inspect a Window</strong> メニュー項目の右に表示されているサブメニューは現在ロードされている DOM ウィンドウのリストです。おそらくブラウザウィンドウと DOM Inspector はすでに開かれており、このリストに表示されます。DOM Inspector は — DOM として認識される — 開かれているすべてのウィンドウを追跡します。そのため、DOM Inspector で特定のウィンドウの DOM にアクセスするには、単に DOM Inspector アプリケーションの中で動的に更新されるリストからウィンドウを選択するだけです。例えば、Mail ウィンドウの DOM を調べるには、Mail を開き、DOM Inspector に戻って <strong>File &gt; Inspect a Window &gt; Inbox for <a class=" link-mailto" href="mailto:yourname@yourdomain.com" rel="freelink">yourname@yourdomain.com</a></strong> を選択します。</p>
-<p><img align="none" alt="" class=" internal" src="/@api/deki/files/179/=Di_menu.gif"></p>
-<h3 id="File_.3E_Inspect_a_URL..." name="File_.3E_Inspect_a_URL...">File &gt; Inspect a URL...</h3>
-<p>URL から任意のウェブページの DOM を調べることが出来ます。この二つ目のメニューアイテムを使用して URL を入力し、DOM Inspector にページの DOM をロードします。アプリケーションそのもののドキュメントオブジェクトモデルを表示するウィンドウの DOM とは対照的に、この "文書" の DOM は最上位の &lt;HTML&gt; タグから始まるウェブページの構造を示します。このメニュー項目を使うには、例えば、<strong>www.brownhen.com</strong> を入力すると brownhen のインデックスページの DOM を見ることが出来ます。</p>
-<p><img align="none" alt="DOM of a Web Page" class=" internal" src="/@api/deki/files/43/=Bh_dom.gif"></p>
-<h3 id="Ctrl_.2B_Shift_.2B_I_key_shortcut" name="Ctrl_.2B_Shift_.2B_I_key_shortcut"><code><strong>Ctrl + Shift + I</strong></code> キーショートカット</h3>
-<p>最後に、<code>Ctrl + Shift + I</code> ショートカットキーは現在ロードしているページの DOM で DOM Inspector を開始します。例えば、Mozilla で www.cnn.com ウェブサイトを読んでいてこのキーをタイプすると、DOM Inspector はページの DOM をロードしその構造を Inspector アプリケーションウィンドウに表示します。</p>
-<p>DOM Inspector が DOM をロードすると、左ペインに DOM の構造化された階層ビューを、右ペインに選択したノードの情報（属性とその値など）を表示します。</p>
-<p>加えて、ウェブページの DOM を表示している間、DOM Inspector の下半分にウェブページが表示されます。</p>
-<p><img align="none" alt="" class="internal" src="/@api/deki/files/43/=Bh_dom.gif"></p>
-<p>これは DOM Inspector を独立したブラウザウィンドウを持つことなく利用することが可能になり、選択したノードが DOM Inspector によりページ内でハイライト表示されるのを見るのが容易になります。（最近の Firefox 版では DOM Inspector ウィンドウ内でのウェブページ表示は行われずに、Firefox 内でハイライト表示されます。） <img align="none" alt="DOM Loaded in DI" class="internal" src="/@api/deki/files/183/=Di_small.gif"></p><h2 id="Using_the_DOM_Inspector" name="Using_the_DOM_Inspector">Using the DOM Inspector</h2>
-<p>Once you have the DOM of the page or chrome you are interested in, you can use the tree view in the left pane of the DOM Inspector to find and inspect aspects of that DOM you are interested in. One of the biggest and most immediate advantages that this brings to your web and application development is that it makes it possible to <em>find</em> the markup and the nodes in which the interesting parts of a page or a piece of the user interface are defined. One common use of the DOM Inspector is to find the name and location of particular icon being used in the user interface, which is not an easy task otherwise. As you select parts of the DOM in the left pane of the DOM Inspector, the rendered versions of those nodes are highlighted in the user interface itself. <img align="none" alt="" class=" internal" src="/@api/deki/files/182/=Di_select.gif"> If you inspect the main browser window, for example, and select nodes in the right pane (other than the endless list of <code>script</code> elements that are loaded into <code>navigator.xul</code> and that have no visible UI), you will see the various parts of the browser interface being highlighted with a blinking red border. You can traverse the structure and go from largest parts (e.g., the <code>statusbar</code> element that sits at the top-level of the navigator DOM) to smallest parts, such as the "mini-mail" icon that lets users access the Mail application from the bottom left corner of the browser window. <img align="none" alt="" class=" internal" src="/@api/deki/files/180/=Di_mini_mail.gif"></p>
-<h3 id="DOM_Inspector_Information_Types" name="DOM_Inspector_Information_Types">DOM Inspector Information Types</h3>
-<p>When you have selected a node like the "mini-mail" node, you can select any one of several <em>types</em> of information to display about that node in the right pane of the DOM Inspector application window, all of which are available from the pull-down menu in the upper left corner of the right pane. <img align="none" alt="" class=" internal" src="/@api/deki/files/184/=Di_types.gif"> In order to find out what the actual name of the file is being used to provide the small mail icon, you can select <strong>CSS Style Rules</strong> from this menu and see the various selectors and rules that have been applied for those selectors. The rule that applies the mail icon to the "mini-mail" element is ID-based (since the icon is unique to the mail item in the taskbar), and uses a <code>list-style-image</code> property to point to a file in the theme JAR. That file turns out to be a GIF located at: <code><a class=" external" rel="freelink">chrome://commmunicator/skin/taskbar/mail.gif</a></code>. The list of types available from this pull-down menu gives you some idea about how extensive the DOM Inspector's inspecting capabilities are. The following table provides an overview of what these sets of information are about:</p>
-<blockquote>
-<table> <tbody> <tr> <td><strong>DOM Node</strong></td> <td>The default view. DOM Node shows the structural DOM representation of the given page or chrome.</td> </tr> <tr> <td><strong>Box Model</strong></td> <td>The box model is the layout system of Mozilla's application interface. <code>box</code> elements <p>use stretchiness, flexibility, and nesting to achieve table-like layout capabilities in XUL documents. This view shows how boxes and these layout attributes are used to position elements within the interface.</p> </td> </tr> <tr> <td><strong>XBL Bindings</strong></td> <td>XBL is a language that allows you to build extensions in XUL and HTML. Where XBL <em>bindings</em> <p>are loaded into documents by means of CSS rules, this view lets you inspect them.</p> </td> </tr> <tr> <td><strong>CSS Style Rules</strong></td> <td>This view shows you all of the CSS rules that are applied to the selected nodes.</td> </tr> <tr> <td><strong>Computed Style</strong></td> <td> <p>The computed style of an element is all of the style rules that get applied to that element, whether from explicit style declarations, from script, or from inheritance. The computed style view of an element's style rules gives you a long, flat list of rules that you can inspect and {{ mediawiki.external('#update update') }} if you wish.</p> </td> </tr> <tr> <td><strong>JavaScript Object</strong></td> <td>This view shows you all of the JavaScript objects that are used to script and manipulate a given <p>node. Common examples of JavaScript objects are <code>target</code> objects that are used to trap and get information about events fired in the interface.</p> </td> </tr> </tbody>
-</table>
-</blockquote>
-<h3 id="Selecting_Elements_in_a_User_Interface" name="Selecting_Elements_in_a_User_Interface">Selecting Elements in a User Interface</h3>
-<p>Another powerful interactive feature of the DOM Inspector is that it can display the subtree of any element in any DOM it has loaded. In other words, when you have the DOM Inspector open and have enabled this functionality by choosing <strong>Search &gt; Select Element by Click</strong> or by clicking the little magnifying glass icon in the upper left portion of the DOM Inspector application, you can click anywhere in a loaded web page or the chrome of the Mozilla application interface, and the element you click will be threaded into the left pane and information about it displayed in the right.</p>
-<h3 id="Searching_for_Nodes_in_the_DOM" name="Searching_for_Nodes_in_the_DOM">Searching for Nodes in the DOM</h3>
-<p>Another way to inspect the DOM is to search for particular elements you're interested in by ID, class, or attribute. When you select <strong>Search &gt; Find Nodes...</strong> or press <code>Ctrl + F</code>, the DOM Inspector displays a find dialog that lets you find elements in various ways, and that gives you incremental searching by way of the <code>&lt;F3&gt;</code> shortcut key. <img align="none" alt="" class=" internal" src="/@api/deki/files/181/=Di_search.gif"></p>
-<h3 id="Updating_the_DOM_Dynamically" name="Updating_the_DOM_Dynamically">Updating the DOM Dynamically</h3>
-<p>A final feature to mention in this introduction is the ability is the ability the DOM Inspector gives you to dynamically update information reflected in the DOM about web pages, user interface, and other elements. Note that when the DOM Inspector displays information about a particular node or subtree, it presents individual nodes and their values (in the DOM, attributes are subnodes of elements, typically) in an active, sortable list. You can right-click individual items in this list and be presented with a context menu that lets you <em>edit</em> the values of those attributes. <img align="none" alt="" class=" internal" src="/@api/deki/files/176/=Di_edit.gif"> For example, <code>table</code> elements are often used to layout elements in a web page, but when something goes wrong it can be difficult to find the offending cell, especially when tables are nested several deep, as they often are on complicated web pages. You can use this dynamic editig capability of the DOM Inspector to set tables aside (i.e., by changing their background color, adding a border, and so on). This interactivity allows you to shrink and grow element size, change icons, and do other layout-tweaking updates—all without actually changing the DOM as it is defined in the file on disk.</p>
-<h2 id="Loving_the_Inspector" name="Loving_the_Inspector">Loving the Inspector</h2>
-<p>The DOM Inspector can take some figuring out, but once you get used to it, you may find that these structured views of web pages and interfaces were exactly the aspects of your own application development that were missing. The DOM Inspector not only presents all this information about pages in a clear and structured way, it gives you way to find and update those structures, and it's simple to access via shortcuts and menus already available in the Mozilla browser. Used in concert with Mozilla tools like <a class="external" href="http://www.mozilla.org/projects/venkman">Venkman</a>, the JavaScript debugger, the DOM Inspector can give you a <em>complete</em> view of any web page or DOM-based application interface. It's become an ordinary tool in my own web page development and even my normal browsing—where I see a page that looks like it's been put together in some interesting way and I hit <code>Ctrl + Shift + I</code> to look at the DOM of the page, interesting CSS rules the author has used to present the page, or other, sometimes hidden information about that document.</p>
-<p>{{ languages( { "en": "en/Introduction_to_DOM_Inspector"} ) }}</p>
diff --git a/files/ja/orphaned/learn/how_to_contribute/index.html b/files/ja/orphaned/learn/how_to_contribute/index.html
deleted file mode 100644
index ceeb811b0e..0000000000
--- a/files/ja/orphaned/learn/how_to_contribute/index.html
+++ /dev/null
@@ -1,87 +0,0 @@
----
-title: MDN の学習エリアに貢献するには
-slug: orphaned/Learn/How_to_contribute
-tags:
-  - Beginner
-  - Contribute
-  - Documentation
-  - Guide
-  - Learn
-  - MDN Meta
-  - l10n:priority
-translation_of: Learn/How_to_contribute
-original_slug: Learn/How_to_contribute
----
-<div>{{LearnSidebar}}</div>
-
-<p>あなたがこのページに初めて、あるいはたくさん検索した末に辿り着いたのなら、それはきっとあなたが MDN の学習エリアへの貢献に興味を持って下さったからでしょう。素晴らしいことです！</p>
-
-<p><span class="seoSummary">このページでは、 MDN の学習コンテンツの改良に協力し始めるのに必要となる全てが見つかるでしょう。できることはたくさんあって、それはあなたがどれくらい時間を使えるか、<a href="/ja/Learn/How_to_contribute#I'm_a_beginner">初心者</a>か<a href="/ja/Learn/How_to_contribute#I'm_a_web_developer">ウェブ開発者</a>か<a href="/ja/Learn/How_to_contribute#I'm_a_teacher">教師</a>かによって決まります。</span></p>
-
-<div class="note">
-<p><strong>メモ</strong>: 学習エリアの記事を書くためのガイドは、<a href="/ja/docs/MDN/Contribute/Howto/Write_an_article_to_help_learn_about_the_Web">ウェブを学習する人に役立つ記事の書き方</a>にあります。</p>
-</div>
-
-<h2 id="特定のタスクを探す">特定のタスクを探す</h2>
-
-<p><strong>学習エリアに貢献する共通の方法は、記事を読み、誤字を直し、改良を提案することです。<a href="https://github.com/mdn/learning-area/">GitHub repo</a>へのサンプル追加も、何が必要か聞きたいと思って連絡頂くのも歓迎です。</strong></p>
-
-<p>新しいことを学習するときに、貢献することは楽しめる良い方法です。道に迷った気になったり、質問があった場合は、<a href="https://discourse.mozilla-community.org/t/learning-web-development-marking-guides-and-questions/16294">Learning Area Discourse thread</a> や <a href="/en-US/docs/MDN/Community#Get_into_IRC">IRC channel</a> いずれも英語ベース (詳しくはページ最下部を見てください)。<a href="/en-US/profiles/chrisdavidmills">Chris Mills</a> が Learning Area (学習エリア) のトピックドライバーです — 彼に直接 ping してもいいでしょう。</p>
-
-<p>下記の節では一般的なアイデアとして、やることの種類を挙げています。</p>
-
-<h2 id="初心者の方なら">初心者の方なら</h2>
-
-<p>すばらしい！初心者は学習エリアの中身にフィードバックを作るのに重要かつ貴重です。あなたにはこの記事のターゲット読者の一員で、われわれのチームの貴重なメンバーになりうるという独特の視点があります。実際に、記事を何かの学習に使ってつまったり、誤解を招く記事を見かけた場合、自分で修正するか、または我々が確実に修正できるように問題点を連絡することができます。</p>
-
-<p>次のように、貢献できるいくつかの方法があります:</p>
-
-<dl>
- <dt><a href="/ja/docs/MDN/Contribute/Howto/Tag">記事にタグを追加する</a> (<em>5分</em>)</dt>
- <dd>MDN のコンテンツをタグ付けするのは、 MDN に協力する最も簡単な方法です。タグによって状況にあわせた機能を提供できるようになるため、タグ付けはとても意味ある貢献です。タグ付けを始める前に、<a href="/ja/docs/MDN/Doc_status/Glossary#No_tags">用語集の記事</a>と<a href="/ja/docs/MDN/Doc_status/Learn#No_tags">学習記事</a>の一覧をご覧ください。</dd>
- <dt><a href="/ja/docs/Glossary">用語集の記事を読んでレビューする</a> (<em>5分</em>)</dt>
- <dd>コンテンツを初心者の目線で見てもらう必要があります。用語集の記事に分かりにくい箇所があれば改善が必要なため、気軽に変更してください。自分には必要なスキルが無いと感じたら、<a href="/en-US/docs/MDN/Community#Join_our_mailing_lists">私たちのメーリングリスト</a>に連絡してください。</dd>
- <dt><a href="/docs/MDN/Contribute/Howto/Write_a_new_entry_in_the_Glossary">用語集の記事を書く</a> (<em>20分</em>)</dt>
- <dd>これは新しいことを学ぶ最良の方法です。理解したい概念を選び、それについて学んだら、用語集の記事を書きましょう。何かを他人に説明することは、頭の中で知識を「定着」させ、物事を自分自身で良く理解できるようになり、さらに他人のために役立ちます。みんなが得をします！</dd>
- <dt><a href="/ja/Learn/Index">学習記事を読んでレビューする</a> (<em>2時間</em>)</dt>
- <dd>これは用語集の記事のレビューとよく似ています（上記参照）。こういった記事は通常かなり長いため、より時間を要するだけです。</dd>
-</dl>
-
-<h2 id="ウェブ開発者なら">ウェブ開発者なら</h2>
-
-<p>素敵です！あなたの技術スキルは、初心者向けの技術的に正確なコンテンツを提供するために、まさに我々が必要としているものです。ここは MDN の特定の箇所としてウェブの学習専用であり、説明はできるだけ簡潔であり、簡潔すぎて役立たないのは避けないといけません。過度に正確であることよりも、理解できることがもっと重要です。</p>
-
-<dl>
- <dt><a href="/ja/docs/Glossary">用語集の記事を読んでレビューする</a> (<em>5分</em>)</dt>
- <dd>ウェブ開発者であるあなたには、私たちのコンテンツが複雑になりすぎずに技術的に正確であるかを確認していただく必要があります。必要に応じて気軽に変更を加えてください。編集の前に内容を議論したい場合は、<a href="/en-US/docs/MDN/Community#Join_our_mailing_lists">私たちのメーリングリスト</a>または <a href="/en-US/docs/MDN/Community#Get_into_IRC">IRC channel</a>でコンタクトしてください。</dd>
- <dt><a href="/docs/MDN/Contribute/Howto/Write_a_new_entry_in_the_Glossary">用語集の記事を書く</a> (<em>20分</em>)</dt>
- <dd>技術的な専門用語を明確にすることは、学習するのと、技術的に正確かつシンプルであるためのとても良い方法です。初心者からは感謝されるでしょう。注目すべき<a href="/ja/docs/Glossary#Contribute">未定義の用語</a>がたくさんあります。都合が良いものを選んでください。</dd>
- <dt><a href="/ja/Learn/Index">学習記事を読んで</a><a href="/en-US/Learn/Index">レビューする</a> (<em>2時間</em>)</dt>
- <dd>これは用語集の記事のレビュー（上記）と同じことです。この記事は少し長い時間がかかるだけです。</dd>
- <dt><a href="/ja/docs/MDN/Contribute/Howto/Write_an_article_to_help_learn_about_the_Web">新しい学習記事を書く</a> (<em>4時間以上</em>)</dt>
- <dd>MDN には、ウェブ技術（<a href="/en-US/docs/Learn/CSS">HTML</a>, <a href="/en-US/docs/Learn/CSS">CSS</a>, <a href="/en-US/docs/Learn/JavaScript">JavaScript</a>など）についてのシンプルで直言的な記事が欠けています。また MDN にはレビューや作り直しをするべき古いコンテンツもあります。あなたのスキルの限界までふりしぼって、ウェブ技術が初心者でも使えるようにしてください。</dd>
- <dt><a href="/ja/docs/MDN/Contribute/Howto/Create_an_interactive_exercise_to_help_learning_the_web">練習、コードサンプル、インタラクティブな学習ツールの作成</a> (<em>?時間</em>)</dt>
- <dd>全ての学習記事は「アクティブラーニング」と呼ぶ記事を必要としています。その理由は人は自分で何かやってみるのが学ぶのに最良だからです。この素材は、ユーザーが記事に述べられる概念を適用・操作するのを助ける、練習やインタラクティブコンテンツです。アクティブラーニングのコンテンツを作るには多数の方法があり、 <a href="http://jsfiddle.net" rel="external">JSFiddle</a> や同等品でコードサンプルを作ることから、<a href="https://thimble.mozilla.org/" rel="external">Thimble</a> で完全にハック可能なインタラクティブコンテンツを作ることまであります。創造性を解き放って！</dd>
-</dl>
-
-<h2 id="教師なら">教師なら</h2>
-
-<p>MDN は技術的な卓越性において長い歴史がありますが、新人に概念を教える最良の方法についての理解は十分ではありません。ここは教師・教育者であるあなたを必要とするところです。私たちの教材が読者にとって優れた、実践的な学びの道筋を提供できるよう手助けできます。</p>
-
-<dl>
- <dt><a href="/ja/docs/Glossary">用語集の記事を読んでレビューする </a>(<em>15分</em>)</dt>
- <dd>用語集の記事を確認して、必要に応じて気軽に変更を加えてください。編集の前に内容を議論したい場合は<a href="/en-US/docs/MDN/Community#Join_our_mailing_lists">私たちのメーリングリスト</a>または <a href="/en-US/docs/MDN/Community#Get_into_IRC">IRC channel</a>でコンタクトしてください</dd>
- <dt><a href="/docs/MDN/Contribute/Howto/Write_a_new_entry_in_the_Glossary">用語集の記事を書く</a> (<em>1時間</em>)</dt>
- <dd>用語集にて、明確でシンプルな言葉の定義と、概念の基本的な説明は、初心者の要求を満たすのに重要です。教育者としての経験がすばらしい用語集の記事の作成に役立ちます。注目すべき<a href="/ja/docs/Glossary#Contribute">未定義の用語</a>がたくさんあります。都合が良いものを選んでください。</dd>
- <dt><a href="/ja/docs/tag/needsSchema">記事のイラストや図を描く</a> (<em>1時間</em>)</dt>
- <dd>ご存知のように、イラストはあらゆる学習コンテンツの中で有益な部分です。これは MDN でよく不足しているもので、あなたのスキルがそのエリアを違ったものにします。<a href="/en-US/docs/tag/needsSchema">図示コンテンツが不足している記事</a>を確認して、絵を作りたいものを選びます。</dd>
- <dt><a href="/ja/Learn/Index">学習記事を読んでレビューする</a> (<em>2時間</em>)</dt>
- <dd>これは用語集の記事（上記）のレビューと同じことです。この記事は少し長い時間がかかるだけです。</dd>
- <dt><a href="/ja/docs/MDN/Contribute/Howto/Write_an_article_to_help_learn_about_the_Web">新しい学習記事を書く</a> (<em>4時間</em>)</dt>
- <dd>ウェブのエコシステムとその周りの機能的なトピックについてのシンプルで直言的な記事が必要です。学習記事では知るべきことを全て網羅するよりも、教育的である必要があるため、何をどのように網羅すべきかを知っているあなたの経験は良い資産になるでしょう。</dd>
- <dt><a href="/ja/docs/MDN/Contribute/Howto/Create_an_interactive_exercise_to_help_learning_the_web">練習、クイズ、インタラクティブな学習ツールの作成</a> (<em>?時間</em>)</dt>
- <dd>全ての学習記事は「アクティブラーニング」と呼ぶ記事を必要としています。その理由は人は自分で何かやってみるのが学ぶのに最良だからです。この素材は、ユーザーが記事に述べられる概念を適用・操作するのを助ける、練習やインタラクティブコンテンツです。アクティブラーニングのコンテンツを作るには多数の方法があり、クイズを作ることから、<a href="https://thimble.mozilla.org/" rel="external">Thimble</a> で完全にハック可能なインタラクティブコンテンツを作ることまであります。創造性を解き放って！</dd>
- <dt></dt>
- <dt><a href="/ja/docs/MDN/Contribute/Howto/Create_learning_pathways">学習の進路を作る</a> (<em>?時間</em>)</dt>
- <dd>進歩的で理解できるチュートリアルを提供するため、コンテンツを学習進路に形付ける必要があります。既存のコンテンツを集めて、学習記事を作成するのに何がたりないか理解するのに良い方法です。</dd>
-</dl>
diff --git a/files/ja/orphaned/localizing_extension_descriptions/index.html b/files/ja/orphaned/localizing_extension_descriptions/index.html
index 184c1756de..06eaa77384 100644
--- a/files/ja/orphaned/localizing_extension_descriptions/index.html
+++ b/files/ja/orphaned/localizing_extension_descriptions/index.html
@@ -9,7 +9,7 @@ tags:
 original_slug: Localizing_extension_descriptions
 ---
 <h3 id="Gecko_1.9_.E3.81.AB.E3.81.8A.E3.81.91.E3.82.8B.E3.83.AD.E3.83.BC.E3.82.AB.E3.83.A9.E3.82.A4.E3.82.BA" name="Gecko_1.9_.E3.81.AB.E3.81.8A.E3.81.91.E3.82.8B.E3.83.AD.E3.83.BC.E3.82.AB.E3.83.A9.E3.82.A4.E3.82.BA">Gecko 1.9 におけるローカライズ</h3>
-<p>Gecko 1.9 には、アドオンの説明や他のメタデータのローカライズに関して、新しく、より強力な方法が盛り込まれています。各言語の説明はすべて、<code>em:localized</code> プロパティを使って <a href="/ja/Install_Manifests" title="ja/Install_Manifests">install.rdf</a> ファイルに書かれます。<code>em:localized</code> それぞれが、情報が使われるべきロケールを示す <code>em:locale</code> プロパティを少なくとも 1 つと、そのロケールの様々な文字列を持ちます。以下の例はこのデモです (ほとんどの一般的なマニフェストプロパティは簡潔にするため削除してあります)。</p>
+<p>Gecko 1.9 には、アドオンの説明や他のメタデータのローカライズに関して、新しく、より強力な方法が盛り込まれています。各言語の説明はすべて、<code>em:localized</code> プロパティを使って <a href="/ja/Install_Manifests">install.rdf</a> ファイルに書かれます。<code>em:localized</code> それぞれが、情報が使われるべきロケールを示す <code>em:locale</code> プロパティを少なくとも 1 つと、そのロケールの様々な文字列を持ちます。以下の例はこのデモです (ほとんどの一般的なマニフェストプロパティは簡潔にするため削除してあります)。</p>
 <pre>&lt;?xml version="1.0"?&gt;
 
 &lt;RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
@@ -54,14 +54,14 @@ original_slug: Localizing_extension_descriptions
 <h3 id="Gecko_1.9_.E4.BB.A5.E5.89.8D.E3.81.AE.E3.83.AD.E3.83.BC.E3.82.AB.E3.83.A9.E3.82.A4.E3.82.BA" name="Gecko_1.9_.E4.BB.A5.E5.89.8D.E3.81.AE.E3.83.AD.E3.83.BC.E3.82.AB.E3.83.A9.E3.82.A4.E3.82.BA">Gecko 1.9 以前のローカライズ</h3>
 <p>Gecko 1.9 以前では、アドオン開発者は、Firefox や Thunderbird のようなツールキットベースのアプリケーションを対象とする拡張機能にローカライズされた説明を定義するためには以下のような特別な手順が必要でした。</p>
 <ul>
- <li>もしあなたが <a href="/ja/Localizing_an_extension#Localizing_strings_in_JavaScript_code" title="ja/Localizing_an_extension#Localizing_strings_in_JavaScript_code">ローカライズしたプロパティファイル</a> を作っていないのであれば、それを作ってください。他言語が正しく表示されるように、(BOM なしの)UTF-8 エンコードを使うことを忘れないでください。</li>
- <li>次の 1 行を、各言語のローカライズしたプロパティファイルに加えてください (EXTENSION_ID はあなたの拡張機能の ID (<a href="/ja/Install_Manifests" title="ja/Install_Manifests">install.rdf</a> の <code>&lt;em:id&gt;</code> にあります) に合わせてください。また、<var>LOCALIZED_DESCRIPTION</var> にはその言語での拡張機能の説明を入れてください)。
+ <li>もしあなたが <a href="/ja/Localizing_an_extension#Localizing_strings_in_JavaScript_code">ローカライズしたプロパティファイル</a> を作っていないのであれば、それを作ってください。他言語が正しく表示されるように、(BOM なしの)UTF-8 エンコードを使うことを忘れないでください。</li>
+ <li>次の 1 行を、各言語のローカライズしたプロパティファイルに加えてください (EXTENSION_ID はあなたの拡張機能の ID (<a href="/ja/Install_Manifests">install.rdf</a> の <code>&lt;em:id&gt;</code> にあります) に合わせてください。また、<var>LOCALIZED_DESCRIPTION</var> にはその言語での拡張機能の説明を入れてください)。
   <pre>extensions.EXTENSION_ID.description=LOCALIZED_DESCRIPTION</pre>
  </li>
 </ul>
 <ul>
- <li>もしあなたが <a href="/ja/Building_an_Extension#Defaults_Files" title="ja/Building_an_Extension#Defaults_Files">デフォルト設定ファイル</a> を作っていないのであれば、それを作ってください。</li>
- <li>次の 1 行を、デフォルト設定ファイルに加えてください (<var>EXTENSION_ID</var> は拡張機能の ID (<a href="/ja/Install_Manifests" title="ja/Install_Manifests">install.rdf</a> から)、<var>PATH_TO_LOCALIZATION_FILE</var> は上であなたが加えた、ローカライズしたプロパティファイルへの chrome パスです)。
+ <li>もしあなたが <a href="/ja/Building_an_Extension#Defaults_Files">デフォルト設定ファイル</a> を作っていないのであれば、それを作ってください。</li>
+ <li>次の 1 行を、デフォルト設定ファイルに加えてください (<var>EXTENSION_ID</var> は拡張機能の ID (<a href="/ja/Install_Manifests">install.rdf</a> から)、<var>PATH_TO_LOCALIZATION_FILE</var> は上であなたが加えた、ローカライズしたプロパティファイルへの chrome パスです)。
   <pre>pref("extensions.EXTENSION_ID.description", "PATH_TO_LOCALIZATION_FILE");</pre>
  </li>
 </ul>
diff --git a/files/ja/orphaned/mcd/index.html b/files/ja/orphaned/mcd/index.html
index b992797d81..7283dca2de 100644
--- a/files/ja/orphaned/mcd/index.html
+++ b/files/ja/orphaned/mcd/index.html
@@ -20,8 +20,8 @@ original_slug: MCD
       ガイド</dt>
     </dl>
     <ul>
-     <li><a href="/ja/MCD/Getting_Started" title="ja/MCD/Getting_Started">Getting Started with MCD</a></li>
-     <li><a href="/ja/MCD,_Mission_Control_Desktop_AKA_AutoConfig" title="ja/MCD,_Mission_Control_Desktop_AKA_AutoConfig">MCD, Mission Control Desktop AKA AutoConfig</a></li>
+     <li><a href="/ja/MCD/Getting_Started">Getting Started with MCD</a></li>
+     <li><a href="/ja/MCD,_Mission_Control_Desktop_AKA_AutoConfig">MCD, Mission Control Desktop AKA AutoConfig</a></li>
     </ul>
    </td>
    <td>
diff --git a/files/ja/orphaned/mdn/dashboards/editors/index.html b/files/ja/orphaned/mdn/dashboards/editors/index.html
deleted file mode 100644
index a8dd062534..0000000000
--- a/files/ja/orphaned/mdn/dashboards/editors/index.html
+++ /dev/null
@@ -1,22 +0,0 @@
----
-title: 編集者
-slug: orphaned/MDN/Dashboards/Editors
-tags:
-  - MDN Meta
-  - MDN プロジェクト
-  - ダッシュボード
-  - ドキュメンテーション
-translation_of: MDN/Dashboards/Editors
-original_slug: MDN/Dashboards/Editors
----
-<div>{{MDNSidebar}}</div>
-
-<h2 id="編集者の総数">編集者の総数</h2>
-
-<p><img alt="The amount of editors grows quickly at the beginning of the MDN history from 2005-2007, then went down and stayed flat until 2010 where it started to grow a bit. A complete changed happened in 2012 and the line grows steadily to more than 1000 editors." src="https://docs.google.com/spreadsheets/d/1IgumrIGuS2v6HVHz0Ko1SlX2dNvqwTj6rq6eldtr1EI/pubchart?oid=37&amp;format=image" style="height: 361px; width: 645px;"></p>
-
-<h2 id="タイプ別エディタ">タイプ別エディタ</h2>
-
-<p><img alt="" src="https://docs.google.com/spreadsheets/d/1IgumrIGuS2v6HVHz0Ko1SlX2dNvqwTj6rq6eldtr1EI/pubchart?oid=19&amp;format=image" style="height: 259px; width: 524px;"><img alt="" src="https://docs.google.com/spreadsheets/d/1IgumrIGuS2v6HVHz0Ko1SlX2dNvqwTj6rq6eldtr1EI/pubchart?oid=21&amp;format=image" style="height: 265px; width: 428px;"></p>
-
-<p><img alt="" src="https://docs.google.com/spreadsheets/d/1IgumrIGuS2v6HVHz0Ko1SlX2dNvqwTj6rq6eldtr1EI/pubchart?oid=20&amp;format=image" style="height: 257px; width: 519px;"><img alt="" src="https://docs.google.com/spreadsheets/d/1IgumrIGuS2v6HVHz0Ko1SlX2dNvqwTj6rq6eldtr1EI/pubchart?oid=22&amp;format=image" style="height: 254px; width: 411px;"></p>
diff --git a/files/ja/orphaned/mdn/dashboards/index.html b/files/ja/orphaned/mdn/dashboards/index.html
deleted file mode 100644
index 11f41789b0..0000000000
--- a/files/ja/orphaned/mdn/dashboards/index.html
+++ /dev/null
@@ -1,18 +0,0 @@
----
-title: ダッシュボード
-slug: orphaned/MDN/Dashboards
-tags:
-  - Draft
-  - MDN Meta
-  - ダッシュボード
-  - 概要
-translation_of: MDN/Dashboards
-original_slug: MDN/Dashboards
----
-<div>{{MDNSidebar}}{{Draft}}</div>
-
-<p class="summary">いくつかの指標を表示するダッシュボードがいくつかあります。</p>
-
-<p><a href="/ja/docs/MDN/Dashboards/Editors">編集者の詳細について詳細を知る</a></p>
-
-<p>{{SubpagesWithSummaries}}</p>
diff --git a/files/ja/orphaned/mdn/kuma/server_charts/index.html b/files/ja/orphaned/mdn/kuma/server_charts/index.html
deleted file mode 100644
index a2946d4086..0000000000
--- a/files/ja/orphaned/mdn/kuma/server_charts/index.html
+++ /dev/null
@@ -1,64 +0,0 @@
----
-title: サーバーチャート
-slug: orphaned/MDN/Kuma/Server_charts
-tags:
-  - Kuma
-  - MDN Meta
-translation_of: MDN/Kuma/Server_charts
-original_slug: MDN/Kuma/Server_charts
----
-<div>{{MDNSidebar}}{{IncludeSubnav("/ja/docs/MDN")}}</div>
-
-<p class="summary"><span class="seoSummary">このページには MDN サーバのステータスチャートが一覧表示されます。</span></p>
-
-<h2 id="Last_30_minutes" name="Last_30_minutes">直近の 30 分</h2>
-
-<h3 id="Error_Rate" name="Error_Rate">エラーレート</h3>
-
-<p>{{EmbedNewRelicChart("2fKQPvMkSwU", 300)}}</p>
-
-<p>Kuma Web アプリのレスポンス時間 (平均)</p>
-
-<p>{{EmbedNewRelicChart("43yJ3xwUecU", 300)}}</p>
-
-<h3 id="Kuma_web_app_response_time_Percentiles" name="Kuma_web_app_response_time_Percentiles">Kuma Web アプリのレスポンス時間 (パーセンタイル)</h3>
-
-<p>{{EmbedNewRelicChart("6NzEi7ZBdoN", 300)}}</p>
-
-<h2 id="Last_24_Hours" name="Last_24_Hours">直近の 24 時間</h2>
-
-<h3 id="Error_Rate_2" name="Error_Rate_2">エラーレート</h3>
-
-<p>{{EmbedNewRelicChart("kVeeXx52g0l", 300)}}</p>
-
-<h3 id="Kuma_web_app_response_time_Average" name="Kuma_web_app_response_time_Average">Kuma Web アプリのレスポンス時間 (平均)</h3>
-
-<p>{{EmbedNewRelicChart("2yWkQ9WbEZW", 300)}}</p>
-
-<h3 id="Kuma_web_app_response_time_Percentiles_2" name="Kuma_web_app_response_time_Percentiles_2">Kuma Web アプリのレスポンス時間 (パーセンタイル)</h3>
-
-<p>{{EmbedNewRelicChart("aeFnbLonmvx", 300)}}</p>
-
-<h2 id="Last_3_Days" name="Last_3_Days">直近の 3 日間</h2>
-
-<h3 id="Error_Rate_3" name="Error_Rate_3">エラーレート</h3>
-
-<p>{{ EmbedNewRelicChart("iv2F4gQYjFX", 300)}}</p>
-
-<h3 id="Kuma_web_app_response_time_Average_2" name="Kuma_web_app_response_time_Average_2">Kuma Web アプリのレスポンス時間 (平均)</h3>
-
-<p>{{EmbedNewRelicChart("ddTq7AKgyaG", 300)}}</p>
-
-<h3 id="Kuma_web_app_response_time_Percentiles_3" name="Kuma_web_app_response_time_Percentiles_3">Kuma Web アプリのレスポンス時間 (パーセンタイル)</h3>
-
-<p>{{EmbedNewRelicChart("bRmyM6ujKA8", 300)}}</p>
-
-<h2 id="Last_3_Months" name="Last_3_Months">直近の 3 ヶ月</h2>
-
-<h3 id="Error_Rate_4" name="Error_Rate_4">エラーレート</h3>
-
-<p>{{EmbedNewRelicChart("fjJ7HnGYNLd", 300)}}</p>
-
-<h3 id="Kuma_web_app_response_time_Average_3" name="Kuma_web_app_response_time_Average_3">Kuma Web アプリのレスポンス時間 (平均)</h3>
-
-<p>{{EmbedNewRelicChart("sIaVOeAxNx", 300)}}</p>
diff --git a/files/ja/orphaned/mdn/troubleshooting/index.html b/files/ja/orphaned/mdn/troubleshooting/index.html
deleted file mode 100644
index af7abca5a8..0000000000
--- a/files/ja/orphaned/mdn/troubleshooting/index.html
+++ /dev/null
@@ -1,87 +0,0 @@
----
-title: トラブルシューティング
-slug: orphaned/MDN/Troubleshooting
-tags:
-  - Documentation
-  - MDN
-  - Writing Documentation
-  - troubleshooting
-translation_of: MDN/Troubleshooting
-original_slug: MDN/Troubleshooting
----
-<div>{{MDNSidebar}}</div>
-
-<p>この記事では、 MDN を利用して起こる問題と、その対処法を記します。</p>
-
-<h2 id="私の古いアカウントでログインできない">私の古いアカウントでログインできない</h2>
-
-<dl>
- <dt>現象</dt>
- <dd>数年前に MDN アカウントを持っていたが、今は唯一のログイン方法が GitHub なのでログインできない。あるいは GitHub でプロファイルを作成済みだが、古いアカウントに接続できない。</dd>
- <dt>原因</dt>
- <dd>GitHub認証 <a href="/en-US/docs/Archive/MDN/Persona_sign-ins">以外のログイン方法</a> のサポートは2016年11月1日以来削除されました。MDNプロファイルとGitHubアカウントをそれ以前にリンクさせてない場合、古いアカウントではログインできません。</dd>
- <dt>対処法</dt>
- <dd>Bugzillaで<strong> <a class="external-icon external" href="https://mzl.la/accounthelp">"Account Help" bug</a> </strong>を提出します。古いアカウントについての情報(パスワード以外!)を提供して、新アカウントがあればそれも書きます。MDN エンジニアが反応して手助けします。</dd>
-</dl>
-
-<h2 id="ページを保存できない">ページを保存できない</h2>
-
-<dl>
- <dt>現象</dt>
- <dd>あなたが変更したものを保存しようとして、変更が保存できないというメッセージを受けている。</dd>
- <dt>原因</dt>
- <dd>変更が MDN のスパムトラップに捕捉されています。我々の知る限り、これはときどき間違えます。</dd>
- <dt>対処法</dt>
- <dd>エラーメッセージに指示されいてるように、リビジョンのコピーを保存して、<a href="mailto://mdn-admins@mozilla.org">MDN サイト管理者</a> にメール送信します。管理者の1人が実際に正当な変更であることを検証して、あなたの変更と同様なものをブロックしないようにスパムフィルターを訓練して、今後はこの問題に会わないように、あなたをホワイトリストに追加します。</dd>
-</dl>
-
-<h2 id="公開した変更がページに出てこない">公開した変更がページに出てこない</h2>
-
-<dl>
- <dt>現象</dt>
- <dd>記事にいくらかの変更をして <strong>公開</strong> をクリックする。たった今行った変更が通常のページの見た目に反映されない。</dd>
- <dt>原因</dt>
- <dd>ページコンテンツがサーバーにキャッシュされていて、ページが変更されて以来リフレッシュされていません。</dd>
- <dt>対処法</dt>
- <dd>ブラウザーで強制リフレッシュします (例えば Shift+再読み込み)。更新されたコンテンツが見えるか、ページ更新が処理されているメッセージが見えるでしょう。2番目の場合、数分間待ってからページが更新されたかを見るために通常のリフレッシュをします。</dd>
-</dl>
-
-<h2 id="マクロで生成したコンテンツが古い">マクロで生成したコンテンツが古い</h2>
-
-<dl>
- <dt>現象</dt>
- <dd>マクロで生成されるコンテンツを含むページを見ている。このマクロが更新されて製品に置かれているのが分かっているが、ページは古い値を表示している。</dd>
- <dt>原因</dt>
- <dd>マクロの出力がキャッシュされていて、マクロが更新されて以来リフレッシュされていません。このとき、マクロコードへの変更は、そのマクロを使うページに対して自動更新が強制されません。</dd>
- <dt>対処法</dt>
- <dd>ブラウザーで強制リフレッシュします (例えば Shift+再読み込み)。更新された出力が見えるか、ページ更新が処理されているメッセージが見えるでしょう。2番目の場合、数分間待ってからページが更新されたかを見るために通常のリフレッシュをします。</dd>
-</dl>
-
-<h2 id="ページのスクリプトエラー">ページのスクリプトエラー</h2>
-
-<dl>
- <dt>現象</dt>
- <dd>ページ上にこんな恐ろしい赤いボックスが見える:<br>
- <img alt="There was a scripting error on this page. While it is being addressed by site editors, you can view partial content below. More information about this error" src="https://mdn.mozillademos.org/files/15259/macro_error_box.png" style="height: 114px; width: 590px;"></dd>
- <dt>原因</dt>
- <dd>ページ内のマクロでの KumaScript エラーが原因です。マクロが GitHub に保存されて、製品に移される前にレビューやテストを通るようになった今は、この問題は製品ではさほど起こりません。自分自身でマクロを編集したり、マクロを破たんさせる引数と共にマクロを呼び出したりしたら見られる時もあります。ローカルでMDNプラットホームをビルドした場合でも見られるかもしれません。</dd>
- <dt>対処法</dt>
- <dd>マクロ呼び出しを変更した場合、マクロの引数名を <a href="https://github.com/mdn/kumascript/tree/master/macros">KumaScript GitHub repo</a> と見比べます。疑問のマクロを修正途中の場合、<a href="/en-US/docs/MDN/Contribute/Tools/KumaScript/Troubleshooting">KumaScript エラーのトラブルシューティング</a> が役立つかもしれません。</dd>
-</dl>
-
-<h2 id="ページプレビュー時のスクリプトエラー">ページプレビュー時のスクリプトエラー</h2>
-
-<dl>
- <dt>現象</dt>
- <dd>ページを編集していて、<strong>プレビュー</strong>ボタンをクリックする。ページのプレビュー内に(前の節に載っている)スクリプトエラーがある。</dd>
- <dt>原因</dt>
- <dd>編集しているページ内に既存のスクリプトエラーがあるか、あるいはあなたがマクロの引数を変えたりすることでエラーを導入した。</dd>
- <dt>対処法</dt>
- <dd>
- <p>あなたがページ内のマクロやテンプレートを修正していないのが本当に確実なとき、このエラーを無視できます。編集したページが最終的に保存されて再度通常表示されたときにエラーが消えるのが期待できます (通常表示でエラーがない限り)。</p>
-
- <p>あなたがエラーを導入したかどうかわからない場合、新しいウィンドウで同じページのコピーを開きます (そのページの最後に保存された版が出てきます)。編集モードに入り、すぐに<strong>プレビュー</strong> をクリックします。ここでエラーが起こった場合は、自信をもってあなたは原因ではないですし、その前に記述されたものでは消えている可能性が高いでしょう。</p>
-
- <p>あなたの変更について、古いウィンドウからの古いエラーと同じく新しいエラーが出ている場合、新しいウィンドウを閉じて古いウィンドウで作業を続けます。しかしながら、これらが別のエラーの場合、古いウィンドウで本当に何か壊したのかもそれませんので、注意して新しいウィンドウに変更をコピーして、そのたびに<strong>プレビュー</strong> をクリックします。古いエラーがすぐにここにも出る場合、あなたが最後に行った変更がエラーを起こした可能性が高く、その成果をよく調べるべきでしょう。最終的に、副作用として、<strong>プレビュー</strong>を何度もクリックして常にプレビューウィンドウを残している場合、エディターが失敗したり成果が失われる(破棄するときに起こりかねない)場合にも、素早くて未保存のままの大半の変更のコピーが残るでしょう。</p>
- </dd>
-</dl>
diff --git a/files/ja/orphaned/monitoring_http_activity/index.html b/files/ja/orphaned/monitoring_http_activity/index.html
index 9af1d8ca31..0a407cc847 100644
--- a/files/ja/orphaned/monitoring_http_activity/index.html
+++ b/files/ja/orphaned/monitoring_http_activity/index.html
@@ -34,7 +34,7 @@ activityDistributor.addObserver(httpObserver);
 <h2 id="アクティビティを観察する">アクティビティを観察する</h2>
 <p>観察可能なクラスは2つあります： ソケットレベルで発生するものと、HTTPトランザクションレベルで発生するものです。</p>
 <h3 id="観察可能なソケットのアクティビティ">観察可能なソケットのアクティビティ</h3>
-<p>{{ interface("nsIHttpActivityDistributor") }} メソッドに報告され<code>た </code>アクティビティが <code>ACTIVITY_TYPE_SOCKET_TRANSPORT</code> の場合、発生したアクティビティの詳細な型を示すアクティビティサブタイプは <a href="/ja/XPCOM_Interface_Reference/nsISocketTransport#nsITransportEventSink.0a_status_codes" title="ja/XPCOM Interface Reference/nsISocketTransport#nsITransportEventSink.0a status codes">socket transport status code</a> となります。</p>
+<p>{{ interface("nsIHttpActivityDistributor") }} メソッドに報告され<code>た </code>アクティビティが <code>ACTIVITY_TYPE_SOCKET_TRANSPORT</code> の場合、発生したアクティビティの詳細な型を示すアクティビティサブタイプは <a href="/ja/XPCOM_Interface_Reference/nsISocketTransport#nsITransportEventSink.0a_status_codes">socket transport status code</a> となります。</p>
 <h3 id="観察可能な_HTTP_のアクティビティ">観察可能な HTTP のアクティビティ</h3>
 <p>アクティビティタイプ が <code>ACTIVITY_TYPE_HTTP_TRANSACTION の場合</code>、アクティビティサブタイプは <a href="/en/nsIHttpActivityObserver#Activity_subtype_constants" title="en/nsIHttpActivityObserver#Activity subtype constants">activity subtype 定数</a> のうちの1つとなります。これらは送信されるHTTPリクエストヘッダやボディ、受信するHTTPヘッダなどを含むHTTPトランザクション全体を観察するための機能も含みます。</p>
 <h2 id="参照">参照</h2>
diff --git a/files/ja/orphaned/monitoring_wifi_access_points/index.html b/files/ja/orphaned/monitoring_wifi_access_points/index.html
index 2a07703194..41e2b09236 100644
--- a/files/ja/orphaned/monitoring_wifi_access_points/index.html
+++ b/files/ja/orphaned/monitoring_wifi_access_points/index.html
@@ -4,7 +4,7 @@ slug: orphaned/Monitoring_WiFi_access_points
 original_slug: Monitoring_WiFi_access_points
 ---
 <p>{{ gecko_minversion_header("1.9.1") }}</p>
-<p>UniversalXPConnect 特権を用いたコードを利用することで、周囲の WiFi アクセスポイントの SSID 、 MAC アドレス、信号強度の一覧を取得することができます。この機能は、主に WiFi 情報に基づいた <a class="internal" href="/Ja/Using_geolocation" title="Ja/Using geolocation">geolocation</a> サービスのために導入されました。</p>
+<p>UniversalXPConnect 特権を用いたコードを利用することで、周囲の WiFi アクセスポイントの SSID 、 MAC アドレス、信号強度の一覧を取得することができます。この機能は、主に WiFi 情報に基づいた <a class="internal" href="/Ja/Using_geolocation">geolocation</a> サービスのために導入されました。</p>
 <h2 id="例">例</h2>
 <p>この例では、利用可能なアクセスポイントの一覧を出力します。</p>
 <div class="note"><strong>注意:</strong> wiki の仕様上、 21 行目の表示がおかしくなることがあります。最初の "dd" は単純に "d" ですが、どういうわけか余分な1文字が付いてしまうようです。</div>
diff --git a/files/ja/orphaned/mozistorageservice/index.html b/files/ja/orphaned/mozistorageservice/index.html
deleted file mode 100644
index a10619fb66..0000000000
--- a/files/ja/orphaned/mozistorageservice/index.html
+++ /dev/null
@@ -1,156 +0,0 @@
----
-title: mozIStorageService
-slug: orphaned/mozIStorageService
-original_slug: mozIStorageService
----
-<p>このインタフェースを使うことでデータベースへの<code><a href="/ja/docs/Mozilla/Tech/XPCOM/Reference/Interface/mozIStorageConnection" title="">mozIStorageConnection</a></code>を開くことができます、また開かれていないデータベースファイルのバックアップを作成することもできます。</p>
-<p></p><div style="border: solid #ddd 2px; margin-bottom: 12px;">
-<div style="background: #eee; padding: 2px;"><code><a href="https://dxr.mozilla.org/mozilla-central/source/storage/public/mozIStorageService.idl" rel="custom">storage/public/mozIStorageService.idl</a></code><span style="text-align: right; float: right;"><a href="/ja/docs/Interfaces/About_Scriptable_Interfaces" style="color: #00cc00; font-weight: 700;">Scriptable</a></span></div>
-<span style="padding: 4px 2px;">
-
-<i>Please add a summary to this article.</i>
-</span>
-
-<div style="background: #eee; padding: 2px;">
-<span> </span>
-<span style="text-align: right; float: right;">最終更新: Gecko 1.9 (Firefox 3)</span></div>
-</div><p></p>
-<p>継承元: <code><a href="/ja/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsISupports" title="">nsISupports</a></code></p>
-<h2 id="メソッド概要">メソッド概要</h2>
-<table class="standard-table">
- <tbody>
-  <tr>
-   <td><code><code><a href="/ja/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIFile" title="">nsIFile</a></code> <a href="#backupDatabaseFile.28.29">backupDatabaseFile</a>(in <code><a href="/ja/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIFile" title="">nsIFile</a></code> aDBFile, in AString aBackupFileName, [optional] in <code><a href="/ja/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIFile" title="">nsIFile</a></code> aBackupParentDirectory);</code></td>
-  </tr>
-  <tr>
-   <td><code><code><a href="/ja/docs/Mozilla/Tech/XPCOM/Reference/Interface/mozIStorageConnection" title="">mozIStorageConnection</a></code> <a href="#openDatabase.28.29">openDatabase</a>(in <code><a href="/ja/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIFile" title="">nsIFile</a></code> aDatabaseFile);</code></td>
-  </tr>
-  <tr>
-   <td><code><code><a href="/ja/docs/Mozilla/Tech/XPCOM/Reference/Interface/mozIStorageConnection" title="">mozIStorageConnection</a></code> <a href="#openSpecialDatabase.28.29">openSpecialDatabase</a>(in string aStorageKey);</code></td>
-  </tr>
-  <tr>
-   <td><code><code><a href="/ja/docs/Mozilla/Tech/XPCOM/Reference/Interface/mozIStorageConnection" title="">mozIStorageConnection</a></code> <a href="#openUnsharedDatabase.28.29">openUnsharedDatabase</a>(in <code><a href="/ja/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIFile" title="">nsIFile</a></code> aDatabaseFile);</code></td>
-  </tr>
- </tbody>
-</table>
-<h3 id="メソッド">メソッド</h3>
-<h3 id="backupDatabaseFile.28.29" name="backupDatabaseFile.28.29">backupDatabaseFile()</h3>
-<p>指定されたファイルのバックアップを作成します。データベースは開かれていない必要があります、またはこのメソッドを呼び出す際にデータベースに対する操作が行われないことが確かである必要があります。指定されたファイル名はあくまでもサジェスチョンになります。すでにファイル名が使われている場合、ユニークなファイル名になるように処理されます。実際のバックアップファイルは戻り値になり、実際のファイル名もそこから取得することができます。</p>
-<pre>nsIFile backupDatabaseFile(
-  in nsIFile aDBFile,
-  in AString aBackupFileName,
-  [optional] in nsIFile aBackupParentDirectory
-);
-</pre>
-<h6 id="引数">引数</h6>
-<dl>
- <dt>
-  aDBFile</dt>
- <dd>
-  バックアップを取るデータベースファイル</dd>
- <dt>
-  aBackupFileName</dt>
- <dd>
-  新しく作成するバックアップファイルの名前</dd>
- <dt>
-  aBackupParentDirectory</dt>
- <dd>
-  バックアップファイルを格納するディレクトリの名前。この引数が指定されない場合はオリジナルのデータベースファイルと同じ場所にバックアップファイルが作成されます。</dd>
-</dl>
-<h6 id="戻り値">戻り値</h6>
-<p>新しいバックアップデータベースファイルを意味する<code><a href="/ja/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIFile" title="">nsIFile</a></code>オブジェクト</p>
-<h3 id="openSpecialDatabase.28.29" name="openSpecialDatabase.28.29">openSpecialDatabase()</h3>
-<p>要求されたストレージのタイプを特定する命名された特別なデータベースストレージへの接続を開きます。</p>
-<p></p><div class="blockIndicator note"><strong>註:</strong> プロファイルデータベースへはメインスレッドからのみアクセスしてください。(他の呼び出しが利用している可能性があります。)</div><p></p>
-<h6 id="引数_2">引数</h6>
-<dl>
- <dt>
-  aStorageKey</dt>
- <dd>
-  要求されたストレージタイプを特定するキー文字列。"profile"および"memory"が有効です。</dd>
-</dl>
-<h6 id="戻り値_2">戻り値</h6>
-<p>指定されたデータベースへの接続を提供する新しい<code><a href="/ja/docs/Mozilla/Tech/XPCOM/Reference/Interface/mozIStorageConnection" title="">mozIStorageConnection</a></code>オブジェクト</p>
-<h6 id="例外">例外</h6>
-<dl>
- <dt>
-  NS_ERROR_INVALID_ARG</dt>
- <dd>
-  <code>aStorageKey</code>が不正な場合</dd>
-</dl>
-<h3 id="openDatabase.28.29" name="openDatabase.28.29">openDatabase()</h3>
-<p>指定されたファイルへのデータベース接続を開きます。このメソッドが<code>NS_ERROR_FILE_CORRUPTED</code>例外をスローする場合、<code><a href="https://developer.mozilla.org/ja/docs/XPCOM_Interface_Reference/mozIStorageService#backupDatabaseFile()">mozIStorageService.backupDatabaseFile()</a></code>メソッドをデータベースをバックアップするために呼び出すことが推奨されます。こうすることでユーザデータの喪失を防ぐことができます。(現在失われたデータを復旧する手段はありません。)</p>
-<p></p><div class="blockIndicator warning">
-    <p><strong>警告:</strong> 単一のファイルに対して複数の接続を確立する場合、<strong>必ず</strong>毎回大文字小文字を含め<strong>正確に同じ名前を</strong>使用してください。SQLiteのプログラムは既に接続が開かれているかどうかを調べるために、単純な文字列比較によって判断しています。"Foo.sqlite" と "foo.sqlite" により接続を開いた場合はあなたのデータベースは<strong>破損してしまう</strong>でしょう。</p>
-</div><p></p>
-<p>もし、仮想テーブルをデータベース中に含むのであれば(例えば、全文インデックスなど)、<code><a href="https://developer.mozilla.org/ja/docs/XPCOM_Interface_Reference/mozIStorageService#openUnsharedDatabase()">mozIStorageService.openUnsharedDatabase()</a></code>を開く際に使うべきです。なぜならばこのようなテーブルは共有キャッシュが使えないためです。このメソッドを仮想テーブルを含むデータベースへの接続を開くために用いた場合、データベースの破損と<code>NS_ERROR_FILE_CORRUPTED</code>例外のスローが発生するでしょう。</p>
-<pre>mozIStorageConnection openDatabase(
-  in nsIFile aDatabaseFile
-);
-</pre>
-<h6 id="引数_3">引数</h6>
-<dl>
- <dt>
-  aDatabaseFile</dt>
- <dd>
-  データベースとして開くための<code><a href="/ja/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIFile" title="">nsIFile</a></code>オブジェクト</dd>
-</dl>
-<h6 id="戻り値_3">戻り値</h6>
-<p>開かれたデータベース接続である<code><a href="/ja/docs/Mozilla/Tech/XPCOM/Reference/Interface/mozIStorageConnection" title="">mozIStorageConnection</a></code>オブジェクト</p>
-<h6 id="例外_2">例外</h6>
-<dl>
- <dt>
-  NS_ERROR_FAILURE</dt>
- <dd>
-  データベースを開こうとした際にエラーが起こった場合発生</dd>
- <dt>
-  NS_ERROR_FILE_CORRUPTED</dt>
- <dd>
-  データベースファイルが破損した場合、またはデータベースが(このメソッドでは対応していない)仮想テーブルを含む場合に発生</dd>
- <dt>
-  NS_ERROR_OUT_OF_MEMORY</dt>
- <dd>
-  新しいストレージオブジェクトの割り当てが失敗した場合に発生</dd>
-</dl>
-<h3 id="openUnsharedDatabase.28.29" name="openUnsharedDatabase.28.29">openUnsharedDatabase()</h3>
-<p>共有キャッシュを使わずに指定されたファイルへのデータベース接続を開きます。このメソッドがNS_ERROR_FILE_CORRUPTED例外をスローする場合、<code><a href="https://developer.mozilla.org/ja/docs/XPCOM_Interface_Reference/mozIStorageService#backupDatabaseFile()">mozIStorageService.backupDatabaseFile()</a></code>メソッドをデータベースバックアップのために呼び出すことが推奨されます。こうすることでユーザデータの喪失を防ぐことができます。(現在失われたデータを復旧する手段はありません。)</p>
-<p></p><div class="blockIndicator warning">
-    <p><strong>警告:</strong> 単一のファイルに対して複数の接続を確立する場合、<strong>必ず</strong>毎回大文字小文字を含め<strong>正確に同じ名前を</strong>使用してください。SQLiteのプログラムは既に接続が開かれているかどうかを調べるために、単純な文字列比較によって判断しています。"Foo.sqlite" と "foo.sqlite" により接続を開いた場合はあなたのデータベースは<strong>破損してしまう</strong>でしょう。</p>
-</div><p></p>
-<pre>mozIStorageConnection openUnsharedDatabase(
-  in nsIFile aDatabaseFile
-);
-</pre>
-<h6 id="引数_4">引数</h6>
-<dl>
- <dt>
-  aDatabaseFile</dt>
- <dd>
-  データベースとして開くための<code><a href="/ja/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIFile" title="">nsIFile</a></code>オブジェクト</dd>
-</dl>
-<h6 id="戻り値_4">戻り値</h6>
-<p>開かれたデータベース接続である<code><a href="/ja/docs/Mozilla/Tech/XPCOM/Reference/Interface/mozIStorageConnection" title="">mozIStorageConnection</a></code>オブジェクト</p>
-<h6 id="例外_3">例外</h6>
-<dl>
- <dt>
-  NS_ERROR_FAILURE</dt>
- <dd>
-  データベースを開こうとした際にエラーが起こった場合発生</dd>
- <dt>
-  NS_ERROR_FILE_CORRUPTED</dt>
- <dd>
-  データベースファイルが破損した場合、またはデータベースが(このメソッドでは対応していない)仮想テーブルを含む場合に発生</dd>
- <dt>
-  NS_ERROR_OUT_OF_MEMORY</dt>
- <dd>
-  新しいストレージオブジェクトの割り当てが失敗した場合に発生</dd>
-</dl>
-<h3 id="参照">参照</h3>
-<ul>
- <li><a href="/en/Storage" title="en/Storage">Storage</a></li>
- <li><a href="/en/mozIStorageConnection" title="en/mozIStorageConnection">mozIStorageConnection</a></li>
-</ul>
-<dl>
- <dd>
-   </dd>
-</dl>
diff --git a/files/ja/orphaned/mozmill/index.html b/files/ja/orphaned/mozmill/index.html
deleted file mode 100644
index 59dadee8ad..0000000000
--- a/files/ja/orphaned/mozmill/index.html
+++ /dev/null
@@ -1,48 +0,0 @@
----
-title: Mozmill
-slug: orphaned/Mozmill
-tags:
-  - MozMill
-original_slug: Mozmill
----
-<p>MozMill はテストツールであり、Gecko ベースのアプリケーション (Firefox, Thunderbird, Songbird 等) の自動テストを書くためのフレームワークです。これは、<a class="link-https" href="https://addons.mozilla.org/ja/firefox/addon/9018">拡張機能</a> としてビルドされており、IDE (integrated development environment) も含まれています。また、<a class="external" href="http://pypi.python.org/pypi?%3Aaction=search&amp;term=mozmill&amp;submit=search" title="http://pypi.python.org/pypi?:action=search&amp;term=mozmill&amp;submit=search">コマンドライン版のクライアント</a>もあり、テストを書いたり実行したり、テストのデバッグの助けにもなります。MozMill には、ユーザとの対話をシミュレートする機能的なテストを書く助けとなる、大規模な API が用意されています。同様に、完全な <a class="internal" href="/ja/Mozmill/Mozmill_Unit_Test_Framework" title="ja/Mozmill Tests/Mozmill Unit Test Framework">ユニットテスト API</a> もあります。</p>
-<p><a class="link-https" href="https://wiki.mozilla.org/QA/Mozmill_Test_Automation">Mozmill テスト自動化プロジェクト</a> は、2009 年 1 月に開始され、Firefox のための自動テスト作業をカバーしています。<a class="link-https" href="https://wiki.mozilla.org/QA/Mozmill_Test_Automation">プロジェクトのページ</a>をご覧になるか、<a href="/ja/Mozmill_Tests" title="ja/Mozmill Tests">Mozmill Tests</a> のドキュメントを見て、テスト書きへの貢献や MozMill テストの実行についてのイメージをつかんでください。既存のテストは、新しい Firefox のリリースのための <a href="/ja/Mozmill/Release_Testing" title="ja/Mozmill/Release Testing">リリーステスト</a>のサイクルで実行されます。</p>
-<p>また、Mozilla Messaging チームには、<a href="/ja/Thunderbird/Thunderbird_MozMill_Testing" title="ja/Thunderbird/Thunderbird MozMill Testing">MozMill による Thunderbird のテスト</a>を扱うアクティブなプロジェクトがあります。</p>
-<h2 id="インストール">インストール</h2>
-<p>Mozmill は、2 通りの異なる方法でインストールできます。多くの場合は、add-ons.mozilla.org からダウンロードできる <a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/9018" title="https://addons.mozilla.org/en-US/firefox/addon/9018">Mozmill Extension</a> をお勧めします。この拡張機能には統合された開発環境といくつかのオーサリングツール、テストを実行するためのグラフィカルなインタフェースが含まれています。<a href="/ja/Mozmill_Tests#Run_Mozmill_restart_tests" title="https://developer.mozilla.org/ja/Mozmill_Tests#Run_Mozmill_restart_tests">再起動テスト</a>とオペレーティングシステムの対話に興味のある上級ユーザには、python <a class="external" href="http://pypi.python.org/pypi/pip">pip</a> (or <a class="external" href="http://pypi.python.org/pypi/setuptools">setuptools</a>) パッケージインストーラを使用した <a class="external" href="http://pypi.python.org/pypi?%3Aaction=search&amp;term=mozmill&amp;submit=search" title="http://pypi.python.org/pypi?:action=search&amp;term=mozmill&amp;submit=search">コマンドライン版のクライアント</a> のインストールをお勧めします。</p>
-<h3 id="拡張機能版">拡張機能版</h3>
-<p>拡張機能版をインストールするには、アドオンマネージャの "アドオンを入手" タブを開いて Mozmill を検索し、インストールするだけです。<a class="link-https" href="https://addons.mozilla.org/ja/firefox/addon/9018">addons.mozilla.org</a> の Web サイトから直接インストールすることもできます。アプリケーションを再起動してインストールを完了してください。</p>
-<h3 id="コマンドライン版のクライアント">コマンドライン版のクライアント</h3>
-<p>コマンドライン版の MozMill をインストールするには、さらにいくつかの手順が必要になります。この手順はオペレーティングシステムにより多少異なります。</p>
-<h4 id="Windows">Windows</h4>
-<p>MozMill の前に、MozillaBuildSetup パッケージをシステムにインストールしてください。このパッケージの <a class="external" href="http://ftp.mozilla.org/pub/mozilla.org/mozilla/libraries/win32/MozillaBuildSetup-Latest.exe">最新ビルド</a>を入手し、手動でインストールしてください。l10n.bat ファイルを実行した後、MozMill コマンドライン版のクライアントをインストールしてください。</p>
-<pre><code>$ easy_install pip
-$ pip install mozmill
-$ pip install mercurial     (Visual Studio がインストールされていない環境では、この <a href="http://hg.mozilla.org/qa/mozmill-automation/raw-file/tip/setup/py25.reg">レジストリファイル</a> をダウンロードして適用し、<a href="http://people.mozilla.com/~hskupin/mozmill-crowd/mozmill-windows.zip">MozMill のバイナリパッケージ</a> を手動でインストール (setup ファイルまたは setup.cmd をコマンドプロンプトで実行) してください。)
-</code></pre>
-<h4 id="Mac_OS_X">Mac OS X</h4>
-<p>Mac OS X 10.4 の環境の場合は、先に <a class="external" href="http://python.org/download/">python.org</a> から Python 2.5 以降のバージョンをダウンロードしてインストールする必要があります。その後、MozMill を setuptools でインストールしてください。</p>
-<pre><code>$ curl -O http://peak.telecommunity.com/dist/ez_setup.py</code>
-<code>$ sudo python ez_setup.py
-$ sudo easy_install pip</code>
-$ sudo pip install mozmill mercurial
-</pre>
-<h4 id="Ubuntu">Ubuntu</h4>
-<p>MozMill を Ubuntu にインストールするには、ターミナルで次の 2 つのコマンドを実行するだけです:</p>
-<pre>$ sudo apt-get install python-pip python-dev
-$ sudo pip install mozmill mercurial</pre>
-<h2 id="MozMill_の更新">MozMill の更新</h2>
-<p>MozMill を拡張機能としてインストールした場合は、新しいバージョンがリリースされた時に、アプリケーションから自動的に通知されます。コマンドライン版のクライアントを更新するには、次のコマンドを実行してください (sudo は Windows 環境では不要です):</p>
-<pre>$ sudo pip install --upgrade mozmill
-</pre>
-<h2 id="さらに読むべきもの">さらに読むべきもの</h2>
-<p>他にも、いくつかの MozMill の概要を説明するページがあります。後で参照するため、これらのページをブックマークに追加しておくと良いでしょう。</p>
-<ul> <li><a href="/ja/Mozmill/First_Steps/Tutorial:_Introduction_to_Mozmill" title="ja/Mozmill Tests/Tutorial: Introduction to Mozmill">Introduction to Mozmill</a> - 必要な MozMill の各 API オブジェクトの詳細なチュートリアル</li> <li><a href="/ja/Mozmill_Tests" title="https://developer.mozilla.org/ja/Mozmill_Tests">Mozmill tests</a> - コマンドラインから MozMill を実行する方法</li>
-</ul>
-<h4 id="リファレンスデスク">リファレンスデスク</h4>
-<ul> <li><a href="/ja/Mozmill/Mozmill_Controller_Object" title="ja/Mozmill/Mozmill Controller Object">controller object reference</a></li> <li><a href="/ja/Mozmill/Mozmill_Elements_Library_Object" title="ja/Mozmill/Mozmill Elements Library Object">elementslib object reference</a> (Mozmill 2.0 で非推奨 - <a href="/ja/Mozmill/Finding_Mozmill_Elements" title="Finding_Mozmill_Elements">finding mozmill elements</a> 参照)</li> <li><a href="/ja/Mozmill/Mozmill_Element_Object" title="element object reference">element object reference</a> (Mozmill 2.0+)</li> <li><a href="/ja/Mozmill/Finding_Mozmill_Elements" title="Finding Mozmill Elements">finding mozmill elements</a> (Mozmill 2.0+)</li> <li><a href="/ja/Mozmill/Mozmill_Base_Object_Interfaces" title="ja/Mozmill Tests/Mozmill Base Object Interfaces">mozmill object reference</a></li> <li><a href="/ja/Mozmill/Mozmill_Unit_Test_Framework" title="ja/Mozmill Tests/Mozmill Unit Test Framework">unit test API reference</a></li> <li><a href="/ja/Mozmill/Mozmill_Element_Object/Extending_the_MozMill_element_hierarchy" title="https://developer.mozilla.org/ja/Mozmill/Mozmill_Element_Object/Extending_Element_Hierarchy">extending the element hierarchy</a></li>
-</ul>
-<h2 id="バグ">バグ</h2>
-<p>Mozmill は、Mozilla プロジェクト内の多くのテストシステムと同様に、開発段階にあります。バグを見つけたときは、<a class="link-https" href="https://bugzilla.mozilla.org/buglist.cgi?query_format=advanced&amp;bug_status=UNCONFIRMED&amp;bug_status=NEW&amp;bug_status=ASSIGNED&amp;bug_status=REOPENED&amp;component=JSBridge&amp;component=Mozmill&amp;component=MozRunner&amp;product=Testing" title="https://bugzilla.mozilla.org/buglist.cgi?query_format=advanced&amp;bug_status=UNCONFIRMED&amp;bug_status=NEW&amp;bug_status=ASSIGNED&amp;bug_status=REOPENED&amp;component=JSBridge&amp;component=Mozmill&amp;component=MozRunner&amp;product=Testing">既知のバグ</a> のリストですでに報告されていないか確認してください。まだ報告されていない場合は、"<code>Testing</code>" の製品カテゴリの "<code>Mozmill</code>" コンポーネント下に <a class="link-https" href="https://bugzilla.mozilla.org/enter_bug.cgi?product=Testing">新たなバグとして報告</a>してください。バグ報告の際は、バグを再現するためのできるだけ詳細な情報と MozMill のテストを添付してください。よろしくお願いします！</p>
-<div class="noinclude"> <p>{{ languages( { "en": "en/Mozmill" } ) }}</p>
-</div>
diff --git a/files/ja/orphaned/nsidomhtmlmediaelement/index.html b/files/ja/orphaned/nsidomhtmlmediaelement/index.html
deleted file mode 100644
index 133e28a8aa..0000000000
--- a/files/ja/orphaned/nsidomhtmlmediaelement/index.html
+++ /dev/null
@@ -1,346 +0,0 @@
----
-title: nsIDOMHTMLMediaElement
-slug: orphaned/NsIDOMHTMLMediaElement
-original_slug: NsIDOMHTMLMediaElement
----
-<p></p>
-
-<p><code>nsIDOMHTMLMediaElement</code> インターフェースは HTML 5 における <a class="internal" href="/Ja/HTML/Element/Audio" title="Ja/HTML/Element/Audio"><code>audio</code></a> および <a class="internal" href="/Ja/HTML/Element/Video" title="Ja/HTML/Element/Video"><code>video</code></a> 要素の実装に用いられています。</p>
-
-<div class="note"><strong>注意:</strong> <code> cue ranges</code> 機能の仕様は現在流動的な状況にあり、 HTML 5 標準においては大幅に改訂が加えられるか、置き換えられてしまう可能性があります。そのため、現時点では Firefox ではこの機能に対応していません。</div>
-
-<p></p><div style="border: solid #ddd 2px; margin-bottom: 12px;">
-<div style="background: #eee; padding: 2px;"><code><a href="https://dxr.mozilla.org/mozilla-central/source/dom/public/idl/html/nsIDOMHTMLMediaElement.idl" rel="custom">dom/public/idl/html/nsIDOMHTMLMediaElement.idl</a></code><span style="text-align: right; float: right;"><a href="/ja/docs/Interfaces/About_Scriptable_Interfaces" style="color: #00cc00; font-weight: 700;">Scriptable</a></span></div>
-<span style="padding: 4px 2px;">
-
-<i>Please add a summary to this article.</i>
-</span>
-
-<div style="background: #eee; padding: 2px;">
-<span> </span>
-<span style="text-align: right; float: right;">最終更新: Gecko 1.9.1 (Firefox 3.5 / Thunderbird 3.0 / SeaMonkey 2.0)</span></div>
-</div><p></p>
-
-<p>Inherits from: <code><a href="/ja/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIDOMHTMLElement" title="">nsIDOMHTMLElement</a></code></p>
-
-<h2 id="Method_overview" name="Method_overview">メソッド概要 (Method Overview)</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <td><code>void <a class="internal" href="/Ja/NsIDOMHTMLMediaElement#addCueRange()" title="Ja/NsIDOMHTMLMediaElement#addCueRange()">addCueRange</a>(in DOMString className, in float start, in float end, in boolean pauseOnExit, in nsIDOMHTMLVoidCallback enterCallback, in nsIDOMHTMLVoidCallback exitCallback);</code></td>
-  </tr>
-  <tr>
-   <td><code>DOMString <a class="internal" href="/Ja/NsIDOMHTMLMediaElement#canPlayType()" title="Ja/NsIDOMHTMLMediaElement#canPlayType()">canPlayType</a>(in DOMString type);</code></td>
-  </tr>
-  <tr>
-   <td><code>void <a class="internal" href="/Ja/NsIDOMHTMLMediaElement#load()" title="Ja/NsIDOMHTMLMediaElement#load()">load</a>();</code></td>
-  </tr>
-  <tr>
-   <td><code>void <a class="internal" href="/Ja/NsIDOMHTMLMediaElement#pause()" title="Ja/NsIDOMHTMLMediaElement#pause()">pause</a>();</code></td>
-  </tr>
-  <tr>
-   <td><code>void <a class="internal" href="/Ja/NsIDOMHTMLMediaElement#play()" title="Ja/NsIDOMHTMLMediaElement#play()">play</a>();</code></td>
-  </tr>
-  <tr>
-   <td><code>void <a class="internal" href="/Ja/NsIDOMHTMLMediaElement#removeCueRanges()" title="Ja/NsIDOMHTMLMediaElement#removeCueRanges()">removeCueRanges</a>(in DOMString className);</code></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Attributes" name="Attributes">属性 (Attributes)</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <td class="header" style="text-align: center;">属性</td>
-   <td class="header" style="text-align: center;">型</td>
-   <td class="header" style="text-align: center;">意味</td>
-  </tr>
-  <tr>
-   <td><code>autoplay</code></td>
-   <td><code>boolean</code></td>
-   <td><code>true</code> if playback should automatically begin as soon as enough media is available to do so without interruption.</td>
-  </tr>
-  <tr>
-   <td><code>buffered</code></td>
-   <td><code>TimeRanges</code></td>
-   <td>A static, normalized <code>TimeRanges</code> object describing the time ranges of the media that have been buffered.  <strong>Read only.</strong>  <span class="inlineIndicator unimplemented unimplementedInline">未実装</span></td>
-  </tr>
-  <tr>
-   <td><code>bufferedBytes</code></td>
-   <td><code>ByteRanges</code></td>
-   <td>A static, normalized <code>ByteRanges</code> object describing the byte ranges of the media that have been buffered.  <strong>Read only.</strong>  <span class="inlineIndicator unimplemented unimplementedInline">未実装</span></td>
-  </tr>
-  <tr>
-   <td><code>bufferingRate</code></td>
-   <td><code>float</code></td>
-   <td>The average number of bits per second for the current download over the past few seconds.  If there is no download in progress, this value is 0.0.  <strong>Read only.</strong>  <span class="inlineIndicator unimplemented unimplementedInline">未実装</span></td>
-  </tr>
-  <tr>
-   <td><code>bufferingThrottled</code></td>
-   <td><code>boolean</code></td>
-   <td><code>true</code> if Firefox is intentionally throttling the bandwidth used by the download (such as when the download is paused), otherwise <code>false</code>. <strong>Read only.</strong>  <span class="inlineIndicator unimplemented unimplementedInline">未実装</span></td>
-  </tr>
-  <tr>
-   <td><code>controls</code></td>
-   <td><code>boolean</code></td>
-   <td><code>true</code> if user interface for controlling the media should be presented.</td>
-  </tr>
-  <tr>
-   <td><code>currentSrc</code></td>
-   <td><code>DOMString</code></td>
-   <td>The absolute URL of the chosen media resource (if, for example, the server selects a media file based on the resolution of the user's display), or an empty string if the <code>networkState</code> is <code>EMPTY</code>. <strong>Read only.</strong></td>
-  </tr>
-  <tr>
-   <td><code>currentTime</code></td>
-   <td><code>float</code></td>
-   <td>The current playback time, in seconds.  Setting this value will seek the media to the new time.</td>
-  </tr>
-  <tr>
-   <td><code>defaultPlaybackRate</code></td>
-   <td><code>float</code></td>
-   <td>The default playback rate for the media.  The Ogg backend does not support this.  1.0 is "normal speed," values lower than 1.0 make the media play slower than normal, higher values make it play faster.  The value 0.0 is invalid and throws a <code>NOT_SUPPORTED_ERR</code> exception.</td>
-  </tr>
-  <tr>
-   <td><code>duration</code></td>
-   <td><code>float</code></td>
-   <td>The length of the media in seconds, or zero if no media data is available.  If the media data is available but the length is unknown, this value is <code>NaN</code>.  If the media is streamed and has no predefined length, the value is <code>Inf</code>.  <strong>Read only.</strong></td>
-  </tr>
-  <tr>
-   <td><code>ended</code></td>
-   <td><code>boolean</code></td>
-   <td><code>true</code> if playback has finished.  <strong>Read only.</strong></td>
-  </tr>
-  <tr>
-   <td><code>error</code></td>
-   <td><code><code><a href="/ja/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIDOMHTMLMediaError" title="">nsIDOMHTMLMediaError</a></code></code></td>
-   <td>The media's error status.  <strong>Read only.</strong></td>
-  </tr>
-  <tr>
-   <td><code>muted</code></td>
-   <td><code>boolean</code></td>
-   <td><code>true</code> if the audio is muted, otherwise <code>false</code>.</td>
-  </tr>
-  <tr>
-   <td><code>networkState</code></td>
-   <td><code>unsigned short</code></td>
-   <td>
-    <p>The current state of the fetch of the media. <strong>Read only.</strong></p>
-
-    <table class="standard-table">
-     <tbody>
-      <tr>
-       <td class="header" style="text-align: center;">定数</td>
-       <td class="header" style="text-align: center;">値</td>
-       <td class="header" style="text-align: center;">意味</td>
-      </tr>
-      <tr>
-       <td><code>EMPTY</code></td>
-       <td>0</td>
-       <td>There is no data yet.  The <code>readyState</code> will also be <code>HAVE_NOTHING</code>.</td>
-      </tr>
-      <tr>
-       <td><code>LOADING</code></td>
-       <td>1</td>
-       <td>The media is loading.</td>
-      </tr>
-      <tr>
-       <td><code>LOADED_METADATA</code></td>
-       <td>2</td>
-       <td>The media's metadata has been loaded.</td>
-      </tr>
-      <tr>
-       <td><code>LOADED_FIRST_FRAME</code></td>
-       <td>3</td>
-       <td>The media's first frame has been loaded.</td>
-      </tr>
-      <tr>
-       <td><code>LOADED</code></td>
-       <td>4</td>
-       <td>The media has been fully loaded.</td>
-      </tr>
-     </tbody>
-    </table>
-   </td>
-  </tr>
-  <tr>
-   <td><code>paused</code></td>
-   <td><code>boolean</code></td>
-   <td><code>true</code> if the media playback is currently paused.  <strong>Read only.</strong></td>
-  </tr>
-  <tr>
-   <td><code>playbackRate</code></td>
-   <td><code>float</code></td>
-   <td>The current rate at which the media is being played back.  This is used to implement user controls for fast forward, slow motion, and so forth.  The normal playback rate is multiplied by this value to obtain the current rate, so a value of 1.0 indicates normal speed.  Not supported by the Ogg backend.</td>
-  </tr>
-  <tr>
-   <td><code>readyState</code></td>
-   <td><code>unsigned short</code></td>
-   <td>
-    <p>The media's current readiness state.  <strong>Read only.</strong></p>
-
-    <table class="standard-table">
-     <tbody>
-      <tr>
-       <td class="header" style="text-align: center;">定数</td>
-       <td class="header" style="text-align: center;">値</td>
-       <td class="header" style="text-align: center;">意味</td>
-      </tr>
-      <tr>
-       <td><code>HAVE_NOTHING</code></td>
-       <td>0</td>
-       <td>No information is available about the media resource.</td>
-      </tr>
-      <tr>
-       <td><code>HAVE_METADATA</code></td>
-       <td>1</td>
-       <td>Enough of the media resource has been retrieved that the metadata attributes are initialized.  Seeking will no longer raise an exception.</td>
-      </tr>
-      <tr>
-       <td><code>HAVE_SOME_DATA</code></td>
-       <td>2</td>
-       <td>Data for the current playback position is not available, but there is at least one playback position for which data is available.</td>
-      </tr>
-      <tr>
-       <td><code>HAVE_CURRENT_DATA</code></td>
-       <td>3</td>
-       <td>Data is available for the current playback position, but not enough to actually play more than one frame.</td>
-      </tr>
-      <tr>
-       <td><code>HAVE_FUTURE_DATA</code></td>
-       <td>4</td>
-       <td>Data for the current playback position as well as for at least a little bit of time into the future is available (in other words, at least two frames of video, for example).</td>
-      </tr>
-      <tr>
-       <td><code>HAVE_ENOUGH_DATA</code></td>
-       <td>5</td>
-       <td>Enough data is available—and the download rate is high enough—that the media can be played through to the end without interruption.</td>
-      </tr>
-     </tbody>
-    </table>
-   </td>
-  </tr>
-  <tr>
-   <td><code>seeking</code></td>
-   <td><code>boolean</code></td>
-   <td><code>true</code> if the media is in the process of seeking to a new position, otherwise <code>false</code>.<strong> Read only.</strong></td>
-  </tr>
-  <tr>
-   <td><code>src</code></td>
-   <td><code>DOMString</code></td>
-   <td>The URL of the media to present.</td>
-  </tr>
-  <tr>
-   <td><code>totalBytes</code></td>
-   <td><code>unsigned long</code></td>
-   <td>The length, in bytes, of the media resource.  If the length is unknown, or the content is streamed and therefore has no specified length, this value is 0.  <strong>Read only.</strong></td>
-  </tr>
-  <tr>
-   <td><code>volume</code></td>
-   <td><code>float</code></td>
-   <td>The current audio volume, from 0.0 (silent) to 1.0 (maximum).</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="メソッド_(Methods)">メソッド (Methods)</h2>
-
-<h3 id="addCueRange()">addCueRange()</h3>
-
-<div class="note"><strong>Note:</strong> This method is not yet implemented, as its definition is in flux in the HTML 5 standard.</div>
-
-<p>Adds a cue range to the media element.</p>
-
-<pre>void addCueRange(
-  in DOMString className,
-  in float start,
-  in float end,
-  in boolean pauseOnExit,
-  in nsIDOMHTMLVoidCallback enterCallback,
-  in nsIDOMHTMLVoidCallback exitCallback
-);
-</pre>
-
-<h6 id="Parameters">Parameters</h6>
-
-<p>xxx</p>
-
-<h3 id="eatCookie.28.29" name="eatCookie.28.29">canPlayType()</h3>
-
-<p>Determines whether or not the specified media type can be played back.</p>
-
-<pre class="eval">DOMString canPlayType(
-  in DOMString type
-);</pre>
-
-<h6 id="Parameters_4">Parameters</h6>
-
-<dl>
- <dt>type</dt>
- <dd>The media type to test for, such as "video/ogg".</dd>
-</dl>
-
-<h6 id="Return_value">Return value</h6>
-
-<ul>
- <li>"" if the specified type definitely cannot be played. (was "no" until Gecko 1.9.1.1/ Firefox 3.5.1)</li>
- <li>"probably" if the specified type appears to be playable.</li>
- <li>"maybe" if it's impossible to be sure if the type can be played without actually attempting to do so.</li>
-</ul>
-
-<p>Because media formats are complicated, and it's impossible to judge every possible detail from the type string, there is no such thing as 100% certain that the specified type can be played; the best you can do is "probably".</p>
-
-<h3 id="eatCookie.28.29" name="eatCookie.28.29">load()</h3>
-
-<p>Begins loading the media content from the server.</p>
-
-<pre class="eval"> void load();</pre>
-
-<h6 id="Parameters_5">Parameters</h6>
-
-<p>None.</p>
-
-<h3 id="getFunnySaying.28.29" name="getFunnySaying.28.29">pause()</h3>
-
-<p>Pauses the media playback.</p>
-
-<pre class="eval"> void pause();
-</pre>
-
-<h6 id="Parameters_2" name="Parameters_2">Parameters</h6>
-
-<p>None.</p>
-
-<h3 id="sayYummy.28.29" name="sayYummy.28.29">play()</h3>
-
-<p>Begins playback of the media.</p>
-
-<pre class="eval"> void play();
-</pre>
-
-<h6 id="Parameters_3" name="Parameters_3">Parameters</h6>
-
-<p>None.</p>
-
-<h3 id="removeCueRanges()">removeCueRanges()</h3>
-
-<div class="note"><strong>Note:</strong> This function is not yet implemented, as its definition in the HTML 5 standard is in flux.</div>
-
-<pre>void removeCueRanges(
-  in DOMString className
-);
-</pre>
-
-<h6 id="Parameters_6">Parameters</h6>
-
-<p>xxx</p>
-
-<h2 id="See_also" name="See_also">参考資料</h2>
-
-<ul>
- <li><code><a class="internal" href="/Ja/HTML/Element/Video" title="Ja/HTML/Element/Video">video</a></code></li>
- <li><a class="internal" href="/Ja/HTML/Element/Audio" title="Ja/HTML/Element/Audio"><code>audio</code></a></li>
- <li><a class="internal" href="/Ja/HTML/Element/Source" title="Ja/HTML/Element/Source"><code>source</code></a></li>
- <li><a class="internal" href="/Ja/Using_audio_and_video_in_Firefox" title="Ja/Using audio and video in Firefox">Using audio and video in Firefox</a></li>
-</ul>
diff --git a/files/ja/orphaned/nsidynamiccontainer/index.html b/files/ja/orphaned/nsidynamiccontainer/index.html
deleted file mode 100644
index cd637a460a..0000000000
--- a/files/ja/orphaned/nsidynamiccontainer/index.html
+++ /dev/null
@@ -1,88 +0,0 @@
----
-title: nsIDynamicContainer
-slug: orphaned/nsIDynamicContainer
-tags:
-  - Developing Mozilla
-  - Extensions
-  - Interfaces
-  - Interfaces:Scriptable
-  - Places
-  - XPCOM
-  - XPCOM API Reference
-original_slug: nsIDynamicContainer
----
-<p>nsIDynamicContainerインタフェースは一時的なコンテンツのコンテナを提供するベースクラスを提供します。この機能はコンテナがオープンされたタイミングで、ノードを直接満たすことができます。すべてのリザルトノードのプロパティをそれぞれのアイテムに関連したデータを保存するのに利用できます。（例えばディスク上でのフルパスなど)また、それぞれのコンテナに対してサービスに関連付けられた追加のコンテナを作成することができます。<br>
- <br>
- </p><div style="border: solid #ddd 2px; margin-bottom: 12px;">
-<div style="background: #eee; padding: 2px;"><code><a href="https://dxr.mozilla.org/mozilla-central/source/toolkit/components/places/public/nsIDynamicContainer.idl" rel="custom">toolkit/components/places/public/nsIDynamicContainer.idl</a></code><span style="text-align: right; float: right;"><a href="/ja/docs/Interfaces/About_Scriptable_Interfaces" style="color: #00cc00; font-weight: 700;">Scriptable</a></span></div>
-<span style="padding: 4px 2px;">
-
-<i>Please add a summary to this article.</i>
-</span>
-
-<div style="background: #eee; padding: 2px;">
-<span> </span>
-<span style="text-align: right; float: right;">最終更新: Gecko 1.9 (Firefox 3)</span></div>
-</div><p></p>
-<p>継承元: <a href="/en/nsISupports" title="en/nsISupports">nsISupports</a></p>
-<h2 id="メソッドの概要"><br>
- メソッドの概要</h2>
-<p><code>void <a href="/ja/nsIDynamicContainer" title="ja/nsIDynamicContainer">onContainerNodeOpening</a>(in <a href="/en/nsINavHistoryContainerResultNode" title="en/nsINavHistoryContainerResultNode">nsINavHistoryContainerResultNode</a> aContainer, in <a href="/en/nsINavHistoryQueryOptions" title="en/nsINavHistoryQueryOptions">nsINavHistoryQueryOptions</a> aOptions);</code><br>
- <code>void <a href="/ja/nsIDynamicContainer" title="ja/nsIDynamicContainer">onContainerNodeClosed</a>(in <a href="/en/nsINavHistoryContainerResultNode" title="en/nsINavHistoryContainerResultNode">nsINavHistoryContainerResultNode</a> aContainer);<br>
- void <a href="/ja/nsIDynamicContainer" title="ja/nsIDynamicContainer">onContainerRemoving</a>(in long long aItemId);<br>
- void <a href="/ja/nsIDynamicContainer" title="ja/nsIDynamicContainer">onContainerMoved</a>(in long long aItemId, in long long aNewParent, in long aNewIndex);</code></p>
-<h2 id="メソッド">メソッド</h2>
-<h3 id="onContainerNodeOpening()">onContainerNodeOpening()</h3>
-<p>与えられたコンテナノードが新たにノードが作成されようとするときに呼ばれます。<br>
- 必要であればノードの作成を実行することができます。</p>
-<p></p><div class="blockIndicator note"><strong>註:</strong> 状態を保存したい場合は全てのリザルトノードはプロパティバッグをインプリメントします</div><p></p>
-<pre>void onContainerNodeOpening(
-  in nsINavHistoryContainerResultNode aContainer,
-  in nsINavHistoryQueryOptions aOptions
-);
-</pre>
-<h6 id="引数">引数</h6>
-<dl>
- <dt>
-  aContainer</dt>
- <dd>
-  これから開かれようとしているコンテナノード</dd>
- <dt>
-  aOptions</dt>
- <dd>
-  このクエリを生成するために使われるオプション。コンテナは可能ならばこれらに従います。もしクエリとフォルダノードをコンテナに追加しようとしている場合、実装は可能ならばこの値を使用しないといけません。<strong>この値を変更してはいけません。</strong></dd>
-</dl>
-<h3 id="onContainerNodeClosed()">onContainerNodeClosed()</h3>
-<p>与えられたコンテナがなくなるときに呼ばれます。従って、必要なクリーンアップ処理を実行することができます。このメソッドが呼びだされることは保証されて<strong>いません</strong>。具体的にはクエリがどこかへ行ってしまったときには呼ばれません。この現象はコンテナ自身がopen状態からclose状態へ遷移したときにのみ起こります。実際の処理ではかなり大量の動的に生成されたノードがこのメソッドをクリーンアップ処理のために呼び出します。</p>
-<pre>void onTainerNodeClosed(
-  in nsINavHistoryContainerResultNode aContainer
-);
-</pre>
-<h6 id="引数_2">引数</h6>
-<dl>
- <dt>
-  aContainer</dt>
- <dd>
-  hoge</dd>
-</dl>
-<h3 id="onContainerRemoving()">onContainerRemoving()</h3>
-<p>与えられたコンテナがブックマークテーブルから削除されようとするときに呼ばれます。従って、必要なクリーンアップ処理を実行することができます。このメソッドはコンテナが削除される<strong>前に</strong>呼ばれます、従って処理では依然としてコンテナを参照することができます。</p>
-<pre>void onContainerRemoving(
-  in long long aItemId
-);
-</pre>
-<h6 id="引数_3">引数</h6>
-<dl>
- <dt>
-  aItemId</dt>
- <dd>
-  コンテナアイテムのアイテムID。</dd>
-</dl>
-<h3 id="onContainerMoved()">onContainerMoved()</h3>
-<p>与えられたコンテナが丁度移動されようとしているときに呼ばれます。bookkeepingを行う処理に備えて存在します。このメソッドはコンテナが移動された<strong>後に</strong>呼ばれます。</p>
-<h3 id="関連記事">関連記事</h3>
-<ul>
- <li><a href="/ja/Places" title="ja/Places">Places</a></li>
- <li><a href="/en/nsINavHistoryContainerResultNode" title="en/nsINavHistoryContainerResultNode">nsINavHistoryContainerResultNode</a></li>
- <li><a href="/en/nsINavHistoryQueryOptions" title="en/nsINavHistoryQueryOptions">nsINavHistoryQueryOptions</a></li>
-</ul>
diff --git a/files/ja/orphaned/participating_in_the_mozilla_project/index.html b/files/ja/orphaned/participating_in_the_mozilla_project/index.html
deleted file mode 100644
index fa46754515..0000000000
--- a/files/ja/orphaned/participating_in_the_mozilla_project/index.html
+++ /dev/null
@@ -1,13 +0,0 @@
----
-title: Mozilla プロジェクトに参加する
-slug: orphaned/Participating_in_the_Mozilla_project
-original_slug: Participating_in_the_Mozilla_project
----
-<p>もしあなたが Mozilla プラットフォームに関連するコードでのバグの修正やその他の仕事を手伝うことに興味があるのなら、あなたに適切な方向を指し示すであろう文書がここで見つけられます。</p>
-<table class="mainpage-table"> <tbody> <tr> <td> <h2 id="ドキュメンテーショントピックス">ドキュメンテーショントピックス</h2>
-<dl> <dt><a class="internal" href="/ja/Developer_Guide" title="ja/Mozilla developer guide">Mozilla 開発者ガイド</a><br> </dt> <dd>Mozilla のコードベースに貢献するための開発 Tips とガイド。</dd> <dt><a class="internal" href="/ja/Developer_Guide/Source_Code" title="Ja/Mozilla source code">Mozilla ソースコード</a><br> </dt> <dd>ダウンロードもしくはバージョン管理システムを通してMozilla のコードを手に入れる方法とあなたのコードをツリーに入れる方法についての情報。<br> </dd> <dt><a class="internal" href="/ja/Developer_Guide/Build_Instructions" title="Ja/Build Documentation">ビルドに関するドキュメンテーション</a><br> </dt> <dd>Firefox と Thunderbird を含む、Mozilla プロジェクトのビルド方法についての情報。<em>このページは内容の整理を必要としています。</em><br> </dd> <dt><a class="internal" href="/Ja/The_Mozilla_platform" title="Ja/The Mozilla platform">Mozilla プラットフォーム</a><br> </dt> <dd>Mozilla プラットフォームについての情報。その API 群と技術のすべて、そして、あなた自身のプロジェクトでそれらを利用する方法など。</dd> <dt><a class="internal" href="/Project:ja/How_to_Help" title="Project:ja/How to Help">Mozilla を文書化する</a> <br> </dt> <dd> Mozilla のためおよび開かれた Web のために私たちのドキュメンテーションの作成と改善に協力してください。</dd> <dt><a class="internal" href="/Ja/Debugging" title="Ja/Debugging">デバッグ</a><br> </dt> <dd>Mozilla のコードをデバッグするときに従うべき、役に立つTips とガイドライン。</dd> <dt><a class="internal" href="/ja/QA" title="Ja/QA">品質保証（QA)</a><br> </dt> <dd>テストおよびバグトラッキングについての情報。</dd> <dt><a class="internal" href="/ja/Localization" title="ja/Localization">ローカライゼーション</a><br> </dt> <dd>Mozilla プロジェクトやドキュメンテーションなどを複数の言語に翻訳することに関する情報。</dd>
-</dl></td> <td> <h2 id="ツール">ツール</h2>
-<dl> <dt><a class="link-https" href="https://bugzilla.mozilla.org/" title="https://bugzilla.mozilla.org/">Bugzilla</a><br> </dt> <dd>Mozilla プロジェクトのための問題を追跡するために使われている <a class="internal" href="/ja/Bugzilla" title="ja/Bugzilla">Bugzilla</a> データベース。<br> </dd> <dt><a class="external" href="http://mxr.mozilla.org/" title="http://mxr.mozilla.org/">MXR</a><br> </dt> <dd>Web 上で Mozilla のソースコードレポジトリをブラウズ、検索できます。<br> </dd> <dt><a class="external" href="http://bonsai.mozilla.org/cvsqueryform.cgi" title="http://bonsai.mozilla.org/cvsqueryform.cgi">Bonsai</a><br> </dt> <dd><a class="internal" href="/ja/Bonsai" title="ja/Bonsai">Bonsai</a> ツールを使えば、レポジトリ上のどのファイルを誰が変更し、そして、いつそれがなされたのかを見つけられます。 <br> </dd> <dt><a class="external" href="http://tinderbox.mozilla.org/showbuilds.cgi" title="http://tinderbox.mozilla.org/showbuilds.cgi">Tinderbox</a><br> </dt> <dd><a class="internal" href="/ja/Tinderbox" title="ja/Tinderbox">Tinderbox</a> はツリーのステータス（現在ビルドが成功しているかどうか）を示します。作業ツリーでの作業を確実にするために、チェックインとチェックアウトの前にチェックしてください。</dd> <dt><a class="internal" href="/ja/Crash_reporting" title="Ja/Crash reporting">クラッシュトラッキング</a><br> </dt> <dd><a class="link-https" href="https://crash-reports.mozilla.com/reports" title="https://crash-reports.mozilla.com/reports">Socorro</a> および <a class="external" href="http://talkback-public.mozilla.org/search/start.jsp" title="http://talkback-public.mozilla.org/search/start.jsp">Talkback</a> クラッシュ報告システムについての情報。</dd> <dt><a class="external" href="http://graphs.mozilla.org/">パフォーマンストラッキング</a><br> </dt> <dd>Mozilla プロジェクトのパフォーマンス情報が見られます。</dd> <dt><a class="external" href="http://www.mozilla.org/community/developer-forums.html">開発者フォーラム</a><br> </dt> <dd>Mozilla の開発上の問題について話すことができるディスカッションフォーラムのトピック別リスト。<br> </dd>
-</dl></td> </tr> </tbody>
-</table>
-<p> {{ languages( { "en": "en/Participating_in_the_Mozilla_project"} ) }}</p>
diff --git a/files/ja/orphaned/tools/add-ons/dom_inspector/index.html b/files/ja/orphaned/tools/add-ons/dom_inspector/index.html
index 1d7222b299..cf4b6916f1 100644
--- a/files/ja/orphaned/tools/add-ons/dom_inspector/index.html
+++ b/files/ja/orphaned/tools/add-ons/dom_inspector/index.html
@@ -26,12 +26,12 @@ original_slug: DOM_Inspector
 <h2 id="Documentation" name="Documentation">ドキュメンテーション</h2>
 
 <dl>
- <dt><a href="/ja/DOM_Inspector/Introduction_to_DOM_Inspector" title="ja/DOM_Inspector/Introduction_to_DOM_Inspector">DOM Inspector 入門</a></dt>
+ <dt><a href="/ja/DOM_Inspector/Introduction_to_DOM_Inspector">DOM Inspector 入門</a></dt>
  <dd>DOM Inspector を始めるのに役立つガイド付きのチュートリアルです。</dd>
 </dl>
 
 <dl>
- <dt><a href="/ja/DOM_Inspector/DOM_Inspector_FAQ" title="ja/DOM_Inspector/DOM_Inspector_FAQ">DOM Inspector FAQ</a></dt>
+ <dt><a href="/ja/DOM_Inspector/DOM_Inspector_FAQ">DOM Inspector FAQ</a></dt>
  <dd><small>DOM Inspector に関するよくある質問への解答です。</small></dd>
 </dl>
 
diff --git a/files/ja/orphaned/tools/web_console/keyboard_shortcuts/index.html b/files/ja/orphaned/tools/web_console/keyboard_shortcuts/index.html
deleted file mode 100644
index 1a8af01916..0000000000
--- a/files/ja/orphaned/tools/web_console/keyboard_shortcuts/index.html
+++ /dev/null
@@ -1,11 +0,0 @@
----
-title: キーボードショートカット
-slug: orphaned/Tools/Web_Console/Keyboard_shortcuts
-translation_of: Tools/Web_Console/Keyboard_shortcuts
-original_slug: Tools/Web_Console/Keyboard_shortcuts
----
-<div>{{ToolsSidebar}}</div><p>{{Page ("ja/docs/tools/Keyboard_shortcuts", "web-console")}}</p>
-
-<h2 id="Global_shortcuts" name="Global_shortcuts">共通ショートカット</h2>
-
-<p>{{Page ("ja/docs/tools/Keyboard_shortcuts", "all-toolbox-tools")}}</p>
diff --git a/files/ja/orphaned/web/api/htmlorforeignelement/index.html b/files/ja/orphaned/web/api/htmlorforeignelement/index.html
deleted file mode 100644
index 99197278cb..0000000000
--- a/files/ja/orphaned/web/api/htmlorforeignelement/index.html
+++ /dev/null
@@ -1,57 +0,0 @@
----
-title: HTMLOrForeignElement
-slug: orphaned/Web/API/HTMLOrForeignElement
-tags:
-  - API
-  - HTML
-  - HTMLElement
-  - HTMLOrForeignElement
-  - Interface
-  - MathML
-  - MathMLElement
-  - Mixin
-  - Reference
-  - SVG
-  - SVGElement
-  - ミックスイン
-translation_of: Web/API/HTMLOrForeignElement
-original_slug: Web/API/HTMLOrForeignElement
----
-<div>{{APIRef("HTML DOM")}}{{Draft}}</div>
-
-<p><span class="seoSummary"><strong><code>HTMLOrForeignElement</code></strong> ミックスインは、 {{DOMxRef("HTMLElement")}}, {{DOMxRef("SVGElement")}}, {{DOMxRef("MathMLElement")}} の各インターフェイスで共通のいくつかの機能を説明します。</span>これらのインターフェイスは、もちろん、以下の列挙したものに加えたものに加えてもっと機能があります。</p>
-
-<div class="blockIndicator note">
-<p><strong>メモ</strong>: <code>HTMLOrForeignElement</code> はミックスインであり、インターフェイスではありません。実際に <code>HTMLOrForeignElement</code> 型のオブジェクトを生成することはできません。</p>
-</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("HTML WHATWG", "dom.html#htmlorsvgelement", '<code>HTMLOrForeignElement</code>')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td>初回定義</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
-
-<p>{{Compat("api.HTMLOrForeignElement")}}</p>
-
-<h2 id="See_also" name="See_also">関連情報</h2>
-
-<ul>
- <li>{{DOMxRef("HTMLElement")}}</li>
- <li>{{DOMxRef("SVGElement")}}</li>
- <li>{{DOMxRef("MathMLElement")}}</li>
-</ul>
diff --git a/files/ja/orphaned/web/api/navigatorconcurrenthardware/hardwareconcurrency/index.html b/files/ja/orphaned/web/api/navigatorconcurrenthardware/hardwareconcurrency/index.html
deleted file mode 100644
index e325f3ee41..0000000000
--- a/files/ja/orphaned/web/api/navigatorconcurrenthardware/hardwareconcurrency/index.html
+++ /dev/null
@@ -1,70 +0,0 @@
----
-title: navigator.hardwareConcurrency
-slug: orphaned/Web/API/NavigatorConcurrentHardware/hardwareConcurrency
-translation_of: Web/API/NavigatorConcurrentHardware/hardwareConcurrency
-original_slug: Web/API/NavigatorConcurrentHardware/hardwareConcurrency
----
-<p>{{APIRef("HTML DOM")}}</p>
-
-<p>{{AvailableInWorkers}}</p>
-
-<p><code><strong>navigator.hardwareConcurrency</strong></code> はユーザーのコンピューター上でスレッドを実行するために使用可能な論理プロセッサ数を返す読み取り専用のプロパティです。</p>
-
-<h2 id="構文">構文</h2>
-
-<pre class="syntaxbox"><em>logicalProcessors</em> = window.navigator.hardwareConcurrency
-</pre>
-
-<h2 id="値">値</h2>
-
-<p>論理プロセッサのコア数を示す{{jsxref("Number")}}です。</p>
-
-<p>現代のコンピューターはCPUに複数の物理プロセッサのコアを持っています（通常は2コアか4コア）。しかし、通常それぞれの物理コアは高度なスケジューリング技術を用いて一度に複数スレッドを実行することができます。 したがって、例えば4コアのCPUは8個の<strong>論理プロセッサコア</strong>を提供することができます。論理プロセッサのコア数は、コンテキストスイッチを必要とせずに一度に効果的に実行できるスレッドの数を測定するために使用できます。</p>
-
-<p>しかしながら、ブラウザはより少ない論理コア数を報告することを選択することで、一度に実行できる{{domxref("Worker")}}の数をより正確に表すことがあります。したがって、この数値をユーザーのシステムのコア数の絶対的な測定値として扱わないようにしてください。</p>
-
-<h2 id="例">例</h2>
-
-<p>この例では、ブラウザが報告した論理プロセッサごとに{{domxref("Worker")}}が1つ作られ、新しいWorkerへの参照と、そのWorkerをまだ使用しているかどうかを示すBooleanの値を含むレコードを作っています。これらのオブジェクトは後で使用するために配列に順々に格納されています。後でリクエストを処理するために使うWorkerのプールを作っています。</p>
-
-<pre class="brush: js">let workerList = [];
-
-for (let i = 0; i &lt; window.navigator.hardwareConcurrency; i++) {
-  let newWorker = {
-    worker: new Worker('cpuworker.js'),
-    inUse: false
-  };
-  workerList.push(newWorker);
-}</pre>
-
-<h2 id="仕様">仕様</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Specification</th>
-   <th scope="col">Status</th>
-   <th scope="col">Comment</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', '#dom-navigator-hardwareconcurrency', 'navigator.hardwareConcurrency')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td>Initial definition.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="ブラウザでの実装状況">ブラウザでの実装状況</h2>
-
-<div>
-
-
-<p>{{Compat("api.NavigatorConcurrentHardware.hardwareConcurrency")}}</p>
-</div>
-
-<h2 id="関連情報">関連情報</h2>
-
-<ul>
- <li>{{domxref("Navigator")}}</li>
- <li>{{domxref("WorkerNavigator")}}</li>
-</ul>
diff --git a/files/ja/orphaned/web/api/navigatorconcurrenthardware/index.html b/files/ja/orphaned/web/api/navigatorconcurrenthardware/index.html
deleted file mode 100644
index 43e5ae1965..0000000000
--- a/files/ja/orphaned/web/api/navigatorconcurrenthardware/index.html
+++ /dev/null
@@ -1,72 +0,0 @@
----
-title: NavigatorConcurrentHardware
-slug: orphaned/Web/API/NavigatorConcurrentHardware
-tags:
-  - API
-  - Concurrency
-  - HTML DOM
-  - Interface
-  - Navigator
-  - NavigatorCPU
-  - NavigatorConcurrentHardware
-  - NeedsBrowserCompatibility
-  - NeedsTranslation
-  - Reference
-  - Threading
-  - Threads
-  - TopicStub
-  - WorkerNavigator
-  - Workers
-translation_of: Web/API/NavigatorConcurrentHardware
-original_slug: Web/API/NavigatorConcurrentHardware
----
-<p>{{APIRef("HTML DOM")}}</p>
-
-<p>The <strong><code>NavigatorConcurrentHardware</code></strong> {{Glossary("mixin")}} adds to the {{domxref("Navigator")}} interface features which allow Web content to determine how many logical processors the user has available, in order to let content and Web apps optimize their operations to best take advantage of the user's CPU.</p>
-
-<p>{{AvailableInWorkers}}</p>
-
-<p>The number of <strong>logical processor cores</strong> is a way to measure the number of threads which can effectively be run at once without them having to share CPUs. Modern computers have multiple physical cores in their CPU (two or four cores is typical), but each physical core is also usually able to run more than one thread at a time using advanced scheduling techniques. So a four-core CPU may return 8. The browser may, however, choose to reduce the number in order to represent more accurately the number of {{domxref("Worker")}}s that can run at once</p>
-
-<h2 id="Properties">Properties</h2>
-
-<dl>
- <dt>{{domxref("NavigatorConcurrentHardware.hardwareConcurrency")}} {{readonlyinline}}</dt>
- <dd>Returns the number of logical processors which may be available to the user agent. This value is always at least 1, and will be 1 if the actual number of logical processors can't be determined.</dd>
-</dl>
-
-<h2 id="Methods">Methods</h2>
-
-<p><em>The <code>NavigatorConcurrentHardware</code></em><em> mixin has no methods.</em></p>
-
-<h2 id="Specifications">Specifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Specification</th>
-   <th scope="col">Status</th>
-   <th scope="col">Comment</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', '#navigatorconcurrenthardware', 'NavigatorConcurrentHardware')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td>Initial definition.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility">Browser compatibility</h2>
-
-
-
-<p>{{Compat("api.NavigatorConcurrentHardware")}}</p>
-
-<h2 id="See_also">See also</h2>
-
-<ul>
- <li>{{domxref("Navigator")}}</li>
- <li>{{domxref("WorkerNavigator")}}</li>
-</ul>
diff --git a/files/ja/orphaned/web/api/navigatorid/appcodename/index.html b/files/ja/orphaned/web/api/navigatorid/appcodename/index.html
deleted file mode 100644
index 36f09b360f..0000000000
--- a/files/ja/orphaned/web/api/navigatorid/appcodename/index.html
+++ /dev/null
@@ -1,27 +0,0 @@
----
-title: window.navigator.appCodeName
-slug: orphaned/Web/API/NavigatorID/appCodeName
-tags:
-  - DOM
-  - DOM_0
-  - Gecko
-  - Gecko DOM Reference
-translation_of: Web/API/NavigatorID/appCodeName
-original_slug: Web/API/NavigatorID/appCodeName
----
-<div>
- {{ApiRef}}</div>
-<h2 id="Summary" name="Summary">概要</h2>
-<p>現在のブラウザの内部 "コード" ネームを返します。</p>
-<h2 id="Syntax" name="Syntax">構文</h2>
-<pre class="syntaxbox"><code>codeName = window.navigator.appCodeName</code></pre>
-<ul>
- <li><code>codeName</code> : ブラウザの内部名を表す文字列</li>
-</ul>
-<h2 id="Example" name="Example">例</h2>
-<pre class="brush:js">console.log(window.navigator.appCodeName);
-</pre>
-<h2 id="Notes" name="Notes">注記</h2>
-<p>Mozilla、Netscape 6、IE5 は全て、内部名に "Mozilla" を用いています。</p>
-<h2 id="Specification" name="Specification">仕様</h2>
-<p>{{DOM0()}}</p>
diff --git a/files/ja/orphaned/web/api/navigatorid/appname/index.html b/files/ja/orphaned/web/api/navigatorid/appname/index.html
deleted file mode 100644
index 450525027b..0000000000
--- a/files/ja/orphaned/web/api/navigatorid/appname/index.html
+++ /dev/null
@@ -1,27 +0,0 @@
----
-title: window.navigator.appName
-slug: orphaned/Web/API/NavigatorID/appName
-tags:
-  - DOM
-  - DOM_0
-  - Gecko
-  - Gecko DOM Reference
-  - 要更新
-translation_of: Web/API/NavigatorID/appName
-original_slug: Web/API/NavigatorID/appName
----
-<div>
- {{ApiRef}}</div>
-<h2 id="Summary" name="Summary">概要</h2>
-<p>ブラウザの公式な名前を返します。</p>
-<h2 id="Syntax" name="Syntax">構文</h2>
-<pre class="syntaxbox"><code>appName = window.navigator.appName</code></pre>
-<ul>
- <li><code>appName</code> は、ブラウザの名前を表す文字列です。</li>
-</ul>
-<h2 id="Example" name="Example">例</h2>
-<pre class="brush:js">dump(window.navigator.appName);
-// NS6 のコンソールに "Navigator" を出力します。
-</pre>
-<h2 id="Specification" name="Specification">仕様</h2>
-<p>{{DOM0}}</p>
diff --git a/files/ja/orphaned/web/api/navigatorid/appversion/index.html b/files/ja/orphaned/web/api/navigatorid/appversion/index.html
deleted file mode 100644
index 48436c71ca..0000000000
--- a/files/ja/orphaned/web/api/navigatorid/appversion/index.html
+++ /dev/null
@@ -1,65 +0,0 @@
----
-title: NavigatorID.appVersion
-slug: orphaned/Web/API/NavigatorID/appVersion
-tags:
-  - API
-  - Deprecated
-  - NavigatorID
-  - Property
-  - Reference
-  - appVersion
-translation_of: Web/API/NavigatorID/appVersion
-original_slug: Web/API/NavigatorID/appVersion
----
-<p>{{APIRef("HTML DOM")}} {{Deprecated_Header}}</p>
-
-<p>"<code>4.0</code>" またはそのブラウザーのバージョン情報を表す文字列のどちらかを返します。</p>
-
-<div class="notecard note">
-  <h4>注</h4>
-  <p>このプロパティがブラウザーの正しいバージョンを返すことを期待しないでください。</p>
-</div>
-
-<h2 id="Syntax">構文</h2>
-
-<pre class="brush: js">window.navigator.appVersion
-</pre>
-
-<h3 id="Returned_value">値</h3>
-
-<p>"<code>4.0</code>" またはそのブラウザーのバージョン情報を表す文字列のどちらかです。</p>
-
-<h2 id="Example">例</h2>
-
-<pre class="brush: js">alert("このブラウザーのバージョンは " + navigator.appVersion + " と報告されています。");
-</pre>
-
-<h2 id="Notes">注</h2>
-
-<p><code>window.navigator.userAgent</code> プロパティもバージョン番号を含んでいる場合がありますが ("<code>Mozilla/5.0 (Windows; U; Win98; en-US; rv:0.9.2) Gecko/20010725 Netscape 6/6.1</code>" など)、ユーザーエージェント文字列を変更したり、他のブラウザー、プラットフォーム、ユーザーエージェントに「偽装」したり、ブラウザーベンダー自身がこれらのプロパティに無頓着であったりすることを意識しておいてください。</p>
-
-<p><code>window.navigator.appVersion</code>, <code>window.navigator.appName</code>, <code>window.navigator.userAgent</code> の各プロパティは、「ブラウザー推定」 (browser sniffing) コード、すなわち使用しているブラウザーを検出し、それに従ってページを調整しようとするスクリプトで使われてきました。これにより、一部のウェブサイトから拒否されないようにするために、ブラウザーがこれらのプロパティで偽の情報を返さなければならないという現在の状況が発生したのです。</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('HTML WHATWG', '#dom-navigator-appversion',
-        'NavigatorID.appVersion')}}</td>
-      <td>{{Spec2('HTML WHATWG')}}</td>
-      <td>初回定義</td>
-    </tr>
-  </tbody>
-</table>
-
-<h2 id="Browser_compatibility">ブラウザーの互換性</h2>
-
-<p>{{Compat("api.NavigatorID.appVersion")}}</p>
diff --git a/files/ja/orphaned/web/api/navigatorid/index.html b/files/ja/orphaned/web/api/navigatorid/index.html
deleted file mode 100644
index bea00f1477..0000000000
--- a/files/ja/orphaned/web/api/navigatorid/index.html
+++ /dev/null
@@ -1,75 +0,0 @@
----
-title: NavigatorID
-slug: orphaned/Web/API/NavigatorID
-tags:
-  - API
-translation_of: Web/API/NavigatorID
-original_slug: Web/API/NavigatorID
----
-<p>{{APIRef("HTML DOM")}}</p>
-
-<p>The <code><strong>NavigatorID</strong></code> interface contains methods and properties related to the identity of the browser.</p>
-
-<p>There is no object of type <code>NavigatorID</code>, but other interfaces, like {{domxref("Navigator")}} or {{domxref("WorkerNavigator")}}, implement it.</p>
-
-<h2 id="Properties">Properties</h2>
-
-<p><em>The <code>NavigatorID</code></em><em> interface doesn't inherit any property.</em></p>
-
-<dl>
- <dt>{{domxref("NavigatorID.appCodeName")}} {{readonlyInline}}{{deprecated_inline}}</dt>
- <dd>Always returns <code>'Mozilla'</code>, on any browser. This property is kept only for compatibility purpose.</dd>
- <dt>{{domxref("NavigatorID.appName")}} {{readonlyInline}} {{deprecated_inline}}</dt>
- <dd>Returns the official name of the browser. Do not rely on this property to return the correct value.</dd>
- <dt>{{domxref("NavigatorID.appVersion")}} {{readonlyInline}} {{deprecated_inline}}</dt>
- <dd>Returns the version of the browser as a string. Do not rely on this property to return the correct value.</dd>
- <dt>{{domxref("NavigatorID.platform")}} {{readonlyInline}} {{deprecated_inline}}</dt>
- <dd>Returns a string representing the platform of the browser. Do not rely on this property to return the correct value.</dd>
- <dt>{{domxref("NavigatorID.product")}} {{readonlyInline}} {{deprecated_inline}}</dt>
- <dd>Always returns <code>'Gecko'</code>, on any browser. This property is kept only for compatibility purpose.</dd>
- <dt>{{domxref("NavigatorID.userAgent")}} {{readonlyInline}}</dt>
- <dd>Returns the user agent string for the current browser.</dd>
-</dl>
-
-<h2 id="Methods">Methods</h2>
-
-<p><em>The </em><em><code>NavigatorID</code></em><em> interface doesn't inherit any method.</em></p>
-
-<dl>
- <dt>{{domxref("NavigatorID.taintEnabled()")}} {{deprecated_inline()}}</dt>
- <dd>Always returns <code>false</code>. JavaScript taint/untaint functions were removed in JavaScript 1.2. This method is only kept for compatibility purpose</dd>
-</dl>
-
-<h2 id="Specifications">Specifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Specification</th>
-   <th scope="col">Status</th>
-   <th scope="col">Comment</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', '#navigatorid', 'NavigatorID')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td>Added the <code>appCodeName</code> property and the <code>taintEnabled()</code> method,  for compatibility purpose.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5 W3C', '#navigatorid', 'NavigatorID')}}</td>
-   <td>{{Spec2('HTML5 W3C')}}</td>
-   <td>Initial specification.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility">Browser compatibility</h2>
-
-<p>{{Compat("api.NavigatorID")}}</p>
-
-<h2 id="See_also">See also</h2>
-
-<ul>
- <li>The {{domxref("Navigator")}} and {{domxref("WorkerNavigator")}} interfaces that implement it.</li>
-</ul>
diff --git a/files/ja/orphaned/web/api/navigatorid/platform/index.html b/files/ja/orphaned/web/api/navigatorid/platform/index.html
deleted file mode 100644
index a369a1f12e..0000000000
--- a/files/ja/orphaned/web/api/navigatorid/platform/index.html
+++ /dev/null
@@ -1,66 +0,0 @@
----
-title: NavigatorID.platform
-slug: orphaned/Web/API/NavigatorID/platform
-tags:
-  - API
-  - Navigator
-  - NavigatorID
-  - Property
-  - Reference
-  - platform
-translation_of: Web/API/NavigatorID/platform
-original_slug: Web/API/NavigatorID/platform
----
-<p>{{APIRef("HTML DOM")}}</p>
-
-<p>ブラウザーのプラットフォームを表す文字列を返します。仕様書ではブラウザーが常に空文字列を返すことを許可していますので、信頼できる答えを得るためにこのプロパティを頼らないようにしてください。</p>
-
-<h2 id="Syntax" name="Syntax">構文</h2>
-
-<pre class="syntaxbox"><em>platform</em> = <em>navigator</em>.platform
-</pre>
-
-<ul>
- <li><code>platform</code> : 文字列 (例： "Win32" 、 "Linux i686" 、 "MacPPC" 、 "MacIntel" ...等)</li>
-</ul>
-
-<h3 id="Value" name="Value">値</h3>
-
-<p>ブラウザーを実行しているプラットフォームを識別する {{domxref("DOMString")}}、あるいはブラウザーがプラットフォームの識別を断る (または識別できない) 場合は空文字列になります。<code>platform</code> は空文字列か、ブラウザーを実行しているプラットフォームを表す文字列でなければなりません。</p>
-
-<p>例: "<code>MacIntel</code>", "<code>Win32</code>", "<code>FreeBSD i386</code>", "<code>WebTV OS</code>"</p>
-
-<h2 id="Example" name="Example">例</h2>
-
-<pre class="brush:js">console.log(navigator.platform);</pre>
-
-<h2 id="Notes" name="Notes">注記</h2>
-
-<p>Chrome、Edge、Firefox 63 以降を含むほとんどのブラウザーは、64 ビット版の Windows で実行していても <code>"Win32"</code> を返します。Internet Explorer やバージョン 63 より前の Firefox は <code>"Win64"</code> を返します。</p>
-
-<p>Firefox は設定項目 <code>general.platform.override</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('HTML WHATWG', '#dom-navigator-platform', 'NavigatorID.platform')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td>初期定義</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザー実装状況</h2>
-
-
-
-<p>{{Compat("api.NavigatorID.platform")}}</p>
diff --git a/files/ja/orphaned/web/api/navigatorid/product/index.html b/files/ja/orphaned/web/api/navigatorid/product/index.html
deleted file mode 100644
index 7c9649cf3d..0000000000
--- a/files/ja/orphaned/web/api/navigatorid/product/index.html
+++ /dev/null
@@ -1,39 +0,0 @@
----
-title: window.navigator.product
-slug: orphaned/Web/API/NavigatorID/product
-tags:
-  - DOM
-  - DOM_0
-  - Gecko
-  - Gecko DOM Reference
-translation_of: Web/API/NavigatorID/product
-original_slug: Web/API/NavigatorID/product
----
-<div>
- {{ApiRef}}</div>
-<h2 id="Summary" name="Summary">概要</h2>
-<p>このプロパティは、現在のブラウザの製品名を返します。</p>
-<h2 id="Syntax" name="Syntax">構文</h2>
-<pre class="syntaxbox"><i>productName</i> = window.navigator.product
-</pre>
-<ul>
- <li><code>productName</code> : 製品名を表す文字列</li>
-</ul>
-<h2 id="Example" name="Example">例</h2>
-<pre class="brush:html">&lt;script&gt;
-function prod() {
-  dt = document.getElementById("d");
-  dt.innerHTML = window.navigator.product;
-}
-&lt;/script&gt;
-
-&lt;button onclick="prod();"&gt;product&lt;/button&gt;
-&lt;div id="d"&gt; &lt;/div&gt;
-
-&lt;!-- "Gecko" などの文字列が表示される --&gt;
-</pre>
-<h2 id="Notes" name="Notes">注記</h2>
-<p>製品名は、ユーザエージェント全体の文字列の一部（プラットフォームの直後）です。例えば、Netscape 6.1 を表すユーザエージェントでは、製品名は、"Gecko" であり、ユーザエージェント文字列全体は、次の通りです。</p>
-<pre>Mozilla/5.0 (Windows; U; Win98; en-US; rv:0.9.2) Gecko/20010725 Netscape6/6.1</pre>
-<h2 id="Specification" name="Specification">仕様</h2>
-<p>{{DOM0}}</p>
diff --git a/files/ja/orphaned/web/api/navigatorid/useragent/index.html b/files/ja/orphaned/web/api/navigatorid/useragent/index.html
deleted file mode 100644
index 6fe20d0c79..0000000000
--- a/files/ja/orphaned/web/api/navigatorid/useragent/index.html
+++ /dev/null
@@ -1,85 +0,0 @@
----
-title: NavigatorID.userAgent
-slug: orphaned/Web/API/NavigatorID/userAgent
-tags:
-  - API
-  - Deprecated
-  - NavigatorID
-  - Property
-  - Read-only
-  - Reference
-translation_of: Web/API/NavigatorID/userAgent
-original_slug: Web/API/NavigatorID/userAgent
----
-<p>{{ApiRef("HTML DOM")}}</p>
-
-<p><code><strong>NavigatorID.userAgent</strong></code> は読み取り専用のプロパティで、現在のブラウザーのユーザーエージェント文字列を返します。</p>
-
-<div class="note">
-<p>仕様書では、ブラウザーがこのフィールドを介して提供する情報をできるだけ少なくすることを求めています。このプロパティの値は、同じブラウザーの将来のバージョンでも同じままであると仮定してはいけません。まったく使用しないようにしたり、ブラウザーの現在のバージョンと過去のバージョンのためだけに使用するようにしてください。新しいブラウザーは、古いブラウザーと同じ UA、またはその一部を使い始めるかもしれません。ブラウザーエージェントが本当にこのプロパティによって広告されたものであるという保証は本当にありません。<br>
-<br>
-また、ブラウザのユーザーはこのフィールドの値を変更することができることを覚えておいてください (UA なりすまし)。</p>
-</div>
-
-<p>ユーザーエージェント文字列の検出に基づくブラウザーの識別は<strong>信頼性が低く</strong>、ユーザーエージェント文字列はユーザーが設定可能なので<strong>推奨されません</strong>。例えば、以下のようになります。</p>
-
-<ul>
- <li>Mozilla Suite と Firefox では、 about:config の "general.useragent.override" 設定を使うことができます。いくつかの Firefox の拡張や多機能バーでも設定可能です。</li>
- <li>Opera 6 以降では、メニューからブラウザー識別文字列を設定できます。</li>
- <li>Microsoft Internet Explorer では、 Windows レジストリを利用できます。</li>
- <li>Safari と iCab は、メニューから、ブラウザユーザエージェントを定義済みの Internet Explorer、または、 Netscape の文字列に変更できます。</li>
-</ul>
-
-<h2 id="Syntax" name="Syntax">構文</h2>
-
-<pre class="syntaxbox notranslate">var <var>ua</var> = navigator.userAgent;
-</pre>
-
-<h3 id="Value" name="Value">値</h3>
-
-<p>{{domxref("DOMString")}} で、ブラウザーが {{Glossary("HTTP")}} ヘッダーで提供する完全なユーザーエージェント文字列と、 {{domxref("Navigator")}} オブジェクト上のメソッドやその他の関連メソッドへのレスポンスを指定します。</p>
-
-<p>ユーザーエージェント文字列は形式的な構造に基づいて構築されており、いくつかの情報に分解することができます。これらの情報の各部分は、ユーザ－が設定可能な他の Navigator のプロパティから来ています。Gecko ベースのブラウザは以下の一般的な構造に準拠しています。</p>
-
-<pre class="notranslate">userAgent = appCodeName/appVersion number (Platform; Security; OS-or-CPU;
-Localization; rv: revision-version-number) product/productSub
-Application-Name Application-Name-version
-</pre>
-
-<h2 id="Example" name="Example">例</h2>
-
-<pre class="brush:js notranslate">alert(window.navigator.userAgent)
-// alerts "Mozilla/5.0 (Windows; U; Win98; en-US; rv:0.9.2) Gecko/20010725 Netscape6/6.1"
-</pre>
-
-<ul>
-</ul>
-
-<h2 id="Specifications" name="Specifications">仕様書</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">仕様書</th>
-   <th scope="col">状態</th>
-   <th scope="col">備考</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', '#dom-navigator-useragent', 'NavigatorID.userAgent')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td>初回定義</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
-
-<p>{{Compat("api.NavigatorID.userAgent")}}</p>
-
-<h2 id="See_also" name="See_also">関連情報</h2>
-
-<ul>
- <li>{{httpheader("User-Agent")}} HTTP ヘッダー</li>
-</ul>
diff --git a/files/ja/orphaned/web/api/navigatorlanguage/index.html b/files/ja/orphaned/web/api/navigatorlanguage/index.html
deleted file mode 100644
index 05a2180b9f..0000000000
--- a/files/ja/orphaned/web/api/navigatorlanguage/index.html
+++ /dev/null
@@ -1,64 +0,0 @@
----
-title: NavigatorLanguage
-slug: orphaned/Web/API/NavigatorLanguage
-tags:
-  - API
-  - HTML-DOM
-  - Reference
-translation_of: Web/API/NavigatorLanguage
-original_slug: Web/API/NavigatorLanguage
----
-<div>{{APIRef("HTML DOM")}}</div>
-
-<p><code><strong>NavigatorLanguage</strong></code> はナビゲーターの言語に関するメソッドやプロパティを含んでいます。</p>
-
-<p><code>NavigatorLanguage</code> 型のオブジェクトはありませんが、 {{domxref("Navigator")}} や {{domxref("WorkerNavigator")}} 等の他のインターフェイスが実装しています。</p>
-
-<h2 id="Properties" name="Properties">プロパティ</h2>
-
-<p><em><code>NavigatorLanguage</code> インターフェイスが継承するプロパティはありません。</em></p>
-
-<dl>
- <dt>{{domxref("NavigatorLanguage.language")}} {{readonlyInline}}</dt>
- <dd>ユーザーの推奨言語、ふつうはブラウザーの UI の言語を表す {{domxref("DOMString")}} を返します。これが分からない場合は <code>null</code> 値を返します。</dd>
- <dt>{{domxref("NavigatorLanguage.languages")}} {{readonlyInline}}</dt>
- <dd>ユーザーが理解できる言語を表す {{domxref("DOMString")}} の設定順の配列を返します。</dd>
-</dl>
-
-<h2 id="Methods" name="Methods">メソッド</h2>
-
-<p><em><code>NavigatorLanguage</code> インターフェイスが実装・継承するメソッドはありません。</em></p>
-
-<h2 id="Specifications" name="Specifications">仕様書</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">仕様書</th>
-   <th scope="col">状態</th>
-   <th scope="col">備考</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', '#navigatorlanguage', 'NavigatorLanguage')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td>{{SpecName('HTML5 W3C')}} のスナップショット以降、 <code>languages</code> プロパティが追加された。</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5 W3C', '#navigatorlanguage', 'NavigatorLanguage')}}</td>
-   <td>{{Spec2('HTML5 W3C')}}</td>
-   <td>初回の仕様書。早期版の {{SpecName('HTML WHATWG')}} のスナップショット。</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
-
-<p>{{Compat("api.NavigatorLanguage")}}</p>
-
-<h2 id="See_also" name="See_also">関連情報</h2>
-
-<ul>
- <li>このインターフェイスを実装する {{domxref("Navigator")}} インターフェイス</li>
-</ul>
diff --git a/files/ja/orphaned/web/api/navigatorlanguage/language/index.html b/files/ja/orphaned/web/api/navigatorlanguage/language/index.html
deleted file mode 100644
index 1fd6c7b55f..0000000000
--- a/files/ja/orphaned/web/api/navigatorlanguage/language/index.html
+++ /dev/null
@@ -1,66 +0,0 @@
----
-title: window.navigator.language
-slug: orphaned/Web/API/NavigatorLanguage/language
-tags:
-  - API
-  - Language
-  - NavigatorLanguage
-  - Property
-  - Read-only
-  - Reference
-translation_of: Web/API/NavigatorLanguage/language
-original_slug: Web/API/NavigatorLanguage/language
----
-<div>{{APIRef("HTML DOM")}}</div>
-
-<p><strong><code>NavigatorLanguage.language</code></strong> は、読み取り専用プロパティで、ユーザーの言語を表す文字列を返します。普通、ブラウザー UI の言語が返されます。</p>
-
-<h2 id="Syntax" name="Syntax">構文</h2>
-
-<pre class="syntaxbox notranslate">const <em>lang</em> = navigator.language
-</pre>
-
-<h3 id="Value" name="Value">値</h3>
-
-<p>{{domxref("DOMString")}}。<em><code>lang</code></em> は、<a class="external" href="https://tools.ietf.org/rfc/bcp/bcp47.txt">BCP 47</a> で定義された言語バージョンを表す文字列が格納されます。例えば、"en", "en-US", "fr", "fr-FR", "es-ES" などが含まれます。</p>
-
-<p>iOS 10.2 以前の Safari では、国コードは小文字で返されます: "en-us", "fr-fr"</p>
-
-<h2 id="Example" name="Example">例</h2>
-
-<pre class="brush: js notranslate">if (window.navigator.language.slice(0, 2) !== 'en') {
-  doLangSelect(window.navigator.language);
-}
-</pre>
-
-<h2 id="Specification" name="Specification">仕様</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">仕様</th>
-   <th scope="col">ステータス</th>
-   <th scope="col">コメント</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', '#dom-navigator-language', 'NavigatorLanguage: language')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td>初回定義</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザー実装状況</h2>
-
-
-
-<p>{{Compat("api.NavigatorLanguage.language")}}</p>
-
-<h2 id="See_also" name="See_also">関連情報</h2>
-
-<ul>
- <li>{{domxref("NavigatorLanguage.languages", "navigator.languages")}}</li>
- <li>{{domxref("navigator")}}</li>
-</ul>
diff --git a/files/ja/orphaned/web/api/navigatorlanguage/languages/index.html b/files/ja/orphaned/web/api/navigatorlanguage/languages/index.html
deleted file mode 100644
index 106a5975b2..0000000000
--- a/files/ja/orphaned/web/api/navigatorlanguage/languages/index.html
+++ /dev/null
@@ -1,44 +0,0 @@
----
-title: navigator.languages
-slug: orphaned/Web/API/NavigatorLanguage/languages
-translation_of: Web/API/NavigatorLanguage/languages
-original_slug: Web/API/NavigatorLanguage/languages
----
-<p>{{APIRef}}</p>
-<h2 id="Summary" name="Summary">概要</h2>
-<p><code><strong>navigator.languages</strong></code> を参照することで、ユーザの使用する言語を表すタグを取得できます。</p>
-<h2 id="構文">構文</h2>
-<pre class="syntaxbox">preferredLanguages = navigator.languages
-</pre>
-<h2 id="説明">説明</h2>
-<p><code><strong>navigator.languages</strong></code> 属性を参照することで、ユーザが使用する言語の配列を取得できます。この配列は読み取り専用で、各要素は <a href="http://tools.ietf.org/html/bcp47">BCP 47</a> 言語タグです。並び順はユーザの設定した優先度順となっています。この配列の先頭にある、もっとも優先される言語タグは  {{domxref("NavigatorLanguage.language","navigator.language")}} を参照することで取得できます。</p>
-<p>Firefox の場合、<code><strong>navigator.languages</strong></code> 属性には、 <code>intl.accept_languages</code> の値が利用されます.</p>
-<p>ユーザが言語設定を変更した場合、{{domxref("window")}} に対して <a href="/en-US/docs/Web/Reference/Events/languagechange">languagechange</a> イベントが発生します。</p>
-<p>全ての HTTP リクエストの <code>Accept-Language</code> ヘッダは、<strong>qvalues</strong> (quality values) がつくことを除き、 <code><strong>navigator.languages</strong></code> と同じ値でなければなりません。 (例: <code>en-US;q=0.8</code>).</p>
-<h2 id="例">例</h2>
-<pre class="brush: js">navigator.language   //"en-US"
-navigator.languages  //["en-US", "zh-CN", "ja-JP"]
-</pre>
-<h2 id="仕様">仕様</h2>
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Specification</th>
-   <th scope="col">Status</th>
-   <th scope="col">Comment</th>
-  </tr>
-  <tr>
-   <td>{{ SpecName('HTML5 Web application', '#dom-navigator-languages', 'navigator.languages') }}</td>
-   <td>{{ Spec2('HTML5.1') }}</td>
-   <td>Initial definition.</td>
-  </tr>
- </tbody>
-</table>
-<h2 id="ブラウザ互換性">ブラウザ互換性</h2>
-<p>{{Compat("api.NavigatorLanguage.languages")}}</p>
-<h2 id="See_also" name="See_also">関連情報</h2>
-<ul>
- <li>{{domxref("NavigatorLanguage.language","navigator.language")}}</li>
- <li>{{domxref("navigator")}}</li>
- <li>{{domxref("window.onlanguagechange")}}</li>
-</ul>
diff --git a/files/ja/orphaned/web/api/node/getuserdata/index.html b/files/ja/orphaned/web/api/node/getuserdata/index.html
deleted file mode 100644
index 8c0a07a058..0000000000
--- a/files/ja/orphaned/web/api/node/getuserdata/index.html
+++ /dev/null
@@ -1,67 +0,0 @@
----
-title: Node.getUserData()
-slug: orphaned/Web/API/Node/getUserData
-tags:
-  - API
-  - DOM
-  - Method
-  - Node
-  - Obsolete
-  - Reference
-  - メソッド
-translation_of: Web/API/Node/getUserData
-original_slug: Web/API/Node/getUserData
----
-<div>{{APIRef("DOM")}}{{obsolete_header}}</div>
-
-<p><code><strong>Node.getUserData()</strong></code> メソッドは、以前 {{domxref("Node.setUserData()")}} によってノードに設定されたすべてのユーザーデータを {{domxref("DOMUserData")}} 形式で返します。</p>
-
-<div class="note">
-<p><code>Node.setUserData</code> および {{domxref("Node.getUserData")}} メソッドはウェブコンテンツから利用できなくなりました。 {{domxref("Element.dataset")}} または <a href="/ja/docs/JavaScript/Reference/Global_Objects/WeakMap"><code>WeakMap</code></a> を代わりに利用することができます。</p>
-</div>
-
-<h2 id="Syntax" name="Syntax">構文</h2>
-
-<pre class="syntaxbox"><em>userData</em> = <em>someNode</em>.getUserData(<em>userKey</em>);</pre>
-
-<h3 id="Parameters" name="Parameters">引数</h3>
-
-<ul>
- <li><code>userKey</code> は指定されたノードに関連付けられた特定のデータを選択するためのキーです。指定されたノードに複数のキーが、それぞれの値を所持して割り当てられている可能性があります。</li>
-</ul>
-
-<h2 id="Example" name="Example">例</h2>
-
-<pre class="brush: js">var d = document.setUserData('key', 15, null);
-console.log(document.getUserData('key')); // 15</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('DOM3 Core', 'core.html#Node3-getUserData', 'Node.getUserData()')}}</td>
-   <td>{{Spec2('DOM3 Core')}}</td>
-   <td>初回定義</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
-
-<p>{{Compat("api.Node.getUserData")}}</p>
-
-<h2 id="See_also" name="See_also">関連情報</h2>
-
-<ul>
- <li>{{domxref("Node.setUserData()")}}</li>
- <li>{{domxref("UserDataHandler")}}</li>
- <li>{{domxref("DOMUserData")}}</li>
-</ul>
diff --git a/files/ja/orphaned/web/api/parentnode/append/index.html b/files/ja/orphaned/web/api/parentnode/append/index.html
deleted file mode 100644
index 1206957c43..0000000000
--- a/files/ja/orphaned/web/api/parentnode/append/index.html
+++ /dev/null
@@ -1,143 +0,0 @@
----
-title: ParentNode.append()
-slug: orphaned/Web/API/ParentNode/append
-tags:
-  - API
-  - DOM
-  - Method
-  - Node
-  - ParentNode
-  - Reference
-translation_of: Web/API/ParentNode/append
-original_slug: Web/API/ParentNode/append
----
-<p>{{APIRef("DOM")}}</p>
-
-<p><strong><code>ParentNode.append()</code></strong> メソッドは、{{domxref("Node")}} オブジェクト、または {{domxref("DOMString")}} オブジェクトのセットを <code>ParentNode</code> の最後に追加します。 {{domxref("DOMString")}} オブジェクトは {{domxref("Text")}} ノードと同等に挿入されます。</p>
-
-<p>{{domxref("Node.appendChild()")}} との違いは次の通りです。</p>
-
-<ul>
- <li><code>ParentNode.append()</code> は {{domxref("DOMString")}} も追加することができますが、<code>Node.appendChild()</code> は{{domxref("Node")}} オブジェクトのみを受け付けます。</li>
- <li><code>ParentNode.append()</code> は戻り値を持っていませんが、<code>Node.appendChild()</code> は追加された{{domxref("Node")}} オブジェクトを返します。</li>
- <li><code>ParentNode.append()</code> は複数のノードや文字列を追加することができますが、<code>Node.appendChild()</code> 一つのノードだけしか追加することができせん。</li>
-</ul>
-
-<h2 id="Syntax" name="Syntax">構文</h2>
-
-<pre class="syntaxbox notranslate">// [Throws, Unscopable]
-ParentNode.append(...<var>nodesOrDOMStrings</var>) // returns undefined
-</pre>
-
-<h3 id="Parameters" name="Parameters">引数</h3>
-
-<dl>
- <dt><code>nodes</code></dt>
- <dd>追加する {{domxref("Node")}} または {{domxref("DOMString")}} オブジェクトのセット</dd>
-</dl>
-
-<h3 id="Exceptions" name="Exceptions">例外</h3>
-
-<ul>
- <li>{{domxref("HierarchyRequestError")}}: ノードを階層の特定の箇所に追加させることができません。</li>
-</ul>
-
-<h2 id="Examples" name="Examples">例</h2>
-
-<h3 id="Appending_an_element" name="Appending_an_element">要素の追加</h3>
-
-<pre class="brush: js notranslate">let parent = document.createElement("div")
-let p = document.createElement("p")
-parent.append(p)
-
-console.log(parent.childNodes) // NodeList [ &lt;p&gt; ]
-</pre>
-
-<h3 id="Appending_text" name="Appending_text">テキストの追加</h3>
-
-<pre class="brush: js notranslate">let parent = document.createElement("div")
-parent.append("Some text")
-
-console.log(parent.textContent) // "Some text"</pre>
-
-<h3 id="Appending_an_element_and_text" name="Appending_an_element_and_text">要素とテキストの追加</h3>
-
-<pre class="brush: js notranslate">let parent = document.createElement("div")
-let p = document.createElement("p")
-parent.append("Some text", p)
-
-console.log(parent.childNodes) // NodeList [ #text "Some text", &lt;p&gt; ]</pre>
-
-<h3 id="ParentNode.append_is_unscopable" name="ParentNode.append_is_unscopable">ParentNode.append() はスコープが効かない</h3>
-
-<p><code>append()</code> メソッドは <code>with</code> 文の中ではスコープが効きません。詳しくは {{jsxref("Symbol.unscopables")}} をご覧ください。</p>
-
-<pre class="brush: js notranslate">let parent = document.createElement("div")
-
-with(parent) {
-  append("foo")
-}
-// ReferenceError: append is not defined </pre>
-
-<h2 id="Polyfill">Polyfill</h2>
-
-<p><code>append()</code> メソッドはInternet Explorer 9 以上であれば以下のコードでポリフィルを当てることができます。</p>
-
-<pre class="brush: js notranslate">// Source: https://github.com/jserz/js_piece/blob/master/DOM/ParentNode/append()/append().md
-(function (arr) {
-  arr.forEach(function (item) {
-    if (item.hasOwnProperty('append')) {
-      return;
-    }
-    Object.defineProperty(item, 'append', {
-      configurable: true,
-      enumerable: true,
-      writable: true,
-      value: function append() {
-        var argArr = Array.prototype.slice.call(arguments),
-          docFrag = document.createDocumentFragment();
-
-        argArr.forEach(function (argItem) {
-          var isNode = argItem instanceof Node;
-          docFrag.appendChild(isNode ? argItem : document.createTextNode(String(argItem)));
-        });
-
-        this.appendChild(docFrag);
-      }
-    });
-  });
-})([Element.prototype, Document.prototype, DocumentFragment.prototype]);</pre>
-
-<h2 id="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-parentnode-append', 'ParentNode.append()')}}</td>
-   <td>{{Spec2('DOM WHATWG')}}</td>
-   <td>初回定義</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
-
-<p>{{Compat("api.ParentNode.append")}}</p>
-
-<h2 id="See_also" name="See_also">関連情報</h2>
-
-<ul>
- <li>{{domxref("ParentNode")}} および {{domxref("ChildNode")}}</li>
- <li>{{domxref("ParentNode.prepend()")}}</li>
- <li>{{domxref("Node.appendChild()")}}</li>
- <li>{{domxref("ChildNode.after()")}}</li>
- <li>{{domxref("Element.insertAdjacentElement()")}}</li>
- <li>{{domxref("NodeList")}}</li>
-</ul>
diff --git a/files/ja/orphaned/web/api/parentnode/children/index.html b/files/ja/orphaned/web/api/parentnode/children/index.html
deleted file mode 100644
index 537c91d1c6..0000000000
--- a/files/ja/orphaned/web/api/parentnode/children/index.html
+++ /dev/null
@@ -1,93 +0,0 @@
----
-title: ParentNode.children
-slug: orphaned/Web/API/ParentNode/children
-tags:
-  - API
-  - Child
-  - Child Nodes
-  - DOM
-  - HTMLCollection
-  - Node
-  - ParentNode
-  - Property
-  - children
-translation_of: Web/API/ParentNode/children
-original_slug: Web/API/ParentNode/children
----
-<div>{{ APIRef("DOM") }}</div>
-
-<p>{{domxref("ParentNode")}} の <strong><code>children</code></strong> プロパティは、呼び出された際のノードの子{{domxref("Element", "要素", "", 1)}}ノードをすべて含んだ動的な（生きている） {{domxref("HTMLCollection")}} を返す、読み取り専用プロパティです。</p>
-
-<h2 id="Syntax" name="Syntax">構文</h2>
-
-<pre class="syntaxbox notranslate">let <em>children</em> = <var>node</var>.children;</pre>
-
-<h3 id="Value" name="Value">値</h3>
-
-<p><em><code>node</code></em> の子の DOM要素の生きている順序付きコレクションの、 {{ domxref("HTMLCollection") }} です。コレクションの {{domxref("HTMLCollection.item()", "item()")}} メソッドか、JavaScript の配列スタイルの記法を使って、コレクション内の個々の子ノードにアクセスすることができます。</p>
-
-<p>ノードが子要素を持たない場合、 <code>children</code> は要素を含まず、<code>length</code> は <code>0</code> です。</p>
-
-<h2 id="Example" name="Example">例 </h2>
-
-<pre class="brush: js notranslate">const foo = document.getElementById('foo');
-for (let i = 0; i &lt; foo.children.length; i++) {
-  console.log(foo.children[i].tagName);
-}</pre>
-
-<h2 id="Polyfill" name="Polyfill">Polyfill</h2>
-
-<pre class="brush: js notranslate">// Overwrites native 'children' prototype.
-// Adds Document &amp; DocumentFragment support for IE9 &amp; Safari.
-// Returns array instead of HTMLCollection.
-;(function(constructor) {
-  if (constructor &amp;&amp;
-    constructor.prototype &amp;&amp;
-    constructor.prototype.children == null) {
-    Object.defineProperty(constructor.prototype, 'children', {
-      get: function() {
-        let i = 0, node, nodes = this.childNodes, children = [];
-        while (node = nodes[i++]) {
-          if (node.nodeType === 1) {
-            children.push(node);
-          }
-        }
-        return children;
-      }
-    });
-  }
-})(window.Node || window.Element);
-</pre>
-
-<h2 id="Specification" name="Specification">仕様</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">仕様</th>
-   <th scope="col">状態</th>
-   <th scope="col">コメント</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM WHATWG', '#dom-parentnode-children', 'ParentNode.children')}}</td>
-   <td>{{Spec2('DOM WHATWG')}}</td>
-   <td>初めての定義</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザー実装状況</h2>
-
-<p>{{Compat("api.ParentNode.children")}}</p>
-
-<h2 id="See_also" name="See_also">関連情報</h2>
-
-<ul>
- <li>{{domxref("ParentNode")}} および {{domxref("ChildNode")}} インターフェイス</li>
- <li>
-  <div class="syntaxbox">このインターフェイスを実装する次のオブジェクトタイプ。{{domxref("Document")}}、{{domxref("Element")}}、 および {{domxref("DocumentFragment")}}</div>
- </li>
- <li>
-  <div class="syntaxbox">{{domxref("Node.childNodes")}}</div>
- </li>
-</ul>
diff --git a/files/ja/orphaned/web/api/parentnode/index.html b/files/ja/orphaned/web/api/parentnode/index.html
deleted file mode 100644
index 5d1ec6c97e..0000000000
--- a/files/ja/orphaned/web/api/parentnode/index.html
+++ /dev/null
@@ -1,93 +0,0 @@
----
-title: ParentNode
-slug: orphaned/Web/API/ParentNode
-tags:
-  - API
-  - DOM
-  - Finding Elements
-  - Finding Nodes
-  - Interface
-  - Locating Elements
-  - Locating Nodes
-  - Managing Elements
-  - Managing Nodes
-  - Mixin
-  - Node
-  - ParentNode
-  - Reference
-  - Selectors
-translation_of: Web/API/ParentNode
-original_slug: Web/API/ParentNode
----
-<div>{{APIRef("DOM")}}</div>
-
-<p><span class="seoSummary"><code><strong>ParentNode</strong></code> ミックスインは、子を持つことができるすべての型の {{domxref("Node")}} オブジェクトに特有のメソッドやプロパティを含みます。</span>これは、{{domxref("Element")}} と {{domxref("Document")}}、{{domxref("DocumentFragment")}} オブジェクトに実装されています。</p>
-
-<p>対象のノードや要素を見つけるために<a href="/ja/docs/Web/CSS/CSS_Selectors">CSS セレクター</a>を使用する方法について、詳しくは<a href="/ja/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors">セレクタを使用した DOM 要素の指定</a>をご覧ください。</p>
-
-<h2 id="Properties" name="Properties">プロパティ</h2>
-
-<dl>
- <dt>{{domxref("ParentNode.childElementCount")}} {{readonlyInline}}</dt>
- <dd>オブジェクトが持つ子の数を表す <code>unsigned long</code> 値を返します。</dd>
- <dt>{{domxref("ParentNode.children")}} {{readonlyInline}}</dt>
- <dd>この <code>ParentNode</code> の子であるすべての {{domxref("Element")}} 型のオブジェクトを含む実際の {{domxref("HTMLCollection")}} を返します。要素ではないノードは省きます。</dd>
- <dt>{{domxref("ParentNode.firstElementChild")}} {{readonlyInline}}</dt>
- <dd>この <code>ParentNode</code> の最初の子である {{domxref("Element")}} を返します。存在しない場合は <code>null</code> を返す。</dd>
- <dt>{{domxref("ParentNode.lastElementChild")}} {{readonlyInline}}</dt>
- <dd>この <code>ParentNode</code> の最後の子である {{domxref("Element")}} を返します。存在しない場合は <code>null</code> を返す。</dd>
-</dl>
-
-<h2 id="Methods" name="Methods">メソッド</h2>
-
-<dl>
- <dt>{{domxref("ParentNode.append()")}} {{experimental_inline}}</dt>
- <dd><code>ParentNode</code> の最後の子の後ろに、{{domxref("Node")}} オブジェクトまたは {{domxref("DOMString")}} オブジェクトのセットを挿入します。{{domxref("DOMString")}} オブジェクトは、同等の {{domxref("Text")}} ノードとして挿入されます。</dd>
- <dt>{{domxref("ParentNode.prepend()")}} {{experimental_inline}}</dt>
- <dd><code>ParentNode</code> の最初の子の前に、{{domxref("Node")}} オブジェクトまたは {{domxref("DOMString")}} オブジェクトのセットを挿入します。{{domxref("DOMString")}} オブジェクトは、同等の {{domxref("Text")}} ノードとして挿入されます。</dd>
- <dt>{{domxref("ParentNode.querySelector()")}}</dt>
- <dd>現在の要素をルートとして、指定したセレクターのグループにマッチする最初の {{domxref("Element")}} を返します。</dd>
- <dt>{{domxref("ParentNode.querySelectorAll()")}}</dt>
- <dd>現在の要素をルートとして、指定したセレクターのグループにマッチする要素のリストを表す {{domxref("NodeList")}} を返します。</dd>
- <dt>{{domxref("ParentNode.replaceChildren()")}}</dt>
- <dd>ノードの既存の子ノードを、指定した新しい子ノードのセットに入れ替えます。</dd>
-</dl>
-
-<h2 id="Specification" name="Specification">仕様</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">仕様書</th>
-   <th scope="col">状況</th>
-   <th scope="col">コメント</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM WHATWG', '#parentnode', 'ParentNode')}}</td>
-   <td>{{Spec2('DOM WHATWG')}}</td>
-   <td><code>ElementTraversal</code> インターフェイスを {{domxref("ChildNode")}} と {{domxref("ParentNode")}} に分割しました。{{domxref("ParentNode.firstElementChild")}} と {{domxref("ParentNode.lastElementChild")}}、{{domxref("ParentNode.childElementCount")}} プロパティは、後者で定義されていません。<br>
-    {{domxref("ParentNode.children")}} プロパティが追加されました。<br>
-    {{domxref("ParentNode.querySelector()")}}、{{domxref("ParentNode.querySelectorAll()")}}、{{domxref("ParentNode.append()")}}、{{domxref("ParentNode.prepend()")}} メソッドが追加されました。</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('Element Traversal', '#interface-elementTraversal', 'ElementTraversal')}}</td>
-   <td>{{Spec2('Element Traversal')}}</td>
-   <td><code>ElementTraversal</code> 基本インターフェイスにこのプロパティの初期定義が追加され、{{domxref("Element")}} で使われます。</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザー実装状況</h2>
-
-
-
-<p>{{Compat("api.ParentNode")}}</p>
-
-<h2 id="See_also" name="See_also">関連項目</h2>
-
-<ul>
- <li>{{domxref("ChildNode")}} 基本インターフェース。</li>
- <li>
-  <div class="syntaxbox">このミックスインを実装したオブジェクト型: {{domxref("Document")}} と {{domxref("Element")}}、{{domxref("DocumentFragment")}}。</div>
- </li>
-</ul>
diff --git a/files/ja/orphaned/web/api/parentnode/prepend/index.html b/files/ja/orphaned/web/api/parentnode/prepend/index.html
deleted file mode 100644
index 8c6c87cede..0000000000
--- a/files/ja/orphaned/web/api/parentnode/prepend/index.html
+++ /dev/null
@@ -1,143 +0,0 @@
----
-title: ParentNode.prepend()
-slug: orphaned/Web/API/ParentNode/prepend
-tags:
-  - API
-  - DOM
-  - Method
-  - Node
-  - ParentNode
-  - Reference
-  - prepend
-translation_of: Web/API/ParentNode/prepend
-original_slug: Web/API/ParentNode/prepend
----
-<p>{{APIRef("DOM")}}</p>
-
-<p><strong><code>ParentNode.prepend()</code></strong> メソッドは、{{domxref("Node")}} オブジェクトまたは {{domxref("DOMString")}} オブジェクトのセットを {{domxref("ParentNode")}} の最初の子の前に挿入します。 {{domxref("DOMString")}} オブジェクトは、同等の {{domxref("Text")}} ノードとして挿入されます。</p>
-
-<h2 id="Syntax" name="Syntax">構文</h2>
-
-<pre class="syntaxbox notranslate"><em>ParentNode</em>.prepend(<em>...nodesToPrepend</em>);
-</pre>
-
-<h3 id="Parameters" name="Parameters">引数</h3>
-
-<dl>
- <dt><code>nodesToPrepend</code></dt>
- <dd>現在 <code>ParentNode</code> にある最初の子ノードの前に挿入する1つ以上のノード。各ノードは {{domxref("Node")}} オブジェクトまたは文字列として指定できます。文字列は新しい {{domxref("Text")}} ノードとして挿入されます。</dd>
-</dl>
-
-<h3 id="Return_value" name="Return_value">返値</h3>
-
-<p><code>undefined</code>.</p>
-
-<h3 id="Exceptions" name="Exceptions">例外</h3>
-
-<ul>
- <li>{{domxref("HierarchyRequestError")}}: ノードを階層の特定の箇所に追加させることができません。</li>
-</ul>
-
-<h2 id="Examples" name="Examples">例</h2>
-
-<h3 id="Prepending_an_element" name="Prepending_an_element">要素の前に追加</h3>
-
-<pre class="brush: js notranslate">var parent = document.createElement("div");
-var p = document.createElement("p");
-var span = document.createElement("span");
-parent.append(p);
-parent.prepend(span);
-
-console.log(parent.childNodes); // NodeList [ &lt;span&gt;, &lt;p&gt; ]
-</pre>
-
-<h3 id="Prepending_text" name="Prepending_text">テキストの前に追加</h3>
-
-<pre class="brush: js notranslate">var parent = document.createElement("div");
-parent.append("Some text");
-parent.prepend("Headline: ");
-
-console.log(parent.textContent); // "Headline: Some text"</pre>
-
-<h3 id="Appending_an_element_and_text" name="Appending_an_element_and_text">要素とテキストの追加</h3>
-
-<pre class="brush: js notranslate">var parent = document.createElement("div");
-var p = document.createElement("p");
-parent.prepend("Some text", p);
-
-console.log(parent.childNodes); // NodeList [ #text "Some text", &lt;p&gt; ]</pre>
-
-<h3 id="ParentNode.prepend_is_unscopable" name="ParentNode.prepend_is_unscopable">ParentNode.prepend() はスコープが効かない</h3>
-
-<p><code>prepend()</code> メソッドは <code>with</code> 文の中ではスコープが効きません。詳しくは {{jsxref("Symbol.unscopables")}} をご覧ください。</p>
-
-<pre class="brush: js notranslate">var parent = document.createElement("div");
-
-with(parent) {
-  prepend("foo");
-}
-// ReferenceError: prepend is not defined </pre>
-
-<h2 id="Polyfill">Polyfill</h2>
-
-<p><code>prepend()</code> メソッドは Internet Explorer 9 以上であれば以下のコードでポリフィルを当てることができます。</p>
-
-<pre class="brush: js notranslate">// Source: https://github.com/jserz/js_piece/blob/master/DOM/ParentNode/prepend()/prepend().md
-(function (arr) {
-  arr.forEach(function (item) {
-    if (item.hasOwnProperty('prepend')) {
-      return;
-    }
-    Object.defineProperty(item, 'prepend', {
-      configurable: true,
-      enumerable: true,
-      writable: true,
-      value: function prepend() {
-        var argArr = Array.prototype.slice.call(arguments),
-          docFrag = document.createDocumentFragment();
-
-        argArr.forEach(function (argItem) {
-          var isNode = argItem instanceof Node;
-          docFrag.appendChild(isNode ? argItem : document.createTextNode(String(argItem)));
-        });
-
-        this.insertBefore(docFrag, this.firstChild);
-      }
-    });
-  });
-})([Element.prototype, Document.prototype, DocumentFragment.prototype]);</pre>
-
-<h2 id="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-parentnode-prepend', 'ParentNode.prepend()')}}</td>
-   <td>{{Spec2('DOM WHATWG')}}</td>
-   <td>初回定義</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
-
-<p>{{Compat("api.ParentNode.prepend")}}</p>
-
-<h2 id="See_also" name="See_also">関連情報</h2>
-
-<ul>
- <li>{{domxref("ParentNode")}} および {{domxref("ChildNode")}}</li>
- <li>{{domxref("ParentNode.append()")}}</li>
- <li>{{domxref("Node.appendChild()")}}</li>
- <li>{{domxref("Node.insertBefore()")}}</li>
- <li>{{domxref("ChildNode.before()")}}</li>
- <li>{{domxref("Element.insertAdjacentElement()")}}</li>
- <li>{{domxref("NodeList")}}</li>
-</ul>
diff --git a/files/ja/orphaned/web/api/parentnode/queryselectorall/index.html b/files/ja/orphaned/web/api/parentnode/queryselectorall/index.html
deleted file mode 100644
index 01e307ed31..0000000000
--- a/files/ja/orphaned/web/api/parentnode/queryselectorall/index.html
+++ /dev/null
@@ -1,162 +0,0 @@
----
-title: ParentNode.querySelectorAll()
-slug: orphaned/Web/API/ParentNode/querySelectorAll
-tags:
-  - API
-  - DOM
-  - Document
-  - Finding Elements
-  - Finding Nodes
-  - Method
-  - ParentNode
-  - Reference
-  - Searching Elements
-  - Searching Nodes
-  - Selectors
-  - querySelectorAll
-translation_of: Web/API/ParentNode/querySelectorAll
-original_slug: Web/API/ParentNode/querySelectorAll
----
-<div>{{ApiRef("DOM")}}</div>
-
-<p>{{domxref("ParentNode")}} ミックスインは <code><strong>querySelectorAll()</strong></code> メソッドを定義しており、メソッド呼び出しの時点でそのオブジェクトの子孫にあたる要素のうち、一連のセレクターに一致するもののリストを示す {{domxref("NodeList")}} を返します。</p>
-
-<p>単一の結果のみが必要な場合は、代わりに {{domxref("ParentNode.querySelector", "querySelector()")}} メソッドを使用することを検討してください。</p>
-
-<div class="note">
-<p><strong>メモ:</strong> このメソッドは {{domxref("Element.querySelectorAll()")}}, {{domxref("Document.querySelectorAll()")}}, {{domxref("DocumentFragment.querySelectorAll()")}} として実装されています。</p>
-</div>
-
-<h2 id="Syntax" name="Syntax">構文</h2>
-
-<pre class="syntaxbox"><var>elementList</var> = <em>parentNode</em>.querySelectorAll(<var>selectors</var>);
-</pre>
-
-<h3 id="Parameters" name="Parameters">引数</h3>
-
-<dl>
- <dt><code>selectors</code></dt>
- <dd>マッチのための 1 つまたは複数のセレクターを含む {{domxref("DOMString")}}。この文字列は妥当な <a href="/ja/docs/Web/CSS/CSS_Selectors">CSS セレクター</a>でなければならず、そうでない場合は <code>SyntaxError</code> 例外がスローされます。セレクターの仕様と要素の識別の詳細は、<a href="/ja/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors">セレクターを使用した DOM 要素の指定</a>を参照してください。複数のセレクターを指定する際は、カンマで区切ります。</dd>
-</dl>
-
-<div class="note">
-<p><strong>メモ:</strong> 標準の CSS 構文の一部ではない文字は、バックスラッシュ文字を使ってエスケープしなければなりません。 JavaScript でもバックスラッシュによるエスケープが使われているため、これらの文字を使った文字列リテラルを記述する際は、特に注意する必要があります。詳細は {{anch("Escaping special characters")}} を参照してください。</p>
-</div>
-
-<h3 id="Return_value" name="Return_value">返値</h3>
-
-<p>生きていない {{domxref("NodeList")}} で、指定されたセレクターの1つ以上に一致する子孫ノード1つに対して1つずつの {{domxref("Element")}} を含みます。</p>
-
-<div class="note">
-<p><strong>メモ:</strong> 指定された <code>selectors</code> が <a href="/ja/docs/Web/CSS/Pseudo-elements">CSS 擬似要素</a>を含む場合、返されるリストは常に空になります。</p>
-</div>
-
-<h3 id="Exceptions" name="Exceptions">例外</h3>
-
-<dl>
- <dt><code>SyntaxError</code></dt>
- <dd>指定された <code>selectors</code> の構文が妥当ではない。</dd>
-</dl>
-
-<h2 id="Examples" name="Examples">例</h2>
-
-<p>文書内のすべての {{HTMLElement("p")}} 要素の {{domxref("NodeList")}} を入手します。</p>
-
-<pre class="brush: js">var matches = document.querySelectorAll("p");</pre>
-
-<p>次の例では、文書内にある <code>note</code> または <code>alert</code> のいずれかのクラスを持つ、すべての {{HTMLElement("div")}} 要素のリストを返します。</p>
-
-<pre class="brush: js">var matches = document.querySelectorAll("div.note, div.alert");
-</pre>
-
-<p>次に、 <code>test</code> という ID を持つコンテナ内に位置し、直接の親要素が <code>highlighted</code> クラスを持つ {{HTMLElement("div")}} である、<code>&lt;p&gt;</code> 要素のリストを取得します。</p>
-
-<pre class="brush: js">var container = document.querySelector("#test");
-var matches = container.querySelectorAll("div.highlighted &gt; p");</pre>
-
-<p>次の例では<a href="/ja/docs/Web/CSS/Attribute_selectors">属性セレクター</a>を使用しており、 <code>data-src</code> という名前の属性を持つ、文書内の {{HTMLElement("iframe")}} 要素のリストを返します。</p>
-
-<pre class="brush: js">var matches = document.querySelectorAll("iframe[data-src]");</pre>
-
-<p>次の例では、ID が <code>userlist</code> の要素の中にあり、<code>data-active</code> 属性を持ち、その値が <code>1</code> であるリスト項目のリストを返すため、属性セレクターが使用されています。</p>
-
-<pre class="brush: js">var container = document.querySelector("#userlist");
-var matches = container.querySelectorAll("li[data-active=1]");</pre>
-
-<h2 id="User_notes" name="User_notes">ユーザーのメモ</h2>
-
-<p>querySelectorAll() は、最も一般的な JavaScript DOM ライブラリと異なる動作を持ち、意図しない結果をもたらすことがあります。</p>
-
-<h3 id="HTML">HTML</h3>
-
-<p>次の、入れ子になった 3 つの {{HTMLElement("div")}} ブロックを持つ HTML について検討します。</p>
-
-<pre class="brush: html">&lt;div class="outer"&gt;
-  &lt;div class="select"&gt;
-    &lt;div class="inner"&gt;
-    &lt;/div&gt;
-  &lt;/div&gt;
-&lt;/div&gt;</pre>
-
-<h3 id="JavaScript">JavaScript</h3>
-
-<pre class="brush: js">var select = document.querySelector('.select');
-var inner = select.querySelectorAll('.outer .inner');
-inner.length; // 1 です。0 ではありません!
-</pre>
-
-<p>この例では、<code>select</code> class を持つ <code>&lt;div&gt;</code> の文脈で <code>.outer .inner</code> を選択するとき、<code>.outer</code> が基準となる要素（<code>.select</code> で検索される）の子孫ではないにもかかわらず、<code>.inner</code> class を持つ要素が見つけられています。<code>querySelectorAll()</code> はデフォルトでは、セレクターの最後の要素が検索スコープに含まれているかどうかのみ検証します。</p>
-
-<p>{{cssxref(":scope")}} 擬似クラスを使うと、基準となる要素の子孫だけが一致するようになり、期待される挙動を取り戻すことができます。</p>
-
-<pre class="brush: js">var select = document.querySelector('.select');
-var inner = select.querySelectorAll(':scope .outer .inner');
-inner.length; // 0</pre>
-
-<h2 id="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-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}</td>
-   <td>{{Spec2("DOM WHATWG")}}</td>
-   <td>Living standard</td>
-  </tr>
-  <tr>
-   <td>{{SpecName("Selectors API Level 2", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}</td>
-   <td>{{Spec2("Selectors API Level 2")}}</td>
-   <td>変更なし</td>
-  </tr>
-  <tr>
-   <td>{{SpecName("DOM4", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}</td>
-   <td>{{Spec2("DOM4")}}</td>
-   <td>初回定義</td>
-  </tr>
-  <tr>
-   <td>{{SpecName("Selectors API Level 1", "#interface-definitions", "document.querySelector()")}}</td>
-   <td>{{Spec2("Selectors API Level 1")}}</td>
-   <td>元の定義</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
-
-<p>{{Compat("api.ParentNode.querySelectorAll")}}</p>
-
-<h2 id="See_also" name="See_also">関連情報</h2>
-
-<ul>
- <li><a href="/ja/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors">セレクターを使用した DOM 要素の指定</a></li>
- <li><a href="/ja/docs/Code_snippets/QuerySelector"><code>querySelector()</code> のコードスニペット</a></li>
- <li>CSS ガイドの<a href="/ja/docs/Web/CSS/Attribute_selectors">属性セレクター</a></li>
- <li>MDN 学習エリアの<a href="/ja/docs/Learn/CSS/Introduction_to_CSS/Attribute_selectors">属性セレクター</a></li>
- <li>メソッドは {{domxref("Element.querySelectorAll()")}}, {{domxref("Document.querySelectorAll()")}}, {{domxref("DocumentFragment.querySelectorAll()")}} で利用可能です</li>
-</ul>
diff --git a/files/ja/orphaned/web/css/conic-gradient()/index.html b/files/ja/orphaned/web/css/conic-gradient()/index.html
deleted file mode 100644
index d030c33b9d..0000000000
--- a/files/ja/orphaned/web/css/conic-gradient()/index.html
+++ /dev/null
@@ -1,268 +0,0 @@
----
-title: conic-gradient()
-slug: orphaned/Web/CSS/conic-gradient()
-tags:
-  - CSS
-  - CSS 画像
-  - CSS 関数
-  - Reference
-  - ウェブ
-  - グラデーション
-  - グラフィック
-  - レイアウト
-translation_of: Web/CSS/conic-gradient()
-original_slug: Web/CSS/conic-gradient()
----
-<div>{{CSSRef}}</div>
-
-<p><strong><code>conic-gradient()</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の関数で、 (中心から広がるのではなく) 中心点の周りを回りながら色が変化する放射グラデーションから成る画像を生成します。扇型グラデーションの例としては、円グラフや色相環などがあります。 <code>conic-gradient()</code> 関数の結果は {{CSSxRef("&lt;gradient&gt;")}} データ型のオブジェクトであり、これは {{CSSxRef("&lt;image&gt;")}} の特殊型です。</p>
-
-<div>{{EmbedInteractiveExample("pages/css/function-conic-gradient.html")}}</div>
-
-<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>
-
-<p>他のグラデーションと同様、扇形グラデーションは<a href="/ja/docs/CSS/image#no_intrinsic">固有の寸法を持ちません</a>。つまり、自然の寸法や推奨される寸法、推奨される縦横比もありません。固有の寸法は適用先の要素の寸法、または要素の寸法以外で設定された <code>&lt;image&gt;</code> の寸法に一致します。</p>
-
-<p>繰り返して360度の回転を埋める扇形グラデーションを生成するには、代わりに {{CSSxRef("repeating-conic-gradient")}} 関数を使用してください。</p>
-
-<p>g</p>
-
-<p><code>&lt;gradient&gt;</code> は <code>&lt;image&gt;</code> データ型に属するため、 <code>&lt;image&gt;</code> が使用できるところでしか使用できません。このため、 <code>conic-gradient()</code> は {{CSSxRef("background-color")}} や、その他の {{CSSxRef("&lt;color&gt;")}} データ型を使用するプロパティでは動作しません。</p>
-
-<div class="blockIndicator note">
-<p>なぜ "conic" (円錐の) グラデーションと呼ばれるのか。色経由点が一方よりもう一方が明るい場合、上から見た円錐のように見えるからです。</p>
-</div>
-
-<h2 id="Understanding_conic_gradients" name="Understanding_conic_gradients">扇型グラデーションの理解</h2>
-
-<p>扇形グラデーションの構文は放射グラデーションの構文と似ていますが、色経由点はグラデーションの中心から現れるグラデーションライン上ではなく、グラデーションアーク、すなわち円周上に配置されます。扇形グラデーションでは、色の遷移は円の中心を回るように、上から始まって時計回りに行われます。放射グラデーションでは、色の遷移は楕円の中心から外に向けて、すべての方向に行われます。</p>
-
-<p><img alt="扇形グラデーションの円周と放射グラデーションの軸に沿った色経由点" src="https://mdn.mozillademos.org/files/16361/Screenshot_2018-11-29_21.09.19.png" style="height: 258px; width: 515px;"></p>
-
-<p>扇形グラデーションは、回転角度とグラデーションの中心を指定し、色停止点のリストを指定して指定します。<a href="/ja/docs/Web/CSS/length">長さ</a>を指定して色停止点を配置する線形グラデーションや放射グラデーションとは異なり、扇形グラデーションの色停止点は角度を指定します。単位には<a href="/ja/docs/Web/CSS/angle">度</a>を表す <code>deg</code>、グラデーションを表す <code>grad</code>、ラジアンを表す <code>rad</code>、回転数を表す <code>turn</code> があります。1つの円は360度、400グラデーション、2πラジアン、1回転になります。扇形グラデーションに対応しているブラウザーはパーセント値も受け付けており、100%は360度に相当しますが、これは仕様にはありません。</p>
-
-<p>放射グラデーションと同様に、扇形グラデーションの構文では、グラデーションの中心を画像内のどこにでも、あるいは画像の外側にでも配置することができます。位置の値は、 2 値の背景位置の構文に似ています。</p>
-
-<p>グラデーション円弧は、グラデーションのの円周です。グラデーションまたは円弧の<em>始点</em>は北、つまり12時の方向です。そして、グラデーションは <em>from</em> の角度だけ回転します。グラデーションの色は、角度のついた色停止点、それらの開始点、終了点、および、その間、および、任意の角度のついた色停止点によって決定されます。色間の遷移は、隣接する色の色停止点の間のカラーヒントで変更することができます。</p>
-
-<h3 id="Customizing_gradients" name="Customizing_gradients">グラデーションのカスタマイズ</h3>
-
-<p>By adding more angled color-stop points on the gradient arc, you can create a highly customized transition between multiple colors. A color-stop's position can be explicitly defined by using an {{CSSxRef("&lt;angle&gt;")}}. If you don't specify the location of a color stop, it is placed halfway between the one that precedes it and the one that follows it. If you don't specify an angle for the first or last color stop, their values are 0deg and 360deg respectively. The following two gradients are equivalent</p>
-
-<pre class="brush: css notranslate">conic-gradient(red, orange, yellow, green, blue);
-conic-gradient(red 0deg, orange 90deg, yellow 180deg, green 270deg, blue 360deg);</pre>
-
-<p>By default, colors transition smoothly from the color at one color stop to the color at the subsequent color stop, with the midpoint between the colors being the half way point between the color transition. You can move this color transition midpoint to any point between two color stops by adding a color hint, indicating where the middle of the color transition should be. The following is solid red from the start to the 10% mark, transitions from red to blue over 80% of the turn, with the final 10% being solid blue. The midpoint of the red to blue gradient change, however, is at the 20% mark rather than the 50% mark as would have happened without the 80grad, or 20%, color hint.</p>
-
-<pre class="brush: css notranslate">conic-gradient(red 40grad, 80grad, blue 360grad);</pre>
-
-<p>If two or more color stops are at the same location, the transition will be a hard line between the first and last colors declared at that location. To use conic gradients to create pie charts --- which is NOT the correct way to create pie charts as background images are not accessible -- use hard color stops, where the color stop angles for two adjacent color stops are the same. The easiest way to do this is to use multip position colors stops. The following two declarations are equivalent:</p>
-
-<pre class="brush: css notranslate">conic-gradient(#fff 0.09turn, #bbb 0.09turn, #bbb 0.27turn, #666 0.27turn, #666 0.54turn, #000 0.54turn);
-conic-gradient(#fff 0turn 0.09turn, #bbb 0.09turn 0.27turn, #666 0.27turn 0.54turn, #000 0.54turn 1turn);</pre>
-
-<p>Color stops should be listed in ascending order. Subsequent color stops of lower value will override the value of the previous color stop creating a hard transition. The following changes from red to yellow at the 30% mark, and then transitions from yellow to blue over 35% of the gradient</p>
-
-<pre class="brush: css notranslate">conic-gradient(red .8rad, yellow .6rad, blue 1.3rad);
-</pre>
-
-<p>There are other effects you can create with conic gradients. Oddly, a checkerboard is one of them. By creating quadrants with an upper left and lower right white quadrant and lower left and upper right black quadrants, then repeating the gradient 16 times (four times across and four times down) you can make a checkerboard.</p>
-
-<pre class="brush: css notranslate">conic-gradient(#fff 90deg, #000 0.25turn 0.5turn, #fff 1rad 1.5rad, #000 300grad);
-background-size: 25% 25%;
-</pre>
-
-<p>And, yes, you can mix and match different angle units, but don't. The above is hard to read.</p>
-
-<h2 id="Syntax" name="Syntax">構文</h2>
-
-<pre class="language-css notranslate" id="css">/* 45度回転した扇形グラデーション、
-   青で始まり赤で終わる */
-conic-gradient(from 45deg, blue, red);
-
-/* A a bluish purple box: the gradient goes from blue to red,
-   but as only the bottom right quadrant is visible, as the
-   center of the conic gradient is in at the top left corner */
-conic-gradient(from 90deg at 0 0, blue, red);
-
-/* 色相環 */
-background: conic-gradient(
-    hsl(360, 100%, 50%),
-    hsl(315, 100%, 50%),
-    hsl(270, 100%, 50%),
-    hsl(225, 100%, 50%),
-    hsl(180, 100%, 50%),
-    hsl(135, 100%, 50%),
-    hsl(90, 100%, 50%),
-    hsl(45, 100%, 50%),
-    hsl(0, 100%, 50%)
-);</pre>
-
-<h3 id="Values" name="Values">値</h3>
-
-<dl>
- <dt>{{CSSxRef("&lt;angle&gt;")}}</dt>
- <dd>Preceded by the <code>from</code> keyterm, and taking an angle as its value, defines the gradient rotation in clockwise direction.</dd>
- <dt><code>&lt;position&gt;</code></dt>
- <dd>Using the same length, order and keyterm values as the <a href="/en-US/docs/Web/CSS/background-position">background-position</a> property, the position defines center of the gradient. If omitted, the default value is <code>center</code>, meaing the gradient will be centered, .</dd>
- <dt><code>&lt;angular-color-stop&gt;</code></dt>
- <dd>A color-stop's {{CSSxRef("&lt;color&gt;")}} value, followed by one or two optional stop positions, (an {{CSSxRef("&lt;angle&gt;")}} along the gradient's circumference axis).</dd>
- <dt><code>&lt;color-hint&gt;</code></dt>
- <dd>Th color-hint is an interpolation hint defining how the gradient progresses between adjacent color stops. The length defines at which point between two color stops the gradient color should reach the midpoint of the color transition. If omitted, the midpoint of the color transition is the midpoint between two color stops.</dd>
- <dd>
- <div class="note">
- <p><strong>Note:</strong> Rendering of <a href="#Gradient_with_multiple_color_stops">color stops in CSS gradients</a> follows the same rules as color stops in <a href="/en-US/docs/Web/SVG/Tutorial/Gradients">SVG gradients</a>.</p>
- </div>
- </dd>
-</dl>
-
-<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
-
-<pre class="syntaxbox notranslate">conic-gradient(
-  [ from &lt;angle&gt; ]? [ at &lt;position&gt; ]?, &lt;angular-color-stop-list&gt; )
-  \---------------------------------/ \----------------------------/
-        Gradient definition                List of color stops
-
-where &lt;angular-color-stop-list&gt; = [ &lt;angular-color-stop&gt; [, &lt;angular-color-hint&gt;]? ]# , &lt;angular-color-stop&gt;
-  and &lt;angular-color-stop&gt; = &lt;color&gt; &amp;&amp; &lt;color-stop-angle&gt;?
-  and &lt;angular-color-hint&gt; = &lt;angle-percentage&gt;
-  and &lt;color-stop-angle&gt; = &lt;angle-percentage&gt;{1,2}</pre>
-
-<h2 id="Examples" name="Examples">例</h2>
-
-<div>
-<h3 id="Gradient_at_a_40-degrees" name="Gradient_at_a_40-degrees">40度のグラデーション</h3>
-
-<div class="hidden">
-<pre class="brush: css notranslate">div {
-  width: 100px;
-  height: 100px;
-}</pre>
-
-<pre class="brush: html notranslate">&lt;div&gt;&lt;/div&gt;
-</pre>
-</div>
-
-<pre class="brush: css notranslate">div {
-  background-image:
-     conic-gradient(from 40deg, #fff, #000);
-}
-</pre>
-
-<p>{{EmbedLiveSample("Gradient_at_40-degrees", 120, 120)}}</p>
-</div>
-
-<div>
-<h3 id="Off-centered_gradient" name="Off-centered_gradient">中心をずらしたグラデーション</h3>
-
-<div class="hidden">
-<pre class="brush: css notranslate">div {
-  width: 100px;
-  height: 100px;
-}</pre>
-
-<pre class="brush: html notranslate">&lt;div&gt;&lt;/div&gt;
-</pre>
-</div>
-
-<pre class="brush: css notranslate">div {
-  background: conic-gradient(from 0deg at 0% 25%, blue, green, yellow 180deg);
-}</pre>
-
-<p>{{EmbedLiveSample("Off-centered_gradient", 120, 120)}}</p>
-</div>
-
-<div>
-<h3 id="Gradient_pie-chart" name="Gradient_pie-chart">グラデーションの円グラフ</h3>
-
-<p>This example uses multi-position color stops, with adjacent colors having the same color stop value, creating a striped effect.</p>
-
-<div class="hidden">
-<pre class="brush: css notranslate">div {
-  width: 100px;
-  height: 100px;
-}</pre>
-
-<pre class="brush: html notranslate">&lt;div&gt;&lt;/div&gt;
-</pre>
-</div>
-
-<pre class="brush: css notranslate">div {
-  background: conic-gradient(
-     red 36deg, orange 36deg 170deg, yellow 170deg);
-  border-radius: 50%
-}</pre>
-
-<p>{{EmbedLiveSample("Gradient_pie-chart", 120, 120)}}</p>
-</div>
-
-<div>
-<h3 id="Checkerboard">Checkerboard</h3>
-
-<div class="hidden">
-<pre class="brush: css notranslate">div {
-  width: 100px;
-  height: 100px;
-}</pre>
-
-<pre class="brush: html notranslate">&lt;div&gt;&lt;/div&gt;
-</pre>
-</div>
-
-<pre class="brush: css notranslate">div {
-  background:
-     conic-gradient(#fff 0.25turn, #000 0.25turn 0.5turn, #fff 0.5turn 0.75turn, #000 0.75turn)
-     top left / 25% 25% repeat;
-  border: 1px solid;
-}</pre>
-
-<p>{{EmbedLiveSample("Checkerboard", 120, 120)}}</p>
-</div>
-
-<div class="note">
-<p><strong>注:</strong> 他の例は <a href="/ja/docs/Web/CSS/CSS_Images/Using_CSS_gradients">CSS グラデーションの使用</a> をご覧ください。</p>
-</div>
-
-<h2 id="Acessibility_Concerns" name="Acessibility_Concerns">アクセシビリティの考慮事項</h2>
-
-<p>Browsers do not provide any special information on background images to assistive technology. This is important primarily for screen readers, as a screen reader will not announce its presence and therefore convey nothing to its users. While it is possible to create pie charts, checkerboards, and other effects with conic gradients, CSS images provide no native way to assign alternative text, and therefore the image represented by the conic gradient will not be accessible to screen reader users. If the image contains information critical to understanding the page's overall purpose, it is better to describe it semantically in the document.</p>
-
-<ul>
- <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.1_%E2%80%94_Providing_text_alternatives_for_non-text_content">MDN Understanding WCAG, Guideline 1.1 explanations</a></li>
- <li><a href="https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/text-equiv-all.html">Understanding Success Criterion 1.1.1 | W3C Understanding WCAG 2.0</a></li>
-</ul>
-
-<h2 id="Specifications" name="Specifications">仕様書</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">仕様書</th>
-   <th scope="col">状態</th>
-   <th scope="col">備考</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS4 Images', '#conic-gradients', 'conic-gradient()')}}</td>
-   <td>{{Spec2('CSS4 Images')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
-
-<div>{{Compat("css.types.image.gradient.conic-gradient")}}</div>
-
-<h2 id="See_also" name="See_also">関連情報</h2>
-
-<ul>
- <li><a href="/ja/docs/Web/CSS/CSS_Images/Using_CSS_gradients">CSS グラデーションの使用</a></li>
- <li>他のグラデーション関数: {{CSSxRef("repeating-conic-gradient")}}, {{CSSxRef("linear-gradient")}}, {{CSSxRef("repeating-linear-gradient")}}, {{CSSxRef("radial-gradient")}}, {{CSSxRef("repeating-radial-gradient")}}</li>
- <li>{{cssxref("&lt;image&gt;")}}</li>
- <li>{{cssxref("_image","image()")}}</li>
- <li>{{cssxref("element()")}}</li>
- <li>{{cssxref("image-set","image-set()")}}</li>
- <li>{{cssxref("cross-fade")}}</li>
-</ul>
diff --git a/files/ja/orphaned/web/css/image-set()/index.html b/files/ja/orphaned/web/css/image-set()/index.html
deleted file mode 100644
index 1e8e370e2a..0000000000
--- a/files/ja/orphaned/web/css/image-set()/index.html
+++ /dev/null
@@ -1,86 +0,0 @@
----
-title: image-set()
-slug: orphaned/Web/CSS/image-set()
-tags:
-  - CSS
-  - CSS Function
-  - CSS-4 Images
-  - Function
-  - Reference
-  - Web
-translation_of: Web/CSS/image-set()
-original_slug: Web/CSS/image-set()
----
-<div>{{cssref}}</div>
-
-<p class="summary"><strong><code>image-set()</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の<a href="/ja/docs/Web/CSS/CSS_Functions">関数</a>表記で、主に高密度の画面において、指定されたセットから最も適切な CSS 画像をブラウザーに選択させる方法です。</p>
-
-<p>解像度と帯域は端末やネットワークアクセスによって様々です。 <code>image-set()</code> 関数は、画像オプションのセットを提供して — それぞれが解像度の宣言に関連付けられ — ブラウザーが端末および設定にもっともふさわしいものを選択することで、ユーザーの端末にもっとも適切な解像度の画像を配信します。解像度はファイルサイズのプロキシとして使用することができます。 — 高い密度の画面で遅いモバイル接続を使用しているユーザーエージェントは、高解像度の画面の読み込みを待つよりも、低解像度の画像を受信したほうが良いかもしれません。</p>
-
-<p><code>image-set()</code> はそれぞれのユーザーが必要なことを判断するのではなく、オプションを提供することができます。</p>
-
-<h2 id="Syntax" name="Syntax">構文</h2>
-
-<pre class="syntaxbox notranslate">image-set() = image-set( &lt;image-set-option&gt;# )
-where &lt;image-set-option&gt; = [ &lt;image&gt; | &lt;string&gt; ] &lt;resolution&gt; and
-      &lt;string&gt; is an &lt;url&gt;
-</pre>
-
-<h3 id="Values" name="Values">値</h3>
-
-<p>もっともよく見かけるのは <code>url()</code> または <code>&lt;string&gt;</code> 値ですが、 <code><a href="/ja/docs/Web/CSS/image">&lt;image&gt;</a></code> は画像セット以外のあらゆる画像型を取ることができます。 <code>image-set()</code> 関数は他の <code>image-set()</code> 関数の中に入れることはできません。</p>
-
-<p><code><a href="/ja/docs/Web/CSS/resolution">&lt;resolution&gt;</a></code> の単位には、ピクセル当たりのドット数を表す <code>x</code> または <code>dppx</code>、インチ当たりのドット数を表す <code>dpi</code>、センチメートル当たりのドット数を表す <code>dpcm</code> があります。 <code>image-set()</code> の中の画像はすべて、固有の解像度が必要です。</p>
-
-<h2 id="Examples" name="Examples">例</h2>
-
-<h3 id="Using_image-set_to_provide_alternative_background-image_options" name="Using_image-set_to_provide_alternative_background-image_options">image-set() を使用して代替の background-image オプションを提供する</h3>
-
-<pre class="brush: css notranslate">background-image: image-set( "cat.png" 1x,
-                             "cat-2x.png" 2x,
-                             "cat-print.png" 600dpi);</pre>
-
-<p>この例は <code><a class="css" href="https://drafts.csswg.org/css-images-4/#funcdef-image-set" id="ref-for-funcdef-image-set⑨">image-set()</a></code> の使い方を示しており、 {{cssxref("background-image")}} のオプションとして、必要な解像度に応じて2つの異なる画像、通常版と高解像度版を選択する方法を示しています。</p>
-
-<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮</h2>
-
-<p>ブラウザーは支援技術に対して、背景画像についての特別な情報を何も提供しません。これは主に読み上げソフトにとって重要であり、読み上げソフトは背景画像が存在することをアナウンスせず、したがってユーザーには何も伝えられません。もし画像がページ全体の目的を理解するのに重要な情報を含んでいる場合は、文書中に意味的に記述するようにしてください。</p>
-
-<ul>
- <li><a href="/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.1_%E2%80%94_Providing_text_alternatives_for_non-text_content">MDN Understanding WCAG, Guideline 1.1 explanations</a></li>
- <li><a class="external external-icon" href="https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/text-equiv-all.html" rel="noopener">Understanding Success Criterion 1.1.1 | W3C Understanding WCAG 2.0</a></li>
-</ul>
-
-<h2 id="Specifications" name="Specifications">仕様書</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th>仕様書</th>
-   <th>状態</th>
-   <th>備考</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS4 Images', '#image-set-notation', 'The image-set() notation')}}</td>
-   <td>{{Spec2('CSS4 Images')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
-
-<p>{{Compat("css.types.image.image-set")}}</p>
-
-<h2 id="See_also" name="See_also">関連情報</h2>
-
-<ul>
- <li>{{cssxref("image")}}</li>
- <li>{{cssxref("_image", "image()")}}</li>
- <li>{{cssxref("element")}}</li>
- <li>{{cssxref("url")}}</li>
- <li>{{cssxref("&lt;gradient&gt;")}}</li>
- <li>{{cssxref("cross-fade")}}</li>
-</ul>
diff --git a/files/ja/orphaned/web/css/linear-gradient()/index.html b/files/ja/orphaned/web/css/linear-gradient()/index.html
deleted file mode 100644
index a5659d4660..0000000000
--- a/files/ja/orphaned/web/css/linear-gradient()/index.html
+++ /dev/null
@@ -1,217 +0,0 @@
----
-title: linear-gradient()
-slug: orphaned/Web/CSS/linear-gradient()
-tags:
-  - CSS
-  - CSS 画像
-  - CSS 関数
-  - Reference
-  - Web
-  - ウェブ
-  - グラフィック
-  - レイアウト
-translation_of: Web/CSS/linear-gradient()
-original_slug: Web/CSS/linear-gradient()
----
-<div>{{CSSRef}}</div>
-
-<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>linear-gradient()</code></strong> 関数は、二つ以上の色の間で、連続的な直線の変化から構成される画像を生成します。結果は {{CSSxRef("&lt;gradient&gt;")}} データ型のオブジェクトであり、これは {{CSSxRef("&lt;image&gt;")}} の特殊型です。</p>
-
-<div>{{EmbedInteractiveExample("pages/css/function-linear-gradient.html")}}</div>
-
-<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>
-
-<p>他のグラデーションと同様、線形グラデーションは<a href="/ja/docs/CSS/image#no_intrinsic">固有の寸法を持ちません</a>。つまり、画像本来の寸法や、優先されるアスペクト比を持たないということです。実際の寸法は、適用先の要素の寸法と一致します。</p>
-
-<p>繰り返して領域を埋め尽くす線形グラデーションを生成するには、代わりに {{CSSxRef("repeating-linear-gradient")}} プロパティを使用してください。</p>
-
-<p><code>&lt;gradient&gt;</code> は CSS の <code>&lt;image&gt;</code> データ型に所属しますので、 <code>&lt;image&gt;</code> が使用できるところでのみ使用できます。このため、 <code>linear-gradient</code> は {{CSSxRef("background-color")}} や、その他の {{CSSxRef("&lt;color&gt;")}} を要求するプロパティでは動作しません。</p>
-
-<h2 id="Composition_of_a_linear_gradient" name="Composition_of_a_linear_gradient">線形グラデーションの構成</h2>
-
-<p>線形グラデーションは、グラデーションライン (Gradient line) と呼ばれる軸によって定義されます。軸上の各点にはそれぞれ違った色が割り当てられます。なめらかなグラデーションを作成するために、 <code>linear-gradient()</code> 関数はグラデーションラインと直行した線を、グラデーションライン上の交点の色で連続して引きます。</p>
-
-<p><img alt="linear-gradient.png" src="/files/3537/linear-gradient.png" style="float: left; height: 383px; width: 309px;"></p>
-
-<p>グラデーションラインは、グラデーション画像を含むボックスの中心と、角度によって定義されます。グラデーションの色は、開始点 (Starting point)、 <em>終了点</em> (Ending point) と、省略可能な色経由点 (color-stop point) の各点でそれぞれ定義されます。</p>
-
-<p>開始点は、グラデーションラインの最初の色が始まる点です。終了点は最後の色が終わるところです。これらの点は、グラデーションラインとそれに直交し、ボックスの同一象限にあるコーナーを通る直線との交点によって定義されます。ただ、もっと簡単に、ボックスの中心を原点としたときの開始点の点対称な位置としても定義できます。こうした何だかややこしい開始点と終了点の定義が、<em>マジックコーナー</em>と呼ばれることのある興味深いプロパティを生みました。開始点と終了点に近いコーナーは、それぞれ開始点と終了点と同じ色を持ちます。</p>
-
-<h3 id="Customizing_Gradients" name="Customizing_Gradients">グラデーションのカスタマイズ</h3>
-
-<p>グラデーションラインに色経由点を追加することで、開始点と終了点の間で高度にカスタマイズした変化を作成することができます。色経由点は {{CSSxRef("&lt;length&gt;")}} や {{CSSxRef("&lt;percentage&gt;")}} データ型を使って、明示的に定義することができます。もし場所を定義しなかったときは、直前の点と直後の点の中間点になります。以下の二つのグラデーションは等価です。</p>
-
-<pre class="brush: css notranslate">linear-gradient(red, orange, yellow, green, blue);
-linear-gradient(red 0%, orange 25%, yellow 50%, green 75%, blue 100%);</pre>
-
-<p>ある色経由点の色から次の色経由点の色まで滑らかに色が変化し、色と色の中間点は、既定では色の変化の中間の位置になります。色の変化の中間点をどこに置くかを示すために、二つの色の間でラベルのない % の色ヒントを追加することで、色の中間点を二つの色経由点の間の任意の位置に移動することができます。次の例では、純粋な赤を先頭から10%の位置まで、純粋な青を90%の位置から末尾までに配置します。10%から90％までの間は、赤から青への色変化ですが、色ヒントがない30%があるので、変化の中間点は50%の位置ではなく30%の位置になります。</p>
-
-<pre class="brush: css notranslate">linear-gradient(red 10%, 30%, blue 90%);</pre>
-
-<p>2つ以上の色経由点が同じ位置である場合、その位置で宣言された最初と最後の色の間で明確な線になります。</p>
-
-<p>色経由点は昇順に並べてください。次の色経由点がより小さな値になると、以前の色経由点を上書きすることになり、急な変化になります。以下の例は30%が赤から黄へ変化し、黄から青への変化がその上でグラデーションの35%になります。</p>
-
-<pre class="brush: css notranslate">linear-gradient(red 40%, yellow 30%, blue 65%);
-</pre>
-
-<p>複数位置の色経由点が利用できます。 CSS 宣言の中で二つの位置を含めることで、二つの隣り合う色経由点として色を宣言することができます。</p>
-
-<pre class="brush: css notranslate">linear-gradient(red 0%, orange 10%, orange 30%, yellow 50%, yellow 70%, green 90%, green 100%);
-linear-gradient(red, orange 10% 30%, yellow 50% 70%, green 90%);
-linear-gradient(red 0%, orange 10% 30%, yellow 50% 70%, green 90% 100%);</pre>
-
-<p>既定では、0%の経由点に色がない場合、宣言されている最初の色がその場所の色になります。同様に、最後の色経由点に位置が宣言されていない場合は、最後の色が100%の位置まで続くか、100%の位置の色になります。</p>
-
-<h2 id="Syntax" name="Syntax">構文</h2>
-
-<pre class="language-css notranslate" id="css">/* 45度に傾いたグラデーションで、
-   青から始まり赤で終わる */
-linear-gradient(45deg, blue, red);
-
-/* 右下から左上に向かうグラデーションで、
-   青から始まり赤で終わる */
-linear-gradient(to left top, blue, red);
-
-/* 色経由点: 下から上に向かうグラデーションで、
-   青から始まり、長さの40%ののところで緑になり、
-   赤で終わる */
-linear-gradient(0deg, blue, green 40%, red);
-
-/* 色ヒント: 左から右に向かうグラデーションで、
-   赤から始まり、グラデーションの長さ全体の
-   10%に中間点が来て、残りの90%の長さをかけて
-   青色に変わる */
-linear-gradient(.25turn, red, 10%, blue);
-
-/* 複数位置の色経由点: 45度傾いたグラデーションで、
-   左下半分が赤で右上半分が青、
-   赤から青への変化は明確な線 */
-linear-gradient(45deg, red 0 50%, blue 50% 100%);</pre>
-
-<h3 id="Values" name="Values">値</h3>
-
-<dl>
- <dt><code>&lt;side-or-corner&gt;</code></dt>
- <dd>グラデーションラインの開始点の位置。指定する場合は、 <code>to</code> に続けて2つ以下のキーワードから成ります。一つは水平方向の辺 (<code>left</code> または <code>right</code>)、もう一方は垂直方向の辺 (<code>top</code> または <code>bottom</code>) です。辺を表すキーワードは順不同です。指定しない場合は、 <code>to bottom</code> が既定になります。</dd>
- <dd><code>to top</code>, <code>to bottom</code>, <code>to left</code>, <code>to right</code> の値は、 <code>0deg</code>, <code>180deg</code>, <code>270deg</code>, <code>90deg</code>, の角度にそれぞれ対応します。他の値は角度に変換されます。</dd>
- <dt>{{CSSxRef("&lt;angle&gt;")}}</dt>
- <dd>グラデーションラインの方向を角度で示します。 <code>0deg</code> の値は <code>to top</code> と等価で、値が増加するとそこから時計回りに回ります。</dd>
- <dt><code>&lt;linear-color-stop&gt;</code></dt>
-  <dd>色経由点の {{CSSxRef("&lt;color&gt;")}} の値であり、任意でその後に停止位置を指定します(グラデーションの軸に沿った {{CSSxRef("&lt;percentage&gt;")}} または {{CSSxRef("&lt;length&gt;")}} の位置)。</dd>
- <dt><code>&lt;color-hint&gt;</code></dt>
- <dd>color-hint は、隣り合う色経由点の間でどのようにグラデーションが進むかを定義する補間のヒントです。長さによって、どの位置で二つの色経由点のグラデーション色が色の移行の中間点に達するかを定義します。省略された場合、色の移行の中間点は二つの色経由点の中点になります。</dd>
- <dd>
- <div class="note">
- <p><strong>メモ:</strong> <a href="#Gradient_with_multiple_color_stops">CSS グラデーションにおける色経由点</a>の描画は、 <a href="/ja/docs/Web/SVG/Tutorial/Gradients">SVG グラデーション</a>と同じ規則に従います。</p>
- </div>
- </dd>
-</dl>
-
-<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
-
-<pre class="syntaxbox notranslate">linear-gradient(
-  [ <a href="/ja/CSS/angle">&lt;angle&gt;</a> | to &lt;side-or-corner&gt; ,]? &lt;color-stop-list&gt; )
-  \---------------------------------/ \----------------------------/
-    Definition of the gradient line        List of color stops
-
-where &lt;side-or-corner&gt; = [ left | right ] || [ top | bottom ]
-  and &lt;color-stop-list&gt; = [ &lt;linear-color-stop&gt; [, &lt;color-hint&gt; ]? ]#, &lt;linear-color-stop&gt;
-  and &lt;linear-color-stop&gt; = &lt;color&gt; [ &lt;color-stop-length&gt; ]?
-  and &lt;color-stop-length&gt; = [ &lt;percentage&gt; | &lt;length&gt; ]{1,2}
-  and &lt;color-hint&gt; = [ &lt;percentage&gt; | &lt;length&gt; ]</pre>
-
-<h2 id="Examples" name="Examples">例</h2>
-
-<h3 id="Gradient_at_a_45-degree_angle" name="Gradient_at_a_45-degree_angle">45 度 のグラデーション</h3>
-
-<div class="hidden">
-<pre class="brush: css notranslate">body {
-  width: 100vw;
-  height: 100vh;
-}</pre>
-</div>
-
-<pre class="brush: css notranslate">body {
-  background: linear-gradient(45deg, red, blue);
-}
-</pre>
-
-<p>{{EmbedLiveSample("Gradient_at_a_45-degree_angle", 120, 120)}}</p>
-
-<h3 id="Gradient_that_starts_at_60_of_the_gradient_line" name="Gradient_that_starts_at_60_of_the_gradient_line">グラデーションラインの60%から始まるグラデーション</h3>
-
-<div class="hidden">
-<pre class="brush: css notranslate">body {
-  width: 100vw;
-  height: 100vh;
-}</pre>
-</div>
-
-<pre class="brush: css notranslate">body {
-  background: linear-gradient(135deg, orange, orange 60%, cyan);
-}</pre>
-
-<p>{{EmbedLiveSample("Gradient_that_starts_at_60_of_the_gradient_line", 120, 120)}}</p>
-
-<h3 id="Gradient_with_multi-position_color_stops" name="Gradient_with_multi-position_color_stops">複数の位置の色経由点があるグラデーション</h3>
-
-<p>この例は複数の位置の色経由点を使用しており、隣り合う色に同じ色経由値があるため、縞模様の効果になります。</p>
-
-<div class="hidden">
-<pre class="brush: css notranslate">body {
-  width: 100vw;
-  height: 100vh;
-}</pre>
-</div>
-
-<pre class="brush: css notranslate">body {
-  background: linear-gradient(to right,
-     red 20%, orange 20% 40%, yellow 40% 60%, green 60% 80%, blue 80%);
-}</pre>
-
-<p>{{EmbedLiveSample("Gradient_with_multi-position_color_stops", 120, 120)}}</p>
-
-<div class="note">
-<p><strong>メモ:</strong> 他の例は <a href="/ja/docs/Web/CSS/CSS_Images/Using_CSS_gradients">CSS グラデーションの使用</a>を参照してください。</p>
-</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('CSS4 Images', '#color-stop-syntax', 'Gradient Color-Stops')}}</td>
-   <td>{{Spec2('CSS4 Images')}}</td>
-   <td>補間のヒントを追加。</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Images', '#linear-gradients', 'linear-gradient()')}}</td>
-   <td>{{Spec2('CSS3 Images')}}</td>
-   <td>初回定義</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
-
-<div>{{Compat("css.types.image.gradient.linear-gradient")}}</div>
-
-<h2 id="See_also" name="See_also">関連情報</h2>
-
-<ul>
- <li><a href="/ja/docs/Web/CSS/CSS_Images/Using_CSS_gradients">CSS グラデーションの利用</a></li>
- <li>他のグラデーション関数: {{CSSxRef("repeating-linear-gradient")}}, {{CSSxRef("radial-gradient")}}, {{CSSxRef("repeating-radial-gradient")}}</li>
- <li>{{CSSxRef("&lt;image&gt;")}}</li>
- <li>{{cssxref("element()")}}</li>
- <li>{{cssxref("_image","image()")}}</li>
- <li>{{cssxref("image-set","image-set()")}}</li>
- <li>{{cssxref("cross-fade")}}</li>
-</ul>
diff --git a/files/ja/orphaned/web/css/paint()/index.html b/files/ja/orphaned/web/css/paint()/index.html
deleted file mode 100644
index 9f29cb31e3..0000000000
--- a/files/ja/orphaned/web/css/paint()/index.html
+++ /dev/null
@@ -1,113 +0,0 @@
----
-title: paint()
-slug: orphaned/Web/CSS/paint()
-tags:
-  - CSS
-  - CSS Function
-  - CSS 関数
-  - CSS4-images
-  - Houdini
-  - Reference
-  - Web
-  - ウェブ
-translation_of: Web/CSS/paint()
-original_slug: Web/CSS/paint()
----
-<div>{{CSSRef}}{{SeeCompatTable}}</div>
-
-<p><strong><code>paint()</code></strong> は <a href="/en-US/docs/Web/CSS">CSS</a> の関数で、 PaintWorklet で生成された {{cssxref("&lt;image&gt;")}} の値を定義します。</p>
-
-<h2 id="Syntax" name="Syntax">構文</h2>
-
-<pre class="syntaxbox">paint(<var>workletName</var>, <var>parameters</var>)</pre>
-
-<p>凡例</p>
-
-<dl>
- <dt><var>workletName</var></dt>
- <dd>登録された Worklet の名前です。</dd>
- <dt><var>parameters</var></dt>
- <dd>PaintWorklet へ渡される省略可能な追加の引数です。</dd>
-</dl>
-
-<h2 id="Examples" name="Examples">例</h2>
-
-<p>CSS の paint() 関数で追加の引数を渡すことができます。この例では、二つの引数を渡しています。リストアイテムのグループの背景画像が塗りつぶしか輪郭線だけかと、輪郭線の太さです。</p>
-
-<pre class="brush: html hidden">&lt;ul&gt;
-    &lt;li&gt;item 1&lt;/li&gt;
-    &lt;li&gt;item 2&lt;/li&gt;
-    &lt;li&gt;item 3&lt;/li&gt;
-    &lt;li&gt;item 4&lt;/li&gt;
-    &lt;li&gt;item 5&lt;/li&gt;
-    &lt;li&gt;item 6&lt;/li&gt;
-    &lt;li&gt;item 7&lt;/li&gt;
-    &lt;li&gt;item 8&lt;/li&gt;
-    &lt;li&gt;item 9&lt;/li&gt;
-    &lt;li&gt;item 10&lt;/li&gt;
-    &lt;li&gt;item 11&lt;/li&gt;
-    &lt;li&gt;item 12&lt;/li&gt;
-    &lt;li&gt;item 13&lt;/li&gt;
-    &lt;li&gt;item 14&lt;/li&gt;
-    &lt;li&gt;item 15&lt;/li&gt;
-    &lt;li&gt;item 16&lt;/li&gt;
-    &lt;li&gt;item 17&lt;/li&gt;
-    &lt;li&gt;item 18&lt;/li&gt;
-    &lt;li&gt;item 19&lt;/li&gt;
-    &lt;li&gt;item 20&lt;/li&gt;
-&lt;/ul&gt;</pre>
-
-<pre class="brush: js hidden">  CSS.paintWorklet.addModule('https://mdn.github.io/houdini-examples/cssPaint/intro/worklets/hilite.js');
-</pre>
-
-<pre class="brush: css">li {
-   --boxColor: hsla(55, 90%, 60%, 1.0);
-   background-image: paint(hollowHighlights, stroke, 2px);
-}
-
-li:nth-of-type(3n) {
-   --boxColor: hsla(155, 90%, 60%, 1.0);
-   background-image: paint(hollowHighlights, filled,  3px);
-}
-
-li:nth-of-type(3n+1) {
-   --boxColor: hsla(255, 90%, 60%, 1.0);
-   background-image: paint(hollowHighlights, stroke, 1px);
-}</pre>
-
-<p>boxColor を定義しているセレクターブロックにカスタムプロパティを設定しました。カスタムプロパティは PaintWorklet にアクセスすることができます。</p>
-
-<p>{{EmbedLiveSample("Examples", 300, 300)}}</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('CSS Painting API', '#paint-notation', 'Paint Notation')}}</td>
-   <td>{{Spec2('CSS Painting API')}}</td>
-   <td>初回定義</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
-
-<p>{{Compat("css.types.image.paint")}}</p>
-
-<h2 id="See_also" name="See_also">関連情報</h2>
-
-<ul>
- <li>{{domxref('PaintWorklet')}}</li>
- <li>{{domxref('CSS Painting API')}}</li>
- <li><a href="/ja/docs/Web/API/CSS_Painting_API/Guide">CSS Painting API の使用</a></li>
- <li>{{cssxref("&lt;image&gt;")}}</li>
- <li>{{domxref("canvas")}}</li>
-</ul>
diff --git a/files/ja/orphaned/web/css/radial-gradient()/index.html b/files/ja/orphaned/web/css/radial-gradient()/index.html
deleted file mode 100644
index c2caff4bc1..0000000000
--- a/files/ja/orphaned/web/css/radial-gradient()/index.html
+++ /dev/null
@@ -1,173 +0,0 @@
----
-title: radial-gradient()
-slug: orphaned/Web/CSS/radial-gradient()
-tags:
-  - CSS
-  - CSS Function
-  - CSS Images
-  - Function
-  - Graphics
-  - Layout
-  - Reference
-  - Web
-  - gradient
-translation_of: Web/CSS/radial-gradient()
-original_slug: Web/CSS/radial-gradient()
----
-<div>{{CSSRef}}</div>
-
-<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>radial-gradient()</code></strong> 関数は、二つ以上の色の連続的な移行が原点から放射状に広がる画像を生成します。形状は円形になったり楕円形になったりします。関数の結果は {{cssxref("&lt;gradient&gt;")}} データ型のオブジェクトであり、これは {{cssxref("&lt;image&gt;")}} の特殊形です。</p>
-
-<div>{{EmbedInteractiveExample("pages/css/function-radial-gradient.html")}}</div>
-
-<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>
-
-<h2 id="Syntax" name="Syntax">構文</h2>
-
-<pre class="brush: css no-line-numbers notranslate">/* コンテナーの中央にあるグラデーション、
-   赤で始まり、青へ変わり、緑で終わる */
-radial-gradient(circle at center, red 0, blue, green 100%)</pre>
-
-<h3 id="Values" name="Values">値</h3>
-
-<dl>
- <dt>{{cssxref("&lt;position&gt;")}}</dt>
- <dd>グラデーションの位置で、 {{cssxref("background-position")}} や {{cssxref("transform-origin")}} と同じ方法で解釈されます。指定されなかった場合、既定値は <code>center</code> です。</dd>
- <dt><code>&lt;shape&gt;</code></dt>
- <dd>グラデーションの形状です。値は <code>circle</code> (つまり、グラデーションの形状が一定の半径の円) か <code>ellipse</code> (つまり、軸に沿った楕円) のいずれかです。指定されなかった場合、既定値は <code>ellipse</code> です。</dd>
- <dt><code>&lt;extent-keyword&gt;</code></dt>
- <dd>終端の形状の大きさを指定するキーワードです。利用可能な値は次の通りです。
- <table class="standard-table">
-  <thead>
-   <tr>
-    <th>キーワード</th>
-    <th>説明</th>
-   </tr>
-  </thead>
-  <tbody>
-   <tr>
-    <td><code>closest-side</code></td>
-    <td>グラデーションの終端の形状は、中心から最も近いボックスの辺に (circle の場合) または中心から最も近い縦の辺と横の辺に (ellipse の場合) 内接します。</td>
-   </tr>
-   <tr>
-    <td><code>closest-corner</code></td>
-    <td>グラデーションの終端の形状は、ボックスの中心から最も近い頂点に接するように大きさが調整されます。</td>
-   </tr>
-   <tr>
-    <td><code>farthest-side</code></td>
-    <td><code>closest-side</code> と同様ですが、終端の形状がその中心から最も遠い辺 (または縦と横の辺) に接するように大きさが調整される点が異なります。</td>
-   </tr>
-   <tr>
-    <td><code>farthest-corner</code></td>
-    <td>既定値で、グラデーションの終端の形状は、ボックスの中心から最も遠い頂点に接するように大きさが調整されます。</td>
-   </tr>
-  </tbody>
- </table>
-
- <div class="note">
- <p><strong>注:</strong> この関数の初期の実装では、他のキーワード (<code>cover</code> および <code>contain</code>) をそれぞれ標準の <code>farthest-corner</code> および <code>closest-side</code> の別名として含めていました。実装によってはすでに古い形を外しているので、標準のキーワードのみを使用してください。</p>
- </div>
- </dd>
- <dt><code>&lt;linear-color-stop&gt;</code></dt>
- <dd>色経由点の {{cssxref("&lt;color&gt;")}} 値と、それに続く1つまたは2つの省略可能な経由位置 (グラデーション軸沿いの {{cssxref("&lt;percentage&gt;")}} または {{cssxref("&lt;length&gt;")}}) です。 percentage が <code>0%</code>、または length が <code>0</code> の場合は、グラデーションの中心を表します。 <code>100%</code> は終端の形状と仮想グラデーションレイの交点を表します。その間のパーセント値はグラデーションレイにおける直線的な位置です。</dd>
- <dt><code>&lt;color-hint&gt;</code></dt>
- <dd>color-hint は、隣り合う色経由点の間でどのようにグラデーションが進むかを定義する補間のヒントです。長さによって、どの位置で二つの色経由点のグラデーション色が色の移行の中間点に達するかを定義します。省略された場合、色の移行の中間点は二つの色経由点の中点になります。</dd>
-</dl>
-
-<h2 id="Description" name="Description">解説</h2>
-
-<p>他のグラデーションと同様、放射グラデーションは<a href="/ja/docs/CSS/image#no_intrinsic">固有の寸法を持ちません</a>。つまり、自然の寸法や推奨される寸法、推奨される縦横比もありません。具体的な寸法は、適用先の要素の寸法に一致します。</p>
-
-<p>繰り返してコンテナーを埋める放射グラデーションを生成するには、代わりに {{cssxref("repeating-radial-gradient")}} 関数を使用してください。</p>
-
-<p><code>&lt;gradient&gt;</code> は <code>&lt;image&gt;</code> データ型に属するため、 <code>&lt;image&gt;</code> が使用できるところでしか使用できません。このため、 <code>radial-gradient()</code> は {{cssxref("background-color")}} や、その他の {{cssxref("&lt;color&gt;")}} データ型を使用するプロパティでは動作しません。</p>
-
-<h3 id="放射グラデーションの構成">放射グラデーションの構成</h3>
-
-<p><img alt="" src="/files/3795/radial%20gradient.png" style="float: left; height: 176px; width: 396px;">放射グラデーションは<em>中心位置</em>、<em>最終的な形状</em>、および二つ以上の<em>色経由点</em>で定義されます。</p>
-
-<p>滑らかなグラデーションを生成するために、 <code>radial-gradient()</code> 関数は中央から<em>最終的な形状</em> (およびその先) に向けて一連の同心円の形状を描きます。最終的な形状は円または楕円です。</p>
-
-<p>色経由点は、中心から右方向に水平に延びる<em>仮想的なグラデーション光</em>の上に配置されます。色経由点の位置を決めるパーセンテージは、最終的な形状とこのグラデーションレイの交点を <code>100%</code> としたときの相対値です。各形状は単色で、色は交差したグラデーション光の色によって定義されます。</p>
-
-<h2 id="Examples" name="Examples">例</h2>
-
-<h3 id="Simple_gradient" name="Simple_gradient">シンプルなグラデーション</h3>
-
-<div class="hidden">
-<pre class="brush: html notranslate">&lt;div class="radial-gradient"&gt;&lt;/div&gt;
-</pre>
-
-<pre class="brush: css notranslate">.radial-gradient {
-  width: 240px;
-  height: 120px;
-}</pre>
-</div>
-
-<pre class="brush: css notranslate">.radial-gradient {
-  background-image: radial-gradient(cyan 0%, transparent 20%, salmon 40%);
-} </pre>
-
-<p>{{EmbedLiveSample('Simple_gradient', 120, 120)}}</p>
-
-<h3 id="Non-centered_gradient" name="Non-centered_gradient">中央から外れたグラデーション</h3>
-
-<div class="hidden">
-<pre class="brush: html notranslate">&lt;div class="radial-gradient"&gt;&lt;/div&gt;
-</pre>
-
-<pre class="brush: css notranslate">.radial-gradient {
-  width: 240px;
-  height: 120px;
-}</pre>
-</div>
-
-<pre class="brush: css notranslate">.radial-gradient {
-  background-image: radial-gradient(farthest-corner at 40px 40px,
-      #f35 0%, #43e 100%);
-}</pre>
-
-<p>{{EmbedLiveSample('Non-centered_gradient', 240, 120)}}</p>
-
-<h3 id="More_radial-gradient_examples" name="More_radial-gradient_examples">他の radial-gradient の例</h3>
-
-<p>他の例は <a href="/ja/docs/Web/CSS/CSS_Images/Using_CSS_gradients">CSS グラデーションの使用</a>を参照してください。</p>
-
-<h2 id="Specifications" name="Specifications">仕様書</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">仕様書</th>
-   <th scope="col">状態</th>
-   <th scope="col">備考</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Images', '#radial-gradients', 'radial-gradients()')}}</td>
-   <td>{{Spec2('CSS3 Images')}}</td>
-   <td>初回定義</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
-
-<div>{{Compat("css.types.image.gradient.radial-gradient")}}</div>
-
-<h3 id="Quantum_CSS_notes" name="Quantum_CSS_notes">Quantum CSS のメモ</h3>
-
-<p>Gecko は <code>radial-gradient(circle gold,red)</code> のような放射グラデーションが動きそうで、 <code>circle</code> と <code>gold</code> との間にカンマがないので動作しないというバグを持っていました。また、 {{cssxref("calc")}} 式が <code>radial-gradient()</code> 関数の半径の部分に使用されると、弾かれて — 値が無効になって — いました ({{bug(1376019)}})。 Firefox の新しいパラレル CSS エンジン (<a href="https://wiki.mozilla.org/Quantum">Quantum CSS</a> または <a href="https://wiki.mozilla.org/Quantum/Stylo">Stylo</a> とも呼ばれ、 Firefox 57 でリリース) は、これらのバグを修正しています。</p>
-
-<h2 id="See_also" name="See_also">関連情報</h2>
-
-<ul>
- <li><a href="/ja/docs/Web/CSS/CSS_Images/Using_CSS_gradients">CSS グラデーションの利用</a></li>
- <li>他のグラデーション関数: {{cssxref("repeating-radial-gradient")}}, {{cssxref("linear-gradient")}}, {{cssxref("repeating-linear-gradient")}}, {{cssxref("conic-gradient")}}, {{cssxref("repeating-conic-gradient")}}</li>
- <li>{{cssxref("&lt;image&gt;")}}</li>
- <li>{{cssxref("_image","image()")}}</li>
- <li>{{cssxref("element()")}}</li>
- <li>{{cssxref("image-set","image-set()")}}</li>
- <li>{{cssxref("cross-fade")}}</li>
-</ul>
diff --git a/files/ja/orphaned/web/css/repeating-linear-gradient()/index.html b/files/ja/orphaned/web/css/repeating-linear-gradient()/index.html
deleted file mode 100644
index 0a7f158327..0000000000
--- a/files/ja/orphaned/web/css/repeating-linear-gradient()/index.html
+++ /dev/null
@@ -1,165 +0,0 @@
----
-title: repeating-linear-gradient()
-slug: orphaned/Web/CSS/repeating-linear-gradient()
-tags:
-  - CSS
-  - CSS 画像
-  - CSS 関数
-  - Reference
-  - ウェブ
-  - グラフィック
-  - レイアウト
-translation_of: Web/CSS/repeating-linear-gradient()
-original_slug: Web/CSS/repeating-linear-gradient()
----
-<div>{{CSSRef}}</div>
-
-<p><a href="/ja/docs/Web/CSS">CSS</a> の <code>repeating-linear-gradient()</code> 関数は、反復線形グラデーションによる画像を生成します。 {{cssxref("linear-gradient")}} と似ており、同じ引数を取りますが、両方向に無限に色経由点を繰り返してコンテナー全体を埋めます。関数の返値は {{cssxref("&lt;gradient&gt;")}} データ型のオブジェクトであり、これは {{cssxref("&lt;image&gt;")}} の特殊型です。</p>
-
-<div>{{EmbedInteractiveExample("pages/css/function-repeating-linear-gradient.html")}}</div>
-
-<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>
-
-<p>繰り返すグラデーションの長さは、最初の色経由点と最後の色経由点の間の距離です。最初の色に color-stop-length がない場合、 color-stop-length の既定値は 0 になります。それぞれの繰り返しにおいて、色経由点の位置は基本的な線形グラデーションの長さの倍数だけずらしたものになります。この結果、グラデーションの最初と最後の色は常に隣り合わせになります。二つが異なる色であれば、視覚的に明確な変わり目ができるでしょう。これは最初の色を最後の色として再び使用することで修正することができます。</p>
-
-<p>他のグラデーションと同じく、線形反復グラデーションも<a href="/ja/docs/CSS/image#no_intrinsic">固有の寸法を持ちません</a>。つまり、本来の寸法も優先される寸法も、優先されるアスペクト比も持たないということです。実際の寸法は、適用先の要素の寸法と一致します。</p>
-
-<p><code>&lt;gradient&gt;</code> は CSS の <code>&lt;image&gt;</code> データ型に所属しますので、 <code>&lt;image&gt;</code> が使用できるところでのみ使用できます。このため、 <code>repeating-linear-gradient()</code> は {{CSSxRef("background-color")}} や、その他の {{CSSxRef("&lt;color&gt;")}} を要求するプロパティでは動作しません。</p>
-
-<h2 id="Syntax" name="Syntax">構文</h2>
-
-<pre class="brush: css no-line-numbers notranslate">/* 45度方向に軸を延ばし、青で始め赤で終わり、
-   3回繰り返す反復グラデーション */
-repeating-linear-gradient(45deg, blue, red 33.3%);
-
-/* 右下から左上に延び、青で始め赤で終わり、
-   20px ごとに繰り返す反復グラデーション */
-repeating-linear-gradient(to left top, blue, red 20px);
-
-/* 下から上に延び、青で始め、 40% から緑になり、赤で終わる
-   グラデーション。最後の色経由点が既定で 100% なので、
-   グラデーションは繰り返されない */
-repeating-linear-gradient(0deg, blue, green 40%, red);
-
-/* 5回繰り返し、左から右に、赤で始まり、緑に変わり、
-   赤に戻るグラデーション */
-repeating-linear-gradient(to right, red 0%, green 10%, red 20%);
-</pre>
-
-<h3 id="Values" name="Values">値</h3>
-
-<dl>
- <dt><code>&lt;side-or-corner&gt;</code></dt>
- <dd>グラデーション線の開始点の位置。指定する場合は、 <code>to</code> に続けて2つ以下のキーワードを指定します。一つは水平方向の辺 (<code>left</code> または <code>right</code>)、もう一方は垂直方向の辺 (<code>top</code> または <code>bottom</code>) です。辺を表すキーワードは順不同です。指定しない場合は、 <code>to bottom</code> が既定になります。</dd>
- <dd><code>to top</code>, <code>to bottom</code>, <code>to left</code>, <code>to right</code> の値は、 <code>0deg</code>, <code>180deg</code>, <code>270deg</code>, <code>90deg</code> の角度にそれぞれ対応します。他の値は角度に変換されます。</dd>
- <dt>{{cssxref("&lt;angle&gt;")}}</dt>
- <dd>グラデーション線の方向を角度で示します。 <code>0deg</code> の値は <code>to top</code> と等価で、値が増加するとそこから時計回りに回ります。</dd>
- <dt><code>&lt;linear-color-stop&gt;</code></dt>
- <dd>色経由点の {{CSSxRef("&lt;color&gt;")}} の値であり、任意でその後に停止位置を指定します(グラデーションの軸に沿った {{CSSxRef("&lt;percentage&gt;")}} または {{CSSxRef("&lt;length&gt;")}} の位置)。 <code>0%</code> のパーセント値または <code>0</code> の長さは、グラデーションの先頭を表します。 <code>100%</code> の値は画像の寸法の 100% であり、つまりグラデーションは反復されません。</dd>
- <dt><code>&lt;color-hint&gt;</code></dt>
- <dd>color-hint は、隣り合う色経由点の間でどのようにグラデーションが進むかを定義する補間のヒントです。長さによって、どの位置で二つの色経由点のグラデーション色が色の移行の中間点に達するかを定義します。省略された場合、色の移行の中間点は二つの色経由点の中点になります。</dd>
- <dd>
- <div class="note">
- <p><strong>メモ:</strong> <a href="#Gradient_with_multiple_color_stops">CSS グラデーションにおける色経由点</a>の描画は、 <a href="/ja/docs/Web/SVG/Tutorial/Gradients">SVG グラデーション</a>と同じ規則に従います。</p>
- </div>
- </dd>
-</dl>
-
-<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
-
-<pre class="syntaxbox notranslate">repeating-linear-gradient(  [ <a href="/ja/CSS/angle">&lt;angle&gt;</a> | to &lt;side-or-corner&gt; ,]? &lt;color-stop-list&gt; )
-                            \---------------------------------/ \---------------/
-                              Definition of the gradient line   List of color stops
-
-where &lt;side-or-corner&gt; = [left | right] || [top | bottom]
-  and &lt;color-stop-list&gt; = [ &lt;linear-color-stop&gt; [, &lt;color-hint&gt;? ]? ]#, &lt;linear-color-stop&gt;
-  and &lt;linear-color-stop&gt; = &lt;color&gt; [ &lt;color-stop-length&gt; ]?
-  and &lt;color-stop-length&gt; = [ &lt;percentage&gt; | &lt;length&gt; ]{1,2}
-  and &lt;color-hint&gt; = [ &lt;percentage&gt; | &lt;length&gt; ]
-</pre>
-
-<h2 id="Examples" name="Examples">例</h2>
-
-<h3 id="Zebra_stripes" name="Zebra_stripes">縞模様</h3>
-
-<div class="hidden">
-<pre class="brush: css notranslate">body {
-  width: 100vw;
-  height: 100vh;
-}</pre>
-</div>
-
-<pre class="brush: css notranslate">body {
-  background-image: repeating-linear-gradient(-45deg,
-      transparent,
-      transparent 20px,
-      black 20px,
-      black 40px);
-  /* 複数の色経由点の位置 */
-  background-image: repeating-linear-gradient(-45deg,
-      transparent 0 20px,
-      black 20px 40px);
-}
-</pre>
-
-<p>{{EmbedLiveSample('Zebra_stripes', 120, 120)}}</p>
-
-<h3 id="Ten_repeating_horizontal_bars" name="Ten_repeating_horizontal_bars">10回繰り返す水平線</h3>
-
-<div class="hidden">
-<pre class="brush: css notranslate">body {
-  width: 100vw;
-  height: 100vh;
-}</pre>
-</div>
-
-<pre class="brush: css notranslate">body {
-  background-image: repeating-linear-gradient(to bottom,
-      rgb(26,198,204),
-      rgb(26,198,204) 7%,
-      rgb(100,100,100) 10%);
-}
-</pre>
-
-<p>{{EmbedLiveSample('Ten_repeating_horizontal_bars', 120, 120)}}</p>
-
-<p>最後の色経由点が10%であり、グラデーションが垂直なので、反復グラデーション内の各グラデーションは10%の高さになり、10本の水平線に相当します。</p>
-
-<div class="note">
-<p><strong>メモ:</strong> 他の例は <a href="/ja/docs/Web/CSS/CSS_Images/Using_CSS_gradients">CSS グラデーションの使用</a>を参照してください。</p>
-</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('CSS3 Images', '#repeating-gradients', 'repeating-linear-gradient()')}}</td>
-   <td>{{Spec2('CSS3 Images')}}</td>
-   <td>初回定義</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
-
-<div>{{Compat("css.types.image.gradient.repeating-linear-gradient")}}</div>
-
-<h2 id="See_also" name="See_also">関連情報</h2>
-
-<ul>
- <li><a href="/en-US/docs/Web/CSS/CSS_Images/Using_CSS_gradients">CSS グラデーションの使用</a></li>
- <li>他のグラデーション関数: {{cssxref("linear-gradient")}}, {{cssxref("radial-gradient")}}, {{cssxref("repeating-radial-gradient")}}, {{cssxref("conic-gradient")}}, {{cssxref("repeating-conic-gradient")}}</li>
- <li>{{cssxref("&lt;image&gt;")}}</li>
- <li>{{cssxref("_image","image()")}}</li>
- <li>{{cssxref("element()")}}</li>
- <li>{{cssxref("image-set","image-set()")}}</li>
- <li>{{cssxref("cross-fade")}}</li>
-</ul>
diff --git a/files/ja/orphaned/web/css/repeating-radial-gradient()/index.html b/files/ja/orphaned/web/css/repeating-radial-gradient()/index.html
deleted file mode 100644
index a28cc76903..0000000000
--- a/files/ja/orphaned/web/css/repeating-radial-gradient()/index.html
+++ /dev/null
@@ -1,185 +0,0 @@
----
-title: repeating-radial-gradient()
-slug: orphaned/Web/CSS/repeating-radial-gradient()
-tags:
-  - CSS
-  - CSS 画像
-  - CSS 関数
-  - Reference
-  - ウェブ
-  - グラデーション
-  - グラフィック
-  - レイアウト
-translation_of: Web/CSS/repeating-radial-gradient()
-original_slug: Web/CSS/repeating-radial-gradient()
----
-<div>{{CSSRef}}</div>
-
-<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>repeating-radial-gradient()</code></strong> 関数は、原点から広がり繰り返すグラデーションから成る画像を生成します。 {{cssxref("radial-gradient")}} と似ており、同じ引数を取りますが、 {{cssxref("repeating-linear-gradient")}} と同様にすべての方向に色経由点を無限に繰り返してコンテナー全体を埋めます。関数の返値は {{cssxref("&lt;gradient&gt;")}} データ型のオブジェクトであり、これは {{cssxref("&lt;image&gt;")}} の特殊型です。</p>
-
-<div>{{EmbedInteractiveExample("pages/css/function-repeating-radial-gradient.html")}}</div>
-
-<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>
-
-<p>それぞれの繰り返しにおいて、色経由点の位置は基本的な放射グラデーションの寸法 (最初と最後の色経由点の間の距離) の倍数だけずらしたものになります。この結果、グラデーションの最初と最後の色は常に隣り合わせになります。二つが異なる色であれば、視覚的に明確な変わり目ができるので、最初の色を最後の色として繰り返すことで緩和できます。</p>
-
-<p>他のグラデーションと同じく、放射反復グラデーションも<a href="/ja/docs/CSS/image#no_intrinsic">固有の寸法を持ちません</a>。つまり、本来の寸法も優先される寸法も、優先されるアスペクト比も持たないということです。実際の寸法は、適用先の要素の寸法と一致します。</p>
-
-<p><code>&lt;gradient&gt;</code> は <code>&lt;image&gt;</code> データ型に属するため、 <code>&lt;image&gt;</code> が使用できるところでしか使用できません。このため、 <code>repeating-radial-gradient()</code> は {{cssxref("background-color")}} や、その他の {{cssxref("&lt;color&gt;")}} データ型を使用するプロパティでは動作しません。</p>
-
-<h2 id="Syntax" name="Syntax">構文</h2>
-
-<pre class="brush: css no-line-numbers notranslate">/* コンテナーの中央からのグラデーションで、
-   赤で始まり、青に変化し、緑で終わり、
-   それぞれ 30px ごとに色が繰り返される */
-repeating-radial-gradient(circle at center, red 0, blue, green 30px);
-
-/* 左上の角付近の楕円形のグラデーションで、
-   赤で始まり、緑に変化し、また戻り、
-   中央と右下の角の間で5回繰り返され、
-   中央と左上の角の間は1回だけ */
-repeating-radial-gradient(farthest-corner at 20% 20%, red 0, green, red 20%);
-</pre>
-
-<h3 id="Values" name="Values">値</h3>
-
-<dl>
- <dt>{{cssxref("&lt;position&gt;")}}</dt>
- <dd>グラデーションの位置で、 {{cssxref("background-position")}} や {{cssxref("transform-origin")}} と同じ方法で解釈されます。指定されなかった場合、既定値は <code>center</code>です。</dd>
- <dt><code>&lt;shape&gt;</code></dt>
- <dd>グラデーションの形状です。 <code>circle</code> (グラデーションの形状が一定の半径の円の意味) か <code>ellipse</code> (軸に沿った楕円の意味) のいずれかです。指定されなかった場合、既定値は <code>ellipse</code> です。</dd>
- <dt><code>&lt;extent-keyword&gt;</code></dt>
- <dd>終端の形状の大きさを指定するキーワードです。利用可能な値は次の通りです。</dd>
- <dd>
- <table class="standard-table">
-  <tbody>
-   <tr>
-    <th>キーワード</th>
-    <th>説明</th>
-   </tr>
-   <tr>
-    <td><code>closest-side</code></td>
-    <td>グラデーションの終端の形状は、中心から最も近いボックスの辺に (circle の場合) または中心から最も近い縦の辺と横の辺に (ellipse の場合) 内接します。</td>
-   </tr>
-   <tr>
-    <td><code>closest-corner</code></td>
-    <td>グラデーションの終端の形状は、ボックスの中心から最も近い頂点に接するように大きさが調整されます。</td>
-   </tr>
-   <tr>
-    <td><code>farthest-side</code></td>
-    <td><code>closest-side</code> と同様ですが、終端の形状がその中心から最も遠い辺 (または縦と横の辺) に接するように大きさが調整される点が異なります。</td>
-   </tr>
-   <tr>
-    <td><code>farthest-corner</code></td>
-    <td>グラデーションの終端の形状は、ボックスの中心から最も遠い頂点に接するように大きさが調整されます。</td>
-   </tr>
-  </tbody>
- </table>
-
- <div class="note">
- <p><strong>メモ:</strong> この関数の初期の実装では、他のキーワード (<code>cover</code> および <code>contain</code>) をそれぞれ標準の <code>farthest-corner</code> および <code>closest-side</code> の別名として含めていました。実装によってはすでに古い形を外しているので、標準的なキーワードのみを使用してください。</p>
- </div>
- </dd>
- <dt><code>&lt;color-stop&gt;</code></dt>
- <dd>色経由点の {{cssxref("&lt;color&gt;")}} 値と、それに続く省略可能な経由位置 (グラデーション軸沿いの {{cssxref("&lt;percentage&gt;")}} または {{cssxref("&lt;length&gt;")}}) です。 percentage が <code>0%</code>、または length が <code>0</code> の場合は、グラデーションの中心を表します。 <code>100%</code> は終端の形状と仮想グラデーション光の交点を表します。その間のパーセント値は仮想グラデーション光における直線的な位置です。</dd>
-</dl>
-
-<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
-
-<pre class="syntaxbox notranslate">repeating-radial-gradient(
-       [[ circle  || <a href="/ja/docs/CSS/length">&lt;length&gt;</a> ]                     [at <a href="/ja/docs/Web/CSS/position_value">&lt;position&gt;</a>]? , |
-        [ ellipse || [<a href="/ja/docs/CSS/length">&lt;length&gt;</a> | <a href="/ja/docs/CSS/percentage">&lt;percentage&gt;</a> ]{2}] [at <a href="/ja/docs/Web/CSS/position_value">&lt;position&gt;</a>]? , |
-        [[ circle | ellipse ] || &lt;extent-keyword&gt; ] [at <a href="/ja/docs/Web/CSS/position_value">&lt;position&gt;</a>]? , |
-                                                     at <a href="/ja/docs/Web/CSS/position_value">&lt;position&gt;</a>   ,    &lt;color-stop-list&gt; )
-        \---------------------------------------------------------------/\-----------------/
-                  Contour, size and position of the ending shape          List of color stops
-
-where &lt;extent-keyword&gt; = closest-corner | closest-side | farthest-corner | farthest-side
-   and &lt;color-stop-list&gt; = [ &lt;linear-color-stop&gt; [, &lt;color-hint&gt;? ]? ]#, &lt;linear-color-stop&gt;
-   and &lt;linear-color-stop&gt; = &lt;color&gt; [ &lt;color-stop-length&gt; ]?
-   and &lt;color-stop-length&gt; = [ &lt;percentage&gt; | &lt;length&gt; ]{1,2}
-   and &lt;color-hint&gt; = [ &lt;percentage&gt; | &lt;length&gt; ]</pre>
-
-<h2 id="Examples" name="Examples">例</h2>
-
-<h3 id="Black_and_white_gradient" name="Black_and_white_gradient">白と黒のグラデーション</h3>
-
-<div class="hidden">
-<pre class="brush: html notranslate">&lt;div class="radial-gradient"&gt;&lt;/div&gt;
-</pre>
-
-<pre class="brush: css notranslate">.radial-gradient {
-  width: 120px;
-  height: 120px;
-}</pre>
-</div>
-
-<pre class="brush: css notranslate">.radial-gradient {
-  background: repeating-radial-gradient(black, black 5px, white 5px, white 10px);
-}
-</pre>
-
-<p>{{EmbedLiveSample('Black_and_white_gradient', 120, 120)}}</p>
-
-<h3 id="Farthest-corner" name="Farthest-corner">最も遠い角</h3>
-
-<div class="hidden">
-<pre class="brush: html notranslate">&lt;div class="radial-gradient"&gt;&lt;/div&gt;
-</pre>
-
-<pre class="brush: css notranslate">.radial-gradient {
-  width: 240px;
-  height: 120px;
-}</pre>
-</div>
-
-<pre class="brush: css notranslate">.radial-gradient {
-  background: repeating-radial-gradient(ellipse farthest-corner at 20% 20%,
-      red, black 5%, blue 5%, green 10%);
-  background: repeating-radial-gradient(ellipse farthest-corner at 20% 20%,
-      red 0 5%, green 5% 10%);
-}
-</pre>
-
-<p>{{EmbedLiveSample('Farthest-corner', 120, 120)}}</p>
-
-<p>楕円のグラデーションは左上から20％の位置が中心となり、中心と最も遠い角 (右下の角) の間で10回繰り返します。色経由で複数の位置に対応しているブラウザーでは、赤と緑の縞模様の楕円が表示されます。この構文にまだ対応していないブラウザーでは、赤から黒、それから青から緑へと変化するグラデーションが表示されます。</p>
-
-<div class="note">
-<p><strong>メモ:</strong> 他の例は <a href="/ja/docs/Web/CSS/CSS_Images/Using_CSS_gradients">CSS グラデーションの使用</a> をご覧ください。</p>
-</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('CSS3 Images', '#repeating-gradients', 'repeating-radial-gradient()')}}</td>
-   <td>{{Spec2('CSS3 Images')}}</td>
-   <td>初回定義</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
-
-<div>{{Compat("css.types.image.gradient.repeating-radial-gradient")}}</div>
-
-<h2 id="See_also" name="See_also">関連情報</h2>
-
-<ul>
- <li><a href="/ja/docs/Web/CSS/CSS_Images/Using_CSS_gradients">CSS グラデーションの使用</a></li>
- <li>他のグラデーション関数: {{cssxref("radial-gradient")}}, {{cssxref("linear-gradient")}}, {{cssxref("repeating-linear-gradient")}}, {{cssxref("conic-gradient")}}, {{cssxref("repeating-conic-gradient")}}</li>
- <li>{{cssxref("&lt;image&gt;")}}</li>
- <li>{{cssxref("_image","image()")}}</li>
- <li>{{cssxref("element()")}}</li>
- <li>{{cssxref("image-set","image-set()")}}</li>
- <li>{{cssxref("cross-fade")}}</li>
-</ul>
diff --git a/files/ja/orphaned/web/guide/html/html5/constraint_validation/index.html b/files/ja/orphaned/web/guide/html/html5/constraint_validation/index.html
deleted file mode 100644
index a392493e50..0000000000
--- a/files/ja/orphaned/web/guide/html/html5/constraint_validation/index.html
+++ /dev/null
@@ -1,330 +0,0 @@
----
-title: 制約検証
-slug: orphaned/Web/Guide/HTML/HTML5/Constraint_validation
-tags:
-  - CSS
-  - Guide
-  - HTML5
-  - NeedsContent
-  - Selectors
-translation_of: Web/Guide/HTML/HTML5/Constraint_validation
-original_slug: Web/Guide/HTML/HTML5/Constraint_validation
----
-<p>ウェブフォームの作成は常に複雑な作業でした。フォーム自体をマークアップすること自体は簡単ですが、それぞれの入力欄が妥当で一貫しているかどうかをチェックすることはもっと難しく、問題をユーザーに伝えることは頭痛がするかもしれません。<a href="/ja/docs/Web/Guide/HTML/HTML5">HTML5</a> では、フォームに新しい仕組みが導入されました。{{ HTMLElement("input") }} 要素に意味を持つ新しい型と、クライアント側でフォームの内容をチェックする作業を簡単にする<em>制約検証</em>が追加されました。基本的な、よくある制約は、JavaScript を必要とせずに、新しい属性を設定することでチェックできます。もっと複雑な制約は<a href="/ja/docs/Web/API/Constraint_validation">制約検証 API</a> を使用して検査することができます。</p>
-
-<p>これらの概念の基本的な入門 (サンプル付き) は、<a href="/ja/docs/Learn/HTML/Forms/Form_validation">フォーム検証チュートリアル</a>をご覧ください。</p>
-
-<div class="note"><strong>メモ:</strong> HTML5 の制約検証は、<em>サーバー側</em>での検証の必要性をなくす訳ではありません。不正なフォームのリクエストは減少することが期待されるものの、不正なリクエストはまだ互換性のないブラウザー（例えば、HTML5 や JavaScript に対応していないブラウザー）から送られたり、ウェブアプリケーションをだまそうとする悪意のある人から送られたりする可能性があります。従って、HTML4 の時と同様、クライアント側で行われている検証と一貫性のある方法で、サーバー側でも入力の制約を検証する必要があります。</div>
-
-<h2 id="Intrinsic_and_basic_constraints" name="Intrinsic_and_basic_constraints">組込みの基本的な制約</h2>
-
-<p>HTML5 では、基本的な制約は 2通りの方法で定義されます。</p>
-
-<ul>
- <li>{{ HTMLElement("input") }} 要素の {{ htmlattrxref("type", "input") }} 属性に意味的に最も適切な値を選択することで、例えば <code>email</code> を選択することで、値が妥当なメールアドレスであるかどうかをチェックする制約が自動的に作成されます。</li>
- <li>検証関連属性を設定することで、基本的な制約を簡単な方法で、JavaScript の必要なく記述できます。</li>
-</ul>
-
-<h3 id="意味を持つ入力型">意味を持つ入力型</h3>
-
-<p>{{ htmlattrxref("type", "input") }} 属性の組込み制約は次の通りです。</p>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">入力型</th>
-   <th scope="col">制約の説明</th>
-   <th scope="col">関連付けられた違反</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><code><a href="/ja/docs/Web/HTML/Element/input/url">&lt;input type="URL"&gt;</a></code></td>
-   <td>値は絶対 <a href="/ja/docs/Learn/Common_questions/What_is_a_URL">URL</a> であり、<a href="https://url.spec.whatwg.org/">URL Living Standard</a> で定義された通りでなければなりません。</td>
-   <td><strong><a href="/ja/docs/Web/API/ValidityState/typeMismatch">TypeMismatch</a></strong> 制約違反</td>
-  </tr>
-  <tr>
-   <td><code><a href="/ja/docs/Web/HTML/Element/input/email">&lt;input type="email"&gt;</a></code></td>
-   <td>値は統語的に妥当なメールアドレス、ふつうは <code><var>username</var>@<var>hostname</var>.<var>tld</var></code> の書式でなければなりません。</td>
-   <td><strong><a href="/ja/docs/Web/API/ValidityState/typeMismatch">TypeMismatch</a></strong> 制約違反</td>
-  </tr>
- </tbody>
-</table>
-
-<p>これらの入力型のどちらでも、{{ htmlattrxref("multiple", "input") }} 属性が設定されていたら、この入力欄にカンマ区切りのリストで複数の値を設定することができます。これらの中でここで書かれた条件に満足しないものがある場合、<strong>Type mismatch</strong> 制約違反が発生します。</p>
-
-<p>なお、ほとんどの入力型には組込み制約がありません。制約検証によって防ぐことができたり、既定で不正な値を妥当な値に変換する無害化アルゴリズムがあったりするためです。</p>
-
-<h3 id="Validation-related_attributes" name="Validation-related_attributes">検証関連属性</h3>
-
-<p>上記で述べた <code>type</code> 属性に加えて、下記の要素が基本的な制約を記述するのに使われます。</p>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">属性</th>
-   <th scope="col">属性をサポートする入力タイプ</th>
-   <th scope="col">とりうる値</th>
-   <th scope="col">制約の説明</th>
-   <th scope="col">関連する違反</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><code><a href="/ja/docs/Web/HTML/Attributes/pattern">pattern</a></code></td>
-   <td><code>text</code>, <code>search</code>, <code>url</code>, <code>tel</code>, <code>email</code>, <code>password</code></td>
-   <td><a href="/ja/docs/Web/JavaScript/Guide/Regular_Expressions">JavaScript 正規表現</a> (<a class="external" href="http://www.ecma-international.org/publications/standards/Ecma-262.htm">ECMAScript 5</a> <code>global</code>, <code>ignoreCase</code> と <code>multiline</code> フラグが<em>無効で</em>コンパイルされたもの)</td>
-   <td>値はパターンに一致する必要があります。</td>
-   <td><code><strong><a href="/ja/docs/Web/API/ValidityState/patternMismatch">patternMismatch</a></strong></code> 制約違反</td>
-  </tr>
-  <tr>
-   <td rowspan="3"><code><a href="/ja/docs/Web/HTML/Attributes/min">min</a></code></td>
-   <td><code>range</code>, <code>number</code></td>
-   <td>有効な数値</td>
-   <td rowspan="3">値以上であること。</td>
-   <td rowspan="3"><strong><code><a href="/ja/docs/Web/API/ValidityState/rangeUnderflow">rangeUnderflow</a></code></strong> 制約違反</td>
-  </tr>
-  <tr>
-   <td><code>date</code>, <code>month</code>, <code>week</code></td>
-   <td>有効な日付</td>
-  </tr>
-  <tr>
-   <td><code>datetime</code>, <code>datetime-local</code>, <code>time</code></td>
-   <td>有効な日付と時刻</td>
-  </tr>
-  <tr>
-   <td rowspan="3"><code><a href="/ja/docs/Web/HTML/Attributes/max">max</a></code></td>
-   <td><code>range</code>, <code>number</code></td>
-   <td>有効な数値</td>
-   <td rowspan="3">値以下であること。</td>
-   <td rowspan="3"><strong><code><a href="/ja/docs/Web/API/ValidityState/rangeOverflow">rangeOverflow</a></code></strong> 制約違反</td>
-  </tr>
-  <tr>
-   <td><code>date</code>, <code>month</code>, <code>week</code></td>
-   <td>有効な日付</td>
-  </tr>
-  <tr>
-   <td><code>datetime</code>, <code>datetime-local</code>, <code>time</code></td>
-   <td>有効な日付と時刻</td>
-  </tr>
-  <tr>
-   <td><code><a href="/ja/docs/Web/HTML/Attributes/required">required</a></code></td>
-   <td><code>text</code>, <code>search</code>, <code>url</code>, <code>tel</code>, <code>email</code>, <code>password</code>, <code>date</code>, <code>datetime</code>, <code>datetime-local</code>, <code>month</code>, <code>week</code>, <code>time</code>, <code>number</code>, <code>checkbox</code>, <code>radio</code>, <code>file</code>; {{ HTMLElement("select") }} と {{ HTMLElement("textarea") }} 要素にも。</td>
-   <td><em>none</em> Boolean 属性のため: 存在すれば <em>true</em>, 存在しなければ <em>false</em></td>
-   <td>値は必須 (セットされた場合)。</td>
-   <td><strong><code><a href="/ja/docs/Web/API/ValidityState/valueMissing">valueMissing</a></code></strong> 制約違反</td>
-  </tr>
-  <tr>
-   <td rowspan="5"><code><a href="/ja/docs/Web/HTML/Attributes/step">step</a></code></td>
-   <td><code>date</code></td>
-   <td>日の整数値</td>
-   <td rowspan="5">step がリテラル値 <code>any</code> にセットされていない場合、値は <strong>min</strong> + step の整数倍</td>
-   <td rowspan="5"><strong><code><a href="/ja/docs/Web/API/ValidityState/stepMismatch">stepMismatch</a></code></strong> 制約違反</td>
-  </tr>
-  <tr>
-   <td><code>month</code></td>
-   <td>月の整数値</td>
-  </tr>
-  <tr>
-   <td><code>week</code></td>
-   <td>週の整数値</td>
-  </tr>
-  <tr>
-   <td><code>datetime</code>, <code>datetime-local</code>, <code>time</code></td>
-   <td>秒の整数値</td>
-  </tr>
-  <tr>
-   <td><code>range</code>, <code>number</code></td>
-   <td>整数値</td>
-  </tr>
-  <tr>
-   <td><code><a href="/ja/docs/Web/HTML/Attributes/minlength">minlength</a></code></td>
-   <td><code>text</code>, <code>search</code>, <code>url</code>, <code>tel</code>, <code>email</code>, <code>password</code>; と {{ HTMLElement("textarea") }} 要素</td>
-   <td>整数長</td>
-   <td>文字列数 (code points) は、空でない場合は属性値より少なくならない。{{ HTMLElement("textarea") }}では改行はすべて 1 つの文字に正規化される (CRLF の組と対象的に)。</td>
-   <td><strong><code><a href="/ja/docs/Web/API/ValidityState/tooShort">tooShort</a></code></strong> 制約違反</td>
-  </tr>
-  <tr>
-   <td><code><a href="/ja/docs/Web/HTML/Attributes/maxlength">maxlength</a></code></td>
-   <td><code>text</code>, <code>search</code>, <code>url</code>, <code>tel</code>, <code>email</code>, <code>password</code>; と {{ HTMLElement("textarea") }} 要素</td>
-   <td>整数長</td>
-   <td>文字列数 (code points) は属性値を超えない。</td>
-   <td><strong><code><a href="/ja/docs/Web/API/ValidityState/tooLong">tooLong</a></code></strong> 制約違反</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Constraint_validation_process" name="Constraint_validation_process">制約検証プロセス</h2>
-
-<p>Constraint validation is done through the Constraint Validation API either on a single form element or at the form level, on the {{ HTMLElement("form") }} element itself. The constraint validation is done in the following ways:</p>
-
-<ul>
- <li>By a call to the <code>checkValidity()</code> or <code>reportValidity()</code> method of a form-associated DOM interface, (<code><a href="/ja/docs/Web/API/HTMLInputElement">HTMLInputElement</a></code>, <code><a href="/ja/docs/Web/API/HTMLSelectElement">HTMLSelectElement</a></code>, <code><a href="/ja/docs/Web/API/HTMLButtonElement">HTMLButtonElement</a></code>, <code><a href="/ja/docs/Web/API/HTMLOutputElement">HTMLOutputElement</a></code> or <code><a href="/ja/docs/Web/API/HTMLTextAreaElement">HTMLTextAreaElement</a></code>), which evaluates the constraints only on this element, allowing a script to get this information. The <code>checkValidity()</code> method returns a Boolean indicating whether the element's value passes its constraints. (This is typically done by the user-agent when determining which of the CSS pseudo-classes, {{ Cssxref(":valid") }} or {{ Cssxref(":invalid") }}, applies.) In contrast, the <code>reportValidity()</code> method reports any constraint failures to the user.</li>
- <li>By a call to the <code>checkValidity()</code> or <code>reportValidity()</code> method on the <code><a href="/ja/docs/Web/API/HTMLFormElement">HTMLFormElement</a></code> interface.</li>
- <li>By submitting the form itself.</li>
-</ul>
-
-<p>Calling <code>checkValidity()</code> is called <em>statically</em> validating the constraints, while calling <code>reportValidity()</code> or submitting the form is called <em>interactively</em> validating the constraints.</p>
-
-<div class="note"><strong>Note: </strong>
-
-<ul>
- <li>If the {{ htmlattrxref("novalidate", "form") }} attribute is set on the {{ HTMLElement("form") }} element, interactive validation of the constraints doesn't happen.</li>
- <li>Calling the <code>submit()</code> method on the <code><a href="/en/DOM/HTMLFormElement">HTMLFormElement</a></code> interface doesn't trigger a constraint validation. In other words, this method sends the form data to the server even if doesn't satisfy the constraints. Call the <code>click()</code> method on a submit button instead.</li>
-</ul>
-</div>
-
-<h2 id="Complex_constraints_using_HTML5_Constraint_API" name="Complex_constraints_using_HTML5_Constraint_API">HTML5 制約 API を使用した複雑な制約</h2>
-
-<p>Using JavaScript and the Constraint API, it is possible to implement more complex constraints, 例えば、constraints combining several fields, or constraints involving complex calculations.</p>
-
-<p>Basically, the idea is to trigger JavaScript on some form field event (like <strong>onchange</strong>) to calculate whether the constraint is violated, and then to use the method <code><em>field</em>.setCustomValidity()</code> to set the result of the validation: an empty string means the constraint is satisfied, and any other string means there is an error and this string is the error message to display to the user.</p>
-
-<h3 id="Constraint_combining_several_fields_Postal_code_validation" name="Constraint_combining_several_fields_Postal_code_validation">Constraint combining several fields: Postal code validation</h3>
-
-<p>The postal code format varies from one country to another. Not only do most countries allow an optional prefix with the country code (like <code>D-</code> in Germany, <code>F- </code> in France or Switzerland), but some countries have postal codes with only a fixed number of digits; others, like the UK, have more complex structures, allowing letters at some specific positions.</p>
-
-<div class="note">
-<p><strong>注:</strong> This is not a comprehensive postal code validation library, but rather a demonstration of the key concepts.</p>
-</div>
-
-<p>As an example, we will add a script checking the constraint validation for this simple form:</p>
-
-<pre class="brush: html notranslate">&lt;form&gt;
-    &lt;label for="ZIP"&gt;ZIP : &lt;/label&gt;
-    &lt;input type="text" id="ZIP"&gt;
-    &lt;label for="Country"&gt;Country : &lt;/label&gt;
-    &lt;select id="Country"&gt;
-      &lt;option value="ch"&gt;Switzerland&lt;/option&gt;
-      &lt;option value="fr"&gt;France&lt;/option&gt;
-      &lt;option value="de"&gt;Germany&lt;/option&gt;
-      &lt;option value="nl"&gt;The Netherlands&lt;/option&gt;
-    &lt;/select&gt;
-    &lt;input type="submit" value="Validate"&gt;
-&lt;/form&gt;</pre>
-
-<p>This displays the following form:</p>
-
-<p>{{EmbedLiveSample("Constraint_combining_several_fields_Postal_code_validation")}}</p>
-
-<p>First, we write a function checking the constraint itself:</p>
-
-<pre class="brush: js notranslate">function checkZIP() {
-  // For each country, defines the pattern that the ZIP has to follow
-  var constraints = {
-    ch : [ '^(CH-)?\\d{4}$', "Switzerland ZIPs must have exactly 4 digits: e.g. CH-1950 or 1950" ],
-    fr : [ '^(F-)?\\d{5}$' , "France ZIPs must have exactly 5 digits: e.g. F-75012 or 75012" ],
-    de : [ '^(D-)?\\d{5}$' , "Germany ZIPs must have exactly 5 digits: e.g. D-12345 or 12345" ],
-    nl : [ '^(NL-)?\\d{4}\\s*([A-RT-Z][A-Z]|S[BCE-RT-Z])$',
-                    "Nederland ZIPs must have exactly 4 digits, followed by 2 letters except SA, SD and SS" ]
-  };
-
-  // Read the country id
-  var country = document.getElementById("Country").value;
-
-  // Get the NPA field
-  var ZIPField = document.getElementById("ZIP");
-
-  // Build the constraint checker
-  var constraint = new RegExp(constraints[country][0], "");
-    console.log(constraint);
-
-
-  // Check it!
-  if (constraint.test(ZIPField.value)) {
-    // The ZIP follows the constraint, we use the ConstraintAPI to tell it
-    ZIPField.setCustomValidity("");
-  }
-  else {
-    // The ZIP doesn't follow the constraint, we use the ConstraintAPI to
-    // give a message about the format required for this country
-    ZIPField.setCustomValidity(constraints[country][1]);
-  }
-}
-</pre>
-
-<p>Then we link it to the <strong>onchange</strong> event for the {{ HTMLElement("select") }} and the <strong>oninput</strong> event for the {{ HTMLElement("input") }}:</p>
-
-<pre class="brush: js notranslate">window.onload = function () {
-    document.getElementById("Country").onchange = checkZIP;
-    document.getElementById("ZIP").oninput = checkZIP;
-}</pre>
-
-<p>You can see a <a href="/@api/deki/files/4744/=constraint.html">live example</a> of the postal code validation.</p>
-
-<h3 id="Limiting_the_size_of_a_file_before_its_upload" name="Limiting_the_size_of_a_file_before_its_upload">アップロード前のファイルサイズの制限</h3>
-
-<p>Another common constraint is to limit the size of a file to be uploaded. Checking this on the client side before the file is transmitted to the server requires combining the Constraint Validation API, and especially the <code>field.setCustomValidity()</code> method, with another JavaScript API, here the File API.</p>
-
-<p>Here is the HTML part:</p>
-
-<pre class="brush: html notranslate">&lt;label for="FS"&gt;Select a file smaller than 75 kB : &lt;/label&gt;
-&lt;input type="file" id="FS"&gt;</pre>
-
-<p>This displays:</p>
-
-<p>{{EmbedLiveSample("Limiting_the_size_of_a_file_before_its_upload")}}</p>
-
-<p>The JavaScript reads the file selected, uses the <code>File.size()</code> method to get its size, compares it to the (hard coded) limit, and calls the Constraint API to inform the browser if there is a violation:</p>
-
-<pre class="brush: js notranslate">function checkFileSize() {
-  var FS = document.getElementById("FS");
-  var files = FS.files;
-
-  // If there is (at least) one file selected
-  if (files.length &gt; 0) {
-     if (files[0].size &gt; 75 * 1024) { // Check the constraint
-       FS.setCustomValidity("The selected file must not be larger than 75 kB");
-       return;
-     }
-  }
-  // No custom constraint violation
-  FS.setCustomValidity("");
-}</pre>
-
-<p>Finally we hook the method with the correct event:</p>
-
-<pre class="brush: js notranslate">window.onload = function () {
-  document.getElementById("FS").onchange = checkFileSize;
-}</pre>
-
-<p>You can see a <a href="/@api/deki/files/4745/=fileconstraint.html">live example</a> of the File size constraint validation.</p>
-
-<h2 id="Visual_styling_of_constraint_validation" name="Visual_styling_of_constraint_validation">制約検証における表示の整形</h2>
-
-<p>Apart from setting constraints, web developers want to control what messages are displayed to the users and how they are styled.</p>
-
-<h3 id="Controlling_the_look_of_elements" name="Controlling_the_look_of_elements">要素の外見の制御</h3>
-
-<p>The look of elements can be controlled via CSS pseudo-classes.</p>
-
-<h4 id="required_and_optional_CSS_pseudo-classes" name="required_and_optional_CSS_pseudo-classes">CSS の :required および :optional 疑似クラス</h4>
-
-<p>The {{cssxref(':required')}} and {{cssxref(':optional')}} <a href="/ja/docs/Web/CSS/Pseudo-classes">pseudo-classes</a> allow writing selectors that match form elements that have the {{ htmlattrxref("required") }} attribute, or that don't have it.</p>
-
-<h4 id="placeholder-shown_CSS_pseudo-class" name="placeholder-shown_CSS_pseudo-class">:placeholder-shown CSS pseudo-class</h4>
-
-<p>See {{cssxref(':placeholder-shown')}}</p>
-
-<h4 id="valid_invalid_CSS_pseudo-classes" name="valid_invalid_CSS_pseudo-classes">CSS の :valid :invalid 疑似クラス</h4>
-
-<p>The {{cssxref(':valid')}} and {{cssxref(':invalid')}} <a href="/ja/docs/Web/CSS/Pseudo-classes">pseudo-classes</a> are used to represent &lt;input&gt; elements whose content validates and fails to validate respectively according to the input's type setting. These classes allow the user to style valid or invalid form elements to make it easier to identify elements that are either formatted correctly or incorrectly.</p>
-
-<h3 id="Controlling_the_text_of_constraint_violation" name="Controlling_the_text_of_constraint_violation">制約違反の文字列の制御</h3>
-
-<p>The following items can help with controlling the text of a constraint violation:</p>
-
-<ul>
- <li><a href="/ja/docs/Web/API/Constraint_validation#element.setCustomValidity(message)">element.setCustomValidity(message)</a> method on the following elements:
-
-  <ul>
-   <li>{{HTMLElement("fieldset")}}. Note: Setting a custom validity message on fieldset elements will not prevent form submission in most browsers.</li>
-   <li>{{HTMLElement("input")}}</li>
-   <li>{{HTMLElement("output")}}</li>
-   <li>{{HTMLElement("select")}}</li>
-   <li>Submit buttons (created with either a {{HTMLElement("button")}} element with the <code>submit</code> type, or an <code>input</code> element with the {{HTMLElement("input/submit", "submit")}} type. Other types of buttons do not participate in constraint validation.</li>
-   <li>{{HTMLElement("textarea")}}</li>
-  </ul>
- </li>
- <li>The <a href="/ja/docs/Web/API/ValidityState"><code>ValidityState</code></a> interface describes the object returned by the <a href="/ja/docs/Web/API/Constraint_validation#validity">validity</a> property of the element types listed above. It represents various ways that an entered value can be invalid. Together, they help explain why an element's value fails to validate, if it's not valid.</li>
-</ul>
diff --git a/files/ja/orphaned/web/guide/html/html5/introduction_to_html5/index.html b/files/ja/orphaned/web/guide/html/html5/introduction_to_html5/index.html
index 861044c138..c1cdd1d6b5 100644
--- a/files/ja/orphaned/web/guide/html/html5/introduction_to_html5/index.html
+++ b/files/ja/orphaned/web/guide/html/html5/introduction_to_html5/index.html
@@ -9,7 +9,7 @@ original_slug: Web/Guide/HTML/HTML5/Introduction_to_HTML5
 ---
 <p><a class="external" href="https://www.whatwg.org/specs/web-apps/current-work/">HTML5</a> は、HTML 標準の最も新しいバージョンです。HTML5 によって、リッチメディアのサポートだけでなく、ユーザ、彼らのローカルデータ、サーバの間でより簡単にかつ効果的にやり取りするための Web アプリケーションを作成するための拡張されたサポートを提供するための新機能も手に入れることができます。</p>
 
-<p>HTML5 はまだ策定段階にあるため、現在の仕様に対する変更は当然あり得ます。そのため、すべてのブラウザで HTML5 の機能のすべてがサポートされているわけではありません。ですが、Gecko (そしてその拡張である、Firefox) には、素晴らしいほどに、HTML5 の最初の段階のサポートが含まれており、さらなる機能のサポートに対する取り組みを続けています。Gecko は バージョン1.8.1 から HTML5 の機能をサポートし始めました。<a href="/ja/docs/orphaned/Web/Guide/HTML/HTML5" title="ja/HTML/HTML5">HTML5 のメインページ</a>に Gecko がサポートしている HTML5 の機能のリストがあります。複数ブラウザのサポート状況の詳細な情報については、<a class="external" href="http://caniuse.com/#cats=HTML5">CanIUse</a> ウェブサイトを参照してください。</p>
+<p>HTML5 はまだ策定段階にあるため、現在の仕様に対する変更は当然あり得ます。そのため、すべてのブラウザで HTML5 の機能のすべてがサポートされているわけではありません。ですが、Gecko (そしてその拡張である、Firefox) には、素晴らしいほどに、HTML5 の最初の段階のサポートが含まれており、さらなる機能のサポートに対する取り組みを続けています。Gecko は バージョン1.8.1 から HTML5 の機能をサポートし始めました。<a href="/ja/docs/orphaned/Web/Guide/HTML/HTML5">HTML5 のメインページ</a>に Gecko がサポートしている HTML5 の機能のリストがあります。複数ブラウザのサポート状況の詳細な情報については、<a class="external" href="http://caniuse.com/#cats=HTML5">CanIUse</a> ウェブサイトを参照してください。</p>
 
 <h2 id="The_HTML5_doctype">HTML5  の DOCTYPE</h2>
 
diff --git a/files/ja/orphaned/web/javascript/guide/class-based_vs._prototype-based_languages/index.html b/files/ja/orphaned/web/javascript/guide/class-based_vs._prototype-based_languages/index.html
deleted file mode 100644
index 23daae0e6b..0000000000
--- a/files/ja/orphaned/web/javascript/guide/class-based_vs._prototype-based_languages/index.html
+++ /dev/null
@@ -1,26 +0,0 @@
----
-title: Class-Based vs. Prototype-Based Languages
-slug: orphaned/Web/JavaScript/Guide/Class-Based_vs._Prototype-Based_Languages
-original_slug: Web/JavaScript/Guide/Class-Based_vs._Prototype-Based_Languages
----
-<h3 id=".E3.82.AF.E3.83.A9.E3.82.B9.E3.83.99.E3.83.BC.E3.82.B9.E8.A8.80.E8.AA.9E.E3.81.A8.E3.83.97.E3.83.AD.E3.83.88.E3.82.BF.E3.82.A4.E3.83.97.E3.83.99.E3.83.BC.E3.82.B9.E8.A8.80.E8.AA.9E" name=".E3.82.AF.E3.83.A9.E3.82.B9.E3.83.99.E3.83.BC.E3.82.B9.E8.A8.80.E8.AA.9E.E3.81.A8.E3.83.97.E3.83.AD.E3.83.88.E3.82.BF.E3.82.A4.E3.83.97.E3.83.99.E3.83.BC.E3.82.B9.E8.A8.80.E8.AA.9E">クラスベース言語とプロトタイプベース言語</h3>
-<p>Java や C++ といったクラスベースのオブジェクト指向言語はクラスとインスタンスという 2 つの異なる実体があるという概念に基づいています。</p>
-<ul> <li>クラスはあるオブジェクトの集合を特徴付けるすべてのプロパティ（Java ではメソッドとフィールドを、C++ ではメンバをプロパティと見なす）を定義する。クラスとはそれが表すオブジェクトの集合の特定のメンバではなく、抽象的なものである。例えば、Employee クラスで従業員すべてを含む集合を表す。</li> <li>一方、インスタンスはクラスを実例にしたものである。つまり、そのメンバの 1 つということである。例えば、Victoria は Employee クラスのインスタンスとなることができる。このクラスは特定の個人を従業者として表すものである。インスタンスはその親クラスのプロパティを正確に保持する（それに他ならない）。</li>
-</ul>
-<p>JavaScript のようなプロトタイプベース言語はこの区別がありません。単にオブジェクトがあるだけです。プロトタイプベース言語には原型的なオブジェクトという概念があります。このオブジェクトは新しいオブジェクトの初期プロパティを取得する元になるテンプレートとして使用されます。どのオブジェクトもそれ独自のプロパティを指定できます。オブジェクト作成時にも実行時にも可能です。さらに、どのオブジェクトも別のオブジェクトに対するプロトタイプとして関連付けることができます。2 つ目のオブジェクトが 1 つ目のオブジェクトのプロトタイプを共有するということもできます。</p>
-<h4 id=".E3.82.AF.E3.83.A9.E3.82.B9.E3.81.AE.E5.AE.9A.E7.BE.A9" name=".E3.82.AF.E3.83.A9.E3.82.B9.E3.81.AE.E5.AE.9A.E7.BE.A9">クラスの定義</h4>
-<p>クラスベース言語ではクラス定義ごとにクラスを定義します。定義では特殊なメソッドを指定してそのクラスのインスタンスを作成することができます。そのようなメソッドはコンストラクタと呼びます。コンストラクタメソッドはインスタンスのプロパティに対する初期値を指定することができます。また、作成時に他の適当な処理を実行することもできます。new 演算子をコンストラクタメソッドと一緒に用いることでクラスのインスタンスを作成できます。</p>
-<p>JavaScript は同様のモデルに従っていますが、コンストラクタと別になっているクラス定義がありません。その代わりに、プロパティと値からなる特定の初期的なセットを持つオブジェクトを作成するコンストラクタ関数を定義します。どの JavaScript 関数もコンストラクタとして使用できます。new 演算子をコンストラクタ関数とともに使用することで新しいオブジェクトを作成します。</p>
-<h4 id=".E3.82.B5.E3.83.96.E3.82.AF.E3.83.A9.E3.82.B9.E3.81.A8.E7.B6.99.E6.89.BF" name=".E3.82.B5.E3.83.96.E3.82.AF.E3.83.A9.E3.82.B9.E3.81.A8.E7.B6.99.E6.89.BF">サブクラスと継承</h4>
-<p>クラスベース言語ではクラス定義を通じてクラスの階層を作ります。クラス定義では新しいクラスがある既存のクラスのサブクラスになるように指定することができます。サブクラスはスーパークラスの全プロパティを継承します。さらに新しくプロパティを追加したり継承したものを変更することもできます。例えば、Employee クラスが name および dept プロパティのみを含んでおり、Manager は reports プロパティを追加する Employee のサブクラスであるとします。この場合、Manager クラスのインスタンスは name、dept、reports という 3 つのプロパティをすべて持つことになります。</p>
-<p>JavaScript では、原型的なオブジェクトをどのコンストラクタ関数にも結びつけることができるようにして継承を実装しています。そのため、全く同じような Employee と Manager の例を作成することができますが、使用する用語が若干異なります。まず、Employee コンストラクタ関数を定義します。これは name および dept プロパティを指定します。次に Manager コンストラクタ関数を定義します。これは reports プロパティを指定します。最後に新しい Employee オブジェクトを Manager コンストラクタ関数に対するプロトタイプとして代入します。そして新しい Manager を作成すると、このオブジェクトは Employee オブジェクトから name および dept プロパティを継承します。</p>
-<h4 id=".E3.83.97.E3.83.AD.E3.83.91.E3.83.86.E3.82.A3.E3.81.AE.E8.BF.BD.E5.8A.A0.E3.81.A8.E5.89.8A.E9.99.A4" name=".E3.83.97.E3.83.AD.E3.83.91.E3.83.86.E3.82.A3.E3.81.AE.E8.BF.BD.E5.8A.A0.E3.81.A8.E5.89.8A.E9.99.A4">プロパティの追加と削除</h4>
-<p>クラスベース言語では一般的にクラスをコンパイル時に生成し、コンパイル時または実行時にクラスのインスタンスを作成します。クラス定義後にそのクラスのプロパティの数や型を変更することはできません。しかし、JavaScript ではどんなオブジェクトでも実行時にプロパティを追加したり削除したりすることができます。あるオブジェクトのセットでプロトタイプとして使用されているオブジェクトにプロパティを追加すると、そのプロトタイプの使用元であるオブジェクトにも新しいプロパティが追加されます。</p>
-<h4 id=".E9.81.95.E3.81.84.E3.81.AE.E6.A6.82.E8.A6.81" name=".E9.81.95.E3.81.84.E3.81.AE.E6.A6.82.E8.A6.81">違いの概要</h4>
-<p>次の表でこれらの違いをいくつか短くまとめてみます。この章の残りで、JavaScript のコンストラクタとプロトタイプを用いてオブジェクト階層を作成することについての詳細を説明していきます。また、この方法が Java ではどう変わるかという比較もします。</p>
-<table class="fullwidth-table"> <tbody> <tr> <th>クラスベース (Java)</th> <th>プロトタイプベース (JavaScript)</th> </tr> <tr> <td>クラスとインスタンスは異なる実体である。</td> <td>すべてのオブジェクトはインスタンスである。</td> </tr> <tr> <td>クラス定義を用いてクラスを定義する。また、コンストラクタメソッドを用いてクラスをインスタンス化する。</td> <td>コンストラクタ関数を用いてオブジェクトのセットを定義し、作成する。</td> </tr> <tr> <td><code>new</code> 演算子を用いて単一のオブジェクトを作成する。</td> <td>同じ。</td> </tr> <tr> <td>既存のクラスのサブクラスを定義するクラス定義を用いてオブジェクト階層を構築する。</td> <td>コンストラクタ関数に結びつけられたプロトタイプとしてオブジェクトを代入することでオブジェクト階層を構築する。</td> </tr> <tr> <td>クラスチェーンに従ってプロパティを継承する。</td> <td>プロトタイプチェーンに従ってプロパティを継承する。</td> </tr> <tr> <td>クラス定義がクラスの全インスタンスの全プロパティを指定する。実行時に動的にプロパティを追加することはできない。</td> <td>コンストラクタ関数またはプロトタイプがプロパティの初期セットを指定する。個々のオブジェクトやオブジェクトの全体のセットに動的にプロパティを追加したり、それらからプロパティを除去したりできる。</td> </tr> </tbody>
-</table>
-<div class="noinclude">
-<p>{{ PreviousNext("Core_JavaScript_1.5_Guide:Predefined_Core_Objects:String_Object", "Core_JavaScript_1.5_Guide:The_Employee_Example") }}</p>
-</div>
-<p>{{ languages( { "zh-tw": "zh_tw/Core_JavaScript_1.5_教學/以類別為基礎的語言_vs._以原型為基礎的語言", "en": "en/Core_JavaScript_1.5_Guide/Class-Based_vs._Prototype-Based_Languages", "es": "es/Gu\u00eda_JavaScript_1.5/Lenguajes_basados_en_clases_frente_a_basados_en_prototipos", "fr": "fr/Guide_JavaScript_1.5/Langages_bas\u00e9s_sur_les_classes_et_langages_bas\u00e9s_sur_les_prototypes", "pl": "pl/Przewodnik_po_j\u0119zyku_JavaScript_1.5/J\u0119zyki_oparte_na_klasach_vs._oparte_na_prototypach", "zh-cn": "cn/Core_JavaScript_1.5_Guide/Class-Based_vs._Prototype-Based_Languages" } ) }}</p>
diff --git a/files/ja/orphaned/web/javascript/guide/creating_a_regular_expression/index.html b/files/ja/orphaned/web/javascript/guide/creating_a_regular_expression/index.html
index 4da2f3be90..9b09e6c5d2 100644
--- a/files/ja/orphaned/web/javascript/guide/creating_a_regular_expression/index.html
+++ b/files/ja/orphaned/web/javascript/guide/creating_a_regular_expression/index.html
@@ -18,7 +18,7 @@ original_slug: Web/JavaScript/Guide/Creating_a_Regular_Expression
   </dd>
 </dl>
 <ul>
-  <li>次のように、<a href="/ja/JavaScript/Reference/Global_Objects/RegExp" title="ja/JavaScript/Reference/Global_Objects/RegExp">RegExp</a> オブジェクトのコンストラクタ関数を呼び出す。</li>
+  <li>次のように、<a href="/ja/JavaScript/Reference/Global_Objects/RegExp">RegExp</a> オブジェクトのコンストラクタ関数を呼び出す。</li>
 </ul>
 <pre>var re = new RegExp("ab+c"); </pre>
 <dl>
diff --git a/files/ja/orphaned/web/javascript/guide/expressions/index.html b/files/ja/orphaned/web/javascript/guide/expressions/index.html
index 6c27367d80..90deb434f3 100644
--- a/files/ja/orphaned/web/javascript/guide/expressions/index.html
+++ b/files/ja/orphaned/web/javascript/guide/expressions/index.html
@@ -8,9 +8,9 @@ original_slug: Web/JavaScript/Guide/Expressions
 <p>概念的に、式は 2 つの種類に分けることができます。ある値を変数に代入するものと、単純にある値を持つものです。例えば、<code>x = 7</code> という式は x に 7 という値を代入する式です。この式自体の評価結果は 7 です。このような式では<em>代入演算子</em>を用います。一方、<code>3 + 4</code> という式では単純に評価結果が 7 になります。この式は代入を行いません。このような式で用いられる演算子は単に<em>演算子</em>と呼ばれます。</p>
 <p>JavaScript には以下の種類の式があります。</p>
 <ul>
-  <li>算術式：数値に評価する。例えば 3.14159。（一般に <a href="/ja/Core_JavaScript_1.5_Guide/Operators/Arithmetic_Operators" title="ja/Core_JavaScript_1.5_Guide/Operators/Arithmetic_Operators">算術演算子</a> を使用）</li>
-  <li>文字列式：文字列に評価する。例えば "Fred" や "234"。（一般に <a href="/ja/Core_JavaScript_1.5_Guide/Operators/String_Operators" title="ja/Core_JavaScript_1.5_Guide/Operators/String_Operators">文字列演算子</a> を使用）</li>
-  <li>論理式：true または false に評価する。（よく <a href="/ja/Core_JavaScript_1.5_Guide/Operators/Logical_Operators" title="ja/Core_JavaScript_1.5_Guide/Operators/Logical_Operators">論理演算子</a> を用いる)</li>
-  <li>オブジェクト式：オブジェクトに評価する。（オブジェクトに評価するさまざまな例については <a href="/ja/Core_JavaScript_1.5_Guide/Operators/Special_Operators" title="ja/Core_JavaScript_1.5_Guide/Operators/Special_Operators">特殊演算子</a> を参照）</li>
+  <li>算術式：数値に評価する。例えば 3.14159。（一般に <a href="/ja/Core_JavaScript_1.5_Guide/Operators/Arithmetic_Operators">算術演算子</a> を使用）</li>
+  <li>文字列式：文字列に評価する。例えば "Fred" や "234"。（一般に <a href="/ja/Core_JavaScript_1.5_Guide/Operators/String_Operators">文字列演算子</a> を使用）</li>
+  <li>論理式：true または false に評価する。（よく <a href="/ja/Core_JavaScript_1.5_Guide/Operators/Logical_Operators">論理演算子</a> を用いる)</li>
+  <li>オブジェクト式：オブジェクトに評価する。（オブジェクトに評価するさまざまな例については <a href="/ja/Core_JavaScript_1.5_Guide/Operators/Special_Operators">特殊演算子</a> を参照）</li>
 </ul>
 <p>{{ PreviousNext("JavaScript/Guide/Unicode", "JavaScript/Guide/Operators") }}</p>
diff --git a/files/ja/orphaned/web/javascript/guide/loop_statements/index.html b/files/ja/orphaned/web/javascript/guide/loop_statements/index.html
index 93f9f2c65a..68dab826b1 100644
--- a/files/ja/orphaned/web/javascript/guide/loop_statements/index.html
+++ b/files/ja/orphaned/web/javascript/guide/loop_statements/index.html
@@ -5,14 +5,14 @@ original_slug: Web/JavaScript/Guide/Loop_Statements
 ---
 <h2 id=".E3.83.AB.E3.83.BC.E3.83.97.E6.96.87" name=".E3.83.AB.E3.83.BC.E3.83.97.E6.96.87">ループ文</h2>
 <p>ループは指定した条件が満たされている限り繰り返し実行されるコマンドのセットです。JavaScript は、label はもちろん、for、do while、while といったループ文をサポートしています（label 自体はループ文ではありませんが、これらの文とともに頻繁に使用されます）。さらに、<code>break</code> および <code>continue</code> 文をループ文の中で使うことができます。</p>
-<p>さらに <code>for...in</code> 文も文を繰り返し実行しますが、これはオブジェクトの操作に使用します。<a href="/ja/Core_JavaScript_1.5_Guide/Object_Manipulation_Statements" title="ja/Core_JavaScript_1.5_Guide/Object_Manipulation_Statements">オブジェクト操作文</a> をご覧ください。</p>
+<p>さらに <code>for...in</code> 文も文を繰り返し実行しますが、これはオブジェクトの操作に使用します。<a href="/ja/Core_JavaScript_1.5_Guide/Object_Manipulation_Statements">オブジェクト操作文</a> をご覧ください。</p>
 <p>ループ文は以下のとおりです。</p>
 <ul>
-  <li><a href="/ja/Core_JavaScript_1.5_Guide/Loop_Statements/for_Statement" title="ja/Core_JavaScript_1.5_Guide/Loop_Statements/for_Statement">for 文</a></li>
-  <li><a href="/ja/Core_JavaScript_1.5_Guide/Loop_Statements/do...while_Statement" title="ja/Core_JavaScript_1.5_Guide/Loop_Statements/do...while_Statement">do...while 文</a></li>
-  <li><a href="/ja/Core_JavaScript_1.5_Guide/Loop_Statements/while_Statement" title="ja/Core_JavaScript_1.5_Guide/Loop_Statements/while_Statement">while 文</a></li>
-  <li><a href="/ja/Core_JavaScript_1.5_Guide/Loop_Statements/label_Statement" title="ja/Core_JavaScript_1.5_Guide/Loop_Statements/label_Statement">label 文</a></li>
-  <li><a href="/ja/Core_JavaScript_1.5_Guide/Loop_Statements/break_Statement" title="ja/Core_JavaScript_1.5_Guide/Loop_Statements/break_Statement">break 文</a></li>
-  <li><a href="/ja/Core_JavaScript_1.5_Guide/Loop_Statements/continue_Statement" title="ja/Core_JavaScript_1.5_Guide/Loop_Statements/continue_Statement">continue 文</a></li>
+  <li><a href="/ja/Core_JavaScript_1.5_Guide/Loop_Statements/for_Statement">for 文</a></li>
+  <li><a href="/ja/Core_JavaScript_1.5_Guide/Loop_Statements/do...while_Statement">do...while 文</a></li>
+  <li><a href="/ja/Core_JavaScript_1.5_Guide/Loop_Statements/while_Statement">while 文</a></li>
+  <li><a href="/ja/Core_JavaScript_1.5_Guide/Loop_Statements/label_Statement">label 文</a></li>
+  <li><a href="/ja/Core_JavaScript_1.5_Guide/Loop_Statements/break_Statement">break 文</a></li>
+  <li><a href="/ja/Core_JavaScript_1.5_Guide/Loop_Statements/continue_Statement">continue 文</a></li>
 </ul>
 <p>{{ PreviousNext("JavaScript/Guide/Conditional_Statements", "JavaScript/Guide/Loop_Statements/for_Statement") }}</p>
diff --git a/files/ja/orphaned/web/javascript/guide/object_manipulation_statements/index.html b/files/ja/orphaned/web/javascript/guide/object_manipulation_statements/index.html
index 48e820e9ae..800a9e95cf 100644
--- a/files/ja/orphaned/web/javascript/guide/object_manipulation_statements/index.html
+++ b/files/ja/orphaned/web/javascript/guide/object_manipulation_statements/index.html
@@ -6,7 +6,7 @@ original_slug: Web/JavaScript/Guide/Object_Manipulation_Statements
 <h3 id=".E3.82.AA.E3.83.96.E3.82.B8.E3.82.A7.E3.82.AF.E3.83.88.E6.93.8D.E4.BD.9C.E6.96.87" name=".E3.82.AA.E3.83.96.E3.82.B8.E3.82.A7.E3.82.AF.E3.83.88.E6.93.8D.E4.BD.9C.E6.96.87">オブジェクト操作文</h3>
 <p>JavaScript はオブジェクトの操作に <code>for...in</code>、<code>for each...in</code> および <code>with</code> 文を使用します。</p>
 <h4 id="for...in_.E6.96.87" name="for...in_.E6.96.87">for...in 文</h4>
-<p><a href="/ja/Core_JavaScript_1.5_Reference/Statements/for...in" title="ja/Core_JavaScript_1.5_Reference/Statements/for...in"><code>for...in</code></a> 文は指定した変数をオブジェクトの全プロパティに対して反復します。それぞれのプロパティに対して JavaScript は指定した文を実行します。<code>for...in</code> 文は次のように使用します。</p>
+<p><a href="/ja/Core_JavaScript_1.5_Reference/Statements/for...in"><code>for...in</code></a> 文は指定した変数をオブジェクトの全プロパティに対して反復します。それぞれのプロパティに対して JavaScript は指定した文を実行します。<code>for...in</code> 文は次のように使用します。</p>
 <pre>for (variable in object) {
    statements
 }
@@ -27,11 +27,11 @@ original_slug: Web/JavaScript/Guide/Object_Manipulation_Statements
 car.model = Mustang
 </pre>
 <p><strong>配列</strong><br>
-  <a href="/ja/Core_JavaScript_1.5_Reference/Global_Objects/Array" title="ja/Core_JavaScript_1.5_Reference/Global_Objects/Array">Array</a> の要素に対して反復する方法としてこれを用いることは魅力的かもしれませんが、<strong>for...in</strong> 文はその配列の要素に加えてユーザ定義プロパティに対して繰り返すため、独自のプロパティやメソッドを追加するなどして Array オブジェクトに変更を加えると <strong>for...in</strong> 文は数値のインデックスに加えてユーザ定義プロパティの名前を返します。したがって、配列に対して反復したいときには数値のインデックスを用いた従来の <a href="/ja/Core_JavaScript_1.5_Reference/Statements/for" title="ja/Core_JavaScript_1.5_Reference/Statements/for">for</a> ループを使用したほうがいいでしょう。</p>
+  <a href="/ja/Core_JavaScript_1.5_Reference/Global_Objects/Array">Array</a> の要素に対して反復する方法としてこれを用いることは魅力的かもしれませんが、<strong>for...in</strong> 文はその配列の要素に加えてユーザ定義プロパティに対して繰り返すため、独自のプロパティやメソッドを追加するなどして Array オブジェクトに変更を加えると <strong>for...in</strong> 文は数値のインデックスに加えてユーザ定義プロパティの名前を返します。したがって、配列に対して反復したいときには数値のインデックスを用いた従来の <a href="/ja/Core_JavaScript_1.5_Reference/Statements/for">for</a> ループを使用したほうがいいでしょう。</p>
 <h4 id="for_each...in_.E6.96.87" name="for_each...in_.E6.96.87">for each...in 文</h4>
-<p><a href="/ja/Core_JavaScript_1.5_Reference/Statements/for_each...in" title="ja/Core_JavaScript_1.5_Reference/Statements/for_each...in"><code>for each...in</code></a> は <a href="/ja/New_in_JavaScript_1.6" title="ja/New_in_JavaScript_1.6">JavaScript 1.6</a> で導入されるループ文です。これは <code>for...in</code> に似ていますが、オブジェクトのプロパティの名前ではなく、プロパティの値に対して反復します。</p>
+<p><a href="/ja/Core_JavaScript_1.5_Reference/Statements/for_each...in"><code>for each...in</code></a> は <a href="/ja/New_in_JavaScript_1.6">JavaScript 1.6</a> で導入されるループ文です。これは <code>for...in</code> に似ていますが、オブジェクトのプロパティの名前ではなく、プロパティの値に対して反復します。</p>
 <h4 id="with_.E6.96.87" name="with_.E6.96.87">with 文</h4>
-<p><a href="/ja/Core_JavaScript_1.5_Reference/Statements/with" title="ja/Core_JavaScript_1.5_Reference/Statements/with"><code>with</code></a> 文はデフォルトのオブジェクトについて文のセットを実行します。JavaScript はその文のセットにおいて非修飾名を検索し、その名前がデフォルトのオブジェクトのプロパティであるかを決定します。非修飾名がプロパティにマッチすると、そのプロパティがその文で使われます。そうでない場合はローカル変数かグローバル変数が使われます。</p>
+<p><a href="/ja/Core_JavaScript_1.5_Reference/Statements/with"><code>with</code></a> 文はデフォルトのオブジェクトについて文のセットを実行します。JavaScript はその文のセットにおいて非修飾名を検索し、その名前がデフォルトのオブジェクトのプロパティであるかを決定します。非修飾名がプロパティにマッチすると、そのプロパティがその文で使われます。そうでない場合はローカル変数かグローバル変数が使われます。</p>
 <p><code>with</code> 文は次のように使用します。</p>
 <pre>with (object) {
    statements
@@ -47,6 +47,6 @@ with (Math) {
    y = r * sin(PI/2);
 }
 </pre>
-<p>注意：<code>with</code> 文を使うことでプログラムをより簡潔にすることができますが、<code>with</code> の不適切な使用はプログラムを大幅にスローダウンさせることに繋がります。<a href="/ja/Core_JavaScript_1.5_Reference/Statements/with" title="ja/Core_JavaScript_1.5_Reference/Statements/with">Core JavaScript 1.5 Reference:Statements:with</a> を参照してください。</p>
+<p>注意：<code>with</code> 文を使うことでプログラムをより簡潔にすることができますが、<code>with</code> の不適切な使用はプログラムを大幅にスローダウンさせることに繋がります。<a href="/ja/Core_JavaScript_1.5_Reference/Statements/with">Core JavaScript 1.5 Reference:Statements:with</a> を参照してください。</p>
 
 <p>{{ PreviousNext("JavaScript/Guide/Loop_Statements/continue_Statement", "JavaScript/Guide/Comments") }}</p>
diff --git a/files/ja/orphaned/web/javascript/guide/predefined_functions/escape_and_unescape_functions/index.html b/files/ja/orphaned/web/javascript/guide/predefined_functions/escape_and_unescape_functions/index.html
index 6d126722b1..ca2ec31ef2 100644
--- a/files/ja/orphaned/web/javascript/guide/predefined_functions/escape_and_unescape_functions/index.html
+++ b/files/ja/orphaned/web/javascript/guide/predefined_functions/escape_and_unescape_functions/index.html
@@ -12,5 +12,5 @@ original_slug: Web/JavaScript/Guide/Predefined_Functions/escape_and_unescape_Fun
 unescape(string)
 </pre>
   <p>これらの関数は主にサーバサイド JavaScript で URL 中の名前と値のペアのエンコードやデコードに使用されます。</p>
-  <code>escape</code> および <code>unescape</code> 関数は 非 ASCII 文字に対しては正しく機能せず、廃止予定になっています。JavaScript 1.5 以降では <code><a href="/ja/Core_JavaScript_1.5_Reference/Global_Functions/encodeURI" title="ja/Core_JavaScript_1.5_Reference/Global_Functions/encodeURI">encodeURI</a></code>、<code><a href="/ja/Core_JavaScript_1.5_Reference/Global_Functions/decodeURI" title="ja/Core_JavaScript_1.5_Reference/Global_Functions/decodeURI">decodeURI</a></code>、<code><a href="/ja/Core_JavaScript_1.5_Reference/Global_Functions/encodeURIComponent" title="ja/Core_JavaScript_1.5_Reference/Global_Functions/encodeURIComponent">encodeURIComponent</a></code> および <code><a href="/ja/Core_JavaScript_1.5_Reference/Global_Functions/decodeURIComponent" title="ja/Core_JavaScript_1.5_Reference/Global_Functions/decodeURIComponent">decodeURIComponent</a></code> を使用してください。</div>
+  <code>escape</code> および <code>unescape</code> 関数は 非 ASCII 文字に対しては正しく機能せず、廃止予定になっています。JavaScript 1.5 以降では <code><a href="/ja/Core_JavaScript_1.5_Reference/Global_Functions/encodeURI">encodeURI</a></code>、<code><a href="/ja/Core_JavaScript_1.5_Reference/Global_Functions/decodeURI">decodeURI</a></code>、<code><a href="/ja/Core_JavaScript_1.5_Reference/Global_Functions/encodeURIComponent">encodeURIComponent</a></code> および <code><a href="/ja/Core_JavaScript_1.5_Reference/Global_Functions/decodeURIComponent">decodeURIComponent</a></code> を使用してください。</div>
 <p>{{ PreviousNext("JavaScript/Guide/Predefined_Functions/Number_and_String_Functions", "JavaScript/Guide/Objects_and_Properties") }}</p>
diff --git a/files/ja/orphaned/web/javascript/guide/predefined_functions/index.html b/files/ja/orphaned/web/javascript/guide/predefined_functions/index.html
index 3738bf8da4..e802cc270a 100644
--- a/files/ja/orphaned/web/javascript/guide/predefined_functions/index.html
+++ b/files/ja/orphaned/web/javascript/guide/predefined_functions/index.html
@@ -7,12 +7,12 @@ original_slug: Web/JavaScript/Guide/Predefined_Functions
   <h3 id=".E5.AE.9A.E7.BE.A9.E6.B8.88.E3.81.BF.E9.96.A2.E6.95.B0" name=".E5.AE.9A.E7.BE.A9.E6.B8.88.E3.81.BF.E9.96.A2.E6.95.B0">定義済み関数</h3>
   <p>JavaScript にはトップレベルの定義済み関数がいくつかあります。</p>
   <ul>
-    <li><a href="/ja/Core_JavaScript_1.5_Guide/Predefined_Functions/eval_Function" title="ja/Core_JavaScript_1.5_Guide/Predefined_Functions/eval_Function">eval</a></li>
-    <li><a href="/ja/Core_JavaScript_1.5_Guide/Predefined_Functions/isFinite_Function" title="ja/Core_JavaScript_1.5_Guide/Predefined_Functions/isFinite_Function">isFinite</a></li>
-    <li><a href="/ja/Core_JavaScript_1.5_Guide/Predefined_Functions/isNaN_Function" title="ja/Core_JavaScript_1.5_Guide/Predefined_Functions/isNaN_Function">isNaN</a></li>
-    <li><a href="/ja/Core_JavaScript_1.5_Guide/Predefined_Functions/parseInt_and_parseFloat_Functions" title="ja/Core_JavaScript_1.5_Guide/Predefined_Functions/parseInt_and_parseFloat_Functions">parseInt と parseFloat</a></li>
-    <li><a href="/ja/Core_JavaScript_1.5_Guide/Predefined_Functions/Number_and_String_Functions" title="ja/Core_JavaScript_1.5_Guide/Predefined_Functions/Number_and_String_Functions">Number と String</a></li>
-    <li><a href="/ja/Core_JavaScript_1.5_Guide/Predefined_Functions/escape_and_unescape_Functions" title="ja/Core_JavaScript_1.5_Guide/Predefined_Functions/escape_and_unescape_Functions">encodeURI と decodeURI、encodeURIComponent、decodeURIComponent（すべて Javascript 1.5 以降で使用可能）</a></li>
+    <li><a href="/ja/Core_JavaScript_1.5_Guide/Predefined_Functions/eval_Function">eval</a></li>
+    <li><a href="/ja/Core_JavaScript_1.5_Guide/Predefined_Functions/isFinite_Function">isFinite</a></li>
+    <li><a href="/ja/Core_JavaScript_1.5_Guide/Predefined_Functions/isNaN_Function">isNaN</a></li>
+    <li><a href="/ja/Core_JavaScript_1.5_Guide/Predefined_Functions/parseInt_and_parseFloat_Functions">parseInt と parseFloat</a></li>
+    <li><a href="/ja/Core_JavaScript_1.5_Guide/Predefined_Functions/Number_and_String_Functions">Number と String</a></li>
+    <li><a href="/ja/Core_JavaScript_1.5_Guide/Predefined_Functions/escape_and_unescape_Functions">encodeURI と decodeURI、encodeURIComponent、decodeURIComponent（すべて Javascript 1.5 以降で使用可能）</a></li>
   </ul>
 </div>
 <p>{{ PreviousNext("JavaScript/Guide/Using_the_arguments_object", "JavaScript/Guide/Predefined_Functions/eval_Function") }}</p>
diff --git a/files/ja/orphaned/web/javascript/guide/the_employee_example/creating_the_hierarchy/index.html b/files/ja/orphaned/web/javascript/guide/the_employee_example/creating_the_hierarchy/index.html
index 9ed2621e37..41ec88a890 100644
--- a/files/ja/orphaned/web/javascript/guide/the_employee_example/creating_the_hierarchy/index.html
+++ b/files/ja/orphaned/web/javascript/guide/the_employee_example/creating_the_hierarchy/index.html
@@ -6,7 +6,7 @@ original_slug: Web/JavaScript/Guide/The_Employee_Example/Creating_the_Hierarchy
 <h3 id=".E9.9A.8E.E5.B1.A4.E3.81.AE.E4.BD.9C.E6.88.90" name=".E9.9A.8E.E5.B1.A4.E3.81.AE.E4.BD.9C.E6.88.90">階層の作成</h3>
 <p>Employee の階層を実装するための適当なコンストラクタ関数を定義する方法はいくつかあります。これの定義に何を選択するかは、アプリケーションで何ができるようにしたいかに大きくよります。</p>
 <p>このセクションではとても単純（かつ比較的柔軟でない）定義の使用方法を示し、継承を機能させる方法を実際に示します。これらの定義では、オブジェクト作成時に何らかのプロパティの値を指定することはできません。新しく作成されるオブジェクトは単にデフォルトの値を取得するだけです。これは後から変更できます。図 8.2 ではこれらの単純な定義を備えた階層を例示します。</p>
-<p>実際のアプリケーションでは、オブジェクト作成時にプロパティの値を設定できるようにするコンストラクタを定義することになるでしょう（詳しくは <a href="/ja/Core_JavaScript_1.5_Guide/The_Employee_Example/More_Flexible_Constructors" title="ja/Core_JavaScript_1.5_Guide/The_Employee_Example/More_Flexible_Constructors">より柔軟なコンストラクタ</a> を参照）。今回はこれらの単純な定義を使用して、継承はどのようにして起こるのかを実際に示していくことにします。</p>
+<p>実際のアプリケーションでは、オブジェクト作成時にプロパティの値を設定できるようにするコンストラクタを定義することになるでしょう（詳しくは <a href="/ja/Core_JavaScript_1.5_Guide/The_Employee_Example/More_Flexible_Constructors">より柔軟なコンストラクタ</a> を参照）。今回はこれらの単純な定義を使用して、継承はどのようにして起こるのかを実際に示していくことにします。</p>
 <p><img alt="Image:hier02.gif" class="internal" src="/@api/deki/files/1905/=Hier02.gif"><br>
  <small><strong>図 8.2：Employee オブジェクトの定義</strong></small></p>
 <p>以下に示すように、Java と JavaScript の <code>Employee</code> の定義は似ています。唯一の相違点は、Java では各プロパティに対して型を指定する必要があるのに対して、JavaScript ではその必要がないことです。また、Java のクラスでは明示的なコンストラクタメソッドを作成する必要があります。</p>
diff --git a/files/ja/orphaned/web/javascript/guide/the_employee_example/index.html b/files/ja/orphaned/web/javascript/guide/the_employee_example/index.html
index b47856921c..79fd796301 100644
--- a/files/ja/orphaned/web/javascript/guide/the_employee_example/index.html
+++ b/files/ja/orphaned/web/javascript/guide/the_employee_example/index.html
@@ -17,14 +17,14 @@ original_slug: Web/JavaScript/Guide/The_Employee_Example
 </ul>
 <p>残りの例：</p>
 <ul>
- <li><a href="/ja/Core_JavaScript_1.5_Guide/The_Employee_Example/Creating_the_Hierarchy" title="ja/Core_JavaScript_1.5_Guide/The_Employee_Example/Creating_the_Hierarchy">階層の作成</a></li>
- <li><a href="/ja/Core_JavaScript_1.5_Guide/The_Employee_Example/Object_Properties" title="ja/Core_JavaScript_1.5_Guide/The_Employee_Example/Object_Properties">オブジェクトのプロパティ</a>
+ <li><a href="/ja/Core_JavaScript_1.5_Guide/The_Employee_Example/Creating_the_Hierarchy">階層の作成</a></li>
+ <li><a href="/ja/Core_JavaScript_1.5_Guide/The_Employee_Example/Object_Properties">オブジェクトのプロパティ</a>
   <ul>
-   <li><a href="/ja/Core_JavaScript_1.5_Guide/The_Employee_Example/Object_Properties/Inheriting_Properties" title="ja/Core_JavaScript_1.5_Guide/The_Employee_Example/Object_Properties/Inheriting_Properties">プロパティの継承</a></li>
-   <li><a href="/ja/Core_JavaScript_1.5_Guide/The_Employee_Example/Object_Properties/Adding_Properties" title="ja/Core_JavaScript_1.5_Guide/The_Employee_Example/Object_Properties/Adding_Properties">プロパティの追加</a></li>
+   <li><a href="/ja/Core_JavaScript_1.5_Guide/The_Employee_Example/Object_Properties/Inheriting_Properties">プロパティの継承</a></li>
+   <li><a href="/ja/Core_JavaScript_1.5_Guide/The_Employee_Example/Object_Properties/Adding_Properties">プロパティの追加</a></li>
   </ul>
  </li>
- <li><a href="/ja/Core_JavaScript_1.5_Guide/The_Employee_Example/More_Flexible_Constructors" title="ja/Core_JavaScript_1.5_Guide/The_Employee_Example/More_Flexible_Constructors">より柔軟なコンストラクタ</a></li>
+ <li><a href="/ja/Core_JavaScript_1.5_Guide/The_Employee_Example/More_Flexible_Constructors">より柔軟なコンストラクタ</a></li>
 </ul>
 <div class="noinclude">
  <p>{{ PreviousNext("Core_JavaScript_1.5_Guide:Class-Based_vs._Prototype-Based_Languages", "Core_JavaScript_1.5_Guide:The_Employee_Example:Creating_the_Hierarchy") }}</p>
diff --git a/files/ja/orphaned/web/javascript/guide/the_employee_example/object_properties/index.html b/files/ja/orphaned/web/javascript/guide/the_employee_example/object_properties/index.html
index 80c2494cf2..2cf27ea0ba 100644
--- a/files/ja/orphaned/web/javascript/guide/the_employee_example/object_properties/index.html
+++ b/files/ja/orphaned/web/javascript/guide/the_employee_example/object_properties/index.html
@@ -6,8 +6,8 @@ original_slug: Web/JavaScript/Guide/The_Employee_Example/Object_Properties
 <h3 id=".E3.82.AA.E3.83.96.E3.82.B8.E3.82.A7.E3.82.AF.E3.83.88.E3.81.AE.E3.83.97.E3.83.AD.E3.83.91.E3.83.86.E3.82.A3" name=".E3.82.AA.E3.83.96.E3.82.B8.E3.82.A7.E3.82.AF.E3.83.88.E3.81.AE.E3.83.97.E3.83.AD.E3.83.91.E3.83.86.E3.82.A3">オブジェクトのプロパティ</h3>
 <p>このセクションでは、プロトタイプチェーンにおいてオブジェクトが他のオブジェクトからどのようにプロパティを継承するのか、また、実行時にプロパティを追加すると何が起きるのかについて論じます。</p>
 <ul>
- <li><a href="/ja/Core_JavaScript_1.5_Guide/The_Employee_Example/Object_Properties/Inheriting_Properties" title="ja/Core_JavaScript_1.5_Guide/The_Employee_Example/Object_Properties/Inheriting_Properties">プロパティの継承</a></li>
- <li><a href="/ja/Core_JavaScript_1.5_Guide/The_Employee_Example/Object_Properties/Adding_Properties" title="ja/Core_JavaScript_1.5_Guide/The_Employee_Example/Object_Properties/Adding_Properties">プロパティの追加</a></li>
+ <li><a href="/ja/Core_JavaScript_1.5_Guide/The_Employee_Example/Object_Properties/Inheriting_Properties">プロパティの継承</a></li>
+ <li><a href="/ja/Core_JavaScript_1.5_Guide/The_Employee_Example/Object_Properties/Adding_Properties">プロパティの追加</a></li>
 </ul>
 <div class="noinclude">
  <p>{{ PreviousNext("Core_JavaScript_1.5_Guide:The_Employee_Example:Creating_the_Hierarchy", "Core_JavaScript_1.5_Guide:The_Employee_Example:Object_Properties:Inheriting_Properties") }}</p>
diff --git a/files/ja/orphaned/web/javascript/guide/the_employee_example/object_properties/inheriting_properties/index.html b/files/ja/orphaned/web/javascript/guide/the_employee_example/object_properties/inheriting_properties/index.html
index 159c3c4e01..b860b5871f 100644
--- a/files/ja/orphaned/web/javascript/guide/the_employee_example/object_properties/inheriting_properties/index.html
+++ b/files/ja/orphaned/web/javascript/guide/the_employee_example/object_properties/inheriting_properties/index.html
@@ -6,7 +6,7 @@ original_slug: >-
   Web/JavaScript/Guide/The_Employee_Example/Object_Properties/Inheriting_Properties
 ---
 <h3 id=".E3.83.97.E3.83.AD.E3.83.91.E3.83.86.E3.82.A3.E3.81.AE.E7.B6.99.E6.89.BF" name=".E3.83.97.E3.83.AD.E3.83.91.E3.83.86.E3.82.A3.E3.81.AE.E7.B6.99.E6.89.BF">プロパティの継承</h3>
-<p>次の文を用いて（<a href="/ja/Core_JavaScript_1.5_Guide/The_Employee_Example/Creating_the_Hierarchy" title="ja/Core_JavaScript_1.5_Guide/The_Employee_Example/Creating_the_Hierarchy">図 8.3</a> で示したように）<code>mark</code> オブジェクトを <code>WorkerBee</code> として作成するとします。</p>
+<p>次の文を用いて（<a href="/ja/Core_JavaScript_1.5_Guide/The_Employee_Example/Creating_the_Hierarchy">図 8.3</a> で示したように）<code>mark</code> オブジェクトを <code>WorkerBee</code> として作成するとします。</p>
 <pre class="eval">mark = new WorkerBee;
 </pre>
 <p>JavaScript は new 演算子に出くわすと、新しく汎用オブジェクトを生成し、この新しいオブジェクトを <code>this</code> キーワードの値として WorkerBee コンストラクタ関数に渡します。コンストラクタ関数は明示的に <code>projects</code> プロパティの値をセットします。さらに、内部的な <code>__proto__</code> プロパティの値として <code>WorkerBee.prototype</code> の値をセットします。（このプロパティ名は最初と最後に 2 文字ずつのアンダースコアが付いています。）<code>__proto__</code> プロパティはプロパティの値を返すのに使用されるプロトタイプチェーンを決定します。これらのプロパティがセットされると JavaScript は新しいオブジェクトを返し、代入文は変数 <code>mark</code> にそのオブジェクトをセットします。</p>
@@ -15,7 +15,7 @@ original_slug: >-
 mark.dept = "general";
 mark.projects = [];
 </pre>
-<p><code>mark</code> オブジェクトは <code>mark.__proto__</code> の原型的なオブジェクトから name および dept プロパティの値を継承します。WorkerBee コンストラクタによって projects プロパティにローカルの値が代入されます。このことでプロパティとその値を継承することができます。このプロセスの細かいところは <a href="/ja/Core_JavaScript_1.5_Guide/Property_Inheritance_Revisited" title="ja/Core_JavaScript_1.5_Guide/Property_Inheritance_Revisited">プロパティの継承、再び</a> にて議論します。</p>
+<p><code>mark</code> オブジェクトは <code>mark.__proto__</code> の原型的なオブジェクトから name および dept プロパティの値を継承します。WorkerBee コンストラクタによって projects プロパティにローカルの値が代入されます。このことでプロパティとその値を継承することができます。このプロセスの細かいところは <a href="/ja/Core_JavaScript_1.5_Guide/Property_Inheritance_Revisited">プロパティの継承、再び</a> にて議論します。</p>
 <p>これらのコンストラクタにインスタンス固有の値を渡せないため、この情報は汎用的になります。プロパティの値は WorkerBee によって作成されるすべての新しいオブジェクトに共有される、デフォルトの値になります。もちろん、これらのどのプロパティのでもその値を変えることができます。そのためには次のようにして <code>mark</code> に固有の情報を与えます。</p>
 <pre class="eval">mark.name = "Doe, Mark";
 mark.dept = "admin";
diff --git a/files/ja/orphaned/web/javascript/guide/using_the_arguments_object/index.html b/files/ja/orphaned/web/javascript/guide/using_the_arguments_object/index.html
index 18259c91ce..446895507c 100644
--- a/files/ja/orphaned/web/javascript/guide/using_the_arguments_object/index.html
+++ b/files/ja/orphaned/web/javascript/guide/using_the_arguments_object/index.html
@@ -30,7 +30,7 @@ myConcat("; ", "elephant", "giraffe", "lion", "cheetah");
 // "sage. basil. oregano. pepper. parsley. " を返す
 myConcat(". ", "sage", "basil", "oregano", "pepper", "parsley");
 </pre>
-  <p>さらなる情報については、コア JavaScript リファレンスの <a href="/ja/Core_JavaScript_1.5_Reference/Objects/Function" title="ja/Core_JavaScript_1.5_Reference/Objects/Function">Function オブジェクト</a> をご覧ください。</p>
+  <p>さらなる情報については、コア JavaScript リファレンスの <a href="/ja/Core_JavaScript_1.5_Reference/Objects/Function">Function オブジェクト</a> をご覧ください。</p>
   <p><strong>JavaScript 1.3 以前のバージョン</strong><br>
     arguments オブジェクトは <code>Function</code> オブジェクトのプロパティであり、次のように関数の名前を前に付けることができます。</p>
   functionName.arguments{{ mediawiki.external('i') }}</div>
diff --git a/files/ja/orphaned/web/javascript/guide/writing_a_regular_expression_pattern/index.html b/files/ja/orphaned/web/javascript/guide/writing_a_regular_expression_pattern/index.html
index ee4583e4b4..f94d505365 100644
--- a/files/ja/orphaned/web/javascript/guide/writing_a_regular_expression_pattern/index.html
+++ b/files/ja/orphaned/web/javascript/guide/writing_a_regular_expression_pattern/index.html
@@ -5,7 +5,7 @@ original_slug: Web/JavaScript/Guide/Writing_a_Regular_Expression_Pattern
 ---
 <h3 id=".E6.AD.A3.E8.A6.8F.E8.A1.A8.E7.8F.BE.E3.83.91.E3.82.BF.E3.83.BC.E3.83.B3.E3.82.92.E6.9B.B8.E3.81.8F" name=".E6.AD.A3.E8.A6.8F.E8.A1.A8.E7.8F.BE.E3.83.91.E3.82.BF.E3.83.BC.E3.83.B3.E3.82.92.E6.9B.B8.E3.81.8F">正規表現パターンを書く</h3>
 
-<p>正規表現パターンは、<code>/abc/</code> のような単純な文字、または <code>/ab*c/</code> や <code>/Chapter (\d+)\.\d*/</code> のような単純な文字と特殊文字との組み合わせからなります。最後の例では記憶装置として使われている丸括弧が含まれています。パターンのこの部分でなされたマッチは後で使用できるように記憶されます。詳しくは <a href="/ja/docs/JavaScript/Guide/Working_with_Regular_Expressions/Using_Parenthesized_Substring_Matches" title="ja/docs/JavaScript/Guide/Working_with_Regular_Expressions/Using_Parenthesized_Substring_Matches">括弧で囲まれた部分文字列のマッチの使用</a> を参照してください。</p>
+<p>正規表現パターンは、<code>/abc/</code> のような単純な文字、または <code>/ab*c/</code> や <code>/Chapter (\d+)\.\d*/</code> のような単純な文字と特殊文字との組み合わせからなります。最後の例では記憶装置として使われている丸括弧が含まれています。パターンのこの部分でなされたマッチは後で使用できるように記憶されます。詳しくは <a href="/ja/docs/JavaScript/Guide/Working_with_Regular_Expressions/Using_Parenthesized_Substring_Matches">括弧で囲まれた部分文字列のマッチの使用</a> を参照してください。</p>
 
 <h4 id="単純なパターンの使用">単純なパターンの使用</h4>
 
@@ -183,7 +183,7 @@ original_slug: Web/JavaScript/Guide/Writing_a_Regular_Expression_Pattern
 
 <h4 id="括弧の使用">括弧の使用</h4>
 
-<p>正規表現パターンの一部分を括弧で囲むことで、マッチした部分文字列のその部分を記憶しておくことができます。一度記憶すると、後からその部分文字列を呼び戻すことができます。これに関しては <a href="/ja/Core_JavaScript_1.5_Guide/Working_with_Regular_Expressions/Using_Parenthesized_Substring_Matches" title="ja/Core_JavaScript_1.5_Guide/Working_with_Regular_Expressions/Using_Parenthesized_Substring_Matches">括弧で囲まれた部分文字列のマッチの使用</a> で説明しています。</p>
+<p>正規表現パターンの一部分を括弧で囲むことで、マッチした部分文字列のその部分を記憶しておくことができます。一度記憶すると、後からその部分文字列を呼び戻すことができます。これに関しては <a href="/ja/Core_JavaScript_1.5_Guide/Working_with_Regular_Expressions/Using_Parenthesized_Substring_Matches">括弧で囲まれた部分文字列のマッチの使用</a> で説明しています。</p>
 
 <p>例えば、<code>/Chapter (\d+)\.\d*/</code> というパターンでは、エスケープされた文字と特殊文字の部分がその例で、その部分を記憶するように指示しています。これは 'Chapter ' という文字列、それに続く 1 文字以上の数字（\d はいずれかの数字を意味し、+ は 1 回以上の繰り返しを意味する）、それに続く小数点（それ自体は特殊文字であり、小数点の前の \ はパターンが '.' という文字そのものを探すようにすることを意味する）、それに続く 0 文字以上の数字（\d は数字を意味し、* は 0 回以上の繰り返しを意味する）にマッチします。さらに、括弧を使うことで最初のマッチした数値を記憶させます。</p>
 
diff --git a/files/ja/orphaned/web/javascript/reference/global_objects/weakset/clear/index.html b/files/ja/orphaned/web/javascript/reference/global_objects/weakset/clear/index.html
deleted file mode 100644
index 0ed95f130e..0000000000
--- a/files/ja/orphaned/web/javascript/reference/global_objects/weakset/clear/index.html
+++ /dev/null
@@ -1,50 +0,0 @@
----
-title: WeakSet.prototype.clear()
-slug: orphaned/Web/JavaScript/Reference/Global_Objects/WeakSet/clear
-tags:
-  - JavaScript
-  - Method
-  - Obsolute
-  - Prototype
-  - WeakSet
-translation_of: Web/JavaScript/Reference/Global_Objects/WeakSet/clear
-original_slug: Web/JavaScript/Reference/Global_Objects/WeakSet/clear
----
-<div>{{JSRef("Global_Objects", "WeakSet")}} {{obsolete_header}}</div>
-
-<h2 id="Summary" name="Summary">概要</h2>
-
-<p><code>WeakSet</code>オブジェクトからすべての要素を削除します。</p>
-
-<h2 id="Syntax" name="Syntax">構文</h2>
-
-<pre class="syntaxbox"><code><em>ws</em>.clear();</code></pre>
-
-<h2 id="Examples" name="Examples">例</h2>
-
-<h3 id="Example:_Testing_size_of_all_array_elements" name="Example:_Testing_size_of_all_array_elements">例: <code>clear</code> メソッドを使う</h3>
-
-<pre class="brush: js">var ws = new WeakSet();
-
-ws.add(window);
-ws.has(window);  // true
-
-ws.clear();
-
-ws.has(window); // false
-</pre>
-
-<h2 id="仕様">仕様</h2>
-
-<p>すべての現在の標準やドラフトでサポートされていません。このメソッドは、リビジョン 28 (October 14, 2014のバージョン)までECMAScript第６版ドラフト仕様でサポートされました。しかし、最新バージョンのドラフトで削除されました。最終仕様では、サポートされていません。</p>
-
-<h2 id="ブラウザ実装状況">ブラウザ実装状況</h2>
-
-<p>{{Compat("javascript.builtins.WeakSet.clear")}}</p>
-
-<h2 id="関連情報">関連情報</h2>
-
-<ul>
- <li>{{jsxref("WeakSet")}}</li>
- <li>{{jsxref("WeakSet.prototype.delete()")}}</li>
-</ul>
diff --git a/files/ja/orphaned/web/svg/element/solidcolor/index.html b/files/ja/orphaned/web/svg/element/solidcolor/index.html
deleted file mode 100644
index 56480133c7..0000000000
--- a/files/ja/orphaned/web/svg/element/solidcolor/index.html
+++ /dev/null
@@ -1,84 +0,0 @@
----
-title: <solidcolor>
-slug: orphaned/Web/SVG/Element/solidColor
-tags:
-  - Element
-  - Experimental
-  - Reference
-  - SVG
-translation_of: Web/SVG/Element/solidColor
-original_slug: Web/SVG/Element/solidColor
----
-<div>{{SVGRef}}{{obsolete_header}}</div>
-
-<p class="seoSummary"><strong><code>&lt;solidcolor&gt;</code></strong> は <a href="/ja/docs/Web/SVG">SVG</a> の要素で、 SVG 文書内の複数の場所で使用する単一の色を定義することができます。パレットの色をアニメーションさせるのにも便利です。</p>
-
-<p class="note"><strong>注:</strong> これは実験的な義jツウであり、まだブラウザーには実装されていません。回避策としては、 {{SVGElement("linearGradient")}} を単一の色経由点で扱うというものがあります。これはあまりすっきりしておらず、 <code>&lt;solidcolor&gt;</code> とは異なり、それ自身をグラデーションの定義に使用することができません。</p>
-
-<h2 id="Usage_context" name="Usage_context">使用場面</h2>
-
-<p>{{svginfo}}</p>
-
-<h2 id="Attributes" name="Attributes">属性</h2>
-
-<h3 id="Global_attributes" name="Global_attributes">グローバル属性</h3>
-
-<ul>
- <li><a href="/ja/docs/Web/SVG/Attribute#Core_attributes">コア属性</a></li>
- <li><a href="/ja/docs/Web/API/GlobalEventHandlers">グローバルイベント属性</a></li>
- <li><a href="/ja/docs/Web/SVG/Attribute#Presentation_attributes">プレゼンテーション属性</a></li>
- <li><a href="/en-US/docs/Web/SVG/Attribute#Style_attributes">スタイル属性</a></li>
-</ul>
-
-<h3 id="Specific_attributes" name="Specific_attributes">固有の属性</h3>
-
-<p><em>なし。</em></p>
-
-<h2 id="DOM_interface" name="DOM_interface">DOM インターフェイス</h2>
-
-<p>この要素は {{domxref("SVGSolidcolorElement")}} インターフェイスを実装しています。</p>
-
-<h2 id="Example" name="Example">例</h2>
-
-<h3 id="SVG">SVG</h3>
-
-<pre class="brush: html notranslate">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 200" height="150"&gt;
-  &lt;defs&gt;
-    &lt;!-- solidColor is experimental. --&gt;
-    &lt;solidcolor id="myColor" solid-color="gold" solid-opacity="0.8"/&gt;
-
-    &lt;!-- linearGradient with a single color stop is a less elegant way to
-         achieve the same effect, but it works in current browsers. --&gt;
-    &lt;linearGradient id="myGradient"&gt;
-      &lt;stop offset="0" stop-color="green" /&gt;
-    &lt;/linearGradient&gt;
-  &lt;/defs&gt;
-
-  &lt;text x="10" y="20"&gt;Circles colored with solidColor&lt;/text&gt;
-  &lt;circle cx="150" cy="65" r="35" stroke-width="2" stroke="url(#myColor)"
-      fill="white"/&gt;
-  &lt;circle cx="50" cy="65" r="35" fill="url(#myColor)"/&gt;
-
-  &lt;text x="10" y="120"&gt;Circles colored with linearGradient&lt;/text&gt;
-  &lt;circle cx="150" cy="165" r="35" stroke-width="2" stroke="url(#myGradient)"
-      fill="white"/&gt;
-  &lt;circle cx="50" cy="165" r="35" fill="url(#myGradient)"/&gt;
-&lt;/svg&gt;
-</pre>
-
-<h3 id="Result" name="Result">結果</h3>
-
-<p>{{EmbedLiveSample("Example")}}</p>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
-
-<p>{{Compat("svg.elements.solidcolor")}}</p>
-
-<h2 id="See_also" name="See_also">関連情報</h2>
-
-<ul>
- <li>{{domxref("SVGSolidcolorElement")}}</li>
- <li>{{cssxref("solid-color")}}</li>
- <li>{{cssxref("solid-opacity")}}</li>
- <li>{{SVGElement("linearGradient")}}</li>
-</ul>
diff --git a/files/ja/orphaned/xpcom_components_list/index.html b/files/ja/orphaned/xpcom_components_list/index.html
deleted file mode 100644
index 82111f5f42..0000000000
--- a/files/ja/orphaned/xpcom_components_list/index.html
+++ /dev/null
@@ -1,20 +0,0 @@
----
-title: XPCOM components list
-slug: orphaned/XPCOM_components_list
-tags:
-  - Components
-  - NeedsContent
-  - XPCOM
-  - XPCOM API Reference
-original_slug: XPCOM_components_list
----
-<p>ここには<a href="ja/Interfaces">Interfaces</a>一覧のようなコンポーネントの包括的な一覧を必要としています。
-</p>
-<h3 id=".E3.82.B3.E3.83.B3.E3.83.9D.E3.83.BC.E3.83.8D.E3.83.B3.E3.83.88.E3.81.AE.E3.82.A2.E3.83.AB.E3.83.95.E3.82.A1.E3.83.99.E3.83.83.E3.83.88.E9.A0.86.E3.81.AE.E4.B8.80.E8.A6.A7_.28.E6.9C.AA.E5.AE.8C.E6.88.90.29"> コンポーネントのアルファベット順の一覧 (未完成) </h3>
-<ul><li> <a href="ja/NsDirectoryService">nsDirectoryService</a>
-</li><li> <a href="ja/NsObserverService">nsObserverService</a>
-</li><li> <a href="ja/NsScriptableInputStream">nsScriptableInputStream</a>
-</li></ul>
-<div class="noinclude">
-</div>
-{{ languages( { "en": "en/XPCOM_components_list", "fr": "fr/Liste_des_composants_XPCOM", "ko": "ko/XPCOM_components_list", "pl": "pl/Lista_komponent\u00f3w_XPCOM" } ) }}
diff --git a/files/ja/orphaned/xpcom_plans/index.html b/files/ja/orphaned/xpcom_plans/index.html
deleted file mode 100644
index ec97ffe14b..0000000000
--- a/files/ja/orphaned/xpcom_plans/index.html
+++ /dev/null
@@ -1,33 +0,0 @@
----
-title: XPCOM plans
-slug: orphaned/XPCOM_plans
-tags:
-  - XPCOM
-original_slug: XPCOM_plans
----
-<p>{{ Outdated("このページは 2001 年 8 月を最後に更新されておらず、歴史的重要性を残すにとどまるでしょう。") }}</p>
-<h3 id=".E3.82.82.E3.81.A3.E3.81.A8.E3.82.82.E9.87.8D.E8.A6.81.E3.81.AA.E7.9B.AE.E6.A8.99:_Mozilla_.E3.81.AE.E8.88.B9.E5.87.BA.E3.80.82" name=".E3.82.82.E3.81.A3.E3.81.A8.E3.82.82.E9.87.8D.E8.A6.81.E3.81.AA.E7.9B.AE.E6.A8.99:_Mozilla_.E3.81.AE.E8.88.B9.E5.87.BA.E3.80.82">もっとも重要な目標: Mozilla の船出。</h3>
-<p><em>完了</em></p>
-<p>XPCOM のもっとも重要な目標は、何年も前から述べられているとおり、ブラウザを船出させることでした。そこまでこぎつけました。そして今、私たちは複数のバージョンの Mozilla ブラウザを得ています。 Netscape 6.x、Galleon、など。最近数週間を通して、次に何をすべきかについて XPCOM を使っているさまざまなグループと意見交換をしました。使用者たちは API セットの変更に追従するための労力を費やしたくない、というひとつのことが、くっきりと明瞭になりました。これらの議論から、私たちは Mozilla 1.0 リリースへの迅速なアプローチとして、要求される XPCOM インタフェースに対して 最小主義的なアプローチをすべきだと信じます (例：どうしても必要な最小限の API だけをフリーズ (固定) する)。</p>
-<p>安定した API を危機的なほど必要としている二つの利用者は、プラグインと組み込みです。いずれも XPCOM の初期化、停止、コンポーネントとサービスの管理を可能とする XPCOM の API のセットに興味を持っています。 Mozilla 1.0 のためには、XPCOM は最低限としてこの機能性を得られる API をフリーズすべきと信じています。</p>
-<p>私たちは組み込みグループで作業してきています。そして <a class="external" href="http://www.mozilla.org/projects/embedding/EmbedInterfaceFreeze.html">必要</a>と考えられるインタフェースのこのリストを提示しました。(これらのインタフェースのいくつかは XPCOM には当てはまらないことに注意) もし、必要と思われるのにこのリストから抜け落ちている XPCOM インタフェースが見つかったら、私 <a class="link-mailto" href="mailto:dougt@netscape.com">Doug Turner</a> 宛にメールをするか、XPCOM <a class="external" href="/news:mozilla.dev.tech.xpcom" title="news:mozilla.dev.tech.xpcom">ニュースグループ</a> に投稿するかをぜひお願いします。</p>
-<h3 id="XPCOM_.E3.81.AE_Mozilla_1.0_.E3.81.B8.E3.81.AE.E9.81.93" name="XPCOM_.E3.81.AE_Mozilla_1.0_.E3.81.B8.E3.81.AE.E9.81.93">XPCOM の Mozilla 1.0 への道</h3>
-<p><strong>もっとも重要な目標は XPCOM 中核の機能へのインタフェースのフリーズです。</strong></p>
-<p>私たちのリスト上の現在のインタフェースリストは、基本的な COM の機能を含んでいます。スレッド処理、リフレクション、多くのデータ構造など、ほとんどの XPCOM の機能は Mozilla 1.0 を前にしたこの時間枠において、フリーズされないでしょう。</p>
-<p>この SDK はインタフェースのセットと接続ライブラリをフリーズすることも含むでしょう。このインタフェースのセットは、組み込みとプラグインの要求によって定義されてきました。これらのインタフェースは以下のものを含んでいます:</p>
-<ul> <li>nsIClassInfo</li> <li>nsIComponentManager</li> <li>nsIDirectoryService</li> <li>nsIDirectoryServiceProvider</li> <li>nsIFactory</li> <li>nsIFile</li> <li>nsIInputStream</li> <li>nsIInterfaceRequestor</li> <li>nsILocalFile</li> <li>nsIMemory</li> <li>nsIModule</li> <li>nsIObserver</li> <li>nsIOutputStream</li> <li>nsIProperties</li> <li>nsIServiceManager</li> <li>nsISimpleEnumerator</li> <li>nsISupports</li> <li>nsIWeakReference</li>
-</ul>
-<p>接続ライブラリは、気軽に使えるクラスとマクロのセット、そしてフリーズされていないクラスで構成されます。これをコンポーネント開発者は、例えば XPCOM にリンクしなくてよい nsCOMPtr の構成要素を活用することができます。<strong>次に重要な目標は XPCOM 中核の機能へのインタフェースのフリーズです。</strong></p>
-<p>ひとたび、フリーズされたインタフェースのセットを得ました。これらのインタフェースの実装の内部の起動・終了・スレッド処理などの問題に言及しなくてはいけません。トラッキングバグ {{ Bug(101976) }} の追跡で言及されるべき知られた問題を一覧とすることができます。</p>
-<h3 id="Mozilla_1.0_.E4.BB.A5.E9.99.8D:_XPCOM_.E3.81.AE.E6.94.B9.E8.89.AF" name="Mozilla_1.0_.E4.BB.A5.E9.99.8D:_XPCOM_.E3.81.AE.E6.94.B9.E8.89.AF">Mozilla 1.0 以降: XPCOM の改良</h3>
-<p>XPCOM 改良のための全体的な計画は、小さくすること、シンプルにすること、クリーンにすること、必要な機能によりチューニングすること、より関係する標準に沿わせること、などを中心に展開しています。 XPCOM を軽く保つほど、XPCOM のデバッグ、移植、保守が楽になり、アプリケーションの組み込みの手間が減ります。そのためには、それほどには活用されない XPCOM の機能はもう必要ないでしょう。単独のクライアントが使うためだけに存在するものは、検証済みでなくてはならず、願わくば根絶されるべきです。</p>
-<p>XPCOM の機能の大きな部分が、C++ クライアントへ向けられています。標準 C++ ライブラリを使った組み込みアプリケーションを期待することができます。 XPCOM の機能が標準 C++ ライブラリによって提供される類似のサービスと重なっている場所では、 API と機能を標準ライブラリのそれへ変換したいです。いずれは、クライアントは標準ライブラリから実装を入手できるようになり、API が取り除かれるようになります。</p>
-<p>標準ライブラリから提供されるのではないこれらの機能のために、私たちは適切に標準ライブラリと互換を持った API を作りたいのです。例えば、XPCOM の container は標準アルゴリズムとともに働くべきでしょう。</p>
-<h3 id=".E5.8F.82.E8.80.83.E8.B3.87.E6.96.99" name=".E5.8F.82.E8.80.83.E8.B3.87.E6.96.99">参考資料</h3>
-<ul> <li><a class="external" href="http://www.mozilla.org/projects/xpcom/XPCOM_tasks.html">既知の作業</a></li> <li>{{ Bug(98278) }} - XPCOM API 変更についてのメタバグ</li>
-</ul>
-<div class="originaldocinfo">
-<h2 id=".E5.8E.9F.E6.96.87.E6.9B.B8.E3.81.AE.E6.83.85.E5.A0.B1" name=".E5.8E.9F.E6.96.87.E6.9B.B8.E3.81.AE.E6.83.85.E5.A0.B1">原文書の情報</h2>
-<ul> <li>著者: 不明</li> <li>最終日: October 30, 2001</li> <li>著作権: Portions of this content are © 1998–2007 by individual mozilla.org contributors; content available under a Creative Commons license | <a class="external" href="http://www.mozilla.org/foundation/licensing/website-content.html">詳細</a>.</li>
-</ul>
-</div>
diff --git a/files/ja/web/accessibility/aria/aria_techniques/using_the_aria-invalid_attribute/index.html b/files/ja/web/accessibility/aria/aria_techniques/using_the_aria-invalid_attribute/index.html
index f93a7c4fd0..3c6dedd029 100644
--- a/files/ja/web/accessibility/aria/aria_techniques/using_the_aria-invalid_attribute/index.html
+++ b/files/ja/web/accessibility/aria/aria_techniques/using_the_aria-invalid_attribute/index.html
@@ -96,7 +96,7 @@ translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-invalid_at
 
 <h4 id="Working_Examples" name="Working_Examples">動作する例</h4>
 
-<p><a class="external" href="http://www.oaa-accessibility.org/examplep/alert1/"><code>alert</code> ロールの例</a>（<code>aria-invalid</code> 属性を使用）</p>
+<p><a href="https://www.w3.org/WAI/WCAG21/working-examples/aria-invalid-data-format/">正しくない形式の値を強調するために aria-invalid を使ったフォームの例</a></p>
 
 <h3 id="Notes" name="Notes">注</h3>
 
diff --git a/files/ja/web/api/atob/index.html b/files/ja/web/api/atob/index.html
new file mode 100644
index 0000000000..96eb707a54
--- /dev/null
+++ b/files/ja/web/api/atob/index.html
@@ -0,0 +1,92 @@
+---
+title: WindowOrWorkerGlobalScope.atob()
+slug: Web/API/atob
+tags:
+  - API
+  - HTML DOM
+  - Method
+  - Reference
+  - WindowOrWorkerGlobalScope
+  - atob
+translation_of: Web/API/WindowOrWorkerGlobalScope/atob
+original_slug: Web/API/WindowOrWorkerGlobalScope/atob
+---
+<p>{{APIRef("HTML DOM")}}</p>
+
+<p><strong><code>WindowOrWorkerGlobalScope.atob()</code></strong> 関数は、 {{glossary("Base64")}} エンコーディングでエンコードされたデータの文字列をデコードします。 {{domxref("WindowOrWorkerGlobalScope.btoa","btoa()")}} メソッドを使用して、通信に問題が発生する可能性のあるデータをエンコードして送信し、送信した後に <code>atob()</code> メソッドを使用して再度デコードすることができます。例えば、ASCII の 0 から 31 までのコードような制御文字をエンコードして送信し、デコードすることができます。</p>
+
+<p>Unicode や UTF-8 文字列の使用については、 {{domxref("WindowOrWorkerGlobalScope.btoa", "btoa()")}} の「Uncode 文字列」の節を参照してください。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox notranslate">var <var>decodedData</var> = scope.atob(<var>encodedData</var>);</pre>
+
+<h3 id="Parameters" name="Parameters">引数</h3>
+
+<dl>
+ <dt><code><var>encodedData</var></code></dt>
+ <dd>エンコードされたデータが入っている<a href="/ja/docs/Web/API/DOMString/Binary">バイナリ文字列</a>です。</dd>
+</dl>
+
+<h3 id="Return_value" name="Return_value">返値</h3>
+
+<p><code><var>encodedData</var></code> をデコードしたデータを含む ASCII 文字列です。</p>
+
+<h3 id="Exceptions" name="Exceptions">例外</h3>
+
+<dl>
+ <dt>{{domxref("DOMException")}} (name: <code>InvalidCharacterError</code>)</dt>
+ <dd><code><var>encodedData</var></code> が妥当な base64 ではない場合に発行されます。</dd>
+</dl>
+
+<h2 id="Example" name="Example">例</h2>
+
+<pre class="brush:js notranslate">const encodedData = window.btoa('Hello, world'); // 文字列をエンコード
+const decodedData = window.atob(encodedData); // 文字列をデコード</pre>
+
+<h2 id="Polyfill" name="Polyfill">ポリフィル</h2>
+
+<p>対応していないブラウザーでは、 <a href="https://github.com/MaxArt2501/base64-js/blob/master/base64.js">https://github.com/MaxArt2501/base64-js/blob/master/base64.js</a> のポリフィルを利用することができます。</p>
+
+<h2 id="Specifications" name="Specifications">仕様書</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">仕様書</th>
+   <th scope="col">状態</th>
+   <th scope="col">備考</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#dom-atob', 'WindowOrWorkerGlobalScope.atob()')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>最新の仕様で、メソッドを <code>WindowOrWorkerGlobalScope</code> ミックスインに移動。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', '#dom-windowbase64-atob', 'WindowBase64.atob()')}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>{{SpecName("HTML WHATWG")}} のスナップショット、変更なし。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5 W3C", "#dom-windowbase64-atob", "WindowBase64.atob()")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>{{SpecName("HTML WHATWG")}} のスナップショット。 <code>WindowBase64</code> の作成 (以前の対象だったプロパティ)。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<div>
+<p>{{Compat("api.WindowOrWorkerGlobalScope.atob")}}</p>
+</div>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs"><code>data</code> URIs</a></li>
+ <li>{{domxref("WindowOrWorkerGlobalScope.btoa","btoa()")}}</li>
+ <li><a href="/ja/docs/Mozilla/Tech/XPCOM/Language_Bindings/Components.utils.importGlobalProperties">Components.utils.importGlobalProperties</a></li>
+</ul>
diff --git a/files/ja/web/api/btoa/index.html b/files/ja/web/api/btoa/index.html
new file mode 100644
index 0000000000..69b1ec384a
--- /dev/null
+++ b/files/ja/web/api/btoa/index.html
@@ -0,0 +1,145 @@
+---
+title: WindowOrWorkerGlobalScope.btoa()
+slug: Web/API/btoa
+tags:
+  - API
+  - HTML DOM
+  - Method
+  - Reference
+  - Web
+  - WindowOrWorkerGlobalScope
+  - btoa
+  - data
+  - strings
+translation_of: Web/API/WindowOrWorkerGlobalScope/btoa
+original_slug: Web/API/WindowOrWorkerGlobalScope/btoa
+---
+<p>{{APIRef("HTML DOM")}}</p>
+
+<p><code><strong>WindowOrWorkerGlobalScope.btoa()</strong></code> メソッドは、 {{glossary("Base64")}} でエンコードされた ASCII 文字列を<a href="/ja/docs/Web/API/DOMString/Binary">バイナリ文字列</a> (例えば {{jsxref("String")}} オブジェクトのうち、文字列中のすべての文字がバイナリデータのバイトとして扱うことができるもの) から生成します。</p>
+
+<p>このメソッドを使用すると、通信に支障をきたす可能性のあるデータをエンコードして送信し、その後 {{domxref("WindowOrWorkerGlobalScope.atob", "atob()")}} メソッドを使用して再度デコードすることができます。例えば ASCII で 0 から 31 の値ような制御文字をエンコードすることもできます。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox notranslate">var <var>encodedData</var> = <var>scope</var>.btoa(<var>stringToEncode</var>);</pre>
+
+<h3 id="Parameters" name="Parameters">引数</h3>
+
+<dl>
+ <dt><code><var>stringToEncode</var></code></dt>
+ <dd>エンコードする<a href="/ja/docs/Web/API/DOMString/Binary">バイナリ文字列</a>です。</dd>
+</dl>
+
+<h3 id="Return_value" name="Return_value">返値</h3>
+
+<p><code><var>stringToEncode</var></code> の Base64 表現である ASCII 文字列です。</p>
+
+<h3 id="Exceptions" name="Exceptions">例外</h3>
+
+<dl>
+ <dt><code>InvalidCharacterError</code></dt>
+ <dd>文字列には、1 バイトに収まらない文字が含まれていた場合。詳細は後述の「Unicode文字列」を参照してください。</dd>
+</dl>
+
+<h2 id="Example" name="Example">例</h2>
+
+<pre class="brush:js notranslate">const encodedData = window.btoa('Hello, world'); // 文字列をエンコード
+const decodedData = window.atob(encodedData); // 文字列をデコード
+</pre>
+
+<h2 id="Unicode_Strings" name="Unicode_Strings">Unicode 文字列</h2>
+
+<p><code>btoa()</code> 関数は、JavaScript の文字列を引数にとります。JavaScript の文字列は UTF-16 文字エンコーディングで表現されます。このエンコーディングでは、文字列は 16 ビット (2 バイト) 単位の並びとして表現されます。すべての ASCII 文字はこれらの単位の 1 バイト目に収まりますが、他の多くの文字は収まりません。</p>
+
+<p>Base64 は、設計上、バイナリデータを入力として期待します。 JavaScript の文字列では、これは各文字が 1 バイトしか占有しない文字列を意味します。したがって、2 バイト以上の文字を含む文字列を <code>btoa()</code> に渡した場合、これはバイナリデータとはみなされないため、エラーが発生します。</p>
+
+<pre class="brush: js notranslate">const ok = "a";
+console.log(ok.codePointAt(0).toString(16)); //   61: 長さ &lt; 1 バイト
+
+const notOK = "✓"
+console.log(notOK.codePointAt(0).toString(16)); // 2713: 長さ &gt; 1 バイト
+
+console.log(btoa(ok));    // YQ==
+console.log(btoa(notOK)); // error</pre>
+
+<p><code>btoa()</code> を用いて Unicode テキストを ASCII としてエンコードする必要がある場合、一つの選択肢として、各 16 ビット単位が 1 バイトしか占有しないように文字列を変換することができます。例えば、以下のようになります。</p>
+
+<pre class="brush: js notranslate">// Unicode 文字列で、各 16 ビット単位を 1 バイトしか占有
+// しない文字列に変換します。
+function toBinary(string) {
+  const codeUnits = new Uint16Array(string.length);
+  for (let i = 0; i &lt; codeUnits.length; i++) {
+    codeUnits[i] = string.charCodeAt(i);
+  }
+  return String.fromCharCode(...new Uint8Array(codeUnits.buffer));
+}
+
+// 1 バイトを超える文字を含んだ文字列
+const myString = "☸☹☺☻☼☾☿";
+
+const converted = toBinary(myString);
+const encoded = btoa(converted);
+console.log(encoded);                 // OCY5JjomOyY8Jj4mPyY=
+</pre>
+
+<p>このようにした場合、当然ながらデコードされた文字列を逆変換する必要があります。</p>
+
+<pre class="brush: js language-js notranslate">function fromBinary(binary) {
+  const bytes = new Uint8Array(binary.length);
+  for (let i = 0; i &lt; bytes.length; i++) {
+    bytes[i] = binary.charCodeAt(i);
+  }
+  return String.fromCharCode(...new Uint16Array(bytes.buffer));
+}
+
+const decoded = atob(encoded);
+const original = fromBinary(decoded);
+console.log(original);                // ☸☹☺☻☼☾☿
+</pre>
+
+<h2 id="Polyfill" name="Polyfill">ポリフィル</h2>
+
+<p>対応していないブラウザーでは、 <a href="https://github.com/MaxArt2501/base64-js/blob/master/base64.js">https://github.com/MaxArt2501/base64-js/blob/master/base64.js</a> のポリフィルを利用することができます。</p>
+
+<h2 id="Specifications" name="Specifications">仕様書</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">仕様書</th>
+   <th scope="col">状態</th>
+   <th scope="col">備考</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#dom-btoa', 'WindowOrWorkerGlobalScope.btoa()')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>最新の仕様で、メソッドを <code>WindowOrWorkerGlobalScope</code> ミックスインに移動。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', '#dom-windowbase64-btoa', 'WindowBase64.btoa()')}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>{{SpecName("HTML WHATWG")}} のスナップショット、変更なし。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5 W3C", "#dom-windowbase64-btoa", "WindowBase64.btoa()")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>{{SpecName("HTML WHATWG")}} のスナップショット。 <code>WindowBase64</code> の作成 (properties where on the target before it).</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<div>
+<p>{{Compat("api.WindowOrWorkerGlobalScope.btoa")}}</p>
+</div>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/HTTP/Basics_of_HTTP/Data_URIs"><code>data</code> URI</a></li>
+ <li>{{domxref("WindowOrWorkerGlobalScope.atob","atob()")}}</li>
+</ul>
diff --git a/files/ja/web/api/caches/index.html b/files/ja/web/api/caches/index.html
new file mode 100644
index 0000000000..24bcabe2aa
--- /dev/null
+++ b/files/ja/web/api/caches/index.html
@@ -0,0 +1,83 @@
+---
+title: WorkerGlobalScope.caches
+slug: Web/API/caches
+tags:
+  - API
+  - Experimental
+  - Property
+  - Read-only
+  - Reference
+  - Service Workers
+  - Web Workers
+  - Window
+  - WindowOrWorkerGlobalScope
+translation_of: Web/API/WindowOrWorkerGlobalScope/caches
+original_slug: Web/API/WindowOrWorkerGlobalScope/caches
+---
+<div>{{APIRef()}}{{SeeCompatTable}}</div>
+
+<p>{{domxref("WindowOrWorkerGlobalScope")}} インターフェイスの <code><strong>caches</strong></code> 読み取り専用プロパティは、現在のワーカーコンテキストに関連する {{domxref("CacheStorage")}} オブジェクトを返します。このオブジェクトにより、オフライン利用のために資産 (assets、アセット) を保存したり、リクエストに対するカスタムレスポンスを生成したりするなどの機能を使用できます。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox">var <em>myCacheStorage</em> = self.caches; // または単に caches
+</pre>
+
+<h3 id="Value" name="Value">値</h3>
+
+<p>{{domxref("CacheStorage")}}。</p>
+
+<h2 id="Example" name="Example">例</h2>
+
+<p>次の例では、アセットをオフラインで利用できるようにするために、<a href="/ja/docs/Web/API/Service_Worker_API">ServiceWorker</a> コンテキストでキャッシュを使う方法を示しています。</p>
+
+<pre class="brush: js">this.addEventListener('install', function(event) {
+  event.waitUntil(
+    caches.open('v1').then(function(cache) {
+      return cache.addAll(
+        '/sw-test/',
+        '/sw-test/index.html',
+        '/sw-test/style.css',
+        '/sw-test/app.js',
+        '/sw-test/image-list.js',
+        '/sw-test/star-wars-logo.jpg',
+        '/sw-test/gallery/',
+        '/sw-test/gallery/bountyHunters.jpg',
+        '/sw-test/gallery/myLittleVader.jpg',
+        '/sw-test/gallery/snowTroopers.jpg'
+      );
+    })
+  );
+});</pre>
+
+<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('Service Workers')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>初期定義。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザー実装状況</h2>
+
+
+
+<p>{{Compat("api.WindowOrWorkerGlobalScope.caches")}}</p>
+
+<h2 id="See_also" name="See_also">関連項目</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/API/ServiceWorker_API">Service Workers</a></li>
+ <li><a href="/ja/docs/Web/API/Web_Workers_API">Web Workers</a></li>
+ <li>{{domxref("CacheStorage")}}</li>
+ <li>{{domxref("Cache")}}</li>
+</ul>
diff --git a/files/ja/web/api/canvasrenderingcontext2d/setlinedash/index.html b/files/ja/web/api/canvasrenderingcontext2d/setlinedash/index.html
index 74051e9a9d..d54da1283b 100644
--- a/files/ja/web/api/canvasrenderingcontext2d/setlinedash/index.html
+++ b/files/ja/web/api/canvasrenderingcontext2d/setlinedash/index.html
@@ -25,7 +25,7 @@ translation_of: Web/API/CanvasRenderingContext2D/setLineDash
 
 <h2 id="例">例</h2>
 
-<h3 id="簡単な例">簡単な例</h3>
+<h3 id="Basic_example">簡単な例</h3>
 
 <p>この例では、<code>setLineDash()</code>メソッドを使用して、実線の上に破線を描画します。</p>
 
@@ -58,7 +58,7 @@ ctx.stroke();
 
 <p>{{ EmbedLiveSample('Basic_example', 700, 180) }}</p>
 
-<h3 id="いくつかの一般的な模様">いくつかの一般的な模様</h3>
+<h3 id="Some_common_patterns">いくつかの一般的な模様</h3>
 
 <p>この例は、さまざまな一般的な破線のパターンを示しています。</p>
 
diff --git a/files/ja/web/api/clearinterval/index.html b/files/ja/web/api/clearinterval/index.html
new file mode 100644
index 0000000000..3bccc06f99
--- /dev/null
+++ b/files/ja/web/api/clearinterval/index.html
@@ -0,0 +1,67 @@
+---
+title: window.clearInterval
+slug: Web/API/clearInterval
+tags:
+  - DOM
+  - DOM_0
+  - Gecko
+  - JavaScript timers
+  - Window
+translation_of: Web/API/WindowOrWorkerGlobalScope/clearInterval
+original_slug: Web/API/WindowOrWorkerGlobalScope/clearInterval
+---
+<div>{{ApiRef}}</div>
+
+<h2 id="Summary" name="Summary">概要</h2>
+
+<p>{{domxref("window.setInterval", "setInterval")}} を使用して設定された繰り返し動作をキャンセルします。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox"><em>window</em>.clearInterval(<var>intervalID</var>)
+</pre>
+
+<ul>
+ <li><code>intervalID</code>: キャンセルする繰り返し動作の識別子。この ID は <code>setInterval()</code> の戻り値です。</li>
+</ul>
+
+<h2 id="Example" name="Example">例</h2>
+
+<p>{{domxref("window.setInterval", "setInterval()", "example")}} の例を参照して下さい。</p>
+
+<h2 id="Specification" name="Specification">仕様</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>仕様書</th>
+   <th>策定状況</th>
+   <th>コメント</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'webappapis.html#dom-setInterval', 'WindowOrWorkerGlobalScope.clearInterval()')}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td>最新の仕様で、メソッドを <code>WindowOrWorkerGlobalScope</code> ミックスインに移動。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML WHATWG", "webappapis.html#dom-setInterval", "WindowTimers.setInterval()")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザー実装状況</h2>
+
+<p>{{Compat("api.WindowOrWorkerGlobalScope.clearInterval")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/JavaScript/Timers" title="JavaScript/Timers">JavaScript timers</a></li>
+ <li>{{domxref("window.setTimeout")}}</li>
+ <li>{{domxref("window.setInterval")}}</li>
+ <li>{{domxref("window.clearTimeout")}}</li>
+ <li>{{domxref("window.requestAnimationFrame")}}</li>
+ <li><a href="/ja/docs/JavaScript/Timers/Daemons"><em>Daemons</em> management</a></li>
+</ul>
diff --git a/files/ja/web/api/cleartimeout/index.html b/files/ja/web/api/cleartimeout/index.html
new file mode 100644
index 0000000000..bc1b59314e
--- /dev/null
+++ b/files/ja/web/api/cleartimeout/index.html
@@ -0,0 +1,101 @@
+---
+title: WindowOrWorkerGlobalScope.clearTimeout()
+slug: Web/API/clearTimeout
+tags:
+  - API
+  - HTML DOM
+  - Method
+  - Reference
+  - WindowOrWorkerGlobalScope
+  - clearTimeout
+  - メソッド
+  - リファレンス
+translation_of: Web/API/WindowOrWorkerGlobalScope/clearTimeout
+original_slug: Web/API/WindowOrWorkerGlobalScope/clearTimeout
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p><strong><code>clearTimeout()</code></strong> は {{domxref("WindowOrWorkerGlobalScope")}} ミックスインのメソッドで、以前の {{domxref("WindowOrWorkerGlobalScope.setTimeout", "setTimeout()")}} の呼び出しによって以前に確立されたタイムアウトを解除します。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox"><em>scope</em>.clearTimeout(<em>timeoutID</em>)
+</pre>
+
+<h3 id="Parameters" name="Parameters">引数</h3>
+
+<dl>
+ <dt><code><em>timeoutID</em></code></dt>
+ <dd>解除したいタイマの ID です。 ID は <code>setTimeout()</code> の返値によって取得できます。</dd>
+</dl>
+
+<p>注目すべきは、 {{domxref("WindowOrWorkerGlobalScope.setTimeout", "setTimeout()")}} および {{domxref("WindowOrWorkerGlobalScope.setInterval", "setInterval()")}} で使用される ID のプールは共有されますので、技術的には <code>clearTimeout()</code> および {{domxref("WindowOrWorkerGlobalScope.clearInterval", "clearInterval()")}} は互いに交換できます。しかし、明確化のため、そのようなことは避けてください。</p>
+
+<h2 id="Example" name="Example">例</h2>
+
+<p>ウェブページのコンテキストで以下のスクリプトを実行し、ページを一度クリックしてください。１秒後にメッセージがポップアップします。１秒間に複数回ページをクリックしても、アラートは一度しか表示されません。</p>
+
+<pre class="brush: js">var alarm = {
+  remind: function(aMessage) {
+    alert(aMessage);
+    this.timeoutID = undefined;
+  },
+
+  setup: function() {
+    if (typeof this.timeoutID === 'number') {
+      this.cancel();
+    }
+
+    this.timeoutID = window.setTimeout(function(msg) {
+      this.remind(msg);
+    }.bind(this), 1000, 'Wake up!');
+  },
+
+  cancel: function() {
+    window.clearTimeout(this.timeoutID);
+  }
+};
+window.onclick = function() { alarm.setup(); };
+</pre>
+
+<h2 id="Notes" name="Notes">メモ</h2>
+
+<p><code>clearTimeout()</code> へ妥当ではない ID を渡しても、何の効果もありません。例外は発生しません。</p>
+
+<h2 id="Specification" name="Specification">仕様書</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">仕様書</th>
+   <th scope="col">状態</th>
+   <th scope="col">備考</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'webappapis.html#dom-cleartimeout', 'WindowOrWorkerGlobalScope.clearTimeout()')}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td>最新の仕様で、メソッドを <code>WindowOrWorkerGlobalScope</code> ミックスインに移動。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'webappapis.html#dom-cleartimeout', 'clearTimeout()')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<p>{{Compat("api.WindowOrWorkerGlobalScope.clearTimeout")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{domxref("WindowOrWorkerGlobalScope.setTimeout()")}}</li>
+ <li>{{domxref("WindowOrWorkerGlobalScope.setInterval()")}}</li>
+ <li>{{domxref("WindowOrWorkerGlobalScope.clearInterval()")}}</li>
+ <li>{{domxref("Window.requestAnimationFrame()")}}</li>
+ <li><a href="/ja/docs/JavaScript/Timers/Daemons" title="JavaScript/Timers/Daemons"><em>Daemons</em> management</a></li>
+</ul>
diff --git a/files/ja/web/api/createimagebitmap/index.html b/files/ja/web/api/createimagebitmap/index.html
new file mode 100644
index 0000000000..940af211e0
--- /dev/null
+++ b/files/ja/web/api/createimagebitmap/index.html
@@ -0,0 +1,104 @@
+---
+title: self.createImageBitmap()
+slug: Web/API/createImageBitmap
+tags:
+  - API
+  - Canvas
+  - DOM
+  - createImageBitmap
+translation_of: Web/API/WindowOrWorkerGlobalScope/createImageBitmap
+original_slug: Web/API/WindowOrWorkerGlobalScope/createImageBitmap
+---
+<div>{{APIRef("Canvas API")}}</div>
+
+<p><code><strong>createImageBitmap()</strong></code> メソッドは、指定されたソースからビットマップを作成します。このメソッドは、windows と worker の両方のグローバルスコープに存在します。このメソッドは、さまざまな異なる画像ソースを受け付け、{{domxref("Promise")}} を返し、{{domxref("ImageBitmap")}} に解決します。</p>
+
+<h2 id="シンタックス">シンタックス</h2>
+
+<pre class="syntaxbox notranslate">const imageBitmapPromise = createImageBitmap(<em>image</em>[, options]);
+const imageBitmapPromise = createImageBitmap(<em>image, sx, sy, sw, sh</em>[, options]);</pre>
+
+<h3 id="パラメータ">パラメータ</h3>
+
+<dl>
+ <dt><code>image</code></dt>
+ <dd>画像ソースで {{HTMLElement("img")}}、SVG {{SVGElement("image")}}、{{HTMLElement("video")}}、{{HTMLElement("canvas")}}、{{domxref("HTMLImageElement")}}、{{domxref("SVGImageElement")}}、{{domxref("HTMLVideoElement")}}、{{domxref("HTMLCanvasElement")}}、{{domxref("Blob")}}、{{domxref("ImageData")}}、{{domxref("ImageBitmap")}} または {{domxref("OffscreenCanvas")}} オブジェクトのいずれかになります。</dd>
+ <dt><code>sx</code></dt>
+ <dd><code>ImageBitmap</code> が抽出される矩形の参照点の x 座標。</dd>
+ <dt><code>sy</code></dt>
+ <dd><code>ImageBitmap</code> が抽出される矩形の参照点の y 座標。</dd>
+ <dt><code>sw</code></dt>
+ <dd><code>ImageBitmap</code> が抽出される矩形の幅。この値は負の値にすることができます。</dd>
+ <dt><code>sh</code></dt>
+ <dd><code>ImageBitmap</code> が抽出される矩形の高さ。この値は負の値にすることができます。</dd>
+ <dt><code>options</code> {{optional_inline}}</dt>
+ <dd>画像の抽出のためのオプションを設定するオブジェクト。利用可能なオプションは以下の通りです。
+ <ul>
+  <li><code>imageOrientation</code>: 画像をそのまま表示するか、垂直方向に反転させて表示するかを指定します。<code>none</code> (デフォルト) または <code>flipY</code> のいずれかを指定します</li>
+  <li><code>premultiplyAlpha</code>: ビットマップのカラーチャンネルをアルファチャンネルで前置増幅するかどうかを指定します。<code>none</code>、<code>premultiply</code>、<code>default</code> (デフォルト) のいずれかです</li>
+  <li><code>colorSpaceConversion</code>: 画像を色空間変換でデコードするかどうかを指定します。<code>none</code> または <code>default</code> (デフォルト) のいずれかを指定します。値 <code>default</code> は、実装固有の動作を使用することを示します</li>
+  <li><code>resizeWidth</code>: 出力幅を示す long 整数</li>
+  <li><code>resizeHeight</code>: 出力の高さを示す long 整数</li>
+  <li><code>resizeQuality</code>: 出力寸法に合わせて入力のサイズを変更するために使用するアルゴリズムを指定します。<code>pixelated</code>、<code>low</code> (デフォルト)、<code>medium</code>、<code>high</code>のいずれかです</li>
+ </ul>
+ </dd>
+</dl>
+
+<h3 id="戻り値">戻り値</h3>
+
+<p>与えられた矩形のビットマップデータを含む{{domxref("ImageBitmap")}} オブジェクトに解決する{{domxref("Promise")}} を返します。</p>
+
+<h2 id="例">例</h2>
+
+<h3 id="スプライトシートからのスプライト作成">スプライトシートからのスプライト作成</h3>
+
+<p>この例では、スプライトシートをロードし、個々のスプライトを抽出し、各スプライトをキャンバスにレンダリングします。スプライトシートとは、複数の小さな画像を含む画像で、それぞれを個別にレンダリングできるようにしたいものです。</p>
+
+<pre class="brush: js  language-js notranslate">var canvas = document.getElementById('myCanvas'),
+ctx = canvas.getContext('2d'),
+image = new Image();
+
+// スプライトシートがロードされるのを待ちます
+image.onload = function() {
+  Promise.all([
+    // スプライトシートから2つのスプライトを切り取ります
+    createImageBitmap(image, 0, 0, 32, 32),
+    createImageBitmap(image, 32, 0, 32, 32)
+  ]).then(function(sprites) {
+    // 各スプライトをキャンバスに描きます
+    ctx.drawImage(sprites[0], 0, 0);
+    ctx.drawImage(sprites[1], 32, 32);
+  });
+}
+
+// 画像ファイルからスプライトシートを読み込みます
+image.src = 'sprites.png';
+</pre>
+
+<h2 id="仕様">仕様</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">仕様書</th>
+   <th scope="col">ステータス</th>
+   <th scope="col">コメント</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "webappapis.html#dom-createimagebitmap", "createImageBitmap")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="ブラウザの互換性">ブラウザの互換性</h2>
+
+<p>{{Compat("api.WindowOrWorkerGlobalScope.createImageBitmap")}}</p>
+
+<h2 id="あわせて参照">あわせて参照</h2>
+
+<ul>
+ <li>{{domxref("CanvasRenderingContext2D.drawImage()")}}</li>
+ <li>{{domxref("ImageData")}}</li>
+</ul>
diff --git a/files/ja/web/api/document/childelementcount/index.html b/files/ja/web/api/document/childelementcount/index.html
new file mode 100644
index 0000000000..fcd6244dd0
--- /dev/null
+++ b/files/ja/web/api/document/childelementcount/index.html
@@ -0,0 +1,46 @@
+---
+title: Document.childElementCount
+slug: Web/API/Document/childElementCount
+tags:
+  - API
+  - DOM
+  - Property
+  - Reference
+browser-compat: api.Document.childElementCount
+translation_of: Web/API/Document/childElementCount
+---
+<div>{{ APIRef("DOM") }}</div>
+
+<p><code><strong>Document.childElementCount</strong></code> は読み取り専用のプロパティで、文書の子要素の数を返します。</p>
+
+<p>特定の要素の子要素の数を取得する場合は、 {{domxref("Element.childElementCount")}} を参照してください。</p>
+
+<h2 id="Syntax">構文</h2>
+
+<pre class="brush: js"><em>document</em>.childElementCount;
+</pre>
+
+<h2 id="Example">例</h2>
+
+<pre class="brush:js">
+document.children;
+// HTMLCollection で、ふつうは &lt;html&gt; 要素をこの文書の唯一の子として含んでいる
+
+document.childElementCount;
+// 1
+</pre>
+
+<h2 id="Specifications">仕様書</h2>
+
+{{Specifications}}
+
+<h2 id="Browser_compatibility">ブラウザーの互換性</h2>
+
+<p>{{Compat}}</p>
+
+<h2 id="See_also">関連情報</h2>
+
+<ul>
+  <li>{{domxref("Element.childElementCount")}}</li>
+  <li>{{domxref("DocumentFragment.childElementCount")}}</li>
+</ul>
diff --git a/files/ja/web/api/document/getelementbyid/index.html b/files/ja/web/api/document/getelementbyid/index.html
index 47aad75103..6bf6b57b97 100644
--- a/files/ja/web/api/document/getelementbyid/index.html
+++ b/files/ja/web/api/document/getelementbyid/index.html
@@ -100,7 +100,7 @@ element.id = 'testqq';
 var el = document.getElementById('testqq'); // el は null になります
 </pre>
 
-<p><strong>HTML 以外の文書</strong>の場合。 DOM の実装では、どの属性が ID 類であるかを示す情報が必要です。 "id" という名前の属性は、文書の DTD で定義されていない限り ID 類とみなされません。 <code>id</code> 属性は <a href="/ja/docs/XHTML" title="ja/docs/XHTML">XHTML</a>, <a href="/ja/docs/XUL" title="ja/docs/XUL">XUL</a> などの一般的な場合には ID 類として定義されています。属性が ID 類であるかどうかが分からない実装では、 <code>null</code> を返すでしょう。</p>
+<p><strong>HTML 以外の文書</strong>の場合。 DOM の実装では、どの属性が ID 類であるかを示す情報が必要です。 "id" という名前の属性は、文書の DTD で定義されていない限り ID 類とみなされません。 <code>id</code> 属性は <a href="/ja/docs/XHTML">XHTML</a>, <a href="/ja/docs/XUL">XUL</a> などの一般的な場合には ID 類として定義されています。属性が ID 類であるかどうかが分からない実装では、 <code>null</code> を返すでしょう。</p>
 
 <h2 id="Specification" name="Specification">仕様書</h2>
 
@@ -145,5 +145,5 @@ var el = document.getElementById('testqq'); // el は null になります
 <ul>
  <li>{{domxref("Document")}}: 文書内で要素への参照を取得するために使うことができる他のメソッドやプロパティで使用するための参照。</li>
  <li>{{domxref("Document.querySelector()")}}: <code>'div.myclass'</code> のようなセレクターを通したクエリのためのもの。</li>
- <li><a href="/ja/docs/xml/xml:id" title="ja/docs/xml/id">xml:id</a> - <code>getElementById()</code> による XML 文書 (Ajax 呼び出しによって返されるものなど) の 'xml:id' の取得を可能とする便利なメソッドを持つ</li>
+ <li><a href="/ja/docs/xml/xml:id">xml:id</a> - <code>getElementById()</code> による XML 文書 (Ajax 呼び出しによって返されるものなど) の 'xml:id' の取得を可能とする便利なメソッドを持つ</li>
 </ul>
diff --git a/files/ja/web/api/document/queryselector/index.html b/files/ja/web/api/document/queryselector/index.html
index 96734201de..c0af97a434 100644
--- a/files/ja/web/api/document/queryselector/index.html
+++ b/files/ja/web/api/document/queryselector/index.html
@@ -7,60 +7,62 @@ tags:
   - DOM
   - DOM 要素
   - Document
-  - Reference
-  - querySelector
-  - セレクター
   - メソッド
+  - リファレンス
+  - Selector API
+  - セレクター
+  - querySelector
 translation_of: Web/API/Document/querySelector
+browser-compat: api.Document.querySelector
 ---
 <div>{{ApiRef("DOM")}}</div>
 
 <p>{{domxref("Document")}} の <code><strong>querySelector()</strong></code> メソッドは、指定されたセレクターまたはセレクターのグループに一致する、文書内の最初の {{domxref("Element")}} を返します。一致するものが見つからない場合は <code>null</code> を返します。</p>
 
 <div class="note">
-<p><strong>メモ</strong>: 比較処理は、文書マークアップにおける最初の要素を経由して文書ノードの<ruby>深さ優先前順走査<rp> (</rp><rt>depth-first pre-order traversal</rt><rp>) </rp></ruby>を使用して実行され、子ノードのカウント順で順次ノードを反復して行われます。</p>
+<p><strong>メモ</strong>: 比較処理は、文書マークアップにおける最初の要素を経由して文書ノードの深さ優先前順走査 (depth-first pre-order traversal) を使用して実行され、子ノードのカウント順で順次ノードを反復して行われます。</p>
 </div>
 
-<h2 id="Syntax" name="Syntax">構文</h2>
+<h2 id="Syntax">構文</h2>
 
-<pre class="syntaxbox notranslate"><var>element</var> = document.querySelector(<var>selectors</var>);
+<pre class="syntaxbox"><var>element</var> = document.querySelector(<var>selectors</var>);
 </pre>
 
-<h3 id="Parameters" name="Parameters">引数</h3>
+<h3 id="Parameters">引数</h3>
 
 <dl>
- <dt><var>selectors</var></dt>
- <dd>1 つまたは複数のセレクターを含む {{domxref("DOMString")}}。この文字列は妥当な CSS セレクターでなければならず、そうでない場合は <code>SYNTAX_ERR</code> が投げられます。セレクターとその管理の方法の詳細について、<a href="/ja/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors">セレクターを使用した DOM 要素の指定</a>を参照してください。</dd>
+  <dt><var>selectors</var></dt>
+  <dd>1 つまたは複数のセレクターを含む {{domxref("DOMString")}}。この文字列は妥当な CSS セレクターでなければならず、そうでない場合は <code>SyntaxError</code> が発生します。セレクターとその管理の方法の詳細について、<a href="/ja/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors">セレクターを使用した DOM 要素の指定</a>を参照してください。</dd>
 </dl>
 
 <div class="note">
-<p><strong>メモ:</strong> 標準の CSS 構文の一部ではない文字は、バックスラッシュ文字を使ってエスケープしなければなりません。JavaScript でもバックスラッシュのエスケープが使われているため、これらの文字を使った文字列リテラルを記述する際は、特に注意する必要があります。詳細は{{anch("Escaping special characters", "特殊文字のエスケープ")}}を参照してください。</p>
+<p><strong>メモ:</strong> 標準の CSS 構文に含まれない文字は、バックスラッシュ文字を使ってエスケープしなければなりません。JavaScript でもバックスラッシュのエスケープが使われているため、これらの文字を使った文字列リテラルを記述する際は、特に注意する必要があります。詳細は{{anch("Escaping special characters", "特殊文字のエスケープ")}}を参照してください。</p>
 </div>
 
-<h3 id="Return_value" name="Return_value">返値</h3>
+<h3 id="Return_value">返値</h3>
 
-<p>文書内で指定された <a href="/ja/docs/Web/CSS/CSS_Selectors">CSS セレクター</a>に最初に一致する要素を示す {{domxref("HTMLElement")}} オブジェクト、もしくは、一致する要素がない場合は <code>null</code> を返します。</p>
+<p>文書内で指定された <a href="/ja/docs/Web/CSS/CSS_Selectors">CSS セレクター</a>に最初に一致する要素を示す {{domxref("Element")}} オブジェクト、もしくは、一致する要素がない場合は <code>null</code> を返します。</p>
 
 <p>指定されたセレクターに一致するすべての要素のリストが必要な場合は、代わりに {{domxref("Document.querySelectorAll", "querySelectorAll()")}} を使用してください。</p>
 
-<h3 id="Exceptions" name="Exceptions">例外</h3>
+<h3 id="Exceptions">例外</h3>
 
 <dl>
- <dt><code>SYNTAX_ERR</code></dt>
- <dd>指定された <var>selectors</var> の構文が妥当ではない。</dd>
+  <dt><code>SyntaxError</code></dt>
+  <dd>指定された <var>selectors</var> の構文が妥当ではない。</dd>
 </dl>
 
-<h2 id="Usage_notes" name="Usage_notes">使用上のメモ</h2>
+<h2 id="Usage_notes">使用上のメモ</h2>
 
 <p>指定されたセレクターが、誤って文書内で複数回使われている ID に一致する場合は、その ID を持つ最初の要素が返されます。</p>
 
-<p><a href="/ja/docs/Web/CSS/Pseudo-elements">CSS 擬似要素</a>は <a href="http://www.w3.org/TR/selectors-api/#grammar">Selectors API</a> で策定されている通り、何も要素を返しません。</p>
+<p><a href="/ja/docs/Web/CSS/Pseudo-elements">CSS 擬似要素</a>は <a href="https://www.w3.org/TR/selectors-api/#grammar">Selectors API</a> で策定されている通り、何も要素を返しません。</p>
 
-<h3 id="Escaping_special_characters" name="Escaping_special_characters">特殊文字のエスケープ</h3>
+<h3 id="Escaping_special_characters">特殊文字のエスケープ</h3>
 
 <p>標準の CSS の構文に従っていない ID やセレクター (例えば、コロンやスペースを不適切に使用しているもの) で一致させるためには、バックスラッシュ ("<code>\</code>") でその文字をエスケープしなければなりません。バックスラッシュは JavaScript のエスケープ文字でもあるので、文字列リテラルを入力する場合、それを <em>2 回</em>エスケープする必要があります (1 回目は JavaScript の文字列のため、2 回目は <code>querySelector()</code> のため)。</p>
 
-<pre class="brush: html notranslate">&lt;div id="foo\bar"&gt;&lt;/div&gt;
+<pre class="brush: html">&lt;div id="foo\bar"&gt;&lt;/div&gt;
 &lt;div id="foo:bar"&gt;&lt;/div&gt;
 
 &lt;script&gt;
@@ -75,59 +77,43 @@ translation_of: Web/API/Document/querySelector
   document.querySelector('#foo\\:bar');  // 2番目の div に一致する
 &lt;/script&gt;</pre>
 
-<h2 id="Example" name="Example">例</h2>
+<h2 id="Example">例</h2>
 
-<h3 id="Finding_the_first_element_matching_a_class" name="Finding_the_first_element_matching_a_class">あるクラスに一致する最初の要素を探索する</h3>
+<h3 id="Finding_the_first_element_matching_a_class">あるクラスに一致する最初の要素を探索する</h3>
 
 <p>次の例は、クラス "<code>myclass</code>" を持つ文書内の要素の内、最初のものを返します。</p>
 
-<pre class="brush: js notranslate">var el = document.querySelector(".myclass");
+<pre class="brush: js">var el = document.querySelector(".myclass");
 </pre>
 
-<h3 id="A_more_complex_selector" name="A_more_complex_selector">より複雑なセレクター</h3>
+<h3 id="A_more_complex_selector">より複雑なセレクター</h3>
 
 <p>セレクターは、次の例で示しているように、実に力強いものになり得ます。ここでは、文書内でクラスが "user-panel main" である {{HTMLElement("div")}} (<code>&lt;div class="user-panel main"&gt;</code>) の中にある、"login" という名前を持つ最初の {{HTMLElement("input")}} 要素 (<code>&lt;input name="login"/&gt;</code>) が返されます。</p>
 
-<pre class="brush: js notranslate">var el = document.querySelector("div.user-panel.main input[name='login']");
+<pre class="brush: js">var el = document.querySelector("div.user-panel.main input[name='login']");
 </pre>
 
-<h3 id="Negation" name="Negation">否定</h3>
+<h3 id="Negation">否定</h3>
 
 <p>すべての CSS セレクター文字列が正しい場合、セレクターを否定することもできます。</p>
 
-<pre class="brush: js notranslate">var el = document.querySelector("div.user-panel:not(.main) input[name='login']");</pre>
+<pre class="brush: js">var el = document.querySelector("div.user-panel:not(.main) input[name='login']");</pre>
 
 <p>これで、input 要素のうち親に <code>user-panel</code> クラスのついた div があるものの、<code>main</code> クラスがないものを 1 つ選択します。</p>
 
-<h2 id="Specifications" name="Specifications">仕様書</h2>
+<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 WHATWG", "#dom-parentnode-queryselector", "document.querySelector()")}}</td>
-   <td>{{Spec2("DOM WHATWG")}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
+{{Specifications}}
 
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+<h2 id="Browser_compatibility">ブラウザーの互換性</h2>
 
-<div>{{Compat("api.Document.querySelector")}}</div>
+<div>{{Compat}}</div>
 
-<h2 id="See_also" name="See_also">関連情報</h2>
+<h2 id="See_also">関連情報</h2>
 
 <ul>
- <li><a href="/ja/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors">セレクターを使用した DOM 要素の指定</a></li>
- <li>{{domxref("Element.querySelector()")}}</li>
- <li>{{domxref("Document.querySelectorAll()")}}</li>
- <li>{{domxref("Element.querySelectorAll()")}}</li>
- <li><a href="/ja/docs/Code_snippets/QuerySelector">querySelector のコードスニペット</a></li>
+  <li><a href="/ja/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors">セレクターを使用した DOM 要素の指定</a></li>
+  <li>{{domxref("Element.querySelector()")}}</li>
+  <li>{{domxref("Document.querySelectorAll()")}}</li>
+  <li>{{domxref("Element.querySelectorAll()")}}</li>
 </ul>
diff --git a/files/ja/web/api/document_object_model/locating_dom_elements_using_selectors/index.html b/files/ja/web/api/document_object_model/locating_dom_elements_using_selectors/index.html
index 65524033fb..4eb86d5287 100644
--- a/files/ja/web/api/document_object_model/locating_dom_elements_using_selectors/index.html
+++ b/files/ja/web/api/document_object_model/locating_dom_elements_using_selectors/index.html
@@ -46,5 +46,5 @@ translation_of: Web/API/Document_object_model/Locating_DOM_elements_using_select
  <li>{{domxref("Element.querySelectorAll()")}}</li>
  <li>{{domxref("Document.querySelector()")}}</li>
  <li>{{domxref("Document.querySelectorAll()")}}</li>
- <li><a href="/ja/docs/Code_snippets/QuerySelector" title="ja/docs/Code_snippets/QuerySelector">Code snippets for querySelector</a></li>
+ <li><a href="/ja/docs/Code_snippets/QuerySelector">Code snippets for querySelector</a></li>
 </ul>
diff --git a/files/ja/web/api/documentfragment/childelementcount/index.html b/files/ja/web/api/documentfragment/childelementcount/index.html
new file mode 100644
index 0000000000..16bc5ed135
--- /dev/null
+++ b/files/ja/web/api/documentfragment/childelementcount/index.html
@@ -0,0 +1,48 @@
+---
+title: DocumentFragment.childElementCount
+slug: Web/API/DocumentFragment/childElementCount
+tags:
+  - API
+  - DOM
+  - Property
+  - Reference
+browser-compat: api.DocumentFragment.childElementCount
+translation_of: Web/API/DocumentFragment/childElementCount
+---
+<div>{{ APIRef("DOM") }}</div>
+
+<p><code><strong>Document.childElementCount</strong></code> は読み取り専用のプロパティで、 <code>DocumentFragment</code> の子要素の数を返します。</p>
+
+<p>特定の要素の子要素の数を取得する場合は、 {{domxref("Element.childElementCount")}} を参照してください。</p>
+
+<h2 id="Syntax">構文</h2>
+
+<pre class="brush: js"><em>fragment</em>.childElementCount;
+</pre>
+
+<h2 id="Example">例</h2>
+
+<pre class="brush:js">
+let fragment = new DocumentFragment()
+fragment.childElementCount; // 0
+
+let paragraph = document.createElement('p')
+fragment.appendChild(paragraph)
+
+fragment.childElementCount; // 1
+</pre>
+
+<h2 id="Specifications">仕様書</h2>
+
+{{Specifications}}
+
+<h2 id="Browser_compatibility">ブラウザーの互換性</h2>
+
+<p>{{Compat}}</p>
+
+<h2 id="See_also">関連情報</h2>
+
+<ul>
+  <li>{{domxref("Element.childElementCount")}}</li>
+  <li>{{domxref("Document.childElementCount")}}</li>
+</ul>
diff --git a/files/ja/web/api/domstringlist/index.html b/files/ja/web/api/domstringlist/index.html
index 27c3d8eb74..dfdf9efb5d 100644
--- a/files/ja/web/api/domstringlist/index.html
+++ b/files/ja/web/api/domstringlist/index.html
@@ -10,7 +10,7 @@ translation_of: Web/API/DOMStringList
 ---
 <p>{{APIRef("DOM")}}</p>
 
-<p><a href="/ja/DOM/DOMString" title="ja/DOM/DOMString">DOMString</a> (strings) のリストを含むいくつかの API が返す型です。</p>
+<p><a href="/ja/DOM/DOMString">DOMString</a> (strings) のリストを含むいくつかの API が返す型です。</p>
 
 <h2 id="Properties" name="Properties">プロパティ</h2>
 
diff --git a/files/ja/web/api/element/append/index.html b/files/ja/web/api/element/append/index.html
new file mode 100644
index 0000000000..82feaa6f91
--- /dev/null
+++ b/files/ja/web/api/element/append/index.html
@@ -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/childelementcount/index.html b/files/ja/web/api/element/childelementcount/index.html
index a06357d366..c3520c9a31 100644
--- a/files/ja/web/api/element/childelementcount/index.html
+++ b/files/ja/web/api/element/childelementcount/index.html
@@ -1,96 +1,42 @@
 ---
-title: ParentNode.childElementCount
+title: Element.childElementCount
 slug: Web/API/Element/childElementCount
 tags:
   - API
   - DOM
-  - ParentNode
   - Property
-translation_of: Web/API/ParentNode/childElementCount
+  - 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>ParentNode.childElementCount</strong></code> プロパティは、与えられた要素の子要素の数を表す <code>unsigned long</code> 値を返します。</p>
+<p><code><strong>Element.childElementCount</strong></code> は読み取り専用のプロパティで、この要素の子要素の数を返します。</p>
 
-<div class="note">
-<p>このプロパティは、当初 {{domxref("ElementTraversal")}} 基本インターフェースで定義されていました。このインターフェースには 2 セットの異なるプロパティが含まれており、一つは子要素を持つ {{domxref("Node")}} を対象とし、もう一つはその子要素群を対象としたものでしたが、これらは 2 つの基本インターフェースである {{domxref("ParentNode")}} と {{domxref("ChildNode")}} に移されました。この際、<code>childElementCount</code> は {{domxref("ParentNode")}} へ移されました。これは技術的な変更であり、互換性に影響を与えるものではありません。</p>
-</div>
+<h2 id="Syntax">構文</h2>
 
-<h2 id="Syntax" name="Syntax">構文</h2>
+<pre class="brush: js">element.childElementCount;</pre>
 
-<pre class="syntaxbox notranslate">var <var>count</var> = <em>node</em>.childElementCount;
-</pre>
-
-<dl>
- <dt><code>count</code></dt>
- <dd><code>unsigned long</code> 型(つまり整数型)の戻り値.</dd>
- <dt><code>node</code></dt>
- <dd>{{domxref("Document")}}、{{domxref("DocumentFragment")}}、 {{domxref("Element")}}を表現するオブジェクト.</dd>
-</dl>
-
-<h2 id="例">例</h2>
+<h2 id="Example">例</h2>
 
-<pre class="brush:js notranslate">var foo = document.getElementById('foo');
-if (foo.childElementCount &gt; 0) {
-  // Do something
+<pre class="brush:js">let sidebar = document.getElementById('sidebar');
+if (sidebar.childElementCount &gt; 0) {
+  // 何もしない
 }
 </pre>
 
+<h2 id="Specifications">仕様書</h2>
 
+{{Specifications}}
 
-<h2 id="IE8_IE9Safari向けの互換コード">IE8, IE9/Safari向けの互換コード</h2>
-
-<p>このプロパティは IE9 より前のバージョンでサポートされていません。IE9とSafariでは <code>Document</code> と <code>DocumentFragment</code> においてサポートされていません。</p>
-
-<pre class="brush:js notranslate">;(function(constructor) {
-  if (constructor &amp;&amp;
-      constructor.prototype &amp;&amp;
-      constructor.prototype.childElementCount == null) {
-    Object.defineProperty(constructor.prototype, 'childElementCount', {
-      get: function() {
-        var i = 0, count = 0, node, nodes = this.childNodes;
-        while (node = nodes[i++]) {
-          if (node.nodeType === 1) count++;
-        }
-        return count;
-      }
-    });
-  }
-})(window.Node || window.Element);</pre>
-
-<h2 id="Specification" name="Specification">仕様</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">仕様書</th>
-   <th scope="col">状況</th>
-   <th scope="col">コメント</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM WHATWG', '#dom-parentnode-childElementCount', 'ParentNode.childElementCount')}}</td>
-   <td>{{Spec2('DOM WHATWG')}}</td>
-   <td><code>ElementTraversal</code> インターフェースを {{domxref("ChildNode")}} と <code>ParentNode</code> に分割。このメソッドは後者で定義されています。<br>
-    {{domxref("Document")}} と {{domxref("DocumentFragment")}} が新しいインターフェースを実装しました。</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('Element Traversal', '#attribute-childElementCount', 'ElementTraversal.childElementCount')}}</td>
-   <td>{{Spec2('Element Traversal')}}</td>
-   <td>この初期定義は <code>ElementTraversal</code> 基本インターフェースに追加され、{{domxref("Element")}} で使用します。</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザの実装状況</h2>
-
-
+<h2 id="Browser_compatibility">ブラウザーの互換性</h2>
 
-<p>{{Compat("api.ParentNode.childElementCount")}}</p>
+<p>{{Compat}}</p>
 
-<h2 id="See_also" name="See_also">関連情報</h2>
+<h2 id="See_also">関連情報</h2>
 
 <ul>
- <li>基本インターフェースの {{domxref("ParentNode")}} と {{domxref("ChildNode")}}</li>
- <li>この基本インターフェースを実装するオブジェクト型: {{domxref("Document")}}, {{domxref("Element")}}, {{domxref("DocumentFragment")}}</li>
+  <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
new file mode 100644
index 0000000000..5dd887af4f
--- /dev/null
+++ b/files/ja/web/api/element/children/index.html
@@ -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/getattributenodens/index.html b/files/ja/web/api/element/getattributenodens/index.html
index f56fd71658..fb48807b05 100644
--- a/files/ja/web/api/element/getattributenodens/index.html
+++ b/files/ja/web/api/element/getattributenodens/index.html
@@ -28,7 +28,7 @@ translation_of: Web/API/Element/getAttributeNodeNS
 
 <h3 id=".E6.B3.A8.E8.A8.98" name=".E6.B3.A8.E8.A8.98">注記</h3>
 
-<p><span class="comment">&lt;code&gt;getAttributeNodeNS&lt;/code&gt; is more specific than <a href="/ja/DOM/element.getAttributeNode">getAttributeNode</a> in that it allows you to specify attributes that are part of a particular namespace. The corresponding setter method is <a href="/ja/DOM/element.setAttributeNodeNS">setAttributeNodeNS</a>.</span> <code>getAttributeNodeNS</code> は特定の名前空間の一部である属性を指定できるという点で <a href="/ja/DOM/element.getAttributeNode" title="ja/DOM/element.getAttributeNode">getAttributeNode</a>より特殊です。対応するsetterメソッドは<a href="/ja/DOM/element.setAttributeNodeNS" title="ja/DOM/element.setAttributeNodeNS">setAttributeNodeNS</a>です。</p>
+<p><span class="comment">&lt;code&gt;getAttributeNodeNS&lt;/code&gt; is more specific than <a href="/ja/DOM/element.getAttributeNode">getAttributeNode</a> in that it allows you to specify attributes that are part of a particular namespace. The corresponding setter method is <a href="/ja/DOM/element.setAttributeNodeNS">setAttributeNodeNS</a>.</span> <code>getAttributeNodeNS</code> は特定の名前空間の一部である属性を指定できるという点で <a href="/ja/DOM/element.getAttributeNode">getAttributeNode</a>より特殊です。対応するsetterメソッドは<a href="/ja/DOM/element.setAttributeNodeNS">setAttributeNodeNS</a>です。</p>
 
 <p>{{ DOMAttributeMethods() }}<span class="comment">== Specification ==</span></p>
 
diff --git a/files/ja/web/api/element/prepend/index.html b/files/ja/web/api/element/prepend/index.html
new file mode 100644
index 0000000000..9a0a993e08
--- /dev/null
+++ b/files/ja/web/api/element/prepend/index.html
@@ -0,0 +1,98 @@
+---
+title: Element.prepend()
+slug: Web/API/Element/prepend
+tags:
+  - API
+  - DOM
+  - Method
+  - Node
+  - Element
+  - Reference
+  - prepend
+translation_of: Web/API/Element/prepend
+original_slug: Web/API/ParentNode/prepend
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p><strong><code>Element.prepend()</code></strong> メソッドは、一連の {{domxref("Node")}} または {{domxref("DOMString")}} オブジェクトをこの {{domxref("Element")}} の最初の子の前に挿入します。 {{domxref("DOMString")}} オブジェクトは、同等の {{domxref("Text")}} ノードとして挿入されます。</p>
+
+<h2 id="Syntax">構文</h2>
+
+<pre class="brush: js">prepend(...nodesOrDOMStrings);
+</pre>
+
+<h3 id="Parameters">引数</h3>
+
+<dl>
+  <dt><code>nodesOrDOMStrings</code></dt>
+  <dd>挿入する一連の {{domxref("Node")}} または {{domxref("DOMString")}} オブジェクトです。</dd>
+</dl>
+
+<h3 id="Return_value">返値</h3>
+
+<p><code>undefined</code>.</p>
+
+<h3 id="Exceptions">例外</h3>
+
+<ul>
+ <li>{{domxref("HierarchyRequestError")}}: ノードを階層の特定の箇所に追加することができません。</li>
+</ul>
+
+<h2 id="Examples">例</h2>
+
+<h3 id="Prepending_an_element">要素の前に追加</h3>
+
+<pre class="brush: js">let div = document.createElement("div");
+let p = document.createElement("p");
+let span = document.createElement("span");
+div.append(p);
+div.prepend(span);
+
+console.log(div.childNodes); // NodeList [ &lt;span&gt;, &lt;p&gt; ]
+</pre>
+
+<h3 id="Prepending_text">テキストの前に追加</h3>
+
+<pre class="brush: js">let div = document.createElement("div");
+div.append("Some text");
+div.prepend("Headline: ");
+
+console.log(div.textContent); // "Headline: 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.prepend("Some text", p);
+
+console.log(div.childNodes); // NodeList [ #text "Some text", &lt;p&gt; ]</pre>
+
+<h3 id="The_prepend_method_is_unscopable">prepend() メソッドはスコープが効かない</h3>
+
+<p><code>prepend()</code> メソッドは <code>with</code> 文の中ではスコープが効きません。詳しくは {{jsxref("Symbol.unscopables")}} をご覧ください。</p>
+
+<pre class="brush: js">let div = document.createElement("div");
+
+with(div) {
+  prepend("foo");
+}
+// ReferenceError: prepend 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.append()")}}</li>
+  <li>{{domxref("Node.appendChild()")}}</li>
+  <li>{{domxref("Node.insertBefore()")}}</li>
+  <li>{{domxref("Element.before()")}}</li>
+  <li>{{domxref("Element.insertAdjacentElement()")}}</li>
+  <li>{{domxref("NodeList")}}</li>
+</ul>
diff --git a/files/ja/web/api/element/queryselectorall/index.html b/files/ja/web/api/element/queryselectorall/index.html
index ec2323fa35..08dc56b7c0 100644
--- a/files/ja/web/api/element/queryselectorall/index.html
+++ b/files/ja/web/api/element/queryselectorall/index.html
@@ -1,5 +1,5 @@
 ---
-title: element.querySelectorAll
+title: Element.querySelectorAll()
 slug: Web/API/Element/querySelectorAll
 tags:
   - API
@@ -13,59 +13,57 @@ tags:
   - Selecting Elements
   - Selectors
   - querySelector
+browser-compat: api.Element.querySelectorAll
 translation_of: Web/API/Element/querySelectorAll
+original_slug: Web/API/ParentNode/querySelectorAll
 ---
 <div>{{APIRef("DOM")}}</div>
 
-<p>{{domxref("Element")}} の <code><strong>querySelectorAll()</strong></code> メソッドは対象要素の子孫の内、与えられた CSS セレクターに一致する要素リストを示す静的な（生きていない） {{domxref("NodeList")}} を返します（起点となる要素は、たとえマッチしていても含まれません）。</p>
+<p>{{domxref("Element")}} の <code><strong>querySelectorAll()</strong></code> メソッドは、静的な (生きていない) {{domxref("NodeList")}} で、メソッド呼び出しの時点でそのオブジェクトの子孫にあたる要素のうち、一連のセレクターに一致するもののリストを返します。</p>
 
-<div class="note">
-<p><strong>注:</strong> このメソッドは {{domxref("ParentNode")}} ミックスインの {{domxref("ParentNode.querySelectorAll", "querySelectorAll()")}} メソッドを元に実装されています。</p>
-</div>
-
-<h2 id="Syntax" name="Syntax">構文</h2>
+<h2 id="Syntax">構文</h2>
 
-<pre class="syntaxbox notranslate"><var>elementList</var> = <em>parentNode</em>.querySelectorAll(<var>selectors</var>);
+<pre class="brush: js"><var>elementList</var> = <em>parentNode</em>.querySelectorAll(<var>selectors</var>);
 </pre>
 
-<h3 id="Parameters" name="Parameters">引数</h3>
+<h3 id="Parameters">引数</h3>
 
 <dl>
  <dt><code>selectors</code></dt>
- <dd>マッチのための 1 つまたは複数のセレクターを含む {{domxref("DOMString")}} です。この文字列は妥当な <a href="/ja/docs/Web/CSS/CSS_Selectors">CSS セレクター</a>文字列でなければならず、そうでない場合は <code>SyntaxError</code> 例外がスローされます。セレクターの仕様と要素の識別の詳細は、<a href="/ja/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors">セレクターを使用した DOM 要素の特定</a>を参照してください。複数のセレクターを指定する際は、カンマで区切ります。</dd>
+ <dd>一致させるための 1 つまたは複数のセレクターを含む {{domxref("DOMString")}}。この文字列は妥当な <a href="/ja/docs/Web/CSS/CSS_Selectors">CSS セレクター</a>でなければならず、そうでない場合は <code>SyntaxError</code> 例外が発生します。セレクターの仕様と要素の識別の詳細は、<a href="/ja/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors">セレクターを使用した DOM 要素の指定</a>を参照してください。複数のセレクターを指定する際は、カンマで区切ります。</dd>
 </dl>
 
 <div class="note">
-<p><strong>注:</strong> 標準の CSS 構文の一部ではない文字は、バックスラッシュ文字を使ってエスケープしなければなりません。 JavaScript でもバックスラッシュによるエスケープが使われているため、これらの文字を使った文字列リテラルを記述する際は、特に注意する必要があります。詳細は{{domxref("Document.querySelector#Escaping_special_character", "特殊文字のエスケープ", "", 1)}}を参照してください。</p>
+<p><strong>メモ:</strong> 標準の CSS 構文の一部ではない文字は、バックスラッシュ文字を使ってエスケープしなければなりません。 JavaScript でもバックスラッシュによるエスケープが使われているため、これらの文字を使った文字列リテラルを記述する際は、特に注意する必要があります。詳細は {{anch("Escaping special characters")}} を参照してください。</p>
 </div>
 
-<h3 id="Return_value" name="Return_value">戻り値</h3>
+<h3 id="Return_value">返値</h3>
 
-<p>指定されたセレクターのうち1つ以上にマッチする {{domxref("Element")}} オブジェクトを含んだ非ライブな {{domxref("NodeList")}} です。</p>
+<p>生きていない {{domxref("NodeList")}} で、指定されたセレクターの 1 つ以上に一致する子孫ノード 1 つに対して 1 つずつの {{domxref("Element")}} を含みます。</p>
 
 <div class="note">
-<p><strong>メモ:</strong> 指定した <code>selectors</code> に<a href="/ja/docs/Web/CSS/Pseudo-elements">CSS 疑似要素</a>が含まれている場合、返されるリストは常に空になります。</p>
+<p><strong>メモ:</strong> 指定された <code>selectors</code> が <a href="/ja/docs/Web/CSS/Pseudo-elements">CSS 擬似要素</a>を含む場合、返されるリストは常に空になります。</p>
 </div>
 
-<h3 id="Exceptions" name="Exceptions">例外</h3>
+<h3 id="Exceptions">例外</h3>
 
 <dl>
  <dt><code>SyntaxError</code></dt>
- <dd>指定した <code>selectors</code> の構文が妥当ではない。</dd>
+ <dd>指定された <code>selectors</code> の構文が妥当ではない。</dd>
 </dl>
 
-<h2 id="Example" name="Example">例</h2>
+<h2 id="Examples">例</h2>
 
-<h3 id="dataset_selector_attribute_selectors" name="dataset_selector_attribute_selectors">dataset セレクターと属性セレクター</h3>
+<h3 id="dataset_selector_attribute_selectors">データセットセレクターと属性セレクター</h3>
 
-<pre class="brush: html notranslate">&lt;section class="box" id="sect1"&gt;
+<pre class="brush: html">&lt;section class="box" id="sect1"&gt;
   &lt;div class="funnel-chart-percent1"&gt;10.900%&lt;/div&gt;
   &lt;div class="funnel-chart-percent2"&gt;3700.00%&lt;/div&gt;
   &lt;div class="funnel-chart-percent3"&gt;0.00%&lt;/div&gt;
 &lt;/section&gt;
 </pre>
 
-<pre class="brush: js notranslate">// dataset セレクター
+<pre class="brush: js">// データセットセレクター
 const refs = [...document.querySelectorAll(`[data-name*="funnel-chart-percent"]`)];
 
 // 属性セレクター
@@ -75,129 +73,95 @@ const refs = [...document.querySelectorAll(`[data-name*="funnel-chart-percent"]`
 // const refs = [...document.querySelectorAll(`[class~="funnel-chart-percent"]`)];
 </pre>
 
-<h3 id="Obtaining_a_list_of_matches" name="Obtaining_a_list_of_matches">一致のリストを入手する</h3>
+<h3 id="Obtaining_a_list_of_matches">一致するもののリストの入手</h3>
 
-<p>次の例では、<code>myBox</code> 要素の中に存在するすべての {{HTMLElement("p")}} 要素の {{domxref("NodeList")}} を取得しています。</p>
 
-<pre class="brush: js notranslate">var matches = myBox.querySelectorAll("p");
-</pre>
+<p>{{domxref("NodeList")}} で <code>"myBox"</code> 要素の中にあるすべての {{HTMLElement("p")}} 要素を取得するには、次のようにします。</p>
+
+<pre class="brush: js">var matches = myBox.querySelectorAll("p");</pre>
 
-<p>次の例では、<code>mybox</code> 内にある <code>note</code> または <code>alert</code> のいずれかのクラスを持つ、すべての {{HTMLElement("div")}} 要素のリストを返します。</p>
+<p>次の例では、文書内にある <code>note</code> または <code>alert</code> のいずれかのクラスを持つ、すべての {{HTMLElement("div")}} 要素のリストを返します。</p>
 
-<pre class="brush: js notranslate">var matches = myBox.querySelectorAll("div.note, div.alert");
+<pre class="brush: js">var matches = myBox.querySelectorAll("div.note, div.alert");
 </pre>
 
-<p>次の例では、<code>test</code> という ID を持つコンテナー内に位置し、直接の親要素が <code>highlighted</code> のクラスを持つ {{domxref("div")}} である <code>p</code> 要素のリストを取得します。</p>
+<p>次に、 <code>"test"</code> という ID を持つコンテナー内に位置し、直接の親要素が <code>"highlighted"</code> クラスを持つ {{HTMLElement("div")}} である、<code>&lt;p&gt;</code> 要素のリストを取得します。</p>
 
-<pre class="brush: js notranslate">var container = document.querySelector("#test");
+<pre class="brush: js">var container = document.querySelector("#test");
 var matches = container.querySelectorAll("div.highlighted &gt; p");</pre>
 
-<p>次の例では、<a href="/ja/docs/Web/CSS/Attribute_selectors">属性セレクター</a>を使って、文書内にある、 <code>data-src</code> 属性を持つ文書内の {{domxref("iframe")}} 要素のリストを返します。</p>
+<p>次の例では<a href="/ja/docs/Web/CSS/Attribute_selectors">属性セレクター</a>を使用しており、 <code>data-src</code> という名前の属性を持つ、文書内の {{HTMLElement("iframe")}} 要素のリストを返します。</p>
 
-<pre class="brush: js notranslate">var matches = domument.querySelectorAll("iframe[data-src]");
-</pre>
+<pre class="brush: js">var matches = document.querySelectorAll("iframe[data-src]");</pre>
 
-<p>次の例では、属性セレクターを使って、「ID が <code>userlist</code> である要素内の、<code>data-active</code> 属性を持ち、その値が <code>1</code> である要素群」のリストを返します。</p>
+<p>次の例では、ID が <code>userlist</code> の要素の中にあり、<code>data-active</code> 属性を持ち、その値が <code>1</code> であるリスト項目のリストを返すため、属性セレクターが使用されています。</p>
 
-<pre class="brush: js notranslate">var container = document.querySelector("#userlist");
+<pre class="brush: js">var container = document.querySelector("#userlist");
 var matches = container.querySelectorAll("li[data-active='1']");</pre>
 
-<h3 id="Accessing_the_matches" name="Accessing_the_matches">一致したリストへアクセスする</h3>
+<h3 id="Accessing_the_matches">一致したものへのアクセス</h3>
 
-<p>一旦、一致した要素の {{domxref("NodeList")}}} が返されると、それをちょうど配列のように試すことができます。配列が空である (<code>length</code> プロパティが 0 である) 場合は、一致がなかったということです。</p>
+<p>一致した要素の {{domxref("NodeList")}} が返されると、配列と同様に調べることができます。配列が空であれば (つまり、 <code>length</code> プロパティが 0 であれば)、一致するものが見つからなかったということです。</p>
 
-<p>それ以外の場合は、単純に標準の配列表記を使って、リストの内容にアクセスすることができます。次のように、任意の一般的なループ処理を使うことができます。</p>
+<p>それ以外の場合は、標準的な配列記法でリストの内容にアクセスすることができます。次のような一般的なループ文を使用することができます。</p>
 
-<pre class="brush: js notranslate">var highlightedItems = userList.querySelectorAll(".highlighted");
+<pre class="brush: js">var highlightedItems = userList.querySelectorAll(".highlighted");
 
 highlightedItems.forEach(function(userItem) {
   deleteUser(userItem);
 });</pre>
 
 <div class="note">
-<p><strong>注: </strong>NodeList は純正な配列ではないので、slice, some, map などのArray メソッドを持っていません。Array.from(nodeList) を使うことで純正の配列に変換することができます。</p>
+  <p><strong>メモ:</strong> NodeList は、本物の配列ではありません。つまり、slice、some、map などの配列メソッドを持っていません。これを配列に変換するには、 Array.from(nodeList) のようにします。</p>
 </div>
 
-<h2 id="User_notes" name="User_notes">特殊な例</h2>
+<h2 id="User_notes">ユーザーのメモ</h2>
 
-<p><code>querySelectorAll()</code> は、最も一般的な JavaScript DOM ライブラリと異なる動作を持ち、意図しない結果をもたらすことがあります。</p>
+<p>querySelectorAll() は、最も一般的な JavaScript DOM ライブラリと異なる動作を持ち、意図しない結果をもたらすことがあります。</p>
 
-<h3 id="HTML" name="HTML">HTML</h3>
+<h3 id="HTML">HTML</h3>
 
 <p>次の、入れ子になった 3 つの {{HTMLElement("div")}} ブロックを持つ HTML について検討します。</p>
 
-<pre class="brush: html notranslate">&lt;div class="outer"&gt;
+<pre class="brush: html">&lt;div class="outer"&gt;
   &lt;div class="select"&gt;
     &lt;div class="inner"&gt;
     &lt;/div&gt;
   &lt;/div&gt;
 &lt;/div&gt;</pre>
 
-<h3 id="JavaScript" name="JavaScript">JavaScript</h3>
+<h3 id="JavaScript">JavaScript</h3>
 
-<pre class="brush: js notranslate">var select = document.querySelector('.select');
+<pre class="brush: js">var select = document.querySelector('.select');
 var inner = select.querySelectorAll('.outer .inner');
-inner.length; // 1, not 0!
+inner.length; // 1 です。0 ではありません!
 </pre>
 
-<p>この例では、<code>"select"</code> class を持つ <code>&lt;div&gt;</code> の文脈で <code>".outer .inner"</code> を選択するとき、<code>.outer</code> が基準となる要素（<code>.select</code> で検索される）の子孫ではないにもかかわらず、<code>".inner"</code> class を持つ要素が見つけられています。<code>querySelectorAll()</code> はデフォルトでは、セレクターの最後の要素が検索スコープに含まれているかどうかのみ検証します。</p>
+<p>この例では、<code>select</code> class を持つ <code>&lt;div&gt;</code> の文脈で <code>.outer .inner</code> を選択するとき、<code>.outer</code> が基準となる要素（<code>.select</code> で検索される）の子孫ではないにもかかわらず、<code>.inner</code> class を持つ要素が見つけられています。<code>querySelectorAll()</code> はデフォルトでは、セレクターの最後の要素が検索スコープに含まれているかどうかのみ検証します。</p>
 
-<p>{{cssxref(":scope")}} 擬似クラスを使うと、基準となる要素の子孫だけが一致するようになり、期待される挙動を取り戻すことができます。</p>
+<p>{{cssxref(":scope")}} 擬似クラスを使うと、基準となる要素の子孫だけが一致するようになり、期待される挙動を取り戻すことができます。</p>
 
-<pre class="brush: js notranslate">var select = document.querySelector('.select');
+<pre class="brush: js">var select = document.querySelector('.select');
 var inner = select.querySelectorAll(':scope .outer .inner');
 inner.length; // 0
 </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-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}</td>
-   <td>{{Spec2("DOM WHATWG")}}</td>
-   <td>Living standard</td>
-  </tr>
-  <tr>
-   <td>{{SpecName("Selectors API Level 2", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}</td>
-   <td>{{Spec2("Selectors API Level 2")}}</td>
-   <td>変更なし</td>
-  </tr>
-  <tr>
-   <td>{{SpecName("DOM4", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}</td>
-   <td>{{Spec2("DOM4")}}</td>
-   <td>初期定義</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('Selectors API Level 1','#queryselectorall','querySelectorAll')}}</td>
-   <td>{{Spec2('Selectors API Level 1')}}</td>
-   <td>初期定義</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザー実装状況</h2>
-
-<div>
-<p>{{Compat("api.Element.querySelectorAll")}}</p>
-</div>
+<h2 id="Specifications">仕様書</h2>
+
+{{Specifications}}
+
+<h2 id="Browser_compatibility">ブラウザーの互換性</h2>
+
+<p>{{Compat}}</p>
 
-<h2 id="See_also" name="See_also">関連情報</h2>
+<h2 id="See_also">関連情報</h2>
 
 <ul>
- <li><a href="/ja/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors">セレクターを使用した DOM 要素の特定</a></li>
- <li>CSS ガイドの<a href="/ja/docs/Web/CSS/Attribute_selectors">属性セレクター</a></li>
- <li>MDN 学習エリアの<a href="/ja/docs/Learn/CSS/Introduction_to_CSS/Attribute_selectors">属性セレクター</a></li>
- <li>{{domxref("Element.querySelector()")}}</li>
- <li>{{domxref("Document.querySelector()")}} および {{domxref("Document.querySelectorAll()")}}</li>
- <li>{{domxref("DocumentFragment.querySelector()")}} および {{domxref("DocumentFragment.querySelectorAll()")}}</li>
- <li>{{domxref("ParentNode.querySelector()")}} および {{domxref("ParentNode.querySelectorAll()")}}</li>
- <li><a href="/ja/docs/Code_snippets/QuerySelector" title="Code_snippets/QuerySelector"><code>querySelector()</code> のコードスニペット</a></li>
+  <li><a href="/ja/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors">セレクターを使用した DOM 要素の指定</a></li>
+  <li>CSS ガイドの<a href="/ja/docs/Web/CSS/Attribute_selectors">属性セレクター</a></li>
+  <li>MDN 学習エリアの<a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">属性セレクター</a></li>
+  <li>{{domxref("Element.querySelector()")}}</li>
+  <li>{{domxref("Document.querySelector()")}} および {{domxref("Document.querySelectorAll()")}}</li>
+  <li>{{domxref("DocumentFragment.querySelector()")}} および {{domxref("DocumentFragment.querySelectorAll()")}}</li>
+  <li><a href="/ja/docs/Code_snippets/QuerySelector"><code>querySelector()</code> のコードスニペット</a></li>
 </ul>
diff --git a/files/ja/web/api/fetch/index.html b/files/ja/web/api/fetch/index.html
new file mode 100644
index 0000000000..79024057be
--- /dev/null
+++ b/files/ja/web/api/fetch/index.html
@@ -0,0 +1,192 @@
+---
+title: WindowOrWorkerGlobalScope.fetch()
+slug: Web/API/fetch
+tags:
+  - API
+  - Experimental
+  - Fetch
+  - Fetch API
+  - GlobalFetch
+  - Method
+  - Reference
+  - WindowOrWorkerGlobalScope
+  - request
+  - メソッド
+translation_of: Web/API/WindowOrWorkerGlobalScope/fetch
+original_slug: Web/API/WindowOrWorkerGlobalScope/fetch
+---
+<p>{{APIRef("Fetch API")}}</p>
+
+<p><span class="seoSummary"><code><strong>fetch()</strong></code> は {{domxref("WindowOrWorkerGlobalScope")}} ミックスインのメソッドで、ネットワークからリソースを取得するプロセスを開始し、レスポンスが利用できるようになったら満足するプロミスを返します。</span>このプロミスはリクエストに対するレスポンスを表す {{domxref("Response")}} で解決します。プロミスは HTTP エラーでは拒否されず、ネットワークエラーでのみ拒否されます。 HTTP エラーをチェックするには、 <code>then</code> ハンドラーを使用する必要があります。</p>
+
+<p><code>WindowOrWorkerGlobalScope</code> は {{domxref("Window")}} と {{domxref("WorkerGlobalScope")}} の両方で実装されています。これはつまり <code>fetch()</code> メソッドはあなたがリソースを取得したいと思うような大部分コンテキストで使用可能ということです。</p>
+
+<p>{{domxref("WindowOrWorkerGlobalScope.fetch","fetch()")}} のプロミスはネットワークエラーが発生した場合 (すなわち普通はパーミッション問題などがあったとき) のみ拒否されます。 {{domxref("WindowOrWorkerGlobalScope.fetch","fetch()")}} のプロミスは HTTP エラー (<code>404</code> など) では拒否<em>されません</em>。代わりに、 <code>then()</code> ハンドラーで {{domxref("Response.ok")}} や {{domxref("Response.status")}} プロパティをチェックする必要があります。</p>
+
+<p><code>fetch()</code> メソッドは取得するリソースのディレクティブではなく <a href="/ja/docs/Security/CSP/CSP_policy_directives">Content Security Policy</a> の <code>connect-src</code> ディレクティブによって制御されます。</p>
+
+<div class="note">
+<p><strong>注</strong>: <code>fetch()</code> メソッドの引数は {{domxref("Request.Request","Request()")}} コンストラクターと全く同じです。</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox notranslate">const <var>fetchResponsePromise</var> = fetch(<var>resource</var> [, <var>init</var>])
+</pre>
+
+<h3 id="Parameters" name="Parameters">引数</h3>
+
+<dl>
+ <dt><code><var>resource</var></code></dt>
+ <dd>取得したいリソースを定義します。以下の 2 つが使用出来ます。
+ <ul>
+  <li>取得したいリソースの直接の URL を含む {{domxref("USVString")}}。ブラウザーによってはスキームとして <code>blob:</code> と <code>data:</code> を受け入れます。</li>
+  <li>{{domxref("Request")}} オブジェクト。</li>
+ </ul>
+ </dd>
+ <dt><code><var>init</var></code> {{optional_inline}}</dt>
+ <dd>
+ <p>リクエストに適用したいカスタム設定を含むオブジェクト。可能なオプションは以下の通りです。</p>
+
+ <dl>
+  <dt><code>method</code></dt>
+  <dd>リクエストするメソッド、<code>GET</code>、<code>POST</code> など。なお、 {{httpheader("Origin")}} ヘッダーは {{HTTPMethod("HEAD")}} または {{HTTPMethod("GET")}} メソッドの読み取りリクエストでは設定されません。<br>
+  (この動作は Firefox 65 で修正されました — {{bug(1508661)}} を参照)</dd>
+  <dt><code>headers</code></dt>
+  <dd>リクエストに追加したいヘッダーで、{{domxref("Headers")}} オブジェクトか {{domxref("ByteString")}} 値を持つオブジェクトリテラルで指定してください。なお、<a href="/ja/docs/Glossary/Forbidden_header_name">一部の名前は禁止されています</a>。</dd>
+  <dt><code>body</code></dt>
+  <dd>リクエストに追加したい本文です。これには {{domxref("Blob")}}, {{domxref("BufferSource")}}, {{domxref("FormData")}}, {{domxref("URLSearchParams")}}, {{domxref("USVString")}}, {{domxref("ReadableStream")}} オブジェクトなどが使用できます。メソッドが <code>GET</code> や <code>HEAD</code> の場合使用できないので注意してください。</dd>
+  <dt><code>mode</code></dt>
+  <dd>リクエストで使いたいモードです。例: <code>cors</code>, <code>no-cors</code>, <code>same-origin</code></dd>
+  <dt><code>credentials</code></dt>
+  <dd>リクエストに使用したいリクエスト認証情報、 <code>omit</code>, <code>same-origin</code>, <code>include</code> です。現在のドメインの Cookie を自動で送るためにはこのオプションを指定する必要があります。 Chrome 50 から、このプロパティは{{domxref("FederatedCredential")}} インスタンスや {{domxref("PasswordCredential")}} インスタンスを受け付けるようになりました。</dd>
+  <dt><code>cache</code></dt>
+  <dd>使用したいリクエストの<a href="/ja/docs/Web/API/Request/cache">キャッシュモード</a>です。</dd>
+  <dt><code>redirect</code></dt>
+  <dd>使用するリダイレクトモードです。 <code>follow</code> (自動でリダイレクトに従う)、 <code>error</code> (リダイレクトが起こった場合エラーを伴って中止する)、 <code>manual</code> (手動でリダイレクトを処理する)。Chrome の既定値は <code>follow</code> です (バージョン 47 より前の既定値は <code>manual</code> でした)。</dd>
+  <dt><code>referrer</code></dt>
+  <dd>{{domxref("USVString")}} でリクエストのリファラーを指定します。これは同じオリジンの URL、 <code>about:client</code>、空文字列のいずれかを取ることができます。</dd>
+  <dt><code>referrerPolicy</code></dt>
+  <dd>リクエストで使用する<a href="https://w3c.github.io/webappsec-referrer-policy/#referrer-policies">リファラーポリシー</a>を指定します。使用可能な値は、 <code>no-referrer</code>, <code>no-referrer-when-downgrade</code>, <code>same-origin</code>, <code>origin</code>, <code>strict-origin</code>, <code>origin-when-cross-origin</code>, <code>strict-origin-when-cross-origin</code>, or <code>unsafe-url</code> のいずれかです。</dd>
+  <dt><code>integrity</code></dt>
+  <dd>リソースに <a href="/ja/docs/Web/Security/Subresource_Integrity">subresource integrity</a> 値を含ませることが出来ます (例：<code>sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE=</code>)。</dd>
+  <dt><code>keepalive</code></dt>
+  <dd><code>keepalive</code> オプションはページより長生きするリクエストを許可するのに使われます。<code>keepalive</code> フラグつきの Fetch は{{domxref("Navigator.sendBeacon()")}} API の置き換えです。</dd>
+  <dt><code>signal</code></dt>
+  <dd>{{domxref("AbortSignal")}} オブジェクトのインスタンスです。つまり {{domxref("AbortController")}} 経由で fetch リクエストと通信したり望む場合には中止したりできます。</dd>
+ </dl>
+ </dd>
+</dl>
+
+<h3 id="Return_value" name="Return_value">返値</h3>
+
+<p>{{domxref("Promise")}} で、 {{domxref("Response")}} オブジェクトに解決します。</p>
+
+<h3 id="Exceptions" name="Exceptions">例外</h3>
+
+<dl>
+ <dt><code>AbortError</code></dt>
+ <dd>{{domxref("AbortController")}} メソッドまたは {{domxref("AbortController.abort", "abort()")}} メソッドの呼び出しによりリクエストが中止された。</dd>
+ <dt><code>TypeError</code></dt>
+ <dd>指定された URL がユーザー認証情報を含んでいる。この情報は {{HTTPHeader("Authorization")}} ヘッダーを用いて提供するべきです。</dd>
+</dl>
+
+<h2 id="Example" name="Example">例</h2>
+
+<p><a href="https://github.com/mdn/fetch-examples/tree/master/fetch-request">Fetch Request example</a> リポジトリ (デモ: <a href="https://mdn.github.io/fetch-examples/fetch-request/">Fetch Request live</a>) では {{domxref("Request")}} オブジェクトを関連するコンストラクターを使って作成しています。その後 <code>fetch()</code> を呼んで取得しています。画像を fetch している時から適切な MIME タイプを与えるために response の {{domxref("Body.blob")}} を実行し、適切に処理されます。そして ObjectURL を作成し {{htmlelement("img")}} 要素に追加して表示させています。</p>
+
+<pre class="brush: js notranslate">const myImage = document.querySelector('img');
+
+let myRequest = new Request('flowers.jpg');
+
+fetch(myRequest)
+.then(function(response) {
+  if (!response.ok) {
+    throw new Error(`HTTP error! status: ${response.status}`);
+  }
+  return response.blob();
+})
+.then(function(response) {
+  let objectURL = URL.createObjectURL(response);
+  myImage.src = objectURL;
+});</pre>
+
+<p><a href="https://github.com/mdn/fetch-examples/tree/gh-pages/fetch-with-init-then-request/index.html">Fetch with init then Request example</a> リポジトリ (デモ: <a href="https://mdn.github.io/fetch-examples/fetch-with-init-then-request/">Fetch Request init live</a>) では上記の内容に加えて、<code>fetch()</code> を呼び出すとき、初期化オブジェクト <code><var>init</var></code> を渡しています。</p>
+
+<pre class="brush: js notranslate">const myImage = document.querySelector('img');
+
+let myHeaders = new Headers();
+myHeaders.append('Content-Type', 'image/jpeg');
+
+const myInit = {
+  method: 'GET',
+  headers: myHeaders,
+  mode: 'cors',
+  cache: 'default'
+};
+
+let myRequest = new Request('flowers.jpg');
+
+fetch(myRequest, myInit).then(function(response) {
+  // ...
+});</pre>
+
+<p>同様に <code><var>init</var></code> オブジェクトを <code>Request</code> コンストラクターに渡しても、同じ効果が得られます。</p>
+
+<pre class="brush: js notranslate">let myRequest = new Request('flowers.jpg', myInit);</pre>
+
+<p><code><var>init</var></code> の <code><var>init</var></code> としてオブジェクトリテラルを使用することもできます。</p>
+
+<pre class="brush: js notranslate">const myInit = {
+  method: 'GET',
+  headers: {
+    'Content-Type': 'image/jpeg'
+  },
+  mode: 'cors',
+  cache: 'default'
+};
+
+let myRequest = new Request('flowers.jpg', myInit);
+</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('Fetch','#fetch-method','fetch()')}}</td>
+   <td>{{Spec2('Fetch')}}</td>
+   <td>最新の仕様では <code>WindowOrWorkerGlobalScope</code> の中で部分的に定義。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Fetch','#dom-global-fetch','fetch()')}}</td>
+   <td>{{Spec2('Fetch')}}</td>
+   <td>初回定義</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Credential Management')}}</td>
+   <td>{{Spec2('Credential Management')}}</td>
+   <td>{{domxref("FederatedCredential")}} または {{domxref("PasswordCredential")}} のインスタンスを <code>init.credentials</code> の値として追加。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<p>{{Compat("api.WindowOrWorkerGlobalScope.fetch")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/API/Fetch_API">Fetch API</a></li>
+ <li><a href="/ja/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li>
+ <li><a href="/ja/docs/Web/HTTP/CORS">HTTP access control (CORS)</a></li>
+ <li><a href="/ja/docs/Web/HTTP">HTTP</a></li>
+</ul>
diff --git a/files/ja/web/api/globaleventhandlers/onload/index.html b/files/ja/web/api/globaleventhandlers/onload/index.html
index 6165e41f7e..4d4f54793a 100644
--- a/files/ja/web/api/globaleventhandlers/onload/index.html
+++ b/files/ja/web/api/globaleventhandlers/onload/index.html
@@ -1,56 +1,85 @@
 ---
-title: window.onload
+title: GlobalEventHandlers.onload
 slug: Web/API/GlobalEventHandlers/onload
 tags:
-  - DOM
-  - Gecko
-  - Gecko DOM Reference
-  - Window
+- API
+- Event Handler
+- GlobalEventHandlers
+- HTML DOM
+- Property
+- Reference
+- onload
+browser-compat: api.GlobalEventHandlers.onload
 translation_of: Web/API/GlobalEventHandlers/onload
 ---
-<div>
- {{ApiRef}}</div>
-<h2 id="Summary" name="Summary">概要</h2>
-<p>{{domxref("window")}} の <code>load</code> イベントに対応するイベントハンドラです。</p>
-<h2 id="Syntax" name="Syntax">構文</h2>
-<pre class="syntaxbox">window.onload = <var>funcRef</var>;
+<div>{{ApiRef()}}</div>
+
+<p><strong><code>onload</code></strong> は {{domxref("GlobalEventHandlers")}} ミックスインのプロパティで、{{domxref("Window")}}、{{domxref("XMLHttpRequest")}}、{{htmlelement("img")}} 要素などで発生した {{event("load")}} イベントを処理する<a href="/ja/docs/Web/Events/Event_handlers">イベントハンドラー</a>です。</p>
+
+<p><code>load</code> イベントは指定されたリソースの読み込みが完了したときに発行されます。</p>
+
+<h2 id="Syntax">構文</h2>
+
+<pre class="brush: js"><em>target</em>.onload = <em>functionRef</em>;
 </pre>
-<ul>
- <li><var>funcRef</var> : <code>load</code> イベント発生時に呼び出す関数への参照または関数式</li>
-</ul>
-<h2 id="Example" name="Example">例</h2>
-<pre class="brush:js">window.onload = function() {
-  doSomething(); // DOM 構築後に実行したい関数の呼び出し
+
+<h3 id="Value">値</h3>
+
+<p><code>functionRef</code> は、ウィンドウの <code>load</code> イベントが発行されたときに呼び出されるハンドラー関数です。</p>
+
+<h2 id="Examples">例</h2>
+
+<pre class="brush: js">window.onload = function() {
+  init();
+  doSomethingElse();
 };
 </pre>
-<pre class="brush:html">&lt;!DOCTYPE html&gt;
-&lt;html lang="ja"&gt;
-&lt;head&gt;
-&lt;meta charset="UTF-8" /&gt;
-&lt;title&gt;onload のテスト&lt;/title&gt;
-
-&lt;script&gt;
-function load() {
-  alert("load イベントが発生しました。");
-}
-
-window.onload = load;
-&lt;/script&gt;
-
-&lt;/head&gt;
-&lt;body&gt;
-&lt;p&gt;文書の読み込みの完了時に load イベントが発生します。&lt;/p&gt;
-&lt;/body&gt;
+
+<pre class="brush: html">&lt;!doctype html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;title&gt;onload test&lt;/title&gt;
+    // ES5
+    &lt;script&gt;
+      function load() {
+        console.log("load イベントが検出されました。");
+      }
+      window.onload = load;
+    &lt;/script&gt;
+    // ES2015
+    &lt;script&gt;
+      const load = () =&gt; {
+        console.log("load イベントが検出されました。");
+      }
+      window.onload = load;
+    &lt;/script&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;p&gt;load イベントは、文書の読み込みが完了したときに発行されます。&lt;/p&gt;
+  &lt;/body&gt;
 &lt;/html&gt;
 </pre>
-<h2 id="Notes" name="Notes">注記</h2>
-<p><code>load</code> イベントは文書のローディング工程の終了時に発生します。このイベントが発生した時点で、文書中の全てのオブジェクトは DOM 内にあり、全ての画像とサブフレームのロードは完了しています。</p>
-<p><code>DOMContentLoaded</code> や <code>DOMFrameContentLoaded</code> のような Gecko で定められた <a href="/ja/docs/Web/Reference/Events">DOM イベント</a> (※{{domxref("element.addEventListener()")}} でハンドリング可能) もありますが、これらは他のリソースのロード完了を待たずに発生するものです。つまり、 <code>window.onload</code> より先に発生します。</p>
-<h2 id="Specification" name="Specification">仕様</h2>
-<ul>
- <li><a href="http://www.whatwg.org/html/#handler-window-onload">http://www.whatwg.org/html/#handler-window-onload</a></li>
-</ul>
-<h2 id="See_also" name="See_also">関連情報</h2>
+
+<h2 id="Notes">メモ</h2>
+
+<p><code>load</code> イベントは文書の読み込み工程の終了時に発行されます。このイベントが発行された時点で、文書中のすべてのオブジェクトが DOM 内にあり、すべての画像、スクリプト、サブフレームの読み込みが完了しています。</p>
+
+<p><code>DOMContentLoaded</code> や <code>DOMFrameContentLoaded</code> のような <a href="/ja/docs/Web/Events">DOM イベント</a> ({{domxref("EventTarget.addEventListener()")}} で扱うことが可能) もありますが、これらはこのページの DOM が構築された後、他のリソースの読み込みが完了する前に発行されます。</p>
+
+<h2 id="Specifications">仕様書</h2>
+
+{{Specifications}}
+
+<h2 id="Browser_compatibility">ブラウザーの互換性</h2>
+
+<p>{{Compat}}</p>
+
+<h2 id="See_also">関連情報</h2>
+
 <ul>
- <li><a href="/ja/docs/Listening_to_events_in_Firefox_extensions">Firefox 拡張機能内でのイベントのリスニング</a></li>
+  <li>{{Event("load")}} イベント</li>
+  <li><code>DOMContentLoaded</code> イベント (<a
+      href="/ja/docs/Listening_to_events_in_Firefox_extensions#Simple_DOM_events">イベントの待ち受け: 単純な DOM イベント</a>内)</li>
+  <li>IIFE <a href="https://en.wikipedia.org/wiki/Immediately-invoked_function_expression"
+      rel="nofollow noreferrer">Immediately-invoked function expression</a></li>
 </ul>
diff --git a/files/ja/web/api/history_api/working_with_the_history_api/index.html b/files/ja/web/api/history_api/working_with_the_history_api/index.html
index c7b71399b2..a2fb053d73 100644
--- a/files/ja/web/api/history_api/working_with_the_history_api/index.html
+++ b/files/ja/web/api/history_api/working_with_the_history_api/index.html
@@ -54,7 +54,7 @@ history.pushState(stateObj, "page 2", "bar.html");
  </li>
 </ul>
 
-<div class="note"><strong>注:</strong> Gecko 2.0 {{ geckoRelease("2.0") }} より Gecko 5.0 {{ geckoRelease("5.0") }} に於いては、渡されたオブジェクトは JSON を使用してシリアライズされます。Gecko 6.0 {{ geckoRelease("6.0") }} より、オブジェクトは <a href="/ja/DOM/The_structured_clone_algorithm" title="ja/DOM/The structured clone algorithm">the structured clone algorithm</a> を使用してシリアライズされます。これにより多種多様なオブジェクトを安全に渡せるようになります。</div>
+<div class="note"><strong>注:</strong> Gecko 2.0 {{ geckoRelease("2.0") }} より Gecko 5.0 {{ geckoRelease("5.0") }} に於いては、渡されたオブジェクトは JSON を使用してシリアライズされます。Gecko 6.0 {{ geckoRelease("6.0") }} より、オブジェクトは <a href="/ja/DOM/The_structured_clone_algorithm">the structured clone algorithm</a> を使用してシリアライズされます。これにより多種多様なオブジェクトを安全に渡せるようになります。</div>
 
 <p>ある意味では、<code>pushState()</code> の呼び出しは <code>window.location = "#foo";</code> と設定するのと似ています。どちらも、現在のドキュメントに関連する別の履歴エントリの生成とアクティベートを行います。ですが <code>pushState()</code> にはいくらかの利点があります：</p>
 
@@ -77,7 +77,7 @@ history.pushState(stateObj, "page 2", "bar.html");
 
 <p>具体的には、何らかのユーザーのアクションを受け、現在の履歴エントリの URL または state オブジェクトを更新したい場合に <code>replaceState()</code> が役立ちます。</p>
 
-<div class="note"><strong>注:</strong> Gecko 2.0 {{ geckoRelease("2.0") }} より Gecko 5.0 {{ geckoRelease("5.0") }} に於いては、渡されたオブジェクトは JSON を使用してシリアライズされます。Gecko 6.0 {{ geckoRelease("6.0") }} より、オブジェクトは <a href="/ja/DOM/The_structured_clone_algorithm" title="ja/DOM/The structured clone algorithm">the structured clone algorithm</a> を使用してシリアライズされます。これにより多種多様なオブジェクトを安全に渡せるようになります。</div>
+<div class="note"><strong>注:</strong> Gecko 2.0 {{ geckoRelease("2.0") }} より Gecko 5.0 {{ geckoRelease("5.0") }} に於いては、渡されたオブジェクトは JSON を使用してシリアライズされます。Gecko 6.0 {{ geckoRelease("6.0") }} より、オブジェクトは <a href="/ja/DOM/The_structured_clone_algorithm">the structured clone algorithm</a> を使用してシリアライズされます。これにより多種多様なオブジェクトを安全に渡せるようになります。</div>
 
 <h3 id="replaceState_の例">replaceState() の例</h3>
 
diff --git a/files/ja/web/api/html_drag_and_drop_api/multiple_items/index.html b/files/ja/web/api/html_drag_and_drop_api/multiple_items/index.html
index 23d2cd518f..5a4fded9fe 100644
--- a/files/ja/web/api/html_drag_and_drop_api/multiple_items/index.html
+++ b/files/ja/web/api/html_drag_and_drop_api/multiple_items/index.html
@@ -4,14 +4,14 @@ slug: Web/API/HTML_Drag_and_Drop_API/Multiple_items
 translation_of: Web/API/HTML_Drag_and_Drop_API/Multiple_items
 original_slug: DragDrop/Dragging_and_Dropping_Multiple_Items
 ---
-<p>Mozillaはいくつかの非標準の機能によって、複数の項目のドラッグをサポートしています。それらの機能は<a class="internal" href="/Ja/DragDrop/DataTransfer#types.28.29" title="Ja/DragDrop/DataTransfer#types.28.29">types</a>プロパティや<a class="internal" href="/Ja/DragDrop/DataTransfer#getData.28.29" title="Ja/DragDrop/DataTransfer#getData.28.29">getData</a>、<a class="internal" href="/Ja/DragDrop/DataTransfer#setData.28.29" title="Ja/DragDrop/DataTransfer#setData.28.29">setData</a>、<a class="internal" href="/Ja/DragDrop/DataTransfer#clearData.28.29" title="Ja/DragDrop/DataTransfer#clearData.28.29">clearData</a>の各メソッドに酷似していますが、データの取得や変更、削除の際などに項目のインデックスを追加の引数として要求します。</p>
-<p><a class="internal" href="/Ja/DragDrop/DataTransfer#mozSetDataAt.28.29" title="Ja/DragDrop/DataTransfer#mozSetDataAt.28.29">mozSetDataAt</a>を使うと、<code>dragstart</code>イベントで複数の項目を登録することができます。これは<a class="internal" href="/Ja/DragDrop/DataTransfer#setData.28.29" title="Ja/DragDrop/DataTransfer#setData.28.29">setData</a>メソッドとよく似た働きをします。</p>
+<p>Mozillaはいくつかの非標準の機能によって、複数の項目のドラッグをサポートしています。それらの機能は<a class="internal" href="/Ja/DragDrop/DataTransfer#types.28.29">types</a>プロパティや<a class="internal" href="/Ja/DragDrop/DataTransfer#getData.28.29">getData</a>、<a class="internal" href="/Ja/DragDrop/DataTransfer#setData.28.29">setData</a>、<a class="internal" href="/Ja/DragDrop/DataTransfer#clearData.28.29">clearData</a>の各メソッドに酷似していますが、データの取得や変更、削除の際などに項目のインデックスを追加の引数として要求します。</p>
+<p><a class="internal" href="/Ja/DragDrop/DataTransfer#mozSetDataAt.28.29">mozSetDataAt</a>を使うと、<code>dragstart</code>イベントで複数の項目を登録することができます。これは<a class="internal" href="/Ja/DragDrop/DataTransfer#setData.28.29">setData</a>メソッドとよく似た働きをします。</p>
 <pre>var dt = event.dataTransfer;
 dt.mozSetDataAt("text/plain", "ドラッグされるデータ", 0);
 dt.mozSetDataAt("text/plain", "ドラッグされる2つめのデータ", 1);
 </pre>
-<p>この例では2つのドラッグ項目を追加しています。最後の引数は追加する項目のインデックスを示しています。これらの項目は0番から順番に登録するべきで、最後の方（インデックスの大きなもの）から逆順に登録することはできません。また、すでにデータが登録されているインデックスを指定してもう1度データを登録すると、前に登録したデータを置き換えることができます。インデックスとして0を指定すると、<a class="internal" href="/Ja/DragDrop/DataTransfer#setData.28.29" title="Ja/DragDrop/DataTransfer#setData.28.29">setData</a>メソッドを呼んだのと等しく扱われます。</p>
-<p><a class="internal" href="/Ja/DragDrop/DataTransfer#mozClearDataAt.28.29" title="Ja/DragDrop/DataTransfer#mozClearDataAt.28.29">mozClearDataAt</a>メソッドを使って、指定した項目を削除することもできます。</p>
+<p>この例では2つのドラッグ項目を追加しています。最後の引数は追加する項目のインデックスを示しています。これらの項目は0番から順番に登録するべきで、最後の方（インデックスの大きなもの）から逆順に登録することはできません。また、すでにデータが登録されているインデックスを指定してもう1度データを登録すると、前に登録したデータを置き換えることができます。インデックスとして0を指定すると、<a class="internal" href="/Ja/DragDrop/DataTransfer#setData.28.29">setData</a>メソッドを呼んだのと等しく扱われます。</p>
+<p><a class="internal" href="/Ja/DragDrop/DataTransfer#mozClearDataAt.28.29">mozClearDataAt</a>メソッドを使って、指定した項目を削除することもできます。</p>
 <pre>event.dataTransfer.mozClearDataAt("text/plain", 1);
 </pre>
 <p>あるインデックスで示される項目について、最後のデータ形式の削除によって項目全体を削除すると、残りの項目が繰り上がって項目のインデックスが変わることに注意してください。例えば、</p>
@@ -36,9 +36,9 @@ dt.mozClearDataAt("text/plain", 1);
 </pre>
 <p>幸いなことに、通常は項目を削除する必要がある場合は希で、それよりも、必要に応じて項目を追加するだけの場合の方がずっと多いです。</p>
 <p>複数の項目のドラッグが使われる場合の代表は、複数のファイルやブックマークをドラッグする時です。この場合には、適切な形式でそれらの項目を追加してください。また必須ではありませんが、それぞれの項目は常に同じ形式でデータを追加するべきです。これによりドロップ対象は、一貫したデータの受け取りを期待できます。</p>
-<p>複数のファイルがドラッグされているかどうかを確認するには、<a class="internal" href="/Ja/DragDrop/DataTransfer#mozItemCount.28.29" title="Ja/DragDrop/DataTransfer#mozItemCount.28.29">mozItemCount</a>プロパティを調べます。このプロパティにはドラッグされている項目の数がセットされます。もしそのドロップ対象が1つの項目のドロップだけを受け付ける場合には、ドラッグされた項目すべてを拒否することもできますし、最初の項目だけを受け取ることもできます。複数の項目の受け取りを拒否するには、dragoverイベントをキャンセルしないか、<a class="internal" href="/Ja/DragDrop/DataTransfer#effectAllowed.28.29" title="Ja/DragDrop/DataTransfer#effectAllowed.28.29">effectAllowed</a>プロパティに<code>none</code>を指定します。他のイベントリスナがすでにイベントをキャンセルしている場合に備えて、両方を実行しても構いません。</p>
-<p>ドロップされた項目のうち最初の項目だけを扱う場合は、1つだけの項目のドラッグの場合と同様に<a class="internal" href="/Ja/DragDrop/DataTransfer#getData.28.29" title="Ja/DragDrop/DataTransfer#getData.28.29">getData</a>を使います。これは、何も追加の処理が必要ないドロップ項目を1つだけ受け取るドロップ対象のために有用です。</p>
-<p>それに対して、任意のインデックスの項目をデータトランスファーから取得するには<a class="internal" href="/Ja/DragDrop/DataTransfer#mozGetDataAt.28.29" title="Ja/DragDrop/DataTransfer#mozGetDataAt.28.29">mozGetDataAt</a>メソッドを使います。以下の例は、ドラッグされたファイルを取得し、それらを配列に追加するものです。</p>
+<p>複数のファイルがドラッグされているかどうかを確認するには、<a class="internal" href="/Ja/DragDrop/DataTransfer#mozItemCount.28.29">mozItemCount</a>プロパティを調べます。このプロパティにはドラッグされている項目の数がセットされます。もしそのドロップ対象が1つの項目のドロップだけを受け付ける場合には、ドラッグされた項目すべてを拒否することもできますし、最初の項目だけを受け取ることもできます。複数の項目の受け取りを拒否するには、dragoverイベントをキャンセルしないか、<a class="internal" href="/Ja/DragDrop/DataTransfer#effectAllowed.28.29">effectAllowed</a>プロパティに<code>none</code>を指定します。他のイベントリスナがすでにイベントをキャンセルしている場合に備えて、両方を実行しても構いません。</p>
+<p>ドロップされた項目のうち最初の項目だけを扱う場合は、1つだけの項目のドラッグの場合と同様に<a class="internal" href="/Ja/DragDrop/DataTransfer#getData.28.29">getData</a>を使います。これは、何も追加の処理が必要ないドロップ項目を1つだけ受け取るドロップ対象のために有用です。</p>
+<p>それに対して、任意のインデックスの項目をデータトランスファーから取得するには<a class="internal" href="/Ja/DragDrop/DataTransfer#mozGetDataAt.28.29">mozGetDataAt</a>メソッドを使います。以下の例は、ドラッグされたファイルを取得し、それらを配列に追加するものです。</p>
 <pre>function onDrop(event)
 {
   var files = [];
@@ -47,15 +47,15 @@ dt.mozClearDataAt("text/plain", 1);
     files.push(dt.mozGetDataAt("application/x-moz-file", i));
 }
 </pre>
-<p><a class="internal" href="/Ja/DragDrop/DataTransfer#mozTypesAt.28.29" title="Ja/DragDrop/DataTransfer#mozTypesAt.28.29">mozTypesAt</a>メソッドを使って、望んでいる形式のデータが存在しているかどうかを確かめたいとも思うでしょう。<a class="internal" href="/Ja/DragDrop/DataTransfer#types.28.29" title="Ja/DragDrop/DataTransfer#types.28.29">types</a>プロパティと同様に、このメソッドは、その項目が保持しているデータの型の文字列を返します。<a class="internal" href="/Ja/DragDrop/DataTransfer#types.28.29" title="Ja/DragDrop/DataTransfer#types.28.29">types</a>プロパティを取得する事は、インデックスが0の項目の型のリストを取得する事に等しいです。</p>
+<p><a class="internal" href="/Ja/DragDrop/DataTransfer#mozTypesAt.28.29">mozTypesAt</a>メソッドを使って、望んでいる形式のデータが存在しているかどうかを確かめたいとも思うでしょう。<a class="internal" href="/Ja/DragDrop/DataTransfer#types.28.29">types</a>プロパティと同様に、このメソッドは、その項目が保持しているデータの型の文字列を返します。<a class="internal" href="/Ja/DragDrop/DataTransfer#types.28.29">types</a>プロパティを取得する事は、インデックスが0の項目の型のリストを取得する事に等しいです。</p>
 <pre>var types = event.dataTransfer.mozTypesAt(1);
 </pre>
 <h2 id="文字列でないデータのドラッグ">文字列でないデータのドラッグ</h2>
-<p>上で解説した追加のメソッドが扱えるデータは文字列に限定されず、どんな種類のデータでも指定することができます。例えば、ファイルは<a class="internal" href="/Ja/DragDrop/Recommended_Drag_Types#file" title="Ja/DragDrop/Recommended Drag Types#file">application/x-moz-file</a>型で<a class="internal" href="/ja/nsIFile" title="ja/nsIFile">nsIFile</a>のオブジェクトとして保持されてドラッグされます。<code>setData</code>メソッドは文字列しかサポートしておらず、 ドラッグするファイルを指定するのには利用できないため、代わりに<a class="internal" href="/Ja/DragDrop/DataTransfer#mozSetDataAt.28.29" title="Ja/DragDrop/DataTransfer#mozSetDataAt.28.29">mozSetDataAt</a>メソッドを使わなくてはなりません。</p>
+<p>上で解説した追加のメソッドが扱えるデータは文字列に限定されず、どんな種類のデータでも指定することができます。例えば、ファイルは<a class="internal" href="/Ja/DragDrop/Recommended_Drag_Types#file">application/x-moz-file</a>型で<a class="internal" href="/ja/nsIFile">nsIFile</a>のオブジェクトとして保持されてドラッグされます。<code>setData</code>メソッドは文字列しかサポートしておらず、 ドラッグするファイルを指定するのには利用できないため、代わりに<a class="internal" href="/Ja/DragDrop/DataTransfer#mozSetDataAt.28.29">mozSetDataAt</a>メソッドを使わなくてはなりません。</p>
 <pre>dt.mozSetDataAt("application/x-moz-file", file, 0);
 </pre>
 <p>複数の項目を扱う必要がない場合でも、このメソッドを使うことによって任意のオブジェクトをデータに指定できます。この場合には、インデックスとして0を指定しておきます。</p>
-<p>同様に、ファイルやその他のオブジェクトを取得するには<a class="internal" href="/Ja/DragDrop/DataTransfer#mozGetDataAt.28.29" title="Ja/DragDrop/DataTransfer#mozGetDataAt.28.29">mozGetDataAt</a>メソッドを使う必要があります。もし<a class="internal" href="/Ja/DragDrop/DataTransfer#getData.28.29" title="Ja/DragDrop/DataTransfer#getData.28.29">getData</a>を使った場合は、値が文字列でない型のデータは空文字として取得されます。ただし、数値のような単純な型のデータについては文字列に変換できるため、この場合は<a class="internal" href="/Ja/DragDrop/DataTransfer#getData.28.29" title="Ja/DragDrop/DataTransfer#getData.28.29">getData</a>を使っても問題ありません。</p>
+<p>同様に、ファイルやその他のオブジェクトを取得するには<a class="internal" href="/Ja/DragDrop/DataTransfer#mozGetDataAt.28.29">mozGetDataAt</a>メソッドを使う必要があります。もし<a class="internal" href="/Ja/DragDrop/DataTransfer#getData.28.29">getData</a>を使った場合は、値が文字列でない型のデータは空文字として取得されます。ただし、数値のような単純な型のデータについては文字列に変換できるため、この場合は<a class="internal" href="/Ja/DragDrop/DataTransfer#getData.28.29">getData</a>を使っても問題ありません。</p>
 <h2 id="複数項目のドロップの例">複数項目のドロップの例</h2>
 <p>以下は、ドロップされた項目のデータとその形式を一覧表示するボックスの例です。</p>
 <pre>&lt;html&gt;
@@ -103,7 +103,7 @@ function output(text)
 &lt;/body&gt;
 &lt;/html&gt;
 </pre>
-<p>この例は、<a class="internal" href="/ja/DOM/event.preventDefault" title="ja/DOM/event.preventDefault">preventDefault</a>メソッドによって<code>dragenter</code>イベントと<code>dragover</code>イベントを両方ともキャンセルします。これにより、要素の上でのドロップが可能になっています。</p>
-<p>項目をドロップした時に、<code>dodrop</code>関数が呼ばれます。この関数は<a class="internal" href="/Ja/DragDrop/DataTransfer#mozItemCount.28.29" title="Ja/DragDrop/DataTransfer#mozItemCount.28.29">mozItemCount</a>プロパティを見て、いくつの項目がドロップされたのかを調べ、それらに繰り返し処理を行います。それぞれの項目について、型の一覧を得るために<a class="internal" href="/Ja/DragDrop/DataTransfer#mozTypesAt.28.29" title="Ja/DragDrop/DataTransfer#mozTypesAt.28.29">mozTypesAt</a>メソッドが呼ばれます。この一覧の生成処理は、ドラッグに対して関連づけられたすべてのデータに対して繰り返されます。</p>
+<p>この例は、<a class="internal" href="/ja/DOM/event.preventDefault">preventDefault</a>メソッドによって<code>dragenter</code>イベントと<code>dragover</code>イベントを両方ともキャンセルします。これにより、要素の上でのドロップが可能になっています。</p>
+<p>項目をドロップした時に、<code>dodrop</code>関数が呼ばれます。この関数は<a class="internal" href="/Ja/DragDrop/DataTransfer#mozItemCount.28.29">mozItemCount</a>プロパティを見て、いくつの項目がドロップされたのかを調べ、それらに繰り返し処理を行います。それぞれの項目について、型の一覧を得るために<a class="internal" href="/Ja/DragDrop/DataTransfer#mozTypesAt.28.29">mozTypesAt</a>メソッドが呼ばれます。この一覧の生成処理は、ドラッグに対して関連づけられたすべてのデータに対して繰り返されます。</p>
 <p>この例は、あるドラッグ操作が保持しているデータを確かめたい時に便利です。ただ項目をこの例のドロップ対象にドロップするだけで、ドラッグされたどの項目がどんな形式でどのようなデータを保持しているのかを見ることができます。</p>
 <p>{{ languages( { "en": "En/DragDrop/Dragging_and_Dropping_Multiple_Items" } ) }}</p>
diff --git a/files/ja/web/api/index/index.html b/files/ja/web/api/index/index.html
deleted file mode 100644
index e37c8080c2..0000000000
--- a/files/ja/web/api/index/index.html
+++ /dev/null
@@ -1,10 +0,0 @@
----
-title: 索引
-slug: Web/API/Index
-tags:
-  - API
-  - Index
-  - Landing
-translation_of: Web/API/Index
----
-<p>{{Index("/ja/docs/Web/API")}}</p>
diff --git a/files/ja/web/api/indexeddb/index.html b/files/ja/web/api/indexeddb/index.html
new file mode 100644
index 0000000000..bdf8532b6a
--- /dev/null
+++ b/files/ja/web/api/indexeddb/index.html
@@ -0,0 +1,72 @@
+---
+title: WindowOrWorkerGlobalScope.indexedDB
+slug: Web/API/indexedDB
+tags:
+  - API
+  - Database
+  - IndexedDB
+  - Property
+  - Reference
+  - Storage
+translation_of: Web/API/WindowOrWorkerGlobalScope/indexedDB
+original_slug: Web/API/WindowOrWorkerGlobalScope/indexedDB
+---
+<p>{{ APIRef() }}</p>
+
+<p>{{domxref("WindowOrWorkerGlobalScope")}} ミックスインの <strong><code>indexedDB</code></strong> 読み取り専用プロパティは、アプリケーションが indexed データベースのキャパビリティに非同期でアクセスするための機構を提供します。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox">var IDBFactory = self.indexedDB;</pre>
+
+<h3 id="Value" name="Value">値</h3>
+
+<p>{{domxref("IDBFactory")}} オブジェクト。</p>
+
+<h2 id="Example" name="Example">例</h2>
+
+<pre class="brush: js;highlight:[3]">var db;
+function openDB() {
+ var DBOpenRequest = window.indexedDB.open('toDoList');
+ DBOpenRequest.onsuccess = function(e) {
+   db = DBOpenRequest.result;
+ }
+}</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('IndexedDB 2', '#dom-windoworworkerglobalscope-indexeddb', 'indexedDB')}}</td>
+   <td>{{Spec2('IndexedDB 2')}}</td>
+   <td>Defined in a <code>WindowOrWorkerGlobalScope</code> partial in the newest spec.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('IndexedDB', '#widl-IDBEnvironment-indexedDB', 'indexedDB')}}</td>
+   <td>{{Spec2('IndexedDB')}}</td>
+   <td>初期定義。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの実装状況</h2>
+
+<p>{{Compat("api.WindowOrWorkerGlobalScope.indexedDB")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/API/IndexedDB_API/Using_IndexedDB">Using IndexedDB</a></li>
+ <li>トランザクションの開始: {{domxref("IDBDatabase")}}</li>
+ <li>トランザクションの使用: {{domxref("IDBTransaction")}}</li>
+ <li>キーの範囲設定: {{domxref("IDBKeyRange")}}</li>
+ <li>データの取得と変更: {{domxref("IDBObjectStore")}}</li>
+ <li>カーソルの使用: {{domxref("IDBCursor")}}</li>
+ <li>参照例: <a class="external" href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a class="external" href="http://mdn.github.io/to-do-notifications/">view example live</a>.)</li>
+</ul>
diff --git a/files/ja/web/api/indexeddb_api/browser_storage_limits_and_eviction_criteria/index.html b/files/ja/web/api/indexeddb_api/browser_storage_limits_and_eviction_criteria/index.html
index 47c47bad45..0db54a15b6 100644
--- a/files/ja/web/api/indexeddb_api/browser_storage_limits_and_eviction_criteria/index.html
+++ b/files/ja/web/api/indexeddb_api/browser_storage_limits_and_eviction_criteria/index.html
@@ -16,12 +16,12 @@ translation_of: Web/API/IndexedDB_API/Browser_storage_limits_and_eviction_criter
 <p class="summary">クライアント側 (すなわちローカルディスク) に何らかのデータを保存するウェブ技術は何種類かがあります。ブラウザーがどれだけの容量をウェブデータストレージに割り当てるかや、容量の上限に達したときにどのデータを削除するかのプロセスは単純ではなく、またブラウザーにより異なります。この記事では、必要なローカルストレージの容量を確保するために、いつどのローカルコンテンツを破棄するのかをどうやって特定するのかを説明します。</p>
 
 <div class="note">
-<p><strong>メモ</strong>: 以下の情報はほとんどの最新ブラウザーでおおむね正確ですが、既知の詳細情報も記載しています。 Opera および Chrome は、すべての場合において同じ動作になるでしょう。 <a href="http://www.opera.com/mobile/mini">Opera Mini</a> (Presto ベースで、サーバー側でレンダリングする) は、クライアントにデータを保存しません。</p>
+<p><strong>メモ</strong>: 以下の情報はほとんどの最新ブラウザーではおおむね正確ですが、ブラウザー固有の注意事項も知られています。 Opera と Chrome は、すべての場合において同じ動作になるでしょう。 <a href="http://www.opera.com/mobile/mini">Opera Mini</a> (Presto ベースで、サーバー側でレンダリングする) は、クライアントにデータを保存しません。</p>
 </div>
 
-<h2 id="What_technologies_use_browser_data_storage" name="What_technologies_use_browser_data_storage">ブラウザーのデータストレージを使用する技術は何か?</h2>
+<h2 id="What_technologies_use_browser_data_storage">ブラウザーのデータストレージを使用する技術は何か?</h2>
 
-<p>Firefox では以下の技術が、必要なデータを保存するためにブラウザーのデータストレージを使用します。ここではそれらの技術を "クォータクライアント" と呼びます。</p>
+<p>Firefox では以下の技術が、必要なデータを保存するためにブラウザーのデータストレージを使用します。ここではこれらの技術を「クォータクライアント」と呼びます。</p>
 
 <ul>
  <li><a href="/ja/docs/Web/API/IndexedDB_API">IndexedDB</a></li>
@@ -31,45 +31,45 @@ translation_of: Web/API/IndexedDB_API/Browser_storage_limits_and_eviction_criter
 </ul>
 
 <div class="note">
-<p><strong>メモ</strong>: Firefox では、 <a href="/ja/docs/Web/API/Web_Storage_API">Web Storage</a> もすぐに同じストレージ管理ツールとして使えるようになり、それはこの文書で記述します。</p>
+<p><strong>メモ</strong>: Firefox では、<a href="/ja/docs/Web/API/Web_Storage_API">ウェブストレージ</a>もまもなく同じストレージ管理ツールを使い始めます。それはこの文書で記述します。</p>
 </div>
 
 <div class="note">
 <p><strong>メモ</strong>: プライベートブラウジングモードは、大半のデータストレージに対応していません。ローカルストレージのデータと Cookie は保存されますが、短命です。 — 最後のプライベートブラウジングウィンドウを閉じた時にデータは消去されます。</p>
 </div>
 
-<p>生成元の "最終アクセス日時" は、これらのいずれかによってアクティブ化/非アクティブ化される origin eviction によって、すべてのクォータクライアントでデータ削除が行われたときに更新されます。</p>
+<p>オリジンの「最終アクセス日時」はこれらのうちの何れかがアクティブ化/非アクティブ化されたときに更新されます。オリジン立ち退き (origin eviction) によって、すべてのクォータクライアントでデータ削除が行われたときに更新されます。</p>
 
-<p>Chrome/Opera では、 Quota Management API が <a href="/ja/docs/Web/HTML/Using_the_application_cache">AppCache</a>, <a href="/ja/docs/Web/API/IndexedDB_API">IndexedDB</a>, WebSQL, <a href="/ja/docs/Web/API/File_System_API">File System API</a> のクォータ管理を制御しています。</p>
+<p>Chrome/Opera では、 Quota Management API が <a href="/ja/docs/Web/HTML/Using_the_application_cache">AppCache</a>, <a href="/ja/docs/Web/API/IndexedDB_API">IndexedDB</a>, WebSQL, <a href="/ja/docs/Web/API/File_and_Directory_Entries_API">File System API</a> のクォータ管理を制御しています。</p>
 
-<h2 id="Different_types_of_data_storage" name="Different_types_of_data_storage">さまざまな種類のデータストレージ</h2>
+<h2 id="Different_types_of_data_storage">さまざまな種類のデータストレージ</h2>
 
 <p>同じブラウザー内で同じ保存方法を使用していても、解釈されるデータストレージの種類はさまざまです。この章では、さまざまなブラウザーで見つけられる多様なストレージについて説明します。</p>
 
 <p>ストレージは 2 種類に分けられます。</p>
 
 <ul>
- <li>永続的: 長期間にわたって保持されることを意図するデータです。これはユーザーが決断した場合にのみ削除されます (例えば Firefox では、各ページのページ情報ダイアログに "ストレージを消去" ボタンがあります)。</li>
- <li>一時的: 長期間にわたって維持する必要がないデータです。ストレージの容量制限に達すると、もっとも過去に使用されたものから削除されます ({{anch("LRU policy", "LRU ポリシー")}})。</li>
+ <li>永続的なもの。長期間保存されることを意図したデータです。これは、ユーザーが選択した場合にのみ削除されます (たとえば、Firefox では、<em>設定</em>に進み、<em>プライバシーとセキュリティ &gt; Cookie とサイトデータ</em>のオプションを使用することで、すべての保存データを削除するか、または選択したオリジンからの保存データのみを削除するかを選択できます)。</li>
+ <li>一時的なもの。長期間にわたって維持する必要がないデータです。{{anch("Storage limits", "ストレージの容量制限")}}に達すると、 {{anch("LRU policy", "LRU ポリシー")}}によりもっとも古く使用されたものから削除されます。</li>
 </ul>
 
 <p>Firefox では、永続的なストレージが使用されると、ユーザーにはデータが永続的になることを警告するポップアップが表示され、それが良いかどうかを尋ねます。一時的データストレージは明示的にユーザーにプロンプトを表示しません。</p>
 
-<p>既定では、一時的なストレージがほとんどの使用環境 (例えば、標準的な Web アプリ) で使用され、永続的なストレージはインストールされたアプリ (例えば、Firefox OS やデスクトップ版 Firefox にインストールした Firefox アプリ、および Chrome アプリ) で使用されます。</p>
+<p>ストレージは既定では一時的です。開発者は <a href="/ja/docs/Web/API/Storage_API">Storage API</a> で利用できる {{domxref("StorageManager.persist()")}} メソッドを使用して永続的なストレージにすることができます。</p>
 
-<h2 id="Where_is_the_data_stored" name="Where_is_the_data_stored">データの保存先は?</h2>
+<h2 id="Where_is_the_data_stored">データの保存先は?</h2>
 
-<p>それぞれのストレージタイプが別々のリポジトリに相当しており、ユーザーの Firefox プロファイル内のディレクトリーとは以下のように対応づけられます (ほかのブラウザーでは、若干異なるでしょう):</p>
+<p>それぞれのストレージ種別は、個別のリポジトリーーを表します。以下は、ユーザーの Firefox プロファイル下のディレクトリにおける実際のマッピングです (他のブラウザーでは若干異なる場合があります)。</p>
 
 <ul>
- <li><code>&lt;profile&gt;/storage</code> — クォータマネージャ (後述) に管理されている、ストレージの主要なトップレベルディレクトリーです。</li>
- <li><code>&lt;profile&gt;/storage/permanent</code> — 永続的なデータストレージのリポジトリです。</li>
- <li><code>&lt;profile&gt;/storage/temporary</code> — 一時的なデータストレージのリポジトリです。</li>
- <li><code>&lt;profile&gt;/storage/default</code> — 既定のデータストレージのリポジトリです。</li>
+ <li><code>&lt;profile&gt;/storage</code> — クォータマネージャーー (後述) に管理されている、ストレージの主要な最上位ディレクトリーです。</li>
+ <li><code>&lt;profile&gt;/storage/permanent</code> — 永続的なデータストレージのリポジトリーです。</li>
+ <li><code>&lt;profile&gt;/storage/temporary</code> — 一時的なデータストレージのリポジトリーです。</li>
+ <li><code>&lt;profile&gt;/storage/default</code> — 既定のデータストレージのリポジトリーです。</li>
 </ul>
 
 <div class="note">
-<p><strong>メモ</strong>: <a href="/ja/docs/Web/API/Storage_API">Storage API</a> の導入後は、"permanent" フォルダーは廃止されると考えられます。"permanent" フォルダーは IndexedDB の永続的なタイプのデータベースのみ保存します。ボックスモードが "best-effort" や "persistent" であっても、データは &lt;profile&gt;/storage/default 以下に保存されます。</p>
+<p><strong>メモ</strong>: <a href="/ja/docs/Web/API/Storage_API">Storage API</a> の導入後は、"permanent" フォルダーは廃止されると考えられます。"permanent" フォルダーは IndexedDB の永続的な種類のデータベースのみ保存します。ボックスモードが "best-effort" や "persistent" であっても、データは &lt;profile&gt;/storage/default 以下に保存されます。</p>
 </div>
 
 <div class="note">
@@ -81,52 +81,52 @@ translation_of: Web/API/IndexedDB_API/Browser_storage_limits_and_eviction_criter
 </div>
 
 <div class="note">
-<p><strong>メモ</strong>: ユーザーが <code>&lt;profile&gt;/storage</code> の配下に、独自のディレクトリーやファイルを作成すべきではありません。このようなことを行うと、ストレージの初期化が失敗します。例えば、{{domxref("IDBFactory.open()", "open()")}} でエラーイベントが発生します。</p>
+<p><strong>メモ</strong>: ユーザーが <code>&lt;profile&gt;/storage</code> の配下に、独自のディレクトリーやファイルを作成すべきではありません。このようなことを行うと、ストレージの初期化に失敗します。例えば、{{domxref("IDBFactory.open()", "open()")}} でエラーイベントが発生します。</p>
 </div>
 
-<h2 id="Storage_limits" name="Storage_limits">ストレージの制限</h2>
+<h2 id="Storage_limits">ストレージの制限</h2>
 
-<p>ブラウザーのストレージの最大容量は動的であり、ハードディスクドライブのサイズに応じて変わります。<strong>グローバルリミット</strong>はディスクの空き量量の 50% に決められます。Firefox では、クォータマネージャと飛ばれる内部のブラウザーツールが生成元ごとにどれだけディスク容量を使用しているかを絶えず注視しており、必要に応じてデータを削除します。</p>
+<p>ブラウザーのストレージの最大容量は動的であり、ハードディスクドライブのサイズに応じて変わります。<strong>グローバルリミット</strong>はディスクの空き量量の 50% に決められます。Firefox では、クォータマネージャーと飛ばれる内部のブラウザーツールがオリジンごとにどれだけディスク容量を使用しているかを絶えず注視しており、必要に応じてデータを削除します。</p>
 
-<p>従ってハードディスクドライブが 500GB であれば、ブラウザーの合計ストレージサイズは 250GB になります。上限に達すると <strong>origin eviction</strong> と呼ばれる処理を実行して、ストレージの総量が再び上限を下回るまで、生成元全体に相当するデータを削除します。生成元内の一部分を削除するような縮小法はありません。生成元内のひとつのデータベースだけ削除すると、矛盾の問題が発生するおそれがあります。</p>
+<p>従ってハードディスクドライブの空き容量が 500GB であれば、ブラウザーの合計ストレージサイズは 250GB になります。上限に達すると<strong>オリジン立ち退き (origin eviction)</strong> と呼ばれる処理を実行して、ストレージの総量が再び上限を下回るまで、オリジン全体に相当するデータを削除します。オリジン内の一部分を削除するような縮小法はありません。オリジン内のデータベースをひとつだけ削除すると、矛盾が発生するおそれがあります。</p>
 
-<p>また、<strong>グループリミット</strong>というもうひとつの制限もあります。これは、グローバルリミットの 20% として定義されます。それぞれの生成元は、グループ (生成元のグループ) の一部です。グループは、eTLD+1 ドメインごとに 1 つ作られます。例えば次の通り:</p>
+<p>また、<strong>グループリミット</strong>というもうひとつの制限もあります。これは、グローバルリミットの 20% として定義されます。それぞれのオリジンは、グループ (オリジンのグループ) の一部です。グループは、eTLD+1 ドメインごとに 1 つ作られます。例えば次の通りです。</p>
 
 <ul>
- <li><code>mozilla.org</code> — グループ 1、生成元 1</li>
- <li><code>www.mozilla.org</code> — グループ 1、生成元 2</li>
- <li><code>joe.blogs.mozilla.org</code> — グループ 1、生成元 3</li>
- <li><code>firefox.com</code> — グループ 2、生成元 4</li>
+ <li><code>mozilla.org</code> — グループ 1、オリジン 1</li>
+ <li><code>www.mozilla.org</code> — グループ 1、オリジン 2</li>
+ <li><code>joe.blogs.mozilla.org</code> — グループ 1、オリジン 3</li>
+ <li><code>firefox.com</code> — グループ 2、オリジン 4</li>
 </ul>
 
 <p>このグループでは <code>mozilla.org</code>、<code>www.mozilla.org</code>、<code>joe.blogs.mozilla.org</code> が、合わせてグローバルリミットの 20% を上限としてストレージを使用できます。<code>firefox.com</code> は、別に 20% の上限を持ちます。</p>
 
-<p>これら 2 種類の制限は、制限に達したときの動作が異なります:</p>
+<p>これら 2 種類の制限は、制限に達したときの動作が異なります。</p>
 
 <ul>
- <li>グループリミットは "ハードリミット" とも呼ばれます。 origin eviction を発生させません。</li>
- <li>グローバルリミットは、いくらかの領域が解放されて処理を継続できる可能性がありますので "ソフトリミット" です。</li>
+ <li>グループリミットは「ハードリミット」とも呼ばれます。オリジン立ち退きを発生させません。</li>
+ <li>グローバルリミットは、いくらかの領域が解放されて処理を継続できる可能性がありますので「ソフトリミット」です。</li>
 </ul>
 
 <div class="note">
-<p><strong>メモ</strong>: グループリミットは、上記で触れた最小のグループリミットにかかわらず、グローバルリミットより大きくすることはできません。グローバルリミットが 8MB といった本当に低メモリな状況では、グループリミットも 8MB となります。</p>
+<p><strong>メモ</strong>: グループリミットは、上記で触れた最小のグループリミットにかかわらず、グローバルリミットより大きくすることはできません。グローバルリミットが 8MB といった本当にメモリーが少ない状況では、グループリミットも 8MB となります。</p>
 </div>
 
 <div class="note">
-<p><strong>メモ</strong>: グループリミットに達したとき、あるいは origin eviction で十分な空き容量を確保できないときは、ブラウザーで <code>QuotaExceededError</code> が発生します。</p>
+<p><strong>メモ</strong>: グループリミットに達したとき、あるいはオリジン立ち退きで十分な空き容量を確保できないときは、ブラウザーで <code>QuotaExceededError</code> が発生します。</p>
 </div>
 
 <div class="note">
 <p><strong>メモ</strong>: Chrome では、ソフトおよびハードのストレージのクォータの限界が <strong>M66</strong> から変更されました。詳しい情報は<a href="https://chromium.googlesource.com/chromium/src/+/refs/heads/master/storage/browser/quota/quota_settings.cc#68">こちら</a>にあります。</p>
 </div>
 
-<h2 id="LRU_policy" name="LRU_policy">LRU ポリシー</h2>
+<h2 id="LRU_policy">LRU ポリシー</h2>
 
-<p>使用可能なディスク領域がすべて埋まったときは、クォータマネージャーが LRU ポリシーに基づいてデータの削除処理を始めます。もっとも過去に使用された生成元のデータが始めに削除され、上限に達しなくなるなるまで削除を繰り返します。</p>
+<p>使用可能なディスク領域がすべて埋まったときは、クォータマネージャーーが LRU ポリシーに基づいてデータの削除処理を始めます。もっとも過去に使用されたオリジンのデータが始めに削除され、上限に達しなくなるなるまで削除を繰り返します。</p>
 
-<p>一時的なストレージを使用して、生成元ごとに "最終アクセス日時" を記録しています。一時的なストレージがグローバルリミットに達する (後に上限をさらに超える) と、現在使用していない (すなわち、データストアを開き続けているタブやアプリがない) 生成元をすべて発見しようとします。これらは、"最終アクセス日時" によって整列されます。 origin eviction を発生させたリクエストを満たすのに十分な領域を確保するまで、もっとも過去に使用された生成元を削除し続けます。</p>
+<p>一時的なストレージを使用して、オリジンごとに「最終アクセス日時」を記録しています。一時的なストレージがグローバルリミットに達する (後に上限をさらに超える) と、現在使用していない (すなわち、データストアを開き続けているタブやアプリがない) オリジンをすべて発見しようとします。これらは、「最終アクセス日時」によって整列されます。オリジン立ち退きを発生させたリクエストを満たすのに十分な領域を確保するまで、もっとも過去に使用されたオリジンを削除し続けます。</p>
 
-<h2 id="See_also" name="See_also">関連情報</h2>
+<h2 id="See_also">関連情報</h2>
 
 <ul>
  <li><a href="http://www.html5rocks.com/en/tutorials/offline/quota-research/">Working with quota on mobile browsers</a>, by<a href="http://blog.agektmr.com" title="Eiji Kitamura"> Eiji Kitamura.</a> モバイルブラウザーのクライアント側ストレージについて詳しく分析した記事。</li>
diff --git a/files/ja/web/api/indexeddb_api/checking_when_a_deadline_is_due/index.html b/files/ja/web/api/indexeddb_api/checking_when_a_deadline_is_due/index.html
new file mode 100644
index 0000000000..ac21ce3e45
--- /dev/null
+++ b/files/ja/web/api/indexeddb_api/checking_when_a_deadline_is_due/index.html
@@ -0,0 +1,213 @@
+---
+title: 期限の確認
+slug: Web/API/IndexedDB_API/Checking_when_a_deadline_is_due
+tags:
+  - Apps
+  - Date
+  - Example
+  - Guide
+  - IndexedDB
+  - deadline
+translation_of: Web/API/IndexedDB_API/Checking_when_a_deadline_is_due
+---
+<div>{{DefaultAPISidebar("IndexedDB")}}</div><div class="summary">
+<p>この記事では、 IndexedDB で保存された期限と現在の日時を照合する複雑な例を見てみましょう。ここでの主な課題は、保存されている期限情報 (月、時、日など) を、<a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Date">Date</a> オブジェクトから取得した現在の日時と照合することです。</p>
+</div>
+
+<img alt="サンプルアプリのスクリーンショット。赤いメインタイトルの「To do app」、テスト用の To Do 項目、ユーザーが新しいタスクを入力するための赤いフォーム。" src="to-do-app.png">
+
+<p>この記事で紹介するアプリケーションの例は、 <strong>To-do リスト通知</strong>です。これは、タスクのタイトルと期限を <a href="/ja/docs/Web/API/IndexedDB_API">IndexedDB</a> に格納し、期限になったときに <a href="/ja/docs/Web/API/Notification">Notification</a> および <a href="/ja/docs/Web/API/Vibration_API">Vibration</a> API を使ってユーザーに通知を行う、シンプルな To-do リストアプリケーションです。 <a href="https://github.com/chrisdavidmills/to-do-notifications/tree/gh-pages">To-do リスト通知アプリは GitHub ダウンロード</a>してソースコードをいじったり、<a href="https://mdn.github.io/to-do-notifications/">アプリの動作をライブで閲覧</a>したりすることができます。</p>
+
+<h2 id="The_basic_problem">基本的な問題点</h2>
+
+<p>この ToDo アプリでは、まず時間と日付の情報を、機械が読め、表示されたときに人間が理解できる形式で記録し、次にそれぞれの時間と日付が現在の時点で発生しているかどうかをチェックしたいと考えました。基本的には、現在の時刻と日付を確認し、保存されている各イベントの締め切りが現在の時刻と日付に一致するかどうかを確認します。もし一致していれば、ユーザーに何らかの通知をしたいと考えています。</p>
+
+<p>2 つの {{jsxref("Global_Objects/Date", "Date")}} オブジェクトを比較するだけなら簡単ですが、もちろん人間は JavaScript が理解できるような形式で期限を入力したいわけではありません。人間が読むことのできる日付はかなり違っていて、いくつもの異なる表現があります。</p>
+
+<h3 id="Recording_the_date_information">日付情報の記録</h3>
+
+<p>モバイル端末での合理的な使い勝手を提供するために、そして曖昧さを減らすために、 HTML フォームを作成することにしました。</p>
+
+<img alt="この ToDo アプリのフォームで、タスクのタイトルを入力するフィールドと、期限の年、月、日、時、分の値が入っています。" src="to-do-app-form2.png">
+
+<ul>
+ <li>ToDo リストのタイトルを入力するためのテキスト入力です。これはユーザーの入力作業の中で最も避けられないものです。</li>
+ <li>期限の「時」と「分」を入力するための数値入力。 <code>type="number"</code> に対応しているブラウザーでは、小さな上下矢印の数字ピッカーが表示されます。モバイルプラットフォームでは、データを入力するためのテンキーが用意されていることが多く、これは便利です。他のプラットフォームでは、標準的なテキスト入力になりますが、これは問題ありません。</li>
+ <li>期限の日、月、年を入力するための {{HTMLElement("select")}} 要素。これらの値は、ユーザーにとって最も曖昧な入力となるため (7, sunday, sun? 04, 4, April, Apr? 2013, '13, 13?) 日は数値で、月は月名で、年は 4 桁の年号で記録されます。</li>
+</ul>
+
+<p>フォームの送信ボタンが押されると、 <code>addData()</code> 関数が実行され、次のように始まります。</p>
+
+<pre class="brush: js">function addData(e) {
+  e.preventDefault();
+
+  if(title.value == '' || hours.value == null || minutes.value == null || day.value == '' || month.value == '' || year.value == null) {
+    note.innerHTML += '&lt;li&gt;Data not submitted — form incomplete.&lt;/li&gt;';
+    return;
+  }
+</pre>
+
+<p>この部分では、フォームのフィールドにすべての情報が入力されているかどうかを確認します。記入されていない場合は、開発者通知ペイン (アプリの UI の左下を参照) にメッセージを表示して、何が起こっているのかをユーザーに伝え、機能を終了します。このステップは、主に HTML フォームの検証に対応していないブラウザーのためのものです (検証に対応しているブラウザーでは、 HTML で required 属性を使用して検証を強制しています)。</p>
+
+<pre class="brush: js">   else {
+    var newItem = [
+      {
+        taskTitle: title.value,
+        hours    : hours.value,
+        minutes  : minutes.value,
+        day      : day.value,
+        month    : month.value,
+        year     : year.value,
+        notified : "no"
+      }
+    ];
+
+    // open a read/write db transaction, ready for adding the data
+    var transaction = db.transaction(["toDoList"], "readwrite");
+
+    // report on the success of opening the transaction
+    transaction.oncomplete = function(event) {
+      note.innerHTML += '&lt;li&gt;Transaction opened for task addition.&lt;/li&gt;';
+    };
+
+    transaction.onerror = function(event) {
+      note.innerHTML += '&lt;li&gt;Transaction not opened due to error. Duplicate items not allowed.&lt;/li&gt;';
+    };
+
+    // create an object store on the transaction
+    var objectStore = transaction.objectStore("toDoList");
+
+    // add our newItem object to the object store
+    var request = objectStore.add(newItem[0]); </pre>
+
+<p>この部分では、データベースへの挿入に必要な形式でデータを保存する <code>newItem</code> というオブジェクトを作成します。次の数行では、データベーストランザクションを開き、これが成功したか失敗したかをユーザーに通知するメッセージを提供しています。そして、新しい項目が追加される <code>objectStore</code> が生成されます。データオブジェクトの <code>notified</code> プロパティは、 To-do リストの項目の期限がまだ来ておらず、通知されていないことを示しています。これについては後ほど説明します。</p>
+
+<div class="note">
+<p><strong>メモ:</strong> 変数 <code>db</code> には IndexedDB のデータベースインスタンスへの参照が格納されています。この変数の様々なプロパティを使用してデータを操作することができます。</p>
+</div>
+
+<pre class="brush: js">
+    request.onsuccess = function(event) {
+
+      note.innerHTML += '&lt;li&gt;New item added to database.&lt;/li&gt;';
+
+      title.value = '';
+      hours.value = null;
+      minutes.value = null;
+      day.value = 01;
+      month.value = 'January';
+      year.value = 2020;
+    };
+  }</pre>
+
+<p>次の部分では、新しい項目の追加が成功したことを示すログメッセージを作成し、次のタスクが入力できるようにフォームをリセットします。</p>
+
+<pre class="brush: js">
+  // update the display of data to show the newly added item, by running displayData() again.
+  displayData();
+};</pre>
+
+<p>最後に <code>displayData()</code> 関数を実行して、アプリ内のデータの表示を更新し、先ほど入力された新しいタスクを表示します。</p>
+
+<h3 id="Checking_whether_a_deadline_has_been_reached">期限に達したかどうかの確認</h3>
+
+<p>この時点でデータはデータベースに入っていますが、今度は期限に達しているかどうかをチェックしたいと思います。これを行うのが <code>checkDeadlines()</code> 関数です。</p>
+
+<pre class="brush: js">function checkDeadlines() {
+  var now = new Date();</pre>
+
+<p>まず、空の <code>Date</code> オブジェクトを作成して、現在の日付と時刻を取得します。簡単でしょう？ここからは少し複雑な話になります。</p>
+
+<pre class="brush: js">  var minuteCheck  = now.getMinutes();
+  var hourCheck    = now.getHours();
+  var dayCheck     = now.getDate();
+  var monthCheck   = now.getMonth();
+  var yearCheck    = now.getFullYear();
+</pre>
+
+<p><code>Date</code> オブジェクトには、内部の日付や時刻のさまざまな部分を抽出するためのメソッドがいくつかあります。ここでは、現在の分 (簡単な数値として取得)、時 (簡単な数値として取得)、日 (これは <code>getDate()</code> が必要、 <code>getDay()</code> は曜日を 1-7 で返すため)、月 (0-11 の数値を返す。下記参照)、年 (<code>getFullYear()</code> が必要、<code>getYear()</code> は非推奨であり、誰にとってもあまり役に立たない奇妙な値を返します) を読み取ります。</p>
+
+<pre class="brush: js">   var objectStore = db.transaction(['toDoList'], "readwrite").objectStore('toDoList');
+
+  objectStore.openCursor().onsuccess = function(event) {
+    var cursor = event.target.result;
+
+    if(cursor) {</pre>
+
+<p>次にもう一つ、 IndexedDB の <code>objectStore</code> を生成し、 <code>openCursor()</code> メソッドを使用してカーソルを開きます。これは基本的に IndexedDB がストア内のすべての項目を反復処理する方法です。そして、カーソル内に有効な項目が残っている限り、カーソル内のすべての項目をループします。</p>
+
+<pre class="brush: js">      switch(cursor.value.month) {
+        case "January":
+          var monthNumber = 0;
+          break;
+        case "February":
+          var monthNumber = 1;
+          break;
+
+        // other lines removed from listing for brevity
+
+        case "December":
+          var monthNumber = 11;
+          break;
+        default:
+          alert('Incorrect month entered in database.');
+      }</pre>
+
+<p>まず最初に行うことは、データベースに保存されている月名を、 JavaScript が理解できる月の数値に変換することです。前に見たように、 JavaScript の Date オブジェクトは月の値を 0 から 11 までの数値として生成します。</p>
+
+<pre class="brush: js">      if(+(cursor.value.hours) == hourCheck &amp;&amp;
+         +(cursor.value.minutes) == minuteCheck &amp;&amp;
+         +(cursor.value.day) == dayCheck &amp;&amp;
+         monthNumber == monthCheck &amp;&amp;
+         cursor.value.year == yearCheck &amp;&amp;
+         notified == "no") {
+
+        // If the numbers all do match, run the createNotification()
+        // function to create a system notification
+        createNotification(cursor.value.taskTitle);
+      }</pre>
+
+<p>IndexedDB に格納された値と照合したい現在の時刻と日付の部分がすべて組み立てられたので、いよいよチェックを実行します。ユーザーに期限切れを知らせる何らかの通知を行う前に、すべての値が一致している必要があります。</p>
+
+<p>ここでの <code>+</code> 演算子は、先頭にゼロが付いている数字を、先頭にゼロが付いていない同等の数字に変換します (例えば 09 -&gt; 9)。これが必要なのは、 JavaScript の Date の数値には先頭にゼロがないが、データにはあるかもしれないからです。</p>
+
+<p><code>notified == "no"</code> のチェックは、 1 つの To-Do アイテムに対して 1 つの通知しか受け取れないようにするためのものです。各項目のオブジェクトに対して通知が発生すると、その <code>notification</code> プロパティが <code>"yes"</code> に設定されるので、次の繰り返しではこのチェックが通らないようにするために、 <code>createNotification()</code> 関数の中に次のようなコードを入れています (詳しくは <a href="/ja/docs/Web/API/IndexedDB_API/Using_IndexedDB">IndexedDB の使用</a>を読んでください)。</p>
+
+<pre class="brush: js">    // now we need to update the value of notified to "yes" in this particular data object, so the
+    // notification won't be set off on it again
+
+    // first open up a transaction as usual
+    var objectStore = db.transaction(['toDoList'], "readwrite").objectStore('toDoList');
+
+    // get the to-do list object that has this title as it's title
+    var request = objectStore.get(title);
+
+    request.onsuccess = function() {
+      // grab the data object returned as the result
+      var data = request.result;
+
+      // update the notified value in the object to "yes"
+      data.notified = "yes";
+
+      // create another request that inserts the item back into the database
+      var requestUpdate = objectStore.put(data);
+
+      // when this new request succeeds, run the displayData() function again to update the display
+      requestUpdate.onsuccess = function() {
+        displayData();
+      }</pre>
+
+<p>すべてのチェックが一致した場合は、 <code>createNotification()</code> 関数を実行して、ユーザーに通知を行います。</p>
+
+<pre class="brush: js">       cursor.continue();
+    }
+  }
+}</pre>
+
+<p>この関数の最後の行では、カーソルが上に移動し、 IndexedDB に格納されている次のタスクに対して、上記の期限チェックの仕組みが実行されます。</p>
+
+<h3 id="Keep_on_checking!">チェックし続ける</h3>
+
+<p>もちろん、上記の期限チェック機能を一度実行するだけでは意味がありません。すべての締切に達していないかどうかを常にチェックし続けたいのです。そのために、 <code>setInterval()</code> を使って 1 秒に 1 回 <code>checkDeadlines()</code> を実行します。</p>
+
+<pre class="brush: js">setInterval(checkDeadlines, 1000);</pre>
diff --git a/files/ja/web/api/indexeddb_api/index.html b/files/ja/web/api/indexeddb_api/index.html
index 14369351fa..1d08f26cc8 100644
--- a/files/ja/web/api/indexeddb_api/index.html
+++ b/files/ja/web/api/indexeddb_api/index.html
@@ -13,54 +13,54 @@ translation_of: Web/API/IndexedDB_API
 ---
 <div>{{DefaultAPISidebar("IndexedDB")}}</div>
 
-<p>IndexedDB は、ファイルや blob を含む構造化された多くのデータを保存する、クライアントサイドのローレベル API です。この API は高パフォーマンスなデータの検索を行うために、インデックスを使用します。<a href="/ja/docs/Web/API/Web_Storage_API">Web Storage</a> は比較的少量のデータを保存するのに有用ではありますが、構造化された非常に多くのデータを扱うには不十分です。IndexedDB が解決策を提供します。本ページは、MDN における IndexedDB のランディングページです。ここでは API リファレンスへのリンク、使用ガイド、ブラウザーのサポート状況、主要なコンセプトの説明を掲載します。</p>
+<p>IndexedDB は、ファイルや blob を含む大量の構造化データをクライアント側で保存するための低レベル API です。この API はインデックスを使用して、高パフォーマンスなデータの検索を行うことができます。<a href="/ja/docs/Web/API/Web_Storage_API">Web Storage</a> は比較的少量のデータを保存するのに有用ではありますが、構造化された非常に多くのデータを扱うには不十分です。IndexedDB が解決策を提供します。ここでは、完全な API リファレンスと使用ガイド、ブラウザーの対応の詳細、および重要な概念の説明へのリンクを提供します。</p>
 
 <p>{{AvailableInWorkers}}</p>
 
 <div class="note">
-<p><strong>メモ</strong>: IndexedDB API は強力ですが、シンプルな用途にとってはとても複雑に見えるかもしれません。シンプルな API が好ましいのでしたら、IndexedDB をより開発者フレンドリーに扱える <a href="https://localforage.github.io/localForage/">localForage</a> や <a href="http://www.dexie.org/">dexie.js</a>、<a href="https://github.com/erikolson186/zangodb">ZangoDB</a>、<a href="https://pouchdb.com/">PouchDB</a>、<a href="http://jsstore.net/">JsStore</a> などのライブラリを検討してください。</p>
+<p><strong>メモ</strong>: IndexedDB API は強力ですが、シンプルな用途にはとても複雑に見えるかもしれません。シンプルな API が好ましいのであれば、<a href="#see_also">関連情報</a>の節にある IndexedDB をプログラマーにとって扱いやすくするライブラリーを試してみてください。</p>
 </div>
 
-<h2 id="Key_concepts_and_usage" name="Key_concepts_and_usage">主要概念と使用法</h2>
+<h2 id="Key_concepts_and_usage">主要概念と使用法</h2>
 
-<p>IndexedDB は SQL ベースの RDBMS に似たトランザクショナルデータベースシステムですが、SQL ベース の RDBMS が固定された列を持つテーブルを使用するのに対して、IndexedDB は JavaScript ベースのオブジェクト指向データベースです。IndexedDB では、<strong>キー</strong>でインデックス付けされたオブジェクトを保存および取り出すことができます。<a href="/ja/docs/Web/Guide/API/DOM/The_structured_clone_algorithm">Structured Clone アルゴリズム</a>がサポートする、任意のオブジェクトを保存できます。データベースのスキーマを定義する、データベースへの接続を確立する、そして一連の<strong>トランザクション</strong>でデータの取り出しや更新を行うことが必要です。</p>
+<p>IndexedDB は SQL ベースの RDBMS に似たトランザクショナルデータベースシステムです。しかし、SQL ベース の RDBMS が固定された列を持つテーブルを使用するのに対して、IndexedDB は JavaScript ベースのオブジェクト指向データベースです。IndexedDB では、<strong>キー</strong>でインデックス付けされたオブジェクトを保存および取り出すことができます。<a href="/ja/docs/Web/API/Web_Workers_API/Structured_clone_algorithm">構造化クローンアルゴリズム</a>に対応した、任意のオブジェクトを保存することができます。データベースのスキーマを定義し、データベースへの接続を確立し、そして一連の<strong>トランザクション</strong>でデータの取り出しや更新を行う必要があります。</p>
 
 <ul>
- <li><a href="/ja/docs/Web/API/IndexedDB_API/Basic_Concepts_Behind_IndexedDB">IndexedDB のコンセプト</a>を詳しく知る</li>
- <li><a href="/ja/docs/Web/API/IndexedDB_API/Using_IndexedDB">IndexedDB 使用ガイド</a>で、非同期に IndexedDB を扱い方法を基本原理から学ぶ</li>
- <li><a href="/ja/docs/Web/Progressive_web_apps/Offline_Service_workers">Service Worker により PWA をオフラインで動作させる</a>で概説されているように、データをオフラインに格納する IndexedDB と資産をオフラインに格納する Service Worker を組み合わせる。</li>
+ <li><a href="/ja/docs/Web/API/IndexedDB_API/Basic_Terminology">IndexedDB の主な特徴と基本用語</a>についてはこちらをご覧ください。</li>
+ <li><a href="/ja/docs/Web/API/IndexedDB_API/Using_IndexedDB">IndexedDB の使用</a>のガイドで、で、非同期的に IndexedDB を使用する方法を基本原理から学びます。</li>
+ <li>データをオフラインで保存するための IndexedDB と、資産をオフラインで保存するためのサービスワーカーを組み合わせる方法は、 <a href="/ja/docs/Web/Progressive_web_apps/Offline_Service_workers">サービスワーカーにより PWA をオフラインで動作させる</a>で概説しています。</li>
 </ul>
 
 <div class="note">
-<p><strong>メモ</strong>: たいていのウェブストレージ技術と同様に、IndexedDB も<a class="external" href="http://www.w3.org/Security/wiki/Same_Origin_Policy">同一オリジンポリシー</a>に従います。よって、保存済みデータは同一ドメイン内からアクセスできますが、異なるドメインにまたがってデータへアクセスすることはできません。</p>
+<p><strong>メモ</strong>: たいていのウェブストレージ技術と同様に、IndexedDB も<a href="https://www.w3.org/Security/wiki/Same_Origin_Policy">同一オリジンポリシー</a>に従います。よって、保存済みデータは同一ドメイン内からアクセスできますが、異なるドメインにまたがってデータへアクセスすることはできません。</p>
 </div>
 
-<h3 id="Synchronous_and_asynchronous" name="Synchronous_and_asynchronous">同期と非同期</h3>
+<h3 id="Synchronous_and_asynchronous">同期と非同期</h3>
 
-<p>IndexedDB を扱う操作は非同期に実行しますので、他のアプリケーションを妨げません。 IndexedDB は元々同期 API と<span style="background-color: #f5f6f5;">非同期</span> API の両方を提供していました。同期 API は <a href="/ja/docs/Web/Guide/Performance/Using_web_workers">Web Worker</a> 内でのみの使用を意図していましたが、必要性に疑問があったため仕様から削除されました。ただし、<span style="background-color: #f5f6f5;">同期 API</span> はウェブ開発者から十分な要望がある場合は、将来再び導入される可能性があります。</p>
+<p>IndexedDB を扱う操作は非同期に実行しますので、他のアプリケーションを妨げません。 IndexedDB は元々同期 API と非同期 API の両方を提供していました。同期 API は<a href="/ja/docs/Web/API/Web_Workers_API/Using_web_workers">ウェブワーカー</a>内でのみの使用を意図していましたが、必要性に疑問があったため仕様から削除されました。ただし、同期 API はウェブ開発者から十分な要望がある場合は、将来再び導入される可能性があります。</p>
 
-<h3 id="Storage_limits_and_eviction_criteria" name="Storage_limits_and_eviction_criteria">ストレージの上限と破棄基準</h3>
+<h3 id="Storage_limits_and_eviction_criteria">ストレージの上限と破棄基準</h3>
 
-<p>クライアントサイド (すなわちローカルディスク) に何らかのデータを保存するウェブ技術がいくつかあり、IndexedDB はそのような技術としてもっともよく語られます。ブラウザーがどれだけの容量をウェブデータストレージに割り当てるかや、容量の上限に達したときにどのデータを削除するかのプロセスは単純ではなく、またブラウザーにより異なります。<a href="/ja/docs/Web/API/IndexedDB_API/Browser_storage_limits_and_eviction_criteria">Browser storage limits and eviction criteria</a> で、少なくとも Firefox ではどのようにしているかを説明しようとしています。</p>
+<p>クライアント側 (すなわちローカルディスク) に何らかのデータを保存するウェブ技術はいくつかあります。IndexedDB はそのような技術としてもっともよく語られます。ブラウザーがどれだけの容量をウェブデータストレージに割り当てるかや、容量の上限に達したときにどのデータを削除するかのプロセスは単純ではなく、またブラウザーにより異なります。<a href="/ja/docs/Web/API/IndexedDB_API/Browser_storage_limits_and_eviction_criteria">ブラウザーのストレージ制限と削除基準</a>で、少なくとも Firefox ではどのようにしているかの解説を試みています。</p>
 
-<h2 id="Interfaces" name="Interfaces">インターフェイス</h2>
+<h2 id="Interfaces">インターフェイス</h2>
 
-<p>データベースへのアクセスを行いたい場合は、<a href="/ja/docs/DOM/window" title="DOM/window">window</a> オブジェクトの <a href="/ja/docs/Web/API/IDBEnvironment.indexedDB"><code>indexedDB</code></a> 属性上の <a href="/ja/docs/Web/API/IDBFactory.open"><code>open()</code></a> を呼び出してください。このメソッドは {{domxref("IDBRequest")}} オブジェクトを返します。{{domxref("IDBRequest")}} オブジェクト上で発火したイベントによってアプリケーションが呼び出されることにより、非同期操作が行われます。</p>
+<p>データベースへのアクセスを行いたい場合は、<a href="/ja/docs/Web/API/Window">window</a> オブジェクトの <a href="/ja/docs/Web/API/WindowOrWorkerGlobalScope/indexedDB"><code>indexedDB</code></a> 属性上で <a href="/ja/docs/Web/API/IDBFactory/open"><code>open()</code></a> を呼び出してください。このメソッドは {{domxref("IDBRequest")}} オブジェクトを返します。{{domxref("IDBRequest")}} オブジェクト上で発行されたイベントによってアプリケーションが呼び出されることにより、非同期操作が行われます。</p>
 
-<h3 id="Connecting_to_a_database" name="Connecting_to_a_database">データベースへの接続</h3>
+<h3 id="Connecting_to_a_database">データベースへの接続</h3>
 
 <dl>
  <dt>{{domxref("IDBEnvironment")}}</dt>
  <dd>IndexedDB 機能へのアクセスを提供します。{{domxref("window")}} および {{domxref("worker")}} オブジェクトによって実装されています。このインターフェイスは 2.0 仕様の一部ではありません。</dd>
  <dt>{{domxref("IDBFactory")}}</dt>
- <dd>データベースへのアクセスを提供します。<a href="/ja/docs/Web/API/IDBEnvironment.indexedDB"><code>indexedDB</code></a> グローバルオブジェクトによって実装されており、従って API へのエントリーポイントになります。</dd>
+ <dd>データベースへのアクセスを提供します。{{domxref("WindowOrWorkerGlobalScope/indexedDB", "indexedDB")}} グローバルオブジェクトによって実装されており、従って API へのエントリーポイントになります。</dd>
  <dt>{{domxref("IDBOpenDBRequest")}}</dt>
  <dd>データベースを開くリクエストを表します。</dd>
  <dt>{{domxref("IDBDatabase")}}</dt>
  <dd>データベース接続を表します。データベースとのトランザクション処理を行うためのみに使用されます。</dd>
 </dl>
 
-<h3 id="Retrieving_and_modifying_data" name="Retrieving_and_modifying_data">データの取り出しと変更</h3>
+<h3 id="Retrieving_and_modifying_data">データの取り出しと変更</h3>
 
 <dl>
  <dt>{{domxref("IDBTransaction")}}</dt>
@@ -72,88 +72,83 @@ translation_of: Web/API/IndexedDB_API
  <dt>{{domxref("IDBIndex")}}</dt>
  <dd>こちらも IndexedDB データベース内のデータのサブセットにアクセスできますが、レコードの探索に主キーではなくインデックスを使用します。{{domxref("IDBObjectStore")}} より高速に動作する場合があります。</dd>
  <dt>{{domxref("IDBCursor")}}</dt>
- <dd>オブジェクトストアとインデックスをイテレートします。</dd>
+ <dd>オブジェクトストアとインデックスを反復処理します。</dd>
  <dt>{{domxref("IDBCursorWithValue")}}</dt>
- <dd>オブジェクトストアとインデックスをイテレートして、カーソルの現在の値を返します。</dd>
+ <dd>オブジェクトストアとインデックスを反復処理して、カーソルの現在の値を返します。</dd>
  <dt>{{domxref("IDBKeyRange")}}</dt>
  <dd>データベースから一定の範囲のデータを取り出すために使用可能な、キーの範囲を定義します。</dd>
  <dt>{{domxref("IDBLocaleAwareKeyRange")}} {{Non-standard_inline}}</dt>
- <dd>データベースから一定の範囲のデータを取り出すために使用可能な、インデックス用に指定したロケール (<a href="/ja/docs/Web/API/IDBObjectStore/createIndex#Parameters"><code>createIndex()</code> の optionalParameters</a> をご覧ください) の規則によって並べ替えたキーの範囲を定義します。</dd>
+ <dd>データベースから一定の範囲のデータを取り出すために使用可能な、インデックス用に指定したロケール (<a href="/ja/docs/Web/API/IDBObjectStore/createIndex#parameters"><code>createIndex()</code> の optionalParameters</a> をご覧ください) の規則によって並べ替えたキーの範囲を定義します。</dd>
 </dl>
 
-<h3 id="Custom_event_interfaces" name="Custom_event_interfaces">カスタムイベントインターフェイス</h3>
+<h3 id="Custom_event_interfaces">カスタムイベントインターフェイス</h3>
 
-<p>本仕様では、以下のカスタムインターフェイスでイベントが発生します:</p>
+<p>本仕様では、以下のカスタムインターフェイスでイベントが発生します。</p>
 
 <dl>
  <dt>{{domxref("IDBVersionChangeEvent")}}</dt>
- <dd><code>IDBVersionChangeEvent</code> インターフェイスは、{{domxref("IDBOpenDBRequest.onupgradeneeded")}} イベントハンドラ関数によってデータベースのバージョンが変更されたことを表します。</dd>
+ <dd><code>IDBVersionChangeEvent</code> インターフェイスは、{{domxref("IDBOpenDBRequest.onupgradeneeded")}} イベントハンドラー関数によってデータベースのバージョンが変更されたことを表します。</dd>
 </dl>
 
-<h3 id="Obsolete_interfaces" name="Obsolete_interfaces">廃止インターフェイス</h3>
+<h3 id="Obsolete_interfaces">廃止インターフェイス</h3>
 
-<p>仕様の早期段階で定義されていたインターフェイスの一部が、現在、削除されています。以前書いたコードを最新の仕様に合わせて更新する際に必要になるであろうことから、削除されたインターフェイスに関するドキュメントは残してあります:</p>
+<p>仕様の早期段階では、以下のようなインターフェイスを定義していましたが、既に削除されています。以前書かれたコードを更新する必要がある場合のために、ドキュメントを残しています。</p>
 
 <dl>
- <dt>{{domxref("IDBVersionChangeRequest")}} {{obsolete_inline}}</dt>
- <dd>データベースのバージョンの変更リクエストを表現します。データベースのバージョンを変更する方法が ({{domxref("IDBDatabase.setVersion")}} ではなく {{domxref("IDBFactory.open")}} を呼び出すように) 変わりました。また削除された {{domxref("IDBVersionChangeRequest")}} に代わり {{domxref("IDBOpenDBRequest")}} インターフェイスが用意されています。</dd>
- <dt>{{domxref("IDBDatabaseException")}}  {{obsolete_inline}}</dt>
+ <dt>{{domxref("IDBDatabaseException")}}  {{deprecated_inline}}</dt>
  <dd>データベース操作が実行されている間に発生した例外状況を表します。</dd>
- <dt>{{domxref("IDBTransactionSync")}} {{obsolete_inline}}</dt>
- <dd>同期型の {{domxref("IDBTransaction")}} です。</dd>
- <dt>{{domxref("IDBObjectStoreSync")}} {{obsolete_inline}}</dt>
- <dd>同期型の {{domxref("IDBObjectStore")}} です。</dd>
- <dt>{{domxref("IDBIndexSync")}} {{obsolete_inline}}</dt>
- <dd>同期型の {{domxref("IDBIndex")}} です。</dd>
- <dt>{{domxref("IDBFactorySync")}} {{obsolete_inline}}</dt>
- <dd>同期型の {{domxref("IDBFactory")}} です。</dd>
- <dt>{{domxref("IDBEnvironmentSync")}} {{obsolete_inline}}</dt>
- <dd>同期型の {{domxref("IDBEnvironment")}} です。</dd>
- <dt>{{domxref("IDBDatabaseSync")}} {{obsolete_inline}}</dt>
- <dd>同期型の {{domxref("IDBDatabase")}} です。</dd>
- <dt>{{domxref("IDBCursorSync")}} {{obsolete_inline}}</dt>
- <dd>同期型の {{domxref("IDBCursor")}} です。</dd>
+ <dt>{{domxref("IDBTransactionSync")}} {{deprecated_inline}}</dt>
+ <dd>同期版の {{domxref("IDBTransaction")}} です。</dd>
+ <dt>{{domxref("IDBObjectStoreSync")}} {{deprecated_inline}}</dt>
+ <dd>同期版の {{domxref("IDBObjectStore")}} です。</dd>
+ <dt>{{domxref("IDBIndexSync")}} {{deprecated_inline}}</dt>
+ <dd>同期版の {{domxref("IDBIndex")}} です。</dd>
+ <dt>{{domxref("IDBFactorySync")}} {{deprecated_inline}}</dt>
+ <dd>同期版の {{domxref("IDBFactory")}} です。</dd>
+ <dt>{{domxref("IDBEnvironmentSync")}} {{deprecated_inline}}</dt>
+ <dd>同期版の {{domxref("IDBEnvironment")}} です。</dd>
+ <dt>{{domxref("IDBDatabaseSync")}} {{deprecated_inline}}</dt>
+ <dd>同期版の {{domxref("IDBDatabase")}} です。</dd>
+ <dt>{{domxref("IDBCursorSync")}} {{deprecated_inline}}</dt>
+ <dd>同期版の {{domxref("IDBCursor")}} です。</dd>
 </dl>
 
-<h2 id="Examples" name="Examples">例</h2>
+<h2 id="Examples">例</h2>
 
 <ul>
- <li><a href="http://marco-c.github.io/eLibri/">eLibri:</a> Marco Castelluccio が作成した、高度なライブラリおよび電子書籍リーダーアプリケーションです。IndexedDB Mozilla DevDerby の最優秀作品です。</li>
- <li><a href="https://github.com/chrisdavidmills/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a href="http://mdn.github.io/to-do-notifications/">ライブデモ</a>): リファレンスドキュメントで例示している、参考アプリケーションです。</li>
- <li><a href="http://hacks.mozilla.org/2012/02/storing-images-and-files-in-indexeddb/">Storing images and files in IndexedDB</a></li>
+ <li><a href="https://marco-c.github.io/eLibri/">eLibri:</a> Marco Castelluccio が作成した、高度なライブラリおよび電子書籍リーダーアプリケーションです。IndexedDB Mozilla DevDerby の最優秀作品です。</li>
+ <li><a href="https://github.com/chrisdavidmills/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a href="https://mdn.github.io/to-do-notifications/">ライブデモ</a>): リファレンスドキュメントで例示している、参考アプリケーションです。</li>
+ <li><a href="https://hacks.mozilla.org/2012/02/storing-images-and-files-in-indexeddb/">Storing images and files in IndexedDB</a></li>
 </ul>
 
-<h2 id="Specifications" name="Specifications">仕様書</h2>
+<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("IndexedDB 2")}}</td>
-   <td>{{Spec2("IndexedDB 2")}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('IndexedDB')}}</td>
-   <td>{{Spec2('IndexedDB')}}</td>
-   <td>初回定義</td>
-  </tr>
- </tbody>
+  <thead>
+    <tr>
+      <th scope="col">仕様書</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td><a href="https://w3c.github.io/IndexedDB/">Indexed Database API</a></td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="See_also" name="See_also">関連情報</h2>
+<h2 id="See_also">関連情報</h2>
 
 <ul>
- <li><a class="external" href="https://localforage.github.io/localForage/">localForage</a>: クライアントサイドのデータストレージ向けに、シンプルな name:value 形式の構文を提供する Polyfill です。バックグラウンドで IndexedDB を使用しますが、IndexedDB をサポートしないブラウザーでは WebSQL や localStorage にフォールバックします。</li>
- <li><a href="http://www.dexie.org/">dexie.js</a>: 優良でシンプルな構文により高速なコード開発を可能にする、IndexedDB のラッパーです。</li>
+ <li><a href="https://localforage.github.io/localForage/">localForage</a>: クライアント側のデータストレージ向けに、シンプルな name:value 形式の構文を提供するポリフィルです。バックグラウンドで IndexedDB を使用しますが、IndexedDB をに対応していないブラウザーでは WebSQL や localStorage にフォールバックします。</li>
+ <li><a href="https://dexie.org/">Dexie.js</a>: 優良でシンプルな構文により高速なコード開発を可能にする、IndexedDB のラッパーです。</li>
  <li><a href="https://github.com/erikolson186/zangodb">ZangoDB</a>: IndexedDB の MongoDB ライクなインターフェイスで、MongoDB でおなじみのフィルターリング、射影、ソート、アップデート、集計をサポートしています。</li>
- <li><a href="http://jsstore.net/">JsStore</a>: SQL 風の構文による IndexedDB のラッパーです。</li>
- <li><a href="https://github.com/mWater/minimongo">MiniMongo</a>: クライアントサイドのインメモリーの mongodb で localstorage と server sync over http を元にしたもの。MiniMongo は MeteorJS で使われています。</li>
- <li><a href="https://pouchdb.com">PouchDB</a>: クライアントサイドのブラウザー内の CouchDB 実装で IndexedDB を使っています。</li>
+ <li><a href="https://jsstore.net/">JsStore</a>: SQL 風の構文による IndexedDB のラッパーです。</li>
+ <li><a href="https://github.com/mWater/minimongo">MiniMongo</a>: クライアント側のインメモリーの mongodb で localstorage と server sync over http を元にしたもの。MiniMongo は MeteorJS で使われています。</li>
+ <li><a href="https://pouchdb.com">PouchDB</a>: クライアント側のブラウザー内の CouchDB 実装で IndexedDB を使っています。</li>
+ <li><a href="https://www.npmjs.com/package/idb">idb</a>: IndexedDB API をほぼ反映した小さな (~1.15k) ライブラリーですが、使いやすさを大きく変える小さな改良が加えられています。</li>
+ <li><a href="https://www.npmjs.com/package/idb-keyval">idb-keyval</a>: IndexedDB で実装された超シンプルで小さな (~600B) プロミスベースのキーバリューストア</li>
+ <li><a href="https://www.npmjs.com/package/@sifrr/storage">sifrr-storage:</a> クライアントサイドのキーバリューストレージ用の小さな (~2kB) プロミスベースのライブラリーです。IndexedDB、localStorage、WebSQL、Cookie で動作します。優先度に基づいて、対応しているストレージを自動的に使用できます。</li>
+ <li><a href="https://github.com/google/lovefield">lovefield</a>: Lovefield は、ウェブアプリケーション用のリレーショナルデータベースです。 JavaScript で書かれており、クロスブラウザーで動作します。SQL ライクな API を提供しており、高速で安全、かつ簡単に使用できます。</li>
+ <li><a href="https://github.com/hyoo-ru/mam_mol/tree/master/db">$mol_db</a>: 小さな (~1.3kB) TypeScript のファサードで、プロミスベースの API と自動マイグレーションを備えています。</li>
+  
 </ul>
diff --git a/files/ja/web/api/indexeddb_api/using_indexeddb/index.html b/files/ja/web/api/indexeddb_api/using_indexeddb/index.html
index 333cda62f1..a4727f8781 100644
--- a/files/ja/web/api/indexeddb_api/using_indexeddb/index.html
+++ b/files/ja/web/api/indexeddb_api/using_indexeddb/index.html
@@ -1,46 +1,52 @@
 ---
-title: IndexedDB を使用する
+title: IndexedDB の使用
 slug: Web/API/IndexedDB_API/Using_IndexedDB
 tags:
   - API
   - Advanced
   - Database
+  - Guide
   - IndexedDB
   - Storage
   - Tutorial
+  - jsstore
 translation_of: Web/API/IndexedDB_API/Using_IndexedDB
 ---
 <p>{{DefaultAPISidebar("IndexedDB")}}</p>
 
 <div class="summary">
-<p>IndexedDB は、ユーザーのブラウザー内にデータを永続的に保存する手段です。ネットワークの状態にかかわらず高度な問い合わせ機能を持つ ウェブアプリケーションを作成できますので、オンラインとオフラインの両方で動作するアプリケーションになります。</p>
+<p>IndexedDB は、ユーザーのブラウザー内にデータを永続的に保存する手段です。ネットワークの状態にかかわらず高度な問い合わせ機能を持つウェブアプリケーションを作成できますので、アプリケーションがオンラインとオフラインの両方で動作するようになります。</p>
 </div>
 
-<h2 id="About_this_document" name="About_this_document">このドキュメントについて</h2>
+<h2 id="About_this_document">このドキュメントについて</h2>
 
-<p>このチュートリアルでは、IndexedDB の非同期 API の使い方を見ていきます。IndexedDB について詳しくない場合は、始めに <a href="/ja/docs/Web/API/IndexedDB_API/Basic_Concepts_Behind_IndexedDB" title="IndexedDB/Basic Concepts Behind IndexedDB">IndexedDB の基本的な概念</a>をお読みください。</p>
+<p>このチュートリアルでは、IndexedDB の非同期 API の使い方を見ていきます。IndexedDB について詳しくない場合は、始めに <a href="/ja/docs/Web/API/IndexedDB_API/Basic_Terminology">IndexedDB の主な特徴と基本用語</a>をお読みください。</p>
 
-<p>IndexedDB API のリファレンスドキュメントとして、<a href="/ja/docs/Web/API/IndexedDB_API" title="https://developer.mozilla.org/en/IndexedDB">IndexedDB</a> の記事とそのサブ記事をご覧ください。IndexedDB で使用されるオブジェクトの型や、同期 API および非同期 API のドキュメントがあります。</p>
+<p>IndexedDB API のリファレンスドキュメントとして、<a href="/ja/docs/Web/API/IndexedDB_API">IndexedDB API</a> の記事とそのサブ記事をご覧ください。この記事では、IndexedDB で使用されるオブジェクトの種類と、非同期 API のメソッドについて説明します (同期 API は仕様から削除されました)。</p>
 
-<h2 id="pattern" name="pattern">基本パターン</h2>
+<h2 id="pattern">基本パターン</h2>
 
-<p>IndexedDB で推奨される基本パターンは、以下のようになります:</p>
+<p>IndexedDB で推奨される基本パターンは、以下のようになります。</p>
 
 <ol>
  <li>データベースを開きます。</li>
  <li>データベース内に、オブジェクトストアを作成します。</li>
  <li>データの追加や取り出しといった、データベース操作のトランザクションを開始して、リクエストを行います。</li>
- <li>適切な DOM イベントを受け取ることにより、操作が完了するのを待ちます。</li>
- <li>結果 (リクエストオブジェクトで見つけることができます) に応じた処理を行います。</li>
+ <li>
+  <div>適切な DOM イベントを受け取ることにより、操作が完了するのを待ちます。</div>
+ </li>
+ <li>
+  <div>結果 (リクエストオブジェクトにある) に応じた処理を行います。</div>
+ </li>
 </ol>
 
 <p>これらの主要な概念を踏まえることで、より具体的な手続きを理解できます。</p>
 
-<h2 id="open" name="open">ストアを作成および構築する</h2>
+<h2 id="open">ストアを作成および構築する</h2>
 
-<h3 id="Using_an_experimental_version_of_IndexedDB" name="Using_an_experimental_version_of_IndexedDB">実験的なバージョンの IndexedDB を使用する</h3>
+<h3 id="Using_an_experimental_version_of_IndexedDB">実験的なバージョンの IndexedDB を使用する</h3>
 
-<p>まだ接頭辞を使用しているブラウザーでコードのテストを行いたい場合は、以下のコードを使用するとよいでしょう:</p>
+<p>まだ接頭辞を使用しているブラウザーでコードのテストを行いたい場合は、以下のコードを使用するとよいでしょう。</p>
 
 <pre class="brush: js">// 以下の行に、テストを行いたい実装の接頭辞を含めてください。
 window.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;
@@ -50,35 +56,35 @@ window.IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction ||
 window.IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange;
 // (Mozilla はこれらのオブジェクトに接頭辞をつけていませんので、window.mozIDB* は不要です)</pre>
 
-<p>接頭辞を使用している実装は不具合がある、未完成、あるいは古い版の仕様に従っている可能性がありますので注意してください。よって、これらを製品版のコードで使用することは推奨しません。サポートしているものとして失敗するより、未サポートとする方が好ましいでしょう:</p>
+<p>接頭辞を使用している実装は不具合がある、未完成、あるいは古い版の仕様に従っている可能性がありますので注意してください。よって、これらを製品版のコードで使用することは推奨しません。対応しているものとして失敗するより、未対応とする方が好ましいでしょう。</p>
 
 <pre class="brush: js">if (!window.indexedDB) {
-    window.alert("このブラウザーは安定版の IndexedDB をサポートしていません。IndexedDB の機能は利用できません。");
+    window.console.log("このブラウザーは安定版の IndexedDB を対応していません。IndexedDB の機能は利用できません。");
 }
 </pre>
 
-<h3 id="Opening_a_database" name="Opening_a_database">データベースを開く</h3>
+<h3 id="Opening_a_database">データベースを開く</h3>
 
-<p>プロセス全体は以下のようにして始めます:</p>
+<p>プロセス全体は以下のようにして始めます。</p>
 
 <pre class="brush: js">// データベースを開く
 var request = window.indexedDB.open("MyTestDatabase", 3);
 </pre>
 
-<p>わかりますか? データベースを開くことも他の操作と同様であり、"リクエスト" が必要です。</p>
+<p>わかりますか? データベースを開くことも他の操作と同様であり、「リクエスト」が必要です。</p>
 
-<p>データベースを開くリクエストは、すぐにはデータベースを開いたりトランザクションを開始したりはしません。<code>open()</code> 関数を呼び出すと、結果 (成功) またはイベントとして扱うエラー値を伴う <a href="/ja/docs/Web/API/IDBOpenDBRequest" title="IndexedDB/IDBOpenDBRequest"><code>IDBOpenDBRequest</code></a> オブジェクトを返します。IndexedDB のほとんどの他の非同期関数も同様であり、結果またはエラーを伴う <a href="/ja/docs/Web/API/IDBRequest" title="IndexedDB/IDBRequest"><code>IDBRequest</code></a> オブジェクトを返します。open 関数の結果は <code><a href="/ja/docs/Web/API/IDBDatabase" title="IndexedDB/IDBDatabase">IDBDatabase</a></code> のインスタンスです。</p>
+<p>データベースを開くリクエストは、すぐにはデータベースを開いたりトランザクションを開始したりはしません。<code>open()</code> 関数を呼び出すと、結果 (成功) またはイベントとして扱うエラー値を伴う <a href="/ja/docs/Web/API/IDBOpenDBRequest"><code>IDBOpenDBRequest</code></a> オブジェクトを返します。IndexedDB のほとんどの他の非同期関数も同様であり、結果またはエラーを伴う <a href="/ja/docs/Web/API/IDBRequest"><code>IDBRequest</code></a> オブジェクトを返します。open 関数の結果は <code><a href="/ja/docs/Web/API/IDBDatabase">IDBDatabase</a></code> のインスタンスです。</p>
 
-<p>open メソッドの第 2 引数は、データベースのバージョンです。データベースのバージョンは、データベースのスキーマ、すなわちデータベース内のオブジェクトストアとその構造を決定します。データベースが存在しない場合に <code>open</code> 操作でデータベースが作成されると、<code>onupgradeneeded</code> イベントが発生して、そのイベントハンドラでデータベースのスキーマを作成できます。データベースが存在する場合に従来より高いバージョン番号を指定すると、すぐに <code>onupgradeneeded</code> イベントが発生して、そのイベントハンドラで更新されたスキーマを提供できます。詳しくは、後ほど<a href="#Updating_the_version_of_the_database">データベースのバージョンを更新する</a>で説明します。また、{{domxref("IDBFactory.open")}} のリファレンスページもご覧ください。</p>
+<p>open メソッドの第 2 引数は、データベースのバージョンです。データベースのバージョンは、データベースのスキーマ、すなわちデータベース内のオブジェクトストアとその構造を決定します。データベースが存在しない場合に <code>open</code> 操作でデータベースが作成されると、<code>onupgradeneeded</code> イベントが発生し、そのイベントハンドラーでデータベースのスキーマを作成することができます。データベースが存在する場合に従来より高いバージョン番号を指定すると、すぐに <code>onupgradeneeded</code> イベントが発生して、そのイベントハンドラーで更新されたスキーマを提供することができます。詳しくは、後ほど<a href="#updating_the_version_of_the_database">データベースのバージョンの更新</a>で説明します。また、{{domxref("IDBFactory.open")}} のリファレンスページもご覧ください。</p>
 
 <div class="warning">
-<p><strong>重要</strong>: バージョン番号は <code>unsigned long long</code> 型の数値であり、とても大きい整数にすることができます。また浮動小数点数値は使用できず、使用した場合は <code>upgradeneeded</code> イベントが発生せず、もっとも近い小さな数値に変換されてトランザクションが始まるでしょう。よって、例えばバージョン番号として 2.4 を使用しないでください:<br>
+<p><strong>重要</strong>: バージョン番号は <code>unsigned long long</code> 型の数値であり、とても大きい整数にすることができます。また浮動小数点数値は使用できず、使用した場合は <code>upgradeneeded</code> イベントが発生せず、もっとも近い小さな数値に変換されてトランザクションが始まるでしょう。よって、例えばバージョン番号として 2.4 を使用しないでください。<br>
  <code>var request = indexedDB.open("MyTestDatabase", 2.4); // 行ってはいけません。バージョンは 2 に丸められます</code></p>
 </div>
 
-<h4 id="Generating_handlers" name="Generating_handlers">ハンドラを生成する</h4>
+<h4 id="Generating_handlers">ハンドラーの生成</h4>
 
-<p>ほぼすべてのリクエスト生成に合わせて始めに行いたいことは、成功およびエラーのハンドラを生成することでしょう:</p>
+<p>ほぼすべてのリクエスト生成に合わせて始めに行いたいことは、成功およびエラーのハンドラーを生成することでしょう。</p>
 
 <pre class="brush: js">request.onerror = function(event) {
   // request.errorCode に対して行うこと!
@@ -89,38 +95,38 @@ request.onsuccess = function(event) {
 
 <p>2 つの関数 <code>onsuccess()</code> と <code>onerror()</code> のどちらが呼び出されるのでしょう? すべてが成功すると成功イベント (すなわち <code>type</code> プロパティが <code>"success"</code> である DOM イベント) が、<code>request</code> を <code>target</code> として発生します。イベントが発生すると <code>request</code> の <code>onsuccess()</code> 関数が、success イベントを引数として呼び出されます。一方、何らかの問題がある場合はエラーイベント (すなわち <code>type</code> プロパティが <code>"error"</code> である DOM イベント) が <code>request</code> で発生します。これは、エラーイベントを引数として <code>onerror()</code> 関数を呼び出します。</p>
 
-<p>IndexedDB API は必要なエラー処理を最小限にするよう設計されていますので、多くのエラーイベントを見ることはないでしょう (少なくとも、API に慣れていなければ!)。しかしデータベースを開く場合は、エラーイベントが発生する一般的な状況があります。もっとも多いであろう問題は、データベースを作成する許可をユーザーが ウェブアプリに与えなかったことです。IndexedDB の主要な設計目標のひとつが、オフラインで使用するために大量のデータを保存できるようにすることです。(各ブラウザーでどれだけの量のストレージを持てるかについては、<a href="/ja/docs/Web/API/IndexedDB_API/Browser_storage_limits_and_eviction_criteria#Storage_limits" title="IndexedDB#Storage_limits">ストレージの制限</a>をご覧ください)</p>
+<p>IndexedDB API は必要なエラー処理を最小限にするよう設計されていますので、多くのエラーイベントを見ることはないでしょう (少なくとも、API に慣れていなければ)。しかしデータベースを開く場合は、エラーイベントが発生する一般的な状況があります。もっとも多いであろう問題は、データベースを作成する許可をユーザーがウェブアプリに与えなかったことです。IndexedDB の主要な設計目標のひとつが、オフラインで使用するために大量のデータを保存できるようにすることです。(各ブラウザーでどれだけの量のストレージを持てるかについては、<a href="/ja/docs/Web/API/IndexedDB_API/Browser_storage_limits_and_eviction_criteria#storage_limits" title="IndexedDB#Storage_limits">ストレージの制限</a>をご覧ください)</p>
 
-<p>広告ネットワークやコンピュータを汚染させる悪意のある Web サイトをブラウザーが許可したくないことは明らかですので、ブラウザーは ウェブアプリが初めてストレージ用に IndexedDB を開こうとしたときに、ユーザーへプロンプトを表示します。ユーザーはアクセスを許可または拒否できます。またブラウザーのプライバシーモードでの IndexedDB ストレージは、匿名のセッションを閉じるまでの間だけメモリ上に存在します (Firefox のプライベートブラウジングモードや Chrome のシークレットモードのことですが、2015 年 11 月現在の Firefox ではこれが<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=781982">未実装です</a>ので、Firefox のプライベートブラウジングでは IndexedDB をまったく使用できません)。</p>
+<p>広告ネットワークやコンピューターを汚染させる悪意のあるウェブサイトをブラウザーが許可したくないことは明らかですので、ブラウザーは ウェブアプリが初めてストレージ用に IndexedDB を開こうとしたときに、ユーザーへプロンプトを表示します。ユーザーはアクセスを許可または拒否できます。またブラウザーのプライバシーモードでの IndexedDB ストレージは、匿名のセッションを閉じるまでの間だけメモリー上に存在します (Firefox のプライベートブラウジングモードや Chrome のシークレットモードのことですが、2021 年 5 月現在の Firefox ではこれが<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=781982">未実装です</a>ので、Firefox のプライベートブラウジングでは IndexedDB をまったく使用できません)。</p>
 
-<p>ユーザーがデータベース作成の要求を許可して、成功コールバックを実行する成功イベントを受け取ったと想定します。次は何を行うのでしょうか? 以下のリクエストは <code>indexedDB.open()</code> の呼び出しを伴って生成されており、<code>request.result</code> は <code>IDBDatabase</code> のインスタンスですので、以降のためにこれを保存したいことは確実です。よって、コードは以下のようになるでしょう:</p>
+<p>ユーザーがデータベース作成の要求を許可して、成功コールバックを実行する成功イベントを受け取ったと想定します。次は何を行うのでしょうか? 以下のリクエストは <code>indexedDB.open()</code> の呼び出しを伴って生成されており、<code>request.result</code> は <code>IDBDatabase</code> のインスタンスですので、以降のためにこれを保存したいことは確実です。よって、コードは以下のようになるでしょう。</p>
 
 <pre class="brush: js">var db;
 var request = indexedDB.open("MyTestDatabase");
 request.onerror = function(event) {
-  alert("なぜ私の ウェブアプリで IndexedDB を使わせてくれないのですか?!");
+  console.log("なぜ私の ウェブアプリで IndexedDB を使わせてくれないのですか?!");
 };
 request.onsuccess = function(event) {
   db = event.target.result;
 };
 </pre>
 
-<h4 id="Handling_Errors" name="Handling_Errors">エラーを処理する</h4>
+<h4 id="Handling_Errors">エラーを処理する</h4>
 
-<p>前述のとおり、エラーイベントはバブリングします。エラーイベントはエラーを発生させたリクエストをターゲットにして、さらにトランザクションや最終的にデータベースオブジェクトへバブリングします。すべてのリクエストにエラーハンドラを追加することを避けたい場合は、代わりに以下のように、ひとつのエラーハンドラをデータベースオブジェクトに追加することができます:</p>
+<p>前述のとおり、エラーイベントはバブリングします。エラーイベントはエラーを発生させたリクエストをターゲットにして、さらにトランザクションや最終的にデータベースオブジェクトへバブリングします。すべてのリクエストにエラーハンドラーを追加することを避けたい場合は、代わりに以下のように、ひとつのエラーハンドラーをデータベースオブジェクトに追加することができます。</p>
 
 <pre class="brush: js">db.onerror = function(event) {
   // このデータベースのリクエストに対するすべてのエラー用の
-  // 汎用エラーハンドラ!
-  alert("Database error: " + event.target.errorCode);
+  // 汎用エラーハンドラー!
+  console.log("Database error: " + event.target.errorCode);
 };
 </pre>
 
-<p>データベースを開く際によく発生するエラーのひとつが <code>VER_ERR</code> です。これはディスクに保存されているデータベースのバージョンが、開こうとしているバージョンより<em>大きい</em>ことを表します。これは、必ずエラーハンドラで処理しなければならないエラーの実例です。</p>
+<p>データベースを開く際によく発生するエラーのひとつが <code>VER_ERR</code> です。これはディスクに保存されているデータベースのバージョンが、開こうとしているバージョンより<em>大きい</em>ことを表します。これは、必ずエラーハンドラーで処理しなければならないエラーの実例です。</p>
 
 <h3 id="Creating_or_updating_the_version_of_the_database" name="Creating_or_updating_the_version_of_the_database">データベースを作成またはデータベースのバージョンを更新する</h3>
 
-<p><a name="Updating_the_version_of_the_database"></a>新しいデータベースを作成したり既存のデータベースのバージョンを更新したりする ({{anch("Opening a database","データベースを開く")}}際に、従来より大きなバージョン番号を指定する) と <code>onupgradeneeded</code> イベントが発生して、<code>request.result</code> (すなわち、以下の例の <code>db</code>) に設定した <code>onversionchange</code> イベントハンドラに <a href="/ja/docs/Web/API/IDBVersionChangeEvent">IDBVersionChangeEvent</a> オブジェクトが渡されます。<code>upgradeneeded</code> イベントのハンドラでは、このバージョンのデータベースで必要なオブジェクトストアを作成します:</p>
+<p><a name="Updating_the_version_of_the_database"></a>新しいデータベースを作成したり既存のデータベースのバージョンを更新したりする ({{anch("Opening a database","データベースを開く")}}際に、従来より大きなバージョン番号を指定する) と <code>onupgradeneeded</code> イベントが発生して、<code>request.result</code> (すなわち、以下の例の <code>db</code>) に設定した <code>onversionchange</code> イベントハンドラーに <a href="/ja/docs/Web/API/IDBVersionChangeEvent">IDBVersionChangeEvent</a> オブジェクトが渡されます。<code>upgradeneeded</code> イベントのハンドラーでは、このバージョンのデータベースで必要なオブジェクトストアを作成します。</p>
 
 <pre class="brush:js;">// このイベントは最新のブラウザーにのみ実装されています
 request.onupgradeneeded = function(event) {
@@ -135,21 +141,19 @@ request.onupgradeneeded = function(event) {
 
 <p>既存の名称を使用してオブジェクトストアを作成しようとする (あるいは、存在しない名称のオブジェクトストアを削除しようとする) と、エラーが発生します。</p>
 
-<p><code>onupgradeneeded</code> イベントから正常に抜けた場合は、データベースを開くリクエストの <code>onsuccess</code> ハンドラが実行されます。</p>
+<p><code>onupgradeneeded</code> イベントから正常に抜けた場合は、データベースを開くリクエストの <code>onsuccess</code> ハンドラーが実行されます。</p>
 
-<p>Chrome 23 以降および Opera 17 以降の Blink/Webkit は、現行バージョンの仕様をサポートします。IE10 以降も同様です。他の実装や古い実装では現行バージョンの仕様を実装しておらず、<code>indexedDB.open(name, version).onupgradeneeded</code> シグネチャが未サポートです。古い Webkit/Blink でデータベースのバージョンを更新する方法について、詳しくは <a href="/ja/docs/Web/API/IDBDatabase#setVersion()_.0A.0ADeprecated" title="IndexedDB/IDBDatabase#setVersion()_.0A.0ADeprecated">IDBDatabase のリファレンス記事</a>をご覧ください。</p>
+<h3 id="Structuring_the_database">データベースを構築する</h3>
 
-<h3 id="Structuring_the_database" name="Structuring_the_database">データベースを構築する</h3>
+<p>次に、データベースを構築します。IndexedDB はテーブルではなくオブジェクトストアを使用しており、ひとつのデータベースに複数のオブジェクトストアを含めることができます。値をオブジェクトストアへ保存するたびに、値がキーと関連付けられます。オブジェクトストアで<a href="/ja/docs/Web/API/IndexedDB_API/Basic_Terminology#gloss_keypath">キーパス</a>を使用するか<a href="/ja/docs/Web/API/IndexedDB_API/Basic_Terminology#gloss_keygenerator">キージェネレーター</a>を使用するかに応じて、キーを供給する方法がいくつか存在します。</p>
 
-<p>次に、データベースを構築します。IndexedDB はテーブルではなくオブジェクトストアを使用しており、ひとつのデータベースに複数のオブジェクトストアを含めることができます。値をオブジェクトストアへ保存するたびに、値がキーと関連付けられます。オブジェクトストアで<a href="/ja/docs/Web/API/IndexedDB_API/Basic_Concepts_Behind_IndexedDB#gloss_keypath" title="IndexedDB#gloss_key_path">キーパス</a>を使用するか<a href="/ja/docs/Web/API/IndexedDB_API/Basic_Concepts_Behind_IndexedDB#gloss_keygenerator" title="IndexedDB#gloss key generator">キージェネレータ</a>を使用するかに応じて、キーを供給する方法がいくつか存在します。</p>
-
-<p>以下の表で、キーを供給するさまざまな方法を示します:</p>
+<p>以下の表で、キーを供給するさまざまな方法を示します。</p>
 
 <table class="standard-table">
  <thead>
   <tr>
    <th scope="col">キーパス (<code>keyPath</code>)</th>
-   <th scope="col">キージェネレータ (<code>autoIncrement</code>)</th>
+   <th scope="col">キージェネレーター (<code>autoIncrement</code>)</th>
    <th scope="col">説明</th>
   </tr>
  </thead>
@@ -181,7 +185,7 @@ request.onupgradeneeded = function(event) {
 
 <p>さらにインデックスには、保存されたデータに単純な制限を強制する機能があります。インデックスを作成する際に unique フラグを設定すると、インデックスのキーパスで同じ値を持つオブジェクトが複数保存されないことを、インデックスが保証します。よって例えば人々の集団の情報を保持するオブジェクトストアがある場合に、同じメールアドレスを持つ人が 2 人存在しないことを保証したい場合は、これを強制するために unique フラグを設定したインデックスを使用するとよいでしょう。</p>
 
-<p>これには混乱するかもしれませんので、シンプルな例で概念を説明するべきでしょう。始めに、例で使用する顧客データをいくつか定義します:</p>
+<p>これには混乱するかもしれませんので、シンプルな例で概念を説明するべきでしょう。始めに、例で使用する顧客データをいくつか定義します。</p>
 
 <pre class="brush: js">// 顧客データがどのようなものかを示します
 const customerData = [
@@ -192,7 +196,7 @@ const customerData = [
 
 <p>もちろん、誰かの社会保障番号を顧客テーブルの主キーとして使用するべきではないですし (社会保障番号を持っていない人もいます)、年齢の代わりに誕生日を保管することもできますが、これらの不適切な選択は利便性のために無視して先へ進みましょう。</p>
 
-<p>次に、データを保存する IndexedDB を作成するところを見てみましょう:</p>
+<p>次に、データを保存する IndexedDB を作成するところを見てみましょう。</p>
 
 <pre class="brush: js">const dbName = "the_name";
 
@@ -222,28 +226,28 @@ request.onupgradeneeded = function(event) {
   objectStore.transaction.oncomplete = function(event) {
     // 新たに作成した objectStore に値を保存します。
     var customerObjectStore = db.transaction("customers", "readwrite").objectStore("customers");
-    for (var i in customerData) {
-      customerObjectStore.add(customerData[i]);
-    }
+    customerData.forEach(function(customer) {
+      customerObjectStore.add(customer);
+    });
   };
 };
 </pre>
 
 <p>先に示したように、<code>onupgradeneeded</code> はデータベースの構造を変えることができる唯一の場所です。ここではオブジェクトストアの作成および削除や、インデックスの構築および削除が可能です。</p>
 
-<p>オブジェクトストアは <code>createObjectStore()</code> を 1 回呼び出して作成します。このメソッドの引数は、ストアの名前とパラメータオブジェクトです。パラメータオブジェクトは省略可能ですが、重要なオプションプロパティを定義したり、作成したいオブジェクトストアの型を改良することができますので、とても重要です。この例では "customers" という名前のオブジェクトストアを要求して、<code>keyPath</code> を定義しています。<code>keyPath</code> は、ストア内で個々のオブジェクトを一意にするプロパティです。この例では、社会保障番号が一意であることが保証されていますので "ssn" にしています。"ssn" は、<code>objectStore</code> に保存するすべてのオブジェクトに与えなければなりません。</p>
+<p>オブジェクトストアは <code>createObjectStore()</code> を 1 回呼び出して作成します。このメソッドの引数は、ストアの名前と引数オブジェクトです。引数オブジェクトは省略可能ですが、重要なオプションプロパティを定義したり、作成したいオブジェクトストアの型を改良することができますので、とても重要です。この例では "customers" という名前のオブジェクトストアを要求して、<code>keyPath</code> を定義しています。<code>keyPath</code> は、ストア内で個々のオブジェクトを一意にするプロパティです。この例では、社会保障番号が一意であることが保証されていますので "ssn" にしています。"ssn" は、<code>objectStore</code> に保存するすべてのオブジェクトに与えなければなりません。</p>
 
 <p>また、保存されたオブジェクトの <code>name</code> プロパティを参照する、"name" という名前のインデックスも要求しています。<code>createObjectStore()</code> と同様に <code>createIndex()</code> も、作成したいインデックスの型を改良するための省略可能な引数 <code>options</code> オブジェクトを指定できます。<code>name</code> プロパティを持たないオブジェクトを追加することはできますが、そのオブジェクトは "name" インデックス内に現れません。</p>
 
-<p>以上でオブジェクトストアに保存された顧客オブジェクトを、<code>ssn</code> を使用して直接、またはインデックスを使用して名前をもとにして、取り出すことができます。この仕組みについて詳しくは、<a href="#Using_an_index" title="Using IndexedDB#Using an index">インデックスを使用する</a> をご覧ください。</p>
+<p>以上でオブジェクトストアに保存された顧客オブジェクトを、<code>ssn</code> を使用して直接、またはインデックスを使用して名前をもとにして、取り出すことができます。この仕組みについて詳しくは、<a href="#using_an_index">インデックスを使用する</a> をご覧ください。</p>
 
-<h3 id="Using_a_key_generator" name="Using_a_key_generator">キージェネレータを使用する</h3>
+<h3 id="Using_a_key_generator">キージェネレーターを使用する</h3>
 
-<p>オブジェクトストアを作成するときに <code>autoIncrement</code> フラグを設定すると、そのオブジェクトストアでキージェネレータを使用できます。デフォルトで、このフラグは設定されません。</p>
+<p>オブジェクトストアを作成するときに <code>autoIncrement</code> フラグを設定すると、そのオブジェクトストアでキージェネレーターを使用できます。デフォルトで、このフラグは設定されません。</p>
 
-<p>キージェネレータを使用すると、オブジェクトストアに値を追加するのに応じて自動的にキーが生成されます。オブジェクトストアでキージェネレータを初めて作成した時点では、キージェネレータの値が常に 1 になります。基本的に、新たに自動生成されるキーは、前のキーから 1 増加した値になります。データベースのトランザクションが中止されるなど、データベースの操作が取り消された場合を除き、キージェネレータの現在の値が減少することはありません。従って、オブジェクトストアからレコードを削除したりすべてのレコードをクリアしたりしても、オブジェクトストアのキージェネレータには影響がありません。</p>
+<p>キージェネレーターを使用すると、オブジェクトストアに値を追加するのに応じて自動的にキーが生成されます。オブジェクトストアでキージェネレーターを初めて作成した時点では、キージェネレーターの値が常に 1 になります。基本的に、新たに自動生成されるキーは、前のキーから 1 増加した値になります。データベースのトランザクションが中止されるなど、データベースの操作が取り消された場合を除き、キージェネレーターの現在の値が減少することはありません。従って、オブジェクトストアからレコードを削除したりすべてのレコードをクリアしたりしても、オブジェクトストアのキージェネレーターには影響がありません。</p>
 
-<p>以下のように、キージェネレータを持つ別のオブジェクトストアを作成できます:</p>
+<p>以下のように、キージェネレーターを持つ別のオブジェクトストアを作成できます。</p>
 
 <pre class="brush: js">// indexedDB を開きます。
 var request = indexedDB.open(dbName, 3);
@@ -255,7 +259,7 @@ request.onupgradeneeded = function (event) {
     // autoIncrement フラグに true を設定した、"names" という名前のオブジェクトストアを作成します。
     var objStore = db.createObjectStore("names", { autoIncrement : true });
 
-    // "names" オブジェクトストアはキージェネレータを持っていますので、値 name のキーは自動的に生成されます。
+    // "names" オブジェクトストアはキージェネレーターを持っていますので、値 name のキーは自動的に生成されます。
     // 追加したレコードは以下のようになります:
     // キー : 1 =&gt; 値 : "Bill"
     // キー : 2 =&gt; 値 : "Donna"
@@ -264,34 +268,34 @@ request.onupgradeneeded = function (event) {
     }
 };</pre>
 
-<p>キージェネレータについて詳しくは、<a href="http://www.w3.org/TR/IndexedDB/#key-generator-concept">"W3C Key Generators"</a> をご覧ください。</p>
+<p>キージェネレーターについて詳しくは、<a href="https://www.w3.org/TR/IndexedDB/#key-generator-concept">"W3C Key Generators"</a> をご覧ください。</p>
 
-<h2 id="Adding_retrieving_and_removing_data" name="Adding_retrieving_and_removing_data">データを追加する、読み出す、削除する</h2>
+<h2 id="Adding_retrieving_and_removing_data">データの追加、読み取り、削除</h2>
 
 <p>新しいデータベースで何かを行えるようにする前に、トランザクションを開始しなければなりません。トランザクションはデータベースオブジェクトから生じており、トランザクションの対象にしたいオブジェクトストアを指定しなければなりません。トランザクションの内部では、データを保持しているオブジェクトストアへのアクセスや、リクエストの実行が可能です。次に、データベースに変更処理を行うのか、あるいはデータベースから読み出すだけかを決めなければなりません。トランザクションは <code>readonly</code>、<code>readwrite</code>、<code>versionchange</code> の 3 つのモードを使用できます。</p>
 
-<p>データベースの "スキーマ" や構造を変更する (オブジェクトストアやインデックスを作成または削除する) には、トランザクションを <code>versionchange</code> モードにしなければなりません。このトランザクションは、<code>version</code> を指定して {{domxref("IDBFactory.open")}} メソッドを呼び出すことによって開きます。(最新の仕様を実装していない WebKit ブラウザーは {{domxref("IDBFactory.open")}} メソッドの引数が、データベースの <code>name</code> の 1 つしかありません。よって、<code>versionchange</code> トランザクションを開始するには {{domxref("IDBVersionChangeRequest.setVersion")}} を呼び出さなければなりません)</p>
+<p>データベースの「スキーマ」や構造を変更する (オブジェクトストアやインデックスを作成または削除する) には、トランザクションを <code>versionchange</code> モードにしなければなりません。このトランザクションは、<code>version</code> を指定して {{domxref("IDBFactory.open")}} メソッドを呼び出すことによって開きます。</p>
 
 <p>既存のオブジェクトストアからレコードを読み出すには、トランザクションで <code>readonly</code> モードまたは <code>readwrite</code> モードを使用できます。既存のオブジェクトストアに変更処理を行うには、トランザクションを <code>readwrite</code> モードにしなければなりません。このようなトランザクションは {{domxref("IDBDatabase.transaction")}} で開きます。このメソッドの引数は 2 つあり、<code>storeNames</code> (アクセスしたいオブジェクトストアの配列で定義されるスコープ) とトランザクションの <code>mode</code> (<code>readonly</code> または <code>readwrite</code>) です。またこのメソッドは、{{domxref("IDBTransaction.objectStore")}} メソッドを持つトランザクションオブジェクトを返します。<code>objectStore</code> メソッドは、オブジェクトストアにアクセスするために使用できます。デフォルトでは、モードを指定しなければ <code>readonly</code> モードでトランザクションを開きます。</p>
 
 <div class="note">
-<p><strong>注記</strong>: Firefox 40 で、IndexedDB トランザクションはパフォーマンスを向上させるために、永続性の保証を緩和しました ({{Bug("1112702")}} を参照)。以前は <code>readwrite</code> モードのトランザクションで、すべてのデータをディスク上に反映したことが保証された場合に限り {{domxref("IDBTransaction.oncomplete")}} 発生しました。Firefox 40 以降では OS がデータの書き込みを指示した時点で <code>complete</code> が発生しており、実際にはデータがディスク上に反映されていない可能性があります。これにより <code>complete</code> イベントをより早く発生させられますが、データをディスク上に反映する前に OS のクラッシュや電源断が発生するとトランザクション全体を失う危険性が若干あります。このような破壊的な事象はまれですので、ほとんどの利用者は心配する必要がないでしょう。何らかの理由 (例えば、後で再計算できない重要なデータを保存する) で永続性を保証しなければならない場合は、実験的 (非標準) な <code>readwriteflush</code> モード ({{domxref("IDBDatabase.transaction")}} を参照) を使用してトランザクションを生成すると、<code>complete</code> イベントを発生させる前にディスクへの反映を強制させることができます。</p>
+<p><strong>メモ</strong>: Firefox 40 で、IndexedDB トランザクションはパフォーマンスを向上させるために、永続性の保証を緩和しました ({{Bug("1112702")}} を参照)。以前は <code>readwrite</code> モードのトランザクションで、すべてのデータをディスク上に反映したことが保証された場合に限り {{domxref("IDBTransaction.oncomplete")}} 発生しました。Firefox 40 以降では OS がデータの書き込みを指示した時点で <code>complete</code> が発生しており、実際にはデータがディスク上に反映されていない可能性があります。これにより <code>complete</code> イベントをより早く発生させられますが、データをディスク上に反映する前に OS のクラッシュや電源断が発生するとトランザクション全体を失う危険性が若干あります。このような破壊的な事象はまれですので、ほとんどの利用者は心配する必要がないでしょう。何らかの理由 (例えば、後で再計算できない重要なデータを保存する) で永続性を保証しなければならない場合は、実験的 (非標準) な <code>readwriteflush</code> モード ({{domxref("IDBDatabase.transaction")}} を参照) を使用してトランザクションを生成すると、<code>complete</code> イベントを発生させる前にディスクへの反映を強制させることができます。</p>
 </div>
 
-<p>トランザクションで適切なスコープおよびモードを使用すると、データアクセスを高速化できます。ヒントを 2 つ紹介します:</p>
+<p>トランザクションで適切なスコープおよびモードを使用すると、データアクセスを高速化できます。ヒントを 2 つ紹介します。</p>
 
 <ul>
  <li>スコープを定義するときは、必要なオブジェクトストアのみ指定します。これにより、同時にスコープが重なり合うことなく、複数のトランザクションを実行できます。</li>
- <li><code>readwrite</code> トランザクションモードは、必要な場合に限り指定します。<code>readonly</code> トランザクションはスコープが重なっても複数同時に実行できますが、<code>readwrite</code> トランザクションはオブジェクトストアに対して 1 個しか実行できません。詳しくは、<a href="/ja/docs/Web/API/IndexedDB_API/Basic_Concepts_Behind_IndexedDB">基本的な概念</a>の記事で <dfn><a href="/ja/docs/Web/API/IndexedDB_API/Basic_Concepts_Behind_IndexedDB#Database">トランザクション</a></dfn>の定義をご覧ください。</li>
+ <li><code>readwrite</code> トランザクションモードは、必要な場合に限り指定します。<code>readonly</code> トランザクションはスコープが重なっても複数同時に実行できますが、<code>readwrite</code> トランザクションはオブジェクトストアに対して 1 個しか実行できません。詳しくは、<a href="/ja/docs/Web/API/IndexedDB_API/Basic_Terminology">IndexedDB の主な特徴と基本用語</a>の記事で <a href="/ja/docs/Web/API/IndexedDB_API/Basic_Terminology#gloss_transaction">トランザクション</a>の定義をご覧ください。</li>
 </ul>
 
-<h3 id="Adding_data_to_the_database" name="Adding_data_to_the_database">データベースにデータを追加する</h3>
+<h3 id="Adding_data_to_the_database">データベースにデータを追加する</h3>
 
-<p>データベースを作成したら、書き込みを行いたいと考えるでしょう。これは以下のようにします:</p>
+<p>データベースを作成したら、書き込みを行いたいと考えるでしょう。これは以下のようにします。</p>
 
 <pre class="brush:js;">var transaction = db.transaction(["customers"], "readwrite");
-// 注記: 古い実験的な実装では、"readwrite" の代わりに非推奨の定数 IDBTransaction.READ_WRITE を使用します。
-// そのような実装をサポートしたい場合は、以下のように記述します:
+// メモ: 古い実験的な実装では、"readwrite" の代わりに非推奨の定数 IDBTransaction.READ_WRITE を使用します。
+// そのような実装をサポートしたい場合は、以下のように記述します。
 // var transaction = db.transaction(["customers"], IDBTransaction.READ_WRITE);</pre>
 
 <p><code>transaction()</code> 関数は引数が 2 つあり (ひとつは省略可能)、トランザクションオブジェクトを返します。第 1 引数は、トランザクションの対象にするオブジェクトストアのリストです。トランザクションですべてのオブジェクトを対象にしたい場合は空の配列を渡すことができますが、仕様書では空の配列に対して InvalidAccessError を生成すべきとされていますので、行わないようにしてください。第 2 引数に何も指定しなければ、読み取り専用のトランザクションになります。書き込みを行いたい場合は、<code>"readwrite"</code> フラグを渡さなければなりません。</p>
@@ -304,7 +308,7 @@ request.onupgradeneeded = function (event) {
 
 <pre class="brush: js">// すべてのデータがデータベースに追加されたときに行う処理
 transaction.oncomplete = function(event) {
-  alert("All done!");
+  console.log("All done!");
 };
 
 transaction.onerror = function(event) {
@@ -321,9 +325,9 @@ for (var i in customerData) {
 
 <p><code>add()</code> を呼び出して生成されたリクエストの <code>result</code> は、追加された値のキーです。よってこのケースでは、オブジェクトストアでキーパスとして <code>ssn</code> プロパティを使用していますので、追加されたオブジェクトの <code>ssn</code> プロパティと等しくなります。<code>add()</code> 関数では、データベース内に同一のキーを持つオブジェクトが存在しないことを要求しますので注意してください。既存の項目を変更しようとする場合や、既存の項目があるかを配慮しない場合は、{{anch("Updating an entry in the database", "データベース内の項目を更新する")}} の章で説明している <code>put()</code> 関数を使用できます。</p>
 
-<h3 id="Removing_data_from_the_database" name="Removing_data_from_the_database">データベースからデータを削除する</h3>
+<h3 id="Removing_data_from_the_database">データベースからのデータの削除</h3>
 
-<p>データの削除もよく似ています:</p>
+<p>データの削除もよく似ています。</p>
 
 <pre class="brush: js">var request = db.transaction(["customers"], "readwrite")
                 .objectStore("customers")
@@ -332,9 +336,9 @@ request.onsuccess = function(event) {
   // 削除完了!
 };</pre>
 
-<h3 id="Getting_data_from_the_database" name="Getting_data_from_the_database">データベースからデータを取得する</h3>
+<h3 id="Getting_data_from_the_database">データベースからのデータの取得</h3>
 
-<p>データベースは情報を持っていますので、いくつかの方法でデータを読み出すことができます。まずは、単純に <code>get()</code> を使用します。以下のように、値を読み出すためにキーを提供しなければなりません:</p>
+<p>データベースは情報を持っていますので、いくつかの方法でデータを読み出すことができます。まずは、単純に <code>get()</code> を使用します。以下のように、値を読み出すためにキーを提供しなければなりません。</p>
 
 <pre class="brush: js">var transaction = db.transaction(["customers"]);
 var objectStore = transaction.objectStore("customers");
@@ -344,27 +348,27 @@ request.onerror = function(event) {
 };
 request.onsuccess = function(event) {
   // request.result に対して行う処理!
-  alert("Name for SSN 444-44-4444 is " + request.result.name);
+  console.log("Name for SSN 444-44-4444 is " + request.result.name);
 };</pre>
 
-<p>"単純に" 読み出すにも多くのコードがあります。データベースレベルでエラー処理を行うとすれば、コードを少々短縮できることを以下に示します:</p>
+<p>"単純に" 読み出すにも多くのコードがあります。データベースレベルでエラー処理を行うとすれば、コードを少々短縮できることを以下に示します。</p>
 
 <pre class="brush: js">db.transaction("customers").objectStore("customers").get("444-44-4444").onsuccess = function(event) {
-  alert("Name for SSN 444-44-4444 is " + event.target.result.name);
+  console.log("Name for SSN 444-44-4444 is " + event.target.result.name);
 };</pre>
 
 <p>どのように動作するかわかりますか? オブジェクトストアが 1 つしかありませんので、トランザクションで必要とするオブジェクトストアのリストを渡さずに、名称を文字列で渡しています。また、データベースから読み出すだけですので、<code>"readwrite"</code> トランザクションは不要です。モードを指定せずに <code>transaction()</code> を呼び出すと、<code>"readonly"</code> トランザクションになります。さらに細かいことですが、実はリクエストオブジェクトを変数に保存していません。DOM イベントはターゲットとしてリクエストを持ちますので、<code>result</code> プロパティを得るためにイベントを使用できます。</p>
 
-<p>トランザクションでスコープやモードを制限することにより、データアクセスを高速化できることに留意してください。ヒントを 2 つ紹介します:</p>
+<p>トランザクションでスコープやモードを制限することにより、データアクセスを高速化できることに留意してください。ヒントを 2 つ紹介します。</p>
 
 <ul>
  <li><a href="#scope">スコープ</a>を定義するときは、必要なオブジェクトストアのみ指定します。これにより、同時にスコープが重なり合うことなく、複数のトランザクションを実行できます。</li>
- <li>readwrite トランザクションモードは、必要な場合に限り指定します。readonly トランザクションはスコープが重なっても複数同時に実行できますが、readwrite トランザクションはオブジェクトストアに対して 1 個しか実行できません。詳しくは、<a href="/ja/docs/Web/API/IndexedDB_API/Basic_Concepts_Behind_IndexedDB#gloss_transaction">基本的な概念の記事でトランザクション</a>の定義をご覧ください。</li>
+ <li>readwrite トランザクションモードは、必要な場合に限り指定します。readonly トランザクションはスコープが重なっても複数同時に実行できますが、readwrite トランザクションはオブジェクトストアに対して 1 個しか実行できません。詳しくは、<a href="/ja/docs/Web/API/IndexedDB_API/Basic_Terminology#gloss_transaction">基本的な概念の記事でトランザクション</a>の定義をご覧ください。</li>
 </ul>
 
-<h3 id="Updating_an_entry_in_the_database" name="Updating_an_entry_in_the_database">データベース内の項目を更新する</h3>
+<h3 id="Updating_an_entry_in_the_database">データベース内の項目の更新</h3>
 
-<p>読み出したデータを更新して IndexedDB に書き戻す方法は、とてもシンプルです。先ほどのサンプルを多少更新しましょう:</p>
+<p>読み出したデータを更新して IndexedDB に書き戻す方法は、とてもシンプルです。先ほどのサンプルを多少更新しましょう。</p>
 
 <pre class="brush: js">var objectStore = db.transaction(["customers"], "readwrite").objectStore("customers");
 var request = objectStore.get("444-44-4444");
@@ -391,29 +395,29 @@ request.onsuccess = function(event) {
 <p>ここでは <code>objectStore</code> を作成して、ssn の値 (<code>444-44-4444</code>) で特定される顧客レコードの取り出しを要求しています。リクエストの結果を変数 (<code>data</code>) に代入して、そのオブジェクトの <code>age</code> プロパティを更新します。そして、顧客レコードを <code>objectStore</code> に書き戻して前の値を上書きする、第 2 のリクエスト (<code>requestUpdate</code>) を作成します。</p>
 
 <div class="note">
-<p><strong>注記</strong>: このケースではデータベースから読み出すだけでなく書き込みも行いたいので、<code>readwrite</code> トランザクションを指定しました。</p>
+<p><strong>メモ</strong>: このケースではデータベースから読み出すだけでなく書き込みも行いたいので、<code>readwrite</code> トランザクションを指定しました。</p>
 </div>
 
-<h3 id="Using_a_cursor" name="Using_a_cursor">カーソルを使用する</h3>
+<h3 id="Using_a_cursor">カーソルの使用</h3>
 
-<p><code>get()</code> を使用する際は、読み出したいキーがどれかを知っていることが必要です。オブジェクトストア内のすべての値を渡り歩きたい場合は、カーソルを使用できます。以下のようなものです:</p>
+<p><code>get()</code> を使用する際は、読み出したいキーがどれかを知っていることが必要です。オブジェクトストア内のすべての値を渡り歩きたい場合は、カーソルを使用できます。以下のようなものです。</p>
 
 <pre class="brush: js">var objectStore = db.transaction("customers").objectStore("customers");
 
 objectStore.openCursor().onsuccess = function(event) {
   var cursor = event.target.result;
   if (cursor) {
-    alert("Name for SSN " + cursor.key + " is " + cursor.value.name);
+    console.log("Name for SSN " + cursor.key + " is " + cursor.value.name);
     cursor.continue();
   }
   else {
-    alert("No more entries!");
+    console.log("No more entries!");
   }
 };</pre>
 
-<p><code>openCursor()</code> 関数は、引数がいくつかあります。第一に、すぐに取得するキーレンジオブジェクトを使用して、読み出すアイテムの範囲を制限できます。第二に、反復処理を行いたい方向を指定できます。上記の例では、すべてのオブジェクトを昇順方向に反復します。カーソルの成功イベントのコールバックは、やや特殊です。カーソルオブジェクト自体は、リクエストの <code>result</code> です (上記の例ではショートハンドを使用しており、<code>event.target.result</code> になります)。そして実際のキーと値は、カーソルオブジェクトの <code>key</code> プロパティと <code>value</code> プロパティで見つかります。進み続けたい場合は、カーソルで <code>continue()</code> を呼び出さなければなりません。データの終端に達した (または、<code>openCursor()</code> リクエストにマッチする項目が存在しない) 場合は成功のコールバックを受け取りますが、<code>result</code> プロパティが <code>undefined</code> になります。</p>
+<p><code>openCursor()</code> 関数は、引数がいくつかあります。第一に、すぐに取得するキーレンジオブジェクトを使用して、読み出すアイテムの範囲を制限できます。第二に、反復処理を行いたい方向を指定できます。上記の例では、すべてのオブジェクトを昇順方向に反復します。カーソルの成功イベントのコールバックは、やや特殊です。カーソルオブジェクト自体は、リクエストの <code>result</code> です (上記の例では略記法を使用しており、<code>event.target.result</code> になります)。そして実際のキーと値は、カーソルオブジェクトの <code>key</code> プロパティと <code>value</code> プロパティで見つかります。進み続けたい場合は、カーソルで <code>continue()</code> を呼び出さなければなりません。データの終端に達した (または、<code>openCursor()</code> リクエストに一致する項目が存在しない) 場合は成功のコールバックを受け取りますが、<code>result</code> プロパティが <code>undefined</code> になります。</p>
 
-<p>カーソルをよく使用するパターンのひとつが、以下のようにオブジェクトストア内の全データを読み出して、配列に追加することです:</p>
+<p>カーソルをよく使用するパターンのひとつが、以下のようにオブジェクトストア内の全データを読み出して、配列に追加することです。</p>
 
 <pre class="brush: js">var customers = [];
 
@@ -424,40 +428,45 @@ objectStore.openCursor().onsuccess = function(event) {
     cursor.continue();
   }
   else {
-    alert("Got all customers: " + customers);
+    console.log("Got all customers: " + customers);
   }
 };</pre>
 
 <div class="note">
-<p><strong>注記</strong>: Mozilla は、このような処理を行うために <code>getAll()</code> も実装しています (および <code>getAllKeys()</code> もあり、これは現在、about:config の設定項目 <code>dom.indexedDB.experimental</code> で隠しています)。これらは IndexedDB 標準の一部ではなく、将来削除する可能性があります。これらは便利であると考えられますので、実装しました。以下のコードは、前出の例とまったく同じことを行います:</p>
+<p><strong>メモ</strong>: それ以外に、このような処理を行うために <code>getAll()</code>  (および <code>getAllKeys()</code>)。を使用することができます。以下のコードは、前出の例とまったく同じことを行います。</p>
 
 <pre class="brush: js">objectStore.getAll().onsuccess = function(event) {
-  alert("Got all customers: " + event.target.result);
+  console.log("Got all customers: " + event.target.result);
 };</pre>
 
 <p>これはオブジェクトを横着な方法で作成するため、カーソルの <code>value</code> プロパティの検索に関してパフォーマンスコストが発生します。例えば <code>getAll()</code> を使用するとき、Gecko はすべてのオブジェクトを一度に作成しなければなりません。例えばそれぞれのキーを検索することにのみ関心がある場合は、<code>getAll()</code> よりもカーソルを使用する方がとても効率的です。オブジェクトストア内の全データの配列を得ようとしている場合は、<code>getAll()</code> を使用しましょう。</p>
 </div>
 
-<h3 id="Using_an_index" name="Using_an_index">インデックスを使用する</h3>
+<h3 id="Using_an_index">インデックスの使用</h3>
 
 <p>SSN は個人を一意に識別しますので、キーとして SSN を使用して顧客データを保管することは論理的です。(プライバシーの観点でよいアイデアであるかは別の問題であり、この記事の対象外です) 一方、名前で顧客を検索しなければならない場合は、正しいものが見つかるまでデータベース内のすべての SSN に対して反復処理を行わなければなりません。この方法による検索はとても遅いため、代わりにインデックスを使用するとよいでしょう。</p>
 
-<pre class="brush: js">var index = objectStore.index("name");
+<pre class="brush: js">// 最初に、 request.onupgradeneeded の中にインデックスを生成したか確認してください。
+// objectStore.createIndex("name", "name");
+// まだであれば、 DOMException が発生します。
+
+var index = objectStore.index("name");
 
 index.get("Donna").onsuccess = function(event) {
-  alert("Donna's SSN is " + event.target.result.ssn);
-};</pre>
+  console.log("Donna's SSN is " + event.target.result.ssn);
+};
+</pre>
 
 <p>"name" カーソルは一意ではないので、<code>name</code> に <code>"Donna"</code> が設定されている項目は複数存在する可能性があります。この場合は常に、キーの値がもっとも小さいものを取得します。</p>
 
-<p>指定した <code>name</code> に該当するすべての項目にアクセスしなければならない場合は、カーソルを使用します。インデックス上で、2 種類のカーソルを開くことができます。ノーマルカーソルは、インデックスのプロパティと、オブジェクトストア内のオブジェクトを紐づけます。キーカーソルは、インデックスのプロパティと、オブジェクトストア内にオブジェクトを保存するために使用するキーを紐づけます。これらの違いを以下に示します:</p>
+<p>指定した <code>name</code> に該当するすべての項目にアクセスしなければならない場合は、カーソルを使用します。インデックス上で、2 種類のカーソルを開くことができます。ノーマルカーソルは、インデックスのプロパティと、オブジェクトストア内のオブジェクトを紐づけます。キーカーソルは、インデックスのプロパティと、オブジェクトストア内にオブジェクトを保存するために使用するキーを紐づけます。これらの違いを以下に示します。</p>
 
 <pre class="brush: js">// 顧客レコードのオブジェクト全体を得るために、ノーマルカーソルを使用します。
 index.openCursor().onsuccess = function(event) {
   var cursor = event.target.result;
   if (cursor) {
     // cursor.key は "Bill" のような名前、cursor.value はオブジェクト全体です。
-    alert("Name: " + cursor.key + ", SSN: " + cursor.value.ssn + ", email: " + cursor.value.email);
+    console.log("Name: " + cursor.key + ", SSN: " + cursor.value.ssn + ", email: " + cursor.value.email);
     cursor.continue();
   }
 };
@@ -468,40 +477,40 @@ index.openKeyCursor().onsuccess = function(event) {
   if (cursor) {
     // cursor.key は "Bill" のような名前、cursor.value は SSN です。
     // 保存されたオブジェクトの他の部分を直接取得する方法はありません。
-    alert("Name: " + cursor.key + ", SSN: " + cursor.value);
+    console.log("Name: " + cursor.key + ", SSN: " + cursor.value);
     cursor.continue();
   }
 };</pre>
 
-<h3 id="Specifying_the_range_and_direction_of_cursors" name="Specifying_the_range_and_direction_of_cursors">カーソルの範囲や方向を指定する</h3>
+<h3 id="Specifying_the_range_and_direction_of_cursors">カーソルの範囲や方向を指定する</h3>
 
-<p>カーソルで参照する値の範囲を制限したい場合は、<code>IDBKeyRange</code> オブジェクトを使用して、<code>openCursor()</code> または <code>openKeyCursor()</code> の第 1 引数として渡します。ひとつのキーのみ許可するキーレンジ、下限または上限の片方を持つキーレンジ、あるいは下限と上限の両方を持つキーレンジを作成できます。境界は "closed" (すなわち、キーレンジは指定した値を含む) または "open" (すなわち、キーレンジは指定した値を含まない) のどちらにもできます。使い方を以下に示します:</p>
+<p>カーソルで参照する値の範囲を制限したい場合は、<code>IDBKeyRange</code> オブジェクトを使用して、<code>openCursor()</code> または <code>openKeyCursor()</code> の第 1 引数として渡します。ひとつのキーのみ許可するキーレンジ、下限または上限の片方を持つキーレンジ、あるいは下限と上限の両方を持つキーレンジを作成できます。境界は "closed" (すなわち、キーレンジは指定した値を含む) または "open" (すなわち、キーレンジは指定した値を含まない) のどちらにもできます。使い方を以下に示します。</p>
 
-<pre class="brush: js">// "Donna" にのみマッチします。
+<pre class="brush: js">// "Donna" にのみ一致します。
 var singleKeyRange = IDBKeyRange.only("Donna");
 
-// "Bill" より先のすべてにマッチします。"Bill" を含みます。
+// "Bill" より先のすべてに一致します。"Bill" を含みます。
 var lowerBoundKeyRange = IDBKeyRange.lowerBound("Bill");
 
-// "Bill" より先のすべてにマッチします。ただし "Bill" は含みません。
+// "Bill" より先のすべてに一致します。ただし "Bill" は含みません。
 var lowerBoundOpenKeyRange = IDBKeyRange.lowerBound("Bill", true);
 
-// "Donna" までのすべてにマッチします。ただし "Donna" は含みません。
+// "Donna" までのすべてに一致します。ただし "Donna" は含みません。
 var upperBoundOpenKeyRange = IDBKeyRange.upperBound("Donna", true);
 
-// "Bill" から "Donna" までにマッチします。ただし "Donna" は含みません。
+// "Bill" から "Donna" までに一致します。ただし "Donna" は含みません。
 var boundKeyRange = IDBKeyRange.bound("Bill", "Donna", false, true);
 
 // いずれかのキーレンジを使用するには、openCursor()/openKeyCursor() の第 1 引数として渡します。
 index.openCursor(boundKeyRange).onsuccess = function(event) {
   var cursor = event.target.result;
   if (cursor) {
-    // マッチした場合の処理。
+    // 一致した場合の処理。
     cursor.continue();
   }
 };</pre>
 
-<p>昇順 (すべてのカーソルのデフォルトの方向) ではなく、降順に反復処理を行いたい場合があるかもしれません。方向の切り替えは、<code>openCursor()</code> の第 2 引数に <code>prev</code> を渡すことで実現します:</p>
+<p>昇順 (すべてのカーソルのデフォルトの方向) ではなく、降順に反復処理を行いたい場合があるかもしれません。方向の切り替えは、<code>openCursor()</code> の第 2 引数に <code>prev</code> を渡すことで実現します。</p>
 
 <pre class="brush: js">objectStore.openCursor(boundKeyRange, "prev").onsuccess = function(event) {
   var cursor = event.target.result;
@@ -511,7 +520,7 @@ index.openCursor(boundKeyRange).onsuccess = function(event) {
   }
 };</pre>
 
-<p>方向を変えたいだけで表示する結果は制限しない場合は、第 1 引数に null を渡します:</p>
+<p>方向を変えたいだけで表示する結果は制限しない場合は、第 1 引数に null を渡します。</p>
 
 <pre class="brush: js">objectStore.openCursor(null, "prev").onsuccess = function(event) {
   var cursor = event.target.result;
@@ -521,7 +530,7 @@ index.openCursor(boundKeyRange).onsuccess = function(event) {
   }
 };</pre>
 
-<p>"name" インデックスは一意ではありませんので、<code>name</code> が同じ項目が複数存在する可能性があります。キーは常に一意でなければならないため、オブジェクトストアでこのような状況は発生できないことに注意してください。インデックスに対して反復処理を行う際に重複を取り除きたい場合は、方向のパラメータに <code>nextunique</code> (逆向きであれば <code>prevunique</code>) を指定します。<code>nextunique</code> または <code>prevunique</code> を使用すると、常にキーが最小の項目が返ります。</p>
+<p>"name" インデックスは一意ではありませんので、<code>name</code> が同じ項目が複数存在する可能性があります。キーは常に一意でなければならないため、オブジェクトストアでこのような状況は発生できないことに注意してください。インデックスに対して反復処理を行う際に重複を取り除きたい場合は、方向の引数に <code>nextunique</code> (逆向きであれば <code>prevunique</code>) を指定します。<code>nextunique</code> または <code>prevunique</code> を使用すると、常にキーが最小の項目が返ります。</p>
 
 <pre class="brush: js">index.openKeyCursor(null, "nextunique").onsuccess = function(event) {
   var cursor = event.target.result;
@@ -531,18 +540,18 @@ index.openCursor(boundKeyRange).onsuccess = function(event) {
   }
 };</pre>
 
-<p>有効な方向の引数については、"<a href="/ja/docs/Web/API/IDBCursor#Constants">IDBCursor Constants</a>" をご覧ください。</p>
+<p>有効な方向の引数については、"<a href="/ja/docs/Web/API/IDBCursor#constants">IDBCursor Constants</a>" をご覧ください。</p>
 
-<h2 id="Version_changes_while_a_web_app_is_open_in_another_tab" name="Version_changes_while_a_web_app_is_open_in_another_tab">ウェブアプリが別のタブで開かれているときにバージョンを変更する</h2>
+<h2 id="Version_changes_while_a_web_app_is_open_in_another_tab">ウェブアプリが別のタブで開かれているときにバージョンを変更する</h2>
 
-<p>データベースのバージョン変更が必要である場合に ウェブアプリでそのようなことを行うときは、ユーザーが古いバージョンの ウェブアプリをタブで開いている場合に別のタブで新しいバージョンのアプリを読み込んだときに発生することを考慮しなければなりません。データベースの実際のバージョンより大きなバージョンを指定して <code>open()</code> を呼び出すときは、データベースに変更を施す前に、他にデータベースを開いているものが明示的に要求を認めなければなりません (それらを閉じるか再読み込みするまで、<code>onblocked</code> イベントが発生します)。使い方を以下に示します:</p>
+<p>データベースのバージョン変更が必要である場合に ウェブアプリでそのようなことを行うときは、ユーザーが古いバージョンの ウェブアプリをタブで開いている場合に別のタブで新しいバージョンのアプリを読み込んだときに発生することを考慮しなければなりません。データベースの実際のバージョンより大きなバージョンを指定して <code>open()</code> を呼び出すときは、データベースに変更を施す前に、他にデータベースを開いているものが明示的に要求を認めなければなりません (それらを閉じるか再読み込みするまで、<code>onblocked</code> イベントが発生します)。使い方を以下に示します。</p>
 
 <pre class="brush: js">var openReq = mozIndexedDB.open("MyTestDatabase", 2);
 
 openReq.onblocked = function(event) {
   // 他のタブがデータベースを読み込んでいる場合は、処理を進める前に
   // それらを閉じなければなりません。
-  alert("このサイトを開いている他のタブをすべて閉じてください!");
+  console.log("このサイトを開いている他のタブをすべて閉じてください!");
 };
 
 openReq.onupgradeneeded = function(event) {
@@ -558,12 +567,12 @@ openReq.onsuccess = function(event) {
 };
 
 function useDatabase(db) {
-  // 別のページがバージョン変更を求めた場合に、通知されるようにするためのハンドラを追加するようにしてください。
+  // 別のページがバージョン変更を求めた場合に、通知されるようにするためのハンドラーを追加するようにしてください。
   // データベースを閉じなければなりません。データベースを閉じると、別のページがデータベースをアップグレードできます。
   // これを行わなければ、ユーザーがタブを閉じるまでデータベースはアップグレードされません。
   db.onversionchange = function(event) {
     db.close();
-    alert("新しいバージョンのページが使用可能になりました。再読み込みしてください!");
+    console.log("新しいバージョンのページが使用可能になりました。再読み込みしてください!");
   };
 
   // データベースを使用する処理
@@ -572,39 +581,39 @@ function useDatabase(db) {
 
 <p>すでに開かれているアプリが新たにデータベースを開こうとするコードを開始したが、古いバージョンのデータベースを使用している状況に対処するため、<code>VersionError</code> エラーもリッスンしましょう。</p>
 
-<h2 id="Security" name="Security">セキュリティ</h2>
+<h2 id="Security">セキュリティ</h2>
 
 <p>IndexedDB は同一生成元の原則を使用します。すなわち、ストアとサイトの生成元 (通常、サイトのドメインまたはサブドメイン) を紐づけますので、他の生成元からアクセスすることはできません。</p>
 
 <p>サードパーティの window コンテンツ (例えば {{htmlelement("iframe")}} のコンテンツ) は、ブラウザーが<a href="https://support.mozilla.org/ja/kb/disable-third-party-cookies">サードパーティ Cookie を禁止していない</a>限り、自身が埋め込まれている生成元の IndexedDB ストアにアクセスできます ({{bug("1147821")}} をご覧ください)。</p>
 
-<h2 id="Warning_About_Browser_Shutdown" name="Warning_About_Browser_Shutdown">ブラウザーの終了に関する警告</h2>
+<h2 id="Warning_About_Browser_Shutdown">ブラウザーの終了に関する警告</h2>
 
-<p>ブラウザーを終了するとき (例えばユーザーが "終了" や "閉じる" ボタンをクリックしたとき)、データベースを含むディスクは予期せず削除されたり、データベースストアへのパーミッションが失われたり、次のことが起きたりします:</p>
+<p>ブラウザーを終了するとき (例えばユーザーが「終了」や「閉じる」ボタンをクリックしたとき)、データベースを含むディスクは予期せず削除されたり、データベースストアへのパーミッションが失われたり、次のことが起きたりします。</p>
 
 <ol>
  <li>影響するデータベース (あるいは、ブラウザーを終了する場合はすべての開いているデータベース) の各トランザクションは <code>AbortError</code> とともに中断されます。この効果は各トランザクションで {{domxref("IDBTransaction.abort()")}} が呼ばれたのと同等です。</li>
  <li>すべてのトランザクションが完了していたら、データベース接続は閉じられます。</li>
- <li>最後に、データベース接続を表す {{domxref("IDBDatabase")}} オブジェクトは {{event("close")}} イベントを受け取ります。{{domxref("IDBDatabase.onclose")}} イベントハンドラを使ってこのイベントをリッスンできます。その結果、データベースが予期せず閉じられたことがわかります。</li>
+ <li>最後に、データベース接続を表す {{domxref("IDBDatabase")}} オブジェクトは {{event("close")}} イベントを受け取ります。{{domxref("IDBDatabase.onclose")}} イベントハンドラーを使ってこのイベントを待ち受けできます。その結果、データベースが予期せず閉じられたことがわかります。</li>
 </ol>
 
-<p>上記の挙動は新しく、下記のブラウザーリリース以降で利用できます: Firefox 50, Google Chrome 31 (おおよそ)。</p>
+<p>上記の挙動は新しく、ブラウザーの Firefox 50、Google Chrome 31 以降 (おおよそ) のリリースで利用できます。</p>
 
-<p>このブラウザーバージョンの前は、トランザクションは静かに中断され、{{event("close")}} イベントは発火せず、予期せぬデータベースの停止を検出する方法はありませんでした。</p>
+<p>このバージョンのブラウザーの前は、トランザクションは暗黙裡に中断され、{{event("close")}} イベントが発行されず、予期せぬデータベースの停止を検出する方法はありませんでした。</p>
 
 <p>ユーザーはいつでもブラウザーを終了することができますので、特定のトランザクションが完了することをあてにしたり、完了しなかったことを知ったりすることはできません。この動作が暗示することがいくつかあります。</p>
 
 <p>第一に、データベースであらゆるトランザクションが終了したときに、常に一貫性がある状態を保つように注意するべきです。例えば、ユーザーが編集可能な項目のリストを保存する IndexedDB を使用していると想定します。オブジェクトストアを消去してから新たなリストを書き込むことにより、編集後のリストを保存します。あるトランザクションでオブジェクトストアを消去して、別のトランザクションで新たなリストを書き込むとすれば、消去した後かつ書き込む前にブラウザーが閉じられる危険性があり、その場合は空のデータベースが残ります。これを避けるために、消去と書き込みをひとつのトランザクションに結合しましょう。</p>
 
-<p>第二に、データベースのトランザクションと unload イベントを紐づけるべきではありません。ブラウザーを閉じることで unload イベントが発生した場合、unload イベントハンドラで作成したトランザクションは完了しません。ブラウザーのセッションにわたって情報を管理するための直感的な方法は、ブラウザー (または特定のページ) を開いたときに情報を読み込んで、ユーザーとブラウザーとの対話に応じて更新して、ブラウザー (またはページ) を閉じるときに保存する流れです。しかし、これは動作しないでしょう。データベースのトランザクションは unload イベントハンドラで作成されますが、これらは非同期処理ですので、実行できるようになる前に中止されるでしょう。</p>
+<p>第二に、データベースのトランザクションと unload イベントを紐づけるべきではありません。ブラウザーを閉じることで unload イベントが発生した場合、unload イベントハンドラーで作成したトランザクションは完了しません。ブラウザーのセッションにわたって情報を管理するための直感的な方法は、ブラウザー (または特定のページ) を開いたときに情報を読み込んで、ユーザーとブラウザーとの対話に応じて更新して、ブラウザー (またはページ) を閉じるときに保存する流れです。しかし、これは動作しないでしょう。データベースのトランザクションは unload イベントハンドラーで作成されますが、これらは非同期処理ですので、実行できるようになる前に中止されるでしょう。</p>
 
 <p>実は通常のブラウザー終了であっても、IndexedDB のトランザクションが完了するよう保証する手段はありません。{{bug(870645)}} をご覧ください。通常の終了通知の回避策として、トランザクションの状況を追跡して、アンロード時にトランザクションが完了していないことをユーザーに警告するための <code>beforeunload</code> イベントを追加するとよいでしょう。</p>
 
-<p>少なくともアボート通知と{{domxref("IDBDatabase.onclose")}}を追加することで、いつ起こったのかがわかります。</p>
+<p>少なくとも中止通知と{{domxref("IDBDatabase.onclose")}}を追加することで、いつ起こったのかがわかります。</p>
 
-<h2 id="Locale-aware_sorting" name="Locale-aware_sorting">ロケールを意識した並べ替え</h2>
+<h2 id="Locale-aware_sorting">ロケールを意識した並べ替え</h2>
 
-<p>Mozilla は Firefox 43 以降に、IndexedDB のデータでロケールを意識した並べ替えを行う機能を実装しました。デフォルトでは、IndexedDB は文字列の並べ替えで国際化にまったく対処せず、すべてが英語のテキストであるかのように並べ替えられます。例えば b、á、z、a は以下のように並べ替えられます:</p>
+<p>Mozilla は Firefox 43 以降に、IndexedDB のデータでロケールを意識した並べ替えを行う機能を実装しました。デフォルトでは、IndexedDB は文字列の並べ替えで国際化にまったく対処せず、すべてが英語のテキストであるかのように並べ替えられます。例えば b、á、z、a は以下のように並べ替えられます。</p>
 
 <ul>
  <li>a</li>
@@ -613,19 +622,19 @@ function useDatabase(db) {
  <li>á</li>
 </ul>
 
-<p>これは明らかに、ユーザーが望むデータの並べ替えではありません。例えば Aaron と Áaron は、連絡先一覧で隣り合うべきです。従って適切な国際化並べ替えを実現するには、データセット全体をメモリに読み込んで、クライアントサイド JavaScript で並べ替えを実行しなければならず、非効率的です。</p>
+<p>これは明らかに、ユーザーが望むデータの並べ替えではありません。例えば Aaron と Áaron は、連絡先一覧で隣り合うべきです。従って適切な国際化並べ替えを実現するには、データセット全体をメモリーに読み込んで、クライアントサイド JavaScript で並べ替えを実行しなければならず、非効率的です。</p>
 
 <p>この新機能は、開発者が {{domxref("IDBObjectStore.createIndex()")}} を使用してインデックスを作成する際にロケールを指定できるようにします (引数を確認してください)。データセットに対して反復処理を行うためにカーソルを使用するときに、ロケールを意識した並べ替えを行いたい場合は、特化した {{domxref("IDBLocaleAwareKeyRange")}} を使用できます。</p>
 
 <p>また {{domxref("IDBIndex")}} には、ロケールが指定されているか、およびどのロケールが指定されているかを特定するために追加された新たなプロパティがあります。<code>locale</code> (指定されたロケール、または未指定であれば null を返します) と <code>isAutoLocale</code> (プラットフォームの既定のロケールを使用する自動ロケールでインデックスが作成されていれば <code>true</code>、そうでなければ <code>false</code> を返します) です。</p>
 
 <div class="note">
-<p><strong>注記</strong>: 現在、この機能はフラグで隠されています。有効化して実験するには、<a>about:config</a> に移動して <code>dom.indexedDB.experimental</code> を有効化してください。</p>
+<p><strong>メモ</strong>: 現在、この機能はフラグで隠されています。有効化して実験するには、<a>about:config</a> に移動して <code>dom.indexedDB.experimental</code> を有効化してください。</p>
 </div>
 
-<h2 id="Full_IndexedDB_example" name="Full_IndexedDB_example">包括的な IndexedDB のサンプル</h2>
+<h2 id="Full_IndexedDB_example">包括的な IndexedDB のサンプル</h2>
 
-<h3 id="HTML_Content" name="HTML_Content">HTML コンテンツ</h3>
+<h3 id="HTML_Content">HTML コンテンツ</h3>
 
 <pre class="brush: html">&lt;script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"&gt;&lt;/script&gt;
 
@@ -760,7 +769,7 @@ function useDatabase(db) {
     &lt;/div&gt;
 </pre>
 
-<h3 id="CSS_Content" name="CSS_Content">CSS コンテンツ</h3>
+<h3 id="CSS_Content">CSS コンテンツ</h3>
 
 <pre class="brush: css">body {
   font-size: 0.8em;
@@ -849,7 +858,7 @@ input {
 }
 </pre>
 
-<h3 id="JavaScript_Content" name="JavaScript_Content">JavaScript コンテンツ</h3>
+<h3 id="JavaScript_Content">JavaScript コンテンツ</h3>
 
 <pre class="brush: js">(function () {
   var COMPAT_ENVS = [
@@ -877,9 +886,7 @@ input {
     console.log("openDb ...");
     var req = indexedDB.open(DB_NAME, DB_VERSION);
     req.onsuccess = function (evt) {
-      // ガベージコレクションの問題を避けるため、結果を得る際は
-      // "req" より "this" を使用する方がよい
-      // db = req.result;
+      // db = req.result; と同等
       db = this.result;
       console.log("openDb DONE");
     };
@@ -907,7 +914,7 @@ input {
     return tx.objectStore(store_name);
   }
 
-  function clearObjectStore(store_name) {
+  function clearObjectStore() {
     var store = getObjectStore(DB_STORE_NAME, 'readwrite');
     var req = store.clear();
     req.onsuccess = function(evt) {
@@ -996,7 +1003,7 @@ input {
         // ストア内の次のオブジェクトに移動する
         cursor.continue();
 
-        // このカウンタは、個別の ID を作成するためだけに使用する
+        // このカウンターは、個別の ID を作成するためだけに使用する
         i++;
       } else {
         console.log("No more entries");
@@ -1069,7 +1076,7 @@ input {
    * @param {string} url ダウンロードしてローカルの IndexedDB データベースに保存する
    *   画像の URL。この URL の背後にあるリソースは、"同一生成元ポリシー" に従います。
    *   よって、この方法を動作させるために URL は、このコードを配置する
-   *   Web サイト/アプリと同一生成元であることが必要です。
+   *  ウェブサイト/アプリと同一生成元であることが必要です。
    */
   function addPublicationFromUrl(biblioid, title, year, url) {
     console.log("addPublicationFromUrl:", arguments);
@@ -1189,8 +1196,8 @@ input {
       // 警告: 削除するには、作成時に使用したものとまったく同じキーを使用しなければ
       // なりません。作成時のキーが数値であった場合は、削除時も数値でなければ
       // なりません。
-      req = store.delete(key);
-      req.onsuccess = function(evt) {
+      var deleteReq = store.delete(key);
+      deleteReq.onsuccess = function(evt) {
         console.log("evt:", evt);
         console.log("evt.target:", evt.target);
         console.log("evt.target.result:", evt.target.result);
@@ -1198,7 +1205,7 @@ input {
         displayActionSuccess("Deletion successful");
         displayPubList(store);
       };
-      req.onerror = function (evt) {
+      deleteReq.onerror = function (evt) {
         console.error("deletePublication:", evt.target.errorCode);
       };
     };
@@ -1298,37 +1305,38 @@ input {
   openDb();
   addEventListeners();
 
-})(); // Immediately-Invoked Function Expression (IIFE)
-</pre>
+})(); // Immediately-Invoked Function Expression (IIFE)</pre>
 
 <p>{{LiveSampleLink('Full_IndexedDB_example', "オンラインのライブデモを試す")}}</p>
 
-<h2 id="See_also" name="See_also">関連情報</h2>
+<div class="notecard note">
+<p><strong>メモ</strong>: <code>window.indexedDB.open()</code> は非同期です。このメソッドは <code>success</code> イベントが発行されるよりもはるかに前に終了します。すなわち、ある関数 (例えば <code>openDb()</code>) が <code>open()</code> や <code>onsuccess</code> を呼び出すと、 <code>onsuccess</code> ハンドラーが実行されるよりも前に戻ります。この問題は、 <code>transaction()</code> や <code>get()</code> のような他のリクエストメソッドでも言えます。</p>
+</div>
+
+<h2 id="See_also">関連情報</h2>
 
 <p>必要に応じて、より多くの情報を知るための記事集です。</p>
 
-<h3 id="Reference" name="Reference">リファレンス</h3>
+<h3 id="Reference">リファレンス</h3>
 
 <ul>
- <li><a href="/ja/docs/Web/API/IndexedDB_API" title="IndexedDB">IndexedDB API リファレンス</a></li>
- <li><a href="http://www.w3.org/TR/IndexedDB/">Indexed Database API Specification</a></li>
- <li><a href="/ja/docs/Web/API/IndexedDB_API/Using_IndexedDB_in_chrome" title="IndexedDB/Using_IndexedDB_in_chrome">chrome で IndexedDB を使用する</a></li>
- <li><a href="/ja/docs/Web/API/IndexedDB_API/Using_JavaScript_Generators_in_Firefox">Firefox で JavaScript ジェネレータを使用する</a></li>
- <li>Firefox のソースコード内の、IndexedDB <a class="link-https" href="https://mxr.mozilla.org/mozilla-central/find?text=&amp;string=dom%2FindexedDB%2F.*%5C.idl&amp;regexp=1" title="https://mxr.mozilla.org/mozilla-central/find?text=&amp;string=dom/indexedDB/.*\.idl&amp;regexp=1">インタフェースのファイル</a></li>
+ <li><a href="/ja/docs/Web/API/IndexedDB_API">IndexedDB API リファレンス</a></li>
+ <li><a href="https://www.w3.org/TR/IndexedDB/">Indexed Database API Specification</a></li>
+ <li>IndexedDB <a class="link-https" href="https://searchfox.org/mozilla-central/search?q=dom%2FindexedDB%2F.*%5C.idl&path=&case=false&regexp=true">インターフェイスファイル</a> (Firefox のソースコード内)</li>
 </ul>
 
-<h3 id="Tutorials_and_guides" name="Tutorials_and_guides">チュートリアルとガイド</h3>
+<h3 id="Tutorials_and_guides">チュートリアルとガイド</h3>
 
 <ul>
- <li><a href="http://www.html5rocks.com/en/tutorials/indexeddb/uidatabinding/">Databinding UI Elements with IndexedDB</a></li>
- <li><a href="http://msdn.microsoft.com/en-us/scriptjunkie/gg679063.aspx">IndexedDB — The Store in Your Browser</a></li>
+ <li><a href="https://www.html5rocks.com/en/tutorials/indexeddb/uidatabinding/">Databinding UI Elements with IndexedDB</a></li>
+ <li><a href="https://msdn.microsoft.com/en-us/scriptjunkie/gg679063.aspx">IndexedDB — The Store in Your Browser</a></li>
 </ul>
 
-<h3 id="Libraries" name="Libraries">ライブラリ</h3>
+<h3 id="Libraries">ライブラリー</h3>
 
 <ul>
- <li><a href="http://mozilla.github.io/localForage/">localForage</a>: クライアントサイドのデータストレージ向けに、シンプルな name:value 形式の構文を提供する Polyfill です。バックグラウンドで IndexedDB を使用しますが、IndexedDB をサポートしないブラウザーでは WebSQL や localStorage にフォールバックします。</li>
- <li><a href="http://www.dexie.org/">dexie.js</a>: 優良でシンプルな構文により高速なコード開発を可能にする、IndexedDB のラッパーです。</li>
+ <li><a href="https://localforage.github.io/localForage/">localForage</a>: クライアント側のデータストレージ向けに、シンプルな name:value 形式の構文を提供するポリフィルです。バックグラウンドで IndexedDB を使用しますが、IndexedDB に対応していないブラウザーでは WebSQL や localStorage にフォールバックします。</li>
+ <li><a href="https://www.dexie.org/">dexie.js</a>: 優良でシンプルな構文により高速なコード開発を可能にする、IndexedDB のラッパーです。</li>
  <li><a href="https://github.com/erikolson186/zangodb">ZangoDB</a>: IndexedDB の MongoDB ライクなインターフェイスで、MongoDB でおなじみのフィルタリング、射影、ソート、アップデート、集計をサポートしています。</li>
- <li><a href="http://jsstore.net/">JsStore</a>: シンプルで高度な IndexedDB ラッパーで SQL ライクな文法があります。</li>
+ <li><a href="https://jsstore.net/">JsStore</a>: シンプルで高度な IndexedDB ラッパーで SQL ライクな文法があります。</li>
 </ul>
diff --git a/files/ja/web/api/issecurecontext/index.html b/files/ja/web/api/issecurecontext/index.html
new file mode 100644
index 0000000000..877738b41b
--- /dev/null
+++ b/files/ja/web/api/issecurecontext/index.html
@@ -0,0 +1,57 @@
+---
+title: WindowOrWorkerGlobalScope.isSecureContext
+slug: Web/API/isSecureContext
+tags:
+  - API
+  - DOM
+  - Window
+  - WindowOrWorkerGlobalContext
+  - Workers
+  - isSecureContext
+  - ウェブ
+  - プロパティ
+  - リファレンス
+translation_of: Web/API/WindowOrWorkerGlobalScope/isSecureContext
+original_slug: Web/API/WindowOrWorkerGlobalScope/isSecureContext
+---
+<p>{{APIRef()}}{{SeeCompatTable}}</p>
+
+<p>{{domxref("WindowOrWorkerGlobalScope")}} インターフェイスの読み取り専用 <code><strong>isSecureContext</strong></code> プロパティは、現在のコンテキストが安全（<code>true</code>）かそうではない（<code>false</code>）を示すブール値を返します。</p>
+
+<h2 id="構文">構文</h2>
+
+<pre class="syntaxbox">var <em>isItSecure</em> = self.isSecureContext; // or just isSecureContext
+</pre>
+
+<h3 id="値">値</h3>
+
+<p>{{domxref("Boolean")}}.</p>
+
+<h2 id="仕様">仕様</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">仕様</th>
+   <th scope="col">ステータス</th>
+   <th scope="col">コメント</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Secure Contexts', '#dom-windoworworkerglobalscope-issecurecontext', 'WindowOrWorkerGlobalScope.isSecureContext')}}</td>
+   <td>{{Spec2('Secure Contexts')}}</td>
+   <td>初期定義。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="ブラウザ互換性">ブラウザ互換性</h2>
+
+
+
+<p>{{Compat("api.WindowOrWorkerGlobalScope.isSecureContext")}}</p>
+
+<h2 id="参照">参照</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Security/Secure_Contexts">Secure contexts</a></li>
+</ul>
diff --git a/files/ja/web/api/navigator/appcodename/index.html b/files/ja/web/api/navigator/appcodename/index.html
new file mode 100644
index 0000000000..befb274cb5
--- /dev/null
+++ b/files/ja/web/api/navigator/appcodename/index.html
@@ -0,0 +1,44 @@
+---
+title: Navigator.appCodeName
+slug: Web/API/Navigator/appCodeName
+tags:
+  - API
+  - Deprecated
+  - HTML DOM
+  - Navigator
+  - Property
+  - Reference
+browser-compat: api.Navigator.appCodeName
+translation_of: Web/API/NavigatorID/appCodeName
+original_slug: Web/API/NavigatorID/appCodeName
+---
+<div>{{APIRef("HTML DOM")}} {{Deprecated_Header}}</div>
+
+<p><strong><code>Navigator.appCodeName</code></strong> プロパティの値は、どのブラウザーでも常に "<code>Mozilla</code>" です。このプロパティは互換性のためだけに維持されています。</p>
+
+<div class="note"><strong>メモ:</strong> このプロパティが実際の製品名を返すことを期待しないでください。どのブラウザーもこのプロパティの値として "<code>Mozilla</code>" を返します。
+</div>
+
+<h2 id="Syntax">構文</h2>
+
+<pre class="brush: js"><em>codeName</em> = navigator.appCodeName
+</pre>
+
+<h3 id="Value">値</h3>
+
+<p>"<code>Mozilla</code>" という文字列です。</p>
+
+<h2 id="Specifications">仕様書</h2>
+
+{{Specifications}}
+
+<h2 id="Browser_compatibility">ブラウザーの互換性</h2>
+
+<p>{{Compat}}</p>
+
+<h2 id="See_also">関連情報</h2>
+
+<ul>
+  <li>{{domxref("Navigator.appName")}}</li>
+  <li>{{domxref("Navigator.product")}}</li>
+</ul>
diff --git a/files/ja/web/api/navigator/appname/index.html b/files/ja/web/api/navigator/appname/index.html
new file mode 100644
index 0000000000..0ecf702fba
--- /dev/null
+++ b/files/ja/web/api/navigator/appname/index.html
@@ -0,0 +1,46 @@
+---
+title: Navigator.appName
+slug: Web/API/Navigator/appName
+tags:
+  - API
+  - Deprecated
+  - HTML DOM
+  - Navigator
+  - Property
+  - Reference
+browser-compat: api.Navigator.appName
+translation_of: Web/API/NavigatorID/appName
+original_slug: Web/API/NavigatorID/appName
+---
+<div>{{APIRef("HTML DOM")}} {{Deprecated_Header}}</div>
+
+<p><strong><code>Navigator.appName</code></strong> プロパティの値は、どのブラウザーでも常に "<code>Netscape</code>" です。このプロパティは互換性ためだけに維持されています。</p>
+
+<div class="notecard note">
+  <h4>メモ</h4>
+  <p>このプロパティが実際のブラウザー名を返すことを期待しないでください。どのブラウザーもこのプロパティの値として "<code>Netscape</code>" を返します。</p>
+</div>
+
+<h2 id="Syntax">構文</h2>
+
+<pre class="brush: js"><var>appName</var> = navigator.appName
+</pre>
+
+<h3 id="Value">値</h3>
+
+<p>文字列 "<code>Netscape</code>" です。</p>
+
+<h2 id="Specifications">仕様書</h2>
+
+{{Specifications}}
+
+<h2 id="Browser_compatibility">ブラウザーの互換性</h2>
+
+<p>{{Compat}}</p>
+
+<h2 id="See_also">関連情報</h2>
+
+<ul>
+  <li>{{domxref("Navigator.appCodeName")}}</li>
+  <li>{{domxref("Navigator.product")}}</li>
+</ul>
diff --git a/files/ja/web/api/navigator/appversion/index.html b/files/ja/web/api/navigator/appversion/index.html
new file mode 100644
index 0000000000..d3908733b7
--- /dev/null
+++ b/files/ja/web/api/navigator/appversion/index.html
@@ -0,0 +1,50 @@
+---
+title: Navigator.appVersion
+slug: Web/API/Navigator/appVersion
+tags:
+  - API
+  - Deprecated
+  - Navigator
+  - Property
+  - Reference
+  - appVersion
+browser-compat: api.Navigator.appVersion
+translation_of: Web/API/NavigatorID/appVersion
+original_slug: Web/API/NavigatorID/appVersion
+---
+<p>{{APIRef("HTML DOM")}} {{Deprecated_Header}}</p>
+
+<p>"<code>4.0</code>" またはそのブラウザーのバージョン情報を表す文字列のどちらかを返します。</p>
+
+<div class="notecard note">
+  <h4>メモ</h4>
+  <p>このプロパティがブラウザーの正しいバージョンを返すことを期待しないでください。</p>
+</div>
+
+<h2 id="Syntax">構文</h2>
+
+<pre class="brush: js">window.navigator.appVersion
+</pre>
+
+<h3 id="Returned_value">値</h3>
+
+<p>"<code>4.0</code>" またはそのブラウザーのバージョン情報を表す文字列のどちらかです。</p>
+
+<h2 id="Example">例</h2>
+
+<pre class="brush: js">alert("このブラウザーのバージョンは " + navigator.appVersion + " と報告されています。");
+</pre>
+
+<h2 id="Notes">注</h2>
+
+<p><code>window.navigator.userAgent</code> プロパティもバージョン番号を含んでいる場合がありますが ("<code>Mozilla/5.0 (Windows; U; Win98; en-US; rv:0.9.2) Gecko/20010725 Netscape 6/6.1</code>" など)、ユーザーエージェント文字列を変更したり、他のブラウザー、プラットフォーム、ユーザーエージェントに「偽装」したり、ブラウザーベンダー自身がこれらのプロパティに無頓着であったりすることを意識しておいてください。</p>
+
+<p><code>window.navigator.appVersion</code>, <code>window.navigator.appName</code>, <code>window.navigator.userAgent</code> の各プロパティは、「ブラウザー推定」 (browser sniffing) コード、すなわち使用しているブラウザーを検出し、それに従ってページを調整しようとするスクリプトで使われてきました。これにより、一部のウェブサイトから拒否されないようにするために、ブラウザーがこれらのプロパティで偽の情報を返さなければならないという現在の状況が発生したのです。</p>
+
+<h2 id="Specifications">仕様書</h2>
+
+{{Specifications}}
+
+<h2 id="Browser_compatibility">ブラウザーの互換性</h2>
+
+<p>{{Compat}}</p>
diff --git a/files/ja/web/api/navigator/hardwareconcurrency/index.html b/files/ja/web/api/navigator/hardwareconcurrency/index.html
new file mode 100644
index 0000000000..cd8a14f7ab
--- /dev/null
+++ b/files/ja/web/api/navigator/hardwareconcurrency/index.html
@@ -0,0 +1,58 @@
+---
+title: Navigator.hardwareConcurrency
+slug: Web/API/Navigator/hardwareConcurrency
+tags:
+  - API
+  - HTML DOM
+  - Navigator
+  - Property
+  - hardwareConcurrency
+browser-compat: api.Navigator.hardwareConcurrency
+translation_of: Web/API/Navigator/hardwareConcurrency
+original_slug: Web/API/NavigatorConcurrentHardware/hardwareConcurrency
+---
+<p>{{APIRef("HTML DOM")}}</p>
+
+<p><code><strong>navigator.hardwareConcurrency</strong></code> は読み取り専用のプロパティで、ユーザーのコンピューター上でスレッドを実行するために使用可能な論理プロセッサー数を返します。</p>
+
+<h2 id="Syntax">構文</h2>
+
+<pre class="brush: js"><em>logicalProcessors</em> = window.navigator.hardwareConcurrency
+</pre>
+
+<h2 id="Value">値</h2>
+
+<p>論理プロセッサーのコア数を示す数値です。</p>
+
+<p>現代のコンピューターは CPU に複数の物理プロセッサーのコアがあります (通常は 2 コアか 4 コア)。しかし、通常それぞれの物理コアは高度なスケジューリング技術を用いて、一度に複数スレッドを実行することができます。 したがって、例えば 4 コアの CPU は 8 個の<strong>論理プロセッサーコア</strong>を提供することができます。論理プロセッサーのコア数は、コンテキスト切り替えを必要とせずに一度に効果的に実行できるスレッドの数を測定するために利用できます。</p>
+
+<p>しかしながら、ブラウザーはより少ない論理コア数を報告することを選択することで、一度に実行できる {{domxref("Worker")}} の数をより正確に表すことがあります。したがって、この数値をユーザーのシステムのコア数の絶対的な測定値として扱わないようにしてください。</p>
+
+<h2 id="Examples">例</h2>
+
+<p>この例では、ブラウザーが報告した論理プロセッサーごとに {{domxref("Worker")}} が 1 つ作られ、新しいワーカーへの参照と、そのワーカーをまだ使用しているかどうかを示す論理値の値を含むレコードを作っています。これらのオブジェクトは後で使用するために配列に順々に格納されています。後でリクエストを処理するために使うワーカーのプールを作っています。</p>
+
+<pre class="brush: js">let workerList = [];
+
+for (let i = 0; i &lt; window.navigator.hardwareConcurrency; i++) {
+  let newWorker = {
+    worker: new Worker('cpuworker.js'),
+    inUse: false
+  };
+  workerList.push(newWorker);
+}</pre>
+
+<h2 id="Specifications">仕様書</h2>
+
+{{Specifications}}
+
+<h2 id="Browser_compatibility">ブラウザーの互換性</h2>
+
+<p>{{Compat}}</p>
+
+<h2 id="See_also">関連情報</h2>
+
+<ul>
+  <li>{{domxref("Navigator")}}</li>
+  <li>{{domxref("WorkerNavigator")}}</li>
+</ul>
diff --git a/files/ja/web/api/navigator/language/index.html b/files/ja/web/api/navigator/language/index.html
new file mode 100644
index 0000000000..2e42ca25b2
--- /dev/null
+++ b/files/ja/web/api/navigator/language/index.html
@@ -0,0 +1,50 @@
+---
+title: Navigator.language
+slug: Web/API/Navigator/language
+tags:
+  - API
+  - Language
+  - Navigator
+  - Property
+  - Read-only
+  - Reference
+browser-compat: api.Navigator.language
+translation_of: Web/API/Navigator/language
+original_slug: Web/API/NavigatorLanguage/language
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p><strong><code>Navigator.language</code></strong> は読み取り専用プロパティで、ユーザーの言語を表す文字列を返します。普通、ブラウザー UI の言語が返されます。</p>
+
+<h2 id="Syntax">構文</h2>
+
+<pre class="brush: js">const <em>lang</em> = navigator.language
+</pre>
+
+<h3 id="Value">値</h3>
+
+<p>{{domxref("DOMString")}} です。。<em><code>lang</code></em> は、<a class="external" href="https://tools.ietf.org/rfc/bcp/bcp47.txt">BCP 47</a> で定義された言語バージョンを表す文字列が格納されます。例えば、"en"、"en-US"、"fr"、"fr-FR"、"es-ES" などが含まれます。</p>
+
+<p>iOS 10.2 以前の Safari では、国コードは "en-us"、"fr-fr" のように小文字で返されます。</p>
+
+<h2 id="Example">例</h2>
+
+<pre class="brush: js">if (/^en\b/.test(navigator.language)) {
+  doLangSelect(window.navigator.language);
+}
+</pre>
+
+<h2 id="Specification">仕様書</h2>
+
+{{Specifications}}
+
+<h2 id="Browser_compatibility">ブラウザーの互換性</h2>
+
+<p>{{Compat}}</p>
+
+<h2 id="See_also">関連情報</h2>
+
+<ul>
+  <li>{{domxref("navigator.languages")}}</li>
+  <li>{{domxref("navigator")}}</li>
+</ul>
diff --git a/files/ja/web/api/navigator/languages/index.html b/files/ja/web/api/navigator/languages/index.html
new file mode 100644
index 0000000000..a621134a4e
--- /dev/null
+++ b/files/ja/web/api/navigator/languages/index.html
@@ -0,0 +1,52 @@
+---
+title: Navigator.languages
+slug: Web/API/Navigator/languages
+tags:
+  - API
+  - Experimental
+  - Navigator
+  - Property
+  - Read-only
+  - Reference
+  - languages
+browser-compat: api.Navigator.languages
+translation_of: Web/API/Navigator/languages
+original_slug: Web/API/NavigatorLanguage/languages
+---
+<p>{{APIRef("HTML DOM")}}{{SeeCompatTable}}</p>
+
+<p><code><strong>navigator.languages</strong></code> は読み取り専用プロパティで、ユーザーの推奨される言語を表す {{domxref("DOMString")}} の配列を返します。この言語は <a href="http://tools.ietf.org/html/bcp47">BCP 47</a> 言語タグを使用して記述されています。返された配列の中では、設定で最も推奨される言語が最初に来るように並べられています。</p>
+
+<p>{{domxref("Navigator.language","navigator.language")}} の値は返される配列の最初の要素です。</p>
+
+<p>この値を変更すると、ユーザーの推奨言語が変更され、 {{event("languagechange")}} イベントが {{domxref("Window")}} オブジェクトに発行されます。</p>
+
+<p>ユーザーのブラウザーからのすべての HTTP リクエストにある <code>Accept-Language</code> ヘッダーは、 <code>navigator.languages</code> プロパティと同じ値ですが、拡張された <code>qvalues</code> (quality values) フィールドのみが異なります (例えば <code>en-US;q=0.8</code>)。
+</p>
+
+<h2 id="Syntax">構文</h2>
+
+<pre class="brush: js"><em>preferredLanguages</em> = <em>globalObj</em>.navigator.languages
+</pre>
+
+<h2 id="Examples">例</h2>
+
+<pre class="brush: js">navigator.language   //"en-US"
+navigator.languages  //["en-US", "zh-CN", "ja-JP"]
+</pre>
+
+<h2 id="Specifications">仕様書</h2>
+
+{{Specifications}}
+
+<h2 id="Browser_compatibility">ブラウザーの互換性</h2>
+
+<p>{{Compat}}</p>
+
+<h2 id="See_also">関連情報</h2>
+
+<ul>
+  <li>{{domxref("navigator.language")}}</li>
+  <li>{{domxref("navigator")}}</li>
+  <li>{{domxref("Window.onlanguagechange")}}</li>
+</ul>
diff --git a/files/ja/web/api/navigator/platform/index.html b/files/ja/web/api/navigator/platform/index.html
new file mode 100644
index 0000000000..c0e4620269
--- /dev/null
+++ b/files/ja/web/api/navigator/platform/index.html
@@ -0,0 +1,45 @@
+---
+title: Navigator.platform
+slug: Web/API/Navigator/platform
+tags:
+  - API
+  - Deprecated
+  - HTML DOM
+  - Navigator
+  - Property
+  - Reference
+  - platform
+browser-compat: api.Navigator.platform
+translation_of: Web/API/NavigatorID/platform
+original_slug: Web/API/NavigatorID/platform
+---
+<p>{{ APIRef("HTML DOM") }} {{Deprecated_Header}}</p>
+
+<p>ブラウザーのプラットフォームを表す文字列を返します。仕様書ではブラウザーが常に空文字列を返すことを許可していますので、信頼できる答えを得るためにこのプロパティを頼らないようにしてください。</p>
+
+<h2 id="Syntax">構文</h2>
+
+<pre class="brush: js"><em>platform</em> = navigator.platform
+</pre>
+
+<h3 id="Value">値</h3>
+
+<p>ブラウザーを実行しているプラットフォームを識別する {{domxref("DOMString")}}、あるいはブラウザーがプラットフォームの識別を断わった (または識別できない) 場合は空文字列になります。<code>platform</code> は空文字列か、ブラウザーを実行しているプラットフォームを表す文字列でなければなりません。</p>
+
+<p>例: "<code>MacIntel</code>", "<code>Win32</code>", "<code>FreeBSD i386</code>", "<code>WebTV OS</code>"</p>
+
+<h2 id="Example">例</h2>
+
+<pre class="brush: js">console.log(navigator.platform);</pre>
+
+<h2 id="Usage_notes">使用上のメモ</h2>
+
+<p>Chrome、Edge、Firefox 63 以降を含むほとんどのブラウザーは、64 ビット版の Windows で実行していても <code>"Win32"</code> を返します。 Internet Explorer やバージョン 63 より前の Firefox は <code>"Win64"</code> を返します。</p>
+
+<h2 id="Specifications">仕様書</h2>
+
+{{Specifications}}
+
+<h2 id="Browser_compatibility">ブラウザーの互換性</h2>
+
+<p>{{Compat}}</p>
diff --git a/files/ja/web/api/navigator/product/index.html b/files/ja/web/api/navigator/product/index.html
new file mode 100644
index 0000000000..d1f5b35941
--- /dev/null
+++ b/files/ja/web/api/navigator/product/index.html
@@ -0,0 +1,45 @@
+---
+title: Navigator.product
+slug: Web/API/Navigator/product
+tags:
+  - API
+  - Deprecated
+  - Navigator
+  - Property
+  - Reference
+browser-compat: api.Navigator.product
+translation_of: Web/API/NavigatorID/product
+original_slug: Web/API/NavigatorID/product
+---
+<div>{{APIRef("HTML DOM")}} {{Deprecated_Header}}</div>
+
+<p><strong><code>Navigator.product</code></strong> プロパティの値は、どのブラウザーでも常に "<code>Gecko</code>" です。このプロパティは互換性のためだけに維持されています。</p>
+
+
+<div class="notecard note">
+  <p>このプロパティが実際の製品名を返すことを期待しないでください。どのブラウザーもこのプロパティの値として "<code>Gecko</code>" を返します。</p>
+</div>
+
+<h2 id="Syntax">構文</h2>
+
+<pre class="brush: js"><em>productName</em> = navigator.product
+</pre>
+
+<h3 id="Value">値</h3>
+
+<p>文字列 "<code>Gecko</code>" です。</p>
+
+<h2 id="Specifications">仕様書</h2>
+
+{{Specifications}}
+
+<h2 id="Browser_compatibility">ブラウザーの互換性</h2>
+
+<p>{{Compat}}</p>
+
+<h2 id="See_also">関連情報</h2>
+
+<ul>
+  <li>{{domxref("Navigator.appCodeName")}}</li>
+  <li>{{domxref("Navigator.appName")}}</li>
+</ul>
diff --git a/files/ja/web/api/navigator/useragent/index.html b/files/ja/web/api/navigator/useragent/index.html
new file mode 100644
index 0000000000..d02c88de43
--- /dev/null
+++ b/files/ja/web/api/navigator/useragent/index.html
@@ -0,0 +1,67 @@
+---
+title: Navigator.userAgent
+slug: Web/API/Navigator/userAgent
+tags:
+  - API
+  - Navigator
+  - Property
+  - Read-only
+  - Reference
+browser-compat: api.Navigator.userAgent
+translation_of: Web/API/NavigatorID/userAgent
+original_slug: Web/API/NavigatorID/userAgent
+---
+<p>{{ApiRef("HTML DOM")}}</p>
+
+<p><code><strong>NavigatorID.userAgent</strong></code> は読み取り専用のプロパティで、現在のブラウザーのユーザーエージェント文字列を返します。</p>
+
+<div class="note">
+<p>仕様書では、ブラウザーがこのフィールドを介して提供する情報をできるだけ少なくすることを求めています。このプロパティの値は、同じブラウザーの将来のバージョンでも同じままであると仮定してはいけません。まったく使用しないようにしたり、ブラウザーの現在のバージョンと過去のバージョンのためだけに使用するようにしてください。新しいブラウザーは、古いブラウザーと同じ UA、またはその一部を使い始めるかもしれません。ブラウザーエージェントが本当にこのプロパティによって広告されたものであるという保証は本当にありません。<br>
+<br>
+また、ブラウザーのユーザーはこのフィールドの値を変更することができることを覚えておいてください (UA なりすまし)。</p>
+</div>
+
+<p>ユーザーエージェント文字列の検出に基づくブラウザーの識別は<strong>信頼性が低く</strong>、ユーザーエージェント文字列はユーザーが設定可能なので<strong>推奨されません</strong>。例えば、以下のようになります。</p>
+
+<ul>
+ <li>Firefox では、 about:config の "general.useragent.override" 設定を使うことができます。いくつかの Firefox の拡張や多機能バーでも設定可能です。</li>
+ <li>Opera 6 以降では、メニューからブラウザー識別文字列を設定できます。</li>
+ <li>Microsoft Internet Explorer では、 Windows レジストリーを使用します。</li>
+ <li>Safari と iCab は、メニューから、ブラウザーユーザエージェントを定義済みの Internet Explorer、または、 Netscape の文字列に変更できます。</li>
+</ul>
+
+<h2 id="Syntax">構文</h2>
+
+<pre class="brush: js">var <var>ua</var> = navigator.userAgent;
+</pre>
+
+<h3 id="Value">値</h3>
+
+<p>{{domxref("DOMString")}} で、ブラウザーが {{Glossary("HTTP")}} ヘッダーで提供する完全なユーザーエージェント文字列と、 {{domxref("Navigator")}} オブジェクト上のメソッドやその他の関連メソッドへのレスポンスを指定します。</p>
+
+<p>ユーザーエージェント文字列は形式的な構造に基づいて構築されており、いくつかの情報に分解することができます。これらの情報の各部分は、ユーザ－が設定可能な他の Navigator のプロパティから来ています。Gecko ベースのブラウザは以下の一般的な構造に準拠しています。</p>
+
+<pre class="brush: js">userAgent = appCodeName/appVersion number (Platform; Security; OS-or-CPU;
+Localization; rv: revision-version-number) product/productSub
+Application-Name Application-Name-version
+</pre>
+
+<h2 id="Example">例</h2>
+
+<pre class="brush:js">alert(window.navigator.userAgent)
+// alerts "Mozilla/5.0 (Windows; U; Win98; en-US; rv:0.9.2) Gecko/20010725 Netscape6/6.1"
+</pre>
+
+<h2 id="Specifications">仕様書</h2>
+
+{{Specifications}}
+
+<h2 id="Browser_compatibility">ブラウザーの互換性</h2>
+
+<p>{{Compat}}</p>
+
+<h2 id="See_also">関連情報</h2>
+
+<ul>
+  <li>{{httpheader("User-Agent")}} HTTP ヘッダー</li>
+</ul>
diff --git a/files/ja/web/api/origin/index.html b/files/ja/web/api/origin/index.html
new file mode 100644
index 0000000000..cf78260061
--- /dev/null
+++ b/files/ja/web/api/origin/index.html
@@ -0,0 +1,59 @@
+---
+title: WindowOrWorkerGlobalScope.origin
+slug: Web/API/origin
+tags:
+  - API
+  - DOM
+  - Window
+  - WindowOrWorkerGlobalScope
+  - Worker
+  - ウェブ
+  - プロパティ
+translation_of: Web/API/WindowOrWorkerGlobalScope/origin
+original_slug: Web/API/WindowOrWorkerGlobalScope/origin
+---
+<p>{{APIRef()}}{{SeeCompatTable}}</p>
+
+<p>{{domxref("WindowOrWorkerGlobalScope")}} インターフェイスの読み取り専用プロパティ <code><strong>origin</strong></code> は、グローバルスコープの文字列としてシリアライズされた origin を返します。</p>
+
+<h2 id="構文">構文</h2>
+
+<pre class="syntaxbox">var <em>myOrigin</em> = self.origin; // or just origin
+</pre>
+
+<h3 id="値">値</h3>
+
+<p>{{domxref("USVString")}}.</p>
+
+<h2 id="例">例</h2>
+
+<p>worker script 内から実行される以下のスニペットは、メッセージを受け取る度にワーカーのグローバルスコープの origin をコンソールに記録します。</p>
+
+<pre class="brush: js">onmessage = function() {
+  console.log(self.origin);
+};</pre>
+
+<p>もし origin が scheme/host/port tuple出ない場合 (あなたがローカルで実行しようとしている、言い換えると <code>file://</code> というURLの場合)、 <code>origin</code> は <code>"null"</code> という文字列を返すでしょう。</p>
+
+<h2 id="仕様">仕様</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">仕様</th>
+   <th scope="col">ステータス</th>
+   <th scope="col">コメント</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'webappapis.html#dom-origin', 'WindowOrWorkerGlobalScope.origin')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>初期定義。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="ブラウザ互換性">ブラウザ互換性</h2>
+
+
+
+<p>{{Compat("api.WindowOrWorkerGlobalScope.origin")}}</p>
diff --git a/files/ja/web/api/setinterval/index.html b/files/ja/web/api/setinterval/index.html
new file mode 100644
index 0000000000..f6f721580b
--- /dev/null
+++ b/files/ja/web/api/setinterval/index.html
@@ -0,0 +1,636 @@
+---
+title: WindowOrWorkerGlobalScope.setInterval()
+slug: Web/API/setInterval
+tags:
+  - API
+  - DOM
+  - Gecko
+  - Intervals
+  - JavaScript timers
+  - MakeBrowserAgnostic
+  - Method
+  - NeedsMarkupWork
+  - Timers
+  - WindowOrWorkerGlobalScope
+  - setInterval
+translation_of: Web/API/WindowOrWorkerGlobalScope/setInterval
+original_slug: Web/API/WindowOrWorkerGlobalScope/setInterval
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p>{{domxref("WindowOrWorkerGlobalScope")}} ミックスインの <strong><code>setInterval()</code></strong> メソッドは、一定の遅延間隔を置いて関数やコードスニペットを繰り返し呼び出します。これは、インターバルを一意に識別する <code>interval ID</code> を返します。よって {{domxref("WindowOrWorkerGlobalScope.clearInterval", "clearInterval()")}} を呼び出して、後でインターバルを削除できます。このメソッドは {{domxref("Window")}} および {{domxref("Worker")}} インターフェイスで提供します。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox notranslate"><em>var intervalID</em> = scope.setInterval(<em>func</em>, <em>delay</em>[, <em>param1</em>, <em>param2</em>, ...]);
+<em>var intervalID</em> = scope.setInterval(<em>code</em>, <em>delay</em>);
+</pre>
+
+<h3 id="Parameters" name="Parameters">引数</h3>
+
+<dl>
+ <dt><code>func</code></dt>
+ <dd>ミリ秒単位の <code>delay</code> が経過するたびに実行する {{jsxref("function", "関数")}} です。関数には引数が渡されず、また戻り値を想定していません。</dd>
+ <dt><code>code</code></dt>
+ <dd>関数の代わりに文字列を含める構文も許容されており、ミリ秒単位の <code>delay</code> が経過するたびに文字列をコンパイルして実行します。{{jsxref("eval", "eval()")}} の使用にリスクがあるのと同じ理由で、この構文は <strong>推奨しません</strong>。</dd>
+ <dt><code>delay</code></dt>
+ <dd>指定した関数またはコードを実行する前にタイマーが待つべき時間をミリ秒 (1/1000 秒) 単位で指定します。引数が 10 より小さい場合は、10 を使用します。実際の遅延が長くなることがあります。例えば {{SectionOnPage("/ja/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout", "遅延が指定値より長い理由")}} をご覧ください。</dd>
+ <dt><code>param1, ..., paramN</code> {{optional_inline}}</dt>
+ <dd>タイマーが満了したときに、<em>func</em> で指定した関数に渡す追加の引数です。</dd>
+</dl>
+
+<div class="note">
+<p><strong>注記</strong>: Internet Explorer 9 およびそれ以前のバージョンでは、最初の構文で <code>setInterval()</code> に渡す追加の引数は動作しないことに注意してください。同様の機能を実現させるには、ポリフィルを使用してください。(<a href="#Callback_arguments">コールバックの引数</a> を参照)。</p>
+</div>
+
+<h3 id="Return_value" name="Return_value">戻り値</h3>
+
+<p>戻り値 <code>intervalID</code> は、<code>setInterval()</code> を呼び出して作成したタイマーを識別する、0 ではない正の整数値です。この値は、インターバルをキャンセルするために {{domxref("WindowOrWorkerGlobalScope.clearInterval()")}} へ渡すことができます。</p>
+
+<p><code>setInterval()</code> と {{domxref("WindowOrWorkerGlobalScope.setTimeout", "setTimeout()")}} は同じ ID プールを共有しており、さらに <code>clearInterval()</code> と {{domxref("WindowOrWorkerGlobalScope.clearTimeout", "clearTimeout()")}} は技術的に入れ替えて使用できることを意識すると役に立つでしょう。ただし明快さのために、コードを整備するときは混乱を避けるため、常に一致させるようにするべきです。</p>
+
+<div class="note"><strong>注記</strong>: 引数 <code>delay</code> は、符号付き 32 ビット整数に変換されます。IDL における符号付き整数の定義によって、<code>delay</code> は事実上 2147483647ms に制限されます。</div>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Example_1_Basic_syntax" name="Example_1_Basic_syntax">例 1: 基本的な構文</h3>
+
+<p>以下の例は、<code>setInterval()</code> の基本的な構文を示します。</p>
+
+<pre class="brush:js notranslate">var intervalID = window.setInterval(myCallback, 500);
+
+function myCallback() {
+  // Your code here
+}
+</pre>
+
+<h3 id="Example_2_Alternating_two_colors" name="Example_2_Alternating_two_colors">例 2: 2 つの色を切り替える</h3>
+
+<p>以下の例は停止ボタンを押すまで、1 秒おきに <code>flashtext()</code> 関数を呼び出します。</p>
+
+<pre class="brush:html notranslate">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+  &lt;meta charset="UTF-8" /&gt;
+  &lt;title&gt;setInterval/clearInterval example&lt;/title&gt;
+
+  &lt;script&gt;
+    var nIntervId;
+
+    function changeColor() {
+      nIntervId = setInterval(flashText, 1000);
+    }
+
+    function flashText() {
+      var oElem = document.getElementById('my_box');
+      oElem.style.color = oElem.style.color == 'red' ? 'blue' : 'red';
+      // oElem.style.color == 'red' ? 'blue' : 'red' is a ternary operator.
+    }
+
+    function stopTextColor() {
+      clearInterval(nIntervId);
+    }
+  &lt;/script&gt;
+&lt;/head&gt;
+
+&lt;body onload="changeColor();"&gt;
+  &lt;div id="my_box"&gt;
+    &lt;p&gt;Hello World&lt;/p&gt;
+  &lt;/div&gt;
+
+  &lt;button onclick="stopTextColor();"&gt;Stop&lt;/button&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h3 id="Example_3_Typewriter_simulation" name="Example_3_Typewriter_simulation">例 3: タイプライターのシミュレーション</h3>
+
+<p>以下の例は始めに何もない状態から、指定したセレクターのグループにマッチする <a href="/ja/docs/DOM/NodeList"><code>NodeList</code></a> へ徐々にコンテンツを入力することによってタイプライターを模倣します。</p>
+
+<pre class="brush:html notranslate">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+&lt;meta charset="UTF-8" /&gt;
+&lt;title&gt;JavaScript Typewriter - MDN Example&lt;/title&gt;
+&lt;script&gt;
+  function Typewriter (sSelector, nRate) {
+
+  function clean () {
+    clearInterval(nIntervId);
+    bTyping = false;
+    bStart = true;
+    oCurrent = null;
+    aSheets.length = nIdx = 0;
+  }
+
+  function scroll (oSheet, nPos, bEraseAndStop) {
+    if (!oSheet.hasOwnProperty('parts') || aMap.length &lt; nPos) { return true; }
+
+    var oRel, bExit = false;
+
+    if (aMap.length === nPos) { aMap.push(0); }
+
+    while (aMap[nPos] &lt; oSheet.parts.length) {
+      oRel = oSheet.parts[aMap[nPos]];
+
+      scroll(oRel, nPos + 1, bEraseAndStop) ? aMap[nPos]++ : bExit = true;
+
+      if (bEraseAndStop &amp;&amp; (oRel.ref.nodeType - 1 | 1) === 3 &amp;&amp; oRel.ref.nodeValue) {
+        bExit = true;
+        oCurrent = oRel.ref;
+        sPart = oCurrent.nodeValue;
+        oCurrent.nodeValue = '';
+      }
+
+      oSheet.ref.appendChild(oRel.ref);
+      if (bExit) { return false; }
+    }
+
+    aMap.length--;
+    return true;
+  }
+
+  function typewrite () {
+    if (sPart.length === 0 &amp;&amp; scroll(aSheets[nIdx], 0, true) &amp;&amp; nIdx++ === aSheets.length - 1) { clean(); return; }
+
+    oCurrent.nodeValue += sPart.charAt(0);
+    sPart = sPart.slice(1);
+  }
+
+  function Sheet (oNode) {
+    this.ref = oNode;
+    if (!oNode.hasChildNodes()) { return; }
+    this.parts = Array.prototype.slice.call(oNode.childNodes);
+
+    for (var nChild = 0; nChild &lt; this.parts.length; nChild++) {
+      oNode.removeChild(this.parts[nChild]);
+      this.parts[nChild] = new Sheet(this.parts[nChild]);
+    }
+  }
+
+  var
+    nIntervId, oCurrent = null, bTyping = false, bStart = true,
+    nIdx = 0, sPart = "", aSheets = [], aMap = [];
+
+  this.rate = nRate || 100;
+
+  this.play = function () {
+    if (bTyping) { return; }
+    if (bStart) {
+      var aItems = document.querySelectorAll(sSelector);
+
+      if (aItems.length === 0) { return; }
+      for (var nItem = 0; nItem &lt; aItems.length; nItem++) {
+        aSheets.push(new Sheet(aItems[nItem]));
+        /* Uncomment the following line if you have previously hidden your elements via CSS: */
+        // aItems[nItem].style.visibility = "visible";
+      }
+
+      bStart = false;
+    }
+
+    nIntervId = setInterval(typewrite, this.rate);
+    bTyping = true;
+  };
+
+  this.pause = function () {
+    clearInterval(nIntervId);
+    bTyping = false;
+  };
+
+  this.terminate = function () {
+    oCurrent.nodeValue += sPart;
+    sPart = "";
+    for (nIdx; nIdx &lt; aSheets.length; scroll(aSheets[nIdx++], 0, false));
+    clean();
+  };
+}
+
+/* usage: */
+var oTWExample1 = new Typewriter(/* elements: */ '#article, h1, #info, #copyleft', /* frame rate (optional): */ 15);
+
+/* default frame rate is 100: */
+var oTWExample2 = new Typewriter('#controls');
+
+/* you can also change the frame rate value modifying the "rate" property; for example: */
+// oTWExample2.rate = 150;
+
+onload = function () {
+  oTWExample1.play();
+  oTWExample2.play();
+};
+&lt;/script&gt;
+&lt;style type="text/css"&gt;
+span.intLink, a, a:visited {
+  cursor: pointer;
+  color: #000000;
+  text-decoration: underline;
+}
+
+#info {
+  width: 180px;
+  height: 150px;
+  float: right;
+  background-color: #eeeeff;
+  padding: 4px;
+  overflow: auto;
+  font-size: 12px;
+  margin: 4px;
+  border-radius: 5px;
+  /* visibility: hidden; */
+}
+&lt;/style&gt;
+&lt;/head&gt;
+
+&lt;body&gt;
+
+&lt;p id="copyleft" style="font-style: italic; font-size: 12px; text-align: center;"&gt;CopyLeft 2012 by &lt;a href="https://developer.mozilla.org/" target="_blank"&gt;Mozilla Developer Network&lt;/a&gt;&lt;/p&gt;
+&lt;p id="controls" style="text-align: center;"&gt;[&amp;nbsp;&lt;span class="intLink" onclick="oTWExample1.play();"&gt;Play&lt;/span&gt; | &lt;span class="intLink" onclick="oTWExample1.pause();"&gt;Pause&lt;/span&gt; | &lt;span class="intLink" onclick="oTWExample1.terminate();"&gt;Terminate&lt;/span&gt;&amp;nbsp;]&lt;/p&gt;
+&lt;div id="info"&gt;
+Vivamus blandit massa ut metus mattis in fringilla lectus imperdiet. Proin ac ante a felis ornare vehicula. Fusce pellentesque lacus vitae eros convallis ut mollis magna pellentesque. Pellentesque placerat enim at lacus ultricies vitae facilisis nisi fringilla. In tincidunt tincidunt tincidunt.
+&lt;/div&gt;
+&lt;h1&gt;JavaScript Typewriter&lt;/h1&gt;
+
+&lt;div id="article"&gt;
+&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ultrices dolor ac dolor imperdiet ullamcorper. Suspendisse quam libero, luctus auctor mollis sed, malesuada condimentum magna. Quisque in ante tellus, in placerat est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec a mi magna, quis mattis dolor. Etiam sit amet ligula quis urna auctor imperdiet nec faucibus ante. Mauris vel consectetur dolor. Nunc eget elit eget velit pulvinar fringilla consectetur aliquam purus. Curabitur convallis, justo posuere porta egestas, velit erat ornare tortor, non viverra justo diam eget arcu. Phasellus adipiscing fermentum nibh ac commodo. Nam turpis nunc, suscipit a hendrerit vitae, volutpat non ipsum.&lt;/p&gt;
+&lt;form&gt;
+&lt;p&gt;Phasellus ac nisl lorem: &lt;input type="text" /&gt;&lt;br /&gt;
+&lt;textarea style="width: 400px; height: 200px;"&gt;Nullam commodo suscipit lacus non aliquet. Phasellus ac nisl lorem, sed facilisis ligula. Nam cursus lobortis placerat. Sed dui nisi, elementum eu sodales ac, placerat sit amet mauris. Pellentesque dapibus tellus ut ipsum aliquam eu auctor dui vehicula. Quisque ultrices laoreet erat, at ultrices tortor sodales non. Sed venenatis luctus magna, ultricies ultricies nunc fringilla eget. Praesent scelerisque urna vitae nibh tristique varius consequat neque luctus. Integer ornare, erat a porta tempus, velit justo fermentum elit, a fermentum metus nisi eu ipsum. Vivamus eget augue vel dui viverra adipiscing congue ut massa. Praesent vitae eros erat, pulvinar laoreet magna. Maecenas vestibulum mollis nunc in posuere. Pellentesque sit amet metus a turpis lobortis tempor eu vel tortor. Cras sodales eleifend interdum.&lt;/textarea&gt;&lt;/p&gt;
+&lt;p&gt;&lt;input type="submit" value="Send" /&gt;
+&lt;/form&gt;
+&lt;p&gt;Duis lobortis sapien quis nisl luctus porttitor. In tempor semper libero, eu tincidunt dolor eleifend sit amet. Ut nec velit in dolor tincidunt rhoncus non non diam. Morbi auctor ornare orci, non euismod felis gravida nec. Curabitur elementum nisi a eros rutrum nec blandit diam placerat. Aenean tincidunt risus ut nisi consectetur cursus. Ut vitae quam elit. Donec dignissim est in quam tempor consequat. Aliquam aliquam diam non felis convallis suscipit. Nulla facilisi. Donec lacus risus, dignissim et fringilla et, egestas vel eros. Duis malesuada accumsan dui, at fringilla mauris bibStartum quis. Cras adipiscing ultricies fermentum. Praesent bibStartum condimentum feugiat.&lt;/p&gt;
+&lt;p&gt;Nam faucibus, ligula eu fringilla pulvinar, lectus tellus iaculis nunc, vitae scelerisque metus leo non metus. Proin mattis lobortis lobortis. Quisque accumsan faucibus erat, vel varius tortor ultricies ac. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec libero nunc. Nullam tortor nunc, elementum a consectetur et, ultrices eu orci. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a nisl eu sem vehicula egestas.&lt;/p&gt;
+&lt;/div&gt;
+&lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p><a href="/files/3997/typewriter.html">View this demo in action</a>. See also: <a href="/ja/docs/DOM/window.clearInterval"><code>clearInterval()</code></a>.</p>
+
+<h2 id="Callback_arguments" name="Callback_arguments">コールバックの引数</h2>
+
+<p>前述のとおり、Internet Explorer 9 およびそれ以前は、<code>setTimeout()</code> や <code>setInterval()</code> でコールバック関数に引数を渡す機能をサポートしません。以下の <strong>IE 専用</strong> コードは、この制限を克服する方法を説明します。使用方法は、スクリプトの先頭に以下のコードを追加するだけです。</p>
+
+<pre class="brush:js notranslate">/*\
+|*|
+|*|  IE-specific polyfill that enables the passage of arbitrary arguments to the
+|*|  callback functions of javascript timers (HTML5 standard syntax).
+|*|
+|*|  https://developer.mozilla.org/en-US/docs/Web/API/window.setInterval
+|*|  https://developer.mozilla.org/User:fusionchess
+|*|
+|*|  Syntax:
+|*|  var timeoutID = window.setTimeout(func, delay[, param1, param2, ...]);
+|*|  var timeoutID = window.setTimeout(code, delay);
+|*|  var intervalID = window.setInterval(func, delay[, param1, param2, ...]);
+|*|  var intervalID = window.setInterval(code, delay);
+|*|
+\*/
+
+if (document.all &amp;&amp; !window.setTimeout.isPolyfill) {
+  var __nativeST__ = window.setTimeout;
+  window.setTimeout = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) {
+    var aArgs = Array.prototype.slice.call(arguments, 2);
+    return __nativeST__(vCallback instanceof Function ? function () {
+      vCallback.apply(null, aArgs);
+    } : vCallback, nDelay);
+  };
+  window.setTimeout.isPolyfill = true;
+}
+
+if (document.all &amp;&amp; !window.setInterval.isPolyfill) {
+  var __nativeSI__ = window.setInterval;
+  window.setInterval = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) {
+    var aArgs = Array.prototype.slice.call(arguments, 2);
+    return __nativeSI__(vCallback instanceof Function ? function () {
+      vCallback.apply(null, aArgs);
+    } : vCallback, nDelay);
+  };
+  window.setInterval.isPolyfill = true;
+}
+</pre>
+
+<p>もうひとつの方法は、コールバックに無名関数を使用することです。ただし、この方法は少し多くコストがかかります。 例えば:</p>
+
+<pre class="brush:js notranslate">var intervalID = setInterval(function() { myFunc('one', 'two', 'three'); }, 1000);</pre>
+
+<p>さらに、<a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Function/bind">関数の <code>bind</code></a> を使用する方法もあります。例えば:</p>
+
+<pre class="brush:js notranslate">var intervalID = setInterval(function(arg1) {}.bind(undefined, 10), 1000);</pre>
+
+<p>{{h3_gecko_minversion("非アクティブなタブ", "5.0")}}</p>
+
+<p>Gecko 5.0 {{geckoRelease("5.0")}} より非アクティブなタブでは、1 秒あたり 1 回を超えて実行しないようにインターバルを制限します。</p>
+
+<h2 id="The_this_problem" name="The_this_problem">"<a href="/ja/docs/Web/JavaScript/Reference/Operators/this"><code>this</code></a>" 問題</h2>
+
+<p><code>setInterval()</code> (もっと言うと他のどんな関数でも) にメソッドを渡すと、間違った <a href="/ja/docs/Web/JavaScript/Reference/Operators/this"><code>this</code></a> の値で呼び出されることがあります。この問題は <a href="/ja/docs/Web/JavaScript/Reference/Operators/this#As_an_object_method">JavaScript リファレンス</a> で詳しく説明されています。</p>
+
+<h3 id="Explanation" name="Explanation">説明</h3>
+
+<p><code>setInterval()</code> によって実行されるコードは、<code>setInterval</code> が呼び出された関数とは別の実行コンテキスト内で実行されます。その結果、呼び出された関数の <a href="/ja/docs/Web/JavaScript/Reference/Operators/this"><code>this</code></a> キーワードは <code>window</code> (または <code>global</code>) オブジェクトに設定されます。これは <code>setTimeout</code> を呼び出した関数の <code>this</code> の値とは異なります。以下の例をご覧ください (ここでは <code>setInterval()</code> ではなく <code>setTimeout()</code> を使用していますが、どちらのタイマーでも問題は同じです):</p>
+
+<pre class="brush:js notranslate">myArray = ['zero', 'one', 'two'];
+
+myArray.myMethod = function (sProperty) {
+    alert(arguments.length &gt; 0 ? this[sProperty] : this);
+};
+
+myArray.myMethod(); // prints "zero,one,two"
+myArray.myMethod(1); // prints "one"
+setTimeout(myArray.myMethod, 1000); // prints "[object Window]" after 1 second
+setTimeout(myArray.myMethod, 1500, "1"); // prints "undefined" after 1,5 seconds
+// passing the 'this' object with .call won't work
+// because this will change the value of this inside setTimeout itself
+// while we want to change the value of this inside myArray.myMethod
+// in fact, it will be an error because setTimeout code expects this to be the window object:
+setTimeout.call(myArray, myArray.myMethod, 2000); // error: "NS_ERROR_XPC_BAD_OP_ON_WN_PROTO: Illegal operation on WrappedNative prototype object"
+setTimeout.call(myArray, myArray.myMethod, 2500, 2); // same error
+</pre>
+
+<p>この例でわかるとおり、旧来の JavaScript でコールバック関数に <code>this</code> オブジェクトを渡す方法はありません。</p>
+
+<h3 id="A_possible_solution" name="A_possible_solution">考えられる解決策</h3>
+
+<p>"<code>this</code>" 問題の解決策としてネイティブな <code>setTimeout()</code> および <code>setInterval()</code> グローバル関数を、<a href="/ja/docs/JavaScript/Reference/Global_Objects/Function/call"><code>Function.prototype.call</code></a> メソッドを通して呼び出すことが可能な <em>非ネイティブ</em> メソッドに置き換える方法が考えられます。考えられる置き換え方法の例を以下に示します:</p>
+
+<pre class="brush:js notranslate">// Enable the passage of the 'this' object through the JavaScript timers
+
+var __nativeST__ = window.setTimeout, __nativeSI__ = window.setInterval;
+
+window.setTimeout = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) {
+  var oThis = this, aArgs = Array.prototype.slice.call(arguments, 2);
+  return __nativeST__(vCallback instanceof Function ? function () {
+    vCallback.apply(oThis, aArgs);
+  } : vCallback, nDelay);
+};
+
+window.setInterval = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) {
+  var oThis = this, aArgs = Array.prototype.slice.call(arguments, 2);
+  return __nativeSI__(vCallback instanceof Function ? function () {
+    vCallback.apply(oThis, aArgs);
+  } : vCallback, nDelay);
+};</pre>
+
+<div class="note">これら 2 つの置き換えにより、IE のタイマーで HTML5 標準の、コールバック関数に任意の引数を渡すことも可能になります。よって、<em>標準仕様に準拠しない</em> ポリフィルとしても使用できます。<em>標準仕様に準拠する</em>ポリフィルについては、<a href="#Callback_arguments">コールバックの引数</a> をご覧ください。</div>
+
+<p>新機能のテスト:</p>
+
+<pre class="brush:js notranslate">myArray = ['zero', 'one', 'two'];
+
+myArray.myMethod = function (sProperty) {
+    alert(arguments.length &gt; 0 ? this[sProperty] : this);
+};
+
+setTimeout(alert, 1500, 'Hello world!'); // the standard use of setTimeout and setInterval is preserved, but...
+setTimeout.call(myArray, myArray.myMethod, 2000); // prints "zero,one,two" after 2 seconds
+setTimeout.call(myArray, myArray.myMethod, 2500, 2); // prints "two" after 2,5 seconds
+</pre>
+
+<p>この他に <a href="/ja/docs/Web/JavaScript/Reference/Operators/this"><code>this</code></a> 問題のより複雑な解決策として、<a href="#A_little_framework">後述するフレームワーク</a> もあります。</p>
+
+<div class="note">JavaScript 1.8.5 で、関数のすべての呼び出しで <code>this</code> として使用する値を設定できる、<code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Function/bind">Function.prototype.bind()</a></code> メソッドを導入しました。これにより、関数を呼び出したコンテキストに応じて this がどのようになるかが明確にならない問題を簡単に回避できます。また、ES2015 では <a href="/ja/docs/Web/JavaScript/Reference/Functions/Arrow_functions">アロー関数</a> をサポートして、字句 this と組み合わせると myArray の内部では setInterval( () =&gt; this.myMethod) と記述できます。</div>
+
+<h2 id="MiniDaemon_-_A_framework_for_managing_timers" name="MiniDaemon_-_A_framework_for_managing_timers">MiniDaemon: タイマー管理フレームワーク</h2>
+
+<p>多くのタイマーが必要なページでは、実行中のタイマーのイベントをすべて追跡し続けることが困難な場合があります。この問題の解決策のひとつが、オブジェクト内のタイマーの状態に関する情報を保存することです。以下のコードは、そのような抽象化の最小限の例です。コンストラクターは、クロージャの使用を明示的に避けるアーキテクチャになっています。また、<a href="/ja/docs/Web/JavaScript/Reference/Operators/this"><code>this</code></a> オブジェクトをコールバック関数に渡す代替手段も提供します (詳しくは <a href="#The_.22this.22_problem">"this" 問題</a> をご覧ください)。以下のコードは <a href="https://github.com/madmurphy/minidaemon.js">GitHub でも入手できます</a>。</p>
+
+<div class="note">より複雑ですがモジュール化したもの (<code><em>Daemon</em></code>) については、<a href="/ja/Add-ons/Code_snippets/Timers/Daemons">JavaScript Daemons Management</a> をご覧ください。このより複雑なバージョンは、<code><em>Daemon</em></code> コンストラクター用の大規模でスケーラブルなメソッドのコレクションに過ぎません。しかし <code><em>Daemon</em></code> コンストラクター自体は、<code><em>daemon</em></code> のインスタンス化の間に宣言可能な <em>init</em> および <em>onstart</em> 関数のサポートを追加した <code><em>MiniDaemon</em></code> のクローンに過ぎません。<strong>よって <code><em>MiniDaemon</em></code> フレームワークは、シンプルなアニメーションのために推奨する方法であり続けます。</strong>これは、メソッドのコレクションがない <code><em>Daemon</em></code> が本質的に <code><em>MiniDaemon</em></code> のクローンであるためです。</div>
+
+<h3 id="minidaemon.js" name="minidaemon.js">minidaemon.js</h3>
+
+<pre class="brush:js notranslate">/*\
+|*|
+|*|  :: MiniDaemon ::
+|*|
+|*|  Revision #2 - September 26, 2014
+|*|
+|*|  https://developer.mozilla.org/en-US/docs/Web/API/window.setInterval
+|*|  https://developer.mozilla.org/User:fusionchess
+|*|  https://github.com/madmurphy/minidaemon.js
+|*|
+|*|  This framework is released under the GNU Lesser General Public License, version 3 or later.
+|*|  http://www.gnu.org/licenses/lgpl-3.0.html
+|*|
+\*/
+
+function MiniDaemon (oOwner, fTask, nRate, nLen) {
+  if (!(this &amp;&amp; this instanceof MiniDaemon)) { return; }
+  if (arguments.length &lt; 2) { throw new TypeError('MiniDaemon - not enough arguments'); }
+  if (oOwner) { this.owner = oOwner; }
+  this.task = fTask;
+  if (isFinite(nRate) &amp;&amp; nRate &gt; 0) { this.rate = Math.floor(nRate); }
+  if (nLen &gt; 0) { this.length = Math.floor(nLen); }
+}
+
+MiniDaemon.prototype.owner = null;
+MiniDaemon.prototype.task = null;
+MiniDaemon.prototype.rate = 100;
+MiniDaemon.prototype.length = Infinity;
+
+  /* These properties should be read-only */
+
+MiniDaemon.prototype.SESSION = -1;
+MiniDaemon.prototype.INDEX = 0;
+MiniDaemon.prototype.PAUSED = true;
+MiniDaemon.prototype.BACKW = true;
+
+  /* Global methods */
+
+MiniDaemon.forceCall = function (oDmn) {
+  oDmn.INDEX += oDmn.BACKW ? -1 : 1;
+  if (oDmn.task.call(oDmn.owner, oDmn.INDEX, oDmn.length, oDmn.BACKW) === false || oDmn.isAtEnd()) { oDmn.pause(); return false; }
+  return true;
+};
+
+  /* Instances methods */
+
+MiniDaemon.prototype.isAtEnd = function () {
+  return this.BACKW ? isFinite(this.length) &amp;&amp; this.INDEX &lt; 1 : this.INDEX + 1 &gt; this.length;
+};
+
+MiniDaemon.prototype.synchronize = function () {
+  if (this.PAUSED) { return; }
+  clearInterval(this.SESSION);
+  this.SESSION = setInterval(MiniDaemon.forceCall, this.rate, this);
+};
+
+MiniDaemon.prototype.pause = function () {
+  clearInterval(this.SESSION);
+  this.PAUSED = true;
+};
+
+MiniDaemon.prototype.start = function (bReverse) {
+  var bBackw = Boolean(bReverse);
+  if (this.BACKW === bBackw &amp;&amp; (this.isAtEnd() || !this.PAUSED)) { return; }
+  this.BACKW = bBackw;
+  this.PAUSED = false;
+  this.synchronize();
+};
+</pre>
+
+<div class="note">MiniDaemon は、引数をコールバック関数に渡します。この機能をネイティブにサポートしないブラウザーで動作させたい場合は、ここで提案したメソッドのいずれかを使用してください。</div>
+
+<h3 id="Syntax_2" name="Syntax_2">構文</h3>
+
+<p><code>var myDaemon = new MiniDaemon(<em>thisObject</em>, <em>callback</em>[</code><code>, <em>rate</em></code><code>[, <em>length</em>]]);</code></p>
+
+<h3 id="Description" name="Description">説明</h3>
+
+<p>アニメーションで必要なすべての情報 (<a href="/ja/docs/Web/JavaScript/Reference/Operators/this"><code>this</code></a> オブジェクト、コールバック関数、長さ、フレームレート) を持つ JavaScript <a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Object"><code>Object</code></a> を返します。</p>
+
+<h4 id="Parameters_2" name="Parameters_2">引数</h4>
+
+<dl>
+ <dt><code>thisObject</code></dt>
+ <dd><em>コールバック</em>関数が呼び出された <a href="/ja/docs/Web/JavaScript/Reference/Operators/this"><code>this</code></a> オブジェクト。<a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Object"><code>object</code></a> または <code>null</code> を使用できます。</dd>
+ <dt><code>callback</code></dt>
+ <dd>繰り返し実行する関数。<strong>これは 3 個の引数を伴って呼び出されます</strong>。<em>index</em> (反復処理の、毎回の処理のインデックス)、<em>length</em> (<em>daemon</em> に割り当てられた総実行回数。有限の数値または <a href="/ja/docs/JavaScript/Reference/Global_Objects/Infinity"><code>Infinity</code></a> を指定できます)、<em>backwards</em> (<em>index</em> を加算するか減算するかを示す論理値)。これは <em>callback</em>.call(<em>thisObject</em>, <em>index</em>, <em>length</em>, <em>backwards</em>) のようなものです。<strong>コールバック関数が <code>false</code> 値を返す場合は、<em>daemon</em> が一時停止しています</strong>。</dd>
+ <dt><code>rate (省略可能)</code></dt>
+ <dd>毎回の実行の時間間隔 (ミリ秒単位の数値)。デフォルト値は 100 です。</dd>
+ <dt><code>length (省略可能)</code></dt>
+ <dd>総実行回数。正の整数または <a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Infinity"><code>Infinity</code></a> を使用できます。デフォルト値は <code>Infinity</code> です。</dd>
+</dl>
+
+<h4 id="MiniDaemon_instances_properties" name="MiniDaemon_instances_properties"><code>MiniDaemon</code> インスタンスのプロパティ</h4>
+
+<dl>
+ <dt><code>myDaemon.owner</code></dt>
+ <dd>daemon が実行される <a href="/ja/docs/Web/JavaScript/Reference/Operators/this"><code>this</code></a> オブジェクト (読み書き可能)。<a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Object"><code>object</code></a> または <code>null</code> を使用できます。</dd>
+ <dt><code>myDaemon.task</code></dt>
+ <dd>繰り返し実行する関数 (読み書き可能)。これは 3 個の引数を伴って呼び出されます。<em>index</em> (反復処理の、毎回の処理のインデックス)、<em>length</em> (daemon に割り当てられた総実行回数。有限の数値または <a href="/ja/docs/JavaScript/Reference/Global_Objects/Infinity"><code>Infinity</code></a> を指定できます)、<em>backwards</em> (<em>index</em> 減算するか否かを示す論理値)。<code>myDaemon.task</code> の関数が <code>false</code> 値を返す場合は、<em>daemon</em> が一時停止しています。</dd>
+ <dt><code>myDaemon.rate</code></dt>
+ <dd>毎回の実行の時間間隔 (ミリ秒単位の数値、読み書き可能)。</dd>
+ <dt><code>myDaemon.length</code></dt>
+ <dd>総実行回数。正の整数または <a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Infinity"><code>Infinity</code></a> を使用できます (読み書き可能)。</dd>
+</dl>
+
+<h4 id="MiniDaemon_instances_methods" name="MiniDaemon_instances_methods"><code>MiniDaemon</code> インスタンスのメソッド</h4>
+
+<dl>
+ <dt><code>myDaemon.isAtEnd()</code></dt>
+ <dd><em>daemon</em> が開始/終了状態であるか否かを示す論理値を返します。</dd>
+ <dt><code>myDaemon.synchronize()</code></dt>
+ <dd>開始した daemon のタイマーと、daemon の実行時間を同期します。</dd>
+ <dt><code>myDaemon.pause()</code></dt>
+ <dd>daemon を一時停止します。</dd>
+ <dt><code>myDaemon.start([<em>reverse</em>])</code></dt>
+ <dd>daemon を前方 (毎回実行するたびに <em>index</em> が増加) または後方 (<em>index</em> が減少) に開始します。</dd>
+</dl>
+
+<h4 id="MiniDaemon_global_object_methods" name="MiniDaemon_global_object_methods"><code>MiniDaemon</code> グローバルオブジェクトのメソッド</h4>
+
+<dl>
+ <dt><code>MiniDaemon.forceCall(<em>minidaemon</em>)</code></dt>
+ <dd>終端に達しているか否かの事実にかかわらず、<code><em>minidaemon</em>.task</code> の関数へのひとつのコールバックを強制します。どの場合も、内部の <code>INDEX</code> プロパティは (実際の実行方向に応じて) 増加または減少します。</dd>
+</dl>
+
+<h3 id="Example_usage" name="Example_usage">使用例</h3>
+
+<p>HTML ページ:</p>
+
+<pre class="brush:html notranslate">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+  &lt;meta charset="UTF-8" /&gt;
+  &lt;title&gt;MiniDaemin Example - MDN&lt;/title&gt;
+  &lt;script type="text/javascript" src="minidaemon.js"&gt;&lt;/script&gt;
+  &lt;style type="text/css"&gt;
+    #sample_div {
+      visibility: hidden;
+    }
+  &lt;/style&gt;
+&lt;/head&gt;
+
+&lt;body&gt;
+  &lt;p&gt;
+    &lt;input type="button" onclick="fadeInOut.start(false /* optional */);" value="fade in" /&gt;
+    &lt;input type="button" onclick="fadeInOut.start(true);" value="fade out"&gt;
+    &lt;input type="button" onclick="fadeInOut.pause();" value="pause" /&gt;
+  &lt;/p&gt;
+
+  &lt;div id="sample_div"&gt;Some text here&lt;/div&gt;
+
+  &lt;script type="text/javascript"&gt;
+    function opacity (nIndex, nLength, bBackwards) {
+      this.style.opacity = nIndex / nLength;
+      if (bBackwards ? nIndex === 0 : nIndex === 1) {
+        this.style.visibility = bBackwards ? 'hidden' : 'visible';
+      }
+    }
+
+    var fadeInOut = new MiniDaemon(document.getElementById('sample_div'), opacity, 300, 8);
+  &lt;/script&gt;
+&lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p><a href="/files/3995/minidaemon_example.html" title="MiniDaemon Example">実際の動作例を見る</a></p>
+
+<h2 id="Notes" name="Notes">注記</h2>
+
+<p><code>setInterval()</code> 関数は一般に、アニメーションのように何度も実行される関数に遅延をセットするのに使われます。</p>
+
+<p>{{domxref("WindowOrWorkerGlobalScope.clearInterval()")}} を使ってインターバルをキャンセルすることができます。</p>
+
+<p>指定時間後に <em>一度</em> だけ関数を呼び出したい場合には、{{domxref("WindowOrWorkerGlobalScope.setTimeout()")}} を使います。</p>
+
+<h3 id="Ensure_that_execution_duration_is_shorter_than_interval_frequency" name="Ensure_that_execution_duration_is_shorter_than_interval_frequency">実行時間をインターバルより確実に短くする</h3>
+
+<p>ロジックの実行時間がインターバル時間より長くなる可能性がある場合は、{{domxref("WindowOrWorkerGlobalScope.setTimeout")}} を使用して名前付き関数を再帰的に呼び出すことを推奨します。例えば 5 秒おきにリモートサーバーへ接続するために <code>setInterval</code> を使用するとき、ネットワークの遅延やサーバーの不応答などさまざまな問題で、割り当てられた時間内にリクエストが完了しない可能性があります。そのため、必ずしも順番どおりには返らない XHR リクエストがキュー内にあることに気づくかもしれません。</p>
+
+<p>この場合は、再帰的な <code>setTimeout()</code> のパターンを推奨します:</p>
+
+<pre class="brush:js notranslate">(function loop(){
+   setTimeout(function() {
+      // Your logic here
+
+      loop();
+  }, delay);
+})();
+</pre>
+
+<p>このコードスニペットでは、名前付き関数 <code>loop()</code> を宣言して直ちに実行します。<code>loop()</code> はロジックが完全に実行された後に、内部の <code>setTimeout()</code> によって再帰呼び出しされます。このパターンは一定の間隔で呼び出すことが保証されませんが、再帰呼び出しの前に前の実行が完了することが保証されます。</p>
+
+<h3 id="Throttling_of_intervals" name="Throttling_of_intervals">インターバルを抑制する</h3>
+
+<p>Firefox で <code>setInterval()</code> は、{{domxref("WindowOrWorkerGlobalScope.setTimeout","setTimeout()")}} と同様に、インターバルが制限されます。<a href="/ja/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout#Reasons_for_delays_longer_than_specified">遅延が指定値より長い理由</a> をご覧ください。</p>
+
+<h2 id="Specifications" name="Specifications">仕様</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>仕様書</th>
+   <th>策定状況</th>
+   <th>コメント</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'webappapis.html#dom-setinterval', 'WindowOrWorkerGlobalScope.setInterval()')}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td>最新の仕様で、メソッドを <code>WindowOrWorkerGlobalScope</code> ミックスインに移動。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML WHATWG", "webappapis.html#dom-setinterval", "WindowTimers.setInterval()")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td>最初期の定義 (DOM Level 0)</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザー実装状況</h2>
+
+<div>
+
+
+<p>{{Compat("api.WindowOrWorkerGlobalScope.setInterval")}}</p>
+</div>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/Add-ons/Code_snippets/Timers">JavaScript timers</a></li>
+ <li>{{domxref("WindowOrWorkerGlobalScope.setTimeout")}}</li>
+ <li>{{domxref("WindowOrWorkerGlobalScope.clearTimeout")}}</li>
+ <li>{{domxref("WindowOrWorkerGlobalScope.clearInterval")}}</li>
+ <li>{{domxref("window.requestAnimationFrame")}}</li>
+ <li><a href="/ja/Add-ons/Code_snippets/Timers/Daemons"><em>Daemons</em> management</a></li>
+</ul>
diff --git a/files/ja/web/api/settimeout/index.html b/files/ja/web/api/settimeout/index.html
new file mode 100644
index 0000000000..865c4679a6
--- /dev/null
+++ b/files/ja/web/api/settimeout/index.html
@@ -0,0 +1,420 @@
+---
+title: WindowOrWorkerGlobalScope.setTimeout()
+slug: Web/API/setTimeout
+tags:
+  - API
+  - HTML DOM
+  - Intervals
+  - JavaScript timers
+  - MakeBrowserAgnostic
+  - Method
+  - NeedsCompatTable
+  - NeedsMarkupWork
+  - NeedsUpdate
+  - Reference
+  - Timers
+  - WindowOrWorkerGlobalScope
+  - setTimeout
+translation_of: Web/API/WindowOrWorkerGlobalScope/setTimeout
+original_slug: Web/API/WindowOrWorkerGlobalScope/setTimeout
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p><strong><code>setTimeout()</code></strong> は {{domxref("WindowOrWorkerGlobalScope")}} ミックスインのメソッド (および <code>Window.setTimeout()</code> の後継) で、時間切れになると関数または指定されたコードの断片を実行するタイマーを設定します。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox">var <var>timeoutID</var> = <var>scope</var>.setTimeout(<var>function</var>[, <var>delay</var>, <var>arg1</var>, <var>arg2</var>, ...]);
+var <var>timeoutID</var> = <var>scope</var>.setTimeout(<var>function</var>[, <var>delay</var>]);
+var <var>timeoutID</var> = <var>scope</var>.setTimeout(<var>code</var>[, <var>delay</var>]);
+</pre>
+
+<h3 id="Parameters" name="Parameters">引数</h3>
+
+<dl>
+ <dt><code><var>function</var></code></dt>
+ <dd>タイマーが満了した後に実行したい {{jsxref("function", "関数")}}。</dd>
+ <dt><code><var>code</var></code></dt>
+ <dd>関数の代わりに文字列を含める代替構文も許容されており、タイマーが満了したときに文字列をコンパイルして実行します。 {{jsxref("Global_Objects/eval", "eval()")}} の使用にリスクがあるのと同じ理由で、この構文は<strong>推奨しません</strong>。</dd>
+ <dt><code><var>delay</var></code> {{optional_inline}}</dt>
+ <dd>指定した関数やコードを実行する前に待つタイマーの時間をミリ秒 (1/1000 秒) 単位で指定します。この引数を省略すると値 0 を使用しますので "直ちに" 実行する、より正確に言えばできるだけ早く実行することを意味します。どちらの場合も、実際の遅延が想定より長くなることがあります。後述する {{anch("Reasons for delays longer than specified", "遅延が指定値より長い理由")}} をご覧ください。</dd>
+ <dt><code><var>arg1</var>, ..., <var>argN</var></code> {{optional_inline}}</dt>
+ <dd>タイマーが満了したときに、 <code><var>function</var></code> で指定された関数に渡す追加の引数です。</dd>
+</dl>
+
+<div class="note">
+<p><strong>注</strong>: Internet Explorer 9 およびそれ以前のバージョンでは、最初の構文で関数に渡す追加の引数は動作しないことに注意してください。同様の機能を実現させるには、ポリフィルを使用してください。({{anch("Polyfill", "ポリフィル")}} を参照)。</p>
+</div>
+
+<h3 id="Return_value" name="Return_value">返値</h3>
+
+<p>返される <code><var>timeoutID</var></code> は正の整数値で、 <code>setTimeout()</code> を呼び出して作成したタイマーを識別します。この値を {{domxref("WindowOrWorkerGlobalScope.clearTimeout","clearTimeout()")}} へ渡すことで、タイムアウトを取り消すことができます。</p>
+
+<p><code>setTimeout()</code> と {{domxref("WindowOrWorkerGlobalScope.setInterval", "setInterval()")}} は同じ ID プールを共有しており、さらに <code>clearTimeout()</code> と {{domxref("WindowOrWorkerGlobalScope.clearInterval", "clearInterval()")}} は技術的に入れ替えて使用できることを意識すると役に立つかもしれません。ただし明確さのために、コードを整備するときは混乱を避けるため、常に一致させるようにするべきです。</p>
+
+<p>同じオブジェクト (ウィンドウやワーカー) では、後に <code>setTimeout()</code> や <code>setInterval()</code> を呼び出しても タイムアウト ID を再使用しないことが保証されています。ただし、別なオブジェクトでは別の ID プールを使用します。</p>
+
+<h2 id="Example" name="Example">例</h2>
+
+<p>以下の例はウェブページに 2 つのシンプルなボタンを置いており、<code>setTimeout()</code> および <code>clearTimeout()</code> のルーチンを実行します。1 番目のボタンを押下すると 2 秒後にアラートダイアログを呼び出すタイムアウトを設定して、<code>clearTimeout()</code> で使用するタイムアウト ID を保存します。2 番目のボタンを押下すると、このタイムアウトをキャンセルできます。</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;Live Example&lt;/p&gt;
+&lt;button onclick="delayedAlert();"&gt;2秒後にアラートボックスを表示する&lt;/button&gt;
+&lt;p&gt;&lt;/p&gt;
+&lt;button onclick="clearAlert();"&gt;アラートを事前にキャンセルする&lt;/button&gt;
+</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">var timeoutID;
+
+function delayedAlert() {
+  timeoutID = window.setTimeout(window.alert, 2*1000, '本当に遅い！');
+}
+
+function clearAlert() {
+  window.clearTimeout(timeoutID);
+}
+</pre>
+
+<h3 id="Result" name="Result">結果</h3>
+
+<p>{{EmbedLiveSample('Example')}}</p>
+
+<p><a href="/ja/docs/Web/API/WindowTimers/clearTimeout#Example"><code>clearTimeout()</code> の例</a> もご覧ください。</p>
+
+<h2 id="Polyfill" name="Polyfill">ポリフィル</h2>
+
+<p>コールバック関数に 1 つ以上の引数を渡す必要があるが、<code>setTimeout()</code> や <code>setInterval()</code> を使用して追加の引数を渡す機能に対応していないブラウザー (例えば Internet Explorer 9 以前) で動作しなければならない場合は、HTML5 標準の引数渡し機能を可能にする以下のポリフィルを追加するとよいでしょう。このコードをスクリプトの先頭に追加してください。</p>
+
+<pre class="brush: js">/*\
+|*|
+|*|  Polyfill which enables the passage of arbitrary arguments to the
+|*|  callback functions of JavaScript timers (HTML5 standard syntax).
+|*|
+|*|  https://developer.mozilla.org/en-US/docs/DOM/window.setInterval
+|*|
+|*|  Syntax:
+|*|  var timeoutID = window.setTimeout(func, delay[, arg1, arg2, ...]);
+|*|  var timeoutID = window.setTimeout(code, delay);
+|*|  var intervalID = window.setInterval(func, delay[, arg1, arg2, ...]);
+|*|  var intervalID = window.setInterval(code, delay);
+|*|
+\*/
+
+(function() {
+  setTimeout(function(arg1) {
+    if (arg1 === 'test') {
+      // feature test is passed, no need for polyfill
+      return;
+    }
+    var __nativeST__ = window.setTimeout;
+    window.setTimeout = function(vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */ ) {
+      var aArgs = Array.prototype.slice.call(arguments, 2);
+      return __nativeST__(vCallback instanceof Function ? function() {
+        vCallback.apply(null, aArgs);
+      } : vCallback, nDelay);
+    };
+  }, 0, 'test');
+
+  var interval = setInterval(function(arg1) {
+    clearInterval(interval);
+    if (arg1 === 'test') {
+      // feature test is passed, no need for polyfill
+      return;
+    }
+    var __nativeSI__ = window.setInterval;
+    window.setInterval = function(vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */ ) {
+      var aArgs = Array.prototype.slice.call(arguments, 2);
+      return __nativeSI__(vCallback instanceof Function ? function() {
+        vCallback.apply(null, aArgs);
+      } : vCallback, nDelay);
+    };
+  }, 0, 'test');
+}())
+</pre>
+
+<h3 id="IE-only_fix" name="IE-only_fix">IE 限定の修正</h3>
+
+<p>IE 9 およびそれ以前を含む、他のすべてのモバイルブラウザーやデスクトップブラウザーで完全に目立たない修正が必要である場合は、以下の JavaScript 条件付きコメントを使用できます。</p>
+
+<pre class="brush: js">/*@cc_on
+  // conditional IE &lt; 9 only fix
+  @if (@_jscript_version &lt;= 9)
+  (function(f){
+     window.setTimeout = f(window.setTimeout);
+     window.setInterval = f(window.setInterval);
+  })(function(f){return function(c,t){var a=[].slice.call(arguments,2);return f(function(){c instanceof Function?c.apply(this,a):eval(c)},t)}});
+  @end
+@*/
+</pre>
+
+<p>あるいは IE の HTML 条件機能による、とてもクリーンな方法を使用します:</p>
+
+<pre class="brush: html">&lt;!--[if lte IE 9]&gt;&lt;script&gt;
+(function(f){
+window.setTimeout=f(window.setTimeout);
+window.setInterval=f(window.setInterval);
+})(function(f){return function(c,t){
+var a=[].slice.call(arguments,2);return f(function(){c instanceof Function?c.apply(this,a):eval(c)},t)}
+});
+&lt;/script&gt;&lt;![endif]--&gt;
+</pre>
+
+<h3 id="Workarounds" name="Workarounds">回避策</h3>
+
+<p>もうひとつの方法は、コールバックに無名関数を使用することです。ただし、この方法は少し多くコストがかかります。例:</p>
+
+<pre class="brush: js">var intervalID = setTimeout(function() { myFunc('one', 'two', 'three'); }, 1000);
+</pre>
+
+<p>上記の例は、<a href="/ja/docs/Web/JavaScript/Reference/Functions/Arrow_functions">アロー関数</a> を使用して以下のように記述できます。</p>
+
+<pre class="brush: js">var intervalID = setTimeout(() =&gt; { myFunc('one', 'two', 'three'); }, 1000);
+</pre>
+
+<p>さらに、<a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Function/bind">関数の <code>bind</code></a> を使用する方法もあります。例:</p>
+
+<pre class="brush: js">setTimeout(function(arg1){}.bind(undefined, 10), 1000);
+</pre>
+
+<h2 id="The_this_problem" name="The_this_problem">"this" 問題</h2>
+
+<p><code>setTimeout()</code> にメソッド (そういうことならほかの関数も) を渡すとき、コードが実行される際の <code>this</code> の値が想定とは異なるかもしれません。この問題は <a href="/ja/docs/Web/JavaScript/Reference/Operators/this#As_an_object_method">JavaScript リファレンス</a> でより詳細に説明されています。</p>
+
+<h3 id="Explanation" name="Explanation">説明</h3>
+
+<p><code>setTimeout()</code> によって実行されるコードは、 <code>setTimeout</code> が呼び出された関数とは別の実行コンテキスト内から呼び出されます。呼び出された関数に <code>this</code> キーワードを設定する通常の規則を適用して、呼び出しあるいは <code>bind</code> で <code>this</code> を設定しなければ、非 strict モードでは <code>global</code> (または <code>window</code>)、strict モードでは undefined になります。これは、<code>setTimeout</code> が呼び出された関数の <code>this</code> 値と同じにはなりません。</p>
+
+<div class="note">
+<p><strong>注:</strong> <code>setTimeout</code> コールバックの既定の <code>this</code> の値は、厳格モードであっても <code>undefined</code> ではなく、 <code>window</code> オブジェクトです。</p>
+</div>
+
+<p>以下の例をご覧ください。</p>
+
+<pre class="brush: js">myArray = ['zero', 'one', 'two'];
+myArray.myMethod = function (sProperty) {
+  alert(arguments.length &gt; 0 ? this[sProperty] : this);
+};
+
+myArray.myMethod(); // prints "zero,one,two"
+myArray.myMethod(1); // prints "one"</pre>
+
+<p><code>myMethod</code> を呼び出したときに、呼び出しによって <code>this</code> が <code>myArray</code> に設定されますので、関数内で <code>this[sProperty]</code> は <code>myArray[sProperty]</code> と等価です。しかし、以下のコードでは動作が異なります。</p>
+
+<pre class="brush: js">setTimeout(myArray.myMethod, 1.0*1000); // 1秒後に "[object Window]" と表示
+setTimeout(myArray.myMethod, 1.5*1000, '1'); // 1.5秒後に "undefined" と表示</pre>
+
+<p><code>myArray.myMethod</code> 関数を <code>setTimeout</code> に渡しており、関数が呼び出されると <code>this</code> が前のように設定されず、既定値の <code>window</code> オブジェクトになります。Array の forEach や reduce などのメソッドにあるような、<code>thisArg</code> を setTimeout に渡すオプションもありません。また以下のように、<code>this</code> を設定するために <code>call</code> を使用する方法も動作しません。</p>
+
+<pre class="brush: js">setTimeout.call(myArray, myArray.myMethod, 2.0*1000); // error: "NS_ERROR_XPC_BAD_OP_ON_WN_PROTO: Illegal operation on WrappedNative prototype object"
+setTimeout.call(myArray, myArray.myMethod, 2.5*1000, 2); // same error
+</pre>
+
+<h3 id="Possible_solutions" name="Possible_solutions">考えられる解決策</h3>
+
+<p>この問題の一般的な解決策は、<code>this</code> に必要な値を設定するラッパー関数を使用することです:</p>
+
+<pre class="brush: js">setTimeout(function(){myArray.myMethod()}, 2.0*1000); // prints "zero,one,two" after 2 seconds
+setTimeout(function(){myArray.myMethod('1')}, 2.5*1000); // prints "one" after 2.5 seconds</pre>
+
+<p>代わりにアロー関数も使用できます。</p>
+
+<pre class="brush: js">setTimeout(() =&gt; {myArray.myMethod()}, 2.0*1000); // prints "zero,one,two" after 2 seconds
+setTimeout(() =&gt; {myArray.myMethod('1')}, 2.5*1000); // prints "one" after 2.5 seconds</pre>
+
+<p>他に考えられる "<code>this</code>" 問題の解決策として、本来の <code>setTimeout()</code> および <code>setInterval()</code> グローバル関数を、<code>this</code> オブジェクトを渡せるようにして、コールバックで <a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Function/call"><code>Function.prototype.call</code></a> を使用して設定するように置き換える方法があります。例えば:</p>
+
+<pre class="brush: js">// Enable setting 'this' in JavaScript timers
+
+var __nativeST__ = window.setTimeout,
+    __nativeSI__ = window.setInterval;
+
+window.setTimeout = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) {
+  var oThis = this,
+      aArgs = Array.prototype.slice.call(arguments, 2);
+  return __nativeST__(vCallback instanceof Function ? function () {
+    vCallback.apply(oThis, aArgs);
+  } : vCallback, nDelay);
+};
+
+window.setInterval = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) {
+  var oThis = this,
+      aArgs = Array.prototype.slice.call(arguments, 2);
+  return __nativeSI__(vCallback instanceof Function ? function () {
+    vCallback.apply(oThis, aArgs);
+  } : vCallback, nDelay);
+};</pre>
+
+<div class="note"><strong>注</strong>: これら 2 つの置き換えにより、IE のタイマーで HTML5 標準の、コールバック関数に任意の引数を渡すことも可能になります。よって、ポリフィルとしても使用できます。<a href="#Callback_arguments">Callback arguments</a> の節をご覧ください。</div>
+
+<p>新機能のテスト:</p>
+
+<pre class="brush: js">myArray = ['zero', 'one', 'two'];
+myArray.myMethod = function (sProperty) {
+    alert(arguments.length &gt; 0 ? this[sProperty] : this);
+};
+
+setTimeout(alert, 1500, 'Hello world!'); // the standard use of setTimeout and setInterval is preserved, but...
+setTimeout.call(myArray, myArray.myMethod, 2.0*1000); // prints "zero,one,two" after 2 seconds
+setTimeout.call(myArray, myArray.myMethod, 2.5*1000, 2); // prints "two" after 2.5 seconds
+</pre>
+
+<div class="note"><strong>注</strong>: JavaScript 1.8.5 で、関数のすべての呼び出しに対して <code>this</code> の値を設定する <code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Function/bind">Function.prototype.bind()</a></code> メソッドを導入しました。これにより、コールバックで <code>this</code> の値を設定するためにラッパー関数を使用しなければならない状況を回避できます。</div>
+
+<p><code>bind()</code> の使用例:</p>
+
+<pre class="brush: js">myArray = ['zero', 'one', 'two'];
+myBoundMethod = (function (sProperty) {
+    console.log(arguments.length &gt; 0 ? this[sProperty] : this);
+}).bind(myArray);
+
+myBoundMethod(); // prints "zero,one,two" because 'this' is bound to myArray in the function
+myBoundMethod(1); // prints "one"
+setTimeout(myBoundMethod, 1.0*1000); // still prints "zero,one,two" after 1 second because of the binding
+setTimeout(myBoundMethod, 1.5*1000, "1"); // prints "one" after 1.5 seconds
+</pre>
+
+<h2 id="Notes" name="Notes">注</h2>
+
+<p>タイムアウトは {{domxref("WindowOrWorkerGlobalScope.clearTimeout","clearTimeout()")}} を使って中止することができます。</p>
+
+<p>もし関数を繰返し (例えば、 N ミリ秒ごとに) 呼び出したいなら、 {{domxref("WindowOrWorkerGlobalScope.setInterval()","setInterval()")}} を使うことを検討してください。</p>
+
+<h3 id="Passing_string_literals" name="Passing_string_literals">文字列リテラルの使用</h3>
+
+<p>関数の代わりに文字列を <code>setTimeout()</code> に渡すと、<code><a href="/ja/docs/JavaScript/Reference/Global_Objects/eval#Don.27t_use_eval.21">eval</a> を使うのと同様の問題が発生します。</code></p>
+
+<pre class="brush: js">// 推奨
+window.setTimeout(function() {
+  alert('Hello World!');
+}, 500);
+
+// 非推奨
+window.setTimeout("alert('Hello World!');", 500);
+</pre>
+
+<p><code>setTimeout</code> に渡した文字列はグローバルコンテキストで評価されます。そのため、<code>setTimeout()</code> が呼び出されたコンテキストのローカルシンボルは、文字列を評価したコードからは利用できません。</p>
+
+<h3 id="Reasons_for_delays_longer_than_specified" name="Reasons_for_delays_longer_than_specified">遅延が指定値より長い理由</h3>
+
+<p>タイムアウトが満了するまでに予想より長い時間がかかる理由は複数あります。このセクションでは、もっとも一般的な理由を説明します。</p>
+
+<h4 id="Timeouts_throttled_to_≥_4ms" name="Timeouts_throttled_to_≥_4ms">タイムアウトを 4ms 以上に制限する</h4>
+
+<p>現代のブラウザーは、<code>setTimeout()</code> や {{domxref("WindowOrworkerGlobalScope.setInterval","setInterval()")}} がコールバックのネスト (ネストの深さが少なくとも数段階ある) によって連続的に呼び出された、あるいは連続的なインターバルが数回発生した後に呼び出されたときに、少なくとも 4 ミリ秒ごとに呼び出されるように制限をかけます。例えば:</p>
+
+<pre class="brush: js">function cb() { f(); setTimeout(cb, 0); }
+setTimeout(cb, 0);
+setInterval(f, 0);</pre>
+
+<p>Chrome および Firefox では、5 回目の連続的なコールバックの呼び出しで制限をかけます。また Safar は 6 回目、Edge は 3 回目で制限をかけます。Gecko は <a href="/ja/docs/Mozilla/Firefox/Releases/56">バージョン 56</a> で、<code>setInterval()</code> で制限を始めました (後述のとおり <code>setTimeout()</code> は以前から行っていました)。</p>
+
+<p><a href="http://code.google.com/p/chromium/issues/detail?id=792#c10">歴史的に</a> 一部のブラウザー (例えば Firefox) は、あらゆる場所から呼び出された <code>setInterval()</code>、あるいはネストの深さが少なくとも数段階ある <code>setTimeout()</code> が呼び出されたときの制限を、若干異なる動作で実装しています。。</p>
+
+<p>0 ms タイマーをモダンブラウザーで実装するには、<a href="http://dbaron.org/log/20100309-faster-timeouts">ここで説明されている</a> {{domxref("window.postMessage()")}} を利用できます。</p>
+
+<div class="note">
+<p><strong>注</strong>: 最小遅延である <code>DOM_MIN_TIMEOUT_VALUE</code> は 4 ms (Firefox の <code>dom.min_timeout_value</code> の設定に保存されています) であり、<code>DOM_CLAMP_TIMEOUT_NESTING_LEVEL</code> は 5 です。</p>
+</div>
+
+<div class="note">
+<p><strong>注</strong>: 4 ms は <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/timers.html#timers">HTML5 の仕様で標準化されています</a>。 そして、2010 年以降にリリースされたブラウザー間で一貫しています。{{geckoRelease("5.0")}} 以前では、ネストされた setTimeout の最小値は 10 ms でした。</p>
+</div>
+
+<h4 id="Timeouts_in_inactive_tabs_throttled_to_≥_1000ms" name="Timeouts_in_inactive_tabs_throttled_to_≥_1000ms">非アクティブタブのタイムアウトは 1000 ms 以上に制限される</h4>
+
+<p>バックグラウンドのタブによる負荷 (およびバッテリー消費) を軽減するため、アクティブ状態でないタブでのタイマーの呼び出しは、1 秒 (1,000 ms) あたり 1 回までとなります。</p>
+
+<p>Firefox はこの動作をバージョン 5 ({{bug(633421)}} を参照。1000 ms の定数は設定項目 <code>dom.min_background_timeout_value</code> で変更できます) から、Chrome はこの動作をバージョン 11 (<a href="http://crbug.com/66078">crbug.com/66078</a>) から実装しています。</p>
+
+<p>Android 版 Firefox は {{bug(736602)}} によって、 Firefox 14 からバックグラウンドタブで 15 分のタイムアウト値を使用しており、またバックグラウンドタブを完全にアンロードすることもできます。</p>
+
+<div class="note">
+<p>Firefox 50 では、 Web Audio API の {{domxref("AudioContext")}} が音声を再生中であればバックグラウンドタブの制限を行いません。さらに Firefox 51 では、音声を再生していなくても {{domxref("AudioContext")}} を提供していれば、バックグラウンドタブの制限を行わないように改良しました。これによりタブがバックグラウンドであるときに、楽譜を基に音楽を再生するアプリで拍子が合わない、あるいは音楽が正しく同期しないといった問題が解決します。</p>
+</div>
+
+<h4 id="Throttling_of_tracking_timeout_scripts" name="Throttling_of_tracking_timeout_scripts">トラッキングスクリプトのタイムアウトを制限する</h4>
+
+<p>Firefox 55 より、トラッキングスクリプト (例えば Google Analytics や、<a href="https://wiki.mozilla.org/Security/Tracking_protection#Lists">TP リスト</a> によって Firefox がトラッキングスクリプトであると認識するスクリプトの URL) にさらなる制限を課します。フォアグラウンドで実行しているとき、最小遅延の制限は 4ms のままです。しかしバックグラウンドのタブでは、最小遅延を 10,000ms または 10 秒に制限します。これはドキュメントが最初に読み込まれてから 30 秒後に発効します。</p>
+
+<p>この動作を制御する設定項目は以下のとおりです。</p>
+
+<ul>
+ <li><code>dom.min_tracking_timeout_value</code>: 4</li>
+ <li><code>dom.min_tracking_background_timeout_value</code>: 10000</li>
+ <li><code>dom.timeout.tracking_throttling_delay</code>: 30000</li>
+</ul>
+
+<h4 id="Late_timeouts" name="Late_timeouts">タイムアウトの遅延</h4>
+
+<p>前出の "制限" に加えて、ページ内 (またはOSやブラウザー自身) の他のタスクの処理に時間がかかると、タイムアウトは遅れます。注目すべき重要なケースとして、<code>setTimeout()</code> を呼び出したスレッドが終了するまで関数やコードスニペットを実行できないことが挙げられます。例えば:</p>
+
+<pre class="brush: js">function foo() {
+  console.log('foo has been called');
+}
+setTimeout(foo, 0);
+console.log('After setTimeout');</pre>
+
+<p>このコードは、コンソールへ以下のように出力します。</p>
+
+<pre>After setTimeout
+foo has been called</pre>
+
+<p>これは <code>setTimeout</code> を遅延 0 で呼び出したとしても、直ちに実行するのではなくキューに載せて、次の機会に実行するようスケジューリングされるためです。現在実行中のコードはキューにある関数を実行する前に完了しなければならず、このために実行結果の順序が想定どおりにならない場合があります。</p>
+
+<h3 id="WebExtension_のバックグラウンドページとタイマー">WebExtension のバックグラウンドページとタイマー</h3>
+
+<p><a href="/ja/docs/Mozilla/Add-ons/WebExtensions">WebExtension</a> のバックグラウンドページでは、タイマーが正しく動作しません。これはバックグラウンドページが実際には常にロードされたままではないからです。ブラウザ－は使用されていない場合はアンロードし、必要なときに復元することができます。これは拡張機能にはほとんど透過的ですが、いくつかのもの (JS タイマーを含む) はアンロード/リストアサイクル全体では動作しないので、バックグラウンドページは代わりにアラームを使うことを推奨します。これについての詳細は <a href="https://developer.chrome.com/extensions/background_migration">Migrate to Event Driven Background Scripts</a> にあります。</p>
+
+<p>この記事の執筆時点では、 Chrome だけが上記の挙動を示していました - Firefox はまだアンロード/リストアの挙動をしていないので、タイマーは動作するでしょう。しかし、いくつかの理由から WebExtensions でタイマーを使わないようにするのはまだ良い考えです。</p>
+
+<ol>
+ <li>Chrome との互換性のため</li>
+ <li>将来、動作が変更された場合に問題が発生する可能性があるため</li>
+</ol>
+
+<h3 id="Maximum_delay_value" name="Maximum_delay_value">最大遅延時間</h3>
+
+<p>Internet Explorer、Chrome、Safari、Firefox を含むブラウザーは、内部で遅延時間を 32 ビット符号付き整数値で保存します。このため 2,147,483,647 ms (約 24.8 日) より大きな遅延時間を使用すると整数値がオーバーフローして、その結果直ちに実行されるタイムアウトになります。</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('HTML WHATWG', 'webappapis.html#dom-settimeout', 'WindowOrWorkerGlobalScope.setTimeout()')}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td>最新の仕様で、メソッドを <code>WindowOrWorkerGlobalScope</code> ミックスインに移動。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML WHATWG", "webappapis.html#dom-settimeout", "WindowTimers.setTimeout()")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td>初回定義 (DOM Level 0)</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<p>{{Compat("api.WindowOrWorkerGlobalScope.setTimeout")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/Add-ons/Code_snippets/Timers">JavaScript timers</a></li>
+ <li><a href="/ja/docs/Mozilla/JavaScript_code_modules/Timer.jsm">Timer.jsm</a></li>
+ <li>{{domxref("WindowOrWorkerGlobalScope.clearTimeout")}}</li>
+ <li>{{domxref("WindowOrWorkerGlobalScope.setInterval")}}</li>
+ <li>{{domxref("window.requestAnimationFrame")}}</li>
+ <li><a href="/ja/Add-ons/Code_snippets/Timers/Daemons"><em>Daemons</em> management</a></li>
+</ul>
diff --git a/files/ja/web/api/web_authentication_api/index.html b/files/ja/web/api/web_authentication_api/index.html
index 5d4cf3d674..9ca6c16e84 100644
--- a/files/ja/web/api/web_authentication_api/index.html
+++ b/files/ja/web/api/web_authentication_api/index.html
@@ -70,7 +70,7 @@ translation_of: Web/API/Web_Authentication_API
   この保証には次の点を含む：
   <ol>
    <li>challenge が送信時と同じものであるかの確認</li>
-   <li>origin が期待された origin でとなっていることの保証</li>
+   <li>origin が期待された origin となっていることの保証</li>
    <li>clientDataHash の署名と特定モデルの認証器用の証明書チェーンを使った attestation の検証</li>
   </ol>
   検証ステップの完全な一覧は <a href="https://w3c.github.io/webauthn/#registering-a-new-credential">WebAuthn の仕様書の中にあります</a>。 チェックが上手くいくと、サーバはユーザーアカウントに紐づいたその新しい公開鍵を保存し、将来の利用に備えます。つまりは、ユーザーが認証のためにその公開鍵を使いたい時は何時でも使えるようにするということです。</li>
diff --git a/files/ja/web/api/windoworworkerglobalscope/atob/index.html b/files/ja/web/api/windoworworkerglobalscope/atob/index.html
deleted file mode 100644
index 4408d9319b..0000000000
--- a/files/ja/web/api/windoworworkerglobalscope/atob/index.html
+++ /dev/null
@@ -1,92 +0,0 @@
----
-title: WindowOrWorkerGlobalScope.atob()
-slug: Web/API/WindowOrWorkerGlobalScope/atob
-tags:
-  - API
-  - HTML DOM
-  - Method
-  - Reference
-  - WindowOrWorkerGlobalScope
-  - atob
-translation_of: Web/API/WindowOrWorkerGlobalScope/atob
-original_slug: Web/API/WindowBase64/atob
----
-<p>{{APIRef("HTML DOM")}}</p>
-
-<p><strong><code>WindowOrWorkerGlobalScope.atob()</code></strong> 関数は、 {{glossary("Base64")}} エンコーディングでエンコードされたデータの文字列をデコードします。 {{domxref("WindowOrWorkerGlobalScope.btoa","btoa()")}} メソッドを使用して、通信に問題が発生する可能性のあるデータをエンコードして送信し、送信した後に <code>atob()</code> メソッドを使用して再度デコードすることができます。例えば、ASCII の 0 から 31 までのコードような制御文字をエンコードして送信し、デコードすることができます。</p>
-
-<p>Unicode や UTF-8 文字列の使用については、 {{domxref("WindowOrWorkerGlobalScope.btoa", "btoa()")}} の「Uncode 文字列」の節を参照してください。</p>
-
-<h2 id="Syntax" name="Syntax">構文</h2>
-
-<pre class="syntaxbox notranslate">var <var>decodedData</var> = scope.atob(<var>encodedData</var>);</pre>
-
-<h3 id="Parameters" name="Parameters">引数</h3>
-
-<dl>
- <dt><code><var>encodedData</var></code></dt>
- <dd>エンコードされたデータが入っている<a href="/ja/docs/Web/API/DOMString/Binary">バイナリ文字列</a>です。</dd>
-</dl>
-
-<h3 id="Return_value" name="Return_value">返値</h3>
-
-<p><code><var>encodedData</var></code> をデコードしたデータを含む ASCII 文字列です。</p>
-
-<h3 id="Exceptions" name="Exceptions">例外</h3>
-
-<dl>
- <dt>{{domxref("DOMException")}} (name: <code>InvalidCharacterError</code>)</dt>
- <dd><code><var>encodedData</var></code> が妥当な base64 ではない場合に発行されます。</dd>
-</dl>
-
-<h2 id="Example" name="Example">例</h2>
-
-<pre class="brush:js notranslate">const encodedData = window.btoa('Hello, world'); // 文字列をエンコード
-const decodedData = window.atob(encodedData); // 文字列をデコード</pre>
-
-<h2 id="Polyfill" name="Polyfill">ポリフィル</h2>
-
-<p>対応していないブラウザーでは、 <a href="https://github.com/MaxArt2501/base64-js/blob/master/base64.js">https://github.com/MaxArt2501/base64-js/blob/master/base64.js</a> のポリフィルを利用することができます。</p>
-
-<h2 id="Specifications" name="Specifications">仕様書</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">仕様書</th>
-   <th scope="col">状態</th>
-   <th scope="col">備考</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', '#dom-atob', 'WindowOrWorkerGlobalScope.atob()')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td>最新の仕様で、メソッドを <code>WindowOrWorkerGlobalScope</code> ミックスインに移動。</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5.1', '#dom-windowbase64-atob', 'WindowBase64.atob()')}}</td>
-   <td>{{Spec2('HTML5.1')}}</td>
-   <td>{{SpecName("HTML WHATWG")}} のスナップショット、変更なし。</td>
-  </tr>
-  <tr>
-   <td>{{SpecName("HTML5 W3C", "#dom-windowbase64-atob", "WindowBase64.atob()")}}</td>
-   <td>{{Spec2('HTML5 W3C')}}</td>
-   <td>{{SpecName("HTML WHATWG")}} のスナップショット。 <code>WindowBase64</code> の作成 (以前の対象だったプロパティ)。</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
-
-<div>
-<p>{{Compat("api.WindowOrWorkerGlobalScope.atob")}}</p>
-</div>
-
-<h2 id="See_also" name="See_also">関連情報</h2>
-
-<ul>
- <li><a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs"><code>data</code> URIs</a></li>
- <li>{{domxref("WindowOrWorkerGlobalScope.btoa","btoa()")}}</li>
- <li><a href="/ja/docs/Mozilla/Tech/XPCOM/Language_Bindings/Components.utils.importGlobalProperties">Components.utils.importGlobalProperties</a></li>
-</ul>
diff --git a/files/ja/web/api/windoworworkerglobalscope/btoa/index.html b/files/ja/web/api/windoworworkerglobalscope/btoa/index.html
deleted file mode 100644
index da5c8c872d..0000000000
--- a/files/ja/web/api/windoworworkerglobalscope/btoa/index.html
+++ /dev/null
@@ -1,144 +0,0 @@
----
-title: WindowOrWorkerGlobalScope.btoa()
-slug: Web/API/WindowOrWorkerGlobalScope/btoa
-tags:
-  - API
-  - HTML DOM
-  - Method
-  - Reference
-  - Web
-  - WindowOrWorkerGlobalScope
-  - btoa
-  - data
-  - strings
-translation_of: Web/API/WindowOrWorkerGlobalScope/btoa
----
-<p>{{APIRef("HTML DOM")}}</p>
-
-<p><code><strong>WindowOrWorkerGlobalScope.btoa()</strong></code> メソッドは、 {{glossary("Base64")}} でエンコードされた ASCII 文字列を<a href="/ja/docs/Web/API/DOMString/Binary">バイナリ文字列</a> (例えば {{jsxref("String")}} オブジェクトのうち、文字列中のすべての文字がバイナリデータのバイトとして扱うことができるもの) から生成します。</p>
-
-<p>このメソッドを使用すると、通信に支障をきたす可能性のあるデータをエンコードして送信し、その後 {{domxref("WindowOrWorkerGlobalScope.atob", "atob()")}} メソッドを使用して再度デコードすることができます。例えば ASCII で 0 から 31 の値ような制御文字をエンコードすることもできます。</p>
-
-<h2 id="Syntax" name="Syntax">構文</h2>
-
-<pre class="syntaxbox notranslate">var <var>encodedData</var> = <var>scope</var>.btoa(<var>stringToEncode</var>);</pre>
-
-<h3 id="Parameters" name="Parameters">引数</h3>
-
-<dl>
- <dt><code><var>stringToEncode</var></code></dt>
- <dd>エンコードする<a href="/ja/docs/Web/API/DOMString/Binary">バイナリ文字列</a>です。</dd>
-</dl>
-
-<h3 id="Return_value" name="Return_value">返値</h3>
-
-<p><code><var>stringToEncode</var></code> の Base64 表現である ASCII 文字列です。</p>
-
-<h3 id="Exceptions" name="Exceptions">例外</h3>
-
-<dl>
- <dt><code>InvalidCharacterError</code></dt>
- <dd>文字列には、1 バイトに収まらない文字が含まれていた場合。詳細は後述の「Unicode文字列」を参照してください。</dd>
-</dl>
-
-<h2 id="Example" name="Example">例</h2>
-
-<pre class="brush:js notranslate">const encodedData = window.btoa('Hello, world'); // 文字列をエンコード
-const decodedData = window.atob(encodedData); // 文字列をデコード
-</pre>
-
-<h2 id="Unicode_Strings" name="Unicode_Strings">Unicode 文字列</h2>
-
-<p><code>btoa()</code> 関数は、JavaScript の文字列を引数にとります。JavaScript の文字列は UTF-16 文字エンコーディングで表現されます。このエンコーディングでは、文字列は 16 ビット (2 バイト) 単位の並びとして表現されます。すべての ASCII 文字はこれらの単位の 1 バイト目に収まりますが、他の多くの文字は収まりません。</p>
-
-<p>Base64 は、設計上、バイナリデータを入力として期待します。 JavaScript の文字列では、これは各文字が 1 バイトしか占有しない文字列を意味します。したがって、2 バイト以上の文字を含む文字列を <code>btoa()</code> に渡した場合、これはバイナリデータとはみなされないため、エラーが発生します。</p>
-
-<pre class="brush: js notranslate">const ok = "a";
-console.log(ok.codePointAt(0).toString(16)); //   61: 長さ &lt; 1 バイト
-
-const notOK = "✓"
-console.log(notOK.codePointAt(0).toString(16)); // 2713: 長さ &gt; 1 バイト
-
-console.log(btoa(ok));    // YQ==
-console.log(btoa(notOK)); // error</pre>
-
-<p><code>btoa()</code> を用いて Unicode テキストを ASCII としてエンコードする必要がある場合、一つの選択肢として、各 16 ビット単位が 1 バイトしか占有しないように文字列を変換することができます。例えば、以下のようになります。</p>
-
-<pre class="brush: js notranslate">// Unicode 文字列で、各 16 ビット単位を 1 バイトしか占有
-// しない文字列に変換します。
-function toBinary(string) {
-  const codeUnits = new Uint16Array(string.length);
-  for (let i = 0; i &lt; codeUnits.length; i++) {
-    codeUnits[i] = string.charCodeAt(i);
-  }
-  return String.fromCharCode(...new Uint8Array(codeUnits.buffer));
-}
-
-// 1 バイトを超える文字を含んだ文字列
-const myString = "☸☹☺☻☼☾☿";
-
-const converted = toBinary(myString);
-const encoded = btoa(converted);
-console.log(encoded);                 // OCY5JjomOyY8Jj4mPyY=
-</pre>
-
-<p>このようにした場合、当然ながらデコードされた文字列を逆変換する必要があります。</p>
-
-<pre class="brush: js language-js notranslate">function fromBinary(binary) {
-  const bytes = new Uint8Array(binary.length);
-  for (let i = 0; i &lt; bytes.length; i++) {
-    bytes[i] = binary.charCodeAt(i);
-  }
-  return String.fromCharCode(...new Uint16Array(bytes.buffer));
-}
-
-const decoded = atob(encoded);
-const original = fromBinary(decoded);
-console.log(original);                // ☸☹☺☻☼☾☿
-</pre>
-
-<h2 id="Polyfill" name="Polyfill">ポリフィル</h2>
-
-<p>対応していないブラウザーでは、 <a href="https://github.com/MaxArt2501/base64-js/blob/master/base64.js">https://github.com/MaxArt2501/base64-js/blob/master/base64.js</a> のポリフィルを利用することができます。</p>
-
-<h2 id="Specifications" name="Specifications">仕様書</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">仕様書</th>
-   <th scope="col">状態</th>
-   <th scope="col">備考</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', '#dom-btoa', 'WindowOrWorkerGlobalScope.btoa()')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td>最新の仕様で、メソッドを <code>WindowOrWorkerGlobalScope</code> ミックスインに移動。</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5.1', '#dom-windowbase64-btoa', 'WindowBase64.btoa()')}}</td>
-   <td>{{Spec2('HTML5.1')}}</td>
-   <td>{{SpecName("HTML WHATWG")}} のスナップショット、変更なし。</td>
-  </tr>
-  <tr>
-   <td>{{SpecName("HTML5 W3C", "#dom-windowbase64-btoa", "WindowBase64.btoa()")}}</td>
-   <td>{{Spec2('HTML5 W3C')}}</td>
-   <td>{{SpecName("HTML WHATWG")}} のスナップショット。 <code>WindowBase64</code> の作成 (properties where on the target before it).</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
-
-<div>
-<p>{{Compat("api.WindowOrWorkerGlobalScope.btoa")}}</p>
-</div>
-
-<h2 id="See_also" name="See_also">関連情報</h2>
-
-<ul>
- <li><a href="/ja/docs/Web/HTTP/Basics_of_HTTP/Data_URIs"><code>data</code> URI</a></li>
- <li>{{domxref("WindowOrWorkerGlobalScope.atob","atob()")}}</li>
-</ul>
diff --git a/files/ja/web/api/windoworworkerglobalscope/caches/index.html b/files/ja/web/api/windoworworkerglobalscope/caches/index.html
deleted file mode 100644
index 89583bbda5..0000000000
--- a/files/ja/web/api/windoworworkerglobalscope/caches/index.html
+++ /dev/null
@@ -1,83 +0,0 @@
----
-title: WorkerGlobalScope.caches
-slug: Web/API/WindowOrWorkerGlobalScope/caches
-tags:
-  - API
-  - Experimental
-  - Property
-  - Read-only
-  - Reference
-  - Service Workers
-  - Web Workers
-  - Window
-  - WindowOrWorkerGlobalScope
-translation_of: Web/API/WindowOrWorkerGlobalScope/caches
-original_slug: Web/API/WorkerGlobalScope/caches
----
-<div>{{APIRef()}}{{SeeCompatTable}}</div>
-
-<p>{{domxref("WindowOrWorkerGlobalScope")}} インターフェイスの <code><strong>caches</strong></code> 読み取り専用プロパティは、現在のワーカーコンテキストに関連する {{domxref("CacheStorage")}} オブジェクトを返します。このオブジェクトにより、オフライン利用のために資産 (assets、アセット) を保存したり、リクエストに対するカスタムレスポンスを生成したりするなどの機能を使用できます。</p>
-
-<h2 id="Syntax" name="Syntax">構文</h2>
-
-<pre class="syntaxbox">var <em>myCacheStorage</em> = self.caches; // または単に caches
-</pre>
-
-<h3 id="Value" name="Value">値</h3>
-
-<p>{{domxref("CacheStorage")}}。</p>
-
-<h2 id="Example" name="Example">例</h2>
-
-<p>次の例では、アセットをオフラインで利用できるようにするために、<a href="/ja/docs/Web/API/Service_Worker_API">ServiceWorker</a> コンテキストでキャッシュを使う方法を示しています。</p>
-
-<pre class="brush: js">this.addEventListener('install', function(event) {
-  event.waitUntil(
-    caches.open('v1').then(function(cache) {
-      return cache.addAll(
-        '/sw-test/',
-        '/sw-test/index.html',
-        '/sw-test/style.css',
-        '/sw-test/app.js',
-        '/sw-test/image-list.js',
-        '/sw-test/star-wars-logo.jpg',
-        '/sw-test/gallery/',
-        '/sw-test/gallery/bountyHunters.jpg',
-        '/sw-test/gallery/myLittleVader.jpg',
-        '/sw-test/gallery/snowTroopers.jpg'
-      );
-    })
-  );
-});</pre>
-
-<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('Service Workers')}}</td>
-   <td>{{Spec2('Service Workers')}}</td>
-   <td>初期定義。</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザー実装状況</h2>
-
-
-
-<p>{{Compat("api.WindowOrWorkerGlobalScope.caches")}}</p>
-
-<h2 id="See_also" name="See_also">関連項目</h2>
-
-<ul>
- <li><a href="/ja/docs/Web/API/ServiceWorker_API">Service Workers</a></li>
- <li><a href="/ja/docs/Web/API/Web_Workers_API">Web Workers</a></li>
- <li>{{domxref("CacheStorage")}}</li>
- <li>{{domxref("Cache")}}</li>
-</ul>
diff --git a/files/ja/web/api/windoworworkerglobalscope/clearinterval/index.html b/files/ja/web/api/windoworworkerglobalscope/clearinterval/index.html
deleted file mode 100644
index f3e9b52e6d..0000000000
--- a/files/ja/web/api/windoworworkerglobalscope/clearinterval/index.html
+++ /dev/null
@@ -1,67 +0,0 @@
----
-title: window.clearInterval
-slug: Web/API/WindowOrWorkerGlobalScope/clearInterval
-tags:
-  - DOM
-  - DOM_0
-  - Gecko
-  - JavaScript timers
-  - Window
-translation_of: Web/API/WindowOrWorkerGlobalScope/clearInterval
-original_slug: Web/API/WindowTimers/clearInterval
----
-<div>{{ApiRef}}</div>
-
-<h2 id="Summary" name="Summary">概要</h2>
-
-<p>{{domxref("window.setInterval", "setInterval")}} を使用して設定された繰り返し動作をキャンセルします。</p>
-
-<h2 id="Syntax" name="Syntax">構文</h2>
-
-<pre class="syntaxbox"><em>window</em>.clearInterval(<var>intervalID</var>)
-</pre>
-
-<ul>
- <li><code>intervalID</code>: キャンセルする繰り返し動作の識別子。この ID は <code>setInterval()</code> の戻り値です。</li>
-</ul>
-
-<h2 id="Example" name="Example">例</h2>
-
-<p>{{domxref("window.setInterval", "setInterval()", "example")}} の例を参照して下さい。</p>
-
-<h2 id="Specification" name="Specification">仕様</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th>仕様書</th>
-   <th>策定状況</th>
-   <th>コメント</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', 'webappapis.html#dom-setInterval', 'WindowOrWorkerGlobalScope.clearInterval()')}}</td>
-   <td>{{Spec2("HTML WHATWG")}}</td>
-   <td>最新の仕様で、メソッドを <code>WindowOrWorkerGlobalScope</code> ミックスインに移動。</td>
-  </tr>
-  <tr>
-   <td>{{SpecName("HTML WHATWG", "webappapis.html#dom-setInterval", "WindowTimers.setInterval()")}}</td>
-   <td>{{Spec2("HTML WHATWG")}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザー実装状況</h2>
-
-<p>{{Compat("api.WindowOrWorkerGlobalScope.clearInterval")}}</p>
-
-<h2 id="See_also" name="See_also">関連情報</h2>
-
-<ul>
- <li><a href="/ja/docs/JavaScript/Timers" title="JavaScript/Timers">JavaScript timers</a></li>
- <li>{{domxref("window.setTimeout")}}</li>
- <li>{{domxref("window.setInterval")}}</li>
- <li>{{domxref("window.clearTimeout")}}</li>
- <li>{{domxref("window.requestAnimationFrame")}}</li>
- <li><a href="/ja/docs/JavaScript/Timers/Daemons"><em>Daemons</em> management</a></li>
-</ul>
diff --git a/files/ja/web/api/windoworworkerglobalscope/cleartimeout/index.html b/files/ja/web/api/windoworworkerglobalscope/cleartimeout/index.html
deleted file mode 100644
index 2ce0bb071e..0000000000
--- a/files/ja/web/api/windoworworkerglobalscope/cleartimeout/index.html
+++ /dev/null
@@ -1,100 +0,0 @@
----
-title: WindowOrWorkerGlobalScope.clearTimeout()
-slug: Web/API/WindowOrWorkerGlobalScope/clearTimeout
-tags:
-  - API
-  - HTML DOM
-  - Method
-  - Reference
-  - WindowOrWorkerGlobalScope
-  - clearTimeout
-  - メソッド
-  - リファレンス
-translation_of: Web/API/WindowOrWorkerGlobalScope/clearTimeout
----
-<div>{{APIRef("HTML DOM")}}</div>
-
-<p><strong><code>clearTimeout()</code></strong> は {{domxref("WindowOrWorkerGlobalScope")}} ミックスインのメソッドで、以前の {{domxref("WindowOrWorkerGlobalScope.setTimeout", "setTimeout()")}} の呼び出しによって以前に確立されたタイムアウトを解除します。</p>
-
-<h2 id="Syntax" name="Syntax">構文</h2>
-
-<pre class="syntaxbox"><em>scope</em>.clearTimeout(<em>timeoutID</em>)
-</pre>
-
-<h3 id="Parameters" name="Parameters">引数</h3>
-
-<dl>
- <dt><code><em>timeoutID</em></code></dt>
- <dd>解除したいタイマの ID です。 ID は <code>setTimeout()</code> の返値によって取得できます。</dd>
-</dl>
-
-<p>注目すべきは、 {{domxref("WindowOrWorkerGlobalScope.setTimeout", "setTimeout()")}} および {{domxref("WindowOrWorkerGlobalScope.setInterval", "setInterval()")}} で使用される ID のプールは共有されますので、技術的には <code>clearTimeout()</code> および {{domxref("WindowOrWorkerGlobalScope.clearInterval", "clearInterval()")}} は互いに交換できます。しかし、明確化のため、そのようなことは避けてください。</p>
-
-<h2 id="Example" name="Example">例</h2>
-
-<p>ウェブページのコンテキストで以下のスクリプトを実行し、ページを一度クリックしてください。１秒後にメッセージがポップアップします。１秒間に複数回ページをクリックしても、アラートは一度しか表示されません。</p>
-
-<pre class="brush: js">var alarm = {
-  remind: function(aMessage) {
-    alert(aMessage);
-    this.timeoutID = undefined;
-  },
-
-  setup: function() {
-    if (typeof this.timeoutID === 'number') {
-      this.cancel();
-    }
-
-    this.timeoutID = window.setTimeout(function(msg) {
-      this.remind(msg);
-    }.bind(this), 1000, 'Wake up!');
-  },
-
-  cancel: function() {
-    window.clearTimeout(this.timeoutID);
-  }
-};
-window.onclick = function() { alarm.setup(); };
-</pre>
-
-<h2 id="Notes" name="Notes">メモ</h2>
-
-<p><code>clearTimeout()</code> へ妥当ではない ID を渡しても、何の効果もありません。例外は発生しません。</p>
-
-<h2 id="Specification" name="Specification">仕様書</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">仕様書</th>
-   <th scope="col">状態</th>
-   <th scope="col">備考</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', 'webappapis.html#dom-cleartimeout', 'WindowOrWorkerGlobalScope.clearTimeout()')}}</td>
-   <td>{{Spec2("HTML WHATWG")}}</td>
-   <td>最新の仕様で、メソッドを <code>WindowOrWorkerGlobalScope</code> ミックスインに移動。</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', 'webappapis.html#dom-cleartimeout', 'clearTimeout()')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
-
-<p>{{Compat("api.WindowOrWorkerGlobalScope.clearTimeout")}}</p>
-
-<h2 id="See_also" name="See_also">関連情報</h2>
-
-<ul>
- <li>{{domxref("WindowOrWorkerGlobalScope.setTimeout()")}}</li>
- <li>{{domxref("WindowOrWorkerGlobalScope.setInterval()")}}</li>
- <li>{{domxref("WindowOrWorkerGlobalScope.clearInterval()")}}</li>
- <li>{{domxref("Window.requestAnimationFrame()")}}</li>
- <li><a href="/ja/docs/JavaScript/Timers/Daemons" title="JavaScript/Timers/Daemons"><em>Daemons</em> management</a></li>
-</ul>
diff --git a/files/ja/web/api/windoworworkerglobalscope/createimagebitmap/index.html b/files/ja/web/api/windoworworkerglobalscope/createimagebitmap/index.html
deleted file mode 100644
index cd0334402a..0000000000
--- a/files/ja/web/api/windoworworkerglobalscope/createimagebitmap/index.html
+++ /dev/null
@@ -1,103 +0,0 @@
----
-title: self.createImageBitmap()
-slug: Web/API/WindowOrWorkerGlobalScope/createImageBitmap
-tags:
-  - API
-  - Canvas
-  - DOM
-  - createImageBitmap
-translation_of: Web/API/WindowOrWorkerGlobalScope/createImageBitmap
----
-<div>{{APIRef("Canvas API")}}</div>
-
-<p><code><strong>createImageBitmap()</strong></code> メソッドは、指定されたソースからビットマップを作成します。このメソッドは、windows と worker の両方のグローバルスコープに存在します。このメソッドは、さまざまな異なる画像ソースを受け付け、{{domxref("Promise")}} を返し、{{domxref("ImageBitmap")}} に解決します。</p>
-
-<h2 id="シンタックス">シンタックス</h2>
-
-<pre class="syntaxbox notranslate">const imageBitmapPromise = createImageBitmap(<em>image</em>[, options]);
-const imageBitmapPromise = createImageBitmap(<em>image, sx, sy, sw, sh</em>[, options]);</pre>
-
-<h3 id="パラメータ">パラメータ</h3>
-
-<dl>
- <dt><code>image</code></dt>
- <dd>画像ソースで {{HTMLElement("img")}}、SVG {{SVGElement("image")}}、{{HTMLElement("video")}}、{{HTMLElement("canvas")}}、{{domxref("HTMLImageElement")}}、{{domxref("SVGImageElement")}}、{{domxref("HTMLVideoElement")}}、{{domxref("HTMLCanvasElement")}}、{{domxref("Blob")}}、{{domxref("ImageData")}}、{{domxref("ImageBitmap")}} または {{domxref("OffscreenCanvas")}} オブジェクトのいずれかになります。</dd>
- <dt><code>sx</code></dt>
- <dd><code>ImageBitmap</code> が抽出される矩形の参照点の x 座標。</dd>
- <dt><code>sy</code></dt>
- <dd><code>ImageBitmap</code> が抽出される矩形の参照点の y 座標。</dd>
- <dt><code>sw</code></dt>
- <dd><code>ImageBitmap</code> が抽出される矩形の幅。この値は負の値にすることができます。</dd>
- <dt><code>sh</code></dt>
- <dd><code>ImageBitmap</code> が抽出される矩形の高さ。この値は負の値にすることができます。</dd>
- <dt><code>options</code> {{optional_inline}}</dt>
- <dd>画像の抽出のためのオプションを設定するオブジェクト。利用可能なオプションは以下の通りです。
- <ul>
-  <li><code>imageOrientation</code>: 画像をそのまま表示するか、垂直方向に反転させて表示するかを指定します。<code>none</code> (デフォルト) または <code>flipY</code> のいずれかを指定します</li>
-  <li><code>premultiplyAlpha</code>: ビットマップのカラーチャンネルをアルファチャンネルで前置増幅するかどうかを指定します。<code>none</code>、<code>premultiply</code>、<code>default</code> (デフォルト) のいずれかです</li>
-  <li><code>colorSpaceConversion</code>: 画像を色空間変換でデコードするかどうかを指定します。<code>none</code> または <code>default</code> (デフォルト) のいずれかを指定します。値 <code>default</code> は、実装固有の動作を使用することを示します</li>
-  <li><code>resizeWidth</code>: 出力幅を示す long 整数</li>
-  <li><code>resizeHeight</code>: 出力の高さを示す long 整数</li>
-  <li><code>resizeQuality</code>: 出力寸法に合わせて入力のサイズを変更するために使用するアルゴリズムを指定します。<code>pixelated</code>、<code>low</code> (デフォルト)、<code>medium</code>、<code>high</code>のいずれかです</li>
- </ul>
- </dd>
-</dl>
-
-<h3 id="戻り値">戻り値</h3>
-
-<p>与えられた矩形のビットマップデータを含む{{domxref("ImageBitmap")}} オブジェクトに解決する{{domxref("Promise")}} を返します。</p>
-
-<h2 id="例">例</h2>
-
-<h3 id="スプライトシートからのスプライト作成">スプライトシートからのスプライト作成</h3>
-
-<p>この例では、スプライトシートをロードし、個々のスプライトを抽出し、各スプライトをキャンバスにレンダリングします。スプライトシートとは、複数の小さな画像を含む画像で、それぞれを個別にレンダリングできるようにしたいものです。</p>
-
-<pre class="brush: js  language-js notranslate">var canvas = document.getElementById('myCanvas'),
-ctx = canvas.getContext('2d'),
-image = new Image();
-
-// スプライトシートがロードされるのを待ちます
-image.onload = function() {
-  Promise.all([
-    // スプライトシートから2つのスプライトを切り取ります
-    createImageBitmap(image, 0, 0, 32, 32),
-    createImageBitmap(image, 32, 0, 32, 32)
-  ]).then(function(sprites) {
-    // 各スプライトをキャンバスに描きます
-    ctx.drawImage(sprites[0], 0, 0);
-    ctx.drawImage(sprites[1], 32, 32);
-  });
-}
-
-// 画像ファイルからスプライトシートを読み込みます
-image.src = 'sprites.png';
-</pre>
-
-<h2 id="仕様">仕様</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">仕様書</th>
-   <th scope="col">ステータス</th>
-   <th scope="col">コメント</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', "webappapis.html#dom-createimagebitmap", "createImageBitmap")}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="ブラウザの互換性">ブラウザの互換性</h2>
-
-<p>{{Compat("api.WindowOrWorkerGlobalScope.createImageBitmap")}}</p>
-
-<h2 id="あわせて参照">あわせて参照</h2>
-
-<ul>
- <li>{{domxref("CanvasRenderingContext2D.drawImage()")}}</li>
- <li>{{domxref("ImageData")}}</li>
-</ul>
diff --git a/files/ja/web/api/windoworworkerglobalscope/fetch/index.html b/files/ja/web/api/windoworworkerglobalscope/fetch/index.html
deleted file mode 100644
index 05704bb11f..0000000000
--- a/files/ja/web/api/windoworworkerglobalscope/fetch/index.html
+++ /dev/null
@@ -1,191 +0,0 @@
----
-title: WindowOrWorkerGlobalScope.fetch()
-slug: Web/API/WindowOrWorkerGlobalScope/fetch
-tags:
-  - API
-  - Experimental
-  - Fetch
-  - Fetch API
-  - GlobalFetch
-  - Method
-  - Reference
-  - WindowOrWorkerGlobalScope
-  - request
-  - メソッド
-translation_of: Web/API/WindowOrWorkerGlobalScope/fetch
----
-<p>{{APIRef("Fetch API")}}</p>
-
-<p><span class="seoSummary"><code><strong>fetch()</strong></code> は {{domxref("WindowOrWorkerGlobalScope")}} ミックスインのメソッドで、ネットワークからリソースを取得するプロセスを開始し、レスポンスが利用できるようになったら満足するプロミスを返します。</span>このプロミスはリクエストに対するレスポンスを表す {{domxref("Response")}} で解決します。プロミスは HTTP エラーでは拒否されず、ネットワークエラーでのみ拒否されます。 HTTP エラーをチェックするには、 <code>then</code> ハンドラーを使用する必要があります。</p>
-
-<p><code>WindowOrWorkerGlobalScope</code> は {{domxref("Window")}} と {{domxref("WorkerGlobalScope")}} の両方で実装されています。これはつまり <code>fetch()</code> メソッドはあなたがリソースを取得したいと思うような大部分コンテキストで使用可能ということです。</p>
-
-<p>{{domxref("WindowOrWorkerGlobalScope.fetch","fetch()")}} のプロミスはネットワークエラーが発生した場合 (すなわち普通はパーミッション問題などがあったとき) のみ拒否されます。 {{domxref("WindowOrWorkerGlobalScope.fetch","fetch()")}} のプロミスは HTTP エラー (<code>404</code> など) では拒否<em>されません</em>。代わりに、 <code>then()</code> ハンドラーで {{domxref("Response.ok")}} や {{domxref("Response.status")}} プロパティをチェックする必要があります。</p>
-
-<p><code>fetch()</code> メソッドは取得するリソースのディレクティブではなく <a href="/ja/docs/Security/CSP/CSP_policy_directives">Content Security Policy</a> の <code>connect-src</code> ディレクティブによって制御されます。</p>
-
-<div class="note">
-<p><strong>注</strong>: <code>fetch()</code> メソッドの引数は {{domxref("Request.Request","Request()")}} コンストラクターと全く同じです。</p>
-</div>
-
-<h2 id="Syntax" name="Syntax">構文</h2>
-
-<pre class="syntaxbox notranslate">const <var>fetchResponsePromise</var> = fetch(<var>resource</var> [, <var>init</var>])
-</pre>
-
-<h3 id="Parameters" name="Parameters">引数</h3>
-
-<dl>
- <dt><code><var>resource</var></code></dt>
- <dd>取得したいリソースを定義します。以下の 2 つが使用出来ます。
- <ul>
-  <li>取得したいリソースの直接の URL を含む {{domxref("USVString")}}。ブラウザーによってはスキームとして <code>blob:</code> と <code>data:</code> を受け入れます。</li>
-  <li>{{domxref("Request")}} オブジェクト。</li>
- </ul>
- </dd>
- <dt><code><var>init</var></code> {{optional_inline}}</dt>
- <dd>
- <p>リクエストに適用したいカスタム設定を含むオブジェクト。可能なオプションは以下の通りです。</p>
-
- <dl>
-  <dt><code>method</code></dt>
-  <dd>リクエストするメソッド、<code>GET</code>、<code>POST</code> など。なお、 {{httpheader("Origin")}} ヘッダーは {{HTTPMethod("HEAD")}} または {{HTTPMethod("GET")}} メソッドの読み取りリクエストでは設定されません。<br>
-  (この動作は Firefox 65 で修正されました — {{bug(1508661)}} を参照)</dd>
-  <dt><code>headers</code></dt>
-  <dd>リクエストに追加したいヘッダーで、{{domxref("Headers")}} オブジェクトか {{domxref("ByteString")}} 値を持つオブジェクトリテラルで指定してください。なお、<a href="/ja/docs/Glossary/Forbidden_header_name">一部の名前は禁止されています</a>。</dd>
-  <dt><code>body</code></dt>
-  <dd>リクエストに追加したい本文です。これには {{domxref("Blob")}}, {{domxref("BufferSource")}}, {{domxref("FormData")}}, {{domxref("URLSearchParams")}}, {{domxref("USVString")}}, {{domxref("ReadableStream")}} オブジェクトなどが使用できます。メソッドが <code>GET</code> や <code>HEAD</code> の場合使用できないので注意してください。</dd>
-  <dt><code>mode</code></dt>
-  <dd>リクエストで使いたいモードです。例: <code>cors</code>, <code>no-cors</code>, <code>same-origin</code></dd>
-  <dt><code>credentials</code></dt>
-  <dd>リクエストに使用したいリクエスト認証情報、 <code>omit</code>, <code>same-origin</code>, <code>include</code> です。現在のドメインの Cookie を自動で送るためにはこのオプションを指定する必要があります。 Chrome 50 から、このプロパティは{{domxref("FederatedCredential")}} インスタンスや {{domxref("PasswordCredential")}} インスタンスを受け付けるようになりました。</dd>
-  <dt><code>cache</code></dt>
-  <dd>使用したいリクエストの<a href="/ja/docs/Web/API/Request/cache">キャッシュモード</a>です。</dd>
-  <dt><code>redirect</code></dt>
-  <dd>使用するリダイレクトモードです。 <code>follow</code> (自動でリダイレクトに従う)、 <code>error</code> (リダイレクトが起こった場合エラーを伴って中止する)、 <code>manual</code> (手動でリダイレクトを処理する)。Chrome の既定値は <code>follow</code> です (バージョン 47 より前の既定値は <code>manual</code> でした)。</dd>
-  <dt><code>referrer</code></dt>
-  <dd>{{domxref("USVString")}} でリクエストのリファラーを指定します。これは同じオリジンの URL、 <code>about:client</code>、空文字列のいずれかを取ることができます。</dd>
-  <dt><code>referrerPolicy</code></dt>
-  <dd>リクエストで使用する<a href="https://w3c.github.io/webappsec-referrer-policy/#referrer-policies">リファラーポリシー</a>を指定します。使用可能な値は、 <code>no-referrer</code>, <code>no-referrer-when-downgrade</code>, <code>same-origin</code>, <code>origin</code>, <code>strict-origin</code>, <code>origin-when-cross-origin</code>, <code>strict-origin-when-cross-origin</code>, or <code>unsafe-url</code> のいずれかです。</dd>
-  <dt><code>integrity</code></dt>
-  <dd>リソースに <a href="/ja/docs/Web/Security/Subresource_Integrity">subresource integrity</a> 値を含ませることが出来ます (例：<code>sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE=</code>)。</dd>
-  <dt><code>keepalive</code></dt>
-  <dd><code>keepalive</code> オプションはページより長生きするリクエストを許可するのに使われます。<code>keepalive</code> フラグつきの Fetch は{{domxref("Navigator.sendBeacon()")}} API の置き換えです。</dd>
-  <dt><code>signal</code></dt>
-  <dd>{{domxref("AbortSignal")}} オブジェクトのインスタンスです。つまり {{domxref("AbortController")}} 経由で fetch リクエストと通信したり望む場合には中止したりできます。</dd>
- </dl>
- </dd>
-</dl>
-
-<h3 id="Return_value" name="Return_value">返値</h3>
-
-<p>{{domxref("Promise")}} で、 {{domxref("Response")}} オブジェクトに解決します。</p>
-
-<h3 id="Exceptions" name="Exceptions">例外</h3>
-
-<dl>
- <dt><code>AbortError</code></dt>
- <dd>{{domxref("AbortController")}} メソッドまたは {{domxref("AbortController.abort", "abort()")}} メソッドの呼び出しによりリクエストが中止された。</dd>
- <dt><code>TypeError</code></dt>
- <dd>指定された URL がユーザー認証情報を含んでいる。この情報は {{HTTPHeader("Authorization")}} ヘッダーを用いて提供するべきです。</dd>
-</dl>
-
-<h2 id="Example" name="Example">例</h2>
-
-<p><a href="https://github.com/mdn/fetch-examples/tree/master/fetch-request">Fetch Request example</a> リポジトリ (デモ: <a href="https://mdn.github.io/fetch-examples/fetch-request/">Fetch Request live</a>) では {{domxref("Request")}} オブジェクトを関連するコンストラクターを使って作成しています。その後 <code>fetch()</code> を呼んで取得しています。画像を fetch している時から適切な MIME タイプを与えるために response の {{domxref("Body.blob")}} を実行し、適切に処理されます。そして ObjectURL を作成し {{htmlelement("img")}} 要素に追加して表示させています。</p>
-
-<pre class="brush: js notranslate">const myImage = document.querySelector('img');
-
-let myRequest = new Request('flowers.jpg');
-
-fetch(myRequest)
-.then(function(response) {
-  if (!response.ok) {
-    throw new Error(`HTTP error! status: ${response.status}`);
-  }
-  return response.blob();
-})
-.then(function(response) {
-  let objectURL = URL.createObjectURL(response);
-  myImage.src = objectURL;
-});</pre>
-
-<p><a href="https://github.com/mdn/fetch-examples/tree/gh-pages/fetch-with-init-then-request/index.html">Fetch with init then Request example</a> リポジトリ (デモ: <a href="https://mdn.github.io/fetch-examples/fetch-with-init-then-request/">Fetch Request init live</a>) では上記の内容に加えて、<code>fetch()</code> を呼び出すとき、初期化オブジェクト <code><var>init</var></code> を渡しています。</p>
-
-<pre class="brush: js notranslate">const myImage = document.querySelector('img');
-
-let myHeaders = new Headers();
-myHeaders.append('Content-Type', 'image/jpeg');
-
-const myInit = {
-  method: 'GET',
-  headers: myHeaders,
-  mode: 'cors',
-  cache: 'default'
-};
-
-let myRequest = new Request('flowers.jpg');
-
-fetch(myRequest, myInit).then(function(response) {
-  // ...
-});</pre>
-
-<p>同様に <code><var>init</var></code> オブジェクトを <code>Request</code> コンストラクターに渡しても、同じ効果が得られます。</p>
-
-<pre class="brush: js notranslate">let myRequest = new Request('flowers.jpg', myInit);</pre>
-
-<p><code><var>init</var></code> の <code><var>init</var></code> としてオブジェクトリテラルを使用することもできます。</p>
-
-<pre class="brush: js notranslate">const myInit = {
-  method: 'GET',
-  headers: {
-    'Content-Type': 'image/jpeg'
-  },
-  mode: 'cors',
-  cache: 'default'
-};
-
-let myRequest = new Request('flowers.jpg', myInit);
-</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('Fetch','#fetch-method','fetch()')}}</td>
-   <td>{{Spec2('Fetch')}}</td>
-   <td>最新の仕様では <code>WindowOrWorkerGlobalScope</code> の中で部分的に定義。</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('Fetch','#dom-global-fetch','fetch()')}}</td>
-   <td>{{Spec2('Fetch')}}</td>
-   <td>初回定義</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('Credential Management')}}</td>
-   <td>{{Spec2('Credential Management')}}</td>
-   <td>{{domxref("FederatedCredential")}} または {{domxref("PasswordCredential")}} のインスタンスを <code>init.credentials</code> の値として追加。</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
-
-<p>{{Compat("api.WindowOrWorkerGlobalScope.fetch")}}</p>
-
-<h2 id="See_also" name="See_also">関連情報</h2>
-
-<ul>
- <li><a href="/ja/docs/Web/API/Fetch_API">Fetch API</a></li>
- <li><a href="/ja/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li>
- <li><a href="/ja/docs/Web/HTTP/CORS">HTTP access control (CORS)</a></li>
- <li><a href="/ja/docs/Web/HTTP">HTTP</a></li>
-</ul>
diff --git a/files/ja/web/api/windoworworkerglobalscope/indexeddb/index.html b/files/ja/web/api/windoworworkerglobalscope/indexeddb/index.html
deleted file mode 100644
index ae7659a244..0000000000
--- a/files/ja/web/api/windoworworkerglobalscope/indexeddb/index.html
+++ /dev/null
@@ -1,71 +0,0 @@
----
-title: WindowOrWorkerGlobalScope.indexedDB
-slug: Web/API/WindowOrWorkerGlobalScope/indexedDB
-tags:
-  - API
-  - Database
-  - IndexedDB
-  - Property
-  - Reference
-  - Storage
-translation_of: Web/API/WindowOrWorkerGlobalScope/indexedDB
----
-<p>{{ APIRef() }}</p>
-
-<p>{{domxref("WindowOrWorkerGlobalScope")}} ミックスインの <strong><code>indexedDB</code></strong> 読み取り専用プロパティは、アプリケーションが indexed データベースのキャパビリティに非同期でアクセスするための機構を提供します。</p>
-
-<h2 id="Syntax" name="Syntax">構文</h2>
-
-<pre class="syntaxbox">var IDBFactory = self.indexedDB;</pre>
-
-<h3 id="Value" name="Value">値</h3>
-
-<p>{{domxref("IDBFactory")}} オブジェクト。</p>
-
-<h2 id="Example" name="Example">例</h2>
-
-<pre class="brush: js;highlight:[3]">var db;
-function openDB() {
- var DBOpenRequest = window.indexedDB.open('toDoList');
- DBOpenRequest.onsuccess = function(e) {
-   db = DBOpenRequest.result;
- }
-}</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('IndexedDB 2', '#dom-windoworworkerglobalscope-indexeddb', 'indexedDB')}}</td>
-   <td>{{Spec2('IndexedDB 2')}}</td>
-   <td>Defined in a <code>WindowOrWorkerGlobalScope</code> partial in the newest spec.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('IndexedDB', '#widl-IDBEnvironment-indexedDB', 'indexedDB')}}</td>
-   <td>{{Spec2('IndexedDB')}}</td>
-   <td>初期定義。</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの実装状況</h2>
-
-<p>{{Compat("api.WindowOrWorkerGlobalScope.indexedDB")}}</p>
-
-<h2 id="See_also" name="See_also">関連情報</h2>
-
-<ul>
- <li><a href="/ja/docs/Web/API/IndexedDB_API/Using_IndexedDB">Using IndexedDB</a></li>
- <li>トランザクションの開始: {{domxref("IDBDatabase")}}</li>
- <li>トランザクションの使用: {{domxref("IDBTransaction")}}</li>
- <li>キーの範囲設定: {{domxref("IDBKeyRange")}}</li>
- <li>データの取得と変更: {{domxref("IDBObjectStore")}}</li>
- <li>カーソルの使用: {{domxref("IDBCursor")}}</li>
- <li>参照例: <a class="external" href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a class="external" href="http://mdn.github.io/to-do-notifications/">view example live</a>.)</li>
-</ul>
diff --git a/files/ja/web/api/windoworworkerglobalscope/issecurecontext/index.html b/files/ja/web/api/windoworworkerglobalscope/issecurecontext/index.html
deleted file mode 100644
index 221ce43915..0000000000
--- a/files/ja/web/api/windoworworkerglobalscope/issecurecontext/index.html
+++ /dev/null
@@ -1,56 +0,0 @@
----
-title: WindowOrWorkerGlobalScope.isSecureContext
-slug: Web/API/WindowOrWorkerGlobalScope/isSecureContext
-tags:
-  - API
-  - DOM
-  - Window
-  - WindowOrWorkerGlobalContext
-  - Workers
-  - isSecureContext
-  - ウェブ
-  - プロパティ
-  - リファレンス
-translation_of: Web/API/WindowOrWorkerGlobalScope/isSecureContext
----
-<p>{{APIRef()}}{{SeeCompatTable}}</p>
-
-<p>{{domxref("WindowOrWorkerGlobalScope")}} インターフェイスの読み取り専用 <code><strong>isSecureContext</strong></code> プロパティは、現在のコンテキストが安全（<code>true</code>）かそうではない（<code>false</code>）を示すブール値を返します。</p>
-
-<h2 id="構文">構文</h2>
-
-<pre class="syntaxbox">var <em>isItSecure</em> = self.isSecureContext; // or just isSecureContext
-</pre>
-
-<h3 id="値">値</h3>
-
-<p>{{domxref("Boolean")}}.</p>
-
-<h2 id="仕様">仕様</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">仕様</th>
-   <th scope="col">ステータス</th>
-   <th scope="col">コメント</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Secure Contexts', '#dom-windoworworkerglobalscope-issecurecontext', 'WindowOrWorkerGlobalScope.isSecureContext')}}</td>
-   <td>{{Spec2('Secure Contexts')}}</td>
-   <td>初期定義。</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="ブラウザ互換性">ブラウザ互換性</h2>
-
-
-
-<p>{{Compat("api.WindowOrWorkerGlobalScope.isSecureContext")}}</p>
-
-<h2 id="参照">参照</h2>
-
-<ul>
- <li><a href="/en-US/docs/Web/Security/Secure_Contexts">Secure contexts</a></li>
-</ul>
diff --git a/files/ja/web/api/windoworworkerglobalscope/origin/index.html b/files/ja/web/api/windoworworkerglobalscope/origin/index.html
deleted file mode 100644
index 834af4741a..0000000000
--- a/files/ja/web/api/windoworworkerglobalscope/origin/index.html
+++ /dev/null
@@ -1,58 +0,0 @@
----
-title: WindowOrWorkerGlobalScope.origin
-slug: Web/API/WindowOrWorkerGlobalScope/origin
-tags:
-  - API
-  - DOM
-  - Window
-  - WindowOrWorkerGlobalScope
-  - Worker
-  - ウェブ
-  - プロパティ
-translation_of: Web/API/WindowOrWorkerGlobalScope/origin
----
-<p>{{APIRef()}}{{SeeCompatTable}}</p>
-
-<p>{{domxref("WindowOrWorkerGlobalScope")}} インターフェイスの読み取り専用プロパティ <code><strong>origin</strong></code> は、グローバルスコープの文字列としてシリアライズされた origin を返します。</p>
-
-<h2 id="構文">構文</h2>
-
-<pre class="syntaxbox">var <em>myOrigin</em> = self.origin; // or just origin
-</pre>
-
-<h3 id="値">値</h3>
-
-<p>{{domxref("USVString")}}.</p>
-
-<h2 id="例">例</h2>
-
-<p>worker script 内から実行される以下のスニペットは、メッセージを受け取る度にワーカーのグローバルスコープの origin をコンソールに記録します。</p>
-
-<pre class="brush: js">onmessage = function() {
-  console.log(self.origin);
-};</pre>
-
-<p>もし origin が scheme/host/port tuple出ない場合 (あなたがローカルで実行しようとしている、言い換えると <code>file://</code> というURLの場合)、 <code>origin</code> は <code>"null"</code> という文字列を返すでしょう。</p>
-
-<h2 id="仕様">仕様</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">仕様</th>
-   <th scope="col">ステータス</th>
-   <th scope="col">コメント</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', 'webappapis.html#dom-origin', 'WindowOrWorkerGlobalScope.origin')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td>初期定義。</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="ブラウザ互換性">ブラウザ互換性</h2>
-
-
-
-<p>{{Compat("api.WindowOrWorkerGlobalScope.origin")}}</p>
diff --git a/files/ja/web/api/windoworworkerglobalscope/setinterval/index.html b/files/ja/web/api/windoworworkerglobalscope/setinterval/index.html
deleted file mode 100644
index 543639410e..0000000000
--- a/files/ja/web/api/windoworworkerglobalscope/setinterval/index.html
+++ /dev/null
@@ -1,635 +0,0 @@
----
-title: WindowOrWorkerGlobalScope.setInterval()
-slug: Web/API/WindowOrWorkerGlobalScope/setInterval
-tags:
-  - API
-  - DOM
-  - Gecko
-  - Intervals
-  - JavaScript timers
-  - MakeBrowserAgnostic
-  - Method
-  - NeedsMarkupWork
-  - Timers
-  - WindowOrWorkerGlobalScope
-  - setInterval
-translation_of: Web/API/WindowOrWorkerGlobalScope/setInterval
----
-<div>{{APIRef("HTML DOM")}}</div>
-
-<p>{{domxref("WindowOrWorkerGlobalScope")}} ミックスインの <strong><code>setInterval()</code></strong> メソッドは、一定の遅延間隔を置いて関数やコードスニペットを繰り返し呼び出します。これは、インターバルを一意に識別する <code>interval ID</code> を返します。よって {{domxref("WindowOrWorkerGlobalScope.clearInterval", "clearInterval()")}} を呼び出して、後でインターバルを削除できます。このメソッドは {{domxref("Window")}} および {{domxref("Worker")}} インターフェイスで提供します。</p>
-
-<h2 id="Syntax" name="Syntax">構文</h2>
-
-<pre class="syntaxbox notranslate"><em>var intervalID</em> = scope.setInterval(<em>func</em>, <em>delay</em>[, <em>param1</em>, <em>param2</em>, ...]);
-<em>var intervalID</em> = scope.setInterval(<em>code</em>, <em>delay</em>);
-</pre>
-
-<h3 id="Parameters" name="Parameters">引数</h3>
-
-<dl>
- <dt><code>func</code></dt>
- <dd>ミリ秒単位の <code>delay</code> が経過するたびに実行する {{jsxref("function", "関数")}} です。関数には引数が渡されず、また戻り値を想定していません。</dd>
- <dt><code>code</code></dt>
- <dd>関数の代わりに文字列を含める構文も許容されており、ミリ秒単位の <code>delay</code> が経過するたびに文字列をコンパイルして実行します。{{jsxref("eval", "eval()")}} の使用にリスクがあるのと同じ理由で、この構文は <strong>推奨しません</strong>。</dd>
- <dt><code>delay</code></dt>
- <dd>指定した関数またはコードを実行する前にタイマーが待つべき時間をミリ秒 (1/1000 秒) 単位で指定します。引数が 10 より小さい場合は、10 を使用します。実際の遅延が長くなることがあります。例えば {{SectionOnPage("/ja/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout", "遅延が指定値より長い理由")}} をご覧ください。</dd>
- <dt><code>param1, ..., paramN</code> {{optional_inline}}</dt>
- <dd>タイマーが満了したときに、<em>func</em> で指定した関数に渡す追加の引数です。</dd>
-</dl>
-
-<div class="note">
-<p><strong>注記</strong>: Internet Explorer 9 およびそれ以前のバージョンでは、最初の構文で <code>setInterval()</code> に渡す追加の引数は動作しないことに注意してください。同様の機能を実現させるには、ポリフィルを使用してください。(<a href="#Callback_arguments">コールバックの引数</a> を参照)。</p>
-</div>
-
-<h3 id="Return_value" name="Return_value">戻り値</h3>
-
-<p>戻り値 <code>intervalID</code> は、<code>setInterval()</code> を呼び出して作成したタイマーを識別する、0 ではない正の整数値です。この値は、インターバルをキャンセルするために {{domxref("WindowOrWorkerGlobalScope.clearInterval()")}} へ渡すことができます。</p>
-
-<p><code>setInterval()</code> と {{domxref("WindowOrWorkerGlobalScope.setTimeout", "setTimeout()")}} は同じ ID プールを共有しており、さらに <code>clearInterval()</code> と {{domxref("WindowOrWorkerGlobalScope.clearTimeout", "clearTimeout()")}} は技術的に入れ替えて使用できることを意識すると役に立つでしょう。ただし明快さのために、コードを整備するときは混乱を避けるため、常に一致させるようにするべきです。</p>
-
-<div class="note"><strong>注記</strong>: 引数 <code>delay</code> は、符号付き 32 ビット整数に変換されます。IDL における符号付き整数の定義によって、<code>delay</code> は事実上 2147483647ms に制限されます。</div>
-
-<h2 id="Examples" name="Examples">例</h2>
-
-<h3 id="Example_1_Basic_syntax" name="Example_1_Basic_syntax">例 1: 基本的な構文</h3>
-
-<p>以下の例は、<code>setInterval()</code> の基本的な構文を示します。</p>
-
-<pre class="brush:js notranslate">var intervalID = window.setInterval(myCallback, 500);
-
-function myCallback() {
-  // Your code here
-}
-</pre>
-
-<h3 id="Example_2_Alternating_two_colors" name="Example_2_Alternating_two_colors">例 2: 2 つの色を切り替える</h3>
-
-<p>以下の例は停止ボタンを押すまで、1 秒おきに <code>flashtext()</code> 関数を呼び出します。</p>
-
-<pre class="brush:html notranslate">&lt;!DOCTYPE html&gt;
-&lt;html&gt;
-&lt;head&gt;
-  &lt;meta charset="UTF-8" /&gt;
-  &lt;title&gt;setInterval/clearInterval example&lt;/title&gt;
-
-  &lt;script&gt;
-    var nIntervId;
-
-    function changeColor() {
-      nIntervId = setInterval(flashText, 1000);
-    }
-
-    function flashText() {
-      var oElem = document.getElementById('my_box');
-      oElem.style.color = oElem.style.color == 'red' ? 'blue' : 'red';
-      // oElem.style.color == 'red' ? 'blue' : 'red' is a ternary operator.
-    }
-
-    function stopTextColor() {
-      clearInterval(nIntervId);
-    }
-  &lt;/script&gt;
-&lt;/head&gt;
-
-&lt;body onload="changeColor();"&gt;
-  &lt;div id="my_box"&gt;
-    &lt;p&gt;Hello World&lt;/p&gt;
-  &lt;/div&gt;
-
-  &lt;button onclick="stopTextColor();"&gt;Stop&lt;/button&gt;
-&lt;/body&gt;
-&lt;/html&gt;
-</pre>
-
-<h3 id="Example_3_Typewriter_simulation" name="Example_3_Typewriter_simulation">例 3: タイプライターのシミュレーション</h3>
-
-<p>以下の例は始めに何もない状態から、指定したセレクターのグループにマッチする <a href="/ja/docs/DOM/NodeList"><code>NodeList</code></a> へ徐々にコンテンツを入力することによってタイプライターを模倣します。</p>
-
-<pre class="brush:html notranslate">&lt;!DOCTYPE html&gt;
-&lt;html&gt;
-&lt;head&gt;
-&lt;meta charset="UTF-8" /&gt;
-&lt;title&gt;JavaScript Typewriter - MDN Example&lt;/title&gt;
-&lt;script&gt;
-  function Typewriter (sSelector, nRate) {
-
-  function clean () {
-    clearInterval(nIntervId);
-    bTyping = false;
-    bStart = true;
-    oCurrent = null;
-    aSheets.length = nIdx = 0;
-  }
-
-  function scroll (oSheet, nPos, bEraseAndStop) {
-    if (!oSheet.hasOwnProperty('parts') || aMap.length &lt; nPos) { return true; }
-
-    var oRel, bExit = false;
-
-    if (aMap.length === nPos) { aMap.push(0); }
-
-    while (aMap[nPos] &lt; oSheet.parts.length) {
-      oRel = oSheet.parts[aMap[nPos]];
-
-      scroll(oRel, nPos + 1, bEraseAndStop) ? aMap[nPos]++ : bExit = true;
-
-      if (bEraseAndStop &amp;&amp; (oRel.ref.nodeType - 1 | 1) === 3 &amp;&amp; oRel.ref.nodeValue) {
-        bExit = true;
-        oCurrent = oRel.ref;
-        sPart = oCurrent.nodeValue;
-        oCurrent.nodeValue = '';
-      }
-
-      oSheet.ref.appendChild(oRel.ref);
-      if (bExit) { return false; }
-    }
-
-    aMap.length--;
-    return true;
-  }
-
-  function typewrite () {
-    if (sPart.length === 0 &amp;&amp; scroll(aSheets[nIdx], 0, true) &amp;&amp; nIdx++ === aSheets.length - 1) { clean(); return; }
-
-    oCurrent.nodeValue += sPart.charAt(0);
-    sPart = sPart.slice(1);
-  }
-
-  function Sheet (oNode) {
-    this.ref = oNode;
-    if (!oNode.hasChildNodes()) { return; }
-    this.parts = Array.prototype.slice.call(oNode.childNodes);
-
-    for (var nChild = 0; nChild &lt; this.parts.length; nChild++) {
-      oNode.removeChild(this.parts[nChild]);
-      this.parts[nChild] = new Sheet(this.parts[nChild]);
-    }
-  }
-
-  var
-    nIntervId, oCurrent = null, bTyping = false, bStart = true,
-    nIdx = 0, sPart = "", aSheets = [], aMap = [];
-
-  this.rate = nRate || 100;
-
-  this.play = function () {
-    if (bTyping) { return; }
-    if (bStart) {
-      var aItems = document.querySelectorAll(sSelector);
-
-      if (aItems.length === 0) { return; }
-      for (var nItem = 0; nItem &lt; aItems.length; nItem++) {
-        aSheets.push(new Sheet(aItems[nItem]));
-        /* Uncomment the following line if you have previously hidden your elements via CSS: */
-        // aItems[nItem].style.visibility = "visible";
-      }
-
-      bStart = false;
-    }
-
-    nIntervId = setInterval(typewrite, this.rate);
-    bTyping = true;
-  };
-
-  this.pause = function () {
-    clearInterval(nIntervId);
-    bTyping = false;
-  };
-
-  this.terminate = function () {
-    oCurrent.nodeValue += sPart;
-    sPart = "";
-    for (nIdx; nIdx &lt; aSheets.length; scroll(aSheets[nIdx++], 0, false));
-    clean();
-  };
-}
-
-/* usage: */
-var oTWExample1 = new Typewriter(/* elements: */ '#article, h1, #info, #copyleft', /* frame rate (optional): */ 15);
-
-/* default frame rate is 100: */
-var oTWExample2 = new Typewriter('#controls');
-
-/* you can also change the frame rate value modifying the "rate" property; for example: */
-// oTWExample2.rate = 150;
-
-onload = function () {
-  oTWExample1.play();
-  oTWExample2.play();
-};
-&lt;/script&gt;
-&lt;style type="text/css"&gt;
-span.intLink, a, a:visited {
-  cursor: pointer;
-  color: #000000;
-  text-decoration: underline;
-}
-
-#info {
-  width: 180px;
-  height: 150px;
-  float: right;
-  background-color: #eeeeff;
-  padding: 4px;
-  overflow: auto;
-  font-size: 12px;
-  margin: 4px;
-  border-radius: 5px;
-  /* visibility: hidden; */
-}
-&lt;/style&gt;
-&lt;/head&gt;
-
-&lt;body&gt;
-
-&lt;p id="copyleft" style="font-style: italic; font-size: 12px; text-align: center;"&gt;CopyLeft 2012 by &lt;a href="https://developer.mozilla.org/" target="_blank"&gt;Mozilla Developer Network&lt;/a&gt;&lt;/p&gt;
-&lt;p id="controls" style="text-align: center;"&gt;[&amp;nbsp;&lt;span class="intLink" onclick="oTWExample1.play();"&gt;Play&lt;/span&gt; | &lt;span class="intLink" onclick="oTWExample1.pause();"&gt;Pause&lt;/span&gt; | &lt;span class="intLink" onclick="oTWExample1.terminate();"&gt;Terminate&lt;/span&gt;&amp;nbsp;]&lt;/p&gt;
-&lt;div id="info"&gt;
-Vivamus blandit massa ut metus mattis in fringilla lectus imperdiet. Proin ac ante a felis ornare vehicula. Fusce pellentesque lacus vitae eros convallis ut mollis magna pellentesque. Pellentesque placerat enim at lacus ultricies vitae facilisis nisi fringilla. In tincidunt tincidunt tincidunt.
-&lt;/div&gt;
-&lt;h1&gt;JavaScript Typewriter&lt;/h1&gt;
-
-&lt;div id="article"&gt;
-&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ultrices dolor ac dolor imperdiet ullamcorper. Suspendisse quam libero, luctus auctor mollis sed, malesuada condimentum magna. Quisque in ante tellus, in placerat est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec a mi magna, quis mattis dolor. Etiam sit amet ligula quis urna auctor imperdiet nec faucibus ante. Mauris vel consectetur dolor. Nunc eget elit eget velit pulvinar fringilla consectetur aliquam purus. Curabitur convallis, justo posuere porta egestas, velit erat ornare tortor, non viverra justo diam eget arcu. Phasellus adipiscing fermentum nibh ac commodo. Nam turpis nunc, suscipit a hendrerit vitae, volutpat non ipsum.&lt;/p&gt;
-&lt;form&gt;
-&lt;p&gt;Phasellus ac nisl lorem: &lt;input type="text" /&gt;&lt;br /&gt;
-&lt;textarea style="width: 400px; height: 200px;"&gt;Nullam commodo suscipit lacus non aliquet. Phasellus ac nisl lorem, sed facilisis ligula. Nam cursus lobortis placerat. Sed dui nisi, elementum eu sodales ac, placerat sit amet mauris. Pellentesque dapibus tellus ut ipsum aliquam eu auctor dui vehicula. Quisque ultrices laoreet erat, at ultrices tortor sodales non. Sed venenatis luctus magna, ultricies ultricies nunc fringilla eget. Praesent scelerisque urna vitae nibh tristique varius consequat neque luctus. Integer ornare, erat a porta tempus, velit justo fermentum elit, a fermentum metus nisi eu ipsum. Vivamus eget augue vel dui viverra adipiscing congue ut massa. Praesent vitae eros erat, pulvinar laoreet magna. Maecenas vestibulum mollis nunc in posuere. Pellentesque sit amet metus a turpis lobortis tempor eu vel tortor. Cras sodales eleifend interdum.&lt;/textarea&gt;&lt;/p&gt;
-&lt;p&gt;&lt;input type="submit" value="Send" /&gt;
-&lt;/form&gt;
-&lt;p&gt;Duis lobortis sapien quis nisl luctus porttitor. In tempor semper libero, eu tincidunt dolor eleifend sit amet. Ut nec velit in dolor tincidunt rhoncus non non diam. Morbi auctor ornare orci, non euismod felis gravida nec. Curabitur elementum nisi a eros rutrum nec blandit diam placerat. Aenean tincidunt risus ut nisi consectetur cursus. Ut vitae quam elit. Donec dignissim est in quam tempor consequat. Aliquam aliquam diam non felis convallis suscipit. Nulla facilisi. Donec lacus risus, dignissim et fringilla et, egestas vel eros. Duis malesuada accumsan dui, at fringilla mauris bibStartum quis. Cras adipiscing ultricies fermentum. Praesent bibStartum condimentum feugiat.&lt;/p&gt;
-&lt;p&gt;Nam faucibus, ligula eu fringilla pulvinar, lectus tellus iaculis nunc, vitae scelerisque metus leo non metus. Proin mattis lobortis lobortis. Quisque accumsan faucibus erat, vel varius tortor ultricies ac. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec libero nunc. Nullam tortor nunc, elementum a consectetur et, ultrices eu orci. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a nisl eu sem vehicula egestas.&lt;/p&gt;
-&lt;/div&gt;
-&lt;/body&gt;
-&lt;/html&gt;</pre>
-
-<p><a href="/files/3997/typewriter.html">View this demo in action</a>. See also: <a href="/ja/docs/DOM/window.clearInterval"><code>clearInterval()</code></a>.</p>
-
-<h2 id="Callback_arguments" name="Callback_arguments">コールバックの引数</h2>
-
-<p>前述のとおり、Internet Explorer 9 およびそれ以前は、<code>setTimeout()</code> や <code>setInterval()</code> でコールバック関数に引数を渡す機能をサポートしません。以下の <strong>IE 専用</strong> コードは、この制限を克服する方法を説明します。使用方法は、スクリプトの先頭に以下のコードを追加するだけです。</p>
-
-<pre class="brush:js notranslate">/*\
-|*|
-|*|  IE-specific polyfill that enables the passage of arbitrary arguments to the
-|*|  callback functions of javascript timers (HTML5 standard syntax).
-|*|
-|*|  https://developer.mozilla.org/en-US/docs/Web/API/window.setInterval
-|*|  https://developer.mozilla.org/User:fusionchess
-|*|
-|*|  Syntax:
-|*|  var timeoutID = window.setTimeout(func, delay[, param1, param2, ...]);
-|*|  var timeoutID = window.setTimeout(code, delay);
-|*|  var intervalID = window.setInterval(func, delay[, param1, param2, ...]);
-|*|  var intervalID = window.setInterval(code, delay);
-|*|
-\*/
-
-if (document.all &amp;&amp; !window.setTimeout.isPolyfill) {
-  var __nativeST__ = window.setTimeout;
-  window.setTimeout = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) {
-    var aArgs = Array.prototype.slice.call(arguments, 2);
-    return __nativeST__(vCallback instanceof Function ? function () {
-      vCallback.apply(null, aArgs);
-    } : vCallback, nDelay);
-  };
-  window.setTimeout.isPolyfill = true;
-}
-
-if (document.all &amp;&amp; !window.setInterval.isPolyfill) {
-  var __nativeSI__ = window.setInterval;
-  window.setInterval = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) {
-    var aArgs = Array.prototype.slice.call(arguments, 2);
-    return __nativeSI__(vCallback instanceof Function ? function () {
-      vCallback.apply(null, aArgs);
-    } : vCallback, nDelay);
-  };
-  window.setInterval.isPolyfill = true;
-}
-</pre>
-
-<p>もうひとつの方法は、コールバックに無名関数を使用することです。ただし、この方法は少し多くコストがかかります。 例えば:</p>
-
-<pre class="brush:js notranslate">var intervalID = setInterval(function() { myFunc('one', 'two', 'three'); }, 1000);</pre>
-
-<p>さらに、<a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Function/bind">関数の <code>bind</code></a> を使用する方法もあります。例えば:</p>
-
-<pre class="brush:js notranslate">var intervalID = setInterval(function(arg1) {}.bind(undefined, 10), 1000);</pre>
-
-<p>{{h3_gecko_minversion("非アクティブなタブ", "5.0")}}</p>
-
-<p>Gecko 5.0 {{geckoRelease("5.0")}} より非アクティブなタブでは、1 秒あたり 1 回を超えて実行しないようにインターバルを制限します。</p>
-
-<h2 id="The_this_problem" name="The_this_problem">"<a href="/ja/docs/Web/JavaScript/Reference/Operators/this"><code>this</code></a>" 問題</h2>
-
-<p><code>setInterval()</code> (もっと言うと他のどんな関数でも) にメソッドを渡すと、間違った <a href="/ja/docs/Web/JavaScript/Reference/Operators/this"><code>this</code></a> の値で呼び出されることがあります。この問題は <a href="/ja/docs/Web/JavaScript/Reference/Operators/this#As_an_object_method">JavaScript リファレンス</a> で詳しく説明されています。</p>
-
-<h3 id="Explanation" name="Explanation">説明</h3>
-
-<p><code>setInterval()</code> によって実行されるコードは、<code>setInterval</code> が呼び出された関数とは別の実行コンテキスト内で実行されます。その結果、呼び出された関数の <a href="/ja/docs/Web/JavaScript/Reference/Operators/this"><code>this</code></a> キーワードは <code>window</code> (または <code>global</code>) オブジェクトに設定されます。これは <code>setTimeout</code> を呼び出した関数の <code>this</code> の値とは異なります。以下の例をご覧ください (ここでは <code>setInterval()</code> ではなく <code>setTimeout()</code> を使用していますが、どちらのタイマーでも問題は同じです):</p>
-
-<pre class="brush:js notranslate">myArray = ['zero', 'one', 'two'];
-
-myArray.myMethod = function (sProperty) {
-    alert(arguments.length &gt; 0 ? this[sProperty] : this);
-};
-
-myArray.myMethod(); // prints "zero,one,two"
-myArray.myMethod(1); // prints "one"
-setTimeout(myArray.myMethod, 1000); // prints "[object Window]" after 1 second
-setTimeout(myArray.myMethod, 1500, "1"); // prints "undefined" after 1,5 seconds
-// passing the 'this' object with .call won't work
-// because this will change the value of this inside setTimeout itself
-// while we want to change the value of this inside myArray.myMethod
-// in fact, it will be an error because setTimeout code expects this to be the window object:
-setTimeout.call(myArray, myArray.myMethod, 2000); // error: "NS_ERROR_XPC_BAD_OP_ON_WN_PROTO: Illegal operation on WrappedNative prototype object"
-setTimeout.call(myArray, myArray.myMethod, 2500, 2); // same error
-</pre>
-
-<p>この例でわかるとおり、旧来の JavaScript でコールバック関数に <code>this</code> オブジェクトを渡す方法はありません。</p>
-
-<h3 id="A_possible_solution" name="A_possible_solution">考えられる解決策</h3>
-
-<p>"<code>this</code>" 問題の解決策としてネイティブな <code>setTimeout()</code> および <code>setInterval()</code> グローバル関数を、<a href="/ja/docs/JavaScript/Reference/Global_Objects/Function/call"><code>Function.prototype.call</code></a> メソッドを通して呼び出すことが可能な <em>非ネイティブ</em> メソッドに置き換える方法が考えられます。考えられる置き換え方法の例を以下に示します:</p>
-
-<pre class="brush:js notranslate">// Enable the passage of the 'this' object through the JavaScript timers
-
-var __nativeST__ = window.setTimeout, __nativeSI__ = window.setInterval;
-
-window.setTimeout = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) {
-  var oThis = this, aArgs = Array.prototype.slice.call(arguments, 2);
-  return __nativeST__(vCallback instanceof Function ? function () {
-    vCallback.apply(oThis, aArgs);
-  } : vCallback, nDelay);
-};
-
-window.setInterval = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) {
-  var oThis = this, aArgs = Array.prototype.slice.call(arguments, 2);
-  return __nativeSI__(vCallback instanceof Function ? function () {
-    vCallback.apply(oThis, aArgs);
-  } : vCallback, nDelay);
-};</pre>
-
-<div class="note">これら 2 つの置き換えにより、IE のタイマーで HTML5 標準の、コールバック関数に任意の引数を渡すことも可能になります。よって、<em>標準仕様に準拠しない</em> ポリフィルとしても使用できます。<em>標準仕様に準拠する</em>ポリフィルについては、<a href="#Callback_arguments">コールバックの引数</a> をご覧ください。</div>
-
-<p>新機能のテスト:</p>
-
-<pre class="brush:js notranslate">myArray = ['zero', 'one', 'two'];
-
-myArray.myMethod = function (sProperty) {
-    alert(arguments.length &gt; 0 ? this[sProperty] : this);
-};
-
-setTimeout(alert, 1500, 'Hello world!'); // the standard use of setTimeout and setInterval is preserved, but...
-setTimeout.call(myArray, myArray.myMethod, 2000); // prints "zero,one,two" after 2 seconds
-setTimeout.call(myArray, myArray.myMethod, 2500, 2); // prints "two" after 2,5 seconds
-</pre>
-
-<p>この他に <a href="/ja/docs/Web/JavaScript/Reference/Operators/this"><code>this</code></a> 問題のより複雑な解決策として、<a href="#A_little_framework">後述するフレームワーク</a> もあります。</p>
-
-<div class="note">JavaScript 1.8.5 で、関数のすべての呼び出しで <code>this</code> として使用する値を設定できる、<code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Function/bind">Function.prototype.bind()</a></code> メソッドを導入しました。これにより、関数を呼び出したコンテキストに応じて this がどのようになるかが明確にならない問題を簡単に回避できます。また、ES2015 では <a href="/ja/docs/Web/JavaScript/Reference/Functions/Arrow_functions">アロー関数</a> をサポートして、字句 this と組み合わせると myArray の内部では setInterval( () =&gt; this.myMethod) と記述できます。</div>
-
-<h2 id="MiniDaemon_-_A_framework_for_managing_timers" name="MiniDaemon_-_A_framework_for_managing_timers">MiniDaemon: タイマー管理フレームワーク</h2>
-
-<p>多くのタイマーが必要なページでは、実行中のタイマーのイベントをすべて追跡し続けることが困難な場合があります。この問題の解決策のひとつが、オブジェクト内のタイマーの状態に関する情報を保存することです。以下のコードは、そのような抽象化の最小限の例です。コンストラクターは、クロージャの使用を明示的に避けるアーキテクチャになっています。また、<a href="/ja/docs/Web/JavaScript/Reference/Operators/this"><code>this</code></a> オブジェクトをコールバック関数に渡す代替手段も提供します (詳しくは <a href="#The_.22this.22_problem">"this" 問題</a> をご覧ください)。以下のコードは <a href="https://github.com/madmurphy/minidaemon.js">GitHub でも入手できます</a>。</p>
-
-<div class="note">より複雑ですがモジュール化したもの (<code><em>Daemon</em></code>) については、<a href="/ja/Add-ons/Code_snippets/Timers/Daemons">JavaScript Daemons Management</a> をご覧ください。このより複雑なバージョンは、<code><em>Daemon</em></code> コンストラクター用の大規模でスケーラブルなメソッドのコレクションに過ぎません。しかし <code><em>Daemon</em></code> コンストラクター自体は、<code><em>daemon</em></code> のインスタンス化の間に宣言可能な <em>init</em> および <em>onstart</em> 関数のサポートを追加した <code><em>MiniDaemon</em></code> のクローンに過ぎません。<strong>よって <code><em>MiniDaemon</em></code> フレームワークは、シンプルなアニメーションのために推奨する方法であり続けます。</strong>これは、メソッドのコレクションがない <code><em>Daemon</em></code> が本質的に <code><em>MiniDaemon</em></code> のクローンであるためです。</div>
-
-<h3 id="minidaemon.js" name="minidaemon.js">minidaemon.js</h3>
-
-<pre class="brush:js notranslate">/*\
-|*|
-|*|  :: MiniDaemon ::
-|*|
-|*|  Revision #2 - September 26, 2014
-|*|
-|*|  https://developer.mozilla.org/en-US/docs/Web/API/window.setInterval
-|*|  https://developer.mozilla.org/User:fusionchess
-|*|  https://github.com/madmurphy/minidaemon.js
-|*|
-|*|  This framework is released under the GNU Lesser General Public License, version 3 or later.
-|*|  http://www.gnu.org/licenses/lgpl-3.0.html
-|*|
-\*/
-
-function MiniDaemon (oOwner, fTask, nRate, nLen) {
-  if (!(this &amp;&amp; this instanceof MiniDaemon)) { return; }
-  if (arguments.length &lt; 2) { throw new TypeError('MiniDaemon - not enough arguments'); }
-  if (oOwner) { this.owner = oOwner; }
-  this.task = fTask;
-  if (isFinite(nRate) &amp;&amp; nRate &gt; 0) { this.rate = Math.floor(nRate); }
-  if (nLen &gt; 0) { this.length = Math.floor(nLen); }
-}
-
-MiniDaemon.prototype.owner = null;
-MiniDaemon.prototype.task = null;
-MiniDaemon.prototype.rate = 100;
-MiniDaemon.prototype.length = Infinity;
-
-  /* These properties should be read-only */
-
-MiniDaemon.prototype.SESSION = -1;
-MiniDaemon.prototype.INDEX = 0;
-MiniDaemon.prototype.PAUSED = true;
-MiniDaemon.prototype.BACKW = true;
-
-  /* Global methods */
-
-MiniDaemon.forceCall = function (oDmn) {
-  oDmn.INDEX += oDmn.BACKW ? -1 : 1;
-  if (oDmn.task.call(oDmn.owner, oDmn.INDEX, oDmn.length, oDmn.BACKW) === false || oDmn.isAtEnd()) { oDmn.pause(); return false; }
-  return true;
-};
-
-  /* Instances methods */
-
-MiniDaemon.prototype.isAtEnd = function () {
-  return this.BACKW ? isFinite(this.length) &amp;&amp; this.INDEX &lt; 1 : this.INDEX + 1 &gt; this.length;
-};
-
-MiniDaemon.prototype.synchronize = function () {
-  if (this.PAUSED) { return; }
-  clearInterval(this.SESSION);
-  this.SESSION = setInterval(MiniDaemon.forceCall, this.rate, this);
-};
-
-MiniDaemon.prototype.pause = function () {
-  clearInterval(this.SESSION);
-  this.PAUSED = true;
-};
-
-MiniDaemon.prototype.start = function (bReverse) {
-  var bBackw = Boolean(bReverse);
-  if (this.BACKW === bBackw &amp;&amp; (this.isAtEnd() || !this.PAUSED)) { return; }
-  this.BACKW = bBackw;
-  this.PAUSED = false;
-  this.synchronize();
-};
-</pre>
-
-<div class="note">MiniDaemon は、引数をコールバック関数に渡します。この機能をネイティブにサポートしないブラウザーで動作させたい場合は、ここで提案したメソッドのいずれかを使用してください。</div>
-
-<h3 id="Syntax_2" name="Syntax_2">構文</h3>
-
-<p><code>var myDaemon = new MiniDaemon(<em>thisObject</em>, <em>callback</em>[</code><code>, <em>rate</em></code><code>[, <em>length</em>]]);</code></p>
-
-<h3 id="Description" name="Description">説明</h3>
-
-<p>アニメーションで必要なすべての情報 (<a href="/ja/docs/Web/JavaScript/Reference/Operators/this"><code>this</code></a> オブジェクト、コールバック関数、長さ、フレームレート) を持つ JavaScript <a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Object"><code>Object</code></a> を返します。</p>
-
-<h4 id="Parameters_2" name="Parameters_2">引数</h4>
-
-<dl>
- <dt><code>thisObject</code></dt>
- <dd><em>コールバック</em>関数が呼び出された <a href="/ja/docs/Web/JavaScript/Reference/Operators/this"><code>this</code></a> オブジェクト。<a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Object"><code>object</code></a> または <code>null</code> を使用できます。</dd>
- <dt><code>callback</code></dt>
- <dd>繰り返し実行する関数。<strong>これは 3 個の引数を伴って呼び出されます</strong>。<em>index</em> (反復処理の、毎回の処理のインデックス)、<em>length</em> (<em>daemon</em> に割り当てられた総実行回数。有限の数値または <a href="/ja/docs/JavaScript/Reference/Global_Objects/Infinity"><code>Infinity</code></a> を指定できます)、<em>backwards</em> (<em>index</em> を加算するか減算するかを示す論理値)。これは <em>callback</em>.call(<em>thisObject</em>, <em>index</em>, <em>length</em>, <em>backwards</em>) のようなものです。<strong>コールバック関数が <code>false</code> 値を返す場合は、<em>daemon</em> が一時停止しています</strong>。</dd>
- <dt><code>rate (省略可能)</code></dt>
- <dd>毎回の実行の時間間隔 (ミリ秒単位の数値)。デフォルト値は 100 です。</dd>
- <dt><code>length (省略可能)</code></dt>
- <dd>総実行回数。正の整数または <a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Infinity"><code>Infinity</code></a> を使用できます。デフォルト値は <code>Infinity</code> です。</dd>
-</dl>
-
-<h4 id="MiniDaemon_instances_properties" name="MiniDaemon_instances_properties"><code>MiniDaemon</code> インスタンスのプロパティ</h4>
-
-<dl>
- <dt><code>myDaemon.owner</code></dt>
- <dd>daemon が実行される <a href="/ja/docs/Web/JavaScript/Reference/Operators/this"><code>this</code></a> オブジェクト (読み書き可能)。<a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Object"><code>object</code></a> または <code>null</code> を使用できます。</dd>
- <dt><code>myDaemon.task</code></dt>
- <dd>繰り返し実行する関数 (読み書き可能)。これは 3 個の引数を伴って呼び出されます。<em>index</em> (反復処理の、毎回の処理のインデックス)、<em>length</em> (daemon に割り当てられた総実行回数。有限の数値または <a href="/ja/docs/JavaScript/Reference/Global_Objects/Infinity"><code>Infinity</code></a> を指定できます)、<em>backwards</em> (<em>index</em> 減算するか否かを示す論理値)。<code>myDaemon.task</code> の関数が <code>false</code> 値を返す場合は、<em>daemon</em> が一時停止しています。</dd>
- <dt><code>myDaemon.rate</code></dt>
- <dd>毎回の実行の時間間隔 (ミリ秒単位の数値、読み書き可能)。</dd>
- <dt><code>myDaemon.length</code></dt>
- <dd>総実行回数。正の整数または <a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Infinity"><code>Infinity</code></a> を使用できます (読み書き可能)。</dd>
-</dl>
-
-<h4 id="MiniDaemon_instances_methods" name="MiniDaemon_instances_methods"><code>MiniDaemon</code> インスタンスのメソッド</h4>
-
-<dl>
- <dt><code>myDaemon.isAtEnd()</code></dt>
- <dd><em>daemon</em> が開始/終了状態であるか否かを示す論理値を返します。</dd>
- <dt><code>myDaemon.synchronize()</code></dt>
- <dd>開始した daemon のタイマーと、daemon の実行時間を同期します。</dd>
- <dt><code>myDaemon.pause()</code></dt>
- <dd>daemon を一時停止します。</dd>
- <dt><code>myDaemon.start([<em>reverse</em>])</code></dt>
- <dd>daemon を前方 (毎回実行するたびに <em>index</em> が増加) または後方 (<em>index</em> が減少) に開始します。</dd>
-</dl>
-
-<h4 id="MiniDaemon_global_object_methods" name="MiniDaemon_global_object_methods"><code>MiniDaemon</code> グローバルオブジェクトのメソッド</h4>
-
-<dl>
- <dt><code>MiniDaemon.forceCall(<em>minidaemon</em>)</code></dt>
- <dd>終端に達しているか否かの事実にかかわらず、<code><em>minidaemon</em>.task</code> の関数へのひとつのコールバックを強制します。どの場合も、内部の <code>INDEX</code> プロパティは (実際の実行方向に応じて) 増加または減少します。</dd>
-</dl>
-
-<h3 id="Example_usage" name="Example_usage">使用例</h3>
-
-<p>HTML ページ:</p>
-
-<pre class="brush:html notranslate">&lt;!DOCTYPE html&gt;
-&lt;html&gt;
-&lt;head&gt;
-  &lt;meta charset="UTF-8" /&gt;
-  &lt;title&gt;MiniDaemin Example - MDN&lt;/title&gt;
-  &lt;script type="text/javascript" src="minidaemon.js"&gt;&lt;/script&gt;
-  &lt;style type="text/css"&gt;
-    #sample_div {
-      visibility: hidden;
-    }
-  &lt;/style&gt;
-&lt;/head&gt;
-
-&lt;body&gt;
-  &lt;p&gt;
-    &lt;input type="button" onclick="fadeInOut.start(false /* optional */);" value="fade in" /&gt;
-    &lt;input type="button" onclick="fadeInOut.start(true);" value="fade out"&gt;
-    &lt;input type="button" onclick="fadeInOut.pause();" value="pause" /&gt;
-  &lt;/p&gt;
-
-  &lt;div id="sample_div"&gt;Some text here&lt;/div&gt;
-
-  &lt;script type="text/javascript"&gt;
-    function opacity (nIndex, nLength, bBackwards) {
-      this.style.opacity = nIndex / nLength;
-      if (bBackwards ? nIndex === 0 : nIndex === 1) {
-        this.style.visibility = bBackwards ? 'hidden' : 'visible';
-      }
-    }
-
-    var fadeInOut = new MiniDaemon(document.getElementById('sample_div'), opacity, 300, 8);
-  &lt;/script&gt;
-&lt;/body&gt;
-&lt;/html&gt;</pre>
-
-<p><a href="/files/3995/minidaemon_example.html" title="MiniDaemon Example">実際の動作例を見る</a></p>
-
-<h2 id="Notes" name="Notes">注記</h2>
-
-<p><code>setInterval()</code> 関数は一般に、アニメーションのように何度も実行される関数に遅延をセットするのに使われます。</p>
-
-<p>{{domxref("WindowOrWorkerGlobalScope.clearInterval()")}} を使ってインターバルをキャンセルすることができます。</p>
-
-<p>指定時間後に <em>一度</em> だけ関数を呼び出したい場合には、{{domxref("WindowOrWorkerGlobalScope.setTimeout()")}} を使います。</p>
-
-<h3 id="Ensure_that_execution_duration_is_shorter_than_interval_frequency" name="Ensure_that_execution_duration_is_shorter_than_interval_frequency">実行時間をインターバルより確実に短くする</h3>
-
-<p>ロジックの実行時間がインターバル時間より長くなる可能性がある場合は、{{domxref("WindowOrWorkerGlobalScope.setTimeout")}} を使用して名前付き関数を再帰的に呼び出すことを推奨します。例えば 5 秒おきにリモートサーバーへ接続するために <code>setInterval</code> を使用するとき、ネットワークの遅延やサーバーの不応答などさまざまな問題で、割り当てられた時間内にリクエストが完了しない可能性があります。そのため、必ずしも順番どおりには返らない XHR リクエストがキュー内にあることに気づくかもしれません。</p>
-
-<p>この場合は、再帰的な <code>setTimeout()</code> のパターンを推奨します:</p>
-
-<pre class="brush:js notranslate">(function loop(){
-   setTimeout(function() {
-      // Your logic here
-
-      loop();
-  }, delay);
-})();
-</pre>
-
-<p>このコードスニペットでは、名前付き関数 <code>loop()</code> を宣言して直ちに実行します。<code>loop()</code> はロジックが完全に実行された後に、内部の <code>setTimeout()</code> によって再帰呼び出しされます。このパターンは一定の間隔で呼び出すことが保証されませんが、再帰呼び出しの前に前の実行が完了することが保証されます。</p>
-
-<h3 id="Throttling_of_intervals" name="Throttling_of_intervals">インターバルを抑制する</h3>
-
-<p>Firefox で <code>setInterval()</code> は、{{domxref("WindowOrWorkerGlobalScope.setTimeout","setTimeout()")}} と同様に、インターバルが制限されます。<a href="/ja/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout#Reasons_for_delays_longer_than_specified">遅延が指定値より長い理由</a> をご覧ください。</p>
-
-<h2 id="Specifications" name="Specifications">仕様</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th>仕様書</th>
-   <th>策定状況</th>
-   <th>コメント</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', 'webappapis.html#dom-setinterval', 'WindowOrWorkerGlobalScope.setInterval()')}}</td>
-   <td>{{Spec2("HTML WHATWG")}}</td>
-   <td>最新の仕様で、メソッドを <code>WindowOrWorkerGlobalScope</code> ミックスインに移動。</td>
-  </tr>
-  <tr>
-   <td>{{SpecName("HTML WHATWG", "webappapis.html#dom-setinterval", "WindowTimers.setInterval()")}}</td>
-   <td>{{Spec2("HTML WHATWG")}}</td>
-   <td>最初期の定義 (DOM Level 0)</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザー実装状況</h2>
-
-<div>
-
-
-<p>{{Compat("api.WindowOrWorkerGlobalScope.setInterval")}}</p>
-</div>
-
-<h2 id="See_also" name="See_also">関連情報</h2>
-
-<ul>
- <li><a href="/ja/Add-ons/Code_snippets/Timers">JavaScript timers</a></li>
- <li>{{domxref("WindowOrWorkerGlobalScope.setTimeout")}}</li>
- <li>{{domxref("WindowOrWorkerGlobalScope.clearTimeout")}}</li>
- <li>{{domxref("WindowOrWorkerGlobalScope.clearInterval")}}</li>
- <li>{{domxref("window.requestAnimationFrame")}}</li>
- <li><a href="/ja/Add-ons/Code_snippets/Timers/Daemons"><em>Daemons</em> management</a></li>
-</ul>
diff --git a/files/ja/web/api/windoworworkerglobalscope/settimeout/index.html b/files/ja/web/api/windoworworkerglobalscope/settimeout/index.html
deleted file mode 100644
index 34c10664ce..0000000000
--- a/files/ja/web/api/windoworworkerglobalscope/settimeout/index.html
+++ /dev/null
@@ -1,419 +0,0 @@
----
-title: WindowOrWorkerGlobalScope.setTimeout()
-slug: Web/API/WindowOrWorkerGlobalScope/setTimeout
-tags:
-  - API
-  - HTML DOM
-  - Intervals
-  - JavaScript timers
-  - MakeBrowserAgnostic
-  - Method
-  - NeedsCompatTable
-  - NeedsMarkupWork
-  - NeedsUpdate
-  - Reference
-  - Timers
-  - WindowOrWorkerGlobalScope
-  - setTimeout
-translation_of: Web/API/WindowOrWorkerGlobalScope/setTimeout
----
-<div>{{APIRef("HTML DOM")}}</div>
-
-<p><strong><code>setTimeout()</code></strong> は {{domxref("WindowOrWorkerGlobalScope")}} ミックスインのメソッド (および <code>Window.setTimeout()</code> の後継) で、時間切れになると関数または指定されたコードの断片を実行するタイマーを設定します。</p>
-
-<h2 id="Syntax" name="Syntax">構文</h2>
-
-<pre class="syntaxbox">var <var>timeoutID</var> = <var>scope</var>.setTimeout(<var>function</var>[, <var>delay</var>, <var>arg1</var>, <var>arg2</var>, ...]);
-var <var>timeoutID</var> = <var>scope</var>.setTimeout(<var>function</var>[, <var>delay</var>]);
-var <var>timeoutID</var> = <var>scope</var>.setTimeout(<var>code</var>[, <var>delay</var>]);
-</pre>
-
-<h3 id="Parameters" name="Parameters">引数</h3>
-
-<dl>
- <dt><code><var>function</var></code></dt>
- <dd>タイマーが満了した後に実行したい {{jsxref("function", "関数")}}。</dd>
- <dt><code><var>code</var></code></dt>
- <dd>関数の代わりに文字列を含める代替構文も許容されており、タイマーが満了したときに文字列をコンパイルして実行します。 {{jsxref("Global_Objects/eval", "eval()")}} の使用にリスクがあるのと同じ理由で、この構文は<strong>推奨しません</strong>。</dd>
- <dt><code><var>delay</var></code> {{optional_inline}}</dt>
- <dd>指定した関数やコードを実行する前に待つタイマーの時間をミリ秒 (1/1000 秒) 単位で指定します。この引数を省略すると値 0 を使用しますので "直ちに" 実行する、より正確に言えばできるだけ早く実行することを意味します。どちらの場合も、実際の遅延が想定より長くなることがあります。後述する {{anch("Reasons for delays longer than specified", "遅延が指定値より長い理由")}} をご覧ください。</dd>
- <dt><code><var>arg1</var>, ..., <var>argN</var></code> {{optional_inline}}</dt>
- <dd>タイマーが満了したときに、 <code><var>function</var></code> で指定された関数に渡す追加の引数です。</dd>
-</dl>
-
-<div class="note">
-<p><strong>注</strong>: Internet Explorer 9 およびそれ以前のバージョンでは、最初の構文で関数に渡す追加の引数は動作しないことに注意してください。同様の機能を実現させるには、ポリフィルを使用してください。({{anch("Polyfill", "ポリフィル")}} を参照)。</p>
-</div>
-
-<h3 id="Return_value" name="Return_value">返値</h3>
-
-<p>返される <code><var>timeoutID</var></code> は正の整数値で、 <code>setTimeout()</code> を呼び出して作成したタイマーを識別します。この値を {{domxref("WindowOrWorkerGlobalScope.clearTimeout","clearTimeout()")}} へ渡すことで、タイムアウトを取り消すことができます。</p>
-
-<p><code>setTimeout()</code> と {{domxref("WindowOrWorkerGlobalScope.setInterval", "setInterval()")}} は同じ ID プールを共有しており、さらに <code>clearTimeout()</code> と {{domxref("WindowOrWorkerGlobalScope.clearInterval", "clearInterval()")}} は技術的に入れ替えて使用できることを意識すると役に立つかもしれません。ただし明確さのために、コードを整備するときは混乱を避けるため、常に一致させるようにするべきです。</p>
-
-<p>同じオブジェクト (ウィンドウやワーカー) では、後に <code>setTimeout()</code> や <code>setInterval()</code> を呼び出しても タイムアウト ID を再使用しないことが保証されています。ただし、別なオブジェクトでは別の ID プールを使用します。</p>
-
-<h2 id="Example" name="Example">例</h2>
-
-<p>以下の例はウェブページに 2 つのシンプルなボタンを置いており、<code>setTimeout()</code> および <code>clearTimeout()</code> のルーチンを実行します。1 番目のボタンを押下すると 2 秒後にアラートダイアログを呼び出すタイムアウトを設定して、<code>clearTimeout()</code> で使用するタイムアウト ID を保存します。2 番目のボタンを押下すると、このタイムアウトをキャンセルできます。</p>
-
-<h3 id="HTML">HTML</h3>
-
-<pre class="brush: html">&lt;p&gt;Live Example&lt;/p&gt;
-&lt;button onclick="delayedAlert();"&gt;2秒後にアラートボックスを表示する&lt;/button&gt;
-&lt;p&gt;&lt;/p&gt;
-&lt;button onclick="clearAlert();"&gt;アラートを事前にキャンセルする&lt;/button&gt;
-</pre>
-
-<h3 id="JavaScript">JavaScript</h3>
-
-<pre class="brush: js">var timeoutID;
-
-function delayedAlert() {
-  timeoutID = window.setTimeout(window.alert, 2*1000, '本当に遅い！');
-}
-
-function clearAlert() {
-  window.clearTimeout(timeoutID);
-}
-</pre>
-
-<h3 id="Result" name="Result">結果</h3>
-
-<p>{{EmbedLiveSample('Example')}}</p>
-
-<p><a href="/ja/docs/Web/API/WindowTimers/clearTimeout#Example"><code>clearTimeout()</code> の例</a> もご覧ください。</p>
-
-<h2 id="Polyfill" name="Polyfill">ポリフィル</h2>
-
-<p>コールバック関数に 1 つ以上の引数を渡す必要があるが、<code>setTimeout()</code> や <code>setInterval()</code> を使用して追加の引数を渡す機能に対応していないブラウザー (例えば Internet Explorer 9 以前) で動作しなければならない場合は、HTML5 標準の引数渡し機能を可能にする以下のポリフィルを追加するとよいでしょう。このコードをスクリプトの先頭に追加してください。</p>
-
-<pre class="brush: js">/*\
-|*|
-|*|  Polyfill which enables the passage of arbitrary arguments to the
-|*|  callback functions of JavaScript timers (HTML5 standard syntax).
-|*|
-|*|  https://developer.mozilla.org/en-US/docs/DOM/window.setInterval
-|*|
-|*|  Syntax:
-|*|  var timeoutID = window.setTimeout(func, delay[, arg1, arg2, ...]);
-|*|  var timeoutID = window.setTimeout(code, delay);
-|*|  var intervalID = window.setInterval(func, delay[, arg1, arg2, ...]);
-|*|  var intervalID = window.setInterval(code, delay);
-|*|
-\*/
-
-(function() {
-  setTimeout(function(arg1) {
-    if (arg1 === 'test') {
-      // feature test is passed, no need for polyfill
-      return;
-    }
-    var __nativeST__ = window.setTimeout;
-    window.setTimeout = function(vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */ ) {
-      var aArgs = Array.prototype.slice.call(arguments, 2);
-      return __nativeST__(vCallback instanceof Function ? function() {
-        vCallback.apply(null, aArgs);
-      } : vCallback, nDelay);
-    };
-  }, 0, 'test');
-
-  var interval = setInterval(function(arg1) {
-    clearInterval(interval);
-    if (arg1 === 'test') {
-      // feature test is passed, no need for polyfill
-      return;
-    }
-    var __nativeSI__ = window.setInterval;
-    window.setInterval = function(vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */ ) {
-      var aArgs = Array.prototype.slice.call(arguments, 2);
-      return __nativeSI__(vCallback instanceof Function ? function() {
-        vCallback.apply(null, aArgs);
-      } : vCallback, nDelay);
-    };
-  }, 0, 'test');
-}())
-</pre>
-
-<h3 id="IE-only_fix" name="IE-only_fix">IE 限定の修正</h3>
-
-<p>IE 9 およびそれ以前を含む、他のすべてのモバイルブラウザーやデスクトップブラウザーで完全に目立たない修正が必要である場合は、以下の JavaScript 条件付きコメントを使用できます。</p>
-
-<pre class="brush: js">/*@cc_on
-  // conditional IE &lt; 9 only fix
-  @if (@_jscript_version &lt;= 9)
-  (function(f){
-     window.setTimeout = f(window.setTimeout);
-     window.setInterval = f(window.setInterval);
-  })(function(f){return function(c,t){var a=[].slice.call(arguments,2);return f(function(){c instanceof Function?c.apply(this,a):eval(c)},t)}});
-  @end
-@*/
-</pre>
-
-<p>あるいは IE の HTML 条件機能による、とてもクリーンな方法を使用します:</p>
-
-<pre class="brush: html">&lt;!--[if lte IE 9]&gt;&lt;script&gt;
-(function(f){
-window.setTimeout=f(window.setTimeout);
-window.setInterval=f(window.setInterval);
-})(function(f){return function(c,t){
-var a=[].slice.call(arguments,2);return f(function(){c instanceof Function?c.apply(this,a):eval(c)},t)}
-});
-&lt;/script&gt;&lt;![endif]--&gt;
-</pre>
-
-<h3 id="Workarounds" name="Workarounds">回避策</h3>
-
-<p>もうひとつの方法は、コールバックに無名関数を使用することです。ただし、この方法は少し多くコストがかかります。例:</p>
-
-<pre class="brush: js">var intervalID = setTimeout(function() { myFunc('one', 'two', 'three'); }, 1000);
-</pre>
-
-<p>上記の例は、<a href="/ja/docs/Web/JavaScript/Reference/Functions/Arrow_functions">アロー関数</a> を使用して以下のように記述できます。</p>
-
-<pre class="brush: js">var intervalID = setTimeout(() =&gt; { myFunc('one', 'two', 'three'); }, 1000);
-</pre>
-
-<p>さらに、<a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Function/bind">関数の <code>bind</code></a> を使用する方法もあります。例:</p>
-
-<pre class="brush: js">setTimeout(function(arg1){}.bind(undefined, 10), 1000);
-</pre>
-
-<h2 id="The_this_problem" name="The_this_problem">"this" 問題</h2>
-
-<p><code>setTimeout()</code> にメソッド (そういうことならほかの関数も) を渡すとき、コードが実行される際の <code>this</code> の値が想定とは異なるかもしれません。この問題は <a href="/ja/docs/Web/JavaScript/Reference/Operators/this#As_an_object_method">JavaScript リファレンス</a> でより詳細に説明されています。</p>
-
-<h3 id="Explanation" name="Explanation">説明</h3>
-
-<p><code>setTimeout()</code> によって実行されるコードは、 <code>setTimeout</code> が呼び出された関数とは別の実行コンテキスト内から呼び出されます。呼び出された関数に <code>this</code> キーワードを設定する通常の規則を適用して、呼び出しあるいは <code>bind</code> で <code>this</code> を設定しなければ、非 strict モードでは <code>global</code> (または <code>window</code>)、strict モードでは undefined になります。これは、<code>setTimeout</code> が呼び出された関数の <code>this</code> 値と同じにはなりません。</p>
-
-<div class="note">
-<p><strong>注:</strong> <code>setTimeout</code> コールバックの既定の <code>this</code> の値は、厳格モードであっても <code>undefined</code> ではなく、 <code>window</code> オブジェクトです。</p>
-</div>
-
-<p>以下の例をご覧ください。</p>
-
-<pre class="brush: js">myArray = ['zero', 'one', 'two'];
-myArray.myMethod = function (sProperty) {
-  alert(arguments.length &gt; 0 ? this[sProperty] : this);
-};
-
-myArray.myMethod(); // prints "zero,one,two"
-myArray.myMethod(1); // prints "one"</pre>
-
-<p><code>myMethod</code> を呼び出したときに、呼び出しによって <code>this</code> が <code>myArray</code> に設定されますので、関数内で <code>this[sProperty]</code> は <code>myArray[sProperty]</code> と等価です。しかし、以下のコードでは動作が異なります。</p>
-
-<pre class="brush: js">setTimeout(myArray.myMethod, 1.0*1000); // 1秒後に "[object Window]" と表示
-setTimeout(myArray.myMethod, 1.5*1000, '1'); // 1.5秒後に "undefined" と表示</pre>
-
-<p><code>myArray.myMethod</code> 関数を <code>setTimeout</code> に渡しており、関数が呼び出されると <code>this</code> が前のように設定されず、既定値の <code>window</code> オブジェクトになります。Array の forEach や reduce などのメソッドにあるような、<code>thisArg</code> を setTimeout に渡すオプションもありません。また以下のように、<code>this</code> を設定するために <code>call</code> を使用する方法も動作しません。</p>
-
-<pre class="brush: js">setTimeout.call(myArray, myArray.myMethod, 2.0*1000); // error: "NS_ERROR_XPC_BAD_OP_ON_WN_PROTO: Illegal operation on WrappedNative prototype object"
-setTimeout.call(myArray, myArray.myMethod, 2.5*1000, 2); // same error
-</pre>
-
-<h3 id="Possible_solutions" name="Possible_solutions">考えられる解決策</h3>
-
-<p>この問題の一般的な解決策は、<code>this</code> に必要な値を設定するラッパー関数を使用することです:</p>
-
-<pre class="brush: js">setTimeout(function(){myArray.myMethod()}, 2.0*1000); // prints "zero,one,two" after 2 seconds
-setTimeout(function(){myArray.myMethod('1')}, 2.5*1000); // prints "one" after 2.5 seconds</pre>
-
-<p>代わりにアロー関数も使用できます。</p>
-
-<pre class="brush: js">setTimeout(() =&gt; {myArray.myMethod()}, 2.0*1000); // prints "zero,one,two" after 2 seconds
-setTimeout(() =&gt; {myArray.myMethod('1')}, 2.5*1000); // prints "one" after 2.5 seconds</pre>
-
-<p>他に考えられる "<code>this</code>" 問題の解決策として、本来の <code>setTimeout()</code> および <code>setInterval()</code> グローバル関数を、<code>this</code> オブジェクトを渡せるようにして、コールバックで <a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Function/call"><code>Function.prototype.call</code></a> を使用して設定するように置き換える方法があります。例えば:</p>
-
-<pre class="brush: js">// Enable setting 'this' in JavaScript timers
-
-var __nativeST__ = window.setTimeout,
-    __nativeSI__ = window.setInterval;
-
-window.setTimeout = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) {
-  var oThis = this,
-      aArgs = Array.prototype.slice.call(arguments, 2);
-  return __nativeST__(vCallback instanceof Function ? function () {
-    vCallback.apply(oThis, aArgs);
-  } : vCallback, nDelay);
-};
-
-window.setInterval = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) {
-  var oThis = this,
-      aArgs = Array.prototype.slice.call(arguments, 2);
-  return __nativeSI__(vCallback instanceof Function ? function () {
-    vCallback.apply(oThis, aArgs);
-  } : vCallback, nDelay);
-};</pre>
-
-<div class="note"><strong>注</strong>: これら 2 つの置き換えにより、IE のタイマーで HTML5 標準の、コールバック関数に任意の引数を渡すことも可能になります。よって、ポリフィルとしても使用できます。<a href="#Callback_arguments">Callback arguments</a> の節をご覧ください。</div>
-
-<p>新機能のテスト:</p>
-
-<pre class="brush: js">myArray = ['zero', 'one', 'two'];
-myArray.myMethod = function (sProperty) {
-    alert(arguments.length &gt; 0 ? this[sProperty] : this);
-};
-
-setTimeout(alert, 1500, 'Hello world!'); // the standard use of setTimeout and setInterval is preserved, but...
-setTimeout.call(myArray, myArray.myMethod, 2.0*1000); // prints "zero,one,two" after 2 seconds
-setTimeout.call(myArray, myArray.myMethod, 2.5*1000, 2); // prints "two" after 2.5 seconds
-</pre>
-
-<div class="note"><strong>注</strong>: JavaScript 1.8.5 で、関数のすべての呼び出しに対して <code>this</code> の値を設定する <code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Function/bind">Function.prototype.bind()</a></code> メソッドを導入しました。これにより、コールバックで <code>this</code> の値を設定するためにラッパー関数を使用しなければならない状況を回避できます。</div>
-
-<p><code>bind()</code> の使用例:</p>
-
-<pre class="brush: js">myArray = ['zero', 'one', 'two'];
-myBoundMethod = (function (sProperty) {
-    console.log(arguments.length &gt; 0 ? this[sProperty] : this);
-}).bind(myArray);
-
-myBoundMethod(); // prints "zero,one,two" because 'this' is bound to myArray in the function
-myBoundMethod(1); // prints "one"
-setTimeout(myBoundMethod, 1.0*1000); // still prints "zero,one,two" after 1 second because of the binding
-setTimeout(myBoundMethod, 1.5*1000, "1"); // prints "one" after 1.5 seconds
-</pre>
-
-<h2 id="Notes" name="Notes">注</h2>
-
-<p>タイムアウトは {{domxref("WindowOrWorkerGlobalScope.clearTimeout","clearTimeout()")}} を使って中止することができます。</p>
-
-<p>もし関数を繰返し (例えば、 N ミリ秒ごとに) 呼び出したいなら、 {{domxref("WindowOrWorkerGlobalScope.setInterval()","setInterval()")}} を使うことを検討してください。</p>
-
-<h3 id="Passing_string_literals" name="Passing_string_literals">文字列リテラルの使用</h3>
-
-<p>関数の代わりに文字列を <code>setTimeout()</code> に渡すと、<code><a href="/ja/docs/JavaScript/Reference/Global_Objects/eval#Don.27t_use_eval.21">eval</a> を使うのと同様の問題が発生します。</code></p>
-
-<pre class="brush: js">// 推奨
-window.setTimeout(function() {
-  alert('Hello World!');
-}, 500);
-
-// 非推奨
-window.setTimeout("alert('Hello World!');", 500);
-</pre>
-
-<p><code>setTimeout</code> に渡した文字列はグローバルコンテキストで評価されます。そのため、<code>setTimeout()</code> が呼び出されたコンテキストのローカルシンボルは、文字列を評価したコードからは利用できません。</p>
-
-<h3 id="Reasons_for_delays_longer_than_specified" name="Reasons_for_delays_longer_than_specified">遅延が指定値より長い理由</h3>
-
-<p>タイムアウトが満了するまでに予想より長い時間がかかる理由は複数あります。このセクションでは、もっとも一般的な理由を説明します。</p>
-
-<h4 id="Timeouts_throttled_to_≥_4ms" name="Timeouts_throttled_to_≥_4ms">タイムアウトを 4ms 以上に制限する</h4>
-
-<p>現代のブラウザーは、<code>setTimeout()</code> や {{domxref("WindowOrworkerGlobalScope.setInterval","setInterval()")}} がコールバックのネスト (ネストの深さが少なくとも数段階ある) によって連続的に呼び出された、あるいは連続的なインターバルが数回発生した後に呼び出されたときに、少なくとも 4 ミリ秒ごとに呼び出されるように制限をかけます。例えば:</p>
-
-<pre class="brush: js">function cb() { f(); setTimeout(cb, 0); }
-setTimeout(cb, 0);
-setInterval(f, 0);</pre>
-
-<p>Chrome および Firefox では、5 回目の連続的なコールバックの呼び出しで制限をかけます。また Safar は 6 回目、Edge は 3 回目で制限をかけます。Gecko は <a href="/ja/docs/Mozilla/Firefox/Releases/56">バージョン 56</a> で、<code>setInterval()</code> で制限を始めました (後述のとおり <code>setTimeout()</code> は以前から行っていました)。</p>
-
-<p><a href="http://code.google.com/p/chromium/issues/detail?id=792#c10">歴史的に</a> 一部のブラウザー (例えば Firefox) は、あらゆる場所から呼び出された <code>setInterval()</code>、あるいはネストの深さが少なくとも数段階ある <code>setTimeout()</code> が呼び出されたときの制限を、若干異なる動作で実装しています。。</p>
-
-<p>0 ms タイマーをモダンブラウザーで実装するには、<a href="http://dbaron.org/log/20100309-faster-timeouts">ここで説明されている</a> {{domxref("window.postMessage()")}} を利用できます。</p>
-
-<div class="note">
-<p><strong>注</strong>: 最小遅延である <code>DOM_MIN_TIMEOUT_VALUE</code> は 4 ms (Firefox の <code>dom.min_timeout_value</code> の設定に保存されています) であり、<code>DOM_CLAMP_TIMEOUT_NESTING_LEVEL</code> は 5 です。</p>
-</div>
-
-<div class="note">
-<p><strong>注</strong>: 4 ms は <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/timers.html#timers">HTML5 の仕様で標準化されています</a>。 そして、2010 年以降にリリースされたブラウザー間で一貫しています。{{geckoRelease("5.0")}} 以前では、ネストされた setTimeout の最小値は 10 ms でした。</p>
-</div>
-
-<h4 id="Timeouts_in_inactive_tabs_throttled_to_≥_1000ms" name="Timeouts_in_inactive_tabs_throttled_to_≥_1000ms">非アクティブタブのタイムアウトは 1000 ms 以上に制限される</h4>
-
-<p>バックグラウンドのタブによる負荷 (およびバッテリー消費) を軽減するため、アクティブ状態でないタブでのタイマーの呼び出しは、1 秒 (1,000 ms) あたり 1 回までとなります。</p>
-
-<p>Firefox はこの動作をバージョン 5 ({{bug(633421)}} を参照。1000 ms の定数は設定項目 <code>dom.min_background_timeout_value</code> で変更できます) から、Chrome はこの動作をバージョン 11 (<a href="http://crbug.com/66078">crbug.com/66078</a>) から実装しています。</p>
-
-<p>Android 版 Firefox は {{bug(736602)}} によって、 Firefox 14 からバックグラウンドタブで 15 分のタイムアウト値を使用しており、またバックグラウンドタブを完全にアンロードすることもできます。</p>
-
-<div class="note">
-<p>Firefox 50 では、 Web Audio API の {{domxref("AudioContext")}} が音声を再生中であればバックグラウンドタブの制限を行いません。さらに Firefox 51 では、音声を再生していなくても {{domxref("AudioContext")}} を提供していれば、バックグラウンドタブの制限を行わないように改良しました。これによりタブがバックグラウンドであるときに、楽譜を基に音楽を再生するアプリで拍子が合わない、あるいは音楽が正しく同期しないといった問題が解決します。</p>
-</div>
-
-<h4 id="Throttling_of_tracking_timeout_scripts" name="Throttling_of_tracking_timeout_scripts">トラッキングスクリプトのタイムアウトを制限する</h4>
-
-<p>Firefox 55 より、トラッキングスクリプト (例えば Google Analytics や、<a href="https://wiki.mozilla.org/Security/Tracking_protection#Lists">TP リスト</a> によって Firefox がトラッキングスクリプトであると認識するスクリプトの URL) にさらなる制限を課します。フォアグラウンドで実行しているとき、最小遅延の制限は 4ms のままです。しかしバックグラウンドのタブでは、最小遅延を 10,000ms または 10 秒に制限します。これはドキュメントが最初に読み込まれてから 30 秒後に発効します。</p>
-
-<p>この動作を制御する設定項目は以下のとおりです。</p>
-
-<ul>
- <li><code>dom.min_tracking_timeout_value</code>: 4</li>
- <li><code>dom.min_tracking_background_timeout_value</code>: 10000</li>
- <li><code>dom.timeout.tracking_throttling_delay</code>: 30000</li>
-</ul>
-
-<h4 id="Late_timeouts" name="Late_timeouts">タイムアウトの遅延</h4>
-
-<p>前出の "制限" に加えて、ページ内 (またはOSやブラウザー自身) の他のタスクの処理に時間がかかると、タイムアウトは遅れます。注目すべき重要なケースとして、<code>setTimeout()</code> を呼び出したスレッドが終了するまで関数やコードスニペットを実行できないことが挙げられます。例えば:</p>
-
-<pre class="brush: js">function foo() {
-  console.log('foo has been called');
-}
-setTimeout(foo, 0);
-console.log('After setTimeout');</pre>
-
-<p>このコードは、コンソールへ以下のように出力します。</p>
-
-<pre>After setTimeout
-foo has been called</pre>
-
-<p>これは <code>setTimeout</code> を遅延 0 で呼び出したとしても、直ちに実行するのではなくキューに載せて、次の機会に実行するようスケジューリングされるためです。現在実行中のコードはキューにある関数を実行する前に完了しなければならず、このために実行結果の順序が想定どおりにならない場合があります。</p>
-
-<h3 id="WebExtension_のバックグラウンドページとタイマー">WebExtension のバックグラウンドページとタイマー</h3>
-
-<p><a href="/ja/docs/Mozilla/Add-ons/WebExtensions">WebExtension</a> のバックグラウンドページでは、タイマーが正しく動作しません。これはバックグラウンドページが実際には常にロードされたままではないからです。ブラウザ－は使用されていない場合はアンロードし、必要なときに復元することができます。これは拡張機能にはほとんど透過的ですが、いくつかのもの (JS タイマーを含む) はアンロード/リストアサイクル全体では動作しないので、バックグラウンドページは代わりにアラームを使うことを推奨します。これについての詳細は <a href="https://developer.chrome.com/extensions/background_migration">Migrate to Event Driven Background Scripts</a> にあります。</p>
-
-<p>この記事の執筆時点では、 Chrome だけが上記の挙動を示していました - Firefox はまだアンロード/リストアの挙動をしていないので、タイマーは動作するでしょう。しかし、いくつかの理由から WebExtensions でタイマーを使わないようにするのはまだ良い考えです。</p>
-
-<ol>
- <li>Chrome との互換性のため</li>
- <li>将来、動作が変更された場合に問題が発生する可能性があるため</li>
-</ol>
-
-<h3 id="Maximum_delay_value" name="Maximum_delay_value">最大遅延時間</h3>
-
-<p>Internet Explorer、Chrome、Safari、Firefox を含むブラウザーは、内部で遅延時間を 32 ビット符号付き整数値で保存します。このため 2,147,483,647 ms (約 24.8 日) より大きな遅延時間を使用すると整数値がオーバーフローして、その結果直ちに実行されるタイムアウトになります。</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('HTML WHATWG', 'webappapis.html#dom-settimeout', 'WindowOrWorkerGlobalScope.setTimeout()')}}</td>
-   <td>{{Spec2("HTML WHATWG")}}</td>
-   <td>最新の仕様で、メソッドを <code>WindowOrWorkerGlobalScope</code> ミックスインに移動。</td>
-  </tr>
-  <tr>
-   <td>{{SpecName("HTML WHATWG", "webappapis.html#dom-settimeout", "WindowTimers.setTimeout()")}}</td>
-   <td>{{Spec2("HTML WHATWG")}}</td>
-   <td>初回定義 (DOM Level 0)</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
-
-<p>{{Compat("api.WindowOrWorkerGlobalScope.setTimeout")}}</p>
-
-<h2 id="See_also" name="See_also">関連情報</h2>
-
-<ul>
- <li><a href="/ja/Add-ons/Code_snippets/Timers">JavaScript timers</a></li>
- <li><a href="/ja/docs/Mozilla/JavaScript_code_modules/Timer.jsm">Timer.jsm</a></li>
- <li>{{domxref("WindowOrWorkerGlobalScope.clearTimeout")}}</li>
- <li>{{domxref("WindowOrWorkerGlobalScope.setInterval")}}</li>
- <li>{{domxref("window.requestAnimationFrame")}}</li>
- <li><a href="/ja/Add-ons/Code_snippets/Timers/Daemons"><em>Daemons</em> management</a></li>
-</ul>
diff --git a/files/ja/web/api/xmlserializer/index.html b/files/ja/web/api/xmlserializer/index.html
index 48bd19f8e5..1bae104f64 100644
--- a/files/ja/web/api/xmlserializer/index.html
+++ b/files/ja/web/api/xmlserializer/index.html
@@ -96,7 +96,7 @@ document.body.insertAdjacentHTML('afterbegin', inp_xmls);</pre>
 <h2 id="See_also" name="See_also">関連項目</h2>
 
 <ul>
-	<li><a href="/ja/Parsing_and_serializing_XML" title="ja/Parsing_and_serializing_XML">Parsing and serializing XML</a></li>
+	<li><a href="/ja/Parsing_and_serializing_XML">Parsing and serializing XML</a></li>
 	<li>{{domxref("XMLHttpRequest")}}</li>
 	<li>{{domxref("DOMParser")}}</li>
 </ul>
diff --git a/files/ja/web/api/xrinputsource/handedness/index.html b/files/ja/web/api/xrinputsource/handedness/index.html
index 55b2ef3fdb..4f9eb86d63 100644
--- a/files/ja/web/api/xrinputsource/handedness/index.html
+++ b/files/ja/web/api/xrinputsource/handedness/index.html
@@ -1,47 +1,59 @@
 ---
-title: XRInputSource.handedness
+title: XRHandedness
 slug: Web/API/XRInputSource/handedness
 tags:
   - API
   - AR
-  - Controller
+  - Enum
+  - Enumerated Type
   - Handedness
-  - Input
-  - Property
-  - Read-only
   - Reference
+  - Type
   - VR
   - WebXR
-  - WebXR API
   - WebXR Device API
-  - XR
-  - XRInputSource
+  - XRHandedness
   - hand
   - left
   - right
-translation_of: Web/API/XRInputSource/handedness
+translation_of: Web/API/XRHandedness
+original_slug: Web/API/XRHandedness
 ---
-<p>{{APIRef("WebXR")}}{{securecontext_header}}</p>
+<p>{{APIRef("WebXR")}}</p>
 
-<p>{{domxref("XRInputSource")}} の <strong><code>handedness</code></strong> 読み取り専用プロパティは、WebXR 入力ソースがユーザーのどの手に関連付けられているか、またはまったく関連付けられていないかを示します。</p>
+<p>WebXR の <strong><code>XRHandedness</code></strong> 列挙型は、使用している XR 入力デバイスに接続された特定の入力コントローラーを操作するために使用しているユーザーの手を識別する値を提供します。 <code>XRHandedness</code> は、{{domxref("XRInputSource")}} の {{domxref("XRInputSource.handedness", "handedness")}} プロパティの値として使用されます。</p>
 
-<h2 id="Syntax" name="Syntax">構文</h2>
+<h2 id="Values" name="Values">値</h2>
 
-<pre class="syntaxbox notranslate">let <em>hand</em> = <em>xrInputSource</em>.handedness;</pre>
+<dl>
+ <dt><code>none</code></dt>
+ <dd>入力コントローラーは、ユーザーのいずれの手にも関連付けられていません。</dd>
+ <dt><code>left</code></dt>
+ <dd>入力コントローラーは、ユーザーの左手に握られているか、着用されているか、取り付けられています。</dd>
+ <dt><code>right</code></dt>
+ <dd>入力コントローラーは、ユーザーの右手に握られているか、着用されているか、取り付けられています。</dd>
+</dl>
 
-<h3 id="Value" name="Value">値</h3>
-
-<p>入力コントローラーがユーザーの片方の手にあるかどうか、もしそうならどちらの手にあるかを示す {{domxref("DOMString")}}。 {{domxref("XRHandedness")}} 列挙型に由来する値は、次のいずれかです。</p>
+<h2 id="Examples" name="Examples">例</h2>
 
-<p>{{page("/ja/docs/Web/API/XRHandedness", "Values")}}</p>
+<p><code>handedness</code> の重要な使用方法の1つは、コントローラーがどちらの手にあるかを判別して、仮想空間でその手（またはその手が制御しているデバイス）の表現を描画できるようにすることです。</p>
 
-<h2 id="Usage_notes" name="Usage_notes">使用上の注意</h2>
+<pre class="brush: js notranslate">function updateInputSources(session, frame, refSpace) {
+  for (let source of session.inputSources) {
+    if (source.gripSpace) {
+      let gripPose = frame.getPose(source.gripSpace, refSpace);
 
-<p>入力ソースがユーザーの手に関連付けられたデバイスでない場合（握られているか、取り付けられているか、着用されているかに関係なく）、<code>handedness</code> の値は <code>none</code> です。 これは、例えば、ヘッドセットに組み込まれたコントロールや、頭や体に取り付けられた入力デバイスなど、ハンドヘルドではない入力ソースを示している場合があります。</p>
+      if (gripPose) {
+        myRenderHandObject(gripPose, inputSource.handedness);
+      }
+    }
+  }
+}
+</pre>
 
-<h2 id="Examples" name="Examples">例</h2>
+<p>この関数は、すべてのアニメーションフレーム（または必要な滑らかさの程度とパフォーマンスの制約に応じて定期的に）で呼ばれ、入力ソースのリストをスキャンして、<code>null</code> ではない {{domxref("XRInputSource.gripSpace", "gripSpace")}} を持つものを探します。 <code>gripSpace</code> が存在する場合、それは入力ソースが何らかのハンドヘルドデバイスであることを意味するため、可能であれば視覚的にレンダリングする必要があります。</p>
 
-<p>{{page("/ja/docs/Web/API/XRHandedness", "Examples")}}</p>
+<p><code>gripSpace</code> が <code>null</code> 以外の場合、この関数は、現在の参照空間に変換された <code>gripSpace</code> のポーズを取得します。 それが有効であると仮定すると、<code>myRenderHandObject()</code> と呼ばれる関数が、グリップのポーズと <code>handedness</code> の値を使用して呼び出されます。 これらの値が手元にあれば（しゃれは意図していません）、<code>myRenderHandObject()</code> は、正しい手のために配置および形成された適切なモデルを描画できます。</p>
 
 <h2 id="Specifications" name="Specifications">仕様</h2>
 
@@ -53,7 +65,7 @@ translation_of: Web/API/XRInputSource/handedness
    <th scope="col">コメント</th>
   </tr>
   <tr>
-   <td>{{SpecName('WebXR','#dom-xrinputsource-handedness','XRInputSource.handedness')}}</td>
+   <td>{{SpecName('WebXR','#enumdef-xrhandedness','XRHandedness')}}</td>
    <td>{{Spec2('WebXR')}}</td>
    <td>初期定義</td>
   </tr>
@@ -62,7 +74,7 @@ translation_of: Web/API/XRInputSource/handedness
 
 <h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
 
-<p>{{Compat("api.XRInputSource.handedness")}}</p>
+<p>{{Compat("api.XRHandedness")}}</p>
 
 <h2 id="See_also" name="See_also">関連情報</h2>
 
@@ -70,4 +82,5 @@ translation_of: Web/API/XRInputSource/handedness
  <li><a href="/ja/docs/Web/API/WebXR_Device_API">WebXR Device API</a></li>
  <li><a href="/ja/docs/Web/API/WebXR_Device_API/Inputs">入力と入力ソース</a></li>
  <li><a href="/ja/docs/Web/WebXR%20Device%20API/Gamepads">WebXR アプリケーションでのゲームパッドの使用</a></li>
+ <li>{{domxref("XREye")}}: ビューを表示する対象の目を示します</li>
 </ul>
diff --git a/files/ja/web/api/xrinputsource/handedness/index.md b/files/ja/web/api/xrinputsource/handedness/index.md
new file mode 100644
index 0000000000..31716b2ace
--- /dev/null
+++ b/files/ja/web/api/xrinputsource/handedness/index.md
@@ -0,0 +1,84 @@
+---
+title: XRInputSource.handedness
+slug: Web/API/XRInputSource/handedness
+tags:
+  - API
+  - AR
+  - Controller
+  - Handedness
+  - Input
+  - Property
+  - Read-only
+  - Reference
+  - VR
+  - WebXR
+  - WebXR API
+  - WebXR Device API
+  - XR
+  - XRInputSource
+  - hand
+  - left
+  - right
+browser-compat: api.XRInputSource.handedness
+translation_of: Web/API/XRInputSource/handedness
+---
+{{APIRef("WebXR Device API")}}
+
+{{domxref("XRInputSource")}} の読み取り専用プロパティ **`handedness`** は、WebXR 入力ソースがユーザーのどの手に関連付けられているか、またはまったく関連付けられていないかを示します。
+
+## 構文
+
+```js
+xrInputSource.handedness;
+```
+
+### 値
+
+文字列で、入力コントローラーがユーザーの手に握られているかどうか、もしそうならばどちらの手なのかを表します。値は次のうちの一つです。
+
+- `none`
+  - : 入力コントローラーは、ユーザーのいずれの手にも関連付けられていません。
+- `left`
+  - : 入力コントローラーは、ユーザーの左手に握られているか、着用されているか、取り付けられています。
+- `right`
+  - : 入力コントローラーは、ユーザーの右手に握られているか、着用されているか、取り付けられています。
+
+## 使用上の注意
+
+入力ソースがユーザーの手に関連付けられた機器でない場合 (握られているか、取り付けられているか、着用されているかに関係なく)、`handedness` の値は `none` です。 これは、例えば、ヘッドセットに組み込まれたコントロールや、頭や体に取り付けられた入力機器など、ハンドヘルドではない入力ソースを示している場合があります。
+
+## 例
+
+`handedness` の重要な使用方法の 1 つは、コントローラーがどちらの手にあるかを判別して、仮想空間でその手 (またはその手が制御している機器) の表現を描画できるようにすることです。
+
+```js
+function updateInputSources(session, frame, refSpace) {
+  for (let source of session.inputSources) {
+    if (source.gripSpace) {
+      let gripPose = frame.getPose(source.gripSpace, refSpace);
+
+      if (gripPose) {
+        myRenderHandObject(gripPose, inputSource.handedness);
+      }
+    }
+  }
+}
+```
+
+この関数は、すべてのアニメーションフレームで (または必要な滑らかさの程度とパフォーマンスの制約に応じて定期的に) 呼び出され、入力ソースのリストをスキャンして、 {{domxref("XRInputSource.gripSpace", "gripSpace")}} が `null` ではないものを探します。 `gripSpace` が存在する場合、それは入力ソースが何らかのハンドヘルド機器であることを意味するため、可能であれば視覚的にレンダリングする必要があります。
+
+`gripSpace` が `null` 以外の場合、この関数は、現在の参照空間に変換された `gripSpace` のポーズを取得します。 それが有効であると仮定すると、`myRenderHandObject()` と呼ばれる関数が、グリップのポーズと `handedness` の値を使用して呼び出されます。 これらの値が手元にあれば (しゃれは意図していません)、正しい手のために配置および形成された適切なモデルを描画できます。
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- [WebXR Device API](/ja/docs/Web/API/WebXR_Device_API)
+- [入力と入力ソース](/ja/docs/Web/API/WebXR_Device_API/Inputs)
+- [WebXR アプリケーションでのゲームパッドの使用](/ja/docs/Web/WebXR%20Device%20API/Gamepads)
diff --git a/files/ja/web/api/xrinputsource/targetraymode/index.html b/files/ja/web/api/xrinputsource/targetraymode/index.html
index 7a64b7a122..79ca557c89 100644
--- a/files/ja/web/api/xrinputsource/targetraymode/index.html
+++ b/files/ja/web/api/xrinputsource/targetraymode/index.html
@@ -1,47 +1,78 @@
 ---
-title: XRInputSource.targetRayMode
+title: XRTargetRayMode
 slug: Web/API/XRInputSource/targetRayMode
 tags:
+  - 3D
   - API
   - AR
-  - Pointing
-  - Property
-  - Ray
-  - Read-only
+  - Enum
+  - Enumerated Type
+  - Input
+  - Reality
   - Reference
+  - Type
   - VR
+  - Virtual
   - WebXR
   - WebXR API
   - WebXR Device API
   - XR
-  - XRInputSource
-  - direction
-  - pointer
+  - XRTargetRayMode
+  - augmented
+  - source
   - target
-  - targetRayMode
-translation_of: Web/API/XRInputSource/targetRayMode
+translation_of: Web/API/XRTargetRayMode
+original_slug: Web/API/XRTargetRayMode
 ---
-<p>{{APIRef("WebXR")}}{{securecontext_header}}</p>
+<p>{{APIRef("WebXR")}}</p>
 
-<p>{{domxref("XRInputSource")}} の <strong><code>targetRayMode</code></strong> 読み取り専用プロパティは、入力ソースのターゲット光線を生成する方法と、それをユーザーに提示する方法を示します。</p>
+<p><span class="seoSummary"><a href="/ja/docs/Web/API/WebXR_Device_API">WebXR Device API</a> の <strong><code>XRTargetRayMode</code></strong> 列挙型は、入力コントローラーのターゲティング光線を生成する方法を記述します。</span> ターゲティングは、視線追跡システムを使用してターゲットを見るか、ハンドコントローラー、グローブ、またはモーショントラッキングシステムを使用してターゲットを指すか、画面上で指やマウスを使用してターゲットをタップまたはクリックすることによって行うことができます。</p>
 
-<h2 id="Syntax" name="Syntax">構文</h2>
+<p>通常、<strong>ターゲット光線</strong>は、ターゲティングシステムのソースから、ユーザーが見ている方向または指している方向にターゲット光線に沿って描画されます。 光線の終点を示す方法と同様に、光線のスタイルは一般的にあなた次第です。 ターゲットとなる点またはオブジェクトは、図形を描画するか、ターゲットとなる表面またはオブジェクトを強調表示することによって示される場合があります。</p>
 
-<pre class="syntaxbox notranslate">let <em>rayMode</em> = <em>xrInputSource</em>.targetRayMode;</pre>
+<div style="width: 42em;">
+<figure style="background: #eee; padding: 0.5em; border: 1px solid #aaa; border-radius: 1em; max-width: 504px; padding: 1em; margin: 1em auto;">
+<figcaption><strong>ハンドコントローラーから放出されるターゲット光線。</strong></figcaption>
+<img alt="ハンドコントローラーから放出されるターゲット光線を示すスクリーンショット" src="https://mdn.mozillademos.org/files/17089/example-target-ray.gif" style="width: 100%;"></figure>
+</div>
 
-<h3 id="Value" name="Value">値</h3>
+<p>ターゲット光線は、単純な線（理想的には距離とともにフェードする）から、上のスクリーンショットに示されているサイエンスフィクションの「フェイザー」スタイルなどのアニメーション効果まで、何でもかまいません。</p>
 
-<p>{{domxref("XRTargetRayMode")}} 列挙型から取得した {{domxref("DOMString")}}。 ターゲット光線を生成してユーザーに提示するときに使用する方法を示します。 可能な値は次のとおりです。</p>
+<h2 id="Values" name="Values">値</h2>
 
-<p>{{page("/ja/docs/Web/API/XRTargetRayMode", "Values")}}</p>
+<dl>
+ <dt><code>gaze</code>（視線）</dt>
+ <dd>ユーザーは、ユーザーが見ている方向を検出する視線追跡システム（または<strong>視線入力</strong>）を使用しています。 ターゲット光線は、ビューアーの目を起点として描画され、ビューアーが見ている方向に追従します。</dd>
+ <dt><code>screen</code>（画面）</dt>
+ <dd>ターゲット光線の方向は、タッチスクリーン、マウス、またはその他の触覚入力デバイスをタップして示します。</dd>
+ <dt><code>tracked-pointer</code>（追跡ポインター）</dt>
+ <dd>ターゲティングは、ユーザーがターゲットの方向に向けるハンドヘルドデバイスまたはハンドトラッキングシステムを使用して行われます。 ターゲット光線は、手（または手の中のオブジェクト）からターゲット方向に伸びます。 方向はプラットフォーム固有のルールを使用して決定されますが、そのようなルールが存在しない場合は、ユーザーが人差し指を手からまっすぐに向けていると仮定して方向が選択されます。</dd>
+</dl>
 
-<h2 id="Usage_notes" name="Usage_notes">使用上の注意</h2>
+<h2 id="Examples" name="Examples">例</h2>
 
-<p>入力ソースの {{domxref("XRInputSource.targetRaySpace", "targetRaySpace")}} は、ターゲット光線の位置と向きを示し、光線をレンダリングする場所を決定するために使用できます。</p>
+<p>このコードの断片は、フレームごとに1回呼び出される関数の一部を示しています。 <code>null</code> 以外の {{domxref("XRInputSource.targetRaySpace", "targetRaySpace")}} を持つ入力を探します。 このプロパティの値を持つ入力は、ターゲット光線をユーザーから外側に投影する入力を表します。</p>
 
-<h2 id="Example" name="Example">例</h2>
+<p>このような入力ごとに、この例では、{{domxref("XRInputSource.targetRayMode", "targetRayMode")}} が <code>tracked-pointer</code> である入力を探します。 これは、入力が実際には、視線入力デバイス、画面タップ、またはマウスクリックではなく、ターゲティングデバイスを表すことを目的としていることを示しています。 追跡ポインターの場合、関数 <code>myRenderTargetRayAsBeam()</code> が呼び出され、入力コントローラーの仮想位置から、それが指している方向に外側にビームをレンダリングします。</p>
 
-<p>{{page("/ja/docs/Web/API/XRTargetRayMode", "Examples")}}</p>
+<p>コードは、仮想空間でのユーザーの手の位置を表すコントローラーや任意のオブジェクトの描画、その他の入力関連のタスクなどを引き続き実行する必要があります。</p>
+
+<pre class="brush: js notranslate">function updateInputSources(session, frame, refSpace) {
+  for (let source of session.getInputSources()) {
+    let targetRayPose = frame.getPose(inputSource.targetRaySpace, refSpace);
+
+    if (targetRayPose) {
+      if (source.targetRayMode == "tracked-pointer") {
+        myRenderTargetRayAsBeam(targetRayPose);
+      }
+    }
+
+    /* ... */
+  }
+}
+</pre>
+
+<p>詳細とより完全な例については、<a href="/ja/docs/Web/API/WebXR_Device_API/Inputs">入力と入力ソース</a>の記事を参照してください。</p>
 
 <h2 id="Specifications" name="Specifications">仕様</h2>
 
@@ -53,7 +84,7 @@ translation_of: Web/API/XRInputSource/targetRayMode
    <th scope="col">コメント</th>
   </tr>
   <tr>
-   <td>{{SpecName('WebXR','#dom-xrinputsource-targetraymode','XRInputSource.handedness')}}</td>
+   <td>{{SpecName('WebXR','#enumdef-xrtargetraymode','XRTargetRayMode')}}</td>
    <td>{{Spec2('WebXR')}}</td>
    <td>初期定義</td>
   </tr>
@@ -62,12 +93,11 @@ translation_of: Web/API/XRInputSource/targetRayMode
 
 <h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
 
-<p>{{Compat("api.XRInputSource.handedness")}}</p>
+<p>{{Compat("api.XRTargetRayMode")}}</p>
 
 <h2 id="See_also" name="See_also">関連情報</h2>
 
 <ul>
  <li><a href="/ja/docs/Web/API/WebXR_Device_API">WebXR Device API</a></li>
  <li><a href="/ja/docs/Web/API/WebXR_Device_API/Inputs">入力と入力ソース</a></li>
- <li><a href="/ja/docs/Web/WebXR%20Device%20API/Gamepads">WebXR アプリケーションでのゲームパッドの使用</a></li>
 </ul>
diff --git a/files/ja/web/api/xrinputsource/targetraymode/index.md b/files/ja/web/api/xrinputsource/targetraymode/index.md
new file mode 100644
index 0000000000..d21d4c82bd
--- /dev/null
+++ b/files/ja/web/api/xrinputsource/targetraymode/index.md
@@ -0,0 +1,95 @@
+---
+title: XRInputSource.targetRayMode
+slug: Web/API/XRInputSource/targetRayMode
+tags:
+  - API
+  - AR
+  - Pointing
+  - Property
+  - Ray
+  - Read-only
+  - Reference
+  - VR
+  - WebXR
+  - WebXR API
+  - WebXR Device API
+  - XR
+  - XRInputSource
+  - direction
+  - pointer
+  - target
+  - targetRayMode
+translation_of: Web/API/XRInputSource/targetRayMode
+---
+{{APIRef("WebXR Device API")}}
+
+{{domxref("XRInputSource")}} の読み取り専用プロパティ **`targetRayMode`** は、入力ソースのターゲット光線を生成する方法と、それをユーザーに提示する方法を示します。
+
+一般的には、ターゲティングシステムのソースから、ユーザーが見ている、または指している方向のターゲット光線に沿って、ターゲット光線が描かれます。光線のスタイルは一般的に自由で、光線の終点を示す方法も自由です。ターゲットとなるポイントやオブジェクトは、図形を描いたり、ターゲットとなる表面やオブジェクトをハイライトすることで示されるかもしれません。
+
+ターゲット光線はハンドコントローラーが影響します。
+
+![ハンドコントローラからターゲット光線を照射している画面](example-target-ray.gif)
+
+ターゲット光線は、単純な線 (理想的には距離に応じて消えていく) から、上のスクリーンショットにあるような SF の「フェイザー」スタイルのようなアニメーション効果まで、さまざまなものがあります。
+
+## 構文
+
+```js
+let rayMode = xrInputSource.targetRayMode;
+```
+
+### 値
+
+ターゲット光線を生成してユーザーに提示する際に、どの方法を使用するかを示す文字列です。指定できる値は次の通りです。
+
+- `gaze` (視線)
+  - : ユーザーは、ユーザーが見ている方向を検出する視線追跡システム (または**視線入力**) を使用しています。 ターゲット光線は、ビューアーの目を起点として描画され、ビューアーが見ている方向に追従します。
+- `screen` (画面)
+  - : ターゲット光線の方向は、タッチスクリーン、マウス、またはその他の触覚入力機器をタップして示します。
+- `tracked-pointer` (追跡ポインター)
+  - : ターゲティングは、ユーザーがターゲットの方向に向けるハンドヘルド機器またはハンドトラッキングシステムを使用して行われます。 ターゲット光線は、手 (または手の中のオブジェクト) からターゲット方向に伸びます。方向はプラットフォーム固有のルールを使用して決定されますが、そのようなルールが存在しない場合は、ユーザーが人差し指を手からまっすぐに向けていると仮定して方向が選択されます。 
+
+## 使用上の注意
+
+入力ソースの {{domxref("XRInputSource.targetRaySpace", "targetRaySpace")}} は、ターゲット光線の位置と向きを示し、光線をレンダリングする場所を決定するために使用できます。
+
+## 例
+
+このコードの断片は、フレームごとに 1 回呼び出される関数の一部を示しています。 `null` 以外の {{domxref("XRInputSource.targetRaySpace", "targetRaySpace")}} を持つ入力を探します。 このプロパティの値を持つ入力は、ターゲット光線をユーザーから外側に投影する入力を表します。
+
+このような入力ごとに、この例では、 {{domxref("XRInputSource.targetRayMode", "targetRayMode")}} が `tracked-pointer` である入力を探します。 これは、入力が実際には、視線入力機器、画面タップ、またはマウスクリックではなく、ターゲティング機器を表すことを目的としていることを示しています。 追跡ポインターの場合、関数 `myRenderTargetRayAsBeam()` が呼び出され、入力コントローラーの仮想位置から、それが指している方向に外側にビームをレンダリングします。
+
+コードは、仮想空間でのユーザーの手の位置を表すコントローラーや任意のオブジェクトの描画、その他の入力関連のタスクなどを引き続き実行する必要があります。
+
+```js
+function updateInputSources(session, frame, refSpace) {
+  for (let source of session.getInputSources()) {
+    let targetRayPose = frame.getPose(inputSource.targetRaySpace, refSpace);
+
+    if (targetRayPose) {
+      if (source.targetRayMode == "tracked-pointer") {
+        myRenderTargetRayAsBeam(targetRayPose);
+      }
+    }
+
+    /* ... */
+  }
+}
+```
+
+詳細とより完全な例については、[入力と入力ソース](/ja/docs/Web/API/WebXR_Device_API/Inputs)の記事を参照してください。
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- [WebXR Device API](/ja/docs/Web/API/WebXR_Device_API)
+- [入力と入力ソース](/ja/docs/Web/API/WebXR_Device_API/Inputs)
+- [WebXR アプリケーションでのゲームパッドの使用](/ja/docs/Web/WebXR%20Device%20API/Gamepads)
diff --git a/files/ja/web/api/xrreferencespaceevent/xrreferencespaceevent/index.html b/files/ja/web/api/xrreferencespaceevent/xrreferencespaceevent/index.html
deleted file mode 100644
index f34df48467..0000000000
--- a/files/ja/web/api/xrreferencespaceevent/xrreferencespaceevent/index.html
+++ /dev/null
@@ -1,69 +0,0 @@
----
-title: XRReferenceSpaceEvent()
-slug: Web/API/XRReferenceSpaceEvent/XRReferenceSpaceEvent
-tags:
-  - API
-  - AR
-  - Constructor
-  - Mixed
-  - Reality
-  - Reference
-  - Reference Space
-  - VR
-  - Virtual
-  - WebXR
-  - WebXR API
-  - WebXR Device API
-  - XR
-  - XRReferenceSpaceEvent
-  - augmented
-  - events
-translation_of: Web/API/XRReferenceSpaceEvent/XRReferenceSpaceEvent
----
-<p>{{APIRef("WebXR Device API")}}{{SecureContext_header}}</p>
-
-<p><span class="seoSummary"><strong><code>XRReferenceSpaceEvent()</code></strong> コンストラクターは、新しい {{domxref("XRReferenceSpaceEvent")}} オブジェクトを作成するために使用します。 これは、WebXR 参照空間オブジェクト {{domxref("XRReferenceSpace")}} の状態に関するイベントを表します。</span></p>
-
-<p>現在、この型を使用して定義されているのは {{domxref("XRReferenceSpace.reset_event", "reset")}} イベントのみです。</p>
-
-<h2 id="構文">構文</h2>
-
-<pre class="syntaxbox notranslate">let <em>refSpaceEvent</em> = new XRReferenceSpaceEvent(<em>type</em>, <em>eventInitDict</em>);</pre>
-
-<h3 id="Parameters">Parameters</h3>
-
-<dl>
- <dt><code>type</code></dt>
- <dd>発生したイベントタイプを示す {{domxref("DOMString")}}。 現在、これは常に <code>reset</code> です。</dd>
- <dt><code>eventInitDict</code></dt>
- <dd>
- <p>{{domxref("XRReferenceSpaceEventInit")}} ディクショナリーに基づくオブジェクトで、新しいイベントオブジェクトの初期化に使用されるデータが含まれています。 このオブジェクトのプロパティは次のとおりです。</p>
-
- <p>{{page("/ja/docs/Web/API/XRReferenceSpaceEventInit", "Properties")}}</p>
- </dd>
-</dl>
-
-<h3 id="戻り値">戻り値</h3>
-
-<p>入力パラメーターで定義されたとおりに初期化された、新しい <code>XRReferenceSpaceEvent</code> オブジェクト。</p>
-
-<h2 id="仕様">仕様</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">仕様</th>
-   <th scope="col">状態</th>
-   <th scope="col">コメント</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('WebXR','#dom-xrreferencespaceevent-xrreferencespaceevent','XRReferenceSpaceEvent()')}}</td>
-   <td>{{Spec2('WebXR')}}</td>
-   <td>初期定義</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="ブラウザーの互換性">ブラウザーの互換性</h2>
-
-<p>{{Compat("api.XRReferenceSpaceEvent.XRReferenceSpaceEvent")}}</p>
diff --git a/files/ja/web/api/xrreferencespaceevent/xrreferencespaceevent/index.md b/files/ja/web/api/xrreferencespaceevent/xrreferencespaceevent/index.md
new file mode 100644
index 0000000000..580e48274e
--- /dev/null
+++ b/files/ja/web/api/xrreferencespaceevent/xrreferencespaceevent/index.md
@@ -0,0 +1,69 @@
+---
+title: XRReferenceSpaceEvent()
+slug: Web/API/XRReferenceSpaceEvent/XRReferenceSpaceEvent
+tags:
+  - API
+  - AR
+  - Constructor
+  - Events
+  - Mixed
+  - Reality
+  - Reference
+  - Reference Space
+  - VR
+  - Virtual
+  - WebXR
+  - WebXR API
+  - WebXR Device API
+  - XR
+  - XRReferenceSpaceEvent
+  - augmented
+  - events
+browser-compat: api.XRReferenceSpaceEvent.XRReferenceSpaceEvent
+translation_of: Web/API/XRReferenceSpaceEvent/XRReferenceSpaceEvent
+---
+{{APIRef("WebXR Device API")}}
+
+**`XRReferenceSpaceEvent()`** コンストラクターは、新しい {{domxref("XRReferenceSpaceEvent")}} オブジェクトを生成するために使用します。 これは、WebXR 参照空間オブジェクト {{domxref("XRReferenceSpace")}} の状態に関するイベントを表します。
+
+この型を使用して定義されているのは {{domxref("XRReferenceSpace.reset_event", "reset")}} イベントのみです。
+
+## 構文
+
+```js
+let refSpaceEvent = new XRReferenceSpaceEvent(type, eventInitDict);
+```
+
+### 引数
+
+- `type`
+  - : 発生したイベントタイプを示す {{domxref("DOMString")}}。 現在、これは常に `reset` です。
+- `eventInitDict`
+
+  - : イベントを構成するためのオブジェクトです。プロパティは次のとおりです。
+
+    - `referenceSpace`: イベントの発生元の {{domxref("XRReferenceSpace")}} です。
+    - `transform`: 古い座標系（このイベントによって示される変更の前のもの）を新しい座標系にマップする {{domxref("XRRigidTransform")}} です。
+
+### 返値
+
+入力引数で定義されたとおりに初期化された、新しい `XRReferenceSpaceEvent` オブジェクト。
+
+## 例
+
+この単純なスニペットでは、コンストラクターを呼び出して {{domxref("XRReferenceSpace.reset_event", "reset")}} 型の新しい参照空間イベントを生成します。
+
+```js
+let refSpaceEvent = new XRReferenceSpaceEvent("reset", {
+  referenceSpace: myRefSpace,
+  transform: myTransform
+});
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
diff --git a/files/ja/web/css/@media/any-pointer/index.html b/files/ja/web/css/@media/any-pointer/index.html
deleted file mode 100644
index 63866a9862..0000000000
--- a/files/ja/web/css/@media/any-pointer/index.html
+++ /dev/null
@@ -1,105 +0,0 @@
----
-title: any-pointer
-slug: Web/CSS/@media/any-pointer
-tags:
-  - '@media'
-  - CSS
-  - メディアクエリ
-  - メディア特性
-  - リファレンス
-translation_of: Web/CSS/@media/any-pointer
----
-<div>{{cssref}}</div>
-
-<p><a href="/ja/docs/CSS">CSS</a> の <strong><code>any-pointer</code></strong> <a href="/ja/docs/Web/CSS/Media_Queries/Using_media_queries#Media_features">メディア特性</a>は、ユーザーが (マウスなどの) <em>何かの</em>ポインティングデバイスを持っているか、もしそうならば、どれだけの正確性を持っているかを調べるために使用することができます。</p>
-
-<div class="note">
-<p><strong>メモ:</strong> <em>第一の</em>ポインティングデバイスの正確性を調べたい場合は、代わりに <code><a href="/ja/docs/Web/CSS/@media/pointer">pointer</a></code> を使用してください。</p>
-</div>
-
-<h2 id="Syntax" name="Syntax">構文</h2>
-
-<p><code>any-pointer</code> 特性は、以下の一覧の中から一つのキーワード値で指定します。</p>
-
-<dl>
- <dt><code>none</code></dt>
- <dd>利用できるポインティングデバイスがありません。</dd>
- <dt><code>coarse</code></dt>
- <dd>正確性が限定されたポインティングデバイスが、少なくとも一つ含まれています。</dd>
- <dt><code>fine</code></dt>
- <dd>正確性が高いポインティングデバイスが、少なくとも一つ含まれています。</dd>
-</dl>
-
-<div class="note">
-<p><strong>メモ:</strong> 異なる性質を持つ複数の機器が利用できる場合は、複数の値に一致することがありますが、 <code>none</code> はポインティングデバイスがない場合のみ一致します。</p>
-</div>
-
-<h2 id="Example" name="Example">例</h2>
-
-<p>この例は、精度の高いポインターを持つユーザーには小さなチェックボックスを、粗いポインターを持つユーザーには大きなチェックボックスを生成します。</p>
-
-<h3 id="HTML">HTML</h3>
-
-<pre class="brush: html">&lt;input id="test" type="checkbox" /&gt;
-&lt;label for="test"&gt;Look at me!&lt;/label&gt;</pre>
-
-<h3 id="CSS">CSS</h3>
-
-<pre class="brush: css">input[type="checkbox"]:checked {
-  background: gray;
-}
-
-@media (any-pointer: fine) {
-  input[type="checkbox"] {
-    -moz-appearance: none;
-    -webkit-appearance: none;
-    appearance: none;
-    width: 15px;
-    height: 15px;
-    border: 1px solid blue;
-  }
-}
-
-@media (any-pointer: coarse) {
-  input[type="checkbox"] {
-    -moz-appearance: none;
-    -webkit-appearance: none;
-    appearance: none;
-    width: 30px;
-    height: 30px;
-    border: 2px solid red;
-  }
-}</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('CSS4 Media Queries', '#descdef-media-any-pointer', 'any-pointer')}}</td>
-   <td>{{Spec2('CSS4 Media Queries')}}</td>
-   <td>初回定義</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
-
-<p>{{Compat("css.at-rules.media.any-pointer")}}</p>
-
-<h2 id="See_also" name="See_also">関連情報</h2>
-
-<ul>
- <li><a href="/en-US/docs/Web/CSS/@media/pointer"><code>pointer</code> メディア特性</a></li>
-</ul>
diff --git a/files/ja/web/css/@media/any-pointer/index.md b/files/ja/web/css/@media/any-pointer/index.md
new file mode 100644
index 0000000000..3610b1d54c
--- /dev/null
+++ b/files/ja/web/css/@media/any-pointer/index.md
@@ -0,0 +1,86 @@
+---
+title: any-pointer
+slug: Web/CSS/@media/any-pointer
+tags:
+  - '@media'
+  - CSS
+  - メディアクエリー
+  - メディア特性
+  - リファレンス
+translation_of: Web/CSS/@media/any-pointer
+---
+<div>{{cssref}}</div>
+
+**`any-pointer`** は [CSS](/ja/docs/Web/CSS) の[メディア特性](/ja/docs/Web/CSS/Media_Queries/Using_media_queries#media_features)で、ユーザーが (マウスなどの) *何らかの*ポインティングデバイスを持っているか、もしそうならば、どれだけの正確性を持っているかを調べます。
+
+> **Note:** *第一の*ポインティングデバイスの正確性を調べたい場合は、代わりに [`pointer`](/ja/docs/Web/CSS/@media/pointer) を使用してください。
+
+## 構文
+
+`any-pointer` 特性は、以下の一覧の中から一つのキーワード値で指定します。
+
+- `none`
+  - : 利用できるポインティングデバイスがありません。
+- `coarse`
+  - : 正確性が限定されたポインティングデバイスが、少なくとも一つ含まれています。
+- `fine`
+  - : 正確性が高いポインティングデバイスが、少なくとも一つ含まれています。
+
+> **Note:** 異なる性質を持つ複数の機器が利用できる場合は、複数の値に一致することがありますが、 `none` はポインティングデバイスがない場合のみ一致します。
+
+<h2 id="Examples">例</h2>
+
+この例は、精度の高いポインターを持つユーザーには小さなチェックボックスを、精度の低いポインターを持つユーザーには大きなチェックボックスを生成します。大きなチェックボックスは小さなチェックボックスよりも後に宣言されているので優先されます。
+
+### HTML
+
+```html
+<input id="test" type="checkbox" />
+<label for="test">Look at me!</label>
+```
+
+### CSS
+
+```css
+input[type="checkbox"]:checked {
+  background: gray;
+}
+
+@media (any-pointer: fine) {
+  input[type="checkbox"] {
+    -moz-appearance: none;
+    -webkit-appearance: none;
+    appearance: none;
+    width: 15px;
+    height: 15px;
+    border: 1px solid blue;
+  }
+}
+
+@media (any-pointer: coarse) {
+  input[type="checkbox"] {
+    -moz-appearance: none;
+    -webkit-appearance: none;
+    appearance: none;
+    width: 30px;
+    height: 30px;
+    border: 2px solid red;
+  }
+}
+```
+
+### 結果
+
+{{EmbedLiveSample("Examples")}}
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- [`pointer` メディア特性](/ja/docs/Web/CSS/@media/pointer)
diff --git a/files/ja/web/css/all/index.html b/files/ja/web/css/all/index.html
index f751b17f0b..242d45c7e8 100644
--- a/files/ja/web/css/all/index.html
+++ b/files/ja/web/css/all/index.html
@@ -42,11 +42,11 @@ all: revert;
  <dt>{{cssxref("revert")}}</dt>
  <dd>宣言が所属するスタイルシートの出所に応じて動作を指定します。
  <dl>
-  <dt><a href="/ja/docs/Web/CSS/Cascade#User-agent_stylesheets">ユーザーエージェントのスタイルシート</a></dt>
+  <dt><a href="/ja/docs/Web/CSS/Cascade#%E3%83%A6%E3%83%BC%E3%82%B6%E3%83%BC%E3%82%A8%E3%83%BC%E3%82%B8%E3%82%A7%E3%83%B3%E3%83%88%E3%82%B9%E3%82%BF%E3%82%A4%E3%83%AB%E3%82%B7%E3%83%BC%E3%83%88">ユーザーエージェントのスタイルシート</a></dt>
   <dd><code>unset</code> と同等です。</dd>
-  <dt><a href="/ja/docs/Web/CSS/Cascade#User_stylesheets">ユーザーのスタイル</a></dt>
+  <dt><a href="/ja/docs/Web/CSS/Cascade#%E3%83%A6%E3%83%BC%E3%82%B6%E3%83%BC%E3%82%B9%E3%82%BF%E3%82%A4%E3%83%AB%E3%82%B7%E3%83%BC%E3%83%88">ユーザーのスタイル</a></dt>
   <dd><a href="/ja/docs/Web/CSS/Cascade">カスケード</a>をユーザーエージェントレベルまでロールバックし、<a href="/ja/docs/Web/CSS/specified_value">指定値</a>が、その要素に対して作者レベルまたはユーザーレベルの規則が指定されていないかのように計算されるようにします。</dd>
-  <dt><a href="/ja/docs/Web/CSS/Cascade#Author_stylesheets">作者のスタイル</a></dt>
+  <dt><a href="/ja/docs/Web/CSS/Cascade#%E4%BD%9C%E6%88%90%E8%80%85%E3%82%B9%E3%82%BF%E3%82%A4%E3%83%AB%E3%82%B7%E3%83%BC%E3%83%88">作成者のスタイル</a></dt>
   <dd><a href="/ja/docs/Web/CSS/Cascade">カスケード</a>をユーザーのレベルまでロールバックし、作者レベルの規則が要素に指定されていない場合は、<a href="/ja/docs/Web/CSS/specified_value">指定値</a>が計算されます。 <code>revert</code> の用途では、作者のオリジンはオーバーライドおよびアニメーションのオリジンが含まれます。</dd>
  </dl>
  </dd>
diff --git a/files/ja/web/css/background-color/index.html b/files/ja/web/css/background-color/index.html
index 1090e44454..50dde1024a 100644
--- a/files/ja/web/css/background-color/index.html
+++ b/files/ja/web/css/background-color/index.html
@@ -147,7 +147,7 @@ background-color: unset;</pre>
 <h2 id="See_also" name="See_also">関連情報</h2>
 
 <ul>
- <li><a href="/ja/docs/Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds">複数の背景</a></li>
+ <li><a href="/ja/docs/Web/CSS/CSS_Backgrounds_and_Borders/Using_CSS_multiple_backgrounds">複数の背景</a></li>
  <li>{{cssxref("&lt;color&gt;")}} データ型</li>
  <li>その他の色に関するプロパティ: {{cssxref("color")}}, {{cssxref("border-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("text-shadow")}}, {{cssxref("caret-color")}}, {{cssxref("column-rule-color")}}</li>
  <li><a href="/ja/docs/Web/HTML/Applying_color">CSS を使用した HTML の要素への色の適用</a></li>
diff --git a/files/ja/web/css/box-shadow/index.html b/files/ja/web/css/box-shadow/index.html
index 5fb4b74744..d28db18a1e 100644
--- a/files/ja/web/css/box-shadow/index.html
+++ b/files/ja/web/css/box-shadow/index.html
@@ -29,7 +29,7 @@ translation_of: Web/CSS/box-shadow
 
 <p><code>box-shadow</code> プロパティで、ほぼすべての要素のフレームから影を落とすことができます。 {{cssxref("border-radius")}} が指定された場合は、影もその丸みを反映します。複数のボックスの影の重ね合わせ順は、複数の<a href="/ja/CSS/text-shadow">テキストの影</a>の場合と同様になります (最初に指定された影が最も手前に来ます)。</p>
 
-<p><a href="/ja/docs/Web/CSS/CSS_Box_Model/Box-shadow_generator">Box-shadow generator</a> は、 <code>box-shadow</code> を対話的に作成できるツールです。</p>
+<p><a href="/ja/docs/Web/CSS/CSS_Backgrounds_and_Borders/Box-shadow_generator">ボックスの影作成ツール</a>は、 <code>box-shadow</code> を対話的に作成できるツールです。</p>
 
 <h2 id="Syntax" name="Syntax">構文</h2>
 
diff --git a/files/ja/web/css/cascade/index.html b/files/ja/web/css/cascade/index.html
deleted file mode 100644
index fe6ecec340..0000000000
--- a/files/ja/web/css/cascade/index.html
+++ /dev/null
@@ -1,211 +0,0 @@
----
-title: CSS カスケード入門
-slug: Web/CSS/Cascade
-tags:
-  - CSS
-  - CSS カスケードと継承
-  - Reference
-  - カスケード
-  - ガイド
-  - スタイル
-  - スタイルシート
-  - レイアウト
-translation_of: Web/CSS/Cascade
----
-<div>{{CSSRef}}</div>
-
-<p><strong>カスケード</strong>は、異なるソースから来るプロパティ値を組み合わせる方法を定義するアルゴリズムです。これは<em>カスケーディング</em>スタイルシートという名前で強調されているように、 CSS の中心を占めるものです。<span class="seoSummary">この記事では、カスケードとは何か、 {{Glossary("CSS")}} <a href="/ja/docs/Web/API/CSSStyleDeclaration">宣言</a>をカスケードする順番、そしてウェブ開発者にどのように影響するかを説明します。</span></p>
-
-<h2 id="Which_CSS_entities_participate_in_the_cascade" name="Which_CSS_entities_participate_in_the_cascade">どの CSS エンティティがカスケードに関係するか</h2>
-
-<p>CSS 宣言のみが、つまりプロパティ/値の組だけが、カスケードに加わります。つまり、宣言以外のエンティティを含む <a href="/ja/docs/Web/CSS/At-rule">@-規則</a>、例えば<em>記述子</em>を含む {{ cssxref("@font-face")}} などは、カスケードには加わりません。これらの場合、カスケードには全体としての @-規則のみがカスケードに加わります。ここで、 <code>@font-face</code> は <code><a href="/ja/docs/Web/CSS/@font-face/font-family">font-family</a></code> 記述子で識別されます。いくつかの <code>@font-face</code> 規則に同じ記述子が定義されていた場合は、全体から見て、最も適切な <code>@font-face</code> が考慮されます。</p>
-
-<p>大部分の @-規則 — {{cssxref("@media")}}, {{cssxref("@document")}}, {{cssxref("@supports")}} の中など — に含まれる宣言はカスケードに加わりますが、 {{cssxref("@keyframes")}} に含まれる宣言は加わりません。 <code>@font-face</code> と同様に、 @-規則全体のみがカスケードアルゴリズムによって選択されます。</p>
-
-<p>最後に、 {{cssxref("@import")}} および {{cssxref("@charset")}} は特定のアルゴリズムに従い、カスケードアルゴリズムには影響を与えないことに注意してください。</p>
-
-<h2 id="Origin_of_CSS_declarations" name="Origin_of_CSS_declarations">CSS 宣言のオリジン</h2>
-
-<p>CSS カスケードアルゴリズムの役割は、 CSS プロパティの正しい値を決定するために CSS 宣言を選択することです。 CSS 宣言は、 <strong>{{anch("User-agent stylesheets", "ユーザーエージェントスタイルシート")}}</strong>, <strong>{{anch("Author stylesheets", "ページ作成者スタイルシート")}}</strong>, <strong>{{anch("User stylesheets", "ユーザースタイルシート")}}</strong> など、さまざまなものに由来します。</p>
-
-<p>スタイルシートはこれらの異なる起源に由来しますが、それらは範囲が重複しています。これを機能させるために、カスケードアルゴリズムはそれらの相互作用を定義します。</p>
-
-<h3 id="User-agent_stylesheets" name="User-agent_stylesheets">ユーザーエージェントスタイルシート</h3>
-
-<p>ブラウザーには、任意の文書に既定のスタイルを提供する基本的なスタイルシートがあります。これらのスタイルシートには<strong>ユーザーエージェントスタイルシート</strong>という名前が付けられています。実際のスタイルシートを使用するブラウザーもあれば、コードでシミュレートするブラウザーもありますが、最終的な結果は同じです。</p>
-
-<p>一部のブラウザーでは、ユーザーがユーザーエージェントスタイルシートを変更することができます。ユーザーエージェントスタイルシートに関するいくつかの制約は HTML 仕様書によって設定されていますが、ブラウザーにはまだ多くの自由度があります。つまり、ブラウザーごとに大きな違いがあります。開発プロセスを簡素化するために、ウェブ開発者は多くの場合、 CSS リセットスタイルシートを使用して、特定のニーズに合わせて変更を開始する前に、共通のプロパティ値を既知の状態にします。</p>
-
-<h3 id="Author_stylesheets" name="Author_stylesheets">ページ作成者スタイルシート</h3>
-
-<p><strong>ページ作成者スタイルシート</strong>は、スタイルシートの最も一般的な種類です。これらは、特定のウェブページまたはサイトのデザインの一部としてスタイルを定義するスタイルシートです。ページの作成者は、1つ以上のスタイルシートを使用して文書のスタイルを定義します。スタイルシートは、ウェブサイトの外観 (テーマ) を定義します。</p>
-
-<h3 id="User_stylesheets" name="User_stylesheets">ユーザースタイルシート</h3>
-
-<p>ウェブサイトのユーザー (または読者) は、ユーザーの希望に合わせて使い勝手を調整するように設計された独自の<strong>ユーザースタイルシート</strong>を使用して、多くのブラウザーでスタイルを上書きすることを選択できます。</p>
-
-<h2 id="Cascading_order" name="Cascading_order">カスケード順</h2>
-
-<p>カスケードアルゴリズムは、文書の各要素の各プロパティに適用する値を見つける方法を決定します。</p>
-
-<ol>
- <li>最初に、さまざまな起源からすべての規則をフィルタリングして、特定の要素に適用されるルールのみを保持します。つまり、セレクターが指定された要素と一致し、適切な <code>media</code> @-規則の一部である規則を意味します。</li>
- <li>次に、これらのルールをその重要度、つまり、 <code>!important</code> が後に続くかどうか、およびその起源に従って並べ替えます。カスケードは上流から下流に向けて行われます。つまり、ユーザー定義のスタイルシートによる <code>!important</code> の値は、ユーザーエージェントスタイルシートによる通常の値よりも優先されます。
-  <table class="standard-table">
-   <thead>
-    <tr>
-     <th scope="col"></th>
-     <th scope="col">起源</th>
-     <th scope="col">重要性</th>
-    </tr>
-   </thead>
-   <tbody>
-    <tr>
-     <td>1</td>
-     <td>ユーザーエージェント</td>
-     <td>normal</td>
-    </tr>
-    <tr>
-     <td>2</td>
-     <td>ユーザー</td>
-     <td>normal</td>
-    </tr>
-    <tr>
-     <td>3</td>
-     <td>作成者</td>
-     <td>normal</td>
-    </tr>
-    <tr>
-     <td>4</td>
-     <td>アニメーション</td>
-     <td></td>
-    </tr>
-    <tr>
-     <td>5</td>
-     <td>ユーザーエージェント</td>
-     <td><code>!important</code></td>
-    </tr>
-    <tr>
-     <td>6</td>
-     <td>作成者</td>
-     <td><code>!important</code></td>
-    </tr>
-    <tr>
-     <td>7</td>
-     <td>ユーザー</td>
-     <td><code>!important</code></td>
-    </tr>
-    <tr>
-     <td>8</td>
-     <td>トランジション</td>
-     <td></td>
-    </tr>
-   </tbody>
-  </table>
- </li>
- <li>同等の場合は、どれを選択するかに値の<a href="/ja/docs/Web/CSS/Specificity">詳細度</a>が考慮されます。</li>
-</ol>
-
-<h2 id="Resetting_styles" name="Resetting_styles">スタイルの初期化</h2>
-
-<p>コンテンツのスタイルの変更が完了した後で、それ自体を既知の状態に戻す必要がある状況に陥ることがあります。アニメーションやテーマの変更などの場合に起こるかもしれません。 CSS プロパティ {{cssxref("all")}} を使用すると、 CSS 内の (ほぼ) すべてのものを既知の状態に素早く戻すことができます。</p>
-
-<p><code>all</code>では、すべてのプロパティを初期 (既定) 状態、前のレベルのカスケードから継承した状態、特定の起源 (ユーザーエージェントスタイルシート、作成者スタイルシート、またはユーザースタイルシート) のいずれかに直ちに復元することを選択できます。または、プロパティの値を完全にクリアすることもできます。</p>
-
-<h2 id="CSS_animations_and_the_cascade" name="CSS_animations_and_the_cascade">CSS アニメーションとカスケード</h2>
-
-<p><a href="/ja/docs/Web/CSS/CSS_Animations">CSS アニメーション</a>は、 {{cssxref("@keyframes")}} @-規則を使用して、状態間のアニメーションを定義します。キーフレームはカスケードされません。つまり、 CSS は常に単一の {{cssxref("@keyframes")}} から値を取得し、複数の値を混合することはありません。</p>
-
-<p>複数のキーフレームが適用された場合は、最も重要な文書で定義されている最新のものを選択しますが、すべてを組み合わせることはありません。</p>
-
-<h2 id="Example" name="Example">例</h2>
-
-<p>さまざまなオリジンにまたがる CSS の複数のソースを含む例を見てみましょう。ここには、ユーザーエージェントスタイルシート、2つの作成者スタイルシート、ユーザースタイルシート、および HTML 内のインラインスタイルがあります。</p>
-
-<p><strong>ユーザーエージェント CSS:</strong></p>
-
-<pre class="brush:css;">li { margin-left: 10px }</pre>
-
-<p><strong>作成者 CSS 1:</strong></p>
-
-<pre class="brush:css;">li { margin-left: 0 } /* 初期化のため */</pre>
-
-<p><strong>作成者 CSS 2:</strong></p>
-
-<pre class="brush:css;">@media screen {
-  li { margin-left: 3px }
-}
-
-@media print {
-  li { margin-left: 1px }
-}
-</pre>
-
-<p><strong>ユーザー CSS:</strong></p>
-
-<pre class="brush:css;">.specific { margin-left: 1em }</pre>
-
-<p><strong>HTML:</strong></p>
-
-<pre class="brush:html;">&lt;ul&gt;
-  &lt;li class="specific"&gt;1&lt;sup&gt;st&lt;/sup&gt;&lt;/li&gt;
-  &lt;li&gt;2&lt;sup&gt;nd&lt;/sup&gt;&lt;/li&gt;
-&lt;/ul&gt;
-</pre>
-
-<p>この場合、 <code>li</code> および <code>.specific</code> 規則内の宣言を適用する必要があります。 <code>!important</code>として宣言されている宣言はないため、優先順位は、ユーザースタイルシートまたはユーザーエージェントスタイルシートの前の作成者スタイルシートです。</p>
-
-<p>ここでは3つの宣言が競合しています。</p>
-
-<pre class="brush:css;">margin-left: 0</pre>
-
-<pre class="brush:css;">margin-left: 3px</pre>
-
-<pre class="brush:css;">margin-left: 1px</pre>
-
-<p>最後のものは (画面上で) 無視され、最初の2つは同じセレクターを持つため、同じ詳細度があります。したがって、次に選択されるのは同じ詳細度のうちの最後のものです。</p>
-
-<pre class="brush:css;">margin-left: 3px</pre>
-
-<p>カスケードアルゴリズムは詳細度アルゴリズムの前に適用されるため、ユーザー CSS で定義された宣言はより高い詳細度を持ちますが、選択されないことに注意してください。</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("CSS4 Cascade")}}</td>
-   <td>{{Spec2("CSS4 Cascade")}}</td>
-   <td>プロパティをカスケードレベルに戻すことができる {{CSSxRef("revert")}} キーワードを追加。</td>
-  </tr>
-  <tr>
-   <td>{{SpecName("CSS3 Cascade")}}</td>
-   <td>{{Spec2("CSS3 Cascade")}}</td>
-   <td>カスケードオリジンの上書を削除。 W3C 標準で使用されなかったため。</td>
-  </tr>
-  <tr>
-   <td>{{SpecName("CSS2.1", "cascade.html", "the cascade")}}</td>
-   <td>{{Spec2("CSS2.1")}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName("CSS1", "#the-cascade", "the cascade")}}</td>
-   <td>{{Spec2("CSS1")}}</td>
-   <td>初回定義</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="See_also" name="See_also">関連情報</h2>
-
-<ul>
- <li><a href="/ja/docs/Learn/CSS/Introduction_to_CSS/Cascade_and_inheritance">とても簡単な CSS カスケードの紹介</a></li>
- <li>{{CSS_Key_Concepts}}</li>
-</ul>
diff --git a/files/ja/web/css/cascade/index.md b/files/ja/web/css/cascade/index.md
new file mode 100644
index 0000000000..a1e6481a60
--- /dev/null
+++ b/files/ja/web/css/cascade/index.md
@@ -0,0 +1,157 @@
+---
+title: CSS カスケード入門
+slug: Web/CSS/Cascade
+tags:
+  - CSS
+  - Reference
+  - カスケード
+  - ガイド
+  - スタイル
+  - スタイルシート
+  - レイアウト
+translation_of: Web/CSS/Cascade
+---
+{{CSSRef}}
+
+**カスケード**は、異なるソースから来るプロパティ値を組み合わせる方法を定義するアルゴリズムです。これは*カスケーディング*スタイルシートという名前で強調されているように、 CSS の中心を占めるものです。この記事では、カスケードとは何か、 {{Glossary("CSS")}} の[宣言](/ja/docs/Web/API/CSSStyleDeclaration)をカスケードする順番、そしてウェブ開発者にどのように影響するかを説明します。
+
+## どの CSS エンティティがカスケードに関係するか
+
+CSS 宣言のみが、つまりプロパティ/値の組だけが、カスケードに加わります。つまり、宣言以外のエンティティを含む[アット規則](/ja/docs/Web/CSS/At-rule)、例えば*記述子*を含む {{ cssxref("@font-face")}} などは、カスケードには加わりません。これらの場合、カスケードには全体としてのアット規則のみがカスケードに加わります。ここで、 `@font-face` は [`font-family`](/ja/docs/Web/CSS/@font-face/font-family) 記述子で識別されます。いくつかの `@font-face` 規則に同じ記述子が定義されていた場合は、全体から見て、最も適切な `@font-face` が考慮されます。
+
+大部分のアット規則 — {{cssxref("@media")}}、{{cssxref("@document")}}、{{cssxref("@supports")}} の中など — に含まれる宣言はカスケードに加わりますが、 {{cssxref("@keyframes")}} に含まれる宣言は加わりません。 `@font-face` と同様に、アット規則全体のみがカスケードアルゴリズムによって選択されます。
+
+最後に、 {{cssxref("@import")}} および {{cssxref("@charset")}} は特定のアルゴリズムに従い、カスケードアルゴリズムには影響を与えないことに注意してください。
+
+## CSS 宣言のオリジン
+
+CSS カスケードアルゴリズムの役割は、 CSS プロパティの正しい値を決定するために CSS 宣言を選択することです。 CSS 宣言は、**{{anch("User-agent stylesheets", "ユーザーエージェントスタイルシート")}}**、**{{anch("Author stylesheets", "ページ作成者スタイルシート")}}**、**{{anch("User stylesheets", "ユーザースタイルシート")}}**など、さまざまなものに由来します。
+
+スタイルシートの起源はこのように異なりますが、その範囲は重複しています。これを実現するために、カスケードアルゴリズムが相互作用を定義しています。
+
+### ユーザーエージェントスタイルシート
+
+ブラウザーには、任意の文書に既定のスタイルを提供する基本的なスタイルシートがあります。これらのスタイルシートには**ユーザーエージェントスタイルシート**と呼ばれています。実際のスタイルシートを使用するブラウザーもあれば、コードでシミュレートするブラウザーもありますが、最終的な結果は同じです。
+
+ブラウザーによっては、ユーザーがユーザーエージェントスタイルシートを変更することができます。ユーザーエージェントスタイルシートに関するいくつかの制約は HTML 仕様書によって設定されていますが、ブラウザーにはまだ多くの自由度があります。つまり、ブラウザーごとに大きな違いがあります。開発プロセスを簡素化するために、ウェブ開発者は多くの場合、 CSS リセットスタイルシートを使用して、特定のニーズに合わせて変更を開始する前に、共通のプロパティ値を既知の状態にします。
+
+### 作成者スタイルシート
+
+**作成者スタイルシート**は、スタイルシートの最も一般的な種類です。これらは、特定のウェブページまたはサイトのデザインの一部としてスタイルを定義するスタイルシートです。ページの作成者は、1つ以上のスタイルシートを使用して文書のスタイルを定義します。スタイルシートは、ウェブサイトの外観 (テーマ) を定義します。
+
+### ユーザースタイルシート
+
+ウェブサイトのユーザー (または読者) は、ユーザーの希望に合わせて使い勝手を調整するように設計された独自の**ユーザースタイルシート**を使用して、多くのブラウザーでスタイルを上書きすることを選択できます。
+
+## カスケード順
+
+カスケードアルゴリズムは、文書の各要素の各プロパティに適用する値を見つける方法を決定します。
+
+1.  最初に、さまざまな起源からすべての規則をフィルタリングして、特定の要素に適用されるルールのみを保持します。つまり、セレクターが指定された要素と一致し、適切な `media` アット規則の一部である規則を意味します。
+2.  次に、これらの規則をその重要度、つまり、 `!important` が後に続くかどうか、およびその起源に従って並べ替えます。カスケードは上流から下流に向けて行われます。つまり、ユーザー定義のスタイルシートによる `!important` の値は、ユーザーエージェントスタイルシートによる通常の値よりも優先されます。
+
+    |     | 起源                 | 重要度       |
+    | --- | -------------------- | ------------ |
+    | 1   | ユーザーエージェント | 通常         |
+    | 2   | ユーザー             | 通常         |
+    | 3   | 作成者               | 通常         |
+    | 4   | アニメーション       |              |
+    | 5   | 作成者               | `!important` |
+    | 6   | ユーザー             | `!important` |
+    | 7   | ユーザーエージェント | `!important` |
+    | 8   | トランジション       |              |
+
+3.  同等の場合は、[詳細度](/ja/docs/Web/CSS/Specificity)を考慮してどれを選択するかを考慮します。
+
+## スタイルの初期化
+
+コンテンツがスタイルの変更を終えた後、スタイルを既知の状態に戻す必要が出てくることがあります。これは、アニメーションやテーマの変更などの場合に起こります。 CSS プロパティの {{cssxref("all")}} を使うと、 CSS 内の (ほぼ) すべてのものを既知の状態に素早く戻すことができます。
+
+`all` では、すべてのプロパティを、初期状態 (既定)、カスケードの前のレベルから引き継いだ状態、特定のオリジン (ユーザーエージェントスタイルシート、作成者スタイルシート、ユーザースタイルシート)、さらにはプロパティの値を完全にクリアする状態のいずれかにすぐに戻すことができます。
+
+## CSS アニメーションとカスケード
+
+[CSS アニメーション](/ja/docs/Web/CSS/CSS_Animations)は、 {{cssxref("@keyframes")}} アット規則を使用して、状態間のアニメーションを定義します。キーフレームはカスケードされません。つまり、 CSS は常に単一の {{cssxref("@keyframes")}} から値を取得し、複数の値を混在させることはありません。
+
+複数のキーフレームが適用された場合は、最も重要な文書で定義されている最新のものを選択しますが、すべてを組み合わせることはありません。
+
+## 例
+
+さまざまなオリジンにまたがる CSS の複数のソースを含む例を見てみましょう。ここには、ユーザーエージェントスタイルシート、 2 つの作成者スタイルシート、ユーザースタイルシート、および HTML 内のインラインスタイルがあります。
+
+**ユーザーエージェント CSS:**
+
+```css
+li { margin-left: 10px }
+```
+
+**作成者 CSS 1:**
+
+```css
+li { margin-left: 0 } /* これは初期化 */
+```
+
+**作成者 CSS 2:**
+
+```css
+@media screen {
+  li { margin-left: 3px }
+}
+
+@media print {
+  li { margin-left: 1px }
+}
+```
+
+**ユーザー CSS:**
+
+```css
+.specific { margin-left: 1em }
+```
+
+**HTML:**
+
+```html
+<ul>
+  <li class="specific">1<sup>st</sup></li>
+  <li>2<sup>nd</sup></li>
+</ul>
+```
+
+この場合、 `li` および `.specific` 規則内の宣言を適用する必要があります。 `!important`として宣言されている宣言はないため、優先順位は、ユーザースタイルシートまたはユーザーエージェントスタイルシートの前の作成者スタイルシートです。
+
+ここでは 3 つの宣言が競合しています。
+
+```css
+margin-left: 0
+```
+
+```css
+margin-left: 3px
+```
+
+```css
+margin-left: 1px
+```
+
+最後のものは (画面上で) 無視され、最初の 2 つは同じセレクターを持つため、同じ詳細度があります。したがって、次に選択されるのは同じ詳細度のうちの最後のものです。
+
+```css
+margin-left: 3px
+```
+
+カスケードアルゴリズムは詳細度アルゴリズムの前に適用されるため、ユーザー CSS で定義された宣言はより高い詳細度を持ちますが、選択されないことに注意してください。
+
+## 仕様書
+
+| 仕様書                                                                   | 状態                           | コメント                                                                                               |
+| ------------------------------------------------------------------------ | -------------------------------- | ----------------------------------------------------------------------------------------------------- |
+| {{SpecName("CSS4 Cascade")}}                                     | {{Spec2("CSS4 Cascade")}} | プロパティをカスケードレベルに戻すことができる {{CSSxRef("revert")}} キーワードを追加。 |
+| {{SpecName("CSS3 Cascade")}}                                     | {{Spec2("CSS3 Cascade")}} | カスケードオリジンの上書きを削除。 W3C 標準で使用されなかったため。                          |
+| {{SpecName("CSS2.1", "cascade.html", "the cascade")}} | {{Spec2("CSS2.1")}}         |                                                                                                       |
+| {{SpecName("CSS1", "#the-cascade", "the cascade")}}     | {{Spec2("CSS1")}}         | 初回定義                                                                                   |
+
+## 関連情報
+
+- [とても簡単な CSS カスケードの紹介](/ja/docs/Learn/CSS/Introduction_to_CSS/Cascade_and_inheritance)
+- {{CSS_Key_Concepts}}
diff --git a/files/ja/web/css/color-scheme/index.md b/files/ja/web/css/color-scheme/index.md
new file mode 100644
index 0000000000..48121555dd
--- /dev/null
+++ b/files/ja/web/css/color-scheme/index.md
@@ -0,0 +1,85 @@
+---
+title: color-scheme
+slug: Web/CSS/color-scheme
+tags:
+  - CSS
+  - CSS Colors
+  - CSS Property
+  - HTML Colors
+  - HTML Styles
+  - Layout
+  - Reference
+  - Styling HTML
+  - Styling text
+  - Web
+  - color-adjust
+  - recipe:css-property
+browser-compat: css.properties.color-scheme
+translation_of: Web/CSS/color-scheme
+---
+{{CSSRef}}
+
+**`color-scheme`** は CSS のプロパティで、要素がどのような配色で快適に表示されるかを示すことができます。
+
+オペレーティングシステムの配色の一般的な選択肢は、「ライト」と「ダーク」、または「中間モード」と「夜モード」です。ユーザーがこれらの配色のいずれかを選択すると、 OS はユーザーインターフェースを調整します。これには、フォームコントロール、スクロールバー、および CSS システムカラーの使用値が含まれます。
+
+## 構文
+
+```css
+color-scheme: normal;
+color-scheme: light;
+color-scheme: dark;
+color-scheme: light dark;
+
+/* グローバル値 */
+color-scheme: inherit;
+color-scheme: initial;
+color-scheme: revert;
+color-scheme: unset;
+```
+
+`color-scheme` プロパティの値は以下のキーワードのうちの一つである必要があります。
+
+### 値
+
+- `normal`
+  - : この要素がどの配色も認識しないため、ブラウザーの既定の配色でレンダリングするべきであることを示します。
+- `light`
+  - : オペレーティングシステムのライト配色を使用して要素をレンダリングできることを示します。
+- `dark`
+  - : オペレーティングシステムのダーク配色を使用して要素をレンダリングできることを示します。
+
+## 公式定義
+
+{{cssinfo}}
+
+## 形式文法
+
+{{csssyntax}}
+
+## 例
+
+### 配色への適合
+
+ページ全体をユーザーの配色設定に合わせるには、 `color-scheme` を {{cssxref(":root")}} 要素で設定してください。
+
+```css
+:root {
+  color-scheme: light dark;
+}
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- [CSS を使った HTML の要素への色の適用](/ja/docs/Web/HTML/Applying_color)
+- その他の色に関するプロパティ: {{cssxref("color")}}, {{cssxref("background-color")}}, {{cssxref("border-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("text-shadow")}}, {{cssxref("caret-color")}}, {{cssxref("column-rule-color")}}
+- {{cssxref("background-image")}}
+- {{cssxref("-webkit-print-color-adjust")}}
diff --git a/files/ja/web/css/css_background_and_borders/border-image_generator/index.html b/files/ja/web/css/css_background_and_borders/border-image_generator/index.html
deleted file mode 100644
index 8ce5bab6e9..0000000000
--- a/files/ja/web/css/css_background_and_borders/border-image_generator/index.html
+++ /dev/null
@@ -1,2629 +0,0 @@
----
-title: 境界画像作成ツール
-slug: Web/CSS/CSS_Background_and_Borders/Border-image_generator
-tags:
-  - CSS
-  - CSS 背景と境界
-  - ツール
-translation_of: Web/CSS/CSS_Background_and_Borders/Border-image_generator
----
-<p>このツールを使用して、 CSS3 の {{cssxref("border-image")}} の値を作成できます。</p>
-
-<div class="hidden">
-<h2 id="Border_Image_Generator" name="Border_Image_Generator">Border Image Generator</h2>
-
-<h3 id="HTML_Content">HTML Content</h3>
-
-<pre class="brush: html">    &lt;div id="container"&gt;
-
-        &lt;div id="gallery"&gt;
-            &lt;div id="image-gallery"&gt;
-                &lt;img class="image" src="https://mdn.mozillademos.org/files/6007/border-image-1.png" data-stateID="border1"/&gt;
-                &lt;img class="image" src="https://mdn.mozillademos.org/files/6009/border-image-2.png" data-stateID="border2"/&gt;
-                &lt;img class="image" src="https://mdn.mozillademos.org/files/6011/border-image-3.png" data-stateID="border3"/&gt;
-                &lt;img class="image" src="https://mdn.mozillademos.org/files/6013/border-image-4.png" data-stateID="border4"/&gt;
-                &lt;img class="image" src="https://mdn.mozillademos.org/files/6015/border-image-5.png" data-stateID="border5"/&gt;
-                &lt;img class="image" src="https://mdn.mozillademos.org/files/6017/border-image-6.svg" data-stateID="border6"/&gt;
-            &lt;/div&gt;
-        &lt;/div&gt;
-
-        &lt;div id="load-actions" class="group section"&gt;
-            &lt;div id="toggle-gallery" data-action="hide"&gt; &lt;/div&gt;
-            &lt;div id="load-image" class="button"&gt; Upload image &lt;/div&gt;
-            &lt;input id="remote-url" type="text" placeholder="Load an image from URL"/&gt;
-            &lt;div id="load-remote" class="button"&gt; &lt;/div&gt;
-        &lt;/div&gt;
-
-        &lt;div id="general-controls" class="group section"&gt;
-            &lt;div class="name"&gt; Control Box &lt;/div&gt;
-            &lt;div class="separator"&gt;&lt;/div&gt;
-            &lt;div class="property"&gt;
-                &lt;div class="name"&gt;scale&lt;/div&gt;
-                &lt;div class="ui-input-slider" data-topic="scale"
-                    data-unit="%" data-max="300" data-sensivity="10"&gt;
-                &lt;/div&gt;
-            &lt;/div&gt;
-            &lt;div class="separator"&gt;&lt;/div&gt;
-            &lt;div class="property"&gt;
-                &lt;div class="name"&gt;draggable&lt;/div&gt;
-                &lt;div class="ui-checkbox" data-topic='drag-subject'&gt;&lt;/div&gt;
-            &lt;/div&gt;
-            &lt;div class="property right"&gt;
-                &lt;div class="name"&gt;section height&lt;/div&gt;
-                &lt;div class="ui-input-slider" data-topic="preview-area-height"
-                    data-min="400" data-max="1000"&gt;
-                &lt;/div&gt;
-            &lt;/div&gt;
-        &lt;/div&gt;
-
-        &lt;div id="preview_section" class="group section"&gt;
-            &lt;div id="subject"&gt;
-                &lt;div class="guideline" data-axis="Y" data-topic="slice-top"&gt;&lt;/div&gt;
-                &lt;div class="guideline" data-axis="X" data-topic="slice-right"&gt;&lt;/div&gt;
-                &lt;div class="guideline" data-axis="Y" data-topic="slice-bottom"&gt;&lt;/div&gt;
-                &lt;div class="guideline" data-axis="X" data-topic="slice-left"&gt;&lt;/div&gt;
-            &lt;/div&gt;
-            &lt;div id="preview"&gt; &lt;/div&gt;
-        &lt;/div&gt;
-
-        &lt;!-- controls --&gt;
-        &lt;div id="controls" class="group section"&gt;
-
-            &lt;!-- border-image-slice --&gt;
-            &lt;div id="border-slice-control" class="category"&gt;
-                &lt;div class="title"&gt; border-image-slice &lt;/div&gt;
-                &lt;div class="property"&gt;
-                    &lt;div class="name"&gt;fill&lt;/div&gt;
-                    &lt;div class="ui-checkbox" data-topic='slice-fill'&gt;&lt;/div&gt;
-                &lt;/div&gt;
-            &lt;/div&gt;
-
-            &lt;!-- border-image-width --&gt;
-            &lt;div id="border-width-control" class="category"&gt;
-                &lt;div class="title"&gt; border-image-width &lt;/div&gt;
-            &lt;/div&gt;
-
-            &lt;!-- border-image-outset --&gt;
-            &lt;div id="border-outset-control" class="category"&gt;
-                &lt;div class="title"&gt; border-image-outset &lt;/div&gt;
-            &lt;/div&gt;
-
-            &lt;!-- other-settings --&gt;
-            &lt;div id="aditional-properties" class="category"&gt;
-                &lt;div class="title"&gt; aditional-properties &lt;/div&gt;
-                &lt;div class="property"&gt;
-                    &lt;div class="name"&gt; repeat-x &lt;/div&gt;
-                    &lt;div class="ui-dropdown border-repeat" data-topic="image-repeat-X" data-selected="2"&gt;
-                        &lt;div data-value="0"&gt;repeat&lt;/div&gt;
-                        &lt;div data-value="0"&gt;stretch&lt;/div&gt;
-                        &lt;div data-value="0"&gt;round&lt;/div&gt;
-                    &lt;/div&gt;
-                &lt;/div&gt;
-                &lt;div class="property"&gt;
-                    &lt;div class="name"&gt; repeat-y &lt;/div&gt;
-                    &lt;div class="ui-dropdown border-repeat" data-topic="image-repeat-Y" data-selected="2"&gt;
-                        &lt;div data-value="1"&gt;repeat&lt;/div&gt;
-                        &lt;div data-value="1"&gt;stretch&lt;/div&gt;
-                        &lt;div data-value="1"&gt;round&lt;/div&gt;
-                    &lt;/div&gt;
-                &lt;/div&gt;
-                &lt;div class="property"&gt;
-                    &lt;div class="ui-input-slider" data-topic="font-size" data-info="em size"
-                        data-unit="px" data-value="12" data-sensivity="3"&gt;
-                    &lt;/div&gt;
-                &lt;/div&gt;
-
-                &lt;div class="property"&gt;
-                    &lt;div class="ui-input-slider" data-topic="preview-width" data-info="width"
-                         data-unit=" px" data-min="10" data-max="10000" data-sensivity="3"&gt;&lt;/div&gt;
-                &lt;/div&gt;
-                &lt;div class="property"&gt;
-                    &lt;div class="ui-input-slider" data-topic="preview-height" data-info="height"
-                        data-unit=" px" data-min="10" data-max="10000" data-sensivity="3"&gt;
-                    &lt;/div&gt;
-                &lt;/div&gt;
-            &lt;/div&gt;
-
-
-            &lt;div id="output" class="category"&gt;
-                &lt;div class="title"&gt; CSS Code &lt;/div&gt;
-                &lt;div class="css-property"&gt;
-                    &lt;span class="name"&gt; border-image-slice: &lt;/span&gt;
-                    &lt;span id="out-border-slice" class="value"&gt; &lt;/span&gt;
-                &lt;/div&gt;
-                &lt;div class="css-property"&gt;
-                    &lt;span class="name"&gt; border-image-width: &lt;/span&gt;
-                    &lt;span id="out-border-width" class="value"&gt; &lt;/span&gt;
-                &lt;/div&gt;
-                &lt;div class="css-property"&gt;
-                    &lt;span class="name"&gt; border-image-outset: &lt;/span&gt;
-                    &lt;span id="out-border-outset" class="value"&gt; &lt;/span&gt;
-                &lt;/div&gt;
-                &lt;div class="css-property"&gt;
-                    &lt;span class="name"&gt; border-image-repeat: &lt;/span&gt;
-                    &lt;span id="out-border-repeat" class="value"&gt; &lt;/span&gt;
-                &lt;/div&gt;
-                &lt;div class="css-property"&gt;
-                    &lt;span class="name"&gt; border-image-source: &lt;/span&gt;
-                    &lt;span id="out-border-source" class="value"&gt;  &lt;/span&gt;
-                &lt;/div&gt;
-            &lt;/div&gt;
-
-        &lt;/div&gt;
-    &lt;/div&gt;</pre>
-
-<h3 id="CSS_Content">CSS Content</h3>
-
-<pre class="brush: css">/*  GRID OF TWELVE
- * ========================================================================== */
-
-.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 {
-	height: 20px;
-	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
-	-moz-user-select: none;
-	user-select: none;
-}
-
-.ui-input-slider * {
-	float: left;
-	height: 100%;
-	line-height: 100%;
-}
-
-/* Input Slider */
-
-.ui-input-slider &gt; 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 DropDown
- */
-
-/* Dropdown */
-
-.ui-dropdown {
-	height: 2em;
-	width: 120px;
-	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
-	font-size: 12px;
-
-	background-image: url("https://mdn.mozillademos.org/files/6037/drop_arrow_icon.png");
-	background-position: right center;
-	background-repeat: no-repeat;
-	background-color: #359740;
-
-	position: relative;
-
-	-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;
-}
-
-.ui-dropdown:hover {
-	cursor: pointer;
-	background-color: #208B20;
-}
-
-/* Dropdown Select Button */
-
-.ui-dropdown-select {
-	height: inherit;
-	padding: 0 0.75em;
-	color: #FFF;
-	line-height: 2em;
-}
-
-/* Dropdown List */
-
-.ui-dropdown-list {
-	width: 100%;
-	height: 150px;
-	max-height: 150px;
-	margin: 0;
-	padding: 0 0.3em;
-
-	border: 3px solid #3490D2;
-	border-color: #208B20;
-	background: #666;
-	background-color: #EEF1F5;
-	color: #000;
-
-	position: absolute;
-	top: 2em;
-	left: 0;
-	z-index: 100;
-
-	overflow: hidden;
-	transition: all 0.3s;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-}
-
-.ui-dropdown-list:hover {
-	overflow: auto;
-}
-
-.ui-dropdown-list[data-hidden='true'] {
-	height: 0 !important;
-	opacity: 0;
-	visibility: hidden;
-}
-
-.ui-dropdown[data-position='left'] .ui-dropdown-list {
-	left: -100%;
-	top: 0;
-}
-
-.ui-dropdown[data-position='right'] .ui-dropdown-list {
-	left: 100%;
-	top: 0;
-}
-
-.ui-dropdown-list &gt; div {
-	width: 100%;
-	height: 1.6em;
-	margin: 0.3em 0;
-	padding: 0.3em;
-	line-height: 1em;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-}
-
-.ui-dropdown-list &gt; div:hover {
-	background: #3490D2;
-	color:#FFF;
-	border-radius: 2px;
-	cursor: pointer;
-}
-
-
-/*************************************************************************************/
-/*************************************************************************************/
-
-/*
- * UI Button
- */
-
-/* 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 &gt; input {
- 	display: none;
-}
-
-.ui-checkbox &gt; 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: 2px;
-	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 &gt; label:hover {
-	cursor: pointer;
-}
-
-.ui-checkbox &gt; input:checked + label {
-	background-image: url("https://mdn.mozillademos.org/files/5681/checked.png");
-	background-color: #379B4A;
-}
-
-/*************************************************************************************/
-/*************************************************************************************/
-
-/*
- * BORDER IMAGE GENERATOR TOOL
- */
-
-body {
-	width: 100%;
-	margin: 0 auto;
-	padding: 0 0 20px 0;
-
-	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
-
-	/*background: url("https://mdn.mozillademos.org/files/6025/grain.png");*/
-	border: 1px solid #EEE;
-
-	-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;
-}
-
-body[data-move='X'] {
-	cursor: w-resize !important;
-}
-
-body[data-move='Y'] {
-	cursor: s-resize !important;
-}
-
-#container {
-	width: 100%;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-}
-
-[data-draggable='true']:hover {
-	cursor: move;
-}
-
-[data-draggable='true']:hover &gt; * {
-	cursor: default;
-}
-
-
-
-/******************************************************************************/
-/******************************************************************************/
-
-/*
- * Border Image Picker
- */
-
-#gallery {
-	box-shadow: 0 0 3px 0 #BABABA;
-}
-
-#image-gallery {
-	width: 600px;
-	height: 100px;
-	margin: 0 auto;
-	transition: margin 0.4s;
-}
-
-#image-gallery .image {
-	height: 80px;
-	float: left;
-	margin: 10px;
-	opacity: 0.5;
-	background-color: #FFF;
-	box-shadow: 0px 0px 3px 1px #BABABA;
-}
-
-#image-gallery .image[selected="true"] {
-	box-shadow: 0px 0px 3px 1px #3BBA52;
-	opacity: 1;
-}
-
-#image-gallery .image:hover {
-	cursor: pointer;
-	box-shadow: 0px 0px 3px 1px #30ACE5;
-	opacity: 1;
-}
-
-#image-gallery[data-collapsed='true'] {
-	margin-top: -100px;
-}
-
-/* Load Menu */
-
-#load-actions {
-	margin: 10px 0;
-}
-
-#toggle-gallery {
-	width: 30px;
-	height: 25px;
-	margin: 10px;
-	color: #FFF;
-
-	background-image: url('https://mdn.mozillademos.org/files/6005/arrow-up-white.png');
-	background-repeat: no-repeat;
-	background-position: top 4px center;
-	background-color: #888888 !important;
-
-	border-radius: 2px;
-	float: left;
-}
-
-#toggle-gallery:hover {
-	cursor: pointer;
-}
-
-#toggle-gallery[data-action='show'] {
-	background-image: url('https://mdn.mozillademos.org/files/6001/arrow-down-white.png');
-	background-color: #888888 !important;
-}
-
-#toggle-gallery[data-action='hide'] {
-	background-image: url('https://mdn.mozillademos.org/files/6005/arrow-up-white.png');
-}
-
-.button {
-	width: 100px;
-	height: 25px;
-	margin: 10px;
-	color: #FFF;
-	text-align: center;
-	font-size: 12px;
-	line-height: 25px;
-	background-color: #379B4A;
-	border-radius: 2px;
-	float: left;
-}
-
-.button:hover {
-	cursor: pointer;
-	background-color: #3380C4;
-}
-
-#load-image {
-	float: left;
-}
-
-#load-remote {
-	width: 30px;
-	background-image: url('https://mdn.mozillademos.org/files/6003/arrow-right-white.png');
-	background-repeat: no-repeat;
-	background-position: center center;
-}
-
-#remote-url {
-	width: 200px;
-	height: 23px;
-	margin: 10px;
-	padding: 0 5px;
-	border: 1px solid #379B4A;
-	border-radius: 2px;
-	float: left;
-
-	transition: width 0.5s;
-}
-
-#remote-url:focus {
-	box-shadow: 0px 0px 3px -1px #379B4A; /*#68ACE8; */
-	border-color: rgba(55, 155, 74, 0.5);
-	width: 450px;
-}
-
-/*
- * Visible Area
- */
-
-#preview_section {
-	position: relative;
-	min-height: 400px;
-}
-
-/* Image Control */
-
-#subject {
-	width: 300px;
-	height: 300px;
-	background-repeat: no-repeat;
-	background-size: 100%;
-	background-color: #FFF;
-	border: 1px solid #CCC;
-
-	position: absolute;
-	z-index: 10;
-	top: 15%;
-	left: 10%;
-
-	box-shadow: 0 0 3px 0 #BABABA;
-	transition-property: width, height;
-	transition-duration: 0.1s;
-}
-
-#subject .guideline {
-	background-color: rgba(255, 255, 255, 0.7);
-	border: 1px solid rgba(0, 0, 0, 0.3);
-	position: absolute;
-}
-
-#subject .guideline:hover {
-	background-color: #F00;
-}
-
-#subject .guideline[data-active] {
-	background-color: #F00;
-	z-index: 10;
-}
-
-#subject .guideline[data-axis='X'] {
-	width: 1px;
-	height: 100%;
-	top: -1px;
-}
-
-#subject .guideline[data-axis='Y'] {
-	width: 100%;
-	height: 1px;
-	left: -1px;
-}
-
-#subject .guideline[data-axis='X']:hover {
-	cursor: w-resize;
-}
-
-#subject .guideline[data-axis='Y']:hover {
-	cursor: s-resize;
-}
-
-
-#subject .relative {
-	position: relative;
-	font-size: 12px;
-}
-
-#subject .tooltip, #subject .tooltip2 {
-	width: 40px;
-	height: 20px;
-	line-height: 20px;
-	font-size: 12px;
-	text-align: center;
-
-	position: absolute;
-	opacity: 0.5;
-	transition: opacity 0.25s;
-}
-
-#subject .tooltip {
-	background: #EEE;
-	border-radius: 2px;
-	border: 1px solid #CCC;
-}
-
-#subject .tooltip2{
-	color: #555;
-}
-
-#subject [data-active] &gt; * {
-	opacity: 1;
-}
-
-#subject .tooltip[data-info='top'] {
-	top: -10px;
-	right: -50px;
-}
-
-#subject .tooltip[data-info='right'] {
-	bottom: -30px;
-	right: -20px;
-}
-
-#subject .tooltip[data-info='bottom'] {
-	top: -10px;
-	left: -50px;
-}
-
-#subject .tooltip[data-info='left'] {
-	top: -30px;
-	right: -20px;
-}
-
-#subject .tooltip2[data-info='top'] {
-	top: -10px;
-	left: -50px;
-}
-
-#subject .tooltip2[data-info='right'] {
-	top: -30px;
-	right: -20px;
-}
-
-#subject .tooltip2[data-info='bottom'] {
-	top: -10px;
-	right: -50px;
-}
-
-#subject .tooltip2[data-info='left'] {
-	bottom: -30px;
-	right: -20px;
-}
-
-/* Preview */
-
-#preview {
-	width: 30%;
-	height: 50%;
-	background-color: #FFF;
-	text-align: center;
-	overflow: hidden;
-	position: absolute;
-	z-index: 10;
-
-	left: 60%;
-	top: 15%;
-
-	border-radius: 2px;
-	border-image-width: 20px;
-	border-image-repeat: round;
-	box-shadow: 0 0 3px 0 #BABABA;
-}
-
-#preview .resize-handle {
-	width: 10px;
-	height: 10px;
-	background: url("https://mdn.mozillademos.org/files/6027/resize.png") center center no-repeat;
-	position: absolute;
-	bottom: 0;
-	right: 0;
-}
-
-#preview .resize-handle:hover {
-	cursor: nw-resize;
-}
-
-
-/*
- * General controls MENU
- */
-
-#general-controls {
-	padding: 10px 30px;
-	background-color: #FFF;
-	opacity: 0.95;
-	color: #888;
-	/*border-radius: 2px;*/
-	box-shadow: 0 0 3px 0 #BABABA;
-}
-
-#general-controls .property {
-	width: 130px;
-	float: left;
-}
-
-#general-controls .name {
-	height: 20px;
-	margin: 0 10px 0 0;
-	line-height: 100%;
-	text-align: right;
-	float: left;
-}
-
-#general-controls .right {
-	width: 200px;
-	float: right;
-}
-
-#general-controls .ui-checkbox label {
-	height: 10px;
-}
-
-#general-controls .separator {
-	height: 40px;
-	width: 1px;
-	margin: -10px 15px;
-	background-color: #EEE;
-	float: left;
-}
-
-/*
- * Controls
- */
-
-#controls {
-	color: #444;
-	margin: 10px 0 0 0;
-}
-
-#controls .category {
-	height: 190px;
-	min-width: 260px;
-	margin: 10px;
-	padding: 10px;
-	border: 1px solid #CCC;
-	border-radius: 3px;
-	float: left;
-
-	box-shadow: 0 0 3px 0 #BABABA;
-	transition: all 0.25s;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-}
-
-@media (min-width: 880px) {
-	#controls .category {
-		width: 30%;
-		margin-left: 1.66%;
-		margin-right: 1.66%;
-	}
-}
-
-@media (max-width: 879px) {
-	#controls .category {
-		width: 37%;
-		margin-left: 6.5%;
-		margin-right: 6.5%;
-	}
-}
-
-#controls .category .title {
-	width: 100%;
-	height: 30px;
-	margin: 0 0 10px 0;
-	line-height: 25px;
-
-	text-align: center;
-	color: #AAA;
-}
-
-#controls .category:hover .title {
-	color: #777;
-}
-
-#controls .category &gt; .group {
-	border: 1px solid #CCC;
-	border-radius: 2px;
-}
-
-
-/* property */
-
-#controls .property {
-	width: 250px;
-	height: 20px;
-	margin: 5px auto;
-}
-
-#controls .property .ui-input-slider {
-	margin: 0;
-	float: left;
-}
-
-#controls .property .ui-input-slider-info {
-	width: 60px;
-}
-
-#controls .property .ui-input-slider-left {
-	transition: opacity 0.15s;
-    opacity: 0;
-}
-
-#controls .property .ui-input-slider-right {
-	transition: opacity 0.15s;
-    opacity: 0;
-}
-
-#controls .property .name {
-	width: 60px;
-	height: 20px;
-	padding: 0px 10px 0px 0px;
-	text-align: right;
-	line-height: 100%;
-	float: left;
-}
-
-#controls .property .config {
-	width: 20px;
-	height: 20px;
-	float: left;
-	background: url("https://mdn.mozillademos.org/files/6021/config.png") center center no-repeat;
-	opacity: 0.5;
-}
-
-#controls .property .config:hover {
-	cursor: pointer;
-	opacity: 1;
-}
-
-#controls .ui-input-slider:hover .ui-input-slider-right {
-    opacity: 1;
-}
-
-#controls .ui-input-slider:hover .ui-input-slider-left {
-    opacity: 1;
-}
-
-#controls .property .ui-dropdown {
-	margin: 0 10px;
-	float: left;
-}
-
-
-#controls .property .ui-checkbox {
-	margin: 0 0 0 16px;
-	float: left;
-}
-
-#controls .property .ui-checkbox label {
-	height: 0.85em;
-	width: 10px;
-}
-
-/* dropdowns */
-#controls .ui-dropdown {
-	width: 50px;
-	height: 1.7em;
-	border-radius: 2px;
-}
-
-#controls .ui-dropdown-select {
-	line-height: 1.6em;
-}
-
-#controls .ui-dropdown-list {
-	top: 20px;
-}
-
-#controls .ui-dropdown-list {
-	border-width: 1px;
-	text-align: center;
-}
-
-#controls .ui-dropdown-list:hover {
-	overflow: hidden;
-}
-
-#controls .border-repeat {
-	margin: 0 0 0 16px !important;
-	width: 80px;
-}
-
-#controls .border-repeat .ui-dropdown-list {
-	height: 6.2em;
-	border-width: 1px;
-	text-align: center;
-}
-
-/* border-image-slice */
-
-
-#border-slice-control .ui-dropdown-list {
-	height: 4.3em;
-}
-
-/* border-image-width */
-
-#border-width-control .ui-dropdown-list {
-	height: 6.2em;
-}
-
-/* border-image-outset */
-
-#border-outset-control .ui-dropdown-list {
-	height: 4.3em;
-}
-
-#aditional-properties .property {
-	width: 200px;
-}
-
-#aditional-properties .ui-input-slider &gt; input {
-	width: 80px !important;
-}
-
-/* unit settings panel */
-
-#unit-settings {
-	padding: 10px;
-	position: absolute;
-
-	background: #FFF;
-
-	font-size: 12px;
-	border-radius: 3px;
-	border: 1px solid #CCC;
-	text-align: center;
-	color: #555;
-
-	position: absolute;
-	z-index: 1000;
-
-	box-shadow: 0 0 3px 0 #BABABA;
-	transition: all 0.25s;
-}
-
-#unit-settings .title {
-	width: 100%;
-	margin: -5px auto 0;
-
-	color: #666;
-	font-size: 14px;
-	font-weight: bold;
-	line-height: 25px;
-	border-bottom: 1px solid #E5E5E5;
-}
-
-#unit-settings .ui-input-slider {
-	margin: 10px 0 0 0;
-}
-
-#unit-settings .ui-input-slider-info {
-	width: 50px;
-	line-height: 1.5em;
-}
-
-#unit-settings input {
-	font-size: 12px;
-	width: 40px !important;
-}
-
-#unit-settings .close {
-	width: 16px;
-	height: 16px;
-	background: url('https://mdn.mozillademos.org/files/6019/close.png') no-repeat center center;
-	background-size: 75%;
-
-	position: absolute;
-	top: 4px;
-	right: 4px;
-	opacity: 0.5;
-}
-
-#unit-settings .close:hover {
-	cursor: pointer;
-	opacity: 1;
-}
-
-#unit-settings[data-active='true'] {
-	opacity: 1;
-}
-
-#unit-settings[data-active='false'] {
-	opacity: 0;
-	top: -100px !important;
-}
-
-/*
- * CSS Output Code
- */
-
-#output {
-	padding: 10px;
-	border: 2px dashed #888 !important;
-	box-shadow: none !important;
-	border-radius: 3px;
-	overflow: hidden;
-
-	-moz-user-select: text;
-	-webkit-user-select: text;
-	-ms-user-select: text;
-	user-select: text;
-}
-
-
-@media (min-width: 880px) {
-	#output {
-		width: 63.33% !important;
-	}
-}
-
-@media (max-width: 879px) {
-	#output {
-		width: 87% !important;
-	}
-}
-
-
-#output .title {
-	width: 100%;
-	height: 30px;
-	margin: 0 0 10px 0;
-	line-height: 25px;
-
-	text-align: center;
-	color: #AAA;
-}
-
-#output .css-property {
-	width: 100%;
-	margin: 0;
-	color: #555;
-	font-size: 14px;
-	line-height: 18px;
-	float: left;
-}
-
-#output .css-property .name {
-	width: 30%;
-	font-weight: bold;
-	text-align: right;
-	float: left;
-}
-
-#output .css-property .value {
-	width: 65%;
-	padding: 0 2.5%;
-	word-break: break-all;
-	float: left;
-}
-
-</pre>
-
-<h3 id="JavaScript_Content">JavaScript Content</h3>
-
-<pre class="brush: js">'use strict';
-
-/**
- * UI-SlidersManager
- */
-
-var InputSliderManager = (function InputSliderManager() {
-
-	var subscribers = {};
-	var sliders = [];
-
-	var InputComponent = function InputComponent(obj) {
-		var input = document.createElement('input');
-		input.setAttribute('type', 'text');
-		input.style.width = 50 + obj.precision * 10 + 'px';
-
-		input.addEventListener('click', function(e) {
-			this.select();
-		});
-
-		input.addEventListener('change', function(e) {
-			var value = parseFloat(e.target.value);
-
-			if (isNaN(value) === true)
-				setValue(obj.topic, obj.value);
-			else
-				setValue(obj.topic, value);
-		});
-
-		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) {
-			document.removeEventListener("mousemove", sliderMotion);
-			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("mouseup", slideEnd);
-			document.addEventListener("mousemove", sliderMotion);
-		});
-
-		var slideEnd = function slideEnd(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		= parseFloat(node.getAttribute('data-min'));
-		var max		= parseFloat(node.getAttribute('data-max'));
-		var step	= parseFloat(node.getAttribute('data-step'));
-		var value	= parseFloat(node.getAttribute('data-value'));
-		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;
-		var precision = node.getAttribute('data-precision') | 0;
-
-		this.min = isNaN(min) ? 0 : min;
-		this.max = isNaN(max) ? 100 : max;
-		this.precision = precision &gt;= 0 ? precision : 0;
-		this.step = step &lt; 0 || isNaN(step) ? 1 : step.toFixed(precision);
-		this.topic = topic;
-		this.node = node;
-		this.unit = unit === null ? '' : unit;
-		this.sensivity = sensivity &gt; 0 ? sensivity : 5;
-		value = isNaN(value) ? this.min : value;
-
-		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);
-
-		this.input = input;
-		sliders[topic] = this;
-		setValue(topic, value);
-	};
-
-	InputSlider.prototype.setInputValue = function setInputValue() {
-		this.input.value = this.value.toFixed(this.precision) + this.unit;
-	};
-
-	var setValue = function setValue(topic, value, send_notify) {
-		var slider = sliders[topic];
-		if (slider === undefined)
-			return;
-
-		value = parseFloat(value.toFixed(slider.precision));
-
-		if (value &gt; slider.max) value = slider.max;
-		if (value &lt; slider.min)	value = slider.min;
-
-		slider.value = value;
-		slider.node.setAttribute('data-value', value);
-
-		slider.setInputValue();
-
-		if (send_notify === false)
-			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 setStep = function setStep(topic, value) {
-		var slider = sliders[topic];
-		if (slider === undefined)
-			return;
-
-		slider.step = parseFloat(value);
-		setValue(topic, slider.value);
-	};
-
-	var setPrecision = function setPrecision(topic, value) {
-		var slider = sliders[topic];
-		if (slider === undefined)
-			return;
-
-		value = value | 0;
-		slider.precision = value;
-
-		var step = parseFloat(slider.step.toFixed(value));
-		if (step === 0)
-			slider.step = 1 / Math.pow(10, value);
-
-		setValue(topic, slider.value);
-	};
-
-	var setSensivity = function setSensivity(topic, value) {
-		var slider = sliders[topic];
-		if (slider === undefined)
-			return;
-
-		value = value | 0;
-
-		slider.sensivity = value &gt; 0 ? value : 5;
-	};
-
-	var getNode =  function getNode(topic) {
-		return sliders[topic].node;
-	};
-
-	var getPrecision =  function getPrecision(topic) {
-		return sliders[topic].precision;
-	};
-
-	var getStep =  function getStep(topic) {
-		return sliders[topic].step;
-	};
-
-	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() {
-		if (subscribers[this.topic] === undefined)
-			return;
-		for (var i = 0; i &lt; subscribers[this.topic].length; i++)
-			subscribers[this.topic][i](this.value);
-	};
-
-	var createSlider = function createSlider(topic, label) {
-		var slider = document.createElement('div');
-		slider.className = 'ui-input-slider';
-		slider.setAttribute('data-topic', topic);
-
-		if (label !== undefined)
-			slider.setAttribute('data-info', label);
-
-		new InputSlider(slider);
-		return slider;
-	};
-
-	var init = function init() {
-		var elem = document.querySelectorAll('.ui-input-slider');
-		var size = elem.length;
-		for (var i = 0; i &lt; size; i++)
-			new InputSlider(elem[i]);
-	};
-
-	return {
-		init : init,
-		setMax : setMax,
-		setMin : setMin,
-		setUnit : setUnit,
-		setStep : setStep,
-		getNode : getNode,
-		getStep : getStep,
-		setValue : setValue,
-		subscribe : subscribe,
-		unsubscribe : unsubscribe,
-		setPrecision : setPrecision,
-		setSensivity : setSensivity,
-		getPrecision : getPrecision,
-		createSlider : createSlider,
-	};
-
-})();
-
-
-/**
- * UI-DropDown Select
- */
-
-var DropDownManager = (function DropdownManager() {
-
-	var subscribers = {};
-	var dropdowns = [];
-	var active = null;
-
-	var visbility = ["hidden", "visible"];
-
-
-	var DropDown = function DropDown(node) {
-		var topic = node.getAttribute('data-topic');
-		var label = node.getAttribute('data-label');
-		var selected = node.getAttribute('data-selected') | 0;
-
-		var select = document.createElement('div');
-		var list = document.createElement('div');
-		var uval = 0;
-		var option = null;
-		var option_value = null;
-
-		list.className = 'ui-dropdown-list';
-		select.className = 'ui-dropdown-select';
-
-		while (node.firstElementChild !== null) {
-			option = node.firstElementChild;
-			option_value = option.getAttribute('data-value');
-
-			if (option_value === null)
-				option.setAttribute('data-value', uval);
-
-			list.appendChild(node.firstElementChild);
-			uval++;
-		}
-
-		node.appendChild(select);
-		node.appendChild(list);
-
-		select.onclick = this.toggle.bind(this);
-		list.onclick = this.updateValue.bind(this);
-		document.addEventListener('click', clickOut);
-
-		this.state = 0;
-		this.time = 0;
-		this.dropmenu = list;
-		this.select = select;
-		this.toggle(false);
-		this.value = {};
-		this.topic = topic;
-
-		if (label)
-			select.textContent = label;
-		else
-			this.setNodeValue(list.children[selected]);
-
-		dropdowns[topic] = this;
-
-	};
-
-	DropDown.prototype.toggle = function toggle(state) {
-		if (typeof(state) === 'boolean')
-			this.state = state === false ? 0 : 1;
-		else
-			this.state = 1 ^ this.state;
-
-		if (active !== this) {
-			if (active)
-				active.toggle(false);
-			active = this;
-		}
-
-		if (this.state === 0)
-			this.dropmenu.setAttribute('data-hidden', 'true');
-		else
-			this.dropmenu.removeAttribute('data-hidden');
-
-	};
-
-	var clickOut = function clickOut(e) {
-		if (active.state === 0 ||
-			e.target === active.dropmenu ||
-			e.target === active.select)
-			return;
-
-		active.toggle(false);
-	};
-
-	DropDown.prototype.updateValue = function updateValue(e) {
-
-		if (Date.now() - this.time &lt; 500)
-			return;
-
-		if (e.target.className !== "ui-dropdown-list") {
-			this.setNodeValue(e.target);
-			this.toggle(false);
-		}
-
-		this.time = Date.now();
-	};
-
-	DropDown.prototype.setNodeValue = function setNodeValue(node) {
-		this.value['name'] = node.textContent;
-		this.value['value'] = node.getAttribute('data-value');
-
-		this.select.textContent = node.textContent;
-		this.select.setAttribute('data-value', this.value['value']);
-
-		notify.call(this);
-	};
-
-	var createDropDown = function createDropDown(topic, options) {
-
-		var dropdown = document.createElement('div');
-		dropdown.setAttribute('data-topic', topic);
-		dropdown.className = 'ui-dropdown';
-
-		for (var i in options) {
-			var x = document.createElement('div');
-			x.setAttribute('data-value', i);
-			x.textContent = options[i];
-			dropdown.appendChild(x);
-		}
-
-		new DropDown(dropdown);
-
-		return dropdown;
-	};
-
-	var setValue = function setValue(topic, index) {
-		if (dropdowns[topic] === undefined ||
-			index &gt;= dropdowns[topic].dropmenu.children.length)
-			return;
-
-		dropdowns[topic].setNodeValue(dropdowns[topic].dropmenu.children[index]);
-	};
-
-	var subscribe = function subscribe(topic, callback) {
-		if (subscribers[topic] === undefined)
-			subscribers[topic] = [];
-		subscribers[topic].push(callback);
-	};
-
-	var unsubscribe = function unsubscribe(topic, callback) {
-		var index = subscribers[topic].indexOf(callback);
-		subscribers[topic].splice(index, 1);
-	};
-
-	var notify = function notify() {
-		if (subscribers[this.topic] === undefined)
-			return;
-
-		for (var i in subscribers[this.topic]) {
-			subscribers[this.topic][i](this.value);
-		}
-	};
-
-	var init = function init() {
-		var elem, size;
-
-		elem = document.querySelectorAll('.ui-dropdown');
-		size = elem.length;
-		for (var i = 0; i &lt; size; i++)
-			new DropDown(elem[i]);
-
-	};
-
-	return {
-		init : init,
-		setValue : setValue,
-		subscribe : subscribe,
-		unsubscribe : unsubscribe,
-		createDropDown : createDropDown
-	};
-
-})();
-
-
-/**
- * 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) {
-		var obj = buttons[topic];
-		if (obj === undefined)
-			return;
-
-		obj.checkbox.checked = value;
-		notify.call(obj);
-	};
-
-	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() {
-		if (subscribers[this.topic] === undefined)
-			return;
-		for (var i = 0; i &lt; 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 &lt; size; i++)
-			new CheckBox(elem[i]);
-	};
-
-	return {
-		init : init,
-		setValue : setValue,
-		subscribe : subscribe,
-		unsubscribe : unsubscribe
-	};
-
-})();
-
-window.addEventListener("load", function() {
-	BorderImage.init();
-});
-
-var BorderImage = (function BorderImage() {
-
-	var getElemById = document.getElementById.bind(document);
-
-	var subject;
-	var preview;
-	var guidelines = [];
-	var positions = ['top', 'right', 'bottom', 'left'];
-
-	var makeDraggable = function makeDraggable(elem) {
-
-		var offsetTop;
-		var offsetLeft;
-
-		elem.setAttribute('data-draggable', 'true');
-
-		var dragStart = function dragStart(e) {
-			if (e.target.getAttribute('data-draggable') !== 'true' ||
-				e.target !== elem || e.button !== 0)
-				return;
-
-			offsetLeft = e.clientX - elem.offsetLeft;
-			offsetTop = e.clientY - elem.offsetTop;
-
-			document.addEventListener('mousemove', mouseDrag);
-			document.addEventListener('mouseup', dragEnd);
-		};
-
-		var dragEnd = function dragEnd(e) {
-			if (e.button !== 0)
-				return;
-
-			document.removeEventListener('mousemove', mouseDrag);
-			document.removeEventListener('mouseup', dragEnd);
-		};
-
-		var mouseDrag = function mouseDrag(e) {
-
-			elem.style.left = e.clientX - offsetLeft + 'px';
-			elem.style.top = e.clientY - offsetTop + 'px';
-		};
-
-		elem.addEventListener('mousedown', dragStart, false);
-	};
-
-	var PreviewControl = function PreviewControl() {
-
-		var dragging = false;
-		var valueX = null;
-		var valueY = null;
-
-		var dragStart = function dragStart(e) {
-			if (e.button !== 0)
-				return;
-
-			valueX = e.clientX - preview.clientWidth;
-			valueY = e.clientY - preview.clientHeight;
-			dragging = true;
-
-			document.addEventListener('mousemove', mouseDrag);
-		};
-
-		var dragEnd = function dragEnd(e) {
-			if (e.button !== 0 || dragging === false)
-				return;
-
-			document.removeEventListener('mousemove', mouseDrag);
-			dragging = false;
-		};
-
-		var mouseDrag = function mouseDrag(e) {
-			InputSliderManager.setValue('preview-width', e.clientX - valueX);
-			InputSliderManager.setValue('preview-height', e.clientY - valueY);
-		};
-
-		var init = function init() {
-
-			makeDraggable(preview);
-			makeDraggable(subject);
-
-			var handle = document.createElement('div');
-			handle.className = 'resize-handle';
-
-			handle.addEventListener('mousedown', dragStart);
-			document.addEventListener('mouseup', dragEnd);
-
-			preview.appendChild(handle);
-
-		};
-
-		return {
-			init: init
-		};
-
-	}();
-
-	var ImageReader = (function ImageReader() {
-
-		var fReader = new FileReader();
-		var browse = document.createElement('input');
-
-		var loadImage = function loadImage(e) {
-			if (browse.files.length === 0)
-				return;
-
-			var file = browse.files[0];
-
-			if (file.type.slice(0, 5) !== 'image')
-				return;
-
-			fReader.readAsDataURL(file);
-
-			return false;
-		};
-
-		fReader.onload = function(e) {
-			ImageControl.loadRemoteImage(e.target.result);
-		};
-
-		var load = function load() {
-			browse.click();
-		};
-
-		browse.setAttribute('type', 'file');
-		browse.style.display = 'none';
-		browse.onchange = loadImage;
-
-		return {
-			load: load
-		};
-
-	})();
-
-	var ImageControl = (function ImageControl() {
-
-		var scale = 0.5;
-		var imgSource = new Image();
-		var imgState = null;
-		var selected = null;
-
-
-		var topics = ['slice', 'width', 'outset'];
-		var properties = {};
-		properties['border1'] = {
-			fill			: false,
-
-			slice_values	: [27, 27, 27, 27],
-			width_values	: [20, 20, 20, 20],
-			outset_values	: [0, 0, 0, 0],
-
-			slice_units		: [0, 0, 0, 0],
-			width_units		: [0, 0, 0, 0],
-			outset_units	: [0, 0, 0, 0],
-
-			repeat			: [1, 1],
-			size			: [300, 200],
-			preview_area	: 400
-		};
-
-		properties['border2'] = {
-			fill			: false,
-
-			slice_values	: [33, 33, 33, 33],
-			width_values	: [1.5, 1.5, 1.5, 1.5],
-			outset_values	: [0, 0, 0, 0],
-
-			slice_units		: [1, 1, 1, 1],
-			width_units		: [2, 2, 2, 2],
-			outset_units	: [0, 0, 0, 0],
-
-			repeat			: [2, 2],
-			size			: [300, 200],
-			preview_area	: 400
-		};
-
-		properties['border3'] = {
-			fill			: true,
-
-			slice_values	: [15, 15, 15, 15],
-			width_values	: [10, 10, 10, 10],
-			outset_values	: [0, 0, 0, 0],
-
-			slice_units		: [0, 0, 0, 0],
-			width_units		: [0, 0, 0, 0],
-			outset_units	: [0, 0, 0, 0],
-
-			repeat			: [2, 2],
-			size			: [300, 200],
-			preview_area	: 400
-		};
-
-		properties['border4'] = {
-			fill			: false,
-
-			slice_values	: [13, 13, 13, 13],
-			width_values	: [13, 13, 13, 13],
-			outset_values	: [13, 13, 13, 13],
-
-			slice_units		: [0, 0, 0, 0],
-			width_units		: [0, 0, 0, 0],
-			outset_units	: [0, 0, 0, 0],
-
-			repeat			: [0, 0],
-			size			: [300, 200],
-			preview_area	: 400
-		};
-
-		properties['border5'] = {
-			fill			: false,
-
-			slice_values	: [0, 12, 0, 12],
-			width_values	: [0, 12, 0, 12],
-			outset_values	: [0, 0, 0, 0],
-
-			slice_units		: [0, 0, 0, 0],
-			width_units		: [0, 0, 0, 0],
-			outset_units	: [0, 0, 0, 0],
-
-			repeat			: [0, 0],
-			size			: [300, 200],
-			preview_area	: 400,
-		};
-
-		properties['border6'] = {
-			fill			: false,
-
-			slice_values	: [42, 42, 42, 42],
-			width_values	: [42, 42, 42, 42],
-			outset_values	: [0, 0, 0, 0],
-
-			slice_units		: [0, 0, 0, 0],
-			width_units		: [0, 0, 0, 0],
-			outset_units	: [0, 0, 0, 0],
-
-			repeat			: [2, 2],
-			size			: [350, 350],
-			preview_area	: 500,
-		};
-
-
-		var loadLocalImage = function loadLocalImage(source) {
-			var location = "images/" + source;
-			imgSource.src = location;
-		};
-
-		var loadRemoteImage = function loadRemoteImage(source) {
-			imgSource.src = source;
-			if (selected)
-				selected.removeAttribute('selected');
-			Tool.setOutputCSS('source', 'url("' + source + '")');
-		};
-
-		var pickImage = function pickImage(e) {
-			if (e.target.className === 'image') {
-				selected = e.target;
-				selected.setAttribute('selected', 'true');
-				loadRemoteImage(e.target.src);
-				imgState = e.target.getAttribute('data-stateID');
-			}
-		};
-
-		var loadImageState = function loadImageState(stateID) {
-			if (properties[stateID] === undefined)
-				return;
-
-			var prop = properties[stateID];
-			var topic;
-			var unit_array;
-			var value_array;
-
-			for (var i in topics) {
-				for (var j=0; j&lt;4; j++) {
-					topic = topics[i] + '-' + positions[j];
-					unit_array = topics[i] + '_units';
-					value_array = topics[i] + '_values';
-					InputSliderManager.setValue(topic, prop[value_array][j]);
-					DropDownManager.setValue(topic, prop[unit_array][j]);
-				}
-			}
-
-			ButtonManager.setValue('slice-fill', prop['fill']);
-			DropDownManager.setValue('image-repeat-X', prop['repeat'][0]);
-			DropDownManager.setValue('image-repeat-Y', prop['repeat'][1]);
-			InputSliderManager.setValue('preview-width', prop['size'][0]);
-			InputSliderManager.setValue('preview-height', prop['size'][1]);
-			InputSliderManager.setValue('preview-area-height', prop['preview_area']);
-		};
-
-		var update = function update() {
-			scale =  Math.min(300, (30000 / this.width) | 0);
-			setScale(scale);
-			InputSliderManager.setValue('scale', scale, false);
-
-			subject.style.backgroundImage = 'url("' + this.src + '")';
-			preview.style.borderImageSource = 'url("' + this.src + '")';
-
-			guidelines['slice-top'].setMax(this.height);
-			guidelines['slice-right'].setMax(this.width);
-			guidelines['slice-bottom'].setMax(this.height);
-			guidelines['slice-left'].setMax(this.width);
-
-			if (imgState)
-				loadImageState(imgState);
-		};
-
-		var setScale = function setScale(value) {
-			scale = value;
-			var w = imgSource.width * scale / 100 | 0;
-			var h = imgSource.height * scale / 100 | 0;
-			subject.style.width = w + 'px';
-			subject.style.height = h + 'px';
-
-			for (var i = 0; i &lt; positions.length; i++)
-				guidelines['slice-' + positions[i]].updateGuidelinePos();
-		};
-
-		var getScale = function getScale() {
-			return scale/100;
-		};
-
-		var toggleGallery = function toggleGallery() {
-			var gallery = getElemById('image-gallery');
-			var button  = getElemById('toggle-gallery');
-			var state = 1;
-			button.addEventListener('click', function() {
-				state = 1 ^ state;
-				if (state === 0) {
-					gallery.setAttribute('data-collapsed', 'true');
-					button.setAttribute('data-action', 'show');
-				}
-				else {
-					gallery.removeAttribute('data-collapsed');
-					button.setAttribute('data-action', 'hide');
-				}
-			});
-		};
-
-		var init = function init() {
-			var gallery = getElemById('image-gallery');
-			var browse = getElemById('load-image');
-			var remote = getElemById('remote-url');
-			var load_remote = getElemById('load-remote');
-
-			remote.addEventListener('change', function(){
-				loadRemoteImage(this.value);
-			});
-
-			load_remote.addEventListener('click', function(){
-				loadRemoteImage(remote.value);
-			});
-
-			browse.addEventListener('click', ImageReader.load);
-			gallery.addEventListener('click', pickImage);
-			imgSource.addEventListener('load', update);
-
-			InputSliderManager.subscribe('scale', setScale);
-			InputSliderManager.setValue('scale', scale);
-			imgState = 'border1';
-			loadRemoteImage('https://mdn.mozillademos.org/files/6007/border-image-1.png');
-			toggleGallery();
-		};
-
-		return {
-			init: init,
-			getScale : getScale,
-			loadRemoteImage: loadRemoteImage
-		};
-
-	})();
-
-	var GuideLine = function GuideLine(node) {
-		var topic = node.getAttribute('data-topic');
-		var axis = node.getAttribute('data-axis');
-
-		this.node = node;
-		this.topic = topic;
-		this.axis = axis;
-		this.info = topic.split('-')[1];
-
-		this.position = 0;
-		this.value = 0;
-		this.unit = 0;
-		this.max = 0;
-		this.pos = positions.indexOf(this.info);
-
-		guidelines[topic] = this;
-
-		var relative_container = document.createElement('div');
-		var tooltip = document.createElement('div');
-		var tooltip2 = document.createElement('div');
-
-		tooltip.className = 'tooltip';
-		tooltip.setAttribute('data-info', this.info);
-
-		tooltip2.className = 'tooltip2';
-		tooltip2.textContent = this.info;
-		tooltip2.setAttribute('data-info', this.info);
-
-		this.tooltip = tooltip;
-
-		relative_container.appendChild(tooltip);
-		relative_container.appendChild(tooltip2);
-		node.appendChild(relative_container);
-
-		var startX = 0;
-		var startY = 0;
-		var start = 0;
-
-		var startDrag = function startDrag(e) {
-			startX = e.clientX;
-			startY = e.clientY;
-			start = guidelines[topic].position;
-			document.body.setAttribute('data-move', axis);
-			relative_container.setAttribute('data-active', '');
-			node.setAttribute('data-active', '');
-
-			document.addEventListener('mousemove', updateGuideline);
-			document.addEventListener('mouseup', endDrag);
-		};
-
-		var endDrag = function endDrag() {
-			document.body.removeAttribute('data-move');
-			relative_container.removeAttribute('data-active');
-			node.removeAttribute('data-active');
-
-			document.removeEventListener('mousemove', updateGuideline);
-		};
-
-		var updateGuideline = function updateGuideline(e) {
-			var value;
-			if (topic === 'slice-top')
-				value = e.clientY - startY + start;
-
-			if (topic === 'slice-right')
-				value = startX - e.clientX + start;
-
-			if (topic === 'slice-bottom')
-				value = startY - e.clientY + start;
-
-			if (topic === 'slice-left')
-				value = e.clientX - startX + start;
-
-			if (this.unit === 0)
-				InputSliderManager.setValue(topic, value * 1 / ImageControl.getScale() | 0);
-			else {
-				InputSliderManager.setValue(topic, (value * 100 / (this.max * ImageControl.getScale())) | 0);
-			}
-
-		}.bind(this);
-
-		node.addEventListener("mousedown", startDrag);
-
-		InputSliderManager.subscribe(topic, this.setPosition.bind(this));
-		InputSliderManager.setValue(topic, this.position);
-	};
-
-
-	GuideLine.prototype.updateGuidelinePos = function updateGuidelinePos() {
-		if (this.unit === 0)
-			this.position = this.value * ImageControl.getScale() | 0;
-		else
-			this.position = this.value * this.max * ImageControl.getScale() / 100 | 0;
-
-		this.node.style[this.info] = this.position + 'px';
-	};
-
-	GuideLine.prototype.setPosition = function setPosition(value) {
-		this.value = value;
-		this.tooltip.textContent = value;
-		this.updateGuidelinePos();
-		Tool.setBorderSlice(this.pos, value);
-	};
-
-	GuideLine.prototype.setMax = function setMax(max) {
-		this.max = max;
-		this.updateLimit();
-	};
-
-	GuideLine.prototype.updateLimit = function updateLimit() {
-		if (this.unit === 1)
-			InputSliderManager.setMax(this.topic, 100);
-		else
-			InputSliderManager.setMax(this.topic, this.max);
-	};
-
-	GuideLine.prototype.setUnit = function setUnit(type) {
-		if (type === '%')	this.unit = 1;
-		if (type === '')	this.unit = 0;
-		this.updateLimit();
-	};
-
-	/*
-	 * Unit panel
-	 */
-	var UnitPanel = (function UnitPanel () {
-
-		var panel;
-		var title;
-		var precision;
-		var step;
-		var unit_topic = null; // settings are made for this topic
-		var step_option = [1, 0.1, 0.01];
-
-		var updatePrecision = function updatePrecision(value) {
-			InputSliderManager.setPrecision('unit-step', value);
-			InputSliderManager.setStep('unit-step', step_option[value]);
-			InputSliderManager.setMin('unit-step', step_option[value]);
-
-			if (unit_topic)
-				InputSliderManager.setPrecision(unit_topic, value);
-		};
-
-		var updateUnitSettings = function updateUnitSettings(value) {
-			if (unit_topic)
-				InputSliderManager.setStep(unit_topic, value);
-		};
-
-		var show = function show(e) {
-			var topic = e.target.getAttribute('data-topic');
-			var precision = InputSliderManager.getPrecision(topic);
-			var step = InputSliderManager.getStep(topic);
-
-			unit_topic = topic;
-			title.textContent = topic;
-
-			panel.setAttribute('data-active', 'true');
-			panel.style.top = e.target.offsetTop - 40 + 'px';
-			panel.style.left = e.target.offsetLeft + 30 + 'px';
-
-			InputSliderManager.setValue('unit-precision', precision);
-			InputSliderManager.setValue('unit-step', step);
-		};
-
-		var init = function init() {
-			panel = document.createElement('div');
-			title = document.createElement('div');
-			var close = document.createElement('div');
-
-			step = InputSliderManager.createSlider('unit-step', 'step');
-			precision = InputSliderManager.createSlider('unit-precision', 'precision');
-
-			InputSliderManager.setStep('unit-precision', 1);
-			InputSliderManager.setMax('unit-precision', 2);
-			InputSliderManager.setValue('unit-precision', 2);
-			InputSliderManager.setSensivity('unit-precision', 20);
-
-			InputSliderManager.setValue('unit-step', 1);
-			InputSliderManager.setStep('unit-step', 0.01);
-			InputSliderManager.setPrecision('unit-step', 2);
-
-			InputSliderManager.subscribe('unit-precision', updatePrecision);
-			InputSliderManager.subscribe('unit-step', updateUnitSettings);
-
-			close.addEventListener('click', function () {
-				panel.setAttribute('data-active', 'false');
-			});
-
-			title.textContent = 'Properties';
-			title.className = 'title';
-			close.className = 'close';
-			panel.id = 'unit-settings';
-			panel.setAttribute('data-active', 'false');
-			panel.appendChild(title);
-			panel.appendChild(precision);
-			panel.appendChild(step);
-			panel.appendChild(close);
-			document.body.appendChild(panel);
-		};
-
-		return {
-			init : init,
-			show : show
-		};
-
-	})();
-
-	/**
-	 * Tool Manager
-	 */
-	var Tool = (function Tool() {
-		var preview_area;
-		var dropdown_unit_options = [
-			{ '' : '--', '%' : '%'},
-			{ 'px' : 'px', '%' : '%', 'em' : 'em'},
-			{ 'px' : 'px', 'em' : 'em'},
-		];
-
-		var border_slice = [];
-		var border_width = [];
-		var border_outset = [];
-
-		var border_slice_values = [];
-		var border_width_values = [];
-		var border_outset_values = [];
-
-		var border_slice_units = ['', '', '', ''];
-		var border_width_units = ['px', 'px', 'px', 'px'];
-		var border_outset_units = ['px', 'px', 'px', 'px'];
-
-		var border_fill = false;
-		var border_repeat = ['round', 'round'];
-		var CSS_code = {
-			'source' : null,
-			'slice' : null,
-			'width' : null,
-			'outset' : null,
-			'repeat' : null
-		};
-
-		var setBorderSlice = function setBorderSlice(positionID, value) {
-			border_slice[positionID] = value + border_slice_units[positionID];
-			updateBorderSlice();
-		};
-
-		var updateBorderSlice = function updateBorderSlice() {
-			var value = border_slice.join(' ');
-			if (border_fill === true)
-				value += ' fill';
-
-			preview.style.borderImageSlice = value;
-			setOutputCSS('slice', value);
-		};
-
-		var setBorderFill = function setBorderFill(value) {
-			border_fill = value;
-			var bimgslice = border_slice.join(' ');;
-			if (value === true)
-				bimgslice += ' fill';
-
-			preview.style.borderImageSlice = bimgslice;
-		};
-
-		var updateBorderWidth = function updateBorderWidth() {
-			var value = border_width.join(' ');
-			preview.style.borderImageWidth = value;
-			setOutputCSS('width', value);
-		};
-
-		var updateBorderOutset = function updateBorderOutset() {
-			var value = border_outset.join(' ');
-			preview.style.borderImageOutset = border_outset.join(' ');
-			setOutputCSS('outset', value);
-		};
-
-		var setBorderRepeat = function setBorderRepeat(obj) {
-			border_repeat[obj.value] = obj.name;
-			var value = border_repeat.join(' ');
-			preview.style.borderImageRepeat = value;
-			setOutputCSS('repeat', value);
-		};
-
-		var setOutputCSS = function setOutputCSS(topic, value) {
-			CSS_code[topic].textContent = value + ';';
-		};
-
-		var setPreviewFontSize = function setPreviewFontSize(value) {
-			preview.style.fontSize = value + 'px';
-		};
-
-		var setPreviewWidth = function setPreviewWidth(value) {
-			preview.style.width = value + 'px';
-		};
-
-		var setPreviewHeight = function setPreviewHeight(value) {
-			preview.style.height = value + 'px';
-		};
-
-		var setPreviewAreaHeight = function setPreviewAreaHeight(value) {
-			preview_area.style.height = value + 'px';
-		};
-
-		var updateDragOption = function updateDragOption(value) {
-			if (value === true)
-				subject.setAttribute('data-draggable', 'true');
-			else
-				subject.removeAttribute('data-draggable');
-		};
-
-		var createProperty = function createProperty(topic, labelID, optionsID) {
-
-			var slider = InputSliderManager.createSlider(topic, positions[labelID]);
-			var dropdown = DropDownManager.createDropDown(topic, dropdown_unit_options[optionsID]);
-
-			InputSliderManager.setSensivity(topic, 3);
-			InputSliderManager.setPrecision(topic, 1);
-
-			var property = document.createElement('div');
-			var config = document.createElement('div');
-
-			property.className = 'property';
-			config.className = 'config';
-			config.setAttribute('data-topic', topic);
-			config.addEventListener('click', UnitPanel.show);
-
-			property.appendChild(slider);
-			property.appendChild(dropdown);
-			property.appendChild(config);
-
-			return property;
-		};
-
-		var initBorderSliceControls = function initBorderSliceControls() {
-			var container = getElemById('border-slice-control');
-
-			var listenForChanges = function listenForChanges(topic, id) {
-				InputSliderManager.subscribe(topic, function(value) {
-					border_slice_values[id] = value;
-					border_slice[id] = value + border_slice_units[id];
-					updateBorderSlice();
-				});
-
-				DropDownManager.subscribe(topic, function(obj) {
-					guidelines[topic].setUnit(obj.value);
-					border_slice_units[id] = obj.value;
-					border_slice[id] = border_slice_values[id] + obj.value;
-					updateBorderSlice();
-				});
-			};
-
-			for (var i = 0; i &lt; positions.length; i++) {
-				var topic = 'slice-' + positions[i];
-				var property = createProperty(topic, i, 0);
-				listenForChanges(topic, i);
-
-				container.appendChild(property);
-			}
-
-			container.appendChild(container.children[1]);
-
-		};
-
-		var initBorderWidthControls = function initBorderWidthControls() {
-			var container = getElemById('border-width-control');
-
-			var listenForChanges = function listenForChanges(topic, id) {
-				InputSliderManager.subscribe(topic, function(value) {
-					border_width_values[id] = value;
-					border_width[id] = value + border_width_units[id];
-					updateBorderWidth();
-				});
-
-				DropDownManager.subscribe(topic, function(obj) {
-					if (obj.value === '%')
-						InputSliderManager.setMax(topic, 100);
-					else
-						InputSliderManager.setMax(topic, 1000);
-
-					border_width_units[id] = obj.value;
-					border_width[id] = border_width_values[id] + obj.value;
-					updateBorderWidth();
-				});
-			};
-
-			for (var i = 0; i &lt; positions.length; i++) {
-				var topic = 'width-' + positions[i];
-				var property = createProperty(topic, i, 1);
-				InputSliderManager.setMax(topic, 1000);
-				listenForChanges(topic, i);
-
-				container.appendChild(property);
-			}
-		};
-
-		var initBorderOutsetControls = function initBorderOutsetControls() {
-
-			var container = getElemById('border-outset-control');
-
-			var listenForChanges = function listenForChanges(topic, id) {
-				InputSliderManager.subscribe(topic, function(value) {
-					border_outset_values[id] = value;
-					border_outset[id] = value + border_outset_units[id];
-					updateBorderOutset();
-				});
-
-				DropDownManager.subscribe(topic, function(obj) {
-					border_outset_units[id] = obj.value;
-					border_outset[id] = border_outset_values[id] + obj.value;
-					updateBorderOutset();
-				});
-			};
-
-			for (var i = 0; i &lt; positions.length; i++) {
-				var topic = 'outset-' + positions[i];
-				var property = createProperty(topic, i, 2);
-				InputSliderManager.setMax(topic, 1000);
-				listenForChanges(topic, i);
-
-				container.appendChild(property);
-			}
-		};
-
-		var init = function init() {
-
-			var gallery =
-			subject = getElemById('subject');
-			preview = getElemById("preview");
-			preview_area = getElemById("preview_section");
-
-
-			CSS_code['source'] = getElemById("out-border-source");
-			CSS_code['slice'] = getElemById("out-border-slice");
-			CSS_code['width'] = getElemById("out-border-width");
-			CSS_code['outset'] = getElemById("out-border-outset");
-			CSS_code['repeat'] = getElemById("out-border-repeat");
-
-			initBorderSliceControls();
-			initBorderWidthControls();
-			initBorderOutsetControls();
-
-			var elem = document.querySelectorAll('.guideline');
-			var size = elem.length;
-			for (var i = 0; i &lt; size; i++)
-				new GuideLine(elem[i]);
-
-			PreviewControl.init();
-
-			ButtonManager.subscribe('slice-fill',setBorderFill);
-			ButtonManager.subscribe('drag-subject', updateDragOption);
-			ButtonManager.setValue('drag-subject', false);
-
-			DropDownManager.subscribe('image-repeat-X', setBorderRepeat);
-			DropDownManager.subscribe('image-repeat-Y', setBorderRepeat);
-
-			InputSliderManager.subscribe('preview-area-height', setPreviewAreaHeight);
-			InputSliderManager.subscribe('preview-width', setPreviewWidth);
-			InputSliderManager.subscribe('preview-height', setPreviewHeight);
-			InputSliderManager.subscribe('font-size', setPreviewFontSize);
-			InputSliderManager.setValue('preview-width', 300);
-			InputSliderManager.setValue('preview-height', 200);
-		};
-
-		return {
-			init: init,
-			setOutputCSS: setOutputCSS,
-			setBorderSlice: setBorderSlice
-		};
-
-	})();
-
-	/**
-	 * Init Tool
-	 */
-	var init = function init() {
-		InputSliderManager.init();
-		DropDownManager.init();
-		ButtonManager.init();
-		UnitPanel.init();
-		Tool.init();
-		ImageControl.init();
-	};
-
-	return {
-		init : init
-	};
-
-})();
-
-</pre>
-</div>
-
-<div>{{ EmbedLiveSample('Border_Image_Generator', '100%', '1270px') }}</div>
-
-<p> </p>
diff --git a/files/ja/web/css/css_background_and_borders/border-radius_generator/index.html b/files/ja/web/css/css_background_and_borders/border-radius_generator/index.html
deleted file mode 100644
index 4ce39890a7..0000000000
--- a/files/ja/web/css/css_background_and_borders/border-radius_generator/index.html
+++ /dev/null
@@ -1,1602 +0,0 @@
----
-title: Border-radius ジェネレーター
-slug: Web/CSS/CSS_Background_and_Borders/Border-radius_generator
-tags:
-  - CSS
-  - CSS Borders
-  - CSS 境界と背景
-  - Tools
-translation_of: Web/CSS/CSS_Background_and_Borders/Border-radius_generator
----
-<p>このツールは CSS3 の {{cssxref("border-radius")}} の効果を生成するために使用することができます。</p>
-
-<div class="hidden">
-<h2 id="border-radius-generator" name="border-radius-generator">border-radius</h2>
-
-<h3 id="HTML_Content" name="HTML_Content">HTML Content</h3>
-
-<pre class="brush: html">&lt;div id="container"&gt;
-    &lt;div class="group section"&gt;
-        &lt;div id="preview" class="col span_12"&gt;
-            &lt;div id="subject"&gt;
-                &lt;div id="top-left" class="radius-container"
-                    data-X="left" data-Y="top"&gt;
-                &lt;/div&gt;
-                &lt;div id="top-right" class="radius-container"
-                    data-X="right" data-Y="top"&gt;
-                &lt;/div&gt;
-                &lt;div id="bottom-right" class="radius-container"
-                    data-X="right" data-Y="bottom"&gt;
-                &lt;/div&gt;
-                &lt;div id="bottom-left" class="radius-container"
-                    data-X="left" data-Y="bottom"&gt;
-                &lt;/div&gt;
-
-                &lt;div id="radius-ui-sliders"&gt;
-                    &lt;div id="tlr" class="ui-input-slider" data-topic="top-left"
-                         data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
-
-                    &lt;div id="tlw" class="ui-input-slider" data-topic="top-left-w"
-                         data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
-
-                    &lt;div id="tlh" class="ui-input-slider" data-topic="top-left-h"
-                        data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
-
-                    &lt;div id="trr" class="ui-input-slider" data-topic="top-right"
-                         data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
-
-                    &lt;div id="trw" class="ui-input-slider" data-topic="top-right-w"
-                         data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
-
-                    &lt;div id="trh" class="ui-input-slider" data-topic="top-right-h"
-                        data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
-
-                    &lt;div id="brr" class="ui-input-slider" data-topic="bottom-right"
-                         data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
-
-                    &lt;div id="brw" class="ui-input-slider" data-topic="bottom-right-w"
-                         data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
-
-                    &lt;div id="brh" class="ui-input-slider" data-topic="bottom-right-h"
-                        data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
-
-                    &lt;div id="blr" class="ui-input-slider" data-topic="bottom-left"
-                         data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
-
-                    &lt;div id="blw" class="ui-input-slider" data-topic="bottom-left-w"
-                         data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
-
-                    &lt;div id="blh" class="ui-input-slider" data-topic="bottom-left-h"
-                        data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
-                &lt;/div&gt;
-            &lt;/div&gt;
-        &lt;/div&gt;
-    &lt;/div&gt;
-    &lt;div id="controls" class="group section"&gt;
-
-        &lt;div class="group section"&gt;
-            &lt;div id="dimensions"&gt;
-                &lt;div class="ui-input-slider" data-topic="width" data-info="width"
-                     data-unit=" px" data-min="150" data-max="700" data-sensivity="1"&gt;&lt;/div&gt;
-
-                &lt;div class="ui-input-slider" data-topic="height" data-info="height"
-                    data-unit=" px" data-min="75" data-max="350" data-sensivity="1"&gt;&lt;/div&gt;
-            &lt;/div&gt;
-
-            &lt;div id="output"&gt;&lt;/div&gt;
-        &lt;/div&gt;
-
-        &lt;div class="group section"&gt;
-            &lt;div id="radius-lock"&gt;
-                &lt;div class="info"&gt; 丸いコーナー &lt;/div&gt;
-                &lt;div class="ui-checkbox" data-topic='top-left'&gt;&lt;/div&gt;
-                &lt;div class="ui-checkbox" data-topic='top-right'&gt;&lt;/div&gt;
-                &lt;div class="ui-checkbox" data-topic='bottom-right'&gt;&lt;/div&gt;
-                &lt;div class="ui-checkbox" data-topic='bottom-left'&gt;&lt;/div&gt;
-            &lt;/div&gt;
-
-            &lt;div id="unit-selection"&gt;
-                &lt;div class="info"&gt; 境界の単位を選択 &lt;/div&gt;
-            &lt;/div&gt;
-        &lt;/div&gt;
-
-    &lt;/div&gt;
-&lt;/div&gt;
-</pre>
-
-<h3 id="CSS_Content" name="CSS_Content">CSS Content</h3>
-
-<pre class="brush: css">/*  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 &gt; 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 &gt; input {
- 	display: none;
-}
-
-.ui-checkbox &gt; 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 &gt; label:hover {
-	cursor: pointer;
-}
-
-.ui-checkbox &gt; 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 &gt; 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;
-}
-
-
-</pre>
-
-<h3 id="JavaScript_Content" name="JavaScript_Content">JavaScript Content</h3>
-
-<pre class="brush: js"><code class="language-js">'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 &gt; 0 ? max : 100;
-		this.step = step === 0 ? 1 : step;
-		this.topic = topic;
-		this.node = node;
-		this.unit = unit;
-		this.sensivity = sensivity &gt; 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 &gt; slider.max) value = slider.max;
-		if (value &lt; slider.min)	value = slider.min;
-
-		slider.value = value;
-		slider.node.setAttribute('data-value', value);
-
-		if (send_notify !== undefined &amp;&amp; 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 &lt; 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 &lt; 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 &lt; 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' &amp;&amp; y == 'top') handle.className = 'handle handle-top-left'
-		if (x === 'right' &amp;&amp; y == 'top') handle.className = 'handle handle-top-right';
-		if (x === 'right' &amp;&amp; y == 'bottom') handle.className = 'handle handle-bottom-right';
-		if (x === 'left' &amp;&amp; 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 &amp;&amp; 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 &lt; 0)	this.size = 0;
-			if (this.size &gt; this.maxR)	this.size = this.maxR;
-			this.updateRadius();
-			this.updateBorderRadius();
-			return;
-		}
-
-		if (deltaX) {
-			this.width += this.resizeX * deltaX;
-			if (this.width &lt; 0)	this.width = 0;
-			if (this.width &gt; this.maxW)	this.width = this.maxW;
-			this.updateWidth();
-		}
-
-		if (deltaY) {
-			this.height += this.resizeY * deltaY;
-			if (this.height &lt; 0) this.height = 0;
-			if (this.height &gt; 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 &lt; 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 &lt; 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 &lt; 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
-	}
-
-})();
-
-
-</code></pre>
-</div>
-
-<div>{{ EmbedLiveSample('border-radius-generator', 700, 900) }}</div>
diff --git a/files/ja/web/css/css_backgrounds_and_borders/border-image_generator/index.html b/files/ja/web/css/css_backgrounds_and_borders/border-image_generator/index.html
new file mode 100644
index 0000000000..521db7ba49
--- /dev/null
+++ b/files/ja/web/css/css_backgrounds_and_borders/border-image_generator/index.html
@@ -0,0 +1,2630 @@
+---
+title: 境界画像作成ツール
+slug: Web/CSS/CSS_Backgrounds_and_Borders/Border-image_generator
+tags:
+  - CSS
+  - CSS 背景と境界
+  - ツール
+translation_of: Web/CSS/CSS_Background_and_Borders/Border-image_generator
+original_slug: Web/CSS/CSS_Background_and_Borders/Border-image_generator
+---
+<p>このツールを使用して、 CSS3 の {{cssxref("border-image")}} の値を作成できます。</p>
+
+<div class="hidden">
+<h2 id="Border_Image_Generator" name="Border_Image_Generator">Border Image Generator</h2>
+
+<h3 id="HTML_Content">HTML Content</h3>
+
+<pre class="brush: html">    &lt;div id="container"&gt;
+
+        &lt;div id="gallery"&gt;
+            &lt;div id="image-gallery"&gt;
+                &lt;img class="image" src="https://mdn.mozillademos.org/files/6007/border-image-1.png" data-stateID="border1"/&gt;
+                &lt;img class="image" src="https://mdn.mozillademos.org/files/6009/border-image-2.png" data-stateID="border2"/&gt;
+                &lt;img class="image" src="https://mdn.mozillademos.org/files/6011/border-image-3.png" data-stateID="border3"/&gt;
+                &lt;img class="image" src="https://mdn.mozillademos.org/files/6013/border-image-4.png" data-stateID="border4"/&gt;
+                &lt;img class="image" src="https://mdn.mozillademos.org/files/6015/border-image-5.png" data-stateID="border5"/&gt;
+                &lt;img class="image" src="https://mdn.mozillademos.org/files/6017/border-image-6.svg" data-stateID="border6"/&gt;
+            &lt;/div&gt;
+        &lt;/div&gt;
+
+        &lt;div id="load-actions" class="group section"&gt;
+            &lt;div id="toggle-gallery" data-action="hide"&gt; &lt;/div&gt;
+            &lt;div id="load-image" class="button"&gt; Upload image &lt;/div&gt;
+            &lt;input id="remote-url" type="text" placeholder="Load an image from URL"/&gt;
+            &lt;div id="load-remote" class="button"&gt; &lt;/div&gt;
+        &lt;/div&gt;
+
+        &lt;div id="general-controls" class="group section"&gt;
+            &lt;div class="name"&gt; Control Box &lt;/div&gt;
+            &lt;div class="separator"&gt;&lt;/div&gt;
+            &lt;div class="property"&gt;
+                &lt;div class="name"&gt;scale&lt;/div&gt;
+                &lt;div class="ui-input-slider" data-topic="scale"
+                    data-unit="%" data-max="300" data-sensivity="10"&gt;
+                &lt;/div&gt;
+            &lt;/div&gt;
+            &lt;div class="separator"&gt;&lt;/div&gt;
+            &lt;div class="property"&gt;
+                &lt;div class="name"&gt;draggable&lt;/div&gt;
+                &lt;div class="ui-checkbox" data-topic='drag-subject'&gt;&lt;/div&gt;
+            &lt;/div&gt;
+            &lt;div class="property right"&gt;
+                &lt;div class="name"&gt;section height&lt;/div&gt;
+                &lt;div class="ui-input-slider" data-topic="preview-area-height"
+                    data-min="400" data-max="1000"&gt;
+                &lt;/div&gt;
+            &lt;/div&gt;
+        &lt;/div&gt;
+
+        &lt;div id="preview_section" class="group section"&gt;
+            &lt;div id="subject"&gt;
+                &lt;div class="guideline" data-axis="Y" data-topic="slice-top"&gt;&lt;/div&gt;
+                &lt;div class="guideline" data-axis="X" data-topic="slice-right"&gt;&lt;/div&gt;
+                &lt;div class="guideline" data-axis="Y" data-topic="slice-bottom"&gt;&lt;/div&gt;
+                &lt;div class="guideline" data-axis="X" data-topic="slice-left"&gt;&lt;/div&gt;
+            &lt;/div&gt;
+            &lt;div id="preview"&gt; &lt;/div&gt;
+        &lt;/div&gt;
+
+        &lt;!-- controls --&gt;
+        &lt;div id="controls" class="group section"&gt;
+
+            &lt;!-- border-image-slice --&gt;
+            &lt;div id="border-slice-control" class="category"&gt;
+                &lt;div class="title"&gt; border-image-slice &lt;/div&gt;
+                &lt;div class="property"&gt;
+                    &lt;div class="name"&gt;fill&lt;/div&gt;
+                    &lt;div class="ui-checkbox" data-topic='slice-fill'&gt;&lt;/div&gt;
+                &lt;/div&gt;
+            &lt;/div&gt;
+
+            &lt;!-- border-image-width --&gt;
+            &lt;div id="border-width-control" class="category"&gt;
+                &lt;div class="title"&gt; border-image-width &lt;/div&gt;
+            &lt;/div&gt;
+
+            &lt;!-- border-image-outset --&gt;
+            &lt;div id="border-outset-control" class="category"&gt;
+                &lt;div class="title"&gt; border-image-outset &lt;/div&gt;
+            &lt;/div&gt;
+
+            &lt;!-- other-settings --&gt;
+            &lt;div id="aditional-properties" class="category"&gt;
+                &lt;div class="title"&gt; aditional-properties &lt;/div&gt;
+                &lt;div class="property"&gt;
+                    &lt;div class="name"&gt; repeat-x &lt;/div&gt;
+                    &lt;div class="ui-dropdown border-repeat" data-topic="image-repeat-X" data-selected="2"&gt;
+                        &lt;div data-value="0"&gt;repeat&lt;/div&gt;
+                        &lt;div data-value="0"&gt;stretch&lt;/div&gt;
+                        &lt;div data-value="0"&gt;round&lt;/div&gt;
+                    &lt;/div&gt;
+                &lt;/div&gt;
+                &lt;div class="property"&gt;
+                    &lt;div class="name"&gt; repeat-y &lt;/div&gt;
+                    &lt;div class="ui-dropdown border-repeat" data-topic="image-repeat-Y" data-selected="2"&gt;
+                        &lt;div data-value="1"&gt;repeat&lt;/div&gt;
+                        &lt;div data-value="1"&gt;stretch&lt;/div&gt;
+                        &lt;div data-value="1"&gt;round&lt;/div&gt;
+                    &lt;/div&gt;
+                &lt;/div&gt;
+                &lt;div class="property"&gt;
+                    &lt;div class="ui-input-slider" data-topic="font-size" data-info="em size"
+                        data-unit="px" data-value="12" data-sensivity="3"&gt;
+                    &lt;/div&gt;
+                &lt;/div&gt;
+
+                &lt;div class="property"&gt;
+                    &lt;div class="ui-input-slider" data-topic="preview-width" data-info="width"
+                         data-unit=" px" data-min="10" data-max="10000" data-sensivity="3"&gt;&lt;/div&gt;
+                &lt;/div&gt;
+                &lt;div class="property"&gt;
+                    &lt;div class="ui-input-slider" data-topic="preview-height" data-info="height"
+                        data-unit=" px" data-min="10" data-max="10000" data-sensivity="3"&gt;
+                    &lt;/div&gt;
+                &lt;/div&gt;
+            &lt;/div&gt;
+
+
+            &lt;div id="output" class="category"&gt;
+                &lt;div class="title"&gt; CSS Code &lt;/div&gt;
+                &lt;div class="css-property"&gt;
+                    &lt;span class="name"&gt; border-image-slice: &lt;/span&gt;
+                    &lt;span id="out-border-slice" class="value"&gt; &lt;/span&gt;
+                &lt;/div&gt;
+                &lt;div class="css-property"&gt;
+                    &lt;span class="name"&gt; border-image-width: &lt;/span&gt;
+                    &lt;span id="out-border-width" class="value"&gt; &lt;/span&gt;
+                &lt;/div&gt;
+                &lt;div class="css-property"&gt;
+                    &lt;span class="name"&gt; border-image-outset: &lt;/span&gt;
+                    &lt;span id="out-border-outset" class="value"&gt; &lt;/span&gt;
+                &lt;/div&gt;
+                &lt;div class="css-property"&gt;
+                    &lt;span class="name"&gt; border-image-repeat: &lt;/span&gt;
+                    &lt;span id="out-border-repeat" class="value"&gt; &lt;/span&gt;
+                &lt;/div&gt;
+                &lt;div class="css-property"&gt;
+                    &lt;span class="name"&gt; border-image-source: &lt;/span&gt;
+                    &lt;span id="out-border-source" class="value"&gt;  &lt;/span&gt;
+                &lt;/div&gt;
+            &lt;/div&gt;
+
+        &lt;/div&gt;
+    &lt;/div&gt;</pre>
+
+<h3 id="CSS_Content">CSS Content</h3>
+
+<pre class="brush: css">/*  GRID OF TWELVE
+ * ========================================================================== */
+
+.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 {
+	height: 20px;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	-moz-user-select: none;
+	user-select: none;
+}
+
+.ui-input-slider * {
+	float: left;
+	height: 100%;
+	line-height: 100%;
+}
+
+/* Input Slider */
+
+.ui-input-slider &gt; 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 DropDown
+ */
+
+/* Dropdown */
+
+.ui-dropdown {
+	height: 2em;
+	width: 120px;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	font-size: 12px;
+
+	background-image: url("https://mdn.mozillademos.org/files/6037/drop_arrow_icon.png");
+	background-position: right center;
+	background-repeat: no-repeat;
+	background-color: #359740;
+
+	position: relative;
+
+	-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;
+}
+
+.ui-dropdown:hover {
+	cursor: pointer;
+	background-color: #208B20;
+}
+
+/* Dropdown Select Button */
+
+.ui-dropdown-select {
+	height: inherit;
+	padding: 0 0.75em;
+	color: #FFF;
+	line-height: 2em;
+}
+
+/* Dropdown List */
+
+.ui-dropdown-list {
+	width: 100%;
+	height: 150px;
+	max-height: 150px;
+	margin: 0;
+	padding: 0 0.3em;
+
+	border: 3px solid #3490D2;
+	border-color: #208B20;
+	background: #666;
+	background-color: #EEF1F5;
+	color: #000;
+
+	position: absolute;
+	top: 2em;
+	left: 0;
+	z-index: 100;
+
+	overflow: hidden;
+	transition: all 0.3s;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+.ui-dropdown-list:hover {
+	overflow: auto;
+}
+
+.ui-dropdown-list[data-hidden='true'] {
+	height: 0 !important;
+	opacity: 0;
+	visibility: hidden;
+}
+
+.ui-dropdown[data-position='left'] .ui-dropdown-list {
+	left: -100%;
+	top: 0;
+}
+
+.ui-dropdown[data-position='right'] .ui-dropdown-list {
+	left: 100%;
+	top: 0;
+}
+
+.ui-dropdown-list &gt; div {
+	width: 100%;
+	height: 1.6em;
+	margin: 0.3em 0;
+	padding: 0.3em;
+	line-height: 1em;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+.ui-dropdown-list &gt; div:hover {
+	background: #3490D2;
+	color:#FFF;
+	border-radius: 2px;
+	cursor: pointer;
+}
+
+
+/*************************************************************************************/
+/*************************************************************************************/
+
+/*
+ * UI Button
+ */
+
+/* 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 &gt; input {
+ 	display: none;
+}
+
+.ui-checkbox &gt; 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: 2px;
+	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 &gt; label:hover {
+	cursor: pointer;
+}
+
+.ui-checkbox &gt; input:checked + label {
+	background-image: url("https://mdn.mozillademos.org/files/5681/checked.png");
+	background-color: #379B4A;
+}
+
+/*************************************************************************************/
+/*************************************************************************************/
+
+/*
+ * BORDER IMAGE GENERATOR TOOL
+ */
+
+body {
+	width: 100%;
+	margin: 0 auto;
+	padding: 0 0 20px 0;
+
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+
+	/*background: url("https://mdn.mozillademos.org/files/6025/grain.png");*/
+	border: 1px solid #EEE;
+
+	-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;
+}
+
+body[data-move='X'] {
+	cursor: w-resize !important;
+}
+
+body[data-move='Y'] {
+	cursor: s-resize !important;
+}
+
+#container {
+	width: 100%;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+[data-draggable='true']:hover {
+	cursor: move;
+}
+
+[data-draggable='true']:hover &gt; * {
+	cursor: default;
+}
+
+
+
+/******************************************************************************/
+/******************************************************************************/
+
+/*
+ * Border Image Picker
+ */
+
+#gallery {
+	box-shadow: 0 0 3px 0 #BABABA;
+}
+
+#image-gallery {
+	width: 600px;
+	height: 100px;
+	margin: 0 auto;
+	transition: margin 0.4s;
+}
+
+#image-gallery .image {
+	height: 80px;
+	float: left;
+	margin: 10px;
+	opacity: 0.5;
+	background-color: #FFF;
+	box-shadow: 0px 0px 3px 1px #BABABA;
+}
+
+#image-gallery .image[selected="true"] {
+	box-shadow: 0px 0px 3px 1px #3BBA52;
+	opacity: 1;
+}
+
+#image-gallery .image:hover {
+	cursor: pointer;
+	box-shadow: 0px 0px 3px 1px #30ACE5;
+	opacity: 1;
+}
+
+#image-gallery[data-collapsed='true'] {
+	margin-top: -100px;
+}
+
+/* Load Menu */
+
+#load-actions {
+	margin: 10px 0;
+}
+
+#toggle-gallery {
+	width: 30px;
+	height: 25px;
+	margin: 10px;
+	color: #FFF;
+
+	background-image: url('https://mdn.mozillademos.org/files/6005/arrow-up-white.png');
+	background-repeat: no-repeat;
+	background-position: top 4px center;
+	background-color: #888888 !important;
+
+	border-radius: 2px;
+	float: left;
+}
+
+#toggle-gallery:hover {
+	cursor: pointer;
+}
+
+#toggle-gallery[data-action='show'] {
+	background-image: url('https://mdn.mozillademos.org/files/6001/arrow-down-white.png');
+	background-color: #888888 !important;
+}
+
+#toggle-gallery[data-action='hide'] {
+	background-image: url('https://mdn.mozillademos.org/files/6005/arrow-up-white.png');
+}
+
+.button {
+	width: 100px;
+	height: 25px;
+	margin: 10px;
+	color: #FFF;
+	text-align: center;
+	font-size: 12px;
+	line-height: 25px;
+	background-color: #379B4A;
+	border-radius: 2px;
+	float: left;
+}
+
+.button:hover {
+	cursor: pointer;
+	background-color: #3380C4;
+}
+
+#load-image {
+	float: left;
+}
+
+#load-remote {
+	width: 30px;
+	background-image: url('https://mdn.mozillademos.org/files/6003/arrow-right-white.png');
+	background-repeat: no-repeat;
+	background-position: center center;
+}
+
+#remote-url {
+	width: 200px;
+	height: 23px;
+	margin: 10px;
+	padding: 0 5px;
+	border: 1px solid #379B4A;
+	border-radius: 2px;
+	float: left;
+
+	transition: width 0.5s;
+}
+
+#remote-url:focus {
+	box-shadow: 0px 0px 3px -1px #379B4A; /*#68ACE8; */
+	border-color: rgba(55, 155, 74, 0.5);
+	width: 450px;
+}
+
+/*
+ * Visible Area
+ */
+
+#preview_section {
+	position: relative;
+	min-height: 400px;
+}
+
+/* Image Control */
+
+#subject {
+	width: 300px;
+	height: 300px;
+	background-repeat: no-repeat;
+	background-size: 100%;
+	background-color: #FFF;
+	border: 1px solid #CCC;
+
+	position: absolute;
+	z-index: 10;
+	top: 15%;
+	left: 10%;
+
+	box-shadow: 0 0 3px 0 #BABABA;
+	transition-property: width, height;
+	transition-duration: 0.1s;
+}
+
+#subject .guideline {
+	background-color: rgba(255, 255, 255, 0.7);
+	border: 1px solid rgba(0, 0, 0, 0.3);
+	position: absolute;
+}
+
+#subject .guideline:hover {
+	background-color: #F00;
+}
+
+#subject .guideline[data-active] {
+	background-color: #F00;
+	z-index: 10;
+}
+
+#subject .guideline[data-axis='X'] {
+	width: 1px;
+	height: 100%;
+	top: -1px;
+}
+
+#subject .guideline[data-axis='Y'] {
+	width: 100%;
+	height: 1px;
+	left: -1px;
+}
+
+#subject .guideline[data-axis='X']:hover {
+	cursor: w-resize;
+}
+
+#subject .guideline[data-axis='Y']:hover {
+	cursor: s-resize;
+}
+
+
+#subject .relative {
+	position: relative;
+	font-size: 12px;
+}
+
+#subject .tooltip, #subject .tooltip2 {
+	width: 40px;
+	height: 20px;
+	line-height: 20px;
+	font-size: 12px;
+	text-align: center;
+
+	position: absolute;
+	opacity: 0.5;
+	transition: opacity 0.25s;
+}
+
+#subject .tooltip {
+	background: #EEE;
+	border-radius: 2px;
+	border: 1px solid #CCC;
+}
+
+#subject .tooltip2{
+	color: #555;
+}
+
+#subject [data-active] &gt; * {
+	opacity: 1;
+}
+
+#subject .tooltip[data-info='top'] {
+	top: -10px;
+	right: -50px;
+}
+
+#subject .tooltip[data-info='right'] {
+	bottom: -30px;
+	right: -20px;
+}
+
+#subject .tooltip[data-info='bottom'] {
+	top: -10px;
+	left: -50px;
+}
+
+#subject .tooltip[data-info='left'] {
+	top: -30px;
+	right: -20px;
+}
+
+#subject .tooltip2[data-info='top'] {
+	top: -10px;
+	left: -50px;
+}
+
+#subject .tooltip2[data-info='right'] {
+	top: -30px;
+	right: -20px;
+}
+
+#subject .tooltip2[data-info='bottom'] {
+	top: -10px;
+	right: -50px;
+}
+
+#subject .tooltip2[data-info='left'] {
+	bottom: -30px;
+	right: -20px;
+}
+
+/* Preview */
+
+#preview {
+	width: 30%;
+	height: 50%;
+	background-color: #FFF;
+	text-align: center;
+	overflow: hidden;
+	position: absolute;
+	z-index: 10;
+
+	left: 60%;
+	top: 15%;
+
+	border-radius: 2px;
+	border-image-width: 20px;
+	border-image-repeat: round;
+	box-shadow: 0 0 3px 0 #BABABA;
+}
+
+#preview .resize-handle {
+	width: 10px;
+	height: 10px;
+	background: url("https://mdn.mozillademos.org/files/6027/resize.png") center center no-repeat;
+	position: absolute;
+	bottom: 0;
+	right: 0;
+}
+
+#preview .resize-handle:hover {
+	cursor: nw-resize;
+}
+
+
+/*
+ * General controls MENU
+ */
+
+#general-controls {
+	padding: 10px 30px;
+	background-color: #FFF;
+	opacity: 0.95;
+	color: #888;
+	/*border-radius: 2px;*/
+	box-shadow: 0 0 3px 0 #BABABA;
+}
+
+#general-controls .property {
+	width: 130px;
+	float: left;
+}
+
+#general-controls .name {
+	height: 20px;
+	margin: 0 10px 0 0;
+	line-height: 100%;
+	text-align: right;
+	float: left;
+}
+
+#general-controls .right {
+	width: 200px;
+	float: right;
+}
+
+#general-controls .ui-checkbox label {
+	height: 10px;
+}
+
+#general-controls .separator {
+	height: 40px;
+	width: 1px;
+	margin: -10px 15px;
+	background-color: #EEE;
+	float: left;
+}
+
+/*
+ * Controls
+ */
+
+#controls {
+	color: #444;
+	margin: 10px 0 0 0;
+}
+
+#controls .category {
+	height: 190px;
+	min-width: 260px;
+	margin: 10px;
+	padding: 10px;
+	border: 1px solid #CCC;
+	border-radius: 3px;
+	float: left;
+
+	box-shadow: 0 0 3px 0 #BABABA;
+	transition: all 0.25s;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+@media (min-width: 880px) {
+	#controls .category {
+		width: 30%;
+		margin-left: 1.66%;
+		margin-right: 1.66%;
+	}
+}
+
+@media (max-width: 879px) {
+	#controls .category {
+		width: 37%;
+		margin-left: 6.5%;
+		margin-right: 6.5%;
+	}
+}
+
+#controls .category .title {
+	width: 100%;
+	height: 30px;
+	margin: 0 0 10px 0;
+	line-height: 25px;
+
+	text-align: center;
+	color: #AAA;
+}
+
+#controls .category:hover .title {
+	color: #777;
+}
+
+#controls .category &gt; .group {
+	border: 1px solid #CCC;
+	border-radius: 2px;
+}
+
+
+/* property */
+
+#controls .property {
+	width: 250px;
+	height: 20px;
+	margin: 5px auto;
+}
+
+#controls .property .ui-input-slider {
+	margin: 0;
+	float: left;
+}
+
+#controls .property .ui-input-slider-info {
+	width: 60px;
+}
+
+#controls .property .ui-input-slider-left {
+	transition: opacity 0.15s;
+    opacity: 0;
+}
+
+#controls .property .ui-input-slider-right {
+	transition: opacity 0.15s;
+    opacity: 0;
+}
+
+#controls .property .name {
+	width: 60px;
+	height: 20px;
+	padding: 0px 10px 0px 0px;
+	text-align: right;
+	line-height: 100%;
+	float: left;
+}
+
+#controls .property .config {
+	width: 20px;
+	height: 20px;
+	float: left;
+	background: url("https://mdn.mozillademos.org/files/6021/config.png") center center no-repeat;
+	opacity: 0.5;
+}
+
+#controls .property .config:hover {
+	cursor: pointer;
+	opacity: 1;
+}
+
+#controls .ui-input-slider:hover .ui-input-slider-right {
+    opacity: 1;
+}
+
+#controls .ui-input-slider:hover .ui-input-slider-left {
+    opacity: 1;
+}
+
+#controls .property .ui-dropdown {
+	margin: 0 10px;
+	float: left;
+}
+
+
+#controls .property .ui-checkbox {
+	margin: 0 0 0 16px;
+	float: left;
+}
+
+#controls .property .ui-checkbox label {
+	height: 0.85em;
+	width: 10px;
+}
+
+/* dropdowns */
+#controls .ui-dropdown {
+	width: 50px;
+	height: 1.7em;
+	border-radius: 2px;
+}
+
+#controls .ui-dropdown-select {
+	line-height: 1.6em;
+}
+
+#controls .ui-dropdown-list {
+	top: 20px;
+}
+
+#controls .ui-dropdown-list {
+	border-width: 1px;
+	text-align: center;
+}
+
+#controls .ui-dropdown-list:hover {
+	overflow: hidden;
+}
+
+#controls .border-repeat {
+	margin: 0 0 0 16px !important;
+	width: 80px;
+}
+
+#controls .border-repeat .ui-dropdown-list {
+	height: 6.2em;
+	border-width: 1px;
+	text-align: center;
+}
+
+/* border-image-slice */
+
+
+#border-slice-control .ui-dropdown-list {
+	height: 4.3em;
+}
+
+/* border-image-width */
+
+#border-width-control .ui-dropdown-list {
+	height: 6.2em;
+}
+
+/* border-image-outset */
+
+#border-outset-control .ui-dropdown-list {
+	height: 4.3em;
+}
+
+#aditional-properties .property {
+	width: 200px;
+}
+
+#aditional-properties .ui-input-slider &gt; input {
+	width: 80px !important;
+}
+
+/* unit settings panel */
+
+#unit-settings {
+	padding: 10px;
+	position: absolute;
+
+	background: #FFF;
+
+	font-size: 12px;
+	border-radius: 3px;
+	border: 1px solid #CCC;
+	text-align: center;
+	color: #555;
+
+	position: absolute;
+	z-index: 1000;
+
+	box-shadow: 0 0 3px 0 #BABABA;
+	transition: all 0.25s;
+}
+
+#unit-settings .title {
+	width: 100%;
+	margin: -5px auto 0;
+
+	color: #666;
+	font-size: 14px;
+	font-weight: bold;
+	line-height: 25px;
+	border-bottom: 1px solid #E5E5E5;
+}
+
+#unit-settings .ui-input-slider {
+	margin: 10px 0 0 0;
+}
+
+#unit-settings .ui-input-slider-info {
+	width: 50px;
+	line-height: 1.5em;
+}
+
+#unit-settings input {
+	font-size: 12px;
+	width: 40px !important;
+}
+
+#unit-settings .close {
+	width: 16px;
+	height: 16px;
+	background: url('https://mdn.mozillademos.org/files/6019/close.png') no-repeat center center;
+	background-size: 75%;
+
+	position: absolute;
+	top: 4px;
+	right: 4px;
+	opacity: 0.5;
+}
+
+#unit-settings .close:hover {
+	cursor: pointer;
+	opacity: 1;
+}
+
+#unit-settings[data-active='true'] {
+	opacity: 1;
+}
+
+#unit-settings[data-active='false'] {
+	opacity: 0;
+	top: -100px !important;
+}
+
+/*
+ * CSS Output Code
+ */
+
+#output {
+	padding: 10px;
+	border: 2px dashed #888 !important;
+	box-shadow: none !important;
+	border-radius: 3px;
+	overflow: hidden;
+
+	-moz-user-select: text;
+	-webkit-user-select: text;
+	-ms-user-select: text;
+	user-select: text;
+}
+
+
+@media (min-width: 880px) {
+	#output {
+		width: 63.33% !important;
+	}
+}
+
+@media (max-width: 879px) {
+	#output {
+		width: 87% !important;
+	}
+}
+
+
+#output .title {
+	width: 100%;
+	height: 30px;
+	margin: 0 0 10px 0;
+	line-height: 25px;
+
+	text-align: center;
+	color: #AAA;
+}
+
+#output .css-property {
+	width: 100%;
+	margin: 0;
+	color: #555;
+	font-size: 14px;
+	line-height: 18px;
+	float: left;
+}
+
+#output .css-property .name {
+	width: 30%;
+	font-weight: bold;
+	text-align: right;
+	float: left;
+}
+
+#output .css-property .value {
+	width: 65%;
+	padding: 0 2.5%;
+	word-break: break-all;
+	float: left;
+}
+
+</pre>
+
+<h3 id="JavaScript_Content">JavaScript Content</h3>
+
+<pre class="brush: js">'use strict';
+
+/**
+ * UI-SlidersManager
+ */
+
+var InputSliderManager = (function InputSliderManager() {
+
+	var subscribers = {};
+	var sliders = [];
+
+	var InputComponent = function InputComponent(obj) {
+		var input = document.createElement('input');
+		input.setAttribute('type', 'text');
+		input.style.width = 50 + obj.precision * 10 + 'px';
+
+		input.addEventListener('click', function(e) {
+			this.select();
+		});
+
+		input.addEventListener('change', function(e) {
+			var value = parseFloat(e.target.value);
+
+			if (isNaN(value) === true)
+				setValue(obj.topic, obj.value);
+			else
+				setValue(obj.topic, value);
+		});
+
+		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) {
+			document.removeEventListener("mousemove", sliderMotion);
+			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("mouseup", slideEnd);
+			document.addEventListener("mousemove", sliderMotion);
+		});
+
+		var slideEnd = function slideEnd(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		= parseFloat(node.getAttribute('data-min'));
+		var max		= parseFloat(node.getAttribute('data-max'));
+		var step	= parseFloat(node.getAttribute('data-step'));
+		var value	= parseFloat(node.getAttribute('data-value'));
+		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;
+		var precision = node.getAttribute('data-precision') | 0;
+
+		this.min = isNaN(min) ? 0 : min;
+		this.max = isNaN(max) ? 100 : max;
+		this.precision = precision &gt;= 0 ? precision : 0;
+		this.step = step &lt; 0 || isNaN(step) ? 1 : step.toFixed(precision);
+		this.topic = topic;
+		this.node = node;
+		this.unit = unit === null ? '' : unit;
+		this.sensivity = sensivity &gt; 0 ? sensivity : 5;
+		value = isNaN(value) ? this.min : value;
+
+		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);
+
+		this.input = input;
+		sliders[topic] = this;
+		setValue(topic, value);
+	};
+
+	InputSlider.prototype.setInputValue = function setInputValue() {
+		this.input.value = this.value.toFixed(this.precision) + this.unit;
+	};
+
+	var setValue = function setValue(topic, value, send_notify) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		value = parseFloat(value.toFixed(slider.precision));
+
+		if (value &gt; slider.max) value = slider.max;
+		if (value &lt; slider.min)	value = slider.min;
+
+		slider.value = value;
+		slider.node.setAttribute('data-value', value);
+
+		slider.setInputValue();
+
+		if (send_notify === false)
+			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 setStep = function setStep(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.step = parseFloat(value);
+		setValue(topic, slider.value);
+	};
+
+	var setPrecision = function setPrecision(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		value = value | 0;
+		slider.precision = value;
+
+		var step = parseFloat(slider.step.toFixed(value));
+		if (step === 0)
+			slider.step = 1 / Math.pow(10, value);
+
+		setValue(topic, slider.value);
+	};
+
+	var setSensivity = function setSensivity(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		value = value | 0;
+
+		slider.sensivity = value &gt; 0 ? value : 5;
+	};
+
+	var getNode =  function getNode(topic) {
+		return sliders[topic].node;
+	};
+
+	var getPrecision =  function getPrecision(topic) {
+		return sliders[topic].precision;
+	};
+
+	var getStep =  function getStep(topic) {
+		return sliders[topic].step;
+	};
+
+	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() {
+		if (subscribers[this.topic] === undefined)
+			return;
+		for (var i = 0; i &lt; subscribers[this.topic].length; i++)
+			subscribers[this.topic][i](this.value);
+	};
+
+	var createSlider = function createSlider(topic, label) {
+		var slider = document.createElement('div');
+		slider.className = 'ui-input-slider';
+		slider.setAttribute('data-topic', topic);
+
+		if (label !== undefined)
+			slider.setAttribute('data-info', label);
+
+		new InputSlider(slider);
+		return slider;
+	};
+
+	var init = function init() {
+		var elem = document.querySelectorAll('.ui-input-slider');
+		var size = elem.length;
+		for (var i = 0; i &lt; size; i++)
+			new InputSlider(elem[i]);
+	};
+
+	return {
+		init : init,
+		setMax : setMax,
+		setMin : setMin,
+		setUnit : setUnit,
+		setStep : setStep,
+		getNode : getNode,
+		getStep : getStep,
+		setValue : setValue,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe,
+		setPrecision : setPrecision,
+		setSensivity : setSensivity,
+		getPrecision : getPrecision,
+		createSlider : createSlider,
+	};
+
+})();
+
+
+/**
+ * UI-DropDown Select
+ */
+
+var DropDownManager = (function DropdownManager() {
+
+	var subscribers = {};
+	var dropdowns = [];
+	var active = null;
+
+	var visbility = ["hidden", "visible"];
+
+
+	var DropDown = function DropDown(node) {
+		var topic = node.getAttribute('data-topic');
+		var label = node.getAttribute('data-label');
+		var selected = node.getAttribute('data-selected') | 0;
+
+		var select = document.createElement('div');
+		var list = document.createElement('div');
+		var uval = 0;
+		var option = null;
+		var option_value = null;
+
+		list.className = 'ui-dropdown-list';
+		select.className = 'ui-dropdown-select';
+
+		while (node.firstElementChild !== null) {
+			option = node.firstElementChild;
+			option_value = option.getAttribute('data-value');
+
+			if (option_value === null)
+				option.setAttribute('data-value', uval);
+
+			list.appendChild(node.firstElementChild);
+			uval++;
+		}
+
+		node.appendChild(select);
+		node.appendChild(list);
+
+		select.onclick = this.toggle.bind(this);
+		list.onclick = this.updateValue.bind(this);
+		document.addEventListener('click', clickOut);
+
+		this.state = 0;
+		this.time = 0;
+		this.dropmenu = list;
+		this.select = select;
+		this.toggle(false);
+		this.value = {};
+		this.topic = topic;
+
+		if (label)
+			select.textContent = label;
+		else
+			this.setNodeValue(list.children[selected]);
+
+		dropdowns[topic] = this;
+
+	};
+
+	DropDown.prototype.toggle = function toggle(state) {
+		if (typeof(state) === 'boolean')
+			this.state = state === false ? 0 : 1;
+		else
+			this.state = 1 ^ this.state;
+
+		if (active !== this) {
+			if (active)
+				active.toggle(false);
+			active = this;
+		}
+
+		if (this.state === 0)
+			this.dropmenu.setAttribute('data-hidden', 'true');
+		else
+			this.dropmenu.removeAttribute('data-hidden');
+
+	};
+
+	var clickOut = function clickOut(e) {
+		if (active.state === 0 ||
+			e.target === active.dropmenu ||
+			e.target === active.select)
+			return;
+
+		active.toggle(false);
+	};
+
+	DropDown.prototype.updateValue = function updateValue(e) {
+
+		if (Date.now() - this.time &lt; 500)
+			return;
+
+		if (e.target.className !== "ui-dropdown-list") {
+			this.setNodeValue(e.target);
+			this.toggle(false);
+		}
+
+		this.time = Date.now();
+	};
+
+	DropDown.prototype.setNodeValue = function setNodeValue(node) {
+		this.value['name'] = node.textContent;
+		this.value['value'] = node.getAttribute('data-value');
+
+		this.select.textContent = node.textContent;
+		this.select.setAttribute('data-value', this.value['value']);
+
+		notify.call(this);
+	};
+
+	var createDropDown = function createDropDown(topic, options) {
+
+		var dropdown = document.createElement('div');
+		dropdown.setAttribute('data-topic', topic);
+		dropdown.className = 'ui-dropdown';
+
+		for (var i in options) {
+			var x = document.createElement('div');
+			x.setAttribute('data-value', i);
+			x.textContent = options[i];
+			dropdown.appendChild(x);
+		}
+
+		new DropDown(dropdown);
+
+		return dropdown;
+	};
+
+	var setValue = function setValue(topic, index) {
+		if (dropdowns[topic] === undefined ||
+			index &gt;= dropdowns[topic].dropmenu.children.length)
+			return;
+
+		dropdowns[topic].setNodeValue(dropdowns[topic].dropmenu.children[index]);
+	};
+
+	var subscribe = function subscribe(topic, callback) {
+		if (subscribers[topic] === undefined)
+			subscribers[topic] = [];
+		subscribers[topic].push(callback);
+	};
+
+	var unsubscribe = function unsubscribe(topic, callback) {
+		var index = subscribers[topic].indexOf(callback);
+		subscribers[topic].splice(index, 1);
+	};
+
+	var notify = function notify() {
+		if (subscribers[this.topic] === undefined)
+			return;
+
+		for (var i in subscribers[this.topic]) {
+			subscribers[this.topic][i](this.value);
+		}
+	};
+
+	var init = function init() {
+		var elem, size;
+
+		elem = document.querySelectorAll('.ui-dropdown');
+		size = elem.length;
+		for (var i = 0; i &lt; size; i++)
+			new DropDown(elem[i]);
+
+	};
+
+	return {
+		init : init,
+		setValue : setValue,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe,
+		createDropDown : createDropDown
+	};
+
+})();
+
+
+/**
+ * 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) {
+		var obj = buttons[topic];
+		if (obj === undefined)
+			return;
+
+		obj.checkbox.checked = value;
+		notify.call(obj);
+	};
+
+	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() {
+		if (subscribers[this.topic] === undefined)
+			return;
+		for (var i = 0; i &lt; 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 &lt; size; i++)
+			new CheckBox(elem[i]);
+	};
+
+	return {
+		init : init,
+		setValue : setValue,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe
+	};
+
+})();
+
+window.addEventListener("load", function() {
+	BorderImage.init();
+});
+
+var BorderImage = (function BorderImage() {
+
+	var getElemById = document.getElementById.bind(document);
+
+	var subject;
+	var preview;
+	var guidelines = [];
+	var positions = ['top', 'right', 'bottom', 'left'];
+
+	var makeDraggable = function makeDraggable(elem) {
+
+		var offsetTop;
+		var offsetLeft;
+
+		elem.setAttribute('data-draggable', 'true');
+
+		var dragStart = function dragStart(e) {
+			if (e.target.getAttribute('data-draggable') !== 'true' ||
+				e.target !== elem || e.button !== 0)
+				return;
+
+			offsetLeft = e.clientX - elem.offsetLeft;
+			offsetTop = e.clientY - elem.offsetTop;
+
+			document.addEventListener('mousemove', mouseDrag);
+			document.addEventListener('mouseup', dragEnd);
+		};
+
+		var dragEnd = function dragEnd(e) {
+			if (e.button !== 0)
+				return;
+
+			document.removeEventListener('mousemove', mouseDrag);
+			document.removeEventListener('mouseup', dragEnd);
+		};
+
+		var mouseDrag = function mouseDrag(e) {
+
+			elem.style.left = e.clientX - offsetLeft + 'px';
+			elem.style.top = e.clientY - offsetTop + 'px';
+		};
+
+		elem.addEventListener('mousedown', dragStart, false);
+	};
+
+	var PreviewControl = function PreviewControl() {
+
+		var dragging = false;
+		var valueX = null;
+		var valueY = null;
+
+		var dragStart = function dragStart(e) {
+			if (e.button !== 0)
+				return;
+
+			valueX = e.clientX - preview.clientWidth;
+			valueY = e.clientY - preview.clientHeight;
+			dragging = true;
+
+			document.addEventListener('mousemove', mouseDrag);
+		};
+
+		var dragEnd = function dragEnd(e) {
+			if (e.button !== 0 || dragging === false)
+				return;
+
+			document.removeEventListener('mousemove', mouseDrag);
+			dragging = false;
+		};
+
+		var mouseDrag = function mouseDrag(e) {
+			InputSliderManager.setValue('preview-width', e.clientX - valueX);
+			InputSliderManager.setValue('preview-height', e.clientY - valueY);
+		};
+
+		var init = function init() {
+
+			makeDraggable(preview);
+			makeDraggable(subject);
+
+			var handle = document.createElement('div');
+			handle.className = 'resize-handle';
+
+			handle.addEventListener('mousedown', dragStart);
+			document.addEventListener('mouseup', dragEnd);
+
+			preview.appendChild(handle);
+
+		};
+
+		return {
+			init: init
+		};
+
+	}();
+
+	var ImageReader = (function ImageReader() {
+
+		var fReader = new FileReader();
+		var browse = document.createElement('input');
+
+		var loadImage = function loadImage(e) {
+			if (browse.files.length === 0)
+				return;
+
+			var file = browse.files[0];
+
+			if (file.type.slice(0, 5) !== 'image')
+				return;
+
+			fReader.readAsDataURL(file);
+
+			return false;
+		};
+
+		fReader.onload = function(e) {
+			ImageControl.loadRemoteImage(e.target.result);
+		};
+
+		var load = function load() {
+			browse.click();
+		};
+
+		browse.setAttribute('type', 'file');
+		browse.style.display = 'none';
+		browse.onchange = loadImage;
+
+		return {
+			load: load
+		};
+
+	})();
+
+	var ImageControl = (function ImageControl() {
+
+		var scale = 0.5;
+		var imgSource = new Image();
+		var imgState = null;
+		var selected = null;
+
+
+		var topics = ['slice', 'width', 'outset'];
+		var properties = {};
+		properties['border1'] = {
+			fill			: false,
+
+			slice_values	: [27, 27, 27, 27],
+			width_values	: [20, 20, 20, 20],
+			outset_values	: [0, 0, 0, 0],
+
+			slice_units		: [0, 0, 0, 0],
+			width_units		: [0, 0, 0, 0],
+			outset_units	: [0, 0, 0, 0],
+
+			repeat			: [1, 1],
+			size			: [300, 200],
+			preview_area	: 400
+		};
+
+		properties['border2'] = {
+			fill			: false,
+
+			slice_values	: [33, 33, 33, 33],
+			width_values	: [1.5, 1.5, 1.5, 1.5],
+			outset_values	: [0, 0, 0, 0],
+
+			slice_units		: [1, 1, 1, 1],
+			width_units		: [2, 2, 2, 2],
+			outset_units	: [0, 0, 0, 0],
+
+			repeat			: [2, 2],
+			size			: [300, 200],
+			preview_area	: 400
+		};
+
+		properties['border3'] = {
+			fill			: true,
+
+			slice_values	: [15, 15, 15, 15],
+			width_values	: [10, 10, 10, 10],
+			outset_values	: [0, 0, 0, 0],
+
+			slice_units		: [0, 0, 0, 0],
+			width_units		: [0, 0, 0, 0],
+			outset_units	: [0, 0, 0, 0],
+
+			repeat			: [2, 2],
+			size			: [300, 200],
+			preview_area	: 400
+		};
+
+		properties['border4'] = {
+			fill			: false,
+
+			slice_values	: [13, 13, 13, 13],
+			width_values	: [13, 13, 13, 13],
+			outset_values	: [13, 13, 13, 13],
+
+			slice_units		: [0, 0, 0, 0],
+			width_units		: [0, 0, 0, 0],
+			outset_units	: [0, 0, 0, 0],
+
+			repeat			: [0, 0],
+			size			: [300, 200],
+			preview_area	: 400
+		};
+
+		properties['border5'] = {
+			fill			: false,
+
+			slice_values	: [0, 12, 0, 12],
+			width_values	: [0, 12, 0, 12],
+			outset_values	: [0, 0, 0, 0],
+
+			slice_units		: [0, 0, 0, 0],
+			width_units		: [0, 0, 0, 0],
+			outset_units	: [0, 0, 0, 0],
+
+			repeat			: [0, 0],
+			size			: [300, 200],
+			preview_area	: 400,
+		};
+
+		properties['border6'] = {
+			fill			: false,
+
+			slice_values	: [42, 42, 42, 42],
+			width_values	: [42, 42, 42, 42],
+			outset_values	: [0, 0, 0, 0],
+
+			slice_units		: [0, 0, 0, 0],
+			width_units		: [0, 0, 0, 0],
+			outset_units	: [0, 0, 0, 0],
+
+			repeat			: [2, 2],
+			size			: [350, 350],
+			preview_area	: 500,
+		};
+
+
+		var loadLocalImage = function loadLocalImage(source) {
+			var location = "images/" + source;
+			imgSource.src = location;
+		};
+
+		var loadRemoteImage = function loadRemoteImage(source) {
+			imgSource.src = source;
+			if (selected)
+				selected.removeAttribute('selected');
+			Tool.setOutputCSS('source', 'url("' + source + '")');
+		};
+
+		var pickImage = function pickImage(e) {
+			if (e.target.className === 'image') {
+				selected = e.target;
+				selected.setAttribute('selected', 'true');
+				loadRemoteImage(e.target.src);
+				imgState = e.target.getAttribute('data-stateID');
+			}
+		};
+
+		var loadImageState = function loadImageState(stateID) {
+			if (properties[stateID] === undefined)
+				return;
+
+			var prop = properties[stateID];
+			var topic;
+			var unit_array;
+			var value_array;
+
+			for (var i in topics) {
+				for (var j=0; j&lt;4; j++) {
+					topic = topics[i] + '-' + positions[j];
+					unit_array = topics[i] + '_units';
+					value_array = topics[i] + '_values';
+					InputSliderManager.setValue(topic, prop[value_array][j]);
+					DropDownManager.setValue(topic, prop[unit_array][j]);
+				}
+			}
+
+			ButtonManager.setValue('slice-fill', prop['fill']);
+			DropDownManager.setValue('image-repeat-X', prop['repeat'][0]);
+			DropDownManager.setValue('image-repeat-Y', prop['repeat'][1]);
+			InputSliderManager.setValue('preview-width', prop['size'][0]);
+			InputSliderManager.setValue('preview-height', prop['size'][1]);
+			InputSliderManager.setValue('preview-area-height', prop['preview_area']);
+		};
+
+		var update = function update() {
+			scale =  Math.min(300, (30000 / this.width) | 0);
+			setScale(scale);
+			InputSliderManager.setValue('scale', scale, false);
+
+			subject.style.backgroundImage = 'url("' + this.src + '")';
+			preview.style.borderImageSource = 'url("' + this.src + '")';
+
+			guidelines['slice-top'].setMax(this.height);
+			guidelines['slice-right'].setMax(this.width);
+			guidelines['slice-bottom'].setMax(this.height);
+			guidelines['slice-left'].setMax(this.width);
+
+			if (imgState)
+				loadImageState(imgState);
+		};
+
+		var setScale = function setScale(value) {
+			scale = value;
+			var w = imgSource.width * scale / 100 | 0;
+			var h = imgSource.height * scale / 100 | 0;
+			subject.style.width = w + 'px';
+			subject.style.height = h + 'px';
+
+			for (var i = 0; i &lt; positions.length; i++)
+				guidelines['slice-' + positions[i]].updateGuidelinePos();
+		};
+
+		var getScale = function getScale() {
+			return scale/100;
+		};
+
+		var toggleGallery = function toggleGallery() {
+			var gallery = getElemById('image-gallery');
+			var button  = getElemById('toggle-gallery');
+			var state = 1;
+			button.addEventListener('click', function() {
+				state = 1 ^ state;
+				if (state === 0) {
+					gallery.setAttribute('data-collapsed', 'true');
+					button.setAttribute('data-action', 'show');
+				}
+				else {
+					gallery.removeAttribute('data-collapsed');
+					button.setAttribute('data-action', 'hide');
+				}
+			});
+		};
+
+		var init = function init() {
+			var gallery = getElemById('image-gallery');
+			var browse = getElemById('load-image');
+			var remote = getElemById('remote-url');
+			var load_remote = getElemById('load-remote');
+
+			remote.addEventListener('change', function(){
+				loadRemoteImage(this.value);
+			});
+
+			load_remote.addEventListener('click', function(){
+				loadRemoteImage(remote.value);
+			});
+
+			browse.addEventListener('click', ImageReader.load);
+			gallery.addEventListener('click', pickImage);
+			imgSource.addEventListener('load', update);
+
+			InputSliderManager.subscribe('scale', setScale);
+			InputSliderManager.setValue('scale', scale);
+			imgState = 'border1';
+			loadRemoteImage('https://mdn.mozillademos.org/files/6007/border-image-1.png');
+			toggleGallery();
+		};
+
+		return {
+			init: init,
+			getScale : getScale,
+			loadRemoteImage: loadRemoteImage
+		};
+
+	})();
+
+	var GuideLine = function GuideLine(node) {
+		var topic = node.getAttribute('data-topic');
+		var axis = node.getAttribute('data-axis');
+
+		this.node = node;
+		this.topic = topic;
+		this.axis = axis;
+		this.info = topic.split('-')[1];
+
+		this.position = 0;
+		this.value = 0;
+		this.unit = 0;
+		this.max = 0;
+		this.pos = positions.indexOf(this.info);
+
+		guidelines[topic] = this;
+
+		var relative_container = document.createElement('div');
+		var tooltip = document.createElement('div');
+		var tooltip2 = document.createElement('div');
+
+		tooltip.className = 'tooltip';
+		tooltip.setAttribute('data-info', this.info);
+
+		tooltip2.className = 'tooltip2';
+		tooltip2.textContent = this.info;
+		tooltip2.setAttribute('data-info', this.info);
+
+		this.tooltip = tooltip;
+
+		relative_container.appendChild(tooltip);
+		relative_container.appendChild(tooltip2);
+		node.appendChild(relative_container);
+
+		var startX = 0;
+		var startY = 0;
+		var start = 0;
+
+		var startDrag = function startDrag(e) {
+			startX = e.clientX;
+			startY = e.clientY;
+			start = guidelines[topic].position;
+			document.body.setAttribute('data-move', axis);
+			relative_container.setAttribute('data-active', '');
+			node.setAttribute('data-active', '');
+
+			document.addEventListener('mousemove', updateGuideline);
+			document.addEventListener('mouseup', endDrag);
+		};
+
+		var endDrag = function endDrag() {
+			document.body.removeAttribute('data-move');
+			relative_container.removeAttribute('data-active');
+			node.removeAttribute('data-active');
+
+			document.removeEventListener('mousemove', updateGuideline);
+		};
+
+		var updateGuideline = function updateGuideline(e) {
+			var value;
+			if (topic === 'slice-top')
+				value = e.clientY - startY + start;
+
+			if (topic === 'slice-right')
+				value = startX - e.clientX + start;
+
+			if (topic === 'slice-bottom')
+				value = startY - e.clientY + start;
+
+			if (topic === 'slice-left')
+				value = e.clientX - startX + start;
+
+			if (this.unit === 0)
+				InputSliderManager.setValue(topic, value * 1 / ImageControl.getScale() | 0);
+			else {
+				InputSliderManager.setValue(topic, (value * 100 / (this.max * ImageControl.getScale())) | 0);
+			}
+
+		}.bind(this);
+
+		node.addEventListener("mousedown", startDrag);
+
+		InputSliderManager.subscribe(topic, this.setPosition.bind(this));
+		InputSliderManager.setValue(topic, this.position);
+	};
+
+
+	GuideLine.prototype.updateGuidelinePos = function updateGuidelinePos() {
+		if (this.unit === 0)
+			this.position = this.value * ImageControl.getScale() | 0;
+		else
+			this.position = this.value * this.max * ImageControl.getScale() / 100 | 0;
+
+		this.node.style[this.info] = this.position + 'px';
+	};
+
+	GuideLine.prototype.setPosition = function setPosition(value) {
+		this.value = value;
+		this.tooltip.textContent = value;
+		this.updateGuidelinePos();
+		Tool.setBorderSlice(this.pos, value);
+	};
+
+	GuideLine.prototype.setMax = function setMax(max) {
+		this.max = max;
+		this.updateLimit();
+	};
+
+	GuideLine.prototype.updateLimit = function updateLimit() {
+		if (this.unit === 1)
+			InputSliderManager.setMax(this.topic, 100);
+		else
+			InputSliderManager.setMax(this.topic, this.max);
+	};
+
+	GuideLine.prototype.setUnit = function setUnit(type) {
+		if (type === '%')	this.unit = 1;
+		if (type === '')	this.unit = 0;
+		this.updateLimit();
+	};
+
+	/*
+	 * Unit panel
+	 */
+	var UnitPanel = (function UnitPanel () {
+
+		var panel;
+		var title;
+		var precision;
+		var step;
+		var unit_topic = null; // settings are made for this topic
+		var step_option = [1, 0.1, 0.01];
+
+		var updatePrecision = function updatePrecision(value) {
+			InputSliderManager.setPrecision('unit-step', value);
+			InputSliderManager.setStep('unit-step', step_option[value]);
+			InputSliderManager.setMin('unit-step', step_option[value]);
+
+			if (unit_topic)
+				InputSliderManager.setPrecision(unit_topic, value);
+		};
+
+		var updateUnitSettings = function updateUnitSettings(value) {
+			if (unit_topic)
+				InputSliderManager.setStep(unit_topic, value);
+		};
+
+		var show = function show(e) {
+			var topic = e.target.getAttribute('data-topic');
+			var precision = InputSliderManager.getPrecision(topic);
+			var step = InputSliderManager.getStep(topic);
+
+			unit_topic = topic;
+			title.textContent = topic;
+
+			panel.setAttribute('data-active', 'true');
+			panel.style.top = e.target.offsetTop - 40 + 'px';
+			panel.style.left = e.target.offsetLeft + 30 + 'px';
+
+			InputSliderManager.setValue('unit-precision', precision);
+			InputSliderManager.setValue('unit-step', step);
+		};
+
+		var init = function init() {
+			panel = document.createElement('div');
+			title = document.createElement('div');
+			var close = document.createElement('div');
+
+			step = InputSliderManager.createSlider('unit-step', 'step');
+			precision = InputSliderManager.createSlider('unit-precision', 'precision');
+
+			InputSliderManager.setStep('unit-precision', 1);
+			InputSliderManager.setMax('unit-precision', 2);
+			InputSliderManager.setValue('unit-precision', 2);
+			InputSliderManager.setSensivity('unit-precision', 20);
+
+			InputSliderManager.setValue('unit-step', 1);
+			InputSliderManager.setStep('unit-step', 0.01);
+			InputSliderManager.setPrecision('unit-step', 2);
+
+			InputSliderManager.subscribe('unit-precision', updatePrecision);
+			InputSliderManager.subscribe('unit-step', updateUnitSettings);
+
+			close.addEventListener('click', function () {
+				panel.setAttribute('data-active', 'false');
+			});
+
+			title.textContent = 'Properties';
+			title.className = 'title';
+			close.className = 'close';
+			panel.id = 'unit-settings';
+			panel.setAttribute('data-active', 'false');
+			panel.appendChild(title);
+			panel.appendChild(precision);
+			panel.appendChild(step);
+			panel.appendChild(close);
+			document.body.appendChild(panel);
+		};
+
+		return {
+			init : init,
+			show : show
+		};
+
+	})();
+
+	/**
+	 * Tool Manager
+	 */
+	var Tool = (function Tool() {
+		var preview_area;
+		var dropdown_unit_options = [
+			{ '' : '--', '%' : '%'},
+			{ 'px' : 'px', '%' : '%', 'em' : 'em'},
+			{ 'px' : 'px', 'em' : 'em'},
+		];
+
+		var border_slice = [];
+		var border_width = [];
+		var border_outset = [];
+
+		var border_slice_values = [];
+		var border_width_values = [];
+		var border_outset_values = [];
+
+		var border_slice_units = ['', '', '', ''];
+		var border_width_units = ['px', 'px', 'px', 'px'];
+		var border_outset_units = ['px', 'px', 'px', 'px'];
+
+		var border_fill = false;
+		var border_repeat = ['round', 'round'];
+		var CSS_code = {
+			'source' : null,
+			'slice' : null,
+			'width' : null,
+			'outset' : null,
+			'repeat' : null
+		};
+
+		var setBorderSlice = function setBorderSlice(positionID, value) {
+			border_slice[positionID] = value + border_slice_units[positionID];
+			updateBorderSlice();
+		};
+
+		var updateBorderSlice = function updateBorderSlice() {
+			var value = border_slice.join(' ');
+			if (border_fill === true)
+				value += ' fill';
+
+			preview.style.borderImageSlice = value;
+			setOutputCSS('slice', value);
+		};
+
+		var setBorderFill = function setBorderFill(value) {
+			border_fill = value;
+			var bimgslice = border_slice.join(' ');;
+			if (value === true)
+				bimgslice += ' fill';
+
+			preview.style.borderImageSlice = bimgslice;
+		};
+
+		var updateBorderWidth = function updateBorderWidth() {
+			var value = border_width.join(' ');
+			preview.style.borderImageWidth = value;
+			setOutputCSS('width', value);
+		};
+
+		var updateBorderOutset = function updateBorderOutset() {
+			var value = border_outset.join(' ');
+			preview.style.borderImageOutset = border_outset.join(' ');
+			setOutputCSS('outset', value);
+		};
+
+		var setBorderRepeat = function setBorderRepeat(obj) {
+			border_repeat[obj.value] = obj.name;
+			var value = border_repeat.join(' ');
+			preview.style.borderImageRepeat = value;
+			setOutputCSS('repeat', value);
+		};
+
+		var setOutputCSS = function setOutputCSS(topic, value) {
+			CSS_code[topic].textContent = value + ';';
+		};
+
+		var setPreviewFontSize = function setPreviewFontSize(value) {
+			preview.style.fontSize = value + 'px';
+		};
+
+		var setPreviewWidth = function setPreviewWidth(value) {
+			preview.style.width = value + 'px';
+		};
+
+		var setPreviewHeight = function setPreviewHeight(value) {
+			preview.style.height = value + 'px';
+		};
+
+		var setPreviewAreaHeight = function setPreviewAreaHeight(value) {
+			preview_area.style.height = value + 'px';
+		};
+
+		var updateDragOption = function updateDragOption(value) {
+			if (value === true)
+				subject.setAttribute('data-draggable', 'true');
+			else
+				subject.removeAttribute('data-draggable');
+		};
+
+		var createProperty = function createProperty(topic, labelID, optionsID) {
+
+			var slider = InputSliderManager.createSlider(topic, positions[labelID]);
+			var dropdown = DropDownManager.createDropDown(topic, dropdown_unit_options[optionsID]);
+
+			InputSliderManager.setSensivity(topic, 3);
+			InputSliderManager.setPrecision(topic, 1);
+
+			var property = document.createElement('div');
+			var config = document.createElement('div');
+
+			property.className = 'property';
+			config.className = 'config';
+			config.setAttribute('data-topic', topic);
+			config.addEventListener('click', UnitPanel.show);
+
+			property.appendChild(slider);
+			property.appendChild(dropdown);
+			property.appendChild(config);
+
+			return property;
+		};
+
+		var initBorderSliceControls = function initBorderSliceControls() {
+			var container = getElemById('border-slice-control');
+
+			var listenForChanges = function listenForChanges(topic, id) {
+				InputSliderManager.subscribe(topic, function(value) {
+					border_slice_values[id] = value;
+					border_slice[id] = value + border_slice_units[id];
+					updateBorderSlice();
+				});
+
+				DropDownManager.subscribe(topic, function(obj) {
+					guidelines[topic].setUnit(obj.value);
+					border_slice_units[id] = obj.value;
+					border_slice[id] = border_slice_values[id] + obj.value;
+					updateBorderSlice();
+				});
+			};
+
+			for (var i = 0; i &lt; positions.length; i++) {
+				var topic = 'slice-' + positions[i];
+				var property = createProperty(topic, i, 0);
+				listenForChanges(topic, i);
+
+				container.appendChild(property);
+			}
+
+			container.appendChild(container.children[1]);
+
+		};
+
+		var initBorderWidthControls = function initBorderWidthControls() {
+			var container = getElemById('border-width-control');
+
+			var listenForChanges = function listenForChanges(topic, id) {
+				InputSliderManager.subscribe(topic, function(value) {
+					border_width_values[id] = value;
+					border_width[id] = value + border_width_units[id];
+					updateBorderWidth();
+				});
+
+				DropDownManager.subscribe(topic, function(obj) {
+					if (obj.value === '%')
+						InputSliderManager.setMax(topic, 100);
+					else
+						InputSliderManager.setMax(topic, 1000);
+
+					border_width_units[id] = obj.value;
+					border_width[id] = border_width_values[id] + obj.value;
+					updateBorderWidth();
+				});
+			};
+
+			for (var i = 0; i &lt; positions.length; i++) {
+				var topic = 'width-' + positions[i];
+				var property = createProperty(topic, i, 1);
+				InputSliderManager.setMax(topic, 1000);
+				listenForChanges(topic, i);
+
+				container.appendChild(property);
+			}
+		};
+
+		var initBorderOutsetControls = function initBorderOutsetControls() {
+
+			var container = getElemById('border-outset-control');
+
+			var listenForChanges = function listenForChanges(topic, id) {
+				InputSliderManager.subscribe(topic, function(value) {
+					border_outset_values[id] = value;
+					border_outset[id] = value + border_outset_units[id];
+					updateBorderOutset();
+				});
+
+				DropDownManager.subscribe(topic, function(obj) {
+					border_outset_units[id] = obj.value;
+					border_outset[id] = border_outset_values[id] + obj.value;
+					updateBorderOutset();
+				});
+			};
+
+			for (var i = 0; i &lt; positions.length; i++) {
+				var topic = 'outset-' + positions[i];
+				var property = createProperty(topic, i, 2);
+				InputSliderManager.setMax(topic, 1000);
+				listenForChanges(topic, i);
+
+				container.appendChild(property);
+			}
+		};
+
+		var init = function init() {
+
+			var gallery =
+			subject = getElemById('subject');
+			preview = getElemById("preview");
+			preview_area = getElemById("preview_section");
+
+
+			CSS_code['source'] = getElemById("out-border-source");
+			CSS_code['slice'] = getElemById("out-border-slice");
+			CSS_code['width'] = getElemById("out-border-width");
+			CSS_code['outset'] = getElemById("out-border-outset");
+			CSS_code['repeat'] = getElemById("out-border-repeat");
+
+			initBorderSliceControls();
+			initBorderWidthControls();
+			initBorderOutsetControls();
+
+			var elem = document.querySelectorAll('.guideline');
+			var size = elem.length;
+			for (var i = 0; i &lt; size; i++)
+				new GuideLine(elem[i]);
+
+			PreviewControl.init();
+
+			ButtonManager.subscribe('slice-fill',setBorderFill);
+			ButtonManager.subscribe('drag-subject', updateDragOption);
+			ButtonManager.setValue('drag-subject', false);
+
+			DropDownManager.subscribe('image-repeat-X', setBorderRepeat);
+			DropDownManager.subscribe('image-repeat-Y', setBorderRepeat);
+
+			InputSliderManager.subscribe('preview-area-height', setPreviewAreaHeight);
+			InputSliderManager.subscribe('preview-width', setPreviewWidth);
+			InputSliderManager.subscribe('preview-height', setPreviewHeight);
+			InputSliderManager.subscribe('font-size', setPreviewFontSize);
+			InputSliderManager.setValue('preview-width', 300);
+			InputSliderManager.setValue('preview-height', 200);
+		};
+
+		return {
+			init: init,
+			setOutputCSS: setOutputCSS,
+			setBorderSlice: setBorderSlice
+		};
+
+	})();
+
+	/**
+	 * Init Tool
+	 */
+	var init = function init() {
+		InputSliderManager.init();
+		DropDownManager.init();
+		ButtonManager.init();
+		UnitPanel.init();
+		Tool.init();
+		ImageControl.init();
+	};
+
+	return {
+		init : init
+	};
+
+})();
+
+</pre>
+</div>
+
+<div>{{ EmbedLiveSample('Border_Image_Generator', '100%', '1270px') }}</div>
+
+<p> </p>
diff --git a/files/ja/web/css/css_backgrounds_and_borders/border-image_generator/index.md b/files/ja/web/css/css_backgrounds_and_borders/border-image_generator/index.md
new file mode 100644
index 0000000000..a986269354
--- /dev/null
+++ b/files/ja/web/css/css_backgrounds_and_borders/border-image_generator/index.md
@@ -0,0 +1,11 @@
+---
+title: 境界画像作成ツール
+slug: Web/CSS/CSS_Backgrounds_and_Borders/Border-image_generator
+tags:
+  - CSS
+  - ツール
+translation_of: Web/CSS/CSS_Backgrounds_and_Borders/Border-image_generator
+---
+このツールを使用して、 CSS3 の {{cssxref("border-image")}} の値を作成できます。
+
+{{EmbedGHLiveSample("css-examples/tools/border-image-generator/", '100%', 1200)}}
diff --git a/files/ja/web/css/css_backgrounds_and_borders/border-radius_generator/index.html b/files/ja/web/css/css_backgrounds_and_borders/border-radius_generator/index.html
new file mode 100644
index 0000000000..cec4217518
--- /dev/null
+++ b/files/ja/web/css/css_backgrounds_and_borders/border-radius_generator/index.html
@@ -0,0 +1,1603 @@
+---
+title: Border-radius ジェネレーター
+slug: Web/CSS/CSS_Backgrounds_and_Borders/Border-radius_generator
+tags:
+  - CSS
+  - CSS Borders
+  - CSS 境界と背景
+  - Tools
+translation_of: Web/CSS/CSS_Background_and_Borders/Border-radius_generator
+original_slug: Web/CSS/CSS_Background_and_Borders/Border-radius_generator
+---
+<p>このツールは CSS3 の {{cssxref("border-radius")}} の効果を生成するために使用することができます。</p>
+
+<div class="hidden">
+<h2 id="border-radius-generator" name="border-radius-generator">border-radius</h2>
+
+<h3 id="HTML_Content" name="HTML_Content">HTML Content</h3>
+
+<pre class="brush: html">&lt;div id="container"&gt;
+    &lt;div class="group section"&gt;
+        &lt;div id="preview" class="col span_12"&gt;
+            &lt;div id="subject"&gt;
+                &lt;div id="top-left" class="radius-container"
+                    data-X="left" data-Y="top"&gt;
+                &lt;/div&gt;
+                &lt;div id="top-right" class="radius-container"
+                    data-X="right" data-Y="top"&gt;
+                &lt;/div&gt;
+                &lt;div id="bottom-right" class="radius-container"
+                    data-X="right" data-Y="bottom"&gt;
+                &lt;/div&gt;
+                &lt;div id="bottom-left" class="radius-container"
+                    data-X="left" data-Y="bottom"&gt;
+                &lt;/div&gt;
+
+                &lt;div id="radius-ui-sliders"&gt;
+                    &lt;div id="tlr" class="ui-input-slider" data-topic="top-left"
+                         data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
+
+                    &lt;div id="tlw" class="ui-input-slider" data-topic="top-left-w"
+                         data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
+
+                    &lt;div id="tlh" class="ui-input-slider" data-topic="top-left-h"
+                        data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
+
+                    &lt;div id="trr" class="ui-input-slider" data-topic="top-right"
+                         data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
+
+                    &lt;div id="trw" class="ui-input-slider" data-topic="top-right-w"
+                         data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
+
+                    &lt;div id="trh" class="ui-input-slider" data-topic="top-right-h"
+                        data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
+
+                    &lt;div id="brr" class="ui-input-slider" data-topic="bottom-right"
+                         data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
+
+                    &lt;div id="brw" class="ui-input-slider" data-topic="bottom-right-w"
+                         data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
+
+                    &lt;div id="brh" class="ui-input-slider" data-topic="bottom-right-h"
+                        data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
+
+                    &lt;div id="blr" class="ui-input-slider" data-topic="bottom-left"
+                         data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
+
+                    &lt;div id="blw" class="ui-input-slider" data-topic="bottom-left-w"
+                         data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
+
+                    &lt;div id="blh" class="ui-input-slider" data-topic="bottom-left-h"
+                        data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
+                &lt;/div&gt;
+            &lt;/div&gt;
+        &lt;/div&gt;
+    &lt;/div&gt;
+    &lt;div id="controls" class="group section"&gt;
+
+        &lt;div class="group section"&gt;
+            &lt;div id="dimensions"&gt;
+                &lt;div class="ui-input-slider" data-topic="width" data-info="width"
+                     data-unit=" px" data-min="150" data-max="700" data-sensivity="1"&gt;&lt;/div&gt;
+
+                &lt;div class="ui-input-slider" data-topic="height" data-info="height"
+                    data-unit=" px" data-min="75" data-max="350" data-sensivity="1"&gt;&lt;/div&gt;
+            &lt;/div&gt;
+
+            &lt;div id="output"&gt;&lt;/div&gt;
+        &lt;/div&gt;
+
+        &lt;div class="group section"&gt;
+            &lt;div id="radius-lock"&gt;
+                &lt;div class="info"&gt; 丸いコーナー &lt;/div&gt;
+                &lt;div class="ui-checkbox" data-topic='top-left'&gt;&lt;/div&gt;
+                &lt;div class="ui-checkbox" data-topic='top-right'&gt;&lt;/div&gt;
+                &lt;div class="ui-checkbox" data-topic='bottom-right'&gt;&lt;/div&gt;
+                &lt;div class="ui-checkbox" data-topic='bottom-left'&gt;&lt;/div&gt;
+            &lt;/div&gt;
+
+            &lt;div id="unit-selection"&gt;
+                &lt;div class="info"&gt; 境界の単位を選択 &lt;/div&gt;
+            &lt;/div&gt;
+        &lt;/div&gt;
+
+    &lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="CSS_Content" name="CSS_Content">CSS Content</h3>
+
+<pre class="brush: css">/*  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 &gt; 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 &gt; input {
+ 	display: none;
+}
+
+.ui-checkbox &gt; 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 &gt; label:hover {
+	cursor: pointer;
+}
+
+.ui-checkbox &gt; 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 &gt; 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;
+}
+
+
+</pre>
+
+<h3 id="JavaScript_Content" name="JavaScript_Content">JavaScript Content</h3>
+
+<pre class="brush: js"><code class="language-js">'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 &gt; 0 ? max : 100;
+		this.step = step === 0 ? 1 : step;
+		this.topic = topic;
+		this.node = node;
+		this.unit = unit;
+		this.sensivity = sensivity &gt; 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 &gt; slider.max) value = slider.max;
+		if (value &lt; slider.min)	value = slider.min;
+
+		slider.value = value;
+		slider.node.setAttribute('data-value', value);
+
+		if (send_notify !== undefined &amp;&amp; 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 &lt; 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 &lt; 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 &lt; 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' &amp;&amp; y == 'top') handle.className = 'handle handle-top-left'
+		if (x === 'right' &amp;&amp; y == 'top') handle.className = 'handle handle-top-right';
+		if (x === 'right' &amp;&amp; y == 'bottom') handle.className = 'handle handle-bottom-right';
+		if (x === 'left' &amp;&amp; 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 &amp;&amp; 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 &lt; 0)	this.size = 0;
+			if (this.size &gt; this.maxR)	this.size = this.maxR;
+			this.updateRadius();
+			this.updateBorderRadius();
+			return;
+		}
+
+		if (deltaX) {
+			this.width += this.resizeX * deltaX;
+			if (this.width &lt; 0)	this.width = 0;
+			if (this.width &gt; this.maxW)	this.width = this.maxW;
+			this.updateWidth();
+		}
+
+		if (deltaY) {
+			this.height += this.resizeY * deltaY;
+			if (this.height &lt; 0) this.height = 0;
+			if (this.height &gt; 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 &lt; 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 &lt; 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 &lt; 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
+	}
+
+})();
+
+
+</code></pre>
+</div>
+
+<div>{{ EmbedLiveSample('border-radius-generator', 700, 900) }}</div>
diff --git a/files/ja/web/css/css_backgrounds_and_borders/border-radius_generator/index.md b/files/ja/web/css/css_backgrounds_and_borders/border-radius_generator/index.md
new file mode 100644
index 0000000000..878cf642be
--- /dev/null
+++ b/files/ja/web/css/css_backgrounds_and_borders/border-radius_generator/index.md
@@ -0,0 +1,12 @@
+---
+title: 境界角丸作成ツール
+slug: Web/CSS/CSS_Backgrounds_and_Borders/Border-radius_generator
+tags:
+  - CSS
+  - CSS Borders
+  - Tools
+translation_of: Web/CSS/CSS_Backgrounds_and_Borders/Border-radius_generator
+---
+このツールを使用して、 CSS3 の {{cssxref("border-radius")}} の効果を生成することができます。
+
+{{EmbedGHLiveSample("css-examples/tools/border-radius-generator/", '100%', 900)}}
diff --git a/files/ja/web/css/css_backgrounds_and_borders/box-shadow_generator/index.md b/files/ja/web/css/css_backgrounds_and_borders/box-shadow_generator/index.md
new file mode 100644
index 0000000000..963bf61cb4
--- /dev/null
+++ b/files/ja/web/css/css_backgrounds_and_borders/box-shadow_generator/index.md
@@ -0,0 +1,32 @@
+---
+title: ボックスの影作成ツール
+slug: Web/CSS/CSS_Backgrounds_and_Borders/Box-shadow_generator
+tags:
+  - CSS
+  - Tools
+  - box-shadow
+translation_of: Web/CSS/CSS_Backgrounds_and_Borders/Box-shadow_generator
+---
+このツールで CSS の {{cssxref("box-shadow")}} 効果を組み立てて、 CSS オブジェクトにボックスの影の効果を追加することができます。
+
+{{EmbedGHLiveSample("css-examples/tools/box-shadow-generator/", '100%', 900)}}
+
+ボックスの影作成ツールは、 1 つまたは複数のボックスの影を要素に追加することができます。
+
+ツールを開くと、右上の部分に四角形があります。これがシャドウを適用する対象となる要素です。この要素が選択されている状態 (ページを最初に読み込んだときの状態) では、基本的なスタイルを適用することができます。
+
+- カラーピッカーツールを使って、要素の {{cssxref("color")}} を設定しましょう。
+- "border" チェックボックスを使って、要素の {{cssxref("border")}} をつけましょう。
+- スライダーを使って、要素の {{cssxref("top")}}, {{cssxref("left")}}, {{cssxref("width")}}, {{cssxref("height")}} の各プロパティを設定しましょう。
+
+ボックスの影を追加するには、左上の「+」ボタンをクリックしてください。これで影を追加し、左側の列に並べます。それで新しい影の値を設定することができるようになります。
+
+- カラーピッカーツールを使って、影の {{cssxref("color")}} を設定しましょう。
+- "inset" チェックボックスを使って、影が内側になるようにしましょう。
+- スライダーを使って、影の位置、ぼかし、広がりを設定しましょう。
+
+他の影を追加するには、「+」をまたクリックしてください。ここで設定した値は、この新しい影にも適用されます。左上の↑と↓のボタンで、 2 つの影の適用順を変更します。左側の列で最初の影をクリックして再度選択してください。要素のスタイルを更新するには、要素を選択し、上部にある「element」というボタンをクリックします。
+
+要素に {{cssxref("::before")}} と {{cssxref("::after")}} の擬似要素を追加して、ボックスの影を付けることもできます。要素とその擬似要素を切り替えるには、上部にある「element」「:before」「:after」と書かれたボタンを使います。
+
+右下のボックスには、要素と `before::` または `::after` 擬似要素の CSS が表示されます。
diff --git a/files/ja/web/css/css_backgrounds_and_borders/index.html b/files/ja/web/css/css_backgrounds_and_borders/index.html
index 6e43c5ab15..43b9ab080f 100644
--- a/files/ja/web/css/css_backgrounds_and_borders/index.html
+++ b/files/ja/web/css/css_backgrounds_and_borders/index.html
@@ -74,11 +74,11 @@ translation_of: Web/CSS/CSS_Backgrounds_and_Borders
  <dd>背景画像の拡大縮小や繰り返しを変更する方法を説明します。</dd>
  <dt><a href="/ja/docs/Web/HTML/Applying_color">CSS を使った HTML の要素への色の適用</a></dt>
  <dd>CSS の色が境界を含む HTML でどのように使われるかを概観します。</dd>
- <dt><a href="/ja/docs/Web/CSS/CSS_Background_and_Borders/Border-image_generator">境界画像作成ツール</a></dt>
+ <dt><a href="/ja/docs/Web/CSS/CSS_Backgrounds_and_Borders/Border-image_generator">境界画像作成ツール</a></dt>
  <dd>境界画像 ({{cssxref("border-image")}} プロパティ) を見ながら作ることができる対話型のツールです。</dd>
- <dt><a href="/ja/docs/Web/CSS/CSS_Background_and_Borders/Border-radius_generator">境界角丸作成ツール</a></dt>
+ <dt><a href="/ja/docs/Web/CSS/CSS_Backgrounds_and_Borders/Border-radius_generator">境界角丸作成ツール</a></dt>
  <dd>角の丸み ({{cssxref("border-radius")}} プロパティ) を見ながら作ることができる対話型のツールです。</dd>
- <dt><a href="/ja/docs/Web/CSS/CSS_Box_Model/Box-shadow_generator">ボックスの影作成ツール</a></dt>
+ <dt><a href="/ja/docs/Web/CSS/CSS_Backgrounds_and_Borders/Box-shadow_generator">ボックスの影作成ツール</a></dt>
  <dd>要素の背後の影 ({{cssxref("box-shadow")}} プロパティ) を見ながら作ることができる対話型のツールです。</dd>
 </dl>
 
diff --git a/files/ja/web/css/css_flow_layout/index.html b/files/ja/web/css/css_flow_layout/index.html
index a16c0cbd4f..3021ce3f4a 100644
--- a/files/ja/web/css/css_flow_layout/index.html
+++ b/files/ja/web/css/css_flow_layout/index.html
@@ -43,7 +43,7 @@ translation_of: Web/CSS/CSS_Flow_Layout
  <li>{{Glossary("Block/CSS", "ブロック (CSS)")}}</li>
 </ul>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li><a href="/ja/docs/Web/CSS"><strong>CSS</strong></a></li>
  <li><a href="/ja/docs/Web/CSS/Reference"><strong>CSS リファレンス</strong></a></li>
diff --git a/files/ja/web/css/css_grid_layout/auto-placement_in_css_grid_layout/index.html b/files/ja/web/css/css_grid_layout/auto-placement_in_css_grid_layout/index.html
index b6a71891c9..118bc26766 100644
--- a/files/ja/web/css/css_grid_layout/auto-placement_in_css_grid_layout/index.html
+++ b/files/ja/web/css/css_grid_layout/auto-placement_in_css_grid_layout/index.html
@@ -554,7 +554,7 @@ dd {
 
 <p>It may be that you come up with your own use cases for auto-placement or any other part of grid layout. If you do, raise them as issues or add to an existing issue that could solve your use case. This will help to make future versions of the specification better.</p>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li><a href="/ja/docs/Web/CSS"><strong>CSS</strong></a></li>
  <li><a href="/ja/docs/Web/CSS/Reference"><strong>CSS リファレンス</strong></a></li>
diff --git a/files/ja/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html b/files/ja/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html
index 0037394932..667917d069 100644
--- a/files/ja/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html
+++ b/files/ja/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html
@@ -664,7 +664,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout
 
 <h2 id="Subnav">Subnav</h2>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li><a href="/ja/docs/Web/CSS"><strong>CSS</strong></a></li>
  <li><a href="/ja/docs/Web/CSS/Reference"><strong>CSS リファレンス</strong></a></li>
diff --git a/files/ja/web/css/css_grid_layout/box_alignment_in_css_grid_layout/index.html b/files/ja/web/css/css_grid_layout/box_alignment_in_css_grid_layout/index.html
index 536a0e931a..3f83a21dbd 100644
--- a/files/ja/web/css/css_grid_layout/box_alignment_in_css_grid_layout/index.html
+++ b/files/ja/web/css/css_grid_layout/box_alignment_in_css_grid_layout/index.html
@@ -648,7 +648,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout
 
 <p><code>margin-right</code> または <code>margin-left</code> で自動マージンを使用した場合、および <code>top</code> 、<code>right</code> 、<code>bottom</code> 、<code>left</code> を使って位置を絶対指定した場合、書字方向が尊重されません。次のガイドでは、CSS グリッドレイアウト・ボックス配置と書字方向の間における相互作用を見ていきます。複数の言語で表示するサイトを開発したり、言語や書字方向を混ぜたサイトをデザインするなら、非常に役立つでしょう。</p>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li><a href="/ja/docs/Web/CSS"><strong>CSS</strong></a></li>
  <li><a href="/ja/docs/Web/CSS/Reference"><strong>CSS リファレンス</strong></a></li>
diff --git a/files/ja/web/css/css_grid_layout/index.html b/files/ja/web/css/css_grid_layout/index.html
index 77237096cf..59e1592ef5 100644
--- a/files/ja/web/css/css_grid_layout/index.html
+++ b/files/ja/web/css/css_grid_layout/index.html
@@ -206,7 +206,7 @@ translation_of: Web/CSS/CSS_Grid_Layout
 
 <h2 id="Subnav">Subnav</h2>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li><a href="/ja/docs/Web/CSS"><strong>CSS</strong></a></li>
  <li><a href="/ja/docs/Web/CSS/Reference"><strong>CSS リファレンス</strong></a></li>
diff --git a/files/ja/web/css/css_grid_layout/layout_using_named_grid_lines/index.html b/files/ja/web/css/css_grid_layout/layout_using_named_grid_lines/index.html
index 6358de6b22..5f67402f98 100644
--- a/files/ja/web/css/css_grid_layout/layout_using_named_grid_lines/index.html
+++ b/files/ja/web/css/css_grid_layout/layout_using_named_grid_lines/index.html
@@ -436,7 +436,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines
 
 <p>That’s all I need. I don’t need to do any calculations, grid automatically removed my 10 pixel gutter track before assigning the space to the <code>1fr</code> column tracks. As you start to build out your own layouts, you will find that the syntax becomes more familiar and you choose the ways that work best for you and the type of projects you like to build. Try building some common patterns with these various methods, and you will soon find your most productive way to work. Then, in the next guide we will look at how grid can position items for us - without us needing to use placement properties at all!</p>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li><a href="/ja/docs/Web/CSS"><strong>CSS</strong></a></li>
  <li><a href="/ja/docs/Web/CSS/Reference"><strong>CSS リファレンス</strong></a></li>
diff --git a/files/ja/web/css/css_grid_layout/relationship_of_grid_layout/index.html b/files/ja/web/css/css_grid_layout/relationship_of_grid_layout/index.html
index 2650339665..476cf929bf 100644
--- a/files/ja/web/css/css_grid_layout/relationship_of_grid_layout/index.html
+++ b/files/ja/web/css/css_grid_layout/relationship_of_grid_layout/index.html
@@ -574,7 +574,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout
  <li><a href="/ja/docs/Web/CSS/CSS_Columns">段組みレイアウトガイド</a></li>
 </ul>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li><a href="/ja/docs/Web/CSS"><strong>CSS</strong></a></li>
  <li><a href="/ja/docs/Web/CSS/Reference"><strong>CSS リファレンス</strong></a></li>
diff --git a/files/ja/web/css/filter/index.html b/files/ja/web/css/filter/index.html
deleted file mode 100644
index 35e7ac52bf..0000000000
--- a/files/ja/web/css/filter/index.html
+++ /dev/null
@@ -1,1138 +0,0 @@
----
-title: filter
-slug: Web/CSS/filter
-tags:
-  - CSS
-  - CSS プロパティ
-  - Reference
-  - SVG
-  - SVG フィルター
-  - filter
-  - フィルター効果
-translation_of: Web/CSS/filter
----
-<div>{{CSSRef}}</div>
-
-<p><span class="seoSummary"><strong><code>filter</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、ぼかしや色変化などのグラフィック効果を要素に適用します。フィルターは画像、背景、境界の描画を調整するためによく使われます。</span></p>
-
-<p>CSS 標準に含まれているものは、定義済みの効果を実現するためのいくつかの関数です。 <a href="/ja/docs/Web/SVG/Element/filter">SVG フィルター要素</a>への URL で SVG フィルターを参照することもできます。</p>
-
-<div>{{EmbedInteractiveExample("pages/css/filter.html")}}</div>
-
-<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>
-
-<h2 id="Syntax" name="Syntax">構文</h2>
-
-<pre class="brush:css no-line-numbers notranslate">/* SVG フィルターへの URL */
-filter: url("filters.svg#filter-id");
-
-/* &lt;filter-function&gt; 値 */
-filter: blur(5px);
-filter: brightness(0.4);
-filter: contrast(200%);
-filter: drop-shadow(16px 16px 20px blue);
-filter: grayscale(50%);
-filter: hue-rotate(90deg);
-filter: invert(75%);
-filter: opacity(25%);
-filter: saturate(30%);
-filter: sepia(60%);
-
-/* 複数のフィルター */
-filter: contrast(175%) brightness(3%);
-
-/* フィルターを使用しない */
-filter: none;
-
-/* グローバル値 */
-filter: inherit;
-filter: initial;
-filter: unset;
-</pre>
-
-<p>次のように関数と共に使用してください。</p>
-
-<pre class="syntaxbox notranslate">filter: &lt;filter-function&gt; [&lt;filter-function&gt;]* | none
-</pre>
-
-<p>SVG の {{SVGElement("filter")}} 要素への参照の場合は、次のようにしてください。</p>
-
-<pre class="syntaxbox notranslate">filter: url(file.svg#filter-element-id)
-</pre>
-
-<h3 id="Interpolation" name="Interpolation">補間</h3>
-
-<p>最初のフィルターと最後のフィルターの両方が同じ長さの関数リストであり、 {{cssxref("&lt;url&gt;")}} を持たない場合、それぞれのフィルター関数はその固有の規則に従って補間されます。長さが異なる場合は、長い方のリストから欠落している等価なフィルター関数が、空白値を使って短い方のリストの最後に追加され、すべてのフィルター関数がその固有の規則に従って補間されます。一方のフィルターが <code>none</code> である場合は、フィルター関数の既定値を用いて、もう一方のフィルター関数のリストに置き換えられ、すべてのフィルター関数がその固有の規則に従って補間されます。それ以外の場合は、離散補間が使用されます。</p>
-
-<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
-
-{{csssyntax}}
-
-<h2 id="Examples" name="Examples">例</h2>
-
-<p>定義済み関数を使用した例が以下にあります。個別の例についてはそれぞれの関数を参照してください。</p>
-
-<pre class="brush: css notranslate">.mydiv {
-  filter: grayscale(50%);
-}
-
-/* Gray all images by 50% and blur by 10px */
-img {
-  filter: grayscale(0.5) blur(10px);
-}</pre>
-
-<p>URL 関数を使用して SVG リソースを使用した例は以下の通りです。</p>
-
-<pre class="brush: css notranslate">.target {
-  filter: url(#c1);
-}
-
-.mydiv {
-  filter: url(commonfilters.xml#large-blur);
-}
-</pre>
-
-<h2 id="Functions" name="Functions">関数</h2>
-
-<p><code>filter</code> プロパティは <code>none</code> または以下にある関数を一つ以上使って指定します。いずれかの関数の引数が妥当でない場合、関数は <code>none</code> を返します。特に示す場合を除いて、パーセント記号付きの値 (<code>34%</code> など) を取る関数は、10進数の値 (<code>0.34</code> など) も受け付けます。</p>
-
-<p>単一の <code>filter</code> プロパティに2つ以上の関数を指定した場合、同じフィルター関数を2つ以上の <code>filter</code> プロパティに別々に適用した場合とは異なる結果になります。</p>
-
-<h3 id="SVG_filter" name="SVG_filter">SVG フィルター</h3>
-
-<h4 id="url">url()</h4>
-
-<p>外部 XML ファイルに埋め込むことができる <a href="/ja/docs/Web/SVG/Element/filter">SVG フィルター</a>を指す URI を取ります。</p>
-
-<pre class="brush: css notranslate">filter: url(resources.svg#c1)
-</pre>
-
-<h3 id="Filter_functions" name="Filter_functions">フィルター関数</h3>
-
-<h4 id="blur">blur()</h4>
-
-<p>{{cssxref("filter-function/blur", "blur()")}} 関数は、入力画像にガウスぼかしを適用します。 <code>radius</code> の値は、ガウス関数の標準偏差の値、つまり画面上のいくつのピクセルが互いに溶け込むかを定義します。補間のための空白値は <code>0</code> です。 この引数は CSS の長さとして指定されますが、パーセント値は受け付けません。</p>
-
-<pre class="brush: css notranslate">filter: blur(5px)
-</pre>
-
-<div id="blur_example" class="hidden">
-<pre class="brush: html notranslate">  &lt;table class="standard-table"&gt;
-  &lt;thead&gt;
-    &lt;tr&gt;
-      &lt;th style="text-align: left;" scope="col"&gt;元の画像&lt;/th&gt;
-      &lt;th style="text-align: left;" scope="col"&gt;ライブ例&lt;/th&gt;
-      &lt;th style="text-align: left;" scope="col"&gt;同等の SVG&lt;/th&gt;
-      &lt;th style="text-align: left;" scope="col"&gt;画像による例&lt;/th&gt;
-    &lt;/tr&gt;
-  &lt;/thead&gt;
-  &lt;tbody&gt;
-    &lt;tr&gt;
-      &lt;td&gt;&lt;img alt="Test_Form.jpg" id="img1" class="internal default" src="/files/3710/Test_Form_2.jpg" style="width: 100%;" /&gt;&lt;/td&gt;
-      &lt;td&gt;&lt;img alt="Test_Form.jpg" id="img2" class="internal default" src="/files/3710/Test_Form_2.jpg" style="width: 100%;" /&gt;&lt;/td&gt;
-      &lt;td&gt;
-        &lt;div class="svg-container"&gt;
-          &lt;svg id="img3" overflow="visible" viewbox="0 0 212 161" color-interpolation-filters="sRGB"&gt;
-            &lt;filter id="svgBlur" x="-5%" y="-5%" width="110%" height="110%"&gt;
-              &lt;feGaussianBlur in="SourceGraphic" stdDeviation="3.5"/&gt;
-            &lt;/filter&gt;
-            &lt;image xlink:href="/files/3710/Test_Form_2.jpeg" filter="url(#svgBlur)" width="212px" height="161px"/&gt;
-          &lt;/svg&gt;
-        &lt;/div&gt;
-      &lt;/td&gt;
-      &lt;td&gt;&lt;img alt="Test_Form_s.jpg" id="img4" class="internal default" src="/files/3711/Test_Form_2_s.jpg" style="width: 100%;" /&gt;&lt;/td&gt;
-    &lt;/tr&gt;
-  &lt;/tbody&gt;
-&lt;/table&gt;</pre>
-
-<pre class="brush: css notranslate">html {
-  height:100%;
-}
-body {
-  font: 14px/1.286 "Lucida Grande", "Lucida Sans Unicode", "DejaVu Sans", Lucida, Arial, Helvetica, sans-serif;
-  color: rgb(51, 51, 51);
-  height:100%;
-  overflow:hidden;
-}
-#img2 {
-  width:100%;
-  height:auto;
-  -webkit-filter:blur(5px);
-  -ms-filter:blur(5px);
-  filter:blur(5px); }
-table.standard-table {
-  border: 1px solid rgb(187, 187, 187);
-  border-collapse: collapse;
-  border-spacing: 0;
-  margin: 0 0 1.286em;
-  height: 100%;
-  width: 85%;
-}
-table.standard-table th {
-  border: 1px solid rgb(187, 187, 187);
-  padding: 0px 5px;
-  background: none repeat scroll 0% 0% rgb(238, 238, 238);
-  text-align: left;
-  font-weight: bold;
-}
-table.standard-table td {
-  padding: 5px;
-  border: 1px solid rgb(204, 204, 204);
-  text-align: left;
-  vertical-align: top;
-  width:25%;
-  height:auto;
-}
-#img3 {
-  height:100%;
-}
-</pre>
-</div>
-
-<pre class="brush: html notranslate">&lt;svg style="position: absolute; top: -99999px" xmlns="http://www.w3.org/2000/svg"&gt;
-  &lt;filter id="svgBlur" x="-5%" y="-5%" width="110%" height="110%"&gt;
-    &lt;feGaussianBlur in="SourceGraphic" stdDeviation="5"/&gt;
-  &lt;/filter&gt;
-&lt;/svg&gt;</pre>
-
-<div>{{EmbedLiveSample('blur_example','100%','236px','','', 'no-codepen')}}</div>
-
-<h4 id="brightness">brightness()</h4>
-
-<p>{{cssxref("filter-function/brightness", "brightness()")}} 関数は、入力画像に線形乗数を適用して明るさを明るくしたり暗くしたりします。 <code>0%</code> の値を設定すると、完全な黒の画像が作成されます。 <code>100%</code> の値を指定すると、入力は変更されません。その他の値は効果の線形乗数です。 <code>100%</code> を超える値が許されており、より明るい結果が得られます。補間時の空白値は <code>1</code> です。</p>
-
-<pre class="brush: css notranslate">filter: brightness(2)</pre>
-
-<pre class="brush: html notranslate">&lt;svg style="position: absolute; top: -99999px" xmlns="http://www.w3.org/2000/svg"&gt;
-  &lt;filter id="brightness"&gt;
-    &lt;feComponentTransfer&gt;
-      &lt;feFuncR type="linear" slope="[amount]"/&gt;
-      &lt;feFuncG type="linear" slope="[amount]"/&gt;
-      &lt;feFuncB type="linear" slope="[amount]"/&gt;
-    &lt;/feComponentTransfer&gt;
-  &lt;/filter&gt;
-&lt;/svg&gt;</pre>
-
-<div id="brightness_example" class="hidden">
-<pre class="brush: html notranslate">&lt;table class="standard-table"&gt;
-  &lt;thead&gt;
-    &lt;tr&gt;
-      &lt;th style="text-align: left;" scope="col"&gt;元の画像&lt;/th&gt;
-      &lt;th style="text-align: left;" scope="col"&gt;ライブ例&lt;/th&gt;
-      &lt;th style="text-align: left;" scope="col"&gt;同等の SVG&lt;/th&gt;
-      &lt;th style="text-align: left;" scope="col"&gt;画像による例&lt;/th&gt;
-    &lt;/tr&gt;
-  &lt;/thead&gt;
-  &lt;tbody&gt;
-    &lt;tr&gt;
-      &lt;td&gt;&lt;img alt="Test_Form.jpg" id="img1" class="internal default" src="/files/3708/Test_Form.jpg" style="width: 100%;" /&gt;&lt;/td&gt;
-      &lt;td&gt;&lt;img alt="Test_Form.jpg" id="img2" class="internal default" src="/files/3708/Test_Form.jpg" style="width: 100%;" /&gt;&lt;/td&gt;
-      &lt;td&gt;&lt;div class="svg-container"&gt;&lt;svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 286 217" color-interpolation-filters="sRGB"&gt;
- &lt;filter id="brightness"&gt;
-    &lt;feComponentTransfer&gt;
-        &lt;feFuncR type="linear" slope="2"/&gt;
-        &lt;feFuncG type="linear" slope="2"/&gt;
-        &lt;feFuncB type="linear" slope="2"/&gt;
-    &lt;/feComponentTransfer&gt;
-  &lt;/filter&gt;
-  &lt;image xlink:href="/files/3708/Test_Form.jpg" filter="url(#brightness)" width="286px" height="217px" /&gt;
-&lt;/svg&gt;&lt;div&gt;&lt;/td&gt;
-      &lt;td&gt;&lt;img alt="Test_Form_s.jpg" id="img4" class="internal default" src="/files/3709/Test_Form_s.jpg" style="width: 100%;" /&gt;&lt;/td&gt;
-    &lt;/tr&gt;
-  &lt;/tbody&gt;
-&lt;/table&gt;
-</pre>
-
-<pre class="brush: css notranslate">html {
-  height:100%;
-}
-body {
-  font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif;
-  color: rgb(51, 51, 51);
-  height:100%;
-  overflow:hidden;
-}
-#img2 {
-  width:100%;
-  height:auto;
-  -moz-filter:brightness(2);
-  -webkit-filter:brightness(2);
-  -ms-filter:brightness(2);
-  filter:brightness(2); }
-table.standard-table {
-  border: 1px solid rgb(187, 187, 187);
-  border-collapse: collapse;
-  border-spacing: 0px;
-  margin: 0px 0px 1.286em;
-  height:100%;
-  width: 85%;
-}
-table.standard-table th {
-  border: 1px solid rgb(187, 187, 187);
-  padding: 0px 5px;
-  background: none repeat scroll 0% 0% rgb(238, 238, 238);
-  text-align: left;
-  font-weight: bold;
-}
-table.standard-table td {
-  padding: 5px;
-  border: 1px solid rgb(204, 204, 204);
-  text-align: left;
-  vertical-align: top;
-  width:25%;
-  height:auto;
-}
-#img3 {
-  height:100%;
-}
-</pre>
-</div>
-
-<p>{{EmbedLiveSample('brightness_example','100%','231px','','', 'no-codepen')}}</p>
-
-<h4 id="contrast">contrast()</h4>
-
-<p>{{cssxref("filter-function/contrast", "contrast()")}} 関数は、入力画像のコントラストを調整します。 <code>0%</code> の値を指定すると完全にグレーの画像が作成されます。 <code>100%</code> の値を指定すると、入力画像は変更されません。 <code>100%</code> を超える値を指定すると、よりコントラストの高い結果が得られます。補完時の空白値は <code>1</code> です。</p>
-
-<pre class="brush: css notranslate">filter: contrast(200%)
-</pre>
-
-<pre class="brush: html notranslate">&lt;svg style="position: absolute; top: -99999px" xmlns="http://www.w3.org/2000/svg"&gt;
-  &lt;filter id="contrast"&gt;
-    &lt;feComponentTransfer&gt;
-      &lt;feFuncR type="linear" slope="[amount]" intercept="-(0.5 * [amount]) + 0.5"/&gt;
-      &lt;feFuncG type="linear" slope="[amount]" intercept="-(0.5 * [amount]) + 0.5"/&gt;
-      &lt;feFuncB type="linear" slope="[amount]" intercept="-(0.5 * [amount]) + 0.5"/&gt;
-    &lt;/feComponentTransfer&gt;
-  &lt;/filter&gt;
-&lt;/svg&gt;
-</pre>
-
-<div id="contrast_example" class="hidden">
-<pre class="brush: html notranslate">&lt;table class="standard-table"&gt;
-  &lt;thead&gt;
-    &lt;tr&gt;
-      &lt;th style="text-align: left;" scope="col"&gt;元の画像&lt;/th&gt;
-      &lt;th style="text-align: left;" scope="col"&gt;ライブ例&lt;/th&gt;
-      &lt;th style="text-align: left;" scope="col"&gt;同等の SVG&lt;/th&gt;
-      &lt;th style="text-align: left;" scope="col"&gt;画像による例&lt;/th&gt;
-    &lt;/tr&gt;
-  &lt;/thead&gt;
-  &lt;tbody&gt;
-    &lt;tr&gt;
-      &lt;td&gt;&lt;img alt="Test_Form_3.jpeg" id="img1" class="internal default" src="/files/3712/Test_Form_3.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
-      &lt;td&gt;&lt;img alt="Test_Form_3.jpg" id="img2" class="internal default" src="/files/3712/Test_Form_3.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
-      &lt;td&gt;&lt;div class="svg-container"&gt;&lt;svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 240 151" color-interpolation-filters="sRGB"&gt;
- &lt;filter id="contrast"&gt;
-    &lt;feComponentTransfer&gt;
-      &lt;feFuncR type="linear" slope="2" intercept="-0.5"/&gt;
-      &lt;feFuncG type="linear" slope="2" intercept="-0.5"/&gt;
-      &lt;feFuncB type="linear" slope="2" intercept="-0.5"/&gt;
-    &lt;/feComponentTransfer&gt;
-  &lt;/filter&gt;
-  &lt;image xlink:href="/files/3712/Test_Form_3.jpeg" filter="url(#contrast)" width="240px" height="151px" /&gt;
-&lt;/svg&gt;&lt;div&gt;&lt;/td&gt;
-      &lt;td&gt;&lt;img alt="Test_Form_s.jpg" id="img4" class="internal default" src="/files/3713/Test_Form_3_s.jpg" style="width: 100%;" /&gt;&lt;/td&gt;
-    &lt;/tr&gt;
-  &lt;/tbody&gt;
-&lt;/table&gt;
-</pre>
-
-<pre class="brush: css notranslate">html {
-  height:100%;
-}
-body {
-  font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif;
-  color: rgb(51, 51, 51);
-  height:100%;
-  overflow:hidden;
-}
-#img2 {
-  width:100%;
-  height:auto;
-  -moz-filter:contrast(200%);
-  -webkit-filter:contrast(200%);
-  -ms-filter:contrast(200%);
-  filter:contrast(200%); }
-table.standard-table {
-  border: 1px solid rgb(187, 187, 187);
-  border-collapse: collapse;
-  border-spacing: 0px;
-  margin: 0px 0px 1.286em;
-  width: 85%;
-  height: 100%;
-}
-table.standard-table th {
-  border: 1px solid rgb(187, 187, 187);
-  padding: 0px 5px;
-  background: none repeat scroll 0% 0% rgb(238, 238, 238);
-  text-align: left;
-  font-weight: bold;
-}
-table.standard-table td {
-  padding: 5px;
-  border: 1px solid rgb(204, 204, 204);
-  text-align: left;
-  vertical-align: top;
-  width:25%;
-  height:auto;
-}
-#img3 {
-  height:100%;
-}
-</pre>
-</div>
-
-<div>{{EmbedLiveSample('contrast_example','100%','203px','','', 'no-codepen')}}</div>
-
-<h4 id="drop-shadow">drop-shadow()</h4>
-
-<p>{{cssxref("filter-function/drop-shadow", "drop-shadow()")}} 関数は、入力画像に効果を適用します。ドロップシャドウとは、入力画像のアルファマスクを特定の色で、ずらしてぼやかして描画したものを画像の下に合成したものです。この関数は <code>&lt;shadow&gt;</code> 型 (<a href="https://www.w3.org/TR/css-backgrounds-3/#typedef-shadow">CSS3 Backgrounds</a> で定義) の引数を受け取りますが、 <code>inset</code> キーワードは使用できません。この関数は、より確立された {{cssxref("box-shadow")}} プロパティに似ています。違いはフィルターであること、より良い性能を得るためにハードウェアアクセラレーションを提供しているブラウザーがあることです。 <code>&lt;shadow&gt;</code> 引数の値は次の通りです。</p>
-
-<dl>
- <dt><code>&lt;offset-x&gt;</code> <code>&lt;offset-y&gt;</code> <small>(必須)</small></dt>
- <dd>二つの {{cssxref("&lt;length&gt;")}} 値で、影をずらす大きさを設定します。 <code>&lt;offset-x&gt;</code> は水平の距離を指定します。負の数の場合、影を要素の左側に配置します。 <code>&lt;offset-y&gt;</code> は垂直の距離を指定します。負の数の場合、影を要素の上に配置します。利用可能な単位は {{cssxref("&lt;length&gt;")}} を参照してください。<br>
- 両方の値が <code>0</code> である場合は、影は要素の背後に配置されます (そして、 <code>&lt;blur-radius&gt;</code> や <code>&lt;spread-radius&gt;</code> を設定することで、ぼかしの効果を生成することができます)。</dd>
- <dt><code>&lt;blur-radius&gt;</code> <small>(オプション)</small></dt>
- <dd>これは三番目の {{cssxref("&lt;length&gt;")}} 値です。この値が大きくなるほど、ぼかしが大きくなり、影がより大きく薄くなります。負の数を指定することはできません。指定されなかった場合は、 <code>0</code> (影の縁がはっきりしている) になります。</dd>
- <dt><code>&lt;color&gt;</code> <small>(オプション)</small></dt>
- <dd>指定可能なキーワードや記述方法は {{cssxref("&lt;color&gt;")}} 値を参照してください。指定されなかった場合は、使用される色はブラウザーに依存します。 - 普通は {{cssxref("&lt;color&gt;")}} プロパティの値ですが、 Safari では現在のところ、この場合には透明な影を描くことに注意してください。</dd>
-</dl>
-
-<pre class="brush: css notranslate">filter: drop-shadow(16px 16px 10px black)</pre>
-
-<pre class="brush: html notranslate">&lt;svg style="position: absolute; top: -999999px" xmlns="http://www.w3.org/2000/svg"&gt;
- &lt;filter id="drop-shadow"&gt;
-    &lt;feGaussianBlur in="SourceAlpha" stdDeviation="[radius]"/&gt;
-    &lt;feOffset dx="[offset-x]" dy="[offset-y]" result="offsetblur"/&gt;
-    &lt;feFlood flood-color="[color]"/&gt;
-    &lt;feComposite in2="offsetblur" operator="in"/&gt;
-    &lt;feMerge&gt;
-      &lt;feMergeNode/&gt;
-      &lt;feMergeNode in="SourceGraphic"/&gt;
-    &lt;/feMerge&gt;
-  &lt;/filter&gt;
-&lt;/svg&gt;
-</pre>
-
-<div id="shadow_example" class="hidden">
-<pre class="brush: html notranslate">&lt;table class="standard-table"&gt;
-  &lt;thead&gt;
-    &lt;tr&gt;
-      &lt;th style="text-align: left;" scope="col"&gt;元の画像&lt;/th&gt;
-      &lt;th style="text-align: left;" scope="col"&gt;ライブ例&lt;/th&gt;
-      &lt;th style="text-align: left;" scope="col"&gt;同等の SVG&lt;/th&gt;
-      &lt;th style="text-align: left;" scope="col"&gt;画像による例&lt;/th&gt;
-    &lt;/tr&gt;
-  &lt;/thead&gt;
-  &lt;tbody&gt;
-    &lt;tr&gt;
-      &lt;td&gt;&lt;img alt="Test_Form_4.jpeg" id="img1" class="internal default" src="/files/3714/Test_Form_4.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
-      &lt;td&gt;&lt;img alt="Test_Form_4.jpg" id="img2" class="internal default" src="/files/3714/Test_Form_4.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
-      &lt;td&gt;
-        &lt;div class="svg-container"&gt;
-          &lt;svg xmlns="http://www.w3.org/2000/svg" id="img3" overflow="visible" viewbox="0 0 213 161" color-interpolation-filters="sRGB"&gt;
-            &lt;defs&gt;
-              &lt;image id="MyImage" xlink:href="/files/3714/Test_Form_4.jpeg" width="213px" height="161px"/&gt;
-            &lt;/defs&gt;
-            &lt;filter id="drop-shadow" x="-50%" y="-50%" width="200%" height="200%"&gt;
-              &lt;feOffset dx="9" dy="9" in="SourceAlpha"/&gt;
-              &lt;feGaussianBlur stdDeviation="5"/&gt;
-            &lt;/filter&gt;
-            &lt;use xlink:href="#MyImage" filter="url(#drop-shadow)"/&gt;
-            &lt;use xlink:href="#MyImage"/&gt;
-          &lt;/svg&gt;
-        &lt;/div&gt;
-      &lt;/td&gt;
-      &lt;td&gt;&lt;img alt="Test_Form_4_s.jpg" id="img4" class="internal default" src="/files/3715/Test_Form_4_s.jpg" style="width: 100%;" /&gt;&lt;/td&gt;
-    &lt;/tr&gt;
-    &lt;tr&gt;
-      &lt;td&gt;&lt;img alt="Test_Form_4 distorded border - 元の画像" id="img11" class="internal default" src="/files/8467/Test_Form_4_irregular-shape_opacity-gradient.png" style="width: 100%;" /&gt;&lt;/td&gt;
-      &lt;td&gt;&lt;img alt="Test_Form_4 distorded border - ライブ例" id="img12" class="internal default" src="/files/8467/Test_Form_4_irregular-shape_opacity-gradient.png" style="width: 100%;" /&gt;&lt;/td&gt;
-      &lt;td&gt;
-        &lt;div class="svg-container"&gt;
-          &lt;svg xmlns="http://www.w3.org/2000/svg" id="img13" overflow="visible" viewbox="0 0 213 161" color-interpolation-filters="sRGB"&gt;
-            &lt;defs&gt;
-              &lt;image id="MyImage2" xlink:href="/files/8467/Test_Form_4_irregular-shape_opacity-gradient.png" width="213px" height="161px"/&gt;
-            &lt;/defs&gt;
-            &lt;filter id="drop-shadow2" x="-50%" y="-50%" width="200%" height="200%"&gt;
-              &lt;feOffset dx="5" dy="5.5" in="SourceAlpha"/&gt;
-              &lt;feGaussianBlur stdDeviation="2.5"/&gt;
-              &lt;feComponentTransfer&gt;
-                &lt;feFuncA type="table" tableValues="0 0.8"/&gt;
-              &lt;/feComponentTransfer&gt;
-            &lt;/filter&gt;
-            &lt;use xlink:href="#MyImage2" filter="url(#drop-shadow2)"/&gt;
-            &lt;use xlink:href="#MyImage2"/&gt;
-          &lt;/svg&gt;
-        &lt;/div&gt;
-      &lt;/td&gt;
-      &lt;td&gt;&lt;img alt="Test_Form_4 distorded border drop shadow - 画像による例" id="img14" class="internal default" src="/files/8469/Test_Form_4_irregular-shape_opacity-gradient_drop-shadow.png" style="width: 100%;" /&gt;&lt;/td&gt;
-    &lt;/tr&gt;
-  &lt;/tbody&gt;
-&lt;/table&gt;
-</pre>
-
-<pre class="brush: css notranslate">html {
-  height:100%;
-}
-body {
-  font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif;
-  color: rgb(51, 51, 51);
-  height:100%;
-  overflow:hidden;
-}
-#img2 {
-  width:100%;
-  height:auto;
-  -moz-filter: drop-shadow(16px 16px 10px black);
-  -webkit-filter: drop-shadow(16px 16px 10px black);
-  -ms-filter: drop-shadow(16px 16px 10px black);
-  filter: drop-shadow(16px 16px 10px black);
-}
-#img12 {
-  width:100%;
-  height:auto;
-  -moz-filter: drop-shadow(8px 9px 5px rgba(0,0,0,.8));
-  -webkit-filter: drop-shadow(8px 9px 5px rgba(0,0,0,.8));
-  -ms-filter: drop-shadow(8px 9px 5px rgba(0,0,0,.8));
-  filter: drop-shadow(8px 9px 5px rgba(0,0,0,.8));
-}
-table.standard-table {
-  border: 1px solid rgb(187, 187, 187);
-  border-collapse: collapse;
-  border-spacing: 0px;
-  margin: 0px 0px 1.286em;
-  width: 85%;
-  height: 100%;
-}
-#irregular-shape {
-  width: 64%;
-}
-table.standard-table th {
-  border: 1px solid rgb(187, 187, 187);
-  padding: 0px 5px;
-  background: none repeat scroll 0% 0% rgb(238, 238, 238);
-  text-align: left;
-  font-weight: bold;
-}
-table.standard-table td {
-  padding: 5px;
-  border: 1px solid rgb(204, 204, 204);
-  text-align: left;
-  vertical-align: top;
-  width:25%;
-  height:auto;
-}
-#img3, #img13 {
-  width:100%;
-  height:auto;
-}
-</pre>
-</div>
-
-<div>{{EmbedLiveSample('shadow_example','100%','300px','','', 'no-codepen')}}</div>
-
-<h4 id="grayscale">grayscale()</h4>
-
-<p>{{cssxref("filter-function/grayscale", "grayscale()")}} 関数は入力画像をグレースケールに変換します。 <code>amount</code> の値は変換の程度を定義します。 <code>100%</code> の値は完全にグレースケールになります。 <code>0%</code> では入力画像が変化しないままになります。 <code>0%</code> と <code>100%</code> の間は効果の線形乗数になります。補完時の空白値は <code>0</code> です。</p>
-
-<pre class="brush: css notranslate">filter: grayscale(100%)</pre>
-
-<div id="grayscale_example" class="hidden">
-<pre class="brush: html notranslate">&lt;table class="standard-table"&gt;
-  &lt;thead&gt;
-    &lt;tr&gt;
-      &lt;th style="text-align: left;" scope="col"&gt;元の画像&lt;/th&gt;
-      &lt;th style="text-align: left;" scope="col"&gt;ライブ例&lt;/th&gt;
-      &lt;th style="text-align: left;" scope="col"&gt;同等の SVG&lt;/th&gt;
-      &lt;th style="text-align: left;" scope="col"&gt;画像による例&lt;/th&gt;
-    &lt;/tr&gt;
-  &lt;/thead&gt;
-  &lt;tbody&gt;
-    &lt;tr&gt;
-      &lt;td&gt;&lt;img alt="Test_Form_5.jpeg" id="img1" class="internal default" src="/files/3716/Test_Form_5.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
-      &lt;td&gt;&lt;img alt="Test_Form_5.jpg" id="img2" class="internal default" src="/files/3716/Test_Form_5.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
-      &lt;td&gt;&lt;div class="svg-container"&gt;&lt;svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 276 184" color-interpolation-filters="sRGB"&gt;
- &lt;filter id="grayscale"&gt;
-    &lt;feColorMatrix type="matrix"
-               values="0.2126 0.7152 0.0722 0 0
-                       0.2126 0.7152 0.0722 0 0
-                       0.2126 0.7152 0.0722 0 0
-                       0 0 0 1 0"/&gt;
-  &lt;/filter&gt;
-  &lt;image xlink:href="/files/3716/Test_Form_5.jpeg" filter="url(#grayscale)" width="276px" height="184px" /&gt;
-&lt;/svg&gt;&lt;div&gt;&lt;/td&gt;
-      &lt;td&gt;&lt;img alt="Test_Form_5_s.jpg" id="img4" class="internal default" src="/files/3717/Test_Form_5_s.jpg" style="width: 100%;" /&gt;&lt;/td&gt;
-    &lt;/tr&gt;
-  &lt;/tbody&gt;
-&lt;/table&gt;
-</pre>
-
-<pre class="brush: css notranslate">html {
-  height:100%;
-}
-body {
-  font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif;
-  color: rgb(51, 51, 51);
-  height:100%;
-  overflow:hidden;
-}
-#img2 {
-  width:100%;
-  height:auto;
-  -moz-filter:grayscale(100%);
-  -webkit-filter:grayscale(100%);
-  -ms-filter:grayscale(100%);
-  filter:grayscale(100%); }
-table.standard-table {
-  border: 1px solid rgb(187, 187, 187);
-  border-collapse: collapse;
-  border-spacing: 0px;
-  margin: 0px 0px 1.286em;
-  width: 85%;
-  height: 100%;
-}
-table.standard-table th {
-  border: 1px solid rgb(187, 187, 187);
-  padding: 0px 5px;
-  background: none repeat scroll 0% 0% rgb(238, 238, 238);
-  text-align: left;
-  font-weight: bold;
-}
-table.standard-table td {
-  padding: 5px;
-  border: 1px solid rgb(204, 204, 204);
-  text-align: left;
-  vertical-align: top;
-  width:25%;
-  height:auto;
-}
-#img3 {
-  height:100%;
-}
-</pre>
-</div>
-
-<div>{{EmbedLiveSample('grayscale_example','100%','209px','','', 'no-codepen')}}</div>
-
-<h4 id="hue-rotate">hue-rotate()</h4>
-
-<p>{{cssxref("filter-function/hue-rotate", "hue-rotate()")}} 関数は、入力画像の色相を回転させます。 <code class="property">angle</code> の値は、色相環を何度回転させて入力サンプルを調整するかを定義します。 <code>0deg</code> の値を指定すると入力は変更されません。補完時の空白値は <code>0</code> です。最大値はありませんが、 <code>360deg</code> を超える値の以上の値の場合は回り込みになります。</p>
-
-<pre class="brush: css notranslate">filter: hue-rotate(90deg)</pre>
-
-<div id="huerotate_example" class="hidden">
-<pre class="brush: html notranslate">&lt;table class="standard-table"&gt;
-  &lt;thead&gt;
-    &lt;tr&gt;
-      &lt;th style="text-align: left;" scope="col"&gt;元の画像&lt;/th&gt;
-      &lt;th style="text-align: left;" scope="col"&gt;ライブ例&lt;/th&gt;
-      &lt;th style="text-align: left;" scope="col"&gt;同等の SVG&lt;/th&gt;
-      &lt;th style="text-align: left;" scope="col"&gt;画像による例&lt;/th&gt;
-    &lt;/tr&gt;
-  &lt;/thead&gt;
-  &lt;tbody&gt;
-    &lt;tr&gt;
-      &lt;td&gt;&lt;img alt="Test_Form_6.jpeg" id="img1" class="internal default" src="/files/3718/Test_Form_6.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
-      &lt;td&gt;&lt;img alt="Test_Form_6.jpg" id="img2" class="internal default" src="/files/3718/Test_Form_6.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
-      &lt;td&gt;&lt;div class="svg-container"&gt;&lt;svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 266 190" color-interpolation-filters="sRGB"&gt;
- &lt;filter id="hue-rotate"&gt;
-    &lt;feColorMatrix type="hueRotate"
-               values="90"/&gt;
-  &lt;/filter&gt;
-  &lt;image xlink:href="/files/3718/Test_Form_6.jpeg" filter="url(#hue-rotate)" width="266px" height="190px" /&gt;
-&lt;/svg&gt;&lt;div&gt;&lt;/td&gt;
-      &lt;td&gt;&lt;img alt="Test_Form_6_s.jpg" id="img4" class="internal default" src="/files/3719/Test_Form_6_s.jpg" style="width: 100%;" /&gt;&lt;/td&gt;
-    &lt;/tr&gt;
-  &lt;/tbody&gt;
-&lt;/table&gt;
-</pre>
-
-<pre class="brush: css notranslate">html {
-  height:100%;
-}
-body {
-  font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif;
-  color: rgb(51, 51, 51);
-  height:100%;
-  overflow:hidden;
-}
-#img2 {
-  width:100%;
-  height:auto;
-  -moz-filter:hue-rotate(90deg);
-  -webkit-filter:hue-rotate(90deg);
-  -ms-filter:hue-rotate(90deg);
-  filter:hue-rotate(90deg); }
-table.standard-table {
-  border: 1px solid rgb(187, 187, 187);
-  border-collapse: collapse;
-  border-spacing: 0px;
-  margin: 0px 0px 1.286em;
-  width: 85%;
-  height: 100%;
-}
-table.standard-table th {
-  border: 1px solid rgb(187, 187, 187);
-  padding: 0px 5px;
-  background: none repeat scroll 0% 0% rgb(238, 238, 238);
-  text-align: left;
-  font-weight: bold;
-}
-table.standard-table td {
-  padding: 5px;
-  border: 1px solid rgb(204, 204, 204);
-  text-align: left;
-  vertical-align: top;
-  width:25%;
-  height:auto;
-}
-#img3 {
-  height:100%;
-}
-</pre>
-</div>
-
-<pre class="brush: html notranslate">&lt;svg style="position: absolute; top: -999999px" xmlns="http://www.w3.org/2000/svg"&gt;
-  &lt;filter id="svgHueRotate" &gt;
-    &lt;feColorMatrix type="hueRotate" values="[angle]" /&gt;
-  &lt;filter /&gt;
-&lt;/svg&gt;</pre>
-
-<p>{{EmbedLiveSample('huerotate_example','100%','221px','','', 'no-codepen')}}</p>
-
-<h4 id="invert">invert()</h4>
-
-<p>{{cssxref("filter-function/invert", "invert()")}} 関数は、入力画像のサンプルを反転します。 <code class="property">amount</code> の値は、変換の度合を定義します。 <code>100%</code> の値を指定すると、完全に反転されます。 <code>0%</code> では入力画像が変化しないままになります。 <code>0%</code> と <code>100%</code> の間は効果の線形乗数になります。補完時の空白値は <code>0</code> です。</p>
-
-<pre class="brush: css notranslate">filter: invert(100%)</pre>
-
-<div id="invert_example" class="hidden">
-<pre class="brush: html notranslate">&lt;table class="standard-table"&gt;
-  &lt;thead&gt;
-    &lt;tr&gt;
-      &lt;th style="text-align: left;" scope="col"&gt;元の画像&lt;/th&gt;
-      &lt;th style="text-align: left;" scope="col"&gt;ライブ例&lt;/th&gt;
-      &lt;th style="text-align: left;" scope="col"&gt;同等の SVG&lt;/th&gt;
-      &lt;th style="text-align: left;" scope="col"&gt;画像による例&lt;/th&gt;
-    &lt;/tr&gt;
-  &lt;/thead&gt;
-  &lt;tbody&gt;
-    &lt;tr&gt;
-      &lt;td&gt;&lt;img alt="Test_Form_7.jpeg" id="img1" class="internal default" src="/files/3720/Test_Form_7.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
-      &lt;td&gt;&lt;img alt="Test_Form_7.jpg" id="img2" class="internal default" src="/files/3720/Test_Form_7.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
-      &lt;td&gt;&lt;div class="svg-container"&gt;&lt;svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 183 276" color-interpolation-filters="sRGB"&gt;
- &lt;filter id="invert"&gt;
-    &lt;feComponentTransfer&gt;
-        &lt;feFuncR type="table" tableValues="1 0"/&gt;
-        &lt;feFuncG type="table" tableValues="1 0"/&gt;
-        &lt;feFuncB type="table" tableValues="1 0"/&gt;
-    &lt;/feComponentTransfer&gt;
- &lt;/filter&gt;
- &lt;image xlink:href="/files/3720/Test_Form_7.jpeg" filter="url(#invert)" width="183px" height="276px" /&gt;
-&lt;/svg&gt;&lt;div&gt;&lt;/td&gt;
-      &lt;td&gt;&lt;img alt="Test_Form_7_s.jpg" id="img4" class="internal default" src="/files/3721/Test_Form_7_s.jpg" style="width: 100%;" /&gt;&lt;/td&gt;
-    &lt;/tr&gt;
-  &lt;/tbody&gt;
-&lt;/table&gt;
-</pre>
-
-<pre class="brush: css notranslate">html {
-  height:100%;
-}
-body {
-  font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif;
-  color: rgb(51, 51, 51);
-  height:100%;
-  overflow:hidden;
-}
-#img2 {
-  width:100%;
-  height:auto;
-  -moz-filter: invert(100%);
-  -webkit-filter: invert(100%);
-  -ms-filter: invert(100%);
-  filter: invert(100%); }
-table.standard-table {
-  border: 1px solid rgb(187, 187, 187);
-  border-collapse: collapse;
-  border-spacing: 0px;
-  margin: 0px 0px 1.286em;
-  width: 85%;
-  height: 100%;
-}
-table.standard-table th {
-  border: 1px solid rgb(187, 187, 187);
-  padding: 0px 5px;
-  background: none repeat scroll 0% 0% rgb(238, 238, 238);
-  text-align: left;
-  font-weight: bold;
-}
-table.standard-table td {
-  padding: 5px;
-  border: 1px solid rgb(204, 204, 204);
-  text-align: left;
-  vertical-align: top;
-  width:25%;
-  height:auto;
-}
-#img3 {
-  height:100%;
-}
-</pre>
-</div>
-
-<p>{{EmbedLiveSample('invert_example','100%','407px','','', 'no-codepen')}}</p>
-
-<h4 id="opacity">opacity()</h4>
-
-<p>{{cssxref("filter-function/opacity", "opacity()")}} 関数は、入力画像のサンプルに透過度を適用します。 <code class="property">amount</code> の値は、変換の度合を定義します。 <code>0%</code> の値を指定すると、完全に透明になります。 <code>100%</code> では入力画像が変化しないままになります。 <code>0%</code> と <code>100%</code> の間は効果の線形乗数になります。これは、入力画像のサンプルに量を乗算することに相当します。補完時の空白値は <code>1</code> です。この関数は、より確立された {{cssxref("opacity")}} プロパティに似ていますが、フィルターの場合、一部のブラウザーでは性能を向上させるためにハードウェアアクセラレーションを提供する点が異なります。</p>
-
-<pre class="brush: css notranslate">filter: opacity(50%)</pre>
-
-<div id="opacity_example" class="hidden">
-<pre class="brush: html notranslate">&lt;table class="standard-table"&gt;
-  &lt;thead&gt;
-    &lt;tr&gt;
-      &lt;th style="text-align: left;" scope="col"&gt;元の画像&lt;/th&gt;
-      &lt;th style="text-align: left;" scope="col"&gt;ライブ例&lt;/th&gt;
-      &lt;th style="text-align: left;" scope="col"&gt;同等の SVG&lt;/th&gt;
-      &lt;th style="text-align: left;" scope="col"&gt;画像による例&lt;/th&gt;
-    &lt;/tr&gt;
-  &lt;/thead&gt;
-  &lt;tbody&gt;
-    &lt;tr&gt;
-      &lt;td&gt;&lt;img alt="Test_Form_14.jpeg" id="img1" class="internal default" src="/files/3725/Test_Form_14.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
-      &lt;td&gt;&lt;img alt="Test_Form_14.jpg" id="img2" class="internal default" src="/files/3725/Test_Form_14.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
-      &lt;td&gt;&lt;div class="svg-container"&gt;&lt;svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 276 183" color-interpolation-filters="sRGB"&gt;
- &lt;filter id="opacity"&gt;
-    &lt;feComponentTransfer&gt;
-        &lt;feFuncA type="table" tableValues="0 0.5"&gt;
-    &lt;/feComponentTransfer&gt;
- &lt;/filter&gt;
- &lt;image xlink:href="/files/3725/Test_Form_14.jpeg" filter="url(#opacity)" width="276px" height="183px" /&gt;
-&lt;/svg&gt;&lt;div&gt;&lt;/td&gt;
-      &lt;td&gt;&lt;img alt="Test_Form_14_s.jpg" id="img4" class="internal default" src="/files/3726/Test_Form_14_s.jpg" style="width: 100%;" /&gt;&lt;/td&gt;
-    &lt;/tr&gt;
-  &lt;/tbody&gt;
-&lt;/table&gt;
-</pre>
-
-<pre class="brush: css notranslate">html {
-  height:100%;
-}
-body {
-  font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif;
-  color: rgb(51, 51, 51);
-  height:100%;
-  overflow:hidden;
-}
-#img2 {
-  width:100%;
-  height:auto;
-  -moz-filter: opacity(50%);
-  -webkit-filter: opacity(50%);
-  -ms-filter: opacity(50%);
-  filter: opacity(50%); }
-table.standard-table {
-  border: 1px solid rgb(187, 187, 187);
-  border-collapse: collapse;
-  border-spacing: 0px;
-  margin: 0px 0px 1.286em;
-  width: 85%;
-  height: 100%;
-}
-table.standard-table th {
-  border: 1px solid rgb(187, 187, 187);
-  padding: 0px 5px;
-  background: none repeat scroll 0% 0% rgb(238, 238, 238);
-  text-align: left;
-  font-weight: bold;
-}
-table.standard-table td {
-  padding: 5px;
-  border: 1px solid rgb(204, 204, 204);
-  text-align: left;
-  vertical-align: top;
-  width:25%;
-  height:auto;
-}
-#img3 {
-  height:100%;
-}
-</pre>
-</div>
-
-<p>{{EmbedLiveSample('opacity_example','100%','210px','','', 'no-codepen')}}</p>
-
-<h4 id="saturate">saturate()</h4>
-
-<p>{{cssxref("filter-function/saturate", "saturate()")}} 関数は、入力画像の彩度を変化させます。 <code class="property">amount</code> の値は、変換の度合を定義します。 <code>0%</code> の値を指定すると、無彩色になります。 <code>100%</code> では入力画像が変化しないままになります。 <code>0%</code> と <code>100%</code> の間は効果の線形乗数になります。 <code>100%</code> を超える値を指定することもでき、彩度を増した結果になります。補完時の空白値は <code>1</code> です。</p>
-
-<pre class="brush: css notranslate">filter: saturate(200%)</pre>
-
-<div id="saturate_example" class="hidden">
-<pre class="brush: html notranslate">&lt;table class="standard-table"&gt;
-  &lt;thead&gt;
-    &lt;tr&gt;
-      &lt;th style="text-align: left;" scope="col"&gt;元の画像&lt;/th&gt;
-      &lt;th style="text-align: left;" scope="col"&gt;ライブ例&lt;/th&gt;
-      &lt;th style="text-align: left;" scope="col"&gt;同等の SVG&lt;/th&gt;
-      &lt;th style="text-align: left;" scope="col"&gt;画像による例&lt;/th&gt;
-    &lt;/tr&gt;
-  &lt;/thead&gt;
-  &lt;tbody&gt;
-    &lt;tr&gt;
-      &lt;td&gt;&lt;img alt="Test_Form_9.jpeg" id="img1" class="internal default" src="/files/3722/Test_Form_9.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
-      &lt;td&gt;&lt;img alt="Test_Form_9.jpg" id="img2" class="internal default" src="/files/3722/Test_Form_9.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
-      &lt;td&gt;&lt;div class="svg-container"&gt;&lt;svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 201 239" color-interpolation-filters="sRGB"&gt;
- &lt;filter id="saturate"&gt;
-    &lt;feColorMatrix type="saturate"
-               values="2"/&gt;
- &lt;/filter&gt;
- &lt;image xlink:href="/files/3722/Test_Form_9.jpeg" filter="url(#saturate)" width="201px" height="239px" /&gt;
-&lt;/svg&gt;&lt;div&gt;&lt;/td&gt;
-      &lt;td&gt;&lt;img alt="Test_Form_9_s.jpg" id="img4" class="internal default" src="/files/3724/Test_Form_9_s.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
-    &lt;/tr&gt;
-  &lt;/tbody&gt;
-&lt;/table&gt;
-</pre>
-
-<pre class="brush: css notranslate">html {
-  height:100%;
-}
-body {
-  font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif;
-  color: rgb(51, 51, 51);
-  height:100%;
-  overflow:hidden;
-}
-#img2 {
-  width:100%;
-  height:auto;
-  -moz-filter: saturate(200%);
-  -webkit-filter: saturate(200%);
-  -ms-filter: saturate(200%);
-  filter: saturate(200%); }
-table.standard-table {
-  border: 1px solid rgb(187, 187, 187);
-  border-collapse: collapse;
-  border-spacing: 0px;
-  margin: 0px 0px 1.286em;
-  width: 85%;
-  height: 100%;
-}
-table.standard-table th {
-  border: 1px solid rgb(187, 187, 187);
-  padding: 0px 5px;
-  background: none repeat scroll 0% 0% rgb(238, 238, 238);
-  text-align: left;
-  font-weight: bold;
-}
-table.standard-table td {
-  padding: 5px;
-  border: 1px solid rgb(204, 204, 204);
-  text-align: left;
-  vertical-align: top;
-  width:25%;
-  height:auto;
-}
-#img3 {
-  height:100%;
-}
-</pre>
-</div>
-
-<p>{{EmbedLiveSample('saturate_example','100%','332px','')}}</p>
-
-<h4 id="sepia">sepia()</h4>
-
-<p>{{cssxref("filter-function/sepia", "sepia()")}} 関数は、入力画像をセピア調にします。 <code class="property">amount</code> の値は、変換の度合を定義します。 <code>100%</code> の値を指定すると、完全にセピア調になります。 <code>0%</code> では入力画像が変化しないままになります。 <code>0%</code> と <code>100%</code> の間は効果の線形乗数になります。補完時の空白値は <code>0</code> です。</p>
-
-<pre class="brush: css notranslate">filter: sepia(100%)</pre>
-
-<div id="sepia_example" class="hidden">
-<pre class="brush: html notranslate">&lt;table class="standard-table"&gt;
-  &lt;thead&gt;
-    &lt;tr&gt;
-      &lt;th style="text-align: left;" scope="col"&gt;元の画像&lt;/th&gt;
-      &lt;th style="text-align: left;" scope="col"&gt;ライブ例&lt;/th&gt;
-      &lt;th style="text-align: left;" scope="col"&gt;同等の SVG&lt;/th&gt;
-      &lt;th style="text-align: left;" scope="col"&gt;画像による例&lt;/th&gt;
-    &lt;/tr&gt;
-  &lt;/thead&gt;
-  &lt;tbody&gt;
-    &lt;tr&gt;
-      &lt;td&gt;&lt;img alt="Test_Form_12.jpeg" id="img1" class="internal default" src="/files/3727/Test_Form_12.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
-      &lt;td&gt;&lt;img alt="Test_Form_12.jpg" id="img2" class="internal default" src="/files/3727/Test_Form_12.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
-      &lt;td&gt;&lt;div class="svg-container"&gt;&lt;svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 259 194" color-interpolation-filters="sRGB"&gt;
- &lt;filter id="sepia"&gt;
-    &lt;feColorMatrix type="matrix"
-               values="0.393 0.769 0.189 0 0
-                       0.349 0.686 0.168 0 0
-                       0.272 0.534 0.131 0 0
-                       0 0 0 1 0"/&gt;
- &lt;/filter&gt;
- &lt;image xlink:href="/files/3727/Test_Form_12.jpeg" filter="url(#sepia)" width="259px" height="194px" /&gt;
-&lt;/svg&gt;&lt;div&gt;&lt;/td&gt;
-      &lt;td&gt;&lt;img alt="Test_Form_12_s.jpg" id="img4" class="internal default" src="/files/3728/Test_Form_12_s.jpg" style="width: 100%;" /&gt;&lt;/td&gt;
-    &lt;/tr&gt;
-  &lt;/tbody&gt;
-&lt;/table&gt;
-</pre>
-
-<pre class="brush: css notranslate">html {
-  height:100%;
-}
-body {
-  font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif;
-  color: rgb(51, 51, 51);
-  height:100%;
-  overflow:hidden;
-}
-#img2 {
-  width:100%;
-  height:auto;
-  -moz-filter: sepia(100%);
-  -webkit-filter: sepia(100%);
-  -ms-filter: sepia(100%);
-  filter: sepia(100%); }
-table.standard-table {
-  border: 1px solid rgb(187, 187, 187);
-  border-collapse: collapse;
-  border-spacing: 0px;
-  margin: 0px 0px 1.286em;
-  width: 85%;
-  height: 100%;
-}
-table.standard-table th {
-  border: 1px solid rgb(187, 187, 187);
-  padding: 0px 5px;
-  background: none repeat scroll 0% 0% rgb(238, 238, 238);
-  text-align: left;
-  font-weight: bold;
-}
-table.standard-table td {
-  padding: 5px;
-  border: 1px solid rgb(204, 204, 204);
-  text-align: left;
-  vertical-align: top;
-  width:25%;
-  height:auto;
-}
-#img3 {
-  height:100%;
-}
-</pre>
-</div>
-
-<p>{{EmbedLiveSample('sepia_example','100%','229px','','', 'no-codepen')}}</p>
-
-<h2 id="Combining_functions" name="Combining_functions">関数の組み合わせ</h2>
-
-<p>いくつかの関数を組み合わせてレンダリングを操作することができます。次の例では、画像のコントラストと明るさを強調しています。</p>
-
-<pre class="brush: css notranslate">filter: contrast(175%) brightness(103%)</pre>
-
-<div id="combination_example" class="hidden">
-<pre class="brush: html notranslate">&lt;table class="standard-table"&gt;
-  &lt;thead&gt;
-    &lt;tr&gt;
-      &lt;th style="text-align: left;" scope="col"&gt;元の画像&lt;/th&gt;
-      &lt;th style="text-align: left;" scope="col"&gt;ライブ例&lt;/th&gt;
-      &lt;th style="text-align: left;" scope="col"&gt;画像による例&lt;/th&gt;
-    &lt;/tr&gt;
-  &lt;/thead&gt;
-  &lt;tbody&gt;
-    &lt;tr&gt;
-      &lt;td&gt;&lt;img alt="Test_Form_8.jpeg" id="img1" class="internal default" src="/files/3729/Test_Form_8.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
-      &lt;td&gt;&lt;img alt="Test_Form_8.jpg" id="img2" class="internal default" src="/files/3729/Test_Form_8.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
-      &lt;td&gt;&lt;img alt="Test_Form_8_s.jpg" id="img4" class="internal default" src="/files/3730/Test_Form_8_s.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
-    &lt;/tr&gt;
-  &lt;/tbody&gt;
-&lt;/table&gt;
-</pre>
-
-<pre class="brush: css notranslate">html {
-  height:100%;
-}
-body {
-  font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif;
-  color: rgb(51, 51, 51);
-  height:100%;
-  overflow:hidden;
-}
-#img2 {
-  width:100%;
-  height:auto;
-  -moz-filter: contrast(175%) brightness(103%);
-  -webkit-filter: contrast(175%) brightness(103%);
-  -ms-filter: contrast(175%) brightness(103%);
-  filter: contrast(175%) brightness(103%);
-}
-table.standard-table {
-  border: 1px solid rgb(187, 187, 187);
-  border-collapse: collapse;
-  border-spacing: 0px;
-  margin: 0px 0px 1.286em;
-  width: 85%;
-  height: 100%;
-}
-table.standard-table th {
-  border: 1px solid rgb(187, 187, 187);
-  padding: 0px 5px;
-  background: none repeat scroll 0% 0% rgb(238, 238, 238);
-  text-align: left;
-  font-weight: bold;
-}
-table.standard-table td {
-  padding: 5px;
-  border: 1px solid rgb(204, 204, 204);
-  text-align: left;
-  vertical-align: top;
-  width:25%;
-  height:auto;
-}
-#img3 {
-  height:100%;
-}
-</pre>
-</div>
-
-<p>{{EmbedLiveSample('combination_example','100%','209px','','', 'no-codepen')}}</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('Filters 1.0', '#FilterProperty', 'filter')}}</td>
-   <td>{{Spec2('Filters 1.0')}}</td>
-   <td>初回定義</td>
-  </tr>
- </tbody>
-</table>
-
-<div>{{cssinfo}}</div>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
-
-<p>{{Compat("css.properties.filter")}}</p>
-
-<h2 id="See_also" name="See_also">関連情報</h2>
-
-<ul>
- <li><a class="internal" href="/ja/docs/Applying_SVG_effects_to_HTML_content">HTML コンテンツへの SVG 効果の適用</a></li>
- <li>The {{cssxref("mask")}} property</li>
- <li><a class="internal" href="/ja/docs/Web/SVG">SVG</a></li>
- <li><a class="external" href="http://www.html5rocks.com/en/tutorials/filters/understanding-css/">Understanding CSS filters</a>, HTML5Rocks! article</li>
- <li><a href="http://www.coding-dude.com/wp/css/css-image-effects/">CSS Image Effects</a> using filter combinations for creating vintage photos</li>
-</ul>
diff --git a/files/ja/web/css/filter/index.md b/files/ja/web/css/filter/index.md
new file mode 100644
index 0000000000..c71814bc21
--- /dev/null
+++ b/files/ja/web/css/filter/index.md
@@ -0,0 +1,1159 @@
+---
+title: filter
+slug: Web/CSS/filter
+tags:
+  - CSS
+  - CSS プロパティ
+  - Reference
+  - SVG
+  - SVG フィルター
+  - recipe:css-property
+browser-compat: css.properties.filter
+translation_of: Web/CSS/filter
+---
+{{CSSRef}}
+
+**`filter`** は [CSS](/ja/docs/Web/CSS) のプロパティで、ぼかしや色変化などのグラフィック効果を要素に適用します。フィルターは画像、背景、境界の描画を調整するためによく使われます。
+
+CSS 標準に含まれているものは、定義済みの効果を実現するためのいくつかの関数です。[SVG の filter 要素](/ja/docs/Web/SVG/Element/filter)への URL で SVG フィルターを参照することもできます。
+
+{{EmbedInteractiveExample("pages/css/filter.html")}}
+
+## 構文
+
+```css
+/* SVG フィルターへの URL */
+filter: url("filters.svg#filter-id");
+
+/* &lt;filter-function&gt; 値 */
+filter: blur(5px);
+filter: brightness(0.4);
+filter: contrast(200%);
+filter: drop-shadow(16px 16px 20px blue);
+filter: grayscale(50%);
+filter: hue-rotate(90deg);
+filter: invert(75%);
+filter: opacity(25%);
+filter: saturate(30%);
+filter: sepia(60%);
+
+/* 複数のフィルター */
+filter: contrast(175%) brightness(3%);
+
+/* フィルターを使用しない */
+filter: none;
+
+/* グローバル値 */
+filter: inherit;
+filter: initial;
+filter: revert;
+filter: unset;
+```
+
+次のように関数と共に使用してください。
+
+```css
+filter: <filter-function> [<filter-function>]* | none
+```
+
+SVG の {{SVGElement("filter")}} 要素への参照の場合は、次のようにしてください。
+
+```css
+filter: url(file.svg#filter-element-id)
+```
+
+### 補間
+
+最初のフィルターと最後のフィルターの両方が同じ長さの関数リストであり、 {{cssxref("url()","url()")}} を持たない場合、それぞれのフィルター関数はその固有の規則に従って補間されます。長さが異なる場合は、長い方のリストから欠落している等価なフィルター関数が、空白値を使って短い方のリストの最後に追加され、すべてのフィルター関数がその固有の規則に従って補間されます。一方のフィルターが `none` である場合は、フィルター関数の既定値を用いて、もう一方のフィルター関数のリストに置き換えられ、すべてのフィルター関数がその固有の規則に従って補間されます。それ以外の場合は、離散補間が使用されます。
+
+## 関数
+
+`filter` プロパティは `none` または以下にある関数を一つ以上使って指定します。いずれかの関数の引数が妥当でない場合、関数は `none` を返します。特に示す場合を除いて、パーセント記号付きの値 (`34%` など) を取る関数は、10進数の値 (`0.34` など) も受け付けます。
+
+単一の `filter` プロパティに2つ以上の関数を指定した場合、同じフィルター関数を2つ以上の `filter` プロパティに別々に適用した場合とは異なる結果になります。
+
+### SVG フィルター
+
+#### url()
+
+外部 XML ファイルに埋め込むことができる [SVG フィルター](/ja/docs/Web/SVG/Element/filter)を指す URI を取ります。
+
+```css
+filter: url(resources.svg#c1)
+```
+
+### フィルター関数
+
+#### blur()
+
+{{cssxref("filter-function/blur()", "blur()")}} 関数は、入力画像にガウスぼかしを適用します。 `radius` の値は、ガウス関数の標準偏差の値、つまり画面上のいくつのピクセルが互いに溶け込むかを定義します。補間のための空白値は `0` です。 この引数は CSS の長さとして指定されますが、パーセント値は受け付けません。
+
+```css
+filter: blur(5px)
+```
+
+```html hidden
+  <table class="standard-table">
+  <thead>
+    <tr>
+      <th style="text-align: left;" scope="col">Original image</th>
+      <th style="text-align: left;" scope="col">Live example</th>
+      <th style="text-align: left;" scope="col">SVG Equivalent</th>
+      <th style="text-align: left;" scope="col">Static example</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td><img id="img1" class="internal default" src="test_form_2.jpeg" style="width: 100%;" /></td>
+      <td><img id="img2" class="internal default" src="test_form_2.jpeg" style="width: 100%;" /></td>
+      <td>
+        <div class="svg-container">
+          <svg id="img3" overflow="visible" viewbox="0 0 212 161" color-interpolation-filters="sRGB">
+            <filter id="svgBlur" x="-5%" y="-5%" width="110%" height="110%">
+              <feGaussianBlur in="SourceGraphic" stdDeviation="3.5"/>
+            </filter>
+            <image xlink:href="test_form_2.jpeg" filter="url(#svgBlur)" width="212px" height="161px"/>
+          </svg>
+        </div>
+      </td>
+      <td><img id="img4" class="internal default" src="test_form_2_s.jpg" style="width: 100%;" /></td>
+    </tr>
+  </tbody>
+</table>
+```
+
+```css hidden
+html {
+  height:100%;
+}
+body {
+  font: 14px/1.286 "Lucida Grande", "Lucida Sans Unicode", "DejaVu Sans", Lucida, Arial, Helvetica, sans-serif;
+  color: rgb(51, 51, 51);
+  height:100%;
+  overflow:hidden;
+}
+#img2 {
+  width:100%;
+  height:auto;
+  -webkit-filter:blur(5px);
+  -ms-filter:blur(5px);
+  filter:blur(5px); }
+table.standard-table {
+  border: 1px solid rgb(187, 187, 187);
+  border-collapse: collapse;
+  border-spacing: 0;
+  margin: 0 0 1.286em;
+  height: 100%;
+  width: 85%;
+}
+table.standard-table th {
+  border: 1px solid rgb(187, 187, 187);
+  padding: 0px 5px;
+  background: none repeat scroll 0% 0% rgb(238, 238, 238);
+  text-align: left;
+  font-weight: bold;
+}
+table.standard-table td {
+  padding: 5px;
+  border: 1px solid rgb(204, 204, 204);
+  text-align: left;
+  vertical-align: top;
+  width:25%;
+  height:auto;
+}
+#img3 {
+  height:100%;
+}
+```
+
+```svg
+<svg style="position: absolute; top: -99999px" xmlns="http://www.w3.org/2000/svg">
+  <filter id="svgBlur" x="-5%" y="-5%" width="110%" height="110%">
+    <feGaussianBlur in="SourceGraphic" stdDeviation="5"/>
+  </filter>
+</svg>
+```
+
+{{EmbedLiveSample('blur','100%','236px','','', 'no-codepen')}}
+
+#### brightness()
+
+{{cssxref("filter-function/brightness()", "brightness()")}} 関数は、入力画像に線形乗数を適用して明るさを明るくしたり暗くしたりします。 `0%` の値を設定すると、完全な黒の画像が作成されます。 `100%` の値を指定すると、入力は変更されません。その他の値は効果の線形乗数です。 `100%` を超える値が許されており、より明るい結果が得られます。補間時の空白値は `1` です。
+
+```css
+filter: brightness(2)
+```
+
+```svg
+<svg style="position: absolute; top: -99999px" xmlns="http://www.w3.org/2000/svg">
+  <filter id="brightness">
+    <feComponentTransfer>
+      <feFuncR type="linear" slope="[amount]"/>
+      <feFuncG type="linear" slope="[amount]"/>
+      <feFuncB type="linear" slope="[amount]"/>
+    </feComponentTransfer>
+  </filter>
+</svg>
+```
+
+```html hidden
+<table class="standard-table">
+  <thead>
+    <tr>
+      <th style="text-align: left;" scope="col">Original image</th>
+      <th style="text-align: left;" scope="col">Live example</th>
+      <th style="text-align: left;" scope="col">SVG Equivalent</th>
+      <th style="text-align: left;" scope="col">Static example</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td><img id="img1" class="internal default" src="test_form.jpg" style="width: 100%;" /></td>
+      <td><img id="img2" class="internal default" src="test_form.jpg" style="width: 100%;" /></td>
+      <td><div class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 286 217" color-interpolation-filters="sRGB">
+ <filter id="brightness">
+    <feComponentTransfer>
+        <feFuncR type="linear" slope="2"/>
+        <feFuncG type="linear" slope="2"/>
+        <feFuncB type="linear" slope="2"/>
+    </feComponentTransfer>
+  </filter>
+  <image xlink:href="test_form.jpg" filter="url(#brightness)" width="286px" height="217px" />
+</svg><div></td>
+      <td><img id="img4" class="internal default" src="test_form_s.jpg" style="width: 100%;" /></td>
+    </tr>
+  </tbody>
+</table>
+```
+
+```css hidden
+html {
+  height:100%;
+}
+body {
+  font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif;
+  color: rgb(51, 51, 51);
+  height:100%;
+  overflow:hidden;
+}
+#img2 {
+  width:100%;
+  height:auto;
+  -moz-filter:brightness(2);
+  -webkit-filter:brightness(2);
+  -ms-filter:brightness(2);
+  filter:brightness(2); }
+table.standard-table {
+  border: 1px solid rgb(187, 187, 187);
+  border-collapse: collapse;
+  border-spacing: 0px;
+  margin: 0px 0px 1.286em;
+  height:100%;
+  width: 85%;
+}
+table.standard-table th {
+  border: 1px solid rgb(187, 187, 187);
+  padding: 0px 5px;
+  background: none repeat scroll 0% 0% rgb(238, 238, 238);
+  text-align: left;
+  font-weight: bold;
+}
+table.standard-table td {
+  padding: 5px;
+  border: 1px solid rgb(204, 204, 204);
+  text-align: left;
+  vertical-align: top;
+  width:25%;
+  height:auto;
+}
+#img3 {
+  height:100%;
+}
+```
+
+{{EmbedLiveSample('brightness','100%','231px','','', 'no-codepen')}}
+
+#### contrast()
+
+{{cssxref("filter-function/contrast()", "contrast()")}} 関数は、入力画像のコントラストを調整します。 `0%` の値を指定すると完全にグレーの画像が作成されます。 `100%` の値を指定すると、入力画像は変更されません。 `100%` を超える値を指定すると、よりコントラストの高い結果が得られます。補完時の空白値は `1` です。
+
+```css
+filter: contrast(200%)
+```
+
+```svg
+<svg style="position: absolute; top: -99999px" xmlns="http://www.w3.org/2000/svg">
+  <filter id="contrast">
+    <feComponentTransfer>
+      <feFuncR type="linear" slope="[amount]" intercept="-(0.5 * [amount]) + 0.5"/>
+      <feFuncG type="linear" slope="[amount]" intercept="-(0.5 * [amount]) + 0.5"/>
+      <feFuncB type="linear" slope="[amount]" intercept="-(0.5 * [amount]) + 0.5"/>
+    </feComponentTransfer>
+  </filter>
+</svg>
+```
+
+```html hidden
+<table class="standard-table">
+  <thead>
+    <tr>
+      <th style="text-align: left;" scope="col">Original image</th>
+      <th style="text-align: left;" scope="col">Live example</th>
+      <th style="text-align: left;" scope="col">SVG Equivalent</th>
+      <th style="text-align: left;" scope="col">Static example</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td><img id="img1" class="internal default" src="test_form_3.jpeg" style="width: 100%;" /></td>
+      <td><img id="img2" class="internal default" src="test_form_3.jpeg" style="width: 100%;" /></td>
+      <td><div class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 240 151" color-interpolation-filters="sRGB">
+ <filter id="contrast">
+    <feComponentTransfer>
+      <feFuncR type="linear" slope="2" intercept="-0.5"/>
+      <feFuncG type="linear" slope="2" intercept="-0.5"/>
+      <feFuncB type="linear" slope="2" intercept="-0.5"/>
+    </feComponentTransfer>
+  </filter>
+  <image xlink:href="test_form_3.jpeg" filter="url(#contrast)" width="240px" height="151px" />
+</svg><div></td>
+      <td><img id="img4" class="internal default" src="test_form_3_s.jpg" style="width: 100%;" /></td>
+    </tr>
+  </tbody>
+</table>
+```
+
+```css hidden
+html {
+  height:100%;
+}
+body {
+  font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif;
+  color: rgb(51, 51, 51);
+  height:100%;
+  overflow:hidden;
+}
+#img2 {
+  width:100%;
+  height:auto;
+  -moz-filter:contrast(200%);
+  -webkit-filter:contrast(200%);
+  -ms-filter:contrast(200%);
+  filter:contrast(200%); }
+table.standard-table {
+  border: 1px solid rgb(187, 187, 187);
+  border-collapse: collapse;
+  border-spacing: 0px;
+  margin: 0px 0px 1.286em;
+  width: 85%;
+  height: 100%;
+}
+table.standard-table th {
+  border: 1px solid rgb(187, 187, 187);
+  padding: 0px 5px;
+  background: none repeat scroll 0% 0% rgb(238, 238, 238);
+  text-align: left;
+  font-weight: bold;
+}
+table.standard-table td {
+  padding: 5px;
+  border: 1px solid rgb(204, 204, 204);
+  text-align: left;
+  vertical-align: top;
+  width:25%;
+  height:auto;
+}
+#img3 {
+  height:100%;
+}
+```
+
+{{EmbedLiveSample('contrast','100%','203px','','', 'no-codepen')}}
+
+#### drop-shadow()
+
+{{cssxref("filter-function/drop-shadow()", "drop-shadow()")}} 関数は、入力画像に効果を適用します。ドロップシャドウとは、入力画像のアルファマスクを特定の色で、ずらしてぼやかして描画したものを画像の下に合成したものです。この関数は `<shadow>` 型 ([CSS3 Backgrounds](https://www.w3.org/TR/css-backgrounds-3/#typedef-shadow) で定義) の引数を受け取りますが、 `inset` キーワードは使用できません。この関数は、より確立された {{cssxref("box-shadow")}} プロパティに似ています。違いはフィルターであること、一部のブラウザーでは性能を改善するためにハードウェアアクセラレーションを提供していることです。 `<shadow>` 引数の値は次の通りです。
+
+- `<offset-x>` `<offset-y>` (必須)
+  - : 二つの {{cssxref("&lt;length&gt;")}} 値で、影をずらす大きさを設定します。 `<offset-x>` は水平の距離を指定します。負の数の場合、影を要素の左側に配置します。 `<offset-y>` は垂直の距離を指定します。負の数の場合、影を要素の上に配置します。利用可能な単位は {{cssxref("&lt;length&gt;")}} を参照してください。
+ 両方の値が `0` である場合は、影は要素の背後に配置されます (そして、 `&lt;blur-radius&gt;` や `&lt;spread-radius&gt;` を設定することで、ぼかしの効果を生成することができます)。</dd>
+- `&lt;blur-radius&gt;` (オプション)
+  - : これは三番目の {{cssxref("&lt;length&gt;")}} 値です。この値が大きくなるほど、ぼかしが大きくなり、影がより大きく薄くなります。負の数を指定することはできません。指定されなかった場合は、 `0` (影の縁がはっきりしている) になります。</dd>
+- `&lt;color&gt;` (オプション)
+  - : 指定可能なキーワードや記述方法は {{cssxref("&lt;color&gt;")}} 値を参照してください。指定されなかった場合は、使用される色はブラウザーに依存します。 - 普通は {{cssxref("&lt;color&gt;")}} プロパティの値ですが、 Safari では現在のところ、この場合には透明な影を描くことに注意してください。</dd>
+</dl>
+
+```css
+filter: drop-shadow(16px 16px 10px black)
+```
+
+```svg
+<svg style="position: absolute; top: -999999px" xmlns="http://www.w3.org/2000/svg">
+ <filter id="drop-shadow">
+    <feGaussianBlur in="SourceAlpha" stdDeviation="[radius]"/>
+    <feOffset dx="[offset-x]" dy="[offset-y]" result="offsetblur"/>
+    <feFlood flood-color="[color]"/>
+    <feComposite in2="offsetblur" operator="in"/>
+    <feMerge>
+      <feMergeNode/>
+      <feMergeNode in="SourceGraphic"/>
+    </feMerge>
+  </filter>
+</svg>
+```
+
+```html hidden
+<table class="standard-table">
+  <thead>
+    <tr>
+      <th style="text-align: left;" scope="col">Original image</th>
+      <th style="text-align: left;" scope="col">Live example</th>
+      <th style="text-align: left;" scope="col">SVG Equivalent</th>
+      <th style="text-align: left;" scope="col">Static example</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td><img id="img1" class="internal default" src="test_form_4.jpeg" style="width: 100%;" /></td>
+      <td><img id="img2" class="internal default" src="test_form_4.jpeg" style="width: 100%;" /></td>
+      <td>
+        <div class="svg-container">
+          <svg xmlns="http://www.w3.org/2000/svg" id="img3" overflow="visible" viewbox="0 0 213 161" color-interpolation-filters="sRGB">
+            <defs>
+              <image id="MyImage" xlink:href="test_form_4.jpeg" width="213px" height="161px"/>
+            </defs>
+            <filter id="drop-shadow" x="-50%" y="-50%" width="200%" height="200%">
+              <feOffset dx="9" dy="9" in="SourceAlpha"/>
+              <feGaussianBlur stdDeviation="5"/>
+            </filter>
+            <use xlink:href="#MyImage" filter="url(#drop-shadow)"/>
+            <use xlink:href="#MyImage"/>
+          </svg>
+        </div>
+      </td>
+      <td><img id="img4" class="internal default" src="test_form_4_s.jpg" style="width: 100%;" /></td>
+    </tr>
+    <tr>
+      <td><img alt="test_form_4 distorted border - Original image" id="img11" class="internal default" src="test_form_4_irregular-shape_opacity-gradient.png" style="width: 100%;" /></td>
+      <td><img alt="test_form_4 distorted border - Live example" id="img12" class="internal default" src="test_form_4_irregular-shape_opacity-gradient.png" style="width: 100%;" /></td>
+      <td>
+        <div class="svg-container">
+          <svg xmlns="http://www.w3.org/2000/svg" id="img13" overflow="visible" viewbox="0 0 213 161" color-interpolation-filters="sRGB">
+            <defs>
+              <image id="MyImage2" xlink:href="test_form_4_irregular-shape_opacity-gradient.png" width="213px" height="161px"/>
+            </defs>
+            <filter id="drop-shadow2" x="-50%" y="-50%" width="200%" height="200%">
+              <feOffset dx="5" dy="5.5" in="SourceAlpha"/>
+              <feGaussianBlur stdDeviation="2.5"/>
+              <feComponentTransfer>
+                <feFuncA type="table" tableValues="0 0.8"/>
+              </feComponentTransfer>
+            </filter>
+            <use xlink:href="#MyImage2" filter="url(#drop-shadow2)"/>
+            <use xlink:href="#MyImage2"/>
+          </svg>
+        </div>
+      </td>
+      <td><img alt="test_form_4 distorted border drop shadow - Static example" id="img14" class="internal default" src="test_form_4_irregular-shape_opacity-gradient_drop-shadow.png" style="width: 100%;" /></td>
+    </tr>
+  </tbody>
+</table>
+```
+
+```css hidden
+html {
+  height:100%;
+}
+body {
+  font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif;
+  color: rgb(51, 51, 51);
+  height:100%;
+  overflow:hidden;
+}
+#img2 {
+  width:100%;
+  height:auto;
+  -moz-filter: drop-shadow(16px 16px 10px black);
+  -webkit-filter: drop-shadow(16px 16px 10px black);
+  -ms-filter: drop-shadow(16px 16px 10px black);
+  filter: drop-shadow(16px 16px 10px black);
+}
+#img12 {
+  width:100%;
+  height:auto;
+  -moz-filter: drop-shadow(8px 9px 5px rgba(0,0,0,.8));
+  -webkit-filter: drop-shadow(8px 9px 5px rgba(0,0,0,.8));
+  -ms-filter: drop-shadow(8px 9px 5px rgba(0,0,0,.8));
+  filter: drop-shadow(8px 9px 5px rgba(0,0,0,.8));
+}
+table.standard-table {
+  border: 1px solid rgb(187, 187, 187);
+  border-collapse: collapse;
+  border-spacing: 0px;
+  margin: 0px 0px 1.286em;
+  width: 85%;
+  height: 100%;
+}
+#irregular-shape {
+  width: 64%;
+}
+table.standard-table th {
+  border: 1px solid rgb(187, 187, 187);
+  padding: 0px 5px;
+  background: none repeat scroll 0% 0% rgb(238, 238, 238);
+  text-align: left;
+  font-weight: bold;
+}
+table.standard-table td {
+  padding: 5px;
+  border: 1px solid rgb(204, 204, 204);
+  text-align: left;
+  vertical-align: top;
+  width:25%;
+  height:auto;
+}
+#img3, #img13 {
+  width:100%;
+  height:auto;
+}
+```
+
+{{EmbedLiveSample('drop-shadow','100%','400px','','', 'no-codepen')}}
+
+#### grayscale()
+
+{{cssxref("filter-function/grayscale()", "grayscale()")}} 関数は入力画像をグレースケールに変換します。 `amount` の値は変換の程度を定義します。 `100%` の値は完全にグレースケールになります。 `0%` では入力画像が変化しないままになります。 `0%` と `100%` の間は効果の線形乗数になります。補完時の空白値は `0` です。
+
+```css
+filter: grayscale(100%)
+```
+
+```html hidden
+<table class="standard-table">
+  <thead>
+    <tr>
+      <th style="text-align: left;" scope="col">Original image</th>
+      <th style="text-align: left;" scope="col">Live example</th>
+      <th style="text-align: left;" scope="col">SVG Equivalent</th>
+      <th style="text-align: left;" scope="col">Static example</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td><img id="img1" class="internal default" src="test_form_5.jpeg" style="width: 100%;" /></td>
+      <td><img id="img2" class="internal default" src="test_form_5.jpeg" style="width: 100%;" /></td>
+      <td><div class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 276 184" color-interpolation-filters="sRGB">
+ <filter id="grayscale">
+    <feColorMatrix type="matrix"
+               values="0.2126 0.7152 0.0722 0 0
+                       0.2126 0.7152 0.0722 0 0
+                       0.2126 0.7152 0.0722 0 0
+                       0 0 0 1 0"/>
+  </filter>
+  <image xlink:href="test_form_5.jpeg" filter="url(#grayscale)" width="276px" height="184px" />
+</svg><div></td>
+      <td><img id="img4" class="internal default" src="test_form_5_s.jpg" style="width: 100%;" /></td>
+    </tr>
+  </tbody>
+</table>
+```
+
+```css hidden
+html {
+  height:100%;
+}
+body {
+  font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif;
+  color: rgb(51, 51, 51);
+  height:100%;
+  overflow:hidden;
+}
+#img2 {
+  width:100%;
+  height:auto;
+  -moz-filter:grayscale(100%);
+  -webkit-filter:grayscale(100%);
+  -ms-filter:grayscale(100%);
+  filter:grayscale(100%); }
+table.standard-table {
+  border: 1px solid rgb(187, 187, 187);
+  border-collapse: collapse;
+  border-spacing: 0px;
+  margin: 0px 0px 1.286em;
+  width: 85%;
+  height: 100%;
+}
+table.standard-table th {
+  border: 1px solid rgb(187, 187, 187);
+  padding: 0px 5px;
+  background: none repeat scroll 0% 0% rgb(238, 238, 238);
+  text-align: left;
+  font-weight: bold;
+}
+table.standard-table td {
+  padding: 5px;
+  border: 1px solid rgb(204, 204, 204);
+  text-align: left;
+  vertical-align: top;
+  width:25%;
+  height:auto;
+}
+#img3 {
+  height:100%;
+}
+```
+
+{{EmbedLiveSample('grayscale','100%','209px','','', 'no-codepen')}}
+
+#### hue-rotate()
+
+{{cssxref("filter-function/hue-rotate()", "hue-rotate()")}} 関数は、入力画像の色相を回転させます。 `angle` の値は、色相環を何度回転させて入力サンプルを調整するかを定義します。 `0deg` の値を指定すると入力は変更されません。補完時の空白値は `0` です。最大値はありませんが、 `360deg` を超える値の以上の値の場合は回り込みになります。
+
+```css
+filter: hue-rotate(90deg)
+```
+
+```html hidden
+<table class="standard-table">
+  <thead>
+    <tr>
+      <th style="text-align: left;" scope="col">Original image</th>
+      <th style="text-align: left;" scope="col">Live example</th>
+      <th style="text-align: left;" scope="col">SVG Equivalent</th>
+      <th style="text-align: left;" scope="col">Static example</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td><img id="img1" class="internal default" src="test_form_6.jpeg" style="width: 100%;" /></td>
+      <td><img id="img2" class="internal default" src="test_form_6.jpeg" style="width: 100%;" /></td>
+      <td><div class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 266 190" color-interpolation-filters="sRGB">
+ <filter id="hue-rotate">
+    <feColorMatrix type="hueRotate"
+               values="90"/>
+  </filter>
+  <image xlink:href="test_form_6.jpeg" filter="url(#hue-rotate)" width="266px" height="190px" />
+</svg><div></td>
+      <td><img id="img4" class="internal default" src="test_form_6_s.jpg" style="width: 100%;" /></td>
+    </tr>
+  </tbody>
+</table>
+```
+
+```css hidden
+html {
+  height:100%;
+}
+body {
+  font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif;
+  color: rgb(51, 51, 51);
+  height:100%;
+  overflow:hidden;
+}
+#img2 {
+  width:100%;
+  height:auto;
+  -moz-filter:hue-rotate(90deg);
+  -webkit-filter:hue-rotate(90deg);
+  -ms-filter:hue-rotate(90deg);
+  filter:hue-rotate(90deg); }
+table.standard-table {
+  border: 1px solid rgb(187, 187, 187);
+  border-collapse: collapse;
+  border-spacing: 0px;
+  margin: 0px 0px 1.286em;
+  width: 85%;
+  height: 100%;
+}
+table.standard-table th {
+  border: 1px solid rgb(187, 187, 187);
+  padding: 0px 5px;
+  background: none repeat scroll 0% 0% rgb(238, 238, 238);
+  text-align: left;
+  font-weight: bold;
+}
+table.standard-table td {
+  padding: 5px;
+  border: 1px solid rgb(204, 204, 204);
+  text-align: left;
+  vertical-align: top;
+  width:25%;
+  height:auto;
+}
+#img3 {
+  height:100%;
+}
+```
+
+```html
+<svg style="position: absolute; top: -999999px" xmlns="http://www.w3.org/2000/svg">
+  <filter id="svgHueRotate">
+    <feColorMatrix type="hueRotate" values="[angle]"/>
+  </filter>
+</svg>
+```
+
+{{EmbedLiveSample('hue-rotate','100%','221px','','', 'no-codepen')}}
+
+#### invert()
+
+{{cssxref("filter-function/invert()", "invert()")}} 関数は、入力画像のサンプルを反転します。 `amount` の値は、変換の度合を定義します。 `100%` の値を指定すると、完全に反転されます。 `0%` では入力画像が変化しないままになります。 `0%` と `100%` の間は効果の線形乗数になります。補完時の空白値は `0` です。
+
+```css
+filter: invert(100%)
+```
+
+```html hidden
+<table class="standard-table">
+  <thead>
+    <tr>
+      <th style="text-align: left;" scope="col">Original image</th>
+      <th style="text-align: left;" scope="col">Live example</th>
+      <th style="text-align: left;" scope="col">SVG Equivalent</th>
+      <th style="text-align: left;" scope="col">Static example</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td><img id="img1" class="internal default" src="test_form_7.jpeg" style="width: 100%;" /></td>
+      <td><img id="img2" class="internal default" src="test_form_7.jpeg" style="width: 100%;" /></td>
+      <td><div class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 183 276" color-interpolation-filters="sRGB">
+ <filter id="invert">
+    <feComponentTransfer>
+        <feFuncR type="table" tableValues="1 0"/>
+        <feFuncG type="table" tableValues="1 0"/>
+        <feFuncB type="table" tableValues="1 0"/>
+    </feComponentTransfer>
+ </filter>
+ <image xlink:href="test_form_7.jpeg" filter="url(#invert)" width="183px" height="276px" />
+</svg><div></td>
+      <td><img id="img4" class="internal default" src="test_form_7_s.jpg" style="width: 100%;" /></td>
+    </tr>
+  </tbody>
+</table>
+```
+
+```css hidden
+html {
+  height:100%;
+}
+body {
+  font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif;
+  color: rgb(51, 51, 51);
+  height:100%;
+  overflow:hidden;
+}
+#img2 {
+  width:100%;
+  height:auto;
+  -moz-filter: invert(100%);
+  -webkit-filter: invert(100%);
+  -ms-filter: invert(100%);
+  filter: invert(100%); }
+table.standard-table {
+  border: 1px solid rgb(187, 187, 187);
+  border-collapse: collapse;
+  border-spacing: 0px;
+  margin: 0px 0px 1.286em;
+  width: 85%;
+  height: 100%;
+}
+table.standard-table th {
+  border: 1px solid rgb(187, 187, 187);
+  padding: 0px 5px;
+  background: none repeat scroll 0% 0% rgb(238, 238, 238);
+  text-align: left;
+  font-weight: bold;
+}
+table.standard-table td {
+  padding: 5px;
+  border: 1px solid rgb(204, 204, 204);
+  text-align: left;
+  vertical-align: top;
+  width:25%;
+  height:auto;
+}
+#img3 {
+  height:100%;
+}
+```
+
+{{EmbedLiveSample('invert','100%','407px','','', 'no-codepen')}}
+
+#### opacity()
+
+{{cssxref("filter-function/opacity()", "opacity()")}} 関数は、入力画像のサンプルに透過度を適用します。 `amount` の値は、変換の度合を定義します。 `0%` の値を指定すると、完全に透明になります。 `100%` では入力画像が変化しないままになります。 `0%` と `100%` の間は効果の線形乗数になります。これは、入力画像のサンプルに量を乗算することに相当します。補完時の空白値は `1` です。この関数は、より確立された {{cssxref("opacity")}} プロパティに似ていますが、フィルターの場合、一部のブラウザーでは性能を向上させるためにハードウェアアクセラレーションを提供する点が異なります。
+
+```css
+filter: opacity(50%)
+```
+
+```html hidden
+<table class="standard-table">
+  <thead>
+    <tr>
+      <th style="text-align: left;" scope="col">Original image</th>
+      <th style="text-align: left;" scope="col">Live example</th>
+      <th style="text-align: left;" scope="col">SVG Equivalent</th>
+      <th style="text-align: left;" scope="col">Static example</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td><img id="img1" class="internal default" src="test_form_14.jpeg" style="width: 100%;" /></td>
+      <td><img id="img2" class="internal default" src="test_form_14.jpeg" style="width: 100%;" /></td>
+      <td><div class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 276 183" color-interpolation-filters="sRGB">
+ <filter id="opacity">
+    <feComponentTransfer>
+        <feFuncA type="table" tableValues="0 0.5">
+    </feComponentTransfer>
+ </filter>
+ <image xlink:href="test_form_14.jpeg" filter="url(#opacity)" width="276px" height="183px" />
+</svg><div></td>
+      <td><img id="img4" class="internal default" src="test_form_14_s.jpg" style="width: 100%;" /></td>
+    </tr>
+  </tbody>
+</table>
+```
+
+```css hidden
+html {
+  height:100%;
+}
+body {
+  font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif;
+  color: rgb(51, 51, 51);
+  height:100%;
+  overflow:hidden;
+}
+#img2 {
+  width:100%;
+  height:auto;
+  -moz-filter: opacity(50%);
+  -webkit-filter: opacity(50%);
+  -ms-filter: opacity(50%);
+  filter: opacity(50%); }
+table.standard-table {
+  border: 1px solid rgb(187, 187, 187);
+  border-collapse: collapse;
+  border-spacing: 0px;
+  margin: 0px 0px 1.286em;
+  width: 85%;
+  height: 100%;
+}
+table.standard-table th {
+  border: 1px solid rgb(187, 187, 187);
+  padding: 0px 5px;
+  background: none repeat scroll 0% 0% rgb(238, 238, 238);
+  text-align: left;
+  font-weight: bold;
+}
+table.standard-table td {
+  padding: 5px;
+  border: 1px solid rgb(204, 204, 204);
+  text-align: left;
+  vertical-align: top;
+  width:25%;
+  height:auto;
+}
+#img3 {
+  height:100%;
+}
+```
+
+{{EmbedLiveSample('opacity','100%','210px','','', 'no-codepen')}}
+
+#### saturate()
+
+{{cssxref("filter-function/saturate()", "saturate()")}} 関数は、入力画像の彩度を変化させます。 `amount` の値は、変換の度合を定義します。 `0%` の値を指定すると、無彩色になります。 `100%` では入力画像が変化しないままになります。 `0%` と `100%` の間は効果の線形乗数になります。 `100%` を超える値を指定することもでき、彩度を増した結果になります。補完時の空白値は `1` です。
+
+```css
+filter: saturate(200%)
+```
+
+```html hidden
+<table class="standard-table">
+  <thead>
+    <tr>
+      <th style="text-align: left;" scope="col">Original image</th>
+      <th style="text-align: left;" scope="col">Live example</th>
+      <th style="text-align: left;" scope="col">SVG Equivalent</th>
+      <th style="text-align: left;" scope="col">Static example</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td><img id="img1" class="internal default" src="test_form_9.jpeg" style="width: 100%;" /></td>
+      <td><img id="img2" class="internal default" src="test_form_9.jpeg" style="width: 100%;" /></td>
+      <td><div class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 201 239" color-interpolation-filters="sRGB">
+ <filter id="saturate">
+    <feColorMatrix type="saturate"
+               values="2"/>
+ </filter>
+ <image xlink:href="test_form_9.jpeg" filter="url(#saturate)" width="201px" height="239px" />
+</svg><div></td>
+      <td><img id="img4" class="internal default" src="test_form_9_s.jpg" style="width: 100%;" /></td>
+    </tr>
+  </tbody>
+</table>
+```
+
+```css hidden
+html {
+  height:100%;
+}
+body {
+  font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif;
+  color: rgb(51, 51, 51);
+  height:100%;
+  overflow:hidden;
+}
+#img2 {
+  width:100%;
+  height:auto;
+  -moz-filter: saturate(200%);
+  -webkit-filter: saturate(200%);
+  -ms-filter: saturate(200%);
+  filter: saturate(200%); }
+table.standard-table {
+  border: 1px solid rgb(187, 187, 187);
+  border-collapse: collapse;
+  border-spacing: 0px;
+  margin: 0px 0px 1.286em;
+  width: 85%;
+  height: 100%;
+}
+table.standard-table th {
+  border: 1px solid rgb(187, 187, 187);
+  padding: 0px 5px;
+  background: none repeat scroll 0% 0% rgb(238, 238, 238);
+  text-align: left;
+  font-weight: bold;
+}
+table.standard-table td {
+  padding: 5px;
+  border: 1px solid rgb(204, 204, 204);
+  text-align: left;
+  vertical-align: top;
+  width:25%;
+  height:auto;
+}
+#img3 {
+  height:100%;
+}
+```
+
+{{EmbedLiveSample('saturate','100%','332px','','', 'no-codepen')}}
+
+#### sepia()
+
+{{cssxref("filter-function/sepia()", "sepia()")}} 関数は、入力画像をセピア調にします。 `amount` の値は、変換の度合を定義します。 `100%` の値を指定すると、完全にセピア調になります。 `0%` では入力画像が変化しないままになります。 `0%` と `100%` の間は効果の線形乗数になります。補完時の空白値は `0` です。
+
+```css
+filter: sepia(100%)
+```
+
+```html hidden
+<table class="standard-table">
+  <thead>
+    <tr>
+      <th style="text-align: left;" scope="col">Original image</th>
+      <th style="text-align: left;" scope="col">Live example</th>
+      <th style="text-align: left;" scope="col">SVG Equivalent</th>
+      <th style="text-align: left;" scope="col">Static example</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td><img id="img1" class="internal default" src="test_form_12.jpeg" style="width: 100%;" /></td>
+      <td><img id="img2" class="internal default" src="test_form_12.jpeg" style="width: 100%;" /></td>
+      <td><div class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 259 194" color-interpolation-filters="sRGB">
+ <filter id="sepia">
+    <feColorMatrix type="matrix"
+               values="0.393 0.769 0.189 0 0
+                       0.349 0.686 0.168 0 0
+                       0.272 0.534 0.131 0 0
+                       0 0 0 1 0"/>
+ </filter>
+ <image xlink:href="test_form_12.jpeg" filter="url(#sepia)" width="259px" height="194px" />
+</svg><div></td>
+      <td><img id="img4" class="internal default" src="test_form_12_s.jpg" style="width: 100%;" /></td>
+    </tr>
+  </tbody>
+</table>
+```
+
+```css hidden
+html {
+  height:100%;
+}
+body {
+  font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif;
+  color: rgb(51, 51, 51);
+  height:100%;
+  overflow:hidden;
+}
+#img2 {
+  width:100%;
+  height:auto;
+  -moz-filter: sepia(100%);
+  -webkit-filter: sepia(100%);
+  -ms-filter: sepia(100%);
+  filter: sepia(100%); }
+table.standard-table {
+  border: 1px solid rgb(187, 187, 187);
+  border-collapse: collapse;
+  border-spacing: 0px;
+  margin: 0px 0px 1.286em;
+  width: 85%;
+  height: 100%;
+}
+table.standard-table th {
+  border: 1px solid rgb(187, 187, 187);
+  padding: 0px 5px;
+  background: none repeat scroll 0% 0% rgb(238, 238, 238);
+  text-align: left;
+  font-weight: bold;
+}
+table.standard-table td {
+  padding: 5px;
+  border: 1px solid rgb(204, 204, 204);
+  text-align: left;
+  vertical-align: top;
+  width:25%;
+  height:auto;
+}
+#img3 {
+  height:100%;
+}
+```
+
+{{EmbedLiveSample('sepia','100%','229px','','', 'no-codepen')}}
+
+<h2 id="Combining_functions">関数の組み合わせ</h2>
+
+いくつかの関数を組み合わせてレンダリングを操作することができます。次の例では、画像のコントラストと明るさを強調しています。
+
+```css
+filter: contrast(175%) brightness(103%)
+```
+
+```html hidden
+<table class="standard-table">
+  <thead>
+    <tr>
+      <th style="text-align: left;" scope="col">Original image</th>
+      <th style="text-align: left;" scope="col">Live example</th>
+      <th style="text-align: left;" scope="col">Static example</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td><img id="img1" class="internal default" src="test_form_8.jpeg" style="width: 100%;" /></td>
+      <td><img id="img2" class="internal default" src="test_form_8.jpeg" style="width: 100%;" /></td>
+      <td><img id="img4" class="internal default" src="test_form_8_s.jpg" style="width: 100%;" /></td>
+    </tr>
+  </tbody>
+</table>
+```
+
+```css hidden
+html {
+  height:100%;
+}
+body {
+  font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif;
+  color: rgb(51, 51, 51);
+  height:100%;
+  overflow:hidden;
+}
+#img2 {
+  width:100%;
+  height:auto;
+  -moz-filter: contrast(175%) brightness(103%);
+  -webkit-filter: contrast(175%) brightness(103%);
+  -ms-filter: contrast(175%) brightness(103%);
+  filter: contrast(175%) brightness(103%);
+}
+table.standard-table {
+  border: 1px solid rgb(187, 187, 187);
+  border-collapse: collapse;
+  border-spacing: 0px;
+  margin: 0px 0px 1.286em;
+  width: 85%;
+  height: 100%;
+}
+table.standard-table th {
+  border: 1px solid rgb(187, 187, 187);
+  padding: 0px 5px;
+  background: none repeat scroll 0% 0% rgb(238, 238, 238);
+  text-align: left;
+  font-weight: bold;
+}
+table.standard-table td {
+  padding: 5px;
+  border: 1px solid rgb(204, 204, 204);
+  text-align: left;
+  vertical-align: top;
+  width:25%;
+  height:auto;
+}
+#img3 {
+  height:100%;
+}
+```
+
+{{EmbedLiveSample('Combining_functions','100%','209px','','', 'no-codepen')}}
+
+## 公式定義
+
+{{cssinfo}}
+
+## 形式文法
+
+{{csssyntax}}
+
+## 例
+
+### フィルター関数の適用
+
+定義済み関数を使用した例が以下にあります。個別の例についてはそれぞれの関数を参照してください。
+
+```css
+.mydiv {
+  filter: grayscale(50%);
+}
+
+/* Gray all images by 50% and blur by 10px */
+img {
+  filter: grayscale(0.5) blur(10px);
+}
+```
+
+### SVG フィルターの適用
+
+URL 関数を使用して SVG リソースを使用した例は以下の通りです。
+
+```css
+.target {
+  filter: url(#c1);
+}
+
+.mydiv {
+  filter: url(commonfilters.xml#large-blur);
+}
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- [HTML コンテンツへの SVG 効果の適用](/ja/docs/Web/SVG/Applying_SVG_effects_to_HTML_content)
+- {{cssxref("mask")}} プロパティ
+- [SVG](/ja/docs/Web/SVG)
diff --git a/files/ja/web/css/flex-shrink/index.html b/files/ja/web/css/flex-shrink/index.html
deleted file mode 100644
index 16392cd2d4..0000000000
--- a/files/ja/web/css/flex-shrink/index.html
+++ /dev/null
@@ -1,126 +0,0 @@
----
-title: flex-shrink
-slug: Web/CSS/flex-shrink
-tags:
-  - CSS
-  - CSS Flexible Boxes
-  - CSS Property
-  - CSS フレックスボックス
-  - NeedsContent
-  - Reference
-  - 'recipe:css-property'
-translation_of: Web/CSS/flex-shrink
----
-<div>{{CSSRef}}</div>
-
-<p><span class="seoSummary"><strong><code>flex-shrink</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、フレックスアイテムの縮小係数を設定します。すべてのフレックスアイテムの寸法がフレックスコンテナーよりも大きい場合、アイテムは <code>flex-shrink</code> の数値に従って縮小して収まります。</span></p>
-
-<p>使用時は <code>flex-shrink</code> は {{cssxref("flex-grow")}} や {{cssxref("flex-basis")}} などの他のフレックスプロパティと共に使用され、ふつうは {{cssxref("flex")}} の一括指定を使用して定義されます。</p>
-
-<div>{{EmbedInteractiveExample("pages/css/flex-shrink.html")}}</div>
-
-<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p>
-
-<h2 id="Syntax" name="Syntax">構文</h2>
-
-<pre class="brush:css no-line-numbers notranslate">/* &lt;number&gt; 値 */
-flex-shrink: 2;
-flex-shrink: 0.6;
-
-/* グローバル値 */
-flex-shrink: inherit;
-flex-shrink: initial;
-flex-shrink: unset;
-</pre>
-
-<p><code>flex-shrink</code> プロパティは単一の <code><a href="#&lt;number>">&lt;number&gt;</a></code> で指定します。</p>
-
-<h3 id="Values" name="Values">値</h3>
-
-<dl>
- <dt><code id="&lt;number>">&lt;number&gt;</code></dt>
- <dd>{{cssxref("&lt;number&gt;")}} をご覧ください。負の値は無効です。既定値は 1 です。</dd>
-</dl>
-
-<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
-
-{{csssyntax}}
-
-<h2 id="Examples" name="Examples">例</h2>
-
-<h3 id="フレックスアイテムの縮小係数の設定">フレックスアイテムの縮小係数の設定</h3>
-
-<h4 id="HTML">HTML</h4>
-
-<div id="Live_Sample">
-<pre class="brush: html notranslate">&lt;p&gt;全体の幅は 500px で、フレックスアイテムの flex-basis は 120px です。&lt;/p&gt;
-&lt;p&gt;A、B、C には flex-shrink:1 が、D と E には flex-shrink:2 が設定されています。&lt;/p&gt;
-&lt;p&gt;D と E の幅は他より狭くなります。&lt;/p&gt;
-&lt;div id="content"&gt;
-  &lt;div class="box" style="background-color:red;"&gt;A&lt;/div&gt;
-  &lt;div class="box" style="background-color:lightblue;"&gt;B&lt;/div&gt;
-  &lt;div class="box" style="background-color:yellow;"&gt;C&lt;/div&gt;
-  &lt;div class="box1" style="background-color:brown;"&gt;D&lt;/div&gt;
-  &lt;div class="box1" style="background-color:lightgreen;"&gt;E&lt;/div&gt;
-&lt;/div&gt;
-</pre>
-
-<h4 id="CSS">CSS</h4>
-
-<pre class="brush: css notranslate">#content {
-  display: flex;
-  width: 500px;
-}
-
-#content div {
-  flex-basis: 120px;
-  border: 3px solid rgba(0,0,0,.2);
-}
-
-.box {
-  flex-shrink: 1;
-}
-
-.box1 {
-  flex-shrink: 2;
-}
-</pre>
-</div>
-
-<h4 id="Result" name="Result">結果</h4>
-
-<p>{{EmbedLiveSample('Setting_flex_item_shrink_factor', 500, 300)}}</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('CSS3 Flexbox', '#flex-shrink', 'flex-shrink')}}</td>
-   <td>{{Spec2('CSS3 Flexbox')}}</td>
-   <td>初回定義</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
-
-<p>{{Compat("css.properties.flex-shrink")}}</p>
-
-<h2 id="See_also" name="See_also">関連情報</h2>
-
-<ul>
- <li>CSS フレックスボックスガイド: <em><a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">フレックスボックスの基本概念</a></em></li>
- <li>CSS フレックスボックスガイド: <em><a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax">フレックスアイテムの主軸方向における比率の制御</a></em></li>
-</ul>
diff --git a/files/ja/web/css/flex-shrink/index.md b/files/ja/web/css/flex-shrink/index.md
new file mode 100644
index 0000000000..7984548518
--- /dev/null
+++ b/files/ja/web/css/flex-shrink/index.md
@@ -0,0 +1,108 @@
+---
+title: flex-shrink
+slug: Web/CSS/flex-shrink
+tags:
+  - CSS
+  - CSS Flexible Boxes
+  - CSS Property
+  - CSS フレックスボックス
+  - NeedsContent
+  - Reference
+  - recipe:css-property
+browser-compat: css.properties.flex-shrink
+translation_of: Web/CSS/flex-shrink
+---
+{{CSSRef}}
+
+**`flex-shrink`** は [CSS](/ja/docs/Web/CSS) のプロパティで、フレックスアイテムの縮小係数を設定します。すべてのフレックスアイテムの寸法がフレックスコンテナーよりも大きい場合、アイテムは `flex-shrink` の数値に従って縮小して収まります。
+
+使用時は `flex-shrink` は {{cssxref("flex-grow")}} や {{cssxref("flex-basis")}} などの他のフレックスプロパティと共に使用され、ふつうは {{cssxref("flex")}} の一括指定を使用して定義されます。
+
+{{EmbedInteractiveExample("pages/css/flex-shrink.html")}}
+
+## 構文
+
+```css
+/* <number> 値 */
+flex-shrink: 2;
+flex-shrink: 0.6;
+
+/* グローバル値 */
+flex-shrink: inherit;
+flex-shrink: initial;
+flex-shrink: revert;
+flex-shrink: unset;
+```
+
+`flex-shrink` プロパティは単一の `<number>` で指定します。
+
+### 値
+
+- `<number>`
+  - : {{cssxref("&lt;number&gt;")}} を参照してください。負の値は無効です。既定値は 1 です。
+
+## 公式定義
+
+{{cssinfo}}
+
+## 形式文法
+
+{{csssyntax}}
+
+## 例
+
+<h3 id="Setting_flex_item_shrink_factor">フレックスアイテムの縮小係数の設定</h3>
+
+#### HTML
+
+```html
+<p>全体の幅は 500px で、フレックスアイテムの flex-basis は 120px です。</p>
+<p>A、B、C には flex-shrink:1 が、D と E には flex-shrink:2 が設定されています。</p>
+<p>D と E の幅は他より狭くなります。</p>
+<div id="content">
+  <div class="box" style="background-color:red;">A</div>
+  <div class="box" style="background-color:lightblue;">B</div>
+  <div class="box" style="background-color:yellow;">C</div>
+  <div class="box1" style="background-color:brown;">D</div>
+  <div class="box1" style="background-color:lightgreen;">E</div>
+</div>
+```
+
+#### CSS
+
+```css
+#content {
+  display: flex;
+  width: 500px;
+}
+
+#content div {
+  flex-basis: 120px;
+  border: 3px solid rgba(0,0,0,.2);
+}
+
+.box {
+  flex-shrink: 1;
+}
+
+.box1 {
+  flex-shrink: 2;
+}
+```
+
+#### 結果
+
+{{EmbedLiveSample('Setting_flex_item_shrink_factor', 500, 300)}}
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- CSS フレックスボックスガイド: _[フレックスボックスの基本概念](/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox)_
+- CSS フレックスボックスガイド: _[フレックスアイテムの主軸方向における比率の制御](/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax)_
diff --git a/files/ja/web/css/font-variant-alternates/index.html b/files/ja/web/css/font-variant-alternates/index.html
deleted file mode 100644
index 19abc10c3d..0000000000
--- a/files/ja/web/css/font-variant-alternates/index.html
+++ /dev/null
@@ -1,126 +0,0 @@
----
-title: font-variant-alternates
-slug: Web/CSS/font-variant-alternates
-tags:
-  - CSS
-  - CSS Fonts
-  - CSS Property
-  - Reference
-translation_of: Web/CSS/font-variant-alternates
----
-<div>{{CSSRef}}</div>
-
-<p><span class="seoSummary"><strong><code>font-variant-alternates</code></strong>CSSプロパティは代替グリフの使用を制御します。代替グリフは{{cssxref("@font-feature-values")}}で定義された代替名で参照される可能性があります。</span></p>
-
-<pre class="brush:css no-line-numbers">/* 予約語 */
-font-variant-alternates: normal;
-font-variant-alternates: historical-forms;
-
-/* 函数表記値 */
-font-variant-alternates: stylistic(user-defined-ident);
-font-variant-alternates: styleset(user-defined-ident);
-font-variant-alternates: character-variant(user-defined-ident);
-font-variant-alternates: swash(user-defined-ident);
-font-variant-alternates: ornaments(user-defined-ident);
-font-variant-alternates: annotation(user-defined-ident);
-font-variant-alternates: swash(ident1) annotation(ident2);
-
-/* 大域値 */
-font-variant-alternates: initial;
-font-variant-alternates: inherit;
-font-variant-alternates: unset;
-</pre>
-
-<p>{{cssxref("@font-feature-values")}}@規則は，OpenType機能と関連付けられた代替グリフ函数（<code>stylistic</code>，<code>styleset</code>，<code>character-variant</code>，<code>swash</code>，<code>ornament</code>，又は<code>annotation</code>）用の名前を定義できます。本プロパティを用いて，（{{cssxref("@font-feature-values")}}で定義された）対人可読な名前をスタイルシートで使うことができます。</p>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="書式">書式</h2>
-
-<p>本プロパティは二つの形式の内一方を取ります:</p>
-
-<ul>
- <li>予約語<code>normal</code></li>
- <li>一又は複数の後掲した他の予約語及び函数（空白区切り・順不同）</li>
-</ul>
-
-<h3 id="値">値</h3>
-
-<dl>
- <dt><code>normal</code></dt>
- <dd>この予約語は代替グリフを無効にします。</dd>
- <dt><code>historical-forms</code></dt>
- <dd>この予約語は歴史的形式――過去には一般的だったけれども今日そうではないグリフ――を有効にします。OpenTypeの<code>hist</code>機能タグに相当します。</dd>
- <dt><code><a name="stylistic()"></a>stylistic()</code></dt>
- <dd>この函数は個々の文字に対する様式的代替 (stylistic alternates) を有効にします。引数には数値に割り当てられたフォント固有の名称を指定します。OpenTypeの<code>salt</code>機能タグ（例: <code>salt 2</code>）に相当します。</dd>
- <dt><code><a name="styleset()"></a>styleset()</code></dt>
- <dd>この函数は一連の文字に対する様式的代替を有効にします。引数には数値に割り当てられたフォント固有の名称を指定します。OpenTypeの<code>ssXY</code>機能タグ（例: <code>ss02</code>）に相当します。</dd>
- <dt><code><a name="character-variant()"></a>character-variant()</code></dt>
- <dd>この函数は文字に対する様式的代替を有効にします。<code>styleset()</code>に似ていますが，一連の文字に対して一貫したグリフを作成せず，個々の文字が持つ様式は独立しており整合する必要はありません。引数には数値に割り当てられたフォント固有の名称を指定します。OpenTypeの<code>cvXY</code>機能タグ（例: <code>cv02</code>）に相当します。</dd>
- <dt><code><a name="swash()"></a>swash()</code></dt>
- <dd>この函数は<a href="https://en.wikipedia.org/wiki/Swash_%28typography%29">先端装飾</a>〔訳注: グリフの先端を流線的に延長する装飾。<a href="http://www.fishtailstudio.com/others/gd201601.pdf#page=252">訳語参考</a>〕グリフを有効にします。引数には数値に割り当てられたフォント固有の名称を指定します。OpenTypeの<code>swsh</code>及び<code>cswh</code>機能タグ（例: <code>swsh 2</code>及び<code>cswh 2</code>）に相当します。</dd>
- <dt><code><a name="ornaments()"></a>ornaments()</code></dt>
- <dd>この函数は<a href="https://ja.wikipedia.org/wiki/%E3%83%95%E3%83%AB%E3%83%BC%E3%83%AD%E3%83%B3">花形装飾活字</a>及び他の飾り文字グリフのような装飾を有効にします。引数には数値に割り当てられたフォント固有の名称を指定します。OpenTypeの<code>ornm</code>機能タグ（例: <code>ornm 2</code>）に相当します。
- <div class="note"><strong>注意:</strong> 文義を維持する目的で，フォント設計者は，箇条書き記号 (U+2022) の装飾的変形としてのUnicodeの飾り文字とマッチしないような装飾を含めるべきです。幾つかの既存のフォントがこの助言に従っていないことに留意して下さい。</div>
- </dd>
- <dt><code><a name="annotation()"></a>annotation()</code></dt>
- <dd>この函数は丸数字又は鏡文字などの表記を有効にします。引数には数値に割り当てられたフォント固有の名称を指定します。OpenTypeの<code>nalt</code>機能タグ（例: <code>nalt 2</code>）に相当します。</dd>
-</dl>
-
-<h3 id="形式文法">形式文法</h3>
-
-{{csssyntax}}
-
-<h2 id="例">例</h2>
-
-<h3 id="HTML">HTML</h3>
-
-<pre class="brush: html">&lt;p&gt;Firefox rocks!&lt;/p&gt;
-&lt;p class="variant"&gt;Firefox rocks!&lt;/p&gt;
-</pre>
-
-<h3 id="CSS"><span class="pun">CSS</span></h3>
-
-<pre class="brush: css">@font-feature-values "Leitura Display Swashes" {
-    @swash { fancy: 1 }
-}
-
-p {
-  font-size: 1.5rem;
-}
-
-.variant {
-  font-family: Leitura Display Swashes;
-  font-variant-alternates: swash(fancy);
-}</pre>
-
-<h3 id="結果">結果</h3>
-
-<div class="note">
-<p><strong>注意:</strong> この例を正しく閲覧するには，OpenTypeフォント<em>Leitura Display Swashes</em>を導入する必要があります。<a href="http://fontsgeek.com/fonts/Leitura-Display-Swashes">fontsgeek.com</a>等から試験目的の無償版が入手できます。</p>
-</div>
-
-<p>{{ EmbedLiveSample('Example', '', '', '', 'Web/CSS/font-variant-alternates') }}</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('CSS3 Fonts', '#propdef-font-variant-alternates', 'font-variant-alternates')}}</td>
-   <td>{{Spec2('CSS3 Fonts')}}</td>
-   <td>初期定義</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_Compatibility" name="Browser_Compatibility">ブラウザ互換性</h2>
-
-<p>{{Compat("css.properties.font-variant-alternates")}}</p>
diff --git a/files/ja/web/css/font-variant-alternates/index.md b/files/ja/web/css/font-variant-alternates/index.md
new file mode 100644
index 0000000000..d2a89132cb
--- /dev/null
+++ b/files/ja/web/css/font-variant-alternates/index.md
@@ -0,0 +1,124 @@
+---
+title: font-variant-alternates
+slug: Web/CSS/font-variant-alternates
+tags:
+  - CSS
+  - CSS Fonts
+  - CSS Property
+  - Reference
+  - recipe:css-property
+browser-compat: css.properties.font-variant-alternates
+translation_of: Web/CSS/font-variant-alternates
+---
+{{CSSRef}}
+
+**`font-variant-alternates`** は CSS のプロパティで、代替書体の使用を制御します。代替書体は {{cssxref("@font-feature-values")}} で定義された代替名で参照される可能性があります。
+
+```css
+/* キーワード値 */
+font-variant-alternates: normal;
+font-variant-alternates: historical-forms;
+
+/* 関数表記値 */
+font-variant-alternates: stylistic(user-defined-ident);
+font-variant-alternates: styleset(user-defined-ident);
+font-variant-alternates: character-variant(user-defined-ident);
+font-variant-alternates: swash(user-defined-ident);
+font-variant-alternates: ornaments(user-defined-ident);
+font-variant-alternates: annotation(user-defined-ident);
+font-variant-alternates: swash(ident1) annotation(ident2);
+
+/* グローバル値 */
+font-variant-alternates: initial;
+font-variant-alternates: inherit;
+font-variant-alternates: revert;
+font-variant-alternates: unset;
+```
+
+{{cssxref("@font-feature-values")}} アット規則は、代替書体関数 (`stylistic`, `styleset`, `character-variant`, `swash`, `ornament`, `annotation`) の名前を定義し、その名前を OpenType の引数と関連付けることができます。このプロパティはスタイルシート内で ({{cssxref("@font-feature-values")}} で定義された) 人間が読める名前を利用できるようにします。
+
+## 構文
+
+このプロパティは二つの形式のうち一つを取ります。
+
+- キーワード `normal`
+- または、その他の下記のキーワードおよび関数を空白区切り、順不同で 1 つ以上
+
+### 値
+
+- `normal`
+  - : このキーワードは代替書体を無効にします。
+- `historical-forms`
+  - : このキーワードは歴史的形式 — 過去には一般的だったけれども今日そうではない書体を有効にします。 OpenType の `hist` の値に対応します。
+- `stylistic()`
+  - : この関数は、個々の文字に対して表現の変更を可能にします。この引数は、フォント固有の名前を数値に対応づけたものです。 OpenType の `salt` の値に相当します (例: `salt 2`)。
+- `styleset()`
+  - : この関数は、一連の文字に対するスタイルの代替を可能にします。この引数は、フォント固有の名前を数値に対応づけたものです。 OpenType の `ssXY` の値に相当します (例: `ss02`)。
+- `character-variant()`
+  - : この関数は、文字に対して特定のスタイルの選択肢を有効にします。 `styleset()` に似ていますが、一連の文字に対してまとまった書体を作成するわけではありませんので、個々の文字は独立した、整合が取れているとは限らないスタイルになります。この引数は、フォント固有の名前を数値に対応づけたものです。 OpenType の `cvXY` の値に相当します (例: `cv02`)。
+- `swash()`
+  - : この関数は、[先端装飾](https://en.wikipedia.org/wiki/Swash_%28typography%29)書体を有効にします。この引数は、フォント固有の名前を数値に対応づけたものです。 OpenType の `swsh` および `cswh` の値に相当します (例: `swsh 2` および `cswh 2`)。
+- `ornaments()`
+
+  - : この関数は、[フルーロン](https://ja.wikipedia.org/wiki/%E3%83%95%E3%83%AB%E3%83%BC%E3%83%AD%E3%83%B3)およびその他の飾り書体などの装飾を有効にします。 OpenType の `ornm` の値に相当します (例: `ornm 2`)。
+
+    > **Note:** テキストの意味を保持するために、フォントデザイナーは、 Unicode のディングバット文字に一致しない装飾を、ビュレット文字 (U+2022) の装飾的な変種として含めるべきです。既存のフォントの中には、このアドバイスに従わないものもあるので注意が必要です。
+
+- `annotation()`
+  - : この関数は、丸数字や鏡文字などの注釈表記を有効にします。この函数は丸数字又は鏡文字などの表記を有効にします。この引数は、フォント固有の名前を数値に対応づけたものです。 OpenType の `nalt` の値に相当します (例: `nalt 2`)。
+
+## 公式定義
+
+{{CSSInfo}}
+
+## 形式文法
+
+{{csssyntax}}
+
+<h2 id="Examples">例</h2>
+
+### HTML
+
+```html
+<p>Firefox rocks!</p>
+<p class="variant">Firefox rocks!</p>
+```
+
+### CSS
+
+```css
+@font-feature-values "Leitura Display Swashes" {
+    @swash { fancy: 1 }
+}
+
+p {
+  font-size: 1.5rem;
+}
+
+.variant {
+  font-family: Leitura Display Swashes;
+  font-variant-alternates: swash(fancy);
+}
+```
+
+### 結果
+
+> **Note:** この例を有効にするには、 OpenType フォントの _Leitura Display Swashes_ をインストールする必要があります。試験用途の無償版が、 [fontsgeek.com](https://fontsgeek.com/fonts/Leitura-Display-Swashes) などにあります。
+
+{{ EmbedLiveSample('Examples', '', '', '', 'Web/CSS/font-variant-alternates') }}
+
+## 仕様書
+
+Not part of any standard.
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- {{cssxref("font-variant")}}
+- {{cssxref("font-variant-caps")}}
+- {{cssxref("font-variant-east-asian")}}
+- {{cssxref("font-variant-ligatures")}}
+- {{cssxref("font-variant-numeric")}}
diff --git a/files/ja/web/css/gradient/conic-gradient()/index.md b/files/ja/web/css/gradient/conic-gradient()/index.md
new file mode 100644
index 0000000000..7372d1f6bb
--- /dev/null
+++ b/files/ja/web/css/gradient/conic-gradient()/index.md
@@ -0,0 +1,243 @@
+---
+title: conic-gradient()
+slug: Web/CSS/gradient/conic-gradient()
+tags:
+  - CSS
+  - CSS Function
+  - CSS Images
+  - Function
+  - Graphics
+  - Layout
+  - Reference
+  - Web
+  - gradient
+browser-compat: css.types.image.gradient.conic-gradient
+translation_of: Web/CSS/gradient/conic-gradient()
+original_slug: Web/CSS/conic-gradient()
+---
+{{CSSRef}}
+
+**`conic-gradient()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、 (中心から広がるのではなく) 中心点の周りを回りながら色が変化する画像を生成します。扇型グラデーションの例としては、円グラフや色相環などがあります。 `conic-gradient()` 関数の結果は {{CSSxRef("&lt;gradient&gt;")}} データ型のオブジェクトであり、これは {{CSSxRef("&lt;image&gt;")}} の特殊型です。
+
+{{EmbedInteractiveExample("pages/css/function-conic-gradient.html")}}
+
+## 構文
+
+```css
+/* 45度回転した扇形グラデーション、
+   青で始まり赤で終わる */
+conic-gradient(from 45deg, blue, red);
+
+/* 青みがかった紫のボックス。グラデーションは青から赤へと
+   進みます。しかし、扇形グラデーションの中心が左上にある
+   ため、右下の四分の一しか見えません。 */
+conic-gradient(from 90deg at 0 0, blue, red);
+
+/* 色相環 */
+background: conic-gradient(
+    hsl(360, 100%, 50%),
+    hsl(315, 100%, 50%),
+    hsl(270, 100%, 50%),
+    hsl(225, 100%, 50%),
+    hsl(180, 100%, 50%),
+    hsl(135, 100%, 50%),
+    hsl(90, 100%, 50%),
+    hsl(45, 100%, 50%),
+    hsl(0, 100%, 50%)
+);
+```
+
+### 値
+
+- {{CSSxRef("&lt;angle&gt;")}}
+  - : `from` キーワードに続いて角度を指定することで、時計回りのグラデーションの位置を定義します。
+- `<position>`
+  - : {{cssxref("background-position")}} プロパティと同じ長さ、順番、キーワード値を使用して、グラデーションの中心の位置を定義します。省略すると、既定値は`center`、すなわちグラデーションに配置されます。
+- `<angular-color-stop>`
+  - : 色経由点の {{CSSxRef("&lt;color&gt;")}} 値で、その後にオプションで 1 ～ 2 個の位置 (グラデーションの円周軸に沿った {{CSSxRef("&lt;angle&gt;")}}) が続きます。
+- `<color-hint>`
+  - : 隣接する色経由点の間でグラデーションがどのように進行するかを定義する補間のヒントです。長さは、 2 つの色経由点の間のどの位置でグラデーションの色が色の遷移の中間点に到達するかを定義します。省略した場合、色の遷移の中間点は 2 つの色経由点間の中間点になります。
+
+> **Note:** [CSS グラデーションにおける色経由点](#gradient_with_multiple_color_stops)の描画は、 [SVG グラデーション](/ja/docs/Web/SVG/Tutorial/Gradients)と同じ規則に従います。
+
+## 解説
+
+他のグラデーションと同様、扇形グラデーションは[自身の寸法を持ちません](/ja/docs/Web/CSS/image#description)。つまり、自然の寸法や推奨される寸法、推奨される縦横比もありません。自身の寸法は適用先の要素の寸法、または要素の寸法以外で設定された `<image>` の寸法に一致します。
+
+繰り返して 360 度の回転を埋める扇形グラデーションを生成するには、代わりに {{CSSxRef("gradient/repeating-conic-gradient()", "repeating-conic-gradient()")}} 関数を使用してください。
+
+`<gradient>` は `<image>` データ型に属するため、 `<image>` が使用できるところでしか使用できません。このため、 `conic-gradient()` は {{CSSxRef("background-color")}} や、その他の {{CSSxRef("&lt;color&gt;")}} データ型を使用するプロパティでは動作しません。</p>
+
+> **Note:** 英語ではなぜ "conic" (円錐) グラデーションと呼ばれるのか。色経由点が一方よりもう一方が明るい場合、上から見た円錐のように見えるからです。
+
+### 扇型グラデーションの構成
+
+<p>扇形グラデーションの構文は放射グラデーションと似ていますが、色経由点はグラデーションの中心から現れるグラデーション軸上ではなく、グラデーション円弧、すなわち円周上に配置されます。扇形グラデーションでは、色の遷移は円の中心を回るように、上から始まって時計回りに行われます。放射グラデーションでは、色の遷移は楕円の中心から外に向けて、すべての方向に行われます。</p>
+
+![扇形グラデーションの円周と放射グラデーションの軸に沿った色経由点](screenshot_2018-11-29_21.09.19.png)
+
+扇形グラデーションは、回転角度とグラデーションの中心を指定し、色経由点のリストを指定します。[長さ](/ja/docs/Web/CSS/length)を指定して色経由点を配置する線形グラデーションや放射グラデーションとは異なり、扇形グラデーションの色経由点は角度を指定します。単位には[度](/ja/docs/Web/CSS/angle)を表す `deg`、グラードを表す `grad`、ラジアンを表す `rad`、回転数を表す `turn` があります。 1 つの円は 360 度、 400 グラード、 2π ラジアン、 1 回転になります。扇形グラデーションに対応しているブラウザーはパーセント値も受け付けており、 100% は 360 度に相当しますが、これは仕様にはありません。
+
+放射グラデーションと同様に、扇形グラデーションの構文では、グラデーションの中心を画像内のどこにでも、あるいは画像の外側にでも配置することができます。位置の値は、 2 値の背景位置の構文に似ています。
+
+グラデーション円弧は、グラデーションの円周です。グラデーションまたは円弧の*始点*は北、つまり 12 時の方向です。そして、グラデーションは _from_ の角度だけ回転します。グラデーションの色は、角度のついた色経由点、それらの開始点、終了点、および、その間、および、任意の角度のついた色経由点によって決定されます。色間の遷移は、隣接する色の色経由点の間のカラーヒントで変更することができます。
+
+#### グラデーションのカスタマイズ
+
+グラデーション円弧上に角度のついた色経由点をさらに追加することで、複数の色の間で高度なカスタマイズされた遷移を行うことができます。色経由点の位置は、 {{CSSxRef("&lt;angle&gt;")}} を使って明示的に定義することができます。色経由点の位置を指定しない場合は、前の色経由点と後の色経由点の中間に配置されます。最初の色経由点と最後の色経由点に角度を指定しない場合、その値はそれぞれ 0deg と 360deg です。次の2つのグラデーションは同等です。
+
+```css
+conic-gradient(red, orange, yellow, green, blue);
+conic-gradient(red 0deg, orange 90deg, yellow 180deg, green 270deg, blue 360deg);
+```
+
+既定では、色はある色経由点の色から次の色経由点の色へとスムーズに移行し、色と色の中間点が色移行の中間点となります。カラーヒントを追加して色遷移の中間点を示すことで、この色遷移の中間点を 2 つの色経由点間の任意の位置に移動させることができます。次の例は、開始点から 10% の印までは赤一色で、回転の 80% 以上で赤から青に移行し、最後の 10% は青一色になっています。しかし、赤から青へのグラデーション変化の中間点は 20％ の位置になります。 80grad (20％) のカラーヒントがなかった場合は 50％ の位置になります。
+
+```css
+conic-gradient(red 40grad, 80grad, blue 360grad);
+```
+
+2 つ以上の色経由点が同じ場所にある場合、その場所で宣言された最初の色と最後の色の間に不連続の (硬い) 色変化として表示されます。扇形グラデーションを使用して円グラフを作成するには、 -- 背景画像はアクセシビリティが確保できないため、正しい方法ではありませんが -- 隣接する 2 つの色経由点の色経由点の角度が同じである、硬い色経由点を使用します。これを実現する最も簡単な方法は、複数のポジションの色経由点を使用することです。次の 2 つの宣言は等価です。
+
+```css
+conic-gradient(#fff 0.09turn, #bbb 0.09turn, #bbb 0.27turn, #666 0.27turn, #666 0.54turn, #000 0.54turn);
+conic-gradient(#fff 0turn 0.09turn, #bbb 0.09turn 0.27turn, #666 0.27turn 0.54turn, #000 0.54turn 1turn);
+```
+
+色経由点は、昇順に並べる必要があります。後続の色経由点がより低い値であった場合、前の色経由点の値を上書きし、硬い (不連続の) 色変化を生成します。次の例では、 30% の地点で赤から黄色に変化し、グラデーションの 35% の地点で黄色から青に変化しています。
+
+```css
+conic-gradient(red .8rad, yellow .6rad, blue 1.3rad);
+```
+
+扇形グラデーションでは、他にもさまざまな効果を作り出すことができます。奇しくも市松模様もその一つです。左上と右下の白、左下と右上の黒で四分円を作り、グラデーションを16回 (横に4回、下に4回) 繰り返すと市松模様になります。
+
+```css
+conic-gradient(#fff 90deg, #000 0.25turn 0.5turn, #fff 1rad 1.5rad, #000 300grad);
+background-size: 25% 25%;
+```
+
+そして、そうですね、異なる角度のユニットを混ぜて使うこともできますが、やめておきましょう。以上、読みにくかったですね。
+
+## アクセシビリティの考慮
+
+ブラウザは、背景画像に関する特別な情報を支援技術に提供しません。これは主に画面リーダーにとって重要なことで、画面リーダーはその存在を告知しないため、ユーザーに何も伝えられません。扇形グラデーションを使って円グラフや市松模様などの効果を出すことは可能ですが、 CSS 画像は代替テキストを割り当てるネイティブな方法を提供していないため、扇形グラデーションで表現された画像は画面リーダーのユーザーが認知することはできません。ページの全体的な目的を理解するために重要な情報が画像に含まれている場合は、文書内で意味的に記述する方が良いでしょう。
+
+- [MDN WCAG を理解する, ガイドライン 1.1 の説明](/ja/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](https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/text-equiv-all.html)
+
+## 例
+
+<h3 id="Gradient_at_40-degrees">40 度のグラデーション</h3>
+
+```css hidden
+div {
+  width: 100px;
+  height: 100px;
+}
+```
+
+```html hidden
+<div></div>
+```
+
+```css
+div {
+  background-image:
+     conic-gradient(from 40deg, #fff, #000);
+}
+```
+
+{{EmbedLiveSample("Gradient_at_40-degrees", 120, 120)}}
+
+<h3 id="Off-centered_gradient">中心をずらしたグラデーション</h3>
+
+```css hidden
+div {
+  width: 100px;
+  height: 100px;
+}
+```
+
+```html hidden
+<div></div>
+```
+
+```css
+div {
+  background: conic-gradient(from 0deg at 0% 25%, blue, green, yellow 180deg);
+}
+```
+
+{{EmbedLiveSample("Off-centered_gradient", 120, 120)}}
+
+<h3 id="Gradient_pie-chart">グラデーションの円グラフ</h3>
+
+This example uses multi-position color stops, with adjacent colors having the same color stop value, creating a striped effect.
+
+```css hidden
+div {
+  width: 100px;
+  height: 100px;
+}
+```
+
+```html hidden
+<div></div>
+```
+
+```css
+div {
+  background: conic-gradient(
+     red 36deg, orange 36deg 170deg, yellow 170deg);
+  border-radius: 50%
+}
+```
+
+{{EmbedLiveSample("Gradient_pie-chart", 120, 120)}}
+
+<h3 id="Checkerboard">市松模様</h3>
+
+```css hidden
+div {
+  width: 100px;
+  height: 100px;
+}
+```
+
+```html hidden
+<div></div>
+```
+
+```css
+div {
+  background:
+     conic-gradient(#fff 0.25turn, #000 0.25turn 0.5turn, #fff 0.5turn 0.75turn, #000 0.75turn)
+     top left / 25% 25% repeat;
+  border: 1px solid;
+}
+```
+
+{{EmbedLiveSample("Checkerboard", 120, 120)}}
+
+### その他の conic-gradient の例
+
+他の例は [CSS グラデーションの使用](/ja/docs/Web/CSS/CSS_Images/Using_CSS_gradients)を参照してください。
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- [CSS グラデーションの使用](/ja/docs/Web/CSS/CSS_Images/Using_CSS_gradients)
+- 他のグラデーション関数: {{cssxref("gradient/repeating-conic-gradient()", "repeating-conic-gradient()")}}, {{cssxref("gradient/linear-gradient()", "linear-gradient()")}}, {{cssxref("gradient/repeating-linear-gradient()", "repeating-linear-gradient()")}}, {{cssxref("gradient/radial-gradient()", "radial-gradient()")}}, {{cssxref("gradient/repeating-radial-gradient()", "repeating-radial-gradient()")}}
+- {{cssxref("&lt;image&gt;")}}
+- {{cssxref("image/image()","image()")}}
+- {{cssxref("element()")}}
+- {{cssxref("image/image-set()","image-set()")}}
+- {{cssxref("cross-fade()")}}
diff --git a/files/ja/web/css/gradient/index.html b/files/ja/web/css/gradient/index.html
deleted file mode 100644
index 6192d160da..0000000000
--- a/files/ja/web/css/gradient/index.html
+++ /dev/null
@@ -1,184 +0,0 @@
----
-title: <gradient>
-slug: Web/CSS/gradient
-tags:
-  - CSS
-  - CSS Data Type
-  - CSS Images
-  - Data Type
-  - Graphics
-  - Layout
-  - Reference
-translation_of: Web/CSS/gradient
----
-<div>{{CSSRef}}</div>
-
-<p><strong><code>&lt;gradient&gt;</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の<a href="/ja/docs/Web/CSS/CSS_Types">データ型</a>で、2色以上の連続的な色の変化で構成される特殊な型の {{cssxref("&lt;image&gt;")}} です。</p>
-
-<div>{{EmbedInteractiveExample("pages/css/type-gradient.html")}}</div>
-
-<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>
-
-<p>CSS グラデーションは<a href="/ja/docs/Web/CSS/image#no_intrinsic">固有の寸法を持ちません</a>。つまり、自然又は推奨される寸法や、推奨される縦横比を持ちません。実際の寸法は適用される要素に一致します。</p>
-
-<h2 id="Syntax" name="Syntax">構文</h2>
-
-<p><code>&lt;gradient&gt;</code> データ型は、以下のリストにある関数型のうちの一つによって定義します。</p>
-
-<div id="linear-gradient">
-<h4 id="Linear_gradient" name="Linear_gradient"><ruby>線形<rp> (</rp><rt>linear</rt><rp>) </rp></ruby>グラデーション</h4>
-
-<p>色が仮想の直線に沿って変化します。 {{cssxref("linear-gradient", "linear-gradient()")}} 関数で生成されます。</p>
-</div>
-
-<div id="radial-gradient">
-<h4 id="Radial_gradient" name="Radial_gradient"><ruby>放射<rp> (</rp><rt>radical</rt><rp>) </rp></ruby>グラデーション</h4>
-
-<p>色が中央点 (origin) から連続的に変化します。 {{cssxref("radial-gradient", "radial-gradient()")}} 関数で生成されます。</p>
-</div>
-
-<div id="repeating-gradient">
-<h4 id="Repeating_gradient" name="Repeating_gradient"><ruby>反復<rp> (</rp><rt>repeating</rt><rp>) </rp></ruby>グラデーション</h4>
-
-<p>要素全体を埋めるのに必要なだけ、グラデーションを繰り返します。 {{cssxref("repeating-linear-gradient", "repeating-linear-gradient()")}} 及び {{cssxref("repeating-radial-gradient", "repeating-radial-gradient()")}} 関数で生成されます。</p>
-</div>
-
-<div id="conic-gradient">
-<h4 id="Conic_gradient" name="Conic_gradient"><ruby>扇形<rp> (</rp><rt>conic</rt><rp>) </rp></ruby>グラデーション</h4>
-
-<p>色が円を描くように連続的に変化します。 {{cssxref("conic-gradient", "conic-gradient()")}} 関数で生成されます。</p>
-</div>
-
-<h2 id="Interpolation" name="Interpolation">補間</h2>
-
-<p>色に関する他の補間操作と同様、グラデーションはアルファ乗算済み色空間で計算されます。これは、色と透過性が同時に変化するときに、予期しない灰色が現れるのを避けるためです。 (古いブラウザーは、 <a href="/ja/docs/Web/CSS/color_value#transparent_keyword">transparent キーワード</a>を使用するとこれを使用しないことがあるので注意してください。)</p>
-
-<h2 id="Examples" name="Examples">例</h2>
-
-<h3 id="Linear_gradient_example" name="Linear_gradient_example">線形グラデーションの例</h3>
-
-<p>単純な線形グラデーションです。</p>
-
-<div class="hidden">
-<pre class="brush: html notranslate">&lt;div class="linear-gradient"&gt;Linear gradient&lt;/div&gt;
-</pre>
-
-<pre class="brush: css notranslate">div {
-  width: 240px;
-  height: 80px;
-}</pre>
-</div>
-
-<pre class="brush: css notranslate">.linear-gradient {
-  background: linear-gradient(to right,
-      red, orange, yellow, green, blue, indigo, violet);
-}</pre>
-
-<p>{{EmbedLiveSample('Linear_gradient_example', 240, 80)}}</p>
-
-<h3 id="Radial_gradient_example" name="Radial_gradient_example">放射グラデーションの例</h3>
-
-<p>単純な放射グラデーションです。</p>
-
-<div class="hidden">
-<pre class="brush: html notranslate">&lt;div class="radial-gradient"&gt;Radial gradient&lt;/div&gt;
-</pre>
-
-<pre class="brush: css notranslate">div {
-  width: 240px;
-  height: 80px;
-}</pre>
-</div>
-
-<pre class="brush: css notranslate">.radial-gradient {
-  background: radial-gradient(red, yellow, rgb(30, 144, 255));
-}
-</pre>
-
-<p>{{EmbedLiveSample('Radial_gradient_example', 240, 80)}}</p>
-
-<h3 id="Repeating_gradient_examples" name="Repeating_gradient_examples">反復グラデーションの例</h3>
-
-<p>単純な線形および放射の反復グラデーションの例です。</p>
-
-<div class="hidden">
-<pre class="brush: html notranslate">&lt;div class="linear-repeat"&gt;Repeating linear gradient&lt;/div&gt;
-&lt;br&gt;
-&lt;div class="radial-repeat"&gt;Repeating radial gradient&lt;/div&gt;
-</pre>
-
-<pre class="brush: css notranslate">div {
-  width: 240px;
-  height: 80px;
-}</pre>
-</div>
-
-<pre class="brush: css notranslate">.linear-repeat {
-  background: repeating-linear-gradient(to top left,
-      lightpink, lightpink 5px, white 5px, white 10px);
-}
-
-.radial-repeat {
-  background: repeating-radial-gradient(powderblue, powderblue 8px, white 8px, white 16px);
-}</pre>
-
-<p>{{EmbedLiveSample('Repeating_gradient_examples', 240, 180)}}</p>
-
-<h3 id="Conic_gradient_example" name="Conic_gradient_example">扇形グラデーションの例</h3>
-
-<p>単純な扇形グラデーションの例です。なお、まだこれはブラウザーの間で十分に対応されていません。</p>
-
-<div class="hidden">
-<pre class="brush: html notranslate">&lt;div class="conic-gradient"&gt;Conic gradient&lt;/div&gt;
-</pre>
-
-<pre class="brush: css notranslate">div {
-  width: 200px;
-  height: 200px;
-}</pre>
-</div>
-
-<pre class="brush: css notranslate">.conic-gradient {
-  background: conic-gradient(lightpink, white, powderblue);
-}
-</pre>
-
-<p>{{EmbedLiveSample('Conic_gradient_example', 240, 200)}}</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('CSS4 Images', '#gradients', '&lt;gradient&gt;')}}</td>
-   <td>{{Spec2('CSS4 Images')}}</td>
-   <td>conic-gradient を追加</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Images', '#gradients', '&lt;gradient&gt;')}}</td>
-   <td>{{Spec2('CSS3 Images')}}</td>
-   <td>初回定義</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
-
-<div>{{Compat("css.types.image.gradient")}}</div>
-
-<h2 id="See_also" name="See_also">関連情報</h2>
-
-<ul>
- <li><a href="/ja/docs/Web/CSS/CSS_Images/Using_CSS_gradients">CSS グラデーションの使用</a></li>
- <li>グラデーション関数: {{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()")}}</li>
- <li><a href="/ja/docs/Web/CSS/CSS_Types">CSS の基本データ型</a></li>
- <li><a href="/ja/docs/Web/CSS/CSS_Values_and_Units">CSS 単位と値</a></li>
- <li><a href="/ja/docs/Learn/CSS/Introduction_to_CSS/Values_and_units">CSS 入門: 値と単位</a></li>
-</ul>
diff --git a/files/ja/web/css/gradient/index.md b/files/ja/web/css/gradient/index.md
new file mode 100644
index 0000000000..5123beb559
--- /dev/null
+++ b/files/ja/web/css/gradient/index.md
@@ -0,0 +1,163 @@
+---
+title: <gradient>
+slug: Web/CSS/gradient
+tags:
+  - CSS
+  - CSS Data Type
+  - CSS Images
+  - Data Type
+  - Graphics
+  - Layout
+  - Reference
+browser-compat: css.types.image.gradient
+translation_of: Web/CSS/gradient
+---
+{{CSSRef}}
+
+The **`<gradient>`** は [CSS](/ja/docs/Web/CSS) の[データ型](/ja/docs/Web/CSS/CSS_Types)で、 2 色以上の連続的な色の変化で構成される特殊な型の {{cssxref("&lt;image&gt;")}} です。
+
+{{EmbedInteractiveExample("pages/css/type-gradient.html")}}
+
+CSS グラデーションは[自身の寸法を持ちません](/ja/docs/Web/CSS/image#description)。つまり、自然または推奨される寸法や、推奨される縦横比を持ちません。実際の寸法は適用される要素に一致します。
+
+## 構文
+
+`<gradient>` データ型は、以下のリストにある関数型のうちの一つによって定義します。
+
+#### 線形グラデーション
+
+線形グラデーション (linear gradient) は、色が仮想の直線に沿って変化します。 {{cssxref("gradient/linear-gradient()", "linear-gradient()")}} 関数で生成されます。
+
+#### 放射グラデーション
+
+放射グラデーション (radical gradient) は、色が中央点 (origin) から連続的に変化します。 {{cssxref("gradient/radial-gradient()", "radial-gradient()")}} 関数で生成されます。
+
+#### 反復グラデーション
+
+反復グラデーション (repeating gradient) は、要素全体を埋めるのに必要なだけ、グラデーションを繰り返します。 {{cssxref("gradient/repeating-linear-gradient()", "repeating-linear-gradient()")}} および {{cssxref("gradient/repeating-radial-gradient()", "repeating-radial-gradient()")}} 関数で生成されます。
+
+#### 扇形グラデーション
+
+扇形グラデーション (conic gradient) は、色が円を描くように連続的に変化します。 {{cssxref("gradient/conic-gradient()", "conic-gradient()")}} 関数で生成されます。
+
+## 補間
+
+色に関する他の補間操作と同様、グラデーションはアルファ乗算済み色空間で計算されます。これは、色と透過性が同時に変化するときに、予期しない灰色が現れるのを避けるためです。 (古いブラウザーは、 [transparent キーワード](/ja/docs/Web/CSS/color_value#transparent_keyword)を使用するとこれを使用しないことがあるので注意してください。)
+
+## 例
+
+<h3 id="Linear_gradient_example">線形グラデーションの例</h3>
+
+単純な線形グラデーションです。
+
+```html hidden
+<div class="linear-gradient">Linear gradient</div>
+```
+
+```css hidden
+div {
+  width: 240px;
+  height: 80px;
+}
+```
+
+```css
+.linear-gradient {
+  background: linear-gradient(to right,
+      red, orange, yellow, green, blue, indigo, violet);
+}
+```
+
+{{EmbedLiveSample('Linear_gradient_example', 240, 120)}}
+
+<h3 id="Radial_gradient_example">放射グラデーションの例</h3>
+
+単純な放射グラデーションです。
+
+```html hidden
+<div class="radial-gradient">Radial gradient</div>
+```
+
+```css hidden
+div {
+  width: 240px;
+  height: 80px;
+}
+```
+
+```css
+.radial-gradient {
+  background: radial-gradient(red, yellow, rgb(30, 144, 255));
+}
+```
+
+{{EmbedLiveSample('Radial_gradient_example', 240, 120)}}
+
+<h3 id="Repeating_gradient_examples">反復グラデーションの例</h3>
+
+単純な線形および放射の反復グラデーションの例です。
+
+```html hidden
+<div class="linear-repeat">Repeating linear gradient</div>
+<br>
+<div class="radial-repeat">Repeating radial gradient</div>
+```
+
+```css hidden
+div {
+  width: 240px;
+  height: 80px;
+}
+```
+
+```css
+.linear-repeat {
+  background: repeating-linear-gradient(to top left,
+      lightpink, lightpink 5px, white 5px, white 10px);
+}
+
+.radial-repeat {
+  background: repeating-radial-gradient(powderblue, powderblue 8px, white 8px, white 16px);
+}
+```
+
+{{EmbedLiveSample('Repeating_gradient_examples', 240, 220)}}
+
+<h3 id="Conic_gradient_example">扇形グラデーションの例</h3>
+
+単純な扇形グラデーションの例です。なお、まだこれはブラウザーの間で十分に対応されていません。
+
+```html hidden
+<div class="conic-gradient">Conic gradient</div>
+```
+
+```css hidden
+div {
+  width: 200px;
+  height: 200px;
+}
+```
+
+```css
+.conic-gradient {
+  background: conic-gradient(lightpink, white, powderblue);
+}
+```
+
+{{EmbedLiveSample('Conic_gradient_example', 240, 240)}}
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- [CSS グラデーションの使用](/ja/docs/Web/CSS/CSS_Images/Using_CSS_gradients)
+- グラデーション関数: {{cssxref("gradient/linear-gradient()", "linear-gradient()")}}, {{cssxref("gradient/repeating-linear-gradient()", "repeating-linear-gradient()")}}, {{cssxref("gradient/radial-gradient()", "radial-gradient()")}}, {{cssxref("gradient/repeating-radial-gradient()", "repeating-radial-gradient()")}}, {{cssxref("gradient/conic-gradient()", "conic-gradient()")}}, {{cssxref("gradient/repeating-conic-gradient()", "repeating-conic-gradient()")}}
+- [CSS の基本データ型](/ja/docs/Web/CSS/CSS_Types)
+- [CSS の単位と値](/ja/docs/Web/CSS/CSS_Values_and_Units)
+- [CSS 入門: 値と単位](/ja/docs/Learn/CSS/Building_blocks/Values_and_units)
diff --git a/files/ja/web/css/gradient/linear-gradient()/index.md b/files/ja/web/css/gradient/linear-gradient()/index.md
new file mode 100644
index 0000000000..963db61405
--- /dev/null
+++ b/files/ja/web/css/gradient/linear-gradient()/index.md
@@ -0,0 +1,198 @@
+---
+title: linear-gradient()
+slug: Web/CSS/gradient/linear-gradient()
+tags:
+  - CSS
+  - CSS 画像
+  - CSS 関数
+  - Function
+  - Graphics
+  - Layout
+  - Reference
+  - Web
+  - gradient
+translation_of: Web/CSS/gradient/linear-gradient()
+original_slug: Web/CSS/linear-gradient()
+browser-compat: css.types.image.gradient.linear-gradient
+---
+{{CSSRef}}
+
+**`linear-gradient()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、二つ以上の色の連続的な直線に沿った変化から構成される画像を生成します。結果は {{CSSxRef("&lt;gradient&gt;")}} データ型のオブジェクトであり、これは {{CSSxRef("&lt;image&gt;")}} の特殊型です。
+
+{{EmbedInteractiveExample("pages/css/function-linear-gradient.html")}}
+
+## 構文
+
+```css
+/* 45度に傾いたグラデーションで、
+   青から始まり赤で終わる */
+linear-gradient(45deg, blue, red);
+
+/* 右下から左上に向かうグラデーションで、
+   青から始まり赤で終わる */
+linear-gradient(to left top, blue, red);
+
+/* 色経由点: 下から上に向かうグラデーションで、
+   青から始まり、長さの 40% のところで緑になり、
+   赤で終わる */
+linear-gradient(0deg, blue, green 40%, red);
+
+/* 色ヒント: 左から右に向かうグラデーションで、
+   赤から始まり、グラデーションの長さ全体の
+   10% に中間点が来て、残りの 90% の長さをかけて
+   青色に変わる */
+linear-gradient(.25turn, red, 10%, blue);
+
+/* 複数位置の色経由点: 45 度傾いたグラデーションで、
+   左下半分が赤で右上半分が青、
+   赤から青への変化は明確な線 */
+linear-gradient(45deg, red 0 50%, blue 50% 100%);
+```
+
+### 値
+
+- `<side-or-corner>`
+
+  - : グラデーション軸の開始点の位置。指定する場合は、 `to` に続けて 2 つ以下のキーワードから成ります。一つは水平方向の辺 (`left` または `right`)、もう一方は垂直方向の辺 (`top` または `bottom`) です。辺を表すキーワードは順不同です。指定しない場合は、 `to bottom` が既定になります。
+
+    `to top`, `to bottom`, `to left`, `to right` の値は、 `0deg`, `180deg`, `270deg`, `90deg` の角度にそれぞれ対応します。他の値は角度に変換されます。
+
+- {{CSSxRef("&lt;angle&gt;")}}
+  - : グラデーション軸の方向を角度で示します。 `0deg` の値は `to top` と等価で、値が増加するとそこから時計回りに回ります。</dd>
+- `<linear-color-stop>`
+  - : 色経由点の {{CSSxRef("&lt;color&gt;")}} の値であり、任意でその後に停止位置を指定します (グラデーションの軸に沿った {{CSSxRef("&lt;percentage&gt;")}} または {{CSSxRef("&lt;length&gt;")}} の位置)。</dd>
+- `<color-hint>`
+  - : 隣り合う色経由点の間でどのようにグラデーションが進むかを定義する補間のヒントです。長さによって、どの位置で二つの色経由点のグラデーション色が色の移行の中間点に達するかを定義します。省略された場合、色の移行の中間点は二つの色経由点の中点になります。
+
+> **Note:** [CSS グラデーションにおける色経由点](#gradient_with_multiple_color_stops)の描画は、 [SVG グラデーション](/ja/docs/Web/SVG/Tutorial/Gradients)と同じ規則に従います。
+>
+> なお、上記の最初の例は、 Mozilla Firefox (特にバージョン 80.0b3) では、正確には図のようには表示されません。描かれているように表示するには、 html の height プロパティを 100% または 100vh に設定する必要があります。
+
+## 解説
+
+他のグラデーションと同様、線形グラデーションは[自身の寸法を持ちません](/ja/docs/Web/CSS/image#description)。つまり、画像本来の寸法や、推奨される縦横比を持たないということです。実際の寸法は、適用先の要素の寸法と一致します。
+
+繰り返して領域を埋め尽くす線形グラデーションを生成するには、代わりに {{cssxref("gradient/repeating-linear-gradient()", "repeating-linear-gradient()")}} 関数を使用してください。
+
+`<gradient>` は CSS の `<image>` データ型に所属しますので、 `<image>` が使用できるところでのみ使用できます。このため、 `linear-gradient` は {{CSSxRef("background-color")}} や、その他の {{CSSxRef("&lt;color&gt;")}} を要求するプロパティでは動作しません。
+
+### 線形グラデーションの構成
+
+線形グラデーションは、グラデーション軸 (Gradient line) と呼ばれる軸によって定義されます。軸上の各点にはそれぞれ違った色が割り当てられます。なめらかなグラデーションを作成するために、 `linear-gradient()` 関数はグラデーション軸と直行する直線を、グラデーション軸上の交点の色で連続して引きます。
+
+![linear-gradient.png](linear-gradient.png)
+
+グラデーション軸は、グラデーション画像を含むボックスの中心と、角度によって定義されます。グラデーションの色は、開始点 (Starting point)、 終了点 (Ending point) と、省略可能な色経由点 (color-stop point) の各点でそれぞれ定義されます。
+
+開始点は、グラデーション軸の最初の色が始まる点です。終了点は最後の色が終わるところです。これらの点は、グラデーション軸とそれに直交し、ボックスの同一象限にあるコーナーを通る直線との交点によって定義されます。ただ、もっと簡単に、ボックスの中心を原点としたときの開始点の点対称な位置としても定義できます。こうした何だかややこしい開始点と終了点の定義が、*マジックコーナー*と呼ばれる興味深い効果を生みました。開始点と終了点に近いコーナーは、それぞれ開始点と終了点と同じ色を持ちます。
+
+#### グラデーションのカスタマイズ
+
+グラデーション軸に色経由点を追加することで、開始点と終了点の間で高度にカスタマイズした変化を作成することができます。色経由点は {{CSSxRef("&lt;length&gt;")}} や {{CSSxRef("&lt;percentage&gt;")}} データ型を使って、明示的に定義することができます。もし場所を定義しなかったときは、直前の点と直後の点の中間点になります。以下の二つのグラデーションは等価です。
+
+```css
+linear-gradient(red, orange, yellow, green, blue);
+linear-gradient(red 0%, orange 25%, yellow 50%, green 75%, blue 100%);
+```
+
+ある色経由点の色から次の色経由点の色まで滑らかに色が変化し、色と色の中間点は、既定では色の変化の中間の位置になります。色の変化の中間点をどこに置くかを示すために、二つの色の間でラベルのない % の色ヒントを追加することで、色の中間点を二つの色経由点の間の任意の位置に移動することができます。次の例では、純粋な赤を先頭から 10% の位置まで、純粋な青を 90% の位置から末尾までに配置します。 10% から 90％ までの間は、赤から青への色変化ですが、色ヒントがない 30% があるので、変化の中間点は 50% の位置ではなく 30% の位置になります。
+
+```css
+linear-gradient(red 10%, 30%, blue 90%);
+```
+
+二つ以上の色経由点が同じ位置である場合、その位置で宣言された最初と最後の色の間で明確な線になります。
+
+色経由点は昇順に並べてください。次の色経由点がより小さな値になると、以前の色経由点を上書きすることになり、急な変化になります。以下の例では、赤から始まって 40% の位置で黄色になり、それから 25% にわたって黄色から青への変化になります。
+
+```css
+linear-gradient(red 40%, yellow 30%, blue 65%);
+```
+
+色経由点には複数の位置が利用できます。 CSS 宣言の中で二つの位置を含めることで、二つの隣り合う色経由点として色を宣言することができます。
+
+```css
+linear-gradient(red 0%, orange 10%, orange 30%, yellow 50%, yellow 70%, green 90%, green 100%);
+linear-gradient(red, orange 10% 30%, yellow 50% 70%, green 90%);
+linear-gradient(red 0%, orange 10% 30%, yellow 50% 70%, green 90% 100%);
+```
+
+既定では、 0% の経由点に色がない場合、宣言されている最初の色がその場所の色になります。同様に、最後の色経由点に位置が宣言されていない場合は、最後の色が 100% の位置まで続くか、 100% の位置の色になります。
+
+## 例
+
+<h3 id="Gradient_at_a_45-degree_angle">45 度 のグラデーション</h3>
+
+```css hidden
+body {
+  width: 100vw;
+  height: 100vh;
+}
+```
+
+```css
+body {
+  background: linear-gradient(45deg, red, blue);
+}
+```
+
+{{EmbedLiveSample("Gradient_at_a_45-degree_angle", 120, 120)}}
+
+<h3 id="Gradient_that_starts_at_60_of_the_gradient_line">グラデーション軸の 60% から始まるグラデーション</h3>
+
+```css hidden
+body {
+  width: 100vw;
+  height: 100vh;
+}
+```
+
+```css
+body {
+  background: linear-gradient(135deg, orange 60%, cyan);
+}
+```
+
+{{EmbedLiveSample("Gradient_that_starts_at_60_of_the_gradient_line", 120, 120)}}
+
+<h3 id="Gradient_with_multi-position_color_stops">複数の位置の色経由点があるグラデーション</h3>
+
+この例は複数の位置の色経由点を使用しており、隣り合う色に同じ色経由値があるため、縞模様の効果になります。
+
+```css hidden
+body {
+  width: 100vw;
+  height: 100vh;
+}
+```
+
+```css
+body {
+  background: linear-gradient(to right,
+     red 20%, orange 20% 40%, yellow 40% 60%, green 60% 80%, blue 80%);
+}
+```
+
+{{EmbedLiveSample("Gradient_with_multi-position_color_stops", 120, 120)}}
+
+<h3 id="More_linear-gradient_examples">その他のグラデーションの例</h3>
+
+他の例は [CSS グラデーションの使用](/ja/docs/Web/CSS/CSS_Images/Using_CSS_gradients)を参照してください。
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- [CSS グラデーションの使用](/ja/docs/Web/CSS/CSS_Images/Using_CSS_gradients)
+- 他のグラデーション関数: {{cssxref("gradient/repeating-linear-gradient()", "repeating-linear-gradient()")}}, {{cssxref("gradient/radial-gradient()", "radial-gradient()")}}, {{cssxref("gradient/repeating-radial-gradient()", "repeating-radial-gradient()")}}, {{cssxref("gradient/conic-gradient()", "conic-gradient()")}}, {{cssxref("gradient/repeating-conic-gradient()", "repeating-conic-gradient()")}}
+- {{CSSxRef("&lt;image&gt;")}}
+- {{cssxref("element()")}}
+- {{cssxref("image/image()","image()")}}
+- {{cssxref("image/image-set()","image-set()")}}
+- {{cssxref("cross-fade()")}}
diff --git a/files/ja/web/css/gradient/linear-gradient()/linear-gradient.png b/files/ja/web/css/gradient/linear-gradient()/linear-gradient.png
new file mode 100644
index 0000000000..240da5855e
--- /dev/null
+++ b/files/ja/web/css/gradient/linear-gradient()/linear-gradient.png
diff --git a/files/ja/web/css/gradient/radial-gradient()/index.md b/files/ja/web/css/gradient/radial-gradient()/index.md
new file mode 100644
index 0000000000..127f5f85ac
--- /dev/null
+++ b/files/ja/web/css/gradient/radial-gradient()/index.md
@@ -0,0 +1,143 @@
+---
+title: radial-gradient()
+slug: Web/CSS/gradient/radial-gradient()
+tags:
+  - CSS
+  - CSS Function
+  - CSS Images
+  - Function
+  - Graphics
+  - Layout
+  - Reference
+  - Web
+  - gradient
+translation_of: Web/CSS/gradient/radial-gradient()
+original_slug: Web/CSS/radial-gradient()
+browser-compat: css.types.image.gradient.radial-gradient
+---
+{{CSSRef}}
+
+**`radial-gradient()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、二つ以上の色の連続的な推移が原点から放射状に広がる画像を生成します。形状は円形または楕円形にになります。関数の結果は {{cssxref("&lt;gradient&gt;")}} データ型のオブジェクトであり、これは {{cssxref("&lt;image&gt;")}} の特殊形です。
+
+{{EmbedInteractiveExample("pages/css/function-radial-gradient.html")}}
+
+## 構文
+
+```css
+/* コンテナーの中央にあるグラデーション、
+   赤で始まり、青へ変わり、緑で終わる */
+radial-gradient(circle at center, red 0, blue, green 100%)
+```
+
+放射状のグラデーションは、グラデーションの中心 (0％ の楕円の位置) と、*末端図形* (100％ の楕円) の大きさと形状を示すことで指定します。 
+
+## 値
+
+- {{cssxref("&lt;position&gt;")}}
+  - : グラデーションの位置で、 {{cssxref("background-position")}} や {{cssxref("transform-origin")}} と同じ方法で解釈されます。指定されなかった場合、既定値は `center` です。
+- `<ending-shape>`
+  - : グラデーションの末端図形です。値は `circle` (つまり、グラデーションの形状が一定の半径の円) か `ellipse` (つまり、軸に沿った楕円) のいずれかです。指定されなかった場合、既定値は `ellipse` です。
+- `<size>`
+
+  - : グラデーションの末端図形の大きさを決定します。省略した場合の既定値は farthest-corner です。これは明示的に指定することも、キーワードで指定することもできます。ここでのキーワード定義では、グラデーションボックスのエッジは有限の線分ではなく、両方向に無限に伸びているものと考えてください。
+
+    グラデーションが円でも楕円でも `<size>` に以下のキーワードを使用することができます。
+
+    | キーワード        | 説明                                                                                                                                          |
+    | ----------------- | --------------------------------------------------------------------------------------------------------------------------------------------- |
+    | `closest-side`    | グラデーションの末端図形は、ボックスの中心から最も近い辺 (circle の場合) または中心から最も近い縦の辺と横の辺 (ellipse の場合) に内接します。 |
+    | `closest-corner`  | グラデーションの末端図形は、ボックスの中心から最も近い頂点に接するように大きさが調整されます。                                                |
+    | `farthest-side`   | `closest-side` と同様ですが、末端図形がその中心から最も遠い辺 (または縦と横の辺) に接するように大きさが調整される点が異なります。             |
+    | `farthest-corner` | 既定値で、グラデーションの末端図形は、ボックスの中心から最も遠い頂点に接するように大きさが調整されます。                                      |
+
+    `<ending-shape>` を `circle` と指定した場合、大きさを明示的に [`<length>`](/ja/docs/Web/CSS/length) として与えることができ、円形の広がりの大きさを明示的に指定します。負の値は不正です。
+
+    `<ending-shape>` を `ellipse` と指定するか省略した場合、大きさを二つの [`<length-percentage>`](/ja/docs/Web/CSS/length-percentage) で指定して明示的な楕円の大きさを指定することができます。 1 つ目の値は水平の広がり、 2 つ目の値は垂直の広がりです。パーセント値はグラデーションボックスの対応する長さからの相対値です。負の値は不正です。
+
+- `<linear-color-stop>`
+  - : 色経由点の {{cssxref("&lt;color&gt;")}} 値と、それに続く 1 つまたは 2 つの省略可能な経由位置 (グラデーション軸沿いの {{cssxref("&lt;percentage&gt;")}} または {{cssxref("&lt;length&gt;")}}) です。 percentage が `0%`、または length が `0` の場合は、グラデーションの中心を表します。 `100%` は末端図形と仮想グラデーション光線の交点を表します。その間のパーセント値はグラデーション光線における直線的な位置です。
+- `<color-hint>`
+  - : color-hint は、隣り合う色経由点の間でどのようにグラデーションが進むかを定義する補間のヒントです。長さによって、どの位置で二つの色経由点のグラデーション色が色の移行の中間点に達するかを定義します。省略された場合、色の移行の中間点は二つの色経由点の中点になります。
+
+## 解説
+
+<p>他のグラデーションと同様、放射グラデーションは[自身の寸法を持ちません](/ja/docs/Web/CSS/image#description)。つまり、自然な寸法や推奨される寸法、推奨される縦横比もありません。具体的な寸法は、適用先の要素の寸法に一致します。
+
+繰り返してコンテナーを埋める放射グラデーションを生成するには、代わりに {{cssxref("gradient/repeating-radial-gradient()", "repeating-radial-gradient()")}} 関数を使用してください。
+
+`<gradient>` は `<image>` データ型に属するため、 `<image>` が使用できるところでしか使用できません。このため、 `radial-gradient()` は {{cssxref("background-color")}} や、その他の {{cssxref("&lt;color&gt;")}} データ型を使用するプロパティでは動作しません。</p>
+
+### 放射グラデーションの構成
+
+![](radial_gradient.png)放射グラデーションは*中心点*、*末端図形*、および二つ以上の*色経由点*で定義されます。
+
+滑らかなグラデーションを生成するために、 `radial-gradient()` 関数は中央から*末端図形* (およびその先) に向けて一連の同心円の形状を描きます。図形の端は円または楕円です。
+
+色経由点は、中心から右方向に水平に延びる*仮想グラデーション光線*の上に配置されます。色経由点の位置を決めるパーセント値は、図形の端とこのグラデーション光線の交点を `100%` としたときの相対値です。各形状は単色で、色は交差したグラデーション光線の色によって定義されます。
+
+## 例
+
+<h3 id="Simple_gradient">シンプルなグラデーション</h3>
+
+```html hidden
+<div class="radial-gradient"></div>
+```
+
+```css hidden
+.radial-gradient {
+  width: 240px;
+  height: 120px;
+}
+```
+
+```css
+.radial-gradient {
+  background-image: radial-gradient(cyan 0%, transparent 20%, salmon 40%);
+}
+```
+
+{{EmbedLiveSample('Simple_gradient', 120, 120)}}
+
+<h3 id="Non-centered_gradient">中央から外れたグラデーション</h3>
+
+```html hidden
+<div class="radial-gradient"></div>
+```
+
+```css hidden
+.radial-gradient {
+  width: 240px;
+  height: 120px;
+}
+```
+
+```css
+.radial-gradient {
+  background-image: radial-gradient(farthest-corner at 40px 40px,
+      #f35 0%, #43e 100%);
+}
+```
+
+{{EmbedLiveSample('Non-centered_gradient', 240, 120)}}
+
+### 他の radial-gradient の例
+
+他の例は [CSS グラデーションの使用](/ja/docs/Web/CSS/CSS_Images/Using_CSS_gradients)を参照してください。
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- [CSS グラデーションの使用](/ja/docs/Web/CSS/CSS_Images/Using_CSS_gradients)
+- 他のグラデーション関数: {{cssxref("gradient/repeating-radial-gradient()", "repeating-radial-gradient()")}}, {{cssxref("gradient/linear-gradient()", "linear-gradient()")}}, {{cssxref("gradient/repeating-linear-gradient()", "repeating-linear-gradient()")}}, {{cssxref("gradient/conic-gradient()", "conic-gradient()")}}, {{cssxref("gradient/repeating-conic-gradient()", "repeating-conic-gradient()")}}
+- {{cssxref("&lt;image&gt;")}}
+- {{cssxref("image/image()","image()")}}
+- {{cssxref("element()")}}
+- {{cssxref("image/image-set()","image-set()")}}
+- {{cssxref("cross-fade()")}}
diff --git a/files/ja/web/css/gradient/radial-gradient()/radial_gradient.png b/files/ja/web/css/gradient/radial-gradient()/radial_gradient.png
new file mode 100644
index 0000000000..f16dc4e5da
--- /dev/null
+++ b/files/ja/web/css/gradient/radial-gradient()/radial_gradient.png
diff --git a/files/ja/web/css/gradient/repeating-conic-gradient()/index.md b/files/ja/web/css/gradient/repeating-conic-gradient()/index.md
new file mode 100644
index 0000000000..f9780d9829
--- /dev/null
+++ b/files/ja/web/css/gradient/repeating-conic-gradient()/index.md
@@ -0,0 +1,177 @@
+---
+title: repeating-conic-gradient()
+slug: Web/CSS/gradient/repeating-conic-gradient()
+tags:
+  - CSS
+  - CSS Function
+  - CSS Images
+  - Function
+  - Graphics
+  - Layout
+  - Reference
+  - Web
+  - gradient
+browser-compat: css.types.image.gradient.repeating-conic-gradient
+translation_of: Web/CSS/gradient/repeating-conic-gradient()
+---
+{{CSSRef}}
+
+**`repeating-conic-gradient()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、 ([単一のグラデーション](conic-gradient())ではなく) 繰り返しのグラデーションからなる、色の遷移が (中心から[放射状に広がるのではなく](repeating-radial-gradient\(\))) 中心点の周りを回転する画像を生成します。
+
+## 構文
+
+```css
+/* スターバースト: 青の上に青のスターブラスト: 
+   このグラデーションは左上 4 分の 1 の位置を中心とした
+   明るい青と暗い青のスターブラストで、 3 度傾いている
+   ため垂直線がありません。 */
+background: repeating-conic-gradient(
+    from 3deg at 25% 25%,
+    hsl(200, 100%, 50%) 0deg 15deg,
+    hsl(200, 100%, 60%) 10deg 30deg);
+);
+```
+
+### 値
+
+- {{CSSxRef("&lt;angle&gt;")}}
+  - : `from` キーワードに続いて角度を指定することで、時計回りのグラデーションの位置を定義します。
+- `<position>`
+  - : {{cssxref("background-position")}} プロパティと同じ長さ、順番、キーワード値を使用して、グラデーションの中心の位置を定義します。省略すると、既定値は`center`、すなわちグラデーションに配置されます。
+- `<angular-color-stop>`
+  - : 色経由点の {{CSSxRef("&lt;color&gt;")}} 値で、その後にオプションで 1 ～ 2 個の位置 (グラデーションの円周軸に沿った {{CSSxRef("&lt;angle&gt;")}}) が続きます。最後の色経由点から最初の色経由点までの角度が反復グラデーションの大きさを定義します。
+- `<color-hint>`
+  - : 隣接する色経由点の間でグラデーションがどのように進行するかを定義する補間のヒントです。長さは、 2 つの色経由点の間のどの位置でグラデーションの色が色の遷移の中間点に到達するかを定義します。省略した場合、色の遷移の中間点は 2 つの色経由点間の中間点になります。
+
+> **Note:** [CSS グラデーションにおける色経由点](#gradient_with_multiple_color_stops)の描画は、 [SVG グラデーション](/ja/docs/Web/SVG/Tutorial/Gradients)と同じ規則に従います。
+
+## 解説
+
+反復扇形グラデーションの例にはスターバーストがあります。 `repeating-conic-gradient()` 関数の返値は {{CSSxRef("&lt;gradient&gt;")}} データ型のオブジェクトで、これは {{CSSxRef("&lt;image&gt;")}} の特殊形です。
+
+最初と最後の色経由点がどちらも 0 度以上か 360 度未満になっていない場合、 conic-gradient は繰り返されません。
+
+他のグラデーションと同様、扇形グラデーションは[自身の寸法を持ちません](/ja/docs/Web/CSS/image#description)。つまり、自然の寸法や推奨される寸法、推奨される縦横比もありません。自身の寸法は適用先の要素の寸法、または要素の寸法以外で設定された `<image>` の寸法に一致します。
+
+`<gradient>` は `<image>` データ型に属するため、 `<image>` が使用できるところでしか使用できません。このため、 `conic-gradient()` は {{CSSxRef("background-color")}} や、その他の {{CSSxRef("&lt;color&gt;")}} データ型を使用するプロパティでは動作しません。</p>
+
+> **Note:** 反復しない扇形グラデーションを作成するには、グラデーションを 360 度の回転にするか、 {{cssxref("gradient/conic-gradient()", "conic-gradient()")}} 関数を使用するかしてください。
+
+### 反復扇形グラデーションの理解
+
+repeating-conic-gradient の構文は、 {{cssxref("gradient/conic-gradient()", "conic-gradient()")}} や {{cssxref("gradient/repeating-radial-gradient()", "repeating-radial-gradient()")}} の構文に似ています。反復しない扇形グラデーションのように、色経由点はグラデーションの円弧の周りに配置されます。反復放射グラデーションのように、反復部分の大きさは、最後の色経由点の角度から最初の色経由点を引いたものになります。
+
+![反復／反復なしの扇形／放射グラデーションの色経由点の比較](repeatingconicgradient.png)
+
+上記のグラデーションは 3 分の 1 が青、 3 分の 1 が赤、 3 分の 1 が黄色として定義されています。
+
+    repeating-conic-gradient(from 0deg, red 0deg 30deg, yellow 30deg 60deg, blue 60deg 90deg);
+
+    repeating-radial-gradient(red 0 8%, yellow 8% 16%, blue 16% 24%);
+
+    conic-gradient(red 120deg, yellow 120deg 240deg, blue 240deg);
+
+    radial-gradient(red 33%, yellow 33% 66%, blue 66%);
+
+反復グラデーションを繰り返すためには、最初と最後の色経由点を定義します。繰り返さないグラデーションと同様に、最初と最後の色経由点は、明示的に宣言されていない場合、 0 と 100% または 360deg のいずれかであると仮定されます。これらの値を既定値とした場合、反復アークは360度となるため、繰り返されません。
+
+繰り返しのない扇形グラデーションと同様に、色経由点はグラデーションの中心から出ているグラデーション軸上ではなく、グラデーション円弧 (円の円周) の周りに配置されます。 `from <angle>` が宣言されていない場合は一番上から始まり、最大と最小の色の角度の違いである角度の大きさ分だけ時計回りに進み、それを繰り返すことで、円の中心を回るように色が推移します。
+
+繰り返しの扇形グラデーションは、回転角度とグラデーションの中心を指定し、さらに色経由点のリストを指定します。反復のない扇形グラデーションと同様に、反復扇形グラデーションの色経由点は {{cssxref('angle')}} で指定します。単位は、度は `deg`、グラデーションは `grad`、ラジアンは `rad`、ターンは `turn` です。円は、360 度、400 グラード、2πラジアン、1 ターンです。反復扇形グラデーションに対応しているブラウザーでは、360 度を 100% とするパーセント値も受け付けますが、これは仕様にはありません。
+
+放射グラデーションと扇形グラデーションの構文は、グラデーションの中心を画像内または画像外の任意の場所に配置することができます。位置を指定する値は、 2 値の {{cssxref('background-position')}} の構文と同様です。
+
+グラデーション円弧はグラデーションの円周の一部です。 0 度は北、つまり 12 時の方向です。グラデーションの色は、角度のついた色経由点、その開始点、終了点、そしてその間にある、任意の角度の色経由点ポイントによって決定されます。色の遷移は、隣接する色の色経由点の間にあるカラーヒントで変更することができます。
+
+#### グラデーションのカスタマイズ
+
+グラデーションの円弧上に角度のついた色経由点ポイントをさらに追加することで、複数の色の間の高度なカスタマイズされた移行を行うことができます。色経由点の位置は、{{CSSxRef("&lt;angle&gt;")}} を使って明示的に定義することができます。色経由点の位置を指定しない場合は、その前の色経由点と後の色経由点の中間に配置されます。反復しないグラデーションと同様に、最初と最後の色経由点の角度を指定しない場合、その値は 0 度と 360 度になります。いずれの角度も指定しない場合は、非反復の円錐形グラデーションになります。最初と最後の色経由点にそれぞれ 0 度と 360 度以外の値を宣言すると、グラデーションはその値に基づいて繰り返されます。例えば、最初の色に角度を宣言せず、最後の色止めに 10% と宣言した場合、円弧は 10 回繰り返されます。むしろ、最初に宣言した色経由点が起点となり、最後の色経由点は最後に宣言した色経由点の角度となります。次の 2 つのグラデーションは等価です。
+
+```css
+repeating-conic-gradient(red, orange, yellow, green, blue 50%);
+repeating-conic-gradient(from -45deg, red 45deg, orange, yellow, green, blue 225deg)
+```
+
+既定では、色はある色経由点の色から次の色経由点の色へとスムーズに移行し、色と色の中間点が色移行の中間点となります。この色遷移の中間点は、色遷移の中間点の位置を示すカラーヒントを追加することで、 2 つの色経由点間の任意の位置に移動させることができます。
+
+2 つ以上の色経由点が同じ場所にある場合、その場所で宣言された最初の色と最後の色の間で硬い線になります。
+
+異なる角度の単位を混在させることは可能ですが、やめておきましょう。 CSS が読みづらくなります。
+
+## アクセシビリティの考慮
+
+ブラウザは、背景画像に関する特別な情報を支援技術に提供しません。これは主に画面リーダーにとって重要なことで、画面リーダーはその存在を告知しないため、ユーザーに何も伝えられません。扇形グラデーションを使って円グラフや市松模様などの効果を出すことは可能ですが、 CSS 画像は代替テキストを割り当てるネイティブな方法を提供していないため、扇形グラデーションで表現された画像は画面リーダーのユーザーが認知することはできません。ページの全体的な目的を理解するために重要な情報が画像に含まれている場合は、文書内で意味的に記述する方が良いでしょう。
+
+- [MDN WCAG を理解する, ガイドライン 1.1 の説明](/ja/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](https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/text-equiv-all.html)
+
+## 例
+
+<h3 id="Black_and_white_starburst">白黒のスターブラスト</h3>
+
+```css hidden
+div {
+  width: 200px;
+  height: 200px;
+}
+```
+
+```html hidden
+<div></div>
+```
+
+```css
+div {
+  background-image:
+     repeating-conic-gradient(#fff 0 9deg, #000 9deg 18deg);
+}
+```
+
+{{EmbedLiveSample("Black_and_white_starburst", 220, 220)}}
+
+<h3 id="Off-centered_gradient">中心をずらしたグラデーション</h3>
+
+このグラデーションは 18 回繰り返されますが、右半分しか見えないので、 9 回の繰り返しにしか見えません。
+
+```css hidden
+div {
+  width: 200px;
+  height: 200px;
+}
+```
+
+```html hidden
+<div></div>
+```
+
+```css
+div {
+  background: repeating-conic-gradient(
+    from 3deg at 25% 25%,
+    green, blue 2deg 5deg, green, yellow 15deg 18deg, green 20deg);
+}
+```
+
+{{EmbedLiveSample("Off-centered_gradient", 220, 220)}}
+
+### その他の repeating-conic-gradient の例
+
+それ以外の例は [CSS グラデーション](/ja/docs/Web/CSS/CSS_Images/Using_CSS_gradients)を参照してください。
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- [CSS グラデーションの使用](/ja/docs/Web/CSS/CSS_Images/Using_CSS_gradients)
+- その他のグラデーション関数: {{cssxref("gradient/conic-gradient()", "conic-gradient()")}}, {{cssxref("gradient/linear-gradient()", "linear-gradient()")}}, {{cssxref("gradient/repeating-linear-gradient()", "repeating-linear-gradient()")}}, {{cssxref("gradient/radial-gradient()", "radial-gradient()")}}, {{cssxref("gradient/repeating-radial-gradient()", "repeating-radial-gradient()")}}
+- {{cssxref("&lt;image&gt;")}}
+- {{cssxref("image/image()","image()")}}
+- {{cssxref("element()")}}
+- {{cssxref("image/image-set()","image-set()")}}
+- {{cssxref("cross-fade()")}}
diff --git a/files/ja/web/css/gradient/repeating-linear-gradient()/index.md b/files/ja/web/css/gradient/repeating-linear-gradient()/index.md
new file mode 100644
index 0000000000..de9a11c8ab
--- /dev/null
+++ b/files/ja/web/css/gradient/repeating-linear-gradient()/index.md
@@ -0,0 +1,149 @@
+---
+title: repeating-linear-gradient()
+slug: Web/CSS/gradient/repeating-linear-gradient()
+tags:
+  - CSS
+  - CSS Function
+  - CSS Images
+  - Function
+  - Gradients
+  - Graphics
+  - Layout
+  - Reference
+  - Web
+browser-compat: css.types.image.gradient.repeating-linear-gradient
+translation_of: Web/CSS/gradient/repeating-linear-gradient()
+original_slug: Web/CSS/repeating-linear-gradient()
+---
+{{CSSRef}}
+
+**`repeating-linear-gradient()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、反復線形グラデーションによる画像を生成します。 {{cssxref("gradient/linear-gradient()", "linear-gradient()")}} と似ており、同じ引数を取りますが、両方向に無限に色経由点を繰り返してコンテナー全体を埋めます。関数の返値は {{cssxref("&lt;gradient&gt;")}} データ型のオブジェクトであり、これは {{cssxref("&lt;image&gt;")}} の特殊型です。
+
+{{EmbedInteractiveExample("pages/css/function-repeating-linear-gradient.html")}}
+
+繰り返すグラデーションの長さは、最初の色経由点と最後の色経由点の間の距離です。最初の色に color-stop-length がない場合、 color-stop-length の既定値は 0 になります。それぞれの繰り返しにおいて、色経由点の位置は基本的な線形グラデーションの長さの倍数だけずらしたものになります。この結果、グラデーションの最初と最後の色は常に隣り合わせになります。二つが異なる色であれば、視覚的に明確な変わり目ができるでしょう。これは最初の色を最後の色として再び使用することで修正することができます。
+
+他のグラデーションと同じく、線形反復グラデーションも[自身の寸法を持ちません](/ja/docs/Web/CSS/image#description)。つまり、本来の寸法も優先される寸法も、優先されるアスペクト比も持たないということです。実際の寸法は、適用先の要素の寸法と一致します。
+
+`<gradient>` は CSS の `<image>` データ型に所属しますので、 `<image>` が使用できるところでのみ使用できます。このため、 `repeating-linear-gradient()` は {{Cssxref("background-color")}} や、その他の {{cssxref("&lt;color&gt;")}} を要求するプロパティでは動作しません。
+
+## 構文
+
+```css
+/* 45 度方向に軸を延ばし、青で始め赤で終わり、
+   3 回繰り返す反復グラデーション */
+repeating-linear-gradient(45deg, blue, red 33.3%);
+
+/* 右下から左上に延び、青で始め赤で終わり、
+   20px ごとに繰り返す反復グラデーション */
+repeating-linear-gradient(to left top, blue, red 20px);
+
+/* 下から上に延び、青で始め、 40% から緑になり、
+   赤で終わるグラデーション。最後の色経由点が既定で
+	 100% なので、グラデーションは繰り返されない */
+repeating-linear-gradient(0deg, blue, green 40%, red);
+
+/* 5 回繰り返し、左から右に、赤で始まり、緑に変わり、
+   赤に戻るグラデーション */
+repeating-linear-gradient(to right, red 0%, green 10%, red 20%);
+```
+
+### 値
+
+- `<side-or-corner>`
+
+  - : グラデーション線の開始点の位置。指定する場合は、 `to` に続けて 2 つ以下のキーワードを指定します。一つは水平方向の辺 (`left` または `right`)、もう一方は垂直方向の辺 (`top` または `bottom`) です。辺を表すキーワードは順不同です。指定しない場合は、 `to bottom` が既定になります。
+
+     `to top`, `to bottom`, `to left`, `to right` の値は、 `0deg`, `180deg`, `270deg`, `90deg` の角度にそれぞれ対応します。他の値は角度に変換されます。
+
+- {{cssxref("&lt;angle&gt;")}}
+  - : グラデーション線の方向を角度で示します。 `0deg` の値は `to top` と等価で、値が増加するとそこから時計回りに回ります。
+- `<linear-color-stop>`
+  - : 色経由点の {{CSSxRef("&lt;color&gt;")}} の値であり、任意でその後に停止位置を指定します(グラデーションの軸に沿った {{CSSxRef("&lt;percentage&gt;")}} または {{CSSxRef("&lt;length&gt;")}} の位置)。 `0%` のパーセント値または `0` の長さは、グラデーションの先頭を表します。 `100%` の値は画像の寸法の 100% であり、つまりグラデーションは反復されません。
+- `<color-hint>`
+  - : color-hint は、隣り合う色経由点の間でどのようにグラデーションが進むかを定義する補間のヒントです。長さによって、どの位置で二つの色経由点のグラデーション色が色の移行の中間点に達するかを定義します。省略された場合、色の移行の中間点は二つの色経由点の中点になります。
+
+> **Note:** [CSS グラデーションにおける色経由点](#gradient_with_multiple_color_stops)の描画は、 [SVG グラデーション](/ja/docs/Web/SVG/Tutorial/Gradients)と同じ規則に従います。
+
+### 形式文法
+
+```css
+repeating-linear-gradient(  [ <angle> | to <side-or-corner> ,]? <color-stop-list> )
+                            \---------------------------------/ \---------------/
+                                  グラデーション線の定義         色経由点のリスト
+
+where <side-or-corner> = [left | right] || [top | bottom]
+  and <color-stop-list> = [ <linear-color-stop> [, <color-hint>? ]? ]#, <linear-color-stop>
+  and <linear-color-stop> = <color> [ <color-stop-length> ]?
+  and <color-stop-length> = [ <percentage> | <length> ]{1,2}
+  and <color-hint> = [ <percentage> | <length> ]
+```
+
+## 例
+
+<h3 id="Zebra_stripes">縞模様</h3>
+
+```css hidden
+body {
+  width: 100vw;
+  height: 100vh;
+}
+```
+
+```css
+body {
+  background-image: repeating-linear-gradient(-45deg,
+      transparent,
+      transparent 20px,
+      black 20px,
+      black 40px);
+  /* 複数の色経由点の位置 */
+  background-image: repeating-linear-gradient(-45deg,
+      transparent 0 20px,
+      black 20px 40px);
+}
+```
+
+{{EmbedLiveSample('Zebra_stripes', 120, 120)}}
+
+<h3 id="Ten_repeating_horizontal_bars">10 回繰り返す水平線</h3>
+
+```css hidden
+body {
+  width: 100vw;
+  height: 100vh;
+}
+```
+
+```css
+body {
+  background-image: repeating-linear-gradient(to bottom,
+      rgb(26,198,204),
+      rgb(26,198,204) 7%,
+      rgb(100,100,100) 10%);
+}
+```
+
+{{EmbedLiveSample('Ten_repeating_horizontal_bars', 120, 120)}}
+
+最後の色経由点が 10% であり、グラデーションが垂直なので、反復グラデーション内の各グラデーションは 10% の高さになり、 10 本の水平線に相当します。
+
+> **Note:** 他の例は [CSS グラデーションの使用](/ja/docs/Web/CSS/CSS_Images/Using_CSS_gradients)を参照してください。
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- [CSS グラデーションの使用](/ja/docs/Web/CSS/CSS_Images/Using_CSS_gradients)
+- 他のグラデーション関数: {{cssxref("gradient/linear-gradient()", "linear-gradient()")}}, {{cssxref("gradient/radial-gradient()", "radial-gradient()")}}, {{cssxref("gradient/repeating-radial-gradient()", "repeating-radial-gradient()")}}, {{cssxref("gradient/conic-gradient()", "conic-gradient()")}}, {{cssxref("gradient/repeating-conic-gradient()", "repeating-conic-gradient()")}}
+- {{cssxref("&lt;image&gt;")}}
+- {{cssxref("image/image()","image()")}}
+- {{cssxref("element()")}}
+- {{cssxref("image/image-set()","image-set()")}}
+- {{cssxref("cross-fade()")}}
diff --git a/files/ja/web/css/gradient/repeating-radial-gradient()/index.md b/files/ja/web/css/gradient/repeating-radial-gradient()/index.md
new file mode 100644
index 0000000000..8142f54a54
--- /dev/null
+++ b/files/ja/web/css/gradient/repeating-radial-gradient()/index.md
@@ -0,0 +1,152 @@
+---
+title: repeating-radial-gradient()
+slug: Web/CSS/gradient/repeating-radial-gradient()
+tags:
+  - CSS
+  - CSS Function
+  - CSS Images
+  - Function
+  - Gradients
+  - Graphics
+  - Layout
+  - Reference
+  - Web
+browser-compat: css.types.image.gradient.repeating-radial-gradient
+translation_of: Web/CSS/gradient/repeating-radial-gradient()
+original_slug: Web/CSS/repeating-radial-gradient()
+---
+{{CSSRef}}
+
+**`repeating-radial-gradient()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、原点から広がり反復するグラデーションから成る画像を生成します。 {{cssxref("gradient/radial-gradient()", "radial-gradient()")}} と似ており、同じ引数を取りますが、 {{cssxref("gradient/repeating-linear-gradient()", "repeating-linear-gradient()")}} と同様にすべての方向に色経由点を無限に繰り返してコンテナー全体を埋めます。関数の返値は {{cssxref("&lt;gradient&gt;")}} データ型のオブジェクトであり、これは {{cssxref("&lt;image&gt;")}} の特殊型です。
+
+{{EmbedInteractiveExample("pages/css/function-repeating-radial-gradient.html")}}
+
+それぞれの繰り返しにおいて、色経由点の位置は基本的な放射グラデーションの寸法 (最初と最後の色経由点の間の距離) の倍数だけずらしたものになります。この結果、グラデーションの最初と最後の色は常に隣り合わせになります。二つが異なる色であれば、視覚的に明確な変わり目ができるので、最初の色を最後の色として繰り返すことで緩和できます。
+
+他のグラデーションと同じく、放射反復グラデーションも[自身の寸法を持ちません](/ja/docs/Web/CSS/image#description)。つまり、本来の寸法も優先される寸法も、優先されるアスペクト比も持たないということです。実際の寸法は、適用先の要素の寸法と一致します。
+
+`<gradient>` は `<image>` データ型に属するため、 `<image>` が使用できるところでしか使用できません。このため、 `repeating-radial-gradient()` は {{cssxref("background-color")}} や、その他の {{cssxref("&lt;color&gt;")}} データ型を使用するプロパティでは動作しません。
+
+## 構文
+
+```css
+/* コンテナーの中央からのグラデーションで、
+   赤で始まり、青に変化し、緑で終わり、
+   それぞれ 30px ごとに色が繰り返される */
+repeating-radial-gradient(circle at center, red 0, blue, green 30px);
+
+/* 左上の角付近の楕円形のグラデーションで、
+   赤で始まり、緑に変化し、また戻り、
+   中央と右下の角の間で5回繰り返され、
+   中央と左上の角の間は1回だけ */
+repeating-radial-gradient(farthest-corner at 20% 20%, red 0, green, red 20%);
+```
+
+### 値
+
+- {{cssxref("&lt;position&gt;")}}
+  - : グラデーションの位置で、 {{cssxref("background-position")}} や {{cssxref("transform-origin")}} と同じ方法で解釈されます。指定されなかった場合、既定値は `center` です。
+- `<shape>`
+  - : グラデーションの形状です。 `circle` (グラデーションの形状が一定の半径の円の意味) か `ellipse` (軸に沿った楕円の意味) のいずれかです。指定されなかった場合、既定値は `ellipse` です。
+- `<extent-keyword>`
+
+  - : 終端の形状の大きさを指定するキーワードです。利用可能な値は次の通りです。
+
+    | キーワード        | 説明                                                                                                                                              |
+    | ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- |
+    | `closest-side`    | グラデーションの終端の形状は、中心から最も近いボックスの辺に (circle の場合) または中心から最も近い縦の辺と横の辺に (ellipse の場合) 内接します。 |
+    | `closest-corner`  | グラデーションの終端の形状は、ボックスの中心から最も近い頂点に接するように大きさが調整されます。                                                  |
+    | `farthest-side`   | `closest-side` と同様ですが、終端の形状がその中心から最も遠い辺 (または縦と横の辺) に接するように大きさが調整される点が異なります。               |
+    | `farthest-corner` | グラデーションの終端の形状は、ボックスの中心から最も遠い頂点に接するように大きさが調整されます。                                                  |
+
+    > **Note:** この関数の初期の実装では、他のキーワード (`cover` および `contain`) をそれぞれ標準の `farthest-corner` および `closest-side` の別名として含めていました。実装によってはすでに古い形を外しているので、標準的なキーワードのみを使用してください。
+
+- `<color-stop>`
+  - : 色経由点の {{cssxref("&lt;color&gt;")}} 値と、それに続く省略可能な経由位置 (グラデーション軸沿いの {{cssxref("&lt;percentage&gt;")}} または {{cssxref("&lt;length&gt;")}}) です。 percentage が `0%`、または length が `0` の場合は、グラデーションの中心を表します。 `100%` は終端の形状と仮想グラデーション光の交点を表します。その間のパーセント値は仮想グラデーション光における直線的な位置です。
+
+### 形式文法
+
+```css
+repeating-radial-gradient(
+       [[ circle  || <length> ]                     [at <position>]? , |
+        [ ellipse || [<length> | <percentage> ]{2}] [at <position>]? , |
+        [[ circle | ellipse ] || <extent-keyword> ] [at <position>]? , |
+                                                     at <position>   ,    <color-stop-list> )
+        \---------------------------------------------------------------/\-----------------/
+                  Contour, size and position of the ending shape          List of color stops
+
+where <extent-keyword> = closest-corner | closest-side | farthest-corner | farthest-side
+   and <color-stop-list> = [ <linear-color-stop> [, <color-hint>? ]? ]#, <linear-color-stop>
+   and <linear-color-stop> = <color> [ <color-stop-length> ]?
+   and <color-stop-length> = [ <percentage> | <length> ]{1,2}
+   and <color-hint> = [ <percentage> | <length> ]
+```
+
+## 例
+
+<h3 id="Black_and_white_gradient">白と黒のグラデーション</h3>
+
+```html hidden
+<div class="radial-gradient"></div>
+```
+
+```css hidden
+.radial-gradient {
+  width: 120px;
+  height: 120px;
+}
+```
+
+```css
+.radial-gradient {
+  background: repeating-radial-gradient(black, black 5px, white 5px, white 10px);
+}
+```
+
+{{EmbedLiveSample('Black_and_white_gradient', 120, 120)}}
+
+<h3 id="Farthest-corner">最も遠い角</h3>
+
+```html hidden
+<div class="radial-gradient"></div>
+```
+
+```css hidden
+.radial-gradient {
+  width: 240px;
+  height: 120px;
+}
+```
+
+```css
+.radial-gradient {
+  background: repeating-radial-gradient(ellipse farthest-corner at 20% 20%,
+      red, black 5%, blue 5%, green 10%);
+  background: repeating-radial-gradient(ellipse farthest-corner at 20% 20%,
+      red 0 5%, green 5% 10%);
+}
+```
+
+{{EmbedLiveSample('Farthest-corner', 120, 120)}}
+
+楕円のグラデーションは左上から 20% の位置が中心となり、中心と最も遠い角 (右下の角) の間で 10 回繰り返します。色経由点で複数の位置に対応しているブラウザーでは、赤と緑の縞模様の楕円が表示されます。この構文にまだ対応していないブラウザーでは、赤から黒、それから青から緑へと変化するグラデーションが表示されます。
+
+> **Note:** 他の例は [CSS グラデーションの使用](/ja/docs/Web/CSS/CSS_Images/Using_CSS_gradients)をご覧ください。
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- [CSS グラデーションの使用](/ja/docs/Web/CSS/CSS_Images/Using_CSS_gradients)
+- 他のグラデーション関数: {{cssxref("gradient/radial-gradient()", "radial-gradient()")}}, {{cssxref("gradient/linear-gradient()", "linear-gradient()")}}, {{cssxref("gradient/repeating-linear-gradient()", "repeating-linear-gradient()")}}, {{cssxref("gradient/conic-gradient()", "conic-gradient()")}}, {{cssxref("gradient/repeating-conic-gradient()", "repeating-conic-gradient()")}}
+- {{cssxref("&lt;image&gt;")}}
+- {{cssxref("image/image()","image()")}}
+- {{cssxref("element()")}}
+- {{cssxref("image/image-set()","image-set()")}}
+- {{cssxref("cross-fade()")}}
diff --git a/files/ja/web/css/grid-column-start/index.html b/files/ja/web/css/grid-column-start/index.html
index 851c96552c..cf2f596e8d 100644
--- a/files/ja/web/css/grid-column-start/index.html
+++ b/files/ja/web/css/grid-column-start/index.html
@@ -181,7 +181,7 @@ grid-column-start: unset;
  <li>動画チュートリアル: <em><a href="http://gridbyexample.com/video/series-line-based-placement/">行ベースの配置</a></em></li>
 </ul>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li><a href="/ja/docs/Web/CSS"><strong>CSS</strong></a></li>
  <li><a href="/ja/docs/Web/CSS/Reference"><strong>CSS リファレンス</strong></a></li>
diff --git a/files/ja/web/css/grid-column/index.html b/files/ja/web/css/grid-column/index.html
index 8f96c2f915..3a6f29ac1d 100644
--- a/files/ja/web/css/grid-column/index.html
+++ b/files/ja/web/css/grid-column/index.html
@@ -132,7 +132,7 @@ translation_of: Web/CSS/grid-column
  <li>動画チュートリアル: <em><a href="http://gridbyexample.com/video/series-line-based-placement/">行ベースの配置</a></em></li>
 </ul>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li><a href="/ja/docs/Web/CSS"><strong>CSS</strong></a></li>
  <li><a href="/ja/docs/Web/CSS/Reference"><strong>CSS リファレンス</strong></a></li>
diff --git a/files/ja/web/css/grid-row/index.html b/files/ja/web/css/grid-row/index.html
index 5ec045442a..7531bbfdec 100644
--- a/files/ja/web/css/grid-row/index.html
+++ b/files/ja/web/css/grid-row/index.html
@@ -149,7 +149,7 @@ grid-row: unset;
  <li>動画チュートリアル: <em><a href="http://gridbyexample.com/video/series-line-based-placement/">行ベースの配置</a></em></li>
 </ul>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li><a href="/ja/docs/Web/CSS"><strong>CSS</strong></a></li>
  <li><a href="/ja/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li>
diff --git a/files/ja/web/css/grid-template-areas/index.html b/files/ja/web/css/grid-template-areas/index.html
index ab3aa7b42a..f753d8596d 100644
--- a/files/ja/web/css/grid-template-areas/index.html
+++ b/files/ja/web/css/grid-template-areas/index.html
@@ -126,7 +126,7 @@ grid-template-areas: unset;
  <li>動画チュートリアル: <em><a href="http://gridbyexample.com/video/grid-template-areas/">Grid Template Areas</a></em></li>
 </ul>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li><a href="/ja/docs/Web/CSS"><strong>CSS</strong></a></li>
  <li><a href="/ja/docs/Web/CSS/Reference"><strong>CSS リファレンス</strong></a></li>
diff --git a/files/ja/web/css/grid-template-columns/index.html b/files/ja/web/css/grid-template-columns/index.html
index 8dd5cc65cc..d0b5627b94 100644
--- a/files/ja/web/css/grid-template-columns/index.html
+++ b/files/ja/web/css/grid-template-columns/index.html
@@ -158,7 +158,7 @@ grid-template-columns: unset;
  <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Subgrid">Subgrid</a></li>
 </ul>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li><a href="/ja/docs/Web/CSS"><strong>CSS</strong></a></li>
  <li><a href="/ja/docs/Web/CSS/Reference"><strong>CSS リファレンス</strong></a></li>
diff --git a/files/ja/web/css/grid-template/index.html b/files/ja/web/css/grid-template/index.html
index 7108c8f12b..c80fd2a006 100644
--- a/files/ja/web/css/grid-template/index.html
+++ b/files/ja/web/css/grid-template/index.html
@@ -152,7 +152,7 @@ footer {
  <li>動画チュートリアル:<em> <a href="http://gridbyexample.com/video/grid-template-shorthand/">Grid Template shorthand</a></em></li>
 </ul>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li><a href="/ja/docs/Web/CSS"><strong>CSS</strong></a></li>
  <li><a href="/ja/docs/Web/CSS/Reference"><strong>CSS リファレンス</strong></a></li>
diff --git a/files/ja/web/css/grid/index.html b/files/ja/web/css/grid/index.html
index f952fbd25d..6b5a8f0d1f 100644
--- a/files/ja/web/css/grid/index.html
+++ b/files/ja/web/css/grid/index.html
@@ -140,7 +140,7 @@ grid: unset;
  <li>グリッドレイアウトガイド: <em><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas#Grid_definition_shorthands">グリッドテンプレート領域 - グリッド定義の一括指定</a></em></li>
 </ul>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li><a href="/ja/docs/Web/CSS"><strong>CSS</strong></a></li>
  <li><a href="/ja/docs/Web/CSS/Reference"><strong>CSS リファレンス</strong></a></li>
diff --git a/files/ja/web/css/image/image()/index.md b/files/ja/web/css/image/image()/index.md
new file mode 100644
index 0000000000..e550541331
--- /dev/null
+++ b/files/ja/web/css/image/image()/index.md
@@ -0,0 +1,155 @@
+---
+title: image()
+slug: Web/CSS/image/image()
+tags:
+  - CSS
+  - CSS Function
+  - CSS Images
+  - Function
+  - Reference
+  - Web
+browser-compat: css.types.image.image
+translation_of: Web/CSS/image/image()
+---
+{{CSSRef}}
+
+The **`image()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、 {{CSSxRef("&lt;image&gt;")}} を {{CSSxRef("url()")}} 関数と同様の様式で定義しますが、画像の書字方向を指定したり、メディアフラグメントで定義された画像の一部だけを表示したり、指定された画像がどれも描画できなかった場合の予備として単色を指定するなどの機能が追加されています。
+
+> **Note:** CSS の `image()` 関数を {{DOMxRef("HTMLImageElement/Image", '<code>HTMLImageElement</code> のコンストラクターである <code>Image()</code>', '', 1)}} と混同しないでください。
+
+## 構文
+
+{{CSSSyntax("image()")}}
+
+ここで
+
+- `image-tags`{{Optional_Inline}}
+  - : 画像の書字方向、左書きならば `ltr`、右書きならば `rtl` です。
+- `image-src` {{Optional_Inline}}
+  - : 0 個以上の {{CSSxRef("url()")}} または {{CSSxRef("&lt;string&gt;")}} で、画像のソースをオプションの画像フラグメント識別子と共に指定します。
+- `color`{{Optional_Inline}}
+  - : 色であり、 `image-src` が見つからなかったり、対応していなかったり、宣言されていなかったりした場合の代替として使用される単色の背景色を指定します。
+
+### 書字方向の認識
+
+`image()` 表記の最初のオプション引数は、画像の書字方向です。この引数が含まれている場合、画像が反対の書字方向を持つ要素で使用されると、横書きモードでは画像が水平に反転します。書字方向を省略した場合は、言語の方向が変わっても画像は反転しません。
+
+### 画像フラグメント
+
+`url()` と `image()` の大きな違いは、メディアフラグメント識別子 (開始点の x 軸と y 軸、幅と高さ) を画像ソースに追加することで、ソース画像の一部分のみを表示することができることです。引数で定義された画像の範囲は、独立した画像になります。構文は次のようになります。
+
+```css
+background-image: image('myimage.webp#xywh=0,20,40,60');
+```
+
+要素の背景画像は、画像 _myImage.webp_ のうち、 0px, 20px の座標 (左上隅) から始まり、幅 40px、高さ 60px の部分になります。
+
+
+`#xywh=#,#,#,#` というメディアフラグメントの構文は、カンマで区切られた 4 つの数値を取ります。最初の 2 つの値は、作成されるボックスの始点の X および Y 座標を表します。 3 つ目の値はボックスの幅、最後の値は高さです。既定では、これらはピクセル値です。[メディア仕様書の spacial dimension definition](https://www.w3.org/TR/media-frags/#naming-space) によると、パーセント値にも対応しています。
+
+```css
+xywh=160,120,320,240        /* results in a 320x240 image at x=160 and y=120 */
+xywh=pixel:160,120,320,240  /* results in a 320x240 image at x=160 and y=120 */
+xywh=percent:25,25,50,50    /* results in a 50%x50% image at x=25% and y=25% */
+```
+
+イメージフラグメントは、 `url()` 記法でも使用できます。 `#xywh=#,#,#,#` というメディアフラグメントの構文は「後方互換」であり、メディアフラグメントが理解できない場合は無視され、 `url()` で使用してもソースの呼び出しが壊れることはありません。ブラウザーがメディアフラグメントの表記を理解していない場合、フラグメントを無視して画像全体を表示します。
+
+`image()` を理解できるブラウザーはフラグメント表記も理解できます。したがって、フラグメントが `image()` の中で理解できない場合は、その画像は無効とみなされます。
+
+### 色による代替
+
+`image()` で画像ソースと一緒に色が指定されていると、画像が無効で表示されない場合の代替として機能します。このような場合、`image()` 関数は、画像が含まれていないかのように描画を行い、単一色の画像を生成します。例として、白いテキストの背景に暗い色の画像を使用する場合を考えてみましょう。画像が描画されない場合、前景のテキストを読みやすくするために暗い背景色が必要になることがあります。
+
+画像ソースを省略して色を含めることは有効で、色見本を作成します。背景色を宣言すると、すべての背景画像の下や後ろに配置されるのとは異なり、これは他の画像の上に (通常は半透明の) 色を配置するために使用できます。
+
+色見本の寸法は、 {{CSSxRef("background-size")}} プロパティで設定できます。これは、要素全体を覆うように色を設定する `background-color` とは異なります。 `image(color)` と `background-color` の両方を配置すると、 {{CSSxRef("background-clip")}} と {{CSSxRef("background-origin")}} プロパティの影響を受けます。
+
+## アクセシビリティの考慮
+
+ブラウザーは、背景画像に関する特別な情報を支援技術に提供しません。これは主に画面リーダーにとって重要なことで、画面リーダーはその存在を告知しないため、ユーザーに何も伝えません。画像に、ページ全体の目的を理解するために重要な情報が含まれている場合は、文書内で意味的に記述したほうがよいでしょう。
+
+- [MDN WCAG を理解する, ガイドライン 1.1 の説明](/ja/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](https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/text-equiv-all.html)
+
+この機能は、画像の読み込みに失敗したときに予備の色を提供することで、アクセシビリティの向上に役立ちます。この機能は、すべての背景画像に背景色を含めることで実現できますが、 CSS の `image()` 関数では、画像の読み込みに失敗したときに背景色のみを含めることができます。つまり、透過 PNG/GIF/WebP の読み込みに失敗したときに、予備の色を追加することができます。
+
+## 例
+
+<h3 id="Directionally-sensitive_images">書字方向を意識した画像</h3>
+
+```html
+<ul>
+  <li dir="ltr">行頭記号が左側で右向きの矢印になります。</li>
+  <li dir="rtl">行頭記号は同じ矢印で、左を指します。</li>
+</ul>
+```
+
+```css
+ul {
+  list-style-image: image(ltr 'rightarrow.png');
+}
+```
+
+左書きのリスト項目 (要素自体に `dir="ltr"` が設定されているもの、祖先から書字方向を継承しているもの、ページの既定値) では、画像がそのまま使用されます。 `<li>` に `dir="rtl"` が設定されているリスト項目や、祖先から右から左への指向性を受け継いでいるリスト項目 (アラビア語やヘブライ語に設定されている文書など) では、 `transform: scalex(-1)` が設定されているかのように、箇条書きのテキストが水平方向に反転して右に表示されます。テキストも左書きで表示されます。
+
+{{EmbedLiveSample("Directionally-sensitive_images", "100%", 200)}}
+
+<h3 id="Displaying_a_section_of_the_background_image">背景画像のある範囲の表示</h3>
+
+```html
+<div class="box">この上にカーソルを移動してください。どのように見えますか？</div>
+```
+
+```css
+.box:hover {
+  cursor: image("sprite.png#xywh=32,64,16,16");
+}
+```
+
+ユーザーがボックスの上にカーソルを移動させると、カーソルは x=32 と y=64 の位置から始まる 16x16 ピクセルの範囲のスプライト画像に変わります。
+
+{{EmbedLiveSample("Displaying_a_section_of_the_background_image", "100%", 100)}}
+
+<h3 id="Putting_color_on_top_of_a_background_image">背景画像の上に色を配置</h3>
+
+```css hidden
+.quarterlogo {height: 200px; width: 200px; border: 1px solid;}
+```
+
+```css
+.quarterlogo {
+  background-image:
+    image(rgba(0, 0, 0, 0.25)),
+    url("firefox.png");
+  background-size: 25%;
+  background-repeat: no-repeat;
+}
+```
+
+```html
+<div class="quarterlogo">対応している場合、この div の4分の1は、ロゴが暗くなります</div>
+```
+
+上記の例は、 Firefox のロゴの背景画像に半透明の黒いマスクをかぶせています。 {{cssxref("background-color")}} プロパティを使用していた場合は、色はロゴ画像の上ではなく背後に表示されていたでしょう。また、コンテナー全体の背景色も同じになっていたでしょう。 `image()` と {{CSSxRef("background-size")}} プロパティを使用し、 {{CSSxRef("background-repeat")}} プロパティで画像が繰り返されないようにしたため、色見本はコンテナーの 4 分の 1 しか覆っていません。
+
+{{EmbedLiveSample("Putting_color_on_top_of_a_background_image", "100%", 220)}}
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## See also
+
+- {{CSSxRef("&lt;image&gt;")}}
+- {{CSSxRef("element()")}}
+- {{CSSxRef("url()")}}
+- {{CSSxRef("clip-path")}}
+- {{CSSxRef("-moz-image-rect")}}
+- {{CSSxRef("&lt;gradient&gt;")}}
+- {{CSSxRef("image/image-set()")}}
+- {{CSSxRef("cross-fade()")}}
diff --git a/files/ja/web/css/image/image-set()/index.md b/files/ja/web/css/image/image-set()/index.md
new file mode 100644
index 0000000000..8fbb72453c
--- /dev/null
+++ b/files/ja/web/css/image/image-set()/index.md
@@ -0,0 +1,93 @@
+---
+title: image-set()
+slug: Web/CSS/image/image-set()
+tags:
+  - CSS
+  - CSS Function
+  - CSS-4 Images
+  - Function
+  - Reference
+  - Web
+browser-compat: css.types.image.image-set
+translation_of: Web/CSS/image/image-set()
+original_slug: Web/CSS/image-set()
+---
+{{cssref}}
+
+**`image-set()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)表記で、主に高解像度の画面において、指定されたセットから最も適切な CSS 画像をブラウザーに選択させる方法です。
+
+解像度と帯域は端末やネットワークアクセスによって様々です。 `image-set()` 関数は、画像オプションのセットを提供して — それぞれが解像度の宣言に関連付けられ — ブラウザーが端末および設定にもっともふさわしいものを選択することで、ユーザーの端末にもっとも適切な解像度の画像を配信します。解像度はファイルサイズのプロキシーとして使用することができます。 — 高解像度の画面で遅いモバイル接続を使用しているユーザーエージェントは、高解像度の画面の読み込みを待つよりも、低解像度の画像を受信したほうが良いかもしれません。
+
+`image-set()` はそれぞれのユーザーが必要なことを判断するのではなく、オプションを提供することができます。
+
+## 構文
+
+```css
+image-set() = image-set( <image-set-option># )
+where <image-set-option> = [ <image> | <string> ] <resolution> and
+      <string> is an <url>
+```
+
+### 値
+
+- `<image>`
+  - : [`<image>`](/ja/docs/Web/CSS/image) は画像セット以外のあらゆる画像を指定できます。 `image-set()` 関数は他の `image-set()` 関数の中に入れ子にすることはできません。
+- `<string>`
+  - : 画像への `url()` です。
+- `<resolution>`{{optional_inline}}
+  - : [`<resolution>`](/ja/docs/Web/CSS/resolution) の単位には、 `x` や `dppx` (dots per pixel 単位)、dpi (dots per inch)、dpcm (dots per centimeter) があります。 `image-set()` 内の画像すべて、解像度が固有でなければなりません。
+- `type(<string>)`{{optional_inline}}
+  - : 有効な MIME タイプの文字列、例えば "image/jpeg" です。
+
+## 例
+
+### image-set() を使用して代替の background-image オプションの提供
+
+この例は [`image-set()`](https://drafts.csswg.org/css-images-4/#funcdef-image-set) を使用して 2 つの代替 {{cssxref("background-image")}} オプションを提供する方法を示しています。解像度の必要性に応じて、通常版と高解像度版から選択します。
+
+{{EmbedGHLiveSample("css-examples/images/image-set.html", '100%', 600)}}
+
+> **Note:** 上記の例では、 `-webkit` の接頭辞が付いた版を Chrome および Safari に対応させるために併用しています。 Firefox 90 では (標準のプロパティを追加していない開発者の互換性を確保するために) `-webkit-image-set()` を `image-set()` の別名として使用する対応が追加されました。
+
+### image-set() を使用して別な画像形式を提供
+
+次の例では `type()` 関数を使用して画像を AVIF および JPEG 形式で提供しています。ブラウザーが avif に対応している場合は、このバージョンが選択されます。それ以外の場合は jpeg バージョンを使用します。
+
+{{EmbedGHLiveSample("css-examples/images/image-set-type.html", '100%', 600)}}
+
+#### 代替画像の提供
+
+`image-set()` には内蔵のフォールバックはありません。したがって、この関数に対応していないブラウザーのための背景画像を設定するには、 `image-set()` を使用する行の前に別の宣言が必要です。
+
+```css
+.box {
+  background-image: url("large-balloons.jpg");
+  background-image: image-set(
+    url("large-balloons.avif") type("image/avif"),
+    url("large-balloons.jpg") type("image/jpeg"));
+}
+```
+
+## アクセシビリティの考慮
+
+<p>ブラウザーは支援技術に対して、背景画像についての特別な情報を何も提供しません。これは主に読み上げソフトにとって重要であり、読み上げソフトは背景画像が存在することをアナウンスせず、したがってユーザーには何も伝えられません。もし画像がページ全体の目的を理解するのに重要な情報を含んでいる場合は、文書中に意味的に記述するようにしてください。</p>
+
+- [MDN WCAG を理解する, ガイドライン 1.1 の解説](/ja/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](https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/text-equiv-all.html)
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- {{cssxref("image")}}
+- {{cssxref("image/image()", "image()")}}
+- {{cssxref("element()")}}
+- {{cssxref("url()")}}
+- {{cssxref("&lt;gradient&gt;")}}
+- {{cssxref("cross-fade()")}}
diff --git a/files/ja/web/css/image/index.html b/files/ja/web/css/image/index.html
deleted file mode 100644
index a719ebf3e6..0000000000
--- a/files/ja/web/css/image/index.html
+++ /dev/null
@@ -1,174 +0,0 @@
----
-title: <image>
-slug: Web/CSS/image
-tags:
-  - CSS
-  - CSS Data Type
-  - CSS Images
-  - Data Type
-  - Graphics
-  - Layout
-  - Reference
-  - Web
-translation_of: Web/CSS/image
----
-<p>{{CSSRef}}</p>
-
-<p><strong><code>&lt;image&gt;</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の<a href="/ja/docs/Web/CSS/CSS_Types">データ型</a>で、二次元の画像を表現します。</p>
-
-<h2 id="Syntax" name="Syntax">構文</h2>
-
-<p><code>&lt;image&gt;</code> データ型は以下のいずれかによって表すことができます。</p>
-
-<ul>
- <li>{{CSSxRef("&lt;url&gt;")}} データ型で記述された画像</li>
- <li>{{CSSxRef("&lt;gradient&gt;")}} データ型</li>
- <li>{{CSSxRef("element")}} 関数で定義されたウェブページの一部</li>
- <li>{{CSSxRef("image()")}} 関数で定義された画像、画像フラグメント、単色の色</li>
- <li>{{CSSxRef("cross-fade")}} 関数で定義された2つ以上の画像の合成</li>
- <li>{{CSSxRef("image-set")}} 関数で定義された、解像度に基づいて定義された画像の選択</li>
-</ul>
-
-<h2 id="Description" name="Description">解説</h2>
-
-<p>CSS はさまざま種類の画像を扱うことができます。</p>
-
-<ul>
- <li>JPEG や PNG やその他の<a href="https://en.wikipedia.org/wiki/Raster_graphics">ラスタ形式</a>など、<ruby><em>固有の寸法</em><rp> (</rp><rt><em>intrinsic dimensions</em></rt><rp>)</rp></ruby> (自然の寸法) を持つ画像。</li>
- <li>一部の .ico 形式のように、単一のファイルの中に複数のバージョンが存在する、<em>複数の固有の寸法</em>を持つ画像。 (この場合、固有の寸法は領域に収まる最も大きな画像であり、かつアスペクト比が包含ボックスに最も近いものになります。)</li>
- <li>SVG またはその他の<a href="https://en.wikipedia.org/wiki/Vector_graphics">ベクター形式</a>のように、固有の寸法を持たないが、幅と高さの間に固有のアスペクト比のある画像。</li>
- <li id="no_intrinsic">CSS のグラデーションなど、<em>固有の寸法がなく、固有のアスペクト比もない</em>画像。</li>
-</ul>
-
-<p>CSS はオブジェクトの<em>正しい</em>寸法を、 (1) <em>固有の寸法</em>、 (2) CSS の {{CSSxRef("width")}}, {{CSSxRef("height")}}, {{CSSxRef("background-size")}} などの CSS プロパティで定義された<em>指定された寸法</em>、 (3) 画像が使用されるプロパティの種類によって指定された、以下のような<em>既定の寸法</em>によって特定します。</p>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">オブジェクトの種類 (CSS プロパティ)</th>
-   <th scope="col">既定のオブジェクトの寸法</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{CSSxRef("background-image")}}</td>
-   <td>要素の background の置かれる領域の寸法</td>
-  </tr>
-  <tr>
-   <td>{{CSSxRef("list-style-image")}}</td>
-   <td><code>1em</code> の文字の寸法</td>
-  </tr>
-  <tr>
-   <td>{{CSSxRef("border-image-source")}}</td>
-   <td>要素の境界画像領域の寸法</td>
-  </tr>
-  <tr>
-   <td>{{CSSxRef("cursor")}}</td>
-   <td>クライアントのシステムにおける通常のカーソルの寸法に合うブラウザーが定義した寸法</td>
-  </tr>
-  <tr>
-   <td>{{CSSxRef("mask-image")}}</td>
-   <td>?</td>
-  </tr>
-  <tr>
-   <td>{{CSSxRef("shape-outside")}}</td>
-   <td>?</td>
-  </tr>
-  <tr>
-   <td>{{CSSxRef("mask-border-source")}}</td>
-   <td>?</td>
-  </tr>
-  <tr>
-   <td>@counter-style の {{CSSxRef("symbols")}}</td>
-   <td>危険性のある機能です。対応している場合、クライアントのシステムでのカーソルの寸法に合わせたブラウザー定義の寸法です。</td>
-  </tr>
-  <tr>
-   <td>擬似要素 ({{CSSxRef("::after")}} または {{cssxref("::before")}}) の {{CSSxRef("content")}}</td>
-   <td>300px × 150px の矩形</td>
-  </tr>
- </tbody>
-</table>
-
-<p>正しいオブジェクトの寸法は、次のアルゴリズムを使って計算されます。</p>
-
-<ul>
- <li>指定された寸法に<em>幅と高さの両方</em>が定義されていれば、その値が実際の寸法に使われます。</li>
- <li>指定された寸法に<em>幅と高さのどちらかのみ</em>が定義されていれば、欠けている値は次のいずれかで決められます。画像固有の比率、指定値がマッチするなら画像固有の寸法、既定のオブジェクトの寸法の値。</li>
- <li>指定された寸法が<em>幅と高さを定義していない</em>ときは、画像固有のアスペクト比に一致し、既定のオブジェクトの寸法をどの方向にも超過しないような値が計算され、実際のオブジェクト寸法に使われます。画像に固有のアスペクト比がないときは、画像が用いられるオブジェクト固有のアスペクト比が使われます。オブジェクトが固有のアスペクト比を持たないときは、欠けた幅や高さは既定のオブジェクトサイズからとられます。</li>
-</ul>
-
-<div class="note"><strong>注:</strong> すべてのブラウザーがすべてのプロパティですべての種類の画像に対応しているわけではありません。詳細は<a href="#Browser_compatibility">ブラウザーの互換性</a>の節をご覧ください。</div>
-
-<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮</h2>
-
-<p>ブラウザーは、背景画像に関する特別な情報を支援技術に提供しません。これは主に読み上げアプリにとって重要であり、読み上げアプリはその存在を告知しないため、ユーザーには何も伝えません。ページの全体的な目的を理解する上で重要な情報が画像に含まれている場合は、文書の中でその意味を記述した方が良いでしょう。</p>
-
-<ul>
- <li><a href="/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.1_%E2%80%94_Providing_text_alternatives_for_non-text_content">MDN "WCAG を理解する ― ガイドライン 1.1 の解説"</a></li>
- <li><a href="https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/text-equiv-all.html">Understanding Success Criterion 1.1.1 | W3C Understanding WCAG 2.0</a></li>
-</ul>
-
-<h2 id="Examples" name="Examples">例</h2>
-
-<h3 id="Valid_images" name="Valid_images">有効な画像</h3>
-
-<pre class="brush: css example-good notranslate">url(test.jpg)               /* &lt;url&gt;、但し test.jpg は実在する画像 */
-linear-gradient(blue, red)  /* &lt;gradient&gt; */
-element(#realid)            /* element() 関数で参照されるウェブページの一部、
-                               ページ上に "realid" が実在する ID である場合 */
-image(ltr 'arrow.png#xywh=0,0,16,16', red)
-                            /* arrow.png が対応している画像であれば、 &lt;url&gt; の元画像の
-                               左上から 16x16 を選択し、そうでなければ赤一色の見本になります。
-                               言語が右書きの場合は、画像は水平方向に反転します。 */
-cross-fade(20% url(twenty.png), url(eighty.png))
-                            /* 多重露光の画像で、 twenty が 20% の露光で、
-                               eighty が 80% の露光になる */
-image-set('test.jpg' 1x, 'test-2x.jpg' 2x)
-                            /* 様々な解像度による画像の選択 */</pre>
-
-<h3 id="Invalid_images" name="Invalid_images">無効な画像</h3>
-
-<pre class="brush: css example-bad notranslate">nourl.jpg            /* 画像ファイルは url() 関数により示す必要がある */
-url(report.pdf)      /* url() 関数で指すファイルは画像でなければならない */
-element(#fakeid)     /* 要素 ID はページ上に実在する ID でなければならない */
-image(z.jpg#xy=0,0)  /* 空間フラグメントは xywh=#,#,#,# の書式で書かなければならない */
-image-set('cat.jpg' 1x, 'dog.jpg' 1x) /* 画像セット内の画像はすべて異なる解像度でなければならない */
-</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("CSS4 Images", "#typedef-image", "&lt;image&gt;")}}</td>
-   <td>{{Spec2("CSS4 Images")}}</td>
-   <td>Adds {{CSSxRef("element()")}}, {{CSSxRef("image()")}}, {{CSSxRef("image-set")}}, {{CSSxRef("conic-gradient")}}, {{CSSxRef("repeating-conic-gradient", "repeating-conic-gradient()")}}, {{CSSxRef("image-resolution")}} を追加</td>
-  </tr>
-  <tr>
-   <td>{{SpecName("CSS3 Images", "#typedef-image", "&lt;image&gt;")}}</td>
-   <td>{{Spec2("CSS3 Images")}}</td>
-   <td>初回定義。これ以前は <code>&lt;image&gt;</code> データ型の明示的な定義はなし。画像は <code>url()</code> 関数記法でしか定義できなかった</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
-
-<p>{{Compat("css.types.image")}}</p>
-
-<h2 id="See_also" name="See_also">関連情報</h2>
-
-<ul>
- <li>{{CSSxRef("&lt;gradient&gt;")}}</li>
- <li>{{CSSxRef("element")}}</li>
- <li>{{CSSxRef("imagefunction", "image()")}}</li>
- <li>{{CSSxRef("image-set")}}</li>
- <li>{{CSSxRef("cross-fade")}}</li>
-</ul>
diff --git a/files/ja/web/css/image/index.md b/files/ja/web/css/image/index.md
new file mode 100644
index 0000000000..26c1d0939c
--- /dev/null
+++ b/files/ja/web/css/image/index.md
@@ -0,0 +1,114 @@
+---
+title: <image>
+slug: Web/CSS/image
+tags:
+  - CSS
+  - CSS Data Type
+  - CSS Images
+  - Data Type
+  - Graphics
+  - Layout
+  - Reference
+  - Web
+browser-compat: css.types.image
+translation_of: Web/CSS/image
+---
+{{CSSRef}}
+
+**`<image>`** は [CSS](/ja/docs/Web/CSS) の [データ型](/ja/docs/Web/CSS/CSS_Types)で、二次元の画像を表現します。
+
+## 構文
+
+`<image>` データ型は以下のいずれかによって表すことができます。
+
+- {{CSSxRef("url()", "url()")}} データ型で記述された画像
+- {{CSSxRef("<gradient>")}} データ型
+- {{CSSxRef("element()","element()")}} 関数で定義されたウェブページの一部
+- {{CSSxRef("image/image()","image()")}} 関数で定義された画像、画像フラグメント、単色の色
+- {{CSSxRef("cross-fade()","cross-fade()")}} 関数で定義された 2 つ以上の画像の合成
+- {{CSSxRef("image/image-set()","image-set()")}} 関数で定義された、解像度に基づいて定義された画像の選択
+
+## 解説
+
+CSS はさまざま種類の画像を扱うことができます。
+
+- JPEG、PNG、その他の[ラスター形式](https://ja.wikipedia.org/wiki/ビットマップ画像)の画像のように、*自身の寸法* (自然の寸法) を持つ画像。
+- 単一のファイルの中に複数のバージョンが存在する、*複数の自身の寸法*を持つ画像。 (この場合、自身の寸法は領域に収まる最も大きな画像であり、かつ縦横比が包含ボックスに最も近いものになります。)
+- SVG またはその他の[ベクター形式](https://ja.wikipedia.org/wiki/ベクター画像)の画像のように、自身の寸法を持たないが、幅と高さの間に自身の縦横比のある画像。
+- CSS グラデーションなど、*自身の寸法がなく、固有の縦横比もない*画像。
+</ul>
+
+CSS はオブジェクトの*実際の*寸法を、 (1) *自身の寸法*、 (2) CSS の {{CSSxRef("width")}}, {{CSSxRef("height")}}, {{CSSxRef("background-size")}} などのプロパティで定義された*指定の寸法*、 (3) 画像が使用されるプロパティの種類によって指定された、以下のような*既定の寸法*によって特定します。
+
+| オブジェクトの種類 (CSS プロパティ)                                                 | 既定のオブジェクトの寸法                                                                                       |
+| ----------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- |
+| {{CSSxRef("background-image")}}                                                     | 要素の背景が配置される領域の寸法                                                                               |
+| {{CSSxRef("list-style-image")}}                                                     | `1em` の文字の寸法                                                                                             |
+| {{CSSxRef("border-image-source")}}                                                  | 要素の境界画像領域の寸法                                                                                       |
+| {{CSSxRef("cursor")}}                                                               | クライアントのシステムにおける通常のカーソルの寸法に合わせたブラウザー定義の寸法                               |
+| {{CSSxRef("mask-image")}}                                                           | ?                                                                                                              |
+| {{CSSxRef("shape-outside")}}                                                        | ?                                                                                                              |
+| {{CSSxRef("mask-border-source")}}                                                   | ?                                                                                                              |
+| @counter-style の {{CSSxRef("symbols()")}}                                          | リスクあり。対応している場合、クライアントのシステムにおける通常のカーソルの寸法に合わせたブラウザー定義の寸法 |
+| 擬似要素 ({{CSSxRef("::after")}}/{{CSSxRef("::before")}}) の {{CSSxRef("content")}} | 300px × 150px の矩形                                                                                          |
+
+正しいオブジェクトの寸法は、次のアルゴリズムを使って計算されます。
+
+- 指定された寸法に*幅と高さの両方*が定義されている場合は、その値が実際の寸法に使われます。
+- 指定された寸法に*幅と高さのどちらかのみ*が定義されている場合は、もう一方の値は、画像自身の比率、指定値が一致するなら画像自身の寸法、既定のオブジェクトの寸法の値の何れかを使用して決められます。
+- 指定された寸法が*幅も高さも定義していない*場合は、実際のオブジェクトの寸法は、画像自身の縦横比に一致し、かつ既定のオブジェクトの寸法をどちらの方向にも超過しない値が計算されます。画像自身の縦横比がない場合は、適用されるオブジェクト自身の縦横比が使用されます。このオブジェクトにも縦横比が存在しない場合は、残りの幅または高さは既定のオブジェクトの寸法から取られます。
+
+> **Note:** すべてのブラウザーがすべてのプロパティですべての種類の画像に対応しているわけではありません。詳細は[ブラウザーの互換性の節](#ブラウザーの互換性)を参照してください。
+
+## アクセシビリティの考慮
+
+ブラウザーは、背景画像に関する特別な情報を支援技術に提供しません。これは主に読み上げアプリにとって重要であり、読み上げアプリはその存在を告知しないため、ユーザーには何も伝えません。ページの全体的な目的を理解する上で重要な情報が画像に含まれている場合は、文書の中でその意味を記述した方が良いでしょう。
+
+- [MDN WCAG を理解する, ガイドライン 1.1 の解説](/ja/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](https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/text-equiv-all.html)
+
+## 例
+
+### 有効な画像
+
+```css example-good
+url(test.jpg)               /* <url>、但し test.jpg は実在する画像 */
+linear-gradient(blue, red)  /* <gradient> */
+element(#realid)            /* element() 関数で参照されるウェブページの一部、
+                               ページ上に "realid" が実在する ID である場合 */
+image(ltr 'arrow.png#xywh=0,0,16,16', red)
+                            /* arrow.png が対応している画像であれば、 <url> の元画像の
+                               左上から 16x16 を選択し、そうでなければ赤一色の見本になります。
+                               言語が右書きの場合は、画像は水平方向に反転します。 */
+cross-fade(20% url(twenty.png), url(eighty.png))
+                            /* 多重露光の画像で、 twenty が 20% の露光で、
+                               eighty が 80% の露光になる */
+image-set('test.jpg' 1x, 'test-2x.jpg' 2x)
+                            /* 様々な解像度による画像の選択 */
+```
+
+### 無効な画像
+
+```css example-bad
+nourl.jpg            /* 画像ファイルは url() 関数により示す必要がある */
+url(report.pdf)      /* url() 関数で指すファイルは画像でなければならない */
+element(#fakeid)     /* 要素 ID はページ上に実在する ID でなければならない */
+image(z.jpg#xy=0,0)  /* 空間フラグメントは xywh=#,#,#,# の書式で書かなければならない */
+image-set('cat.jpg' 1x, 'dog.jpg' 1x) /* 画像セット内の画像はすべて異なる解像度でなければならない */
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- {{CSSxRef("&lt;gradient&gt;")}}
+- {{CSSxRef("element()","element()")}}
+- {{CSSxRef("image/image()", "image()")}}
+- {{CSSxRef("image/image-set()","image-set()")}}
+- {{CSSxRef("cross-fade()","cross-fade()")}}
diff --git a/files/ja/web/css/image/paint()/index.md b/files/ja/web/css/image/paint()/index.md
new file mode 100644
index 0000000000..78368413bd
--- /dev/null
+++ b/files/ja/web/css/image/paint()/index.md
@@ -0,0 +1,103 @@
+---
+title: paint()
+slug: Web/CSS/image/paint()
+tags:
+  - CSS
+  - CSS Function
+  - CSS4-images
+  - Function
+  - Houdini
+  - Reference
+  - Web
+browser-compat: css.types.image.paint
+translation_of: Web/CSS/image/paint()
+original_slug: Web/CSS/paint()
+---
+{{CSSRef}}{{SeeCompatTable}}
+
+**`paint()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、 PaintWorklet で生成された {{cssxref("&lt;image&gt;")}} の値を定義します。
+
+## 構文
+
+```css
+paint(workletName, parameters)
+```
+
+凡例
+
+- _workletName_
+  - : 登録された Worklet の名前です。
+- _parameters_
+  - : PaintWorklet へ渡される省略可能な追加の引数です。
+
+## 例
+
+<h3 id="Basic_usage_example">基本的な使用例</h3>
+
+CSS の paint() 関数で追加の引数を渡すことができます。この例では、二つの引数を渡しています。リストアイテムのグループの背景画像が塗りつぶしか輪郭線だけかと、輪郭線の太さです。
+
+```html hidden
+<ul>
+    <li>item 1</li>
+    <li>item 2</li>
+    <li>item 3</li>
+    <li>item 4</li>
+    <li>item 5</li>
+    <li>item 6</li>
+    <li>item 7</li>
+    <li>item 8</li>
+    <li>item 9</li>
+    <li>item 10</li>
+    <li>item 11</li>
+    <li>item 12</li>
+    <li>item 13</li>
+    <li>item 14</li>
+    <li>item 15</li>
+    <li>item 16</li>
+    <li>item 17</li>
+    <li>item 18</li>
+    <li>item 19</li>
+    <li>item 20</li>
+</ul>
+```
+
+```js hidden
+  CSS.paintWorklet.addModule('https://mdn.github.io/houdini-examples/cssPaint/intro/worklets/hilite.js');
+```
+
+```css
+li {
+   --boxColor: hsla(55, 90%, 60%, 1.0);
+   background-image: paint(hollowHighlights, stroke, 2px);
+}
+
+li:nth-of-type(3n) {
+   --boxColor: hsla(155, 90%, 60%, 1.0);
+   background-image: paint(hollowHighlights, filled,  3px);
+}
+
+li:nth-of-type(3n+1) {
+   --boxColor: hsla(255, 90%, 60%, 1.0);
+   background-image: paint(hollowHighlights, stroke, 1px);
+}
+```
+
+boxColor を定義しているセレクターブロックにカスタムプロパティを設定しました。カスタムプロパティは PaintWorklet にアクセスすることができます。
+
+{{EmbedLiveSample("Basic_usage_example", 300, 300)}}
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- {{domxref('PaintWorklet')}}
+- {{domxref('CSS Painting API')}}
+- [CSS Painting API の使用](/ja/docs/Web/API/CSS_Painting_API/Guide)
+- {{cssxref("&lt;image&gt;")}}
+- {{domxref("canvas")}}
diff --git a/files/ja/web/css/inheritance/index.html b/files/ja/web/css/inheritance/index.html
index bf2dd3f663..9bf6dfaa86 100644
--- a/files/ja/web/css/inheritance/index.html
+++ b/files/ja/web/css/inheritance/index.html
@@ -38,7 +38,7 @@ translation_of: Web/CSS/inheritance
 
 <h2 id="Non-inherited_properties" name="Non-inherited_properties">非継承プロパティ</h2>
 
-<p>値を持たない<strong>非継承プロパティ</strong>が要素に指定された場合、要素はプロパティの<a href="/ja/docs/Web/CSS/initial_value" title="ja/docs/Web/CSS/initial_value">初期値</a>（※各プロパティのページの「概要」の章に記されています）を取得します。</p>
+<p>値を持たない<strong>非継承プロパティ</strong>が要素に指定された場合、要素はプロパティの<a href="/ja/docs/Web/CSS/initial_value">初期値</a>（※各プロパティのページの「概要」の章に記されています）を取得します。</p>
 
 <p>非継承プロパティの一般的な例としては {{ Cssxref("border") }} プロパティが挙げられます。次の様なスタイルルールを指定し、</p>
 
diff --git a/files/ja/web/css/length/index.html b/files/ja/web/css/length/index.html
deleted file mode 100644
index 35a96136a5..0000000000
--- a/files/ja/web/css/length/index.html
+++ /dev/null
@@ -1,264 +0,0 @@
----
-title: <length>
-slug: Web/CSS/Length
-tags:
-  - CSS
-  - CSS データ型
-  - CSS 値と単位
-  - Layout
-  - Reference
-  - Web
-  - length
-  - ウェブ
-  - レイアウト
-translation_of: Web/CSS/length
----
-<div>{{CSSRef}}</div>
-
-<p><a href="/ja/docs/Web/CSS" title="CSS">CSS</a> の <strong><code>&lt;length&gt;</code></strong> <a href="/ja/docs/Web/CSS/CSS_Types">データ型</a>は、長さの値を表します。長さは {{Cssxref("width")}}, {{Cssxref("height")}}, {{Cssxref("margin")}}, {{Cssxref("padding")}}, {{Cssxref("border-width")}}, {{Cssxref("font-size")}}, {{Cssxref("text-shadow")}} など数多くの CSS プロパティで使用されています。</p>
-
-<div class="note">
-<p><strong>注:</strong> {{cssxref("&lt;percentage&gt;")}} 値も CSS の長さに使用され、 <code>&lt;length&gt;</code> 値を受け付ける同じプロパティの一部でも使用することができますが、 <code>&lt;length&gt;</code> 値と同じものではありません。 {{cssxref("&lt;length-percentage&gt;")}} を参照してください。</p>
-</div>
-
-<h2 id="Syntax" name="Syntax">構文</h2>
-
-<p><code>&lt;length&gt;</code> データ型は一つの {{cssxref("&lt;number&gt;")}} とそれに続く以下に挙げる単位の一つから成ります。単位と数値の間に空白は置きません。数値 <code>0</code> の後の単位は省略可能です。</p>
-
-<div class="note">
-<p><strong>注:</strong> 負の <code>&lt;length&gt;</code> を許容するプロパティとそうでないプロパティがあります。</p>
-</div>
-
-<h3 id="Units" name="Units">単位</h3>
-
-<h4 id="Relative_length_units" name="Relative_length_units">相対的な長さの単位</h4>
-
-<p>相対的な長さとは、他の長さに従って長さを指定することです。単位によって、これは特定の文字の寸法であったり、<a href="/ja/docs/Web/CSS/line-height">行の高さ</a>であったり、 {{glossary("viewport")}} の寸法であったりします。</p>
-
-<h5 id="Font-relative_lengths" name="Font-relative_lengths">フォント関連の長さ</h5>
-
-<p>フォント関連の長さは、 <code>&lt;length&gt;</code> 値を特定の文字の寸法や、現在要素またはその親に影響しているフォントを表す用語で定義されます。</p>
-
-<div class="note">
-<p><strong>注:</strong> これらの単位、特に <code>em</code> と <code>rem</code> は、ユーザーがフォントの大きさを変更しても <a href="http://24ways.org/2006/compose-to-a-vertical-rhythm">ページの vertical rhythm</a> を維持するような、拡縮可能なレイアウトを作成するためによく使われます。</p>
-</div>
-
-<dl>
- <dt><code id="cap">cap</code> {{experimental_inline}}</dt>
- <dd>その要素の {{Cssxref("font")}} における "cap height" （ふつうの大文字の高さ）を表します。</dd>
- <dt><code id="ch">ch</code></dt>
- <dd>その要素の {{Cssxref("font")}} における "0" (ゼロ、Unicode 文字 U+0030) の幅、より正確に言えば advance measure です。<br>
- <br>
- "0" の文字の大きさを判断することが不可能または無意味である場合、幅が 0.5em、高さが 1em と仮定します。</dd>
- <dt><code id="em">em</code></dt>
- <dd>その要素の {{Cssxref("font-size")}} の計算値を表します。{{Cssxref("font-size")}} プロパティ自身に使われた場合は、要素に<em>継承された</em>フォントの大きさを表します。</dd>
- <dt><code id="ex">ex</code></dt>
- <dd>その要素の {{Cssxref("font")}} における <a href="http://en.wikipedia.org/wiki/X-height">x-height</a> です。 'x' の文字を持つフォントでは一般的に、フォントにおける小文字の高さに相当します。多くのフォントでは <code>1ex ≈ 0.5em </code> です。</dd>
- <dt><code id="ic">ic</code> {{experimental_inline}}</dt>
- <dd>描画に使用されるフォントにおける「水」（U+6C34）の文字の advance measure と同じです。</dd>
- <dt><code id="lh">lh</code> {{experimental_inline}}</dt>
- <dd>使用されている要素の {{Cssxref("line-height")}} プロパティの計算値と同じで、絶対的な長さに変換されます。</dd>
- <dt><code id="rem">rem</code></dt>
- <dd>ルート要素（ふつうは {{HTMLElement("html")}}）の {{Cssxref("font-size")}} を表します。ルート要素の {{Cssxref("font-size")}} で使うと初期値を表します（多くのブラウザーでは既定値は <code>16px</code> ですが、ユーザー設定によって変わる可能性があります）。</dd>
- <dt><code id="rlh">rlh</code> {{experimental_inline}}</dt>
- <dd>ルート要素（ふつうは {{HTMLElement("html")}}）の {{Cssxref("line-height")}} プロパティの計算値と同じで、絶対的な長さに変換されます。ルート要素の {{Cssxref("font-size")}} または {{Cssxref("line-height")}} プロパティに使われた場合は、プロパティの初期値になります。</dd>
-</dl>
-
-<h5 id="Viewport-percentage_lengths" name="Viewport-percentage_lengths">ビューポートのパーセント値による長さ</h5>
-
-<p>ビューポートのパーセント値による長さは、{{glossary("viewport", "ビューポート")}}、つまり文書の見える範囲の寸法に対する相対的な <code>&lt;length&gt;</code> 値を定義します。ビューポートの長さは {{cssxref("@page")}} で宣言されたブロックでは無効です。</p>
-
-<dl>
- <dt><code id="vh">vh</code></dt>
- <dd>ビューポートの初期値の<a href="/ja/docs/Web/CSS/All_About_The_Containing_Block">包含ブロック</a>における高さの1%と同じです。</dd>
- <dt><code id="vw">vw</code></dt>
- <dd>ビューポートの初期値の<a href="/ja/docs/Web/CSS/All_About_The_Containing_Block">包含ブロック</a>における幅の1%と同じです。</dd>
- <dt><code id="vi">vi</code> {{experimental_inline}}</dt>
- <dd>初期値の<a href="/ja/docs/Web/CSS/All_About_The_Containing_Block">包含ブロック</a>における、ルート要素の<a href="/ja/docs/Web/CSS/CSS_Logical_Properties#inline-dimension">インライン軸</a>の寸法の1%と同じです。</dd>
- <dt><code id="vb">vb</code> {{experimental_inline}}</dt>
- <dd>初期値の<a href="/ja/docs/Web/CSS/All_About_The_Containing_Block">包含ブロック</a>における、ルート要素の<a href="/ja/docs/Web/CSS/CSS_Logical_Properties#block-dimension">ブロック軸</a>の寸法の1%と同じです。</dd>
- <dt><code id="vmin">vmin</code></dt>
- <dd><code>vw</code> と <code>vh</code> の小さい方です。</dd>
- <dt><code id="vmax">vmax</code></dt>
- <dd><code>vw</code> と <code>vh</code> の大きい方です。</dd>
-</dl>
-
-<h4 id="Absolute_length_units" name="Absolute_length_units">絶対的な長さの単位</h4>
-
-<p>絶対的な長さの単位は、出力メディアの物理的な特性が分かっている場合（印刷レイアウトなど）に物理的な長さを表します。これはある単位を物理的な単位に固定してから、これを基準に他の単位を定義します。固定する単位は画面のような低解像度の端末か、あるいはプリンターのような高解像度の端末かによって異なります。</p>
-
-<p>低解像度の端末では、<code>px</code> の単位が物理的な<em>参照ピクセル</em>を表し、その他の単位はこれを基準に定義されます。例えば <code>1in</code> は <code>96px</code> と定義され、これは <code>72pt</code> と等しくなります。このような端末では結果的に、インチ (<code>in</code>)、センチメートル (<code>cm</code>)、ミリメートル (<code>mm</code>) といった単位で表される長さは、同名の物理的な単位と同じ長さになるとは限りません。</p>
-
-<p>高解像度の端末では、インチ (<code>in</code>)、センチメートル (<code>cm</code>)、ミリメートル (<code>mm</code>) は対応する物理的な単位と同じになります。従って、 <code>px</code> の単位は、それ (1インチの1/96) を基準に定義されます。</p>
-
-<div class="note">
-<p><strong>注:</strong> たくさんのユーザーが、テキストが読みやすくなるよう{{glossary("user agent", "ユーザーエージェント")}}の既定のフォントの大きさを拡大しています。絶対的な長さで指定すると、大きさが固定され、ユーザー設定によって拡大しなくなるため、アクセシビリティ上の問題が発生します。この理由から、 <code>font-size</code> を設定する場合には、 (<code>em</code> や <code>rem</code> のような) 相対的な単位が適しています。</p>
-</div>
-
-<dl>
- <dt><code id="px">px</code></dt>
- <dd>1ピクセルです。画面表示では、伝統的に端末の1ピクセル (ドット) を表します。しかし、<em>プリンター</em>や<em>高解像度の画面</em>では、 CSS の1ピクセルが端末の複数ピクセルになることがります。 <code>1px</code> = <code>1in</code> の1/96です。</dd>
- <dt><code id="cm">cm</code></dt>
- <dd>1センチメートルです。 <code>1cm</code> = <code>96px/2.54</code> です。</dd>
- <dt><code id="mm">mm</code></dt>
- <dd>1ミリメートルです。 <code>1mm</code> = <code>1cm</code> の1/10です。</dd>
- <dt><code id="q">Q</code> {{experimental_inline}}</dt>
- <dd>1/4ミリメートルです。 <code>1Q</code> = <code>1cm</code> の1/40です。</dd>
- <dt><code id="in">in</code></dt>
- <dd>1インチです。 <code>1in</code> = <code>2.54cm</code> = <code>96px</code> です。</dd>
- <dt><code id="pc">pc</code></dt>
- <dd>1パイカです。 <code>1pc</code> = <code>12pt</code> = <code>1in</code> の1/6です。</dd>
- <dt><code id="pt">pt</code></dt>
- <dd>1ポイントです。 <code>1pt</code> = <code>1in</code> の1/72です。</dd>
- <dt><code id="mozmm">mozmm</code> {{non-standard_inline}}, Firefox 59 で削除</dt>
- <dd>実験的な単位で、表示する大きさや解像度に依存せず、正確に1ミリメートルで描画します。必要とされるのはまれですが、特にモバイル端末では有用かもしれません。</dd>
-</dl>
-
-<h2 id="Interpolation" name="Interpolation">補間</h2>
-
-<p>アニメーションの場合、 <code>&lt;length&gt;</code> データ型の値は浮動小数点の実数として補間されます。補間は計算値に対して行われます。補間の速度は、アニメーションに関連付けられた<a href="/ja/docs/Web/CSS/single-transition-timing-function">タイミング関数</a>によって定められます。</p>
-
-<h2 id="Examples" name="Examples">例</h2>
-
-<h3 id="Length_unit_comparison" name="Length_unit_comparison">長さの単位の比較</h3>
-
-<p>以下のデモでは、入力欄に <code>&lt;length&gt;</code> の値 (例えば <code>300px</code>, <code>50%</code>, <code>30vw</code>) を入力することができ、 <kbd>Return</kbd> を押したときにバーの長さが反映されます。</p>
-
-<p>これにより、様々な長さの単位の効果を比較し対照させることができます。</p>
-
-<h4 id="HTML">HTML</h4>
-
-<pre class="brush: html notranslate">&lt;div class="outer"&gt;
-  &lt;div class="input-container"&gt;
-    &lt;label&gt;長さを入力してください:&lt;/label&gt;
-    &lt;input type="text" id="length"&gt;
-  &lt;/div&gt;
-  &lt;div class="inner"&gt;
-
-  &lt;/div&gt;
-&lt;/div&gt;
-&lt;div class="results"&gt;
-&lt;/div&gt;</pre>
-
-<h4 id="CSS">CSS</h4>
-
-<pre class="brush: css notranslate">html {
-  font-family: sans-serif;
-  font-weight: bold;
-  box-sizing: border-box;
-}
-
-.outer {
-  width: 100%;
-  height: 50px;
-  background-color: #eee;
-  position: relative;
-}
-
-.inner {
-  height: 50px;
-  background-color: #999;
-  box-shadow: inset 3px 3px 5px rgba(255,255,255,0.5),
-              inset -3px -3px 5px rgba(0,0,0,0.5);
-}
-
-.result {
-  height: 20px;
-  background-color: #999;
-  box-shadow: inset 3px 3px 5px rgba(255,255,255,0.5),
-              inset -3px -3px 5px rgba(0,0,0,0.5);
-  background-color: orange;
-  display: flex;
-  align-items: center;
-  margin-top: 10px;
-}
-
-.result code {
-  position: absolute;
-  margin-left: 20px;
-}
-
-.results {
-  margin-top: 10px;
-}
-
-.input-container {
-  position: absolute;
-  display: flex;
-  justify-content: flex-start;
-  align-items: center;
-  height: 50px;
-}
-
-label {
-  margin: 0 10px 0 20px;
-}</pre>
-
-<h4 id="JavaScript">JavaScript</h4>
-
-<pre class="brush: js notranslate">const inputDiv = document.querySelector('.inner');
-const inputElem = document.querySelector('input');
-const resultsDiv = document.querySelector('.results');
-
-inputElem.addEventListener('change', () =&gt; {
-  inputDiv.style.width = inputElem.value;
-
-  const result = document.createElement('div');
-  result.className = 'result';
-  result.style.width = inputElem.value;
-  result.innerHTML = `&lt;code&gt;width: ${inputElem.value}&lt;/code&gt;`;
-  resultsDiv.appendChild(result);
-
-  inputElem.value = '';
-  inputElem.focus();
-})</pre>
-
-<h4 id="Result" name="Result">結果</h4>
-
-<p>{{EmbedLiveSample('Length_unit_comparison','100%', 700)}}</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('CSS4 Values', '#lengths', '&lt;length&gt;')}}</td>
-   <td>{{Spec2('CSS4 Values')}}</td>
-   <td><code>vi</code>, <code>vb</code>, <code>ic</code>, <code>lh</code>, <code>rlh</code> の単位を追加。</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Values', '#lengths', '&lt;length&gt;')}}</td>
-   <td>{{Spec2('CSS3 Values')}}</td>
-   <td><code>ch</code>, <code>rem</code>, <code>vw</code>, <code>vh</code>, <code>vmin</code>, <code>vmax</code>, <code>Q</code> の単位を追加。</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS2.1', 'syndata.html#length-units', '&lt;length&gt;')}}</td>
-   <td>{{Spec2('CSS2.1')}}</td>
-   <td><code>em</code>, <code>pt</code>, <code>pc</code>, <code>px</code> の単位の明示的な定義。</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS1', '#length-units', '&lt;length&gt;')}}</td>
-   <td>{{Spec2('CSS1')}}</td>
-   <td>初回定義。 <code>em</code>, <code>pt</code>, <code>pc</code>, <code>px</code> の単位の暗黙的な定義。</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
-
-<p>{{Compat("css.types.length")}}</p>
-
-<h2 id="See_also" name="See_also">関連情報</h2>
-
-<ul>
- <li><a href="/ja/docs/Learn/CSS/Introduction_to_CSS/Values_and_units">CSS 値と単位チュートリアル</a></li>
- <li><a href="/ja/docs/Web/CSS/CSS_Values_and_Units">CSS 値と単位リファレンス</a></li>
- <li><a href="/ja/docs/Web/CSS/CSS_Box_Model">ボックスモデル</a></li>
-</ul>
diff --git a/files/ja/web/css/length/index.md b/files/ja/web/css/length/index.md
new file mode 100644
index 0000000000..2a08df09c4
--- /dev/null
+++ b/files/ja/web/css/length/index.md
@@ -0,0 +1,224 @@
+---
+title: <length>
+slug: Web/CSS/length
+tags:
+  - CSS
+  - CSS Data Type
+  - Data Type
+  - Layout
+  - Reference
+  - Web
+  - length
+browser-compat: css.types.length
+translation_of: Web/CSS/length
+---
+{{CSSRef}}
+
+**`<length>`** は [CSS](/ja/docs/Web/CSS) の[データ型](/ja/docs/Web/CSS/CSS_Types)で、長さの値を表します。長さは {{Cssxref("width")}}、{{Cssxref("height")}}、{{Cssxref("margin")}}、{{Cssxref("padding")}}、{{Cssxref("border-width")}}、{{Cssxref("font-size")}}、{{Cssxref("text-shadow")}} など数多くの CSS プロパティで使用されています。
+
+> **Note:** {{cssxref("&lt;percentage&gt;")}} 値も `<length>` 値を受け付ける同じプロパティの一部でも使用することができますが、 `<length>` 値と同じものではありません。 {{cssxref("&lt;length-percentage&gt;")}} を参照してください。
+
+## 構文
+
+`<length>` データ型は一つの {{cssxref("&lt;number&gt;")}} とそれに続く以下に挙げる単位の一つから成ります。単位と数値の間に空白は置きません。数値 `0` の後の単位は省略可能です。
+
+> **Note:** 負の `<length>` を許容するプロパティとそうでないプロパティがあります。
+
+### 単位
+
+#### 相対的な長さの単位
+
+相対的な長さとは、他の長さに従って長さを指定することです。単位によって、これは特定の文字の寸法であったり、[行の高さ](/ja/docs/Web/CSS/line-height)であったり、{{glossary("viewport", "ビューポート")}}の寸法であったりします。
+
+##### フォントの相対長
+
+フォントの相対長では、 `<length>` の値を、要素やその親で現在使われているフォントにおける、特定の文字やフォント属性の寸法で定義します。
+
+> **Note:** これらの単位、特に `em` と `rem` は、ユーザーがフォントサイズを変更しても[ページの縦方向のリズム](https://24ways.org/2006/compose-to-a-vertical-rhythm)を維持する、スケーラブルなレイアウトを作るためによく使われます。
+
+- `cap` {{experimental_inline}}
+  - : その要素の {{Cssxref("font")}} における "cap height" (ふつうの大文字の高さ) を表します。
+- `ch`
+
+  - : その要素の {{Cssxref("font")}} における "0" (ゼロ、Unicode 文字 U+0030) の幅、より正確に言えば advance measure です。
+ 
+    "0" の文字の大きさを判断することが不可能または無意味である場合、幅が 0.5em、高さが 1em と仮定します。
+
+- `em`
+  - : その要素の {{Cssxref("font-size")}} の計算値を表します。{{Cssxref("font-size")}} プロパティ自身に使われた場合は、要素に<em>継承された</em>フォントの大きさを表します。
+- `ex`
+  - : その要素の {{Cssxref("font")}} における [x-height](https://en.wikipedia.org/wiki/X-height) です。 'x' の文字を持つフォントでは一般的に、フォントにおける小文字の高さに相当します。多くのフォントでは `1ex ≈ 0.5em` です。
+- `ic` {{experimental_inline}}
+  - : 描画に使用されるフォントにおける「水」 (CJK water ideograph, U+6C34) の文字の advance measure と同じです。
+- `lh` {{experimental_inline}}
+  - : 使用されている要素の {{Cssxref("line-height")}} プロパティの計算値と同じで、絶対的な長さに変換されます。
+- `rem`
+  - : ルート要素 (ふつうは {{HTMLElement("html")}}) の {{Cssxref("font-size")}} を表します。ルート要素の {{Cssxref("font-size")}} で使うと初期値を表します (多くのブラウザーでは既定値は `16px` ですが、ユーザー設定によって変わる可能性があります)。
+- `rlh` {{experimental_inline}}
+  - : ルート要素 (ふつうは {{HTMLElement("html")}}) の {{Cssxref("line-height")}} プロパティの計算値と同じで、絶対的な長さに変換されます。ルート要素の {{Cssxref("font-size")}} または {{Cssxref("line-height")}} プロパティに使われた場合は、プロパティの初期値になります。
+
+##### ビューポートのパーセント値による寸法
+
+ビューポートのパーセント値による寸法は、{{glossary("viewport", "ビューポート")}}、つまり文書の見える範囲の寸法に対する相対的な `<length>` 値を定義します。ビューポートの寸法は {{cssxref("@page")}} で宣言されたブロックでは無効です。
+
+- `vh`
+  - : ビューポートの初期値の[包含ブロック](/ja/docs/Web/CSS/Containing_block)における高さの 1% と同じです。
+- `vw`
+  - : ビューポートの初期値の[包含ブロック](/ja/docs/Web/CSS/Containing_block)における幅の 1% と同じです。
+- `vi` {{experimental_inline}}
+  - : 初期値の[包含ブロック](/ja/docs/Web/CSS/Containing_block)における、ルート要素の[インライン軸](/ja/docs/Web/CSS/CSS_Logical_Properties#block_vs._inline)の寸法の 1% と同じです。
+- `vb` {{experimental_inline}}
+  - : 初期値の[包含ブロック](/ja/docs/Web/CSS/Containing_block)における、ルート要素の[ブロック軸](/ja/docs/Web/CSS/CSS_Logical_Properties#block_vs._inline)の寸法の 1% と同じです。
+- `vmin`
+  - : `vw` と `vh` の小さい方です。
+- `vmax`
+  - : `vw` と `vh` の大きい方です。
+</dl>
+
+#### 絶対的な長さの単位
+
+絶対的な長さの単位は、出力メディアの物理的な特性が分かっている場合 (印刷レイアウトなど) に物理的な長さを表します。これはある単位を物理的な単位に固定してから、これを基準に他の単位を定義します。固定する単位は画面のような低解像度の端末か、あるいはプリンターのような高解像度の端末かによって異なります。
+
+低解像度の端末では、`px` の単位が物理的な*参照ピクセル*を表し、その他の単位はこれを基準に定義されます。例えば `1in` は `96px` と定義され、これは `72pt` と等しくなります。このような端末では結果的に、インチ (`in`)、センチメートル (`cm`)、ミリメートル (`mm`) といった単位で表される長さは、同名の物理的な単位と同じ長さになるとは限りません。</p>
+
+<p>高解像度の端末では、インチ (`in`)、センチメートル (`cm`)、ミリメートル (`mm`) は対応する物理的な単位と同じになります。従って、 `px` の単位は、それ (1 インチの 1/96) を基準に定義されます。</p>
+
+> **Note:** たくさんのユーザーが、テキストが読みやすくなるよう{{glossary("user agent", "ユーザーエージェント")}}の既定のフォントの大きさを拡大しています。絶対的な長さで指定すると、大きさが固定され、ユーザー設定によって拡大しなくなるため、アクセシビリティ上の問題が発生します。この理由から、 `font-size` を設定する場合には、 (`em` や `rem` のような) 相対的な単位が適しています。
+
+- `px`
+  - : 1 ピクセルです。画面表示では、伝統的に端末の 1 ピクセル (ドット) を表します。しかし、*プリンター*や*高解像度の画面*では、 CSS の 1 ピクセルが端末の複数ピクセルになることがあります。 `1px` = `1in` の 1/96 です。
+- `cm`
+  - : 1センチメートルです。 `1cm` = `96px/2.54` です。
+- `mm`
+  - : 1ミリメートルです。 `1mm` = `1cm` の1/10です。
+- `Q` {{experimental_inline}}
+  - : 1/4ミリメートルです。 `1Q` = `1cm` の1/40です。
+- `in`
+  - : 1インチです。 `1in` = `2.54cm` = `96px` です。
+- `pc`
+  - : 1パイカです。 `1pc` = `12pt` = `1in` の1/6です。
+- `pt`
+  - : 1ポイントです。 `1pt` = `1in` の1/72です。
+
+## 補間
+
+アニメーションの場合、 `<length>` データ型の値は浮動小数点の実数として補間されます。補間は計算値に対して行われます。補間の速度は、アニメーションに関連付けられた[タイミング関数](/ja/docs/Web/CSS/easing-function)によって定められます。
+
+## 例
+
+<h3 id="Length_unit_comparison">長さの単位の比較</h3>
+
+以下のデモでは、入力欄に `<length>` の値 (例えば `300px`, `50%`, `30vw`) を入力することができ、 <kbd>Return</kbd> を押したときにバーの長さが反映されます。
+
+これにより、様々な長さの単位の効果を比較し対照させることができます。
+
+#### HTML
+
+```html
+<div class="outer">
+  <div class="input-container">
+    <label>長さを入力してください:</label>
+    <input type="text" id="length">
+  </div>
+  <div class="inner">
+
+  </div>
+</div>
+<div class="results">
+</div>
+```
+
+#### CSS
+
+```css
+html {
+  font-family: sans-serif;
+  font-weight: bold;
+  box-sizing: border-box;
+}
+
+.outer {
+  width: 100%;
+  height: 50px;
+  background-color: #eee;
+  position: relative;
+}
+
+.inner {
+  height: 50px;
+  background-color: #999;
+  box-shadow: inset 3px 3px 5px rgba(255,255,255,0.5),
+              inset -3px -3px 5px rgba(0,0,0,0.5);
+}
+
+.result {
+  height: 20px;
+  background-color: #999;
+  box-shadow: inset 3px 3px 5px rgba(255,255,255,0.5),
+              inset -3px -3px 5px rgba(0,0,0,0.5);
+  background-color: orange;
+  display: flex;
+  align-items: center;
+  margin-top: 10px;
+}
+
+.result code {
+  position: absolute;
+  margin-left: 20px;
+}
+
+.results {
+  margin-top: 10px;
+}
+
+.input-container {
+  position: absolute;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  height: 50px;
+}
+
+label {
+  margin: 0 10px 0 20px;
+}
+```
+
+#### JavaScript
+
+```js
+const inputDiv = document.querySelector('.inner');
+const inputElem = document.querySelector('input');
+const resultsDiv = document.querySelector('.results');
+
+inputElem.addEventListener('change', () => {
+  inputDiv.style.width = inputElem.value;
+
+  const result = document.createElement('div');
+  result.className = 'result';
+  result.style.width = inputElem.value;
+  result.innerHTML = `<code>width: ${inputElem.value}</code>`;
+  resultsDiv.appendChild(result);
+
+  inputElem.value = '';
+  inputElem.focus();
+})
+```
+
+#### 結果
+
+{{EmbedLiveSample('Length_unit_comparison','100%', 700)}}
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- [CSS 値と単位チュートリアル](/ja/docs/Learn/CSS/Building_blocks/Values_and_units)
+- [CSS 値と単位リファレンス](/ja/docs/Web/CSS/CSS_Values_and_Units)
+- [ボックスモデル](/ja/docs/Web/CSS/CSS_Box_Model)
diff --git a/files/ja/web/css/list-style-type/index.html b/files/ja/web/css/list-style-type/index.html
deleted file mode 100644
index fb9dfc1575..0000000000
--- a/files/ja/web/css/list-style-type/index.html
+++ /dev/null
@@ -1,610 +0,0 @@
----
-title: list-style-type
-slug: Web/CSS/list-style-type
-tags:
-  - CSS
-  - CSS プロパティ
-  - CSS リスト
-  - Reference
-translation_of: Web/CSS/list-style-type
----
-<div>{{CSSRef}}</div>
-
-<p><strong><code>list-style-type</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、リスト項目要素のマーカーを設定します (円、文字、独自のカウンタースタイルなど)。</p>
-
-<div>{{EmbedInteractiveExample("pages/css/list-style-type.html")}}</div>
-
-<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p>
-
-<p>マーカーの<a href="/ja/docs/CSS/color_value" title="color">色</a>は、適用先の要素における色の計算値と同じになります。</p>
-
-<p>既定で <code>display: list-item</code> の値を持っている要素はわずかです ({{HTMLElement("li")}} と {{HTMLElement("summary")}})。しかし、 <code>list-style-type</code> プロパティは {{cssxref("display")}} の値が <code>list-item</code> に設定されているあらゆる要素に適用することができます。さらに、このプロパティは継承されるので、親要素 (普通は {{HTMLElement("ol")}} または {{HTMLElement("ul")}}) に設定することですべてのリスト項目に適用することができます。</p>
-
-<h2 id="Syntax" name="Syntax">構文</h2>
-
-<pre class="brush:css no-line-numbers notranslate">/* マーカーの種類の一例 */
-list-style-type: disc;
-list-style-type: circle;
-list-style-type: square;
-list-style-type: decimal;
-list-style-type: georgian;
-list-style-type: trad-chinese-informal;
-list-style-type: kannada;
-
-/* &lt;string&gt; */
-list-style-type: '-';
-
-/* @counter-style 規則に該当する識別子 */
-list-style-type: custom-counter-style;
-
-/* キーワード値 */
-list-style-type: none;
-
-/* グローバル値 */
-list-style-type: inherit;
-list-style-type: initial;
-list-style-type: unset;
-</pre>
-
-<p>list-style-type プロパティは、以下のいずれかで定義することができます。</p>
-
-<ul>
- <li>単一の <code><a href="#&lt;custom-ident>">&lt;custom-ident&gt;</a></code> 値</li>
- <li>単一の <code><a href="#symbols()">symbols()</a></code> 値</li>
- <li>単一の <code><a href="#&lt;string>">&lt;string&gt;</a></code> 値</li>
- <li><code><a href="#none">none</a></code> キーワード</li>
-</ul>
-
-<h3 id="Values" name="Values">値</h3>
-
-<dl>
- <dt><a id="&lt;custom-ident>" name="&lt;custom-ident>">{{cssxref("custom-ident", "&lt;custom-ident&gt;")}}</a></dt>
- <dd>{{cssxref("@counter-style")}} の値、または以下の定義済みスタイルのうちの一つに一致する識別子です。</dd>
-</dl>
-
-<dl>
- <dt><a id="symbols()" name="symbols()">{{cssxref("symbols()")}}</a></dt>
- <dd>無名のリストスタイルを定義します。</dd>
- <dt><a id="&lt;string>" name="&lt;string>">{{cssxref("&lt;string&gt;")}}</a></dt>
- <dd>特定の文字列を、リストのマーカーとして使用します。</dd>
- <dt><a id="none" name="none"><code>none</code></a></dt>
- <dd>マーカーは表示されません。</dd>
-</dl>
-
-<dl style="">
- <dt><code>disc</code></dt>
- <dd>
- <ul style="list-style-type: disc;">
-  <li>塗りつぶされた円形 (既定値)</li>
- </ul>
- </dd>
- <dt><code>circle</code></dt>
- <dd>
- <ul style="list-style-type: circle;">
-  <li>中空円</li>
- </ul>
- </dd>
- <dt><code>square</code></dt>
- <dd>
- <ul style="list-style-type: square;">
-  <li>塗りつぶされた四角形</li>
- </ul>
- </dd>
- <dt><code>decimal</code></dt>
- <dd>
- <ul style="list-style-type: decimal;">
-  <li>数値</li>
-  <li>既定では 1 から始まります</li>
- </ul>
- </dd>
- <dt><code>cjk-decimal</code> {{experimental_inline}}</dt>
- <dd>
- <ul>
-  <li>漢数字</li>
-  <li>例: 一, 二, 三, ..., 九八, 九九, 一〇〇</li>
- </ul>
- </dd>
- <dt><code>decimal-leading-zero</code></dt>
- <dd>
- <ul style="list-style-type: decimal-leading-zero;">
-  <li>数値</li>
-  <li>ゼロ埋めされて表示されます</li>
-  <li>例: 01, 02, 03, … 98, 99</li>
- </ul>
- </dd>
- <dt><code>lower-roman</code></dt>
- <dd>
- <ul style="list-style-type: lower-roman;">
-  <li>小文字のローマ数字</li>
-  <li>例: i, ii, iii, iv, v…</li>
- </ul>
- </dd>
- <dt><code>upper-roman</code></dt>
- <dd>
- <ul style="list-style-type: upper-roman;">
-  <li>大文字のローマ数字</li>
-  <li>例: I, II, III, IV, V…</li>
- </ul>
- </dd>
- <dt><code>lower-greek</code></dt>
- <dd>
- <ul style="list-style-type: lower-greek;">
-  <li>小文字のギリシャ語</li>
-  <li>アルファ、ベータ、ガンマ、…</li>
-  <li>例: α, β, γ…</li>
- </ul>
- </dd>
- <dt><code>lower-alpha</code></dt>
- <dt><code>lower-latin</code></dt>
- <dd>
- <ul style="list-style-type: lower-alpha;">
-  <li>小文字の ASCII 文字</li>
-  <li>例: a, b, c, … z</li>
-  <li><code>lower-latin</code> は IE7 以前は対応していません</li>
-  <li>{{anch("Browser compatibility")}} の節も参照して下さい</li>
- </ul>
- </dd>
- <dt><code>upper-alpha</code></dt>
- <dt><code>upper-latin</code></dt>
- <dd>
- <ul style="list-style-type: upper-alpha;">
-  <li>大文字の ASCII 文字</li>
-  <li>例: A, B, C, … Z</li>
-  <li><code>upper-latin</code> は IE7 以前は対応していません</li>
- </ul>
- </dd>
- <dt><code>arabic-indic</code></dt>
- <dt><code>-moz-arabic-indic</code></dt>
- <dd>
- <ul style="">
-  <li>例</li>
- </ul>
- </dd>
- <dt><code>armenian</code></dt>
- <dd>
- <ul style="list-style-type: armenian;">
-  <li>伝統的なアルメニア語の数値表記</li>
-  <li>(ayb/ayp, ben/pen, gim/keem…</li>
- </ul>
- </dd>
- <dt><code>bengali</code></dt>
- <dt><code>-moz-bengali</code></dt>
- <dd>
- <ul style="">
-  <li>例</li>
- </ul>
- </dd>
- <dt><code>cambodian</code> {{experimental_inline}}*</dt>
- <dd>
- <ul style="list-style-type: cambodian;">
-  <li>例</li>
-  <li><code>khmer</code> と同義</li>
- </ul>
- </dd>
- <dt><code>cjk-earthly-branch</code></dt>
- <dt><code>-moz-cjk-earthly-branch</code></dt>
- <dd>
- <ul style="">
-  <li>例</li>
- </ul>
- </dd>
- <dt><code>cjk-heavenly-stem</code></dt>
- <dt><code>-moz-cjk-heavenly-stem</code></dt>
- <dd>
- <ul style="">
-  <li>例</li>
- </ul>
- </dd>
- <dt><code>cjk-ideographic</code>{{experimental_inline}}</dt>
- <dd>
- <ul style="list-style-type: cjk-ideographic;">
-  <li><code>trad-chinese-informal</code> と同義</li>
-  <li>例: 一萬一千一百一十一</li>
- </ul>
- </dd>
- <dt><code>devanagari</code></dt>
- <dt><code>-moz-devanagari</code></dt>
- <dd>
- <ul style="">
-  <li>例</li>
- </ul>
- </dd>
- <dt><code>ethiopic-numeric</code> {{experimental_inline}}</dt>
- <dd>
- <ul style="list-style-type: ethiopic-numeric;">
-  <li>例</li>
- </ul>
- </dd>
- <dt><code>georgian</code></dt>
- <dd>
- <ul style="list-style-type: georgian;">
-  <li>伝統的なジョージア語の数値表記</li>
-  <li>例: an, ban, gan, … he, tan, in…</li>
- </ul>
- </dd>
- <dt><code>gujarati</code></dt>
- <dt><code>-moz-gujarati</code></dt>
- <dd>
- <ul style="">
-  <li>例</li>
- </ul>
- </dd>
- <dt><code>gurmukhi</code></dt>
- <dt><code>-moz-gurmukhi</code></dt>
- <dd>
- <ul style="">
-  <li>例</li>
- </ul>
- </dd>
- <dt><code>hebrew</code> {{experimental_inline}}</dt>
- <dd>
- <ul style="list-style-type: hebrew;">
-  <li>伝統的なヘブライ語の数値表記</li>
- </ul>
- </dd>
- <dt><code>hiragana</code> {{experimental_inline}}</dt>
- <dd>
- <ul style="list-style-type: hiragana;">
-  <li>例: あ, い, う, え, お, か, き…</li>
-  <li>日本語の「あいうえお」</li>
- </ul>
- </dd>
- <dt><code>hiragana-iroha</code> {{experimental_inline}}</dt>
- <dd>
- <ul style="list-style-type: hiragana-iroha;">
-  <li>例: い, ろ, は, に, ほ, へ, と…</li>
-  <li>{{interwiki('wikipedia', 'いろは歌')}}は日本語の古い字音の並びです</li>
- </ul>
- </dd>
- <dt><code>japanese-formal</code> {{experimental_inline}}</dt>
- <dd>
- <ul style="list-style-type: japanese-formal;">
-  <li>法的または財務の文書で使用される、日本語の公的な数値表記</li>
-  <li>例: 壱萬壱阡壱百壱拾壱</li>
-  <li>似ている別の文字に書き換えられないようにするための漢字</li>
- </ul>
- </dd>
- <dt><code>japanese-informal</code> {{experimental_inline}}</dt>
- <dd>
- <ul style="list-style-type: japanese-informal;">
-  <li>日本語の日常的な数値表記</li>
- </ul>
- </dd>
- <dt><code>kannada</code></dt>
- <dt><code>-moz-kannada</code></dt>
- <dd>
- <ul style="">
-  <li>例</li>
- </ul>
- </dd>
- <dt style="list-style-type: katakana;"><code>katakana</code> {{experimental_inline}}</dt>
- <dd>
- <ul style="list-style-type: katakana;">
-  <li>例: ア, イ, ウ, エ, オ, カ, キ…</li>
-  <li>日本語の「あいうえお」</li>
- </ul>
- </dd>
- <dt><code>katakana-iroha</code> {{experimental_inline}}</dt>
- <dd>
- <ul style="list-style-type: katakana-iroha;">
-  <li>例: イ, ロ, ハ, ニ, ホ, ヘ, ト…</li>
-  <li>{{interwiki('wikipedia', 'いろは歌')}}は日本語の古い字音の並びです</li>
- </ul>
- </dd>
- <dt><code>khmer</code></dt>
- <dt><code>-moz-khmer</code></dt>
- <dd>
- <ul style="">
-  <li>例</li>
- </ul>
- </dd>
- <dt><code>korean-hangul-formal</code> {{experimental_inline}}</dt>
- <dd>
- <ul style="list-style-type: korean-hangul-formal;">
-  <li>朝鮮のハングルの数値表記</li>
-  <li>例: 일만 일천일백일십일</li>
- </ul>
- </dd>
- <dt><code>korean-hanja-formal</code> {{experimental_inline}}</dt>
- <dd>
- <ul style="list-style-type: korean-hanja-formal;">
-  <li>公的な朝鮮の漢数字</li>
-  <li>例: 壹萬 壹仟壹百壹拾壹</li>
- </ul>
- </dd>
- <dt><code>korean-hanja-informal</code> {{experimental_inline}}</dt>
- <dd>
- <ul style="list-style-type: korean-hanja-informal;">
-  <li>朝鮮の漢数字</li>
-  <li>例: 萬 一千百十一</li>
- </ul>
- </dd>
- <dt><code>lao</code></dt>
- <dt><code>-moz-lao</code></dt>
- <dd>
- <ul style="">
-  <li>例</li>
- </ul>
- </dd>
- <dt><code>lower-armenian</code> {{experimental_inline}}*</dt>
- <dd>
- <ul style="list-style-type: lower-armenian;">
-  <li>例</li>
- </ul>
- </dd>
- <dt><code>malayalam</code></dt>
- <dt><code>-moz-malayalam</code></dt>
- <dd>
- <ul style="">
-  <li>例</li>
- </ul>
- </dd>
- <dt><code>mongolian</code> {{experimental_inline}}</dt>
- <dd>
- <ul style="list-style-type: mongolian;">
-  <li>例</li>
- </ul>
- </dd>
- <dt><code>myanmar</code></dt>
- <dt><code>-moz-myanmar</code></dt>
- <dd>
- <ul style="">
-  <li>例</li>
- </ul>
- </dd>
- <dt><code>oriya</code></dt>
- <dt><code>-moz-oriya</code></dt>
- <dd>
- <ul style="">
-  <li>例</li>
- </ul>
- </dd>
- <dt><code>persian</code> {{experimental_inline}}</dt>
- <dt><code>-moz-persian</code></dt>
- <dd>
- <ul style="">
-  <li>例</li>
- </ul>
- </dd>
- <dt><code>simp-chinese-formal</code> {{experimental_inline}}</dt>
- <dd>
- <ul style="list-style-type: simp-chinese-formal;">
-  <li>公的な簡体字中国語の数値表記</li>
-  <li>例: 壹万壹仟壹佰壹拾壹</li>
- </ul>
- </dd>
- <dt><code>simp-chinese-informal</code> {{experimental_inline}}</dt>
- <dd>
- <ul style="list-style-type: simp-chinese-informal;">
-  <li>簡体字中国語の日常的な数値表記</li>
-  <li>例: 一万一千一百一十一</li>
- </ul>
- </dd>
- <dt><code>tamil</code> {{experimental_inline}}</dt>
- <dt><code>-moz-tamil</code></dt>
- <dd>
- <ul style="">
-  <li>例</li>
- </ul>
- </dd>
- <dt><code>telugu</code></dt>
- <dt><code>-moz-telugu</code></dt>
- <dd>
- <ul style="">
-  <li>例</li>
- </ul>
- </dd>
- <dt><code>thai</code></dt>
- <dt><code>-moz-thai</code></dt>
- <dd>
- <ul style="">
-  <li>例</li>
- </ul>
- </dd>
- <dt><code>tibetan</code> {{experimental_inline}}*</dt>
- <dd>
- <ul style="list-style-type: tibetan;">
-  <li>例</li>
- </ul>
- </dd>
- <dt><code>trad-chinese-formal</code> {{experimental_inline}}</dt>
- <dd>
- <ul style="list-style-type: trad-chinese-formal;">
-  <li>公的な繁体字中国語の数値表記</li>
-  <li>例: 壹萬壹仟壹佰壹拾壹</li>
- </ul>
- </dd>
- <dt><code>trad-chinese-informal</code> {{experimental_inline}}</dt>
- <dd>
- <ul style="list-style-type: trad-chinese-informal;">
-  <li>公的な場では使用しない、繁体字中国語の数値表記</li>
-  <li>例: 一萬一千一百一十一</li>
- </ul>
- </dd>
- <dt><code>upper-armenian</code> {{experimental_inline}}*</dt>
- <dd>
- <ul style="list-style-type: upper-armenian;">
-  <li>例</li>
- </ul>
- </dd>
- <dt><code>disclosure-open</code> {{experimental_inline}}</dt>
- <dd>
- <ul style="list-style-type: disclosure-open;">
-  <li>{{HTMLElement("details")}} などの展開ウィジェットを開いていることを示す記号</li>
- </ul>
- </dd>
- <dt><code>disclosure-closed</code> {{experimental_inline}}</dt>
- <dd>
- <ul style="list-style-type: disclosure-closed;">
-  <li>{{HTMLElement("details")}} などの展開ウィジェットを閉じていることを示す記号</li>
- </ul>
- </dd>
-</dl>
-
-<h3 id="Non-standard_extensions" name="Non-standard_extensions">標準外の拡張</h3>
-
-<p>Mozilla (Firefox), Blink (Chrome and Opera), WebKit (Safari) が拡張した、様々な言語のマーカーです。ブラウザーの互換性の表で、ブラウザーがどの拡張に対応しているかを確認してください。</p>
-
-<dl style="">
- <dt><code>-moz-ethiopic-halehame</code></dt>
- <dd>
- <ul style="">
-  <li>例</li>
- </ul>
- </dd>
- <dt><code>-moz-ethiopic-halehame-am</code></dt>
- <dd>
- <ul style="">
-  <li>例</li>
- </ul>
- </dd>
- <dt><code>ethiopic-halehame-ti-er</code></dt>
- <dt><code>-moz-ethiopic-halehame-ti-er</code></dt>
- <dd>
- <ul style="">
-  <li>例</li>
- </ul>
- </dd>
- <dt><code>ethiopic-halehame-ti-et</code></dt>
- <dt><code>-moz-ethiopic-halehame-ti-et</code></dt>
- <dd>
- <ul style="">
-  <li>例</li>
- </ul>
- </dd>
- <dt><code>hangul</code></dt>
- <dt><code>-moz-hangul</code></dt>
- <dd>
- <ul style="">
-  <li>例</li>
-  <li>例</li>
-  <li>例</li>
- </ul>
- </dd>
- <dt><code>hangul-consonant</code></dt>
- <dt><code>-moz-hangul-consonant</code></dt>
- <dd>
- <ul style="">
-  <li>例</li>
-  <li>例</li>
-  <li>例</li>
- </ul>
- </dd>
- <dt><code>urdu</code></dt>
- <dt><code>-moz-urdu</code></dt>
- <dd>
- <ul style="">
-  <li>例</li>
- </ul>
- </dd>
-</dl>
-
-<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
-
-{{csssyntax}}
-
-<h2 id="Examples" name="Examples">例</h2>
-
-<h3 id="CSS">CSS</h3>
-
-<pre class="brush: css notranslate">ol.normal {
-  list-style-type: upper-alpha;
-}
-
-/* or use the shortcut "list-style": */
-ol.shortcut {
-  list-style: upper-alpha;
-}
-</pre>
-
-<h3 id="HTML">HTML</h3>
-
-<pre class="brush: html notranslate">&lt;ol class="normal"&gt;List 1
-  &lt;li&gt;Hello&lt;/li&gt;
-  &lt;li&gt;World&lt;/li&gt;
-  &lt;li&gt;What's up?&lt;/li&gt;
-&lt;/ol&gt;
-
-&lt;ol class="shortcut"&gt;List 2
-  &lt;li&gt;Looks&lt;/li&gt;
-  &lt;li&gt;Like&lt;/li&gt;
-  &lt;li&gt;The&lt;/li&gt;
-  &lt;li&gt;Same&lt;/li&gt;
-&lt;/ol&gt;
-</pre>
-
-<h3 id="Result" name="Result">結果</h3>
-
-<p>{{EmbedLiveSample("Examples","200","300")}}</p>
-
-<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮事項</h2>
-
-<p>読み上げソフトの <a href="https://help.apple.com/voiceover/info/guide/">VoiceOver</a> には、 <code>list-style-type</code> の値に <code>none</code> が適用された順序なしリストをリストとして読み上げないという問題があります。リストが正しく読み上げられるようにするには、それぞれのリスト項目の前に<a href="https://en.wikipedia.org/wiki/Zero-width_space">幅ゼロの空白</a>を<a href="/ja/docs/Web/CSS/content">擬似コンテンツ</a>として追加する必要があります。これはデザインがバグ修正に影響されないことを保証し、リスト項目の表記が正しくなくなるわけではありません。</p>
-
-<pre class="brush: css notranslate">ul {
-  list-style: none;
-}
-
-ul li::before {
-  content: "\200B";
-}
-
-</pre>
-
-<ul>
- <li><a href="https://unfetteredthoughts.net/2017/09/26/voiceover-and-list-style-type-none/">VoiceOver and list-style-type: none – Unfettered Thoughts</a></li>
- <li><a href="/ja/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 href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-programmatic.html" rel="noopener">Understanding Success Criterion 1.3.1 | W3C Understanding WCAG 2.0</a></li>
-</ul>
-
-<h2 id="Notes" name="Notes">メモ</h2>
-
-<ul>
- <li>一部の <code>list-style-types</code> の表示には、適切なフォントのインストールが必要です。</li>
- <li><code>cjk-ideographic</code> は <code>trad-chinese-informal</code> と同義です。後方互換性のために残されています。</li>
-</ul>
-
-<h2 id="Specifications" name="Specifications">仕様書</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">仕様書</th>
-   <th scope="col">状態</th>
-   <th scope="col">備考</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Counter Styles', '#extending-css2', 'list-style-type')}}</td>
-   <td>{{Spec2("CSS3 Counter Styles")}}</td>
-   <td>CSS2.1 counters を再定義。<br>
-    <code>@counter-style</code> 規則に対応するため構文を拡張。<br>
-    <code>@counter-style</code> を使用して、一般的なスタイルである <code>hebrew</code>, <code>cjk-ideographic</code>, <code>hiragana</code>, <code>hiragana-iroha</code>, <code>katakana</code>, <code>katakana-iroha</code>, <code>japanese-formal</code>, <code>japanese-informal</code>, <code>simp-chinese-formal</code>, <code>trad-chinese-formal</code>, <code>simp-chinese-formal</code>, <code>trad-chinese-formal</code>,<code>korean-hangul-formal</code>, <code>korean-hanja-informal</code>, <code>korean-hanja-formal</code>, <code>cjk-decimal</code>, <code>ethiopic-numeric</code>, <code>disclosure-open</code>, <code>disclosure-closed</code> を定義。<br>
-    <code>&lt;counter-style&gt;</code> を <code>symbols()</code> 表記で拡張。</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Lists', '#propdef-list-style-type', 'list-style-type')}}</td>
-   <td>{{Spec2('CSS3 Lists')}}</td>
-   <td>{{cssxref("&lt;string&gt;")}} の対応を追加し、 <code>@counter-style</code> 規則で使われる識別子をキーワードに追加。<br>
-    単純な <code>&lt;string&gt;</code> の対応を追加。</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS2.1', 'generate.html#propdef-list-style-type', 'list-style-type')}}</td>
-   <td>{{Spec2('CSS2.1')}}</td>
-   <td>初回定義</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
-
-<p>{{Compat("css.properties.list-style-type")}}</p>
-
-<h2 id="See_also" name="See_also">関連情報</h2>
-
-<ul>
- <li>{{Cssxref("list-style")}}, {{Cssxref("list-style-image")}}, {{Cssxref("list-style-position")}}</li>
-</ul>
diff --git a/files/ja/web/css/list-style-type/index.md b/files/ja/web/css/list-style-type/index.md
new file mode 100644
index 0000000000..518ab2a49c
--- /dev/null
+++ b/files/ja/web/css/list-style-type/index.md
@@ -0,0 +1,581 @@
+---
+title: list-style-type
+slug: Web/CSS/list-style-type
+tags:
+  - CSS
+  - CSS プロパティ
+  - CSS リスト
+  - Reference
+  - recipe:css-property
+browser-compat: css.properties.list-style-type
+translation_of: Web/CSS/list-style-type
+---
+{{CSSRef}}
+
+**`list-style-type`** は [CSS](/ja/docs/Web/CSS) のプロパティで、リスト項目要素のマーカーを設定します (円、文字、独自のカウンタースタイルなど)。</p>
+
+{{EmbedInteractiveExample("pages/css/list-style-type.html")}}
+
+マーカーの[色](/ja/docs/Web/CSS/color_value)は、適用先の要素における色の計算値と同じになります。
+
+わずかな要素 ({{HTMLElement("li")}} と {{HTMLElement("summary")}}) だけが既定で `display: list-item` の値を持っています。しかし、 `list-style-type` プロパティは {{cssxref("display")}} の値が `list-item` に設定されているあらゆる要素に適用することができます。さらに、このプロパティは継承されるので、親要素 (普通は {{HTMLElement("ol")}} または {{HTMLElement("ul")}}) に設定することですべてのリスト項目に適用することができます。</p>
+
+## 構文
+
+```css
+/* マーカーの種類の一例 */
+list-style-type: disc;
+list-style-type: circle;
+list-style-type: square;
+list-style-type: decimal;
+list-style-type: georgian;
+list-style-type: trad-chinese-informal;
+list-style-type: kannada;
+
+/* <string> の値 */
+list-style-type: '-';
+
+/* @counter-style 規則に一致する識別子 */
+list-style-type: custom-counter-style;
+
+/* キーワード値 */
+list-style-type: none;
+
+/* グローバル値 */
+list-style-type: inherit;
+list-style-type: initial;
+list-style-type: revert;
+list-style-type: unset;
+```
+
+`list-style-type` プロパティは、以下のいずれかで定義することができます。
+
+- 単一の `<custom-ident>` 値
+- 単一の `symbols()` 値
+- 単一の `<string>` 値
+- キーワード `none`
+
+注意事項:
+
+- 種類によっては期待通りに表示するために適切なフォントのインストールが必要です。
+- `cjk-ideographic` は `trad-chinese-informal` と同じです。歴史的な理由で存在しています。
+
+### 値
+
+- {{cssxref("custom-ident", "&lt;custom-ident&gt;")}}
+  - : {{cssxref("@counter-style")}} の値、または以下の定義済みスタイルのうちの一つに一致する識別子です。
+- {{cssxref("symbols()")}}
+  - : 無名のリストスタイルを定義します。
+- {{cssxref("&lt;string&gt;")}}
+  - : 特定の文字列を、リストのマーカーとして使用します。
+- `none`
+  - : マーカーは表示されません。
+- `disc`
+  - : 塗りつぶされた円形です (既定値)。 
+- `circle`
+  - : 中空円です。
+- `square`
+  - : 塗りつぶされた四角形です。
+- `decimal`
+  - : 数値です。 1 から始まります。
+- `cjk-decimal` {{experimental_inline}}
+  - : 漢数字です。
+- `decimal-leading-zero`
+  - : 数値で、先頭がゼロ埋めされます。
+- `lower-roman`
+  - : 小文字のローマ数字です。
+- `upper-roman`
+  - : 大文字のローマ数字です。
+- `lower-greek`
+  - : 小文字の古代ギリシャ文字です。
+- `lower-alpha`, `lower-latin`
+  - : 小文字の ASCII 文字です。
+- `upper-alpha`, `upper-latin`
+  - : 大文字の ASCII 文字です。
+- `arabic-indic`, `-moz-arabic-indic`
+  - : アラビア－インド数字です。
+- `armenian`
+  - : 伝統的なアルメニア語の数値表記です。
+- `bengali`, `-moz-bengali`
+  - : ベンガル語の数値表記です。
+- `cambodian`/`khmer`
+  - : カンボジア／クメール語の数値表記です。
+- `cjk-earthly-branch`, `-moz-cjk-earthly-branch`
+  - : 漢字の「十二支」順です。
+- `cjk-heavenly-stem`, `-moz-cjk-heavenly-stem`
+  - : 漢字の「十干」順です。
+- `cjk-ideographic`{{experimental_inline}}
+  - : `trad-chinese-informal` と同じです。
+- `devanagari`, `-moz-devanagari`
+  - : デーヴァナーガリーの数値表記です。
+- `ethiopic-numeric` {{experimental_inline}}
+  - : エチオピア語の数値表記です。
+- `georgian`
+  - : 伝統的なジョージア語の数値表記です。
+- `gujarati`, `-moz-gujarati`
+  - : グジャラート語の数値表記です。
+- `gurmukhi`, `-moz-gurmukhi`
+  - : グルムキー語の数値表記です。
+- `hebrew` {{experimental_inline}}
+  - : 伝統的なヘブライ語の数値表記です。
+- `hiragana` {{experimental_inline}}
+  - : ひらがなの辞書順の文字です。
+- `hiragana-iroha` {{experimental_inline}}
+  - : ひらがなの{{interwiki('wikipedia', 'いろは歌', 'いろは順')}}の文字です。
+- `japanese-formal` {{experimental_inline}}
+  - : 法律や金融関係の書類に使用される日本の公的な数値表記です。漢字は、他の正しい文字に似せて修正することができないように設計されています。
+- `japanese-informal` {{experimental_inline}}
+  - : 日本語の日常的な数値表記です。
+- `kannada`, `-moz-kannada`
+  - : カンナダ語の数値表記です。
+- `katakana` {{experimental_inline}}
+  - : カタカナの辞書順の文字です。
+- `katakana-iroha` {{experimental_inline}}
+  - : カタカナの{{interwiki('wikipedia', 'いろは歌', 'いろは順')}}の文字です。
+- `korean-hangul-formal` {{experimental_inline}}
+  - : 韓国語のハングルの数値表記です。
+- `korean-hanja-formal` {{experimental_inline}}
+  - : 韓国語の公的な漢数字です。
+- `korean-hanja-informal` {{experimental_inline}}
+  - : 韓国語の漢数字です。
+- `lao`, `-moz-lao`
+  - : ラオス語の数値表記です。
+- `lower-armenian` {{experimental_inline}}
+  - : アルメニア語の小文字の数値表記です。
+- `malayalam`, `-moz-malayalam`
+  - : マラヤーラム語の数値表記です。
+- `mongolian` {{experimental_inline}}
+  - : モンゴル語の数値表記です。
+- `myanmar`, `-moz-myanmar`
+  - : ミャンマー語 (ビルマ語) の数値表記です。
+- `oriya`, `-moz-oriya`
+  - : オリヤー語の数値表記です。
+- `persian` {{experimental_inline}}, `-moz-persian`
+  - : ペルシャ語の数値表記です。
+- `simp-chinese-formal` {{experimental_inline}}
+  - : 公的な簡体字中国語の数値表記です。
+- `simp-chinese-informal` {{experimental_inline}}
+  - : 日常的な簡体字中国語の数値表記です。
+- `tamil` {{experimental_inline}}, `-moz-tamil`
+  - : タミル語の数値表記です。
+- `telugu`, `-moz-telugu`
+  - : テルグ語の数値表記です。
+- `thai`, `-moz-thai`
+  - : タイ語の数値表記です。
+- `tibetan` {{experimental_inline}}\*
+  - : チベット語の数値表記です。
+- `trad-chinese-formal` {{experimental_inline}}
+  - : 公的な繁体字中国語の数値表記です。
+- `trad-chinese-informal` {{experimental_inline}}
+  - : 日常的な繁体字中国語の数値表記です。
+- `upper-armenian` {{experimental_inline}}`
+  - : 伝統的なアルメニア語の大文字の数値表記です。
+- `disclosure-open` {{experimental_inline}}
+  - : {{HTMLElement("details")}} などの展開ウィジェットを開いていることを示す記号
+- `disclosure-closed` {{experimental_inline}}
+  - : {{HTMLElement("details")}} などの展開ウィジェットを閉じていることを示す記号
+
+### 標準外の拡張
+
+Mozilla (Firefox)、Blink (Chrome、Opera)、WebKit (Safari) では、他の言語のリストの種類に対応するために、さらにいくつかの定義済みの種類が提供されています。どのブラウザーがどの拡張に対応しているかを確認するには、互換性一覧表を参照してください。
+
+- `-moz-ethiopic-halehame`
+- `-moz-ethiopic-halehame-am`
+- `ethiopic-halehame-ti-er`, `-moz-ethiopic-halehame-ti-er`
+- `ethiopic-halehame-ti-et`, `-moz-ethiopic-halehame-ti-et`
+- `hangul`, `-moz-hangul`
+- `hangul-consonant`, `-moz-hangul-consonant`
+- `urdu`, `-moz-urdu`
+
+## アクセシビリティの考慮
+
+画面リーダーの [VoiceOver](https://help.apple.com/voiceover/info/guide/) には、 `list-style-type` の値に `none` が適用された順序なしリストをリストとして読み上げないという問題があります。リストが正しく読み上げられるようにするには、それぞれのリスト項目の前に[幅ゼロの空白](https://en.wikipedia.org/wiki/Zero-width_space)を[擬似コンテンツ](/ja/docs/Web/CSS/content)として追加する必要があります。これはデザインがバグ修正に影響されないことを保証し、リスト項目の表記が正しくなくなるわけではありません。
+
+```css
+ul {
+  list-style: none;
+}
+
+ul li::before {
+  content: "\200B";
+}
+```
+
+- [VoiceOver and list-style-type: none – Unfettered Thoughts](https://unfetteredthoughts.net/2017/09/26/voiceover-and-list-style-type-none/)
+- [MDN WCAG の理解、ガイドライン 1.3 の説明](/ja/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](https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-programmatic.html)
+
+## 公式定義
+
+{{cssinfo}}
+
+## 形式文法
+
+{{csssyntax}}
+
+## 例
+
+<h3 id="Setting_list_item_markers">リスト項目マーカーの設定</h3>
+
+#### HTML
+
+```html
+List 1
+<ol class="normal">
+  <li>Hello</li>
+  <li>World</li>
+  <li>What's up?</li>
+</ol>
+
+List 2
+<ol class="shortcut">
+  <li>Looks</li>
+  <li>Like</li>
+  <li>The</li>
+  <li>Same</li>
+</ol>
+```
+
+#### CSS
+
+```css
+ol.normal {
+  list-style-type: upper-alpha;
+}
+
+/* or use the shortcut "list-style": */
+ol.shortcut {
+  list-style: upper-alpha;
+}
+```
+
+#### 結果
+
+{{EmbedLiveSample("Setting_list_item_markers","200","300")}}
+
+<h3 id="All_list_style_types">リストスタイルのすべての種類</h3>
+
+#### HTML
+
+```html
+<ol>
+  <li>Apollo</li>
+  <li>Hubble</li>
+  <li>Chandra</li>
+  <li>Cassini-Huygens</li>
+  <li>Spitzer</li>
+</ol>
+
+<h2>Choose a list style type:</h2>
+
+<div class="container">
+
+  <label for="disc">
+    <input type="radio" id="disc" name="type" value="disc">disc
+  </label>
+
+  <label for="circle">
+    <input type="radio" id="circle" name="type" value="circle">circle
+  </label>
+
+  <label for="square">
+    <input type="radio" id="square" name="type" value="square">square
+  </label>
+
+  <label for="decimal">
+    <input type="radio" id="decimal" name="type" value="decimal">decimal
+  </label>
+
+  <label for="cjk-decimal">
+    <input type="radio" id="cjk-decimal" name="type" value="cjk-decimal">cjk-decimal
+  </label>
+
+  <label for="decimal-leading-zero">
+    <input type="radio" id="decimal-leading-zero" name="type" value="decimal-leading-zero">decimal-leading-zero
+  </label>
+
+  <label for="lower-roman">
+    <input type="radio" id="lower-roman" name="type" value="lower-roman">lower-roman
+  </label>
+
+  <label for="upper-roman">
+    <input type="radio" id="upper-roman" name="type" value="upper-roman">upper-roman
+  </label>
+
+  <label for="lower-greek">
+    <input type="radio" id="lower-greek" name="type" value="lower-greek">lower-greek
+  </label>
+
+  <label for="lower-alpha">
+    <input type="radio" id="lower-alpha" name="type" value="lower-alpha">lower-alpha, lower-latin
+  </label>
+
+  <label for="upper-alpha">
+    <input type="radio" id="upper-alpha" name="type" value="upper-alpha">upper-alpha, upper-latin
+  </label>
+
+  <label for="arabic-indic">
+    <input type="radio" id="arabic-indic" name="type" value="arabic-indic">arabic-indic
+  </label>
+
+  <label for="armenian">
+    <input type="radio" id="armenian" name="type" value="armenian">armenian
+  </label>
+
+  <label for="bengali">
+    <input type="radio" id="bengali" name="type" value="bengali">bengali
+  </label>
+
+  <label for="cambodian">
+    <input type="radio" id="cambodian" name="type" value="cambodian">cambodian
+  </label>
+
+  <label for="cjk-earthly-branch">
+    <input type="radio" id="cjk-earthly-branch" name="type" value="cjk-earthly-branch">cjk-earthly-branch
+  </label>
+
+  <label for="cjk-heavenly-stem">
+    <input type="radio" id="cjk-heavenly-stem" name="type" value="cjk-heavenly-stem">cjk-heavenly-stem
+  </label>
+
+  <label for="cjk-ideographic">
+    <input type="radio" id="cjk-ideographic" name="type" value="cjk-ideographic">cjk-ideographic
+  </label>
+
+  <label for="devanagari">
+    <input type="radio" id="devanagari" name="type" value="devanagari">devanagari
+  </label>
+
+  <label for="ethiopic-numeric">
+    <input type="radio" id="ethiopic-numeric" name="type" value="ethiopic-numeric">ethiopic-numeric
+  </label>
+
+  <label for="georgian">
+    <input type="radio" id="georgian" name="type" value="georgian">georgian
+  </label>
+
+  <label for="gujarati">
+    <input type="radio" id="gujarati" name="type" value="gujarati">gujarati
+  </label>
+
+  <label for="gurmukhi">
+    <input type="radio" id="gurmukhi" name="type" value="gurmukhi">gurmukhi
+  </label>
+
+  <label for="hebrew">
+    <input type="radio" id="hebrew" name="type" value="hebrew">hebrew
+  </label>
+
+  <label for="hiragana">
+    <input type="radio" id="hiragana" name="type" value="hiragana">hiragana
+  </label>
+
+  <label for="hiragana-iroha">
+    <input type="radio" id="hiragana-iroha" name="type" value="hiragana-iroha">hiragana-iroha
+  </label>
+
+  <label for="japanese-formal">
+    <input type="radio" id="japanese-formal" name="type" value="japanese-formal">japanese-formal
+  </label>
+
+  <label for="japanese-informal">
+    <input type="radio" id="japanese-informal" name="type" value="japanese-informal">japanese-informal
+  </label>
+
+  <label for="kannada">
+    <input type="radio" id="kannada" name="type" value="kannada">kannada
+  </label>
+
+  <label for="katakana">
+    <input type="radio" id="katakana" name="type" value="katakana">katakana
+  </label>
+
+  <label for="katakana-iroha">
+    <input type="radio" id="katakana-iroha" name="type" value="katakana-iroha">katakana-iroha
+  </label>
+
+  <label for="khmer">
+    <input type="radio" id="khmer" name="type" value="khmer">khmer
+  </label>
+
+  <label for="korean-hangul-formal">
+    <input type="radio" id="korean-hangul-formal" name="type" value="korean-hangul-formal">korean-hangul-formal
+  </label>
+
+  <label for="korean-hanja-formal">
+    <input type="radio" id="korean-hanja-formal" name="type" value="korean-hanja-formal">korean-hanja-formal
+  </label>
+
+  <label for="korean-hanja-informal">
+    <input type="radio" id="korean-hanja-informal" name="type" value="korean-hanja-informal">korean-hanja-informal
+  </label>
+
+  <label for="lao">
+    <input type="radio" id="lao" name="type" value="lao">lao
+  </label>
+
+  <label for="lower-armenian">
+    <input type="radio" id="lower-armenian" name="type" value="lower-armenian">lower-armenian
+  </label>
+
+  <label for="malayalam">
+    <input type="radio" id="malayalam" name="type" value="malayalam">malayalam
+  </label>
+
+  <label for="mongolian">
+    <input type="radio" id="mongolian" name="type" value="mongolian">mongolian
+  </label>
+
+  <label for="myanmar">
+    <input type="radio" id="myanmar" name="type" value="myanmar">myanmar
+  </label>
+
+  <label for="oriya">
+    <input type="radio" id="oriya" name="type" value="oriya">oriya
+  </label>
+
+  <label for="persian">
+    <input type="radio" id="persian" name="type" value="persian">persian
+  </label>
+
+  <label for="simp-chinese-formal">
+    <input type="radio" id="simp-chinese-formal" name="type" value="simp-chinese-formal">simp-chinese-formal
+  </label>
+
+  <label for="simp-chinese-informal">
+    <input type="radio" id="simp-chinese-informal" name="type" value="simp-chinese-informal">simp-chinese-informal
+  </label>
+
+  <label for="tamil">
+    <input type="radio" id="tamil" name="type" value="tamil">tamil
+  </label>
+
+  <label for="telegu">
+    <input type="radio" id="telegu" name="type" value="telegu">telegu
+  </label>
+
+  <label for="thai">
+    <input type="radio" id="thai" name="type" value="thai">thai
+  </label>
+
+  <label for="tibetan">
+    <input type="radio" id="tibetan" name="type" value="tibetan">tibetan
+  </label>
+
+  <label for="trad-chinese-formal">
+    <input type="radio" id="trad-chinese-formal" name="type" value="trad-chinese-formal">trad-chinese-formal
+  </label>
+
+  <label for="trad-chinese-informal">
+    <input type="radio" id="trad-chinese-informal" name="type" value="trad-chinese-informal">trad-chinese-informal
+  </label>
+
+  <label for="upper-armenian">
+    <input type="radio" id="upper-armenian" name="type" value="upper-armenian">upper-armenian
+  </label>
+
+  <label for="disclosure-open">
+    <input type="radio" id="disclosure-open" name="type" value="disclosure-open">disclosure-open
+  </label>
+
+  <label for="disclosure-closed">
+    <input type="radio" id="disclosure-closed" name="type" value="disclosure-closed">disclosure-closed
+  </label>
+
+  <label for="-moz-ethiopic-halehame">
+    <input type="radio" id="-moz-ethiopic-halehame" name="type" value="-moz-ethiopic-halehame">-moz-ethiopic-halehame
+  </label>
+
+  <label for="-moz-ethiopic-halehame-am">
+    <input type="radio" id="-moz-ethiopic-halehame-am" name="type" value="-moz-ethiopic-halehame-am">-moz-ethiopic-halehame-am
+  </label>
+
+  <label for="ethiopic-halehame-ti-er">
+    <input type="radio" id="ethiopic-halehame-ti-er" name="type" value="ethiopic-halehame-ti-er">ethiopic-halehame-ti-er
+  </label>
+
+  <label for="ethiopic-halehame-ti-et">
+    <input type="radio" id="ethiopic-halehame-ti-et" name="type" value="ethiopic-halehame-ti-et">ethiopic-halehame-ti-et
+  </label>
+
+  <label for="hangul">
+    <input type="radio" id="hangul" name="type" value="hangul">hangul
+  </label>
+
+  <label for="hangul-consonant">
+    <input type="radio" id="hangul-consonant" name="type" value="hangul-consonant">hangul-consonant
+  </label>
+
+  <label for="urdu">
+    <input type="radio" id="urdu" name="type" value="urdu">urdu
+  </label>
+
+  <label for="-moz-ethiopic-halehame-ti-er">
+    <input type="radio" id="-moz-ethiopic-halehame-ti-er" name="type" value="-moz-ethiopic-halehame-ti-er">-moz-ethiopic-halehame-ti-er
+  </label>
+
+  <label for="-moz-ethiopic-halehame-ti-et">
+    <input type="radio" id="-moz-ethiopic-halehame-ti-et" name="type" value="-moz-ethiopic-halehame-ti-et">-moz-ethiopic-halehame-ti-et
+  </label>
+
+  <label for="-moz-hangul">
+    <input type="radio" id="-moz-hangul" name="type" value="-moz-hangul">-moz-hangul
+  </label>
+
+  <label for="-moz-hangul-consonant">
+    <input type="radio" id="-moz-hangul-consonant" name="type" value="-moz-hangul-consonant">-moz-hangul-consonant
+  </label>
+
+  <label for="-moz-urdu">
+    <input type="radio" id="-moz-urdu" name="type" value="-moz-urdu">-moz-urdu
+  </label>
+
+</div>
+```
+
+#### CSS
+
+```css
+
+ol {
+  font-size: 1.2rem;
+}
+
+.container {
+  column-count: 3;
+}
+
+label {
+  display: block;
+}
+
+input {
+  margin: .4rem;
+}
+```
+
+#### JavaScript
+
+```js
+const container = document.querySelector(".container");
+container.addEventListener("change", event => {
+  const list = document.querySelector("ol");
+  list.setAttribute("style", `list-style-type: ${event.target.value}`);
+});
+```
+
+#### 結果
+
+{{EmbedLiveSample("All_list_style_types", "600", "800")}}
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- {{Cssxref("list-style")}}, {{Cssxref("list-style-image")}}, {{Cssxref("list-style-position")}}
diff --git a/files/ja/web/css/minmax()/index.html b/files/ja/web/css/minmax()/index.html
index 9ab7b88e97..ca68c8d134 100644
--- a/files/ja/web/css/minmax()/index.html
+++ b/files/ja/web/css/minmax()/index.html
@@ -156,7 +156,7 @@ minmax(auto, 300px)
  </li>
 </ul>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li><a href="/ja/docs/Web/CSS"><strong>CSS</strong></a></li>
  <li><a href="/ja/docs/Web/CSS/Reference"><strong>CSS リファレンス</strong></a></li>
diff --git a/files/ja/web/css/padding-bottom/index.html b/files/ja/web/css/padding-bottom/index.html
index 877b22fa80..8aa21ff9bb 100644
--- a/files/ja/web/css/padding-bottom/index.html
+++ b/files/ja/web/css/padding-bottom/index.html
@@ -104,7 +104,7 @@ padding-bottom: unset;
 <h2 id="See_also" name="See_also">関連情報</h2>
 
 <ul>
- <li><a href="/ja/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model" title="ja/CSS/box model">CSS 基本ボックスモデルの紹介</a></li>
+ <li><a href="/ja/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">CSS 基本ボックスモデルの紹介</a></li>
  <li>{{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-left")}} および {{cssxref("padding")}} 一括指定</li>
  <li>対応付けられる論理的プロパティ: {{cssxref("padding-block-start")}}, {{cssxref("padding-block-end")}}, {{cssxref("padding-inline-start")}}, {{cssxref("padding-inline-end")}} および一括指定の {{cssxref("padding-block")}} と {{cssxref("padding-inline")}}</li>
 </ul>
diff --git a/files/ja/web/css/reference/index.html b/files/ja/web/css/reference/index.html
index a9bc022589..673dbef605 100644
--- a/files/ja/web/css/reference/index.html
+++ b/files/ja/web/css/reference/index.html
@@ -95,7 +95,7 @@ div.menu-bar li:hover &gt; ul {
  <dt><a href="/ja/docs/Web/CSS/Child_combinator">子結合子</a> <code><var>A</var> &gt; <var>B</var></code></dt>
  <dd><code><var>B</var></code> で選択された要素のうち、 <code><var>A</var></code> で選択された要素の直接の子であるものを指定します。</dd>
  <dt><a href="/ja/docs/Web/CSS/Descendant_combinator">子孫結合子</a> <code><var>A</var> <var>B</var></code></dt>
- <dd><code><var>B</var></code> で選択された要素のうち、 <code><var>A</var></code>, but is not necessarily a direct child.</dd>
+ <dd><code><var>B</var></code> で選択された要素のうち、 <code><var>A</var></code>で選択された要素の子孫であるものを指定します。直接の子である必要はありません。</dd>
  <dt><a href="/ja/docs/Web/CSS/Column_combinator">列結合子</a> <code><var>A</var> || <var>B</var></code> {{Experimental_Inline}}</dt>
  <dd><code><var>B</var></code> で指定された要素のうち、 <code><var>A</var></code> で指定された表の列にあるものを指定します。複数の列にまたがる要素は、そのすべての列のメンバーであるとみなされます。</dd>
 </dl>
diff --git a/files/ja/web/css/text-decoration-color/index.html b/files/ja/web/css/text-decoration-color/index.html
index 7b0322e9d0..f41da12a5c 100644
--- a/files/ja/web/css/text-decoration-color/index.html
+++ b/files/ja/web/css/text-decoration-color/index.html
@@ -3,14 +3,18 @@ title: text-decoration-color
 slug: Web/CSS/text-decoration-color
 tags:
   - CSS
-  - CSS テキスト
-  - CSS テキスト装飾
-  - CSS プロパティ
-  - HTML スタイル
-  - HTML 色
+  - CSS Property
+  - CSS Text
+  - CSS Text Decoration
+  - HTML Colors
+  - HTML Styles
   - Reference
-  - text-decoration-color
-  - 色
+  - Styling HTML
+  - Styling text
+  - color
+  - colors
+  - 'recipe:css-property'
+browser-compat: css.properties.text-decoration-color
 translation_of: Web/CSS/text-decoration-color
 ---
 <div>{{ CSSRef }}</div>
@@ -21,14 +25,13 @@ translation_of: Web/CSS/text-decoration-color
 
 <div>{{EmbedInteractiveExample("pages/css/text-decoration-color.html")}}</div>
 
-<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>
 
 <p>CSS はそれぞれの線種ごとに固有の色を指定する仕組みを直接は持っていません。しかしながら、この効果は要素を入れ子にして、それぞれの要素毎に ({{cssxref("text-decoration-line")}} プロパティで) 異なる線種を適用し、 (code&gt;text-decoration-color で) 線の色を指定することで実現できます。</p>
 
-<h2 id="Syntax" name="Syntax">構文</h2>
+<h2 id="Syntax">構文</h2>
 
 <pre class="brush:css no-line-numbers">/* &lt;color&gt; 値 */
-text-decoration-color: currentColor;
+text-decoration-color: currentcolor;
 text-decoration-color: red;
 text-decoration-color: #00ff00;
 text-decoration-color: rgba(255, 128, 128, 0.5);
@@ -37,21 +40,40 @@ text-decoration-color: transparent;
 /* グローバル値 */
 text-decoration-color: inherit;
 text-decoration-color: initial;
+text-decoration-color: revert;
 text-decoration-color: unset;
 </pre>
 
-<h3 id="Values" name="Values">値</h3>
+<h3 id="Values">値</h3>
 
 <dl>
- <dt>{{cssxref("&lt;color&gt;")}}</dt>
- <dd>装飾線の色です。</dd>
+	<dt>{{cssxref("&lt;color&gt;")}}</dt>
+	<dd>装飾線の色です。</dd>
 </dl>
 
-<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+<h2 id="Accessibility_concerns">アクセシビリティの考慮</h2>
+
+<p>テキストの色、テキストが置かれている背景、テキストの装飾線の間のコントラスト比が、弱視の人がページの内容を読むことができるように十分に高いことを確認ことが重要です。色のコントラスト比は、テキストと背景の色の輝度を比較して決定されます。</p>
+
+<p>色だけで意味を伝えるべきではありません。例えば、テキストの色と text-decoration-color の変更だけでは、リンクにフォーカスがあることを示すのに十分ではありません。</p>
+
+<ul>
+	<li><a href="https://webaim.org/resources/contrastchecker/">WebAIM: Color Contrast Checker</a></li>
+	<li><a href="/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN "WCAG を理解する ― ガイドライン 1.4 の解説"</a></li>
+	<li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html">Understanding Success Criterion 1.4.3 | W3C Understanding WCAG 2.0</a></li>
+</ul>
+
+<h2 id="Formal_definition">公式定義</h2>
+
+<p>{{CSSInfo}}</p>
+
+<h3 id="Formal_syntax">形式文法</h3>
 
 {{csssyntax}}
 
-<h2 id="Examples" name="Examples">例</h2>
+<h2 id="Examples">例</h2>
+
+<h3 id="Basic_example">基本的な例</h3>
 
 <pre class="brush: html">&lt;p&gt;This paragraph has &lt;s&gt;some erroneous text&lt;/s&gt;
     inside it that I want to call attention to.&lt;/p&gt;</pre>
@@ -62,51 +84,22 @@ text-decoration-color: unset;
 }
 
 s {
-  text-decoration-line: <code>line-through</code>;
+  text-decoration-line: line-through;
   text-decoration-color: red;
   text-decoration-style: wavy;
 }</pre>
 
 <p>{{ EmbedLiveSample('Examples') }}</p>
 
-<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮事項</h2>
-
-<p>テキストの色、テキストが置かれている背景、テキストの装飾線の間のコントラスト比が、弱視の人がページの内容を読むことができるように十分に高いことを確認ことが重要です。色のコントラスト比は、テキストと背景の色の輝度を比較して決定されます。</p>
-
-<p>色だけで意味を伝えるべきではありません。例えば、テキストの色と text-decoration-color の変更だけでは、リンクにフォーカスがあることを示すのに十分ではありません。</p>
-
-<ul>
- <li><a href="https://webaim.org/resources/contrastchecker/">WebAIM: Color Contrast Checker</a></li>
- <li><a href="/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN "WCAG を理解する ― ガイドライン 1.4 の解説"</a></li>
- <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html">Understanding Success Criterion 1.4.3 | W3C Understanding WCAG 2.0</a></li>
-</ul>
-
-<h2 id="Specifications" name="Specifications">仕様書</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">仕様書</th>
-   <th scope="col">状態</th>
-   <th scope="col">備考</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{ SpecName('CSS3 Text Decoration', '#text-decoration-color-property', 'text-decoration-color') }}</td>
-   <td>{{ Spec2('CSS3 Text Decoration') }}</td>
-   <td>初回定義。 {{cssxref("text-decoration")}} プロパティが複数の関連するプロパティを定義する一括指定になりました。</td>
-  </tr>
- </tbody>
-</table>
+<h2 id="Specifications">仕様書</h2>
 
-<p>{{cssinfo}}</p>
+{{Specifications}}
 
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+<h2 id="Browser_compatibility">ブラウザーの互換性</h2>
 
-<p>{{Compat("css.properties.text-decoration-color")}}</p>
+<p>{{Compat}}</p>
 
-<h2 id="See_also" name="See_also">関連情報</h2>
+<h2 id="See_also">関連情報</h2>
 
 <ul>
  <li>複数の行内装飾プロパティを一度に設定するときは、代わりに一括指定の {{cssxref("text-decoration")}} プロパティを使った方が便利かもしれません。</li>
diff --git a/files/ja/web/css/text-emphasis-color/index.html b/files/ja/web/css/text-emphasis-color/index.html
index eabcc4c410..44da77376c 100644
--- a/files/ja/web/css/text-emphasis-color/index.html
+++ b/files/ja/web/css/text-emphasis-color/index.html
@@ -8,15 +8,19 @@ tags:
   - CSS プロパティ
   - HTML 色
   - Reference
-  - 文字列強調
+  - Styling HTML
+  - Text Emphasis
+  - 'recipe:css-property'
+  - text-decoration-color
+browser-compat: css.properties.text-emphasis-color
 translation_of: Web/CSS/text-emphasis-color
 ---
 <div>{{CSSRef}}</div>
 
-<p><span class="seoSummary"><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>text-emphasis-color</code></strong> プロパティは、圏点の色を設定します。この値は一括指定の {{cssxref("text-emphasis")}} を使用して設定することもできます。</span></p>
+<p><strong><code>text-emphasis-color</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、圏点の色を設定します。この値は一括指定の {{cssxref("text-emphasis")}} を使用して設定することもできます。</p>
 
 <pre class="brush:css no-line-numbers">/* 初期値 */
-text-emphasis-color: currentColor;
+text-emphasis-color: currentcolor;
 
 /* &lt;color&gt; */
 text-emphasis-color: #555;
@@ -27,68 +31,58 @@ text-emphasis-color: transparent;
 /* グローバル値 */
 text-emphasis-color: inherit;
 text-emphasis-color: initial;
+text-emphasis-color: revert;
 text-emphasis-color: unset;
 </pre>
 
-<p>{{cssinfo}}</p>
+<h2 id="Syntax">構文</h2>
 
-<h2 id="Syntax" name="Syntax">構文</h2>
-
-<h3 id="Values" name="Values">値</h3>
+<h3 id="Values">値</h3>
 
 <dl>
  <dt><code>&lt;color&gt;</code></dt>
- <dd>記号の色を定義します。 color が存在しない場合、既定で <code>currentColor</code> になります。</dd>
+ <dd>記号の色を定義します。 color が存在しない場合、既定で <code>currentcolor</code> になります。</dd>
 </dl>
 
-<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+<h2 id="Formal_definition">公式定義</h2>
+
+<p>{{CSSInfo}}</p>
+
+<h3 id="Formal_syntax">形式文法</h3>
 
 {{csssyntax}}
 
-<h2 id="Examples" name="Examples">例</h2>
+<h2 id="Examples">例</h2>
+
+<h3 id="Emphasis_with_a_color_and_custom_character">色と固有の文字で強調</h3>
 
-<h3 id="CSS">CSS</h3>
+<h4 id="CSS">CSS</h4>
 
-<pre class="brush: css">h3 {
-  text-emphasis-color: #555;
+<pre class="brush: css">em {
+  text-emphasis-color: green;
   text-emphasis-style: "*";
 }</pre>
 
-<h3 id="HTML">HTML</h3>
+<h4 id="HTML">HTML</h4>
 
 <pre class="brush: html">&lt;p&gt;Here's an example:&lt;/p&gt;
 
-&lt;h3&gt;This has emphasis marks!&lt;/h3&gt;
+&lt;em&gt;This has emphasis marks!&lt;/em&gt;
 </pre>
 
-<h3 id="Result" name="Result">結果</h3>
+<h4 id="Result">結果</h4>
 
-<p>{{EmbedLiveSample("Examples", 450, 100)}}</p>
+<p>{{EmbedLiveSample("Emphasis_with_a_color_and_custom_character", 450, 100)}}</p>
 
-<h2 id="Specifications" name="Specifications">仕様書</h2>
+<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('CSS3 Text Decoration', '#text-emphasis-color-property', 'text-emphasis')}}</td>
-   <td>{{Spec2('CSS3 Text Decoration')}}</td>
-   <td>初回定義</td>
-  </tr>
- </tbody>
-</table>
+{{Specifications}}
 
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
+<h2 id="Browser_compatibility">ブラウザーの互換性</h2>
 
-<p>{{Compat("css.properties.text-emphasis-color")}}</p>
+<p>{{Compat}}</p>
 
-<h2 id="See_also" name="See_also">関連情報</h2>
+<h2 id="See_also">関連情報</h2>
 
 <ul>
  <li>{{cssxref("&lt;color&gt;")}} データ型</li>
diff --git a/files/ja/web/css/text-emphasis/index.html b/files/ja/web/css/text-emphasis/index.html
index 8d838fe112..6d0ae6bf2c 100644
--- a/files/ja/web/css/text-emphasis/index.html
+++ b/files/ja/web/css/text-emphasis/index.html
@@ -14,21 +14,28 @@ translation_of: Web/CSS/text-emphasis
 ---
 <div>{{CSSRef}}</div>
 
-<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>text-emphasis</code></strong> プロパティは、 (空白や制御文字を除く) テキストに圏点を適用します。これは {{cssxref("text-emphasis-style")}} と {{cssxref("text-emphasis-color")}} の<a href="/ja/docs/Web/CSS/Shorthand_properties">一括指定</a>です。</p>
+<p><strong><code>text-emphasis</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、 (空白や制御文字を除く) テキストに圏点を適用します。これは {{cssxref("text-emphasis-style")}} と {{cssxref("text-emphasis-color")}} の<a href="/ja/docs/Web/CSS/Shorthand_properties">一括指定</a>です。</p>
 
 <div>{{EmbedInteractiveExample("pages/css/text-emphasis.html")}}</div>
 
-<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p>
-
 <p><code>text-emphasis</code> プロパティは、 {{cssxref("text-decoration")}} とは大きく異なります。 <code>text-decoration</code> プロパティは継承されず、指定される装飾は要素全体にわたって適用されます。しかし、 <code>text-emphasis</code> は継承されます。これは、子孫に対して圏点を変更できることを意味します。</p>
 
-<p>圏点の大きさは、ルビと同様にフォントの大きさの約50%であり、 <code>text-emphasis</code> は現在の行間隔が圏点を表示するのに十分でない場合、行の高さに影響を与えることがあります。</p>
+<p>圏点の大きさは、ルビと同様にフォントの大きさの約 50% であり、 <code>text-emphasis</code> は現在の行間隔が圏点を表示するのに十分でない場合、行の高さに影響を与えることがあります。</p>
 
 <div class="note">
-<p><code>text-emphasis</code> は、 {{cssxref("text-emphasis-position")}} の値をリセットしません。これは、圏点のスタイルと色がテキストで異なる場合に、圏点の位置を要求することがほとんど見込まれないためです。稀にこれを必要とする場合は、プロパティ {{cssxref("text-emphasis-position")}} を使用してください。</p>
+<p><code>text-emphasis</code> は、 {{cssxref("text-emphasis-position")}} の値をリセットしません。これは、圏点のスタイルと色がテキストで異なる場合に、圏点の位置を要求することがほとんど見込まれないためです。これを必要とするような珍しい場合は、プロパティ {{cssxref("text-emphasis-position")}} を使用してください。</p>
 </div>
 
-<h2 id="Syntax" name="Syntax">構文</h2>
+<h2 id="Constituent_properties">構成要素のプロパティ</h2>
+
+<p>このプロパティは以下のプロパティの一括指定です。</p>
+
+<ul>
+ <li><a href="/ja/docs/Web/CSS/text-emphasis-color"><code>text-emphasis-color</code></a></li>
+ <li><a href="/ja/docs/Web/CSS/text-emphasis-style"><code>text-emphasis-style</code></a></li>
+</ul>
+
+<h2 id="Syntax">構文</h2>
 
 <pre class="brush:css no-line-numbers">/* 初期値 */
 text-emphasis: none; /* 圏点なし */
@@ -38,7 +45,7 @@ text-emphasis: 'x';
 text-emphasis: '点';
 text-emphasis: '\25B2';
 text-emphasis: '*' #555;
-text-emphasis: 'foo'; /* 使用するべきではない。計算されるか 'f' のみが表示される */
+text-emphasis: 'foo'; /* 使用するべきではない。 'f' のみとして計算や表示が行われる */
 
 /* キーワード値 */
 text-emphasis: filled;
@@ -52,18 +59,19 @@ text-emphasis: filled sesame #555;
 /* グローバル値 */
 text-emphasis: inherit;
 text-emphasis: initial;
+text-emphasis: revert;
 text-emphasis: unset;
 </pre>
 
-<h3 id="Values" name="Values">値</h3>
+<h3 id="Values">値</h3>
 
 <dl>
  <dt><code>none</code></dt>
  <dd>圏点なし。</dd>
  <dt><code>filled</code></dt>
- <dd>図形は単色で塗りつぶされます。 <code>filled</code> も <code>open</code> も指定されない場合は、これが既定値です。</dd>
+ <dd>図形が単色で塗りつぶされます。 <code>filled</code> も <code>open</code> も指定されない場合は、これが既定値です。</dd>
  <dt><code>open</code></dt>
- <dd>図形は中抜きになります。</dd>
+ <dd>図形が中抜きになります。</dd>
  <dt><code>dot</code></dt>
  <dd>記号として小さな円を表示します。 filled dot は <code>'•'</code> (<code>U+2022</code>)、 open dot は <code>'◦'</code> (<code>U+25E6</code>) です。</dd>
  <dt><code>circle</code></dt>
@@ -75,18 +83,22 @@ text-emphasis: unset;
  <dt><code>sesame</code></dt>
  <dd>記号としてゴマを表示します。 filled sesame は <code>'﹅'</code> (<code>U+FE45</code>)、 open sesame は<code>'﹆'</code> (<code>U+FE46</code>) です。これは、他の図形が与えられていない場合、縦書きモードで既定の形状です。</dd>
  <dt><code>&lt;string&gt;</code></dt>
- <dd>記号として文字列を表示します。 <code>&lt;string&gt;</code> には1<em>文字</em>を超える文字列を指定しないでください。ユーザーエージェントは、1つより多い書記素クラスターから構成される文字列を短縮したり無視したりする可能性があります。</dd>
+ <dd>記号として文字列を表示します。 <code>&lt;string&gt;</code> には 1 <em>文字</em>を超える文字列を指定しないでください。ユーザーエージェントは、 1 つより多い書記素クラスターから構成される文字列を短縮したり無視したりする可能性があります。</dd>
  <dt><code>&lt;color&gt;</code></dt>
- <dd>記号の色を定義します。 color を指定しない場合、既定では <code>currentColor</code> です。</dd>
+ <dd>記号の色を定義します。 color を指定しない場合、既定では <code>currentcolor</code> です。</dd>
 </dl>
 
-<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+<h2 id="Formal_definition">公式定義</h2>
+
+<p>{{CSSInfo}}</p>
+
+<h2 id="Formal_syntax">形式文法</h2>
 
 {{csssyntax}}
 
-<h2 id="Examples" name="Examples">例</h2>
+<h2 id="Examples">例</h2>
 
-<h3 id="A_heading_with_emphasis_shape_and_color" name="A_heading_with_emphasis_shape_and_color">強調して色を付けた見出し</h3>
+<h3 id="A_heading_with_emphasis_shape_and_color">強調して色を付けた見出し</h3>
 
 <p>この例は、見出しの各文字に三角形の圏点を付けて描画します。</p>
 
@@ -100,36 +112,19 @@ text-emphasis: unset;
 
 <pre class="brush: html">&lt;h2&gt;これは重要です！&lt;/h2&gt;</pre>
 
-<h4 id="Result" name="Result">結果</h4>
+<h4 id="Result">結果</h4>
 
 <p>{{EmbedLiveSample("A_heading_with_emphasis_shape_and_color", 500, 70)}}</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('CSS3 Text Decoration', '#text-emphasis-property', 'text-emphasis')}}</td>
-   <td>{{Spec2('CSS3 Text Decoration')}}</td>
-   <td>初回定義</td>
-  </tr>
- </tbody>
-</table>
+<h2 id="Specifications">仕様書</h2>
 
-<p>{{cssinfo}}</p>
+{{Specifications}}
 
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
+<h2 id="Browser_compatibility">ブラウザーの互換性</h2>
 
-<p>{{Compat("css.properties.text-emphasis")}}</p>
+<p>{{Compat}}</p>
 
-<h2 id="See_also" name="See_also">関連情報</h2>
+<h2 id="See_also">関連情報</h2>
 
 <ul>
  <li>個別指定プロパティ: {{cssxref('text-emphasis-style')}}, {{cssxref('text-emphasis-color')}}</li>
diff --git a/files/ja/web/css/tools/index.html b/files/ja/web/css/tools/index.html
deleted file mode 100644
index fb51e9d15d..0000000000
--- a/files/ja/web/css/tools/index.html
+++ /dev/null
@@ -1,30 +0,0 @@
----
-title: ツール
-slug: Web/CSS/Tools
-tags:
-  - CSS
-  - Guide
-  - NeedsUpdate
-  - ガイド
-translation_of: Web/CSS/Tools
----
-<div></div>
-
-<p>CSS は強力な機能を多数提供していますが、その中には使いこなすのが面倒だったり、引数が多かったりするので、作業をしながら視覚化できると便利です。このページでは、これらの機能を使ってコンテンツのスタイルを整えるための CSS を構築するのに役立つ便利なツールへのリンクをいくつか紹介しています。</p>
-
-<p>{{LandingPageListSubpages}}</p>
-
-<h2 id="Other_tools" name="Other_tools">その他のツール</h2>
-
-<ul>
- <li>CSS アニメーション - <a href="http://jeremyckahn.github.io/stylie/">Stylie</a></li>
- <li>端末のディスプレイ情報を調べる ({{Glossary("responsive web design")}} で役立ちます) - <a href="http://mydevice.io">mydevice.io</a></li>
- <li>CSS メニュー - <a href="http://cssmenumaker.com/">cssmenumaker.com</a></li>
- <li>強力でモダンな CSS リンターで、一貫性のある規約を施行し、スタイルシートでのエラーを回避するのに役立ちます - <a href="https://stylelint.io/">stylelint</a></li>
-</ul>
-
-<h2 id="See_also" name="See_also">関連情報</h2>
-
-<ul>
- <li><a href="/ja/docs/Web/CSS">CSS</a></li>
-</ul>
diff --git a/files/ja/web/demos/index.html b/files/ja/web/demos/index.html
new file mode 100644
index 0000000000..c6feeaeeee
--- /dev/null
+++ b/files/ja/web/demos/index.html
@@ -0,0 +1,148 @@
+---
+title: オープン Web テクノロジーのデモ
+slug: Web/Demos
+translation_of: Web/Demos_of_open_web_technologies
+original_slug: Web/Demos_of_open_web_technologies
+---
+<p>Mozilla は、幅広い既存の Web テクノロジーをサポートし、それらを使用することを奨励しています。このページは、<a href="https://blog.mozilla.org/community/2015/12/18/saying-goodbye-to-demo-studio/">かつて</a> Demo Studio で人気のあったものも含め、技術のデモンストレーションを提供します。オープン Web テクノロジーのデモンストレーションやアプリケーションを知っている場合、適切なセクションにリンクを追加してください。</p>
+
+<h2 id="2D_Graphics">2D Graphics</h2>
+
+<h3 id="APNG" name="APNG">APNG</h3>
+
+<ul>
+ <li><a class="external" href="http://people.mozilla.com/~dolske/apng/demo.html">Justin's demo</a> (ローカルに保存すると動作します)</li>
+</ul>
+
+<h3 id="SVG" name="SVG">Canvas</h3>
+
+<ul>
+ <li><a class="external" href="http://www.blobsallad.se/">An interactive blob using javascript and canvas (fun)</a></li>
+ <li><a class="external" href="http://blobsallad.se/article/">Blob's demos</a></li>
+ <li><a class="external" href="http://glimr.rubyforge.org/cake/canvas.html">Canvas Animation Kit Experiment (CAKE)</a></li>
+ <li><a class="external" href="http://www.xs4all.nl/~peterned/3d/">Canvas3D &amp; Flickr</a></li>
+ <li><a class="external" href="http://arapehlivanian.com/wp-content/uploads/2007/02/canvas.html">Playing with Canvas</a></li>
+ <li><a class="external" href="http://langexplr.blogspot.com/2008/11/using-canvas-html-element.html">Using the Canvas Html element5</a></li>
+ <li><a class="external" href="/samples/raycaster/RayCaster.html" title="https://developer.mozilla.org/editor/fckeditor/core/editor/samples/raycaster/RayCaster.html">RayCaster</a></li>
+ <li><a class="external" href="http://jsmsxdemo.googlepages.com/jsmsx.html">MSX Emulator</a></li>
+ <li><a class="external" href="http://processingjs.org/exhibition/">processing.js</a></li>
+ <li><a class="external" href="http://glimr.rubyforge.org/cake/missile_fleet.html">Missile fleet</a></li>
+ <li><a class="external" href="http://glimr.rubyforge.org/cake/demos/fireworks2.6rt.html">FireWorks</a></li>
+ <li><a class="external" href="http://glimr.rubyforge.org/cake/demos/canvas_ash.html">Canvas ash1</a></li>
+ <li><a class="external" href="http://glimr.rubyforge.org/cake/demos/canvas_ash2.html">Canvas ash2</a></li>
+ <li><a class="external" href="http://glimr.rubyforge.org/cake/demos/canvas_ash8.html">Canvas ash8</a></li>
+ <li><a class="external" href="http://gyu.que.jp/jscloth/">3D on 2D Canvas</a></li>
+ <li><a href="http://viliusle.github.io/miniPaint/">miniPaint - Image editor </a>(<a href="https://github.com/viliusle/miniPaint">ソースコード</a>)</li>
+</ul>
+
+<h3 id="SVG" name="SVG">SVG</h3>
+
+<ul>
+ <li><a class="external" href="http://www.kde-look.org/CONTENT/content-files/19524-gearflowers.svg.gz">Gearflowers image</a> 忘れずにズームインしてください (ローカルに保存すると動作します)</li>
+ <li><a class="external" href="http://people.mozilla.com/~vladimir/demos/photos.svg">SVG photo demo</a> (ビジュアル効果とインタラクション)</li>
+ <li><a class="external" href="http://starkravingfinkle.org/projects/demo/svg-bubblemenu-in-html.xml">Bubblemenu</a> (ビジュアル効果とインタラクション)</li>
+ <li><a class="external" href="http://starkravingfinkle.org/blog/2007/07/firefox-3-svg-foreignobject/">HTML transformations</a> <code>foreignObject</code> を使用 (ビジュアル効果とインタラクション)</li>
+ <li><a class="external" href="http://svg-whiz.com/svg/linguistics/theCreepyMouth.svg">Phonetics Guide</a> (インタラクティブ)</li>
+ <li><a class="external" href="http://www.lutanho.net/svgvml3d/platonic.html">3D objects demo</a> (インタラクティブ)</li>
+ <li><a class="external" href="http://www.themaninblue.com/experiment/Blobular/">Blobular</a> (インタラクティブ)</li>
+ <li><a class="external" href="http://www.double.co.nz/video_test/video.svg">Video embedded in SVG</a> (または <a class="external" href="http://www.double.co.nz/video_test/video_svg.tar.bz2">ローカルにダウンロード</a>)</li>
+ <li><a href="http://summerstyle.github.io/summer/">Summer HTML image map creator</a> (<a href="https://github.com/summerstyle/summer">ソースコード</a>)</li>
+</ul>
+
+<h3 id="Video" name="Video">Video</h3>
+
+<ul>
+ <li><a class="external" href="http://www.double.co.nz/video_test/test1.html">Streaming Anime, Movie Trailer and Interview</a></li>
+ <li><a class="external" href="http://www.double.co.nz/video_test/test2.html">Billy's Browser Firefox Flick</a></li>
+ <li><a class="external" href="http://www.double.co.nz/video_test/test3.html">Virtual Barber Shop</a></li>
+ <li><a class="external" href="http://www.double.co.nz/video_test/test4.html">Transformers Movie Trailer</a></li>
+ <li><a class="external" href="http://www.double.co.nz/video_test/test5.html">A Scanner Darkly Movie Trailer</a> (組み込みコントロールを使用)</li>
+ <li><a class="external" href="http://www.double.co.nz/video_test/events.html">Events firing and volume control</a></li>
+ <li><a class="external" href="http://www.double.co.nz/video_test/video.svg">Dragable and sizable videos</a></li>
+</ul>
+
+<h2 id="3D_Graphics">3D Graphics</h2>
+
+<h3 id="WebGL">WebGL</h3>
+
+<ul>
+ <li><a href="http://ondras.github.io/fireworks-webgl/">Web Audio Fireworks</a></li>
+ <li><a href="https://dl.dropboxusercontent.com/u/62064441/ioquake3.js/ioquake3.html">IoQuake3</a> (<a href="https://github.com/klaussilveira/ioquake3.js">ソースコード</a>)</li>
+ <li><a href="http://micah.tech/demoscene/">Escher puzzle</a> (<a href="https://github.com/micahbolen/demoscene">ソースコード</a>)</li>
+ <li><a href="http://collinhover.github.io/kaiopua/">Kai 'Opua</a> (<a href="https://github.com/collinhover/kaiopua">ソースコード</a>)</li>
+</ul>
+
+<h3 id="Virtual_Reality">Virtual Reality</h3>
+
+<ul>
+ <li><a href="http://mozvr.com/demos/polarsea/">The Polar Sea</a> (<a href="https://github.com/MozVR/polarsea">ソースコード</a>)</li>
+ <li><a href="http://mozvr.github.io/sechelt/">Sechelt fly-through</a> (<a href="https://github.com/mozvr/sechelt">ソースコード</a>)</li>
+</ul>
+
+<h2 id="CSS">CSS</h2>
+
+<ul>
+ <li><a href="http://webdeveloperbareilly.in/blog/html5/responsive-contact-form-bootstrap.php">Responsive Contact Form</a></li>
+ <li><a href="http://felixniklas.com/paperfold/">Paperfold</a></li>
+ <li><a href="http://ondras.zarovi.cz/games/blockout/">CSS Blockout</a></li>
+ <li><a href="http://ondras.zarovi.cz/demos/rubik/">Rubik's cube</a></li>
+ <li><a href="http://ondras.zarovi.cz/demos/nojs/">Pure CSS Slides</a></li>
+ <li>Planetarium (<a href="https://github.com/littleworkshop/planetarium">ソースコード</a>)</li>
+ <li><a href="http://www.lesmoffat.co.uk/folio/forest/forest.html">CSS Paralax Forest</a></li>
+ <li><a href="http://webdeveloperbareilly.in/blog/css3/awesome-login-form.html">Awesome Login Page</a></li>
+ <li><a href="http://webdeveloperbareilly.in/blog/css3/onepage-scroll-template.html">CSS3 One Page Scroll</a></li>
+</ul>
+
+<h3 id="Transformations">Transformations</h3>
+
+<ul>
+ <li><a href="http://impress.github.io/impress.js">Impress.js</a> (<a href="https://github.com/impress/impress.js">ソースコード</a>)</li>
+</ul>
+
+<h2 id="Games">Games</h2>
+
+<ul>
+ <li><a href="https://dl.dropboxusercontent.com/u/62064441/ioquake3.js/ioquake3.html">IoQuake3</a> (<a href="https://github.com/klaussilveira/ioquake3.js">ソースコード</a>)</li>
+ <li><a href="http://collinhover.github.io/kaiopua/">Kai 'Opua</a> (<a href="https://github.com/collinhover/kaiopua">ソースコード</a>)</li>
+</ul>
+
+<h2 id="HTML">HTML</h2>
+
+<ul>
+ <li> <a href="http://zenphoton.com">Zen Photon Garden </a>(<a href="https://github.com/scanlime/zenphoton">ソースコード</a>)</li>
+ <li><a href="http://webdeveloperbareilly.in/blog/smo/html-meta-tags-for-social-media-optimization.html">HTML Meta Tags For SMO</a></li>
+</ul>
+
+<h2 id="Web_APIs">Web APIs</h2>
+
+<ul>
+</ul>
+
+<h3 id="Notifications_API">Notifications API</h3>
+
+<ul>
+ <li>HTML5 通知 (<a href="https://github.com/elfoxero/html5notifications">ソースコード</a>)</li>
+</ul>
+
+<ul>
+</ul>
+
+<h3 id="Web_Audio_API">Web Audio API</h3>
+
+<ul>
+ <li><a href="http://ondras.github.io/fireworks-webgl/">Web Audio Fireworks</a></li>
+ <li><a href="http://ondras.github.io/oscope/">oscope.js - JavaScript oscilloscope</a></li>
+ <li><a href="http://mdn.github.io/audio-buffer/">Audio Buffer demo</a> (<a href="http://mdn.github.io/audio-buffer/">ソースコード</a>)</li>
+ <li><a href="http://nipe-systems.de/webapps/html5-web-audio/">HTML5 Web Audio Showcase</a> (<a href="https://github.com/NIPE-SYSTEMS/html5-web-audio-showcase">ソースコード</a>)</li>
+ <li><a href="http://wayou.github.io/HTML5_Audio_Visualizer/">HTML5 Audio Visualizer</a> (<a href="https://github.com/Wayou/HTML5_Audio_Visualizer">ソースコード</a>)</li>
+ <li><a href="http://carlosrafaelgn.com.br/GraphicalFilterEditor/">Graphical Filter Editor and Visualizer</a> (<a href="https://github.com/carlosrafaelgn/GraphicalFilterEditor">ソースコード</a>)</li>
+</ul>
+
+<h3 id="Unclassified" name="Unclassified">Web Workers</h3>
+
+<ul>
+ <li><a href="http://ondras.zarovi.cz/demos/fractal/">Web Worker Fractals</a></li>
+ <li><a href="http://ondras.zarovi.cz/demos/photo/">Photo editor</a></li>
+ <li><a href="http://ondras.zarovi.cz/demos/coral/">Coral generator</a></li>
+ <li><a class="external" href="http://nerget.com/rayjs-mt/rayjs.html">Raytracer</a></li>
+</ul>
diff --git a/files/ja/web/demos_of_open_web_technologies/index.html b/files/ja/web/demos_of_open_web_technologies/index.html
deleted file mode 100644
index d41643d7b4..0000000000
--- a/files/ja/web/demos_of_open_web_technologies/index.html
+++ /dev/null
@@ -1,147 +0,0 @@
----
-title: オープン Web テクノロジーのデモ
-slug: Web/Demos_of_open_web_technologies
-translation_of: Web/Demos_of_open_web_technologies
----
-<p>Mozilla は、幅広い既存の Web テクノロジーをサポートし、それらを使用することを奨励しています。このページは、<a href="https://blog.mozilla.org/community/2015/12/18/saying-goodbye-to-demo-studio/">かつて</a> Demo Studio で人気のあったものも含め、技術のデモンストレーションを提供します。オープン Web テクノロジーのデモンストレーションやアプリケーションを知っている場合、適切なセクションにリンクを追加してください。</p>
-
-<h2 id="2D_Graphics">2D Graphics</h2>
-
-<h3 id="APNG" name="APNG">APNG</h3>
-
-<ul>
- <li><a class="external" href="http://people.mozilla.com/~dolske/apng/demo.html">Justin's demo</a> (ローカルに保存すると動作します)</li>
-</ul>
-
-<h3 id="SVG" name="SVG">Canvas</h3>
-
-<ul>
- <li><a class="external" href="http://www.blobsallad.se/">An interactive blob using javascript and canvas (fun)</a></li>
- <li><a class="external" href="http://blobsallad.se/article/">Blob's demos</a></li>
- <li><a class="external" href="http://glimr.rubyforge.org/cake/canvas.html">Canvas Animation Kit Experiment (CAKE)</a></li>
- <li><a class="external" href="http://www.xs4all.nl/~peterned/3d/">Canvas3D &amp; Flickr</a></li>
- <li><a class="external" href="http://arapehlivanian.com/wp-content/uploads/2007/02/canvas.html">Playing with Canvas</a></li>
- <li><a class="external" href="http://langexplr.blogspot.com/2008/11/using-canvas-html-element.html">Using the Canvas Html element5</a></li>
- <li><a class="external" href="/samples/raycaster/RayCaster.html" title="https://developer.mozilla.org/editor/fckeditor/core/editor/samples/raycaster/RayCaster.html">RayCaster</a></li>
- <li><a class="external" href="http://jsmsxdemo.googlepages.com/jsmsx.html">MSX Emulator</a></li>
- <li><a class="external" href="http://processingjs.org/exhibition/">processing.js</a></li>
- <li><a class="external" href="http://glimr.rubyforge.org/cake/missile_fleet.html">Missile fleet</a></li>
- <li><a class="external" href="http://glimr.rubyforge.org/cake/demos/fireworks2.6rt.html">FireWorks</a></li>
- <li><a class="external" href="http://glimr.rubyforge.org/cake/demos/canvas_ash.html">Canvas ash1</a></li>
- <li><a class="external" href="http://glimr.rubyforge.org/cake/demos/canvas_ash2.html">Canvas ash2</a></li>
- <li><a class="external" href="http://glimr.rubyforge.org/cake/demos/canvas_ash8.html">Canvas ash8</a></li>
- <li><a class="external" href="http://gyu.que.jp/jscloth/">3D on 2D Canvas</a></li>
- <li><a href="http://viliusle.github.io/miniPaint/">miniPaint - Image editor </a>(<a href="https://github.com/viliusle/miniPaint">ソースコード</a>)</li>
-</ul>
-
-<h3 id="SVG" name="SVG">SVG</h3>
-
-<ul>
- <li><a class="external" href="http://www.kde-look.org/CONTENT/content-files/19524-gearflowers.svg.gz">Gearflowers image</a> 忘れずにズームインしてください (ローカルに保存すると動作します)</li>
- <li><a class="external" href="http://people.mozilla.com/~vladimir/demos/photos.svg">SVG photo demo</a> (ビジュアル効果とインタラクション)</li>
- <li><a class="external" href="http://starkravingfinkle.org/projects/demo/svg-bubblemenu-in-html.xml">Bubblemenu</a> (ビジュアル効果とインタラクション)</li>
- <li><a class="external" href="http://starkravingfinkle.org/blog/2007/07/firefox-3-svg-foreignobject/">HTML transformations</a> <code>foreignObject</code> を使用 (ビジュアル効果とインタラクション)</li>
- <li><a class="external" href="http://svg-whiz.com/svg/linguistics/theCreepyMouth.svg">Phonetics Guide</a> (インタラクティブ)</li>
- <li><a class="external" href="http://www.lutanho.net/svgvml3d/platonic.html">3D objects demo</a> (インタラクティブ)</li>
- <li><a class="external" href="http://www.themaninblue.com/experiment/Blobular/">Blobular</a> (インタラクティブ)</li>
- <li><a class="external" href="http://www.double.co.nz/video_test/video.svg">Video embedded in SVG</a> (または <a class="external" href="http://www.double.co.nz/video_test/video_svg.tar.bz2">ローカルにダウンロード</a>)</li>
- <li><a href="http://summerstyle.github.io/summer/">Summer HTML image map creator</a> (<a href="https://github.com/summerstyle/summer">ソースコード</a>)</li>
-</ul>
-
-<h3 id="Video" name="Video">Video</h3>
-
-<ul>
- <li><a class="external" href="http://www.double.co.nz/video_test/test1.html">Streaming Anime, Movie Trailer and Interview</a></li>
- <li><a class="external" href="http://www.double.co.nz/video_test/test2.html">Billy's Browser Firefox Flick</a></li>
- <li><a class="external" href="http://www.double.co.nz/video_test/test3.html">Virtual Barber Shop</a></li>
- <li><a class="external" href="http://www.double.co.nz/video_test/test4.html">Transformers Movie Trailer</a></li>
- <li><a class="external" href="http://www.double.co.nz/video_test/test5.html">A Scanner Darkly Movie Trailer</a> (組み込みコントロールを使用)</li>
- <li><a class="external" href="http://www.double.co.nz/video_test/events.html">Events firing and volume control</a></li>
- <li><a class="external" href="http://www.double.co.nz/video_test/video.svg">Dragable and sizable videos</a></li>
-</ul>
-
-<h2 id="3D_Graphics">3D Graphics</h2>
-
-<h3 id="WebGL">WebGL</h3>
-
-<ul>
- <li><a href="http://ondras.github.io/fireworks-webgl/">Web Audio Fireworks</a></li>
- <li><a href="https://dl.dropboxusercontent.com/u/62064441/ioquake3.js/ioquake3.html">IoQuake3</a> (<a href="https://github.com/klaussilveira/ioquake3.js">ソースコード</a>)</li>
- <li><a href="http://micah.tech/demoscene/">Escher puzzle</a> (<a href="https://github.com/micahbolen/demoscene">ソースコード</a>)</li>
- <li><a href="http://collinhover.github.io/kaiopua/">Kai 'Opua</a> (<a href="https://github.com/collinhover/kaiopua">ソースコード</a>)</li>
-</ul>
-
-<h3 id="Virtual_Reality">Virtual Reality</h3>
-
-<ul>
- <li><a href="http://mozvr.com/demos/polarsea/">The Polar Sea</a> (<a href="https://github.com/MozVR/polarsea">ソースコード</a>)</li>
- <li><a href="http://mozvr.github.io/sechelt/">Sechelt fly-through</a> (<a href="https://github.com/mozvr/sechelt">ソースコード</a>)</li>
-</ul>
-
-<h2 id="CSS">CSS</h2>
-
-<ul>
- <li><a href="http://webdeveloperbareilly.in/blog/html5/responsive-contact-form-bootstrap.php">Responsive Contact Form</a></li>
- <li><a href="http://felixniklas.com/paperfold/">Paperfold</a></li>
- <li><a href="http://ondras.zarovi.cz/games/blockout/">CSS Blockout</a></li>
- <li><a href="http://ondras.zarovi.cz/demos/rubik/">Rubik's cube</a></li>
- <li><a href="http://ondras.zarovi.cz/demos/nojs/">Pure CSS Slides</a></li>
- <li>Planetarium (<a href="https://github.com/littleworkshop/planetarium">ソースコード</a>)</li>
- <li><a href="http://www.lesmoffat.co.uk/folio/forest/forest.html">CSS Paralax Forest</a></li>
- <li><a href="http://webdeveloperbareilly.in/blog/css3/awesome-login-form.html">Awesome Login Page</a></li>
- <li><a href="http://webdeveloperbareilly.in/blog/css3/onepage-scroll-template.html">CSS3 One Page Scroll</a></li>
-</ul>
-
-<h3 id="Transformations">Transformations</h3>
-
-<ul>
- <li><a href="http://impress.github.io/impress.js">Impress.js</a> (<a href="https://github.com/impress/impress.js">ソースコード</a>)</li>
-</ul>
-
-<h2 id="Games">Games</h2>
-
-<ul>
- <li><a href="https://dl.dropboxusercontent.com/u/62064441/ioquake3.js/ioquake3.html">IoQuake3</a> (<a href="https://github.com/klaussilveira/ioquake3.js">ソースコード</a>)</li>
- <li><a href="http://collinhover.github.io/kaiopua/">Kai 'Opua</a> (<a href="https://github.com/collinhover/kaiopua">ソースコード</a>)</li>
-</ul>
-
-<h2 id="HTML">HTML</h2>
-
-<ul>
- <li> <a href="http://zenphoton.com">Zen Photon Garden </a>(<a href="https://github.com/scanlime/zenphoton">ソースコード</a>)</li>
- <li><a href="http://webdeveloperbareilly.in/blog/smo/html-meta-tags-for-social-media-optimization.html">HTML Meta Tags For SMO</a></li>
-</ul>
-
-<h2 id="Web_APIs">Web APIs</h2>
-
-<ul>
-</ul>
-
-<h3 id="Notifications_API">Notifications API</h3>
-
-<ul>
- <li>HTML5 通知 (<a href="https://github.com/elfoxero/html5notifications">ソースコード</a>)</li>
-</ul>
-
-<ul>
-</ul>
-
-<h3 id="Web_Audio_API">Web Audio API</h3>
-
-<ul>
- <li><a href="http://ondras.github.io/fireworks-webgl/">Web Audio Fireworks</a></li>
- <li><a href="http://ondras.github.io/oscope/">oscope.js - JavaScript oscilloscope</a></li>
- <li><a href="http://mdn.github.io/audio-buffer/">Audio Buffer demo</a> (<a href="http://mdn.github.io/audio-buffer/">ソースコード</a>)</li>
- <li><a href="http://nipe-systems.de/webapps/html5-web-audio/">HTML5 Web Audio Showcase</a> (<a href="https://github.com/NIPE-SYSTEMS/html5-web-audio-showcase">ソースコード</a>)</li>
- <li><a href="http://wayou.github.io/HTML5_Audio_Visualizer/">HTML5 Audio Visualizer</a> (<a href="https://github.com/Wayou/HTML5_Audio_Visualizer">ソースコード</a>)</li>
- <li><a href="http://carlosrafaelgn.com.br/GraphicalFilterEditor/">Graphical Filter Editor and Visualizer</a> (<a href="https://github.com/carlosrafaelgn/GraphicalFilterEditor">ソースコード</a>)</li>
-</ul>
-
-<h3 id="Unclassified" name="Unclassified">Web Workers</h3>
-
-<ul>
- <li><a href="http://ondras.zarovi.cz/demos/fractal/">Web Worker Fractals</a></li>
- <li><a href="http://ondras.zarovi.cz/demos/photo/">Photo editor</a></li>
- <li><a href="http://ondras.zarovi.cz/demos/coral/">Coral generator</a></li>
- <li><a class="external" href="http://nerget.com/rayjs-mt/rayjs.html">Raytracer</a></li>
-</ul>
diff --git a/files/ja/web/exslt/index.html b/files/ja/web/exslt/index.html
index fde3c0c0c4..f3a787e9f5 100644
--- a/files/ja/web/exslt/index.html
+++ b/files/ja/web/exslt/index.html
@@ -10,7 +10,7 @@ translation_of: Web/EXSLT
 <p>{{XSLTRef}}</p>
 
 <div>
-<section id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li><strong><a href="https://developer.mozilla.org/en-US/docs/Web/XSLT">XSLT</a></strong></li>
  <li><strong><a href="https://developer.mozilla.org/en-US/docs/Web/EXSLT">EXSLT</a></strong></li>
diff --git a/files/ja/web/guide/css/getting_started/challenge_solutions/index.html b/files/ja/web/guide/css/getting_started/challenge_solutions/index.html
index df62dacd38..a3825b30aa 100644
--- a/files/ja/web/guide/css/getting_started/challenge_solutions/index.html
+++ b/files/ja/web/guide/css/getting_started/challenge_solutions/index.html
@@ -3,7 +3,7 @@ title: Challenge solutions
 slug: Web/Guide/CSS/Getting_started/Challenge_solutions
 translation_of: Web/Guide/CSS/Getting_started/Challenge_solutions
 ---
-<p>このページは、 <a href="/ja/CSS/Getting_Started" title="ja/CSS/Getting Started">CSS Getting Started</a> チュートリアルにあるチャレンジの解答例です。これ以外の解答も考えられます。以下の章名はチュートリアルページのタイトルと一致します。</p>
+<p>このページは、 <a href="/ja/CSS/Getting_Started">CSS Getting Started</a> チュートリアルにあるチャレンジの解答例です。これ以外の解答も考えられます。以下の章名はチュートリアルページのタイトルと一致します。</p>
 <h2 id="CSS_をなぜ用いるか"><a href="/ja/CSS/Getting_Started/Why_use_CSS" id="Why_use_CSS_Colors" title="MDC">CSS をなぜ用いるか</a></h2>
 <h3 id="Colors">Colors</h3>
 <dl>
@@ -16,7 +16,7 @@ translation_of: Web/Guide/CSS/Getting_started/Challenge_solutions
  <dt>
   Solution</dt>
  <dd>
-  CSS supports common color names like <code>orange</code>, <code>yellow</code>, <code>blue</code>, <code>green</code>, or <code>black</code>. It also supports some more exotic color names like <code>chartreuse</code>, <code>fuschia</code>, or <code>burlywood</code>. See <a href="/ja/CSS/color_value" title="ja/CSS/color value">CSS Color value</a> for a complete list as well as other ways of specifying colors.</dd>
+  CSS supports common color names like <code>orange</code>, <code>yellow</code>, <code>blue</code>, <code>green</code>, or <code>black</code>. It also supports some more exotic color names like <code>chartreuse</code>, <code>fuschia</code>, or <code>burlywood</code>. See <a href="/ja/CSS/color_value">CSS Color value</a> for a complete list as well as other ways of specifying colors.</dd>
 </dl>
 <h2 id="どのように_CSS_は動作するのか"><a href="/ja/CSS/Getting_Started/How_CSS_works" id="How_CSS_works_DOM_inspector" title="MDC">どのように CSS は動作するのか</a></h2>
 <h3 id="DOM_inspector">DOM inspector</h3>
@@ -244,7 +244,7 @@ h3:before {
 } </pre>
  </dd>
 </dl>
-<h2 id="表"><a href="/ja/CSS/Getting_Started/Tables" id="Tables" title="ja/CSS/Getting_Started/Tables">表</a></h2>
+<h2 id="表"><a href="/ja/CSS/Getting_Started/Tables" id="Tables">表</a></h2>
 <h3 id="Borders_on_data_cells_only">Borders on data cells only</h3>
 <dl>
  <dt>
diff --git a/files/ja/web/guide/houdini/index.html b/files/ja/web/guide/houdini/index.html
new file mode 100644
index 0000000000..ab81169cda
--- /dev/null
+++ b/files/ja/web/guide/houdini/index.html
@@ -0,0 +1,94 @@
+---
+title: CSS Houdini
+slug: Web/Guide/Houdini
+tags:
+  - API
+  - CSS
+  - Houdini
+  - JavaScript
+  - Landing
+  - Web
+translation_of: Web/Houdini
+original_slug: Web/Houdini
+---
+<p>Houdini は、CSS エンジンの一部を公開する低レベル API のセットであり、開発者はブラウザーのレンダリングエンジンのスタイリングおよびレイアウトプロセスにフックすることで CSS を拡張できます。 Houdini は、開発者が <a href="/ja/docs/Web/API/CSS_Object_Model">CSS オブジェクトモデル</a>（CSSOM）に直接アクセスできるようにする API のグループです。 開発者は、ブラウザーが CSS として解析できるコードを記述できるため、ブラウザーにネイティブに実装されるのを待たずに新しい CSS 機能を作成できます。</p>
+
+<h2 id="Houdini_の利点">Houdini の利点</h2>
+
+<p>Houdini は、スタイルの変更に JavaScript の .<code><a href="/ja/docs/Web/API/HTMLElement/style">style</a></code> を使用するよりも高速な解析時間を可能にします。 ブラウザーは、スクリプトで見つかったスタイルの更新を適用する前に、CSSOM（レイアウト、ペイント、合成のプロセスを含む）を解析します。 さらに、JavaScript スタイルの更新のために、レイアウト、ペイント、および合成のプロセスが繰り返されます。 Houdini のコードは、最初のレンダリングサイクルが完了するまで待機しません。 むしろ、それは最初のサイクルに含まれ、レンダリング可能で理解可能なスタイルを作成します。 Houdini は、JavaScript で CSS 値を操作するためのオブジェクトベースの API を提供します。</p>
+
+<p>Houdini の CSS Typed OM は、型とメソッドを備えた CSS オブジェクトモデルであり、値を JavaScript オブジェクトとして公開し、以前の文字列ベースの <code><a href="/ja/docs/Web/API/HTMLElement/style">HTMLElement.style</a></code> 操作よりも直感的な CSS 操作を実現します。 すべての要素とスタイルシートのルールには、<code><a href="/ja/docs/Web/API/StylePropertyMap">StylePropertyMap</a></code> を介してアクセスできるスタイルマップがあります。</p>
+
+<p>CSS Houdini の機能の1つはワークレット（<a href="/ja/docs/Web/API/Worklet">Worklet</a>）です。 ワークレットを使用すると、モジュール方式の CSS を作成できます。 構成可能なコンポーネントをインポートするには、次の JavaScript の1行が必要です。 プリプロセッサー、ポストプロセッサー、JavaScript フレームワークは必要ありません。</p>
+
+<pre class="brush: js notranslate">&lt;script&gt;
+  CSS.paintWorklet.addModule('csscomponent.js');
+&lt;/script&gt;
+</pre>
+
+<p>この追加されたモジュールには、完全に構成可能なワークレットを登録する <code><a href="/ja/docs/Web/API/PaintWorklet/registerPaint">registerPaint()</a></code> 関数が含まれています。</p>
+
+<p>CSS の <code>paint()</code> 関数のパラメーターには、オプションのパラメーターとともに、ワークレットの名前が含まれます。 ワークレットは要素のカスタムプロパティにもアクセスできます。 これらは関数の引数として渡す必要はありません。</p>
+
+<pre class="brush: css notranslate">li {
+	background-image: paint(myComponent, stroke, 10px);
+    --highlights: blue;
+    --lowlights: green;
+}</pre>
+
+<div class="blockIndicator note">
+<p><strong>注</strong>: 大きな力には大きな責任が伴います。 Houdini を使用すると、独自の石積み（masonry）、グリッド、またはリージョンの実装を発明できますが、そうすることが必ずしも最良の考えであるとは限りません。 CSS ワーキンググループは、すべての機能が確実に実行され、すべてのエッジケースを処理し、セキュリティ、プライバシー、およびアクセシビリティを考慮するために多くの作業を行います。 Houdini で CSS を拡張するときは、これらの考慮事項を念頭に置き、より野心的なプロジェクトに進む前に、まずは小さいものから始めてください。</p>
+</div>
+
+<h2 class="Documentation" id="Houdini_の_API">Houdini の API</h2>
+
+<p>以下に、Houdini の傘下にある API をカバーするメインリファレンスページへのリンクと、それらの使用方法を学習する際にガイダンスが必要な場合に役立つガイドへのリンクを示します。</p>
+
+<div class="hidden">
+<p>Start by reading <a href="/ja/docs/Web/Houdini/learn">Houdini, an introduction</a> — this provides a brief history of Houdini and an overview of its many features.</p>
+</div>
+
+<dl>
+ <dt>CSS Parser API</dt>
+ <dd>任意の CSS のような言語を穏やかに型付けされた表現に解析するために、CSS パーサーをより直接的に公開する API。<br>
+ <br>
+ この API のガイドやリファレンスは現在書かれていません。</dd>
+ <dt>CSS Properties and Values API </dt>
+ <dd>新しい CSS プロパティを登録するための API を定義します。 この API を使用して登録したプロパティには、型、継承の振る舞い、および初期値を定義する解析構文が提供されます。<br>
+ <br>
+ <a href="/ja/docs/Web/API/CSS_Properties_and_Values_API">CSS Properties and Values API リファレンス</a><br>
+ <a href="/ja/docs/Web/API/CSS_Properties_and_Values_API/guide">CSS Properties and Values API ガイド</a></dd>
+ <dt></dt>
+ <dt>CSS Typed OM</dt>
+ <dd>CSSOM 値の文字列を意味のある型の JavaScript 表現に変換したり、元に戻したりすると、パフォーマンスのオーバーヘッドが大幅に増加する可能性があります。 CSS Typed OM は、CSS 値を型付き JavaScript オブジェクトとして公開し、パフォーマンスの高い操作を可能にします。<br>
+ <br>
+ <a href="/ja/docs/Web/API/CSS_Typed_OM_API">CSS Typed OM リファレンス</a><br>
+ <a href="/ja/docs/Web/API/CSS_Typed_OM_API/Guide">CSS Typed OM ガイド</a></dd>
+ <dt>CSS Layout API </dt>
+ <dd>
+ <p>CSS の拡張性を改善するように設計されたこの API は、開発者が石積みやラインスナップなどの独自のレイアウトアルゴリズムを作成できるようにします。 まだネイティブでは利用できません。<br>
+  <br>
+  この API のガイドやリファレンスは現在書かれていません。</p>
+ </dd>
+ <dt>CSS Painting API</dt>
+ <dd>
+ <p>CSS の拡張性を向上させるために開発 — 開発者が <code>paint()</code> CSS 関数を介して要素の背景、境界線、またはコンテンツに直接描画できる JavaScript 関数を記述できるようにします。<br>
+  <br>
+  <a href="/ja/docs/Web/API/CSS_Painting_API">CSS Painting API リファレンス</a><br>
+  <a href="/ja/docs/Web/API/CSS_Painting_API/ガイド">CSS Painting API ガイド</a></p>
+ </dd>
+ <dt>Worklets </dt>
+ <dd>
+ <p>メインの JavaScript 実行環境から独立した、レンダリングパイプラインのさまざまな段階でスクリプトを実行するための API。 ワークレットは概念的には <a href="/ja/docs/Web/API/Web_Workers_API/Using_web_workers">Web Workers</a> に似ており、レンダリングエンジンによって呼び出され、レンダリングエンジンを拡張します。<br>
+  <br>
+  <a href="/ja/docs/Web/API/Worklet">Worklets リファレンス</a></p>
+ </dd>
+</dl>
+
+<h2 id="その他のトピック">その他のトピック</h2>
+
+<p>興味深い方法で Houdini API と連携して使用できるため、興味深い関連トピック。</p>
+
+<dl>
+ <dt>合成スクロールとアニメーション</dt>
+</dl>
diff --git a/files/ja/web/guide/html/constraint_validation/index.html b/files/ja/web/guide/html/constraint_validation/index.html
new file mode 100644
index 0000000000..5af2e0fe58
--- /dev/null
+++ b/files/ja/web/guide/html/constraint_validation/index.html
@@ -0,0 +1,330 @@
+---
+title: 制約検証
+slug: Web/Guide/HTML/Constraint_validation
+tags:
+  - CSS
+  - Guide
+  - HTML5
+  - NeedsContent
+  - Selectors
+translation_of: Web/Guide/HTML/Constraint_validation
+original_slug: Web/Guide/HTML/HTML5/Constraint_validation
+---
+<p>ウェブフォームの作成は常に複雑な作業でした。フォーム自体をマークアップすること自体は簡単ですが、それぞれの入力欄が妥当で一貫しているかどうかをチェックすることはもっと難しく、問題をユーザーに伝えることは頭痛がするかもしれません。<a href="/ja/docs/Web/Guide/HTML/HTML5">HTML5</a> では、フォームに新しい仕組みが導入されました。{{ HTMLElement("input") }} 要素に意味を持つ新しい型と、クライアント側でフォームの内容をチェックする作業を簡単にする<em>制約検証</em>が追加されました。基本的な、よくある制約は、JavaScript を必要とせずに、新しい属性を設定することでチェックできます。もっと複雑な制約は<a href="/ja/docs/Web/API/Constraint_validation">制約検証 API</a> を使用して検査することができます。</p>
+
+<p>これらの概念の基本的な入門 (サンプル付き) は、<a href="/ja/docs/Learn/HTML/Forms/Form_validation">フォーム検証チュートリアル</a>をご覧ください。</p>
+
+<div class="note"><strong>メモ:</strong> HTML5 の制約検証は、<em>サーバー側</em>での検証の必要性をなくす訳ではありません。不正なフォームのリクエストは減少することが期待されるものの、不正なリクエストはまだ互換性のないブラウザー（例えば、HTML5 や JavaScript に対応していないブラウザー）から送られたり、ウェブアプリケーションをだまそうとする悪意のある人から送られたりする可能性があります。従って、HTML4 の時と同様、クライアント側で行われている検証と一貫性のある方法で、サーバー側でも入力の制約を検証する必要があります。</div>
+
+<h2 id="Intrinsic_and_basic_constraints" name="Intrinsic_and_basic_constraints">組込みの基本的な制約</h2>
+
+<p>HTML5 では、基本的な制約は 2通りの方法で定義されます。</p>
+
+<ul>
+ <li>{{ HTMLElement("input") }} 要素の {{ htmlattrxref("type", "input") }} 属性に意味的に最も適切な値を選択することで、例えば <code>email</code> を選択することで、値が妥当なメールアドレスであるかどうかをチェックする制約が自動的に作成されます。</li>
+ <li>検証関連属性を設定することで、基本的な制約を簡単な方法で、JavaScript の必要なく記述できます。</li>
+</ul>
+
+<h3 id="意味を持つ入力型">意味を持つ入力型</h3>
+
+<p>{{ htmlattrxref("type", "input") }} 属性の組込み制約は次の通りです。</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">入力型</th>
+   <th scope="col">制約の説明</th>
+   <th scope="col">関連付けられた違反</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code><a href="/ja/docs/Web/HTML/Element/input/url">&lt;input type="URL"&gt;</a></code></td>
+   <td>値は絶対 <a href="/ja/docs/Learn/Common_questions/What_is_a_URL">URL</a> であり、<a href="https://url.spec.whatwg.org/">URL Living Standard</a> で定義された通りでなければなりません。</td>
+   <td><strong><a href="/ja/docs/Web/API/ValidityState/typeMismatch">TypeMismatch</a></strong> 制約違反</td>
+  </tr>
+  <tr>
+   <td><code><a href="/ja/docs/Web/HTML/Element/input/email">&lt;input type="email"&gt;</a></code></td>
+   <td>値は統語的に妥当なメールアドレス、ふつうは <code><var>username</var>@<var>hostname</var>.<var>tld</var></code> の書式でなければなりません。</td>
+   <td><strong><a href="/ja/docs/Web/API/ValidityState/typeMismatch">TypeMismatch</a></strong> 制約違反</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>これらの入力型のどちらでも、{{ htmlattrxref("multiple", "input") }} 属性が設定されていたら、この入力欄にカンマ区切りのリストで複数の値を設定することができます。これらの中でここで書かれた条件に満足しないものがある場合、<strong>Type mismatch</strong> 制約違反が発生します。</p>
+
+<p>なお、ほとんどの入力型には組込み制約がありません。制約検証によって防ぐことができたり、既定で不正な値を妥当な値に変換する無害化アルゴリズムがあったりするためです。</p>
+
+<h3 id="Validation-related_attributes" name="Validation-related_attributes">検証関連属性</h3>
+
+<p>上記で述べた <code>type</code> 属性に加えて、下記の要素が基本的な制約を記述するのに使われます。</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">属性</th>
+   <th scope="col">属性をサポートする入力タイプ</th>
+   <th scope="col">とりうる値</th>
+   <th scope="col">制約の説明</th>
+   <th scope="col">関連する違反</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code><a href="/ja/docs/Web/HTML/Attributes/pattern">pattern</a></code></td>
+   <td><code>text</code>, <code>search</code>, <code>url</code>, <code>tel</code>, <code>email</code>, <code>password</code></td>
+   <td><a href="/ja/docs/Web/JavaScript/Guide/Regular_Expressions">JavaScript 正規表現</a> (<a class="external" href="http://www.ecma-international.org/publications/standards/Ecma-262.htm">ECMAScript 5</a> <code>global</code>, <code>ignoreCase</code> と <code>multiline</code> フラグが<em>無効で</em>コンパイルされたもの)</td>
+   <td>値はパターンに一致する必要があります。</td>
+   <td><code><strong><a href="/ja/docs/Web/API/ValidityState/patternMismatch">patternMismatch</a></strong></code> 制約違反</td>
+  </tr>
+  <tr>
+   <td rowspan="3"><code><a href="/ja/docs/Web/HTML/Attributes/min">min</a></code></td>
+   <td><code>range</code>, <code>number</code></td>
+   <td>有効な数値</td>
+   <td rowspan="3">値以上であること。</td>
+   <td rowspan="3"><strong><code><a href="/ja/docs/Web/API/ValidityState/rangeUnderflow">rangeUnderflow</a></code></strong> 制約違反</td>
+  </tr>
+  <tr>
+   <td><code>date</code>, <code>month</code>, <code>week</code></td>
+   <td>有効な日付</td>
+  </tr>
+  <tr>
+   <td><code>datetime</code>, <code>datetime-local</code>, <code>time</code></td>
+   <td>有効な日付と時刻</td>
+  </tr>
+  <tr>
+   <td rowspan="3"><code><a href="/ja/docs/Web/HTML/Attributes/max">max</a></code></td>
+   <td><code>range</code>, <code>number</code></td>
+   <td>有効な数値</td>
+   <td rowspan="3">値以下であること。</td>
+   <td rowspan="3"><strong><code><a href="/ja/docs/Web/API/ValidityState/rangeOverflow">rangeOverflow</a></code></strong> 制約違反</td>
+  </tr>
+  <tr>
+   <td><code>date</code>, <code>month</code>, <code>week</code></td>
+   <td>有効な日付</td>
+  </tr>
+  <tr>
+   <td><code>datetime</code>, <code>datetime-local</code>, <code>time</code></td>
+   <td>有効な日付と時刻</td>
+  </tr>
+  <tr>
+   <td><code><a href="/ja/docs/Web/HTML/Attributes/required">required</a></code></td>
+   <td><code>text</code>, <code>search</code>, <code>url</code>, <code>tel</code>, <code>email</code>, <code>password</code>, <code>date</code>, <code>datetime</code>, <code>datetime-local</code>, <code>month</code>, <code>week</code>, <code>time</code>, <code>number</code>, <code>checkbox</code>, <code>radio</code>, <code>file</code>; {{ HTMLElement("select") }} と {{ HTMLElement("textarea") }} 要素にも。</td>
+   <td><em>none</em> Boolean 属性のため: 存在すれば <em>true</em>, 存在しなければ <em>false</em></td>
+   <td>値は必須 (セットされた場合)。</td>
+   <td><strong><code><a href="/ja/docs/Web/API/ValidityState/valueMissing">valueMissing</a></code></strong> 制約違反</td>
+  </tr>
+  <tr>
+   <td rowspan="5"><code><a href="/ja/docs/Web/HTML/Attributes/step">step</a></code></td>
+   <td><code>date</code></td>
+   <td>日の整数値</td>
+   <td rowspan="5">step がリテラル値 <code>any</code> にセットされていない場合、値は <strong>min</strong> + step の整数倍</td>
+   <td rowspan="5"><strong><code><a href="/ja/docs/Web/API/ValidityState/stepMismatch">stepMismatch</a></code></strong> 制約違反</td>
+  </tr>
+  <tr>
+   <td><code>month</code></td>
+   <td>月の整数値</td>
+  </tr>
+  <tr>
+   <td><code>week</code></td>
+   <td>週の整数値</td>
+  </tr>
+  <tr>
+   <td><code>datetime</code>, <code>datetime-local</code>, <code>time</code></td>
+   <td>秒の整数値</td>
+  </tr>
+  <tr>
+   <td><code>range</code>, <code>number</code></td>
+   <td>整数値</td>
+  </tr>
+  <tr>
+   <td><code><a href="/ja/docs/Web/HTML/Attributes/minlength">minlength</a></code></td>
+   <td><code>text</code>, <code>search</code>, <code>url</code>, <code>tel</code>, <code>email</code>, <code>password</code>; と {{ HTMLElement("textarea") }} 要素</td>
+   <td>整数長</td>
+   <td>文字列数 (code points) は、空でない場合は属性値より少なくならない。{{ HTMLElement("textarea") }}では改行はすべて 1 つの文字に正規化される (CRLF の組と対象的に)。</td>
+   <td><strong><code><a href="/ja/docs/Web/API/ValidityState/tooShort">tooShort</a></code></strong> 制約違反</td>
+  </tr>
+  <tr>
+   <td><code><a href="/ja/docs/Web/HTML/Attributes/maxlength">maxlength</a></code></td>
+   <td><code>text</code>, <code>search</code>, <code>url</code>, <code>tel</code>, <code>email</code>, <code>password</code>; と {{ HTMLElement("textarea") }} 要素</td>
+   <td>整数長</td>
+   <td>文字列数 (code points) は属性値を超えない。</td>
+   <td><strong><code><a href="/ja/docs/Web/API/ValidityState/tooLong">tooLong</a></code></strong> 制約違反</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Constraint_validation_process" name="Constraint_validation_process">制約検証プロセス</h2>
+
+<p>Constraint validation is done through the Constraint Validation API either on a single form element or at the form level, on the {{ HTMLElement("form") }} element itself. The constraint validation is done in the following ways:</p>
+
+<ul>
+ <li>By a call to the <code>checkValidity()</code> or <code>reportValidity()</code> method of a form-associated DOM interface, (<code><a href="/ja/docs/Web/API/HTMLInputElement">HTMLInputElement</a></code>, <code><a href="/ja/docs/Web/API/HTMLSelectElement">HTMLSelectElement</a></code>, <code><a href="/ja/docs/Web/API/HTMLButtonElement">HTMLButtonElement</a></code>, <code><a href="/ja/docs/Web/API/HTMLOutputElement">HTMLOutputElement</a></code> or <code><a href="/ja/docs/Web/API/HTMLTextAreaElement">HTMLTextAreaElement</a></code>), which evaluates the constraints only on this element, allowing a script to get this information. The <code>checkValidity()</code> method returns a Boolean indicating whether the element's value passes its constraints. (This is typically done by the user-agent when determining which of the CSS pseudo-classes, {{ Cssxref(":valid") }} or {{ Cssxref(":invalid") }}, applies.) In contrast, the <code>reportValidity()</code> method reports any constraint failures to the user.</li>
+ <li>By a call to the <code>checkValidity()</code> or <code>reportValidity()</code> method on the <code><a href="/ja/docs/Web/API/HTMLFormElement">HTMLFormElement</a></code> interface.</li>
+ <li>By submitting the form itself.</li>
+</ul>
+
+<p>Calling <code>checkValidity()</code> is called <em>statically</em> validating the constraints, while calling <code>reportValidity()</code> or submitting the form is called <em>interactively</em> validating the constraints.</p>
+
+<div class="note"><strong>Note: </strong>
+
+<ul>
+ <li>If the {{ htmlattrxref("novalidate", "form") }} attribute is set on the {{ HTMLElement("form") }} element, interactive validation of the constraints doesn't happen.</li>
+ <li>Calling the <code>submit()</code> method on the <code><a href="/en/DOM/HTMLFormElement">HTMLFormElement</a></code> interface doesn't trigger a constraint validation. In other words, this method sends the form data to the server even if doesn't satisfy the constraints. Call the <code>click()</code> method on a submit button instead.</li>
+</ul>
+</div>
+
+<h2 id="Complex_constraints_using_HTML5_Constraint_API" name="Complex_constraints_using_HTML5_Constraint_API">HTML5 制約 API を使用した複雑な制約</h2>
+
+<p>Using JavaScript and the Constraint API, it is possible to implement more complex constraints, 例えば、constraints combining several fields, or constraints involving complex calculations.</p>
+
+<p>Basically, the idea is to trigger JavaScript on some form field event (like <strong>onchange</strong>) to calculate whether the constraint is violated, and then to use the method <code><em>field</em>.setCustomValidity()</code> to set the result of the validation: an empty string means the constraint is satisfied, and any other string means there is an error and this string is the error message to display to the user.</p>
+
+<h3 id="Constraint_combining_several_fields_Postal_code_validation" name="Constraint_combining_several_fields_Postal_code_validation">Constraint combining several fields: Postal code validation</h3>
+
+<p>The postal code format varies from one country to another. Not only do most countries allow an optional prefix with the country code (like <code>D-</code> in Germany, <code>F- </code> in France or Switzerland), but some countries have postal codes with only a fixed number of digits; others, like the UK, have more complex structures, allowing letters at some specific positions.</p>
+
+<div class="note">
+<p><strong>注:</strong> This is not a comprehensive postal code validation library, but rather a demonstration of the key concepts.</p>
+</div>
+
+<p>As an example, we will add a script checking the constraint validation for this simple form:</p>
+
+<pre class="brush: html notranslate">&lt;form&gt;
+    &lt;label for="ZIP"&gt;ZIP : &lt;/label&gt;
+    &lt;input type="text" id="ZIP"&gt;
+    &lt;label for="Country"&gt;Country : &lt;/label&gt;
+    &lt;select id="Country"&gt;
+      &lt;option value="ch"&gt;Switzerland&lt;/option&gt;
+      &lt;option value="fr"&gt;France&lt;/option&gt;
+      &lt;option value="de"&gt;Germany&lt;/option&gt;
+      &lt;option value="nl"&gt;The Netherlands&lt;/option&gt;
+    &lt;/select&gt;
+    &lt;input type="submit" value="Validate"&gt;
+&lt;/form&gt;</pre>
+
+<p>This displays the following form:</p>
+
+<p>{{EmbedLiveSample("Constraint_combining_several_fields_Postal_code_validation")}}</p>
+
+<p>First, we write a function checking the constraint itself:</p>
+
+<pre class="brush: js notranslate">function checkZIP() {
+  // For each country, defines the pattern that the ZIP has to follow
+  var constraints = {
+    ch : [ '^(CH-)?\\d{4}$', "Switzerland ZIPs must have exactly 4 digits: e.g. CH-1950 or 1950" ],
+    fr : [ '^(F-)?\\d{5}$' , "France ZIPs must have exactly 5 digits: e.g. F-75012 or 75012" ],
+    de : [ '^(D-)?\\d{5}$' , "Germany ZIPs must have exactly 5 digits: e.g. D-12345 or 12345" ],
+    nl : [ '^(NL-)?\\d{4}\\s*([A-RT-Z][A-Z]|S[BCE-RT-Z])$',
+                    "Nederland ZIPs must have exactly 4 digits, followed by 2 letters except SA, SD and SS" ]
+  };
+
+  // Read the country id
+  var country = document.getElementById("Country").value;
+
+  // Get the NPA field
+  var ZIPField = document.getElementById("ZIP");
+
+  // Build the constraint checker
+  var constraint = new RegExp(constraints[country][0], "");
+    console.log(constraint);
+
+
+  // Check it!
+  if (constraint.test(ZIPField.value)) {
+    // The ZIP follows the constraint, we use the ConstraintAPI to tell it
+    ZIPField.setCustomValidity("");
+  }
+  else {
+    // The ZIP doesn't follow the constraint, we use the ConstraintAPI to
+    // give a message about the format required for this country
+    ZIPField.setCustomValidity(constraints[country][1]);
+  }
+}
+</pre>
+
+<p>Then we link it to the <strong>onchange</strong> event for the {{ HTMLElement("select") }} and the <strong>oninput</strong> event for the {{ HTMLElement("input") }}:</p>
+
+<pre class="brush: js notranslate">window.onload = function () {
+    document.getElementById("Country").onchange = checkZIP;
+    document.getElementById("ZIP").oninput = checkZIP;
+}</pre>
+
+<p>You can see a <a href="/@api/deki/files/4744/=constraint.html">live example</a> of the postal code validation.</p>
+
+<h3 id="Limiting_the_size_of_a_file_before_its_upload" name="Limiting_the_size_of_a_file_before_its_upload">アップロード前のファイルサイズの制限</h3>
+
+<p>Another common constraint is to limit the size of a file to be uploaded. Checking this on the client side before the file is transmitted to the server requires combining the Constraint Validation API, and especially the <code>field.setCustomValidity()</code> method, with another JavaScript API, here the File API.</p>
+
+<p>Here is the HTML part:</p>
+
+<pre class="brush: html notranslate">&lt;label for="FS"&gt;Select a file smaller than 75 kB : &lt;/label&gt;
+&lt;input type="file" id="FS"&gt;</pre>
+
+<p>This displays:</p>
+
+<p>{{EmbedLiveSample("Limiting_the_size_of_a_file_before_its_upload")}}</p>
+
+<p>The JavaScript reads the file selected, uses the <code>File.size()</code> method to get its size, compares it to the (hard coded) limit, and calls the Constraint API to inform the browser if there is a violation:</p>
+
+<pre class="brush: js notranslate">function checkFileSize() {
+  var FS = document.getElementById("FS");
+  var files = FS.files;
+
+  // If there is (at least) one file selected
+  if (files.length &gt; 0) {
+     if (files[0].size &gt; 75 * 1024) { // Check the constraint
+       FS.setCustomValidity("The selected file must not be larger than 75 kB");
+       return;
+     }
+  }
+  // No custom constraint violation
+  FS.setCustomValidity("");
+}</pre>
+
+<p>Finally we hook the method with the correct event:</p>
+
+<pre class="brush: js notranslate">window.onload = function () {
+  document.getElementById("FS").onchange = checkFileSize;
+}</pre>
+
+<p>You can see a <a href="/@api/deki/files/4745/=fileconstraint.html">live example</a> of the File size constraint validation.</p>
+
+<h2 id="Visual_styling_of_constraint_validation" name="Visual_styling_of_constraint_validation">制約検証における表示の整形</h2>
+
+<p>Apart from setting constraints, web developers want to control what messages are displayed to the users and how they are styled.</p>
+
+<h3 id="Controlling_the_look_of_elements" name="Controlling_the_look_of_elements">要素の外見の制御</h3>
+
+<p>The look of elements can be controlled via CSS pseudo-classes.</p>
+
+<h4 id="required_and_optional_CSS_pseudo-classes" name="required_and_optional_CSS_pseudo-classes">CSS の :required および :optional 疑似クラス</h4>
+
+<p>The {{cssxref(':required')}} and {{cssxref(':optional')}} <a href="/ja/docs/Web/CSS/Pseudo-classes">pseudo-classes</a> allow writing selectors that match form elements that have the {{ htmlattrxref("required") }} attribute, or that don't have it.</p>
+
+<h4 id="placeholder-shown_CSS_pseudo-class" name="placeholder-shown_CSS_pseudo-class">:placeholder-shown CSS pseudo-class</h4>
+
+<p>See {{cssxref(':placeholder-shown')}}</p>
+
+<h4 id="valid_invalid_CSS_pseudo-classes" name="valid_invalid_CSS_pseudo-classes">CSS の :valid :invalid 疑似クラス</h4>
+
+<p>The {{cssxref(':valid')}} and {{cssxref(':invalid')}} <a href="/ja/docs/Web/CSS/Pseudo-classes">pseudo-classes</a> are used to represent &lt;input&gt; elements whose content validates and fails to validate respectively according to the input's type setting. These classes allow the user to style valid or invalid form elements to make it easier to identify elements that are either formatted correctly or incorrectly.</p>
+
+<h3 id="Controlling_the_text_of_constraint_violation" name="Controlling_the_text_of_constraint_violation">制約違反の文字列の制御</h3>
+
+<p>The following items can help with controlling the text of a constraint violation:</p>
+
+<ul>
+ <li><a href="/ja/docs/Web/API/Constraint_validation#element.setCustomValidity(message)">element.setCustomValidity(message)</a> method on the following elements:
+
+  <ul>
+   <li>{{HTMLElement("fieldset")}}. Note: Setting a custom validity message on fieldset elements will not prevent form submission in most browsers.</li>
+   <li>{{HTMLElement("input")}}</li>
+   <li>{{HTMLElement("output")}}</li>
+   <li>{{HTMLElement("select")}}</li>
+   <li>Submit buttons (created with either a {{HTMLElement("button")}} element with the <code>submit</code> type, or an <code>input</code> element with the {{HTMLElement("input/submit", "submit")}} type. Other types of buttons do not participate in constraint validation.</li>
+   <li>{{HTMLElement("textarea")}}</li>
+  </ul>
+ </li>
+ <li>The <a href="/ja/docs/Web/API/ValidityState"><code>ValidityState</code></a> interface describes the object returned by the <a href="/ja/docs/Web/API/Constraint_validation#validity">validity</a> property of the element types listed above. It represents various ways that an entered value can be invalid. Together, they help explain why an element's value fails to validate, if it's not valid.</li>
+</ul>
diff --git a/files/ja/web/guide/html/content_categories/index.html b/files/ja/web/guide/html/content_categories/index.html
index 9f0b98251f..cc2b9c20f3 100644
--- a/files/ja/web/guide/html/content_categories/index.html
+++ b/files/ja/web/guide/html/content_categories/index.html
@@ -84,9 +84,9 @@ translation_of: Web/Guide/HTML/Content_categories
  <li>{{HTMLElement("area")}}: {{HTMLElement("map")}} 要素の子孫である場合</li>
  <li>{{HTMLElement("del")}}: 記述コンテンツだけを含む場合</li>
  <li>{{HTMLElement("ins")}}: 記述コンテンツだけを含む場合</li>
- <li>{{HTMLElement("link")}}: <a href="/ja/docs/HTML/Global_attributes#itemprop" title="ja/docs/HTML/Global attributes#itemprop"><strong>itemprop</strong></a> 属性がある場合</li>
+ <li>{{HTMLElement("link")}}: <a href="/ja/docs/HTML/Global_attributes#itemprop"><strong>itemprop</strong></a> 属性がある場合</li>
  <li>{{HTMLElement("map")}}: 記述コンテンツだけを含む場合</li>
- <li>{{HTMLElement("meta")}}: <a href="/ja/docs/HTML/Global_attributes#itemprop" title="ja/docs/HTML/Global attributes#itemprop"><strong>itemprop</strong></a> 属性がある場合</li>
+ <li>{{HTMLElement("meta")}}: <a href="/ja/docs/HTML/Global_attributes#itemprop"><strong>itemprop</strong></a> 属性がある場合</li>
 </ul>
 
 <h3 id="Embedded_content" name="Embedded_content">埋め込みコンテンツ</h3>
diff --git a/files/ja/web/guide/html/editable_content/rich-text_editing_in_mozilla/index.html b/files/ja/web/guide/html/editable_content/rich-text_editing_in_mozilla/index.html
index 07826fa870..8a2b1b2b00 100644
--- a/files/ja/web/guide/html/editable_content/rich-text_editing_in_mozilla/index.html
+++ b/files/ja/web/guide/html/editable_content/rich-text_editing_in_mozilla/index.html
@@ -50,7 +50,7 @@ translation_of: Web/Guide/HTML/Editable_content/Rich-Text_Editing_in_Mozilla
 
 <p>さらに、 Mozilla には、ドキュメントが designMode になると、そのドキュメント内のイベントが無効になるという特徴があります。designMode をオフにすると (Mozilla 1.5 ではこの切り替えが可能となります)、再びイベントはアクティブになります。</p>
 
-<p><strong>さらなる情報</strong> は、<a class="internal" href="/ja/Migrate_apps_from_Internet_Explorer_to_Mozilla" title="ja/Migrate apps from Internet Explorer to Mozilla">Migrate apps from Internet Explorer to Mozilla</a> の <a class="internal" href="/ja/Migrate_apps_from_Internet_Explorer_to_Mozilla#Rich_text_editing" title="ja/Migrate apps from Internet Explorer to Mozilla#Rich text editing">Rich text editing</a> の節をご覧ください。</p>
+<p><strong>さらなる情報</strong> は、<a class="internal" href="/ja/Migrate_apps_from_Internet_Explorer_to_Mozilla">Migrate apps from Internet Explorer to Mozilla</a> の <a class="internal" href="/ja/Migrate_apps_from_Internet_Explorer_to_Mozilla#Rich_text_editing">Rich text editing</a> の節をご覧ください。</p>
 
 <h3 id="Examples" name="Examples">例</h3>
 
@@ -277,7 +277,7 @@ img.intLink { border: 0; }
  <li><code><a href="/ja/docs/Web/API/Document/designMode">designMode</a></code></li>
  <li><a href="https://docs.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/platform-apis/ms537834(v=vs.85)">MSDN: How to Create an HTML Editor Application</a></li>
  <li><a class="external" href="http://www.kevinroth.com/rte/demo.htm">A closed source, cross-browser rich-text editing demo</a></li>
- <li><a href="/ja/Rich-Text_Editing_in_Mozilla/Class_xbDesignMode" title="ja/Rich-Text_Editing_in_Mozilla/Class_xbDesignMode">xbDesignMode; a JavaScript helper class for easier cross-browser development using designMode.</a></li>
+ <li><a href="/ja/Rich-Text_Editing_in_Mozilla/Class_xbDesignMode">xbDesignMode; a JavaScript helper class for easier cross-browser development using designMode.</a></li>
  <li><a class="external" href="http://starkravingfinkle.org/blog/2007/07/firefox-3-contenteditable/">Firefox 3 and contentEditable</a></li>
 </ul>
 
diff --git a/files/ja/web/guide/parsing_and_serializing_xml/index.html b/files/ja/web/guide/parsing_and_serializing_xml/index.html
index 9adb073f0c..5a473bfc8f 100644
--- a/files/ja/web/guide/parsing_and_serializing_xml/index.html
+++ b/files/ja/web/guide/parsing_and_serializing_xml/index.html
@@ -109,7 +109,7 @@ const xmlStr = serializer.serializeToString(doc);</pre>
 <h2 id="See_also" name="See_also">関連項目</h2>
 
 <ul>
- <li><a class="internal" href="/ja/XPath" title="ja/XPath">XPath</a></li>
+ <li><a class="internal" href="/ja/XPath">XPath</a></li>
  <li>{{domxref("XMLHttpRequest")}}</li>
  <li>{{domxref("Document")}}, {{domxref("XMLDocument")}} および {{domxref("HTMLDocument")}}</li>
 </ul>
diff --git a/files/ja/web/houdini/index.html b/files/ja/web/houdini/index.html
deleted file mode 100644
index df3539da77..0000000000
--- a/files/ja/web/houdini/index.html
+++ /dev/null
@@ -1,93 +0,0 @@
----
-title: CSS Houdini
-slug: Web/Houdini
-tags:
-  - API
-  - CSS
-  - Houdini
-  - JavaScript
-  - Landing
-  - Web
-translation_of: Web/Houdini
----
-<p>Houdini は、CSS エンジンの一部を公開する低レベル API のセットであり、開発者はブラウザーのレンダリングエンジンのスタイリングおよびレイアウトプロセスにフックすることで CSS を拡張できます。 Houdini は、開発者が <a href="/ja/docs/Web/API/CSS_Object_Model">CSS オブジェクトモデル</a>（CSSOM）に直接アクセスできるようにする API のグループです。 開発者は、ブラウザーが CSS として解析できるコードを記述できるため、ブラウザーにネイティブに実装されるのを待たずに新しい CSS 機能を作成できます。</p>
-
-<h2 id="Houdini_の利点">Houdini の利点</h2>
-
-<p>Houdini は、スタイルの変更に JavaScript の .<code><a href="/ja/docs/Web/API/HTMLElement/style">style</a></code> を使用するよりも高速な解析時間を可能にします。 ブラウザーは、スクリプトで見つかったスタイルの更新を適用する前に、CSSOM（レイアウト、ペイント、合成のプロセスを含む）を解析します。 さらに、JavaScript スタイルの更新のために、レイアウト、ペイント、および合成のプロセスが繰り返されます。 Houdini のコードは、最初のレンダリングサイクルが完了するまで待機しません。 むしろ、それは最初のサイクルに含まれ、レンダリング可能で理解可能なスタイルを作成します。 Houdini は、JavaScript で CSS 値を操作するためのオブジェクトベースの API を提供します。</p>
-
-<p>Houdini の CSS Typed OM は、型とメソッドを備えた CSS オブジェクトモデルであり、値を JavaScript オブジェクトとして公開し、以前の文字列ベースの <code><a href="/ja/docs/Web/API/HTMLElement/style">HTMLElement.style</a></code> 操作よりも直感的な CSS 操作を実現します。 すべての要素とスタイルシートのルールには、<code><a href="/ja/docs/Web/API/StylePropertyMap">StylePropertyMap</a></code> を介してアクセスできるスタイルマップがあります。</p>
-
-<p>CSS Houdini の機能の1つはワークレット（<a href="/ja/docs/Web/API/Worklet">Worklet</a>）です。 ワークレットを使用すると、モジュール方式の CSS を作成できます。 構成可能なコンポーネントをインポートするには、次の JavaScript の1行が必要です。 プリプロセッサー、ポストプロセッサー、JavaScript フレームワークは必要ありません。</p>
-
-<pre class="brush: js notranslate">&lt;script&gt;
-  CSS.paintWorklet.addModule('csscomponent.js');
-&lt;/script&gt;
-</pre>
-
-<p>この追加されたモジュールには、完全に構成可能なワークレットを登録する <code><a href="/ja/docs/Web/API/PaintWorklet/registerPaint">registerPaint()</a></code> 関数が含まれています。</p>
-
-<p>CSS の <code>paint()</code> 関数のパラメーターには、オプションのパラメーターとともに、ワークレットの名前が含まれます。 ワークレットは要素のカスタムプロパティにもアクセスできます。 これらは関数の引数として渡す必要はありません。</p>
-
-<pre class="brush: css notranslate">li {
-	background-image: paint(myComponent, stroke, 10px);
-    --highlights: blue;
-    --lowlights: green;
-}</pre>
-
-<div class="blockIndicator note">
-<p><strong>注</strong>: 大きな力には大きな責任が伴います。 Houdini を使用すると、独自の石積み（masonry）、グリッド、またはリージョンの実装を発明できますが、そうすることが必ずしも最良の考えであるとは限りません。 CSS ワーキンググループは、すべての機能が確実に実行され、すべてのエッジケースを処理し、セキュリティ、プライバシー、およびアクセシビリティを考慮するために多くの作業を行います。 Houdini で CSS を拡張するときは、これらの考慮事項を念頭に置き、より野心的なプロジェクトに進む前に、まずは小さいものから始めてください。</p>
-</div>
-
-<h2 class="Documentation" id="Houdini_の_API">Houdini の API</h2>
-
-<p>以下に、Houdini の傘下にある API をカバーするメインリファレンスページへのリンクと、それらの使用方法を学習する際にガイダンスが必要な場合に役立つガイドへのリンクを示します。</p>
-
-<div class="hidden">
-<p>Start by reading <a href="/ja/docs/Web/Houdini/learn">Houdini, an introduction</a> — this provides a brief history of Houdini and an overview of its many features.</p>
-</div>
-
-<dl>
- <dt>CSS Parser API</dt>
- <dd>任意の CSS のような言語を穏やかに型付けされた表現に解析するために、CSS パーサーをより直接的に公開する API。<br>
- <br>
- この API のガイドやリファレンスは現在書かれていません。</dd>
- <dt>CSS Properties and Values API </dt>
- <dd>新しい CSS プロパティを登録するための API を定義します。 この API を使用して登録したプロパティには、型、継承の振る舞い、および初期値を定義する解析構文が提供されます。<br>
- <br>
- <a href="/ja/docs/Web/API/CSS_Properties_and_Values_API">CSS Properties and Values API リファレンス</a><br>
- <a href="/ja/docs/Web/API/CSS_Properties_and_Values_API/guide">CSS Properties and Values API ガイド</a></dd>
- <dt></dt>
- <dt>CSS Typed OM</dt>
- <dd>CSSOM 値の文字列を意味のある型の JavaScript 表現に変換したり、元に戻したりすると、パフォーマンスのオーバーヘッドが大幅に増加する可能性があります。 CSS Typed OM は、CSS 値を型付き JavaScript オブジェクトとして公開し、パフォーマンスの高い操作を可能にします。<br>
- <br>
- <a href="/ja/docs/Web/API/CSS_Typed_OM_API">CSS Typed OM リファレンス</a><br>
- <a href="/ja/docs/Web/API/CSS_Typed_OM_API/Guide">CSS Typed OM ガイド</a></dd>
- <dt>CSS Layout API </dt>
- <dd>
- <p>CSS の拡張性を改善するように設計されたこの API は、開発者が石積みやラインスナップなどの独自のレイアウトアルゴリズムを作成できるようにします。 まだネイティブでは利用できません。<br>
-  <br>
-  この API のガイドやリファレンスは現在書かれていません。</p>
- </dd>
- <dt>CSS Painting API</dt>
- <dd>
- <p>CSS の拡張性を向上させるために開発 — 開発者が <code>paint()</code> CSS 関数を介して要素の背景、境界線、またはコンテンツに直接描画できる JavaScript 関数を記述できるようにします。<br>
-  <br>
-  <a href="/ja/docs/Web/API/CSS_Painting_API">CSS Painting API リファレンス</a><br>
-  <a href="/ja/docs/Web/API/CSS_Painting_API/ガイド">CSS Painting API ガイド</a></p>
- </dd>
- <dt>Worklets </dt>
- <dd>
- <p>メインの JavaScript 実行環境から独立した、レンダリングパイプラインのさまざまな段階でスクリプトを実行するための API。 ワークレットは概念的には <a href="/ja/docs/Web/API/Web_Workers_API/Using_web_workers">Web Workers</a> に似ており、レンダリングエンジンによって呼び出され、レンダリングエンジンを拡張します。<br>
-  <br>
-  <a href="/ja/docs/Web/API/Worklet">Worklets リファレンス</a></p>
- </dd>
-</dl>
-
-<h2 id="その他のトピック">その他のトピック</h2>
-
-<p>興味深い方法で Houdini API と連携して使用できるため、興味深い関連トピック。</p>
-
-<dl>
- <dt>合成スクロールとアニメーション</dt>
-</dl>
diff --git a/files/ja/web/html/element/bdo/index.html b/files/ja/web/html/element/bdo/index.html
index a2c417ef5f..5a1daa585b 100644
--- a/files/ja/web/html/element/bdo/index.html
+++ b/files/ja/web/html/element/bdo/index.html
@@ -3,41 +3,42 @@ title: '<bdo>: 双方向文字列上書き要素'
 slug: Web/HTML/Element/bdo
 tags:
   - BiDi
+  - 双方向テキスト
+  - 要素
   - HTML
   - HTML 文字レベルの意味付け
   - 'HTML:フローコンテンツ'
   - 'HTML:知覚可能コンテンツ'
   - 'HTML:記述コンテンツ'
-  - Reference
-  - Web
-  - ltr
-  - rtl
+  - 左書き
+  - リファレンス
   - テキスト
   - 右書き
-  - 左書き
   - 書字方向
-  - 要素
+  - テキスト描画
+  - Web
+  - ltr
+  - rtl
+browser-compat: html.elements.bdo
 translation_of: Web/HTML/Element/bdo
 ---
 <div>{{HTMLRef}}</div>
 
-<p><span class="seoSummary"><strong>HTML の双方向文字列上書き要素</strong> (<code>&lt;bdo&gt;</code>) は、現在の文字列の方向を上書きし、中の文字列が異なる方向に描画されるようにします。</span></p>
+<p><strong><code>&lt;bdo&gt;</code></strong> は <a href="/ja/docs/Web/HTML">HTML</a> の要素で、現在のテキストの書字方向を上書きし、中のテキストが異なる書字方向で描画されるようにします。</span></p>
 
 <div>{{EmbedInteractiveExample("pages/tabbed/bdo.html", "tabbed-standard")}}</div>
 
-<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>
-
-<p>文字列の文字は指定された方向の開始位置から描画されます。それぞれの文字の向きには影響を与えません (ですから、例えば、文字は裏返しにはなりません)。</p>
+<p>テキストの文字は指定された方向の開始位置から描画されます。それぞれの文字の向きには影響を与えません (ですから、例えば、文字は裏返しにはなりません)。</p>
 
 <table class="properties">
  <tbody>
   <tr>
-   <th scope="row"><a href="/ja/docs/HTML/Content_categories">コンテンツカテゴリ</a></th>
-   <td><a href="/ja/docs/HTML/Content_categories#Flow_content">フローコンテンツ</a>, <a href="/ja/docs/HTML/Content_categories#Phrasing_content">記述コンテンツ</a>, 知覚可能コンテンツ</td>
+   <th scope="row"><a href="/ja/docs/Web/Guide/HTML/Content_categories">コンテンツカテゴリー</a></th>
+   <td><a href="/ja/docs/Web/Guide/HTML/Content_categories#flow_content">フローコンテンツ</a>, <a href="/ja/docs/Web/Guide/HTML/Content_categories#phrasing_content">記述コンテンツ</a>, 知覚可能コンテンツ</td>
   </tr>
   <tr>
    <th scope="row">許可されている内容</th>
-   <td><a href="/ja/docs/HTML/Content_categories#Phrasing_content">記述コンテンツ</a></td>
+   <td><a href="/ja/docs/Web/Guide/HTML/Content_categories#phrasing_content">記述コンテンツ</a></td>
   </tr>
   <tr>
    <th scope="row">タグの省略</th>
@@ -45,7 +46,7 @@ translation_of: Web/HTML/Element/bdo
   </tr>
   <tr>
    <th scope="row">許可されている親要素</th>
-   <td><a href="/ja/docs/HTML/Content_categories#Phrasing_content">記述コンテンツ</a>を受け入れるすべての要素</td>
+   <td><a href="/ja/docs/Web/Guide/HTML/Content_categories#phrasing_content">記述コンテンツ</a>を受け入れるすべての要素</td>
   </tr>
   <tr>
    <th scope="row">暗黙の ARIA ロール</th>
@@ -62,21 +63,21 @@ translation_of: Web/HTML/Element/bdo
  </tbody>
 </table>
 
-<h2 id="Attributes" name="Attributes">属性</h2>
+<h2 id="Attributes">属性</h2>
 
-<p>この要素は<a href="/ja/docs/HTML/Global_attributes" title="HTML/Global attributes">グローバル属性</a>を持ちます。</p>
+<p>この要素には<a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>があります。</p>
 
 <dl>
  <dt>{{htmlattrdef("dir")}}</dt>
- <dd>この要素の書字方向。以下の値を指定可能です。
+ <dd>この要素の内容において、テキストが描画される方向です。以下の値が指定可能です。
  <ul>
-  <li><code>ltr</code>: テキストを左から右へ (Left to Right) 向かわせることを意味する指定。</li>
-  <li><code>rtl</code>: テキストを右から左へ (Right to Left) 向かわせることを意味する指定。</li>
+  <li><code>ltr</code>: テキストを左から右へ (left-to-right) 向かわせることを意味する指定。</li>
+  <li><code>rtl</code>: テキストを右から左へ (right-to-left) 向かわせることを意味する指定。</li>
  </ul>
  </dd>
 </dl>
 
-<h2 id="Examples" name="Examples">例</h2>
+<h2 id="Examples">例</h2>
 
 <pre class="brush: html">&lt;!-- 書字方向を切り替える --&gt;
 &lt;p&gt;This text will go left to right.&lt;/p&gt;
@@ -84,43 +85,24 @@ translation_of: Web/HTML/Element/bdo
 to left.&lt;/bdo&gt;&lt;/p&gt;
 </pre>
 
-<h3 id="Result" name="Result">結果</h3>
+<h3 id="Result">結果</h3>
 
 <p>{{EmbedLiveSample('Examples')}}</p>
 
-<h2 id="Notes" name="Notes">メモ</h2>
+<h2 id="Notes">メモ</h2>
 
 <p>HTML 4 の仕様では、この要素にイベントが指定されていません。イベントは XHTML で追加されました。これは、恐らく見落としでしょう。</p>
 
-<h2 id="Specifications" name="Specifications">仕様書</h2>
+<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('HTML WHATWG', 'semantics.html#the-bdo-element', '&lt;bdo&gt;')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5 W3C', 'textlevel-semantics.html#the-bdo-element', '&lt;bdo&gt;')}}</td>
-   <td>{{Spec2('HTML5 W3C')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML4.01', 'dirlang.html#h-8.2.4', '&lt;bdo&gt;')}}</td>
-   <td>{{Spec2('HTML4.01')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
+<p>{{Specifications}}</p>
+
+<h2 id="Browser_compatibility">ブラウザーの互換性</h2>
+
+<p>{{Compat}}</p>
 
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+<h2 id="See_also">関連情報</h2>
 
-<p>{{Compat("html.elements.bdo")}}</p>
+<ul>
+ <li>関連する HTML 要素: {{HTMLElement("bdi")}}</li>
+</ul>
diff --git a/files/ja/web/html/element/input/range/index.html b/files/ja/web/html/element/input/range/index.html
index c9ba8346b0..1ba58f6167 100644
--- a/files/ja/web/html/element/input/range/index.html
+++ b/files/ja/web/html/element/input/range/index.html
@@ -17,22 +17,21 @@ tags:
   - フォーム
   - 要素
 translation_of: Web/HTML/Element/input/range
+browser-compat: html.elements.input.input-range
 ---
 <div>{{HTMLRef("Input_types")}}</div>
 
-<p><span class="seoSummary">{{HTMLElement("input")}} 要素の <strong><code>range</code></strong> 型は、ユーザーに一定の値より小さくなく、別な一定の値より大きくない数値を指定させるために使用します。しかし、厳密な値は重要であるとはされません。これは通常、 {{HTMLElement('input/number', 'number')}} 入力型のようなテキスト入力ボックスではなく、スライダーやダイアルコントロールを用いて表現されます。</span>この種のウィジェットは厳密なものではないので、コントロールの値が厳密なものではない限り、通常は使用するべきではありません。</p>
+<p><span class="seoSummary">{{HTMLElement("input")}} 要素の <strong><code>range</code></strong> 型は、ユーザーに特定の値より小さくなく、別な特定の値より大きくない数値を指定させるために使用します。しかし、厳密な値が重要であるとはされません。これは通常、 {{HTMLElement('input/number', 'number')}} 入力型のようなテキスト入力ボックスではなく、スライダーやダイアルコントロールを用いて表現されます。</span>この種のウィジェットは厳密なものではないので、コントロールの正確な値が重要でない限り、通常は使用するべきではありません。</p>
 
 <div>{{EmbedInteractiveExample("pages/tabbed/input-range.html", "tabbed-standard")}}</div>
 
-<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>
-
 <p>ユーザーのブラウザーが <code>range</code> 型に対応していない場合は、 <code>{{HTMLElement('input/text', 'text')}}</code> 入力で代替されて扱われます。</p>
 
 <table class="properties">
  <tbody>
   <tr>
    <td><strong>{{anch("Value", "値")}}</strong></td>
-   <td>選択された数値を表す文字列を含む {{domxref("DOMString")}}。 {{jsxref("Number")}} として値を取得するには {{domxref("HTMLInputElement.valueAsNumber", "valueAsNumber")}} を使用する。</td>
+   <td>選択された数値を表す文字列を含む {{domxref("DOMString")}}。数値として値を取得するには {{domxref("HTMLInputElement.valueAsNumber", "valueAsNumber")}} を使用してください。</td>
   </tr>
   <tr>
    <td><strong>イベント</strong></td>
@@ -53,7 +52,7 @@ translation_of: Web/HTML/Element/input/range
  </tbody>
 </table>
 
-<h3 id="Validation" name="Validation">検証</h3>
+<h3 id="Validation">検証</h3>
 
 <p>利用可能なパターン検証はありません。しかし、以下の形で自動検証が行われます。</p>
 
@@ -64,16 +63,16 @@ translation_of: Web/HTML/Element/input/range
  <li>値は {{htmlattrxref("step", "input")}} の倍数になります。この既定値は 1 です。</li>
 </ul>
 
-<h3 id="Value" name="Value">値</h3>
+<h3 id="Value">値</h3>
 
 <p>{{htmlattrxref("value", "input")}} 属性は、選択された数値を表す文字列が入った {{domxref("DOMString")}} です。値は空文字列 (<code>""</code>) にはなりません。既定値は指定された最大値と最小値の中間値で、ただし最大値が最小値を下回っている場合は、既定値は <code>min</code> 属性の値に設定されます。既定値を特定するアルゴリズムは次の通りです。</p>
 
-<pre class="brush: js notranslate">defaultValue = (rangeElem.max &lt; rangeElem.min) ? rangeElem.min
+<pre class="brush: js">defaultValue = (rangeElem.max &lt; rangeElem.min) ? rangeElem.min
                : rangeElem.min + (rangeElem.max - rangeElem.min)/2;</pre>
 
 <p>最小値よりも小さな値を設定しようとすると、最小値に設定されます。同様に、最大値よりも大きな値を設定しようとすると、最大値に設定される結果になります。</p>
 
-<h2 id="Additional_attributes" name="Additional_attributes">追加の属性</h2>
+<h2 id="Additional_attributes">追加の属性</h2>
 
 <p>すべての {{HTMLElement("input")}} 型で共通する属性に加え、 <code>range</code> 型の入力欄は次の属性にも対応しています。</p>
 
@@ -104,29 +103,29 @@ translation_of: Web/HTML/Element/input/range
  </tbody>
 </table>
 
-<p id="htmlattrdeflist">{{page("/ja/docs/Web/HTML/Element/input/text", "list", 0, 1, 2)}}</p>
+<p id="attr-list">{{page("/ja/docs/Web/HTML/Element/input/text", "attr-list", 0, 1, 2)}}</p>
 
-<p>See the <a href="#A_range_control_with_hash_marks">range control with hash marks</a> below for an example of how the options on a range are denoted in supported browsers</p>
+<p>対応しているブラウザーで、範囲のオプションがどのように表示されるかの例としては、以下の<a href="#a_range_control_with_hash_marks">ハッシュマーク付き範囲コントロール</a>を参照してください。</p>
 
-<h3 id="htmlattrdefmax">{{htmlattrdef("max")}}</h3>
+<h3 id="attr-max"><code id="max">max</code></h3>
 
-<p>許可されている値の範囲の最大値です。要素に入力された {{htmlattrxref("value", "input")}} がこれを超えた場合、要素は<a href="/ja/docs/Web/Guide/HTML/HTML5/Constraint_validation">制約検証</a>に失敗します。 <code><a href="/ja/docs/Web/HTML/Attributes/max">max</a></code> 属性の値が数値でない場合、要素は最大値を持ちません。</p>
+<p>許可されている値の範囲の最大値です。要素に入力された {{htmlattrxref("value", "input")}} がこれを超えた場合、要素は<a href="/ja/docs/Web/Guide/HTML/Constraint_validation">制約検証</a>に失敗します。 <code><a href="/ja/docs/Web/HTML/Attributes/max">max</a></code> 属性の値が数値でない場合、要素は最大値を持ちません。</p>
 
 <p>この値は <code><a href="/ja/docs/Web/HTML/Attributes/min">min</a></code> 属性の値より大きいか、等しくしなければなりません。 <a href="/ja/docs/Web/HTML/Attributes/max">HTML の <code>max</code> 属性</a>を参照してください。</p>
 
-<h3 id="htmlattrdefmin">{{htmlattrdef("min")}}</h3>
+<h3 id="attr-min"><code id="min">min</code></h3>
 
-<p>許可されている値の範囲の最小値です。要素の {{htmlattrxref("value", "input")}} がこれより小さい場合、要素は<a href="/ja/docs/Web/Guide/HTML/HTML5/Constraint_validation">制約検証</a>に失敗します。 <code>min</code> 属性の値が数値でない場合、要素は最小値を持ちません。</p>
+<p>許可されている値の範囲の最小値です。要素の {{htmlattrxref("value", "input")}} がこれより小さい場合、要素は<a href="/ja/docs/Web/Guide/HTML/Constraint_validation">制約検証</a>に失敗します。 <code>min</code> 属性の値が数値でない場合、要素は最小値を持ちません。</p>
 
 <p>この値は <code><a href="/ja/docs/Web/HTML/Attributes/max">min</a></code> 属性の値より小さいか、等しくしなければなりません。 <a href="/ja/docs/Web/HTML/Attributes/min">HTML の <code>min</code> 属性</a>を参照してください。</p>
 
-<h3 id="htmlattrdefstep">{{htmlattrdef("step")}}</h3>
+<h3 id="attr-step"><code id="step">step</code></h3>
 
 <p>{{page("/ja/docs/Web/HTML/Element/input/number", "step-include")}}</p>
 
-<p><code>range</code> 入力欄の既定の刻み値は1であり、刻みの基準値が整数ではない場合を<em>除いて</em>、整数の入力のみを許可します。例えば、 <code>min</code> に -10 を、 <code>value</code> に 1.5 を設定した場合、 <code>step</code> が 1 の場合は正の方向に 1.5, 2.5, 3.5,... など、負の方向に -0.5, -1.5, -2.5,... などのみが許可されます。 <a href="/ja/docs/Web/HTML/Attributes/step">HTML の <code>step</code> 属性</a>を参照してください。</p>
+<p><code>range</code> 入力欄の既定の刻み値は 1 であり、刻みの基準値が整数ではない場合を<em>除いて</em>、整数の入力のみを許可します。例えば、 <code>min</code> に -10 を、 <code>value</code> に 1.5 を設定した場合、 <code>step</code> が 1 の場合は正の方向に 1.5, 2.5, 3.5,... など、負の方向に -0.5, -1.5, -2.5,... などのみが許可されます。 <a href="/ja/docs/Web/HTML/Attributes/step">HTML の <code>step</code> 属性</a>を参照してください。</p>
 
-<h3 id="Non_Standard_Attributes" name="Non_Standard_Attributes">標準外の属性</h3>
+<h3 id="Non_Standard_Attributes">標準外の属性</h3>
 
 <table class="standard-table">
  <thead>
@@ -143,16 +142,15 @@ translation_of: Web/HTML/Element/input/range
  </tbody>
 </table>
 
-<dl>
- <dt>{{htmlattrdef("orient")}} {{non-standard_inline}}</dt>
- <dd id="orient-include">CSS の標準外の -moz-orient non-standard プロパティは、 {{htmlelement('progress')}} および {{htmlelement('meter')}} 要素に影響し、範囲スライダーの向きを定義する <code>orient</code> 属性を定義します。値は <code>horizontal</code> が範囲を水平方向に描画することを、 <code>vertical</code> が範囲を垂直に描画することを意味します。</dd>
-</dl>
+<h3 id="attr-orient"><code id="orient">orient</code> {{non-standard_inline}}</h3>
+
+<p id="orient-include">CSS の標準外の -moz-orient non-standard プロパティと同様に {{htmlelement('progress')}} および {{htmlelement('meter')}} 要素に影響を与える <code>orient</code> 属性は、範囲スライダーの向きを定義する定義します。値は <code>horizontal</code> が範囲を水平方向に描画することを、 <code>vertical</code> が範囲を垂直に描画することを意味します。</p>
 
-<div class="blockIndicator note">
-<p>注: 以下の input 型の属性のうち、 <code>accept</code>, <code>alt</code>, <code>checked</code>, <code>dirname</code>, <code>formaction</code>, <code>formenctype</code>, <code>formmethod</code>, <code>formnovalidate</code>, <code>formtarget</code>, <code>height</code>, <code>maxlength</code>, <code>minlength</code>, <code>multiple</code>, <code>pattern</code>, <code>placeholder</code>, <code>readonly</code>, <code>required</code>, <code>size</code>, <code>src</code>, <code>width</code> は範囲入力には適用されません。これらの属性が含まれた場合は無視されます。</p>
+<div class="notecard note">
+<p>メモ: input 型の属性のうち、 <code>accept</code>, <code>alt</code>, <code>checked</code>, <code>dirname</code>, <code>formaction</code>, <code>formenctype</code>, <code>formmethod</code>, <code>formnovalidate</code>, <code>formtarget</code>, <code>height</code>, <code>maxlength</code>, <code>minlength</code>, <code>multiple</code>, <code>pattern</code>, <code>placeholder</code>, <code>readonly</code>, <code>required</code>, <code>size</code>, <code>src</code>, <code>width</code> は範囲入力には適用されません。これらの属性が含まれた場合は無視されます。</p>
 </div>
 
-<h2 id="Examples" name="Examples">例</h2>
+<h2 id="Examples">例</h2>
 
 <p><code>number</code> 型がユーザーに数値を入力させ、任意で値を最小値と最大値の間に強制することができるものですので、具体的な値を入力する必要があります。 <code>range</code> 入力型は、どの値が選択されているかをユーザーが気にする、または知る必要がない場合に、ユーザーに値を尋ねることができます。</p>
 
@@ -167,22 +165,22 @@ translation_of: Web/HTML/Element/input/range
 
 <p>原則として、ユーザーが実際の数値自体よりも最大値と最小値の間のパーセント値に関心がある場合は、 range 入力が最有力候補になります。例えば、ホームステレオの音量制御では、ユーザーは通常「音量を0.5に設定する」ではなく、「音量を最大値の半分くらいに設定する」と考えます。</p>
 
-<h3 id="Specifying_the_minimum_and_maximum" name="Specifying_the_minimum_and_maximum">最小値と最大値の指定</h3>
+<h3 id="Specifying_the_minimum_and_maximum">最小値と最大値の指定</h3>
 
 <p>既定では、最小値は0で最大値は100です。これが望むものでないのであれば、 {{htmlattrxref("min", "input")}} や {{htmlattrxref("max", "input")}} 属性の値を変更することで、簡単に範囲を変更することができます。浮動小数点値にすることもできます。</p>
 
-<p>例えば、ユーザーに-10から10までの値を尋ねるのであれば、次のようにすることができます。</p>
+<p>例えば、ユーザーに -10 から 10 までの値を尋ねるのであれば、次のようにすることができます。</p>
 
-<pre class="brush: html notranslate">&lt;input type="range" min="-10" max="10"&gt;</pre>
+<pre class="brush: html">&lt;input type="range" min="-10" max="10"&gt;</pre>
 
 <p>{{EmbedLiveSample("Specifying_the_minimum_and_maximum", 600, 40)}}</p>
 
-<h3 id="Setting_the_values_granularity" name="Setting_the_values_granularity">値の精度の設定</h3>
+<h3 id="Setting_the_values_granularity">値の精度の設定</h3>
 
 <p>By default, the granularity, is 1, meaning that the value is always an integer. You can change the {{htmlattrxref("step")}} attribute to control the granularity. For example, If you need a value between 5 and 10, accurate to two decimal places, you should set the value of <code>step</code> to 0.01:</p>
 
 <div id="Granularity_sample1">
-<pre class="brush: html notranslate">&lt;input type="range" min="5" max="10" step="0.01"&gt;</pre>
+<pre class="brush: html">&lt;input type="range" min="5" max="10" step="0.01"&gt;</pre>
 
 <p>{{EmbedLiveSample("Granularity_sample1", 600, 40)}}</p>
 </div>
@@ -190,22 +188,22 @@ translation_of: Web/HTML/Element/input/range
 <p>If you want to accept any value regardless of how many decimal places it extends to, you can specify a value of <code>any</code> for the {{htmlattrxref("step", "input")}} attribute:</p>
 
 <div id="Granularity_sample2">
-<pre class="brush: html notranslate">&lt;input type="range" min="0" max="3.14" step="any"&gt;</pre>
+<pre class="brush: html">&lt;input type="range" min="0" max="3.14" step="any"&gt;</pre>
 
 <p>{{EmbedLiveSample("Granularity_sample2", 600, 40)}}</p>
 
 <p>This example lets the user select any value between 0 and π without any restriction on the fractional part of the value selected.</p>
 </div>
 
-<h3 id="Adding_hash_marks_and_labels" name="Adding_hash_marks_and_labels">ハッシュマークとラベルの追加</h3>
+<h3 id="Adding_hash_marks_and_labels">ハッシュマークとラベルの追加</h3>
 
 <p>The HTML specification gives browsers some flexibility on how to present the range control. Nowhere is this flexibility more apparent than in the area of hash marks and, to a lesser degree, labels. The specification describes how to add custom points to the range control using the {{htmlattrxref("list", "input")}} attribute and a {{HTMLElement("datalist")}} element, but does not have any requirements or even recommendations for standardized hash or tick marks along the length of the control.</p>
 
-<h4 id="Range_control_mockups" name="Range_control_mockups">範囲コントロールのモックアップ</h4>
+<h4 id="Range_control_mockups">範囲コントロールのモックアップ</h4>
 
 <p>Since browsers have this flexibility, and to date none support all of the features HTML defines for range controls, here are some mockups to show you what you might get on macOS in a browser which supports them.</p>
 
-<h5 id="An_unadorned_range_control" name="An_unadorned_range_control">簡素な範囲コントロール</h5>
+<h5 id="An_unadorned_range_control">簡素な範囲コントロール</h5>
 
 <p>This is what you get if you don't specify a {{htmlattrxref("list", "input")}} attribute, or if the browser doesn't support it.</p>
 
@@ -217,13 +215,13 @@ translation_of: Web/HTML/Element/input/range
   </tr>
   <tr>
    <td rowspan="4">
-    <pre class="brush: html notranslate">
+    <pre class="brush: html">
 &lt;input type="range"&gt;</pre>
    </td>
    <th>Screenshot</th>
   </tr>
   <tr>
-   <td><img alt="Screenshot of a plain slider control on macOS" src="https://mdn.mozillademos.org/files/14989/macslider-plain.png" style="height: 28px; width: 184px;"></td>
+   <td><img alt="Screenshot of a plain slider control on macOS" src="macslider-plain.png"></td>
   </tr>
   <tr>
    <th>Live</th>
@@ -234,7 +232,7 @@ translation_of: Web/HTML/Element/input/range
  </tbody>
 </table>
 
-<h5 id="A_range_control_with_hash_marks" name="A_range_control_with_hash_marks">ハッシュマーク付きの範囲コントロール</h5>
+<h5 id="A_range_control_with_hash_marks">ハッシュマーク付きの範囲コントロール</h5>
 
 <p>This range control is using a <code>list</code> attribute specifying the ID of a {{HTMLElement("datalist")}} which defines a series of hash marks on the control. There are eleven of them, so that there's one at 0% as well as at each 10% mark. Each point is represented using an {{HTMLElement("option")}} element with its {{htmlattrxref("value", "option")}} set to the range's value at which a mark should be drawn.</p>
 
@@ -246,7 +244,7 @@ translation_of: Web/HTML/Element/input/range
   </tr>
   <tr>
    <td rowspan="4">
-    <pre class="brush: html notranslate">
+    <pre class="brush: html">
 &lt;input type="range" list="tickmarks"&gt;
 
 &lt;datalist id="tickmarks"&gt;
@@ -267,7 +265,7 @@ translation_of: Web/HTML/Element/input/range
    <th>Screenshot</th>
   </tr>
   <tr>
-   <td><img alt="Screenshot of a plain slider control on macOS" src="https://mdn.mozillademos.org/files/14991/macslider-ticks.png" style="height: 28px; width: 184px;"></td>
+   <td><img alt="Screenshot of a plain slider control on macOS" src="macslider-ticks.png"></td>
   </tr>
   <tr>
    <th>Live</th>
@@ -278,7 +276,7 @@ translation_of: Web/HTML/Element/input/range
  </tbody>
 </table>
 
-<h5 id="A_range_control_with_hash_marks_and_labels" name="A_range_control_with_hash_marks_and_labels">ハッシュマークとラベル付きの範囲コントロール</h5>
+<h5 id="A_range_control_with_hash_marks_and_labels">ハッシュマークとラベル付きの範囲コントロール</h5>
 
 <p>You can add labels to your range control by adding the {{htmlattrxref("label", "option")}} attribute to the {{HTMLElement("option")}} elements corresponding to the tick marks you wish to have labels for.</p>
 
@@ -290,7 +288,7 @@ translation_of: Web/HTML/Element/input/range
   </tr>
   <tr>
    <td rowspan="4">
-    <pre class="brush: html notranslate">
+    <pre class="brush: html">
 &lt;input type="range" list="tickmarks"&gt;
 
 &lt;datalist id="tickmarks"&gt;
@@ -311,7 +309,7 @@ translation_of: Web/HTML/Element/input/range
    <th>Screenshot</th>
   </tr>
   <tr>
-   <td><img alt="Screenshot of a plain slider control on macOS" src="https://mdn.mozillademos.org/files/14993/macslider-labels.png" style="height: 44px; width: 184px;"></td>
+   <td><img alt="Screenshot of a plain slider control on macOS" src="macslider-labels.png"></td>
   </tr>
   <tr>
    <th>Live</th>
@@ -326,22 +324,23 @@ translation_of: Web/HTML/Element/input/range
 <p><strong>Note</strong>: Currently, no browser fully supports these features. Firefox doesn't support hash marks and labels at all, for example, while Chrome supports hash marks but doesn't support labels. Version 66 (66.0.3359.181) of Chrome supports labels but the {{htmlelement("datalist")}} tag has to be styled with CSS as its {{cssxref("display")}} property is set to <code>none</code> by default, hiding the labels.</p>
 </div>
 
-<h3 id="Change_the_orientation" name="Change_the_orientation">方向の変更</h3>
+<h3 id="Change_the_orientation">方向の変更</h3>
 
 <div class="xhidden">
-<p>By default, if a browser renders a range input as a slider, it will render it so that the knob slides left and right. When supported, we will be able to make the range vertical, to slide up and down with CSS by declaring a height value greater than the width value.<strong> </strong>This is not actually implemented yet by any of the major browsers. (See Firefox {{bug(981916)}}, <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=341071">Chrome bug 341071</a>). It also, perhaps, may still be <a href="https://github.com/whatwg/html/issues/4177">under discussion</a>.</p>
+<p>By default, if a browser renders a range input as a slider, it will render it so that the knob slides left and right. When supported, we will be able to make the range vertical, to slide up and down with CSS by declaring a height value greater than the width value. This is not actually implemented yet by any of the major browsers. (See Firefox {{bug(981916)}}, <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=341071">Chrome bug 341071</a>). It also, perhaps, may still be <a href="https://github.com/whatwg/html/issues/4177">under discussion</a>.</p>
 
-<p>In the meantime, we can make the range vertical by rotating it using using CSS transforms, or, by targeting each browser engine with their own method, which includes setting the {{cssxref('appearance')}} to <code>slider-vertical</code>, by using a non-standard <code>orient</code> attribute in Firefox, or by changing the text direction for Internet Explorer and Edge.</p>
+<p>In the meantime, we can make the range vertical by rotating it using CSS transforms, or, by targeting each browser engine with their own method, which includes setting the {{cssxref('appearance')}} to <code>slider-vertical</code>, by using a non-standard <code>orient</code> attribute in Firefox, or by changing the text direction for Internet Explorer and Edge.</p>
 
 <p>Consider this range control:</p>
 
 <div id="Orientation_sample1">
-<pre class="brush: html notranslate">&lt;input type="range" id="volume" min="0" max="11" value="7" step="1"&gt;</pre>
+<pre class="brush: html">&lt;input type="range" id="volume" min="0" max="11" value="7" step="1"&gt;</pre>
 </div>
 
-<p>{{EmbedLiveSample("Orientation_sample1", 200, 200, "https://mdn.mozillademos.org/files/14983/Orientation_sample1.png")}}</p>
+<p>{{EmbedLiveSample("Orientation_sample1", 200, 200, "orientation_sample1.png")}}</p>
 
-<p>This control is horizontal (at least on most if not all major browers; others might vary).</p>
+<p>This control is horizontal (at least on most if not all major browsers; others might vary).</p>
+</div>
 
 <h3 id="Standards">Standards</h3>
 
@@ -350,19 +349,18 @@ translation_of: Web/HTML/Element/input/range
 <div id="Orientation_sample2">
 <h4 id="CSS">CSS</h4>
 
-<pre class="brush: css notranslate">#volume {
+<pre class="brush: css">#volume {
   height: 150px;
   width: 50px;
 }</pre>
 
 <h4 id="HTML">HTML</h4>
 
-<pre class="brush: html notranslate">&lt;input type="range" id="volume" min="0" max="11" value="7" step="1"&gt;</pre>
+<pre class="brush: html">&lt;input type="range" id="volume" min="0" max="11" value="7" step="1"&gt;</pre>
 
-<h4 id="Result" name="Result">結果</h4>
+<h4 id="Result">結果</h4>
 
-<p>{{EmbedLiveSample("Orientation_sample2", 200, 200, "https://mdn.mozillademos.org/files/14985/Orientation_sample2.png")}}</p>
-</div>
+<p>{{EmbedLiveSample("Orientation_sample2", 200, 200, "orientation_sample2.png")}}</p>
 </div>
 
 <p>Unfortunately, no major browsers currently support vertical range controls directly.</p>
@@ -375,7 +373,7 @@ translation_of: Web/HTML/Element/input/range
 
 <p>The HTML needs to be updated to wrap the {{HTMLElement("input")}} in a {{HTMLElement("div")}} to let us correct the layout after the transform is performed (since transforms don't automatically affect the layout of the page):</p>
 
-<pre class="brush: html notranslate">&lt;div class="slider-wrapper"&gt;
+<pre class="brush: html">&lt;div class="slider-wrapper"&gt;
   &lt;input type="range" min="0" max="11" value="7" step="1"&gt;
 &lt;/div&gt;</pre>
 
@@ -383,7 +381,7 @@ translation_of: Web/HTML/Element/input/range
 
 <p>Now we need some CSS. First is the CSS for the wrapper itself; this specifies the display mode and size we want so that the page lays out correctly; in essence, it's reserving an area of the page for the slider so that the rotated slider fits into the reserved space without making a mess of things.</p>
 
-<pre class="brush: css notranslate">.slider-wrapper {
+<pre class="brush: css">.slider-wrapper {
   display: inline-block;
   width: 20px;
   height: 150px;
@@ -393,7 +391,7 @@ translation_of: Web/HTML/Element/input/range
 
 <p>Then comes the style information for the <code>&lt;input&gt;</code> element within the reserved space:</p>
 
-<pre class="brush: css notranslate">.slider-wrapper input {
+<pre class="brush: css">.slider-wrapper input {
   width: 150px;
   height: 20px;
   margin: 0;
@@ -403,7 +401,7 @@ translation_of: Web/HTML/Element/input/range
 
 <p>The size of the control is set to be 150 pixels long by 20 pixels tall. The margins are set to 0 and the {{cssxref("transform-origin")}} is shifted to the middle of the space the slider rotates through; since the slider is configured to be 150 pixels wide, it rotates through a box which is 150 pixels on each side. Offsetting the origin by 75px on each axis means we will rotate around the center of that space. Finally, we rotate counter-clockwise by 90°. The result: a range input which is rotated so the maximum value is at the top and the minimum value is at the bottom.</p>
 
-<p>{{EmbedLiveSample("transform_rotate-90deg", 200, 200, "https://mdn.mozillademos.org/files/14987/Orientation_sample3.png")}}</p>
+<p>{{EmbedLiveSample("transform_rotate-90deg", 200, 200, "orientation_sample3.png")}}</p>
 
 <h3 id="appearance_property">appearance property</h3>
 
@@ -413,14 +411,14 @@ translation_of: Web/HTML/Element/input/range
 
 <p>We use the same HTML as in the previous examples:</p>
 
-<pre class="brush: html notranslate">&lt;input type="range" min="0" max="11" value="7" step="1"&gt;
+<pre class="brush: html">&lt;input type="range" min="0" max="11" value="7" step="1"&gt;
 </pre>
 
 <h4 id="CSS_3">CSS</h4>
 
 <p>We target just the inputs with a type of range:</p>
 
-<pre class="brush: css notranslate">input[type="range"] {
+<pre class="brush: css">input[type="range"] {
   -webkit-appearance: slider-vertical;
 }</pre>
 
@@ -434,7 +432,7 @@ translation_of: Web/HTML/Element/input/range
 
 <p>Use similar HTML as in the previous examples, we add the attribute with a value of <code>vertical</code>:</p>
 
-<pre class="brush: html notranslate">&lt;input type="range" min="0" max="11" value="7" step="1" orient="vertical"&gt;
+<pre class="brush: html">&lt;input type="range" min="0" max="11" value="7" step="1" orient="vertical"&gt;
 </pre>
 
 <p>{{EmbedLiveSample("orient_attribute", 200, 200)}}</p>
@@ -447,14 +445,14 @@ translation_of: Web/HTML/Element/input/range
 
 <p>We use the same HTML as in the previous examples:</p>
 
-<pre class="brush: html notranslate">&lt;input type="range" min="0" max="11" value="7" step="1"&gt;
+<pre class="brush: html">&lt;input type="range" min="0" max="11" value="7" step="1"&gt;
 </pre>
 
 <h4 id="CSS_4">CSS</h4>
 
 <p>We target just the inputs with a type of range, changing the writing mode from the default to <code>bt-lr</code>, or bottom-to-top and left-to-right:</p>
 
-<pre class="brush: css notranslate">input[type="range"] {
+<pre class="brush: css">input[type="range"] {
   writing-mode: bt-lr;
 }</pre>
 
@@ -468,52 +466,32 @@ translation_of: Web/HTML/Element/input/range
 
 <p>We keep the <code>orient</code> attribute with a value of <code>vertical</code> for Firefox:</p>
 
-<pre class="brush: html notranslate">&lt;input type="range" min="0" max="11" value="7" step="1" orient="vertical"&gt;
+<pre class="brush: html">&lt;input type="range" min="0" max="11" value="7" step="1" orient="vertical"&gt;
 </pre>
 
 <h4 id="CSS_5">CSS</h4>
 
 <p>We target just the inputs with a type of range, changing the writing mode from the default to <code>bt-lr</code>, or bottom-to-top and left-to-right, for Edge and Internet Explorer, and add <code>-webkit-appearance: slider-vertical</code> for all -webkit-based browsers:</p>
 
-<pre class="brush: css notranslate">input[type="range"] {
+<pre class="brush: css">input[type="range"] {
   writing-mode: bt-lr;
   -webkit-appearance: slider-vertical;
 }</pre>
 
 <p>{{EmbedLiveSample("Putting_it_all_together", 200, 200)}}</p>
 
-<h2 id="Specifications" name="Specifications">仕様書</h2>
+<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('HTML WHATWG', 'forms.html#range-state-(type=range)', '&lt;input type="range"&gt;')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td>初回定義</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5.1', 'sec-forms.html#range-state-typerange', '&lt;input type="range"&gt;')}}</td>
-   <td>{{Spec2('HTML5.1')}}</td>
-   <td>初回定義</td>
-  </tr>
- </tbody>
-</table>
+<p>{{Specifications}}</p>
 
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+<h2 id="Browser_compatibility">ブラウザーの互換性</h2>
 
-<p>{{Compat("html.elements.input.input-range")}}</p>
+<p>{{Compat}}</p>
 
-<h2 id="See_also" name="See_also">関連情報</h2>
+<h2 id="See_also">関連情報</h2>
 
 <ul>
- <li><a href="/ja/docs/Learn/HTML/Forms">HTML フォーム</a></li>
+ <li><a href="/ja/docs/Learn/Forms">HTML フォーム</a></li>
  <li>{{HTMLElement("input")}} およびそれに基づく {{domxref("HTMLInputElement")}} インターフェイス</li>
  <li><code><a href="/ja/docs/Web/HTML/Element/input/number">&lt;input type="number"&gt;</a></code></li>
  <li>{{domxref('validityState.rangeOverflow')}} および {{domxref('validityState.rangeUnderflow')}}</li>
diff --git a/files/ja/web/html/element/input/text/index.html b/files/ja/web/html/element/input/text/index.html
index 80763b2040..50d1029a08 100644
--- a/files/ja/web/html/element/input/text/index.html
+++ b/files/ja/web/html/element/input/text/index.html
@@ -12,6 +12,7 @@ tags:
   - Text
   - text entry
   - text input
+browser-compat: html.elements.input.input-text
 translation_of: Web/HTML/Element/input/text
 ---
 <div>{{HTMLRef("Input_types")}}</div>
@@ -20,8 +21,6 @@ translation_of: Web/HTML/Element/input/text
 
 <div>{{EmbedInteractiveExample("pages/tabbed/input-text.html", "tabbed-shorter")}}</div>
 
-<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>
-
 <table class="properties">
  <tbody>
   <tr>
@@ -47,16 +46,16 @@ translation_of: Web/HTML/Element/input/text
  </tbody>
 </table>
 
-<h2 id="Value" name="Value">値</h2>
+<h2 id="Value">値</h2>
 
-<p> {{htmlattrxref("value", "input")}} 属性は、テキスト入力欄に入力された現在のテキストの値が入っている {{domxref("DOMString")}} です。 JavaScript では {{domxref("HTMLInputElement.value", "value")}} プロパティを使ってこれを受け取ることができます。</p>
+<p> {{htmlattrxref("value", "input")}} 属性は、テキスト入力欄に入力された現在のテキストの値が入っている {{domxref("DOMString")}} です。 JavaScript では {{domxref("HTMLInputElement")}} の <code>value</code> プロパティを使ってこれを受け取ることができます。</p>
 
-<pre class="brush: js notranslate">let theText = myTextInput.value;
+<pre class="brush: js">let theText = myTextInput.value;
 </pre>
 
 <p>入力欄に検証の制約がない場合 (詳しくは{{anch("Validation", "検証")}}を参照)、値は空文字列 ("") にすることができます。</p>
 
-<h2 id="Additional_attributes" name="Additional_attributes">追加の属性</h2>
+<h2 id="Additional_attributes">追加の属性</h2>
 
 <p>型に関係なくすべての {{HTMLElement("input")}} 要素を操作する属性に加え、 <code>text</code> 型の入力欄は次の属性にも対応しています。</p>
 
@@ -103,26 +102,26 @@ translation_of: Web/HTML/Element/input/text
  </tbody>
 </table>
 
-<h3 id="htmlattrdeflist">{{htmlattrdef("list")}}</h3>
+<h3 id="attr-list"><code id="list">list</code></h3>
 
 <p>list 属性の値は、同じ文書内にある {{HTMLElement("datalist")}} 要素の {{domxref("Element.id", "id")}} です。 {{HTMLElement("datalist")}} は、この入力欄でユーザーに提案するための事前定義された値のリストを提供します。リストの中の値のうち {{htmlattrxref("type", "input")}} と互換性のないものは、提案されるオプションには含まれません。提供される値は提案であり、要件ではありません。ユーザーはこの定義済みリストから選択することも、異なる値を提供することもできます。</p>
 
-<h3 id="htmlattrdefmaxlength">{{htmlattrdef("maxlength")}}</h3>
+<h3 id="attr-maxlength"><code id="maxlength">maxlength</code></h3>
 
 <p>ユーザーが <code>text</code> 入力欄に入力することができる (UTF-16 コード単位での) 最大文字数です。 0 以上の整数値である必要があります。 <code>maxlength</code> が指定されていないか、無効な値が指定されていると、 <code>text</code> 入力欄には最大文字数が設定されません。この値は <code>minlength</code> の値以上である必要もあります。</p>
 
-<p>フィールドのテキスト値の長さが UTF-16 コード単位で <code>maxlength</code> の長さを超えていると、その入力欄は<a href="/ja/docs/Web/Guide/HTML/HTML5/Constraint_validation">制約検証</a>に失敗します。制約検証はユーザーが値を変更した場合にのみ適用されます。</p>
+<p>フィールドのテキスト値の長さが UTF-16 コード単位で <code>maxlength</code> の長さを超えていると、その入力欄は<a href="/ja/docs/Web/Guide/HTML/Constraint_validation">制約検証</a>に失敗します。制約検証はユーザーが値を変更した場合にのみ適用されます。</p>
 
-<h3 id="htmlattrdefminlength">{{htmlattrdef("minlength")}}</h3>
+<h3 id="attr-minlength"><code id="minlength">minlength</code></h3>
 
 <p>ユーザーが <code>text</code> 入力欄に入力することができる (UTF-16 コード単位での) 最小文字数です。これは非負の整数値で、 <code>maxlength</code> で指定された値以下である必要があります。 <code>minlength</code> が指定されていないか、無効な値が指定されていると、 <code>text</code> 入力欄には最小文字数が設定されません。</p>
 
-<p>入力欄のテキスト値の長さが UTF-16 コード単位で <code>minlength</code> の長さよりも短いと、その入力欄は<a href="/ja/docs/Web/Guide/HTML/HTML5/Constraint_validation">制約検証</a>に失敗します。制約検証はユーザーが値を変更した場合にのみ適用されます。</p>
+<p>入力欄のテキスト値の長さが UTF-16 コード単位で <code>minlength</code> の長さよりも短いと、その入力欄は<a href="/ja/docs/Web/Guide/HTML/Constraint_validation">制約検証</a>に失敗します。制約検証はユーザーが値を変更した場合にのみ適用されます。</p>
 
-<h3 id="htmlattrdefpattern">{{htmlattrdef("pattern")}}</h3>
+<h3 id="attr-pattern"><code id="pattern">pattern</code></h3>
 
 <div id="pattern-include">
-<p><code>pattern</code> 属性は、指定する場合は正規表現であり、入力欄の {{htmlattrxref("value")}} が<a href="/ja/docs/Web/Guide/HTML/HTML5/Constraint_validation">制約検証</a>に合格するためにはこれと一致しなければなりません。これは {{jsxref("RegExp")}} 型で使用される JavaScript の妥当な正規表現である必要があり、これは<a href="/ja/docs/Web/JavaScript/Guide/Regular_Expressions">正規表現のガイド</a>で記述されています。正規表現がコンパイルされるときに <code>'u'</code> フラグが指定されるので、パターンは ASCII ではなく Unicode コードポイントの並びとして扱われます。パターンのテキストをスラッシュで囲んではいけません。</p>
+<p><code>pattern</code> 属性は、指定する場合は正規表現であり、入力欄の {{htmlattrxref("value")}} が<a href="/ja/docs/Web/Guide/HTML/Constraint_validation">制約検証</a>に合格するためにはこれと一致しなければなりません。これは {{jsxref("RegExp")}} 型で使用される JavaScript の妥当な正規表現である必要があり、これは<a href="/ja/docs/Web/JavaScript/Guide/Regular_Expressions">正規表現のガイド</a>で記述されています。正規表現がコンパイルされるときに <code>'u'</code> フラグが指定されるので、パターンは ASCII ではなく Unicode コードポイントの並びとして扱われます。パターンのテキストをスラッシュで囲んではいけません。</p>
 
 <p>指定されたパターンがないかか無効である場合は、正規表現は適用されず、この属性は完全に無視されます。</p>
 
@@ -133,7 +132,7 @@ translation_of: Web/HTML/Element/input/text
 
 <p>詳細や例については{{anch("Specifying a pattern", "パターンの指定")}}を参照してください。</p>
 
-<h3 id="htmlattrdefplaceholder">{{htmlattrdef("placeholder")}}</h3>
+<h3 id="attr-placeholder"><code id="placeholder">placeholder</code></h3>
 
 <p><code>placeholder</code> 属性は文字列で、その欄にどのような種類の情報が求められるかについてのユーザーに対する短いヒントを提供します。これは求められるデータの種類を紹介する一語または短い句であり、説明的なメッセージではありません。テキストには改行を含めることは<em>できません</em>。</p>
 
@@ -143,21 +142,21 @@ translation_of: Web/HTML/Element/input/text
 <p><strong>注:</strong> 可能であれば <code>placeholder</code> を使用することは避けてください。フォームを説明する他の方法ほど意味論的に有益ではなく、コンテンツに予期しない技術的な問題を引き起こす可能性があります。詳しくは、{{SectionOnPage("/ja/docs/Web/HTML/Element/input", "Labels and placeholders", "ラベルとプレイスホルダー")}}を参照してください。</p>
 </div>
 
-<h3 id="htmlattrdefreadonly">{{htmlattrdef("readonly")}}</h3>
+<h3 id="attr-readonly"><code id="readonly">readonly</code></h3>
 
-<p>論理属性で、存在すれば、ユーザーが編集することができないことを表します。しかし、 <code>value</code> は、 JavaScript コードから直接 {{domxref("HTMLInputElement.value")}} プロパティを設定することで変更することができます。</p>
+<p>論理属性で、存在すれば、ユーザーが編集することができないことを表します。しかし、 <code>value</code> は、 JavaScript コードから直接 {{domxref("HTMLInputElement")}} の <code>value</code>  プロパティを設定することで変更することができます。</p>
 
 <div class="note">
 <p><strong>注:</strong> 読み取り専用フィールドは値を持てないため、 <code>required</code> は <code>readonly</code> 属性も指定されている入力欄には効果がありません。</p>
 </div>
 
-<h3 id="htmlattrdefsize">{{htmlattrdef("size")}}</h3>
+<h3 id="attr-size"><code id="size">size</code></h3>
 
 <p><code>size</code> 属性は数値であり、入力欄の幅を何文字分とするかを示します。値はゼロより大きな数値である必要があり、既定値は20です。文字の幅は様々であるため、これは正確ではない可能性もあり、依存することはできません。結果の入力欄は文字数やフォント (使用中の {{cssxref("font")}} 設定) によって、指定された文字数より狭くなったり広くなったりすることがあります。</p>
 
 <p>これはユーザーがフィールドに入力することができる文字数の制限を設定するものでは<em>ありません</em>。これは一度に見える文字数をおよそ指定するだけです。入力データの長さの上限を設定するには、 <code>{{anch("maxlength")}}</code> 属性を使用してください。</p>
 
-<h3 id="htmlattrdefspellcheck">{{htmlattrdef("spellcheck")}}</h3>
+<h3 id="attr-spellcheck"><code id="spellcheck">spellcheck</code></h3>
 
 <p><code>spellcheck</code> はグローバル属性で、要素でスペルチェックを有効にするかどうかを示します。内容が編集可能なものすべてに使用することができますが、ここでは <code>spellcheck</code> 属性の {{HTMLElement("input")}} 要素の使用に関して特に考えます。 <code>spellcheck</code> で利用できる値は次の通りです。</p>
 
@@ -174,7 +173,7 @@ translation_of: Web/HTML/Element/input/text
 
 <p><code>spellcheck</code> を読み取ることで返される値は、{{Glossary("user agent", "ユーザーエージェント")}}の設定によって上書きされる場合、コントロール内のスペルチェックの実際の状態を反映しない可能性があります。</p>
 
-<h2 id="Non-standard_attributes" name="Non-standard_attributes">標準外の属性</h2>
+<h2 id="Non-standard_attributes">標準外の属性</h2>
 
 <p>ブラウザーによっては、以下の標準外の属性が利用できます。一般的な規則として、できれば使用することを避けてください。</p>
 
@@ -197,7 +196,7 @@ translation_of: Web/HTML/Element/input/text
  </tbody>
 </table>
 
-<h3 id="htmlattrdefautocorrect_non-standard_inline">{{htmlattrdef("autocorrect")}} {{non-standard_inline}}</h3>
+<h3 id="attr-autocorrect"><code id="autocorrect">autocorrect</code> {{non-standard_inline}}</h3>
 
 <div id="autocorrect-include">
 <p>Safari 拡張である <code>autocorrect</code> 属性は文字列で、ユーザーがこの欄を編集している間に自動修正を有効にするかどうかを示します。次の値が許されています。</p>
@@ -210,7 +209,7 @@ translation_of: Web/HTML/Element/input/text
 </dl>
 </div>
 
-<h3 id="htmlattrdefmozactionhint_non-standard_inline">{{htmlattrdef("mozactionhint")}} {{non-standard_inline}}</h3>
+<h3 id="attr-mozactionhint"><code id="mozactionhint">mozactionhint</code> {{non-standard_inline}}</h3>
 
 <div id="mozactionhint-include">
 <p>Mozilla 拡張で Android 版 Firefox で対応しており、ユーザーがフィールドを編集中に <kbd>Enter</kbd> キーや <kbd>Return</kbd> キーを押した場合に行われるアクションの種類のヒントを提供します。この情報は仮想キーボードの <kbd>Enter</kbd> キーにどのようなラベルを使用するかを決定するために使用されます。</p>
@@ -222,13 +221,13 @@ translation_of: Web/HTML/Element/input/text
 <p>許可されている値は <code>go</code>, <code>done</code>, <code>next</code>, <code>search</code>, <code>send</code> です。ブラウザーはこのヒントを使用して、 Enter キーにどのラベルを置くかを決定します。</p>
 </div>
 
-<h2 id="Using_text_inputs" name="Using_text_inputs">テキスト入力欄の使用</h2>
+<h2 id="Using_text_inputs">テキスト入力欄の使用</h2>
 
 <p><code>text</code> 型の <code>&lt;input&gt;</code> 要素は、基本的な単一行の入力欄を作成します。どこでも、ユーザーに単一行の値を入力させたい場所で、もっと具体的な入力型が値の中にない場合 (例えば、<a href="/ja/docs/Web/HTML/Element/input/datetime-local">日付</a>、 <a href="/ja/docs/Web/HTML/Element/input/url">URL</a>、<a href="/ja/docs/Web/HTML/Element/input/email">メールアドレス</a>、<a href="/ja/docs/Web/HTML/Element/input/search">検索語</a>など、もっと良い選択肢が利用できるもの) に使用します。</p>
 
-<h3 id="Basic_example" name="Basic_example">基本的な例</h3>
+<h3 id="Basic_example">基本的な例</h3>
 
-<pre class="brush: html notranslate">&lt;form&gt;
+<pre class="brush: html">&lt;form&gt;
   &lt;div&gt;
     &lt;label for="uname"&gt;Choose a username: &lt;/label&gt;
     &lt;input type="text" id="uname" name="name"&gt;
@@ -242,16 +241,16 @@ translation_of: Web/HTML/Element/input/text
 
 <p>{{EmbedLiveSample("Basic_example", 600, 50)}}</p>
 
-<p>送信されると、サーバーに送信される名前と値の組のデータは <code>uname=Chris</code> になります (送信前に入力値として "Chris" が入力された場合)。 {{HTMLElement("input")}} 要素に {{htmlattrxref("name", "input")}} 属性を入れ忘れてはいけません。さもないと、テキスト入力欄の値が送信されるデータに含まれなくなります。</p>
+<p>送信されると、サーバーに送信される名前と値の組のデータは <code>name=Chris</code> になります (送信前に入力値として "Chris" が入力された場合)。 {{HTMLElement("input")}} 要素に {{htmlattrxref("name", "input")}} 属性を入れ忘れてはいけません。さもないと、テキスト入力欄の値が送信されるデータに含まれなくなります。</p>
 
-<h3 id="Setting_placeholders" name="Setting_placeholders">プレイスホルダーの設定</h3>
+<h3 id="Setting_placeholders">プレイスホルダーの設定</h3>
 
 <p> {{htmlattrxref("placeholder","input")}} 属性を使用して、テキスト入力欄の内部に有用なプレイスホルダーを提供することで、何を入力すればよいかのヒントを提供することができます。次の例を見てください。</p>
 
-<pre class="brush: html notranslate">&lt;form&gt;
+<pre class="brush: html">&lt;form&gt;
   &lt;div&gt;
     &lt;label for="uname"&gt;Choose a username: &lt;/label&gt;
-    &lt;input type="text" id="uname" name="name"
+    &lt;input type="text" id="uname"
            placeholder="Lower case, all one word"&gt;
   &lt;/div&gt;
   &lt;div&gt;
@@ -265,11 +264,11 @@ translation_of: Web/HTML/Element/input/text
 
 <p>プレイスホルダーはふつう、要素の前景色よりも薄い色で表示され、ユーザーが入力欄にテキストを入力し始めると (または、 <code>value</code> 属性に設定することで、プログラム的に値を設定する場合も) 自動的に消滅します。</p>
 
-<h3 id="Physical_input_element_size" name="Physical_input_element_size">物理的な入力要素の寸法</h3>
+<h3 id="Physical_input_element_size">物理的な入力要素の寸法</h3>
 
 <p>入力ボックスの物理的な寸法は、 {{htmlattrxref("size", "input")}} 属性を使って制御することができます。これによって、テキスト入力欄が一度に表示できる文字数を指定することができます。これは要素の幅に影響し、幅をピクセル数ではなく文字数で指定することができます。例えば、この例の中では、入力欄は30文字の幅です。</p>
 
-<pre class="brush: html notranslate">&lt;form&gt;
+<pre class="brush: html">&lt;form&gt;
   &lt;div&gt;
     &lt;label for="uname"&gt;Choose a username: &lt;/label&gt;
     &lt;input type="text" id="uname" name="name"
@@ -283,7 +282,7 @@ translation_of: Web/HTML/Element/input/text
 
 <p>{{ EmbedLiveSample('Physical_input_element_size', 600, 50) }}</p>
 
-<h2 id="Validation" name="Validation">検証</h2>
+<h2 id="Validation">検証</h2>
 
 <p><code>text</code> 型の <code>&lt;input&gt;</code> 要素は、適用される自動的な検証はありませんが (基本的なテキスト入力欄は、自由な文字列を受け付けることが求められるからです)、以下に解説するように、クライアント側の検証のオプションがいくつか利用できます。</p>
 
@@ -291,11 +290,11 @@ translation_of: Web/HTML/Element/input/text
 <p><strong>注</strong>: HTML のフォーム検証は、入力されたデータが正しい形式であることを保証するサーバースクリプトの代用には<em>なりません</em>。 HTML を調整して検証をくぐり抜けたり、完全に削除したりすることはとても簡単にできます。 HTML を完全にバイパスし、サーバーに直接データを送信することも可能です。サーバー側のコードが受信したデータの検証に失敗した場合、不適切な形式のデータ (または大きすぎるデータ、間違った種類のデータなど) がデータベースに入力された場合に災害が発生するおそれがあります。</p>
 </div>
 
-<h3 id="A_note_on_styling" name="A_note_on_styling">スタイルにおけるメモ</h3>
+<h3 id="A_note_on_styling">スタイルにおけるメモ</h3>
 
 <p>ユーザーにとって値が妥当かそうでないかが分かりやすくなるように、フォーム要素のスタイル付けに便利な擬似クラスが利用できます。 {{cssxref(":valid")}} および {{cssxref(":invalid")}} です。この節では、以下の CSS を使用して入力欄の値が妥当であれば隣にチェックマークを表示し、妥当な値でなければ隣にバツ (X) マークを表示します。</p>
 
-<pre class="brush: css notranslate">div {
+<pre class="brush: css">div {
   margin-bottom: 10px;
   position: relative;
 }
@@ -317,11 +316,11 @@ input:valid+span:after {
 
 <p>このテクニックにはフォーム要素の後に配置される {{htmlelement("span")}} 要素も必要で、これがアイコンのホルダーとして動作します。ブラウザーによっては一部の入力型で、直後に配置されたアイコンをうまく表示できないことがあるのでこれが必要です。</p>
 
-<h3 id="Making_input_required" name="Making_input_required">入力を必須にする</h3>
+<h3 id="Making_input_required">入力を必須にする</h3>
 
 <p>入力を行わないとフォームの送信が許可されないようにするための簡単な方法として、 {{htmlattrxref("required","input")}} 属性を使うことができます。</p>
 
-<pre class="brush: html notranslate">&lt;form&gt;
+<pre class="brush: html">&lt;form&gt;
   &lt;div&gt;
     &lt;label for="uname"&gt;Choose a username: &lt;/label&gt;
     &lt;input type="text" id="uname" name="name" required&gt;
@@ -333,7 +332,7 @@ input:valid+span:after {
 &lt;/form&gt;</pre>
 
 <div class="hidden">
-<pre class="brush: css notranslate">div { margin-bottom: 10px; position: relative; } input + span { padding-right: 30px; } input:invalid+span:after { position: absolute; content: '✖'; padding-left: 5px; } input:valid+span:after { position: absolute; content: '✓'; padding-left: 5px; }</pre>
+<pre class="brush: css">div { margin-bottom: 10px; position: relative; } input + span { padding-right: 30px; } input:invalid+span:after { position: absolute; content: '✖'; padding-left: 5px; } input:valid+span:after { position: absolute; content: '✓'; padding-left: 5px; }</pre>
 </div>
 
 <p>次のように表示されます。</p>
@@ -342,13 +341,13 @@ input:valid+span:after {
 
 <p>検索用語を入力せずにフォームを送信しようとした場合、ブラウザーはエラーメッセージを表示します。</p>
 
-<h3 id="Input_value_length" name="Input_value_length">入力値の長さ</h3>
+<h3 id="Input_value_length">入力値の長さ</h3>
 
 <p> {{htmlattrxref("minlength", "input")}} 属性を使用して入力された値の最小の長さ (文字数) を指定することができます。同様に、 {{htmlattrxref("maxlength", "input")}} を使用して入力された値の最大長を文字数で設定します。</p>
 
 <p>以下の例では、入力値が4～8文字の長さであることが求められます。</p>
 
-<pre class="brush: html notranslate">&lt;form&gt;
+<pre class="brush: html">&lt;form&gt;
   &lt;div&gt;
     &lt;label for="uname"&gt;Choose a username: &lt;/label&gt;
     &lt;input type="text" id="uname" name="name" required size="10"
@@ -362,29 +361,29 @@ input:valid+span:after {
 &lt;/form&gt;</pre>
 
 <div class="hidden">
-<pre class="brush: css notranslate">div { margin-bottom: 10px; position: relative; } input + span { padding-right: 30px; } input:invalid+span:after { position: absolute; content: '✖'; padding-left: 5px; } input:valid+span:after { position: absolute; content: '✓'; padding-left: 5px; }</pre>
+<pre class="brush: css">div { margin-bottom: 10px; position: relative; } input + span { padding-right: 30px; } input:invalid+span:after { position: absolute; content: '✖'; padding-left: 5px; } input:valid+span:after { position: absolute; content: '✓'; padding-left: 5px; }</pre>
 </div>
 
 <p>以下のように表示されます。</p>
 
 <p>{{ EmbedLiveSample('Input_value_length', 600, 70) }}</p>
 
-<p>４文字未満でフォームを送信しようとすると、適切なエラーメッセージが表示されます (ブラウザーによって異なります)。８文字を超えて入力しようとしても、ブラウザーが許しません。</p>
+<p>4 文字未満でフォームを送信しようとすると、適切なエラーメッセージが表示されます (ブラウザーによって異なります)。 8 文字を超えて入力しようとしても、ブラウザーが許しません。</p>
 
 <div class="note">
-<p><strong>Note:</strong> <code>minlength</code> を指定して <code>required</code> を指定しないと、ユーザーが値を指定する必要がなくなるので、入力は妥当と判断されます。</p>
+<p><strong>メモ:</strong> <code>minlength</code> を指定して <code>required</code> を指定しないと、ユーザーが値を指定する必要がなくなるので、入力は妥当と判断されます。</p>
 </div>
 
-<h3 id="Specifying_a_pattern" name="Specifying_a_pattern">パターンの指定</h3>
+<h3 id="Specifying_a_pattern">パターンの指定</h3>
 
-<p> {{htmlattrxref("pattern","input")}} 属性を使用して、入力値が妥当と判断されるために一致しなければならない正規表現を指定することができます (入力値を検証するために正規表現を使うための短期コースは<a href="/ja/docs/Learn/HTML/Forms/Form_validation#Validating_against_a_regular_expression">正規表現による検証</a>をご覧ください)。</p>
+<p> {{htmlattrxref("pattern","input")}} 属性を使用して、入力値が妥当と判断されるために一致しなければならない正規表現を指定することができます (入力値を検証するために正規表現を使うための短期コースは<a href="/ja/docs/Learn/Forms/Form_validation#validating_against_a_regular_expression">正規表現による検証</a>をご覧ください)。</p>
 
 <p>以下の例では、4～8文字の値で、英小文字のみが含まれているという要件の制約を与えます。</p>
 
-<pre class="brush: html notranslate">&lt;form&gt;
+<pre class="brush: html">&lt;form&gt;
   &lt;div&gt;
     &lt;label for="uname"&gt;Choose a username: &lt;/label&gt;
-    &lt;input type="text" id="uname" name="name" required size="45"
+    &lt;input type="text" id="uname"
            pattern="[a-z]{4,8}"&gt;
     &lt;span class="validity"&gt;&lt;/span&gt;
     &lt;p&gt;Usernames must be lowercase and 4-8 characters in length.&lt;/p&gt;
@@ -395,7 +394,7 @@ input:valid+span:after {
 &lt;/form&gt;</pre>
 
 <div class="hidden">
-<pre class="brush: css notranslate">div {
+<pre class="brush: css">div {
   margin-bottom: 10px;
   position: relative;
 }
@@ -426,42 +425,22 @@ input:valid+span:after {
 
 <p>{{ EmbedLiveSample('Specifying_a_pattern', 600, 110) }}</p>
 
-<h2 id="Examples" name="Examples">例</h2>
+<h2 id="Examples">例</h2>
 
-<p> <a href="/ja/docs/Learn/HTML/Forms/Your_first_HTML_form">最初の HTML フォーム</a>および <a href="/ja/docs/Learn/HTML/Forms/How_to_structure_an_HTML_form">HTML フォームの構成方法</a>の記事の文脈で、良いテキスト入力欄の例を見ることができます。</p>
+<p> <a href="/ja/docs/Learn/Forms/Your_first_form">最初の HTML フォーム</a>および <a href="/ja/docs/Learn/Forms/How_to_structure_a_web_form">HTML フォームの構成方法</a>の記事の文脈で、良いテキスト入力欄の例を見ることができます。</p>
 
-<h2 id="Specifications" name="Specifications">仕様書</h2>
+<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('HTML WHATWG', 'input.html#text-(type=text)-state-and-search-state-(type=search)', '&lt;input type="text"&gt;')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td>初回定義</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5.1', 'sec-forms.html#text-typetext-state-and-search-state-typesearch', '&lt;input type="text"&gt;')}}</td>
-   <td>{{Spec2('HTML5.1')}}</td>
-   <td>初回定義</td>
-  </tr>
- </tbody>
-</table>
+<p>{{Specifications}}</p>
 
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+<h2 id="Browser_compatibility">ブラウザーの互換性</h2>
 
-<p>{{Compat("html.elements.input.input-text")}}</p>
+<p>{{Compat}}</p>
 
-<h2 id="See_also" name="See_also">関連情報</h2>
+<h2 id="See_also">関連情報</h2>
 
 <ul>
- <li><a href="/ja/docs/Learn/HTML/Forms">HTML フォーム</a></li>
+ <li><a href="/ja/docs/Learn/Forms">HTML フォーム</a></li>
  <li>{{HTMLElement("input")}} およびそれに基づく {{domxref("HTMLInputElement")}} インターフェイス</li>
  <li><code><a href="/ja/docs/Web/HTML/Element/input/search">&lt;input type="search"&gt;</a></code></li>
  <li>{{HTMLElement("textarea")}}: 複数行のテキスト入力欄</li>
diff --git a/files/ja/web/html/element/meta/name/index.html b/files/ja/web/html/element/meta/name/index.html
index 0986662e6d..898b88c7bb 100644
--- a/files/ja/web/html/element/meta/name/index.html
+++ b/files/ja/web/html/element/meta/name/index.html
@@ -7,13 +7,14 @@ tags:
   - HTML document metadata
   - Reference
   - metadata
+browser-compat: html.elements.meta.name
 translation_of: Web/HTML/Element/meta/name
 ---
 <div>{{HTMLRef}}</div>
 
-<p><span class="seoSummary">{{htmlelement("meta")}} 要素を使用して、文書のメタデータを名前と値の組み合わせで提供することができ、 {{htmlattrxref("name", "meta")}} 属性はメタデータ名を指定し、 {{htmlattrxref("content", "meta")}} 属性は値を指定します。</span></p>
+<p><span class="seoSummary">{{htmlelement("meta")}} 要素を使用すると、文書のメタデータを名前と値の組み合わせで提供することができます。 {{htmlattrxref("name", "meta")}} 属性でメタデータ名を指定し、 {{htmlattrxref("content", "meta")}} 属性で値を指定します。</span></p>
 
-<h3 id="Standard_metadata_names_defined_in_the_HTML_specification" name="Standard_metadata_names_defined_in_the_HTML_specification">HTML 仕様書で定義されている標準メタデータ名</h3>
+<h3 id="Standard_metadata_names_defined_in_the_HTML_specification">HTML 仕様書で定義されている標準メタデータ名</h3>
 
 <p>HTML 仕様書は、以下の一連の標準メタデータ名を定義しています。</p>
 
@@ -21,7 +22,7 @@ translation_of: Web/HTML/Element/meta/name
  <li>
   <p><code>application-name</code>: ウェブページで動作しているアプリケーションの名前です。</p>
 
-  <div class="note"><strong>注:</strong>
+  <div class="note"><strong>メモ:</strong>
 
   <ul>
    <li>ブラウザーはアプリケーションを識別するためにこれを使用することがあります。これはふつうアプリケーション名が含まれるものの、文書名や状態などの情報も含まれる {{HTMLElement("title")}} 要素とは異なります。</li>
@@ -72,198 +73,193 @@ translation_of: Web/HTML/Element/meta/name
    </tbody>
   </table>
 
-  <div class="note"><strong>注:</strong>
+  <div class="note"><strong>メモ:</strong>
 
   <ul>
-   <li>Dynamically inserting <code>&lt;meta name="referrer"&gt;</code> (with {{domxref("Document.write", "document.write()")}} or {{domxref("Node.appendChild", "appendChild()")}}) makes the referrer behaviour unpredictable.</li>
-   <li>When several conflicting policies are defined, the <code>no-referrer</code> policy is applied.</li>
+   <li><code>&lt;meta name="referrer"&gt;</code> を ({{domxref("Document.write", "document.write()")}} または {{domxref("Node.appendChild", "appendChild()")}} で) 動的に挿入すると、リファラーの動作が予測不能になります。</li>
+   <li>相反する複数のポリシーが定義されている場合は、 <code>no-referrer</code> ポリシーが適用されます。</li>
   </ul>
   </div>
  </li>
- <li><code><a href="/ja/docs/Web/HTML/Element/meta/name/theme-color">theme-color</a></code>: indicates a suggested color that user agents should use to customize the display of the page or of the surrounding user interface. The <code>content</code> attribute contains a valid CSS {{cssxref("&lt;color&gt;")}}.</li>
-</ul>
-
-<h3 id="Standard_metadata_names_defined_in_other_specifications" name="Standard_metadata_names_defined_in_other_specifications">他の仕様書で定義されている標準メタデータ名</h3>
-
-<p>The CSS Color Adjustment specification defines the following metadata name:</p>
-
-<ul>
+ <li><code><a href="/ja/docs/Web/HTML/Element/meta/name/theme-color">theme-color</a></code>: ユーザーエージェントがページの表示や周辺のユーザーインターフェースをカスタマイズするために使用すべき推奨色を示します。 <code>content</code> 属性には、有効な CSS の {{cssxref("&lt;color&gt;")}} が含まれます。</li>
  <li>
-  <p><code>color-scheme</code>: specifies one or more color schemes with which the document is compatible.</p>
+  <p><code>color-scheme</code>: 文書と互換性のある 1 つ以上の複数のカラースキームを指定します。</p>
 
-  <p>The browser will use this information in tandem with the user's browser or device settings to determine what colors to use for everything from background and foregrounds to form controls and scrollbars. The primary use for <code>&lt;meta name="color-scheme"&gt;</code> is to indicate compatibility with—and order of preference for—light and dark color modes.</p>
+  <p>ブラウザーは、この情報をユーザーのブラウザーや端末の設定と合わせて使用し、背景や前景、フォームコントロールやスクロールバーなど、あらゆるものに使用する色を決定します。 <code>&lt;meta name="color-scheme"&gt;</code> の主な用途は、ライトモードとダークモードの互換性と優先順位を示すことです。</p>
 
-  <p>The value of the {{htmlattrxref("content", "meta")}} property for <code>color-scheme</code> may be one of the following:</p>
+  <p><code>color-scheme</code> の {{htmlattrxref("content", "meta")}} プロパティは次のうちの一つになります。</p>
 
   <dl>
    <dt><code>normal</code></dt>
-   <dd>The document is unaware of color schemes and should simply be rendered using the default color palette.</dd>
+   <dd>この文書は配色を意識していないので、既定のカラーパレットを使って描画する必要があります。</dd>
    <dt>[<code>light</code> | <code>dark</code>]+</dt>
-   <dd>One or more color schemes supported by the document. Specifying the same color scheme more than once has the same effect as specifying it only once. Indicating multiple color schemes indicates that the first scheme is preferred by the document, but that the second specified scheme is acceptable if the user prefers it.</dd>
+   <dd>この文書で対応している 1 つ以上の配色。同じ配色を 2 回以上指定しても、 1 回だけ指定した場合と同じ効果が得られる。複数の配色を指定すると、この文書では最初の配色が優先されるが、ユーザーが好む場合は 2 番目に指定された配色でもよいことを示す。</dd>
    <dt><code>only light</code></dt>
-   <dd>Indicates that the document <em>only</em> supports light mode, with a light background and dark foreground colors. By specification, <code>only dark</code> <em>is not valid</em>, because forcing a document to render in dark mode when it isn't truly compatible with it can result in unreadable content; all major browsers default to light mode if not otherwise configured.</dd>
+   <dd>この文書がライトモード<em>のみ</em>に対応していることを示します。背景色が明るく、前景色が暗い色です。仕様書によれば、 <code>only dark</code> は有効ではありません。ダークモードに対応していない文書を強制的にダークモードで描画すると、コンテンツが読めなくなる可能性があるからです。主要なブラウザーは、特に設定されていなければ既定でライトモードになります。</dd>
   </dl>
 
-  <p>For example, to indicate that a document prefers dark mode but does render functionally in light mode as well:</p>
+  <p>例えば、この文書はダークモードを推奨するが、ライトモードでも機能的にはレンダリングできることを示すためには、次のようにします。</p>
 
-  <pre class="brush: html notranslate">&lt;meta name="color-scheme" content="dark light"&gt;</pre>
+  <pre class="brush: html">&lt;meta name="color-scheme" content="dark light"&gt;</pre>
 
-  <p>This works at the document level in the same way that the CSS {{cssxref("color-scheme")}} property lets individual elements specify their preferred and accepted color schemes. Your styles can adapt to the current color scheme using the {{cssxref("@media/prefers-color-scheme", "prefers-color-scheme")}} CSS media feature.</p>
+  <p>これは、CSS の {{cssxref("color-scheme")}} プロパティで個々の要素が好みの配色と受け入れられる配色を指定できるのと同じように、文書レベルで機能します。スタイルは、 {{cssxref("@media/prefers-color-scheme", "prefers-color-scheme")}} という CSS メディア機能を使って、現在の配色に合わせることができます。</p>
  </li>
 </ul>
 
-<p>The CSS Device Adaptation specification defines the following metadata name:</p>
+<h3 id="Standard_metadata_names_defined_in_other_specifications">他の仕様書で定義されている標準メタデータ</h3>
+
+<p>CSS Device Adaptation 仕様書は、以下のメタデータ名を定義しています。</p>
 
 <ul>
  <li>
-  <p><code>viewport</code>: gives hints about the size of the initial size of the {{glossary("viewport")}}. Used by mobile devices only.</p>
+  <p><code>viewport</code>: この{{glossary("viewport", "ビューポート")}}の初期の寸法の大きさについてのヒントを指定します。モバイル端末でのみ使用されます。</p>
 
   <table class="fullwidth-table">
-   <caption>Values for the content of <code>&lt;meta name="viewport"&gt;</code></caption>
+   <caption><code>&lt;meta name="viewport"&gt;</code> の content の値</caption>
    <thead>
     <tr>
      <th scope="col">値</th>
-     <th scope="col">Possible subvalues</th>
+     <th scope="col">使用可能なサブ値</th>
      <th scope="col">解説</th>
     </tr>
    </thead>
    <tbody>
     <tr>
      <td><code>width</code></td>
-     <td>A positive integer number, or the text <code>device-width</code></td>
-     <td>Defines the pixel width of the viewport that you want the web site to be rendered at.</td>
+     <td>正の整数値、または <code>device-width</code> のテキスト</td>
+     <td>ウェブサイトを表示させるビューポートのピクセル単位の幅を定義します。</td>
     </tr>
     <tr>
      <td><code>height</code></td>
-     <td>A positive integer, or the text <code>device-height</code></td>
-     <td>Defines the height of the viewport. Not used by any browser.</td>
+     <td>正の整数値、または <code>device-height</code> のテキスト</td>
+     <td>ビューポートの高さを定義します。どのブラウザーでも使用されていません。</td>
     </tr>
     <tr>
      <td><code>initial-scale</code></td>
-     <td>A positive number between <code>0.0</code> and <code>10.0</code></td>
-     <td>Defines the ratio between the device width (<code>device-width</code> in portrait mode or <code>device-height</code> in landscape mode) and the viewport size.</td>
+     <td><code>0.0</code> と <code>10.0</code> の間の正の実数</td>
+     <td>端末の幅 (縦長画面で <code>device-width</code>、横長画面で <code>device-height</code>) とビューポートの寸法の比率を定義します。</td>
     </tr>
     <tr>
      <td><code>maximum-scale</code></td>
-     <td>A positive number between <code>0.0</code> and <code>10.0</code></td>
-     <td>Defines the maximum amount to zoom in. It must be greater or equal to the <code>minimum-scale</code> or the behaviour is undefined. Browser settings can ignore this rule and iOS10+ ignores it by default.</td>
+     <td><code>0.0</code> と <code>10.0</code> の間の正の実数</td>
+     <td>拡大縮小インする最大値を定義します。 <code>minimum-scale</code> 以上でなければ、動作は未定義です。ブラウザーの設定でこの規則を無視することができ、iOS 10 以降では既定で無視されます。</td>
     </tr>
     <tr>
      <td><code>minimum-scale</code></td>
-     <td>A positive number between <code>0.0</code> and <code>10.0</code></td>
-     <td>Defines the minimum zoom level. It must be smaller or equal to the <code>maximum-scale</code> or the behaviour is undefined. Browser settings can ignore this rule and iOS10+ ignores it by default.</td>
+     <td><code>0.0</code> と <code>10.0</code> の間の正の実数</td>
+     <td>拡大縮小レベルの最小値を定義します。 <code>maximum-scale</code> 以下でなければ、動作は未定義です。ブラウザーの設定でこの規則を無視することができ、iOS 10 以降では既定で無視されます。</td>
     </tr>
     <tr>
      <td><code>user-scalable</code></td>
-     <td><code>yes</code> or <code>no</code></td>
-     <td>If set to <code>no</code>, the user is not able to zoom in the webpage. The default is <code>yes</code>. Browser settings can ignore this rule, and iOS10+ ignores it by default.</td>
+     <td><code>yes</code> または <code>no</code></td>
+     <td><code>no</code> に設定された場合は、ユーザーがウェブページを拡大縮小することができなくなります。既定値は <code>yes</code> です。ブラウザーの設定でこの規則を無視することができ、iOS 10 以降では既定で無視されます。</td>
     </tr>
     <tr>
      <td><code>viewport-fit</code></td>
-     <td><code>auto</code>, <code>contain</code> or <code>cover</code></td>
+     <td><code>auto</code>, <code>contain</code>, <code>cover</code></td>
      <td>
-      <p>The <code>auto</code> value doesn’t affect the initial layout viewport, and the whole web page is viewable.</p>
+      <p><code>auto</code> の値は、初期レイアウトのビューポートに影響を与えず、ウェブページ全体が表示されます。</p>
 
-      <p>The <code>contain</code> value means that the viewport is scaled to fit the largest rectangle inscribed within the display.</p>
+      <p><code>contain</code> の値は、ディスプレイに内接する最大の長方形に合わせてビューポートが拡大されることを意味します。</p>
 
-      <p>The <code>cover</code> value means that the viewport is scaled to fill the device display. It is highly recommended to make use of the <a href="/ja/docs/Web/CSS/env">safe area inset</a> variables to ensure that important content doesn't end up outside the display.</p>
+      <p><code>cover</code> の値は、ビューポートが端末のディスプレイいっぱいになるように縮小されることを意味します。重要なコンテンツがディスプレイの外に出てしまわないように、 <a href="/ja/docs/Web/CSS/env">safe-area-inset-*</a> 変数を使用することを強くお勧めします。</p>
      </td>
     </tr>
    </tbody>
   </table>
 
-  <div class="note"><strong>Notes:</strong>
+  <div class="note"><strong>メモ:</strong>
 
   <ul>
-   <li>Though unstandardized, this declaration is respected by most mobile browsers due to de-facto dominance.</li>
-   <li>The default values may vary between devices and browsers.</li>
-   <li>To learn about this declaration in Firefox for Mobile, see <a href="/ja/docs/Mobile/Viewport_meta_tag" title="Mobile/Viewport meta tag">this article</a>.</li>
+   <li>この宣言は標準化されていませんが、事実上の優位性から、ほとんどのモバイルブラウザーで尊重されています。</li>
+   <li>既定値は、端末やブラウザーによって異なる場合があります。</li>
+   <li>Firefox for Mobile でのこの宣言については、<a href="/ja/docs/Mobile/Viewport_meta_tag">こちらの記事</a>を参照してください。</li>
   </ul>
   </div>
 
-  <h5 id="Accessibility_concerns_with_viewport_scaling" name="Accessibility_concerns_with_viewport_scaling">ビューポートの拡大縮小についてのアクセシビリティの考慮</h5>
+  <h5 id="Accessibility_concerns_with_viewport_scaling">ビューポートの拡大縮小についてのアクセシビリティの考慮</h5>
 
-  <div>Disabling zooming capabilities by setting <code>user-scalable</code> to a value of <code>no</code> prevents people experiencing low vision conditions from being able to read and understand page content.</div>
+  <div><code>user-scalable</code> を <code>no</code> に設定して拡大縮小機能を無効にすると、弱視の人がページの内容を読んだり理解したりすることができなくなります。</div>
 
   <ul>
-   <li><a href="/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN Understanding WCAG, Guideline 1.4 explanations</a></li>
+   <li><a href="/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN WCAG を理解する、ガイドライン 1.4 の説明</a></li>
    <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.html">Understanding Success Criterion 1.4.4 | W3C Understanding WCAG 2.0</a></li>
   </ul>
 
-  <h5 id="See_also" name="See_also">関連情報</h5>
+  <h5 id="See_also">関連情報</h5>
 
-  <p>The <a href="/ja/docs/Web/CSS/@viewport"><code>@viewport</code></a> CSS at-rule.</p>
+  <p>CSS の <a href="/ja/docs/Web/CSS/@viewport"><code>@viewport</code></a> アット規則</p>
  </li>
 </ul>
 
-<h3 id="Other_metadata_names" name="Other_metadata_names">その他のメタデータ名</h3>
+<h3 id="Other_metadata_names">その他のメタデータ名</h3>
 
-<p>The <a class="external" href="https://wiki.whatwg.org/wiki/MetaExtensions">WHATWG Wiki MetaExtensions page</a> contains a large set of non-standard metadata names that have not been formally accepted yet; however, some of the names included there are already used quite commonly in practice — including the following:</p>
+<p><a href="https://wiki.whatwg.org/wiki/MetaExtensions">WHATWG Wiki の MetaExtensions のページ</a>には、まだ正式に受け入れられていない標準外のメタデータの名前が多数掲載されています。しかし、ここに掲載されている名前の中には、以下のように、すでに実際によく使われているものもあります。</p>
 
 <ul>
- <li><code>creator</code>: the name of the creator of the document, such as an organization or institution. If there are more than one, several {{HTMLElement("meta")}} elements should be used.</li>
- <li><code>googlebot</code>, a synonym of <code>robots</code>, is only followed by Googlebot (the indexing crawler for Google).</li>
- <li><code>publisher</code>: the name of the document's publisher.</li>
- <li><code>robots</code>: the behaviour that cooperative crawlers, or "robots", should use with the page. It is a comma-separated list of the values below:
+ <li><code>creator</code>: この文書の作成者の名前で、組織や機関などです。複数ある場合は、複数の {{HTMLElement("meta")}} 要素を使用する必要があります。</li>
+ <li><code>googlebot</code>: <code>robots</code> と同様ですが、Googlebot (Google のインデックス作成用クローラー) のみが従います。</li>
+ <li><code>publisher</code>: この文書の発行者の名前です。</li>
+ <li><code>robots</code>: 協力的なクローラー、つまり「ロボット」がページに対して使用すべき動作です。以下の値をカンマで区切ったリストです。
   <table class="standard-table">
    <caption>Values for the content of <code>&lt;meta name="robots"&gt;</code></caption>
    <thead>
     <tr>
      <th scope="col">値</th>
      <th scope="col">解説</th>
-     <th scope="col">Used by</th>
+     <th scope="col">使用者</th>
     </tr>
    </thead>
    <tbody>
     <tr>
      <td><code>index</code></td>
-     <td>Allows the robot to index the page (default).</td>
-     <td>All</td>
+     <td>ロボットがこのページをインデックスすることを許可します (既定値)。</td>
+     <td>すべて</td>
     </tr>
     <tr>
      <td><code>noindex</code></td>
-     <td>Requests the robot to not index the page.</td>
-     <td>All</td>
+     <td>ロボットにこのページをインデックスしないよう要求します。</td>
+     <td>すべて</td>
     </tr>
     <tr>
      <td><code>follow</code></td>
-     <td>Allows the robot to follow the links on the page (default).</td>
-     <td>All</td>
+     <td>ロボットがこのページ上のリンクをたどることを許可します (既定値)。</td>
+     <td>すべて</td>
     </tr>
     <tr>
      <td><code>nofollow</code></td>
-     <td>Requests the robot to not follow the links on the page.</td>
-     <td>All</td>
+     <td>ロボットにこのページ上のリンクをたどらないよう要求します。</td>
+     <td>すべて</td>
     </tr>
     <tr>
      <td><code>all</code></td>
-     <td>Equivalent to <code>index, follow</code></td>
-     <td><a class="external" href="https://support.google.com/webmasters/answer/79812">Google</a></td>
+     <td><code>index, follow</code> と同等です。</td>
+     <td><a href="https://support.google.com/webmasters/answer/79812">Google</a></td>
     </tr>
     <tr>
      <td><code>none</code></td>
-     <td>Equivalent to <code>noindex, nofollow</code></td>
-     <td><a class="external" href="https://support.google.com/webmasters/answer/79812">Google</a></td>
+     <td><code>noindex, nofollow</code> と同等です。</td>
+     <td><a href="https://support.google.com/webmasters/answer/79812">Google</a></td>
     </tr>
     <tr>
      <td><code>noarchive</code></td>
-     <td>Requests the search engine not to cache the page content.</td>
-     <td><a class="external" href="https://developers.google.com/webmasters/control-crawl-index/docs/robots_meta_tag#valid-indexing--serving-directives">Google</a>, <a class="external" href="https://help.yahoo.com/kb/search-for-desktop/SLN2213.html">Yahoo</a>, <a class="external" href="https://www.bing.com/webmaster/help/which-robots-metatags-does-bing-support-5198d240">Bing</a></td>
+     <td>検索エンジンにこのページの内容をキャッシュしないよう要求します。</td>
+     <td><a href="https://developers.google.com/webmasters/control-crawl-index/docs/robots_meta_tag#valid-indexing--serving-directives">Google</a>, <a href="https://help.yahoo.com/kb/search-for-desktop/SLN2213.html">Yahoo</a>, <a href="https://www.bing.com/webmaster/help/which-robots-metatags-does-bing-support-5198d240">Bing</a></td>
     </tr>
     <tr>
      <td><code>nosnippet</code></td>
-     <td>Prevents displaying any description of the page in search engine results.</td>
-     <td><a class="external" href="https://developers.google.com/webmasters/control-crawl-index/docs/robots_meta_tag#valid-indexing--serving-directives">Google</a>, <a class="external" href="https://www.bing.com/webmaster/help/which-robots-metatags-does-bing-support-5198d240">Bing</a></td>
+     <td>検索エンジンの結果でこのページの説明の表示を抑制します。</td>
+     <td><a href="https://developers.google.com/webmasters/control-crawl-index/docs/robots_meta_tag#valid-indexing--serving-directives">Google</a>, <a href="https://www.bing.com/webmaster/help/which-robots-metatags-does-bing-support-5198d240">Bing</a></td>
     </tr>
     <tr>
      <td><code>noimageindex</code></td>
-     <td>Requests this page not to appear as the referring page of an indexed image.</td>
-     <td><a class="external" href="https://developers.google.com/webmasters/control-crawl-index/docs/robots_meta_tag#valid-indexing--serving-directives">Google</a></td>
+     <td>このページをインデックスされた画像の参照ページとして表示しないよう要求します。</td>
+     <td><a href="https://developers.google.com/webmasters/control-crawl-index/docs/robots_meta_tag#valid-indexing--serving-directives">Google</a></td>
     </tr>
     <tr>
      <td><code>nocache</code></td>
-     <td>Synonym of <code>noarchive</code>.</td>
-     <td><a class="external" href="https://www.bing.com/webmaster/help/which-robots-metatags-does-bing-support-5198d240">Bing</a></td>
+     <td><code>noarchive</code> と同等です。</td>
+     <td><a href="https://www.bing.com/webmaster/help/which-robots-metatags-does-bing-support-5198d240">Bing</a></td>
     </tr>
    </tbody>
   </table>
@@ -271,40 +267,21 @@ translation_of: Web/HTML/Element/meta/name
   <div class="note"><strong>Notes:</strong>
 
   <ul>
-   <li>Only cooperative robots follow these rules. Do not expect to prevent e-mail harvesters with them.</li>
-   <li>The robot still needs to access the page in order to read these rules. To prevent bandwidth consumption, use a <em>{{Glossary("robots.txt")}}</em> file.</li>
-   <li>If you want to remove a page, <code>noindex</code> will work, but only after the robot visits the page again. Ensure that the <code>robots.txt</code> file is not preventing revisits.</li>
-   <li>Some values are mutually exclusive, like <code>index</code> and <code>noindex</code>, or <code>follow</code> and <code>nofollow</code>. In these cases the robot's behaviour is undefined and may vary between them.</li>
-   <li>Some crawler robots, like Google, Yahoo and Bing, support the same values for the HTTP header <code>X-Robots-Tag</code>; this allows non-HTML documents like images to use these rules.</li>
+   <li>協力的なロボットだけがこのルールに従っています。メールアドレスの自動収集プログラムを抑制できるとは期待しないでください。</li>
+   <li>ロボットがこれらのルールを読むためには、ページにアクセスする必要があります。帯域幅の消費を防ぐには、 <em>{{Glossary("robots.txt")}}</em> ファイルを使用してください。</li>
+   <li>ページを削除したい場合、 <code>noindex</code> で行うことができますが、ロボットがそのページに再びアクセスした後のことになります。 <code>robots.txt</code> ファイルが再訪問を妨害していないことを確認してください。</li>
+   <li>値によっては互いに排他的なものがあります。例えば <code>index</code> と <code>noindex</code>、 <code>follow</code> と <code>nofollow</code> などです。このような場合、ロボットの動作は未定義であり、ロボット間で異なる可能性があります。</li>
+   <li>Google、Yahoo、Bing など一部のクローラーロボットでは、 HTTP ヘッダーの X-Robots-Tag で提供された同じ値に対応しているものがあります。これにより、画像などの HTML 以外の文書でもこれらの規則を使用することができます。</li>
   </ul>
   </div>
  </li>
 </ul>
 
-<h2 id="Specifications" name="Specifications">仕様書</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">仕様書</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', '#standard-metadata-names', 'standard metadata names')}}</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS Color Adjust', '#color-scheme-meta', 'the "color-scheme" metadata name')}}</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Device', '#viewport-meta', 'the "viewport" metadata name')}}</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('Referrer Policy', '#referrer-policy-delivery-meta', 'the "referrer" metadata name')}}</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
-
-<p>{{Compat("html.elements.meta.name")}}</p>
+<h2 id="Specifications">仕様書</h2>
+
+<p>{{Specifications}}</p>
+
+<h2 id="Browser_compatibility">ブラウザーの互換性</h2>
+
+<p>{{Compat}}</p>
+
diff --git a/files/ja/web/html/element/meta/name/theme-color/index.html b/files/ja/web/html/element/meta/name/theme-color/index.html
new file mode 100644
index 0000000000..46c4b3562d
--- /dev/null
+++ b/files/ja/web/html/element/meta/name/theme-color/index.html
@@ -0,0 +1,38 @@
+---
+title: theme-color
+slug: Web/HTML/Element/meta/name/theme-color
+tags:
+  - Attribute
+  - HTML
+  - HTML document metadata
+  - Reference
+  - metadata
+browser-compat: html.elements.meta.name.theme-color
+translation_of: Web/HTML/Element/meta/name/theme-color
+---
+<div>{{HTMLRef}}</div>
+
+<p><span class="seoSummary"><strong><code>theme-color</code></strong> の値は {{htmlelement("meta")}} 要素の {{htmlattrxref("name", "meta")}} 属性において、ユーザーエージェントがページやその周辺のユーザーインターフェイスの表示をカスタマイズするために使用すべき推奨色を示します。指定された場合、 {{htmlattrxref("content", "meta")}} 属性には有効な CSS の {{cssxref("&lt;color&gt;")}} が含まれていなければなりません。</span></p>
+
+<h2 id="Example">例</h2>
+
+<pre class="brush: html">&lt;meta name="theme-color" content="#4285f4"&gt;</pre>
+
+<p>次の画像は、上記の {{htmlelement("meta")}} 要素が、 Android モバイル端末上で動作する Chrome で表示された文書に与える影響を示しています。</p>
+
+<figure><img alt="theme-color を使用した影響を表す図" src="theme-color.png">
+<figcaption><small>画像の出典: <a href="https://developers.google.com/web/fundamentals/design-and-ux/browser-customization">Icons &amp; Browser Colors</a> より、<a href="https://developers.google.com/readme/policies">Google</a> が作成・共有し <a href="https://creativecommons.org/licenses/by/4.0/">Creative Commons 4.0 Attribution License</a> に記載された条件に従って使用されています。</small></figcaption>
+</figure>
+
+<p>{{htmlattrxref("media", "meta")}} 属性で、メディア種別やクエリーを指定することができ、メディアの条件が真である場合にのみ、色が設定されます。例えば、以下のようになります。</p>
+
+<pre class="brush: html">&lt;meta name="theme-color" media="(prefers-color-scheme: light)" content="white"&gt;
+&lt;meta name="theme-color" media="(prefers-color-scheme: dark)" content="black"&gt;</pre>
+
+<h2 id="Specifications">仕様書</h2>
+
+<p>{{Specifications}}</p>
+
+<h2 id="Browser_compatibility">ブラウザーの互換性</h2>
+
+<p>{{Compat}}</p>
diff --git a/files/ja/web/html/element/meta/name/theme-color/theme-color.png b/files/ja/web/html/element/meta/name/theme-color/theme-color.png
new file mode 100644
index 0000000000..ef9ea7378e
--- /dev/null
+++ b/files/ja/web/html/element/meta/name/theme-color/theme-color.png
diff --git a/files/ja/web/html/element/pre/index.html b/files/ja/web/html/element/pre/index.html
index 54cc767dbe..e8b8ffd1d1 100644
--- a/files/ja/web/html/element/pre/index.html
+++ b/files/ja/web/html/element/pre/index.html
@@ -4,30 +4,29 @@ slug: Web/HTML/Element/pre
 tags:
   - HTML
   - HTML コンテンツグループ化
-  - 'HTML:フローコンテンツ'
-  - 'HTML:知覚可能コンテンツ'
+  - HTML:フローコンテンツ
+  - HTML:知覚可能コンテンツ
   - ウェブ
   - リファレンス
   - 要素
+browser-compat: html.elements.pre
 translation_of: Web/HTML/Element/pre
 ---
 <div>{{HTMLRef}}</div>
 
-<p><strong>HTML <code>&lt;pre&gt;</code> 要素</strong>は、整形済みテキスト (preformatted text) を表します。この要素内のテキストは一般的に、ファイル内でのレイアウトをそのまま反映して等幅 ("<a href="/ja/docs/XUL/Style/monospace">monospace</a>") フォントで表示されます。この要素内のホワイトスペース文字はそのまま表示します。</p>
+<p><strong><code>&lt;pre&gt;</code></strong> は <a href="/ja/docs/Web/HTML">HTML</a> の要素で、整形済みテキスト (preformatted text) を表します。この要素内のテキストは一般的に、ファイル内でのレイアウトをそのまま反映して<a href="https://ja.wikipedia.org/wiki/等幅フォント">等幅フォント</a>で表示されます。この要素内のホワイトスペース文字はそのまま表示します。</p>
 
 <div>{{EmbedInteractiveExample("pages/tabbed/pre.html", "tabbed-standard")}}</div>
 
-<p class="hidden">この対話型サンプルのソースファイルは GitHub リポジトリに格納されています。対話型サンプルプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p>
-
 <table class="properties">
  <tbody>
   <tr>
-   <th scope="row"><a href="/ja/docs/Web/HTML/Content_categories">コンテンツカテゴリ</a></th>
-   <td><a href="/ja/docs/Web/HTML/Content_categories#Flow_content">フローコンテンツ</a>、知覚可能コンテンツ</td>
+   <th scope="row"><a href="/ja/docs/Web/Guide/HTML/Content_categories">コンテンツカテゴリー</a></th>
+   <td><a href="/ja/docs/Web/Guide/HTML/Content_categories#flow_content">フローコンテンツ</a>、知覚可能コンテンツ</td>
   </tr>
   <tr>
    <th scope="row">許可されている内容</th>
-   <td><a href="/ja/docs/Web/HTML/Content_categories#Phrasing_content">記述コンテンツ</a></td>
+   <td><a href="/ja/docs/Web/Guide/HTML/Content_categories#phrasing_content">記述コンテンツ</a></td>
   </tr>
   <tr>
    <th scope="row">タグの省略</th>
@@ -35,7 +34,11 @@ translation_of: Web/HTML/Element/pre
   </tr>
   <tr>
    <th scope="row">許可されている親要素</th>
-   <td><a href="/ja/docs/Web/HTML/Content_categories#Flow_content">フローコンテンツ</a>を受け入れるすべての要素</td>
+   <td><a href="/ja/docs/Web/Guide/HTML/Content_categories#flow_content">フローコンテンツ</a>を受け入れるすべての要素</td>
+  </tr>
+  <tr>
+   <th scope="row">暗黙の ARIA ロール</th>
+   <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">対応するロールなし</a></td>
   </tr>
   <tr>
    <th scope="row">許可されている ARIA ロール</th>
@@ -48,45 +51,44 @@ translation_of: Web/HTML/Element/pre
  </tbody>
 </table>
 
-<h2 id="Attributes" name="Attributes">属性</h2>
+<h2 id="Attributes">属性</h2>
 
 <p>この要素は<a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>のみを持ちます。</p>
 
 <dl>
- <dt>{{htmlattrdef("cols")}} {{non-standard_inline}}{{obsolete_inline}}</dt>
+ <dt>{{htmlattrdef("cols")}} {{non-standard_inline}}{{deprecated_inline}}</dt>
  <dd>1行あたりの<em>望ましい</em>文字数を示します。これは {{htmlattrxref("width", "pre")}} の標準外の別名です。同様の効果を得るには、CSS の {{Cssxref("width")}} を使用してください。</dd>
- <dt>{{htmlattrdef("width")}} {{obsolete_inline}}</dt>
+ <dt>{{htmlattrdef("width")}} {{deprecated_inline}}</dt>
  <dd>1行あたりの<em>望ましい</em>文字数を示します。この属性は技術的には実装されていますが、視覚上の効果はありません。同様の効果を得るには、CSS の {{Cssxref("width")}} を使用してください。</dd>
  <dt>{{htmlattrdef("wrap")}} {{non-standard_inline}}</dt>
  <dd>テキストがはみ出た場合の処理に関する<em>ヒント</em>を示します。現行のブラウザーはこのヒントを無視して、視覚上の効果をもたらしません。同様の効果を得るには、CSS の {{Cssxref("white-space")}} を使用してください。</dd>
 </dl>
 
-<h2 id="Examples" name="Examples">例</h2>
+<h2 id="Example">例</h2>
+
+<h3 id="HTML">HTML</h3>
 
 <pre class="brush: html">&lt;!-- CSS コードを表示する例 --&gt;
 &lt;pre&gt;
 body {
-  color:red;
+  color: red;
 }
 &lt;/pre&gt;
 </pre>
 
-<h3 id="Result" name="Result">結果</h3>
+<h3 id="Result">結果</h3>
 
-<pre>body {
-  color:red;
-}
-</pre>
+<p>{{EmbedLiveSample("Example")}}</p>
 
-<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮事項</h2>
+<h2 id="Accessibility_concerns">アクセシビリティの考慮</h2>
 
 <p>整形済みテキストを使用して作られた絵や図に対して、別な説明を提供することは重要です。この別な説明は、明確かつ簡潔に絵や図の中身を説明するものにしてください。</p>
 
 <p>弱視の人や、読み上げソフトのような支援技術を使用している人は、順番に読んだときに整形済みテキストで表現されているものが何か理解できないかもしれません。</p>
 
-<p>{{HTMLElement("figure")}} 及び {{HTMLElement("figcaption")}} 要素の組み合わせに、 {{htmlattrxref("id")}} 及び <a href="/ja/docs/Web/Accessibility/ARIA">ARIA</a> <code>role</code> 及び <code>aria-labelledby</code> 属性を補ったもので、整形済みテキストを図形として扱い、 <code>figcaption</code> を図形の別の説明として提供することができます。</p>
+<p>{{HTMLElement("figure")}} および {{HTMLElement("figcaption")}} 要素の組み合わせに、 {{htmlattrxref("id")}} および <a href="/ja/docs/Web/Accessibility/ARIA">ARIA</a> <code>role</code> および <code>aria-labelledby</code> 属性を補ったもので、整形済みテキストを図形として扱い、 <code>figcaption</code> を図形の別の説明として提供することができます。</p>
 
-<h3 id="Example" name="Example">例</h3>
+<h3 id="Example_2">例</h3>
 
 <pre>&lt;figure role="img" aria-labelledby="cow-caption"&gt;
   &lt;pre&gt;
@@ -106,45 +108,21 @@ body {
 </pre>
 
 <ul>
- <li><a href="/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.1_—_Providing_text_alternatives_for_non-text_content">MDN "WCAG を理解する ― ガイドライン 1.1 の解説"</a></li>
+ <li><a href="/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.1_—_providing_text_alternatives_for_non-text_content">MDN "WCAG を理解する ― ガイドライン 1.1 の解説"</a></li>
  <li><a href="https://www.w3.org/TR/WCAG20-TECHS/H86.html">H86: Providing text alternatives for ASCII art, emoticons, and leetspeak | W3C Techniques for WCAG 2.0</a></li>
 </ul>
 
-<h2 id="Specifications" name="Specifications">仕様書</h2>
+<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('HTML WHATWG', 'semantics.html#the-pre-element', '&lt;pre&gt;')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td>{{SpecName("HTML5 W3C")}} から重大な変更はない</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-pre-element', '&lt;pre&gt;')}}</td>
-   <td>{{Spec2('HTML5 W3C')}}</td>
-   <td>{{SpecName("HTML4.01")}} から重大な変更はない</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML4.01', 'struct/text.html#h-9.3.4', '&lt;pre&gt;')}}</td>
-   <td>{{Spec2('HTML4.01')}}</td>
-   <td><code>cols</code> 属性を非推奨に変更</td>
-  </tr>
- </tbody>
-</table>
+<p>{{Specifications}}</p>
 
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
+<h2 id="Browser_compatibility">ブラウザーの互換性</h2>
 
-<p>{{Compat("html.elements.pre")}}</p>
+<p>{{Compat}}</p>
 
-<h2 id="See_also" name="See_also">関連情報</h2>
+<h2 id="See_also">関連情報</h2>
 
 <ul>
  <li>CSS: {{Cssxref('white-space')}}, {{Cssxref('word-break')}}</li>
+ <li>関連する要素: {{HTMLElement("code")}}</li>
 </ul>
diff --git a/files/ja/web/html/element/xmp/index.html b/files/ja/web/html/element/xmp/index.html
index 639da9a3c8..a2e858eb0f 100644
--- a/files/ja/web/html/element/xmp/index.html
+++ b/files/ja/web/html/element/xmp/index.html
@@ -26,7 +26,7 @@ translation_of: Web/HTML/Element/xmp
 
 <h2 id="Attributes" name="Attributes">属性</h2>
 
-<p>この要素は、すべての要素が持つ <a href="/ja/docs/HTML/global_attributes" rel="internal" title="ja/docs/HTML/global attributes">グローバル属性</a> 以外の属性を持ちません。</p>
+<p>この要素は、すべての要素が持つ <a href="/ja/docs/HTML/global_attributes" rel="internal">グローバル属性</a> 以外の属性を持ちません。</p>
 
 <h2 id="DOM_interface" name="DOM_interface">DOM インターフェイス</h2>
 
diff --git a/files/ja/web/html/inline_elements/index.html b/files/ja/web/html/inline_elements/index.html
index cb1100ea03..6d4ba241e0 100644
--- a/files/ja/web/html/inline_elements/index.html
+++ b/files/ja/web/html/inline_elements/index.html
@@ -161,7 +161,7 @@ the block-level element's influence.&lt;/div&gt;</pre>
 <h2 id="See_also" name="See_also">関連情報</h2>
 
 <ul>
- <li><a href="/ja/HTML/Block-level_elements" title="ja/HTML/Block-level_elements">ブロックレベル要素</a></li>
+ <li><a href="/ja/HTML/Block-level_elements">ブロックレベル要素</a></li>
  <li><a href="/ja/docs/Web/HTML/Element">HTML 要素リファレンス</a></li>
  <li>{{cssxref("display")}}</li>
  <li><a href="/ja/docs/Web/Guide/HTML/Content_categories">コンテンツカテゴリ</a></li>
diff --git a/files/ja/web/http/conditional_requests/index.html b/files/ja/web/http/conditional_requests/index.html
deleted file mode 100644
index 9a3c57338b..0000000000
--- a/files/ja/web/http/conditional_requests/index.html
+++ /dev/null
@@ -1,148 +0,0 @@
----
-title: HTTP 条件付きリクエスト
-slug: Web/HTTP/Conditional_requests
-tags:
-  - Conditional Requests
-  - Guide
-  - HTTP
-translation_of: Web/HTTP/Conditional_requests
----
-<p>{{HTTPSidebar}}</p>
-
-<p class="summary">HTTP には<em>条件付きリクエスト</em>の概念があり、対象となるリソースと<em>検証子</em>の値とを比較することで、リクエストの結果や、成功か失敗かまでもが変化することがあります。このようなリクエストは、キャッシュの内容を検証して、無用な制御を避けたり、ダウンロードの再開の時などに文書の整合性を検証したり、サーバー上の文書をアップロードまたは変更するときに更新内容を失うことを避ける場合などに役立つことがあります。</p>
-
-<h2 id="Principles" name="Principles">原理</h2>
-
-<p>HTTP 条件付きリクエストは、特定のヘッダーの値に応じて異なる処理が行われるリクエストです。これらのヘッダーは前提条件を定義しており、リクエストの結果は前提条件に一致するか否かに応じて変わります。</p>
-
-<p>リクエストで使用したメソッドや前提条件で使用したヘッダー一式によって、さまざまな動作が定義されています。</p>
-
-<ul>
- <li>{{HTTPMethod("GET")}} などの{{glossary("safe", "安全な")}}メソッドは、一般に文書を取得するメソッドであり、条件付きリクエストは関連する文書のみを返信するために利用することができます。これによって、帯域を節約します。</li>
- <li>{{HTTPMethod("PUT")}} などの{{glossary("safe", "安全ではない")}}メソッドは、一般に文書をアップロードするメソッドであり、条件付きリクエストは文書がサーバーに格納されているものと同じものに基づいたものである場合に限ってアップロードするようにするために利用することができます。</li>
-</ul>
-
-<h2 id="Validators" name="Validators">検証子</h2>
-
-<p>すべての条件ヘッダーは、サーバーに保存されているリソースが特定のバージョンに一致するか確認を試みます。このため、条件付きリクエストではリソースのバージョンを示す必要があります。リソース全体をバイト単位で比較することは不可能であり、常に望まれていることとは限らないので、リクエストはバージョンを記述する値を送信します。このような値は<em>検証子</em>と呼ばれ、二種類があります。</p>
-
-<ul>
- <li>文書が最後に変更された日時である <em>last-modified</em> の日時</li>
- <li><em>エンティティタグ</em>または <em>etag</em> と呼ばれる、各バージョンを一意に識別する不透明な文字列。</li>
-</ul>
-
-<p>同じリソースのバージョンの比較は少々複雑です。状況によって、二種類の<em>確認方法</em>があります。</p>
-
-<ul>
- <li><ruby>強い検証<rp> (</rp><rt>Strong validation</rt><rp>) </rp></ruby>は、ダウンロードを再開するときなど、バイト単位の同一性が求められる場合に使用します。</li>
- <li><ruby>弱い検証<rp> (</rp><rt>Weak validation</rt><rp>) </rp></ruby>は、ユーザーエージェントが二つのリソースが同じであることを確認することだけが必要である場合に使用します。これは広告の違いやフッターの日付の違いなど、小さな違いがある場合も含みます。</li>
-</ul>
-
-<p>検証の種類と使用される検証子は独立しています。 {{HTTPHeader("Last-Modified")}} と {{HTTPHeader("ETag")}} はどちらの種類の検証もできますが、サーバー側の実装の複雑さは異なります。 HTTP は既定で強い検証を使用し、弱い検証を使用するときはそれを指定します。</p>
-
-<h3 id="Strong_validation" name="Strong_validation">強い検証</h3>
-
-<p id="sect1">強い検証は、比較対象のリソースがバイト単位で同一であることを保証します。これは一部の条件ヘッダーで必須、また他のヘッダーでは既定の要件です。強い検証はとても厳密であり、サーバーレベルで保証することが困難である場合もありますが、時には性能を犠牲にしても、データが失われていないことを常に保証します。</p>
-
-<p>{{HTTPHeader("Last-Modified")}} で強い検証のための一意な識別子を持つことは、とても困難です。多くの場合、リソースの MD5 ハッシュ (あるいはその派生物) を持つ {{HTTPHeader("ETag")}} を使用します。</p>
-
-<h3 id="Weak_validation" name="Weak_validation">弱い検証</h3>
-
-<p>弱い検証は、内容が等価であるなら二つのバージョンの文書が等しいと見なされるという点で、強い検証と異なります。例えばフッターの日付だけ、あるいは広告だけが異なる二つのページは、弱い検証では<em>同一</em>であるとみなされますが、強い検証では異なるものとみなされます。弱い検証を作り出す etag のシステムを構築することは、ページのさまざまな要素の重要性を知ることが伴うため複雑になるかもしれませんが、キャッシュの性能を最適化するためにとても役に立ちます。</p>
-
-<h2 id="Conditional_headers" name="Conditional_headers">条件ヘッダー</h2>
-
-<p>条件ヘッダーと呼ばれるいくつかの HTTP ヘッダーが、条件付きリクエストをもたらします。</p>
-
-<dl>
- <dt>{{HTTPHeader("If-Match")}}</dt>
- <dd>遠方のリソースの {{HTTPHeader("ETag")}} と、このヘッダーに載せた etag が等しければ成功します。デフォルトでは etag に接頭辞 <code>'W/'</code> がついていない限り、強い検証を行います。</dd>
- <dt>{{HTTPHeader("If-None-Match")}}</dt>
- <dd>遠方のリソースの {{HTTPHeader("ETag")}} と、このヘッダーに載せたそれぞれの etag が異なっていれば成功します。デフォルトでは etag に接頭辞 <code>'W/'</code> がついていない限り、強い検証を行います。</dd>
- <dt>{{HTTPHeader("If-Modified-Since")}}</dt>
- <dd>遠方のリソースの {{HTTPHeader("Last-Modified")}} の日時が、このヘッダーで指定した日時より新しければ成功します。</dd>
- <dt>{{HTTPHeader("If-Unmodified-Since")}}</dt>
- <dd>遠方のリソースの {{HTTPHeader("Last-Modified")}} の日時が、このヘッダーで指定した日時より過去または同一であれば成功します。</dd>
- <dt>{{HTTPHeader("If-Range")}}</dt>
- <dd>{{HTTPHeader("If-Match")}} や {{HTTPHeader("If-Unmodified-Since")}} に似ていますが、 etag または日時をひとつしか持つことができません。条件が失敗すると範囲指定リクエストも失敗して、 {{HTTPStatus("206")}} <code>Partial Content</code> レスポンスの代わりに {{HTTPStatus("200")}} <code>OK</code> でリソース全体を送信します。</dd>
-</dl>
-
-<h2 id="Use_cases" name="Use_cases">使用例</h2>
-
-<h3 id="Cache_update" name="Cache_update">キャッシュの更新</h3>
-
-<p>条件付きリクエストのもっとも一般的な使用例は、キャッシュの更新です。キャッシュが空である、あるいはキャッシュを使用しない状態では {{HTTPStatus("200")}} <code>OK</code> ステータスと共に、要求したリソースが送信されます。</p>
-
-<p><img alt="The request issued when the cache is empty triggers the resource to be downloaded, with both validator value sent as headers. The cache is then filled." src="https://mdn.mozillademos.org/files/13729/Cache1.png" style="height: 265px; width: 741px;"></p>
-
-<p>リソースと共に、ヘッダーで検証子を送信します。この例では {{HTTPHeader("Last-Modified")}} と {{HTTPHeader("ETag")}} の両方を送信していますが、どちらか一方しか使用しません。これらの検証子はリソースと共に (すべてのヘッダーのように) キャッシュへ保存され、キャッシュが陳腐化したときに条件付きリクエストを作成するために使用します。</p>
-
-<p>キャッシュが陳腐化していなければ、条件付きリクエストは行いません。しかしキャッシュが陳腐化すると主に {{HTTPHeader("Cache-Control")}} ヘッダーに制御されて、クライアントはキャッシュされた値を直接使用せず、{{HTTPHeader("If-Modified-Since")}} または {{HTTPHeader("If-Match")}} ヘッダーに検証子の値を指定した<em>条件付きリクエスト</em>を発行します。</p>
-
-<p>リソースが変更されていなければ、サーバーは {{HTTPStatus("304")}} <code>Not Modified</code> レスポンスを返します。これはキャッシュを再び新鮮な状態にして、クライアントはキャッシュされたリソースを使用します。これはリソースをいくらか消費するレスポンスとリクエストのやり取りが発生しますが、通信網でリソース全体を再度転送するよりも効率的です。</p>
-
-<p><img alt="With a stale cache, the conditional request is sent. The server can determine if the resource changed, and, as in this case, decide not to send it again as it is the same." src="https://mdn.mozillademos.org/files/13731/HTTPCache2.png" style="height: 265px; width: 741px;"></p>
-
-<p>リソースが変更された場合は、サーバーは条件付きではないリクエストと同様に {{HTTPStatus("200")}}<code> OK</code> レスポンスで新しいバージョンのリソースを送信します。そして、クライアントは新しいリソースを使用します (また、それをキャッシュします)。</p>
-
-<p><img alt="In the case where the resource was changed, it is sent back as if the request wasn't conditional." src="https://mdn.mozillademos.org/files/13733/HTTPCache3.png"></p>
-
-<p>サーバー側で検証子を設定することをを除いて、この仕組みは透過的です。どのブラウザーもウェブ開発者が特別な作業を行うことなく、キャッシュを管理してこのような条件付きリクエストを送信します。</p>
-
-<h3 id="Integrity_of_a_partial_download" name="Integrity_of_a_partial_download">部分ダウンロードの整合性</h3>
-
-<p>ファイルの部分ダウンロードは、以前の操作を再開することが可能な HTTP の機能であり、すでに取得済みの情報を保持することによって帯域や時間を節約します。</p>
-
-<p><img alt="A download has been stopped and only partial content has been retrieved." src="https://mdn.mozillademos.org/files/16190/HTTPResume1.png" style="height: 397px; width: 764px;"></p>
-
-<p>部分ダウンロードをサポートするサーバーは、{{HTTPHeader("Accept-Ranges")}} ヘッダーを送信してそのことを知らせます。このヘッダーが送信されると、クライアントは {{HTTPHeader("Ranges")}} ヘッダーで欠落している範囲を送信することで、ダウンロードを再開できます。</p>
-
-<p><img alt="The client resumes the requests by indicating the range he needs and preconditions checking the validators of the partially obtained request." src="https://mdn.mozillademos.org/files/13737/HTTPResume2.png"></p>
-
-<p>この原理はシンプルですが、潜在的な問題がひとつあります。2 回のダウンロードの間にリソースが変更されると、取得した範囲が 2 つの異なるバージョンのリソースに対応してしまい、最終的な文書が壊れてしまうでしょう。</p>
-
-<p>これを防ぐため、条件付きリクエストを使用します。範囲についてこれを行うための方法が 2 つあります。より柔軟な方法は {{HTTPHeader("If-Modified-Since")}} と {{HTTPHeader("If-Match")}} を使用することであり、前提条件に合わない場合はサーバーがエラーを返します。すると、クライアントはダウンロードを始めから再実行します。</p>
-
-<p><img alt="When the partially downloaded resource has been modified, the preconditions will fail and the resource will have to be downloaded again completely." src="https://mdn.mozillademos.org/files/13739/HTTPResume3.png"></p>
-
-<p>この方法でも動作しますが、文書が変更されると余分なレスポンスやリクエストの交換が発生します。これはパフォーマンスを低下させますので HTTP には、この問題を避けるために特化した追加ヘッダーである {{HTTPHeader("If-Range")}} があります。</p>
-
-<p><img alt="The If-Range headers allows the server to directly send back the complete resource if it has been modified, no need to send a 412 error and wait for the client to re-initiate the download." src="https://mdn.mozillademos.org/files/13741/HTTPResume4.png" style="height: 263px; width: 770px;"></p>
-
-<p>この解決策はより効率的ですが、柔軟性が若干劣ります (条件で etag をひとつしか使用できません)。ただし、これ以上の柔軟性はほとんど必要ありません。</p>
-
-<h3 id="Avoiding_the_lost_update_problem_with_optimistic_locking" name="Avoiding_the_lost_update_problem_with_optimistic_locking">楽観的ロックでロストアップデートを避ける</h3>
-
-<p>リモートの文書の<em>更新</em>は、ウェブアプリケーションで一般的な操作です。これはファイルシステムやソース管理アプリケーションではごく一般的ですが、リモートにリソースを保存できるようにするにはこのような仕組みが必要です。同様に、wiki のような一般的なウェブサイトや他の CMS でも必要です。</p>
-
-<p>{{HTTPMethod("PUT")}} を使用して、この機能を実装できます。クライアントは始めに元のファイルを読み込んで、変更した後にサーバーへ送信します。</p>
-
-<p><img alt="Updating a file with a PUT is very simple when concurrency is not involved." src="https://mdn.mozillademos.org/files/13743/HTTPLock1.png"></p>
-
-<p>残念ながら、並行処理を考慮すると若干の間違いが出てきます。あるクライアントがリソースの新たな複製をローカルで変更している間に、第二のクライアントが同じリソースを取得して、クライアント側で同じことを行えます。これにより、とても不幸なことが発生します。両者がリソースを引き渡すと、最初のクライアントが渡した変更点が次に渡されたものによって破棄されて、第二のクライアントは新たな変更点に気づきません。誰が勝ち取ったかの結果は他者には伝わりませんが、どのクライアントの変更点が反映されるかは引き渡す速度によって変わります。またその速度はクライアントやサーバーのパフォーマンス、さらにはクライアント側で人間が文書を編集するパフォーマンスに依存します。勝ち取る者は、その時々で変わります。これは{{glossary("race condition","競合状態")}}であり、検出やデバッグが難しい不確かな動作をもたらします。</p>
-
-<p><img alt="When several clients update the same resource in parallel, we are facing a race condition: the slowest win, and the others don't even know they lost. Problematic!" src="https://mdn.mozillademos.org/files/13749/HTTPLock2.png" style="height: 504px; width: 904px;"></p>
-
-<p>2 つのクライアントの片方を困らせることなく、この問題に対処する方法はありません。しかし、ロストアップデートや競合状態は避けるべきです。予測可能な結果や、クライアントが変更点を却下されたときに通知を受けることを望みます。</p>
-
-<p>条件付きリクエストで、<em>楽観的ロックアルゴリズム</em> (ほとんどの wiki やソース管理システムで使用されています) を実装できます。この考え方ではすべてのクライアントに、リソースの複製の取得を許可してローカルで変更することを許可します。そして、最初のクライアントが更新内容を送信することを許可して成功させて、以降の古いバージョンになったリソースに基づく更新は拒否します。</p>
-
-<p><img alt="Conditional requests allow to implement optimistic locking: now the quickest wins, and the others get an error." src="https://mdn.mozillademos.org/files/13751/HTTPLock3.png" style="height: 471px; width: 904px;"></p>
-
-<p>これは {{HTTPHeader("If-Match")}} および {{HTTPHeader("If-Unmodified-Since")}} ヘッダーを使用して実装します。etag が元のファイルと一致しない、あるいはファイルが取得したときから変更されている場合は、変更点が {{HTTPStatus("412")}} <code>Precondition Failed</code> エラーで拒否されます。このエラーへの対処はクライアント次第であり、今度は最新のバージョンで再び実行するよう人間に通知する、あるいは "diff" を表示して変更点を維持するかを人間が選択できるように支援します。</p>
-
-<h3 id="Dealing_with_the_first_upload_of_a_resource" name="Dealing_with_the_first_upload_of_a_resource">リソースの最初のアップロードに対処する</h3>
-
-<p>リソースの最初のアップロードは、前述の状況の特別なケースです。リソースの更新と同様に、2 つのクライアントが同時 (あるいはほぼ同時) にアップロードしようとする競合状態を仮定します。これを防ぐために条件付きリクエストを使用できます。すべての etag を表す特別な値 <code>'*'</code> を持つ {{HTTPHeader("If-None-Match")}} を追加することで、それより前のリクエストが存在しない場合に限り、リクエストが成功します。</p>
-
-<p><img alt="Like for a regular upload, the first upload of a resource is subject to a race condition: If-None-Match can prevent it." src="https://mdn.mozillademos.org/files/13753/HTTPFirst.png" style="height: 311px; width: 895px;"></p>
-
-<p><code>If-None-Match</code> は HTTP/1.1 (およびそれ以降) に準拠するサーバーのみで動作します。サーバーが対応しているかが不明である場合は、始めに確認用の {{HTTPMethod("HEAD")}} リクエストをリソースに対して発行しなければなりません。</p>
-
-<h2 id="Conclusion" name="Conclusion">まとめ</h2>
-
-<p>条件付きリクエストは HTTP の重要な機能であり、効率的で複雑なアプリケーションの構築を可能にします。キャッシュやダウンロードの再開について、ウェブマスターに求められる作業はサーバーを適切に設定することだけです (一部の環境では正しい etag を設定することが難しいかもしれません)。また、ブラウザーが適切な条件付きリクエストを実行しますので、ウェブ開発者に求められる作業はありません</p>
-
-<p>一方、ロックの仕組みでは、ウェブ開発者が適切なヘッダーを伴ってリクエストを発行しなければなりません。ウェブマスターはほとんどの場合、それらの確認をアプリケーションに頼ることができるでしょう。</p>
-
-<p>どちらにせよ、条件付きリクエストはウェブの重要な機能であることは明らかです。</p>
diff --git a/files/ja/web/http/conditional_requests/index.md b/files/ja/web/http/conditional_requests/index.md
new file mode 100644
index 0000000000..a02ce7ac95
--- /dev/null
+++ b/files/ja/web/http/conditional_requests/index.md
@@ -0,0 +1,140 @@
+---
+title: HTTP 条件付きリクエスト
+slug: Web/HTTP/Conditional_requests
+tags:
+  - Conditional Requests
+  - Guide
+  - HTTP
+translation_of: Web/HTTP/Conditional_requests
+---
+{{HTTPSidebar}}
+
+HTTP には*条件付きリクエスト*の概念があり、対象となるリソースと*検証子*の値とを比較することで、リクエストの結果や、成功か失敗かまでもが変化することがあります。このようなリクエストは、キャッシュの内容を検証して、無用な制御を避けたり、ダウンロードの再開の時などに文書の整合性を検証したり、サーバー上の文書をアップロードまたは変更するときに更新内容を失うことを避ける場合などに役立つことがあります。
+
+## 原理
+
+HTTP 条件付きリクエストは、特定のヘッダーの値に応じて異なる処理が行われるリクエストです。これらのヘッダーは前提条件を定義しており、リクエストの結果は前提条件に一致するか否かに応じて変わります。
+
+リクエストで使用したメソッドや前提条件で使用したヘッダー一式によって、さまざまな動作が定義されています。
+
+- {{HTTPMethod("GET")}} などの{{glossary("safe", "安全な")}}メソッドは、一般に文書を取得するメソッドであり、条件付きリクエストは関連する文書のみを返信するために利用することができます。これによって、帯域を節約します。
+- {{HTTPMethod("PUT")}} などの{{glossary("safe", "安全ではない")}}メソッドは、一般に文書をアップロードするメソッドであり、条件付きリクエストは文書がサーバーに格納されているものと同じものに基づいたものである場合に限ってアップロードするようにするために利用することができます。
+
+## 検証子
+
+すべての条件ヘッダーは、サーバーに保存されているリソースが特定のバージョンに一致するか確認を試みます。このため、条件付きリクエストではリソースのバージョンを示す必要があります。リソース全体をバイト単位で比較することは不可能であり、常に望まれていることとは限らないので、リクエストはバージョンを記述する値を送信します。このような値は*検証子*と呼ばれ、二種類があります。
+
+- 文書が最後に変更された日時である _last-modified_ の日時
+- *エンティティタグ*または _etag_ と呼ばれる、各バージョンを一意に識別する不透明な文字列。
+
+同じリソースのバージョンの比較は少々複雑です。状況によって、二種類の*確認方法*があります。
+
+- 強い検証 (Strong validation) は、ダウンロードを再開するときなど、バイト単位の同一性が求められる場合に使用します。
+- 弱い検証 (Weak validation) は、ユーザーエージェントが二つのリソースが同じであることを確認することだけが必要である場合に使用します。これは広告の違いやフッターの日付の違いなど、小さな違いがある場合も含みます。
+
+検証の種類と使用される検証子は独立しています。 {{HTTPHeader("Last-Modified")}} と {{HTTPHeader("ETag")}} はどちらの種類の検証もできますが、サーバー側の実装の複雑さは異なります。 HTTP は既定で強い検証を使用し、弱い検証を使用するときはそれを指定します。
+
+### 強い検証
+
+強い検証は、比較対象のリソースがバイト単位で同一であることを保証します。これは一部の条件ヘッダーで必須、また他のヘッダーでは既定の要件です。強い検証はとても厳密であり、サーバーレベルで保証することが困難である場合もありますが、時には性能を犠牲にしても、データが失われていないことを常に保証します。
+
+{{HTTPHeader("Last-Modified")}} で強い検証のための一意な識別子を持つことは、とても困難です。多くの場合、リソースの MD5 ハッシュ (あるいはその派生物) を持つ {{HTTPHeader("ETag")}} を使用します。
+
+### 弱い検証
+
+弱い検証は、内容が等価であるなら二つのバージョンの文書が等しいと見なされるという点で、強い検証と異なります。例えばフッターの日付だけ、あるいは広告だけが異なる二つのページは、弱い検証では*同一*であるとみなされますが、強い検証では異なるものとみなされます。弱い検証を作り出す etag のシステムを構築することは、ページのさまざまな要素の重要性を知ることが伴うため複雑になるかもしれませんが、キャッシュの性能を最適化するためにとても役に立ちます。
+
+## 条件ヘッダー
+
+条件ヘッダーと呼ばれるいくつかの HTTP ヘッダーが、条件付きリクエストをもたらします。
+
+- {{HTTPHeader("If-Match")}}
+  - : 遠方のリソースの {{HTTPHeader("ETag")}} と、このヘッダーに載せた etag が等しければ成功します。既定では etag に接頭辞 `'W/'` がついていない限り、強い検証を行います。
+- {{HTTPHeader("If-None-Match")}}
+  - : 遠方のリソースの {{HTTPHeader("ETag")}} と、このヘッダーに載せたそれぞれの etag が異なっていれば成功します。既定では etag に接頭辞 `'W/'` がついていない限り、強い検証を行います。
+- {{HTTPHeader("If-Modified-Since")}}
+  - : 遠方のリソースの {{HTTPHeader("Last-Modified")}} の日時が、このヘッダーで指定した日時より新しければ成功します。
+- {{HTTPHeader("If-Unmodified-Since")}}
+  - : 遠方のリソースの {{HTTPHeader("Last-Modified")}} の日時が、このヘッダーで指定した日時より過去または同一であれば成功します。
+- {{HTTPHeader("If-Range")}}
+  - : {{HTTPHeader("If-Match")}} や {{HTTPHeader("If-Unmodified-Since")}} に似ていますが、 etag または日時をひとつしか持つことができません。条件が失敗すると範囲指定リクエストも失敗して、 {{HTTPStatus("206")}} `Partial Content` レスポンスの代わりに {{HTTPStatus("200")}} `OK` でリソース全体を送信します。
+
+## 使用例
+
+### キャッシュの更新
+
+条件付きリクエストのもっとも一般的な使用例は、キャッシュの更新です。キャッシュが空である、あるいはキャッシュを使用しない状態では {{HTTPStatus("200")}} `OK` ステータスと共に、要求したリソースが送信されます。
+
+![キャッシュが空のときに発行されたリクエストは、 リソースをダウンロードするきっかけとなり、 両方の検証子の値がヘッダーとして送信されます。その後、キャッシュが満たされます。](cache1.png)
+
+リソースと共に、ヘッダーで検証子を送信します。この例では {{HTTPHeader("Last-Modified")}} と {{HTTPHeader("ETag")}} の両方を送信していますが、どちらか一方しか使用しません。これらの検証子はリソースと共に (すべてのヘッダーのように) キャッシュへ保存され、キャッシュが陳腐化したときに条件付きリクエストを作成するために使用します。
+
+キャッシュが陳腐化していなければ、条件付きリクエストは行いません。しかしキャッシュが陳腐化すると主に {{HTTPHeader("Cache-Control")}} ヘッダーに制御されて、クライアントはキャッシュされた値を直接使用せず、{{HTTPHeader("If-Modified-Since")}} または {{HTTPHeader("If-Match")}} ヘッダーに検証子の値を指定した*条件付きリクエスト*を発行します。
+
+リソースが変更されていなければ、サーバーは {{HTTPStatus("304")}} `Not Modified` レスポンスを返します。これはキャッシュを再び新鮮な状態にして、クライアントはキャッシュされたリソースを使用します。これはリソースをいくらか消費するレスポンスとリクエストのやり取りが発生しますが、通信網でリソース全体を再度転送するよりも効率的です。
+
+![キャッシュが古くなっている状態では、条件付きのリクエストが送信されます。サーバーは、リソースが変更されたかどうかを判断し、このケースのように、同じものであるため再度送信しないことを決定することができます。](httpcache2.png)
+
+リソースが変更された場合は、サーバーは条件付きではないリクエストと同様に {{HTTPStatus("200")}}` OK` レスポンスで新しいバージョンのリソースを送信します。そして、クライアントは新しいリソースを使用します (また、それをキャッシュします)。
+
+![リソースが変更された場合には、リクエストが条件付きでなかったかのように送り返されます。](httpcache3.png)
+
+サーバー側で検証子を設定することをを除いて、この仕組みは透過的です。どのブラウザーもウェブ開発者が特別な作業を行うことなく、キャッシュを管理してこのような条件付きリクエストを送信します。
+
+### 部分ダウンロードの整合性
+
+ファイルの部分ダウンロードは、以前の操作を再開することが可能な HTTP の機能であり、すでに取得済みの情報を保持することによって帯域や時間を節約します。
+
+![ダウンロードが停止し、コンテンツの一部しか取得できていない状態です。](httpresume1.png)
+
+部分ダウンロードをサポートするサーバーは、{{HTTPHeader("Accept-Ranges")}} ヘッダーを送信してそのことを知らせます。このヘッダーが送信されると、クライアントは {{HTTPHeader("Ranges")}} ヘッダーで欠落している範囲を送信することで、ダウンロードを再開できます。
+
+![クライアントは、自分が必要とする範囲を示し、部分的に取得したリクエストの検証子を前提条件としてチェックすることで、リクエストを再開します。](httpresume2.png)
+
+この原理はシンプルですが、潜在的な問題がひとつあります。2 回のダウンロードの間にリソースが変更されると、取得した範囲が 2 つの異なるバージョンのリソースに対応してしまい、最終的な文書が壊れてしまうでしょう。
+
+これを防ぐため、条件付きリクエストを使用します。範囲についてこれを行うための方法が 2 つあります。より柔軟な方法は {{HTTPHeader("If-Modified-Since")}} と {{HTTPHeader("If-Match")}} を使用することであり、前提条件に合わない場合はサーバーがエラーを返します。すると、クライアントはダウンロードを始めから再実行します。
+
+![部分的にダウンロードされたリソースが変更された場合、前提条件が満たされず、リソースを完全にダウンロードし直さなければなりません。](httpresume3.png)
+
+この方法でも動作しますが、文書が変更されると余分なレスポンスやリクエストの交換が発生します。これはパフォーマンスを低下させますので HTTP には、この問題を避けるために特化した追加ヘッダーである {{HTTPHeader("If-Range")}} があります。
+
+![If-Range ヘッダーを使用すると、リソースが変更されている場合、サーバは直接完全なリソースを送り返すことができ、 412 エラーを送信してクライアントが再度ダウンロードを開始するのを待つ必要がありません。](httpresume4.png)
+
+この解決策はより効率的ですが、柔軟性が若干劣ります (条件で etag をひとつしか使用できません)。ただし、これ以上の柔軟性はほとんど必要ありません。
+
+### 楽観的ロックで更新が失われる問題を避ける
+
+リモートの文書の*更新*は、ウェブアプリケーションで一般的な操作です。これはファイルシステムやソース管理アプリケーションではごく一般的ですが、リモートにリソースを保存できるようにするにはこのような仕組みが必要です。同様に、wiki のような一般的なウェブサイトや他の CMS でも必要です。
+
+{{HTTPMethod("PUT")}} を使用して、この機能を実装できます。クライアントは始めに元のファイルを読み込んで、変更した後にサーバーへ送信します。
+
+![PUT によるファイルの更新は、並行処理ない場合はとても簡単です。](httplock1.png)
+
+残念ながら、並行処理を考慮すると若干の間違いが出てきます。あるクライアントがリソースの新たな複製をローカルで変更している間に、第二のクライアントが同じリソースを取得して、クライアント側で同じことを行えます。これにより、とても不幸なことが発生します。両者がリソースを引き渡すと、最初のクライアントが渡した変更点が次に渡されたものによって破棄されて、第二のクライアントは新たな変更点に気づきません。誰が勝ち取ったかの結果は他者には伝わりませんが、どのクライアントの変更点が反映されるかは引き渡す速度によって変わります。またその速度はクライアントやサーバーのパフォーマンス、さらにはクライアント側で人間が文書を編集するパフォーマンスに依存します。勝ち取る者は、その時々で変わります。これは*競合状態*であり、検出やデバッグが難しい不確かな動作をもたらします。
+
+![複数のクライアントが同じリソースを並行して更新していると、競合状態に陥ってしまいます。問題ですね。](httplock2.png)
+
+2 つのクライアントの片方を困らせることなく、この問題に対処する方法はありません。しかし、更新が失われたりや競合状態になったりすることは避けるべきです。予測可能な結果や、クライアントが変更点を却下されたときに通知を受けることを望みます。
+
+条件付きリクエストで、*楽観的ロックアルゴリズム* (ほとんどの wiki やソース管理システムで使用されています) を実装できます。この考え方ではすべてのクライアントに、リソースの複製の取得を許可してローカルで変更することを許可します。そして、最初のクライアントが更新内容を送信することを許可して成功させて、以降の古いバージョンになったリソースに基づく更新は拒否します。
+
+![条件付きリクエストにより、楽観的なロックを実装することができます。](httplock3.png)
+
+これは {{HTTPHeader("If-Match")}} および {{HTTPHeader("If-Unmodified-Since")}} ヘッダーを使用して実装します。etag が元のファイルと一致しない、あるいはファイルが取得したときから変更されている場合は、変更点が {{HTTPStatus("412")}} `Precondition Failed` エラーで拒否されます。このエラーへの対処はクライアント次第であり、今度は最新のバージョンで再び実行するよう人間に通知する、あるいは _diff_ を表示して変更点を維持するかを人間が選択できるように支援します。
+
+### リソースの最初のアップロードに対処する
+
+リソースの最初のアップロードは、前述の状況の特別なケースです。リソースの更新と同様に、2 つのクライアントが同時 (あるいはほぼ同時) にアップロードしようとする競合状態を仮定します。これを防ぐために条件付きリクエストを使用できます。すべての etag を表す特別な値 `'*'` を持つ {{HTTPHeader("If-None-Match")}} を追加することで、それより前のリクエストが存在しない場合に限り、リクエストが成功します。
+
+![通常のアップロードと同様に、リソースの最初のアップロードには競合状態が発生します。 If-None-Match で防ぐことができます。](httpfirst.png)
+
+`If-None-Match` は HTTP/1.1 (およびそれ以降) に準拠するサーバーのみで動作します。サーバーが対応しているかが不明である場合は、始めに確認用の {{HTTPMethod("HEAD")}} リクエストをリソースに対して発行しなければなりません。
+
+## まとめ
+
+条件付きリクエストは HTTP の重要な機能であり、効率的で複雑なアプリケーションの構築を可能にします。キャッシュやダウンロードの再開について、ウェブマスターに求められる作業はサーバーを適切に設定することだけです (一部の環境では正しい etag を設定することが難しいかもしれません)。また、ブラウザーが適切な条件付きリクエストを実行しますので、ウェブ開発者に求められる作業はありません
+
+一方、ロックの仕組みでは、ウェブ開発者が適切なヘッダーを伴ってリクエストを発行しなければなりません。ウェブマスターはほとんどの場合、それらの確認をアプリケーションに頼ることができるでしょう。
+
+どちらにせよ、条件付きリクエストはウェブの重要な機能であることは明らかです。
diff --git a/files/ja/web/http/headers/accept-language/index.html b/files/ja/web/http/headers/accept-language/index.html
index f3319e6f02..b21cdeb4a1 100644
--- a/files/ja/web/http/headers/accept-language/index.html
+++ b/files/ja/web/http/headers/accept-language/index.html
@@ -12,7 +12,7 @@ translation_of: Web/HTTP/Headers/Accept-Language
 ---
 <div>{{HTTPSidebar}}</div>
 
-<p>HTTP の <strong><code>Accept-Language</code></strong> リクエストヘッダーは、クライアントがどの言語を理解できるか、どの種類のロケールが推奨されるかを示します。 (言語というのは、英語のような自然言語を意味し、プログラミング言語ではありません。) <a href="/ja/docs/Web/HTTP/Content_negotiation">コンテンツネゴシエーション</a>を使用して、サーバーは提案されたものから一つを選択して使用し、 {{HTTPHeader("Content-Language")}} レスポンスヘッダーを使用してクライアントに選択結果を知らせます。ブラウザーはユーザーインターフェイスの言語に従って、このヘッダーに適切な値を設定し、ユーザーはこれを変更することができますが、稀です (そして指紋につながるとして難色を示されます)。</p>
+<p>HTTP の <strong><code>Accept-Language</code></strong> リクエストヘッダーは、クライアントがどの言語を理解できるか、どの種類のロケールが推奨されるかを示します。 (言語というのは、英語のような自然言語を意味し、プログラミング言語ではありません。) <a href="/ja/docs/Web/HTTP/Content_negotiation">コンテンツネゴシエーション</a>を使用して、サーバーは提案されたものから一つを選択して使用し、 {{HTTPHeader("Content-Language")}} レスポンスヘッダーを使用してクライアントに選択結果を知らせます。ブラウザーはユーザーインターフェイスの言語に従って、このヘッダーに適切な値を設定し、ユーザーはこれを変更することができますが、稀です (そしてフィンガープリントにつながるとして難色を示されます)。</p>
 
 <p>このヘッダーはヒントであり、サーバーが言語を判別するための方法として、明示的なユーザーの選択によって制御する特定の URL など、他のものがない場合に使用されます。サーバーは明示的な決定を上書きしないことを推奨します。 <code>Accept-Language</code> の中身はユーザーが制御できないことが良くあります（旅行中で外国のインターネットカフェを使用している場合など）。ユーザーはユーザーインターフェースのロケール以外の言語によるページを訪問したがっているかもしれません。</p>
 
diff --git a/files/ja/web/http/headers/content-type/index.html b/files/ja/web/http/headers/content-type/index.html
deleted file mode 100644
index 7f54b32569..0000000000
--- a/files/ja/web/http/headers/content-type/index.html
+++ /dev/null
@@ -1,122 +0,0 @@
----
-title: Content-Type
-slug: Web/HTTP/Headers/Content-Type
-tags:
-  - Content-Type
-  - HTTP
-  - Reference
-  - エンティティヘッダー
-  - ヘッダー
-translation_of: Web/HTTP/Headers/Content-Type
----
-<div>{{HTTPSidebar}}</div>
-
-<p><strong><code>Content-Type</code></strong> エンティティヘッダーは、リソースの{{Glossary("MIME type","メディア種別")}}を示すために使用します。</p>
-
-<p>レスポンスにおいては、 <code>Content-Type</code> ヘッダーはクライアントに返されたコンテンツが実際にはどのような種類のものであるかを伝えます。場合によってはブラウザーは MIME を推定し、このヘッダーの値に従わないこともあります。 {{HTTPHeader("X-Content-Type-Options")}} を <code>nosniff</code> に設定すると、この振舞いを防ぐことができます。</p>
-
-<p>要求においては ({{HTTPMethod("POST")}} または {{HTTPMethod("PUT")}} などで)、クライアントがサーバーにどのような種類のデータが実際に送られたかを伝えます。</p>
-
-<table class="properties">
- <tbody>
-  <tr>
-   <th scope="row">ヘッダー種別</th>
-   <td>{{Glossary("Entity header", "エンティティヘッダー")}}</td>
-  </tr>
-  <tr>
-   <th scope="row">{{Glossary("Forbidden header name", "禁止ヘッダー名")}}</th>
-   <td>いいえ</td>
-  </tr>
-  <tr>
-   <th scope="row">{{Glossary("CORS-safelisted response header", "CORS セーフリストレスポンスヘッダー")}}</th>
-   <td>はい</td>
-  </tr>
-  <tr>
-   <th scope="row">{{Glossary("CORS-safelisted request header", "CORS セーフリストリクエストヘッダー")}}</th>
-   <td>はい。 <em>CORS 危険リクエストヘッダーバイト</em>: <code>"():&lt;&gt;?@[\]{}</code>, Delete, Tab, 制御文字の 0x00 から 0x19 までを値に含むことができないという制限付きです。<br>
-    また、 MIME タイプの解釈値 (引数を除いたもの) が <code>application/x-www-form-urlencoded</code>, <code>multipart/form-data</code>, <code>text/plain</code> の何れかである必要があります。</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Syntax" name="Syntax">構文</h2>
-
-<pre class="syntaxbox">Content-Type: text/html; charset=UTF-8
-Content-Type: multipart/form-data; boundary=something
-</pre>
-
-<h2 id="Directives" name="Directives">ディレクティブ</h2>
-
-<dl>
- <dt><code>media-type</code></dt>
- <dd>リソースやデータの <a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types">MIME タイプ</a>です。</dd>
- <dt>charset</dt>
- <dd>標準の文字エンコーディングです。</dd>
- <dt>boundary</dt>
- <dd>マルチパートの本文では <code>boundary</code> ディレクティブが必要で、これはメールゲートウェイを通過しても大丈夫だと知られている文字の中から1～70文字で構成され、ホワイトスペースで終了しないものです。これはメッセージの複数パートの境界を囲むために使用します。ふつう、ヘッダーの境界は2本のダッシュで始まり、最後の境界には最後にも2本のダッシュが入ります。</dd>
-</dl>
-
-<h2 id="Examples" name="Examples">例</h2>
-
-<h3 id="Content-Type_in_HTML_forms" name="Content-Type_in_HTML_forms">HTML フォームにおける <code>Content-Type</code></h3>
-
-<p>HTML フォームを送信した結果としての {{HTTPMethod("POST")}} 要求において、 <code>Content-Type</code> は {{HTMLElement("form")}} 要素の <code>enctype</code> 属性で指定します。</p>
-
-<pre class="brush: html">&lt;form action="/" method="post" enctype="multipart/form-data"&gt;
-  &lt;input type="text" name="description" value="some text"&gt;
-  &lt;input type="file" name="myFile"&gt;
-  &lt;button type="submit"&gt;Submit&lt;/button&gt;
-&lt;/form&gt;
-</pre>
-
-<p>この要求はこのように見えます。 (ここではあまり重要でないヘッダーは省略しています)</p>
-
-<pre>POST /foo HTTP/1.1
-Content-Length: 68137
-Content-Type: multipart/form-data; boundary=---------------------------974767299852498929531610575
-
------------------------------974767299852498929531610575
-Content-Disposition: form-data; name="description"
-
-some text
------------------------------974767299852498929531610575
-Content-Disposition: form-data; name="myFile"; filename="foo.txt"
-Content-Type: text/plain
-
-(content of the uploaded file foo.txt)
------------------------------974767299852498929531610575--
-</pre>
-
-<h2 id="Specifications" name="Specifications">仕様書</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">仕様書</th>
-   <th scope="col">題名</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{RFC("7233", "Content-Type in multipart", "4.1")}}</td>
-   <td>Hypertext Transfer Protocol (HTTP/1.1): Range Requests</td>
-  </tr>
-  <tr>
-   <td>{{RFC("7231", "Content-Type", "3.1.1.5")}}</td>
-   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
-
-<p>{{Compat("http.headers.Content-Type")}}</p>
-
-<h2 id="See_also" name="See_also">関連情報</h2>
-
-<ul>
- <li>{{HTTPHeader("Accept")}} および {{HTTPHeader("Accept-Charset")}}</li>
- <li>{{HTTPHeader("Content-Disposition")}}</li>
- <li>{{HTTPStatus("206")}} Partial Content</li>
- <li>{{HTTPHeader("X-Content-Type-Options")}}</li>
-</ul>
diff --git a/files/ja/web/http/headers/content-type/index.md b/files/ja/web/http/headers/content-type/index.md
new file mode 100644
index 0000000000..611836d9f2
--- /dev/null
+++ b/files/ja/web/http/headers/content-type/index.md
@@ -0,0 +1,110 @@
+---
+title: Content-Type
+slug: Web/HTTP/Headers/Content-Type
+tags:
+  - Content-Type
+  - HTTP
+  - HTTP header
+  - Representation header
+  - Reference
+  - 表現ヘッダー
+  - ヘッダー
+browser-compat: http.headers.Content-Type
+translation_of: Web/HTTP/Headers/Content-Type
+---
+{{HTTPSidebar}}
+
+**`Content-Type`** 表現ヘッダーは、リソースの{{Glossary("MIME type","メディア種別")}}を示すために使用します。</p>
+
+レスポンスにおいては、 `Content-Type` ヘッダーはクライアントに返されたコンテンツの実際の種類を伝えます。ブラウザーは MIME を推定し、このヘッダーの値に従わないこともあります。 {{HTTPHeader("X-Content-Type-Options")}} を `nosniff` に設定すると、この動作を防ぐことができます。
+
+リクエストにおいては ({{HTTPMethod("POST")}} または {{HTTPMethod("PUT")}} などで)、クライアントがサーバーに実際に送ったデータの種類を伝えます。
+
+<table class="properties">
+  <tbody>
+    <tr>
+      <th scope="row">ヘッダー種別</th>
+      <td>{{Glossary("Representation header", "表現ヘッダー")}}</td>
+    </tr>
+    <tr>
+      <th scope="row">{{Glossary("Forbidden header name", "禁止ヘッダー名")}}</th>
+      <td>いいえ</td>
+    </tr>
+    <tr>
+      <th scope="row">{{Glossary("CORS-safelisted response header", "CORS セーフリストレスポンスヘッダー")}}</th>
+      <td>はい</td>
+    </tr>
+    <tr>
+      <th scope="row">
+        {{Glossary("CORS-safelisted request header", "CORS セーフリストリクエストヘッダー")}}
+      </th>
+      <td>
+        はい。 <em>CORS 危険リクエストヘッダーバイト</em>である 0x00-0x1F (0x09 (HT) を除く)、<code>"():&#x3C;>?@[\]{}</code>、0x7F (DEL) を値に含むことができないという制限付きです。<br>また、 MIME タイプの解釈値 (引数を除いたもの) が <code>application/x-www-form-urlencoded</code>, <code>multipart/form-data</code>, <code>text/plain</code> の何れかである必要があります。</td>
+    </tr>
+  </tbody>
+</table>
+
+## 構文
+
+```
+Content-Type: text/html; charset=UTF-8
+Content-Type: multipart/form-data; boundary=something
+```
+
+## ディレクティブ
+
+- `media-type`
+  - : リソースやデータの [MIME タイプ](/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types)です。
+- charset
+  - : 標準の文字エンコーディングです。
+- boundary
+  - : マルチパートの本文では `boundary` ディレクティブが必要で、これはメールゲートウェイを通過しても大丈夫だと知られている文字の中から 1～70 文字で構成され、ホワイトスペースで終了しないものです。これはメッセージの複数パートの境界を囲むために使用します。ふつう、ヘッダーの境界は 2 本のダッシュで始まり、最後の境界には最後にも 2 本のダッシュが入ります。</dd>
+</dl>
+
+## 例
+
+### HTML フォームにおける `Content-Type`
+
+ HTML フォームを送信する {{HTTPMethod("POST")}} リクエストでは、リクエストの `Content-Type` は {{HTMLElement("form")}} 要素の `enctype` 属性で指定します。
+
+```html
+<form action="/" method="post" enctype="multipart/form-data">
+  <input type="text" name="description" value="some text">
+  <input type="file" name="myFile">
+  <button type="submit">Submit</button>
+</form>
+```
+
+このリクエストはこのように見えます (ここではあまり重要でないヘッダーは省略しています)。
+
+```
+POST /foo HTTP/1.1
+Content-Length: 68137
+Content-Type: multipart/form-data; boundary=---------------------------974767299852498929531610575
+
+-----------------------------974767299852498929531610575
+Content-Disposition: form-data; name="description"
+
+some text
+-----------------------------974767299852498929531610575
+Content-Disposition: form-data; name="myFile"; filename="foo.txt"
+Content-Type: text/plain
+
+(content of the uploaded file foo.txt)
+-----------------------------974767299852498929531610575--
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- {{HTTPHeader("Accept")}}
+- {{HTTPHeader("Content-Disposition")}}
+- {{HTTPStatus("206")}} Partial Content
+- {{HTTPHeader("X-Content-Type-Options")}}
diff --git a/files/ja/web/http/headers/dnt/index.html b/files/ja/web/http/headers/dnt/index.html
deleted file mode 100644
index 426113364d..0000000000
--- a/files/ja/web/http/headers/dnt/index.html
+++ /dev/null
@@ -1,89 +0,0 @@
----
-title: DNT
-slug: Web/HTTP/Headers/DNT
-tags:
-  - DNT
-  - HTTP
-  - ヘッダー
-  - リファレンス
-translation_of: Web/HTTP/Headers/DNT
----
-<p>{{HTTPSidebar}}</p>
-
-<p><strong><code>DNT</code></strong> (<strong>D</strong>o <strong>N</strong>ot <strong>T</strong>rack) リクエストヘッダーは、ユーザーのトラッキングの設定を示します。 これにより、ユーザーはパーソナライズされたコンテンツではなく、プライバシーを優先するかどうかを指定できます.</p>
-
-<table class="properties">
- <tbody>
-  <tr>
-   <th scope="row">ヘッダータイプ</th>
-   <td>{{Glossary("Request header")}}</td>
-  </tr>
-  <tr>
-   <th scope="row">{{Glossary("Forbidden header name")}}</th>
-   <td>はい</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="構文">構文</h2>
-
-<pre class="syntaxbox notranslate">DNT: 0
-DNT: 1
-DNT: null
-</pre>
-
-<h2 id="宣言">宣言</h2>
-
-<dl>
- <dt>0</dt>
- <dd>ユーザーは対象のサイトでトラッキングを許可している。</dd>
- <dt>1</dt>
- <dd>ユーザーは対象のサイトでトラッキングを拒否している。</dd>
- <dt>null</dt>
- <dd>ユーザーはトラッキングに関する設定を指定していない。</dd>
-</dl>
-
-<h2 id="例">例</h2>
-
-<h3 id="JavaScript_から_Do_Not_Track_の状態を読み取る">JavaScript から Do Not Track の状態を読み取る</h3>
-
-<p>ユーザーの DNT 設定は {{domxref("Navigator.doNotTrack")}} プロパティを使用して JavaScript から読み取ることもできます:</p>
-
-<pre class="brush: js notranslate">navigator.doNotTrack; // "0" or "1"</pre>
-
-<h2 id="仕様">仕様</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">仕様</th>
-   <th scope="col">ステータス</th>
-   <th scope="col">コメント</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Tracking','#dnt-header-field', 'DNT Header Field for HTTP Requests')}}</td>
-   <td>{{Spec2("Tracking")}}</td>
-   <td>初期定義。</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="ブラウザー実装状況">ブラウザー実装状況</h2>
-
-<p>{{Compat("http.headers.DNT")}}</p>
-
-<h2 id="関連項目">関連項目</h2>
-
-<ul>
- <li>{{domxref("Navigator.doNotTrack")}}</li>
- <li>{{HTTPHeader("Tk")}} ヘッダー</li>
- <li><a href="https://en.wikipedia.org/wiki/Do_Not_Track">Do Not Track on Wikipedia</a></li>
- <li><a href="https://www.eff.org/deeplinks/2011/02/what-does-track-do-not-track-mean">What Does the "Track" in "Do Not Track" Mean? – EFF</a></li>
- <li><a href="http://donottrack.us/">donottrack.us</a></li>
- <li>DNT ブラウザー設定のヘルプ:
-  <ul>
-   <li><a href="https://www.mozilla.org/ja/firefox/dnt/">Firefox</a></li>
-   <li><a href="https://support.google.com/chrome/answer/2790761">Chrome</a></li>
-  </ul>
- </li>
-</ul>
diff --git a/files/ja/web/http/headers/dnt/index.md b/files/ja/web/http/headers/dnt/index.md
new file mode 100644
index 0000000000..f961a5e00c
--- /dev/null
+++ b/files/ja/web/http/headers/dnt/index.md
@@ -0,0 +1,74 @@
+---
+title: DNT
+slug: Web/HTTP/Headers/DNT
+tags:
+  - DNT
+  - HTTP
+  - ヘッダー
+  - リファレンス
+browser-compat: http.headers.DNT
+translation_of: Web/HTTP/Headers/DNT
+---
+{{HTTPSidebar}}{{Deprecated_header}}
+
+**`DNT`** (**D**o **N**ot
+**T**rack) リクエストヘッダーは、ユーザーのトラッキングの設定を示します。これにより、ユーザーはパーソナライズされたコンテンツではなく、プライバシーを優先するかどうかを指定できます。
+
+<table class="properties">
+  <tbody>
+    <tr>
+      <th scope="row">ヘッダー種別</th>
+      <td>{{Glossary("Request header", "リクエストヘッダー")}}</td>
+    </tr>
+    <tr>
+      <th scope="row">{{Glossary("Forbidden header name", "禁止ヘッダー名")}}</th>
+      <td>はい</td>
+    </tr>
+  </tbody>
+</table>
+
+## 構文
+
+```
+DNT: 0
+DNT: 1
+DNT: null
+```
+
+## ディレクティブ
+
+- 0
+  - : ユーザーは対象のサイトでトラッキングを許可している。
+- 1
+  - : ユーザーは対象のサイトでトラッキングを拒否している。
+- null
+  - : ユーザーはトラッキングに関する設定を指定していない。
+
+## 例
+
+### JavaScript から Do Not Track の状態を読み取る
+
+ユーザーの DNT 設定は {{domxref("Navigator.doNotTrack")}} プロパティを使用して JavaScript から読み取ることもできます。
+
+```js
+navigator.doNotTrack; // "0" or "1"
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- {{domxref("Navigator.doNotTrack")}}
+- {{HTTPHeader("Tk")}} ヘッダー
+- [Wikipedia の Do Not Track](https://en.wikipedia.org/wiki/Do_Not_Track)
+- [What Does the "Track" in "Do Not Track" Mean? – EFF](https://www.eff.org/deeplinks/2011/02/what-does-track-do-not-track-mean)
+- [donottrack.us](https://donottrack.us/)
+- DNT ブラウザー設定のヘルプ:
+  - [Firefox](https://www.mozilla.org/en-US/firefox/dnt/)
+  - [Chrome](https://support.google.com/chrome/answer/2790761)
diff --git a/files/ja/web/http/headers/expect-ct/index.html b/files/ja/web/http/headers/expect-ct/index.html
index e815e30946..d402887ddb 100644
--- a/files/ja/web/http/headers/expect-ct/index.html
+++ b/files/ja/web/http/headers/expect-ct/index.html
@@ -6,16 +6,33 @@ tags:
   - Reference
   - ヘッダー
   - レスポンスヘッダー
+browser-compat: http.headers.Expect-CT
 translation_of: Web/HTTP/Headers/Expect-CT
 ---
 <p>{{HTTPSidebar}}</p>
 
-<p><code>Expect-CT</code> ヘッダーは、サイトが認証透過性の要件の報告や強制に参加して、サイトの不正な認証情報が通知されない状態を防ぐことができます。</p>
+<p><code>Expect-CT</code> ヘッダーは、サイトが<a href="/ja/docs/Web/Security/Certificate_Transparency">証明書の透明性</a>の要件の報告や強制に参加して、サイトの不正な認証情報の使用が通知されない状態を防ぐことができます。</p>
+
+<p>CT の要件は、以下のいずれかの仕組みで満たすことができます。</p>
+
+<ul>
+ <li>個々のログで発行された署名付き証明書のタイムスタンプを埋め込めるようにするための X.509v3 証明書の拡張</li>
+ <li>ハンドシェイク中に送信される <code>signed_certificate_timestamp</code> 型の TLS 拡張</li>
+ <li>OCSP ステープリング (つまり、 <code>status_request</code> TLS 拡張) に対応し、 <code>SignedCertificateTimestampList</code> を提供すること</li>
+</ul>
 
 <div class="note">
 <p>サイトが <code>Expect-CT</code> ヘッダーを有効にすると、ブラウザーが<strong><a href="https://www.certificate-transparency.org/known-logs">公開 CT ログ</a></strong>に現れるサイトのすべての認証情報をチェックするよう要求します。</p>
 </div>
 
+<div class="notecard note">
+  <p><strong>メモ:</strong> ブラウザーは、 HTTP では <code>Expect-CT</code> ヘッダーを<strong>無視</strong>し、 HTTPS 接続でのみ効果を発揮します。</p>
+</div>
+
+<div class="notecard note">
+<p><strong>メモ:</strong> <code>Expect-CT</code> は 2021 年 6 月に廃止される可能性が高いです。 2018 年 5 月以降、新しい証明書は既定で SCT に対応することが期待されています。 2018 年 3 月以前の証明書は 39 ヶ月の有効期限が認められていましたが、それらが 2021 年 6 月にすべて失効します。</p>
+</div>
+
 <table class="properties">
  <tbody>
   <tr>
@@ -29,43 +46,48 @@ translation_of: Web/HTTP/Headers/Expect-CT
  </tbody>
 </table>
 
-<h2 id="Syntax" name="Syntax">構文</h2>
+<h2 id="Syntax">構文</h2>
 
 <pre>Expect-CT: report-uri="&lt;uri&gt;",
            enforce,
            max-age=&lt;age&gt;</pre>
 
-<h2 id="Directives" name="Directives">ディレクティブ</h2>
+<h2 id="Directives">ディレクティブ</h2>
 
 <dl>
- <dt>max-age</dt>
+ <dt><code>max-age</code></dt>
  <dd>
  <p><code>Expect-CT</code> ヘッダーフィールドを受信した後で、ユーザーエージェントがメッセージを受信したホストを、既知の Expect-CT ホストと見なすべき時間を秒数で指定します。</p>
 
- <p>キャッシュが表現可能な値よりも大きな値を受信した場合や、計算でオーバーフローが発生した場合、キャッシュは値を 2147483648 (2^31) または使用している表現方法で最も大きな整数値とみなします。</p>
+ <p>キャッシュが表現可能な値よりも大きな値を受信した場合や、計算でオーバーフローが発生した場合、キャッシュは値を 2,147,483,648 (2^31) または使用している表現方法で最も大きな整数値とみなします。</p>
  </dd>
- <dt>report-uri="&lt;uri&gt;" {{optional_inline}}</dt>
+ <dt><code>report-uri="&lt;uri&gt;"</code> {{optional_inline}}</dt>
  <dd>
- <p>ユーザーエージェントが Expect-CT の失敗を報告する URI を指定します。</p>
- <code>enforce</code> ディレクティブと <code>report-uri</code> ディレクティブが両方ともある場合、設定は "enforce-and-report" の設定と呼ばれ、ユーザーエージェントに認証透過性ポリシーに従い、違反を報告することを指示します。
-
- <p> </p>
- </dd>
- <dt>enforce {{optional_inline}}</dt>
+ <p>ユーザーエージェントが <code>Expect-CT</code> の失敗を報告する URI を指定します。</p>
+ <code>enforce</code> ディレクティブと <code>report-uri</code> ディレクティブが両方ともある場合、設定は "enforce-and-report" の設定と呼ばれ、ユーザーエージェントに証明書の透明性ポリシーに従い、違反を報告することを指示します。</dd>
+ <dt><code>enforce</code> {{optional_inline}}</dt>
  <dd>
- <p>ユーザーエージェントに (報告するだけでなく) 認証透過性ポリシーに従い、ユーザーエージェントが認証透過性ポリシーに違反するコネクションを拒否するよう指示します。</p>
+ <p>ユーザーエージェントに (報告するだけでなく) 証明書の透明性ポリシーに従い、ユーザーエージェントが証明書の透明性ポリシーに違反するコネクションを拒否するよう指示します。</p>
 
- <p><code>enforce</code> ディレクティブと <code>report-uri</code> ディレクティブが両方ともある場合、設定は "enforce-and-report" の設定と呼ばれ、ユーザーエージェントに認証透過性ポリシーに従い、違反を報告することを指示します。</p>
+ <p><code>enforce</code> ディレクティブと <code>report-uri</code> ディレクティブが両方ともある場合、設定は "enforce-and-report" の設定と呼ばれ、ユーザーエージェントに証明書の透明性ポリシーに従い、違反を報告することを指示します。</p>
  </dd>
 </dl>
 
-<h2 id="Example" name="Example">例</h2>
+<h2 id="Example">例</h2>
 
-<p>以下の例は認証透過性を24時間強制し、違反を foo.example に報告することを示します。</p>
+<p>以下の例は証明書の透明性を 24 時間強制し、違反を <code>foo.example</code> に報告することを示します。</p>
 
 <pre>Expect-CT: max-age=86400, enforce, report-uri="https://foo.example/report"</pre>
 
-<h2 id="Specifications" name="Specifications">仕様書</h2>
+<h2 id="Notes">メモ</h2>
+
+<p>信頼ストアに手動で追加されたルート CA は、 <code>Expect-CT</code> の報告/強制を上書きし、抑制します。</p>
+
+<p>ブラウザーは、サイトが証明書の透明性要件を満たす証明書を提供できることを「証明」しない限り、 <code>Expect-CT</code> ポリシーを記憶しません。ブラウザーは、どの CT ログが証明書のログとして信頼できるとみなされるかについて、独自の信頼モデルを実装しています。</p>
+
+<p>Chrome のビルドは、インストールのビルド日から 10 週間後に <code>Expect-CT</code> ポリシーの施行を停止するように設計されています。</p>
+
+<h2 id="Specifications">仕様書</h2>
 
 <table class="standard-table">
  <thead>
@@ -76,12 +98,12 @@ translation_of: Web/HTTP/Headers/Expect-CT
  </thead>
  <tbody>
   <tr>
-   <td><a href="https://tools.ietf.org/html/draft-ietf-httpbis-expect-ct-07">Internet Draft</a></td>
+   <td><a href="https://datatracker.ietf.org/doc/html/draft-ietf-httpbis-expect-ct-08">Internet Draft</a></td>
    <td>Expect-CT Extension for HTTP</td>
   </tr>
  </tbody>
 </table>
 
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
+<h2 id="Browser_compatibility">ブラウザーの互換性</h2>
 
-<p>{{Compat("http.headers.Expect-CT")}}</p>
+<p>{{Compat}}</p>
diff --git a/files/ja/web/http/headers/index.html b/files/ja/web/http/headers/index.html
deleted file mode 100644
index f1b18ac9db..0000000000
--- a/files/ja/web/http/headers/index.html
+++ /dev/null
@@ -1,461 +0,0 @@
----
-title: HTTP ヘッダー
-slug: Web/HTTP/Headers
-tags:
-  - HTTP
-  - HTTP ヘッダー
-  - Networking
-  - Reference
-  - header
-  - ネットワーク
-  - ヘッダー
-  - リファレンス
-translation_of: Web/HTTP/Headers
----
-<div>{{HTTPSidebar}}</div>
-
-<p><span class="seoSummary"><strong>HTTP ヘッダー</strong>により、クライアントやサーバーが HTTP リクエストやレスポンスで追加情報を渡すことができます。 HTTP ヘッダーは、大文字小文字を区別しないヘッダー名とそれに続くコロン (<code>:</code>)、 値で構成されます。</span>値の前にある{{Glossary("Whitespace", "ホワイトスペース")}}は無視されます。</p>
-
-<p>独自のヘッダーは、以前は <code>X-</code> 接頭辞を使用していましたが、この慣習は 2012 年 6 月に非推奨になりました。これは、 <a href="https://tools.ietf.org/html/rfc6648">RFC 6648</a> で非標準のフィールドが標準になったときに発生した不便さのためです。それ以外のヘッダーは <a class="external" href="http://www.iana.org/assignments/message-headers/perm-headers.html">IANA レジストリ</a> に収録されており、その基になったものは <a class="external" href="http://tools.ietf.org/html/rfc4229">RFC 4229</a> です。また IANA は <a class="external" href="http://www.iana.org/assignments/message-headers/prov-headers.html">新たに提案された HTTP ヘッダーのレジストリ</a> も管理しています。</p>
-
-<p>ヘッダーは、そのコンテキストに応じて分類できます。</p>
-
-<ul>
- <li>{{Glossary("General header", "一般ヘッダー")}}: リクエストとレスポンスの両方に適用されますが、本文で転送されるデータとは関係ないものです。</li>
- <li>{{Glossary("Request header", "リクエストヘッダー")}}: 読み込むリソースやリソースをリクエストしているクライアントに関する詳細な情報を持ちます。</li>
- <li>{{Glossary("Response header", "レスポンスヘッダー")}}: レスポンスに関する追加情報、例えば場所や提供しているサーバーに関するものを保持します。</li>
- <li>{{Glossary("Entity header", "エンティティヘッダー")}}: リソースの本体に関する情報、例えば<a href="/ja/docs/Web/HTTP/Headers/Content-Length">コンテンツの長さ</a>や <a href="/ja/docs/Web/HTTP/Basics_of_HTTP/MIME_types">MIME タイプ</a>などを持ちます。</li>
-</ul>
-
-<p>またヘッダーは、{{Glossary("Proxy_server", "プロキシサーバー")}}がどのように処理するかに応じてグループ化されます。</p>
-
-<ul>
- <li>{{ httpheader("Connection") }}</li>
- <li>{{ httpheader("Keep-Alive") }}</li>
- <li>{{ httpheader("Proxy-Authenticate") }}</li>
- <li>{{ httpheader("Proxy-Authorization") }}</li>
- <li>{{ httpheader("TE") }}</li>
- <li>{{ httpheader("Trailer") }}</li>
- <li>{{ httpheader("Transfer-Encoding") }}</li>
- <li>{{ httpheader("Upgrade") }}.</li>
-</ul>
-
-<dl>
- <dt id="e2e">エンドツーエンドヘッダー</dt>
- <dd>これらのヘッダーは、メッセージの最終的な宛先、すなわちリクエストならばサーバー、レスポンスならばクライアントに伝送し<em>なければなりません</em>。中間のプロキシはヘッダーを変更せずに再伝送しなければならず、またキャッシュには保存しなければなりません。</dd>
- <dt id="hbh">ホップバイホップヘッダー</dt>
- <dd>これらのヘッダーは単一のトランスポート層の接続にのみ意味を持ち、プロキシが再転送したり、キャッシュを行ったりしては<em>いけません</em>。なお、 {{httpheader("Connection")}} 一般ヘッダーを用いて設定する場合があるのはホップバイホップヘッダーのみです。</dd>
-</dl>
-
-<h2 id="Authentication" name="Authentication">認証</h2>
-
-<dl>
- <dt>{{HTTPHeader("WWW-Authenticate")}}</dt>
- <dd>リソースへアクセスに使用すべき認証方法を定義します。</dd>
- <dt>{{HTTPHeader("Authorization")}}</dt>
- <dd>サーバーでユーザーエージェントを認証するための資格情報を持ちます。</dd>
- <dt>{{HTTPHeader("Proxy-Authenticate")}}</dt>
- <dd>プロキシサーバーの背後にあるリソースへアクセスできるようにするために使用すべき認証方法を定義します。</dd>
- <dt>{{HTTPHeader("Proxy-Authorization")}}</dt>
- <dd>プロキシサーバーでユーザーエージェントを認証するための資格情報を持ちます。</dd>
-</dl>
-
-<h2 id="Caching" name="Caching">キャッシュ</h2>
-
-<dl>
- <dt>{{HTTPHeader("Age")}}</dt>
- <dd>オブジェクトがプロキシのキャッシュに存在する時間を秒数で表します。</dd>
- <dt>{{HTTPHeader("Cache-Control")}}</dt>
- <dd>リクエストおよびレスポンスで、キャッシュ機能に関するディレクティブです。</dd>
- <dt>{{HTTPHeader("Clear-Site-Data")}}</dt>
- <dd>リクエストしているウェブサイトに関連付けられたブラウズ用のデータ (クッキー、ストレージ、キャッシュ等) を消去します。</dd>
- <dt>{{HTTPHeader("Expires")}}</dt>
- <dd>レスポンスが陳腐化すると考えられる日時を表します。</dd>
- <dt>{{HTTPHeader("Pragma")}}</dt>
- <dd>リクエストからレスポンスへの流れの中でさまざまな影響がある、実装依存のヘッダーです。 <code>Cache-Control</code> ヘッダーが未実装である HTTP/1.0 キャッシュとの後方互換性のために使用します。</dd>
- <dt>{{HTTPHeader("Warning")}}</dt>
- <dd>起こりうる問題に関する一般警告情報です。</dd>
-</dl>
-
-<h2 id="Client_hints" name="Client_hints">クライアントヒント</h2>
-
-<p>HTTP {{Glossary("Client_hints", "クライアントヒント")}}は策定中です。実際の文書は <a href="https://httpwg.org/http-extensions/client-hints.html">HTTP 作業グループのウェブサイト</a>にあります。</p>
-
-<dl>
- <dt>{{HTTPHeader("Accept-CH")}} {{experimental_inline}}</dt>
- <dd>サーバーはクライアントヒントに対応していることを、 <code>Accept-CH</code> ヘッダーフィールドまたは同等の <code>http-equiv</code> 属性が付いた HTML の <code>&lt;meta&gt;</code> 要素を使用して広報することができます (<a href="https://httpwg.org/http-extensions/client-hints.html#HTML5"><cite>[HTML5]</cite></a>)。</dd>
- <dt>{{HTTPHeader("Accept-CH-Lifetime")}} {{experimental_inline}}</dt>
- <dd>サーバーは、指定された期間サーバーがサポートする対応する一連のクライアントヒントを記憶するようクライアントに依頼し、そのサーバーのオリジンに対するその後のリクエストでクライアントヒントを配信できるようにすることができます (<a href="https://httpwg.org/http-extensions/client-hints.html#RFC6454"><cite>[RFC6454]</cite></a>)。</dd>
- <dt>{{HTTPHeader("Early-Data")}} {{experimental_inline}}</dt>
- <dd>リクエストが早期データを伝えていることを示します。</dd>
- <dt>{{HTTPHeader("Content-DPR")}} {{experimental_inline}}</dt>
- <dd>数値で、選択された画像レスポンスの CSS ピクセルに対する物理ピクセルの比を示します。</dd>
- <dt>{{HTTPHeader("DPR")}} {{experimental_inline}}</dt>
- <dd>数値で、現在のクライアントの端末ピクセル比 (DPR)、すなわち端末のレイアウトビューポート (<a href="https://httpwg.org/http-extensions/client-hints.html#CSS2"><cite>[CSS2]</cite></a> のセクション9.1.1) における、 CSS ピクセルに対する物理ピクセルの比 (<a href="https://httpwg.org/http-extensions/client-hints.html#CSSVAL"><cite>[CSSVAL]</cite></a> のセクション5.2) を示します。</dd>
- <dt>{{HTTPHeader("Device-Memory")}} {{experimental_inline}}</dt>
- <dd>技術的には Device Memory API の一部で、このヘッダーはクライアントが持つおよその RAM の量を表します。</dd>
- <dt>{{HTTPHeader("Save-Data")}} {{experimental_inline}}</dt>
- <dd>論理型で、ユーザーエージェントのデータ利用の削減についての設定を示します。</dd>
- <dt>{{HTTPHeader("Viewport-Width")}} {{experimental_inline}}</dt>
- <dd>
- <div id="rfc.section.3.3.p.1">
- <p><code>Viewport-Width</code> リクエストヘッダーフィールドは数値で、レイアウトビューポートの幅を CSS ピクセル数で示します。指定されたピクセル数は、それ以上の最小の整数に丸められます (つまり切り上げ)。</p>
- </div>
-
- <div id="rfc.section.3.3.p.2">
- <p><code>Viewport-Width</code> がメッセージ内に二回以上現れた場合、最後の値がそれ以前のすべての値を上書きします。</p>
- </div>
- </dd>
- <dt>{{HTTPHeader("Width")}} {{experimental_inline}}</dt>
- <dd>
- <div id="rfc.section.3.2.p.1">
- <p><code>Width</code> リクエストヘッダーフィールドは数値で、要求するリソースの幅 (つまり画像の固有の寸法) を物理ピクセル数で示します。指定されたピクセル数は、それ以上の最小の整数に丸められます (つまり切り上げ)。</p>
- </div>
-
- <div id="rfc.section.3.2.p.2">
- <p>要求するリソースの幅がリクエストの時点で不明である場合や、リソースが表示幅を持たない場合は、 <code>Width</code> ヘッダーフィールドは省略できます。 <code>Width</code> がメッセージ内に二回以上現れた場合、最後の値がそれ以前のすべての値を上書きします。</p>
- </div>
- </dd>
-</dl>
-
-<h2 id="Conditionals" name="Conditionals">条件付き</h2>
-
-<dl>
- <dt>{{HTTPHeader("Last-Modified")}}</dt>
- <dd>リソースが最後に変更された日時であり、同じリソースの複数のバージョンを比較するために使用されます。 {{HTTPHeader("ETag")}} より正確さは低いのですが、環境によっては計算が容易です。{{HTTPHeader("If-Modified-Since")}} や {{HTTPHeader("If-Unmodified-Since")}} を使用する条件付きリクエストでは、リクエストの動作を変更するためにこの値を使用します。</dd>
- <dt>{{HTTPHeader("ETag")}}</dt>
- <dd>一意な文字列であり、リソースのバージョンを識別します。 {{HTTPHeader("If-Match")}} や {{HTTPHeader("If-None-Match")}} を使用する条件付きリクエストでは、リクエストの動作を変更するためにこの値を使用します。</dd>
- <dt>{{HTTPHeader("If-Match")}}</dt>
- <dd>リクエストを条件付きにして、保存されたリソースが指定した ETag のいずれかに一致する場合に限りメソッドを適用します。</dd>
- <dt>{{HTTPHeader("If-None-Match")}}</dt>
- <dd>リクエストを条件付きにして、保存されたリソースが指定した ETag のいずれかに一致<em>しない</em>場合に限りメソッドを適用します。これはキャッシュを更新する (安全なリクエスト向け)、あるいはすでにリソースが存在する場合に新しいリソースのアップロードを止めるために使用します。</dd>
- <dt>{{HTTPHeader("If-Modified-Since")}}</dt>
- <dd>リクエストを条件付きにして、エンティティが指定した日時より後に変更されている場合に限り転送するようリクエストします。キャッシュが期限切れである場合に限りデータを転送するために使用します。</dd>
- <dt>{{HTTPHeader("If-Unmodified-Since")}}</dt>
- <dd>リクエストを条件付きにして、エンティティが指定した日時より後に変更されていない場合に限り転送するようリクエストします。これは、特定の範囲の新しい断片と古い断片の一貫性を保証する、あるいは既存の文書を変更するときに楽観的な並行性制御システムを実装するために使用します。</dd>
- <dt>{{HTTPHeader("Vary")}}</dt>
- <dd>新しいものを元のサーバーにリクエストするのではなく、キャッシュされたレスポンスが使用できるよう決定するために、リクエストヘッダーを一致させる方法を定めます。/dd&gt;</dd>
-</dl>
-
-<h2 id="Connection_management" name="Connection_management">接続制御</h2>
-
-<dl>
- <dt>{{HTTPHeader("Connection")}}</dt>
- <dd>現在の転送が完了した後も、ネットワークコネクションを維持するかを制御します。</dd>
- <dt>{{HTTPHeader("Keep-Alive")}}</dt>
- <dd>持続的なコネクションをどれだけの期間維持するかを制御します。</dd>
-</dl>
-
-<h2 id="Content_negotiation" name="Content_negotiation"><a href="/ja/docs/Web/HTTP/Content_negotiation">コンテンツネゴシエーション</a></h2>
-
-<dl>
- <dt>{{HTTPHeader("Accept")}}</dt>
- <dd>送り返すことができるデータの{{Glossary("MIME_type", "種類")}}をサーバーに通知します。</dd>
- <dt>{{HTTPHeader("Accept-Charset")}}</dt>
- <dd>どの{{Glossary("character encodings", "文字集合")}}をクライアントが理解できるかです。</dd>
- <dt>{{HTTPHeader("Accept-Encoding")}}</dt>
- <dd>送り返すリソースで使用できるエンコードアルゴリズム (一般的には<a href="/ja/docs/Web/HTTP/Compression">圧縮アルゴリズム</a>) をサーバーに通知します。</dd>
- <dt>{{HTTPHeader("Accept-Language")}}</dt>
- <dd>送り返すリソースで期待する自然言語をサーバーに通知します。これはヒントであり、必ずしもユーザーの完全な制御下にあるものではありません。サーバーはユーザーの選択 (ドロップダウンリストで選ぶ言語など) を明示的に上書きしないように、常に注意を払うべきです。</dd>
-</dl>
-
-<h2 id="Controls" name="Controls">制御</h2>
-
-<dl>
- <dt>{{HTTPHeader("Expect")}}</dt>
- <dd>リクエストを適切に扱うためにサーバーが実行しなければならないと期待されていることを示します。</dd>
- <dt>{{HTTPHeader("Max-Forwards")}}</dt>
-</dl>
-
-<h2 id="Cookies" name="Cookies">クッキー</h2>
-
-<dl>
- <dt>{{HTTPHeader("Cookie")}}</dt>
- <dd>過去に {{HTTPHeader("Set-Cookie")}} ヘッダーでサーバーから送信されて保存している <a href="/ja/docs/Web/HTTP/Cookies">HTTP クッキー</a>を持ちます。</dd>
- <dt>{{HTTPHeader("Set-Cookie")}}</dt>
- <dd>サーバーからユーザーエージェントにクッキーを送信します。</dd>
- <dt>{{HTTPHeader("Cookie2")}} {{obsolete_inline}}</dt>
- <dd>過去に {{HTTPHeader("Set-Cookie2")}} ヘッダーでサーバーから送信された HTTP クッキーを伝えるために使われていましたが、仕様書から廃止されました。代わりに {{HTTPHeader("Cookie")}} を使用してください。</dd>
- <dt>{{HTTPHeader("Set-Cookie2")}} {{obsolete_inline}}</dt>
- <dd>サーバーからユーザーエージェントに Cookie を送信するために使用されていましたが、仕様書から廃止されました。代わりに {{HTTPHeader("Set-Cookie")}} を使用してください。</dd>
-</dl>
-
-<h2 id="CORS" name="CORS">オリジン間リソース共有 (CORS)</h2>
-
-<p><em>CORS についての詳細は、<a href="CORS">こちら</a>を参照してください。</em></p>
-
-<dl>
- <dt>{{HTTPHeader("Access-Control-Allow-Origin")}}</dt>
- <dd>レスポンスが共有可能かを示します。</dd>
- <dt>{{HTTPHeader("Access-Control-Allow-Credentials")}}</dt>
- <dd>credentials フラグが真であるときに、リクエストへのレスポンスを開示してよいかを示します。</dd>
- <dt>{{HTTPHeader("Access-Control-Allow-Headers")}}</dt>
- <dd>{{Glossary("Preflight_request", "プリフライトリクエスト")}}へのレスポンスで使用し、実際のリクエストを行うときに使用できる HTTP ヘッダーを指定します。</dd>
- <dt>{{HTTPHeader("Access-Control-Allow-Methods")}}</dt>
- <dd>プリフライトリクエストへのレスポンスで、リソースへアクセスするときに使用できるメソッドを指定します。</dd>
- <dt>{{HTTPHeader("Access-Control-Expose-Headers")}}</dt>
- <dd>ヘッダー名を羅列して、レスポンスの一部として開示できるヘッダーを示します。</dd>
- <dt>{{HTTPHeader("Access-Control-Max-Age")}}</dt>
- <dd>プリフライトリクエストの結果をキャッシュしてよい期間を示します。</dd>
- <dt>{{HTTPHeader("Access-Control-Request-Headers")}}</dt>
- <dd>実際のリクエストを行う際に使用する HTTP ヘッダーをサーバーがわかるようにするため、プリフライトリクエストを発信する際に使用します。</dd>
- <dt>{{HTTPHeader("Access-Control-Request-Method")}}</dt>
- <dd>実際のリクエストを行う際に使用する <a href="/ja/docs/Web/HTTP/Methods">HTTP メソッド</a> をサーバーがわかるようにするため、プリフライトリクエストを発信する際に使用します。</dd>
- <dt>{{HTTPHeader("Origin")}}</dt>
- <dd>どこから読み込みが発生したかを示します。</dd>
- <dt>{{HTTPHeader("Timing-Allow-Origin")}}</dt>
- <dd><a href="/ja/docs/Web/API/Resource_Timing_API">Resource Timing API</a> の機能を通じて受け取った属性の値を見ることができるオリジンを指定します。そうでなければオリジン間の制約によってゼロとして報告されます。</dd>
-</dl>
-
-<h2 id="Do_Not_Track" name="Do_Not_Track">Do Not Track</h2>
-
-<dl>
- <dt>{{HTTPHeader("DNT")}}</dt>
- <dd>ユーザーのトラッキング設定を示します。</dd>
- <dt>{{HTTPHeader("Tk")}}</dt>
- <dd>対応するレスポンスのトラッキング状態を示します。</dd>
-</dl>
-
-<h2 id="Downloads" name="Downloads">ダウンロード</h2>
-
-<dl>
- <dt>{{HTTPHeader("Content-Disposition")}}</dt>
- <dd>転送したリソースをインラインで表示すべきか (ヘッダーが存在しない場合の既定の動作)、またはダウンロードとして扱い、「名前を付けて保存」ウィンドウを表示すべきかを示します。</dd>
-</dl>
-
-<h2 id="Message_body_information" name="Message_body_information">メッセージ本文の情報</h2>
-
-<dl>
- <dt>{{HTTPHeader("Content-Length")}}</dt>
- <dd>リソースの大きさを、バイト単位の10進数で示します。</dd>
- <dt>{{HTTPHeader("Content-Type")}}</dt>
- <dd>リソースのメディアタイプを示します。</dd>
- <dt>{{HTTPHeader("Content-Encoding")}}</dt>
- <dd>圧縮アルゴリズムを指定するために使用します。</dd>
- <dt>{{HTTPHeader("Content-Language")}}</dt>
- <dd>読者向けに言語を示すヘッダーであり、ユーザーが自身の好む言語に応じて区別することができます。</dd>
- <dt>{{HTTPHeader("Content-Location")}}</dt>
- <dd>返すデータの代替データの場所を示します。</dd>
-</dl>
-
-<h2 id="Proxies" name="Proxies">プロキシ</h2>
-
-<dl>
- <dt>{{HTTPHeader("Forwarded")}}</dt>
- <dd>リクエストのパスにプロキシが関与したときに変更または遺失した、プロキシサーバーのクライアント側の情報を持ちます。</dd>
- <dt>{{HTTPHeader("X-Forwarded-For")}} {{non-standard_inline}}</dt>
- <dd>HTTP プロキシやロードバランサーを経由してウェブサーバーに接続するクライアントの、接続元 IP アドレスを識別します。</dd>
- <dt>{{HTTPHeader("X-Forwarded-Host")}} {{non-standard_inline}}</dt>
- <dd>プロキシやロードバランサーに接続するクライアントがリクエストした、オリジナルのホストを示します。</dd>
- <dt>{{HTTPHeader("X-Forwarded-Proto")}} {{non-standard_inline}}</dt>
- <dd>クライアントがプロキシやロードバランサーに接続するために使用したプロトコル (HTTP または HTTPS) を識別します。</dd>
- <dt>{{HTTPHeader("Via")}}</dt>
- <dd>フォワードプロキシとリバースプロキシの両方が追加するヘッダーであり、リクエストヘッダーとレスポンスヘッダーのどちらでも見られます。</dd>
-</dl>
-
-<h2 id="Redirects" name="Redirects">リダイレクト</h2>
-
-<dl>
- <dt>{{HTTPHeader("Location")}}</dt>
- <dd>ページのリダイレクト先の URL を示します。</dd>
-</dl>
-
-<h2 id="Request_context" name="Request_context">リクエストコンテキスト</h2>
-
-<dl>
- <dt>{{HTTPHeader("From")}}</dt>
- <dd>リクエストを行うユーザーエージェントを操作している人間の、インターネット電子メールアドレスを持ちます。</dd>
- <dt>{{HTTPHeader("Host")}}</dt>
- <dd>サーバーのドメイン名 (バーチャルホスト向け) およびサーバーが待ち受けている TCP ポート番号 (省略可能) を指定します。</dd>
- <dt>{{HTTPHeader("Referer")}}</dt>
- <dd>現在リクエストしているページへリンクしていた、前のウェブページのアドレスです。</dd>
- <dt>{{HTTPHeader("Referrer-Policy")}}</dt>
- <dd>{{HTTPHeader("Referer")}} ヘッダーで送信するどのリファラー情報をリクエストに含めるかを制御します。</dd>
- <dt>{{HTTPHeader("User-Agent")}}</dt>
- <dd>リクエストを行うユーザーエージェントソフトウェアのアプリケーションタイプ、オペレーティングシステム、ベンダー、バージョンを、ネットワークプロトコルのピアが識別できるようにする文字列を持ちます。 <a href="/ja/docs/Web/HTTP/Headers/User-Agent/Firefox">Firefox ユーザーエージェント文字列リファレンス</a>もご覧ください。</dd>
-</dl>
-
-<h2 id="Response_context" name="Response_context">レスポンスコンテキスト</h2>
-
-<dl>
- <dt>{{HTTPHeader("Allow")}}</dt>
- <dd>リソースがサポートする HTTP リクエストメソッドを示します。</dd>
- <dt>{{HTTPHeader("Server")}}</dt>
- <dd>リクエストを扱うサーバーが使用するソフトウェアの情報を持ちます。</dd>
-</dl>
-
-<h2 id="Range_requests" name="Range_requests">範囲付きリクエスト</h2>
-
-<dl>
- <dt>{{HTTPHeader("Accept-Ranges")}}</dt>
- <dd>サーバーが範囲付きリクエストに対応するかどうか、対応していれば対応する場合は、範囲を表すことができる単位を示します。</dd>
- <dt>{{HTTPHeader("Range")}}</dt>
- <dd>サーバーが返すべきである文書の範囲を示します。</dd>
- <dt>{{HTTPHeader("If-Range")}}</dt>
- <dd>指定した ETag または日時がリモートのリソースにマッチする場合に限定した、条件付き range request を生成します。異なるバージョンのリソースから 2 つの範囲をダウンロードすることを防ぎます。</dd>
- <dt>{{HTTPHeader("Content-Range")}}</dt>
- <dd>部分的なメッセージが、メッセージ本文全体のどこに位置するかを示します。</dd>
-</dl>
-
-<h2 id="Security" name="Security">セキュリティ</h2>
-
-<dl>
- <dt>{{HTTPHeader("Cross-Origin-Embedder-Policy")}} ({{Glossary("COEP")}})</dt>
- <dd>サーバーが指定された文書の埋め込み方針を宣言するために使います。</dd>
-</dl>
-
-<dl>
- <dt>{{HTTPHeader("Cross-Origin-Opener-Policy")}} ({{Glossary("COOP")}})</dt>
- <dd>他のドメインがウィンドウを開いたり制御したりすることを防ぎます。</dd>
-</dl>
-
-<dl>
- <dt>{{HTTPHeader("Cross-Origin-Resource-Policy")}} ({{Glossary("CORP")}})</dt>
- <dd>このヘッダーが適用されたリソースのレスポンスが他のドメインから読み取られるのを防ぎます。</dd>
- <dt>{{HTTPHeader("Content-Security-Policy")}} ({{Glossary("CSP")}})</dt>
- <dd>ユーザーエージェントがページで読み込むことを許可するリソースを制御します。</dd>
- <dt>{{HTTPHeader("Content-Security-Policy-Report-Only")}}</dt>
- <dd>ウェブの開発者がポリシーの効果を適用せずに監視することで、実験を行うことができます。これらの違反レポートは、 HTTP <code>POST</code> リクエストによって指定した URI へ送信される {{Glossary("JSON")}} 文書で構成されます。</dd>
- <dt>{{HTTPHeader("Expect-CT")}}</dt>
- <dd>サイトが証明書の透明性要件の報告や実施を選択できるようにします。これにより、そのサイトで不正な証明書の使用に気づかないことを防ぎます。サイトが Expect-CT ヘッダーを有効にした場合、そのサイトの証明書が公開CTログに表示されることを Chrome が確認するようにリクエストしています。</dd>
- <dt>{{HTTPHeader("Feature-Policy")}}</dt>
- <dd>自身のフレームまたはその中の iframe で、ブラウザーの機能を使用することを許可または拒否する仕組みを提供します。</dd>
- <dt>{{HTTPHeader("Strict-Transport-Security")}} ({{Glossary("HSTS")}})</dt>
- <dd>HTTP の代わりに HTTPS による通信を強制します。</dd>
- <dt>{{HTTPHeader("Upgrade-Insecure-Requests")}}</dt>
- <dd>暗号化や認証されたレスポンスについて、クライアントの設定を表す信号をサーバーに送信して、{{CSP("upgrade-insecure-requests")}} ディレクティブを正しく扱うことができます。</dd>
- <dt>{{HTTPHeader("X-Content-Type-Options")}}</dt>
- <dd>ブラウザーで MIME スニッフィングを無効化して、{{HTTPHeader("Content-Type")}} で指定したタイプを強制的に使用させます。</dd>
- <dt>{{HTTPHeader("X-Download-Options")}}</dt>
- <dd>HTTP の <code><a href="https://docs.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/compatibility/jj542450(v=vs.85)?#the-noopen-directive">X-Download-Options</a></code> ヘッダーは、ブラウザー (Internet Explorer) がアプリケーションからのダウンロードでファイルを「開く」の選択肢を表示しないようにし、アプリケーションのコンテキストで実行するアクセス権を得ることがないようにして、ファイルとすることでフィッシング詐欺を防止します。 (メモ: <a href="https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/18488178/">MS Edge bug</a> に関連)</dd>
- <dt>{{HTTPHeader("X-Frame-Options")}} (XFO)</dt>
- <dd>ブラウザーがページを {{HTMLElement("frame")}}, {{HTMLElement("iframe")}}, {{HTMLElement("embed")}}, {{HTMLElement("object")}} の内部に表示することを許可するかを示します。</dd>
- <dt>{{HTTPHeader("X-Permitted-Cross-Domain-Policies")}}</dt>
- <dd>クロスドメインポリシーファイル (<code>crossdomain.xml</code>) を許可するかどうかを指定します。このファイルは、 Adobe の Flash Player、Adobe Acrobat、Microsoft Silverlight、Apache Flex などのクライアントに、<a href="/ja/docs/Web/Security/Same-origin_policy">同一オリジンポリシー</a>によって制限されているドメイン間のデータを処理する許可を与えるポリシーを定義することができます。詳細については、 <a href="https://www.adobe.com/devnet/articles/crossdomain_policy_file_spec.html">Cross-domain Policy File Specification</a> を参照してください。</dd>
- <dt>{{HTTPHeader("X-Powered-By")}}</dt>
- <dd>ホスティング環境やその他のフレームワークによって設定される可能性があり、アプリケーションや訪問者に有益ではない情報を含みます。潜在的な脆弱性が発現することを防ぐために、このヘッダーは設定しないでください。</dd>
- <dt>{{HTTPHeader("X-XSS-Protection")}}</dt>
- <dd>クロスサイトスクリプティングのフィルタリングを有効化します。</dd>
-</dl>
-
-<h3 id="HTTP_Public_Key_Pinning_GlossaryHPKP">HTTP Public Key Pinning ({{Glossary("HPKP")}})</h3>
-
-<p>HTTP Public Key Pinning は非推奨となり、削除されて Certificate Transparency と {{HTTPHeader("Expect-CT")}} に置き換えられました。</p>
-
-<dl>
- <dt>{{HTTPHeader("Public-Key-Pins")}}</dt>
- <dd>偽造した証明書による {{Glossary("MITM")}} 攻撃の危険性を軽減するため、特定の暗号公開鍵とウェブサーバーを関連付けます。</dd>
- <dt>{{HTTPHeader("Public-Key-Pins-Report-Only")}}</dt>
- <dd>ピンニングに違反する場合でも、ヘッダーで指定した report-uri にレポートを送信して、クライアントからサーバーへの接続は許可します。</dd>
-</dl>
-
-<h3 id="Fetch_metadata_request_headers" name="Fetch_metadata_request_headers">メタデータ読み取りリクエストヘッダー</h3>
-
-<dl>
- <dt>{{HTTPHeader("Sec-Fetch-Site")}}</dt>
- <dd>リクエスト開始元のオリジンと宛先のオリジンとの関係を示すリクエストヘッダーです。これは構造化ヘッダーで、値はトークンであり、取りうる値は <code>cross-site</code>, <code>same-origin</code>, <code>same-site</code>, <code>none</code> です。</dd>
- <dt>{{HTTPHeader("Sec-Fetch-Mode")}}</dt>
- <dd>サーバーへのリクエストモードを示すリクエストヘッダーです。これは構造化ヘッダーで、値はトークンであり、取りうる値は <code>cors</code>, <code>navigate</code>, <code>nested-navigate</code>, <code>no-cors</code>, <code>same-origin</code>, <code>websocket</code> です。</dd>
- <dt>{{HTTPHeader("Sec-Fetch-User")}}</dt>
- <dd>ナビゲーションリクエストがユーザー操作によって起動されたかどうかを示すリクエストヘッダーです。これは構造化ヘッダーであり、論理値で、取りうる値は <code>?0</code> ならば偽、 <code>?1</code> ならば真です。</dd>
- <dt>{{HTTPHeader("Sec-Fetch-Dest")}}</dt>
- <dd>リクエストの宛先を示すリクエストヘッダーです。これは構造化ヘッダーで、値はトークンであり、取りうる値は <code>audio</code>, <code>audioworklet</code>, <code>document</code>, <code>embed</code>, <code>empty</code>, <code>font</code>, <code>image</code>, <code>manifest</code>, <code>object</code>, <code>paintworklet</code>, <code>report</code>, <code>script</code>, <code>serviceworker</code>, <code>sharedworker</code>, <code>style</code>, <code>track</code>, <code>video</code>, <code>worker</code>, <code>xslt</code>, <code>nested-document</code> です。</dd>
-</dl>
-
-<h2 id="Server-sent_events" name="Server-sent_events">Server-sent event</h2>
-
-<dl>
- <dt>{{HTTPHeader("Last-Event-ID")}}</dt>
- <dd>...</dd>
- <dt>{{HTTPHeader("NEL")}} {{experimental_inline}}</dt>
- <dd>開発者がネットワークエラー報告ポリシーを宣言できるようにする仕組みを定義します。</dd>
- <dt>{{HTTPHeader("Ping-From")}}</dt>
- <dd>...</dd>
- <dt>{{HTTPHeader("Ping-To")}}</dt>
- <dd>...</dd>
- <dt>{{HTTPHeader("Report-To")}}</dt>
- <dd>警告やエラーを送信るためのブラウザーに対するサーバーのエンドポイントを指定するために使用します。</dd>
-</dl>
-
-<h2 id="Transfer_coding" name="Transfer_coding">転送エンコーディング</h2>
-
-<dl>
- <dt>{{HTTPHeader("Transfer-Encoding")}}</dt>
- <dd>エンティティをユーザーへ問題なく転送できるエンコード形式を指定します。</dd>
- <dt>{{HTTPHeader("TE")}}</dt>
- <dd>ユーザーエージェントが進んで受け入れる転送エンコーディングを指定します。</dd>
- <dt>{{HTTPHeader("Trailer")}}</dt>
- <dd>送信者が chunk メッセージの終端に追加フィールドを含めることができます。</dd>
-</dl>
-
-<h2 id="WebSockets" name="WebSockets">WebSocket</h2>
-
-<dl>
- <dt>{{HTTPHeader("Sec-WebSocket-Key")}}</dt>
- <dd>...</dd>
- <dt>{{HTTPHeader("Sec-WebSocket-Extensions")}}</dt>
- <dd>...</dd>
- <dt>{{HTTPHeader("Sec-WebSocket-Accept")}}</dt>
- <dd>...</dd>
- <dt>{{HTTPHeader("Sec-WebSocket-Protocol")}}</dt>
- <dd>...</dd>
- <dt>{{HTTPHeader("Sec-WebSocket-Version")}}</dt>
- <dd>...</dd>
-</dl>
-
-<h2 id="Other" name="Other">その他</h2>
-
-<dl>
- <dt>{{HTTPHeader("Accept-Push-Policy")}} {{experimental_inline}}</dt>
- <dd>クライアントはリクエストに対して求めるプッシュポリシーを、リクエスト内で <code><a href="https://tools.ietf.org/html/draft-ruellan-http-accept-push-policy-00#section-3.1">Accept-Push-Policy</a></code> ヘッダーフィールドを送信することで表現することができます。</dd>
- <dt>{{HTTPHeader("Accept-Signature")}} {{experimental_inline}}</dt>
- <dd>クライアントは <code><a href="https://wicg.github.io/webpackage/draft-yasskin-http-origin-signed-responses.html#rfc.section.3.7">Accept-Signature</a></code> ヘッダーフィールドを送信して、利用可能な署名を利用する意図を示したり、対応している署名の種類を示したりすることができます。</dd>
- <dt>{{HTTPHeader("Alt-Svc")}}</dt>
- <dd>このサービスにたどり着く他の方法のリストに使用します。</dd>
- <dt>{{HTTPHeader("Date")}}</dt>
- <dd>メッセージを生成した日時です。</dd>
- <dt>{{HTTPHeader("Large-Allocation")}}</dt>
- <dd>読み込み中のページは大量の割り当てが必要であることをブラウザーに伝えます。</dd>
- <dt>{{HTTPHeader("Link")}}</dt>
- <dd><code><a href="https://tools.ietf.org/html/rfc5988#section-5">Link</a></code> エンティティヘッダーフィールドは、 HTTP ヘッダー内の1つ以上のリンクを記述する方法を提供します。意味的には HTML の {{HTMLElement("link")}} 要素と等価です。</dd>
- <dt>{{HTTPHeader("Push-Policy")}} {{experimental_inline}}</dt>
- <dd><code><a href="https://tools.ietf.org/html/draft-ruellan-http-accept-push-policy-00#section-3.2">Push-Policy</a></code> はリクエストを処理するときのプッシュ通知に関するサーバーの動作を定義します。</dd>
- <dt>{{HTTPHeader("Retry-After")}}</dt>
- <dd>後続のリクエストを行う前に、ユーザーエージェントがどれだけの期間待つべきかを示します。</dd>
- <dt>{{HTTPHeader("Signature")}} {{experimental_inline}}</dt>
- <dd><code><a href="https://wicg.github.io/webpackage/draft-yasskin-http-origin-signed-responses.html#rfc.section.3.1">Signature</a></code> ヘッダーフィールドは、交換のための署名のリストを伝え、それぞれはその署名の権威を決定して、そして更新する方法についての情報を伴います。</dd>
- <dt>{{HTTPHeader("Signed-Headers")}} {{experimental_inline}}</dt>
- <dd><code><a href="https://wicg.github.io/webpackage/draft-yasskin-http-origin-signed-responses.html#rfc.section.5.1.2">Signed-Headers</a></code> ヘッダーフィールドは、シグネチャに含めるためのレスポンスヘッダーフィールドの順序付きリストを識別します。</dd>
- <dt>{{HTTPHeader("Server-Timing")}}</dt>
- <dd>指定されたリクエストとレスポンスのサイクルについて、１つ以上のメトリクス又は説明を通信します。</dd>
- <dt>{{HTTPHeader("Service-Worker-Allowed")}}</dt>
- <dd><a href="https://w3c.github.io/ServiceWorker/#service-worker-script-response">サービスワーカースクリプトのレスポンス</a>にこのヘッダを含めることで、<a href="https://w3c.github.io/ServiceWorker/#path-restriction">パス制限</a>を解除するために使用します。</dd>
- <dt>{{HTTPHeader("SourceMap")}}</dt>
- <dd>生成されたコードと <a href="/ja/docs/Tools/Debugger/How_to/Use_a_source_map">ソースマップ</a> を関連付けます。</dd>
- <dt>{{HTTPHeader("Upgrade")}}</dt>
- <dd>Upgrade ヘッダーフィールドに関連する RFC 文書は <a href="https://tools.ietf.org/html/rfc7230#section-6.7">RFC 7230, section 6.7</a> です。標準仕様では、現在のクライアント、サーバー、トランスポート層プロトコル接続で別のプロトコルへ更新または変更するための規則を定めています。例えば、このヘッダー標準ではサーバーが Upgrade ヘッダーフィールドを認めて実装すると決める前提で、クライアントが HTTP 1.1 から HTTP 2.0 へ変更することを可能にします。どちらの相手も、 Upgrade ヘッダーフィールドで指定された要件を受け入れる必要はありません。これはクライアントのヘッダーでもサーバーのヘッダーでも使用できます。Upgrade ヘッダーフィールドを指定した場合は、更新オプションを指ヘッダーonnection ヘッダーフィールドも送信者が送信しなければなりません。Connection ヘッダーフィールドについて、詳しくは <a href="https://tools.ietf.org/html/rfc7230#section-6.1">前述の RFC のセクション 6.1</a> をご覧ください。</dd>
- <dt>{{HTTPHeader("X-DNS-Prefetch-Control")}}</dt>
- <dd>ユーザーがたどるであろうリンクや、ドキュメントが参照する画像、 CSS、 JavaScript などのリソースのドメイン名解決をブラウザーが事前に行う機能である、 DNS プリフェッチを制御します。</dd>
- <dt>{{HTTPHeader("X-Firefox-Spdy")}} {{deprecated_inline}} {{non-standard_inline}}</dt>
- <dd>...</dd>
- <dt>{{HTTPHeader("X-Pingback")}} {{non-standard_inline}}</dt>
- <dd>...</dd>
- <dt>{{HTTPHeader("X-Requested-With")}}</dt>
- <dd>...</dd>
- <dt>{{HTTPHeader("X-Robots-Tag")}}{{non-standard_inline}}</dt>
- <dd><code><a href="https://developers.google.com/search/reference/robots_meta_tag#xrobotstag">X-Robots-Tag</a></code> ヘッダーは、一般の検索エンジンの結果でウェブページをどのように索引付けをするかを示します。このヘッダーは <code>&lt;meta name="robots" content="..."&gt;</code> と等価です。</dd>
- <dt>{{HTTPHeader("X-UA-Compatible")}} {{non-standard_inline}}</dt>
- <dd>使用する文書モードを示すために Internet Explorer で使用されています。</dd>
-</dl>
-
-<h2 id="Contributing" name="Contributing">協力</h2>
-
-<p><a href="/ja/docs/MDN/Contribute/Howto/Document_an_HTTP_header">新しい項目を書いたり</a>、既存のものを改善したりすることにご協力ください。</p>
-
-<h2 id="See_also" name="See_also">関連情報</h2>
-
-<ul>
- <li><a href="https://en.wikipedia.org/wiki/List_of_HTTP_header_fields">Wikipedia の HTTP ヘッダーの一覧のページ</a></li>
- <li><a href="https://www.iana.org/assignments/message-headers/perm-headers.html">IANA レジストリ</a></li>
- <li><a href="https://httpwg.org/specs/">HTTP Working Group</a></li>
-</ul>
diff --git a/files/ja/web/http/headers/index.md b/files/ja/web/http/headers/index.md
new file mode 100644
index 0000000000..a2239ea7e0
--- /dev/null
+++ b/files/ja/web/http/headers/index.md
@@ -0,0 +1,401 @@
+---
+title: HTTP ヘッダー
+slug: Web/HTTP/Headers
+tags:
+  - HTTP
+  - HTTP ヘッダー
+  - Networking
+  - Reference
+  - header
+  - ネットワーク
+  - ヘッダー
+  - リファレンス
+translation_of: Web/HTTP/Headers
+---
+{{HTTPSidebar}}
+
+**HTTP ヘッダー**により、 HTTP リクエストやレスポンスでクライアントやサーバーが追加情報を渡すことができます。 HTTP ヘッダーは、大文字小文字を区別しないヘッダー名とそれに続くコロン (`:`)、 値で構成されます。値の前にある{{Glossary("Whitespace", "ホワイトスペース")}}は無視されます。
+
+私的な独自のヘッダーは、以前は `X-` 接頭辞を使用していましたが、この慣習は 2012 年 6 月の [RFC 6648](https://datatracker.ietf.org/doc/html/rfc6648) で非推奨になりました。これは、標準外のフィールドが標準になったときに発生する不便さのためです。それ以外のヘッダーは [IANA レジストリー](https://www.iana.org/assignments/message-headers/perm-headers.html)に収録されており、その基になったものは [RFC 4229](https://datatracker.ietf.org/doc/html/rfc4229) です。また IANA は[新たに提案された HTTP ヘッダーのレジストリー](https://www.iana.org/assignments/message-headers/prov-headers.html)も管理しています。
+
+ヘッダーは、そのコンテキストに応じて分類できます。
+
+- {{Glossary("Request header", "リクエストヘッダー")}}は、読み込むリソースについての情報や、そのリソースをリクエストしているクライアントに関する詳細な情報を持ちます。
+- {{Glossary("Response header", "レスポンスヘッダー")}}は、レスポンスに関する追加情報、例えば場所や提供しているサーバーに関する情報を保持します。
+- {{Glossary("Representation header", "表現ヘッダー")}}は、リソースの本体に関する情報、例えば  [MIME タイプ](/ja/docs/Web/HTTP/Basics_of_HTTP/MIME_types)や適用されるエンコード／圧縮方式などについての情報を持ちます。
+- {{Glossary("Payload header","ペイロードヘッダー")}}は、転送されるデータの表現から独立した情報、例えばコンテンツの長さや転送に使われるエンコード方式などを持ちます。
+
+またヘッダーは、{{Glossary("Proxy_server", "プロキシーサーバー")}}がどのように扱うかに応じてグループ化されます。
+
+- {{ httpheader("Connection") }}
+- {{ httpheader("Keep-Alive") }}
+- {{ httpheader("Proxy-Authenticate") }}
+- {{ httpheader("Proxy-Authorization") }}
+- {{ httpheader("TE") }}
+- {{ httpheader("Trailer") }}
+- {{ httpheader("Transfer-Encoding") }}
+- {{ httpheader("Upgrade") }} ([プロトコルのアップグレードの仕組み](/ja/docs/Web/HTTP/Protocol_upgrade_mechanism)も参照)
+
+<!---->
+
+- エンドツーエンドヘッダー
+  - : これらのヘッダーは、メッセージの最終的な宛先、すなわちリクエストならばサーバー、レスポンスならばクライアントに伝送し*なければなりません*。中間のプロキシーはヘッダーを変更せずに再伝送しなければならず、またキャッシュには保存しなければなりません。
+- ホップバイホップヘッダー
+  - : これらのヘッダーは単一のトランスポート層の接続にのみ意味を持ち、プロキシーが再転送したり、キャッシュを行ったりしては*いけません*。なお、 {{httpheader("Connection")}} ヘッダーを用いて設定する場合があるのはホップバイホップヘッダーのみです。
+
+## 認証
+
+- {{HTTPHeader("WWW-Authenticate")}}
+  - : リソースへアクセスに使用すべき認証方法を定義します。
+- {{HTTPHeader("Authorization")}}
+  - : サーバーでユーザーエージェントを認証するための資格情報を持ちます。
+- {{HTTPHeader("Proxy-Authenticate")}}
+  - : プロキシーサーバーの背後にあるリソースへアクセスできるようにするために使用すべき認証方法を定義します。
+- {{HTTPHeader("Proxy-Authorization")}}
+  - : プロキシーサーバーでユーザーエージェントを認証するための資格情報を持ちます。
+
+## キャッシュ
+
+- {{HTTPHeader("Age")}}
+  - : オブジェクトがプロキシーのキャッシュに存在する時間を秒数で表します。
+- {{HTTPHeader("Cache-Control")}}
+  - : リクエストおよびレスポンスで、キャッシュ機能に関するディレクティブです。
+- {{HTTPHeader("Clear-Site-Data")}}
+  - : リクエストしているウェブサイトに関連付けられた閲覧用のデータ (クッキー、ストレージ、キャッシュなど) を消去します。
+- {{HTTPHeader("Expires")}}
+  - : レスポンスが古くなると考えられる日時を表します。
+- {{HTTPHeader("Pragma")}}
+  - : リクエストからレスポンスへの流れの中でさまざまな影響がある、実装依存のヘッダーです。 `Cache-Control` ヘッダーが未実装である HTTP/1.0 キャッシュとの後方互換性のために使用します。
+- {{HTTPHeader("Warning")}}
+  - : 起こりうる問題に関する一般警告情報です。
+
+## クライアントヒント
+
+HTTP の{{Glossary("Client_hints", "クライアントヒント")}}とは、端末の種類やネットワークの状態など、クライアントに関する有用な情報を提供する一連のリクエストヘッダーのことで、サーバーはこれらの条件に合わせて提供するコンテンツを最適化することができます。
+
+サーバーは、 {{HTTPHeader("Accept-CH")}} を使用して、クライアントが関心を持っているクライアントヒントヘッダーを積極的に要求します。クライアントは、要求されたヘッダーを後続のリクエストに含めることがあります。
+
+- {{HTTPHeader("Accept-CH")}} {{experimental_inline}}
+  - : サーバーはクライアントヒントに対応していることを、 `Accept-CH` ヘッダーフィールドまたは HTML の `<meta>` 要素の [`http-equiv`](/en-US/docs/Web/HTML/Element/meta#attr-http-equiv) 属性で同等の指定をすることで広報することができます。
+- {{HTTPHeader("Accept-CH-Lifetime")}} {{experimental_inline}} {{deprecated_inline}}
+  - : サーバーは、指定された期間サーバーが対応する一連のクライアントヒントを記憶するようクライアントに依頼し、そのサーバーのオリジンに対するその後のリクエストでクライアントヒントを配信できるようにすることができます。
+
+クライアントヒントの様々なカテゴリーを以下に示します。
+
+### 端末クライアントヒント
+
+- {{HTTPHeader("Content-DPR")}} {{deprecated_inline}}{{experimental_inline}}
+  - : 数値で、選択された画像レスポンスの CSS ピクセルに対する物理ピクセルの比を示します。
+- {{HTTPHeader("Device-Memory")}} {{deprecated_inline}}{{experimental_inline}}
+  - : 技術的には [Device Memory API](/ja/docs/Web/API/Device_Memory_API) の一部で、このヘッダーはクライアントが持つおよその RAM の量を表します。
+- {{HTTPHeader("DPR")}} {{deprecated_inline}}{{experimental_inline}}
+  - : クライアントの端末ピクセル比 (DPR)、すなわち CSS ピクセルあたりの物理ピクセル数を示します。
+- {{HTTPHeader("Viewport-Width")}} {{deprecated_inline}}{{experimental_inline}}
+  - : 数値で、レイアウトビューポートの幅を CSS ピクセル数で示します。指定されたピクセル数は、それ以上の最小の整数に丸められます (つまり切り上げ)。
+- {{HTTPHeader("Width")}} {{deprecated_inline}}{{experimental_inline}}
+  - : `Width` リクエストヘッダーフィールドは数値で、要求するリソースの幅 (つまり画像の自身の寸法) を物理ピクセル数で示します。
+
+### ネットワーククライアントヒント
+
+ネットワーククライアントヒントにより、サーバーはネットワークの帯域やレイテンシーに基づいて、どの情報を送るかを選択することができます。
+
+- {{HTTPHeader("Downlink")}}
+  - : サーバーに対するクライアントのコネクションのおよその帯域を、 Mbps で表します。これは [Network Information API](/ja/docs/Web/API/Network_Information_API) の一部です。
+- {{HTTPHeader("ECT")}}
+  - : {{Glossary("effective connection type", "有効接続種別")}} (「ネットワークプロファイル」) は、そのコネクションのレイテンシーや帯域に最も近いものです。これは [Network Information API](/ja/docs/Web/API/Network_Information_API) の一部です。
+- {{HTTPHeader("RTT")}}
+  - : アプリケーション層のラウンドトリップ時間 (RTT) をミリ秒で表し、これにはサーバーの処理時間も含みます。これは [Network Information API](/ja/docs/Web/API/Network_Information_API) の一部です。
+- {{HTTPHeader("Save-Data")}} {{experimental_inline}}
+  - : 論理型で、ユーザーエージェントのデータ利用の削減についての設定を示します。
+
+## 条件付き
+
+- {{HTTPHeader("Last-Modified")}}
+  - : リソースが最後に変更された日時であり、同じリソースの複数のバージョンを比較するために使用されます。 {{HTTPHeader("ETag")}} より正確さは低いのですが、環境によっては計算が容易です。{{HTTPHeader("If-Modified-Since")}} や {{HTTPHeader("If-Unmodified-Since")}} を使用する条件付きリクエストでは、リクエストの動作を変更するためにこの値を使用します。
+- {{HTTPHeader("ETag")}}
+  - : 一意な文字列であり、リソースのバージョンを識別します。 {{HTTPHeader("If-Match")}} や {{HTTPHeader("If-None-Match")}} を使用する条件付きリクエストでは、リクエストの動作を変更するためにこの値を使用します。
+- {{HTTPHeader("If-Match")}}
+  - : リクエストを条件付きにして、保存されたリソースが指定した ETag のいずれかに一致する場合に限りメソッドを適用します。
+- {{HTTPHeader("If-None-Match")}}
+  - : リクエストを条件付きにして、保存されたリソースが指定した ETag のいずれかに一致*しない*場合に限りメソッドを適用します。これはキャッシュを更新する (安全なリクエスト向け)、あるいはすでにリソースが存在する場合に新しいリソースのアップロードを止めるために使用します。
+- {{HTTPHeader("If-Modified-Since")}}
+  - : リクエストを条件付きにして、そのリソースが指定した日時より後に変更されている場合に限り転送するようリクエストします。キャッシュが期限切れである場合に限りデータを転送するために使用します。
+- {{HTTPHeader("If-Unmodified-Since")}}
+  - : リクエストを条件付きにして、そのリソースが指定した日時より後に変更されていない場合に限り転送するようリクエストします。これは、特定の範囲の新しい断片と古い断片の一貫性を保証する、あるいは既存の文書を変更するときに楽観的な並行性制御システムを実装するために使用します。
+- {{HTTPHeader("Vary")}}
+  - : 新しいものを元のサーバーにリクエストするのではなく、キャッシュされたレスポンスが使用できるよう決定するために、リクエストヘッダーを一致させる方法を定めます。/dd&gt;
+
+## 接続制御
+
+- {{HTTPHeader("Connection")}}
+  - : 現在の転送が完了した後も、ネットワークコネクションを維持するかを制御します。
+- {{HTTPHeader("Keep-Alive")}}
+  - : 持続的なコネクションをどれだけの期間維持するかを制御します。
+
+## コンテンツネゴシエーション
+
+[コンテンツネゴシエーション](/ja/docs/Web/HTTP/Content_negotiation)ヘッダーです。
+
+- {{HTTPHeader("Accept")}}
+  - : 送り返すことができるデータの{{Glossary("MIME_type", "種類")}}をサーバーに通知します。
+- {{HTTPHeader("Accept-Encoding")}}
+  - : 送り返すリソースで使用できるエンコードアルゴリズム (一般的には<a href="/ja/docs/Web/HTTP/Compression">圧縮アルゴリズム</a>) をサーバーに通知します。
+- {{HTTPHeader("Accept-Language")}}
+  - : 送り返すリソースで期待する自然言語をサーバーに通知します。これはヒントであり、必ずしもユーザーの完全な制御下にあるものではありません。サーバーはユーザーの選択 (ドロップダウンリストで選ぶ言語など) を明示的に上書きしないように、常に注意を払うべきです。
+
+## 制御
+
+- {{HTTPHeader("Expect")}}
+  - : リクエストを適切に扱うためにサーバーが実行しなければならないと期待されていることを示します。
+- {{HTTPHeader("Max-Forwards")}}
+  - : TBD
+
+## クッキー
+
+- {{HTTPHeader("Cookie")}}
+  - : 過去に {{HTTPHeader("Set-Cookie")}} ヘッダーでサーバーから送信されて保存している [HTTP クッキー](/ja/docs/Web/HTTP/Cookies)を持ちます。
+- {{HTTPHeader("Set-Cookie")}}
+  - : サーバーからユーザーエージェントにクッキーを送信します。
+- {{HTTPHeader("Cookie2")}} {{deprecated_inline}}
+  - : 過去に {{HTTPHeader("Set-Cookie2")}} ヘッダーでサーバーから送信された HTTP クッキーを伝えるために使われていましたが、仕様書から廃止されました。代わりに {{HTTPHeader("Cookie")}} を使用してください。
+- {{HTTPHeader("Set-Cookie2")}} {{deprecated_inline}}
+  - : サーバーからユーザーエージェントにクッキーを送信するために使用されていましたが、仕様書から廃止されました。代わりに {{HTTPHeader("Set-Cookie")}} を使用してください。
+
+## CORS
+
+*CORS についての詳細は、[こちら](CORS)を参照してください。*
+
+- {{HTTPHeader("Access-Control-Allow-Origin")}}
+  - : レスポンスが共有可能かを示します。
+- {{HTTPHeader("Access-Control-Allow-Credentials")}}
+  - : credentials フラグが真であるときに、リクエストへのレスポンスを開示してよいかを示します。
+- {{HTTPHeader("Access-Control-Allow-Headers")}}
+  - : {{Glossary("Preflight_request", "プリフライトリクエスト")}}へのレスポンスで使用し、実際のリクエストを行うときに使用できる HTTP ヘッダーを指定します。
+- {{HTTPHeader("Access-Control-Allow-Methods")}}
+  - : プリフライトリクエストへのレスポンスで、リソースへアクセスするときに使用できるメソッドを指定します。
+- {{HTTPHeader("Access-Control-Expose-Headers")}}
+  - : ヘッダー名を羅列して、レスポンスの一部として開示できるヘッダーを示します。
+- {{HTTPHeader("Access-Control-Max-Age")}}
+  - : プリフライトリクエストの結果をキャッシュしてよい期間を示します。
+- {{HTTPHeader("Access-Control-Request-Headers")}}
+  - : 実際のリクエストを行う際に使用する HTTP ヘッダーをサーバーがわかるようにするため、プリフライトリクエストを発信する際に使用します。
+- {{HTTPHeader("Access-Control-Request-Method")}}
+  - : 実際のリクエストを行う際に使用する [HTTP メソッド](/ja/docs/Web/HTTP/Methods)をサーバーがわかるようにするため、プリフライトリクエストを発信する際に使用します。
+- {{HTTPHeader("Origin")}}
+  - : どこから読み込みが発生したかを示します。
+- {{HTTPHeader("Timing-Allow-Origin")}}
+  - : [Resource Timing API](/en-US/docs/Web/API/Resource_Timing_API) の機能を通じて受け取った属性の値を見ることができるオリジンを指定します。そうでなければオリジン間の制約によってゼロとして報告されます。
+
+## ダウンロード
+
+- {{HTTPHeader("Content-Disposition")}}
+  - : 転送したリソースをインラインで表示すべきか (ヘッダーが存在しない場合の既定の動作)、またはダウンロードとして扱い、「名前を付けて保存」ウィンドウを表示すべきかを示します。
+
+## メッセージ本文の情報
+
+- {{HTTPHeader("Content-Length")}}
+  - : リソースの大きさを、バイト単位の10進数で示します。
+- {{HTTPHeader("Content-Type")}}
+  - : リソースのメディア種別を示します。
+- {{HTTPHeader("Content-Encoding")}}
+  - : 圧縮アルゴリズムを指定するために使用します。
+- {{HTTPHeader("Content-Language")}}
+  - : 読者向けに言語を示すヘッダーであり、ユーザーが自身の好む言語に応じて区別することができます。
+- {{HTTPHeader("Content-Location")}}
+  - : 返すデータの代替データの場所を示します。
+
+## プロキシー
+
+- {{HTTPHeader("Forwarded")}}
+  - : リクエストのパスにプロキシーが関与したときに変更または遺失した、プロキシーサーバーのクライアント側の情報を持ちます。
+- {{HTTPHeader("X-Forwarded-For")}} {{non-standard_inline}}
+  - : HTTP プロキシーやロードバランサーを経由してウェブサーバーに接続するクライアントの、接続元 IP アドレスを識別します。
+- {{HTTPHeader("X-Forwarded-Host")}} {{non-standard_inline}}
+  - : プロキシーやロードバランサーに接続するクライアントがリクエストした、オリジナルのホストを示します。
+- {{HTTPHeader("X-Forwarded-Proto")}} {{non-standard_inline}}
+  - : クライアントがプロキシーやロードバランサーに接続するために使用したプロトコル (HTTP または HTTPS) を識別します。
+- {{HTTPHeader("Via")}}
+  - : フォワードプロキシーとリバースプロキシーの両方が追加するヘッダーであり、リクエストヘッダーとレスポンスヘッダーのどちらでも見られます。
+
+## リダイレクト
+
+- {{HTTPHeader("Location")}}
+  - : ページのリダイレクト先の URL を示します。
+
+## リクエストコンテキスト
+
+- {{HTTPHeader("From")}}
+  - : リクエストを行うユーザーエージェントを操作している人間の、インターネット電子メールアドレスを持ちます。
+- {{HTTPHeader("Host")}}
+  - : サーバーのドメイン名 (バーチャルホスト向け) およびサーバーが待ち受けている TCP ポート番号 (省略可能) を指定します。
+- {{HTTPHeader("Referer")}}
+  - : 現在リクエストしているページへリンクしていた、前のウェブページのアドレスです。
+- {{HTTPHeader("Referrer-Policy")}}
+  - : {{HTTPHeader("Referer")}} ヘッダーで送信するどのリファラー情報をリクエストに含めるかを制御します。
+- {{HTTPHeader("User-Agent")}}
+  - : リクエストを行うユーザーエージェントソフトウェアのアプリケーションタイプ、オペレーティングシステム、ベンダー、バージョンを、ネットワークプロトコルのピアが識別できるようにする文字列を持ちます。 [Firefox ユーザーエージェント文字列リファレンス](/ja/docs/Web/HTTP/Headers/User-Agent/Firefox)もご覧ください。
+
+## レスポンスコンテキスト
+
+- {{HTTPHeader("Allow")}}
+  - : リソースがサポートする HTTP リクエストメソッドを示します。
+- {{HTTPHeader("Server")}}
+  - : リクエストを扱うサーバーが使用するソフトウェアの情報を持ちます。
+
+## 範囲付きリクエスト
+
+- {{HTTPHeader("Accept-Ranges")}}
+  - : サーバーが範囲付きリクエストに対応するかどうか、対応していれば対応する場合は、範囲を表すことができる単位を示します。
+- {{HTTPHeader("Range")}}
+  - : サーバーが返すべきである文書の範囲を示します。
+- {{HTTPHeader("If-Range")}}
+  - : 指定した ETag または日時がリモートのリソースにマッチする場合に限定した、条件付き range request を生成します。異なるバージョンのリソースから 2 つの範囲をダウンロードすることを防ぎます。
+- {{HTTPHeader("Content-Range")}}
+  - : 部分的なメッセージが、メッセージ本文全体のどこに位置するかを示します。
+
+## セキュリティ
+
+- {{HTTPHeader("Cross-Origin-Embedder-Policy")}} (COEP)
+  - : サーバーが指定された文書の埋め込み方針を宣言するために使います。
+- {{HTTPHeader("Cross-Origin-Opener-Policy")}} (COOP)
+  - : 他のドメインがウィンドウを開いたり制御したりすることを防ぎます。
+- {{HTTPHeader("Cross-Origin-Resource-Policy")}} (CORP)
+  - : このヘッダーが適用されたリソースのレスポンスが他のドメインから読み取られるのを防ぎます。
+- {{HTTPHeader("Content-Security-Policy")}} ({{Glossary("CSP")}})
+  - : ユーザーエージェントがページで読み込むことを許可するリソースを制御します。
+- {{HTTPHeader("Content-Security-Policy-Report-Only")}}
+  - : ウェブの開発者がポリシーの効果を適用せずに監視することで、実験を行うことができます。これらの違反レポートは、 HTTP `POST` リクエストによって指定した URI へ送信される {{Glossary("JSON")}} 文書で構成されます。
+- {{HTTPHeader("Expect-CT")}}
+  - : サイトが証明書の透明性要件の報告や実施を選択できるようにします。これにより、そのサイトで不正な証明書の使用に気づかないことを防ぎます。サイトが Expect-CT ヘッダーを有効にした場合、そのサイトの証明書が公開CTログに表示されることを Chrome が確認するようにリクエストしています。
+- {{HTTPHeader("Feature-Policy")}}
+  - : 自身のフレームまたはその中の iframe で、ブラウザーの機能を使用することを許可または拒否する仕組みを提供します。
+- {{HTTPHeader("Origin-Isolation")}} {{experimental_inline}}
+  - : ウェブアプリケーションをオリジンから独立させるための仕組みを提供します。
+- {{HTTPHeader("Strict-Transport-Security")}} ({{Glossary("HSTS")}})
+  - : HTTP の代わりに HTTPS による通信を強制します。
+- {{HTTPHeader("Upgrade-Insecure-Requests")}}
+  - : 暗号化や認証されたレスポンスについて、クライアントの設定を表す信号をサーバーに送信して、{{CSP("upgrade-insecure-requests")}} ディレクティブを正しく扱うことができます。
+- {{HTTPHeader("X-Content-Type-Options")}}
+  - : ブラウザーで MIME スニッフィングを無効化して、{{HTTPHeader("Content-Type")}} で指定したタイプを強制的に使用させます。
+- {{HTTPHeader("X-Download-Options")}}
+  - : HTTP の [`X-Download-Options`](<https://docs.microsoft.com/ja-jp/previous-versions/windows/internet-explorer/ie-developer/compatibility/jj542450(v=vs.85)?#the-noopen-directive>) ヘッダーは、ブラウザー (Internet Explorer) がアプリケーションからのダウンロードでファイルを「開く」の選択肢を表示しないようにし、アプリケーションのコンテキストで実行するアクセス権を得ることがないようにして、ファイルとすることでフィッシング詐欺を防止します。 (メモ: [MS Edge bug](https://developer.microsoft.com/ja-jp/microsoft-edge/platform/issues/18488178/) に関連)
+- {{HTTPHeader("X-Frame-Options")}} (XFO)
+  - : ブラウザーがページを {{HTMLElement("frame")}}, {{HTMLElement("iframe")}}, {{HTMLElement("embed")}}, {{HTMLElement("object")}} の内部に表示することを許可するかを示します。
+- {{HTTPHeader("X-Permitted-Cross-Domain-Policies")}}
+  - : クロスドメインポリシーファイル (`crossdomain.xml`) を許可するかどうかを指定します。このファイルは、 Adobe の Flash Player、Adobe Acrobat、Microsoft Silverlight、Apache Flex などのクライアントに、[同一オリジンポリシー](/ja/docs/Web/Security/Same-origin_policy)によって制限されているドメイン間のデータを処理する許可を与えるポリシーを定義することができます。詳細については、 [Cross-domain Policy File Specification](https://www.adobe.com/devnet/articles/crossdomain_policy_file_spec.html) を参照してください。
+- {{HTTPHeader("X-Powered-By")}}
+  - : ホスティング環境やその他のフレームワークによって設定される可能性があり、アプリケーションや訪問者に有益ではない情報を含みます。潜在的な脆弱性が発現することを防ぐために、このヘッダーは設定しないでください。
+- {{HTTPHeader("X-XSS-Protection")}}
+  - : クロスサイトスクリプティングのフィルタリングを有効化します。
+
+### HTTP Public Key Pinning (HPKP)
+
+{{Glossary("HPKP", "HTTP Public Key Pinning")}} は非推奨となり、削除されて Certificate Transparency と {{HTTPHeader("Expect-CT")}} に置き換えられました。
+
+- {{HTTPHeader("Public-Key-Pins")}}
+  - : 偽造した証明書による {{Glossary("MITM")}} 攻撃の危険性を軽減するため、特定の暗号公開鍵とウェブサーバーを関連付けます。
+- {{HTTPHeader("Public-Key-Pins-Report-Only")}}
+  - : ピンニングに違反する場合でも、ヘッダーで指定した report-uri にレポートを送信して、クライアントからサーバーへの接続は許可します。
+
+## メタデータ読み取りリクエストヘッダー
+
+{{Glossary("Fetch metadata request header", "メタデータ読み取りリクエストヘッダー")}}は、リクエストが発生したときのコンテキストに関する情報を提供します。これによりサーバーは、リクエストがどこから来たのか、リソースがどのように使用されるのかに基づいて、リクエストを許可すべきかどうかを判断することができます。
+
+- {{HTTPHeader("Sec-Fetch-Site")}}
+  - : リクエスト開始元のオリジンと宛先のオリジンとの関係を示すリクエストヘッダーです。これは構造化ヘッダーで、値はトークンであり、取りうる値は `cross-site`, `same-origin`, `same-site`, `none` です。
+- {{HTTPHeader("Sec-Fetch-Mode")}}
+  - : サーバーへのリクエストモードを示すリクエストヘッダーです。これは構造化ヘッダーで、値はトークンであり、取りうる値は `cors`, `navigate`, `nested-navigate`, `no-cors`, `same-origin`, `websocket` です。
+- {{HTTPHeader("Sec-Fetch-User")}}
+  - : ナビゲーションリクエストがユーザー操作によって起動されたかどうかを示すリクエストヘッダーです。これは構造化ヘッダーであり、論理値で、取りうる値は `?0` ならば偽、 `?1` ならば真です。
+- {{HTTPHeader("Sec-Fetch-Dest")}}
+  - : リクエストの宛先を示すリクエストヘッダーです。これは構造化ヘッダーで、値はトークンであり、取りうる値は `audio`, `audioworklet`, `document`, `embed`, `empty`, `font`, `image`, `manifest`, `object`, `paintworklet`, `report`, `script`, `serviceworker`, `sharedworker`, `style`, `track`, `video`, `worker`, `xslt` です。
+
+## Server-sent event
+
+- {{HTTPHeader("Last-Event-ID")}}
+  - : TBD
+- {{HTTPHeader("NEL")}} {{experimental_inline}}
+  - : 開発者がネットワークエラー報告ポリシーを宣言できるようにする仕組みを定義します。
+- {{HTTPHeader("Ping-From")}}
+  - : TBD
+- {{HTTPHeader("Ping-To")}}
+  - : TBD
+- {{HTTPHeader("Report-To")}}
+  - : 警告やエラーを送信るためのブラウザーに対するサーバーのエンドポイントを指定するために使用します。
+
+## 転送エンコーディング
+
+- {{HTTPHeader("Transfer-Encoding")}}
+  - : エンティティをユーザーへ問題なく転送できるエンコード形式を指定します。
+- {{HTTPHeader("TE")}}
+  - : ユーザーエージェントが進んで受け入れる転送エンコーディングを指定します。
+- {{HTTPHeader("Trailer")}}
+  - : 送信者が chunk メッセージの終端に追加フィールドを含めることができます。
+
+## WebSocket
+
+- {{HTTPHeader("Sec-WebSocket-Key")}}
+  - : TBD
+- {{HTTPHeader("Sec-WebSocket-Extensions")}}
+  - : TBD
+- {{HTTPHeader("Sec-WebSocket-Accept")}}
+  - : TBD
+- {{HTTPHeader("Sec-WebSocket-Protocol")}}
+  - : TBD
+- {{HTTPHeader("Sec-WebSocket-Version")}}
+  - : TBD
+
+## その他
+
+- {{HTTPHeader("Accept-Push-Policy")}} {{experimental_inline}}
+  - : クライアントはリクエストに対して求めるプッシュポリシーを、リクエスト内で [`Accept-Push-Policy`](https://datatracker.ietf.org/doc/html/draft-ruellan-http-accept-push-policy-00#section-3.1) ヘッダーフィールドを送信することで表現することができます。
+- {{HTTPHeader("Accept-Signature")}} {{experimental_inline}}
+  - : クライアントは [`Accept-Signature`](https://wicg.github.io/webpackage/draft-yasskin-http-origin-signed-responses.html#rfc.section.3.7) ヘッダーフィールドを送信して、利用可能な署名を利用する意図を示したり、対応している署名の種類を示したりすることができます。
+- {{HTTPHeader("Alt-Svc")}}
+  - : このサービスにたどり着く他の方法のリストに使用します。
+- {{HTTPHeader("Date")}}
+  - : メッセージを生成した日時です。
+- {{HTTPHeader("Early-Data")}} {{experimental_inline}}
+  - : このリクエストが TLS early data で送信されたことを示します。
+- {{HTTPHeader("Large-Allocation")}}
+  - : 読み込み中のページは大量の割り当てが必要であることをブラウザーに伝えます。
+- {{HTTPHeader("Link")}}
+  - : [`Link`](https://datatracker.ietf.org/doc/html/rfc5988#section-5) エンティティヘッダーフィールドは、 HTTP ヘッダー内の1つ以上のリンクを記述する方法を提供します。意味的には HTML の {{HTMLElement("link")}} 要素と等価です。
+- {{HTTPHeader("Push-Policy")}} {{experimental_inline}}
+  - : [`Push-Policy`](https://datatracker.ietf.org/doc/html/draft-ruellan-http-accept-push-policy-00#section-3.2)はリクエストを処理するときのプッシュ通知に関するサーバーの動作を定義します。
+- {{HTTPHeader("Retry-After")}}
+  - : 後続のリクエストを行う前に、ユーザーエージェントがどれだけの期間待つべきかを示します。
+- {{HTTPHeader("Signature")}} {{experimental_inline}}
+  - : [`Signature`](https://wicg.github.io/webpackage/draft-yasskin-http-origin-signed-responses.html#rfc.section.3.1) ヘッダーフィールドは、交換のための署名のリストを伝え、それぞれはその署名の権威を決定して、そして更新する方法についての情報を伴います。
+- {{HTTPHeader("Signed-Headers")}} {{experimental_inline}}
+  - : [`Signed-Headers`](https://wicg.github.io/webpackage/draft-yasskin-http-origin-signed-responses.html#rfc.section.5.1.2) ヘッダーフィールドは、シグネチャに含めるためのレスポンスヘッダーフィールドの順序付きリストを識別します。
+- {{HTTPHeader("Server-Timing")}}
+  - : 指定されたリクエストとレスポンスのサイクルについて、１つ以上のメトリクスまたは説明を通信します。
+- {{HTTPHeader("Service-Worker-Allowed")}}
+  - : [パス正弦](https://w3c.github.io/ServiceWorker/#path-restriction)を解除するために、[サービスワーカースクリプトのレスポンス](https://w3c.github.io/ServiceWorker/#service-worker-script-response)で使用します。
+- {{HTTPHeader("SourceMap")}}
+  - : 生成されたコードと <a href="/ja/docs/Tools/Debugger/How_to/Use_a_source_map">ソースマップ</a> を関連付けます。
+- {{HTTPHeader("Upgrade")}}
+  - : Upgrade ヘッダーフィールドに関連する RFC 文書は [RFC 7230, section 6.7](https://datatracker.ietf.org/doc/html/rfc7230#section-6.7) です。標準仕様では、現在のクライアント、サーバー、トランスポート層プロトコル接続で別のプロトコルへ更新または変更するための規則を定めています。例えば、このヘッダー標準ではサーバーが Upgrade ヘッダーフィールドを認めて実装すると決める前提で、クライアントが HTTP 1.1 から HTTP 2.0 へ変更することを可能にします。どちらの相手も、 Upgrade ヘッダーフィールドで指定された要件を受け入れる必要はありません。これはクライアントのヘッダーでもサーバーのヘッダーでも使用できます。Upgrade ヘッダーフィールドを指定した場合は、更新オプションを指ヘッダーonnection ヘッダーフィールドも送信者が送信しなければなりません。Connection ヘッダーフィールドについて、詳しくは[前述の RFC のセクション 6.1](https://datatracker.ietf.org/doc/html/rfc7230#section-6.1) をご覧ください。
+- {{HTTPHeader("X-DNS-Prefetch-Control")}}
+  - : ユーザーがたどるであろうリンクや、ドキュメントが参照する画像、 CSS、 JavaScript などのリソースのドメイン名解決をブラウザーが事前に行う機能である、 DNS プリフェッチを制御します。
+- {{HTTPHeader("X-Firefox-Spdy")}} {{deprecated_inline}} {{non-standard_inline}}
+  - : TBD
+- {{HTTPHeader("X-Pingback")}} {{non-standard_inline}}
+  - : TBD
+- {{HTTPHeader("X-Requested-With")}}
+  - : TBD
+- {{HTTPHeader("X-Robots-Tag")}}{{non-standard_inline}}
+  - : [`X-Robots-Tag`](https://developers.google.com/search/reference/robots_meta_tag#xrobotstag) ヘッダーは、一般の検索エンジンの結果でウェブページをどのように索引付けをするかを示します。このヘッダーは `&lt;meta name="robots" content="..."&gt;` と等価です。
+- {{HTTPHeader("X-UA-Compatible")}} {{non-standard_inline}}
+  - : 使用する文書モードを示すために Internet Explorer で使用されています。
+
+## 協力
+
+[新しい記事を書いたり](/en-US/docs/MDN/Contribute/Howto/Document_an_HTTP_header)、既存のものを改善したりすることにご協力ください。
+
+## 関連情報
+
+- [Wikipedia の HTTP ヘッダーの一覧のページ](https://en.wikipedia.org/wiki/List_of_HTTP_header_fields)
+- [IANA レジストリー](https://www.iana.org/assignments/message-headers/perm-headers.html)
+- [HTTP Working Group](https://httpwg.org/specs/)
diff --git a/files/ja/web/http/headers/x-content-type-options/index.html b/files/ja/web/http/headers/x-content-type-options/index.html
deleted file mode 100644
index e62742b226..0000000000
--- a/files/ja/web/http/headers/x-content-type-options/index.html
+++ /dev/null
@@ -1,99 +0,0 @@
----
-title: X-Content-Type-Options
-slug: Web/HTTP/Headers/X-Content-Type-Options
-tags:
-  - HTTP
-  - HTTP ヘッダー
-  - Reference
-  - レスポンスヘッダー
-translation_of: Web/HTTP/Headers/X-Content-Type-Options
----
-<div>{{HTTPSidebar}}</div>
-
-<p><code><strong>X-Content-Type-Options</strong></code> は HTTP のレスポンスヘッダーで、 {{HTTPHeader("Content-Type")}} ヘッダーで示された <a href="/ja/docs/Web/HTTP/Basics_of_HTTP/MIME_types">MIME タイプ</a>を変更せずに従うべきであることを示すために、サーバーによって使用されるマーカーです。これにより、<a href="/ja/docs/Web/HTTP/Basics_of_HTTP/MIME_types#MIME_sniffing">MIME タイプのスニッフィング</a>を抑止することができます。すなわち、ウェブマスターが自分が何をしているかを分かっていると言う手段です。</p>
-
-<p>このヘッダーは、コンテンツのスニッフィングにより、実行不可能な MIME タイプを実行可能な MIME タイプに変換してしまうという事故をウェブマスターが抑止するための方法として、マイクロソフトが IE 8 で導入したものです。それ以来、他のブラウザーは MIME スニッフィングのアルゴリズムがそれほど積極的ではなくても、このヘッダーを導入してきました。</p>
-
-<p>Firefox 72 から、 {{HTTPHeader("Content-type")}} が提供されている場合、 MIME スニッフィングの抑止が最上位の文書にも適用されるようになりました。これにより、 HTML のウェブページが <code>text/html</code> 以外の MIME タイプで提供されている場合、表示される代わりにダウンロードされることがあります。両方のヘッダーを正しく設定してください。</p>
-
-<p>サイトのセキュリティテスターは通常、このヘッダーが設定されていることを期待しています。</p>
-
-<p class="blockIndicator note">注: <code>X-Content-Type-Options</code> は、 <a href="https://fetch.spec.whatwg.org/#should-response-to-request-be-blocked-due-to-nosniff?"><code>nosniff</code> によるリクエストブロッキング</a>を<a href="https://fetch.spec.whatwg.org/#concept-request-destination">リクエスト先</a>が "<code>script</code>" と "<code>style</code>" の場合のみ適用します。しかし、 <a href="https://chromium.googlesource.com/chromium/src/+/master/services/network/cross_origin_read_blocking_explainer.md#determining-whether-a-response-is-corb_protected">Cross-Origin Read Blocking (CORB)</a> 保護を HTML, TXT, JSON, XML の各ファイル (SVG <code>image/svg+xml</code> を除く) に対して有効にすることもできます。</p>
-
-<table class="properties">
- <tbody>
-  <tr>
-   <th scope="row">ヘッダー種別</th>
-   <td>{{Glossary("Response header", "レスポンスヘッダー")}}</td>
-  </tr>
-  <tr>
-   <th scope="row">{{Glossary("Forbidden header name", "禁止ヘッダー名")}}</th>
-   <td>いいえ</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Syntax" name="Syntax">構文</h2>
-
-<pre class="syntaxbox notranslate">X-Content-Type-Options: nosniff
-</pre>
-
-<h2 id="Directives" name="Directives">ディレクティブ</h2>
-
-<dl>
- <dt><code>nosniff</code></dt>
- <dd>リクエスト先のタイプが以下の場合、リクエストをブロックします。
- <ul>
-  <li>"<code>style</code>" で MIME タイプが <code>text/css</code> でない、または</li>
-  <li>"<code>script</code>" で MIME タイプが <a href="https://html.spec.whatwg.org/multipage/scripting.html#javascript-mime-type">JavaScript の MIME タイプ</a>でない</li>
- </ul>
- </dd>
- <dd>Cross-Origin Read Blocking (CORB) 保護を次の MIME タイプに対して有効にします。
- <ul>
-  <li><code>text/html</code></li>
-  <li><code>text/plain</code></li>
-  <li><code>text/json</code>, <code>application/json</code> またはその他の JSON 拡張を伴うタイプ: <code>*/*+json</code></li>
-  <li><code>text/xml</code>, <code>application/xml</code> またはその他の XML 拡張を伴うタイプ: <code>*/*+xml</code> (<code>image/svg+xml</code> を除く)</li>
- </ul>
- </dd>
-</dl>
-
-<h2 id="Specifications" name="Specifications">仕様書</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">仕様書</th>
-   <th scope="col">状態</th>
-   <th scope="col">備考</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("Fetch", "#x-content-type-options-header", "X-Content-Type-Options definition")}}</td>
-   <td>{{Spec2("Fetch")}}</td>
-   <td>初回定義</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
-
-<p>{{Compat("http.headers.X-Content-Type-Options")}}</p>
-
-<h3 id="Browser_specific_notes" name="Browser_specific_notes">ブラウザー固有の注意事項</h3>
-
-<ul>
- <li>Firefox 72 は最上位文書で <code>X-Content-Type-Options: nosniff</code> を有効にします。</li>
-</ul>
-
-<h2 id="See_also" name="See_also">関連情報</h2>
-
-<ul>
- <li>{{HTTPHeader("Content-Type")}}</li>
- <li>Microsoft による X-Content-Type-Options の <a href="https://blogs.msdn.microsoft.com/ie/2008/09/02/ie8-security-part-vi-beta-2-update/">元の定義</a></li>
- <li>The <a href="https://observatory.mozilla.org/">Mozilla Observatory</a> tool testing the configuration (including this header) of Web sites for safety and security</li>
- <li><a href="https://blog.mozilla.org/security/2016/08/26/mitigating-mime-confusion-attacks-in-firefox/">Mitigating MIME Confusion Attacks in Firefox</a></li>
- <li><a href="https://fetch.spec.whatwg.org/#corb">Cross-Origin Read Blocking (CORB)</a></li>
- <li><a href="https://chromium.googlesource.com/chromium/src/+/master/services/network/cross_origin_read_blocking_explainer.md">Google Docs CORB explainer</a></li>
-</ul>
diff --git a/files/ja/web/http/headers/x-content-type-options/index.md b/files/ja/web/http/headers/x-content-type-options/index.md
new file mode 100644
index 0000000000..d61b33f893
--- /dev/null
+++ b/files/ja/web/http/headers/x-content-type-options/index.md
@@ -0,0 +1,67 @@
+---
+title: X-Content-Type-Options
+slug: Web/HTTP/Headers/X-Content-Type-Options
+tags:
+  - HTTP
+  - HTTP ヘッダー
+  - Reference
+  - レスポンスヘッダー
+browser-compat: http.headers.X-Content-Type-Options
+translation_of: Web/HTTP/Headers/X-Content-Type-Options
+---
+{{HTTPSidebar}}
+
+**`X-Content-Type-Options`** は HTTP のレスポンスヘッダーで、 {{HTTPHeader("Content-Type")}} ヘッダーで示された [MIME タイプ](/ja/docs/Web/HTTP/Basics_of_HTTP/MIME_types)を変更せずに従うべきであることを示すために、サーバーによって使用されるマーカーです。これにより、[MIME タイプのスニッフィング](/ja/docs/Web/HTTP/Basics_of_HTTP/MIME_types#mime_sniffing)を抑止することができます。言い替えれば、 MIME タイプを意図的に設定することができます。
+
+このヘッダーは、 Microsoft が IE 8 において、コンテンツのスニッフィングにより、実行不可能な MIME タイプを実行可能な MIME タイプに変換してしまうという事故を抑止するためのとして導入したものです。それ以来、他のブラウザーは MIME スニッフィングのアルゴリズムにそれほど積極的ではなくても、このヘッダーを導入してきました。
+
+Firefox 72 から、 {{HTTPHeader("Content-type")}} が提供されている場合、 MIME スニッフィングの抑止が最上位の文書にも適用されるようになりました。これにより、 HTML のウェブページが `text/html` 以外の MIME タイプで提供された場合、表示されるのではなくダウンロードされることがあります。両方のヘッダーを正しく設定してください。
+
+サイトのセキュリティテスターは通常、このヘッダーが設定されていることを期待しています。
+
+> **Note:** `X-Content-Type-Options` は、 [`nosniff` によるリクエストブロッキング](https://fetch.spec.whatwg.org/#should-response-to-request-be-blocked-due-to-nosniff?)を[リクエスト先](https://fetch.spec.whatwg.org/#concept-request-destination)が "`script`" と "`style`" の場合のみ適用します。しかし、 [Cross-Origin Read Blocking (CORB)](https://chromium.googlesource.com/chromium/src/+/master/services/network/cross_origin_read_blocking_explainer.md#determining-whether-a-response-is-corb_protected) 保護を HTML, TXT, JSON, XML の各ファイル (SVG `image/svg+xml` を除く) に対して有効にすることもできます。</p>
+
+<table class="properties">
+  <tbody>
+    <tr>
+      <th scope="row">ヘッダー種別</th>
+      <td>{{Glossary("Response header", "レスポンスヘッダー")}}</td>
+    </tr>
+    <tr>
+      <th scope="row">{{Glossary("Forbidden header name", "禁止ヘッダー名")}}</th>
+      <td>いいえ</td>
+    </tr>
+  </tbody>
+</table>
+
+## 構文
+
+```
+X-Content-Type-Options: nosniff
+```
+
+# ディレクティブ
+
+- `nosniff`
+  - : リクエスト先のタイプが `style` でありその MIME タイプが `text/css` ではない場合、または、タイプが `script` で MIME タイプが [JavaScript の MIME タイプ](https://html.spec.whatwg.org/multipage/scripting.html#javascript-mime-type)ではない場合にリクエストをブロックします。
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+### ブラウザー固有の注意事項
+
+- Firefox 72 は最上位の文書で `X-Content-Type-Options: nosniff` を有効にします。
+
+## 関連情報
+
+- {{HTTPHeader("Content-Type")}}
+- Microsoft による X-Content-Type-Options の [元の定義](https://blogs.msdn.microsoft.com/ie/2008/09/02/ie8-security-part-vi-beta-2-update/)
+- [Mozilla Observatory](https://observatory.mozilla.org/) ツールによるウェブサイトの設定 (このヘッダーを含む) の安全性とセキュリティのテスト
+- [Firefox における MIME 混同攻撃の緩和](https://blog.mozilla.org/security/2016/08/26/mitigating-mime-confusion-attacks-in-firefox/)
+- [Cross-Origin Read Blocking (CORB)](https://fetch.spec.whatwg.org/#corb)
+- [Google Docs CORB 解説書](https://chromium.googlesource.com/chromium/src/+/master/services/network/cross_origin_read_blocking_explainer.md)
diff --git a/files/ja/web/http/network_error_logging/index.html b/files/ja/web/http/network_error_logging/index.html
new file mode 100644
index 0000000000..9ddd3ff8ff
--- /dev/null
+++ b/files/ja/web/http/network_error_logging/index.html
@@ -0,0 +1,155 @@
+---
+title: Network Error Logging
+slug: Web/HTTP/Network_Error_Logging
+tags:
+  - Guide
+  - HTTP
+  - Network Error Logging
+  - Reference
+translation_of: Web/HTTP/Network_Error_Logging
+---
+<div>{{HTTPSidebar}}{{SeeCompatTable}}</div>
+
+<p>ネットワークエラーロギングは、HTTP の {{HTTPHeader("NEL")}} <em><a href="/ja/docs/Glossary/Response_header">レスポンスヘッダー</a></em>を使って設定できるメカニズムです。この実験的なヘッダーにより、ウェブサイトやアプリケーションは、対応しているブラウザーから、失敗した (必要であれば成功した) ネットワーク読み取りに関するレポートを受け取ることを選択することができます。</p>
+
+<p>レポートは、 {{HTTPHeader("Report-To")}} ヘッダーで定義された報告グループに送信されます。</p>
+
+<h2 id="Usage">使用方法</h2>
+
+<p>ウェブアプリケーションは、 <em><a href="/ja/docs/Glossary/Response_header">JSON エンコード</a></em>されたオブジェクトである NEL ヘッダーを使って、この動作を選択します。</p>
+
+<pre><a href="https://www.w3.org/TR/network-error-logging/#nel-response-header">NEL</a>: { "<a href="https://www.w3.org/TR/network-error-logging/#the-report_to-member">report_to</a>": "nel",
+       "<a href="https://www.w3.org/TR/network-error-logging/#the-max_age-member">max_age</a>": 31556952 }
+</pre>
+
+<p>ブラウザーから安全と認識されたオリジンが必要です。</p>
+
+<p>以下のオブジェクトキーが NEL ヘッダーで指定されています。</p>
+
+<dl>
+ <dt>report_to</dt>
+ <dd>
+ <p>ネットワークエラーレポートの送信先となる <a href="/ja/docs/Web/API/Reporting_API">Reporting API</a> グループです。</p>
+ </dd>
+ <dt>max_age</dt>
+ <dd>ポリシーの有効期間を秒単位で指定します (HSTS ポリシーが時間制限されているのと同様の方法です)。参照される報告グループは、少なくとも NEL ポリシーと同程度の有効期間を持つ必要があります。</dd>
+ <dt>include_subdomains</dt>
+ <dd>true の場合、ポリシーは、ポリシーヘッダーが設定されているオリジンの下のすべてのサブドメインに適用されます。このオプションを有効にする場合は、サブドメインを含めるように報告グループを設定する必要があります。</dd>
+ <dt>success_fraction</dt>
+ <dd>0 と 1 の間の浮動小数点値で、報告するネットワーク要求が成功した割合を指定します。既定値は 0 で、JSON ペイロードにキーが存在しない場合、成功したネットワークリクエストは報告されません。</dd>
+ <dt>failure_fraction</dt>
+ <dd>0 と 1 の間の浮動小数点値で、報告する<strong>失敗した</strong>ネットワークリクエストの割合を指定します。既定値は 1 で、JSON ペイロードにキーが存在しない場合、失敗したすべてのネットワークリクエストが報告されます。</dd>
+</dl>
+
+<p>上記のレポートグループは、 {{HTTPHeader("Report-To")}} ヘッダー内で通常の方法で定義されます。例えば下記のようになります。</p>
+
+<pre><a href="https://wicg.github.io/reporting/#report-to" id="ref-for-report-to①">Report-To</a>: { "<a href="https://wicg.github.io/reporting/#group" id="ref-for-group①">group</a>": "nel",
+             "<a href="https://wicg.github.io/reporting/#max-age" id="ref-for-max-age①">max_age</a>": 31556952,
+             "<a href="https://wicg.github.io/reporting/#endpoints" id="ref-for-endpoints②">endpoints</a>": [
+               { "<a href="https://wicg.github.io/reporting/#url" id="ref-for-url②">url</a>": "https://example.com/csp-reports" }
+             ] }
+</pre>
+
+<h2 id="Error_reports">エラーレポート</h2>
+
+<p>これらの例では、Reporting API のペイロード全体を示しています。最上位の <strong><code>"body"</code></strong> キーには、ネットワークエラーレポートが含まれています。</p>
+
+<h3 id="HTTP_400_Bad_Request_response">HTTP 400 (Bad Request) response</h3>
+
+<pre class="brush: js">{
+  "age": 20,
+  "type": "network-error",
+  "url": "https://example.com/previous-page",
+  "body": {
+    "elapsed_time": 338,
+    "method": "POST",
+    "phase": "application",
+    "protocol": "http/1.1",
+    "referrer": "https://example.com/previous-page",
+    "sampling_fraction": 1,
+    "server_ip": "137.205.28.66",
+    "status_code": 400,
+    "type": "http.error",
+    "url": "https://example.com/bad-request"
+  }
+}
+</pre>
+
+<h3 id="DNS_name_not_resolved">DNS 名が未解決</h3>
+
+<p>なお、このレポートではフェーズが <code>dns</code> に設定されており、含めることのできる <code>server_ip</code> はありません。</p>
+
+<pre class="brush: js">{
+  "age": 20,
+  "type": "network-error",
+  "url": "https://example.com/previous-page",
+  "body": {
+    "elapsed_time": 18,
+    "method": "POST",
+    "phase": "dns",
+    "protocol": "http/1.1",
+    "referrer": "https://example.com/previous-page",
+    "sampling_fraction": 1,
+    "server_ip": "",
+    "status_code": 0,
+    "type": "dns.name_not_resolved",
+    "url": "https://example-host.com/"
+  }
+}
+</pre>
+
+<p>ネットワークエラーの種類は、仕様で定義された以下の値のいずれかですが、ブラウザは独自のエラー種別を追加して送信することができます。</p>
+
+<dl>
+ <dt><code>dns.unreachable</code></dt>
+ <dd>ユーザーの DNS サーバーに到達できない</dd>
+ <dt><code>dns.name_not_resolved</code></dt>
+ <dd>ユーザーの DNS サーバーは応答したが、リクエストされた URI の IP アドレスに解決できなかった。</dd>
+ <dt><code>dns.failed</code></dt>
+ <dd>DNS サーバーへのリクエストが、以前のエラー (SERVFAIL など) でカバーされない理由で失敗した</dd>
+ <dt><code>dns.address_changed</code></dt>
+ <dd>セキュリティ上の理由から、オリジナルのレポートを配信したサーバーの IP アドレスが、エラー発生時の現在のサーバーの IP アドレスと異なる場合、レポートデータはこの問題に関する情報のみを含むようにダウングレードされ、タイプは <code>dns.address_changed</code> に設定されます。</dd>
+ <dt><code>tcp.timed_out</code></dt>
+ <dd>サーバーへの TCP コネクションがタイムアウトした</dd>
+ <dt><code>tcp.closed</code></dt>
+ <dd>TCP コネクションがサーバーから閉じられた</dd>
+ <dt><code>tcp.reset</code></dt>
+ <dd>TCP コネクションがリセットされた</dd>
+ <dt><code>tcp.refused</code></dt>
+ <dd>TCP コネクションがサーバーから拒否された</dd>
+ <dt><code>tcp.aborted</code></dt>
+ <dd>TCP コネクションが中止された</dd>
+ <dt><code>tcp.address_invalid</code></dt>
+ <dd>IP アドレスが無効である</dd>
+ <dt><code>tcp.address_unreachable</code></dt>
+ <dd>IP アドレスに到達できない</dd>
+ <dt><code>tcp.failed</code></dt>
+ <dd>TCP コネクションが直前のエラーによってカバーできない原因で失敗した</dd>
+ <dt><code>http.error</code></dt>
+ <dd>ユーザーエージェントがレスポンスの受信に成功したが、 <a href="https://datatracker.ietf.org/doc/html/rfc7231#section-6.5">4xx</a> または <a href="https://datatracker.ietf.org/doc/html/rfc7231#section-6.6">5xx</a> のステータスコードであった</dd>
+ <dt><code>http.protocol.error</code></dt>
+ <dd>コネクションが HTTP プロトコルエラーのために中止された</dd>
+ <dt><code>http.response.invalid</code></dt>
+ <dd>レスポンスが空であるか、 content-length が合っていないか、エンコーディングが正しくないか、その他の状況でユーザーエージェントがレスポンスを処理できなかった</dd>
+ <dt><code>http.response.redirect_loop</code></dt>
+ <dd>リクエストはリダイレクトループが検出されたため中止された</dd>
+ <dt><code>http.failed</code></dt>
+ <dd>コネクションは直前のエラーでカバーされなかった HTTP プロトコルのエラーで失敗した</dd>
+</dl>
+
+<h2 id="Specifications">仕様書</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">仕様書</th>
+  </tr>
+  <tr>
+   <td><a href="https://w3c.github.io/network-error-logging/#introduction">Network Error Logging</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">ブラウザーの互換性</h2>
+
+<p>{{Compat("http.headers.NEL")}}</p>
diff --git a/files/ja/web/http/status/202/index.html b/files/ja/web/http/status/202/index.html
deleted file mode 100644
index f4f6916f78..0000000000
--- a/files/ja/web/http/status/202/index.html
+++ /dev/null
@@ -1,37 +0,0 @@
----
-title: 202 Accepted
-slug: Web/HTTP/Status/202
-tags:
-  - HTTP
-  - HTTP ステータスコード
-  - リファレンス
-translation_of: Web/HTTP/Status/202
----
-<div>{{HTTPSidebar}}</div>
-
-<p>HTTP <code><strong>202 Accepted</strong></code> レスポンスはリクエストを受け取ったが処理はされていない、ということを表すステータスコードです。これはコミットされていない、リクエストを処理した結果を示すレスポンスを、非同期で送信する方法がHTTPに存在しないことを意味しています。別のプロセスまたはサーバーがリクエストを処理する場合、またはバッチ処理の場合を想定しています。</p>
-
-<h2 id="ステータス">ステータス</h2>
-
-<pre class="syntaxbox">202 Accepted</pre>
-
-<h2 id="仕様">仕様</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">仕様</th>
-   <th scope="col">タイトル</th>
-  </tr>
-  <tr>
-   <td>{{RFC("7231", "202 Accepted" , "6.3.3")}}</td>
-   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="参照">参照</h2>
-
-<ul>
- <li>{{HTTPHeader("Accept")}}</li>
-</ul>
diff --git a/files/ja/web/http/status/202/index.md b/files/ja/web/http/status/202/index.md
new file mode 100644
index 0000000000..863f9b6fe8
--- /dev/null
+++ b/files/ja/web/http/status/202/index.md
@@ -0,0 +1,31 @@
+---
+title: 202 Accepted
+slug: Web/HTTP/Status/202
+tags:
+  - HTTP
+  - リファレンス
+  - ステータスコード
+  - 成功レスポンス
+translation_of: Web/HTTP/Status/202
+---
+{{HTTPSidebar}}
+
+HTTP (HyperText Transfer Protocol) の **`202 Accepted`** レスポンスステータスコードは、リクエストを受け取ったが、処理が完了していないことを表します。実際には、処理はまだ始まっていない可能性もあります。そのリクエストは、実際に処理が行われたときに拒否される可能性があるため、最終的に処理されるかどうかはわかりません。処理が実際に行われたときに許可されないかもしれないからです。
+
+202 はコミットするものではありません。つまり、 HTTP にはリクエストの処理結果を示す非同期レスポンスを後で送信する方法がありません。別のプロセスやサーバーがリクエストを処理する場合や、バッチ処理のためのものです。
+
+## ステータス
+
+```
+202 Accepted
+```
+
+## 仕様書
+
+| 仕様書                                                   | 題名                                                         |
+| -------------------------------------------------------- | ------------------------------------------------------------- |
+| {{RFC("7231", "202 Accepted" , "6.3.3")}} | Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content |
+
+## 関連情報
+
+- {{HTTPHeader("Accept")}}
diff --git a/files/ja/web/javascript/about_javascript/index.html b/files/ja/web/javascript/about_javascript/index.html
index 072f271b5c..ab4cb35741 100644
--- a/files/ja/web/javascript/about_javascript/index.html
+++ b/files/ja/web/javascript/about_javascript/index.html
@@ -49,10 +49,10 @@ translation_of: Web/JavaScript/About_JavaScript
  <dd>C/C++エンジンでMozillaが実装したJavaScript (SpiderMonkey と呼ばれている) について、アプリケーションへの組込方法を含む詳細情報。</dd>
  <dt><a href="/ja/docs/Rhino">Rhino</a></dt>
  <dd>Javaで記述されたJavaScript実装(Rhino と呼ばれている) についての詳細情報</dd>
- <dt><a href="/ja/docs/JavaScript_Language_Resources" title="ja/JavaScript_Language_Resources">言語リソース</a></dt>
+ <dt><a href="/ja/docs/JavaScript_Language_Resources">言語リソース</a></dt>
  <dd>公布されている JavaScript の標準を指します。</dd>
- <dt><a href="/ja/docs/JavaScript/A_re-introduction_to_JavaScript" title="ja/A_re-introduction_to_JavaScript">JavaScript「再」入門</a></dt>
- <dd><a href="/ja/docs/JavaScript/Guide" title="ja/JavaScript/Guide">JavaScript ガイド</a> および <a href="/ja/docs/JavaScript/Reference" title="ja/JavaScript/Reference">JavaScript リファレンス</a></dd>
+ <dt><a href="/ja/docs/JavaScript/A_re-introduction_to_JavaScript">JavaScript「再」入門</a></dt>
+ <dd><a href="/ja/docs/JavaScript/Guide">JavaScript ガイド</a> および <a href="/ja/docs/JavaScript/Reference">JavaScript リファレンス</a></dd>
 </dl>
 
 <p>JavaScript® は、米国およびその他の国における、Oracle の商標または登録商標です。</p>
diff --git a/files/ja/web/javascript/guide/working_with_objects/index.html b/files/ja/web/javascript/guide/working_with_objects/index.html
index 6200e1aa36..bf382dd5c7 100644
--- a/files/ja/web/javascript/guide/working_with_objects/index.html
+++ b/files/ja/web/javascript/guide/working_with_objects/index.html
@@ -109,10 +109,10 @@ myCar.year = 1969</pre>
 
 <h2 id="Enumerate_the_properties_of_an_object" name="Enumerate_the_properties_of_an_object">オブジェクトの全プロパティの列挙</h2>
 
-<p><a href="/ja/docs/Web/JavaScript/New_in_JavaScript/ECMAScript_5_support_in_Mozilla" title="ja/docs/JavaScript/ECMAScript 5 support in Mozilla">ECMAScript 5</a> 以降では、オブジェクトのプロパティをリストアップ/トラバース (横断走査) する言語特有の方法が 3 つあります。</p>
+<p><a href="/ja/docs/Web/JavaScript/New_in_JavaScript/ECMAScript_5_support_in_Mozilla">ECMAScript 5</a> 以降では、オブジェクトのプロパティをリストアップ/トラバース (横断走査) する言語特有の方法が 3 つあります。</p>
 
 <ul>
- <li><code><a href="/ja/docs/Web/JavaScript/Reference/Statements/for...in" title="ja/docs/JavaScript/Reference/Statements/for...in">for...in</a></code> ループ<br>
+ <li><code><a href="/ja/docs/Web/JavaScript/Reference/Statements/for...in">for...in</a></code> ループ<br>
   この方法は、オブジェクトとそのプロトタイプチェーンにある列挙可能なプロパティをすべて横断します</li>
  <li>{{jsxref("Object.keys", "Object.keys(o)")}}<br>
   このメソッドは、そのオブジェクト独自の (プロトタイプチェーンを除く) 列挙可能なすべてのプロパティ名 ("keys") を配列で返します</li>
@@ -288,7 +288,7 @@ fish.displayType(); // 出力 : Fishes</pre>
 car1.color = 'black';
 </pre>
 
-<p>詳しくは、<a href="/ja/docs/JavaScript/Reference">JavaScript リファレンス</a>内にある、<code>Function</code> オブジェクトの <a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Function/prototype" title="ja/docs/JavaScript/Reference/Global Objects/Function/prototype"><code>prototype</code> プロパティ</a>を参照してください。</p>
+<p>詳しくは、<a href="/ja/docs/JavaScript/Reference">JavaScript リファレンス</a>内にある、<code>Function</code> オブジェクトの <a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Function/prototype"><code>prototype</code> プロパティ</a>を参照してください。</p>
 
 <h2 id="Defining_methods" name="Defining_methods">メソッドの定義</h2>
 
diff --git a/files/ja/web/javascript/reference/global_objects/array/tostring/index.html b/files/ja/web/javascript/reference/global_objects/array/tostring/index.html
deleted file mode 100644
index c5f260f82e..0000000000
--- a/files/ja/web/javascript/reference/global_objects/array/tostring/index.html
+++ /dev/null
@@ -1,71 +0,0 @@
----
-title: Array.prototype.toString()
-slug: Web/JavaScript/Reference/Global_Objects/Array/toString
-tags:
-  - Array
-  - JavaScript
-  - Method
-  - Prototype
-translation_of: Web/JavaScript/Reference/Global_Objects/Array/toString
----
-<div>{{JSRef}}</div>
-
-<p><code><strong>toString()</strong></code> メソッドは、指定された配列とその要素を表す文字列を返します。</p>
-
-<div>{{EmbedInteractiveExample("pages/js/array-tostring.html","shorter")}}</div>
-
-<h2 id="Syntax" name="Syntax">構文</h2>
-
-<pre class="syntaxbox notranslate"><var>arr</var>.toString()</pre>
-
-<h3 id="Return_value" name="Return_value">返値</h3>
-
-<p>配列の要素を表す文字列です。</p>
-
-<h2 id="Description" name="Description">解説</h2>
-
-<p>{{jsxref("Array")}} オブジェクトは {{jsxref("Object")}} の <code>toString</code> メソッドを上書きしています。Array オブジェクトでは、<code>toString</code> メソッドは配列をつないで、配列のそれぞれの要素がカンマで区切られた 1 つの文字列を返します。</p>
-
-<p>配列が文字列値として表される必要がある場合や、配列が文字列の結合として参照される時、JavaScript は <code>toString</code> メソッドを自動的に呼び出します。</p>
-
-<h3 id="ECMAScript_5_semantics" name="ECMAScript_5_semantics">ECMAScript 5 でのセマンティック</h3>
-
-<p>JavaScript 1.8.5 （Firefox 4）以降、および ECMAScript 第 5 版では、<code>toString()</code> メソッドは一般化されており、すべてのオブジェクトで使用可能となっています。{{jsxref("Object.prototype.toString()")}} が呼び出され、その結果の値が返されます。</p>
-
-<h2 id="Examples" name="Examples">例</h2>
-
-<h3 id="Using_toString" name="Using_toString">toString を使用する</h3>
-
-<pre class="brush: js notranslate">const array1 = [1, 2, 'a', '1a'];
-
-console.log(array1.toString());
-// expected output: "1,2,a,1a"
-</pre>
-
-<h2 id="Specifications" name="Specifications">仕様書</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">仕様書</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-array.prototype.tostring', 'Array.prototype.toString')}}</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
-
-<div>
-<p>{{Compat("javascript.builtins.Array.toString")}}</p>
-</div>
-
-<h2 id="See_also" name="See_also">関連情報</h2>
-
-<ul>
- <li>{{jsxref("Array.prototype.join()")}}</li>
- <li>{{jsxref("Object.prototype.toSource()")}}</li>
-</ul>
diff --git a/files/ja/web/javascript/reference/global_objects/array/tostring/index.md b/files/ja/web/javascript/reference/global_objects/array/tostring/index.md
new file mode 100644
index 0000000000..17807b4e04
--- /dev/null
+++ b/files/ja/web/javascript/reference/global_objects/array/tostring/index.md
@@ -0,0 +1,60 @@
+---
+title: Array.prototype.toString()
+slug: Web/JavaScript/Reference/Global_Objects/Array/toString
+tags:
+  - Array
+  - JavaScript
+  - Method
+  - Prototype
+browser-compat: javascript.builtins.Array.toString
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/toString
+---
+{{JSRef}}
+
+**`toString()`** メソッドは、指定された配列とその要素を表す文字列を返します。
+
+{{EmbedInteractiveExample("pages/js/array-tostring.html","shorter")}}
+
+## 構文
+
+```js
+toString()
+```
+
+### 返値
+
+配列の要素の文字列表現です。
+
+## 解説
+
+{{jsxref("Array")}} オブジェクトは {{jsxref("Object")}} の `toString` メソッドをオーバーライドしています。Array オブジェクトでは、`toString` メソッドは配列をつないで、配列のそれぞれの要素がカンマで区切られた 1 つの文字列を返します。
+
+配列を文字列値として表す必要がある場合や、配列が文字列の結合として参照されるとき、JavaScript は `toString` メソッドを自動的に呼び出します。
+
+### ECMAScript 5 でのセマンティック
+
+JavaScript 1.8.5 (Firefox 4) 以降、および ECMAScript 第 5 版では、`toString()` メソッドは一般化されており、すべてのオブジェクトで使用可能となっています。{{jsxref("Object.prototype.toString()")}} が呼び出され、その結果の値が返されます。
+
+## 例
+
+### toString の使用
+
+```js
+const array1 = [1, 2, 'a', '1a'];
+
+console.log(array1.toString());
+// 期待される出力: "1,2,a,1a"
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- {{jsxref("Array.prototype.join()")}}
+- {{jsxref("Object.prototype.toSource()")}}
diff --git a/files/ja/web/javascript/reference/global_objects/asyncfunction/index.html b/files/ja/web/javascript/reference/global_objects/asyncfunction/index.html
index bc4359a60b..eaf1f2c2e9 100644
--- a/files/ja/web/javascript/reference/global_objects/asyncfunction/index.html
+++ b/files/ja/web/javascript/reference/global_objects/asyncfunction/index.html
@@ -39,7 +39,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/AsyncFunction
 <div class="note">
 <p><strong>注:</strong> {{jsxref("Statements/async_function", "非同期関数", "", 1)}}が <code>AsyncFunction</code> コンストラクターによって生成された場合、生成コンテキストのクロージャは生成されません。常にグローバルスコープに生成されます。</p>
 
-<p>実行すると、ローカル変数とグローバルグローバル変数にのみアクセスでき、 <code>AsyncFunction</code> コンストラクターが呼び出されたスコープの変数にはアクセスできません。</p>
+<p>実行すると、ローカル変数とグローバル変数にのみアクセスでき、 <code>AsyncFunction</code> コンストラクターが呼び出されたスコープの変数にはアクセスできません。</p>
 
 <p>これは、非同期関数式のコードで {{jsxref("Global_Objects/eval", "eval")}} を使用した場合とは異なります。</p>
 </div>
diff --git a/files/ja/web/javascript/reference/global_objects/date/parse/index.html b/files/ja/web/javascript/reference/global_objects/date/parse/index.html
index ec4a46ca35..b666075816 100644
--- a/files/ja/web/javascript/reference/global_objects/date/parse/index.html
+++ b/files/ja/web/javascript/reference/global_objects/date/parse/index.html
@@ -107,7 +107,7 @@ Date.parse('foo-bar 2014');
 
 <h2 id="Examples" name="Examples">例</h2>
 
-<h3 id="Using_Date.parse" name="Using_Date.parse">Using <code>Date.parse()</code> の使用</h3>
+<h3 id="Using_Date.parse" name="Using_Date.parse"><code>Date.parse()</code> の使用</h3>
 
 <p>以下の呼び出しはすべて <code>1546300800000</code> を返します。最初のものは ES5 によれば UTC 時刻を意味し、それ以外は ISO 日付仕様 (<code>Z</code> および <code>+00:00</code>) に従って UTC をタイムゾーンを指定しています。</p>
 
diff --git a/files/ja/web/javascript/reference/global_objects/index.html b/files/ja/web/javascript/reference/global_objects/index.html
deleted file mode 100644
index 44c08eeb57..0000000000
--- a/files/ja/web/javascript/reference/global_objects/index.html
+++ /dev/null
@@ -1,210 +0,0 @@
----
-title: 標準組込みオブジェクト
-slug: Web/JavaScript/Reference/Global_Objects
-tags:
-  - JavaScript
-  - Landing page
-  - Overview
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects
----
-<p>{{JSSidebar("Objects")}}</p>
-
-<p><span class="seoSummary">本章では JavaScript の標準組込みオブジェクトについて、それらのメソッドやプロパティと共にすべて文書化しています。</span></p>
-
-<p>ここでいう「<ruby>グローバルオブジェクト<rp> (</rp><rt>global objects</rt><rp>)</rp></ruby>」 (または標準組込みオブジェクト) という用語を<ruby><strong>グローバルオブジェクト</strong><rp> (</rp><rt>the global object</rt><rp>) </rp></ruby>と混同しないでください。ここで、『グローバルオブジェクト』は<strong>グローバルスコープにあるオブジェクト</strong>を指します。 (訳注: 日本語では複数形や the による区別ができないため、ここでは後者の <strong>the global object</strong> を『グローバルオブジェクト』と表記して区別します。)</p>
-
-<p>後者の『グローバルオブジェクト』自体は、グローバルスコープ中で {{JSxRef("Operators/this", "this")}} 演算子を使ってアクセスすることができます。実際、グローバルスコープは『グローバルオブジェクト』 (継承されたプロパティがあればそれらも含む) のプロパティから<strong>構成されています</strong>。</p>
-
-<p>グローバルスコープ内のその他のオブジェクトは、<a href="/ja/docs/Web/JavaScript/Guide/Working_with_Objects#Creating_new_objects">ユーザースクリプトによって作られる</a>か、あるいはホストアプリによって提供されます。ブラウザー上で提供されている利用可能なオブジェクトについては、<a href="/ja/docs/Web/API/Reference">API リファレンス</a> で文書化されています。</p>
-
-
-
-<p><a href="/ja/docs/DOM/DOM_Reference">DOM</a> と中核の <a href="/ja/docs/Web/JavaScript">JavaScript</a> との違いについての詳しい情報は、<a href="/ja/docs/Web/JavaScript/JavaScript_technologies_overview">JavaScript 技術概説</a>をご覧ください。</p>
-
-<h2 id="Standard_objects_by_category" name="Standard_objects_by_category">標準オブジェクト (カテゴリ別)</h2>
-
-<h3 id="Value_properties" name="Value_properties">値プロパティ</h3>
-
-<p>これらのグローバルプロパティは、単なる値を返します。これらはプロパティもメソッドも持ちません。</p>
-
-<ul>
- <li>{{JSxRef("Infinity")}}</li>
- <li>{{JSxRef("NaN")}}</li>
- <li>{{JSxRef("undefined")}}</li>
- <li>{{JSxRef("globalThis")}}</li>
-</ul>
-
-<h3 id="Function_properties" name="Function_properties">関数プロパティ</h3>
-
-<p>これらのグローバル関数 (オブジェクト上ではなくグローバルに呼ばれる関数) は、呼び出し元に直接結果を返します。</p>
-
-<div class="twocolumns">
-<ul>
- <li>{{JSxRef("Global_Objects/eval", "eval()")}}</li>
- <li>{{Non-Standard_Inline}} {{JSxRef("Global_Objects/uneval", "uneval()")}} </li>
- <li>{{JSxRef("Global_Objects/isFinite", "isFinite()")}}</li>
- <li>{{JSxRef("Global_Objects/isNaN", "isNaN()")}}</li>
- <li>{{JSxRef("Global_Objects/parseFloat", "parseFloat()")}}</li>
- <li>{{JSxRef("Global_Objects/parseInt", "parseInt()")}}</li>
- <li>{{JSxRef("Global_Objects/encodeURI", "encodeURI()")}}</li>
- <li>{{JSxRef("Global_Objects/encodeURIComponent", "encodeURIComponent()")}}</li>
- <li>{{JSxRef("Global_Objects/decodeURI", "decodeURI()")}}</li>
- <li>{{JSxRef("Global_Objects/decodeURIComponent", "decodeURIComponent()")}}</li>
- <li><strong>Deprecated</strong>
-  <ul>
-   <li>{{deprecated_inline}} {{JSxRef("Global_Objects/escape", "escape()")}}</li>
-   <li>{{deprecated_inline}} {{JSxRef("Global_Objects/unescape", "unescape()")}}</li>
-  </ul>
- </li>
-</ul>
-</div>
-
-<h3 id="Fundamental_objects" name="Fundamental_objects">基本オブジェクト</h3>
-
-<p>これらは、他のすべてのオブジェクトの基礎となる、主要な基本オブジェクトです。これらには、一般的なオブジェクト、関数、そしてエラーを表すオブジェクトが含まれます。</p>
-
-<ul>
- <li>{{JSxRef("Object")}}</li>
- <li>{{JSxRef("Function")}}</li>
- <li>{{JSxRef("Boolean")}}</li>
- <li>{{JSxRef("Symbol")}}</li>
-</ul>
-
-<h3 id="Error_objects" name="Error_objects">エラーオブジェクト</h3>
-
-<p>エラーオブジェクトは基本オブジェクトの特殊型です。これらのオブジェクトには、基本的な {{JSxRef("Error")}} 型の他に、いくつかの特殊なエラー型があります。</p>
-
-<div class="twocolumns">
-<ul>
- <li>{{JSxRef("Error")}}</li>
- <li>{{Experimental_Inline}} {{JSxRef("AggregateError")}} </li>
- <li>{{JSxRef("EvalError")}}</li>
- <li>{{JSxRef("InternalError")}}</li>
- <li>{{JSxRef("RangeError")}}</li>
- <li>{{JSxRef("ReferenceError")}}</li>
- <li>{{JSxRef("SyntaxError")}}</li>
- <li>{{JSxRef("TypeError")}}</li>
- <li>{{JSxRef("URIError")}}</li>
-</ul>
-</div>
-
-<h3 id="Numbers_and_dates" name="Numbers_and_dates">数と日付</h3>
-
-<p>これらは数、日付、数学計算を表す基本的なオブジェクトです。</p>
-
-<ul>
- <li>{{JSxRef("Number")}}</li>
- <li>{{JSxRef("BigInt")}}</li>
- <li>{{JSxRef("Math")}}</li>
- <li>{{JSxRef("Date")}}</li>
-</ul>
-
-<h3 id="Text_processing" name="Text_processing">テキスト処理</h3>
-
-<p>これらのオブジェクトは、文字列表現および文字列操作をサポートします。</p>
-
-<ul>
- <li>{{JSxRef("String")}}</li>
- <li>{{JSxRef("RegExp")}}</li>
-</ul>
-
-<h3 id="Indexed_collections" name="Indexed_collections">索引付きコレクション</h3>
-
-<p>これらのオブジェクトは、インデックス値で順序付けされたデータのコレクションを表します。これには、(型付けされた) 配列や配列に似た構造体も含まれます。</p>
-
-<div class="twocolumns">
-<ul>
- <li>{{JSxRef("Array")}}</li>
- <li>{{JSxRef("Int8Array")}}</li>
- <li>{{JSxRef("Uint8Array")}}</li>
- <li>{{JSxRef("Uint8ClampedArray")}}</li>
- <li>{{JSxRef("Int16Array")}}</li>
- <li>{{JSxRef("Uint16Array")}}</li>
- <li>{{JSxRef("Int32Array")}}</li>
- <li>{{JSxRef("Uint32Array")}}</li>
- <li>{{JSxRef("Float32Array")}}</li>
- <li>{{JSxRef("Float64Array")}}</li>
- <li>{{JSxRef("BigInt64Array")}}</li>
- <li>{{JSxRef("BigUint64Array")}}</li>
-</ul>
-</div>
-
-<h3 id="Keyed_collections" name="Keyed_collections">キー付きコレクション</h3>
-
-<p>これらのオブジェクトは、キーを使ったコレクションを表します。これらは、挿入順に反復可能な要素で構成されています。</p>
-
-<ul>
- <li>{{JSxRef("Map")}}</li>
- <li>{{JSxRef("Set")}}</li>
- <li>{{JSxRef("WeakMap")}}</li>
- <li>{{JSxRef("WeakSet")}}</li>
-</ul>
-
-<h3 id="Structured_data" name="Structured_data">構造化データ</h3>
-
-<p>これらのオブジェクトは、構造化データバッファおよび JavaScript Object Notation (JSON) を用いて書かれたデータを表現、操作します。</p>
-
-<ul>
- <li>{{JSxRef("ArrayBuffer")}}</li>
- <li>{{JSxRef("SharedArrayBuffer")}}</li>
- <li>{{JSxRef("Atomics")}}</li>
- <li>{{JSxRef("DataView")}}</li>
- <li>{{JSxRef("JSON")}}</li>
-</ul>
-
-<h3 id="Control_abstraction_objects" name="Control_abstraction_objects">制御抽象化オブジェクト</h3>
-
-<p>制御抽象化オブジェクトは、特に非同期のコードを構造化するために役立ちます (例えば深く入り組んだコールバックを使用しないなど)。</p>
-
-<ul>
- <li>{{JSxRef("Promise")}}</li>
- <li>{{JSxRef("Generator")}}</li>
- <li>{{JSxRef("GeneratorFunction")}}</li>
- <li>{{JSxRef("AsyncFunction")}}</li>
-</ul>
-
-<h3 id="Reflection" name="Reflection">リフレクション</h3>
-
-<ul>
- <li>{{JSxRef("Reflect")}}</li>
- <li>{{JSxRef("Proxy")}}</li>
-</ul>
-
-<h3 id="Internationalization" name="Internationalization">国際化</h3>
-
-<p>ECMAScript コアに追加された言語の扱いに影響する機能です。</p>
-
-<div class="twocolumns">
-<ul>
- <li>{{JSxRef("Intl")}}</li>
- <li>{{JSxRef("Global_Objects/Collator", "Intl.Collator")}}</li>
- <li>{{JSxRef("Global_Objects/DateTimeFormat", "Intl.DateTimeFormat")}}</li>
- <li>{{JSxRef("Global_Objects/ListFormat", "Intl.ListFormat")}}</li>
- <li>{{JSxRef("Global_Objects/NumberFormat", "Intl.NumberFormat")}}</li>
- <li>{{JSxRef("Global_Objects/PluralRules", "Intl.PluralRules")}}</li>
- <li>{{JSxRef("Global_Objects/RelativeTimeFormat", "Intl.RelativeTimeFormat")}}</li>
- <li>{{JSxRef("Global_Objects/Locale", "Intl.Locale")}}</li>
-</ul>
-</div>
-
-<h3 id="WebAssembly" name="WebAssembly">WebAssembly</h3>
-
-<div class="twocolumns">
-<ul>
- <li>{{JSxRef("WebAssembly")}}</li>
- <li>{{JSxRef("WebAssembly.Module")}}</li>
- <li>{{JSxRef("WebAssembly.Instance")}}</li>
- <li>{{JSxRef("WebAssembly.Memory")}}</li>
- <li>{{JSxRef("WebAssembly.Table")}}</li>
- <li>{{JSxRef("WebAssembly.CompileError")}}</li>
- <li>{{JSxRef("WebAssembly.LinkError")}}</li>
- <li>{{JSxRef("WebAssembly.RuntimeError")}}</li>
-</ul>
-</div>
-
-<h3 id="Other" name="Other">その他</h3>
-
-<ul>
- <li>{{JSxRef("Functions/arguments", "arguments")}}</li>
-</ul>
diff --git a/files/ja/web/javascript/reference/global_objects/index.md b/files/ja/web/javascript/reference/global_objects/index.md
new file mode 100644
index 0000000000..196e993730
--- /dev/null
+++ b/files/ja/web/javascript/reference/global_objects/index.md
@@ -0,0 +1,170 @@
+---
+title: 標準組み込みオブジェクト
+slug: Web/JavaScript/Reference/Global_Objects
+tags:
+  - JavaScript
+  - Landing page
+  - Overview
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects
+---
+{{JSSidebar("Objects")}}
+
+本章では JavaScript の標準組み込みオブジェクトについて、それらのメソッドやプロパティと共にすべて文書化しています。
+
+ここでいう「グローバルオブジェクト (global objects)」 (または標準組み込みオブジェクト) という用語を**グローバルオブジェクト** (the global object) と混同しないでください。ここで、『グローバルオブジェクト』は**グローバルスコープにあるオブジェクト**を指します。 (訳注: 日本語では複数形や the による区別ができないため、ここでは後者の **the global object** を『グローバルオブジェクト』と表記して区別します。)
+
+後者の『グローバルオブジェクト』自体は、グローバルスコープ中で {{JSxRef("Operators/this", "this")}} 演算子を使ってアクセスすることができます。実際、グローバルスコープは『グローバルオブジェクト』のプロパティと、もしあれば継承されたプロパティから**構成されています**。
+
+グローバルスコープ内のその他のオブジェクトは、[ユーザースクリプトによって作られたり](/ja/docs/Web/JavaScript/Guide/Working_with_Objects#creating_new_objects)、ホストアプリケーションによって提供されたりします。ブラウザー上で提供されている利用可能なオブジェクトについては、[API リファレンス](/ja/docs/Web/API)で文書化されています。
+
+[DOM](/en-US/docs/Web/API/Document_Object_Model) と中核の [JavaScript](/en-US/docs/Web/JavaScript) との違いについての詳しい情報は、[JavaScript 技術概説](/en-US/docs/Web/JavaScript/JavaScript_technologies_overview)をご覧ください。
+
+## 標準オブジェクト (カテゴリー別)
+
+### 値プロパティ
+
+これらのグローバルプロパティは、単なる値を返します。プロパティもメソッドも持ちません。
+
+- {{JSxRef("Infinity")}}
+- {{JSxRef("NaN")}}
+- {{JSxRef("undefined")}}
+- {{JSxRef("globalThis")}}
+
+### 関数プロパティ
+
+これらのグローバル関数 (オブジェクト上ではなくグローバルに呼ばれる関数) は、呼び出し元に直接結果を返します。
+
+- {{JSxRef("Global_Objects/eval", "eval()")}}
+- {{Non-Standard_Inline}} {{JSxRef("Global_Objects/uneval", "uneval()")}}
+- {{JSxRef("Global_Objects/isFinite", "isFinite()")}}
+- {{JSxRef("Global_Objects/isNaN", "isNaN()")}}
+- {{JSxRef("Global_Objects/parseFloat", "parseFloat()")}}
+- {{JSxRef("Global_Objects/parseInt", "parseInt()")}}
+- {{JSxRef("Global_Objects/encodeURI", "encodeURI()")}}
+- {{JSxRef("Global_Objects/encodeURIComponent", "encodeURIComponent()")}}
+- {{JSxRef("Global_Objects/decodeURI", "decodeURI()")}}
+- {{JSxRef("Global_Objects/decodeURIComponent", "decodeURIComponent()")}}
+- **非推奨**
+
+  - {{Deprecated_Inline}} {{JSxRef("Global_Objects/escape", "escape()")}}
+  - {{Deprecated_Inline}} {{JSxRef("Global_Objects/unescape", "unescape()")}}
+
+### 基本オブジェクト
+
+他のすべてのオブジェクトの基礎となる、主要な基本オブジェクトです。一般的なオブジェクト、関数、そしてエラーを表すオブジェクトが含まれます。
+
+- {{JSxRef("Object")}}
+- {{JSxRef("Function")}}
+- {{JSxRef("Boolean")}}
+- {{JSxRef("Symbol")}}
+
+### エラーオブジェクト
+
+エラーオブジェクトは基本オブジェクトの特殊型です。これらのオブジェクトには、基本的な {{JSxRef("Error")}} 型の他に、いくつかの特殊なエラー型があります。
+
+- {{JSxRef("Error")}}
+- {{JSxRef("AggregateError")}}
+- {{JSxRef("EvalError")}}
+- {{JSxRef("InternalError")}}
+- {{JSxRef("RangeError")}}
+- {{JSxRef("ReferenceError")}}
+- {{JSxRef("SyntaxError")}}
+- {{JSxRef("TypeError")}}
+- {{JSxRef("URIError")}}
+
+### 数値と日付
+
+数値、日付、数学計算を表す基本的なオブジェクトです。
+
+- {{JSxRef("Number")}}
+- {{JSxRef("BigInt")}}
+- {{JSxRef("Math")}}
+- {{JSxRef("Date")}}
+
+### テキスト処理
+
+これらのオブジェクトは、文字列を表したりその操作をサポートしたりします。
+
+- {{JSxRef("String")}}
+- {{JSxRef("RegExp")}}
+
+<h3 id="Indexed_collections" name="Indexed_collections">索引付きコレクション</h3>
+
+これらのオブジェクトは、インデックス値で順序付けされたデータのコレクションを表します。これには、(型付けされた) 配列や配列に似た構造体も含まれます。
+
+- {{JSxRef("Array")}}
+- {{JSxRef("Int8Array")}}
+- {{JSxRef("Uint8Array")}}
+- {{JSxRef("Uint8ClampedArray")}}
+- {{JSxRef("Int16Array")}}
+- {{JSxRef("Uint16Array")}}
+- {{JSxRef("Int32Array")}}
+- {{JSxRef("Uint32Array")}}
+- {{JSxRef("Float32Array")}}
+- {{JSxRef("Float64Array")}}
+- {{JSxRef("BigInt64Array")}}
+- {{JSxRef("BigUint64Array")}}
+
+### キー付きコレクション
+
+これらのオブジェクトは、キーを使ったコレクションを表します。反復可能なコレクション ({{JSxRef("Map")}} と {{JSxRef("Set")}}) は挿入順に容易に反復処理することができます。
+
+- {{JSxRef("Map")}}
+- {{JSxRef("Set")}}
+- {{JSxRef("WeakMap")}}
+- {{JSxRef("WeakSet")}}
+
+### 構造化データ
+
+これらのオブジェクトは、構造化データバッファおよび JavaScript Object Notation (JSON) を用いて書かれたデータを表現、操作します。
+
+- {{JSxRef("ArrayBuffer")}}
+- {{JSxRef("SharedArrayBuffer")}}
+- {{JSxRef("Atomics")}}
+- {{JSxRef("DataView")}}
+- {{JSxRef("JSON")}}
+
+### 制御抽象化オブジェクト
+
+制御抽象化オブジェクトは、特に非同期のコードを (例えば深く入り組んだコールバックを使用せずに) 構造化するのに役立ちます。
+
+- {{JSxRef("Promise")}}
+- {{JSxRef("Generator")}}
+- {{JSxRef("GeneratorFunction")}}
+- {{JSxRef("AsyncFunction")}}
+- {{JSxRef("Global_Objects/AsyncGenerator", "AsyncGenerator")}}
+- {{JSxRef("Global_Objects/AsyncGeneratorFunction", "AsyncGeneratorFunction")}}
+
+### リフレクション
+
+- {{JSxRef("Reflect")}}
+- {{JSxRef("Proxy")}}
+
+### 国際化
+
+中核の ECMAScript に言語に固有の機能を追加するものです。
+
+- {{JSxRef("Intl")}}
+- {{JSxRef("Global_Objects/Intl/Collator", "Intl.Collator")}}
+- {{JSxRef("Global_Objects/Intl/DateTimeFormat", "Intl.DateTimeFormat")}}
+- {{JSxRef("Global_Objects/Intl/ListFormat", "Intl.ListFormat")}}
+- {{JSxRef("Global_Objects/Intl/NumberFormat", "Intl.NumberFormat")}}
+- {{JSxRef("Global_Objects/Intl/PluralRules", "Intl.PluralRules")}}
+- {{JSxRef("Global_Objects/Intl/RelativeTimeFormat", "Intl.RelativeTimeFormat")}}
+- {{JSxRef("Global_Objects/Intl/Locale", "Intl.Locale")}}
+
+### WebAssembly
+
+- {{JSxRef("WebAssembly")}}
+- {{JSxRef("WebAssembly.Module")}}
+- {{JSxRef("WebAssembly.Instance")}}
+- {{JSxRef("WebAssembly.Memory")}}
+- {{JSxRef("WebAssembly.Table")}}
+- {{JSxRef("WebAssembly.CompileError")}}
+- {{JSxRef("WebAssembly.LinkError")}}
+- {{JSxRef("WebAssembly.RuntimeError")}}
+
+### その他
+
+- {{JSxRef("Functions/arguments", "arguments")}}
diff --git a/files/ja/web/javascript/reference/global_objects/infinity/index.html b/files/ja/web/javascript/reference/global_objects/infinity/index.html
deleted file mode 100644
index bbd61bc49e..0000000000
--- a/files/ja/web/javascript/reference/global_objects/infinity/index.html
+++ /dev/null
@@ -1,68 +0,0 @@
----
-title: Infinity
-slug: Web/JavaScript/Reference/Global_Objects/Infinity
-tags:
-  - JavaScript
-  - Property
-  - Reference
-  - プロパティ
-translation_of: Web/JavaScript/Reference/Global_Objects/Infinity
----
-<div>{{jsSidebar("Objects")}}</div>
-
-<p>グローバルプロパティ <code><strong>Infinity</strong></code> は無限大を表す数値です。</p>
-
-<p>{{js_property_attributes(0,0,0)}}</p>
-
-<div>{{EmbedInteractiveExample("pages/js/globalprops-infinity.html")}}</div>
-
-<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力していただける場合は、<a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>
-
-<h2 id="Description" name="Description">解説</h2>
-
-<p><code>Infinity</code> は<em>グローバルオブジェクト</em>のプロパティです。言い換えればグローバルスコープ内の変数です。</p>
-
-<p><code>Infinity</code> の初期値は {{jsxref("Number.POSITIVE_INFINITY")}} です。<code>Infinity</code> という値 (正の無限大) は他のあらゆる数より大きい数です。</p>
-
-<p>この値は数学的に無限大のように振る舞います。詳しくは {{jsxref("Number.POSITIVE_INFINITY")}} を参照してください。</p>
-
-<p>ECMAScript 5 の仕様では、<code>Infinity</code> は読み取り専用です (JavaScript 1.8.5 / Firefox 4 にて実装)。</p>
-
-<h2 id="Examples" name="Examples">例</h2>
-
-<h3 id="Using_Infinity" name="Using_Infinity">Infinity を使う</h3>
-
-<pre class="brush: js notranslate">console.log(Infinity          ); /* Infinity */
-console.log(Infinity + 1      ); /* Infinity */
-console.log(Math.pow(10, 1000)); /* Infinity */
-console.log(Math.log(0)       ); /* -Infinity */
-console.log(1 / Infinity      ); /* 0 */
-console.log(1 / 0             ); /* Infinity */
-</pre>
-
-<h2 id="Specifications" name="Specifications">仕様</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">仕様書</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-value-properties-of-the-global-object-infinity', 'Infinity')}}</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
-
-<p>{{Compat("javascript.builtins.parseInt")}}</p>
-
-<h2 id="See_also" name="See_also">関連情報</h2>
-
-<ul>
- <li>{{jsxref("Number.NEGATIVE_INFINITY")}}</li>
- <li>{{jsxref("Number.POSITIVE_INFINITY")}}</li>
- <li>{{jsxref("Number.isFinite")}}</li>
-</ul>
diff --git a/files/ja/web/javascript/reference/global_objects/infinity/index.md b/files/ja/web/javascript/reference/global_objects/infinity/index.md
new file mode 100644
index 0000000000..85a48243b1
--- /dev/null
+++ b/files/ja/web/javascript/reference/global_objects/infinity/index.md
@@ -0,0 +1,54 @@
+---
+title: Infinity
+slug: Web/JavaScript/Reference/Global_Objects/Infinity
+tags:
+  - JavaScript
+  - プロパティ
+  - リファレンス
+browser-compat: javascript.builtins.Infinity
+translation_of: Web/JavaScript/Reference/Global_Objects/Infinity
+---
+{{jsSidebar("Objects")}}
+
+グローバルプロパティ **`Infinity`** は無限大を表す数値です。
+
+{{js_property_attributes(0,0,0)}}
+
+{{EmbedInteractiveExample("pages/js/globalprops-infinity.html")}}
+
+## 解説
+
+`Infinity` は*グローバルオブジェクト*のプロパティです。言い換えればグローバルスコープ内の変数です。
+
+`Infinity` の初期値は {{jsxref("Number.POSITIVE_INFINITY")}} です。`Infinity` という値 (正の無限大) は他のあらゆる数より大きい数です。
+
+この値は数学的に無限大のように振る舞います。詳しくは {{jsxref("Number.POSITIVE_INFINITY")}} を参照してください。
+
+ECMAScript 5 の仕様では、`Infinity` は読み取り専用です (JavaScript 1.8.5 / Firefox 4 にて実装)。
+
+## 例
+
+### Infinity の使用
+
+```js
+console.log(Infinity          ); /* Infinity */
+console.log(Infinity + 1      ); /* Infinity */
+console.log(Math.pow(10, 1000)); /* Infinity */
+console.log(Math.log(0)       ); /* -Infinity */
+console.log(1 / Infinity      ); /* 0 */
+console.log(1 / 0             ); /* Infinity */
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- {{jsxref("Number.NEGATIVE_INFINITY")}}
+- {{jsxref("Number.POSITIVE_INFINITY")}}
+- {{jsxref("Number.isFinite")}}
diff --git a/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/datetimeformat/index.html b/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/datetimeformat/index.html
deleted file mode 100644
index 7a98ab57cf..0000000000
--- a/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/datetimeformat/index.html
+++ /dev/null
@@ -1,233 +0,0 @@
----
-title: Intl.DateTimeFormat() コンストラクター
-slug: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat
-tags:
-  - Constructor
-  - DateTimeFormat
-  - Intl
-  - JavaScript
-  - Reference
-  - コンストラクター
-translation_of: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat
----
-<div>{{JSRef}}</div>
-
-<p><span class="seoSummary"><strong><code>Intl.DateTimeFormat()</code></strong> コンストラクターは、言語に応じた日付と時刻の書式化を可能にするオブジェクトのためのものです。</span></p>
-
-<div>{{EmbedInteractiveExample("pages/js/intl-datetimeformat.html")}}</div>
-
-<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力していただける場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>
-
-<h2 id="Syntax" name="Syntax">構文</h2>
-
-<pre class="syntaxbox notranslate">new Intl.DateTimeFormat([<var>locales</var>[, <var>options</var>]])</pre>
-
-<h3 id="Parameters" name="Parameters">引数</h3>
-
-<dl>
- <dt><code><var>locales</var></code> {{optional_inline}}</dt>
- <dd>
- <p>BCP47 言語タグの文字列、または、そのような文字列の配列です。ブラウザーの既定のロケールを使用するには、空の配列を渡してください。。 Unicode 拡張に対応しています (例えば "<code>en-US-u-ca-buddhist</code>" など)。 <code>locales</code> 引数の一般的な形式と解釈は、 {{jsxref("Global_Objects/Intl", "Intl", "#Locale_identification_and_negotiation", 1)}} のページをご覧ください。次の Unicode 拡張キーが利用できます。</p>
-
- <dl>
-  <dt><code>nu</code></dt>
-  <dd>番号方式。使用できる値は次のとおりです。 "<code>arab</code>", "<code>arabext</code>", "<code>bali</code>", "<code>beng</code>", "<code>deva</code>", "<code>fullwide</code>", "<code>gujr</code>", "<code>guru</code>", "<code>hanidec</code>", "<code>khmr</code>", "<code>knda</code>", "<code>laoo</code>", "<code>latn</code>", "<code>limb</code>", "<code>mlym</code>", "<code>mong</code>", "<code>mymr</code>", "<code>orya</code>", "<code>tamldec</code>", "<code>telu</code>", "<code>thai</code>", "<code>tibt</code>"</dd>
-  <dt><code>ca</code></dt>
-  <dd>カレンダー。使用できる値は次のとおりです。 "<code>buddhist</code>", "<code>chinese</code>", "<code>coptic</code>", "<code>ethiopia</code>", "<code>ethiopic</code>", "<code>gregory</code>", "<code>hebrew</code>", "<code>indian</code>", "<code>islamic</code>", "<code>iso8601</code>", "<code>japanese</code>", "<code>persian</code>", "<code>roc</code>"</dd>
-  <dt><code>hc</code></dt>
-  <dd>時制。使用できる値は次の通りです。 "<code>h11</code>", "<code>h12</code>", "<code>h23</code>", "<code>h24</code>".</dd>
- </dl>
- </dd>
- <dt><code><var>options</var></code> {{optional_inline}}</dt>
- <dd>
- <p>以下のプロパティの一部またはすべてを持つオブジェクトです。</p>
-
- <dl>
-  <dt><code>dateStyle</code></dt>
-  <dd><code>format()</code> が呼び出された際に使用される日付の書式化スタイルです。利用可能な値は以下のとおりです。
-  <ul>
-   <li>"<code>full</code>"</li>
-   <li>"<code>long</code>"</li>
-   <li>"<code>medium</code>"</li>
-   <li>"<code>short</code>"</li>
-  </ul>
-
-  <div class="blockIndicator note">
-  <p><code>dateStyle</code> は <code>timeStyle</code> と一緒に使用することができますが、他のオプションと一緒に使用することができません (例えば <code>weekday</code>, <code>hour</code>, <code>month</code>, など)。</p>
-  </div>
-  </dd>
-  <dt><code>timeStyle</code></dt>
-  <dd><code>format()</code> が呼び出された際に使用される時刻の書式化スタイルです。利用可能な値は以下のとおりです。
-  <ul>
-   <li>"<code>full</code>"</li>
-   <li>"<code>long</code>"</li>
-   <li>"<code>medium</code>"</li>
-   <li>"<code>short</code>"</li>
-  </ul>
-  </dd>
-  <dd>
-  <div class="blockIndicator note">
-  <p><code>timeStyle</code> は <code>dateStyle</code> と一緒に使用することができますが、他のオプションと一緒に使用することができません (例えば <code>weekday</code>, <code>hour</code>, <code>month</code>, など)。</p>
-  </div>
-  </dd>
-  <dt><code>calendar</code></dt>
-  <dd>暦です。有効な値は、 "<code>buddhist</code>", "<code>chinese</code>", " <code>coptic</code>", "<code>ethiopia</code>", "<code>ethiopic</code>", "<code>gregory</code>", " <code>hebrew</code>", "<code>indian</code>", "<code>islamic</code>", "<code>iso8601</code>", " <code>japanese</code>", "<code>persian</code>", "<code>roc</code>" です。</dd>
-  <dt><code>dayPeriod</code></dt>
-  <dd>日単位の期間の表現の仕方です。有効な値は、 "<code>narrow</code>", "<code>short</code>", " <code>long</code>" です。</dd>
-  <dt><code>numberingSystem</code></dt>
-  <dd>命数法です。有効な値は、 "<code>arab</code>", "<code>arabext</code>", " <code>bali</code>", "<code>beng</code>", "<code>deva</code>", "<code>fullwide</code>", " <code>gujr</code>", "<code>guru</code>", "<code>hanidec</code>", "<code>khmr</code>", " <code>knda</code>", "<code>laoo</code>", "<code>latn</code>", "<code>limb</code>", "<code>mlym</code>", " <code>mong</code>", "<code>mymr</code>", "<code>orya</code>", "<code>tamldec</code>", " <code>telu</code>", "<code>thai</code>", "<code>tibt</code>" です。</dd>
-  <dt><code>localeMatcher</code></dt>
-  <dd>使用するロケール一致アルゴリズム。利用可能な値は "<code>lookup</code>" と "<code>best fit</code>" です。既定値は "<code>best fit</code>" です。このオプションについての詳細は、 {{jsxref("Global_Objects/Intl", "Intl のページ", "#Locale_negotiation", 1)}}をご覧ください。</dd>
-  <dt><code>timeZone</code></dt>
-  <dd>使用するタイムゾーン。実装が認識しなければならない唯一の値は "<code>UTC</code>" です。既定値は、実行時の既定のタイムゾーンです。実装は、 <a href="https://www.iana.org/time-zones">IANA タイムゾーンデータベース</a>のタイムゾーン名、例えば "<code>Asia/Shanghai</code>", "<code>Asia/Kolkata</code>", "<code>America/New_York</code>" なども認識できる場合があります。</dd>
-  <dt><code>hour12</code></dt>
-  <dd>12時制を使用するかどうか (24時制に対して)。可能な値は <code>true</code> と <code>false</code> です。既定ではロケールに依存します。このオプションは <code>hc</code> 言語タグや <code>hourCycle</code> オプションと一緒に使用された場合、これらを上書きします。</dd>
-  <dt><code>hourCycle</code></dt>
-  <dd>使用する時の周期です。利用可能な値は "<code>h11</code>", "<code>h12</code>", "<code>h23</code>", "<code>h24</code>" です。このオプションは <code>hc</code> 言語タグと一緒に使用された場合はそれを上書きし、両方のオプションが指定されていた場合は <code>hour12</code> オプションが優先されます。</dd>
-  <dt><code>formatMatcher</code></dt>
-  <dd>使用する書式一致アルゴリズム。可能な値は "<code>basic</code>" と "<code>best fit</code>" です。既定値は "<code>best fit</code>" です。このプロパティの使用方法については、以下の項を参照してください。</dd>
- </dl>
-
- <p>以下のプロパティは、書式化の出力や、要求された表現で使用する日付や時刻のコンポーネントです。実装は、少なくとも以下のサブセットに対応することが要求されています。</p>
-
- <ul>
-  <li><code>weekday</code>, <code>year</code>, <code>month</code>, <code>day</code>, <code>hour</code>, <code>minute</code>, <code>second</code></li>
-  <li><code>weekday</code>, <code>year</code>, <code>month</code>, <code>day</code></li>
-  <li><code>year</code>, <code>month</code>, <code>day</code></li>
-  <li><code>year</code>, <code>month</code></li>
-  <li><code>month</code>, <code>day</code></li>
-  <li><code>hour</code>, <code>minute</code>, <code>second</code></li>
-  <li><code>hour</code>, <code>minute</code></li>
- </ul>
-
- <p>実装は他のサブセットに対応することもでき、要求はすべての利用可能な表現の中から最適なものを見つけるために交渉します。 <code>formatMatcher</code> プロパティによるこの交渉や選択には2つのアルゴリズムが利用できます。<a href="http://www.ecma-international.org/ecma-402/1.0/#BasicFormatMatcher">完全に定義された "<code>basic</code>" アルゴリズム</a>と、実装に依存した"<code>best fit</code>" アルゴリズムです。</p>
-
- <dl>
-  <dt><code>weekday</code></dt>
-  <dd>曜日の表現です。利用可能な値は以下の通りです。
-  <ul>
-   <li>"<code>long</code>" (例 <code>Thursday</code>)</li>
-   <li>"<code>short</code>" (例 <code>Thu</code>)</li>
-   <li>"<code>narrow</code>" (例 <code>T</code>)。ロケールによっては、 narrow 形式が同じ曜日が2つある場合もあります (例 <code>Tuesday</code> の narrow 形式も <code>T</code> です)。</li>
-  </ul>
-  </dd>
-  <dt><code>era</code></dt>
-  <dd>時代の表現です。利用可能な値は以下の通りです。
-  <ul>
-   <li>"<code>long</code>" (例 <code>Anno Domini</code>, 紀元)</li>
-   <li>"<code>short</code>" (例 <code>AD</code>)</li>
-   <li>"<code>narrow</code>" (例 <code>A</code>)</li>
-  </ul>
-  </dd>
-  <dt><code>year</code></dt>
-  <dd>年の表現です。利用可能な値は以下の通りです。
-  <ul>
-   <li>"<code>numeric</code>" (例 <code>2012</code>)</li>
-   <li>"<code>2-digit</code>" (例 <code>12</code>)</li>
-  </ul>
-  </dd>
-  <dt><code>month</code></dt>
-  <dd>月の表現です。利用可能な値は以下の通りです。
-  <ul>
-   <li>"<code>numeric</code>" (例 <code>2</code>)</li>
-   <li>"<code>2-digit</code>" (例 <code>02</code>)</li>
-   <li>"<code>long</code>" (例 <code>March</code>)</li>
-   <li>"<code>short</code>" (例 <code>Mar</code>)</li>
-   <li>"<code>narrow</code>" (例 <code>M</code>)。ロケールによっては、 narrow 形式が同じ月が2つある場合もあります (例 <code>May</code> の narrow 形式も <code>M</code> です)。</li>
-  </ul>
-  </dd>
-  <dt><code>day</code></dt>
-  <dd>日の表現です。利用可能な値は以下の通りです。
-  <ul>
-   <li>"<code>numeric</code>" (例 <code>1</code>)</li>
-   <li>"<code>2-digit</code>" (例 <code>01</code>)</li>
-  </ul>
-  </dd>
-  <dt><code>hour</code></dt>
-  <dd>時の表現です。利用可能な値は "<code>numeric</code>", "<code>2-digit</code>" です。</dd>
-  <dt><code>minute</code></dt>
-  <dd>分の表現です。利用可能な値は "<code>numeric</code>", "<code>2-digit</code>" です。</dd>
-  <dt><code>second</code></dt>
-  <dd>秒の表現です。利用可能な値は "<code>numeric</code>", "<code>2-digit</code>" です。</dd>
-  <dt><code>fractionalSecondDigits</code></dt>
-  <dd>
-  <div class="blockIndicator note">
-  <p class="noinclude">Firefox 84, Chrome 84, などで追加されました。詳しくは互換性一覧表を参照してください。</p>
-  </div>
-  秒の小数点以下を表すために使用される数字の桁数 (その先の桁は切り捨てられます)。利用可能な値は次の通りです。
-
-  <ul>
-   <li><code>0</code> (小数点以下は切り捨て)</li>
-   <li><code>1</code> (小数点以下は1桁で表される。例えば、 736 は <code>7</code> と書式化される。)</li>
-   <li><code>2</code> (小数点以下は2桁で表される。例えば、 736 は <code>73</code> と書式化される。)</li>
-   <li><code>3</code> (小数点以下は2桁で表される。例えば、 736 は <code>736</code> と書式化される。)</li>
-  </ul>
-  </dd>
-  <dt><code>timeZoneName</code></dt>
-  <dd>タイムゾーン名の表現です。利用可能な値は以下の通りです。
-  <ul>
-   <li>"<code>long</code>" (例 <code>British Summer Time</code>)</li>
-   <li>"<code>short</code>" (例 <code>GMT+1</code>)</li>
-  </ul>
-  </dd>
- </dl>
-
- <p class="noinclude">日付・時間コンポーネントプロパティの既定値は {{jsxref("undefined")}} ですが、すべてのコンポーネントプロパティが {{jsxref("undefined")}} であった場合、 <code>year</code>, <code>month</code>, <code>day</code> は "<code>numeric</code>" であると仮定されます。</p>
- </dd>
-</dl>
-
-<h2 id="Examples" name="Examples">例</h2>
-
-<h3 id="Using_DateTimeFormat" name="Using_DateTimeFormat">DateTimeFormat の使用</h3>
-
-<p>ロケールを指定しない基本的な使用方法では、 <code>DateTimeFormat</code> は既定のロケールとオプションを使用します。</p>
-
-<pre class="brush: js notranslate">var date = new Date(Date.UTC(2012, 11, 20, 3, 0, 0));
-
-// toLocaleString without arguments depends on the implementation,
-// the default locale, and the default time zone
-console.log(new Intl.DateTimeFormat().format(date));
-// → "12/19/2012" if run with en-US locale (language) and time zone America/Los_Angeles (UTC-0800)</pre>
-
-<h3 id="Using_timeStyle_and_dateStyle" name="Using_timeStyle_and_dateStyle">timeStyle と dateStyle の使用</h3>
-
-<pre class="brush: js notranslate">let o = new Intl.DateTimeFormat("en" , {
-  timeStyle: "short"
-});
-console.log(o.format(Date.now())); // "13:31 AM"
-
-let o = new Intl.DateTimeFormat("en" , {
-  dateStyle: "short"
-});
-console.log(o.format(Date.now())); // "07/07/20"
-
-let o = new Intl.DateTimeFormat("en" , {
-  timeStyle: "medium",
-  dateStyle: "short"
-});
-console.log(o.format(Date.now())); // "07/07/20, 13:31:55 AM"</pre>
-
-<h2 id="Specifications" name="Specifications">仕様書</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">仕様書</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('ES Int Draft', '#sec-intl-datetimeformat-constructor', 'Intl.DateTimeFormat')}}</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
-
-<p>{{Compat("javascript.builtins.Intl.DateTimeFormat.DateTimeFormat")}}</p>
-
-<h2 id="See_also" name="See_also">関連情報</h2>
-
-<ul>
- <li><code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Intl">Intl</a></code></li>
-</ul>
diff --git a/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/datetimeformat/index.md b/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/datetimeformat/index.md
new file mode 100644
index 0000000000..9dd69a4d94
--- /dev/null
+++ b/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/datetimeformat/index.md
@@ -0,0 +1,261 @@
+---
+title: Intl.DateTimeFormat() コンストラクター
+slug: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat
+tags:
+  - Constructor
+  - DateTimeFormat
+  - Internationalization
+  - Intl
+  - JavaScript
+  - Localization
+  - Reference
+browser-compat: javascript.builtins.Intl.DateTimeFormat.DateTimeFormat
+translation_of: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat
+---
+{{JSRef}}
+
+**`Intl.DateTimeFormat()`** コンストラクターは、言語に応じた日付と時刻の書式化を可能にする
+{{jsxref("Intl/DateTimeFormat", "Intl.DateTimeFormat")}} オブジェクトを生成します。
+
+{{EmbedInteractiveExample("pages/js/intl-datetimeformat.html", "taller")}}
+
+
+## 構文
+
+```js
+new Intl.DateTimeFormat()
+new Intl.DateTimeFormat(locales)
+new Intl.DateTimeFormat(locales, options)
+```
+
+### 引数
+
+- `locales` {{optional_inline}}
+  - : BCP 47 言語タグの文字列、または、そのような文字列の配列です。ブラウザーの既定のロケールを使用するには、空の配列を渡してください。。 Unicode 拡張に対応しています (例えば "`en-US-u-ca-buddhist`" など)。 `locales` 引数の一般的な形式と解釈は、 {{jsxref("Global_Objects/Intl", "Intl", "#Locale_identification_and_negotiation", 1)}} のページをご覧ください。次の Unicode 拡張キーが利用できます。
+
+    - `nu`
+      - : 番号方式。使用できる値は "`arab`", "`arabext`", "`bali`", "`beng`", "`deva`", "`fullwide`", "`gujr`", "`guru`", "`hanidec`", "`khmr`", "`knda`", "`laoo`", "`latn`", "`limb`", "`mlym`", "`mong`", "`mymr`", "`orya`", "`tamldec`", "`telu`", "`thai`", "`tibt`" です。
+    - `ca`
+      - : カレンダー。使用できる値は "`buddhist`", "`chinese`", "`coptic`", "`ethiopia`", "`ethiopic`", "`gregory`", "`hebrew`", "`indian`", "`islamic`", "`iso8601`", "`japanese`", "`persian`", "`roc`" です。
+    - `hc`
+      - : 時制。使用できる値は "`h11`", "`h12`", "`h23`", "`h24`" です。
+
+- `options` {{optional_inline}}
+
+  - : 以下のプロパティの一部またはすべてを持つオブジェクトです。
+
+    - `dateStyle`
+
+      - : `format()` が呼び出された際に使用される日付の書式化スタイルです。利用可能な値は以下のとおりです。
+        - "`full`"
+        - "`long`"
+        - "`medium`"
+        - "`short`"
+
+        > **Note:** `dateStyle` は `timeStyle` と一緒に使用することができますが、他のオプション (`weekday`, `hour`, `month`, など) と一緒に使用することはできません。
+
+    - `timeStyle`
+      - : `format()` が呼び出された際に使用される時刻の書式化スタイルです。利用可能な値は以下のとおりです。
+
+        - "`full`"
+        - "`long`"
+        - "`medium`"
+        - "`short`"
+
+        > **Note:** `timeStyle` は `dateStyle` と一緒に使用することができますが、他のオプション (`weekday`, `hour`, `month`, など) と一緒に使用することはできません。
+    - `calendar`
+      - : 暦です。有効な値は、 "`buddhist`", "`chinese`", " `coptic`", "`ethiopia`", "`ethiopic`", "`gregory`", " `hebrew`", "`indian`", "`islamic`", "`iso8601`", " `japanese`", "`persian`", "`roc`" です。
+    - `dayPeriod`
+
+      - : 日単位の期間の表現の仕方です。有効な値は、 "`narrow`", "`short`", " `long`" です。
+
+        > **Note:**
+        >
+        > - このオプションは12時間制を使用したときのみ効果があります。
+        > - 多くのロケールでは幅の指定を無視して同じ文字列を使用します。
+
+    - `numberingSystem`
+      - : 命数法です。有効な値は、 "`arab`", "`arabext`", " `bali`", "`beng`", "`deva`", "`fullwide`", " `gujr`", "`guru`", "`hanidec`", "`khmr`", " `knda`", "`laoo`", "`latn`", "`limb`", "`mlym`", " `mong`", "`mymr`", "`orya`", "`tamldec`", " `telu`", "`thai`", "`tibt`" です。
+    - `localeMatcher`
+      - : 使用するロケール一致アルゴリズム。利用可能な値は "`lookup`" と "`best fit`" です。既定値は "`best fit`" です。このオプションについての詳細は、 {{jsxref("Global_Objects/Intl", "Intl", "#Locale_negotiation", 1)}} のページをご覧ください。
+    - `timeZone`
+      - : 使用するタイムゾーン。実装が認識しなければならない唯一の値は "`UTC`" です。既定値は、実行時の既定のタイムゾーンです。実装は、 [IANA タイムゾーンデータベース](https://www.iana.org/time-zones)のタイムゾーン名、例えば "`Asia/Shanghai`", "`Asia/Kolkata`", "`America/New_York`" なども認識できる場合があります。
+    - `hour12`
+      - : (24 時制に対して) 12 時制を使用するかどうか。可能な値は `true` と `false` です。既定ではロケールに依存します。このオプションは `hc` 言語タグや `hourCycle` オプションと一緒に使用された場合、これらを上書きします。
+    - `hourCycle`
+      - : 使用する時の周期です。利用可能な値は "`h11`", "`h12`", "`h23`", "`h24`" です。このオプションは `hc` 言語タグと一緒に使用された場合はそれを上書きし、両方のオプションが指定されていた場合は `hour12` オプションが優先されます。
+    - `formatMatcher`
+      - : 使用する書式一致アルゴリズム。可能な値は "`basic`" と "`best fit`" です。既定値は "`best fit`" です。このプロパティの使用方法については、以下の項を参照してください。
+
+    以下のプロパティは、書式化の出力や、要求された表現で使用する日付や時刻のコンポーネントです。実装は、少なくとも以下のサブセットに対応することが要求されています。
+
+    - `weekday`, `year`, `month`, `day`, `hour`, `minute`, `second`
+    - `weekday`, `year`, `month`, `day`
+    - `year`, `month`, `day`
+    - `year`, `month`
+    - `month`, `day`
+    - `hour`, `minute`, `second`
+    - `hour`, `minute`
+
+    実装は他のサブセットに対応することもでき、要求はすべての利用可能な表現の中から最適なものを見つけるために交渉します。 `formatMatcher` プロパティによるこの交渉や選択には2つのアルゴリズムが利用できます。[完全に定義された "`basic`" アルゴリズム](https://www.ecma-international.org/ecma-402/1.0/#BasicFormatMatcher)と、実装に依存した "`best fit`" アルゴリズムです。
+
+    - `weekday`
+
+      - : 曜日の表現です。利用可能な値は以下の通りです。
+        - "`long`" (例 `Thursday`)
+        - "`short`" (例 `Thu`)
+        - "`narrow`" (例 `T`)。ロケールによっては、 narrow 形式が同じ曜日が2つある場合もあります (例 `Tuesday` の narrow 形式も `T` です)。
+
+    - `era`
+
+      - : 時代の表現です。利用可能な値は以下の通りです。
+
+        - "`long`" (例 `Anno Domini`, 紀元)
+        - "`short`" (例 `AD`)
+        - "`narrow`" (例 `A`)
+
+    - `year`
+
+      - : 年の表現です。利用可能な値は以下の通りです。
+
+        - "`numeric`" (例 `2012`)
+        - "`2-digit`" (例 `12`)
+
+    - `month`
+
+      - : 月の表現です。利用可能な値は以下の通りです。
+        - "`numeric`" (例 `2`)
+        - "`2-digit`" (例 `02`)
+        - "`long`" (例 `March`)
+        - "`short`" (例 `Mar`)
+        - "`narrow`" (例 `M`)。ロケールによっては、 narrow 形式が同じ月が2つある場合もあります (例 `May` の narrow 形式も `M` です)。
+
+    - `day`
+
+      - : 日の表現です。利用可能な値は以下の通りです。
+
+        - "`numeric`" (例 `1`)
+        - "`2-digit`" (例 `01`)
+
+    - `hour`
+      - : 時の表現です。利用可能な値は "`numeric`", "`2-digit`" です。
+    - `minute`
+      - : 分の表現です。利用可能な値は "`numeric`", "`2-digit`" です。
+    - `second`
+      - : 秒の表現です。利用可能な値は "`numeric`", "`2-digit`" です。
+    - `fractionalSecondDigits`
+      - : 秒の小数点以下を表すために使用される数字の桁数 (その先の桁は切り捨てられます)。利用可能な値は次の通りです。
+
+        - `0` (小数点以下は切り捨て)
+        - `1` (小数点以下は1桁で表される。例えば、 736 は `7` と書式化される。)
+        - `2` (小数点以下は2桁で表される。例えば、 736 は `73` と書式化される。)
+        - `3` (小数点以下は2桁で表される。例えば、 736 は `736` と書式化される。)
+
+    - `timeZoneName`
+
+      - : タイムゾーン名の表現です。利用可能な値は以下の通りです。
+
+        - "`long`" ローカライズされた長い形式 (例 `Pacific Standard Time`, `Nordamerikanische Westküsten-Normalzeit`)
+        - "`short`" ローカライズされた短い形式 (例 `PST`, `GMT-8`)
+        - "`shortOffset`" ローカライズされた短い GMT 形式 (例 `GMT-8`)
+        - "`longOffset`" ローカライズされた長い GMT 形式 (例 `GMT-0800`)
+        - "`shortGeneric`" 一般的な場所を指定しない短い形式 (例 `PT`, `Los Angeles Zeit`).
+        - "`longGeneric`" 一般的な場所を指定しない長い形式 (例 `Pacific Time`, `Nordamerikanische Westküstenzeit`)
+
+        > **Note:** タイムゾーンの表示は、必要な文字列が利用できない場合、別の形式にフォールバックすることがあります。例えば、場所を指定しない形式では、 "Pacific Time" のように特定の国や都市の場所を指定せずにタイムゾーンを表示する必要がありますが、 "Los Angeles Time" のようなタイムゾーンにフォールバックする場合があります。
+
+    それぞれの日付や時刻の部分のプロパティの既定値は {{jsxref("undefined")}} ですが、すべての部分のプロパティが {{jsxref("undefined")}} であった場合、 `year`, `month`, `day` は "`numeric`" であると想定されます。
+
+## 例
+
+### DateTimeFormat の使用
+
+ロケールを指定しない基本的な使用方法では、 `DateTimeFormat` は既定のロケールとオプションを使用します。
+
+```js
+let date = new Date(Date.UTC(2012, 11, 20, 3, 0, 0));
+
+// toLocaleString without arguments depends on the implementation,
+// the default locale, and the default time zone
+console.log(new Intl.DateTimeFormat().format(date));
+// → "12/19/2012" if run with en-US locale (language) and time zone America/Los_Angeles (UTC-0800)
+```
+
+### timeStyle と dateStyle の使用
+
+```js
+let o = new Intl.DateTimeFormat("en" , {
+  timeStyle: "short"
+});
+console.log(o.format(Date.now())); // "13:31 AM"
+
+let o = new Intl.DateTimeFormat("en" , {
+  dateStyle: "short"
+});
+console.log(o.format(Date.now())); // "07/07/20"
+
+let o = new Intl.DateTimeFormat("en" , {
+  timeStyle: "medium",
+  dateStyle: "short"
+});
+console.log(o.format(Date.now())); // "07/07/20, 13:31:55 AM"
+```
+
+### dayPeriod の使用
+
+`dayPeriod` オプションを使用して、1日の時間帯 (「朝」、「夜」、「正午」など) を表す文字列を出力します。なお、これは 12 時間制の書式でのみ有効であり、 (`hourCycle: 'h12'`)、多くのロケールでは `dayPeriod` の値に関係なく同じ文字列が出力されます。
+
+```js
+let date = Date.UTC(2012, 11, 17, 4, 0, 42);
+
+console.log(new Intl.DateTimeFormat('en-GB', { hour: 'numeric', hourCycle: 'h12', 
+dayPeriod: 'short', timeZone: 'UTC' }).format(date));
+// > 4 at night"  (same formatting in en-GB for all dayPeriod values)
+
+console.log(new Intl.DateTimeFormat('fr', { hour: 'numeric', hourCycle: 'h12',
+    dayPeriod: 'narrow', timeZone: 'UTC' }).format(date));
+// > "4 mat."  (same output in French for both narrow/short dayPeriod)
+
+console.log(new Intl.DateTimeFormat('fr', { hour: 'numeric', hourCycle: 'h12', 
+    dayPeriod: 'long', timeZone: 'UTC' }).format(date));
+// > "4 du matin"
+```
+
+### timeZoneName の使用
+
+`timeZoneName` を使用して、タイムゾーンの文字列 ("GMT", "Pacific Time", など) を出力します。
+
+```js
+var date = Date.UTC(2021, 11, 17, 3, 0, 42);
+const timezoneNames = ['short', 'long', 'shortOffset', 'longOffset', 'shortGeneric', 'longGeneric']
+	
+for (const zoneName of timezoneNames) {
+  // Do something with currentValue
+  var formatter = new Intl.DateTimeFormat('en-US', {
+    timeZone: 'America/Los_Angeles',
+    timeZoneName: zoneName,
+  });
+  console.log(zoneName + ": " + formatter.format(date) );
+}
+	
+// expected output: 
+// > "short: 12/16/2021, PST"
+// > "long: 12/16/2021, Pacific Standard Time"
+// > "shortOffset: 12/16/2021, GMT-8"
+// > "longOffset: 12/16/2021, GMT-08:00"
+// > "shortGeneric: 12/16/2021, PT"
+// > "longGeneric: 12/16/2021, Pacific Time"
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- {{jsxref("Intl.DateTimeFormat")}}
+- {{jsxref("Global_Objects/Intl", "Intl")}}
diff --git a/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/format/index.html b/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/format/index.html
deleted file mode 100644
index a7606b00f0..0000000000
--- a/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/format/index.html
+++ /dev/null
@@ -1,111 +0,0 @@
----
-title: Intl.DateTimeFormat.prototype.format()
-slug: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/format
-tags:
-  - DateTimeFormat
-  - Internationalization
-  - Intl
-  - JavaScript
-  - Method
-  - Prototype
-translation_of: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/format
----
-<div>{{JSRef}}</div>
-
-<p><strong><code>Intl.NumberFormat.prototype.format()</code></strong> メソッドは、この {{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}} オブジェクトのロケールと整形オプションに従って日付や時刻を整形します。</p>
-
-<div>{{EmbedInteractiveExample("pages/js/intl-datetimeformat-prototype-format.html", "taller")}}</div>
-
-<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>
-
-<h2 id="Syntax" name="Syntax">構文</h2>
-
-<pre class="syntaxbox notranslate"><var>dateTimeFormat</var>.format(<var>date</var>)</pre>
-
-<h3 id="Parameters" name="Parameters">引数</h3>
-
-<dl>
- <dt><code><var>date</var></code></dt>
- <dd>整形する日付や時刻です。</dd>
-</dl>
-
-<h2 id="Description" name="Description">解説</h2>
-
-<p><code>format</code> ゲッター関数は、この {{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}} オブジェクトのロケールと整形オプションに従って日付や時刻を整形し、文字列に格納します。</p>
-
-<h2 id="Examples" name="Examples">例</h2>
-
-<h3 id="Using_format" name="Using_format">format の使用</h3>
-
-<p><code>format</code> ゲッター関数を使用して単一の日付値を整形します。こちらはセルビアの例です。</p>
-
-<pre class="brush: js notranslate">var options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
-var dateTimeFormat = new Intl.DateTimeFormat('sr-RS', options);
-console.log(dateTimeFormat.format(new Date()));
-// → "недеља, 7. април 2013."
-</pre>
-
-<h3 id="Using_format_with_map" name="Using_format_with_map">format と map の使用</h3>
-
-<p><code>format</code> ゲッター関数を使用して、配列内のすべての日付を整形することができます。なお、この関数は供給元である {{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}} に結び付けられているので、直接 {{jsxref("Array.prototype.map()")}} に渡すことができます。</p>
-
-<pre class="brush: js notranslate">var a = [new Date(2012, 08), new Date(2012, 11), new Date(2012, 03)];
-var options = { year: 'numeric', month: 'long' };
-var dateTimeFormat = new Intl.DateTimeFormat('pt-BR', options);
-var formatted = a.map(dateTimeFormat.format);
-console.log(formatted.join('; '));
-// → "setembro de 2012; dezembro de 2012; abril de 2012"
-</pre>
-
-<h3 id="書式化された日付値を固定値と比較することは避ける">書式化された日付値を固定値と比較することは避ける</h3>
-
-<p>ほとんどの場合、 <code>format()</code> が返す書式は一貫しています。しかし、これは将来的に変更される可能性があり、すべての言語で保証されているわけではありません — 出力のバリエーションは設計上のものであり、仕様上は許容されています。最も注目すべきは、 IE や Edge ブラウザは日付の周りに双方向の制御文字を挿入するため、他のテキストと連結したときに出力テキストが適切に流れることです。</p>
-
-<p>このことから、 <code>format()</code> の結果と固定値を比較することができると期待してはいけません。</p>
-
-<pre class="brush: js; example-bad notranslate">let d = new Date("2019-01-01T00:00:00.000000Z");
-let formattedDate = Intl.DateTimeFormat(undefined, {
-  year: 'numeric',
-  month: 'numeric',
-  day: 'numeric',
-  hour: 'numeric',
-  minute: 'numeric',
-  second: 'numeric'
-}).format(d);
-
-"1.1.2019, 01:00:00" === formattedDate;
-// true in Firefox and others
-// false in IE and Edge
-</pre>
-
-<div class="blockIndicator note">
-<p><strong>注</strong>: この <a href="https://stackoverflow.com/questions/25574963/ies-tolocalestring-has-strange-characters-in-results">StackOverflow のスレッド</a>に詳細や例があります。</p>
-</div>
-
-<h2 id="Specifications" name="Specifications">仕様書</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">仕様書</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('ES Int Draft', '#sec-intl.datetimeformat.prototype.format', 'Intl.DateTimeFormat.format')}}</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
-
-<p>{{Compat("javascript.builtins.Intl.DateTimeFormat.format")}}</p>
-
-<h2 id="See_also" name="See_also">関連情報</h2>
-
-<ul>
- <li>{{jsxref("Global_Objects/DateTimeFormat", "Intl.DateTimeFormat")}}</li>
- <li>{{jsxref("Date.prototype.toLocaleString()")}}</li>
- <li>{{jsxref("Date.prototype.toLocaleDateString()")}}</li>
- <li>{{jsxref("Date.prototype.toLocaleTimeString()")}}</li>
-</ul>
diff --git a/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/format/index.md b/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/format/index.md
new file mode 100644
index 0000000000..2cd8c9fae8
--- /dev/null
+++ b/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/format/index.md
@@ -0,0 +1,101 @@
+---
+title: Intl.DateTimeFormat.prototype.format()
+slug: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/format
+tags:
+  - DateTimeFormat
+  - Internationalization
+  - Intl
+  - JavaScript
+  - Localization
+  - Method
+  - Prototype
+  - Reference
+browser-compat: javascript.builtins.Intl.DateTimeFormat.format
+translation_of: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/format
+---
+{{JSRef}}
+
+The **`Intl.DateTimeFormat.prototype.format()`** メソッドは、この {{jsxref("Intl.DateTimeFormat")}} オブジェクトのロケールと整形オプションに従って日付や時刻を整形します。
+
+{{EmbedInteractiveExample("pages/js/intl-datetimeformat-prototype-format.html", "taller")}}
+
+
+## 構文
+
+```js
+format(date)
+```
+
+### 引数
+
+- `date`
+  - : 整形する日付です。
+
+## 解説
+
+`format` ゲッター関数は、この {{jsxref("Intl/DateTimeFormat", "Intl.DateTimeFormat")}} オブジェクトのロケールと整形オプションに従って日付や時刻を整形し、文字列に格納します。
+
+## 例
+
+### format の使用
+
+`format` ゲッター関数を使用して単一の日付値を整形します。こちらはセルビアの例です。
+
+```js
+var options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
+var dateTimeFormat = new Intl.DateTimeFormat('sr-RS', options);
+console.log(dateTimeFormat.format(new Date()));
+// → "недеља, 7. април 2013."
+```
+
+### format と map の使用
+
+`format` ゲッター関数を使用して、配列内のすべての日付を整形することができます。なお、この関数は供給元である {{jsxref("Intl/DateTimeFormat", "Intl.DateTimeFormat")}} に結び付けられているので、直接 {{jsxref("Array.prototype.map()")}} に渡すことができます。
+
+```js
+var a = [new Date(2012, 08), new Date(2012, 11), new Date(2012, 03)];
+var options = { year: 'numeric', month: 'long' };
+var dateTimeFormat = new Intl.DateTimeFormat('pt-BR', options);
+var formatted = a.map(dateTimeFormat.format);
+console.log(formatted.join('; '));
+// → "setembro de 2012; dezembro de 2012; abril de 2012"
+```
+
+### 書式化された日付値を固定値と比較することは避ける
+
+ほとんどの場合、 `format()` が返す書式は一貫しています。しかし、これは将来的に変更される可能性があり、すべての言語で保証されているわけではありません — 出力のバリエーションは設計上のものであり、仕様上は許容されています。最も注目すべきは、 IE や Edge ブラウザは日付の周りに双方向の制御文字を挿入するため、他のテキストと連結したときに出力テキストが適切に流れることです。
+
+このことから、 `format()` の結果と固定値を比較することができると期待してはいけません。
+
+```js example-bad
+let d = new Date("2019-01-01T00:00:00.000000Z");
+let formattedDate = Intl.DateTimeFormat(undefined, {
+  year: 'numeric',
+  month: 'numeric',
+  day: 'numeric',
+  hour: 'numeric',
+  minute: 'numeric',
+  second: 'numeric'
+}).format(d);
+
+"1.1.2019, 01:00:00" === formattedDate;
+// true in Firefox and others
+// false in IE and Edge
+```
+
+> **Note:** この [StackOverflow のスレッド](https://stackoverflow.com/questions/25574963/ies-tolocalestring-has-strange-characters-in-results)に詳細や例があります。
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- {{jsxref("Intl.DateTimeFormat")}}
+- {{jsxref("Date.prototype.toLocaleString()")}}
+- {{jsxref("Date.prototype.toLocaleDateString()")}}
+- {{jsxref("Date.prototype.toLocaleTimeString()")}}
diff --git a/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/formatrange/index.html b/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/formatrange/index.html
deleted file mode 100644
index 1722354d9e..0000000000
--- a/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/formatrange/index.html
+++ /dev/null
@@ -1,88 +0,0 @@
----
-title: Intl.DateTimeFormat.prototype.formatRange()
-slug: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/formatRange
-tags:
-  - JavaScript
-  - Method
-  - Reference
-  - メソッド
-translation_of: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/formatRange
----
-<div>{{JSRef}}</div>
-
-<p><strong><code>Intl.DateTimeFormat.prototype.formatRange()</code></strong> は、日付の範囲をもっとも簡明な方法で、 {{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}} オブジェクトがインスタンス化されたときに提供された <strong><code>locale</code></strong> と <strong><code>options</code></strong> に基づいて書式化します。</p>
-
-<div>{{EmbedInteractiveExample("pages/js/intl-datetimeformat-prototype-formatrange.html", "taller")}}</div>
-
-<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力していただける場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>
-
-<h2 id="Syntax" name="Syntax">構文</h2>
-
-<pre class="notranslate"><code>Intl.DateTimeFormat.prototype.formatRange(<var>startDate, endDate</var>)</code></pre>
-
-<h2 id="Examples" name="Examples">例</h2>
-
-<h3 id="Basic_formatRange_usage" name="Basic_formatRange_usage">基本的な formatRange の使用</h3>
-
-<p>このメソッドは2つの {{jsxref("Date")}} を受け取り、 {{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}} オブジェクトがインスタンス化されたときに提供された <code>locale</code> と <code>options</code> に基づいて日付の範囲を書式化します。</p>
-
-<pre class="brush: js notranslate">let date1 = new Date(Date.UTC(2007, 0, 10, 10, 0, 0));
-let date2 = new Date(Date.UTC(2007, 0, 10, 11, 0, 0));
-let date3 = new Date(Date.UTC(2007, 0, 20, 10, 0, 0));
-// &gt; 'Wed, 10 Jan 2007 10:00:00 GMT'
-// &gt; 'Wed, 10 Jan 2007 11:00:00 GMT'
-// &gt; 'Sat, 20 Jan 2007 10:00:00 GMT'
-
-let fmt1 = new Intl.DateTimeFormat("en", {
-    year: '2-digit',
-    month: 'numeric',
-    day: 'numeric',
-    hour: 'numeric',
-    minute: 'numeric'
-});
-console.log(fmt1.format(date1));
-console.log(fmt1.formatRange(date1, date2));
-console.log(fmt1.formatRange(date1, date3));
-// &gt; '1/10/07, 10:00 AM'
-// &gt; '1/10/07, 10:00 – 11:00 AM'
-// &gt; '1/10/07, 10:00 AM – 1/20/07, 10:00 AM'
-
-let fmt2 = new Intl.DateTimeFormat("en", {
-    year: 'numeric',
-    month: 'short',
-    day: 'numeric'
-});
-console.log(fmt2.format(date1));
-console.log(fmt2.formatRange(date1, date2));
-console.log(fmt2.formatRange(date1, date3));
-// &gt; 'Jan 10, 2007'
-// &gt; 'Jan 10, 2007'
-// &gt; 'Jan 10 – 20, 2007'
-</pre>
-
-<h2 id="Specifications" name="Specifications">仕様書</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">仕様書</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('Intl.DateTimeFormat.formatRange', '#sec-intl.datetimeformat.prototype.formatRange', 'formatRange()')}}</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
-
-<div>
-<p>{{Compat("javascript.builtins.Intl.DateTimeFormat.formatRange")}}</p>
-</div>
-
-<h2 id="See_also" name="See_also">関連情報</h2>
-
-<ul>
- <li>{{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}}</li>
-</ul>
diff --git a/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/formatrange/index.md b/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/formatrange/index.md
new file mode 100644
index 0000000000..0c14478615
--- /dev/null
+++ b/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/formatrange/index.md
@@ -0,0 +1,81 @@
+---
+title: Intl.DateTimeFormat.prototype.formatRange()
+slug: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/formatRange
+tags:
+  - DateTimeFormat
+  - Internationalization
+  - Intl
+  - JavaScript
+  - Localization
+  - Method
+  - Prototype
+  - Reference
+browser-compat: javascript.builtins.Intl.DateTimeFormat.formatRange
+translation_of: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/formatRange
+---
+{{JSRef}}
+
+**`Intl.DateTimeFormat.prototype.formatRange()`** は、 {{jsxref("Intl.DateTimeFormat")}} オブジェクトがインスタンス化されたときに提供された **`locale`** と **`options`** に基づいて、もっとも簡明な方法で日付の範囲を書式化します。
+
+{{EmbedInteractiveExample("pages/js/intl-datetimeformat-prototype-formatrange.html",
+  "taller")}}
+
+
+## 構文
+
+```js
+formatRange(startDate, endDate)
+```
+
+## 例
+
+### 基本的な formatRange の使用
+
+このメソッドは 2 つの {{jsxref("Date")}} を受け取り、 {{jsxref("Intl/DateTimeFormat", "Intl.DateTimeFormat")}} オブジェクトがインスタンス化されたときに提供された `locale` と `options` に基づいて日付の範囲を書式化します。
+
+```js
+let date1 = new Date(Date.UTC(2007, 0, 10, 10, 0, 0));
+let date2 = new Date(Date.UTC(2007, 0, 10, 11, 0, 0));
+let date3 = new Date(Date.UTC(2007, 0, 20, 10, 0, 0));
+// > 'Wed, 10 Jan 2007 10:00:00 GMT'
+// > 'Wed, 10 Jan 2007 11:00:00 GMT'
+// > 'Sat, 20 Jan 2007 10:00:00 GMT'
+
+let fmt1 = new Intl.DateTimeFormat("en", {
+    year: '2-digit',
+    month: 'numeric',
+    day: 'numeric',
+    hour: 'numeric',
+    minute: 'numeric'
+});
+console.log(fmt1.format(date1));
+console.log(fmt1.formatRange(date1, date2));
+console.log(fmt1.formatRange(date1, date3));
+// > '1/10/07, 10:00 AM'
+// > '1/10/07, 10:00 – 11:00 AM'
+// > '1/10/07, 10:00 AM – 1/20/07, 10:00 AM'
+
+let fmt2 = new Intl.DateTimeFormat("en", {
+    year: 'numeric',
+    month: 'short',
+    day: 'numeric'
+});
+console.log(fmt2.format(date1));
+console.log(fmt2.formatRange(date1, date2));
+console.log(fmt2.formatRange(date1, date3));
+// > 'Jan 10, 2007'
+// > 'Jan 10, 2007'
+// > 'Jan 10 – 20, 2007'
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- {{jsxref("Intl.DateTimeFormat")}}
diff --git a/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/formatrangetoparts/index.html b/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/formatrangetoparts/index.html
deleted file mode 100644
index be4d8a0bc4..0000000000
--- a/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/formatrangetoparts/index.html
+++ /dev/null
@@ -1,81 +0,0 @@
----
-title: Intl.DateTimeFormat.prototype.formatRangeToParts()
-slug: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/formatRangeToParts
-tags:
-  - Internationalization
-  - JavaScript
-  - Localization
-  - Method
-  - Reference
-  - i18n
-translation_of: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/formatRangeToParts
----
-<p>{{JSRef}}</p>
-
-<p><strong><code>Intl.DateTimeFormat.prototype.formatRangeToParts()</code></strong> メソッドは、 <code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat/prototype">DateTimeFormat</a></code> フォーマッターで生成される期間の各部品を表すロケール特有のトークンを提供します。</p>
-
-<div>{{EmbedInteractiveExample("pages/js/intl-datetimeformat-prototype-formatrangetoparts.html", "taller")}}</div>
-
-<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>
-
-<h2 id="Syntax" name="Syntax">構文</h2>
-
-<pre class="notranslate"><code>Intl.DateTimeFormat.prototype.formatRangeToParts(<var>startDate</var>, <var>endDate</var>)</code></pre>
-
-<h2 id="Examples" name="Examples">例</h2>
-
-<h3 id="Basic_formatRange_usage" name="Basic_formatRange_usage">基本的な formatRangeToParts の使い方</h3>
-
-<p>このメソッドは2つの {{jsxref("Date")}} を受け取り、期間を書式化する際の各部品を表すロケール特有のトークンを含む {{jsxref("Array")}} オブジェクトを返します。</p>
-
-<pre class="brush: js notranslate">let date1 = new Date(Date.UTC(2007, 0, 10, 10, 0, 0));
-let date2 = new Date(Date.UTC(2007, 0, 10, 11, 0, 0));
-// &gt; 'Wed, 10 Jan 2007 10:00:00 GMT'
-// &gt; 'Wed, 10 Jan 2007 11:00:00 GMT'
-
-let fmt = new Intl.DateTimeFormat("en", {
-    hour: 'numeric',
-    minute: 'numeric'
-});
-
-console.log(fmt.formatRange(date1, date2));
-// &gt; '10:00 – 11:00 AM'
-
-fmt.formatRangeToParts(date1, date2);
-// return value:
-// [
-//   { type: 'hour',      value: '10',  source: "startRange" },
-//   { type: 'literal',   value: ':',   source: "startRange" },
-//   { type: 'minute',    value: '00',  source: "startRange" },
-//   { type: 'literal',   value: ' – ', source: "shared"     },
-//   { type: 'hour',      value: '11',  source: "endRange"   },
-//   { type: 'literal',   value: ':',   source: "endRange"   },
-//   { type: 'minute',    value: '00',  source: "endRange"   },
-//   { type: 'literal',   value: ' ',   source: "shared"     },
-//   { type: 'dayPeriod', value: 'AM',  source: "shared"     }
-// ]</pre>
-
-<h2 id="Specifications" name="Specifications">仕様書</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">仕様書</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('Intl.DateTimeFormat.formatRange', '#sec-Intl.DateTimeFormat.prototype.formatRangeToParts', 'formatRangeToParts()')}}</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
-
-<p>{{Compat("javascript.builtins.Intl.DateTimeFormat.formatRangeToParts")}}</p>
-
-<h2 id="See_also" name="See_also">関連情報</h2>
-
-<ul>
- <li>{{jsxref("Intl.DateTimeFormat.prototype.formatRange()")}}</li>
-</ul>
diff --git a/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/formatrangetoparts/index.md b/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/formatrangetoparts/index.md
new file mode 100644
index 0000000000..034909ed3c
--- /dev/null
+++ b/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/formatrangetoparts/index.md
@@ -0,0 +1,78 @@
+---
+title: Intl.DateTimeFormat.prototype.formatRangeToParts()
+slug: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/formatRangeToParts
+tags:
+  - DateTimeFormat
+  - Internationalization
+  - Intl
+  - JavaScript
+  - Localization
+  - Method
+  - Prototype
+  - Reference
+browser-compat: javascript.builtins.Intl.DateTimeFormat.formatRangeToParts
+translation_of: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/formatRangeToParts
+---
+{{JSRef}}
+
+**`Intl.DateTimeFormat.prototype.formatRangeToParts()`** メソッドは、 {{jsxref("Intl.DateTimeFormat")}} フォーマッターで生成される期間の各部品を表すロケール特有のトークンを提供します。
+
+{{EmbedInteractiveExample("pages/js/intl-datetimeformat-prototype-formatrangetoparts.html",
+	"taller")}}
+
+
+## 構文
+
+```js
+formatRangeToParts(startDate, endDate)
+```
+
+## 例
+
+### 基本的な formatRangeToParts の使い方
+
+このメソッドは2つの {{jsxref("Date")}} を受け取り、期間を書式化する際の各部品を表す*ロケール特有*のトークンを含む {{jsxref("Array")}} オブジェクトを返します。
+
+> **Note:** 返値は現在のロケールで表示されるので、以下のものとは異なる可能性があります。
+
+```js
+let date1 = new Date(Date.UTC(2007, 0, 10, 10, 0, 0));
+let date2 = new Date(Date.UTC(2007, 0, 10, 11, 0, 0));
+// > 'Wed, 10 Jan 2007 10:00:00 GMT'
+// > 'Wed, 10 Jan 2007 11:00:00 GMT'
+
+let fmt = new Intl.DateTimeFormat("en", {
+    hour: 'numeric',
+    minute: 'numeric'
+});
+
+console.log(fmt.formatRange(date1, date2));
+// > '10:00 – 11:00 AM'
+
+fmt.formatRangeToParts(date1, date2);
+// return value:
+// [
+//   { type: 'hour',      value: '10',  source: "startRange" },
+//   { type: 'literal',   value: ':',   source: "startRange" },
+//   { type: 'minute',    value: '00',  source: "startRange" },
+//   { type: 'literal',   value: ' – ', source: "shared"     },
+//   { type: 'hour',      value: '11',  source: "endRange"   },
+//   { type: 'literal',   value: ':',   source: "endRange"   },
+//   { type: 'minute',    value: '00',  source: "endRange"   },
+//   { type: 'literal',   value: ' ',   source: "shared"     },
+//   { type: 'dayPeriod', value: 'AM',  source: "shared"     }
+// ]
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- {{jsxref("Intl/DateTimeFormat/formatRange", "Intl.DateTimeFormat.prototype.formatRange()")}}
+- {{jsxref("Intl.DateTimeFormat")}}
diff --git a/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/formattoparts/index.html b/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/formattoparts/index.html
deleted file mode 100644
index 04e140d0e8..0000000000
--- a/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/formattoparts/index.html
+++ /dev/null
@@ -1,239 +0,0 @@
----
-title: DateTimeFormat.prototype.formatToParts()
-slug: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/formatToParts
-tags:
-  - DateTimeFormat
-  - Internationalization
-  - Intl
-  - JavaScript
-  - Method
-  - Prototype
-translation_of: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/formatToParts
----
-<div>{{JSRef}}</div>
-
-<p><strong><code>Intl.DateTimeFormat.prototype.formatToParts()</code></strong> メソッドは、ロケールを意識した <code>DateTimeFormat</code> フォーマッターが生成する文字列のロケールを考慮した書式化を可能にします。</p>
-
-<h2 id="Syntax" name="Syntax">構文</h2>
-
-<pre class="syntaxbox notranslate"><var>dateTimeFormat</var>.formatToParts(<var>date</var>)</pre>
-
-<h3 id="Parameters" name="Parameters">引数</h3>
-
-<dl>
- <dt><code>date</code> {{optional_inline}}</dt>
- <dd>書式化する日付。</dd>
-</dl>
-
-<h3 id="Return_value" name="Return_value">返値</h3>
-
-<p>書式化された日付のパーツを含むオブジェクトの {{jsxref("Array")}} です。</p>
-
-<h2 id="Description" name="Description">解説</h2>
-
-<p><code>formatToParts()</code> メソッドは、日付文字列のフォーマットをカスタマイズするときに役立ちます。これは、ロケール特有の部分を保持しながら、カスタム文字列を構築できるロケール特有のトークンを含むオブジェクトの {{jsxref("Array")}} を返します。<code>formatToParts()</code> メソッドが返却する構造は、このようになります。</p>
-
-<pre class="brush: js notranslate">[
-  { type: 'day', value: '17' },
-  { type: 'weekday', value: 'Monday' }
-]</pre>
-
-<p>渡される可能性がある type は以下のとおりです。</p>
-
-<dl>
- <dt>day</dt>
- <dd>日付として使用される文字列。たとえば、 "<code>17</code>"。</dd>
- <dt>dayPeriod</dt>
- <dd>日付期間として使用される文字列。たとえば、 "<code>AM</code>", "<code>PM</code>", "<code>in the morning</code>", "<code>noon</code>" など。</dd>
- <dt>era</dt>
- <dd>時代として使用される文字列。たとえば、"<code>BC</code>" や "<code>AD</code>"。</dd>
- <dt>fractionalSecond</dt>
- <dd>小数点以下の秒として使用される文字列です。例えば "<code>0</code>" や "<code>00</code>" や "<code>000</code>" です。</dd>
- <dt>hour</dt>
- <dd>時刻として使用される文字列。たとえば "<code>3</code>" や "<code>03</code>"。</dd>
- <dt>literal</dt>
- <dd>日付や時刻の区切りとして使用される文字列。たとえば "<code>/</code>"、"<code>,</code>"、"<code>o'clock</code>"、"<code>de</code>"。</dd>
- <dt>minute</dt>
- <dd>分として使用される文字列。たとえば、"<code>00</code>"。</dd>
- <dt>month</dt>
- <dd>月として使用される文字列。たとえば、"<code>12</code>"。</dd>
- <dt>relatedYear</dt>
- <dd>カレンダーの表現が year ではなくyearNameである場合、関連する4桁のグレゴリオ暦の年に使用される文字列です。例えば "<code>2019</code>" です。</dd>
- <dt>second</dt>
- <dd>秒として使用される文字列。たとえば、"<code>07</code>" や "<code>42</code>"。</dd>
- <dt>timeZoneName</dt>
- <dd>タイムゾーン名として使用される文字列。たとえば、"<code>UTC</code>"。</dd>
- <dt>weekday</dt>
- <dd>曜日として使用される文字列。たとえば、"<code>M</code>" や "<code>Monday</code>"、"<code>Montag</code>"。</dd>
- <dt>year</dt>
- <dd>年として使用される文字列。たとえば、"<code>2012</code>" や "<code>96</code>"。</dd>
- <dt>yearName</dt>
- <dd>関連するコンテキストで yearName に使用される文字列、例えば "<code>geng-zi</code>" など。</dd>
-</dl>
-
-<h2 id="Polyfill" name="Polyfill">ポリフィル</h2>
-
-<p>この機能のポリフィルは、<a href="https://github.com/zbraniecki/proposal-intl-formatToParts">提案リポジトリ</a>から利用できます。</p>
-
-<h2 id="Examples" name="Examples">例</h2>
-
-<p><code>DateTimeFormat</code> は、直接操作できないローカライズされた透過的でない文字列を出力します。</p>
-
-<pre class="brush: js notranslate">var date = Date.UTC(2012, 11, 17, 3, 0, 42);
-
-var formatter = new Intl.DateTimeFormat('en-us', {
-  weekday: 'long',
-  year: 'numeric',
-  month: 'numeric',
-  day: 'numeric',
-  hour: 'numeric',
-  minute: 'numeric',
-  second: 'numeric',
-  fractionalSecondDigits: 3,
-  hour12: true,
-  timeZone: 'UTC'
-});
-
-formatter.format(date);
-// "Monday, 12/17/2012, 3:00:42.000 AM"
-</pre>
-
-<p>しかし、多くのユーザーインターフェイスでは、この文字列の書式をカスタマイズしたいという要望があります。 <code>formatToParts</code> メソッドは、文字列を部品単位で提供することで、 <code>DateTimeFormat</code> フォーマッターによって生成された文字列のロケールを意識した書式設定ができるようになります。</p>
-
-<pre class="brush: js notranslate">formatter.formatToParts(date);
-
-// return value:
-[
-  { type: 'weekday',   value: 'Monday' },
-  { type: 'literal',   value: ', '     },
-  { type: 'month',     value: '12'     },
-  { type: 'literal',   value: '/'      },
-  { type: 'day',       value: '17'     },
-  { type: 'literal',   value: '/'      },
-  { type: 'year',      value: '2012'   },
-  { type: 'literal',   value: ', '     },
-  { type: 'hour',      value: '3'      },
-  { type: 'literal',   value: ':'      },
-  { type: 'minute',    value: '00'     },
-  { type: 'literal',   value: ':'      },
-  { type: 'second',    value: '42'     },
-  { type: 'fractionalSecond', value: '000' },
-  { type: 'literal',   value: ' '      },
-  { type: 'dayPeriod', value: 'AM'     }
-]
-</pre>
-
-<p>これで情報は個別に利用可能になり、カスタマイズされた方法で再び書式化して連結することができます。例えば、{{jsxref("Array.prototype.map()")}}、<a href="/ja/docs/Web/JavaScript/Reference/Functions/Arrow_functions">アロー関数</a>、 <a href="/ja/docs/Web/JavaScript/Reference/Statements/switch">switch 文</a>、<a href="/ja/docs/Web/JavaScript/Reference/Template_literals">テンプレートリテラル</a>、 {{jsxref("Array.prototype.reduce()")}} などを使用しています。</p>
-
-<pre class="brush: js notranslate">var dateString = formatter.formatToParts(date).map(({type, value}) =&gt; {
-  switch (type) {
-    case 'dayPeriod': return `&lt;b&gt;${value}&lt;/b&gt;`;
-    default : return value;
-  }
-}).reduce((string, part) =&gt; string + part);
-</pre>
-
-<p>これにより、 <code>formatToParts()</code> メソッドを使用する際に、日の部分が太字になります。</p>
-
-<pre class="brush: js notranslate">console.log(formatter.format(date));
-// "Monday, 12/17/2012, 3:00:42.000 AM"
-
-console.log(dateString);
-// "Monday, 12/17/2012, 3:00:42.000 &lt;b&gt;AM&lt;/b&gt;"</pre>
-
-<h3 id="Named_Years_and_Mixed_calendars" name="Named_Years_and_Mixed_calendars">名前付きの年と混合カレンダー</h3>
-
-<p>いくつかのケースでは、暦は名前付きの年を使用しています。 例えば、中国やチベットの暦では、60年周期の<a href="https://ja.wikipedia.org/wiki/%E5%B9%B2%E6%94%AF">干支</a>を使用しています。これらの年は、グレゴリオ暦の年と関連付けて識別されます。このような場合、 <code>formatToParts()</code> の結果は、通常は年が存在するはずなのに、年の項目ではなく、4桁のグレゴリオ暦の年を含む relatedYear のエントリを含むことになります。バッグの中の項目を (任意の値で) <code>year</code> に設定すると、年と <code>yearName</code> グレゴリオ暦の <code>relatedYear</code> の両方が得られます。</p>
-
-<pre class="brush: js notranslate">let opts = { year: "numeric", month: "numeric", day: "numeric" };
-let df = new Intl.DateTimeFormat("zh-u-ca-chinese", opts);
-df.formatToParts(Date.UTC(2012, 11, 17, 3, 0, 42));
-
-// return value
-[
-  { type: 'relatedYear', value: '2012' },
-  { type: 'literal', value: '年' },
-  { type: 'month', value: '十一月' },
-  { type: 'day', value: '4' }
-]
-</pre>
-
-<p><code>year</code> オプションがバッグ内で設定されていない場合 (任意の値に設定されている場合)、結果には <code>relatedYear</code> のみが含まれます。</p>
-
-<pre class="brush: js notranslate">let df = new Intl.DateTimeFormat("zh-u-ca-chinese");
-df.formatToParts(Date.UTC(2012, 11, 17, 3, 0, 42));
-
-// 返値
-[
-   { type: 'relatedYear', value: '2012' },
-   { type: 'literal', value: '年' },
-   { type: 'month', value: '十一月' },
-   { type: 'day', value: '4' }
-]
-</pre>
-
-<p><code>year</code> を出力したい場合は、 <code>.format()</code> は一般的にこれらを並べて表示することができます。</p>
-
-<pre class="brush: js notranslate">let df = new Intl.DateTimeFormat("zh-u-ca-chinese", {year: "numeric"});
-df.format(Date.UTC(2012, 11, 17, 3, 0, 42));
-
-// 返値
-2012壬辰年</pre>
-
-<p>これにより、ロケールとカレンダーを両方の <code>format</code> で混在させることも可能になります。</p>
-
-<pre class="brush: js notranslate">let df = new Intl.DateTimeFormat("en-u-ca-chinese", {year: "numeric"});
-let date = Date.UTC(2012, 11, 17, 3, 0, 42);
-df.format(date);
-
-// 返値
-2012(ren-chen)
-</pre>
-
-<p>および <code>formatToParts</code> の場合</p>
-
-<pre class="brush: js notranslate">let opts = {month: 'numeric', day: 'numeric', year: "numeric"};
-let df = new Intl.DateTimeFormat("en-u-ca-chinese", opts);
-let date = Date.UTC(2012, 11, 17, 3);
-df.formatToParts(date)
-
-// 返値
-[
-  { type: 'month', value: '11' },
-  { type: 'literal', value: '/' },
-  { type: 'day', value: '4' },
-  { type: 'literal', value: '/' },
-  { type: 'relatedYear', value: '2012' }
-]
-</pre>
-
-<h2 id="Specifications" name="Specifications">仕様書</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">仕様書</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('ES Int Draft', '#sec-Intl.DateTimeFormat.prototype.formatToParts', 'Intl.DateTimeFormat.prototype.formatToParts')}}</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
-
-<div>
-<p>{{Compat("javascript.builtins.Intl.DateTimeFormat.formatToParts")}}</p>
-</div>
-
-<h2 id="See_also" name="See_also">関連情報</h2>
-
-<ul>
- <li>{{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}}</li>
- <li>{{jsxref("DateTimeFormat.format", "Intl.DateTimeFormat.prototype.format")}}</li>
- <li>{{jsxref("Date.prototype.toLocaleString()")}}</li>
- <li>{{jsxref("Date.prototype.toLocaleDateString()")}}</li>
- <li>{{jsxref("Date.prototype.toLocaleTimeString()")}}</li>
-</ul>
diff --git a/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/formattoparts/index.md b/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/formattoparts/index.md
new file mode 100644
index 0000000000..cbe6256671
--- /dev/null
+++ b/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/formattoparts/index.md
@@ -0,0 +1,238 @@
+---
+title: Intl.DateTimeFormat.prototype.formatToParts()
+slug: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/formatToParts
+tags:
+  - DateTimeFormat
+  - Internationalization
+  - Intl
+  - JavaScript
+  - Localization
+  - Method
+  - Prototype
+  - Reference
+browser-compat: javascript.builtins.Intl.DateTimeFormat.formatToParts
+translation_of: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/formatToParts
+---
+{{JSRef}}
+
+**`Intl.DateTimeFormat.prototype.formatToParts()`** メソッドは、ロケールを考慮した {{jsxref("Intl.DateTimeFormat")}} フォーマッターが生成する文字列のロケールを考慮した書式化を可能にします。
+
+## 構文
+
+```js
+formatToParts(date)
+```
+
+### 引数
+
+- `date` {{optional_inline}}
+  - : 書式化する日付。
+
+### 返値
+
+{{jsxref("Array")}} で、書式化された日付のパーツを含むオブジェクトの配列です。
+
+## 解説
+
+`formatToParts()` メソッドは、日付文字列のフォーマットをカスタマイズするときに役立ちます。これは、ロケール特有の部分を保持しながら、カスタム文字列を構築できるロケール特有のトークンを含むオブジェクトの {{jsxref("Array")}} を返します。`formatToParts()` メソッドが返却する構造は、このようになります。
+
+```js
+[
+  { type: 'day', value: '17' },
+  { type: 'weekday', value: 'Monday' }
+]
+```
+
+渡される可能性がある type は以下のとおりです。
+
+- day
+  - : 日付として使用される文字列。たとえば、 "`17`"。
+- dayPeriod
+  - : 日付期間として使用される文字列。たとえば、 "`AM`", "`PM`", "`in the morning`", "`noon`" など。
+- era
+  - : 時代として使用される文字列。たとえば、"`BC`" や "`AD`"。
+- fractionalSecond
+  - : 小数点以下の秒として使用される文字列です。例えば "`0`" や "`00`" や "`000`" です。
+- hour
+  - : 時刻として使用される文字列。たとえば "`3`" や "`03`"。
+- literal
+  - : 日付や時刻の区切りとして使用される文字列。たとえば "`/`"、"`,`"、"`o'clock`"、"`de`"。
+- minute
+  - : 分として使用される文字列。たとえば、"`00`"。
+- month
+  - : 月として使用される文字列。たとえば、"`12`"。
+- relatedYear
+  - : カレンダーの表現が year ではなくyearNameである場合、関連する4桁のグレゴリオ暦の年に使用される文字列です。例えば "`2019`" です。
+- second
+  - : 秒として使用される文字列。たとえば、"`07`" や "`42`"。
+- timeZoneName
+  - : タイムゾーン名として使用される文字列。たとえば、"`UTC`"。
+- weekday
+  - : 曜日として使用される文字列。たとえば、"`M`" や "`Monday`"、"`Montag`"。
+- year
+  - : 年として使用される文字列。たとえば、"`2012`" や "`96`"。
+- yearName
+  - : 関連するコンテキストで yearName に使用される文字列、例えば "`geng-zi`" など。
+
+## ポリフィル
+
+この機能のポリフィルは、[提案リポジトリー](https://github.com/zbraniecki/proposal-intl-formatToParts)から利用できます。
+
+## 例
+
+`DateTimeFormat` は、直接操作できないローカライズされた透過的でない文字列を出力します。
+
+```js
+var date = Date.UTC(2012, 11, 17, 3, 0, 42);
+
+var formatter = new Intl.DateTimeFormat('en-us', {
+  weekday: 'long',
+  year: 'numeric',
+  month: 'numeric',
+  day: 'numeric',
+  hour: 'numeric',
+  minute: 'numeric',
+  second: 'numeric',
+  fractionalSecondDigits: 3,
+  hour12: true,
+  timeZone: 'UTC'
+});
+
+formatter.format(date);
+// "Monday, 12/17/2012, 3:00:42.000 AM"
+```
+
+しかし、多くのユーザーインターフェイスでは、この文字列の書式をカスタマイズしたいという要望があります。 `formatToParts` メソッドは、文字列を部品単位で提供することで、 `DateTimeFormat` フォーマッターによって生成された文字列のロケールを意識した書式設定ができるようになります。
+
+```js
+formatter.formatToParts(date);
+
+// return value:
+[
+  { type: 'weekday',   value: 'Monday' },
+  { type: 'literal',   value: ', '     },
+  { type: 'month',     value: '12'     },
+  { type: 'literal',   value: '/'      },
+  { type: 'day',       value: '17'     },
+  { type: 'literal',   value: '/'      },
+  { type: 'year',      value: '2012'   },
+  { type: 'literal',   value: ', '     },
+  { type: 'hour',      value: '3'      },
+  { type: 'literal',   value: ':'      },
+  { type: 'minute',    value: '00'     },
+  { type: 'literal',   value: ':'      },
+  { type: 'second',    value: '42'     },
+  { type: 'fractionalSecond', value: '000' },
+  { type: 'literal',   value: ' '      },
+  { type: 'dayPeriod', value: 'AM'     }
+]
+```
+
+これで情報は個別に利用可能になり、カスタマイズされた方法で再び書式化して連結することができます。例えば、{{jsxref("Array.prototype.map()")}}、<a href="/ja/docs/Web/JavaScript/Reference/Functions/Arrow_functions">アロー関数</a>、 <a href="/ja/docs/Web/JavaScript/Reference/Statements/switch">switch 文</a>、<a href="/ja/docs/Web/JavaScript/Reference/Template_literals">テンプレートリテラル</a>、 {{jsxref("Array.prototype.join()")}} などを使用しています。
+
+```js
+var dateString = formatter.formatToParts(date).map(({type, value}) => {
+  switch (type) {
+    case 'dayPeriod': return `<b>${value}</b>`;
+    default : return value;
+  }
+}).join('');
+```
+
+これにより、 `formatToParts()` メソッドを使用する際に、日の部分が太字になります。
+
+```js
+console.log(formatter.format(date));
+// "Monday, 12/17/2012, 3:00:42.000 AM"
+
+console.log(dateString);
+// "Monday, 12/17/2012, 3:00:42.000 <b>AM</b>"
+```
+
+### 名前付きの年と混合カレンダー
+
+名前付きの年を使用している暦もあります。例えば、中国やチベットの暦では、 60 年周期の[干支](https://ja.wikipedia.org/wiki/%E5%B9%B2%E6%94%AF)を使用しています。これらの年は、グレゴリオ暦の年と関連付けて識別されます。このような場合、 `formatToParts()` の結果は、通常は年が存在するはずなのに、年の項目ではなく、 4 桁のグレゴリオ暦の年を含む `relatedYear` の項目を含むことになります。バッグの中の項目を (任意の値で) `year` に設定すると、年と `yearName` グレゴリオ暦の `relatedYear` の両方が得られます。
+
+```js
+let opts = { year: "numeric", month: "numeric", day: "numeric" };
+let df = new Intl.DateTimeFormat("zh-u-ca-chinese", opts);
+df.formatToParts(Date.UTC(2012, 11, 17, 3, 0, 42));
+
+// return value
+[
+  { type: 'relatedYear', value: '2012' },
+  { type: 'literal', value: '年' },
+  { type: 'month', value: '十一月' },
+  { type: 'day', value: '4' }
+]
+```
+
+`year` オプションがバッグ内で設定されていない場合 (任意の値に設定されている場合)、結果には `relatedYear` のみが含まれます。
+
+```js
+let df = new Intl.DateTimeFormat("zh-u-ca-chinese");
+df.formatToParts(Date.UTC(2012, 11, 17, 3, 0, 42));
+
+// 返値
+[
+   { type: 'relatedYear', value: '2012' },
+   { type: 'literal', value: '年' },
+   { type: 'month', value: '十一月' },
+   { type: 'day', value: '4' }
+]
+```
+
+`year` を出力したい場合は、 `.format()` は一般的にこれらを並べて表示することができます。
+
+```js
+let df = new Intl.DateTimeFormat("zh-u-ca-chinese", {year: "numeric"});
+df.format(Date.UTC(2012, 11, 17, 3, 0, 42));
+
+// 返値
+2012壬辰年
+```
+
+これにより、ロケールとカレンダーを両方の `format` で混在させることも可能になります。
+
+```js
+let df = new Intl.DateTimeFormat("en-u-ca-chinese", {year: "numeric"});
+let date = Date.UTC(2012, 11, 17, 3, 0, 42);
+df.format(date);
+
+// 返値
+2012(ren-chen)
+```
+
+および `formatToParts` の場合
+
+```js
+let opts = {month: 'numeric', day: 'numeric', year: "numeric"};
+let df = new Intl.DateTimeFormat("en-u-ca-chinese", opts);
+let date = Date.UTC(2012, 11, 17, 3);
+df.formatToParts(date)
+
+// 返値
+[
+  { type: 'month', value: '11' },
+  { type: 'literal', value: '/' },
+  { type: 'day', value: '4' },
+  { type: 'literal', value: '/' },
+  { type: 'relatedYear', value: '2012' }
+]
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- {{jsxref("Intl.DateTimeFormat")}}
+- {{jsxref("Intl/DateTimeFormat/format", "Intl.DateTimeFormat.prototype.format()")}}
+- {{jsxref("Date.prototype.toLocaleString()")}}
+- {{jsxref("Date.prototype.toLocaleDateString()")}}
+- {{jsxref("Date.prototype.toLocaleTimeString()")}}
diff --git a/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/index.html b/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/index.html
deleted file mode 100644
index 9b18a60a81..0000000000
--- a/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/index.html
+++ /dev/null
@@ -1,182 +0,0 @@
----
-title: Intl.DateTimeFormat
-slug: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat
-tags:
-  - Class
-  - DateTimeFormat
-  - Internationalization
-  - Intl
-  - JavaScript
-  - Localization
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat
-browser-compat: javascript.builtins.Intl.DateTimeFormat
----
-<div>{{JSRef}}</div>
-
-<p><strong><code>Intl.DateTimeFormat</code></strong> オブジェクトは、言語に応じた日付と時刻の書式化を可能にするオブジェクトのためのコンストラクターです。</p>
-
-<div>{{EmbedInteractiveExample("pages/js/intl-datetimeformat.html")}}</div>
-
-<h2 id="Constructor">コンストラクター</h2>
-
-<dl>
-	<dt>{{jsxref("Intl/DateTimeFormat/DateTimeFormat", "Intl.DateTimeFormat()")}}</dt>
-	<dd>新しい <code>DateTimeFormat</code> オブジェクトを生成します。</dd>
-</dl>
-
-<h2 id="Static_methods">静的メソッド</h2>
-
-<dl>
-	<dt>{{jsxref("Intl/DateTimeFormat/supportedLocalesOf", "Intl.DateTimeFormat.supportedLocalesOf()")}}</dt>
-	<dd>指定されたロケールのうち、実行時の既定のロケールにフォールバックせずに対応されるものを配列に収めて返します。</dd>
-</dl>
-
-<h2 id="Instance_methods">インスタンスメソッド</h2>
-
-<dl>
-	<dt>{{jsxref("Intl/DateTimeFormat/format", "Intl.DateTimeFormat.prototype.format()")}}</dt>
-	<dd>ロケールおよびこの {{jsxref("Intl/DateTimeFormat", "DateTimeFormat")}} オブジェクトの書式化オプションに則って日付を書式化するゲッター関数です。</dd>
-	<dt>{{jsxref("Intl/DateTimeFormat/formatToParts", "Intl.DateTimeFormat.prototype.formatToParts()")}}</dt>
-	<dd>オブジェクトの {{jsxref("Array")}} を返し、これは専用のロケールを意識した書式で使用することができる部品内の数値文字列を表します。</dd>
-	<dt>{{jsxref("Intl/DateTimeFormat/resolvedOptions", "Intl.DateTimeFormat.prototype.resolvedOptions()")}}</dt>
-	<dd>ローケルを反映しているプロパティとオブジェクトの初期化中に計算された照合オプションをもった新しいオブジェクトを返します。</dd>
-	<dt>{{jsxref("Intl/DateTimeFormat/formatRange", "Intl.DateTimeFormat.prototype.formatRange()")}}</dt>
-	<dd>このメソッドは 2 つの <a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Date">Date</a> を受け取り、 {{jsxref("Intl/DateTimeFormat", "DateTimeFormat")}} インスタンスを生成する際に指定されたロケールとオプションに基づいて、最も簡潔な方法で日付の範囲を書式化します。</dd>
-	<dt>{{jsxref("Intl/DateTimeFormat/formatRangeToParts", "Intl.DateTimeFormat.prototype.formatRangeToParts()")}}</dt>
-	<dd>このメソッドは 2 つの <a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Date">Date</a> を受け取り、書式化された日付の範囲の各部分を表すロケール固有のトークンを含むオブジェクトの配列を返します。</dd>
-</dl>
-
-<h2 id="Examples">例</h2>
-
-<h3 id="Using_DateTimeFormat">DateTimeFormat の使用</h3>
-
-<p>基本的に、ロケールを指定せずに使用すると、 <code>DateTimeFormat</code> は既定のロケールとオプションを使用します。</p>
-
-<pre class="brush: js">var date = new Date(Date.UTC(2012, 11, 20, 3, 0, 0));
-
-// toLocaleString without arguments depends on the implementation,
-// the default locale, and the default time zone
-console.log(new Intl.DateTimeFormat().format(date));
-// → "12/19/2012" if run with en-US locale (language) and time zone America/Los_Angeles (UTC-0800)
-</pre>
-
-<h3 id="Using_locales">locales の使用</h3>
-
-<p>この例では、ローカライズされた日付と時刻の形式のバリエーションの一部示しています。アプリケーションのユーザーインターフェイスで使用される言語のフォーマットを取得するには、 <code>locales</code> 引数を使用して、その言語 (およびおそらくいくつかのフォールバック言語) を指定してください。</p>
-
-<pre class="brush: js">var date = new Date(Date.UTC(2012, 11, 20, 3, 0, 0));
-
-// Results below use the time zone of America/Los_Angeles (UTC-0800, Pacific Standard Time)
-
-// US English uses month-day-year order
-console.log(new Intl.DateTimeFormat('en-US').format(date));
-// → "12/19/2012"
-
-// British English uses day-month-year order
-console.log(new Intl.DateTimeFormat('en-GB').format(date));
-// → "19/12/2012"
-
-// Korean uses year-month-day order
-console.log(new Intl.DateTimeFormat('ko-KR').format(date));
-// → "2012. 12. 19."
-
-// Arabic in most Arabic speaking countries uses real Arabic digits
-console.log(new Intl.DateTimeFormat('ar-EG').format(date));
-// → "١٩<span dir="rtl">‏/١٢‏/٢٠١٢</span>"
-
-// for Japanese, applications may want to use the Japanese calendar,
-// where 2012 was the year 24 of the Heisei era
-console.log(new Intl.DateTimeFormat('ja-JP-u-ca-japanese').format(date));
-// → "24/12/19"
-
-// when requesting a language that may not be supported, such as
-// Balinese, include a fallback language, in this case Indonesian
-console.log(new Intl.DateTimeFormat(['ban', 'id']).format(date));
-// → "19/12/2012"
-</pre>
-
-<h3 id="Using_options">options の使用</h3>
-
-<p>日付と時刻の書式は <code>options</code> 引数を使用してカスタマイズできます。</p>
-
-<pre class="brush: js">var date = new Date(Date.UTC(2012, 11, 20, 3, 0, 0, 200));
-
-// request a weekday along with a long date
-var options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
-console.log(new Intl.DateTimeFormat('de-DE', options).format(date));
-// → "Donnerstag, 20. Dezember 2012"
-
-// an application may want to use UTC and make that visible
-options.timeZone = 'UTC';
-options.timeZoneName = 'short';
-console.log(new Intl.DateTimeFormat('en-US', options).format(date));
-// → "Thursday, December 20, 2012, GMT"
-
-// sometimes you want to be more precise
-options = {
-  hour: 'numeric', minute: 'numeric', second: 'numeric',
-  timeZone: 'Australia/Sydney',
-  timeZoneName: 'short'
-};
-console.log(new Intl.DateTimeFormat('en-AU', options).format(date));
-// → "2:00:00 pm AEDT"
-
-// sometimes you want to be very precise
-options.fractionalSecondDigits = 3; //number digits for fraction-of-seconds
-console.log(new Intl.DateTimeFormat('en-AU', options).format(date));
-// → "2:00:00.200 pm AEDT"
-
-// sometimes even the US needs 24-hour time
-options = {
-  year: 'numeric', month: 'numeric', day: 'numeric',
-  hour: 'numeric', minute: 'numeric', second: 'numeric',
-  hour12: false,
-  timeZone: 'America/Los_Angeles'
-};
-console.log(new Intl.DateTimeFormat('en-US', options).format(date));
-// → "12/19/2012, 19:00:00"
-
-// to specify options but use the browser's default locale, use 'default'
-console.log(new Intl.DateTimeFormat('default', options).format(date));
-// → "12/19/2012, 19:00:00"
-
-// sometimes it's helpful to include the period of the day
-options = {hour: "numeric", dayPeriod: "short"};
-console.log(new Intl.DateTimeFormat('en-US', options).format(date));
-// → 10 at night
-</pre>
-
-<p>The used calendar and numbering formats can also be set independently via <code>options</code> arguments:</p>
-
-<pre class="brush: js">var options = {calendar: 'chinese', numberingSystem: 'arab'};
-var dateFormat = new Intl.DateTimeFormat('default', options);
-var usedOptions = dateFormat.resolvedOptions();
-
-console.log(usedOptions.calendar);
-// → "chinese"
-
-console.log(usedOptions.numberingSystem);
-// → "arab"
-
-console.log(usedOptions.timeZone);
-// → "America/New_York" (the users default timezone)
-</pre>
-
-<h2 id="Polyfill">ポリフィル</h2>
-
-<p><a href="https://formatjs.io/docs/polyfills/intl-datetimeformat">formatjs Intl.DateTimeFormat polyfill</a></p>
-
-<h2 id="Specifications">仕様書</h2>
-
-{{Specifications}}
-
-<h2 id="Browser_compatibility">ブラウザーの互換性</h2>
-
-<div>{{Compat}}</div>
-
-<h2 id="See_also">関連情報</h2>
-
-<ul>
-	<li>{{jsxref("Intl")}}</li>
-</ul>
diff --git a/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/index.md b/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/index.md
new file mode 100644
index 0000000000..95faa9574f
--- /dev/null
+++ b/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/index.md
@@ -0,0 +1,179 @@
+---
+title: Intl.DateTimeFormat
+slug: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat
+tags:
+  - Class
+  - DateTimeFormat
+  - Internationalization
+  - Intl
+  - JavaScript
+  - Localization
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat
+browser-compat: javascript.builtins.Intl.DateTimeFormat
+---
+{{JSRef}}
+
+**`Intl.DateTimeFormat`** オブジェクトは、言語に応じた日付と時刻の書式化を可能にします。
+
+{{EmbedInteractiveExample("pages/js/intl-datetimeformat.html")}}
+
+
+## コンストラクター
+
+- {{jsxref("Intl/DateTimeFormat/DateTimeFormat", "Intl.DateTimeFormat()")}}
+  - : 新しい `DateTimeFormat` オブジェクトを生成します。
+
+## 静的メソッド
+
+- {{jsxref("Intl/DateTimeFormat/supportedLocalesOf", "Intl.DateTimeFormat.supportedLocalesOf()")}}
+  - : 指定されたロケールのうち、実行時の既定のロケールにフォールバックせずに対応されるものを配列に収めて返します。
+
+## インスタンスメソッド
+
+- {{jsxref("Intl/DateTimeFormat/format", "Intl.DateTimeFormat.prototype.format()")}}
+  - : ロケールおよびこの {{jsxref("Intl/DateTimeFormat", "DateTimeFormat")}} オブジェクトの書式化オプションに則って日付を書式化するゲッター関数です。
+- {{jsxref("Intl/DateTimeFormat/formatToParts", "Intl.DateTimeFormat.prototype.formatToParts()")}}
+  - : オブジェクトの {{jsxref("Array")}} を返し、これは専用のロケールを意識した書式で使用することができる部品内の数値文字列を表します。
+- {{jsxref("Intl/DateTimeFormat/resolvedOptions", "Intl.DateTimeFormat.prototype.resolvedOptions()")}}
+  - : ローケルを反映しているプロパティとオブジェクトの初期化中に計算された照合オプションをもった新しいオブジェクトを返します。
+- {{jsxref("Intl/DateTimeFormat/formatRange", "Intl.DateTimeFormat.prototype.formatRange()")}}
+  - : このメソッドは 2 つの [Date](/ja/docs/Web/JavaScript/Reference/Global_Objects/Date) を受け取り、 {{jsxref("Intl/DateTimeFormat", "DateTimeFormat")}} インスタンスを生成する際に指定されたロケールとオプションに基づいて、最も簡潔な方法で日付の範囲を書式化します。
+- {{jsxref("Intl/DateTimeFormat/formatRangeToParts", "Intl.DateTimeFormat.prototype.formatRangeToParts()")}}
+  - : このメソッドは 2 つの [Date](/ja/docs/Web/JavaScript/Reference/Global_Objects/Date) を受け取り、書式化された日付の範囲の各部分を表すロケール固有のトークンを含むオブジェクトの配列を返します。
+
+## 例
+
+### DateTimeFormat の使用
+
+基本的に、ロケールを指定せずに使用すると、 `DateTimeFormat` は既定のロケールとオプションを使用します。
+
+```js
+var date = new Date(Date.UTC(2012, 11, 20, 3, 0, 0));
+
+// toLocaleString without arguments depends on the implementation,
+// the default locale, and the default time zone
+console.log(new Intl.DateTimeFormat().format(date));
+// → "12/19/2012" if run with en-US locale (language) and time zone America/Los_Angeles (UTC-0800)
+```
+
+### locales の使用
+
+この例では、ローカライズされた日付と時刻の形式のバリエーションの一部示しています。アプリケーションのユーザーインターフェイスで使用される言語のフォーマットを取得するには、 `locales` 引数を使用して、その言語 (およびおそらくいくつかのフォールバック言語) を指定してください。
+
+```js
+var date = new Date(Date.UTC(2012, 11, 20, 3, 0, 0));
+
+// Results below use the time zone of America/Los_Angeles (UTC-0800, Pacific Standard Time)
+
+// US English uses month-day-year order
+console.log(new Intl.DateTimeFormat('en-US').format(date));
+// → "12/19/2012"
+
+// British English uses day-month-year order
+console.log(new Intl.DateTimeFormat('en-GB').format(date));
+// → "19/12/2012"
+
+// Korean uses year-month-day order
+console.log(new Intl.DateTimeFormat('ko-KR').format(date));
+// → "2012. 12. 19."
+
+// Arabic in most Arabic speaking countries uses real Arabic digits
+console.log(new Intl.DateTimeFormat('ar-EG').format(date));
+// → "١٩‏/١٢‏/٢٠١٢"
+
+// for Japanese, applications may want to use the Japanese calendar,
+// where 2012 was the year 24 of the Heisei era
+console.log(new Intl.DateTimeFormat('ja-JP-u-ca-japanese').format(date));
+// → "24/12/19"
+
+// when requesting a language that may not be supported, such as
+// Balinese, include a fallback language, in this case Indonesian
+console.log(new Intl.DateTimeFormat(['ban', 'id']).format(date));
+// → "19/12/2012"
+```
+
+### options の使用
+
+日付と時刻の書式は `options` 引数を使用してカスタマイズできます。
+
+```js
+var date = new Date(Date.UTC(2012, 11, 20, 3, 0, 0, 200));
+
+// request a weekday along with a long date
+var options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
+console.log(new Intl.DateTimeFormat('de-DE', options).format(date));
+// → "Donnerstag, 20. Dezember 2012"
+
+// an application may want to use UTC and make that visible
+options.timeZone = 'UTC';
+options.timeZoneName = 'short';
+console.log(new Intl.DateTimeFormat('en-US', options).format(date));
+// → "Thursday, December 20, 2012, GMT"
+
+// sometimes you want to be more precise
+options = {
+  hour: 'numeric', minute: 'numeric', second: 'numeric',
+  timeZone: 'Australia/Sydney',
+  timeZoneName: 'short'
+};
+console.log(new Intl.DateTimeFormat('en-AU', options).format(date));
+// → "2:00:00 pm AEDT"
+
+// sometimes you want to be very precise
+options.fractionalSecondDigits = 3; //number digits for fraction-of-seconds
+console.log(new Intl.DateTimeFormat('en-AU', options).format(date));
+// → "2:00:00.200 pm AEDT"
+
+// sometimes even the US needs 24-hour time
+options = {
+  year: 'numeric', month: 'numeric', day: 'numeric',
+  hour: 'numeric', minute: 'numeric', second: 'numeric',
+  hour12: false,
+  timeZone: 'America/Los_Angeles'
+};
+console.log(new Intl.DateTimeFormat('en-US', options).format(date));
+// → "12/19/2012, 19:00:00"
+
+// to specify options but use the browser's default locale, use 'default'
+console.log(new Intl.DateTimeFormat('default', options).format(date));
+// → "12/19/2012, 19:00:00"
+
+// sometimes it's helpful to include the period of the day
+options = {hour: "numeric", dayPeriod: "short"};
+console.log(new Intl.DateTimeFormat('en-US', options).format(date));
+// → 10 at night
+```
+
+The used calendar and numbering formats can also be set independently via `options` arguments:
+
+```js
+var options = {calendar: 'chinese', numberingSystem: 'arab'};
+var dateFormat = new Intl.DateTimeFormat('default', options);
+var usedOptions = dateFormat.resolvedOptions();
+
+console.log(usedOptions.calendar);
+// → "chinese"
+
+console.log(usedOptions.numberingSystem);
+// → "arab"
+
+console.log(usedOptions.timeZone);
+// → "America/New_York" (the users default timezone)
+```
+
+## ポリフィル
+
+[formatjs Intl.DateTimeFormat polyfill](https://formatjs.io/docs/polyfills/intl-datetimeformat)
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- {{jsxref("Intl")}}
diff --git a/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/resolvedoptions/index.html b/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/resolvedoptions/index.html
deleted file mode 100644
index c59e62e79c..0000000000
--- a/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/resolvedoptions/index.html
+++ /dev/null
@@ -1,93 +0,0 @@
----
-title: Intl.DateTimeFormat.prototype.resolvedOptions()
-slug: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/resolvedOptions
-tags:
-  - DateTimeFormat
-  - Internationalization
-  - Intl
-  - JavaScript
-  - Method
-  - Prototype
-translation_of: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/resolvedOptions
----
-<div>{{JSRef}}</div>
-
-<p><strong><code>Intl.Collator.prototype.resolvedOptions()</code></strong> メソッドは、この {{jsxref("Collator")}} オブジェクトの初期化時に計算されたロケールと照合オプションを反映したプロパティを持つ新しいオブジェクトを返します。</p>
-
-<div>{{EmbedInteractiveExample("pages/js/intl-datetimeformat-prototype-resolvedoptions.html")}}</div>
-
-<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力していただける場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>
-
-<h2 id="Syntax" name="Syntax">構文</h2>
-
-<pre class="syntaxbox notranslate"><var>dateTimeFormat</var>.resolvedOptions()</pre>
-
-<h3 id="Return_value" name="Return_value">返値</h3>
-
-<p>この {{jsxref("DateTimeFormat")}} オブジェクトの初期化時に計算されたロケールと照合オプションを反映したプロパティを持つ新しいオブジェクトです。</p>
-
-<h2 id="Description" name="Description">解説</h2>
-
-<p>返されるオブジェクトには以下のプロパティがあります。</p>
-
-<dl>
- <dt><code>locale</code></dt>
- <dd>実際に使用したロケールの BCP 47 言語タグ。このロケールにつながる入力 BCP 47 言語タグに Unicode 拡張値が要求された場合、要求されたキーと値のペアのうち、このロケールで対応しているものが <code>locale</code> に含まれます。</dd>
- <dt><code>calendar</code></dt>
- <dd>例: "gregory"</dd>
- <dt><code>numberingSystem</code></dt>
- <dd>Unicode 拡張キーの <code>"ca"</code> および <code>"nu"</code> で要求された値、または既定値が入ります。</dd>
- <dt><code>timeZone</code></dt>
- <dd><code>options</code> 引数の同名のプロパティで要求された値です。提供された値がなければ {{jsxref("undefined")}} (ランタイムの既定のタイムゾーン) です。警告: アプリケーションは {{jsxref("undefined")}} が返されることに依存しないでください。将来のバージョンではランタイムの既定のタイムゾーンを識別する {{jsxref("String")}} 値が返されるようになる可能性があるからです。</dd>
- <dt><code>hour12</code></dt>
- <dd><code>options</code> 引数の同名のプロパティで要求された値、または既定値が入ります。</dd>
- <dt><code>weekday</code></dt>
- <dt><code>era</code></dt>
- <dt><code>year</code></dt>
- <dt><code>month</code></dt>
- <dt><code>day</code></dt>
- <dt><code>hour</code></dt>
- <dt><code>minute</code></dt>
- <dt><code>second</code></dt>
- <dt><code>timeZoneName</code></dt>
- <dd><code>options</code> 引数の対応するプロパティと、選択したロケールでの日付時刻の書式設定に利用可能な組み合わせや表現との間で、書式のマッチングを行った結果の値。これらのプロパティの中には、対応するコンポーネントが書式化された出力では表現されないものもあります。</dd>
-</dl>
-
-<h2 id="Examples" name="Examples">例</h2>
-
-<h3 id="Using_the_resolvedOptions_method" name="Using_the_resolvedOptions_method">resolvedOptions メソッドの使用</h3>
-
-<pre class="brush: js notranslate">var germanFakeRegion = new Intl.DateTimeFormat('de-XX', { timeZone: 'UTC' });
-var usedOptions = germanFakeRegion.resolvedOptions();
-
-usedOptions.locale;          // "de"
-usedOptions.calendar;        // "gregory"
-usedOptions.numberingSystem; // "latn"
-usedOptions.timeZone;        // "UTC"
-usedOptions.month;           // "numeric"
-</pre>
-
-<h2 id="Specifications" name="Specifications">仕様書</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">仕様書</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES Int Draft', '#sec-intl.datetimeformat.prototype.resolvedoptions', 'Intl.DateTimeFormat.prototype.resolvedOptions')}}</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
-
-<div>
-<p>{{Compat("javascript.builtins.Intl.DateTimeFormat.resolvedOptions")}}</p>
-</div>
-
-<h2 id="See_also" name="See_also">関連情報</h2>
-
-<ul>
- <li>{{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}}</li>
-</ul>
diff --git a/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/resolvedoptions/index.md b/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/resolvedoptions/index.md
new file mode 100644
index 0000000000..6ceb4c773f
--- /dev/null
+++ b/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/resolvedoptions/index.md
@@ -0,0 +1,75 @@
+---
+title: Intl.DateTimeFormat.prototype.resolvedOptions()
+slug: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/resolvedOptions
+tags:
+  - DateTimeFormat
+  - Internationalization
+  - Intl
+  - JavaScript
+  - Localization
+  - Method
+  - Prototype
+  - Reference
+browser-compat: javascript.builtins.Intl.DateTimeFormat.resolvedOptions
+translation_of: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/resolvedOptions
+---
+{{JSRef}}
+
+**`Intl.DateTimeFormat.prototype.resolvedOptions()`** メソッドは、この {{jsxref("Intl/DateTimeFormat")}} オブジェクトの初期化時に計算されたロケールや日付と時刻の整形オプションを反映したプロパティを持つ新しいオブジェクトを返します。
+
+{{EmbedInteractiveExample("pages/js/intl-datetimeformat-prototype-resolvedoptions.html")}}
+
+
+## 構文
+
+```js
+resolvedOptions()
+```
+
+### 返値
+
+この {{jsxref("Intl/DateTimeFormat")}} オブジェクトの初期化時に計算されたロケールと照合オプションを反映したプロパティを持つ新しいオブジェクトです。
+
+## 解説
+
+返されるオブジェクトには以下のプロパティがあります。
+
+- `locale`
+  - : 実際に使用したロケールの BCP 47 言語タグ。このロケールにつながる入力 BCP 47 言語タグに Unicode 拡張値が要求された場合、要求されたキーと値のペアのうち、このロケールで対応しているものが `locale` に含まれます。
+- `calendar`
+  - : 例: "gregory"
+- `numberingSystem`
+  - : Unicode 拡張キーの `"ca"` および `"nu"` で要求された値、または既定値が入ります。
+- `timeZone`
+  - : `options` 引数の同名のプロパティで要求された値です。提供された値がなければ {{jsxref("undefined")}} (ランタイムの既定のタイムゾーン) です。警告: アプリケーションは {{jsxref("undefined")}} が返されることに依存しないでください。将来のバージョンではランタイムの既定のタイムゾーンを識別する {{jsxref("String")}} 値が返されるようになる可能性があるからです。
+- `hour12`
+  - : `options` 引数の同名のプロパティで要求された値、または既定値が入ります。
+- `weekday`, `era`, `year`, `month`, `day`, `hour`, `minute`, `second`, `timeZoneName`
+  - : `options` 引数の対応するプロパティと、選択したロケールでの日付時刻の書式設定に利用可能な組み合わせや表現との間で、書式のマッチングを行った結果の値。これらのプロパティの中には、対応するコンポーネントが書式化された出力では表現されないものもあります。
+
+## 例
+
+### resolvedOptions メソッドの使用
+
+```js
+var germanFakeRegion = new Intl.DateTimeFormat('de-XX', { timeZone: 'UTC' });
+var usedOptions = germanFakeRegion.resolvedOptions();
+
+usedOptions.locale;          // "de"
+usedOptions.calendar;        // "gregory"
+usedOptions.numberingSystem; // "latn"
+usedOptions.timeZone;        // "UTC"
+usedOptions.month;           // "numeric"
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- {{jsxref("Intl.DateTimeFormat")}}
diff --git a/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/supportedlocalesof/index.html b/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/supportedlocalesof/index.html
deleted file mode 100644
index 0108a95679..0000000000
--- a/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/supportedlocalesof/index.html
+++ /dev/null
@@ -1,83 +0,0 @@
----
-title: Intl.DateTimeFormat.supportedLocalesOf()
-slug: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/supportedLocalesOf
-tags:
-  - DateTimeFormat
-  - Internationalization
-  - JavaScript
-  - Method
-  - Prototype
-translation_of: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/supportedLocalesOf
----
-<div>{{JSRef}}</div>
-
-<p><strong><code>Intl.DateTimeFormat.supportedLocalesOf()</code></strong> メソッドは、ランタイムの既定のロケールで代替する必要なく日時の書式で対応されているものを含む配列を返します。</p>
-
-<div>{{EmbedInteractiveExample("pages/js/intl-datetimeformat-prototype-supportedlocalesof.html","shorter")}}</div>
-
-<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力していただける場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>
-
-<h2 id="Syntax" name="Syntax">構文</h2>
-
-<pre class="syntaxbox notranslate">Intl.DateTimeFormat.supportedLocalesOf(<var>locales</var>[, <var>options</var>])</pre>
-
-<h3 id="Parameters" name="Parameters">引数</h3>
-
-<dl>
- <dt><code><var>locales</var></code></dt>
- <dd>BCP 47 言語タグを持つ文字列、またはそのような文字列の配列です。 <code>locales</code> 引数の一般的な形式については、 {{jsxref("Intl", "Intl のページ", "#Locale_identification_and_negotiation", 1)}}を参照してください。</dd>
- <dt><code><var>options</var></code></dt>
- <dd>
- <p>省略可能です。以下のプロパティを持つことがあるオブジェクトです。</p>
-
- <dl>
-  <dt><code>localeMatcher</code></dt>
-  <dd>使用するロケールの一致アルゴリズムです。指定可能な値は <code>lookup</code> および <code>best fit</code> で、既定値は <code>best fit</code> です。このオプションの詳細は、 {{jsxref("Intl", "Intl のページ", "#Locale_negotiation", 1)}}を参照してください。</dd>
- </dl>
- </dd>
-</dl>
-
-<h3 id="Return_value" name="Return_value">返値</h3>
-
-<p>指定したロケールタグのサブセットを表す文字列の配列で、ランタイムの既定のロケールで代替する必要なく日時の書式で対応されているものを含みます。</p>
-
-<h2 id="Description" name="Description">解説</h2>
-
-<p><code>locales</code> で提供されている言語タグのサブセットを含む配列を返します。返される言語タグは、ランタイムが日時のロケールに対応しているもので、使用しているロケール一致アルゴリズムで一致しているとみなされているものです。</p>
-
-<h2 id="Examples" name="Examples">例</h2>
-
-<h3 id="Using_supportedLocalesOf" name="Using_supportedLocalesOf">supportedLocalesOf() の使用</h3>
-
-<p>日時の書式でインドネシア語とドイツ語に対応しており、バリ語に対応していないランタイムを想定すると、 <code>supportedLocalesOf</code> はインドネシア語とドイツ語の言語タグを変更せずに返しますが、 pinyin の照合は日時の書式には関係なく、インドネシア語でも使用されません。ここでの <code>lookup</code> アルゴリズムの仕様に注意してください — バリ語話者のほとんどはインドネシア語も理解しているので、 <code>best fit</code> のマッチャーはインドネシア語がバリ語に適切に一致すると判断し、バリ語の言語タグも返すかもしれません。</p>
-
-<pre class="brush: js notranslate">var locales = ['ban', 'id-u-co-pinyin', 'de-ID'];
-var options = { localeMatcher: 'lookup' };
-console.log(Intl.DateTimeFormat.supportedLocalesOf(locales, options).join(', '));
-// → "id-u-co-pinyin, de-ID"
-</pre>
-
-<h2 id="Specifications" name="Specifications">仕様書</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">仕様書</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES Int Draft', '#sec-intl.datetimeformat.supportedlocalesof', 'Intl.DateTimeFormat.supportedLocalesOf')}}</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
-
-<div>
-<p>{{Compat("javascript.builtins.Intl.DateTimeFormat.supportedLocalesOf")}}</p>
-</div>
-
-<h2 id="See_also" name="See_also">関連情報</h2>
-
-<ul>
- <li>{{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}}</li>
-</ul>
diff --git a/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/supportedlocalesof/index.md b/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/supportedlocalesof/index.md
new file mode 100644
index 0000000000..4c5e19d610
--- /dev/null
+++ b/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/supportedlocalesof/index.md
@@ -0,0 +1,71 @@
+---
+title: Intl.DateTimeFormat.supportedLocalesOf()
+slug: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/supportedLocalesOf
+tags:
+  - DateTimeFormat
+  - Internationalization
+  - Intl
+  - JavaScript
+  - Localization
+  - Method
+  - Reference
+browser-compat: javascript.builtins.Intl.DateTimeFormat.supportedLocalesOf
+translation_of: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/supportedLocalesOf
+---
+{{JSRef}}
+
+**`Intl.DateTimeFormat.supportedLocalesOf()`** メソッドは、ランタイムの既定のロケールで代替する必要なく日時の書式で対応されているものを含む配列を返します。
+
+{{EmbedInteractiveExample("pages/js/intl-datetimeformat-prototype-supportedlocalesof.html","shorter")}}
+
+
+## 構文
+
+```js
+Intl.DateTimeFormat.supportedLocalesOf(locales)
+Intl.DateTimeFormat.supportedLocalesOf(locales, options)
+```
+
+### 引数
+
+- `locales`
+  - : BCP 47 言語タグを持つ文字列、またはそのような文字列の配列です。 `locales` 引数の一般的な形式については、 {{jsxref("Intl", "Intl", "#Locale_identification_and_negotiation", 1)}} のページを参照してください。
+- `options` {{optional_inline}}
+
+  - : 省略可能です。以下のプロパティを持つことがあるオブジェクトです。
+
+    - `localeMatcher`
+      - : 使用するロケールの一致アルゴリズムです。指定可能な値は `lookup` および `best fit` で、既定値は `best fit` です。このオプションの詳細は、 {{jsxref("Intl", "Intl", "#Locale_negotiation", 1)}} のページを参照してください。
+
+### 返値
+
+指定したロケールタグのサブセットを表す文字列の配列で、ランタイムの既定のロケールで代替する必要なく日時の書式で対応されているものを含みます。
+
+## 解説
+
+`locales` で提供されている言語タグのサブセットを含む配列を返します。返される言語タグは、ランタイムが日時のロケールに対応しているもので、使用しているロケール一致アルゴリズムで一致しているとみなされているものです。
+
+## 例
+
+### supportedLocalesOf() の使用
+
+日時の書式でインドネシア語とドイツ語に対応しており、バリ語に対応していないランタイムを想定すると、 `supportedLocalesOf` はインドネシア語とドイツ語の言語タグを変更せずに返しますが、 pinyin の照合は日時の書式には関係なく、インドネシア語でも使用されません。ここでの `lookup` アルゴリズムの仕様に注意してください — バリ語話者のほとんどはインドネシア語も理解しているので、 `best fit` のマッチャーはインドネシア語がバリ語に適切に一致すると判断し、バリ語の言語タグも返すかもしれません。
+
+```js
+const locales = ['ban', 'id-u-co-pinyin', 'de-ID'];
+const options = { localeMatcher: 'lookup' };
+console.log(Intl.DateTimeFormat.supportedLocalesOf(locales, options).join(', '));
+// → "id-u-co-pinyin, de-ID"
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- {{jsxref("Intl.DateTimeFormat")}}
diff --git a/files/ja/web/javascript/reference/global_objects/intl/listformat/resolvedoptions/index.md b/files/ja/web/javascript/reference/global_objects/intl/listformat/resolvedoptions/index.md
new file mode 100644
index 0000000000..1e52948607
--- /dev/null
+++ b/files/ja/web/javascript/reference/global_objects/intl/listformat/resolvedoptions/index.md
@@ -0,0 +1,71 @@
+---
+title: Intl.ListFormat.prototype.resolvedOptions()
+slug: Web/JavaScript/Reference/Global_Objects/Intl/ListFormat/resolvedOptions
+tags:
+  - Internationalization
+  - Intl
+  - JavaScript
+  - ListFormat
+  - Method
+  - Prototype
+  - Reference
+browser-compat: javascript.builtins.Intl.ListFormat.resolvedOptions
+translation_of: Web/JavaScript/Reference/Global_Objects/Intl/ListFormat/resolvedOptions
+---
+{{JSRef}}
+
+**`Intl.ListFormat.prototype.resolvedOptions()`** メソッドは、現在の {{jsxref("Intl.ListFormat")}} オブジェクトの構築時に計算されたロケールとスタイル整形オプションを反映したプロパティを持つ新しいオブジェクトを返します。
+
+## 構文
+
+```js
+listFormat.resolvedOptions()
+```
+
+### 返値
+
+指定された {{jsxref("Intl.ListFormat")}} オブジェクトの構築時に計算されたロケールと整形オプションを反映したプロパティを持つオブジェクトです。
+
+## 解説
+
+`resolvedOptions()` から返されるオブジェクトには、以下のプロパティがあります。
+
+- `locale`
+  - : 実際に使用したロケールの BCP 47 言語タグ。このロケールにつながる入力 BCP 47 言語タグに Unicode 拡張値が要求された場合、要求されたキーと値のペアのうち、このロケールで対応しているものが `locale` に含まれます。
+- `style`
+  - : コンストラクターの `options` 引数の中でこのプロパティに指定された値、または既定値 ("`long`") がです。この値は、"`long`"、"`short`"、"`narrow`" のいずれかです。
+- `type`
+  - : コンストラクターの `options` 引数の中でこのプロパティに指定された値、または既定値 ("`conjunction`") がです。この値は、"`conjunction`"、"`disjunction`"、"`unit`" のいずれかです。
+
+## 例
+
+## resolvedOptions の使用
+
+```js
+const deListFormatter = new Intl.ListFormat("de-DE", { style: "short" });
+
+const usedOptions = de.resolvedOptions();
+console.log(usedOptions.locale); // "de-DE"
+console.log(usedOptions.style);  // "short"
+console.log(usedOptions.type);   // "conjunction" (the default value)
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- {{jsxref("Intl.ListFormat")}}
+- {{jsxref("Intl/NumberFormat/resolvedOptions",
+		"Intl.NumberFormat.prototype.resolvedOptions()")}}
+- {{jsxref("Intl/Collator/resolvedOptions",
+		"Intl.Collator.prototype.resolvedOptions()")}}
+- {{jsxref("Intl/DateTimeFormat/resolvedOptions",
+		"Intl.DateTimeFormat.prototype.resolvedOptions()")}}
+- {{jsxref("Intl/PluralRules/resolvedOptions",
+		"Intl.PluralRules.prototype.resolvedOptions()")}}
diff --git a/files/ja/web/javascript/reference/global_objects/intl/locale/maximize/index.html b/files/ja/web/javascript/reference/global_objects/intl/locale/maximize/index.html
deleted file mode 100644
index 1d7cad466a..0000000000
--- a/files/ja/web/javascript/reference/global_objects/intl/locale/maximize/index.html
+++ /dev/null
@@ -1,77 +0,0 @@
----
-title: Intl.Locale.prototype.maximize()
-slug: Web/JavaScript/Reference/Global_Objects/Intl/Locale/maximize
-tags:
-  - Internationaliztion
-  - Intl
-  - JavaScript
-  - Method
-  - Prototype
-  - Reference
-  - メソッド
-  - 国際化
-translation_of: Web/JavaScript/Reference/Global_Objects/Intl/Locale/maximize
----
-<div>{{JSRef}}</div>
-
-<p><span class="seoSummary"><strong><code>Intl.Locale.prototype.maximize()</code></strong> メソッドは、既存の値に基づいてロケールの言語、表記法、地域の最も可能性の近い値を取得します。</span></p>
-
-<div>{{EmbedInteractiveExample("pages/js/intl-locale-prototype-maximize.html")}}</div>
-
-<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力していただける場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>
-
-<h2 id="Syntax" name="Syntax">構文</h2>
-
-<pre class="syntaxbox"><code><em>locale</em>.maximize()</code></pre>
-
-<h3 id="Return_value" name="Return_value">返値</h3>
-
-<p>{{jsxref("Locale", "Locale")}} インスタンスで、 <code>baseName</code> プロパティが、 <a href="https://www.unicode.org/reports/tr35/#Likely_Subtags">Add Likely Subtags</a> アルゴリズムが <em>{{jsxref("Locale/baseName", "locale.baseName")}}</em> に対して実行された結果になったものを返します。</p>
-
-<h2 id="Description" name="Description">解説</h2>
-
-<p>不完全な言語識別子をもとに、最も可能性の高いロケール言語識別子サブタグを識別できると便利な場合があります。 Add Likely Subtags アルゴリズムはこの機能を提供してくれます。例えば、言語識別子 "en" が与えられた場合、アルゴリズムは "en-Latn-US" を返すことになります。英語はラテン文字でしか書けませんし、世界最大の英語圏の国であるアメリカで使われている可能性が高いからです。この機能は、 <code>maximize()</code> メソッドを介して JavaScript プログラマーに提供されています。 <code>maximize()</code> は、<a href="https://www.unicode.org/reports/tr35/#Language_Locale_Field_Definitions" rel="noopener">言語識別子</a>を構成する主要なサブタグのうち言語サブ、表記法、地域の各サブタグにのみ影響を与えます。ロケール識別子の "-u" の後にあるその他のサブタグは拡張サブタグと呼ばれ、 <code>maximize()</code> メソッドの影響を受けません。これらのサブタグの例としては、 {{jsxref("Locale/hourCycle", "Locale.hourCycle")}}, {{jsxref("Locale/calendar", "Locale.calendar")}}, {{jsxref("Locale/numeric", "Locale.numeric")}} などがあります。</p>
-
-<h2 id="Examples" name="Examples">例</h2>
-
-<pre class="brush: js">let myLocale = new Intl.Locale("ja", {hourCycle: "h24", calendar: "gregory"});
-console.log(myLocale.baseName); // "ja" と表示
-console.log(myLocale.toString()); // "ja-u-ca-gregory-hc-h24" と表示
-let myLocMaximized = myLocale.maximize();
-
-// "ja-Jpan-JP"。 "Jpan" と "JP" タグが追加されます。
-// これは、日本語が主に漢字かな交じり文 (Jpan) で書かれ、また主に日本 (JP) で話されているためです。
-console.log(myLocMaximized.baseName);
-
-// "ja-Jpan-JP-u-ca-gregory-hc-h24" と表示します。
-// なお、拡張タグ ("-u" 以降) はそのまま残ります。
-console.log(myLocMaximized.toString()); </pre>
-
-<h2 id="Specifications" name="Specifications">仕様書</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">仕様書</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('ES Int Draft', '#sec-Intl.Locale.prototype.maximize')}}</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
-
-<div>
-<p>{{Compat("javascript.builtins.Intl.Locale.maximize")}}</p>
-</div>
-
-<h2 id="See_also" name="See_also">関連情報</h2>
-
-<ul>
- <li>{{jsxref("Locale", "Intl.Locale")}}</li>
- <li>{{jsxref("Locale/baseName", "Locale.baseName")}}</li>
- <li><a href="https://www.unicode.org/reports/tr35/#Likely_Subtags">Unicode's Likely Subtags spec</a></li>
-</ul>
diff --git a/files/ja/web/javascript/reference/global_objects/intl/locale/maximize/index.md b/files/ja/web/javascript/reference/global_objects/intl/locale/maximize/index.md
new file mode 100644
index 0000000000..aae9be3eca
--- /dev/null
+++ b/files/ja/web/javascript/reference/global_objects/intl/locale/maximize/index.md
@@ -0,0 +1,68 @@
+---
+title: Intl.Locale.prototype.maximize()
+slug: Web/JavaScript/Reference/Global_Objects/Intl/Locale/maximize
+tags:
+  - 国際化
+  - Intl
+  - JavaScript
+  - Locale
+  - メソッド
+  - Prototype
+  - Reference
+browser-compat: javascript.builtins.Intl.Locale.maximize
+translation_of: Web/JavaScript/Reference/Global_Objects/Intl/Locale/maximize
+---
+{{JSRef}}
+
+**`Intl.Locale.prototype.maximize()`** メソッドは、既存の値に基づいてロケールの言語、表記法、地域の最も可能性の近い値を取得します。
+
+{{EmbedInteractiveExample("pages/js/intl-locale-prototype-maximize.html")}}
+
+
+## 構文
+
+```js
+maximize()
+```
+
+### 返値
+
+{{jsxref("Intl/Locale", "Locale")}} インスタンスのうち、 `baseName` プロパティが [Add Likely Subtags](https://www.unicode.org/reports/tr35/#Likely_Subtags) アルゴリズムを _{{jsxref("Intl/Locale/baseName", "locale.baseName")}}_.に対して実行した結果になっているものを返します。
+
+## 解説
+
+不完全な言語識別子をもとに、最も可能性の高いロケール言語識別子サブタグを識別できると便利な場合があります。 Add Likely Subtags アルゴリズムはこの機能を提供してくれます。例えば、言語識別子 "en" が与えられた場合、アルゴリズムは "en-Latn-US" を返すことになります。英語はラテン文字でしか書けませんし、世界最大の英語圏の国であるアメリカで使われている可能性が高いからです。この機能は、 `maximize()` メソッドを介して JavaScript プログラマーに提供されています。 `maximize()` は、[言語識別子](https://www.unicode.org/reports/tr35/#Language_Locale_Field_Definitions)を構成する主要なサブタグのうち言語サブ、表記法、地域の各サブタグにのみ影響を与えます。ロケール識別子の "-u" の後にあるその他のサブタグは拡張サブタグと呼ばれ、 `maximize()` メソッドの影響を受けません。これらのサブタグの例としては、{{jsxref("Intl/Locale/hourCycle", "Locale.hourCycle")}}、{{jsxref("Intl/Locale/calendar", "Locale.calendar")}}、{{jsxref("Intl/Locale/numeric", "Locale.numeric")}} などがあります。</p>
+
+## 例
+
+### maximize の使用
+
+```js
+let myLocale = new Intl.Locale("ja", {hourCycle: "h24", calendar: "gregory"});
+console.log(myLocale.baseName); // "ja" と表示
+console.log(myLocale.toString()); // "ja-u-ca-gregory-hc-h24" と表示
+let myLocMaximized = myLocale.maximize();
+
+// "ja-Jpan-JP"。 "Jpan" と "JP" タグが追加されます。
+// これは、日本語が主に漢字かな交じり文 (Jpan) で書かれ、また主に日本 (JP) で話されているためです。
+console.log(myLocMaximized.baseName);
+
+// "ja-Jpan-JP-u-ca-gregory-hc-h24" と表示します。
+// なお、拡張タグ ("-u" 以降) はそのまま残ります。
+console.log(myLocMaximized.toString()); 
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- {{jsxref("Intl.Locale")}}
+- {{jsxref("Intl/Locale/baseName", "Intl.Locale.baseName")}}
+- [Unicode's Likely
+  Subtags spec](https://www.unicode.org/reports/tr35/#Likely_Subtags)
diff --git a/files/ja/web/javascript/reference/global_objects/intl/locale/minimize/index.html b/files/ja/web/javascript/reference/global_objects/intl/locale/minimize/index.html
deleted file mode 100644
index b83e495348..0000000000
--- a/files/ja/web/javascript/reference/global_objects/intl/locale/minimize/index.html
+++ /dev/null
@@ -1,76 +0,0 @@
----
-title: Intl.Locale.prototype.minimize()
-slug: Web/JavaScript/Reference/Global_Objects/Intl/Locale/minimize
-tags:
-  - Internationalization
-  - Intl
-  - JavaScript
-  - Method
-  - Prototype
-  - Reference
-  - 国際化
-translation_of: Web/JavaScript/Reference/Global_Objects/Intl/Locale/minimize
----
-<div>{{JSRef}}</div>
-
-<p><span class="seoSummary"><strong><code>Intl.Locale.prototype.minimize()</code></strong> メソッドは、 {{jsxref("Locale/maximize", "Locale.maximize()")}} を呼び出したことで追加されるロケールに関する情報を削除しようとします。</span></p>
-
-<div>{{EmbedInteractiveExample("pages/js/intl-locale-prototype-minimize.html", "taller")}}</div>
-
-<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力していただける場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>
-
-<h2 id="Syntax" name="Syntax">構文</h2>
-
-<pre class="syntaxbox"><code><em>locale</em>.minimize()</code></pre>
-
-<h3 id="Return_value" name="Return_value">返値</h3>
-
-<p>{{jsxref("Locale", "Locale")}} インスタンスで、 <code>baseName</code> プロパティが、 <a href="https://www.unicode.org/reports/tr35/#Likely_Subtags">Remove Likely Subtags</a> アルゴリズムが <code><em>locale.baseName</em></code> に対して実行された結果になったものを返します。</p>
-
-<h2 id="Description" name="Description">解説</h2>
-
-<p>このメソッドは {{jsxref("Locale/maximize", "maximize()")}} の逆の処理を行い、ロケールの言語識別子 (基本的には <code>baseName</code> の内容) から言語、文字体系、地域のサブタグをすべて削除します。これは、言語識別子の中に余分なサブタグがある場合に便利です。例えば "en-Latn" は "en" に簡略化できます。英語では "Latn" が書き言葉に使われる唯一の文字体系だからです。 <code>minimize()</code> が影響を与えるのは、<a href="https://www.unicode.org/reports/tr35/#Language_Locale_Field_Definitions">言語識別子</a>を構成する主要なサブタグである言語、文字体系、地域の各サブタグのみです。ロケール識別子の "-u" の後にあるその他のサブタグは拡張サブタグと呼ばれ、 <code>minimize()</code> メソッドの影響を受けません。これらのサブタグの例としては、 {{jsxref("Locale/hourCycle", "Locale.hourCycle")}}, {{jsxref("Locale/calendar", "Locale.calendar")}}, {{jsxref("Locale/numeric", "Locale.numeric")}} などがあります。</p>
-
-<h2 id="Examples" name="Examples">例</h2>
-
-<pre class="brush: js">let myLocale = new Intl.Locale("ja-Jpan-JP", {hourCycle: "h24", calendar: "gregory"});
-console.log(myLocale.baseName); // "ja-Jpan-JP" と表示
-console.log(myLocale.toString()); // "ja-Jpan-JP-u-ca-gregory-hc-h24" と表示
-
-let myLocMinimized = myLocale.minimize();
-
-// "ja" のみを表示します。日本語は主に漢字かな交じり文 (Jpan) で
-// 表記され、またほとんど日本で話されているためです。
-console.log(myLocMinimized.baseName);
-
-// "ja-u-ca-gregory-hc-h24" と表示します。
-// なお、拡張タグ ("-u" 以降) はそのまま残ります。
-console.log(myLocMinimized.toString());</pre>
-
-<h2 id="Specifications" name="Specifications">仕様書</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">仕様書</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('ES Int Draft', '#sec-Intl.Locale.prototype.minimize')}}</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
-
-<div>
-<p>{{Compat("javascript.builtins.Intl.Locale.minimize")}}</p>
-</div>
-
-<h2 id="See_also" name="See_also">関連情報</h2>
-
-<ul>
- <li>{{jsxref("Locale", "Intl.Locale")}}</li>
- <li>{{jsxref("Locale/baseName", "Intl.Locale.baseName")}}</li>
-</ul>
diff --git a/files/ja/web/javascript/reference/global_objects/intl/locale/minimize/index.md b/files/ja/web/javascript/reference/global_objects/intl/locale/minimize/index.md
new file mode 100644
index 0000000000..db7cd28fd1
--- /dev/null
+++ b/files/ja/web/javascript/reference/global_objects/intl/locale/minimize/index.md
@@ -0,0 +1,66 @@
+---
+title: Intl.Locale.prototype.minimize()
+slug: Web/JavaScript/Reference/Global_Objects/Intl/Locale/minimize
+tags:
+  - 国際化
+  - Intl
+  - JavaScript
+  - メソッド
+  - Prototype
+  - Reference
+browser-compat: javascript.builtins.Intl.Locale.minimize
+translation_of: Web/JavaScript/Reference/Global_Objects/Intl/Locale/minimize
+---
+{{JSRef}}
+
+**`Intl.Locale.prototype.minimize()`** メソッドは、 {{jsxref("Intl/Locale/maximize", "Locale.maximize()")}} を呼び出したことで追加されるロケールに関する情報を削除しようとします。
+
+{{EmbedInteractiveExample("pages/js/intl-locale-prototype-minimize.html", "taller")}}
+
+
+## 構文
+
+```js
+minimize()
+```
+
+### 返値
+
+{{jsxref("Intl/Locale", "Locale")}} インスタンスで、 `baseName` プロパティが、 [Remove Likely Subtags](https://www.unicode.org/reports/tr35/#Likely_Subtags) アルゴリズムを _{{jsxref("Intl/Locale/baseName", "locale.baseName")}}_ に対して実行された結果になったものを返します。
+
+## 解説
+
+このメソッドは {{jsxref("Intl/Locale/maximize", "maximize()")}} の逆の処理を行い、ロケールの言語識別子 (基本的には `baseName` の内容) から言語、表記法、地域のサブタグをすべて削除します。これは、言語識別子の中に余分なサブタグがある場合に便利です。例えば "en-Latn" は "en" に簡略化できます。英語では "Latn" が書き言葉に使われる唯一の表記法だからです。 `minimize()` が影響を与えるのは、[言語識別子](https://www.unicode.org/reports/tr35/#Language_Locale_Field_Definitions)を構成する主要なサブタグである言語、表記法、地域の各サブタグのみです。ロケール識別子の "-u" の後にあるその他のサブタグは拡張サブタグと呼ばれ、 `minimize()` メソッドの影響を受けません。これらのサブタグの例としては、{{jsxref("Intl/Locale/hourCycle", "Locale.hourCycle")}}、{{jsxref("Intl/Locale/calendar", "Locale.calendar")}}、{{jsxref("Intl/Locale/numeric", "Locale.numeric")}} などがあります。
+
+## 例
+
+### minimize の使用
+
+```js
+let myLocale = new Intl.Locale("ja-Jpan-JP", {hourCycle: "h24", calendar: "gregory"});
+console.log(myLocale.baseName); // "ja-Jpan-JP" と表示
+console.log(myLocale.toString()); // "ja-Jpan-JP-u-ca-gregory-hc-h24" と表示
+
+let myLocMinimized = myLocale.minimize();
+
+// "ja" のみを表示します。日本語は主に漢字かな交じり文 (Jpan) で
+// 表記され、またほとんど日本で話されているためです。
+console.log(myLocMinimized.baseName);
+
+// "ja-u-ca-gregory-hc-h24" と表示します。
+// なお、拡張タグ ("-u" 以降) はそのまま残ります。
+console.log(myLocMinimized.toString());
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- {{jsxref("Intl.Locale")}}
+- {{jsxref("Intl/Locale/baseName", "Intl.Locale.baseName")}}
diff --git a/files/ja/web/javascript/reference/global_objects/intl/locale/tostring/index.html b/files/ja/web/javascript/reference/global_objects/intl/locale/tostring/index.html
deleted file mode 100644
index 4fdc4acec8..0000000000
--- a/files/ja/web/javascript/reference/global_objects/intl/locale/tostring/index.html
+++ /dev/null
@@ -1,65 +0,0 @@
----
-title: Intl.Locale.prototype.toString()
-slug: Web/JavaScript/Reference/Global_Objects/Intl/Locale/toString
-tags:
-  - Intl
-  - JavaScript
-  - Method
-  - Prototype
-  - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Intl/Locale/toString
----
-<div>{{JSRef}}</div>
-
-<p><span class="seoSummary"><strong><code>Intl.Locale.prototype.toString()</code></strong> は、このロケールの完全な<a href="https://www.unicode.org/reports/tr35/#Unicode_locale_identifier">ロケール識別子文字列</a>を返します。</span></p>
-
-<div>{{EmbedInteractiveExample("pages/js/intl-locale-prototype-tostring.html")}}</div>
-
-<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力していただける場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>
-
-<h2 id="Syntax" name="Syntax">構文</h2>
-
-<pre class="syntaxbox"><code><em>locale</em>.toString()</code></pre>
-
-<h3 id="Return_value" name="Return_value">返値</h3>
-
-<p>この<em>ロケール</em>の Unicode ロケール識別子文字列です。</p>
-
-<h2 id="Description" name="Description">解説</h2>
-
-<p><code>Locale</code> オブジェクトは、概念的な Unicode ロケール識別子を JavaScript で表現したものです。特定のロケールに関する情報 (言語、文字体系、カレンダーの種類など) を、ロケール識別子文字列で符号化することができます。これらのロケール識別子をより簡単に扱えるようにするために、 <code>Locale</code> オブジェクトが JavaScript に導入されました。 Locale オブジェクトの <code>toString</code> メソッドをコールすると、そのロケールの識別子文字列を返します。 <code>toString</code> メソッドを使用すると、 <code>Locale</code> のインスタンスが既存の <code>Intl</code> のコンストラクターへの引数ととして JSON におけるシリアライズにおいて、またはその他のコンテキストで正確な文字列表現が有用な場合に提供することができます。</p>
-
-<h2 id="Examples" name="Examples">例</h2>
-
-<pre class="brush: js">let myLocale = new Intl.Locale("ja-Jpan-JP", {hourCycle: "h24", calendar: "gregory"});
-console.log(myLocale.baseName); // "ja-Jpan-JP" と表示
-console.log(myLocale.toString()); // "ja-Jpan-JP-u-ca-gregory-hc-h24" と表示
-</pre>
-
-<h2 id="Specifications" name="Specifications">仕様書</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">仕様書</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('ES Int Draft', '#sec-Intl.Locale.prototype.toString')}}</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
-
-<div>
-<p>{{Compat("javascript.builtins.Intl.Locale.toString")}}</p>
-</div>
-
-<h2 id="See_also" name="See_also">関連情報</h2>
-
-<ul>
- <li>{{jsxref("Locale", "Intl.Locale")}}</li>
- <li>{{jsxref("Locale/baseName", "Intl.Locale.baseName")}}</li>
-</ul>
diff --git a/files/ja/web/javascript/reference/global_objects/intl/locale/tostring/index.md b/files/ja/web/javascript/reference/global_objects/intl/locale/tostring/index.md
new file mode 100644
index 0000000000..f62794a64c
--- /dev/null
+++ b/files/ja/web/javascript/reference/global_objects/intl/locale/tostring/index.md
@@ -0,0 +1,58 @@
+---
+title: Intl.Locale.prototype.toString()
+slug: Web/JavaScript/Reference/Global_Objects/Intl/Locale/toString
+tags:
+  - Internationalization
+  - Intl
+  - JavaScript
+  - Locale
+  - Method
+  - Prototype
+  - Reference
+browser-compat: javascript.builtins.Intl.Locale.toString
+translation_of: Web/JavaScript/Reference/Global_Objects/Intl/Locale/toString
+---
+{{JSRef}}
+
+**`Intl.Locale.prototype.toString()`** は、このロケールの完全な[ロケール識別子文字列](https://www.unicode.org/reports/tr35/#Unicode_locale_identifier)を返します。
+
+{{EmbedInteractiveExample("pages/js/intl-locale-prototype-tostring.html")}}
+
+<!-- The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. -->
+
+## 構文
+
+```js
+toString()
+```
+
+### 返値
+
+この*ロケール*の Unicode ロケール識別子文字列です。
+
+## 解説
+
+`Locale` オブジェクトは、概念的な Unicode ロケール識別子を JavaScript で表現したものです。特定のロケールに関する情報 (言語、表記法、カレンダーの種類など) を、ロケール識別子文字列で符号化することができます。これらのロケール識別子をより簡単に扱えるようにするために、 `Locale` オブジェクトが JavaScript に導入されました。 Locale オブジェクトの `toString` メソッドをコールすると、そのロケールの識別子文字列を返します。 `toString` メソッドを使用すると、 `Locale` のインスタンスが既存の `Intl` のコンストラクターへの引数ととして JSON におけるシリアライズにおいて、またはその他のコンテキストで正確な文字列表現が有用な場合に提供することができます。
+
+## 例
+
+### toString の使用
+
+```js
+let myLocale = new Intl.Locale("ja-Jpan-JP", {hourCycle: "h24", calendar: "gregory"});
+console.log(myLocale.baseName); // "ja-Jpan-JP" と表示
+console.log(myLocale.toString()); // "ja-Jpan-JP-u-ca-gregory-hc-h24" と表示
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- {{jsxref("Intl.Locale")}}
+- {{jsxref("Intl/Locale/baseName", "Intl.Locale.baseName")}}
diff --git a/files/ja/web/javascript/reference/global_objects/object/propertyisenumerable/index.html b/files/ja/web/javascript/reference/global_objects/object/propertyisenumerable/index.html
deleted file mode 100644
index d2d7ba68e7..0000000000
--- a/files/ja/web/javascript/reference/global_objects/object/propertyisenumerable/index.html
+++ /dev/null
@@ -1,133 +0,0 @@
----
-title: Object.prototype.propertyIsEnumerable()
-slug: Web/JavaScript/Reference/Global_Objects/Object/propertyIsEnumerable
-tags:
-  - JavaScript
-  - Method
-  - Object
-  - Prototype
-  - プロトタイプ
-  - メソッド
-translation_of: Web/JavaScript/Reference/Global_Objects/Object/propertyIsEnumerable
----
-<div>{{JSRef}}</div>
-
-<p> <code><strong>propertyIsEnumerable()</strong></code> メソッドは、指定されたプロパティが列挙可能で、オブジェクト自身のプロパティであることを示す Boolean を返します。</p>
-
-<div>{{EmbedInteractiveExample("pages/js/object-prototype-propertyisenumerable.html", "taller")}}</div>
-
-<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>
-
-<h2 id="Syntax" name="Syntax">構文</h2>
-
-<pre class="syntaxbox"><code><var>obj</var>.propertyIsEnumerable(<var>prop</var>)</code></pre>
-
-<h3 id="Parameters" name="Parameters">引数</h3>
-
-<dl>
- <dt><code>prop</code></dt>
- <dd>調べたいプロパティの名前。</dd>
-</dl>
-
-<h3 id="Return_value" name="Return_value">返値</h3>
-
-<p>指定されたプロパティが列挙可能であり、かつオブジェクト自体のプロパティであるかどうかを示す {{jsxref("Boolean")}} 。</p>
-
-<h2 id="Description" name="Description">解説</h2>
-
-<p>すべてのオブジェクトは <code>propertyIsEnumerable</code> メソッドを持っています。このメソッドはあるオブジェクトのプロパティが、プロトタイプチェーンを通じて継承されたプロパティを除いて {{jsxref("Statements/for...in", "for...in")}} ループで列挙可能かどうかを特定することができます。もしオブジェクトが指定されたプロパティを持っていない場合、このメソッドは <code>false</code> を返します。</p>
-
-<h2 id="Examples" name="Examples">例</h2>
-
-<h3 id="A_basic_use_of_propertyIsEnumerable" name="A_basic_use_of_propertyIsEnumerable"><code>propertyIsEnumerable</code> の基本的な使い方</h3>
-
-<p>以下の例はオブジェクトと配列での <code>propertyIsEnumerable</code> の使い方を示しています。</p>
-
-<pre class="brush: js">var o = {};
-var a = [];
-o.prop = 'is enumerable';
-a[0] = 'is enumerable';
-
-o.propertyIsEnumerable('prop');   // true を返す
-a.propertyIsEnumerable(0);        // true を返す
-</pre>
-
-<h3 id="User-defined_vs._built-in_objects" name="User-defined_vs._built-in_objects">ユーザー定義オブジェクトと組み込みオブジェクト</h3>
-
-<p>以下の例はユーザー定義プロパティと組み込みプロパティの列挙可能性を実証しています。</p>
-
-<pre class="brush: js">var a = ['is enumerable'];
-
-a.propertyIsEnumerable(0);          // true を返す
-a.propertyIsEnumerable('length');   // false を返す
-
-Math.propertyIsEnumerable('random');   // false を返す
-this.propertyIsEnumerable('Math');     // false を返す
-</pre>
-
-<h3 id="Direct_versus_inherited_properties" name="Direct_versus_inherited_properties">直接のプロパティと継承されたプロパティ</h3>
-
-<pre class="brush: js">var a = [];
-a.propertyIsEnumerable('constructor');         // false を返す
-
-function firstConstructor() {
-  this.property = 'is not enumerable';
-}
-
-firstConstructor.prototype.firstMethod = function() {};
-
-function secondConstructor() {
-  this.method = function method() { return 'is enumerable'; };
-}
-
-secondConstructor.prototype = new firstConstructor;
-secondConstructor.prototype.constructor = secondConstructor;
-
-var o = new secondConstructor();
-o.arbitraryProperty = 'is enumerable';
-
-o.propertyIsEnumerable('arbitraryProperty');   // true を返す
-o.propertyIsEnumerable('method');              // true を返す
-o.propertyIsEnumerable('property');            // false を返す
-
-o.property = 'is enumerable';
-
-o.propertyIsEnumerable('property');            // true を返す
-
-// これらはすべて false を返します。これは、 (最後の2つは for-in で
-// 反復処理可能であるにもかかわらず) propertyIsEnumerable が考慮しない
-// プロトタイプであるためです。
-o.propertyIsEnumerable('prototype');   // false を返す (as of JS 1.8.1/FF3.6)
-o.propertyIsEnumerable('constructor'); // false を返す
-o.propertyIsEnumerable('firstMethod'); // false を返す
-</pre>
-
-<h2 id="Specifications" name="Specifications">仕様書</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">仕様書</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-object.prototype.propertyisenumerable', 'Object.prototype.propertyIsEnumerable')}}</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
-
-<div>
-<p>{{Compat("javascript.builtins.Object.propertyIsEnumerable")}}</p>
-</div>
-
-<h2 id="See_also" name="See_also">関連情報</h2>
-
-<ul>
- <li><a href="/ja/docs/Web/JavaScript/Enumerability_and_ownership_of_properties">列挙可能性とプロパティの所有権</a></li>
- <li>{{jsxref("Statements/for...in", "for...in")}}</li>
- <li>{{jsxref("Object.keys()")}}</li>
- <li>{{jsxref("Object.defineProperty()")}}</li>
-</ul>
diff --git a/files/ja/web/javascript/reference/global_objects/object/propertyisenumerable/index.md b/files/ja/web/javascript/reference/global_objects/object/propertyisenumerable/index.md
new file mode 100644
index 0000000000..c2b09a9921
--- /dev/null
+++ b/files/ja/web/javascript/reference/global_objects/object/propertyisenumerable/index.md
@@ -0,0 +1,120 @@
+---
+title: Object.prototype.propertyIsEnumerable()
+slug: Web/JavaScript/Reference/Global_Objects/Object/propertyIsEnumerable
+tags:
+  - JavaScript
+  - メソッド
+  - Object
+  - プロトタイプ
+browser-compat: javascript.builtins.Object.propertyIsEnumerable
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/propertyIsEnumerable
+---
+{{JSRef}}
+
+**`propertyIsEnumerable()`** メソッドは、指定されたプロパティが列挙可能で、かつオブジェクト自身のプロパティであるかどうかを示す論理値を返します。
+
+{{EmbedInteractiveExample("pages/js/object-prototype-propertyisenumerable.html", "taller")}}
+
+## 構文
+
+```js
+propertyIsEnumerable(prop)
+```
+
+### 引数
+
+- `prop`
+  - : 調べたいプロパティの名前です。
+
+### 返値
+
+`true` または `false` の値で、指定されたプロパティが列挙可能であり、かつオブジェクト自身のプロパティであるかどうかを示します。
+
+## 解説
+
+すべてのオブジェクトは `propertyIsEnumerable` メソッドを持っています。このメソッドはあるオブジェクトのプロパティが、プロトタイプチェーンを通じて継承されたプロパティを除いて {{jsxref("Statements/for...in", "for...in")}} ループで列挙可能かどうかを特定することができます。もしオブジェクトが指定されたプロパティを持っていない場合、このメソッドは `false` を返します。
+
+> **Note:** 列挙可能なプロパティは {{jsxref("Statements/for...in", "for...in")}} ループで反復処理されますが、 {{jsxref("Global_Objects/Symbol", "Symbol")}} は含まれないことに留意してください。
+
+## 例
+
+### `propertyIsEnumerable` の基本的な使い方
+
+以下の例はオブジェクトと配列での `propertyIsEnumerable` の使い方を示しています。
+
+```js
+var o = {};
+var a = [];
+o.prop = 'is enumerable';
+a[0] = 'is enumerable';
+
+o.propertyIsEnumerable('prop');   // true を返す
+a.propertyIsEnumerable(0);        // true を返す
+```
+
+### ユーザー定義オブジェクトと組み込みオブジェクト
+
+以下の例は、ユーザー定義プロパティと組み込みプロパティの列挙可能性を実証しています。
+
+```js
+var a = ['is enumerable'];
+
+a.propertyIsEnumerable(0);          // true を返す
+a.propertyIsEnumerable('length');   // false を返す
+
+Math.propertyIsEnumerable('random');   // false を返す
+this.propertyIsEnumerable('Math');     // false を返す
+```
+
+<h3 id="Direct_versus_inherited_properties" name="Direct_versus_inherited_properties">直接のプロパティと継承されたプロパティ</h3>
+
+```js
+var a = [];
+a.propertyIsEnumerable('constructor');         // false を返す
+
+function firstConstructor() {
+  this.property = 'is not enumerable';
+}
+
+firstConstructor.prototype.firstMethod = function() {};
+
+function secondConstructor() {
+  this.method = function() { return 'is enumerable'; };
+}
+
+secondConstructor.prototype = new firstConstructor;
+secondConstructor.prototype.constructor = secondConstructor;
+
+var o = new secondConstructor();
+o.arbitraryProperty = 'is enumerable';
+
+o.propertyIsEnumerable('arbitraryProperty');   // true を返す
+o.propertyIsEnumerable('method');              // true を返す
+o.propertyIsEnumerable('property');            // false を返す
+
+o.property = 'is enumerable';
+
+o.propertyIsEnumerable('property');            // true を返す
+
+// これらはすべて false を返します。これは、 (最後の 2 つは for-in で
+// 反復処理可能であるにもかかわらず) propertyIsEnumerable が考慮しない
+// プロトタイプであるためです。
+o.propertyIsEnumerable('prototype');   // false を返す (as of JS 1.8.1/FF3.6)
+o.propertyIsEnumerable('constructor'); // false を返す
+o.propertyIsEnumerable('firstMethod'); // false を返す
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- [列挙可能性とプロパティの所有権](/ja/docs/Web/JavaScript/Enumerability_and_ownership_of_properties)
+- {{jsxref("Statements/for...in", "for...in")}}
+- {{jsxref("Object.keys()")}}
+- {{jsxref("Object.defineProperty()")}}
diff --git a/files/ja/web/javascript/reference/global_objects/promise/allsettled/index.html b/files/ja/web/javascript/reference/global_objects/promise/allsettled/index.html
deleted file mode 100644
index 117abc02c9..0000000000
--- a/files/ja/web/javascript/reference/global_objects/promise/allsettled/index.html
+++ /dev/null
@@ -1,92 +0,0 @@
----
-title: Promise.allSettled()
-slug: Web/JavaScript/Reference/Global_Objects/Promise/allSettled
-tags:
-  - JavaScript
-  - Method
-  - Promise
-  - Reference
-  - allSettled
-  - asynchronous
-  - プロミス
-  - メソッド
-  - 非同期
-translation_of: Web/JavaScript/Reference/Global_Objects/Promise/allSettled
----
-<div>{{JSRef}}</div>
-
-<p><code><strong>Promise.allSettled()</strong></code> メソッドは、与えられたすべてのプロミスが満足したか拒否された後に、それぞれのプロミスの結果を記述した配列オブジェクトで解決されるプロミスを返します。</p>
-
-<p>一般的には、複数の非同期タスクがあり、お互いに依存せずに正常に完了する場合や、各プロミスの結果を常に知りたい場合に使用されます。</p>
-
-<p>これと比較して、 {{jsxref("Promise.all()")}} で返されるプロミスは、タスクがお互いに依存している場合や、タスクのいずれかが拒否されたときにすぐに拒否したい場合にはより適切かもしれません。</p>
-
-<div>{{EmbedInteractiveExample("pages/js/promise-allsettled.html")}}</div>
-
-<h2 id="Syntax" name="Syntax">構文</h2>
-
-<pre class="syntaxbox notranslate"><var>Promise</var>.allSettled(<var>iterable</var>);</pre>
-
-<h3 id="Parameters" name="Parameters">引数</h3>
-
-<dl>
- <dt><code><var>iterable</var></code></dt>
- <dd>{{jsxref("Array")}} などの<a href="/ja/docs/Web/JavaScript/Guide/iterable">反復可能</a>オブジェクトで、それぞれの要素が <code>Promise</code> であるものです。</dd>
-</dl>
-
-<h3 id="Return_value" name="Return_value">返値</h3>
-
-<p><strong>待ち状態</strong>の {{jsxref("Promise")}} で、指定されたプロミスの集合に含まれるすべてのプロミスが、正常に解決されるか拒否されるかのどちらかで完了すると、<strong>非同期に</strong>解決されます。その際、返されたプロミスのハンドラーには、元のプロミスの集合に含まれるの各プロミスの結果を含む配列が入力として渡されます。</p>
-
-<p>ただし、空の反復可能オブジェクトが引数として渡された<strong>場合に限り</strong>、 <code>Promise.allSettled()</code> は空の配列として<strong>解決済みの</strong> <code>Promise</code> オブジェクトを返します。</p>
-
-<p>出力されるそれぞれのオブジェクトには、 <code>status</code> の文字列が存在します。 status が <code>fulfilled</code> であれば、 <code>value</code> が存在します。 status が <code>rejected</code> であれば、 <code>reason</code> が存在します。 value (または reason) はそれぞれのプロミスがどの値で解決 (または拒否) されたかを反映します。</p>
-
-<h2 id="Examples" name="Examples">例</h2>
-
-<h3 id="Using_Promise.allSettled" name="Using_Promise.allSettled">Promise.allSettled の使用</h3>
-
-<pre class="brush: js notranslate">Promise.allSettled([
-  Promise.resolve(33),
-  new Promise(resolve =&gt; setTimeout(() =&gt; resolve(66), 0)),
-  99,
-  Promise.reject(new Error('an error'))
-])
-.then(values =&gt; console.log(values));
-
-// [
-//   {status: "fulfilled", value: 33},
-//   {status: "fulfilled", value: 66},
-//   {status: "fulfilled", value: 99},
-//   {status: "rejected",  reason: Error: an error}
-// ]
-</pre>
-
-<h2 id="Specifications" name="Specifications">仕様書</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">仕様書</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-promise.allsettled', 'Promise.allSettled')}}</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
-
-<p>{{Compat("javascript.builtins.Promise.allSettled")}}</p>
-
-<h2 id="See_also" name="See_also">関連情報</h2>
-
-<ul>
- <li><a href="/ja/docs/Archive/Add-ons/Techniques/Promises">プロミス</a></li>
- <li><a href="/ja/docs/Web/JavaScript/Guide/Using_promises">プロミスの使用</a></li>
- <li><a href="/ja/docs/Learn/JavaScript/Asynchronous/Promises">プロミスを使った行儀のよい非同期のプログラミング</a></li>
- <li>{{jsxref("Promise")}}</li>
- <li>{{jsxref("Promise.all()")}}</li>
-</ul>
diff --git a/files/ja/web/javascript/reference/global_objects/promise/allsettled/index.md b/files/ja/web/javascript/reference/global_objects/promise/allsettled/index.md
new file mode 100644
index 0000000000..e96b5fe08e
--- /dev/null
+++ b/files/ja/web/javascript/reference/global_objects/promise/allsettled/index.md
@@ -0,0 +1,99 @@
+---
+title: Promise.allSettled()
+slug: Web/JavaScript/Reference/Global_Objects/Promise/allSettled
+tags:
+  - JavaScript
+  - メソッド
+  - プロミス
+  - Reference
+  - allSettled
+  - 非同期
+  - Polyfill
+browser-compat: javascript.builtins.Promise.allSettled
+translation_of: Web/JavaScript/Reference/Global_Objects/Promise/allSettled
+---
+{{JSRef}}
+
+**`Promise.allSettled()`** メソッドは、与えられたすべてのプロミスが履行されたか拒否された後に、それぞれのプロミスの結果を記述した配列オブジェクトで解決されるプロミスを返します。
+
+一般的には、複数の非同期タスクがあり、お互いに依存せずに正常に完了する場合や、各プロミスの結果を常に知りたい場合に使用されます。
+
+これに対して、 {{jsxref("Promise.all()")}} で返されるプロミスは、タスクがお互いに依存している場合や、タスクのいずれかが拒否されたときにすぐに拒否したい場合にはより適切かもしれません。
+
+{{EmbedInteractiveExample("pages/js/promise-allsettled.html")}}
+
+## 構文
+
+```js
+Promise.allSettled(iterable);
+```
+
+### 引数
+
+- `iterable`
+  - : {{jsxref("Array")}} などの[反復可能](/ja/docs/Web/JavaScript/Reference/Iteration_protocols)オブジェクトで、それぞれの要素が `Promise` であるものです。
+
+### 返値
+
+**待ち状態**の {{jsxref("Promise")}} で、指定されたプロミスの集合に含まれるすべてのプロミスが、正常に履行されるか拒否されるかのどちらかで完了すると、**非同期に**解決されます。その際、返されたプロミスのハンドラーには、元のプロミスの集合に含まれるの各プロミスの結果を含む配列が入力として渡されます。
+
+ただし、空の反復可能オブジェクトが引数として渡された**場合に限り**、 `Promise.allSettled()` は空の配列として**解決済みの** `Promise` オブジェクトを返します。
+
+出力されるそれぞれのオブジェクトには、 `status` の文字列が存在します。 status が `fulfilled` (履行) であれば、 `value` が存在します。 status が `rejected` (拒否) であれば、 `reason` が存在します。 value (または reason) はそれぞれのプロミスがどの値で履行 (または拒否) されたかを反映します。
+
+## 例
+
+### Promise.allSettled の使用
+
+#### {{JSxRef("Promise.then", "Promise.prototype.then()")}}
+```js
+Promise.allSettled([
+  Promise.resolve(33),
+  new Promise(resolve => setTimeout(() => resolve(66), 0)),
+  99,
+  Promise.reject(new Error('an error'))
+])
+.then(values => console.log(values));
+
+// [
+//   {status: "fulfilled", value: 33},
+//   {status: "fulfilled", value: 66},
+//   {status: "fulfilled", value: 99},
+//   {status: "rejected",  reason: Error: an error}
+// ]
+```
+
+#### {{jsxref("Operators/await", "await")}}
+```js
+const values = await Promise.allSettled([
+  Promise.resolve(33),
+  new Promise(resolve => setTimeout(() => resolve(66), 0)),
+  99,
+  Promise.reject(new Error('an error'))
+])
+console.log(values)
+
+// [
+//   {status: "fulfilled", value: 33},
+//   {status: "fulfilled", value: 66},
+//   {status: "fulfilled", value: 99},
+//   {status: "rejected",  reason: Error: an error}
+// ]
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- `Promise.allSettled` のポリフィルが [`core-js`](https://github.com/zloirock/core-js#ecmascript-promise) で利用できます
+- [Promises](/ja/docs/Archive/Add-ons/Techniques/Promises)
+- [プロミスの使用](/ja/docs/Web/JavaScript/Guide/Using_promises)
+- [プロミスを使った行儀のよい非同期のプログラミング](/ja/docs/Learn/JavaScript/Asynchronous/Promises)
+- {{jsxref("Promise")}}
+- {{jsxref("Promise.all()")}}
diff --git a/files/ja/web/javascript/reference/global_objects/reflect/construct/index.html b/files/ja/web/javascript/reference/global_objects/reflect/construct/index.html
deleted file mode 100644
index 9bfefa49e2..0000000000
--- a/files/ja/web/javascript/reference/global_objects/reflect/construct/index.html
+++ /dev/null
@@ -1,146 +0,0 @@
----
-title: Reflect.construct()
-slug: Web/JavaScript/Reference/Global_Objects/Reflect/construct
-tags:
-  - ECMAScript 2015
-  - JavaScript
-  - Method
-  - Reference
-  - Reflect
-  - メソッド
-translation_of: Web/JavaScript/Reference/Global_Objects/Reflect/construct
----
-<div>{{JSRef}}</div>
-
-<p>静的な <code><strong>Reflect.construct()</strong></code> メソッドは {{jsxref("Operators/new", "new")}} 演算子のように、ただし関数として動作します。これは <code>new target(...args)</code> の呼び出しと同等です。このメソッドはオプションを追加することで、別なプロトタイプを指定することができます。</p>
-
-<div>{{EmbedInteractiveExample("pages/js/reflect-construct.html", "taller")}}</div>
-
-<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p>
-
-<h2 id="Syntax" name="Syntax">構文</h2>
-
-<pre class="syntaxbox">Reflect.construct(<var>target</var>, <var>argumentsList</var>[, <var>newTarget</var>])
-</pre>
-
-<h3 id="Parameters" name="Parameters">引数</h3>
-
-<dl>
- <dt><code><var>target</var></code></dt>
- <dd>呼び出し対象の関数。</dd>
- <dt><code><var>argumentsList</var></code></dt>
- <dd>配列風オブジェクトで、 <code><var>target</var></code> の呼び出しの引数を指定する。</dd>
- <dt><code><var>newTarget</var></code> {{optional_inline}}</dt>
- <dd>プロトタイプを使用するコンストラクター。 <a href="/ja/docs/Web/JavaScript/Reference/Operators/new.target"><code>new.target</code></a> も参照してください。 <code><var>newTarget</var></code> が存在しない場合は、既定値は <code><var>target</var></code> になります。</dd>
-</dl>
-
-<h3 id="Return_value" name="Return_value">返値</h3>
-
-<p><code><var>target</var></code> (または、もしあれば <code><var>newTarget</var></code>) の新しいインスタンスで、 <code><var>target</var></code> に <code><var>argumentsList</var></code> を渡してコンストラクターとして呼び出すことで初期化します。</p>
-
-<h3 id="Exceptions" name="Exceptions">例外</h3>
-
-<p>{{jsxref("TypeError")}}: <code><var>target</var></code> または <code><var>newTarget</var></code> がコンストラクターではない場合。</p>
-
-<h2 id="Description" name="Description">解説</h2>
-
-<p><code>Reflect.construct()</code> によって、可変長引数を指定してコンストラクターを呼び出すことができます。 (これは <a href="/ja/docs/Web/JavaScript/Reference/Operators/Spread_syntax"&gt;スプレッド構文と<a href="/ja/docs/Web/JavaScript/Reference/Operators/new"><code>new</code> 演算子</a> を組み合わせて使用することでも可能です。)</p>
-
-<pre class="brush: js">let obj = new Foo(...<var>args</var>)
-let obj = Reflect.construct(Foo, <var>args</var>)
-</pre>
-
-<h3 id="Reflect.construct_vs_Object.create" name="Reflect.construct_vs_Object.create"><code>Reflect.construct()</code> と <code>Object.create()</code></h3>
-
-<p><code>Reflect</code> が導入される前は、オブジェクトを構築するのにコンストラクターとプロトタイプの任意の組み合わせで {{jsxref("Object.create()")}} を使用して構築することができました。</p>
-
-<pre class="brush: js">function OneClass() {
-    this.name = 'one'
-}
-
-function OtherClass() {
-    this.name = 'other'
-}
-
-// この呼び出しは、
-let obj1 = Reflect.construct(OneClass, <var>args</var>, OtherClass)
-
-// ...これと同じ結果をもたらします。
-let obj2 = Object.create(OtherClass.prototype)
-OneClass.apply(obj2, <var>args</var>)
-
-console.log(obj1.name)  // 'one'
-console.log(obj2.name)  // 'one'
-
-console.log(obj1 instanceof OneClass)  // false
-console.log(obj2 instanceof OneClass)  // false
-
-console.log(obj1 instanceof OtherClass)  // true
-console.log(obj2 instanceof OtherClass)  // true
-</pre>
-
-<p>この2つの手法の最終結果は同じですが、その過程に重要な違いがあります。 <code>Object.create()</code> と {{jsxref("Function.prototype.apply()")}} を使用する場合、 <code>new.target</code> 演算子はコンストラクター内で <code>undefined</code> を返します。これは、 <code>new</code> 演算子を用いないためです。</p>
-
-<p>一方、 <code>Reflect.construct()</code> を呼び出す場合は、 <code>new.target</code> 演算子は、提供されていれば <code><var>newTarget</var></code> を指し、そうでなければ <code>target</code> を指します。</p>
-
-<pre class="brush: js">function OneClass() {
-    console.log('OneClass')
-    console.log(new.target)
-}
-function OtherClass() {
-    console.log('OtherClass')
-    console.log(new.target)
-}
-
-let obj1 = Reflect.construct(OneClass, <var>args</var>)
-// Output:
-//     OneClass
-//     function OneClass { ... }
-
-let obj2 = Reflect.construct(OneClass, <var>args</var>, OtherClass)
-// Output:
-//     OneClass
-//     function OtherClass { ... }
-
-let obj3 = Object.create(OtherClass.prototype);
-OneClass.apply(obj3, <var>args</var>)
-// Output:
-//     OneClass
-//     undefined
-</pre>
-
-<h2 id="Examples" name="Examples">例</h2>
-
-<h3 id="Using_Reflect.construct" name="Using_Reflect.construct"><code>Reflect.construct()</code> の使用</h3>
-
-<pre class="brush: js">let d = Reflect.construct(Date, [1776, 6, 4])
-d instanceof Date  // true
-d.getFullYear()    // 1776
-</pre>
-
-<h2 id="Specifications" name="Specifications">仕様書</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">仕様書</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-reflect.construct', 'Reflect.construct')}}</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
-
-<p>{{Compat("javascript.builtins.Reflect.construct")}}</p>
-
-<h2 id="See_also" name="See_also">関連情報</h2>
-
-<ul>
- <li>{{jsxref("Reflect")}}</li>
- <li>{{jsxref("Operators/new", "new")}}</li>
- <li><code><a href="/ja/docs/Web/JavaScript/Reference/Operators/new.target">new.target</a></code></li>
-</ul>
diff --git a/files/ja/web/javascript/reference/global_objects/reflect/construct/index.md b/files/ja/web/javascript/reference/global_objects/reflect/construct/index.md
new file mode 100644
index 0000000000..5cc425fa6d
--- /dev/null
+++ b/files/ja/web/javascript/reference/global_objects/reflect/construct/index.md
@@ -0,0 +1,148 @@
+---
+title: Reflect.construct()
+slug: Web/JavaScript/Reference/Global_Objects/Reflect/construct
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Method
+  - Reference
+  - Reflect
+  - Polyfill
+browser-compat: javascript.builtins.Reflect.construct
+translation_of: Web/JavaScript/Reference/Global_Objects/Reflect/construct
+---
+{{JSRef}}
+
+静的な **`Reflect.construct()`** メソッドは {{jsxref("Operators/new", "new")}} 演算子のように、ただし関数として動作します。これは `new target(...args)` の呼び出しと同等です。このメソッドはオプションを追加することで、別なプロトタイプを指定することができます。
+
+{{EmbedInteractiveExample("pages/js/reflect-construct.html", "taller")}}
+
+## 構文
+
+```js
+Reflect.construct(target, argumentsList)
+Reflect.construct(target, argumentsList, newTarget)
+```
+
+### 引数
+
+- `target`
+  - : 呼び出し対象の関数。
+- `argumentsList`
+  - : 配列風オブジェクトで、 `target` の呼び出しの引数を指定する。
+- `newTarget` {{optional_inline}}
+  - : プロトタイプを使用するコンストラクター。 [`new.target`](/ja/docs/Web/JavaScript/Reference/Operators/new.target) も参照してください。 `newTarget` が存在しない場合は、既定値は `target` になります。
+
+### 返値
+
+`target` (または、もしあれば `newTarget`) の新しいインスタンスで、 `target` に `argumentsList` を渡してコンストラクターとして呼び出すことで初期化します。
+
+### 例外
+
+{{jsxref("TypeError")}}: `target` または `newTarget` がコンストラクターではない場合。
+
+## 解説
+
+`Reflect.construct()` によって、可変長引数を指定してコンストラクターを呼び出すことができます。 (これは[スプレッド構文](/ja/docs/Web/JavaScript/Reference/Operators/Spread_syntax)と[`new` 演算子](/ja/docs/Web/JavaScript/Reference/Operators/new)を組み合わせて使用することでも可能です。)
+
+```js
+let obj = new Foo(...args)
+let obj = Reflect.construct(Foo, args)
+```
+
+### `Reflect.construct()` と `Object.create()`
+
+`Reflect` が導入される前は、オブジェクトを構築するのにコンストラクターとプロトタイプの任意の組み合わせで {{jsxref("Object.create()")}} を使用して構築することができました。
+
+    function OneClass() {
+        this.name = 'one'
+    }
+
+    function OtherClass() {
+        this.name = 'other'
+    }
+
+    // Calling this:
+    let obj1 = Reflect.construct(OneClass, args, OtherClass)
+
+    // ...has the same result as this:
+    let obj2 = Object.create(OtherClass.prototype)
+    OneClass.apply(obj2, args)
+
+    console.log(obj1.name)  // 'one'
+    console.log(obj2.name)  // 'one'
+
+    console.log(obj1 instanceof OneClass)  // false
+    console.log(obj2 instanceof OneClass)  // false
+
+    console.log(obj1 instanceof OtherClass)  // true
+    console.log(obj2 instanceof OtherClass)  // true
+
+    //Another example to demonstrate below:
+
+    function func1(a, b, c, d) {
+      console.log(arguments[3]);
+    }
+
+    function func2(d, e, f, g) {
+      console.log(arguments[3]);
+    }
+
+    let obj1 = Reflect.construct(func1, ['I', 'Love', 'my', 'India'])
+    obj1
+
+この 2 つの手法の最終結果は同じですが、その過程に重要な違いがあります。 `Object.create()` と {{jsxref("Function.prototype.apply()")}} を使用する場合、 `new.target` 演算子はコンストラクター内で `undefined` を返します。これは、 `new` 演算子を用いないためです。
+
+一方、 `Reflect.construct()` を呼び出す場合は、 `new.target` 演算子は、提供されていれば `newTarget` を指し、そうでなければ `target` を指します。
+
+```js
+function OneClass() {
+    console.log('OneClass')
+    console.log(new.target)
+}
+function OtherClass() {
+    console.log('OtherClass')
+    console.log(new.target)
+}
+
+let obj1 = Reflect.construct(OneClass, args)
+// Output:
+//     OneClass
+//     function OneClass { ... }
+
+let obj2 = Reflect.construct(OneClass, args, OtherClass)
+// Output:
+//     OneClass
+//     function OtherClass { ... }
+
+let obj3 = Object.create(OtherClass.prototype);
+OneClass.apply(obj3, args)
+// Output:
+//     OneClass
+//     undefined
+```
+
+## 例
+
+### `Reflect.construct()` の使用
+
+```js
+let d = Reflect.construct(Date, [1776, 6, 4])
+d instanceof Date  // true
+d.getFullYear()    // 1776
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- `Reflect.construct` のポリフィルが [`core-js`](https://github.com/zloirock/core-js#ecmascript-reflect) にあります
+- {{jsxref("Reflect")}}
+- {{jsxref("Operators/new", "new")}}
+- [`new.target`](/ja/docs/Web/JavaScript/Reference/Operators/new.target)
diff --git a/files/ja/web/javascript/reference/global_objects/regexp/hasindices/index.md b/files/ja/web/javascript/reference/global_objects/regexp/hasindices/index.md
new file mode 100644
index 0000000000..6b8788a480
--- /dev/null
+++ b/files/ja/web/javascript/reference/global_objects/regexp/hasindices/index.md
@@ -0,0 +1,70 @@
+---
+title: RegExp.prototype.hasIndices
+slug: Web/JavaScript/Reference/Global_Objects/RegExp/hasIndices
+tags:
+  - Draft
+  - JavaScript
+  - Property
+  - Prototype
+  - Reference
+  - RegExp
+  - Regular Expressions
+browser-compat: javascript.builtins.RegExp.hasIndices
+translation_of: Web/JavaScript/Reference/Global_Objects/RegExp/hasIndices
+---
+{{JSRef}}
+
+**`hasIndices`** プロパティは、その正規表現で "`d`" フラグが使用されたかどうかを示します。 `hasIndices` はそれぞれの正規表現インスタンスの読み取り専用プロパティです。
+
+{{EmbedInteractiveExample("pages/js/regexp-prototype-hasindices.html")}}
+
+{{JS_Property_Attributes(0, 0, 1)}}
+
+## 解説
+
+`hasIndices` の値は論理型であり、 "`d`" フラグが使用された場合は `true` になります。それ以外の場合は `false` になります。 "`d`" フラグは正規表現による一致の結果に、各キャプチャグループの部分文字列の開始と終了の位置を含めることを示します。
+
+このプロパティを直接変更することはできません。
+
+## 例
+
+### `hasIndices` の使用
+
+```js
+const str1 = 'foo bar foo';
+
+const regex1 = new RegExp('foo', 'gd');
+
+console.log(regex1.hasIndices); // 出力: true
+
+console.log(regex1.exec(str1).indices[0]); // 出力: Array [0, 3]
+console.log(regex1.exec(str1).indices[0]); // 出力: Array [8, 11]
+
+const str2 = 'foo bar foo';
+
+const regex2 = new RegExp('foo');
+
+console.log(regex2.hasIndices); // 出力: false
+
+console.log(regex2.exec(str2).indices); // 出力: undefined
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- {{JSxRef("RegExp.lastIndex")}}
+- {{JSxRef("RegExp.prototype.exec()")}}
+- {{JSxRef("RegExp.prototype.dotAll")}}
+- {{JSxRef("RegExp.prototype.global")}}
+- {{JSxRef("RegExp.prototype.ignoreCase")}}
+- {{JSxRef("RegExp.prototype.multiline")}}
+- {{JSxRef("RegExp.prototype.source")}}
+- {{JSxRef("RegExp.prototype.sticky")}}
+- {{JSxRef("RegExp.prototype.unicode")}}
diff --git a/files/ja/web/javascript/reference/global_objects/regexp/lastindex/index.html b/files/ja/web/javascript/reference/global_objects/regexp/lastindex/index.html
deleted file mode 100644
index ce94abd766..0000000000
--- a/files/ja/web/javascript/reference/global_objects/regexp/lastindex/index.html
+++ /dev/null
@@ -1,87 +0,0 @@
----
-title: RegExp.lastIndex
-slug: Web/JavaScript/Reference/Global_Objects/RegExp/lastIndex
-tags:
-  - JavaScript
-  - Property
-  - Reference
-  - RegExp
-  - Regular Expression
-translation_of: Web/JavaScript/Reference/Global_Objects/RegExp/lastIndex
----
-<div>{{JSRef}}</div>
-
-<p><strong><code>lastIndex</code></strong> は正規表現インスタンスの読み書き可能なプロパティで、次の一致を開始する位置を指定します。</p>
-
-<div>{{EmbedInteractiveExample("pages/js/regexp-lastindex.html")}}</div>
-
-<div>{{js_property_attributes(1, 0, 0)}}</div>
-
-<h2 id="Syntax" name="Syntax">構文</h2>
-
-<pre class="syntaxbox"><code><var>regExpObj</var>.lastIndex</code></pre>
-
-<h2 id="Description" name="Description">解説</h2>
-
-<p>このプロパティは、正規表現インスタンスがグローバル検索を示すために <code>g</code> フラグを使用した場合、または粘着的検索を示すために <code>y</code> フラグを使用した場合にのみ設定されます。以下の規則が適用されます。</p>
-
-<ul>
- <li><code>lastIndex</code> が文字列の長さよりも大きければ、 {{jsxref("RegExp.prototype.test()", "test()")}} および {{jsxref("RegExp.prototype.exec()", "exec()")}} は失敗し、<code>lastIndex</code> は 0 にセットされます。</li>
- <li><code>lastIndex</code> が文字列の長さ以下で、かつ正規表現が空文字列に一致する場合には、正規表現は <code>lastIndex</code> から始まる入力に一致します。</li>
- <li><code>lastIndex</code> が文字列の長さと等しく、かつ、正規表現が空文字列に一致しない場合、正規表現は入力に一致せず、 <code>lastIndex</code> は 0 にリセットされます。</li>
- <li>それ以外の場合は、 <code>lastIndex</code> は直近の一致に続く次の位置に設定されます。</li>
-</ul>
-
-<h2 id="Examples" name="Examples">例</h2>
-
-<h3 id="lastIndex_の使用">lastIndex の使用</h3>
-
-<p>例えば、以下の連続した処理を考えてみてください。:</p>
-
-<pre class="brush: js">var re = /(hi)?/g;
-</pre>
-
-<p>空文字列に一致します。</p>
-
-<pre class="brush: js">console.log(re.exec('hi'));
-console.log(re.lastIndex);
-</pre>
-
-<p><code>lastIndex</code> が 2 になり<code>["hi", "hi"]</code> が返ります。</p>
-
-<pre class="brush: js">console.log(re.exec('hi'));
-console.log(re.lastIndex);
-</pre>
-
-<p>ゼロ番目の要素が一致した文字列なので、 <code>["", undefined]</code> という空配列が返ります。この場合、 <code>lastIndex</code> が 2 であったときに (そして 2 のままである)、 <code>hi</code> の長さが 2 であるので、空文字列になります。</p>
-
-<h2 id="Specifications" name="Specifications">仕様書</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">仕様書</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-properties-of-regexp-instances', 'RegExp.lastIndex')}}</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
-
-<div>
-<p>{{Compat("javascript.builtins.RegExp.lastIndex")}}</p>
-</div>
-
-<h2 id="See_also" name="See_also">関連情報</h2>
-
-<ul>
- <li>{{jsxref("RegExp.prototype.ignoreCase")}}</li>
- <li>{{jsxref("RegExp.prototype.global")}}</li>
- <li>{{jsxref("RegExp.prototype.multiline")}}</li>
- <li>{{jsxref("RegExp.prototype.source")}}</li>
- <li>{{jsxref("RegExp.prototype.sticky")}}</li>
-</ul>
diff --git a/files/ja/web/javascript/reference/global_objects/regexp/lastindex/index.md b/files/ja/web/javascript/reference/global_objects/regexp/lastindex/index.md
new file mode 100644
index 0000000000..5416149a87
--- /dev/null
+++ b/files/ja/web/javascript/reference/global_objects/regexp/lastindex/index.md
@@ -0,0 +1,74 @@
+---
+title: 'RegExp: lastIndex'
+slug: Web/JavaScript/Reference/Global_Objects/RegExp/lastIndex
+tags:
+  - JavaScript
+  - Property
+  - Reference
+  - RegExp
+  - 正規表現
+browser-compat: javascript.builtins.RegExp.lastIndex
+translation_of: Web/JavaScript/Reference/Global_Objects/RegExp/lastIndex
+---
+{{JSRef}}
+
+**`lastIndex`** は {{jsXref("RegExp")}} インスタンスの読み書き可能なプロパティで、次の一致を開始する位置を指定します。
+
+なお、 `lastIndex` は {{jsXref("RegExp")}} プロトタイプのプロパティではありませんが、 {{jsXref("RegExp")}} インスタンスからのみ公開されます。
+
+{{EmbedInteractiveExample("pages/js/regexp-lastindex.html")}}{{js_property_attributes(1, 0, 0)}}
+
+## 解説
+
+このプロパティは、正規表現インスタンスがグローバル検索を示すために `g` フラグを使用した場合、または粘着的検索を示すために `y` フラグを使用した場合にのみ設定されます。 {{jsxref("RegExp.prototype.test()", "test()")}} および {{jsxref("RegExp.prototype.exec()", "exec()")}} が指定された入力に対して呼び出されたとき、以下の規則が適用されます。
+
+- `lastIndex` が入力の長さよりも大きい場合、 `exec()` または `test()` は一致するものを見つけられず、 `lastIndex` は 0 に設定されます。
+- `lastIndex` が入力の長さ以下であった場合、 `exec()` または `test()` は `lastIndex` から一致するものを探そうとします。
+
+  - `exec()` または `test()` が一致するものを見つけた場合 `lastIndex` は入力の中の一致する文字列の末尾の位置に設定されます。
+  - `exec()` または `test()` が一致するものを見つけられなかった場合、 `lastIndex` は 0 に設定されます。
+
+## 例
+
+### lastIndex の使用
+
+例えば、以下の一連の処理を考えてみてください。
+
+```js
+var re = /(hi)?/g;
+```
+
+空文字列に一致します。
+
+```js
+console.log(re.exec('hi'));
+console.log(re.lastIndex);
+```
+
+`["hi", "hi"]` を返し、 `lastIndex` は 2 になります。
+
+```js
+console.log(re.exec('hi'));
+console.log(re.lastIndex);
+```
+
+返値は `["", undefined]` で、 0 番目の要素が一致文字列となる空の配列です。この場合、 `lastIndex` が 2 (現在も 2) であり、`hi` の長さが 2 であるため、空の文字列となります。
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- {{JSxRef("RegExp.prototype.dotAll")}}
+- {{JSxRef("RegExp.prototype.global")}}
+- {{JSxRef("RegExp.prototype.hasIndices")}}
+- {{JSxRef("RegExp.prototype.ignoreCase")}}
+- {{JSxRef("RegExp.prototype.multiline")}}
+- {{JSxRef("RegExp.prototype.source")}}
+- {{JSxRef("RegExp.prototype.sticky")}}
+- {{JSxRef("RegExp.prototype.unicode")}}
diff --git a/files/ja/web/javascript/reference/global_objects/string/substr/index.html b/files/ja/web/javascript/reference/global_objects/string/substr/index.html
deleted file mode 100644
index 725bc665df..0000000000
--- a/files/ja/web/javascript/reference/global_objects/string/substr/index.html
+++ /dev/null
@@ -1,118 +0,0 @@
----
-title: String.prototype.substr()
-slug: Web/JavaScript/Reference/Global_Objects/String/substr
-tags:
-  - Deprecated
-  - JavaScript
-  - Method
-  - Prototype
-  - Reference
-  - String
-  - メソッド
-translation_of: Web/JavaScript/Reference/Global_Objects/String/substr
----
-<div>{{JSRef}}</div>
-
-<p class="seoSummary"><strong><code>substr()</code></strong> メソッドは、文字列の一部を、指定した位置から後方向指定した文字数だけ返します。</p>
-
-<div>{{EmbedInteractiveExample("pages/js/string-substr.html")}}</div>
-
-<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>
-
-<h2 id="Syntax" name="Syntax">構文</h2>
-
-<pre class="syntaxbox notranslate"><var>str</var>.substr(<var>start</var>[, <var>length</var>])</pre>
-
-<h3 id="Parameters" name="Parameters">引数</h3>
-
-<dl>
- <dt><code><var>start</var></code></dt>
- <dd>返却する部分文字列に含まれる最初の文字の位置です。</dd>
- <dt><code><var>length</var></code></dt>
- <dd>任意です。取り出す文字の数です。</dd>
-</dl>
-
-<h3 id="Return_value" name="Return_value">返値</h3>
-
-<p>指定された文字列の指定された部分が入った新しい文字列です。</p>
-
-<h2 id="Description" name="Description">解説</h2>
-
-<p><code>substr()</code> は、 <code><var>str</var></code> のうち <code><var>length</var></code> 文字分を、 <code><var>start</var></code> の位置から数えて抽出します。</p>
-
-<ul>
- <li><code><var>start</var></code> が正の数である場合、文字列の先頭から数えた位置になります。この値は <code><var>str</var>.length</code> が上限になります。</li>
- <li><code><var>start</var></code> が負の数である場合、文字列の末尾から数えた位置になります。この値は <code>-<var>str</var>.length</code> が下限になります。</li>
- <li>注: Microsoft の JScript では、 <code><var>start</var></code> の引数が負の数であっても文字列の末尾からの位置にはなりません。</li>
- <li><code><var>length</var></code> が省略された場合、 <code>substr()</code> は文字列の末尾までの文字を抽出します。</li>
- <li><code><var>length</var></code> が {{jsxref("undefined")}} である場合、 <code>substr()</code> は文字列の末尾までの文字を抽出します。</li>
- <li><code><var>length</var></code> が負の数である場合、 <code>0</code> として扱われます。</li>
- <li><code><var>start</var></code> および <code><var>length</var></code> において、 {{jsxref("NaN")}} は <code>0</code> として扱われます。</li>
-</ul>
-
-<h2 id="Polyfill" name="Polyfill">ポリフィル</h2>
-
-<p>Microsoft の JScript は start の位置として負の数に対応していません。この機能を使用したい場合は、このバグを回避するために、次の互換コードを使用することができます。</p>
-
-<pre class="brush: js notranslate">// only run when the substr() function is broken
-if ('ab'.substr(-1) != 'b') {
-  /**
-   *  Get the substring of a string
-   *  @param  {integer}  start   where to start the substring
-   *  @param  {integer}  length  how many characters to return
-   *  @return {string}
-   */
-  String.prototype.substr = function(substr) {
-    return function(start, length) {
-      // call the original method
-      return substr.call(this,
-      	// did we get a negative start, calculate how much it is from the beginning of the string
-        // adjust the start parameter for negative value
-        start &lt; 0 ? this.length + start : start,
-        length)
-    }
-  }(String.prototype.substr);
-}
-</pre>
-
-<h2 id="Examples" name="Examples">例</h2>
-
-<h3 id="Using_substr" name="Using_substr">substr() の使用</h3>
-
-<pre class="brush: js notranslate">var aString = 'Mozilla';
-
-console.log(aString.substr(0, 1));   // 'M'
-console.log(aString.substr(1, 0));   // ''
-console.log(aString.substr(-1, 1));  // 'a'
-console.log(aString.substr(1, -1));  // ''
-console.log(aString.substr(-3));     // 'lla'
-console.log(aString.substr(1));      // 'ozilla'
-console.log(aString.substr(-20, 2)); // 'Mo'
-console.log(aString.substr(20, 2));  // ''
-</pre>
-
-<h2 id="Specifications" name="Specifications">仕様書</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">仕様書</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-string.prototype.substr', 'String.prototype.substr')}}</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
-
-<p>{{Compat("javascript.builtins.String.substr")}}</p>
-
-<h2 id="See_also" name="See_also">関連情報</h2>
-
-<ul>
- <li>{{jsxref("String.prototype.slice()")}}</li>
- <li>{{jsxref("String.prototype.substring()")}}</li>
-</ul>
diff --git a/files/ja/web/javascript/reference/global_objects/string/substr/index.md b/files/ja/web/javascript/reference/global_objects/string/substr/index.md
new file mode 100644
index 0000000000..a7d7dcc40f
--- /dev/null
+++ b/files/ja/web/javascript/reference/global_objects/string/substr/index.md
@@ -0,0 +1,105 @@
+---
+title: String.prototype.substr()
+slug: Web/JavaScript/Reference/Global_Objects/String/substr
+tags:
+  - Deprecated
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+  - String
+  - メソッド
+browser-compat: javascript.builtins.String.substr
+translation_of: Web/JavaScript/Reference/Global_Objects/String/substr
+---
+{{JSRef}}
+
+**`substr()`** メソッドは、文字列の一部を、指定した位置から後方向に指定した文字数だけ返します。
+
+{{EmbedInteractiveExample("pages/js/string-substr.html")}}
+
+## 構文
+
+```js
+substr(start)
+substr(start, length)
+```
+
+### 引数
+
+- `start`
+  - : 返却する部分文字列に含まれる最初の文字の位置です。
+- `length`
+  - : オプションです。取り出す文字の数です。
+
+### 返値
+
+指定された文字列の指定された部分が入った新しい文字列です。
+
+## 解説
+
+`substr()` は、 `str` のうち `start` の位置から `length` 文字分を数えて抽出します。
+
+- `start` が正の数である場合、文字列の先頭から数えた位置になります。この値は `str.length` が上限になります。
+- `start` が負の数である場合、文字列の末尾から数えた位置になります。この値は `-str.length` が下限になります。
+- メモ: Microsoft の JScript では、 `start` の引数が負の数であっても文字列の末尾からの位置にはなりません。
+- `length` が省略された場合、 `substr()` は文字列の末尾までの文字を抽出します。
+- `length` が {{jsxref("undefined")}} である場合、 `substr()` は文字列の末尾までの文字を抽出します。
+- `length` が負の数である場合、 `0` として扱われます。
+- `start` および `length` において、 {{jsxref("NaN")}} は `0` として扱われます。
+
+## ポリフィル
+
+Microsoft の JScript は start の位置として負の数に対応していません。この機能を JScript で使用する場合は、以下のコードを使用することができます。
+
+```js
+// only run when the substr() function is broken
+if ('ab'.substr(-1) != 'b') {
+  /**
+   *  Get the substring of a string
+   *  @param  {integer}  start   where to start the substring
+   *  @param  {integer}  length  how many characters to return
+   *  @return {string}
+   */
+  String.prototype.substr = function(substr) {
+    return function(start, length) {
+      // call the original method
+      return substr.call(this,
+      	// did we get a negative start, calculate how much it is from the beginning of the string
+        // adjust the start parameter for negative value
+        start < 0 ? this.length + start : start,
+        length)
+    }
+  }(String.prototype.substr);
+}
+```
+
+## 例
+
+### substr() の使用
+
+```js
+var aString = 'Mozilla';
+
+console.log(aString.substr(0, 1));   // 'M'
+console.log(aString.substr(1, 0));   // ''
+console.log(aString.substr(-1, 1));  // 'a'
+console.log(aString.substr(1, -1));  // ''
+console.log(aString.substr(-3));     // 'lla'
+console.log(aString.substr(1));      // 'ozilla'
+console.log(aString.substr(-20, 2)); // 'Mo'
+console.log(aString.substr(20, 2));  // ''
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- {{jsxref("String.prototype.slice()")}}
+- {{jsxref("String.prototype.substring()")}}
diff --git a/files/ja/web/javascript/reference/global_objects/weakmap/clear/index.html b/files/ja/web/javascript/reference/global_objects/weakmap/clear/index.html
deleted file mode 100644
index b538566db1..0000000000
--- a/files/ja/web/javascript/reference/global_objects/weakmap/clear/index.html
+++ /dev/null
@@ -1,51 +0,0 @@
----
-title: WeakMap.prototype.clear()
-slug: Web/JavaScript/Reference/Global_Objects/WeakMap/clear
-tags:
-  - JavaScript
-  - Method
-  - Obsolete
-  - Prototype
-  - WeakMap
-translation_of: Web/JavaScript/Reference/Global_Objects/WeakMap/clear
----
-<div>{{JSRef}} {{obsolete_header}}</div>
-
-<p><code><strong>clear()</strong></code> メソッドは、<code>WeakMap</code> オブジェクトからすべての要素を削除するために使用されていましたが、もはや ECMAScript とその実装に含まれていません。</p>
-
-<h2 id="構文">構文</h2>
-
-<pre class="syntaxbox"><code><em>wm</em>.clear();</code></pre>
-
-<h2 id="例">例</h2>
-
-<h3 id="clear_メソッドを使う"><code>clear</code> メソッドを使う</h3>
-
-<pre class="brush: js;highlight:[10] example-bad">var wm = new WeakMap();
-var obj = {};
-
-wm.set(obj, "foo");
-wm.set(window, "bar");
-
-wm.has(obj); // true
-wm.has(window); // true
-
-wm.clear();
-
-wm.has(obj)  // false
-wm.has(window)  // false
-</pre>
-
-<h2 id="仕様">仕様</h2>
-
-<p>すべての現在の仕様やドラフトでサポートされていません。このメソッドは、リビジョン 28 (October 14, 2014 のバージョン)まで ECMAScript 第 6 版ドラフトでサポートされていました。しかし、最新バージョンのドラフトで削除されました。最終仕様では、サポートされていません。</p>
-
-<h2 id="ブラウザ実装状況">ブラウザ実装状況</h2>
-
-<p>{{Compat("javascript.builtins.WeakMap.clear")}}</p>
-
-<h2 id="関連情報">関連情報</h2>
-
-<ul>
- <li>{{jsxref("WeakMap")}}</li>
-</ul>
diff --git a/files/ja/web/javascript/reference/global_objects/weakmap/clear/index.md b/files/ja/web/javascript/reference/global_objects/weakmap/clear/index.md
new file mode 100644
index 0000000000..18f7ab622b
--- /dev/null
+++ b/files/ja/web/javascript/reference/global_objects/weakmap/clear/index.md
@@ -0,0 +1,53 @@
+---
+title: WeakMap.prototype.clear()
+slug: Web/JavaScript/Reference/Global_Objects/WeakMap/clear
+tags:
+  - JavaScript
+  - Method
+  - Deprecated
+  - Prototype
+  - WeakMap
+browser-compat: javascript.builtins.WeakMap.clear
+translation_of: Web/JavaScript/Reference/Global_Objects/WeakMap/clear
+---
+{{JSRef}} {{deprecated_header}}
+
+**`clear()`** メソッドは、 `WeakMap` オブジェクトからすべての要素を削除するために使用されていましたが、もはや ECMAScript とその実装に含まれていません。
+
+## 構文
+
+```js
+clear()
+```
+
+## 例
+
+### `clear` メソッドの使用
+
+```js example-bad
+var wm = new WeakMap();
+var obj = {};
+
+wm.set(obj, 'foo');
+wm.set(window, 'bar');
+
+wm.has(obj); // true
+wm.has(window); // true
+
+wm.clear();
+
+wm.has(obj)  // false
+wm.has(window)  // false
+```
+
+## 仕様書
+
+どの標準にも含まれていません。
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- {{jsxref("WeakMap")}}
diff --git a/files/ja/web/javascript/reference/global_objects/webassembly/instantiatestreaming/index.html b/files/ja/web/javascript/reference/global_objects/webassembly/instantiatestreaming/index.html
deleted file mode 100644
index fb3ba701c1..0000000000
--- a/files/ja/web/javascript/reference/global_objects/webassembly/instantiatestreaming/index.html
+++ /dev/null
@@ -1,83 +0,0 @@
----
-title: WebAssembly.instantiateStreaming()
-slug: Web/JavaScript/Reference/Global_Objects/WebAssembly/instantiateStreaming
-translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/instantiateStreaming
----
-<div>{{JSRef}} {{SeeCompatTable}}</div>
-
-<p><strong><code>WebAssembly.instantiateStreaming()</code></strong> 関数はソースのストリームから直接 WebAssembly モジュールをコンパイルしてインスタンス化します。</p>
-
-<h2 id="構文">構文</h2>
-
-<pre class="syntaxbox">Promise&lt;ResultObject&gt; WebAssembly.instantiateStreaming(<em>source</em>, <em>importObject</em>);</pre>
-
-<h3 id="パラメータ">パラメータ</h3>
-
-<dl>
- <dt><em>source</em></dt>
- <dd>コンパイルしてインスタンス化する .wasm モジュールのソースを表す {{domxref("Response")}} オブジェクトか、それをfulfillするプロミス。</dd>
- <dt><em>importObject</em> {{optional_inline}}</dt>
- <dd>関数や {{jsxref("WebAssembly.Module")}} オブジェクトなどの新しく生成される <code>Instance</code> にインポートされる値を持つオブジェクト。モジュール内で宣言されたインポートそれぞれに対応するプロパティが存在する必要があります。そうでない場合、{{jsxref("WebAssembly.LinkError")}} がスローされます。</dd>
-</dl>
-
-<h3 id="戻り値">戻り値</h3>
-
-<p>解決時に次の2つのフィールドを持つ <code>ResultObject</code> を渡す <code>Promise</code>:</p>
-
-<ul>
- <li><code>module</code>: コンパイルされた {{jsxref("WebAssembly.Module")}} オブジェクト。この <code>Module</code> は再度インスタンス化することや、<a href="/en-US/docs/Web/API/Worker/postMessage">postMessage()</a> 経由で共有したり、<a href="/en-US/docs/WebAssembly/Caching_modules">IndexedDBにキャッシュ</a>することができます。</li>
- <li><code>instance</code>: 全ての <a href="/en-US/docs/WebAssembly/Exported_functions">エクスポートされたWebAssembly関数</a> を含む {{jsxref("WebAssembly.Instance")}} オブジェクト。</li>
-</ul>
-
-<h3 id="例外">例外</h3>
-
-<ul>
- <li>いずれかのパラメータが正しい型、または構造でない場合、{{jsxref("TypeError")}} がスローされます。</li>
- <li>失敗した場合、プロミスは失敗の原因に応じて {{jsxref("WebAssembly.CompileError")}}、{{jsxref("WebAssembly.LinkError")}} または {{jsxref("WebAssembly.RuntimeError")}} を持って棄却されます。</li>
-</ul>
-
-<h2 id="例">例</h2>
-
-<p>次の例 (Github上のデモ <a href="https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/instantiate-streaming.html">instantiate-streaming.html</a> と、 <a href="https://mdn.github.io/webassembly-examples/js-api-examples/instantiate-streaming.html">動作例</a> を参照してください) では、ソースから .wasm モジュールを直接コンパイルしてインスタンス化しています。プロミスは <code>ResultObject</code> で fulfill されます。<code>instantiateStreaming()</code>  関数は {{domxref("Response")}} オブジェクトを渡すプロミスを受け取るので、直接 {{domxref("WindowOrWorkerGlobalScope.fetch()")}} 呼び出し結果を渡すことができます。</p>
-
-<pre class="brush: js">var importObject = { imports: { imported_func: arg =&gt; console.log(arg) } };
-
-WebAssembly.instantiateStreaming(fetch('simple.wasm'), importObject)
-.then(obj =&gt; obj.instance.exports.exported_func());</pre>
-
-<p>最後に <code>ResultObject</code> が持つ instance メンバーにアクセスして、エクスポートされた関数を実行しています。</p>
-
-<h2 id="仕様">仕様</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Specification</th>
-   <th scope="col">Status</th>
-   <th scope="col">Comment</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('WebAssembly Embedding', '#webassemblyinstantiatestreaming', 'instantiateStreaming()')}}</td>
-   <td>{{Spec2('WebAssembly Embedding')}}</td>
-   <td>初回ドラフト定義</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザ実装状況</h2>
-
-<div>
-
-
-<p>{{Compat("javascript.builtins.WebAssembly.instantiateStreaming")}}</p>
-</div>
-
-<h2 id="関連情報">関連情報</h2>
-
-<ul>
- <li><a href="/ja/docs/WebAssembly">WebAssembly</a> overview page</li>
- <li><a href="/ja/docs/WebAssembly/Concepts">WebAssemblyのコンセプト</a></li>
- <li><a href="/ja/docs/WebAssembly/Using_the_JavaScript_API">WebAssembly JavaScript API を使用する</a></li>
-</ul>
diff --git a/files/ja/web/javascript/reference/global_objects/webassembly/instantiatestreaming/index.md b/files/ja/web/javascript/reference/global_objects/webassembly/instantiatestreaming/index.md
new file mode 100644
index 0000000000..d157a5c651
--- /dev/null
+++ b/files/ja/web/javascript/reference/global_objects/webassembly/instantiatestreaming/index.md
@@ -0,0 +1,73 @@
+---
+title: WebAssembly.instantiateStreaming()
+slug: Web/JavaScript/Reference/Global_Objects/WebAssembly/instantiateStreaming
+tags:
+  - API
+  - JavaScript
+  - Method
+  - Object
+  - Reference
+  - WebAssembly
+  - instantiate
+  - instantiateStreaming
+  - streaming
+browser-compat: javascript.builtins.WebAssembly.instantiateStreaming
+translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/instantiateStreaming
+---
+{{JSRef}}
+
+**`WebAssembly.instantiateStreaming()`** 関数は、ソースのストリームから直接 WebAssembly モジュールをコンパイルしてインスタンス化します。これは、 wasm コードをロードするための最も効率的で最適な方法です。
+
+```js
+WebAssembly.instantiateStreaming(source, importObject)
+```
+
+### 引数
+
+- _source_
+  - : [`Response`](/ja/docs/Web/API/Response "Response は Fetch API のインターフェースで、リクエストに対するレスポンスを表します。") オブジェクト、またはそれで解決するプロミスで、コンパイルしてインスタンス化する .wasm モジュールのソースを表します。
+- _importObject_ {{optional_inline}}
+  - : 関数や {{jsxref("WebAssembly.Memory")}} オブジェクトなど、新しく生成される `Instance` にインポートされる値を持つオブジェクト。コンパイルされたモジュールの宣言されたインポートそれぞれに対応するプロパティが存在する必要があります。そうでない場合、[`WebAssembly.LinkError`](/ja/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/LinkError) が発生します。
+
+### 返値
+
+`Promise` で、次の 2 つのフィールドを持つ `ResultObject` で解決します。
+
+- `module`: コンパイルされた {{jsxref("WebAssembly.Module")}} オブジェクト。この `Module` は再度インスタンス化することや、[postMessage()](/ja/docs/Web/API/Worker/postMessage) 経由で共有することができます。
+- `instance`: {{jsxref("WebAssembly.Instance")}} オブジェクトで、すべての[エクスポートされた WebAssembly 関数](/ja/docs/WebAssembly/Exported_functions)を含みます。
+
+### 例外
+
+- いずれかの引数が正しい型または構造でない場合、{{jsxref("TypeError")}} が発生します。
+- 失敗した場合、プロミスは失敗の原因に応じて {{jsxref("WebAssembly.CompileError")}}、{{jsxref("WebAssembly.LinkError")}}、{{jsxref("WebAssembly.RuntimeError")}} をもって拒否されます。
+
+## 例
+
+### ストリーミングのインスタンス化
+
+次の例 (Github上のデモ [instantiate-streaming.html](https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/instantiate-streaming.html) と、[動作例](https://mdn.github.io/webassembly-examples/js-api-examples/instantiate-streaming.html)を参照してください) では、ソースから .wasm モジュールを直接コンパイルしてインスタンス化しています。プロミスは `ResultObject` で充足されます。`instantiateStreaming()` 関数は [`Response`](/ja/docs/Web/API/Response "Response は Fetch API のインターフェースで、リクエストに対するレスポンスを表します。") オブジェクトを渡すプロミスを受け取るので、直接 [`WindowOrWorkerGlobalScope.fetch()`](/ja/docs/Web/API/WindowOrWorkerGlobalScope/fetch "WindowOrWorkerGlobalScope ミックスインの fetch() メソッドは、ネットワークからリソースをフェッチするプロセスを開始し、レスポンスが利用可能になると履行される約束を返します。") 呼び出し結果を渡すことができます。
+
+```js
+var importObject = { imports: { imported_func: arg => console.log(arg) } };
+
+WebAssembly.instantiateStreaming(fetch('simple.wasm'), importObject)
+.then(obj => obj.instance.exports.exported_func());
+```
+
+最後に `ResultObject` が持つ instance メンバーにアクセスして、エクスポートされた関数を実行しています。
+
+> **Note:** これを動作するようにするには、サーバが `.wasm` ファイルを `application/wasm` の MIME タイプで返す必要があります。
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- [WebAssembly](/ja/docs/WebAssembly) 概要ページ
+- [WebAssembly の概念](/ja/docs/WebAssembly/Concepts)
+- [WebAssembly JavaScript API の使用](/ja/docs/WebAssembly/Using_the_JavaScript_API)
diff --git a/files/ja/web/javascript/reference/global_objects/webassembly/memory/index.html b/files/ja/web/javascript/reference/global_objects/webassembly/memory/index.html
index 9c93cf21cc..4064df7666 100644
--- a/files/ja/web/javascript/reference/global_objects/webassembly/memory/index.html
+++ b/files/ja/web/javascript/reference/global_objects/webassembly/memory/index.html
@@ -32,7 +32,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/Memory
  <dt><code>Memory.prototype.constructor</code></dt>
  <dd>このオブジェクトのインスタンスを生成した関数を返します。既定では {{jsxref("WebAssembly.Memory()")}} コンストラクターです。</dd>
  <dt>{{jsxref("WebAssembly/Memory/buffer","Memory.prototype.buffer")}}</dt>
- <dd>メモリに格納されているバッファーを返すアクセサープロパティです。/dd&gt;</dd>
+ <dd>メモリに格納されているバッファーを返すアクセサープロパティです。</dd>
 </dl>
 
 <h3 id="Instance_methods" name="Instance_methods">インスタンスメソッド</h3>
diff --git a/files/ja/web/javascript/reference/global_objects/webassembly/validate/index.html b/files/ja/web/javascript/reference/global_objects/webassembly/validate/index.html
deleted file mode 100644
index 14a9631831..0000000000
--- a/files/ja/web/javascript/reference/global_objects/webassembly/validate/index.html
+++ /dev/null
@@ -1,71 +0,0 @@
----
-title: WebAssembly.validate()
-slug: Web/JavaScript/Reference/Global_Objects/WebAssembly/validate
-translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/validate
----
-<div>{{JSRef}} {{SeeCompatTable}}</div>
-
-<p><strong><code>WebAssembly.validate()</code></strong> 関数は WebAssembly バイナリコードを含む <a href="/ja/docs/Web/JavaScript/Typed_arrays">型付き配列</a> をバリデーションし、バイト列が有効な wasm モジュール (<code>true</code>) か、そうでないか (<code>false</code>) を返します。</p>
-
-<h2 id="構文">構文</h2>
-
-<pre class="syntax">WebAssembly.validate(bufferSource);</pre>
-
-<h3 id="パラメータ">パラメータ</h3>
-
-<dl>
- <dt><em>bufferSource</em></dt>
- <dd>バリデーションする WebAssembly バイナリコードを含む <a href="/ja/docs/Web/JavaScript/Typed_arrays">型付き配列</a> か <a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer">ArrayBuffer</a> 。</dd>
-</dl>
-
-<h3 id="戻り値">戻り値</h3>
-
-<p>有効な wasm モジュール (<code>true</code>) か、そうでないか (<code>false</code>) を示す boolean 値。</p>
-
-<h3 id="例外">例外</h3>
-
-<p><code>bufferSource</code> が <a href="/ja/docs/Web/JavaScript/Typed_arrays">型付き配列</a> か <a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer">ArrayBuffer</a> でない場合、{{jsxref("TypeError")}} がスローされます。</p>
-
-<h2 id="例">例</h2>
-
-<p>以下の例 (validate.html の <a href="https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/validate.html">ソースコード</a> と <a href="https://mdn.github.io/webassembly-examples/js-api-examples/validate.html">動作例</a> をご確認ください) は .wasm モジュールをフェッチして型付き配列に変換します。次に、 <code>validate()</code> メソッドを使用してモジュールが有効かどうかをチェックします。</p>
-
-<pre class="brush: js">fetch('simple.wasm').then(response =&gt;
-  response.arrayBuffer()
-).then(function(bytes) {
-  var valid = WebAssembly.validate(bytes);
-  console.log("The given bytes are "
-    + (valid ? "" : "not ") + "a valid wasm module");
-});
-</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('WebAssembly JS', '#webassemblyvalidate', 'validate()')}}</td>
-   <td>{{Spec2('WebAssembly JS')}}</td>
-   <td>初回ドラフト定義。</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザ実装状況</h2>
-
-<div>{{Compat("javascript.builtins.WebAssembly.validate")}}</div>
-
-<h2 id="関連情報">関連情報</h2>
-
-<ul>
- <li><a href="/ja/docs/WebAssembly">WebAssembly</a> overview page</li>
- <li><a href="/ja/docs/WebAssembly/Concepts">WebAssembly のコンセプト</a></li>
- <li><a href="/ja/docs/WebAssembly/Using_the_JavaScript_API">WebAssembly JavaScript API を使用する</a></li>
-</ul>
diff --git a/files/ja/web/javascript/reference/global_objects/webassembly/validate/index.md b/files/ja/web/javascript/reference/global_objects/webassembly/validate/index.md
new file mode 100644
index 0000000000..5f979a4411
--- /dev/null
+++ b/files/ja/web/javascript/reference/global_objects/webassembly/validate/index.md
@@ -0,0 +1,66 @@
+---
+title: WebAssembly.validate()
+slug: Web/JavaScript/Reference/Global_Objects/WebAssembly/validate
+tags:
+  - API
+  - JavaScript
+  - Method
+  - Object
+  - Reference
+  - WebAssembly
+  - validate
+browser-compat: javascript.builtins.WebAssembly.validate
+translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/validate
+---
+{{JSRef}}
+
+**`WebAssembly.validate()`** 関数は WebAssembly バイナリーコードの[型付き配列](/ja/docs/Web/JavaScript/Typed_arrays)を検証し、そのバイト列が有効な wasm モジュールか (`true`)、そうでないか (`false`) を返します。
+
+## 構文
+
+```js
+WebAssembly.validate(bufferSource)
+```
+
+### 引数
+
+- `bufferSource`
+  - : 検証する WebAssembly バイナリーコードを含む[型付き配列](/ja/docs/Web/JavaScript/Typed_arrays)または [`ArrayBuffer`](/ja/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer)。
+
+### 返値
+
+有効な wasm モジュールであるか (`true`)、そうでないか (`false`) を示す論理値です。
+
+### 例外
+
+`bufferSource` が[型付き配列](/ja/docs/Web/JavaScript/Typed_arrays)または [`ArrayBuffer`](/ja/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer) でない場合、{{jsxref("TypeError")}} が発生します。
+
+## 例
+
+### validate の使用
+
+以下の例 (`validate.html` の[ソースコード](https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/validate.html)と[動作例](https://mdn.github.io/webassembly-examples/js-api-examples/validate.html) をご確認ください) は .wasm モジュールを読み取って型付き配列に変換します。次に、 `validate()` メソッドを使用してモジュールが有効かどうかをチェックします。</p>
+
+```js
+fetch('simple.wasm').then(response =>
+  response.arrayBuffer()
+).then(function(bytes) {
+  var valid = WebAssembly.validate(bytes);
+  console.log("The given bytes are "
+    + (valid ? "" : "not ") + "a valid wasm module");
+});
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- [WebAssembly](/ja/docs/WebAssembly) 概要ページ
+- [WebAssembly の概念](/ja/docs/WebAssembly/Concepts)
+- [WebAssembly JavaScript API の使用](/ja/docs/WebAssembly/Using_the_JavaScript_API)
diff --git a/files/ja/web/javascript/reference/operators/function_star_/index.html b/files/ja/web/javascript/reference/operators/function_star_/index.html
deleted file mode 100644
index 3518adf63b..0000000000
--- a/files/ja/web/javascript/reference/operators/function_star_/index.html
+++ /dev/null
@@ -1,86 +0,0 @@
----
-title: function* 式
-slug: Web/JavaScript/Reference/Operators/function*
-tags:
-  - ECMAScript6
-  - Function
-  - Iterator
-  - JavaScript
-  - Operator
-  - Primary Expression
-  - 演算子
-  - 関数
-translation_of: Web/JavaScript/Reference/Operators/function*
----
-<div>{{jsSidebar("Operators")}}</div>
-
-<p><strong><code>function*</code></strong> キーワードは、式の中でジェネレーター関数を定義するために使用することができます。</p>
-
-<div>{{EmbedInteractiveExample("pages/js/expressions-functionasteriskexpression.html", "taller")}}</div>
-
-<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、<a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>
-
-<h2 id="Syntax" name="Syntax">構文</h2>
-
-<pre class="syntaxbox notranslate">function* [<var>name</var>]([<var>param1</var>[, <var>param2[</var>, ..., <var>paramN</var>]]]) {
-   <var>statements</var>
-}</pre>
-
-<h3 id="Parameters" name="Parameters">引数</h3>
-
-<dl>
- <dt><code><var>name</var></code> {{optional_inline}}</dt>
- <dd>関数名。省略可。省略した場合、関数は<em>無名関数</em>として認識されます。名前は関数本体のみにローカルです。</dd>
- <dt><code><var>paramN</var></code><var> </var> {{optional_inline}}</dt>
- <dd>関数に渡される引数の名前。関数は最大 255 の引数を持ち得ます。</dd>
- <dt><code><var>statements</var></code></dt>
- <dd>関数の本体を構成するステートメント。</dd>
-</dl>
-
-<h2 id="Description" name="Description">解説</h2>
-
-<p><code>function*</code> 式は {{jsxref('Statements/function*', 'function* 文', "", 1)}}ととてもよく似ており、構文もほとんど同じです。<code>function*</code> 式と <code>function*</code> 文の主な違いは、<code>function*</code> 式で<em>無名</em>ジェネレーター関数を生成するには<em>関数名</em>が省略できる点です。詳細は {{jsxref("Functions", "functions")}} をご覧ください。</p>
-
-<h2 id="Examples" name="Examples">例</h2>
-
-<h3 id="Using_function*" name="Using_function*">function* を使用する</h3>
-
-<p>次の例では、無名ジェネレーター関数を定義し、<code>x</code> に割り当てます。関数は引数の二乗をもたらします:</p>
-
-<pre class="brush: js notranslate">let x = function*(y) {
-   yield y * y;
-};
-</pre>
-
-<h2 id="Specifications" name="Specifications">仕様</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">仕様書</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-generator-function-definitions', 'function*')}}</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
-
-<p>{{Compat("javascript.operators.function_star")}}</p>
-
-<h2 id="See_also" name="See_also">関連情報</h2>
-
-<ul>
- <li>{{jsxref("Statements/function*", "function*")}} 文</li>
- <li>{{jsxref("GeneratorFunction")}} オブジェクト</li>
- <li><a href="/ja/docs/Web/JavaScript/Reference/Iteration_protocols">Iterator プロトコル</a></li>
- <li>{{jsxref("Operators/yield", "yield")}}</li>
- <li>{{jsxref("Operators/yield*", "yield*")}}</li>
- <li>{{jsxref("Function")}} オブジェクト</li>
- <li>{{jsxref("Statements/function", "function")}} 文</li>
- <li>{{jsxref("Operators/function", "function")}} 式</li>
- <li>{{jsxref("Functions_and_function_scope", "関数と関数スコープ", "", 1)}}</li>
-</ul>
diff --git a/files/ja/web/javascript/reference/operators/function_star_/index.md b/files/ja/web/javascript/reference/operators/function_star_/index.md
new file mode 100644
index 0000000000..19a8d1404b
--- /dev/null
+++ b/files/ja/web/javascript/reference/operators/function_star_/index.md
@@ -0,0 +1,73 @@
+---
+title: function* 式
+slug: Web/JavaScript/Reference/Operators/function*
+tags:
+  - ECMAScript 2015
+  - Function
+  - Iterator
+  - JavaScript
+  - Language feature
+  - Operator
+  - Primary Expression
+browser-compat: javascript.operators.generator_function
+translation_of: Web/JavaScript/Reference/Operators/function*
+---
+{{jsSidebar("Operators")}}</div>
+
+**`function*`** キーワードは、式の中でジェネレーター関数を定義するために使用することができます。
+
+{{EmbedInteractiveExample("pages/js/expressions-functionasteriskexpression.html",
+   "taller")}}
+
+## 構文
+
+```js
+function* [name]([param1[, param2[, ..., paramN]]]) {
+  statements
+}
+```
+
+### 引数
+
+- `name` {{optional_inline}}
+  - : 関数名。省略可。省略した場合、関数は*無名関数*として認識されます。名前は関数本体のみにローカルです。
+- `paramN` {{optional_inline}}
+  - : 関数に渡される引数の名前。関数は最大 255 個の引数を持つことができます。
+- `statements`
+  - : 関数の本体を構成する文。
+
+## 解説
+
+`function*` 式は {{jsxref('Statements/function*', 'function* 文', "", 1)}}ととてもよく似ており、構文もほとんど同じです。`function*` 式と `function*` 文の主な違いは、`function*` 式で*無名*ジェネレーター関数を生成する場合は*関数名*が省略できる点です。詳細は {{jsxref("Functions", "functions")}} をご覧ください。
+
+## 例
+
+### function* の使用
+
+次の例では、無名ジェネレーター関数を定義し、`x` に代入します。関数は引数の二乗を生成します。
+
+```js
+let x = function*(y) {
+   yield y * y;
+};
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- {{jsxref("Statements/function*", "function*")}} 文
+- {{jsxref("GeneratorFunction")}} オブジェクト
+- [反復プロトコル](/ja/docs/Web/JavaScript/Reference/Iteration_protocols)
+- {{jsxref("Operators/yield", "yield")}}
+- {{jsxref("Operators/yield*", "yield*")}}
+- {{jsxref("Function")}} オブジェクト
+- {{jsxref("Statements/function", "function")}} 文
+- {{jsxref("Operators/function", "function")}} 式
+- {{jsxref("Functions_and_function_scope", "関数と関数スコープ", "", 1)}}
diff --git a/files/ja/web/javascript/reference/operators/optional_chaining/index.html b/files/ja/web/javascript/reference/operators/optional_chaining/index.html
deleted file mode 100644
index b3eee3eb1f..0000000000
--- a/files/ja/web/javascript/reference/operators/optional_chaining/index.html
+++ /dev/null
@@ -1,195 +0,0 @@
----
-title: Optional chaining (?.)
-slug: Web/JavaScript/Reference/Operators/Optional_chaining
-tags:
-  - Chaining
-  - JavaScript
-  - Language feature
-  - Operator
-  - Optional chaining
-  - Reference
-translation_of: Web/JavaScript/Reference/Operators/Optional_chaining
----
-<div>{{JSSidebar("Operators")}}</div>
-
-<p><ruby><strong>オプショナルチェイニング</strong><rp> (</rp><rt>optional chaining</rt><rp>) </rp></ruby>演算子 <strong><code>?.</code></strong> は、接続されたオブジェクトチェーンの深くに位置するプロパティの値を、チェーン内の各参照が正しいかどうかを明示的に確認せずに読み込むことを可能にします。 <span class="seoSummary"><code>?.</code> 演算子の機能は <code>.</code> チェーン演算子と似ていますが、参照が {{glossary("nullish")}} ({{JSxRef("null")}} または {{JSxRef("undefined")}}) の場合にエラーとなるのではなく、式が短絡され <code>undefined</code> が返されるところが異なります。</span> 関数呼び出しで使用すると、与えられた関数が存在しない場合、 <code>undefined</code> を返します。</p>
-
-<p>これは、参照が失われた可能性のある連結されたプロパティにアクセスする時、結果的に短く単純な式になります。また、必要なプロパティの存在が保証されていない場合にオブジェクトのコンテンツを探索するのにも役立ちます。</p>
-
-<p>オプショナルチェイニングは、存在しないルートオブジェクトでは使用できません。<code>if (typeof a == "undefined")</code> のようなチェックを置き換えるものではありません。</p>
-
-<div>{{EmbedInteractiveExample("pages/js/expressions-optionalchainingoperator.html", "taller")}}</div>
-
-<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>
-
-<h2 id="Syntax" name="Syntax">構文</h2>
-
-<pre class="syntaxbox notranslate"><var>obj</var>?.<var>prop</var>
-<var>obj</var>?.[<var>expr</var>]
-<em>arr</em>?.[<var>index</var>]
-<var>func</var>?.(<var>args</var>)
-</pre>
-
-<h2 id="Description" name="Description">解説</h2>
-
-<p>オプショナルチェイニング演算子は、参照や関数が <code>undefined</code> または <code>null</code> である可能性がある場合でも、接続されたオブジェクトの値に簡単にアクセスする手段を提供します。</p>
-
-<p>たとえば、入れ子構造を持つオブジェクト <code>obj</code> を考えましょう。オプショナルチェイニング演算子なしで深い入れ子になったサブプロパティにアクセスするには、次のように、各プロパティ間の参照を確認する必要があります:</p>
-
-<pre class="brush: js notranslate">let nestedProp = obj.first &amp;&amp; obj.first.second;</pre>
-
-<p><code>obj.first.second</code> の値にアクセスする前に、 <code>obj.first</code> の値が <code>null</code> または <code>undefined</code> でないことを確認します。これにより、 <code>obj.first</code> をテストせずに直接 <code>obj.first.second</code> にアクセスしたときに起きるエラーを防ぐことができます。</p>
-
-<p>しかし、オプショナルチェイニング演算子 (<code>?.</code>) を使えば、<code>obj.first.second</code> にアクセスしようとする前に <code>obj.first</code> の状態を明示的にテストする必要がなくなります:</p>
-
-<pre class="brush: js notranslate">let nestedProp = obj.first?.second;</pre>
-
-<p><code>?.</code> を <code>.</code> の代わりに用いることで、 JavaScript が <code>obj.first.second</code> にアクセスしようとする前に <code>obj.first</code> が <code>null</code> または <code>undefined</code> でないことを暗黙的に確かめるようになります。<code>obj.first</code> が <code>null</code> または <code>undefined</code> であった場合、式が自動的に短絡され、 <code>undefined</code> が返ります。</p>
-
-<p>これは、一時的な変数が作成されないことを除き、次の式と等価です。</p>
-
-<pre class="brush: js notranslate">let temp = obj.first;
-let nestedProp = ((temp === null || temp === undefined) ? undefined : temp.second);
-</pre>
-
-<h3 id="Optional_chaining_with_function_calls" name="Optional_chaining_with_function_calls">関数呼び出しでオプショナルチェイニング演算子を使う</h3>
-
-<p>存在しない可能性がある関数の呼び出しを試行するときに、オプショナルチェイニングを使うことができます。これはたとえば、ユーザーのデバイス上で使えなかったり、実装が古かったりするために使えなかったりする可能性がある API を使うときに役立ちます。</p>
-
-<p>関数呼び出しでオプショナルチェイニング演算子を用いた場合、メソッドが見つからないときは自動的に <code>undefined</code> が返ります。例外はスローされません。</p>
-
-<pre class="brush: js notranslate">let result = someInterface.customMethod?.();</pre>
-
-<div class="blockIndicator note">
-<p><strong>注意:</strong> 上記のようなプロパティの関数がない場合に、<code>?.</code> を使用すると {{JSxRef("TypeError")}} 例外が発生します (<code>someInterface.customMethod is not a function</code>)。</p>
-</div>
-
-<div class="blockIndicator note">
-<p><strong>注意:</strong> <code>someInterface</code> 自体が <code>null</code> または <code>undefined</code> の場合にも、{{JSxRef("TypeError")}} 例外が発生します (<code>someInterface is null</code>)。<code>someInterface</code> 自体が <code>null</code> または <code>undefined</code> の可能性がある場合は、次の位置にも <code>?.</code> を使用しなければなりません。<code>someInterface?.customMethod?.()</code></p>
-</div>
-
-<h4 id="Dealing_with_optional_callbacks_or_event_handlers" name="Dealing_with_optional_callbacks_or_event_handlers">省略可能なコールバックやイベントハンドラを扱う</h4>
-
-<p>コールバックを使う場合や、オブジェクトからメソッドを<a href="/ja/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">分割代入</a>を利用して取り出す場合に、存在しない値がある可能性があり、その存在を検証するまで関数として呼び出せません。その場合 <code>?.</code> を利用することで、検証の必要性を回避できます。</p>
-
-<pre class="brush: js notranslate">// Written as of ES2019
-function doSomething(onContent, onError) {
-  try {
-    // ... do something with the data
-  }
-  catch (err) {
-    if (onError) { // Testing if onError really exists
-      onError(err.message);
-    }
-  }
-}
-</pre>
-
-<pre class="brush: js notranslate">// Using optional chaining with function calls
-function doSomething(onContent, onError) {
-  try {
-   // ... do something with the data
-  }
-  catch (err) {
-    onError?.(err.message); // no exception if onError is undefined
-  }
-}
-</pre>
-
-<h3 id="Optional_chaining_with_expressions" name="Optional_chaining_with_expressions">オプショナルチェイニング演算子を式と組み合わせて使う</h3>
-
-<p><a href="/ja/docs/Web/JavaScript/Reference/Operators/Property_Accessors#Bracket_notation">ブラケット表記法</a>とオプショナルチェイニング演算子を組み合わせることもできます。</p>
-
-<pre class="brush: js notranslate">let nestedProp = obj?.['prop' + 'Name'];
-</pre>
-
-<h3 id="Optional_chaining_not_valid_on_the_left-hand_side_of_an_assignment" name="Optional_chaining_not_valid_on_the_left-hand_side_of_an_assignment">オプショナルチェイニング演算子は代入の左辺値では有効にならない</h3>
-
-<pre class="brush: js notranslate"><code>let object = {};
-object?.property = 1; // Uncaught SyntaxError: Invalid left-hand side in assignment</code></pre>
-
-<h3 id="オプショナルチェイニングにより配列の要素にアクセス">オプショナルチェイニングにより配列の要素にアクセス</h3>
-
-<pre class="brush: js notranslate">let arrayItem = arr?.[42];</pre>
-
-<h2 id="Examples" name="Examples">例</h2>
-
-<h3 id="Basic_example" name="Basic_example">基本的な例</h3>
-
-<p>次の例では、マップに存在しない <code>bar</code> メンバの <code>name</code> プロパティを取得しようとしています。したがって、結果は <code>undefined</code> になります。</p>
-
-<pre class="brush: js notranslate">let myMap = new Map();
-myMap.set("foo", {name: "baz", desc: "inga"});
-
-let nameBar = myMap.get("bar")?.name;</pre>
-
-<h3 id="Short-circuiting_evaluation" name="Short-circuiting_evaluation">短絡評価</h3>
-
-<p>式と一緒にオプショナルチェイニング演算子を用いたとき、左側のオペランドが <code>null</code> または <code>undefined</code> である場合にその式は評価されなくなります。</p>
-
-<pre class="brush: js notranslate">let potentiallyNullObj = null;
-let x = 0;
-let prop = potentiallyNullObj?.[x++];
-
-console.log(x); // 0 as x was not incremented
-</pre>
-
-<h3 id="Stacking_the_optional_chaining_operator" name="Stacking_the_optional_chaining_operator">オプショナルチェイニングをつなげて使う</h3>
-
-<p>入れ子になったオブジェクトでは、オプショナルチェイニング演算子を何度でも使えます。</p>
-
-<pre class="brush: js notranslate">let customer = {
-  name: "Carl",
-  details: {
-    age: 82,
-    location: "Paradise Falls" // detailed address is unknown
-  }
-};
-let customerCity = customer.details?.address?.city;
-
-// … this also works with optional chaining function call
-let duration = vacations.trip?.getTime?.();
-</pre>
-
-<h3 id="Combining_with_the_nullish_coalescing_operator" name="Combining_with_the_nullish_coalescing_operator">Null 合体演算子と共に使う</h3>
-
-<p>{{JSxRef("Operators/Nullish_Coalescing_Operator", "Null 合体演算子", '', 1)}}はオプショナルチェイニングの後につけることで、存在しない値があった時、既定値をかわりに使うために利用できます。</p>
-
-<pre class="brush: js notranslate">let customer = {
-  name: "Carl",
-  details: { age: 82 }
-};
-const customerCity = customer?.city ?? "Unknown city";
-console.log(customerCity); // Unknown city</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><a href="https://tc39.es/proposal-optional-chaining/#sec-scope">"オプショナルチェイニング" 演算子の提案</a></td>
-   <td>Stage 4</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
-
-<div>
-<p>{{Compat("javascript.operators.optional_chaining")}}</p>
-</div>
-
-<h2 id="See_also" name="See_also">関連情報</h2>
-
-<ul>
- <li>{{JSxRef("Operators/Nullish_Coalescing_Operator", "Null 合体演算子", '', 1)}}</li>
- <li><a href="https://github.com/tc39/proposals">TC39 proposals</a></li>
-</ul>
diff --git a/files/ja/web/javascript/reference/operators/optional_chaining/index.md b/files/ja/web/javascript/reference/operators/optional_chaining/index.md
new file mode 100644
index 0000000000..644624bfbb
--- /dev/null
+++ b/files/ja/web/javascript/reference/operators/optional_chaining/index.md
@@ -0,0 +1,195 @@
+---
+title: オプショナルチェーン (?.)
+slug: Web/JavaScript/Reference/Operators/Optional_chaining
+tags:
+  - Chaining
+  - JavaScript
+  - Language feature
+  - Operator
+  - Optional chaining
+  - Reference
+browser-compat: javascript.operators.optional_chaining
+translation_of: Web/JavaScript/Reference/Operators/Optional_chaining
+---
+{{JSSidebar("Operators")}}
+
+**オプショナルチェーン** (optional chaining) 演算子 (**`?.`**) は、接続されたオブジェクトチェーンの深くに位置するプロパティの値を、チェーン内の各参照が正しいかどうかを明示的に確認せずに読み込むことを可能にします。
+
+ `?.` 演算子の機能は `.` チェーン演算子と似ていますが、参照が [nullish](/ja/docs/Glossary/Nullish) ({{JSxRef("null")}} または {{JSxRef("undefined")}}) の場合にエラーとなるのではなく、式が短絡され `undefined` が返されるところが異なります。関数呼び出しで使用すると、与えられた関数が存在しない場合、 `undefined` を返します。
+
+これは、参照が失われた可能性のある連結されたプロパティにアクセスする時、結果的に短く単純な式になります。また、必要なプロパティの存在が保証されていない場合にオブジェクトのコンテンツを探索するのにも役立ちます。
+
+オプショナルチェーンは、宣言されていないルートオブジェクトでは使用できませんが、未定義のルートオブジェクトで使用できます。
+
+{{EmbedInteractiveExample("pages/js/expressions-optionalchainingoperator.html",
+  "taller")}}
+
+## 構文
+
+```js
+obj.val?.prop
+obj.val?.[expr]
+obj.arr?.[index]
+obj.func?.(args)
+```
+
+## 解説
+
+オプショナルチェーン演算子は、参照や関数が `undefined` または `null` である可能性がある場合でも、接続されたオブジェクトの値に簡単にアクセスする手段を提供します。
+
+たとえば、入れ子構造を持つオブジェクト `obj` を考えましょう。オプショナルチェーン演算子なしで深い入れ子になったサブプロパティにアクセスするには、次のように、各プロパティ間の参照を確認する必要があります。
+
+```js
+let nestedProp = obj.first && obj.first.second;
+```
+
+`obj.first.second` の値にアクセスする前に、 `obj.first` の値が `null` または `undefined` でないことを確認します。これにより、 `obj.first` をテストせず `obj.first.second` にアクセスしたときに起きるエラーを防ぐことができます。
+
+しかし、オプショナルチェーン演算子 (`?.`) を使えば、`obj.first.second` にアクセスしようとする前に `obj.first` の状態を明示的にテストする必要がなくなります。</p>
+
+```js
+let nestedProp = obj.first?.second;
+```
+
+`?.` を `.` の代わりに用いることで、 JavaScript が `obj.first.second` にアクセスしようとする前に `obj.first` が `null` または `undefined` でないことを暗黙的に確かめるようになります。`obj.first` が `null` または `undefined` であった場合、式が自動的に短絡され、 `undefined` が返ります。
+
+これは、一時的な変数が作成されないことを除き、次の式と等価です。
+
+```js
+let temp = obj.first;
+let nestedProp = ((temp === null || temp === undefined) ? undefined : temp.second);
+```
+
+### 関数呼び出しにおけるオプショナルチェーン演算子
+
+存在しない可能性がある関数の呼び出しを試行するときに、オプショナルチェーンを使うことができます。これはたとえば、ユーザーの端末上で使えなかったり、実装が古かったりするために使えなかったりする可能性がある API を使うときに役立ちます。
+
+関数呼び出しでオプショナルチェーン演算子を用いた場合、メソッドが見つからないときは自動的に `undefined` が返り、例外は発生しません。
+
+```js
+let result = someInterface.customMethod?.();
+```
+
+> **Note:** 関数ではない名前のプロパティがあった場合、 `?.` を使用すると {{JSxRef("TypeError")}} 例外が発生します
+> (`someInterface.customMethod is not a function`)。
+
+> **Note:** `someInterface` 自体が `null` または `undefined` である場合にも、 {{JSxRef("TypeError")}} 例外が発生します (`someInterface is null`)。 `someInterface` 自体が `null` または `undefined` である可能性がある場合は、この位置にも `?.` を使用して `someInterface?.customMethod?.()` のようにする必要があります。
+
+#### 省略可能なコールバックやイベントハンドラーの扱い
+
+<p>コールバックを使う場合や、オブジェクトからメソッドを<a href="/ja/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">分割代入</a>を利用して取り出す場合に、存在しない値がある可能性があり、その存在を検証するまで関数として呼び出せません。その場合 `?.` を利用することで、検証の必要性を回避できます。
+
+```js
+// Written as of ES2019
+function doSomething(onContent, onError) {
+  try {
+    // ... do something with the data
+  }
+  catch (err) {
+    if (onError) { // Testing if onError really exists
+      onError(err.message);
+    }
+  }
+}
+```
+
+```js
+// Using optional chaining with function calls
+function doSomething(onContent, onError) {
+  try {
+   // ... do something with the data
+  }
+  catch (err) {
+    onError?.(err.message); // no exception if onError is undefined
+  }
+}
+```
+
+### オプショナルチェーン演算子と式の組み合わせ
+
+[プロパティアクセサーのブラケット表記法](/ja/docs/Web/JavaScript/Reference/Operators/Property_Accessors#bracket_notation)を使用している式のプロパティにアクセスする際にも、オプショナルチェーン演算子を使用することができます。
+
+```js
+let nestedProp = obj?.['prop' + 'Name'];
+```
+
+### オプショナルチェーン演算子は代入の左辺値では使用できない
+
+```js
+let object = {};
+object?.property = 1; // Uncaught SyntaxError: Invalid left-hand side in assignment
+```
+
+### オプショナルチェーンによる配列要素へのアクセス
+
+```js
+let arrayItem = arr?.[42];
+```
+
+## 例
+
+### 基本的な例
+
+次の例では、マップに存在しない `bar` メンバの `name` プロパティを取得しようとしています。したがって、結果は `undefined` になります。
+
+```js
+let myMap = new Map();
+myMap.set("foo", {name: "baz", desc: "inga"});
+
+let nameBar = myMap.get("bar")?.name;
+```
+
+### 短絡評価
+
+式と一緒にオプショナルチェーン演算子を用いたとき、左側のオペランドが `null` または `undefined` である場合、その式は評価されなくなります。
+
+```js
+let potentiallyNullObj = null;
+let x = 0;
+let prop = potentiallyNullObj?.[x++];
+
+console.log(x); // 0 となる。 x は加算されていない
+```
+
+### オプショナルチェーンをつなげて使う
+
+入れ子になったオブジェクトでは、オプショナルチェーン演算子を何度でも使うことができます。
+
+```js
+let customer = {
+  name: "Carl",
+  details: {
+    age: 82,
+    location: "Paradise Falls" // 詳細な住所は不明
+  }
+};
+let customerCity = customer.details?.address?.city;
+
+// … これはオプショナルチェーンの関数呼び出しでも動作します
+let customerName = customer.name?.getName?.(); // メソッドが存在しないので、 customerName は undefined
+```
+
+### Null 合体演算子と共に使う
+
+{{JSxRef("Operators/Nullish_Coalescing_Operator", "Null 合体演算子", '', 1)}}はオプショナルチェーンの後につけることで、値が存在しなかったときの既定値を指定することができます。
+
+```js
+let customer = {
+  name: "Carl",
+  details: { age: 82 }
+};
+const customerCity = customer?.city ?? "Unknown city";
+console.log(customerCity); // Unknown city
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- {{JSxRef("Operators/Nullish_Coalescing_Operator", "Null 合体演算子", '', 1)}}
diff --git a/files/ja/web/javascript/reference/statements/const/index.html b/files/ja/web/javascript/reference/statements/const/index.html
deleted file mode 100644
index 46906df6db..0000000000
--- a/files/ja/web/javascript/reference/statements/const/index.html
+++ /dev/null
@@ -1,155 +0,0 @@
----
-title: const
-slug: Web/JavaScript/Reference/Statements/const
-tags:
-  - ECMAScript 2015
-  - JavaScript
-  - Language feature
-  - Reference
-  - Statement
-  - constants
-translation_of: Web/JavaScript/Reference/Statements/const
----
-<div>{{jsSidebar("Statements")}}</div>
-
-<p>定数 (const) は、<code><a href="/ja/docs/Web/JavaScript/Reference/Statements/let">let</a></code> キーワードを使って定義する変数と同じ、ブロックスコープを持ちます。定数の値は、再代入による変更はできず、再宣言もできません。</p>
-
-<div>{{EmbedInteractiveExample("pages/js/statement-const.html")}}</div>
-
-<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、<a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>
-
-<h2 id="Syntax" name="Syntax">構文</h2>
-
-<pre class="syntaxbox notranslate">const <var>name1</var> = <var>value1</var> [, <var>name2</var> = <var>value2</var> [, ... [, <var>nameN</var> = <var>valueN</var>]]];</pre>
-
-<dl>
- <dt><code><var>nameN</var></code></dt>
- <dd>定数名。正当な{{Glossary("identifier", "識別子")}}ならは、どんなものでもかまいません。</dd>
- <dt><code><var>valueN</var></code></dt>
- <dd>定数の値。正当な<a href="/docs/Web/JavaScript/Guide/Expressions_and_Operators#Expressions">式</a>ならば、どんなものでもかまいません。</dd>
-</dl>
-
-<p><a href="/ja/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">分割代入</a>構文は、変数の宣言にも使用できます。</p>
-
-<pre class="syntaxbox notranslate">const <var>{ bar }</var> = <em>foo</em>; // where foo = { bar:10, baz:12 };
-/* これは、値が 10 の 'bar' という名前の変数を作成します。*/</pre>
-
-<dl>
-</dl>
-
-<h2 id="Description" name="Description">解説</h2>
-
-<p>この宣言は、宣言された場所に応じて、グローバルまたはブロック内にローカルなスコープを持った定数を作成します。グローバルな定数は {{jsxref("Statements/var", "var")}} 変数とは異なり、{{domxref("window")}} オブジェクトのプロパティには<strong>なりません</strong>。</p>
-
-<p>定数には初期化子が必要です。その値は、宣言されたのと同じ文の中で指定しなければなりません。(後から変更できないことを考えると、これは理にかなっています)</p>
-
-<p><strong><code>const</code> 宣言</strong>は、値への読み取り専用の参照を作ります。これは、定数に保持されている値は<strong>不変ではなく</strong>、その変数の識別子が再代入できないということです。たとえば、定数の中身がオブジェクトの場合、オブジェクトの内容（プロパティなど）は変更可能です。</p>
-
-<p>「<a href="/ja/docs/Web/JavaScript/Reference/Statements/let#Temporal_dead_zone">一時的なデッドゾーン</a>」に関する考慮事項はすべて、{{jsxref("Statements/let", "let")}} と <code>const</code> の両方に適用されます。</p>
-
-<p>定数は、同じスコープ内の関数や変数と同じ名前にすることはできません。</p>
-
-<h2 id="Examples" name="Examples">例</h2>
-
-<h3 id="Basic_const_usage" name="Basic_const_usage">基本的な定数の使い方</h3>
-
-<p>定数は大文字または小文字で宣言することができますが、すべて大文字で宣言するのが慣例です。</p>
-
-<pre class="brush: js; notranslate">// MY_FAV を定数として定義して、その値を 7 にします。
-const MY_FAV = 7;
-
-// これはエラーを投げます。
-// Uncaught TypeError: Assignment to constant variable.
-MY_FAV = 20;
-
-// MY_FAV は 7 です。
-console.log('my favorite number is: ' + MY_FAV);
-
-// 定数を再宣言しようとするとエラーを投げます。
-// Uncaught SyntaxError: Identifier 'MY_FAV' has already been declared
-const MY_FAV = 20;
-
-// MY_FAV という名前は上記の定数のために予約されているので、これも失敗します。
-var MY_FAV = 20;
-
-// これもエラーを投げます。
-let MY_FAV = 20;
-
-</pre>
-
-<h3 id="Block_scoping" name="Block_scoping">ブロックスコープ</h3>
-
-<p>ブロックスコープの性質に注意することが重要です。</p>
-
-<pre class="brush: js notranslate">if (MY_FAV === 7) {
-  // これは問題なく、ブロックスコープの MY_FAV 変数を作成します。
-  // （ブロックスコープの変数を宣言する let も問題なく機能します）
-  let MY_FAV = 20;
-
-  // MY_FAV は現在 20 です。
-  console.log('my favorite number is ' + MY_FAV);
-
-  // これはグローバルコンテキストに巻き上げられ、エラーを投げます。
-  var MY_FAV = 20;
-}
-
-// MY_FAV は 7 のままです。
-console.log('my favorite number is ' + MY_FAV);
-</pre>
-
-<h3 id="const_needs_to_be_initialized" name="const_needs_to_be_initialized">定数は初期化が必要です。</h3>
-
-<pre class="brush: js notranslate">// エラーが投げられます。
-// Uncaught SyntaxError: Missing initializer in const declaration
-
-const FOO;
-</pre>
-
-<h3 id="const_in_objects_and_arrays" name="const_in_objects_and_arrays">オブジェクトと配列の定数</h3>
-
-<p>定数はオブジェクトや配列に対しても動作します。</p>
-
-<pre class="brush: js notranslate">const MY_OBJECT = {'key': 'value'};
-
-// オブジェクトの上書きはエラーを投げます。
-// Uncaught TypeError: Assignment to constant variable.
-MY_OBJECT = {'OTHER_KEY': 'value'};
-
-// しかしながら、オブジェクトのキーは保護されていないので、
-// 次の文は問題なく実行されます。
-MY_OBJECT.key = 'otherValue'; // Object.freeze() を使用すればオブジェクトを不変にできます。
-
-// 配列も同じです。
-const MY_ARRAY = [];
-// 配列にアイテムをプッシュすることができます。
-MY_ARRAY.push('A'); // ["A"]
-// しかしながら、新しい配列を変数に代入するとエラーを投げます。
-// Uncaught TypeError: Assignment to constant variable.
-MY_ARRAY = ['B'];</pre>
-
-<h2 id="Specifications" name="Specifications">仕様</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">仕様書</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-let-and-const-declarations', 'Let and Const Declarations')}}</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
-
-<p>{{Compat("javascript.statements.const")}}</p>
-
-<h2 id="See_also" name="See_also">関連情報</h2>
-
-<ul>
- <li>{{jsxref("Statements/var", "var")}}</li>
- <li>{{jsxref("Statements/let", "let")}}</li>
- <li><a href="/ja/docs/Web/JavaScript/Guide/Grammar_and_types#Constants">JavaScript ガイド - 『値、変数、リテラル』 - 定数</a></li>
-</ul>
diff --git a/files/ja/web/javascript/reference/statements/const/index.md b/files/ja/web/javascript/reference/statements/const/index.md
new file mode 100644
index 0000000000..2f1f4dbac9
--- /dev/null
+++ b/files/ja/web/javascript/reference/statements/const/index.md
@@ -0,0 +1,143 @@
+---
+title: const
+slug: Web/JavaScript/Reference/Statements/const
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Language feature
+  - Reference
+  - Statement
+  - constants
+browser-compat: javascript.statements.const
+translation_of: Web/JavaScript/Reference/Statements/const
+---
+{{jsSidebar("Statements")}}
+
+定数は、[`let`](/en-US/docs/Web/JavaScript/Reference/Statements/let) キーワードを使って定義する変数と同様にブロックスコープを持ちます。定数の値は、再代入による変更ができず、再宣言もできません。
+
+{{EmbedInteractiveExample("pages/js/statement-const.html")}}
+
+## 構文
+
+```js
+const name1 = value1 [, name2 = value2 [, ... [, nameN = valueN]]];
+```
+
+- `nameN`
+  - : 定数名。正当な{{Glossary("identifier", "識別子")}}ならば、何でもかまいません。
+- `valueN`
+  - : 定数の値。正当な[式](/ja/docs/Web/JavaScript/Guide/Expressions_and_Operators#Expressions)ならば、関数式を含め、何でもかまいません。
+
+[分割代入](/ja/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment)構文を使用して、定数を宣言することもできます。
+
+```js
+const { bar } = foo; // where foo = { bar:10, baz:12 };
+/* これは、値が 10 の 'bar' という名前の変数を作成します。*/
+```
+
+## 解説
+
+この宣言は、宣言された場所に応じて、グローバルまたはブロック内にローカルなスコープを持った定数を作成します。グローバルな定数は {{jsxref("Statements/var", "var")}} 変数とは異なり、{{domxref("window")}} オブジェクトのプロパティには**なりません**。
+
+定数には初期化子が必要です。その値は、宣言されたのと同じ文の中で指定しなければなりません。(後から変更できないことを考えると、これは理にかなっています。)
+
+**`const` 宣言**は、値への読み取り専用の参照を作ります。これは、定数に保持されている値は**不変ではなく**、その変数の識別子が再代入できないということです。たとえば、定数の中身がオブジェクトの場合、オブジェクトの内容（プロパティなど）は変更可能です。</p>
+
+「[一時的なデッドゾーン](/ja/docs/Web/JavaScript/Reference/Statements/let#Temporal_dead_zone)」に関する考慮事項はすべて、{{jsxref("Statements/let", "let")}} と `const` の両方に適用されます。
+
+定数は、同じスコープ内の関数や変数と同じ名前にすることはできません。
+
+## 例
+
+### 基本的な定数の使い方
+
+定数は大文字または小文字で宣言することができますが、すべて大文字で宣言するのが慣例です。
+
+```js
+// MY_FAV を定数として定義して、その値を 7 にします
+const MY_FAV = 7;
+
+// これはエラーが発生します - Uncaught TypeError: Assignment to constant variable.
+MY_FAV = 20;
+
+// MY_FAV は 7 です
+console.log('my favorite number is: ' + MY_FAV);
+
+// 定数を再宣言しようとするとエラーが発生します
+// Uncaught SyntaxError: Identifier 'MY_FAV' has already been declared
+const MY_FAV = 20;
+
+// MY_FAV という名前は上記の定数のために予約されているので、これも失敗します
+var MY_FAV = 20;
+
+// これもエラーが発生します
+let MY_FAV = 20;
+```
+
+### ブロックスコープ
+
+ブロックスコープの性質に注意することが重要です。
+
+```js
+if (MY_FAV === 7) {
+  // これは問題なく、ブロックスコープの MY_FAV 変数を作成します
+  // (ブロックスコープの変数を宣言する let も問題なく機能します)
+  let MY_FAV = 20;
+
+  // MY_FAV は現在 20 です。
+  console.log('my favorite number is ' + MY_FAV);
+
+  // これはグローバルコンテキストに巻き上げられ、エラーが発生します
+  var MY_FAV = 20;
+}
+
+// MY_FAV は 7 のままです
+console.log('my favorite number is ' + MY_FAV);
+```
+
+### 定数は初期化が必要
+
+```js
+// エラーが発生します
+// Uncaught SyntaxError: Missing initializer in const declaration
+
+const FOO;
+```
+
+### オブジェクトと配列の定数
+
+定数はオブジェクトや配列に対しても動作します。
+
+```js
+const MY_OBJECT = {'key': 'value'};
+
+// オブジェクトの上書きはエラーを投げます。
+// Uncaught TypeError: Assignment to constant variable.
+MY_OBJECT = {'OTHER_KEY': 'value'};
+
+// しかしながら、オブジェクトのキーは保護されていないので、
+// 次の文は問題なく実行されます。
+MY_OBJECT.key = 'otherValue'; // Object.freeze() を使用すればオブジェクトを不変にできます。
+
+// 配列も同じです。
+const MY_ARRAY = [];
+// 配列に要素をプッシュすることができます。
+MY_ARRAY.push('A'); // ["A"]
+// しかしながら、新しい配列を変数に代入するとエラーを投げます。
+// Uncaught TypeError: Assignment to constant variable.
+MY_ARRAY = ['B'];
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- {{jsxref("Statements/var", "var")}}
+- {{jsxref("Statements/let", "let")}}
+- [JavaScript ガイドの定数](/ja/docs/Web/JavaScript/Guide/Grammar_and_types#Constants)
diff --git a/files/ja/web/javascript/reference/strict_mode/index.html b/files/ja/web/javascript/reference/strict_mode/index.html
index c24a489769..5ef5aaf11e 100644
--- a/files/ja/web/javascript/reference/strict_mode/index.html
+++ b/files/ja/web/javascript/reference/strict_mode/index.html
@@ -26,7 +26,7 @@ translation_of: Web/JavaScript/Reference/Strict_mode
 
 <h2 id="Invoking_strict_mode" name="Invoking_strict_mode">Strict モードの呼び出し</h2>
 
-<p>Strict モードは<em>スクリプト全体</em>または<em>個別の関数</em>に適用できます。括弧 <code><a href="/ja/docs/Web/JavaScript/Reference/Statements/block">{}</a></code> で括られるブロック構文には適用できません。そのような場所に適用しようとしても何も起きません。<code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/eval">eval</a></code> コード、<code><a href="/ja/docs/Web/JavaScript/Reference/Statements/function">Function</a></code> コード、イベントハンドラ属性、<a href="/ja/DOM/window.setTimeout" title="ja/DOM/window.setTimeout"><code>setTimeout</code></a> コードに渡す文字列、およびこれらに似たものはスクリプト全体であり、Strict モードを呼び出すと期待どおりに動作します。</p>
+<p>Strict モードは<em>スクリプト全体</em>または<em>個別の関数</em>に適用できます。括弧 <code><a href="/ja/docs/Web/JavaScript/Reference/Statements/block">{}</a></code> で括られるブロック構文には適用できません。そのような場所に適用しようとしても何も起きません。<code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/eval">eval</a></code> コード、<code><a href="/ja/docs/Web/JavaScript/Reference/Statements/function">Function</a></code> コード、イベントハンドラ属性、<a href="/ja/DOM/window.setTimeout"><code>setTimeout</code></a> コードに渡す文字列、およびこれらに似たものはスクリプト全体であり、Strict モードを呼び出すと期待どおりに動作します。</p>
 
 <h3 id="Strict_mode_for_scripts" name="Strict_mode_for_scripts">スクリプトでの Strict モード</h3>
 
@@ -79,7 +79,7 @@ export default strict;
 mistypeVariable = 17;  // この行は変数のスペルミスによる参照エラーを投げます。
 </pre>
 
-<p>第二に、Strict モードでは、代入文で暗黙的に失敗せずに例外が発生するようにします。例えば、<code>NaN</code> は書き込み不可のグローバル変数です。通常のコードでは <code>NaN</code> に代入しても何も起きません。つまり、開発者は失敗したという通知を受けません。Strict モードでは <code>NaN</code> に代入すると例外が発生します。通常のコードで暗黙的に失敗する代入 (書き込み不可のプロパティへの代入、getter のみのプロパティへの代入、<a href="/ja/JavaScript/Reference/Global_Objects/Object/preventExtensions" title="ja/JavaScript/Reference/Global Objects/Object/preventExtensions">拡張不可</a> オブジェクトへの新規プロパティ割り当て) について、Strict モードでは例外が発生します:</p>
+<p>第二に、Strict モードでは、代入文で暗黙的に失敗せずに例外が発生するようにします。例えば、<code>NaN</code> は書き込み不可のグローバル変数です。通常のコードでは <code>NaN</code> に代入しても何も起きません。つまり、開発者は失敗したという通知を受けません。Strict モードでは <code>NaN</code> に代入すると例外が発生します。通常のコードで暗黙的に失敗する代入 (書き込み不可のプロパティへの代入、getter のみのプロパティへの代入、<a href="/ja/JavaScript/Reference/Global_Objects/Object/preventExtensions">拡張不可</a> オブジェクトへの新規プロパティ割り当て) について、Strict モードでは例外が発生します:</p>
 
 <pre class="brush: js notranslate">'use strict';
 
@@ -257,7 +257,7 @@ f(); // TypeError が投げられます
 
 <p>Strict モードにより"セキュアな" JavaScript の記述がより簡単になります。現在、一部の Web サイトではユーザー向に対し、Web サイトの<em>他のユーザーが</em>実行することができる JavaScript を記述する方法を提供しています。ブラウザー上の JavaScript はユーザーの個人的な情報にアクセスできることから、そのような JavaScript は禁じられた機能へのアクセスを削除するよう、実行前に部分的に変換する必要があります。JavaScript の柔軟性は、ランタイムによる多くのチェックなしにこれを行うことを事実上不可能にします。ある言語機能は、ランタイムのチェック実行にかなりパフォーマンスのコストがかかるとして広まっています。Strict モードのいくつかの調整、そしてユーザーが投稿した JavaScript が Strict モードのコードであることや信頼できる方法で呼び出されることの要求により、ランタイムのチェックの必要性をかなり減らします。</p>
 
-<p>第一に、Strict モードでは、<code><a href="/ja/docs/Web/JavaScript/Reference/Operators/this">this</a></code> として関数に渡された値をオブジェクトへボクシングしません。非ストリクトモードでの関数にとって <code><a href="/ja/docs/Web/JavaScript/Reference/Operators/this">this</a></code> は常にオブジェクトになります。this の値は、実行時に this オブジェクト値として提供されたオブジェクトであったり、真偽値・文字列・数値などのプリミティブな値が <code><a href="/ja/docs/Web/JavaScript/Reference/Operators/this">this</a></code> として呼び出した時はオブジェクトへボクシングした値、<code>{{Glossary("Undefined", "undefined")}}</code> または <code>{{Glossary("Null", "null")}}</code> の <code><a href="/ja/docs/Web/JavaScript/Reference/Operators/this">this</a></code> で呼び出された時はグローバルオブジェクトとなります。(特定の <code><a href="/ja/docs/Web/JavaScript/Reference/Operators/this">this</a></code> を指定するために <a href="/ja/JavaScript/Reference/Global_Objects/Function/call" title="ja/JavaScript/Reference/Global_Objects/Function/call"><code>call</code></a>、<a href="/ja/JavaScript/Reference/Global_Objects/Function/apply" title="ja/JavaScript/Reference/Global_Objects/Function/apply"><code>apply</code></a>、<a href="/ja/JavaScript/Reference/Global_Objects/Function/bind" title="ja/JavaScript/Reference/Global_Objects/Function/bind"><code>bind</code></a> を使用してください)。自動的なボクシングはパフォーマンス上のコストがあり、しかしブラウザーでグローバルオブジェクトを公開することは、"セキュアな" JavaScript 環境へのアクセスを提供するグローバルオブジェクトを制限する必要があるためにセキュリティ上の危険性があります。従って Strict モードの関数では、指定された <code><a href="/ja/docs/Web/JavaScript/Reference/Operators/this">this</a></code> を変更せずに使用します:</p>
+<p>第一に、Strict モードでは、<code><a href="/ja/docs/Web/JavaScript/Reference/Operators/this">this</a></code> として関数に渡された値をオブジェクトへボクシングしません。非ストリクトモードでの関数にとって <code><a href="/ja/docs/Web/JavaScript/Reference/Operators/this">this</a></code> は常にオブジェクトになります。this の値は、実行時に this オブジェクト値として提供されたオブジェクトであったり、真偽値・文字列・数値などのプリミティブな値が <code><a href="/ja/docs/Web/JavaScript/Reference/Operators/this">this</a></code> として呼び出した時はオブジェクトへボクシングした値、<code>{{Glossary("Undefined", "undefined")}}</code> または <code>{{Glossary("Null", "null")}}</code> の <code><a href="/ja/docs/Web/JavaScript/Reference/Operators/this">this</a></code> で呼び出された時はグローバルオブジェクトとなります。(特定の <code><a href="/ja/docs/Web/JavaScript/Reference/Operators/this">this</a></code> を指定するために <a href="/ja/JavaScript/Reference/Global_Objects/Function/call"><code>call</code></a>、<a href="/ja/JavaScript/Reference/Global_Objects/Function/apply"><code>apply</code></a>、<a href="/ja/JavaScript/Reference/Global_Objects/Function/bind"><code>bind</code></a> を使用してください)。自動的なボクシングはパフォーマンス上のコストがあり、しかしブラウザーでグローバルオブジェクトを公開することは、"セキュアな" JavaScript 環境へのアクセスを提供するグローバルオブジェクトを制限する必要があるためにセキュリティ上の危険性があります。従って Strict モードの関数では、指定された <code><a href="/ja/docs/Web/JavaScript/Reference/Operators/this">this</a></code> を変更せずに使用します:</p>
 
 <pre class="brush: js notranslate">'use strict';
 function fun() { return this; }
diff --git a/files/ja/web/javascript/reference/trailing_commas/index.html b/files/ja/web/javascript/reference/trailing_commas/index.html
deleted file mode 100644
index 124dd12c22..0000000000
--- a/files/ja/web/javascript/reference/trailing_commas/index.html
+++ /dev/null
@@ -1,172 +0,0 @@
----
-title: 末尾のカンマ
-slug: Web/JavaScript/Reference/Trailing_commas
-tags:
-  - Comma
-  - ECMAScript2017
-  - ECMAScript5
-  - JavaScript
-  - Language feature
-  - Syntax
-  - Trailing comma
-translation_of: Web/JavaScript/Reference/Trailing_commas
----
-<div>{{JsSidebar("More")}}</div>
-
-<p><strong>末尾のカンマ</strong> ("最後のカンマ" と呼ばれることもあります) は、JavaScript のコードに新しい要素や引数、プロパティを追加するときに役立ちます。新しいプロパティを追加するとき、最終行ですでに末尾のカンマを使用していれば、最終行を修正することなく新しい行を追加できます。これによって、バージョン管理の差分がより洗練され、コード編集の煩雑さを軽減できます。</p>
-
-<p>JavaScript は、当初から配列リテラルで末尾のカンマを使用できました。そして、ECMAScript 5 でオブジェクトリテラルの、ECMAScript 2017 で関数の引数の末尾のカンマが使用できるようになりました。</p>
-
-<p>しかし、<a href="/ja/docs/Glossary/JSON">JSON</a> では末尾のカンマを使用できません。</p>
-
-<h2 id="Syntax" name="Syntax">構文</h2>
-
-<pre class="syntaxbox notranslate">,</pre>
-
-<h2 id="Examples" name="Examples">例</h2>
-
-<h3 id="Trailing_commas_in_literals" name="Trailing_commas_in_literals">リテラルの末尾のカンマ</h3>
-
-<h4 id="Arrays" name="Arrays">配列</h4>
-
-<p>JavaScript は配列の末尾のカンマを無視します。</p>
-
-<pre class="brush: js notranslate">var arr = [
-  1,
-  2,
-  3,
-];
-
-arr; // [1, 2, 3]
-arr.length; // 3</pre>
-
-<p>1 つ以上の末尾のカンマがある場合、省略 (または穴) が作られます。穴がある配列は<em>希薄な</em> (<em>密集した</em>配列は穴がありません) 配列と呼ばれます。たとえば、{{jsxref("Array.prototype.forEach()")}} や {{jsxref("Array.prototype.map()")}} で配列をイテレートするとき、穴はスキップされます。</p>
-
-<pre class="brush: js notranslate">var arr = [1, 2, 3,,,];
-arr.length; // 5
-</pre>
-
-<h4 id="Objects" name="Objects">オブジェクト</h4>
-
-<p>ECMAScript 5 から、オブジェクトリテラルの末尾のカンマも使用できるようになりました:</p>
-
-<pre class="brush: js notranslate">var object = {
-  foo: "bar",
-  baz: "qwerty",
-  age: 42,
-};</pre>
-
-<h3 id="Trailing_commas_in_functions" name="Trailing_commas_in_functions">関数の末尾のカンマ</h3>
-
-<p>ECMAScript 2017 では、関数の引数リストで末尾のカンマが使用できるようになりました。</p>
-
-<h4 id="Parameter_definitions" name="Parameter_definitions">引数定義</h4>
-
-<p>次の 2 つの関数定義はともに有効で等しいものです。末尾のカンマは、関数の <code>length</code> プロパティや <code>arguments</code> オブジェクトに影響を与えません。</p>
-
-<pre class="brush: js notranslate">function f(p) {}
-function f(p,) {}
-
-(p) =&gt; {};
-(p,) =&gt; {};
-</pre>
-
-<p>末尾のカンマは 、クラスやオブジェクトの<a href="/ja/docs/Web/JavaScript/Reference/Functions/Method_definitions">メソッド定義</a>でも使用できます。</p>
-
-<pre class="brush: js notranslate">class C {
-  one(a,) {}
-  two(a, b,) {}
-}
-
-var obj = {
-  one(a,) {},
-  two(a, b,) {},
-};
-</pre>
-
-<h4 id="Function_calls" name="Function_calls">関数呼び出し</h4>
-
-<p>次の 2 つの関数呼び出しはともに有効で等しいものです。</p>
-
-<pre class="brush: js notranslate">f(p);
-f(p,);
-
-Math.max(10, 20);
-Math.max(10, 20,);
-</pre>
-
-<h4 id="Illegal_trailing_commas" name="Illegal_trailing_commas">不正な末尾のカンマ</h4>
-
-<p>カンマしか含まない関数の引数定義や関数呼び出しは、{{Jsxref("SyntaxError")}} を投げます。さらに、<a href="/ja/docs/Web/JavaScript/Reference/Functions/rest_parameters">rest parameters</a> を使用しているときは、末尾のカンマは許可されません。</p>
-
-<pre class="brush: js example-bad notranslate">function f(,) {} // SyntaxError: missing formal parameter
-(,) =&gt; {};       // SyntaxError: expected expression, got ','
-f(,)             // SyntaxError: expected expression, got ','
-
-function f(...p,) {} // SyntaxError: parameter after rest parameter
-(...p,) =&gt; {}        // SyntaxError: expected closing parenthesis, got ','
-</pre>
-
-<h3 id="Trailing_commas_in_destructuring" name="Trailing_commas_in_destructuring">分割代入での末尾のカンマ</h3>
-
-<p>末尾のカンマは、<a href="/ja/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">分割代入</a>の左辺でも使用できます。</p>
-
-<pre class="brush: js notranslate">// array destructuring with trailing comma
-[a, b,] = [1, 2];
-
-// object destructuring with trailing comma
-var o = {
-  p: 42,
-  q: true,
-};
-var {p, q,} = o;
-</pre>
-
-<p>また、rest element で使用すると、{{jsxref("SyntaxError")}} を投げます。</p>
-
-<pre class="brush: js example-bad notranslate">var [a, ...b,] = [1, 2, 3];
-// SyntaxError: rest element may not have a trailing comma</pre>
-
-<h3 id="Trailing_commas_in_JSON" name="Trailing_commas_in_JSON">JSON の末尾のカンマ</h3>
-
-<p>オブジェクトリテラルの末尾のカンマは、ECMAScript 5 でのみ導入されました。JSON は ES5 以前の JavaScript 構文に基づいているため、<strong>末尾のカンマを使用できません</strong>。</p>
-
-<p>次の行は <code>SyntaxError</code> を投げます。</p>
-
-<pre class="brush: js example-bad notranslate">JSON.parse('[1, 2, 3, 4, ]');
-JSON.parse('{"foo" : 1, }');
-// SyntaxError JSON.parse: unexpected character
-// at line 1 column 14 of the JSON data
-</pre>
-
-<p>正しく JSON をパースするには、カンマを省略します。</p>
-
-<pre class="brush: js example-good notranslate">JSON.parse('[1, 2, 3, 4 ]');
-JSON.parse('{"foo" : 1 }');</pre>
-
-<h2 id="Specifications" name="Specifications">仕様</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">仕様書</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft')}}</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザー実装状況</h2>
-
-<div>
-
-
-<p>{{Compat("javascript.grammar.trailing_commas")}}</p>
-</div>
-
-<h2 id="See_also" name="See_also">関連情報</h2>
-
-<ul>
- <li>Initial ECMAScript proposal: <a href="https://github.com/tc39/proposal-trailing-function-commas">trailing function commas</a> by Jeff Morrison</li>
-</ul>
diff --git a/files/ja/web/javascript/reference/trailing_commas/index.md b/files/ja/web/javascript/reference/trailing_commas/index.md
new file mode 100644
index 0000000000..53f8b40afe
--- /dev/null
+++ b/files/ja/web/javascript/reference/trailing_commas/index.md
@@ -0,0 +1,216 @@
+---
+title: 末尾のカンマ
+slug: Web/JavaScript/Reference/Trailing_commas
+tags:
+  - Comma
+  - ECMAScript2017
+  - ECMAScript5
+  - JavaScript
+  - Language feature
+  - Syntax
+  - Trailing comma
+browser-compat: javascript.grammar.trailing_commas
+translation_of: Web/JavaScript/Reference/Trailing_commas
+---
+{{JsSidebar("More")}}
+
+**末尾のカンマ** (「最後のカンマ」と呼ばれることもあります) は、JavaScript のコードに新しい要素や引数、プロパティを追加するときに役立ちます。新しいプロパティを追加するとき、最終行ですでに末尾のカンマを使用していれば、最終行を修正することなく新しい行を追加できます。これによって、バージョン管理の差分がより洗練され、コード編集の煩雑さを軽減できます。
+
+JavaScript は、当初から配列リテラルで末尾のカンマを使用できました。その後でオブジェクトリテラルで、さらに最近では、関数の引数の末尾のカンマが使用できるようになりました。
+
+しかし、[JSON](/ja/docs/Glossary/JSON) では末尾のカンマを許容していません。
+
+## 構文
+
+```js
+,
+```
+
+## 例
+
+### リテラルの末尾のカンマ
+
+#### 配列
+
+JavaScript は配列の末尾のカンマを無視します。
+
+```js
+var arr = [
+  1,
+  2,
+  3,
+];
+
+arr; // [1, 2, 3]
+arr.length; // 3
+```
+
+2 つ以上の末尾のカンマがある場合、省略 (または穴) が作られます。穴がある配列は*疎らな*配列と呼ばれます (*密集した*配列は穴がありません)。たとえば、{{jsxref("Array.prototype.forEach()")}} や {{jsxref("Array.prototype.map()")}} で配列を反復処理するとき、穴はスキップされます。
+
+```js
+var arr = [1, 2, 3,,,];
+arr.length; // 5
+```
+
+#### オブジェクト
+
+ECMAScript 5 から、オブジェクトリテラルでも末尾のカンマを使用できるようになりました。
+
+```js
+var object = {
+  foo: "bar",
+  baz: "qwerty",
+  age: 42,
+};
+```
+
+### 関数の末尾のカンマ
+
+ECMAScript 2017 では、関数の引数リストで末尾のカンマが使用できるようになりました。
+
+#### 引数定義
+
+次の 2 つの関数定義はともに有効で等しいものです。末尾のカンマは、関数の `length` プロパティや `arguments` オブジェクトに影響を与えません。
+
+```js
+function f(p) {}
+function f(p,) {}
+
+(p) => {};
+(p,) => {};
+```
+
+末尾のカンマは、クラスやオブジェクトの[メソッド定義](/ja/docs/Web/JavaScript/Reference/Functions/Method_definitions)でも使用できます。</p>
+
+```js
+class C {
+  one(a,) {}
+  two(a, b,) {}
+}
+
+var obj = {
+  one(a,) {},
+  two(a, b,) {},
+};
+```
+
+#### 関数呼び出し
+
+次の 2 つの関数呼び出しはともに有効で等しいものです。
+
+```js
+f(p);
+f(p,);
+
+Math.max(10, 20);
+Math.max(10, 20,);
+```
+
+#### 不正な末尾のカンマ
+
+関数の定義や呼び出しにおいて引数がカンマしかないと、{{Jsxref("SyntaxError")}} が発生します。さらに、[残余引数](/ja/docs/Web/JavaScript/Reference/Functions/rest_parameters)を使用しているときは、末尾のカンマは許可されません。
+
+```js example-bad
+function f(,) {} // SyntaxError: missing formal parameter
+(,) => {};       // SyntaxError: expected expression, got ','
+f(,)             // SyntaxError: expected expression, got ','
+
+function f(...p,) {} // SyntaxError: parameter after rest parameter
+(...p,) => {}        // SyntaxError: expected closing parenthesis, got ','
+```
+
+### 分割代入での末尾のカンマ
+
+末尾のカンマは、[分割代入](/ja/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment)の左辺でも使用できます。
+
+```js
+// 末尾のカンマ付きで配列を分割代入
+[a, b,] = [1, 2];
+
+// 末尾のカンマ付きでオブジェクトを分割代入
+var o = {
+  p: 42,
+  q: true,
+};
+var {p, q,} = o;
+```
+
+また、残余要素で使用すると、{{jsxref("SyntaxError")}} が発生します。
+
+```js example-bad
+var [a, ...b,] = [1, 2, 3];
+// SyntaxError: rest element may not have a trailing comma
+```
+
+### JSON の末尾のカンマ
+
+オブジェクトリテラルの末尾のカンマは、ECMAScript 5 から導入されました。JSON は ES5 以前の JavaScript 構文に基づいているため、**末尾のカンマを使用できません**。
+
+どちらの行も `SyntaxError` が発生します。
+
+```js example-bad
+JSON.parse('[1, 2, 3, 4, ]');
+JSON.parse('{"foo" : 1, }');
+// SyntaxError JSON.parse: unexpected character
+// at line 1 column 14 of the JSON data
+```
+
+正しく JSON を解釈するには、カンマを省略してください。
+
+```js example-good
+JSON.parse('[1, 2, 3, 4 ]');
+JSON.parse('{"foo" : 1 }');
+```
+
+### 名前付きインポートおよび名前付きエクスポートの末尾のカンマ
+
+末尾のカンマは名前付きインポートや名前付きエクスポートでも有効です。
+
+#### 名前付きインポート
+
+```js
+  import {
+    A,
+    B,
+    C,
+  } from 'D'
+
+  import { X, Y, Z } from 'W'
+
+  import { A as B, C as D, E as F } from 'Z'; // インポートの名前を変更
+```
+
+#### 名前付きエクスポート
+
+```js
+  export {
+    A,
+    B,
+    C
+  }
+
+  export { A, B, C };
+
+  export { A as B, C as D, E as F }; // エクスポートの名前を変更
+```
+
+### 数量接頭辞
+
+```js
+  //{ DecimalDigits[~Sep], DecimalDigits[~Sep] }
+  x{n,}
+  x{n,m}
+  x{n,m}?
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- 初期の ECMAScript の提案: [trailing function commas](https://github.com/tc39/proposal-trailing-function-commas) by Jeff Morrison
diff --git a/files/ja/web/mathml/element/mfenced/index.html b/files/ja/web/mathml/element/mfenced/index.html
index e931d5dc22..210ce30041 100644
--- a/files/ja/web/mathml/element/mfenced/index.html
+++ b/files/ja/web/mathml/element/mfenced/index.html
@@ -49,7 +49,7 @@ translation_of: Web/MathML/Element/mfenced
 
 <h3 id="余分な区切り記号（）は無視される">余分な区切り記号（<code>,</code>）は無視される</h3>
 
-<p>サンプルレンダリング: <img alt="[a|b|c|d|e]" src="https://wiki.developer.mozilla.org/files/3195/mfenced02.png"></p>
+<p>サンプルレンダリング: <img alt="[a|b|c|d|e]" src="/files/3195/mfenced02.png"></p>
 
 <p>ブラウザーでのレンダリング: <math> <mfenced close="]" open="[" separators="||||,"> <mi>a</mi> <mi>b</mi> <mi>c</mi> <mi>d</mi> <mi>e</mi> </mfenced> </math></p>
 
diff --git a/files/ja/web/security/securing_your_site/index.html b/files/ja/web/security/securing_your_site/index.html
index 8d375d18b7..915c555d8c 100644
--- a/files/ja/web/security/securing_your_site/index.html
+++ b/files/ja/web/security/securing_your_site/index.html
@@ -19,7 +19,7 @@ translation_of: Web/Security/Securing_your_site
 <dl>
  <dt><a href="/ja/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion">フォームオートコンプリートを無効にするには</a></dt>
  <dd>Geckoではフォームのオートコンプリートがサポートされています。つまり、ユーザがフォームに入力した値を記憶し、次回訪問時には自動的にその値が入力されることになります。ある特定のデータに関しては、この機能を無効にしたほうが適切かもしれません。</dd>
- <dt><a href="/ja/CSS/Privacy_and_the_:visited_selector" title="ja/CSS/Privacy and the :visited selector">プライバシーと :visited セレクター</a></dt>
+ <dt><a href="/ja/CSS/Privacy_and_the_:visited_selector">プライバシーと :visited セレクター</a></dt>
  <dd>この記事では悪質なサイトがユーザーの閲覧履歴を取得できないようにするために <code>getComputedStyle()</code> メソッドに加えられた変更について議論しています。</dd>
  <dt><a href="https://www.owasp.org/index.php/Password_Storage_Cheat_Sheet">安全なアルゴリズムを使用したパスワードのハッシュ</a> (OWASP)</dt>
  <dd>プレーンテキストでパスワードを格納すると、攻撃者がサイトのユーザーの正確なパスワードを知り、漏洩させることにつながり、ユーザーを危険にさらすことになります。古く安全ではないハッシュアルゴリズム (md5 など) を使用すると、同じ問題が浮上します。メッセージダイジェストアルゴリズム (md5 や sha) ではなくパスワード専用のハッシュアルゴリズム (Argon2, PBKDF2, scrypt, bcrypt など) を使用するようにしてください。この記事はパスワードを格納するときに使用することができるベストプラクティスのショーケースです。</dd>
@@ -28,10 +28,10 @@ translation_of: Web/Security/Securing_your_site
 <h2 id="コンテンツセキュリティ">コンテンツセキュリティ</h2>
 
 <dl>
- <dt><a href="/ja/docs/Web/Security/Securing_your_site/Configuring_server_MIME_types" title="ja/docs/Web/Security/Securing_your_site/Configuring_server_MIME_types">サーバーの MIME タイプを正しく設定する</a></dt>
+ <dt><a href="/ja/docs/Web/Security/Securing_your_site/Configuring_server_MIME_types">サーバーの MIME タイプを正しく設定する</a></dt>
  <dd>MIME タイプを正しく設定しないと、幾つかの潜在的なセキュリティ上の問題が発生します。この記事ではそのうちのいくつかを紹介し、サーバーで MIME タイプを正しく設定する方法を示します。</dd>
  <dt><a href="/ja/docs/Web/Security/HTTP_Strict_Transport_Security">HTTP Strict Transport Security</a></dt>
- <dd><code>Strict-Transport-Security:</code> <a href="/ja/HTTP" title="ja/HTTP">HTTP</a> ヘッダーを使うと、そのサイトが HTTPS でのみアクセスされるべきであるということを示すことができます。</dd>
+ <dd><code>Strict-Transport-Security:</code> <a href="/ja/HTTP">HTTP</a> ヘッダーを使うと、そのサイトが HTTPS でのみアクセスされるべきであるということを示すことができます。</dd>
  <dt><a href="/ja/docs/Web/HTTP/CORS">HTTP アクセス制御</a></dt>
  <dd>Cross-Origin Resource Sharing 標準はどのコンテンツが他のドメインから読み込まれるかを示す方法を提供します。この仕組みによりあなたのサイトが意図せず使われることを防いだり、明示的に使用を許可できます。</dd>
  <dt><a href="/ja/docs/Web/Security/CSP">Content Security Policy</a></dt>
diff --git a/files/ja/web/svg/attribute/stroke-linecap/index.html b/files/ja/web/svg/attribute/stroke-linecap/index.html
index f6aeccd337..f35c5842e7 100644
--- a/files/ja/web/svg/attribute/stroke-linecap/index.html
+++ b/files/ja/web/svg/attribute/stroke-linecap/index.html
@@ -7,7 +7,7 @@ tags:
   - SVG Attribute
 translation_of: Web/SVG/Attribute/stroke-linecap
 ---
-<p>« <a href="/ja/docs/Web/SVG/Attribute" title="ja/docs/Web/SVG/Attribute">SVG 属性リファレンスホーム</a></p>
+<p>« <a href="/ja/docs/Web/SVG/Attribute">SVG 属性リファレンスホーム</a></p>
 
 <p><code>stroke-linecap</code> 要素は線を引いた時の開いている部分パスの終端の形状を指定します。</p>
 
@@ -68,6 +68,6 @@ translation_of: Web/SVG/Attribute/stroke-linecap
 <p>以下の要素で <code>stroke-linecap</code> を使うことができます</p>
 
 <ul>
- <li><a href="/ja/docs/Web/SVG/Element#Shape" title="ja/docs/Web/SVG/Element#Shape">Shape 要素</a> »</li>
- <li><a href="/ja/docs/Web/SVG/Element#TextContent" title="ja/docs/Web/SVG/Element#TextContent">Text content 要素</a> »</li>
+ <li><a href="/ja/docs/Web/SVG/Element#Shape">Shape 要素</a> »</li>
+ <li><a href="/ja/docs/Web/SVG/Element#TextContent">Text content 要素</a> »</li>
 </ul>
diff --git a/files/ja/web/svg/attribute/stroke-linejoin/index.html b/files/ja/web/svg/attribute/stroke-linejoin/index.html
index 3f72274f37..9c11e91b5e 100644
--- a/files/ja/web/svg/attribute/stroke-linejoin/index.html
+++ b/files/ja/web/svg/attribute/stroke-linejoin/index.html
@@ -7,7 +7,7 @@ tags:
   - SVG Attribute
 translation_of: Web/SVG/Attribute/stroke-linejoin
 ---
-<p>« <a href="/ja/docs/Web/SVG/Attribute" title="ja/SVG/Attribute">SVG 属性リファレンスホーム</a></p>
+<p>« <a href="/ja/docs/Web/SVG/Attribute">SVG 属性リファレンスホーム</a></p>
 
 <p><code>stroke-linejoin</code> 属性は線を引いた時のパスの曲がりまたは基本的な輪郭の形状を指定します。</p>
 
@@ -73,8 +73,8 @@ translation_of: Web/SVG/Attribute/stroke-linejoin
 <p>以下の要素で <code>stroke-linejoin</code> 属性を使うことができます</p>
 
 <ul>
- <li><a href="/ja/SVG/Element#Shape" title="ja/SVG/Element#Shape">Shape 要素</a> »</li>
- <li><a href="/ja/SVG/Element#TextContent" title="ja/SVG/Element#TextContent">Text content 要素</a> »</li>
+ <li><a href="/ja/SVG/Element#Shape">Shape 要素</a> »</li>
+ <li><a href="/ja/SVG/Element#TextContent">Text content 要素</a> »</li>
 </ul>
 
 <p> </p>
diff --git a/files/ja/web/svg/compatibility_sources/index.html b/files/ja/web/svg/compatibility_sources/index.html
index 062a2f701d..f8f78b7a30 100644
--- a/files/ja/web/svg/compatibility_sources/index.html
+++ b/files/ja/web/svg/compatibility_sources/index.html
@@ -8,7 +8,7 @@ translation_of: Web/SVG/Compatibility_sources
 <p>以下の情報源が SVG 要素と属性の互換性の確認に活用できます。</p>
 
 <ul>
- <li><a href="/ja/docs/SVG_in_Firefox" title="ja/docs/SVG_in_Firefox">https://wiki.developer.mozilla.org/ja/docs/SVG_in_Firefox</a> Firefoxに対する改編履歴あり</li>
+ <li><a href="/ja/docs/SVG_in_Firefox">https://developer.mozilla.org/ja/docs/SVG_in_Firefox</a> Firefoxに対する改編履歴あり</li>
  <li><a class="external" href="http://www.webkit.org/projects/svg/status.xml">http://www.webkit.org/projects/svg/status.xml</a> WebKit, Safari, Chrome 向けの<a class="external" href="http://wayback.archive.org/web/*/http://www.webkit.org/projects/svg/status.xml">記録書庫</a></li>
  <li>Opera 9 以降向けの追加情報は <a class="external" href="http://www.opera.com/docs/specs/opera9/svg/">http://www.opera.com/docs/specs/opera9/svg/</a> 、 Opera 8向けは <a class="external" href="http://www.opera.com/docs/specs/opera8/">http://www.opera.com/docs/specs/opera8/</a></li>
  <li><a class="external" href="http://blogs.msdn.com/b/ie/archive/2010/03/18/svg-in-ie9-roadmap.aspx">http://blogs.msdn.com/b/ie/archive/2010/03/18/svg-in-ie9-roadmap.aspx</a> IE9 向けの対応状況へのヒント</li>
diff --git a/files/ja/web/svg/element/animatecolor/index.html b/files/ja/web/svg/element/animatecolor/index.html
index 8c5927ffe4..1fbecd53f6 100644
--- a/files/ja/web/svg/element/animatecolor/index.html
+++ b/files/ja/web/svg/element/animatecolor/index.html
@@ -31,14 +31,14 @@ translation_of: Web/SVG/Element/animateColor
 <h3 id="グローバル属性">グローバル属性</h3>
 
 <ul>
- <li><a href="/ja/docs/Web/SVG/Attribute#ConditionalProcessing" title="ja/Web/SVG/Attribute#ConditionalProcessing">条件処理属性</a> »</li>
- <li><a href="/ja/docs/Web/SVG/Attribute#Core" title="ja/Web/SVG/Attribute#Core">コア属性</a> »</li>
- <li><a href="/ja/docs/Web/SVG/Attribute#AnimationEvent" title="ja/Web/SVG/Attribute#AnimationEvent">アニメーションイベント属性</a> »</li>
- <li><a href="/ja/docs/Web/SVG/Attribute#XLink" title="ja/Web/SVG/Attribute#XLink">Xlink属性</a> »</li>
- <li><a href="/ja/docs/Web/SVG/Attribute#AnimationAttributeTarget" title="ja/Web/SVG/Attribute#AnimationAttributeTarget">Animation attribute target attributes</a> »</li>
- <li><a href="/ja/docs/Web/SVG/Attribute#AnimationTiming" title="ja/Web/SVG/Attribute#AnimationTiming">アニメーションタイミング属性</a> »</li>
- <li><a href="/ja/docs/Web/SVG/Attribute#AnimationValue" title="ja/Web/SVG/Attribute#AnimationValue">Animation value attributes</a> »</li>
- <li><a href="/ja/docs/Web/SVG/Attribute#AnimationAddition" title="ja/Web/SVG/Attribute#AnimationAddition">Animation addition attributes</a> »</li>
+ <li><a href="/ja/docs/Web/SVG/Attribute#ConditionalProcessing">条件処理属性</a> »</li>
+ <li><a href="/ja/docs/Web/SVG/Attribute#Core">コア属性</a> »</li>
+ <li><a href="/ja/docs/Web/SVG/Attribute#AnimationEvent">アニメーションイベント属性</a> »</li>
+ <li><a href="/ja/docs/Web/SVG/Attribute#XLink">Xlink属性</a> »</li>
+ <li><a href="/ja/docs/Web/SVG/Attribute#AnimationAttributeTarget">Animation attribute target attributes</a> »</li>
+ <li><a href="/ja/docs/Web/SVG/Attribute#AnimationTiming">アニメーションタイミング属性</a> »</li>
+ <li><a href="/ja/docs/Web/SVG/Attribute#AnimationValue">Animation value attributes</a> »</li>
+ <li><a href="/ja/docs/Web/SVG/Attribute#AnimationAddition">Animation addition attributes</a> »</li>
  <li>{{ SVGAttr("externalResourcesRequired") }}</li>
 </ul>
 
diff --git a/files/ja/web/svg/element/animatetransform/index.html b/files/ja/web/svg/element/animatetransform/index.html
index 0113d15dbf..5cef265bb3 100644
--- a/files/ja/web/svg/element/animatetransform/index.html
+++ b/files/ja/web/svg/element/animatetransform/index.html
@@ -42,14 +42,14 @@ translation_of: Web/SVG/Element/animateTransform
 <h3 id="グローバル属性">グローバル属性</h3>
 
 <ul>
- <li><a href="/ja/docs/Web/SVG/Attribute#ConditionalProccessing" title="ja/Web/SVG/Attribute#ConditionalProccessing">条件処理属性</a> »</li>
+ <li><a href="/ja/docs/Web/SVG/Attribute#ConditionalProccessing">条件処理属性</a> »</li>
  <li><a href="/ja/docs/Web/SVG/Attribute#Core" title="en/SVG/Attribute#Core">コア属性</a> »</li>
- <li><a href="/ja/docs/Web/SVG/Attribute#AnimationEvent" title="ja/Web/SVG/Attribute#AnimationEvent">アニメーションイベント属性</a> »</li>
- <li><a href="/ja/docs/Web/SVG/Attribute#XLink" title="ja/Web/SVG/Attribute#XLink">Xlink属性</a> »</li>
- <li><a href="/ja/docs/Web/SVG/Attribute#AnimationAttributeTarget" title="ja/Web/SVG/Attribute#AnimationAttributeTarget">Animation attribute target attributes</a> »</li>
+ <li><a href="/ja/docs/Web/SVG/Attribute#AnimationEvent">アニメーションイベント属性</a> »</li>
+ <li><a href="/ja/docs/Web/SVG/Attribute#XLink">Xlink属性</a> »</li>
+ <li><a href="/ja/docs/Web/SVG/Attribute#AnimationAttributeTarget">Animation attribute target attributes</a> »</li>
  <li><a href="/ja/docs/Web/SVG/Attribute#AnimationTiming" title="en/SVG/Attribute#AnimationTiming">アニメーションタイミング属性</a> »</li>
- <li><a href="/ja/docs/Web/SVG/Attribute#AnimationValue" title="ja/Web/SVG/Attribute#AnimationValue">Animation value attributes</a> »</li>
- <li><a href="/ja/docs/Web/SVG/Attribute#AnimationAddition" title="ja/Web/SVG/Attribute#AnimationAddition">Animation addition attributes</a> »</li>
+ <li><a href="/ja/docs/Web/SVG/Attribute#AnimationValue">Animation value attributes</a> »</li>
+ <li><a href="/ja/docs/Web/SVG/Attribute#AnimationAddition">Animation addition attributes</a> »</li>
  <li>{{ SVGAttr("externalResourcesRequired") }}</li>
 </ul>
 
diff --git a/files/ja/web/svg/element/lineargradient/index.html b/files/ja/web/svg/element/lineargradient/index.html
index 123c6809c3..41aac08a01 100644
--- a/files/ja/web/svg/element/lineargradient/index.html
+++ b/files/ja/web/svg/element/lineargradient/index.html
@@ -26,9 +26,9 @@ translation_of: Web/SVG/Element/linearGradient
 <h3 id="グローバル属性">グローバル属性</h3>
 
 <ul>
- <li><a href="/ja/Web/SVG/Attribute#Core" title="ja/Web/SVG/Attribute#Core">コア属性</a> »</li>
- <li><a href="/ja/Web/SVG/Attribute#Presentation" title="ja/Web/SVG/Attribute#Presentation">プレゼンテーション属性</a> »</li>
- <li><a href="/ja/Web/SVG/Attribute#XLink" title="ja/Web/SVG/Attribute#XLink">Xlink属性</a> »</li>
+ <li><a href="/ja/Web/SVG/Attribute#Core">コア属性</a> »</li>
+ <li><a href="/ja/Web/SVG/Attribute#Presentation">プレゼンテーション属性</a> »</li>
+ <li><a href="/ja/Web/SVG/Attribute#XLink">Xlink属性</a> »</li>
  <li>{{ SVGAttr("class") }}</li>
  <li>{{ SVGAttr("style") }}</li>
  <li>{{ SVGAttr("externalResourcesRequired") }}</li>
diff --git a/files/ja/web/svg/element/metadata/index.html b/files/ja/web/svg/element/metadata/index.html
index 8925ae75ed..10d943d20b 100644
--- a/files/ja/web/svg/element/metadata/index.html
+++ b/files/ja/web/svg/element/metadata/index.html
@@ -22,7 +22,7 @@ translation_of: Web/SVG/Element/metadata
 <h3 id="グローバル属性">グローバル属性</h3>
 
 <ul>
- <li><a href="/ja/Web/SVG/Attribute#Core" title="ja/Web/SVG/Attribute#Core">コア属性</a> »</li>
+ <li><a href="/ja/Web/SVG/Attribute#Core">コア属性</a> »</li>
 </ul>
 
 <h3 id="専用属性">専用属性</h3>
diff --git a/files/ja/web/svg/element/radialgradient/index.html b/files/ja/web/svg/element/radialgradient/index.html
index b617afb4fb..d948931e6c 100644
--- a/files/ja/web/svg/element/radialgradient/index.html
+++ b/files/ja/web/svg/element/radialgradient/index.html
@@ -20,9 +20,9 @@ translation_of: Web/SVG/Element/radialGradient
 <h3 id="グローバル属性">グローバル属性</h3>
 
 <ul>
- <li><a href="/ja/Web/SVG/Attribute#Core" title="ja/Web/SVG/Attribute#Core">コア属性</a> »</li>
- <li><a href="/ja/Web/SVG/Attribute#Presentation" title="ja/Web/SVG/Attribute#Presentation">プレゼンテーション属性</a> »</li>
- <li><a href="/ja/Web/SVG/Attribute#XLink" title="ja/Web/SVG/Attribute#XLink">Xlink属性</a> »</li>
+ <li><a href="/ja/Web/SVG/Attribute#Core">コア属性</a> »</li>
+ <li><a href="/ja/Web/SVG/Attribute#Presentation">プレゼンテーション属性</a> »</li>
+ <li><a href="/ja/Web/SVG/Attribute#XLink">Xlink属性</a> »</li>
  <li>{{ SVGAttr("class") }}</li>
  <li>{{ SVGAttr("style") }}</li>
  <li>{{ SVGAttr("externalResourcesRequired") }}</li>
diff --git a/files/ja/web/svg/element/rect/index.html b/files/ja/web/svg/element/rect/index.html
index 2a6e95ee9e..c4ad070e21 100644
--- a/files/ja/web/svg/element/rect/index.html
+++ b/files/ja/web/svg/element/rect/index.html
@@ -29,10 +29,10 @@ translation_of: Web/SVG/Element/rect
 <h3 id="グローバル属性">グローバル属性</h3>
 
 <ul>
- <li><a href="/ja/Web/SVG/Attribute#ConditionalProcessing" title="ja/Web/SVG/Attribute#ConditionalProccessing">条件処理属性</a> »</li>
- <li><a href="/ja/Web/SVG/Attribute#Core" title="ja/Web/SVG/Attribute#Core">コア属性</a> »</li>
- <li><a href="/ja/Web/SVG/Attribute#GraphicalEvent" title="ja/Web/SVG/Attribute#GraphicalEvent">グラフィカルイベント属性</a> »</li>
- <li><a href="/ja/Web/SVG/Attribute#Presentation" title="ja/Web/SVG/Attribute#Presentation">プレゼンテーション属性</a> »</li>
+ <li><a href="/ja/Web/SVG/Attribute#ConditionalProcessing">条件処理属性</a> »</li>
+ <li><a href="/ja/Web/SVG/Attribute#Core">コア属性</a> »</li>
+ <li><a href="/ja/Web/SVG/Attribute#GraphicalEvent">グラフィカルイベント属性</a> »</li>
+ <li><a href="/ja/Web/SVG/Attribute#Presentation">プレゼンテーション属性</a> »</li>
  <li>{{ SVGAttr("class") }}</li>
  <li>{{ SVGAttr("style") }}</li>
  <li>{{ SVGAttr("externalResourcesRequired") }}</li>
diff --git a/files/ja/web/svg/element/set/index.html b/files/ja/web/svg/element/set/index.html
index 0f2373d15b..ff85e944c3 100644
--- a/files/ja/web/svg/element/set/index.html
+++ b/files/ja/web/svg/element/set/index.html
@@ -25,12 +25,12 @@ translation_of: Web/SVG/Element/set
 <h3 id="グローバル属性">グローバル属性</h3>
 
 <ul>
- <li><a href="/ja/Web/SVG/Attribute#ConditionalProcessing" title="ja/Web/SVG/Attribute#ConditionalProccessing">条件処理属性</a> »</li>
- <li><a href="/ja/Web/SVG/Attribute#Core" title="ja/Web/SVG/Attribute#Core">コア属性</a> »</li>
- <li><a href="/ja/Web/SVG/Attribute#AnimationEvent" title="ja/Web/SVG/Attribute#AnimationEvent">アニメーションイベント属性</a> »</li>
- <li><a href="/ja/Web/SVG/Attribute#XLink" title="ja/Web/SVG/Attribute#XLink">Xlink属性</a> »</li>
- <li><a href="/ja/Web/SVG/Attribute#AnimationAttributeTarget" title="ja/Web/SVG/Attribute#AnimationAttributeTarget">Animation attribute target attributes</a> »</li>
- <li><a href="/ja/Web/SVG/Attribute#AnimationTiming" title="ja/Web/SVG/Attribute#AnimationTiming">アニメーションタイミング属性</a> »</li>
+ <li><a href="/ja/Web/SVG/Attribute#ConditionalProcessing">条件処理属性</a> »</li>
+ <li><a href="/ja/Web/SVG/Attribute#Core">コア属性</a> »</li>
+ <li><a href="/ja/Web/SVG/Attribute#AnimationEvent">アニメーションイベント属性</a> »</li>
+ <li><a href="/ja/Web/SVG/Attribute#XLink">Xlink属性</a> »</li>
+ <li><a href="/ja/Web/SVG/Attribute#AnimationAttributeTarget">Animation attribute target attributes</a> »</li>
+ <li><a href="/ja/Web/SVG/Attribute#AnimationTiming">アニメーションタイミング属性</a> »</li>
  <li>{{ SVGAttr("externalResourcesRequired") }}</li>
 </ul>
 
diff --git a/files/ja/web/svg/svg_animation_with_smil/index.html b/files/ja/web/svg/svg_animation_with_smil/index.html
index 4961bed4e2..0d70f03fe8 100644
--- a/files/ja/web/svg/svg_animation_with_smil/index.html
+++ b/files/ja/web/svg/svg_animation_with_smil/index.html
@@ -3,7 +3,7 @@ title: SVG animation with SMIL
 slug: Web/SVG/SVG_animation_with_SMIL
 translation_of: Web/SVG/SVG_animation_with_SMIL
 ---
-<p>Firefox 4 より、<a class="external" href="http://www.w3.org/TR/REC-smil">Synchronized Multimedia Integration Language</a> (SMIL) を用いた <a href="/ja/SVG" title="ja/SVG">SVG</a> のアニメーションをサポートしています。SMIL では以下のようなことができます:</p>
+<p>Firefox 4 より、<a class="external" href="http://www.w3.org/TR/REC-smil">Synchronized Multimedia Integration Language</a> (SMIL) を用いた <a href="/ja/SVG">SVG</a> のアニメーションをサポートしています。SMIL では以下のようなことができます:</p>
 
 <ul>
  <li>要素の数値属性 (x, y など) のアニメーション</li>
diff --git a/files/ja/web/svg/tutorial/basic_shapes/index.html b/files/ja/web/svg/tutorial/basic_shapes/index.html
index 2b87124f8a..9ad6201924 100644
--- a/files/ja/web/svg/tutorial/basic_shapes/index.html
+++ b/files/ja/web/svg/tutorial/basic_shapes/index.html
@@ -29,47 +29,47 @@ translation_of: Web/SVG/Tutorial/Basic_Shapes
 </pre>
 <div class="note"><strong>注意:</strong> <code>stroke</code>、<code>stroke-width</code> および <code>fill</code> の各属性は後のチュートリアルで説明します。</div>
 <h3 id="Rectangles" name="Rectangles">長方形</h3>
-<p><a href="/ja/SVG/Element/rect" title="ja/SVG/Element/rect">rect</a> 要素は、おそらくあなたの予想とまったく同じで、スクリーンに長方形を描画します。この要素にはスクリーン上の位置や形状を操作する、6 種類の基本的な属性があります。前出の画像には 2 つの rect 要素があり、それは少し冗長になっています。右側の長方形は rx および ry 属性があり、これは角を丸くします。これらを設定しない場合、初期値は 0 になります。</p>
+<p><a href="/ja/SVG/Element/rect">rect</a> 要素は、おそらくあなたの予想とまったく同じで、スクリーンに長方形を描画します。この要素にはスクリーン上の位置や形状を操作する、6 種類の基本的な属性があります。前出の画像には 2 つの rect 要素があり、それは少し冗長になっています。右側の長方形は rx および ry 属性があり、これは角を丸くします。これらを設定しない場合、初期値は 0 になります。</p>
 <pre class="eval"> &lt;rect x="10" y="10" width="30" height="30"/&gt;
  &lt;rect x="60" y="10" rx="10" ry="10" width="30" height="30"/&gt;
 </pre>
 <dl> <dt>x</dt> <dd>長方形の左上の角の位置を示す、X 座標です。</dd> <dt>y</dt> <dd>長方形の左上の角の位置を示す、Y 座標です。</dd> <dt>width</dt> <dd>長方形の幅です。</dd> <dt>height</dt> <dd>長方形の高さです。</dd> <dt>rx</dt> <dd>長方形の角の、X 軸方向の半径です。</dd> <dt>ry</dt> <dd>長方形の角の、Y 軸方向の半径です。</dd>
 </dl>
 <h3 id="Circle" name="Circle">円</h3>
-<p>おそらくあなたの推測どおりで、<a href="/ja/SVG/Element/circle" title="ja/SVG/Element/circle">circle</a> 要素はスクリーンに円を描画します。ここで適用できる属性は 3 種類です。</p>
+<p>おそらくあなたの推測どおりで、<a href="/ja/SVG/Element/circle">circle</a> 要素はスクリーンに円を描画します。ここで適用できる属性は 3 種類です。</p>
 <pre class="eval"> &lt;circle cx="25" cy="75" r="20"/&gt;
 </pre>
 <dl> <dt>r</dt> <dd>円の半径です。</dd> <dt>cx</dt> <dd>円の中心の位置を示す、X 座標です。</dd> <dt>cy</dt> <dd>円の中心の位置を示す、Y 座標です。</dd>
 </dl>
 <h3 id="Ellipse" name="Ellipse">楕円</h3>
-<p><a href="/ja/SVG/Element/ellipse" title="ja/SVG/Element/ellipse">ellipse</a> は、実は circle 要素のより一般的な形であり、円の X 方向および Y 方向の半径 (数学者は一般的に長半径および短半径と呼びます) を分けて調節することができます。</p>
+<p><a href="/ja/SVG/Element/ellipse">ellipse</a> は、実は circle 要素のより一般的な形であり、円の X 方向および Y 方向の半径 (数学者は一般的に長半径および短半径と呼びます) を分けて調節することができます。</p>
 <pre class="eval"> &lt;ellipse cx="75" cy="75" rx="20" ry="5"/&gt;
 </pre>
 <dl> <dt>rx</dt> <dd>楕円の X 軸方向の半径です。</dd> <dt>ry</dt> <dd>楕円の Y 軸方向の半径です。</dd> <dt>cx</dt> <dd>楕円の中心の位置を示す、X 座標です。</dd> <dt>cy</dt> <dd>楕円の中心の座標を示す、Y 座標です。</dd>
 </dl>
 <h3 id="Line" name="Line">直線</h3>
-<p><a href="/ja/SVG/Element/line" title="ja/SVG/Element/line">line</a> は直線を描画します。これは線の始点と終点になる 2 つの点を示す属性を持ちます。</p>
+<p><a href="/ja/SVG/Element/line">line</a> は直線を描画します。これは線の始点と終点になる 2 つの点を示す属性を持ちます。</p>
 <pre class="eval"> &lt;line x1="10" x2="50" y1="110" y2="150"/&gt;
 </pre>
 <dl> <dt>x1</dt> <dd>点 1 の X 座標です。</dd> <dt>y1</dt> <dd>点 1 の Y 座標です。</dd> <dt>x2</dt> <dd>点 2 の X 座標です。</dd> <dt>y2</dt> <dd>点 2 の Y 座標です。</dd>
 </dl>
 <h3 id="Polyline" name="Polyline">ポリライン</h3>
-<p><a href="/ja/SVG/Element/polyline" title="ja/SVG/Element/polyline">polyline</a> は、連結された直線のグループです。リストがとても長くなるため、すべての点は 1 つの属性に収められます:</p>
+<p><a href="/ja/SVG/Element/polyline">polyline</a> は、連結された直線のグループです。リストがとても長くなるため、すべての点は 1 つの属性に収められます:</p>
 <pre class="eval"> &lt;polyline points="60 110, 65 120, 70 115, 75 130, 80 125, 85 140, 90 135, 95 150, 100 145"/&gt;
 </pre>
 <dl> <dt>points</dt> <dd>点のリストで、各々の数値は空白、カンマ、<abbr title="End of line">EOL</abbr>、またはラインフィード文字で区切ります。各々の点は X 座標と Y 座標の 2 つの値を持たなければなりません。従って (0,0), (1,1) (2,2) のリストはこのように記述します: "0 0, 1 1, 2 2"。</dd>
 </dl>
 <h3 id="Polygon" name="Polygon">多角形</h3>
-<p><a href="/ja/SVG/Element/polygon" title="ja/SVG/Element/polygon">polygon</a> は、点のリストを結ぶ直線の断片を連結して構成される点がポリラインとよく似ています。しかし polygon では、終端で線のパスが自動的に最初の点に戻ることで、閉じた図形を作成します。長方形は多角形の一種であるので、より柔軟性が必要である場合は <code>&lt;rect/&gt;</code> 要素を作成するために polygon を用いることができることに留意してください。</p>
+<p><a href="/ja/SVG/Element/polygon">polygon</a> は、点のリストを結ぶ直線の断片を連結して構成される点がポリラインとよく似ています。しかし polygon では、終端で線のパスが自動的に最初の点に戻ることで、閉じた図形を作成します。長方形は多角形の一種であるので、より柔軟性が必要である場合は <code>&lt;rect/&gt;</code> 要素を作成するために polygon を用いることができることに留意してください。</p>
 <pre class="eval"> &lt;polygon points="50 160, 55 180, 70 180, 60 190, 65 205, 50 195, 35 205, 40 190, 30 180, 45 180"/&gt;
 </pre>
 <dl> <dt>points</dt> <dd>点のリストで、各々の数値は空白、カンマ、<abbr title="End of line">EOL</abbr>、またはラインフィード文字で区切ります。各々の点は X 座標と Y 座標の 2 つの値を持たなければなりません。従って (0,0), (1,1) (2,2) のリストはこのように記述します: "0 0, 1 1, 2 2"。パスを閉じるように描画するため、最後の直線は (2,2) から (0,0) に描画されます。</dd>
 </dl>
 <h3 id="Path" name="Path">パス</h3>
-<p><a href="/ja/SVG/Element/path" title="ja/SVG/Element/path">path</a> は SVG で使用できる図形の中でもっとも一般的なものでしょう。path 要素を用いて長方形 (角を丸めることもできます)、円、楕円、ポリライン、多角形を描画することができます。基本的には他の図形、ベジェ曲線、二次曲線などのいずれかになります。以上の理由からパスについてはこのチュートリアルの<a href="/ja/SVG/Tutorial/Paths" title="ja/SVG/Tutorial/Paths">次のセクション</a>に独立していますが、 ここではその図形をコントロールするただ一つの属性があることを示します。</p>
+<p><a href="/ja/SVG/Element/path">path</a> は SVG で使用できる図形の中でもっとも一般的なものでしょう。path 要素を用いて長方形 (角を丸めることもできます)、円、楕円、ポリライン、多角形を描画することができます。基本的には他の図形、ベジェ曲線、二次曲線などのいずれかになります。以上の理由からパスについてはこのチュートリアルの<a href="/ja/SVG/Tutorial/Paths">次のセクション</a>に独立していますが、 ここではその図形をコントロールするただ一つの属性があることを示します。</p>
 <pre class="eval"> &lt;path d="M 20 230 Q 40 205, 50 230 T 90230"/&gt;
 </pre>
-<dl> <dt>d</dt> <dd>点のリストと、パスの描画方法に関する情報です。詳しくは <a href="/ja/SVG/Tutorial/Paths" title="ja/SVG/Tutorial/Paths">Paths</a> をご覧ください。</dd>
+<dl> <dt>d</dt> <dd>点のリストと、パスの描画方法に関する情報です。詳しくは <a href="/ja/SVG/Tutorial/Paths">Paths</a> をご覧ください。</dd>
 </dl>
 <p>{{ PreviousNext("SVG/Tutorial/Positions", "SVG/Tutorial/Paths") }}</p>
 <p><span class="comment">Interwiki Languages Links</span></p>
diff --git a/files/ja/web/svg/tutorial/patterns/index.html b/files/ja/web/svg/tutorial/patterns/index.html
index e0b7fcd4fb..a79fe98e90 100644
--- a/files/ja/web/svg/tutorial/patterns/index.html
+++ b/files/ja/web/svg/tutorial/patterns/index.html
@@ -8,7 +8,7 @@ translation_of: Web/SVG/Tutorial/Patterns
 ---
 <p>{{ PreviousNext("SVG/Tutorial/Gradients", "SVG/Tutorial/Texts") }}</p>
 
-<p>私見では、パターンは SVG で用いる中でわかりにくい塗りつぶし方のひとつです。とはいえとても強力であるので、パターンには説明および少なくとも基礎的な部分は把握するだけの価値があります。グラデーションと同様に、<a href="/ja/SVG/Element/pattern" title="ja/SVG/Element/pattern"><code>&lt;pattern&gt;</code></a> 要素は SVG ファイルの <code>&lt;defs&gt;</code> セクションに置かなければなりません。</p>
+<p>私見では、パターンは SVG で用いる中でわかりにくい塗りつぶし方のひとつです。とはいえとても強力であるので、パターンには説明および少なくとも基礎的な部分は把握するだけの価値があります。グラデーションと同様に、<a href="/ja/SVG/Element/pattern"><code>&lt;pattern&gt;</code></a> 要素は SVG ファイルの <code>&lt;defs&gt;</code> セクションに置かなければなりません。</p>
 
 <p><img alt="" class="internal" src="/@api/deki/files/350/=SVG_Pattern_Example.png" style="float: right;"></p>
 
diff --git a/files/ko/_redirects.txt b/files/ko/_redirects.txt
index 472e365864..eca610565f 100644
--- a/files/ko/_redirects.txt
+++ b/files/ko/_redirects.txt
@@ -456,6 +456,7 @@
 /ko/docs/Web/API/HTMLHyperlinkElementUtils/href	/ko/docs/Web/API/HTMLAnchorElement/href
 /ko/docs/Web/API/HTML_드래그_앤_드롭_API	/ko/docs/Web/API/HTML_Drag_and_Drop_API
 /ko/docs/Web/API/HTML_드래그_앤_드롭_API/Drag_operations	/ko/docs/Web/API/HTML_Drag_and_Drop_API/Drag_operations
+/ko/docs/Web/API/Index	/ko/docs/conflicting/Web/API
 /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
@@ -489,7 +490,8 @@
 /ko/docs/Web/API/WebGL_API/Using_shaders_to_apply_color_in_WebGL	/ko/docs/Web/API/WebGL_API/Tutorial/Using_shaders_to_apply_color_in_WebGL
 /ko/docs/Web/API/WebGL_API/Using_textures_in_WebGL	/ko/docs/Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL
 /ko/docs/Web/API/Web_Workers_API/basic_usage	/ko/docs/Web/API/Web_Workers_API/Using_web_workers
-/ko/docs/Web/API/WindowTimers/setTimeout	/ko/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout
+/ko/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout	/ko/docs/Web/API/setTimeout
+/ko/docs/Web/API/WindowTimers/setTimeout	/ko/docs/Web/API/setTimeout
 /ko/docs/Web/API/XMLHttpRequest/timeout	/ko/docs/Web/API/XMLHttpRequest/timeout_event
 /ko/docs/Web/API/document.importNode	/ko/docs/Web/API/Document/importNode
 /ko/docs/Web/API/element-temp	/ko/docs/Web/API/Element
@@ -501,6 +503,9 @@
 /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
 /ko/docs/Web/CSS/CSS_Background_and_Borders	/ko/docs/Web/CSS/CSS_Backgrounds_and_Borders
+/ko/docs/Web/CSS/CSS_Background_and_Borders/Border-image_generator	/ko/docs/Web/CSS/CSS_Backgrounds_and_Borders/Border-image_generator
+/ko/docs/Web/CSS/CSS_Background_and_Borders/Border-radius_generator	/ko/docs/Web/CSS/CSS_Backgrounds_and_Borders/Border-radius_generator
+/ko/docs/Web/CSS/CSS_Background_and_Borders/Box-shadow_generator	/ko/docs/Web/CSS/CSS_Backgrounds_and_Borders/Box-shadow_generator
 /ko/docs/Web/CSS/CSS_Backgrounds_and_Borders/Scaling_background_images	/ko/docs/Web/CSS/CSS_Backgrounds_and_Borders/Resizing_background_images
 /ko/docs/Web/CSS/CSS_Colors	/ko/docs/Web/CSS/CSS_Color
 /ko/docs/Web/CSS/CSS_Flexible_Box_Layout/Flexbox의_기본_개념	/ko/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox
diff --git a/files/ko/_wikihistory.json b/files/ko/_wikihistory.json
index 9547a8024f..58636a3a7f 100644
--- a/files/ko/_wikihistory.json
+++ b/files/ko/_wikihistory.json
@@ -5525,12 +5525,6 @@
       "bsidesoft"
     ]
   },
-  "Web/API/Index": {
-    "modified": "2019-03-06T12:18:21.576Z",
-    "contributors": [
-      "alattalatta"
-    ]
-  },
   "Web/API/IndexedDB_API": {
     "modified": "2020-02-21T12:46:53.785Z",
     "contributors": [
@@ -7535,13 +7529,6 @@
       "alattalatta"
     ]
   },
-  "Web/API/WindowOrWorkerGlobalScope/setTimeout": {
-    "modified": "2019-03-23T22:22:22.449Z",
-    "contributors": [
-      "DevJang",
-      "TroyTae"
-    ]
-  },
   "Web/API/Worker": {
     "modified": "2020-10-15T21:47:12.252Z",
     "contributors": [
@@ -7652,6 +7639,13 @@
       "junho85"
     ]
   },
+  "Web/API/setTimeout": {
+    "modified": "2019-03-23T22:22:22.449Z",
+    "contributors": [
+      "DevJang",
+      "TroyTae"
+    ]
+  },
   "Web/Accessibility": {
     "modified": "2019-09-09T14:15:43.285Z",
     "contributors": [
@@ -8041,33 +8035,33 @@
       "jaemin_jo"
     ]
   },
-  "Web/CSS/CSS_Background_and_Borders/Border-image_generator": {
+  "Web/CSS/CSS_Backgrounds_and_Borders": {
+    "modified": "2020-08-10T06:40:27.369Z",
+    "contributors": [
+      "alattalatta",
+      "Sheppy"
+    ]
+  },
+  "Web/CSS/CSS_Backgrounds_and_Borders/Border-image_generator": {
     "modified": "2019-03-20T10:30:55.489Z",
     "contributors": [
       "alattalatta",
       "young-gratia"
     ]
   },
-  "Web/CSS/CSS_Background_and_Borders/Border-radius_generator": {
+  "Web/CSS/CSS_Backgrounds_and_Borders/Border-radius_generator": {
     "modified": "2019-03-20T10:29:25.952Z",
     "contributors": [
       "alattalatta",
       "young-gratia"
     ]
   },
-  "Web/CSS/CSS_Background_and_Borders/Box-shadow_generator": {
+  "Web/CSS/CSS_Backgrounds_and_Borders/Box-shadow_generator": {
     "modified": "2019-03-20T10:32:14.015Z",
     "contributors": [
       "alattalatta"
     ]
   },
-  "Web/CSS/CSS_Backgrounds_and_Borders": {
-    "modified": "2020-08-10T06:40:27.369Z",
-    "contributors": [
-      "alattalatta",
-      "Sheppy"
-    ]
-  },
   "Web/CSS/CSS_Backgrounds_and_Borders/Resizing_background_images": {
     "modified": "2019-04-08T10:28:17.719Z",
     "contributors": [
@@ -17539,15 +17533,9 @@
     ]
   },
   "conflicting/Web/API": {
-    "modified": "2019-03-23T23:30:26.179Z",
+    "modified": "2019-03-06T12:18:21.576Z",
     "contributors": [
-      "wbamberg",
-      "fscholz",
-      "oohii",
-      "hyeonseok",
-      "PillarLee",
-      "junho85",
-      "francisco.jordano"
+      "alattalatta"
     ]
   },
   "conflicting/Web/API/Document_Object_Model": {
diff --git a/files/ko/conflicting/web/api/index.html b/files/ko/conflicting/web/api/index.html
new file mode 100644
index 0000000000..d74c755289
--- /dev/null
+++ b/files/ko/conflicting/web/api/index.html
@@ -0,0 +1,11 @@
+---
+title: Index
+slug: conflicting/Web/API
+tags:
+  - API
+  - Index
+  - Landing
+translation_of: Web/API/Index
+original_slug: Web/API/Index
+---
+<p>{{Index("/ko/docs/Web/API")}}</p>
diff --git a/files/ko/glossary/bootstrap/index.html b/files/ko/glossary/bootstrap/index.html
index d2d6cff4b3..2382a0edf3 100644
--- a/files/ko/glossary/bootstrap/index.html
+++ b/files/ko/glossary/bootstrap/index.html
@@ -13,7 +13,7 @@ translation_of: Glossary/Bootstrap
 
 <p>Bootstrap은 당초 Twitter Blueprint라고 불렸으며, <a href="https://twitter.com/"> Twitter</a> 개발자에 의해 개발되었습니다. 반응형 디자인을 지원하며 그대로 사용하거나 필요에 따라 자신의 코드에 맞추어 사용할 수 있는 사전 정의된 디자인 템플릿이 있습니다. 부트스트랩은 모든 모던 브라우저와 {{glossary("Microsoft Internet Explorer", "Internet Explorer")}} 의 최근 버전과 호환되기 때문에 타 브라우저와의 호환성에 대해 걱정하지 않으셔도 됩니다.</p>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li>Wikipedia 의 기사 {{interwiki("wikipedia", "Bootstrap", "Bootstrap")}}</li>
  <li><a href="https://getbootstrap.com/">Bootstrap 다운로드</a></li>
diff --git a/files/ko/glossary/browser/index.html b/files/ko/glossary/browser/index.html
index 093879c392..feec75cd91 100644
--- a/files/ko/glossary/browser/index.html
+++ b/files/ko/glossary/browser/index.html
@@ -19,7 +19,7 @@ translation_of: Glossary/Browser
  <li><a href="http://www.opera.com/" rel="external">Opera Browser</a></li>
 </ul>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li><a href="/ko/docs/Glossary">MDN 웹 문서 용어 사전</a>
 
diff --git a/files/ko/glossary/character_set/index.html b/files/ko/glossary/character_set/index.html
index 7c6d876238..ddbeae2236 100644
--- a/files/ko/glossary/character_set/index.html
+++ b/files/ko/glossary/character_set/index.html
@@ -28,4 +28,4 @@ translation_of: Glossary/character_set
  </li>
 </ol>
 
-<section class="Quick_links" id="Quick_Links"></section>
+<section id="Quick_links"></section>
diff --git a/files/ko/glossary/cross_axis/index.html b/files/ko/glossary/cross_axis/index.html
index 0824f20777..3b9702032c 100644
--- a/files/ko/glossary/cross_axis/index.html
+++ b/files/ko/glossary/cross_axis/index.html
@@ -40,7 +40,7 @@ translation_of: Glossary/Cross_Axis
  <li>CSS Flexbox Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Mastering_Wrapping_of_Flex_Items">Mastering wrapping of flex items</a></em></li>
 </ul>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li><a href="/ko/docs/Glossary">MDN Web Docs 용어 사전</a>
 
diff --git a/files/ko/glossary/endianness/index.html b/files/ko/glossary/endianness/index.html
index 8963a4ee47..5aec7a0e0a 100644
--- a/files/ko/glossary/endianness/index.html
+++ b/files/ko/glossary/endianness/index.html
@@ -21,7 +21,7 @@ translation_of: Glossary/Endianness
  <li>혼합 엔디언(구형, 매우 드묾): <code>0x34 0x12 0x78 0x56</code></li>
 </ul>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li>같이 보기
   <ol>
diff --git a/files/ko/glossary/flexbox/index.html b/files/ko/glossary/flexbox/index.html
index 644393b94e..1d302b45af 100644
--- a/files/ko/glossary/flexbox/index.html
+++ b/files/ko/glossary/flexbox/index.html
@@ -48,7 +48,7 @@ translation_of: Glossary/Flexbox
  <li>CSS Flexbox Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox">Typical use cases of flexbox</a></em></li>
 </ul>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li><a href="/ko/docs/Glossary">MDN Web Docs 용어 사전</a>
 
diff --git a/files/ko/glossary/global_object/index.html b/files/ko/glossary/global_object/index.html
index f976e6b08d..3c22e644c0 100644
--- a/files/ko/glossary/global_object/index.html
+++ b/files/ko/glossary/global_object/index.html
@@ -54,7 +54,7 @@ window.greeting(); // It is the same as the normal invoking: greeting();
    console.log("Hi!");
 }</pre>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ul>
  <li><a href="/en-US/docs/Glossary">MDN Web Docs Glossary</a>
 
diff --git a/files/ko/glossary/graceful_degradation/index.html b/files/ko/glossary/graceful_degradation/index.html
index 31303a2431..4c3090087d 100644
--- a/files/ko/glossary/graceful_degradation/index.html
+++ b/files/ko/glossary/graceful_degradation/index.html
@@ -20,7 +20,7 @@ translation_of: Glossary/Graceful_degradation
  <li>{{Interwiki("wikipedia", "Graceful degradation")}} on Wikipedia</li>
 </ul>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ul>
  <li><a href="/en-US/docs/Glossary">MDN Web Docs Glossary</a>
 
diff --git a/files/ko/glossary/http_2/index.html b/files/ko/glossary/http_2/index.html
index e873bd11c2..28035d1f1c 100644
--- a/files/ko/glossary/http_2/index.html
+++ b/files/ko/glossary/http_2/index.html
@@ -7,7 +7,7 @@ translation_of: Glossary/HTTP_2
 
 <p>HTTP/2는 HTTP의 어플리케이션 의미를 수정하지 않습니다. HTTP 메소드, 상태 코드, URI, 헤더 필드와 같은 HTTP 1.1의 핵심 개념은 그대로 유지됩니다. 대신, HTTP/2는 전체 프로세스를 관리하는 두 가지 방식, 데이터의 포맷(프레임) 방식과 클라이언트-서버 사이의 전송 방식을 수정하여 새로운 프레임 계층 내에서 어플리케이션 복잡성을 숨깁니다. 그 결과, 기존의 모든 어플리케이션은 수정 과정을 거치지 않고 전달될 수 있습니다. </p>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li>참고
   <ol>
diff --git a/files/ko/glossary/iife/index.html b/files/ko/glossary/iife/index.html
index c9ccc8be4b..86c2951685 100644
--- a/files/ko/glossary/iife/index.html
+++ b/files/ko/glossary/iife/index.html
@@ -37,7 +37,7 @@ aName // throws "Uncaught ReferenceError: aName is not defined"
 // 즉시 결과를 생성한다.
 result; // "Barry"</pre>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li>더 알아보기
   <ol>
diff --git a/files/ko/glossary/index.html b/files/ko/glossary/index.html
index bf00206eda..4dbd0c6429 100644
--- a/files/ko/glossary/index.html
+++ b/files/ko/glossary/index.html
@@ -31,7 +31,7 @@ translation_of: Glossary
 <div class="hidden">
 <h2 id="Subnav">Subnav</h2>
 
-<section id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li><strong><a href="/en-US/docs/Glossary">MDN Web Docs Glossary</a></strong>{{ListSubpagesForSidebar("/en-us/docs/Glossary", 1)}}</li>
 </ol>
diff --git a/files/ko/glossary/method/index.html b/files/ko/glossary/method/index.html
index d994f9b1ae..c83ba7d73d 100644
--- a/files/ko/glossary/method/index.html
+++ b/files/ko/glossary/method/index.html
@@ -24,7 +24,7 @@ translation_of: Glossary/Method
  <li><a href="/en-US/docs/Web/JavaScript/Reference/Methods_Index">List of JavaScript built-in methods</a></li>
 </ul>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ul>
  <li><a href="/en-US/docs/Glossary">MDN Web Docs Glossary</a>
 
diff --git a/files/ko/glossary/null/index.html b/files/ko/glossary/null/index.html
index bbf1e8f80e..2ffd866dfd 100644
--- a/files/ko/glossary/null/index.html
+++ b/files/ko/glossary/null/index.html
@@ -16,7 +16,7 @@ translation_of: Glossary/Null
 
 <pre class="brush: js notranslate">typeof null === 'object' // true</pre>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ul>
  <li><strong><a href="/en-US/docs/Glossary">Glossary</a></strong>
 
diff --git a/files/ko/glossary/primitive/index.html b/files/ko/glossary/primitive/index.html
index 38f8e55645..95b13b196f 100644
--- a/files/ko/glossary/primitive/index.html
+++ b/files/ko/glossary/primitive/index.html
@@ -7,7 +7,7 @@ tags:
   - JavaScript
 translation_of: Glossary/Primitive
 ---
-<p>{{Glossary("JavaScript")}}에서 <strong>원시 값</strong>(primitive, 또는 원시 자료형)이란 {{Glossary("object", "객체")}}가 아니면서 {{glossary("method", "메서드")}}도 가지지 않는 데이터입니다. 원시 값에는 7종류, {{Glossary("string")}}, {{Glossary("number")}}, {{glossary("bigint")}}, {{Glossary("boolean")}}, {{Glossary("undefined")}}, {{Glossary("symbol")}}, 그리고 {{glossary("null")}}이 존재합니다. 
+<p>{{Glossary("JavaScript")}}에서 <strong>원시 값</strong>(primitive, 또는 원시 자료형)이란 {{Glossary("object", "객체")}}가 아니면서 {{glossary("method", "메서드")}}도 가지지 않는 데이터입니다. 원시 값에는 7종류, {{Glossary("string")}}, {{Glossary("number")}}, {{glossary("bigint")}}, {{Glossary("boolean")}}, {{Glossary("undefined")}}, {{Glossary("symbol")}}, 그리고 {{glossary("null")}}이 존재합니다.
 
 <p>대부분의 경우, 원시 값은 언어 구현체의 가장 저급(low level) 단계에서 나타냅니다.</p>
 
@@ -105,7 +105,7 @@ console.log(foo);   // 5
  <li>위키백과 {{Interwiki("wikipedia", "원시 자료형")}}</li>
 </ul>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li><a href="/ko/docs/Glossary">용어 사전</a>
 
diff --git a/files/ko/glossary/semantics/index.html b/files/ko/glossary/semantics/index.html
index 256defb7d1..adbd800d6d 100644
--- a/files/ko/glossary/semantics/index.html
+++ b/files/ko/glossary/semantics/index.html
@@ -124,7 +124,7 @@ translation_of: Glossary/Semantics
  <li>{{interwiki("wikipedia", "Semantics#Computer_science", "The meaning of semantics in computer science")}} on Wikipedia</li>
 </ul>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ul>
  <li><a href="/en-US/docs/Glossary">MDN Web Docs Glossary</a>
 
diff --git a/files/ko/glossary/smtp/index.html b/files/ko/glossary/smtp/index.html
index f38e300389..29246d4bdf 100644
--- a/files/ko/glossary/smtp/index.html
+++ b/files/ko/glossary/smtp/index.html
@@ -11,7 +11,7 @@ translation_of: Glossary/SMTP
 
 <p>SMTP는 상대적으로 직관적입니다. 복잡함을 유발하는 주요 원인은 다양한 인증 방법(<a class="external" href="http://en.wikipedia.org/wiki/Generic_Security_Services_Application_Program_Interface"><abbr title="Generic Security Services Application Program Interface">GSSAPI</abbr></a>, <a class="external" href="http://en.wikipedia.org/wiki/CRAM-MD5"><abbr title="challenge-response authentication mechanism">CRAM-MD5</abbr></a>, <a class="external" href="http://en.wikipedia.org/wiki/NTLM"><abbr title="NT LAN Manager">NTLM</abbr></a>, MSN, AUTH LOGIN, AUTH PLAIN...) 지원, 오류 응답 처리, 인증 실패(서버에서 어떤 방법을 지원한다고 주장했으나 사실 아닐 때 등) 시 처리 등입니다.</p>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li><a href="/ko/docs/Glossary">용어 사전</a>
 
diff --git a/files/ko/glossary/ssl/index.html b/files/ko/glossary/ssl/index.html
index d522912ce3..b405fade0f 100644
--- a/files/ko/glossary/ssl/index.html
+++ b/files/ko/glossary/ssl/index.html
@@ -5,7 +5,7 @@ translation_of: Glossary/SSL
 ---
 <p class="seoSummary">Secure Sockets Layer(SSL)는 클라이언트와 서버 간의 안전한 링크를 통해 송수신되는 모든 데이터를 안전하게 보장하는 과거의 보안 표준 기술이었다. SSL 버전 3.0은 Netscape가 1999년에 발표했으며 현재에는 {{Glossary("TLS", "Transport Layer Security (TLS)")}} 로 대체되었다.</p>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li>See also
   <ol>
diff --git a/files/ko/glossary/tcp/index.html b/files/ko/glossary/tcp/index.html
index e7d09d2492..e2a8840f19 100644
--- a/files/ko/glossary/tcp/index.html
+++ b/files/ko/glossary/tcp/index.html
@@ -7,7 +7,7 @@ translation_of: Glossary/TCP
 
 <p>TCP의 역할은 에러가 없이 패킷이 신뢰할 수 있게 전달 되었는지 보증해 주는 것이다. TCP는 동시제어가 가능하다. 이는 초기 요청이 작게 시작해도 컴퓨터들과 서버들의 대역폭의 깊이가 증가해도 네트워크가 지원할 수 있다는 것을 뜻한다.</p>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li><a href="/en-US/docs/Glossary">Glossary</a>
 
diff --git a/files/ko/glossary/tls/index.html b/files/ko/glossary/tls/index.html
index df1e21aad0..fade050e75 100644
--- a/files/ko/glossary/tls/index.html
+++ b/files/ko/glossary/tls/index.html
@@ -11,7 +11,7 @@ translation_of: Glossary/TLS
 <p><strong>Note</strong>: TLS 1.0 와 1.1 2020년 초부터 대부분의 브라우저에서 지원하지 않을 예정이다; 웹 브라우저가 TLS 1.2 나 TLS 1.3을 지원하는지 확인해보는 것이 좋을 것이다. Firefox는 버전 74 이후로 구 TLS 버전을 사용해서 서버에 연결을 시도할 경우 <a href="https://support.mozilla.org/en-US/kb/secure-connection-failed-firefox-did-not-connect">Secure Connection Failed</a> 에러를 반환한다. ({{bug(1606734)}}).</p>
 </div>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li>Specifications
   <ol>
diff --git a/files/ko/glossary/user_agent/index.html b/files/ko/glossary/user_agent/index.html
index dbfda1be0c..db272254e9 100644
--- a/files/ko/glossary/user_agent/index.html
+++ b/files/ko/glossary/user_agent/index.html
@@ -39,7 +39,7 @@ translation_of: Glossary/User_agent
  <li>{{RFC(2616, "14.43")}}: <code>User-Agent</code> 헤더</li>
 </ul>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li><a href="/ko/docs/Glossary">MDN 웹 문서 용어 사전</a>
 
diff --git a/files/ko/glossary/wrapper/index.html b/files/ko/glossary/wrapper/index.html
index 3c0786921b..65a6ceda46 100644
--- a/files/ko/glossary/wrapper/index.html
+++ b/files/ko/glossary/wrapper/index.html
@@ -13,7 +13,7 @@ translation_of: Glossary/Wrapper
 
 <p>Wikipedia의 {{Interwiki("wikipedia", "Wrapper function")}} </p>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li><a href="/en-US/docs/Glossary">MDN Web Docs Glossary</a>
 
diff --git a/files/ko/learn/javascript/objects/basics/index.html b/files/ko/learn/javascript/objects/basics/index.html
index a31c5ed163..258ecf7d14 100644
--- a/files/ko/learn/javascript/objects/basics/index.html
+++ b/files/ko/learn/javascript/objects/basics/index.html
@@ -78,10 +78,10 @@ person.interests[1]
 person.bio()
 person.greeting()</pre>
 
-<p>이제 객체 내부에 몇 가지 데이터와 기능이 있으며 이제 멋진 간단한 구문으로 액세스 할 수 있습니다!</p>
+<p>이제 객체 내부에 몇 가지 데이터와 기능이 있으며, 멋진 간단한 구문으로 액세스 할 수 있습니다!</p>
 
 <div class="note">
-<p><strong>Note</strong>: 만약 여기까지 진행하는데 어려움이 있다면, 제가 만들어놓은 파일과 비교해보세요 — <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/introduction/oojs-finished.html">oojs-finished.html</a> (그리고 <a href="http://mdn.github.io/learning-area/javascript/oojs/introduction/oojs-finished.html">실행되는 예제도 보세요</a>). Live 버전에서는 텅빈 화면만 보이겠지만, 그게 정상입니다 — 다시, 개발자도구를 열고 객체 구조를 들여다보기 위해 위에 언급된 명령어를 입력해보세요.</p>
+<p><strong>Note</strong>: 만약 여기까지 진행하는데 어려움이 있다면, 제가 만들어놓은 파일과 비교해보세요 — <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/introduction/oojs-finished.html">oojs-finished.html</a> (그리고 <a href="https://mdn.github.io/learning-area/javascript/oojs/introduction/oojs-finished.html">실행되는 예제도 보세요</a>). Live 버전에서는 텅빈 화면만 보이겠지만, 그게 정상입니다 — 다시, 개발자도구를 열고 객체 구조를 들여다보기 위해 위에 언급된 명령어를 입력해보세요.</p>
 </div>
 
 <p>자, 이제 뭘 해볼까요? 객체는 각기 다른 이름(위의 예에서는 <code>name</code> 과 <code>age</code>)과 값(예제에서, <code>['Bob', 'Smith']</code> 과 <code>32</code>)을 갖는 복수개의 멤버로 구성됩니다. 한 쌍의 이름과 값은 ',' 로 구분되야 하고, 이름과 값은 ':' 으로 분리됩니다. 결국 문법은 아래와 같은 패턴이 됩니다.</p>
@@ -263,7 +263,7 @@ var myVideo = document.querySelector('video');</pre>
 
 <p>{{NextMenu("Learn/JavaScript/Objects/Object-oriented_JS", "Learn/JavaScript/Objects")}}</p>
 
-<h2 id="In_this_module">이 모듈 에서는</h2>
+<h2 id="In_this_module">이 과정에서는</h2>
 
 <ul>
  <li><a href="/ko/docs/Learn/JavaScript/Objects/Basics">객체 기본</a></li>
diff --git a/files/ko/web/accessibility/aria/index.html b/files/ko/web/accessibility/aria/index.html
index c1c77f78f4..15b2741987 100644
--- a/files/ko/web/accessibility/aria/index.html
+++ b/files/ko/web/accessibility/aria/index.html
@@ -123,7 +123,7 @@ translation_of: Web/Accessibility/ARIA
 
 <p>{{glossary("Accessibility", "접근성")}}, {{glossary("AJAX")}}, <a href="/ko/docs/JavaScript">JavaScript</a></p>
 
-<section id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li><a href="/ko/docs/Web/Guide">웹 개발</a></li>
  <li><a href="/ko/docs/Mozilla/Accessibility">접근성과 Mozilla</a></li>
diff --git a/files/ko/web/api/element/tagname/index.html b/files/ko/web/api/element/tagname/index.html
index ecbbc3a405..52842f4587 100644
--- a/files/ko/web/api/element/tagname/index.html
+++ b/files/ko/web/api/element/tagname/index.html
@@ -5,7 +5,7 @@ translation_of: Web/API/Element/tagName
 ---
 <div>{{ApiRef("DOM")}}</div>
 
-<p><span class="seoSummary">{{domxref("Element")}} 인터페이스의 <strong><code>tagName</code></strong> 읽기 전용 속성은 요소에 호출된 태그 명을 가져온다.</span> 예를 들면, 만약 {{HTMLElement("img")}} 요소일 경우, 해당 요소의 <code>tagName</code> 속성의 내용은 <code>"IMG"</code> 가 된다 (XML/XHTML 및 HTML 문서에서 대소문자가 다르게 나올 수 있다).</p>
+<p><span class="seoSummary">{{domxref("Element")}} 인터페이스의 <strong><code>tagName</code></strong> 읽기 전용 속성은 요소에 호출된 태그 명을 가져온다.</span> 예를 들면, 만약 {{HTMLElement("img")}} 요소일 경우, 해당 요소의 <code>tagName</code> 속성의 내용은 <code>"IMG"</code> 가 된다 (이것은 HTML인 경우에 대한 내용이고, XML/XHTML 문서에서는 대소문자가 다르게 나올 수 있다).</p>
 
 <h2 id="구문">구문</h2>
 
diff --git a/files/ko/web/api/index/index.html b/files/ko/web/api/index/index.html
deleted file mode 100644
index c06701815a..0000000000
--- a/files/ko/web/api/index/index.html
+++ /dev/null
@@ -1,10 +0,0 @@
----
-title: Index
-slug: Web/API/Index
-tags:
-  - API
-  - Index
-  - Landing
-translation_of: Web/API/Index
----
-<p>{{Index("/ko/docs/Web/API")}}</p>
diff --git a/files/ko/web/api/settimeout/index.html b/files/ko/web/api/settimeout/index.html
new file mode 100644
index 0000000000..d093696bd0
--- /dev/null
+++ b/files/ko/web/api/settimeout/index.html
@@ -0,0 +1,363 @@
+---
+title: WindowTimers.setTimeout()
+slug: Web/API/setTimeout
+tags:
+  - setTimeout
+translation_of: Web/API/WindowOrWorkerGlobalScope/setTimeout
+original_slug: Web/API/WindowOrWorkerGlobalScope/setTimeout
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p>타이머가 만료된 뒤 함수나 지정된 코드를 실행하는 타이머를 설정합니다.</p>
+
+<h2 id="문법">문법</h2>
+
+<pre class="syntaxbox"><em>var timeoutID</em> = window.setTimeout(<em>func</em>[, <em>delay</em>, <em>param1</em>, <em>param2</em>, ...]);
+<em>var timeoutID</em> = window.setTimeout(<em>code</em>[, <em>delay</em>]);
+window.setTimeout(function, milliseconds);
+</pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code id="func">func</code></dt>
+ <dd>{{jsxref("function")}}이 타이머가 만료된 뒤 실행됩니다.</dd>
+ <dt><code>code</code></dt>
+ <dd>선택적 구문으로 함수 대신에 문자열을 넣을 수 있는데, 이것은 타이머가 만료된 뒤 해석되고 실행됩니다.<br>
+ 이 구문은 {{jsxref("Global_Objects/eval", "eval()")}}을 사용하는 것과 같은 <strong>보안 위험성</strong>을 이유로 <strong>권장되지 않습니다.</strong></dd>
+ <dt><code>delay</code> {{optional_inline}}</dt>
+ <dd>타이머가 지정된 함수나 코드를 실행시키기 전에 기다려야할 ms(1000분의 1초) 단위의 시간입니다.<br>
+ 만약 이 매개변수를 생략하면, 0이 값으로 사용됩니다. 실제 지연시간은 더 길어질 수 있습니다;<br>
+ 아래 {{anch("Reasons for delays longer than specified")}}를 참고하세요.</dd>
+ <dt><code>param1, ..., paramN</code> {{optional_inline}}</dt>
+ <dd>타이머가 만료되고 {{anch("func")}}에 전달되는 추가적인 매개변수들입니다.</dd>
+</dl>
+
+<div class="note">
+<p>Internet Explorer 9 이하에서는 함수에 추가적인 매개변수들을 전달하는 기능이 동작하지 않습니다.<br>
+ 만약 브라우저에서 이 기능을 사용하고 싶다면, {{anch("polyfill")}}을 사용하세요. (<a href="#Callback_arguments">Callback arguments</a>를 봐주세요)</p>
+</div>
+
+<h3 id="반환_값">반환 값</h3>
+
+<p>반환되는 <code>timeoutID</code>는 숫자이고, <code>setTimeout()</code>을 호출하여 만들어진 타이머를 식별할 수 있는 0이 아닌 값 입니다;<br>
+ 이 값은 타이머를 취소시키기 위해 {{domxref("WindowTimers.clearTimeout()")}}에 전달할 수도 있습니다.</p>
+
+<p><code>setTimeout()과</code> {{domxref("WindowTimers.setInterval", "setInterval()")}}는 같은 ID 공간을 공유하기 때문에, <code>clearTimeout()과 </code>{{domxref("WindowTimers.clearInterval", "clearInterval()")}} 둘 중 어느 것을 사용해도 기술적으로 동일하게 동작합니다.<br>
+ 하지만 명확성을 위해, 코드를 유지보수할 때 혼란을 피하기 위해 항상 일치시켜야 합니다.</p>
+
+<h2 id="예제">예제</h2>
+
+<p>다음 예제는 웹 페이지에 2개의 간단한 버튼을 설정하고 <code>setTimeout()과</code> <code>clearTimeout()에 연결합니다</code>.<br>
+ 첫 번째 버튼이 눌려지면 2초 뒤에 호출되는 타임아웃이 설정되고 <code>clearTimeout()</code>에 사용되는 ID가 저장됩니다.<br>
+ 두 번째 버튼을 누름으로써 당신은 선택적으로 이 타임아웃을 취소할 수 있습니다.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;Live Example&lt;/p&gt;
+&lt;button onclick="delayedAlert();"&gt;Show an alert box after two seconds&lt;/button&gt;
+&lt;p&gt;&lt;/p&gt;
+&lt;button onclick="clearAlert();"&gt;Cancel alert before it happens&lt;/button&gt;
+</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">var timeoutID;
+
+function delayedAlert() {
+  timeoutID = window.setTimeout(slowAlert, 2000);
+}
+
+function slowAlert() {
+  alert("That was really slow!");
+}
+
+function clearAlert() {
+  window.clearTimeout(timeoutID);
+}
+</pre>
+
+<h3 id="결과">결과</h3>
+
+<p>{{EmbedLiveSample('Example')}}<br>
+ <a href="/en-US/docs/Web/API/WindowTimers/clearTimeout#Example"><code>clearTimeout() 예제</code></a>도 봐주세요.</p>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<p>하나 이상의 매개변수를 콜백 함수에 넘겨야 하는데, <code>setTimeout()</code> 또는 <code>setInterval()</code>을 사용하여 추가적인 매개변수를 보내는 것을 브라우저에서 지원하지 않는다면<code>(e.g. </code>Internet Explorer 9 이하<code>)</code>, HTML5 표준 매개변수 전달 기능을 사용 가능하게 하는 이 polyfill을 넣을 수 있습니다. 그저 아래 코드를 스크립트를 상단에 작성해주시면 됩니다.</p>
+
+<pre class="brush: js">/*\
+|*|
+|*|  임의의 매개변수를 자바스크립트 타이머의 콜백함수에 전달하기 위한 Polyfill (HTML5 표준 명세).
+|*|
+|*|  https://developer.mozilla.org/en-US/docs/DOM/window.setInterval
+|*|
+|*|  Syntax:
+|*|  var timeoutID = window.setTimeout(func, delay[, param1, param2, ...]);
+|*|  var timeoutID = window.setTimeout(code, delay);
+|*|  var intervalID = window.setInterval(func, delay[, param1, param2, ...]);
+|*|  var intervalID = window.setInterval(code, delay);
+|*|
+\*/
+
+(function() {
+  setTimeout(function(arg1) {
+    if (arg1 === 'test') {
+      // feature test is passed, no need for polyfill
+      return;
+    }
+    var __nativeST__ = window.setTimeout;
+    window.setTimeout = function(vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */ ) {
+      var aArgs = Array.prototype.slice.call(arguments, 2);
+      return __nativeST__(vCallback instanceof Function ? function() {
+        vCallback.apply(null, aArgs);
+      } : vCallback, nDelay);
+    };
+  }, 0, 'test');
+
+  var interval = setInterval(function(arg1) {
+    clearInterval(interval);
+    if (arg1 === 'test') {
+      // feature test is passed, no need for polyfill
+      return;
+    }
+    var __nativeSI__ = window.setInterval;
+    window.setInterval = function(vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */ ) {
+      var aArgs = Array.prototype.slice.call(arguments, 2);
+      return __nativeSI__(vCallback instanceof Function ? function() {
+        vCallback.apply(null, aArgs);
+      } : vCallback, nDelay);
+    };
+  }, 0, 'test');
+}())
+</pre>
+
+<h2 id="IE">IE</h2>
+
+<p>IE9 이하를 포함하는 모든 모바일/데스크톱 브라우저에서 자바스크립트를 남용하지 않는 완벽한 해결책으로 , JavaScript 조건부 주석을 사용할 수 있습니다:</p>
+
+<pre class="brush: js">/*@cc_on
+  // conditional IE &lt; 9 only fix
+  @if (@_jscript_version &lt;= 9)
+  (function(f){
+     window.setTimeout=f(window.setTimeout);
+     window.setInterval=f(window.setInterval);
+  })(function(f){return function(c,t){var a=[].slice.call(arguments,2);return f(function(){c instanceof Function?c.apply(this,a):eval(c)},t)}});
+  @end
+@*/
+</pre>
+
+<p>혹은 IE HTML 조건부 기능을 기반으로 깔끔하게 접근할 수 있습니다:</p>
+
+<pre class="brush: html">&lt;!--[if lte IE 9]&gt;&lt;script&gt;
+(function(f){
+window.setTimeout=f(window.setTimeout);
+window.setInterval=f(window.setInterval);
+})(function(f){return function(c,t){
+var a=[].slice.call(arguments,2);return f(function(){c instanceof Function?c.apply(this,a):eval(c)},t)}
+});
+&lt;/script&gt;&lt;![endif]--&gt;
+</pre>
+
+<h2 id="예시">예시</h2>
+
+<p>다른 해결책으로는 익명 함수를 callback으로 호출하여 사용할 수 있으나, 이 방법은 비용이 더 비쌉니다.</p>
+
+<pre class="brush: js">var intervalID = setTimeout(function() { myFunc("one", "two", "three"); }, 1000);
+</pre>
+
+<p>위 예제는 <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions">arrow function</a>으로도 작성하실 수 있습니다.</p>
+
+<pre class="brush: js">var intervalID = setTimeout(() =&gt; { myFunc("one", "two", "three"); }, 1000);
+</pre>
+
+<p>다른 하나는 <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind">function's <code>bind</code></a>를 이용하는 것 입니다.</p>
+
+<pre class="brush: js">setTimeout(function(arg1){}.bind(undefined, 10), 1000);
+</pre>
+
+<h2 id="this_문제">"<code>this</code>" 문제</h2>
+
+<p><code>setTimeout()</code>에 매개변수(혹은 다른 함수)를 전달할 때, 당신의 기대와는 다르게 this의 값이 호출될 것이다. 해당 이슈에 대한 자세한 사항은 <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this#As_an_object_method">JavaScript reference</a>를 참고해주세요.</p>
+
+<h3 id="설명">설명</h3>
+
+<p><code>setTimeout()</code>에 의해 실행된 코드는 별도의 실행 컨텍스트에서 <code>setTimeout</code>이 호출된 함수로 호출됩니다.  호출된 함수에 대해서는 <code>this</code> 키워드를 설정하는 일반적인 규칙이 적용되며, this를 설정 혹은 할당하지 않은 경우, non-strict 모드에서 전역(혹은 <code>window</code>) 객체, strict모드에서 undefined를 기본 값으로 합니다. 다음 예제를 봐주세요: </p>
+
+<pre class="brush: js">myArray = ["zero", "one", "two"];
+myArray.myMethod = function (sProperty) {
+    alert(arguments.length &gt; 0 ? this[sProperty] : this);
+};
+
+myArray.myMethod(); // prints "zero,one,two"
+myArray.myMethod(1); // prints "one"</pre>
+
+<p>위와 같이 동작하는 이유는 <code>myMethod</code> 호출될 때, <code>this</code>는 <code>myArray</code>로 설정되므로, 함수 내에서의 <code>this[</code>속성<code>]</code>은 <code>myArray[</code>속성<code>]</code>와 같습니다. 하지만, 다음 예제를 보면:</p>
+
+<pre class="brush: js">setTimeout(myArray.myMethod, 1000); // 1초 뒤 "[Window 객체]" 출력
+setTimeout(myArray.myMethod, 1500, "1"); // 1.5초 뒤 "undefined" 출력</pre>
+
+<p><code>myArray.myMethod</code> 함수는 <code>setTimeout</code>에 전달되고, 호출될 때 t<code>his</code>는 설정되어 있지 않아 window 객체를 기본값으로 합니다. forEach, reduce 등 Array 메서드 같이 <code>this</code>를 매개변수로 넘길 수 있는 옵션 또한 없습니다. 그리고 아래에서 보다시피, <code>call<font face="Open Sans, Arial, sans-serif">을</font> </code>사용해<code> this</code>를 설정하는 것도 동작하지 않습니다.</p>
+
+<pre class="brush: js">setTimeout.call(myArray, myArray.myMethod, 2000); // error: "NS_ERROR_XPC_BAD_OP_ON_WN_PROTO: Illegal operation on WrappedNative prototype object"
+setTimeout.call(myArray, myArray.myMethod, 2500, 2); // same error
+</pre>
+
+<h3 id="가능한_해결책">가능한 해결책</h3>
+
+<p>일반적인 해결책은 this 설정이 필요한 곳을 함수로 감싸는 것(Wrapper Function) 입니다:</p>
+
+<pre class="brush: js">setTimeout(function(){myArray.myMethod()}, 2000); // 2초 뒤"zero,one,two" 출력
+setTimeout(function(){myArray.myMethod('1')}, 2500); // 2.5초 뒤"one" 출력</pre>
+
+<p>화살표 함수(Arrow Function) 역시 가능한 대안입니다:</p>
+
+<pre class="brush: js">setTimeout(() =&gt; {myArray.myMethod()}, 2000); // 2초 뒤 "zero,one,two" 출력
+setTimeout(() =&gt; {myArray.myMethod('1')}, 2500); // 2.5초 뒤 "one" after 2.5 출력</pre>
+
+<p><code>this</code> 문제를 해결하는 또다른 방법은 전역함수 <code>setTimeout()<font face="Open Sans, Arial, sans-serif">과 </font></code><code>setInterval()<font face="Open Sans, Arial, sans-serif">를 </font></code><code>this</code> 객체를 전달할 수 있는 전역함수로 대체하고 <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/call">Function.prototype.call</a></code>을 사용하여 콜백을 설정합니다:</p>
+
+<pre class="brush: js">// Enable setting 'this' in JavaScript timers
+
+var __nativeST__ = window.setTimeout,
+    __nativeSI__ = window.setInterval;
+
+window.setTimeout = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) {
+  var oThis = this,
+      aArgs = Array.prototype.slice.call(arguments, 2);
+  return __nativeST__(vCallback instanceof Function ? function () {
+    vCallback.apply(oThis, aArgs);
+  } : vCallback, nDelay);
+};
+
+window.setInterval = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) {
+  var oThis = this,
+      aArgs = Array.prototype.slice.call(arguments, 2);
+  return __nativeSI__(vCallback instanceof Function ? function () {
+    vCallback.apply(oThis, aArgs);
+  } : vCallback, nDelay);
+};</pre>
+
+<div class="note">위 2개의 대안들은 IE의 타이 콜백함수에 임의의 매개변수를 전달하는 HTML5 표준 또한 가능하게 합니다.</div>
+
+<p>새로운 기능 테스트:</p>
+
+<pre class="brush: js">myArray = ["zero", "one", "two"];
+myArray.myMethod = function (sProperty) {
+    alert(arguments.length &gt; 0 ? this[sProperty] : this);
+};
+
+setTimeout(alert, 1500, "Hello world!"); // the standard use of setTimeout and setInterval is preserved, but...
+setTimeout.call(myArray, myArray.myMethod, 2000); // prints "zero,one,two" after 2 seconds
+setTimeout.call(myArray, myArray.myMethod, 2500, 2); // prints "two" after 2.5 seconds
+</pre>
+
+<div class="note">JavaScript 1.8.5은 주어진 함수에 대한 모든 호출의 this 값을 설정하기 위한 <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind">Function.prototype.bind()</a></code> 메서드를 도입하였습니다. 이렇게 하면 wrapper 함수를 사용하지 않고 콜백에 this 값을 설정할 수 있습니다.</div>
+
+<p><code>bind()</code>를 사용한 예제:</p>
+
+<pre class="brush: js">myArray = ["zero", "one", "two"];
+myBoundMethod = (function (sProperty) {
+    console.log(arguments.length &gt; 0 ? this[sProperty] : this);
+}).bind(myArray);
+
+myBoundMethod(); // prints "zero,one,two" because 'this' is bound to myArray in the function
+myBoundMethod(1); // prints "one"
+setTimeout(myBoundMethod, 1000); // still prints "zero,one,two" after 1 second because of the binding
+setTimeout(myBoundMethod, 1500, "1"); // prints "one" after 1.5 seconds
+</pre>
+
+<h2 id="참고">참고</h2>
+
+<p>Timeout은 {{domxref("WindowOrWorkerGlobalScope.clearTimeout()")}}을 사용하면 취소됩니다. 함수를 반복해서 호출해야 한다면 (e.g., N 밀리초마다), {{domxref("WindowOrWorkerGlobalScope.setInterval()")}} 사용을 고려해보세요.</p>
+
+<p><code>setTimeout()을</code> 호출한 쓰레드가 종료될 때까지 함수나 코드 조각이 실행될 수 없다는 점에 유의해야합니다. 예를들어:</p>
+
+<pre class="brush: js">function foo(){
+  console.log('foo has been called');
+}
+setTimeout(foo, 0);
+console.log('After setTimeout');</pre>
+
+<p>콘솔에 이렇게 쓰여질겁니다:</p>
+
+<pre class="brush: js">After setTimeout
+foo has been called</pre>
+
+<p>그 이유는 <code>setTimeout가 지연시간 0으로</code> 호출되었지만, queue에 배치되어 다음 기회에 실행되도록 예정되기 때문입니다. 현재 실행중인 코드는 queue에 있는 함수들이 실행되기 전에 완료되고, 실행 순서가 예상과 다를 수 있습니다.</p>
+
+<h3 id="문자열을_넘길경우">문자열을 넘길경우</h3>
+
+<p> <code>setTimeout()</code>에<code> </code>함수대신 문자열을 넘기면 <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/eval#Don.27t_use_eval.21">eval</a> </code>사용했을 때와 같은 위험성을 가집니다<code>. </code></p>
+
+<pre class="brush: js">// 권장
+window.setTimeout(function() {
+    alert("Hello World!");
+}, 500);
+
+// 비권장
+window.setTimeout("alert('Hello World!');", 500);
+</pre>
+
+<p><code>setTimeout</code>에 전달된 문자열은 전역 context에서 해석하므로, <code>setTimeout()</code>이 호출된 로컬 context의 Symbol은 문자열이 코드로 해석될 때 사용할 수 없습니다.</p>
+
+<h3 id="지정된_것보다_더_오래_지연되는_이유">지정된 것보다 더 오래 지연되는 이유</h3>
+
+<p>타임아웃이 예상보다 더 늦게까지 지연되는 데는 여러가지 이유가 있습니다. 이 문단에서는 일반적인 이유에 대해서 설명합니다.</p>
+
+<h4 id="중첩된_타임아웃이_4ms_이하일_경우">중첩된 타임아웃이 4ms 이하일 경우</h4>
+
+<p><a class="external" href="http://code.google.com/p/chromium/issues/detail?id=792#c10">역사적으로</a> 브라우저들은 <code>setTimeout()</code> "clamping"을 구현했습니다: "최소 지연" 한계보다 작은 지연을 가진 <code>setTimeout() 호출은</code> 최소 지연을 사용하도록 강제됩니다.</p>
+
+<p>실제로, 4ms는 <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/timers.html#timers">HTML5 스펙에 명시되어 있고</a> 2010년 이후에 출시된 브라우저들은 일관성을 유지하고 있습니다. {{geckoRelease("5.0")}} 이전에 출시된 브라우저들은, 타임아웃(중첩 5이상)의 최소 지연시간은 10ms였습니다.</p>
+
+<p>최신 브라우저에서 0ms 타임아웃을 구현하려면, <a class="external" href="http://dbaron.org/log/20100309-faster-timeouts">이곳에 설명된</a> {{domxref("window.postMessage()")}}를 사용할 수 있습니다.</p>
+
+<h4 id="비활성_탭에서_타임아웃이1000ms에_여러_번_일어날_경우">비활성 탭에서 타임아웃이1000ms에 여러 번 일어날 경우</h4>
+
+<p>부하와 배터리 사용양을 줄이기 위해서, 비활성화 탭들에서 타임아웃이 1초에 여러번 일어나지 않도록 "clamping" 됩니다.</p>
+
+<p>Firefox는 5버전부터 이 동작을 구현했습니다. ({{bug(633421)}}참고, 1000ms 상수는  <span class="comment-copy"><code>dom.min_background_timeout_value</code> 설정을 통해 수정할 수 있습니다)</span><br>
+ Chrome은  11버전부터 구현했습니다 (<a class="external" href="http://crbug.com/66078">crbug.com/66078</a>).</p>
+
+<p>Android용 Firefox는 {{bug(736602)}} 이후 버전 14부터 백그라운드 탭에 15분의 타임아웃을 사용하고, 완전히 unload도 할 수 있습니다.</p>
+
+<h4 id="타임아웃_지연">타임아웃 지연</h4>
+
+<p>"clamping"과 더불어, 타임아웃은 다른 작업들로 인해 바쁜 페이지에서 늦게 실행될 수 있습니다.</p>
+
+<h3 id="최대_지연_값">최대 지연 값</h3>
+
+<p>Internet Explorer, Chrome, Safari, and Firefox 포함하는 브라우저들은 내부적으로 32-bit 부호있는 정수로 지연 값을 저장합니다. 이로 인해 2147483647보다 더 큰 지연을 사용할 때 정수 오버플로우가 발생하여, 타임아웃이 즉시 실행됩니다.</p>
+
+<h2 id="사양">사양</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>사양</th>
+   <th>상태</th>
+   <th>주석</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML WHATWG", "webappapis.html#dom-settimeout", "WindowTimers.setTimeout()")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td>Initial definition (DOM Level 0)</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="지원_브라우저">지원 브라우저</h2>
+
+<p>{{Compat("api.WindowOrWorkerGlobalScope.setTimeout")}}</p>
+
+<h2 id="더_알아보기">더 알아보기</h2>
+
+<ul>
+ <li><a href="/en-US/Add-ons/Code_snippets/Timers">JavaScript timers</a></li>
+ <li><a href="/en-US/docs/Mozilla/JavaScript_code_modules/Timer.jsm">Timer.jsm</a></li>
+ <li>{{domxref("WindowTimers.clearTimeout")}}</li>
+ <li>{{domxref("WindowTimers.setInterval")}}</li>
+ <li>{{domxref("window.requestAnimationFrame")}}</li>
+ <li><a href="/en-US/Add-ons/Code_snippets/Timers/Daemons"><em>Daemons</em> management</a></li>
+</ul>
diff --git a/files/ko/web/api/windoworworkerglobalscope/settimeout/index.html b/files/ko/web/api/windoworworkerglobalscope/settimeout/index.html
deleted file mode 100644
index 1b7c4c6a78..0000000000
--- a/files/ko/web/api/windoworworkerglobalscope/settimeout/index.html
+++ /dev/null
@@ -1,363 +0,0 @@
----
-title: WindowTimers.setTimeout()
-slug: Web/API/WindowOrWorkerGlobalScope/setTimeout
-tags:
-  - setTimeout
-translation_of: Web/API/WindowOrWorkerGlobalScope/setTimeout
-original_slug: Web/API/WindowTimers/setTimeout
----
-<div>{{APIRef("HTML DOM")}}</div>
-
-<p>타이머가 만료된 뒤 함수나 지정된 코드를 실행하는 타이머를 설정합니다.</p>
-
-<h2 id="문법">문법</h2>
-
-<pre class="syntaxbox"><em>var timeoutID</em> = window.setTimeout(<em>func</em>[, <em>delay</em>, <em>param1</em>, <em>param2</em>, ...]);
-<em>var timeoutID</em> = window.setTimeout(<em>code</em>[, <em>delay</em>]);
-window.setTimeout(function, milliseconds);
-</pre>
-
-<h3 id="매개변수">매개변수</h3>
-
-<dl>
- <dt><code id="func">func</code></dt>
- <dd>{{jsxref("function")}}이 타이머가 만료된 뒤 실행됩니다.</dd>
- <dt><code>code</code></dt>
- <dd>선택적 구문으로 함수 대신에 문자열을 넣을 수 있는데, 이것은 타이머가 만료된 뒤 해석되고 실행됩니다.<br>
- 이 구문은 {{jsxref("Global_Objects/eval", "eval()")}}을 사용하는 것과 같은 <strong>보안 위험성</strong>을 이유로 <strong>권장되지 않습니다.</strong></dd>
- <dt><code>delay</code> {{optional_inline}}</dt>
- <dd>타이머가 지정된 함수나 코드를 실행시키기 전에 기다려야할 ms(1000분의 1초) 단위의 시간입니다.<br>
- 만약 이 매개변수를 생략하면, 0이 값으로 사용됩니다. 실제 지연시간은 더 길어질 수 있습니다;<br>
- 아래 {{anch("Reasons for delays longer than specified")}}를 참고하세요.</dd>
- <dt><code>param1, ..., paramN</code> {{optional_inline}}</dt>
- <dd>타이머가 만료되고 {{anch("func")}}에 전달되는 추가적인 매개변수들입니다.</dd>
-</dl>
-
-<div class="note">
-<p>Internet Explorer 9 이하에서는 함수에 추가적인 매개변수들을 전달하는 기능이 동작하지 않습니다.<br>
- 만약 브라우저에서 이 기능을 사용하고 싶다면, {{anch("polyfill")}}을 사용하세요. (<a href="#Callback_arguments">Callback arguments</a>를 봐주세요)</p>
-</div>
-
-<h3 id="반환_값">반환 값</h3>
-
-<p>반환되는 <code>timeoutID</code>는 숫자이고, <code>setTimeout()</code>을 호출하여 만들어진 타이머를 식별할 수 있는 0이 아닌 값 입니다;<br>
- 이 값은 타이머를 취소시키기 위해 {{domxref("WindowTimers.clearTimeout()")}}에 전달할 수도 있습니다.</p>
-
-<p><code>setTimeout()과</code> {{domxref("WindowTimers.setInterval", "setInterval()")}}는 같은 ID 공간을 공유하기 때문에, <code>clearTimeout()과 </code>{{domxref("WindowTimers.clearInterval", "clearInterval()")}} 둘 중 어느 것을 사용해도 기술적으로 동일하게 동작합니다.<br>
- 하지만 명확성을 위해, 코드를 유지보수할 때 혼란을 피하기 위해 항상 일치시켜야 합니다.</p>
-
-<h2 id="예제">예제</h2>
-
-<p>다음 예제는 웹 페이지에 2개의 간단한 버튼을 설정하고 <code>setTimeout()과</code> <code>clearTimeout()에 연결합니다</code>.<br>
- 첫 번째 버튼이 눌려지면 2초 뒤에 호출되는 타임아웃이 설정되고 <code>clearTimeout()</code>에 사용되는 ID가 저장됩니다.<br>
- 두 번째 버튼을 누름으로써 당신은 선택적으로 이 타임아웃을 취소할 수 있습니다.</p>
-
-<h3 id="HTML">HTML</h3>
-
-<pre class="brush: html">&lt;p&gt;Live Example&lt;/p&gt;
-&lt;button onclick="delayedAlert();"&gt;Show an alert box after two seconds&lt;/button&gt;
-&lt;p&gt;&lt;/p&gt;
-&lt;button onclick="clearAlert();"&gt;Cancel alert before it happens&lt;/button&gt;
-</pre>
-
-<h3 id="JavaScript">JavaScript</h3>
-
-<pre class="brush: js">var timeoutID;
-
-function delayedAlert() {
-  timeoutID = window.setTimeout(slowAlert, 2000);
-}
-
-function slowAlert() {
-  alert("That was really slow!");
-}
-
-function clearAlert() {
-  window.clearTimeout(timeoutID);
-}
-</pre>
-
-<h3 id="결과">결과</h3>
-
-<p>{{EmbedLiveSample('Example')}}<br>
- <a href="/en-US/docs/Web/API/WindowTimers/clearTimeout#Example"><code>clearTimeout() 예제</code></a>도 봐주세요.</p>
-
-<h2 id="Polyfill">Polyfill</h2>
-
-<p>하나 이상의 매개변수를 콜백 함수에 넘겨야 하는데, <code>setTimeout()</code> 또는 <code>setInterval()</code>을 사용하여 추가적인 매개변수를 보내는 것을 브라우저에서 지원하지 않는다면<code>(e.g. </code>Internet Explorer 9 이하<code>)</code>, HTML5 표준 매개변수 전달 기능을 사용 가능하게 하는 이 polyfill을 넣을 수 있습니다. 그저 아래 코드를 스크립트를 상단에 작성해주시면 됩니다.</p>
-
-<pre class="brush: js">/*\
-|*|
-|*|  임의의 매개변수를 자바스크립트 타이머의 콜백함수에 전달하기 위한 Polyfill (HTML5 표준 명세).
-|*|
-|*|  https://developer.mozilla.org/en-US/docs/DOM/window.setInterval
-|*|
-|*|  Syntax:
-|*|  var timeoutID = window.setTimeout(func, delay[, param1, param2, ...]);
-|*|  var timeoutID = window.setTimeout(code, delay);
-|*|  var intervalID = window.setInterval(func, delay[, param1, param2, ...]);
-|*|  var intervalID = window.setInterval(code, delay);
-|*|
-\*/
-
-(function() {
-  setTimeout(function(arg1) {
-    if (arg1 === 'test') {
-      // feature test is passed, no need for polyfill
-      return;
-    }
-    var __nativeST__ = window.setTimeout;
-    window.setTimeout = function(vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */ ) {
-      var aArgs = Array.prototype.slice.call(arguments, 2);
-      return __nativeST__(vCallback instanceof Function ? function() {
-        vCallback.apply(null, aArgs);
-      } : vCallback, nDelay);
-    };
-  }, 0, 'test');
-
-  var interval = setInterval(function(arg1) {
-    clearInterval(interval);
-    if (arg1 === 'test') {
-      // feature test is passed, no need for polyfill
-      return;
-    }
-    var __nativeSI__ = window.setInterval;
-    window.setInterval = function(vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */ ) {
-      var aArgs = Array.prototype.slice.call(arguments, 2);
-      return __nativeSI__(vCallback instanceof Function ? function() {
-        vCallback.apply(null, aArgs);
-      } : vCallback, nDelay);
-    };
-  }, 0, 'test');
-}())
-</pre>
-
-<h2 id="IE">IE</h2>
-
-<p>IE9 이하를 포함하는 모든 모바일/데스크톱 브라우저에서 자바스크립트를 남용하지 않는 완벽한 해결책으로 , JavaScript 조건부 주석을 사용할 수 있습니다:</p>
-
-<pre class="brush: js">/*@cc_on
-  // conditional IE &lt; 9 only fix
-  @if (@_jscript_version &lt;= 9)
-  (function(f){
-     window.setTimeout=f(window.setTimeout);
-     window.setInterval=f(window.setInterval);
-  })(function(f){return function(c,t){var a=[].slice.call(arguments,2);return f(function(){c instanceof Function?c.apply(this,a):eval(c)},t)}});
-  @end
-@*/
-</pre>
-
-<p>혹은 IE HTML 조건부 기능을 기반으로 깔끔하게 접근할 수 있습니다:</p>
-
-<pre class="brush: html">&lt;!--[if lte IE 9]&gt;&lt;script&gt;
-(function(f){
-window.setTimeout=f(window.setTimeout);
-window.setInterval=f(window.setInterval);
-})(function(f){return function(c,t){
-var a=[].slice.call(arguments,2);return f(function(){c instanceof Function?c.apply(this,a):eval(c)},t)}
-});
-&lt;/script&gt;&lt;![endif]--&gt;
-</pre>
-
-<h2 id="예시">예시</h2>
-
-<p>다른 해결책으로는 익명 함수를 callback으로 호출하여 사용할 수 있으나, 이 방법은 비용이 더 비쌉니다.</p>
-
-<pre class="brush: js">var intervalID = setTimeout(function() { myFunc("one", "two", "three"); }, 1000);
-</pre>
-
-<p>위 예제는 <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions">arrow function</a>으로도 작성하실 수 있습니다.</p>
-
-<pre class="brush: js">var intervalID = setTimeout(() =&gt; { myFunc("one", "two", "three"); }, 1000);
-</pre>
-
-<p>다른 하나는 <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind">function's <code>bind</code></a>를 이용하는 것 입니다.</p>
-
-<pre class="brush: js">setTimeout(function(arg1){}.bind(undefined, 10), 1000);
-</pre>
-
-<h2 id="this_문제">"<code>this</code>" 문제</h2>
-
-<p><code>setTimeout()</code>에 매개변수(혹은 다른 함수)를 전달할 때, 당신의 기대와는 다르게 this의 값이 호출될 것이다. 해당 이슈에 대한 자세한 사항은 <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this#As_an_object_method">JavaScript reference</a>를 참고해주세요.</p>
-
-<h3 id="설명">설명</h3>
-
-<p><code>setTimeout()</code>에 의해 실행된 코드는 별도의 실행 컨텍스트에서 <code>setTimeout</code>이 호출된 함수로 호출됩니다.  호출된 함수에 대해서는 <code>this</code> 키워드를 설정하는 일반적인 규칙이 적용되며, this를 설정 혹은 할당하지 않은 경우, non-strict 모드에서 전역(혹은 <code>window</code>) 객체, strict모드에서 undefined를 기본 값으로 합니다. 다음 예제를 봐주세요: </p>
-
-<pre class="brush: js">myArray = ["zero", "one", "two"];
-myArray.myMethod = function (sProperty) {
-    alert(arguments.length &gt; 0 ? this[sProperty] : this);
-};
-
-myArray.myMethod(); // prints "zero,one,two"
-myArray.myMethod(1); // prints "one"</pre>
-
-<p>위와 같이 동작하는 이유는 <code>myMethod</code> 호출될 때, <code>this</code>는 <code>myArray</code>로 설정되므로, 함수 내에서의 <code>this[</code>속성<code>]</code>은 <code>myArray[</code>속성<code>]</code>와 같습니다. 하지만, 다음 예제를 보면:</p>
-
-<pre class="brush: js">setTimeout(myArray.myMethod, 1000); // 1초 뒤 "[Window 객체]" 출력
-setTimeout(myArray.myMethod, 1500, "1"); // 1.5초 뒤 "undefined" 출력</pre>
-
-<p><code>myArray.myMethod</code> 함수는 <code>setTimeout</code>에 전달되고, 호출될 때 t<code>his</code>는 설정되어 있지 않아 window 객체를 기본값으로 합니다. forEach, reduce 등 Array 메서드 같이 <code>this</code>를 매개변수로 넘길 수 있는 옵션 또한 없습니다. 그리고 아래에서 보다시피, <code>call<font face="Open Sans, Arial, sans-serif">을</font> </code>사용해<code> this</code>를 설정하는 것도 동작하지 않습니다.</p>
-
-<pre class="brush: js">setTimeout.call(myArray, myArray.myMethod, 2000); // error: "NS_ERROR_XPC_BAD_OP_ON_WN_PROTO: Illegal operation on WrappedNative prototype object"
-setTimeout.call(myArray, myArray.myMethod, 2500, 2); // same error
-</pre>
-
-<h3 id="가능한_해결책">가능한 해결책</h3>
-
-<p>일반적인 해결책은 this 설정이 필요한 곳을 함수로 감싸는 것(Wrapper Function) 입니다:</p>
-
-<pre class="brush: js">setTimeout(function(){myArray.myMethod()}, 2000); // 2초 뒤"zero,one,two" 출력
-setTimeout(function(){myArray.myMethod('1')}, 2500); // 2.5초 뒤"one" 출력</pre>
-
-<p>화살표 함수(Arrow Function) 역시 가능한 대안입니다:</p>
-
-<pre class="brush: js">setTimeout(() =&gt; {myArray.myMethod()}, 2000); // 2초 뒤 "zero,one,two" 출력
-setTimeout(() =&gt; {myArray.myMethod('1')}, 2500); // 2.5초 뒤 "one" after 2.5 출력</pre>
-
-<p><code>this</code> 문제를 해결하는 또다른 방법은 전역함수 <code>setTimeout()<font face="Open Sans, Arial, sans-serif">과 </font></code><code>setInterval()<font face="Open Sans, Arial, sans-serif">를 </font></code><code>this</code> 객체를 전달할 수 있는 전역함수로 대체하고 <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/call">Function.prototype.call</a></code>을 사용하여 콜백을 설정합니다:</p>
-
-<pre class="brush: js">// Enable setting 'this' in JavaScript timers
-
-var __nativeST__ = window.setTimeout,
-    __nativeSI__ = window.setInterval;
-
-window.setTimeout = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) {
-  var oThis = this,
-      aArgs = Array.prototype.slice.call(arguments, 2);
-  return __nativeST__(vCallback instanceof Function ? function () {
-    vCallback.apply(oThis, aArgs);
-  } : vCallback, nDelay);
-};
-
-window.setInterval = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) {
-  var oThis = this,
-      aArgs = Array.prototype.slice.call(arguments, 2);
-  return __nativeSI__(vCallback instanceof Function ? function () {
-    vCallback.apply(oThis, aArgs);
-  } : vCallback, nDelay);
-};</pre>
-
-<div class="note">위 2개의 대안들은 IE의 타이 콜백함수에 임의의 매개변수를 전달하는 HTML5 표준 또한 가능하게 합니다.</div>
-
-<p>새로운 기능 테스트:</p>
-
-<pre class="brush: js">myArray = ["zero", "one", "two"];
-myArray.myMethod = function (sProperty) {
-    alert(arguments.length &gt; 0 ? this[sProperty] : this);
-};
-
-setTimeout(alert, 1500, "Hello world!"); // the standard use of setTimeout and setInterval is preserved, but...
-setTimeout.call(myArray, myArray.myMethod, 2000); // prints "zero,one,two" after 2 seconds
-setTimeout.call(myArray, myArray.myMethod, 2500, 2); // prints "two" after 2.5 seconds
-</pre>
-
-<div class="note">JavaScript 1.8.5은 주어진 함수에 대한 모든 호출의 this 값을 설정하기 위한 <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind">Function.prototype.bind()</a></code> 메서드를 도입하였습니다. 이렇게 하면 wrapper 함수를 사용하지 않고 콜백에 this 값을 설정할 수 있습니다.</div>
-
-<p><code>bind()</code>를 사용한 예제:</p>
-
-<pre class="brush: js">myArray = ["zero", "one", "two"];
-myBoundMethod = (function (sProperty) {
-    console.log(arguments.length &gt; 0 ? this[sProperty] : this);
-}).bind(myArray);
-
-myBoundMethod(); // prints "zero,one,two" because 'this' is bound to myArray in the function
-myBoundMethod(1); // prints "one"
-setTimeout(myBoundMethod, 1000); // still prints "zero,one,two" after 1 second because of the binding
-setTimeout(myBoundMethod, 1500, "1"); // prints "one" after 1.5 seconds
-</pre>
-
-<h2 id="참고">참고</h2>
-
-<p>Timeout은 {{domxref("WindowOrWorkerGlobalScope.clearTimeout()")}}을 사용하면 취소됩니다. 함수를 반복해서 호출해야 한다면 (e.g., N 밀리초마다), {{domxref("WindowOrWorkerGlobalScope.setInterval()")}} 사용을 고려해보세요.</p>
-
-<p><code>setTimeout()을</code> 호출한 쓰레드가 종료될 때까지 함수나 코드 조각이 실행될 수 없다는 점에 유의해야합니다. 예를들어:</p>
-
-<pre class="brush: js">function foo(){
-  console.log('foo has been called');
-}
-setTimeout(foo, 0);
-console.log('After setTimeout');</pre>
-
-<p>콘솔에 이렇게 쓰여질겁니다:</p>
-
-<pre class="brush: js">After setTimeout
-foo has been called</pre>
-
-<p>그 이유는 <code>setTimeout가 지연시간 0으로</code> 호출되었지만, queue에 배치되어 다음 기회에 실행되도록 예정되기 때문입니다. 현재 실행중인 코드는 queue에 있는 함수들이 실행되기 전에 완료되고, 실행 순서가 예상과 다를 수 있습니다.</p>
-
-<h3 id="문자열을_넘길경우">문자열을 넘길경우</h3>
-
-<p> <code>setTimeout()</code>에<code> </code>함수대신 문자열을 넘기면 <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/eval#Don.27t_use_eval.21">eval</a> </code>사용했을 때와 같은 위험성을 가집니다<code>. </code></p>
-
-<pre class="brush: js">// 권장
-window.setTimeout(function() {
-    alert("Hello World!");
-}, 500);
-
-// 비권장
-window.setTimeout("alert('Hello World!');", 500);
-</pre>
-
-<p><code>setTimeout</code>에 전달된 문자열은 전역 context에서 해석하므로, <code>setTimeout()</code>이 호출된 로컬 context의 Symbol은 문자열이 코드로 해석될 때 사용할 수 없습니다.</p>
-
-<h3 id="지정된_것보다_더_오래_지연되는_이유">지정된 것보다 더 오래 지연되는 이유</h3>
-
-<p>타임아웃이 예상보다 더 늦게까지 지연되는 데는 여러가지 이유가 있습니다. 이 문단에서는 일반적인 이유에 대해서 설명합니다.</p>
-
-<h4 id="중첩된_타임아웃이_4ms_이하일_경우">중첩된 타임아웃이 4ms 이하일 경우</h4>
-
-<p><a class="external" href="http://code.google.com/p/chromium/issues/detail?id=792#c10">역사적으로</a> 브라우저들은 <code>setTimeout()</code> "clamping"을 구현했습니다: "최소 지연" 한계보다 작은 지연을 가진 <code>setTimeout() 호출은</code> 최소 지연을 사용하도록 강제됩니다.</p>
-
-<p>실제로, 4ms는 <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/timers.html#timers">HTML5 스펙에 명시되어 있고</a> 2010년 이후에 출시된 브라우저들은 일관성을 유지하고 있습니다. {{geckoRelease("5.0")}} 이전에 출시된 브라우저들은, 타임아웃(중첩 5이상)의 최소 지연시간은 10ms였습니다.</p>
-
-<p>최신 브라우저에서 0ms 타임아웃을 구현하려면, <a class="external" href="http://dbaron.org/log/20100309-faster-timeouts">이곳에 설명된</a> {{domxref("window.postMessage()")}}를 사용할 수 있습니다.</p>
-
-<h4 id="비활성_탭에서_타임아웃이1000ms에_여러_번_일어날_경우">비활성 탭에서 타임아웃이1000ms에 여러 번 일어날 경우</h4>
-
-<p>부하와 배터리 사용양을 줄이기 위해서, 비활성화 탭들에서 타임아웃이 1초에 여러번 일어나지 않도록 "clamping" 됩니다.</p>
-
-<p>Firefox는 5버전부터 이 동작을 구현했습니다. ({{bug(633421)}}참고, 1000ms 상수는  <span class="comment-copy"><code>dom.min_background_timeout_value</code> 설정을 통해 수정할 수 있습니다)</span><br>
- Chrome은  11버전부터 구현했습니다 (<a class="external" href="http://crbug.com/66078">crbug.com/66078</a>).</p>
-
-<p>Android용 Firefox는 {{bug(736602)}} 이후 버전 14부터 백그라운드 탭에 15분의 타임아웃을 사용하고, 완전히 unload도 할 수 있습니다.</p>
-
-<h4 id="타임아웃_지연">타임아웃 지연</h4>
-
-<p>"clamping"과 더불어, 타임아웃은 다른 작업들로 인해 바쁜 페이지에서 늦게 실행될 수 있습니다.</p>
-
-<h3 id="최대_지연_값">최대 지연 값</h3>
-
-<p>Internet Explorer, Chrome, Safari, and Firefox 포함하는 브라우저들은 내부적으로 32-bit 부호있는 정수로 지연 값을 저장합니다. 이로 인해 2147483647보다 더 큰 지연을 사용할 때 정수 오버플로우가 발생하여, 타임아웃이 즉시 실행됩니다.</p>
-
-<h2 id="사양">사양</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th>사양</th>
-   <th>상태</th>
-   <th>주석</th>
-  </tr>
-  <tr>
-   <td>{{SpecName("HTML WHATWG", "webappapis.html#dom-settimeout", "WindowTimers.setTimeout()")}}</td>
-   <td>{{Spec2("HTML WHATWG")}}</td>
-   <td>Initial definition (DOM Level 0)</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="지원_브라우저">지원 브라우저</h2>
-
-<p>{{Compat("api.WindowOrWorkerGlobalScope.setTimeout")}}</p>
-
-<h2 id="더_알아보기">더 알아보기</h2>
-
-<ul>
- <li><a href="/en-US/Add-ons/Code_snippets/Timers">JavaScript timers</a></li>
- <li><a href="/en-US/docs/Mozilla/JavaScript_code_modules/Timer.jsm">Timer.jsm</a></li>
- <li>{{domxref("WindowTimers.clearTimeout")}}</li>
- <li>{{domxref("WindowTimers.setInterval")}}</li>
- <li>{{domxref("window.requestAnimationFrame")}}</li>
- <li><a href="/en-US/Add-ons/Code_snippets/Timers/Daemons"><em>Daemons</em> management</a></li>
-</ul>
diff --git a/files/ko/web/css/css_background_and_borders/border-image_generator/index.html b/files/ko/web/css/css_background_and_borders/border-image_generator/index.html
deleted file mode 100644
index 229a9eabd0..0000000000
--- a/files/ko/web/css/css_background_and_borders/border-image_generator/index.html
+++ /dev/null
@@ -1,2627 +0,0 @@
----
-title: Border-image 생성기
-slug: Web/CSS/CSS_Background_and_Borders/Border-image_generator
-tags:
-  - CSS
-  - CSS Borders
-  - Tools
-translation_of: Web/CSS/CSS_Background_and_Borders/Border-image_generator
----
-<p>이 도구를 사용해 CSS3 {{cssxref("border-image")}} 값을 생성할 수 있습니다.</p>
-
-<div class="hidden">
-<h2 id="Border_Image_Generator" name="Border_Image_Generator">Border Image Generator</h2>
-
-<h3 id="HTML_Content">HTML Content</h3>
-
-<pre class="brush: html">    &lt;div id="container"&gt;
-
-        &lt;div id="gallery"&gt;
-            &lt;div id="image-gallery"&gt;
-                &lt;img class="image" src="https://mdn.mozillademos.org/files/6007/border-image-1.png" data-stateID="border1"/&gt;
-                &lt;img class="image" src="https://mdn.mozillademos.org/files/6009/border-image-2.png" data-stateID="border2"/&gt;
-                &lt;img class="image" src="https://mdn.mozillademos.org/files/6011/border-image-3.png" data-stateID="border3"/&gt;
-                &lt;img class="image" src="https://mdn.mozillademos.org/files/6013/border-image-4.png" data-stateID="border4"/&gt;
-                &lt;img class="image" src="https://mdn.mozillademos.org/files/6015/border-image-5.png" data-stateID="border5"/&gt;
-                &lt;img class="image" src="https://mdn.mozillademos.org/files/6017/border-image-6.svg" data-stateID="border6"/&gt;
-            &lt;/div&gt;
-        &lt;/div&gt;
-
-        &lt;div id="load-actions" class="group section"&gt;
-            &lt;div id="toggle-gallery" data-action="hide"&gt; &lt;/div&gt;
-            &lt;div id="load-image" class="button"&gt; Upload image &lt;/div&gt;
-            &lt;input id="remote-url" type="text" placeholder="Load an image from URL"/&gt;
-            &lt;div id="load-remote" class="button"&gt; &lt;/div&gt;
-        &lt;/div&gt;
-
-        &lt;div id="general-controls" class="group section"&gt;
-            &lt;div class="name"&gt; Control Box &lt;/div&gt;
-            &lt;div class="separator"&gt;&lt;/div&gt;
-            &lt;div class="property"&gt;
-                &lt;div class="name"&gt;scale&lt;/div&gt;
-                &lt;div class="ui-input-slider" data-topic="scale"
-                    data-unit="%" data-max="300" data-sensivity="10"&gt;
-                &lt;/div&gt;
-            &lt;/div&gt;
-            &lt;div class="separator"&gt;&lt;/div&gt;
-            &lt;div class="property"&gt;
-                &lt;div class="name"&gt;draggable&lt;/div&gt;
-                &lt;div class="ui-checkbox" data-topic='drag-subject'&gt;&lt;/div&gt;
-            &lt;/div&gt;
-            &lt;div class="property right"&gt;
-                &lt;div class="name"&gt;section height&lt;/div&gt;
-                &lt;div class="ui-input-slider" data-topic="preview-area-height"
-                    data-min="400" data-max="1000"&gt;
-                &lt;/div&gt;
-            &lt;/div&gt;
-        &lt;/div&gt;
-
-        &lt;div id="preview_section" class="group section"&gt;
-            &lt;div id="subject"&gt;
-                &lt;div class="guideline" data-axis="Y" data-topic="slice-top"&gt;&lt;/div&gt;
-                &lt;div class="guideline" data-axis="X" data-topic="slice-right"&gt;&lt;/div&gt;
-                &lt;div class="guideline" data-axis="Y" data-topic="slice-bottom"&gt;&lt;/div&gt;
-                &lt;div class="guideline" data-axis="X" data-topic="slice-left"&gt;&lt;/div&gt;
-            &lt;/div&gt;
-            &lt;div id="preview"&gt; &lt;/div&gt;
-        &lt;/div&gt;
-
-        &lt;!-- controls --&gt;
-        &lt;div id="controls" class="group section"&gt;
-
-            &lt;!-- border-image-slice --&gt;
-            &lt;div id="border-slice-control" class="category"&gt;
-                &lt;div class="title"&gt; border-image-slice &lt;/div&gt;
-                &lt;div class="property"&gt;
-                    &lt;div class="name"&gt;fill&lt;/div&gt;
-                    &lt;div class="ui-checkbox" data-topic='slice-fill'&gt;&lt;/div&gt;
-                &lt;/div&gt;
-            &lt;/div&gt;
-
-            &lt;!-- border-image-width --&gt;
-            &lt;div id="border-width-control" class="category"&gt;
-                &lt;div class="title"&gt; border-image-width &lt;/div&gt;
-            &lt;/div&gt;
-
-            &lt;!-- border-image-outset --&gt;
-            &lt;div id="border-outset-control" class="category"&gt;
-                &lt;div class="title"&gt; border-image-outset &lt;/div&gt;
-            &lt;/div&gt;
-
-            &lt;!-- other-settings --&gt;
-            &lt;div id="aditional-properties" class="category"&gt;
-                &lt;div class="title"&gt; aditional-properties &lt;/div&gt;
-                &lt;div class="property"&gt;
-                    &lt;div class="name"&gt; repeat-x &lt;/div&gt;
-                    &lt;div class="ui-dropdown border-repeat" data-topic="image-repeat-X" data-selected="2"&gt;
-                        &lt;div data-value="0"&gt;repeat&lt;/div&gt;
-                        &lt;div data-value="0"&gt;stretch&lt;/div&gt;
-                        &lt;div data-value="0"&gt;round&lt;/div&gt;
-                    &lt;/div&gt;
-                &lt;/div&gt;
-                &lt;div class="property"&gt;
-                    &lt;div class="name"&gt; repeat-y &lt;/div&gt;
-                    &lt;div class="ui-dropdown border-repeat" data-topic="image-repeat-Y" data-selected="2"&gt;
-                        &lt;div data-value="1"&gt;repeat&lt;/div&gt;
-                        &lt;div data-value="1"&gt;stretch&lt;/div&gt;
-                        &lt;div data-value="1"&gt;round&lt;/div&gt;
-                    &lt;/div&gt;
-                &lt;/div&gt;
-                &lt;div class="property"&gt;
-                    &lt;div class="ui-input-slider" data-topic="font-size" data-info="em size"
-                        data-unit="px" data-value="12" data-sensivity="3"&gt;
-                    &lt;/div&gt;
-                &lt;/div&gt;
-
-                &lt;div class="property"&gt;
-                    &lt;div class="ui-input-slider" data-topic="preview-width" data-info="width"
-                         data-unit=" px" data-min="10" data-max="10000" data-sensivity="3"&gt;&lt;/div&gt;
-                &lt;/div&gt;
-                &lt;div class="property"&gt;
-                    &lt;div class="ui-input-slider" data-topic="preview-height" data-info="height"
-                        data-unit=" px" data-min="10" data-max="10000" data-sensivity="3"&gt;
-                    &lt;/div&gt;
-                &lt;/div&gt;
-            &lt;/div&gt;
-
-
-            &lt;div id="output" class="category"&gt;
-                &lt;div class="title"&gt; CSS Code &lt;/div&gt;
-                &lt;div class="css-property"&gt;
-                    &lt;span class="name"&gt; border-image-slice: &lt;/span&gt;
-                    &lt;span id="out-border-slice" class="value"&gt; &lt;/span&gt;
-                &lt;/div&gt;
-                &lt;div class="css-property"&gt;
-                    &lt;span class="name"&gt; border-image-width: &lt;/span&gt;
-                    &lt;span id="out-border-width" class="value"&gt; &lt;/span&gt;
-                &lt;/div&gt;
-                &lt;div class="css-property"&gt;
-                    &lt;span class="name"&gt; border-image-outset: &lt;/span&gt;
-                    &lt;span id="out-border-outset" class="value"&gt; &lt;/span&gt;
-                &lt;/div&gt;
-                &lt;div class="css-property"&gt;
-                    &lt;span class="name"&gt; border-image-repeat: &lt;/span&gt;
-                    &lt;span id="out-border-repeat" class="value"&gt; &lt;/span&gt;
-                &lt;/div&gt;
-                &lt;div class="css-property"&gt;
-                    &lt;span class="name"&gt; border-image-source: &lt;/span&gt;
-                    &lt;span id="out-border-source" class="value"&gt;  &lt;/span&gt;
-                &lt;/div&gt;
-            &lt;/div&gt;
-
-        &lt;/div&gt;
-    &lt;/div&gt;</pre>
-
-<h3 id="CSS_Content">CSS Content</h3>
-
-<pre class="brush: css">/*  GRID OF TWELVE
- * ========================================================================== */
-
-.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 {
-	height: 20px;
-	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
-	-moz-user-select: none;
-	user-select: none;
-}
-
-.ui-input-slider * {
-	float: left;
-	height: 100%;
-	line-height: 100%;
-}
-
-/* Input Slider */
-
-.ui-input-slider &gt; 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 DropDown
- */
-
-/* Dropdown */
-
-.ui-dropdown {
-	height: 2em;
-	width: 120px;
-	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
-	font-size: 12px;
-
-	background-image: url("https://mdn.mozillademos.org/files/6037/drop_arrow_icon.png");
-	background-position: right center;
-	background-repeat: no-repeat;
-	background-color: #359740;
-
-	position: relative;
-
-	-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;
-}
-
-.ui-dropdown:hover {
-	cursor: pointer;
-	background-color: #208B20;
-}
-
-/* Dropdown Select Button */
-
-.ui-dropdown-select {
-	height: inherit;
-	padding: 0 0.75em;
-	color: #FFF;
-	line-height: 2em;
-}
-
-/* Dropdown List */
-
-.ui-dropdown-list {
-	width: 100%;
-	height: 150px;
-	max-height: 150px;
-	margin: 0;
-	padding: 0 0.3em;
-
-	border: 3px solid #3490D2;
-	border-color: #208B20;
-	background: #666;
-	background-color: #EEF1F5;
-	color: #000;
-
-	position: absolute;
-	top: 2em;
-	left: 0;
-	z-index: 100;
-
-	overflow: hidden;
-	transition: all 0.3s;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-}
-
-.ui-dropdown-list:hover {
-	overflow: auto;
-}
-
-.ui-dropdown-list[data-hidden='true'] {
-	height: 0 !important;
-	opacity: 0;
-	visibility: hidden;
-}
-
-.ui-dropdown[data-position='left'] .ui-dropdown-list {
-	left: -100%;
-	top: 0;
-}
-
-.ui-dropdown[data-position='right'] .ui-dropdown-list {
-	left: 100%;
-	top: 0;
-}
-
-.ui-dropdown-list &gt; div {
-	width: 100%;
-	height: 1.6em;
-	margin: 0.3em 0;
-	padding: 0.3em;
-	line-height: 1em;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-}
-
-.ui-dropdown-list &gt; div:hover {
-	background: #3490D2;
-	color:#FFF;
-	border-radius: 2px;
-	cursor: pointer;
-}
-
-
-/*************************************************************************************/
-/*************************************************************************************/
-
-/*
- * UI Button
- */
-
-/* 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 &gt; input {
- 	display: none;
-}
-
-.ui-checkbox &gt; 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: 2px;
-	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 &gt; label:hover {
-	cursor: pointer;
-}
-
-.ui-checkbox &gt; input:checked + label {
-	background-image: url("https://mdn.mozillademos.org/files/5681/checked.png");
-	background-color: #379B4A;
-}
-
-/*************************************************************************************/
-/*************************************************************************************/
-
-/*
- * BORDER IMAGE GENERATOR TOOL
- */
-
-body {
-	width: 100%;
-	margin: 0 auto;
-	padding: 0 0 20px 0;
-
-	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
-
-	/*background: url("https://mdn.mozillademos.org/files/6025/grain.png");*/
-	border: 1px solid #EEE;
-
-	-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;
-}
-
-body[data-move='X'] {
-	cursor: w-resize !important;
-}
-
-body[data-move='Y'] {
-	cursor: s-resize !important;
-}
-
-#container {
-	width: 100%;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-}
-
-[data-draggable='true']:hover {
-	cursor: move;
-}
-
-[data-draggable='true']:hover &gt; * {
-	cursor: default;
-}
-
-
-
-/******************************************************************************/
-/******************************************************************************/
-
-/*
- * Border Image Picker
- */
-
-#gallery {
-	box-shadow: 0 0 3px 0 #BABABA;
-}
-
-#image-gallery {
-	width: 600px;
-	height: 100px;
-	margin: 0 auto;
-	transition: margin 0.4s;
-}
-
-#image-gallery .image {
-	height: 80px;
-	float: left;
-	margin: 10px;
-	opacity: 0.5;
-	background-color: #FFF;
-	box-shadow: 0px 0px 3px 1px #BABABA;
-}
-
-#image-gallery .image[selected="true"] {
-	box-shadow: 0px 0px 3px 1px #3BBA52;
-	opacity: 1;
-}
-
-#image-gallery .image:hover {
-	cursor: pointer;
-	box-shadow: 0px 0px 3px 1px #30ACE5;
-	opacity: 1;
-}
-
-#image-gallery[data-collapsed='true'] {
-	margin-top: -100px;
-}
-
-/* Load Menu */
-
-#load-actions {
-	margin: 10px 0;
-}
-
-#toggle-gallery {
-	width: 30px;
-	height: 25px;
-	margin: 10px;
-	color: #FFF;
-
-	background-image: url('https://mdn.mozillademos.org/files/6005/arrow-up-white.png');
-	background-repeat: no-repeat;
-	background-position: top 4px center;
-	background-color: #888888 !important;
-
-	border-radius: 2px;
-	float: left;
-}
-
-#toggle-gallery:hover {
-	cursor: pointer;
-}
-
-#toggle-gallery[data-action='show'] {
-	background-image: url('https://mdn.mozillademos.org/files/6001/arrow-down-white.png');
-	background-color: #888888 !important;
-}
-
-#toggle-gallery[data-action='hide'] {
-	background-image: url('https://mdn.mozillademos.org/files/6005/arrow-up-white.png');
-}
-
-.button {
-	width: 100px;
-	height: 25px;
-	margin: 10px;
-	color: #FFF;
-	text-align: center;
-	font-size: 12px;
-	line-height: 25px;
-	background-color: #379B4A;
-	border-radius: 2px;
-	float: left;
-}
-
-.button:hover {
-	cursor: pointer;
-	background-color: #3380C4;
-}
-
-#load-image {
-	float: left;
-}
-
-#load-remote {
-	width: 30px;
-	background-image: url('https://mdn.mozillademos.org/files/6003/arrow-right-white.png');
-	background-repeat: no-repeat;
-	background-position: center center;
-}
-
-#remote-url {
-	width: 200px;
-	height: 23px;
-	margin: 10px;
-	padding: 0 5px;
-	border: 1px solid #379B4A;
-	border-radius: 2px;
-	float: left;
-
-	transition: width 0.5s;
-}
-
-#remote-url:focus {
-	box-shadow: 0px 0px 3px -1px #379B4A; /*#68ACE8; */
-	border-color: rgba(55, 155, 74, 0.5);
-	width: 450px;
-}
-
-/*
- * Visible Area
- */
-
-#preview_section {
-	position: relative;
-	min-height: 400px;
-}
-
-/* Image Control */
-
-#subject {
-	width: 300px;
-	height: 300px;
-	background-repeat: no-repeat;
-	background-size: 100%;
-	background-color: #FFF;
-	border: 1px solid #CCC;
-
-	position: absolute;
-	z-index: 10;
-	top: 15%;
-	left: 10%;
-
-	box-shadow: 0 0 3px 0 #BABABA;
-	transition-property: width, height;
-	transition-duration: 0.1s;
-}
-
-#subject .guideline {
-	background-color: rgba(255, 255, 255, 0.7);
-	border: 1px solid rgba(0, 0, 0, 0.3);
-	position: absolute;
-}
-
-#subject .guideline:hover {
-	background-color: #F00;
-}
-
-#subject .guideline[data-active] {
-	background-color: #F00;
-	z-index: 10;
-}
-
-#subject .guideline[data-axis='X'] {
-	width: 1px;
-	height: 100%;
-	top: -1px;
-}
-
-#subject .guideline[data-axis='Y'] {
-	width: 100%;
-	height: 1px;
-	left: -1px;
-}
-
-#subject .guideline[data-axis='X']:hover {
-	cursor: w-resize;
-}
-
-#subject .guideline[data-axis='Y']:hover {
-	cursor: s-resize;
-}
-
-
-#subject .relative {
-	position: relative;
-	font-size: 12px;
-}
-
-#subject .tooltip, #subject .tooltip2 {
-	width: 40px;
-	height: 20px;
-	line-height: 20px;
-	font-size: 12px;
-	text-align: center;
-
-	position: absolute;
-	opacity: 0.5;
-	transition: opacity 0.25s;
-}
-
-#subject .tooltip {
-	background: #EEE;
-	border-radius: 2px;
-	border: 1px solid #CCC;
-}
-
-#subject .tooltip2{
-	color: #555;
-}
-
-#subject [data-active] &gt; * {
-	opacity: 1;
-}
-
-#subject .tooltip[data-info='top'] {
-	top: -10px;
-	right: -50px;
-}
-
-#subject .tooltip[data-info='right'] {
-	bottom: -30px;
-	right: -20px;
-}
-
-#subject .tooltip[data-info='bottom'] {
-	top: -10px;
-	left: -50px;
-}
-
-#subject .tooltip[data-info='left'] {
-	top: -30px;
-	right: -20px;
-}
-
-#subject .tooltip2[data-info='top'] {
-	top: -10px;
-	left: -50px;
-}
-
-#subject .tooltip2[data-info='right'] {
-	top: -30px;
-	right: -20px;
-}
-
-#subject .tooltip2[data-info='bottom'] {
-	top: -10px;
-	right: -50px;
-}
-
-#subject .tooltip2[data-info='left'] {
-	bottom: -30px;
-	right: -20px;
-}
-
-/* Preview */
-
-#preview {
-	width: 30%;
-	height: 50%;
-	background-color: #FFF;
-	text-align: center;
-	overflow: hidden;
-	position: absolute;
-	z-index: 10;
-
-	left: 60%;
-	top: 15%;
-
-	border-radius: 2px;
-	border-image-width: 20px;
-	border-image-repeat: round;
-	box-shadow: 0 0 3px 0 #BABABA;
-}
-
-#preview .resize-handle {
-	width: 10px;
-	height: 10px;
-	background: url("https://mdn.mozillademos.org/files/6027/resize.png") center center no-repeat;
-	position: absolute;
-	bottom: 0;
-	right: 0;
-}
-
-#preview .resize-handle:hover {
-	cursor: nw-resize;
-}
-
-
-/*
- * General controls MENU
- */
-
-#general-controls {
-	padding: 10px 30px;
-	background-color: #FFF;
-	opacity: 0.95;
-	color: #888;
-	/*border-radius: 2px;*/
-	box-shadow: 0 0 3px 0 #BABABA;
-}
-
-#general-controls .property {
-	width: 130px;
-	float: left;
-}
-
-#general-controls .name {
-	height: 20px;
-	margin: 0 10px 0 0;
-	line-height: 100%;
-	text-align: right;
-	float: left;
-}
-
-#general-controls .right {
-	width: 200px;
-	float: right;
-}
-
-#general-controls .ui-checkbox label {
-	height: 10px;
-}
-
-#general-controls .separator {
-	height: 40px;
-	width: 1px;
-	margin: -10px 15px;
-	background-color: #EEE;
-	float: left;
-}
-
-/*
- * Controls
- */
-
-#controls {
-	color: #444;
-	margin: 10px 0 0 0;
-}
-
-#controls .category {
-	height: 190px;
-	min-width: 260px;
-	margin: 10px;
-	padding: 10px;
-	border: 1px solid #CCC;
-	border-radius: 3px;
-	float: left;
-
-	box-shadow: 0 0 3px 0 #BABABA;
-	transition: all 0.25s;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-}
-
-@media (min-width: 880px) {
-	#controls .category {
-		width: 30%;
-		margin-left: 1.66%;
-		margin-right: 1.66%;
-	}
-}
-
-@media (max-width: 879px) {
-	#controls .category {
-		width: 37%;
-		margin-left: 6.5%;
-		margin-right: 6.5%;
-	}
-}
-
-#controls .category .title {
-	width: 100%;
-	height: 30px;
-	margin: 0 0 10px 0;
-	line-height: 25px;
-
-	text-align: center;
-	color: #AAA;
-}
-
-#controls .category:hover .title {
-	color: #777;
-}
-
-#controls .category &gt; .group {
-	border: 1px solid #CCC;
-	border-radius: 2px;
-}
-
-
-/* property */
-
-#controls .property {
-	width: 250px;
-	height: 20px;
-	margin: 5px auto;
-}
-
-#controls .property .ui-input-slider {
-	margin: 0;
-	float: left;
-}
-
-#controls .property .ui-input-slider-info {
-	width: 60px;
-}
-
-#controls .property .ui-input-slider-left {
-	transition: opacity 0.15s;
-    opacity: 0;
-}
-
-#controls .property .ui-input-slider-right {
-	transition: opacity 0.15s;
-    opacity: 0;
-}
-
-#controls .property .name {
-	width: 60px;
-	height: 20px;
-	padding: 0px 10px 0px 0px;
-	text-align: right;
-	line-height: 100%;
-	float: left;
-}
-
-#controls .property .config {
-	width: 20px;
-	height: 20px;
-	float: left;
-	background: url("https://mdn.mozillademos.org/files/6021/config.png") center center no-repeat;
-	opacity: 0.5;
-}
-
-#controls .property .config:hover {
-	cursor: pointer;
-	opacity: 1;
-}
-
-#controls .ui-input-slider:hover .ui-input-slider-right {
-    opacity: 1;
-}
-
-#controls .ui-input-slider:hover .ui-input-slider-left {
-    opacity: 1;
-}
-
-#controls .property .ui-dropdown {
-	margin: 0 10px;
-	float: left;
-}
-
-
-#controls .property .ui-checkbox {
-	margin: 0 0 0 16px;
-	float: left;
-}
-
-#controls .property .ui-checkbox label {
-	height: 0.85em;
-	width: 10px;
-}
-
-/* dropdowns */
-#controls .ui-dropdown {
-	width: 50px;
-	height: 1.7em;
-	border-radius: 2px;
-}
-
-#controls .ui-dropdown-select {
-	line-height: 1.6em;
-}
-
-#controls .ui-dropdown-list {
-	top: 20px;
-}
-
-#controls .ui-dropdown-list {
-	border-width: 1px;
-	text-align: center;
-}
-
-#controls .ui-dropdown-list:hover {
-	overflow: hidden;
-}
-
-#controls .border-repeat {
-	margin: 0 0 0 16px !important;
-	width: 80px;
-}
-
-#controls .border-repeat .ui-dropdown-list {
-	height: 6.2em;
-	border-width: 1px;
-	text-align: center;
-}
-
-/* border-image-slice */
-
-
-#border-slice-control .ui-dropdown-list {
-	height: 4.3em;
-}
-
-/* border-image-width */
-
-#border-width-control .ui-dropdown-list {
-	height: 6.2em;
-}
-
-/* border-image-outset */
-
-#border-outset-control .ui-dropdown-list {
-	height: 4.3em;
-}
-
-#aditional-properties .property {
-	width: 200px;
-}
-
-#aditional-properties .ui-input-slider &gt; input {
-	width: 80px !important;
-}
-
-/* unit settings panel */
-
-#unit-settings {
-	padding: 10px;
-	position: absolute;
-
-	background: #FFF;
-
-	font-size: 12px;
-	border-radius: 3px;
-	border: 1px solid #CCC;
-	text-align: center;
-	color: #555;
-
-	position: absolute;
-	z-index: 1000;
-
-	box-shadow: 0 0 3px 0 #BABABA;
-	transition: all 0.25s;
-}
-
-#unit-settings .title {
-	width: 100%;
-	margin: -5px auto 0;
-
-	color: #666;
-	font-size: 14px;
-	font-weight: bold;
-	line-height: 25px;
-	border-bottom: 1px solid #E5E5E5;
-}
-
-#unit-settings .ui-input-slider {
-	margin: 10px 0 0 0;
-}
-
-#unit-settings .ui-input-slider-info {
-	width: 50px;
-	line-height: 1.5em;
-}
-
-#unit-settings input {
-	font-size: 12px;
-	width: 40px !important;
-}
-
-#unit-settings .close {
-	width: 16px;
-	height: 16px;
-	background: url('https://mdn.mozillademos.org/files/6019/close.png') no-repeat center center;
-	background-size: 75%;
-
-	position: absolute;
-	top: 4px;
-	right: 4px;
-	opacity: 0.5;
-}
-
-#unit-settings .close:hover {
-	cursor: pointer;
-	opacity: 1;
-}
-
-#unit-settings[data-active='true'] {
-	opacity: 1;
-}
-
-#unit-settings[data-active='false'] {
-	opacity: 0;
-	top: -100px !important;
-}
-
-/*
- * CSS Output Code
- */
-
-#output {
-	padding: 10px;
-	border: 2px dashed #888 !important;
-	box-shadow: none !important;
-	border-radius: 3px;
-	overflow: hidden;
-
-	-moz-user-select: text;
-	-webkit-user-select: text;
-	-ms-user-select: text;
-	user-select: text;
-}
-
-
-@media (min-width: 880px) {
-	#output {
-		width: 63.33% !important;
-	}
-}
-
-@media (max-width: 879px) {
-	#output {
-		width: 87% !important;
-	}
-}
-
-
-#output .title {
-	width: 100%;
-	height: 30px;
-	margin: 0 0 10px 0;
-	line-height: 25px;
-
-	text-align: center;
-	color: #AAA;
-}
-
-#output .css-property {
-	width: 100%;
-	margin: 0;
-	color: #555;
-	font-size: 14px;
-	line-height: 18px;
-	float: left;
-}
-
-#output .css-property .name {
-	width: 30%;
-	font-weight: bold;
-	text-align: right;
-	float: left;
-}
-
-#output .css-property .value {
-	width: 65%;
-	padding: 0 2.5%;
-	word-break: break-all;
-	float: left;
-}
-
-</pre>
-
-<h3 id="JavaScript_Content">JavaScript Content</h3>
-
-<pre class="brush: js">'use strict';
-
-/**
- * UI-SlidersManager
- */
-
-var InputSliderManager = (function InputSliderManager() {
-
-	var subscribers = {};
-	var sliders = [];
-
-	var InputComponent = function InputComponent(obj) {
-		var input = document.createElement('input');
-		input.setAttribute('type', 'text');
-		input.style.width = 50 + obj.precision * 10 + 'px';
-
-		input.addEventListener('click', function(e) {
-			this.select();
-		});
-
-		input.addEventListener('change', function(e) {
-			var value = parseFloat(e.target.value);
-
-			if (isNaN(value) === true)
-				setValue(obj.topic, obj.value);
-			else
-				setValue(obj.topic, value);
-		});
-
-		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) {
-			document.removeEventListener("mousemove", sliderMotion);
-			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("mouseup", slideEnd);
-			document.addEventListener("mousemove", sliderMotion);
-		});
-
-		var slideEnd = function slideEnd(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		= parseFloat(node.getAttribute('data-min'));
-		var max		= parseFloat(node.getAttribute('data-max'));
-		var step	= parseFloat(node.getAttribute('data-step'));
-		var value	= parseFloat(node.getAttribute('data-value'));
-		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;
-		var precision = node.getAttribute('data-precision') | 0;
-
-		this.min = isNaN(min) ? 0 : min;
-		this.max = isNaN(max) ? 100 : max;
-		this.precision = precision &gt;= 0 ? precision : 0;
-		this.step = step &lt; 0 || isNaN(step) ? 1 : step.toFixed(precision);
-		this.topic = topic;
-		this.node = node;
-		this.unit = unit === null ? '' : unit;
-		this.sensivity = sensivity &gt; 0 ? sensivity : 5;
-		value = isNaN(value) ? this.min : value;
-
-		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);
-
-		this.input = input;
-		sliders[topic] = this;
-		setValue(topic, value);
-	};
-
-	InputSlider.prototype.setInputValue = function setInputValue() {
-		this.input.value = this.value.toFixed(this.precision) + this.unit;
-	};
-
-	var setValue = function setValue(topic, value, send_notify) {
-		var slider = sliders[topic];
-		if (slider === undefined)
-			return;
-
-		value = parseFloat(value.toFixed(slider.precision));
-
-		if (value &gt; slider.max) value = slider.max;
-		if (value &lt; slider.min)	value = slider.min;
-
-		slider.value = value;
-		slider.node.setAttribute('data-value', value);
-
-		slider.setInputValue();
-
-		if (send_notify === false)
-			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 setStep = function setStep(topic, value) {
-		var slider = sliders[topic];
-		if (slider === undefined)
-			return;
-
-		slider.step = parseFloat(value);
-		setValue(topic, slider.value);
-	};
-
-	var setPrecision = function setPrecision(topic, value) {
-		var slider = sliders[topic];
-		if (slider === undefined)
-			return;
-
-		value = value | 0;
-		slider.precision = value;
-
-		var step = parseFloat(slider.step.toFixed(value));
-		if (step === 0)
-			slider.step = 1 / Math.pow(10, value);
-
-		setValue(topic, slider.value);
-	};
-
-	var setSensivity = function setSensivity(topic, value) {
-		var slider = sliders[topic];
-		if (slider === undefined)
-			return;
-
-		value = value | 0;
-
-		slider.sensivity = value &gt; 0 ? value : 5;
-	};
-
-	var getNode =  function getNode(topic) {
-		return sliders[topic].node;
-	};
-
-	var getPrecision =  function getPrecision(topic) {
-		return sliders[topic].precision;
-	};
-
-	var getStep =  function getStep(topic) {
-		return sliders[topic].step;
-	};
-
-	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() {
-		if (subscribers[this.topic] === undefined)
-			return;
-		for (var i = 0; i &lt; subscribers[this.topic].length; i++)
-			subscribers[this.topic][i](this.value);
-	};
-
-	var createSlider = function createSlider(topic, label) {
-		var slider = document.createElement('div');
-		slider.className = 'ui-input-slider';
-		slider.setAttribute('data-topic', topic);
-
-		if (label !== undefined)
-			slider.setAttribute('data-info', label);
-
-		new InputSlider(slider);
-		return slider;
-	};
-
-	var init = function init() {
-		var elem = document.querySelectorAll('.ui-input-slider');
-		var size = elem.length;
-		for (var i = 0; i &lt; size; i++)
-			new InputSlider(elem[i]);
-	};
-
-	return {
-		init : init,
-		setMax : setMax,
-		setMin : setMin,
-		setUnit : setUnit,
-		setStep : setStep,
-		getNode : getNode,
-		getStep : getStep,
-		setValue : setValue,
-		subscribe : subscribe,
-		unsubscribe : unsubscribe,
-		setPrecision : setPrecision,
-		setSensivity : setSensivity,
-		getPrecision : getPrecision,
-		createSlider : createSlider,
-	};
-
-})();
-
-
-/**
- * UI-DropDown Select
- */
-
-var DropDownManager = (function DropdownManager() {
-
-	var subscribers = {};
-	var dropdowns = [];
-	var active = null;
-
-	var visbility = ["hidden", "visible"];
-
-
-	var DropDown = function DropDown(node) {
-		var topic = node.getAttribute('data-topic');
-		var label = node.getAttribute('data-label');
-		var selected = node.getAttribute('data-selected') | 0;
-
-		var select = document.createElement('div');
-		var list = document.createElement('div');
-		var uval = 0;
-		var option = null;
-		var option_value = null;
-
-		list.className = 'ui-dropdown-list';
-		select.className = 'ui-dropdown-select';
-
-		while (node.firstElementChild !== null) {
-			option = node.firstElementChild;
-			option_value = option.getAttribute('data-value');
-
-			if (option_value === null)
-				option.setAttribute('data-value', uval);
-
-			list.appendChild(node.firstElementChild);
-			uval++;
-		}
-
-		node.appendChild(select);
-		node.appendChild(list);
-
-		select.onclick = this.toggle.bind(this);
-		list.onclick = this.updateValue.bind(this);
-		document.addEventListener('click', clickOut);
-
-		this.state = 0;
-		this.time = 0;
-		this.dropmenu = list;
-		this.select = select;
-		this.toggle(false);
-		this.value = {};
-		this.topic = topic;
-
-		if (label)
-			select.textContent = label;
-		else
-			this.setNodeValue(list.children[selected]);
-
-		dropdowns[topic] = this;
-
-	};
-
-	DropDown.prototype.toggle = function toggle(state) {
-		if (typeof(state) === 'boolean')
-			this.state = state === false ? 0 : 1;
-		else
-			this.state = 1 ^ this.state;
-
-		if (active !== this) {
-			if (active)
-				active.toggle(false);
-			active = this;
-		}
-
-		if (this.state === 0)
-			this.dropmenu.setAttribute('data-hidden', 'true');
-		else
-			this.dropmenu.removeAttribute('data-hidden');
-
-	};
-
-	var clickOut = function clickOut(e) {
-		if (active.state === 0 ||
-			e.target === active.dropmenu ||
-			e.target === active.select)
-			return;
-
-		active.toggle(false);
-	};
-
-	DropDown.prototype.updateValue = function updateValue(e) {
-
-		if (Date.now() - this.time &lt; 500)
-			return;
-
-		if (e.target.className !== "ui-dropdown-list") {
-			this.setNodeValue(e.target);
-			this.toggle(false);
-		}
-
-		this.time = Date.now();
-	};
-
-	DropDown.prototype.setNodeValue = function setNodeValue(node) {
-		this.value['name'] = node.textContent;
-		this.value['value'] = node.getAttribute('data-value');
-
-		this.select.textContent = node.textContent;
-		this.select.setAttribute('data-value', this.value['value']);
-
-		notify.call(this);
-	};
-
-	var createDropDown = function createDropDown(topic, options) {
-
-		var dropdown = document.createElement('div');
-		dropdown.setAttribute('data-topic', topic);
-		dropdown.className = 'ui-dropdown';
-
-		for (var i in options) {
-			var x = document.createElement('div');
-			x.setAttribute('data-value', i);
-			x.textContent = options[i];
-			dropdown.appendChild(x);
-		}
-
-		new DropDown(dropdown);
-
-		return dropdown;
-	};
-
-	var setValue = function setValue(topic, index) {
-		if (dropdowns[topic] === undefined ||
-			index &gt;= dropdowns[topic].dropmenu.children.length)
-			return;
-
-		dropdowns[topic].setNodeValue(dropdowns[topic].dropmenu.children[index]);
-	};
-
-	var subscribe = function subscribe(topic, callback) {
-		if (subscribers[topic] === undefined)
-			subscribers[topic] = [];
-		subscribers[topic].push(callback);
-	};
-
-	var unsubscribe = function unsubscribe(topic, callback) {
-		var index = subscribers[topic].indexOf(callback);
-		subscribers[topic].splice(index, 1);
-	};
-
-	var notify = function notify() {
-		if (subscribers[this.topic] === undefined)
-			return;
-
-		for (var i in subscribers[this.topic]) {
-			subscribers[this.topic][i](this.value);
-		}
-	};
-
-	var init = function init() {
-		var elem, size;
-
-		elem = document.querySelectorAll('.ui-dropdown');
-		size = elem.length;
-		for (var i = 0; i &lt; size; i++)
-			new DropDown(elem[i]);
-
-	};
-
-	return {
-		init : init,
-		setValue : setValue,
-		subscribe : subscribe,
-		unsubscribe : unsubscribe,
-		createDropDown : createDropDown
-	};
-
-})();
-
-
-/**
- * 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) {
-		var obj = buttons[topic];
-		if (obj === undefined)
-			return;
-
-		obj.checkbox.checked = value;
-		notify.call(obj);
-	};
-
-	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() {
-		if (subscribers[this.topic] === undefined)
-			return;
-		for (var i = 0; i &lt; 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 &lt; size; i++)
-			new CheckBox(elem[i]);
-	};
-
-	return {
-		init : init,
-		setValue : setValue,
-		subscribe : subscribe,
-		unsubscribe : unsubscribe
-	};
-
-})();
-
-window.addEventListener("load", function() {
-	BorderImage.init();
-});
-
-var BorderImage = (function BorderImage() {
-
-	var getElemById = document.getElementById.bind(document);
-
-	var subject;
-	var preview;
-	var guidelines = [];
-	var positions = ['top', 'right', 'bottom', 'left'];
-
-	var makeDraggable = function makeDraggable(elem) {
-
-		var offsetTop;
-		var offsetLeft;
-
-		elem.setAttribute('data-draggable', 'true');
-
-		var dragStart = function dragStart(e) {
-			if (e.target.getAttribute('data-draggable') !== 'true' ||
-				e.target !== elem || e.button !== 0)
-				return;
-
-			offsetLeft = e.clientX - elem.offsetLeft;
-			offsetTop = e.clientY - elem.offsetTop;
-
-			document.addEventListener('mousemove', mouseDrag);
-			document.addEventListener('mouseup', dragEnd);
-		};
-
-		var dragEnd = function dragEnd(e) {
-			if (e.button !== 0)
-				return;
-
-			document.removeEventListener('mousemove', mouseDrag);
-			document.removeEventListener('mouseup', dragEnd);
-		};
-
-		var mouseDrag = function mouseDrag(e) {
-
-			elem.style.left = e.clientX - offsetLeft + 'px';
-			elem.style.top = e.clientY - offsetTop + 'px';
-		};
-
-		elem.addEventListener('mousedown', dragStart, false);
-	};
-
-	var PreviewControl = function PreviewControl() {
-
-		var dragging = false;
-		var valueX = null;
-		var valueY = null;
-
-		var dragStart = function dragStart(e) {
-			if (e.button !== 0)
-				return;
-
-			valueX = e.clientX - preview.clientWidth;
-			valueY = e.clientY - preview.clientHeight;
-			dragging = true;
-
-			document.addEventListener('mousemove', mouseDrag);
-		};
-
-		var dragEnd = function dragEnd(e) {
-			if (e.button !== 0 || dragging === false)
-				return;
-
-			document.removeEventListener('mousemove', mouseDrag);
-			dragging = false;
-		};
-
-		var mouseDrag = function mouseDrag(e) {
-			InputSliderManager.setValue('preview-width', e.clientX - valueX);
-			InputSliderManager.setValue('preview-height', e.clientY - valueY);
-		};
-
-		var init = function init() {
-
-			makeDraggable(preview);
-			makeDraggable(subject);
-
-			var handle = document.createElement('div');
-			handle.className = 'resize-handle';
-
-			handle.addEventListener('mousedown', dragStart);
-			document.addEventListener('mouseup', dragEnd);
-
-			preview.appendChild(handle);
-
-		};
-
-		return {
-			init: init
-		};
-
-	}();
-
-	var ImageReader = (function ImageReader() {
-
-		var fReader = new FileReader();
-		var browse = document.createElement('input');
-
-		var loadImage = function loadImage(e) {
-			if (browse.files.length === 0)
-				return;
-
-			var file = browse.files[0];
-
-			if (file.type.slice(0, 5) !== 'image')
-				return;
-
-			fReader.readAsDataURL(file);
-
-			return false;
-		};
-
-		fReader.onload = function(e) {
-			ImageControl.loadRemoteImage(e.target.result);
-		};
-
-		var load = function load() {
-			browse.click();
-		};
-
-		browse.setAttribute('type', 'file');
-		browse.style.display = 'none';
-		browse.onchange = loadImage;
-
-		return {
-			load: load
-		};
-
-	})();
-
-	var ImageControl = (function ImageControl() {
-
-		var scale = 0.5;
-		var imgSource = new Image();
-		var imgState = null;
-		var selected = null;
-
-
-		var topics = ['slice', 'width', 'outset'];
-		var properties = {};
-		properties['border1'] = {
-			fill			: false,
-
-			slice_values	: [27, 27, 27, 27],
-			width_values	: [20, 20, 20, 20],
-			outset_values	: [0, 0, 0, 0],
-
-			slice_units		: [0, 0, 0, 0],
-			width_units		: [0, 0, 0, 0],
-			outset_units	: [0, 0, 0, 0],
-
-			repeat			: [1, 1],
-			size			: [300, 200],
-			preview_area	: 400
-		};
-
-		properties['border2'] = {
-			fill			: false,
-
-			slice_values	: [33, 33, 33, 33],
-			width_values	: [1.5, 1.5, 1.5, 1.5],
-			outset_values	: [0, 0, 0, 0],
-
-			slice_units		: [1, 1, 1, 1],
-			width_units		: [2, 2, 2, 2],
-			outset_units	: [0, 0, 0, 0],
-
-			repeat			: [2, 2],
-			size			: [300, 200],
-			preview_area	: 400
-		};
-
-		properties['border3'] = {
-			fill			: true,
-
-			slice_values	: [15, 15, 15, 15],
-			width_values	: [10, 10, 10, 10],
-			outset_values	: [0, 0, 0, 0],
-
-			slice_units		: [0, 0, 0, 0],
-			width_units		: [0, 0, 0, 0],
-			outset_units	: [0, 0, 0, 0],
-
-			repeat			: [2, 2],
-			size			: [300, 200],
-			preview_area	: 400
-		};
-
-		properties['border4'] = {
-			fill			: false,
-
-			slice_values	: [13, 13, 13, 13],
-			width_values	: [13, 13, 13, 13],
-			outset_values	: [13, 13, 13, 13],
-
-			slice_units		: [0, 0, 0, 0],
-			width_units		: [0, 0, 0, 0],
-			outset_units	: [0, 0, 0, 0],
-
-			repeat			: [0, 0],
-			size			: [300, 200],
-			preview_area	: 400
-		};
-
-		properties['border5'] = {
-			fill			: false,
-
-			slice_values	: [0, 12, 0, 12],
-			width_values	: [0, 12, 0, 12],
-			outset_values	: [0, 0, 0, 0],
-
-			slice_units		: [0, 0, 0, 0],
-			width_units		: [0, 0, 0, 0],
-			outset_units	: [0, 0, 0, 0],
-
-			repeat			: [0, 0],
-			size			: [300, 200],
-			preview_area	: 400,
-		};
-
-		properties['border6'] = {
-			fill			: false,
-
-			slice_values	: [42, 42, 42, 42],
-			width_values	: [42, 42, 42, 42],
-			outset_values	: [0, 0, 0, 0],
-
-			slice_units		: [0, 0, 0, 0],
-			width_units		: [0, 0, 0, 0],
-			outset_units	: [0, 0, 0, 0],
-
-			repeat			: [2, 2],
-			size			: [350, 350],
-			preview_area	: 500,
-		};
-
-
-		var loadLocalImage = function loadLocalImage(source) {
-			var location = "images/" + source;
-			imgSource.src = location;
-		};
-
-		var loadRemoteImage = function loadRemoteImage(source) {
-			imgSource.src = source;
-			if (selected)
-				selected.removeAttribute('selected');
-			Tool.setOutputCSS('source', 'url("' + source + '")');
-		};
-
-		var pickImage = function pickImage(e) {
-			if (e.target.className === 'image') {
-				selected = e.target;
-				selected.setAttribute('selected', 'true');
-				loadRemoteImage(e.target.src);
-				imgState = e.target.getAttribute('data-stateID');
-			}
-		};
-
-		var loadImageState = function loadImageState(stateID) {
-			if (properties[stateID] === undefined)
-				return;
-
-			var prop = properties[stateID];
-			var topic;
-			var unit_array;
-			var value_array;
-
-			for (var i in topics) {
-				for (var j=0; j&lt;4; j++) {
-					topic = topics[i] + '-' + positions[j];
-					unit_array = topics[i] + '_units';
-					value_array = topics[i] + '_values';
-					InputSliderManager.setValue(topic, prop[value_array][j]);
-					DropDownManager.setValue(topic, prop[unit_array][j]);
-				}
-			}
-
-			ButtonManager.setValue('slice-fill', prop['fill']);
-			DropDownManager.setValue('image-repeat-X', prop['repeat'][0]);
-			DropDownManager.setValue('image-repeat-Y', prop['repeat'][1]);
-			InputSliderManager.setValue('preview-width', prop['size'][0]);
-			InputSliderManager.setValue('preview-height', prop['size'][1]);
-			InputSliderManager.setValue('preview-area-height', prop['preview_area']);
-		};
-
-		var update = function update() {
-			scale =  Math.min(300, (30000 / this.width) | 0);
-			setScale(scale);
-			InputSliderManager.setValue('scale', scale, false);
-
-			subject.style.backgroundImage = 'url("' + this.src + '")';
-			preview.style.borderImageSource = 'url("' + this.src + '")';
-
-			guidelines['slice-top'].setMax(this.height);
-			guidelines['slice-right'].setMax(this.width);
-			guidelines['slice-bottom'].setMax(this.height);
-			guidelines['slice-left'].setMax(this.width);
-
-			if (imgState)
-				loadImageState(imgState);
-		};
-
-		var setScale = function setScale(value) {
-			scale = value;
-			var w = imgSource.width * scale / 100 | 0;
-			var h = imgSource.height * scale / 100 | 0;
-			subject.style.width = w + 'px';
-			subject.style.height = h + 'px';
-
-			for (var i = 0; i &lt; positions.length; i++)
-				guidelines['slice-' + positions[i]].updateGuidelinePos();
-		};
-
-		var getScale = function getScale() {
-			return scale/100;
-		};
-
-		var toggleGallery = function toggleGallery() {
-			var gallery = getElemById('image-gallery');
-			var button  = getElemById('toggle-gallery');
-			var state = 1;
-			button.addEventListener('click', function() {
-				state = 1 ^ state;
-				if (state === 0) {
-					gallery.setAttribute('data-collapsed', 'true');
-					button.setAttribute('data-action', 'show');
-				}
-				else {
-					gallery.removeAttribute('data-collapsed');
-					button.setAttribute('data-action', 'hide');
-				}
-			});
-		};
-
-		var init = function init() {
-			var gallery = getElemById('image-gallery');
-			var browse = getElemById('load-image');
-			var remote = getElemById('remote-url');
-			var load_remote = getElemById('load-remote');
-
-			remote.addEventListener('change', function(){
-				loadRemoteImage(this.value);
-			});
-
-			load_remote.addEventListener('click', function(){
-				loadRemoteImage(remote.value);
-			});
-
-			browse.addEventListener('click', ImageReader.load);
-			gallery.addEventListener('click', pickImage);
-			imgSource.addEventListener('load', update);
-
-			InputSliderManager.subscribe('scale', setScale);
-			InputSliderManager.setValue('scale', scale);
-			imgState = 'border1';
-			loadRemoteImage('https://mdn.mozillademos.org/files/6007/border-image-1.png');
-			toggleGallery();
-		};
-
-		return {
-			init: init,
-			getScale : getScale,
-			loadRemoteImage: loadRemoteImage
-		};
-
-	})();
-
-	var GuideLine = function GuideLine(node) {
-		var topic = node.getAttribute('data-topic');
-		var axis = node.getAttribute('data-axis');
-
-		this.node = node;
-		this.topic = topic;
-		this.axis = axis;
-		this.info = topic.split('-')[1];
-
-		this.position = 0;
-		this.value = 0;
-		this.unit = 0;
-		this.max = 0;
-		this.pos = positions.indexOf(this.info);
-
-		guidelines[topic] = this;
-
-		var relative_container = document.createElement('div');
-		var tooltip = document.createElement('div');
-		var tooltip2 = document.createElement('div');
-
-		tooltip.className = 'tooltip';
-		tooltip.setAttribute('data-info', this.info);
-
-		tooltip2.className = 'tooltip2';
-		tooltip2.textContent = this.info;
-		tooltip2.setAttribute('data-info', this.info);
-
-		this.tooltip = tooltip;
-
-		relative_container.appendChild(tooltip);
-		relative_container.appendChild(tooltip2);
-		node.appendChild(relative_container);
-
-		var startX = 0;
-		var startY = 0;
-		var start = 0;
-
-		var startDrag = function startDrag(e) {
-			startX = e.clientX;
-			startY = e.clientY;
-			start = guidelines[topic].position;
-			document.body.setAttribute('data-move', axis);
-			relative_container.setAttribute('data-active', '');
-			node.setAttribute('data-active', '');
-
-			document.addEventListener('mousemove', updateGuideline);
-			document.addEventListener('mouseup', endDrag);
-		};
-
-		var endDrag = function endDrag() {
-			document.body.removeAttribute('data-move');
-			relative_container.removeAttribute('data-active');
-			node.removeAttribute('data-active');
-
-			document.removeEventListener('mousemove', updateGuideline);
-		};
-
-		var updateGuideline = function updateGuideline(e) {
-			var value;
-			if (topic === 'slice-top')
-				value = e.clientY - startY + start;
-
-			if (topic === 'slice-right')
-				value = startX - e.clientX + start;
-
-			if (topic === 'slice-bottom')
-				value = startY - e.clientY + start;
-
-			if (topic === 'slice-left')
-				value = e.clientX - startX + start;
-
-			if (this.unit === 0)
-				InputSliderManager.setValue(topic, value * 1 / ImageControl.getScale() | 0);
-			else {
-				InputSliderManager.setValue(topic, (value * 100 / (this.max * ImageControl.getScale())) | 0);
-			}
-
-		}.bind(this);
-
-		node.addEventListener("mousedown", startDrag);
-
-		InputSliderManager.subscribe(topic, this.setPosition.bind(this));
-		InputSliderManager.setValue(topic, this.position);
-	};
-
-
-	GuideLine.prototype.updateGuidelinePos = function updateGuidelinePos() {
-		if (this.unit === 0)
-			this.position = this.value * ImageControl.getScale() | 0;
-		else
-			this.position = this.value * this.max * ImageControl.getScale() / 100 | 0;
-
-		this.node.style[this.info] = this.position + 'px';
-	};
-
-	GuideLine.prototype.setPosition = function setPosition(value) {
-		this.value = value;
-		this.tooltip.textContent = value;
-		this.updateGuidelinePos();
-		Tool.setBorderSlice(this.pos, value);
-	};
-
-	GuideLine.prototype.setMax = function setMax(max) {
-		this.max = max;
-		this.updateLimit();
-	};
-
-	GuideLine.prototype.updateLimit = function updateLimit() {
-		if (this.unit === 1)
-			InputSliderManager.setMax(this.topic, 100);
-		else
-			InputSliderManager.setMax(this.topic, this.max);
-	};
-
-	GuideLine.prototype.setUnit = function setUnit(type) {
-		if (type === '%')	this.unit = 1;
-		if (type === '')	this.unit = 0;
-		this.updateLimit();
-	};
-
-	/*
-	 * Unit panel
-	 */
-	var UnitPanel = (function UnitPanel () {
-
-		var panel;
-		var title;
-		var precision;
-		var step;
-		var unit_topic = null; // settings are made for this topic
-		var step_option = [1, 0.1, 0.01];
-
-		var updatePrecision = function updatePrecision(value) {
-			InputSliderManager.setPrecision('unit-step', value);
-			InputSliderManager.setStep('unit-step', step_option[value]);
-			InputSliderManager.setMin('unit-step', step_option[value]);
-
-			if (unit_topic)
-				InputSliderManager.setPrecision(unit_topic, value);
-		};
-
-		var updateUnitSettings = function updateUnitSettings(value) {
-			if (unit_topic)
-				InputSliderManager.setStep(unit_topic, value);
-		};
-
-		var show = function show(e) {
-			var topic = e.target.getAttribute('data-topic');
-			var precision = InputSliderManager.getPrecision(topic);
-			var step = InputSliderManager.getStep(topic);
-
-			unit_topic = topic;
-			title.textContent = topic;
-
-			panel.setAttribute('data-active', 'true');
-			panel.style.top = e.target.offsetTop - 40 + 'px';
-			panel.style.left = e.target.offsetLeft + 30 + 'px';
-
-			InputSliderManager.setValue('unit-precision', precision);
-			InputSliderManager.setValue('unit-step', step);
-		};
-
-		var init = function init() {
-			panel = document.createElement('div');
-			title = document.createElement('div');
-			var close = document.createElement('div');
-
-			step = InputSliderManager.createSlider('unit-step', 'step');
-			precision = InputSliderManager.createSlider('unit-precision', 'precision');
-
-			InputSliderManager.setStep('unit-precision', 1);
-			InputSliderManager.setMax('unit-precision', 2);
-			InputSliderManager.setValue('unit-precision', 2);
-			InputSliderManager.setSensivity('unit-precision', 20);
-
-			InputSliderManager.setValue('unit-step', 1);
-			InputSliderManager.setStep('unit-step', 0.01);
-			InputSliderManager.setPrecision('unit-step', 2);
-
-			InputSliderManager.subscribe('unit-precision', updatePrecision);
-			InputSliderManager.subscribe('unit-step', updateUnitSettings);
-
-			close.addEventListener('click', function () {
-				panel.setAttribute('data-active', 'false');
-			});
-
-			title.textContent = 'Properties';
-			title.className = 'title';
-			close.className = 'close';
-			panel.id = 'unit-settings';
-			panel.setAttribute('data-active', 'false');
-			panel.appendChild(title);
-			panel.appendChild(precision);
-			panel.appendChild(step);
-			panel.appendChild(close);
-			document.body.appendChild(panel);
-		};
-
-		return {
-			init : init,
-			show : show
-		};
-
-	})();
-
-	/**
-	 * Tool Manager
-	 */
-	var Tool = (function Tool() {
-		var preview_area;
-		var dropdown_unit_options = [
-			{ '' : '--', '%' : '%'},
-			{ 'px' : 'px', '%' : '%', 'em' : 'em'},
-			{ 'px' : 'px', 'em' : 'em'},
-		];
-
-		var border_slice = [];
-		var border_width = [];
-		var border_outset = [];
-
-		var border_slice_values = [];
-		var border_width_values = [];
-		var border_outset_values = [];
-
-		var border_slice_units = ['', '', '', ''];
-		var border_width_units = ['px', 'px', 'px', 'px'];
-		var border_outset_units = ['px', 'px', 'px', 'px'];
-
-		var border_fill = false;
-		var border_repeat = ['round', 'round'];
-		var CSS_code = {
-			'source' : null,
-			'slice' : null,
-			'width' : null,
-			'outset' : null,
-			'repeat' : null
-		};
-
-		var setBorderSlice = function setBorderSlice(positionID, value) {
-			border_slice[positionID] = value + border_slice_units[positionID];
-			updateBorderSlice();
-		};
-
-		var updateBorderSlice = function updateBorderSlice() {
-			var value = border_slice.join(' ');
-			if (border_fill === true)
-				value += ' fill';
-
-			preview.style.borderImageSlice = value;
-			setOutputCSS('slice', value);
-		};
-
-		var setBorderFill = function setBorderFill(value) {
-			border_fill = value;
-			var bimgslice = border_slice.join(' ');;
-			if (value === true)
-				bimgslice += ' fill';
-
-			preview.style.borderImageSlice = bimgslice;
-		};
-
-		var updateBorderWidth = function updateBorderWidth() {
-			var value = border_width.join(' ');
-			preview.style.borderImageWidth = value;
-			setOutputCSS('width', value);
-		};
-
-		var updateBorderOutset = function updateBorderOutset() {
-			var value = border_outset.join(' ');
-			preview.style.borderImageOutset = border_outset.join(' ');
-			setOutputCSS('outset', value);
-		};
-
-		var setBorderRepeat = function setBorderRepeat(obj) {
-			border_repeat[obj.value] = obj.name;
-			var value = border_repeat.join(' ');
-			preview.style.borderImageRepeat = value;
-			setOutputCSS('repeat', value);
-		};
-
-		var setOutputCSS = function setOutputCSS(topic, value) {
-			CSS_code[topic].textContent = value + ';';
-		};
-
-		var setPreviewFontSize = function setPreviewFontSize(value) {
-			preview.style.fontSize = value + 'px';
-		};
-
-		var setPreviewWidth = function setPreviewWidth(value) {
-			preview.style.width = value + 'px';
-		};
-
-		var setPreviewHeight = function setPreviewHeight(value) {
-			preview.style.height = value + 'px';
-		};
-
-		var setPreviewAreaHeight = function setPreviewAreaHeight(value) {
-			preview_area.style.height = value + 'px';
-		};
-
-		var updateDragOption = function updateDragOption(value) {
-			if (value === true)
-				subject.setAttribute('data-draggable', 'true');
-			else
-				subject.removeAttribute('data-draggable');
-		};
-
-		var createProperty = function createProperty(topic, labelID, optionsID) {
-
-			var slider = InputSliderManager.createSlider(topic, positions[labelID]);
-			var dropdown = DropDownManager.createDropDown(topic, dropdown_unit_options[optionsID]);
-
-			InputSliderManager.setSensivity(topic, 3);
-			InputSliderManager.setPrecision(topic, 1);
-
-			var property = document.createElement('div');
-			var config = document.createElement('div');
-
-			property.className = 'property';
-			config.className = 'config';
-			config.setAttribute('data-topic', topic);
-			config.addEventListener('click', UnitPanel.show);
-
-			property.appendChild(slider);
-			property.appendChild(dropdown);
-			property.appendChild(config);
-
-			return property;
-		};
-
-		var initBorderSliceControls = function initBorderSliceControls() {
-			var container = getElemById('border-slice-control');
-
-			var listenForChanges = function listenForChanges(topic, id) {
-				InputSliderManager.subscribe(topic, function(value) {
-					border_slice_values[id] = value;
-					border_slice[id] = value + border_slice_units[id];
-					updateBorderSlice();
-				});
-
-				DropDownManager.subscribe(topic, function(obj) {
-					guidelines[topic].setUnit(obj.value);
-					border_slice_units[id] = obj.value;
-					border_slice[id] = border_slice_values[id] + obj.value;
-					updateBorderSlice();
-				});
-			};
-
-			for (var i = 0; i &lt; positions.length; i++) {
-				var topic = 'slice-' + positions[i];
-				var property = createProperty(topic, i, 0);
-				listenForChanges(topic, i);
-
-				container.appendChild(property);
-			}
-
-			container.appendChild(container.children[1]);
-
-		};
-
-		var initBorderWidthControls = function initBorderWidthControls() {
-			var container = getElemById('border-width-control');
-
-			var listenForChanges = function listenForChanges(topic, id) {
-				InputSliderManager.subscribe(topic, function(value) {
-					border_width_values[id] = value;
-					border_width[id] = value + border_width_units[id];
-					updateBorderWidth();
-				});
-
-				DropDownManager.subscribe(topic, function(obj) {
-					if (obj.value === '%')
-						InputSliderManager.setMax(topic, 100);
-					else
-						InputSliderManager.setMax(topic, 1000);
-
-					border_width_units[id] = obj.value;
-					border_width[id] = border_width_values[id] + obj.value;
-					updateBorderWidth();
-				});
-			};
-
-			for (var i = 0; i &lt; positions.length; i++) {
-				var topic = 'width-' + positions[i];
-				var property = createProperty(topic, i, 1);
-				InputSliderManager.setMax(topic, 1000);
-				listenForChanges(topic, i);
-
-				container.appendChild(property);
-			}
-		};
-
-		var initBorderOutsetControls = function initBorderOutsetControls() {
-
-			var container = getElemById('border-outset-control');
-
-			var listenForChanges = function listenForChanges(topic, id) {
-				InputSliderManager.subscribe(topic, function(value) {
-					border_outset_values[id] = value;
-					border_outset[id] = value + border_outset_units[id];
-					updateBorderOutset();
-				});
-
-				DropDownManager.subscribe(topic, function(obj) {
-					border_outset_units[id] = obj.value;
-					border_outset[id] = border_outset_values[id] + obj.value;
-					updateBorderOutset();
-				});
-			};
-
-			for (var i = 0; i &lt; positions.length; i++) {
-				var topic = 'outset-' + positions[i];
-				var property = createProperty(topic, i, 2);
-				InputSliderManager.setMax(topic, 1000);
-				listenForChanges(topic, i);
-
-				container.appendChild(property);
-			}
-		};
-
-		var init = function init() {
-
-			var gallery =
-			subject = getElemById('subject');
-			preview = getElemById("preview");
-			preview_area = getElemById("preview_section");
-
-
-			CSS_code['source'] = getElemById("out-border-source");
-			CSS_code['slice'] = getElemById("out-border-slice");
-			CSS_code['width'] = getElemById("out-border-width");
-			CSS_code['outset'] = getElemById("out-border-outset");
-			CSS_code['repeat'] = getElemById("out-border-repeat");
-
-			initBorderSliceControls();
-			initBorderWidthControls();
-			initBorderOutsetControls();
-
-			var elem = document.querySelectorAll('.guideline');
-			var size = elem.length;
-			for (var i = 0; i &lt; size; i++)
-				new GuideLine(elem[i]);
-
-			PreviewControl.init();
-
-			ButtonManager.subscribe('slice-fill',setBorderFill);
-			ButtonManager.subscribe('drag-subject', updateDragOption);
-			ButtonManager.setValue('drag-subject', false);
-
-			DropDownManager.subscribe('image-repeat-X', setBorderRepeat);
-			DropDownManager.subscribe('image-repeat-Y', setBorderRepeat);
-
-			InputSliderManager.subscribe('preview-area-height', setPreviewAreaHeight);
-			InputSliderManager.subscribe('preview-width', setPreviewWidth);
-			InputSliderManager.subscribe('preview-height', setPreviewHeight);
-			InputSliderManager.subscribe('font-size', setPreviewFontSize);
-			InputSliderManager.setValue('preview-width', 300);
-			InputSliderManager.setValue('preview-height', 200);
-		};
-
-		return {
-			init: init,
-			setOutputCSS: setOutputCSS,
-			setBorderSlice: setBorderSlice
-		};
-
-	})();
-
-	/**
-	 * Init Tool
-	 */
-	var init = function init() {
-		InputSliderManager.init();
-		DropDownManager.init();
-		ButtonManager.init();
-		UnitPanel.init();
-		Tool.init();
-		ImageControl.init();
-	};
-
-	return {
-		init : init
-	};
-
-})();
-
-</pre>
-</div>
-
-<div>{{ EmbedLiveSample('Border_Image_Generator', '100%', '1270px') }}</div>
diff --git a/files/ko/web/css/css_background_and_borders/border-radius_generator/index.html b/files/ko/web/css/css_background_and_borders/border-radius_generator/index.html
deleted file mode 100644
index db9310aa83..0000000000
--- a/files/ko/web/css/css_background_and_borders/border-radius_generator/index.html
+++ /dev/null
@@ -1,1601 +0,0 @@
----
-title: Border-radius 생성기
-slug: Web/CSS/CSS_Background_and_Borders/Border-radius_generator
-tags:
-  - CSS
-  - CSS Borders
-  - Tools
-translation_of: Web/CSS/CSS_Background_and_Borders/Border-radius_generator
----
-<p>이 도구를 사용해 CSS3 {{cssxref("border-radius")}} 값을 생성할 수 있습니다.</p>
-
-<div class="hidden">
-<h2 id="border-radius-generator" name="border-radius-generator">border-radius</h2>
-
-<h3 id="HTML_Content">HTML Content</h3>
-
-<pre class="brush: html">&lt;div id="container"&gt;
-    &lt;div class="group section"&gt;
-        &lt;div id="preview" class="col span_12"&gt;
-            &lt;div id="subject"&gt;
-                &lt;div id="top-left" class="radius-container"
-                    data-X="left" data-Y="top"&gt;
-                &lt;/div&gt;
-                &lt;div id="top-right" class="radius-container"
-                    data-X="right" data-Y="top"&gt;
-                &lt;/div&gt;
-                &lt;div id="bottom-right" class="radius-container"
-                    data-X="right" data-Y="bottom"&gt;
-                &lt;/div&gt;
-                &lt;div id="bottom-left" class="radius-container"
-                    data-X="left" data-Y="bottom"&gt;
-                &lt;/div&gt;
-
-                &lt;div id="radius-ui-sliders"&gt;
-                    &lt;div id="tlr" class="ui-input-slider" data-topic="top-left"
-                         data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
-
-                    &lt;div id="tlw" class="ui-input-slider" data-topic="top-left-w"
-                         data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
-
-                    &lt;div id="tlh" class="ui-input-slider" data-topic="top-left-h"
-                        data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
-
-                    &lt;div id="trr" class="ui-input-slider" data-topic="top-right"
-                         data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
-
-                    &lt;div id="trw" class="ui-input-slider" data-topic="top-right-w"
-                         data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
-
-                    &lt;div id="trh" class="ui-input-slider" data-topic="top-right-h"
-                        data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
-
-                    &lt;div id="brr" class="ui-input-slider" data-topic="bottom-right"
-                         data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
-
-                    &lt;div id="brw" class="ui-input-slider" data-topic="bottom-right-w"
-                         data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
-
-                    &lt;div id="brh" class="ui-input-slider" data-topic="bottom-right-h"
-                        data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
-
-                    &lt;div id="blr" class="ui-input-slider" data-topic="bottom-left"
-                         data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
-
-                    &lt;div id="blw" class="ui-input-slider" data-topic="bottom-left-w"
-                         data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
-
-                    &lt;div id="blh" class="ui-input-slider" data-topic="bottom-left-h"
-                        data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
-                &lt;/div&gt;
-            &lt;/div&gt;
-        &lt;/div&gt;
-    &lt;/div&gt;
-    &lt;div id="controls" class="group section"&gt;
-
-        &lt;div class="group section"&gt;
-            &lt;div id="dimensions"&gt;
-                &lt;div class="ui-input-slider" data-topic="width" data-info="width"
-                     data-unit=" px" data-min="150" data-max="700" data-sensivity="1"&gt;&lt;/div&gt;
-
-                &lt;div class="ui-input-slider" data-topic="height" data-info="height"
-                    data-unit=" px" data-min="75" data-max="350" data-sensivity="1"&gt;&lt;/div&gt;
-            &lt;/div&gt;
-
-            &lt;div id="output"&gt;&lt;/div&gt;
-        &lt;/div&gt;
-
-        &lt;div class="group section"&gt;
-            &lt;div id="radius-lock"&gt;
-                &lt;div class="info"&gt; rounded corner &lt;/div&gt;
-                &lt;div class="ui-checkbox" data-topic='top-left'&gt;&lt;/div&gt;
-                &lt;div class="ui-checkbox" data-topic='top-right'&gt;&lt;/div&gt;
-                &lt;div class="ui-checkbox" data-topic='bottom-right'&gt;&lt;/div&gt;
-                &lt;div class="ui-checkbox" data-topic='bottom-left'&gt;&lt;/div&gt;
-            &lt;/div&gt;
-
-            &lt;div id="unit-selection"&gt;
-                &lt;div class="info"&gt; select border units &lt;/div&gt;
-            &lt;/div&gt;
-        &lt;/div&gt;
-
-    &lt;/div&gt;
-&lt;/div&gt;
-</pre>
-
-<h3 id="CSS_Content">CSS Content</h3>
-
-<pre class="brush: css">/*  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 &gt; 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 &gt; input {
- 	display: none;
-}
-
-.ui-checkbox &gt; 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 &gt; label:hover {
-	cursor: pointer;
-}
-
-.ui-checkbox &gt; 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 &gt; 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;
-}
-
-
-</pre>
-
-<h3 id="JavaScript_Content">JavaScript Content</h3>
-
-<pre class="brush: js"><code class="language-js">'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 &gt; 0 ? max : 100;
-		this.step = step === 0 ? 1 : step;
-		this.topic = topic;
-		this.node = node;
-		this.unit = unit;
-		this.sensivity = sensivity &gt; 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 &gt; slider.max) value = slider.max;
-		if (value &lt; slider.min)	value = slider.min;
-
-		slider.value = value;
-		slider.node.setAttribute('data-value', value);
-
-		if (send_notify !== undefined &amp;&amp; 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 &lt; 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 &lt; 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 &lt; 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' &amp;&amp; y == 'top') handle.className = 'handle handle-top-left'
-		if (x === 'right' &amp;&amp; y == 'top') handle.className = 'handle handle-top-right';
-		if (x === 'right' &amp;&amp; y == 'bottom') handle.className = 'handle handle-bottom-right';
-		if (x === 'left' &amp;&amp; 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 &amp;&amp; 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 &lt; 0)	this.size = 0;
-			if (this.size &gt; this.maxR)	this.size = this.maxR;
-			this.updateRadius();
-			this.updateBorderRadius();
-			return;
-		}
-
-		if (deltaX) {
-			this.width += this.resizeX * deltaX;
-			if (this.width &lt; 0)	this.width = 0;
-			if (this.width &gt; this.maxW)	this.width = this.maxW;
-			this.updateWidth();
-		}
-
-		if (deltaY) {
-			this.height += this.resizeY * deltaY;
-			if (this.height &lt; 0) this.height = 0;
-			if (this.height &gt; 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 &lt; 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 &lt; 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 &lt; 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
-	}
-
-})();
-
-
-</code></pre>
-</div>
-
-<div>{{ EmbedLiveSample('border-radius-generator', 700, 900) }}</div>
diff --git a/files/ko/web/css/css_background_and_borders/box-shadow_generator/index.html b/files/ko/web/css/css_background_and_borders/box-shadow_generator/index.html
deleted file mode 100644
index 63a6166cd1..0000000000
--- a/files/ko/web/css/css_background_and_borders/box-shadow_generator/index.html
+++ /dev/null
@@ -1,2881 +0,0 @@
----
-title: Box-shadow 생성기
-slug: Web/CSS/CSS_Background_and_Borders/Box-shadow_generator
-tags:
-  - CSS
-  - Tools
-translation_of: Web/CSS/CSS_Background_and_Borders/Box-shadow_generator
----
-<p>이 도구를 사용해 CSS {{cssxref("box-shadow")}} 효과를 생성할 수 있습니다.</p>
-
-<div class="hidden">
-<h2 id="box-shadow_generator" name="box-shadow_generator">box-shadow generator</h2>
-
-<h3 id="HTML_Content">HTML Content</h3>
-
-<pre class="brush: html">&lt;div id="container"&gt;
-    &lt;div class="group section"&gt;
-        &lt;div id="layer_manager"&gt;
-            &lt;div class="group section"&gt;
-                &lt;div class="button" data-type="add"&gt; &lt;/div&gt;
-                &lt;div class="button" data-type="move-up"&gt; &lt;/div&gt;
-                &lt;div class="button" data-type="move-down"&gt; &lt;/div&gt;
-            &lt;/div&gt;
-            &lt;div id="stack_container"&gt;&lt;/div&gt;
-        &lt;/div&gt;
-
-        &lt;div id="preview_zone"&gt;
-            &lt;div id="layer_menu" class="col span_12"&gt;
-                &lt;div class="button" id="element" data-type="subject" data-title="element"&gt; element &lt;/div&gt;
-                &lt;div class="button" id="before" data-type="subject" data-title=":before"&gt;
-                    :before
-                    &lt;span class="delete" data-type="disable"&gt;&lt;/span&gt;
-                &lt;/div&gt;
-                &lt;div class="button" id="after" data-type="subject" data-title=":after"&gt;
-                    :after
-                    &lt;span class="delete" data-type="disable"&gt;&lt;/span&gt;
-                &lt;/div&gt;
-                &lt;div class="ui-checkbox" data-topic='before' data-label=":before"&gt;&lt;/div&gt;
-                &lt;div class="ui-checkbox" data-topic='after' data-label=":after"&gt;&lt;/div&gt;
-            &lt;/div&gt;
-
-            &lt;div id="preview"&gt;
-                &lt;div id="obj-element"&gt;
-                    &lt;div class="content"&gt; &lt;/div&gt;
-                    &lt;div id="obj-before"&gt; &lt;/div&gt;
-                    &lt;div id="obj-after"&gt; &lt;/div&gt;
-                &lt;/div&gt;
-            &lt;/div&gt;
-        &lt;/div&gt;
-    &lt;/div&gt;
-
-    &lt;div id="controls" class="group section"&gt;
-        &lt;div class="wrap-left"&gt;
-            &lt;div class="colorpicker category"&gt;
-                &lt;div class="title"&gt; &lt;/div&gt;
-                &lt;div id="colorpicker" class="group"&gt;
-                    &lt;div id="gradient" class="gradient"&gt;
-                        &lt;div id="gradient_picker"&gt; &lt;/div&gt;
-                    &lt;/div&gt;
-                    &lt;div id="hue" data-topic="hue" class="hue"&gt;
-                        &lt;div id="hue_selector"&gt; &lt;/div&gt;
-                    &lt;/div&gt;
-                    &lt;div class="info"&gt;
-                        &lt;div class="input" data-topic="hue" data-title='H:' data-action="HSV"&gt;&lt;/div&gt;
-                        &lt;div class="input" data-topic="saturation" data-title='S:' data-action="HSV"&gt;&lt;/div&gt;
-                        &lt;div class="input" data-topic="value" data-title='V:' data-action="HSV"&gt;&lt;/div&gt;
-                    &lt;/div&gt;
-                    &lt;div class="alpha"&gt;
-                        &lt;div id="alpha" data-topic="alpha"&gt;
-                            &lt;div id="alpha_selector"&gt; &lt;/div&gt;
-                        &lt;/div&gt;
-                    &lt;/div&gt;
-                    &lt;div class="info"&gt;
-                        &lt;div class="input" data-topic="r" data-title='R:' data-action="RGB"&gt;&lt;/div&gt;
-                        &lt;div class="input" data-topic="g" data-title='G:' data-action="RGB"&gt;&lt;/div&gt;
-                        &lt;div class="input" data-topic="b" data-title='B:' data-action="RGB"&gt;&lt;/div&gt;
-                    &lt;/div&gt;
-                    &lt;div class="preview block"&gt;
-                        &lt;div id="output_color"&gt; &lt;/div&gt;
-                    &lt;/div&gt;
-                    &lt;div class="block info"&gt;
-                        &lt;div class="input" data-topic="a" data-title='alpha:' data-action="alpha"&gt;&lt;/div&gt;
-                        &lt;div class="input" data-topic="hexa" data-title='' data-action="hexa"&gt;&lt;/div&gt;
-                    &lt;/div&gt;
-                &lt;/div&gt;
-            &lt;/div&gt;
-        &lt;/div&gt;
-
-        &lt;div class="wrap-right"&gt;
-
-            &lt;div id="shadow_properties" class="category"&gt;
-                &lt;div class="title"&gt; Shadow properties &lt;/div&gt;
-                &lt;div class="group"&gt;
-                    &lt;div class="group property"&gt;
-                        &lt;div class="ui-slider-name"&gt; inset &lt;/div&gt;
-                        &lt;div class="ui-checkbox" data-topic='inset'&gt;&lt;/div&gt;
-                    &lt;/div&gt;
-                    &lt;div class="slidergroup"&gt;
-                        &lt;div class="ui-slider-name"&gt; Position x &lt;/div&gt;
-                        &lt;div class="ui-slider-btn-set" data-topic="posX" data-type="sub"&gt;&lt;/div&gt;
-                        &lt;div class="ui-slider" data-topic="posX"
-                            data-min="-500" data-max="500" data-step="1"&gt; &lt;/div&gt;
-                        &lt;div class="ui-slider-btn-set" data-topic="posX" data-type="add"&gt;&lt;/div&gt;
-                        &lt;div class="ui-slider-input" data-topic="posX" data-unit="px"&gt;&lt;/div&gt;
-                    &lt;/div&gt;
-                    &lt;div class="slidergroup"&gt;
-                        &lt;div class="ui-slider-name"&gt; Position y &lt;/div&gt;
-                        &lt;div class="ui-slider-btn-set" data-topic="posY" data-type="sub"&gt;&lt;/div&gt;
-                        &lt;div class="ui-slider" data-topic="posY"
-                            data-min="-500" data-max="500" data-step="1"&gt; &lt;/div&gt;
-                        &lt;div class="ui-slider-btn-set" data-topic="posY" data-type="add"&gt;&lt;/div&gt;
-                        &lt;div class="ui-slider-input" data-topic="posY" data-unit="px"&gt;&lt;/div&gt;
-                    &lt;/div&gt;
-                    &lt;div class="slidergroup"&gt;
-                        &lt;div class="ui-slider-name"&gt; Blur &lt;/div&gt;
-                        &lt;div class="ui-slider-btn-set" data-topic="blur" data-type="sub"&gt;&lt;/div&gt;
-                        &lt;div class="ui-slider" data-topic="blur"
-                            data-min="0" data-max="200" data-step="1"&gt; &lt;/div&gt;
-                        &lt;div class="ui-slider-btn-set" data-topic="blur" data-type="add"&gt;&lt;/div&gt;
-                        &lt;div class="ui-slider-input" data-topic="blur" data-unit="px"&gt;&lt;/div&gt;
-                    &lt;/div&gt;
-                    &lt;div class="slidergroup"&gt;
-                        &lt;div class="ui-slider-name"&gt; Spread &lt;/div&gt;
-                        &lt;div class="ui-slider-btn-set" data-topic="spread" data-type="sub"&gt;&lt;/div&gt;
-                        &lt;div class="ui-slider" data-topic="spread"
-                            data-min="-100"    data-max="100" data-step="1" data-value="50"&gt;
-                        &lt;/div&gt;
-                        &lt;div class="ui-slider-btn-set" data-topic="spread" data-type="add"&gt;&lt;/div&gt;
-                        &lt;div class="ui-slider-input" data-topic="spread" data-unit="px"&gt;&lt;/div&gt;
-                    &lt;/div&gt;
-                &lt;/div&gt;
-            &lt;/div&gt;
-
-            &lt;div id="element_properties" class="category"&gt;
-                &lt;div class="title"&gt; Class element properties &lt;/div&gt;
-                &lt;div class="group"&gt;
-                    &lt;div class="group property"&gt;
-                        &lt;div class="ui-slider-name"&gt; border &lt;/div&gt;
-                        &lt;div class="ui-checkbox" data-topic='border-state' data-state="true"&gt;&lt;/div&gt;
-                    &lt;/div&gt;
-                    &lt;div id="z-index" class="slidergroup"&gt;
-                        &lt;div class="ui-slider-name"&gt; z-index &lt;/div&gt;
-                        &lt;div class="ui-slider-btn-set" data-topic="z-index" data-type="sub"&gt;&lt;/div&gt;
-                        &lt;div class="ui-slider" data-topic="z-index"
-                            data-min="-10" data-max="10" data-step="1"&gt;&lt;/div&gt;
-                        &lt;div class="ui-slider-btn-set" data-topic="z-index" data-type="add"&gt;&lt;/div&gt;
-                        &lt;div class="ui-slider-input" data-topic="z-index"&gt;&lt;/div&gt;
-                    &lt;/div&gt;
-                    &lt;div class="slidergroup"&gt;
-                        &lt;div class="ui-slider-name"&gt; top &lt;/div&gt;
-                        &lt;div class="ui-slider-btn-set" data-topic="top" data-type="sub"&gt;&lt;/div&gt;
-                        &lt;div class="ui-slider" data-topic="top"
-                            data-min="-500" data-max="500" data-step="1"&gt; &lt;/div&gt;
-                        &lt;div class="ui-slider-btn-set" data-topic="top" data-type="add"&gt;&lt;/div&gt;
-                        &lt;div class="ui-slider-input" data-topic="top" data-unit="px"&gt;&lt;/div&gt;
-                    &lt;/div&gt;
-                    &lt;div class="slidergroup"&gt;
-                        &lt;div class="ui-slider-name"&gt; left &lt;/div&gt;
-                        &lt;div class="ui-slider-btn-set" data-topic="left" data-type="sub"&gt;&lt;/div&gt;
-                        &lt;div class="ui-slider" data-topic="left"
-                            data-min="-300" data-max="700" data-step="1"&gt; &lt;/div&gt;
-                        &lt;div class="ui-slider-btn-set" data-topic="left" data-type="add"&gt;&lt;/div&gt;
-                        &lt;div class="ui-slider-input" data-topic="left" data-unit="px"&gt;&lt;/div&gt;
-                    &lt;/div&gt;
-                    &lt;div id="transform_rotate" class="slidergroup"&gt;
-                        &lt;div class="ui-slider-name"&gt; Rotate &lt;/div&gt;
-                        &lt;div class="ui-slider-btn-set" data-topic="rotate" data-type="sub"&gt;&lt;/div&gt;
-                        &lt;div class="ui-slider" data-topic="rotate"
-                            data-min="-360" data-max="360" data-step="1" data-value="0"&gt;
-                        &lt;/div&gt;
-                        &lt;div class="ui-slider-btn-set" data-topic="rotate" data-type="add"&gt;&lt;/div&gt;
-                        &lt;div class="ui-slider-input" data-topic="rotate" data-unit="deg"&gt;&lt;/div&gt;
-                    &lt;/div&gt;
-                    &lt;div class="slidergroup"&gt;
-                        &lt;div class="ui-slider-name"&gt; Width &lt;/div&gt;
-                        &lt;div class="ui-slider-btn-set" data-topic="width" data-type="sub"&gt;&lt;/div&gt;
-                        &lt;div class="ui-slider" data-topic="width"
-                            data-min="0" data-max="1000" data-step="1" data-value="200"&gt;
-                        &lt;/div&gt;
-                        &lt;div class="ui-slider-btn-set" data-topic="width" data-type="add"&gt;&lt;/div&gt;
-                        &lt;div class="ui-slider-input" data-topic="width"  data-unit="px"&gt;&lt;/div&gt;
-                    &lt;/div&gt;
-                    &lt;div class="slidergroup"&gt;
-                        &lt;div class="ui-slider-name"&gt; Height &lt;/div&gt;
-                        &lt;div class="ui-slider-btn-set" data-topic="height" data-type="sub"&gt;&lt;/div&gt;
-                        &lt;div class="ui-slider" data-topic="height"
-                            data-min="0" data-max="400" data-step="1" data-value="200"&gt;
-                        &lt;/div&gt;
-                        &lt;div class="ui-slider-btn-set" data-topic="height" data-type="add"&gt;&lt;/div&gt;
-                        &lt;div class="ui-slider-input" data-topic="height" data-unit="px"&gt;&lt;/div&gt;
-                    &lt;/div&gt;
-                &lt;/div&gt;
-            &lt;/div&gt;
-
-            &lt;div id="output" class="category"&gt;
-                &lt;div id="menu" class="menu"&gt;&lt;/div&gt;
-                &lt;div class="title"&gt;    CSS Code &lt;/div&gt;
-                &lt;div class="group" style="border-top-left-radius: 0;"&gt;
-                    &lt;div class="output" data-topic="element" data-name="element"
-                        data-prop="width height background-color position=[relative] box-shadow"&gt;
-                    &lt;/div&gt;
-                    &lt;div class="output" data-topic="before" data-name="element:before"
-                        data-prop="content=[&amp;quot;&amp;quot;] position=[absolute] width height top left z-index background-color box-shadow transform -webkit-transform -ms-transform"&gt;
-                    &lt;/div&gt;
-                    &lt;div class="output" data-topic="after" data-name="element:after"
-                        data-prop="content=[&amp;quot;&amp;quot;] position=[absolute] width height top left z-index background-color box-shadow transform -webkit-transform -ms-transform"&gt;
-                    &lt;/div&gt;
-                &lt;/div&gt;
-            &lt;/div&gt;
-        &lt;/div&gt;
-    &lt;/div&gt;
-&lt;/div&gt;
-</pre>
-
-<h3 id="CSS_Content">CSS Content</h3>
-
-<pre class="brush: css">/*  GRID OF TWELVE
- * ========================================================================== */
-
-.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 Slider
- */
-
-.slidergroup {
-	height: 20px;
-	margin: 10px 0;
-	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
-	-moz-user-select: none;
-	user-select: none;
-}
-
-.slidergroup * {
-	float: left;
-	height: 100%;
-	line-height: 100%;
-}
-
-/* Slider */
-
-.ui-slider {
-	height: 10px;
-	width: 200px;
-	margin: 4px 10px;
-	display: block;
-	border: 1px solid #999;
-	border-radius: 3px;
-	background: #EEE;
-}
-
-.ui-slider:hover {
-	cursor: pointer;
-}
-
-.ui-slider-name {
-	width: 90px;
-	padding: 0 10px 0 0;
-	text-align: right;
-	text-transform: lowercase;
-}
-
-.ui-slider-pointer {
-	width: 13px;
-	height: 13px;
-	background-color: #EEE;
-	border: 1px solid #2C9FC9;
-	border-radius: 3px;
-	position: relative;
-	top: -3px;
-	left: 0%;
-}
-
-.ui-slider-btn-set {
-	width: 25px;
-	background-color: #2C9FC9;
-	border-radius: 3px;
-	color: #FFF;
-	font-weight: bold;
-	text-align: center;
-}
-
-.ui-slider-btn-set:hover {
-	background-color: #379B4A;
-	cursor: pointer;
-}
-
-.ui-slider-input &gt; input {
-	margin: 0 10px;
-	padding: 0;
-	width: 50px;
-	text-align: center;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-}
-
-/*
- * UI Button
- */
-
-/* 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 &gt; input {
- 	display: none;
-}
-
-.ui-checkbox &gt; 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 &gt; label:hover {
-	cursor: pointer;
-}
-
-.ui-checkbox &gt; input:checked + label {
-	background-image: url("https://mdn.mozillademos.org/files/5681/checked.png");
-	background-color: #379B4A;
-}
-
-/*
- * BOX SHADOW GENERATOR TOOL
- */
-
-body {
-	max-width: 1000px;
-	height: 800px;
-	margin: 20px auto 0;
-
-	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;
-}
-
-#container {
-	width: 100%;
-	padding: 2px;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-}
-
-
-/* container with shadows stacks */
-#stack_container {
-	height: 400px;
-	overflow: hidden;
-	position: relative;
-	border: 1px solid #CCC;
-	border-radius: 3px;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-}
-
-#stack_container .container {
-	height: 100%;
-	width: 100%;
-	position: absolute;
-	left: 100%;
-	transition-property: left;
-	transition-duration: 0.5s;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-}
-
-
-#stack_container .title {
-	text-align: center;
-	font-weight: bold;
-	line-height: 2em;
-	border-bottom: 1px solid #43A6E1;
-	color: #666;
-}
-
-
-/*
- * Stack of Layers for shadow
- */
-
-#layer_manager {
-	width: 17%;
-	background-color: #FEFEFE;
-	margin: 0 1% 0 0;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-	float: left;
-}
-
-
-#layer_manager .button {
-	width: 30%;
-	height: 25px;
-	margin:0 0 10px;
-	color: #333;
-	background-color: #EEE;
-	text-align: center;
-	font-size: 0.75em;
-	line-height: 1.5em;
-	border: 1px solid #CCC;
-	border-radius: 3px;
-
-	display: block;
-	background-position: center center;
-	background-repeat: no-repeat;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-	float: left;
-}
-
-#layer_manager .button:hover {
-	background-color: #3380C4;
-	border: 1px solid #3380C4;
-	cursor: pointer;
-}
-
-#layer_manager [data-type='add'] {
-	background-image: url("https://mdn.mozillademos.org/files/5685/add-black.png");
-}
-
-#layer_manager [data-type='add']:hover {
-	background-image: url("https://mdn.mozillademos.org/files/5687/add-white.png");
-}
-
-#layer_manager [data-type='move-up'] {
-	background-image: url("https://mdn.mozillademos.org/files/5697/up-black.png");
-	margin-left: 5%;
-	margin-right: 5%;
-}
-
-#layer_manager [data-type='move-up']:hover {
-	background-image: url("https://mdn.mozillademos.org/files/5709/up-white.png");
-}
-
-#layer_manager [data-type='move-down'] {
-	background-image: url("https://mdn.mozillademos.org/files/5693/down-black.png");
-}
-
-#layer_manager [data-type='move-down']:hover {
-	background-image: url("https://mdn.mozillademos.org/files/5695/down-white.png");
-}
-
-/* shadows classes */
-
-#layer_manager .node {
-	width: 100%;
-	margin: 5px 0;
-	padding: 5px;
-	text-align: center;
-	background-color: #EEE;
-	border: 1px solid #DDD;
-	font-size: 0.75em;
-	line-height: 1.5em;
-	color: #333;
-	border-radius: 3px;
-
-	position: relative;
-	display: block;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-}
-
-#layer_manager .node:hover {
-	color: #FFF;
-	background-color: #3380C4;
-	cursor: pointer;
-}
-
-/* active element styling */
-
-#layer_manager [data-active='layer'] {
-	color: #FFF;
-	border: none;
-	background-color: #379B4A;
-}
-
-#layer_manager [data-active='subject'] {
-	color: #FFF;
-	background-color: #467FC9;
-}
-
-/* delete button */
-
-#layer_manager .delete {
-	width: 1.5em;
-	height: 100%;
-	float: right;
-	border-radius: 3px;
-	background-image: url("https://mdn.mozillademos.org/files/5689/delete-white.png");
-	background-position: center center;
-	background-repeat: no-repeat;
-	position: absolute;
-	top: 0;
-	right: 10px;
-	display: none;
-}
-
-#layer_manager .delete:hover {
-	background-image: url("https://mdn.mozillademos.org/files/5691/delete-yellow.png");
-}
-
-#layer_manager .node:hover .delete {
-	display: block;
-}
-
-
-#layer_manager .stack {
-	padding: 0 5px;
-	max-height: 90%;
-	overflow: auto;
-	overflow-x: hidden;
-}
-
-
-/*
- * Layer Menu
- */
-
-#layer_menu {
-	margin: 0 0 10px 0;
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-}
-
-#layer_menu .button {
-	width: 100px;
-	margin: 0 5px 0 0;
-	padding: 2.5px;
-	color: #333;
-	background-color: #EEE;
-	border: 1px solid #CCC;
-	border-radius: 3px;
-	text-align: center;
-	font-size: 0.75em;
-	line-height: 1.5em;
-
-	position: relative;
-	display: block;
-	float: left;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-}
-
-#layer_menu .button:hover {
-	color: #FFF;
-	background-color: #3380C4;
-	border: 1px solid #3380C4;
-	cursor: pointer;
-}
-
-#layer_menu .delete {
-	width: 1.5em;
-	height: 100%;
-	float: right;
-	border-radius: 3px;
-	background-image: url("https://mdn.mozillademos.org/files/5689/delete-white.png");
-	background-position: center center;
-	background-repeat: no-repeat;
-	position: absolute;
-	top: 0;
-	right: 5px;
-	display: none;
-}
-
-#layer_menu .delete:hover {
-	background-image: url("https://mdn.mozillademos.org/files/5691/delete-yellow.png");
-}
-
-#layer_menu .button:hover .delete {
-	display: block;
-}
-
-
-/*
- * active element styling
- */
-
-#layer_menu [data-active='subject'] {
-	color: #FFF;
-	background-color: #379B4A;
-	border: 1px solid #379B4A;
-}
-
-
-/* Checkbox */
-
-#layer_menu .ui-checkbox &gt; label {
-	height: 15px;
-	line-height: 17px;
-	font-weight: normal;
-	width: 46px;
-	margin: 0 5px 0 0;
-}
-
-#layer_menu .ui-checkbox &gt; input:checked + label {
-	display: none;
-}
-
-
-/******************************************************************************/
-/******************************************************************************/
-/*
- * Preview Area
- */
-
-#preview_zone {
-	width: 82%;
-	float: left;
-
-}
-
-
-#preview {
-	width: 100%;
-	height: 400px;
-	border: 1px solid #CCC;
-	border-radius: 3px;
-	text-align: center;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-	cursor: move;
-	float: left;
-}
-
-#preview .content {
-	width: 100%;
-	height: 100%;
-	display: block;
-}
-
-#obj-element {
-	width: 300px;
-	height: 100px;
-	border: 1px solid #CCC;
-	background: #FFF;
-	position: relative;
-}
-
-
-#obj-before {
-	height: 100%;
-	width: 100%;
-	background: #999;
-	border: 1px solid #CCC;
-	text-align: left;
-	display : block;
-	position: absolute;
-	z-index: -1;
-}
-
-#obj-after {
-	height: 100%;
-	width: 100%;
-	background: #DDD;
-	border: 1px solid #CCC;
-	text-align: right;
-	display : block;
-	position: absolute;
-	z-index: -1;
-}
-
-
-/******************************************************************************/
-/******************************************************************************/
-
-/**
- * Controls
- */
-
-.wrap-left {
-	float: left;
-	overflow: hidden;
-}
-
-.wrap-right {
-	float: right;
-	overflow: hidden;
-}
-
-.wrap-left &gt; * {
-	float: left;
-}
-
-.wrap-right &gt; * {
-	float: right;
-}
-
-@media (min-width: 960px) {
-
-	.wrap-left {
-		width: 45%;
-	}
-
-	.wrap-right {
-		width: 55%;
-	}
-}
-
-
-@media (max-width: 959px) {
-
-	.wrap-left {
-		width: 30%;
-	}
-
-	.wrap-right {
-		width: 70%;
-	}
-}
-
-
-#controls {
-	color: #444;
-	margin: 10px 0 0 0;
-}
-
-
-#controls .category {
-	width: 500px;
-	margin: 0 auto 20px;
-	padding: 0;
-
-}
-
-#controls .category .title {
-	width: 100%;
-	height: 1.5em;
-	line-height: 1.5em;
-	color: #AAA;
-	text-align: right;
-}
-
-#controls .category &gt; .group {
-	border: 1px solid #CCC;
-	border-radius: 3px;
-}
-
-
-/**
- * 	Color Picker
- */
-
-@media (min-width: 960px) {
-	#controls .colorpicker {
-		width: 420px;
-	}
-}
-
-@media (max-width: 959px) {
-	#controls .colorpicker {
-		width: 210px;
-	}
-}
-
-#colorpicker {
-	width: 100%;
-	margin: 0 auto;
-}
-
-#colorpicker .gradient {
-	width: 200px;
-	height: 200px;
-	margin: 5px;
-	background: url("https://mdn.mozillademos.org/files/5707/picker_mask_200.png");
-	background: -moz-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
-				-moz-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
-	background: -webkit-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
-				-webkit-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
-	background-color: #F00;
-	float: left;
-}
-
-#colorpicker .hue {
-	width: 200px;
-	height: 30px;
-	margin: 5px;
-	background: url("https://mdn.mozillademos.org/files/5701/hue.png");
-	background: -moz-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
-				#00F 66.66%, #F0F 83.33%, #F00 100%);
-	background: -webkit-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
-				#00F 66.66%, #F0F 83.33%, #F00 100%);
-	float: left;
-}
-
-#colorpicker .alpha {
-	width: 200px;
-	height: 30px;
-	margin: 5px;
-	border: 1px solid #CCC;
-	float: left;
-	background: url("https://mdn.mozillademos.org/files/5705/alpha.png");
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-}
-
-#colorpicker #alpha {
-	width: 100%;
-	height: 100%;
-	background: url("https://mdn.mozillademos.org/files/5703/alpha_mask.png");
-	background: -moz-linear-gradient(left, rgba(255, 0, 0, 0) 0%, rgba(255, 0, 0, 1) 100%);
-}
-
-#colorpicker #gradient_picker {
-	width: 0.5em;
-	height: 0.5em;
-	border-radius: 0.4em;
-	border: 2px solid #CCC;
-	position: relative;
-	top: 20%;
-	left: 20%;
-}
-
-#colorpicker #hue_selector,
-#colorpicker #alpha_selector {
-	width: 3px;
-	height: 100%;
-	border: 1px solid #777;
-	background-color: #FFF;
-	position: relative;
-	top: -1px;
-	left: 0%;
-}
-
-/* input HSV and RGB */
-#colorpicker .info {
-	width: 200px;
-	margin: 5px;
-	float: left;
-}
-
-#colorpicker .info * {
-	float: left;
-}
-
-#colorpicker .info input {
-	margin: 0;
-	text-align: center;
-	width: 30px;
-	-moz-user-select: text;
-	-webkit-user-select: text;
-	-ms-user-select: text;
-}
-
-#colorpicker .info span {
-	height: 20px;
-	width: 30px;
-	text-align: center;
-	line-height: 20px;
-	display: block;
-}
-
-/* Preview color */
-#colorpicker .block {
-	width: 95px;
-	height: 54px;
-	float: left;
-	position: relative;
-}
-
-#colorpicker .preview {
-	margin: 5px;
-	border: 1px solid #CCC;
-	background-image: url("https://mdn.mozillademos.org/files/5705/alpha.png");
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-}
-
-#colorpicker .preview:before {
-	height: 100%;
-	width: 50%;
-	left: 50%;
-	content: "";
-	background: #FFF;
-	position: absolute;
-	z-index: 1;
-}
-
-#colorpicker .preview &gt; * {
-	width: 50%;
-	height: 100%;
-}
-
-#colorpicker #output_color {
-	width: 100%;
-	height: 100%;
-	position: absolute;
-	z-index: 2;
-}
-
-#colorpicker .block .input {
-	float: right;
-}
-
-#colorpicker [data-topic="a"] &gt; span {
-	width: 50px;
-}
-
-#colorpicker [data-topic="hexa"] {
-	float: right;
-	margin: 10px 0 0 0;
-}
-
-#colorpicker [data-topic="hexa"] &gt; span {
-	display: none;
-}
-
-#colorpicker [data-topic="hexa"] &gt; input {
-	width: 85px;
-	padding: 2px 0;
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-}
-
-
-/*
- * UI Components
- */
-
-/* Property */
-
-.property {
-	height: 20px;
-	margin: 10px 0;
-}
-
-.property * {
-	float: left;
-	height: 100%;
-	line-height: 100%;
-}
-
-/* Slider */
-
-#controls .ui-slider-name {
-	margin: 0 10px 0 0;
-}
-
-/*
- * Output code styling
- */
-
-#output {
-	position: relative;
-}
-
-#output .menu {
-	max-width: 70%;
-	height: 20px;
-	position: absolute;
-	top: 2px;
-}
-
-#output .button {
-	width: 90px;
-	height: 22px;
-	margin: 0 5px 0 0;
-	text-align: center;
-	line-height: 20px;
-	font-size: 14px;
-	color: #FFF;
-	background-color: #999;
-	border-top-left-radius: 3px;
-	border-top-right-radius: 3px;
-	bottom: -5px;
-	float:left;
-}
-
-#output .button:hover {
-	color: #FFF;
-	background-color: #666;
-	cursor: pointer;
-}
-
-#output .menu [data-active="true"] {
-	color: #777;
-	background-color: #FFF;
-	border: 1px solid #CCC;
-	border-bottom: none;
-}
-
-#output .menu [data-topic="before"] {
-	left: 100px;
-}
-
-#output .menu [data-topic="after"] {
-	left: 200px;
-}
-
-#output .output {
-	width: 480px;
-	margin: 10px;
-	padding: 10px;
-	overflow: hidden;
-	color: #555;
-	font-size: 14px;
-	border: 1px dashed #CCC;
-	border-radius: 3px;
-	display: none;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-
-	-moz-user-select: text;
-	-webkit-user-select: text;
-	-ms-user-select: text;
-}
-
-#output .css-property {
-	width: 100%;
-	float: left;
-	white-space: pre;
-}
-
-#output .name {
-	width: 35%;
-	float: left;
-}
-
-#output .value {
-	width: 65%;
-	float: left;
-}
-
-</pre>
-
-<h3 id="JavaScript_Content">JavaScript Content</h3>
-
-<pre class="brush: js"><code class="language-js">
-
-'use strict';
-
-/**
- * UI-SlidersManager
- */
-
-var SliderManager = (function SliderManager() {
-
-	var subscribers = {};
-	var sliders = [];
-
-	var Slider = 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 snap = node.getAttribute('data-snap');
-		var topic = node.getAttribute('data-topic');
-
-		this.min = min;
-		this.max = max &gt; 0 ? max : 100;
-		this.step = step === 0 ? 1 : step;
-		this.value = value &lt;= max &amp;&amp; value &gt;= min ? value : (min + max) / 2 | 0;
-		this.snap = snap === "true" ? true : false;
-		this.topic = topic;
-		this.node = node;
-
-		var pointer = document.createElement('div');
-		pointer.className = 'ui-slider-pointer';
-		node.appendChild(pointer);
-		this.pointer = pointer;
-
-		setMouseTracking(node, updateSlider.bind(this));
-
-		sliders[topic] = this;
-		setValue(topic, this.value);
-	}
-
-	var setButtonComponent = function setButtonComponent(node) {
-		var type = node.getAttribute('data-type');
-		var topic = node.getAttribute('data-topic');
-		if (type === "sub") {
-			node.textContent = '-';
-			node.addEventListener("click", function() {
-				decrement(topic);
-			});
-		}
-		if (type === "add") {
-			node.textContent = '+';
-			node.addEventListener("click", function() {
-				increment(topic);
-			});
-		}
-	}
-
-	var setInputComponent = function setInputComponent(node) {
-		var topic		= node.getAttribute('data-topic');
-		var unit_type	= node.getAttribute('data-unit');
-
-		var input = document.createElement('input');
-		var unit = document.createElement('span');
-		unit.textContent = unit_type;
-
-		input.setAttribute('type', 'text');
-		node.appendChild(input);
-		node.appendChild(unit);
-
-		input.addEventListener('click', function(e) {
-			this.select();
-		});
-
-		input.addEventListener('change', function(e) {
-			setValue(topic, e.target.value | 0);
-		});
-
-		subscribe(topic, function(value) {
-			node.children[0].value = value;
-		});
-	}
-
-	var increment = function increment(topic) {
-		var slider = sliders[topic];
-		if (slider === null || slider === undefined)
-			return;
-
-		if (slider.value + slider.step &lt;= slider.max) {
-			slider.value += slider.step;
-			setValue(slider.topic, slider.value)
-			notify.call(slider);
-		}
-	};
-
-	var decrement = function decrement(topic) {
-		var slider = sliders[topic];
-		if (slider === null || slider === undefined)
-			return;
-
-		if (slider.value - slider.step &gt;= slider.min) {
-			slider.value -= slider.step;
-			setValue(topic, slider.value)
-			notify.call(slider);
-		}
-	}
-
-	// this = Slider object
-	var updateSlider = function updateSlider(e) {
-		var node = this.node;
-		var pos = e.pageX - node.offsetLeft;
-		var width = node.clientWidth;
-		var delta = this.max - this.min;
-		var offset = this.pointer.clientWidth + 4; // border width * 2
-
-		if (pos &lt; 0) pos = 0;
-		if (pos &gt; width) pos = width;
-
-		var value = pos * delta / width | 0;
-		var precision = value % this.step;
-		value = value - precision + this.min;
-		if (precision &gt; this.step / 2)
-			value = value + this.step;
-
-		if (this.snap)
-			pos =  (value - this.min) * width / delta;
-
-		this.pointer.style.left = pos - offset/2 + "px";
-		this.value = value;
-		node.setAttribute('data-value', value);
-		notify.call(this);
-	}
-
-	var setValue = function setValue(topic, value) {
-		var slider = sliders[topic];
-
-		if (value &gt; slider.max || value &lt; slider.min)
-			return;
-
-		var delta = slider.max - slider.min;
-		var width = slider.node.clientWidth;
-		var offset = slider.pointer.clientWidth;
-		var pos =  (value - slider.min) * width / delta;
-		slider.value = value;
-		slider.pointer.style.left = pos - offset / 2 + "px";
-		slider.node.setAttribute('data-value', value);
-		notify.call(slider);
-	}
-
-	var setMouseTracking = function setMouseTracking(elem, callback) {
-		elem.addEventListener("mousedown", function(e) {
-			callback(e);
-			document.addEventListener("mousemove", callback);
-		});
-
-		document.addEventListener("mouseup", function(e) {
-			document.removeEventListener("mousemove", callback);
-		});
-	}
-
-	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() {
-		if (subscribers[this.topic] === undefined)
-			return;
-
-		for (var i in subscribers[this.topic]) {
-			subscribers[this.topic][i](this.value);
-		}
-	}
-
-	var init = function init() {
-		var elem, size;
-
-		elem = document.querySelectorAll('.ui-slider-btn-set');
-		size = elem.length;
-		for (var i = 0; i &lt; size; i++)
-			setButtonComponent(elem[i]);
-
-		elem = document.querySelectorAll('.ui-slider-input');
-		size = elem.length;
-		for (var i = 0; i &lt; size; i++)
-			setInputComponent(elem[i]);
-
-		elem = document.querySelectorAll('.ui-slider');
-		size = elem.length;
-		for (var i = 0; i &lt; size; i++)
-			new Slider(elem[i]);
-	}
-
-	return {
-		init : init,
-		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;
-			notify.call(buttons[topic]);
-		}
-		catch(error) {
-			console.log(error, topic, value);
-		}
-	}
-
-	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() {
-		if (subscribers[this.topic] === undefined)
-			return;
-		for (var i = 0; i &lt; 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 &lt; size; i++)
-			new CheckBox(elem[i]);
-	}
-
-	return {
-		init : init,
-		setValue : setValue,
-		subscribe : subscribe,
-		unsubscribe : unsubscribe
-	}
-
-})();
-
-
-window.addEventListener("load", function(){
-	BoxShadow.init();
-});
-
-var BoxShadow = (function BoxShadow() {
-
-	function getElemById(id) {
-		return document.getElementById(id);
-	}
-
-	/**
-	 * RGBA Color class
-	 */
-
-	function Color() {
-		this.r = 0;
-		this.g = 0;
-		this.b = 0;
-		this.a = 1;
-		this.hue = 0;
-		this.saturation = 0;
-		this.value = 0;
-	}
-
-	Color.prototype.copy = function copy(obj) {
-		if(obj instanceof Color !== true) {
-			console.log("Typeof instance not Color");
-			return;
-		}
-
-		this.r = obj.r;
-		this.g = obj.g;
-		this.b = obj.b;
-		this.a = obj.a;
-		this.hue = obj.hue;
-		this.saturation = obj.saturation;
-		this.value = obj.value;
-	}
-
-	Color.prototype.setRGBA = function setRGBA(red, green, blue, alpha) {
-		if (red != undefined)
-			this.r = red | 0;
-		if (green != undefined)
-			this.g = green | 0;
-		if (blue != undefined)
-			this.b = blue | 0;
-		if (alpha != undefined)
-			this.a = alpha | 0;
-	}
-
-	/**
-	 * HSV/HSB (hue, saturation, value / brightness)
-	 * @param hue			0-360
-	 * @param saturation	0-100
-	 * @param value 		0-100
-	 */
-	Color.prototype.setHSV = function setHSV(hue, saturation, value) {
-		this.hue = hue;
-		this.saturation = saturation;
-		this.value = value;
-		this.updateRGB();
-	}
-
-	Color.prototype.updateRGB = function updateRGB() {
-		var sat = this.saturation / 100;
-		var value = this.value / 100;
-		var C = sat * value;
-		var H = this.hue / 60;
-		var X = C * (1 - Math.abs(H % 2 - 1));
-		var m = value - C;
-		var precision = 255;
-
-		C = (C + m) * precision;
-		X = (X + m) * precision;
-		m = m * precision;
-
-		if (H &gt;= 0 &amp;&amp; H &lt; 1) {	this.setRGBA(C, X, m);	return; }
-		if (H &gt;= 1 &amp;&amp; H &lt; 2) {	this.setRGBA(X, C, m);	return; }
-		if (H &gt;= 2 &amp;&amp; H &lt; 3) {	this.setRGBA(m, C, X);	return; }
-		if (H &gt;= 3 &amp;&amp; H &lt; 4) {	this.setRGBA(m, X, C);	return; }
-		if (H &gt;= 4 &amp;&amp; H &lt; 5) {	this.setRGBA(X, m, C);	return; }
-		if (H &gt;= 5 &amp;&amp; H &lt; 6) {	this.setRGBA(C, m, X);	return; }
-	}
-
-	Color.prototype.updateHSV = function updateHSV() {
-		var red		= this.r / 255;
-		var green	= this.g / 255;
-		var blue	= this.b / 255;
-
-		var cmax = Math.max(red, green, blue);
-		var cmin = Math.min(red, green, blue);
-		var delta = cmax - cmin;
-		var hue = 0;
-		var saturation = 0;
-
-		if (delta) {
-			if (cmax === red ) { hue = ((green - blue) / delta); }
-			if (cmax === green ) { hue = 2 + (blue - red) / delta; }
-			if (cmax === blue ) { hue = 4 + (red - green) / delta; }
-			if (cmax) saturation = delta / cmax;
-		}
-
-		this.hue = 60 * hue | 0;
-		if (this.hue &lt; 0) this.hue += 360;
-		this.saturation = (saturation * 100) | 0;
-		this.value = (cmax * 100) | 0;
-	}
-
-	Color.prototype.setHexa = function setHexa(value) {
-		var valid  = /(^#{0,1}[0-9A-F]{6}$)|(^#{0,1}[0-9A-F]{3}$)/i.test(value)
-		if (valid !== true)
-			return;
-
-		if (value[0] === '#')
-			value = value.slice(1, value.length);
-
-		if (value.length === 3)
-			value = value.replace(/([0-9A-F])([0-9A-F])([0-9A-F])/i,"$1$1$2$2$3$3");
-
-		this.r = parseInt(value.substr(0, 2), 16);
-		this.g = parseInt(value.substr(2, 2), 16);
-		this.b = parseInt(value.substr(4, 2), 16);
-
-		this.alpha	= 1;
-	}
-
-	Color.prototype.getHexa = function getHexa() {
-		var r = this.r.toString(16);
-		var g = this.g.toString(16);
-		var b = this.b.toString(16);
-		if (this.r &lt; 16) r = '0' + r;
-		if (this.g &lt; 16) g = '0' + g;
-		if (this.b &lt; 16) b = '0' + b;
-		var value = '#' + r + g + b;
-		return value.toUpperCase();
-	}
-
-	Color.prototype.getRGBA = function getRGBA() {
-
-		var rgb = "(" + this.r + ", " + this.g + ", " + this.b;
-		var a = '';
-		var v = '';
-		if (this.a !== 1) {
-			a = 'a';
-			v = ', ' + this.a;
-		}
-
-		var value = "rgb" + a + rgb + v + ")";
-		return value;
-	}
-
-	Color.prototype.getColor = function getColor() {
-		if (this.a | 0 === 1)
-			return this.getHexa();
-		return this.getRGBA();
-	}
-
-	/**
-	 * Shadow Object
-	 */
-	function Shadow() {
-		this.inset  = false;
-		this.posX   = 5;
-		this.posY   = -5;
-		this.blur   = 5;
-		this.spread = 0;
-		this.color  = new Color();
-
-		var hue			= (Math.random() * 360) | 0;
-		var saturation	= (Math.random() * 75) | 0;
-		var value 		= (Math.random() * 50 + 50) | 0;
-		this.color.setHSV(hue, saturation, value, 1);
-	}
-
-	Shadow.prototype.computeCSS = function computeCSS() {
-		var value = "";
-		if (this.inset === true)
-			value += "inset ";
-		value += this.posX + "px ";
-		value += this.posY + "px ";
-		value += this.blur + "px ";
-		value += this.spread + "px ";
-		value += this.color.getColor();
-
-		return value;
-	}
-
-	Shadow.prototype.toggleInset = function toggleInset(value) {
-		if (value !== undefined || typeof value === "boolean")
-			this.inset = value;
-		else
-			this.inset = this.inset === true ? false : true;
-	}
-
-	Shadow.prototype.copy = function copy(obj) {
-		if(obj instanceof Shadow !== true) {
-			console.log("Typeof instance not Shadow");
-			return;
-		}
-
-		this.inset  = obj.inset;
-		this.posX   = obj.posX;
-		this.posY   = obj.posY;
-		this.blur   = obj.blur;
-		this.spread = obj.spread;
-		this.color.copy(obj.color);
-	}
-
-	/**
-	 * Color Picker
-	 */
-	var ColoPicker = (function ColoPicker() {
-
-		var colorpicker;
-		var hue_area;
-		var gradient_area;
-		var alpha_area;
-		var gradient_picker;
-		var hue_selector;
-		var alpha_selector;
-		var pick_object;
-		var info_rgb;
-		var info_hsv;
-		var info_hexa;
-		var output_color;
-		var color = new Color();
-		var subscribers = [];
-
-		var updateColor = function updateColor(e) {
-			var x = e.pageX - gradient_area.offsetLeft;
-			var y = e.pageY - gradient_area.offsetTop;
-
-			// width and height should be the same
-			var size = gradient_area.clientWidth;
-
-			if (x &gt; size)
-				x = size;
-			if (y &gt; size)
-				y = size;
-
-			if (x &lt; 0) x = 0;
-			if (y &lt; 0) y = 0;
-
-			var value = 100 - (y * 100 / size) | 0;
-			var saturation = x * 100 / size | 0;
-
-			color.setHSV(color.hue, saturation, value);
-			// should update just
-			// color pointer location
-			updateUI();
-			notify("color", color);
-		}
-
-		var updateHue = function updateHue(e) {
-			var x = e.pageX - hue_area.offsetLeft;
-			var width = hue_area.clientWidth;
-
-			if (x &lt; 0) x = 0;
-			if (x &gt; width) x = width;
-
-			var hue = ((360 * x) / width) | 0;
-			if (hue === 360) hue = 359;
-
-			color.setHSV(hue, color.saturation, color.value);
-
-			// should update just
-			// hue pointer location
-			// picker area background
-			// alpha area background
-			updateUI();
-			notify("color", color);
-		}
-
-		var updateAlpha = function updateAlpha(e) {
-			var x = e.pageX - alpha_area.offsetLeft;
-			var width = alpha_area.clientWidth;
-
-			if (x &lt; 0) x = 0;
-			if (x &gt; width) x = width;
-
-			color.a = (x / width).toFixed(2);
-
-			// should update just
-			// alpha pointer location
-			updateUI();
-			notify("color", color);
-		}
-
-		var setHueGfx = function setHueGfx(hue) {
-			var sat = color.saturation;
-			var val = color.value;
-			var alpha = color.a;
-
-			color.setHSV(hue, 100, 100);
-			gradient_area.style.backgroundColor = color.getHexa();
-
-			color.a = 0;
-			var start = color.getRGBA();
-			color.a = 1;
-			var end = color.getRGBA();
-			color.a = alpha;
-
-			var gradient = '-moz-linear-gradient(left, ' +	start + '0%, ' + end + ' 100%)';
-			alpha_area.style.background = gradient;
-		}
-
-		var updateUI = function updateUI() {
-			var x, y;		// coordinates
-			var size;		// size of the area
-			var offset;		// pointer graphic selector offset
-
-			// Set color pointer location
-			size = gradient_area.clientWidth;
-			offset = gradient_picker.clientWidth / 2 + 2;
-
-			x = (color.saturation * size / 100) | 0;
-			y = size - (color.value * size / 100) | 0;
-
-			gradient_picker.style.left = x - offset + "px";
-			gradient_picker.style.top = y - offset + "px";
-
-			// Set hue pointer location
-			size = hue_area.clientWidth;
-			offset = hue_selector.clientWidth/2;
-			x = (color.hue * size / 360 ) | 0;
-			hue_selector.style.left = x - offset + "px";
-
-			// Set alpha pointer location
-			size = alpha_area.clientWidth;
-			offset = alpha_selector.clientWidth/2;
-			x = (color.a * size) | 0;
-			alpha_selector.style.left = x - offset + "px";
-
-			// Set picker area background
-			var nc = new Color();
-			nc.copy(color);
-			if (nc.hue === 360) nc.hue = 0;
-			nc.setHSV(nc.hue, 100, 100);
-			gradient_area.style.backgroundColor = nc.getHexa();
-
-			// Set alpha area background
-			nc.copy(color);
-			nc.a = 0;
-			var start = nc.getRGBA();
-			nc.a = 1;
-			var end = nc.getRGBA();
-			var gradient = '-moz-linear-gradient(left, ' +	start + '0%, ' + end + ' 100%)';
-			alpha_area.style.background = gradient;
-
-			// Update color info
-			notify("color", color);
-			notify("hue", color.hue);
-			notify("saturation", color.saturation);
-			notify("value", color.value);
-			notify("r", color.r);
-			notify("g", color.g);
-			notify("b", color.b);
-			notify("a", color.a);
-			notify("hexa", color.getHexa());
-			output_color.style.backgroundColor = color.getRGBA();
-		}
-
-		var setInputComponent = function setInputComponent(node) {
-			var topic = node.getAttribute('data-topic');
-			var title = node.getAttribute('data-title');
-			var action = node.getAttribute('data-action');
-			title = title === null ? '' : title;
-
-			var input = document.createElement('input');
-			var info = document.createElement('span');
-			info.textContent = title;
-
-			input.setAttribute('type', 'text');
-			input.setAttribute('data-action', 'set-' + action + '-' + topic);
-			node.appendChild(info);
-			node.appendChild(input);
-
-			input.addEventListener('click', function(e) {
-				this.select();
-			});
-
-			input.addEventListener('change', function(e) {
-				if (action === 'HSV')
-					inputChangeHSV(topic);
-				if (action === 'RGB')
-					inputChangeRGB(topic);
-				if (action === 'alpha')
-					inputChangeAlpha(topic);
-				if (action === 'hexa')
-					inputChangeHexa(topic);
-			});
-
-			subscribe(topic, function(value) {
-				node.children[1].value = value;
-			});
-		}
-
-		var inputChangeHSV = function actionHSV(topic) {
-			var selector = "[data-action='set-HSV-" + topic + "']";
-			var node = document.querySelector("#colorpicker " + selector);
-			var value = parseInt(node.value);
-
-			if (typeof value === 'number' &amp;&amp; isNaN(value) === false &amp;&amp;
-				value &gt;= 0 &amp;&amp; value &lt; 360)
-				color[topic] = value;
-
-			color.updateRGB();
-			updateUI();
-		}
-
-		var inputChangeRGB = function inputChangeRGB(topic) {
-			var selector = "[data-action='set-RGB-" + topic + "']";
-			var node = document.querySelector("#colorpicker " + selector);
-			var value = parseInt(node.value);
-
-			if (typeof value === 'number' &amp;&amp; isNaN(value) === false &amp;&amp;
-				value &gt;= 0 &amp;&amp; value &lt;= 255)
-				color[topic] = value;
-
-			color.updateHSV();
-			updateUI();
-		}
-
-		var inputChangeAlpha = function inputChangeAlpha(topic) {
-			var selector = "[data-action='set-alpha-" + topic + "']";
-			var node = document.querySelector("#colorpicker " + selector);
-			var value = parseFloat(node.value);
-
-			if (typeof value === 'number' &amp;&amp; isNaN(value) === false &amp;&amp;
-				value &gt;= 0 &amp;&amp; value &lt;= 1)
-				color.a = value.toFixed(2);
-
-			updateUI();
-		}
-
-		var inputChangeHexa = function inputChangeHexa(topic) {
-			var selector = "[data-action='set-hexa-" + topic + "']";
-			var node = document.querySelector("#colorpicker " + selector);
-			var value = node.value;
-			color.setHexa(value);
-			color.updateHSV();
-			updateUI();
-		}
-
-		var setMouseTracking = function setMouseTracking(elem, callback) {
-
-			elem.addEventListener("mousedown", function(e) {
-				callback(e);
-				document.addEventListener("mousemove", callback);
-			});
-
-			document.addEventListener("mouseup", function(e) {
-				document.removeEventListener("mousemove", callback);
-			});
-		}
-
-		/*
-		 * Observer
-		 */
-		var setColor = function setColor(obj) {
-			if(obj instanceof Color !== true) {
-				console.log("Typeof instance not Color");
-				return;
-			}
-			color.copy(obj);
-			updateUI();
-		}
-
-		var subscribe = function subscribe(topic, callback) {
-			if (subscribers[topic] === undefined)
-				subscribers[topic] = [];
-
-			subscribers[topic].push(callback);
-		}
-
-		var unsubscribe = function unsubscribe(callback) {
-			subscribers.indexOf(callback);
-			subscribers.splice(index, 1);
-		}
-
-		var notify = function notify(topic, value) {
-			for (var i in subscribers[topic])
-				subscribers[topic][i](value);
-		}
-
-		var init = function init() {
-			colorpicker		= getElemById("colorpicker");
-			hue_area		= getElemById("hue");
-			gradient_area	= getElemById("gradient");
-			alpha_area		= getElemById("alpha");
-			gradient_picker	= getElemById("gradient_picker");
-			hue_selector	= getElemById("hue_selector");
-			alpha_selector	= getElemById("alpha_selector");
-			output_color	= getElemById("output_color");
-
-			var elem = document.querySelectorAll('#colorpicker .input');
-			var size = elem.length;
-			for (var i = 0; i &lt; size; i++)
-				setInputComponent(elem[i]);
-
-			setMouseTracking(gradient_area, updateColor);
-			setMouseTracking(hue_area, updateHue);
-			setMouseTracking(alpha_area, updateAlpha);
-
-		}
-
-		return {
-			init : init,
-			setColor : setColor,
-			subscribe : subscribe,
-			unsubscribe : unsubscribe
-		}
-
-	})();
-
-	/**
-	 * 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
-		}
-
-	})();
-
-	/*
-	 * Element Class
-	 */
-	var CssClass = function CssClass(id) {
-		this.left = 0;
-		this.top = 0;
-		this.rotate = 0;
-		this.width = 300;
-		this.height = 100;
-		this.display = true;
-		this.border = true;
-		this.zIndex = -1;
-		this.bgcolor = new Color();
-		this.id = id;
-		this.node = getElemById('obj-' + id);
-		this.object = getElemById(id);
-		this.shadowID = null;
-		this.shadows = []
-		this.render = [];
-		this.init();
-	}
-
-	CssClass.prototype.init = function init() {
-		this.left = ((this.node.parentNode.clientWidth - this.node.clientWidth) / 2) | 0;
-		this.top = ((this.node.parentNode.clientHeight - this.node.clientHeight) / 2) | 0;
-
-		this.setTop(this.top);
-		this.setLeft(this.left);
-		this.setHeight(this.height);
-		this.setWidth(this.width);
-		this.bgcolor.setHSV(0, 0, 100);
-		this.updateBgColor(this.bgcolor);
-	}
-
-	CssClass.prototype.updatePos = function updatePos(deltaX, deltaY) {
-		this.left += deltaX;
-		this.top += deltaY;
-		this.node.style.top = this.top + "px";
-		this.node.style.left = this.left + "px";
-		SliderManager.setValue("left", this.left);
-		SliderManager.setValue("top", this.top);
-	}
-
-	CssClass.prototype.setLeft = function setLeft(value) {
-		this.left = value;
-		this.node.style.left = this.left + "px";
-		OutputManager.updateProperty(this.id, 'left', this.left + 'px');
-	}
-
-	CssClass.prototype.setTop = function setTop(value) {
-		this.top = value;
-		this.node.style.top = this.top + 'px';
-		OutputManager.updateProperty(this.id, 'top', this.top + 'px');
-	}
-
-	CssClass.prototype.setWidth = function setWidth(value) {
-		this.width = value;
-		this.node.style.width = this.width + 'px';
-		OutputManager.updateProperty(this.id, 'width', this.width + 'px');
-	}
-
-	CssClass.prototype.setHeight = function setHeight(value) {
-		this.height = value;
-		this.node.style.height = this.height + 'px';
-		OutputManager.updateProperty(this.id, 'height', this.height + 'px');
-	}
-
-	// Browser support
-	CssClass.prototype.setRotate = function setRotate(value) {
-		var cssvalue = 'rotate(' + value +'deg)';
-
-		this.node.style.transform = cssvalue;
-		this.node.style.webkitTransform = cssvalue;
-		this.node.style.msTransform = cssvalue;
-
-		if (value !== 0) {
-			if (this.rotate === 0) {
-				OutputManager.toggleProperty(this.id, 'transform', true);
-				OutputManager.toggleProperty(this.id, '-webkit-transform', true);
-				OutputManager.toggleProperty(this.id, '-ms-transform', true);
-			}
-		}
-		else {
-			OutputManager.toggleProperty(this.id, 'transform', false);
-			OutputManager.toggleProperty(this.id, '-webkit-transform', false);
-			OutputManager.toggleProperty(this.id, '-ms-transform', false);
-		}
-
-		OutputManager.updateProperty(this.id, 'transform', cssvalue);
-		OutputManager.updateProperty(this.id, '-webkit-transform', cssvalue);
-		OutputManager.updateProperty(this.id, '-ms-transform', cssvalue);
-		this.rotate = value;
-	}
-
-	CssClass.prototype.setzIndex = function setzIndex(value) {
-		this.node.style.zIndex = value;
-		OutputManager.updateProperty(this.id, 'z-index', value);
-		this.zIndex = value;
-	}
-
-	CssClass.prototype.toggleDisplay = function toggleDisplay(value) {
-		if (typeof value !== "boolean" || this.display === value)
-			return;
-
-		this.display = value;
-		var display = this.display === true ? "block" : "none";
-		this.node.style.display = display;
-		this.object.style.display = display;
-	}
-
-	CssClass.prototype.toggleBorder = function toggleBorder(value) {
-		if (typeof value !== "boolean" || this.border === value)
-			return;
-
-		this.border = value;
-		var border = this.border === true ? "1px solid #CCC" : "none";
-		this.node.style.border = border;
-	}
-
-	CssClass.prototype.updateBgColor = function updateBgColor(color) {
-		this.bgcolor.copy(color);
-		this.node.style.backgroundColor = color.getColor();
-		OutputManager.updateProperty(this.id, 'background-color', color.getColor());
-	}
-
-	CssClass.prototype.updateShadows = function updateShadows() {
-		if (this.render.length === 0)
-			OutputManager.toggleProperty(this.id, 'box-shadow', false);
-		if (this.render.length === 1)
-			OutputManager.toggleProperty(this.id, 'box-shadow', true);
-
-		this.node.style.boxShadow = this.render.join(", ");
-		OutputManager.updateProperty(this.id, 'box-shadow', this.render.join(", \n"));
-
-	}
-
-
-	/**
-	 * Tool Manager
-	 */
-	var Tool = (function Tool() {
-
-		var preview;
-		var classes = [];
-		var active = null;
-		var animate = false;
-
-		/*
-		 * Toll actions
-		 */
-		var addCssClass = function addCssClass(id) {
-			classes[id] = new CssClass(id);
-		}
-
-		var setActiveClass = function setActiveClass(id) {
-			active = classes[id];
-			active.shadowID = null;
-			ColoPicker.setColor(classes[id].bgcolor);
-			SliderManager.setValue("top", active.top);
-			SliderManager.setValue("left", active.left);
-			SliderManager.setValue("rotate", active.rotate);
-			SliderManager.setValue("z-index", active.zIndex);
-			SliderManager.setValue("width", active.width);
-			SliderManager.setValue("height", active.height);
-			ButtonManager.setValue("border-state", active.border);
-			active.updateShadows();
-		}
-
-		var disableClass = function disableClass(topic) {
-			classes[topic].toggleDisplay(false);
-			ButtonManager.setValue(topic, false);
-		}
-
-		var addShadow = function addShadow(position) {
-			if (animate === true)
-				return -1;
-
-			active.shadows.splice(position, 0, new Shadow());
-			active.render.splice(position, 0, null);
-		}
-
-		var swapShadow = function swapShadow(id1, id2) {
-			var x = active.shadows[id1];
-			active.shadows[id1] = active.shadows[id2];
-			active.shadows[id2] = x;
-			updateShadowCSS(id1);
-			updateShadowCSS(id2);
-		}
-
-		var deleteShadow = function deleteShadow(position) {
-			active.shadows.splice(position, 1);
-			active.render.splice(position, 1);
-			active.updateShadows();
-		}
-
-		var setActiveShadow = function setActiveShadow(id, glow) {
-			active.shadowID = id;
-			ColoPicker.setColor(active.shadows[id].color);
-			ButtonManager.setValue("inset", active.shadows[id].inset);
-			SliderManager.setValue("blur", active.shadows[id].blur);
-			SliderManager.setValue("spread", active.shadows[id].spread);
-			SliderManager.setValue("posX", active.shadows[id].posX);
-			SliderManager.setValue("posY", active.shadows[id].posY);
-			if (glow === true)
-				addGlowEffect(id);
-		}
-
-		var addGlowEffect = function addGlowEffect(id) {
-			if (animate === true)
-				return;
-
-			animate = true;
-			var store = new Shadow();
-			var shadow = active.shadows[id];
-
-			store.copy(shadow);
-			shadow.color.setRGBA(40, 125, 200, 1);
-			shadow.blur = 10;
-			shadow.spread = 10;
-
-			active.node.style.transition = "box-shadow 0.2s";
-			updateShadowCSS(id);
-
-			setTimeout(function() {
-				shadow.copy(store);
-				updateShadowCSS(id);
-				setTimeout(function() {
-					active.node.style.removeProperty("transition");
-					animate = false;
-				}, 100);
-			}, 200);
-		}
-
-		var updateActivePos = function updateActivePos(deltaX, deltaY) {
-			if (active.shadowID === null)
-				active.updatePos(deltaX, deltaY);
-			else
-				updateShadowPos(deltaX, deltaY);
-		}
-
-		/*
-		 * Shadow properties
-		 */
-		var updateShadowCSS = function updateShadowCSS(id) {
-			active.render[id] = active.shadows[id].computeCSS();
-			active.updateShadows();
-		}
-
-		var toggleShadowInset = function toggleShadowInset(value) {
-			if (active.shadowID === null)
-				return;
-			active.shadows[active.shadowID].toggleInset(value);
-			updateShadowCSS(active.shadowID);
-		}
-
-		var updateShadowPos = function updateShadowPos(deltaX, deltaY) {
-			var shadow = active.shadows[active.shadowID];
-			shadow.posX += deltaX;
-			shadow.posY += deltaY;
-			SliderManager.setValue("posX", shadow.posX);
-			SliderManager.setValue("posY", shadow.posY);
-			updateShadowCSS(active.shadowID);
-		}
-
-		var setShadowPosX = function setShadowPosX(value) {
-			if (active.shadowID === null)
-				return;
-			active.shadows[active.shadowID].posX = value;
-			updateShadowCSS(active.shadowID);
-		}
-
-		var setShadowPosY = function setShadowPosY(value) {
-			if (active.shadowID === null)
-				return;
-			active.shadows[active.shadowID].posY = value;
-			updateShadowCSS(active.shadowID);
-		}
-
-		var setShadowBlur = function setShadowBlur(value) {
-			if (active.shadowID === null)
-				return;
-			active.shadows[active.shadowID].blur = value;
-			updateShadowCSS(active.shadowID);
-		}
-
-		var setShadowSpread = function setShadowSpread(value) {
-			if (active.shadowID === null)
-				return;
-			active.shadows[active.shadowID].spread = value;
-			updateShadowCSS(active.shadowID);
-		}
-
-		var updateShadowColor = function updateShadowColor(color) {
-			active.shadows[active.shadowID].color.copy(color);
-			updateShadowCSS(active.shadowID);
-		}
-
-		/*
-		 * Element Properties
-		 */
-		var updateColor = function updateColor(color) {
-			if (active.shadowID === null)
-				active.updateBgColor(color);
-			else
-				updateShadowColor(color);
-		}
-
-		var init = function init() {
-			preview = getElemById("preview");
-
-			ColoPicker.subscribe("color", updateColor);
-			PreviewMouseTracking.subscribe(updateActivePos);
-
-			// Affects shadows
-			ButtonManager.subscribe("inset", toggleShadowInset);
-			SliderManager.subscribe("posX", setShadowPosX);
-			SliderManager.subscribe("posY", setShadowPosY);
-			SliderManager.subscribe("blur", setShadowBlur);
-			SliderManager.subscribe("spread", setShadowSpread);
-
-			// Affects element
-			SliderManager.subscribe("top", function(value){
-				active.setTop(value);
-			});
-			SliderManager.subscribe("left", function(value){
-				active.setLeft(value);
-			});
-			SliderManager.subscribe("rotate", function(value) {
-				if (active == classes["element"])
-					return;
-				active.setRotate(value);
-			});
-
-			SliderManager.subscribe("z-index", function(value) {
-				if (active == classes["element"])
-					return;
-				active.setzIndex(value);
-			});
-
-			SliderManager.subscribe("width", function(value) {
-				active.setWidth(value)
-			});
-
-			SliderManager.subscribe("height", function(value) {
-				active.setHeight(value)
-			});
-
-			// Actions
-			classes['before'].top = -30;
-			classes['before'].left = -30;
-			classes['after'].top = 30;
-			classes['after'].left = 30;
-			classes['before'].toggleDisplay(false);
-			classes['after'].toggleDisplay(false);
-			ButtonManager.setValue('before', false);
-			ButtonManager.setValue('after', false);
-
-			ButtonManager.subscribe("before", classes['before'].toggleDisplay.bind(classes['before']));
-			ButtonManager.subscribe("after", classes['after'].toggleDisplay.bind(classes['after']));
-
-			ButtonManager.subscribe("border-state", function(value) {
-				active.toggleBorder(value);
-			});
-
-		}
-
-		return {
-			init 			: init,
-			addShadow		: addShadow,
-			swapShadow		: swapShadow,
-			addCssClass		: addCssClass,
-			disableClass	: disableClass,
-			deleteShadow	: deleteShadow,
-			setActiveClass	: setActiveClass,
-			setActiveShadow : setActiveShadow
-		}
-
-	})();
-
-	/**
-	 * Layer Manager
-	 */
-	var LayerManager = (function LayerManager() {
-		var stacks = [];
-		var active = {
-			node : null,
-			stack : null
-		}
-		var elements = {};
-
-		var mouseEvents = function mouseEvents(e) {
-			var node = e.target;
-			var type = node.getAttribute('data-type');
-
-			if (type === 'subject')
-				setActiveStack(stacks[node.id]);
-
-			if (type === 'disable') {
-				Tool.disableClass(node.parentNode.id);
-				setActiveStack(stacks['element']);
-			}
-
-			if (type === 'add')
-				active.stack.addLayer();
-
-			if (type === 'layer')
-				active.stack.setActiveLayer(node);
-
-			if (type === 'delete')
-				active.stack.deleteLayer(node.parentNode);
-
-			if (type === 'move-up')
-				active.stack.moveLayer(1);
-
-			if (type === 'move-down')
-				active.stack.moveLayer(-1);
-		}
-
-		var setActiveStack = function setActiveStack(stackObj) {
-			active.stack.hide();
-			active.stack = stackObj;
-			active.stack.show();
-		}
-
-		/*
-		 * Stack object
-		 */
-		var Stack = function Stack(subject) {
-			var S = document.createElement('div');
-			var title = document.createElement('div');
-			var stack = document.createElement('div');
-
-			S.className = 'container';
-			stack.className = 'stack';
-			title.className = 'title';
-			title.textContent = subject.getAttribute('data-title');
-			S.appendChild(title);
-			S.appendChild(stack);
-
-			this.id = subject.id;
-			this.container = S;
-			this.stack = stack;
-			this.subject = subject;
-			this.order = [];
-			this.uid = 0;
-			this.count = 0;
-			this.layer = null;
-			this.layerID = 0;
-		}
-
-		Stack.prototype.addLayer = function addLayer() {
-			if (Tool.addShadow(this.layerID) == -1)
-				return;
-
-			var uid = this.getUID();
-			var layer = this.createLayer(uid);
-
-			if (this.layer === null &amp;&amp; this.stack.children.length &gt;= 1)
-				this.layer = this.stack.children[0];
-
-			this.stack.insertBefore(layer, this.layer);
-			this.order.splice(this.layerID, 0, uid);
-			this.count++;
-			this.setActiveLayer(layer);
-		}
-
-		Stack.prototype.createLayer = function createLayer(uid) {
-			var layer = document.createElement('div');
-			var del = document.createElement('span');
-
-			layer.className = 'node';
-			layer.setAttribute('data-shid', uid);
-			layer.setAttribute('data-type', 'layer');
-			layer.textContent = 'shadow ' + uid;
-
-			del.className = 'delete';
-			del.setAttribute('data-type', 'delete');
-
-			layer.appendChild(del);
-			return layer;
-		}
-
-		Stack.prototype.getUID = function getUID() {
-			return this.uid++;
-		}
-
-		// SOLVE IE BUG
-		Stack.prototype.moveLayer = function moveLayer(direction) {
-			if (this.count &lt;= 1 || this.layer === null)
-				return;
-			if (direction === -1 &amp;&amp; this.layerID === (this.count - 1) )
-				return;
-			if (direction === 1 &amp;&amp; this.layerID === 0 )
-				return;
-
-			if (direction === -1) {
-				var before = null;
-				Tool.swapShadow(this.layerID, this.layerID + 1);
-				this.swapOrder(this.layerID, this.layerID + 1);
-				this.layerID += 1;
-
-				if (this.layerID + 1 !== this.count)
-					before = this.stack.children[this.layerID + 1];
-
-				this.stack.insertBefore(this.layer, before);
-				Tool.setActiveShadow(this.layerID, false);
-			}
-
-			if (direction === 1) {
-				Tool.swapShadow(this.layerID, this.layerID - 1);
-				this.swapOrder(this.layerID, this.layerID - 1);
-				this.layerID -= 1;
-				this.stack.insertBefore(this.layer, this.stack.children[this.layerID]);
-				Tool.setActiveShadow(this.layerID, false);
-			}
-		}
-
-		Stack.prototype.swapOrder = function swapOrder(pos1, pos2) {
-			var x = this.order[pos1];
-			this.order[pos1] = this.order[pos2];
-			this.order[pos2] = x;
-		}
-
-		Stack.prototype.deleteLayer = function deleteLayer(node) {
-			var shadowID =  node.getAttribute('data-shid') | 0;
-			var index = this.order.indexOf(shadowID);
-			this.stack.removeChild(this.stack.children[index]);
-			this.order.splice(index, 1);
-			this.count--;
-
-			Tool.deleteShadow(index);
-
-			if (index &gt; this.layerID)
-				return;
-
-			if (index == this.layerID) {
-				if (this.count &gt;= 1) {
-					this.layerID = 0;
-					this.setActiveLayer(this.stack.children[0], true);
-				}
-				else {
-					this.layer = null;
-					this.show();
-				}
-			}
-
-			if (index &lt; this.layerID) {
-				this.layerID--;
-				Tool.setActiveShadow(this.layerID, true);
-			}
-
-		}
-
-		Stack.prototype.setActiveLayer = function setActiveLayer(node) {
-			elements.shadow_properties.style.display = 'block';
-			elements.element_properties.style.display = 'none';
-
-			if (this.layer)
-				this.layer.removeAttribute('data-active');
-
-			this.layer = node;
-			this.layer.setAttribute('data-active', 'layer');
-
-			var shadowID =  node.getAttribute('data-shid') | 0;
-			this.layerID = this.order.indexOf(shadowID);
-			Tool.setActiveShadow(this.layerID, true);
-		}
-
-		Stack.prototype.unsetActiveLayer = function unsetActiveLayer() {
-			if (this.layer)
-				this.layer.removeAttribute('data-active');
-
-			this.layer = null;
-			this.layerID = 0;
-		}
-
-		Stack.prototype.hide = function hide() {
-			this.unsetActiveLayer();
-			this.subject.removeAttribute('data-active');
-			var style = this.container.style;
-			style.left = '100%';
-			style.zIndex = '0';
-		}
-
-		Stack.prototype.show = function show() {
-			elements.shadow_properties.style.display = 'none';
-			elements.element_properties.style.display = 'block';
-
-			if (this.id === 'element') {
-				elements.zIndex.style.display = 'none';
-				elements.transform_rotate.style.display = 'none';
-			}
-			else {
-				elements.zIndex.style.display = 'block';
-				elements.transform_rotate.style.display = 'block';
-			}
-
-			this.subject.setAttribute('data-active', 'subject');
-			var style = this.container.style;
-			style.left = '0';
-			style.zIndex = '10';
-			Tool.setActiveClass(this.id);
-		}
-
-		function init() {
-
-			var elem, size;
-			var layerManager = getElemById("layer_manager");
-			var layerMenu = getElemById("layer_menu");
-			var container = getElemById("stack_container");
-
-			elements.shadow_properties = getElemById('shadow_properties');
-			elements.element_properties = getElemById('element_properties');
-			elements.transform_rotate = getElemById('transform_rotate');
-			elements.zIndex = getElemById('z-index');
-
-			elem = document.querySelectorAll('#layer_menu [data-type="subject"]');
-			size = elem.length;
-
-			for (var i = 0; i &lt; size; i++) {
-				var S = new Stack(elem[i]);
-				stacks[elem[i].id] = S;
-				container.appendChild(S.container);
-				Tool.addCssClass(elem[i].id);
-			}
-
-			active.stack = stacks['element'];
-			stacks['element'].show();
-
-			layerManager.addEventListener("click", mouseEvents);
-			layerMenu.addEventListener("click", mouseEvents);
-
-			ButtonManager.subscribe("before", function(value) {
-				if (value === false &amp;&amp; active.stack === stacks['before'])
-					setActiveStack(stacks['element'])
-				if (value === true &amp;&amp; active.stack !== stacks['before'])
-					setActiveStack(stacks['before'])
-			});
-
-			ButtonManager.subscribe("after", function(value) {
-				if (value === false &amp;&amp; active.stack === stacks['after'])
-					setActiveStack(stacks['element'])
-				if (value === true &amp;&amp; active.stack !== stacks['after'])
-					setActiveStack(stacks['after'])
-			});
-		}
-
-		return {
-			init : init
-		}
-	})();
-
-	/*
-	 * OutputManager
-	 */
-	var OutputManager = (function OutputManager() {
-		var classes = [];
-		var buttons = [];
-		var active = null;
-		var menu = null;
-		var button_offset = 0;
-
-		var crateOutputNode = function(topic, property) {
-
-			var prop = document.createElement('div');
-			var name = document.createElement('span');
-			var value = document.createElement('span');
-
-			var pmatch = property.match(/(^([a-z0-9\-]*)=\[([a-z0-9\-\"]*)\])|^([a-z0-9\-]*)/i);
-
-			name.textContent = '\t' + pmatch[4];
-
-			if (pmatch[3] !== undefined) {
-				name.textContent = '\t' + pmatch[2];
-				value.textContent = pmatch[3] + ';';
-			}
-
-			name.textContent += ': ';
-			prop.className = 'css-property';
-			name.className = 'name';
-			value.className = 'value';
-			prop.appendChild(name);
-			prop.appendChild(value);
-
-			classes[topic].node.appendChild(prop);
-			classes[topic].line[property] = prop;
-			classes[topic].prop[property] = value;
-		}
-
-		var OutputClass = function OutputClass(node) {
-			var topic = node.getAttribute('data-topic');
-			var prop = node.getAttribute('data-prop');
-			var name = node.getAttribute('data-name');
-			var properties = prop.split(' ');
-
-			classes[topic] = {};
-			classes[topic].node = node;
-			classes[topic].prop = [];
-			classes[topic].line = [];
-			classes[topic].button = new Button(topic);
-
-			var open_decl = document.createElement('div');
-			var end_decl = document.createElement('div');
-
-			open_decl.textContent = name + ' {';
-			end_decl.textContent = '}';
-			node.appendChild(open_decl);
-
-			for (var i in properties)
-				crateOutputNode(topic, properties[i]);
-
-			node.appendChild(end_decl);
-		}
-
-		var Button = function Button(topic) {
-			var button = document.createElement('div');
-
-			button.className = 'button';
-			button.textContent = topic;
-			button.style.left = button_offset + 'px';
-			button_offset += 100;
-
-			button.addEventListener("click", function() {
-				toggleDisplay(topic);
-			})
-
-			menu.appendChild(button);
-			return button;
-		}
-
-		var toggleDisplay = function toggleDisplay(topic) {
-			active.button.removeAttribute('data-active');
-			active.node.style.display = 'none';
-			active = classes[topic];
-			active.node.style.display = 'block';
-			active.button.setAttribute('data-active', 'true');
-		}
-
-		var toggleButton = function toggleButton(topic, value) {
-			var display = (value === true) ? 'block' : 'none';
-			classes[topic].button.style.display = display;
-
-			if (value === true)
-				toggleDisplay(topic);
-			else
-				toggleDisplay('element');
-		}
-
-		var updateProperty = function updateProperty(topic, property, data) {
-			try {
-				classes[topic].prop[property].textContent = data + ';';
-			}
-			catch(error) {
-				// console.log("ERROR undefined : ", topic, property, data);
-			}
-		}
-
-		var toggleProperty = function toggleProperty(topic, property, value) {
-			var display = (value === true) ? 'block' : 'none';
-			try {
-				classes[topic].line[property].style.display = display;
-			}
-			catch(error) {
-				// console.log("ERROR undefined : ",classes, topic, property, value);
-			}
-		}
-
-		var init = function init() {
-
-			menu = getElemById('menu');
-
-			var elem = document.querySelectorAll('#output .output');
-			var size = elem.length;
-			for (var i = 0; i &lt; size; i++)
-				OutputClass(elem[i]);
-
-			active = classes['element'];
-			toggleDisplay('element');
-
-			ButtonManager.subscribe("before", function(value) {
-				toggleButton('before', value);
-			});
-
-			ButtonManager.subscribe("after", function(value) {
-				toggleButton('after', value);
-			});
-		}
-
-		return {
-			init : init,
-			updateProperty : updateProperty,
-			toggleProperty : toggleProperty
-		}
-
-	})();
-
-
-	/**
-	 * Init Tool
-	 */
-	var init = function init() {
-		ButtonManager.init();
-		OutputManager.init();
-		ColoPicker.init();
-		SliderManager.init();
-		LayerManager.init();
-		PreviewMouseTracking.init("preview");
-		Tool.init();
-	}
-
-	return {
-		init : init
-	}
-
-})();
-
-
-</code></pre>
-</div>
-
-<div>{{ EmbedLiveSample('box-shadow_generator', '100%', '1100px', '') }}</div>
diff --git a/files/ko/web/css/css_backgrounds_and_borders/border-image_generator/index.html b/files/ko/web/css/css_backgrounds_and_borders/border-image_generator/index.html
new file mode 100644
index 0000000000..6b9954d8a5
--- /dev/null
+++ b/files/ko/web/css/css_backgrounds_and_borders/border-image_generator/index.html
@@ -0,0 +1,2628 @@
+---
+title: Border-image 생성기
+slug: Web/CSS/CSS_Backgrounds_and_Borders/Border-image_generator
+tags:
+  - CSS
+  - CSS Borders
+  - Tools
+translation_of: Web/CSS/CSS_Background_and_Borders/Border-image_generator
+original_slug: Web/CSS/CSS_Background_and_Borders/Border-image_generator
+---
+<p>이 도구를 사용해 CSS3 {{cssxref("border-image")}} 값을 생성할 수 있습니다.</p>
+
+<div class="hidden">
+<h2 id="Border_Image_Generator" name="Border_Image_Generator">Border Image Generator</h2>
+
+<h3 id="HTML_Content">HTML Content</h3>
+
+<pre class="brush: html">    &lt;div id="container"&gt;
+
+        &lt;div id="gallery"&gt;
+            &lt;div id="image-gallery"&gt;
+                &lt;img class="image" src="https://mdn.mozillademos.org/files/6007/border-image-1.png" data-stateID="border1"/&gt;
+                &lt;img class="image" src="https://mdn.mozillademos.org/files/6009/border-image-2.png" data-stateID="border2"/&gt;
+                &lt;img class="image" src="https://mdn.mozillademos.org/files/6011/border-image-3.png" data-stateID="border3"/&gt;
+                &lt;img class="image" src="https://mdn.mozillademos.org/files/6013/border-image-4.png" data-stateID="border4"/&gt;
+                &lt;img class="image" src="https://mdn.mozillademos.org/files/6015/border-image-5.png" data-stateID="border5"/&gt;
+                &lt;img class="image" src="https://mdn.mozillademos.org/files/6017/border-image-6.svg" data-stateID="border6"/&gt;
+            &lt;/div&gt;
+        &lt;/div&gt;
+
+        &lt;div id="load-actions" class="group section"&gt;
+            &lt;div id="toggle-gallery" data-action="hide"&gt; &lt;/div&gt;
+            &lt;div id="load-image" class="button"&gt; Upload image &lt;/div&gt;
+            &lt;input id="remote-url" type="text" placeholder="Load an image from URL"/&gt;
+            &lt;div id="load-remote" class="button"&gt; &lt;/div&gt;
+        &lt;/div&gt;
+
+        &lt;div id="general-controls" class="group section"&gt;
+            &lt;div class="name"&gt; Control Box &lt;/div&gt;
+            &lt;div class="separator"&gt;&lt;/div&gt;
+            &lt;div class="property"&gt;
+                &lt;div class="name"&gt;scale&lt;/div&gt;
+                &lt;div class="ui-input-slider" data-topic="scale"
+                    data-unit="%" data-max="300" data-sensivity="10"&gt;
+                &lt;/div&gt;
+            &lt;/div&gt;
+            &lt;div class="separator"&gt;&lt;/div&gt;
+            &lt;div class="property"&gt;
+                &lt;div class="name"&gt;draggable&lt;/div&gt;
+                &lt;div class="ui-checkbox" data-topic='drag-subject'&gt;&lt;/div&gt;
+            &lt;/div&gt;
+            &lt;div class="property right"&gt;
+                &lt;div class="name"&gt;section height&lt;/div&gt;
+                &lt;div class="ui-input-slider" data-topic="preview-area-height"
+                    data-min="400" data-max="1000"&gt;
+                &lt;/div&gt;
+            &lt;/div&gt;
+        &lt;/div&gt;
+
+        &lt;div id="preview_section" class="group section"&gt;
+            &lt;div id="subject"&gt;
+                &lt;div class="guideline" data-axis="Y" data-topic="slice-top"&gt;&lt;/div&gt;
+                &lt;div class="guideline" data-axis="X" data-topic="slice-right"&gt;&lt;/div&gt;
+                &lt;div class="guideline" data-axis="Y" data-topic="slice-bottom"&gt;&lt;/div&gt;
+                &lt;div class="guideline" data-axis="X" data-topic="slice-left"&gt;&lt;/div&gt;
+            &lt;/div&gt;
+            &lt;div id="preview"&gt; &lt;/div&gt;
+        &lt;/div&gt;
+
+        &lt;!-- controls --&gt;
+        &lt;div id="controls" class="group section"&gt;
+
+            &lt;!-- border-image-slice --&gt;
+            &lt;div id="border-slice-control" class="category"&gt;
+                &lt;div class="title"&gt; border-image-slice &lt;/div&gt;
+                &lt;div class="property"&gt;
+                    &lt;div class="name"&gt;fill&lt;/div&gt;
+                    &lt;div class="ui-checkbox" data-topic='slice-fill'&gt;&lt;/div&gt;
+                &lt;/div&gt;
+            &lt;/div&gt;
+
+            &lt;!-- border-image-width --&gt;
+            &lt;div id="border-width-control" class="category"&gt;
+                &lt;div class="title"&gt; border-image-width &lt;/div&gt;
+            &lt;/div&gt;
+
+            &lt;!-- border-image-outset --&gt;
+            &lt;div id="border-outset-control" class="category"&gt;
+                &lt;div class="title"&gt; border-image-outset &lt;/div&gt;
+            &lt;/div&gt;
+
+            &lt;!-- other-settings --&gt;
+            &lt;div id="aditional-properties" class="category"&gt;
+                &lt;div class="title"&gt; aditional-properties &lt;/div&gt;
+                &lt;div class="property"&gt;
+                    &lt;div class="name"&gt; repeat-x &lt;/div&gt;
+                    &lt;div class="ui-dropdown border-repeat" data-topic="image-repeat-X" data-selected="2"&gt;
+                        &lt;div data-value="0"&gt;repeat&lt;/div&gt;
+                        &lt;div data-value="0"&gt;stretch&lt;/div&gt;
+                        &lt;div data-value="0"&gt;round&lt;/div&gt;
+                    &lt;/div&gt;
+                &lt;/div&gt;
+                &lt;div class="property"&gt;
+                    &lt;div class="name"&gt; repeat-y &lt;/div&gt;
+                    &lt;div class="ui-dropdown border-repeat" data-topic="image-repeat-Y" data-selected="2"&gt;
+                        &lt;div data-value="1"&gt;repeat&lt;/div&gt;
+                        &lt;div data-value="1"&gt;stretch&lt;/div&gt;
+                        &lt;div data-value="1"&gt;round&lt;/div&gt;
+                    &lt;/div&gt;
+                &lt;/div&gt;
+                &lt;div class="property"&gt;
+                    &lt;div class="ui-input-slider" data-topic="font-size" data-info="em size"
+                        data-unit="px" data-value="12" data-sensivity="3"&gt;
+                    &lt;/div&gt;
+                &lt;/div&gt;
+
+                &lt;div class="property"&gt;
+                    &lt;div class="ui-input-slider" data-topic="preview-width" data-info="width"
+                         data-unit=" px" data-min="10" data-max="10000" data-sensivity="3"&gt;&lt;/div&gt;
+                &lt;/div&gt;
+                &lt;div class="property"&gt;
+                    &lt;div class="ui-input-slider" data-topic="preview-height" data-info="height"
+                        data-unit=" px" data-min="10" data-max="10000" data-sensivity="3"&gt;
+                    &lt;/div&gt;
+                &lt;/div&gt;
+            &lt;/div&gt;
+
+
+            &lt;div id="output" class="category"&gt;
+                &lt;div class="title"&gt; CSS Code &lt;/div&gt;
+                &lt;div class="css-property"&gt;
+                    &lt;span class="name"&gt; border-image-slice: &lt;/span&gt;
+                    &lt;span id="out-border-slice" class="value"&gt; &lt;/span&gt;
+                &lt;/div&gt;
+                &lt;div class="css-property"&gt;
+                    &lt;span class="name"&gt; border-image-width: &lt;/span&gt;
+                    &lt;span id="out-border-width" class="value"&gt; &lt;/span&gt;
+                &lt;/div&gt;
+                &lt;div class="css-property"&gt;
+                    &lt;span class="name"&gt; border-image-outset: &lt;/span&gt;
+                    &lt;span id="out-border-outset" class="value"&gt; &lt;/span&gt;
+                &lt;/div&gt;
+                &lt;div class="css-property"&gt;
+                    &lt;span class="name"&gt; border-image-repeat: &lt;/span&gt;
+                    &lt;span id="out-border-repeat" class="value"&gt; &lt;/span&gt;
+                &lt;/div&gt;
+                &lt;div class="css-property"&gt;
+                    &lt;span class="name"&gt; border-image-source: &lt;/span&gt;
+                    &lt;span id="out-border-source" class="value"&gt;  &lt;/span&gt;
+                &lt;/div&gt;
+            &lt;/div&gt;
+
+        &lt;/div&gt;
+    &lt;/div&gt;</pre>
+
+<h3 id="CSS_Content">CSS Content</h3>
+
+<pre class="brush: css">/*  GRID OF TWELVE
+ * ========================================================================== */
+
+.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 {
+	height: 20px;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	-moz-user-select: none;
+	user-select: none;
+}
+
+.ui-input-slider * {
+	float: left;
+	height: 100%;
+	line-height: 100%;
+}
+
+/* Input Slider */
+
+.ui-input-slider &gt; 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 DropDown
+ */
+
+/* Dropdown */
+
+.ui-dropdown {
+	height: 2em;
+	width: 120px;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	font-size: 12px;
+
+	background-image: url("https://mdn.mozillademos.org/files/6037/drop_arrow_icon.png");
+	background-position: right center;
+	background-repeat: no-repeat;
+	background-color: #359740;
+
+	position: relative;
+
+	-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;
+}
+
+.ui-dropdown:hover {
+	cursor: pointer;
+	background-color: #208B20;
+}
+
+/* Dropdown Select Button */
+
+.ui-dropdown-select {
+	height: inherit;
+	padding: 0 0.75em;
+	color: #FFF;
+	line-height: 2em;
+}
+
+/* Dropdown List */
+
+.ui-dropdown-list {
+	width: 100%;
+	height: 150px;
+	max-height: 150px;
+	margin: 0;
+	padding: 0 0.3em;
+
+	border: 3px solid #3490D2;
+	border-color: #208B20;
+	background: #666;
+	background-color: #EEF1F5;
+	color: #000;
+
+	position: absolute;
+	top: 2em;
+	left: 0;
+	z-index: 100;
+
+	overflow: hidden;
+	transition: all 0.3s;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+.ui-dropdown-list:hover {
+	overflow: auto;
+}
+
+.ui-dropdown-list[data-hidden='true'] {
+	height: 0 !important;
+	opacity: 0;
+	visibility: hidden;
+}
+
+.ui-dropdown[data-position='left'] .ui-dropdown-list {
+	left: -100%;
+	top: 0;
+}
+
+.ui-dropdown[data-position='right'] .ui-dropdown-list {
+	left: 100%;
+	top: 0;
+}
+
+.ui-dropdown-list &gt; div {
+	width: 100%;
+	height: 1.6em;
+	margin: 0.3em 0;
+	padding: 0.3em;
+	line-height: 1em;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+.ui-dropdown-list &gt; div:hover {
+	background: #3490D2;
+	color:#FFF;
+	border-radius: 2px;
+	cursor: pointer;
+}
+
+
+/*************************************************************************************/
+/*************************************************************************************/
+
+/*
+ * UI Button
+ */
+
+/* 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 &gt; input {
+ 	display: none;
+}
+
+.ui-checkbox &gt; 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: 2px;
+	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 &gt; label:hover {
+	cursor: pointer;
+}
+
+.ui-checkbox &gt; input:checked + label {
+	background-image: url("https://mdn.mozillademos.org/files/5681/checked.png");
+	background-color: #379B4A;
+}
+
+/*************************************************************************************/
+/*************************************************************************************/
+
+/*
+ * BORDER IMAGE GENERATOR TOOL
+ */
+
+body {
+	width: 100%;
+	margin: 0 auto;
+	padding: 0 0 20px 0;
+
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+
+	/*background: url("https://mdn.mozillademos.org/files/6025/grain.png");*/
+	border: 1px solid #EEE;
+
+	-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;
+}
+
+body[data-move='X'] {
+	cursor: w-resize !important;
+}
+
+body[data-move='Y'] {
+	cursor: s-resize !important;
+}
+
+#container {
+	width: 100%;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+[data-draggable='true']:hover {
+	cursor: move;
+}
+
+[data-draggable='true']:hover &gt; * {
+	cursor: default;
+}
+
+
+
+/******************************************************************************/
+/******************************************************************************/
+
+/*
+ * Border Image Picker
+ */
+
+#gallery {
+	box-shadow: 0 0 3px 0 #BABABA;
+}
+
+#image-gallery {
+	width: 600px;
+	height: 100px;
+	margin: 0 auto;
+	transition: margin 0.4s;
+}
+
+#image-gallery .image {
+	height: 80px;
+	float: left;
+	margin: 10px;
+	opacity: 0.5;
+	background-color: #FFF;
+	box-shadow: 0px 0px 3px 1px #BABABA;
+}
+
+#image-gallery .image[selected="true"] {
+	box-shadow: 0px 0px 3px 1px #3BBA52;
+	opacity: 1;
+}
+
+#image-gallery .image:hover {
+	cursor: pointer;
+	box-shadow: 0px 0px 3px 1px #30ACE5;
+	opacity: 1;
+}
+
+#image-gallery[data-collapsed='true'] {
+	margin-top: -100px;
+}
+
+/* Load Menu */
+
+#load-actions {
+	margin: 10px 0;
+}
+
+#toggle-gallery {
+	width: 30px;
+	height: 25px;
+	margin: 10px;
+	color: #FFF;
+
+	background-image: url('https://mdn.mozillademos.org/files/6005/arrow-up-white.png');
+	background-repeat: no-repeat;
+	background-position: top 4px center;
+	background-color: #888888 !important;
+
+	border-radius: 2px;
+	float: left;
+}
+
+#toggle-gallery:hover {
+	cursor: pointer;
+}
+
+#toggle-gallery[data-action='show'] {
+	background-image: url('https://mdn.mozillademos.org/files/6001/arrow-down-white.png');
+	background-color: #888888 !important;
+}
+
+#toggle-gallery[data-action='hide'] {
+	background-image: url('https://mdn.mozillademos.org/files/6005/arrow-up-white.png');
+}
+
+.button {
+	width: 100px;
+	height: 25px;
+	margin: 10px;
+	color: #FFF;
+	text-align: center;
+	font-size: 12px;
+	line-height: 25px;
+	background-color: #379B4A;
+	border-radius: 2px;
+	float: left;
+}
+
+.button:hover {
+	cursor: pointer;
+	background-color: #3380C4;
+}
+
+#load-image {
+	float: left;
+}
+
+#load-remote {
+	width: 30px;
+	background-image: url('https://mdn.mozillademos.org/files/6003/arrow-right-white.png');
+	background-repeat: no-repeat;
+	background-position: center center;
+}
+
+#remote-url {
+	width: 200px;
+	height: 23px;
+	margin: 10px;
+	padding: 0 5px;
+	border: 1px solid #379B4A;
+	border-radius: 2px;
+	float: left;
+
+	transition: width 0.5s;
+}
+
+#remote-url:focus {
+	box-shadow: 0px 0px 3px -1px #379B4A; /*#68ACE8; */
+	border-color: rgba(55, 155, 74, 0.5);
+	width: 450px;
+}
+
+/*
+ * Visible Area
+ */
+
+#preview_section {
+	position: relative;
+	min-height: 400px;
+}
+
+/* Image Control */
+
+#subject {
+	width: 300px;
+	height: 300px;
+	background-repeat: no-repeat;
+	background-size: 100%;
+	background-color: #FFF;
+	border: 1px solid #CCC;
+
+	position: absolute;
+	z-index: 10;
+	top: 15%;
+	left: 10%;
+
+	box-shadow: 0 0 3px 0 #BABABA;
+	transition-property: width, height;
+	transition-duration: 0.1s;
+}
+
+#subject .guideline {
+	background-color: rgba(255, 255, 255, 0.7);
+	border: 1px solid rgba(0, 0, 0, 0.3);
+	position: absolute;
+}
+
+#subject .guideline:hover {
+	background-color: #F00;
+}
+
+#subject .guideline[data-active] {
+	background-color: #F00;
+	z-index: 10;
+}
+
+#subject .guideline[data-axis='X'] {
+	width: 1px;
+	height: 100%;
+	top: -1px;
+}
+
+#subject .guideline[data-axis='Y'] {
+	width: 100%;
+	height: 1px;
+	left: -1px;
+}
+
+#subject .guideline[data-axis='X']:hover {
+	cursor: w-resize;
+}
+
+#subject .guideline[data-axis='Y']:hover {
+	cursor: s-resize;
+}
+
+
+#subject .relative {
+	position: relative;
+	font-size: 12px;
+}
+
+#subject .tooltip, #subject .tooltip2 {
+	width: 40px;
+	height: 20px;
+	line-height: 20px;
+	font-size: 12px;
+	text-align: center;
+
+	position: absolute;
+	opacity: 0.5;
+	transition: opacity 0.25s;
+}
+
+#subject .tooltip {
+	background: #EEE;
+	border-radius: 2px;
+	border: 1px solid #CCC;
+}
+
+#subject .tooltip2{
+	color: #555;
+}
+
+#subject [data-active] &gt; * {
+	opacity: 1;
+}
+
+#subject .tooltip[data-info='top'] {
+	top: -10px;
+	right: -50px;
+}
+
+#subject .tooltip[data-info='right'] {
+	bottom: -30px;
+	right: -20px;
+}
+
+#subject .tooltip[data-info='bottom'] {
+	top: -10px;
+	left: -50px;
+}
+
+#subject .tooltip[data-info='left'] {
+	top: -30px;
+	right: -20px;
+}
+
+#subject .tooltip2[data-info='top'] {
+	top: -10px;
+	left: -50px;
+}
+
+#subject .tooltip2[data-info='right'] {
+	top: -30px;
+	right: -20px;
+}
+
+#subject .tooltip2[data-info='bottom'] {
+	top: -10px;
+	right: -50px;
+}
+
+#subject .tooltip2[data-info='left'] {
+	bottom: -30px;
+	right: -20px;
+}
+
+/* Preview */
+
+#preview {
+	width: 30%;
+	height: 50%;
+	background-color: #FFF;
+	text-align: center;
+	overflow: hidden;
+	position: absolute;
+	z-index: 10;
+
+	left: 60%;
+	top: 15%;
+
+	border-radius: 2px;
+	border-image-width: 20px;
+	border-image-repeat: round;
+	box-shadow: 0 0 3px 0 #BABABA;
+}
+
+#preview .resize-handle {
+	width: 10px;
+	height: 10px;
+	background: url("https://mdn.mozillademos.org/files/6027/resize.png") center center no-repeat;
+	position: absolute;
+	bottom: 0;
+	right: 0;
+}
+
+#preview .resize-handle:hover {
+	cursor: nw-resize;
+}
+
+
+/*
+ * General controls MENU
+ */
+
+#general-controls {
+	padding: 10px 30px;
+	background-color: #FFF;
+	opacity: 0.95;
+	color: #888;
+	/*border-radius: 2px;*/
+	box-shadow: 0 0 3px 0 #BABABA;
+}
+
+#general-controls .property {
+	width: 130px;
+	float: left;
+}
+
+#general-controls .name {
+	height: 20px;
+	margin: 0 10px 0 0;
+	line-height: 100%;
+	text-align: right;
+	float: left;
+}
+
+#general-controls .right {
+	width: 200px;
+	float: right;
+}
+
+#general-controls .ui-checkbox label {
+	height: 10px;
+}
+
+#general-controls .separator {
+	height: 40px;
+	width: 1px;
+	margin: -10px 15px;
+	background-color: #EEE;
+	float: left;
+}
+
+/*
+ * Controls
+ */
+
+#controls {
+	color: #444;
+	margin: 10px 0 0 0;
+}
+
+#controls .category {
+	height: 190px;
+	min-width: 260px;
+	margin: 10px;
+	padding: 10px;
+	border: 1px solid #CCC;
+	border-radius: 3px;
+	float: left;
+
+	box-shadow: 0 0 3px 0 #BABABA;
+	transition: all 0.25s;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+@media (min-width: 880px) {
+	#controls .category {
+		width: 30%;
+		margin-left: 1.66%;
+		margin-right: 1.66%;
+	}
+}
+
+@media (max-width: 879px) {
+	#controls .category {
+		width: 37%;
+		margin-left: 6.5%;
+		margin-right: 6.5%;
+	}
+}
+
+#controls .category .title {
+	width: 100%;
+	height: 30px;
+	margin: 0 0 10px 0;
+	line-height: 25px;
+
+	text-align: center;
+	color: #AAA;
+}
+
+#controls .category:hover .title {
+	color: #777;
+}
+
+#controls .category &gt; .group {
+	border: 1px solid #CCC;
+	border-radius: 2px;
+}
+
+
+/* property */
+
+#controls .property {
+	width: 250px;
+	height: 20px;
+	margin: 5px auto;
+}
+
+#controls .property .ui-input-slider {
+	margin: 0;
+	float: left;
+}
+
+#controls .property .ui-input-slider-info {
+	width: 60px;
+}
+
+#controls .property .ui-input-slider-left {
+	transition: opacity 0.15s;
+    opacity: 0;
+}
+
+#controls .property .ui-input-slider-right {
+	transition: opacity 0.15s;
+    opacity: 0;
+}
+
+#controls .property .name {
+	width: 60px;
+	height: 20px;
+	padding: 0px 10px 0px 0px;
+	text-align: right;
+	line-height: 100%;
+	float: left;
+}
+
+#controls .property .config {
+	width: 20px;
+	height: 20px;
+	float: left;
+	background: url("https://mdn.mozillademos.org/files/6021/config.png") center center no-repeat;
+	opacity: 0.5;
+}
+
+#controls .property .config:hover {
+	cursor: pointer;
+	opacity: 1;
+}
+
+#controls .ui-input-slider:hover .ui-input-slider-right {
+    opacity: 1;
+}
+
+#controls .ui-input-slider:hover .ui-input-slider-left {
+    opacity: 1;
+}
+
+#controls .property .ui-dropdown {
+	margin: 0 10px;
+	float: left;
+}
+
+
+#controls .property .ui-checkbox {
+	margin: 0 0 0 16px;
+	float: left;
+}
+
+#controls .property .ui-checkbox label {
+	height: 0.85em;
+	width: 10px;
+}
+
+/* dropdowns */
+#controls .ui-dropdown {
+	width: 50px;
+	height: 1.7em;
+	border-radius: 2px;
+}
+
+#controls .ui-dropdown-select {
+	line-height: 1.6em;
+}
+
+#controls .ui-dropdown-list {
+	top: 20px;
+}
+
+#controls .ui-dropdown-list {
+	border-width: 1px;
+	text-align: center;
+}
+
+#controls .ui-dropdown-list:hover {
+	overflow: hidden;
+}
+
+#controls .border-repeat {
+	margin: 0 0 0 16px !important;
+	width: 80px;
+}
+
+#controls .border-repeat .ui-dropdown-list {
+	height: 6.2em;
+	border-width: 1px;
+	text-align: center;
+}
+
+/* border-image-slice */
+
+
+#border-slice-control .ui-dropdown-list {
+	height: 4.3em;
+}
+
+/* border-image-width */
+
+#border-width-control .ui-dropdown-list {
+	height: 6.2em;
+}
+
+/* border-image-outset */
+
+#border-outset-control .ui-dropdown-list {
+	height: 4.3em;
+}
+
+#aditional-properties .property {
+	width: 200px;
+}
+
+#aditional-properties .ui-input-slider &gt; input {
+	width: 80px !important;
+}
+
+/* unit settings panel */
+
+#unit-settings {
+	padding: 10px;
+	position: absolute;
+
+	background: #FFF;
+
+	font-size: 12px;
+	border-radius: 3px;
+	border: 1px solid #CCC;
+	text-align: center;
+	color: #555;
+
+	position: absolute;
+	z-index: 1000;
+
+	box-shadow: 0 0 3px 0 #BABABA;
+	transition: all 0.25s;
+}
+
+#unit-settings .title {
+	width: 100%;
+	margin: -5px auto 0;
+
+	color: #666;
+	font-size: 14px;
+	font-weight: bold;
+	line-height: 25px;
+	border-bottom: 1px solid #E5E5E5;
+}
+
+#unit-settings .ui-input-slider {
+	margin: 10px 0 0 0;
+}
+
+#unit-settings .ui-input-slider-info {
+	width: 50px;
+	line-height: 1.5em;
+}
+
+#unit-settings input {
+	font-size: 12px;
+	width: 40px !important;
+}
+
+#unit-settings .close {
+	width: 16px;
+	height: 16px;
+	background: url('https://mdn.mozillademos.org/files/6019/close.png') no-repeat center center;
+	background-size: 75%;
+
+	position: absolute;
+	top: 4px;
+	right: 4px;
+	opacity: 0.5;
+}
+
+#unit-settings .close:hover {
+	cursor: pointer;
+	opacity: 1;
+}
+
+#unit-settings[data-active='true'] {
+	opacity: 1;
+}
+
+#unit-settings[data-active='false'] {
+	opacity: 0;
+	top: -100px !important;
+}
+
+/*
+ * CSS Output Code
+ */
+
+#output {
+	padding: 10px;
+	border: 2px dashed #888 !important;
+	box-shadow: none !important;
+	border-radius: 3px;
+	overflow: hidden;
+
+	-moz-user-select: text;
+	-webkit-user-select: text;
+	-ms-user-select: text;
+	user-select: text;
+}
+
+
+@media (min-width: 880px) {
+	#output {
+		width: 63.33% !important;
+	}
+}
+
+@media (max-width: 879px) {
+	#output {
+		width: 87% !important;
+	}
+}
+
+
+#output .title {
+	width: 100%;
+	height: 30px;
+	margin: 0 0 10px 0;
+	line-height: 25px;
+
+	text-align: center;
+	color: #AAA;
+}
+
+#output .css-property {
+	width: 100%;
+	margin: 0;
+	color: #555;
+	font-size: 14px;
+	line-height: 18px;
+	float: left;
+}
+
+#output .css-property .name {
+	width: 30%;
+	font-weight: bold;
+	text-align: right;
+	float: left;
+}
+
+#output .css-property .value {
+	width: 65%;
+	padding: 0 2.5%;
+	word-break: break-all;
+	float: left;
+}
+
+</pre>
+
+<h3 id="JavaScript_Content">JavaScript Content</h3>
+
+<pre class="brush: js">'use strict';
+
+/**
+ * UI-SlidersManager
+ */
+
+var InputSliderManager = (function InputSliderManager() {
+
+	var subscribers = {};
+	var sliders = [];
+
+	var InputComponent = function InputComponent(obj) {
+		var input = document.createElement('input');
+		input.setAttribute('type', 'text');
+		input.style.width = 50 + obj.precision * 10 + 'px';
+
+		input.addEventListener('click', function(e) {
+			this.select();
+		});
+
+		input.addEventListener('change', function(e) {
+			var value = parseFloat(e.target.value);
+
+			if (isNaN(value) === true)
+				setValue(obj.topic, obj.value);
+			else
+				setValue(obj.topic, value);
+		});
+
+		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) {
+			document.removeEventListener("mousemove", sliderMotion);
+			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("mouseup", slideEnd);
+			document.addEventListener("mousemove", sliderMotion);
+		});
+
+		var slideEnd = function slideEnd(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		= parseFloat(node.getAttribute('data-min'));
+		var max		= parseFloat(node.getAttribute('data-max'));
+		var step	= parseFloat(node.getAttribute('data-step'));
+		var value	= parseFloat(node.getAttribute('data-value'));
+		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;
+		var precision = node.getAttribute('data-precision') | 0;
+
+		this.min = isNaN(min) ? 0 : min;
+		this.max = isNaN(max) ? 100 : max;
+		this.precision = precision &gt;= 0 ? precision : 0;
+		this.step = step &lt; 0 || isNaN(step) ? 1 : step.toFixed(precision);
+		this.topic = topic;
+		this.node = node;
+		this.unit = unit === null ? '' : unit;
+		this.sensivity = sensivity &gt; 0 ? sensivity : 5;
+		value = isNaN(value) ? this.min : value;
+
+		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);
+
+		this.input = input;
+		sliders[topic] = this;
+		setValue(topic, value);
+	};
+
+	InputSlider.prototype.setInputValue = function setInputValue() {
+		this.input.value = this.value.toFixed(this.precision) + this.unit;
+	};
+
+	var setValue = function setValue(topic, value, send_notify) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		value = parseFloat(value.toFixed(slider.precision));
+
+		if (value &gt; slider.max) value = slider.max;
+		if (value &lt; slider.min)	value = slider.min;
+
+		slider.value = value;
+		slider.node.setAttribute('data-value', value);
+
+		slider.setInputValue();
+
+		if (send_notify === false)
+			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 setStep = function setStep(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.step = parseFloat(value);
+		setValue(topic, slider.value);
+	};
+
+	var setPrecision = function setPrecision(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		value = value | 0;
+		slider.precision = value;
+
+		var step = parseFloat(slider.step.toFixed(value));
+		if (step === 0)
+			slider.step = 1 / Math.pow(10, value);
+
+		setValue(topic, slider.value);
+	};
+
+	var setSensivity = function setSensivity(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		value = value | 0;
+
+		slider.sensivity = value &gt; 0 ? value : 5;
+	};
+
+	var getNode =  function getNode(topic) {
+		return sliders[topic].node;
+	};
+
+	var getPrecision =  function getPrecision(topic) {
+		return sliders[topic].precision;
+	};
+
+	var getStep =  function getStep(topic) {
+		return sliders[topic].step;
+	};
+
+	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() {
+		if (subscribers[this.topic] === undefined)
+			return;
+		for (var i = 0; i &lt; subscribers[this.topic].length; i++)
+			subscribers[this.topic][i](this.value);
+	};
+
+	var createSlider = function createSlider(topic, label) {
+		var slider = document.createElement('div');
+		slider.className = 'ui-input-slider';
+		slider.setAttribute('data-topic', topic);
+
+		if (label !== undefined)
+			slider.setAttribute('data-info', label);
+
+		new InputSlider(slider);
+		return slider;
+	};
+
+	var init = function init() {
+		var elem = document.querySelectorAll('.ui-input-slider');
+		var size = elem.length;
+		for (var i = 0; i &lt; size; i++)
+			new InputSlider(elem[i]);
+	};
+
+	return {
+		init : init,
+		setMax : setMax,
+		setMin : setMin,
+		setUnit : setUnit,
+		setStep : setStep,
+		getNode : getNode,
+		getStep : getStep,
+		setValue : setValue,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe,
+		setPrecision : setPrecision,
+		setSensivity : setSensivity,
+		getPrecision : getPrecision,
+		createSlider : createSlider,
+	};
+
+})();
+
+
+/**
+ * UI-DropDown Select
+ */
+
+var DropDownManager = (function DropdownManager() {
+
+	var subscribers = {};
+	var dropdowns = [];
+	var active = null;
+
+	var visbility = ["hidden", "visible"];
+
+
+	var DropDown = function DropDown(node) {
+		var topic = node.getAttribute('data-topic');
+		var label = node.getAttribute('data-label');
+		var selected = node.getAttribute('data-selected') | 0;
+
+		var select = document.createElement('div');
+		var list = document.createElement('div');
+		var uval = 0;
+		var option = null;
+		var option_value = null;
+
+		list.className = 'ui-dropdown-list';
+		select.className = 'ui-dropdown-select';
+
+		while (node.firstElementChild !== null) {
+			option = node.firstElementChild;
+			option_value = option.getAttribute('data-value');
+
+			if (option_value === null)
+				option.setAttribute('data-value', uval);
+
+			list.appendChild(node.firstElementChild);
+			uval++;
+		}
+
+		node.appendChild(select);
+		node.appendChild(list);
+
+		select.onclick = this.toggle.bind(this);
+		list.onclick = this.updateValue.bind(this);
+		document.addEventListener('click', clickOut);
+
+		this.state = 0;
+		this.time = 0;
+		this.dropmenu = list;
+		this.select = select;
+		this.toggle(false);
+		this.value = {};
+		this.topic = topic;
+
+		if (label)
+			select.textContent = label;
+		else
+			this.setNodeValue(list.children[selected]);
+
+		dropdowns[topic] = this;
+
+	};
+
+	DropDown.prototype.toggle = function toggle(state) {
+		if (typeof(state) === 'boolean')
+			this.state = state === false ? 0 : 1;
+		else
+			this.state = 1 ^ this.state;
+
+		if (active !== this) {
+			if (active)
+				active.toggle(false);
+			active = this;
+		}
+
+		if (this.state === 0)
+			this.dropmenu.setAttribute('data-hidden', 'true');
+		else
+			this.dropmenu.removeAttribute('data-hidden');
+
+	};
+
+	var clickOut = function clickOut(e) {
+		if (active.state === 0 ||
+			e.target === active.dropmenu ||
+			e.target === active.select)
+			return;
+
+		active.toggle(false);
+	};
+
+	DropDown.prototype.updateValue = function updateValue(e) {
+
+		if (Date.now() - this.time &lt; 500)
+			return;
+
+		if (e.target.className !== "ui-dropdown-list") {
+			this.setNodeValue(e.target);
+			this.toggle(false);
+		}
+
+		this.time = Date.now();
+	};
+
+	DropDown.prototype.setNodeValue = function setNodeValue(node) {
+		this.value['name'] = node.textContent;
+		this.value['value'] = node.getAttribute('data-value');
+
+		this.select.textContent = node.textContent;
+		this.select.setAttribute('data-value', this.value['value']);
+
+		notify.call(this);
+	};
+
+	var createDropDown = function createDropDown(topic, options) {
+
+		var dropdown = document.createElement('div');
+		dropdown.setAttribute('data-topic', topic);
+		dropdown.className = 'ui-dropdown';
+
+		for (var i in options) {
+			var x = document.createElement('div');
+			x.setAttribute('data-value', i);
+			x.textContent = options[i];
+			dropdown.appendChild(x);
+		}
+
+		new DropDown(dropdown);
+
+		return dropdown;
+	};
+
+	var setValue = function setValue(topic, index) {
+		if (dropdowns[topic] === undefined ||
+			index &gt;= dropdowns[topic].dropmenu.children.length)
+			return;
+
+		dropdowns[topic].setNodeValue(dropdowns[topic].dropmenu.children[index]);
+	};
+
+	var subscribe = function subscribe(topic, callback) {
+		if (subscribers[topic] === undefined)
+			subscribers[topic] = [];
+		subscribers[topic].push(callback);
+	};
+
+	var unsubscribe = function unsubscribe(topic, callback) {
+		var index = subscribers[topic].indexOf(callback);
+		subscribers[topic].splice(index, 1);
+	};
+
+	var notify = function notify() {
+		if (subscribers[this.topic] === undefined)
+			return;
+
+		for (var i in subscribers[this.topic]) {
+			subscribers[this.topic][i](this.value);
+		}
+	};
+
+	var init = function init() {
+		var elem, size;
+
+		elem = document.querySelectorAll('.ui-dropdown');
+		size = elem.length;
+		for (var i = 0; i &lt; size; i++)
+			new DropDown(elem[i]);
+
+	};
+
+	return {
+		init : init,
+		setValue : setValue,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe,
+		createDropDown : createDropDown
+	};
+
+})();
+
+
+/**
+ * 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) {
+		var obj = buttons[topic];
+		if (obj === undefined)
+			return;
+
+		obj.checkbox.checked = value;
+		notify.call(obj);
+	};
+
+	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() {
+		if (subscribers[this.topic] === undefined)
+			return;
+		for (var i = 0; i &lt; 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 &lt; size; i++)
+			new CheckBox(elem[i]);
+	};
+
+	return {
+		init : init,
+		setValue : setValue,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe
+	};
+
+})();
+
+window.addEventListener("load", function() {
+	BorderImage.init();
+});
+
+var BorderImage = (function BorderImage() {
+
+	var getElemById = document.getElementById.bind(document);
+
+	var subject;
+	var preview;
+	var guidelines = [];
+	var positions = ['top', 'right', 'bottom', 'left'];
+
+	var makeDraggable = function makeDraggable(elem) {
+
+		var offsetTop;
+		var offsetLeft;
+
+		elem.setAttribute('data-draggable', 'true');
+
+		var dragStart = function dragStart(e) {
+			if (e.target.getAttribute('data-draggable') !== 'true' ||
+				e.target !== elem || e.button !== 0)
+				return;
+
+			offsetLeft = e.clientX - elem.offsetLeft;
+			offsetTop = e.clientY - elem.offsetTop;
+
+			document.addEventListener('mousemove', mouseDrag);
+			document.addEventListener('mouseup', dragEnd);
+		};
+
+		var dragEnd = function dragEnd(e) {
+			if (e.button !== 0)
+				return;
+
+			document.removeEventListener('mousemove', mouseDrag);
+			document.removeEventListener('mouseup', dragEnd);
+		};
+
+		var mouseDrag = function mouseDrag(e) {
+
+			elem.style.left = e.clientX - offsetLeft + 'px';
+			elem.style.top = e.clientY - offsetTop + 'px';
+		};
+
+		elem.addEventListener('mousedown', dragStart, false);
+	};
+
+	var PreviewControl = function PreviewControl() {
+
+		var dragging = false;
+		var valueX = null;
+		var valueY = null;
+
+		var dragStart = function dragStart(e) {
+			if (e.button !== 0)
+				return;
+
+			valueX = e.clientX - preview.clientWidth;
+			valueY = e.clientY - preview.clientHeight;
+			dragging = true;
+
+			document.addEventListener('mousemove', mouseDrag);
+		};
+
+		var dragEnd = function dragEnd(e) {
+			if (e.button !== 0 || dragging === false)
+				return;
+
+			document.removeEventListener('mousemove', mouseDrag);
+			dragging = false;
+		};
+
+		var mouseDrag = function mouseDrag(e) {
+			InputSliderManager.setValue('preview-width', e.clientX - valueX);
+			InputSliderManager.setValue('preview-height', e.clientY - valueY);
+		};
+
+		var init = function init() {
+
+			makeDraggable(preview);
+			makeDraggable(subject);
+
+			var handle = document.createElement('div');
+			handle.className = 'resize-handle';
+
+			handle.addEventListener('mousedown', dragStart);
+			document.addEventListener('mouseup', dragEnd);
+
+			preview.appendChild(handle);
+
+		};
+
+		return {
+			init: init
+		};
+
+	}();
+
+	var ImageReader = (function ImageReader() {
+
+		var fReader = new FileReader();
+		var browse = document.createElement('input');
+
+		var loadImage = function loadImage(e) {
+			if (browse.files.length === 0)
+				return;
+
+			var file = browse.files[0];
+
+			if (file.type.slice(0, 5) !== 'image')
+				return;
+
+			fReader.readAsDataURL(file);
+
+			return false;
+		};
+
+		fReader.onload = function(e) {
+			ImageControl.loadRemoteImage(e.target.result);
+		};
+
+		var load = function load() {
+			browse.click();
+		};
+
+		browse.setAttribute('type', 'file');
+		browse.style.display = 'none';
+		browse.onchange = loadImage;
+
+		return {
+			load: load
+		};
+
+	})();
+
+	var ImageControl = (function ImageControl() {
+
+		var scale = 0.5;
+		var imgSource = new Image();
+		var imgState = null;
+		var selected = null;
+
+
+		var topics = ['slice', 'width', 'outset'];
+		var properties = {};
+		properties['border1'] = {
+			fill			: false,
+
+			slice_values	: [27, 27, 27, 27],
+			width_values	: [20, 20, 20, 20],
+			outset_values	: [0, 0, 0, 0],
+
+			slice_units		: [0, 0, 0, 0],
+			width_units		: [0, 0, 0, 0],
+			outset_units	: [0, 0, 0, 0],
+
+			repeat			: [1, 1],
+			size			: [300, 200],
+			preview_area	: 400
+		};
+
+		properties['border2'] = {
+			fill			: false,
+
+			slice_values	: [33, 33, 33, 33],
+			width_values	: [1.5, 1.5, 1.5, 1.5],
+			outset_values	: [0, 0, 0, 0],
+
+			slice_units		: [1, 1, 1, 1],
+			width_units		: [2, 2, 2, 2],
+			outset_units	: [0, 0, 0, 0],
+
+			repeat			: [2, 2],
+			size			: [300, 200],
+			preview_area	: 400
+		};
+
+		properties['border3'] = {
+			fill			: true,
+
+			slice_values	: [15, 15, 15, 15],
+			width_values	: [10, 10, 10, 10],
+			outset_values	: [0, 0, 0, 0],
+
+			slice_units		: [0, 0, 0, 0],
+			width_units		: [0, 0, 0, 0],
+			outset_units	: [0, 0, 0, 0],
+
+			repeat			: [2, 2],
+			size			: [300, 200],
+			preview_area	: 400
+		};
+
+		properties['border4'] = {
+			fill			: false,
+
+			slice_values	: [13, 13, 13, 13],
+			width_values	: [13, 13, 13, 13],
+			outset_values	: [13, 13, 13, 13],
+
+			slice_units		: [0, 0, 0, 0],
+			width_units		: [0, 0, 0, 0],
+			outset_units	: [0, 0, 0, 0],
+
+			repeat			: [0, 0],
+			size			: [300, 200],
+			preview_area	: 400
+		};
+
+		properties['border5'] = {
+			fill			: false,
+
+			slice_values	: [0, 12, 0, 12],
+			width_values	: [0, 12, 0, 12],
+			outset_values	: [0, 0, 0, 0],
+
+			slice_units		: [0, 0, 0, 0],
+			width_units		: [0, 0, 0, 0],
+			outset_units	: [0, 0, 0, 0],
+
+			repeat			: [0, 0],
+			size			: [300, 200],
+			preview_area	: 400,
+		};
+
+		properties['border6'] = {
+			fill			: false,
+
+			slice_values	: [42, 42, 42, 42],
+			width_values	: [42, 42, 42, 42],
+			outset_values	: [0, 0, 0, 0],
+
+			slice_units		: [0, 0, 0, 0],
+			width_units		: [0, 0, 0, 0],
+			outset_units	: [0, 0, 0, 0],
+
+			repeat			: [2, 2],
+			size			: [350, 350],
+			preview_area	: 500,
+		};
+
+
+		var loadLocalImage = function loadLocalImage(source) {
+			var location = "images/" + source;
+			imgSource.src = location;
+		};
+
+		var loadRemoteImage = function loadRemoteImage(source) {
+			imgSource.src = source;
+			if (selected)
+				selected.removeAttribute('selected');
+			Tool.setOutputCSS('source', 'url("' + source + '")');
+		};
+
+		var pickImage = function pickImage(e) {
+			if (e.target.className === 'image') {
+				selected = e.target;
+				selected.setAttribute('selected', 'true');
+				loadRemoteImage(e.target.src);
+				imgState = e.target.getAttribute('data-stateID');
+			}
+		};
+
+		var loadImageState = function loadImageState(stateID) {
+			if (properties[stateID] === undefined)
+				return;
+
+			var prop = properties[stateID];
+			var topic;
+			var unit_array;
+			var value_array;
+
+			for (var i in topics) {
+				for (var j=0; j&lt;4; j++) {
+					topic = topics[i] + '-' + positions[j];
+					unit_array = topics[i] + '_units';
+					value_array = topics[i] + '_values';
+					InputSliderManager.setValue(topic, prop[value_array][j]);
+					DropDownManager.setValue(topic, prop[unit_array][j]);
+				}
+			}
+
+			ButtonManager.setValue('slice-fill', prop['fill']);
+			DropDownManager.setValue('image-repeat-X', prop['repeat'][0]);
+			DropDownManager.setValue('image-repeat-Y', prop['repeat'][1]);
+			InputSliderManager.setValue('preview-width', prop['size'][0]);
+			InputSliderManager.setValue('preview-height', prop['size'][1]);
+			InputSliderManager.setValue('preview-area-height', prop['preview_area']);
+		};
+
+		var update = function update() {
+			scale =  Math.min(300, (30000 / this.width) | 0);
+			setScale(scale);
+			InputSliderManager.setValue('scale', scale, false);
+
+			subject.style.backgroundImage = 'url("' + this.src + '")';
+			preview.style.borderImageSource = 'url("' + this.src + '")';
+
+			guidelines['slice-top'].setMax(this.height);
+			guidelines['slice-right'].setMax(this.width);
+			guidelines['slice-bottom'].setMax(this.height);
+			guidelines['slice-left'].setMax(this.width);
+
+			if (imgState)
+				loadImageState(imgState);
+		};
+
+		var setScale = function setScale(value) {
+			scale = value;
+			var w = imgSource.width * scale / 100 | 0;
+			var h = imgSource.height * scale / 100 | 0;
+			subject.style.width = w + 'px';
+			subject.style.height = h + 'px';
+
+			for (var i = 0; i &lt; positions.length; i++)
+				guidelines['slice-' + positions[i]].updateGuidelinePos();
+		};
+
+		var getScale = function getScale() {
+			return scale/100;
+		};
+
+		var toggleGallery = function toggleGallery() {
+			var gallery = getElemById('image-gallery');
+			var button  = getElemById('toggle-gallery');
+			var state = 1;
+			button.addEventListener('click', function() {
+				state = 1 ^ state;
+				if (state === 0) {
+					gallery.setAttribute('data-collapsed', 'true');
+					button.setAttribute('data-action', 'show');
+				}
+				else {
+					gallery.removeAttribute('data-collapsed');
+					button.setAttribute('data-action', 'hide');
+				}
+			});
+		};
+
+		var init = function init() {
+			var gallery = getElemById('image-gallery');
+			var browse = getElemById('load-image');
+			var remote = getElemById('remote-url');
+			var load_remote = getElemById('load-remote');
+
+			remote.addEventListener('change', function(){
+				loadRemoteImage(this.value);
+			});
+
+			load_remote.addEventListener('click', function(){
+				loadRemoteImage(remote.value);
+			});
+
+			browse.addEventListener('click', ImageReader.load);
+			gallery.addEventListener('click', pickImage);
+			imgSource.addEventListener('load', update);
+
+			InputSliderManager.subscribe('scale', setScale);
+			InputSliderManager.setValue('scale', scale);
+			imgState = 'border1';
+			loadRemoteImage('https://mdn.mozillademos.org/files/6007/border-image-1.png');
+			toggleGallery();
+		};
+
+		return {
+			init: init,
+			getScale : getScale,
+			loadRemoteImage: loadRemoteImage
+		};
+
+	})();
+
+	var GuideLine = function GuideLine(node) {
+		var topic = node.getAttribute('data-topic');
+		var axis = node.getAttribute('data-axis');
+
+		this.node = node;
+		this.topic = topic;
+		this.axis = axis;
+		this.info = topic.split('-')[1];
+
+		this.position = 0;
+		this.value = 0;
+		this.unit = 0;
+		this.max = 0;
+		this.pos = positions.indexOf(this.info);
+
+		guidelines[topic] = this;
+
+		var relative_container = document.createElement('div');
+		var tooltip = document.createElement('div');
+		var tooltip2 = document.createElement('div');
+
+		tooltip.className = 'tooltip';
+		tooltip.setAttribute('data-info', this.info);
+
+		tooltip2.className = 'tooltip2';
+		tooltip2.textContent = this.info;
+		tooltip2.setAttribute('data-info', this.info);
+
+		this.tooltip = tooltip;
+
+		relative_container.appendChild(tooltip);
+		relative_container.appendChild(tooltip2);
+		node.appendChild(relative_container);
+
+		var startX = 0;
+		var startY = 0;
+		var start = 0;
+
+		var startDrag = function startDrag(e) {
+			startX = e.clientX;
+			startY = e.clientY;
+			start = guidelines[topic].position;
+			document.body.setAttribute('data-move', axis);
+			relative_container.setAttribute('data-active', '');
+			node.setAttribute('data-active', '');
+
+			document.addEventListener('mousemove', updateGuideline);
+			document.addEventListener('mouseup', endDrag);
+		};
+
+		var endDrag = function endDrag() {
+			document.body.removeAttribute('data-move');
+			relative_container.removeAttribute('data-active');
+			node.removeAttribute('data-active');
+
+			document.removeEventListener('mousemove', updateGuideline);
+		};
+
+		var updateGuideline = function updateGuideline(e) {
+			var value;
+			if (topic === 'slice-top')
+				value = e.clientY - startY + start;
+
+			if (topic === 'slice-right')
+				value = startX - e.clientX + start;
+
+			if (topic === 'slice-bottom')
+				value = startY - e.clientY + start;
+
+			if (topic === 'slice-left')
+				value = e.clientX - startX + start;
+
+			if (this.unit === 0)
+				InputSliderManager.setValue(topic, value * 1 / ImageControl.getScale() | 0);
+			else {
+				InputSliderManager.setValue(topic, (value * 100 / (this.max * ImageControl.getScale())) | 0);
+			}
+
+		}.bind(this);
+
+		node.addEventListener("mousedown", startDrag);
+
+		InputSliderManager.subscribe(topic, this.setPosition.bind(this));
+		InputSliderManager.setValue(topic, this.position);
+	};
+
+
+	GuideLine.prototype.updateGuidelinePos = function updateGuidelinePos() {
+		if (this.unit === 0)
+			this.position = this.value * ImageControl.getScale() | 0;
+		else
+			this.position = this.value * this.max * ImageControl.getScale() / 100 | 0;
+
+		this.node.style[this.info] = this.position + 'px';
+	};
+
+	GuideLine.prototype.setPosition = function setPosition(value) {
+		this.value = value;
+		this.tooltip.textContent = value;
+		this.updateGuidelinePos();
+		Tool.setBorderSlice(this.pos, value);
+	};
+
+	GuideLine.prototype.setMax = function setMax(max) {
+		this.max = max;
+		this.updateLimit();
+	};
+
+	GuideLine.prototype.updateLimit = function updateLimit() {
+		if (this.unit === 1)
+			InputSliderManager.setMax(this.topic, 100);
+		else
+			InputSliderManager.setMax(this.topic, this.max);
+	};
+
+	GuideLine.prototype.setUnit = function setUnit(type) {
+		if (type === '%')	this.unit = 1;
+		if (type === '')	this.unit = 0;
+		this.updateLimit();
+	};
+
+	/*
+	 * Unit panel
+	 */
+	var UnitPanel = (function UnitPanel () {
+
+		var panel;
+		var title;
+		var precision;
+		var step;
+		var unit_topic = null; // settings are made for this topic
+		var step_option = [1, 0.1, 0.01];
+
+		var updatePrecision = function updatePrecision(value) {
+			InputSliderManager.setPrecision('unit-step', value);
+			InputSliderManager.setStep('unit-step', step_option[value]);
+			InputSliderManager.setMin('unit-step', step_option[value]);
+
+			if (unit_topic)
+				InputSliderManager.setPrecision(unit_topic, value);
+		};
+
+		var updateUnitSettings = function updateUnitSettings(value) {
+			if (unit_topic)
+				InputSliderManager.setStep(unit_topic, value);
+		};
+
+		var show = function show(e) {
+			var topic = e.target.getAttribute('data-topic');
+			var precision = InputSliderManager.getPrecision(topic);
+			var step = InputSliderManager.getStep(topic);
+
+			unit_topic = topic;
+			title.textContent = topic;
+
+			panel.setAttribute('data-active', 'true');
+			panel.style.top = e.target.offsetTop - 40 + 'px';
+			panel.style.left = e.target.offsetLeft + 30 + 'px';
+
+			InputSliderManager.setValue('unit-precision', precision);
+			InputSliderManager.setValue('unit-step', step);
+		};
+
+		var init = function init() {
+			panel = document.createElement('div');
+			title = document.createElement('div');
+			var close = document.createElement('div');
+
+			step = InputSliderManager.createSlider('unit-step', 'step');
+			precision = InputSliderManager.createSlider('unit-precision', 'precision');
+
+			InputSliderManager.setStep('unit-precision', 1);
+			InputSliderManager.setMax('unit-precision', 2);
+			InputSliderManager.setValue('unit-precision', 2);
+			InputSliderManager.setSensivity('unit-precision', 20);
+
+			InputSliderManager.setValue('unit-step', 1);
+			InputSliderManager.setStep('unit-step', 0.01);
+			InputSliderManager.setPrecision('unit-step', 2);
+
+			InputSliderManager.subscribe('unit-precision', updatePrecision);
+			InputSliderManager.subscribe('unit-step', updateUnitSettings);
+
+			close.addEventListener('click', function () {
+				panel.setAttribute('data-active', 'false');
+			});
+
+			title.textContent = 'Properties';
+			title.className = 'title';
+			close.className = 'close';
+			panel.id = 'unit-settings';
+			panel.setAttribute('data-active', 'false');
+			panel.appendChild(title);
+			panel.appendChild(precision);
+			panel.appendChild(step);
+			panel.appendChild(close);
+			document.body.appendChild(panel);
+		};
+
+		return {
+			init : init,
+			show : show
+		};
+
+	})();
+
+	/**
+	 * Tool Manager
+	 */
+	var Tool = (function Tool() {
+		var preview_area;
+		var dropdown_unit_options = [
+			{ '' : '--', '%' : '%'},
+			{ 'px' : 'px', '%' : '%', 'em' : 'em'},
+			{ 'px' : 'px', 'em' : 'em'},
+		];
+
+		var border_slice = [];
+		var border_width = [];
+		var border_outset = [];
+
+		var border_slice_values = [];
+		var border_width_values = [];
+		var border_outset_values = [];
+
+		var border_slice_units = ['', '', '', ''];
+		var border_width_units = ['px', 'px', 'px', 'px'];
+		var border_outset_units = ['px', 'px', 'px', 'px'];
+
+		var border_fill = false;
+		var border_repeat = ['round', 'round'];
+		var CSS_code = {
+			'source' : null,
+			'slice' : null,
+			'width' : null,
+			'outset' : null,
+			'repeat' : null
+		};
+
+		var setBorderSlice = function setBorderSlice(positionID, value) {
+			border_slice[positionID] = value + border_slice_units[positionID];
+			updateBorderSlice();
+		};
+
+		var updateBorderSlice = function updateBorderSlice() {
+			var value = border_slice.join(' ');
+			if (border_fill === true)
+				value += ' fill';
+
+			preview.style.borderImageSlice = value;
+			setOutputCSS('slice', value);
+		};
+
+		var setBorderFill = function setBorderFill(value) {
+			border_fill = value;
+			var bimgslice = border_slice.join(' ');;
+			if (value === true)
+				bimgslice += ' fill';
+
+			preview.style.borderImageSlice = bimgslice;
+		};
+
+		var updateBorderWidth = function updateBorderWidth() {
+			var value = border_width.join(' ');
+			preview.style.borderImageWidth = value;
+			setOutputCSS('width', value);
+		};
+
+		var updateBorderOutset = function updateBorderOutset() {
+			var value = border_outset.join(' ');
+			preview.style.borderImageOutset = border_outset.join(' ');
+			setOutputCSS('outset', value);
+		};
+
+		var setBorderRepeat = function setBorderRepeat(obj) {
+			border_repeat[obj.value] = obj.name;
+			var value = border_repeat.join(' ');
+			preview.style.borderImageRepeat = value;
+			setOutputCSS('repeat', value);
+		};
+
+		var setOutputCSS = function setOutputCSS(topic, value) {
+			CSS_code[topic].textContent = value + ';';
+		};
+
+		var setPreviewFontSize = function setPreviewFontSize(value) {
+			preview.style.fontSize = value + 'px';
+		};
+
+		var setPreviewWidth = function setPreviewWidth(value) {
+			preview.style.width = value + 'px';
+		};
+
+		var setPreviewHeight = function setPreviewHeight(value) {
+			preview.style.height = value + 'px';
+		};
+
+		var setPreviewAreaHeight = function setPreviewAreaHeight(value) {
+			preview_area.style.height = value + 'px';
+		};
+
+		var updateDragOption = function updateDragOption(value) {
+			if (value === true)
+				subject.setAttribute('data-draggable', 'true');
+			else
+				subject.removeAttribute('data-draggable');
+		};
+
+		var createProperty = function createProperty(topic, labelID, optionsID) {
+
+			var slider = InputSliderManager.createSlider(topic, positions[labelID]);
+			var dropdown = DropDownManager.createDropDown(topic, dropdown_unit_options[optionsID]);
+
+			InputSliderManager.setSensivity(topic, 3);
+			InputSliderManager.setPrecision(topic, 1);
+
+			var property = document.createElement('div');
+			var config = document.createElement('div');
+
+			property.className = 'property';
+			config.className = 'config';
+			config.setAttribute('data-topic', topic);
+			config.addEventListener('click', UnitPanel.show);
+
+			property.appendChild(slider);
+			property.appendChild(dropdown);
+			property.appendChild(config);
+
+			return property;
+		};
+
+		var initBorderSliceControls = function initBorderSliceControls() {
+			var container = getElemById('border-slice-control');
+
+			var listenForChanges = function listenForChanges(topic, id) {
+				InputSliderManager.subscribe(topic, function(value) {
+					border_slice_values[id] = value;
+					border_slice[id] = value + border_slice_units[id];
+					updateBorderSlice();
+				});
+
+				DropDownManager.subscribe(topic, function(obj) {
+					guidelines[topic].setUnit(obj.value);
+					border_slice_units[id] = obj.value;
+					border_slice[id] = border_slice_values[id] + obj.value;
+					updateBorderSlice();
+				});
+			};
+
+			for (var i = 0; i &lt; positions.length; i++) {
+				var topic = 'slice-' + positions[i];
+				var property = createProperty(topic, i, 0);
+				listenForChanges(topic, i);
+
+				container.appendChild(property);
+			}
+
+			container.appendChild(container.children[1]);
+
+		};
+
+		var initBorderWidthControls = function initBorderWidthControls() {
+			var container = getElemById('border-width-control');
+
+			var listenForChanges = function listenForChanges(topic, id) {
+				InputSliderManager.subscribe(topic, function(value) {
+					border_width_values[id] = value;
+					border_width[id] = value + border_width_units[id];
+					updateBorderWidth();
+				});
+
+				DropDownManager.subscribe(topic, function(obj) {
+					if (obj.value === '%')
+						InputSliderManager.setMax(topic, 100);
+					else
+						InputSliderManager.setMax(topic, 1000);
+
+					border_width_units[id] = obj.value;
+					border_width[id] = border_width_values[id] + obj.value;
+					updateBorderWidth();
+				});
+			};
+
+			for (var i = 0; i &lt; positions.length; i++) {
+				var topic = 'width-' + positions[i];
+				var property = createProperty(topic, i, 1);
+				InputSliderManager.setMax(topic, 1000);
+				listenForChanges(topic, i);
+
+				container.appendChild(property);
+			}
+		};
+
+		var initBorderOutsetControls = function initBorderOutsetControls() {
+
+			var container = getElemById('border-outset-control');
+
+			var listenForChanges = function listenForChanges(topic, id) {
+				InputSliderManager.subscribe(topic, function(value) {
+					border_outset_values[id] = value;
+					border_outset[id] = value + border_outset_units[id];
+					updateBorderOutset();
+				});
+
+				DropDownManager.subscribe(topic, function(obj) {
+					border_outset_units[id] = obj.value;
+					border_outset[id] = border_outset_values[id] + obj.value;
+					updateBorderOutset();
+				});
+			};
+
+			for (var i = 0; i &lt; positions.length; i++) {
+				var topic = 'outset-' + positions[i];
+				var property = createProperty(topic, i, 2);
+				InputSliderManager.setMax(topic, 1000);
+				listenForChanges(topic, i);
+
+				container.appendChild(property);
+			}
+		};
+
+		var init = function init() {
+
+			var gallery =
+			subject = getElemById('subject');
+			preview = getElemById("preview");
+			preview_area = getElemById("preview_section");
+
+
+			CSS_code['source'] = getElemById("out-border-source");
+			CSS_code['slice'] = getElemById("out-border-slice");
+			CSS_code['width'] = getElemById("out-border-width");
+			CSS_code['outset'] = getElemById("out-border-outset");
+			CSS_code['repeat'] = getElemById("out-border-repeat");
+
+			initBorderSliceControls();
+			initBorderWidthControls();
+			initBorderOutsetControls();
+
+			var elem = document.querySelectorAll('.guideline');
+			var size = elem.length;
+			for (var i = 0; i &lt; size; i++)
+				new GuideLine(elem[i]);
+
+			PreviewControl.init();
+
+			ButtonManager.subscribe('slice-fill',setBorderFill);
+			ButtonManager.subscribe('drag-subject', updateDragOption);
+			ButtonManager.setValue('drag-subject', false);
+
+			DropDownManager.subscribe('image-repeat-X', setBorderRepeat);
+			DropDownManager.subscribe('image-repeat-Y', setBorderRepeat);
+
+			InputSliderManager.subscribe('preview-area-height', setPreviewAreaHeight);
+			InputSliderManager.subscribe('preview-width', setPreviewWidth);
+			InputSliderManager.subscribe('preview-height', setPreviewHeight);
+			InputSliderManager.subscribe('font-size', setPreviewFontSize);
+			InputSliderManager.setValue('preview-width', 300);
+			InputSliderManager.setValue('preview-height', 200);
+		};
+
+		return {
+			init: init,
+			setOutputCSS: setOutputCSS,
+			setBorderSlice: setBorderSlice
+		};
+
+	})();
+
+	/**
+	 * Init Tool
+	 */
+	var init = function init() {
+		InputSliderManager.init();
+		DropDownManager.init();
+		ButtonManager.init();
+		UnitPanel.init();
+		Tool.init();
+		ImageControl.init();
+	};
+
+	return {
+		init : init
+	};
+
+})();
+
+</pre>
+</div>
+
+<div>{{ EmbedLiveSample('Border_Image_Generator', '100%', '1270px') }}</div>
diff --git a/files/ko/web/css/css_backgrounds_and_borders/border-radius_generator/index.html b/files/ko/web/css/css_backgrounds_and_borders/border-radius_generator/index.html
new file mode 100644
index 0000000000..c42e523de9
--- /dev/null
+++ b/files/ko/web/css/css_backgrounds_and_borders/border-radius_generator/index.html
@@ -0,0 +1,1602 @@
+---
+title: Border-radius 생성기
+slug: Web/CSS/CSS_Backgrounds_and_Borders/Border-radius_generator
+tags:
+  - CSS
+  - CSS Borders
+  - Tools
+translation_of: Web/CSS/CSS_Background_and_Borders/Border-radius_generator
+original_slug: Web/CSS/CSS_Background_and_Borders/Border-radius_generator
+---
+<p>이 도구를 사용해 CSS3 {{cssxref("border-radius")}} 값을 생성할 수 있습니다.</p>
+
+<div class="hidden">
+<h2 id="border-radius-generator" name="border-radius-generator">border-radius</h2>
+
+<h3 id="HTML_Content">HTML Content</h3>
+
+<pre class="brush: html">&lt;div id="container"&gt;
+    &lt;div class="group section"&gt;
+        &lt;div id="preview" class="col span_12"&gt;
+            &lt;div id="subject"&gt;
+                &lt;div id="top-left" class="radius-container"
+                    data-X="left" data-Y="top"&gt;
+                &lt;/div&gt;
+                &lt;div id="top-right" class="radius-container"
+                    data-X="right" data-Y="top"&gt;
+                &lt;/div&gt;
+                &lt;div id="bottom-right" class="radius-container"
+                    data-X="right" data-Y="bottom"&gt;
+                &lt;/div&gt;
+                &lt;div id="bottom-left" class="radius-container"
+                    data-X="left" data-Y="bottom"&gt;
+                &lt;/div&gt;
+
+                &lt;div id="radius-ui-sliders"&gt;
+                    &lt;div id="tlr" class="ui-input-slider" data-topic="top-left"
+                         data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
+
+                    &lt;div id="tlw" class="ui-input-slider" data-topic="top-left-w"
+                         data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
+
+                    &lt;div id="tlh" class="ui-input-slider" data-topic="top-left-h"
+                        data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
+
+                    &lt;div id="trr" class="ui-input-slider" data-topic="top-right"
+                         data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
+
+                    &lt;div id="trw" class="ui-input-slider" data-topic="top-right-w"
+                         data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
+
+                    &lt;div id="trh" class="ui-input-slider" data-topic="top-right-h"
+                        data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
+
+                    &lt;div id="brr" class="ui-input-slider" data-topic="bottom-right"
+                         data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
+
+                    &lt;div id="brw" class="ui-input-slider" data-topic="bottom-right-w"
+                         data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
+
+                    &lt;div id="brh" class="ui-input-slider" data-topic="bottom-right-h"
+                        data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
+
+                    &lt;div id="blr" class="ui-input-slider" data-topic="bottom-left"
+                         data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
+
+                    &lt;div id="blw" class="ui-input-slider" data-topic="bottom-left-w"
+                         data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
+
+                    &lt;div id="blh" class="ui-input-slider" data-topic="bottom-left-h"
+                        data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
+                &lt;/div&gt;
+            &lt;/div&gt;
+        &lt;/div&gt;
+    &lt;/div&gt;
+    &lt;div id="controls" class="group section"&gt;
+
+        &lt;div class="group section"&gt;
+            &lt;div id="dimensions"&gt;
+                &lt;div class="ui-input-slider" data-topic="width" data-info="width"
+                     data-unit=" px" data-min="150" data-max="700" data-sensivity="1"&gt;&lt;/div&gt;
+
+                &lt;div class="ui-input-slider" data-topic="height" data-info="height"
+                    data-unit=" px" data-min="75" data-max="350" data-sensivity="1"&gt;&lt;/div&gt;
+            &lt;/div&gt;
+
+            &lt;div id="output"&gt;&lt;/div&gt;
+        &lt;/div&gt;
+
+        &lt;div class="group section"&gt;
+            &lt;div id="radius-lock"&gt;
+                &lt;div class="info"&gt; rounded corner &lt;/div&gt;
+                &lt;div class="ui-checkbox" data-topic='top-left'&gt;&lt;/div&gt;
+                &lt;div class="ui-checkbox" data-topic='top-right'&gt;&lt;/div&gt;
+                &lt;div class="ui-checkbox" data-topic='bottom-right'&gt;&lt;/div&gt;
+                &lt;div class="ui-checkbox" data-topic='bottom-left'&gt;&lt;/div&gt;
+            &lt;/div&gt;
+
+            &lt;div id="unit-selection"&gt;
+                &lt;div class="info"&gt; select border units &lt;/div&gt;
+            &lt;/div&gt;
+        &lt;/div&gt;
+
+    &lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="CSS_Content">CSS Content</h3>
+
+<pre class="brush: css">/*  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 &gt; 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 &gt; input {
+ 	display: none;
+}
+
+.ui-checkbox &gt; 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 &gt; label:hover {
+	cursor: pointer;
+}
+
+.ui-checkbox &gt; 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 &gt; 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;
+}
+
+
+</pre>
+
+<h3 id="JavaScript_Content">JavaScript Content</h3>
+
+<pre class="brush: js"><code class="language-js">'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 &gt; 0 ? max : 100;
+		this.step = step === 0 ? 1 : step;
+		this.topic = topic;
+		this.node = node;
+		this.unit = unit;
+		this.sensivity = sensivity &gt; 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 &gt; slider.max) value = slider.max;
+		if (value &lt; slider.min)	value = slider.min;
+
+		slider.value = value;
+		slider.node.setAttribute('data-value', value);
+
+		if (send_notify !== undefined &amp;&amp; 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 &lt; 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 &lt; 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 &lt; 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' &amp;&amp; y == 'top') handle.className = 'handle handle-top-left'
+		if (x === 'right' &amp;&amp; y == 'top') handle.className = 'handle handle-top-right';
+		if (x === 'right' &amp;&amp; y == 'bottom') handle.className = 'handle handle-bottom-right';
+		if (x === 'left' &amp;&amp; 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 &amp;&amp; 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 &lt; 0)	this.size = 0;
+			if (this.size &gt; this.maxR)	this.size = this.maxR;
+			this.updateRadius();
+			this.updateBorderRadius();
+			return;
+		}
+
+		if (deltaX) {
+			this.width += this.resizeX * deltaX;
+			if (this.width &lt; 0)	this.width = 0;
+			if (this.width &gt; this.maxW)	this.width = this.maxW;
+			this.updateWidth();
+		}
+
+		if (deltaY) {
+			this.height += this.resizeY * deltaY;
+			if (this.height &lt; 0) this.height = 0;
+			if (this.height &gt; 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 &lt; 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 &lt; 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 &lt; 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
+	}
+
+})();
+
+
+</code></pre>
+</div>
+
+<div>{{ EmbedLiveSample('border-radius-generator', 700, 900) }}</div>
diff --git a/files/ko/web/css/css_backgrounds_and_borders/box-shadow_generator/index.html b/files/ko/web/css/css_backgrounds_and_borders/box-shadow_generator/index.html
new file mode 100644
index 0000000000..d74321854c
--- /dev/null
+++ b/files/ko/web/css/css_backgrounds_and_borders/box-shadow_generator/index.html
@@ -0,0 +1,2882 @@
+---
+title: Box-shadow 생성기
+slug: Web/CSS/CSS_Backgrounds_and_Borders/Box-shadow_generator
+tags:
+  - CSS
+  - Tools
+translation_of: Web/CSS/CSS_Background_and_Borders/Box-shadow_generator
+original_slug: Web/CSS/CSS_Background_and_Borders/Box-shadow_generator
+---
+<p>이 도구를 사용해 CSS {{cssxref("box-shadow")}} 효과를 생성할 수 있습니다.</p>
+
+<div class="hidden">
+<h2 id="box-shadow_generator" name="box-shadow_generator">box-shadow generator</h2>
+
+<h3 id="HTML_Content">HTML Content</h3>
+
+<pre class="brush: html">&lt;div id="container"&gt;
+    &lt;div class="group section"&gt;
+        &lt;div id="layer_manager"&gt;
+            &lt;div class="group section"&gt;
+                &lt;div class="button" data-type="add"&gt; &lt;/div&gt;
+                &lt;div class="button" data-type="move-up"&gt; &lt;/div&gt;
+                &lt;div class="button" data-type="move-down"&gt; &lt;/div&gt;
+            &lt;/div&gt;
+            &lt;div id="stack_container"&gt;&lt;/div&gt;
+        &lt;/div&gt;
+
+        &lt;div id="preview_zone"&gt;
+            &lt;div id="layer_menu" class="col span_12"&gt;
+                &lt;div class="button" id="element" data-type="subject" data-title="element"&gt; element &lt;/div&gt;
+                &lt;div class="button" id="before" data-type="subject" data-title=":before"&gt;
+                    :before
+                    &lt;span class="delete" data-type="disable"&gt;&lt;/span&gt;
+                &lt;/div&gt;
+                &lt;div class="button" id="after" data-type="subject" data-title=":after"&gt;
+                    :after
+                    &lt;span class="delete" data-type="disable"&gt;&lt;/span&gt;
+                &lt;/div&gt;
+                &lt;div class="ui-checkbox" data-topic='before' data-label=":before"&gt;&lt;/div&gt;
+                &lt;div class="ui-checkbox" data-topic='after' data-label=":after"&gt;&lt;/div&gt;
+            &lt;/div&gt;
+
+            &lt;div id="preview"&gt;
+                &lt;div id="obj-element"&gt;
+                    &lt;div class="content"&gt; &lt;/div&gt;
+                    &lt;div id="obj-before"&gt; &lt;/div&gt;
+                    &lt;div id="obj-after"&gt; &lt;/div&gt;
+                &lt;/div&gt;
+            &lt;/div&gt;
+        &lt;/div&gt;
+    &lt;/div&gt;
+
+    &lt;div id="controls" class="group section"&gt;
+        &lt;div class="wrap-left"&gt;
+            &lt;div class="colorpicker category"&gt;
+                &lt;div class="title"&gt; &lt;/div&gt;
+                &lt;div id="colorpicker" class="group"&gt;
+                    &lt;div id="gradient" class="gradient"&gt;
+                        &lt;div id="gradient_picker"&gt; &lt;/div&gt;
+                    &lt;/div&gt;
+                    &lt;div id="hue" data-topic="hue" class="hue"&gt;
+                        &lt;div id="hue_selector"&gt; &lt;/div&gt;
+                    &lt;/div&gt;
+                    &lt;div class="info"&gt;
+                        &lt;div class="input" data-topic="hue" data-title='H:' data-action="HSV"&gt;&lt;/div&gt;
+                        &lt;div class="input" data-topic="saturation" data-title='S:' data-action="HSV"&gt;&lt;/div&gt;
+                        &lt;div class="input" data-topic="value" data-title='V:' data-action="HSV"&gt;&lt;/div&gt;
+                    &lt;/div&gt;
+                    &lt;div class="alpha"&gt;
+                        &lt;div id="alpha" data-topic="alpha"&gt;
+                            &lt;div id="alpha_selector"&gt; &lt;/div&gt;
+                        &lt;/div&gt;
+                    &lt;/div&gt;
+                    &lt;div class="info"&gt;
+                        &lt;div class="input" data-topic="r" data-title='R:' data-action="RGB"&gt;&lt;/div&gt;
+                        &lt;div class="input" data-topic="g" data-title='G:' data-action="RGB"&gt;&lt;/div&gt;
+                        &lt;div class="input" data-topic="b" data-title='B:' data-action="RGB"&gt;&lt;/div&gt;
+                    &lt;/div&gt;
+                    &lt;div class="preview block"&gt;
+                        &lt;div id="output_color"&gt; &lt;/div&gt;
+                    &lt;/div&gt;
+                    &lt;div class="block info"&gt;
+                        &lt;div class="input" data-topic="a" data-title='alpha:' data-action="alpha"&gt;&lt;/div&gt;
+                        &lt;div class="input" data-topic="hexa" data-title='' data-action="hexa"&gt;&lt;/div&gt;
+                    &lt;/div&gt;
+                &lt;/div&gt;
+            &lt;/div&gt;
+        &lt;/div&gt;
+
+        &lt;div class="wrap-right"&gt;
+
+            &lt;div id="shadow_properties" class="category"&gt;
+                &lt;div class="title"&gt; Shadow properties &lt;/div&gt;
+                &lt;div class="group"&gt;
+                    &lt;div class="group property"&gt;
+                        &lt;div class="ui-slider-name"&gt; inset &lt;/div&gt;
+                        &lt;div class="ui-checkbox" data-topic='inset'&gt;&lt;/div&gt;
+                    &lt;/div&gt;
+                    &lt;div class="slidergroup"&gt;
+                        &lt;div class="ui-slider-name"&gt; Position x &lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="posX" data-type="sub"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider" data-topic="posX"
+                            data-min="-500" data-max="500" data-step="1"&gt; &lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="posX" data-type="add"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider-input" data-topic="posX" data-unit="px"&gt;&lt;/div&gt;
+                    &lt;/div&gt;
+                    &lt;div class="slidergroup"&gt;
+                        &lt;div class="ui-slider-name"&gt; Position y &lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="posY" data-type="sub"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider" data-topic="posY"
+                            data-min="-500" data-max="500" data-step="1"&gt; &lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="posY" data-type="add"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider-input" data-topic="posY" data-unit="px"&gt;&lt;/div&gt;
+                    &lt;/div&gt;
+                    &lt;div class="slidergroup"&gt;
+                        &lt;div class="ui-slider-name"&gt; Blur &lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="blur" data-type="sub"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider" data-topic="blur"
+                            data-min="0" data-max="200" data-step="1"&gt; &lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="blur" data-type="add"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider-input" data-topic="blur" data-unit="px"&gt;&lt;/div&gt;
+                    &lt;/div&gt;
+                    &lt;div class="slidergroup"&gt;
+                        &lt;div class="ui-slider-name"&gt; Spread &lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="spread" data-type="sub"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider" data-topic="spread"
+                            data-min="-100"    data-max="100" data-step="1" data-value="50"&gt;
+                        &lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="spread" data-type="add"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider-input" data-topic="spread" data-unit="px"&gt;&lt;/div&gt;
+                    &lt;/div&gt;
+                &lt;/div&gt;
+            &lt;/div&gt;
+
+            &lt;div id="element_properties" class="category"&gt;
+                &lt;div class="title"&gt; Class element properties &lt;/div&gt;
+                &lt;div class="group"&gt;
+                    &lt;div class="group property"&gt;
+                        &lt;div class="ui-slider-name"&gt; border &lt;/div&gt;
+                        &lt;div class="ui-checkbox" data-topic='border-state' data-state="true"&gt;&lt;/div&gt;
+                    &lt;/div&gt;
+                    &lt;div id="z-index" class="slidergroup"&gt;
+                        &lt;div class="ui-slider-name"&gt; z-index &lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="z-index" data-type="sub"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider" data-topic="z-index"
+                            data-min="-10" data-max="10" data-step="1"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="z-index" data-type="add"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider-input" data-topic="z-index"&gt;&lt;/div&gt;
+                    &lt;/div&gt;
+                    &lt;div class="slidergroup"&gt;
+                        &lt;div class="ui-slider-name"&gt; top &lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="top" data-type="sub"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider" data-topic="top"
+                            data-min="-500" data-max="500" data-step="1"&gt; &lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="top" data-type="add"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider-input" data-topic="top" data-unit="px"&gt;&lt;/div&gt;
+                    &lt;/div&gt;
+                    &lt;div class="slidergroup"&gt;
+                        &lt;div class="ui-slider-name"&gt; left &lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="left" data-type="sub"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider" data-topic="left"
+                            data-min="-300" data-max="700" data-step="1"&gt; &lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="left" data-type="add"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider-input" data-topic="left" data-unit="px"&gt;&lt;/div&gt;
+                    &lt;/div&gt;
+                    &lt;div id="transform_rotate" class="slidergroup"&gt;
+                        &lt;div class="ui-slider-name"&gt; Rotate &lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="rotate" data-type="sub"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider" data-topic="rotate"
+                            data-min="-360" data-max="360" data-step="1" data-value="0"&gt;
+                        &lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="rotate" data-type="add"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider-input" data-topic="rotate" data-unit="deg"&gt;&lt;/div&gt;
+                    &lt;/div&gt;
+                    &lt;div class="slidergroup"&gt;
+                        &lt;div class="ui-slider-name"&gt; Width &lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="width" data-type="sub"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider" data-topic="width"
+                            data-min="0" data-max="1000" data-step="1" data-value="200"&gt;
+                        &lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="width" data-type="add"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider-input" data-topic="width"  data-unit="px"&gt;&lt;/div&gt;
+                    &lt;/div&gt;
+                    &lt;div class="slidergroup"&gt;
+                        &lt;div class="ui-slider-name"&gt; Height &lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="height" data-type="sub"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider" data-topic="height"
+                            data-min="0" data-max="400" data-step="1" data-value="200"&gt;
+                        &lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="height" data-type="add"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider-input" data-topic="height" data-unit="px"&gt;&lt;/div&gt;
+                    &lt;/div&gt;
+                &lt;/div&gt;
+            &lt;/div&gt;
+
+            &lt;div id="output" class="category"&gt;
+                &lt;div id="menu" class="menu"&gt;&lt;/div&gt;
+                &lt;div class="title"&gt;    CSS Code &lt;/div&gt;
+                &lt;div class="group" style="border-top-left-radius: 0;"&gt;
+                    &lt;div class="output" data-topic="element" data-name="element"
+                        data-prop="width height background-color position=[relative] box-shadow"&gt;
+                    &lt;/div&gt;
+                    &lt;div class="output" data-topic="before" data-name="element:before"
+                        data-prop="content=[&amp;quot;&amp;quot;] position=[absolute] width height top left z-index background-color box-shadow transform -webkit-transform -ms-transform"&gt;
+                    &lt;/div&gt;
+                    &lt;div class="output" data-topic="after" data-name="element:after"
+                        data-prop="content=[&amp;quot;&amp;quot;] position=[absolute] width height top left z-index background-color box-shadow transform -webkit-transform -ms-transform"&gt;
+                    &lt;/div&gt;
+                &lt;/div&gt;
+            &lt;/div&gt;
+        &lt;/div&gt;
+    &lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="CSS_Content">CSS Content</h3>
+
+<pre class="brush: css">/*  GRID OF TWELVE
+ * ========================================================================== */
+
+.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 Slider
+ */
+
+.slidergroup {
+	height: 20px;
+	margin: 10px 0;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	-moz-user-select: none;
+	user-select: none;
+}
+
+.slidergroup * {
+	float: left;
+	height: 100%;
+	line-height: 100%;
+}
+
+/* Slider */
+
+.ui-slider {
+	height: 10px;
+	width: 200px;
+	margin: 4px 10px;
+	display: block;
+	border: 1px solid #999;
+	border-radius: 3px;
+	background: #EEE;
+}
+
+.ui-slider:hover {
+	cursor: pointer;
+}
+
+.ui-slider-name {
+	width: 90px;
+	padding: 0 10px 0 0;
+	text-align: right;
+	text-transform: lowercase;
+}
+
+.ui-slider-pointer {
+	width: 13px;
+	height: 13px;
+	background-color: #EEE;
+	border: 1px solid #2C9FC9;
+	border-radius: 3px;
+	position: relative;
+	top: -3px;
+	left: 0%;
+}
+
+.ui-slider-btn-set {
+	width: 25px;
+	background-color: #2C9FC9;
+	border-radius: 3px;
+	color: #FFF;
+	font-weight: bold;
+	text-align: center;
+}
+
+.ui-slider-btn-set:hover {
+	background-color: #379B4A;
+	cursor: pointer;
+}
+
+.ui-slider-input &gt; input {
+	margin: 0 10px;
+	padding: 0;
+	width: 50px;
+	text-align: center;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+/*
+ * UI Button
+ */
+
+/* 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 &gt; input {
+ 	display: none;
+}
+
+.ui-checkbox &gt; 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 &gt; label:hover {
+	cursor: pointer;
+}
+
+.ui-checkbox &gt; input:checked + label {
+	background-image: url("https://mdn.mozillademos.org/files/5681/checked.png");
+	background-color: #379B4A;
+}
+
+/*
+ * BOX SHADOW GENERATOR TOOL
+ */
+
+body {
+	max-width: 1000px;
+	height: 800px;
+	margin: 20px auto 0;
+
+	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;
+}
+
+#container {
+	width: 100%;
+	padding: 2px;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+
+/* container with shadows stacks */
+#stack_container {
+	height: 400px;
+	overflow: hidden;
+	position: relative;
+	border: 1px solid #CCC;
+	border-radius: 3px;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+#stack_container .container {
+	height: 100%;
+	width: 100%;
+	position: absolute;
+	left: 100%;
+	transition-property: left;
+	transition-duration: 0.5s;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+
+#stack_container .title {
+	text-align: center;
+	font-weight: bold;
+	line-height: 2em;
+	border-bottom: 1px solid #43A6E1;
+	color: #666;
+}
+
+
+/*
+ * Stack of Layers for shadow
+ */
+
+#layer_manager {
+	width: 17%;
+	background-color: #FEFEFE;
+	margin: 0 1% 0 0;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+	float: left;
+}
+
+
+#layer_manager .button {
+	width: 30%;
+	height: 25px;
+	margin:0 0 10px;
+	color: #333;
+	background-color: #EEE;
+	text-align: center;
+	font-size: 0.75em;
+	line-height: 1.5em;
+	border: 1px solid #CCC;
+	border-radius: 3px;
+
+	display: block;
+	background-position: center center;
+	background-repeat: no-repeat;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+	float: left;
+}
+
+#layer_manager .button:hover {
+	background-color: #3380C4;
+	border: 1px solid #3380C4;
+	cursor: pointer;
+}
+
+#layer_manager [data-type='add'] {
+	background-image: url("https://mdn.mozillademos.org/files/5685/add-black.png");
+}
+
+#layer_manager [data-type='add']:hover {
+	background-image: url("https://mdn.mozillademos.org/files/5687/add-white.png");
+}
+
+#layer_manager [data-type='move-up'] {
+	background-image: url("https://mdn.mozillademos.org/files/5697/up-black.png");
+	margin-left: 5%;
+	margin-right: 5%;
+}
+
+#layer_manager [data-type='move-up']:hover {
+	background-image: url("https://mdn.mozillademos.org/files/5709/up-white.png");
+}
+
+#layer_manager [data-type='move-down'] {
+	background-image: url("https://mdn.mozillademos.org/files/5693/down-black.png");
+}
+
+#layer_manager [data-type='move-down']:hover {
+	background-image: url("https://mdn.mozillademos.org/files/5695/down-white.png");
+}
+
+/* shadows classes */
+
+#layer_manager .node {
+	width: 100%;
+	margin: 5px 0;
+	padding: 5px;
+	text-align: center;
+	background-color: #EEE;
+	border: 1px solid #DDD;
+	font-size: 0.75em;
+	line-height: 1.5em;
+	color: #333;
+	border-radius: 3px;
+
+	position: relative;
+	display: block;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+#layer_manager .node:hover {
+	color: #FFF;
+	background-color: #3380C4;
+	cursor: pointer;
+}
+
+/* active element styling */
+
+#layer_manager [data-active='layer'] {
+	color: #FFF;
+	border: none;
+	background-color: #379B4A;
+}
+
+#layer_manager [data-active='subject'] {
+	color: #FFF;
+	background-color: #467FC9;
+}
+
+/* delete button */
+
+#layer_manager .delete {
+	width: 1.5em;
+	height: 100%;
+	float: right;
+	border-radius: 3px;
+	background-image: url("https://mdn.mozillademos.org/files/5689/delete-white.png");
+	background-position: center center;
+	background-repeat: no-repeat;
+	position: absolute;
+	top: 0;
+	right: 10px;
+	display: none;
+}
+
+#layer_manager .delete:hover {
+	background-image: url("https://mdn.mozillademos.org/files/5691/delete-yellow.png");
+}
+
+#layer_manager .node:hover .delete {
+	display: block;
+}
+
+
+#layer_manager .stack {
+	padding: 0 5px;
+	max-height: 90%;
+	overflow: auto;
+	overflow-x: hidden;
+}
+
+
+/*
+ * Layer Menu
+ */
+
+#layer_menu {
+	margin: 0 0 10px 0;
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+#layer_menu .button {
+	width: 100px;
+	margin: 0 5px 0 0;
+	padding: 2.5px;
+	color: #333;
+	background-color: #EEE;
+	border: 1px solid #CCC;
+	border-radius: 3px;
+	text-align: center;
+	font-size: 0.75em;
+	line-height: 1.5em;
+
+	position: relative;
+	display: block;
+	float: left;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+#layer_menu .button:hover {
+	color: #FFF;
+	background-color: #3380C4;
+	border: 1px solid #3380C4;
+	cursor: pointer;
+}
+
+#layer_menu .delete {
+	width: 1.5em;
+	height: 100%;
+	float: right;
+	border-radius: 3px;
+	background-image: url("https://mdn.mozillademos.org/files/5689/delete-white.png");
+	background-position: center center;
+	background-repeat: no-repeat;
+	position: absolute;
+	top: 0;
+	right: 5px;
+	display: none;
+}
+
+#layer_menu .delete:hover {
+	background-image: url("https://mdn.mozillademos.org/files/5691/delete-yellow.png");
+}
+
+#layer_menu .button:hover .delete {
+	display: block;
+}
+
+
+/*
+ * active element styling
+ */
+
+#layer_menu [data-active='subject'] {
+	color: #FFF;
+	background-color: #379B4A;
+	border: 1px solid #379B4A;
+}
+
+
+/* Checkbox */
+
+#layer_menu .ui-checkbox &gt; label {
+	height: 15px;
+	line-height: 17px;
+	font-weight: normal;
+	width: 46px;
+	margin: 0 5px 0 0;
+}
+
+#layer_menu .ui-checkbox &gt; input:checked + label {
+	display: none;
+}
+
+
+/******************************************************************************/
+/******************************************************************************/
+/*
+ * Preview Area
+ */
+
+#preview_zone {
+	width: 82%;
+	float: left;
+
+}
+
+
+#preview {
+	width: 100%;
+	height: 400px;
+	border: 1px solid #CCC;
+	border-radius: 3px;
+	text-align: center;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+	cursor: move;
+	float: left;
+}
+
+#preview .content {
+	width: 100%;
+	height: 100%;
+	display: block;
+}
+
+#obj-element {
+	width: 300px;
+	height: 100px;
+	border: 1px solid #CCC;
+	background: #FFF;
+	position: relative;
+}
+
+
+#obj-before {
+	height: 100%;
+	width: 100%;
+	background: #999;
+	border: 1px solid #CCC;
+	text-align: left;
+	display : block;
+	position: absolute;
+	z-index: -1;
+}
+
+#obj-after {
+	height: 100%;
+	width: 100%;
+	background: #DDD;
+	border: 1px solid #CCC;
+	text-align: right;
+	display : block;
+	position: absolute;
+	z-index: -1;
+}
+
+
+/******************************************************************************/
+/******************************************************************************/
+
+/**
+ * Controls
+ */
+
+.wrap-left {
+	float: left;
+	overflow: hidden;
+}
+
+.wrap-right {
+	float: right;
+	overflow: hidden;
+}
+
+.wrap-left &gt; * {
+	float: left;
+}
+
+.wrap-right &gt; * {
+	float: right;
+}
+
+@media (min-width: 960px) {
+
+	.wrap-left {
+		width: 45%;
+	}
+
+	.wrap-right {
+		width: 55%;
+	}
+}
+
+
+@media (max-width: 959px) {
+
+	.wrap-left {
+		width: 30%;
+	}
+
+	.wrap-right {
+		width: 70%;
+	}
+}
+
+
+#controls {
+	color: #444;
+	margin: 10px 0 0 0;
+}
+
+
+#controls .category {
+	width: 500px;
+	margin: 0 auto 20px;
+	padding: 0;
+
+}
+
+#controls .category .title {
+	width: 100%;
+	height: 1.5em;
+	line-height: 1.5em;
+	color: #AAA;
+	text-align: right;
+}
+
+#controls .category &gt; .group {
+	border: 1px solid #CCC;
+	border-radius: 3px;
+}
+
+
+/**
+ * 	Color Picker
+ */
+
+@media (min-width: 960px) {
+	#controls .colorpicker {
+		width: 420px;
+	}
+}
+
+@media (max-width: 959px) {
+	#controls .colorpicker {
+		width: 210px;
+	}
+}
+
+#colorpicker {
+	width: 100%;
+	margin: 0 auto;
+}
+
+#colorpicker .gradient {
+	width: 200px;
+	height: 200px;
+	margin: 5px;
+	background: url("https://mdn.mozillademos.org/files/5707/picker_mask_200.png");
+	background: -moz-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
+				-moz-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
+	background: -webkit-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
+				-webkit-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
+	background-color: #F00;
+	float: left;
+}
+
+#colorpicker .hue {
+	width: 200px;
+	height: 30px;
+	margin: 5px;
+	background: url("https://mdn.mozillademos.org/files/5701/hue.png");
+	background: -moz-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
+				#00F 66.66%, #F0F 83.33%, #F00 100%);
+	background: -webkit-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
+				#00F 66.66%, #F0F 83.33%, #F00 100%);
+	float: left;
+}
+
+#colorpicker .alpha {
+	width: 200px;
+	height: 30px;
+	margin: 5px;
+	border: 1px solid #CCC;
+	float: left;
+	background: url("https://mdn.mozillademos.org/files/5705/alpha.png");
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+#colorpicker #alpha {
+	width: 100%;
+	height: 100%;
+	background: url("https://mdn.mozillademos.org/files/5703/alpha_mask.png");
+	background: -moz-linear-gradient(left, rgba(255, 0, 0, 0) 0%, rgba(255, 0, 0, 1) 100%);
+}
+
+#colorpicker #gradient_picker {
+	width: 0.5em;
+	height: 0.5em;
+	border-radius: 0.4em;
+	border: 2px solid #CCC;
+	position: relative;
+	top: 20%;
+	left: 20%;
+}
+
+#colorpicker #hue_selector,
+#colorpicker #alpha_selector {
+	width: 3px;
+	height: 100%;
+	border: 1px solid #777;
+	background-color: #FFF;
+	position: relative;
+	top: -1px;
+	left: 0%;
+}
+
+/* input HSV and RGB */
+#colorpicker .info {
+	width: 200px;
+	margin: 5px;
+	float: left;
+}
+
+#colorpicker .info * {
+	float: left;
+}
+
+#colorpicker .info input {
+	margin: 0;
+	text-align: center;
+	width: 30px;
+	-moz-user-select: text;
+	-webkit-user-select: text;
+	-ms-user-select: text;
+}
+
+#colorpicker .info span {
+	height: 20px;
+	width: 30px;
+	text-align: center;
+	line-height: 20px;
+	display: block;
+}
+
+/* Preview color */
+#colorpicker .block {
+	width: 95px;
+	height: 54px;
+	float: left;
+	position: relative;
+}
+
+#colorpicker .preview {
+	margin: 5px;
+	border: 1px solid #CCC;
+	background-image: url("https://mdn.mozillademos.org/files/5705/alpha.png");
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+#colorpicker .preview:before {
+	height: 100%;
+	width: 50%;
+	left: 50%;
+	content: "";
+	background: #FFF;
+	position: absolute;
+	z-index: 1;
+}
+
+#colorpicker .preview &gt; * {
+	width: 50%;
+	height: 100%;
+}
+
+#colorpicker #output_color {
+	width: 100%;
+	height: 100%;
+	position: absolute;
+	z-index: 2;
+}
+
+#colorpicker .block .input {
+	float: right;
+}
+
+#colorpicker [data-topic="a"] &gt; span {
+	width: 50px;
+}
+
+#colorpicker [data-topic="hexa"] {
+	float: right;
+	margin: 10px 0 0 0;
+}
+
+#colorpicker [data-topic="hexa"] &gt; span {
+	display: none;
+}
+
+#colorpicker [data-topic="hexa"] &gt; input {
+	width: 85px;
+	padding: 2px 0;
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+
+/*
+ * UI Components
+ */
+
+/* Property */
+
+.property {
+	height: 20px;
+	margin: 10px 0;
+}
+
+.property * {
+	float: left;
+	height: 100%;
+	line-height: 100%;
+}
+
+/* Slider */
+
+#controls .ui-slider-name {
+	margin: 0 10px 0 0;
+}
+
+/*
+ * Output code styling
+ */
+
+#output {
+	position: relative;
+}
+
+#output .menu {
+	max-width: 70%;
+	height: 20px;
+	position: absolute;
+	top: 2px;
+}
+
+#output .button {
+	width: 90px;
+	height: 22px;
+	margin: 0 5px 0 0;
+	text-align: center;
+	line-height: 20px;
+	font-size: 14px;
+	color: #FFF;
+	background-color: #999;
+	border-top-left-radius: 3px;
+	border-top-right-radius: 3px;
+	bottom: -5px;
+	float:left;
+}
+
+#output .button:hover {
+	color: #FFF;
+	background-color: #666;
+	cursor: pointer;
+}
+
+#output .menu [data-active="true"] {
+	color: #777;
+	background-color: #FFF;
+	border: 1px solid #CCC;
+	border-bottom: none;
+}
+
+#output .menu [data-topic="before"] {
+	left: 100px;
+}
+
+#output .menu [data-topic="after"] {
+	left: 200px;
+}
+
+#output .output {
+	width: 480px;
+	margin: 10px;
+	padding: 10px;
+	overflow: hidden;
+	color: #555;
+	font-size: 14px;
+	border: 1px dashed #CCC;
+	border-radius: 3px;
+	display: none;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+
+	-moz-user-select: text;
+	-webkit-user-select: text;
+	-ms-user-select: text;
+}
+
+#output .css-property {
+	width: 100%;
+	float: left;
+	white-space: pre;
+}
+
+#output .name {
+	width: 35%;
+	float: left;
+}
+
+#output .value {
+	width: 65%;
+	float: left;
+}
+
+</pre>
+
+<h3 id="JavaScript_Content">JavaScript Content</h3>
+
+<pre class="brush: js"><code class="language-js">
+
+'use strict';
+
+/**
+ * UI-SlidersManager
+ */
+
+var SliderManager = (function SliderManager() {
+
+	var subscribers = {};
+	var sliders = [];
+
+	var Slider = 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 snap = node.getAttribute('data-snap');
+		var topic = node.getAttribute('data-topic');
+
+		this.min = min;
+		this.max = max &gt; 0 ? max : 100;
+		this.step = step === 0 ? 1 : step;
+		this.value = value &lt;= max &amp;&amp; value &gt;= min ? value : (min + max) / 2 | 0;
+		this.snap = snap === "true" ? true : false;
+		this.topic = topic;
+		this.node = node;
+
+		var pointer = document.createElement('div');
+		pointer.className = 'ui-slider-pointer';
+		node.appendChild(pointer);
+		this.pointer = pointer;
+
+		setMouseTracking(node, updateSlider.bind(this));
+
+		sliders[topic] = this;
+		setValue(topic, this.value);
+	}
+
+	var setButtonComponent = function setButtonComponent(node) {
+		var type = node.getAttribute('data-type');
+		var topic = node.getAttribute('data-topic');
+		if (type === "sub") {
+			node.textContent = '-';
+			node.addEventListener("click", function() {
+				decrement(topic);
+			});
+		}
+		if (type === "add") {
+			node.textContent = '+';
+			node.addEventListener("click", function() {
+				increment(topic);
+			});
+		}
+	}
+
+	var setInputComponent = function setInputComponent(node) {
+		var topic		= node.getAttribute('data-topic');
+		var unit_type	= node.getAttribute('data-unit');
+
+		var input = document.createElement('input');
+		var unit = document.createElement('span');
+		unit.textContent = unit_type;
+
+		input.setAttribute('type', 'text');
+		node.appendChild(input);
+		node.appendChild(unit);
+
+		input.addEventListener('click', function(e) {
+			this.select();
+		});
+
+		input.addEventListener('change', function(e) {
+			setValue(topic, e.target.value | 0);
+		});
+
+		subscribe(topic, function(value) {
+			node.children[0].value = value;
+		});
+	}
+
+	var increment = function increment(topic) {
+		var slider = sliders[topic];
+		if (slider === null || slider === undefined)
+			return;
+
+		if (slider.value + slider.step &lt;= slider.max) {
+			slider.value += slider.step;
+			setValue(slider.topic, slider.value)
+			notify.call(slider);
+		}
+	};
+
+	var decrement = function decrement(topic) {
+		var slider = sliders[topic];
+		if (slider === null || slider === undefined)
+			return;
+
+		if (slider.value - slider.step &gt;= slider.min) {
+			slider.value -= slider.step;
+			setValue(topic, slider.value)
+			notify.call(slider);
+		}
+	}
+
+	// this = Slider object
+	var updateSlider = function updateSlider(e) {
+		var node = this.node;
+		var pos = e.pageX - node.offsetLeft;
+		var width = node.clientWidth;
+		var delta = this.max - this.min;
+		var offset = this.pointer.clientWidth + 4; // border width * 2
+
+		if (pos &lt; 0) pos = 0;
+		if (pos &gt; width) pos = width;
+
+		var value = pos * delta / width | 0;
+		var precision = value % this.step;
+		value = value - precision + this.min;
+		if (precision &gt; this.step / 2)
+			value = value + this.step;
+
+		if (this.snap)
+			pos =  (value - this.min) * width / delta;
+
+		this.pointer.style.left = pos - offset/2 + "px";
+		this.value = value;
+		node.setAttribute('data-value', value);
+		notify.call(this);
+	}
+
+	var setValue = function setValue(topic, value) {
+		var slider = sliders[topic];
+
+		if (value &gt; slider.max || value &lt; slider.min)
+			return;
+
+		var delta = slider.max - slider.min;
+		var width = slider.node.clientWidth;
+		var offset = slider.pointer.clientWidth;
+		var pos =  (value - slider.min) * width / delta;
+		slider.value = value;
+		slider.pointer.style.left = pos - offset / 2 + "px";
+		slider.node.setAttribute('data-value', value);
+		notify.call(slider);
+	}
+
+	var setMouseTracking = function setMouseTracking(elem, callback) {
+		elem.addEventListener("mousedown", function(e) {
+			callback(e);
+			document.addEventListener("mousemove", callback);
+		});
+
+		document.addEventListener("mouseup", function(e) {
+			document.removeEventListener("mousemove", callback);
+		});
+	}
+
+	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() {
+		if (subscribers[this.topic] === undefined)
+			return;
+
+		for (var i in subscribers[this.topic]) {
+			subscribers[this.topic][i](this.value);
+		}
+	}
+
+	var init = function init() {
+		var elem, size;
+
+		elem = document.querySelectorAll('.ui-slider-btn-set');
+		size = elem.length;
+		for (var i = 0; i &lt; size; i++)
+			setButtonComponent(elem[i]);
+
+		elem = document.querySelectorAll('.ui-slider-input');
+		size = elem.length;
+		for (var i = 0; i &lt; size; i++)
+			setInputComponent(elem[i]);
+
+		elem = document.querySelectorAll('.ui-slider');
+		size = elem.length;
+		for (var i = 0; i &lt; size; i++)
+			new Slider(elem[i]);
+	}
+
+	return {
+		init : init,
+		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;
+			notify.call(buttons[topic]);
+		}
+		catch(error) {
+			console.log(error, topic, value);
+		}
+	}
+
+	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() {
+		if (subscribers[this.topic] === undefined)
+			return;
+		for (var i = 0; i &lt; 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 &lt; size; i++)
+			new CheckBox(elem[i]);
+	}
+
+	return {
+		init : init,
+		setValue : setValue,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe
+	}
+
+})();
+
+
+window.addEventListener("load", function(){
+	BoxShadow.init();
+});
+
+var BoxShadow = (function BoxShadow() {
+
+	function getElemById(id) {
+		return document.getElementById(id);
+	}
+
+	/**
+	 * RGBA Color class
+	 */
+
+	function Color() {
+		this.r = 0;
+		this.g = 0;
+		this.b = 0;
+		this.a = 1;
+		this.hue = 0;
+		this.saturation = 0;
+		this.value = 0;
+	}
+
+	Color.prototype.copy = function copy(obj) {
+		if(obj instanceof Color !== true) {
+			console.log("Typeof instance not Color");
+			return;
+		}
+
+		this.r = obj.r;
+		this.g = obj.g;
+		this.b = obj.b;
+		this.a = obj.a;
+		this.hue = obj.hue;
+		this.saturation = obj.saturation;
+		this.value = obj.value;
+	}
+
+	Color.prototype.setRGBA = function setRGBA(red, green, blue, alpha) {
+		if (red != undefined)
+			this.r = red | 0;
+		if (green != undefined)
+			this.g = green | 0;
+		if (blue != undefined)
+			this.b = blue | 0;
+		if (alpha != undefined)
+			this.a = alpha | 0;
+	}
+
+	/**
+	 * HSV/HSB (hue, saturation, value / brightness)
+	 * @param hue			0-360
+	 * @param saturation	0-100
+	 * @param value 		0-100
+	 */
+	Color.prototype.setHSV = function setHSV(hue, saturation, value) {
+		this.hue = hue;
+		this.saturation = saturation;
+		this.value = value;
+		this.updateRGB();
+	}
+
+	Color.prototype.updateRGB = function updateRGB() {
+		var sat = this.saturation / 100;
+		var value = this.value / 100;
+		var C = sat * value;
+		var H = this.hue / 60;
+		var X = C * (1 - Math.abs(H % 2 - 1));
+		var m = value - C;
+		var precision = 255;
+
+		C = (C + m) * precision;
+		X = (X + m) * precision;
+		m = m * precision;
+
+		if (H &gt;= 0 &amp;&amp; H &lt; 1) {	this.setRGBA(C, X, m);	return; }
+		if (H &gt;= 1 &amp;&amp; H &lt; 2) {	this.setRGBA(X, C, m);	return; }
+		if (H &gt;= 2 &amp;&amp; H &lt; 3) {	this.setRGBA(m, C, X);	return; }
+		if (H &gt;= 3 &amp;&amp; H &lt; 4) {	this.setRGBA(m, X, C);	return; }
+		if (H &gt;= 4 &amp;&amp; H &lt; 5) {	this.setRGBA(X, m, C);	return; }
+		if (H &gt;= 5 &amp;&amp; H &lt; 6) {	this.setRGBA(C, m, X);	return; }
+	}
+
+	Color.prototype.updateHSV = function updateHSV() {
+		var red		= this.r / 255;
+		var green	= this.g / 255;
+		var blue	= this.b / 255;
+
+		var cmax = Math.max(red, green, blue);
+		var cmin = Math.min(red, green, blue);
+		var delta = cmax - cmin;
+		var hue = 0;
+		var saturation = 0;
+
+		if (delta) {
+			if (cmax === red ) { hue = ((green - blue) / delta); }
+			if (cmax === green ) { hue = 2 + (blue - red) / delta; }
+			if (cmax === blue ) { hue = 4 + (red - green) / delta; }
+			if (cmax) saturation = delta / cmax;
+		}
+
+		this.hue = 60 * hue | 0;
+		if (this.hue &lt; 0) this.hue += 360;
+		this.saturation = (saturation * 100) | 0;
+		this.value = (cmax * 100) | 0;
+	}
+
+	Color.prototype.setHexa = function setHexa(value) {
+		var valid  = /(^#{0,1}[0-9A-F]{6}$)|(^#{0,1}[0-9A-F]{3}$)/i.test(value)
+		if (valid !== true)
+			return;
+
+		if (value[0] === '#')
+			value = value.slice(1, value.length);
+
+		if (value.length === 3)
+			value = value.replace(/([0-9A-F])([0-9A-F])([0-9A-F])/i,"$1$1$2$2$3$3");
+
+		this.r = parseInt(value.substr(0, 2), 16);
+		this.g = parseInt(value.substr(2, 2), 16);
+		this.b = parseInt(value.substr(4, 2), 16);
+
+		this.alpha	= 1;
+	}
+
+	Color.prototype.getHexa = function getHexa() {
+		var r = this.r.toString(16);
+		var g = this.g.toString(16);
+		var b = this.b.toString(16);
+		if (this.r &lt; 16) r = '0' + r;
+		if (this.g &lt; 16) g = '0' + g;
+		if (this.b &lt; 16) b = '0' + b;
+		var value = '#' + r + g + b;
+		return value.toUpperCase();
+	}
+
+	Color.prototype.getRGBA = function getRGBA() {
+
+		var rgb = "(" + this.r + ", " + this.g + ", " + this.b;
+		var a = '';
+		var v = '';
+		if (this.a !== 1) {
+			a = 'a';
+			v = ', ' + this.a;
+		}
+
+		var value = "rgb" + a + rgb + v + ")";
+		return value;
+	}
+
+	Color.prototype.getColor = function getColor() {
+		if (this.a | 0 === 1)
+			return this.getHexa();
+		return this.getRGBA();
+	}
+
+	/**
+	 * Shadow Object
+	 */
+	function Shadow() {
+		this.inset  = false;
+		this.posX   = 5;
+		this.posY   = -5;
+		this.blur   = 5;
+		this.spread = 0;
+		this.color  = new Color();
+
+		var hue			= (Math.random() * 360) | 0;
+		var saturation	= (Math.random() * 75) | 0;
+		var value 		= (Math.random() * 50 + 50) | 0;
+		this.color.setHSV(hue, saturation, value, 1);
+	}
+
+	Shadow.prototype.computeCSS = function computeCSS() {
+		var value = "";
+		if (this.inset === true)
+			value += "inset ";
+		value += this.posX + "px ";
+		value += this.posY + "px ";
+		value += this.blur + "px ";
+		value += this.spread + "px ";
+		value += this.color.getColor();
+
+		return value;
+	}
+
+	Shadow.prototype.toggleInset = function toggleInset(value) {
+		if (value !== undefined || typeof value === "boolean")
+			this.inset = value;
+		else
+			this.inset = this.inset === true ? false : true;
+	}
+
+	Shadow.prototype.copy = function copy(obj) {
+		if(obj instanceof Shadow !== true) {
+			console.log("Typeof instance not Shadow");
+			return;
+		}
+
+		this.inset  = obj.inset;
+		this.posX   = obj.posX;
+		this.posY   = obj.posY;
+		this.blur   = obj.blur;
+		this.spread = obj.spread;
+		this.color.copy(obj.color);
+	}
+
+	/**
+	 * Color Picker
+	 */
+	var ColoPicker = (function ColoPicker() {
+
+		var colorpicker;
+		var hue_area;
+		var gradient_area;
+		var alpha_area;
+		var gradient_picker;
+		var hue_selector;
+		var alpha_selector;
+		var pick_object;
+		var info_rgb;
+		var info_hsv;
+		var info_hexa;
+		var output_color;
+		var color = new Color();
+		var subscribers = [];
+
+		var updateColor = function updateColor(e) {
+			var x = e.pageX - gradient_area.offsetLeft;
+			var y = e.pageY - gradient_area.offsetTop;
+
+			// width and height should be the same
+			var size = gradient_area.clientWidth;
+
+			if (x &gt; size)
+				x = size;
+			if (y &gt; size)
+				y = size;
+
+			if (x &lt; 0) x = 0;
+			if (y &lt; 0) y = 0;
+
+			var value = 100 - (y * 100 / size) | 0;
+			var saturation = x * 100 / size | 0;
+
+			color.setHSV(color.hue, saturation, value);
+			// should update just
+			// color pointer location
+			updateUI();
+			notify("color", color);
+		}
+
+		var updateHue = function updateHue(e) {
+			var x = e.pageX - hue_area.offsetLeft;
+			var width = hue_area.clientWidth;
+
+			if (x &lt; 0) x = 0;
+			if (x &gt; width) x = width;
+
+			var hue = ((360 * x) / width) | 0;
+			if (hue === 360) hue = 359;
+
+			color.setHSV(hue, color.saturation, color.value);
+
+			// should update just
+			// hue pointer location
+			// picker area background
+			// alpha area background
+			updateUI();
+			notify("color", color);
+		}
+
+		var updateAlpha = function updateAlpha(e) {
+			var x = e.pageX - alpha_area.offsetLeft;
+			var width = alpha_area.clientWidth;
+
+			if (x &lt; 0) x = 0;
+			if (x &gt; width) x = width;
+
+			color.a = (x / width).toFixed(2);
+
+			// should update just
+			// alpha pointer location
+			updateUI();
+			notify("color", color);
+		}
+
+		var setHueGfx = function setHueGfx(hue) {
+			var sat = color.saturation;
+			var val = color.value;
+			var alpha = color.a;
+
+			color.setHSV(hue, 100, 100);
+			gradient_area.style.backgroundColor = color.getHexa();
+
+			color.a = 0;
+			var start = color.getRGBA();
+			color.a = 1;
+			var end = color.getRGBA();
+			color.a = alpha;
+
+			var gradient = '-moz-linear-gradient(left, ' +	start + '0%, ' + end + ' 100%)';
+			alpha_area.style.background = gradient;
+		}
+
+		var updateUI = function updateUI() {
+			var x, y;		// coordinates
+			var size;		// size of the area
+			var offset;		// pointer graphic selector offset
+
+			// Set color pointer location
+			size = gradient_area.clientWidth;
+			offset = gradient_picker.clientWidth / 2 + 2;
+
+			x = (color.saturation * size / 100) | 0;
+			y = size - (color.value * size / 100) | 0;
+
+			gradient_picker.style.left = x - offset + "px";
+			gradient_picker.style.top = y - offset + "px";
+
+			// Set hue pointer location
+			size = hue_area.clientWidth;
+			offset = hue_selector.clientWidth/2;
+			x = (color.hue * size / 360 ) | 0;
+			hue_selector.style.left = x - offset + "px";
+
+			// Set alpha pointer location
+			size = alpha_area.clientWidth;
+			offset = alpha_selector.clientWidth/2;
+			x = (color.a * size) | 0;
+			alpha_selector.style.left = x - offset + "px";
+
+			// Set picker area background
+			var nc = new Color();
+			nc.copy(color);
+			if (nc.hue === 360) nc.hue = 0;
+			nc.setHSV(nc.hue, 100, 100);
+			gradient_area.style.backgroundColor = nc.getHexa();
+
+			// Set alpha area background
+			nc.copy(color);
+			nc.a = 0;
+			var start = nc.getRGBA();
+			nc.a = 1;
+			var end = nc.getRGBA();
+			var gradient = '-moz-linear-gradient(left, ' +	start + '0%, ' + end + ' 100%)';
+			alpha_area.style.background = gradient;
+
+			// Update color info
+			notify("color", color);
+			notify("hue", color.hue);
+			notify("saturation", color.saturation);
+			notify("value", color.value);
+			notify("r", color.r);
+			notify("g", color.g);
+			notify("b", color.b);
+			notify("a", color.a);
+			notify("hexa", color.getHexa());
+			output_color.style.backgroundColor = color.getRGBA();
+		}
+
+		var setInputComponent = function setInputComponent(node) {
+			var topic = node.getAttribute('data-topic');
+			var title = node.getAttribute('data-title');
+			var action = node.getAttribute('data-action');
+			title = title === null ? '' : title;
+
+			var input = document.createElement('input');
+			var info = document.createElement('span');
+			info.textContent = title;
+
+			input.setAttribute('type', 'text');
+			input.setAttribute('data-action', 'set-' + action + '-' + topic);
+			node.appendChild(info);
+			node.appendChild(input);
+
+			input.addEventListener('click', function(e) {
+				this.select();
+			});
+
+			input.addEventListener('change', function(e) {
+				if (action === 'HSV')
+					inputChangeHSV(topic);
+				if (action === 'RGB')
+					inputChangeRGB(topic);
+				if (action === 'alpha')
+					inputChangeAlpha(topic);
+				if (action === 'hexa')
+					inputChangeHexa(topic);
+			});
+
+			subscribe(topic, function(value) {
+				node.children[1].value = value;
+			});
+		}
+
+		var inputChangeHSV = function actionHSV(topic) {
+			var selector = "[data-action='set-HSV-" + topic + "']";
+			var node = document.querySelector("#colorpicker " + selector);
+			var value = parseInt(node.value);
+
+			if (typeof value === 'number' &amp;&amp; isNaN(value) === false &amp;&amp;
+				value &gt;= 0 &amp;&amp; value &lt; 360)
+				color[topic] = value;
+
+			color.updateRGB();
+			updateUI();
+		}
+
+		var inputChangeRGB = function inputChangeRGB(topic) {
+			var selector = "[data-action='set-RGB-" + topic + "']";
+			var node = document.querySelector("#colorpicker " + selector);
+			var value = parseInt(node.value);
+
+			if (typeof value === 'number' &amp;&amp; isNaN(value) === false &amp;&amp;
+				value &gt;= 0 &amp;&amp; value &lt;= 255)
+				color[topic] = value;
+
+			color.updateHSV();
+			updateUI();
+		}
+
+		var inputChangeAlpha = function inputChangeAlpha(topic) {
+			var selector = "[data-action='set-alpha-" + topic + "']";
+			var node = document.querySelector("#colorpicker " + selector);
+			var value = parseFloat(node.value);
+
+			if (typeof value === 'number' &amp;&amp; isNaN(value) === false &amp;&amp;
+				value &gt;= 0 &amp;&amp; value &lt;= 1)
+				color.a = value.toFixed(2);
+
+			updateUI();
+		}
+
+		var inputChangeHexa = function inputChangeHexa(topic) {
+			var selector = "[data-action='set-hexa-" + topic + "']";
+			var node = document.querySelector("#colorpicker " + selector);
+			var value = node.value;
+			color.setHexa(value);
+			color.updateHSV();
+			updateUI();
+		}
+
+		var setMouseTracking = function setMouseTracking(elem, callback) {
+
+			elem.addEventListener("mousedown", function(e) {
+				callback(e);
+				document.addEventListener("mousemove", callback);
+			});
+
+			document.addEventListener("mouseup", function(e) {
+				document.removeEventListener("mousemove", callback);
+			});
+		}
+
+		/*
+		 * Observer
+		 */
+		var setColor = function setColor(obj) {
+			if(obj instanceof Color !== true) {
+				console.log("Typeof instance not Color");
+				return;
+			}
+			color.copy(obj);
+			updateUI();
+		}
+
+		var subscribe = function subscribe(topic, callback) {
+			if (subscribers[topic] === undefined)
+				subscribers[topic] = [];
+
+			subscribers[topic].push(callback);
+		}
+
+		var unsubscribe = function unsubscribe(callback) {
+			subscribers.indexOf(callback);
+			subscribers.splice(index, 1);
+		}
+
+		var notify = function notify(topic, value) {
+			for (var i in subscribers[topic])
+				subscribers[topic][i](value);
+		}
+
+		var init = function init() {
+			colorpicker		= getElemById("colorpicker");
+			hue_area		= getElemById("hue");
+			gradient_area	= getElemById("gradient");
+			alpha_area		= getElemById("alpha");
+			gradient_picker	= getElemById("gradient_picker");
+			hue_selector	= getElemById("hue_selector");
+			alpha_selector	= getElemById("alpha_selector");
+			output_color	= getElemById("output_color");
+
+			var elem = document.querySelectorAll('#colorpicker .input');
+			var size = elem.length;
+			for (var i = 0; i &lt; size; i++)
+				setInputComponent(elem[i]);
+
+			setMouseTracking(gradient_area, updateColor);
+			setMouseTracking(hue_area, updateHue);
+			setMouseTracking(alpha_area, updateAlpha);
+
+		}
+
+		return {
+			init : init,
+			setColor : setColor,
+			subscribe : subscribe,
+			unsubscribe : unsubscribe
+		}
+
+	})();
+
+	/**
+	 * 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
+		}
+
+	})();
+
+	/*
+	 * Element Class
+	 */
+	var CssClass = function CssClass(id) {
+		this.left = 0;
+		this.top = 0;
+		this.rotate = 0;
+		this.width = 300;
+		this.height = 100;
+		this.display = true;
+		this.border = true;
+		this.zIndex = -1;
+		this.bgcolor = new Color();
+		this.id = id;
+		this.node = getElemById('obj-' + id);
+		this.object = getElemById(id);
+		this.shadowID = null;
+		this.shadows = []
+		this.render = [];
+		this.init();
+	}
+
+	CssClass.prototype.init = function init() {
+		this.left = ((this.node.parentNode.clientWidth - this.node.clientWidth) / 2) | 0;
+		this.top = ((this.node.parentNode.clientHeight - this.node.clientHeight) / 2) | 0;
+
+		this.setTop(this.top);
+		this.setLeft(this.left);
+		this.setHeight(this.height);
+		this.setWidth(this.width);
+		this.bgcolor.setHSV(0, 0, 100);
+		this.updateBgColor(this.bgcolor);
+	}
+
+	CssClass.prototype.updatePos = function updatePos(deltaX, deltaY) {
+		this.left += deltaX;
+		this.top += deltaY;
+		this.node.style.top = this.top + "px";
+		this.node.style.left = this.left + "px";
+		SliderManager.setValue("left", this.left);
+		SliderManager.setValue("top", this.top);
+	}
+
+	CssClass.prototype.setLeft = function setLeft(value) {
+		this.left = value;
+		this.node.style.left = this.left + "px";
+		OutputManager.updateProperty(this.id, 'left', this.left + 'px');
+	}
+
+	CssClass.prototype.setTop = function setTop(value) {
+		this.top = value;
+		this.node.style.top = this.top + 'px';
+		OutputManager.updateProperty(this.id, 'top', this.top + 'px');
+	}
+
+	CssClass.prototype.setWidth = function setWidth(value) {
+		this.width = value;
+		this.node.style.width = this.width + 'px';
+		OutputManager.updateProperty(this.id, 'width', this.width + 'px');
+	}
+
+	CssClass.prototype.setHeight = function setHeight(value) {
+		this.height = value;
+		this.node.style.height = this.height + 'px';
+		OutputManager.updateProperty(this.id, 'height', this.height + 'px');
+	}
+
+	// Browser support
+	CssClass.prototype.setRotate = function setRotate(value) {
+		var cssvalue = 'rotate(' + value +'deg)';
+
+		this.node.style.transform = cssvalue;
+		this.node.style.webkitTransform = cssvalue;
+		this.node.style.msTransform = cssvalue;
+
+		if (value !== 0) {
+			if (this.rotate === 0) {
+				OutputManager.toggleProperty(this.id, 'transform', true);
+				OutputManager.toggleProperty(this.id, '-webkit-transform', true);
+				OutputManager.toggleProperty(this.id, '-ms-transform', true);
+			}
+		}
+		else {
+			OutputManager.toggleProperty(this.id, 'transform', false);
+			OutputManager.toggleProperty(this.id, '-webkit-transform', false);
+			OutputManager.toggleProperty(this.id, '-ms-transform', false);
+		}
+
+		OutputManager.updateProperty(this.id, 'transform', cssvalue);
+		OutputManager.updateProperty(this.id, '-webkit-transform', cssvalue);
+		OutputManager.updateProperty(this.id, '-ms-transform', cssvalue);
+		this.rotate = value;
+	}
+
+	CssClass.prototype.setzIndex = function setzIndex(value) {
+		this.node.style.zIndex = value;
+		OutputManager.updateProperty(this.id, 'z-index', value);
+		this.zIndex = value;
+	}
+
+	CssClass.prototype.toggleDisplay = function toggleDisplay(value) {
+		if (typeof value !== "boolean" || this.display === value)
+			return;
+
+		this.display = value;
+		var display = this.display === true ? "block" : "none";
+		this.node.style.display = display;
+		this.object.style.display = display;
+	}
+
+	CssClass.prototype.toggleBorder = function toggleBorder(value) {
+		if (typeof value !== "boolean" || this.border === value)
+			return;
+
+		this.border = value;
+		var border = this.border === true ? "1px solid #CCC" : "none";
+		this.node.style.border = border;
+	}
+
+	CssClass.prototype.updateBgColor = function updateBgColor(color) {
+		this.bgcolor.copy(color);
+		this.node.style.backgroundColor = color.getColor();
+		OutputManager.updateProperty(this.id, 'background-color', color.getColor());
+	}
+
+	CssClass.prototype.updateShadows = function updateShadows() {
+		if (this.render.length === 0)
+			OutputManager.toggleProperty(this.id, 'box-shadow', false);
+		if (this.render.length === 1)
+			OutputManager.toggleProperty(this.id, 'box-shadow', true);
+
+		this.node.style.boxShadow = this.render.join(", ");
+		OutputManager.updateProperty(this.id, 'box-shadow', this.render.join(", \n"));
+
+	}
+
+
+	/**
+	 * Tool Manager
+	 */
+	var Tool = (function Tool() {
+
+		var preview;
+		var classes = [];
+		var active = null;
+		var animate = false;
+
+		/*
+		 * Toll actions
+		 */
+		var addCssClass = function addCssClass(id) {
+			classes[id] = new CssClass(id);
+		}
+
+		var setActiveClass = function setActiveClass(id) {
+			active = classes[id];
+			active.shadowID = null;
+			ColoPicker.setColor(classes[id].bgcolor);
+			SliderManager.setValue("top", active.top);
+			SliderManager.setValue("left", active.left);
+			SliderManager.setValue("rotate", active.rotate);
+			SliderManager.setValue("z-index", active.zIndex);
+			SliderManager.setValue("width", active.width);
+			SliderManager.setValue("height", active.height);
+			ButtonManager.setValue("border-state", active.border);
+			active.updateShadows();
+		}
+
+		var disableClass = function disableClass(topic) {
+			classes[topic].toggleDisplay(false);
+			ButtonManager.setValue(topic, false);
+		}
+
+		var addShadow = function addShadow(position) {
+			if (animate === true)
+				return -1;
+
+			active.shadows.splice(position, 0, new Shadow());
+			active.render.splice(position, 0, null);
+		}
+
+		var swapShadow = function swapShadow(id1, id2) {
+			var x = active.shadows[id1];
+			active.shadows[id1] = active.shadows[id2];
+			active.shadows[id2] = x;
+			updateShadowCSS(id1);
+			updateShadowCSS(id2);
+		}
+
+		var deleteShadow = function deleteShadow(position) {
+			active.shadows.splice(position, 1);
+			active.render.splice(position, 1);
+			active.updateShadows();
+		}
+
+		var setActiveShadow = function setActiveShadow(id, glow) {
+			active.shadowID = id;
+			ColoPicker.setColor(active.shadows[id].color);
+			ButtonManager.setValue("inset", active.shadows[id].inset);
+			SliderManager.setValue("blur", active.shadows[id].blur);
+			SliderManager.setValue("spread", active.shadows[id].spread);
+			SliderManager.setValue("posX", active.shadows[id].posX);
+			SliderManager.setValue("posY", active.shadows[id].posY);
+			if (glow === true)
+				addGlowEffect(id);
+		}
+
+		var addGlowEffect = function addGlowEffect(id) {
+			if (animate === true)
+				return;
+
+			animate = true;
+			var store = new Shadow();
+			var shadow = active.shadows[id];
+
+			store.copy(shadow);
+			shadow.color.setRGBA(40, 125, 200, 1);
+			shadow.blur = 10;
+			shadow.spread = 10;
+
+			active.node.style.transition = "box-shadow 0.2s";
+			updateShadowCSS(id);
+
+			setTimeout(function() {
+				shadow.copy(store);
+				updateShadowCSS(id);
+				setTimeout(function() {
+					active.node.style.removeProperty("transition");
+					animate = false;
+				}, 100);
+			}, 200);
+		}
+
+		var updateActivePos = function updateActivePos(deltaX, deltaY) {
+			if (active.shadowID === null)
+				active.updatePos(deltaX, deltaY);
+			else
+				updateShadowPos(deltaX, deltaY);
+		}
+
+		/*
+		 * Shadow properties
+		 */
+		var updateShadowCSS = function updateShadowCSS(id) {
+			active.render[id] = active.shadows[id].computeCSS();
+			active.updateShadows();
+		}
+
+		var toggleShadowInset = function toggleShadowInset(value) {
+			if (active.shadowID === null)
+				return;
+			active.shadows[active.shadowID].toggleInset(value);
+			updateShadowCSS(active.shadowID);
+		}
+
+		var updateShadowPos = function updateShadowPos(deltaX, deltaY) {
+			var shadow = active.shadows[active.shadowID];
+			shadow.posX += deltaX;
+			shadow.posY += deltaY;
+			SliderManager.setValue("posX", shadow.posX);
+			SliderManager.setValue("posY", shadow.posY);
+			updateShadowCSS(active.shadowID);
+		}
+
+		var setShadowPosX = function setShadowPosX(value) {
+			if (active.shadowID === null)
+				return;
+			active.shadows[active.shadowID].posX = value;
+			updateShadowCSS(active.shadowID);
+		}
+
+		var setShadowPosY = function setShadowPosY(value) {
+			if (active.shadowID === null)
+				return;
+			active.shadows[active.shadowID].posY = value;
+			updateShadowCSS(active.shadowID);
+		}
+
+		var setShadowBlur = function setShadowBlur(value) {
+			if (active.shadowID === null)
+				return;
+			active.shadows[active.shadowID].blur = value;
+			updateShadowCSS(active.shadowID);
+		}
+
+		var setShadowSpread = function setShadowSpread(value) {
+			if (active.shadowID === null)
+				return;
+			active.shadows[active.shadowID].spread = value;
+			updateShadowCSS(active.shadowID);
+		}
+
+		var updateShadowColor = function updateShadowColor(color) {
+			active.shadows[active.shadowID].color.copy(color);
+			updateShadowCSS(active.shadowID);
+		}
+
+		/*
+		 * Element Properties
+		 */
+		var updateColor = function updateColor(color) {
+			if (active.shadowID === null)
+				active.updateBgColor(color);
+			else
+				updateShadowColor(color);
+		}
+
+		var init = function init() {
+			preview = getElemById("preview");
+
+			ColoPicker.subscribe("color", updateColor);
+			PreviewMouseTracking.subscribe(updateActivePos);
+
+			// Affects shadows
+			ButtonManager.subscribe("inset", toggleShadowInset);
+			SliderManager.subscribe("posX", setShadowPosX);
+			SliderManager.subscribe("posY", setShadowPosY);
+			SliderManager.subscribe("blur", setShadowBlur);
+			SliderManager.subscribe("spread", setShadowSpread);
+
+			// Affects element
+			SliderManager.subscribe("top", function(value){
+				active.setTop(value);
+			});
+			SliderManager.subscribe("left", function(value){
+				active.setLeft(value);
+			});
+			SliderManager.subscribe("rotate", function(value) {
+				if (active == classes["element"])
+					return;
+				active.setRotate(value);
+			});
+
+			SliderManager.subscribe("z-index", function(value) {
+				if (active == classes["element"])
+					return;
+				active.setzIndex(value);
+			});
+
+			SliderManager.subscribe("width", function(value) {
+				active.setWidth(value)
+			});
+
+			SliderManager.subscribe("height", function(value) {
+				active.setHeight(value)
+			});
+
+			// Actions
+			classes['before'].top = -30;
+			classes['before'].left = -30;
+			classes['after'].top = 30;
+			classes['after'].left = 30;
+			classes['before'].toggleDisplay(false);
+			classes['after'].toggleDisplay(false);
+			ButtonManager.setValue('before', false);
+			ButtonManager.setValue('after', false);
+
+			ButtonManager.subscribe("before", classes['before'].toggleDisplay.bind(classes['before']));
+			ButtonManager.subscribe("after", classes['after'].toggleDisplay.bind(classes['after']));
+
+			ButtonManager.subscribe("border-state", function(value) {
+				active.toggleBorder(value);
+			});
+
+		}
+
+		return {
+			init 			: init,
+			addShadow		: addShadow,
+			swapShadow		: swapShadow,
+			addCssClass		: addCssClass,
+			disableClass	: disableClass,
+			deleteShadow	: deleteShadow,
+			setActiveClass	: setActiveClass,
+			setActiveShadow : setActiveShadow
+		}
+
+	})();
+
+	/**
+	 * Layer Manager
+	 */
+	var LayerManager = (function LayerManager() {
+		var stacks = [];
+		var active = {
+			node : null,
+			stack : null
+		}
+		var elements = {};
+
+		var mouseEvents = function mouseEvents(e) {
+			var node = e.target;
+			var type = node.getAttribute('data-type');
+
+			if (type === 'subject')
+				setActiveStack(stacks[node.id]);
+
+			if (type === 'disable') {
+				Tool.disableClass(node.parentNode.id);
+				setActiveStack(stacks['element']);
+			}
+
+			if (type === 'add')
+				active.stack.addLayer();
+
+			if (type === 'layer')
+				active.stack.setActiveLayer(node);
+
+			if (type === 'delete')
+				active.stack.deleteLayer(node.parentNode);
+
+			if (type === 'move-up')
+				active.stack.moveLayer(1);
+
+			if (type === 'move-down')
+				active.stack.moveLayer(-1);
+		}
+
+		var setActiveStack = function setActiveStack(stackObj) {
+			active.stack.hide();
+			active.stack = stackObj;
+			active.stack.show();
+		}
+
+		/*
+		 * Stack object
+		 */
+		var Stack = function Stack(subject) {
+			var S = document.createElement('div');
+			var title = document.createElement('div');
+			var stack = document.createElement('div');
+
+			S.className = 'container';
+			stack.className = 'stack';
+			title.className = 'title';
+			title.textContent = subject.getAttribute('data-title');
+			S.appendChild(title);
+			S.appendChild(stack);
+
+			this.id = subject.id;
+			this.container = S;
+			this.stack = stack;
+			this.subject = subject;
+			this.order = [];
+			this.uid = 0;
+			this.count = 0;
+			this.layer = null;
+			this.layerID = 0;
+		}
+
+		Stack.prototype.addLayer = function addLayer() {
+			if (Tool.addShadow(this.layerID) == -1)
+				return;
+
+			var uid = this.getUID();
+			var layer = this.createLayer(uid);
+
+			if (this.layer === null &amp;&amp; this.stack.children.length &gt;= 1)
+				this.layer = this.stack.children[0];
+
+			this.stack.insertBefore(layer, this.layer);
+			this.order.splice(this.layerID, 0, uid);
+			this.count++;
+			this.setActiveLayer(layer);
+		}
+
+		Stack.prototype.createLayer = function createLayer(uid) {
+			var layer = document.createElement('div');
+			var del = document.createElement('span');
+
+			layer.className = 'node';
+			layer.setAttribute('data-shid', uid);
+			layer.setAttribute('data-type', 'layer');
+			layer.textContent = 'shadow ' + uid;
+
+			del.className = 'delete';
+			del.setAttribute('data-type', 'delete');
+
+			layer.appendChild(del);
+			return layer;
+		}
+
+		Stack.prototype.getUID = function getUID() {
+			return this.uid++;
+		}
+
+		// SOLVE IE BUG
+		Stack.prototype.moveLayer = function moveLayer(direction) {
+			if (this.count &lt;= 1 || this.layer === null)
+				return;
+			if (direction === -1 &amp;&amp; this.layerID === (this.count - 1) )
+				return;
+			if (direction === 1 &amp;&amp; this.layerID === 0 )
+				return;
+
+			if (direction === -1) {
+				var before = null;
+				Tool.swapShadow(this.layerID, this.layerID + 1);
+				this.swapOrder(this.layerID, this.layerID + 1);
+				this.layerID += 1;
+
+				if (this.layerID + 1 !== this.count)
+					before = this.stack.children[this.layerID + 1];
+
+				this.stack.insertBefore(this.layer, before);
+				Tool.setActiveShadow(this.layerID, false);
+			}
+
+			if (direction === 1) {
+				Tool.swapShadow(this.layerID, this.layerID - 1);
+				this.swapOrder(this.layerID, this.layerID - 1);
+				this.layerID -= 1;
+				this.stack.insertBefore(this.layer, this.stack.children[this.layerID]);
+				Tool.setActiveShadow(this.layerID, false);
+			}
+		}
+
+		Stack.prototype.swapOrder = function swapOrder(pos1, pos2) {
+			var x = this.order[pos1];
+			this.order[pos1] = this.order[pos2];
+			this.order[pos2] = x;
+		}
+
+		Stack.prototype.deleteLayer = function deleteLayer(node) {
+			var shadowID =  node.getAttribute('data-shid') | 0;
+			var index = this.order.indexOf(shadowID);
+			this.stack.removeChild(this.stack.children[index]);
+			this.order.splice(index, 1);
+			this.count--;
+
+			Tool.deleteShadow(index);
+
+			if (index &gt; this.layerID)
+				return;
+
+			if (index == this.layerID) {
+				if (this.count &gt;= 1) {
+					this.layerID = 0;
+					this.setActiveLayer(this.stack.children[0], true);
+				}
+				else {
+					this.layer = null;
+					this.show();
+				}
+			}
+
+			if (index &lt; this.layerID) {
+				this.layerID--;
+				Tool.setActiveShadow(this.layerID, true);
+			}
+
+		}
+
+		Stack.prototype.setActiveLayer = function setActiveLayer(node) {
+			elements.shadow_properties.style.display = 'block';
+			elements.element_properties.style.display = 'none';
+
+			if (this.layer)
+				this.layer.removeAttribute('data-active');
+
+			this.layer = node;
+			this.layer.setAttribute('data-active', 'layer');
+
+			var shadowID =  node.getAttribute('data-shid') | 0;
+			this.layerID = this.order.indexOf(shadowID);
+			Tool.setActiveShadow(this.layerID, true);
+		}
+
+		Stack.prototype.unsetActiveLayer = function unsetActiveLayer() {
+			if (this.layer)
+				this.layer.removeAttribute('data-active');
+
+			this.layer = null;
+			this.layerID = 0;
+		}
+
+		Stack.prototype.hide = function hide() {
+			this.unsetActiveLayer();
+			this.subject.removeAttribute('data-active');
+			var style = this.container.style;
+			style.left = '100%';
+			style.zIndex = '0';
+		}
+
+		Stack.prototype.show = function show() {
+			elements.shadow_properties.style.display = 'none';
+			elements.element_properties.style.display = 'block';
+
+			if (this.id === 'element') {
+				elements.zIndex.style.display = 'none';
+				elements.transform_rotate.style.display = 'none';
+			}
+			else {
+				elements.zIndex.style.display = 'block';
+				elements.transform_rotate.style.display = 'block';
+			}
+
+			this.subject.setAttribute('data-active', 'subject');
+			var style = this.container.style;
+			style.left = '0';
+			style.zIndex = '10';
+			Tool.setActiveClass(this.id);
+		}
+
+		function init() {
+
+			var elem, size;
+			var layerManager = getElemById("layer_manager");
+			var layerMenu = getElemById("layer_menu");
+			var container = getElemById("stack_container");
+
+			elements.shadow_properties = getElemById('shadow_properties');
+			elements.element_properties = getElemById('element_properties');
+			elements.transform_rotate = getElemById('transform_rotate');
+			elements.zIndex = getElemById('z-index');
+
+			elem = document.querySelectorAll('#layer_menu [data-type="subject"]');
+			size = elem.length;
+
+			for (var i = 0; i &lt; size; i++) {
+				var S = new Stack(elem[i]);
+				stacks[elem[i].id] = S;
+				container.appendChild(S.container);
+				Tool.addCssClass(elem[i].id);
+			}
+
+			active.stack = stacks['element'];
+			stacks['element'].show();
+
+			layerManager.addEventListener("click", mouseEvents);
+			layerMenu.addEventListener("click", mouseEvents);
+
+			ButtonManager.subscribe("before", function(value) {
+				if (value === false &amp;&amp; active.stack === stacks['before'])
+					setActiveStack(stacks['element'])
+				if (value === true &amp;&amp; active.stack !== stacks['before'])
+					setActiveStack(stacks['before'])
+			});
+
+			ButtonManager.subscribe("after", function(value) {
+				if (value === false &amp;&amp; active.stack === stacks['after'])
+					setActiveStack(stacks['element'])
+				if (value === true &amp;&amp; active.stack !== stacks['after'])
+					setActiveStack(stacks['after'])
+			});
+		}
+
+		return {
+			init : init
+		}
+	})();
+
+	/*
+	 * OutputManager
+	 */
+	var OutputManager = (function OutputManager() {
+		var classes = [];
+		var buttons = [];
+		var active = null;
+		var menu = null;
+		var button_offset = 0;
+
+		var crateOutputNode = function(topic, property) {
+
+			var prop = document.createElement('div');
+			var name = document.createElement('span');
+			var value = document.createElement('span');
+
+			var pmatch = property.match(/(^([a-z0-9\-]*)=\[([a-z0-9\-\"]*)\])|^([a-z0-9\-]*)/i);
+
+			name.textContent = '\t' + pmatch[4];
+
+			if (pmatch[3] !== undefined) {
+				name.textContent = '\t' + pmatch[2];
+				value.textContent = pmatch[3] + ';';
+			}
+
+			name.textContent += ': ';
+			prop.className = 'css-property';
+			name.className = 'name';
+			value.className = 'value';
+			prop.appendChild(name);
+			prop.appendChild(value);
+
+			classes[topic].node.appendChild(prop);
+			classes[topic].line[property] = prop;
+			classes[topic].prop[property] = value;
+		}
+
+		var OutputClass = function OutputClass(node) {
+			var topic = node.getAttribute('data-topic');
+			var prop = node.getAttribute('data-prop');
+			var name = node.getAttribute('data-name');
+			var properties = prop.split(' ');
+
+			classes[topic] = {};
+			classes[topic].node = node;
+			classes[topic].prop = [];
+			classes[topic].line = [];
+			classes[topic].button = new Button(topic);
+
+			var open_decl = document.createElement('div');
+			var end_decl = document.createElement('div');
+
+			open_decl.textContent = name + ' {';
+			end_decl.textContent = '}';
+			node.appendChild(open_decl);
+
+			for (var i in properties)
+				crateOutputNode(topic, properties[i]);
+
+			node.appendChild(end_decl);
+		}
+
+		var Button = function Button(topic) {
+			var button = document.createElement('div');
+
+			button.className = 'button';
+			button.textContent = topic;
+			button.style.left = button_offset + 'px';
+			button_offset += 100;
+
+			button.addEventListener("click", function() {
+				toggleDisplay(topic);
+			})
+
+			menu.appendChild(button);
+			return button;
+		}
+
+		var toggleDisplay = function toggleDisplay(topic) {
+			active.button.removeAttribute('data-active');
+			active.node.style.display = 'none';
+			active = classes[topic];
+			active.node.style.display = 'block';
+			active.button.setAttribute('data-active', 'true');
+		}
+
+		var toggleButton = function toggleButton(topic, value) {
+			var display = (value === true) ? 'block' : 'none';
+			classes[topic].button.style.display = display;
+
+			if (value === true)
+				toggleDisplay(topic);
+			else
+				toggleDisplay('element');
+		}
+
+		var updateProperty = function updateProperty(topic, property, data) {
+			try {
+				classes[topic].prop[property].textContent = data + ';';
+			}
+			catch(error) {
+				// console.log("ERROR undefined : ", topic, property, data);
+			}
+		}
+
+		var toggleProperty = function toggleProperty(topic, property, value) {
+			var display = (value === true) ? 'block' : 'none';
+			try {
+				classes[topic].line[property].style.display = display;
+			}
+			catch(error) {
+				// console.log("ERROR undefined : ",classes, topic, property, value);
+			}
+		}
+
+		var init = function init() {
+
+			menu = getElemById('menu');
+
+			var elem = document.querySelectorAll('#output .output');
+			var size = elem.length;
+			for (var i = 0; i &lt; size; i++)
+				OutputClass(elem[i]);
+
+			active = classes['element'];
+			toggleDisplay('element');
+
+			ButtonManager.subscribe("before", function(value) {
+				toggleButton('before', value);
+			});
+
+			ButtonManager.subscribe("after", function(value) {
+				toggleButton('after', value);
+			});
+		}
+
+		return {
+			init : init,
+			updateProperty : updateProperty,
+			toggleProperty : toggleProperty
+		}
+
+	})();
+
+
+	/**
+	 * Init Tool
+	 */
+	var init = function init() {
+		ButtonManager.init();
+		OutputManager.init();
+		ColoPicker.init();
+		SliderManager.init();
+		LayerManager.init();
+		PreviewMouseTracking.init("preview");
+		Tool.init();
+	}
+
+	return {
+		init : init
+	}
+
+})();
+
+
+</code></pre>
+</div>
+
+<div>{{ EmbedLiveSample('box-shadow_generator', '100%', '1100px', '') }}</div>
diff --git a/files/ko/web/css/css_flow_layout/index.html b/files/ko/web/css/css_flow_layout/index.html
index 32928121ff..76314bf596 100644
--- a/files/ko/web/css/css_flow_layout/index.html
+++ b/files/ko/web/css/css_flow_layout/index.html
@@ -38,7 +38,7 @@ translation_of: Web/CSS/CSS_Flow_Layout
  <li>{{Glossary("Block/CSS", "Block (CSS)")}}</li>
 </ul>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li>
  <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li>
diff --git a/files/ko/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html b/files/ko/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html
index ce1ce28415..e638a98944 100644
--- a/files/ko/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html
+++ b/files/ko/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html
@@ -706,7 +706,7 @@ tags:
 
 <p>이 글에서는 Grid 레이아웃 표준 문서에 나와 있는 내용을 아주 간단히 살펴보았습니다. 코드 예제를 좀 더 연구해 보시고, <a href="https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Grid_Layout/그리드_레이아웃과_다른_레이아웃_방법과의_관계">안내서의 다음 부분으로 넘어가서 CSS 그리드 레이아웃의 세부 사항을 조금 더 심도 있게 살펴보시기 바랍니다</a>.</p>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li><a href="/ko/docs/Web/CSS"><strong>CSS</strong></a></li>
  <li><a href="/ko/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li>
diff --git a/files/ko/web/css/css_grid_layout/grid_template_areas/index.html b/files/ko/web/css/css_grid_layout/grid_template_areas/index.html
index 10bfeb4262..4f435fb772 100644
--- a/files/ko/web/css/css_grid_layout/grid_template_areas/index.html
+++ b/files/ko/web/css/css_grid_layout/grid_template_areas/index.html
@@ -474,7 +474,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Grid_Template_Areas
 
 <p>만약 지금까지의 초반 가이드들을 쭉 훑어보셨다면, 이제 라인을 기준으로 한 배치나 이름이 지명된 영역을 사용해서 그리드 레이아웃을 만드실 수 있는 위치까지 도달하셨습니다. 다음엔 충분한 시간을 가지고 그리드를 사용해서 몇몇 일반적인 레이아웃 패턴을 만들어 보시도록 하십시오. 앞으로 더 배워야 할 많은 새로운 기술 용어들이 있지만, 이들의 문법은 비교적 이해하기 쉬울 겁니다. 여러 예제를 다루시면서, 지금까지 다루지 않았던 것들에 대한 여러 의문점과 복잡한 사용 사례들을 마주칠 수 있을 겁니다. 이번 가이드의 나머지 부분에서는 표준 명세서에 있는 좀 더 자세한 사항들을 알아 볼 예정입니다. 그래서 앞으로 소개될 기술을 가지고 좀 더 복잡한 고급 레이아웃을 만들 수 있게 되시길 바랍니다.</p>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li><a href="/ko/docs/Web/CSS"><strong>CSS</strong></a></li>
  <li><a href="/ko/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li>
diff --git a/files/ko/web/css/css_grid_layout/index.html b/files/ko/web/css/css_grid_layout/index.html
index f3d2b42199..bb81aaa02b 100644
--- a/files/ko/web/css/css_grid_layout/index.html
+++ b/files/ko/web/css/css_grid_layout/index.html
@@ -194,7 +194,7 @@ translation_of: Web/CSS/CSS_Grid_Layout
  </tbody>
 </table>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li>
  <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li>
diff --git a/files/ko/web/css/css_grid_layout/layout_using_named_grid_lines/index.html b/files/ko/web/css/css_grid_layout/layout_using_named_grid_lines/index.html
index bc0957fb2e..c2b23b1652 100644
--- a/files/ko/web/css/css_grid_layout/layout_using_named_grid_lines/index.html
+++ b/files/ko/web/css/css_grid_layout/layout_using_named_grid_lines/index.html
@@ -438,7 +438,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines
 
 <p>필요한 건 이게 전부 다입니다. 복잡한 계산 작업도 필요하지 않고, 그리드가 1fr 크기의 세로 열 트랙에 공간을 할당하기 전에, 자동으로 10픽셀 크기의 경계 여백 트랙이 차지하는 공간을 알아서 제거해 줍니다. 차차 여러분만의 레이아웃을 만들다 보면, 용법에 점점 더 익숙해 지면서 자기에게 맞는 작업 방식을 터득하게 되고, 나중에 만들고자 하는 프로젝트의 유형에 따라 적당한 것을 고를 수 있는 요령이 생기게 되실 겁니다. 우선은 지금까지 소개된 여러 방법들을 가지고 몇몇 자주 쓰이는 레이아웃의 형태들을 만들어 보신다면, 아마도 곧 가장 효율적인 자기만의 작업 방식을 찾으실 수 있을 겁니다. 그러면, 다음 가이드에선 배치 관련 프로퍼티를 전혀 쓰지 않고도 아이템들이 그리드 위에 알아서 배치되도록 만드는 방법을 알아보겠습니다.</p>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li>
  <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li>
diff --git a/files/ko/web/css/css_grid_layout/line-based_placement_with_css_grid/index.html b/files/ko/web/css/css_grid_layout/line-based_placement_with_css_grid/index.html
index 91b32582b4..a61eee8963 100644
--- a/files/ko/web/css/css_grid_layout/line-based_placement_with_css_grid/index.html
+++ b/files/ko/web/css/css_grid_layout/line-based_placement_with_css_grid/index.html
@@ -590,7 +590,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid
 
 <p>또한, 그리드에 배치된 아이템들은 원하시면 명확히 지정해서 서로 자리가 겹치게 할 수도 있다는 것을 잊지 마십시오. 이렇게 하면 특이하고 멋진 효과를 만들어 낼 수도 있습니다만, 만약에 시작 혹은 마지막 라인을 잘못 지정해 놓았다면, 의도치 않은 곳에서 서로 겹쳐 버리는 결과를 가져올 수도 있습니다. <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">Firefox Grid Highlighter</a>는 배우시면서 매우 유용하게 사용될 수 있는데, 특히나 그리드가 상당히 복잡한 경우에는 더 그렇습니다.</p>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li><a href="/ko/docs/Web/CSS"><strong>CSS</strong></a></li>
  <li><a href="/ko/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li>
diff --git a/files/ko/web/css/css_grid_layout/relationship_of_grid_layout/index.html b/files/ko/web/css/css_grid_layout/relationship_of_grid_layout/index.html
index 8483386140..153caa2bc5 100644
--- a/files/ko/web/css/css_grid_layout/relationship_of_grid_layout/index.html
+++ b/files/ko/web/css/css_grid_layout/relationship_of_grid_layout/index.html
@@ -566,7 +566,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout
 
 <p>이번 가이드에서 보셨듯이 CSS 그리드 레이아웃은 단지 여러분이 구현해 볼 수 있는 여러 기술 중 한 부분일 뿐입니다. 원하시는 다양한 효과를 얻기 위해서 다른 레이아웃 기술끼리 서로 혼합해서 사용하는 것을 두려워하지 마십시오.</p>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li><a href="/ko/docs/Web/CSS"><strong>CSS</strong></a></li>
  <li><a href="/ko/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li>
diff --git a/files/ko/web/css/grid-area/index.html b/files/ko/web/css/grid-area/index.html
index 5cfc24af42..33608d6daf 100644
--- a/files/ko/web/css/grid-area/index.html
+++ b/files/ko/web/css/grid-area/index.html
@@ -149,7 +149,7 @@ grid-area: unset;
  <li>Video tutorial: <em><a href="http://gridbyexample.com/video/grid-template-areas/">Grid Template Areas</a></em></li>
 </ul>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li>
  <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li>
diff --git a/files/ko/web/css/grid/index.html b/files/ko/web/css/grid/index.html
index d40269e901..785d8f3e3b 100644
--- a/files/ko/web/css/grid/index.html
+++ b/files/ko/web/css/grid/index.html
@@ -135,7 +135,7 @@ grid: unset;
  <li>Grid Layout Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas#Grid_definition_shorthands">Grid template areas - Grid definition shorthands</a></em></li>
 </ul>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li>
  <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li>
diff --git a/files/ko/web/html/element/del/index.html b/files/ko/web/html/element/del/index.html
index 47dd0c67da..7d973e7c33 100644
--- a/files/ko/web/html/element/del/index.html
+++ b/files/ko/web/html/element/del/index.html
@@ -71,8 +71,8 @@ here is the rest of the paragraph.&lt;/p&gt;
 
 <p>대부분의 스크린 리더는 기본값에서 <code>&lt;del&gt;</code> 요소의 존재를 표현하지 않습니다. 그러나 CSS {{cssxref("content")}} 속성과 {{cssxref("::before")}}, {{cssxref("::after")}} 의사 요소를 사용하면 소리내어 읽도록 할 수 있습니다.</p>
 
-<pre class="brush: css">ins::before,
-ins::after {
+<pre class="brush: css">del::before,
+del::after {
   clip-path: inset(100%);
   clip: rect(1px, 1px, 1px, 1px);
   height: 1px;
@@ -82,11 +82,11 @@ ins::after {
   width: 1px;
 }
 
-ins::before {
+del::before {
   content: " [제거 부분 시작] ";
 }
 
-ins::after {
+del::after {
   content: " [제거 부분 끝] ";
 }</pre>
 
diff --git a/files/ko/web/http/methods/options/index.html b/files/ko/web/http/methods/options/index.html
index 4b4b9a030d..8523cea7d6 100644
--- a/files/ko/web/http/methods/options/index.html
+++ b/files/ko/web/http/methods/options/index.html
@@ -86,7 +86,7 @@ Origin: http://foo.example
 Access-Control-Request-Method: POST
 Access-Control-Request-Headers: X-PINGOTHER, Content-Type</pre>
 
-<p>서버는 {{HTTPHeader("Access-Control-Allow-Methods")}}로 응답하고, <code>POST</code>, <code>GET</code>, 그리고 <code>OPTIONS</code> 메소드를 통해서 해당하는 자원을 문의 (query) 할 수 알려준다. 이 헤더는 {{HTTPHeader("Allow")}} 응답 헤더와 비슷하지만 반드시 CORS 에 한해서만 사용된다. </p>
+<p>서버는 {{HTTPHeader("Access-Control-Allow-Methods")}}로 응답하고, <code>POST</code>, <code>GET</code>, 그리고 <code>OPTIONS</code> 메소드를 통해서 해당하는 자원을 문의 (query) 할 수 있다고 알려준다. 이 헤더는 {{HTTPHeader("Allow")}} 응답 헤더와 비슷하지만 반드시 CORS 에 한해서만 사용된다. </p>
 
 <pre>HTTP/1.1 200 OK
 Date: Mon, 01 Dec 2008 01:15:39 GMT
diff --git a/files/ko/web/javascript/reference/global_objects/isnan/index.html b/files/ko/web/javascript/reference/global_objects/isnan/index.html
index 0e76c007d7..906e6344eb 100644
--- a/files/ko/web/javascript/reference/global_objects/isnan/index.html
+++ b/files/ko/web/javascript/reference/global_objects/isnan/index.html
@@ -10,7 +10,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/isNaN
 ---
 <div>{{jsSidebar("Objects")}}</div>
 
-<p><code><strong>isNaN()</strong></code> 함수는 어떤 값이 {{jsxref("NaN")}}인지 판별합니다. <code>isNaN</code> 함수는 몇몇 {{anch("일반적이지 않은 규칙")}}을 가지고 있으므로, ECMAScript 2015에서 추가한 {{jsxref("Number.isNaN()")}}으로 바꾸는 편이 좋을 수도 있습니다.</p>
+<p><code><strong>isNaN()</strong></code> 함수는 어떤 값이 {{jsxref("NaN")}}인지 판별합니다. <code>isNaN</code> 함수는 몇몇 <a href="special-behavior">혼란스러운 케이스</a>을 가지고 있으므로, ECMAScript 2015에서 추가한 {{jsxref("Number.isNaN()")}}으로 바꾸는 편이 좋을 수도 있습니다.</p>
 
 <p>{{EmbedInteractiveExample("pages/js/globalprops-isnan.html")}}</p>
 
diff --git a/files/ko/web/xpath/index.html b/files/ko/web/xpath/index.html
index b06498cf53..13fb58074f 100644
--- a/files/ko/web/xpath/index.html
+++ b/files/ko/web/xpath/index.html
@@ -8,6 +8,58 @@ translation_of: Web/XPath
 <p>XPath는 XML Path Language를 나타내고 <a href="/ko/XML" title="ko/XML">XML</a> 문서의 다른 부분을 주소 지정하는(가리키는) 유연한 방법을 제공하는 비XML 문법을 씁니다. 이와 동시에, 또한 패턴과 일치하는지 알아보기 위해 문서 안에 주소 지정된 노드를 검사하는데도 쓰일 수 있습니다.</p>
 <p>XPath는 주로 <a href="/ko/XSLT" title="ko/XSLT">XSLT</a>에서 쓰입니다. 하지만 또한 <a href="/ko/DOM/document.getElementById" title="ko/DOM/document.getElementById">getElementById</a> 메소드, <a href="/ko/DOM/element.childNodes" title="ko/DOM/element.childNodes">childNodes</a> 특성들에 의존하는 대신 HTML과 <a href="/ko/XUL" title="ko/XUL">XUL</a> 같은 다른 XML에 기반을 둔 언어 문서를 <a href="/ko/DOM" title="ko/DOM">DOM</a>을 통해 항해하는 더 나은 강력한 방법으로도 쓰입니다. <span>다음은 모호합니다: 이는 확장기능 안에서 특히 쓸모 있습니다, 특히 <a href="/ko/XUL_Overlays">overlays</a>를 고려하면.</span></p>
 <p>XPath는 XML 문서의 계층 구조를 항해하기 위해 경로 표기법(URL의 경우와 같이)을 씁니다. <a href="/ko/URI" title="ko/URI">URI</a>와 XML 속성값에 쓰일 수 있도록 비XML 문법을 씁니다.</p>
-<table class="topicpage-table"> <tbody> <tr> <td> <h4 id=".EB.AC.B8.EC.84.9C"><a href="/Special:Tags?tag=XPath&amp;language=ko" title="Special:Tags?tag=XPath&amp;language=ko">문서</a></h4> <dl> <dt><a href="/ko/Introduction_to_using_XPath_in_JavaScript" title="ko/Introduction_to_using_XPath_in_JavaScript">Introduction to using XPath in JavaScript</a></dt> <dd><small>XPath의 비XSLT 사용을 기술합니다.</small></dd> </dl> <dl> <dt><a href="/ko/XPath/Axes" title="ko/XPath/Axes">XPath:Axes</a></dt> <dd><small>XPath 명세에 정의된 축의 정의와 목록. 축은 노드 사이의 관계를 기술하는데 씁니다.</small></dd> </dl> <dl> <dt><a href="/ko/XPath/Functions" title="ko/XPath/Functions">XPath:Functions</a></dt> <dd><small>기본 XPath 함수와 XPath에 더해진 XSLT 고유의 추가분 설명과 나열.</small></dd> </dl> <dl> <dt><a href="/ko/Transforming_XML_with_XSLT" title="ko/Transforming_XML_with_XSLT">Transforming XML with XSLT</a></dt> <dd><small>XSLT는 변환하고 싶은 XML 문서 내의 코드 조각(segment)을 주소지정하기 위해 XPath를 씁니다.</small></dd> </dl> <dl> <dt><a href="/ko/Using_XPath" title="ko/Using_XPath">Using XPath</a></dt> <dd><small>XPath를 DOM과 바인딩하는 코드와 예제</small></dd> </dl> <dl> <dt><a class="external" href="http://www.topxml.com/xsl/tutorials/intro/">XSLT &amp; XPath Tutorial</a></dt> <dd><small>TopXML의 XSLT 입문서는 XSLT와 XPath의 기본 개념, 문법, 프로그래밍을 소개합니다.</small></dd> </dl> <dl> <dt><a class="external" href="http://www.xml.com/pub/a/2000/08/holman/">What is XSLT?</a></dt> <dd><small>XSLT와 XPath에 관한 이 광범위한 소개는 두 기술 사이에 우선순위가 없다 보고 읽는 이를 배경, 문맥, 구조, 개념, 입문 용어로 안내합니다.</small></dd> </dl> <p><span><a href="/Special:Tags?tag=XPath&amp;language=ko" title="Special:Tags?tag=XPath&amp;language=ko">View All...</a></span></p> </td> <td> <h4 id=".EB.8F.84.EA.B5.AC">도구</h4> <dl> <dd><a class="external" href="http://b-cage.net/code/web/xpath-evaluator.html">Online XPath evaluator</a></dd> </dl> <dl> <dd><a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/1095">XPath Checker</a></dd> <dd><small>An interactive editor for XPath expressions (FireFox Add-On).</small></dd> </dl> <dl> <dd><a class="external" href="http://www.sketchpath.com/">SketchPath</a></dd> <dd><small>A Graphical XPath Builder/Debugger(.NET).</small></dd> </dl> <h4 id=".EA.B4.80.EB.A0.A8_.EC.A3.BC.EC.A0.9C">관련 주제</h4> <dl> <dd><a href="/ko/XSLT" title="ko/XSLT">XSLT</a>, <a href="/ko/XQuery" title="ko/XQuery">XQuery</a>, <a href="/ko/XML" title="ko/XML">XML</a>, <a href="/ko/DOM" title="ko/DOM">DOM</a></dd> </dl> <p> </p> </td> </tr> </tbody>
+<table class="topicpage-table">
+  <tbody>
+    <tr>
+      <td>
+        <h4 id=".EB.AC.B8.EC.84.9C"><a href="/Special:Tags?tag=XPath&amp;language=ko" title="Special:Tags?tag=XPath&amp;language=ko">문서</a></h4>
+        <dl>
+          <dt><a href="/ko/Introduction_to_using_XPath_in_JavaScript" title="ko/Introduction_to_using_XPath_in_JavaScript">Introduction to using XPath in JavaScript</a></dt>
+          <dd><small>XPath의 비XSLT 사용을 기술합니다.</small></dd>
+        </dl>
+        <dl>
+          <dt><a href="/ko/XPath/Axes" title="ko/XPath/Axes">XPath:Axes</a></dt>
+          <dd><small>XPath 명세에 정의된 축의 정의와 목록. 축은 노드 사이의 관계를 기술하는데 씁니다.</small></dd>
+        </dl>
+        <dl>
+          <dt><a href="/ko/XPath/Functions" title="ko/XPath/Functions">XPath:Functions</a></dt>
+          <dd><small>기본 XPath 함수와 XPath에 더해진 XSLT 고유의 추가분 설명과 나열.</small></dd>
+        </dl>
+        <dl>
+          <dt><a href="/ko/Transforming_XML_with_XSLT" title="ko/Transforming_XML_with_XSLT">Transforming XML with XSLT</a></dt>
+          <dd><small>XSLT는 변환하고 싶은 XML 문서 내의 코드 조각(segment)을 주소지정하기 위해 XPath를 씁니다.</small></dd>
+        </dl>
+        <dl>
+          <dt><a href="/ko/Using_XPath" title="ko/Using_XPath">Using XPath</a></dt>
+          <dd><small>XPath를 DOM과 바인딩하는 코드와 예제</small></dd>
+        </dl>
+        <dl>
+          <dt><a class="external" href="http://www.xml.com/pub/a/2000/08/holman/">What is XSLT?</a></dt>
+          <dd><small>XSLT와 XPath에 관한 이 광범위한 소개는 두 기술 사이에 우선순위가 없다 보고 읽는 이를 배경, 문맥, 구조, 개념, 입문 용어로 안내합니다.</small></dd>
+        </dl>
+        <p><span><a href="/Special:Tags?tag=XPath&amp;language=ko" title="Special:Tags?tag=XPath&amp;language=ko">View All...</a></span></p>
+      </td>
+      <td>
+        <h4 id=".EB.8F.84.EA.B5.AC">도구</h4>
+        <dl>
+          <dd><a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/chropath-for-firefox/">ChroPath</a></dd>
+          <dd>FireBug에 통합된 XPath 패널 도구 (FireFox 확장 도구)</dd>
+        </dl>
+        <dl>
+          <dd><a class="external" href="http://qutoric.com/xmlquire/">XMLQuire (구 SketchPath)</a></dd>
+          <dd>그래픽 기반 XPath 작성기/디버거 (.NET)</dd>
+        </dl>
+        <dl>
+          <dd><a class="link-https" href="https://extendsclass.com/xpath-tester.html">XPath tester</a></dd>
+          <dd>온라인 XPath 작성기/디버거</dd>
+        </dl>
+        <h4 id=".EA.B4.80.EB.A0.A8_.EC.A3.BC.EC.A0.9C">관련 주제</h4>
+        <dl>
+          <dd><a href="/ko/XSLT" title="ko/XSLT">XSLT</a>, <a href="/ko/XQuery" title="ko/XQuery">XQuery</a>, <a href="/ko/XML" title="ko/XML">XML</a>, <a href="/ko/DOM" title="ko/DOM">DOM</a></dd>
+        </dl>
+        <p> </p>
+      </td>
+    </tr>
+  </tbody>
 </table>
 <p>{{ languages( { "cs": "cs/XPath", "es": "es/XPath", "fr": "fr/XPath", "ja": "ja/XPath", "ko": "ko/XPath", "pl": "pl/XPath" } ) }}</p>
diff --git a/files/pl/_redirects.txt b/files/pl/_redirects.txt
index e993e7fb5d..82c05c3816 100644
--- a/files/pl/_redirects.txt
+++ b/files/pl/_redirects.txt
@@ -399,8 +399,8 @@
 /pl/docs/DOM/event.layerX	/pl/docs/Web/API/UIEvent/layerX
 /pl/docs/DOM/event.layerY	/pl/docs/Web/API/UIEvent/layerY
 /pl/docs/DOM/event.metaKey	/pl/docs/Web/API/MouseEvent/metaKey
-/pl/docs/DOM/event.pageX	/pl/docs/Web/API/UIEvent/pageX
-/pl/docs/DOM/event.pageY	/pl/docs/Web/API/UIEvent/pageY
+/pl/docs/DOM/event.pageX	/pl/docs/Web/API/MouseEvent/pageX
+/pl/docs/DOM/event.pageY	/pl/docs/Web/API/MouseEvent/pageY
 /pl/docs/DOM/event.relatedTarget	/pl/docs/Web/API/MouseEvent/relatedTarget
 /pl/docs/DOM/event.screenX	/pl/docs/Web/API/MouseEvent/screenX
 /pl/docs/DOM/event.screenY	/pl/docs/Web/API/MouseEvent/screenY
@@ -439,8 +439,8 @@
 /pl/docs/DOM/table.tHead	/pl/docs/Web/API/HTMLTableElement/tHead
 /pl/docs/DOM/window	/pl/docs/Web/API/Window
 /pl/docs/DOM/window.alert	/pl/docs/Web/API/Window/alert
-/pl/docs/DOM/window.clearInterval	/pl/docs/Web/API/WindowOrWorkerGlobalScope/clearInterval
-/pl/docs/DOM/window.clearTimeout	/pl/docs/Web/API/WindowOrWorkerGlobalScope/clearTimeout
+/pl/docs/DOM/window.clearInterval	/pl/docs/Web/API/clearInterval
+/pl/docs/DOM/window.clearTimeout	/pl/docs/Web/API/clearTimeout
 /pl/docs/DOM/window.closed	/pl/docs/Web/API/Window/closed
 /pl/docs/DOM/window.controllers	/pl/docs/Web/API/Window/controllers
 /pl/docs/DOM/window.crypto	/pl/docs/Web/API/Window/crypto
@@ -480,8 +480,8 @@
 /pl/docs/DOM/window.scrollByLines	/pl/docs/Web/API/Window/scrollByLines
 /pl/docs/DOM/window.scrollByPages	/pl/docs/Web/API/Window/scrollByPages
 /pl/docs/DOM/window.scrollTo	/pl/docs/Web/API/Window/scrollTo
-/pl/docs/DOM/window.setInterval	/pl/docs/Web/API/WindowOrWorkerGlobalScope/setInterval
-/pl/docs/DOM/window.setTimeout	/pl/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout
+/pl/docs/DOM/window.setInterval	/pl/docs/Web/API/setInterval
+/pl/docs/DOM/window.setTimeout	/pl/docs/Web/API/setTimeout
 /pl/docs/DOM:CSS	/pl/docs/Web/CSS/Reference
 /pl/docs/DOM:Selection	/pl/docs/Web/API/Selection
 /pl/docs/DOM:Selection:addRange	/pl/docs/Web/API/Selection/addRange
@@ -633,8 +633,8 @@
 /pl/docs/DOM:event.layerX	/pl/docs/Web/API/UIEvent/layerX
 /pl/docs/DOM:event.layerY	/pl/docs/Web/API/UIEvent/layerY
 /pl/docs/DOM:event.metaKey	/pl/docs/Web/API/MouseEvent/metaKey
-/pl/docs/DOM:event.pageX	/pl/docs/Web/API/UIEvent/pageX
-/pl/docs/DOM:event.pageY	/pl/docs/Web/API/UIEvent/pageY
+/pl/docs/DOM:event.pageX	/pl/docs/Web/API/MouseEvent/pageX
+/pl/docs/DOM:event.pageY	/pl/docs/Web/API/MouseEvent/pageY
 /pl/docs/DOM:event.relatedTarget	/pl/docs/Web/API/MouseEvent/relatedTarget
 /pl/docs/DOM:event.screenX	/pl/docs/Web/API/MouseEvent/screenX
 /pl/docs/DOM:event.screenY	/pl/docs/Web/API/MouseEvent/screenY
@@ -712,8 +712,8 @@
 /pl/docs/DOM:window.scrollByLines	/pl/docs/Web/API/Window/scrollByLines
 /pl/docs/DOM:window.scrollByPages	/pl/docs/Web/API/Window/scrollByPages
 /pl/docs/DOM:window.scrollTo	/pl/docs/Web/API/Window/scrollTo
-/pl/docs/DOM:window.setInterval	/pl/docs/Web/API/WindowOrWorkerGlobalScope/setInterval
-/pl/docs/DOM:window.setTimeout	/pl/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout
+/pl/docs/DOM:window.setInterval	/pl/docs/Web/API/setInterval
+/pl/docs/DOM:window.setTimeout	/pl/docs/Web/API/setTimeout
 /pl/docs/Dodatki_w_Mozilli_-_FAQ(link)	https://addons.mozilla.org/faq.php
 /pl/docs/Dokumentacja_CSS	/pl/docs/Web/CSS/Reference
 /pl/docs/Dokumentacja_CSS/Rozszerzenia_Mozilli	/pl/docs/Web/CSS/Mozilla_Extensions
@@ -1456,8 +1456,8 @@
 /pl/docs/Web/API/Event/layerX	/pl/docs/Web/API/UIEvent/layerX
 /pl/docs/Web/API/Event/layerY	/pl/docs/Web/API/UIEvent/layerY
 /pl/docs/Web/API/Event/metaKey	/pl/docs/Web/API/MouseEvent/metaKey
-/pl/docs/Web/API/Event/pageX	/pl/docs/Web/API/UIEvent/pageX
-/pl/docs/Web/API/Event/pageY	/pl/docs/Web/API/UIEvent/pageY
+/pl/docs/Web/API/Event/pageX	/pl/docs/Web/API/MouseEvent/pageX
+/pl/docs/Web/API/Event/pageY	/pl/docs/Web/API/MouseEvent/pageY
 /pl/docs/Web/API/Event/relatedTarget	/pl/docs/Web/API/MouseEvent/relatedTarget
 /pl/docs/Web/API/Event/screenX	/pl/docs/Web/API/MouseEvent/screenX
 /pl/docs/Web/API/Event/screenY	/pl/docs/Web/API/MouseEvent/screenY
@@ -1499,16 +1499,24 @@
 /pl/docs/Web/API/Stylesheet/cssRules	/pl/docs/Web/API/CSSRuleList
 /pl/docs/Web/API/Stylesheet/deleteRule	/pl/docs/Web/API/CSSStyleSheet/deleteRule
 /pl/docs/Web/API/Stylesheet/insertRule	/pl/docs/Web/API/CSSStyleSheet/insertRule
-/pl/docs/Web/API/Window/clearInterval	/pl/docs/Web/API/WindowOrWorkerGlobalScope/clearInterval
-/pl/docs/Web/API/Window/clearTimeout	/pl/docs/Web/API/WindowOrWorkerGlobalScope/clearTimeout
+/pl/docs/Web/API/UIEvent/pageX	/pl/docs/Web/API/MouseEvent/pageX
+/pl/docs/Web/API/UIEvent/pageY	/pl/docs/Web/API/MouseEvent/pageY
+/pl/docs/Web/API/Window/clearInterval	/pl/docs/Web/API/clearInterval
+/pl/docs/Web/API/Window/clearTimeout	/pl/docs/Web/API/clearTimeout
 /pl/docs/Web/API/Window/onload	/pl/docs/Web/API/GlobalEventHandlers/onload
-/pl/docs/Web/API/Window/setInterval	/pl/docs/Web/API/WindowOrWorkerGlobalScope/setInterval
-/pl/docs/Web/API/Window/setTimeout	/pl/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout
+/pl/docs/Web/API/Window/setInterval	/pl/docs/Web/API/setInterval
+/pl/docs/Web/API/Window/setTimeout	/pl/docs/Web/API/setTimeout
 /pl/docs/Web/API/WindowBase64	/pl/docs/Web/API/WindowOrWorkerGlobalScope
-/pl/docs/Web/API/WindowBase64.atob	/pl/docs/Web/API/WindowOrWorkerGlobalScope/atob
-/pl/docs/Web/API/WindowBase64.btoa	/pl/docs/Web/API/WindowOrWorkerGlobalScope/btoa
-/pl/docs/Web/API/WindowBase64/atob	/pl/docs/Web/API/WindowOrWorkerGlobalScope/atob
-/pl/docs/Web/API/WindowBase64/btoa	/pl/docs/Web/API/WindowOrWorkerGlobalScope/btoa
+/pl/docs/Web/API/WindowBase64.atob	/pl/docs/Web/API/atob
+/pl/docs/Web/API/WindowBase64.btoa	/pl/docs/Web/API/btoa
+/pl/docs/Web/API/WindowBase64/atob	/pl/docs/Web/API/atob
+/pl/docs/Web/API/WindowBase64/btoa	/pl/docs/Web/API/btoa
+/pl/docs/Web/API/WindowOrWorkerGlobalScope/atob	/pl/docs/Web/API/atob
+/pl/docs/Web/API/WindowOrWorkerGlobalScope/btoa	/pl/docs/Web/API/btoa
+/pl/docs/Web/API/WindowOrWorkerGlobalScope/clearInterval	/pl/docs/Web/API/clearInterval
+/pl/docs/Web/API/WindowOrWorkerGlobalScope/clearTimeout	/pl/docs/Web/API/clearTimeout
+/pl/docs/Web/API/WindowOrWorkerGlobalScope/setInterval	/pl/docs/Web/API/setInterval
+/pl/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout	/pl/docs/Web/API/setTimeout
 /pl/docs/Web/API/Zdarzenia_dotykowe	/pl/docs/Web/API/Touch_events
 /pl/docs/Web/API/powiadomienie	/pl/docs/Web/API/Notification
 /pl/docs/Web/Accessibility/ARIA/Aplikacje_internetowe_i_ARIA_FAQ	/pl/docs/Web/Accessibility/ARIA/Web_applications_and_ARIA_FAQ
diff --git a/files/pl/_wikihistory.json b/files/pl/_wikihistory.json
index 6ca2ddb0bc..331ae74307 100644
--- a/files/pl/_wikihistory.json
+++ b/files/pl/_wikihistory.json
@@ -2916,6 +2916,25 @@
       "Ptak82"
     ]
   },
+  "Web/API/MouseEvent/pageX": {
+    "modified": "2019-03-23T23:42:37.418Z",
+    "contributors": [
+      "teoli",
+      "khalid32",
+      "Mgjbot",
+      "Jan Dudek",
+      "Ptak82"
+    ]
+  },
+  "Web/API/MouseEvent/pageY": {
+    "modified": "2019-03-23T23:41:13.568Z",
+    "contributors": [
+      "teoli",
+      "khalid32",
+      "Jan Dudek",
+      "Ptak82"
+    ]
+  },
   "Web/API/MouseEvent/relatedTarget": {
     "modified": "2019-03-23T23:41:15.246Z",
     "contributors": [
@@ -3535,25 +3554,6 @@
       "Ptak82"
     ]
   },
-  "Web/API/UIEvent/pageX": {
-    "modified": "2019-03-23T23:42:37.418Z",
-    "contributors": [
-      "teoli",
-      "khalid32",
-      "Mgjbot",
-      "Jan Dudek",
-      "Ptak82"
-    ]
-  },
-  "Web/API/UIEvent/pageY": {
-    "modified": "2019-03-23T23:41:13.568Z",
-    "contributors": [
-      "teoli",
-      "khalid32",
-      "Jan Dudek",
-      "Ptak82"
-    ]
-  },
   "Web/API/UIEvent/view": {
     "modified": "2019-03-23T23:41:50.711Z",
     "contributors": [
@@ -3881,21 +3881,33 @@
       "teoli"
     ]
   },
-  "Web/API/WindowOrWorkerGlobalScope/atob": {
+  "Web/API/XMLHttpRequest": {
+    "modified": "2019-03-23T23:55:55.505Z",
+    "contributors": [
+      "fnevgeny",
+      "Flaneur",
+      "Bedi",
+      "Mgjbot",
+      "Ptak82",
+      "Ziombka",
+      "gandalf"
+    ]
+  },
+  "Web/API/atob": {
     "modified": "2019-03-23T23:09:12.984Z",
     "contributors": [
       "teoli",
       "Eltu"
     ]
   },
-  "Web/API/WindowOrWorkerGlobalScope/btoa": {
+  "Web/API/btoa": {
     "modified": "2019-03-23T23:09:14.333Z",
     "contributors": [
       "teoli",
       "Eltu"
     ]
   },
-  "Web/API/WindowOrWorkerGlobalScope/clearInterval": {
+  "Web/API/clearInterval": {
     "modified": "2019-03-24T00:10:08.372Z",
     "contributors": [
       "teoli",
@@ -3904,7 +3916,7 @@
       "qfel13"
     ]
   },
-  "Web/API/WindowOrWorkerGlobalScope/clearTimeout": {
+  "Web/API/clearTimeout": {
     "modified": "2019-03-24T00:10:09.180Z",
     "contributors": [
       "teoli",
@@ -3912,7 +3924,7 @@
       "qfel13"
     ]
   },
-  "Web/API/WindowOrWorkerGlobalScope/setInterval": {
+  "Web/API/setInterval": {
     "modified": "2019-03-24T00:10:09.408Z",
     "contributors": [
       "Bajdzis",
@@ -3923,7 +3935,7 @@
       "Jan Dudek"
     ]
   },
-  "Web/API/WindowOrWorkerGlobalScope/setTimeout": {
+  "Web/API/setTimeout": {
     "modified": "2019-03-24T00:10:06.439Z",
     "contributors": [
       "teoli",
@@ -3934,18 +3946,6 @@
       "Jan Dudek"
     ]
   },
-  "Web/API/XMLHttpRequest": {
-    "modified": "2019-03-23T23:55:55.505Z",
-    "contributors": [
-      "fnevgeny",
-      "Flaneur",
-      "Bedi",
-      "Mgjbot",
-      "Ptak82",
-      "Ziombka",
-      "gandalf"
-    ]
-  },
   "Web/Accessibility": {
     "modified": "2019-09-09T14:17:31.130Z",
     "contributors": [
diff --git a/files/pl/glossary/accessibility_tree/index.html b/files/pl/glossary/accessibility_tree/index.html
index e67c81a88e..e0d8aab2b3 100644
--- a/files/pl/glossary/accessibility_tree/index.html
+++ b/files/pl/glossary/accessibility_tree/index.html
@@ -28,7 +28,7 @@ translation_of: Glossary/Accessibility_tree
 
 <p>Dodatkowo, drzewo dostępności często zawiera informacje o tym co można z danym elementem, zrobić: hiperłącze można <em>kliknąć,</em> pole tekstowe <em>wypełnić</em>, itd.</p>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li><a href="/en-US/docs/Glossary">Glossary</a>
 
diff --git a/files/pl/glossary/semantics/index.html b/files/pl/glossary/semantics/index.html
index 72cd9321d4..bb0a02961d 100644
--- a/files/pl/glossary/semantics/index.html
+++ b/files/pl/glossary/semantics/index.html
@@ -69,7 +69,7 @@ original_slug: Glossary/Semantyka
  <li>{{interwiki("wikipedia", "Semantics#Computer_science", "The meaning of semantics in computer science")}} on Wikipedia</li>
 </ul>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ul>
  <li><a href="/en-US/docs/Glossary">MDN Web Docs Glossary</a>
 
diff --git a/files/pl/web/api/atob/index.html b/files/pl/web/api/atob/index.html
new file mode 100644
index 0000000000..9e589fdfae
--- /dev/null
+++ b/files/pl/web/api/atob/index.html
@@ -0,0 +1,105 @@
+---
+title: WindowBase64.atob()
+slug: Web/API/atob
+tags:
+  - API
+  - Base-64
+  - Base64
+  - Method
+  - Metodă
+  - Reference
+  - Referencja
+  - WindowBase64
+translation_of: Web/API/WindowOrWorkerGlobalScope/atob
+original_slug: Web/API/WindowOrWorkerGlobalScope/atob
+---
+<p>{{APIRef}}</p>
+<p>Funkcja <strong><code>WindowBase64.atob()</code></strong> dekoduje ciąg danych, który został zakodowany używając kodowania base-64. Możesz użyć metody <a href="/pl/docs/Web/API/WindowBase64.btoa"><code>window.btoa()</code></a> aby zakodować i przesłać dane, które w innym wypadku mogą powodować problemy z komunikacją, a następnie odebrać je i użyć metody <code>window.atob()</code> aby zdekodować dane ponownie. Na przykład możesz zakodować, przesłać i zdekodować znaki kontrolne ASCII o wartościach od 0 do 31.</p>
+<p>Aby używać tej funkcji z ciągami Unicode albo UTF-8, zobacz <a href="/en-US/docs/Web/JavaScript/Base64_encoding_and_decoding#The_.22Unicode_Problem.22">tę uwagę w Kodowaniu i dekodowaniu Base64</a> i <a href="/pl/docs/Web/API/WindowBase64.btoa#Ci.C4.85gi_Unicode">tę uwagę w <code>window.btoa()</code></a>.</p>
+<h2 id="Syntax" name="Syntax">Składnia</h2>
+<pre class="syntaxbox">var odkodowaneDane = window.atob(<em>zakodowaneDane</em>);</pre>
+<h2 id="Example" name="Example">Przykład</h2>
+<pre class="brush:js">var zakodowaneDane = window.btoa("Hello, world"); // kodowanie ciągu
+var odkodowaneDane = window.atob(zakodowaneDane); // odkodowywanie ciągu</pre>
+<h2 id="Specyfikacje">Specyfikacje</h2>
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specyfikacja</th>
+   <th scope="col">Status</th>
+   <th scope="col">Komentarz</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#dom-windowbase64-atob', 'WindowBase64.atob()')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Bez zmian od ostatniej migawki, {{SpecName("HTML5.1")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', '#dom-windowbase64-atob', 'WindowBase64.atob()')}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>Migawka {{SpecName("HTML WHATWG")}}. Bez zmian.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5 W3C", "#dom-windowbase64-atob", "WindowBase64.atob()")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Migawka {{SpecName("HTML WHATWG")}}. Utworzenie <code>WindowBase64</code> (properties where on the target before it).</td>
+  </tr>
+ </tbody>
+</table>
+<h2 id="Browser_compatibility" name="Browser_compatibility">Zgodność przeglądarek</h2>
+<div>
+ {{CompatibilityTable}}</div>
+<div id="compat-desktop">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Funkcja</th>
+    <th>Chrome</th>
+    <th>Firefox (Gecko)</th>
+    <th>Internet Explorer</th>
+    <th>Opera</th>
+    <th>Safari (WebKit)</th>
+   </tr>
+   <tr>
+    <td>Podstawowa obsługa</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatGeckoDesktop(1)}}[1][2]</td>
+    <td>10</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div id="compat-mobile">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Funkcja</th>
+    <th>Android</th>
+    <th>Firefox Mobile (Gecko)</th>
+    <th>IE Mobile</th>
+    <th>Opera Mobile</th>
+    <th>Safari Mobile</th>
+   </tr>
+   <tr>
+    <td>Podstawowa obsługa</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatGeckoMobile(1)}}</td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<p>[1]  <code>btoa()</code> jest także dostępna dla komponentów XPCOM zaimplementowanych w JavaScript, nawet jeżeli <code><a href="https://developer.mozilla.org/pl/docs/DOM/window" lang="pl">window</a></code> nie jest globalnym obiektem w komponencie<code>.</code></p>
+<p>[2] Wraz z <a href="/pl/Firefox/Releases/27/Site_Compatibility">Firefoxem 27</a>, metoda <code>atob()</code> ignoruje wszystkie spacje w argumencie dla zgodności z najnowszą specyfikacją HTML5. ({{ bug(711180) }})</p>
+<h2 id="See_also" name="See_also">Zobacz też</h2>
+<ul>
+ <li><a href="https://developer.mozilla.org/Web/API/WindowBase64/Base64_encoding_and_decoding">Kodowanie i dekodowanie Base64</a></li>
+ <li><a href="/pl/docs/data_URIs"><code>data</code> URIs</a></li>
+ <li><a href="/pl/docs/Web/API/WindowBase64.btoa"><code>window.btoa()</code></a></li>
+</ul>
diff --git a/files/pl/web/api/btoa/index.html b/files/pl/web/api/btoa/index.html
new file mode 100644
index 0000000000..82f706f632
--- /dev/null
+++ b/files/pl/web/api/btoa/index.html
@@ -0,0 +1,127 @@
+---
+title: WindowBase64.btoa()
+slug: Web/API/btoa
+tags:
+  - API
+  - Base-64
+  - Base64
+  - Method
+  - Reference
+  - Referencja
+  - WindowBase64
+translation_of: Web/API/WindowOrWorkerGlobalScope/btoa
+original_slug: Web/API/WindowOrWorkerGlobalScope/btoa
+---
+<p>{{APIRef}}</p>
+<p>Tworzy string ASCII zakodowany w base-64 z ciągu ("string") danych binarnych.</p>
+<p>Metoda ta jednak nie nadaje się do konwertowania surowych ciągów <a href="http://www.unicode.org/standard/WhatIsUnicode.html">Unicode</a>! Zobacz sekcję Unicode poniżej.</p>
+<h2 id="Syntax" name="Syntax">Składnia</h2>
+<pre class="syntaxbox">var zakodowaneDane = window.btoa(<em>ciagDoZakodowania</em>);</pre>
+<h2 id="Example" name="Example">Przykład</h2>
+<pre class="brush:js">var zakodowaneDane = window.btoa("Hello, world"); // kodowanie ciągu
+var odkodowaneDane = window.atob(zakodowaneDane); // odkodowywanie ciągu ("Hello, world")
+</pre>
+<h2 id="Notes" name="Notes">Uwagi</h2>
+<p>Możesz używać tej metody do kodowania danych, które w innym wypadku mogą powodować problemy z komunikacją. Przekaż je, a następnie użyj metody <code><a href="/pl/docs/Web/API/WindowBase64.atob" title="DOM/window.atob">window.atob()</a></code> aby odkodować dane ponownie. Na przykład możesz zakodować znaki kontrolne takie jak ASCII o wartości od 0 do 31.</p>
+<p><code>btoa()</code> jest także dostępne dla komponentów XPCOM zaimplementowanych w JavaScript, nawet jeżeli <a href="/pl/docs/DOM/window" title="DOM/window"><code>window</code></a> nie jest globalnym obiektem w komponencie.</p>
+<h2 id="Ciągi_Unicode">Ciągi Unicode</h2>
+<p>W większości przeglądarek odwołanie się do <code>window.btoa()</code> z ciągiem Unicode spowoduje wystąpienie wyjątku <code>Character Out Of Range</code>.</p>
+<p>Aby tego uniknąć, rozważ ten model odnotowany przez <a class="external" href="http://ecmanaut.blogspot.com/2006/07/encoding-decoding-utf8-in-javascript.html">Johana Sundströma</a>:</p>
+<pre class="brush:js">function utf8_to_b64( str ) {
+    return window.btoa(encodeURIComponent( escape( str )));
+}
+
+function b64_to_utf8( str ) {
+    return unescape(decodeURIComponent(window.atob( str )));
+}
+
+// Usage:
+utf8_to_b64('✓ à la mode'); // JTI1dTI3MTMlMjUyMCUyNUUwJTI1MjBsYSUyNTIwbW9kZQ==
+b64_to_utf8('JTI1dTI3MTMlMjUyMCUyNUUwJTI1MjBsYSUyNTIwbW9kZQ=='); // "✓ à la mode"
+
+utf8_to_b64('I \u2661 Unicode!'); // SSUyNTIwJTI1dTI2NjElMjUyMFVuaWNvZGUlMjUyMQ==
+b64_to_utf8('SSUyNTIwJTI1dTI2NjElMjUyMFVuaWNvZGUlMjUyMQ=='); // "I ♡ Unicode!"
+
+</pre>
+<p>Lepszym, bardziej wiarygodnym i mniej wymagającym rozwiązaniem jest konwersja <code><a href="/pl/docs/Web/API/DOMString">DOMString</a></code> do ciągu zakodowanego w UTF-8 używając <a href="/pl/docs/Web/JavaScript/Typed_arrays">TypedArray</a>. W tym celu proszę zapoznać się z <a href="/en-US/docs/Web/JavaScript/Base64_encoding_and_decoding#Solution_.232_.E2.80.93_rewriting_atob()_and_btoa()_using_TypedArrays_and_UTF-8">tym akapitem</a>.</p>
+<h2 id="Browser_compatibility" name="Browser_compatibility">Specyfikacje</h2>
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specyfikacja</th>
+   <th scope="col">Status</th>
+   <th scope="col">Komentarz</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#dom-windowbase64-btoa', 'WindowBase64.btoa()')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Brak zmian od ostatniej migawki, {{SpecName("HTML5.1")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', '#dom-windowbase64-btoa', 'WindowBase64.btoa()')}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>Migawka {{SpecName("HTML WHATWG")}}. Bez zmian.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5 W3C", "#dom-windowbase64-btoa", "WindowBase64.btoa()")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Migawka {{SpecName("HTML WHATWG")}}. Utworzenie <code>WindowBase64</code> (properties where on the target before it).</td>
+  </tr>
+ </tbody>
+</table>
+<h2 id="Browser_compatibility" name="Browser_compatibility">Zgodność przeglądarek</h2>
+<div>
+ {{CompatibilityTable}}</div>
+<div id="compat-desktop">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Funkcja</th>
+    <th>Chrome</th>
+    <th>Firefox (Gecko)</th>
+    <th>Internet Explorer</th>
+    <th>Opera</th>
+    <th>Safari (WebKit)</th>
+   </tr>
+   <tr>
+    <td>Podstawowa obsługa</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatGeckoDesktop(1)}}[1]</td>
+    <td>10</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div id="compat-mobile">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Funkcja</th>
+    <th>Android</th>
+    <th>Firefox Mobile (Gecko)</th>
+    <th>IE Mobile</th>
+    <th>Opera Mobile</th>
+    <th>Safari Mobile</th>
+   </tr>
+   <tr>
+    <td>Podstawowa obsługa</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatGeckoMobile(1)}}</td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<p>[1] <code>btoa()</code> jest także dostępna dla komponentów XPCOM zaimplementowanych w JavaScript, nawet jeżeli <code><a href="/pl/docs/DOM/window" lang="pl">window</a></code> nie jest globalnym obiektem w komponencie<code>.</code></p>
+<h2 id="See_also" name="See_also">Zobacz też</h2>
+<ul>
+ <li><a href="/Web/API/WindowBase64/Base64_encoding_and_decoding">Kodowanie i dekodowanie Base64</a></li>
+ <li><a href="/pl/docs/data_URIs"><code>data</code> URIs</a></li>
+ <li><a href="/pl/docs/Web/API/WindowBase64.atob"><code>window.atob()</code></a></li>
+</ul>
diff --git a/files/pl/web/api/clearinterval/index.html b/files/pl/web/api/clearinterval/index.html
new file mode 100644
index 0000000000..b944d2303d
--- /dev/null
+++ b/files/pl/web/api/clearinterval/index.html
@@ -0,0 +1,29 @@
+---
+title: window.clearInterval
+slug: Web/API/clearInterval
+tags:
+  - Window
+translation_of: Web/API/WindowOrWorkerGlobalScope/clearInterval
+original_slug: Web/API/WindowOrWorkerGlobalScope/clearInterval
+---
+<div>
+ {{ApiRef}}</div>
+<h2 id="Summary" name="Summary">Podsumowanie</h2>
+<p>Anuluje powtarzającą się akcję, która została utworzona korzystając z <code><a href="/pl/docs/DOM/window.setInterval" title="DOM/window.setInterval">setInterval()</a></code>.</p>
+<h2 id="Syntax" name="Syntax">Składnia</h2>
+<pre class="syntaxbox"><em>window</em>.clearInterval(<em>idInterwalu</em>)
+</pre>
+<p><code>idInterwalu</code> to identyfikator powtarzającej się akcji, która ma zostać anulowana. Ten identyfikator został zwrócony z {{domxref("window.setInterval","setInterval()")}}.</p>
+<h2 id="Example" name="Example">Przykład</h2>
+<p>Zobacz <a href="/pl/docs/DOM/window.setInterval#Przyk.C5.82ad" title="DOM/window.setInterval#Przyk.C5.82ad">przykład z <code>setInterval()</code></a>.</p>
+<h2 id="Specification" name="Specification">Specification</h2>
+<p>{{DOM0}}</p>
+<h2 id="See_also" name="See_also">Zobacz także</h2>
+<ul>
+ <li><a href="/pl/docs/JavaScript/Timers" title="JavaScript/Timers">JavaScript zegary</a></li>
+ <li>{{domxref("window.setTimeout")}}</li>
+ <li>{{domxref("window.setInterval")}}</li>
+ <li>{{domxref("window.clearTimeout")}}</li>
+ <li>{{domxref("window.requestAnimationFrame")}}</li>
+ <li><a href="/pl/docs/JavaScript/Timers/Daemons" title="JavaScript/Timers/Daemons"><em>Daemons</em> zarządzanie</a></li>
+</ul>
diff --git a/files/pl/web/api/cleartimeout/index.html b/files/pl/web/api/cleartimeout/index.html
new file mode 100644
index 0000000000..4a910ca13e
--- /dev/null
+++ b/files/pl/web/api/cleartimeout/index.html
@@ -0,0 +1,41 @@
+---
+title: window.clearTimeout
+slug: Web/API/clearTimeout
+translation_of: Web/API/WindowOrWorkerGlobalScope/clearTimeout
+original_slug: Web/API/WindowOrWorkerGlobalScope/clearTimeout
+---
+<p>{{ ApiRef() }}</p>
+<h3 id="Summary" name="Summary">Podsumowanie</h3>
+<p>Usuwa opóźnienie ustanione przez <a href="/en/DOM/window.setTimeout" title="en/DOM/window.setTimeout">window.setTimeout()</a>.</p>
+<h3 id="Syntax" name="Syntax">Składnia</h3>
+<pre class="eval">window.clearTimeout(id)
+</pre>
+<p>gdzie <code>id</code> jest identyfikatorem opóźnienia do usunięcia, który został zwrócony podczas wywołania <a href="/en/DOM/window.setTimeout" title="en/DOM/window.setTimeout">window.setTimeout()</a>.</p>
+<h3 id="Example" name="Example">Przykład</h3>
+<p>Uruchomienie poniższego skryptu w kontekscie strony i pojedyncze kliknięcie spowoduje wyświetlenie wiadomości po jednej sekundzie. Jeżeli użytkownik będzie klikał na stronie przynajmniej raz na sekundę wiadomość nigdy nie zostanie wyświetlona.</p>
+<pre class="eval">var alarm = {
+  remind: function(aMessage) {
+    alert(aMessage);
+    delete this.timeoutID;
+  },
+
+  setup: function() {
+    this.cancel();
+    var self = this;
+    this.timeoutID = window.setTimeout(function(msg) {self.remind(msg);}, 1000, "Wake up!");
+  },
+
+  cancel: function() {
+    if(typeof this.timeoutID == "number") {
+      window.clearTimeout(this.timeoutID);
+      delete this.timeoutID;
+    }
+  }
+};
+window.onclick = function() { alarm.setup() };
+</pre>
+<h3 id="Notes" name="Notes">Uwagi</h3>
+<p>Przekazanie niepoprawnego ID do <code>clearTimeout</code> nie powoduje żadnej akcji (żaden błąd nie jest wyrzucany).</p>
+<h3 id="Specification" name="Specification">Specyfikacja</h3>
+<p>{{ DOM0() }}</p>
+<p>{{ languages( { "en": "en/DOM/window.clearTimeout", "fr": "fr/DOM/window.clearTimeout", "ja": "ja/DOM/window.clearTimeout", "pl": "pl/DOM/window.clearTimeout" } ) }}</p>
diff --git a/files/pl/web/api/mouseevent/pagex/index.html b/files/pl/web/api/mouseevent/pagex/index.html
new file mode 100644
index 0000000000..85e5636964
--- /dev/null
+++ b/files/pl/web/api/mouseevent/pagex/index.html
@@ -0,0 +1,18 @@
+---
+title: event.pageX
+slug: Web/API/MouseEvent/pageX
+tags:
+  - DOM
+  - Dokumentacja_Gecko_DOM
+  - Gecko
+  - Wszystkie_kategorie
+translation_of: Web/API/UIEvent/pageX
+original_slug: Web/API/UIEvent/pageX
+---
+<p>{{ ApiRef() }}</p>
+<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3>
+<p>Zwraca poziomą współrzędną miejsca, gdzie wystąpiło zdarzenie, względem całej strony.</p>
+<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3>
+<pre class="eval"><i>liczba</i> = event.pageX
+</pre>
+<p>{{ languages( { "en": "en/DOM/event.pageX", "es": "es/DOM/event.pageX" } ) }}</p>
diff --git a/files/pl/web/api/mouseevent/pagey/index.html b/files/pl/web/api/mouseevent/pagey/index.html
new file mode 100644
index 0000000000..a001ec316d
--- /dev/null
+++ b/files/pl/web/api/mouseevent/pagey/index.html
@@ -0,0 +1,16 @@
+---
+title: event.pageY
+slug: Web/API/MouseEvent/pageY
+tags:
+  - DOM
+  - Wszystkie_kategorie
+translation_of: Web/API/UIEvent/pageY
+original_slug: Web/API/UIEvent/pageY
+---
+<p>{{ ApiRef() }}</p>
+<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3>
+<p>Zwraca pionową współrzędną miejsca, gdzie wystąpiło zdarzenie, względem całej strony.</p>
+<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3>
+<pre class="eval"><i>liczba</i> = event.pageY
+</pre>
+<p>{{ languages( { "en": "en/DOM/event.pageY" } ) }}</p>
diff --git a/files/pl/web/api/setinterval/index.html b/files/pl/web/api/setinterval/index.html
new file mode 100644
index 0000000000..0149cda60d
--- /dev/null
+++ b/files/pl/web/api/setinterval/index.html
@@ -0,0 +1,88 @@
+---
+title: window.setInterval
+slug: Web/API/setInterval
+tags:
+  - DOM
+  - DOM_0
+  - Dokumentacja_Gecko_DOM
+  - Gecko
+  - Wszystkie_kategorie
+translation_of: Web/API/WindowOrWorkerGlobalScope/setInterval
+original_slug: Web/API/WindowOrWorkerGlobalScope/setInterval
+---
+<p>{{ ApiRef() }}</p>
+
+<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3>
+
+<p>Ustawia opóźnienie do cyklicznego wywoływania określonej funkcji.</p>
+
+<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3>
+
+<pre class="eval"><em>var idInterwalu</em> = window.setInterval(<em>funkcja</em>, <em>opóźnienie</em>[, <em>parametr1</em>, <em>parametr2</em>, ...]);
+<em>var idInterwalu</em> = window.setInterval(<em>kod</em>, <em>opóźnienie</em>);</pre>
+
+<p> Parametry</p>
+
+<ul>
+ <li><code style="font: normal normal normal 100%/normal 'Courier New', 'Andale Mono', monospace; color: inherit; font-weight: inherit;">idInterwalu</code> to identyfikator ustawianego interwału który można przekazać do funkcji <code><a href="/pl/DOM/window.clearInterval" title="pl/DOM/window.clearInterval">window.clearInterval()</a></code>.</li>
+ <li><code>funkcja</code> to funkcja, dla której ustawiane jest opóźnienie</li>
+ <li><code>kod </code>to ciąg znaków zawierający kod javascript do cyklicznego wykonania. Jest to składnia alternatywna, której wykorzystanie <strong>nie jest zalecane</strong> z tych samych powodów, co stosowanie <code><a href="/en/JavaScript/Reference/Global_Objects/eval#Don%27t_use_eval!" title="en/JavaScript/Reference/Global Objects/eval#Don't use eval!">eval()</a></code>.</li>
+ <li><code>opóźnienie</code> to liczba milisekund (tysięcznych części sekundy), co którą wywoływana będzie <code>funkcja </code>lub <code>kod</code></li>
+</ul>
+
+<p>Należy zwrócić uwagę, że przekazywanie dodatkowych parametrów w pierwszej składni nie działa w Internet Explorerze.</p>
+
+<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3>
+
+<pre class="brush: js">idInterwalu = window.setInterval(animuj, 500);
+</pre>
+
+<p> W poniższym przykładzie, funkcja <code>zmienKolorTekstu()</code> będzie wykonywana co sekundę, dopóki użytkownik nie naciśnie przycisku Stop, co spowoduje wywołanie <code>clearInterval() </code>z parametrem <code>idInterwalu</code>.</p>
+
+<pre class="brush: js" style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.286em; margin-left: 0px; padding-top: 15px; padding-right: 15px; padding-bottom: 15px; padding-left: 15px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; background-clip: initial; background-color: rgb(246, 246, 242); font: normal normal normal 100%/normal 'Courier New', 'Andale Mono', monospace;">&lt;html&gt;
+&lt;head&gt;
+&lt;title&gt;przykład z wykorzystaniem setInterval/clearInterval&lt;/title&gt;
+
+&lt;script type="text/javascript"&gt;
+var idInterwalu;
+
+function zmienKolor() {
+  idInterwalu = setInterval(zmienKolorTekstu, 1000);
+}
+
+function zmienKolorTekstu() {
+  var elem = document.getElementById("my_box");
+  if (elem.style.color == 'red') {
+    elem.style.color = 'blue';
+  } else {
+    elem.style.color = 'red';
+  }
+}
+
+function zatrzymajZmianeKoloru() {
+  clearInterval(idInterwalu);
+}
+&lt;/script&gt;
+&lt;/head&gt;
+
+&lt;body onload="zmienKolor();"&gt;
+&lt;div id="my_box"&gt;
+&lt;p&gt;Hello World&lt;/p&gt;
+&lt;/div&gt;
+&lt;button onclick="zatrzymajZmianeKoloru();"&gt;Stop&lt;/button&gt;
+&lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<h3 id="Uwagi">Uwagi</h3>
+
+<p>Funkcja setInterval() służy do ustawienia opóźnienia dla cyklicznie wywoływanych funkcji, takich jak funkcje animacji.</p>
+
+<p>Możliwe jest anulowanie wykonania fukcji poprzez wywołanie <code><a href="/pl/DOM/window.clearInterval" title="pl/DOM/window.clearInterval">window.clearInterval()</a></code>.</p>
+
+<p>Jeżeli funkcja ma zostać wykonana <em>tylko raz</em> a nie być wykonywana cyklicznie to należy skorzystać z  <code style="font: normal normal normal 100%/normal 'Courier New', 'Andale Mono', monospace; color: inherit; font-weight: inherit;"><a href="/pl/DOM/window.setTimeout" title="pl/DOM/window.setTimeout">window.setTimeout()</a></code>.</p>
+
+<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3>
+
+<p>{{ DOM0() }}</p>
+
+<p>{{ languages( { "en": "en/DOM/window.setInterval", "fr": "fr/DOM/window.setInterval", "ja": "ja/DOM/window.setInterval", "pl": "pl/DOM/window.setInterval" } ) }}</p>
diff --git a/files/pl/web/api/settimeout/index.html b/files/pl/web/api/settimeout/index.html
new file mode 100644
index 0000000000..d49c70ced3
--- /dev/null
+++ b/files/pl/web/api/settimeout/index.html
@@ -0,0 +1,47 @@
+---
+title: window.setTimeout
+slug: Web/API/setTimeout
+tags:
+  - DOM
+  - DOM_0
+  - Dokumentacja_Gecko_DOM
+  - Gecko
+  - Wszystkie_kategorie
+translation_of: Web/API/WindowOrWorkerGlobalScope/setTimeout
+original_slug: Web/API/WindowOrWorkerGlobalScope/setTimeout
+---
+<p>{{ ApiRef() }}</p>
+<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3>
+<p>Uruchamia fragment kodu bądź funkcję po określonym odstępie czasu.</p>
+<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3>
+<pre class="eval"><em>id</em> = window.setTimeout(<em>funkcja</em>, <em>opóźnienie</em>[, <em>param1</em>, <em>param2</em>, ...]);
+<em>id</em> = window.setTimeout(<em>kod</em>, <em>opóźnienie</em>);
+</pre>
+<p>gdzie</p>
+<ul>
+ <li><code>funkcja</code> to <a href="/pl/Dokumentacja_języka_JavaScript_1.5/Obiekty/Function" title="pl/Dokumentacja_języka_JavaScript_1.5/Obiekty/Function">funkcja</a>, jaką chcesz uruchomić po opóźnieniu
+  <ul>
+   <li>w alternatywnej składni, <code>kod</code> to ciąg znaków z kodem, który będzie wykonany po upływie podanego czasu</li>
+  </ul>
+ </li>
+ <li><code>opóźnienie</code> to liczba milisekund (tysięcznych części sekundy), po których upływie wykonana zostanie funkcja</li>
+ <li><code>id</code> to identyfikator, którego można użyć z <a href="/pl/DOM/window.clearTimeout" title="pl/DOM/window.clearTimeout">window.clearTimeout</a></li>
+</ul>
+<h3 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h3>
+<pre class="eval">window.setTimeout('window.parent.generateOutput()', 1000);
+</pre>
+<pre class="eval">function generateOutput(aConcise) {
+  if(aConcise)
+    parent.generateConciseOutput();
+  else
+    parent.generateOutput();
+}
+window.setTimeout(generateOutput, 1000, true);
+</pre>
+<p>Zobacz też <a href="/pl/DOM/window.clearTimeout#Example" title="pl/DOM/window.clearTimeout#Example">przykład użycia clearTimeout()</a>.</p>
+<h3 id="Uwagi" name="Uwagi">Uwagi</h3>
+<p>Możesz anulować opóźnienie wywołania funkcji za pomocą <a href="/pl/DOM/window.clearTimeout" title="pl/DOM/window.clearTimeout">window.clearTimeout()</a>.</p>
+<p>Jeśli chcesz, by funkcja była uruchamiana cyklicznie (np. co każde N milisekund), rozważ wykorzystanie <a href="/pl/DOM/window.setInterval" title="pl/DOM/window.setInterval">window.setInterval()</a>.</p>
+<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3>
+<p>{{ DOM0() }}</p>
+<p>{{ languages( { "en": "en/DOM/window.setTimeout", "fr": "fr/DOM/window.setTimeout", "ja": "ja/DOM/window.setTimeout", "pl": "pl/DOM/window.setTimeout" } ) }}</p>
diff --git a/files/pl/web/api/uievent/pagex/index.html b/files/pl/web/api/uievent/pagex/index.html
deleted file mode 100644
index 05b33b7b84..0000000000
--- a/files/pl/web/api/uievent/pagex/index.html
+++ /dev/null
@@ -1,18 +0,0 @@
----
-title: event.pageX
-slug: Web/API/UIEvent/pageX
-tags:
-  - DOM
-  - Dokumentacja_Gecko_DOM
-  - Gecko
-  - Wszystkie_kategorie
-translation_of: Web/API/UIEvent/pageX
-original_slug: Web/API/Event/pageX
----
-<p>{{ ApiRef() }}</p>
-<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3>
-<p>Zwraca poziomą współrzędną miejsca, gdzie wystąpiło zdarzenie, względem całej strony.</p>
-<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3>
-<pre class="eval"><i>liczba</i> = event.pageX
-</pre>
-<p>{{ languages( { "en": "en/DOM/event.pageX", "es": "es/DOM/event.pageX" } ) }}</p>
diff --git a/files/pl/web/api/uievent/pagey/index.html b/files/pl/web/api/uievent/pagey/index.html
deleted file mode 100644
index e1749273da..0000000000
--- a/files/pl/web/api/uievent/pagey/index.html
+++ /dev/null
@@ -1,16 +0,0 @@
----
-title: event.pageY
-slug: Web/API/UIEvent/pageY
-tags:
-  - DOM
-  - Wszystkie_kategorie
-translation_of: Web/API/UIEvent/pageY
-original_slug: Web/API/Event/pageY
----
-<p>{{ ApiRef() }}</p>
-<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3>
-<p>Zwraca pionową współrzędną miejsca, gdzie wystąpiło zdarzenie, względem całej strony.</p>
-<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3>
-<pre class="eval"><i>liczba</i> = event.pageY
-</pre>
-<p>{{ languages( { "en": "en/DOM/event.pageY" } ) }}</p>
diff --git a/files/pl/web/api/windoworworkerglobalscope/atob/index.html b/files/pl/web/api/windoworworkerglobalscope/atob/index.html
deleted file mode 100644
index 862f7b56fe..0000000000
--- a/files/pl/web/api/windoworworkerglobalscope/atob/index.html
+++ /dev/null
@@ -1,105 +0,0 @@
----
-title: WindowBase64.atob()
-slug: Web/API/WindowOrWorkerGlobalScope/atob
-tags:
-  - API
-  - Base-64
-  - Base64
-  - Method
-  - Metodă
-  - Reference
-  - Referencja
-  - WindowBase64
-translation_of: Web/API/WindowOrWorkerGlobalScope/atob
-original_slug: Web/API/WindowBase64/atob
----
-<p>{{APIRef}}</p>
-<p>Funkcja <strong><code>WindowBase64.atob()</code></strong> dekoduje ciąg danych, który został zakodowany używając kodowania base-64. Możesz użyć metody <a href="/pl/docs/Web/API/WindowBase64.btoa"><code>window.btoa()</code></a> aby zakodować i przesłać dane, które w innym wypadku mogą powodować problemy z komunikacją, a następnie odebrać je i użyć metody <code>window.atob()</code> aby zdekodować dane ponownie. Na przykład możesz zakodować, przesłać i zdekodować znaki kontrolne ASCII o wartościach od 0 do 31.</p>
-<p>Aby używać tej funkcji z ciągami Unicode albo UTF-8, zobacz <a href="/en-US/docs/Web/JavaScript/Base64_encoding_and_decoding#The_.22Unicode_Problem.22">tę uwagę w Kodowaniu i dekodowaniu Base64</a> i <a href="/pl/docs/Web/API/WindowBase64.btoa#Ci.C4.85gi_Unicode">tę uwagę w <code>window.btoa()</code></a>.</p>
-<h2 id="Syntax" name="Syntax">Składnia</h2>
-<pre class="syntaxbox">var odkodowaneDane = window.atob(<em>zakodowaneDane</em>);</pre>
-<h2 id="Example" name="Example">Przykład</h2>
-<pre class="brush:js">var zakodowaneDane = window.btoa("Hello, world"); // kodowanie ciągu
-var odkodowaneDane = window.atob(zakodowaneDane); // odkodowywanie ciągu</pre>
-<h2 id="Specyfikacje">Specyfikacje</h2>
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Specyfikacja</th>
-   <th scope="col">Status</th>
-   <th scope="col">Komentarz</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', '#dom-windowbase64-atob', 'WindowBase64.atob()')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td>Bez zmian od ostatniej migawki, {{SpecName("HTML5.1")}}.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5.1', '#dom-windowbase64-atob', 'WindowBase64.atob()')}}</td>
-   <td>{{Spec2('HTML5.1')}}</td>
-   <td>Migawka {{SpecName("HTML WHATWG")}}. Bez zmian.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName("HTML5 W3C", "#dom-windowbase64-atob", "WindowBase64.atob()")}}</td>
-   <td>{{Spec2('HTML5 W3C')}}</td>
-   <td>Migawka {{SpecName("HTML WHATWG")}}. Utworzenie <code>WindowBase64</code> (properties where on the target before it).</td>
-  </tr>
- </tbody>
-</table>
-<h2 id="Browser_compatibility" name="Browser_compatibility">Zgodność przeglądarek</h2>
-<div>
- {{CompatibilityTable}}</div>
-<div id="compat-desktop">
- <table class="compat-table">
-  <tbody>
-   <tr>
-    <th>Funkcja</th>
-    <th>Chrome</th>
-    <th>Firefox (Gecko)</th>
-    <th>Internet Explorer</th>
-    <th>Opera</th>
-    <th>Safari (WebKit)</th>
-   </tr>
-   <tr>
-    <td>Podstawowa obsługa</td>
-    <td>{{CompatVersionUnknown}}</td>
-    <td>{{CompatGeckoDesktop(1)}}[1][2]</td>
-    <td>10</td>
-    <td>{{CompatVersionUnknown}}</td>
-    <td>{{CompatVersionUnknown}}</td>
-   </tr>
-  </tbody>
- </table>
-</div>
-<div id="compat-mobile">
- <table class="compat-table">
-  <tbody>
-   <tr>
-    <th>Funkcja</th>
-    <th>Android</th>
-    <th>Firefox Mobile (Gecko)</th>
-    <th>IE Mobile</th>
-    <th>Opera Mobile</th>
-    <th>Safari Mobile</th>
-   </tr>
-   <tr>
-    <td>Podstawowa obsługa</td>
-    <td>{{CompatVersionUnknown}}</td>
-    <td>{{CompatGeckoMobile(1)}}</td>
-    <td>{{CompatNo}}</td>
-    <td>{{CompatUnknown}}</td>
-    <td>{{CompatVersionUnknown}}</td>
-   </tr>
-  </tbody>
- </table>
-</div>
-<p>[1]  <code>btoa()</code> jest także dostępna dla komponentów XPCOM zaimplementowanych w JavaScript, nawet jeżeli <code><a href="https://developer.mozilla.org/pl/docs/DOM/window" lang="pl">window</a></code> nie jest globalnym obiektem w komponencie<code>.</code></p>
-<p>[2] Wraz z <a href="/pl/Firefox/Releases/27/Site_Compatibility">Firefoxem 27</a>, metoda <code>atob()</code> ignoruje wszystkie spacje w argumencie dla zgodności z najnowszą specyfikacją HTML5. ({{ bug(711180) }})</p>
-<h2 id="See_also" name="See_also">Zobacz też</h2>
-<ul>
- <li><a href="https://developer.mozilla.org/Web/API/WindowBase64/Base64_encoding_and_decoding">Kodowanie i dekodowanie Base64</a></li>
- <li><a href="/pl/docs/data_URIs"><code>data</code> URIs</a></li>
- <li><a href="/pl/docs/Web/API/WindowBase64.btoa"><code>window.btoa()</code></a></li>
-</ul>
diff --git a/files/pl/web/api/windoworworkerglobalscope/btoa/index.html b/files/pl/web/api/windoworworkerglobalscope/btoa/index.html
deleted file mode 100644
index 7c5b95a7ae..0000000000
--- a/files/pl/web/api/windoworworkerglobalscope/btoa/index.html
+++ /dev/null
@@ -1,127 +0,0 @@
----
-title: WindowBase64.btoa()
-slug: Web/API/WindowOrWorkerGlobalScope/btoa
-tags:
-  - API
-  - Base-64
-  - Base64
-  - Method
-  - Reference
-  - Referencja
-  - WindowBase64
-translation_of: Web/API/WindowOrWorkerGlobalScope/btoa
-original_slug: Web/API/WindowBase64/btoa
----
-<p>{{APIRef}}</p>
-<p>Tworzy string ASCII zakodowany w base-64 z ciągu ("string") danych binarnych.</p>
-<p>Metoda ta jednak nie nadaje się do konwertowania surowych ciągów <a href="http://www.unicode.org/standard/WhatIsUnicode.html">Unicode</a>! Zobacz sekcję Unicode poniżej.</p>
-<h2 id="Syntax" name="Syntax">Składnia</h2>
-<pre class="syntaxbox">var zakodowaneDane = window.btoa(<em>ciagDoZakodowania</em>);</pre>
-<h2 id="Example" name="Example">Przykład</h2>
-<pre class="brush:js">var zakodowaneDane = window.btoa("Hello, world"); // kodowanie ciągu
-var odkodowaneDane = window.atob(zakodowaneDane); // odkodowywanie ciągu ("Hello, world")
-</pre>
-<h2 id="Notes" name="Notes">Uwagi</h2>
-<p>Możesz używać tej metody do kodowania danych, które w innym wypadku mogą powodować problemy z komunikacją. Przekaż je, a następnie użyj metody <code><a href="/pl/docs/Web/API/WindowBase64.atob" title="DOM/window.atob">window.atob()</a></code> aby odkodować dane ponownie. Na przykład możesz zakodować znaki kontrolne takie jak ASCII o wartości od 0 do 31.</p>
-<p><code>btoa()</code> jest także dostępne dla komponentów XPCOM zaimplementowanych w JavaScript, nawet jeżeli <a href="/pl/docs/DOM/window" title="DOM/window"><code>window</code></a> nie jest globalnym obiektem w komponencie.</p>
-<h2 id="Ciągi_Unicode">Ciągi Unicode</h2>
-<p>W większości przeglądarek odwołanie się do <code>window.btoa()</code> z ciągiem Unicode spowoduje wystąpienie wyjątku <code>Character Out Of Range</code>.</p>
-<p>Aby tego uniknąć, rozważ ten model odnotowany przez <a class="external" href="http://ecmanaut.blogspot.com/2006/07/encoding-decoding-utf8-in-javascript.html">Johana Sundströma</a>:</p>
-<pre class="brush:js">function utf8_to_b64( str ) {
-    return window.btoa(encodeURIComponent( escape( str )));
-}
-
-function b64_to_utf8( str ) {
-    return unescape(decodeURIComponent(window.atob( str )));
-}
-
-// Usage:
-utf8_to_b64('✓ à la mode'); // JTI1dTI3MTMlMjUyMCUyNUUwJTI1MjBsYSUyNTIwbW9kZQ==
-b64_to_utf8('JTI1dTI3MTMlMjUyMCUyNUUwJTI1MjBsYSUyNTIwbW9kZQ=='); // "✓ à la mode"
-
-utf8_to_b64('I \u2661 Unicode!'); // SSUyNTIwJTI1dTI2NjElMjUyMFVuaWNvZGUlMjUyMQ==
-b64_to_utf8('SSUyNTIwJTI1dTI2NjElMjUyMFVuaWNvZGUlMjUyMQ=='); // "I ♡ Unicode!"
-
-</pre>
-<p>Lepszym, bardziej wiarygodnym i mniej wymagającym rozwiązaniem jest konwersja <code><a href="/pl/docs/Web/API/DOMString">DOMString</a></code> do ciągu zakodowanego w UTF-8 używając <a href="/pl/docs/Web/JavaScript/Typed_arrays">TypedArray</a>. W tym celu proszę zapoznać się z <a href="/en-US/docs/Web/JavaScript/Base64_encoding_and_decoding#Solution_.232_.E2.80.93_rewriting_atob()_and_btoa()_using_TypedArrays_and_UTF-8">tym akapitem</a>.</p>
-<h2 id="Browser_compatibility" name="Browser_compatibility">Specyfikacje</h2>
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Specyfikacja</th>
-   <th scope="col">Status</th>
-   <th scope="col">Komentarz</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', '#dom-windowbase64-btoa', 'WindowBase64.btoa()')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td>Brak zmian od ostatniej migawki, {{SpecName("HTML5.1")}}.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5.1', '#dom-windowbase64-btoa', 'WindowBase64.btoa()')}}</td>
-   <td>{{Spec2('HTML5.1')}}</td>
-   <td>Migawka {{SpecName("HTML WHATWG")}}. Bez zmian.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName("HTML5 W3C", "#dom-windowbase64-btoa", "WindowBase64.btoa()")}}</td>
-   <td>{{Spec2('HTML5 W3C')}}</td>
-   <td>Migawka {{SpecName("HTML WHATWG")}}. Utworzenie <code>WindowBase64</code> (properties where on the target before it).</td>
-  </tr>
- </tbody>
-</table>
-<h2 id="Browser_compatibility" name="Browser_compatibility">Zgodność przeglądarek</h2>
-<div>
- {{CompatibilityTable}}</div>
-<div id="compat-desktop">
- <table class="compat-table">
-  <tbody>
-   <tr>
-    <th>Funkcja</th>
-    <th>Chrome</th>
-    <th>Firefox (Gecko)</th>
-    <th>Internet Explorer</th>
-    <th>Opera</th>
-    <th>Safari (WebKit)</th>
-   </tr>
-   <tr>
-    <td>Podstawowa obsługa</td>
-    <td>{{CompatVersionUnknown}}</td>
-    <td>{{CompatGeckoDesktop(1)}}[1]</td>
-    <td>10</td>
-    <td>{{CompatVersionUnknown}}</td>
-    <td>{{CompatVersionUnknown}}</td>
-   </tr>
-  </tbody>
- </table>
-</div>
-<div id="compat-mobile">
- <table class="compat-table">
-  <tbody>
-   <tr>
-    <th>Funkcja</th>
-    <th>Android</th>
-    <th>Firefox Mobile (Gecko)</th>
-    <th>IE Mobile</th>
-    <th>Opera Mobile</th>
-    <th>Safari Mobile</th>
-   </tr>
-   <tr>
-    <td>Podstawowa obsługa</td>
-    <td>{{CompatVersionUnknown}}</td>
-    <td>{{CompatGeckoMobile(1)}}</td>
-    <td>{{CompatNo}}</td>
-    <td>{{CompatUnknown}}</td>
-    <td>{{CompatVersionUnknown}}</td>
-   </tr>
-  </tbody>
- </table>
-</div>
-<p>[1] <code>btoa()</code> jest także dostępna dla komponentów XPCOM zaimplementowanych w JavaScript, nawet jeżeli <code><a href="/pl/docs/DOM/window" lang="pl">window</a></code> nie jest globalnym obiektem w komponencie<code>.</code></p>
-<h2 id="See_also" name="See_also">Zobacz też</h2>
-<ul>
- <li><a href="/Web/API/WindowBase64/Base64_encoding_and_decoding">Kodowanie i dekodowanie Base64</a></li>
- <li><a href="/pl/docs/data_URIs"><code>data</code> URIs</a></li>
- <li><a href="/pl/docs/Web/API/WindowBase64.atob"><code>window.atob()</code></a></li>
-</ul>
diff --git a/files/pl/web/api/windoworworkerglobalscope/clearinterval/index.html b/files/pl/web/api/windoworworkerglobalscope/clearinterval/index.html
deleted file mode 100644
index e4ecb8701d..0000000000
--- a/files/pl/web/api/windoworworkerglobalscope/clearinterval/index.html
+++ /dev/null
@@ -1,29 +0,0 @@
----
-title: window.clearInterval
-slug: Web/API/WindowOrWorkerGlobalScope/clearInterval
-tags:
-  - Window
-translation_of: Web/API/WindowOrWorkerGlobalScope/clearInterval
-original_slug: Web/API/Window/clearInterval
----
-<div>
- {{ApiRef}}</div>
-<h2 id="Summary" name="Summary">Podsumowanie</h2>
-<p>Anuluje powtarzającą się akcję, która została utworzona korzystając z <code><a href="/pl/docs/DOM/window.setInterval" title="DOM/window.setInterval">setInterval()</a></code>.</p>
-<h2 id="Syntax" name="Syntax">Składnia</h2>
-<pre class="syntaxbox"><em>window</em>.clearInterval(<em>idInterwalu</em>)
-</pre>
-<p><code>idInterwalu</code> to identyfikator powtarzającej się akcji, która ma zostać anulowana. Ten identyfikator został zwrócony z {{domxref("window.setInterval","setInterval()")}}.</p>
-<h2 id="Example" name="Example">Przykład</h2>
-<p>Zobacz <a href="/pl/docs/DOM/window.setInterval#Przyk.C5.82ad" title="DOM/window.setInterval#Przyk.C5.82ad">przykład z <code>setInterval()</code></a>.</p>
-<h2 id="Specification" name="Specification">Specification</h2>
-<p>{{DOM0}}</p>
-<h2 id="See_also" name="See_also">Zobacz także</h2>
-<ul>
- <li><a href="/pl/docs/JavaScript/Timers" title="JavaScript/Timers">JavaScript zegary</a></li>
- <li>{{domxref("window.setTimeout")}}</li>
- <li>{{domxref("window.setInterval")}}</li>
- <li>{{domxref("window.clearTimeout")}}</li>
- <li>{{domxref("window.requestAnimationFrame")}}</li>
- <li><a href="/pl/docs/JavaScript/Timers/Daemons" title="JavaScript/Timers/Daemons"><em>Daemons</em> zarządzanie</a></li>
-</ul>
diff --git a/files/pl/web/api/windoworworkerglobalscope/cleartimeout/index.html b/files/pl/web/api/windoworworkerglobalscope/cleartimeout/index.html
deleted file mode 100644
index b57e9d04b4..0000000000
--- a/files/pl/web/api/windoworworkerglobalscope/cleartimeout/index.html
+++ /dev/null
@@ -1,41 +0,0 @@
----
-title: window.clearTimeout
-slug: Web/API/WindowOrWorkerGlobalScope/clearTimeout
-translation_of: Web/API/WindowOrWorkerGlobalScope/clearTimeout
-original_slug: Web/API/Window/clearTimeout
----
-<p>{{ ApiRef() }}</p>
-<h3 id="Summary" name="Summary">Podsumowanie</h3>
-<p>Usuwa opóźnienie ustanione przez <a href="/en/DOM/window.setTimeout" title="en/DOM/window.setTimeout">window.setTimeout()</a>.</p>
-<h3 id="Syntax" name="Syntax">Składnia</h3>
-<pre class="eval">window.clearTimeout(id)
-</pre>
-<p>gdzie <code>id</code> jest identyfikatorem opóźnienia do usunięcia, który został zwrócony podczas wywołania <a href="/en/DOM/window.setTimeout" title="en/DOM/window.setTimeout">window.setTimeout()</a>.</p>
-<h3 id="Example" name="Example">Przykład</h3>
-<p>Uruchomienie poniższego skryptu w kontekscie strony i pojedyncze kliknięcie spowoduje wyświetlenie wiadomości po jednej sekundzie. Jeżeli użytkownik będzie klikał na stronie przynajmniej raz na sekundę wiadomość nigdy nie zostanie wyświetlona.</p>
-<pre class="eval">var alarm = {
-  remind: function(aMessage) {
-    alert(aMessage);
-    delete this.timeoutID;
-  },
-
-  setup: function() {
-    this.cancel();
-    var self = this;
-    this.timeoutID = window.setTimeout(function(msg) {self.remind(msg);}, 1000, "Wake up!");
-  },
-
-  cancel: function() {
-    if(typeof this.timeoutID == "number") {
-      window.clearTimeout(this.timeoutID);
-      delete this.timeoutID;
-    }
-  }
-};
-window.onclick = function() { alarm.setup() };
-</pre>
-<h3 id="Notes" name="Notes">Uwagi</h3>
-<p>Przekazanie niepoprawnego ID do <code>clearTimeout</code> nie powoduje żadnej akcji (żaden błąd nie jest wyrzucany).</p>
-<h3 id="Specification" name="Specification">Specyfikacja</h3>
-<p>{{ DOM0() }}</p>
-<p>{{ languages( { "en": "en/DOM/window.clearTimeout", "fr": "fr/DOM/window.clearTimeout", "ja": "ja/DOM/window.clearTimeout", "pl": "pl/DOM/window.clearTimeout" } ) }}</p>
diff --git a/files/pl/web/api/windoworworkerglobalscope/setinterval/index.html b/files/pl/web/api/windoworworkerglobalscope/setinterval/index.html
deleted file mode 100644
index 277b9c44d7..0000000000
--- a/files/pl/web/api/windoworworkerglobalscope/setinterval/index.html
+++ /dev/null
@@ -1,88 +0,0 @@
----
-title: window.setInterval
-slug: Web/API/WindowOrWorkerGlobalScope/setInterval
-tags:
-  - DOM
-  - DOM_0
-  - Dokumentacja_Gecko_DOM
-  - Gecko
-  - Wszystkie_kategorie
-translation_of: Web/API/WindowOrWorkerGlobalScope/setInterval
-original_slug: Web/API/Window/setInterval
----
-<p>{{ ApiRef() }}</p>
-
-<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3>
-
-<p>Ustawia opóźnienie do cyklicznego wywoływania określonej funkcji.</p>
-
-<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3>
-
-<pre class="eval"><em>var idInterwalu</em> = window.setInterval(<em>funkcja</em>, <em>opóźnienie</em>[, <em>parametr1</em>, <em>parametr2</em>, ...]);
-<em>var idInterwalu</em> = window.setInterval(<em>kod</em>, <em>opóźnienie</em>);</pre>
-
-<p> Parametry</p>
-
-<ul>
- <li><code style="font: normal normal normal 100%/normal 'Courier New', 'Andale Mono', monospace; color: inherit; font-weight: inherit;">idInterwalu</code> to identyfikator ustawianego interwału który można przekazać do funkcji <code><a href="/pl/DOM/window.clearInterval" title="pl/DOM/window.clearInterval">window.clearInterval()</a></code>.</li>
- <li><code>funkcja</code> to funkcja, dla której ustawiane jest opóźnienie</li>
- <li><code>kod </code>to ciąg znaków zawierający kod javascript do cyklicznego wykonania. Jest to składnia alternatywna, której wykorzystanie <strong>nie jest zalecane</strong> z tych samych powodów, co stosowanie <code><a href="/en/JavaScript/Reference/Global_Objects/eval#Don%27t_use_eval!" title="en/JavaScript/Reference/Global Objects/eval#Don't use eval!">eval()</a></code>.</li>
- <li><code>opóźnienie</code> to liczba milisekund (tysięcznych części sekundy), co którą wywoływana będzie <code>funkcja </code>lub <code>kod</code></li>
-</ul>
-
-<p>Należy zwrócić uwagę, że przekazywanie dodatkowych parametrów w pierwszej składni nie działa w Internet Explorerze.</p>
-
-<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3>
-
-<pre class="brush: js">idInterwalu = window.setInterval(animuj, 500);
-</pre>
-
-<p> W poniższym przykładzie, funkcja <code>zmienKolorTekstu()</code> będzie wykonywana co sekundę, dopóki użytkownik nie naciśnie przycisku Stop, co spowoduje wywołanie <code>clearInterval() </code>z parametrem <code>idInterwalu</code>.</p>
-
-<pre class="brush: js" style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.286em; margin-left: 0px; padding-top: 15px; padding-right: 15px; padding-bottom: 15px; padding-left: 15px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; background-clip: initial; background-color: rgb(246, 246, 242); font: normal normal normal 100%/normal 'Courier New', 'Andale Mono', monospace;">&lt;html&gt;
-&lt;head&gt;
-&lt;title&gt;przykład z wykorzystaniem setInterval/clearInterval&lt;/title&gt;
-
-&lt;script type="text/javascript"&gt;
-var idInterwalu;
-
-function zmienKolor() {
-  idInterwalu = setInterval(zmienKolorTekstu, 1000);
-}
-
-function zmienKolorTekstu() {
-  var elem = document.getElementById("my_box");
-  if (elem.style.color == 'red') {
-    elem.style.color = 'blue';
-  } else {
-    elem.style.color = 'red';
-  }
-}
-
-function zatrzymajZmianeKoloru() {
-  clearInterval(idInterwalu);
-}
-&lt;/script&gt;
-&lt;/head&gt;
-
-&lt;body onload="zmienKolor();"&gt;
-&lt;div id="my_box"&gt;
-&lt;p&gt;Hello World&lt;/p&gt;
-&lt;/div&gt;
-&lt;button onclick="zatrzymajZmianeKoloru();"&gt;Stop&lt;/button&gt;
-&lt;/body&gt;
-&lt;/html&gt;</pre>
-
-<h3 id="Uwagi">Uwagi</h3>
-
-<p>Funkcja setInterval() służy do ustawienia opóźnienia dla cyklicznie wywoływanych funkcji, takich jak funkcje animacji.</p>
-
-<p>Możliwe jest anulowanie wykonania fukcji poprzez wywołanie <code><a href="/pl/DOM/window.clearInterval" title="pl/DOM/window.clearInterval">window.clearInterval()</a></code>.</p>
-
-<p>Jeżeli funkcja ma zostać wykonana <em>tylko raz</em> a nie być wykonywana cyklicznie to należy skorzystać z  <code style="font: normal normal normal 100%/normal 'Courier New', 'Andale Mono', monospace; color: inherit; font-weight: inherit;"><a href="/pl/DOM/window.setTimeout" title="pl/DOM/window.setTimeout">window.setTimeout()</a></code>.</p>
-
-<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3>
-
-<p>{{ DOM0() }}</p>
-
-<p>{{ languages( { "en": "en/DOM/window.setInterval", "fr": "fr/DOM/window.setInterval", "ja": "ja/DOM/window.setInterval", "pl": "pl/DOM/window.setInterval" } ) }}</p>
diff --git a/files/pl/web/api/windoworworkerglobalscope/settimeout/index.html b/files/pl/web/api/windoworworkerglobalscope/settimeout/index.html
deleted file mode 100644
index bfe274a8f7..0000000000
--- a/files/pl/web/api/windoworworkerglobalscope/settimeout/index.html
+++ /dev/null
@@ -1,47 +0,0 @@
----
-title: window.setTimeout
-slug: Web/API/WindowOrWorkerGlobalScope/setTimeout
-tags:
-  - DOM
-  - DOM_0
-  - Dokumentacja_Gecko_DOM
-  - Gecko
-  - Wszystkie_kategorie
-translation_of: Web/API/WindowOrWorkerGlobalScope/setTimeout
-original_slug: Web/API/Window/setTimeout
----
-<p>{{ ApiRef() }}</p>
-<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3>
-<p>Uruchamia fragment kodu bądź funkcję po określonym odstępie czasu.</p>
-<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3>
-<pre class="eval"><em>id</em> = window.setTimeout(<em>funkcja</em>, <em>opóźnienie</em>[, <em>param1</em>, <em>param2</em>, ...]);
-<em>id</em> = window.setTimeout(<em>kod</em>, <em>opóźnienie</em>);
-</pre>
-<p>gdzie</p>
-<ul>
- <li><code>funkcja</code> to <a href="/pl/Dokumentacja_języka_JavaScript_1.5/Obiekty/Function" title="pl/Dokumentacja_języka_JavaScript_1.5/Obiekty/Function">funkcja</a>, jaką chcesz uruchomić po opóźnieniu
-  <ul>
-   <li>w alternatywnej składni, <code>kod</code> to ciąg znaków z kodem, który będzie wykonany po upływie podanego czasu</li>
-  </ul>
- </li>
- <li><code>opóźnienie</code> to liczba milisekund (tysięcznych części sekundy), po których upływie wykonana zostanie funkcja</li>
- <li><code>id</code> to identyfikator, którego można użyć z <a href="/pl/DOM/window.clearTimeout" title="pl/DOM/window.clearTimeout">window.clearTimeout</a></li>
-</ul>
-<h3 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h3>
-<pre class="eval">window.setTimeout('window.parent.generateOutput()', 1000);
-</pre>
-<pre class="eval">function generateOutput(aConcise) {
-  if(aConcise)
-    parent.generateConciseOutput();
-  else
-    parent.generateOutput();
-}
-window.setTimeout(generateOutput, 1000, true);
-</pre>
-<p>Zobacz też <a href="/pl/DOM/window.clearTimeout#Example" title="pl/DOM/window.clearTimeout#Example">przykład użycia clearTimeout()</a>.</p>
-<h3 id="Uwagi" name="Uwagi">Uwagi</h3>
-<p>Możesz anulować opóźnienie wywołania funkcji za pomocą <a href="/pl/DOM/window.clearTimeout" title="pl/DOM/window.clearTimeout">window.clearTimeout()</a>.</p>
-<p>Jeśli chcesz, by funkcja była uruchamiana cyklicznie (np. co każde N milisekund), rozważ wykorzystanie <a href="/pl/DOM/window.setInterval" title="pl/DOM/window.setInterval">window.setInterval()</a>.</p>
-<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3>
-<p>{{ DOM0() }}</p>
-<p>{{ languages( { "en": "en/DOM/window.setTimeout", "fr": "fr/DOM/window.setTimeout", "ja": "ja/DOM/window.setTimeout", "pl": "pl/DOM/window.setTimeout" } ) }}</p>
diff --git a/files/pl/web/css/css_grid_layout/index.html b/files/pl/web/css/css_grid_layout/index.html
index 0894a70679..933e531b6a 100644
--- a/files/pl/web/css/css_grid_layout/index.html
+++ b/files/pl/web/css/css_grid_layout/index.html
@@ -186,7 +186,7 @@ translation_of: Web/CSS/CSS_Grid_Layout
  </tbody>
 </table>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li>
  <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li>
diff --git a/files/pl/web/css/grid/index.html b/files/pl/web/css/grid/index.html
index 6829a1ea22..d213f14e80 100644
--- a/files/pl/web/css/grid/index.html
+++ b/files/pl/web/css/grid/index.html
@@ -143,7 +143,7 @@ grid: unset;
  <li>Grid Layout Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas#Grid_definition_shorthands">Grid template areas - Grid definition shorthands</a></em></li>
 </ul>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li>
  <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li>
diff --git a/files/pt-br/_redirects.txt b/files/pt-br/_redirects.txt
index 5a35fcaf0f..8b616cd018 100644
--- a/files/pt-br/_redirects.txt
+++ b/files/pt-br/_redirects.txt
@@ -471,6 +471,7 @@
 /pt-BR/docs/Web/API/API_Web_Audio	/pt-BR/docs/Web/API/Web_Audio_API
 /pt-BR/docs/Web/API/API_Web_Audio/Sintetizador_simples	/pt-BR/docs/Web/API/Web_Audio_API/Simple_synth
 /pt-BR/docs/Web/API/API_de_Desempenho	/pt-BR/docs/Web/API/Performance_API
+/pt-BR/docs/Web/API/AnimationEvent/initAnimationEvent	/pt-BR/docs/conflicting/Web/API/AnimationEvent/AnimationEvent
 /pt-BR/docs/Web/API/ArrayBuffer	/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer
 /pt-BR/docs/Web/API/AudioContext/currentTime	/pt-BR/docs/Web/API/BaseAudioContext/currentTime
 /pt-BR/docs/Web/API/BatteryManager.charging	/pt-BR/docs/Web/API/BatteryManager/charging
@@ -538,9 +539,13 @@
 /pt-BR/docs/Web/API/Window.navigator	/pt-BR/docs/Web/API/Window/navigator
 /pt-BR/docs/Web/API/Window.openDialog	/pt-BR/docs/Web/API/Window/openDialog
 /pt-BR/docs/Web/API/Window/Window.localStorage	/pt-BR/docs/Web/API/Window/localStorage
-/pt-BR/docs/Web/API/WindowBase64/atob	/pt-BR/docs/Web/API/WindowOrWorkerGlobalScope/atob
-/pt-BR/docs/Web/API/WindowTimers.clearTimeout	/pt-BR/docs/Web/API/WindowOrWorkerGlobalScope/clearTimeout
-/pt-BR/docs/Web/API/WindowTimers/clearTimeout	/pt-BR/docs/Web/API/WindowOrWorkerGlobalScope/clearTimeout
+/pt-BR/docs/Web/API/WindowBase64/atob	/pt-BR/docs/Web/API/atob
+/pt-BR/docs/Web/API/WindowOrWorkerGlobalScope/atob	/pt-BR/docs/Web/API/atob
+/pt-BR/docs/Web/API/WindowOrWorkerGlobalScope/clearTimeout	/pt-BR/docs/Web/API/clearTimeout
+/pt-BR/docs/Web/API/WindowOrWorkerGlobalScope/fetch	/pt-BR/docs/Web/API/fetch
+/pt-BR/docs/Web/API/WindowOrWorkerGlobalScope/setInterval	/pt-BR/docs/Web/API/setInterval
+/pt-BR/docs/Web/API/WindowTimers.clearTimeout	/pt-BR/docs/Web/API/clearTimeout
+/pt-BR/docs/Web/API/WindowTimers/clearTimeout	/pt-BR/docs/Web/API/clearTimeout
 /pt-BR/docs/Web/API/XMLHttpRequest/Requisicoes_sincronas_e_assincronas	/pt-BR/docs/Web/API/XMLHttpRequest/Synchronous_and_Asynchronous_Requests
 /pt-BR/docs/Web/API/XMLHttpRequest/Usando_XMLHttpRequest	/pt-BR/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest
 /pt-BR/docs/Web/API/document.getElementById	/pt-BR/docs/Web/API/Document/getElementById
@@ -565,6 +570,8 @@
 /pt-BR/docs/Web/CSS/-moz-box-ordinal-group	/pt-BR/docs/Web/CSS/box-ordinal-group
 /pt-BR/docs/Web/CSS/CSS_Animations/Usando_animações_CSS	/pt-BR/docs/Web/CSS/CSS_Animations/Using_CSS_animations
 /pt-BR/docs/Web/CSS/CSS_Background_and_Borders	/pt-BR/docs/Web/CSS/CSS_Backgrounds_and_Borders
+/pt-BR/docs/Web/CSS/CSS_Background_and_Borders/Border-image_generator	/pt-BR/docs/Web/CSS/CSS_Backgrounds_and_Borders/Border-image_generator
+/pt-BR/docs/Web/CSS/CSS_Background_and_Borders/Border-radius_generator	/pt-BR/docs/Web/CSS/CSS_Backgrounds_and_Borders/Border-radius_generator
 /pt-BR/docs/Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds	/pt-BR/docs/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds
 /pt-BR/docs/Web/CSS/CSS_Box_Model/margin_collapsing	/pt-BR/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing
 /pt-BR/docs/Web/CSS/CSS_Colors/seletor_de_cores	/pt-BR/docs/Web/CSS/CSS_Colors/Color_picker_tool
@@ -586,8 +593,9 @@
 /pt-BR/docs/Web/CSS/Seletor_universal	/pt-BR/docs/Web/CSS/Universal_selectors
 /pt-BR/docs/Web/CSS/Seletores_CSS	/pt-BR/docs/Web/CSS/CSS_Selectors
 /pt-BR/docs/Web/CSS/Sintexe_valor	/pt-BR/docs/Web/CSS/Value_definition_syntax
-/pt-BR/docs/Web/CSS/Tools/Border-image_generator	/pt-BR/docs/Web/CSS/CSS_Background_and_Borders/Border-image_generator
-/pt-BR/docs/Web/CSS/Tools/Border-radius_generator	/pt-BR/docs/Web/CSS/CSS_Background_and_Borders/Border-radius_generator
+/pt-BR/docs/Web/CSS/Tools	/pt-BR/docs/conflicting/Web/CSS
+/pt-BR/docs/Web/CSS/Tools/Border-image_generator	/pt-BR/docs/Web/CSS/CSS_Backgrounds_and_Borders/Border-image_generator
+/pt-BR/docs/Web/CSS/Tools/Border-radius_generator	/pt-BR/docs/Web/CSS/CSS_Backgrounds_and_Borders/Border-radius_generator
 /pt-BR/docs/Web/CSS/Using_CSS_variables	/pt-BR/docs/Web/CSS/Using_CSS_custom_properties
 /pt-BR/docs/Web/CSS/Valor_atual	/pt-BR/docs/Web/CSS/actual_value
 /pt-BR/docs/Web/CSS/Valor_resolvido	/pt-BR/docs/Web/CSS/resolved_value
@@ -615,6 +623,7 @@
 /pt-BR/docs/Web/CSS/valor_inicial	/pt-BR/docs/Web/CSS/initial_value
 /pt-BR/docs/Web/CSS/var	/pt-BR/docs/Web/CSS/var()
 /pt-BR/docs/Web/CSS/word-wrap	/pt-BR/docs/Web/CSS/overflow-wrap
+/pt-BR/docs/Web/Demos_of_open_web_technologies	/pt-BR/docs/Web/Demos
 /pt-BR/docs/Web/Events/DOMContentLoaded	/pt-BR/docs/Web/API/Window/DOMContentLoaded_event
 /pt-BR/docs/Web/Events/abort	/pt-BR/docs/Web/API/HTMLMediaElement/abort_event
 /pt-BR/docs/Web/Events/beforeunload	/pt-BR/docs/Web/API/Window/beforeunload_event
diff --git a/files/pt-br/_wikihistory.json b/files/pt-br/_wikihistory.json
index 83b7c2febe..0df24fcd5d 100644
--- a/files/pt-br/_wikihistory.json
+++ b/files/pt-br/_wikihistory.json
@@ -3632,13 +3632,6 @@
       "takahan"
     ]
   },
-  "Web/API/AnimationEvent/initAnimationEvent": {
-    "modified": "2019-03-23T22:45:29.493Z",
-    "contributors": [
-      "teoli",
-      "takahan"
-    ]
-  },
   "Web/API/AnimationEvent/pseudoElement": {
     "modified": "2019-03-23T22:45:35.200Z",
     "contributors": [
@@ -6887,33 +6880,6 @@
       "Bzbarsky"
     ]
   },
-  "Web/API/WindowOrWorkerGlobalScope/atob": {
-    "modified": "2020-10-15T21:46:04.009Z",
-    "contributors": [
-      "mateusvelleda",
-      "joaoricardo_rm"
-    ]
-  },
-  "Web/API/WindowOrWorkerGlobalScope/clearTimeout": {
-    "modified": "2020-10-15T21:31:54.685Z",
-    "contributors": [
-      "GarkGarcia",
-      "teoli",
-      "Willkuns"
-    ]
-  },
-  "Web/API/WindowOrWorkerGlobalScope/fetch": {
-    "modified": "2019-03-23T22:06:21.567Z",
-    "contributors": [
-      "dowgssss"
-    ]
-  },
-  "Web/API/WindowOrWorkerGlobalScope/setInterval": {
-    "modified": "2020-10-15T22:16:56.864Z",
-    "contributors": [
-      "luan0ap"
-    ]
-  },
   "Web/API/Worker": {
     "modified": "2020-10-28T22:21:09.210Z",
     "contributors": [
@@ -7021,6 +6987,33 @@
       "trestini"
     ]
   },
+  "Web/API/atob": {
+    "modified": "2020-10-15T21:46:04.009Z",
+    "contributors": [
+      "mateusvelleda",
+      "joaoricardo_rm"
+    ]
+  },
+  "Web/API/clearTimeout": {
+    "modified": "2020-10-15T21:31:54.685Z",
+    "contributors": [
+      "GarkGarcia",
+      "teoli",
+      "Willkuns"
+    ]
+  },
+  "Web/API/fetch": {
+    "modified": "2019-03-23T22:06:21.567Z",
+    "contributors": [
+      "dowgssss"
+    ]
+  },
+  "Web/API/setInterval": {
+    "modified": "2020-10-15T22:16:56.864Z",
+    "contributors": [
+      "luan0ap"
+    ]
+  },
   "Web/Accessibility": {
     "modified": "2019-09-09T14:18:55.700Z",
     "contributors": [
@@ -7591,25 +7584,25 @@
       "francisco.hansen"
     ]
   },
-  "Web/CSS/CSS_Background_and_Borders/Border-image_generator": {
+  "Web/CSS/CSS_Backgrounds_and_Borders": {
+    "modified": "2019-03-23T22:44:11.690Z",
+    "contributors": [
+      "teoli"
+    ]
+  },
+  "Web/CSS/CSS_Backgrounds_and_Borders/Border-image_generator": {
     "modified": "2019-05-06T10:31:39.391Z",
     "contributors": [
       "leodeJESUS",
       "Torto"
     ]
   },
-  "Web/CSS/CSS_Background_and_Borders/Border-radius_generator": {
+  "Web/CSS/CSS_Backgrounds_and_Borders/Border-radius_generator": {
     "modified": "2019-03-23T23:07:37.174Z",
     "contributors": [
       "Torto"
     ]
   },
-  "Web/CSS/CSS_Backgrounds_and_Borders": {
-    "modified": "2019-03-23T22:44:11.690Z",
-    "contributors": [
-      "teoli"
-    ]
-  },
   "Web/CSS/CSS_Backgrounds_and_Borders/Resizing_background_images": {
     "modified": "2019-03-23T22:59:50.758Z",
     "contributors": [
@@ -7988,13 +7981,6 @@
       "fvargaspf@gmail.com"
     ]
   },
-  "Web/CSS/Tools": {
-    "modified": "2019-03-23T23:07:41.210Z",
-    "contributors": [
-      "hlays",
-      "velvel53"
-    ]
-  },
   "Web/CSS/Type_selectors": {
     "modified": "2020-10-15T22:32:30.449Z",
     "contributors": [
@@ -8944,7 +8930,7 @@
       "jessuircleydson"
     ]
   },
-  "Web/Demos_of_open_web_technologies": {
+  "Web/Demos": {
     "modified": "2020-09-04T06:28:02.627Z",
     "contributors": [
       "gustavoSoriano",
@@ -16368,6 +16354,13 @@
       "RafaelGiordanno"
     ]
   },
+  "conflicting/Web/API/AnimationEvent/AnimationEvent": {
+    "modified": "2019-03-23T22:45:29.493Z",
+    "contributors": [
+      "teoli",
+      "takahan"
+    ]
+  },
   "conflicting/Web/API/Crypto/getRandomValues": {
     "modified": "2019-03-23T22:43:17.216Z",
     "contributors": [
@@ -16469,6 +16462,13 @@
       "caio.rrs"
     ]
   },
+  "conflicting/Web/CSS": {
+    "modified": "2019-03-23T23:07:41.210Z",
+    "contributors": [
+      "hlays",
+      "velvel53"
+    ]
+  },
   "conflicting/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox": {
     "modified": "2019-09-08T09:50:19.292Z",
     "contributors": [
diff --git a/files/pt-br/conflicting/web/api/animationevent/animationevent/index.html b/files/pt-br/conflicting/web/api/animationevent/animationevent/index.html
new file mode 100644
index 0000000000..9227514b83
--- /dev/null
+++ b/files/pt-br/conflicting/web/api/animationevent/animationevent/index.html
@@ -0,0 +1,135 @@
+---
+title: AnimationEvent.initAnimationEvent()
+slug: conflicting/Web/API/AnimationEvent/AnimationEvent
+tags:
+  - AnimationEvent
+  - Apps
+  - CSSOM
+  - Método(2)
+  - Não-padrão
+  - Obsolento
+  - Web Animations
+translation_of: Web/API/AnimationEvent/initAnimationEvent
+original_slug: Web/API/AnimationEvent/initAnimationEvent
+---
+<p>{{obsolete_header}}{{non-standard_header}}{{ apiref("Web Animations API") }}</p>
+
+<h2 id="Sumário">Sumário</h2>
+
+<p>O <code><strong>AnimationEvent.initAnimationEvent() </strong></code>é um método iniciado com o evento da animção criando um depreciativo {{domxref("Document.createEvent()", "Document.createEvent(\"AnimationEvent\")")}} método.</p>
+
+<p><code>AnimationEvent</code> criado desse modo não é confiável.</p>
+
+<div class="note">
+<p><strong>Note:</strong> Durante o processo de padronização, esse método foi removido das especificações. É que ele foi depreciado e esse processo foi removido da maioria das implementações . <strong>Não use este método</strong>; ao invés, use o construtor padrão, {{domxref("AnimationEvent.AnimationEvent", "AnimationEvent()")}}, para criar um sintético {{domxref("AnimationEvent")}}.</p>
+</div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><em>animationEvent</em>.initAnimationEvent(<em>typeArg</em>, <em>canBubbleArg</em>, <em>cancelableArg</em>, <em>animationNameArg</em>, <em>elapsedTimeArg</em>);</pre>
+
+<h3 id="Parâmetros">Parâmetros</h3>
+
+<dl>
+ <dt><code>typeArg</code></dt>
+ <dd>Um {{domxref("DOMString")}} identificado com um tipo específico de evento animação que ocorreu. Os seguintes valores são aceitados:
+ <table class="standard-table">
+  <thead>
+   <tr>
+    <th scope="col">Valor</th>
+    <th scope="col">Significado</th>
+   </tr>
+  </thead>
+  <tbody>
+   <tr>
+    <td><code>animationstart</code></td>
+    <td>A animação começou.</td>
+   </tr>
+   <tr>
+    <td><code>animationend</code></td>
+    <td>A animação terminou.</td>
+   </tr>
+   <tr>
+    <td><code>animationiteration</code></td>
+    <td>A iteração corrente se completou.</td>
+   </tr>
+  </tbody>
+ </table>
+ </dd>
+ <dt><code>canBubbleArg</code></dt>
+ <dd>Uma {{domxref("Boolean")}} bandeira indicando se o evento pode ser bolha (<code>true</code>) ou não (<code>false)</code>.</dd>
+ <dt><code>cancelableArg</code></dt>
+ <dd>Uma {{domxref("Boolean")}} bandeira indicando se o evento associado pode ser evitado (<code>true</code>) ou não (<code>false)</code>.</dd>
+ <dt><code>animationNameArg</code></dt>
+ <dd>Um {{domxref("DOMString")}} contendo o valor do{{cssxref("animation-name")}} propriedade CSS associada com a transição.</dd>
+ <dt><code>elapsedTimeArg</code></dt>
+ <dd>Um ponto flutuante indicando a quantidade de tempo que a animação esteve rodando, em segundos, com o tempo do evento terminar, excluirá-se o tempo em que a animação esteve em pausa.Para um <code>"animationstart"</code> evento, <code>elapsedTime</code> é <code>0.0</code> a não ser que haja um valor negativo para <code><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/animation-delay" title="The animation-delay CSS property specifies when the animation should start. This lets the animation sequence begin some time after it's applied to an element.">animation-delay</a></code>, nesse caso o evento irá terminar com <code>elapsedTime</code> contendo <code>(-1 * </code><em>delay</em><code>)</code>.</dd>
+</dl>
+
+<h2 id="Especificações">Especificações</h2>
+
+<p><em>Esse método é não-padrão e não é parte de qualquer especificação, no entanto ele esteve presente nos primeiros rascunhos de {{SpecName("CSS3 Animations")}}.</em></p>
+
+<h2 id="Browser_compatibility">Compatibilidade com navegadores</h2>
+
+<p>{{ CompatibilityTable }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatGeckoDesktop("6.0") }}<br>
+    Removed in {{ CompatGeckoDesktop("23.0") }}</td>
+   <td>10.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<p> </p>
+
+<p> </p>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatGeckoMobile("6.0") }}<br>
+    Removed in {{ CompatGeckoMobile("23.0") }}</td>
+   <td>10.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_animations">Using CSS animations</a></li>
+ <li>Animation-related CSS properties and at-rules: {{cssxref("animation")}}, {{cssxref("animation-delay")}}, {{cssxref("animation-direction")}}, {{cssxref("animation-duration")}}, {{cssxref("animation-fill-mode")}}, {{cssxref("animation-iteration-count")}}, {{cssxref("animation-name")}}, {{cssxref("animation-play-state")}}, {{cssxref("animation-timing-function")}}, {{cssxref("@keyframes")}}.</li>
+ <li>The {{domxref("AnimationEvent")}} interface it belongs to.</li>
+</ul>
diff --git a/files/pt-br/conflicting/web/css/index.html b/files/pt-br/conflicting/web/css/index.html
new file mode 100644
index 0000000000..82fa64bdf2
--- /dev/null
+++ b/files/pt-br/conflicting/web/css/index.html
@@ -0,0 +1,31 @@
+---
+title: Ferramentas
+slug: conflicting/Web/CSS
+tags:
+  - CSS
+  - NeedsContent
+translation_of: Web/CSS/Tools
+original_slug: Web/CSS/Tools
+---
+<div>{{Draft}}</div>
+
+<p>O CSS oferece diversos recursos poderosos e um grande número de parâmetros que, às vezes, podem ser difíceis de usar. Então, é bem melhor quando você pode visualizá-los enquanto trabalha com eles.</p>
+
+<p>Esta página oferece links para várias ferramentas úteis que irão te ajudar a criar o CSS para estilizar seu conteúdo usando esses recursos.</p>
+
+<p>{{LandingPageListSubpages}}</p>
+
+<h2 id="Outras_ferramentas">Outras ferramentas</h2>
+
+<ul>
+ <li>Animação em CSS - <a href="http://jeremyckahn.github.io/stylie/">Stylie</a></li>
+ <li>Para verificar as informações de exibição do dispositivo (útil para {{Glossary("web design responsivo")}}) - <a href="http://mydevice.io/">mydevice.io</a></li>
+ <li>Menus CSS - <a href="http://cssmenumaker.com/">cssmenumaker.com</a></li>
+ <li>Um poderoso e moderno <em>linter</em> CSS que ajuda a impor convenções consistentes e evitar erros em suas folhas de estilo - <a href="https://stylelint.io/">stylelint</a></li>
+</ul>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/CSS" title="/en-US/docs/Web/CSS">CSS</a></li>
+</ul>
diff --git a/files/pt-br/glossary/accessibility_tree/index.html b/files/pt-br/glossary/accessibility_tree/index.html
index a177742c3c..6e5eef7f72 100644
--- a/files/pt-br/glossary/accessibility_tree/index.html
+++ b/files/pt-br/glossary/accessibility_tree/index.html
@@ -33,7 +33,7 @@ original_slug: Glossario/arvore_de_acessibilidade
 
 
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li><a href="https://developer.mozilla.org/pt-BR/docs/Glossario">Glossário</a>
 
diff --git a/files/pt-br/glossary/ascii/index.html b/files/pt-br/glossary/ascii/index.html
index 7ad4110f05..5715661e87 100644
--- a/files/pt-br/glossary/ascii/index.html
+++ b/files/pt-br/glossary/ascii/index.html
@@ -10,7 +10,7 @@ tags:
 translation_of: Glossary/ASCII
 original_slug: Glossario/ASCII
 ---
-<p>ASCII (Código Padrão Americano para o Intercâmbio de Informação) é um dos mais populares métodos de codificação usado por computadores para converter letras, números, pontuações e códigos de controle dentro do formato digital. Desde 2007, <a href="https://wiki.developer.mozilla.org/pt-BR/docs/Glossario/UTF-8">UTF-8</a> substituiu-o na web.</p>
+<p>ASCII (Código Padrão Americano para o Intercâmbio de Informação) é um dos mais populares métodos de codificação usado por computadores para converter letras, números, pontuações e códigos de controle dentro do formato digital. Desde 2007, <a href="/pt-BR/docs/Glossario/UTF-8">UTF-8</a> substituiu-o na web.</p>
 
 <h2 id="Aprenda_mais">Aprenda mais</h2>
 
diff --git a/files/pt-br/glossary/call_stack/index.html b/files/pt-br/glossary/call_stack/index.html
index 772871f93d..fb6a3f1290 100644
--- a/files/pt-br/glossary/call_stack/index.html
+++ b/files/pt-br/glossary/call_stack/index.html
@@ -76,7 +76,7 @@ saudacao();
  <li>{{Interwiki("wikipedia", "Call stack")}} on Wikipedia</li>
 </ul>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ul>
  <li><a href="/en-US/docs/Glossary">MDN Web Docs Glossary</a>
 
diff --git a/files/pt-br/glossary/character_encoding/index.html b/files/pt-br/glossary/character_encoding/index.html
index bc14288cbf..8fc5c0e4ef 100644
--- a/files/pt-br/glossary/character_encoding/index.html
+++ b/files/pt-br/glossary/character_encoding/index.html
@@ -4,7 +4,7 @@ slug: Glossary/character_encoding
 translation_of: Glossary/character_encoding
 original_slug: Glossario/character_encoding
 ---
-<p>Uma codificação define um mapeamento entre bytes e texto. Uma sequência de bytes permite diferentes interpretações textuais. Ao especificar uma codificação específica (como <a href="https://wiki.developer.mozilla.org/pt-BR/docs/Glossario/UTF-8">UTF-8</a>), especificamos como a sequência de bytes deve ser interpretada.</p>
+<p>Uma codificação define um mapeamento entre bytes e texto. Uma sequência de bytes permite diferentes interpretações textuais. Ao especificar uma codificação específica (como <a href="/pt-BR/docs/Glossario/UTF-8">UTF-8</a>), especificamos como a sequência de bytes deve ser interpretada.</p>
 
 <p>Por exemplo, em HTML, normalmente declaramos uma codificação de caracteres UTF-8, usando a seguinte linha:</p>
 
diff --git a/files/pt-br/glossary/css_preprocessor/index.html b/files/pt-br/glossary/css_preprocessor/index.html
index 2663a70f15..9b2c1a969b 100644
--- a/files/pt-br/glossary/css_preprocessor/index.html
+++ b/files/pt-br/glossary/css_preprocessor/index.html
@@ -11,7 +11,7 @@ original_slug: Glossario/CSS_preprocessor
 
 <p>Para usar um pré-processador, você deve instalar um compilador CSS no seu servidor web; Ou usar o pré-processador CSS para compilar no ambiente de desenvolvimento, e então fazer upload do arquivo CSS compilado para o servidor web.</p>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li>Alguns dos pré-processadores CSS mais populares:
   <ol>
diff --git a/files/pt-br/glossary/graceful_degradation/index.html b/files/pt-br/glossary/graceful_degradation/index.html
index ec0a588454..482e8f9e3d 100644
--- a/files/pt-br/glossary/graceful_degradation/index.html
+++ b/files/pt-br/glossary/graceful_degradation/index.html
@@ -11,7 +11,7 @@ original_slug: Glossario/degradação_graciosa
 <p>É uma técnica útil que permite aos desenvolvedores da Web se concentrarem no desenvolvimento dos melhores sites possíveis, uma vez que esses sites são acessados por vários user-agents desconhecidos.<br>
  {{Glossary("Progressive enhancement")}} está relacionado, mas é diferente - geralmente visto como na direção oposta à degradação graciosa. Na realidade, ambas as abordagens são válidas e geralmente podem se complementar.</p>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li>{{Interwiki("wikipedia", "Graceful degradation")}} on Wikipedia</li>
  <li><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS">Handling common HTML and CSS problems</a></li>
diff --git a/files/pt-br/glossary/grid/index.html b/files/pt-br/glossary/grid/index.html
index a34050d2e4..0271c8c497 100644
--- a/files/pt-br/glossary/grid/index.html
+++ b/files/pt-br/glossary/grid/index.html
@@ -54,7 +54,7 @@ original_slug: Glossario/Grade
 
 <p>{{ EmbedLiveSample('example', '500', '330') }}</p>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li>CSS Grid Layout Guide:<br>
   <em><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Basic concepts of grid layout</a></em></li>
diff --git a/files/pt-br/glossary/http_header/index.html b/files/pt-br/glossary/http_header/index.html
index ba2fc63046..69d7d28678 100644
--- a/files/pt-br/glossary/http_header/index.html
+++ b/files/pt-br/glossary/http_header/index.html
@@ -51,7 +51,7 @@ X-Cache: Hit from cloudfront
 X-Cache-Info: cached
 </pre>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li>Especificações
   <ol>
diff --git a/files/pt-br/glossary/preflight_request/index.html b/files/pt-br/glossary/preflight_request/index.html
index 2d9717b2ce..c790be6a56 100644
--- a/files/pt-br/glossary/preflight_request/index.html
+++ b/files/pt-br/glossary/preflight_request/index.html
@@ -10,11 +10,11 @@ tags:
 translation_of: Glossary/Preflight_request
 original_slug: Glossario/Preflight_request
 ---
-<p>Uma requisição <em>preflight</em> de <a href="https://wiki.developer.mozilla.org/en-US/docs/Glossary/CORS">CORS</a> é uma requisição de {{Glossary ("CORS")}} que verifica se o protocolo {{Glossary ("CORS")}} é entendido e se o servidor aguarda o método e cabeçalhos('headers') especificados.</p>
+<p>Uma requisição <em>preflight</em> de <a href="/en-US/docs/Glossary/CORS">CORS</a> é uma requisição de {{Glossary ("CORS")}} que verifica se o protocolo {{Glossary ("CORS")}} é entendido e se o servidor aguarda o método e cabeçalhos('headers') especificados.</p>
 
 <p>É uma requisição {{HTTPMethod("OPTIONS")}}, que usa três cabeçalhos de solicitação HTTP: {{HTTPHeader("Access-Control-Request-Method")}}, {{HTTPHeader("Access-Control-Request-Headers")}}, e o cabeçalho {{HTTPHeader("Origin")}}.</p>
 
-<p>Uma requisição <em>preflight</em> é emitida automaticamente por um navegador, quando necessário. Geralmente, os desenvolvedores front-end não precisam criar essas solicitações. Ela acontece quando a requisição é qualificada <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTTP/CORS#Preflighted_requests">"para ser preflighted"</a>  e omitida para <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTTP/CORS#Simple_requests">requisições simples</a>.</p>
+<p>Uma requisição <em>preflight</em> é emitida automaticamente por um navegador, quando necessário. Geralmente, os desenvolvedores front-end não precisam criar essas solicitações. Ela acontece quando a requisição é qualificada <a href="/en-US/docs/Web/HTTP/CORS#Preflighted_requests">"para ser preflighted"</a>  e omitida para <a href="/en-US/docs/Web/HTTP/CORS#Simple_requests">requisições simples</a>.</p>
 
 <p>Por exemplo, o cliente pode perguntar ao servidor se este permitiria uma requisição {{HTTPMethod ("DELETE")}}, antes de enviá-la, usando uma requisição <em>preflight</em>:</p>
 
@@ -31,7 +31,7 @@ Access-Control-Allow-Origin: https://foo.bar.org
 Access-Control-Allow-Methods: POST, GET, OPTIONS, DELETE
 Access-Control-Max-Age: 86400</pre>
 
-<p>A resposta da requisição <em>preflight </em>pode ser opcionalmente cacheada para requisições realizadas na mesma url usando o cabeçalho <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Max-Age">Access-Control-Max-Age</a> como no exemplo acima.</p>
+<p>A resposta da requisição <em>preflight </em>pode ser opcionalmente cacheada para requisições realizadas na mesma url usando o cabeçalho <a href="/en-US/docs/Web/HTTP/Headers/Access-Control-Max-Age">Access-Control-Max-Age</a> como no exemplo acima.</p>
 
 <h2 id="Veja_também">Veja também</h2>
 
diff --git a/files/pt-br/glossary/proxy_server/index.html b/files/pt-br/glossary/proxy_server/index.html
index 7b5d1e09f9..f8c13289a1 100644
--- a/files/pt-br/glossary/proxy_server/index.html
+++ b/files/pt-br/glossary/proxy_server/index.html
@@ -16,6 +16,6 @@ original_slug: Glossario/Proxy_server
 <h2 id="Aprenda_Mais">Aprenda Mais</h2>
 
 <ul>
- <li><a href="https://wiki.developer.mozilla.org/pt-PT/docs/Web/HTTP/Proxy_servers_and_tunneling">Servidores proxy e túneis</a></li>
+ <li><a href="/pt-PT/docs/Web/HTTP/Proxy_servers_and_tunneling">Servidores proxy e túneis</a></li>
  <li><a href="https://pt.wikipedia.org/wiki/Proxy">Proxy</a> em Wikipedia</li>
 </ul>
diff --git a/files/pt-br/glossary/semantics/index.html b/files/pt-br/glossary/semantics/index.html
index c22d183b04..66c4e5aeb2 100644
--- a/files/pt-br/glossary/semantics/index.html
+++ b/files/pt-br/glossary/semantics/index.html
@@ -75,7 +75,7 @@ original_slug: Glossario/Semantica
  <li>{{interwiki("wikipedia", "Semantics#Computer_science", "The meaning of semantics in computer science")}} on Wikipedia</li>
 </ul>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ul>
  <li><a href="/en-US/docs/Glossary">MDN Web Docs Glossary</a>
 
diff --git a/files/pt-br/glossary/utf-8/index.html b/files/pt-br/glossary/utf-8/index.html
index bf2330c204..90001abd27 100644
--- a/files/pt-br/glossary/utf-8/index.html
+++ b/files/pt-br/glossary/utf-8/index.html
@@ -4,7 +4,7 @@ slug: Glossary/UTF-8
 translation_of: Glossary/UTF-8
 original_slug: Glossario/UTF-8
 ---
-<p>UTF-8 (UCS Transformation Format 8) é a <a href="https://wiki.developer.mozilla.org/pt-BR/docs/Glossario/character_encoding">codificação de caracteres</a> mais comum da World Wide Web. Cada caractere é representado por um a quatro bytes. UTF-8 é compatível com versões anteriores do <a href="https://developer.mozilla.org/pt-BR/docs/Glossario/ASCII">ASCII</a> e pode representar qualquer caractere Unicode padrão.</p>
+<p>UTF-8 (UCS Transformation Format 8) é a <a href="/pt-BR/docs/Glossario/character_encoding">codificação de caracteres</a> mais comum da World Wide Web. Cada caractere é representado por um a quatro bytes. UTF-8 é compatível com versões anteriores do <a href="https://developer.mozilla.org/pt-BR/docs/Glossario/ASCII">ASCII</a> e pode representar qualquer caractere Unicode padrão.</p>
 
 <p>Os primeiros 128 caracteres UTF-8 correspondem exatamente aos primeiros 128 caracteres ASCII (numerados de 0 a 127), o que significa que o texto ASCII existente já é UTF-8 válido. Todos os outros caracteres usam dois a quatro bytes. Cada byte tem alguns bits reservados para fins de codificação. Como caracteres não ASCII requerem mais de um byte para armazenamento, eles correm o risco de serem corrompidos se os bytes forem separados e não forem recombinados.</p>
 
diff --git a/files/pt-br/glossary/viewport/index.html b/files/pt-br/glossary/viewport/index.html
index 0d7ffbc9e8..f76c16f0f3 100644
--- a/files/pt-br/glossary/viewport/index.html
+++ b/files/pt-br/glossary/viewport/index.html
@@ -13,7 +13,7 @@ original_slug: Glossario/Viewport
 
 <p>A porção da viewport que está visível no momento é chamada de <strong>visual viewport</strong> . Esta pode ser menor que a viewport de layout, assim é quando o usuário efetua uma pinçada/zoom. O <strong> viewport</strong> <strong>de</strong> <strong>layout</strong> permanece o mesmo, mas a visual viewport se torna menor.</p>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li>Conhecimentos gerais
   <ol>
diff --git a/files/pt-br/learn/accessibility/index.html b/files/pt-br/learn/accessibility/index.html
index 0c34fc5f4c..774cb527e9 100644
--- a/files/pt-br/learn/accessibility/index.html
+++ b/files/pt-br/learn/accessibility/index.html
@@ -19,7 +19,7 @@ translation_of: Learn/Accessibility
 ---
 <div>{{LearnSidebar}}</div>
 
-<p class="summary">Aprender HTML, CSS e Javascript é útil se você quer se tornar um desenvolvedor web, mas seu conhecimento precisa ir além. Você deve usá-las de forma a maximizar a audiencia dos seus sites, e permitir que todos possam acessar o conteúdo. Para conseguir isso, será necessário seguir boas práticas, realizar testes em vários navegadores (<a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing">cross browser testing</a>) e pensar em acessibilidade desde o início do desenvolvimento. Este módulo abordará a acessibilidade em detalhes.</p>
+<p class="summary">Aprender HTML, CSS e Javascript é útil se você quer se tornar um desenvolvedor web, mas seu conhecimento precisa ir além. Você deve usá-las de forma a maximizar a audiencia dos seus sites, e permitir que todos possam acessar o conteúdo. Para conseguir isso, será necessário seguir boas práticas, realizar testes em vários navegadores (<a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing">cross browser testing</a>) e pensar em acessibilidade desde o início do desenvolvimento. Este módulo abordará a acessibilidade em detalhes.</p>
 
 <h2 id="Visão_geral">Visão geral</h2>
 
@@ -39,7 +39,7 @@ translation_of: Learn/Accessibility
 
 <h2 id="Prerequisitos">Prerequisitos</h2>
 
-<p>Para ter o máximo proveito deste módulo, recomendamos que esteja familiarizados com pelos os dois primeiros módulos de <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/HTML">HTML</a>, <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/CSS">CSS</a>, e <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/JavaScript">JavaScript</a>, ou melhor ainda, com as partes principais do módulo de acessibilidade de cada capítulo, à medida em que vai estudando.</p>
+<p>Para ter o máximo proveito deste módulo, recomendamos que esteja familiarizados com pelos os dois primeiros módulos de <a href="/en-US/docs/Learn/HTML">HTML</a>, <a href="/en-US/docs/Learn/CSS">CSS</a>, e <a href="/en-US/docs/Learn/JavaScript">JavaScript</a>, ou melhor ainda, com as partes principais do módulo de acessibilidade de cada capítulo, à medida em que vai estudando.</p>
 
 <div class="note">
 <p><strong>Nota</strong>: Se você está estudando em um dispositivo que não pode criar novos arquivos, voce pode testar os exemplos em alguma aplicação de codificação online, como <a href="http://jsbin.com/">JSBin</a> ou <a href="https://thimble.mozilla.org/">Thimble</a>.</p>
diff --git a/files/pt-br/learn/getting_started_with_the_web/html_basics/index.html b/files/pt-br/learn/getting_started_with_the_web/html_basics/index.html
index bd6ddd381b..de86333e93 100644
--- a/files/pt-br/learn/getting_started_with_the_web/html_basics/index.html
+++ b/files/pt-br/learn/getting_started_with_the_web/html_basics/index.html
@@ -149,7 +149,7 @@ original_slug: Aprender/Getting_started_with_the_web/HTML_basico
 <p>Agora, tente adicionar um título adequado à sua página HTML logo acima do elemento {{htmlelement("img")}}.</p>
 
 <div class="blockIndicator note">
-<p><strong>Nota</strong>: Você verá que seu nível de cabeçalho 1 tem um estilo implícito. Não use elementos de cabeçalho para aumentar ou negritar o texto, pois eles são usados ​​para <a href="/pt-BR/docs/Aprender/HTML/Introducao_ao_HTML/Fundamentos_textuais_HTML#Por_que_precisamos_de_estrutura">acessibilidade</a> e <a href="https://wiki.developer.mozilla.org/pt-BR/docs/Aprender/HTML/Introducao_ao_HTML/Fundamentos_textuais_HTML#Por_que_precisamos_de_estrutura">outros motivos, como SEO</a>. Tente criar uma sequência significativa de títulos em suas páginas, sem pular os níveis.</p>
+<p><strong>Nota</strong>: Você verá que seu nível de cabeçalho 1 tem um estilo implícito. Não use elementos de cabeçalho para aumentar ou negritar o texto, pois eles são usados ​​para <a href="/pt-BR/docs/Aprender/HTML/Introducao_ao_HTML/Fundamentos_textuais_HTML#Por_que_precisamos_de_estrutura">acessibilidade</a> e <a href="/pt-BR/docs/Aprender/HTML/Introducao_ao_HTML/Fundamentos_textuais_HTML#Por_que_precisamos_de_estrutura">outros motivos, como SEO</a>. Tente criar uma sequência significativa de títulos em suas páginas, sem pular os níveis.</p>
 </div>
 
 <h3 id="Parágrafo">Parágrafo</h3>
diff --git a/files/pt-br/learn/getting_started_with_the_web/javascript_basics/index.html b/files/pt-br/learn/getting_started_with_the_web/javascript_basics/index.html
index 68b897a9a6..5bd53a3318 100644
--- a/files/pt-br/learn/getting_started_with_the_web/javascript_basics/index.html
+++ b/files/pt-br/learn/getting_started_with_the_web/javascript_basics/index.html
@@ -101,7 +101,7 @@ meuCabecalho.textContent = 'Ola mundo!';</pre>
 </div>
 
 <div class="note">
-<p><strong>Nota</strong>: Para mais detalhes sobre a diferença entre <code>var</code> e <code>let</code>, veja<a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/Variables#The_difference_between_var_and_let"> A diferença entre var e let</a>.</p>
+<p><strong>Nota</strong>: Para mais detalhes sobre a diferença entre <code>var</code> e <code>let</code>, veja<a href="/en-US/docs/Learn/JavaScript/First_steps/Variables#The_difference_between_var_and_let"> A diferença entre var e let</a>.</p>
 </div>
 
 <p>Depois de declarar uma variável, você pode dar a ela um valor:</p>
diff --git a/files/pt-br/learn/html/multimedia_and_embedding/video_and_audio_content/index.html b/files/pt-br/learn/html/multimedia_and_embedding/video_and_audio_content/index.html
index ae9111133f..7b16c8b0a2 100644
--- a/files/pt-br/learn/html/multimedia_and_embedding/video_and_audio_content/index.html
+++ b/files/pt-br/learn/html/multimedia_and_embedding/video_and_audio_content/index.html
@@ -119,7 +119,7 @@ original_slug: Aprender/HTML/Multimedia_and_embedding/Video_and_audio_content
 <p>Cada elemento <code>&lt;source&gt;</code> também tem um atributo {{htmlattrxref("type", "source")}}. Isso é opcional, mas é recomendável que você os inclua - eles contêm o {{glossary("MIME type","MIME types")}} dos arquivos de vídeo, e os navegadores podem lê-los e pular imediatamente os vídeos que não entendem. Se não estiverem incluídos, os navegadores carregarão e tentarão reproduzir cada arquivo até encontrar um que funcione, consumindo ainda mais tempo e recursos.</p>
 
 <div class="note">
-<p><strong>Nota</strong>: Consulte o nosso <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Media/Formats">guia sobre tipos e formatos de mídias</a> (inglês) para obter ajuda na seleção dos melhores contêineres e codecs para suas necessidades, bem como procurar os tipos MIME certos para especificar cada</p>
+<p><strong>Nota</strong>: Consulte o nosso <a href="/en-US/docs/Web/Media/Formats">guia sobre tipos e formatos de mídias</a> (inglês) para obter ajuda na seleção dos melhores contêineres e codecs para suas necessidades, bem como procurar os tipos MIME certos para especificar cada</p>
 </div>
 
 <h3 id="Outros_recursos_de_&lt;video>">Outros recursos de &lt;video&gt;</h3>
@@ -220,7 +220,7 @@ mediaElem.audioTracks.onaddtrack = function(event) {
  <li>Da mesma forma, em ambientes em que a reprodução do áudio seria uma distração ou perturbação (como em uma biblioteca ou quando um parceiro está tentando dormir), ter legendas pode ser muito útil.</li>
 </ul>
 
-<p>Não seria bom poder fornecer a essas pessoas uma transcrição das palavras que estão sendo ditas no áudio / vídeo? Bem, graças ao vídeo HTML5, você pode, com o formato <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/WebVTT_API">WebVTT </a>e o elemento {{htmlelement ("track")}}.</p>
+<p>Não seria bom poder fornecer a essas pessoas uma transcrição das palavras que estão sendo ditas no áudio / vídeo? Bem, graças ao vídeo HTML5, você pode, com o formato <a href="/en-US/docs/Web/API/WebVTT_API">WebVTT </a>e o elemento {{htmlelement ("track")}}.</p>
 
 <div class="note">
 <p><strong>Nota</strong>: "Transcrever" significa "escrever as palavras faladas como texto". O texto resultante é uma "transcrição".</p>
@@ -271,7 +271,7 @@ This is the second.
 
 <p><img alt='Video player with stand controls such as play, stop, volume, and captions on and off. The video playing shows a scene of a man holding a spear-like weapon, and a caption reads "Esta hoja tiene pasado oscuro."' src="https://mdn.mozillademos.org/files/7887/video-player-with-captions.png" style="display: block; height: 365px; margin: 0px auto; width: 593px;"></p>
 
-<p>Para mais detalhes, leia <a href="https://wiki.developer.mozilla.org/en-US/Apps/Build/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video">Adicionando legendas e legendas ao vídeo HTML5</a>. Você pode <a href="http://iandevlin.github.io/mdn/video-player-with-captions/">encontrar o exemplo</a> que acompanha este artigo no Github, escrito por Ian Devlin (consulte o <a href="https://github.com/iandevlin/iandevlin.github.io/tree/master/mdn/video-player-with-captions">código-fonte</a> também.) Este exemplo usa algum JavaScript para permitir que os usuários escolham entre diferentes legendas. Observe que, para ativar as legendas, você precisa pressionar o botão "CC" e selecionar uma opção - inglês, alemão ou espanhol.</p>
+<p>Para mais detalhes, leia <a href="/en-US/Apps/Build/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video">Adicionando legendas e legendas ao vídeo HTML5</a>. Você pode <a href="http://iandevlin.github.io/mdn/video-player-with-captions/">encontrar o exemplo</a> que acompanha este artigo no Github, escrito por Ian Devlin (consulte o <a href="https://github.com/iandevlin/iandevlin.github.io/tree/master/mdn/video-player-with-captions">código-fonte</a> também.) Este exemplo usa algum JavaScript para permitir que os usuários escolham entre diferentes legendas. Observe que, para ativar as legendas, você precisa pressionar o botão "CC" e selecionar uma opção - inglês, alemão ou espanhol.</p>
 
 <div class="note">
 <p><strong>Nota</strong>: As faixas de texto também ajudam você com o {{glossary ("SEO")}}, pois os mecanismos de pesquisa prosperam especialmente no texto. As trilhas de texto permitem até que os mecanismos de pesquisa sejam vinculados diretamente a um ponto no meio do vídeo.</p>
@@ -303,11 +303,11 @@ This is the second.
 
 <ul>
  <li>Os elementos de mídia HTML: {{htmlelement("audio")}}, {{htmlelement("video")}}, {{htmlelement("source")}}, {{htmlelement("track")}}.</li>
- <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Media">Tecnologias de mídia da Web</a>.</li>
- <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Media/Formats">Guia para tipos e formatos de mídia na Web</a>.</li>
- <li><a href="https://wiki.developer.mozilla.org/en-US/Apps/Build/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video">Adicionando legendas e legendas ao vídeo HTML5</a>.</li>
- <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Apps/Fundamentals/Audio_and_video_delivery">Entrega de áudio e vídeo:</a> muitos detalhes sobre como colocar áudio e vídeo em páginas da Web usando HTML e JavaScript.</li>
- <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Apps/Fundamentals/Audio_and_video_manipulation">Manipulação de áudio e vídeo:</a> muitos detalhes sobre a manipulação de áudio e vídeo usando JavaScript (por exemplo, adicionando filtros).</li>
+ <li><a href="/en-US/docs/Web/Media">Tecnologias de mídia da Web</a>.</li>
+ <li><a href="/en-US/docs/Web/Media/Formats">Guia para tipos e formatos de mídia na Web</a>.</li>
+ <li><a href="/en-US/Apps/Build/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video">Adicionando legendas e legendas ao vídeo HTML5</a>.</li>
+ <li><a href="/en-US/docs/Web/Apps/Fundamentals/Audio_and_video_delivery">Entrega de áudio e vídeo:</a> muitos detalhes sobre como colocar áudio e vídeo em páginas da Web usando HTML e JavaScript.</li>
+ <li><a href="/en-US/docs/Web/Apps/Fundamentals/Audio_and_video_manipulation">Manipulação de áudio e vídeo:</a> muitos detalhes sobre a manipulação de áudio e vídeo usando JavaScript (por exemplo, adicionando filtros).</li>
  <li>Opções automatizadas para <a href="http://www.inwhatlanguage.com/blog/translate-video-audio/">traduzir multimídia.</a></li>
 </ul>
 
diff --git a/files/pt-br/learn/index.html b/files/pt-br/learn/index.html
index 9c76dd4242..954b677386 100644
--- a/files/pt-br/learn/index.html
+++ b/files/pt-br/learn/index.html
@@ -37,7 +37,7 @@ original_slug: Aprender
 </ul>
 
 <div class="note">
-<p><strong>Nota</strong>: Nosso <a href="https://wiki.developer.mozilla.org/pt-BR/docs/Glossario">glossário</a> fornece definições de terminologia.</p>
+<p><strong>Nota</strong>: Nosso <a href="/pt-BR/docs/Glossario">glossário</a> fornece definições de terminologia.</p>
 </div>
 
 <p>{{LearnBox({"title":"Entrada aleatória do glossário"})}}</p>
diff --git a/files/pt-br/learn/javascript/asynchronous/async_await/index.html b/files/pt-br/learn/javascript/asynchronous/async_await/index.html
new file mode 100644
index 0000000000..dd6a558cfe
--- /dev/null
+++ b/files/pt-br/learn/javascript/asynchronous/async_await/index.html
@@ -0,0 +1,556 @@
+---
+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/building_blocks/conditionals/index.html b/files/pt-br/learn/javascript/building_blocks/conditionals/index.html
index 6f110ad3e0..189781c609 100644
--- a/files/pt-br/learn/javascript/building_blocks/conditionals/index.html
+++ b/files/pt-br/learn/javascript/building_blocks/conditionals/index.html
@@ -612,6 +612,6 @@ window.addEventListener('load', updateCode);
 
 <h2 id="Teste_suas_habilidades!">Teste suas habilidades!</h2>
 
-<p>Você chegou ao final deste artigo, mas você consegue se lembrar das informações mais importantes? Você pode encontrar mais alguns testes para verificar se reteve essas informações antes de prosseguir — Veja <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Test_your_skills:_Conditionals">Teste suas habilidades: Condicionais</a>.</p>
+<p>Você chegou ao final deste artigo, mas você consegue se lembrar das informações mais importantes? Você pode encontrar mais alguns testes para verificar se reteve essas informações antes de prosseguir — Veja <a href="/en-US/docs/Learn/JavaScript/Building_blocks/Test_your_skills:_Conditionals">Teste suas habilidades: Condicionais</a>.</p>
 
 <p>{{NextMenu("Learn/JavaScript/Building_blocks/Looping_code", "Learn/JavaScript/Building_blocks")}}</p>
diff --git a/files/pt-br/learn/javascript/client-side_web_apis/client-side_storage/index.html b/files/pt-br/learn/javascript/client-side_web_apis/client-side_storage/index.html
index ad934caa43..4197b0aa26 100644
--- a/files/pt-br/learn/javascript/client-side_web_apis/client-side_storage/index.html
+++ b/files/pt-br/learn/javascript/client-side_web_apis/client-side_storage/index.html
@@ -14,7 +14,7 @@ original_slug: Aprender/JavaScript/Client-side_web_APIs/Client-side_storage
  <tbody>
   <tr>
    <th scope="row">Pré-requisitos:</th>
-   <td>Noções básicas de JavaScript (consulte as <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps">primeiras etapas </a><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps"> </a>, <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks">blocos de construção</a> , <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects">objetos JavaScript</a> ), as <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Introduction">noções básicas de APIs do lado do cliente</a></td>
+   <td>Noções básicas de JavaScript (consulte as <a href="/en-US/docs/Learn/JavaScript/First_steps">primeiras etapas </a><a href="/en-US/docs/Learn/JavaScript/First_steps"> </a>, <a href="/en-US/docs/Learn/JavaScript/Building_blocks">blocos de construção</a> , <a href="/en-US/docs/Learn/JavaScript/Objects">objetos JavaScript</a> ), as <a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Introduction">noções básicas de APIs do lado do cliente</a></td>
   </tr>
   <tr>
    <th scope="row">Objetivo:</th>
@@ -25,7 +25,7 @@ original_slug: Aprender/JavaScript/Client-side_web_APIs/Client-side_storage
 
 <h2 id="Armazenamento_do_lado_do_cliente">Armazenamento do lado do cliente?</h2>
 
-<p>Em outro lugar na área de aprendizagem MDN, falamos sobre a diferença entre <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Server-side/First_steps/Client-Server_overview#Static_sites">sites estáticos</a> e <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Server-side/First_steps/Client-Server_overview#Dynamic_sites">sites dinâmicos</a> . A maioria dos principais sites modernos são dinâmicos - eles armazenam dados no servidor usando algum tipo de banco de dados (armazenamento do lado do servidor) e, em seguida, executam o código do <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Server-side">lado do servidor</a> para recuperar os dados necessários, inserem-nos em modelos de página estática e fornecem o HTML resultante para o cliente a ser exibido pelo navegador do usuário.er.</p>
+<p>Em outro lugar na área de aprendizagem MDN, falamos sobre a diferença entre <a href="/en-US/docs/Learn/Server-side/First_steps/Client-Server_overview#Static_sites">sites estáticos</a> e <a href="/en-US/docs/Learn/Server-side/First_steps/Client-Server_overview#Dynamic_sites">sites dinâmicos</a> . A maioria dos principais sites modernos são dinâmicos - eles armazenam dados no servidor usando algum tipo de banco de dados (armazenamento do lado do servidor) e, em seguida, executam o código do <a href="/en-US/docs/Learn/Server-side">lado do servidor</a> para recuperar os dados necessários, inserem-nos em modelos de página estática e fornecem o HTML resultante para o cliente a ser exibido pelo navegador do usuário.er.</p>
 
 <p>O armazenamento do lado do cliente funciona em princípios semelhantes, mas tem usos diferentes. Consiste em APIs JavaScript que permitem armazenar dados no cliente (ou seja, na máquina do usuário) e recuperá-los quando necessário. Isso tem muitos usos distintos, como:</p>
 
@@ -39,7 +39,7 @@ original_slug: Aprender/JavaScript/Client-side_web_APIs/Client-side_storage
 <p>Freqüentemente, o armazenamento do lado do cliente e do lado do servidor são usados ​​juntos. Por exemplo, você pode baixar um lote de arquivos de música (talvez usados ​​por um jogo da web ou aplicativo de reprodutor de música), armazená-los em um banco de dados do cliente e reproduzi-los conforme necessário. O usuário só teria que baixar os arquivos de música uma vez - em visitas subsequentes, eles seriam recuperados do banco de dados.</p>
 
 <div class="note">
-<p><strong>Nota</strong> : Existem limites para a quantidade de dados que você pode armazenar usando APIs de armazenamento do lado do cliente (possivelmente por API individual e cumulativamente); o limite exato varia dependendo do navegador e, possivelmente, com base nas configurações do usuário. Consulte <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API/Browser_storage_limits_and_eviction_criteria">Limites de armazenamento do navegador e critérios de despejo</a> para obter mais informações..</p>
+<p><strong>Nota</strong> : Existem limites para a quantidade de dados que você pode armazenar usando APIs de armazenamento do lado do cliente (possivelmente por API individual e cumulativamente); o limite exato varia dependendo do navegador e, possivelmente, com base nas configurações do usuário. Consulte <a href="/en-US/docs/Web/API/IndexedDB_API/Browser_storage_limits_and_eviction_criteria">Limites de armazenamento do navegador e critérios de despejo</a> para obter mais informações..</p>
 </div>
 
 <h3 id="Old_school_Cookies">Old school: Cookies</h3>
diff --git a/files/pt-br/learn/javascript/client-side_web_apis/index.html b/files/pt-br/learn/javascript/client-side_web_apis/index.html
index cb2fe46cd9..854ecb4ff7 100644
--- a/files/pt-br/learn/javascript/client-side_web_apis/index.html
+++ b/files/pt-br/learn/javascript/client-side_web_apis/index.html
@@ -32,7 +32,7 @@ original_slug: Aprender/JavaScript/Client-side_web_APIs
 <h2 id="Guias">Guias</h2>
 
 <dl>
- <dt><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Introduction">Introdução a APIs para a web</a></dt>
+ <dt><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Introduction">Introdução a APIs para a web</a></dt>
  <dd>Primeiro, vamos começar com apis de alto nível — o que elas são, como elas funcionam, quando usar no seu código, como elas são estruturadas? Nós veremos diferentes tipos de classses principais e o que elas são, e quais são as possibilidades de uso.</dd>
  <dt><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents">Manipulando documentos</a></dt>
  <dd>Quando estiver codificando páginas da web ou aplicações, uma das coisas mais comuns que você irá fazer será manipular documentos da web de alguma forma. Normalmente isso é feito usando o Document Object Model (DOM), um conjunto de APIs para controlar o HTML e a informação sobre os estilos que usa fortemente o objeto {{domxref("Document")}}. Neste artigo vamos ver como usar o DOM em detalhes, juntamente com outras APIs interessantes que podem alterar seu ambiente de desenvolvimento de modos interessantes.</dd>
diff --git a/files/pt-br/learn/javascript/first_steps/variables/index.html b/files/pt-br/learn/javascript/first_steps/variables/index.html
index 88b45eaf8f..73cef40bcd 100644
--- a/files/pt-br/learn/javascript/first_steps/variables/index.html
+++ b/files/pt-br/learn/javascript/first_steps/variables/index.html
@@ -310,7 +310,7 @@ const horasNoDia = 24;</span></span></span></span></pre>
 
 <h2 id="Teste_suas_habilidades!">Teste suas habilidades!</h2>
 
-<p>Você chegou ao final deste artigo, mas consegue se lembrar das informações mais importantes? Você pode encontrar alguns testes adicionais para verificar se você reteve essas informações antes de prosseguir — veja <a href="https://developer.mozilla.org/pt-BR/docs/Learn/JavaScript/First_steps/Teste_suas_habilidades:_variaveis">Teste suas habilidades: variáveis</a>.</p>
+<p>Você chegou ao final deste artigo, mas consegue se lembrar das informações mais importantes? Você pode encontrar alguns testes adicionais para verificar se você reteve essas informações antes de prosseguir — veja <a href="/pt-BR/docs/Learn/JavaScript/First_steps/Teste_suas_habilidades:_variaveis">Teste suas habilidades: variáveis</a>.</p>
 
 <h2 id="Sumário">Sumário</h2>
 
@@ -321,13 +321,13 @@ const horasNoDia = 24;</span></span></span></span></pre>
 <h2 id="Neste_módulo">Neste módulo</h2>
 
 <ul>
- <li><a href="https://wiki.developer.mozilla.org/pt-BR/docs/Learn/JavaScript/First_steps/O_que_e_JavaScript">O que é JavaScript?</a></li>
- <li><a href="https://developer.mozilla.org/pt-BR/docs/Learn/JavaScript/First_steps/A_first_splash">Um primeiro mergulho no JavaScript</a></li>
- <li><a href="https://developer.mozilla.org/pt-BR/docs/Learn/JavaScript/First_steps/What_went_wrong">O que deu errado? Resolvendo problemas no JavaScript</a></li>
- <li><a href="https://developer.mozilla.org/pt-BR/docs/Learn/JavaScript/First_steps/Vari%C3%A1veis">Armazenando as informações que você precisa — Variáveis</a></li>
- <li><a href="https://developer.mozilla.org/pt-BR/docs/Learn/JavaScript/First_steps/Matematica">Matemática básica no JavaScript — números e operadores</a></li>
- <li><a href="https://developer.mozilla.org/pt-BR/docs/Learn/JavaScript/First_steps/Strings">Trabalhando com textos — strings em JavaScript</a></li>
- <li><a href="https://developer.mozilla.org/pt-BR/docs/Learn/JavaScript/First_steps/Useful_string_methods">Métodos úteis de string</a></li>
- <li><a href="https://developer.mozilla.org/pt-BR/docs/Learn/JavaScript/First_steps/Arrays">Arrays</a></li>
- <li><a href="https://developer.mozilla.org/pt-BR/docs/Learn/JavaScript/First_steps/Gerador_de_historias_bobas">Avaliação: Gerador de histórias bobas</a></li>
+ <li><a href="/pt-BR/docs/Learn/JavaScript/First_steps/O_que_e_JavaScript">O que é JavaScript?</a></li>
+ <li><a href="/pt-BR/docs/Learn/JavaScript/First_steps/A_first_splash">Um primeiro mergulho no JavaScript</a></li>
+ <li><a href="/pt-BR/docs/Learn/JavaScript/First_steps/What_went_wrong">O que deu errado? Resolvendo problemas no JavaScript</a></li>
+ <li><a href="/pt-BR/docs/Learn/JavaScript/First_steps/Vari%C3%A1veis">Armazenando as informações que você precisa — Variáveis</a></li>
+ <li><a href="/pt-BR/docs/Learn/JavaScript/First_steps/Matematica">Matemática básica no JavaScript — números e operadores</a></li>
+ <li><a href="/pt-BR/docs/Learn/JavaScript/First_steps/Strings">Trabalhando com textos — strings em JavaScript</a></li>
+ <li><a href="/pt-BR/docs/Learn/JavaScript/First_steps/Useful_string_methods">Métodos úteis de string</a></li>
+ <li><a href="/pt-BR/docs/Learn/JavaScript/First_steps/Arrays">Arrays</a></li>
+ <li><a href="/pt-BR/docs/Learn/JavaScript/First_steps/Gerador_de_historias_bobas">Avaliação: Gerador de histórias bobas</a></li>
 </ul>
diff --git a/files/pt-br/learn/javascript/index.html b/files/pt-br/learn/javascript/index.html
index 2d0226b691..9a3f199b62 100644
--- a/files/pt-br/learn/javascript/index.html
+++ b/files/pt-br/learn/javascript/index.html
@@ -41,15 +41,15 @@ original_slug: Aprender/JavaScript
 <p>Este tópico contém os seguintes módulos, em uma ordem que sugerimos para estudá-los.</p>
 
 <dl>
- <dt><a href="https://wiki.developer.mozilla.org/pt-BR/docs/Learn/JavaScript/First_steps">Primeiros passos em JavaScript</a></dt>
+ <dt><a href="/pt-BR/docs/Learn/JavaScript/First_steps">Primeiros passos em JavaScript</a></dt>
  <dd>Em nosso primeiro módulo JavaScript, primeiro responderemos algumas questões fundamentais como "o que é JavaScript?", "Como ele se parece?" E "o que ele pode fazer?", antes de passar para sua primeira experiência prática de escrever JavaScript. Depois disso, discutimos alguns recursos chave do JavaScript em detalhes, como variáveis, cadeias de caracteres, números e matrizes.</dd>
- <dt><a href="https://wiki.developer.mozilla.org/pt-BR/docs/Aprender/JavaScript/Elementos_construtivos">Blocos de codigo JavaScript</a></dt>
+ <dt><a href="/pt-BR/docs/Aprender/JavaScript/Elementos_construtivos">Blocos de codigo JavaScript</a></dt>
  <dd>Neste módulo, continuaremos a falar sobre os principais recursos fundamentais do JavaScript, voltando nossa atenção para os tipos mais comuns de blocos de código<strong>,</strong> como instruções condicionais, funções e eventos. Você já viu essas coisas no curso, mas apenas de passagem, aqui discutiremos tudo explicitamente.</dd>
- <dt><a href="https://wiki.developer.mozilla.org/pt-BR/docs/Aprender/JavaScript/Objetos">Introdução a objetos em JavaScript</a></dt>
+ <dt><a href="/pt-BR/docs/Aprender/JavaScript/Objetos">Introdução a objetos em JavaScript</a></dt>
  <dd>Em JavaScript, a maioria das coisas são objetos, desde seus principais recursos até as APIs do navegador. Você pode até criar seus próprios objetos.É importante entender a natureza orientada a objetos do JavaScript se você quiser ir mais longe com seu conhecimento da linguagem e escrever um código mais eficiente, portanto, fornecemos este módulo para ajudá-lo. Aqui ensinamos a teoria e a sintaxe de objetos em detalhes, observamos como criar seus próprios objetos e explicamos quais são os dados JSON e como trabalhar com eles.</dd>
- <dt><strong><a href="https://wiki.developer.mozilla.org/pt-BR/docs/Learn/JavaScript/Asynchronous">JavaScript Assíncrono</a></strong></dt>
+ <dt><strong><a href="/pt-BR/docs/Learn/JavaScript/Asynchronous">JavaScript Assíncrono</a></strong></dt>
  <dd>Neste módulo, examinamos o JavaScript assíncrono, por que é importante e como ele pode ser usado para lidar efetivamente com possíveis operações de bloqueio, como a busca de recursos de um servidor.</dd>
- <dt><a href="https://wiki.developer.mozilla.org/pt-BR/docs/Aprender/JavaScript/Client-side_web_APIs">API's Web do lado cliente</a></dt>
+ <dt><a href="/pt-BR/docs/Aprender/JavaScript/Client-side_web_APIs">API's Web do lado cliente</a></dt>
  <dd>Ao escrever JavaScript para sites ou aplicativos da Web, você não vai muito longe antes de começar a usar APIs - interfaces para manipular diferentes aspectos do navegador e do sistema operacional em que o site está sendo executado, ou até dados de outros sites ou serviços. Neste módulo, vamos explorar o que são as APIs e como usar algumas das APIs mais comuns que você encontrará com frequência em seu trabalho de desenvolvimento.</dd>
 </dl>
 
diff --git a/files/pt-br/learn/javascript/objects/basics/index.html b/files/pt-br/learn/javascript/objects/basics/index.html
index 340fc9dd82..ab5da689b9 100644
--- a/files/pt-br/learn/javascript/objects/basics/index.html
+++ b/files/pt-br/learn/javascript/objects/basics/index.html
@@ -236,7 +236,7 @@ var meuVideo = document.querySelector('video');</pre>
 
 <h2 id="Teste_suas_habilidades_!">Teste suas habilidades !</h2>
 
-<p>Você chegou ao fim desse artigo,entretanto você consegue lembrar as informações mais importantes? Você pode encontrar mais testes para verificar se você consolidou as informações antes que você siga adiante  — veja  <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Test_your_skills:_Object_basics">Test your skills: Object basics</a>.</p>
+<p>Você chegou ao fim desse artigo,entretanto você consegue lembrar as informações mais importantes? Você pode encontrar mais testes para verificar se você consolidou as informações antes que você siga adiante  — veja  <a href="/en-US/docs/Learn/JavaScript/Objects/Test_your_skills:_Object_basics">Test your skills: Object basics</a>.</p>
 
 <h2 id="Resumo">Resumo</h2>
 
diff --git a/files/pt-br/learn/javascript/objects/json/index.html b/files/pt-br/learn/javascript/objects/json/index.html
index 3f28b6d5ab..2db3354e1a 100644
--- a/files/pt-br/learn/javascript/objects/json/index.html
+++ b/files/pt-br/learn/javascript/objects/json/index.html
@@ -19,7 +19,7 @@ original_slug: Aprender/JavaScript/Objetos/JSON
   <tr>
    <th scope="row">Pré-requisitos</th>
    <td>
-    <p>Conhecimento básico em informática, conhecimento básico de HTML e CSS, conhecimento básico de JavaScript veja <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps">Primeiros passos</a> e <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks">Construindo blocos</a>) e o básico de OOJS (veja <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/JavaScript/Object-oriented/Introduction">Introdução a objetos</a>).</p>
+    <p>Conhecimento básico em informática, conhecimento básico de HTML e CSS, conhecimento básico de JavaScript veja <a href="/en-US/docs/Learn/JavaScript/First_steps">Primeiros passos</a> e <a href="/en-US/docs/Learn/JavaScript/Building_blocks">Construindo blocos</a>) e o básico de OOJS (veja <a href="/en-US/docs/Learn/JavaScript/Object-oriented/Introduction">Introdução a objetos</a>).</p>
    </td>
   </tr>
   <tr>
diff --git a/files/pt-br/learn/server-side/django/deployment/index.html b/files/pt-br/learn/server-side/django/deployment/index.html
index 1c4b766923..4ab5fde0b2 100644
--- a/files/pt-br/learn/server-side/django/deployment/index.html
+++ b/files/pt-br/learn/server-side/django/deployment/index.html
@@ -108,7 +108,7 @@ original_slug: Learn/Server-side/Django/Hospedagem
 
 <h2 id="Preparando_seu_site_para_publicação">Preparando seu site para publicação</h2>
 
-<p>O <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Server-side/Django/skeleton_website">esqueleto do site do Django</a> criado usando as ferramentas django-admin e manage.py é configurado para tornar o desenvolvimento mais fácil. Muitas das configurações do projeto Django (especificadas em settings.py) devem ser diferentes para produção, por motivos de segurança ou desempenho.</p>
+<p>O <a href="/en-US/docs/Learn/Server-side/Django/skeleton_website">esqueleto do site do Django</a> criado usando as ferramentas django-admin e manage.py é configurado para tornar o desenvolvimento mais fácil. Muitas das configurações do projeto Django (especificadas em settings.py) devem ser diferentes para produção, por motivos de segurança ou desempenho.</p>
 
 <div class="note">
 <p><strong>Dica:</strong> É comum ter um arquivo <strong>settings.py</strong> separado para produção e importar configurações confidenciais de um arquivo separado ou de uma variável de ambiente. Este arquivo deve ser protegido, mesmo se o resto do código-fonte estiver disponível em um repositório público.</p>
diff --git a/files/pt-br/learn/server-side/first_steps/client-server_overview/index.html b/files/pt-br/learn/server-side/first_steps/client-server_overview/index.html
index 57dd82946d..7cf8e52177 100644
--- a/files/pt-br/learn/server-side/first_steps/client-server_overview/index.html
+++ b/files/pt-br/learn/server-side/first_steps/client-server_overview/index.html
@@ -34,7 +34,7 @@ translation_of: Learn/Server-side/First_steps/Client-Server_overview
 
 <h2 id="Web_servers_e_HTTP_uma_introdução">Web servers e HTTP (uma introdução)</h2>
 
-<p>Navegadores Web se comunicam com <a href="https://developer.mozilla.org/en-US/docs/Learn/Common_questions/What_is_a_web_server">servidores Web</a> usando o <strong>H</strong>yper<strong>T</strong>ext<strong>T</strong>ransfer <strong>P</strong>rotocol (<a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTTP">HTTP</a>). Quando você clica em um link em uma página web, envia um formulário, ou faz uma pesquisa, o browser envia uma Requisição HTTP para o servidor.</p>
+<p>Navegadores Web se comunicam com <a href="/en-US/docs/Learn/Common_questions/What_is_a_web_server">servidores Web</a> usando o <strong>H</strong>yper<strong>T</strong>ext<strong>T</strong>ransfer <strong>P</strong>rotocol (<a href="/en-US/docs/Web/HTTP">HTTP</a>). Quando você clica em um link em uma página web, envia um formulário, ou faz uma pesquisa, o browser envia uma Requisição HTTP para o servidor.</p>
 
 <p>A requisição inclui:</p>
 
diff --git a/files/pt-br/learn/server-side/first_steps/website_security/index.html b/files/pt-br/learn/server-side/first_steps/website_security/index.html
index e32ac4fa3b..2873b597ca 100644
--- a/files/pt-br/learn/server-side/first_steps/website_security/index.html
+++ b/files/pt-br/learn/server-side/first_steps/website_security/index.html
@@ -162,7 +162,7 @@ original_slug: Learn/Server-side/First_steps/Seguranca_site
 
 <p>Este artigo explicou o conceito de segurança na web e algumas das ameaças mais comuns contra as quais o site deve tentar se proteger. Mais importante, você deve entender que uma aplicação web não pode confiar em nenhum dado do navegador. Todos os dados do usuário devem ser limpos antes de serem exibidos ou usados em consultas SQL e chamadas do sistema de arquivos.</p>
 
-<p>Com este artigo, você chegou ao final <a href="https://wiki.developer.mozilla.org/pt-BR/docs/Learn/Server-side/First_steps">deste módulo</a>, abordando seus primeiros passos na programação de sites em relação ao servidor. Esperamos que você tenha gostado de aprender esses conceitos fundamentais e agora esteja pronto para selecionar um <em>Framework web</em> e iniciar a programação.</p>
+<p>Com este artigo, você chegou ao final <a href="/pt-BR/docs/Learn/Server-side/First_steps">deste módulo</a>, abordando seus primeiros passos na programação de sites em relação ao servidor. Esperamos que você tenha gostado de aprender esses conceitos fundamentais e agora esteja pronto para selecionar um <em>Framework web</em> e iniciar a programação.</p>
 
 <p>{{PreviousMenu("Learn/Server-side/First_steps/Web_frameworks", "Learn/Server-side/First_steps")}}</p>
 
diff --git a/files/pt-br/learn/tools_and_testing/client-side_javascript_frameworks/index.html b/files/pt-br/learn/tools_and_testing/client-side_javascript_frameworks/index.html
index ba7a1cba3e..d5a2cc7b07 100644
--- a/files/pt-br/learn/tools_and_testing/client-side_javascript_frameworks/index.html
+++ b/files/pt-br/learn/tools_and_testing/client-side_javascript_frameworks/index.html
@@ -28,7 +28,7 @@ translation_of: Learn/Tools_and_testing/Client-side_JavaScript_frameworks
 
 <p class="summary">Depois disso, forneceremos alguns tutoriais que abordam os fundamentos de alguns dos principais frameworks, que fornecem contexto e familiaridade suficientes para começar a se aprofundar mais. Queremos que avance e aprenda sobre estruturas de uma maneira pragmática que não se esqueça das melhores práticas fundamentais da plataforma da web, como acessibilidade.</p>
 
-<p class="summary"><strong><a href="https://wiki.developer.mozilla.org/pr-BR/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introduction">Comece agora, com "Introdução às estruturas do lado do cliente"</a></strong></p>
+<p class="summary"><strong><a href="/pt-BR/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introduction">Comece agora, com "Introdução às estruturas do lado do cliente"</a></strong></p>
 
 <h2 id="Pré_-_requisitos">Pré - requisitos</h2>
 
@@ -52,7 +52,7 @@ translation_of: Learn/Tools_and_testing/Client-side_JavaScript_frameworks
 </div>
 
 <dl>
- <dt><a href="c">1. </a><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started">Começando com o React</a></dt>
+ <dt><a href="c">1. </a><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started">Começando com o React</a></dt>
  <dd>In this article we will say hello to React. We'll discover a little bit of detail about its background and use cases, set up a basic React toolchain on our local computer, and create and play with a simple starter app, learning a bit about how React works in the process.</dd>
  <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_todo_list_beginning">2. </a><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_todo_list_beginning">Começando com a nossa lista "to do" do React</a></dt>
  <dd>Let's say that we’ve been tasked with creating a proof-of-concept in React – an app that allows users to add, edit, and delete tasks they want to work on, and also mark tasks as complete without deleting them. This article will walk you through putting the basic <code>App</code> component structure and styling in place, ready for individual component definition and interactivity, which we'll add later.</dd>
diff --git a/files/pt-br/learn/tools_and_testing/client-side_javascript_frameworks/vue_getting_started/index.html b/files/pt-br/learn/tools_and_testing/client-side_javascript_frameworks/vue_getting_started/index.html
index 047ed8a804..f81e618a91 100644
--- a/files/pt-br/learn/tools_and_testing/client-side_javascript_frameworks/vue_getting_started/index.html
+++ b/files/pt-br/learn/tools_and_testing/client-side_javascript_frameworks/vue_getting_started/index.html
@@ -29,7 +29,7 @@ original_slug: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_ini
 
 <h2 id="Um_Vue_mais_claro"><span class="tlid-translation translation" lang="pt"><span title="">Um Vue mais claro</span></span></h2>
 
-<p>O Vue é uma estrutura JavaScript moderna que fornece recursos úteis para aprimoramento progressivo - ao contrário de muitos outros frameworks, você pode usar o Vue para aprimorar o HTML existente. Isso permite que você use o Vue como um substituto para uma biblioteca como o <a href="https://wiki.developer.mozilla.org/en-US/docs/Glossary/jQuery">JQuery</a>.</p>
+<p>O Vue é uma estrutura JavaScript moderna que fornece recursos úteis para aprimoramento progressivo - ao contrário de muitos outros frameworks, você pode usar o Vue para aprimorar o HTML existente. Isso permite que você use o Vue como um substituto para uma biblioteca como o <a href="/en-US/docs/Glossary/jQuery">JQuery</a>.</p>
 
 <p>Dito isto, você também pode usar o Vue para escrever aplicativos de página única (Single Page Applications - SPAs) inteiros. Isso permite criar marcações gerenciadas inteiramente pelo Vue, o que pode melhorar a experiência e o desempenho do desenvolvedor ao lidar com aplicativos complexos. Também permite tirar proveito das bibliotecas para roteamento do lado do cliente (client-side) e gerenciamento de estado quando necessário. Além disso, o Vue adota uma abordagem "intermediária" das ferramentas, como roteamento do lado do cliente e gerenciamento de estado. Embora a equipe mantenedora do Vue sugira bibliotecas para essas funções, elas não são agrupadas diretamente no Vue. Isso permite que você selecione bibliotecas de gerenciamento de estado/roteamento diferentes, se elas se ajustarem melhor ao seu aplicativo.</p>
 
diff --git a/files/pt-br/mozilla/add-ons/webextensions/api/tabs/index.html b/files/pt-br/mozilla/add-ons/webextensions/api/tabs/index.html
index 5aa68832a6..51cca9b9e5 100644
--- a/files/pt-br/mozilla/add-ons/webextensions/api/tabs/index.html
+++ b/files/pt-br/mozilla/add-ons/webextensions/api/tabs/index.html
@@ -23,7 +23,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/tabs
 <p>You can use most of this API without any special permission. However:</p>
 
 <ul>
- <li>To access <code>Tab.url</code>, <code>Tab.title</code>, and <code>Tab.favIconUrl</code>, you need to have the <code>"tabs"</code> <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions">permission</a>.
+ <li>To access <code>Tab.url</code>, <code>Tab.title</code>, and <code>Tab.favIconUrl</code>, you need to have the <code>"tabs"</code> <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions">permission</a>.
 
   <ul>
    <li>In Firefox, this also means you need <code>"tabs"</code> to {{WebExtAPIRef("tabs.query()")}} by URL.</li>
@@ -45,7 +45,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/tabs
  <dd>This object contains a boolean indicating whether the tab is muted, and the reason for the last state change.</dd>
  <dt>{{WebExtAPIRef("tabs.PageSettings")}}</dt>
  <dd>
- <p>Used to control how a tab is rendered as a PDF by the <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/tabs/saveAsPDF" title="Saves the current page as a PDF. This will open a dialog, supplied by the underlying operating system, asking the user where they want to save the PDF."><code>tabs.saveAsPDF()</code></a> method.</p>
+ <p>Used to control how a tab is rendered as a PDF by the <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/tabs/saveAsPDF" title="Saves the current page as a PDF. This will open a dialog, supplied by the underlying operating system, asking the user where they want to save the PDF."><code>tabs.saveAsPDF()</code></a> method.</p>
  </dd>
  <dt>{{WebExtAPIRef("tabs.Tab")}}</dt>
  <dd>This type contains information about a tab.</dd>
@@ -76,7 +76,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/tabs
  <dt>{{WebExtAPIRef("tabs.captureVisibleTab()")}}</dt>
  <dd>Creates a data URI encoding an image of the visible area of the currently active tab in the specified window.</dd>
  <dt>{{WebExtAPIRef("tabs.connect()")}}</dt>
- <dd>Sets up a messaging connection between the extension's background scripts (or other privileged scripts, such as popup scripts or options page scripts) and any <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Content_scripts">content scripts</a> running in the specified tab.</dd>
+ <dd>Sets up a messaging connection between the extension's background scripts (or other privileged scripts, such as popup scripts or options page scripts) and any <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Content_scripts">content scripts</a> running in the specified tab.</dd>
  <dt>{{WebExtAPIRef("tabs.create()")}}</dt>
  <dd>Creates a new tab.</dd>
  <dt>{{WebExtAPIRef("tabs.detectLanguage()")}}</dt>
@@ -92,9 +92,9 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/tabs
  <dt>{{WebExtAPIRef("tabs.getAllInWindow()")}} {{deprecated_inline}}</dt>
  <dd>Gets details about all tabs in the specified window.</dd>
  <dt>{{WebExtAPIRef("tabs.getCurrent()")}}</dt>
- <dd>Gets information about the tab that this script is running in, as a <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/Tabs/Tab" title="This type contains information about a tab."><code>tabs.Tab</code></a> object.</dd>
+ <dd>Gets information about the tab that this script is running in, as a <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/Tabs/Tab" title="This type contains information about a tab."><code>tabs.Tab</code></a> object.</dd>
  <dt>{{WebExtAPIRef("tabs.getSelected()")}} {{deprecated_inline}}</dt>
- <dd>Gets the tab that is selected in the specified window. <strong>Deprecated: use <a href="https://wiki.developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/tabs/query" title="Gets all tabs that have the specified properties, or all tabs if no properties are specified."><code>tabs.query({active: true})</code></a> instead.</strong></dd>
+ <dd>Gets the tab that is selected in the specified window. <strong>Deprecated: use <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/tabs/query" title="Gets all tabs that have the specified properties, or all tabs if no properties are specified."><code>tabs.query({active: true})</code></a> instead.</strong></dd>
  <dt>{{WebExtAPIRef("tabs.getZoom()")}}</dt>
  <dd>Gets the current zoom factor of the specified tab.</dd>
  <dt>{{WebExtAPIRef("tabs.getZoomSettings()")}}</dt>
diff --git a/files/pt-br/web/accessibility/aria/aria_techniques/index.html b/files/pt-br/web/accessibility/aria/aria_techniques/index.html
index 446c2132d4..f57b903f74 100644
--- a/files/pt-br/web/accessibility/aria/aria_techniques/index.html
+++ b/files/pt-br/web/accessibility/aria/aria_techniques/index.html
@@ -17,26 +17,26 @@ translation_of: Web/Accessibility/ARIA/ARIA_Techniques
 <h3 id="Funções_de_widget">Funções de widget</h3>
 
 <ul>
- <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/button_role" title="Using the button role">button</a></li>
- <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/checkbox_role" title="Using the checkbox role">checkbox</a></li>
- <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Gridcell_Role">gridcell</a></li>
- <li><a href="https://wiki.developer.mozilla.org/en/Accessibility/ARIA/ARIA_Techniques/Using_the_link_role" title="Using the Link role">link</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/button_role" title="Using the button role">button</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/checkbox_role" title="Using the checkbox role">checkbox</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Gridcell_Role">gridcell</a></li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_link_role" title="Using the Link role">link</a></li>
  <li>menuitem</li>
  <li>menuitemcheckbox </li>
  <li>menuitemradio</li>
  <li>option</li>
- <li><a href="https://wiki.developer.mozilla.org/en/Accessibility/ARIA/ARIA_Techniques/Using_the_progressbar_role" title="en/ARIA/ARIA_Techniques/Using_the_progressbar_role">progressbar</a></li>
- <li><a href="https://wiki.developer.mozilla.org/en/Accessibility/ARIA/ARIA_Techniques/Using_the_radio_role" title="en/ARIA/ARIA_Techniques/Using_the_radio_role">radio</a></li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_progressbar_role" title="en/ARIA/ARIA_Techniques/Using_the_progressbar_role">progressbar</a></li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_radio_role" title="en/ARIA/ARIA_Techniques/Using_the_radio_role">radio</a></li>
  <li>scrollbar</li>
  <li>searchbox</li>
  <li>separator (when focusable)</li>
- <li><a href="https://wiki.developer.mozilla.org/en/Accessibility/ARIA/ARIA_Techniques/Using_the_slider_role" title="en/ARIA/ARIA_Techniques/Using_the_slider_role">slider</a></li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_slider_role" title="en/ARIA/ARIA_Techniques/Using_the_slider_role">slider</a></li>
  <li>spinbutton</li>
- <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Switch_role">switch</a></li>
- <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Tab_Role">tab</a></li>
- <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Tabpanel_Role">tabpanel</a></li>
- <li><a href="https://wiki.developer.mozilla.org/en/Accessibility/ARIA/ARIA_Techniques/Using_the_textbox_role" title="en/ARIA/ARIA_Techniques/Using_the_textbox_role">textbox</a></li>
- <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Treeitem_Role">treeitem</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Switch_role">switch</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Tab_Role">tab</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Tabpanel_Role">tabpanel</a></li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_textbox_role" title="en/ARIA/ARIA_Techniques/Using_the_textbox_role">textbox</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Treeitem_Role">treeitem</a></li>
 </ul>
 
 <h3 id="Funções_compostas">Funções compostas</h3>
@@ -45,13 +45,13 @@ translation_of: Web/Accessibility/ARIA/ARIA_Techniques
 
 <ul>
  <li>combobox</li>
- <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Grid_Role">grid</a> (incluindo as funções <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Row_Role">row</a>, <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Gridcell_Role">gridcell</a>, rowheader, columnheader)</li>
- <li><a href="https://wiki.developer.mozilla.org/en/Accessibility/ARIA/ARIA_Techniques/Using_the_listbox_role" title="en/ARIA/ARIA_Techniques/Using_the_listbox_role">listbox</a> (incluindo a função option)</li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Grid_Role">grid</a> (incluindo as funções <a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Row_Role">row</a>, <a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Gridcell_Role">gridcell</a>, rowheader, columnheader)</li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_listbox_role" title="en/ARIA/ARIA_Techniques/Using_the_listbox_role">listbox</a> (incluindo a função option)</li>
  <li>menu</li>
  <li>menubar</li>
- <li><a href="https://wiki.developer.mozilla.org/en/Accessibility/ARIA/ARIA_Techniques/Using_the_radio_role" title="en/ARIA/ARIA_Techniques/Using_the_radio_role">radiogroup (veja a função radio)</a></li>
- <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Tablist_Role">tablist</a> (incluindo as funções <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Tab_Role">tab</a> and <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Tabpanel_Role">tabpanel</a>)</li>
- <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Tree_Role">tree</a></li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_radio_role" title="en/ARIA/ARIA_Techniques/Using_the_radio_role">radiogroup (veja a função radio)</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Tablist_Role">tablist</a> (incluindo as funções <a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Tab_Role">tab</a> and <a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Tabpanel_Role">tabpanel</a>)</li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Tree_Role">tree</a></li>
  <li>treegrid</li>
 </ul>
 
@@ -59,63 +59,63 @@ translation_of: Web/Accessibility/ARIA/ARIA_Techniques
 
 <ul>
  <li></li>
- <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Application_Role">application</a></li>
- <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Article_Role" title="en/Accessibility/ARIA/ARIA_Techniques/Using_the_article_role">article</a></li>
- <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Cell_Role">cell</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Application_Role">application</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Article_Role" title="en/Accessibility/ARIA/ARIA_Techniques/Using_the_article_role">article</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Cell_Role">cell</a></li>
  <li>columnheader</li>
  <li>definition</li>
  <li>directory</li>
- <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Document_Role">document</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Document_Role">document</a></li>
  <li>feed</li>
- <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Figure_Role">figure</a></li>
- <li><a href="https://wiki.developer.mozilla.org/en/Accessibility/ARIA/ARIA_Techniques/Using_the_group_role" title="en/ARIA/ARIA_Techniques/Using_the_group_role">group</a></li>
- <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/heading_role">heading</a></li>
- <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Role_Img">img</a></li>
- <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/List_role">list</a></li>
- <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Listitem_role">listitem</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Figure_Role">figure</a></li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_group_role" title="en/ARIA/ARIA_Techniques/Using_the_group_role">group</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/heading_role">heading</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Role_Img">img</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/List_role">list</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Listitem_role">listitem</a></li>
  <li>math</li>
  <li>none</li>
  <li>note</li>
- <li><a href="https://wiki.developer.mozilla.org/en/Accessibility/ARIA/ARIA_Techniques/Using_the_presentation_role" title="en/ARIA/ARIA_Techniques/Using_the_presentation_role">presentation</a></li>
- <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Row_Role">row</a></li>
- <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Rowgroup_Role">rowgroup</a></li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_presentation_role" title="en/ARIA/ARIA_Techniques/Using_the_presentation_role">presentation</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Row_Role">row</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Rowgroup_Role">rowgroup</a></li>
  <li>rowheader</li>
  <li>separator</li>
- <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Table_Role">table</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Table_Role">table</a></li>
  <li>term</li>
- <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/textbox_role">textbox</a></li>
- <li><a href="https://wiki.developer.mozilla.org/en/Accessibility/ARIA/ARIA_Techniques/Using_the_toolbar_role" title="en/ARIA/ARIA_Techniques/Using_the_toolbar_role">toolbar</a></li>
- <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Tooltip_Role">tooltip</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/textbox_role">textbox</a></li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_toolbar_role" title="en/ARIA/ARIA_Techniques/Using_the_toolbar_role">toolbar</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Tooltip_Role">tooltip</a></li>
 </ul>
 
 <h3 id="Funções_de_ponto_de_referência">Funções de ponto de referência</h3>
 
 <ul>
- <li><a href="https://wiki.developer.mozilla.org/en/Accessibility/ARIA/ARIA_Techniques/Using_the_banner_role" title="en/ARIA/ARIA_Techniques/Using_the_banner_role">banner</a></li>
- <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Complementary_role">complementary</a></li>
- <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Contentinfo_role">contentinfo</a></li>
- <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Form_Role">form</a></li>
- <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Main_role">main</a></li>
- <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Navigation_Role">navigation</a></li>
- <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Region_role">region</a></li>
- <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Search_role">search</a></li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_banner_role" title="en/ARIA/ARIA_Techniques/Using_the_banner_role">banner</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Complementary_role">complementary</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Contentinfo_role">contentinfo</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Form_Role">form</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Main_role">main</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Navigation_Role">navigation</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Region_role">region</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Search_role">search</a></li>
 </ul>
 
 <h3 id="Funções_de_regiões_ativa">Funções de regiões ativa</h3>
 
 <ul>
- <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Alert_Role">alert</a></li>
- <li><a href="https://wiki.developer.mozilla.org/en/Accessibility/ARIA/ARIA_Techniques/Using_the_log_role" title="Using the Log role">log</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Alert_Role">alert</a></li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_log_role" title="Using the Log role">log</a></li>
  <li>marquee</li>
- <li><a href="https://wiki.developer.mozilla.org/en/Accessibility/ARIA/ARIA_Techniques/Using_the_status_role" title="Using the link role">status</a></li>
- <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/ARIA_timer_role">timer</a></li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_status_role" title="Using the link role">status</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/ARIA_timer_role">timer</a></li>
 </ul>
 
 <h3 id="Funções_de_janela">Funções de janela</h3>
 
 <ul>
- <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_alertdialog_role">alertdialog</a></li>
- <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/dialog_role">dialog</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_alertdialog_role">alertdialog</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/dialog_role">dialog</a></li>
 </ul>
 
 <h2 id="Estados_e_propriedades">Estados e propriedades</h2>
@@ -131,30 +131,30 @@ translation_of: Web/Accessibility/ARIA/ARIA_Techniques
  <li>aria-expanded</li>
  <li>aria-haspopup</li>
  <li>aria-hidden</li>
- <li><a href="https://wiki.developer.mozilla.org/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-invalid_attribute" title="Using the aria-invalid attribute">aria-invalid</a></li>
- <li><a href="https://wiki.developer.mozilla.org/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute" title="Using the aria-labelledby attribute">aria-label</a></li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-invalid_attribute" title="Using the aria-invalid attribute">aria-invalid</a></li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute" title="Using the aria-labelledby attribute">aria-label</a></li>
  <li>aria-level</li>
  <li>aria-modal</li>
  <li>aria-multiline</li>
  <li>aria-multiselectable</li>
- <li><a href="https://wiki.developer.mozilla.org/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-orientation_attribute" title="en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-orientation_attribute">aria-orientation</a></li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-orientation_attribute" title="en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-orientation_attribute">aria-orientation</a></li>
  <li>aria-placeholder</li>
  <li>aria-pressed</li>
  <li>aria-readonly</li>
- <li><a href="https://wiki.developer.mozilla.org/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-required_attribute" title="Using the aria-required property">aria-required</a></li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-required_attribute" title="Using the aria-required property">aria-required</a></li>
  <li>aria-selected</li>
  <li>aria-sort</li>
- <li><a href="https://wiki.developer.mozilla.org/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuemax_attribute" title="Using the aria-required attribute">aria-valuemax</a></li>
- <li><a href="https://wiki.developer.mozilla.org/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuemin_attribute" title="en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuemin_attribute">aria-valuemin</a></li>
- <li><a href="https://wiki.developer.mozilla.org/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuenow_attribute" title="en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuenow_attribute">aria-valuenow</a></li>
- <li><a href="https://wiki.developer.mozilla.org/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuetext_attribute" title="en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuetext_attribute">aria-valuetext</a></li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuemax_attribute" title="Using the aria-required attribute">aria-valuemax</a></li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuemin_attribute" title="en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuemin_attribute">aria-valuemin</a></li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuenow_attribute" title="en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuenow_attribute">aria-valuenow</a></li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuetext_attribute" title="en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuetext_attribute">aria-valuetext</a></li>
 </ul>
 
 <h3 id="Atributos_da_região_ativa">Atributos da região ativa</h3>
 
 <ul>
  <li>aria-live</li>
- <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-relevant_attribute" title="en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-relevant_attribute">aria-relevant</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-relevant_attribute" title="en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-relevant_attribute">aria-relevant</a></li>
  <li>aria-atomic</li>
  <li>aria-busy</li>
 </ul>
@@ -169,16 +169,16 @@ translation_of: Web/Accessibility/ARIA/ARIA_Techniques
 <h3 id="Atributos_de_relacionamento">Atributos de relacionamento</h3>
 
 <ul>
- <li><a href="https://wiki.developer.mozilla.org/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-activedescendant_attribute" title="Role">aria-activedescendant</a></li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-activedescendant_attribute" title="Role">aria-activedescendant</a></li>
  <li>aria-colcount</li>
  <li>aria-colindex</li>
  <li>aria-colspan</li>
  <li>aria-controls</li>
- <li><a href="https://wiki.developer.mozilla.org/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute" title="Using the aria-labelledby attribute">aria-describedby</a></li>
- <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Annotations#Associating_annotated_elements_with_their_details">aria-details</a></li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute" title="Using the aria-labelledby attribute">aria-describedby</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Annotations#Associating_annotated_elements_with_their_details">aria-details</a></li>
  <li>aria-errormessage</li>
  <li>aria-flowto</li>
- <li><a href="https://wiki.developer.mozilla.org/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute" title="en/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute">aria-labelledby</a></li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute" title="en/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute">aria-labelledby</a></li>
  <li>aria-owns</li>
  <li>aria-posinset</li>
  <li>aria-rowcount</li>
@@ -190,5 +190,5 @@ translation_of: Web/Accessibility/ARIA/ARIA_Techniques
 <h3 id="Propriedades_específicas_do_MicrosoftEdge">Propriedades específicas do MicrosoftEdge</h3>
 
 <ul>
- <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/x-ms-aria-flowfrom">x-ms-aria-flowfrom</a> {{Non-standard_Inline}}</li>
+ <li><a href="/en-US/docs/Web/API/x-ms-aria-flowfrom">x-ms-aria-flowfrom</a> {{Non-standard_Inline}}</li>
 </ul>
diff --git a/files/pt-br/web/api/animationevent/initanimationevent/index.html b/files/pt-br/web/api/animationevent/initanimationevent/index.html
deleted file mode 100644
index 03ccaaa987..0000000000
--- a/files/pt-br/web/api/animationevent/initanimationevent/index.html
+++ /dev/null
@@ -1,134 +0,0 @@
----
-title: AnimationEvent.initAnimationEvent()
-slug: Web/API/AnimationEvent/initAnimationEvent
-tags:
-  - AnimationEvent
-  - Apps
-  - CSSOM
-  - Método(2)
-  - Não-padrão
-  - Obsolento
-  - Web Animations
-translation_of: Web/API/AnimationEvent/initAnimationEvent
----
-<p>{{obsolete_header}}{{non-standard_header}}{{ apiref("Web Animations API") }}</p>
-
-<h2 id="Sumário">Sumário</h2>
-
-<p>O <code><strong>AnimationEvent.initAnimationEvent() </strong></code>é um método iniciado com o evento da animção criando um depreciativo {{domxref("Document.createEvent()", "Document.createEvent(\"AnimationEvent\")")}} método.</p>
-
-<p><code>AnimationEvent</code> criado desse modo não é confiável.</p>
-
-<div class="note">
-<p><strong>Note:</strong> Durante o processo de padronização, esse método foi removido das especificações. É que ele foi depreciado e esse processo foi removido da maioria das implementações . <strong>Não use este método</strong>; ao invés, use o construtor padrão, {{domxref("AnimationEvent.AnimationEvent", "AnimationEvent()")}}, para criar um sintético {{domxref("AnimationEvent")}}.</p>
-</div>
-
-<h2 id="Syntax">Syntax</h2>
-
-<pre class="syntaxbox"><em>animationEvent</em>.initAnimationEvent(<em>typeArg</em>, <em>canBubbleArg</em>, <em>cancelableArg</em>, <em>animationNameArg</em>, <em>elapsedTimeArg</em>);</pre>
-
-<h3 id="Parâmetros">Parâmetros</h3>
-
-<dl>
- <dt><code>typeArg</code></dt>
- <dd>Um {{domxref("DOMString")}} identificado com um tipo específico de evento animação que ocorreu. Os seguintes valores são aceitados:
- <table class="standard-table">
-  <thead>
-   <tr>
-    <th scope="col">Valor</th>
-    <th scope="col">Significado</th>
-   </tr>
-  </thead>
-  <tbody>
-   <tr>
-    <td><code>animationstart</code></td>
-    <td>A animação começou.</td>
-   </tr>
-   <tr>
-    <td><code>animationend</code></td>
-    <td>A animação terminou.</td>
-   </tr>
-   <tr>
-    <td><code>animationiteration</code></td>
-    <td>A iteração corrente se completou.</td>
-   </tr>
-  </tbody>
- </table>
- </dd>
- <dt><code>canBubbleArg</code></dt>
- <dd>Uma {{domxref("Boolean")}} bandeira indicando se o evento pode ser bolha (<code>true</code>) ou não (<code>false)</code>.</dd>
- <dt><code>cancelableArg</code></dt>
- <dd>Uma {{domxref("Boolean")}} bandeira indicando se o evento associado pode ser evitado (<code>true</code>) ou não (<code>false)</code>.</dd>
- <dt><code>animationNameArg</code></dt>
- <dd>Um {{domxref("DOMString")}} contendo o valor do{{cssxref("animation-name")}} propriedade CSS associada com a transição.</dd>
- <dt><code>elapsedTimeArg</code></dt>
- <dd>Um ponto flutuante indicando a quantidade de tempo que a animação esteve rodando, em segundos, com o tempo do evento terminar, excluirá-se o tempo em que a animação esteve em pausa.Para um <code>"animationstart"</code> evento, <code>elapsedTime</code> é <code>0.0</code> a não ser que haja um valor negativo para <code><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/animation-delay" title="The animation-delay CSS property specifies when the animation should start. This lets the animation sequence begin some time after it's applied to an element.">animation-delay</a></code>, nesse caso o evento irá terminar com <code>elapsedTime</code> contendo <code>(-1 * </code><em>delay</em><code>)</code>.</dd>
-</dl>
-
-<h2 id="Especificações">Especificações</h2>
-
-<p><em>Esse método é não-padrão e não é parte de qualquer especificação, no entanto ele esteve presente nos primeiros rascunhos de {{SpecName("CSS3 Animations")}}.</em></p>
-
-<h2 id="Browser_compatibility">Compatibilidade com navegadores</h2>
-
-<p>{{ CompatibilityTable }}</p>
-
-<div id="compat-desktop">
-<table class="compat-table">
- <tbody>
-  <tr>
-   <th>Característica</th>
-   <th>Chrome</th>
-   <th>Firefox (Gecko)</th>
-   <th>Internet Explorer</th>
-   <th>Opera</th>
-   <th>Safari</th>
-  </tr>
-  <tr>
-   <td>Basic support</td>
-   <td>{{CompatVersionUnknown}}</td>
-   <td>{{ CompatGeckoDesktop("6.0") }}<br>
-    Removed in {{ CompatGeckoDesktop("23.0") }}</td>
-   <td>10.0</td>
-   <td>{{CompatVersionUnknown}}</td>
-   <td>{{CompatVersionUnknown}}</td>
-  </tr>
- </tbody>
-</table>
-
-<p> </p>
-
-<p> </p>
-</div>
-
-<div id="compat-mobile">
-<table class="compat-table">
- <tbody>
-  <tr>
-   <th>Característica</th>
-   <th>Android</th>
-   <th>Firefox Mobile (Gecko)</th>
-   <th>IE Mobile</th>
-   <th>Opera Mobile</th>
-   <th>Safari Mobile</th>
-  </tr>
-  <tr>
-   <td>Basic support</td>
-   <td>{{CompatVersionUnknown}}</td>
-   <td>{{ CompatGeckoMobile("6.0") }}<br>
-    Removed in {{ CompatGeckoMobile("23.0") }}</td>
-   <td>10.0</td>
-   <td>{{CompatVersionUnknown}}</td>
-   <td>{{CompatVersionUnknown}}</td>
-  </tr>
- </tbody>
-</table>
-</div>
-
-<h2 id="See_also">See also</h2>
-
-<ul>
- <li><a href="https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_animations">Using CSS animations</a></li>
- <li>Animation-related CSS properties and at-rules: {{cssxref("animation")}}, {{cssxref("animation-delay")}}, {{cssxref("animation-direction")}}, {{cssxref("animation-duration")}}, {{cssxref("animation-fill-mode")}}, {{cssxref("animation-iteration-count")}}, {{cssxref("animation-name")}}, {{cssxref("animation-play-state")}}, {{cssxref("animation-timing-function")}}, {{cssxref("@keyframes")}}.</li>
- <li>The {{domxref("AnimationEvent")}} interface it belongs to.</li>
-</ul>
diff --git a/files/pt-br/web/api/atob/index.html b/files/pt-br/web/api/atob/index.html
new file mode 100644
index 0000000000..694f3ed6a7
--- /dev/null
+++ b/files/pt-br/web/api/atob/index.html
@@ -0,0 +1,73 @@
+---
+title: WindowBase64.atob()
+slug: Web/API/atob
+tags:
+  - API
+  - Referencia
+  - WindowBase64
+  - metodo
+translation_of: Web/API/WindowOrWorkerGlobalScope/atob
+original_slug: Web/API/WindowOrWorkerGlobalScope/atob
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p>A função <strong><code>WindowBase64.atob()</code></strong> decodifica uma string de dados que foi codificada através da codificação base-64. Você pode usar o método {{domxref("WindowBase64.btoa","window.btoa()")}} para codificar e transmitir dados que, se não codificados, podem causar problemas de comunicação. Após transmití-los pode-se usar o método <code>window.atob()</code> para decodificar os dados novamente. Por exemplo, você pode codificar, transmitir,  e decodificar caracteres de controle como valores ASCII de 0 a 31.</p>
+
+<p>Para utilizar com strings Unicode ou UTF-8, veja <a href="/en-US/docs/Web/JavaScript/Base64_encoding_and_decoding#The_.22Unicode_Problem.22">esta nota em <em>Base64 encoding and decoding</em></a> e <a href="/en-US/docs/Web/API/window.btoa#Unicode_Strings">essa nota em <code>window.btoa()</code></a>.</p>
+
+<h2 id="Sintaxe">Sintaxe</h2>
+
+<pre class="syntaxbox">var dadoDecodificado = window.atob(<em>dadoCodificado</em>);</pre>
+
+<h2 id="Exemplo">Exemplo</h2>
+
+<pre class="brush:js">var <em>dadoCodificado </em>= window.btoa("Olá, mundo"); // codifica a string
+var dadoDecodificado = window.atob(<em>dadoCodificado</em>); // decodifica a string</pre>
+
+<h2 id="Especificações">Especificações</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comentário</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#dom-windowbase64-atob', 'WindowBase64.atob()')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Nenhuma mudança desde a última versão, {{SpecName("HTML5.1")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', '#dom-windowbase64-atob', 'WindowBase64.atob()')}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>Versão de {{SpecName("HTML WHATWG")}}. Nenhuma mudança.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5 W3C", "#dom-windowbase64-atob", "WindowBase64.atob()")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Versão de {{SpecName("HTML WHATWG")}}. Criação do <code>WindowBase64</code> (antes as propriedades ficavam no target).</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Compatibilidade com navegadores</h2>
+
+<div>{{Compat("api.WindowOrWorkerGlobalScope.atob")}}</div>
+
+<div id="compat-mobile"></div>
+
+<p>[1] <code>atob()</code> também está disponível para os componentes do XPCOM implementado em JavaScript, porém o objeto <code><a href="/en-US/docs/Web/API/Window">window</a></code> não é global nos componentes.</p>
+
+<p>[2] A partir do <a href="/en-US/Firefox/Releases/27/Site_Compatibility">Firefox 27</a>, <code>atob()</code> ignora todos os caracteres de espaço no argumento para seguir as últimas especificações do HTML5. ({{bug(711180)}})</p>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li><a href="/Web/API/WindowBase64/Base64_encoding_and_decoding">Base64 encoding and decoding</a></li>
+ <li><a href="/en-US/docs/data_URIs"><code>data</code> URIs</a></li>
+ <li>{{domxref("WindowBase64.btoa","window.btoa()")}}</li>
+ <li><a href="/en-US/docs/Components.utils.importGlobalProperties">Components.utils.importGlobalProperties</a></li>
+</ul>
diff --git a/files/pt-br/web/api/canvas_api/index.html b/files/pt-br/web/api/canvas_api/index.html
index 46e4a4d406..b44b04e793 100644
--- a/files/pt-br/web/api/canvas_api/index.html
+++ b/files/pt-br/web/api/canvas_api/index.html
@@ -10,9 +10,9 @@ original_slug: Web/HTML/Canvas
 ---
 <p>{{CanvasSidebar}}</p>
 
-<p class="summary">A <strong>Canvas API</strong> provê maneiras de desenhar gráficos via <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/JavaScript">JavaScript</a> e via elemento <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML">HTML</a> {{HtmlElement("canvas")}}. Entre outras coisas, ele pode ser utilizado para animação, gráficos de jogos, visualização de dados, manipulação de fotos e processamento de vídeo em tempo real.</p>
+<p class="summary">A <strong>Canvas API</strong> provê maneiras de desenhar gráficos via <a href="/en-US/docs/Web/JavaScript">JavaScript</a> e via elemento <a href="/en-US/docs/Web/HTML">HTML</a> {{HtmlElement("canvas")}}. Entre outras coisas, ele pode ser utilizado para animação, gráficos de jogos, visualização de dados, manipulação de fotos e processamento de vídeo em tempo real.</p>
 
-<p class="summary">A Canvas API foca amplamente em gráficos 2D. A <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/WebGL">WebGL API</a>, que também usa o elemento <code>&lt;canvas&gt;</code>, desenha gráficos 2D e 3D acelerados por hardware.</p>
+<p class="summary">A Canvas API foca amplamente em gráficos 2D. A <a href="/en-US/docs/Web/WebGL">WebGL API</a>, que também usa o elemento <code>&lt;canvas&gt;</code>, desenha gráficos 2D e 3D acelerados por hardware.</p>
 
 <h2 id="Exemplo_básico">Exemplo básico</h2>
 
@@ -58,7 +58,7 @@ ctx.fillRect(10, 10, 150, 100);
 </ul>
 
 <div class="blockIndicator note">
-<p><strong>Nota:</strong> As interfaces relacionadas ao <code>WebGLRenderingContext</code> são referenciadas sob <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/WebGL" title="/en-US/docs/Web/WebGL">WebGL</a>.</p>
+<p><strong>Nota:</strong> As interfaces relacionadas ao <code>WebGLRenderingContext</code> são referenciadas sob <a href="/en-US/docs/Web/WebGL" title="/en-US/docs/Web/WebGL">WebGL</a>.</p>
 </div>
 
 <p>{{domxref("CanvasCaptureMediaStream")}} é uma interface relacionada.</p>
@@ -67,15 +67,15 @@ ctx.fillRect(10, 10, 150, 100);
 
 <dl>
  <dt></dt>
- <dt><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial">Tutorial Canvas</a></dt>
+ <dt><a href="/en-US/docs/Web/API/Canvas_API/Tutorial">Tutorial Canvas</a></dt>
  <dd>Um tutorial compreensivo abordando o uso básico da API de Canvas e suas funcionalidades avançadas.</dd>
  <dt><a href="http://joshondesign.com/p/books/canvasdeepdive/title.html">Mergulhando no Canvas HTML5</a></dt>
  <dd>Uma introdução prática e extensa à API Canvas e WebGL.</dd>
  <dt><a href="http://bucephalus.org/text/CanvasHandbook/CanvasHandbook.html">Guia Canvas</a></dt>
  <dd>Uma referência acessível para a API Canvas.</dd>
- <dt><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Canvas_API/A_basic_ray-caster">Demonstração: Um <em>ray-caster</em> básico</a> </dt>
+ <dt><a href="/en-US/docs/Web/API/Canvas_API/A_basic_ray-caster">Demonstração: Um <em>ray-caster</em> básico</a> </dt>
  <dd>Uma demonstração de animação <em>ray-tracing</em> usando canvas.</dd>
- <dt><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Manipulating_video_using_canvas">Manipulando vídeos usando canvas</a></dt>
+ <dt><a href="/en-US/docs/Web/API/Canvas_API/Manipulating_video_using_canvas">Manipulando vídeos usando canvas</a></dt>
  <dd>Combinando {{HTMLElement("video")}} e {{HTMLElement("canvas")}} para manipular dados de vídeo em tempo real.</dd>
 </dl>
 
@@ -100,7 +100,7 @@ ctx.fillRect(10, 10, 150, 100);
 </ul>
 
 <div class="blockIndicator note">
-<p><strong>Nota:</strong> Veja a <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/WebGL" title="/en-US/docs/Web/WebGL">WebGL API</a> para bibliotecas 2D e 3D que usam WebGL.</p>
+<p><strong>Nota:</strong> Veja a <a href="/en-US/docs/Web/WebGL" title="/en-US/docs/Web/WebGL">WebGL API</a> para bibliotecas 2D e 3D que usam WebGL.</p>
 </div>
 
 <h2 id="Especificações">Especificações</h2>
@@ -126,10 +126,10 @@ ctx.fillRect(10, 10, 150, 100);
 
 <h2 id="Browser_compatibility">Compatibilidade com navegadores</h2>
 
-<p>Aplicações Mozilla ganharam suporte para <code>&lt;canvas&gt;</code> a partir do Gecko 1.8 (<a href="https://wiki.developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/1.5">Firefox 1.5</a>). O elemento foi originalmente introduzido pela Apple para o Dashboard OS X e Safari. O Internet Explorer suporta <code>&lt;canvas&gt;</code> quando inclui-se um script do projeto Explorer Canvas, da google. Google Chrome e Opera 9 também suportam <code>&lt;canvas&gt;</code>.</p>
+<p>Aplicações Mozilla ganharam suporte para <code>&lt;canvas&gt;</code> a partir do Gecko 1.8 (<a href="/en-US/docs/Mozilla/Firefox/Releases/1.5">Firefox 1.5</a>). O elemento foi originalmente introduzido pela Apple para o Dashboard OS X e Safari. O Internet Explorer suporta <code>&lt;canvas&gt;</code> quando inclui-se um script do projeto Explorer Canvas, da google. Google Chrome e Opera 9 também suportam <code>&lt;canvas&gt;</code>.</p>
 
 <h2 id="Ver_também">Ver também</h2>
 
 <ul>
- <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/WebGL">WebGL</a></li>
+ <li><a href="/en-US/docs/Web/WebGL">WebGL</a></li>
 </ul>
diff --git a/files/pt-br/web/api/cleartimeout/index.html b/files/pt-br/web/api/cleartimeout/index.html
new file mode 100644
index 0000000000..e2dd7650b4
--- /dev/null
+++ b/files/pt-br/web/api/cleartimeout/index.html
@@ -0,0 +1,101 @@
+---
+title: WindowTimers.clearTimeout()
+slug: Web/API/clearTimeout
+tags:
+  - API
+  - Method
+  - Window
+translation_of: Web/API/WindowOrWorkerGlobalScope/clearTimeout
+original_slug: Web/API/WindowOrWorkerGlobalScope/clearTimeout
+---
+<div>
+<div>
+<div>{{APIRef("HTML DOM")}}</div>
+</div>
+</div>
+
+<h2 id="Summary" name="Summary">Sumário</h2>
+
+<p>O método <strong><code>clearTimeout()</code></strong> do escopo<em> </em>{{domxref("WindowOrWorkerGlobalScope")}} cancela um <em>timeout</em> previamente estabelecido pela função {{domxref("WindowOrWorkerGlobalScope.setTimeout", "setTimeout()")}}.</p>
+
+<h2 id="Syntax" name="Syntax">Síntaxe</h2>
+
+<pre class="syntaxbox"><em>escopo</em>.clearTimeout(<em>timeoutID</em>)
+</pre>
+
+<h3 id="Parâmetros">Parâmetros</h3>
+
+<dl>
+ <dt><code>timeoutID</code></dt>
+ <dd>O ID do <em>timeout</em> que você deseja cancelar. Esse ID é o retorno da função <code>setTimeout()</code>.</dd>
+</dl>
+
+<p>É interessante ressaltar que os conjuntso de <em>ID</em>s usados pelos métodos {{domxref("WindowOrWorkerGlobalScope.setTimeout", "setTimeout()")}} e {{domxref("WindowOrWorkerGlobalScope.setInterval", "setInterval()")}} são compartilhados, o que significa que <code>clearTimeout()</code> e {{domxref("WindowOrWorkerGlobalScope.clearInterval", "clearInterval()")}} podem ser tecnicamente utilizados de forma intercambiável. No entanto, para obter-se maior clareza, isso deve ser evitado.</p>
+
+<h2 id="Example" name="Example">Exemplo</h2>
+
+<p>Execute o script abaixo em uma página web e clique na página uma vez. Você verá uma mensagem aparecer um segundo depois. Se você continuar clicando na página várias vezes nesse intervalo de tempo, a mensagem aparecerá uma única vez.</p>
+
+<pre class="brush: js" dir="rtl">var alarme = {
+  relembrar: function(aMessage) {
+    alert(aMessage);
+    delete this.timeoutID;
+  },
+
+  setup: function() {
+    if (typeof this.timeoutID === 'number') {
+        this.cancelar();
+    }
+
+    this.timeoutID = window.setTimeout(function(msg) {
+        this.relembrar(msg);
+    }.bind(this), 1000, 'Wake up!');
+  },
+
+  cancelar: function() {
+    window.clearTimeout(this.timeoutID);
+  }
+};
+window.onclick = function() { alarme.setup() };</pre>
+
+<h2 id="Notes" name="Notes">Notas</h2>
+
+<p>Passar um <em>ID</em> inválido para <code>clearTimeout</code> não causa nenhum efeito (não lança nenhuma exceção).</p>
+
+<h2 id="Specification" name="Specification">Especificações</h2>
+
+<table class="standard-table" style="height: 166px; width: 1207px;">
+ <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', 'webappapis.html#dom-cleartimeout', 'WindowOrWorkerGlobalScope.clearTimeout()')}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td>Método movido para <code>WindowOrWorkerGlobalScope</code> .</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'webappapis.html#dom-cleartimeout', 'clearTimeout()')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="See_also" name="See_also">Compatibilidade</h2>
+
+
+
+<p>{{Compat("api.WindowOrWorkerGlobalScope.clearTimeout")}}</p>
+
+<h2 id="See_also" name="See_also">Veja também</h2>
+
+<ul>
+ <li>{{domxref("WindowOrWorkerGlobalScope.setTimeout()")}}</li>
+ <li>{{domxref("WindowOrWorkerGlobalScope.setInterval()")}}</li>
+ <li>{{domxref("WindowOrWorkerGlobalScope.clearInterval()")}}</li>
+ <li>{{domxref("Window.requestAnimationFrame()")}}</li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/JavaScript/Timers/Daemons" title="JavaScript/Timers/Daemons"><em>Daemons</em> management</a></li>
+</ul>
diff --git a/files/pt-br/web/api/fetch/index.html b/files/pt-br/web/api/fetch/index.html
new file mode 100644
index 0000000000..f864600c86
--- /dev/null
+++ b/files/pt-br/web/api/fetch/index.html
@@ -0,0 +1,306 @@
+---
+title: WindowOrWorkerGlobalScope.fetch()
+slug: Web/API/fetch
+translation_of: Web/API/WindowOrWorkerGlobalScope/fetch
+original_slug: Web/API/WindowOrWorkerGlobalScope/fetch
+---
+<div>{{APIRef("Fetch API")}}</div>
+
+<p>O método <code><strong>fetch()</strong></code> do mixin {{domxref("WindowOrWorkerGlobalScope")}} inicia um processo de busca de um recurso da rede. Este, retorna uma promessa que resolve o objeto {{domxref("Response")}} que representa a resposta a sua requisição. </p>
+
+<p><code>WorkerOrGlobalScope</code> é implementado por {{domxref("Window")}} e {{domxref("WorkerGlobalScope")}}, o que significa que o método <code>fetch()</code> está disponível em praticamente qualquer contexto em que você possa querer obter recursos.</p>
+
+<p>Uma promessa {{domxref("WindowOrWorkerGlobalScope.fetch","fetch()")}} rejeita com um {{jsxref("TypeError")}} quando um erro de rede é encontrado, embora isso geralmente signifique um problema de permissões ou similar. Uma verificação precisa de um <code>fetch()</code> bem-sucedido incluiria a verificação de uma promessa resolvida, e depois verificando se a propriedade {{domxref("Response.ok")}} possui valor <code>true</code>. Um status HTTP 404 não constitui um erro de rede.</p>
+
+<p>O método <code>fetch()</code> é controlado pela diretiva <code>connect-src</code> da <a href="/en-US/docs/Security/CSP/CSP_policy_directives">Content Security Policy</a> em vez da diretiva dos recursos que está recuperando.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Os parâmetros do método <code>fetch()</code> são idênticos aos do construtor {{domxref("Request.Request","Request()")}}.</p>
+</div>
+
+<h2 id="Sintaxe">Sintaxe</h2>
+
+<pre class="syntaxbox">Promise&lt;Response&gt; fetch(input[, init]);</pre>
+
+<h3 id="Parâmetros">Parâmetros</h3>
+
+<dl>
+ <dt><em>input</em></dt>
+ <dd>Isto define o recurso que você deseja buscar. Isto pode ser:
+ <ul>
+  <li>Um {{domxref("USVString")}} contendo uma URL direta para o recurso que você quer obter. Alguns navegadores aceitam <code>blob:</code> e <code>data:</code> como esquemas.</li>
+  <li>Um objeto {{domxref("Request")}}.</li>
+ </ul>
+ </dd>
+ <dt><em>init</em> {{optional_inline}}</dt>
+ <dd>Um objeto opcional que contém configurações personalizadas que você pode aplicar à requisição. As opções possíveis são:
+ <ul>
+  <li><code>method</code>: Método HTTP, por exemplo, <code>GET</code>, <code>POST</code>.</li>
+  <li><code>headers</code>: Qualquer cabeçalho que você queira adicionar à sua requisição, contido dentro de um objeto {{domxref("Headers")}} ou um objeto literal com valores {{domxref("ByteString")}}.</li>
+  <li><code>body</code>: Qualquer corpo que você queira adicionar à sua requisição: podendo ser um {{domxref("Blob")}}, {{domxref("BufferSource")}}, {{domxref("FormData")}}, {{domxref("URLSearchParams")}}, ou um objeto {{domxref("USVString")}}. Note que uma requisição usando os métodos <code>GET</code> ou <code>HEAD</code> não pode ter um corpo.</li>
+  <li><code>mode</code>: O modo que deseja usar para a requisição, por exemplo, <code>cors</code>, <code>no-cors</code>, ou <code>same-origin.</code></li>
+  <li><code>credentials</code>: A credencial que deseja usar para a requisição: <code>omit</code>, <code>same-origin</code>, ou <code>include</code>. Para enviar automaticamente cookies para o domínio atual, esta opção deve ser fornecida. Começando com o Chrome 50, essa propriedade também usa uma instância {{domxref("FederatedCredential")}} ou uma instância {{domxref("PasswordCredential")}}.</li>
+  <li><code>cache</code>: O modo de cache que deseja usar na requisição: <code>default</code>, <code>no-store</code>, <code>reload</code>, <code>no-cache</code>, <code>force-cache</code>, ou <code>only-if-cached</code>.</li>
+  <li><code>redirect</code>: O modo de redirecionamento pode usar: <code>follow</code> (segue automaticamente o redirecionamento), <code>error</code> (aborta com um erro se ocorrer um redirecionamento), ou <code>manual</code> (manipula redirecionamentos manualmente). No Chrome o padrão foi <code>follow</code> antes do Chrome 47 e <code>manual</code> a partir do Chrome 47.</li>
+  <li><code>referrer</code>: Um {{domxref("USVString")}} especificando <code>no-referrer</code>, <code>client</code>, ou uma URL. O padrão é <code>client</code>.</li>
+  <li><code>referrerPolicy</code>: Especifica o valor do cabeçalho HTTP referer. Pode ser um destes: <code>no-referrer</code>, <code>no-referrer-when-downgrade</code>, <code>origin</code>, <code>origin-when-cross-origin</code>, <code>unsafe-url</code>.</li>
+  <li><code>integrity</code>: Contém o valor de <a href="/en-US/docs/Web/Security/Subresource_Integrity">integridade de subrecurso</a> da requisição (por exemplo, <code>sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE=</code>).</li>
+  <li><code>signal</code>: Uma instância do objeto {{domxref("FetchSignal")}}; permite que você se comunique com um pedido de busca e controle-o através de um {{domxref("FetchController")}}. {{non-standard_inline}}</li>
+  <li><code>observe</code>: Um objeto {{domxref("ObserverCallback")}} — o objetivo exclusivo deste objeto é fornecer uma função de retorno de chamada que é executada quando a solicitação fetch é executada. Isto retorna um objeto {{domxref("FetchObserver")}} que pode ser usado para recuperar informações sobre o status de uma solicitação fetch. {{non-standard_inline}}</li>
+ </ul>
+ </dd>
+</dl>
+
+<h3 id="Valor_de_Retorno">Valor de Retorno</h3>
+
+<p>Uma {{domxref("Promise")}} que resolve um objeto {{domxref("Response")}}.</p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col"><strong>Tipo</strong></th>
+   <th scope="col"><strong>Descrição</strong></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>TypeError</code></td>
+   <td>Desdo o <a href="/en-US/docs/Mozilla/Firefox/Releases/43">Firefox 43</a>, <code>fetch()</code><br>
+    lançará um <code>TypeError</code> se a URL tiver credenciais, como <code>http://user:password@example.com</code>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Example">Example</h2>
+
+<p>In our <a href="https://github.com/mdn/fetch-examples/tree/gh-pages/fetch-request">Fetch Request example</a> (see <a href="https://mdn.github.io/fetch-examples/fetch-request/">Fetch Request live</a>) we create a new {{domxref("Request")}} object using the relevant constructor, then fetch it using a <code>fetch()</code> call. Since we are fetching an image, we run {{domxref("Body.blob()")}} on the response to give it the proper MIME type so it will be handled properly, then create an Object URL of it and display it in an {{htmlelement("img")}} element.</p>
+
+<pre class="brush: js">var myImage = document.querySelector('img');
+
+var myRequest = new Request('flowers.jpg');
+
+fetch(myRequest).then(function(response) {
+  return response.blob();
+}).then(function(response) {
+  var objectURL = URL.createObjectURL(response);
+  myImage.src = objectURL;
+});</pre>
+
+<p>In our <a href="https://github.com/mdn/fetch-examples/blob/master/fetch-with-init-then-request/index.html">Fetch with init then Request example</a> (see <a href="https://mdn.github.io/fetch-examples/fetch-with-init-then-request/">Fetch Request init live</a>) we do the same thing except that we pass in an init object when we invoke <code>fetch()</code>:</p>
+
+<pre class="brush: js">var myImage = document.querySelector('img');
+
+var myHeaders = new Headers();
+myHeaders.append('Content-Type', 'image/jpeg');
+
+var myInit = { method: 'GET',
+               headers: myHeaders,
+               mode: 'cors',
+               cache: 'default' };
+
+var myRequest = new Request('flowers.jpg');
+
+fetch(myRequest,myInit).then(function(response) {
+  ...
+});</pre>
+
+<p>Note that you could also pass the init object in with the <code>Request</code> constructor to get the same effect, e.g.:</p>
+
+<pre class="brush: js">var myRequest = new Request('flowers.jpg', myInit);</pre>
+
+<p>You can also use an object literal as <code>headers</code> in <code>init</code>.</p>
+
+<pre class="brush: js">var myInit = { method: 'GET',
+               headers: {
+                   'Content-Type': 'image/jpeg'
+               },
+               mode: 'cors',
+               cache: 'default' };
+
+var myRequest = new Request('flowers.jpg', myInit);
+</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Fetch','#fetch-method','fetch()')}}</td>
+   <td>{{Spec2('Fetch')}}</td>
+   <td>Defined in a <code>WindowOrWorkerGlobalScope</code> partial in the newest spec.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Fetch','#dom-global-fetch','fetch()')}}</td>
+   <td>{{Spec2('Fetch')}}</td>
+   <td>Initial definition</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Credential Management')}}</td>
+   <td>{{Spec2('Credential Management')}}</td>
+   <td>Adds {{domxref("FederatedCredential")}} or {{domxref("PasswordCredential")}} instance as a possible value for <code>init.credentials</code>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Compatibilidade com navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(42)}}</td>
+   <td>14</td>
+   <td>{{CompatGeckoDesktop(34)}}<sup>[1]</sup><br>
+    {{CompatGeckoDesktop(39)}}<br>
+    {{CompatGeckoDesktop(52)}}<sup>[2]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>29<br>
+    28<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>Streaming response body</td>
+   <td>{{CompatChrome(43)}}</td>
+   <td>14</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Support for <code>blob:</code> and <code>data:</code></td>
+   <td>{{CompatChrome(48)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>referrerPolicy</code></td>
+   <td>{{CompatChrome(52)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>39</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>signal</code> and <code>observer</code></td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}<sup>[3]</sup></td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(42)}}</td>
+   <td>14</td>
+   <td>{{CompatGeckoMobile(52)}}<sup>[2]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(42)}}</td>
+  </tr>
+  <tr>
+   <td>Streaming response body</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(43)}}</td>
+   <td>14</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(43)}}</td>
+  </tr>
+  <tr>
+   <td>Support for <code>blob:</code> and <code>data:</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(43)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(43)}}</td>
+  </tr>
+  <tr>
+   <td><code>referrerPolicy</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(52)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>39</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(52)}}</td>
+  </tr>
+  <tr>
+   <td><code>signal</code> and <code>observer</code></td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}<sup>[3]</sup></td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] API is implemented behind a preference.</p>
+
+<p>[2] <code>fetch()</code> now defined on {{domxref("WindowOrWorkerGlobalScope")}} mixin.</p>
+
+<p>[3] Hidden behind a preference in 55+ Nightly. In about:config, you need to create two new boolean prefs — <code>dom.fetchObserver.enabled</code> and <code>dom.fetchController.enabled</code> — and set the values of both to <code>true</code>.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Fetch_API">Fetch API</a></li>
+ <li><a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/Access_control_CORS">HTTP access control (CORS)</a></li>
+ <li><a href="/en-US/docs/Web/HTTP">HTTP</a></li>
+</ul>
diff --git a/files/pt-br/web/api/setinterval/index.html b/files/pt-br/web/api/setinterval/index.html
new file mode 100644
index 0000000000..213cc50492
--- /dev/null
+++ b/files/pt-br/web/api/setinterval/index.html
@@ -0,0 +1,630 @@
+---
+title: WindowOrWorkerGlobalScope.setInterval()
+slug: Web/API/setInterval
+translation_of: Web/API/WindowOrWorkerGlobalScope/setInterval
+original_slug: Web/API/WindowOrWorkerGlobalScope/setInterval
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<div> </div>
+
+<p>O método <strong><code>setInterval() </code></strong>oferecido das interfaces {{domxref("Window")}} e {{domxref("Worker")}}, repetem chamadas de funções or executam trechos de código, com um tempo de espera fixo entre cada chamada. Isso retorna um ID único para o intervalo, podendo remove-lo mais tarde apenas o chamando {{domxref("WindowOrWorkerGlobalScope.clearInterval", "clearInterval()")}}. Este metodo é definido pelo mixin {{domxref("WindowOrWorkerGlobalScope")}}.</p>
+
+<h2 id="Sintaxe.">Sintaxe.</h2>
+
+<pre class="syntaxbox"><em>var intervalID</em> = scope.setInterval(<em>func</em>, <em>delay</em>[, <em>param1</em>, <em>param2</em>, ...]);
+<em>var intervalID</em> = scope.setInterval(<em>code</em>, <em>delay</em>);
+</pre>
+
+<h3 id="Parâmetros">Parâmetros</h3>
+
+<dl>
+ <dt><code>func</code></dt>
+ <dd>Uma {{jsxref("function")}} para ser executada a cada <code>delay</code> em milisegundos.  Não é passado nenhum parâmetro para a função, e não retorna nenhum valor esperado.</dd>
+ <dt><code>code</code></dt>
+ <dd>Uma sintaxe opcional permite você incuir uma string ao invés de uma função, no qual é compilado e executada a cada <code>delay</code> em milisegundos. Esta sintaxe <em>não é recomendada </em>pelos mesmos motivos que envolvem riscos de segurança de {{jsxref("eval", "eval()")}}.</dd>
+ <dt><code>delay</code></dt>
+ <dd>O tempo, em milisegundos (milésimos de segundo), o temporizador deve atrasar entre cada execução de uma especifica função ou código. Se esse parâmetro for menos que 10, um valor de 10 é usado. Note que o atraso pode vir a ser mais longo; veja {{SectionOnPage("/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout", "Reasons for delays longer than specified")}} para exemplos.</dd>
+ <dt><code>param1, ..., paramN</code> {{optional_inline}}</dt>
+ <dd>Parâmetros adicionais que são passados através da função especificada pela <em>func</em> quando o temporizador expirar.</dd>
+</dl>
+
+<div class="note">
+<p><strong>Note</strong>: Passing additional parameters to <code>setInterval()</code> in the first syntax does not work in Internet Explorer 9 and earlier. If you want to enable this functionality on that browser, you must use a polyfill (see the <a href="#Callback_arguments">Callback arguments</a> section).</p>
+</div>
+
+<h3 id="Return_value">Return value</h3>
+
+<p>O <code>intervalID</code> retornado é um número, non-zero valor que identifica o temporizador criado pela chamada do <code>setInterval()</code>; este valor pode ser passado para {{domxref("WindowOrWorkerGlobalScope.clearInterval()")}} afim de cancelar o timeout.</p>
+
+<p>Isso pode ser útil, estar ciente que o <code>setInterval()</code> e {{domxref("WindowOrWorkerGlobalScope.setTimeout", "setTimeout()")}} compartilham o mesmo grupo de IDs, e que o <code>clearInterval()</code> e {{domxref("WindowOrWorkerGlobalScope.clearTimeout", "clearTimeout()")}} podem tecnicamente serem usados em conjunto. Para deixar claro, contudo, você deve sempre tentar evitar combina-los, afim de evitar confusão na manutenção do seu código.</p>
+
+<div class="note"><strong>Note</strong>: The <code>delay</code> parameter is converted to a signed 32-bit integer. This effectively limits <code>delay</code> to 2147483647 ms, since it's specified as a signed integer in the IDL.</div>
+
+<h2 id="Exemplos">Exemplos</h2>
+
+<h3 id="Exemplo_1_Sintaxe_básica">Exemplo 1: Sintaxe básica</h3>
+
+<p>O seguinte exemplo mostra a sintaxe básica do <code>setInterval()</code></p>
+
+<pre class="brush:js">var intervalID = window.setInterval(myCallback, 500);
+
+function myCallback() {
+  // Your code here
+}
+</pre>
+
+<h3 id="Exemplo_2_Alternando_duas_cores">Exemplo 2: Alternando duas cores</h3>
+
+<p>O seguinte exemplo chama a função <code>flashtext()</code> uma vez por segundo até o botão de parar ser pressionado.</p>
+
+<pre class="brush:html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+  &lt;meta charset="UTF-8" /&gt;
+  &lt;title&gt;setInterval/clearInterval example&lt;/title&gt;
+
+  &lt;script&gt;
+    var nIntervId;
+
+    function changeColor() {
+      nIntervId = setInterval(flashText, 1000);
+    }
+
+    function flashText() {
+      var oElem = document.getElementById('my_box');
+      oElem.style.color = oElem.style.color == 'red' ? 'blue' : 'red';
+      // oElem.style.color == 'red' ? 'blue' : 'red' is a ternary operator.
+    }
+
+    function stopTextColor() {
+      clearInterval(nIntervId);
+    }
+  &lt;/script&gt;
+&lt;/head&gt;
+
+&lt;body onload="changeColor();"&gt;
+  &lt;div id="my_box"&gt;
+    &lt;p&gt;Hello World&lt;/p&gt;
+  &lt;/div&gt;
+
+  &lt;button onclick="stopTextColor();"&gt;Stop&lt;/button&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h3 id="Exemplo_3_Simulação_de_máquina_de_escrever">Exemplo 3: Simulação de máquina de escrever</h3>
+
+<p>O seguinte exemplo simula uma máquina de escrever primeiro limpando e digitando lentamente o conteúdo para  <code><a href="https://developer.mozilla.org/en-US/docs/DOM/NodeList">NodeList</a></code> que corresponde a um grupo especificado de seletores.</p>
+
+<pre class="brush:html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+&lt;meta charset="UTF-8" /&gt;
+&lt;title&gt;JavaScript Typewriter - MDN Example&lt;/title&gt;
+&lt;script&gt;
+  function Typewriter (sSelector, nRate) {
+
+  function clean () {
+    clearInterval(nIntervId);
+    bTyping = false;
+    bStart = true;
+    oCurrent = null;
+    aSheets.length = nIdx = 0;
+  }
+
+  function scroll (oSheet, nPos, bEraseAndStop) {
+    if (!oSheet.hasOwnProperty('parts') || aMap.length &lt; nPos) { return true; }
+
+    var oRel, bExit = false;
+
+    if (aMap.length === nPos) { aMap.push(0); }
+
+    while (aMap[nPos] &lt; oSheet.parts.length) {
+      oRel = oSheet.parts[aMap[nPos]];
+
+      scroll(oRel, nPos + 1, bEraseAndStop) ? aMap[nPos]++ : bExit = true;
+
+      if (bEraseAndStop &amp;&amp; (oRel.ref.nodeType - 1 | 1) === 3 &amp;&amp; oRel.ref.nodeValue) {
+        bExit = true;
+        oCurrent = oRel.ref;
+        sPart = oCurrent.nodeValue;
+        oCurrent.nodeValue = '';
+      }
+
+      oSheet.ref.appendChild(oRel.ref);
+      if (bExit) { return false; }
+    }
+
+    aMap.length--;
+    return true;
+  }
+
+  function typewrite () {
+    if (sPart.length === 0 &amp;&amp; scroll(aSheets[nIdx], 0, true) &amp;&amp; nIdx++ === aSheets.length - 1) { clean(); return; }
+
+    oCurrent.nodeValue += sPart.charAt(0);
+    sPart = sPart.slice(1);
+  }
+
+  function Sheet (oNode) {
+    this.ref = oNode;
+    if (!oNode.hasChildNodes()) { return; }
+    this.parts = Array.prototype.slice.call(oNode.childNodes);
+
+    for (var nChild = 0; nChild &lt; this.parts.length; nChild++) {
+      oNode.removeChild(this.parts[nChild]);
+      this.parts[nChild] = new Sheet(this.parts[nChild]);
+    }
+  }
+
+  var
+    nIntervId, oCurrent = null, bTyping = false, bStart = true,
+    nIdx = 0, sPart = "", aSheets = [], aMap = [];
+
+  this.rate = nRate || 100;
+
+  this.play = function () {
+    if (bTyping) { return; }
+    if (bStart) {
+      var aItems = document.querySelectorAll(sSelector);
+
+      if (aItems.length === 0) { return; }
+      for (var nItem = 0; nItem &lt; aItems.length; nItem++) {
+        aSheets.push(new Sheet(aItems[nItem]));
+        /* Uncomment the following line if you have previously hidden your elements via CSS: */
+        // aItems[nItem].style.visibility = "visible";
+      }
+
+      bStart = false;
+    }
+
+    nIntervId = setInterval(typewrite, this.rate);
+    bTyping = true;
+  };
+
+  this.pause = function () {
+    clearInterval(nIntervId);
+    bTyping = false;
+  };
+
+  this.terminate = function () {
+    oCurrent.nodeValue += sPart;
+    sPart = "";
+    for (nIdx; nIdx &lt; aSheets.length; scroll(aSheets[nIdx++], 0, false));
+    clean();
+  };
+}
+
+/* usage: */
+var oTWExample1 = new Typewriter(/* elements: */ '#article, h1, #info, #copyleft', /* frame rate (optional): */ 15);
+
+/* default frame rate is 100: */
+var oTWExample2 = new Typewriter('#controls');
+
+/* you can also change the frame rate value modifying the "rate" property; for example: */
+// oTWExample2.rate = 150;
+
+onload = function () {
+  oTWExample1.play();
+  oTWExample2.play();
+};
+&lt;/script&gt;
+&lt;style type="text/css"&gt;
+span.intLink, a, a:visited {
+  cursor: pointer;
+  color: #000000;
+  text-decoration: underline;
+}
+
+#info {
+  width: 180px;
+  height: 150px;
+  float: right;
+  background-color: #eeeeff;
+  padding: 4px;
+  overflow: auto;
+  font-size: 12px;
+  margin: 4px;
+  border-radius: 5px;
+  /* visibility: hidden; */
+}
+&lt;/style&gt;
+&lt;/head&gt;
+
+&lt;body&gt;
+
+&lt;p id="copyleft" style="font-style: italic; font-size: 12px; text-align: center;"&gt;CopyLeft 2012 by &lt;a href="https://developer.mozilla.org/" target="_blank"&gt;Mozilla Developer Network&lt;/a&gt;&lt;/p&gt;
+&lt;p id="controls" style="text-align: center;"&gt;[&amp;nbsp;&lt;span class="intLink" onclick="oTWExample1.play();"&gt;Play&lt;/span&gt; | &lt;span class="intLink" onclick="oTWExample1.pause();"&gt;Pause&lt;/span&gt; | &lt;span class="intLink" onclick="oTWExample1.terminate();"&gt;Terminate&lt;/span&gt;&amp;nbsp;]&lt;/p&gt;
+&lt;div id="info"&gt;
+Vivamus blandit massa ut metus mattis in fringilla lectus imperdiet. Proin ac ante a felis ornare vehicula. Fusce pellentesque lacus vitae eros convallis ut mollis magna pellentesque. Pellentesque placerat enim at lacus ultricies vitae facilisis nisi fringilla. In tincidunt tincidunt tincidunt.
+&lt;/div&gt;
+&lt;h1&gt;JavaScript Typewriter&lt;/h1&gt;
+
+&lt;div id="article"&gt;
+&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ultrices dolor ac dolor imperdiet ullamcorper. Suspendisse quam libero, luctus auctor mollis sed, malesuada condimentum magna. Quisque in ante tellus, in placerat est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec a mi magna, quis mattis dolor. Etiam sit amet ligula quis urna auctor imperdiet nec faucibus ante. Mauris vel consectetur dolor. Nunc eget elit eget velit pulvinar fringilla consectetur aliquam purus. Curabitur convallis, justo posuere porta egestas, velit erat ornare tortor, non viverra justo diam eget arcu. Phasellus adipiscing fermentum nibh ac commodo. Nam turpis nunc, suscipit a hendrerit vitae, volutpat non ipsum.&lt;/p&gt;
+&lt;form&gt;
+&lt;p&gt;Phasellus ac nisl lorem: &lt;input type="text" /&gt;&lt;br /&gt;
+&lt;textarea style="width: 400px; height: 200px;"&gt;Nullam commodo suscipit lacus non aliquet. Phasellus ac nisl lorem, sed facilisis ligula. Nam cursus lobortis placerat. Sed dui nisi, elementum eu sodales ac, placerat sit amet mauris. Pellentesque dapibus tellus ut ipsum aliquam eu auctor dui vehicula. Quisque ultrices laoreet erat, at ultrices tortor sodales non. Sed venenatis luctus magna, ultricies ultricies nunc fringilla eget. Praesent scelerisque urna vitae nibh tristique varius consequat neque luctus. Integer ornare, erat a porta tempus, velit justo fermentum elit, a fermentum metus nisi eu ipsum. Vivamus eget augue vel dui viverra adipiscing congue ut massa. Praesent vitae eros erat, pulvinar laoreet magna. Maecenas vestibulum mollis nunc in posuere. Pellentesque sit amet metus a turpis lobortis tempor eu vel tortor. Cras sodales eleifend interdum.&lt;/textarea&gt;&lt;/p&gt;
+&lt;p&gt;&lt;input type="submit" value="Send" /&gt;
+&lt;/form&gt;
+&lt;p&gt;Duis lobortis sapien quis nisl luctus porttitor. In tempor semper libero, eu tincidunt dolor eleifend sit amet. Ut nec velit in dolor tincidunt rhoncus non non diam. Morbi auctor ornare orci, non euismod felis gravida nec. Curabitur elementum nisi a eros rutrum nec blandit diam placerat. Aenean tincidunt risus ut nisi consectetur cursus. Ut vitae quam elit. Donec dignissim est in quam tempor consequat. Aliquam aliquam diam non felis convallis suscipit. Nulla facilisi. Donec lacus risus, dignissim et fringilla et, egestas vel eros. Duis malesuada accumsan dui, at fringilla mauris bibStartum quis. Cras adipiscing ultricies fermentum. Praesent bibStartum condimentum feugiat.&lt;/p&gt;
+&lt;p&gt;Nam faucibus, ligula eu fringilla pulvinar, lectus tellus iaculis nunc, vitae scelerisque metus leo non metus. Proin mattis lobortis lobortis. Quisque accumsan faucibus erat, vel varius tortor ultricies ac. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec libero nunc. Nullam tortor nunc, elementum a consectetur et, ultrices eu orci. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a nisl eu sem vehicula egestas.&lt;/p&gt;
+&lt;/div&gt;
+&lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p><a href="/files/3997/typewriter.html">View this demo in action</a>. See also: <a href="/en-US/docs/DOM/window.clearInterval"><code>clearInterval()</code></a>.</p>
+
+<h2 id="Argumentos_callback">Argumentos callback</h2>
+
+<p>Como já foi discutido, Internet Explorer 9 e versões anteriores não suportam passar argumentos para a função callback em ambos <code>setTimeout()</code> ou <code>setInterval()</code>. O seguinte código <strong>IE-specific</strong> demonstra um método para superar esta limitação. Para usar, apenas adicione o seguinte código no topo do seu script.</p>
+
+<pre class="brush:js">/*\
+|*|
+|*|  IE-specific polyfill that enables the passage of arbitrary arguments to the
+|*|  callback functions of javascript timers (HTML5 standard syntax).
+|*|
+|*|  https://developer.mozilla.org/en-US/docs/Web/API/window.setInterval
+|*|  https://developer.mozilla.org/User:fusionchess
+|*|
+|*|  Syntax:
+|*|  var timeoutID = window.setTimeout(func, delay[, param1, param2, ...]);
+|*|  var timeoutID = window.setTimeout(code, delay);
+|*|  var intervalID = window.setInterval(func, delay[, param1, param2, ...]);
+|*|  var intervalID = window.setInterval(code, delay);
+|*|
+\*/
+
+if (document.all &amp;&amp; !window.setTimeout.isPolyfill) {
+  var __nativeST__ = window.setTimeout;
+  window.setTimeout = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) {
+    var aArgs = Array.prototype.slice.call(arguments, 2);
+    return __nativeST__(vCallback instanceof Function ? function () {
+      vCallback.apply(null, aArgs);
+    } : vCallback, nDelay);
+  };
+  window.setTimeout.isPolyfill = true;
+}
+
+if (document.all &amp;&amp; !window.setInterval.isPolyfill) {
+  var __nativeSI__ = window.setInterval;
+  window.setInterval = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) {
+    var aArgs = Array.prototype.slice.call(arguments, 2);
+    return __nativeSI__(vCallback instanceof Function ? function () {
+      vCallback.apply(null, aArgs);
+    } : vCallback, nDelay);
+  };
+  window.setInterval.isPolyfill = true;
+}
+</pre>
+
+<p>Outra possibilidade é uso uma função anônima para chama o callback, apesar de que esta solução seja um pouco mais pesada. Exemplo:</p>
+
+<pre class="brush:js">var intervalID = setInterval(function() { myFunc('one', 'two', 'three'); }, 1000);</pre>
+
+<p>Outra possibilidade é usar o <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind">function's bind</a>. Exemplo:</p>
+
+<pre class="brush:js">var intervalID = setInterval(function(arg1) {}.bind(undefined, 10), 1000);</pre>
+
+<p>{{h3_gecko_minversion("Inactive tabs", "5.0")}}</p>
+
+<p>Starting in Gecko 5.0 {{geckoRelease("5.0")}}, intervals are clamped to fire no more often than once per second in inactive tabs.</p>
+
+<h2 id="O_problema_do_this">O problema do "<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this"><code>this</code></a>"</h2>
+
+<p>Quando você passa um método para <code>setInterval()</code> ou qualquer outra função, ela é chamada com o valor do <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this">this</a></code> errado. Este problema é explicado em detalhes em <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this#As_an_object_method">JavaScript reference</a>.</p>
+
+<h3 id="Explicação">Explicação</h3>
+
+<p>O código executado pelo <code>setInterval()</code> roda em um contexto de execução separado da função que foi chamada. Como uma consequência, o <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this">this</a></code> da função chamada, é setado como o objeto <code>window</code> (ou <code>global</code>), esse não é o mesmo valor do <code>this</code> para a função chamada em setTimeout. veja o seguinte exemplo (que usa <code>setTimeout()</code> ao invés de <code>setInterval()</code> - o problema segue para ambos os temporizadores)</p>
+
+<pre class="brush:js">myArray = ['zero', 'one', 'two'];
+
+myArray.myMethod = function (sProperty) {
+    alert(arguments.length &gt; 0 ? this[sProperty] : this);
+};
+
+myArray.myMethod(); // prints "zero,one,two"
+myArray.myMethod(1); // prints "one"
+setTimeout(myArray.myMethod, 1000); // prints "[object Window]" after 1 second
+setTimeout(myArray.myMethod, 1500, "1"); // prints "undefined" after 1,5 seconds
+// passing the 'this' object with .call won't work
+// because this will change the value of this inside setTimeout itself
+// while we want to change the value of this inside myArray.myMethod
+// in fact, it will be an error because setTimeout code expects this to be the window object:
+setTimeout.call(myArray, myArray.myMethod, 2000); // error: "NS_ERROR_XPC_BAD_OP_ON_WN_PROTO: Illegal operation on WrappedNative prototype object"
+setTimeout.call(myArray, myArray.myMethod, 2500, 2); // same error
+</pre>
+
+<p> </p>
+
+<p>Como você pode ver, não há maneiras de passar o objeto <code>this</code> para a função callback.</p>
+
+<p> </p>
+
+<h3 id="Uma_possível_solução">Uma possível solução</h3>
+
+<p>Um possível caminho para resolver o problema do <code>this</code>, é sobreescrever as duas funções globais nativas <code>setTimeout()</code> ou <code>setInterval()</code> com duas <em>non-native</em> que permitem sua invocação através do método <code><a href="https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Function/call">Function.prototype.call</a></code>. O seguinte exemplo mostra a possível substituição.</p>
+
+<pre class="brush:js">// Enable the passage of the 'this' object through the JavaScript timers
+
+var __nativeST__ = window.setTimeout, __nativeSI__ = window.setInterval;
+
+window.setTimeout = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) {
+  var oThis = this, aArgs = Array.prototype.slice.call(arguments, 2);
+  return __nativeST__(vCallback instanceof Function ? function () {
+    vCallback.apply(oThis, aArgs);
+  } : vCallback, nDelay);
+};
+
+window.setInterval = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) {
+  var oThis = this, aArgs = Array.prototype.slice.call(arguments, 2);
+  return __nativeSI__(vCallback instanceof Function ? function () {
+    vCallback.apply(oThis, aArgs);
+  } : vCallback, nDelay);
+};</pre>
+
+<div class="note">These two replacements also enable the HTML5 standard passage of arbitrary arguments to the callback functions of timers in IE. So they can be used as <em>non-standard-compliant</em> polyfills also. See the <a href="#Callback_arguments">callback arguments paragraph</a> for a <em>standard-compliant</em> polyfill.</div>
+
+<p>Teste da nova implementação:</p>
+
+<pre class="brush:js">myArray = ['zero', 'one', 'two'];
+
+myArray.myMethod = function (sProperty) {
+    alert(arguments.length &gt; 0 ? this[sProperty] : this);
+};
+
+setTimeout(alert, 1500, 'Hello world!'); // the standard use of setTimeout and setInterval is preserved, but...
+setTimeout.call(myArray, myArray.myMethod, 2000); // prints "zero,one,two" after 2 seconds
+setTimeout.call(myArray, myArray.myMethod, 2500, 2); // prints "two" after 2,5 seconds
+</pre>
+
+<p>Outra, mais complexa, solução para o problema do <code>this</code> é <a href="https://developer.mozilla.org/pt-BR/docs/Web/API/WindowOrWorkerGlobalScope/setInterval$edit#A_little_framework">the following framework</a>.</p>
+
+<div class="note">JavaScript 1.8.5 introduces the <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind">Function.prototype.bind()</a></code> method, which lets you specify the value that should be used as <code>this</code> for all calls to a given function. This lets you easily bypass problems where it's unclear what this will be, depending on the context from which your function was called. Also, ES2015 supports <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions">arrow functions</a>, with lexical this allowing us to write setInterval( () =&gt; this.myMethod) if we're inside myArray method.</div>
+
+<h2 id="MiniDaemon_-_A_framework_for_managing_timers">MiniDaemon - A framework for managing timers</h2>
+
+<p>In pages requiring many timers, it can often be difficult to keep track of all of the running timer events. One approach to solving this problem is to store information about the state of a timer in an object. Following is a minimal example of such an abstraction. The constructor architecture explicitly avoids the use of closures. It also offers an alternative way to pass the <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this"><code>this</code></a> object to the callback function (see <a href="#The_.22this.22_problem">The "this" problem</a> for details). The following code is also <a href="https://github.com/madmurphy/minidaemon.js">available on GitHub</a>.</p>
+
+<div class="note">For a more complex but still modular version of it (<code><em>Daemon</em></code>) see <a href="/en-US/Add-ons/Code_snippets/Timers/Daemons">JavaScript Daemons Management</a>. This more complex version is nothing but a big and scalable collection of methods for the <code><em>Daemon</em></code> constructor. However, the <code><em>Daemon</em></code> constructor itself is nothing but a clone of <code><em>MiniDaemon</em></code> with an added support for <em>init</em> and <em>onstart</em> functions declarable during the instantiation of the <code><em>daemon</em></code>. <strong>So the <code><em>MiniDaemon</em></code> framework remains the recommended way for simple animations</strong>, because <code><em>Daemon</em></code> without its collection of methods is essentially a clone of it.</div>
+
+<h3 id="minidaemon.js">minidaemon.js</h3>
+
+<pre class="brush:js">/*\
+|*|
+|*|  :: MiniDaemon ::
+|*|
+|*|  Revision #2 - September 26, 2014
+|*|
+|*|  https://developer.mozilla.org/en-US/docs/Web/API/window.setInterval
+|*|  https://developer.mozilla.org/User:fusionchess
+|*|  https://github.com/madmurphy/minidaemon.js
+|*|
+|*|  This framework is released under the GNU Lesser General Public License, version 3 or later.
+|*|  http://www.gnu.org/licenses/lgpl-3.0.html
+|*|
+\*/
+
+function MiniDaemon (oOwner, fTask, nRate, nLen) {
+  if (!(this &amp;&amp; this instanceof MiniDaemon)) { return; }
+  if (arguments.length &lt; 2) { throw new TypeError('MiniDaemon - not enough arguments'); }
+  if (oOwner) { this.owner = oOwner; }
+  this.task = fTask;
+  if (isFinite(nRate) &amp;&amp; nRate &gt; 0) { this.rate = Math.floor(nRate); }
+  if (nLen &gt; 0) { this.length = Math.floor(nLen); }
+}
+
+MiniDaemon.prototype.owner = null;
+MiniDaemon.prototype.task = null;
+MiniDaemon.prototype.rate = 100;
+MiniDaemon.prototype.length = Infinity;
+
+  /* These properties should be read-only */
+
+MiniDaemon.prototype.SESSION = -1;
+MiniDaemon.prototype.INDEX = 0;
+MiniDaemon.prototype.PAUSED = true;
+MiniDaemon.prototype.BACKW = true;
+
+  /* Global methods */
+
+MiniDaemon.forceCall = function (oDmn) {
+  oDmn.INDEX += oDmn.BACKW ? -1 : 1;
+  if (oDmn.task.call(oDmn.owner, oDmn.INDEX, oDmn.length, oDmn.BACKW) === false || oDmn.isAtEnd()) { oDmn.pause(); return false; }
+  return true;
+};
+
+  /* Instances methods */
+
+MiniDaemon.prototype.isAtEnd = function () {
+  return this.BACKW ? isFinite(this.length) &amp;&amp; this.INDEX &lt; 1 : this.INDEX + 1 &gt; this.length;
+};
+
+MiniDaemon.prototype.synchronize = function () {
+  if (this.PAUSED) { return; }
+  clearInterval(this.SESSION);
+  this.SESSION = setInterval(MiniDaemon.forceCall, this.rate, this);
+};
+
+MiniDaemon.prototype.pause = function () {
+  clearInterval(this.SESSION);
+  this.PAUSED = true;
+};
+
+MiniDaemon.prototype.start = function (bReverse) {
+  var bBackw = Boolean(bReverse);
+  if (this.BACKW === bBackw &amp;&amp; (this.isAtEnd() || !this.PAUSED)) { return; }
+  this.BACKW = bBackw;
+  this.PAUSED = false;
+  this.synchronize();
+};
+</pre>
+
+<div class="note">MiniDaemon passes arguments to the callback function. If you want to work on it with browsers that natively do not support this feature, use one of the methods proposed above.</div>
+
+<h3 id="Syntax">Syntax</h3>
+
+<p><code>var myDaemon = new MiniDaemon(<em>thisObject</em>, <em>callback</em>[</code><code>, <em>rate</em></code><code>[, <em>length</em>]]);</code></p>
+
+<h3 id="Description">Description</h3>
+
+<p>Returns a JavaScript <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object"><code>Object</code></a> containing all information needed by an animation (like the <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this"><code>this</code></a> object, the callback function, the length, the frame-rate).</p>
+
+<h4 id="Parameters">Parameters</h4>
+
+<dl>
+ <dt><code>thisObject</code></dt>
+ <dd>The <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this"><code>this</code></a> object on which the <em>callback</em> function is called. It can be an <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object"><code>object</code></a> or <code>null</code>.</dd>
+ <dt><code>callback</code></dt>
+ <dd>The function that is repeatedly invoked . <strong>It is called with three parameters</strong>: <em>index</em> (the iterative index of each invocation), <em>length</em> (the number of total invocations assigned to the <em>daemon</em> - finite or <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Infinity"><code>Infinity</code></a>) and <em>backwards</em> (a boolean expressing whether the <em>index</em> is increasing or decreasing). It is something like <em>callback</em>.call(<em>thisObject</em>, <em>index</em>, <em>length</em>, <em>backwards</em>). <strong>If the callback function returns a <code>false</code> value the <em>daemon</em> is paused</strong>.</dd>
+ <dt><code>rate (optional)</code></dt>
+ <dd>The time lapse (in number of milliseconds) between each invocation. The default value is 100.</dd>
+ <dt><code>length (optional)</code></dt>
+ <dd>The total number of invocations. It can be a positive integer or <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Infinity"><code>Infinity</code></a>. The default value is <code>Infinity</code>.</dd>
+</dl>
+
+<h4 id="MiniDaemon_instances_properties"><code>MiniDaemon</code> instances properties</h4>
+
+<dl>
+ <dt><code>myDaemon.owner</code></dt>
+ <dd>The <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this"><code>this</code></a> object on which is executed the daemon (read/write). It can be an <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object"><code>object</code></a> or <code>null</code>.</dd>
+ <dt><code>myDaemon.task</code></dt>
+ <dd>The function that is repeatedly invoked (read/write). It is called with three arguments: <em>index</em> (the iterative index of each invocation), <em>length</em> (the number of total invocations assigned to the daemon - finite or <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Infinity"><code>Infinity</code></a>) and backwards (a boolean expressing whether the <em>index</em> is decreasing or not) – see above. If the <code>myDaemon.task</code> function returns a <code>false</code> value the <em>daemon</em> is paused.</dd>
+ <dt><code>myDaemon.rate</code></dt>
+ <dd>The time lapse (in number of milliseconds) between each invocation (read/write).</dd>
+ <dt><code>myDaemon.length</code></dt>
+ <dd>The total number of invocations. It can be a positive integer or <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Infinity"><code>Infinity</code></a> (read/write).</dd>
+</dl>
+
+<h4 id="MiniDaemon_instances_methods"><code>MiniDaemon</code> instances methods</h4>
+
+<dl>
+ <dt><code>myDaemon.isAtEnd()</code></dt>
+ <dd>Returns a boolean expressing whether the <em>daemon</em> is at the start/end position or not.</dd>
+ <dt><code>myDaemon.synchronize()</code></dt>
+ <dd>Synchronize the timer of a started daemon with the time of its invocation.</dd>
+ <dt><code>myDaemon.pause()</code></dt>
+ <dd>Pauses the daemon.</dd>
+ <dt><code>myDaemon.start([<em>reverse</em>])</code></dt>
+ <dd>Starts the daemon forward (<em>index</em> of each invocation increasing) or backwards (<em>index</em> decreasing).</dd>
+</dl>
+
+<h4 id="MiniDaemon_global_object_methods"><code>MiniDaemon</code> global object methods</h4>
+
+<dl>
+ <dt><code>MiniDaemon.forceCall(<em>minidaemon</em>)</code></dt>
+ <dd>Forces a single callback to the <code><em>minidaemon</em>.task</code> function regardless of the fact that the end has been reached or not. In any case the internal <code>INDEX</code> property is increased/decreased (depending on the actual direction of the process).</dd>
+</dl>
+
+<h3 id="Example_usage">Example usage</h3>
+
+<p>Your HTML page:</p>
+
+<pre class="brush:html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+  &lt;meta charset="UTF-8" /&gt;
+  &lt;title&gt;MiniDaemin Example - MDN&lt;/title&gt;
+  &lt;script type="text/javascript" src="minidaemon.js"&gt;&lt;/script&gt;
+  &lt;style type="text/css"&gt;
+    #sample_div {
+      visibility: hidden;
+    }
+  &lt;/style&gt;
+&lt;/head&gt;
+
+&lt;body&gt;
+  &lt;p&gt;
+    &lt;input type="button" onclick="fadeInOut.start(false /* optional */);" value="fade in" /&gt;
+    &lt;input type="button" onclick="fadeInOut.start(true);" value="fade out"&gt;
+    &lt;input type="button" onclick="fadeInOut.pause();" value="pause" /&gt;
+  &lt;/p&gt;
+
+  &lt;div id="sample_div"&gt;Some text here&lt;/div&gt;
+
+  &lt;script type="text/javascript"&gt;
+    function opacity (nIndex, nLength, bBackwards) {
+      this.style.opacity = nIndex / nLength;
+      if (bBackwards ? nIndex === 0 : nIndex === 1) {
+        this.style.visibility = bBackwards ? 'hidden' : 'visible';
+      }
+    }
+
+    var fadeInOut = new MiniDaemon(document.getElementById('sample_div'), opacity, 300, 8);
+  &lt;/script&gt;
+&lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p><a href="/files/3995/minidaemon_example.html" title="MiniDaemon Example">View this example in action</a></p>
+
+<h2 id="Notes">Notes</h2>
+
+<p>The <code>setInterval()</code> function is commonly used to set a delay for functions that are executed again and again, such as animations.</p>
+
+<p>You can cancel the interval using {{domxref("WindowOrWorkerGlobalScope.clearInterval()")}}.</p>
+
+<p>If you wish to have your function called <em>once</em> after the specified delay, use {{domxref("WindowOrWorkerGlobalScope.setTimeout()")}}.</p>
+
+<h3 id="Ensure_that_execution_duration_is_shorter_than_interval_frequency">Ensure that execution duration is shorter than interval frequency</h3>
+
+<p>If there is a possibility that your logic could take longer to execute than the interval time, it is recommended that you recursively call a named function using {{domxref("WindowOrWorkerGlobalScope.setTimeout")}}. For example, if using <code>setInterval</code> to poll a remote server every 5 seconds, network latency, an unresponsive server, and a host of other issues could prevent the request from completing in its allotted time. As such, you may find yourself with queued up XHR requests that won't necessarily return in order.</p>
+
+<p>In these cases, a recursive <code>setTimeout()</code> pattern is preferred:</p>
+
+<pre class="brush:js">(function loop(){
+   setTimeout(function() {
+      // Your logic here
+
+      loop();
+  }, delay);
+})();
+</pre>
+
+<p>In the above snippet, a named function <code>loop()</code> is declared and is immediately executed. <code>loop()</code> is recursively called inside <code>setTimeout()</code> after the logic has completed executing. While this pattern does not guarantee execution on a fixed interval, it does guarantee that the previous interval has completed before recursing.</p>
+
+<h3 id="Throttling_of_intervals">Throttling of intervals</h3>
+
+<p><code>setInterval()</code> is subject to the same throttling restrictions in Firefox as {{domxref("WindowOrWorkerGlobalScope.setTimeout","setTimeout()")}}; see <a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout#Reasons_for_delays_longer_than_specified">Reasons for delays longer than specified</a>.</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Specification</th>
+   <th>Status</th>
+   <th>Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'webappapis.html#dom-setinterval', 'WindowOrWorkerGlobalScope.setInterval()')}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td>Method moved to the <code>WindowOrWorkerGlobalScope</code> mixin in the latest spec.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML WHATWG", "webappapis.html#dom-setinterval", "WindowTimers.setInterval()")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td>Initial definition (DOM Level 0)</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Compatibilidade com navegadores</h2>
+
+<div>
+
+
+<p>{{Compat("api.WindowOrWorkerGlobalScope.setInterval")}}</p>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/Add-ons/Code_snippets/Timers">JavaScript timers</a></li>
+ <li>{{domxref("WindowOrWorkerGlobalScope.setTimeout")}}</li>
+ <li>{{domxref("WindowOrWorkerGlobalScope.clearTimeout")}}</li>
+ <li>{{domxref("WindowOrWorkerGlobalScope.clearInterval")}}</li>
+ <li>{{domxref("window.requestAnimationFrame")}}</li>
+ <li><a href="/en-US/Add-ons/Code_snippets/Timers/Daemons"><em>Daemons</em> management</a></li>
+</ul>
diff --git a/files/pt-br/web/api/web_audio_api/index.html b/files/pt-br/web/api/web_audio_api/index.html
index 8e6e3323bd..14c6707eb4 100644
--- a/files/pt-br/web/api/web_audio_api/index.html
+++ b/files/pt-br/web/api/web_audio_api/index.html
@@ -424,7 +424,7 @@ function voiceMute() { // toggle to mute and unmute sound
  <li><a href="https://github.com/bit101/tones">Tones</a>: a simple library for playing specific tones/notes using the Web Audio API.</li>
 </ul>
 
-<section id="Quick_Links">
+<section id="Quick_links">
 <h3 id="Quicklinks">Quicklinks</h3>
 
 <ol>
diff --git a/files/pt-br/web/api/websockets_api/writing_websocket_client_applications/index.html b/files/pt-br/web/api/websockets_api/writing_websocket_client_applications/index.html
index 5dc99a6a39..e71dd16c1b 100644
--- a/files/pt-br/web/api/websockets_api/writing_websocket_client_applications/index.html
+++ b/files/pt-br/web/api/websockets_api/writing_websocket_client_applications/index.html
@@ -180,4 +180,4 @@ function sendText() {
 
 <h2 id="Considerações_de_segurança">Considerações de segurança</h2>
 
-<p>WebSockets não devem ser utilizados em um contexto de um ambiente misto, isto é, você não deveria abrir uma conexão não-segura a partir de uma página previamente carregada utilizando HTTPS, ou vice-versa. A maioria dos browsers atuamente apenas permitem conexões seguras pelo Websocke, e não mais suportam contextos diferentes desse.</p>
+<p>WebSockets não devem ser utilizados em um contexto de um ambiente misto, isto é, você não deveria abrir uma conexão não-segura a partir de uma página previamente carregada utilizando HTTPS, ou vice-versa. A maioria dos browsers atuamente apenas permitem conexões seguras pelo Websocket, e não mais suportam contextos diferentes desse.</p>
diff --git a/files/pt-br/web/api/windoworworkerglobalscope/atob/index.html b/files/pt-br/web/api/windoworworkerglobalscope/atob/index.html
deleted file mode 100644
index 4448a8b31f..0000000000
--- a/files/pt-br/web/api/windoworworkerglobalscope/atob/index.html
+++ /dev/null
@@ -1,73 +0,0 @@
----
-title: WindowBase64.atob()
-slug: Web/API/WindowOrWorkerGlobalScope/atob
-tags:
-  - API
-  - Referencia
-  - WindowBase64
-  - metodo
-translation_of: Web/API/WindowOrWorkerGlobalScope/atob
-original_slug: Web/API/WindowBase64/atob
----
-<div>{{APIRef("HTML DOM")}}</div>
-
-<p>A função <strong><code>WindowBase64.atob()</code></strong> decodifica uma string de dados que foi codificada através da codificação base-64. Você pode usar o método {{domxref("WindowBase64.btoa","window.btoa()")}} para codificar e transmitir dados que, se não codificados, podem causar problemas de comunicação. Após transmití-los pode-se usar o método <code>window.atob()</code> para decodificar os dados novamente. Por exemplo, você pode codificar, transmitir,  e decodificar caracteres de controle como valores ASCII de 0 a 31.</p>
-
-<p>Para utilizar com strings Unicode ou UTF-8, veja <a href="/en-US/docs/Web/JavaScript/Base64_encoding_and_decoding#The_.22Unicode_Problem.22">esta nota em <em>Base64 encoding and decoding</em></a> e <a href="/en-US/docs/Web/API/window.btoa#Unicode_Strings">essa nota em <code>window.btoa()</code></a>.</p>
-
-<h2 id="Sintaxe">Sintaxe</h2>
-
-<pre class="syntaxbox">var dadoDecodificado = window.atob(<em>dadoCodificado</em>);</pre>
-
-<h2 id="Exemplo">Exemplo</h2>
-
-<pre class="brush:js">var <em>dadoCodificado </em>= window.btoa("Olá, mundo"); // codifica a string
-var dadoDecodificado = window.atob(<em>dadoCodificado</em>); // decodifica a string</pre>
-
-<h2 id="Especificações">Especificações</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Especificação</th>
-   <th scope="col">Status</th>
-   <th scope="col">Comentário</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', '#dom-windowbase64-atob', 'WindowBase64.atob()')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td>Nenhuma mudança desde a última versão, {{SpecName("HTML5.1")}}.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5.1', '#dom-windowbase64-atob', 'WindowBase64.atob()')}}</td>
-   <td>{{Spec2('HTML5.1')}}</td>
-   <td>Versão de {{SpecName("HTML WHATWG")}}. Nenhuma mudança.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName("HTML5 W3C", "#dom-windowbase64-atob", "WindowBase64.atob()")}}</td>
-   <td>{{Spec2('HTML5 W3C')}}</td>
-   <td>Versão de {{SpecName("HTML WHATWG")}}. Criação do <code>WindowBase64</code> (antes as propriedades ficavam no target).</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility">Compatibilidade com navegadores</h2>
-
-<div>{{Compat("api.WindowOrWorkerGlobalScope.atob")}}</div>
-
-<div id="compat-mobile"></div>
-
-<p>[1] <code>atob()</code> também está disponível para os componentes do XPCOM implementado em JavaScript, porém o objeto <code><a href="/en-US/docs/Web/API/Window">window</a></code> não é global nos componentes.</p>
-
-<p>[2] A partir do <a href="/en-US/Firefox/Releases/27/Site_Compatibility">Firefox 27</a>, <code>atob()</code> ignora todos os caracteres de espaço no argumento para seguir as últimas especificações do HTML5. ({{bug(711180)}})</p>
-
-<h2 id="Veja_também">Veja também</h2>
-
-<ul>
- <li><a href="/Web/API/WindowBase64/Base64_encoding_and_decoding">Base64 encoding and decoding</a></li>
- <li><a href="/en-US/docs/data_URIs"><code>data</code> URIs</a></li>
- <li>{{domxref("WindowBase64.btoa","window.btoa()")}}</li>
- <li><a href="/en-US/docs/Components.utils.importGlobalProperties">Components.utils.importGlobalProperties</a></li>
-</ul>
diff --git a/files/pt-br/web/api/windoworworkerglobalscope/cleartimeout/index.html b/files/pt-br/web/api/windoworworkerglobalscope/cleartimeout/index.html
deleted file mode 100644
index cbcbb80329..0000000000
--- a/files/pt-br/web/api/windoworworkerglobalscope/cleartimeout/index.html
+++ /dev/null
@@ -1,101 +0,0 @@
----
-title: WindowTimers.clearTimeout()
-slug: Web/API/WindowOrWorkerGlobalScope/clearTimeout
-tags:
-  - API
-  - Method
-  - Window
-translation_of: Web/API/WindowOrWorkerGlobalScope/clearTimeout
-original_slug: Web/API/WindowTimers/clearTimeout
----
-<div>
-<div>
-<div>{{APIRef("HTML DOM")}}</div>
-</div>
-</div>
-
-<h2 id="Summary" name="Summary">Sumário</h2>
-
-<p>O método <strong><code>clearTimeout()</code></strong> do escopo<em> </em>{{domxref("WindowOrWorkerGlobalScope")}} cancela um <em>timeout</em> previamente estabelecido pela função {{domxref("WindowOrWorkerGlobalScope.setTimeout", "setTimeout()")}}.</p>
-
-<h2 id="Syntax" name="Syntax">Síntaxe</h2>
-
-<pre class="syntaxbox"><em>escopo</em>.clearTimeout(<em>timeoutID</em>)
-</pre>
-
-<h3 id="Parâmetros">Parâmetros</h3>
-
-<dl>
- <dt><code>timeoutID</code></dt>
- <dd>O ID do <em>timeout</em> que você deseja cancelar. Esse ID é o retorno da função <code>setTimeout()</code>.</dd>
-</dl>
-
-<p>É interessante ressaltar que os conjuntso de <em>ID</em>s usados pelos métodos {{domxref("WindowOrWorkerGlobalScope.setTimeout", "setTimeout()")}} e {{domxref("WindowOrWorkerGlobalScope.setInterval", "setInterval()")}} são compartilhados, o que significa que <code>clearTimeout()</code> e {{domxref("WindowOrWorkerGlobalScope.clearInterval", "clearInterval()")}} podem ser tecnicamente utilizados de forma intercambiável. No entanto, para obter-se maior clareza, isso deve ser evitado.</p>
-
-<h2 id="Example" name="Example">Exemplo</h2>
-
-<p>Execute o script abaixo em uma página web e clique na página uma vez. Você verá uma mensagem aparecer um segundo depois. Se você continuar clicando na página várias vezes nesse intervalo de tempo, a mensagem aparecerá uma única vez.</p>
-
-<pre class="brush: js" dir="rtl">var alarme = {
-  relembrar: function(aMessage) {
-    alert(aMessage);
-    delete this.timeoutID;
-  },
-
-  setup: function() {
-    if (typeof this.timeoutID === 'number') {
-        this.cancelar();
-    }
-
-    this.timeoutID = window.setTimeout(function(msg) {
-        this.relembrar(msg);
-    }.bind(this), 1000, 'Wake up!');
-  },
-
-  cancelar: function() {
-    window.clearTimeout(this.timeoutID);
-  }
-};
-window.onclick = function() { alarme.setup() };</pre>
-
-<h2 id="Notes" name="Notes">Notas</h2>
-
-<p>Passar um <em>ID</em> inválido para <code>clearTimeout</code> não causa nenhum efeito (não lança nenhuma exceção).</p>
-
-<h2 id="Specification" name="Specification">Especificações</h2>
-
-<table class="standard-table" style="height: 166px; width: 1207px;">
- <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', 'webappapis.html#dom-cleartimeout', 'WindowOrWorkerGlobalScope.clearTimeout()')}}</td>
-   <td>{{Spec2("HTML WHATWG")}}</td>
-   <td>Método movido para <code>WindowOrWorkerGlobalScope</code> .</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', 'webappapis.html#dom-cleartimeout', 'clearTimeout()')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="See_also" name="See_also">Compatibilidade</h2>
-
-
-
-<p>{{Compat("api.WindowOrWorkerGlobalScope.clearTimeout")}}</p>
-
-<h2 id="See_also" name="See_also">Veja também</h2>
-
-<ul>
- <li>{{domxref("WindowOrWorkerGlobalScope.setTimeout()")}}</li>
- <li>{{domxref("WindowOrWorkerGlobalScope.setInterval()")}}</li>
- <li>{{domxref("WindowOrWorkerGlobalScope.clearInterval()")}}</li>
- <li>{{domxref("Window.requestAnimationFrame()")}}</li>
- <li><a href="https://developer.mozilla.org/en-US/docs/JavaScript/Timers/Daemons" title="JavaScript/Timers/Daemons"><em>Daemons</em> management</a></li>
-</ul>
diff --git a/files/pt-br/web/api/windoworworkerglobalscope/fetch/index.html b/files/pt-br/web/api/windoworworkerglobalscope/fetch/index.html
deleted file mode 100644
index 4567730f6c..0000000000
--- a/files/pt-br/web/api/windoworworkerglobalscope/fetch/index.html
+++ /dev/null
@@ -1,305 +0,0 @@
----
-title: WindowOrWorkerGlobalScope.fetch()
-slug: Web/API/WindowOrWorkerGlobalScope/fetch
-translation_of: Web/API/WindowOrWorkerGlobalScope/fetch
----
-<div>{{APIRef("Fetch API")}}</div>
-
-<p>O método <code><strong>fetch()</strong></code> do mixin {{domxref("WindowOrWorkerGlobalScope")}} inicia um processo de busca de um recurso da rede. Este, retorna uma promessa que resolve o objeto {{domxref("Response")}} que representa a resposta a sua requisição. </p>
-
-<p><code>WorkerOrGlobalScope</code> é implementado por {{domxref("Window")}} e {{domxref("WorkerGlobalScope")}}, o que significa que o método <code>fetch()</code> está disponível em praticamente qualquer contexto em que você possa querer obter recursos.</p>
-
-<p>Uma promessa {{domxref("WindowOrWorkerGlobalScope.fetch","fetch()")}} rejeita com um {{jsxref("TypeError")}} quando um erro de rede é encontrado, embora isso geralmente signifique um problema de permissões ou similar. Uma verificação precisa de um <code>fetch()</code> bem-sucedido incluiria a verificação de uma promessa resolvida, e depois verificando se a propriedade {{domxref("Response.ok")}} possui valor <code>true</code>. Um status HTTP 404 não constitui um erro de rede.</p>
-
-<p>O método <code>fetch()</code> é controlado pela diretiva <code>connect-src</code> da <a href="/en-US/docs/Security/CSP/CSP_policy_directives">Content Security Policy</a> em vez da diretiva dos recursos que está recuperando.</p>
-
-<div class="note">
-<p><strong>Nota</strong>: Os parâmetros do método <code>fetch()</code> são idênticos aos do construtor {{domxref("Request.Request","Request()")}}.</p>
-</div>
-
-<h2 id="Sintaxe">Sintaxe</h2>
-
-<pre class="syntaxbox">Promise&lt;Response&gt; fetch(input[, init]);</pre>
-
-<h3 id="Parâmetros">Parâmetros</h3>
-
-<dl>
- <dt><em>input</em></dt>
- <dd>Isto define o recurso que você deseja buscar. Isto pode ser:
- <ul>
-  <li>Um {{domxref("USVString")}} contendo uma URL direta para o recurso que você quer obter. Alguns navegadores aceitam <code>blob:</code> e <code>data:</code> como esquemas.</li>
-  <li>Um objeto {{domxref("Request")}}.</li>
- </ul>
- </dd>
- <dt><em>init</em> {{optional_inline}}</dt>
- <dd>Um objeto opcional que contém configurações personalizadas que você pode aplicar à requisição. As opções possíveis são:
- <ul>
-  <li><code>method</code>: Método HTTP, por exemplo, <code>GET</code>, <code>POST</code>.</li>
-  <li><code>headers</code>: Qualquer cabeçalho que você queira adicionar à sua requisição, contido dentro de um objeto {{domxref("Headers")}} ou um objeto literal com valores {{domxref("ByteString")}}.</li>
-  <li><code>body</code>: Qualquer corpo que você queira adicionar à sua requisição: podendo ser um {{domxref("Blob")}}, {{domxref("BufferSource")}}, {{domxref("FormData")}}, {{domxref("URLSearchParams")}}, ou um objeto {{domxref("USVString")}}. Note que uma requisição usando os métodos <code>GET</code> ou <code>HEAD</code> não pode ter um corpo.</li>
-  <li><code>mode</code>: O modo que deseja usar para a requisição, por exemplo, <code>cors</code>, <code>no-cors</code>, ou <code>same-origin.</code></li>
-  <li><code>credentials</code>: A credencial que deseja usar para a requisição: <code>omit</code>, <code>same-origin</code>, ou <code>include</code>. Para enviar automaticamente cookies para o domínio atual, esta opção deve ser fornecida. Começando com o Chrome 50, essa propriedade também usa uma instância {{domxref("FederatedCredential")}} ou uma instância {{domxref("PasswordCredential")}}.</li>
-  <li><code>cache</code>: O modo de cache que deseja usar na requisição: <code>default</code>, <code>no-store</code>, <code>reload</code>, <code>no-cache</code>, <code>force-cache</code>, ou <code>only-if-cached</code>.</li>
-  <li><code>redirect</code>: O modo de redirecionamento pode usar: <code>follow</code> (segue automaticamente o redirecionamento), <code>error</code> (aborta com um erro se ocorrer um redirecionamento), ou <code>manual</code> (manipula redirecionamentos manualmente). No Chrome o padrão foi <code>follow</code> antes do Chrome 47 e <code>manual</code> a partir do Chrome 47.</li>
-  <li><code>referrer</code>: Um {{domxref("USVString")}} especificando <code>no-referrer</code>, <code>client</code>, ou uma URL. O padrão é <code>client</code>.</li>
-  <li><code>referrerPolicy</code>: Especifica o valor do cabeçalho HTTP referer. Pode ser um destes: <code>no-referrer</code>, <code>no-referrer-when-downgrade</code>, <code>origin</code>, <code>origin-when-cross-origin</code>, <code>unsafe-url</code>.</li>
-  <li><code>integrity</code>: Contém o valor de <a href="/en-US/docs/Web/Security/Subresource_Integrity">integridade de subrecurso</a> da requisição (por exemplo, <code>sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE=</code>).</li>
-  <li><code>signal</code>: Uma instância do objeto {{domxref("FetchSignal")}}; permite que você se comunique com um pedido de busca e controle-o através de um {{domxref("FetchController")}}. {{non-standard_inline}}</li>
-  <li><code>observe</code>: Um objeto {{domxref("ObserverCallback")}} — o objetivo exclusivo deste objeto é fornecer uma função de retorno de chamada que é executada quando a solicitação fetch é executada. Isto retorna um objeto {{domxref("FetchObserver")}} que pode ser usado para recuperar informações sobre o status de uma solicitação fetch. {{non-standard_inline}}</li>
- </ul>
- </dd>
-</dl>
-
-<h3 id="Valor_de_Retorno">Valor de Retorno</h3>
-
-<p>Uma {{domxref("Promise")}} que resolve um objeto {{domxref("Response")}}.</p>
-
-<h3 id="Exceptions">Exceptions</h3>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col"><strong>Tipo</strong></th>
-   <th scope="col"><strong>Descrição</strong></th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><code>TypeError</code></td>
-   <td>Desdo o <a href="/en-US/docs/Mozilla/Firefox/Releases/43">Firefox 43</a>, <code>fetch()</code><br>
-    lançará um <code>TypeError</code> se a URL tiver credenciais, como <code>http://user:password@example.com</code>.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Example">Example</h2>
-
-<p>In our <a href="https://github.com/mdn/fetch-examples/tree/gh-pages/fetch-request">Fetch Request example</a> (see <a href="https://mdn.github.io/fetch-examples/fetch-request/">Fetch Request live</a>) we create a new {{domxref("Request")}} object using the relevant constructor, then fetch it using a <code>fetch()</code> call. Since we are fetching an image, we run {{domxref("Body.blob()")}} on the response to give it the proper MIME type so it will be handled properly, then create an Object URL of it and display it in an {{htmlelement("img")}} element.</p>
-
-<pre class="brush: js">var myImage = document.querySelector('img');
-
-var myRequest = new Request('flowers.jpg');
-
-fetch(myRequest).then(function(response) {
-  return response.blob();
-}).then(function(response) {
-  var objectURL = URL.createObjectURL(response);
-  myImage.src = objectURL;
-});</pre>
-
-<p>In our <a href="https://github.com/mdn/fetch-examples/blob/master/fetch-with-init-then-request/index.html">Fetch with init then Request example</a> (see <a href="https://mdn.github.io/fetch-examples/fetch-with-init-then-request/">Fetch Request init live</a>) we do the same thing except that we pass in an init object when we invoke <code>fetch()</code>:</p>
-
-<pre class="brush: js">var myImage = document.querySelector('img');
-
-var myHeaders = new Headers();
-myHeaders.append('Content-Type', 'image/jpeg');
-
-var myInit = { method: 'GET',
-               headers: myHeaders,
-               mode: 'cors',
-               cache: 'default' };
-
-var myRequest = new Request('flowers.jpg');
-
-fetch(myRequest,myInit).then(function(response) {
-  ...
-});</pre>
-
-<p>Note that you could also pass the init object in with the <code>Request</code> constructor to get the same effect, e.g.:</p>
-
-<pre class="brush: js">var myRequest = new Request('flowers.jpg', myInit);</pre>
-
-<p>You can also use an object literal as <code>headers</code> in <code>init</code>.</p>
-
-<pre class="brush: js">var myInit = { method: 'GET',
-               headers: {
-                   'Content-Type': 'image/jpeg'
-               },
-               mode: 'cors',
-               cache: 'default' };
-
-var myRequest = new Request('flowers.jpg', myInit);
-</pre>
-
-<h2 id="Specifications">Specifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Specification</th>
-   <th scope="col">Status</th>
-   <th scope="col">Comment</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Fetch','#fetch-method','fetch()')}}</td>
-   <td>{{Spec2('Fetch')}}</td>
-   <td>Defined in a <code>WindowOrWorkerGlobalScope</code> partial in the newest spec.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('Fetch','#dom-global-fetch','fetch()')}}</td>
-   <td>{{Spec2('Fetch')}}</td>
-   <td>Initial definition</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('Credential Management')}}</td>
-   <td>{{Spec2('Credential Management')}}</td>
-   <td>Adds {{domxref("FederatedCredential")}} or {{domxref("PasswordCredential")}} instance as a possible value for <code>init.credentials</code>.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility">Compatibilidade com navegadores</h2>
-
-<p>{{CompatibilityTable}}</p>
-
-<div id="compat-desktop">
-<table class="compat-table">
- <tbody>
-  <tr>
-   <th>Feature</th>
-   <th>Chrome</th>
-   <th>Edge</th>
-   <th>Firefox (Gecko)</th>
-   <th>Internet Explorer</th>
-   <th>Opera</th>
-   <th>Safari (WebKit)</th>
-  </tr>
-  <tr>
-   <td>Basic support</td>
-   <td>{{CompatChrome(42)}}</td>
-   <td>14</td>
-   <td>{{CompatGeckoDesktop(34)}}<sup>[1]</sup><br>
-    {{CompatGeckoDesktop(39)}}<br>
-    {{CompatGeckoDesktop(52)}}<sup>[2]</sup></td>
-   <td>{{CompatNo}}</td>
-   <td>29<br>
-    28<sup>[1]</sup></td>
-   <td>{{CompatNo}}</td>
-  </tr>
-  <tr>
-   <td>Streaming response body</td>
-   <td>{{CompatChrome(43)}}</td>
-   <td>14</td>
-   <td>{{CompatUnknown}}</td>
-   <td>{{CompatUnknown}}</td>
-   <td>{{CompatUnknown}}</td>
-   <td>{{CompatUnknown}}</td>
-  </tr>
-  <tr>
-   <td>Support for <code>blob:</code> and <code>data:</code></td>
-   <td>{{CompatChrome(48)}}</td>
-   <td>{{CompatNo}}</td>
-   <td>{{CompatUnknown}}</td>
-   <td>{{CompatUnknown}}</td>
-   <td>{{CompatUnknown}}</td>
-   <td>{{CompatUnknown}}</td>
-  </tr>
-  <tr>
-   <td><code>referrerPolicy</code></td>
-   <td>{{CompatChrome(52)}}</td>
-   <td>{{CompatUnknown}}</td>
-   <td>{{CompatUnknown}}</td>
-   <td>{{CompatUnknown}}</td>
-   <td>39</td>
-   <td>{{CompatUnknown}}</td>
-  </tr>
-  <tr>
-   <td><code>signal</code> and <code>observer</code></td>
-   <td>{{ CompatNo }}</td>
-   <td>{{ CompatNo }}</td>
-   <td>{{ CompatNo }}<sup>[3]</sup></td>
-   <td>{{ CompatNo }}</td>
-   <td>{{ CompatNo }}</td>
-   <td>{{ CompatNo }}</td>
-  </tr>
- </tbody>
-</table>
-</div>
-
-<div id="compat-mobile">
-<table class="compat-table">
- <tbody>
-  <tr>
-   <th>Feature</th>
-   <th>Android</th>
-   <th>Android Webview</th>
-   <th>Edge</th>
-   <th>Firefox Mobile (Gecko)</th>
-   <th>IE Phone</th>
-   <th>Opera Mobile</th>
-   <th>Safari Mobile</th>
-   <th>Chrome for Android</th>
-  </tr>
-  <tr>
-   <td>Basic support</td>
-   <td>{{CompatNo}}</td>
-   <td>{{CompatChrome(42)}}</td>
-   <td>14</td>
-   <td>{{CompatGeckoMobile(52)}}<sup>[2]</sup></td>
-   <td>{{CompatNo}}</td>
-   <td>{{CompatNo}}</td>
-   <td>{{CompatNo}}</td>
-   <td>{{CompatChrome(42)}}</td>
-  </tr>
-  <tr>
-   <td>Streaming response body</td>
-   <td>{{CompatNo}}</td>
-   <td>{{CompatChrome(43)}}</td>
-   <td>14</td>
-   <td>{{CompatUnknown}}</td>
-   <td>{{CompatUnknown}}</td>
-   <td>{{CompatUnknown}}</td>
-   <td>{{CompatUnknown}}</td>
-   <td>{{CompatChrome(43)}}</td>
-  </tr>
-  <tr>
-   <td>Support for <code>blob:</code> and <code>data:</code></td>
-   <td>{{CompatNo}}</td>
-   <td>{{CompatChrome(43)}}</td>
-   <td>{{CompatNo}}</td>
-   <td>{{CompatUnknown}}</td>
-   <td>{{CompatUnknown}}</td>
-   <td>{{CompatUnknown}}</td>
-   <td>{{CompatUnknown}}</td>
-   <td>{{CompatChrome(43)}}</td>
-  </tr>
-  <tr>
-   <td><code>referrerPolicy</code></td>
-   <td>{{CompatNo}}</td>
-   <td>{{CompatChrome(52)}}</td>
-   <td>{{CompatUnknown}}</td>
-   <td>{{CompatUnknown}}</td>
-   <td>{{CompatUnknown}}</td>
-   <td>39</td>
-   <td>{{CompatUnknown}}</td>
-   <td>{{CompatChrome(52)}}</td>
-  </tr>
-  <tr>
-   <td><code>signal</code> and <code>observer</code></td>
-   <td>{{ CompatNo }}</td>
-   <td>{{ CompatNo }}</td>
-   <td>{{ CompatNo }}</td>
-   <td>{{ CompatNo }}<sup>[3]</sup></td>
-   <td>{{ CompatNo }}</td>
-   <td>{{ CompatNo }}</td>
-   <td>{{ CompatNo }}</td>
-   <td>{{ CompatNo }}</td>
-  </tr>
- </tbody>
-</table>
-</div>
-
-<p>[1] API is implemented behind a preference.</p>
-
-<p>[2] <code>fetch()</code> now defined on {{domxref("WindowOrWorkerGlobalScope")}} mixin.</p>
-
-<p>[3] Hidden behind a preference in 55+ Nightly. In about:config, you need to create two new boolean prefs — <code>dom.fetchObserver.enabled</code> and <code>dom.fetchController.enabled</code> — and set the values of both to <code>true</code>.</p>
-
-<h2 id="See_also">See also</h2>
-
-<ul>
- <li><a href="/en-US/docs/Web/API/Fetch_API">Fetch API</a></li>
- <li><a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li>
- <li><a href="/en-US/docs/Web/HTTP/Access_control_CORS">HTTP access control (CORS)</a></li>
- <li><a href="/en-US/docs/Web/HTTP">HTTP</a></li>
-</ul>
diff --git a/files/pt-br/web/api/windoworworkerglobalscope/setinterval/index.html b/files/pt-br/web/api/windoworworkerglobalscope/setinterval/index.html
deleted file mode 100644
index 65dfe562f3..0000000000
--- a/files/pt-br/web/api/windoworworkerglobalscope/setinterval/index.html
+++ /dev/null
@@ -1,629 +0,0 @@
----
-title: WindowOrWorkerGlobalScope.setInterval()
-slug: Web/API/WindowOrWorkerGlobalScope/setInterval
-translation_of: Web/API/WindowOrWorkerGlobalScope/setInterval
----
-<div>{{APIRef("HTML DOM")}}</div>
-
-<div> </div>
-
-<p>O método <strong><code>setInterval() </code></strong>oferecido das interfaces {{domxref("Window")}} e {{domxref("Worker")}}, repetem chamadas de funções or executam trechos de código, com um tempo de espera fixo entre cada chamada. Isso retorna um ID único para o intervalo, podendo remove-lo mais tarde apenas o chamando {{domxref("WindowOrWorkerGlobalScope.clearInterval", "clearInterval()")}}. Este metodo é definido pelo mixin {{domxref("WindowOrWorkerGlobalScope")}}.</p>
-
-<h2 id="Sintaxe.">Sintaxe.</h2>
-
-<pre class="syntaxbox"><em>var intervalID</em> = scope.setInterval(<em>func</em>, <em>delay</em>[, <em>param1</em>, <em>param2</em>, ...]);
-<em>var intervalID</em> = scope.setInterval(<em>code</em>, <em>delay</em>);
-</pre>
-
-<h3 id="Parâmetros">Parâmetros</h3>
-
-<dl>
- <dt><code>func</code></dt>
- <dd>Uma {{jsxref("function")}} para ser executada a cada <code>delay</code> em milisegundos.  Não é passado nenhum parâmetro para a função, e não retorna nenhum valor esperado.</dd>
- <dt><code>code</code></dt>
- <dd>Uma sintaxe opcional permite você incuir uma string ao invés de uma função, no qual é compilado e executada a cada <code>delay</code> em milisegundos. Esta sintaxe <em>não é recomendada </em>pelos mesmos motivos que envolvem riscos de segurança de {{jsxref("eval", "eval()")}}.</dd>
- <dt><code>delay</code></dt>
- <dd>O tempo, em milisegundos (milésimos de segundo), o temporizador deve atrasar entre cada execução de uma especifica função ou código. Se esse parâmetro for menos que 10, um valor de 10 é usado. Note que o atraso pode vir a ser mais longo; veja {{SectionOnPage("/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout", "Reasons for delays longer than specified")}} para exemplos.</dd>
- <dt><code>param1, ..., paramN</code> {{optional_inline}}</dt>
- <dd>Parâmetros adicionais que são passados através da função especificada pela <em>func</em> quando o temporizador expirar.</dd>
-</dl>
-
-<div class="note">
-<p><strong>Note</strong>: Passing additional parameters to <code>setInterval()</code> in the first syntax does not work in Internet Explorer 9 and earlier. If you want to enable this functionality on that browser, you must use a polyfill (see the <a href="#Callback_arguments">Callback arguments</a> section).</p>
-</div>
-
-<h3 id="Return_value">Return value</h3>
-
-<p>O <code>intervalID</code> retornado é um número, non-zero valor que identifica o temporizador criado pela chamada do <code>setInterval()</code>; este valor pode ser passado para {{domxref("WindowOrWorkerGlobalScope.clearInterval()")}} afim de cancelar o timeout.</p>
-
-<p>Isso pode ser útil, estar ciente que o <code>setInterval()</code> e {{domxref("WindowOrWorkerGlobalScope.setTimeout", "setTimeout()")}} compartilham o mesmo grupo de IDs, e que o <code>clearInterval()</code> e {{domxref("WindowOrWorkerGlobalScope.clearTimeout", "clearTimeout()")}} podem tecnicamente serem usados em conjunto. Para deixar claro, contudo, você deve sempre tentar evitar combina-los, afim de evitar confusão na manutenção do seu código.</p>
-
-<div class="note"><strong>Note</strong>: The <code>delay</code> parameter is converted to a signed 32-bit integer. This effectively limits <code>delay</code> to 2147483647 ms, since it's specified as a signed integer in the IDL.</div>
-
-<h2 id="Exemplos">Exemplos</h2>
-
-<h3 id="Exemplo_1_Sintaxe_básica">Exemplo 1: Sintaxe básica</h3>
-
-<p>O seguinte exemplo mostra a sintaxe básica do <code>setInterval()</code></p>
-
-<pre class="brush:js">var intervalID = window.setInterval(myCallback, 500);
-
-function myCallback() {
-  // Your code here
-}
-</pre>
-
-<h3 id="Exemplo_2_Alternando_duas_cores">Exemplo 2: Alternando duas cores</h3>
-
-<p>O seguinte exemplo chama a função <code>flashtext()</code> uma vez por segundo até o botão de parar ser pressionado.</p>
-
-<pre class="brush:html">&lt;!DOCTYPE html&gt;
-&lt;html&gt;
-&lt;head&gt;
-  &lt;meta charset="UTF-8" /&gt;
-  &lt;title&gt;setInterval/clearInterval example&lt;/title&gt;
-
-  &lt;script&gt;
-    var nIntervId;
-
-    function changeColor() {
-      nIntervId = setInterval(flashText, 1000);
-    }
-
-    function flashText() {
-      var oElem = document.getElementById('my_box');
-      oElem.style.color = oElem.style.color == 'red' ? 'blue' : 'red';
-      // oElem.style.color == 'red' ? 'blue' : 'red' is a ternary operator.
-    }
-
-    function stopTextColor() {
-      clearInterval(nIntervId);
-    }
-  &lt;/script&gt;
-&lt;/head&gt;
-
-&lt;body onload="changeColor();"&gt;
-  &lt;div id="my_box"&gt;
-    &lt;p&gt;Hello World&lt;/p&gt;
-  &lt;/div&gt;
-
-  &lt;button onclick="stopTextColor();"&gt;Stop&lt;/button&gt;
-&lt;/body&gt;
-&lt;/html&gt;
-</pre>
-
-<h3 id="Exemplo_3_Simulação_de_máquina_de_escrever">Exemplo 3: Simulação de máquina de escrever</h3>
-
-<p>O seguinte exemplo simula uma máquina de escrever primeiro limpando e digitando lentamente o conteúdo para  <code><a href="https://developer.mozilla.org/en-US/docs/DOM/NodeList">NodeList</a></code> que corresponde a um grupo especificado de seletores.</p>
-
-<pre class="brush:html">&lt;!DOCTYPE html&gt;
-&lt;html&gt;
-&lt;head&gt;
-&lt;meta charset="UTF-8" /&gt;
-&lt;title&gt;JavaScript Typewriter - MDN Example&lt;/title&gt;
-&lt;script&gt;
-  function Typewriter (sSelector, nRate) {
-
-  function clean () {
-    clearInterval(nIntervId);
-    bTyping = false;
-    bStart = true;
-    oCurrent = null;
-    aSheets.length = nIdx = 0;
-  }
-
-  function scroll (oSheet, nPos, bEraseAndStop) {
-    if (!oSheet.hasOwnProperty('parts') || aMap.length &lt; nPos) { return true; }
-
-    var oRel, bExit = false;
-
-    if (aMap.length === nPos) { aMap.push(0); }
-
-    while (aMap[nPos] &lt; oSheet.parts.length) {
-      oRel = oSheet.parts[aMap[nPos]];
-
-      scroll(oRel, nPos + 1, bEraseAndStop) ? aMap[nPos]++ : bExit = true;
-
-      if (bEraseAndStop &amp;&amp; (oRel.ref.nodeType - 1 | 1) === 3 &amp;&amp; oRel.ref.nodeValue) {
-        bExit = true;
-        oCurrent = oRel.ref;
-        sPart = oCurrent.nodeValue;
-        oCurrent.nodeValue = '';
-      }
-
-      oSheet.ref.appendChild(oRel.ref);
-      if (bExit) { return false; }
-    }
-
-    aMap.length--;
-    return true;
-  }
-
-  function typewrite () {
-    if (sPart.length === 0 &amp;&amp; scroll(aSheets[nIdx], 0, true) &amp;&amp; nIdx++ === aSheets.length - 1) { clean(); return; }
-
-    oCurrent.nodeValue += sPart.charAt(0);
-    sPart = sPart.slice(1);
-  }
-
-  function Sheet (oNode) {
-    this.ref = oNode;
-    if (!oNode.hasChildNodes()) { return; }
-    this.parts = Array.prototype.slice.call(oNode.childNodes);
-
-    for (var nChild = 0; nChild &lt; this.parts.length; nChild++) {
-      oNode.removeChild(this.parts[nChild]);
-      this.parts[nChild] = new Sheet(this.parts[nChild]);
-    }
-  }
-
-  var
-    nIntervId, oCurrent = null, bTyping = false, bStart = true,
-    nIdx = 0, sPart = "", aSheets = [], aMap = [];
-
-  this.rate = nRate || 100;
-
-  this.play = function () {
-    if (bTyping) { return; }
-    if (bStart) {
-      var aItems = document.querySelectorAll(sSelector);
-
-      if (aItems.length === 0) { return; }
-      for (var nItem = 0; nItem &lt; aItems.length; nItem++) {
-        aSheets.push(new Sheet(aItems[nItem]));
-        /* Uncomment the following line if you have previously hidden your elements via CSS: */
-        // aItems[nItem].style.visibility = "visible";
-      }
-
-      bStart = false;
-    }
-
-    nIntervId = setInterval(typewrite, this.rate);
-    bTyping = true;
-  };
-
-  this.pause = function () {
-    clearInterval(nIntervId);
-    bTyping = false;
-  };
-
-  this.terminate = function () {
-    oCurrent.nodeValue += sPart;
-    sPart = "";
-    for (nIdx; nIdx &lt; aSheets.length; scroll(aSheets[nIdx++], 0, false));
-    clean();
-  };
-}
-
-/* usage: */
-var oTWExample1 = new Typewriter(/* elements: */ '#article, h1, #info, #copyleft', /* frame rate (optional): */ 15);
-
-/* default frame rate is 100: */
-var oTWExample2 = new Typewriter('#controls');
-
-/* you can also change the frame rate value modifying the "rate" property; for example: */
-// oTWExample2.rate = 150;
-
-onload = function () {
-  oTWExample1.play();
-  oTWExample2.play();
-};
-&lt;/script&gt;
-&lt;style type="text/css"&gt;
-span.intLink, a, a:visited {
-  cursor: pointer;
-  color: #000000;
-  text-decoration: underline;
-}
-
-#info {
-  width: 180px;
-  height: 150px;
-  float: right;
-  background-color: #eeeeff;
-  padding: 4px;
-  overflow: auto;
-  font-size: 12px;
-  margin: 4px;
-  border-radius: 5px;
-  /* visibility: hidden; */
-}
-&lt;/style&gt;
-&lt;/head&gt;
-
-&lt;body&gt;
-
-&lt;p id="copyleft" style="font-style: italic; font-size: 12px; text-align: center;"&gt;CopyLeft 2012 by &lt;a href="https://developer.mozilla.org/" target="_blank"&gt;Mozilla Developer Network&lt;/a&gt;&lt;/p&gt;
-&lt;p id="controls" style="text-align: center;"&gt;[&amp;nbsp;&lt;span class="intLink" onclick="oTWExample1.play();"&gt;Play&lt;/span&gt; | &lt;span class="intLink" onclick="oTWExample1.pause();"&gt;Pause&lt;/span&gt; | &lt;span class="intLink" onclick="oTWExample1.terminate();"&gt;Terminate&lt;/span&gt;&amp;nbsp;]&lt;/p&gt;
-&lt;div id="info"&gt;
-Vivamus blandit massa ut metus mattis in fringilla lectus imperdiet. Proin ac ante a felis ornare vehicula. Fusce pellentesque lacus vitae eros convallis ut mollis magna pellentesque. Pellentesque placerat enim at lacus ultricies vitae facilisis nisi fringilla. In tincidunt tincidunt tincidunt.
-&lt;/div&gt;
-&lt;h1&gt;JavaScript Typewriter&lt;/h1&gt;
-
-&lt;div id="article"&gt;
-&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ultrices dolor ac dolor imperdiet ullamcorper. Suspendisse quam libero, luctus auctor mollis sed, malesuada condimentum magna. Quisque in ante tellus, in placerat est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec a mi magna, quis mattis dolor. Etiam sit amet ligula quis urna auctor imperdiet nec faucibus ante. Mauris vel consectetur dolor. Nunc eget elit eget velit pulvinar fringilla consectetur aliquam purus. Curabitur convallis, justo posuere porta egestas, velit erat ornare tortor, non viverra justo diam eget arcu. Phasellus adipiscing fermentum nibh ac commodo. Nam turpis nunc, suscipit a hendrerit vitae, volutpat non ipsum.&lt;/p&gt;
-&lt;form&gt;
-&lt;p&gt;Phasellus ac nisl lorem: &lt;input type="text" /&gt;&lt;br /&gt;
-&lt;textarea style="width: 400px; height: 200px;"&gt;Nullam commodo suscipit lacus non aliquet. Phasellus ac nisl lorem, sed facilisis ligula. Nam cursus lobortis placerat. Sed dui nisi, elementum eu sodales ac, placerat sit amet mauris. Pellentesque dapibus tellus ut ipsum aliquam eu auctor dui vehicula. Quisque ultrices laoreet erat, at ultrices tortor sodales non. Sed venenatis luctus magna, ultricies ultricies nunc fringilla eget. Praesent scelerisque urna vitae nibh tristique varius consequat neque luctus. Integer ornare, erat a porta tempus, velit justo fermentum elit, a fermentum metus nisi eu ipsum. Vivamus eget augue vel dui viverra adipiscing congue ut massa. Praesent vitae eros erat, pulvinar laoreet magna. Maecenas vestibulum mollis nunc in posuere. Pellentesque sit amet metus a turpis lobortis tempor eu vel tortor. Cras sodales eleifend interdum.&lt;/textarea&gt;&lt;/p&gt;
-&lt;p&gt;&lt;input type="submit" value="Send" /&gt;
-&lt;/form&gt;
-&lt;p&gt;Duis lobortis sapien quis nisl luctus porttitor. In tempor semper libero, eu tincidunt dolor eleifend sit amet. Ut nec velit in dolor tincidunt rhoncus non non diam. Morbi auctor ornare orci, non euismod felis gravida nec. Curabitur elementum nisi a eros rutrum nec blandit diam placerat. Aenean tincidunt risus ut nisi consectetur cursus. Ut vitae quam elit. Donec dignissim est in quam tempor consequat. Aliquam aliquam diam non felis convallis suscipit. Nulla facilisi. Donec lacus risus, dignissim et fringilla et, egestas vel eros. Duis malesuada accumsan dui, at fringilla mauris bibStartum quis. Cras adipiscing ultricies fermentum. Praesent bibStartum condimentum feugiat.&lt;/p&gt;
-&lt;p&gt;Nam faucibus, ligula eu fringilla pulvinar, lectus tellus iaculis nunc, vitae scelerisque metus leo non metus. Proin mattis lobortis lobortis. Quisque accumsan faucibus erat, vel varius tortor ultricies ac. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec libero nunc. Nullam tortor nunc, elementum a consectetur et, ultrices eu orci. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a nisl eu sem vehicula egestas.&lt;/p&gt;
-&lt;/div&gt;
-&lt;/body&gt;
-&lt;/html&gt;</pre>
-
-<p><a href="/files/3997/typewriter.html">View this demo in action</a>. See also: <a href="/en-US/docs/DOM/window.clearInterval"><code>clearInterval()</code></a>.</p>
-
-<h2 id="Argumentos_callback">Argumentos callback</h2>
-
-<p>Como já foi discutido, Internet Explorer 9 e versões anteriores não suportam passar argumentos para a função callback em ambos <code>setTimeout()</code> ou <code>setInterval()</code>. O seguinte código <strong>IE-specific</strong> demonstra um método para superar esta limitação. Para usar, apenas adicione o seguinte código no topo do seu script.</p>
-
-<pre class="brush:js">/*\
-|*|
-|*|  IE-specific polyfill that enables the passage of arbitrary arguments to the
-|*|  callback functions of javascript timers (HTML5 standard syntax).
-|*|
-|*|  https://developer.mozilla.org/en-US/docs/Web/API/window.setInterval
-|*|  https://developer.mozilla.org/User:fusionchess
-|*|
-|*|  Syntax:
-|*|  var timeoutID = window.setTimeout(func, delay[, param1, param2, ...]);
-|*|  var timeoutID = window.setTimeout(code, delay);
-|*|  var intervalID = window.setInterval(func, delay[, param1, param2, ...]);
-|*|  var intervalID = window.setInterval(code, delay);
-|*|
-\*/
-
-if (document.all &amp;&amp; !window.setTimeout.isPolyfill) {
-  var __nativeST__ = window.setTimeout;
-  window.setTimeout = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) {
-    var aArgs = Array.prototype.slice.call(arguments, 2);
-    return __nativeST__(vCallback instanceof Function ? function () {
-      vCallback.apply(null, aArgs);
-    } : vCallback, nDelay);
-  };
-  window.setTimeout.isPolyfill = true;
-}
-
-if (document.all &amp;&amp; !window.setInterval.isPolyfill) {
-  var __nativeSI__ = window.setInterval;
-  window.setInterval = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) {
-    var aArgs = Array.prototype.slice.call(arguments, 2);
-    return __nativeSI__(vCallback instanceof Function ? function () {
-      vCallback.apply(null, aArgs);
-    } : vCallback, nDelay);
-  };
-  window.setInterval.isPolyfill = true;
-}
-</pre>
-
-<p>Outra possibilidade é uso uma função anônima para chama o callback, apesar de que esta solução seja um pouco mais pesada. Exemplo:</p>
-
-<pre class="brush:js">var intervalID = setInterval(function() { myFunc('one', 'two', 'three'); }, 1000);</pre>
-
-<p>Outra possibilidade é usar o <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind">function's bind</a>. Exemplo:</p>
-
-<pre class="brush:js">var intervalID = setInterval(function(arg1) {}.bind(undefined, 10), 1000);</pre>
-
-<p>{{h3_gecko_minversion("Inactive tabs", "5.0")}}</p>
-
-<p>Starting in Gecko 5.0 {{geckoRelease("5.0")}}, intervals are clamped to fire no more often than once per second in inactive tabs.</p>
-
-<h2 id="O_problema_do_this">O problema do "<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this"><code>this</code></a>"</h2>
-
-<p>Quando você passa um método para <code>setInterval()</code> ou qualquer outra função, ela é chamada com o valor do <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this">this</a></code> errado. Este problema é explicado em detalhes em <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this#As_an_object_method">JavaScript reference</a>.</p>
-
-<h3 id="Explicação">Explicação</h3>
-
-<p>O código executado pelo <code>setInterval()</code> roda em um contexto de execução separado da função que foi chamada. Como uma consequência, o <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this">this</a></code> da função chamada, é setado como o objeto <code>window</code> (ou <code>global</code>), esse não é o mesmo valor do <code>this</code> para a função chamada em setTimeout. veja o seguinte exemplo (que usa <code>setTimeout()</code> ao invés de <code>setInterval()</code> - o problema segue para ambos os temporizadores)</p>
-
-<pre class="brush:js">myArray = ['zero', 'one', 'two'];
-
-myArray.myMethod = function (sProperty) {
-    alert(arguments.length &gt; 0 ? this[sProperty] : this);
-};
-
-myArray.myMethod(); // prints "zero,one,two"
-myArray.myMethod(1); // prints "one"
-setTimeout(myArray.myMethod, 1000); // prints "[object Window]" after 1 second
-setTimeout(myArray.myMethod, 1500, "1"); // prints "undefined" after 1,5 seconds
-// passing the 'this' object with .call won't work
-// because this will change the value of this inside setTimeout itself
-// while we want to change the value of this inside myArray.myMethod
-// in fact, it will be an error because setTimeout code expects this to be the window object:
-setTimeout.call(myArray, myArray.myMethod, 2000); // error: "NS_ERROR_XPC_BAD_OP_ON_WN_PROTO: Illegal operation on WrappedNative prototype object"
-setTimeout.call(myArray, myArray.myMethod, 2500, 2); // same error
-</pre>
-
-<p> </p>
-
-<p>Como você pode ver, não há maneiras de passar o objeto <code>this</code> para a função callback.</p>
-
-<p> </p>
-
-<h3 id="Uma_possível_solução">Uma possível solução</h3>
-
-<p>Um possível caminho para resolver o problema do <code>this</code>, é sobreescrever as duas funções globais nativas <code>setTimeout()</code> ou <code>setInterval()</code> com duas <em>non-native</em> que permitem sua invocação através do método <code><a href="https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Function/call">Function.prototype.call</a></code>. O seguinte exemplo mostra a possível substituição.</p>
-
-<pre class="brush:js">// Enable the passage of the 'this' object through the JavaScript timers
-
-var __nativeST__ = window.setTimeout, __nativeSI__ = window.setInterval;
-
-window.setTimeout = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) {
-  var oThis = this, aArgs = Array.prototype.slice.call(arguments, 2);
-  return __nativeST__(vCallback instanceof Function ? function () {
-    vCallback.apply(oThis, aArgs);
-  } : vCallback, nDelay);
-};
-
-window.setInterval = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) {
-  var oThis = this, aArgs = Array.prototype.slice.call(arguments, 2);
-  return __nativeSI__(vCallback instanceof Function ? function () {
-    vCallback.apply(oThis, aArgs);
-  } : vCallback, nDelay);
-};</pre>
-
-<div class="note">These two replacements also enable the HTML5 standard passage of arbitrary arguments to the callback functions of timers in IE. So they can be used as <em>non-standard-compliant</em> polyfills also. See the <a href="#Callback_arguments">callback arguments paragraph</a> for a <em>standard-compliant</em> polyfill.</div>
-
-<p>Teste da nova implementação:</p>
-
-<pre class="brush:js">myArray = ['zero', 'one', 'two'];
-
-myArray.myMethod = function (sProperty) {
-    alert(arguments.length &gt; 0 ? this[sProperty] : this);
-};
-
-setTimeout(alert, 1500, 'Hello world!'); // the standard use of setTimeout and setInterval is preserved, but...
-setTimeout.call(myArray, myArray.myMethod, 2000); // prints "zero,one,two" after 2 seconds
-setTimeout.call(myArray, myArray.myMethod, 2500, 2); // prints "two" after 2,5 seconds
-</pre>
-
-<p>Outra, mais complexa, solução para o problema do <code>this</code> é <a href="https://developer.mozilla.org/pt-BR/docs/Web/API/WindowOrWorkerGlobalScope/setInterval$edit#A_little_framework">the following framework</a>.</p>
-
-<div class="note">JavaScript 1.8.5 introduces the <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind">Function.prototype.bind()</a></code> method, which lets you specify the value that should be used as <code>this</code> for all calls to a given function. This lets you easily bypass problems where it's unclear what this will be, depending on the context from which your function was called. Also, ES2015 supports <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions">arrow functions</a>, with lexical this allowing us to write setInterval( () =&gt; this.myMethod) if we're inside myArray method.</div>
-
-<h2 id="MiniDaemon_-_A_framework_for_managing_timers">MiniDaemon - A framework for managing timers</h2>
-
-<p>In pages requiring many timers, it can often be difficult to keep track of all of the running timer events. One approach to solving this problem is to store information about the state of a timer in an object. Following is a minimal example of such an abstraction. The constructor architecture explicitly avoids the use of closures. It also offers an alternative way to pass the <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this"><code>this</code></a> object to the callback function (see <a href="#The_.22this.22_problem">The "this" problem</a> for details). The following code is also <a href="https://github.com/madmurphy/minidaemon.js">available on GitHub</a>.</p>
-
-<div class="note">For a more complex but still modular version of it (<code><em>Daemon</em></code>) see <a href="/en-US/Add-ons/Code_snippets/Timers/Daemons">JavaScript Daemons Management</a>. This more complex version is nothing but a big and scalable collection of methods for the <code><em>Daemon</em></code> constructor. However, the <code><em>Daemon</em></code> constructor itself is nothing but a clone of <code><em>MiniDaemon</em></code> with an added support for <em>init</em> and <em>onstart</em> functions declarable during the instantiation of the <code><em>daemon</em></code>. <strong>So the <code><em>MiniDaemon</em></code> framework remains the recommended way for simple animations</strong>, because <code><em>Daemon</em></code> without its collection of methods is essentially a clone of it.</div>
-
-<h3 id="minidaemon.js">minidaemon.js</h3>
-
-<pre class="brush:js">/*\
-|*|
-|*|  :: MiniDaemon ::
-|*|
-|*|  Revision #2 - September 26, 2014
-|*|
-|*|  https://developer.mozilla.org/en-US/docs/Web/API/window.setInterval
-|*|  https://developer.mozilla.org/User:fusionchess
-|*|  https://github.com/madmurphy/minidaemon.js
-|*|
-|*|  This framework is released under the GNU Lesser General Public License, version 3 or later.
-|*|  http://www.gnu.org/licenses/lgpl-3.0.html
-|*|
-\*/
-
-function MiniDaemon (oOwner, fTask, nRate, nLen) {
-  if (!(this &amp;&amp; this instanceof MiniDaemon)) { return; }
-  if (arguments.length &lt; 2) { throw new TypeError('MiniDaemon - not enough arguments'); }
-  if (oOwner) { this.owner = oOwner; }
-  this.task = fTask;
-  if (isFinite(nRate) &amp;&amp; nRate &gt; 0) { this.rate = Math.floor(nRate); }
-  if (nLen &gt; 0) { this.length = Math.floor(nLen); }
-}
-
-MiniDaemon.prototype.owner = null;
-MiniDaemon.prototype.task = null;
-MiniDaemon.prototype.rate = 100;
-MiniDaemon.prototype.length = Infinity;
-
-  /* These properties should be read-only */
-
-MiniDaemon.prototype.SESSION = -1;
-MiniDaemon.prototype.INDEX = 0;
-MiniDaemon.prototype.PAUSED = true;
-MiniDaemon.prototype.BACKW = true;
-
-  /* Global methods */
-
-MiniDaemon.forceCall = function (oDmn) {
-  oDmn.INDEX += oDmn.BACKW ? -1 : 1;
-  if (oDmn.task.call(oDmn.owner, oDmn.INDEX, oDmn.length, oDmn.BACKW) === false || oDmn.isAtEnd()) { oDmn.pause(); return false; }
-  return true;
-};
-
-  /* Instances methods */
-
-MiniDaemon.prototype.isAtEnd = function () {
-  return this.BACKW ? isFinite(this.length) &amp;&amp; this.INDEX &lt; 1 : this.INDEX + 1 &gt; this.length;
-};
-
-MiniDaemon.prototype.synchronize = function () {
-  if (this.PAUSED) { return; }
-  clearInterval(this.SESSION);
-  this.SESSION = setInterval(MiniDaemon.forceCall, this.rate, this);
-};
-
-MiniDaemon.prototype.pause = function () {
-  clearInterval(this.SESSION);
-  this.PAUSED = true;
-};
-
-MiniDaemon.prototype.start = function (bReverse) {
-  var bBackw = Boolean(bReverse);
-  if (this.BACKW === bBackw &amp;&amp; (this.isAtEnd() || !this.PAUSED)) { return; }
-  this.BACKW = bBackw;
-  this.PAUSED = false;
-  this.synchronize();
-};
-</pre>
-
-<div class="note">MiniDaemon passes arguments to the callback function. If you want to work on it with browsers that natively do not support this feature, use one of the methods proposed above.</div>
-
-<h3 id="Syntax">Syntax</h3>
-
-<p><code>var myDaemon = new MiniDaemon(<em>thisObject</em>, <em>callback</em>[</code><code>, <em>rate</em></code><code>[, <em>length</em>]]);</code></p>
-
-<h3 id="Description">Description</h3>
-
-<p>Returns a JavaScript <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object"><code>Object</code></a> containing all information needed by an animation (like the <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this"><code>this</code></a> object, the callback function, the length, the frame-rate).</p>
-
-<h4 id="Parameters">Parameters</h4>
-
-<dl>
- <dt><code>thisObject</code></dt>
- <dd>The <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this"><code>this</code></a> object on which the <em>callback</em> function is called. It can be an <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object"><code>object</code></a> or <code>null</code>.</dd>
- <dt><code>callback</code></dt>
- <dd>The function that is repeatedly invoked . <strong>It is called with three parameters</strong>: <em>index</em> (the iterative index of each invocation), <em>length</em> (the number of total invocations assigned to the <em>daemon</em> - finite or <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Infinity"><code>Infinity</code></a>) and <em>backwards</em> (a boolean expressing whether the <em>index</em> is increasing or decreasing). It is something like <em>callback</em>.call(<em>thisObject</em>, <em>index</em>, <em>length</em>, <em>backwards</em>). <strong>If the callback function returns a <code>false</code> value the <em>daemon</em> is paused</strong>.</dd>
- <dt><code>rate (optional)</code></dt>
- <dd>The time lapse (in number of milliseconds) between each invocation. The default value is 100.</dd>
- <dt><code>length (optional)</code></dt>
- <dd>The total number of invocations. It can be a positive integer or <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Infinity"><code>Infinity</code></a>. The default value is <code>Infinity</code>.</dd>
-</dl>
-
-<h4 id="MiniDaemon_instances_properties"><code>MiniDaemon</code> instances properties</h4>
-
-<dl>
- <dt><code>myDaemon.owner</code></dt>
- <dd>The <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this"><code>this</code></a> object on which is executed the daemon (read/write). It can be an <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object"><code>object</code></a> or <code>null</code>.</dd>
- <dt><code>myDaemon.task</code></dt>
- <dd>The function that is repeatedly invoked (read/write). It is called with three arguments: <em>index</em> (the iterative index of each invocation), <em>length</em> (the number of total invocations assigned to the daemon - finite or <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Infinity"><code>Infinity</code></a>) and backwards (a boolean expressing whether the <em>index</em> is decreasing or not) – see above. If the <code>myDaemon.task</code> function returns a <code>false</code> value the <em>daemon</em> is paused.</dd>
- <dt><code>myDaemon.rate</code></dt>
- <dd>The time lapse (in number of milliseconds) between each invocation (read/write).</dd>
- <dt><code>myDaemon.length</code></dt>
- <dd>The total number of invocations. It can be a positive integer or <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Infinity"><code>Infinity</code></a> (read/write).</dd>
-</dl>
-
-<h4 id="MiniDaemon_instances_methods"><code>MiniDaemon</code> instances methods</h4>
-
-<dl>
- <dt><code>myDaemon.isAtEnd()</code></dt>
- <dd>Returns a boolean expressing whether the <em>daemon</em> is at the start/end position or not.</dd>
- <dt><code>myDaemon.synchronize()</code></dt>
- <dd>Synchronize the timer of a started daemon with the time of its invocation.</dd>
- <dt><code>myDaemon.pause()</code></dt>
- <dd>Pauses the daemon.</dd>
- <dt><code>myDaemon.start([<em>reverse</em>])</code></dt>
- <dd>Starts the daemon forward (<em>index</em> of each invocation increasing) or backwards (<em>index</em> decreasing).</dd>
-</dl>
-
-<h4 id="MiniDaemon_global_object_methods"><code>MiniDaemon</code> global object methods</h4>
-
-<dl>
- <dt><code>MiniDaemon.forceCall(<em>minidaemon</em>)</code></dt>
- <dd>Forces a single callback to the <code><em>minidaemon</em>.task</code> function regardless of the fact that the end has been reached or not. In any case the internal <code>INDEX</code> property is increased/decreased (depending on the actual direction of the process).</dd>
-</dl>
-
-<h3 id="Example_usage">Example usage</h3>
-
-<p>Your HTML page:</p>
-
-<pre class="brush:html">&lt;!DOCTYPE html&gt;
-&lt;html&gt;
-&lt;head&gt;
-  &lt;meta charset="UTF-8" /&gt;
-  &lt;title&gt;MiniDaemin Example - MDN&lt;/title&gt;
-  &lt;script type="text/javascript" src="minidaemon.js"&gt;&lt;/script&gt;
-  &lt;style type="text/css"&gt;
-    #sample_div {
-      visibility: hidden;
-    }
-  &lt;/style&gt;
-&lt;/head&gt;
-
-&lt;body&gt;
-  &lt;p&gt;
-    &lt;input type="button" onclick="fadeInOut.start(false /* optional */);" value="fade in" /&gt;
-    &lt;input type="button" onclick="fadeInOut.start(true);" value="fade out"&gt;
-    &lt;input type="button" onclick="fadeInOut.pause();" value="pause" /&gt;
-  &lt;/p&gt;
-
-  &lt;div id="sample_div"&gt;Some text here&lt;/div&gt;
-
-  &lt;script type="text/javascript"&gt;
-    function opacity (nIndex, nLength, bBackwards) {
-      this.style.opacity = nIndex / nLength;
-      if (bBackwards ? nIndex === 0 : nIndex === 1) {
-        this.style.visibility = bBackwards ? 'hidden' : 'visible';
-      }
-    }
-
-    var fadeInOut = new MiniDaemon(document.getElementById('sample_div'), opacity, 300, 8);
-  &lt;/script&gt;
-&lt;/body&gt;
-&lt;/html&gt;</pre>
-
-<p><a href="/files/3995/minidaemon_example.html" title="MiniDaemon Example">View this example in action</a></p>
-
-<h2 id="Notes">Notes</h2>
-
-<p>The <code>setInterval()</code> function is commonly used to set a delay for functions that are executed again and again, such as animations.</p>
-
-<p>You can cancel the interval using {{domxref("WindowOrWorkerGlobalScope.clearInterval()")}}.</p>
-
-<p>If you wish to have your function called <em>once</em> after the specified delay, use {{domxref("WindowOrWorkerGlobalScope.setTimeout()")}}.</p>
-
-<h3 id="Ensure_that_execution_duration_is_shorter_than_interval_frequency">Ensure that execution duration is shorter than interval frequency</h3>
-
-<p>If there is a possibility that your logic could take longer to execute than the interval time, it is recommended that you recursively call a named function using {{domxref("WindowOrWorkerGlobalScope.setTimeout")}}. For example, if using <code>setInterval</code> to poll a remote server every 5 seconds, network latency, an unresponsive server, and a host of other issues could prevent the request from completing in its allotted time. As such, you may find yourself with queued up XHR requests that won't necessarily return in order.</p>
-
-<p>In these cases, a recursive <code>setTimeout()</code> pattern is preferred:</p>
-
-<pre class="brush:js">(function loop(){
-   setTimeout(function() {
-      // Your logic here
-
-      loop();
-  }, delay);
-})();
-</pre>
-
-<p>In the above snippet, a named function <code>loop()</code> is declared and is immediately executed. <code>loop()</code> is recursively called inside <code>setTimeout()</code> after the logic has completed executing. While this pattern does not guarantee execution on a fixed interval, it does guarantee that the previous interval has completed before recursing.</p>
-
-<h3 id="Throttling_of_intervals">Throttling of intervals</h3>
-
-<p><code>setInterval()</code> is subject to the same throttling restrictions in Firefox as {{domxref("WindowOrWorkerGlobalScope.setTimeout","setTimeout()")}}; see <a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout#Reasons_for_delays_longer_than_specified">Reasons for delays longer than specified</a>.</p>
-
-<h2 id="Specifications">Specifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th>Specification</th>
-   <th>Status</th>
-   <th>Comment</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', 'webappapis.html#dom-setinterval', 'WindowOrWorkerGlobalScope.setInterval()')}}</td>
-   <td>{{Spec2("HTML WHATWG")}}</td>
-   <td>Method moved to the <code>WindowOrWorkerGlobalScope</code> mixin in the latest spec.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName("HTML WHATWG", "webappapis.html#dom-setinterval", "WindowTimers.setInterval()")}}</td>
-   <td>{{Spec2("HTML WHATWG")}}</td>
-   <td>Initial definition (DOM Level 0)</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility">Compatibilidade com navegadores</h2>
-
-<div>
-
-
-<p>{{Compat("api.WindowOrWorkerGlobalScope.setInterval")}}</p>
-</div>
-
-<h2 id="See_also">See also</h2>
-
-<ul>
- <li><a href="/en-US/Add-ons/Code_snippets/Timers">JavaScript timers</a></li>
- <li>{{domxref("WindowOrWorkerGlobalScope.setTimeout")}}</li>
- <li>{{domxref("WindowOrWorkerGlobalScope.clearTimeout")}}</li>
- <li>{{domxref("WindowOrWorkerGlobalScope.clearInterval")}}</li>
- <li>{{domxref("window.requestAnimationFrame")}}</li>
- <li><a href="/en-US/Add-ons/Code_snippets/Timers/Daemons"><em>Daemons</em> management</a></li>
-</ul>
diff --git a/files/pt-br/web/css/@media/aspect-ratio/index.html b/files/pt-br/web/css/@media/aspect-ratio/index.html
index b40690add2..5889b66713 100644
--- a/files/pt-br/web/css/@media/aspect-ratio/index.html
+++ b/files/pt-br/web/css/@media/aspect-ratio/index.html
@@ -13,7 +13,7 @@ translation_of: Web/CSS/@media/aspect-ratio
 ---
 <div>{{cssref}}</div>
 
-<p>A  <a href="https://wiki.developer.mozilla.org/pt-BR/docs/Web/Guide/CSS/CSS_Media_queries#Caracter%C3%ADsticas_de_m%C3%ADdia">característica de mídia</a> <a href="https://developer.mozilla.org/pt-BR/docs/Web/CSS">CSS</a> <strong><code>aspect-ratio</code></strong> pode ser utilizada para testar a taxa de aspecto de sua {{glossary("viewport")}}.</p>
+<p>A  <a href="/pt-BR/docs/Web/Guide/CSS/CSS_Media_queries#Caracter%C3%ADsticas_de_m%C3%ADdia">característica de mídia</a> <a href="https://developer.mozilla.org/pt-BR/docs/Web/CSS">CSS</a> <strong><code>aspect-ratio</code></strong> pode ser utilizada para testar a taxa de aspecto de sua {{glossary("viewport")}}.</p>
 
 <h2 id="Sintaxe">Sintaxe</h2>
 
diff --git a/files/pt-br/web/css/_colon_root/index.html b/files/pt-br/web/css/_colon_root/index.html
index 523b54d1e0..e7b4dc0bba 100644
--- a/files/pt-br/web/css/_colon_root/index.html
+++ b/files/pt-br/web/css/_colon_root/index.html
@@ -7,7 +7,7 @@ translation_of: 'Web/CSS/:root'
 
 <h2 id="Sumário">Sumário</h2>
 
-<p>A <a href="/en-US/docs/Web/CSS/Pseudo-classes">pseudo-classe CSS</a>  <strong><code>:root</code></strong> se equipara à raíz de uma árvore, que por sua vez representa o documento. Aplicado ao HTML, <code>:root</code> representa o elemento {{HTMLElement("html")}}  e é identico ao seletor html, exceto que sua <a href="https://wiki.developer.mozilla.org/pt-BR/docs/Web/CSS/Specificity">especificidade</a> é mais alta.</p>
+<p>A <a href="/en-US/docs/Web/CSS/Pseudo-classes">pseudo-classe CSS</a>  <strong><code>:root</code></strong> se equipara à raíz de uma árvore, que por sua vez representa o documento. Aplicado ao HTML, <code>:root</code> representa o elemento {{HTMLElement("html")}}  e é identico ao seletor html, exceto que sua <a href="/pt-BR/docs/Web/CSS/Specificity">especificidade</a> é mais alta.</p>
 
 <h2 id="Sintaxe">Sintaxe</h2>
 
diff --git a/files/pt-br/web/css/align-content/index.html b/files/pt-br/web/css/align-content/index.html
index 8496933d41..b0f512aefb 100644
--- a/files/pt-br/web/css/align-content/index.html
+++ b/files/pt-br/web/css/align-content/index.html
@@ -3,7 +3,7 @@ title: align-content
 slug: Web/CSS/align-content
 translation_of: Web/CSS/align-content
 ---
-<p>A propriedade <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS">CSS</a> <strong><code>align-content</code></strong> define a distribuição entre e ao redor dos items do conteúdo do eixo transversal de uma <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">flexbox</a> ou do eixo de bloco de uma <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout">grid</a>.</p>
+<p>A propriedade <a href="/en-US/docs/Web/CSS">CSS</a> <strong><code>align-content</code></strong> define a distribuição entre e ao redor dos items do conteúdo do eixo transversal de uma <a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">flexbox</a> ou do eixo de bloco de uma <a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">grid</a>.</p>
 
 <p>O exemplo interativo abaixo use Grid Layout para demonstrar alguns dos valores dessa propriedade.</p>
 
diff --git a/files/pt-br/web/css/animation-fill-mode/index.html b/files/pt-br/web/css/animation-fill-mode/index.html
index c12c7d0e3b..c752ed2957 100644
--- a/files/pt-br/web/css/animation-fill-mode/index.html
+++ b/files/pt-br/web/css/animation-fill-mode/index.html
@@ -5,7 +5,7 @@ translation_of: Web/CSS/animation-fill-mode
 ---
 <div>{{CSSRef}}</div>
 
-<p>A propriedade CSS <strong><code>animation-fill-mode</code></strong> define como uma animação <a href="https://wiki.developer.mozilla.org/en/CSS">CSS</a> aplica estilos ao seu destino antes e depois de sua execução.</p>
+<p>A propriedade CSS <strong><code>animation-fill-mode</code></strong> define como uma animação <a href="/en-US/docs/Web/CSS">CSS</a> aplica estilos ao seu destino antes e depois de sua execução.</p>
 
 <div>{{EmbedInteractiveExample("pages/css/animation-fill-mode.html")}}</div>
 
diff --git a/files/pt-br/web/css/class_selectors/index.html b/files/pt-br/web/css/class_selectors/index.html
index b98a793b0b..72a381fdb1 100644
--- a/files/pt-br/web/css/class_selectors/index.html
+++ b/files/pt-br/web/css/class_selectors/index.html
@@ -8,7 +8,7 @@ tags:
   - Seletores
 translation_of: Web/CSS/Class_selectors
 ---
-<p>O <strong>seletor de classes</strong> <a href="/en-US/docs/CSS">CSS</a> corresponde aos elementos com base no conteúdo de seus atributos <code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#attr-class">class</a>.</code></p>
+<p>O <strong>seletor de classes</strong> <a href="/en-US/docs/CSS">CSS</a> corresponde aos elementos com base no conteúdo de seus atributos <code><a href="/en-US/docs/Web/HTML/Global_attributes#attr-class">class</a>.</code></p>
 
 <pre class="brush: css no-line-numbers notranslate">/* Todos os elementos com class="espaçoso" */
 .espaçoso {
diff --git a/files/pt-br/web/css/css_background_and_borders/border-image_generator/index.html b/files/pt-br/web/css/css_background_and_borders/border-image_generator/index.html
deleted file mode 100644
index 019e1d81cf..0000000000
--- a/files/pt-br/web/css/css_background_and_borders/border-image_generator/index.html
+++ /dev/null
@@ -1,2628 +0,0 @@
----
-title: Gerador de Border-image
-slug: Web/CSS/CSS_Background_and_Borders/Border-image_generator
-tags:
-  - Alternativas CSS
-translation_of: Web/CSS/CSS_Background_and_Borders/Border-image_generator
-original_slug: Web/CSS/Tools/Border-image_generator
----
-<p><span class="short_text" id="result_box" lang="pt"><span class="hps">Esta ferramenta</span> <span class="hps">pode</span> <span class="hps">ser</span> <span class="hps">utilizada</span> <span class="hps">para gerar o valor </span></span>{{cssxref("border-image")}} em CSS3.</p>
-
-<div class="hidden">
-<h2 id="Border_Image_Generator" name="Border_Image_Generator">Border Image Generator</h2>
-
-<h3 id="HTML_Content">HTML Content</h3>
-
-<pre class="brush: html">    &lt;div id="container"&gt;
-
-        &lt;div id="gallery"&gt;
-            &lt;div id="image-gallery"&gt;
-                &lt;img class="image" src="https://mdn.mozillademos.org/files/6007/border-image-1.png" data-stateID="border1"/&gt;
-                &lt;img class="image" src="https://mdn.mozillademos.org/files/6009/border-image-2.png" data-stateID="border2"/&gt;
-                &lt;img class="image" src="https://mdn.mozillademos.org/files/6011/border-image-3.png" data-stateID="border3"/&gt;
-                &lt;img class="image" src="https://mdn.mozillademos.org/files/6013/border-image-4.png" data-stateID="border4"/&gt;
-                &lt;img class="image" src="https://mdn.mozillademos.org/files/6015/border-image-5.png" data-stateID="border5"/&gt;
-                &lt;img class="image" src="https://mdn.mozillademos.org/files/6017/border-image-6.svg" data-stateID="border6"/&gt;
-            &lt;/div&gt;
-        &lt;/div&gt;
-
-        &lt;div id="load-actions" class="group section"&gt;
-            &lt;div id="toggle-gallery" data-action="hide"&gt; &lt;/div&gt;
-            &lt;div id="load-image" class="button"&gt; Upload image &lt;/div&gt;
-            &lt;input id="remote-url" type="text" placeholder="Load an image from URL"/&gt;
-            &lt;div id="load-remote" class="button"&gt; &lt;/div&gt;
-        &lt;/div&gt;
-
-        &lt;div id="general-controls" class="group section"&gt;
-            &lt;div class="name"&gt; Control Box &lt;/div&gt;
-            &lt;div class="separator"&gt;&lt;/div&gt;
-            &lt;div class="property"&gt;
-                &lt;div class="name"&gt;scale&lt;/div&gt;
-                &lt;div class="ui-input-slider" data-topic="scale"
-                    data-unit="%" data-max="300" data-sensivity="10"&gt;
-                &lt;/div&gt;
-            &lt;/div&gt;
-            &lt;div class="separator"&gt;&lt;/div&gt;
-            &lt;div class="property"&gt;
-                &lt;div class="name"&gt;draggable&lt;/div&gt;
-                &lt;div class="ui-checkbox" data-topic='drag-subject'&gt;&lt;/div&gt;
-            &lt;/div&gt;
-            &lt;div class="property right"&gt;
-                &lt;div class="name"&gt;section height&lt;/div&gt;
-                &lt;div class="ui-input-slider" data-topic="preview-area-height"
-                    data-min="400" data-max="1000"&gt;
-                &lt;/div&gt;
-            &lt;/div&gt;
-        &lt;/div&gt;
-
-        &lt;div id="preview_section" class="group section"&gt;
-            &lt;div id="subject"&gt;
-                &lt;div class="guideline" data-axis="Y" data-topic="slice-top"&gt;&lt;/div&gt;
-                &lt;div class="guideline" data-axis="X" data-topic="slice-right"&gt;&lt;/div&gt;
-                &lt;div class="guideline" data-axis="Y" data-topic="slice-bottom"&gt;&lt;/div&gt;
-                &lt;div class="guideline" data-axis="X" data-topic="slice-left"&gt;&lt;/div&gt;
-            &lt;/div&gt;
-            &lt;div id="preview"&gt; &lt;/div&gt;
-        &lt;/div&gt;
-
-        &lt;!-- controls --&gt;
-        &lt;div id="controls" class="group section"&gt;
-
-            &lt;!-- border-image-slice --&gt;
-            &lt;div id="border-slice-control" class="category"&gt;
-                &lt;div class="title"&gt; border-image-slice &lt;/div&gt;
-                &lt;div class="property"&gt;
-                    &lt;div class="name"&gt;fill&lt;/div&gt;
-                    &lt;div class="ui-checkbox" data-topic='slice-fill'&gt;&lt;/div&gt;
-                &lt;/div&gt;
-            &lt;/div&gt;
-
-            &lt;!-- border-image-width --&gt;
-            &lt;div id="border-width-control" class="category"&gt;
-                &lt;div class="title"&gt; border-image-width &lt;/div&gt;
-            &lt;/div&gt;
-
-            &lt;!-- border-image-outset --&gt;
-            &lt;div id="border-outset-control" class="category"&gt;
-                &lt;div class="title"&gt; border-image-outset &lt;/div&gt;
-            &lt;/div&gt;
-
-            &lt;!-- other-settings --&gt;
-            &lt;div id="aditional-properties" class="category"&gt;
-                &lt;div class="title"&gt; aditional-properties &lt;/div&gt;
-                &lt;div class="property"&gt;
-                    &lt;div class="name"&gt; repeat-x &lt;/div&gt;
-                    &lt;div class="ui-dropdown border-repeat" data-topic="image-repeat-X" data-selected="2"&gt;
-                        &lt;div data-value="0"&gt;repeat&lt;/div&gt;
-                        &lt;div data-value="0"&gt;stretch&lt;/div&gt;
-                        &lt;div data-value="0"&gt;round&lt;/div&gt;
-                    &lt;/div&gt;
-                &lt;/div&gt;
-                &lt;div class="property"&gt;
-                    &lt;div class="name"&gt; repeat-y &lt;/div&gt;
-                    &lt;div class="ui-dropdown border-repeat" data-topic="image-repeat-Y" data-selected="2"&gt;
-                        &lt;div data-value="1"&gt;repeat&lt;/div&gt;
-                        &lt;div data-value="1"&gt;stretch&lt;/div&gt;
-                        &lt;div data-value="1"&gt;round&lt;/div&gt;
-                    &lt;/div&gt;
-                &lt;/div&gt;
-                &lt;div class="property"&gt;
-                    &lt;div class="ui-input-slider" data-topic="font-size" data-info="em size"
-                        data-unit="px" data-value="12" data-sensivity="3"&gt;
-                    &lt;/div&gt;
-                &lt;/div&gt;
-
-                &lt;div class="property"&gt;
-                    &lt;div class="ui-input-slider" data-topic="preview-width" data-info="width"
-                         data-unit=" px" data-min="10" data-max="10000" data-sensivity="3"&gt;&lt;/div&gt;
-                &lt;/div&gt;
-                &lt;div class="property"&gt;
-                    &lt;div class="ui-input-slider" data-topic="preview-height" data-info="height"
-                        data-unit=" px" data-min="10" data-max="10000" data-sensivity="3"&gt;
-                    &lt;/div&gt;
-                &lt;/div&gt;
-            &lt;/div&gt;
-
-
-            &lt;div id="output" class="category"&gt;
-                &lt;div class="title"&gt; CSS Code &lt;/div&gt;
-                &lt;div class="css-property"&gt;
-                    &lt;span class="name"&gt; border-image-slice: &lt;/span&gt;
-                    &lt;span id="out-border-slice" class="value"&gt; &lt;/span&gt;
-                &lt;/div&gt;
-                &lt;div class="css-property"&gt;
-                    &lt;span class="name"&gt; border-image-width: &lt;/span&gt;
-                    &lt;span id="out-border-width" class="value"&gt; &lt;/span&gt;
-                &lt;/div&gt;
-                &lt;div class="css-property"&gt;
-                    &lt;span class="name"&gt; border-image-outset: &lt;/span&gt;
-                    &lt;span id="out-border-outset" class="value"&gt; &lt;/span&gt;
-                &lt;/div&gt;
-                &lt;div class="css-property"&gt;
-                    &lt;span class="name"&gt; border-image-repeat: &lt;/span&gt;
-                    &lt;span id="out-border-repeat" class="value"&gt; &lt;/span&gt;
-                &lt;/div&gt;
-                &lt;div class="css-property"&gt;
-                    &lt;span class="name"&gt; border-image-source: &lt;/span&gt;
-                    &lt;span id="out-border-source" class="value"&gt;  &lt;/span&gt;
-                &lt;/div&gt;
-            &lt;/div&gt;
-
-        &lt;/div&gt;
-    &lt;/div&gt;</pre>
-
-<h3 id="CSS_Content">CSS Content</h3>
-
-<pre class="brush: css">/*  GRID OF TWELVE
- * ========================================================================== */
-
-.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 {
-	height: 20px;
-	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
-	-moz-user-select: none;
-	user-select: none;
-}
-
-.ui-input-slider * {
-	float: left;
-	height: 100%;
-	line-height: 100%;
-}
-
-/* Input Slider */
-
-.ui-input-slider &gt; 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 DropDown
- */
-
-/* Dropdown */
-
-.ui-dropdown {
-	height: 2em;
-	width: 120px;
-	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
-	font-size: 12px;
-
-	background-image: url("https://mdn.mozillademos.org/files/6037/drop_arrow_icon.png");
-	background-position: right center;
-	background-repeat: no-repeat;
-	background-color: #359740;
-
-	position: relative;
-
-	-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;
-}
-
-.ui-dropdown:hover {
-	cursor: pointer;
-	background-color: #208B20;
-}
-
-/* Dropdown Select Button */
-
-.ui-dropdown-select {
-	height: inherit;
-	padding: 0 0.75em;
-	color: #FFF;
-	line-height: 2em;
-}
-
-/* Dropdown List */
-
-.ui-dropdown-list {
-	width: 100%;
-	height: 150px;
-	max-height: 150px;
-	margin: 0;
-	padding: 0 0.3em;
-
-	border: 3px solid #3490D2;
-	border-color: #208B20;
-	background: #666;
-	background-color: #EEF1F5;
-	color: #000;
-
-	position: absolute;
-	top: 2em;
-	left: 0;
-	z-index: 100;
-
-	overflow: hidden;
-	transition: all 0.3s;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-}
-
-.ui-dropdown-list:hover {
-	overflow: auto;
-}
-
-.ui-dropdown-list[data-hidden='true'] {
-	height: 0 !important;
-	opacity: 0;
-	visibility: hidden;
-}
-
-.ui-dropdown[data-position='left'] .ui-dropdown-list {
-	left: -100%;
-	top: 0;
-}
-
-.ui-dropdown[data-position='right'] .ui-dropdown-list {
-	left: 100%;
-	top: 0;
-}
-
-.ui-dropdown-list &gt; div {
-	width: 100%;
-	height: 1.6em;
-	margin: 0.3em 0;
-	padding: 0.3em;
-	line-height: 1em;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-}
-
-.ui-dropdown-list &gt; div:hover {
-	background: #3490D2;
-	color:#FFF;
-	border-radius: 2px;
-	cursor: pointer;
-}
-
-
-/*************************************************************************************/
-/*************************************************************************************/
-
-/*
- * UI Button
- */
-
-/* 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 &gt; input {
- 	display: none;
-}
-
-.ui-checkbox &gt; 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: 2px;
-	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 &gt; label:hover {
-	cursor: pointer;
-}
-
-.ui-checkbox &gt; input:checked + label {
-	background-image: url("https://mdn.mozillademos.org/files/5681/checked.png");
-	background-color: #379B4A;
-}
-
-/*************************************************************************************/
-/*************************************************************************************/
-
-/*
- * BORDER IMAGE GENERATOR TOOL
- */
-
-body {
-	width: 100%;
-	margin: 0 auto;
-	padding: 0 0 20px 0;
-
-	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
-
-	/*background: url("https://mdn.mozillademos.org/files/6025/grain.png");*/
-	border: 1px solid #EEE;
-
-	-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;
-}
-
-body[data-move='X'] {
-	cursor: w-resize !important;
-}
-
-body[data-move='Y'] {
-	cursor: s-resize !important;
-}
-
-#container {
-	width: 100%;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-}
-
-[data-draggable='true']:hover {
-	cursor: move;
-}
-
-[data-draggable='true']:hover &gt; * {
-	cursor: default;
-}
-
-
-
-/******************************************************************************/
-/******************************************************************************/
-
-/*
- * Border Image Picker
- */
-
-#gallery {
-	box-shadow: 0 0 3px 0 #BABABA;
-}
-
-#image-gallery {
-	width: 600px;
-	height: 100px;
-	margin: 0 auto;
-	transition: margin 0.4s;
-}
-
-#image-gallery .image {
-	height: 80px;
-	float: left;
-	margin: 10px;
-	opacity: 0.5;
-	background-color: #FFF;
-	box-shadow: 0px 0px 3px 1px #BABABA;
-}
-
-#image-gallery .image[selected="true"] {
-	box-shadow: 0px 0px 3px 1px #3BBA52;
-	opacity: 1;
-}
-
-#image-gallery .image:hover {
-	cursor: pointer;
-	box-shadow: 0px 0px 3px 1px #30ACE5;
-	opacity: 1;
-}
-
-#image-gallery[data-collapsed='true'] {
-	margin-top: -100px;
-}
-
-/* Load Menu */
-
-#load-actions {
-	margin: 10px 0;
-}
-
-#toggle-gallery {
-	width: 30px;
-	height: 25px;
-	margin: 10px;
-	color: #FFF;
-
-	background-image: url('https://mdn.mozillademos.org/files/6005/arrow-up-white.png');
-	background-repeat: no-repeat;
-	background-position: top 4px center;
-	background-color: #888888 !important;
-
-	border-radius: 2px;
-	float: left;
-}
-
-#toggle-gallery:hover {
-	cursor: pointer;
-}
-
-#toggle-gallery[data-action='show'] {
-	background-image: url('https://mdn.mozillademos.org/files/6001/arrow-down-white.png');
-	background-color: #888888 !important;
-}
-
-#toggle-gallery[data-action='hide'] {
-	background-image: url('https://mdn.mozillademos.org/files/6005/arrow-up-white.png');
-}
-
-.button {
-	width: 100px;
-	height: 25px;
-	margin: 10px;
-	color: #FFF;
-	text-align: center;
-	font-size: 12px;
-	line-height: 25px;
-	background-color: #379B4A;
-	border-radius: 2px;
-	float: left;
-}
-
-.button:hover {
-	cursor: pointer;
-	background-color: #3380C4;
-}
-
-#load-image {
-	float: left;
-}
-
-#load-remote {
-	width: 30px;
-	background-image: url('https://mdn.mozillademos.org/files/6003/arrow-right-white.png');
-	background-repeat: no-repeat;
-	background-position: center center;
-}
-
-#remote-url {
-	width: 200px;
-	height: 23px;
-	margin: 10px;
-	padding: 0 5px;
-	border: 1px solid #379B4A;
-	border-radius: 2px;
-	float: left;
-
-	transition: width 0.5s;
-}
-
-#remote-url:focus {
-	box-shadow: 0px 0px 3px -1px #379B4A; /*#68ACE8; */
-	border-color: rgba(55, 155, 74, 0.5);
-	width: 450px;
-}
-
-/*
- * Visible Area
- */
-
-#preview_section {
-	position: relative;
-	min-height: 400px;
-}
-
-/* Image Control */
-
-#subject {
-	width: 300px;
-	height: 300px;
-	background-repeat: no-repeat;
-	background-size: 100%;
-	background-color: #FFF;
-	border: 1px solid #CCC;
-
-	position: absolute;
-	z-index: 10;
-	top: 15%;
-	left: 10%;
-
-	box-shadow: 0 0 3px 0 #BABABA;
-	transition-property: width, height;
-	transition-duration: 0.1s;
-}
-
-#subject .guideline {
-	background-color: rgba(255, 255, 255, 0.7);
-	border: 1px solid rgba(0, 0, 0, 0.3);
-	position: absolute;
-}
-
-#subject .guideline:hover {
-	background-color: #F00;
-}
-
-#subject .guideline[data-active] {
-	background-color: #F00;
-	z-index: 10;
-}
-
-#subject .guideline[data-axis='X'] {
-	width: 1px;
-	height: 100%;
-	top: -1px;
-}
-
-#subject .guideline[data-axis='Y'] {
-	width: 100%;
-	height: 1px;
-	left: -1px;
-}
-
-#subject .guideline[data-axis='X']:hover {
-	cursor: w-resize;
-}
-
-#subject .guideline[data-axis='Y']:hover {
-	cursor: s-resize;
-}
-
-
-#subject .relative {
-	position: relative;
-	font-size: 12px;
-}
-
-#subject .tooltip, #subject .tooltip2 {
-	width: 40px;
-	height: 20px;
-	line-height: 20px;
-	font-size: 12px;
-	text-align: center;
-
-	position: absolute;
-	opacity: 0.5;
-	transition: opacity 0.25s;
-}
-
-#subject .tooltip {
-	background: #EEE;
-	border-radius: 2px;
-	border: 1px solid #CCC;
-}
-
-#subject .tooltip2{
-	color: #555;
-}
-
-#subject [data-active] &gt; * {
-	opacity: 1;
-}
-
-#subject .tooltip[data-info='top'] {
-	top: -10px;
-	right: -50px;
-}
-
-#subject .tooltip[data-info='right'] {
-	bottom: -30px;
-	right: -20px;
-}
-
-#subject .tooltip[data-info='bottom'] {
-	top: -10px;
-	left: -50px;
-}
-
-#subject .tooltip[data-info='left'] {
-	top: -30px;
-	right: -20px;
-}
-
-#subject .tooltip2[data-info='top'] {
-	top: -10px;
-	left: -50px;
-}
-
-#subject .tooltip2[data-info='right'] {
-	top: -30px;
-	right: -20px;
-}
-
-#subject .tooltip2[data-info='bottom'] {
-	top: -10px;
-	right: -50px;
-}
-
-#subject .tooltip2[data-info='left'] {
-	bottom: -30px;
-	right: -20px;
-}
-
-/* Preview */
-
-#preview {
-	width: 30%;
-	height: 50%;
-	background-color: #FFF;
-	text-align: center;
-	overflow: hidden;
-	position: absolute;
-	z-index: 10;
-
-	left: 60%;
-	top: 15%;
-
-	border-radius: 2px;
-	border-image-width: 20px;
-	border-image-repeat: round;
-	box-shadow: 0 0 3px 0 #BABABA;
-}
-
-#preview .resize-handle {
-	width: 10px;
-	height: 10px;
-	background: url("https://mdn.mozillademos.org/files/6027/resize.png") center center no-repeat;
-	position: absolute;
-	bottom: 0;
-	right: 0;
-}
-
-#preview .resize-handle:hover {
-	cursor: nw-resize;
-}
-
-
-/*
- * General controls MENU
- */
-
-#general-controls {
-	padding: 10px 30px;
-	background-color: #FFF;
-	opacity: 0.95;
-	color: #888;
-	/*border-radius: 2px;*/
-	box-shadow: 0 0 3px 0 #BABABA;
-}
-
-#general-controls .property {
-	width: 130px;
-	float: left;
-}
-
-#general-controls .name {
-	height: 20px;
-	margin: 0 10px 0 0;
-	line-height: 100%;
-	text-align: right;
-	float: left;
-}
-
-#general-controls .right {
-	width: 200px;
-	float: right;
-}
-
-#general-controls .ui-checkbox label {
-	height: 10px;
-}
-
-#general-controls .separator {
-	height: 40px;
-	width: 1px;
-	margin: -10px 15px;
-	background-color: #EEE;
-	float: left;
-}
-
-/*
- * Controls
- */
-
-#controls {
-	color: #444;
-	margin: 10px 0 0 0;
-}
-
-#controls .category {
-	height: 190px;
-	min-width: 260px;
-	margin: 10px;
-	padding: 10px;
-	border: 1px solid #CCC;
-	border-radius: 3px;
-	float: left;
-
-	box-shadow: 0 0 3px 0 #BABABA;
-	transition: all 0.25s;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-}
-
-@media (min-width: 880px) {
-	#controls .category {
-		width: 30%;
-		margin-left: 1.66%;
-		margin-right: 1.66%;
-	}
-}
-
-@media (max-width: 879px) {
-	#controls .category {
-		width: 37%;
-		margin-left: 6.5%;
-		margin-right: 6.5%;
-	}
-}
-
-#controls .category .title {
-	width: 100%;
-	height: 30px;
-	margin: 0 0 10px 0;
-	line-height: 25px;
-
-	text-align: center;
-	color: #AAA;
-}
-
-#controls .category:hover .title {
-	color: #777;
-}
-
-#controls .category &gt; .group {
-	border: 1px solid #CCC;
-	border-radius: 2px;
-}
-
-
-/* property */
-
-#controls .property {
-	width: 250px;
-	height: 20px;
-	margin: 5px auto;
-}
-
-#controls .property .ui-input-slider {
-	margin: 0;
-	float: left;
-}
-
-#controls .property .ui-input-slider-info {
-	width: 60px;
-}
-
-#controls .property .ui-input-slider-left {
-	transition: opacity 0.15s;
-    opacity: 0;
-}
-
-#controls .property .ui-input-slider-right {
-	transition: opacity 0.15s;
-    opacity: 0;
-}
-
-#controls .property .name {
-	width: 60px;
-	height: 20px;
-	padding: 0px 10px 0px 0px;
-	text-align: right;
-	line-height: 100%;
-	float: left;
-}
-
-#controls .property .config {
-	width: 20px;
-	height: 20px;
-	float: left;
-	background: url("https://mdn.mozillademos.org/files/6021/config.png") center center no-repeat;
-	opacity: 0.5;
-}
-
-#controls .property .config:hover {
-	cursor: pointer;
-	opacity: 1;
-}
-
-#controls .ui-input-slider:hover .ui-input-slider-right {
-    opacity: 1;
-}
-
-#controls .ui-input-slider:hover .ui-input-slider-left {
-    opacity: 1;
-}
-
-#controls .property .ui-dropdown {
-	margin: 0 10px;
-	float: left;
-}
-
-
-#controls .property .ui-checkbox {
-	margin: 0 0 0 16px;
-	float: left;
-}
-
-#controls .property .ui-checkbox label {
-	height: 0.85em;
-	width: 10px;
-}
-
-/* dropdowns */
-#controls .ui-dropdown {
-	width: 50px;
-	height: 1.7em;
-	border-radius: 2px;
-}
-
-#controls .ui-dropdown-select {
-	line-height: 1.6em;
-}
-
-#controls .ui-dropdown-list {
-	top: 20px;
-}
-
-#controls .ui-dropdown-list {
-	border-width: 1px;
-	text-align: center;
-}
-
-#controls .ui-dropdown-list:hover {
-	overflow: hidden;
-}
-
-#controls .border-repeat {
-	margin: 0 0 0 16px !important;
-	width: 80px;
-}
-
-#controls .border-repeat .ui-dropdown-list {
-	height: 6.2em;
-	border-width: 1px;
-	text-align: center;
-}
-
-/* border-image-slice */
-
-
-#border-slice-control .ui-dropdown-list {
-	height: 4.3em;
-}
-
-/* border-image-width */
-
-#border-width-control .ui-dropdown-list {
-	height: 6.2em;
-}
-
-/* border-image-outset */
-
-#border-outset-control .ui-dropdown-list {
-	height: 4.3em;
-}
-
-#aditional-properties .property {
-	width: 200px;
-}
-
-#aditional-properties .ui-input-slider &gt; input {
-	width: 80px !important;
-}
-
-/* unit settings panel */
-
-#unit-settings {
-	padding: 10px;
-	position: absolute;
-
-	background: #FFF;
-
-	font-size: 12px;
-	border-radius: 3px;
-	border: 1px solid #CCC;
-	text-align: center;
-	color: #555;
-
-	position: absolute;
-	z-index: 1000;
-
-	box-shadow: 0 0 3px 0 #BABABA;
-	transition: all 0.25s;
-}
-
-#unit-settings .title {
-	width: 100%;
-	margin: -5px auto 0;
-
-	color: #666;
-	font-size: 14px;
-	font-weight: bold;
-	line-height: 25px;
-	border-bottom: 1px solid #E5E5E5;
-}
-
-#unit-settings .ui-input-slider {
-	margin: 10px 0 0 0;
-}
-
-#unit-settings .ui-input-slider-info {
-	width: 50px;
-	line-height: 1.5em;
-}
-
-#unit-settings input {
-	font-size: 12px;
-	width: 40px !important;
-}
-
-#unit-settings .close {
-	width: 16px;
-	height: 16px;
-	background: url('https://mdn.mozillademos.org/files/6019/close.png') no-repeat center center;
-	background-size: 75%;
-
-	position: absolute;
-	top: 4px;
-	right: 4px;
-	opacity: 0.5;
-}
-
-#unit-settings .close:hover {
-	cursor: pointer;
-	opacity: 1;
-}
-
-#unit-settings[data-active='true'] {
-	opacity: 1;
-}
-
-#unit-settings[data-active='false'] {
-	opacity: 0;
-	top: -100px !important;
-}
-
-/*
- * CSS Output Code
- */
-
-#output {
-	padding: 10px;
-	border: 2px dashed #888 !important;
-	box-shadow: none !important;
-	border-radius: 3px;
-	overflow: hidden;
-
-	-moz-user-select: text;
-	-webkit-user-select: text;
-	-ms-user-select: text;
-	user-select: text;
-}
-
-
-@media (min-width: 880px) {
-	#output {
-		width: 63.33% !important;
-	}
-}
-
-@media (max-width: 879px) {
-	#output {
-		width: 87% !important;
-	}
-}
-
-
-#output .title {
-	width: 100%;
-	height: 30px;
-	margin: 0 0 10px 0;
-	line-height: 25px;
-
-	text-align: center;
-	color: #AAA;
-}
-
-#output .css-property {
-	width: 100%;
-	margin: 0;
-	color: #555;
-	font-size: 14px;
-	line-height: 18px;
-	float: left;
-}
-
-#output .css-property .name {
-	width: 30%;
-	font-weight: bold;
-	text-align: right;
-	float: left;
-}
-
-#output .css-property .value {
-	width: 65%;
-	padding: 0 2.5%;
-	word-break: break-all;
-	float: left;
-}
-
-</pre>
-
-<h3 id="JavaScript_Content">JavaScript Content</h3>
-
-<pre class="brush: js">'use strict';
-
-/**
- * UI-SlidersManager
- */
-
-var InputSliderManager = (function InputSliderManager() {
-
-	var subscribers = {};
-	var sliders = [];
-
-	var InputComponent = function InputComponent(obj) {
-		var input = document.createElement('input');
-		input.setAttribute('type', 'text');
-		input.style.width = 50 + obj.precision * 10 + 'px';
-
-		input.addEventListener('click', function(e) {
-			this.select();
-		});
-
-		input.addEventListener('change', function(e) {
-			var value = parseFloat(e.target.value);
-
-			if (isNaN(value) === true)
-				setValue(obj.topic, obj.value);
-			else
-				setValue(obj.topic, value);
-		});
-
-		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) {
-			document.removeEventListener("mousemove", sliderMotion);
-			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("mouseup", slideEnd);
-			document.addEventListener("mousemove", sliderMotion);
-		});
-
-		var slideEnd = function slideEnd(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		= parseFloat(node.getAttribute('data-min'));
-		var max		= parseFloat(node.getAttribute('data-max'));
-		var step	= parseFloat(node.getAttribute('data-step'));
-		var value	= parseFloat(node.getAttribute('data-value'));
-		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;
-		var precision = node.getAttribute('data-precision') | 0;
-
-		this.min = isNaN(min) ? 0 : min;
-		this.max = isNaN(max) ? 100 : max;
-		this.precision = precision &gt;= 0 ? precision : 0;
-		this.step = step &lt; 0 || isNaN(step) ? 1 : step.toFixed(precision);
-		this.topic = topic;
-		this.node = node;
-		this.unit = unit === null ? '' : unit;
-		this.sensivity = sensivity &gt; 0 ? sensivity : 5;
-		value = isNaN(value) ? this.min : value;
-
-		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);
-
-		this.input = input;
-		sliders[topic] = this;
-		setValue(topic, value);
-	};
-
-	InputSlider.prototype.setInputValue = function setInputValue() {
-		this.input.value = this.value.toFixed(this.precision) + this.unit;
-	};
-
-	var setValue = function setValue(topic, value, send_notify) {
-		var slider = sliders[topic];
-		if (slider === undefined)
-			return;
-
-		value = parseFloat(value.toFixed(slider.precision));
-
-		if (value &gt; slider.max) value = slider.max;
-		if (value &lt; slider.min)	value = slider.min;
-
-		slider.value = value;
-		slider.node.setAttribute('data-value', value);
-
-		slider.setInputValue();
-
-		if (send_notify === false)
-			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 setStep = function setStep(topic, value) {
-		var slider = sliders[topic];
-		if (slider === undefined)
-			return;
-
-		slider.step = parseFloat(value);
-		setValue(topic, slider.value);
-	};
-
-	var setPrecision = function setPrecision(topic, value) {
-		var slider = sliders[topic];
-		if (slider === undefined)
-			return;
-
-		value = value | 0;
-		slider.precision = value;
-
-		var step = parseFloat(slider.step.toFixed(value));
-		if (step === 0)
-			slider.step = 1 / Math.pow(10, value);
-
-		setValue(topic, slider.value);
-	};
-
-	var setSensivity = function setSensivity(topic, value) {
-		var slider = sliders[topic];
-		if (slider === undefined)
-			return;
-
-		value = value | 0;
-
-		slider.sensivity = value &gt; 0 ? value : 5;
-	};
-
-	var getNode =  function getNode(topic) {
-		return sliders[topic].node;
-	};
-
-	var getPrecision =  function getPrecision(topic) {
-		return sliders[topic].precision;
-	};
-
-	var getStep =  function getStep(topic) {
-		return sliders[topic].step;
-	};
-
-	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() {
-		if (subscribers[this.topic] === undefined)
-			return;
-		for (var i = 0; i &lt; subscribers[this.topic].length; i++)
-			subscribers[this.topic][i](this.value);
-	};
-
-	var createSlider = function createSlider(topic, label) {
-		var slider = document.createElement('div');
-		slider.className = 'ui-input-slider';
-		slider.setAttribute('data-topic', topic);
-
-		if (label !== undefined)
-			slider.setAttribute('data-info', label);
-
-		new InputSlider(slider);
-		return slider;
-	};
-
-	var init = function init() {
-		var elem = document.querySelectorAll('.ui-input-slider');
-		var size = elem.length;
-		for (var i = 0; i &lt; size; i++)
-			new InputSlider(elem[i]);
-	};
-
-	return {
-		init : init,
-		setMax : setMax,
-		setMin : setMin,
-		setUnit : setUnit,
-		setStep : setStep,
-		getNode : getNode,
-		getStep : getStep,
-		setValue : setValue,
-		subscribe : subscribe,
-		unsubscribe : unsubscribe,
-		setPrecision : setPrecision,
-		setSensivity : setSensivity,
-		getPrecision : getPrecision,
-		createSlider : createSlider,
-	};
-
-})();
-
-
-/**
- * UI-DropDown Select
- */
-
-var DropDownManager = (function DropdownManager() {
-
-	var subscribers = {};
-	var dropdowns = [];
-	var active = null;
-
-	var visbility = ["hidden", "visible"];
-
-
-	var DropDown = function DropDown(node) {
-		var topic = node.getAttribute('data-topic');
-		var label = node.getAttribute('data-label');
-		var selected = node.getAttribute('data-selected') | 0;
-
-		var select = document.createElement('div');
-		var list = document.createElement('div');
-		var uval = 0;
-		var option = null;
-		var option_value = null;
-
-		list.className = 'ui-dropdown-list';
-		select.className = 'ui-dropdown-select';
-
-		while (node.firstElementChild !== null) {
-			option = node.firstElementChild;
-			option_value = option.getAttribute('data-value');
-
-			if (option_value === null)
-				option.setAttribute('data-value', uval);
-
-			list.appendChild(node.firstElementChild);
-			uval++;
-		}
-
-		node.appendChild(select);
-		node.appendChild(list);
-
-		select.onclick = this.toggle.bind(this);
-		list.onclick = this.updateValue.bind(this);
-		document.addEventListener('click', clickOut);
-
-		this.state = 0;
-		this.time = 0;
-		this.dropmenu = list;
-		this.select = select;
-		this.toggle(false);
-		this.value = {};
-		this.topic = topic;
-
-		if (label)
-			select.textContent = label;
-		else
-			this.setNodeValue(list.children[selected]);
-
-		dropdowns[topic] = this;
-
-	};
-
-	DropDown.prototype.toggle = function toggle(state) {
-		if (typeof(state) === 'boolean')
-			this.state = state === false ? 0 : 1;
-		else
-			this.state = 1 ^ this.state;
-
-		if (active !== this) {
-			if (active)
-				active.toggle(false);
-			active = this;
-		}
-
-		if (this.state === 0)
-			this.dropmenu.setAttribute('data-hidden', 'true');
-		else
-			this.dropmenu.removeAttribute('data-hidden');
-
-	};
-
-	var clickOut = function clickOut(e) {
-		if (active.state === 0 ||
-			e.target === active.dropmenu ||
-			e.target === active.select)
-			return;
-
-		active.toggle(false);
-	};
-
-	DropDown.prototype.updateValue = function updateValue(e) {
-
-		if (Date.now() - this.time &lt; 500)
-			return;
-
-		if (e.target.className !== "ui-dropdown-list") {
-			this.setNodeValue(e.target);
-			this.toggle(false);
-		}
-
-		this.time = Date.now();
-	};
-
-	DropDown.prototype.setNodeValue = function setNodeValue(node) {
-		this.value['name'] = node.textContent;
-		this.value['value'] = node.getAttribute('data-value');
-
-		this.select.textContent = node.textContent;
-		this.select.setAttribute('data-value', this.value['value']);
-
-		notify.call(this);
-	};
-
-	var createDropDown = function createDropDown(topic, options) {
-
-		var dropdown = document.createElement('div');
-		dropdown.setAttribute('data-topic', topic);
-		dropdown.className = 'ui-dropdown';
-
-		for (var i in options) {
-			var x = document.createElement('div');
-			x.setAttribute('data-value', i);
-			x.textContent = options[i];
-			dropdown.appendChild(x);
-		}
-
-		new DropDown(dropdown);
-
-		return dropdown;
-	};
-
-	var setValue = function setValue(topic, index) {
-		if (dropdowns[topic] === undefined ||
-			index &gt;= dropdowns[topic].dropmenu.children.length)
-			return;
-
-		dropdowns[topic].setNodeValue(dropdowns[topic].dropmenu.children[index]);
-	};
-
-	var subscribe = function subscribe(topic, callback) {
-		if (subscribers[topic] === undefined)
-			subscribers[topic] = [];
-		subscribers[topic].push(callback);
-	};
-
-	var unsubscribe = function unsubscribe(topic, callback) {
-		var index = subscribers[topic].indexOf(callback);
-		subscribers[topic].splice(index, 1);
-	};
-
-	var notify = function notify() {
-		if (subscribers[this.topic] === undefined)
-			return;
-
-		for (var i in subscribers[this.topic]) {
-			subscribers[this.topic][i](this.value);
-		}
-	};
-
-	var init = function init() {
-		var elem, size;
-
-		elem = document.querySelectorAll('.ui-dropdown');
-		size = elem.length;
-		for (var i = 0; i &lt; size; i++)
-			new DropDown(elem[i]);
-
-	};
-
-	return {
-		init : init,
-		setValue : setValue,
-		subscribe : subscribe,
-		unsubscribe : unsubscribe,
-		createDropDown : createDropDown
-	};
-
-})();
-
-
-/**
- * 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) {
-		var obj = buttons[topic];
-		if (obj === undefined)
-			return;
-
-		obj.checkbox.checked = value;
-		notify.call(obj);
-	};
-
-	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() {
-		if (subscribers[this.topic] === undefined)
-			return;
-		for (var i = 0; i &lt; 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 &lt; size; i++)
-			new CheckBox(elem[i]);
-	};
-
-	return {
-		init : init,
-		setValue : setValue,
-		subscribe : subscribe,
-		unsubscribe : unsubscribe
-	};
-
-})();
-
-window.addEventListener("load", function() {
-	BorderImage.init();
-});
-
-var BorderImage = (function BorderImage() {
-
-	var getElemById = document.getElementById.bind(document);
-
-	var subject;
-	var preview;
-	var guidelines = [];
-	var positions = ['top', 'right', 'bottom', 'left'];
-
-	var makeDraggable = function makeDraggable(elem) {
-
-		var offsetTop;
-		var offsetLeft;
-
-		elem.setAttribute('data-draggable', 'true');
-
-		var dragStart = function dragStart(e) {
-			if (e.target.getAttribute('data-draggable') !== 'true' ||
-				e.target !== elem || e.button !== 0)
-				return;
-
-			offsetLeft = e.clientX - elem.offsetLeft;
-			offsetTop = e.clientY - elem.offsetTop;
-
-			document.addEventListener('mousemove', mouseDrag);
-			document.addEventListener('mouseup', dragEnd);
-		};
-
-		var dragEnd = function dragEnd(e) {
-			if (e.button !== 0)
-				return;
-
-			document.removeEventListener('mousemove', mouseDrag);
-			document.removeEventListener('mouseup', dragEnd);
-		};
-
-		var mouseDrag = function mouseDrag(e) {
-
-			elem.style.left = e.clientX - offsetLeft + 'px';
-			elem.style.top = e.clientY - offsetTop + 'px';
-		};
-
-		elem.addEventListener('mousedown', dragStart, false);
-	};
-
-	var PreviewControl = function PreviewControl() {
-
-		var dragging = false;
-		var valueX = null;
-		var valueY = null;
-
-		var dragStart = function dragStart(e) {
-			if (e.button !== 0)
-				return;
-
-			valueX = e.clientX - preview.clientWidth;
-			valueY = e.clientY - preview.clientHeight;
-			dragging = true;
-
-			document.addEventListener('mousemove', mouseDrag);
-		};
-
-		var dragEnd = function dragEnd(e) {
-			if (e.button !== 0 || dragging === false)
-				return;
-
-			document.removeEventListener('mousemove', mouseDrag);
-			dragging = false;
-		};
-
-		var mouseDrag = function mouseDrag(e) {
-			InputSliderManager.setValue('preview-width', e.clientX - valueX);
-			InputSliderManager.setValue('preview-height', e.clientY - valueY);
-		};
-
-		var init = function init() {
-
-			makeDraggable(preview);
-			makeDraggable(subject);
-
-			var handle = document.createElement('div');
-			handle.className = 'resize-handle';
-
-			handle.addEventListener('mousedown', dragStart);
-			document.addEventListener('mouseup', dragEnd);
-
-			preview.appendChild(handle);
-
-		};
-
-		return {
-			init: init
-		};
-
-	}();
-
-	var ImageReader = (function ImageReader() {
-
-		var fReader = new FileReader();
-		var browse = document.createElement('input');
-
-		var loadImage = function loadImage(e) {
-			if (browse.files.length === 0)
-				return;
-
-			var file = browse.files[0];
-
-			if (file.type.slice(0, 5) !== 'image')
-				return;
-
-			fReader.readAsDataURL(file);
-
-			return false;
-		};
-
-		fReader.onload = function(e) {
-			ImageControl.loadRemoteImage(e.target.result);
-		};
-
-		var load = function load() {
-			browse.click();
-		};
-
-		browse.setAttribute('type', 'file');
-		browse.style.display = 'none';
-		browse.onchange = loadImage;
-
-		return {
-			load: load
-		};
-
-	})();
-
-	var ImageControl = (function ImageControl() {
-
-		var scale = 0.5;
-		var imgSource = new Image();
-		var imgState = null;
-		var selected = null;
-
-
-		var topics = ['slice', 'width', 'outset'];
-		var properties = {};
-		properties['border1'] = {
-			fill			: false,
-
-			slice_values	: [27, 27, 27, 27],
-			width_values	: [20, 20, 20, 20],
-			outset_values	: [0, 0, 0, 0],
-
-			slice_units		: [0, 0, 0, 0],
-			width_units		: [0, 0, 0, 0],
-			outset_units	: [0, 0, 0, 0],
-
-			repeat			: [1, 1],
-			size			: [300, 200],
-			preview_area	: 400
-		};
-
-		properties['border2'] = {
-			fill			: false,
-
-			slice_values	: [33, 33, 33, 33],
-			width_values	: [1.5, 1.5, 1.5, 1.5],
-			outset_values	: [0, 0, 0, 0],
-
-			slice_units		: [1, 1, 1, 1],
-			width_units		: [2, 2, 2, 2],
-			outset_units	: [0, 0, 0, 0],
-
-			repeat			: [2, 2],
-			size			: [300, 200],
-			preview_area	: 400
-		};
-
-		properties['border3'] = {
-			fill			: true,
-
-			slice_values	: [15, 15, 15, 15],
-			width_values	: [10, 10, 10, 10],
-			outset_values	: [0, 0, 0, 0],
-
-			slice_units		: [0, 0, 0, 0],
-			width_units		: [0, 0, 0, 0],
-			outset_units	: [0, 0, 0, 0],
-
-			repeat			: [2, 2],
-			size			: [300, 200],
-			preview_area	: 400
-		};
-
-		properties['border4'] = {
-			fill			: false,
-
-			slice_values	: [13, 13, 13, 13],
-			width_values	: [13, 13, 13, 13],
-			outset_values	: [13, 13, 13, 13],
-
-			slice_units		: [0, 0, 0, 0],
-			width_units		: [0, 0, 0, 0],
-			outset_units	: [0, 0, 0, 0],
-
-			repeat			: [0, 0],
-			size			: [300, 200],
-			preview_area	: 400
-		};
-
-		properties['border5'] = {
-			fill			: false,
-
-			slice_values	: [0, 12, 0, 12],
-			width_values	: [0, 12, 0, 12],
-			outset_values	: [0, 0, 0, 0],
-
-			slice_units		: [0, 0, 0, 0],
-			width_units		: [0, 0, 0, 0],
-			outset_units	: [0, 0, 0, 0],
-
-			repeat			: [0, 0],
-			size			: [300, 200],
-			preview_area	: 400,
-		};
-
-		properties['border6'] = {
-			fill			: false,
-
-			slice_values	: [42, 42, 42, 42],
-			width_values	: [42, 42, 42, 42],
-			outset_values	: [0, 0, 0, 0],
-
-			slice_units		: [0, 0, 0, 0],
-			width_units		: [0, 0, 0, 0],
-			outset_units	: [0, 0, 0, 0],
-
-			repeat			: [2, 2],
-			size			: [350, 350],
-			preview_area	: 500,
-		};
-
-
-		var loadLocalImage = function loadLocalImage(source) {
-			var location = "images/" + source;
-			imgSource.src = location;
-		};
-
-		var loadRemoteImage = function loadRemoteImage(source) {
-			imgSource.src = source;
-			if (selected)
-				selected.removeAttribute('selected');
-			Tool.setOutputCSS('source', 'url("' + source + '")');
-		};
-
-		var pickImage = function pickImage(e) {
-			if (e.target.className === 'image') {
-				selected = e.target;
-				selected.setAttribute('selected', 'true');
-				loadRemoteImage(e.target.src);
-				imgState = e.target.getAttribute('data-stateID');
-			}
-		};
-
-		var loadImageState = function loadImageState(stateID) {
-			if (properties[stateID] === undefined)
-				return;
-
-			var prop = properties[stateID];
-			var topic;
-			var unit_array;
-			var value_array;
-
-			for (var i in topics) {
-				for (var j=0; j&lt;4; j++) {
-					topic = topics[i] + '-' + positions[j];
-					unit_array = topics[i] + '_units';
-					value_array = topics[i] + '_values';
-					InputSliderManager.setValue(topic, prop[value_array][j]);
-					DropDownManager.setValue(topic, prop[unit_array][j]);
-				}
-			}
-
-			ButtonManager.setValue('slice-fill', prop['fill']);
-			DropDownManager.setValue('image-repeat-X', prop['repeat'][0]);
-			DropDownManager.setValue('image-repeat-Y', prop['repeat'][1]);
-			InputSliderManager.setValue('preview-width', prop['size'][0]);
-			InputSliderManager.setValue('preview-height', prop['size'][1]);
-			InputSliderManager.setValue('preview-area-height', prop['preview_area']);
-		};
-
-		var update = function update() {
-			scale =  Math.min(300, (30000 / this.width) | 0);
-			setScale(scale);
-			InputSliderManager.setValue('scale', scale, false);
-
-			subject.style.backgroundImage = 'url("' + this.src + '")';
-			preview.style.borderImageSource = 'url("' + this.src + '")';
-
-			guidelines['slice-top'].setMax(this.height);
-			guidelines['slice-right'].setMax(this.width);
-			guidelines['slice-bottom'].setMax(this.height);
-			guidelines['slice-left'].setMax(this.width);
-
-			if (imgState)
-				loadImageState(imgState);
-		};
-
-		var setScale = function setScale(value) {
-			scale = value;
-			var w = imgSource.width * scale / 100 | 0;
-			var h = imgSource.height * scale / 100 | 0;
-			subject.style.width = w + 'px';
-			subject.style.height = h + 'px';
-
-			for (var i = 0; i &lt; positions.length; i++)
-				guidelines['slice-' + positions[i]].updateGuidelinePos();
-		};
-
-		var getScale = function getScale() {
-			return scale/100;
-		};
-
-		var toggleGallery = function toggleGallery() {
-			var gallery = getElemById('image-gallery');
-			var button  = getElemById('toggle-gallery');
-			var state = 1;
-			button.addEventListener('click', function() {
-				state = 1 ^ state;
-				if (state === 0) {
-					gallery.setAttribute('data-collapsed', 'true');
-					button.setAttribute('data-action', 'show');
-				}
-				else {
-					gallery.removeAttribute('data-collapsed');
-					button.setAttribute('data-action', 'hide');
-				}
-			});
-		};
-
-		var init = function init() {
-			var gallery = getElemById('image-gallery');
-			var browse = getElemById('load-image');
-			var remote = getElemById('remote-url');
-			var load_remote = getElemById('load-remote');
-
-			remote.addEventListener('change', function(){
-				loadRemoteImage(this.value);
-			});
-
-			load_remote.addEventListener('click', function(){
-				loadRemoteImage(remote.value);
-			});
-
-			browse.addEventListener('click', ImageReader.load);
-			gallery.addEventListener('click', pickImage);
-			imgSource.addEventListener('load', update);
-
-			InputSliderManager.subscribe('scale', setScale);
-			InputSliderManager.setValue('scale', scale);
-			imgState = 'border1';
-			loadRemoteImage('https://mdn.mozillademos.org/files/6007/border-image-1.png');
-			toggleGallery();
-		};
-
-		return {
-			init: init,
-			getScale : getScale,
-			loadRemoteImage: loadRemoteImage
-		};
-
-	})();
-
-	var GuideLine = function GuideLine(node) {
-		var topic = node.getAttribute('data-topic');
-		var axis = node.getAttribute('data-axis');
-
-		this.node = node;
-		this.topic = topic;
-		this.axis = axis;
-		this.info = topic.split('-')[1];
-
-		this.position = 0;
-		this.value = 0;
-		this.unit = 0;
-		this.max = 0;
-		this.pos = positions.indexOf(this.info);
-
-		guidelines[topic] = this;
-
-		var relative_container = document.createElement('div');
-		var tooltip = document.createElement('div');
-		var tooltip2 = document.createElement('div');
-
-		tooltip.className = 'tooltip';
-		tooltip.setAttribute('data-info', this.info);
-
-		tooltip2.className = 'tooltip2';
-		tooltip2.textContent = this.info;
-		tooltip2.setAttribute('data-info', this.info);
-
-		this.tooltip = tooltip;
-
-		relative_container.appendChild(tooltip);
-		relative_container.appendChild(tooltip2);
-		node.appendChild(relative_container);
-
-		var startX = 0;
-		var startY = 0;
-		var start = 0;
-
-		var startDrag = function startDrag(e) {
-			startX = e.clientX;
-			startY = e.clientY;
-			start = guidelines[topic].position;
-			document.body.setAttribute('data-move', axis);
-			relative_container.setAttribute('data-active', '');
-			node.setAttribute('data-active', '');
-
-			document.addEventListener('mousemove', updateGuideline);
-			document.addEventListener('mouseup', endDrag);
-		};
-
-		var endDrag = function endDrag() {
-			document.body.removeAttribute('data-move');
-			relative_container.removeAttribute('data-active');
-			node.removeAttribute('data-active');
-
-			document.removeEventListener('mousemove', updateGuideline);
-		};
-
-		var updateGuideline = function updateGuideline(e) {
-			var value;
-			if (topic === 'slice-top')
-				value = e.clientY - startY + start;
-
-			if (topic === 'slice-right')
-				value = startX - e.clientX + start;
-
-			if (topic === 'slice-bottom')
-				value = startY - e.clientY + start;
-
-			if (topic === 'slice-left')
-				value = e.clientX - startX + start;
-
-			if (this.unit === 0)
-				InputSliderManager.setValue(topic, value * 1 / ImageControl.getScale() | 0);
-			else {
-				InputSliderManager.setValue(topic, (value * 100 / (this.max * ImageControl.getScale())) | 0);
-			}
-
-		}.bind(this);
-
-		node.addEventListener("mousedown", startDrag);
-
-		InputSliderManager.subscribe(topic, this.setPosition.bind(this));
-		InputSliderManager.setValue(topic, this.position);
-	};
-
-
-	GuideLine.prototype.updateGuidelinePos = function updateGuidelinePos() {
-		if (this.unit === 0)
-			this.position = this.value * ImageControl.getScale() | 0;
-		else
-			this.position = this.value * this.max * ImageControl.getScale() / 100 | 0;
-
-		this.node.style[this.info] = this.position + 'px';
-	};
-
-	GuideLine.prototype.setPosition = function setPosition(value) {
-		this.value = value;
-		this.tooltip.textContent = value;
-		this.updateGuidelinePos();
-		Tool.setBorderSlice(this.pos, value);
-	};
-
-	GuideLine.prototype.setMax = function setMax(max) {
-		this.max = max;
-		this.updateLimit();
-	};
-
-	GuideLine.prototype.updateLimit = function updateLimit() {
-		if (this.unit === 1)
-			InputSliderManager.setMax(this.topic, 100);
-		else
-			InputSliderManager.setMax(this.topic, this.max);
-	};
-
-	GuideLine.prototype.setUnit = function setUnit(type) {
-		if (type === '%')	this.unit = 1;
-		if (type === '')	this.unit = 0;
-		this.updateLimit();
-	};
-
-	/*
-	 * Unit panel
-	 */
-	var UnitPanel = (function UnitPanel () {
-
-		var panel;
-		var title;
-		var precision;
-		var step;
-		var unit_topic = null; // settings are made for this topic
-		var step_option = [1, 0.1, 0.01];
-
-		var updatePrecision = function updatePrecision(value) {
-			InputSliderManager.setPrecision('unit-step', value);
-			InputSliderManager.setStep('unit-step', step_option[value]);
-			InputSliderManager.setMin('unit-step', step_option[value]);
-
-			if (unit_topic)
-				InputSliderManager.setPrecision(unit_topic, value);
-		};
-
-		var updateUnitSettings = function updateUnitSettings(value) {
-			if (unit_topic)
-				InputSliderManager.setStep(unit_topic, value);
-		};
-
-		var show = function show(e) {
-			var topic = e.target.getAttribute('data-topic');
-			var precision = InputSliderManager.getPrecision(topic);
-			var step = InputSliderManager.getStep(topic);
-
-			unit_topic = topic;
-			title.textContent = topic;
-
-			panel.setAttribute('data-active', 'true');
-			panel.style.top = e.target.offsetTop - 40 + 'px';
-			panel.style.left = e.target.offsetLeft + 30 + 'px';
-
-			InputSliderManager.setValue('unit-precision', precision);
-			InputSliderManager.setValue('unit-step', step);
-		};
-
-		var init = function init() {
-			panel = document.createElement('div');
-			title = document.createElement('div');
-			var close = document.createElement('div');
-
-			step = InputSliderManager.createSlider('unit-step', 'step');
-			precision = InputSliderManager.createSlider('unit-precision', 'precision');
-
-			InputSliderManager.setStep('unit-precision', 1);
-			InputSliderManager.setMax('unit-precision', 2);
-			InputSliderManager.setValue('unit-precision', 2);
-			InputSliderManager.setSensivity('unit-precision', 20);
-
-			InputSliderManager.setValue('unit-step', 1);
-			InputSliderManager.setStep('unit-step', 0.01);
-			InputSliderManager.setPrecision('unit-step', 2);
-
-			InputSliderManager.subscribe('unit-precision', updatePrecision);
-			InputSliderManager.subscribe('unit-step', updateUnitSettings);
-
-			close.addEventListener('click', function () {
-				panel.setAttribute('data-active', 'false');
-			});
-
-			title.textContent = 'Properties';
-			title.className = 'title';
-			close.className = 'close';
-			panel.id = 'unit-settings';
-			panel.setAttribute('data-active', 'false');
-			panel.appendChild(title);
-			panel.appendChild(precision);
-			panel.appendChild(step);
-			panel.appendChild(close);
-			document.body.appendChild(panel);
-		};
-
-		return {
-			init : init,
-			show : show
-		};
-
-	})();
-
-	/**
-	 * Tool Manager
-	 */
-	var Tool = (function Tool() {
-		var preview_area;
-		var dropdown_unit_options = [
-			{ '' : '--', '%' : '%'},
-			{ 'px' : 'px', '%' : '%', 'em' : 'em'},
-			{ 'px' : 'px', 'em' : 'em'},
-		];
-
-		var border_slice = [];
-		var border_width = [];
-		var border_outset = [];
-
-		var border_slice_values = [];
-		var border_width_values = [];
-		var border_outset_values = [];
-
-		var border_slice_units = ['', '', '', ''];
-		var border_width_units = ['px', 'px', 'px', 'px'];
-		var border_outset_units = ['px', 'px', 'px', 'px'];
-
-		var border_fill = false;
-		var border_repeat = ['round', 'round'];
-		var CSS_code = {
-			'source' : null,
-			'slice' : null,
-			'width' : null,
-			'outset' : null,
-			'repeat' : null
-		};
-
-		var setBorderSlice = function setBorderSlice(positionID, value) {
-			border_slice[positionID] = value + border_slice_units[positionID];
-			updateBorderSlice();
-		};
-
-		var updateBorderSlice = function updateBorderSlice() {
-			var value = border_slice.join(' ');
-			if (border_fill === true)
-				value += ' fill';
-
-			preview.style.borderImageSlice = value;
-			setOutputCSS('slice', value);
-		};
-
-		var setBorderFill = function setBorderFill(value) {
-			border_fill = value;
-			var bimgslice = border_slice.join(' ');;
-			if (value === true)
-				bimgslice += ' fill';
-
-			preview.style.borderImageSlice = bimgslice;
-		};
-
-		var updateBorderWidth = function updateBorderWidth() {
-			var value = border_width.join(' ');
-			preview.style.borderImageWidth = value;
-			setOutputCSS('width', value);
-		};
-
-		var updateBorderOutset = function updateBorderOutset() {
-			var value = border_outset.join(' ');
-			preview.style.borderImageOutset = border_outset.join(' ');
-			setOutputCSS('outset', value);
-		};
-
-		var setBorderRepeat = function setBorderRepeat(obj) {
-			border_repeat[obj.value] = obj.name;
-			var value = border_repeat.join(' ');
-			preview.style.borderImageRepeat = value;
-			setOutputCSS('repeat', value);
-		};
-
-		var setOutputCSS = function setOutputCSS(topic, value) {
-			CSS_code[topic].textContent = value + ';';
-		};
-
-		var setPreviewFontSize = function setPreviewFontSize(value) {
-			preview.style.fontSize = value + 'px';
-		};
-
-		var setPreviewWidth = function setPreviewWidth(value) {
-			preview.style.width = value + 'px';
-		};
-
-		var setPreviewHeight = function setPreviewHeight(value) {
-			preview.style.height = value + 'px';
-		};
-
-		var setPreviewAreaHeight = function setPreviewAreaHeight(value) {
-			preview_area.style.height = value + 'px';
-		};
-
-		var updateDragOption = function updateDragOption(value) {
-			if (value === true)
-				subject.setAttribute('data-draggable', 'true');
-			else
-				subject.removeAttribute('data-draggable');
-		};
-
-		var createProperty = function createProperty(topic, labelID, optionsID) {
-
-			var slider = InputSliderManager.createSlider(topic, positions[labelID]);
-			var dropdown = DropDownManager.createDropDown(topic, dropdown_unit_options[optionsID]);
-
-			InputSliderManager.setSensivity(topic, 3);
-			InputSliderManager.setPrecision(topic, 1);
-
-			var property = document.createElement('div');
-			var config = document.createElement('div');
-
-			property.className = 'property';
-			config.className = 'config';
-			config.setAttribute('data-topic', topic);
-			config.addEventListener('click', UnitPanel.show);
-
-			property.appendChild(slider);
-			property.appendChild(dropdown);
-			property.appendChild(config);
-
-			return property;
-		};
-
-		var initBorderSliceControls = function initBorderSliceControls() {
-			var container = getElemById('border-slice-control');
-
-			var listenForChanges = function listenForChanges(topic, id) {
-				InputSliderManager.subscribe(topic, function(value) {
-					border_slice_values[id] = value;
-					border_slice[id] = value + border_slice_units[id];
-					updateBorderSlice();
-				});
-
-				DropDownManager.subscribe(topic, function(obj) {
-					guidelines[topic].setUnit(obj.value);
-					border_slice_units[id] = obj.value;
-					border_slice[id] = border_slice_values[id] + obj.value;
-					updateBorderSlice();
-				});
-			};
-
-			for (var i = 0; i &lt; positions.length; i++) {
-				var topic = 'slice-' + positions[i];
-				var property = createProperty(topic, i, 0);
-				listenForChanges(topic, i);
-
-				container.appendChild(property);
-			}
-
-			container.appendChild(container.children[1]);
-
-		};
-
-		var initBorderWidthControls = function initBorderWidthControls() {
-			var container = getElemById('border-width-control');
-
-			var listenForChanges = function listenForChanges(topic, id) {
-				InputSliderManager.subscribe(topic, function(value) {
-					border_width_values[id] = value;
-					border_width[id] = value + border_width_units[id];
-					updateBorderWidth();
-				});
-
-				DropDownManager.subscribe(topic, function(obj) {
-					if (obj.value === '%')
-						InputSliderManager.setMax(topic, 100);
-					else
-						InputSliderManager.setMax(topic, 1000);
-
-					border_width_units[id] = obj.value;
-					border_width[id] = border_width_values[id] + obj.value;
-					updateBorderWidth();
-				});
-			};
-
-			for (var i = 0; i &lt; positions.length; i++) {
-				var topic = 'width-' + positions[i];
-				var property = createProperty(topic, i, 1);
-				InputSliderManager.setMax(topic, 1000);
-				listenForChanges(topic, i);
-
-				container.appendChild(property);
-			}
-		};
-
-		var initBorderOutsetControls = function initBorderOutsetControls() {
-
-			var container = getElemById('border-outset-control');
-
-			var listenForChanges = function listenForChanges(topic, id) {
-				InputSliderManager.subscribe(topic, function(value) {
-					border_outset_values[id] = value;
-					border_outset[id] = value + border_outset_units[id];
-					updateBorderOutset();
-				});
-
-				DropDownManager.subscribe(topic, function(obj) {
-					border_outset_units[id] = obj.value;
-					border_outset[id] = border_outset_values[id] + obj.value;
-					updateBorderOutset();
-				});
-			};
-
-			for (var i = 0; i &lt; positions.length; i++) {
-				var topic = 'outset-' + positions[i];
-				var property = createProperty(topic, i, 2);
-				InputSliderManager.setMax(topic, 1000);
-				listenForChanges(topic, i);
-
-				container.appendChild(property);
-			}
-		};
-
-		var init = function init() {
-
-			var gallery =
-			subject = getElemById('subject');
-			preview = getElemById("preview");
-			preview_area = getElemById("preview_section");
-
-
-			CSS_code['source'] = getElemById("out-border-source");
-			CSS_code['slice'] = getElemById("out-border-slice");
-			CSS_code['width'] = getElemById("out-border-width");
-			CSS_code['outset'] = getElemById("out-border-outset");
-			CSS_code['repeat'] = getElemById("out-border-repeat");
-
-			initBorderSliceControls();
-			initBorderWidthControls();
-			initBorderOutsetControls();
-
-			var elem = document.querySelectorAll('.guideline');
-			var size = elem.length;
-			for (var i = 0; i &lt; size; i++)
-				new GuideLine(elem[i]);
-
-			PreviewControl.init();
-
-			ButtonManager.subscribe('slice-fill',setBorderFill);
-			ButtonManager.subscribe('drag-subject', updateDragOption);
-			ButtonManager.setValue('drag-subject', false);
-
-			DropDownManager.subscribe('image-repeat-X', setBorderRepeat);
-			DropDownManager.subscribe('image-repeat-Y', setBorderRepeat);
-
-			InputSliderManager.subscribe('preview-area-height', setPreviewAreaHeight);
-			InputSliderManager.subscribe('preview-width', setPreviewWidth);
-			InputSliderManager.subscribe('preview-height', setPreviewHeight);
-			InputSliderManager.subscribe('font-size', setPreviewFontSize);
-			InputSliderManager.setValue('preview-width', 300);
-			InputSliderManager.setValue('preview-height', 200);
-		};
-
-		return {
-			init: init,
-			setOutputCSS: setOutputCSS,
-			setBorderSlice: setBorderSlice
-		};
-
-	})();
-
-	/**
-	 * Init Tool
-	 */
-	var init = function init() {
-		InputSliderManager.init();
-		DropDownManager.init();
-		ButtonManager.init();
-		UnitPanel.init();
-		Tool.init();
-		ImageControl.init();
-	};
-
-	return {
-		init : init
-	};
-
-})();
-
-</pre>
-</div>
-
-<p>{{ EmbedLiveSample('Border_Image_Generator', '100%', '1270px') }}</p>
-
-<p> </p>
diff --git a/files/pt-br/web/css/css_background_and_borders/border-radius_generator/index.html b/files/pt-br/web/css/css_background_and_borders/border-radius_generator/index.html
deleted file mode 100644
index 003d65cb31..0000000000
--- a/files/pt-br/web/css/css_background_and_borders/border-radius_generator/index.html
+++ /dev/null
@@ -1,1594 +0,0 @@
----
-title: Gerador de Border-radius
-slug: Web/CSS/CSS_Background_and_Borders/Border-radius_generator
-tags:
-  - CSS
-  - Ferramentas
-translation_of: Web/CSS/CSS_Background_and_Borders/Border-radius_generator
-original_slug: Web/CSS/Tools/Border-radius_generator
----
-<p><span class="short_text" id="result_box" lang="pt"><span class="hps">Esta ferramenta</span> <span class="hps">pode</span> <span class="hps">ser</span> <span class="hps">utilizada</span> <span class="hps">para gerar o efeito </span></span>{{cssxref("border-radius")}} em CSS3.</p>
-<div class="hidden">
- <h2 id="border-radius-generator" name="border-radius-generator">border-radius</h2>
- <h3 id="HTML_Content">HTML Content</h3>
- <pre class="brush: html">&lt;div id="container"&gt;
-    &lt;div class="group section"&gt;
-        &lt;div id="preview" class="col span_12"&gt;
-            &lt;div id="subject"&gt;
-                &lt;div id="top-left" class="radius-container"
-                    data-X="left" data-Y="top"&gt;
-                &lt;/div&gt;
-                &lt;div id="top-right" class="radius-container"
-                    data-X="right" data-Y="top"&gt;
-                &lt;/div&gt;
-                &lt;div id="bottom-right" class="radius-container"
-                    data-X="right" data-Y="bottom"&gt;
-                &lt;/div&gt;
-                &lt;div id="bottom-left" class="radius-container"
-                    data-X="left" data-Y="bottom"&gt;
-                &lt;/div&gt;
-
-                &lt;div id="radius-ui-sliders"&gt;
-                    &lt;div id="tlr" class="ui-input-slider" data-topic="top-left"
-                         data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
-
-                    &lt;div id="tlw" class="ui-input-slider" data-topic="top-left-w"
-                         data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
-
-                    &lt;div id="tlh" class="ui-input-slider" data-topic="top-left-h"
-                        data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
-
-                    &lt;div id="trr" class="ui-input-slider" data-topic="top-right"
-                         data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
-
-                    &lt;div id="trw" class="ui-input-slider" data-topic="top-right-w"
-                         data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
-
-                    &lt;div id="trh" class="ui-input-slider" data-topic="top-right-h"
-                        data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
-
-                    &lt;div id="brr" class="ui-input-slider" data-topic="bottom-right"
-                         data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
-
-                    &lt;div id="brw" class="ui-input-slider" data-topic="bottom-right-w"
-                         data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
-
-                    &lt;div id="brh" class="ui-input-slider" data-topic="bottom-right-h"
-                        data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
-
-                    &lt;div id="blr" class="ui-input-slider" data-topic="bottom-left"
-                         data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
-
-                    &lt;div id="blw" class="ui-input-slider" data-topic="bottom-left-w"
-                         data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
-
-                    &lt;div id="blh" class="ui-input-slider" data-topic="bottom-left-h"
-                        data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
-                &lt;/div&gt;
-            &lt;/div&gt;
-        &lt;/div&gt;
-    &lt;/div&gt;
-    &lt;div id="controls" class="group section"&gt;
-
-        &lt;div class="group section"&gt;
-            &lt;div id="dimensions"&gt;
-                &lt;div class="ui-input-slider" data-topic="width" data-info="width"
-                     data-unit=" px" data-min="150" data-max="700" data-sensivity="1"&gt;&lt;/div&gt;
-
-                &lt;div class="ui-input-slider" data-topic="height" data-info="height"
-                    data-unit=" px" data-min="75" data-max="350" data-sensivity="1"&gt;&lt;/div&gt;
-            &lt;/div&gt;
-
-            &lt;div id="output"&gt;&lt;/div&gt;
-        &lt;/div&gt;
-
-        &lt;div class="group section"&gt;
-            &lt;div id="radius-lock"&gt;
-                &lt;div class="info"&gt; rounded corner &lt;/div&gt;
-                &lt;div class="ui-checkbox" data-topic='top-left'&gt;&lt;/div&gt;
-                &lt;div class="ui-checkbox" data-topic='top-right'&gt;&lt;/div&gt;
-                &lt;div class="ui-checkbox" data-topic='bottom-right'&gt;&lt;/div&gt;
-                &lt;div class="ui-checkbox" data-topic='bottom-left'&gt;&lt;/div&gt;
-            &lt;/div&gt;
-
-            &lt;div id="unit-selection"&gt;
-                &lt;div class="info"&gt; select border units &lt;/div&gt;
-            &lt;/div&gt;
-        &lt;/div&gt;
-
-    &lt;/div&gt;
-&lt;/div&gt;
-</pre>
- <h3 id="CSS_Content">CSS Content</h3>
- <pre class="brush: css">/*  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 &gt; 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 &gt; input {
- 	display: none;
-}
-
-.ui-checkbox &gt; 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 &gt; label:hover {
-	cursor: pointer;
-}
-
-.ui-checkbox &gt; 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 &gt; 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;
-}
-
-
-</pre>
- <h3 id="JavaScript_Content">JavaScript Content</h3>
- <pre class="brush: js"><code class="language-js">'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 &gt; 0 ? max : 100;
-		this.step = step === 0 ? 1 : step;
-		this.topic = topic;
-		this.node = node;
-		this.unit = unit;
-		this.sensivity = sensivity &gt; 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 &gt; slider.max) value = slider.max;
-		if (value &lt; slider.min)	value = slider.min;
-
-		slider.value = value;
-		slider.node.setAttribute('data-value', value);
-
-		if (send_notify !== undefined &amp;&amp; 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 &lt; 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 &lt; 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 &lt; 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' &amp;&amp; y == 'top') handle.className = 'handle handle-top-left'
-		if (x === 'right' &amp;&amp; y == 'top') handle.className = 'handle handle-top-right';
-		if (x === 'right' &amp;&amp; y == 'bottom') handle.className = 'handle handle-bottom-right';
-		if (x === 'left' &amp;&amp; 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 &amp;&amp; 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 &lt; 0)	this.size = 0;
-			if (this.size &gt; this.maxR)	this.size = this.maxR;
-			this.updateRadius();
-			this.updateBorderRadius();
-			return;
-		}
-
-		if (deltaX) {
-			this.width += this.resizeX * deltaX;
-			if (this.width &lt; 0)	this.width = 0;
-			if (this.width &gt; this.maxW)	this.width = this.maxW;
-			this.updateWidth();
-		}
-
-		if (deltaY) {
-			this.height += this.resizeY * deltaY;
-			if (this.height &lt; 0) this.height = 0;
-			if (this.height &gt; 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 &lt; 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 &lt; 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 &lt; 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
-	}
-
-})();
-
-
-</code></pre>
-</div>
-<p>{{ EmbedLiveSample('border-radius-generator', '100%', '800px', '') }}</p>
-<p> </p>
diff --git a/files/pt-br/web/css/css_backgrounds_and_borders/border-image_generator/index.html b/files/pt-br/web/css/css_backgrounds_and_borders/border-image_generator/index.html
new file mode 100644
index 0000000000..ac8d0c6c1e
--- /dev/null
+++ b/files/pt-br/web/css/css_backgrounds_and_borders/border-image_generator/index.html
@@ -0,0 +1,2628 @@
+---
+title: Gerador de Border-image
+slug: Web/CSS/CSS_Backgrounds_and_Borders/Border-image_generator
+tags:
+  - Alternativas CSS
+translation_of: Web/CSS/CSS_Background_and_Borders/Border-image_generator
+original_slug: Web/CSS/CSS_Background_and_Borders/Border-image_generator
+---
+<p><span class="short_text" id="result_box" lang="pt"><span class="hps">Esta ferramenta</span> <span class="hps">pode</span> <span class="hps">ser</span> <span class="hps">utilizada</span> <span class="hps">para gerar o valor </span></span>{{cssxref("border-image")}} em CSS3.</p>
+
+<div class="hidden">
+<h2 id="Border_Image_Generator" name="Border_Image_Generator">Border Image Generator</h2>
+
+<h3 id="HTML_Content">HTML Content</h3>
+
+<pre class="brush: html">    &lt;div id="container"&gt;
+
+        &lt;div id="gallery"&gt;
+            &lt;div id="image-gallery"&gt;
+                &lt;img class="image" src="https://mdn.mozillademos.org/files/6007/border-image-1.png" data-stateID="border1"/&gt;
+                &lt;img class="image" src="https://mdn.mozillademos.org/files/6009/border-image-2.png" data-stateID="border2"/&gt;
+                &lt;img class="image" src="https://mdn.mozillademos.org/files/6011/border-image-3.png" data-stateID="border3"/&gt;
+                &lt;img class="image" src="https://mdn.mozillademos.org/files/6013/border-image-4.png" data-stateID="border4"/&gt;
+                &lt;img class="image" src="https://mdn.mozillademos.org/files/6015/border-image-5.png" data-stateID="border5"/&gt;
+                &lt;img class="image" src="https://mdn.mozillademos.org/files/6017/border-image-6.svg" data-stateID="border6"/&gt;
+            &lt;/div&gt;
+        &lt;/div&gt;
+
+        &lt;div id="load-actions" class="group section"&gt;
+            &lt;div id="toggle-gallery" data-action="hide"&gt; &lt;/div&gt;
+            &lt;div id="load-image" class="button"&gt; Upload image &lt;/div&gt;
+            &lt;input id="remote-url" type="text" placeholder="Load an image from URL"/&gt;
+            &lt;div id="load-remote" class="button"&gt; &lt;/div&gt;
+        &lt;/div&gt;
+
+        &lt;div id="general-controls" class="group section"&gt;
+            &lt;div class="name"&gt; Control Box &lt;/div&gt;
+            &lt;div class="separator"&gt;&lt;/div&gt;
+            &lt;div class="property"&gt;
+                &lt;div class="name"&gt;scale&lt;/div&gt;
+                &lt;div class="ui-input-slider" data-topic="scale"
+                    data-unit="%" data-max="300" data-sensivity="10"&gt;
+                &lt;/div&gt;
+            &lt;/div&gt;
+            &lt;div class="separator"&gt;&lt;/div&gt;
+            &lt;div class="property"&gt;
+                &lt;div class="name"&gt;draggable&lt;/div&gt;
+                &lt;div class="ui-checkbox" data-topic='drag-subject'&gt;&lt;/div&gt;
+            &lt;/div&gt;
+            &lt;div class="property right"&gt;
+                &lt;div class="name"&gt;section height&lt;/div&gt;
+                &lt;div class="ui-input-slider" data-topic="preview-area-height"
+                    data-min="400" data-max="1000"&gt;
+                &lt;/div&gt;
+            &lt;/div&gt;
+        &lt;/div&gt;
+
+        &lt;div id="preview_section" class="group section"&gt;
+            &lt;div id="subject"&gt;
+                &lt;div class="guideline" data-axis="Y" data-topic="slice-top"&gt;&lt;/div&gt;
+                &lt;div class="guideline" data-axis="X" data-topic="slice-right"&gt;&lt;/div&gt;
+                &lt;div class="guideline" data-axis="Y" data-topic="slice-bottom"&gt;&lt;/div&gt;
+                &lt;div class="guideline" data-axis="X" data-topic="slice-left"&gt;&lt;/div&gt;
+            &lt;/div&gt;
+            &lt;div id="preview"&gt; &lt;/div&gt;
+        &lt;/div&gt;
+
+        &lt;!-- controls --&gt;
+        &lt;div id="controls" class="group section"&gt;
+
+            &lt;!-- border-image-slice --&gt;
+            &lt;div id="border-slice-control" class="category"&gt;
+                &lt;div class="title"&gt; border-image-slice &lt;/div&gt;
+                &lt;div class="property"&gt;
+                    &lt;div class="name"&gt;fill&lt;/div&gt;
+                    &lt;div class="ui-checkbox" data-topic='slice-fill'&gt;&lt;/div&gt;
+                &lt;/div&gt;
+            &lt;/div&gt;
+
+            &lt;!-- border-image-width --&gt;
+            &lt;div id="border-width-control" class="category"&gt;
+                &lt;div class="title"&gt; border-image-width &lt;/div&gt;
+            &lt;/div&gt;
+
+            &lt;!-- border-image-outset --&gt;
+            &lt;div id="border-outset-control" class="category"&gt;
+                &lt;div class="title"&gt; border-image-outset &lt;/div&gt;
+            &lt;/div&gt;
+
+            &lt;!-- other-settings --&gt;
+            &lt;div id="aditional-properties" class="category"&gt;
+                &lt;div class="title"&gt; aditional-properties &lt;/div&gt;
+                &lt;div class="property"&gt;
+                    &lt;div class="name"&gt; repeat-x &lt;/div&gt;
+                    &lt;div class="ui-dropdown border-repeat" data-topic="image-repeat-X" data-selected="2"&gt;
+                        &lt;div data-value="0"&gt;repeat&lt;/div&gt;
+                        &lt;div data-value="0"&gt;stretch&lt;/div&gt;
+                        &lt;div data-value="0"&gt;round&lt;/div&gt;
+                    &lt;/div&gt;
+                &lt;/div&gt;
+                &lt;div class="property"&gt;
+                    &lt;div class="name"&gt; repeat-y &lt;/div&gt;
+                    &lt;div class="ui-dropdown border-repeat" data-topic="image-repeat-Y" data-selected="2"&gt;
+                        &lt;div data-value="1"&gt;repeat&lt;/div&gt;
+                        &lt;div data-value="1"&gt;stretch&lt;/div&gt;
+                        &lt;div data-value="1"&gt;round&lt;/div&gt;
+                    &lt;/div&gt;
+                &lt;/div&gt;
+                &lt;div class="property"&gt;
+                    &lt;div class="ui-input-slider" data-topic="font-size" data-info="em size"
+                        data-unit="px" data-value="12" data-sensivity="3"&gt;
+                    &lt;/div&gt;
+                &lt;/div&gt;
+
+                &lt;div class="property"&gt;
+                    &lt;div class="ui-input-slider" data-topic="preview-width" data-info="width"
+                         data-unit=" px" data-min="10" data-max="10000" data-sensivity="3"&gt;&lt;/div&gt;
+                &lt;/div&gt;
+                &lt;div class="property"&gt;
+                    &lt;div class="ui-input-slider" data-topic="preview-height" data-info="height"
+                        data-unit=" px" data-min="10" data-max="10000" data-sensivity="3"&gt;
+                    &lt;/div&gt;
+                &lt;/div&gt;
+            &lt;/div&gt;
+
+
+            &lt;div id="output" class="category"&gt;
+                &lt;div class="title"&gt; CSS Code &lt;/div&gt;
+                &lt;div class="css-property"&gt;
+                    &lt;span class="name"&gt; border-image-slice: &lt;/span&gt;
+                    &lt;span id="out-border-slice" class="value"&gt; &lt;/span&gt;
+                &lt;/div&gt;
+                &lt;div class="css-property"&gt;
+                    &lt;span class="name"&gt; border-image-width: &lt;/span&gt;
+                    &lt;span id="out-border-width" class="value"&gt; &lt;/span&gt;
+                &lt;/div&gt;
+                &lt;div class="css-property"&gt;
+                    &lt;span class="name"&gt; border-image-outset: &lt;/span&gt;
+                    &lt;span id="out-border-outset" class="value"&gt; &lt;/span&gt;
+                &lt;/div&gt;
+                &lt;div class="css-property"&gt;
+                    &lt;span class="name"&gt; border-image-repeat: &lt;/span&gt;
+                    &lt;span id="out-border-repeat" class="value"&gt; &lt;/span&gt;
+                &lt;/div&gt;
+                &lt;div class="css-property"&gt;
+                    &lt;span class="name"&gt; border-image-source: &lt;/span&gt;
+                    &lt;span id="out-border-source" class="value"&gt;  &lt;/span&gt;
+                &lt;/div&gt;
+            &lt;/div&gt;
+
+        &lt;/div&gt;
+    &lt;/div&gt;</pre>
+
+<h3 id="CSS_Content">CSS Content</h3>
+
+<pre class="brush: css">/*  GRID OF TWELVE
+ * ========================================================================== */
+
+.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 {
+	height: 20px;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	-moz-user-select: none;
+	user-select: none;
+}
+
+.ui-input-slider * {
+	float: left;
+	height: 100%;
+	line-height: 100%;
+}
+
+/* Input Slider */
+
+.ui-input-slider &gt; 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 DropDown
+ */
+
+/* Dropdown */
+
+.ui-dropdown {
+	height: 2em;
+	width: 120px;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	font-size: 12px;
+
+	background-image: url("https://mdn.mozillademos.org/files/6037/drop_arrow_icon.png");
+	background-position: right center;
+	background-repeat: no-repeat;
+	background-color: #359740;
+
+	position: relative;
+
+	-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;
+}
+
+.ui-dropdown:hover {
+	cursor: pointer;
+	background-color: #208B20;
+}
+
+/* Dropdown Select Button */
+
+.ui-dropdown-select {
+	height: inherit;
+	padding: 0 0.75em;
+	color: #FFF;
+	line-height: 2em;
+}
+
+/* Dropdown List */
+
+.ui-dropdown-list {
+	width: 100%;
+	height: 150px;
+	max-height: 150px;
+	margin: 0;
+	padding: 0 0.3em;
+
+	border: 3px solid #3490D2;
+	border-color: #208B20;
+	background: #666;
+	background-color: #EEF1F5;
+	color: #000;
+
+	position: absolute;
+	top: 2em;
+	left: 0;
+	z-index: 100;
+
+	overflow: hidden;
+	transition: all 0.3s;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+.ui-dropdown-list:hover {
+	overflow: auto;
+}
+
+.ui-dropdown-list[data-hidden='true'] {
+	height: 0 !important;
+	opacity: 0;
+	visibility: hidden;
+}
+
+.ui-dropdown[data-position='left'] .ui-dropdown-list {
+	left: -100%;
+	top: 0;
+}
+
+.ui-dropdown[data-position='right'] .ui-dropdown-list {
+	left: 100%;
+	top: 0;
+}
+
+.ui-dropdown-list &gt; div {
+	width: 100%;
+	height: 1.6em;
+	margin: 0.3em 0;
+	padding: 0.3em;
+	line-height: 1em;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+.ui-dropdown-list &gt; div:hover {
+	background: #3490D2;
+	color:#FFF;
+	border-radius: 2px;
+	cursor: pointer;
+}
+
+
+/*************************************************************************************/
+/*************************************************************************************/
+
+/*
+ * UI Button
+ */
+
+/* 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 &gt; input {
+ 	display: none;
+}
+
+.ui-checkbox &gt; 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: 2px;
+	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 &gt; label:hover {
+	cursor: pointer;
+}
+
+.ui-checkbox &gt; input:checked + label {
+	background-image: url("https://mdn.mozillademos.org/files/5681/checked.png");
+	background-color: #379B4A;
+}
+
+/*************************************************************************************/
+/*************************************************************************************/
+
+/*
+ * BORDER IMAGE GENERATOR TOOL
+ */
+
+body {
+	width: 100%;
+	margin: 0 auto;
+	padding: 0 0 20px 0;
+
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+
+	/*background: url("https://mdn.mozillademos.org/files/6025/grain.png");*/
+	border: 1px solid #EEE;
+
+	-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;
+}
+
+body[data-move='X'] {
+	cursor: w-resize !important;
+}
+
+body[data-move='Y'] {
+	cursor: s-resize !important;
+}
+
+#container {
+	width: 100%;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+[data-draggable='true']:hover {
+	cursor: move;
+}
+
+[data-draggable='true']:hover &gt; * {
+	cursor: default;
+}
+
+
+
+/******************************************************************************/
+/******************************************************************************/
+
+/*
+ * Border Image Picker
+ */
+
+#gallery {
+	box-shadow: 0 0 3px 0 #BABABA;
+}
+
+#image-gallery {
+	width: 600px;
+	height: 100px;
+	margin: 0 auto;
+	transition: margin 0.4s;
+}
+
+#image-gallery .image {
+	height: 80px;
+	float: left;
+	margin: 10px;
+	opacity: 0.5;
+	background-color: #FFF;
+	box-shadow: 0px 0px 3px 1px #BABABA;
+}
+
+#image-gallery .image[selected="true"] {
+	box-shadow: 0px 0px 3px 1px #3BBA52;
+	opacity: 1;
+}
+
+#image-gallery .image:hover {
+	cursor: pointer;
+	box-shadow: 0px 0px 3px 1px #30ACE5;
+	opacity: 1;
+}
+
+#image-gallery[data-collapsed='true'] {
+	margin-top: -100px;
+}
+
+/* Load Menu */
+
+#load-actions {
+	margin: 10px 0;
+}
+
+#toggle-gallery {
+	width: 30px;
+	height: 25px;
+	margin: 10px;
+	color: #FFF;
+
+	background-image: url('https://mdn.mozillademos.org/files/6005/arrow-up-white.png');
+	background-repeat: no-repeat;
+	background-position: top 4px center;
+	background-color: #888888 !important;
+
+	border-radius: 2px;
+	float: left;
+}
+
+#toggle-gallery:hover {
+	cursor: pointer;
+}
+
+#toggle-gallery[data-action='show'] {
+	background-image: url('https://mdn.mozillademos.org/files/6001/arrow-down-white.png');
+	background-color: #888888 !important;
+}
+
+#toggle-gallery[data-action='hide'] {
+	background-image: url('https://mdn.mozillademos.org/files/6005/arrow-up-white.png');
+}
+
+.button {
+	width: 100px;
+	height: 25px;
+	margin: 10px;
+	color: #FFF;
+	text-align: center;
+	font-size: 12px;
+	line-height: 25px;
+	background-color: #379B4A;
+	border-radius: 2px;
+	float: left;
+}
+
+.button:hover {
+	cursor: pointer;
+	background-color: #3380C4;
+}
+
+#load-image {
+	float: left;
+}
+
+#load-remote {
+	width: 30px;
+	background-image: url('https://mdn.mozillademos.org/files/6003/arrow-right-white.png');
+	background-repeat: no-repeat;
+	background-position: center center;
+}
+
+#remote-url {
+	width: 200px;
+	height: 23px;
+	margin: 10px;
+	padding: 0 5px;
+	border: 1px solid #379B4A;
+	border-radius: 2px;
+	float: left;
+
+	transition: width 0.5s;
+}
+
+#remote-url:focus {
+	box-shadow: 0px 0px 3px -1px #379B4A; /*#68ACE8; */
+	border-color: rgba(55, 155, 74, 0.5);
+	width: 450px;
+}
+
+/*
+ * Visible Area
+ */
+
+#preview_section {
+	position: relative;
+	min-height: 400px;
+}
+
+/* Image Control */
+
+#subject {
+	width: 300px;
+	height: 300px;
+	background-repeat: no-repeat;
+	background-size: 100%;
+	background-color: #FFF;
+	border: 1px solid #CCC;
+
+	position: absolute;
+	z-index: 10;
+	top: 15%;
+	left: 10%;
+
+	box-shadow: 0 0 3px 0 #BABABA;
+	transition-property: width, height;
+	transition-duration: 0.1s;
+}
+
+#subject .guideline {
+	background-color: rgba(255, 255, 255, 0.7);
+	border: 1px solid rgba(0, 0, 0, 0.3);
+	position: absolute;
+}
+
+#subject .guideline:hover {
+	background-color: #F00;
+}
+
+#subject .guideline[data-active] {
+	background-color: #F00;
+	z-index: 10;
+}
+
+#subject .guideline[data-axis='X'] {
+	width: 1px;
+	height: 100%;
+	top: -1px;
+}
+
+#subject .guideline[data-axis='Y'] {
+	width: 100%;
+	height: 1px;
+	left: -1px;
+}
+
+#subject .guideline[data-axis='X']:hover {
+	cursor: w-resize;
+}
+
+#subject .guideline[data-axis='Y']:hover {
+	cursor: s-resize;
+}
+
+
+#subject .relative {
+	position: relative;
+	font-size: 12px;
+}
+
+#subject .tooltip, #subject .tooltip2 {
+	width: 40px;
+	height: 20px;
+	line-height: 20px;
+	font-size: 12px;
+	text-align: center;
+
+	position: absolute;
+	opacity: 0.5;
+	transition: opacity 0.25s;
+}
+
+#subject .tooltip {
+	background: #EEE;
+	border-radius: 2px;
+	border: 1px solid #CCC;
+}
+
+#subject .tooltip2{
+	color: #555;
+}
+
+#subject [data-active] &gt; * {
+	opacity: 1;
+}
+
+#subject .tooltip[data-info='top'] {
+	top: -10px;
+	right: -50px;
+}
+
+#subject .tooltip[data-info='right'] {
+	bottom: -30px;
+	right: -20px;
+}
+
+#subject .tooltip[data-info='bottom'] {
+	top: -10px;
+	left: -50px;
+}
+
+#subject .tooltip[data-info='left'] {
+	top: -30px;
+	right: -20px;
+}
+
+#subject .tooltip2[data-info='top'] {
+	top: -10px;
+	left: -50px;
+}
+
+#subject .tooltip2[data-info='right'] {
+	top: -30px;
+	right: -20px;
+}
+
+#subject .tooltip2[data-info='bottom'] {
+	top: -10px;
+	right: -50px;
+}
+
+#subject .tooltip2[data-info='left'] {
+	bottom: -30px;
+	right: -20px;
+}
+
+/* Preview */
+
+#preview {
+	width: 30%;
+	height: 50%;
+	background-color: #FFF;
+	text-align: center;
+	overflow: hidden;
+	position: absolute;
+	z-index: 10;
+
+	left: 60%;
+	top: 15%;
+
+	border-radius: 2px;
+	border-image-width: 20px;
+	border-image-repeat: round;
+	box-shadow: 0 0 3px 0 #BABABA;
+}
+
+#preview .resize-handle {
+	width: 10px;
+	height: 10px;
+	background: url("https://mdn.mozillademos.org/files/6027/resize.png") center center no-repeat;
+	position: absolute;
+	bottom: 0;
+	right: 0;
+}
+
+#preview .resize-handle:hover {
+	cursor: nw-resize;
+}
+
+
+/*
+ * General controls MENU
+ */
+
+#general-controls {
+	padding: 10px 30px;
+	background-color: #FFF;
+	opacity: 0.95;
+	color: #888;
+	/*border-radius: 2px;*/
+	box-shadow: 0 0 3px 0 #BABABA;
+}
+
+#general-controls .property {
+	width: 130px;
+	float: left;
+}
+
+#general-controls .name {
+	height: 20px;
+	margin: 0 10px 0 0;
+	line-height: 100%;
+	text-align: right;
+	float: left;
+}
+
+#general-controls .right {
+	width: 200px;
+	float: right;
+}
+
+#general-controls .ui-checkbox label {
+	height: 10px;
+}
+
+#general-controls .separator {
+	height: 40px;
+	width: 1px;
+	margin: -10px 15px;
+	background-color: #EEE;
+	float: left;
+}
+
+/*
+ * Controls
+ */
+
+#controls {
+	color: #444;
+	margin: 10px 0 0 0;
+}
+
+#controls .category {
+	height: 190px;
+	min-width: 260px;
+	margin: 10px;
+	padding: 10px;
+	border: 1px solid #CCC;
+	border-radius: 3px;
+	float: left;
+
+	box-shadow: 0 0 3px 0 #BABABA;
+	transition: all 0.25s;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+@media (min-width: 880px) {
+	#controls .category {
+		width: 30%;
+		margin-left: 1.66%;
+		margin-right: 1.66%;
+	}
+}
+
+@media (max-width: 879px) {
+	#controls .category {
+		width: 37%;
+		margin-left: 6.5%;
+		margin-right: 6.5%;
+	}
+}
+
+#controls .category .title {
+	width: 100%;
+	height: 30px;
+	margin: 0 0 10px 0;
+	line-height: 25px;
+
+	text-align: center;
+	color: #AAA;
+}
+
+#controls .category:hover .title {
+	color: #777;
+}
+
+#controls .category &gt; .group {
+	border: 1px solid #CCC;
+	border-radius: 2px;
+}
+
+
+/* property */
+
+#controls .property {
+	width: 250px;
+	height: 20px;
+	margin: 5px auto;
+}
+
+#controls .property .ui-input-slider {
+	margin: 0;
+	float: left;
+}
+
+#controls .property .ui-input-slider-info {
+	width: 60px;
+}
+
+#controls .property .ui-input-slider-left {
+	transition: opacity 0.15s;
+    opacity: 0;
+}
+
+#controls .property .ui-input-slider-right {
+	transition: opacity 0.15s;
+    opacity: 0;
+}
+
+#controls .property .name {
+	width: 60px;
+	height: 20px;
+	padding: 0px 10px 0px 0px;
+	text-align: right;
+	line-height: 100%;
+	float: left;
+}
+
+#controls .property .config {
+	width: 20px;
+	height: 20px;
+	float: left;
+	background: url("https://mdn.mozillademos.org/files/6021/config.png") center center no-repeat;
+	opacity: 0.5;
+}
+
+#controls .property .config:hover {
+	cursor: pointer;
+	opacity: 1;
+}
+
+#controls .ui-input-slider:hover .ui-input-slider-right {
+    opacity: 1;
+}
+
+#controls .ui-input-slider:hover .ui-input-slider-left {
+    opacity: 1;
+}
+
+#controls .property .ui-dropdown {
+	margin: 0 10px;
+	float: left;
+}
+
+
+#controls .property .ui-checkbox {
+	margin: 0 0 0 16px;
+	float: left;
+}
+
+#controls .property .ui-checkbox label {
+	height: 0.85em;
+	width: 10px;
+}
+
+/* dropdowns */
+#controls .ui-dropdown {
+	width: 50px;
+	height: 1.7em;
+	border-radius: 2px;
+}
+
+#controls .ui-dropdown-select {
+	line-height: 1.6em;
+}
+
+#controls .ui-dropdown-list {
+	top: 20px;
+}
+
+#controls .ui-dropdown-list {
+	border-width: 1px;
+	text-align: center;
+}
+
+#controls .ui-dropdown-list:hover {
+	overflow: hidden;
+}
+
+#controls .border-repeat {
+	margin: 0 0 0 16px !important;
+	width: 80px;
+}
+
+#controls .border-repeat .ui-dropdown-list {
+	height: 6.2em;
+	border-width: 1px;
+	text-align: center;
+}
+
+/* border-image-slice */
+
+
+#border-slice-control .ui-dropdown-list {
+	height: 4.3em;
+}
+
+/* border-image-width */
+
+#border-width-control .ui-dropdown-list {
+	height: 6.2em;
+}
+
+/* border-image-outset */
+
+#border-outset-control .ui-dropdown-list {
+	height: 4.3em;
+}
+
+#aditional-properties .property {
+	width: 200px;
+}
+
+#aditional-properties .ui-input-slider &gt; input {
+	width: 80px !important;
+}
+
+/* unit settings panel */
+
+#unit-settings {
+	padding: 10px;
+	position: absolute;
+
+	background: #FFF;
+
+	font-size: 12px;
+	border-radius: 3px;
+	border: 1px solid #CCC;
+	text-align: center;
+	color: #555;
+
+	position: absolute;
+	z-index: 1000;
+
+	box-shadow: 0 0 3px 0 #BABABA;
+	transition: all 0.25s;
+}
+
+#unit-settings .title {
+	width: 100%;
+	margin: -5px auto 0;
+
+	color: #666;
+	font-size: 14px;
+	font-weight: bold;
+	line-height: 25px;
+	border-bottom: 1px solid #E5E5E5;
+}
+
+#unit-settings .ui-input-slider {
+	margin: 10px 0 0 0;
+}
+
+#unit-settings .ui-input-slider-info {
+	width: 50px;
+	line-height: 1.5em;
+}
+
+#unit-settings input {
+	font-size: 12px;
+	width: 40px !important;
+}
+
+#unit-settings .close {
+	width: 16px;
+	height: 16px;
+	background: url('https://mdn.mozillademos.org/files/6019/close.png') no-repeat center center;
+	background-size: 75%;
+
+	position: absolute;
+	top: 4px;
+	right: 4px;
+	opacity: 0.5;
+}
+
+#unit-settings .close:hover {
+	cursor: pointer;
+	opacity: 1;
+}
+
+#unit-settings[data-active='true'] {
+	opacity: 1;
+}
+
+#unit-settings[data-active='false'] {
+	opacity: 0;
+	top: -100px !important;
+}
+
+/*
+ * CSS Output Code
+ */
+
+#output {
+	padding: 10px;
+	border: 2px dashed #888 !important;
+	box-shadow: none !important;
+	border-radius: 3px;
+	overflow: hidden;
+
+	-moz-user-select: text;
+	-webkit-user-select: text;
+	-ms-user-select: text;
+	user-select: text;
+}
+
+
+@media (min-width: 880px) {
+	#output {
+		width: 63.33% !important;
+	}
+}
+
+@media (max-width: 879px) {
+	#output {
+		width: 87% !important;
+	}
+}
+
+
+#output .title {
+	width: 100%;
+	height: 30px;
+	margin: 0 0 10px 0;
+	line-height: 25px;
+
+	text-align: center;
+	color: #AAA;
+}
+
+#output .css-property {
+	width: 100%;
+	margin: 0;
+	color: #555;
+	font-size: 14px;
+	line-height: 18px;
+	float: left;
+}
+
+#output .css-property .name {
+	width: 30%;
+	font-weight: bold;
+	text-align: right;
+	float: left;
+}
+
+#output .css-property .value {
+	width: 65%;
+	padding: 0 2.5%;
+	word-break: break-all;
+	float: left;
+}
+
+</pre>
+
+<h3 id="JavaScript_Content">JavaScript Content</h3>
+
+<pre class="brush: js">'use strict';
+
+/**
+ * UI-SlidersManager
+ */
+
+var InputSliderManager = (function InputSliderManager() {
+
+	var subscribers = {};
+	var sliders = [];
+
+	var InputComponent = function InputComponent(obj) {
+		var input = document.createElement('input');
+		input.setAttribute('type', 'text');
+		input.style.width = 50 + obj.precision * 10 + 'px';
+
+		input.addEventListener('click', function(e) {
+			this.select();
+		});
+
+		input.addEventListener('change', function(e) {
+			var value = parseFloat(e.target.value);
+
+			if (isNaN(value) === true)
+				setValue(obj.topic, obj.value);
+			else
+				setValue(obj.topic, value);
+		});
+
+		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) {
+			document.removeEventListener("mousemove", sliderMotion);
+			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("mouseup", slideEnd);
+			document.addEventListener("mousemove", sliderMotion);
+		});
+
+		var slideEnd = function slideEnd(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		= parseFloat(node.getAttribute('data-min'));
+		var max		= parseFloat(node.getAttribute('data-max'));
+		var step	= parseFloat(node.getAttribute('data-step'));
+		var value	= parseFloat(node.getAttribute('data-value'));
+		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;
+		var precision = node.getAttribute('data-precision') | 0;
+
+		this.min = isNaN(min) ? 0 : min;
+		this.max = isNaN(max) ? 100 : max;
+		this.precision = precision &gt;= 0 ? precision : 0;
+		this.step = step &lt; 0 || isNaN(step) ? 1 : step.toFixed(precision);
+		this.topic = topic;
+		this.node = node;
+		this.unit = unit === null ? '' : unit;
+		this.sensivity = sensivity &gt; 0 ? sensivity : 5;
+		value = isNaN(value) ? this.min : value;
+
+		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);
+
+		this.input = input;
+		sliders[topic] = this;
+		setValue(topic, value);
+	};
+
+	InputSlider.prototype.setInputValue = function setInputValue() {
+		this.input.value = this.value.toFixed(this.precision) + this.unit;
+	};
+
+	var setValue = function setValue(topic, value, send_notify) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		value = parseFloat(value.toFixed(slider.precision));
+
+		if (value &gt; slider.max) value = slider.max;
+		if (value &lt; slider.min)	value = slider.min;
+
+		slider.value = value;
+		slider.node.setAttribute('data-value', value);
+
+		slider.setInputValue();
+
+		if (send_notify === false)
+			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 setStep = function setStep(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.step = parseFloat(value);
+		setValue(topic, slider.value);
+	};
+
+	var setPrecision = function setPrecision(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		value = value | 0;
+		slider.precision = value;
+
+		var step = parseFloat(slider.step.toFixed(value));
+		if (step === 0)
+			slider.step = 1 / Math.pow(10, value);
+
+		setValue(topic, slider.value);
+	};
+
+	var setSensivity = function setSensivity(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		value = value | 0;
+
+		slider.sensivity = value &gt; 0 ? value : 5;
+	};
+
+	var getNode =  function getNode(topic) {
+		return sliders[topic].node;
+	};
+
+	var getPrecision =  function getPrecision(topic) {
+		return sliders[topic].precision;
+	};
+
+	var getStep =  function getStep(topic) {
+		return sliders[topic].step;
+	};
+
+	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() {
+		if (subscribers[this.topic] === undefined)
+			return;
+		for (var i = 0; i &lt; subscribers[this.topic].length; i++)
+			subscribers[this.topic][i](this.value);
+	};
+
+	var createSlider = function createSlider(topic, label) {
+		var slider = document.createElement('div');
+		slider.className = 'ui-input-slider';
+		slider.setAttribute('data-topic', topic);
+
+		if (label !== undefined)
+			slider.setAttribute('data-info', label);
+
+		new InputSlider(slider);
+		return slider;
+	};
+
+	var init = function init() {
+		var elem = document.querySelectorAll('.ui-input-slider');
+		var size = elem.length;
+		for (var i = 0; i &lt; size; i++)
+			new InputSlider(elem[i]);
+	};
+
+	return {
+		init : init,
+		setMax : setMax,
+		setMin : setMin,
+		setUnit : setUnit,
+		setStep : setStep,
+		getNode : getNode,
+		getStep : getStep,
+		setValue : setValue,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe,
+		setPrecision : setPrecision,
+		setSensivity : setSensivity,
+		getPrecision : getPrecision,
+		createSlider : createSlider,
+	};
+
+})();
+
+
+/**
+ * UI-DropDown Select
+ */
+
+var DropDownManager = (function DropdownManager() {
+
+	var subscribers = {};
+	var dropdowns = [];
+	var active = null;
+
+	var visbility = ["hidden", "visible"];
+
+
+	var DropDown = function DropDown(node) {
+		var topic = node.getAttribute('data-topic');
+		var label = node.getAttribute('data-label');
+		var selected = node.getAttribute('data-selected') | 0;
+
+		var select = document.createElement('div');
+		var list = document.createElement('div');
+		var uval = 0;
+		var option = null;
+		var option_value = null;
+
+		list.className = 'ui-dropdown-list';
+		select.className = 'ui-dropdown-select';
+
+		while (node.firstElementChild !== null) {
+			option = node.firstElementChild;
+			option_value = option.getAttribute('data-value');
+
+			if (option_value === null)
+				option.setAttribute('data-value', uval);
+
+			list.appendChild(node.firstElementChild);
+			uval++;
+		}
+
+		node.appendChild(select);
+		node.appendChild(list);
+
+		select.onclick = this.toggle.bind(this);
+		list.onclick = this.updateValue.bind(this);
+		document.addEventListener('click', clickOut);
+
+		this.state = 0;
+		this.time = 0;
+		this.dropmenu = list;
+		this.select = select;
+		this.toggle(false);
+		this.value = {};
+		this.topic = topic;
+
+		if (label)
+			select.textContent = label;
+		else
+			this.setNodeValue(list.children[selected]);
+
+		dropdowns[topic] = this;
+
+	};
+
+	DropDown.prototype.toggle = function toggle(state) {
+		if (typeof(state) === 'boolean')
+			this.state = state === false ? 0 : 1;
+		else
+			this.state = 1 ^ this.state;
+
+		if (active !== this) {
+			if (active)
+				active.toggle(false);
+			active = this;
+		}
+
+		if (this.state === 0)
+			this.dropmenu.setAttribute('data-hidden', 'true');
+		else
+			this.dropmenu.removeAttribute('data-hidden');
+
+	};
+
+	var clickOut = function clickOut(e) {
+		if (active.state === 0 ||
+			e.target === active.dropmenu ||
+			e.target === active.select)
+			return;
+
+		active.toggle(false);
+	};
+
+	DropDown.prototype.updateValue = function updateValue(e) {
+
+		if (Date.now() - this.time &lt; 500)
+			return;
+
+		if (e.target.className !== "ui-dropdown-list") {
+			this.setNodeValue(e.target);
+			this.toggle(false);
+		}
+
+		this.time = Date.now();
+	};
+
+	DropDown.prototype.setNodeValue = function setNodeValue(node) {
+		this.value['name'] = node.textContent;
+		this.value['value'] = node.getAttribute('data-value');
+
+		this.select.textContent = node.textContent;
+		this.select.setAttribute('data-value', this.value['value']);
+
+		notify.call(this);
+	};
+
+	var createDropDown = function createDropDown(topic, options) {
+
+		var dropdown = document.createElement('div');
+		dropdown.setAttribute('data-topic', topic);
+		dropdown.className = 'ui-dropdown';
+
+		for (var i in options) {
+			var x = document.createElement('div');
+			x.setAttribute('data-value', i);
+			x.textContent = options[i];
+			dropdown.appendChild(x);
+		}
+
+		new DropDown(dropdown);
+
+		return dropdown;
+	};
+
+	var setValue = function setValue(topic, index) {
+		if (dropdowns[topic] === undefined ||
+			index &gt;= dropdowns[topic].dropmenu.children.length)
+			return;
+
+		dropdowns[topic].setNodeValue(dropdowns[topic].dropmenu.children[index]);
+	};
+
+	var subscribe = function subscribe(topic, callback) {
+		if (subscribers[topic] === undefined)
+			subscribers[topic] = [];
+		subscribers[topic].push(callback);
+	};
+
+	var unsubscribe = function unsubscribe(topic, callback) {
+		var index = subscribers[topic].indexOf(callback);
+		subscribers[topic].splice(index, 1);
+	};
+
+	var notify = function notify() {
+		if (subscribers[this.topic] === undefined)
+			return;
+
+		for (var i in subscribers[this.topic]) {
+			subscribers[this.topic][i](this.value);
+		}
+	};
+
+	var init = function init() {
+		var elem, size;
+
+		elem = document.querySelectorAll('.ui-dropdown');
+		size = elem.length;
+		for (var i = 0; i &lt; size; i++)
+			new DropDown(elem[i]);
+
+	};
+
+	return {
+		init : init,
+		setValue : setValue,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe,
+		createDropDown : createDropDown
+	};
+
+})();
+
+
+/**
+ * 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) {
+		var obj = buttons[topic];
+		if (obj === undefined)
+			return;
+
+		obj.checkbox.checked = value;
+		notify.call(obj);
+	};
+
+	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() {
+		if (subscribers[this.topic] === undefined)
+			return;
+		for (var i = 0; i &lt; 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 &lt; size; i++)
+			new CheckBox(elem[i]);
+	};
+
+	return {
+		init : init,
+		setValue : setValue,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe
+	};
+
+})();
+
+window.addEventListener("load", function() {
+	BorderImage.init();
+});
+
+var BorderImage = (function BorderImage() {
+
+	var getElemById = document.getElementById.bind(document);
+
+	var subject;
+	var preview;
+	var guidelines = [];
+	var positions = ['top', 'right', 'bottom', 'left'];
+
+	var makeDraggable = function makeDraggable(elem) {
+
+		var offsetTop;
+		var offsetLeft;
+
+		elem.setAttribute('data-draggable', 'true');
+
+		var dragStart = function dragStart(e) {
+			if (e.target.getAttribute('data-draggable') !== 'true' ||
+				e.target !== elem || e.button !== 0)
+				return;
+
+			offsetLeft = e.clientX - elem.offsetLeft;
+			offsetTop = e.clientY - elem.offsetTop;
+
+			document.addEventListener('mousemove', mouseDrag);
+			document.addEventListener('mouseup', dragEnd);
+		};
+
+		var dragEnd = function dragEnd(e) {
+			if (e.button !== 0)
+				return;
+
+			document.removeEventListener('mousemove', mouseDrag);
+			document.removeEventListener('mouseup', dragEnd);
+		};
+
+		var mouseDrag = function mouseDrag(e) {
+
+			elem.style.left = e.clientX - offsetLeft + 'px';
+			elem.style.top = e.clientY - offsetTop + 'px';
+		};
+
+		elem.addEventListener('mousedown', dragStart, false);
+	};
+
+	var PreviewControl = function PreviewControl() {
+
+		var dragging = false;
+		var valueX = null;
+		var valueY = null;
+
+		var dragStart = function dragStart(e) {
+			if (e.button !== 0)
+				return;
+
+			valueX = e.clientX - preview.clientWidth;
+			valueY = e.clientY - preview.clientHeight;
+			dragging = true;
+
+			document.addEventListener('mousemove', mouseDrag);
+		};
+
+		var dragEnd = function dragEnd(e) {
+			if (e.button !== 0 || dragging === false)
+				return;
+
+			document.removeEventListener('mousemove', mouseDrag);
+			dragging = false;
+		};
+
+		var mouseDrag = function mouseDrag(e) {
+			InputSliderManager.setValue('preview-width', e.clientX - valueX);
+			InputSliderManager.setValue('preview-height', e.clientY - valueY);
+		};
+
+		var init = function init() {
+
+			makeDraggable(preview);
+			makeDraggable(subject);
+
+			var handle = document.createElement('div');
+			handle.className = 'resize-handle';
+
+			handle.addEventListener('mousedown', dragStart);
+			document.addEventListener('mouseup', dragEnd);
+
+			preview.appendChild(handle);
+
+		};
+
+		return {
+			init: init
+		};
+
+	}();
+
+	var ImageReader = (function ImageReader() {
+
+		var fReader = new FileReader();
+		var browse = document.createElement('input');
+
+		var loadImage = function loadImage(e) {
+			if (browse.files.length === 0)
+				return;
+
+			var file = browse.files[0];
+
+			if (file.type.slice(0, 5) !== 'image')
+				return;
+
+			fReader.readAsDataURL(file);
+
+			return false;
+		};
+
+		fReader.onload = function(e) {
+			ImageControl.loadRemoteImage(e.target.result);
+		};
+
+		var load = function load() {
+			browse.click();
+		};
+
+		browse.setAttribute('type', 'file');
+		browse.style.display = 'none';
+		browse.onchange = loadImage;
+
+		return {
+			load: load
+		};
+
+	})();
+
+	var ImageControl = (function ImageControl() {
+
+		var scale = 0.5;
+		var imgSource = new Image();
+		var imgState = null;
+		var selected = null;
+
+
+		var topics = ['slice', 'width', 'outset'];
+		var properties = {};
+		properties['border1'] = {
+			fill			: false,
+
+			slice_values	: [27, 27, 27, 27],
+			width_values	: [20, 20, 20, 20],
+			outset_values	: [0, 0, 0, 0],
+
+			slice_units		: [0, 0, 0, 0],
+			width_units		: [0, 0, 0, 0],
+			outset_units	: [0, 0, 0, 0],
+
+			repeat			: [1, 1],
+			size			: [300, 200],
+			preview_area	: 400
+		};
+
+		properties['border2'] = {
+			fill			: false,
+
+			slice_values	: [33, 33, 33, 33],
+			width_values	: [1.5, 1.5, 1.5, 1.5],
+			outset_values	: [0, 0, 0, 0],
+
+			slice_units		: [1, 1, 1, 1],
+			width_units		: [2, 2, 2, 2],
+			outset_units	: [0, 0, 0, 0],
+
+			repeat			: [2, 2],
+			size			: [300, 200],
+			preview_area	: 400
+		};
+
+		properties['border3'] = {
+			fill			: true,
+
+			slice_values	: [15, 15, 15, 15],
+			width_values	: [10, 10, 10, 10],
+			outset_values	: [0, 0, 0, 0],
+
+			slice_units		: [0, 0, 0, 0],
+			width_units		: [0, 0, 0, 0],
+			outset_units	: [0, 0, 0, 0],
+
+			repeat			: [2, 2],
+			size			: [300, 200],
+			preview_area	: 400
+		};
+
+		properties['border4'] = {
+			fill			: false,
+
+			slice_values	: [13, 13, 13, 13],
+			width_values	: [13, 13, 13, 13],
+			outset_values	: [13, 13, 13, 13],
+
+			slice_units		: [0, 0, 0, 0],
+			width_units		: [0, 0, 0, 0],
+			outset_units	: [0, 0, 0, 0],
+
+			repeat			: [0, 0],
+			size			: [300, 200],
+			preview_area	: 400
+		};
+
+		properties['border5'] = {
+			fill			: false,
+
+			slice_values	: [0, 12, 0, 12],
+			width_values	: [0, 12, 0, 12],
+			outset_values	: [0, 0, 0, 0],
+
+			slice_units		: [0, 0, 0, 0],
+			width_units		: [0, 0, 0, 0],
+			outset_units	: [0, 0, 0, 0],
+
+			repeat			: [0, 0],
+			size			: [300, 200],
+			preview_area	: 400,
+		};
+
+		properties['border6'] = {
+			fill			: false,
+
+			slice_values	: [42, 42, 42, 42],
+			width_values	: [42, 42, 42, 42],
+			outset_values	: [0, 0, 0, 0],
+
+			slice_units		: [0, 0, 0, 0],
+			width_units		: [0, 0, 0, 0],
+			outset_units	: [0, 0, 0, 0],
+
+			repeat			: [2, 2],
+			size			: [350, 350],
+			preview_area	: 500,
+		};
+
+
+		var loadLocalImage = function loadLocalImage(source) {
+			var location = "images/" + source;
+			imgSource.src = location;
+		};
+
+		var loadRemoteImage = function loadRemoteImage(source) {
+			imgSource.src = source;
+			if (selected)
+				selected.removeAttribute('selected');
+			Tool.setOutputCSS('source', 'url("' + source + '")');
+		};
+
+		var pickImage = function pickImage(e) {
+			if (e.target.className === 'image') {
+				selected = e.target;
+				selected.setAttribute('selected', 'true');
+				loadRemoteImage(e.target.src);
+				imgState = e.target.getAttribute('data-stateID');
+			}
+		};
+
+		var loadImageState = function loadImageState(stateID) {
+			if (properties[stateID] === undefined)
+				return;
+
+			var prop = properties[stateID];
+			var topic;
+			var unit_array;
+			var value_array;
+
+			for (var i in topics) {
+				for (var j=0; j&lt;4; j++) {
+					topic = topics[i] + '-' + positions[j];
+					unit_array = topics[i] + '_units';
+					value_array = topics[i] + '_values';
+					InputSliderManager.setValue(topic, prop[value_array][j]);
+					DropDownManager.setValue(topic, prop[unit_array][j]);
+				}
+			}
+
+			ButtonManager.setValue('slice-fill', prop['fill']);
+			DropDownManager.setValue('image-repeat-X', prop['repeat'][0]);
+			DropDownManager.setValue('image-repeat-Y', prop['repeat'][1]);
+			InputSliderManager.setValue('preview-width', prop['size'][0]);
+			InputSliderManager.setValue('preview-height', prop['size'][1]);
+			InputSliderManager.setValue('preview-area-height', prop['preview_area']);
+		};
+
+		var update = function update() {
+			scale =  Math.min(300, (30000 / this.width) | 0);
+			setScale(scale);
+			InputSliderManager.setValue('scale', scale, false);
+
+			subject.style.backgroundImage = 'url("' + this.src + '")';
+			preview.style.borderImageSource = 'url("' + this.src + '")';
+
+			guidelines['slice-top'].setMax(this.height);
+			guidelines['slice-right'].setMax(this.width);
+			guidelines['slice-bottom'].setMax(this.height);
+			guidelines['slice-left'].setMax(this.width);
+
+			if (imgState)
+				loadImageState(imgState);
+		};
+
+		var setScale = function setScale(value) {
+			scale = value;
+			var w = imgSource.width * scale / 100 | 0;
+			var h = imgSource.height * scale / 100 | 0;
+			subject.style.width = w + 'px';
+			subject.style.height = h + 'px';
+
+			for (var i = 0; i &lt; positions.length; i++)
+				guidelines['slice-' + positions[i]].updateGuidelinePos();
+		};
+
+		var getScale = function getScale() {
+			return scale/100;
+		};
+
+		var toggleGallery = function toggleGallery() {
+			var gallery = getElemById('image-gallery');
+			var button  = getElemById('toggle-gallery');
+			var state = 1;
+			button.addEventListener('click', function() {
+				state = 1 ^ state;
+				if (state === 0) {
+					gallery.setAttribute('data-collapsed', 'true');
+					button.setAttribute('data-action', 'show');
+				}
+				else {
+					gallery.removeAttribute('data-collapsed');
+					button.setAttribute('data-action', 'hide');
+				}
+			});
+		};
+
+		var init = function init() {
+			var gallery = getElemById('image-gallery');
+			var browse = getElemById('load-image');
+			var remote = getElemById('remote-url');
+			var load_remote = getElemById('load-remote');
+
+			remote.addEventListener('change', function(){
+				loadRemoteImage(this.value);
+			});
+
+			load_remote.addEventListener('click', function(){
+				loadRemoteImage(remote.value);
+			});
+
+			browse.addEventListener('click', ImageReader.load);
+			gallery.addEventListener('click', pickImage);
+			imgSource.addEventListener('load', update);
+
+			InputSliderManager.subscribe('scale', setScale);
+			InputSliderManager.setValue('scale', scale);
+			imgState = 'border1';
+			loadRemoteImage('https://mdn.mozillademos.org/files/6007/border-image-1.png');
+			toggleGallery();
+		};
+
+		return {
+			init: init,
+			getScale : getScale,
+			loadRemoteImage: loadRemoteImage
+		};
+
+	})();
+
+	var GuideLine = function GuideLine(node) {
+		var topic = node.getAttribute('data-topic');
+		var axis = node.getAttribute('data-axis');
+
+		this.node = node;
+		this.topic = topic;
+		this.axis = axis;
+		this.info = topic.split('-')[1];
+
+		this.position = 0;
+		this.value = 0;
+		this.unit = 0;
+		this.max = 0;
+		this.pos = positions.indexOf(this.info);
+
+		guidelines[topic] = this;
+
+		var relative_container = document.createElement('div');
+		var tooltip = document.createElement('div');
+		var tooltip2 = document.createElement('div');
+
+		tooltip.className = 'tooltip';
+		tooltip.setAttribute('data-info', this.info);
+
+		tooltip2.className = 'tooltip2';
+		tooltip2.textContent = this.info;
+		tooltip2.setAttribute('data-info', this.info);
+
+		this.tooltip = tooltip;
+
+		relative_container.appendChild(tooltip);
+		relative_container.appendChild(tooltip2);
+		node.appendChild(relative_container);
+
+		var startX = 0;
+		var startY = 0;
+		var start = 0;
+
+		var startDrag = function startDrag(e) {
+			startX = e.clientX;
+			startY = e.clientY;
+			start = guidelines[topic].position;
+			document.body.setAttribute('data-move', axis);
+			relative_container.setAttribute('data-active', '');
+			node.setAttribute('data-active', '');
+
+			document.addEventListener('mousemove', updateGuideline);
+			document.addEventListener('mouseup', endDrag);
+		};
+
+		var endDrag = function endDrag() {
+			document.body.removeAttribute('data-move');
+			relative_container.removeAttribute('data-active');
+			node.removeAttribute('data-active');
+
+			document.removeEventListener('mousemove', updateGuideline);
+		};
+
+		var updateGuideline = function updateGuideline(e) {
+			var value;
+			if (topic === 'slice-top')
+				value = e.clientY - startY + start;
+
+			if (topic === 'slice-right')
+				value = startX - e.clientX + start;
+
+			if (topic === 'slice-bottom')
+				value = startY - e.clientY + start;
+
+			if (topic === 'slice-left')
+				value = e.clientX - startX + start;
+
+			if (this.unit === 0)
+				InputSliderManager.setValue(topic, value * 1 / ImageControl.getScale() | 0);
+			else {
+				InputSliderManager.setValue(topic, (value * 100 / (this.max * ImageControl.getScale())) | 0);
+			}
+
+		}.bind(this);
+
+		node.addEventListener("mousedown", startDrag);
+
+		InputSliderManager.subscribe(topic, this.setPosition.bind(this));
+		InputSliderManager.setValue(topic, this.position);
+	};
+
+
+	GuideLine.prototype.updateGuidelinePos = function updateGuidelinePos() {
+		if (this.unit === 0)
+			this.position = this.value * ImageControl.getScale() | 0;
+		else
+			this.position = this.value * this.max * ImageControl.getScale() / 100 | 0;
+
+		this.node.style[this.info] = this.position + 'px';
+	};
+
+	GuideLine.prototype.setPosition = function setPosition(value) {
+		this.value = value;
+		this.tooltip.textContent = value;
+		this.updateGuidelinePos();
+		Tool.setBorderSlice(this.pos, value);
+	};
+
+	GuideLine.prototype.setMax = function setMax(max) {
+		this.max = max;
+		this.updateLimit();
+	};
+
+	GuideLine.prototype.updateLimit = function updateLimit() {
+		if (this.unit === 1)
+			InputSliderManager.setMax(this.topic, 100);
+		else
+			InputSliderManager.setMax(this.topic, this.max);
+	};
+
+	GuideLine.prototype.setUnit = function setUnit(type) {
+		if (type === '%')	this.unit = 1;
+		if (type === '')	this.unit = 0;
+		this.updateLimit();
+	};
+
+	/*
+	 * Unit panel
+	 */
+	var UnitPanel = (function UnitPanel () {
+
+		var panel;
+		var title;
+		var precision;
+		var step;
+		var unit_topic = null; // settings are made for this topic
+		var step_option = [1, 0.1, 0.01];
+
+		var updatePrecision = function updatePrecision(value) {
+			InputSliderManager.setPrecision('unit-step', value);
+			InputSliderManager.setStep('unit-step', step_option[value]);
+			InputSliderManager.setMin('unit-step', step_option[value]);
+
+			if (unit_topic)
+				InputSliderManager.setPrecision(unit_topic, value);
+		};
+
+		var updateUnitSettings = function updateUnitSettings(value) {
+			if (unit_topic)
+				InputSliderManager.setStep(unit_topic, value);
+		};
+
+		var show = function show(e) {
+			var topic = e.target.getAttribute('data-topic');
+			var precision = InputSliderManager.getPrecision(topic);
+			var step = InputSliderManager.getStep(topic);
+
+			unit_topic = topic;
+			title.textContent = topic;
+
+			panel.setAttribute('data-active', 'true');
+			panel.style.top = e.target.offsetTop - 40 + 'px';
+			panel.style.left = e.target.offsetLeft + 30 + 'px';
+
+			InputSliderManager.setValue('unit-precision', precision);
+			InputSliderManager.setValue('unit-step', step);
+		};
+
+		var init = function init() {
+			panel = document.createElement('div');
+			title = document.createElement('div');
+			var close = document.createElement('div');
+
+			step = InputSliderManager.createSlider('unit-step', 'step');
+			precision = InputSliderManager.createSlider('unit-precision', 'precision');
+
+			InputSliderManager.setStep('unit-precision', 1);
+			InputSliderManager.setMax('unit-precision', 2);
+			InputSliderManager.setValue('unit-precision', 2);
+			InputSliderManager.setSensivity('unit-precision', 20);
+
+			InputSliderManager.setValue('unit-step', 1);
+			InputSliderManager.setStep('unit-step', 0.01);
+			InputSliderManager.setPrecision('unit-step', 2);
+
+			InputSliderManager.subscribe('unit-precision', updatePrecision);
+			InputSliderManager.subscribe('unit-step', updateUnitSettings);
+
+			close.addEventListener('click', function () {
+				panel.setAttribute('data-active', 'false');
+			});
+
+			title.textContent = 'Properties';
+			title.className = 'title';
+			close.className = 'close';
+			panel.id = 'unit-settings';
+			panel.setAttribute('data-active', 'false');
+			panel.appendChild(title);
+			panel.appendChild(precision);
+			panel.appendChild(step);
+			panel.appendChild(close);
+			document.body.appendChild(panel);
+		};
+
+		return {
+			init : init,
+			show : show
+		};
+
+	})();
+
+	/**
+	 * Tool Manager
+	 */
+	var Tool = (function Tool() {
+		var preview_area;
+		var dropdown_unit_options = [
+			{ '' : '--', '%' : '%'},
+			{ 'px' : 'px', '%' : '%', 'em' : 'em'},
+			{ 'px' : 'px', 'em' : 'em'},
+		];
+
+		var border_slice = [];
+		var border_width = [];
+		var border_outset = [];
+
+		var border_slice_values = [];
+		var border_width_values = [];
+		var border_outset_values = [];
+
+		var border_slice_units = ['', '', '', ''];
+		var border_width_units = ['px', 'px', 'px', 'px'];
+		var border_outset_units = ['px', 'px', 'px', 'px'];
+
+		var border_fill = false;
+		var border_repeat = ['round', 'round'];
+		var CSS_code = {
+			'source' : null,
+			'slice' : null,
+			'width' : null,
+			'outset' : null,
+			'repeat' : null
+		};
+
+		var setBorderSlice = function setBorderSlice(positionID, value) {
+			border_slice[positionID] = value + border_slice_units[positionID];
+			updateBorderSlice();
+		};
+
+		var updateBorderSlice = function updateBorderSlice() {
+			var value = border_slice.join(' ');
+			if (border_fill === true)
+				value += ' fill';
+
+			preview.style.borderImageSlice = value;
+			setOutputCSS('slice', value);
+		};
+
+		var setBorderFill = function setBorderFill(value) {
+			border_fill = value;
+			var bimgslice = border_slice.join(' ');;
+			if (value === true)
+				bimgslice += ' fill';
+
+			preview.style.borderImageSlice = bimgslice;
+		};
+
+		var updateBorderWidth = function updateBorderWidth() {
+			var value = border_width.join(' ');
+			preview.style.borderImageWidth = value;
+			setOutputCSS('width', value);
+		};
+
+		var updateBorderOutset = function updateBorderOutset() {
+			var value = border_outset.join(' ');
+			preview.style.borderImageOutset = border_outset.join(' ');
+			setOutputCSS('outset', value);
+		};
+
+		var setBorderRepeat = function setBorderRepeat(obj) {
+			border_repeat[obj.value] = obj.name;
+			var value = border_repeat.join(' ');
+			preview.style.borderImageRepeat = value;
+			setOutputCSS('repeat', value);
+		};
+
+		var setOutputCSS = function setOutputCSS(topic, value) {
+			CSS_code[topic].textContent = value + ';';
+		};
+
+		var setPreviewFontSize = function setPreviewFontSize(value) {
+			preview.style.fontSize = value + 'px';
+		};
+
+		var setPreviewWidth = function setPreviewWidth(value) {
+			preview.style.width = value + 'px';
+		};
+
+		var setPreviewHeight = function setPreviewHeight(value) {
+			preview.style.height = value + 'px';
+		};
+
+		var setPreviewAreaHeight = function setPreviewAreaHeight(value) {
+			preview_area.style.height = value + 'px';
+		};
+
+		var updateDragOption = function updateDragOption(value) {
+			if (value === true)
+				subject.setAttribute('data-draggable', 'true');
+			else
+				subject.removeAttribute('data-draggable');
+		};
+
+		var createProperty = function createProperty(topic, labelID, optionsID) {
+
+			var slider = InputSliderManager.createSlider(topic, positions[labelID]);
+			var dropdown = DropDownManager.createDropDown(topic, dropdown_unit_options[optionsID]);
+
+			InputSliderManager.setSensivity(topic, 3);
+			InputSliderManager.setPrecision(topic, 1);
+
+			var property = document.createElement('div');
+			var config = document.createElement('div');
+
+			property.className = 'property';
+			config.className = 'config';
+			config.setAttribute('data-topic', topic);
+			config.addEventListener('click', UnitPanel.show);
+
+			property.appendChild(slider);
+			property.appendChild(dropdown);
+			property.appendChild(config);
+
+			return property;
+		};
+
+		var initBorderSliceControls = function initBorderSliceControls() {
+			var container = getElemById('border-slice-control');
+
+			var listenForChanges = function listenForChanges(topic, id) {
+				InputSliderManager.subscribe(topic, function(value) {
+					border_slice_values[id] = value;
+					border_slice[id] = value + border_slice_units[id];
+					updateBorderSlice();
+				});
+
+				DropDownManager.subscribe(topic, function(obj) {
+					guidelines[topic].setUnit(obj.value);
+					border_slice_units[id] = obj.value;
+					border_slice[id] = border_slice_values[id] + obj.value;
+					updateBorderSlice();
+				});
+			};
+
+			for (var i = 0; i &lt; positions.length; i++) {
+				var topic = 'slice-' + positions[i];
+				var property = createProperty(topic, i, 0);
+				listenForChanges(topic, i);
+
+				container.appendChild(property);
+			}
+
+			container.appendChild(container.children[1]);
+
+		};
+
+		var initBorderWidthControls = function initBorderWidthControls() {
+			var container = getElemById('border-width-control');
+
+			var listenForChanges = function listenForChanges(topic, id) {
+				InputSliderManager.subscribe(topic, function(value) {
+					border_width_values[id] = value;
+					border_width[id] = value + border_width_units[id];
+					updateBorderWidth();
+				});
+
+				DropDownManager.subscribe(topic, function(obj) {
+					if (obj.value === '%')
+						InputSliderManager.setMax(topic, 100);
+					else
+						InputSliderManager.setMax(topic, 1000);
+
+					border_width_units[id] = obj.value;
+					border_width[id] = border_width_values[id] + obj.value;
+					updateBorderWidth();
+				});
+			};
+
+			for (var i = 0; i &lt; positions.length; i++) {
+				var topic = 'width-' + positions[i];
+				var property = createProperty(topic, i, 1);
+				InputSliderManager.setMax(topic, 1000);
+				listenForChanges(topic, i);
+
+				container.appendChild(property);
+			}
+		};
+
+		var initBorderOutsetControls = function initBorderOutsetControls() {
+
+			var container = getElemById('border-outset-control');
+
+			var listenForChanges = function listenForChanges(topic, id) {
+				InputSliderManager.subscribe(topic, function(value) {
+					border_outset_values[id] = value;
+					border_outset[id] = value + border_outset_units[id];
+					updateBorderOutset();
+				});
+
+				DropDownManager.subscribe(topic, function(obj) {
+					border_outset_units[id] = obj.value;
+					border_outset[id] = border_outset_values[id] + obj.value;
+					updateBorderOutset();
+				});
+			};
+
+			for (var i = 0; i &lt; positions.length; i++) {
+				var topic = 'outset-' + positions[i];
+				var property = createProperty(topic, i, 2);
+				InputSliderManager.setMax(topic, 1000);
+				listenForChanges(topic, i);
+
+				container.appendChild(property);
+			}
+		};
+
+		var init = function init() {
+
+			var gallery =
+			subject = getElemById('subject');
+			preview = getElemById("preview");
+			preview_area = getElemById("preview_section");
+
+
+			CSS_code['source'] = getElemById("out-border-source");
+			CSS_code['slice'] = getElemById("out-border-slice");
+			CSS_code['width'] = getElemById("out-border-width");
+			CSS_code['outset'] = getElemById("out-border-outset");
+			CSS_code['repeat'] = getElemById("out-border-repeat");
+
+			initBorderSliceControls();
+			initBorderWidthControls();
+			initBorderOutsetControls();
+
+			var elem = document.querySelectorAll('.guideline');
+			var size = elem.length;
+			for (var i = 0; i &lt; size; i++)
+				new GuideLine(elem[i]);
+
+			PreviewControl.init();
+
+			ButtonManager.subscribe('slice-fill',setBorderFill);
+			ButtonManager.subscribe('drag-subject', updateDragOption);
+			ButtonManager.setValue('drag-subject', false);
+
+			DropDownManager.subscribe('image-repeat-X', setBorderRepeat);
+			DropDownManager.subscribe('image-repeat-Y', setBorderRepeat);
+
+			InputSliderManager.subscribe('preview-area-height', setPreviewAreaHeight);
+			InputSliderManager.subscribe('preview-width', setPreviewWidth);
+			InputSliderManager.subscribe('preview-height', setPreviewHeight);
+			InputSliderManager.subscribe('font-size', setPreviewFontSize);
+			InputSliderManager.setValue('preview-width', 300);
+			InputSliderManager.setValue('preview-height', 200);
+		};
+
+		return {
+			init: init,
+			setOutputCSS: setOutputCSS,
+			setBorderSlice: setBorderSlice
+		};
+
+	})();
+
+	/**
+	 * Init Tool
+	 */
+	var init = function init() {
+		InputSliderManager.init();
+		DropDownManager.init();
+		ButtonManager.init();
+		UnitPanel.init();
+		Tool.init();
+		ImageControl.init();
+	};
+
+	return {
+		init : init
+	};
+
+})();
+
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Border_Image_Generator', '100%', '1270px') }}</p>
+
+<p> </p>
diff --git a/files/pt-br/web/css/css_backgrounds_and_borders/border-radius_generator/index.html b/files/pt-br/web/css/css_backgrounds_and_borders/border-radius_generator/index.html
new file mode 100644
index 0000000000..5567efa9f5
--- /dev/null
+++ b/files/pt-br/web/css/css_backgrounds_and_borders/border-radius_generator/index.html
@@ -0,0 +1,1594 @@
+---
+title: Gerador de Border-radius
+slug: Web/CSS/CSS_Backgrounds_and_Borders/Border-radius_generator
+tags:
+  - CSS
+  - Ferramentas
+translation_of: Web/CSS/CSS_Background_and_Borders/Border-radius_generator
+original_slug: Web/CSS/CSS_Background_and_Borders/Border-radius_generator
+---
+<p><span class="short_text" id="result_box" lang="pt"><span class="hps">Esta ferramenta</span> <span class="hps">pode</span> <span class="hps">ser</span> <span class="hps">utilizada</span> <span class="hps">para gerar o efeito </span></span>{{cssxref("border-radius")}} em CSS3.</p>
+<div class="hidden">
+ <h2 id="border-radius-generator" name="border-radius-generator">border-radius</h2>
+ <h3 id="HTML_Content">HTML Content</h3>
+ <pre class="brush: html">&lt;div id="container"&gt;
+    &lt;div class="group section"&gt;
+        &lt;div id="preview" class="col span_12"&gt;
+            &lt;div id="subject"&gt;
+                &lt;div id="top-left" class="radius-container"
+                    data-X="left" data-Y="top"&gt;
+                &lt;/div&gt;
+                &lt;div id="top-right" class="radius-container"
+                    data-X="right" data-Y="top"&gt;
+                &lt;/div&gt;
+                &lt;div id="bottom-right" class="radius-container"
+                    data-X="right" data-Y="bottom"&gt;
+                &lt;/div&gt;
+                &lt;div id="bottom-left" class="radius-container"
+                    data-X="left" data-Y="bottom"&gt;
+                &lt;/div&gt;
+
+                &lt;div id="radius-ui-sliders"&gt;
+                    &lt;div id="tlr" class="ui-input-slider" data-topic="top-left"
+                         data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
+
+                    &lt;div id="tlw" class="ui-input-slider" data-topic="top-left-w"
+                         data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
+
+                    &lt;div id="tlh" class="ui-input-slider" data-topic="top-left-h"
+                        data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
+
+                    &lt;div id="trr" class="ui-input-slider" data-topic="top-right"
+                         data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
+
+                    &lt;div id="trw" class="ui-input-slider" data-topic="top-right-w"
+                         data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
+
+                    &lt;div id="trh" class="ui-input-slider" data-topic="top-right-h"
+                        data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
+
+                    &lt;div id="brr" class="ui-input-slider" data-topic="bottom-right"
+                         data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
+
+                    &lt;div id="brw" class="ui-input-slider" data-topic="bottom-right-w"
+                         data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
+
+                    &lt;div id="brh" class="ui-input-slider" data-topic="bottom-right-h"
+                        data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
+
+                    &lt;div id="blr" class="ui-input-slider" data-topic="bottom-left"
+                         data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
+
+                    &lt;div id="blw" class="ui-input-slider" data-topic="bottom-left-w"
+                         data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
+
+                    &lt;div id="blh" class="ui-input-slider" data-topic="bottom-left-h"
+                        data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
+                &lt;/div&gt;
+            &lt;/div&gt;
+        &lt;/div&gt;
+    &lt;/div&gt;
+    &lt;div id="controls" class="group section"&gt;
+
+        &lt;div class="group section"&gt;
+            &lt;div id="dimensions"&gt;
+                &lt;div class="ui-input-slider" data-topic="width" data-info="width"
+                     data-unit=" px" data-min="150" data-max="700" data-sensivity="1"&gt;&lt;/div&gt;
+
+                &lt;div class="ui-input-slider" data-topic="height" data-info="height"
+                    data-unit=" px" data-min="75" data-max="350" data-sensivity="1"&gt;&lt;/div&gt;
+            &lt;/div&gt;
+
+            &lt;div id="output"&gt;&lt;/div&gt;
+        &lt;/div&gt;
+
+        &lt;div class="group section"&gt;
+            &lt;div id="radius-lock"&gt;
+                &lt;div class="info"&gt; rounded corner &lt;/div&gt;
+                &lt;div class="ui-checkbox" data-topic='top-left'&gt;&lt;/div&gt;
+                &lt;div class="ui-checkbox" data-topic='top-right'&gt;&lt;/div&gt;
+                &lt;div class="ui-checkbox" data-topic='bottom-right'&gt;&lt;/div&gt;
+                &lt;div class="ui-checkbox" data-topic='bottom-left'&gt;&lt;/div&gt;
+            &lt;/div&gt;
+
+            &lt;div id="unit-selection"&gt;
+                &lt;div class="info"&gt; select border units &lt;/div&gt;
+            &lt;/div&gt;
+        &lt;/div&gt;
+
+    &lt;/div&gt;
+&lt;/div&gt;
+</pre>
+ <h3 id="CSS_Content">CSS Content</h3>
+ <pre class="brush: css">/*  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 &gt; 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 &gt; input {
+ 	display: none;
+}
+
+.ui-checkbox &gt; 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 &gt; label:hover {
+	cursor: pointer;
+}
+
+.ui-checkbox &gt; 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 &gt; 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;
+}
+
+
+</pre>
+ <h3 id="JavaScript_Content">JavaScript Content</h3>
+ <pre class="brush: js"><code class="language-js">'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 &gt; 0 ? max : 100;
+		this.step = step === 0 ? 1 : step;
+		this.topic = topic;
+		this.node = node;
+		this.unit = unit;
+		this.sensivity = sensivity &gt; 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 &gt; slider.max) value = slider.max;
+		if (value &lt; slider.min)	value = slider.min;
+
+		slider.value = value;
+		slider.node.setAttribute('data-value', value);
+
+		if (send_notify !== undefined &amp;&amp; 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 &lt; 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 &lt; 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 &lt; 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' &amp;&amp; y == 'top') handle.className = 'handle handle-top-left'
+		if (x === 'right' &amp;&amp; y == 'top') handle.className = 'handle handle-top-right';
+		if (x === 'right' &amp;&amp; y == 'bottom') handle.className = 'handle handle-bottom-right';
+		if (x === 'left' &amp;&amp; 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 &amp;&amp; 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 &lt; 0)	this.size = 0;
+			if (this.size &gt; this.maxR)	this.size = this.maxR;
+			this.updateRadius();
+			this.updateBorderRadius();
+			return;
+		}
+
+		if (deltaX) {
+			this.width += this.resizeX * deltaX;
+			if (this.width &lt; 0)	this.width = 0;
+			if (this.width &gt; this.maxW)	this.width = this.maxW;
+			this.updateWidth();
+		}
+
+		if (deltaY) {
+			this.height += this.resizeY * deltaY;
+			if (this.height &lt; 0) this.height = 0;
+			if (this.height &gt; 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 &lt; 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 &lt; 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 &lt; 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
+	}
+
+})();
+
+
+</code></pre>
+</div>
+<p>{{ EmbedLiveSample('border-radius-generator', '100%', '800px', '') }}</p>
+<p> </p>
diff --git a/files/pt-br/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html b/files/pt-br/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html
index 1078b0dbae..c52732f11c 100644
--- a/files/pt-br/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html
+++ b/files/pt-br/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html
@@ -671,7 +671,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout
 
 <p>Nesse artigo abordamos um pouco da especificação do Grid Layout. Pratique com os exemplos propostos, depois disso passe para a próxima parte onde estudaremos mais a fundo o CSS Grid Layout.</p>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li>
  <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li>
diff --git a/files/pt-br/web/css/css_grid_layout/index.html b/files/pt-br/web/css/css_grid_layout/index.html
index 28ebe9c2d6..828a548bd9 100644
--- a/files/pt-br/web/css/css_grid_layout/index.html
+++ b/files/pt-br/web/css/css_grid_layout/index.html
@@ -134,7 +134,7 @@ translation_of: Web/CSS/CSS_Grid_Layout
  </tbody>
 </table>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li>
  <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Referência</strong></a></li>
diff --git a/files/pt-br/web/css/css_grid_layout/relationship_of_grid_layout/index.html b/files/pt-br/web/css/css_grid_layout/relationship_of_grid_layout/index.html
index 358ada6d07..01353d4cab 100644
--- a/files/pt-br/web/css/css_grid_layout/relationship_of_grid_layout/index.html
+++ b/files/pt-br/web/css/css_grid_layout/relationship_of_grid_layout/index.html
@@ -581,7 +581,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout
  <li><a href="/en-US/docs/Web/CSS/CSS_Columns">Multiple-column Layout Guides</a></li>
 </ul>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li>
  <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li>
diff --git a/files/pt-br/web/css/grid-auto-flow/index.html b/files/pt-br/web/css/grid-auto-flow/index.html
index 717fe7bd31..17e79eb8f3 100644
--- a/files/pt-br/web/css/grid-auto-flow/index.html
+++ b/files/pt-br/web/css/grid-auto-flow/index.html
@@ -150,7 +150,7 @@ grid-auto-flow: unset;
  <li>Video tutorial: <em><a href="http://gridbyexample.com/video/series-auto-placement-order/">Introduzindo arrumação automática no grid e ordem</a></em></li>
 </ul>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li>
  <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li>
diff --git a/files/pt-br/web/css/grid-template-columns/index.html b/files/pt-br/web/css/grid-template-columns/index.html
index cb145bad70..670da61fb2 100644
--- a/files/pt-br/web/css/grid-template-columns/index.html
+++ b/files/pt-br/web/css/grid-template-columns/index.html
@@ -136,7 +136,7 @@ grid-template-columns: unset;
  <li>Tutorial em vídeo: <em><a href="http://gridbyexample.com/video/series-define-a-grid/">Defining a Grid</a></em></li>
 </ul>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li>
  <li><strong><a href="/en-US/docs/Web/CSS/Reference">Referência do CSS</a></strong></li>
diff --git a/files/pt-br/web/css/grid-template-rows/index.html b/files/pt-br/web/css/grid-template-rows/index.html
index f4e45409b6..1feae6ed50 100644
--- a/files/pt-br/web/css/grid-template-rows/index.html
+++ b/files/pt-br/web/css/grid-template-rows/index.html
@@ -147,7 +147,7 @@ grid-template-rows: unset;
  <li>Video tutorial: <em><a href="http://gridbyexample.com/video/series-define-a-grid/">Defining a Grid</a></em></li>
 </ul>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li>
  <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li>
diff --git a/files/pt-br/web/css/grid/index.html b/files/pt-br/web/css/grid/index.html
index 35abbc525a..52783bbbfc 100644
--- a/files/pt-br/web/css/grid/index.html
+++ b/files/pt-br/web/css/grid/index.html
@@ -128,7 +128,7 @@ grid: unset;
  <li>Guia de Layout de Grade: <em><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas#Grid_definition_shorthands">Grid template areas - Grid definition shorthands</a></em></li>
 </ul>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li>
  <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li>
diff --git a/files/pt-br/web/css/initial_value/index.html b/files/pt-br/web/css/initial_value/index.html
index 2a042a41db..8abf9aea9a 100644
--- a/files/pt-br/web/css/initial_value/index.html
+++ b/files/pt-br/web/css/initial_value/index.html
@@ -11,11 +11,11 @@ original_slug: Web/CSS/valor_inicial
 ---
 <div>{{cssref}}</div>
 
-<p>O <strong>Valor inicial</strong> de uma propriedade <a href="https://wiki.developer.mozilla.org/pt-BR/docs/Web/CSS">CSS</a> é o seu valor padrão, como listado em sua tabela de definição. O uso do valor inicial varia caso a propriedade seja herdada ou não.</p>
+<p>O <strong>Valor inicial</strong> de uma propriedade <a href="/pt-BR/docs/Web/CSS">CSS</a> é o seu valor padrão, como listado em sua tabela de definição. O uso do valor inicial varia caso a propriedade seja herdada ou não.</p>
 
 <ul>
- <li>Para <a href="https://wiki.developer.mozilla.org/pt-BR/docs/Web/CSS/inheritance#Propriedades_herdadas">propriedades herdadas</a>, o valor inicial é usado apenas em seu elemento raíz, desde que nenhum <a class="CSS 2" href="/pt-BR/docs/Web/CSS/valor_espeficifco" title="Valor especifico">valor especificado</a> seja fornecido.</li>
- <li>Para <a href="https://wiki.developer.mozilla.org/pt-BR/docs/Web/CSS/inheritance#Propriedades_nao_herdadas">propriedades não-herdadas</a>, o valor inicial é usado em todos os elementos, enquanto nenhum <a class="CSS 2" href="/pt-BR/docs/Web/CSS/valor_espeficifco" title="Valor especifico">valor especificado</a> é fornecido</li>
+ <li>Para <a href="/pt-BR/docs/Web/CSS/inheritance#Propriedades_herdadas">propriedades herdadas</a>, o valor inicial é usado apenas em seu elemento raíz, desde que nenhum <a class="CSS 2" href="/pt-BR/docs/Web/CSS/valor_espeficifco" title="Valor especifico">valor especificado</a> seja fornecido.</li>
+ <li>Para <a href="/pt-BR/docs/Web/CSS/inheritance#Propriedades_nao_herdadas">propriedades não-herdadas</a>, o valor inicial é usado em todos os elementos, enquanto nenhum <a class="CSS 2" href="/pt-BR/docs/Web/CSS/valor_espeficifco" title="Valor especifico">valor especificado</a> é fornecido</li>
 </ul>
 
 <div class="blockIndicator note">
diff --git a/files/pt-br/web/css/pseudo-classes/index.html b/files/pt-br/web/css/pseudo-classes/index.html
index 40cb2ea24c..5e332aab0e 100644
--- a/files/pt-br/web/css/pseudo-classes/index.html
+++ b/files/pt-br/web/css/pseudo-classes/index.html
@@ -20,7 +20,7 @@ button:hover {
 <p>Pseudo-classes permitem que você aplique um estilo a um elemento não apenas em relação ao conteúdo da árvore do documento, mas também em relação a fatores externos como o histórico de navegação ({{CSSxRef(":visited")}}, por exemplo), o status do seu conteúdo (como {{ CSSxRef(":checked")}} em certos elementos de um formulário), ou a posição do mouse (como {{CSSxRef(":hover")}}, que permite saber se o mouse está sobre um elemento ou não).</p>
 
 <div class="note">
-<p><strong>Observação:</strong> Diferentemente das pseudo-classes, <a href="https://wiki.developer.mozilla.org/pt-BR/docs/Web/CSS/Pseudo-elementos">pseudo-elementos</a> podem ser usados para estilizar uma <em>parte específica</em> de um elemento.</p>
+<p><strong>Observação:</strong> Diferentemente das pseudo-classes, <a href="/pt-BR/docs/Web/CSS/Pseudo-elementos">pseudo-elementos</a> podem ser usados para estilizar uma <em>parte específica</em> de um elemento.</p>
 </div>
 
 <h2 id="Sintaxe">Sintaxe</h2>
diff --git a/files/pt-br/web/css/tools/index.html b/files/pt-br/web/css/tools/index.html
deleted file mode 100644
index 2e17ae96d5..0000000000
--- a/files/pt-br/web/css/tools/index.html
+++ /dev/null
@@ -1,30 +0,0 @@
----
-title: Ferramentas
-slug: Web/CSS/Tools
-tags:
-  - CSS
-  - NeedsContent
-translation_of: Web/CSS/Tools
----
-<div>{{Draft}}</div>
-
-<p>O CSS oferece diversos recursos poderosos e um grande número de parâmetros que, às vezes, podem ser difíceis de usar. Então, é bem melhor quando você pode visualizá-los enquanto trabalha com eles.</p>
-
-<p>Esta página oferece links para várias ferramentas úteis que irão te ajudar a criar o CSS para estilizar seu conteúdo usando esses recursos.</p>
-
-<p>{{LandingPageListSubpages}}</p>
-
-<h2 id="Outras_ferramentas">Outras ferramentas</h2>
-
-<ul>
- <li>Animação em CSS - <a href="http://jeremyckahn.github.io/stylie/">Stylie</a></li>
- <li>Para verificar as informações de exibição do dispositivo (útil para {{Glossary("web design responsivo")}}) - <a href="http://mydevice.io/">mydevice.io</a></li>
- <li>Menus CSS - <a href="http://cssmenumaker.com/">cssmenumaker.com</a></li>
- <li>Um poderoso e moderno <em>linter</em> CSS que ajuda a impor convenções consistentes e evitar erros em suas folhas de estilo - <a href="https://stylelint.io/">stylelint</a></li>
-</ul>
-
-<h2 id="Veja_também">Veja também</h2>
-
-<ul>
- <li><a href="/en-US/docs/Web/CSS" title="/en-US/docs/Web/CSS">CSS</a></li>
-</ul>
diff --git a/files/pt-br/web/demos/index.html b/files/pt-br/web/demos/index.html
new file mode 100644
index 0000000000..509f06fd23
--- /dev/null
+++ b/files/pt-br/web/demos/index.html
@@ -0,0 +1,242 @@
+---
+title: Demonstrações de tecnologia web aberta
+slug: Web/Demos
+translation_of: Web/Demos_of_open_web_technologies
+original_slug: Web/Demos_of_open_web_technologies
+---
+<p class="summary">A mozilla suporta uma grande variedade de tecnologias abertas da web aberta e nós encorajamos seu uso.Esta página oferece links para demonstrações interessantes dessas tecnologia.</p>
+
+<p>Se você conhece uma boa demonstração ou aplicação da tecnologia web aberta, adicione um link para a seção apropriada aqui.</p>
+
+<h2 id="Gráficos_2D">Gráficos 2D</h2>
+
+<h3 dir="ltr" id="Tela_de_pintura">Tela de pintura</h3>
+
+<ul>
+ <li>
+  <p><a href="http://www.blobsallad.se/">Blob Sallad: an interactive blob using javascript and canvas</a> (<a href="http://blobsallad.se/article/">code demos)</a></p>
+ </li>
+ <li>
+  <p><a href="http://arapehlivanian.com/wp-content/uploads/2007/02/canvas.html">Flying through space</a></p>
+ </li>
+ <li>
+  <p><a href="/samples/raycaster/RayCaster.html" title="https://developer.mozilla.org/editor/fckeditor/core/editor/samples/raycaster/RayCaster.html">3D RayCaster</a></p>
+ </li>
+ <li>
+  <p><a href="http://processingjs.org/exhibition/">processing.js</a></p>
+ </li>
+ <li>
+  <p><a href="http://gyu.que.jp/jscloth/">3D on 2D Canvas</a></p>
+ </li>
+ <li>
+  <p><a href="http://viliusle.github.io/miniPaint/">miniPaint: Image editor</a> (<a href="https://github.com/viliusle/miniPaint">source code</a>)</p>
+ </li>
+</ul>
+
+<h3 id="SVG" name="SVG">SVG</h3>
+
+<ul>
+ <li>
+  <p><a href="http://starkravingfinkle.org/projects/demo/svg-bubblemenu-in-html.xml">Bubblemenu</a> (visual effects and interaction)</p>
+ </li>
+ <li>
+  <p><a href="http://starkravingfinkle.org/blog/2007/07/firefox-3-svg-foreignobject/">HTML transformations</a> using <code>foreignObject</code> (visual effects and transforms)</p>
+ </li>
+ <li>
+  <p><a href="http://svg-whiz.com/svg/linguistics/theCreepyMouth.svg">Phonetics Guide</a> (interactive)</p>
+ </li>
+ <li>
+  <p><a href="http://www.lutanho.net/svgvml3d/platonic.html">3D objects demo</a> (interactive)</p>
+ </li>
+ <li>
+  <p><a href="http://www.themaninblue.com/experiment/Blobular/">Blobular</a> (interactive)</p>
+ </li>
+ <li>
+  <p><a href="http://www.double.co.nz/video_test/video.svg">Video embedded in SVG</a> (or use the <a href="http://www.double.co.nz/video_test/video_svg.tar.bz2">local download</a>)</p>
+ </li>
+ <li>
+  <p><a href="http://summerstyle.github.io/summer/">Summer HTML image map creator</a> (<a href="https://github.com/summerstyle/summer">source code</a>)</p>
+ </li>
+</ul>
+
+<h3 dir="ltr" id="Vídeo">Vídeo</h3>
+
+<ul>
+ <li>
+  <p><a href="https://vimeo.com/172328210">Video 3D Animation "mozilla constantly evolving"</a></p>
+ </li>
+ <li>
+  <p><a href="https://vimeo.com/173851395">Video 3D animation "Floating Dance"</a></p>
+ </li>
+ <li>
+  <p><a href="http://www.double.co.nz/video_test/test1.html">Streaming Anime, Movie Trailer and Interview</a></p>
+ </li>
+ <li>
+  <p><a href="http://www.double.co.nz/video_test/test2.html">Billy's Browser Firefox Flick</a></p>
+ </li>
+ <li>
+  <p><a href="http://www.double.co.nz/video_test/test3.html">Virtual Barber Shop</a></p>
+ </li>
+ <li>
+  <p><a href="http://www.double.co.nz/video_test/test4.html">Transformers Movie Trailer</a></p>
+ </li>
+ <li>
+  <p><a href="http://www.double.co.nz/video_test/test5.html">A Scanner Darkly Movie Trailer</a> (with built in controls)</p>
+ </li>
+ <li>
+  <p><a href="http://www.double.co.nz/video_test/events.html">Events firing and volume control</a></p>
+ </li>
+ <li>
+  <p><a href="http://www.double.co.nz/video_test/video.svg">Dragable and sizable videos</a></p>
+ </li>
+</ul>
+
+<h2 id="Gráficos_3D">Gráficos 3D</h2>
+
+<h3 id="WebGL">WebGL</h3>
+
+<ul>
+ <li>
+  <p><a href="http://ondras.github.io/fireworks-webgl/">Web Audio Fireworks</a></p>
+ </li>
+ <li>
+  <p>IoQuake3 (<a href="https://github.com/klaussilveira/ioquake3.js">source code</a>)</p>
+ </li>
+ <li>
+  <p>Escher puzzle (<a href="https://github.com/micahbolen/demoscene">source code</a>)</p>
+ </li>
+ <li>
+  <p><a href="http://collinhover.github.io/kaiopua/">Kai 'Opua</a> (<a href="https://github.com/collinhover/kaiopua">source code</a>)</p>
+ </li>
+</ul>
+
+<h3 id="Realidade_virtual">Realidade virtual</h3>
+
+<ul>
+ <li>
+  <p><a href="http://mozvr.com/demos/polarsea/">The Polar Sea</a> (<a href="https://github.com/MozVR/polarsea">source code</a>)</p>
+ </li>
+ <li>
+  <p>Sechelt fly-through (<a href="https://github.com/mozvr/sechelt">source code</a>)</p>
+ </li>
+</ul>
+
+<h2 id="CSS">CSS</h2>
+
+<ul>
+ <li>
+  <p><a href="http://www.csszengarden.com/">CSS Zen Garden</a></p>
+ </li>
+ <li>
+  <p><a href="http://codepen.io/SoftwareRVG/pen/OXkOWj/">CSS floating logo "mozilla"</a></p>
+ </li>
+ <li>
+  <p><a href="http://felixniklas.com/paperfold/">Paperfold</a></p>
+ </li>
+ <li>
+  <p><a href="http://ondras.github.io/blockout/">CSS Blockout</a></p>
+ </li>
+ <li>
+  <p><a href="http://ondras.zarovi.cz/demos/rubik/">Rubik's cube</a></p>
+ </li>
+ <li>
+  <p><a href="http://ondras.zarovi.cz/demos/nojs/">Pure CSS Slides</a></p>
+ </li>
+ <li>
+  <p>Planetarium (<a href="https://github.com/littleworkshop/planetarium">source code</a>)</p>
+ </li>
+</ul>
+
+<h3 id="Transformações">Transformações</h3>
+
+<ul>
+ <li>
+  <p><a href="http://impress.github.io/impress.js">Impress.js</a> (<a href="https://github.com/impress/impress.js">source code</a>)</p>
+ </li>
+</ul>
+
+<h2 id="jogos">jogos</h2>
+
+<ul>
+ <li>
+  <p>IoQuake3 (<a href="https://github.com/klaussilveira/ioquake3.js">source code</a>)</p>
+ </li>
+ <li>
+  <p><a href="http://collinhover.github.io/kaiopua/">Kai 'Opua</a> (<a href="https://github.com/collinhover/kaiopua">source code</a>)</p>
+ </li>
+ <li>
+  <p><a href="https://github.com/gustavoSoriano/game-canvas">Game canvas (source code)</a></p>
+ </li>
+</ul>
+
+<h2 id="HTML">HTML</h2>
+
+<ul>
+ <li>
+  <p> <a href="http://zenphoton.com">Zen Photon Garden </a>(<a href="https://github.com/scanlime/zenphoton">source code</a>)</p>
+ </li>
+</ul>
+
+<h2 id="API_da_Web">API da Web</h2>
+
+<ul>
+</ul>
+
+<h3 id="API_de_notificações">API de notificações</h3>
+
+<ul>
+ <li>
+  <p><a href="http://elfoxero.github.io/html5notifications/">HTML5 Notifications</a> (<a href="https://github.com/elfoxero/html5notifications">source code</a>)</p>
+ </li>
+</ul>
+
+<ul>
+</ul>
+
+<h3 dir="ltr" id="API_de_áudio_da_Web">API de áudio da Web</h3>
+
+<ul>
+ <li>
+  <p><a href="http://ondras.github.io/fireworks-webgl/">Web Audio Fireworks</a></p>
+ </li>
+ <li>
+  <p><a href="http://ondras.github.io/oscope/">oscope.js - JavaScript oscilloscope</a></p>
+ </li>
+ <li>
+  <p><a href="http://nipe-systems.de/webapps/html5-web-audio/">HTML5 Web Audio Showcase</a> (<a href="https://github.com/NIPE-SYSTEMS/html5-web-audio-showcase">source code</a>)</p>
+ </li>
+ <li>
+  <p><a href="http://wayou.github.io/HTML5_Audio_Visualizer/">HTML5 Audio Visualizer</a> (<a href="https://github.com/Wayou/HTML5_Audio_Visualizer">source code</a>)</p>
+ </li>
+ <li>
+  <p><a href="http://carlosrafaelgn.com.br/GraphicalFilterEditor/">Graphical Filter Editor and Visualizer</a> (<a href="https://github.com/carlosrafaelgn/GraphicalFilterEditor">source code</a>)</p>
+ </li>
+</ul>
+
+<h3 id="API_de_arquivos">API de arquivos</h3>
+
+<ul>
+ <li>
+  <p><a href="http://palerdot.github.io/slide-my-text/">Slide My Text - presentation from plain text files</a></p>
+ </li>
+</ul>
+
+<h3 id="Unclassified" name="Unclassified">Trabalhadores da Web</h3>
+
+<ul>
+ <li>
+  <p><a href="http://ondras.github.io/fractal/">Web Worker Fractals</a></p>
+ </li>
+ <li>
+  <p><a href="http://ondras.github.io/photo/">Photo editor</a></p>
+ </li>
+ <li>
+  <p><a href="http://ondras.github.io/coral/">Coral generator</a></p>
+ </li>
+ <li>
+  <p><a href="http://nerget.com/rayjs-mt/rayjs.html">Raytracer</a></p>
+ </li>
+ <li>
+  <p><a href="http://palerdot.github.io/hotcold/">HotCold Touch Typing</a></p>
+ </li>
+</ul>
diff --git a/files/pt-br/web/demos_of_open_web_technologies/index.html b/files/pt-br/web/demos_of_open_web_technologies/index.html
deleted file mode 100644
index 3fd3092c8f..0000000000
--- a/files/pt-br/web/demos_of_open_web_technologies/index.html
+++ /dev/null
@@ -1,241 +0,0 @@
----
-title: Demonstrações de tecnologia web aberta
-slug: Web/Demos_of_open_web_technologies
-translation_of: Web/Demos_of_open_web_technologies
----
-<p class="summary">A mozilla suporta uma grande variedade de tecnologias abertas da web aberta e nós encorajamos seu uso.Esta página oferece links para demonstrações interessantes dessas tecnologia.</p>
-
-<p>Se você conhece uma boa demonstração ou aplicação da tecnologia web aberta, adicione um link para a seção apropriada aqui.</p>
-
-<h2 id="Gráficos_2D">Gráficos 2D</h2>
-
-<h3 dir="ltr" id="Tela_de_pintura">Tela de pintura</h3>
-
-<ul>
- <li>
-  <p><a href="http://www.blobsallad.se/">Blob Sallad: an interactive blob using javascript and canvas</a> (<a href="http://blobsallad.se/article/">code demos)</a></p>
- </li>
- <li>
-  <p><a href="http://arapehlivanian.com/wp-content/uploads/2007/02/canvas.html">Flying through space</a></p>
- </li>
- <li>
-  <p><a href="/samples/raycaster/RayCaster.html" title="https://developer.mozilla.org/editor/fckeditor/core/editor/samples/raycaster/RayCaster.html">3D RayCaster</a></p>
- </li>
- <li>
-  <p><a href="http://processingjs.org/exhibition/">processing.js</a></p>
- </li>
- <li>
-  <p><a href="http://gyu.que.jp/jscloth/">3D on 2D Canvas</a></p>
- </li>
- <li>
-  <p><a href="http://viliusle.github.io/miniPaint/">miniPaint: Image editor</a> (<a href="https://github.com/viliusle/miniPaint">source code</a>)</p>
- </li>
-</ul>
-
-<h3 id="SVG" name="SVG">SVG</h3>
-
-<ul>
- <li>
-  <p><a href="http://starkravingfinkle.org/projects/demo/svg-bubblemenu-in-html.xml">Bubblemenu</a> (visual effects and interaction)</p>
- </li>
- <li>
-  <p><a href="http://starkravingfinkle.org/blog/2007/07/firefox-3-svg-foreignobject/">HTML transformations</a> using <code>foreignObject</code> (visual effects and transforms)</p>
- </li>
- <li>
-  <p><a href="http://svg-whiz.com/svg/linguistics/theCreepyMouth.svg">Phonetics Guide</a> (interactive)</p>
- </li>
- <li>
-  <p><a href="http://www.lutanho.net/svgvml3d/platonic.html">3D objects demo</a> (interactive)</p>
- </li>
- <li>
-  <p><a href="http://www.themaninblue.com/experiment/Blobular/">Blobular</a> (interactive)</p>
- </li>
- <li>
-  <p><a href="http://www.double.co.nz/video_test/video.svg">Video embedded in SVG</a> (or use the <a href="http://www.double.co.nz/video_test/video_svg.tar.bz2">local download</a>)</p>
- </li>
- <li>
-  <p><a href="http://summerstyle.github.io/summer/">Summer HTML image map creator</a> (<a href="https://github.com/summerstyle/summer">source code</a>)</p>
- </li>
-</ul>
-
-<h3 dir="ltr" id="Vídeo">Vídeo</h3>
-
-<ul>
- <li>
-  <p><a href="https://vimeo.com/172328210">Video 3D Animation "mozilla constantly evolving"</a></p>
- </li>
- <li>
-  <p><a href="https://vimeo.com/173851395">Video 3D animation "Floating Dance"</a></p>
- </li>
- <li>
-  <p><a href="http://www.double.co.nz/video_test/test1.html">Streaming Anime, Movie Trailer and Interview</a></p>
- </li>
- <li>
-  <p><a href="http://www.double.co.nz/video_test/test2.html">Billy's Browser Firefox Flick</a></p>
- </li>
- <li>
-  <p><a href="http://www.double.co.nz/video_test/test3.html">Virtual Barber Shop</a></p>
- </li>
- <li>
-  <p><a href="http://www.double.co.nz/video_test/test4.html">Transformers Movie Trailer</a></p>
- </li>
- <li>
-  <p><a href="http://www.double.co.nz/video_test/test5.html">A Scanner Darkly Movie Trailer</a> (with built in controls)</p>
- </li>
- <li>
-  <p><a href="http://www.double.co.nz/video_test/events.html">Events firing and volume control</a></p>
- </li>
- <li>
-  <p><a href="http://www.double.co.nz/video_test/video.svg">Dragable and sizable videos</a></p>
- </li>
-</ul>
-
-<h2 id="Gráficos_3D">Gráficos 3D</h2>
-
-<h3 id="WebGL">WebGL</h3>
-
-<ul>
- <li>
-  <p><a href="http://ondras.github.io/fireworks-webgl/">Web Audio Fireworks</a></p>
- </li>
- <li>
-  <p>IoQuake3 (<a href="https://github.com/klaussilveira/ioquake3.js">source code</a>)</p>
- </li>
- <li>
-  <p>Escher puzzle (<a href="https://github.com/micahbolen/demoscene">source code</a>)</p>
- </li>
- <li>
-  <p><a href="http://collinhover.github.io/kaiopua/">Kai 'Opua</a> (<a href="https://github.com/collinhover/kaiopua">source code</a>)</p>
- </li>
-</ul>
-
-<h3 id="Realidade_virtual">Realidade virtual</h3>
-
-<ul>
- <li>
-  <p><a href="http://mozvr.com/demos/polarsea/">The Polar Sea</a> (<a href="https://github.com/MozVR/polarsea">source code</a>)</p>
- </li>
- <li>
-  <p>Sechelt fly-through (<a href="https://github.com/mozvr/sechelt">source code</a>)</p>
- </li>
-</ul>
-
-<h2 id="CSS">CSS</h2>
-
-<ul>
- <li>
-  <p><a href="http://www.csszengarden.com/">CSS Zen Garden</a></p>
- </li>
- <li>
-  <p><a href="http://codepen.io/SoftwareRVG/pen/OXkOWj/">CSS floating logo "mozilla"</a></p>
- </li>
- <li>
-  <p><a href="http://felixniklas.com/paperfold/">Paperfold</a></p>
- </li>
- <li>
-  <p><a href="http://ondras.github.io/blockout/">CSS Blockout</a></p>
- </li>
- <li>
-  <p><a href="http://ondras.zarovi.cz/demos/rubik/">Rubik's cube</a></p>
- </li>
- <li>
-  <p><a href="http://ondras.zarovi.cz/demos/nojs/">Pure CSS Slides</a></p>
- </li>
- <li>
-  <p>Planetarium (<a href="https://github.com/littleworkshop/planetarium">source code</a>)</p>
- </li>
-</ul>
-
-<h3 id="Transformações">Transformações</h3>
-
-<ul>
- <li>
-  <p><a href="http://impress.github.io/impress.js">Impress.js</a> (<a href="https://github.com/impress/impress.js">source code</a>)</p>
- </li>
-</ul>
-
-<h2 id="jogos">jogos</h2>
-
-<ul>
- <li>
-  <p>IoQuake3 (<a href="https://github.com/klaussilveira/ioquake3.js">source code</a>)</p>
- </li>
- <li>
-  <p><a href="http://collinhover.github.io/kaiopua/">Kai 'Opua</a> (<a href="https://github.com/collinhover/kaiopua">source code</a>)</p>
- </li>
- <li>
-  <p><a href="https://github.com/gustavoSoriano/game-canvas">Game canvas (source code)</a></p>
- </li>
-</ul>
-
-<h2 id="HTML">HTML</h2>
-
-<ul>
- <li>
-  <p> <a href="http://zenphoton.com">Zen Photon Garden </a>(<a href="https://github.com/scanlime/zenphoton">source code</a>)</p>
- </li>
-</ul>
-
-<h2 id="API_da_Web">API da Web</h2>
-
-<ul>
-</ul>
-
-<h3 id="API_de_notificações">API de notificações</h3>
-
-<ul>
- <li>
-  <p><a href="http://elfoxero.github.io/html5notifications/">HTML5 Notifications</a> (<a href="https://github.com/elfoxero/html5notifications">source code</a>)</p>
- </li>
-</ul>
-
-<ul>
-</ul>
-
-<h3 dir="ltr" id="API_de_áudio_da_Web">API de áudio da Web</h3>
-
-<ul>
- <li>
-  <p><a href="http://ondras.github.io/fireworks-webgl/">Web Audio Fireworks</a></p>
- </li>
- <li>
-  <p><a href="http://ondras.github.io/oscope/">oscope.js - JavaScript oscilloscope</a></p>
- </li>
- <li>
-  <p><a href="http://nipe-systems.de/webapps/html5-web-audio/">HTML5 Web Audio Showcase</a> (<a href="https://github.com/NIPE-SYSTEMS/html5-web-audio-showcase">source code</a>)</p>
- </li>
- <li>
-  <p><a href="http://wayou.github.io/HTML5_Audio_Visualizer/">HTML5 Audio Visualizer</a> (<a href="https://github.com/Wayou/HTML5_Audio_Visualizer">source code</a>)</p>
- </li>
- <li>
-  <p><a href="http://carlosrafaelgn.com.br/GraphicalFilterEditor/">Graphical Filter Editor and Visualizer</a> (<a href="https://github.com/carlosrafaelgn/GraphicalFilterEditor">source code</a>)</p>
- </li>
-</ul>
-
-<h3 id="API_de_arquivos">API de arquivos</h3>
-
-<ul>
- <li>
-  <p><a href="http://palerdot.github.io/slide-my-text/">Slide My Text - presentation from plain text files</a></p>
- </li>
-</ul>
-
-<h3 id="Unclassified" name="Unclassified">Trabalhadores da Web</h3>
-
-<ul>
- <li>
-  <p><a href="http://ondras.github.io/fractal/">Web Worker Fractals</a></p>
- </li>
- <li>
-  <p><a href="http://ondras.github.io/photo/">Photo editor</a></p>
- </li>
- <li>
-  <p><a href="http://ondras.github.io/coral/">Coral generator</a></p>
- </li>
- <li>
-  <p><a href="http://nerget.com/rayjs-mt/rayjs.html">Raytracer</a></p>
- </li>
- <li>
-  <p><a href="http://palerdot.github.io/hotcold/">HotCold Touch Typing</a></p>
- </li>
-</ul>
diff --git a/files/pt-br/web/guide/printing/index.html b/files/pt-br/web/guide/printing/index.html
index 7819266b9f..7d2da90fe6 100644
--- a/files/pt-br/web/guide/printing/index.html
+++ b/files/pt-br/web/guide/printing/index.html
@@ -60,7 +60,7 @@ translation_of: Web/Guide/Printing
 &lt;/html&gt;
 </pre>
 
-<div><a href="https://wiki.developer.mozilla.org/samples/domref/printevents.html">Ver Exemplo</a></div>
+<div><a href="/samples/domref/printevents.html">Ver Exemplo</a></div>
 
 <h3 id="Imprimir_uma_página_externa_sem_abri-la">Imprimir uma página externa sem abri-la</h3>
 
diff --git a/files/pt-br/web/html/element/cite/index.html b/files/pt-br/web/html/element/cite/index.html
index 48e43bd17a..b11c77f9ad 100644
--- a/files/pt-br/web/html/element/cite/index.html
+++ b/files/pt-br/web/html/element/cite/index.html
@@ -50,18 +50,18 @@ translation_of: Web/HTML/Element/cite
 
 <h2 id="Exemplo">Exemplo</h2>
 
-<pre class="brush: html notranslate">Mais infirmações podem ser encontrada em &lt;cite&gt;[ISO-0000]&lt;/cite&gt;.</pre>
+<pre class="brush: html notranslate">Mais informações podem ser encontradas em &lt;cite&gt;[ISO-0000]&lt;/cite&gt;.</pre>
 
 <p>A saída do HTML acima:</p>
 
-<p>Mais infirmações podem ser encontrada em <cite>[ISO-0000].</cite></p>
+<p>Mais informações podem ser encontradas em <cite>[ISO-0000].</cite></p>
 
 <h2 id="Especificação">Especificação</h2>
 
 <table class="standard-table">
  <thead>
   <tr>
-   <th scope="col">Specificação</th>
+   <th scope="col">Especificação</th>
    <th scope="col">Estado</th>
    <th scope="col">Comentário</th>
   </tr>
diff --git a/files/pt-br/web/html/element/embed/index.html b/files/pt-br/web/html/element/embed/index.html
index 32469c38d5..21568d0d96 100644
--- a/files/pt-br/web/html/element/embed/index.html
+++ b/files/pt-br/web/html/element/embed/index.html
@@ -52,7 +52,7 @@ translation_of: Web/HTML/Element/embed
  <dt>{{htmlattrdef("src")}}</dt>
  <dd>A URL do recurso que está sendo incorporado.</dd>
  <dt>{{htmlattrdef("type")}}</dt>
- <dd>O <a href="https://wiki.developer.mozilla.org/en-US/docs/Glossary/MIME_type">tipo MIME</a> a ser usado para a seleção do <em>plug-in</em> de instanciação.</dd>
+ <dd>O <a href="/en-US/docs/Glossary/MIME_type">tipo MIME</a> a ser usado para a seleção do <em>plug-in</em> de instanciação.</dd>
  <dt>{{htmlattrdef("width")}}</dt>
  <dd>A largura apresentada do recurso, em CSS pixels. Este deve ser um valor absoluto; porcentagens <em>não </em>são permitidas.</dd>
  <dt></dt>
diff --git a/files/pt-br/web/html/element/img/index.html b/files/pt-br/web/html/element/img/index.html
index f87f9f0bcf..4e23168ce4 100644
--- a/files/pt-br/web/html/element/img/index.html
+++ b/files/pt-br/web/html/element/img/index.html
@@ -187,7 +187,7 @@ translation_of: Web/HTML/Element/img
  <li><a class="external external-icon" href="https://www.w3.org/WAI/tutorials/images/decision-tree/">An alt Decision Tree • Images • WAI Web Accessibility Tutorials</a></li>
  <li><a class="external external-icon" href="https://axesslab.com/alt-texts/">Alt-texts: The Ultimate Guide — Axess Lab</a></li>
  <li><a class="external external-icon" href="https://www.deque.com/blog/great-alt-text-introduction/">How to Design Great Alt Text: An Introduction | Deque</a></li>
- <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.1_—_Providing_text_alternatives_for_non-text_content">MDN Understanding WCAG, Guideline 1.1 explanations</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.1_—_Providing_text_alternatives_for_non-text_content">MDN Understanding WCAG, Guideline 1.1 explanations</a></li>
  <li><a class="external external-icon" href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/text-equiv-all.html">Understanding Success Criterion 1.1.1 | W3C Understanding WCAG 2.0</a></li>
 </ul>
 
@@ -195,7 +195,7 @@ translation_of: Web/HTML/Element/img
 
 <p>O atributo {{htmlattrxref("title")}} não é um substituto aceitável para o atributo <code>alt</code>. Além disso, evite duplicar o valor do atributo <code>alt</code> no atributo <code>title</code> para uma mesma imagem. Isso pode fazer com que alguns programas leitores de tela narrem duas vezes a descrição, o que pode criar uma experiência confusa para usuários.</p>
 
-<p>Evite usar o atributo <code>title</code> como uma forma suplementar de legenda para a descrição do <code>alt</code>. Caso a imagem precise de uma legenda, prefisa os elementos <code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Element/figure">figure</a></code> e <code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Element/figcaption">figcaption</a></code>.</p>
+<p>Evite usar o atributo <code>title</code> como uma forma suplementar de legenda para a descrição do <code>alt</code>. Caso a imagem precise de uma legenda, prefisa os elementos <code><a href="/en-US/docs/Web/HTML/Element/figure">figure</a></code> e <code><a href="/en-US/docs/Web/HTML/Element/figcaption">figcaption</a></code>.</p>
 
 <p>O valor do atributo <code>title</code> é geralmente mostrado ao usuário como uma dica, que aparece após o usuário parar o cursor sobre a imagem. Apesar de <em>poder</em> <em>prover</em> informações adicionais ao usuário, não se deve assumir todos os usuários vão vê-lo, pois o mesmo pode possuir apenas um teclado ou uma tela de toque (touchscreen). Se você considera a informação particularmente importante para o usuário, prefira o uso de elementos inline.</p>
 
diff --git a/files/pt-br/web/html/global_attributes/contenteditable/index.html b/files/pt-br/web/html/global_attributes/contenteditable/index.html
index 56794951ad..19b19fd774 100644
--- a/files/pt-br/web/html/global_attributes/contenteditable/index.html
+++ b/files/pt-br/web/html/global_attributes/contenteditable/index.html
@@ -68,7 +68,7 @@ translation_of: Web/HTML/Global_attributes/contenteditable
 
 <ul>
  <li><a href="/en-US/docs/Web/Guide/HTML/Editable_content">Tornando o conteúdo editável</a></li>
- <li>Todos os <a href="https://wiki.developer.mozilla.org/pt-BR/docs/Web/HTML/Global_attributes">atributos globais</a></li>
+ <li>Todos os <a href="/pt-BR/docs/Web/HTML/Global_attributes">atributos globais</a></li>
  <li>{{domxref("HTMLElement.contentEditable")}} e {{domxref("HTMLElement.isContentEditable")}}</li>
  <li>A propriedade {{cssxref("caret-color")}} do CSS.</li>
  <li><a href="https://developer.mozilla.org/pt-BR/docs/Web/Events/input">Evento de <code>input</code> - <code>HTMLElement</code></a></li>
diff --git a/files/pt-br/web/html/global_attributes/tabindex/index.html b/files/pt-br/web/html/global_attributes/tabindex/index.html
index 9357c66c56..85cb06ff01 100644
--- a/files/pt-br/web/html/global_attributes/tabindex/index.html
+++ b/files/pt-br/web/html/global_attributes/tabindex/index.html
@@ -21,7 +21,7 @@ translation_of: Web/HTML/Global_attributes/tabindex
  <li>um <em>valor negativo</em> (geralmente <code>tabindex="-1"</code>) significa que o elemento não deve ser localizado pela navegação sequencial do teclado, mas pode ser focável visualmente ou com JavaScript. Isso é mais útil para criar widgets accessíveis com JavaScript.
 
   <div class="note">
-  <p>Um valor negativo é útil quando você tem conteúdo fora da tela que aparece com um evento específico. O usuário não poder focar em nenhum elemento com um <code>tabindex</code> negativo utilizando o teclado, porém um script pode o fazer utilizando o <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus">método</a> <code>focus()</code>.</p>
+  <p>Um valor negativo é útil quando você tem conteúdo fora da tela que aparece com um evento específico. O usuário não poder focar em nenhum elemento com um <code>tabindex</code> negativo utilizando o teclado, porém um script pode o fazer utilizando o <a href="/en-US/docs/Web/API/HTMLElement/focus">método</a> <code>focus()</code>.</p>
   </div>
  </li>
  <li><code>tabindex="0"</code> significa que o elemento deve ser focável e que pode ser localizado pela navegação sequencial do teclado, mas a sua posição será definida pela ordem no código-fonte do documento;</li>
diff --git a/files/pt-br/web/http/headers/accept-language/index.html b/files/pt-br/web/http/headers/accept-language/index.html
index 9c9c71811a..6f1e8ab3a1 100644
--- a/files/pt-br/web/http/headers/accept-language/index.html
+++ b/files/pt-br/web/http/headers/accept-language/index.html
@@ -10,9 +10,9 @@ translation_of: Web/HTTP/Headers/Accept-Language
 
 <p>O cabeçalho HTTP <strong><code>Accept-Language</code></strong> anuncia quais linguas o cliente é capaz de entender, e qual é a preferência do variante do Locale. (Por Linguas, queremos dizer linguas como Inglês e portugues) Usando <a href="/en-US/docs/Web/HTTP/Content_negotiation">content negotiation</a>, o servidor seleciona uma das propostas, usa ela e informa o cliente da sua escolha com o {{HTTPHeader("Content-Language")}} cabeçalho de responsta. Navegadores configuram valores adequados para este cabeçalhos de acordo com a língua configurada pelo usuario. </p>
 
-<p>Este cabeçalho é uma dica a ser usada pelo servicor quando ele não possui outra forma de determinar a lingua do cliente, como uma URL específica, que é controlada por uma decisão explicita do usuário. É recomendado que o servidor nunca sobreescreva uma decisão explícita. O conteúdo de <code>Accept-Language</code> está comumente fora do controle do usuário (em uma viagem a outro país por exemplo); O usuário pode querer acessar a pagina em outra lingua diferente da decidida pelo navegador.</p>
+<p>Este cabeçalho é uma dica a ser usada pelo servidor quando ele não possui outra forma de determinar a lingua do cliente, como uma URL específica, que é controlada por uma decisão explicita do usuário. É recomendado que o servidor nunca sobreescreva uma decisão explícita. O conteúdo de <code>Accept-Language</code> está comumente fora do controle do usuário (em uma viagem a outro país por exemplo); O usuário pode querer acessar a página em outra língua diferente da decidida pelo navegador.</p>
 
-<p>Se o servicor não encontrar uma língua correspondente, ele pode, teóricamente responder com o código de erro{{HTTPStatus("406")}} (Not Acceptable) . Mas, para uma melhor experiencia de usuário, iss o raramente é feito. Mais comumente, quando isso ocorre, o cabeçalho é ignorado.</p>
+<p>Se o servicor não encontrar uma língua correspondente, ele pode, teóricamente responder com o código de erro{{HTTPStatus("406")}} (Not Acceptable) . Mas, para uma melhor experiência de usuário, isso raramente é feito. Mais comumente, quando isso ocorre, o cabeçalho é ignorado.</p>
 
 <table class="properties">
  <tbody>
diff --git a/files/pt-br/web/http/headers/index.html b/files/pt-br/web/http/headers/index.html
index bb02e87319..996ace6cf4 100644
--- a/files/pt-br/web/http/headers/index.html
+++ b/files/pt-br/web/http/headers/index.html
@@ -71,13 +71,13 @@ translation_of: Web/HTTP/Headers
 
 <h2 id="Client_hints">Client hints</h2>
 
-<p>O recurso HTTP <a href="https://wiki.developer.mozilla.org/docs/Glossary/Client_hints">Client hints</a> ainda está em desenvolvimento. A documentação está disponível no site do <a href="https://httpwg.org/http-extensions/client-hints.html">HTTP working group.</a></p>
+<p>O recurso HTTP <a href="/pt-BR/docs/Glossary/Client_hints">Client hints</a> ainda está em desenvolvimento. A documentação está disponível no site do <a href="https://httpwg.org/http-extensions/client-hints.html">HTTP working group.</a></p>
 
 <dl>
  <dt>{{HTTPHeader("Accept-CH")}} {{experimental_inline}}</dt>
- <dd>Os servidores podem dar suporte para o <a href="https://wiki.developer.mozilla.org/docs/Glossary/Client_hints">Client hints</a> usando o campo de cabeçalho Accept-CH ou um elemento HTML &lt;meta&gt; equivalente com atributo http-equiv ([HTML5]).</dd>
+ <dd>Os servidores podem dar suporte para o <a href="/pt-BR/docs/Glossary/Client_hints">Client hints</a> usando o campo de cabeçalho Accept-CH ou um elemento HTML &lt;meta&gt; equivalente com atributo http-equiv ([HTML5]).</dd>
  <dt>{{HTTPHeader("Accept-CH-Lifetime")}} {{experimental_inline}}</dt>
- <dd>Os servidores podem solicitar ao cliente que lembre-se do conjunto de <a href="https://wiki.developer.mozilla.org/docs/Glossary/Client_hints">Client hints</a> que o servidor dá suporte por um período de tempo especificado, para permitir a entrega de <a href="https://wiki.developer.mozilla.org/docs/Glossary/Client_hints">Client hints</a> em solicitações seguidas ao servidor de origem([RFC6454]).</dd>
+ <dd>Os servidores podem solicitar ao cliente que lembre-se do conjunto de <a href="/pt-BR/docs/Glossary/Client_hints">Client hints</a> que o servidor dá suporte por um período de tempo especificado, para permitir a entrega de <a href="/pt-BR/docs/Glossary/Client_hints">Client hints</a> em solicitações seguidas ao servidor de origem([RFC6454]).</dd>
  <dt>{{HTTPHeader("Content-DPR")}} {{experimental_inline}}</dt>
  <dd><span class="tlid-translation translation" lang="pt"><span title="">Um número que indica a proporção entre pixels físicos sobre pixels CSS da resposta de imagem selecionada.</span></span></dd>
  <dt>{{HTTPHeader("DPR")}} {{experimental_inline}}</dt>
@@ -177,7 +177,7 @@ translation_of: Web/HTTP/Headers
  <dt>{{HTTPHeader("Origin")}}</dt>
  <dd>Inddica de onde uma busca se origina.</dd>
  <dt>{{HTTPHeader("Timing-Allow-Origin")}}</dt>
- <dd>Especifica as origens que tem permissão para ver valores de atributos recuperados por meio de recursos da API de Tempo de Recurso (<a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Resource_Timing_API">Resource Timing API</a>) que, de outra forma, seriam relatados como zero devido a restrições de origem cruzada (cross-origin restrictions).</dd>
+ <dd>Especifica as origens que tem permissão para ver valores de atributos recuperados por meio de recursos da API de Tempo de Recurso (<a href="/pt-BR/en-US/docs/Web/API/Resource_Timing_API">Resource Timing API</a>) que, de outra forma, seriam relatados como zero devido a restrições de origem cruzada (cross-origin restrictions).</dd>
 </dl>
 
 <h2 id="Do_Not_Track">Do Not Track</h2>
diff --git a/files/pt-br/web/javascript/guide/modules/index.html b/files/pt-br/web/javascript/guide/modules/index.html
index a9f6162954..a3b0c0bd53 100644
--- a/files/pt-br/web/javascript/guide/modules/index.html
+++ b/files/pt-br/web/javascript/guide/modules/index.html
@@ -83,7 +83,7 @@ modules/
 
 <p>No entanto, decidimos continuar usando .js, pelo menos por enquanto. Para que os módulos funcionem corretamente em um navegador, você precisa garantir que seu servidor os esteja servindo com um cabeçalho Content-Type que contenha um tipo MIME JavaScript, como text / javascript. Caso contrário, você receberá um erro estrito de verificação do tipo MIME, de acordo com as linhas "O servidor respondeu com um tipo MIME não JavaScript" e o navegador não executará seu JavaScript. A maioria dos servidores já define o tipo correto para arquivos .js, mas ainda não para arquivos .mjs. Servidores que já veiculam arquivos .mjs incluem corretamente <a href="https://pages.github.com/">GitHub Pages</a> e <code><a href="https://github.com/http-party/http-server#readme">http-server</a></code> para Node.js.</p>
 
-<p>Tudo bem se você já estiver usando esse ambiente ou se não estiver, mas souber o que está fazendo e tiver acesso (ou seja, você pode configurar o servidor para definir a configuração correta <code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Type">Content-Type</a></code> para arquivos <code>.mjs</code>). No entanto, isso pode causar confusão se você não controlar o servidor do qual está servindo arquivos ou publicar arquivos para uso público, como estamos aqui.</p>
+<p>Tudo bem se você já estiver usando esse ambiente ou se não estiver, mas souber o que está fazendo e tiver acesso (ou seja, você pode configurar o servidor para definir a configuração correta <code><a href="/en-US/docs/Web/HTTP/Headers/Content-Type">Content-Type</a></code> para arquivos <code>.mjs</code>). No entanto, isso pode causar confusão se você não controlar o servidor do qual está servindo arquivos ou publicar arquivos para uso público, como estamos aqui.</p>
 
 <p>Para fins de aprendizado e portabilidade, decidimos manter o<code>.js</code>.</p>
 
diff --git a/files/pt-br/web/javascript/guide/regular_expressions/index.html b/files/pt-br/web/javascript/guide/regular_expressions/index.html
index 038cccb762..17363ea837 100644
--- a/files/pt-br/web/javascript/guide/regular_expressions/index.html
+++ b/files/pt-br/web/javascript/guide/regular_expressions/index.html
@@ -40,7 +40,7 @@ translation_of: Web/JavaScript/Guide/Regular_Expressions
 <p>Usando o construtor, a compilação da expressão regular é realizada em tempo de execução. Use o construtor quando souber que o padrão da expressão regular irá mudar ou quando o padrão for desconhecido, oriundo de outra fonte, uma entrada de usuário por exemplo.</p>
 
 <div class="blockIndicator note">
-<p>Nota: Se você já está familiarizado com as formas de uma expressão regular, também pode ler o <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions/Cheatsheet">resumo</a>  para uma rápida pesquisa de um padrão específico.</p>
+<p>Nota: Se você já está familiarizado com as formas de uma expressão regular, também pode ler o <a href="/en-US/docs/Web/JavaScript/Guide/Regular_Expressions/Cheatsheet">resumo</a>  para uma rápida pesquisa de um padrão específico.</p>
 </div>
 
 <h2 id="Escrevendo_um_padrão_de_expressão_regular"><a id="escrita_expressao_regular" name="escrita_expressao_regular">Escrevendo um padrão de expressão regular</a></h2>
diff --git a/files/pt-br/web/javascript/reference/classes/index.html b/files/pt-br/web/javascript/reference/classes/index.html
index 0157d8ff82..1f028c9772 100644
--- a/files/pt-br/web/javascript/reference/classes/index.html
+++ b/files/pt-br/web/javascript/reference/classes/index.html
@@ -16,7 +16,7 @@ translation_of: Web/JavaScript/Reference/Classes
 
 <h2 id="Definindo_classes">Definindo classes</h2>
 
-<p>As Classes são, de fato, "funções especiais", e, assim como você pode definir <a href="https://wiki.developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Operators/function">"function expressions"</a> e <a href="https://wiki.developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Statements/function">"function declarations"</a>, a sintaxe de uma classe possui dois componentes: <a href="/en-US/docs/Web/JavaScript/Reference/Operators/class">"class expressions</a>" e  <a href="/en-US/docs/Web/JavaScript/Reference/Statements/class">"class declarations"</a>.</p>
+<p>As Classes são, de fato, "funções especiais", e, assim como você pode definir <a href="/pt-BR/docs/Web/JavaScript/Reference/Operators/function">"function expressions"</a> e <a href="/pt-BR/docs/Web/JavaScript/Reference/Statements/function">"function declarations"</a>, a sintaxe de uma classe possui dois componentes: <a href="/en-US/docs/Web/JavaScript/Reference/Operators/class">"class expressions</a>" e  <a href="/en-US/docs/Web/JavaScript/Reference/Statements/class">"class declarations"</a>.</p>
 
 <h3 id="Declarando_classes">Declarando classes</h3>
 
diff --git a/files/pt-br/web/javascript/reference/global_objects/reflect/defineproperty/index.html b/files/pt-br/web/javascript/reference/global_objects/reflect/defineproperty/index.html
index b26e3037f2..33951d7a94 100644
--- a/files/pt-br/web/javascript/reference/global_objects/reflect/defineproperty/index.html
+++ b/files/pt-br/web/javascript/reference/global_objects/reflect/defineproperty/index.html
@@ -60,7 +60,7 @@ obj.x                                         // 7
 
 <h3 id="Verificando_se_a_definição_da_propriedade_foi_bem-sucedida">Verificando se a definição da propriedade foi bem-sucedida</h3>
 
-<p>Com o {{jsxref ("Object.defineProperty")}}, que retorna um objeto se for bem-sucedido ou lança um {{jsxref ("TypeError")}}, você usaria um bloco <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/try...catch">try...catch</a> para detectar qualquer erro que ocorreu ao definir uma propriedade.</p>
+<p>Com o {{jsxref ("Object.defineProperty")}}, que retorna um objeto se for bem-sucedido ou lança um {{jsxref ("TypeError")}}, você usaria um bloco <a href="/en-US/docs/Web/JavaScript/Reference/Statements/try...catch">try...catch</a> para detectar qualquer erro que ocorreu ao definir uma propriedade.</p>
 
 <p>Como <code>Reflect.defineProperty</code> retorna um status de sucesso booleano, você pode usar apenas um bloco <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/if...else">if...else</a></code> aqui:</p>
 
diff --git a/files/pt-br/web/javascript/reference/global_objects/string/anchor/index.html b/files/pt-br/web/javascript/reference/global_objects/string/anchor/index.html
index 4b5aab2c22..e6b2f349f1 100644
--- a/files/pt-br/web/javascript/reference/global_objects/string/anchor/index.html
+++ b/files/pt-br/web/javascript/reference/global_objects/string/anchor/index.html
@@ -15,7 +15,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/String/anchor
 <div>O método <strong><code>anchor()</code></strong> cria uma string começando com uma tag inicial <code>&lt;a name="..."&gt;</code>, um texto e uma tag final <code>&lt;/a&gt;</code>.</div>
 
 <div class="blockIndicator warning">
-<p>Não use este método. Ao invés, use <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model">DOM APIs</a>. Além disso, a especificação HTML não permite mais que o elemento &lt;a&gt; tenha um atributo <strong>"name"</strong>, portanto, esse método nem mesmo cria uma tag válida.</p>
+<p>Não use este método. Ao invés, use <a href="/en-US/docs/Web/API/Document_Object_Model">DOM APIs</a>. Além disso, a especificação HTML não permite mais que o elemento &lt;a&gt; tenha um atributo <strong>"name"</strong>, portanto, esse método nem mesmo cria uma tag válida.</p>
 </div>
 
 <h2 id="Sintaxe">Sintaxe</h2>
@@ -35,7 +35,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/String/anchor
 
 <h2 id="Descrição">Descrição</h2>
 
-<p>Não use este método. Ao invés, use <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model">DOM APIs</a>. Além disso, a especificação HTML não permite mais que o elemento <em><code>&lt;a&gt;</code></em> tenha um atributo <strong>"name"</strong>, portanto, esse método nem mesmo cria uma tag válida.</p>
+<p>Não use este método. Ao invés, use <a href="/en-US/docs/Web/API/Document_Object_Model">DOM APIs</a>. Além disso, a especificação HTML não permite mais que o elemento <em><code>&lt;a&gt;</code></em> tenha um atributo <strong>"name"</strong>, portanto, esse método nem mesmo cria uma tag válida.</p>
 
 <h2 id="Exemplos">Exemplos</h2>
 
diff --git a/files/pt-br/web/javascript/reference/global_objects/string/big/index.html b/files/pt-br/web/javascript/reference/global_objects/string/big/index.html
index 624f0b9b5b..0c269a0d7c 100644
--- a/files/pt-br/web/javascript/reference/global_objects/string/big/index.html
+++ b/files/pt-br/web/javascript/reference/global_objects/string/big/index.html
@@ -12,10 +12,10 @@ translation_of: Web/JavaScript/Reference/Global_Objects/String/big
 ---
 <div>{{JSRef}} {{deprecated_header}}</div>
 
-<p>O método <strong>big()</strong> cria um elemento HTML <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Element/big">&lt;big&gt;</a> fazendo com que o texto dentro dele seja exibido uma uma fonte maior.</p>
+<p>O método <strong>big()</strong> cria um elemento HTML <a href="/en-US/docs/Web/HTML/Element/big">&lt;big&gt;</a> fazendo com que o texto dentro dele seja exibido uma uma fonte maior.</p>
 
 <div class="note">
-<p><strong>Nota de uso:</strong> O elemento &lt;big&gt; foi removido no <a href="/en-US/docs/Web/Guide/HTML/HTML5">HTML5</a> e não deve mais ser usado. Em vez disso, web developers devem usar a <a href="https://wiki.developer.mozilla.org/pt-BR/docs/Web/CSS/font-size">propriedade CSS correspondente</a>.</p>
+<p><strong>Nota de uso:</strong> O elemento &lt;big&gt; foi removido no <a href="/en-US/docs/Web/Guide/HTML/HTML5">HTML5</a> e não deve mais ser usado. Em vez disso, web developers devem usar a <a href="/pt-BR/docs/Web/CSS/font-size">propriedade CSS correspondente</a>.</p>
 </div>
 
 <h2 id="Sintaxe">Sintaxe</h2>
diff --git a/files/pt-br/web/javascript/reference/global_objects/string/blink/index.html b/files/pt-br/web/javascript/reference/global_objects/string/blink/index.html
index 4b179a09de..cd7c399edd 100644
--- a/files/pt-br/web/javascript/reference/global_objects/string/blink/index.html
+++ b/files/pt-br/web/javascript/reference/global_objects/string/blink/index.html
@@ -11,7 +11,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/String/blink
 ---
 <div>{{JSRef}} {{deprecated_header}}</div>
 
-<p>O método <code><strong>blink()</strong></code> cria um elemento HTML <a href="https://wiki.developer.mozilla.org/pt-BR/docs/Web/HTML/Element/blink">&lt;blink&gt;</a> que faz uma string piscar.</p>
+<p>O método <code><strong>blink()</strong></code> cria um elemento HTML <a href="/pt-BR/docs/Web/HTML/Element/blink">&lt;blink&gt;</a> que faz uma string piscar.</p>
 
 <div class="warning">
 <p><strong>Aviso:</strong> A criação de textos que piscam é desaprovada por vários padrões de acessibilidade. O próprio elemento <code>&lt;blink&gt;</code> não é padrão e está obsoleto!</p>
@@ -23,7 +23,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/String/blink
 
 <h3 id="Valor_retornado">Valor retornado</h3>
 
-<p>Uma string contendo um elemento HTML <a href="https://wiki.developer.mozilla.org/pt-BR/docs/Web/HTML/Element/blink">&lt;blink&gt;</a>.</p>
+<p>Uma string contendo um elemento HTML <a href="/pt-BR/docs/Web/HTML/Element/blink">&lt;blink&gt;</a>.</p>
 
 <h2 id="Descrição">Descrição</h2>
 
diff --git a/files/pt-br/web/javascript/reference/global_objects/string/bold/index.html b/files/pt-br/web/javascript/reference/global_objects/string/bold/index.html
index 17bb7d54fb..134d8cae04 100644
--- a/files/pt-br/web/javascript/reference/global_objects/string/bold/index.html
+++ b/files/pt-br/web/javascript/reference/global_objects/string/bold/index.html
@@ -12,7 +12,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/String/bold
 ---
 <div>{{JSRef}} {{deprecated_header}}</div>
 
-<p>O método <code><strong>bold()</strong></code> cria um elemento HTML <a href="https://wiki.developer.mozilla.org/pt-BR/docs/Web/HTML/Element/b">&lt;b&gt;</a> que faz com que uma string seja exibida em negrito.</p>
+<p>O método <code><strong>bold()</strong></code> cria um elemento HTML <a href="/pt-BR/docs/Web/HTML/Element/b">&lt;b&gt;</a> que faz com que uma string seja exibida em negrito.</p>
 
 <h2 id="Sintaxe">Sintaxe</h2>
 
@@ -20,7 +20,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/String/bold
 
 <h3 id="Valor_retornado">Valor retornado</h3>
 
-<p>Uma string contendo um elemento HTML <a href="https://wiki.developer.mozilla.org/pt-BR/docs/Web/HTML/Element/b">&lt;b&gt;</a> .</p>
+<p>Uma string contendo um elemento HTML <a href="/pt-BR/docs/Web/HTML/Element/b">&lt;b&gt;</a> .</p>
 
 <h2 id="Descrição">Descrição</h2>
 
diff --git a/files/pt-br/web/javascript/reference/global_objects/string/charcodeat/index.html b/files/pt-br/web/javascript/reference/global_objects/string/charcodeat/index.html
index badb2d8a27..e8d07e6fa2 100644
--- a/files/pt-br/web/javascript/reference/global_objects/string/charcodeat/index.html
+++ b/files/pt-br/web/javascript/reference/global_objects/string/charcodeat/index.html
@@ -30,7 +30,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/String/charCodeAt
 
 <h2 id="Descrição">Descrição</h2>
 
-<p>Os pontos de código Unicode variam de <code>0</code> a <code>1114111</code> (<code>0x10FFFF</code>). Os primeiros 128 pontos de código Unicode são uma correspondência direta da codificação de caracteres ASCII. (Para informações sobre Unicode, veja o <a href="https://wiki.developer.mozilla.org/pt-BR/docs/Web/JavaScript/Guide/Values,_variables,_and_literals">JavaScript Guide</a>.)</p>
+<p>Os pontos de código Unicode variam de <code>0</code> a <code>1114111</code> (<code>0x10FFFF</code>). Os primeiros 128 pontos de código Unicode são uma correspondência direta da codificação de caracteres ASCII. (Para informações sobre Unicode, veja o <a href="/pt-BR/docs/Web/JavaScript/Guide/Values,_variables,_and_literals">JavaScript Guide</a>.)</p>
 
 <div class="blockIndicator note">
 <p><strong>Nota</strong>: o <code>charCodeAt()</code> sempre retornará um valor menor do que <code>65536</code>. Isso ocorre pois os pontos de código mais altos são representados por um par de pseudo-caracteres "substitutos" (de menor valor) que são usados para compreender o caracter real.<br>
diff --git a/files/pt-br/web/javascript/reference/global_objects/string/fixed/index.html b/files/pt-br/web/javascript/reference/global_objects/string/fixed/index.html
index 0c50035e13..3ec9b911fa 100644
--- a/files/pt-br/web/javascript/reference/global_objects/string/fixed/index.html
+++ b/files/pt-br/web/javascript/reference/global_objects/string/fixed/index.html
@@ -13,7 +13,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/String/fixed
 ---
 <div>{{JSRef}} {{deprecated_header}}</div>
 
-<p>O método <strong><code>fixed()</code></strong> cria um elemento HTML <code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Element/tt">&lt;tt&gt;</a></code> que faz com que uma string seja exibida em uma fonte de densidade fixa.</p>
+<p>O método <strong><code>fixed()</code></strong> cria um elemento HTML <code><a href="/en-US/docs/Web/HTML/Element/tt">&lt;tt&gt;</a></code> que faz com que uma string seja exibida em uma fonte de densidade fixa.</p>
 
 <h2 id="Sintaxe">Sintaxe</h2>
 
@@ -21,7 +21,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/String/fixed
 
 <h3 id="Valor_retornado">Valor retornado</h3>
 
-<p>Uma string que representa o elemento HTML <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Element/tt">&lt;tt&gt;</a>.</p>
+<p>Uma string que representa o elemento HTML <a href="/en-US/docs/Web/HTML/Element/tt">&lt;tt&gt;</a>.</p>
 
 <h2 id="Descrição">Descrição</h2>
 
diff --git a/files/pt-br/web/javascript/reference/global_objects/string/fontcolor/index.html b/files/pt-br/web/javascript/reference/global_objects/string/fontcolor/index.html
index 1680cefa36..48e38246c7 100644
--- a/files/pt-br/web/javascript/reference/global_objects/string/fontcolor/index.html
+++ b/files/pt-br/web/javascript/reference/global_objects/string/fontcolor/index.html
@@ -13,10 +13,10 @@ translation_of: Web/JavaScript/Reference/Global_Objects/String/fontcolor
 ---
 <div>{{JSRef}} {{deprecated_header}}</div>
 
-<p>O método <code>fontcolor()</code> cria um elemento HTML <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Element/font">&lt;font&gt;</a> que faz com que uma string seja exibida na cor especificada.</p>
+<p>O método <code>fontcolor()</code> cria um elemento HTML <a href="/en-US/docs/Web/HTML/Element/font">&lt;font&gt;</a> que faz com que uma string seja exibida na cor especificada.</p>
 
 <div class="note">
-<p><strong>Nota de uso:</strong> O elemento <code>&lt;font&gt;</code> foi removido do <a href="https://wiki.developer.mozilla.org/pt-BR/docs/Web/HTML/HTML5">HTML5</a> e não deve mais ser usado. Em vez disso, web developers devem usar a <a href="https://wiki.developer.mozilla.org/pt-BR/docs/Web/CSS/color_value">propriedade CSS correspondente</a>.</p>
+<p><strong>Nota de uso:</strong> O elemento <code>&lt;font&gt;</code> foi removido do <a href="/pt-BR/docs/Web/HTML/HTML5">HTML5</a> e não deve mais ser usado. Em vez disso, web developers devem usar a <a href="/pt-BR/docs/Web/CSS/color_value">propriedade CSS correspondente</a>.</p>
 </div>
 
 <h2 id="Sintaxe">Sintaxe</h2>
@@ -27,12 +27,12 @@ translation_of: Web/JavaScript/Reference/Global_Objects/String/fontcolor
 
 <dl>
  <dt><code>color</code></dt>
- <dd>Deve ser um string que expresse uma cor em formato hexadecimal ou o nome, em Inglês, de uma cor. Os nomes das cores estão listados na referência de <a href="https://wiki.developer.mozilla.org/pt-BR/docs/Web/CSS/color_value#Palavras-chave_de_cores">cores CSS</a>.</dd>
+ <dd>Deve ser um string que expresse uma cor em formato hexadecimal ou o nome, em Inglês, de uma cor. Os nomes das cores estão listados na referência de <a href="/pt-BR/docs/Web/CSS/color_value#Palavras-chave_de_cores">cores CSS</a>.</dd>
 </dl>
 
 <h3 id="Valor_retornado">Valor retornado</h3>
 
-<p>Uma string contendo um elemento HTML <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Element/font">&lt;font&gt;</a>.</p>
+<p>Uma string contendo um elemento HTML <a href="/en-US/docs/Web/HTML/Element/font">&lt;font&gt;</a>.</p>
 
 <h2 id="Descrição">Descrição</h2>
 
@@ -53,7 +53,7 @@ console.log(worldString.fontcolor('FF00') + ' está vermelho em hexadecimal nest
 // '&lt;font color="FF00"&gt;Olá, mundo&lt;/font&gt; está vermelho em hexadecimal nesta linha'
 </pre>
 
-<p>Com o objeto <code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/ElementCSSInlineStyle/style">element.style</a></code> você pode obter o atributo <code>style</code> do elemento e manipulá-lo de forma mais genérica, por exemplo:</p>
+<p>Com o objeto <code><a href="/en-US/docs/Web/API/ElementCSSInlineStyle/style">element.style</a></code> você pode obter o atributo <code>style</code> do elemento e manipulá-lo de forma mais genérica, por exemplo:</p>
 
 <pre class="brush: js notranslate">document.getElementById('#oIdDoElemento').style.color = 'red';
 </pre>
diff --git a/files/pt-br/web/javascript/reference/global_objects/string/fontsize/index.html b/files/pt-br/web/javascript/reference/global_objects/string/fontsize/index.html
index ae429d6089..9aebe0f72a 100644
--- a/files/pt-br/web/javascript/reference/global_objects/string/fontsize/index.html
+++ b/files/pt-br/web/javascript/reference/global_objects/string/fontsize/index.html
@@ -13,10 +13,10 @@ translation_of: Web/JavaScript/Reference/Global_Objects/String/fontsize
 ---
 <div>{{JSRef}} {{deprecated_header}}</div>
 
-<p>O método <code>fontsize()</code> cria um elemento HTML <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Element/font">&lt;font&gt;</a> que faz com que uma string seja exibida no tamanho da fonte especificada.</p>
+<p>O método <code>fontsize()</code> cria um elemento HTML <a href="/en-US/docs/Web/HTML/Element/font">&lt;font&gt;</a> que faz com que uma string seja exibida no tamanho da fonte especificada.</p>
 
 <div class="note">
-<p><strong>Nota de uso:</strong> O elemento <code>&lt;font&gt;</code> foi removido do <a href="https://wiki.developer.mozilla.org/pt-BR/docs/Web/HTML/HTML5">HTML5</a> e não deve mais ser usado. Em vez disso, web developers devem usar a <a href="https://wiki.developer.mozilla.org/pt-BR/docs/Web/CSS/font-size">propriedade CSS correspondente</a>.</p>
+<p><strong>Nota de uso:</strong> O elemento <code>&lt;font&gt;</code> foi removido do <a href="/pt-BR/docs/Web/HTML/HTML5">HTML5</a> e não deve mais ser usado. Em vez disso, web developers devem usar a <a href="/pt-BR/docs/Web/CSS/font-size">propriedade CSS correspondente</a>.</p>
 </div>
 
 <h2 id="Sintaxe">Sintaxe</h2>
@@ -32,11 +32,11 @@ translation_of: Web/JavaScript/Reference/Global_Objects/String/fontsize
 
 <h3 id="Valor_retornado">Valor retornado</h3>
 
-<p>Uma string contendo um elemento HTML <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Element/font">&lt;font&gt;</a>.</p>
+<p>Uma string contendo um elemento HTML <a href="/en-US/docs/Web/HTML/Element/font">&lt;font&gt;</a>.</p>
 
 <h2 id="Descrição">Descrição</h2>
 
-<p>Ao especificar o tamanho como um inteiro, você define o tamanho da fonte do texto para um dos 7 tamanhos definidos. Ao especificar <code>size</code> como uma string como "-2", você ajusta o tamanho da fonte do texto em relação ao tamanho definido na tag <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Element/basefont">&lt;basefont&gt;</a>.</p>
+<p>Ao especificar o tamanho como um inteiro, você define o tamanho da fonte do texto para um dos 7 tamanhos definidos. Ao especificar <code>size</code> como uma string como "-2", você ajusta o tamanho da fonte do texto em relação ao tamanho definido na tag <a href="/en-US/docs/Web/HTML/Element/basefont">&lt;basefont&gt;</a>.</p>
 
 <h2 id="Exemplos">Exemplos</h2>
 
@@ -51,7 +51,7 @@ console.log(worldString.big());       // &lt;big&gt;Olá, mundo&lt;/big&gt;
 console.log(worldString.fontsize(7)); // &lt;font size="7"&gt;Olá, mundo&lt;/fontsize&gt;
 </pre>
 
-<p>Com o objeto <code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/ElementCSSInlineStyle/style">element.style</a></code> você pode obter o atributo <code>style</code> do elemento e manipulá-lo de forma mais genérica, por exemplo:</p>
+<p>Com o objeto <code><a href="/en-US/docs/Web/API/ElementCSSInlineStyle/style">element.style</a></code> você pode obter o atributo <code>style</code> do elemento e manipulá-lo de forma mais genérica, por exemplo:</p>
 
 <pre class="brush: js notranslate">document.getElementById('#oIdDoElemento').style.fontSize = '0.7em';
 </pre>
diff --git a/files/pt-br/web/javascript/reference/global_objects/string/italics/index.html b/files/pt-br/web/javascript/reference/global_objects/string/italics/index.html
index 2b4c297da8..9a25d313b7 100644
--- a/files/pt-br/web/javascript/reference/global_objects/string/italics/index.html
+++ b/files/pt-br/web/javascript/reference/global_objects/string/italics/index.html
@@ -12,7 +12,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/String/italics
 ---
 <div>{{JSRef}} {{deprecated_header}}</div>
 
-<p>O método <code>italics()</code> cria um elemento HTML <code><a href="https://wiki.developer.mozilla.org/pt-BR/docs/Web/HTML/Element/i">&lt;i&gt;</a></code> que faz com que uma string fique em itálico.</p>
+<p>O método <code>italics()</code> cria um elemento HTML <code><a href="/pt-BR/docs/Web/HTML/Element/i">&lt;i&gt;</a></code> que faz com que uma string fique em itálico.</p>
 
 <h2 id="Sintaxe">Sintaxe</h2>
 
@@ -20,7 +20,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/String/italics
 
 <h3 id="Valor_retornado">Valor retornado</h3>
 
-<p>Uma string contendo um elemento HTML <code><a href="https://wiki.developer.mozilla.org/pt-BR/docs/Web/HTML/Element/i">&lt;i&gt;</a></code>.</p>
+<p>Uma string contendo um elemento HTML <code><a href="/pt-BR/docs/Web/HTML/Element/i">&lt;i&gt;</a></code>.</p>
 
 <h2 id="Descrição">Descrição</h2>
 
diff --git a/files/pt-br/web/javascript/reference/global_objects/string/link/index.html b/files/pt-br/web/javascript/reference/global_objects/string/link/index.html
index 92a0962be8..2f35d2ec58 100644
--- a/files/pt-br/web/javascript/reference/global_objects/string/link/index.html
+++ b/files/pt-br/web/javascript/reference/global_objects/string/link/index.html
@@ -13,7 +13,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/String/link
 ---
 <div>{{JSRef}} {{deprecated_header}}</div>
 
-<p>O método <code>link()</code> cria uma string que representa o código para um elemento HTML <code><a href="https://wiki.developer.mozilla.org/pt-BR/docs/Web/HTML/Element/a">&lt;a&gt;</a></code> a ser usado como um link de hipertexto para outro URL.</p>
+<p>O método <code>link()</code> cria uma string que representa o código para um elemento HTML <code><a href="/pt-BR/docs/Web/HTML/Element/a">&lt;a&gt;</a></code> a ser usado como um link de hipertexto para outro URL.</p>
 
 <h2 id="Sintaxe">Sintaxe</h2>
 
@@ -28,13 +28,13 @@ translation_of: Web/JavaScript/Reference/Global_Objects/String/link
 
 <h3 id="Valor_retornado">Valor retornado</h3>
 
-<p>Uma string contendo um elemento HTML <code><a href="https://wiki.developer.mozilla.org/pt-BR/docs/Web/HTML/Element/a">&lt;a&gt;</a></code>.</p>
+<p>Uma string contendo um elemento HTML <code><a href="/pt-BR/docs/Web/HTML/Element/a">&lt;a&gt;</a></code>.</p>
 
 <h2 id="Descrição">Descrição</h2>
 
-<p>Use o método <code>link()</code> para criar um elemento HTML <code>&lt;a&gt;</code>. A string retornada pode então ser adicionada ao documento por meio de <code><a href="https://wiki.developer.mozilla.org/pt-BR/docs/Web/API/Document/write">document.write()</a></code> ou <code><a href="https://wiki.developer.mozilla.org/pt-BR/docs/Web/API/Element/innerHTML">element.innerHTML</a></code>.</p>
+<p>Use o método <code>link()</code> para criar um elemento HTML <code>&lt;a&gt;</code>. A string retornada pode então ser adicionada ao documento por meio de <code><a href="/pt-BR/docs/Web/API/Document/write">document.write()</a></code> ou <code><a href="/pt-BR/docs/Web/API/Element/innerHTML">element.innerHTML</a></code>.</p>
 
-<p>Os links criados com o método <code>link()</code> tornam-se elementos na array de links do objeto <code>document</code>. Veja <code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Document/links">document.links</a></code>.</p>
+<p>Os links criados com o método <code>link()</code> tornam-se elementos na array de links do objeto <code>document</code>. Veja <code><a href="/en-US/docs/Web/API/Document/links">document.links</a></code>.</p>
 
 <h2 id="Exemplos">Exemplos</h2>
 
diff --git a/files/pt-br/web/javascript/reference/global_objects/string/localecompare/index.html b/files/pt-br/web/javascript/reference/global_objects/string/localecompare/index.html
index 8a58612705..6e8892272a 100644
--- a/files/pt-br/web/javascript/reference/global_objects/string/localecompare/index.html
+++ b/files/pt-br/web/javascript/reference/global_objects/string/localecompare/index.html
@@ -34,7 +34,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/String/localeCompare
  <dd>
  <p>Esses argumentos personalizam o comportamento da função e permitem que os aplicativos especifiquem o idioma cujas convenções de formatação devem ser usadas. Em implementações que ignoram os argumentos <em><code>locales</code></em> e <em><code>options</code></em>, a localidade usada e a forma da string retornada são inteiramente dependentes da implementação.</p>
 
- <p>Consulte o <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Collator/Collator">construtor </a><code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Collator/Collator">Intl.Collator()</a></code> para obter detalhes sobre esses parâmetros e como usá-los.</p>
+ <p>Consulte o <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Collator/Collator">construtor </a><code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Collator/Collator">Intl.Collator()</a></code> para obter detalhes sobre esses parâmetros e como usá-los.</p>
  </dd>
 </dl>
 
diff --git a/files/pt-br/web/javascript/reference/global_objects/string/match/index.html b/files/pt-br/web/javascript/reference/global_objects/string/match/index.html
index ee96efe8a5..817ce012cc 100644
--- a/files/pt-br/web/javascript/reference/global_objects/string/match/index.html
+++ b/files/pt-br/web/javascript/reference/global_objects/string/match/index.html
@@ -15,7 +15,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/String/match
 
 <h2 id="Summary" name="Summary">Resumo</h2>
 
-<p>O método <code>match()</code> retorna uma correspondência entre uma string com uma <a href="https://wiki.developer.mozilla.org/pt-BR/docs/Web/JavaScript/Guide/Regular_Expressions">expressão regular</a>.</p>
+<p>O método <code>match()</code> retorna uma correspondência entre uma string com uma <a href="/pt-BR/docs/Web/JavaScript/Guide/Regular_Expressions">expressão regular</a>.</p>
 
 <h2 id="Syntax" name="Syntax">Sintaxe</h2>
 
@@ -25,7 +25,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/String/match
 
 <dl>
  <dt><code>regexp</code></dt>
- <dd>Um objeto de <a href="https://wiki.developer.mozilla.org/pt-BR/docs/Web/JavaScript/Guide/Regular_Expressions">expressão regular</a>. Se <em><code>regexp</code></em> não for uma <strong><code>RegExp</code></strong>, o mesmo será convertido para uma nova RegExp usando <code>new <strong>RegExp</strong>(<em>regexp</em>)</code>.<br>
+ <dd>Um objeto de <a href="/pt-BR/docs/Web/JavaScript/Guide/Regular_Expressions">expressão regular</a>. Se <em><code>regexp</code></em> não for uma <strong><code>RegExp</code></strong>, o mesmo será convertido para uma nova RegExp usando <code>new <strong>RegExp</strong>(<em>regexp</em>)</code>.<br>
  <br>
  Se você não fornecer nenhum parâmetro ao usar o método <code>match()</code>, você obterá um {{jsxref ("Array")}} com uma string vazia: <code>[""]</code>.</dd>
 </dl>
@@ -48,7 +48,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/String/match
 
 <dl>
  <dt><code>groups</code></dt>
- <dd>Um objeto de grupos de captura nomeados cujas chaves são os nomes, e valores são os grupos de captura ou {{jsxref ("undefined")}} se nenhum grupo de captura nomeado foi definido. Consulte <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions/Groups_and_Ranges">Grupos e Intervalos</a> para obter mais informações.</dd>
+ <dd>Um objeto de grupos de captura nomeados cujas chaves são os nomes, e valores são os grupos de captura ou {{jsxref ("undefined")}} se nenhum grupo de captura nomeado foi definido. Consulte <a href="/en-US/docs/Web/JavaScript/Guide/Regular_Expressions/Groups_and_Ranges">Grupos e Intervalos</a> para obter mais informações.</dd>
  <dt><code>index</code></dt>
  <dd>O índice da pesquisa em que o resultado foi encontrado.</dd>
  <dt><code>input</code></dt>
@@ -106,7 +106,7 @@ console.log(matches_array);
 </pre>
 
 <div class="blockIndicator note">
-<p><strong>Nota:</strong> Veja também {{jsxref("String.prototype.matchAll()")}} e <a href="https://wiki.developer.mozilla.org/pt-BR/docs/Web/JavaScript/Guide/Regular_Expressions#Pesquisa_avan%C3%A7ada_com_Flags">Pesquisa avançada com sinalizadores</a>.</p>
+<p><strong>Nota:</strong> Veja também {{jsxref("String.prototype.matchAll()")}} e <a href="/pt-BR/docs/Web/JavaScript/Guide/Regular_Expressions#Pesquisa_avan%C3%A7ada_com_Flags">Pesquisa avançada com sinalizadores</a>.</p>
 </div>
 
 <h3 id="Usando_grupos_de_captura_nomeados">Usando grupos de captura nomeados</h3>
diff --git a/files/pt-br/web/javascript/reference/global_objects/string/matchall/index.html b/files/pt-br/web/javascript/reference/global_objects/string/matchall/index.html
index ce5c1cb121..66e09136e6 100644
--- a/files/pt-br/web/javascript/reference/global_objects/string/matchall/index.html
+++ b/files/pt-br/web/javascript/reference/global_objects/string/matchall/index.html
@@ -13,7 +13,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/String/matchAll
 ---
 <div>{{JSRef}}</div>
 
-<p>O método <code>matchAll()</code> retorna um iterador de todos os resultados correspondentes a uma string em relação a uma <a href="https://wiki.developer.mozilla.org/pt-BR/docs/Web/JavaScript/Guide/Regular_Expressions">expressão regular</a>, incluindo <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions/Groups_and_Ranges">grupos de captura</a>.</p>
+<p>O método <code>matchAll()</code> retorna um iterador de todos os resultados correspondentes a uma string em relação a uma <a href="/pt-BR/docs/Web/JavaScript/Guide/Regular_Expressions">expressão regular</a>, incluindo <a href="/en-US/docs/Web/JavaScript/Guide/Regular_Expressions/Groups_and_Ranges">grupos de captura</a>.</p>
 
 <div>{{EmbedInteractiveExample("pages/js/string-matchall.html")}}</div>
 
@@ -38,13 +38,13 @@ translation_of: Web/JavaScript/Reference/Global_Objects/String/matchAll
 
 <h3 id="Valor_retornado">Valor retornado</h3>
 
-<p>Um <a href="https://wiki.developer.mozilla.org/pt-BR/docs/Web/JavaScript/Guide/Iteratores_e_geradores">iterador</a> (que não é um iterável reinicializável).</p>
+<p>Um <a href="/pt-BR/docs/Web/JavaScript/Guide/Iteratores_e_geradores">iterador</a> (que não é um iterável reinicializável).</p>
 
 <h2 id="Exemplos">Exemplos</h2>
 
 <h3 id="Regexp.exec_e_matchAll">Regexp.exec() e matchAll()</h3>
 
-<p>Antes da adição do <code>matchAll()</code> ao JavaScript, era possível usar chamadas <a href="https://wiki.developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/RegExp/exec">regexp.exec</a> (e regexes com a sinalização (flag) <code>/g</code>) em um loop para obter todas as correspondências:</p>
+<p>Antes da adição do <code>matchAll()</code> ao JavaScript, era possível usar chamadas <a href="/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/RegExp/exec">regexp.exec</a> (e regexes com a sinalização (flag) <code>/g</code>) em um loop para obter todas as correspondências:</p>
 
 <pre class="brush: js notranslate">const regexp = RegExp('foo[a-z]*','g');
 const str = 'table football, foosball';
diff --git a/files/pt-br/web/javascript/reference/global_objects/string/normalize/index.html b/files/pt-br/web/javascript/reference/global_objects/string/normalize/index.html
index dbab5a42d8..33d3f06b71 100644
--- a/files/pt-br/web/javascript/reference/global_objects/string/normalize/index.html
+++ b/files/pt-br/web/javascript/reference/global_objects/string/normalize/index.html
@@ -113,7 +113,7 @@ console.log(string2.codePointAt(0).toString(16)); // f1</pre>
 <p>Por exemplo:</p>
 
 <ul>
- <li>o ponto de código U+FB00 representa a <a href="https://wiki.developer.mozilla.org/en-US/docs/Glossary/Ligature">ligadura</a> <code>"ff"</code>. É compatível com dois pontos de código U+0066 consecutivos (<code>"ff"</code>).</li>
+ <li>o ponto de código U+FB00 representa a <a href="/en-US/docs/Glossary/Ligature">ligadura</a> <code>"ff"</code>. É compatível com dois pontos de código U+0066 consecutivos (<code>"ff"</code>).</li>
  <li>o ponto de código U+24B9 representa o símbolo <code>"Ⓓ"</code>. É compatível com o ponto de código U+0044 (<code>"D"</code>).</li>
 </ul>
 
diff --git a/files/pt-br/web/javascript/reference/global_objects/string/raw/index.html b/files/pt-br/web/javascript/reference/global_objects/string/raw/index.html
index 8f75880d13..ee7cfe856f 100644
--- a/files/pt-br/web/javascript/reference/global_objects/string/raw/index.html
+++ b/files/pt-br/web/javascript/reference/global_objects/string/raw/index.html
@@ -11,7 +11,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/String/raw
 ---
 <div>{{JSRef}}</div>
 
-<p>O método estático <code>String.raw()</code> é uma função tag de <a href="https://wiki.developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/template_strings">modelos literais</a>, similar ao prefixo <code>r</code> no Python ou o prefixo <code>@</code> no C# para string literais (Mas não é <em>idêntico</em>, existe uma diferença, veja explicações nessa <a href="https://bugs.chromium.org/p/v8/issues/detail?id=5016">discussão</a>). Ele é usado para pegar as strings no formato "cru" de modelos literais, isto é, substituições (ex: <font face="consolas, Liberation Mono, courier, monospace"><span style="">${foo}</span></font>) são processados, mas "escapes" (ex:. <code>\n</code>) não são.</p>
+<p>O método estático <code>String.raw()</code> é uma função tag de <a href="/pt-BR/docs/Web/JavaScript/Reference/template_strings">modelos literais</a>, similar ao prefixo <code>r</code> no Python ou o prefixo <code>@</code> no C# para string literais (Mas não é <em>idêntico</em>, existe uma diferença, veja explicações nessa <a href="https://bugs.chromium.org/p/v8/issues/detail?id=5016">discussão</a>). Ele é usado para pegar as strings no formato "cru" de modelos literais, isto é, substituições (ex: <font face="consolas, Liberation Mono, courier, monospace"><span style="">${foo}</span></font>) são processados, mas "escapes" (ex:. <code>\n</code>) não são.</p>
 
 <p>{{EmbedInteractiveExample("pages/js/string-raw.html")}}</p>
 
@@ -46,7 +46,7 @@ String.raw`templateString`
 
 <h2 id="Descrição">Descrição</h2>
 
-<p>Na maioria dos casos, <code>String.raw()</code> é usado com modelos de strings. A primeira sintaxe mencionada acima raramente é usada, porque o mecanismo JavaScript a chamará com os argumentos apropriados para você, assim como com outras <a href="https://wiki.developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/template_strings">funções de tag</a>.</p>
+<p>Na maioria dos casos, <code>String.raw()</code> é usado com modelos de strings. A primeira sintaxe mencionada acima raramente é usada, porque o mecanismo JavaScript a chamará com os argumentos apropriados para você, assim como com outras <a href="/pt-BR/docs/Web/JavaScript/Reference/template_strings">funções de tag</a>.</p>
 
 <p><code>String.raw()</code> é a única função de tag embutida de strings de template; ele funciona exatamente como a função de modelo padrão e executa a concatenação. Você pode até reimplementá-lo com o código JavaScript normal.</p>
 
diff --git a/files/pt-br/web/javascript/reference/global_objects/string/replace/index.html b/files/pt-br/web/javascript/reference/global_objects/string/replace/index.html
index 481d976cb6..bb73f2e35b 100644
--- a/files/pt-br/web/javascript/reference/global_objects/string/replace/index.html
+++ b/files/pt-br/web/javascript/reference/global_objects/string/replace/index.html
@@ -35,7 +35,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/String/replace
  <dd>A função (function) chamada cria uma nova substring (para ser colocada no lugar da substring recebida pelo parametro #1). Os argumentos fornececidos para essa função estão descritos na seção "<a href="#" id="Specifying_a_string_as_a_parameter">Especificando uma função como parâmetro</a>" mais abaixo.</dd>
  <dt><code>flags</code> {{non-standard_inline}}</dt>
  <dd>
- <p>Uma string especificando uma combinação de <a href="https://wiki.developer.mozilla.org/pt-BR/docs/Web/JavaScript/Guide/Regular_Expressions">flags de expressão regular</a>. O uso do parâmetro <code>flags</code> no método <code>String.prototype.replace()</code> é não-padrão. Ao invés de usar este parâmetro, use um objeto {{jsxref("Global_Objects/RegExp", "RegExp")}} com as flags correspondentes. O valor deste parâmetro deve ser uma string consistindo em um ou mais dos seguintes caracteres para afetar a operação, tais como descrito:</p>
+ <p>Uma string especificando uma combinação de <a href="/pt-BR/docs/Web/JavaScript/Guide/Regular_Expressions">flags de expressão regular</a>. O uso do parâmetro <code>flags</code> no método <code>String.prototype.replace()</code> é não-padrão. Ao invés de usar este parâmetro, use um objeto {{jsxref("Global_Objects/RegExp", "RegExp")}} com as flags correspondentes. O valor deste parâmetro deve ser uma string consistindo em um ou mais dos seguintes caracteres para afetar a operação, tais como descrito:</p>
 
  <dl>
   <dt><code>g</code></dt>
@@ -159,7 +159,7 @@ console.log(newstr);
 // retorna "Twas the night before Christmas..."</code></pre>
 
 <div class="blockIndicator note">
-<p><strong>Nota:</strong> Veja <a href="https://wiki.developer.mozilla.org/pt-BR/docs/Web/JavaScript/Guide/Regular_Expressions">este guia</a> para maiores explicações as sobre expressões regulares.</p>
+<p><strong>Nota:</strong> Veja <a href="/pt-BR/docs/Web/JavaScript/Guide/Regular_Expressions">este guia</a> para maiores explicações as sobre expressões regulares.</p>
 </div>
 
 <h3 id="Usando_global_e_ignore_com_replace">Usando <code>global</code> e <code>ignore</code> com <code>replace()</code></h3>
@@ -176,7 +176,7 @@ console.log(newstr);
 
 <h3 id="Trocando_palavras_em_uma_string">Trocando palavras em uma string</h3>
 
-<p>O script a seguir troca as palavras na string. Para o texto que vai substituir, o script usa <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions/Groups_and_Ranges">grupos de captura</a> e os padrões de substituição <code>$1</code> e <code>$2</code>.</p>
+<p>O script a seguir troca as palavras na string. Para o texto que vai substituir, o script usa <a href="/en-US/docs/Web/JavaScript/Guide/Regular_Expressions/Groups_and_Ranges">grupos de captura</a> e os padrões de substituição <code>$1</code> e <code>$2</code>.</p>
 
 <pre class="notranslate"><code>var re = /(\w+)\s(\w+)/;
 var str = 'John Smith';
diff --git a/files/pt-br/web/javascript/reference/global_objects/string/replaceall/index.html b/files/pt-br/web/javascript/reference/global_objects/string/replaceall/index.html
index 19ceaaed5b..a9c0c55cc4 100644
--- a/files/pt-br/web/javascript/reference/global_objects/string/replaceall/index.html
+++ b/files/pt-br/web/javascript/reference/global_objects/string/replaceall/index.html
@@ -14,8 +14,6 @@ translation_of: Web/JavaScript/Reference/Global_Objects/String/replaceAll
 ---
 <div>{{JSRef}}</div>
 
-<div class="blockIndicator note"><strong>Nota</strong>: A partir de Agosto de 2020, o método <code>replaceAll()</code> continuará sendo suportado pelo Firefox, mas não pelo Chrome. Ele estará disponível somente no Chrome 85.</div>
-
 <p>O método <code>replaceAll()</code> retorna uma nova string com todas as ocorrências de um padrão substituídas por uma substituição. O padrão pode ser uma string ou uma {{jsxref ("RegExp")}}, e a substituição pode ser uma string ou uma função a ser chamada para cada ocorrência.<br>
  <br>
  A <em>string</em> original é mantida sem modificação.</p>
diff --git a/files/pt-br/web/javascript/reference/global_objects/string/small/index.html b/files/pt-br/web/javascript/reference/global_objects/string/small/index.html
index dbec8f2227..a6e2d0809b 100644
--- a/files/pt-br/web/javascript/reference/global_objects/string/small/index.html
+++ b/files/pt-br/web/javascript/reference/global_objects/string/small/index.html
@@ -13,7 +13,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/String/small
 ---
 <div>{{JSRef}} {{deprecated_header}}</div>
 
-<p>O método <code>small()</code> cria um elemento HTML <code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Element/small">&lt;small&gt;</a></code> que faz com que uma string seja exibida em uma fonte pequena.</p>
+<p>O método <code>small()</code> cria um elemento HTML <code><a href="/en-US/docs/Web/HTML/Element/small">&lt;small&gt;</a></code> que faz com que uma string seja exibida em uma fonte pequena.</p>
 
 <h2 id="Sintaxe">Sintaxe</h2>
 
@@ -21,7 +21,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/String/small
 
 <h3 id="Valor_retornado">Valor retornado</h3>
 
-<p>Uma string contendo um elemento HTML <code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Element/small">&lt;small&gt;</a></code>.</p>
+<p>Uma string contendo um elemento HTML <code><a href="/en-US/docs/Web/HTML/Element/small">&lt;small&gt;</a></code>.</p>
 
 <h2 id="Descrição">Descrição</h2>
 
@@ -40,7 +40,7 @@ console.log(worldString.big());       // &lt;big&gt;Olá, mundo&lt;/big&gt;
 console.log(worldString.fontsize(7)); // &lt;font size="7"&gt;Olá, mundo&lt;/fontsize&gt;
 </pre>
 
-<p>Com o objeto <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/ElementCSSInlineStyle/style">element.style</a> você pode pegar o atributo de estilo do elemento e manipulá-lo de forma mais genérica, por exemplo:</p>
+<p>Com o objeto <a href="/en-US/docs/Web/API/ElementCSSInlineStyle/style">element.style</a> você pode pegar o atributo de estilo do elemento e manipulá-lo de forma mais genérica, por exemplo:</p>
 
 <pre class="brush: js notranslate">document.getElementById('#oIdDoElemento').style.fontSize = '0.7em';
 </pre>
diff --git a/files/pt-br/web/javascript/reference/global_objects/string/strike/index.html b/files/pt-br/web/javascript/reference/global_objects/string/strike/index.html
index 890938382b..c7490676e6 100644
--- a/files/pt-br/web/javascript/reference/global_objects/string/strike/index.html
+++ b/files/pt-br/web/javascript/reference/global_objects/string/strike/index.html
@@ -12,7 +12,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/String/strike
 ---
 <div>{{JSRef}} {{deprecated_header}}</div>
 
-<p>O método <code>strike()</code> cria um elemento HTML <code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Element/strike">&lt;strike&gt;</a></code> que faz com que uma string seja exibida com o texto riscado.</p>
+<p>O método <code>strike()</code> cria um elemento HTML <code><a href="/en-US/docs/Web/HTML/Element/strike">&lt;strike&gt;</a></code> que faz com que uma string seja exibida com o texto riscado.</p>
 
 <h2 id="Sintaxe">Sintaxe</h2>
 
@@ -20,7 +20,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/String/strike
 
 <h3 id="Valor_retornado">Valor retornado</h3>
 
-<p>Uma string contendo um elemento HTML <code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Element/strike">&lt;strike&gt;</a></code>.</p>
+<p>Uma string contendo um elemento HTML <code><a href="/en-US/docs/Web/HTML/Element/strike">&lt;strike&gt;</a></code>.</p>
 
 <h2 id="Descrição">Descrição</h2>
 
diff --git a/files/pt-br/web/javascript/reference/global_objects/string/sub/index.html b/files/pt-br/web/javascript/reference/global_objects/string/sub/index.html
index f687eb6c76..8782607d25 100644
--- a/files/pt-br/web/javascript/reference/global_objects/string/sub/index.html
+++ b/files/pt-br/web/javascript/reference/global_objects/string/sub/index.html
@@ -12,7 +12,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/String/sub
 ---
 <div>{{JSRef}} {{deprecated_header}}</div>
 
-<p>O método <code>sub()</code> cria um elemento HTML <code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Element/sub">&lt;sub&gt;</a></code> que faz com que uma string seja exibida como subscrito (texto pequeno).</p>
+<p>O método <code>sub()</code> cria um elemento HTML <code><a href="/en-US/docs/Web/HTML/Element/sub">&lt;sub&gt;</a></code> que faz com que uma string seja exibida como subscrito (texto pequeno).</p>
 
 <h2 id="Sintaxe">Sintaxe</h2>
 
@@ -20,7 +20,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/String/sub
 
 <h3 id="Valor_retornado">Valor retornado</h3>
 
-<p>Uma string contendo um elemento HTML <code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Element/sub">&lt;sub&gt;</a></code>.</p>
+<p>Uma string contendo um elemento HTML <code><a href="/en-US/docs/Web/HTML/Element/sub">&lt;sub&gt;</a></code>.</p>
 
 <h2 id="Descrição">Descrição</h2>
 
diff --git a/files/pt-br/web/javascript/reference/global_objects/string/sup/index.html b/files/pt-br/web/javascript/reference/global_objects/string/sup/index.html
index 7fd1b9cd38..1cee97e0ed 100644
--- a/files/pt-br/web/javascript/reference/global_objects/string/sup/index.html
+++ b/files/pt-br/web/javascript/reference/global_objects/string/sup/index.html
@@ -13,7 +13,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/String/sup
 ---
 <div>{{JSRef}} {{deprecated_header}}</div>
 
-<p>O método <code>sup()</code> cria um elemento HTML <code><a class="external external-icon" href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Element/sup" rel="noopener">&lt;sup&gt;</a></code> que faz com que uma string seja exibida como sobrescrito.</p>
+<p>O método <code>sup()</code> cria um elemento HTML <code><a class="external external-icon" href="/en-US/docs/Web/HTML/Element/sup" rel="noopener">&lt;sup&gt;</a></code> que faz com que uma string seja exibida como sobrescrito.</p>
 
 <h2 id="Sintaxe">Sintaxe</h2>
 
diff --git a/files/pt-br/web/javascript/reference/operators/super/index.html b/files/pt-br/web/javascript/reference/operators/super/index.html
index 2817c472b8..dc46996187 100644
--- a/files/pt-br/web/javascript/reference/operators/super/index.html
+++ b/files/pt-br/web/javascript/reference/operators/super/index.html
@@ -97,7 +97,7 @@ new Derived().delete(); // ReferenceError: invalid delete involving 'super'. </p
 
 <h3 id="Super.prop_não_pode_sobrescrever_propriedades_não_editáveis"><code>Super.prop</code> não pode sobrescrever propriedades não editáveis</h3>
 
-<p><code>super</code>Whennão pode sobrescrever o valor de uma propriedade quando esta houver sido definida como não editável ('writable: false') com, e.g., {{jsxref("Object.defineProperty")}}.</p>
+<p><code>super</code>não pode sobrescrever o valor de uma propriedade quando esta houver sido definida como não editável ('writable: false') com, e.g., {{jsxref("Object.defineProperty")}}.</p>
 
 <pre class="brush: js">class X {
   constructor() {
diff --git a/files/pt-br/web/javascript/reference/statements/export/index.html b/files/pt-br/web/javascript/reference/statements/export/index.html
index f429a13988..f2761d77ce 100644
--- a/files/pt-br/web/javascript/reference/statements/export/index.html
+++ b/files/pt-br/web/javascript/reference/statements/export/index.html
@@ -167,7 +167,7 @@ console.log(foo);    // 4.555806215962888</pre>
 
 <ul>
  <li>Você pode incluir esse script no seu código HTML através do elemento {{htmlelement("script")}} do tipo="module", de modo que ele seja reconhecido e tratado apropriadamente.</li>
- <li>Você não pode executar módulos JS através de <code>file://</code> URL — você receberá errors <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTTP/CORS">CORS</a>. Você deve rodá-los através de um servidor HTTP.</li>
+ <li>Você não pode executar módulos JS através de <code>file://</code> URL — você receberá errors <a href="/en-US/docs/Web/HTTP/CORS">CORS</a>. Você deve rodá-los através de um servidor HTTP.</li>
 </ul>
 
 <h3 id="Usando_a_exportação_padrão">Usando a exportação padrão</h3>
diff --git a/files/pt-br/web/web_components/index.html b/files/pt-br/web/web_components/index.html
index e354616656..accbaec2f7 100644
--- a/files/pt-br/web/web_components/index.html
+++ b/files/pt-br/web/web_components/index.html
@@ -86,7 +86,7 @@ translation_of: Web/Web_Components
  <dt>CSS pseudo-elementos</dt>
  <dd>Pseudo-elementos relacionados especificamente a elementos customizados:
  <ul>
-  <li>{{cssxref("::part")}}: Representa qualquer elemento dentro de uma <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM">shadow tree</a> que tenha um atributo {{HTMLAttrxRef("part")}} correspondente.</li>
+  <li>{{cssxref("::part")}}: Representa qualquer elemento dentro de uma <a href="/en-US/docs/Web/Web_Components/Using_shadow_DOM">shadow tree</a> que tenha um atributo {{HTMLAttrxRef("part")}} correspondente.</li>
  </ul>
  </dd>
 </dl>
diff --git a/files/ru/_redirects.txt b/files/ru/_redirects.txt
index 619625d281..8dbb1dd636 100644
--- a/files/ru/_redirects.txt
+++ b/files/ru/_redirects.txt
@@ -365,9 +365,16 @@
 /ru/docs/Web/API/WebRTC_API/протоколы	/ru/docs/Web/API/WebRTC_API/Protocols
 /ru/docs/Web/API/WebRTC_API/связь	/ru/docs/Web/API/WebRTC_API/Connectivity
 /ru/docs/Web/API/WindowBase64/Base64_encoding_and_decoding	/ru/docs/Glossary/Base64
-/ru/docs/Web/API/WindowBase64/btoa	/ru/docs/Web/API/WindowOrWorkerGlobalScope/btoa
-/ru/docs/Web/API/WindowTimers.setTimeout	/ru/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout
-/ru/docs/Web/API/WindowTimers/setTimeout	/ru/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout
+/ru/docs/Web/API/WindowBase64/btoa	/ru/docs/Web/API/btoa
+/ru/docs/Web/API/WindowOrWorkerGlobalScope/atob	/ru/docs/Web/API/atob
+/ru/docs/Web/API/WindowOrWorkerGlobalScope/btoa	/ru/docs/Web/API/btoa
+/ru/docs/Web/API/WindowOrWorkerGlobalScope/caches	/ru/docs/Web/API/caches
+/ru/docs/Web/API/WindowOrWorkerGlobalScope/clearTimeout	/ru/docs/Web/API/clearTimeout
+/ru/docs/Web/API/WindowOrWorkerGlobalScope/fetch	/ru/docs/Web/API/fetch
+/ru/docs/Web/API/WindowOrWorkerGlobalScope/setInterval	/ru/docs/Web/API/setInterval
+/ru/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout	/ru/docs/Web/API/setTimeout
+/ru/docs/Web/API/WindowTimers.setTimeout	/ru/docs/Web/API/setTimeout
+/ru/docs/Web/API/WindowTimers/setTimeout	/ru/docs/Web/API/setTimeout
 /ru/docs/Web/API/console.timeEnd	/ru/docs/Web/API/Console/timeEnd
 /ru/docs/Web/API/document.activeElement	/ru/docs/Web/API/Document/activeElement
 /ru/docs/Web/API/document.createComment	/ru/docs/Web/API/Document/createComment
@@ -383,10 +390,13 @@
 /ru/docs/Web/CSS/Adjacent_sibling_selectors	/ru/docs/Web/CSS/Adjacent_sibling_combinator
 /ru/docs/Web/CSS/CSS_Animations/Ispolzovanie_CSS_animatciy	/ru/docs/Web/CSS/CSS_Animations/Using_CSS_animations
 /ru/docs/Web/CSS/CSS_Background_and_Borders	/ru/docs/Web/CSS/CSS_Backgrounds_and_Borders
-/ru/docs/Web/CSS/CSS_Background_and_Borders/Border-radius_генератор	/ru/docs/Web/CSS/CSS_Background_and_Borders/Border-radius_generator
+/ru/docs/Web/CSS/CSS_Background_and_Borders/Border-image_generator	/ru/docs/Web/CSS/CSS_Backgrounds_and_Borders/Border-image_generator
+/ru/docs/Web/CSS/CSS_Background_and_Borders/Border-radius_generator	/ru/docs/Web/CSS/CSS_Backgrounds_and_Borders/Border-radius_generator
+/ru/docs/Web/CSS/CSS_Background_and_Borders/Border-radius_генератор	/ru/docs/Web/CSS/CSS_Backgrounds_and_Borders/Border-radius_generator
+/ru/docs/Web/CSS/CSS_Background_and_Borders/Box-shadow_generator	/ru/docs/Web/CSS/CSS_Backgrounds_and_Borders/Box-shadow_generator
 /ru/docs/Web/CSS/CSS_Background_and_Borders/Множественные_фоны	/ru/docs/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds
 /ru/docs/Web/CSS/CSS_Basic_User_Interface/Использование_URL_значений_для_свойства_cursor	/ru/docs/Web/CSS/CSS_Basic_User_Interface/Using_URL_values_for_the_cursor_property
-/ru/docs/Web/CSS/CSS_Box_Model/Box-shadow_generator	/ru/docs/Web/CSS/CSS_Background_and_Borders/Box-shadow_generator
+/ru/docs/Web/CSS/CSS_Box_Model/Box-shadow_generator	/ru/docs/Web/CSS/CSS_Backgrounds_and_Borders/Box-shadow_generator
 /ru/docs/Web/CSS/CSS_Colors	/ru/docs/Web/CSS/CSS_Color
 /ru/docs/Web/CSS/CSS_Flexible_Box_Layout/Выравнивание_элементов_в_Flex_контейнере	/ru/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container
 /ru/docs/Web/CSS/CSS_Flexible_Box_Layout/Контролирование_соотношения_элементов_вдоль_главной_оси	/ru/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax
diff --git a/files/ru/_wikihistory.json b/files/ru/_wikihistory.json
index 43fa9641e5..633ebd6995 100644
--- a/files/ru/_wikihistory.json
+++ b/files/ru/_wikihistory.json
@@ -11658,62 +11658,6 @@
       "kenrick95"
     ]
   },
-  "Web/API/WindowOrWorkerGlobalScope/atob": {
-    "modified": "2019-03-23T22:02:40.728Z",
-    "contributors": [
-      "HawkeyePierce89",
-      "hunty"
-    ]
-  },
-  "Web/API/WindowOrWorkerGlobalScope/btoa": {
-    "modified": "2019-09-17T16:11:11.862Z",
-    "contributors": [
-      "SerzN1",
-      "uleming"
-    ]
-  },
-  "Web/API/WindowOrWorkerGlobalScope/caches": {
-    "modified": "2020-10-29T09:02:45.566Z",
-    "contributors": [
-      "ScratchFilin",
-      "evilwithin93rus"
-    ]
-  },
-  "Web/API/WindowOrWorkerGlobalScope/clearTimeout": {
-    "modified": "2020-10-15T22:33:31.469Z",
-    "contributors": [
-      "andzion105"
-    ]
-  },
-  "Web/API/WindowOrWorkerGlobalScope/fetch": {
-    "modified": "2020-10-15T22:06:28.491Z",
-    "contributors": [
-      "BadLame",
-      "dasha_hshr"
-    ]
-  },
-  "Web/API/WindowOrWorkerGlobalScope/setInterval": {
-    "modified": "2020-11-18T12:13:20.493Z",
-    "contributors": [
-      "kosarev_va",
-      "WhiteApfel",
-      "lilka9",
-      "AliaksandrZahorski"
-    ]
-  },
-  "Web/API/WindowOrWorkerGlobalScope/setTimeout": {
-    "modified": "2020-11-18T12:03:29.649Z",
-    "contributors": [
-      "kosarev_va",
-      "YozhEzhi",
-      "AliaksandrZahorski",
-      "akaguny",
-      "marat-curious",
-      "neustroev.artyom",
-      "fscholz",
-      "ichent"
-    ]
-  },
   "Web/API/Worker": {
     "modified": "2019-03-23T22:47:25.398Z",
     "contributors": [
@@ -11959,6 +11903,40 @@
       "t1gor"
     ]
   },
+  "Web/API/atob": {
+    "modified": "2019-03-23T22:02:40.728Z",
+    "contributors": [
+      "HawkeyePierce89",
+      "hunty"
+    ]
+  },
+  "Web/API/btoa": {
+    "modified": "2019-09-17T16:11:11.862Z",
+    "contributors": [
+      "SerzN1",
+      "uleming"
+    ]
+  },
+  "Web/API/caches": {
+    "modified": "2020-10-29T09:02:45.566Z",
+    "contributors": [
+      "ScratchFilin",
+      "evilwithin93rus"
+    ]
+  },
+  "Web/API/clearTimeout": {
+    "modified": "2020-10-15T22:33:31.469Z",
+    "contributors": [
+      "andzion105"
+    ]
+  },
+  "Web/API/fetch": {
+    "modified": "2020-10-15T22:06:28.491Z",
+    "contributors": [
+      "BadLame",
+      "dasha_hshr"
+    ]
+  },
   "Web/API/notification": {
     "modified": "2019-03-23T22:43:07.772Z",
     "contributors": [
@@ -11969,6 +11947,28 @@
       "fsanano"
     ]
   },
+  "Web/API/setInterval": {
+    "modified": "2020-11-18T12:13:20.493Z",
+    "contributors": [
+      "kosarev_va",
+      "WhiteApfel",
+      "lilka9",
+      "AliaksandrZahorski"
+    ]
+  },
+  "Web/API/setTimeout": {
+    "modified": "2020-11-18T12:03:29.649Z",
+    "contributors": [
+      "kosarev_va",
+      "YozhEzhi",
+      "AliaksandrZahorski",
+      "akaguny",
+      "marat-curious",
+      "neustroev.artyom",
+      "fscholz",
+      "ichent"
+    ]
+  },
   "Web/API/window/requestAnimationFrame": {
     "modified": "2020-10-15T21:21:09.538Z",
     "contributors": [
@@ -12741,30 +12741,30 @@
       "ukarim"
     ]
   },
-  "Web/CSS/CSS_Background_and_Borders/Border-image_generator": {
+  "Web/CSS/CSS_Backgrounds_and_Borders": {
+    "modified": "2019-03-23T22:40:44.971Z",
+    "contributors": [
+      "teoli"
+    ]
+  },
+  "Web/CSS/CSS_Backgrounds_and_Borders/Border-image_generator": {
     "modified": "2019-03-23T22:25:50.600Z",
     "contributors": [
       "BychekRU"
     ]
   },
-  "Web/CSS/CSS_Background_and_Borders/Border-radius_generator": {
+  "Web/CSS/CSS_Backgrounds_and_Borders/Border-radius_generator": {
     "modified": "2019-03-23T22:40:49.075Z",
     "contributors": [
       "vito_falcone"
     ]
   },
-  "Web/CSS/CSS_Background_and_Borders/Box-shadow_generator": {
+  "Web/CSS/CSS_Backgrounds_and_Borders/Box-shadow_generator": {
     "modified": "2019-03-18T20:43:50.074Z",
     "contributors": [
       "BychekRU"
     ]
   },
-  "Web/CSS/CSS_Backgrounds_and_Borders": {
-    "modified": "2019-03-23T22:40:44.971Z",
-    "contributors": [
-      "teoli"
-    ]
-  },
   "Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds": {
     "modified": "2019-03-23T22:13:04.810Z",
     "contributors": [
diff --git a/files/ru/glossary/accessibility_tree/index.html b/files/ru/glossary/accessibility_tree/index.html
index 6f530f1449..ed2039245d 100644
--- a/files/ru/glossary/accessibility_tree/index.html
+++ b/files/ru/glossary/accessibility_tree/index.html
@@ -30,7 +30,7 @@ translation_of: Glossary/Accessibility_tree
 
 <p>Пока еще в черновике Web Incubator Community Group, <strong><a href="https://wicg.github.io/aom/explainer.html">Объектная модель доступности</a> (AOM)</strong> намерена внедрить API, которые упрощают выражение семантики доступности и потенциально разрешают доступ к вычисленному дереву доступности.</p>
 
-<section id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li><a href="/ru/docs/Glossary">Глоссарий</a>
 
diff --git a/files/ru/glossary/bootstrap/index.html b/files/ru/glossary/bootstrap/index.html
index 23ef352d7b..33e7b73a2a 100644
--- a/files/ru/glossary/bootstrap/index.html
+++ b/files/ru/glossary/bootstrap/index.html
@@ -14,7 +14,7 @@ original_slug: Глоссарий/Bootstrap
 
 <p>Изначально Bootstrap назывался Twitter Blueprint и был разработан командой, работающей в <a href="https://twitter.com/">Twitter</a>. Он поддерживает адаптивный дизайн и имеет предопределённые шаблоны дизайна, которые вы можете использовать из коробки или настроить для своих нужд с помощью кода. Вам также не нужно беспокоиться о совместимости с другими браузерами, так как Bootstrap совместим со всеми современными браузерами и новыми версиями {{glossary("Microsoft Internet Explorer", "Internet Explorer")}} .</p>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li>{{interwiki("wikipedia", "Bootstrap (front-end framework)", "Bootstrap")}} в Wikipedia</li>
  <li><a href="https://getbootstrap.com/">Скачать Bootstrap</a></li>
diff --git a/files/ru/glossary/call_stack/index.html b/files/ru/glossary/call_stack/index.html
index ba24aad619..21f77b6330 100644
--- a/files/ru/glossary/call_stack/index.html
+++ b/files/ru/glossary/call_stack/index.html
@@ -90,7 +90,7 @@ greeting();
  <li>{{Interwiki("wikipedia", "Call stack")}} на Википедии</li>
 </ul>
 
-<section id="Quick_Links">
+<section id="Quick_links">
 <ul>
  <li><a href="/ru/docs/Glossary">MDN Web Docs Glossary</a>
 
diff --git a/files/ru/glossary/crawler/index.html b/files/ru/glossary/crawler/index.html
index a54589ad50..daf7041a5c 100644
--- a/files/ru/glossary/crawler/index.html
+++ b/files/ru/glossary/crawler/index.html
@@ -12,7 +12,7 @@ original_slug: Глоссарий/Crawler
  <li><a href="https://ru.wikipedia.org/wiki/%D0%9F%D0%BE%D0%B8%D1%81%D0%BA%D0%BE%D0%B2%D1%8B%D0%B9_%D1%80%D0%BE%D0%B1%D0%BE%D1%82">Поисковый робот</a> на Википедии</li>
 </ul>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li><a href="/en-US/docs/Glossary">MDN Web Docs Glossary</a>
 
diff --git a/files/ru/glossary/fps/index.html b/files/ru/glossary/fps/index.html
index 8634a68c4c..6a6fd11b56 100644
--- a/files/ru/glossary/fps/index.html
+++ b/files/ru/glossary/fps/index.html
@@ -18,4 +18,4 @@ original_slug: Глоссарий/FPS
  <li>{{Interwiki("wikipedia", "Кадровая частота")}} на Википедии</li>
 </ul>
 
-<section class="Quick_links" id="Quick_Links"></section>
+<section id="Quick_links"></section>
diff --git a/files/ru/glossary/global_object/index.html b/files/ru/glossary/global_object/index.html
index 93b4b1acfc..cfda431f7c 100644
--- a/files/ru/glossary/global_object/index.html
+++ b/files/ru/glossary/global_object/index.html
@@ -51,7 +51,7 @@ window.greeting(); // Тоже самое что и обычный вызов: g
    console.log("Hi!");
 }</pre>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ul>
  <li><a href="/en-US/docs/Glossary">MDN Web Docs Glossary</a>
 
diff --git a/files/ru/glossary/http_2/index.html b/files/ru/glossary/http_2/index.html
index dbf27aa9ba..0a0853d092 100644
--- a/files/ru/glossary/http_2/index.html
+++ b/files/ru/glossary/http_2/index.html
@@ -14,7 +14,7 @@ original_slug: Глоссарий/HTTP_2
 
 <p>HTTP/2 никоим образом не изменяет семантику применяемую HTTP. Все основные концепции HTTP 1.1, такие как методы HTTP, коды статусов, URI, и поля заголовков останутся прежними. Вместо этого HTTP/2 изменит порядок(форму) данных и способ их передачи между клиентом и сервером, которые управляют всем процессом, и скроет сложность применения в новом обрамляющем слое. Это позволит использовать существующие приложения без изменений.</p>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li>Основные сведения
   <ol>
diff --git a/files/ru/glossary/loop/index.html b/files/ru/glossary/loop/index.html
index 21221d230a..673db13cbd 100644
--- a/files/ru/glossary/loop/index.html
+++ b/files/ru/glossary/loop/index.html
@@ -73,7 +73,7 @@ while(i &lt; 5){
  <li>Блок кода будет продолжать работать, пока переменная (i) меньше 5.</li>
 </ul>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li>Общие сведения
   <ol>
diff --git a/files/ru/glossary/method/index.html b/files/ru/glossary/method/index.html
index a6c4943d83..ca791c83f1 100644
--- a/files/ru/glossary/method/index.html
+++ b/files/ru/glossary/method/index.html
@@ -28,7 +28,7 @@ original_slug: Глоссарий/Method
  <li><a href="/ru/docs/Web/JavaScript/Reference">Список встроенных методов JavaScript</a></li>
 </ul>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ul>
  <li><a href="/ru/docs/Glossary">Глоссарий MDN</a>
 
diff --git a/files/ru/glossary/scroll_container/index.html b/files/ru/glossary/scroll_container/index.html
index 5b43899c2c..3de9232490 100644
--- a/files/ru/glossary/scroll_container/index.html
+++ b/files/ru/glossary/scroll_container/index.html
@@ -8,7 +8,7 @@ original_slug: Глоссарий/Scroll_container
 
 <p>Scroll-контейнер позволяет пользователю с помощью прокрутки достигать участков переполняющего содержимого, которые в ином случае были бы обрезаны и поэтому недоступны для просмотра. Видимая часть scroll-контейнера называется {{glossary("Scrollport", "scrollport")}}.</p>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ul>
  <li><a href="/en-US/docs/Glossary">MDN Web Docs Glossary</a>:
 
diff --git a/files/ru/glossary/semantics/index.html b/files/ru/glossary/semantics/index.html
index 3fe96846c9..c4c0ce785d 100644
--- a/files/ru/glossary/semantics/index.html
+++ b/files/ru/glossary/semantics/index.html
@@ -70,7 +70,7 @@ original_slug: Глоссарий/Semantics
  <li>{{interwiki("wikipedia", "Semantics#Computer_science", "The meaning of semantics in computer science")}} on Wikipedia</li>
 </ul>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ul>
  <li><a href="/en-US/docs/Glossary">MDN Web Docs Glossary</a>
 
diff --git a/files/ru/glossary/type_coercion/index.html b/files/ru/glossary/type_coercion/index.html
index f7fe414b3c..74080fad6c 100644
--- a/files/ru/glossary/type_coercion/index.html
+++ b/files/ru/glossary/type_coercion/index.html
@@ -27,7 +27,7 @@ console.log(sum);</pre>
 
 <pre class="brush: js">sum = Number(value1) + value2;</pre>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li><a href="/ru/docs/Glossary">Глоссарий</a>
 
diff --git a/files/ru/glossary/type_conversion/index.html b/files/ru/glossary/type_conversion/index.html
index eae5f14c8a..14f47a0438 100644
--- a/files/ru/glossary/type_conversion/index.html
+++ b/files/ru/glossary/type_conversion/index.html
@@ -13,7 +13,7 @@ original_slug: Глоссарий/Type_Conversion
 ---
 <p>Преобразование типов (type conversion) означает передачу данных из одного типа данных в другой. <em>Неявное преобразование</em> происходит, когда компилятор автоматически присваивает (назначает) типы данных, но исходный код также может <em>явно</em> требовать преобразования для завершения. Например, в случае инструкции <code>5+2.0</code>, число с плавающей точкой <code>2.0</code> неявно преобразуется в целое число, но в случае инструкции <code>Number("0x11")</code> строка "0x11" явно преобразуется в типизированное число 17.</p>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li><a href="/ru/docs/Glossary">Глоссарий</a>
 
diff --git a/files/ru/glossary/whitespace/index.html b/files/ru/glossary/whitespace/index.html
index 059b742fbf..ff6d6f9541 100644
--- a/files/ru/glossary/whitespace/index.html
+++ b/files/ru/glossary/whitespace/index.html
@@ -10,7 +10,7 @@ original_slug: Глоссарий/Пробельные_символы
 
 <p><a href="https://html.spec.whatwg.org/">Текущий стандарт HTML</a> описывает как пробельные 5 символов из таблицы ASCII: U+0009 TAB, U+000A LF, U+000C FF, U+000D CR и U+0020 SPACE. В тексте они будут отображены как обычные пробелы, а последовательность пробельных символов, в большинстве случаев, будет схлопнута в один пробел (это поведение можно изменить CSS-свойством {{cssxref("white-space")}}). Они могут быть использованы как разделители между названием элемента и его атрибутами, между названиями классов и т. д.</p>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li>Спецификация
   <ol>
diff --git a/files/ru/learn/common_questions/what_is_a_domain_name/index.html b/files/ru/learn/common_questions/what_is_a_domain_name/index.html
index a624fc8e80..cd69e98d50 100644
--- a/files/ru/learn/common_questions/what_is_a_domain_name/index.html
+++ b/files/ru/learn/common_questions/what_is_a_domain_name/index.html
@@ -58,7 +58,7 @@ original_slug: Learn/Understanding_domain_names
 
 <h4 id="Кто_владеет_доменным_именем">Кто владеет доменным именем?</h4>
 
-<p>Вы не можете “купить доменное имя”. Вы платите за право использовать доменное имя в течение одного или нескольких лет. Вы можете продлить это право и ваше продление будет иметь безусловный приоритет над заявками на домен от других желающих. Но вы никогда не владеть доменным именем.</p>
+<p>Вы не можете “купить доменное имя”. Вы платите за право использовать доменное имя в течение одного или нескольких лет. Вы можете продлить это право и ваше продление будет иметь безусловный приоритет над заявками на домен от других желающих. Но вы никогда не будете владеть доменным именем.</p>
 
 <p>Компании, называемые регистраторами, ведут реестры доменных имён, которые содержат техническую и административную информацию, связывающую вас и ваш домен.</p>
 
diff --git a/files/ru/learn/css/building_blocks/overflowing_content/index.html b/files/ru/learn/css/building_blocks/overflowing_content/index.html
index 928ef12ad7..468ccf633a 100644
--- a/files/ru/learn/css/building_blocks/overflowing_content/index.html
+++ b/files/ru/learn/css/building_blocks/overflowing_content/index.html
@@ -1,38 +1,38 @@
 ---
-title: Перекрытие содержимого
+title: Переполнение содержимого
 slug: Learn/CSS/Building_blocks/Overflowing_content
 translation_of: Learn/CSS/Building_blocks/Overflowing_content
 ---
 <div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Handling_different_text_directions", "Learn/CSS/Building_blocks/Values_and_units", "Learn/CSS/Building_blocks")}}</div>
 
-<p>В этом уроке мы рассмотрим другую важную концепцию в CSS — <strong>overflow</strong>. Overflow это то что случается, когда слишком много контента содержится внутри блока. В этом гайде вы изучите что это и как этим управлять.</p>
+<p>В этом уроке мы рассмотрим другую важную концепцию в CSS — <strong>переполнение</strong>. Переполнение это то, что случается когда слишком много контента содержится внутри блока. В этом гайде вы изучите что это и как этим управлять.</p>
 
 <table class="learn-box standard-table">
  <tbody>
   <tr>
-   <th scope="row">Prerequisites:</th>
-   <td>Basic computer literacy, <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Installing_basic_software">basic software installed</a>, basic knowledge of <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">working with files</a>, HTML basics (study <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a>), and an idea of how CSS works (study <a href="/en-US/docs/Learn/CSS/First_steps">CSS first steps</a>.)</td>
+   <th scope="row">Необходимые условия:</th>
+   <td>Базовая компьютерная грамотность, <a href="ru/Learn/Getting_started_with_the_web/Installing_basic_software">Установка базового ПО</a>, базовые знания <a href="ru/Learn/Getting_started_with_the_web/Dealing_with_files">работы с файлами</a>, основы HTML (<a href="/ru/docs/Learn/HTML/Introduction_to_HTML">Введение в HTML</a>), и общее представление о том, как работает CSS (study <a href="/ru/docs/Learn/CSS/First_steps">Введение в CSS</a>.)</td>
   </tr>
   <tr>
-   <th scope="row">Objective:</th>
-   <td>To understand overflow and how to manage it.</td>
+   <th scope="row">Цель:</th>
+   <td>Понять, что такое переполнение и как с ним работать.</td>
   </tr>
  </tbody>
 </table>
 
-<h2 id="Что_такое_overflow">Что такое overflow?</h2>
+<h2 id="Что_такое_overflow">Что такое переполнение?</h2>
 
-<p>Мы уже знаем что все в  CSS - блоки, и что мы можем ограничивать размер этих блоков присваивая им определённое значение посредством {{cssxref("width")}} и {{cssxref("height")}} (или {{cssxref("inline-size")}} и {{cssxref("block-size")}}). Overflow это то что случается, когда у вас слишком много контента в блоке, так что он не помещается в данный ограниченный блок. CSS даёт нам различные инструменты для управления этим overflow, и это также полезная концепция для понимания на этой ранней стадии. Вы будете встречаться с overflow достаточно часто когда пишите CSS, особенно когда глубже погрузитесь в CSS макет.</p>
+<p>Мы уже знаем, что всё в CSS — блоки, и что мы можем ограничивать размер этих блоков, присваивая им определённое значение посредством {{cssxref("width")}} и {{cssxref("height")}} (или {{cssxref("inline-size")}} и {{cssxref("block-size")}}). Переполнение — это то, что случается, когда у вас слишком много контента в блоке, так что он не помещается в данный ограниченный размер. CSS даёт нам различные инструменты для управления переполнением, и это также полезная концепция для понимания на этой ранней стадии. Вы будете встречаться с переполнением достаточно часто, когда пишите CSS, особенно когда глубже погрузитесь в CSS раскладку.</p>
 
 <h2 id="CSS_пытается_избежать_потери_данных">CSS пытается избежать "потери данных"</h2>
 
-<p>Рассмотрим два примера, демонстрирующих поведение CSS по умолчанию при возникновении перекрытия.</p>
+<p>Рассмотрим два примера, демонстрирующих поведение CSS по умолчанию при возникновении переполнения.</p>
 
-<p>Первый пример – это блок, который был ограничен установленным параметром <code>height</code>. Затем мы добавили контент, превышающий выделенное пространство. Контент вышел за пределы поля и попал в абзац ниже.</p>
+<p>Первый пример — это блок, который был ограничен установленным параметром <code>height</code>. Затем мы добавили контент, превышающий выделенное пространство. Контент вышел за пределы поля и попал в абзац ниже.</p>
 
 <p>{{EmbedGHLiveSample("css-examples/learn/overflow/block-overflow.html", '100%', 600)}}</p>
 
-<p>Второй пример – слово в блоке. Блок оказался слишком маленьким для этого слова, и поэтому оно выходит за его пределы.</p>
+<p>Второй пример — слово в блоке. Блок оказался слишком маленьким для этого слова, и поэтому оно выходит за его пределы.</p>
 
 <p>{{EmbedGHLiveSample("css-examples/learn/overflow/inline-overflow.html", '100%', 500)}}</p>
 
@@ -40,19 +40,19 @@ translation_of: Learn/CSS/Building_blocks/Overflowing_content
 
 <p>По возможности, CSS не скрывает контент, потому что это может привести к потере данных. Проблема состоит в том, что вы можете не заметить исчезновение данных. Посетители сайта тоже могут не заметить этого. Если кнопка отправки формы исчезнет и никто не может заполнить форму, это может стать большой проблемой! Поэтому, вместо того, чтобы скрывать выходящий за границы блока контент, CSS явно его отображает. Так вы с большей вероятностью увидите проблему при разработке. В худшем случае это заметит посетитель сайта и сообщит вам об этом.</p>
 
-<p>Если вы ограничиваете поле с помощью параметров <code>width</code> или <code>height</code>, CSS доверяет вам и считает, что вы знаете, что делаете. CSS предполагает, что вы управляете ситуацией и предусматриваете возможность возникновения перекрытия. В общем случае, ограничение размера блока проблематично, если он содержит текст. В этом месте может быть больше текста, чем вы ожидали или его размер может быть больше (например, если пользователь увеличил размер шрифта).</p>
+<p>Если вы ограничиваете поле с помощью параметров <code>width</code> или <code>height</code>, CSS доверяет вам и считает, что вы знаете, что делаете. CSS предполагает, что вы управляете ситуацией и предусматриваете возможность возникновения переполнения. В общем случае, ограничение размера блока проблематично, если он содержит текст. В этом месте может быть больше текста, чем вы ожидали или его размер может быть больше (например, если пользователь увеличил размер шрифта).</p>
 
-<p>В следующих двух уроках объясняются различные подходы управления размерами, которые позволяют уменьшить вероятность возникновения перекрытия. Однако, если вам нужен фиксированный размер блока, вы также можете контролировать поведение перекрытия.</p>
+<p>В следующих двух уроках объясняются различные подходы управления размерами, которые позволяют уменьшить вероятность возникновения переполнения. Однако, если вам нужен фиксированный размер блока, вы также можете контролировать поведение переполнения.</p>
 
 <h2 id="The_overflow_property">Свойство overflow</h2>
 
-<p>Свойство {{cssxref("overflow")}} позволяет взять под контроль перекрытие элемента и подсказать браузеру, как он должен себя вести. Значение overflow по умолчанию – <code>visible</code>, что означает - «показывать контент, когда он выходит за границы блока».</p>
+<p>Свойство {{cssxref("overflow")}} позволяет взять под контроль переполнение элемента и подсказать браузеру, как он должен себя вести. Значение overflow по умолчанию – <code>visible</code>, что означает - «показывать контент, когда он выходит за границы блока».</p>
 
 <p>Чтобы обрезать контент выходящий за пределы блока, вы можете установить <code>overflow: hidden</code>. Это свойство делает именно то, о чём говорит: скрывает выходящий за пределы контент. Помните, что это может сделать часть содержимого невидимым. Используйте данное значение только в том случае, если скрытие содержимого не вызовет проблем.</p>
 
 <p>{{EmbedGHLiveSample("css-examples/learn/overflow/hidden.html", '100%', 600)}}</p>
 
-<p>Возможно, что при возникновении перекрытия вместо скрытия вы захотите отобразить полосы прокрутки. При использовании <code>overflow: scroll</code> браузеры с видимыми полосами прокрутки всегда будут отображать их, даже если содержимого недостаточно для возникновения перекрытия. Это позволяет сохранить целостность раскладки, так как полосы прокрутки не будут появляться и пропадать в зависимости от количества содержимого в контейнере.</p>
+<p>Возможно, что при возникновении переполнения вместо скрытия вы захотите отобразить полосы прокрутки. При использовании <code>overflow: scroll</code> браузеры с видимыми полосами прокрутки всегда будут отображать их, даже если содержимого недостаточно для возникновения перекрытия. Это позволяет сохранить целостность раскладки, так как полосы прокрутки не будут появляться и пропадать в зависимости от количества содержимого в контейнере.</p>
 
 <p><strong>Удалите часть содержимого из поля ниже. Обратите внимание, что полосы прокрутки остаются, даже если прокрутка не требуется.</strong></p>
 
@@ -82,44 +82,44 @@ translation_of: Learn/CSS/Building_blocks/Overflowing_content
 
 <p>Когда вы используете значение overflow, такое как <code>scroll</code> или <code>auto</code>, вы создаете <strong>контекст форматирования блока </strong> (BFC). Содержимое блока, для которого вы установили параметр <code>overflow</code> приобретает автономную раскладку. Контент вне блока не может проникнуть в блок, и ничто не может вылезти из этого блока в окружающее его пространство. Это дает возможность прокручивать содержимое, так чтобы оно не выходило за пределы блока.</p>
 
-<h2 id="Unwanted_overflow_in_web_design">Нежелательный overflow в веб-разработке</h2>
+<h2 id="Unwanted_overflow_in_web_design">Нежелательное переполнение в веб-разработке</h2>
 
-<p>Современные методы раскладки (описанные в разделе <a href="/en-US/docs/Learn/CSS/CSS_layout">CSS раскладка</a>) справляются с перекрытием очень хорошо вне зависимости от того, сколько контента будет на веб-странице.</p>
+<p>Современные методы раскладки (описанные в разделе <a href="/en-US/docs/Learn/CSS/CSS_layout">CSS раскладка</a>) справляются с переполнением очень хорошо вне зависимости от того, сколько контента будет на веб-странице.</p>
 
-<p>Это не всегда было нормой. В прошлом некоторые сайты были построены с блоками фиксированной высоты для выравнивания нижних границ блоков. Тем не менее эти блоки могли не иметь ничего общего между собой. Это была хрупкая конструкция. В устаревших приложениях вы можете встретить блок, в котором содержимое перекрывает другое содержимое на странице. Теперь вы понимаете, что это происходит из-за overflow. В идеале вы должны провести рефакторинг разметки, чтобы не полагаться на блоки с фиксированной высотой.</p>
+<p>Это не всегда было нормой. В прошлом некоторые сайты были построены с блоками фиксированной высоты для выравнивания нижних границ блоков. Тем не менее эти блоки могли не иметь ничего общего между собой. Это была хрупкая конструкция. В устаревших приложениях вы можете встретить блок, в котором содержимое перекрывает другое содержимое на странице. Теперь вы понимаете, что это происходит из-за переполнения. В идеале вы должны провести рефакторинг разметки, чтобы не полагаться на блоки с фиксированной высотой.</p>
 
-<p>При разработке сайта всегда помните о перекрытии. Тестируйте дизайны как с большим, так и с малым количеством контента. Проверяйте различные размеры шрифта текстов. Убедитесь, что ваш CSS работает надёжно. Изменение значения overflow для скрытия содержимого или добавления полос прокрутки, должно использоваться только при необходимости (например там, где вы хотите использовать прокручиваемый блок).</p>
+<p>При разработке сайта всегда помните о переполнении. Тестируйте дизайны как с большим, так и с малым количеством контента. Проверяйте различные размеры шрифта текстов. Убедитесь, что ваш CSS работает надёжно. Изменение значения overflow для скрытия содержимого или добавления полос прокрутки, должно использоваться только при необходимости (например там, где вы хотите использовать прокручиваемый блок).</p>
 
 <h2 id="Test_your_skills!">Проверьте свои навыки!</h2>
 
-<p>В этой статье мы рассмотрели многое, но можете ли вы вспомнить самую важную информацию? Вы можете найти дополнительные тесты, чтобы убедиться, что вы усвоили эту информацию, прежде чем двигаться дальше – см. <a href="/en-US/docs/Learn/CSS/Building_blocks/Overflow_Tasks">Проверь свои навыки: overflow</a>.</p>
+<p>В этой статье мы рассмотрели многое, но можете ли вы вспомнить самую важную информацию? Вы можете найти дополнительные тесты, чтобы убедиться, что вы усвоили эту информацию, прежде чем двигаться дальше – см. <a href="/en-US/docs/Learn/CSS/Building_blocks/Overflow_Tasks">Проверь свои навыки: переполнение</a>.</p>
 
 <h2 id="Summary">Заключение</h2>
 
-<p>В этом уроке была представлена концепция перекрытия. Важно понимать, что CSS по умолчанию старается избежать обрезания выходящего за границы блока содержимого. Мы изучили, как можно справиться с возникшим перекрытием, а также рассмотрели важность тестирования поведения веб-страниц как с малым количеством контента, так и с большим.</p>
+<p>В этом уроке была представлена концепция переполнения. Важно понимать, что CSS по умолчанию старается избежать обрезания выходящего за границы блока содержимого. Мы изучили, как можно справиться с возникшим переполнением, а также рассмотрели важность тестирования поведения веб-страниц как с малым количеством контента, так и с большим.</p>
 
 <p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Handling_different_text_directions", "Learn/CSS/Building_blocks/Values_and_units", "Learn/CSS/Building_blocks")}}</p>
 
 <h2 id="In_this_module">In this module</h2>
 
 <ol>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Cascade and inheritance</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">CSS selectors</a>
+ <li><a href="/ru/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Каскад и наследование</a></li>
+ <li><a href="/ru/docs/Learn/CSS/Building_blocks/Selectors">Селекторы CSS</a>
   <ul>
-   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Type, class, and ID selectors</a></li>
-   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Attribute selectors</a></li>
-   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Pseudo-classes and pseudo-elements</a></li>
-   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Combinators</a></li>
+   <li><a href="/ru/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Селекторы типа, класса и ID</a></li>
+   <li><a href="/ru/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Селекторы атрибута</a></li>
+   <li><a href="/ru/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Псевдоклассы и псевдоэлементы</a></li>
+   <li><a href="/ru/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Комбинаторы</a></li>
   </ul>
  </li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">The box model</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Backgrounds and borders</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Handling different text directions</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content">Overflowing content</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">Values and units</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Sizing items in CSS</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Images, media, and form elements</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Styling_tables">Styling tables</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS">Debugging CSS</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing">Organizing your CSS</a></li>
+ <li><a href="/ru/docs/Learn/CSS/Building_blocks/The_box_model">Блочная модель(The box model)</a></li>
+ <li><a href="/ru/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Фон и границы</a></li>
+ <li><a href="/ru/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Обработка разных направлений текста</a></li>
+ <li><a href="/ru/docs/Learn/CSS/Building_blocks/Overflowing_content">Переполнение содержимого</a></li>
+ <li><a href="/ru/docs/Learn/CSS/Building_blocks/Values_and_units">Значения и единицы измерения</a></li>
+ <li><a href="/ru/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Размеры в CSS</a></li>
+ <li><a href="/ru/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Элементы изображений, форм и медиа-элементы</a></li>
+ <li><a href="/ru/docs/Learn/CSS/Building_blocks/Styling_tables">Стилизация таблиц</a></li>
+ <li><a href="/ru/docs/Learn/CSS/Building_blocks/Debugging_CSS">Отладка CSS</a></li>
+ <li><a href="/ru/docs/Learn/CSS/Building_blocks/Organizing">Организация вашей CSS</a></li>
 </ol>
diff --git a/files/ru/learn/css/building_blocks/sizing_items_in_css/index.html b/files/ru/learn/css/building_blocks/sizing_items_in_css/index.html
index 198f9f6ecc..6746ecf098 100644
--- a/files/ru/learn/css/building_blocks/sizing_items_in_css/index.html
+++ b/files/ru/learn/css/building_blocks/sizing_items_in_css/index.html
@@ -5,125 +5,129 @@ translation_of: Learn/CSS/Building_blocks/Sizing_items_in_CSS
 ---
 <div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Values_and_units", "Learn/CSS/Building_blocks/Images_media_form_elements", "Learn/CSS/Building_blocks")}}</div>
 
-<p>In the various lessons so far you have come across a number of ways to size items on a web page using CSS. Understanding how big the different features in your design will be is important, and in this lesson we will summarize the various ways elements get a size via CSS and define a few terms around sizing that will help you in the future.</p>
+<p>В предыдущих уроках вы познакомились с некоторыми способами изменения размеров элементов на веб-странице с помощью CSS. Понимание того, насколько велики будут различные элементы в вашем дизайне — важно, и в этом уроке мы подведем итог по различным способам задания размеров элементов с помощью CSS и расскажем о некоторых терминах, связанных с размерами, которые помогут вам в будущем.</p>
 
 <table class="learn-box standard-table">
  <tbody>
   <tr>
-   <th scope="row">Prerequisites:</th>
-   <td>Basic computer literacy, <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Installing_basic_software">basic software installed</a>, basic knowledge of <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">working with files</a>, HTML basics (study <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a>), and an idea of how CSS works (study <a href="/en-US/docs/Learn/CSS/First_steps">CSS first steps</a>.)</td>
+   <th scope="row">Необходимые условия:</th>
+   <td>Базовая компьютерная грамотность, <a href="https://developer.mozilla.org/ru-RU/Learn/Getting_started_with_the_web/Installing_basic_software">Установка базового ПО</a>, базовые знания <a href="https://developer.mozilla.org/ru-RU/Learn/Getting_started_with_the_web/Dealing_with_files">работы с файлами</a>, основы HTML (<a href="/ru-RU/docs/Learn/HTML/Introduction_to_HTML">Введение в HTML</a>), и общее представление о том, как работает CSS (<a href="/ru-RU/docs/Learn/CSS/First_steps">Введение в CSS</a>.)</td>
   </tr>
   <tr>
-   <th scope="row">Objective:</th>
-   <td>To understand the different ways we can size things in CSS.</td>
+   <th scope="row">Цель:</th>
+   <td>Изучить различные способы задания размеров объектов в CSS.</td>
   </tr>
  </tbody>
 </table>
 
-<h2 id="The_natural_or_intrinsic_size_of_things">The natural or intrinsic size of things</h2>
+<h2 id="The_natural_or_intrinsic_size_of_things">Размер по умолчанию или внутренний размер</h2>
 
-<p>HTML Elements have a natural size, set before they are affected by any CSS. A straightforward example is an image. An image has a width and a height defined in the image file it is embedding into the page. This size is described as the <strong>intrinsic size</strong> — which comes from the image itself.</p>
+<p>Элементы HTML имеют размеры по умолчанию, заданные до того, как на них повлияет какое-либо правило CSS. Простой пример — изображение. Изображение имеет ширину и высоту, определенные в файле изображения. Этот размер называется — <strong>внутренний размер</strong>, он исходит из самого изображения.</p>
 
-<p>If you place an image on a page and do not change its height and width, either using attributes on the <code>&lt;img&gt;</code> tag or CSS, it will be displayed using that intrinsic size. We have given the image in the example below a border so that you can see the extent of the file.</p>
+<p>Если вы разместите изображение на странице и не измените его высоту и ширину, используя атрибуты тега <code>&lt;img&gt;</code> или CSS, оно будет отображаться с использованием этого внутреннего размера. В примере ниже, мы установили для изображения рамку, чтобы вы могли видеть размер файла.</p>
 
 <p>{{EmbedGHLiveSample("css-examples/learn/sizing/intrinsic-image.html", '100%', 600)}}</p>
 
-<p>An empty {{htmlelement("div")}} however, has no size of its own. If you add a {{htmlelement("div")}} to your HTML with no content, then give it a border as we did with the image, you will see a line on the page. This is the collapsed border on the element — there is no content to hold it open. In our example below, that border stretches to the width of the container, because it is a block level element, a behavior that should be starting to become familiar to you. It has no height (or size in the block dimension) because there is no content.</p>
+<p>С другой стороны, пустой {{htmlelement("div")}} не имеет собственного размера. Если вы добавите {{htmlelement("div")}} в свой HTML-код без содержимого, а затем установите для него рамку, как мы это делали с изображением, вы увидите линию на странице. Это схлопнувшиеся границы элемента — содержимое, которое могло бы удерживать ее в открытом состоянии, отсутствует. В нашем примере ниже эта граница растягивается на всю ширину контейнера, потому что это элемент блочный, поведение которого должно быть вам знакомо. У него нет высоты, потому что нет содержимого.</p>
 
 <p>{{EmbedGHLiveSample("css-examples/learn/sizing/intrinsic-text.html", '100%', 500)}}</p>
 
-<p>In the example above, try adding some text inside the empty element. The border now contains that text because the height of the element is defined by the content. Therefore the size of this <code>&lt;div&gt;</code> in the block dimension comes from the size of the content. Again, this is the intrinsic size of the element — its size is defined by its content.</p>
+<p>В приведенном выше примере попробуйте добавить текст внутри пустого элемента. Этот текст теперь становится охваченным границами, потому что высота элемента определяется содержимым. Следовательно, размер этого <code>&lt;div&gt;</code> устанавливается размером содержимого. Как и в предыдущем примере, этот размер является внутренним размером — размер элемента определяется размером его содержимого.</p>
 
-<h2 id="Setting_a_specific_size">Setting a specific size</h2>
+<h2 id="Setting_a_specific_size">Присваивание определенного размера</h2>
 
-<p>We can of course give elements in our design a specific size. When a size is given to an element (and the content of which then needs to fit into that size) we refer to it as an <strong>extrinsic size</strong>. Take our <code>&lt;div&gt;</code> from the example above — we can give it specific {{cssxref("width")}} and {{cssxref("height")}} values, and it will now have that size no matter what content is placed into it. As we discovered in <a href="/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content">our previous lesson on overflow</a>, a set height can cause content to overflow if there is more content than the element has space to fit inside it.</p>
+<p>Конечно, мы можем задать элементам нашей страницы определенный размер. Размер, который присваивается элементу (содержимое, которого затем должно соответствовать этому размеру), называется <strong>внешним размером</strong>. Возьмите наш <code>&lt;div&gt;</code> из примера выше и установите ему специальные значения {{cssxref("width")}} и {{cssxref("height")}} и теперь он будет иметь эти размеры, независимо от того, какого размера содержимое в него помещается. Как мы узнали в <a href="/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content">нашем предыдущем уроке о переполнении</a>, заданная высота блока может вызвать переполнение содержимого, если размер содержимого больше, чем внутреннее пространство элемента.</p>
 
 <p>{{EmbedGHLiveSample("css-examples/learn/sizing/height.html", '100%', 600)}}</p>
 
-<p>Due to this problem of overflow, fixing the height of elements with lengths or percentages is something we need to do very carefully on the web.</p>
+<p>Из-за этой проблемы перекрытия, жестко задавать высоту элементов с помощью длинны или процентного соотношения — это то, что нужно делать с большой осторожностью.</p>
 
-<h3 id="Using_percentages">Using percentages</h3>
+<h3 id="Using_percentages">Использование процентного соотношения</h3>
 
-<p>In many ways percentages act like length units, and as we <a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units#Percentages">discussed in the lesson on values and units</a>, they can often be used interchangeably with lengths. When using a percentage you need to be aware what it is a percentage <em>of</em>. In the case of a box inside another container, if you give the child box a percentage width it will be a percentage of the width of the parent container.</p>
+<p>Во многих отношениях проценты действуют как единицы длины, и, как мы <a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units#Percentages">обсуждали в уроке, посвященном значениям и единицам</a>, они часто могут использоваться как взаимозаменяемые с длиной. При использовании процентов вы должны знать, <em>от чего этот процент рассчитывается</em>. В случае блока внутри другого блока, если вы зададите дочернему блоку процентную ширину, это будет процент от ширины родительского контейнера.</p>
 
 <p>{{EmbedGHLiveSample("css-examples/learn/sizing/percent-width.html", '100%', 600)}}</p>
 
-<p>This is because percentages resolve against the size of the containing block. With no percentage applied our <code>&lt;div&gt;</code> would take up 100% of the available space, as it is a block level element. If we give it a percentage width, this becomes a percentage of the space it would normally fill.</p>
+<p>Это потому, что проценты рассчитываются в зависимости от размера содержащего элемент блока. Если процентное соотношение не применяется, наш <code>&lt;div&gt;</code> будет занимать 100% доступного пространства, так как это элемент блочного типа. Если мы зададим ему ширину в процентах, он займет процент от пространства, которое он обычно заполняет.</p>
 
-<h3 id="Percentage_margins_and_padding">Percentage margins and padding</h3>
+<h3 id="Percentage_margins_and_padding">Margins и paddings в процентах</h3>
 
-<p>If you set <code>margins</code> and <code>padding</code> as a percentage you may notice some strange behavior. In the below example we have a box. We have given the inner box a {{cssxref("margin")}} of 10% and a {{cssxref("padding")}} of 10%. The padding and margin on the top and bottom of the box are the same size as the margin on the left and right.</p>
+<p>Если вы установите <code>margins</code> и <code>padding</code> в процентах, вы можете заметить странное поведение. В приведенном ниже примере у нас есть блок. Мы присвоили внутреннему блоку {{cssxref("margin")}} 10% и {{cssxref("padding")}} 10%. Padding и margin сверху и снизу имеют тот же размер, что и margins слева и справа.</p>
 
 <p>{{EmbedGHLiveSample("css-examples/learn/sizing/percent-mp.html", '100%', 700)}}</p>
 
-<p>You might expect for example the percentage top and bottom margins to be a percentage of the element's height, and the percentage left and right margins to be a percentage of the element's width. However, this is not the case!</p>
+<p>Например, вы можете ожидать, что процентное значение верхнего и нижнего margins будет в процентах от высоты элемента, а процентное левое и правое margins — в процентах от ширины элемента. Тем не менее, это не так!</p>
 
-<p>When you use margin and padding set in percentages, the value is calculated from the<strong> inline size</strong> — therefore the width when working in a horizontal language. In our example, all of the margins and padding are 10% of the width. This means you can have equal sized margins and padding all round the box. This is a fact worth remembering if you do use percentages in this way.</p>
+<p>При использовании margins и padding, заданных в процентах, значение рассчитывается на основе <strong>inline размера</strong> блока — следовательно, ширины при работе с горизонтальным языком. В нашем примере все поля и отступы составляют 10% width. Это означает, что вы будете иметь margins и padding одинакового размера по всему полю. Этот факт стоит запомнить, если вы действительно пользуетесь процентами.</p>
 
-<h2 id="min-_and_max-_sizes">min- and max- sizes</h2>
+<h2 id="min-_and_max-_sizes">Минимальные и максимальные размеры</h2>
 
-<p>In addition to giving things a fixed size, we can ask CSS to give an element a minimum or a maximum size. If you have a box that might contain a variable amount of content, and you always want it to be <em>at least</em> a certain height, you could set the {{cssxref("min-height")}} property on it. The box will always be at least this height, but will then grow taller if there is more content than the box has space for at its minimum height.</p>
+<p>Помимо возможности установить фиксированный размер, мы можем использовать CSS чтобы задать элементу минимальный или максимальный размер. Если у вас есть блок, который может содержать разное количество содержимого, и вы хотите, чтобы он всегда был определенной минимальной высоты, вы можете установить для него свойство {{cssxref("min-height")}}. Блок всегда будет минимальной заданной высоты, пока содержимого не станет больше, чем места в блоке.</p>
 
-<p>In the example below you can see two boxes, both with a defined height of 150 pixels. The box on the left is 150 pixels tall; the box on the right has content that needs more room, and so it has grown taller than 150 pixels.</p>
+<p>В приведенном ниже примере вы можете увидеть два блока, обоим задали минимальную высоту в 150 пикселей. Блок слева имеет высоту 150 пикселей несмотря на то что в нем нет текста. В блоке справа есть контент, которому нужно больше места, чем минимальная заданная высота, поэтому он увеличился.</p>
 
 <p>{{EmbedGHLiveSample("css-examples/learn/sizing/min-height.html", '100%', 800)}}</p>
 
-<p>This is very useful for dealing with variable amounts of content while avoiding overflow.</p>
+<p>Это очень полезно при работе с переменным объемом контента, избегая при этом переполнения.</p>
 
-<p>A common use of {{cssxref("max-width")}} is to cause images to scale down if there is not enough space to display them at their intrinsic width, while making sure they don't become larger than that width.</p>
+<p>Часто {{cssxref("max-width")}} применяют для уменьшения масштаба изображений, если недостаточно места для их отображения.</p>
 
-<p>As an example, if you were to set <code>width: 100%</code> on an image, and its intrinsic width was smaller than its container, the image would be forced to stretch and become larger, causing it to look pixellated. If its intrinsic width were larger than its container, it would overflow it. Neither case is likely to be what you want to happen.</p>
+<p>Например, если бы вы установили <code>width: 100%</code> для изображения, а его внутренняя ширина была меньше, чем его контейнер, изображение было бы вынуждено растягиваться и становиться больше, в результате чего оно выглядело бы пикселизированным.</p>
 
-<p>If you instead use <code>max-width: 100%</code>, the image is able to become smaller than its intrinsic size, but will stop at 100% of its size.</p>
+<p>Если бы вы вместо этого применили <code>max-width: 100%</code>%, и внутренняя ширина изображения была бы меньше, чем его контейнер, изображение не будет принудительно растягиваться и становиться больше, что предотвращает пикселизацию.</p>
 
-<p>In the example below we have used the same image twice. The first image has been given <code>width: 100%</code> and is in a container which is larger than it, therefore it stretches to the container width. The second image has <code>max-width: 100%</code> set on it and therefore does not stretch to fill the container. The third box contains the same image again, also with <code>max-width: 100%</code> set; in this case you can see how it has scaled down to fit into the box.</p>
+<p>В приведенном ниже примере мы использовали одно и то же изображение трижды. Первому изображению было задано <code>width: 100%</code> и оно находится в контейнере, который больше его ширины, поэтому он растягивается до ширины контейнера. Второму изображению задано <code>max-width: 100%</code>, изображение достигло 100% своей ширины не растягивается, чтобы заполнить контейнер. Третье поле снова содержит то же изображение, также с <code>max-width: 100%</code> в этом случае вы можете увидеть, как он уменьшилось, чтобы поместиться в контейнер.</p>
 
 <p>{{EmbedGHLiveSample("css-examples/learn/sizing/max-width.html", '100%', 800)}}</p>
 
-<p>This technique is used to make images <em>responsive</em>, so that when viewed on a smaller device they scale down appropriately. You should however not use this technique to load in really large images and then scale them down in the browser. Images should be appropriately sized to be no larger than they need to be for the largest size they are displayed in the design. Downloading overly large images will cause your site to become slow, and it can cost users more money if they are on a metered connection.</p>
+<p>Этот метод используется для создания <em>отзывчивых</em> изображений, чтобы при просмотре на меньшем устройстве они соответствующим образом уменьшались. Однако вам не следует использовать эту технику для загрузки действительно больших изображений с последующим их уменьшением в браузере. Изображения должны иметь соответствующий размер, чтобы быть не больше, чем они должны быть для самого большого размера, отображаемого в дизайне. Загрузка слишком больших изображений замедлит работу вашего сайта и может стоить пользователям больше денег, если они используют лимитированное соединение.</p>
 
 <div class="blockIndicator note">
-<p><strong>Note</strong>: Find out more about <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">responsive image techniques</a>.</p>
+<p><strong>Примечание</strong>: Узнайте больше о <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">методах создания адаптивных изображений</a>.</p>
 </div>
 
-<h2 id="Viewport_units">Viewport units</h2>
+<h2 id="Viewport_units">Единицы вьюпорта</h2>
 
-<p>The viewport — which is the visible area of your page in the browser you are using to view a site — also has a size. In CSS we have units which relate to the size of the viewport — the <code>vw</code> unit for viewport width, and <code>vh</code> for viewport height. Using these units you can size something relative to the viewport of the user.</p>
+<p>Вьюпо́рт — это видимая область вашей страницы в браузере, который вы используете для просмотра сайта. В CSS у нас есть единицы измерения, которые относятся к размеру вьюпорта  — <code>vw</code> единицы ширины вьюпорта и <code>vh</code> высоты вьюпорта. Используя эти единицы измерения, вы можете изменять размер чего-либо относительно вьюпорта пользователя.</p>
 
-<p><code>1vh</code> is equal to 1% of the viewport height, and <code>1vw</code> is equal to 1% of the viewport width. You can use these units to size boxes, but also text. In the example below we have a box which is sized as 20vh and 20vw. The box contains a letter <code>A</code>, which has been given a {{cssxref("font-size")}} of 10vh.</p>
+<p><code>1vh</code> равен 1% от высоты вьюпорта и <code>1vw</code> равен 1% ширины вьюпорта. Вы можете использовать эти единицы измерения для размеров блоков, а также текста. В приведенном ниже примере у нас есть блок размером 20vh и 20vw. В блоке есть буква <code>A</code>, которой присвоено значение {{cssxref("font-size")}} 10vh.</p>
 
 <p>{{EmbedGHLiveSample("css-examples/learn/sizing/vw-vh.html", '100%', 600)}}</p>
 
-<p><strong>If you change the <code>vh</code> and <code>vw</code> values this will change the size of the box or font; changing the viewport size will also change their sizes because they are sized relative to the viewport. To see the example change when you change the viewport size you will need to load the example in a new browser window that you can resize (as the embedded <code>&lt;iframe&gt;</code> that contains the example shown above is its viewport). <a href="https://mdn.github.io/css-examples/learn/sizing/vw-vh.html">Open the example</a>, resize the browser window, and observe what happens to the size of the box and text.</strong></p>
+<p><strong>Если вы измените величину <code>vh</code> и <code>vw</code> — это изменит размер блока или шрифт; изменение размера вьюпорта также изменит их размеры, поскольку они имеют размер заданный относительно вьюпорта. Чтобы увидеть изменение примера при изменении размера вьюпорта, вам нужно будет загрузить пример в новое окно браузера, размер которого можно изменить (поскольку встроенное приложение <code>&lt;iframe&gt;</code>, содержащее показанный выше пример, является его окном просмотра).  <a href="https://mdn.github.io/css-examples/learn/sizing/vw-vh.html">Откройте пример</a>, измените размер окна браузера и посмотрите, что происходит с размером поля и текста.</strong></p>
 
-<p>Sizing things according to the viewport can be useful in your designs. For example, if you want a full page hero section to show before the rest of your content, making that part of your page 100vh high will push the rest of the content below the viewport, meaning that it will only appear once the document is scrolled.</p>
+<p>Размеры объектов задаваемые в соответствии с вьюпортом могут быть полезны в ваших проектах. Например, если вы хотите, чтобы основная секция отображалась перед остальным контентом, установите для этой части страницы высоту 100vh, это приведет к выталкиванию остального контента ниже видимой области, что означает, что он появится только после того, как страницу прокрутят вниз.</p>
 
-<h2 id="Summary">Summary</h2>
+<h2 id="Test_your_skills!">Проверьте свои навыки!</h2>
 
-<p>This lesson has given you a rundown of some key issues that you might run into when sizing things on the web. When you move onto <a href="/en-US/docs/Learn/CSS/CSS_layout">CSS Layout</a>, sizing will become very important in mastering the different layout methods, so it is worth understanding the concepts here before moving on.</p>
+<p>В этой статье мы рассмотрели многое, но можете ли вы вспомнить самую важную информацию? Вы можете найти дополнительные тесты, чтобы убедиться, что вы сохранили эту информацию, прежде чем двигаться дальше - см. <a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_tasks">Проверка своих навыков: задание размеров</a>.</p>
+
+<h2 id="Summary">Заключение</h2>
+
+<p>Этот урок дал вам краткое изложение некоторых ключевых проблем, с которыми вы можете столкнуться при определении размеров объектов в Интернете. Когда вы перейдете к <a href="/en-US/docs/Learn/CSS/CSS_layout">CSS раскладке</a>, изменение размеров станет очень важным для освоения различных методов раскладки, поэтому перед тем, как двигаться дальше, стоит разобраться в концепциях.</p>
 
 <p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Values_and_units", "Learn/CSS/Building_blocks/Images_media_form_elements", "Learn/CSS/Building_blocks")}}</p>
 
-<h2 id="In_this_module">In this module</h2>
+<h2 id="In_this_module">В этом модуле</h2>
 
 <ol>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Cascade and inheritance</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">CSS selectors</a>
+ <li><a href="/ru/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Каскад и наследование</a></li>
+ <li><a href="/ru/docs/Learn/CSS/Building_blocks/Selectors">Селекторы CSS</a>
   <ul>
-   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Type, class, and ID selectors</a></li>
-   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Attribute selectors</a></li>
-   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Pseudo-classes and pseudo-elements</a></li>
-   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Combinators</a></li>
+   <li><a href="/ru/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Селекторы типа, класса и ID</a></li>
+   <li><a href="/ru/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Селекторы атрибута</a></li>
+   <li><a href="/ru/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Псевдоклассы и псевдоэлементы</a></li>
+   <li><a href="/ru/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Комбинаторы</a></li>
   </ul>
  </li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">The box model</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Backgrounds and borders</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Handling different text directions</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content">Overflowing content</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">Values and units</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Sizing items in CSS</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Images, media, and form elements</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Styling_tables">Styling tables</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS">Debugging CSS</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing">Organizing your CSS</a></li>
+ <li><a href="/ru/docs/Learn/CSS/Building_blocks/The_box_model">Блочная модель(The box model)</a></li>
+ <li><a href="/ru/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Фон и границы</a></li>
+ <li><a href="/ru/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Обработка разных направлений текста</a></li>
+ <li><a href="/ru/docs/Learn/CSS/Building_blocks/Overflowing_content">Переполнение содержимого</a></li>
+ <li><a href="/ru/docs/Learn/CSS/Building_blocks/Values_and_units">Значения и единицы измерения</a></li>
+ <li><a href="/ru/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Размеры в CSS</a></li>
+ <li><a href="/ru/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Элементы изображений, форм и медиа-элементы</a></li>
+ <li><a href="/ru/docs/Learn/CSS/Building_blocks/Styling_tables">Стилизация таблиц</a></li>
+ <li><a href="/ru/docs/Learn/CSS/Building_blocks/Debugging_CSS">Отладка CSS</a></li>
+ <li><a href="/ru/docs/Learn/CSS/Building_blocks/Organizing">Организация вашей CSS</a></li>
 </ol>
diff --git a/files/ru/web/api/atob/index.html b/files/ru/web/api/atob/index.html
new file mode 100644
index 0000000000..931c4deb95
--- /dev/null
+++ b/files/ru/web/api/atob/index.html
@@ -0,0 +1,71 @@
+---
+title: WindowOrWorkerGlobalScope.atob()
+slug: Web/API/atob
+translation_of: Web/API/WindowOrWorkerGlobalScope/atob
+original_slug: Web/API/WindowOrWorkerGlobalScope/atob
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p>Функция <strong><code>WindowOrWorkerGlobalScope.atob()</code></strong> декодирует строку данных, которая была закодирована с использованием  base-64. Вы можете использовать метод {{domxref("WindowOrWorkerGlobalScope.btoa","btoa()")}}, чтобы декодировать и передать данные, которые в исходном виде могут вызвать проблемы  передачи, затем отправить их, и использовать метод <code>atob()</code> чтобы декодировать даны снова. Например, вы можете закодировать, передать, и декодировать управляющие символы, такие как ASCII значения от 0 до 31.</p>
+
+<p>В случаях использования с Unicode или UTF-8 строками, смотрите <a href="/en-US/docs/Web/JavaScript/Base64_encoding_and_decoding#The_.22Unicode_Problem.22">this note at Base64 encoding and decoding</a> и <a href="/en-US/docs/Web/API/window.btoa#Unicode_Strings">this note at <code>btoa()</code></a>.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">var decodedData = scope.atob(<em>encodedData</em>);</pre>
+
+<h3 id="Throws">Throws</h3>
+
+<p>Выбрасывает {{jsxref("DOMException")}}, если длина переданной строки не кратна 4.</p>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush:js">var encodedData = window.btoa('Hello, world'); // кодирует строку
+var decodedData = window.atob(encodedData); // декодирует строку</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'webappapis.html#dom-btoa', 'WindowOrWorkerGlobalScope.atob()')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Method moved to the <code>WindowOrWorkerGlobalScope</code> mixin in the latest spec.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#dom-windowbase64-atob', 'WindowBase64.atob()')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>No change since the latest snapshot, {{SpecName("HTML5.1")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', '#dom-windowbase64-atob', 'WindowBase64.atob()')}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>Snapshot of {{SpecName("HTML WHATWG")}}. No change.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5 W3C", "#dom-windowbase64-atob", "WindowBase64.atob()")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Snapshot of {{SpecName("HTML WHATWG")}}. Creation of <code>WindowBase64</code> (properties were on the target before it).</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{Compat("api.WindowOrWorkerGlobalScope.atob")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/Web/API/WindowBase64/Base64_encoding_and_decoding">Base64 encoding and decoding</a></li>
+ <li><a href="/en-US/docs/data_URIs"><code>data</code> URIs</a></li>
+ <li>{{domxref("WindowOrWorkerGlobalScope.btoa","window.btoa()")}}</li>
+ <li><a href="/en-US/docs/Components.utils.importGlobalProperties">Components.utils.importGlobalProperties</a></li>
+</ul>
diff --git a/files/ru/web/api/btoa/index.html b/files/ru/web/api/btoa/index.html
new file mode 100644
index 0000000000..12080d8fa6
--- /dev/null
+++ b/files/ru/web/api/btoa/index.html
@@ -0,0 +1,94 @@
+---
+title: WindowBase64.btoa()
+slug: Web/API/btoa
+translation_of: Web/API/WindowOrWorkerGlobalScope/btoa
+original_slug: Web/API/WindowOrWorkerGlobalScope/btoa
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p>Создаёт ASCII строку закодированную в base-64 из "строки" бинарных данных.</p>
+
+<p>Будьте внимательней этот способ не подходит для <a href="http://www.unicode.org/standard/WhatIsUnicode.html">Unicode</a> строк! Описание работы с Unicode в секции ниже.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">var encodedData = window.btoa(<em>stringToEncode</em>);</pre>
+
+<h2 id="Пример">Пример</h2>
+
+<pre class="brush:js">var encodedData = window.btoa("Hello, world"); // encode a string
+var decodedData = window.atob(encodedData); // decode the string
+</pre>
+
+<h2 id="Замечания">Замечания</h2>
+
+<p>Вы можете воспользоваться этим способом, чтобы избежать проблем при передаче данных через сетевое соединение. Для этого нужно перекодировать данные в base64 и отправить их, и на другой стороне с помощью метода <code>{{domxref("WindowBase64.atob","window.atob()")}}</code> декодировать полученные данные в исходный вид. Например, вы можете перекодировать управляющие символы ASCII с 0 до 31.</p>
+
+<p><code>btoa()</code> также доступна для XPCOM компонентов реализованных в JavaScript, даже если <a href="/en-US/docs/DOM/window" title="DOM/window"><code>window</code></a> не является глобальным объектом в компонентах.</p>
+
+<h2 id="Строки_Юникод">Строки Юникод</h2>
+
+<p>В большинстве браузеров, вызов <code>window.btoa()</code> на Unicode строке выбросит исключение Character Out Of Range (Символ вне допустимого диапазона).</p>
+
+<p>Чтобы избежать этого, воспользуйтесь паттерном, предложенным <a class="external" href="http://ecmanaut.blogspot.com/2006/07/encoding-decoding-utf8-in-javascript.html">Johan Sundström</a>:</p>
+
+<pre class="brush:js">function utf8_to_b64(str) {
+    return window.btoa(unescape(encodeURIComponent(str)));
+}
+
+function b64_to_utf8(str) {
+    return decodeURIComponent(escape(window.atob(str)));
+}
+
+// Usage:
+utf8_to_b64('✓ à la mode'); // JTI1dTI3MTMlMjUyMCUyNUUwJTI1MjBsYSUyNTIwbW9kZQ==
+b64_to_utf8('JTI1dTI3MTMlMjUyMCUyNUUwJTI1MjBsYSUyNTIwbW9kZQ=='); // "✓ à la mode"
+
+utf8_to_b64('I \u2661 Unicode!'); // SSUyNTIwJTI1dTI2NjElMjUyMFVuaWNvZGUlMjUyMQ==
+b64_to_utf8('SSUyNTIwJTI1dTI2NjElMjUyMFVuaWNvZGUlMjUyMQ=='); // "I ♡ Unicode!"
+
+</pre>
+
+<p>Более правильный и производительный способ - это конвертировать <a href="/en-US/docs/Web/API/DOMString" title="/en-US/docs/Web/API/DOMString"><code>DOMString</code></a> в UTF-8 строку передав <a href="/en-US/docs/Web/JavaScript/Typed_arrays" title="/en-US/docs/Web/JavaScript/Typed_arrays">typed arrays</a>. Как это сделать узнать можно здесь<strong> <a href="/en-US/docs/Web/JavaScript/Base64_encoding_and_decoding#Solution_.232_.E2.80.93_rewriting_atob()_and_btoa()_using_TypedArrays_and_UTF-8" title="/en-US/docs/Web/JavaScript/Base64_encoding_and_decoding#Solution_.232_.E2.80.93_rewriting_atob()_and_btoa()_using_TypedArrays_and_UTF-8">в этом параграфе</a></strong>.</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#dom-windowbase64-btoa', 'WindowBase64.btoa()')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>No change since the latest snapshot, {{SpecName("HTML5.1")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', '#dom-windowbase64-btoa', 'WindowBase64.btoa()')}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>Snapshot of {{SpecName("HTML WHATWG")}}. No change.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5 W3C", "#dom-windowbase64-btoa", "WindowBase64.btoa()")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Snapshot of {{SpecName("HTML WHATWG")}}. Creation of <code>WindowBase64</code> (properties where on the target before it).</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_браузеров">Совместимость браузеров</h2>
+
+<p>{{Compat("api.WindowOrWorkerGlobalScope.btoa")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/Web/API/WindowBase64/Base64_encoding_and_decoding">Base64 encoding and decoding</a></li>
+ <li><a href="/en-US/docs/data_URIs"><code>data</code> URIs</a></li>
+ <li>{{domxref("WindowBase64.atob","window.atob()")}}</li>
+ <li><a href="/en-US/docs/Components.utils.importGlobalProperties">Components.utils.importGlobalProperties</a></li>
+</ul>
diff --git a/files/ru/web/api/caches/index.html b/files/ru/web/api/caches/index.html
new file mode 100644
index 0000000000..78e2f33014
--- /dev/null
+++ b/files/ru/web/api/caches/index.html
@@ -0,0 +1,80 @@
+---
+title: WindowOrWorkerGlobalScope.caches
+slug: Web/API/caches
+translation_of: Web/API/WindowOrWorkerGlobalScope/caches
+original_slug: Web/API/WindowOrWorkerGlobalScope/caches
+---
+<div>{{APIRef()}}{{SeeCompatTable}}</div>
+
+<p><code><strong>caches</strong></code> {{domxref("WindowOrWorkerGlobalScope")}}  свойство только для чтения интерфейса возвращающее  объект ассоциированный с текущим контекстом {{domxref("CacheStorage")}}.</p>
+
+<p>Этот объект реализует такую  функциональность как строгое соответствие для офлайн-использования  и генерирование пользовательских ответов на запросы.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate">var <em>myCacheStorage</em> = self.caches; // or just caches
+</pre>
+
+<h3 id="Значение">Значение</h3>
+
+<p>Возвращает значение {{domxref("CacheStorage")}} .</p>
+
+<h2 id="Пример">Пример</h2>
+
+<p>Данный пример показывает как надо использовать кеш в контексте <a href="/en-US/docs/Web/API/Service_Worker_API">service worker</a> для хранения в автономном режиме</p>
+
+<pre class="brush: js notranslate">this.addEventListener('install', function(event) {
+  event.waitUntil(
+    caches.open('v1').then(function(cache) {
+      return cache.addAll([
+        '/sw-test/',
+        '/sw-test/index.html',
+        '/sw-test/style.css',
+        '/sw-test/app.js',
+        '/sw-test/image-list.js',
+        '/sw-test/star-wars-logo.jpg',
+        '/sw-test/gallery/',
+        '/sw-test/gallery/bountyHunters.jpg',
+        '/sw-test/gallery/myLittleVader.jpg',
+        '/sw-test/gallery/snowTroopers.jpg'
+      ]);
+    })
+  );
+});</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Service Workers', '#self-caches', 'caches')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Объявлена частичная поддержка в новейшей спецификации <code>WindowOrWorkerGlobalScope</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Service Workers')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Начальное определение.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+
+
+<p>{{Compat("api.WindowOrWorkerGlobalScope.caches")}}</p>
+
+<h2 id="Также_смотрите">Также смотрите</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/ServiceWorker_API">Service Workers</a></li>
+ <li><a href="/en-US/docs/Web/API/Web_Workers_API">Web Workers</a></li>
+ <li>{{domxref("CacheStorage")}}</li>
+ <li>{{domxref("Cache")}}</li>
+</ul>
diff --git a/files/ru/web/api/cleartimeout/index.html b/files/ru/web/api/cleartimeout/index.html
new file mode 100644
index 0000000000..e19fc0fe1b
--- /dev/null
+++ b/files/ru/web/api/cleartimeout/index.html
@@ -0,0 +1,95 @@
+---
+title: WindowOrWorkerGlobalScope.clearTimeout()
+slug: Web/API/clearTimeout
+translation_of: Web/API/WindowOrWorkerGlobalScope/clearTimeout
+original_slug: Web/API/WindowOrWorkerGlobalScope/clearTimeout
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p><strong><code>clearTimeout()</code></strong> метод {{domxref("WindowOrWorkerGlobalScope")}} отменяет таймаут, ранее установленный вызовом {{domxref("WindowOrWorkerGlobalScope.setTimeout", "setTimeout()")}}.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate"><em>scope</em>.clearTimeout(<em>timeoutID</em>)
+</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><code><em>timeoutID</em></code></dt>
+ <dd></dd>
+ <dd>Идентификатор таймаута, который вы хотите отменить. Этот идентификатор был возвращён соответствующим вызовом <code>setTimeout()</code>.</dd>
+</dl>
+
+<p>It's worth noting that the pool of IDs used by {{domxref("WindowOrWorkerGlobalScope.setTimeout", "setTimeout()")}} and {{domxref("WindowOrWorkerGlobalScope.setInterval", "setInterval()")}} are shared, which means you can technically use <code>clearTimeout()</code> and {{domxref("WindowOrWorkerGlobalScope.clearInterval", "clearInterval()")}} interchangeably. However, for clarity, you should avoid doing so.</p>
+
+<h2 id="Example" name="Example">Пример использования:</h2>
+
+<p>Запустите приведённый ниже скрипт в контакте веб-страницы и кликните один раз. Вы увидите всплывающее сообщение через 1 секунду. Если вы щёлкните страницу несколько раз за одну секунду, предупреждение появится только один раз.</p>
+
+<pre class="brush: js notranslate">var alarm = {
+  remind: function(aMessage) {
+    alert(aMessage);
+    this.timeoutID = undefined;
+  },
+
+  setup: function() {
+    if (typeof this.timeoutID === 'number') {
+      this.cancel();
+    }
+
+    this.timeoutID = window.setTimeout(function(msg) {
+      this.remind(msg);
+    }.bind(this), 1000, 'Wake up!');
+  },
+
+  cancel: function() {
+    window.clearTimeout(this.timeoutID);
+  }
+};
+window.onclick = function() { alarm.setup(); };
+</pre>
+
+<h2 id="Notes" name="Notes">Примечания</h2>
+
+<p>Передача недействительного ID <code>clearTimeout()</code> ни к чему не приведёт. Исключение не создается.</p>
+
+<h2 id="Specification" name="Specification">Спецификация</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'webappapis.html#dom-cleartimeout', 'WindowOrWorkerGlobalScope.clearTimeout()')}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td>Method moved to the <code>WindowOrWorkerGlobalScope</code> mixin in the latest spec.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'webappapis.html#dom-cleartimeout', 'clearTimeout()')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузером">Совместимость с браузером</h2>
+
+
+
+<p>{{Compat("api.WindowOrWorkerGlobalScope.clearTimeout")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{domxref("WindowOrWorkerGlobalScope.setTimeout()")}}</li>
+ <li>{{domxref("WindowOrWorkerGlobalScope.setInterval()")}}</li>
+ <li>{{domxref("WindowOrWorkerGlobalScope.clearInterval()")}}</li>
+ <li>{{domxref("Window.requestAnimationFrame()")}}</li>
+ <li><a href="/en-US/docs/JavaScript/Timers/Daemons" title="JavaScript/Timers/Daemons"><em>Daemons</em> management</a></li>
+</ul>
diff --git a/files/ru/web/api/element/mouseenter_event/index.html b/files/ru/web/api/element/mouseenter_event/index.html
index 2d73aa25e1..a8cef8d47a 100644
--- a/files/ru/web/api/element/mouseenter_event/index.html
+++ b/files/ru/web/api/element/mouseenter_event/index.html
@@ -39,7 +39,7 @@ translation_of: Web/API/Element/mouseenter_event
 <div style="text-align: center;"><img alt="mouseover.png" class="default internal" src="/@api/deki/files/5909/=mouseover.png"></div>
 <span class="tlid-translation translation" lang="ru"><span title="">Одиночное событие наведения мыши</span></span> <code>mouseover</code> <span class="tlid-translation translation" lang="ru"><span title="">отправляется в самый глубокий элемент дерева DOM, затем оно всплывает в иерархии, пока не будет отменено обработчиком или не достигнет корня.</span></span></div>
 
-<p><span class="tlid-translation translation" lang="ru"><span title="">При наличии глубокой иерархии количество отправляемых </span></span>событий <code>mouseenter</code><span class="tlid-translation translation" lang="ru"><span title=""> может быть довольно большим и вызывать значительные проблемы с производительностью.</span> <span title="">В таких случаях лучше обрабатывать события </span></span><code>mouseover</code>.</p>
+<p><span class="tlid-translation translation" lang="ru"><span title="">При наличии глубокой иерархии количество отправляемых </span></span>событий <code>mouseover</code><span class="tlid-translation translation" lang="ru"><span title=""> может быть довольно большим и вызывать значительные проблемы с производительностью.</span> <span title="">В таких случаях лучше обрабатывать события </span></span><code>mouseenter</code>.</p>
 
 <p><span class="tlid-translation translation" lang="ru"><span title="">В сочетании с соответствующим событием</span></span> <code>mouseleave</code> (<span class="tlid-translation translation" lang="ru"><span title="">которое запускается в элементе, когда мышь покидает область содержимого</span></span>), событие <code>mouseenter</code> <span class="tlid-translation translation" lang="ru"><span title="">действует очень похоже на псевдокласс</span></span> CSS {{cssxref(':hover')}}.</p>
 
diff --git a/files/ru/web/api/fetch/index.html b/files/ru/web/api/fetch/index.html
new file mode 100644
index 0000000000..788b9c3f69
--- /dev/null
+++ b/files/ru/web/api/fetch/index.html
@@ -0,0 +1,169 @@
+---
+title: WindowOrWorkerGlobalScope.fetch()
+slug: Web/API/fetch
+tags:
+  - Справка
+  - запрос
+  - метод
+translation_of: Web/API/WindowOrWorkerGlobalScope/fetch
+original_slug: Web/API/WindowOrWorkerGlobalScope/fetch
+---
+<div>{{APIRef("Fetch API")}}</div>
+
+<p>Метод <code><strong>fetch()</strong></code> , относящийся к миксину {{domxref("WindowOrWorkerGlobalScope")}}, запускает процесс извлечения ресурса из сети. Возвращает promise, содержащий {{domxref("Response")}} объект (ответ на запрос).</p>
+
+<p><code>WorkerOrGlobalScope</code> относится к {{domxref("Window")}} и {{domxref("WorkerGlobalScope")}} сразу. Это означает, что метод <code>fetch()</code> доступен практически в любом контексте, в котором бы вы не захотели получить ресурсы.</p>
+
+<p>Промис {{domxref("WindowOrWorkerGlobalScope.fetch","Fetch()")}} завершается {{jsxref("TypeError")}}, если возникает сетевая ошибка, хотя обычно это означает проблему с доступами или аналогичную ей. Для успешного завершения <code>fetch()</code> достаточно удостовериться в том, что промис выполнен и что свойство {{domxref("Response.ok")}} имеет значение <code>true</code>. HTTP статус 404 не является сетевой ошибкой.</p>
+
+<p>Метод <code>fetch()</code> контролируется директивой <code>connect-src</code> directive of <a href="/en-US/docs/Security/CSP/CSP_policy_directives">Content Security Policy</a> (политика безопасности контента), а не директивой ресурсов, которые извлекает.</p>
+
+<div class="note">
+<p><strong>На Заметку</strong>: Аргументы метода <code>fetch()</code> идентичны аргументам {{domxref("Request.Request","Request()")}} конструктора.</p>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">Promise&lt;Response&gt; fetch(input[, init]);</pre>
+
+<h3 id="Аргументы">Аргументы</h3>
+
+<dl>
+ <dt><em>input</em></dt>
+ <dd>Определяет желаемый для получения ресурс. Это может быть:
+ <ul>
+  <li>{{domxref("USVString")}} (строка), содержащая прямую URL ссылку на ресурс. Некоторые браузеры принимают <code>blob:</code> и <code>data:</code> , как схемы.</li>
+  <li>{{domxref("Request")}} объект (объект ответа).</li>
+ </ul>
+ </dd>
+ <dt><em>init</em> {{optional_inline}}</dt>
+ <dd>Объект с опциями, содержащий пользовательские настройки, которые вы желаете применить к запросу. Возможные варианты:
+ <ul>
+  <li><code>method</code>: Метод запроса, например, <code>GET</code>, <code>POST</code>.</li>
+  <li><code>headers</code>: Заголовки, содержащиеся в объекте {{domxref("Headers")}} или в объекте литерале с побитовыми значениями ({{domxref("ByteString")}}).</li>
+  <li><code>body</code>: Тело запроса, которое может быть: {{domxref("Blob")}}, {{domxref("BufferSource")}}, {{domxref("FormData")}}, {{domxref("URLSearchParams")}}, или {{domxref("USVString")}} объектами. Обратите внимание, что <code>GET</code> или <code>HEAD</code> запрос не может иметь тела.</li>
+  <li><code>mode</code>: Режим, например, <code>cors</code>, <code>no-cors</code> или <code>same-origin</code>.</li>
+  <li><code>credentials</code>: Полномочия: <code>omit</code>, <code>same-origin</code> или <code>include</code>. Для автоматической отправки куки для текущего домена, эта опция должна быть указана. Начиная с Chrome 50, это свойство также принимает экземпляр класса {{domxref("FederatedCredential")}} или  {{domxref("PasswordCredential")}}.</li>
+  <li><code>cache</code>: Режим кеширования запроса <code>default</code>, <code>no-store</code>, <code>reload</code>, <code>no-cache</code>, <code>force-cache</code> или <code>only-if-cached</code>.</li>
+  <li><code>redirect</code>: Режим редиректа: <code>follow</code> (автоматически переадресовывать), <code>error</code> (прерывать перенаправление ошибкой) или <code>manual</code> (управлять перенаправлениями вручную). В Chrome по дефолту стоит <code>follow</code> (ранее, в Chrome 47, стояло <code>manual</code>).</li>
+  <li><code>referrer</code>: {{domxref("USVString")}}, определяющая <code>no-referrer</code>, <code>client</code> или a URL. Дефолтное значение - <code>client</code>.</li>
+  <li><code>referrerPolicy</code>: Определяет значение HTTP заголовка реферера. Может быть: <code>no-referrer</code>, <code>no-referrer-when-downgrade</code>, <code>origin</code>, <code>origin-when-cross-origin</code>, <code>unsafe-url</code>.</li>
+  <li><code>integrity</code>: Содержит значение целостности субресурсов (<a href="/en-US/docs/Web/Security/Subresource_Integrity">subresource integrity</a>) запроса (например, <code>sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE=</code>).</li>
+  <li><code>keepalive</code>: Эта опция может быть использована, чтобы разрешить запросу "пережить" страницу. Получение ресурсов с флагом <code>keepalive</code> - это альтернатива {{domxref("Navigator.sendBeacon()")}} API. </li>
+  <li><code>signal</code>: Экземпляр объекта {{domxref("AbortSignal")}}; позволяет коммуницировать с fetch запросом и, если нужно, отменять его с помощью {{domxref("AbortController")}}.</li>
+ </ul>
+ </dd>
+</dl>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p>{{domxref("Promise")}}, содержащий {{domxref("Response")}} объект (ответ на запрос).</p>
+
+<h3 id="Исключения">Исключения</h3>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col"><strong>Тип</strong></th>
+   <th scope="col"><strong>Описание</strong></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>AbortError</code></td>
+   <td>Запрос был отменён (используя {{domxref("AbortController.abort()")}}).</td>
+  </tr>
+  <tr>
+   <td><code>TypeError</code></td>
+   <td>Начиная с версии <a href="/en-US/docs/Mozilla/Firefox/Releases/43">Firefox 43</a>, <code>fetch()</code> завершится ошибкой <code>TypeError</code>, если URL имеет такие полномочия, как <code>http://user:password@example.com</code>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Пример">Пример</h2>
+
+<p>В нашем <a href="https://github.com/mdn/fetch-examples/tree/master/fetch-request">Fetch Request примере</a> (см. <a href="https://mdn.github.io/fetch-examples/fetch-request/">Fetch Request live</a>) мы создаём новый объект {{domxref("Request")}} (запроса), используя релевантный конструктор, а затем получаем его вызовом <code>fetch()</code>. Так как запрашиваемый ресурс - изображение, для того, чтобы присвоить ему подходящий MIME тип и обработать должным образом, мы применяем к ответу метод {{domxref("Body.blob()")}}, после чего создаём для него Object URL и передаём её в элемент {{htmlelement("img")}}.</p>
+
+<pre class="brush: js">var myImage = document.querySelector('img');
+
+var myRequest = new Request('flowers.jpg');
+
+fetch(myRequest).then(function(response) {
+  return response.blob();
+}).then(function(response) {
+  var objectURL = URL.createObjectURL(response);
+  myImage.src = objectURL;
+});</pre>
+
+<p>В нашем <a href="https://github.com/mdn/fetch-examples/blob/master/fetch-with-init-then-request/index.html">Fetch with init then Request примере</a> (см. <a href="https://mdn.github.io/fetch-examples/fetch-with-init-then-request/">Fetch Request init live</a>) мы делаем тоже самое, за исключением того, что передаём в качестве аргумента для <code>fetch()</code> объект init:</p>
+
+<pre class="brush: js">var myImage = document.querySelector('img');
+
+var myHeaders = new Headers();
+myHeaders.append('Content-Type', 'image/jpeg');
+
+var myInit = { method: 'GET',
+               headers: myHeaders,
+               mode: 'cors',
+               cache: 'default' };
+
+var myRequest = new Request('flowers.jpg');
+
+fetch(myRequest,myInit).then(function(response) {
+  ...
+});</pre>
+
+<p>Обратите внимание, что объект init в качестве аргумента можно передать и в конструктор <code>Request</code> для получения аналогичного результата, например:</p>
+
+<pre class="brush: js">var myRequest = new Request('flowers.jpg', myInit);</pre>
+
+<p>Допустимо использования объекта литерала в качестве <code>headers</code> в <code>init</code>.</p>
+
+<pre class="brush: js">var myInit = { method: 'GET',
+               headers: {
+                   'Content-Type': 'image/jpeg'
+               },
+               mode: 'cors',
+               cache: 'default' };
+
+var myRequest = new Request('flowers.jpg', myInit);
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Fetch','#fetch-method','fetch()')}}</td>
+   <td>{{Spec2('Fetch')}}</td>
+   <td>Частично определена в новейшей спецификации <code>WindowOrWorkerGlobalScope</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Fetch','#dom-global-fetch','fetch()')}}</td>
+   <td>{{Spec2('Fetch')}}</td>
+   <td>Первоначальное определение</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Credential Management')}}</td>
+   <td>{{Spec2('Credential Management')}}</td>
+   <td>Добавлена возможность установить экземпляр класса {{domxref("FederatedCredential")}} или {{domxref("PasswordCredential")}} как возможное значение для <code>init.credentials</code>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+<p>{{Compat("api.WindowOrWorkerGlobalScope.fetch")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Fetch_API">Fetch API</a></li>
+ <li><a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/Access_control_CORS">HTTP access control (CORS)</a></li>
+ <li><a href="/en-US/docs/Web/HTTP">HTTP</a></li>
+</ul>
diff --git a/files/ru/web/api/file/using_files_from_web_applications/index.html b/files/ru/web/api/file/using_files_from_web_applications/index.html
index 8b256b13db..b243921b8b 100644
--- a/files/ru/web/api/file/using_files_from_web_applications/index.html
+++ b/files/ru/web/api/file/using_files_from_web_applications/index.html
@@ -28,7 +28,7 @@ translation_of: Web/API/File/Using_files_from_web_applications
 var selectedFile = $('#input')[0].files[0];</pre>
 
 <div class="note">
-<p>Если вы получили ошибку "files is undefined", значит вы выбрали не один HTML-элемент, а список элементов, который возвращает jQuery. Нужно уточнить, у какого именно элемента необходимо вызвать метод "files"</p>
+<p>Ошибка "files is undefined" означает что был выбран не один HTML-элемент, а список элементов, возвращаемый jQuery. Необходимо уточнить, у какого именно элемента требуется вызвать метод "files"</p>
 </div>
 
 <h3 id="Доступ_к_выбранным_файлам_через_событие_change">Доступ к выбранным файлам через событие change</h3>
diff --git a/files/ru/web/api/setinterval/index.html b/files/ru/web/api/setinterval/index.html
new file mode 100644
index 0000000000..81df340981
--- /dev/null
+++ b/files/ru/web/api/setinterval/index.html
@@ -0,0 +1,642 @@
+---
+title: WindowOrWorkerGlobalScope.setInterval()
+slug: Web/API/setInterval
+translation_of: Web/API/WindowOrWorkerGlobalScope/setInterval
+original_slug: Web/API/WindowOrWorkerGlobalScope/setInterval
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p><span class="seoSummary">Метод <strong><code>setInterval()</code></strong> предложен для {{domxref("Window")}} и {{domxref("Worker")}} интерфейсов. Он циклически вызывает функцию или участок кода с фиксированной паузой между каждым вызовом.</span> Уникальный идентификатор intervalID, возвращаемый методом, позволяет впоследствии удалить запущенный <span class="seoSummary"><strong><code>setInterval</code></strong></span> c помощью {{domxref("WindowOrWorkerGlobalScope.clearInterval", "clearInterval()")}}. Метод определён с помощью миксина {{domxref("WindowOrWorkerGlobalScope")}}.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate"><em>var intervalID</em> = scope.setInterval(<em>func</em>, <em>delay</em>[, <em>param1</em>, <em>param2</em>, ...]);
+<em>var intervalID</em> = scope.setInterval(<em>code</em>, <em>delay</em>);
+</pre>
+
+<h3 id="Параметры">Параметры</h3>
+
+<dl>
+ <dt><code>func</code></dt>
+ <dd>{{jsxref("function")}} - функция, которая будет вызываться каждые <code>delay</code> миллисекунд. Ожидается, что функция не принимает параметры и ничего не возвращает.</dd>
+ <dt><code>code</code></dt>
+ <dd>Этот необязательный синтаксис позволяет вам включать строку вместо функции, которая компилируется и выполняется каждые <code>delay</code> миллисекунд. Однако такая форма не рекомендуется по тем же причинам, которые делают {{jsxref("eval", "eval()")}} угрозой безопасности.</dd>
+ <dt><code>delay</code></dt>
+ <dd>Время в миллисекундах (одна тысячная секунды), на которое таймер выполнит задержку между вызовом функции. Если задано значение меньше 10, то будет использовано число 10. На самом деле задержка может быть больше чем указано, дополнительное объяснение приведено здесь:  {{SectionOnPage("/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout", "Reasons for delays longer than specified")}}.</dd>
+ <dt><code>param1, ..., paramN</code> {{optional_inline}}</dt>
+ <dd>Дополнительные параметры, передаваемые в функцию <em>func</em>.</dd>
+</dl>
+
+<div class="note">
+<p><strong>Примечание</strong>: Передача дополнительных аргументов в <code>setInterval()</code> в первом синтаксисе не работает в Internet Explorer 9 и более ранних версиях.Если вы хотите включить эту функцию в этом браузере, вам следует использовать polyfill (смотрите раздел <a href="#Callback_arguments">Callback аргументы</a>).</p>
+</div>
+
+<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
+
+<p>Возвращаемый <code>intervalID</code> представляет из себя ненулевое числовое значение, которое идентифицирует таймер, созданный вызовом <code>setInterval()</code>; Это значение может быть передано в {{domxref("WindowOrWorkerGlobalScope.clearInterval()")}} для отмены таймера.</p>
+
+<p>It may be helpful to be aware that <code>setInterval()</code> and {{domxref("WindowOrWorkerGlobalScope.setTimeout", "setTimeout()")}} share the same pool of IDs, and that <code>clearInterval()</code> and {{domxref("WindowOrWorkerGlobalScope.clearTimeout", "clearTimeout()")}} can technically be used interchangeably. For clarity, however, you should try to always match them to avoid confusion when maintaining your code.</p>
+
+<div class="note"><strong>Note</strong>: The <code>delay</code> parameter is converted to a signed 32-bit integer. This effectively limits <code>delay</code> to 2147483647 ms, since it's specified as a signed integer in the IDL.</div>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Пример_1_Базовый_синтаксис">Пример 1: Базовый синтаксис</h3>
+
+<p>The following example demonstrates <code>setInterval()</code>'s basic syntax.</p>
+
+<pre class="brush:js notranslate">var intervalID = window.setInterval(myCallback, 500);
+
+function myCallback() {
+  // Your code here
+}
+</pre>
+
+<h3 id="Пример_2_Чередование_двух_цветов">Пример 2: <span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>Чередование двух цветов</span></span></span></h3>
+
+<p>В следующем примере вызывается функция <code>flashtext()</code> раз в секунду, до того момента, как будет нажата кнопка Stop.</p>
+
+<pre class="brush:html notranslate">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+  &lt;meta charset="UTF-8" /&gt;
+  &lt;title&gt;setInterval/clearInterval example&lt;/title&gt;
+
+  &lt;script&gt;
+    var nIntervId;
+
+    function changeColor() {
+      nIntervId = setInterval(flashText, 1000);
+    }
+
+    function flashText() {
+      var oElem = document.getElementById('my_box');
+      oElem.style.color = oElem.style.color == 'red' ? 'blue' : 'red';
+      // oElem.style.color == 'red' ? 'blue' : 'red' это тернарный оператор.
+    }
+
+    function stopTextColor() {
+      clearInterval(nIntervId);
+    }
+  &lt;/script&gt;
+&lt;/head&gt;
+
+&lt;body onload="changeColor();"&gt;
+  &lt;div id="my_box"&gt;
+    &lt;p&gt;Hello World&lt;/p&gt;
+  &lt;/div&gt;
+
+  &lt;button onclick="stopTextColor();"&gt;Stop&lt;/button&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h3 id="Пример_3_Симуляция_пишущей_машинки"><span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>Пример 3: Симуляция пишущей машинки</span></span></span></h3>
+
+<p>The following example simulates typewriter by first clearing and then slowly typing content into the <a href="/en-US/docs/DOM/NodeList"><code>NodeList</code></a> that matches a specified group of selectors.</p>
+
+<pre class="brush:html notranslate">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+&lt;meta charset="UTF-8" /&gt;
+&lt;title&gt;JavaScript Typewriter - MDN Example&lt;/title&gt;
+&lt;script&gt;
+  function Typewriter (sSelector, nRate) {
+
+  function clean () {
+    clearInterval(nIntervId);
+    bTyping = false;
+    bStart = true;
+    oCurrent = null;
+    aSheets.length = nIdx = 0;
+  }
+
+  function scroll (oSheet, nPos, bEraseAndStop) {
+    if (!oSheet.hasOwnProperty('parts') || aMap.length &lt; nPos) { return true; }
+
+    var oRel, bExit = false;
+
+    if (aMap.length === nPos) { aMap.push(0); }
+
+    while (aMap[nPos] &lt; oSheet.parts.length) {
+      oRel = oSheet.parts[aMap[nPos]];
+
+      scroll(oRel, nPos + 1, bEraseAndStop) ? aMap[nPos]++ : bExit = true;
+
+      if (bEraseAndStop &amp;&amp; (oRel.ref.nodeType - 1 | 1) === 3 &amp;&amp; oRel.ref.nodeValue) {
+        bExit = true;
+        oCurrent = oRel.ref;
+        sPart = oCurrent.nodeValue;
+        oCurrent.nodeValue = '';
+      }
+
+      oSheet.ref.appendChild(oRel.ref);
+      if (bExit) { return false; }
+    }
+
+    aMap.length--;
+    return true;
+  }
+
+  function typewrite () {
+    if (sPart.length === 0 &amp;&amp; scroll(aSheets[nIdx], 0, true) &amp;&amp; nIdx++ === aSheets.length - 1) { clean(); return; }
+
+    oCurrent.nodeValue += sPart.charAt(0);
+    sPart = sPart.slice(1);
+  }
+
+  function Sheet (oNode) {
+    this.ref = oNode;
+    if (!oNode.hasChildNodes()) { return; }
+    this.parts = Array.prototype.slice.call(oNode.childNodes);
+
+    for (var nChild = 0; nChild &lt; this.parts.length; nChild++) {
+      oNode.removeChild(this.parts[nChild]);
+      this.parts[nChild] = new Sheet(this.parts[nChild]);
+    }
+  }
+
+  var
+    nIntervId, oCurrent = null, bTyping = false, bStart = true,
+    nIdx = 0, sPart = "", aSheets = [], aMap = [];
+
+  this.rate = nRate || 100;
+
+  this.play = function () {
+    if (bTyping) { return; }
+    if (bStart) {
+      var aItems = document.querySelectorAll(sSelector);
+
+      if (aItems.length === 0) { return; }
+      for (var nItem = 0; nItem &lt; aItems.length; nItem++) {
+        aSheets.push(new Sheet(aItems[nItem]));
+        /* Uncomment the following line if you have previously hidden your elements via CSS: */
+        // aItems[nItem].style.visibility = "visible";
+      }
+
+      bStart = false;
+    }
+
+    nIntervId = setInterval(typewrite, this.rate);
+    bTyping = true;
+  };
+
+  this.pause = function () {
+    clearInterval(nIntervId);
+    bTyping = false;
+  };
+
+  this.terminate = function () {
+    oCurrent.nodeValue += sPart;
+    sPart = "";
+    for (nIdx; nIdx &lt; aSheets.length; scroll(aSheets[nIdx++], 0, false));
+    clean();
+  };
+}
+
+/* usage: */
+var oTWExample1 = new Typewriter(/* elements: */ '#article, h1, #info, #copyleft', /* frame rate (optional): */ 15);
+
+/* default frame rate is 100: */
+var oTWExample2 = new Typewriter('#controls');
+
+/* you can also change the frame rate value modifying the "rate" property; for example: */
+// oTWExample2.rate = 150;
+
+onload = function () {
+  oTWExample1.play();
+  oTWExample2.play();
+};
+&lt;/script&gt;
+&lt;style type="text/css"&gt;
+span.intLink, a, a:visited {
+  cursor: pointer;
+  color: #000000;
+  text-decoration: underline;
+}
+
+#info {
+  width: 180px;
+  height: 150px;
+  float: right;
+  background-color: #eeeeff;
+  padding: 4px;
+  overflow: auto;
+  font-size: 12px;
+  margin: 4px;
+  border-radius: 5px;
+  /* visibility: hidden; */
+}
+&lt;/style&gt;
+&lt;/head&gt;
+
+&lt;body&gt;
+
+&lt;p id="copyleft" style="font-style: italic; font-size: 12px; text-align: center;"&gt;CopyLeft 2012 by &lt;a href="https://developer.mozilla.org/" target="_blank"&gt;Mozilla Developer Network&lt;/a&gt;&lt;/p&gt;
+&lt;p id="controls" style="text-align: center;"&gt;[&amp;nbsp;&lt;span class="intLink" onclick="oTWExample1.play();"&gt;Play&lt;/span&gt; | &lt;span class="intLink" onclick="oTWExample1.pause();"&gt;Pause&lt;/span&gt; | &lt;span class="intLink" onclick="oTWExample1.terminate();"&gt;Terminate&lt;/span&gt;&amp;nbsp;]&lt;/p&gt;
+&lt;div id="info"&gt;
+Vivamus blandit massa ut metus mattis in fringilla lectus imperdiet. Proin ac ante a felis ornare vehicula. Fusce pellentesque lacus vitae eros convallis ut mollis magna pellentesque. Pellentesque placerat enim at lacus ultricies vitae facilisis nisi fringilla. In tincidunt tincidunt tincidunt.
+&lt;/div&gt;
+&lt;h1&gt;JavaScript Typewriter&lt;/h1&gt;
+
+&lt;div id="article"&gt;
+&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ultrices dolor ac dolor imperdiet ullamcorper. Suspendisse quam libero, luctus auctor mollis sed, malesuada condimentum magna. Quisque in ante tellus, in placerat est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec a mi magna, quis mattis dolor. Etiam sit amet ligula quis urna auctor imperdiet nec faucibus ante. Mauris vel consectetur dolor. Nunc eget elit eget velit pulvinar fringilla consectetur aliquam purus. Curabitur convallis, justo posuere porta egestas, velit erat ornare tortor, non viverra justo diam eget arcu. Phasellus adipiscing fermentum nibh ac commodo. Nam turpis nunc, suscipit a hendrerit vitae, volutpat non ipsum.&lt;/p&gt;
+&lt;form&gt;
+&lt;p&gt;Phasellus ac nisl lorem: &lt;input type="text" /&gt;&lt;br /&gt;
+&lt;textarea style="width: 400px; height: 200px;"&gt;Nullam commodo suscipit lacus non aliquet. Phasellus ac nisl lorem, sed facilisis ligula. Nam cursus lobortis placerat. Sed dui nisi, elementum eu sodales ac, placerat sit amet mauris. Pellentesque dapibus tellus ut ipsum aliquam eu auctor dui vehicula. Quisque ultrices laoreet erat, at ultrices tortor sodales non. Sed venenatis luctus magna, ultricies ultricies nunc fringilla eget. Praesent scelerisque urna vitae nibh tristique varius consequat neque luctus. Integer ornare, erat a porta tempus, velit justo fermentum elit, a fermentum metus nisi eu ipsum. Vivamus eget augue vel dui viverra adipiscing congue ut massa. Praesent vitae eros erat, pulvinar laoreet magna. Maecenas vestibulum mollis nunc in posuere. Pellentesque sit amet metus a turpis lobortis tempor eu vel tortor. Cras sodales eleifend interdum.&lt;/textarea&gt;&lt;/p&gt;
+&lt;p&gt;&lt;input type="submit" value="Send" /&gt;
+&lt;/form&gt;
+&lt;p&gt;Duis lobortis sapien quis nisl luctus porttitor. In tempor semper libero, eu tincidunt dolor eleifend sit amet. Ut nec velit in dolor tincidunt rhoncus non non diam. Morbi auctor ornare orci, non euismod felis gravida nec. Curabitur elementum nisi a eros rutrum nec blandit diam placerat. Aenean tincidunt risus ut nisi consectetur cursus. Ut vitae quam elit. Donec dignissim est in quam tempor consequat. Aliquam aliquam diam non felis convallis suscipit. Nulla facilisi. Donec lacus risus, dignissim et fringilla et, egestas vel eros. Duis malesuada accumsan dui, at fringilla mauris bibStartum quis. Cras adipiscing ultricies fermentum. Praesent bibStartum condimentum feugiat.&lt;/p&gt;
+&lt;p&gt;Nam faucibus, ligula eu fringilla pulvinar, lectus tellus iaculis nunc, vitae scelerisque metus leo non metus. Proin mattis lobortis lobortis. Quisque accumsan faucibus erat, vel varius tortor ultricies ac. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec libero nunc. Nullam tortor nunc, elementum a consectetur et, ultrices eu orci. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a nisl eu sem vehicula egestas.&lt;/p&gt;
+&lt;/div&gt;
+&lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p><a href="/files/3997/typewriter.html">View this demo in action</a>. See also: <a href="/en-US/docs/DOM/window.clearInterval"><code>clearInterval()</code></a>.</p>
+
+<h2 id="Аргументы_колбэк-функции">Аргументы колбэк-функции</h2>
+
+<p>As previously discussed, Internet Explorer versions 9 and below do not support the passing of arguments to the callback function in either <code>setTimeout()</code> or <code>setInterval()</code>. The following <strong>IE-specific</strong> code demonstrates a method for overcoming this limitation.  To use, simply add the following code to the top of your script.</p>
+
+<pre class="brush:js notranslate">/*\
+|*|
+|*|  IE-specific polyfill that enables the passage of arbitrary arguments to the
+|*|  callback functions of javascript timers (HTML5 standard syntax).
+|*|
+|*|  https://developer.mozilla.org/en-US/docs/Web/API/window.setInterval
+|*|  https://developer.mozilla.org/User:fusionchess
+|*|
+|*|  Syntax:
+|*|  var timeoutID = window.setTimeout(func, delay[, param1, param2, ...]);
+|*|  var timeoutID = window.setTimeout(code, delay);
+|*|  var intervalID = window.setInterval(func, delay[, param1, param2, ...]);
+|*|  var intervalID = window.setInterval(code, delay);
+|*|
+\*/
+
+if (document.all &amp;&amp; !window.setTimeout.isPolyfill) {
+  var __nativeST__ = window.setTimeout;
+  window.setTimeout = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) {
+    var aArgs = Array.prototype.slice.call(arguments, 2);
+    return __nativeST__(vCallback instanceof Function ? function () {
+      vCallback.apply(null, aArgs);
+    } : vCallback, nDelay);
+  };
+  window.setTimeout.isPolyfill = true;
+}
+
+if (document.all &amp;&amp; !window.setInterval.isPolyfill) {
+  var __nativeSI__ = window.setInterval;
+  window.setInterval = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) {
+    var aArgs = Array.prototype.slice.call(arguments, 2);
+    return __nativeSI__(vCallback instanceof Function ? function () {
+      vCallback.apply(null, aArgs);
+    } : vCallback, nDelay);
+  };
+  window.setInterval.isPolyfill = true;
+}
+</pre>
+
+<p>Another possibility is to use an anonymous function to call your callback, although this solution is a bit more expensive. Example:</p>
+
+<pre class="brush:js notranslate">var intervalID = setInterval(function() { myFunc('one', 'two', 'three'); }, 1000);</pre>
+
+<p>Another possibility is to use <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind">function's bind</a>. Example:</p>
+
+<pre class="brush:js notranslate">var intervalID = setInterval(function(arg1) {}.bind(undefined, 10), 1000);</pre>
+
+<p>{{h3_gecko_minversion("Inactive tabs", "5.0")}}</p>
+
+<p>Starting in Gecko 5.0 {{geckoRelease("5.0")}}, intervals are clamped to fire no more often than once per second in inactive tabs.</p>
+
+<h2 id="Проблема_с_this">Проблема с "<a href="/en-US/docs/Web/JavaScript/Reference/Operators/this"><code>this</code></a>"</h2>
+
+<p>When you pass a method to <code>setInterval()</code> or any other function, it is invoked with the wrong <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this"><code>this</code></a> value. This problem is explained in detail in the <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this#As_an_object_method">JavaScript reference</a>.</p>
+
+<h3 id="Объяснение">Объяснение</h3>
+
+<p>Code executed by <code>setInterval()</code> runs in a separate execution context than the function from which it was called. As a consequence, the <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this"><code>this</code></a> keyword for the called function is set to the <code>window</code> (or <code>global</code>) object, it is not the same as the <code>this</code> value for the function that called <code>setTimeout</code>. See the following example (which uses <code>setTimeout()</code> instead of <code>setInterval()</code> – the problem, in fact, is the same for both timers):</p>
+
+<pre class="brush:js notranslate">myArray = ['zero', 'one', 'two'];
+
+myArray.myMethod = function (sProperty) {
+    alert(arguments.length &gt; 0 ? this[sProperty] : this);
+};
+
+myArray.myMethod(); // prints "zero,one,two"
+myArray.myMethod(1); // prints "one"
+setTimeout(myArray.myMethod, 1000); // prints "[object Window]" after 1 second
+setTimeout(myArray.myMethod, 1500, "1"); // prints "undefined" after 1,5 seconds
+// passing the 'this' object with .call won't work
+// because this will change the value of this inside setTimeout itself
+// while we want to change the value of this inside myArray.myMethod
+// in fact, it will be an error because setTimeout code expects this to be the window object:
+setTimeout.call(myArray, myArray.myMethod, 2000); // error: "NS_ERROR_XPC_BAD_OP_ON_WN_PROTO: Illegal operation on WrappedNative prototype object"
+setTimeout.call(myArray, myArray.myMethod, 2500, 2); // same error
+</pre>
+
+<p>As you can see there are no ways to pass the <code>this</code> object to the callback function in the legacy JavaScript.</p>
+
+<h3 id="Возможное_решение">Возможное решение</h3>
+
+<p>A possible way to solve the "<code>this</code>" problem is to replace the two native <code>setTimeout()</code> or <code>setInterval()</code> global functions with two <em>non-native</em> ones that enable their invocation through the <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Function/call"><code>Function.prototype.call</code></a> method. The following example shows a possible replacement:</p>
+
+<pre class="brush:js notranslate">// Enable the passage of the 'this' object through the JavaScript timers
+
+var __nativeST__ = window.setTimeout, __nativeSI__ = window.setInterval;
+
+window.setTimeout = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) {
+  var oThis = this, aArgs = Array.prototype.slice.call(arguments, 2);
+  return __nativeST__(vCallback instanceof Function ? function () {
+    vCallback.apply(oThis, aArgs);
+  } : vCallback, nDelay);
+};
+
+window.setInterval = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) {
+  var oThis = this, aArgs = Array.prototype.slice.call(arguments, 2);
+  return __nativeSI__(vCallback instanceof Function ? function () {
+    vCallback.apply(oThis, aArgs);
+  } : vCallback, nDelay);
+};</pre>
+
+<div class="note">These two replacements also enable the HTML5 standard passage of arbitrary arguments to the callback functions of timers in IE. So they can be used as <em>non-standard-compliant</em> polyfills also. See the <a href="#Callback_arguments">callback arguments paragraph</a> for a <em>standard-compliant</em> polyfill.</div>
+
+<p>Новое тестируемое свойство:</p>
+
+<pre class="brush:js notranslate">myArray = ['zero', 'one', 'two'];
+
+myArray.myMethod = function (sProperty) {
+    alert(arguments.length &gt; 0 ? this[sProperty] : this);
+};
+
+setTimeout(alert, 1500, 'Hello world!'); // the standard use of setTimeout and setInterval is preserved, but...
+setTimeout.call(myArray, myArray.myMethod, 2000); // prints "zero,one,two" after 2 seconds
+setTimeout.call(myArray, myArray.myMethod, 2500, 2); // prints "two" after 2,5 seconds
+</pre>
+
+<p>Another, more complex, solution for<strong> </strong>the <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this"><code>this</code></a> problem<strong> </strong>is <a href="#A_little_framework">the following framework</a>.</p>
+
+<div class="note">JavaScript 1.8.5 introduces the <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind">Function.prototype.bind()</a></code> method, which lets you specify the value that should be used as <code>this</code> for all calls to a given function. This lets you easily bypass problems where it's unclear what this will be, depending on the context from which your function was called. Also, ES2015 supports <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions">arrow functions</a>, with lexical this allowing us to write setInterval( () =&gt; this.myMethod) if we're inside myArray method.</div>
+
+<h2 id="MiniDaemon_-_фреймворк_для_управления_таймерами">MiniDaemon - фреймворк для управления таймерами</h2>
+
+<p>In pages requiring many timers, it can often be difficult to keep track of all of the running timer events. One approach to solving this problem is to store information about the state of a timer in an object. Following is a minimal example of such an abstraction. The constructor architecture explicitly avoids the use of closures. It also offers an alternative way to pass the <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this"><code>this</code></a> object to the callback function (see <a href="#The_.22this.22_problem">The "this" problem</a> for details). The following code is also <a href="https://github.com/madmurphy/minidaemon.js">available on GitHub</a>.</p>
+
+<div class="note">For a more complex but still modular version of it (<code><em>Daemon</em></code>) see <a href="/en-US/Add-ons/Code_snippets/Timers/Daemons">JavaScript Daemons Management</a>. This more complex version is nothing but a big and scalable collection of methods for the <code><em>Daemon</em></code> constructor. However, the <code><em>Daemon</em></code> constructor itself is nothing but a clone of <code><em>MiniDaemon</em></code> with an added support for <em>init</em> and <em>onstart</em> functions declarable during the instantiation of the <code><em>daemon</em></code>. <strong>So the <code><em>MiniDaemon</em></code> framework remains the recommended way for simple animations</strong>, because <code><em>Daemon</em></code> without its collection of methods is essentially a clone of it.</div>
+
+<h3 id="minidaemon.js">minidaemon.js</h3>
+
+<pre class="brush:js notranslate">/*\
+|*|
+|*|  :: MiniDaemon ::
+|*|
+|*|  Revision #2 - September 26, 2014
+|*|
+|*|  https://developer.mozilla.org/en-US/docs/Web/API/window.setInterval
+|*|  https://developer.mozilla.org/User:fusionchess
+|*|  https://github.com/madmurphy/minidaemon.js
+|*|
+|*|  This framework is released under the GNU Lesser General Public License, version 3 or later.
+|*|  http://www.gnu.org/licenses/lgpl-3.0.html
+|*|
+\*/
+
+function MiniDaemon (oOwner, fTask, nRate, nLen) {
+  if (!(this &amp;&amp; this instanceof MiniDaemon)) { return; }
+  if (arguments.length &lt; 2) { throw new TypeError('MiniDaemon - not enough arguments'); }
+  if (oOwner) { this.owner = oOwner; }
+  this.task = fTask;
+  if (isFinite(nRate) &amp;&amp; nRate &gt; 0) { this.rate = Math.floor(nRate); }
+  if (nLen &gt; 0) { this.length = Math.floor(nLen); }
+}
+
+MiniDaemon.prototype.owner = null;
+MiniDaemon.prototype.task = null;
+MiniDaemon.prototype.rate = 100;
+MiniDaemon.prototype.length = Infinity;
+
+  /* These properties should be read-only */
+
+MiniDaemon.prototype.SESSION = -1;
+MiniDaemon.prototype.INDEX = 0;
+MiniDaemon.prototype.PAUSED = true;
+MiniDaemon.prototype.BACKW = true;
+
+  /* Global methods */
+
+MiniDaemon.forceCall = function (oDmn) {
+  oDmn.INDEX += oDmn.BACKW ? -1 : 1;
+  if (oDmn.task.call(oDmn.owner, oDmn.INDEX, oDmn.length, oDmn.BACKW) === false || oDmn.isAtEnd()) { oDmn.pause(); return false; }
+  return true;
+};
+
+  /* Instances methods */
+
+MiniDaemon.prototype.isAtEnd = function () {
+  return this.BACKW ? isFinite(this.length) &amp;&amp; this.INDEX &lt; 1 : this.INDEX + 1 &gt; this.length;
+};
+
+MiniDaemon.prototype.synchronize = function () {
+  if (this.PAUSED) { return; }
+  clearInterval(this.SESSION);
+  this.SESSION = setInterval(MiniDaemon.forceCall, this.rate, this);
+};
+
+MiniDaemon.prototype.pause = function () {
+  clearInterval(this.SESSION);
+  this.PAUSED = true;
+};
+
+MiniDaemon.prototype.start = function (bReverse) {
+  var bBackw = Boolean(bReverse);
+  if (this.BACKW === bBackw &amp;&amp; (this.isAtEnd() || !this.PAUSED)) { return; }
+  this.BACKW = bBackw;
+  this.PAUSED = false;
+  this.synchronize();
+};
+</pre>
+
+<div class="note">MiniDaemon passes arguments to the callback function. If you want to work on it with browsers that natively do not support this feature, use one of the methods proposed above.</div>
+
+<h3 id="Синтаксис_2">Синтаксис</h3>
+
+<p><code>var myDaemon = new MiniDaemon(<em>thisObject</em>, <em>callback</em>[</code><code>, <em>rate</em></code><code>[, <em>length</em>]]);</code></p>
+
+<h3 id="Описание">Описание</h3>
+
+<p>Returns a JavaScript <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object"><code>Object</code></a> containing all information needed by an animation (like the <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this"><code>this</code></a> object, the callback function, the length, the frame-rate).</p>
+
+<h4 id="Параметры_2">Параметры</h4>
+
+<dl>
+ <dt><code>thisObject</code></dt>
+ <dd>The <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this"><code>this</code></a> object on which the <em>callback</em> function is called. It can be an <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object"><code>object</code></a> or <code>null</code>.</dd>
+ <dt><code>callback</code></dt>
+ <dd>The function that is repeatedly invoked . <strong>It is called with three parameters</strong>: <em>index</em> (the iterative index of each invocation), <em>length</em> (the number of total invocations assigned to the <em>daemon</em> - finite or <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Infinity"><code>Infinity</code></a>) and <em>backwards</em> (a boolean expressing whether the <em>index</em> is increasing or decreasing). It is something like <em>callback</em>.call(<em>thisObject</em>, <em>index</em>, <em>length</em>, <em>backwards</em>). <strong>If the callback function returns a <code>false</code> value the <em>daemon</em> is paused</strong>.</dd>
+ <dt><code>rate (optional)</code></dt>
+ <dd>The time lapse (in number of milliseconds) between each invocation. The default value is 100.</dd>
+ <dt><code>length (optional)</code></dt>
+ <dd>The total number of invocations. It can be a positive integer or <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Infinity"><code>Infinity</code></a>. The default value is <code>Infinity</code>.</dd>
+</dl>
+
+<h4 id="MiniDaemon_instances_properties"><code>MiniDaemon</code> instances properties</h4>
+
+<dl>
+ <dt><code>myDaemon.owner</code></dt>
+ <dd>The <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this"><code>this</code></a> object on which is executed the daemon (read/write). It can be an <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object"><code>object</code></a> or <code>null</code>.</dd>
+ <dt><code>myDaemon.task</code></dt>
+ <dd>The function that is repeatedly invoked (read/write). It is called with three arguments: <em>index</em> (the iterative index of each invocation), <em>length</em> (the number of total invocations assigned to the daemon - finite or <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Infinity"><code>Infinity</code></a>) and backwards (a boolean expressing whether the <em>index</em> is decreasing or not) – see above. If the <code>myDaemon.task</code> function returns a <code>false</code> value the <em>daemon</em> is paused.</dd>
+ <dt><code>myDaemon.rate</code></dt>
+ <dd>Промежуток времени (в миллисекундах) между каждым вызовом (чтение / запись).</dd>
+ <dt><code>myDaemon.length</code></dt>
+ <dd>Итоговое количество вызовов. Это может быть положительное целое число или бесконечность <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Infinity"><code>Infinity</code></a> (чтение / запись).</dd>
+</dl>
+
+<h4 id="MiniDaemon_instances_methods"><code>MiniDaemon</code> instances methods</h4>
+
+<dl>
+ <dt><code>myDaemon.isAtEnd()</code></dt>
+ <dd>Возвращает логическое значение (true или false), в зависимости от того, находится ли <em>daemon</em> в начальной / конечной позиции или нет.  </dd>
+ <dt><code>myDaemon.synchronize()</code></dt>
+ <dd>Synchronize the timer of a started daemon with the time of its invocation.</dd>
+ <dt><code>myDaemon.pause()</code></dt>
+ <dd>Pauses the daemon.</dd>
+ <dt><code>myDaemon.start([<em>reverse</em>])</code></dt>
+ <dd>Starts the daemon forward (<em>index</em> of each invocation increasing) or backwards (<em>index</em> decreasing).</dd>
+</dl>
+
+<h4 id="MiniDaemon_global_object_methods"><code>MiniDaemon</code> global object methods</h4>
+
+<dl>
+ <dt><code>MiniDaemon.forceCall(<em>minidaemon</em>)</code></dt>
+ <dd>Forces a single callback to the <code><em>minidaemon</em>.task</code> function regardless of the fact that the end has been reached or not. In any case the internal <code>INDEX</code> property is increased/decreased (depending on the actual direction of the process).</dd>
+</dl>
+
+<h3 id="Пример_использования">Пример использования</h3>
+
+<p>Ваша HTML страница:</p>
+
+<pre class="brush:html notranslate">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+  &lt;meta charset="UTF-8" /&gt;
+  &lt;title&gt;MiniDaemin Example - MDN&lt;/title&gt;
+  &lt;script type="text/javascript" src="minidaemon.js"&gt;&lt;/script&gt;
+  &lt;style type="text/css"&gt;
+    #sample_div {
+      visibility: hidden;
+    }
+  &lt;/style&gt;
+&lt;/head&gt;
+
+&lt;body&gt;
+  &lt;p&gt;
+    &lt;input type="button" onclick="fadeInOut.start(false /* optional */);" value="fade in" /&gt;
+    &lt;input type="button" onclick="fadeInOut.start(true);" value="fade out"&gt;
+    &lt;input type="button" onclick="fadeInOut.pause();" value="pause" /&gt;
+  &lt;/p&gt;
+
+  &lt;div id="sample_div"&gt;Some text here&lt;/div&gt;
+
+  &lt;script type="text/javascript"&gt;
+    function opacity (nIndex, nLength, bBackwards) {
+      this.style.opacity = nIndex / nLength;
+      if (bBackwards ? nIndex === 0 : nIndex === 1) {
+        this.style.visibility = bBackwards ? 'hidden' : 'visible';
+      }
+    }
+
+    var fadeInOut = new MiniDaemon(document.getElementById('sample_div'), opacity, 300, 8);
+  &lt;/script&gt;
+&lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p><a href="/files/3995/minidaemon_example.html" title="MiniDaemon Example">View this example in action</a></p>
+
+<h2 id="Примечания">Примечания</h2>
+
+<p>The <code>setInterval()</code> function is commonly used to set a delay for functions that are executed again and again, such as animations.</p>
+
+<p>You can cancel the interval using {{domxref("WindowOrWorkerGlobalScope.clearInterval()")}}.</p>
+
+<p>If you wish to have your function called <em>once</em> after the specified delay, use {{domxref("WindowOrWorkerGlobalScope.setTimeout()")}}.</p>
+
+<h3 id="Ensure_that_execution_duration_is_shorter_than_interval_frequency">Ensure that execution duration is shorter than interval frequency</h3>
+
+<p>If there is a possibility that your logic could take longer to execute than the interval time, it is recommended that you recursively call a named function using {{domxref("WindowOrWorkerGlobalScope.setTimeout")}}. For example, if using <code>setInterval</code> to poll a remote server every 5 seconds, network latency, an unresponsive server, and a host of other issues could prevent the request from completing in its allotted time. As such, you may find yourself with queued up XHR requests that won't necessarily return in order.</p>
+
+<p>In these cases, a recursive <code>setTimeout()</code> pattern is preferred:</p>
+
+<pre class="brush:js notranslate">(function loop(){
+   setTimeout(function() {
+      // Your logic here
+
+      loop();
+  }, delay);
+})();
+</pre>
+
+<p>In the above snippet, a named function <code>loop()</code> is declared and is immediately executed. <code>loop()</code> is recursively called inside <code>setTimeout()</code> after the logic has completed executing. While this pattern does not guarantee execution on a fixed interval, it does guarantee that the previous interval has completed before recursing.</p>
+
+<h3 id="Throttling_of_intervals">Throttling of intervals</h3>
+
+<p><code>setInterval()</code> is subject to the same throttling restrictions in Firefox as {{domxref("WindowOrWorkerGlobalScope.setTimeout","setTimeout()")}}; see <a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout#Reasons_for_delays_longer_than_specified">Reasons for delays longer than specified</a>.</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Specification</th>
+   <th>Status</th>
+   <th>Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'webappapis.html#dom-setinterval', 'WindowOrWorkerGlobalScope.setInterval()')}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td>Method moved to the <code>WindowOrWorkerGlobalScope</code> mixin in the latest spec.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML WHATWG", "webappapis.html#dom-setinterval", "WindowTimers.setInterval()")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td>Initial definition (DOM Level 0)</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div>
+
+
+<p>{{Compat("api.WindowOrWorkerGlobalScope.setInterval")}}</p>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/Add-ons/Code_snippets/Timers">JavaScript timers</a></li>
+ <li>{{domxref("WindowOrWorkerGlobalScope.setTimeout")}}</li>
+ <li>{{domxref("WindowOrWorkerGlobalScope.clearTimeout")}}</li>
+ <li>{{domxref("WindowOrWorkerGlobalScope.clearInterval")}}</li>
+ <li>{{domxref("window.requestAnimationFrame")}}</li>
+ <li><a href="/en-US/Add-ons/Code_snippets/Timers/Daemons"><em>Daemons</em> management</a></li>
+</ul>
+
+<div id="simple-translate">
+<div>
+<div class="simple-translate-button isShow" style="height: 22px; width: 22px; top: 1554px; left: 525px;"></div>
+
+<div class="simple-translate-panel " style="width: 300px; height: 200px; top: 0px; left: 0px; font-size: 13px; background-color: rgb(255, 255, 255);">
+<div class="simple-translate-result-wrapper" style="overflow: hidden;">
+<div class="simple-translate-move"></div>
+
+<div class="simple-translate-result-contents">
+<p class="simple-translate-result" style="color: rgb(0, 0, 0);"></p>
+
+<p class="simple-translate-candidate" style="color: rgb(115, 115, 115);"></p>
+</div>
+</div>
+</div>
+</div>
+</div>
diff --git a/files/ru/web/api/settimeout/index.html b/files/ru/web/api/settimeout/index.html
new file mode 100644
index 0000000000..d35da11a1c
--- /dev/null
+++ b/files/ru/web/api/settimeout/index.html
@@ -0,0 +1,261 @@
+---
+title: WindowTimers.setTimeout()
+slug: Web/API/setTimeout
+translation_of: Web/API/WindowOrWorkerGlobalScope/setTimeout
+original_slug: Web/API/WindowOrWorkerGlobalScope/setTimeout
+---
+<div>{{ APIRef() }}</div>
+
+<h2 id="Summary" name="Summary">Краткое изложение</h2>
+
+<p>Вызов функции или выполнение фрагмента кода после указанной задержки.</p>
+
+<h2 id="Syntax" name="Syntax">Синтаксис</h2>
+
+<pre class="syntaxbox notranslate"><em>var timeoutID</em> = window.setTimeout(<em>func</em>, [, <em>delay</em>, <em>param1</em>, <em>param2</em>, ...]);
+<em>var timeoutID</em> = window.setTimeout(<em>code </em>[, <em>delay]</em>);
+</pre>
+
+<p>где</p>
+
+<ul>
+ <li><code>timeoutID -</code> это <em>числовой</em> ID, который может быть использован позже с {{domxref("window.clearTimeout()")}}.</li>
+ <li><code>func -</code> это <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Function" title="en-US/docs/Core_JavaScript_1.5_Reference/Global_Objects/Function">функция</a>, которую требуется вызвать после <code>delay</code> миллисекунд.</li>
+ <li><code>code</code> - в альтернативном варианте применения это строка, содержащая код, который вы хотите выполнить после <code>delay</code> миллисекунд (использовать этот метод <strong>не рекомендуется</strong> по тем же причинам, что и <a href="/en-US/docs/JavaScript/Reference/Global_Objects/eval#Don%27t_use_eval!" title="en-US/docs/Core JavaScript 1.5 Reference/Global Functions/Eval#Don't use eval!">eval()</a>)</li>
+ <li><code>delay</code>  {{optional_inline}} -  задержка в миллисекундах (тысячных долях секунды), после которой будет выполнен вызов функции. Реальная задержка может быть больше; см. {{anch("Notes")}} ниже.</li>
+</ul>
+
+<p>Необходимо принять во внимание, что передача дополнительных параметров функции в первом варианте не работает в Internet Explorer 9 и ниже. Для использования этой функциональности в таких браузерах, необходимо использовать код для совместимости (см. раздел <a href="#Аргументы_колбэк-функции">Аргументы колбэк-функции</a>).</p>
+
+<div class="warning"><strong>Important:</strong> Prior to Gecko 13 {{ geckoRelease("13.0") }}, Gecko passed an extra parameter to the callback routine, indicating the "actual lateness" of the timeout in milliseconds. This non-standard parameter is no longer passed.</div>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<p>В следующем примере на веб странице создаются две простые кнопки, к которым привязываются действия setTimeout и clearTimeout. Нажатие на первую кнопку установит таймаут, который вызовет диалоговое окно через две секунды. Также будет сохранён id для clearTimeout. Таймаут также может быть отменён по нажатию на вторую кнопку.</p>
+
+<h3 id="HTML_Content">HTML Content</h3>
+
+<pre class="brush: html notranslate">&lt;p&gt;Live Example&lt;/p&gt;
+&lt;button onclick="delayedAlert();"&gt;Show an alert box after two seconds&lt;/button&gt;
+&lt;p&gt;&lt;/p&gt;
+&lt;button onclick="clearAlert();"&gt;Cancel alert before it happens&lt;/button&gt;
+</pre>
+
+<h3 id="JavaScript_Content">JavaScript Content</h3>
+
+<pre class="brush: js notranslate">var timeoutID;
+
+function delayedAlert() {
+  timeoutID = window.setTimeout(slowAlert, 2000);
+}
+
+function slowAlert() {
+  alert("That was really slow!");
+}
+
+function clearAlert() {
+  window.clearTimeout(timeoutID);
+}
+</pre>
+
+<p>{{ EmbedLiveSample('Example') }}</p>
+
+<p>Смотрите также <a href="/en-US/docs/DOM/window.clearTimeout#Example" title="en-US/docs/DOM/window.clearTimeout#Example"><code>пример clearTimeout()</code></a>.</p>
+
+<h2 id="Аргументы_колбэк-функции">Аргументы колбэк-функции</h2>
+
+<p>Если вам нужно передать аргумент в вашу callback функцию, но нужно, чтобы это работало в Internet Explorer 9 и ниже, который не поддерживает передачу дополнительных параметров (ни с <code>setTimeout()</code> или <code>setInterval()</code>), то вы можете прописать специальный код для <em>совместимости с IE, </em><span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>вставив этот код в начало ваших скриптов</span></span></span>, <span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>который включит функцию передачи стандартных параметров HTML5 в </span></span></span>Internet Explorer<span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span> для обоих таймеров</span></span></span>.</p>
+
+<pre class="brush: js notranslate">/*\
+|*|
+|*|  IE-specific polyfill which enables the passage of arbitrary arguments to the
+|*|  callback functions of JavaScript timers (HTML5 standard syntax).
+|*|
+|*|  https://developer.mozilla.org/en-US/docs/DOM/window.setInterval
+|*|
+|*|  Syntax:
+|*|  var timeoutID = window.setTimeout(func, delay, [param1, param2, ...]);
+|*|  var timeoutID = window.setTimeout(code, delay);
+|*|  var intervalID = window.setInterval(func, delay[, param1, param2, ...]);
+|*|  var intervalID = window.setInterval(code, delay);
+|*|
+\*/
+
+if (document.all &amp;&amp; !window.setTimeout.isPolyfill) {
+  var __nativeST__ = window.setTimeout;
+  window.setTimeout = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) {
+    var aArgs = Array.prototype.slice.call(arguments, 2);
+    return __nativeST__(vCallback instanceof Function ? function () {
+      vCallback.apply(null, aArgs);
+    } : vCallback, nDelay);
+  };
+  window.setTimeout.isPolyfill = true;
+}
+
+if (document.all &amp;&amp; !window.setInterval.isPolyfill) {
+  var __nativeSI__ = window.setInterval;
+  window.setInterval = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) {
+    var aArgs = Array.prototype.slice.call(arguments, 2);
+    return __nativeSI__(vCallback instanceof Function ? function () {
+      vCallback.apply(null, aArgs);
+    } : vCallback, nDelay);
+  };
+  window.setInterval.isPolyfill = true;
+}
+</pre>
+
+<h2 id="Правка_только_для_IE">Правка только для IE</h2>
+
+<p>If you want a completely unobtrusive hack for every other mobile or desktop browser, including IE 9 and below, you can either use JavaScript conditional comments:</p>
+
+<pre class="brush: js notranslate">/*@cc_on
+  // conditional IE &lt; 9 only fix
+  @if (@_jscript_version &lt;= 6)
+  (function(f){
+     window.setTimeout =f(window.setTimeout);
+     window.setInterval =f(window.setInterval);
+  })(function(f){return function(c,t){var a=[].slice.call(arguments,2);return f(function(){c.apply(this,a)},t)}});
+  @end
+@*/
+</pre>
+
+<p><span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>Или используйте очень чистый подход, основанный на условном свойстве IE HTML</span></span></span>:</p>
+
+<pre class="brush: html notranslate">&lt;!--[if lte IE 9]&gt;&lt;script&gt;
+(function(f){
+window.setTimeout =f(window.setTimeout);
+window.setInterval =f(window.setInterval);
+})(function(f){return function(c,t){
+var a=[].slice.call(arguments,2);return f(function(){c.apply(this,a)},t)}
+});
+&lt;/script&gt;&lt;![endif]--&gt;
+</pre>
+
+<p>Another possibility is to use an anonymous function to call your callback, but this solution is a bit more expensive. Example:</p>
+
+<pre class="brush: js notranslate">var intervalID = setTimeout(function() { myFunc("one", "two", "three"); }, 1000);
+</pre>
+
+<p>Yet another possibility is to use <a href="https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Function/bind" title="/en-US/docs/JavaScript/Reference/Global_Objects/Function/bind">function's bind</a>. Example:</p>
+
+<pre class="brush: js notranslate">setTimeout(function(arg1){}.bind(undefined, 10));
+</pre>
+
+<h2 id="Проблема_с_this">Проблема с "<code>this</code>"</h2>
+
+<p>Когда вы передаёте метод в <code>setTimeout()</code> (или в любую другую функцию, если на то пошло), то вызов будет осуществлён с неправильным значением <code>this</code>. Эта проблема разъясняется детально в <a href="/en-US/docs/JavaScript/Reference/Operators/this#Method_binding" title="en-US/docs/Core_JavaScript_1.5_Reference/Operators/Special_Operators/this_Operator#Method_binding">JavaScript reference</a>.</p>
+
+<h3 id="Объяснение">Объяснение</h3>
+
+<p>Code executed by <code>setTimeout()</code> is run in a separate execution context to the function from which it was called. As a consequence, the <code>this</code> keyword for the called function will be set to the <code>window</code> (or <code>global</code>) object; it will not be the same as the <code>this</code> value for the function that called <code>setTimeout</code>. See the following example:</p>
+
+<pre class="brush: js notranslate">myArray = ["zero", "one", "two"];
+myArray.myMethod = function (sProperty) {
+    alert(arguments.length &gt; 0 ? this[sProperty] : this);
+};
+
+myArray.myMethod(); // prints "zero,one,two"
+myArray.myMethod(1); // prints "one"
+setTimeout(myArray.myMethod, 1000); // prints "[object Window]" after 1 second
+setTimeout(myArray.myMethod, 1500, "1"); // prints "undefined" after 1.5 seconds
+// let's try to pass the 'this' object
+setTimeout.call(myArray, myArray.myMethod, 2000); // error: "NS_ERROR_XPC_BAD_OP_ON_WN_PROTO: Illegal operation on WrappedNative prototype object"
+setTimeout.call(myArray, myArray.myMethod, 2500, 2); // same error</pre>
+
+<p><span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>Как видите, нет способов передать объект</span></span></span> <code>this</code> <span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>в колбэк-функцию.</span></span></span>.</p>
+
+<h3 id="Возможное_решение">Возможное решение</h3>
+
+<p>A possible way to solve the "<code>this</code>" problem is to replace the two native <code>setTimeout()</code> or <code>setInterval()</code> global functions with two <em>non-native</em> ones which will enable their invocation through the <a href="en-US/docs/JavaScript/Reference/Global_Objects/Function/call" title="en-US/docs/JavaScript/Reference/Global_Objects/Function/call"><code>Function.prototype.call</code></a> method. The following example shows a possible replacement:</p>
+
+<pre class="brush: js notranslate">// Enable the passage of the 'this' object through the JavaScript timers
+
+var __nativeST__ = window.setTimeout, __nativeSI__ = window.setInterval;
+
+window.setTimeout = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) {
+  var oThis = this, aArgs = Array.prototype.slice.call(arguments, 2);
+  return __nativeST__(vCallback instanceof Function ? function () {
+    vCallback.apply(oThis, aArgs);
+  } : vCallback, nDelay);
+};
+
+window.setInterval = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) {
+  var oThis = this, aArgs = Array.prototype.slice.call(arguments, 2);
+  return __nativeSI__(vCallback instanceof Function ? function () {
+    vCallback.apply(oThis, aArgs);
+  } : vCallback, nDelay);
+};</pre>
+
+<div class="note"><strong>Note:</strong> These two replacements will also enable the HTML5 standard passage of arbitrary arguments to the callback functions of timers in IE. So they can be used as polyfills also. See the <a href="#Аргументы_колбэк-функции">Callback arguments</a> paragraph.</div>
+
+<p>Новая тестируемая особенность:</p>
+
+<pre class="brush: js notranslate">myArray = ["zero", "one", "two"];
+myArray.myMethod = function (sProperty) {
+    alert(arguments.length &gt; 0 ? this[sProperty] : this);
+};
+
+setTimeout(alert, 1500, "Hello world!"); // the standard use of setTimeout and setInterval is preserved, but...
+setTimeout.call(myArray, myArray.myMethod, 2000); // prints "zero,one,two" after 2 seconds
+setTimeout.call(myArray, myArray.myMethod, 2500, 2); // prints "two" after 2.5 seconds
+</pre>
+
+<p>Это не нативные решения <em>ad hoc</em> для этой проблемы.</p>
+
+<div class="note"><strong>Note:</strong> JavaScript 1.8.5 introduces the <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Function/bind" title="en-US/docs/JavaScript/Reference/Global Objects/Function/bind">Function.prototype.bind()</a></code> method, which lets you specify the value that should be used as <code>this</code> for all calls to a given function. This lets you easily bypass problems where it's unclear what this will be, depending on the context from which your function was called.</div>
+
+<h2 id="Замечания">Замечания</h2>
+
+<p>Отложенное выполнение кода можно отменить, используя <code><a href="/en-US/docs/DOM/window.clearTimeout" title="en-US/docs/DOM/window.clearTimeout">window.clearTimeout()</a></code>. Если функция должна вызываться неоднократно (например, каждые N миллисекунд), необходимо использовать <code><a href="/en-US/docs/DOM/window.setInterval" title="en-US/docs/DOM/window.setInterval">window.setInterval()</a></code>.</p>
+
+<p>Важно заметить, что функция или код не могут быть выполнены, пока не завершится поток, вызвавший <code>setTimeout()</code>.</p>
+
+<h3 id="Passing_string_literals">Passing string literals</h3>
+
+<p>Передача строки вместо функции в <code>setTimeout()</code> сопряжена с теми же опасностями, что и использование <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/eval#Don.27t_use_eval.21" title="https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/eval">eval</a>. </code></p>
+
+<pre class="brush: js notranslate">// Правильно
+window.setTimeout(function() {
+    alert("Hello World!");
+}, 500);
+
+// Неправильно
+window.setTimeout("alert(\"Hello World!\");", 500);
+
+</pre>
+
+<p>String literals are evaluated in the global context, so local symbols in the context where <code>setTimeout()</code> was called will not be available when the string is evaluated as code.</p>
+
+<h3 id="Минимальная_максимальная_задержка_и_вложенность_таймаута"><span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>Минимальная/ максимальная задержка и вложенность таймаута</span></span></span></h3>
+
+<p><a class="external" href="http://code.google.com/p/chromium/issues/detail?id=792#c10">Historically</a> browsers implement <code>setTimeout()</code> "clamping": successive <code>setTimeout()</code> calls with <code>delay</code> smaller than the "minimum delay" limit are forced to use at least the minimum delay. The minimum delay, <code>DOM_MIN_TIMEOUT_VALUE</code>, is 4 ms (stored in a preference in Firefox: <code>dom.min_timeout_value</code>), with a <code>DOM_CLAMP_TIMEOUT_NESTING_LEVEL</code> of 5ms.</p>
+
+<p>In fact, 4ms is <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/timers.html#timers">specified by the HTML5 spec</a> and is consistent across browsers released in 2010 and onward. Prior to {{ geckoRelease("5.0") }}, the minimum timeout value for nested timeouts was 10 ms.</p>
+
+<p>In addition to "clamping", the timeout can also fire later when the page (or the OS/browser itself) is busy with other tasks.</p>
+
+<p>To implement a 0 ms timeout in a modern browser, you can use {{ domxref("window.postMessage()") }} as <a class="external" href="http://dbaron.org/log/20100309-faster-timeouts">described here</a>.</p>
+
+<p>Browsers including Internet Explorer, Chrome, Safari, and Firefox store the delay as a 32-bit signed Integer internally. This causes an Integer overflow when using delays larger than 2147483647, resulting in the timeout being executed immediately.</p>
+
+<h4 id="Неактивные_вкладки">Неактивные вкладки</h4>
+
+<p>In {{ geckoRelease("5.0") }} and Chrome 11, timeouts are clamped to firing no more often than once per second (1000ms) in inactive tabs; see {{ bug(633421) }} for more information about this in Mozilla or <a class="external" href="http://crbug.com/66078">crbug.com/66078</a> for details about this in Chrome.</p>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{Compat("api.WindowOrWorkerGlobalScope.setTimeout")}}</p>
+
+<h2 id="Specification" name="Specification">Спецификация</h2>
+
+<p>Part of DOM level 0, as specified in <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/browsers.html#timers">HTML5</a>.</p>
+
+<h2 id="See_also" name="See_also">Также интересно</h2>
+
+<ul>
+ <li><a href="/en-US/docs/JavaScript/Timers" title="/en-US/docs/JavaScript/Timers">JavaScript timers</a></li>
+ <li><a href="/en-US/docs/Mozilla/JavaScript_code_modules/Timer.jsm" title="/en-US/docs/Mozilla/JavaScript_code_modules/Timer.jsm">Timer.jsm</a></li>
+ <li>{{domxref("window.setInterval")}}</li>
+ <li>{{domxref("window.requestAnimationFrame")}}</li>
+ <li><a href="/en-US/docs/JavaScript/Timers/Daemons" title="/en-US/docs/JavaScript/Timers/Daemons"><em>Daemons</em> management</a></li>
+</ul>
diff --git a/files/ru/web/api/web_audio_api/index.html b/files/ru/web/api/web_audio_api/index.html
index 9bfa53d259..2bb74d406d 100644
--- a/files/ru/web/api/web_audio_api/index.html
+++ b/files/ru/web/api/web_audio_api/index.html
@@ -398,7 +398,7 @@ function voiceMute() { // toggle to mute and unmute sound
  <li><a href="https://github.com/mattlima/mooog">Mooog</a>: jQuery-style chaining of AudioNodes, mixer-style sends/returns, and more.</li>
 </ul>
 
-<section id="Quick_Links">
+<section id="Quick_links">
 <h3 id="Quicklinks">Quicklinks</h3>
 
 <ol>
diff --git a/files/ru/web/api/windoworworkerglobalscope/atob/index.html b/files/ru/web/api/windoworworkerglobalscope/atob/index.html
deleted file mode 100644
index 689abf3503..0000000000
--- a/files/ru/web/api/windoworworkerglobalscope/atob/index.html
+++ /dev/null
@@ -1,70 +0,0 @@
----
-title: WindowOrWorkerGlobalScope.atob()
-slug: Web/API/WindowOrWorkerGlobalScope/atob
-translation_of: Web/API/WindowOrWorkerGlobalScope/atob
----
-<div>{{APIRef("HTML DOM")}}</div>
-
-<p>Функция <strong><code>WindowOrWorkerGlobalScope.atob()</code></strong> декодирует строку данных, которая была закодирована с использованием  base-64. Вы можете использовать метод {{domxref("WindowOrWorkerGlobalScope.btoa","btoa()")}}, чтобы декодировать и передать данные, которые в исходном виде могут вызвать проблемы  передачи, затем отправить их, и использовать метод <code>atob()</code> чтобы декодировать даны снова. Например, вы можете закодировать, передать, и декодировать управляющие символы, такие как ASCII значения от 0 до 31.</p>
-
-<p>В случаях использования с Unicode или UTF-8 строками, смотрите <a href="/en-US/docs/Web/JavaScript/Base64_encoding_and_decoding#The_.22Unicode_Problem.22">this note at Base64 encoding and decoding</a> и <a href="/en-US/docs/Web/API/window.btoa#Unicode_Strings">this note at <code>btoa()</code></a>.</p>
-
-<h2 id="Синтаксис">Синтаксис</h2>
-
-<pre class="syntaxbox">var decodedData = scope.atob(<em>encodedData</em>);</pre>
-
-<h3 id="Throws">Throws</h3>
-
-<p>Выбрасывает {{jsxref("DOMException")}}, если длина переданной строки не кратна 4.</p>
-
-<h2 id="Пример">Пример</h2>
-
-<pre class="brush:js">var encodedData = window.btoa('Hello, world'); // кодирует строку
-var decodedData = window.atob(encodedData); // декодирует строку</pre>
-
-<h2 id="Спецификации">Спецификации</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Спецификация</th>
-   <th scope="col">Статус</th>
-   <th scope="col">Комментарий</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', 'webappapis.html#dom-btoa', 'WindowOrWorkerGlobalScope.atob()')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td>Method moved to the <code>WindowOrWorkerGlobalScope</code> mixin in the latest spec.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', '#dom-windowbase64-atob', 'WindowBase64.atob()')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td>No change since the latest snapshot, {{SpecName("HTML5.1")}}.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5.1', '#dom-windowbase64-atob', 'WindowBase64.atob()')}}</td>
-   <td>{{Spec2('HTML5.1')}}</td>
-   <td>Snapshot of {{SpecName("HTML WHATWG")}}. No change.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName("HTML5 W3C", "#dom-windowbase64-atob", "WindowBase64.atob()")}}</td>
-   <td>{{Spec2('HTML5 W3C')}}</td>
-   <td>Snapshot of {{SpecName("HTML WHATWG")}}. Creation of <code>WindowBase64</code> (properties were on the target before it).</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
-
-<p>{{Compat("api.WindowOrWorkerGlobalScope.atob")}}</p>
-
-<h2 id="Смотрите_также">Смотрите также</h2>
-
-<ul>
- <li><a href="/Web/API/WindowBase64/Base64_encoding_and_decoding">Base64 encoding and decoding</a></li>
- <li><a href="/en-US/docs/data_URIs"><code>data</code> URIs</a></li>
- <li>{{domxref("WindowOrWorkerGlobalScope.btoa","window.btoa()")}}</li>
- <li><a href="/en-US/docs/Components.utils.importGlobalProperties">Components.utils.importGlobalProperties</a></li>
-</ul>
diff --git a/files/ru/web/api/windoworworkerglobalscope/btoa/index.html b/files/ru/web/api/windoworworkerglobalscope/btoa/index.html
deleted file mode 100644
index 24f0c7ab38..0000000000
--- a/files/ru/web/api/windoworworkerglobalscope/btoa/index.html
+++ /dev/null
@@ -1,94 +0,0 @@
----
-title: WindowBase64.btoa()
-slug: Web/API/WindowOrWorkerGlobalScope/btoa
-translation_of: Web/API/WindowOrWorkerGlobalScope/btoa
-original_slug: Web/API/WindowBase64/btoa
----
-<div>{{APIRef("HTML DOM")}}</div>
-
-<p>Создаёт ASCII строку закодированную в base-64 из "строки" бинарных данных.</p>
-
-<p>Будьте внимательней этот способ не подходит для <a href="http://www.unicode.org/standard/WhatIsUnicode.html">Unicode</a> строк! Описание работы с Unicode в секции ниже.</p>
-
-<h2 id="Синтаксис">Синтаксис</h2>
-
-<pre class="syntaxbox">var encodedData = window.btoa(<em>stringToEncode</em>);</pre>
-
-<h2 id="Пример">Пример</h2>
-
-<pre class="brush:js">var encodedData = window.btoa("Hello, world"); // encode a string
-var decodedData = window.atob(encodedData); // decode the string
-</pre>
-
-<h2 id="Замечания">Замечания</h2>
-
-<p>Вы можете воспользоваться этим способом, чтобы избежать проблем при передаче данных через сетевое соединение. Для этого нужно перекодировать данные в base64 и отправить их, и на другой стороне с помощью метода <code>{{domxref("WindowBase64.atob","window.atob()")}}</code> декодировать полученные данные в исходный вид. Например, вы можете перекодировать управляющие символы ASCII с 0 до 31.</p>
-
-<p><code>btoa()</code> также доступна для XPCOM компонентов реализованных в JavaScript, даже если <a href="/en-US/docs/DOM/window" title="DOM/window"><code>window</code></a> не является глобальным объектом в компонентах.</p>
-
-<h2 id="Строки_Юникод">Строки Юникод</h2>
-
-<p>В большинстве браузеров, вызов <code>window.btoa()</code> на Unicode строке выбросит исключение Character Out Of Range (Символ вне допустимого диапазона).</p>
-
-<p>Чтобы избежать этого, воспользуйтесь паттерном, предложенным <a class="external" href="http://ecmanaut.blogspot.com/2006/07/encoding-decoding-utf8-in-javascript.html">Johan Sundström</a>:</p>
-
-<pre class="brush:js">function utf8_to_b64(str) {
-    return window.btoa(unescape(encodeURIComponent(str)));
-}
-
-function b64_to_utf8(str) {
-    return decodeURIComponent(escape(window.atob(str)));
-}
-
-// Usage:
-utf8_to_b64('✓ à la mode'); // JTI1dTI3MTMlMjUyMCUyNUUwJTI1MjBsYSUyNTIwbW9kZQ==
-b64_to_utf8('JTI1dTI3MTMlMjUyMCUyNUUwJTI1MjBsYSUyNTIwbW9kZQ=='); // "✓ à la mode"
-
-utf8_to_b64('I \u2661 Unicode!'); // SSUyNTIwJTI1dTI2NjElMjUyMFVuaWNvZGUlMjUyMQ==
-b64_to_utf8('SSUyNTIwJTI1dTI2NjElMjUyMFVuaWNvZGUlMjUyMQ=='); // "I ♡ Unicode!"
-
-</pre>
-
-<p>Более правильный и производительный способ - это конвертировать <a href="/en-US/docs/Web/API/DOMString" title="/en-US/docs/Web/API/DOMString"><code>DOMString</code></a> в UTF-8 строку передав <a href="/en-US/docs/Web/JavaScript/Typed_arrays" title="/en-US/docs/Web/JavaScript/Typed_arrays">typed arrays</a>. Как это сделать узнать можно здесь<strong> <a href="/en-US/docs/Web/JavaScript/Base64_encoding_and_decoding#Solution_.232_.E2.80.93_rewriting_atob()_and_btoa()_using_TypedArrays_and_UTF-8" title="/en-US/docs/Web/JavaScript/Base64_encoding_and_decoding#Solution_.232_.E2.80.93_rewriting_atob()_and_btoa()_using_TypedArrays_and_UTF-8">в этом параграфе</a></strong>.</p>
-
-<h2 id="Спецификации">Спецификации</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Specification</th>
-   <th scope="col">Status</th>
-   <th scope="col">Comment</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', '#dom-windowbase64-btoa', 'WindowBase64.btoa()')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td>No change since the latest snapshot, {{SpecName("HTML5.1")}}.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5.1', '#dom-windowbase64-btoa', 'WindowBase64.btoa()')}}</td>
-   <td>{{Spec2('HTML5.1')}}</td>
-   <td>Snapshot of {{SpecName("HTML WHATWG")}}. No change.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName("HTML5 W3C", "#dom-windowbase64-btoa", "WindowBase64.btoa()")}}</td>
-   <td>{{Spec2('HTML5 W3C')}}</td>
-   <td>Snapshot of {{SpecName("HTML WHATWG")}}. Creation of <code>WindowBase64</code> (properties where on the target before it).</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Совместимость_браузеров">Совместимость браузеров</h2>
-
-<p>{{Compat("api.WindowOrWorkerGlobalScope.btoa")}}</p>
-
-<h2 id="Смотрите_также">Смотрите также</h2>
-
-<ul>
- <li><a href="/Web/API/WindowBase64/Base64_encoding_and_decoding">Base64 encoding and decoding</a></li>
- <li><a href="/en-US/docs/data_URIs"><code>data</code> URIs</a></li>
- <li>{{domxref("WindowBase64.atob","window.atob()")}}</li>
- <li><a href="/en-US/docs/Components.utils.importGlobalProperties">Components.utils.importGlobalProperties</a></li>
-</ul>
diff --git a/files/ru/web/api/windoworworkerglobalscope/caches/index.html b/files/ru/web/api/windoworworkerglobalscope/caches/index.html
deleted file mode 100644
index 107d43f6a4..0000000000
--- a/files/ru/web/api/windoworworkerglobalscope/caches/index.html
+++ /dev/null
@@ -1,79 +0,0 @@
----
-title: WindowOrWorkerGlobalScope.caches
-slug: Web/API/WindowOrWorkerGlobalScope/caches
-translation_of: Web/API/WindowOrWorkerGlobalScope/caches
----
-<div>{{APIRef()}}{{SeeCompatTable}}</div>
-
-<p><code><strong>caches</strong></code> {{domxref("WindowOrWorkerGlobalScope")}}  свойство только для чтения интерфейса возвращающее  объект ассоциированный с текущим контекстом {{domxref("CacheStorage")}}.</p>
-
-<p>Этот объект реализует такую  функциональность как строгое соответствие для офлайн-использования  и генерирование пользовательских ответов на запросы.</p>
-
-<h2 id="Синтаксис">Синтаксис</h2>
-
-<pre class="syntaxbox notranslate">var <em>myCacheStorage</em> = self.caches; // or just caches
-</pre>
-
-<h3 id="Значение">Значение</h3>
-
-<p>Возвращает значение {{domxref("CacheStorage")}} .</p>
-
-<h2 id="Пример">Пример</h2>
-
-<p>Данный пример показывает как надо использовать кеш в контексте <a href="/en-US/docs/Web/API/Service_Worker_API">service worker</a> для хранения в автономном режиме</p>
-
-<pre class="brush: js notranslate">this.addEventListener('install', function(event) {
-  event.waitUntil(
-    caches.open('v1').then(function(cache) {
-      return cache.addAll([
-        '/sw-test/',
-        '/sw-test/index.html',
-        '/sw-test/style.css',
-        '/sw-test/app.js',
-        '/sw-test/image-list.js',
-        '/sw-test/star-wars-logo.jpg',
-        '/sw-test/gallery/',
-        '/sw-test/gallery/bountyHunters.jpg',
-        '/sw-test/gallery/myLittleVader.jpg',
-        '/sw-test/gallery/snowTroopers.jpg'
-      ]);
-    })
-  );
-});</pre>
-
-<h2 id="Спецификации">Спецификации</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Specification</th>
-   <th scope="col">Status</th>
-   <th scope="col">Comment</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Service Workers', '#self-caches', 'caches')}}</td>
-   <td>{{Spec2('Service Workers')}}</td>
-   <td>Объявлена частичная поддержка в новейшей спецификации <code>WindowOrWorkerGlobalScope</code>.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('Service Workers')}}</td>
-   <td>{{Spec2('Service Workers')}}</td>
-   <td>Начальное определение.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
-
-
-
-<p>{{Compat("api.WindowOrWorkerGlobalScope.caches")}}</p>
-
-<h2 id="Также_смотрите">Также смотрите</h2>
-
-<ul>
- <li><a href="/en-US/docs/Web/API/ServiceWorker_API">Service Workers</a></li>
- <li><a href="/en-US/docs/Web/API/Web_Workers_API">Web Workers</a></li>
- <li>{{domxref("CacheStorage")}}</li>
- <li>{{domxref("Cache")}}</li>
-</ul>
diff --git a/files/ru/web/api/windoworworkerglobalscope/cleartimeout/index.html b/files/ru/web/api/windoworworkerglobalscope/cleartimeout/index.html
deleted file mode 100644
index aeedb7435c..0000000000
--- a/files/ru/web/api/windoworworkerglobalscope/cleartimeout/index.html
+++ /dev/null
@@ -1,94 +0,0 @@
----
-title: WindowOrWorkerGlobalScope.clearTimeout()
-slug: Web/API/WindowOrWorkerGlobalScope/clearTimeout
-translation_of: Web/API/WindowOrWorkerGlobalScope/clearTimeout
----
-<div>{{APIRef("HTML DOM")}}</div>
-
-<p><strong><code>clearTimeout()</code></strong> метод {{domxref("WindowOrWorkerGlobalScope")}} отменяет таймаут, ранее установленный вызовом {{domxref("WindowOrWorkerGlobalScope.setTimeout", "setTimeout()")}}.</p>
-
-<h2 id="Syntax" name="Syntax">Синтаксис</h2>
-
-<pre class="syntaxbox notranslate"><em>scope</em>.clearTimeout(<em>timeoutID</em>)
-</pre>
-
-<h3 id="Параметры">Параметры</h3>
-
-<dl>
- <dt><code><em>timeoutID</em></code></dt>
- <dd></dd>
- <dd>Идентификатор таймаута, который вы хотите отменить. Этот идентификатор был возвращён соответствующим вызовом <code>setTimeout()</code>.</dd>
-</dl>
-
-<p>It's worth noting that the pool of IDs used by {{domxref("WindowOrWorkerGlobalScope.setTimeout", "setTimeout()")}} and {{domxref("WindowOrWorkerGlobalScope.setInterval", "setInterval()")}} are shared, which means you can technically use <code>clearTimeout()</code> and {{domxref("WindowOrWorkerGlobalScope.clearInterval", "clearInterval()")}} interchangeably. However, for clarity, you should avoid doing so.</p>
-
-<h2 id="Example" name="Example">Пример использования:</h2>
-
-<p>Запустите приведённый ниже скрипт в контакте веб-страницы и кликните один раз. Вы увидите всплывающее сообщение через 1 секунду. Если вы щёлкните страницу несколько раз за одну секунду, предупреждение появится только один раз.</p>
-
-<pre class="brush: js notranslate">var alarm = {
-  remind: function(aMessage) {
-    alert(aMessage);
-    this.timeoutID = undefined;
-  },
-
-  setup: function() {
-    if (typeof this.timeoutID === 'number') {
-      this.cancel();
-    }
-
-    this.timeoutID = window.setTimeout(function(msg) {
-      this.remind(msg);
-    }.bind(this), 1000, 'Wake up!');
-  },
-
-  cancel: function() {
-    window.clearTimeout(this.timeoutID);
-  }
-};
-window.onclick = function() { alarm.setup(); };
-</pre>
-
-<h2 id="Notes" name="Notes">Примечания</h2>
-
-<p>Передача недействительного ID <code>clearTimeout()</code> ни к чему не приведёт. Исключение не создается.</p>
-
-<h2 id="Specification" name="Specification">Спецификация</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Specification</th>
-   <th scope="col">Status</th>
-   <th scope="col">Comment</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', 'webappapis.html#dom-cleartimeout', 'WindowOrWorkerGlobalScope.clearTimeout()')}}</td>
-   <td>{{Spec2("HTML WHATWG")}}</td>
-   <td>Method moved to the <code>WindowOrWorkerGlobalScope</code> mixin in the latest spec.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', 'webappapis.html#dom-cleartimeout', 'clearTimeout()')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Совместимость_с_браузером">Совместимость с браузером</h2>
-
-
-
-<p>{{Compat("api.WindowOrWorkerGlobalScope.clearTimeout")}}</p>
-
-<h2 id="Смотрите_также">Смотрите также</h2>
-
-<ul>
- <li>{{domxref("WindowOrWorkerGlobalScope.setTimeout()")}}</li>
- <li>{{domxref("WindowOrWorkerGlobalScope.setInterval()")}}</li>
- <li>{{domxref("WindowOrWorkerGlobalScope.clearInterval()")}}</li>
- <li>{{domxref("Window.requestAnimationFrame()")}}</li>
- <li><a href="/en-US/docs/JavaScript/Timers/Daemons" title="JavaScript/Timers/Daemons"><em>Daemons</em> management</a></li>
-</ul>
diff --git a/files/ru/web/api/windoworworkerglobalscope/fetch/index.html b/files/ru/web/api/windoworworkerglobalscope/fetch/index.html
deleted file mode 100644
index 22b188e0bd..0000000000
--- a/files/ru/web/api/windoworworkerglobalscope/fetch/index.html
+++ /dev/null
@@ -1,168 +0,0 @@
----
-title: WindowOrWorkerGlobalScope.fetch()
-slug: Web/API/WindowOrWorkerGlobalScope/fetch
-tags:
-  - Справка
-  - запрос
-  - метод
-translation_of: Web/API/WindowOrWorkerGlobalScope/fetch
----
-<div>{{APIRef("Fetch API")}}</div>
-
-<p>Метод <code><strong>fetch()</strong></code> , относящийся к миксину {{domxref("WindowOrWorkerGlobalScope")}}, запускает процесс извлечения ресурса из сети. Возвращает promise, содержащий {{domxref("Response")}} объект (ответ на запрос).</p>
-
-<p><code>WorkerOrGlobalScope</code> относится к {{domxref("Window")}} и {{domxref("WorkerGlobalScope")}} сразу. Это означает, что метод <code>fetch()</code> доступен практически в любом контексте, в котором бы вы не захотели получить ресурсы.</p>
-
-<p>Промис {{domxref("WindowOrWorkerGlobalScope.fetch","Fetch()")}} завершается {{jsxref("TypeError")}}, если возникает сетевая ошибка, хотя обычно это означает проблему с доступами или аналогичную ей. Для успешного завершения <code>fetch()</code> достаточно удостовериться в том, что промис выполнен и что свойство {{domxref("Response.ok")}} имеет значение <code>true</code>. HTTP статус 404 не является сетевой ошибкой.</p>
-
-<p>Метод <code>fetch()</code> контролируется директивой <code>connect-src</code> directive of <a href="/en-US/docs/Security/CSP/CSP_policy_directives">Content Security Policy</a> (политика безопасности контента), а не директивой ресурсов, которые извлекает.</p>
-
-<div class="note">
-<p><strong>На Заметку</strong>: Аргументы метода <code>fetch()</code> идентичны аргументам {{domxref("Request.Request","Request()")}} конструктора.</p>
-</div>
-
-<h2 id="Синтаксис">Синтаксис</h2>
-
-<pre class="syntaxbox">Promise&lt;Response&gt; fetch(input[, init]);</pre>
-
-<h3 id="Аргументы">Аргументы</h3>
-
-<dl>
- <dt><em>input</em></dt>
- <dd>Определяет желаемый для получения ресурс. Это может быть:
- <ul>
-  <li>{{domxref("USVString")}} (строка), содержащая прямую URL ссылку на ресурс. Некоторые браузеры принимают <code>blob:</code> и <code>data:</code> , как схемы.</li>
-  <li>{{domxref("Request")}} объект (объект ответа).</li>
- </ul>
- </dd>
- <dt><em>init</em> {{optional_inline}}</dt>
- <dd>Объект с опциями, содержащий пользовательские настройки, которые вы желаете применить к запросу. Возможные варианты:
- <ul>
-  <li><code>method</code>: Метод запроса, например, <code>GET</code>, <code>POST</code>.</li>
-  <li><code>headers</code>: Заголовки, содержащиеся в объекте {{domxref("Headers")}} или в объекте литерале с побитовыми значениями ({{domxref("ByteString")}}).</li>
-  <li><code>body</code>: Тело запроса, которое может быть: {{domxref("Blob")}}, {{domxref("BufferSource")}}, {{domxref("FormData")}}, {{domxref("URLSearchParams")}}, или {{domxref("USVString")}} объектами. Обратите внимание, что <code>GET</code> или <code>HEAD</code> запрос не может иметь тела.</li>
-  <li><code>mode</code>: Режим, например, <code>cors</code>, <code>no-cors</code> или <code>same-origin</code>.</li>
-  <li><code>credentials</code>: Полномочия: <code>omit</code>, <code>same-origin</code> или <code>include</code>. Для автоматической отправки куки для текущего домена, эта опция должна быть указана. Начиная с Chrome 50, это свойство также принимает экземпляр класса {{domxref("FederatedCredential")}} или  {{domxref("PasswordCredential")}}.</li>
-  <li><code>cache</code>: Режим кеширования запроса <code>default</code>, <code>no-store</code>, <code>reload</code>, <code>no-cache</code>, <code>force-cache</code> или <code>only-if-cached</code>.</li>
-  <li><code>redirect</code>: Режим редиректа: <code>follow</code> (автоматически переадресовывать), <code>error</code> (прерывать перенаправление ошибкой) или <code>manual</code> (управлять перенаправлениями вручную). В Chrome по дефолту стоит <code>follow</code> (ранее, в Chrome 47, стояло <code>manual</code>).</li>
-  <li><code>referrer</code>: {{domxref("USVString")}}, определяющая <code>no-referrer</code>, <code>client</code> или a URL. Дефолтное значение - <code>client</code>.</li>
-  <li><code>referrerPolicy</code>: Определяет значение HTTP заголовка реферера. Может быть: <code>no-referrer</code>, <code>no-referrer-when-downgrade</code>, <code>origin</code>, <code>origin-when-cross-origin</code>, <code>unsafe-url</code>.</li>
-  <li><code>integrity</code>: Содержит значение целостности субресурсов (<a href="/en-US/docs/Web/Security/Subresource_Integrity">subresource integrity</a>) запроса (например, <code>sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE=</code>).</li>
-  <li><code>keepalive</code>: Эта опция может быть использована, чтобы разрешить запросу "пережить" страницу. Получение ресурсов с флагом <code>keepalive</code> - это альтернатива {{domxref("Navigator.sendBeacon()")}} API. </li>
-  <li><code>signal</code>: Экземпляр объекта {{domxref("AbortSignal")}}; позволяет коммуницировать с fetch запросом и, если нужно, отменять его с помощью {{domxref("AbortController")}}.</li>
- </ul>
- </dd>
-</dl>
-
-<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
-
-<p>{{domxref("Promise")}}, содержащий {{domxref("Response")}} объект (ответ на запрос).</p>
-
-<h3 id="Исключения">Исключения</h3>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col"><strong>Тип</strong></th>
-   <th scope="col"><strong>Описание</strong></th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><code>AbortError</code></td>
-   <td>Запрос был отменён (используя {{domxref("AbortController.abort()")}}).</td>
-  </tr>
-  <tr>
-   <td><code>TypeError</code></td>
-   <td>Начиная с версии <a href="/en-US/docs/Mozilla/Firefox/Releases/43">Firefox 43</a>, <code>fetch()</code> завершится ошибкой <code>TypeError</code>, если URL имеет такие полномочия, как <code>http://user:password@example.com</code>.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Пример">Пример</h2>
-
-<p>В нашем <a href="https://github.com/mdn/fetch-examples/tree/master/fetch-request">Fetch Request примере</a> (см. <a href="https://mdn.github.io/fetch-examples/fetch-request/">Fetch Request live</a>) мы создаём новый объект {{domxref("Request")}} (запроса), используя релевантный конструктор, а затем получаем его вызовом <code>fetch()</code>. Так как запрашиваемый ресурс - изображение, для того, чтобы присвоить ему подходящий MIME тип и обработать должным образом, мы применяем к ответу метод {{domxref("Body.blob()")}}, после чего создаём для него Object URL и передаём её в элемент {{htmlelement("img")}}.</p>
-
-<pre class="brush: js">var myImage = document.querySelector('img');
-
-var myRequest = new Request('flowers.jpg');
-
-fetch(myRequest).then(function(response) {
-  return response.blob();
-}).then(function(response) {
-  var objectURL = URL.createObjectURL(response);
-  myImage.src = objectURL;
-});</pre>
-
-<p>В нашем <a href="https://github.com/mdn/fetch-examples/blob/master/fetch-with-init-then-request/index.html">Fetch with init then Request примере</a> (см. <a href="https://mdn.github.io/fetch-examples/fetch-with-init-then-request/">Fetch Request init live</a>) мы делаем тоже самое, за исключением того, что передаём в качестве аргумента для <code>fetch()</code> объект init:</p>
-
-<pre class="brush: js">var myImage = document.querySelector('img');
-
-var myHeaders = new Headers();
-myHeaders.append('Content-Type', 'image/jpeg');
-
-var myInit = { method: 'GET',
-               headers: myHeaders,
-               mode: 'cors',
-               cache: 'default' };
-
-var myRequest = new Request('flowers.jpg');
-
-fetch(myRequest,myInit).then(function(response) {
-  ...
-});</pre>
-
-<p>Обратите внимание, что объект init в качестве аргумента можно передать и в конструктор <code>Request</code> для получения аналогичного результата, например:</p>
-
-<pre class="brush: js">var myRequest = new Request('flowers.jpg', myInit);</pre>
-
-<p>Допустимо использования объекта литерала в качестве <code>headers</code> в <code>init</code>.</p>
-
-<pre class="brush: js">var myInit = { method: 'GET',
-               headers: {
-                   'Content-Type': 'image/jpeg'
-               },
-               mode: 'cors',
-               cache: 'default' };
-
-var myRequest = new Request('flowers.jpg', myInit);
-</pre>
-
-<h2 id="Спецификации">Спецификации</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Спецификация</th>
-   <th scope="col">Статус</th>
-   <th scope="col">Комментарий</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Fetch','#fetch-method','fetch()')}}</td>
-   <td>{{Spec2('Fetch')}}</td>
-   <td>Частично определена в новейшей спецификации <code>WindowOrWorkerGlobalScope</code>.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('Fetch','#dom-global-fetch','fetch()')}}</td>
-   <td>{{Spec2('Fetch')}}</td>
-   <td>Первоначальное определение</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('Credential Management')}}</td>
-   <td>{{Spec2('Credential Management')}}</td>
-   <td>Добавлена возможность установить экземпляр класса {{domxref("FederatedCredential")}} или {{domxref("PasswordCredential")}} как возможное значение для <code>init.credentials</code>.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
-<p>{{Compat("api.WindowOrWorkerGlobalScope.fetch")}}</p>
-
-<h2 id="Смотрите_также">Смотрите также</h2>
-
-<ul>
- <li><a href="/en-US/docs/Web/API/Fetch_API">Fetch API</a></li>
- <li><a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li>
- <li><a href="/en-US/docs/Web/HTTP/Access_control_CORS">HTTP access control (CORS)</a></li>
- <li><a href="/en-US/docs/Web/HTTP">HTTP</a></li>
-</ul>
diff --git a/files/ru/web/api/windoworworkerglobalscope/setinterval/index.html b/files/ru/web/api/windoworworkerglobalscope/setinterval/index.html
deleted file mode 100644
index c77c422bf1..0000000000
--- a/files/ru/web/api/windoworworkerglobalscope/setinterval/index.html
+++ /dev/null
@@ -1,641 +0,0 @@
----
-title: WindowOrWorkerGlobalScope.setInterval()
-slug: Web/API/WindowOrWorkerGlobalScope/setInterval
-translation_of: Web/API/WindowOrWorkerGlobalScope/setInterval
----
-<div>{{APIRef("HTML DOM")}}</div>
-
-<p><span class="seoSummary">Метод <strong><code>setInterval()</code></strong> предложен для {{domxref("Window")}} и {{domxref("Worker")}} интерфейсов. Он циклически вызывает функцию или участок кода с фиксированной паузой между каждым вызовом.</span> Уникальный идентификатор intervalID, возвращаемый методом, позволяет впоследствии удалить запущенный <span class="seoSummary"><strong><code>setInterval</code></strong></span> c помощью {{domxref("WindowOrWorkerGlobalScope.clearInterval", "clearInterval()")}}. Метод определён с помощью миксина {{domxref("WindowOrWorkerGlobalScope")}}.</p>
-
-<h2 id="Синтаксис">Синтаксис</h2>
-
-<pre class="syntaxbox notranslate"><em>var intervalID</em> = scope.setInterval(<em>func</em>, <em>delay</em>[, <em>param1</em>, <em>param2</em>, ...]);
-<em>var intervalID</em> = scope.setInterval(<em>code</em>, <em>delay</em>);
-</pre>
-
-<h3 id="Параметры">Параметры</h3>
-
-<dl>
- <dt><code>func</code></dt>
- <dd>{{jsxref("function")}} - функция, которая будет вызываться каждые <code>delay</code> миллисекунд. Ожидается, что функция не принимает параметры и ничего не возвращает.</dd>
- <dt><code>code</code></dt>
- <dd>Этот необязательный синтаксис позволяет вам включать строку вместо функции, которая компилируется и выполняется каждые <code>delay</code> миллисекунд. Однако такая форма не рекомендуется по тем же причинам, которые делают {{jsxref("eval", "eval()")}} угрозой безопасности.</dd>
- <dt><code>delay</code></dt>
- <dd>Время в миллисекундах (одна тысячная секунды), на которое таймер выполнит задержку между вызовом функции. Если задано значение меньше 10, то будет использовано число 10. На самом деле задержка может быть больше чем указано, дополнительное объяснение приведено здесь:  {{SectionOnPage("/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout", "Reasons for delays longer than specified")}}.</dd>
- <dt><code>param1, ..., paramN</code> {{optional_inline}}</dt>
- <dd>Дополнительные параметры, передаваемые в функцию <em>func</em>.</dd>
-</dl>
-
-<div class="note">
-<p><strong>Примечание</strong>: Передача дополнительных аргументов в <code>setInterval()</code> в первом синтаксисе не работает в Internet Explorer 9 и более ранних версиях.Если вы хотите включить эту функцию в этом браузере, вам следует использовать polyfill (смотрите раздел <a href="#Callback_arguments">Callback аргументы</a>).</p>
-</div>
-
-<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
-
-<p>Возвращаемый <code>intervalID</code> представляет из себя ненулевое числовое значение, которое идентифицирует таймер, созданный вызовом <code>setInterval()</code>; Это значение может быть передано в {{domxref("WindowOrWorkerGlobalScope.clearInterval()")}} для отмены таймера.</p>
-
-<p>It may be helpful to be aware that <code>setInterval()</code> and {{domxref("WindowOrWorkerGlobalScope.setTimeout", "setTimeout()")}} share the same pool of IDs, and that <code>clearInterval()</code> and {{domxref("WindowOrWorkerGlobalScope.clearTimeout", "clearTimeout()")}} can technically be used interchangeably. For clarity, however, you should try to always match them to avoid confusion when maintaining your code.</p>
-
-<div class="note"><strong>Note</strong>: The <code>delay</code> parameter is converted to a signed 32-bit integer. This effectively limits <code>delay</code> to 2147483647 ms, since it's specified as a signed integer in the IDL.</div>
-
-<h2 id="Примеры">Примеры</h2>
-
-<h3 id="Пример_1_Базовый_синтаксис">Пример 1: Базовый синтаксис</h3>
-
-<p>The following example demonstrates <code>setInterval()</code>'s basic syntax.</p>
-
-<pre class="brush:js notranslate">var intervalID = window.setInterval(myCallback, 500);
-
-function myCallback() {
-  // Your code here
-}
-</pre>
-
-<h3 id="Пример_2_Чередование_двух_цветов">Пример 2: <span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>Чередование двух цветов</span></span></span></h3>
-
-<p>В следующем примере вызывается функция <code>flashtext()</code> раз в секунду, до того момента, как будет нажата кнопка Stop.</p>
-
-<pre class="brush:html notranslate">&lt;!DOCTYPE html&gt;
-&lt;html&gt;
-&lt;head&gt;
-  &lt;meta charset="UTF-8" /&gt;
-  &lt;title&gt;setInterval/clearInterval example&lt;/title&gt;
-
-  &lt;script&gt;
-    var nIntervId;
-
-    function changeColor() {
-      nIntervId = setInterval(flashText, 1000);
-    }
-
-    function flashText() {
-      var oElem = document.getElementById('my_box');
-      oElem.style.color = oElem.style.color == 'red' ? 'blue' : 'red';
-      // oElem.style.color == 'red' ? 'blue' : 'red' это тернарный оператор.
-    }
-
-    function stopTextColor() {
-      clearInterval(nIntervId);
-    }
-  &lt;/script&gt;
-&lt;/head&gt;
-
-&lt;body onload="changeColor();"&gt;
-  &lt;div id="my_box"&gt;
-    &lt;p&gt;Hello World&lt;/p&gt;
-  &lt;/div&gt;
-
-  &lt;button onclick="stopTextColor();"&gt;Stop&lt;/button&gt;
-&lt;/body&gt;
-&lt;/html&gt;
-</pre>
-
-<h3 id="Пример_3_Симуляция_пишущей_машинки"><span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>Пример 3: Симуляция пишущей машинки</span></span></span></h3>
-
-<p>The following example simulates typewriter by first clearing and then slowly typing content into the <a href="/en-US/docs/DOM/NodeList"><code>NodeList</code></a> that matches a specified group of selectors.</p>
-
-<pre class="brush:html notranslate">&lt;!DOCTYPE html&gt;
-&lt;html&gt;
-&lt;head&gt;
-&lt;meta charset="UTF-8" /&gt;
-&lt;title&gt;JavaScript Typewriter - MDN Example&lt;/title&gt;
-&lt;script&gt;
-  function Typewriter (sSelector, nRate) {
-
-  function clean () {
-    clearInterval(nIntervId);
-    bTyping = false;
-    bStart = true;
-    oCurrent = null;
-    aSheets.length = nIdx = 0;
-  }
-
-  function scroll (oSheet, nPos, bEraseAndStop) {
-    if (!oSheet.hasOwnProperty('parts') || aMap.length &lt; nPos) { return true; }
-
-    var oRel, bExit = false;
-
-    if (aMap.length === nPos) { aMap.push(0); }
-
-    while (aMap[nPos] &lt; oSheet.parts.length) {
-      oRel = oSheet.parts[aMap[nPos]];
-
-      scroll(oRel, nPos + 1, bEraseAndStop) ? aMap[nPos]++ : bExit = true;
-
-      if (bEraseAndStop &amp;&amp; (oRel.ref.nodeType - 1 | 1) === 3 &amp;&amp; oRel.ref.nodeValue) {
-        bExit = true;
-        oCurrent = oRel.ref;
-        sPart = oCurrent.nodeValue;
-        oCurrent.nodeValue = '';
-      }
-
-      oSheet.ref.appendChild(oRel.ref);
-      if (bExit) { return false; }
-    }
-
-    aMap.length--;
-    return true;
-  }
-
-  function typewrite () {
-    if (sPart.length === 0 &amp;&amp; scroll(aSheets[nIdx], 0, true) &amp;&amp; nIdx++ === aSheets.length - 1) { clean(); return; }
-
-    oCurrent.nodeValue += sPart.charAt(0);
-    sPart = sPart.slice(1);
-  }
-
-  function Sheet (oNode) {
-    this.ref = oNode;
-    if (!oNode.hasChildNodes()) { return; }
-    this.parts = Array.prototype.slice.call(oNode.childNodes);
-
-    for (var nChild = 0; nChild &lt; this.parts.length; nChild++) {
-      oNode.removeChild(this.parts[nChild]);
-      this.parts[nChild] = new Sheet(this.parts[nChild]);
-    }
-  }
-
-  var
-    nIntervId, oCurrent = null, bTyping = false, bStart = true,
-    nIdx = 0, sPart = "", aSheets = [], aMap = [];
-
-  this.rate = nRate || 100;
-
-  this.play = function () {
-    if (bTyping) { return; }
-    if (bStart) {
-      var aItems = document.querySelectorAll(sSelector);
-
-      if (aItems.length === 0) { return; }
-      for (var nItem = 0; nItem &lt; aItems.length; nItem++) {
-        aSheets.push(new Sheet(aItems[nItem]));
-        /* Uncomment the following line if you have previously hidden your elements via CSS: */
-        // aItems[nItem].style.visibility = "visible";
-      }
-
-      bStart = false;
-    }
-
-    nIntervId = setInterval(typewrite, this.rate);
-    bTyping = true;
-  };
-
-  this.pause = function () {
-    clearInterval(nIntervId);
-    bTyping = false;
-  };
-
-  this.terminate = function () {
-    oCurrent.nodeValue += sPart;
-    sPart = "";
-    for (nIdx; nIdx &lt; aSheets.length; scroll(aSheets[nIdx++], 0, false));
-    clean();
-  };
-}
-
-/* usage: */
-var oTWExample1 = new Typewriter(/* elements: */ '#article, h1, #info, #copyleft', /* frame rate (optional): */ 15);
-
-/* default frame rate is 100: */
-var oTWExample2 = new Typewriter('#controls');
-
-/* you can also change the frame rate value modifying the "rate" property; for example: */
-// oTWExample2.rate = 150;
-
-onload = function () {
-  oTWExample1.play();
-  oTWExample2.play();
-};
-&lt;/script&gt;
-&lt;style type="text/css"&gt;
-span.intLink, a, a:visited {
-  cursor: pointer;
-  color: #000000;
-  text-decoration: underline;
-}
-
-#info {
-  width: 180px;
-  height: 150px;
-  float: right;
-  background-color: #eeeeff;
-  padding: 4px;
-  overflow: auto;
-  font-size: 12px;
-  margin: 4px;
-  border-radius: 5px;
-  /* visibility: hidden; */
-}
-&lt;/style&gt;
-&lt;/head&gt;
-
-&lt;body&gt;
-
-&lt;p id="copyleft" style="font-style: italic; font-size: 12px; text-align: center;"&gt;CopyLeft 2012 by &lt;a href="https://developer.mozilla.org/" target="_blank"&gt;Mozilla Developer Network&lt;/a&gt;&lt;/p&gt;
-&lt;p id="controls" style="text-align: center;"&gt;[&amp;nbsp;&lt;span class="intLink" onclick="oTWExample1.play();"&gt;Play&lt;/span&gt; | &lt;span class="intLink" onclick="oTWExample1.pause();"&gt;Pause&lt;/span&gt; | &lt;span class="intLink" onclick="oTWExample1.terminate();"&gt;Terminate&lt;/span&gt;&amp;nbsp;]&lt;/p&gt;
-&lt;div id="info"&gt;
-Vivamus blandit massa ut metus mattis in fringilla lectus imperdiet. Proin ac ante a felis ornare vehicula. Fusce pellentesque lacus vitae eros convallis ut mollis magna pellentesque. Pellentesque placerat enim at lacus ultricies vitae facilisis nisi fringilla. In tincidunt tincidunt tincidunt.
-&lt;/div&gt;
-&lt;h1&gt;JavaScript Typewriter&lt;/h1&gt;
-
-&lt;div id="article"&gt;
-&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ultrices dolor ac dolor imperdiet ullamcorper. Suspendisse quam libero, luctus auctor mollis sed, malesuada condimentum magna. Quisque in ante tellus, in placerat est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec a mi magna, quis mattis dolor. Etiam sit amet ligula quis urna auctor imperdiet nec faucibus ante. Mauris vel consectetur dolor. Nunc eget elit eget velit pulvinar fringilla consectetur aliquam purus. Curabitur convallis, justo posuere porta egestas, velit erat ornare tortor, non viverra justo diam eget arcu. Phasellus adipiscing fermentum nibh ac commodo. Nam turpis nunc, suscipit a hendrerit vitae, volutpat non ipsum.&lt;/p&gt;
-&lt;form&gt;
-&lt;p&gt;Phasellus ac nisl lorem: &lt;input type="text" /&gt;&lt;br /&gt;
-&lt;textarea style="width: 400px; height: 200px;"&gt;Nullam commodo suscipit lacus non aliquet. Phasellus ac nisl lorem, sed facilisis ligula. Nam cursus lobortis placerat. Sed dui nisi, elementum eu sodales ac, placerat sit amet mauris. Pellentesque dapibus tellus ut ipsum aliquam eu auctor dui vehicula. Quisque ultrices laoreet erat, at ultrices tortor sodales non. Sed venenatis luctus magna, ultricies ultricies nunc fringilla eget. Praesent scelerisque urna vitae nibh tristique varius consequat neque luctus. Integer ornare, erat a porta tempus, velit justo fermentum elit, a fermentum metus nisi eu ipsum. Vivamus eget augue vel dui viverra adipiscing congue ut massa. Praesent vitae eros erat, pulvinar laoreet magna. Maecenas vestibulum mollis nunc in posuere. Pellentesque sit amet metus a turpis lobortis tempor eu vel tortor. Cras sodales eleifend interdum.&lt;/textarea&gt;&lt;/p&gt;
-&lt;p&gt;&lt;input type="submit" value="Send" /&gt;
-&lt;/form&gt;
-&lt;p&gt;Duis lobortis sapien quis nisl luctus porttitor. In tempor semper libero, eu tincidunt dolor eleifend sit amet. Ut nec velit in dolor tincidunt rhoncus non non diam. Morbi auctor ornare orci, non euismod felis gravida nec. Curabitur elementum nisi a eros rutrum nec blandit diam placerat. Aenean tincidunt risus ut nisi consectetur cursus. Ut vitae quam elit. Donec dignissim est in quam tempor consequat. Aliquam aliquam diam non felis convallis suscipit. Nulla facilisi. Donec lacus risus, dignissim et fringilla et, egestas vel eros. Duis malesuada accumsan dui, at fringilla mauris bibStartum quis. Cras adipiscing ultricies fermentum. Praesent bibStartum condimentum feugiat.&lt;/p&gt;
-&lt;p&gt;Nam faucibus, ligula eu fringilla pulvinar, lectus tellus iaculis nunc, vitae scelerisque metus leo non metus. Proin mattis lobortis lobortis. Quisque accumsan faucibus erat, vel varius tortor ultricies ac. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec libero nunc. Nullam tortor nunc, elementum a consectetur et, ultrices eu orci. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a nisl eu sem vehicula egestas.&lt;/p&gt;
-&lt;/div&gt;
-&lt;/body&gt;
-&lt;/html&gt;</pre>
-
-<p><a href="/files/3997/typewriter.html">View this demo in action</a>. See also: <a href="/en-US/docs/DOM/window.clearInterval"><code>clearInterval()</code></a>.</p>
-
-<h2 id="Аргументы_колбэк-функции">Аргументы колбэк-функции</h2>
-
-<p>As previously discussed, Internet Explorer versions 9 and below do not support the passing of arguments to the callback function in either <code>setTimeout()</code> or <code>setInterval()</code>. The following <strong>IE-specific</strong> code demonstrates a method for overcoming this limitation.  To use, simply add the following code to the top of your script.</p>
-
-<pre class="brush:js notranslate">/*\
-|*|
-|*|  IE-specific polyfill that enables the passage of arbitrary arguments to the
-|*|  callback functions of javascript timers (HTML5 standard syntax).
-|*|
-|*|  https://developer.mozilla.org/en-US/docs/Web/API/window.setInterval
-|*|  https://developer.mozilla.org/User:fusionchess
-|*|
-|*|  Syntax:
-|*|  var timeoutID = window.setTimeout(func, delay[, param1, param2, ...]);
-|*|  var timeoutID = window.setTimeout(code, delay);
-|*|  var intervalID = window.setInterval(func, delay[, param1, param2, ...]);
-|*|  var intervalID = window.setInterval(code, delay);
-|*|
-\*/
-
-if (document.all &amp;&amp; !window.setTimeout.isPolyfill) {
-  var __nativeST__ = window.setTimeout;
-  window.setTimeout = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) {
-    var aArgs = Array.prototype.slice.call(arguments, 2);
-    return __nativeST__(vCallback instanceof Function ? function () {
-      vCallback.apply(null, aArgs);
-    } : vCallback, nDelay);
-  };
-  window.setTimeout.isPolyfill = true;
-}
-
-if (document.all &amp;&amp; !window.setInterval.isPolyfill) {
-  var __nativeSI__ = window.setInterval;
-  window.setInterval = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) {
-    var aArgs = Array.prototype.slice.call(arguments, 2);
-    return __nativeSI__(vCallback instanceof Function ? function () {
-      vCallback.apply(null, aArgs);
-    } : vCallback, nDelay);
-  };
-  window.setInterval.isPolyfill = true;
-}
-</pre>
-
-<p>Another possibility is to use an anonymous function to call your callback, although this solution is a bit more expensive. Example:</p>
-
-<pre class="brush:js notranslate">var intervalID = setInterval(function() { myFunc('one', 'two', 'three'); }, 1000);</pre>
-
-<p>Another possibility is to use <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind">function's bind</a>. Example:</p>
-
-<pre class="brush:js notranslate">var intervalID = setInterval(function(arg1) {}.bind(undefined, 10), 1000);</pre>
-
-<p>{{h3_gecko_minversion("Inactive tabs", "5.0")}}</p>
-
-<p>Starting in Gecko 5.0 {{geckoRelease("5.0")}}, intervals are clamped to fire no more often than once per second in inactive tabs.</p>
-
-<h2 id="Проблема_с_this">Проблема с "<a href="/en-US/docs/Web/JavaScript/Reference/Operators/this"><code>this</code></a>"</h2>
-
-<p>When you pass a method to <code>setInterval()</code> or any other function, it is invoked with the wrong <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this"><code>this</code></a> value. This problem is explained in detail in the <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this#As_an_object_method">JavaScript reference</a>.</p>
-
-<h3 id="Объяснение">Объяснение</h3>
-
-<p>Code executed by <code>setInterval()</code> runs in a separate execution context than the function from which it was called. As a consequence, the <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this"><code>this</code></a> keyword for the called function is set to the <code>window</code> (or <code>global</code>) object, it is not the same as the <code>this</code> value for the function that called <code>setTimeout</code>. See the following example (which uses <code>setTimeout()</code> instead of <code>setInterval()</code> – the problem, in fact, is the same for both timers):</p>
-
-<pre class="brush:js notranslate">myArray = ['zero', 'one', 'two'];
-
-myArray.myMethod = function (sProperty) {
-    alert(arguments.length &gt; 0 ? this[sProperty] : this);
-};
-
-myArray.myMethod(); // prints "zero,one,two"
-myArray.myMethod(1); // prints "one"
-setTimeout(myArray.myMethod, 1000); // prints "[object Window]" after 1 second
-setTimeout(myArray.myMethod, 1500, "1"); // prints "undefined" after 1,5 seconds
-// passing the 'this' object with .call won't work
-// because this will change the value of this inside setTimeout itself
-// while we want to change the value of this inside myArray.myMethod
-// in fact, it will be an error because setTimeout code expects this to be the window object:
-setTimeout.call(myArray, myArray.myMethod, 2000); // error: "NS_ERROR_XPC_BAD_OP_ON_WN_PROTO: Illegal operation on WrappedNative prototype object"
-setTimeout.call(myArray, myArray.myMethod, 2500, 2); // same error
-</pre>
-
-<p>As you can see there are no ways to pass the <code>this</code> object to the callback function in the legacy JavaScript.</p>
-
-<h3 id="Возможное_решение">Возможное решение</h3>
-
-<p>A possible way to solve the "<code>this</code>" problem is to replace the two native <code>setTimeout()</code> or <code>setInterval()</code> global functions with two <em>non-native</em> ones that enable their invocation through the <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Function/call"><code>Function.prototype.call</code></a> method. The following example shows a possible replacement:</p>
-
-<pre class="brush:js notranslate">// Enable the passage of the 'this' object through the JavaScript timers
-
-var __nativeST__ = window.setTimeout, __nativeSI__ = window.setInterval;
-
-window.setTimeout = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) {
-  var oThis = this, aArgs = Array.prototype.slice.call(arguments, 2);
-  return __nativeST__(vCallback instanceof Function ? function () {
-    vCallback.apply(oThis, aArgs);
-  } : vCallback, nDelay);
-};
-
-window.setInterval = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) {
-  var oThis = this, aArgs = Array.prototype.slice.call(arguments, 2);
-  return __nativeSI__(vCallback instanceof Function ? function () {
-    vCallback.apply(oThis, aArgs);
-  } : vCallback, nDelay);
-};</pre>
-
-<div class="note">These two replacements also enable the HTML5 standard passage of arbitrary arguments to the callback functions of timers in IE. So they can be used as <em>non-standard-compliant</em> polyfills also. See the <a href="#Callback_arguments">callback arguments paragraph</a> for a <em>standard-compliant</em> polyfill.</div>
-
-<p>Новое тестируемое свойство:</p>
-
-<pre class="brush:js notranslate">myArray = ['zero', 'one', 'two'];
-
-myArray.myMethod = function (sProperty) {
-    alert(arguments.length &gt; 0 ? this[sProperty] : this);
-};
-
-setTimeout(alert, 1500, 'Hello world!'); // the standard use of setTimeout and setInterval is preserved, but...
-setTimeout.call(myArray, myArray.myMethod, 2000); // prints "zero,one,two" after 2 seconds
-setTimeout.call(myArray, myArray.myMethod, 2500, 2); // prints "two" after 2,5 seconds
-</pre>
-
-<p>Another, more complex, solution for<strong> </strong>the <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this"><code>this</code></a> problem<strong> </strong>is <a href="#A_little_framework">the following framework</a>.</p>
-
-<div class="note">JavaScript 1.8.5 introduces the <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind">Function.prototype.bind()</a></code> method, which lets you specify the value that should be used as <code>this</code> for all calls to a given function. This lets you easily bypass problems where it's unclear what this will be, depending on the context from which your function was called. Also, ES2015 supports <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions">arrow functions</a>, with lexical this allowing us to write setInterval( () =&gt; this.myMethod) if we're inside myArray method.</div>
-
-<h2 id="MiniDaemon_-_фреймворк_для_управления_таймерами">MiniDaemon - фреймворк для управления таймерами</h2>
-
-<p>In pages requiring many timers, it can often be difficult to keep track of all of the running timer events. One approach to solving this problem is to store information about the state of a timer in an object. Following is a minimal example of such an abstraction. The constructor architecture explicitly avoids the use of closures. It also offers an alternative way to pass the <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this"><code>this</code></a> object to the callback function (see <a href="#The_.22this.22_problem">The "this" problem</a> for details). The following code is also <a href="https://github.com/madmurphy/minidaemon.js">available on GitHub</a>.</p>
-
-<div class="note">For a more complex but still modular version of it (<code><em>Daemon</em></code>) see <a href="/en-US/Add-ons/Code_snippets/Timers/Daemons">JavaScript Daemons Management</a>. This more complex version is nothing but a big and scalable collection of methods for the <code><em>Daemon</em></code> constructor. However, the <code><em>Daemon</em></code> constructor itself is nothing but a clone of <code><em>MiniDaemon</em></code> with an added support for <em>init</em> and <em>onstart</em> functions declarable during the instantiation of the <code><em>daemon</em></code>. <strong>So the <code><em>MiniDaemon</em></code> framework remains the recommended way for simple animations</strong>, because <code><em>Daemon</em></code> without its collection of methods is essentially a clone of it.</div>
-
-<h3 id="minidaemon.js">minidaemon.js</h3>
-
-<pre class="brush:js notranslate">/*\
-|*|
-|*|  :: MiniDaemon ::
-|*|
-|*|  Revision #2 - September 26, 2014
-|*|
-|*|  https://developer.mozilla.org/en-US/docs/Web/API/window.setInterval
-|*|  https://developer.mozilla.org/User:fusionchess
-|*|  https://github.com/madmurphy/minidaemon.js
-|*|
-|*|  This framework is released under the GNU Lesser General Public License, version 3 or later.
-|*|  http://www.gnu.org/licenses/lgpl-3.0.html
-|*|
-\*/
-
-function MiniDaemon (oOwner, fTask, nRate, nLen) {
-  if (!(this &amp;&amp; this instanceof MiniDaemon)) { return; }
-  if (arguments.length &lt; 2) { throw new TypeError('MiniDaemon - not enough arguments'); }
-  if (oOwner) { this.owner = oOwner; }
-  this.task = fTask;
-  if (isFinite(nRate) &amp;&amp; nRate &gt; 0) { this.rate = Math.floor(nRate); }
-  if (nLen &gt; 0) { this.length = Math.floor(nLen); }
-}
-
-MiniDaemon.prototype.owner = null;
-MiniDaemon.prototype.task = null;
-MiniDaemon.prototype.rate = 100;
-MiniDaemon.prototype.length = Infinity;
-
-  /* These properties should be read-only */
-
-MiniDaemon.prototype.SESSION = -1;
-MiniDaemon.prototype.INDEX = 0;
-MiniDaemon.prototype.PAUSED = true;
-MiniDaemon.prototype.BACKW = true;
-
-  /* Global methods */
-
-MiniDaemon.forceCall = function (oDmn) {
-  oDmn.INDEX += oDmn.BACKW ? -1 : 1;
-  if (oDmn.task.call(oDmn.owner, oDmn.INDEX, oDmn.length, oDmn.BACKW) === false || oDmn.isAtEnd()) { oDmn.pause(); return false; }
-  return true;
-};
-
-  /* Instances methods */
-
-MiniDaemon.prototype.isAtEnd = function () {
-  return this.BACKW ? isFinite(this.length) &amp;&amp; this.INDEX &lt; 1 : this.INDEX + 1 &gt; this.length;
-};
-
-MiniDaemon.prototype.synchronize = function () {
-  if (this.PAUSED) { return; }
-  clearInterval(this.SESSION);
-  this.SESSION = setInterval(MiniDaemon.forceCall, this.rate, this);
-};
-
-MiniDaemon.prototype.pause = function () {
-  clearInterval(this.SESSION);
-  this.PAUSED = true;
-};
-
-MiniDaemon.prototype.start = function (bReverse) {
-  var bBackw = Boolean(bReverse);
-  if (this.BACKW === bBackw &amp;&amp; (this.isAtEnd() || !this.PAUSED)) { return; }
-  this.BACKW = bBackw;
-  this.PAUSED = false;
-  this.synchronize();
-};
-</pre>
-
-<div class="note">MiniDaemon passes arguments to the callback function. If you want to work on it with browsers that natively do not support this feature, use one of the methods proposed above.</div>
-
-<h3 id="Синтаксис_2">Синтаксис</h3>
-
-<p><code>var myDaemon = new MiniDaemon(<em>thisObject</em>, <em>callback</em>[</code><code>, <em>rate</em></code><code>[, <em>length</em>]]);</code></p>
-
-<h3 id="Описание">Описание</h3>
-
-<p>Returns a JavaScript <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object"><code>Object</code></a> containing all information needed by an animation (like the <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this"><code>this</code></a> object, the callback function, the length, the frame-rate).</p>
-
-<h4 id="Параметры_2">Параметры</h4>
-
-<dl>
- <dt><code>thisObject</code></dt>
- <dd>The <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this"><code>this</code></a> object on which the <em>callback</em> function is called. It can be an <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object"><code>object</code></a> or <code>null</code>.</dd>
- <dt><code>callback</code></dt>
- <dd>The function that is repeatedly invoked . <strong>It is called with three parameters</strong>: <em>index</em> (the iterative index of each invocation), <em>length</em> (the number of total invocations assigned to the <em>daemon</em> - finite or <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Infinity"><code>Infinity</code></a>) and <em>backwards</em> (a boolean expressing whether the <em>index</em> is increasing or decreasing). It is something like <em>callback</em>.call(<em>thisObject</em>, <em>index</em>, <em>length</em>, <em>backwards</em>). <strong>If the callback function returns a <code>false</code> value the <em>daemon</em> is paused</strong>.</dd>
- <dt><code>rate (optional)</code></dt>
- <dd>The time lapse (in number of milliseconds) between each invocation. The default value is 100.</dd>
- <dt><code>length (optional)</code></dt>
- <dd>The total number of invocations. It can be a positive integer or <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Infinity"><code>Infinity</code></a>. The default value is <code>Infinity</code>.</dd>
-</dl>
-
-<h4 id="MiniDaemon_instances_properties"><code>MiniDaemon</code> instances properties</h4>
-
-<dl>
- <dt><code>myDaemon.owner</code></dt>
- <dd>The <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this"><code>this</code></a> object on which is executed the daemon (read/write). It can be an <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object"><code>object</code></a> or <code>null</code>.</dd>
- <dt><code>myDaemon.task</code></dt>
- <dd>The function that is repeatedly invoked (read/write). It is called with three arguments: <em>index</em> (the iterative index of each invocation), <em>length</em> (the number of total invocations assigned to the daemon - finite or <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Infinity"><code>Infinity</code></a>) and backwards (a boolean expressing whether the <em>index</em> is decreasing or not) – see above. If the <code>myDaemon.task</code> function returns a <code>false</code> value the <em>daemon</em> is paused.</dd>
- <dt><code>myDaemon.rate</code></dt>
- <dd>Промежуток времени (в миллисекундах) между каждым вызовом (чтение / запись).</dd>
- <dt><code>myDaemon.length</code></dt>
- <dd>Итоговое количество вызовов. Это может быть положительное целое число или бесконечность <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Infinity"><code>Infinity</code></a> (чтение / запись).</dd>
-</dl>
-
-<h4 id="MiniDaemon_instances_methods"><code>MiniDaemon</code> instances methods</h4>
-
-<dl>
- <dt><code>myDaemon.isAtEnd()</code></dt>
- <dd>Возвращает логическое значение (true или false), в зависимости от того, находится ли <em>daemon</em> в начальной / конечной позиции или нет.  </dd>
- <dt><code>myDaemon.synchronize()</code></dt>
- <dd>Synchronize the timer of a started daemon with the time of its invocation.</dd>
- <dt><code>myDaemon.pause()</code></dt>
- <dd>Pauses the daemon.</dd>
- <dt><code>myDaemon.start([<em>reverse</em>])</code></dt>
- <dd>Starts the daemon forward (<em>index</em> of each invocation increasing) or backwards (<em>index</em> decreasing).</dd>
-</dl>
-
-<h4 id="MiniDaemon_global_object_methods"><code>MiniDaemon</code> global object methods</h4>
-
-<dl>
- <dt><code>MiniDaemon.forceCall(<em>minidaemon</em>)</code></dt>
- <dd>Forces a single callback to the <code><em>minidaemon</em>.task</code> function regardless of the fact that the end has been reached or not. In any case the internal <code>INDEX</code> property is increased/decreased (depending on the actual direction of the process).</dd>
-</dl>
-
-<h3 id="Пример_использования">Пример использования</h3>
-
-<p>Ваша HTML страница:</p>
-
-<pre class="brush:html notranslate">&lt;!DOCTYPE html&gt;
-&lt;html&gt;
-&lt;head&gt;
-  &lt;meta charset="UTF-8" /&gt;
-  &lt;title&gt;MiniDaemin Example - MDN&lt;/title&gt;
-  &lt;script type="text/javascript" src="minidaemon.js"&gt;&lt;/script&gt;
-  &lt;style type="text/css"&gt;
-    #sample_div {
-      visibility: hidden;
-    }
-  &lt;/style&gt;
-&lt;/head&gt;
-
-&lt;body&gt;
-  &lt;p&gt;
-    &lt;input type="button" onclick="fadeInOut.start(false /* optional */);" value="fade in" /&gt;
-    &lt;input type="button" onclick="fadeInOut.start(true);" value="fade out"&gt;
-    &lt;input type="button" onclick="fadeInOut.pause();" value="pause" /&gt;
-  &lt;/p&gt;
-
-  &lt;div id="sample_div"&gt;Some text here&lt;/div&gt;
-
-  &lt;script type="text/javascript"&gt;
-    function opacity (nIndex, nLength, bBackwards) {
-      this.style.opacity = nIndex / nLength;
-      if (bBackwards ? nIndex === 0 : nIndex === 1) {
-        this.style.visibility = bBackwards ? 'hidden' : 'visible';
-      }
-    }
-
-    var fadeInOut = new MiniDaemon(document.getElementById('sample_div'), opacity, 300, 8);
-  &lt;/script&gt;
-&lt;/body&gt;
-&lt;/html&gt;</pre>
-
-<p><a href="/files/3995/minidaemon_example.html" title="MiniDaemon Example">View this example in action</a></p>
-
-<h2 id="Примечания">Примечания</h2>
-
-<p>The <code>setInterval()</code> function is commonly used to set a delay for functions that are executed again and again, such as animations.</p>
-
-<p>You can cancel the interval using {{domxref("WindowOrWorkerGlobalScope.clearInterval()")}}.</p>
-
-<p>If you wish to have your function called <em>once</em> after the specified delay, use {{domxref("WindowOrWorkerGlobalScope.setTimeout()")}}.</p>
-
-<h3 id="Ensure_that_execution_duration_is_shorter_than_interval_frequency">Ensure that execution duration is shorter than interval frequency</h3>
-
-<p>If there is a possibility that your logic could take longer to execute than the interval time, it is recommended that you recursively call a named function using {{domxref("WindowOrWorkerGlobalScope.setTimeout")}}. For example, if using <code>setInterval</code> to poll a remote server every 5 seconds, network latency, an unresponsive server, and a host of other issues could prevent the request from completing in its allotted time. As such, you may find yourself with queued up XHR requests that won't necessarily return in order.</p>
-
-<p>In these cases, a recursive <code>setTimeout()</code> pattern is preferred:</p>
-
-<pre class="brush:js notranslate">(function loop(){
-   setTimeout(function() {
-      // Your logic here
-
-      loop();
-  }, delay);
-})();
-</pre>
-
-<p>In the above snippet, a named function <code>loop()</code> is declared and is immediately executed. <code>loop()</code> is recursively called inside <code>setTimeout()</code> after the logic has completed executing. While this pattern does not guarantee execution on a fixed interval, it does guarantee that the previous interval has completed before recursing.</p>
-
-<h3 id="Throttling_of_intervals">Throttling of intervals</h3>
-
-<p><code>setInterval()</code> is subject to the same throttling restrictions in Firefox as {{domxref("WindowOrWorkerGlobalScope.setTimeout","setTimeout()")}}; see <a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout#Reasons_for_delays_longer_than_specified">Reasons for delays longer than specified</a>.</p>
-
-<h2 id="Спецификации">Спецификации</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th>Specification</th>
-   <th>Status</th>
-   <th>Comment</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', 'webappapis.html#dom-setinterval', 'WindowOrWorkerGlobalScope.setInterval()')}}</td>
-   <td>{{Spec2("HTML WHATWG")}}</td>
-   <td>Method moved to the <code>WindowOrWorkerGlobalScope</code> mixin in the latest spec.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName("HTML WHATWG", "webappapis.html#dom-setinterval", "WindowTimers.setInterval()")}}</td>
-   <td>{{Spec2("HTML WHATWG")}}</td>
-   <td>Initial definition (DOM Level 0)</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
-
-<div>
-
-
-<p>{{Compat("api.WindowOrWorkerGlobalScope.setInterval")}}</p>
-</div>
-
-<h2 id="Смотрите_также">Смотрите также</h2>
-
-<ul>
- <li><a href="/en-US/Add-ons/Code_snippets/Timers">JavaScript timers</a></li>
- <li>{{domxref("WindowOrWorkerGlobalScope.setTimeout")}}</li>
- <li>{{domxref("WindowOrWorkerGlobalScope.clearTimeout")}}</li>
- <li>{{domxref("WindowOrWorkerGlobalScope.clearInterval")}}</li>
- <li>{{domxref("window.requestAnimationFrame")}}</li>
- <li><a href="/en-US/Add-ons/Code_snippets/Timers/Daemons"><em>Daemons</em> management</a></li>
-</ul>
-
-<div id="simple-translate">
-<div>
-<div class="simple-translate-button isShow" style="height: 22px; width: 22px; top: 1554px; left: 525px;"></div>
-
-<div class="simple-translate-panel " style="width: 300px; height: 200px; top: 0px; left: 0px; font-size: 13px; background-color: rgb(255, 255, 255);">
-<div class="simple-translate-result-wrapper" style="overflow: hidden;">
-<div class="simple-translate-move"></div>
-
-<div class="simple-translate-result-contents">
-<p class="simple-translate-result" style="color: rgb(0, 0, 0);"></p>
-
-<p class="simple-translate-candidate" style="color: rgb(115, 115, 115);"></p>
-</div>
-</div>
-</div>
-</div>
-</div>
diff --git a/files/ru/web/api/windoworworkerglobalscope/settimeout/index.html b/files/ru/web/api/windoworworkerglobalscope/settimeout/index.html
deleted file mode 100644
index dbc08996a2..0000000000
--- a/files/ru/web/api/windoworworkerglobalscope/settimeout/index.html
+++ /dev/null
@@ -1,261 +0,0 @@
----
-title: WindowTimers.setTimeout()
-slug: Web/API/WindowOrWorkerGlobalScope/setTimeout
-translation_of: Web/API/WindowOrWorkerGlobalScope/setTimeout
-original_slug: Web/API/WindowTimers/setTimeout
----
-<div>{{ APIRef() }}</div>
-
-<h2 id="Summary" name="Summary">Краткое изложение</h2>
-
-<p>Вызов функции или выполнение фрагмента кода после указанной задержки.</p>
-
-<h2 id="Syntax" name="Syntax">Синтаксис</h2>
-
-<pre class="syntaxbox notranslate"><em>var timeoutID</em> = window.setTimeout(<em>func</em>, [, <em>delay</em>, <em>param1</em>, <em>param2</em>, ...]);
-<em>var timeoutID</em> = window.setTimeout(<em>code </em>[, <em>delay]</em>);
-</pre>
-
-<p>где</p>
-
-<ul>
- <li><code>timeoutID -</code> это <em>числовой</em> ID, который может быть использован позже с {{domxref("window.clearTimeout()")}}.</li>
- <li><code>func -</code> это <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Function" title="en-US/docs/Core_JavaScript_1.5_Reference/Global_Objects/Function">функция</a>, которую требуется вызвать после <code>delay</code> миллисекунд.</li>
- <li><code>code</code> - в альтернативном варианте применения это строка, содержащая код, который вы хотите выполнить после <code>delay</code> миллисекунд (использовать этот метод <strong>не рекомендуется</strong> по тем же причинам, что и <a href="/en-US/docs/JavaScript/Reference/Global_Objects/eval#Don%27t_use_eval!" title="en-US/docs/Core JavaScript 1.5 Reference/Global Functions/Eval#Don't use eval!">eval()</a>)</li>
- <li><code>delay</code>  {{optional_inline}} -  задержка в миллисекундах (тысячных долях секунды), после которой будет выполнен вызов функции. Реальная задержка может быть больше; см. {{anch("Notes")}} ниже.</li>
-</ul>
-
-<p>Необходимо принять во внимание, что передача дополнительных параметров функции в первом варианте не работает в Internet Explorer 9 и ниже. Для использования этой функциональности в таких браузерах, необходимо использовать код для совместимости (см. раздел <a href="#Аргументы_колбэк-функции">Аргументы колбэк-функции</a>).</p>
-
-<div class="warning"><strong>Important:</strong> Prior to Gecko 13 {{ geckoRelease("13.0") }}, Gecko passed an extra parameter to the callback routine, indicating the "actual lateness" of the timeout in milliseconds. This non-standard parameter is no longer passed.</div>
-
-<h2 id="Example" name="Example">Пример</h2>
-
-<p>В следующем примере на веб странице создаются две простые кнопки, к которым привязываются действия setTimeout и clearTimeout. Нажатие на первую кнопку установит таймаут, который вызовет диалоговое окно через две секунды. Также будет сохранён id для clearTimeout. Таймаут также может быть отменён по нажатию на вторую кнопку.</p>
-
-<h3 id="HTML_Content">HTML Content</h3>
-
-<pre class="brush: html notranslate">&lt;p&gt;Live Example&lt;/p&gt;
-&lt;button onclick="delayedAlert();"&gt;Show an alert box after two seconds&lt;/button&gt;
-&lt;p&gt;&lt;/p&gt;
-&lt;button onclick="clearAlert();"&gt;Cancel alert before it happens&lt;/button&gt;
-</pre>
-
-<h3 id="JavaScript_Content">JavaScript Content</h3>
-
-<pre class="brush: js notranslate">var timeoutID;
-
-function delayedAlert() {
-  timeoutID = window.setTimeout(slowAlert, 2000);
-}
-
-function slowAlert() {
-  alert("That was really slow!");
-}
-
-function clearAlert() {
-  window.clearTimeout(timeoutID);
-}
-</pre>
-
-<p>{{ EmbedLiveSample('Example') }}</p>
-
-<p>Смотрите также <a href="/en-US/docs/DOM/window.clearTimeout#Example" title="en-US/docs/DOM/window.clearTimeout#Example"><code>пример clearTimeout()</code></a>.</p>
-
-<h2 id="Аргументы_колбэк-функции">Аргументы колбэк-функции</h2>
-
-<p>Если вам нужно передать аргумент в вашу callback функцию, но нужно, чтобы это работало в Internet Explorer 9 и ниже, который не поддерживает передачу дополнительных параметров (ни с <code>setTimeout()</code> или <code>setInterval()</code>), то вы можете прописать специальный код для <em>совместимости с IE, </em><span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>вставив этот код в начало ваших скриптов</span></span></span>, <span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>который включит функцию передачи стандартных параметров HTML5 в </span></span></span>Internet Explorer<span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span> для обоих таймеров</span></span></span>.</p>
-
-<pre class="brush: js notranslate">/*\
-|*|
-|*|  IE-specific polyfill which enables the passage of arbitrary arguments to the
-|*|  callback functions of JavaScript timers (HTML5 standard syntax).
-|*|
-|*|  https://developer.mozilla.org/en-US/docs/DOM/window.setInterval
-|*|
-|*|  Syntax:
-|*|  var timeoutID = window.setTimeout(func, delay, [param1, param2, ...]);
-|*|  var timeoutID = window.setTimeout(code, delay);
-|*|  var intervalID = window.setInterval(func, delay[, param1, param2, ...]);
-|*|  var intervalID = window.setInterval(code, delay);
-|*|
-\*/
-
-if (document.all &amp;&amp; !window.setTimeout.isPolyfill) {
-  var __nativeST__ = window.setTimeout;
-  window.setTimeout = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) {
-    var aArgs = Array.prototype.slice.call(arguments, 2);
-    return __nativeST__(vCallback instanceof Function ? function () {
-      vCallback.apply(null, aArgs);
-    } : vCallback, nDelay);
-  };
-  window.setTimeout.isPolyfill = true;
-}
-
-if (document.all &amp;&amp; !window.setInterval.isPolyfill) {
-  var __nativeSI__ = window.setInterval;
-  window.setInterval = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) {
-    var aArgs = Array.prototype.slice.call(arguments, 2);
-    return __nativeSI__(vCallback instanceof Function ? function () {
-      vCallback.apply(null, aArgs);
-    } : vCallback, nDelay);
-  };
-  window.setInterval.isPolyfill = true;
-}
-</pre>
-
-<h2 id="Правка_только_для_IE">Правка только для IE</h2>
-
-<p>If you want a completely unobtrusive hack for every other mobile or desktop browser, including IE 9 and below, you can either use JavaScript conditional comments:</p>
-
-<pre class="brush: js notranslate">/*@cc_on
-  // conditional IE &lt; 9 only fix
-  @if (@_jscript_version &lt;= 6)
-  (function(f){
-     window.setTimeout =f(window.setTimeout);
-     window.setInterval =f(window.setInterval);
-  })(function(f){return function(c,t){var a=[].slice.call(arguments,2);return f(function(){c.apply(this,a)},t)}});
-  @end
-@*/
-</pre>
-
-<p><span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>Или используйте очень чистый подход, основанный на условном свойстве IE HTML</span></span></span>:</p>
-
-<pre class="brush: html notranslate">&lt;!--[if lte IE 9]&gt;&lt;script&gt;
-(function(f){
-window.setTimeout =f(window.setTimeout);
-window.setInterval =f(window.setInterval);
-})(function(f){return function(c,t){
-var a=[].slice.call(arguments,2);return f(function(){c.apply(this,a)},t)}
-});
-&lt;/script&gt;&lt;![endif]--&gt;
-</pre>
-
-<p>Another possibility is to use an anonymous function to call your callback, but this solution is a bit more expensive. Example:</p>
-
-<pre class="brush: js notranslate">var intervalID = setTimeout(function() { myFunc("one", "two", "three"); }, 1000);
-</pre>
-
-<p>Yet another possibility is to use <a href="https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Function/bind" title="/en-US/docs/JavaScript/Reference/Global_Objects/Function/bind">function's bind</a>. Example:</p>
-
-<pre class="brush: js notranslate">setTimeout(function(arg1){}.bind(undefined, 10));
-</pre>
-
-<h2 id="Проблема_с_this">Проблема с "<code>this</code>"</h2>
-
-<p>Когда вы передаёте метод в <code>setTimeout()</code> (или в любую другую функцию, если на то пошло), то вызов будет осуществлён с неправильным значением <code>this</code>. Эта проблема разъясняется детально в <a href="/en-US/docs/JavaScript/Reference/Operators/this#Method_binding" title="en-US/docs/Core_JavaScript_1.5_Reference/Operators/Special_Operators/this_Operator#Method_binding">JavaScript reference</a>.</p>
-
-<h3 id="Объяснение">Объяснение</h3>
-
-<p>Code executed by <code>setTimeout()</code> is run in a separate execution context to the function from which it was called. As a consequence, the <code>this</code> keyword for the called function will be set to the <code>window</code> (or <code>global</code>) object; it will not be the same as the <code>this</code> value for the function that called <code>setTimeout</code>. See the following example:</p>
-
-<pre class="brush: js notranslate">myArray = ["zero", "one", "two"];
-myArray.myMethod = function (sProperty) {
-    alert(arguments.length &gt; 0 ? this[sProperty] : this);
-};
-
-myArray.myMethod(); // prints "zero,one,two"
-myArray.myMethod(1); // prints "one"
-setTimeout(myArray.myMethod, 1000); // prints "[object Window]" after 1 second
-setTimeout(myArray.myMethod, 1500, "1"); // prints "undefined" after 1.5 seconds
-// let's try to pass the 'this' object
-setTimeout.call(myArray, myArray.myMethod, 2000); // error: "NS_ERROR_XPC_BAD_OP_ON_WN_PROTO: Illegal operation on WrappedNative prototype object"
-setTimeout.call(myArray, myArray.myMethod, 2500, 2); // same error</pre>
-
-<p><span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>Как видите, нет способов передать объект</span></span></span> <code>this</code> <span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>в колбэк-функцию.</span></span></span>.</p>
-
-<h3 id="Возможное_решение">Возможное решение</h3>
-
-<p>A possible way to solve the "<code>this</code>" problem is to replace the two native <code>setTimeout()</code> or <code>setInterval()</code> global functions with two <em>non-native</em> ones which will enable their invocation through the <a href="en-US/docs/JavaScript/Reference/Global_Objects/Function/call" title="en-US/docs/JavaScript/Reference/Global_Objects/Function/call"><code>Function.prototype.call</code></a> method. The following example shows a possible replacement:</p>
-
-<pre class="brush: js notranslate">// Enable the passage of the 'this' object through the JavaScript timers
-
-var __nativeST__ = window.setTimeout, __nativeSI__ = window.setInterval;
-
-window.setTimeout = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) {
-  var oThis = this, aArgs = Array.prototype.slice.call(arguments, 2);
-  return __nativeST__(vCallback instanceof Function ? function () {
-    vCallback.apply(oThis, aArgs);
-  } : vCallback, nDelay);
-};
-
-window.setInterval = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) {
-  var oThis = this, aArgs = Array.prototype.slice.call(arguments, 2);
-  return __nativeSI__(vCallback instanceof Function ? function () {
-    vCallback.apply(oThis, aArgs);
-  } : vCallback, nDelay);
-};</pre>
-
-<div class="note"><strong>Note:</strong> These two replacements will also enable the HTML5 standard passage of arbitrary arguments to the callback functions of timers in IE. So they can be used as polyfills also. See the <a href="#Аргументы_колбэк-функции">Callback arguments</a> paragraph.</div>
-
-<p>Новая тестируемая особенность:</p>
-
-<pre class="brush: js notranslate">myArray = ["zero", "one", "two"];
-myArray.myMethod = function (sProperty) {
-    alert(arguments.length &gt; 0 ? this[sProperty] : this);
-};
-
-setTimeout(alert, 1500, "Hello world!"); // the standard use of setTimeout and setInterval is preserved, but...
-setTimeout.call(myArray, myArray.myMethod, 2000); // prints "zero,one,two" after 2 seconds
-setTimeout.call(myArray, myArray.myMethod, 2500, 2); // prints "two" after 2.5 seconds
-</pre>
-
-<p>Это не нативные решения <em>ad hoc</em> для этой проблемы.</p>
-
-<div class="note"><strong>Note:</strong> JavaScript 1.8.5 introduces the <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Function/bind" title="en-US/docs/JavaScript/Reference/Global Objects/Function/bind">Function.prototype.bind()</a></code> method, which lets you specify the value that should be used as <code>this</code> for all calls to a given function. This lets you easily bypass problems where it's unclear what this will be, depending on the context from which your function was called.</div>
-
-<h2 id="Замечания">Замечания</h2>
-
-<p>Отложенное выполнение кода можно отменить, используя <code><a href="/en-US/docs/DOM/window.clearTimeout" title="en-US/docs/DOM/window.clearTimeout">window.clearTimeout()</a></code>. Если функция должна вызываться неоднократно (например, каждые N миллисекунд), необходимо использовать <code><a href="/en-US/docs/DOM/window.setInterval" title="en-US/docs/DOM/window.setInterval">window.setInterval()</a></code>.</p>
-
-<p>Важно заметить, что функция или код не могут быть выполнены, пока не завершится поток, вызвавший <code>setTimeout()</code>.</p>
-
-<h3 id="Passing_string_literals">Passing string literals</h3>
-
-<p>Передача строки вместо функции в <code>setTimeout()</code> сопряжена с теми же опасностями, что и использование <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/eval#Don.27t_use_eval.21" title="https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/eval">eval</a>. </code></p>
-
-<pre class="brush: js notranslate">// Правильно
-window.setTimeout(function() {
-    alert("Hello World!");
-}, 500);
-
-// Неправильно
-window.setTimeout("alert(\"Hello World!\");", 500);
-
-</pre>
-
-<p>String literals are evaluated in the global context, so local symbols in the context where <code>setTimeout()</code> was called will not be available when the string is evaluated as code.</p>
-
-<h3 id="Минимальная_максимальная_задержка_и_вложенность_таймаута"><span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>Минимальная/ максимальная задержка и вложенность таймаута</span></span></span></h3>
-
-<p><a class="external" href="http://code.google.com/p/chromium/issues/detail?id=792#c10">Historically</a> browsers implement <code>setTimeout()</code> "clamping": successive <code>setTimeout()</code> calls with <code>delay</code> smaller than the "minimum delay" limit are forced to use at least the minimum delay. The minimum delay, <code>DOM_MIN_TIMEOUT_VALUE</code>, is 4 ms (stored in a preference in Firefox: <code>dom.min_timeout_value</code>), with a <code>DOM_CLAMP_TIMEOUT_NESTING_LEVEL</code> of 5ms.</p>
-
-<p>In fact, 4ms is <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/timers.html#timers">specified by the HTML5 spec</a> and is consistent across browsers released in 2010 and onward. Prior to {{ geckoRelease("5.0") }}, the minimum timeout value for nested timeouts was 10 ms.</p>
-
-<p>In addition to "clamping", the timeout can also fire later when the page (or the OS/browser itself) is busy with other tasks.</p>
-
-<p>To implement a 0 ms timeout in a modern browser, you can use {{ domxref("window.postMessage()") }} as <a class="external" href="http://dbaron.org/log/20100309-faster-timeouts">described here</a>.</p>
-
-<p>Browsers including Internet Explorer, Chrome, Safari, and Firefox store the delay as a 32-bit signed Integer internally. This causes an Integer overflow when using delays larger than 2147483647, resulting in the timeout being executed immediately.</p>
-
-<h4 id="Неактивные_вкладки">Неактивные вкладки</h4>
-
-<p>In {{ geckoRelease("5.0") }} and Chrome 11, timeouts are clamped to firing no more often than once per second (1000ms) in inactive tabs; see {{ bug(633421) }} for more information about this in Mozilla or <a class="external" href="http://crbug.com/66078">crbug.com/66078</a> for details about this in Chrome.</p>
-
-<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
-
-<p>{{Compat("api.WindowOrWorkerGlobalScope.setTimeout")}}</p>
-
-<h2 id="Specification" name="Specification">Спецификация</h2>
-
-<p>Part of DOM level 0, as specified in <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/browsers.html#timers">HTML5</a>.</p>
-
-<h2 id="See_also" name="See_also">Также интересно</h2>
-
-<ul>
- <li><a href="/en-US/docs/JavaScript/Timers" title="/en-US/docs/JavaScript/Timers">JavaScript timers</a></li>
- <li><a href="/en-US/docs/Mozilla/JavaScript_code_modules/Timer.jsm" title="/en-US/docs/Mozilla/JavaScript_code_modules/Timer.jsm">Timer.jsm</a></li>
- <li>{{domxref("window.setInterval")}}</li>
- <li>{{domxref("window.requestAnimationFrame")}}</li>
- <li><a href="/en-US/docs/JavaScript/Timers/Daemons" title="/en-US/docs/JavaScript/Timers/Daemons"><em>Daemons</em> management</a></li>
-</ul>
diff --git a/files/ru/web/api/xmlhttprequest/sending_and_receiving_binary_data/index.html b/files/ru/web/api/xmlhttprequest/sending_and_receiving_binary_data/index.html
index 454bc054db..f75bb36cd9 100644
--- a/files/ru/web/api/xmlhttprequest/sending_and_receiving_binary_data/index.html
+++ b/files/ru/web/api/xmlhttprequest/sending_and_receiving_binary_data/index.html
@@ -80,7 +80,7 @@ var abyte = filestream.charCodeAt(x) &amp; 0xff; // throw away high-order byte (
 
 <h2 id="Получение_бинарных_данных_из_различных_источников">Получение бинарных данных из различных источников</h2>
 
-<p>Библиотека <a href="https://github.com/jDataView/jBinary">jBinary</a> для работы с бинарными данными в JavaScript позволяет загрузить данные из любого источника, автоматически определяя лучший способ для этого в текущем броузере или Node.js:</p>
+<p>Библиотека <a href="https://github.com/jDataView/jBinary">jBinary</a> для работы с бинарными данными в JavaScript позволяет загрузить данные из любого источника, автоматически определяя лучший способ для этого в текущем браузере или Node.js:</p>
 
 <pre class="brush: js notranslate">jBinary.load(url).then(function (binary) {
   // здесь аргумент `binary` может использовться для обработки данных
diff --git a/files/ru/web/css/background-blend-mode/index.html b/files/ru/web/css/background-blend-mode/index.html
deleted file mode 100644
index 1bbc67d090..0000000000
--- a/files/ru/web/css/background-blend-mode/index.html
+++ /dev/null
@@ -1,98 +0,0 @@
----
-title: background-blend-mode
-slug: Web/CSS/background-blend-mode
-translation_of: Web/CSS/background-blend-mode
----
-<p>{{CSSRef()}}</p>
-
-<h2 id="Summary" name="Summary">Описание</h2>
-
-<p>Свойство <code>background-blend-mode</code> описывает то, как фоновое изображение элемента должно накладываться на фоны других элементов.</p>
-
-<p>Режимы наложения должны быть определены в том же порядке что CSS свойство {{cssxref("background-image")}}. Если длины списка режимов наложения и фоновых изображений не равны, он будет повторяться и/или сокращаться до совпадения длин.</p>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Syntax" name="Syntax">Синтаксис</h2>
-
-<pre class="twopartsyntaxbox"><code>Формальный синтаксис:  {{csssyntax("background-blend-mode")}}</code></pre>
-
-<pre>background-blend-mode: normal;               /* Одно значение */
-background-blend-mode: darken, luminosity;   /* Два значение, по одному на каждый фон */
-
-background-blend-mode: initial;
-background-blend-mode: inherit;
-background-blend-mode: unset;
-</pre>
-
-<h3 id="Values" name="Values">Значения</h3>
-
-<dl>
- <dt><code>&lt;blend-mode&gt;</code></dt>
- <dd>{{cssxref("&lt;blend-mode&gt;")}} обозначающий режим наложения, который применён. Может быть несколько значений, разделённых запятыми.</dd>
-</dl>
-
-<h2 id="Examples" name="Examples">Пример</h2>
-
-&lt;select id="select"&gt;
-    &lt;option&gt;normal&lt;/option&gt;
-    &lt;option&gt;multiply&lt;/option&gt;
-    &lt;option selected&gt;screen&lt;/option&gt;
-    &lt;option&gt;overlay&lt;/option&gt;
-    &lt;option&gt;darken&lt;/option&gt;
-    &lt;option&gt;lighten&lt;/option&gt;
-    &lt;option&gt;color-dodge&lt;/option&gt;
-    &lt;option&gt;color-burn&lt;/option&gt;
-    &lt;option&gt;hard-light&lt;/option&gt;
-    &lt;option&gt;soft-light&lt;/option&gt;
-    &lt;option&gt;difference&lt;/option&gt;
-    &lt;option&gt;exclusion&lt;/option&gt;
-    &lt;option&gt;hue&lt;/option&gt;
-    &lt;option&gt;saturation&lt;/option&gt;
-    &lt;option&gt;color&lt;/option&gt;
-    &lt;option&gt;luminosity&lt;/option&gt;
-&lt;/select&gt;</pre>
-
-<pre class="brush: css" class="hidden">#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;
-}</pre>
-
-<pre class="brush: js" class="hidden">document.getElementById("select").onchange = function(event) {
-    document.getElementById("div").style.backgroundBlendMode = document.getElementById("select").selectedOptions[0].innerHTML;
-}
-console.log(document.getElementById('div'));</pre>
-
-<p>{{ EmbedLiveSample('Examples', "330", "330") }}</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('Compositing', '#background-blend-mode', 'background-blend-mode') }}</td>
-   <td>{{ Spec2('Compositing') }}</td>
-   <td>Первоначальная спецификация</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</h2>
-
-<p>{{Compat("css.properties.background-blend-mode")}}</p>
-
-<h2 id="See_also" name="See_also">Смотрите также</h2>
-
-<ul>
- <li>{{cssxref("&lt;blend-mode&gt;")}}</li>
- <li>{{cssxref("mix-blend-mode")}}</li>
-</ul>
diff --git a/files/ru/web/css/background-blend-mode/index.md b/files/ru/web/css/background-blend-mode/index.md
new file mode 100644
index 0000000000..63112f57d6
--- /dev/null
+++ b/files/ru/web/css/background-blend-mode/index.md
@@ -0,0 +1,115 @@
+---
+title: background-blend-mode
+slug: Web/CSS/background-blend-mode
+tags:
+  - CSS
+  - CSS-свойство
+  - Композиция и наложение
+  - recipe:css-property
+translation_of: Web/CSS/background-blend-mode
+browser-compat: css.properties.background-blend-mode
+---
+{{CSSRef()}}
+
+[CSS-свойство](/ru/docs/Web/CSS) **`background-blend-mode`** описывает то, как фоновое изображение элемента должно накладываться на фоны других элементов.
+
+{{EmbedInteractiveExample("pages/css/background-blend-mode.html")}}
+
+Режимы наложения должны быть определены в том же порядке, что и CSS-свойство {{cssxref("background-image")}}. Если количество режимов наложения будет больше или меньше количества фоновых изображений, то последние режимы будут либо отброшены, либо повторены до совпадения количества соответственно.
+
+## Cинтаксис
+
+```css
+/* Одно значение */
+background-blend-mode: normal;
+
+/* Два значения, по одному на каждый фон */
+background-blend-mode: darken, luminosity;
+
+/* Глобальные значения */
+background-blend-mode: initial;
+background-blend-mode: inherit;
+background-blend-mode: revert;
+background-blend-mode: unset;
+```
+
+### Значения
+
+- {{cssxref("&lt;blend-mode&gt;")}}
+  - : Применяемый режим наложения. Можно указать несколько значений, разделённых запятыми.
+
+## Формальное определение
+
+{{cssinfo}}
+
+## Формальный синтаксис
+
+{{csssyntax}}
+
+## Примеры
+
+### Простой пример
+
+```css
+.item {
+    width: 300px;
+    height: 300px;
+    background: url('image1.png'),url('image2.png');
+    background-blend-mode: screen;
+}
+```
+
+### Попробуйте разные режимы смешивания
+
+```html hidden
+<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>
+</select>
+```
+
+```css hidden
+#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;
+}
+```
+
+```js hidden
+document.getElementById("select").onchange = function(event) {
+    document.getElementById("div").style.backgroundBlendMode = document.getElementById("select").selectedOptions[0].innerHTML;
+}
+console.log(document.getElementById('div'));
+```
+
+{{ EmbedLiveSample('Примеры', "330", "350") }}
+
+## Спецификации
+
+{{Specifications}}
+
+## Совместимость с браузерами
+
+{{Compat}}
+
+## Смотрите также
+
+- {{cssxref("&lt;blend-mode&gt;")}}
+- {{cssxref("mix-blend-mode")}}
diff --git a/files/ru/web/css/css_background_and_borders/border-image_generator/index.html b/files/ru/web/css/css_background_and_borders/border-image_generator/index.html
deleted file mode 100644
index 8e798f9292..0000000000
--- a/files/ru/web/css/css_background_and_borders/border-image_generator/index.html
+++ /dev/null
@@ -1,2628 +0,0 @@
----
-title: Генератор Border-image
-slug: Web/CSS/CSS_Background_and_Borders/Border-image_generator
-tags:
-  - CSS
-  - Tools
-translation_of: Web/CSS/CSS_Background_and_Borders/Border-image_generator
----
-<p>Этот инструмент можно использовать, чтобы генерировать CSS3 значения {{cssxref("border-image")}}.</p>
-
-<div class="hidden">
-<h2 id="Border_Image_Generator" name="Border_Image_Generator">Border Image Generator</h2>
-
-<h3 id="HTML_Content">HTML Content</h3>
-
-<pre class="brush: html">    &lt;div id="container"&gt;
-
-        &lt;div id="gallery"&gt;
-            &lt;div id="image-gallery"&gt;
-                &lt;img class="image" src="https://mdn.mozillademos.org/files/6007/border-image-1.png" data-stateID="border1"/&gt;
-                &lt;img class="image" src="https://mdn.mozillademos.org/files/6009/border-image-2.png" data-stateID="border2"/&gt;
-                &lt;img class="image" src="https://mdn.mozillademos.org/files/6011/border-image-3.png" data-stateID="border3"/&gt;
-                &lt;img class="image" src="https://mdn.mozillademos.org/files/6013/border-image-4.png" data-stateID="border4"/&gt;
-                &lt;img class="image" src="https://mdn.mozillademos.org/files/6015/border-image-5.png" data-stateID="border5"/&gt;
-                &lt;img class="image" src="https://mdn.mozillademos.org/files/6017/border-image-6.svg" data-stateID="border6"/&gt;
-            &lt;/div&gt;
-        &lt;/div&gt;
-
-        &lt;div id="load-actions" class="group section"&gt;
-            &lt;div id="toggle-gallery" data-action="hide"&gt; &lt;/div&gt;
-            &lt;div id="load-image" class="button"&gt; Upload image &lt;/div&gt;
-            &lt;input id="remote-url" type="text" placeholder="Load an image from URL"/&gt;
-            &lt;div id="load-remote" class="button"&gt; &lt;/div&gt;
-        &lt;/div&gt;
-
-        &lt;div id="general-controls" class="group section"&gt;
-            &lt;div class="name"&gt; Control Box &lt;/div&gt;
-            &lt;div class="separator"&gt;&lt;/div&gt;
-            &lt;div class="property"&gt;
-                &lt;div class="name"&gt;scale&lt;/div&gt;
-                &lt;div class="ui-input-slider" data-topic="scale"
-                    data-unit="%" data-max="300" data-sensivity="10"&gt;
-                &lt;/div&gt;
-            &lt;/div&gt;
-            &lt;div class="separator"&gt;&lt;/div&gt;
-            &lt;div class="property"&gt;
-                &lt;div class="name"&gt;draggable&lt;/div&gt;
-                &lt;div class="ui-checkbox" data-topic='drag-subject'&gt;&lt;/div&gt;
-            &lt;/div&gt;
-            &lt;div class="property right"&gt;
-                &lt;div class="name"&gt;section height&lt;/div&gt;
-                &lt;div class="ui-input-slider" data-topic="preview-area-height"
-                    data-min="400" data-max="1000"&gt;
-                &lt;/div&gt;
-            &lt;/div&gt;
-        &lt;/div&gt;
-
-        &lt;div id="preview_section" class="group section"&gt;
-            &lt;div id="subject"&gt;
-                &lt;div class="guideline" data-axis="Y" data-topic="slice-top"&gt;&lt;/div&gt;
-                &lt;div class="guideline" data-axis="X" data-topic="slice-right"&gt;&lt;/div&gt;
-                &lt;div class="guideline" data-axis="Y" data-topic="slice-bottom"&gt;&lt;/div&gt;
-                &lt;div class="guideline" data-axis="X" data-topic="slice-left"&gt;&lt;/div&gt;
-            &lt;/div&gt;
-            &lt;div id="preview"&gt; &lt;/div&gt;
-        &lt;/div&gt;
-
-        &lt;!-- controls --&gt;
-        &lt;div id="controls" class="group section"&gt;
-
-            &lt;!-- border-image-slice --&gt;
-            &lt;div id="border-slice-control" class="category"&gt;
-                &lt;div class="title"&gt; border-image-slice &lt;/div&gt;
-                &lt;div class="property"&gt;
-                    &lt;div class="name"&gt;fill&lt;/div&gt;
-                    &lt;div class="ui-checkbox" data-topic='slice-fill'&gt;&lt;/div&gt;
-                &lt;/div&gt;
-            &lt;/div&gt;
-
-            &lt;!-- border-image-width --&gt;
-            &lt;div id="border-width-control" class="category"&gt;
-                &lt;div class="title"&gt; border-image-width &lt;/div&gt;
-            &lt;/div&gt;
-
-            &lt;!-- border-image-outset --&gt;
-            &lt;div id="border-outset-control" class="category"&gt;
-                &lt;div class="title"&gt; border-image-outset &lt;/div&gt;
-            &lt;/div&gt;
-
-            &lt;!-- other-settings --&gt;
-            &lt;div id="aditional-properties" class="category"&gt;
-                &lt;div class="title"&gt; aditional-properties &lt;/div&gt;
-                &lt;div class="property"&gt;
-                    &lt;div class="name"&gt; repeat-x &lt;/div&gt;
-                    &lt;div class="ui-dropdown border-repeat" data-topic="image-repeat-X" data-selected="2"&gt;
-                        &lt;div data-value="0"&gt;repeat&lt;/div&gt;
-                        &lt;div data-value="0"&gt;stretch&lt;/div&gt;
-                        &lt;div data-value="0"&gt;round&lt;/div&gt;
-                    &lt;/div&gt;
-                &lt;/div&gt;
-                &lt;div class="property"&gt;
-                    &lt;div class="name"&gt; repeat-y &lt;/div&gt;
-                    &lt;div class="ui-dropdown border-repeat" data-topic="image-repeat-Y" data-selected="2"&gt;
-                        &lt;div data-value="1"&gt;repeat&lt;/div&gt;
-                        &lt;div data-value="1"&gt;stretch&lt;/div&gt;
-                        &lt;div data-value="1"&gt;round&lt;/div&gt;
-                    &lt;/div&gt;
-                &lt;/div&gt;
-                &lt;div class="property"&gt;
-                    &lt;div class="ui-input-slider" data-topic="font-size" data-info="em size"
-                        data-unit="px" data-value="12" data-sensivity="3"&gt;
-                    &lt;/div&gt;
-                &lt;/div&gt;
-
-                &lt;div class="property"&gt;
-                    &lt;div class="ui-input-slider" data-topic="preview-width" data-info="width"
-                         data-unit=" px" data-min="10" data-max="10000" data-sensivity="3"&gt;&lt;/div&gt;
-                &lt;/div&gt;
-                &lt;div class="property"&gt;
-                    &lt;div class="ui-input-slider" data-topic="preview-height" data-info="height"
-                        data-unit=" px" data-min="10" data-max="10000" data-sensivity="3"&gt;
-                    &lt;/div&gt;
-                &lt;/div&gt;
-            &lt;/div&gt;
-
-
-            &lt;div id="output" class="category"&gt;
-                &lt;div class="title"&gt; CSS Code &lt;/div&gt;
-                &lt;div class="css-property"&gt;
-                    &lt;span class="name"&gt; border-image-slice: &lt;/span&gt;
-                    &lt;span id="out-border-slice" class="value"&gt; &lt;/span&gt;
-                &lt;/div&gt;
-                &lt;div class="css-property"&gt;
-                    &lt;span class="name"&gt; border-image-width: &lt;/span&gt;
-                    &lt;span id="out-border-width" class="value"&gt; &lt;/span&gt;
-                &lt;/div&gt;
-                &lt;div class="css-property"&gt;
-                    &lt;span class="name"&gt; border-image-outset: &lt;/span&gt;
-                    &lt;span id="out-border-outset" class="value"&gt; &lt;/span&gt;
-                &lt;/div&gt;
-                &lt;div class="css-property"&gt;
-                    &lt;span class="name"&gt; border-image-repeat: &lt;/span&gt;
-                    &lt;span id="out-border-repeat" class="value"&gt; &lt;/span&gt;
-                &lt;/div&gt;
-                &lt;div class="css-property"&gt;
-                    &lt;span class="name"&gt; border-image-source: &lt;/span&gt;
-                    &lt;span id="out-border-source" class="value"&gt;  &lt;/span&gt;
-                &lt;/div&gt;
-            &lt;/div&gt;
-
-        &lt;/div&gt;
-    &lt;/div&gt;</pre>
-
-<h3 id="CSS_Content">CSS Content</h3>
-
-<pre class="brush: css">/*  GRID OF TWELVE
- * ========================================================================== */
-
-.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 {
-	height: 20px;
-	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
-	-moz-user-select: none;
-	user-select: none;
-}
-
-.ui-input-slider * {
-	float: left;
-	height: 100%;
-	line-height: 100%;
-}
-
-/* Input Slider */
-
-.ui-input-slider &gt; 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 DropDown
- */
-
-/* Dropdown */
-
-.ui-dropdown {
-	height: 2em;
-	width: 120px;
-	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
-	font-size: 12px;
-
-	background-image: url("https://mdn.mozillademos.org/files/6037/drop_arrow_icon.png");
-	background-position: right center;
-	background-repeat: no-repeat;
-	background-color: #359740;
-
-	position: relative;
-
-	-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;
-}
-
-.ui-dropdown:hover {
-	cursor: pointer;
-	background-color: #208B20;
-}
-
-/* Dropdown Select Button */
-
-.ui-dropdown-select {
-	height: inherit;
-	padding: 0 0.75em;
-	color: #FFF;
-	line-height: 2em;
-}
-
-/* Dropdown List */
-
-.ui-dropdown-list {
-	width: 100%;
-	height: 150px;
-	max-height: 150px;
-	margin: 0;
-	padding: 0 0.3em;
-
-	border: 3px solid #3490D2;
-	border-color: #208B20;
-	background: #666;
-	background-color: #EEF1F5;
-	color: #000;
-
-	position: absolute;
-	top: 2em;
-	left: 0;
-	z-index: 100;
-
-	overflow: hidden;
-	transition: all 0.3s;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-}
-
-.ui-dropdown-list:hover {
-	overflow: auto;
-}
-
-.ui-dropdown-list[data-hidden='true'] {
-	height: 0 !important;
-	opacity: 0;
-	visibility: hidden;
-}
-
-.ui-dropdown[data-position='left'] .ui-dropdown-list {
-	left: -100%;
-	top: 0;
-}
-
-.ui-dropdown[data-position='right'] .ui-dropdown-list {
-	left: 100%;
-	top: 0;
-}
-
-.ui-dropdown-list &gt; div {
-	width: 100%;
-	height: 1.6em;
-	margin: 0.3em 0;
-	padding: 0.3em;
-	line-height: 1em;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-}
-
-.ui-dropdown-list &gt; div:hover {
-	background: #3490D2;
-	color:#FFF;
-	border-radius: 2px;
-	cursor: pointer;
-}
-
-
-/*************************************************************************************/
-/*************************************************************************************/
-
-/*
- * UI Button
- */
-
-/* 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 &gt; input {
- 	display: none;
-}
-
-.ui-checkbox &gt; 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: 2px;
-	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 &gt; label:hover {
-	cursor: pointer;
-}
-
-.ui-checkbox &gt; input:checked + label {
-	background-image: url("https://mdn.mozillademos.org/files/5681/checked.png");
-	background-color: #379B4A;
-}
-
-/*************************************************************************************/
-/*************************************************************************************/
-
-/*
- * BORDER IMAGE GENERATOR TOOL
- */
-
-body {
-	width: 100%;
-	margin: 0 auto;
-	padding: 0 0 20px 0;
-
-	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
-
-	/*background: url("https://mdn.mozillademos.org/files/6025/grain.png");*/
-	border: 1px solid #EEE;
-
-	-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;
-}
-
-body[data-move='X'] {
-	cursor: w-resize !important;
-}
-
-body[data-move='Y'] {
-	cursor: s-resize !important;
-}
-
-#container {
-	width: 100%;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-}
-
-[data-draggable='true']:hover {
-	cursor: move;
-}
-
-[data-draggable='true']:hover &gt; * {
-	cursor: default;
-}
-
-
-
-/******************************************************************************/
-/******************************************************************************/
-
-/*
- * Border Image Picker
- */
-
-#gallery {
-	box-shadow: 0 0 3px 0 #BABABA;
-}
-
-#image-gallery {
-	width: 600px;
-	height: 100px;
-	margin: 0 auto;
-	transition: margin 0.4s;
-}
-
-#image-gallery .image {
-	height: 80px;
-	float: left;
-	margin: 10px;
-	opacity: 0.5;
-	background-color: #FFF;
-	box-shadow: 0px 0px 3px 1px #BABABA;
-}
-
-#image-gallery .image[selected="true"] {
-	box-shadow: 0px 0px 3px 1px #3BBA52;
-	opacity: 1;
-}
-
-#image-gallery .image:hover {
-	cursor: pointer;
-	box-shadow: 0px 0px 3px 1px #30ACE5;
-	opacity: 1;
-}
-
-#image-gallery[data-collapsed='true'] {
-	margin-top: -100px;
-}
-
-/* Load Menu */
-
-#load-actions {
-	margin: 10px 0;
-}
-
-#toggle-gallery {
-	width: 30px;
-	height: 25px;
-	margin: 10px;
-	color: #FFF;
-
-	background-image: url('https://mdn.mozillademos.org/files/6005/arrow-up-white.png');
-	background-repeat: no-repeat;
-	background-position: top 4px center;
-	background-color: #888888 !important;
-
-	border-radius: 2px;
-	float: left;
-}
-
-#toggle-gallery:hover {
-	cursor: pointer;
-}
-
-#toggle-gallery[data-action='show'] {
-	background-image: url('https://mdn.mozillademos.org/files/6001/arrow-down-white.png');
-	background-color: #888888 !important;
-}
-
-#toggle-gallery[data-action='hide'] {
-	background-image: url('https://mdn.mozillademos.org/files/6005/arrow-up-white.png');
-}
-
-.button {
-	width: 100px;
-	height: 25px;
-	margin: 10px;
-	color: #FFF;
-	text-align: center;
-	font-size: 12px;
-	line-height: 25px;
-	background-color: #379B4A;
-	border-radius: 2px;
-	float: left;
-}
-
-.button:hover {
-	cursor: pointer;
-	background-color: #3380C4;
-}
-
-#load-image {
-	float: left;
-}
-
-#load-remote {
-	width: 30px;
-	background-image: url('https://mdn.mozillademos.org/files/6003/arrow-right-white.png');
-	background-repeat: no-repeat;
-	background-position: center center;
-}
-
-#remote-url {
-	width: 200px;
-	height: 23px;
-	margin: 10px;
-	padding: 0 5px;
-	border: 1px solid #379B4A;
-	border-radius: 2px;
-	float: left;
-
-	transition: width 0.5s;
-}
-
-#remote-url:focus {
-	box-shadow: 0px 0px 3px -1px #379B4A; /*#68ACE8; */
-	border-color: rgba(55, 155, 74, 0.5);
-	width: 450px;
-}
-
-/*
- * Visible Area
- */
-
-#preview_section {
-	position: relative;
-	min-height: 400px;
-}
-
-/* Image Control */
-
-#subject {
-	width: 300px;
-	height: 300px;
-	background-repeat: no-repeat;
-	background-size: 100%;
-	background-color: #FFF;
-	border: 1px solid #CCC;
-
-	position: absolute;
-	z-index: 10;
-	top: 15%;
-	left: 10%;
-
-	box-shadow: 0 0 3px 0 #BABABA;
-	transition-property: width, height;
-	transition-duration: 0.1s;
-}
-
-#subject .guideline {
-	background-color: rgba(255, 255, 255, 0.7);
-	border: 1px solid rgba(0, 0, 0, 0.3);
-	position: absolute;
-}
-
-#subject .guideline:hover {
-	background-color: #F00;
-}
-
-#subject .guideline[data-active] {
-	background-color: #F00;
-	z-index: 10;
-}
-
-#subject .guideline[data-axis='X'] {
-	width: 1px;
-	height: 100%;
-	top: -1px;
-}
-
-#subject .guideline[data-axis='Y'] {
-	width: 100%;
-	height: 1px;
-	left: -1px;
-}
-
-#subject .guideline[data-axis='X']:hover {
-	cursor: w-resize;
-}
-
-#subject .guideline[data-axis='Y']:hover {
-	cursor: s-resize;
-}
-
-
-#subject .relative {
-	position: relative;
-	font-size: 12px;
-}
-
-#subject .tooltip, #subject .tooltip2 {
-	width: 40px;
-	height: 20px;
-	line-height: 20px;
-	font-size: 12px;
-	text-align: center;
-
-	position: absolute;
-	opacity: 0.5;
-	transition: opacity 0.25s;
-}
-
-#subject .tooltip {
-	background: #EEE;
-	border-radius: 2px;
-	border: 1px solid #CCC;
-}
-
-#subject .tooltip2{
-	color: #555;
-}
-
-#subject [data-active] &gt; * {
-	opacity: 1;
-}
-
-#subject .tooltip[data-info='top'] {
-	top: -10px;
-	right: -50px;
-}
-
-#subject .tooltip[data-info='right'] {
-	bottom: -30px;
-	right: -20px;
-}
-
-#subject .tooltip[data-info='bottom'] {
-	top: -10px;
-	left: -50px;
-}
-
-#subject .tooltip[data-info='left'] {
-	top: -30px;
-	right: -20px;
-}
-
-#subject .tooltip2[data-info='top'] {
-	top: -10px;
-	left: -50px;
-}
-
-#subject .tooltip2[data-info='right'] {
-	top: -30px;
-	right: -20px;
-}
-
-#subject .tooltip2[data-info='bottom'] {
-	top: -10px;
-	right: -50px;
-}
-
-#subject .tooltip2[data-info='left'] {
-	bottom: -30px;
-	right: -20px;
-}
-
-/* Preview */
-
-#preview {
-	width: 30%;
-	height: 50%;
-	background-color: #FFF;
-	text-align: center;
-	overflow: hidden;
-	position: absolute;
-	z-index: 10;
-
-	left: 60%;
-	top: 15%;
-
-	border-radius: 2px;
-	border-image-width: 20px;
-	border-image-repeat: round;
-	box-shadow: 0 0 3px 0 #BABABA;
-}
-
-#preview .resize-handle {
-	width: 10px;
-	height: 10px;
-	background: url("https://mdn.mozillademos.org/files/6027/resize.png") center center no-repeat;
-	position: absolute;
-	bottom: 0;
-	right: 0;
-}
-
-#preview .resize-handle:hover {
-	cursor: nw-resize;
-}
-
-
-/*
- * General controls MENU
- */
-
-#general-controls {
-	padding: 10px 30px;
-	background-color: #FFF;
-	opacity: 0.95;
-	color: #888;
-	/*border-radius: 2px;*/
-	box-shadow: 0 0 3px 0 #BABABA;
-}
-
-#general-controls .property {
-	width: 130px;
-	float: left;
-}
-
-#general-controls .name {
-	height: 20px;
-	margin: 0 10px 0 0;
-	line-height: 100%;
-	text-align: right;
-	float: left;
-}
-
-#general-controls .right {
-	width: 200px;
-	float: right;
-}
-
-#general-controls .ui-checkbox label {
-	height: 10px;
-}
-
-#general-controls .separator {
-	height: 40px;
-	width: 1px;
-	margin: -10px 15px;
-	background-color: #EEE;
-	float: left;
-}
-
-/*
- * Controls
- */
-
-#controls {
-	color: #444;
-	margin: 10px 0 0 0;
-}
-
-#controls .category {
-	height: 190px;
-	min-width: 260px;
-	margin: 10px;
-	padding: 10px;
-	border: 1px solid #CCC;
-	border-radius: 3px;
-	float: left;
-
-	box-shadow: 0 0 3px 0 #BABABA;
-	transition: all 0.25s;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-}
-
-@media (min-width: 880px) {
-	#controls .category {
-		width: 30%;
-		margin-left: 1.66%;
-		margin-right: 1.66%;
-	}
-}
-
-@media (max-width: 879px) {
-	#controls .category {
-		width: 37%;
-		margin-left: 6.5%;
-		margin-right: 6.5%;
-	}
-}
-
-#controls .category .title {
-	width: 100%;
-	height: 30px;
-	margin: 0 0 10px 0;
-	line-height: 25px;
-
-	text-align: center;
-	color: #AAA;
-}
-
-#controls .category:hover .title {
-	color: #777;
-}
-
-#controls .category &gt; .group {
-	border: 1px solid #CCC;
-	border-radius: 2px;
-}
-
-
-/* property */
-
-#controls .property {
-	width: 250px;
-	height: 20px;
-	margin: 5px auto;
-}
-
-#controls .property .ui-input-slider {
-	margin: 0;
-	float: left;
-}
-
-#controls .property .ui-input-slider-info {
-	width: 60px;
-}
-
-#controls .property .ui-input-slider-left {
-	transition: opacity 0.15s;
-    opacity: 0;
-}
-
-#controls .property .ui-input-slider-right {
-	transition: opacity 0.15s;
-    opacity: 0;
-}
-
-#controls .property .name {
-	width: 60px;
-	height: 20px;
-	padding: 0px 10px 0px 0px;
-	text-align: right;
-	line-height: 100%;
-	float: left;
-}
-
-#controls .property .config {
-	width: 20px;
-	height: 20px;
-	float: left;
-	background: url("https://mdn.mozillademos.org/files/6021/config.png") center center no-repeat;
-	opacity: 0.5;
-}
-
-#controls .property .config:hover {
-	cursor: pointer;
-	opacity: 1;
-}
-
-#controls .ui-input-slider:hover .ui-input-slider-right {
-    opacity: 1;
-}
-
-#controls .ui-input-slider:hover .ui-input-slider-left {
-    opacity: 1;
-}
-
-#controls .property .ui-dropdown {
-	margin: 0 10px;
-	float: left;
-}
-
-
-#controls .property .ui-checkbox {
-	margin: 0 0 0 16px;
-	float: left;
-}
-
-#controls .property .ui-checkbox label {
-	height: 0.85em;
-	width: 10px;
-}
-
-/* dropdowns */
-#controls .ui-dropdown {
-	width: 50px;
-	height: 1.7em;
-	border-radius: 2px;
-}
-
-#controls .ui-dropdown-select {
-	line-height: 1.6em;
-}
-
-#controls .ui-dropdown-list {
-	top: 20px;
-}
-
-#controls .ui-dropdown-list {
-	border-width: 1px;
-	text-align: center;
-}
-
-#controls .ui-dropdown-list:hover {
-	overflow: hidden;
-}
-
-#controls .border-repeat {
-	margin: 0 0 0 16px !important;
-	width: 80px;
-}
-
-#controls .border-repeat .ui-dropdown-list {
-	height: 6.2em;
-	border-width: 1px;
-	text-align: center;
-}
-
-/* border-image-slice */
-
-
-#border-slice-control .ui-dropdown-list {
-	height: 4.3em;
-}
-
-/* border-image-width */
-
-#border-width-control .ui-dropdown-list {
-	height: 6.2em;
-}
-
-/* border-image-outset */
-
-#border-outset-control .ui-dropdown-list {
-	height: 4.3em;
-}
-
-#aditional-properties .property {
-	width: 200px;
-}
-
-#aditional-properties .ui-input-slider &gt; input {
-	width: 80px !important;
-}
-
-/* unit settings panel */
-
-#unit-settings {
-	padding: 10px;
-	position: absolute;
-
-	background: #FFF;
-
-	font-size: 12px;
-	border-radius: 3px;
-	border: 1px solid #CCC;
-	text-align: center;
-	color: #555;
-
-	position: absolute;
-	z-index: 1000;
-
-	box-shadow: 0 0 3px 0 #BABABA;
-	transition: all 0.25s;
-}
-
-#unit-settings .title {
-	width: 100%;
-	margin: -5px auto 0;
-
-	color: #666;
-	font-size: 14px;
-	font-weight: bold;
-	line-height: 25px;
-	border-bottom: 1px solid #E5E5E5;
-}
-
-#unit-settings .ui-input-slider {
-	margin: 10px 0 0 0;
-}
-
-#unit-settings .ui-input-slider-info {
-	width: 50px;
-	line-height: 1.5em;
-}
-
-#unit-settings input {
-	font-size: 12px;
-	width: 40px !important;
-}
-
-#unit-settings .close {
-	width: 16px;
-	height: 16px;
-	background: url('https://mdn.mozillademos.org/files/6019/close.png') no-repeat center center;
-	background-size: 75%;
-
-	position: absolute;
-	top: 4px;
-	right: 4px;
-	opacity: 0.5;
-}
-
-#unit-settings .close:hover {
-	cursor: pointer;
-	opacity: 1;
-}
-
-#unit-settings[data-active='true'] {
-	opacity: 1;
-}
-
-#unit-settings[data-active='false'] {
-	opacity: 0;
-	top: -100px !important;
-}
-
-/*
- * CSS Output Code
- */
-
-#output {
-	padding: 10px;
-	border: 2px dashed #888 !important;
-	box-shadow: none !important;
-	border-radius: 3px;
-	overflow: hidden;
-
-	-moz-user-select: text;
-	-webkit-user-select: text;
-	-ms-user-select: text;
-	user-select: text;
-}
-
-
-@media (min-width: 880px) {
-	#output {
-		width: 63.33% !important;
-	}
-}
-
-@media (max-width: 879px) {
-	#output {
-		width: 87% !important;
-	}
-}
-
-
-#output .title {
-	width: 100%;
-	height: 30px;
-	margin: 0 0 10px 0;
-	line-height: 25px;
-
-	text-align: center;
-	color: #AAA;
-}
-
-#output .css-property {
-	width: 100%;
-	margin: 0;
-	color: #555;
-	font-size: 14px;
-	line-height: 18px;
-	float: left;
-}
-
-#output .css-property .name {
-	width: 30%;
-	font-weight: bold;
-	text-align: right;
-	float: left;
-}
-
-#output .css-property .value {
-	width: 65%;
-	padding: 0 2.5%;
-	word-break: break-all;
-	float: left;
-}
-
-</pre>
-
-<h3 id="JavaScript_Content">JavaScript Content</h3>
-
-<pre class="brush: js">'use strict';
-
-/**
- * UI-SlidersManager
- */
-
-var InputSliderManager = (function InputSliderManager() {
-
-	var subscribers = {};
-	var sliders = [];
-
-	var InputComponent = function InputComponent(obj) {
-		var input = document.createElement('input');
-		input.setAttribute('type', 'text');
-		input.style.width = 50 + obj.precision * 10 + 'px';
-
-		input.addEventListener('click', function(e) {
-			this.select();
-		});
-
-		input.addEventListener('change', function(e) {
-			var value = parseFloat(e.target.value);
-
-			if (isNaN(value) === true)
-				setValue(obj.topic, obj.value);
-			else
-				setValue(obj.topic, value);
-		});
-
-		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) {
-			document.removeEventListener("mousemove", sliderMotion);
-			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("mouseup", slideEnd);
-			document.addEventListener("mousemove", sliderMotion);
-		});
-
-		var slideEnd = function slideEnd(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		= parseFloat(node.getAttribute('data-min'));
-		var max		= parseFloat(node.getAttribute('data-max'));
-		var step	= parseFloat(node.getAttribute('data-step'));
-		var value	= parseFloat(node.getAttribute('data-value'));
-		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;
-		var precision = node.getAttribute('data-precision') | 0;
-
-		this.min = isNaN(min) ? 0 : min;
-		this.max = isNaN(max) ? 100 : max;
-		this.precision = precision &gt;= 0 ? precision : 0;
-		this.step = step &lt; 0 || isNaN(step) ? 1 : step.toFixed(precision);
-		this.topic = topic;
-		this.node = node;
-		this.unit = unit === null ? '' : unit;
-		this.sensivity = sensivity &gt; 0 ? sensivity : 5;
-		value = isNaN(value) ? this.min : value;
-
-		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);
-
-		this.input = input;
-		sliders[topic] = this;
-		setValue(topic, value);
-	};
-
-	InputSlider.prototype.setInputValue = function setInputValue() {
-		this.input.value = this.value.toFixed(this.precision) + this.unit;
-	};
-
-	var setValue = function setValue(topic, value, send_notify) {
-		var slider = sliders[topic];
-		if (slider === undefined)
-			return;
-
-		value = parseFloat(value.toFixed(slider.precision));
-
-		if (value &gt; slider.max) value = slider.max;
-		if (value &lt; slider.min)	value = slider.min;
-
-		slider.value = value;
-		slider.node.setAttribute('data-value', value);
-
-		slider.setInputValue();
-
-		if (send_notify === false)
-			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 setStep = function setStep(topic, value) {
-		var slider = sliders[topic];
-		if (slider === undefined)
-			return;
-
-		slider.step = parseFloat(value);
-		setValue(topic, slider.value);
-	};
-
-	var setPrecision = function setPrecision(topic, value) {
-		var slider = sliders[topic];
-		if (slider === undefined)
-			return;
-
-		value = value | 0;
-		slider.precision = value;
-
-		var step = parseFloat(slider.step.toFixed(value));
-		if (step === 0)
-			slider.step = 1 / Math.pow(10, value);
-
-		setValue(topic, slider.value);
-	};
-
-	var setSensivity = function setSensivity(topic, value) {
-		var slider = sliders[topic];
-		if (slider === undefined)
-			return;
-
-		value = value | 0;
-
-		slider.sensivity = value &gt; 0 ? value : 5;
-	};
-
-	var getNode =  function getNode(topic) {
-		return sliders[topic].node;
-	};
-
-	var getPrecision =  function getPrecision(topic) {
-		return sliders[topic].precision;
-	};
-
-	var getStep =  function getStep(topic) {
-		return sliders[topic].step;
-	};
-
-	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() {
-		if (subscribers[this.topic] === undefined)
-			return;
-		for (var i = 0; i &lt; subscribers[this.topic].length; i++)
-			subscribers[this.topic][i](this.value);
-	};
-
-	var createSlider = function createSlider(topic, label) {
-		var slider = document.createElement('div');
-		slider.className = 'ui-input-slider';
-		slider.setAttribute('data-topic', topic);
-
-		if (label !== undefined)
-			slider.setAttribute('data-info', label);
-
-		new InputSlider(slider);
-		return slider;
-	};
-
-	var init = function init() {
-		var elem = document.querySelectorAll('.ui-input-slider');
-		var size = elem.length;
-		for (var i = 0; i &lt; size; i++)
-			new InputSlider(elem[i]);
-	};
-
-	return {
-		init : init,
-		setMax : setMax,
-		setMin : setMin,
-		setUnit : setUnit,
-		setStep : setStep,
-		getNode : getNode,
-		getStep : getStep,
-		setValue : setValue,
-		subscribe : subscribe,
-		unsubscribe : unsubscribe,
-		setPrecision : setPrecision,
-		setSensivity : setSensivity,
-		getPrecision : getPrecision,
-		createSlider : createSlider,
-	};
-
-})();
-
-
-/**
- * UI-DropDown Select
- */
-
-var DropDownManager = (function DropdownManager() {
-
-	var subscribers = {};
-	var dropdowns = [];
-	var active = null;
-
-	var visbility = ["hidden", "visible"];
-
-
-	var DropDown = function DropDown(node) {
-		var topic = node.getAttribute('data-topic');
-		var label = node.getAttribute('data-label');
-		var selected = node.getAttribute('data-selected') | 0;
-
-		var select = document.createElement('div');
-		var list = document.createElement('div');
-		var uval = 0;
-		var option = null;
-		var option_value = null;
-
-		list.className = 'ui-dropdown-list';
-		select.className = 'ui-dropdown-select';
-
-		while (node.firstElementChild !== null) {
-			option = node.firstElementChild;
-			option_value = option.getAttribute('data-value');
-
-			if (option_value === null)
-				option.setAttribute('data-value', uval);
-
-			list.appendChild(node.firstElementChild);
-			uval++;
-		}
-
-		node.appendChild(select);
-		node.appendChild(list);
-
-		select.onclick = this.toggle.bind(this);
-		list.onclick = this.updateValue.bind(this);
-		document.addEventListener('click', clickOut);
-
-		this.state = 0;
-		this.time = 0;
-		this.dropmenu = list;
-		this.select = select;
-		this.toggle(false);
-		this.value = {};
-		this.topic = topic;
-
-		if (label)
-			select.textContent = label;
-		else
-			this.setNodeValue(list.children[selected]);
-
-		dropdowns[topic] = this;
-
-	};
-
-	DropDown.prototype.toggle = function toggle(state) {
-		if (typeof(state) === 'boolean')
-			this.state = state === false ? 0 : 1;
-		else
-			this.state = 1 ^ this.state;
-
-		if (active !== this) {
-			if (active)
-				active.toggle(false);
-			active = this;
-		}
-
-		if (this.state === 0)
-			this.dropmenu.setAttribute('data-hidden', 'true');
-		else
-			this.dropmenu.removeAttribute('data-hidden');
-
-	};
-
-	var clickOut = function clickOut(e) {
-		if (active.state === 0 ||
-			e.target === active.dropmenu ||
-			e.target === active.select)
-			return;
-
-		active.toggle(false);
-	};
-
-	DropDown.prototype.updateValue = function updateValue(e) {
-
-		if (Date.now() - this.time &lt; 500)
-			return;
-
-		if (e.target.className !== "ui-dropdown-list") {
-			this.setNodeValue(e.target);
-			this.toggle(false);
-		}
-
-		this.time = Date.now();
-	};
-
-	DropDown.prototype.setNodeValue = function setNodeValue(node) {
-		this.value['name'] = node.textContent;
-		this.value['value'] = node.getAttribute('data-value');
-
-		this.select.textContent = node.textContent;
-		this.select.setAttribute('data-value', this.value['value']);
-
-		notify.call(this);
-	};
-
-	var createDropDown = function createDropDown(topic, options) {
-
-		var dropdown = document.createElement('div');
-		dropdown.setAttribute('data-topic', topic);
-		dropdown.className = 'ui-dropdown';
-
-		for (var i in options) {
-			var x = document.createElement('div');
-			x.setAttribute('data-value', i);
-			x.textContent = options[i];
-			dropdown.appendChild(x);
-		}
-
-		new DropDown(dropdown);
-
-		return dropdown;
-	};
-
-	var setValue = function setValue(topic, index) {
-		if (dropdowns[topic] === undefined ||
-			index &gt;= dropdowns[topic].dropmenu.children.length)
-			return;
-
-		dropdowns[topic].setNodeValue(dropdowns[topic].dropmenu.children[index]);
-	};
-
-	var subscribe = function subscribe(topic, callback) {
-		if (subscribers[topic] === undefined)
-			subscribers[topic] = [];
-		subscribers[topic].push(callback);
-	};
-
-	var unsubscribe = function unsubscribe(topic, callback) {
-		var index = subscribers[topic].indexOf(callback);
-		subscribers[topic].splice(index, 1);
-	};
-
-	var notify = function notify() {
-		if (subscribers[this.topic] === undefined)
-			return;
-
-		for (var i in subscribers[this.topic]) {
-			subscribers[this.topic][i](this.value);
-		}
-	};
-
-	var init = function init() {
-		var elem, size;
-
-		elem = document.querySelectorAll('.ui-dropdown');
-		size = elem.length;
-		for (var i = 0; i &lt; size; i++)
-			new DropDown(elem[i]);
-
-	};
-
-	return {
-		init : init,
-		setValue : setValue,
-		subscribe : subscribe,
-		unsubscribe : unsubscribe,
-		createDropDown : createDropDown
-	};
-
-})();
-
-
-/**
- * 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) {
-		var obj = buttons[topic];
-		if (obj === undefined)
-			return;
-
-		obj.checkbox.checked = value;
-		notify.call(obj);
-	};
-
-	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() {
-		if (subscribers[this.topic] === undefined)
-			return;
-		for (var i = 0; i &lt; 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 &lt; size; i++)
-			new CheckBox(elem[i]);
-	};
-
-	return {
-		init : init,
-		setValue : setValue,
-		subscribe : subscribe,
-		unsubscribe : unsubscribe
-	};
-
-})();
-
-window.addEventListener("load", function() {
-	BorderImage.init();
-});
-
-var BorderImage = (function BorderImage() {
-
-	var getElemById = document.getElementById.bind(document);
-
-	var subject;
-	var preview;
-	var guidelines = [];
-	var positions = ['top', 'right', 'bottom', 'left'];
-
-	var makeDraggable = function makeDraggable(elem) {
-
-		var offsetTop;
-		var offsetLeft;
-
-		elem.setAttribute('data-draggable', 'true');
-
-		var dragStart = function dragStart(e) {
-			if (e.target.getAttribute('data-draggable') !== 'true' ||
-				e.target !== elem || e.button !== 0)
-				return;
-
-			offsetLeft = e.clientX - elem.offsetLeft;
-			offsetTop = e.clientY - elem.offsetTop;
-
-			document.addEventListener('mousemove', mouseDrag);
-			document.addEventListener('mouseup', dragEnd);
-		};
-
-		var dragEnd = function dragEnd(e) {
-			if (e.button !== 0)
-				return;
-
-			document.removeEventListener('mousemove', mouseDrag);
-			document.removeEventListener('mouseup', dragEnd);
-		};
-
-		var mouseDrag = function mouseDrag(e) {
-
-			elem.style.left = e.clientX - offsetLeft + 'px';
-			elem.style.top = e.clientY - offsetTop + 'px';
-		};
-
-		elem.addEventListener('mousedown', dragStart, false);
-	};
-
-	var PreviewControl = function PreviewControl() {
-
-		var dragging = false;
-		var valueX = null;
-		var valueY = null;
-
-		var dragStart = function dragStart(e) {
-			if (e.button !== 0)
-				return;
-
-			valueX = e.clientX - preview.clientWidth;
-			valueY = e.clientY - preview.clientHeight;
-			dragging = true;
-
-			document.addEventListener('mousemove', mouseDrag);
-		};
-
-		var dragEnd = function dragEnd(e) {
-			if (e.button !== 0 || dragging === false)
-				return;
-
-			document.removeEventListener('mousemove', mouseDrag);
-			dragging = false;
-		};
-
-		var mouseDrag = function mouseDrag(e) {
-			InputSliderManager.setValue('preview-width', e.clientX - valueX);
-			InputSliderManager.setValue('preview-height', e.clientY - valueY);
-		};
-
-		var init = function init() {
-
-			makeDraggable(preview);
-			makeDraggable(subject);
-
-			var handle = document.createElement('div');
-			handle.className = 'resize-handle';
-
-			handle.addEventListener('mousedown', dragStart);
-			document.addEventListener('mouseup', dragEnd);
-
-			preview.appendChild(handle);
-
-		};
-
-		return {
-			init: init
-		};
-
-	}();
-
-	var ImageReader = (function ImageReader() {
-
-		var fReader = new FileReader();
-		var browse = document.createElement('input');
-
-		var loadImage = function loadImage(e) {
-			if (browse.files.length === 0)
-				return;
-
-			var file = browse.files[0];
-
-			if (file.type.slice(0, 5) !== 'image')
-				return;
-
-			fReader.readAsDataURL(file);
-
-			return false;
-		};
-
-		fReader.onload = function(e) {
-			ImageControl.loadRemoteImage(e.target.result);
-		};
-
-		var load = function load() {
-			browse.click();
-		};
-
-		browse.setAttribute('type', 'file');
-		browse.style.display = 'none';
-		browse.onchange = loadImage;
-
-		return {
-			load: load
-		};
-
-	})();
-
-	var ImageControl = (function ImageControl() {
-
-		var scale = 0.5;
-		var imgSource = new Image();
-		var imgState = null;
-		var selected = null;
-
-
-		var topics = ['slice', 'width', 'outset'];
-		var properties = {};
-		properties['border1'] = {
-			fill			: false,
-
-			slice_values	: [27, 27, 27, 27],
-			width_values	: [20, 20, 20, 20],
-			outset_values	: [0, 0, 0, 0],
-
-			slice_units		: [0, 0, 0, 0],
-			width_units		: [0, 0, 0, 0],
-			outset_units	: [0, 0, 0, 0],
-
-			repeat			: [1, 1],
-			size			: [300, 200],
-			preview_area	: 400
-		};
-
-		properties['border2'] = {
-			fill			: false,
-
-			slice_values	: [33, 33, 33, 33],
-			width_values	: [1.5, 1.5, 1.5, 1.5],
-			outset_values	: [0, 0, 0, 0],
-
-			slice_units		: [1, 1, 1, 1],
-			width_units		: [2, 2, 2, 2],
-			outset_units	: [0, 0, 0, 0],
-
-			repeat			: [2, 2],
-			size			: [300, 200],
-			preview_area	: 400
-		};
-
-		properties['border3'] = {
-			fill			: true,
-
-			slice_values	: [15, 15, 15, 15],
-			width_values	: [10, 10, 10, 10],
-			outset_values	: [0, 0, 0, 0],
-
-			slice_units		: [0, 0, 0, 0],
-			width_units		: [0, 0, 0, 0],
-			outset_units	: [0, 0, 0, 0],
-
-			repeat			: [2, 2],
-			size			: [300, 200],
-			preview_area	: 400
-		};
-
-		properties['border4'] = {
-			fill			: false,
-
-			slice_values	: [13, 13, 13, 13],
-			width_values	: [13, 13, 13, 13],
-			outset_values	: [13, 13, 13, 13],
-
-			slice_units		: [0, 0, 0, 0],
-			width_units		: [0, 0, 0, 0],
-			outset_units	: [0, 0, 0, 0],
-
-			repeat			: [0, 0],
-			size			: [300, 200],
-			preview_area	: 400
-		};
-
-		properties['border5'] = {
-			fill			: false,
-
-			slice_values	: [0, 12, 0, 12],
-			width_values	: [0, 12, 0, 12],
-			outset_values	: [0, 0, 0, 0],
-
-			slice_units		: [0, 0, 0, 0],
-			width_units		: [0, 0, 0, 0],
-			outset_units	: [0, 0, 0, 0],
-
-			repeat			: [0, 0],
-			size			: [300, 200],
-			preview_area	: 400,
-		};
-
-		properties['border6'] = {
-			fill			: false,
-
-			slice_values	: [42, 42, 42, 42],
-			width_values	: [42, 42, 42, 42],
-			outset_values	: [0, 0, 0, 0],
-
-			slice_units		: [0, 0, 0, 0],
-			width_units		: [0, 0, 0, 0],
-			outset_units	: [0, 0, 0, 0],
-
-			repeat			: [2, 2],
-			size			: [350, 350],
-			preview_area	: 500,
-		};
-
-
-		var loadLocalImage = function loadLocalImage(source) {
-			var location = "images/" + source;
-			imgSource.src = location;
-		};
-
-		var loadRemoteImage = function loadRemoteImage(source) {
-			imgSource.src = source;
-			if (selected)
-				selected.removeAttribute('selected');
-			Tool.setOutputCSS('source', 'url("' + source + '")');
-		};
-
-		var pickImage = function pickImage(e) {
-			if (e.target.className === 'image') {
-				selected = e.target;
-				selected.setAttribute('selected', 'true');
-				loadRemoteImage(e.target.src);
-				imgState = e.target.getAttribute('data-stateID');
-			}
-		};
-
-		var loadImageState = function loadImageState(stateID) {
-			if (properties[stateID] === undefined)
-				return;
-
-			var prop = properties[stateID];
-			var topic;
-			var unit_array;
-			var value_array;
-
-			for (var i in topics) {
-				for (var j=0; j&lt;4; j++) {
-					topic = topics[i] + '-' + positions[j];
-					unit_array = topics[i] + '_units';
-					value_array = topics[i] + '_values';
-					InputSliderManager.setValue(topic, prop[value_array][j]);
-					DropDownManager.setValue(topic, prop[unit_array][j]);
-				}
-			}
-
-			ButtonManager.setValue('slice-fill', prop['fill']);
-			DropDownManager.setValue('image-repeat-X', prop['repeat'][0]);
-			DropDownManager.setValue('image-repeat-Y', prop['repeat'][1]);
-			InputSliderManager.setValue('preview-width', prop['size'][0]);
-			InputSliderManager.setValue('preview-height', prop['size'][1]);
-			InputSliderManager.setValue('preview-area-height', prop['preview_area']);
-		};
-
-		var update = function update() {
-			scale =  Math.min(300, (30000 / this.width) | 0);
-			setScale(scale);
-			InputSliderManager.setValue('scale', scale, false);
-
-			subject.style.backgroundImage = 'url("' + this.src + '")';
-			preview.style.borderImageSource = 'url("' + this.src + '")';
-
-			guidelines['slice-top'].setMax(this.height);
-			guidelines['slice-right'].setMax(this.width);
-			guidelines['slice-bottom'].setMax(this.height);
-			guidelines['slice-left'].setMax(this.width);
-
-			if (imgState)
-				loadImageState(imgState);
-		};
-
-		var setScale = function setScale(value) {
-			scale = value;
-			var w = imgSource.width * scale / 100 | 0;
-			var h = imgSource.height * scale / 100 | 0;
-			subject.style.width = w + 'px';
-			subject.style.height = h + 'px';
-
-			for (var i = 0; i &lt; positions.length; i++)
-				guidelines['slice-' + positions[i]].updateGuidelinePos();
-		};
-
-		var getScale = function getScale() {
-			return scale/100;
-		};
-
-		var toggleGallery = function toggleGallery() {
-			var gallery = getElemById('image-gallery');
-			var button  = getElemById('toggle-gallery');
-			var state = 1;
-			button.addEventListener('click', function() {
-				state = 1 ^ state;
-				if (state === 0) {
-					gallery.setAttribute('data-collapsed', 'true');
-					button.setAttribute('data-action', 'show');
-				}
-				else {
-					gallery.removeAttribute('data-collapsed');
-					button.setAttribute('data-action', 'hide');
-				}
-			});
-		};
-
-		var init = function init() {
-			var gallery = getElemById('image-gallery');
-			var browse = getElemById('load-image');
-			var remote = getElemById('remote-url');
-			var load_remote = getElemById('load-remote');
-
-			remote.addEventListener('change', function(){
-				loadRemoteImage(this.value);
-			});
-
-			load_remote.addEventListener('click', function(){
-				loadRemoteImage(remote.value);
-			});
-
-			browse.addEventListener('click', ImageReader.load);
-			gallery.addEventListener('click', pickImage);
-			imgSource.addEventListener('load', update);
-
-			InputSliderManager.subscribe('scale', setScale);
-			InputSliderManager.setValue('scale', scale);
-			imgState = 'border1';
-			loadRemoteImage('https://mdn.mozillademos.org/files/6007/border-image-1.png');
-			toggleGallery();
-		};
-
-		return {
-			init: init,
-			getScale : getScale,
-			loadRemoteImage: loadRemoteImage
-		};
-
-	})();
-
-	var GuideLine = function GuideLine(node) {
-		var topic = node.getAttribute('data-topic');
-		var axis = node.getAttribute('data-axis');
-
-		this.node = node;
-		this.topic = topic;
-		this.axis = axis;
-		this.info = topic.split('-')[1];
-
-		this.position = 0;
-		this.value = 0;
-		this.unit = 0;
-		this.max = 0;
-		this.pos = positions.indexOf(this.info);
-
-		guidelines[topic] = this;
-
-		var relative_container = document.createElement('div');
-		var tooltip = document.createElement('div');
-		var tooltip2 = document.createElement('div');
-
-		tooltip.className = 'tooltip';
-		tooltip.setAttribute('data-info', this.info);
-
-		tooltip2.className = 'tooltip2';
-		tooltip2.textContent = this.info;
-		tooltip2.setAttribute('data-info', this.info);
-
-		this.tooltip = tooltip;
-
-		relative_container.appendChild(tooltip);
-		relative_container.appendChild(tooltip2);
-		node.appendChild(relative_container);
-
-		var startX = 0;
-		var startY = 0;
-		var start = 0;
-
-		var startDrag = function startDrag(e) {
-			startX = e.clientX;
-			startY = e.clientY;
-			start = guidelines[topic].position;
-			document.body.setAttribute('data-move', axis);
-			relative_container.setAttribute('data-active', '');
-			node.setAttribute('data-active', '');
-
-			document.addEventListener('mousemove', updateGuideline);
-			document.addEventListener('mouseup', endDrag);
-		};
-
-		var endDrag = function endDrag() {
-			document.body.removeAttribute('data-move');
-			relative_container.removeAttribute('data-active');
-			node.removeAttribute('data-active');
-
-			document.removeEventListener('mousemove', updateGuideline);
-		};
-
-		var updateGuideline = function updateGuideline(e) {
-			var value;
-			if (topic === 'slice-top')
-				value = e.clientY - startY + start;
-
-			if (topic === 'slice-right')
-				value = startX - e.clientX + start;
-
-			if (topic === 'slice-bottom')
-				value = startY - e.clientY + start;
-
-			if (topic === 'slice-left')
-				value = e.clientX - startX + start;
-
-			if (this.unit === 0)
-				InputSliderManager.setValue(topic, value * 1 / ImageControl.getScale() | 0);
-			else {
-				InputSliderManager.setValue(topic, (value * 100 / (this.max * ImageControl.getScale())) | 0);
-			}
-
-		}.bind(this);
-
-		node.addEventListener("mousedown", startDrag);
-
-		InputSliderManager.subscribe(topic, this.setPosition.bind(this));
-		InputSliderManager.setValue(topic, this.position);
-	};
-
-
-	GuideLine.prototype.updateGuidelinePos = function updateGuidelinePos() {
-		if (this.unit === 0)
-			this.position = this.value * ImageControl.getScale() | 0;
-		else
-			this.position = this.value * this.max * ImageControl.getScale() / 100 | 0;
-
-		this.node.style[this.info] = this.position + 'px';
-	};
-
-	GuideLine.prototype.setPosition = function setPosition(value) {
-		this.value = value;
-		this.tooltip.textContent = value;
-		this.updateGuidelinePos();
-		Tool.setBorderSlice(this.pos, value);
-	};
-
-	GuideLine.prototype.setMax = function setMax(max) {
-		this.max = max;
-		this.updateLimit();
-	};
-
-	GuideLine.prototype.updateLimit = function updateLimit() {
-		if (this.unit === 1)
-			InputSliderManager.setMax(this.topic, 100);
-		else
-			InputSliderManager.setMax(this.topic, this.max);
-	};
-
-	GuideLine.prototype.setUnit = function setUnit(type) {
-		if (type === '%')	this.unit = 1;
-		if (type === '')	this.unit = 0;
-		this.updateLimit();
-	};
-
-	/*
-	 * Unit panel
-	 */
-	var UnitPanel = (function UnitPanel () {
-
-		var panel;
-		var title;
-		var precision;
-		var step;
-		var unit_topic = null; // settings are made for this topic
-		var step_option = [1, 0.1, 0.01];
-
-		var updatePrecision = function updatePrecision(value) {
-			InputSliderManager.setPrecision('unit-step', value);
-			InputSliderManager.setStep('unit-step', step_option[value]);
-			InputSliderManager.setMin('unit-step', step_option[value]);
-
-			if (unit_topic)
-				InputSliderManager.setPrecision(unit_topic, value);
-		};
-
-		var updateUnitSettings = function updateUnitSettings(value) {
-			if (unit_topic)
-				InputSliderManager.setStep(unit_topic, value);
-		};
-
-		var show = function show(e) {
-			var topic = e.target.getAttribute('data-topic');
-			var precision = InputSliderManager.getPrecision(topic);
-			var step = InputSliderManager.getStep(topic);
-
-			unit_topic = topic;
-			title.textContent = topic;
-
-			panel.setAttribute('data-active', 'true');
-			panel.style.top = e.target.offsetTop - 40 + 'px';
-			panel.style.left = e.target.offsetLeft + 30 + 'px';
-
-			InputSliderManager.setValue('unit-precision', precision);
-			InputSliderManager.setValue('unit-step', step);
-		};
-
-		var init = function init() {
-			panel = document.createElement('div');
-			title = document.createElement('div');
-			var close = document.createElement('div');
-
-			step = InputSliderManager.createSlider('unit-step', 'step');
-			precision = InputSliderManager.createSlider('unit-precision', 'precision');
-
-			InputSliderManager.setStep('unit-precision', 1);
-			InputSliderManager.setMax('unit-precision', 2);
-			InputSliderManager.setValue('unit-precision', 2);
-			InputSliderManager.setSensivity('unit-precision', 20);
-
-			InputSliderManager.setValue('unit-step', 1);
-			InputSliderManager.setStep('unit-step', 0.01);
-			InputSliderManager.setPrecision('unit-step', 2);
-
-			InputSliderManager.subscribe('unit-precision', updatePrecision);
-			InputSliderManager.subscribe('unit-step', updateUnitSettings);
-
-			close.addEventListener('click', function () {
-				panel.setAttribute('data-active', 'false');
-			});
-
-			title.textContent = 'Properties';
-			title.className = 'title';
-			close.className = 'close';
-			panel.id = 'unit-settings';
-			panel.setAttribute('data-active', 'false');
-			panel.appendChild(title);
-			panel.appendChild(precision);
-			panel.appendChild(step);
-			panel.appendChild(close);
-			document.body.appendChild(panel);
-		};
-
-		return {
-			init : init,
-			show : show
-		};
-
-	})();
-
-	/**
-	 * Tool Manager
-	 */
-	var Tool = (function Tool() {
-		var preview_area;
-		var dropdown_unit_options = [
-			{ '' : '--', '%' : '%'},
-			{ 'px' : 'px', '%' : '%', 'em' : 'em'},
-			{ 'px' : 'px', 'em' : 'em'},
-		];
-
-		var border_slice = [];
-		var border_width = [];
-		var border_outset = [];
-
-		var border_slice_values = [];
-		var border_width_values = [];
-		var border_outset_values = [];
-
-		var border_slice_units = ['', '', '', ''];
-		var border_width_units = ['px', 'px', 'px', 'px'];
-		var border_outset_units = ['px', 'px', 'px', 'px'];
-
-		var border_fill = false;
-		var border_repeat = ['round', 'round'];
-		var CSS_code = {
-			'source' : null,
-			'slice' : null,
-			'width' : null,
-			'outset' : null,
-			'repeat' : null
-		};
-
-		var setBorderSlice = function setBorderSlice(positionID, value) {
-			border_slice[positionID] = value + border_slice_units[positionID];
-			updateBorderSlice();
-		};
-
-		var updateBorderSlice = function updateBorderSlice() {
-			var value = border_slice.join(' ');
-			if (border_fill === true)
-				value += ' fill';
-
-			preview.style.borderImageSlice = value;
-			setOutputCSS('slice', value);
-		};
-
-		var setBorderFill = function setBorderFill(value) {
-			border_fill = value;
-			var bimgslice = border_slice.join(' ');;
-			if (value === true)
-				bimgslice += ' fill';
-
-			preview.style.borderImageSlice = bimgslice;
-		};
-
-		var updateBorderWidth = function updateBorderWidth() {
-			var value = border_width.join(' ');
-			preview.style.borderImageWidth = value;
-			setOutputCSS('width', value);
-		};
-
-		var updateBorderOutset = function updateBorderOutset() {
-			var value = border_outset.join(' ');
-			preview.style.borderImageOutset = border_outset.join(' ');
-			setOutputCSS('outset', value);
-		};
-
-		var setBorderRepeat = function setBorderRepeat(obj) {
-			border_repeat[obj.value] = obj.name;
-			var value = border_repeat.join(' ');
-			preview.style.borderImageRepeat = value;
-			setOutputCSS('repeat', value);
-		};
-
-		var setOutputCSS = function setOutputCSS(topic, value) {
-			CSS_code[topic].textContent = value + ';';
-		};
-
-		var setPreviewFontSize = function setPreviewFontSize(value) {
-			preview.style.fontSize = value + 'px';
-		};
-
-		var setPreviewWidth = function setPreviewWidth(value) {
-			preview.style.width = value + 'px';
-		};
-
-		var setPreviewHeight = function setPreviewHeight(value) {
-			preview.style.height = value + 'px';
-		};
-
-		var setPreviewAreaHeight = function setPreviewAreaHeight(value) {
-			preview_area.style.height = value + 'px';
-		};
-
-		var updateDragOption = function updateDragOption(value) {
-			if (value === true)
-				subject.setAttribute('data-draggable', 'true');
-			else
-				subject.removeAttribute('data-draggable');
-		};
-
-		var createProperty = function createProperty(topic, labelID, optionsID) {
-
-			var slider = InputSliderManager.createSlider(topic, positions[labelID]);
-			var dropdown = DropDownManager.createDropDown(topic, dropdown_unit_options[optionsID]);
-
-			InputSliderManager.setSensivity(topic, 3);
-			InputSliderManager.setPrecision(topic, 1);
-
-			var property = document.createElement('div');
-			var config = document.createElement('div');
-
-			property.className = 'property';
-			config.className = 'config';
-			config.setAttribute('data-topic', topic);
-			config.addEventListener('click', UnitPanel.show);
-
-			property.appendChild(slider);
-			property.appendChild(dropdown);
-			property.appendChild(config);
-
-			return property;
-		};
-
-		var initBorderSliceControls = function initBorderSliceControls() {
-			var container = getElemById('border-slice-control');
-
-			var listenForChanges = function listenForChanges(topic, id) {
-				InputSliderManager.subscribe(topic, function(value) {
-					border_slice_values[id] = value;
-					border_slice[id] = value + border_slice_units[id];
-					updateBorderSlice();
-				});
-
-				DropDownManager.subscribe(topic, function(obj) {
-					guidelines[topic].setUnit(obj.value);
-					border_slice_units[id] = obj.value;
-					border_slice[id] = border_slice_values[id] + obj.value;
-					updateBorderSlice();
-				});
-			};
-
-			for (var i = 0; i &lt; positions.length; i++) {
-				var topic = 'slice-' + positions[i];
-				var property = createProperty(topic, i, 0);
-				listenForChanges(topic, i);
-
-				container.appendChild(property);
-			}
-
-			container.appendChild(container.children[1]);
-
-		};
-
-		var initBorderWidthControls = function initBorderWidthControls() {
-			var container = getElemById('border-width-control');
-
-			var listenForChanges = function listenForChanges(topic, id) {
-				InputSliderManager.subscribe(topic, function(value) {
-					border_width_values[id] = value;
-					border_width[id] = value + border_width_units[id];
-					updateBorderWidth();
-				});
-
-				DropDownManager.subscribe(topic, function(obj) {
-					if (obj.value === '%')
-						InputSliderManager.setMax(topic, 100);
-					else
-						InputSliderManager.setMax(topic, 1000);
-
-					border_width_units[id] = obj.value;
-					border_width[id] = border_width_values[id] + obj.value;
-					updateBorderWidth();
-				});
-			};
-
-			for (var i = 0; i &lt; positions.length; i++) {
-				var topic = 'width-' + positions[i];
-				var property = createProperty(topic, i, 1);
-				InputSliderManager.setMax(topic, 1000);
-				listenForChanges(topic, i);
-
-				container.appendChild(property);
-			}
-		};
-
-		var initBorderOutsetControls = function initBorderOutsetControls() {
-
-			var container = getElemById('border-outset-control');
-
-			var listenForChanges = function listenForChanges(topic, id) {
-				InputSliderManager.subscribe(topic, function(value) {
-					border_outset_values[id] = value;
-					border_outset[id] = value + border_outset_units[id];
-					updateBorderOutset();
-				});
-
-				DropDownManager.subscribe(topic, function(obj) {
-					border_outset_units[id] = obj.value;
-					border_outset[id] = border_outset_values[id] + obj.value;
-					updateBorderOutset();
-				});
-			};
-
-			for (var i = 0; i &lt; positions.length; i++) {
-				var topic = 'outset-' + positions[i];
-				var property = createProperty(topic, i, 2);
-				InputSliderManager.setMax(topic, 1000);
-				listenForChanges(topic, i);
-
-				container.appendChild(property);
-			}
-		};
-
-		var init = function init() {
-
-			var gallery =
-			subject = getElemById('subject');
-			preview = getElemById("preview");
-			preview_area = getElemById("preview_section");
-
-
-			CSS_code['source'] = getElemById("out-border-source");
-			CSS_code['slice'] = getElemById("out-border-slice");
-			CSS_code['width'] = getElemById("out-border-width");
-			CSS_code['outset'] = getElemById("out-border-outset");
-			CSS_code['repeat'] = getElemById("out-border-repeat");
-
-			initBorderSliceControls();
-			initBorderWidthControls();
-			initBorderOutsetControls();
-
-			var elem = document.querySelectorAll('.guideline');
-			var size = elem.length;
-			for (var i = 0; i &lt; size; i++)
-				new GuideLine(elem[i]);
-
-			PreviewControl.init();
-
-			ButtonManager.subscribe('slice-fill',setBorderFill);
-			ButtonManager.subscribe('drag-subject', updateDragOption);
-			ButtonManager.setValue('drag-subject', false);
-
-			DropDownManager.subscribe('image-repeat-X', setBorderRepeat);
-			DropDownManager.subscribe('image-repeat-Y', setBorderRepeat);
-
-			InputSliderManager.subscribe('preview-area-height', setPreviewAreaHeight);
-			InputSliderManager.subscribe('preview-width', setPreviewWidth);
-			InputSliderManager.subscribe('preview-height', setPreviewHeight);
-			InputSliderManager.subscribe('font-size', setPreviewFontSize);
-			InputSliderManager.setValue('preview-width', 300);
-			InputSliderManager.setValue('preview-height', 200);
-		};
-
-		return {
-			init: init,
-			setOutputCSS: setOutputCSS,
-			setBorderSlice: setBorderSlice
-		};
-
-	})();
-
-	/**
-	 * Init Tool
-	 */
-	var init = function init() {
-		InputSliderManager.init();
-		DropDownManager.init();
-		ButtonManager.init();
-		UnitPanel.init();
-		Tool.init();
-		ImageControl.init();
-	};
-
-	return {
-		init : init
-	};
-
-})();
-
-</pre>
-</div>
-
-<p>{{ EmbedLiveSample('Border_Image_Generator', '100%', '1270px') }}</p>
-
-<p> </p>
diff --git a/files/ru/web/css/css_background_and_borders/border-radius_generator/index.html b/files/ru/web/css/css_background_and_borders/border-radius_generator/index.html
deleted file mode 100644
index d8aafac807..0000000000
--- a/files/ru/web/css/css_background_and_borders/border-radius_generator/index.html
+++ /dev/null
@@ -1,1600 +0,0 @@
----
-title: Border-radius генератор
-slug: Web/CSS/CSS_Background_and_Borders/Border-radius_generator
-translation_of: Web/CSS/CSS_Background_and_Borders/Border-radius_generator
-original_slug: Web/CSS/CSS_Background_and_Borders/Border-radius_генератор
----
-<p>С помощью этого инструмента вы можете создать CSS3 {{cssxref("border-radius")}} эффекты.</p>
-
-<div class="hidden">
-<h2 id="border-radius-generator" name="border-radius-generator">border-radius</h2>
-
-<h3 id="HTML_Content">HTML Content</h3>
-
-<pre class="brush: html">&lt;div id="container"&gt;
-    &lt;div class="group section"&gt;
-        &lt;div id="preview" class="col span_12"&gt;
-            &lt;div id="subject"&gt;
-                &lt;div id="top-left" class="radius-container"
-                    data-X="left" data-Y="top"&gt;
-                &lt;/div&gt;
-                &lt;div id="top-right" class="radius-container"
-                    data-X="right" data-Y="top"&gt;
-                &lt;/div&gt;
-                &lt;div id="bottom-right" class="radius-container"
-                    data-X="right" data-Y="bottom"&gt;
-                &lt;/div&gt;
-                &lt;div id="bottom-left" class="radius-container"
-                    data-X="left" data-Y="bottom"&gt;
-                &lt;/div&gt;
-
-                &lt;div id="radius-ui-sliders"&gt;
-                    &lt;div id="tlr" class="ui-input-slider" data-topic="top-left"
-                         data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
-
-                    &lt;div id="tlw" class="ui-input-slider" data-topic="top-left-w"
-                         data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
-
-                    &lt;div id="tlh" class="ui-input-slider" data-topic="top-left-h"
-                        data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
-
-                    &lt;div id="trr" class="ui-input-slider" data-topic="top-right"
-                         data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
-
-                    &lt;div id="trw" class="ui-input-slider" data-topic="top-right-w"
-                         data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
-
-                    &lt;div id="trh" class="ui-input-slider" data-topic="top-right-h"
-                        data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
-
-                    &lt;div id="brr" class="ui-input-slider" data-topic="bottom-right"
-                         data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
-
-                    &lt;div id="brw" class="ui-input-slider" data-topic="bottom-right-w"
-                         data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
-
-                    &lt;div id="brh" class="ui-input-slider" data-topic="bottom-right-h"
-                        data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
-
-                    &lt;div id="blr" class="ui-input-slider" data-topic="bottom-left"
-                         data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
-
-                    &lt;div id="blw" class="ui-input-slider" data-topic="bottom-left-w"
-                         data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
-
-                    &lt;div id="blh" class="ui-input-slider" data-topic="bottom-left-h"
-                        data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
-                &lt;/div&gt;
-            &lt;/div&gt;
-        &lt;/div&gt;
-    &lt;/div&gt;
-    &lt;div id="controls" class="group section"&gt;
-
-        &lt;div class="group section"&gt;
-            &lt;div id="dimensions"&gt;
-                &lt;div class="ui-input-slider" data-topic="width" data-info="width"
-                     data-unit=" px" data-min="150" data-max="700" data-sensivity="1"&gt;&lt;/div&gt;
-
-                &lt;div class="ui-input-slider" data-topic="height" data-info="height"
-                    data-unit=" px" data-min="75" data-max="350" data-sensivity="1"&gt;&lt;/div&gt;
-            &lt;/div&gt;
-
-            &lt;div id="output"&gt;&lt;/div&gt;
-        &lt;/div&gt;
-
-        &lt;div class="group section"&gt;
-            &lt;div id="radius-lock"&gt;
-                &lt;div class="info"&gt; rounded corner &lt;/div&gt;
-                &lt;div class="ui-checkbox" data-topic='top-left'&gt;&lt;/div&gt;
-                &lt;div class="ui-checkbox" data-topic='top-right'&gt;&lt;/div&gt;
-                &lt;div class="ui-checkbox" data-topic='bottom-right'&gt;&lt;/div&gt;
-                &lt;div class="ui-checkbox" data-topic='bottom-left'&gt;&lt;/div&gt;
-            &lt;/div&gt;
-
-            &lt;div id="unit-selection"&gt;
-                &lt;div class="info"&gt; select border units &lt;/div&gt;
-            &lt;/div&gt;
-        &lt;/div&gt;
-
-    &lt;/div&gt;
-&lt;/div&gt;
-</pre>
-
-<h3 id="CSS_Content">CSS Content</h3>
-
-<pre class="brush: css">/*  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 &gt; 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 &gt; input {
- 	display: none;
-}
-
-.ui-checkbox &gt; 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 &gt; label:hover {
-	cursor: pointer;
-}
-
-.ui-checkbox &gt; 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 &gt; 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;
-}
-
-
-</pre>
-
-<h3 id="JavaScript_Content">JavaScript Content</h3>
-
-<pre class="brush: js"><code class="language-js">'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 &gt; 0 ? max : 100;
-		this.step = step === 0 ? 1 : step;
-		this.topic = topic;
-		this.node = node;
-		this.unit = unit;
-		this.sensivity = sensivity &gt; 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 &gt; slider.max) value = slider.max;
-		if (value &lt; slider.min)	value = slider.min;
-
-		slider.value = value;
-		slider.node.setAttribute('data-value', value);
-
-		if (send_notify !== undefined &amp;&amp; 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 &lt; 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 &lt; 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 &lt; 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' &amp;&amp; y == 'top') handle.className = 'handle handle-top-left'
-		if (x === 'right' &amp;&amp; y == 'top') handle.className = 'handle handle-top-right';
-		if (x === 'right' &amp;&amp; y == 'bottom') handle.className = 'handle handle-bottom-right';
-		if (x === 'left' &amp;&amp; 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 &amp;&amp; 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 &lt; 0)	this.size = 0;
-			if (this.size &gt; this.maxR)	this.size = this.maxR;
-			this.updateRadius();
-			this.updateBorderRadius();
-			return;
-		}
-
-		if (deltaX) {
-			this.width += this.resizeX * deltaX;
-			if (this.width &lt; 0)	this.width = 0;
-			if (this.width &gt; this.maxW)	this.width = this.maxW;
-			this.updateWidth();
-		}
-
-		if (deltaY) {
-			this.height += this.resizeY * deltaY;
-			if (this.height &lt; 0) this.height = 0;
-			if (this.height &gt; 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 &lt; 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 &lt; 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 &lt; 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
-	}
-
-})();
-
-
-</code></pre>
-</div>
-
-<p>{{ EmbedLiveSample('border-radius-generator', '100%', '800px', '') }}</p>
-
-<p> </p>
diff --git a/files/ru/web/css/css_background_and_borders/box-shadow_generator/index.html b/files/ru/web/css/css_background_and_borders/box-shadow_generator/index.html
deleted file mode 100644
index 4530073ad2..0000000000
--- a/files/ru/web/css/css_background_and_borders/box-shadow_generator/index.html
+++ /dev/null
@@ -1,2885 +0,0 @@
----
-title: Генератор теней
-slug: Web/CSS/CSS_Background_and_Borders/Box-shadow_generator
-tags:
-  - CSS3
-  - Тень
-  - инструменты
-translation_of: Web/CSS/CSS_Background_and_Borders/Box-shadow_generator
-original_slug: Web/CSS/CSS_Box_Model/Box-shadow_generator
----
-<p>Этот инструмент позволяет вам создавать CSS {{cssxref("box-shadow")}} эффекты, добавлять тени вашим элементам.</p>
-
-<div class="hidden">
-<h2 id="box-shadow_generator" name="box-shadow_generator">Генератор box-shadow generator</h2>
-
-<h3 id="HTML_Content">HTML Content</h3>
-
-<pre class="brush: html">&lt;div id="container"&gt;
-    &lt;div class="group section"&gt;
-        &lt;div id="layer_manager"&gt;
-            &lt;div class="group section"&gt;
-                &lt;div class="button" data-type="add"&gt; &lt;/div&gt;
-                &lt;div class="button" data-type="move-up"&gt; &lt;/div&gt;
-                &lt;div class="button" data-type="move-down"&gt; &lt;/div&gt;
-            &lt;/div&gt;
-            &lt;div id="stack_container"&gt;&lt;/div&gt;
-        &lt;/div&gt;
-
-        &lt;div id="preview_zone"&gt;
-            &lt;div id="layer_menu" class="col span_12"&gt;
-                &lt;div class="button" id="element" data-type="subject" data-title="element"&gt; элементы &lt;/div&gt;
-                &lt;div class="button" id="before" data-type="subject" data-title=":before"&gt;
-                    :before
-                    &lt;span class="delete" data-type="disable"&gt;&lt;/span&gt;
-                &lt;/div&gt;
-                &lt;div class="button" id="after" data-type="subject" data-title=":after"&gt;
-                    :after
-                    &lt;span class="delete" data-type="disable"&gt;&lt;/span&gt;
-                &lt;/div&gt;
-                &lt;div class="ui-checkbox" data-topic='before' data-label=":before"&gt;&lt;/div&gt;
-                &lt;div class="ui-checkbox" data-topic='after' data-label=":after"&gt;&lt;/div&gt;
-            &lt;/div&gt;
-
-            &lt;div id="preview"&gt;
-                &lt;div id="obj-element"&gt;
-                    &lt;div class="content"&gt; &lt;/div&gt;
-                    &lt;div id="obj-before"&gt; &lt;/div&gt;
-                    &lt;div id="obj-after"&gt; &lt;/div&gt;
-                &lt;/div&gt;
-            &lt;/div&gt;
-        &lt;/div&gt;
-    &lt;/div&gt;
-
-    &lt;div id="controls" class="group section"&gt;
-        &lt;div class="wrap-left"&gt;
-            &lt;div class="colorpicker category"&gt;
-                &lt;div class="title"&gt; &lt;/div&gt;
-                &lt;div id="colorpicker" class="group"&gt;
-                    &lt;div id="gradient" class="gradient"&gt;
-                        &lt;div id="gradient_picker"&gt; &lt;/div&gt;
-                    &lt;/div&gt;
-                    &lt;div id="hue" data-topic="hue" class="hue"&gt;
-                        &lt;div id="hue_selector"&gt; &lt;/div&gt;
-                    &lt;/div&gt;
-                    &lt;div class="info"&gt;
-                        &lt;div class="input" data-topic="hue" data-title='H:' data-action="HSV"&gt;&lt;/div&gt;
-                        &lt;div class="input" data-topic="saturation" data-title='S:' data-action="HSV"&gt;&lt;/div&gt;
-                        &lt;div class="input" data-topic="value" data-title='V:' data-action="HSV"&gt;&lt;/div&gt;
-                    &lt;/div&gt;
-                    &lt;div class="alpha"&gt;
-                        &lt;div id="alpha" data-topic="alpha"&gt;
-                            &lt;div id="alpha_selector"&gt; &lt;/div&gt;
-                        &lt;/div&gt;
-                    &lt;/div&gt;
-                    &lt;div class="info"&gt;
-                        &lt;div class="input" data-topic="r" data-title='R:' data-action="RGB"&gt;&lt;/div&gt;
-                        &lt;div class="input" data-topic="g" data-title='G:' data-action="RGB"&gt;&lt;/div&gt;
-                        &lt;div class="input" data-topic="b" data-title='B:' data-action="RGB"&gt;&lt;/div&gt;
-                    &lt;/div&gt;
-                    &lt;div class="preview block"&gt;
-                        &lt;div id="output_color"&gt; &lt;/div&gt;
-                    &lt;/div&gt;
-                    &lt;div class="block info"&gt;
-                        &lt;div class="input" data-topic="a" data-title='alpha:' data-action="alpha"&gt;&lt;/div&gt;
-                        &lt;div class="input" data-topic="hexa" data-title='' data-action="hexa"&gt;&lt;/div&gt;
-                    &lt;/div&gt;
-                &lt;/div&gt;
-            &lt;/div&gt;
-        &lt;/div&gt;
-
-        &lt;div class="wrap-right"&gt;
-
-            &lt;div id="shadow_properties" class="category"&gt;
-                &lt;div class="title"&gt; Shadow properties &lt;/div&gt;
-                &lt;div class="group"&gt;
-                    &lt;div class="group property"&gt;
-                        &lt;div class="ui-slider-name"&gt; inset &lt;/div&gt;
-                        &lt;div class="ui-checkbox" data-topic='inset'&gt;&lt;/div&gt;
-                    &lt;/div&gt;
-                    &lt;div class="slidergroup"&gt;
-                        &lt;div class="ui-slider-name"&gt; Position x &lt;/div&gt;
-                        &lt;div class="ui-slider-btn-set" data-topic="posX" data-type="sub"&gt;&lt;/div&gt;
-                        &lt;div class="ui-slider" data-topic="posX"
-                            data-min="-500" data-max="500" data-step="1"&gt; &lt;/div&gt;
-                        &lt;div class="ui-slider-btn-set" data-topic="posX" data-type="add"&gt;&lt;/div&gt;
-                        &lt;div class="ui-slider-input" data-topic="posX" data-unit="px"&gt;&lt;/div&gt;
-                    &lt;/div&gt;
-                    &lt;div class="slidergroup"&gt;
-                        &lt;div class="ui-slider-name"&gt; Position y &lt;/div&gt;
-                        &lt;div class="ui-slider-btn-set" data-topic="posY" data-type="sub"&gt;&lt;/div&gt;
-                        &lt;div class="ui-slider" data-topic="posY"
-                            data-min="-500" data-max="500" data-step="1"&gt; &lt;/div&gt;
-                        &lt;div class="ui-slider-btn-set" data-topic="posY" data-type="add"&gt;&lt;/div&gt;
-                        &lt;div class="ui-slider-input" data-topic="posY" data-unit="px"&gt;&lt;/div&gt;
-                    &lt;/div&gt;
-                    &lt;div class="slidergroup"&gt;
-                        &lt;div class="ui-slider-name"&gt; Blur &lt;/div&gt;
-                        &lt;div class="ui-slider-btn-set" data-topic="blur" data-type="sub"&gt;&lt;/div&gt;
-                        &lt;div class="ui-slider" data-topic="blur"
-                            data-min="0" data-max="200" data-step="1"&gt; &lt;/div&gt;
-                        &lt;div class="ui-slider-btn-set" data-topic="blur" data-type="add"&gt;&lt;/div&gt;
-                        &lt;div class="ui-slider-input" data-topic="blur" data-unit="px"&gt;&lt;/div&gt;
-                    &lt;/div&gt;
-                    &lt;div class="slidergroup"&gt;
-                        &lt;div class="ui-slider-name"&gt; Spread &lt;/div&gt;
-                        &lt;div class="ui-slider-btn-set" data-topic="spread" data-type="sub"&gt;&lt;/div&gt;
-                        &lt;div class="ui-slider" data-topic="spread"
-                            data-min="-100"    data-max="100" data-step="1" data-value="50"&gt;
-                        &lt;/div&gt;
-                        &lt;div class="ui-slider-btn-set" data-topic="spread" data-type="add"&gt;&lt;/div&gt;
-                        &lt;div class="ui-slider-input" data-topic="spread" data-unit="px"&gt;&lt;/div&gt;
-                    &lt;/div&gt;
-                &lt;/div&gt;
-            &lt;/div&gt;
-
-            &lt;div id="element_properties" class="category"&gt;
-                &lt;div class="title"&gt; Параметры элемента&lt;/div&gt;
-                &lt;div class="group"&gt;
-                    &lt;div class="group property"&gt;
-                        &lt;div class="ui-slider-name"&gt; border &lt;/div&gt;
-                        &lt;div class="ui-checkbox" data-topic='border-state' data-state="true"&gt;&lt;/div&gt;
-                    &lt;/div&gt;
-                    &lt;div id="z-index" class="slidergroup"&gt;
-                        &lt;div class="ui-slider-name"&gt; z-index &lt;/div&gt;
-                        &lt;div class="ui-slider-btn-set" data-topic="z-index" data-type="sub"&gt;&lt;/div&gt;
-                        &lt;div class="ui-slider" data-topic="z-index"
-                            data-min="-10" data-max="10" data-step="1"&gt;&lt;/div&gt;
-                        &lt;div class="ui-slider-btn-set" data-topic="z-index" data-type="add"&gt;&lt;/div&gt;
-                        &lt;div class="ui-slider-input" data-topic="z-index"&gt;&lt;/div&gt;
-                    &lt;/div&gt;
-                    &lt;div class="slidergroup"&gt;
-                        &lt;div class="ui-slider-name"&gt; top &lt;/div&gt;
-                        &lt;div class="ui-slider-btn-set" data-topic="top" data-type="sub"&gt;&lt;/div&gt;
-                        &lt;div class="ui-slider" data-topic="top"
-                            data-min="-500" data-max="500" data-step="1"&gt; &lt;/div&gt;
-                        &lt;div class="ui-slider-btn-set" data-topic="top" data-type="add"&gt;&lt;/div&gt;
-                        &lt;div class="ui-slider-input" data-topic="top" data-unit="px"&gt;&lt;/div&gt;
-                    &lt;/div&gt;
-                    &lt;div class="slidergroup"&gt;
-                        &lt;div class="ui-slider-name"&gt; left &lt;/div&gt;
-                        &lt;div class="ui-slider-btn-set" data-topic="left" data-type="sub"&gt;&lt;/div&gt;
-                        &lt;div class="ui-slider" data-topic="left"
-                            data-min="-300" data-max="700" data-step="1"&gt; &lt;/div&gt;
-                        &lt;div class="ui-slider-btn-set" data-topic="left" data-type="add"&gt;&lt;/div&gt;
-                        &lt;div class="ui-slider-input" data-topic="left" data-unit="px"&gt;&lt;/div&gt;
-                    &lt;/div&gt;
-                    &lt;div id="transform_rotate" class="slidergroup"&gt;
-                        &lt;div class="ui-slider-name"&gt; Rotate &lt;/div&gt;
-                        &lt;div class="ui-slider-btn-set" data-topic="rotate" data-type="sub"&gt;&lt;/div&gt;
-                        &lt;div class="ui-slider" data-topic="rotate"
-                            data-min="-360" data-max="360" data-step="1" data-value="0"&gt;
-                        &lt;/div&gt;
-                        &lt;div class="ui-slider-btn-set" data-topic="rotate" data-type="add"&gt;&lt;/div&gt;
-                        &lt;div class="ui-slider-input" data-topic="rotate" data-unit="deg"&gt;&lt;/div&gt;
-                    &lt;/div&gt;
-                    &lt;div class="slidergroup"&gt;
-                        &lt;div class="ui-slider-name"&gt; Width &lt;/div&gt;
-                        &lt;div class="ui-slider-btn-set" data-topic="width" data-type="sub"&gt;&lt;/div&gt;
-                        &lt;div class="ui-slider" data-topic="width"
-                            data-min="0" data-max="1000" data-step="1" data-value="200"&gt;
-                        &lt;/div&gt;
-                        &lt;div class="ui-slider-btn-set" data-topic="width" data-type="add"&gt;&lt;/div&gt;
-                        &lt;div class="ui-slider-input" data-topic="width"  data-unit="px"&gt;&lt;/div&gt;
-                    &lt;/div&gt;
-                    &lt;div class="slidergroup"&gt;
-                        &lt;div class="ui-slider-name"&gt; Height &lt;/div&gt;
-                        &lt;div class="ui-slider-btn-set" data-topic="height" data-type="sub"&gt;&lt;/div&gt;
-                        &lt;div class="ui-slider" data-topic="height"
-                            data-min="0" data-max="400" data-step="1" data-value="200"&gt;
-                        &lt;/div&gt;
-                        &lt;div class="ui-slider-btn-set" data-topic="height" data-type="add"&gt;&lt;/div&gt;
-                        &lt;div class="ui-slider-input" data-topic="height" data-unit="px"&gt;&lt;/div&gt;
-                    &lt;/div&gt;
-                &lt;/div&gt;
-            &lt;/div&gt;
-
-            &lt;div id="output" class="category"&gt;
-                &lt;div id="menu" class="menu"&gt;&lt;/div&gt;
-                &lt;div class="title"&gt;    CSS-код &lt;/div&gt;
-                &lt;div class="group" style="border-top-left-radius: 0;"&gt;
-                    &lt;div class="output" data-topic="element" data-name="element"
-                        data-prop="width height background-color position=[relative] box-shadow"&gt;
-                    &lt;/div&gt;
-                    &lt;div class="output" data-topic="before" data-name="element:before"
-                        data-prop="content=[&amp;quot;&amp;quot;] position=[absolute] width height top left z-index background-color box-shadow transform -webkit-transform -ms-transform"&gt;
-                    &lt;/div&gt;
-                    &lt;div class="output" data-topic="after" data-name="element:after"
-                        data-prop="content=[&amp;quot;&amp;quot;] position=[absolute] width height top left z-index background-color box-shadow transform -webkit-transform -ms-transform"&gt;
-                    &lt;/div&gt;
-                &lt;/div&gt;
-            &lt;/div&gt;
-        &lt;/div&gt;
-    &lt;/div&gt;
-&lt;/div&gt;
-</pre>
-
-<h3 id="CSS_Content">CSS Content</h3>
-
-<pre class="brush: css">/*  GRID OF TWELVE
- * ========================================================================== */
-
-.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 Slider
- */
-
-.slidergroup {
-	height: 20px;
-	margin: 10px 0;
-	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
-	-moz-user-select: none;
-	user-select: none;
-}
-
-.slidergroup * {
-	float: left;
-	height: 100%;
-	line-height: 100%;
-}
-
-/* Slider */
-
-.ui-slider {
-	height: 10px;
-	width: 200px;
-	margin: 4px 10px;
-	display: block;
-	border: 1px solid #999;
-	border-radius: 3px;
-	background: #EEE;
-}
-
-.ui-slider:hover {
-	cursor: pointer;
-}
-
-.ui-slider-name {
-	width: 90px;
-	padding: 0 10px 0 0;
-	text-align: right;
-	text-transform: lowercase;
-}
-
-.ui-slider-pointer {
-	width: 13px;
-	height: 13px;
-	background-color: #EEE;
-	border: 1px solid #2C9FC9;
-	border-radius: 3px;
-	position: relative;
-	top: -3px;
-	left: 0%;
-}
-
-.ui-slider-btn-set {
-	width: 25px;
-	background-color: #2C9FC9;
-	border-radius: 3px;
-	color: #FFF;
-	font-weight: bold;
-	text-align: center;
-}
-
-.ui-slider-btn-set:hover {
-	background-color: #379B4A;
-	cursor: pointer;
-}
-
-.ui-slider-input &gt; input {
-	margin: 0 10px;
-	padding: 0;
-	width: 50px;
-	text-align: center;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-}
-
-/*
- * UI Button
- */
-
-/* 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 &gt; input {
- 	display: none;
-}
-
-.ui-checkbox &gt; 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 &gt; label:hover {
-	cursor: pointer;
-}
-
-.ui-checkbox &gt; input:checked + label {
-	background-image: url("https://mdn.mozillademos.org/files/5681/checked.png");
-	background-color: #379B4A;
-}
-
-/*
- * BOX SHADOW GENERATOR TOOL
- */
-
-body {
-	max-width: 1000px;
-	height: 800px;
-	margin: 20px auto 0;
-
-	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;
-}
-
-#container {
-	width: 100%;
-	padding: 2px;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-}
-
-
-/* container with shadows stacks */
-#stack_container {
-	height: 400px;
-	overflow: hidden;
-	position: relative;
-	border: 1px solid #CCC;
-	border-radius: 3px;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-}
-
-#stack_container .container {
-	height: 100%;
-	width: 100%;
-	position: absolute;
-	left: 100%;
-	transition-property: left;
-	transition-duration: 0.5s;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-}
-
-
-#stack_container .title {
-	text-align: center;
-	font-weight: bold;
-	line-height: 2em;
-	border-bottom: 1px solid #43A6E1;
-	color: #666;
-}
-
-
-/*
- * Stack of Layers for shadow
- */
-
-#layer_manager {
-	width: 17%;
-	background-color: #FEFEFE;
-	margin: 0 1% 0 0;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-	float: left;
-}
-
-
-#layer_manager .button {
-	width: 30%;
-	height: 25px;
-	margin:0 0 10px;
-	color: #333;
-	background-color: #EEE;
-	text-align: center;
-	font-size: 0.75em;
-	line-height: 1.5em;
-	border: 1px solid #CCC;
-	border-radius: 3px;
-
-	display: block;
-	background-position: center center;
-	background-repeat: no-repeat;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-	float: left;
-}
-
-#layer_manager .button:hover {
-	background-color: #3380C4;
-	border: 1px solid #3380C4;
-	cursor: pointer;
-}
-
-#layer_manager [data-type='add'] {
-	background-image: url("https://mdn.mozillademos.org/files/5685/add-black.png");
-}
-
-#layer_manager [data-type='add']:hover {
-	background-image: url("https://mdn.mozillademos.org/files/5687/add-white.png");
-}
-
-#layer_manager [data-type='move-up'] {
-	background-image: url("https://mdn.mozillademos.org/files/5697/up-black.png");
-	margin-left: 5%;
-	margin-right: 5%;
-}
-
-#layer_manager [data-type='move-up']:hover {
-	background-image: url("https://mdn.mozillademos.org/files/5709/up-white.png");
-}
-
-#layer_manager [data-type='move-down'] {
-	background-image: url("https://mdn.mozillademos.org/files/5693/down-black.png");
-}
-
-#layer_manager [data-type='move-down']:hover {
-	background-image: url("https://mdn.mozillademos.org/files/5695/down-white.png");
-}
-
-/* shadows classes */
-
-#layer_manager .node {
-	width: 100%;
-	margin: 5px 0;
-	padding: 5px;
-	text-align: center;
-	background-color: #EEE;
-	border: 1px solid #DDD;
-	font-size: 0.75em;
-	line-height: 1.5em;
-	color: #333;
-	border-radius: 3px;
-
-	position: relative;
-	display: block;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-}
-
-#layer_manager .node:hover {
-	color: #FFF;
-	background-color: #3380C4;
-	cursor: pointer;
-}
-
-/* active element styling */
-
-#layer_manager [data-active='layer'] {
-	color: #FFF;
-	border: none;
-	background-color: #379B4A;
-}
-
-#layer_manager [data-active='subject'] {
-	color: #FFF;
-	background-color: #467FC9;
-}
-
-/* delete button */
-
-#layer_manager .delete {
-	width: 1.5em;
-	height: 100%;
-	float: right;
-	border-radius: 3px;
-	background-image: url("https://mdn.mozillademos.org/files/5689/delete-white.png");
-	background-position: center center;
-	background-repeat: no-repeat;
-	position: absolute;
-	top: 0;
-	right: 10px;
-	display: none;
-}
-
-#layer_manager .delete:hover {
-	background-image: url("https://mdn.mozillademos.org/files/5691/delete-yellow.png");
-}
-
-#layer_manager .node:hover .delete {
-	display: block;
-}
-
-
-#layer_manager .stack {
-	padding: 0 5px;
-	max-height: 90%;
-	overflow: auto;
-	overflow-x: hidden;
-}
-
-
-/*
- * Layer Menu
- */
-
-#layer_menu {
-	margin: 0 0 10px 0;
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-}
-
-#layer_menu .button {
-	width: 100px;
-	margin: 0 5px 0 0;
-	padding: 2.5px;
-	color: #333;
-	background-color: #EEE;
-	border: 1px solid #CCC;
-	border-radius: 3px;
-	text-align: center;
-	font-size: 0.75em;
-	line-height: 1.5em;
-
-	position: relative;
-	display: block;
-	float: left;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-}
-
-#layer_menu .button:hover {
-	color: #FFF;
-	background-color: #3380C4;
-	border: 1px solid #3380C4;
-	cursor: pointer;
-}
-
-#layer_menu .delete {
-	width: 1.5em;
-	height: 100%;
-	float: right;
-	border-radius: 3px;
-	background-image: url("https://mdn.mozillademos.org/files/5689/delete-white.png");
-	background-position: center center;
-	background-repeat: no-repeat;
-	position: absolute;
-	top: 0;
-	right: 5px;
-	display: none;
-}
-
-#layer_menu .delete:hover {
-	background-image: url("https://mdn.mozillademos.org/files/5691/delete-yellow.png");
-}
-
-#layer_menu .button:hover .delete {
-	display: block;
-}
-
-
-/*
- * active element styling
- */
-
-#layer_menu [data-active='subject'] {
-	color: #FFF;
-	background-color: #379B4A;
-	border: 1px solid #379B4A;
-}
-
-
-/* Checkbox */
-
-#layer_menu .ui-checkbox &gt; label {
-	height: 15px;
-	line-height: 17px;
-	font-weight: normal;
-	width: 46px;
-	margin: 0 5px 0 0;
-}
-
-#layer_menu .ui-checkbox &gt; input:checked + label {
-	display: none;
-}
-
-
-/******************************************************************************/
-/******************************************************************************/
-/*
- * Preview Area
- */
-
-#preview_zone {
-	width: 82%;
-	float: left;
-
-}
-
-
-#preview {
-	width: 100%;
-	height: 400px;
-	border: 1px solid #CCC;
-	border-radius: 3px;
-	text-align: center;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-	cursor: move;
-	float: left;
-}
-
-#preview .content {
-	width: 100%;
-	height: 100%;
-	display: block;
-}
-
-#obj-element {
-	width: 300px;
-	height: 100px;
-	border: 1px solid #CCC;
-	background: #FFF;
-	position: relative;
-}
-
-
-#obj-before {
-	height: 100%;
-	width: 100%;
-	background: #999;
-	border: 1px solid #CCC;
-	text-align: left;
-	display : block;
-	position: absolute;
-	z-index: -1;
-}
-
-#obj-after {
-	height: 100%;
-	width: 100%;
-	background: #DDD;
-	border: 1px solid #CCC;
-	text-align: right;
-	display : block;
-	position: absolute;
-	z-index: -1;
-}
-
-
-/******************************************************************************/
-/******************************************************************************/
-
-/**
- * Controls
- */
-
-.wrap-left {
-	float: left;
-	overflow: hidden;
-}
-
-.wrap-right {
-	float: right;
-	overflow: hidden;
-}
-
-.wrap-left &gt; * {
-	float: left;
-}
-
-.wrap-right &gt; * {
-	float: right;
-}
-
-@media (min-width: 960px) {
-
-	.wrap-left {
-		width: 45%;
-	}
-
-	.wrap-right {
-		width: 55%;
-	}
-}
-
-
-@media (max-width: 959px) {
-
-	.wrap-left {
-		width: 30%;
-	}
-
-	.wrap-right {
-		width: 70%;
-	}
-}
-
-
-#controls {
-	color: #444;
-	margin: 10px 0 0 0;
-}
-
-
-#controls .category {
-	width: 500px;
-	margin: 0 auto 20px;
-	padding: 0;
-
-}
-
-#controls .category .title {
-	width: 100%;
-	height: 1.5em;
-	line-height: 1.5em;
-	color: #AAA;
-	text-align: right;
-}
-
-#controls .category &gt; .group {
-	border: 1px solid #CCC;
-	border-radius: 3px;
-}
-
-
-/**
- * 	Color Picker
- */
-
-@media (min-width: 960px) {
-	#controls .colorpicker {
-		width: 420px;
-	}
-}
-
-@media (max-width: 959px) {
-	#controls .colorpicker {
-		width: 210px;
-	}
-}
-
-#colorpicker {
-	width: 100%;
-	margin: 0 auto;
-}
-
-#colorpicker .gradient {
-	width: 200px;
-	height: 200px;
-	margin: 5px;
-	background: url("https://mdn.mozillademos.org/files/5707/picker_mask_200.png");
-	background: -moz-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
-				-moz-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
-	background: -webkit-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
-				-webkit-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
-	background-color: #F00;
-	float: left;
-}
-
-#colorpicker .hue {
-	width: 200px;
-	height: 30px;
-	margin: 5px;
-	background: url("https://mdn.mozillademos.org/files/5701/hue.png");
-	background: -moz-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
-				#00F 66.66%, #F0F 83.33%, #F00 100%);
-	background: -webkit-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
-				#00F 66.66%, #F0F 83.33%, #F00 100%);
-	float: left;
-}
-
-#colorpicker .alpha {
-	width: 200px;
-	height: 30px;
-	margin: 5px;
-	border: 1px solid #CCC;
-	float: left;
-	background: url("https://mdn.mozillademos.org/files/5705/alpha.png");
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-}
-
-#colorpicker #alpha {
-	width: 100%;
-	height: 100%;
-	background: url("https://mdn.mozillademos.org/files/5703/alpha_mask.png");
-	background: -moz-linear-gradient(left, rgba(255, 0, 0, 0) 0%, rgba(255, 0, 0, 1) 100%);
-}
-
-#colorpicker #gradient_picker {
-	width: 0.5em;
-	height: 0.5em;
-	border-radius: 0.4em;
-	border: 2px solid #CCC;
-	position: relative;
-	top: 20%;
-	left: 20%;
-}
-
-#colorpicker #hue_selector,
-#colorpicker #alpha_selector {
-	width: 3px;
-	height: 100%;
-	border: 1px solid #777;
-	background-color: #FFF;
-	position: relative;
-	top: -1px;
-	left: 0%;
-}
-
-/* input HSV and RGB */
-#colorpicker .info {
-	width: 200px;
-	margin: 5px;
-	float: left;
-}
-
-#colorpicker .info * {
-	float: left;
-}
-
-#colorpicker .info input {
-	margin: 0;
-	text-align: center;
-	width: 30px;
-	-moz-user-select: text;
-	-webkit-user-select: text;
-	-ms-user-select: text;
-}
-
-#colorpicker .info span {
-	height: 20px;
-	width: 30px;
-	text-align: center;
-	line-height: 20px;
-	display: block;
-}
-
-/* Preview color */
-#colorpicker .block {
-	width: 95px;
-	height: 54px;
-	float: left;
-	position: relative;
-}
-
-#colorpicker .preview {
-	margin: 5px;
-	border: 1px solid #CCC;
-	background-image: url("https://mdn.mozillademos.org/files/5705/alpha.png");
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-}
-
-#colorpicker .preview:before {
-	height: 100%;
-	width: 50%;
-	left: 50%;
-	content: "";
-	background: #FFF;
-	position: absolute;
-	z-index: 1;
-}
-
-#colorpicker .preview &gt; * {
-	width: 50%;
-	height: 100%;
-}
-
-#colorpicker #output_color {
-	width: 100%;
-	height: 100%;
-	position: absolute;
-	z-index: 2;
-}
-
-#colorpicker .block .input {
-	float: right;
-}
-
-#colorpicker [data-topic="a"] &gt; span {
-	width: 50px;
-}
-
-#colorpicker [data-topic="hexa"] {
-	float: right;
-	margin: 10px 0 0 0;
-}
-
-#colorpicker [data-topic="hexa"] &gt; span {
-	display: none;
-}
-
-#colorpicker [data-topic="hexa"] &gt; input {
-	width: 85px;
-	padding: 2px 0;
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-}
-
-
-/*
- * UI Components
- */
-
-/* Property */
-
-.property {
-	height: 20px;
-	margin: 10px 0;
-}
-
-.property * {
-	float: left;
-	height: 100%;
-	line-height: 100%;
-}
-
-/* Slider */
-
-#controls .ui-slider-name {
-	margin: 0 10px 0 0;
-}
-
-/*
- * Output code styling
- */
-
-#output {
-	position: relative;
-}
-
-#output .menu {
-	max-width: 70%;
-	height: 20px;
-	position: absolute;
-	top: 2px;
-}
-
-#output .button {
-	width: 90px;
-	height: 22px;
-	margin: 0 5px 0 0;
-	text-align: center;
-	line-height: 20px;
-	font-size: 14px;
-	color: #FFF;
-	background-color: #999;
-	border-top-left-radius: 3px;
-	border-top-right-radius: 3px;
-	bottom: -5px;
-	float:left;
-}
-
-#output .button:hover {
-	color: #FFF;
-	background-color: #666;
-	cursor: pointer;
-}
-
-#output .menu [data-active="true"] {
-	color: #777;
-	background-color: #FFF;
-	border: 1px solid #CCC;
-	border-bottom: none;
-}
-
-#output .menu [data-topic="before"] {
-	left: 100px;
-}
-
-#output .menu [data-topic="after"] {
-	left: 200px;
-}
-
-#output .output {
-	width: 480px;
-	margin: 10px;
-	padding: 10px;
-	overflow: hidden;
-	color: #555;
-	font-size: 14px;
-	border: 1px dashed #CCC;
-	border-radius: 3px;
-	display: none;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-
-	-moz-user-select: text;
-	-webkit-user-select: text;
-	-ms-user-select: text;
-}
-
-#output .css-property {
-	width: 100%;
-	float: left;
-	white-space: pre;
-}
-
-#output .name {
-	width: 35%;
-	float: left;
-}
-
-#output .value {
-	width: 65%;
-	float: left;
-}
-
-</pre>
-
-<h3 id="JavaScript_Content">JavaScript Content</h3>
-
-<pre class="brush: js"><code class="language-js">
-
-'use strict';
-
-/**
- * UI-SlidersManager
- */
-
-var SliderManager = (function SliderManager() {
-
-	var subscribers = {};
-	var sliders = [];
-
-	var Slider = 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 snap = node.getAttribute('data-snap');
-		var topic = node.getAttribute('data-topic');
-
-		this.min = min;
-		this.max = max &gt; 0 ? max : 100;
-		this.step = step === 0 ? 1 : step;
-		this.value = value &lt;= max &amp;&amp; value &gt;= min ? value : (min + max) / 2 | 0;
-		this.snap = snap === "true" ? true : false;
-		this.topic = topic;
-		this.node = node;
-
-		var pointer = document.createElement('div');
-		pointer.className = 'ui-slider-pointer';
-		node.appendChild(pointer);
-		this.pointer = pointer;
-
-		setMouseTracking(node, updateSlider.bind(this));
-
-		sliders[topic] = this;
-		setValue(topic, this.value);
-	}
-
-	var setButtonComponent = function setButtonComponent(node) {
-		var type = node.getAttribute('data-type');
-		var topic = node.getAttribute('data-topic');
-		if (type === "sub") {
-			node.textContent = '-';
-			node.addEventListener("click", function() {
-				decrement(topic);
-			});
-		}
-		if (type === "add") {
-			node.textContent = '+';
-			node.addEventListener("click", function() {
-				increment(topic);
-			});
-		}
-	}
-
-	var setInputComponent = function setInputComponent(node) {
-		var topic		= node.getAttribute('data-topic');
-		var unit_type	= node.getAttribute('data-unit');
-
-		var input = document.createElement('input');
-		var unit = document.createElement('span');
-		unit.textContent = unit_type;
-
-		input.setAttribute('type', 'text');
-		node.appendChild(input);
-		node.appendChild(unit);
-
-		input.addEventListener('click', function(e) {
-			this.select();
-		});
-
-		input.addEventListener('change', function(e) {
-			setValue(topic, e.target.value | 0);
-		});
-
-		subscribe(topic, function(value) {
-			node.children[0].value = value;
-		});
-	}
-
-	var increment = function increment(topic) {
-		var slider = sliders[topic];
-		if (slider === null || slider === undefined)
-			return;
-
-		if (slider.value + slider.step &lt;= slider.max) {
-			slider.value += slider.step;
-			setValue(slider.topic, slider.value)
-			notify.call(slider);
-		}
-	};
-
-	var decrement = function decrement(topic) {
-		var slider = sliders[topic];
-		if (slider === null || slider === undefined)
-			return;
-
-		if (slider.value - slider.step &gt;= slider.min) {
-			slider.value -= slider.step;
-			setValue(topic, slider.value)
-			notify.call(slider);
-		}
-	}
-
-	// this = Slider object
-	var updateSlider = function updateSlider(e) {
-		var node = this.node;
-		var pos = e.pageX - node.offsetLeft;
-		var width = node.clientWidth;
-		var delta = this.max - this.min;
-		var offset = this.pointer.clientWidth + 4; // border width * 2
-
-		if (pos &lt; 0) pos = 0;
-		if (pos &gt; width) pos = width;
-
-		var value = pos * delta / width | 0;
-		var precision = value % this.step;
-		value = value - precision + this.min;
-		if (precision &gt; this.step / 2)
-			value = value + this.step;
-
-		if (this.snap)
-			pos =  (value - this.min) * width / delta;
-
-		this.pointer.style.left = pos - offset/2 + "px";
-		this.value = value;
-		node.setAttribute('data-value', value);
-		notify.call(this);
-	}
-
-	var setValue = function setValue(topic, value) {
-		var slider = sliders[topic];
-
-		if (value &gt; slider.max || value &lt; slider.min)
-			return;
-
-		var delta = slider.max - slider.min;
-		var width = slider.node.clientWidth;
-		var offset = slider.pointer.clientWidth;
-		var pos =  (value - slider.min) * width / delta;
-		slider.value = value;
-		slider.pointer.style.left = pos - offset / 2 + "px";
-		slider.node.setAttribute('data-value', value);
-		notify.call(slider);
-	}
-
-	var setMouseTracking = function setMouseTracking(elem, callback) {
-		elem.addEventListener("mousedown", function(e) {
-			callback(e);
-			document.addEventListener("mousemove", callback);
-		});
-
-		document.addEventListener("mouseup", function(e) {
-			document.removeEventListener("mousemove", callback);
-		});
-	}
-
-	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() {
-		if (subscribers[this.topic] === undefined)
-			return;
-
-		for (var i in subscribers[this.topic]) {
-			subscribers[this.topic][i](this.value);
-		}
-	}
-
-	var init = function init() {
-		var elem, size;
-
-		elem = document.querySelectorAll('.ui-slider-btn-set');
-		size = elem.length;
-		for (var i = 0; i &lt; size; i++)
-			setButtonComponent(elem[i]);
-
-		elem = document.querySelectorAll('.ui-slider-input');
-		size = elem.length;
-		for (var i = 0; i &lt; size; i++)
-			setInputComponent(elem[i]);
-
-		elem = document.querySelectorAll('.ui-slider');
-		size = elem.length;
-		for (var i = 0; i &lt; size; i++)
-			new Slider(elem[i]);
-	}
-
-	return {
-		init : init,
-		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;
-			notify.call(buttons[topic]);
-		}
-		catch(error) {
-			console.log(error, topic, value);
-		}
-	}
-
-	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() {
-		if (subscribers[this.topic] === undefined)
-			return;
-		for (var i = 0; i &lt; 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 &lt; size; i++)
-			new CheckBox(elem[i]);
-	}
-
-	return {
-		init : init,
-		setValue : setValue,
-		subscribe : subscribe,
-		unsubscribe : unsubscribe
-	}
-
-})();
-
-
-window.addEventListener("load", function(){
-	BoxShadow.init();
-});
-
-var BoxShadow = (function BoxShadow() {
-
-	function getElemById(id) {
-		return document.getElementById(id);
-	}
-
-	/**
-	 * RGBA Color class
-	 */
-
-	function Color() {
-		this.r = 0;
-		this.g = 0;
-		this.b = 0;
-		this.a = 1;
-		this.hue = 0;
-		this.saturation = 0;
-		this.value = 0;
-	}
-
-	Color.prototype.copy = function copy(obj) {
-		if(obj instanceof Color !== true) {
-			console.log("Typeof instance not Color");
-			return;
-		}
-
-		this.r = obj.r;
-		this.g = obj.g;
-		this.b = obj.b;
-		this.a = obj.a;
-		this.hue = obj.hue;
-		this.saturation = obj.saturation;
-		this.value = obj.value;
-	}
-
-	Color.prototype.setRGBA = function setRGBA(red, green, blue, alpha) {
-		if (red != undefined)
-			this.r = red | 0;
-		if (green != undefined)
-			this.g = green | 0;
-		if (blue != undefined)
-			this.b = blue | 0;
-		if (alpha != undefined)
-			this.a = alpha | 0;
-	}
-
-	/**
-	 * HSV/HSB (hue, saturation, value / brightness)
-	 * @param hue			0-360
-	 * @param saturation	0-100
-	 * @param value 		0-100
-	 */
-	Color.prototype.setHSV = function setHSV(hue, saturation, value) {
-		this.hue = hue;
-		this.saturation = saturation;
-		this.value = value;
-		this.updateRGB();
-	}
-
-	Color.prototype.updateRGB = function updateRGB() {
-		var sat = this.saturation / 100;
-		var value = this.value / 100;
-		var C = sat * value;
-		var H = this.hue / 60;
-		var X = C * (1 - Math.abs(H % 2 - 1));
-		var m = value - C;
-		var precision = 255;
-
-		C = (C + m) * precision;
-		X = (X + m) * precision;
-		m = m * precision;
-
-		if (H &gt;= 0 &amp;&amp; H &lt; 1) {	this.setRGBA(C, X, m);	return; }
-		if (H &gt;= 1 &amp;&amp; H &lt; 2) {	this.setRGBA(X, C, m);	return; }
-		if (H &gt;= 2 &amp;&amp; H &lt; 3) {	this.setRGBA(m, C, X);	return; }
-		if (H &gt;= 3 &amp;&amp; H &lt; 4) {	this.setRGBA(m, X, C);	return; }
-		if (H &gt;= 4 &amp;&amp; H &lt; 5) {	this.setRGBA(X, m, C);	return; }
-		if (H &gt;= 5 &amp;&amp; H &lt; 6) {	this.setRGBA(C, m, X);	return; }
-	}
-
-	Color.prototype.updateHSV = function updateHSV() {
-		var red		= this.r / 255;
-		var green	= this.g / 255;
-		var blue	= this.b / 255;
-
-		var cmax = Math.max(red, green, blue);
-		var cmin = Math.min(red, green, blue);
-		var delta = cmax - cmin;
-		var hue = 0;
-		var saturation = 0;
-
-		if (delta) {
-			if (cmax === red ) { hue = ((green - blue) / delta); }
-			if (cmax === green ) { hue = 2 + (blue - red) / delta; }
-			if (cmax === blue ) { hue = 4 + (red - green) / delta; }
-			if (cmax) saturation = delta / cmax;
-		}
-
-		this.hue = 60 * hue | 0;
-		if (this.hue &lt; 0) this.hue += 360;
-		this.saturation = (saturation * 100) | 0;
-		this.value = (cmax * 100) | 0;
-	}
-
-	Color.prototype.setHexa = function setHexa(value) {
-		var valid  = /(^#{0,1}[0-9A-F]{6}$)|(^#{0,1}[0-9A-F]{3}$)/i.test(value)
-		if (valid !== true)
-			return;
-
-		if (value[0] === '#')
-			value = value.slice(1, value.length);
-
-		if (value.length === 3)
-			value = value.replace(/([0-9A-F])([0-9A-F])([0-9A-F])/i,"$1$1$2$2$3$3");
-
-		this.r = parseInt(value.substr(0, 2), 16);
-		this.g = parseInt(value.substr(2, 2), 16);
-		this.b = parseInt(value.substr(4, 2), 16);
-
-		this.alpha	= 1;
-	}
-
-	Color.prototype.getHexa = function getHexa() {
-		var r = this.r.toString(16);
-		var g = this.g.toString(16);
-		var b = this.b.toString(16);
-		if (this.r &lt; 16) r = '0' + r;
-		if (this.g &lt; 16) g = '0' + g;
-		if (this.b &lt; 16) b = '0' + b;
-		var value = '#' + r + g + b;
-		return value.toUpperCase();
-	}
-
-	Color.prototype.getRGBA = function getRGBA() {
-
-		var rgb = "(" + this.r + ", " + this.g + ", " + this.b;
-		var a = '';
-		var v = '';
-		if (this.a !== 1) {
-			a = 'a';
-			v = ', ' + this.a;
-		}
-
-		var value = "rgb" + a + rgb + v + ")";
-		return value;
-	}
-
-	Color.prototype.getColor = function getColor() {
-		if (this.a | 0 === 1)
-			return this.getHexa();
-		return this.getRGBA();
-	}
-
-	/**
-	 * Shadow Object
-	 */
-	function Shadow() {
-		this.inset  = false;
-		this.posX   = 5;
-		this.posY   = -5;
-		this.blur   = 5;
-		this.spread = 0;
-		this.color  = new Color();
-
-		var hue			= (Math.random() * 360) | 0;
-		var saturation	= (Math.random() * 75) | 0;
-		var value 		= (Math.random() * 50 + 50) | 0;
-		this.color.setHSV(hue, saturation, value, 1);
-	}
-
-	Shadow.prototype.computeCSS = function computeCSS() {
-		var value = "";
-		if (this.inset === true)
-			value += "inset ";
-		value += this.posX + "px ";
-		value += this.posY + "px ";
-		value += this.blur + "px ";
-		value += this.spread + "px ";
-		value += this.color.getColor();
-
-		return value;
-	}
-
-	Shadow.prototype.toggleInset = function toggleInset(value) {
-		if (value !== undefined || typeof value === "boolean")
-			this.inset = value;
-		else
-			this.inset = this.inset === true ? false : true;
-	}
-
-	Shadow.prototype.copy = function copy(obj) {
-		if(obj instanceof Shadow !== true) {
-			console.log("Typeof instance not Shadow");
-			return;
-		}
-
-		this.inset  = obj.inset;
-		this.posX   = obj.posX;
-		this.posY   = obj.posY;
-		this.blur   = obj.blur;
-		this.spread = obj.spread;
-		this.color.copy(obj.color);
-	}
-
-	/**
-	 * Color Picker
-	 */
-	var ColoPicker = (function ColoPicker() {
-
-		var colorpicker;
-		var hue_area;
-		var gradient_area;
-		var alpha_area;
-		var gradient_picker;
-		var hue_selector;
-		var alpha_selector;
-		var pick_object;
-		var info_rgb;
-		var info_hsv;
-		var info_hexa;
-		var output_color;
-		var color = new Color();
-		var subscribers = [];
-
-		var updateColor = function updateColor(e) {
-			var x = e.pageX - gradient_area.offsetLeft;
-			var y = e.pageY - gradient_area.offsetTop;
-
-			// width and height should be the same
-			var size = gradient_area.clientWidth;
-
-			if (x &gt; size)
-				x = size;
-			if (y &gt; size)
-				y = size;
-
-			if (x &lt; 0) x = 0;
-			if (y &lt; 0) y = 0;
-
-			var value = 100 - (y * 100 / size) | 0;
-			var saturation = x * 100 / size | 0;
-
-			color.setHSV(color.hue, saturation, value);
-			// should update just
-			// color pointer location
-			updateUI();
-			notify("color", color);
-		}
-
-		var updateHue = function updateHue(e) {
-			var x = e.pageX - hue_area.offsetLeft;
-			var width = hue_area.clientWidth;
-
-			if (x &lt; 0) x = 0;
-			if (x &gt; width) x = width;
-
-			var hue = ((360 * x) / width) | 0;
-			if (hue === 360) hue = 359;
-
-			color.setHSV(hue, color.saturation, color.value);
-
-			// should update just
-			// hue pointer location
-			// picker area background
-			// alpha area background
-			updateUI();
-			notify("color", color);
-		}
-
-		var updateAlpha = function updateAlpha(e) {
-			var x = e.pageX - alpha_area.offsetLeft;
-			var width = alpha_area.clientWidth;
-
-			if (x &lt; 0) x = 0;
-			if (x &gt; width) x = width;
-
-			color.a = (x / width).toFixed(2);
-
-			// should update just
-			// alpha pointer location
-			updateUI();
-			notify("color", color);
-		}
-
-		var setHueGfx = function setHueGfx(hue) {
-			var sat = color.saturation;
-			var val = color.value;
-			var alpha = color.a;
-
-			color.setHSV(hue, 100, 100);
-			gradient_area.style.backgroundColor = color.getHexa();
-
-			color.a = 0;
-			var start = color.getRGBA();
-			color.a = 1;
-			var end = color.getRGBA();
-			color.a = alpha;
-
-			var gradient = '-moz-linear-gradient(left, ' +	start + '0%, ' + end + ' 100%)';
-			alpha_area.style.background = gradient;
-		}
-
-		var updateUI = function updateUI() {
-			var x, y;		// coordinates
-			var size;		// size of the area
-			var offset;		// pointer graphic selector offset
-
-			// Set color pointer location
-			size = gradient_area.clientWidth;
-			offset = gradient_picker.clientWidth / 2 + 2;
-
-			x = (color.saturation * size / 100) | 0;
-			y = size - (color.value * size / 100) | 0;
-
-			gradient_picker.style.left = x - offset + "px";
-			gradient_picker.style.top = y - offset + "px";
-
-			// Set hue pointer location
-			size = hue_area.clientWidth;
-			offset = hue_selector.clientWidth/2;
-			x = (color.hue * size / 360 ) | 0;
-			hue_selector.style.left = x - offset + "px";
-
-			// Set alpha pointer location
-			size = alpha_area.clientWidth;
-			offset = alpha_selector.clientWidth/2;
-			x = (color.a * size) | 0;
-			alpha_selector.style.left = x - offset + "px";
-
-			// Set picker area background
-			var nc = new Color();
-			nc.copy(color);
-			if (nc.hue === 360) nc.hue = 0;
-			nc.setHSV(nc.hue, 100, 100);
-			gradient_area.style.backgroundColor = nc.getHexa();
-
-			// Set alpha area background
-			nc.copy(color);
-			nc.a = 0;
-			var start = nc.getRGBA();
-			nc.a = 1;
-			var end = nc.getRGBA();
-			var gradient = '-moz-linear-gradient(left, ' +	start + '0%, ' + end + ' 100%)';
-			alpha_area.style.background = gradient;
-
-			// Update color info
-			notify("color", color);
-			notify("hue", color.hue);
-			notify("saturation", color.saturation);
-			notify("value", color.value);
-			notify("r", color.r);
-			notify("g", color.g);
-			notify("b", color.b);
-			notify("a", color.a);
-			notify("hexa", color.getHexa());
-			output_color.style.backgroundColor = color.getRGBA();
-		}
-
-		var setInputComponent = function setInputComponent(node) {
-			var topic = node.getAttribute('data-topic');
-			var title = node.getAttribute('data-title');
-			var action = node.getAttribute('data-action');
-			title = title === null ? '' : title;
-
-			var input = document.createElement('input');
-			var info = document.createElement('span');
-			info.textContent = title;
-
-			input.setAttribute('type', 'text');
-			input.setAttribute('data-action', 'set-' + action + '-' + topic);
-			node.appendChild(info);
-			node.appendChild(input);
-
-			input.addEventListener('click', function(e) {
-				this.select();
-			});
-
-			input.addEventListener('change', function(e) {
-				if (action === 'HSV')
-					inputChangeHSV(topic);
-				if (action === 'RGB')
-					inputChangeRGB(topic);
-				if (action === 'alpha')
-					inputChangeAlpha(topic);
-				if (action === 'hexa')
-					inputChangeHexa(topic);
-			});
-
-			subscribe(topic, function(value) {
-				node.children[1].value = value;
-			});
-		}
-
-		var inputChangeHSV = function actionHSV(topic) {
-			var selector = "[data-action='set-HSV-" + topic + "']";
-			var node = document.querySelector("#colorpicker " + selector);
-			var value = parseInt(node.value);
-
-			if (typeof value === 'number' &amp;&amp; isNaN(value) === false &amp;&amp;
-				value &gt;= 0 &amp;&amp; value &lt; 360)
-				color[topic] = value;
-
-			color.updateRGB();
-			updateUI();
-		}
-
-		var inputChangeRGB = function inputChangeRGB(topic) {
-			var selector = "[data-action='set-RGB-" + topic + "']";
-			var node = document.querySelector("#colorpicker " + selector);
-			var value = parseInt(node.value);
-
-			if (typeof value === 'number' &amp;&amp; isNaN(value) === false &amp;&amp;
-				value &gt;= 0 &amp;&amp; value &lt;= 255)
-				color[topic] = value;
-
-			color.updateHSV();
-			updateUI();
-		}
-
-		var inputChangeAlpha = function inputChangeAlpha(topic) {
-			var selector = "[data-action='set-alpha-" + topic + "']";
-			var node = document.querySelector("#colorpicker " + selector);
-			var value = parseFloat(node.value);
-
-			if (typeof value === 'number' &amp;&amp; isNaN(value) === false &amp;&amp;
-				value &gt;= 0 &amp;&amp; value &lt;= 1)
-				color.a = value.toFixed(2);
-
-			updateUI();
-		}
-
-		var inputChangeHexa = function inputChangeHexa(topic) {
-			var selector = "[data-action='set-hexa-" + topic + "']";
-			var node = document.querySelector("#colorpicker " + selector);
-			var value = node.value;
-			color.setHexa(value);
-			color.updateHSV();
-			updateUI();
-		}
-
-		var setMouseTracking = function setMouseTracking(elem, callback) {
-
-			elem.addEventListener("mousedown", function(e) {
-				callback(e);
-				document.addEventListener("mousemove", callback);
-			});
-
-			document.addEventListener("mouseup", function(e) {
-				document.removeEventListener("mousemove", callback);
-			});
-		}
-
-		/*
-		 * Observer
-		 */
-		var setColor = function setColor(obj) {
-			if(obj instanceof Color !== true) {
-				console.log("Typeof instance not Color");
-				return;
-			}
-			color.copy(obj);
-			updateUI();
-		}
-
-		var subscribe = function subscribe(topic, callback) {
-			if (subscribers[topic] === undefined)
-				subscribers[topic] = [];
-
-			subscribers[topic].push(callback);
-		}
-
-		var unsubscribe = function unsubscribe(callback) {
-			subscribers.indexOf(callback);
-			subscribers.splice(index, 1);
-		}
-
-		var notify = function notify(topic, value) {
-			for (var i in subscribers[topic])
-				subscribers[topic][i](value);
-		}
-
-		var init = function init() {
-			colorpicker		= getElemById("colorpicker");
-			hue_area		= getElemById("hue");
-			gradient_area	= getElemById("gradient");
-			alpha_area		= getElemById("alpha");
-			gradient_picker	= getElemById("gradient_picker");
-			hue_selector	= getElemById("hue_selector");
-			alpha_selector	= getElemById("alpha_selector");
-			output_color	= getElemById("output_color");
-
-			var elem = document.querySelectorAll('#colorpicker .input');
-			var size = elem.length;
-			for (var i = 0; i &lt; size; i++)
-				setInputComponent(elem[i]);
-
-			setMouseTracking(gradient_area, updateColor);
-			setMouseTracking(hue_area, updateHue);
-			setMouseTracking(alpha_area, updateAlpha);
-
-		}
-
-		return {
-			init : init,
-			setColor : setColor,
-			subscribe : subscribe,
-			unsubscribe : unsubscribe
-		}
-
-	})();
-
-	/**
-	 * 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
-		}
-
-	})();
-
-	/*
-	 * Element Class
-	 */
-	var CssClass = function CssClass(id) {
-		this.left = 0;
-		this.top = 0;
-		this.rotate = 0;
-		this.width = 300;
-		this.height = 100;
-		this.display = true;
-		this.border = true;
-		this.zIndex = -1;
-		this.bgcolor = new Color();
-		this.id = id;
-		this.node = getElemById('obj-' + id);
-		this.object = getElemById(id);
-		this.shadowID = null;
-		this.shadows = []
-		this.render = [];
-		this.init();
-	}
-
-	CssClass.prototype.init = function init() {
-		this.left = ((this.node.parentNode.clientWidth - this.node.clientWidth) / 2) | 0;
-		this.top = ((this.node.parentNode.clientHeight - this.node.clientHeight) / 2) | 0;
-
-		this.setTop(this.top);
-		this.setLeft(this.left);
-		this.setHeight(this.height);
-		this.setWidth(this.width);
-		this.bgcolor.setHSV(0, 0, 100);
-		this.updateBgColor(this.bgcolor);
-	}
-
-	CssClass.prototype.updatePos = function updatePos(deltaX, deltaY) {
-		this.left += deltaX;
-		this.top += deltaY;
-		this.node.style.top = this.top + "px";
-		this.node.style.left = this.left + "px";
-		SliderManager.setValue("left", this.left);
-		SliderManager.setValue("top", this.top);
-	}
-
-	CssClass.prototype.setLeft = function setLeft(value) {
-		this.left = value;
-		this.node.style.left = this.left + "px";
-		OutputManager.updateProperty(this.id, 'left', this.left + 'px');
-	}
-
-	CssClass.prototype.setTop = function setTop(value) {
-		this.top = value;
-		this.node.style.top = this.top + 'px';
-		OutputManager.updateProperty(this.id, 'top', this.top + 'px');
-	}
-
-	CssClass.prototype.setWidth = function setWidth(value) {
-		this.width = value;
-		this.node.style.width = this.width + 'px';
-		OutputManager.updateProperty(this.id, 'width', this.width + 'px');
-	}
-
-	CssClass.prototype.setHeight = function setHeight(value) {
-		this.height = value;
-		this.node.style.height = this.height + 'px';
-		OutputManager.updateProperty(this.id, 'height', this.height + 'px');
-	}
-
-	// Browser support
-	CssClass.prototype.setRotate = function setRotate(value) {
-		var cssvalue = 'rotate(' + value +'deg)';
-
-		this.node.style.transform = cssvalue;
-		this.node.style.webkitTransform = cssvalue;
-		this.node.style.msTransform = cssvalue;
-
-		if (value !== 0) {
-			if (this.rotate === 0) {
-				OutputManager.toggleProperty(this.id, 'transform', true);
-				OutputManager.toggleProperty(this.id, '-webkit-transform', true);
-				OutputManager.toggleProperty(this.id, '-ms-transform', true);
-			}
-		}
-		else {
-			OutputManager.toggleProperty(this.id, 'transform', false);
-			OutputManager.toggleProperty(this.id, '-webkit-transform', false);
-			OutputManager.toggleProperty(this.id, '-ms-transform', false);
-		}
-
-		OutputManager.updateProperty(this.id, 'transform', cssvalue);
-		OutputManager.updateProperty(this.id, '-webkit-transform', cssvalue);
-		OutputManager.updateProperty(this.id, '-ms-transform', cssvalue);
-		this.rotate = value;
-	}
-
-	CssClass.prototype.setzIndex = function setzIndex(value) {
-		this.node.style.zIndex = value;
-		OutputManager.updateProperty(this.id, 'z-index', value);
-		this.zIndex = value;
-	}
-
-	CssClass.prototype.toggleDisplay = function toggleDisplay(value) {
-		if (typeof value !== "boolean" || this.display === value)
-			return;
-
-		this.display = value;
-		var display = this.display === true ? "block" : "none";
-		this.node.style.display = display;
-		this.object.style.display = display;
-	}
-
-	CssClass.prototype.toggleBorder = function toggleBorder(value) {
-		if (typeof value !== "boolean" || this.border === value)
-			return;
-
-		this.border = value;
-		var border = this.border === true ? "1px solid #CCC" : "none";
-		this.node.style.border = border;
-	}
-
-	CssClass.prototype.updateBgColor = function updateBgColor(color) {
-		this.bgcolor.copy(color);
-		this.node.style.backgroundColor = color.getColor();
-		OutputManager.updateProperty(this.id, 'background-color', color.getColor());
-	}
-
-	CssClass.prototype.updateShadows = function updateShadows() {
-		if (this.render.length === 0)
-			OutputManager.toggleProperty(this.id, 'box-shadow', false);
-		if (this.render.length === 1)
-			OutputManager.toggleProperty(this.id, 'box-shadow', true);
-
-		this.node.style.boxShadow = this.render.join(", ");
-		OutputManager.updateProperty(this.id, 'box-shadow', this.render.join(", \n"));
-
-	}
-
-
-	/**
-	 * Tool Manager
-	 */
-	var Tool = (function Tool() {
-
-		var preview;
-		var classes = [];
-		var active = null;
-		var animate = false;
-
-		/*
-		 * Toll actions
-		 */
-		var addCssClass = function addCssClass(id) {
-			classes[id] = new CssClass(id);
-		}
-
-		var setActiveClass = function setActiveClass(id) {
-			active = classes[id];
-			active.shadowID = null;
-			ColoPicker.setColor(classes[id].bgcolor);
-			SliderManager.setValue("top", active.top);
-			SliderManager.setValue("left", active.left);
-			SliderManager.setValue("rotate", active.rotate);
-			SliderManager.setValue("z-index", active.zIndex);
-			SliderManager.setValue("width", active.width);
-			SliderManager.setValue("height", active.height);
-			ButtonManager.setValue("border-state", active.border);
-			active.updateShadows();
-		}
-
-		var disableClass = function disableClass(topic) {
-			classes[topic].toggleDisplay(false);
-			ButtonManager.setValue(topic, false);
-		}
-
-		var addShadow = function addShadow(position) {
-			if (animate === true)
-				return -1;
-
-			active.shadows.splice(position, 0, new Shadow());
-			active.render.splice(position, 0, null);
-		}
-
-		var swapShadow = function swapShadow(id1, id2) {
-			var x = active.shadows[id1];
-			active.shadows[id1] = active.shadows[id2];
-			active.shadows[id2] = x;
-			updateShadowCSS(id1);
-			updateShadowCSS(id2);
-		}
-
-		var deleteShadow = function deleteShadow(position) {
-			active.shadows.splice(position, 1);
-			active.render.splice(position, 1);
-			active.updateShadows();
-		}
-
-		var setActiveShadow = function setActiveShadow(id, glow) {
-			active.shadowID = id;
-			ColoPicker.setColor(active.shadows[id].color);
-			ButtonManager.setValue("inset", active.shadows[id].inset);
-			SliderManager.setValue("blur", active.shadows[id].blur);
-			SliderManager.setValue("spread", active.shadows[id].spread);
-			SliderManager.setValue("posX", active.shadows[id].posX);
-			SliderManager.setValue("posY", active.shadows[id].posY);
-			if (glow === true)
-				addGlowEffect(id);
-		}
-
-		var addGlowEffect = function addGlowEffect(id) {
-			if (animate === true)
-				return;
-
-			animate = true;
-			var store = new Shadow();
-			var shadow = active.shadows[id];
-
-			store.copy(shadow);
-			shadow.color.setRGBA(40, 125, 200, 1);
-			shadow.blur = 10;
-			shadow.spread = 10;
-
-			active.node.style.transition = "box-shadow 0.2s";
-			updateShadowCSS(id);
-
-			setTimeout(function() {
-				shadow.copy(store);
-				updateShadowCSS(id);
-				setTimeout(function() {
-					active.node.style.removeProperty("transition");
-					animate = false;
-				}, 100);
-			}, 200);
-		}
-
-		var updateActivePos = function updateActivePos(deltaX, deltaY) {
-			if (active.shadowID === null)
-				active.updatePos(deltaX, deltaY);
-			else
-				updateShadowPos(deltaX, deltaY);
-		}
-
-		/*
-		 * Shadow properties
-		 */
-		var updateShadowCSS = function updateShadowCSS(id) {
-			active.render[id] = active.shadows[id].computeCSS();
-			active.updateShadows();
-		}
-
-		var toggleShadowInset = function toggleShadowInset(value) {
-			if (active.shadowID === null)
-				return;
-			active.shadows[active.shadowID].toggleInset(value);
-			updateShadowCSS(active.shadowID);
-		}
-
-		var updateShadowPos = function updateShadowPos(deltaX, deltaY) {
-			var shadow = active.shadows[active.shadowID];
-			shadow.posX += deltaX;
-			shadow.posY += deltaY;
-			SliderManager.setValue("posX", shadow.posX);
-			SliderManager.setValue("posY", shadow.posY);
-			updateShadowCSS(active.shadowID);
-		}
-
-		var setShadowPosX = function setShadowPosX(value) {
-			if (active.shadowID === null)
-				return;
-			active.shadows[active.shadowID].posX = value;
-			updateShadowCSS(active.shadowID);
-		}
-
-		var setShadowPosY = function setShadowPosY(value) {
-			if (active.shadowID === null)
-				return;
-			active.shadows[active.shadowID].posY = value;
-			updateShadowCSS(active.shadowID);
-		}
-
-		var setShadowBlur = function setShadowBlur(value) {
-			if (active.shadowID === null)
-				return;
-			active.shadows[active.shadowID].blur = value;
-			updateShadowCSS(active.shadowID);
-		}
-
-		var setShadowSpread = function setShadowSpread(value) {
-			if (active.shadowID === null)
-				return;
-			active.shadows[active.shadowID].spread = value;
-			updateShadowCSS(active.shadowID);
-		}
-
-		var updateShadowColor = function updateShadowColor(color) {
-			active.shadows[active.shadowID].color.copy(color);
-			updateShadowCSS(active.shadowID);
-		}
-
-		/*
-		 * Element Properties
-		 */
-		var updateColor = function updateColor(color) {
-			if (active.shadowID === null)
-				active.updateBgColor(color);
-			else
-				updateShadowColor(color);
-		}
-
-		var init = function init() {
-			preview = getElemById("preview");
-
-			ColoPicker.subscribe("color", updateColor);
-			PreviewMouseTracking.subscribe(updateActivePos);
-
-			// Affects shadows
-			ButtonManager.subscribe("inset", toggleShadowInset);
-			SliderManager.subscribe("posX", setShadowPosX);
-			SliderManager.subscribe("posY", setShadowPosY);
-			SliderManager.subscribe("blur", setShadowBlur);
-			SliderManager.subscribe("spread", setShadowSpread);
-
-			// Affects element
-			SliderManager.subscribe("top", function(value){
-				active.setTop(value);
-			});
-			SliderManager.subscribe("left", function(value){
-				active.setLeft(value);
-			});
-			SliderManager.subscribe("rotate", function(value) {
-				if (active == classes["element"])
-					return;
-				active.setRotate(value);
-			});
-
-			SliderManager.subscribe("z-index", function(value) {
-				if (active == classes["element"])
-					return;
-				active.setzIndex(value);
-			});
-
-			SliderManager.subscribe("width", function(value) {
-				active.setWidth(value)
-			});
-
-			SliderManager.subscribe("height", function(value) {
-				active.setHeight(value)
-			});
-
-			// Actions
-			classes['before'].top = -30;
-			classes['before'].left = -30;
-			classes['after'].top = 30;
-			classes['after'].left = 30;
-			classes['before'].toggleDisplay(false);
-			classes['after'].toggleDisplay(false);
-			ButtonManager.setValue('before', false);
-			ButtonManager.setValue('after', false);
-
-			ButtonManager.subscribe("before", classes['before'].toggleDisplay.bind(classes['before']));
-			ButtonManager.subscribe("after", classes['after'].toggleDisplay.bind(classes['after']));
-
-			ButtonManager.subscribe("border-state", function(value) {
-				active.toggleBorder(value);
-			});
-
-		}
-
-		return {
-			init 			: init,
-			addShadow		: addShadow,
-			swapShadow		: swapShadow,
-			addCssClass		: addCssClass,
-			disableClass	: disableClass,
-			deleteShadow	: deleteShadow,
-			setActiveClass	: setActiveClass,
-			setActiveShadow : setActiveShadow
-		}
-
-	})();
-
-	/**
-	 * Layer Manager
-	 */
-	var LayerManager = (function LayerManager() {
-		var stacks = [];
-		var active = {
-			node : null,
-			stack : null
-		}
-		var elements = {};
-
-		var mouseEvents = function mouseEvents(e) {
-			var node = e.target;
-			var type = node.getAttribute('data-type');
-
-			if (type === 'subject')
-				setActiveStack(stacks[node.id]);
-
-			if (type === 'disable') {
-				Tool.disableClass(node.parentNode.id);
-				setActiveStack(stacks['element']);
-			}
-
-			if (type === 'add')
-				active.stack.addLayer();
-
-			if (type === 'layer')
-				active.stack.setActiveLayer(node);
-
-			if (type === 'delete')
-				active.stack.deleteLayer(node.parentNode);
-
-			if (type === 'move-up')
-				active.stack.moveLayer(1);
-
-			if (type === 'move-down')
-				active.stack.moveLayer(-1);
-		}
-
-		var setActiveStack = function setActiveStack(stackObj) {
-			active.stack.hide();
-			active.stack = stackObj;
-			active.stack.show();
-		}
-
-		/*
-		 * Stack object
-		 */
-		var Stack = function Stack(subject) {
-			var S = document.createElement('div');
-			var title = document.createElement('div');
-			var stack = document.createElement('div');
-
-			S.className = 'container';
-			stack.className = 'stack';
-			title.className = 'title';
-			title.textContent = subject.getAttribute('data-title');
-			S.appendChild(title);
-			S.appendChild(stack);
-
-			this.id = subject.id;
-			this.container = S;
-			this.stack = stack;
-			this.subject = subject;
-			this.order = [];
-			this.uid = 0;
-			this.count = 0;
-			this.layer = null;
-			this.layerID = 0;
-		}
-
-		Stack.prototype.addLayer = function addLayer() {
-			if (Tool.addShadow(this.layerID) == -1)
-				return;
-
-			var uid = this.getUID();
-			var layer = this.createLayer(uid);
-
-			if (this.layer === null &amp;&amp; this.stack.children.length &gt;= 1)
-				this.layer = this.stack.children[0];
-
-			this.stack.insertBefore(layer, this.layer);
-			this.order.splice(this.layerID, 0, uid);
-			this.count++;
-			this.setActiveLayer(layer);
-		}
-
-		Stack.prototype.createLayer = function createLayer(uid) {
-			var layer = document.createElement('div');
-			var del = document.createElement('span');
-
-			layer.className = 'node';
-			layer.setAttribute('data-shid', uid);
-			layer.setAttribute('data-type', 'layer');
-			layer.textContent = 'тень ' + uid;
-
-			del.className = 'delete';
-			del.setAttribute('data-type', 'delete');
-
-			layer.appendChild(del);
-			return layer;
-		}
-
-		Stack.prototype.getUID = function getUID() {
-			return this.uid++;
-		}
-
-		// SOLVE IE BUG
-		Stack.prototype.moveLayer = function moveLayer(direction) {
-			if (this.count &lt;= 1 || this.layer === null)
-				return;
-			if (direction === -1 &amp;&amp; this.layerID === (this.count - 1) )
-				return;
-			if (direction === 1 &amp;&amp; this.layerID === 0 )
-				return;
-
-			if (direction === -1) {
-				var before = null;
-				Tool.swapShadow(this.layerID, this.layerID + 1);
-				this.swapOrder(this.layerID, this.layerID + 1);
-				this.layerID += 1;
-
-				if (this.layerID + 1 !== this.count)
-					before = this.stack.children[this.layerID + 1];
-
-				this.stack.insertBefore(this.layer, before);
-				Tool.setActiveShadow(this.layerID, false);
-			}
-
-			if (direction === 1) {
-				Tool.swapShadow(this.layerID, this.layerID - 1);
-				this.swapOrder(this.layerID, this.layerID - 1);
-				this.layerID -= 1;
-				this.stack.insertBefore(this.layer, this.stack.children[this.layerID]);
-				Tool.setActiveShadow(this.layerID, false);
-			}
-		}
-
-		Stack.prototype.swapOrder = function swapOrder(pos1, pos2) {
-			var x = this.order[pos1];
-			this.order[pos1] = this.order[pos2];
-			this.order[pos2] = x;
-		}
-
-		Stack.prototype.deleteLayer = function deleteLayer(node) {
-			var shadowID =  node.getAttribute('data-shid') | 0;
-			var index = this.order.indexOf(shadowID);
-			this.stack.removeChild(this.stack.children[index]);
-			this.order.splice(index, 1);
-			this.count--;
-
-			Tool.deleteShadow(index);
-
-			if (index &gt; this.layerID)
-				return;
-
-			if (index == this.layerID) {
-				if (this.count &gt;= 1) {
-					this.layerID = 0;
-					this.setActiveLayer(this.stack.children[0], true);
-				}
-				else {
-					this.layer = null;
-					this.show();
-				}
-			}
-
-			if (index &lt; this.layerID) {
-				this.layerID--;
-				Tool.setActiveShadow(this.layerID, true);
-			}
-
-		}
-
-		Stack.prototype.setActiveLayer = function setActiveLayer(node) {
-			elements.shadow_properties.style.display = 'block';
-			elements.element_properties.style.display = 'none';
-
-			if (this.layer)
-				this.layer.removeAttribute('data-active');
-
-			this.layer = node;
-			this.layer.setAttribute('data-active', 'layer');
-
-			var shadowID =  node.getAttribute('data-shid') | 0;
-			this.layerID = this.order.indexOf(shadowID);
-			Tool.setActiveShadow(this.layerID, true);
-		}
-
-		Stack.prototype.unsetActiveLayer = function unsetActiveLayer() {
-			if (this.layer)
-				this.layer.removeAttribute('data-active');
-
-			this.layer = null;
-			this.layerID = 0;
-		}
-
-		Stack.prototype.hide = function hide() {
-			this.unsetActiveLayer();
-			this.subject.removeAttribute('data-active');
-			var style = this.container.style;
-			style.left = '100%';
-			style.zIndex = '0';
-		}
-
-		Stack.prototype.show = function show() {
-			elements.shadow_properties.style.display = 'none';
-			elements.element_properties.style.display = 'block';
-
-			if (this.id === 'element') {
-				elements.zIndex.style.display = 'none';
-				elements.transform_rotate.style.display = 'none';
-			}
-			else {
-				elements.zIndex.style.display = 'block';
-				elements.transform_rotate.style.display = 'block';
-			}
-
-			this.subject.setAttribute('data-active', 'subject');
-			var style = this.container.style;
-			style.left = '0';
-			style.zIndex = '10';
-			Tool.setActiveClass(this.id);
-		}
-
-		function init() {
-
-			var elem, size;
-			var layerManager = getElemById("layer_manager");
-			var layerMenu = getElemById("layer_menu");
-			var container = getElemById("stack_container");
-
-			elements.shadow_properties = getElemById('shadow_properties');
-			elements.element_properties = getElemById('element_properties');
-			elements.transform_rotate = getElemById('transform_rotate');
-			elements.zIndex = getElemById('z-index');
-
-			elem = document.querySelectorAll('#layer_menu [data-type="subject"]');
-			size = elem.length;
-
-			for (var i = 0; i &lt; size; i++) {
-				var S = new Stack(elem[i]);
-				stacks[elem[i].id] = S;
-				container.appendChild(S.container);
-				Tool.addCssClass(elem[i].id);
-			}
-
-			active.stack = stacks['element'];
-			stacks['element'].show();
-
-			layerManager.addEventListener("click", mouseEvents);
-			layerMenu.addEventListener("click", mouseEvents);
-
-			ButtonManager.subscribe("before", function(value) {
-				if (value === false &amp;&amp; active.stack === stacks['before'])
-					setActiveStack(stacks['element'])
-				if (value === true &amp;&amp; active.stack !== stacks['before'])
-					setActiveStack(stacks['before'])
-			});
-
-			ButtonManager.subscribe("after", function(value) {
-				if (value === false &amp;&amp; active.stack === stacks['after'])
-					setActiveStack(stacks['element'])
-				if (value === true &amp;&amp; active.stack !== stacks['after'])
-					setActiveStack(stacks['after'])
-			});
-		}
-
-		return {
-			init : init
-		}
-	})();
-
-	/*
-	 * OutputManager
-	 */
-	var OutputManager = (function OutputManager() {
-		var classes = [];
-		var buttons = [];
-		var active = null;
-		var menu = null;
-		var button_offset = 0;
-
-		var crateOutputNode = function(topic, property) {
-
-			var prop = document.createElement('div');
-			var name = document.createElement('span');
-			var value = document.createElement('span');
-
-			var pmatch = property.match(/(^([a-z0-9\-]*)=\[([a-z0-9\-\"]*)\])|^([a-z0-9\-]*)/i);
-
-			name.textContent = '\t' + pmatch[4];
-
-			if (pmatch[3] !== undefined) {
-				name.textContent = '\t' + pmatch[2];
-				value.textContent = pmatch[3] + ';';
-			}
-
-			name.textContent += ': ';
-			prop.className = 'css-property';
-			name.className = 'name';
-			value.className = 'value';
-			prop.appendChild(name);
-			prop.appendChild(value);
-
-			classes[topic].node.appendChild(prop);
-			classes[topic].line[property] = prop;
-			classes[topic].prop[property] = value;
-		}
-
-		var OutputClass = function OutputClass(node) {
-			var topic = node.getAttribute('data-topic');
-			var prop = node.getAttribute('data-prop');
-			var name = node.getAttribute('data-name');
-			var properties = prop.split(' ');
-
-			classes[topic] = {};
-			classes[topic].node = node;
-			classes[topic].prop = [];
-			classes[topic].line = [];
-			classes[topic].button = new Button(topic);
-
-			var open_decl = document.createElement('div');
-			var end_decl = document.createElement('div');
-
-			open_decl.textContent = name + ' {';
-			end_decl.textContent = '}';
-			node.appendChild(open_decl);
-
-			for (var i in properties)
-				crateOutputNode(topic, properties[i]);
-
-			node.appendChild(end_decl);
-		}
-
-		var Button = function Button(topic) {
-			var button = document.createElement('div');
-
-			button.className = 'button';
-			button.textContent = topic;
-			button.style.left = button_offset + 'px';
-			button_offset += 100;
-
-			button.addEventListener("click", function() {
-				toggleDisplay(topic);
-			})
-
-			menu.appendChild(button);
-			return button;
-		}
-
-		var toggleDisplay = function toggleDisplay(topic) {
-			active.button.removeAttribute('data-active');
-			active.node.style.display = 'none';
-			active = classes[topic];
-			active.node.style.display = 'block';
-			active.button.setAttribute('data-active', 'true');
-		}
-
-		var toggleButton = function toggleButton(topic, value) {
-			var display = (value === true) ? 'block' : 'none';
-			classes[topic].button.style.display = display;
-
-			if (value === true)
-				toggleDisplay(topic);
-			else
-				toggleDisplay('element');
-		}
-
-		var updateProperty = function updateProperty(topic, property, data) {
-			try {
-				classes[topic].prop[property].textContent = data + ';';
-			}
-			catch(error) {
-				// console.log("ERROR undefined : ", topic, property, data);
-			}
-		}
-
-		var toggleProperty = function toggleProperty(topic, property, value) {
-			var display = (value === true) ? 'block' : 'none';
-			try {
-				classes[topic].line[property].style.display = display;
-			}
-			catch(error) {
-				// console.log("ERROR undefined : ",classes, topic, property, value);
-			}
-		}
-
-		var init = function init() {
-
-			menu = getElemById('menu');
-
-			var elem = document.querySelectorAll('#output .output');
-			var size = elem.length;
-			for (var i = 0; i &lt; size; i++)
-				OutputClass(elem[i]);
-
-			active = classes['element'];
-			toggleDisplay('element');
-
-			ButtonManager.subscribe("before", function(value) {
-				toggleButton('before', value);
-			});
-
-			ButtonManager.subscribe("after", function(value) {
-				toggleButton('after', value);
-			});
-		}
-
-		return {
-			init : init,
-			updateProperty : updateProperty,
-			toggleProperty : toggleProperty
-		}
-
-	})();
-
-
-	/**
-	 * Init Tool
-	 */
-	var init = function init() {
-		ButtonManager.init();
-		OutputManager.init();
-		ColoPicker.init();
-		SliderManager.init();
-		LayerManager.init();
-		PreviewMouseTracking.init("preview");
-		Tool.init();
-	}
-
-	return {
-		init : init
-	}
-
-})();
-
-
-</code></pre>
-</div>
-
-<div>{{ EmbedLiveSample('box-shadow_generator', '100%', '1100px', '') }}</div>
-
-<p><strong>Похожий инструмент: </strong><a href="https://cssgenerator.org/box-shadow-css-generator.html">Генератор CSS Box Shadow</a></p>
diff --git a/files/ru/web/css/css_backgrounds_and_borders/border-image_generator/index.html b/files/ru/web/css/css_backgrounds_and_borders/border-image_generator/index.html
new file mode 100644
index 0000000000..ebd9771810
--- /dev/null
+++ b/files/ru/web/css/css_backgrounds_and_borders/border-image_generator/index.html
@@ -0,0 +1,2629 @@
+---
+title: Генератор Border-image
+slug: Web/CSS/CSS_Backgrounds_and_Borders/Border-image_generator
+tags:
+  - CSS
+  - Tools
+translation_of: Web/CSS/CSS_Background_and_Borders/Border-image_generator
+original_slug: Web/CSS/CSS_Background_and_Borders/Border-image_generator
+---
+<p>Этот инструмент можно использовать, чтобы генерировать CSS3 значения {{cssxref("border-image")}}.</p>
+
+<div class="hidden">
+<h2 id="Border_Image_Generator" name="Border_Image_Generator">Border Image Generator</h2>
+
+<h3 id="HTML_Content">HTML Content</h3>
+
+<pre class="brush: html">    &lt;div id="container"&gt;
+
+        &lt;div id="gallery"&gt;
+            &lt;div id="image-gallery"&gt;
+                &lt;img class="image" src="https://mdn.mozillademos.org/files/6007/border-image-1.png" data-stateID="border1"/&gt;
+                &lt;img class="image" src="https://mdn.mozillademos.org/files/6009/border-image-2.png" data-stateID="border2"/&gt;
+                &lt;img class="image" src="https://mdn.mozillademos.org/files/6011/border-image-3.png" data-stateID="border3"/&gt;
+                &lt;img class="image" src="https://mdn.mozillademos.org/files/6013/border-image-4.png" data-stateID="border4"/&gt;
+                &lt;img class="image" src="https://mdn.mozillademos.org/files/6015/border-image-5.png" data-stateID="border5"/&gt;
+                &lt;img class="image" src="https://mdn.mozillademos.org/files/6017/border-image-6.svg" data-stateID="border6"/&gt;
+            &lt;/div&gt;
+        &lt;/div&gt;
+
+        &lt;div id="load-actions" class="group section"&gt;
+            &lt;div id="toggle-gallery" data-action="hide"&gt; &lt;/div&gt;
+            &lt;div id="load-image" class="button"&gt; Upload image &lt;/div&gt;
+            &lt;input id="remote-url" type="text" placeholder="Load an image from URL"/&gt;
+            &lt;div id="load-remote" class="button"&gt; &lt;/div&gt;
+        &lt;/div&gt;
+
+        &lt;div id="general-controls" class="group section"&gt;
+            &lt;div class="name"&gt; Control Box &lt;/div&gt;
+            &lt;div class="separator"&gt;&lt;/div&gt;
+            &lt;div class="property"&gt;
+                &lt;div class="name"&gt;scale&lt;/div&gt;
+                &lt;div class="ui-input-slider" data-topic="scale"
+                    data-unit="%" data-max="300" data-sensivity="10"&gt;
+                &lt;/div&gt;
+            &lt;/div&gt;
+            &lt;div class="separator"&gt;&lt;/div&gt;
+            &lt;div class="property"&gt;
+                &lt;div class="name"&gt;draggable&lt;/div&gt;
+                &lt;div class="ui-checkbox" data-topic='drag-subject'&gt;&lt;/div&gt;
+            &lt;/div&gt;
+            &lt;div class="property right"&gt;
+                &lt;div class="name"&gt;section height&lt;/div&gt;
+                &lt;div class="ui-input-slider" data-topic="preview-area-height"
+                    data-min="400" data-max="1000"&gt;
+                &lt;/div&gt;
+            &lt;/div&gt;
+        &lt;/div&gt;
+
+        &lt;div id="preview_section" class="group section"&gt;
+            &lt;div id="subject"&gt;
+                &lt;div class="guideline" data-axis="Y" data-topic="slice-top"&gt;&lt;/div&gt;
+                &lt;div class="guideline" data-axis="X" data-topic="slice-right"&gt;&lt;/div&gt;
+                &lt;div class="guideline" data-axis="Y" data-topic="slice-bottom"&gt;&lt;/div&gt;
+                &lt;div class="guideline" data-axis="X" data-topic="slice-left"&gt;&lt;/div&gt;
+            &lt;/div&gt;
+            &lt;div id="preview"&gt; &lt;/div&gt;
+        &lt;/div&gt;
+
+        &lt;!-- controls --&gt;
+        &lt;div id="controls" class="group section"&gt;
+
+            &lt;!-- border-image-slice --&gt;
+            &lt;div id="border-slice-control" class="category"&gt;
+                &lt;div class="title"&gt; border-image-slice &lt;/div&gt;
+                &lt;div class="property"&gt;
+                    &lt;div class="name"&gt;fill&lt;/div&gt;
+                    &lt;div class="ui-checkbox" data-topic='slice-fill'&gt;&lt;/div&gt;
+                &lt;/div&gt;
+            &lt;/div&gt;
+
+            &lt;!-- border-image-width --&gt;
+            &lt;div id="border-width-control" class="category"&gt;
+                &lt;div class="title"&gt; border-image-width &lt;/div&gt;
+            &lt;/div&gt;
+
+            &lt;!-- border-image-outset --&gt;
+            &lt;div id="border-outset-control" class="category"&gt;
+                &lt;div class="title"&gt; border-image-outset &lt;/div&gt;
+            &lt;/div&gt;
+
+            &lt;!-- other-settings --&gt;
+            &lt;div id="aditional-properties" class="category"&gt;
+                &lt;div class="title"&gt; aditional-properties &lt;/div&gt;
+                &lt;div class="property"&gt;
+                    &lt;div class="name"&gt; repeat-x &lt;/div&gt;
+                    &lt;div class="ui-dropdown border-repeat" data-topic="image-repeat-X" data-selected="2"&gt;
+                        &lt;div data-value="0"&gt;repeat&lt;/div&gt;
+                        &lt;div data-value="0"&gt;stretch&lt;/div&gt;
+                        &lt;div data-value="0"&gt;round&lt;/div&gt;
+                    &lt;/div&gt;
+                &lt;/div&gt;
+                &lt;div class="property"&gt;
+                    &lt;div class="name"&gt; repeat-y &lt;/div&gt;
+                    &lt;div class="ui-dropdown border-repeat" data-topic="image-repeat-Y" data-selected="2"&gt;
+                        &lt;div data-value="1"&gt;repeat&lt;/div&gt;
+                        &lt;div data-value="1"&gt;stretch&lt;/div&gt;
+                        &lt;div data-value="1"&gt;round&lt;/div&gt;
+                    &lt;/div&gt;
+                &lt;/div&gt;
+                &lt;div class="property"&gt;
+                    &lt;div class="ui-input-slider" data-topic="font-size" data-info="em size"
+                        data-unit="px" data-value="12" data-sensivity="3"&gt;
+                    &lt;/div&gt;
+                &lt;/div&gt;
+
+                &lt;div class="property"&gt;
+                    &lt;div class="ui-input-slider" data-topic="preview-width" data-info="width"
+                         data-unit=" px" data-min="10" data-max="10000" data-sensivity="3"&gt;&lt;/div&gt;
+                &lt;/div&gt;
+                &lt;div class="property"&gt;
+                    &lt;div class="ui-input-slider" data-topic="preview-height" data-info="height"
+                        data-unit=" px" data-min="10" data-max="10000" data-sensivity="3"&gt;
+                    &lt;/div&gt;
+                &lt;/div&gt;
+            &lt;/div&gt;
+
+
+            &lt;div id="output" class="category"&gt;
+                &lt;div class="title"&gt; CSS Code &lt;/div&gt;
+                &lt;div class="css-property"&gt;
+                    &lt;span class="name"&gt; border-image-slice: &lt;/span&gt;
+                    &lt;span id="out-border-slice" class="value"&gt; &lt;/span&gt;
+                &lt;/div&gt;
+                &lt;div class="css-property"&gt;
+                    &lt;span class="name"&gt; border-image-width: &lt;/span&gt;
+                    &lt;span id="out-border-width" class="value"&gt; &lt;/span&gt;
+                &lt;/div&gt;
+                &lt;div class="css-property"&gt;
+                    &lt;span class="name"&gt; border-image-outset: &lt;/span&gt;
+                    &lt;span id="out-border-outset" class="value"&gt; &lt;/span&gt;
+                &lt;/div&gt;
+                &lt;div class="css-property"&gt;
+                    &lt;span class="name"&gt; border-image-repeat: &lt;/span&gt;
+                    &lt;span id="out-border-repeat" class="value"&gt; &lt;/span&gt;
+                &lt;/div&gt;
+                &lt;div class="css-property"&gt;
+                    &lt;span class="name"&gt; border-image-source: &lt;/span&gt;
+                    &lt;span id="out-border-source" class="value"&gt;  &lt;/span&gt;
+                &lt;/div&gt;
+            &lt;/div&gt;
+
+        &lt;/div&gt;
+    &lt;/div&gt;</pre>
+
+<h3 id="CSS_Content">CSS Content</h3>
+
+<pre class="brush: css">/*  GRID OF TWELVE
+ * ========================================================================== */
+
+.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 {
+	height: 20px;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	-moz-user-select: none;
+	user-select: none;
+}
+
+.ui-input-slider * {
+	float: left;
+	height: 100%;
+	line-height: 100%;
+}
+
+/* Input Slider */
+
+.ui-input-slider &gt; 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 DropDown
+ */
+
+/* Dropdown */
+
+.ui-dropdown {
+	height: 2em;
+	width: 120px;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	font-size: 12px;
+
+	background-image: url("https://mdn.mozillademos.org/files/6037/drop_arrow_icon.png");
+	background-position: right center;
+	background-repeat: no-repeat;
+	background-color: #359740;
+
+	position: relative;
+
+	-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;
+}
+
+.ui-dropdown:hover {
+	cursor: pointer;
+	background-color: #208B20;
+}
+
+/* Dropdown Select Button */
+
+.ui-dropdown-select {
+	height: inherit;
+	padding: 0 0.75em;
+	color: #FFF;
+	line-height: 2em;
+}
+
+/* Dropdown List */
+
+.ui-dropdown-list {
+	width: 100%;
+	height: 150px;
+	max-height: 150px;
+	margin: 0;
+	padding: 0 0.3em;
+
+	border: 3px solid #3490D2;
+	border-color: #208B20;
+	background: #666;
+	background-color: #EEF1F5;
+	color: #000;
+
+	position: absolute;
+	top: 2em;
+	left: 0;
+	z-index: 100;
+
+	overflow: hidden;
+	transition: all 0.3s;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+.ui-dropdown-list:hover {
+	overflow: auto;
+}
+
+.ui-dropdown-list[data-hidden='true'] {
+	height: 0 !important;
+	opacity: 0;
+	visibility: hidden;
+}
+
+.ui-dropdown[data-position='left'] .ui-dropdown-list {
+	left: -100%;
+	top: 0;
+}
+
+.ui-dropdown[data-position='right'] .ui-dropdown-list {
+	left: 100%;
+	top: 0;
+}
+
+.ui-dropdown-list &gt; div {
+	width: 100%;
+	height: 1.6em;
+	margin: 0.3em 0;
+	padding: 0.3em;
+	line-height: 1em;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+.ui-dropdown-list &gt; div:hover {
+	background: #3490D2;
+	color:#FFF;
+	border-radius: 2px;
+	cursor: pointer;
+}
+
+
+/*************************************************************************************/
+/*************************************************************************************/
+
+/*
+ * UI Button
+ */
+
+/* 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 &gt; input {
+ 	display: none;
+}
+
+.ui-checkbox &gt; 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: 2px;
+	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 &gt; label:hover {
+	cursor: pointer;
+}
+
+.ui-checkbox &gt; input:checked + label {
+	background-image: url("https://mdn.mozillademos.org/files/5681/checked.png");
+	background-color: #379B4A;
+}
+
+/*************************************************************************************/
+/*************************************************************************************/
+
+/*
+ * BORDER IMAGE GENERATOR TOOL
+ */
+
+body {
+	width: 100%;
+	margin: 0 auto;
+	padding: 0 0 20px 0;
+
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+
+	/*background: url("https://mdn.mozillademos.org/files/6025/grain.png");*/
+	border: 1px solid #EEE;
+
+	-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;
+}
+
+body[data-move='X'] {
+	cursor: w-resize !important;
+}
+
+body[data-move='Y'] {
+	cursor: s-resize !important;
+}
+
+#container {
+	width: 100%;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+[data-draggable='true']:hover {
+	cursor: move;
+}
+
+[data-draggable='true']:hover &gt; * {
+	cursor: default;
+}
+
+
+
+/******************************************************************************/
+/******************************************************************************/
+
+/*
+ * Border Image Picker
+ */
+
+#gallery {
+	box-shadow: 0 0 3px 0 #BABABA;
+}
+
+#image-gallery {
+	width: 600px;
+	height: 100px;
+	margin: 0 auto;
+	transition: margin 0.4s;
+}
+
+#image-gallery .image {
+	height: 80px;
+	float: left;
+	margin: 10px;
+	opacity: 0.5;
+	background-color: #FFF;
+	box-shadow: 0px 0px 3px 1px #BABABA;
+}
+
+#image-gallery .image[selected="true"] {
+	box-shadow: 0px 0px 3px 1px #3BBA52;
+	opacity: 1;
+}
+
+#image-gallery .image:hover {
+	cursor: pointer;
+	box-shadow: 0px 0px 3px 1px #30ACE5;
+	opacity: 1;
+}
+
+#image-gallery[data-collapsed='true'] {
+	margin-top: -100px;
+}
+
+/* Load Menu */
+
+#load-actions {
+	margin: 10px 0;
+}
+
+#toggle-gallery {
+	width: 30px;
+	height: 25px;
+	margin: 10px;
+	color: #FFF;
+
+	background-image: url('https://mdn.mozillademos.org/files/6005/arrow-up-white.png');
+	background-repeat: no-repeat;
+	background-position: top 4px center;
+	background-color: #888888 !important;
+
+	border-radius: 2px;
+	float: left;
+}
+
+#toggle-gallery:hover {
+	cursor: pointer;
+}
+
+#toggle-gallery[data-action='show'] {
+	background-image: url('https://mdn.mozillademos.org/files/6001/arrow-down-white.png');
+	background-color: #888888 !important;
+}
+
+#toggle-gallery[data-action='hide'] {
+	background-image: url('https://mdn.mozillademos.org/files/6005/arrow-up-white.png');
+}
+
+.button {
+	width: 100px;
+	height: 25px;
+	margin: 10px;
+	color: #FFF;
+	text-align: center;
+	font-size: 12px;
+	line-height: 25px;
+	background-color: #379B4A;
+	border-radius: 2px;
+	float: left;
+}
+
+.button:hover {
+	cursor: pointer;
+	background-color: #3380C4;
+}
+
+#load-image {
+	float: left;
+}
+
+#load-remote {
+	width: 30px;
+	background-image: url('https://mdn.mozillademos.org/files/6003/arrow-right-white.png');
+	background-repeat: no-repeat;
+	background-position: center center;
+}
+
+#remote-url {
+	width: 200px;
+	height: 23px;
+	margin: 10px;
+	padding: 0 5px;
+	border: 1px solid #379B4A;
+	border-radius: 2px;
+	float: left;
+
+	transition: width 0.5s;
+}
+
+#remote-url:focus {
+	box-shadow: 0px 0px 3px -1px #379B4A; /*#68ACE8; */
+	border-color: rgba(55, 155, 74, 0.5);
+	width: 450px;
+}
+
+/*
+ * Visible Area
+ */
+
+#preview_section {
+	position: relative;
+	min-height: 400px;
+}
+
+/* Image Control */
+
+#subject {
+	width: 300px;
+	height: 300px;
+	background-repeat: no-repeat;
+	background-size: 100%;
+	background-color: #FFF;
+	border: 1px solid #CCC;
+
+	position: absolute;
+	z-index: 10;
+	top: 15%;
+	left: 10%;
+
+	box-shadow: 0 0 3px 0 #BABABA;
+	transition-property: width, height;
+	transition-duration: 0.1s;
+}
+
+#subject .guideline {
+	background-color: rgba(255, 255, 255, 0.7);
+	border: 1px solid rgba(0, 0, 0, 0.3);
+	position: absolute;
+}
+
+#subject .guideline:hover {
+	background-color: #F00;
+}
+
+#subject .guideline[data-active] {
+	background-color: #F00;
+	z-index: 10;
+}
+
+#subject .guideline[data-axis='X'] {
+	width: 1px;
+	height: 100%;
+	top: -1px;
+}
+
+#subject .guideline[data-axis='Y'] {
+	width: 100%;
+	height: 1px;
+	left: -1px;
+}
+
+#subject .guideline[data-axis='X']:hover {
+	cursor: w-resize;
+}
+
+#subject .guideline[data-axis='Y']:hover {
+	cursor: s-resize;
+}
+
+
+#subject .relative {
+	position: relative;
+	font-size: 12px;
+}
+
+#subject .tooltip, #subject .tooltip2 {
+	width: 40px;
+	height: 20px;
+	line-height: 20px;
+	font-size: 12px;
+	text-align: center;
+
+	position: absolute;
+	opacity: 0.5;
+	transition: opacity 0.25s;
+}
+
+#subject .tooltip {
+	background: #EEE;
+	border-radius: 2px;
+	border: 1px solid #CCC;
+}
+
+#subject .tooltip2{
+	color: #555;
+}
+
+#subject [data-active] &gt; * {
+	opacity: 1;
+}
+
+#subject .tooltip[data-info='top'] {
+	top: -10px;
+	right: -50px;
+}
+
+#subject .tooltip[data-info='right'] {
+	bottom: -30px;
+	right: -20px;
+}
+
+#subject .tooltip[data-info='bottom'] {
+	top: -10px;
+	left: -50px;
+}
+
+#subject .tooltip[data-info='left'] {
+	top: -30px;
+	right: -20px;
+}
+
+#subject .tooltip2[data-info='top'] {
+	top: -10px;
+	left: -50px;
+}
+
+#subject .tooltip2[data-info='right'] {
+	top: -30px;
+	right: -20px;
+}
+
+#subject .tooltip2[data-info='bottom'] {
+	top: -10px;
+	right: -50px;
+}
+
+#subject .tooltip2[data-info='left'] {
+	bottom: -30px;
+	right: -20px;
+}
+
+/* Preview */
+
+#preview {
+	width: 30%;
+	height: 50%;
+	background-color: #FFF;
+	text-align: center;
+	overflow: hidden;
+	position: absolute;
+	z-index: 10;
+
+	left: 60%;
+	top: 15%;
+
+	border-radius: 2px;
+	border-image-width: 20px;
+	border-image-repeat: round;
+	box-shadow: 0 0 3px 0 #BABABA;
+}
+
+#preview .resize-handle {
+	width: 10px;
+	height: 10px;
+	background: url("https://mdn.mozillademos.org/files/6027/resize.png") center center no-repeat;
+	position: absolute;
+	bottom: 0;
+	right: 0;
+}
+
+#preview .resize-handle:hover {
+	cursor: nw-resize;
+}
+
+
+/*
+ * General controls MENU
+ */
+
+#general-controls {
+	padding: 10px 30px;
+	background-color: #FFF;
+	opacity: 0.95;
+	color: #888;
+	/*border-radius: 2px;*/
+	box-shadow: 0 0 3px 0 #BABABA;
+}
+
+#general-controls .property {
+	width: 130px;
+	float: left;
+}
+
+#general-controls .name {
+	height: 20px;
+	margin: 0 10px 0 0;
+	line-height: 100%;
+	text-align: right;
+	float: left;
+}
+
+#general-controls .right {
+	width: 200px;
+	float: right;
+}
+
+#general-controls .ui-checkbox label {
+	height: 10px;
+}
+
+#general-controls .separator {
+	height: 40px;
+	width: 1px;
+	margin: -10px 15px;
+	background-color: #EEE;
+	float: left;
+}
+
+/*
+ * Controls
+ */
+
+#controls {
+	color: #444;
+	margin: 10px 0 0 0;
+}
+
+#controls .category {
+	height: 190px;
+	min-width: 260px;
+	margin: 10px;
+	padding: 10px;
+	border: 1px solid #CCC;
+	border-radius: 3px;
+	float: left;
+
+	box-shadow: 0 0 3px 0 #BABABA;
+	transition: all 0.25s;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+@media (min-width: 880px) {
+	#controls .category {
+		width: 30%;
+		margin-left: 1.66%;
+		margin-right: 1.66%;
+	}
+}
+
+@media (max-width: 879px) {
+	#controls .category {
+		width: 37%;
+		margin-left: 6.5%;
+		margin-right: 6.5%;
+	}
+}
+
+#controls .category .title {
+	width: 100%;
+	height: 30px;
+	margin: 0 0 10px 0;
+	line-height: 25px;
+
+	text-align: center;
+	color: #AAA;
+}
+
+#controls .category:hover .title {
+	color: #777;
+}
+
+#controls .category &gt; .group {
+	border: 1px solid #CCC;
+	border-radius: 2px;
+}
+
+
+/* property */
+
+#controls .property {
+	width: 250px;
+	height: 20px;
+	margin: 5px auto;
+}
+
+#controls .property .ui-input-slider {
+	margin: 0;
+	float: left;
+}
+
+#controls .property .ui-input-slider-info {
+	width: 60px;
+}
+
+#controls .property .ui-input-slider-left {
+	transition: opacity 0.15s;
+    opacity: 0;
+}
+
+#controls .property .ui-input-slider-right {
+	transition: opacity 0.15s;
+    opacity: 0;
+}
+
+#controls .property .name {
+	width: 60px;
+	height: 20px;
+	padding: 0px 10px 0px 0px;
+	text-align: right;
+	line-height: 100%;
+	float: left;
+}
+
+#controls .property .config {
+	width: 20px;
+	height: 20px;
+	float: left;
+	background: url("https://mdn.mozillademos.org/files/6021/config.png") center center no-repeat;
+	opacity: 0.5;
+}
+
+#controls .property .config:hover {
+	cursor: pointer;
+	opacity: 1;
+}
+
+#controls .ui-input-slider:hover .ui-input-slider-right {
+    opacity: 1;
+}
+
+#controls .ui-input-slider:hover .ui-input-slider-left {
+    opacity: 1;
+}
+
+#controls .property .ui-dropdown {
+	margin: 0 10px;
+	float: left;
+}
+
+
+#controls .property .ui-checkbox {
+	margin: 0 0 0 16px;
+	float: left;
+}
+
+#controls .property .ui-checkbox label {
+	height: 0.85em;
+	width: 10px;
+}
+
+/* dropdowns */
+#controls .ui-dropdown {
+	width: 50px;
+	height: 1.7em;
+	border-radius: 2px;
+}
+
+#controls .ui-dropdown-select {
+	line-height: 1.6em;
+}
+
+#controls .ui-dropdown-list {
+	top: 20px;
+}
+
+#controls .ui-dropdown-list {
+	border-width: 1px;
+	text-align: center;
+}
+
+#controls .ui-dropdown-list:hover {
+	overflow: hidden;
+}
+
+#controls .border-repeat {
+	margin: 0 0 0 16px !important;
+	width: 80px;
+}
+
+#controls .border-repeat .ui-dropdown-list {
+	height: 6.2em;
+	border-width: 1px;
+	text-align: center;
+}
+
+/* border-image-slice */
+
+
+#border-slice-control .ui-dropdown-list {
+	height: 4.3em;
+}
+
+/* border-image-width */
+
+#border-width-control .ui-dropdown-list {
+	height: 6.2em;
+}
+
+/* border-image-outset */
+
+#border-outset-control .ui-dropdown-list {
+	height: 4.3em;
+}
+
+#aditional-properties .property {
+	width: 200px;
+}
+
+#aditional-properties .ui-input-slider &gt; input {
+	width: 80px !important;
+}
+
+/* unit settings panel */
+
+#unit-settings {
+	padding: 10px;
+	position: absolute;
+
+	background: #FFF;
+
+	font-size: 12px;
+	border-radius: 3px;
+	border: 1px solid #CCC;
+	text-align: center;
+	color: #555;
+
+	position: absolute;
+	z-index: 1000;
+
+	box-shadow: 0 0 3px 0 #BABABA;
+	transition: all 0.25s;
+}
+
+#unit-settings .title {
+	width: 100%;
+	margin: -5px auto 0;
+
+	color: #666;
+	font-size: 14px;
+	font-weight: bold;
+	line-height: 25px;
+	border-bottom: 1px solid #E5E5E5;
+}
+
+#unit-settings .ui-input-slider {
+	margin: 10px 0 0 0;
+}
+
+#unit-settings .ui-input-slider-info {
+	width: 50px;
+	line-height: 1.5em;
+}
+
+#unit-settings input {
+	font-size: 12px;
+	width: 40px !important;
+}
+
+#unit-settings .close {
+	width: 16px;
+	height: 16px;
+	background: url('https://mdn.mozillademos.org/files/6019/close.png') no-repeat center center;
+	background-size: 75%;
+
+	position: absolute;
+	top: 4px;
+	right: 4px;
+	opacity: 0.5;
+}
+
+#unit-settings .close:hover {
+	cursor: pointer;
+	opacity: 1;
+}
+
+#unit-settings[data-active='true'] {
+	opacity: 1;
+}
+
+#unit-settings[data-active='false'] {
+	opacity: 0;
+	top: -100px !important;
+}
+
+/*
+ * CSS Output Code
+ */
+
+#output {
+	padding: 10px;
+	border: 2px dashed #888 !important;
+	box-shadow: none !important;
+	border-radius: 3px;
+	overflow: hidden;
+
+	-moz-user-select: text;
+	-webkit-user-select: text;
+	-ms-user-select: text;
+	user-select: text;
+}
+
+
+@media (min-width: 880px) {
+	#output {
+		width: 63.33% !important;
+	}
+}
+
+@media (max-width: 879px) {
+	#output {
+		width: 87% !important;
+	}
+}
+
+
+#output .title {
+	width: 100%;
+	height: 30px;
+	margin: 0 0 10px 0;
+	line-height: 25px;
+
+	text-align: center;
+	color: #AAA;
+}
+
+#output .css-property {
+	width: 100%;
+	margin: 0;
+	color: #555;
+	font-size: 14px;
+	line-height: 18px;
+	float: left;
+}
+
+#output .css-property .name {
+	width: 30%;
+	font-weight: bold;
+	text-align: right;
+	float: left;
+}
+
+#output .css-property .value {
+	width: 65%;
+	padding: 0 2.5%;
+	word-break: break-all;
+	float: left;
+}
+
+</pre>
+
+<h3 id="JavaScript_Content">JavaScript Content</h3>
+
+<pre class="brush: js">'use strict';
+
+/**
+ * UI-SlidersManager
+ */
+
+var InputSliderManager = (function InputSliderManager() {
+
+	var subscribers = {};
+	var sliders = [];
+
+	var InputComponent = function InputComponent(obj) {
+		var input = document.createElement('input');
+		input.setAttribute('type', 'text');
+		input.style.width = 50 + obj.precision * 10 + 'px';
+
+		input.addEventListener('click', function(e) {
+			this.select();
+		});
+
+		input.addEventListener('change', function(e) {
+			var value = parseFloat(e.target.value);
+
+			if (isNaN(value) === true)
+				setValue(obj.topic, obj.value);
+			else
+				setValue(obj.topic, value);
+		});
+
+		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) {
+			document.removeEventListener("mousemove", sliderMotion);
+			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("mouseup", slideEnd);
+			document.addEventListener("mousemove", sliderMotion);
+		});
+
+		var slideEnd = function slideEnd(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		= parseFloat(node.getAttribute('data-min'));
+		var max		= parseFloat(node.getAttribute('data-max'));
+		var step	= parseFloat(node.getAttribute('data-step'));
+		var value	= parseFloat(node.getAttribute('data-value'));
+		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;
+		var precision = node.getAttribute('data-precision') | 0;
+
+		this.min = isNaN(min) ? 0 : min;
+		this.max = isNaN(max) ? 100 : max;
+		this.precision = precision &gt;= 0 ? precision : 0;
+		this.step = step &lt; 0 || isNaN(step) ? 1 : step.toFixed(precision);
+		this.topic = topic;
+		this.node = node;
+		this.unit = unit === null ? '' : unit;
+		this.sensivity = sensivity &gt; 0 ? sensivity : 5;
+		value = isNaN(value) ? this.min : value;
+
+		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);
+
+		this.input = input;
+		sliders[topic] = this;
+		setValue(topic, value);
+	};
+
+	InputSlider.prototype.setInputValue = function setInputValue() {
+		this.input.value = this.value.toFixed(this.precision) + this.unit;
+	};
+
+	var setValue = function setValue(topic, value, send_notify) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		value = parseFloat(value.toFixed(slider.precision));
+
+		if (value &gt; slider.max) value = slider.max;
+		if (value &lt; slider.min)	value = slider.min;
+
+		slider.value = value;
+		slider.node.setAttribute('data-value', value);
+
+		slider.setInputValue();
+
+		if (send_notify === false)
+			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 setStep = function setStep(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.step = parseFloat(value);
+		setValue(topic, slider.value);
+	};
+
+	var setPrecision = function setPrecision(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		value = value | 0;
+		slider.precision = value;
+
+		var step = parseFloat(slider.step.toFixed(value));
+		if (step === 0)
+			slider.step = 1 / Math.pow(10, value);
+
+		setValue(topic, slider.value);
+	};
+
+	var setSensivity = function setSensivity(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		value = value | 0;
+
+		slider.sensivity = value &gt; 0 ? value : 5;
+	};
+
+	var getNode =  function getNode(topic) {
+		return sliders[topic].node;
+	};
+
+	var getPrecision =  function getPrecision(topic) {
+		return sliders[topic].precision;
+	};
+
+	var getStep =  function getStep(topic) {
+		return sliders[topic].step;
+	};
+
+	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() {
+		if (subscribers[this.topic] === undefined)
+			return;
+		for (var i = 0; i &lt; subscribers[this.topic].length; i++)
+			subscribers[this.topic][i](this.value);
+	};
+
+	var createSlider = function createSlider(topic, label) {
+		var slider = document.createElement('div');
+		slider.className = 'ui-input-slider';
+		slider.setAttribute('data-topic', topic);
+
+		if (label !== undefined)
+			slider.setAttribute('data-info', label);
+
+		new InputSlider(slider);
+		return slider;
+	};
+
+	var init = function init() {
+		var elem = document.querySelectorAll('.ui-input-slider');
+		var size = elem.length;
+		for (var i = 0; i &lt; size; i++)
+			new InputSlider(elem[i]);
+	};
+
+	return {
+		init : init,
+		setMax : setMax,
+		setMin : setMin,
+		setUnit : setUnit,
+		setStep : setStep,
+		getNode : getNode,
+		getStep : getStep,
+		setValue : setValue,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe,
+		setPrecision : setPrecision,
+		setSensivity : setSensivity,
+		getPrecision : getPrecision,
+		createSlider : createSlider,
+	};
+
+})();
+
+
+/**
+ * UI-DropDown Select
+ */
+
+var DropDownManager = (function DropdownManager() {
+
+	var subscribers = {};
+	var dropdowns = [];
+	var active = null;
+
+	var visbility = ["hidden", "visible"];
+
+
+	var DropDown = function DropDown(node) {
+		var topic = node.getAttribute('data-topic');
+		var label = node.getAttribute('data-label');
+		var selected = node.getAttribute('data-selected') | 0;
+
+		var select = document.createElement('div');
+		var list = document.createElement('div');
+		var uval = 0;
+		var option = null;
+		var option_value = null;
+
+		list.className = 'ui-dropdown-list';
+		select.className = 'ui-dropdown-select';
+
+		while (node.firstElementChild !== null) {
+			option = node.firstElementChild;
+			option_value = option.getAttribute('data-value');
+
+			if (option_value === null)
+				option.setAttribute('data-value', uval);
+
+			list.appendChild(node.firstElementChild);
+			uval++;
+		}
+
+		node.appendChild(select);
+		node.appendChild(list);
+
+		select.onclick = this.toggle.bind(this);
+		list.onclick = this.updateValue.bind(this);
+		document.addEventListener('click', clickOut);
+
+		this.state = 0;
+		this.time = 0;
+		this.dropmenu = list;
+		this.select = select;
+		this.toggle(false);
+		this.value = {};
+		this.topic = topic;
+
+		if (label)
+			select.textContent = label;
+		else
+			this.setNodeValue(list.children[selected]);
+
+		dropdowns[topic] = this;
+
+	};
+
+	DropDown.prototype.toggle = function toggle(state) {
+		if (typeof(state) === 'boolean')
+			this.state = state === false ? 0 : 1;
+		else
+			this.state = 1 ^ this.state;
+
+		if (active !== this) {
+			if (active)
+				active.toggle(false);
+			active = this;
+		}
+
+		if (this.state === 0)
+			this.dropmenu.setAttribute('data-hidden', 'true');
+		else
+			this.dropmenu.removeAttribute('data-hidden');
+
+	};
+
+	var clickOut = function clickOut(e) {
+		if (active.state === 0 ||
+			e.target === active.dropmenu ||
+			e.target === active.select)
+			return;
+
+		active.toggle(false);
+	};
+
+	DropDown.prototype.updateValue = function updateValue(e) {
+
+		if (Date.now() - this.time &lt; 500)
+			return;
+
+		if (e.target.className !== "ui-dropdown-list") {
+			this.setNodeValue(e.target);
+			this.toggle(false);
+		}
+
+		this.time = Date.now();
+	};
+
+	DropDown.prototype.setNodeValue = function setNodeValue(node) {
+		this.value['name'] = node.textContent;
+		this.value['value'] = node.getAttribute('data-value');
+
+		this.select.textContent = node.textContent;
+		this.select.setAttribute('data-value', this.value['value']);
+
+		notify.call(this);
+	};
+
+	var createDropDown = function createDropDown(topic, options) {
+
+		var dropdown = document.createElement('div');
+		dropdown.setAttribute('data-topic', topic);
+		dropdown.className = 'ui-dropdown';
+
+		for (var i in options) {
+			var x = document.createElement('div');
+			x.setAttribute('data-value', i);
+			x.textContent = options[i];
+			dropdown.appendChild(x);
+		}
+
+		new DropDown(dropdown);
+
+		return dropdown;
+	};
+
+	var setValue = function setValue(topic, index) {
+		if (dropdowns[topic] === undefined ||
+			index &gt;= dropdowns[topic].dropmenu.children.length)
+			return;
+
+		dropdowns[topic].setNodeValue(dropdowns[topic].dropmenu.children[index]);
+	};
+
+	var subscribe = function subscribe(topic, callback) {
+		if (subscribers[topic] === undefined)
+			subscribers[topic] = [];
+		subscribers[topic].push(callback);
+	};
+
+	var unsubscribe = function unsubscribe(topic, callback) {
+		var index = subscribers[topic].indexOf(callback);
+		subscribers[topic].splice(index, 1);
+	};
+
+	var notify = function notify() {
+		if (subscribers[this.topic] === undefined)
+			return;
+
+		for (var i in subscribers[this.topic]) {
+			subscribers[this.topic][i](this.value);
+		}
+	};
+
+	var init = function init() {
+		var elem, size;
+
+		elem = document.querySelectorAll('.ui-dropdown');
+		size = elem.length;
+		for (var i = 0; i &lt; size; i++)
+			new DropDown(elem[i]);
+
+	};
+
+	return {
+		init : init,
+		setValue : setValue,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe,
+		createDropDown : createDropDown
+	};
+
+})();
+
+
+/**
+ * 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) {
+		var obj = buttons[topic];
+		if (obj === undefined)
+			return;
+
+		obj.checkbox.checked = value;
+		notify.call(obj);
+	};
+
+	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() {
+		if (subscribers[this.topic] === undefined)
+			return;
+		for (var i = 0; i &lt; 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 &lt; size; i++)
+			new CheckBox(elem[i]);
+	};
+
+	return {
+		init : init,
+		setValue : setValue,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe
+	};
+
+})();
+
+window.addEventListener("load", function() {
+	BorderImage.init();
+});
+
+var BorderImage = (function BorderImage() {
+
+	var getElemById = document.getElementById.bind(document);
+
+	var subject;
+	var preview;
+	var guidelines = [];
+	var positions = ['top', 'right', 'bottom', 'left'];
+
+	var makeDraggable = function makeDraggable(elem) {
+
+		var offsetTop;
+		var offsetLeft;
+
+		elem.setAttribute('data-draggable', 'true');
+
+		var dragStart = function dragStart(e) {
+			if (e.target.getAttribute('data-draggable') !== 'true' ||
+				e.target !== elem || e.button !== 0)
+				return;
+
+			offsetLeft = e.clientX - elem.offsetLeft;
+			offsetTop = e.clientY - elem.offsetTop;
+
+			document.addEventListener('mousemove', mouseDrag);
+			document.addEventListener('mouseup', dragEnd);
+		};
+
+		var dragEnd = function dragEnd(e) {
+			if (e.button !== 0)
+				return;
+
+			document.removeEventListener('mousemove', mouseDrag);
+			document.removeEventListener('mouseup', dragEnd);
+		};
+
+		var mouseDrag = function mouseDrag(e) {
+
+			elem.style.left = e.clientX - offsetLeft + 'px';
+			elem.style.top = e.clientY - offsetTop + 'px';
+		};
+
+		elem.addEventListener('mousedown', dragStart, false);
+	};
+
+	var PreviewControl = function PreviewControl() {
+
+		var dragging = false;
+		var valueX = null;
+		var valueY = null;
+
+		var dragStart = function dragStart(e) {
+			if (e.button !== 0)
+				return;
+
+			valueX = e.clientX - preview.clientWidth;
+			valueY = e.clientY - preview.clientHeight;
+			dragging = true;
+
+			document.addEventListener('mousemove', mouseDrag);
+		};
+
+		var dragEnd = function dragEnd(e) {
+			if (e.button !== 0 || dragging === false)
+				return;
+
+			document.removeEventListener('mousemove', mouseDrag);
+			dragging = false;
+		};
+
+		var mouseDrag = function mouseDrag(e) {
+			InputSliderManager.setValue('preview-width', e.clientX - valueX);
+			InputSliderManager.setValue('preview-height', e.clientY - valueY);
+		};
+
+		var init = function init() {
+
+			makeDraggable(preview);
+			makeDraggable(subject);
+
+			var handle = document.createElement('div');
+			handle.className = 'resize-handle';
+
+			handle.addEventListener('mousedown', dragStart);
+			document.addEventListener('mouseup', dragEnd);
+
+			preview.appendChild(handle);
+
+		};
+
+		return {
+			init: init
+		};
+
+	}();
+
+	var ImageReader = (function ImageReader() {
+
+		var fReader = new FileReader();
+		var browse = document.createElement('input');
+
+		var loadImage = function loadImage(e) {
+			if (browse.files.length === 0)
+				return;
+
+			var file = browse.files[0];
+
+			if (file.type.slice(0, 5) !== 'image')
+				return;
+
+			fReader.readAsDataURL(file);
+
+			return false;
+		};
+
+		fReader.onload = function(e) {
+			ImageControl.loadRemoteImage(e.target.result);
+		};
+
+		var load = function load() {
+			browse.click();
+		};
+
+		browse.setAttribute('type', 'file');
+		browse.style.display = 'none';
+		browse.onchange = loadImage;
+
+		return {
+			load: load
+		};
+
+	})();
+
+	var ImageControl = (function ImageControl() {
+
+		var scale = 0.5;
+		var imgSource = new Image();
+		var imgState = null;
+		var selected = null;
+
+
+		var topics = ['slice', 'width', 'outset'];
+		var properties = {};
+		properties['border1'] = {
+			fill			: false,
+
+			slice_values	: [27, 27, 27, 27],
+			width_values	: [20, 20, 20, 20],
+			outset_values	: [0, 0, 0, 0],
+
+			slice_units		: [0, 0, 0, 0],
+			width_units		: [0, 0, 0, 0],
+			outset_units	: [0, 0, 0, 0],
+
+			repeat			: [1, 1],
+			size			: [300, 200],
+			preview_area	: 400
+		};
+
+		properties['border2'] = {
+			fill			: false,
+
+			slice_values	: [33, 33, 33, 33],
+			width_values	: [1.5, 1.5, 1.5, 1.5],
+			outset_values	: [0, 0, 0, 0],
+
+			slice_units		: [1, 1, 1, 1],
+			width_units		: [2, 2, 2, 2],
+			outset_units	: [0, 0, 0, 0],
+
+			repeat			: [2, 2],
+			size			: [300, 200],
+			preview_area	: 400
+		};
+
+		properties['border3'] = {
+			fill			: true,
+
+			slice_values	: [15, 15, 15, 15],
+			width_values	: [10, 10, 10, 10],
+			outset_values	: [0, 0, 0, 0],
+
+			slice_units		: [0, 0, 0, 0],
+			width_units		: [0, 0, 0, 0],
+			outset_units	: [0, 0, 0, 0],
+
+			repeat			: [2, 2],
+			size			: [300, 200],
+			preview_area	: 400
+		};
+
+		properties['border4'] = {
+			fill			: false,
+
+			slice_values	: [13, 13, 13, 13],
+			width_values	: [13, 13, 13, 13],
+			outset_values	: [13, 13, 13, 13],
+
+			slice_units		: [0, 0, 0, 0],
+			width_units		: [0, 0, 0, 0],
+			outset_units	: [0, 0, 0, 0],
+
+			repeat			: [0, 0],
+			size			: [300, 200],
+			preview_area	: 400
+		};
+
+		properties['border5'] = {
+			fill			: false,
+
+			slice_values	: [0, 12, 0, 12],
+			width_values	: [0, 12, 0, 12],
+			outset_values	: [0, 0, 0, 0],
+
+			slice_units		: [0, 0, 0, 0],
+			width_units		: [0, 0, 0, 0],
+			outset_units	: [0, 0, 0, 0],
+
+			repeat			: [0, 0],
+			size			: [300, 200],
+			preview_area	: 400,
+		};
+
+		properties['border6'] = {
+			fill			: false,
+
+			slice_values	: [42, 42, 42, 42],
+			width_values	: [42, 42, 42, 42],
+			outset_values	: [0, 0, 0, 0],
+
+			slice_units		: [0, 0, 0, 0],
+			width_units		: [0, 0, 0, 0],
+			outset_units	: [0, 0, 0, 0],
+
+			repeat			: [2, 2],
+			size			: [350, 350],
+			preview_area	: 500,
+		};
+
+
+		var loadLocalImage = function loadLocalImage(source) {
+			var location = "images/" + source;
+			imgSource.src = location;
+		};
+
+		var loadRemoteImage = function loadRemoteImage(source) {
+			imgSource.src = source;
+			if (selected)
+				selected.removeAttribute('selected');
+			Tool.setOutputCSS('source', 'url("' + source + '")');
+		};
+
+		var pickImage = function pickImage(e) {
+			if (e.target.className === 'image') {
+				selected = e.target;
+				selected.setAttribute('selected', 'true');
+				loadRemoteImage(e.target.src);
+				imgState = e.target.getAttribute('data-stateID');
+			}
+		};
+
+		var loadImageState = function loadImageState(stateID) {
+			if (properties[stateID] === undefined)
+				return;
+
+			var prop = properties[stateID];
+			var topic;
+			var unit_array;
+			var value_array;
+
+			for (var i in topics) {
+				for (var j=0; j&lt;4; j++) {
+					topic = topics[i] + '-' + positions[j];
+					unit_array = topics[i] + '_units';
+					value_array = topics[i] + '_values';
+					InputSliderManager.setValue(topic, prop[value_array][j]);
+					DropDownManager.setValue(topic, prop[unit_array][j]);
+				}
+			}
+
+			ButtonManager.setValue('slice-fill', prop['fill']);
+			DropDownManager.setValue('image-repeat-X', prop['repeat'][0]);
+			DropDownManager.setValue('image-repeat-Y', prop['repeat'][1]);
+			InputSliderManager.setValue('preview-width', prop['size'][0]);
+			InputSliderManager.setValue('preview-height', prop['size'][1]);
+			InputSliderManager.setValue('preview-area-height', prop['preview_area']);
+		};
+
+		var update = function update() {
+			scale =  Math.min(300, (30000 / this.width) | 0);
+			setScale(scale);
+			InputSliderManager.setValue('scale', scale, false);
+
+			subject.style.backgroundImage = 'url("' + this.src + '")';
+			preview.style.borderImageSource = 'url("' + this.src + '")';
+
+			guidelines['slice-top'].setMax(this.height);
+			guidelines['slice-right'].setMax(this.width);
+			guidelines['slice-bottom'].setMax(this.height);
+			guidelines['slice-left'].setMax(this.width);
+
+			if (imgState)
+				loadImageState(imgState);
+		};
+
+		var setScale = function setScale(value) {
+			scale = value;
+			var w = imgSource.width * scale / 100 | 0;
+			var h = imgSource.height * scale / 100 | 0;
+			subject.style.width = w + 'px';
+			subject.style.height = h + 'px';
+
+			for (var i = 0; i &lt; positions.length; i++)
+				guidelines['slice-' + positions[i]].updateGuidelinePos();
+		};
+
+		var getScale = function getScale() {
+			return scale/100;
+		};
+
+		var toggleGallery = function toggleGallery() {
+			var gallery = getElemById('image-gallery');
+			var button  = getElemById('toggle-gallery');
+			var state = 1;
+			button.addEventListener('click', function() {
+				state = 1 ^ state;
+				if (state === 0) {
+					gallery.setAttribute('data-collapsed', 'true');
+					button.setAttribute('data-action', 'show');
+				}
+				else {
+					gallery.removeAttribute('data-collapsed');
+					button.setAttribute('data-action', 'hide');
+				}
+			});
+		};
+
+		var init = function init() {
+			var gallery = getElemById('image-gallery');
+			var browse = getElemById('load-image');
+			var remote = getElemById('remote-url');
+			var load_remote = getElemById('load-remote');
+
+			remote.addEventListener('change', function(){
+				loadRemoteImage(this.value);
+			});
+
+			load_remote.addEventListener('click', function(){
+				loadRemoteImage(remote.value);
+			});
+
+			browse.addEventListener('click', ImageReader.load);
+			gallery.addEventListener('click', pickImage);
+			imgSource.addEventListener('load', update);
+
+			InputSliderManager.subscribe('scale', setScale);
+			InputSliderManager.setValue('scale', scale);
+			imgState = 'border1';
+			loadRemoteImage('https://mdn.mozillademos.org/files/6007/border-image-1.png');
+			toggleGallery();
+		};
+
+		return {
+			init: init,
+			getScale : getScale,
+			loadRemoteImage: loadRemoteImage
+		};
+
+	})();
+
+	var GuideLine = function GuideLine(node) {
+		var topic = node.getAttribute('data-topic');
+		var axis = node.getAttribute('data-axis');
+
+		this.node = node;
+		this.topic = topic;
+		this.axis = axis;
+		this.info = topic.split('-')[1];
+
+		this.position = 0;
+		this.value = 0;
+		this.unit = 0;
+		this.max = 0;
+		this.pos = positions.indexOf(this.info);
+
+		guidelines[topic] = this;
+
+		var relative_container = document.createElement('div');
+		var tooltip = document.createElement('div');
+		var tooltip2 = document.createElement('div');
+
+		tooltip.className = 'tooltip';
+		tooltip.setAttribute('data-info', this.info);
+
+		tooltip2.className = 'tooltip2';
+		tooltip2.textContent = this.info;
+		tooltip2.setAttribute('data-info', this.info);
+
+		this.tooltip = tooltip;
+
+		relative_container.appendChild(tooltip);
+		relative_container.appendChild(tooltip2);
+		node.appendChild(relative_container);
+
+		var startX = 0;
+		var startY = 0;
+		var start = 0;
+
+		var startDrag = function startDrag(e) {
+			startX = e.clientX;
+			startY = e.clientY;
+			start = guidelines[topic].position;
+			document.body.setAttribute('data-move', axis);
+			relative_container.setAttribute('data-active', '');
+			node.setAttribute('data-active', '');
+
+			document.addEventListener('mousemove', updateGuideline);
+			document.addEventListener('mouseup', endDrag);
+		};
+
+		var endDrag = function endDrag() {
+			document.body.removeAttribute('data-move');
+			relative_container.removeAttribute('data-active');
+			node.removeAttribute('data-active');
+
+			document.removeEventListener('mousemove', updateGuideline);
+		};
+
+		var updateGuideline = function updateGuideline(e) {
+			var value;
+			if (topic === 'slice-top')
+				value = e.clientY - startY + start;
+
+			if (topic === 'slice-right')
+				value = startX - e.clientX + start;
+
+			if (topic === 'slice-bottom')
+				value = startY - e.clientY + start;
+
+			if (topic === 'slice-left')
+				value = e.clientX - startX + start;
+
+			if (this.unit === 0)
+				InputSliderManager.setValue(topic, value * 1 / ImageControl.getScale() | 0);
+			else {
+				InputSliderManager.setValue(topic, (value * 100 / (this.max * ImageControl.getScale())) | 0);
+			}
+
+		}.bind(this);
+
+		node.addEventListener("mousedown", startDrag);
+
+		InputSliderManager.subscribe(topic, this.setPosition.bind(this));
+		InputSliderManager.setValue(topic, this.position);
+	};
+
+
+	GuideLine.prototype.updateGuidelinePos = function updateGuidelinePos() {
+		if (this.unit === 0)
+			this.position = this.value * ImageControl.getScale() | 0;
+		else
+			this.position = this.value * this.max * ImageControl.getScale() / 100 | 0;
+
+		this.node.style[this.info] = this.position + 'px';
+	};
+
+	GuideLine.prototype.setPosition = function setPosition(value) {
+		this.value = value;
+		this.tooltip.textContent = value;
+		this.updateGuidelinePos();
+		Tool.setBorderSlice(this.pos, value);
+	};
+
+	GuideLine.prototype.setMax = function setMax(max) {
+		this.max = max;
+		this.updateLimit();
+	};
+
+	GuideLine.prototype.updateLimit = function updateLimit() {
+		if (this.unit === 1)
+			InputSliderManager.setMax(this.topic, 100);
+		else
+			InputSliderManager.setMax(this.topic, this.max);
+	};
+
+	GuideLine.prototype.setUnit = function setUnit(type) {
+		if (type === '%')	this.unit = 1;
+		if (type === '')	this.unit = 0;
+		this.updateLimit();
+	};
+
+	/*
+	 * Unit panel
+	 */
+	var UnitPanel = (function UnitPanel () {
+
+		var panel;
+		var title;
+		var precision;
+		var step;
+		var unit_topic = null; // settings are made for this topic
+		var step_option = [1, 0.1, 0.01];
+
+		var updatePrecision = function updatePrecision(value) {
+			InputSliderManager.setPrecision('unit-step', value);
+			InputSliderManager.setStep('unit-step', step_option[value]);
+			InputSliderManager.setMin('unit-step', step_option[value]);
+
+			if (unit_topic)
+				InputSliderManager.setPrecision(unit_topic, value);
+		};
+
+		var updateUnitSettings = function updateUnitSettings(value) {
+			if (unit_topic)
+				InputSliderManager.setStep(unit_topic, value);
+		};
+
+		var show = function show(e) {
+			var topic = e.target.getAttribute('data-topic');
+			var precision = InputSliderManager.getPrecision(topic);
+			var step = InputSliderManager.getStep(topic);
+
+			unit_topic = topic;
+			title.textContent = topic;
+
+			panel.setAttribute('data-active', 'true');
+			panel.style.top = e.target.offsetTop - 40 + 'px';
+			panel.style.left = e.target.offsetLeft + 30 + 'px';
+
+			InputSliderManager.setValue('unit-precision', precision);
+			InputSliderManager.setValue('unit-step', step);
+		};
+
+		var init = function init() {
+			panel = document.createElement('div');
+			title = document.createElement('div');
+			var close = document.createElement('div');
+
+			step = InputSliderManager.createSlider('unit-step', 'step');
+			precision = InputSliderManager.createSlider('unit-precision', 'precision');
+
+			InputSliderManager.setStep('unit-precision', 1);
+			InputSliderManager.setMax('unit-precision', 2);
+			InputSliderManager.setValue('unit-precision', 2);
+			InputSliderManager.setSensivity('unit-precision', 20);
+
+			InputSliderManager.setValue('unit-step', 1);
+			InputSliderManager.setStep('unit-step', 0.01);
+			InputSliderManager.setPrecision('unit-step', 2);
+
+			InputSliderManager.subscribe('unit-precision', updatePrecision);
+			InputSliderManager.subscribe('unit-step', updateUnitSettings);
+
+			close.addEventListener('click', function () {
+				panel.setAttribute('data-active', 'false');
+			});
+
+			title.textContent = 'Properties';
+			title.className = 'title';
+			close.className = 'close';
+			panel.id = 'unit-settings';
+			panel.setAttribute('data-active', 'false');
+			panel.appendChild(title);
+			panel.appendChild(precision);
+			panel.appendChild(step);
+			panel.appendChild(close);
+			document.body.appendChild(panel);
+		};
+
+		return {
+			init : init,
+			show : show
+		};
+
+	})();
+
+	/**
+	 * Tool Manager
+	 */
+	var Tool = (function Tool() {
+		var preview_area;
+		var dropdown_unit_options = [
+			{ '' : '--', '%' : '%'},
+			{ 'px' : 'px', '%' : '%', 'em' : 'em'},
+			{ 'px' : 'px', 'em' : 'em'},
+		];
+
+		var border_slice = [];
+		var border_width = [];
+		var border_outset = [];
+
+		var border_slice_values = [];
+		var border_width_values = [];
+		var border_outset_values = [];
+
+		var border_slice_units = ['', '', '', ''];
+		var border_width_units = ['px', 'px', 'px', 'px'];
+		var border_outset_units = ['px', 'px', 'px', 'px'];
+
+		var border_fill = false;
+		var border_repeat = ['round', 'round'];
+		var CSS_code = {
+			'source' : null,
+			'slice' : null,
+			'width' : null,
+			'outset' : null,
+			'repeat' : null
+		};
+
+		var setBorderSlice = function setBorderSlice(positionID, value) {
+			border_slice[positionID] = value + border_slice_units[positionID];
+			updateBorderSlice();
+		};
+
+		var updateBorderSlice = function updateBorderSlice() {
+			var value = border_slice.join(' ');
+			if (border_fill === true)
+				value += ' fill';
+
+			preview.style.borderImageSlice = value;
+			setOutputCSS('slice', value);
+		};
+
+		var setBorderFill = function setBorderFill(value) {
+			border_fill = value;
+			var bimgslice = border_slice.join(' ');;
+			if (value === true)
+				bimgslice += ' fill';
+
+			preview.style.borderImageSlice = bimgslice;
+		};
+
+		var updateBorderWidth = function updateBorderWidth() {
+			var value = border_width.join(' ');
+			preview.style.borderImageWidth = value;
+			setOutputCSS('width', value);
+		};
+
+		var updateBorderOutset = function updateBorderOutset() {
+			var value = border_outset.join(' ');
+			preview.style.borderImageOutset = border_outset.join(' ');
+			setOutputCSS('outset', value);
+		};
+
+		var setBorderRepeat = function setBorderRepeat(obj) {
+			border_repeat[obj.value] = obj.name;
+			var value = border_repeat.join(' ');
+			preview.style.borderImageRepeat = value;
+			setOutputCSS('repeat', value);
+		};
+
+		var setOutputCSS = function setOutputCSS(topic, value) {
+			CSS_code[topic].textContent = value + ';';
+		};
+
+		var setPreviewFontSize = function setPreviewFontSize(value) {
+			preview.style.fontSize = value + 'px';
+		};
+
+		var setPreviewWidth = function setPreviewWidth(value) {
+			preview.style.width = value + 'px';
+		};
+
+		var setPreviewHeight = function setPreviewHeight(value) {
+			preview.style.height = value + 'px';
+		};
+
+		var setPreviewAreaHeight = function setPreviewAreaHeight(value) {
+			preview_area.style.height = value + 'px';
+		};
+
+		var updateDragOption = function updateDragOption(value) {
+			if (value === true)
+				subject.setAttribute('data-draggable', 'true');
+			else
+				subject.removeAttribute('data-draggable');
+		};
+
+		var createProperty = function createProperty(topic, labelID, optionsID) {
+
+			var slider = InputSliderManager.createSlider(topic, positions[labelID]);
+			var dropdown = DropDownManager.createDropDown(topic, dropdown_unit_options[optionsID]);
+
+			InputSliderManager.setSensivity(topic, 3);
+			InputSliderManager.setPrecision(topic, 1);
+
+			var property = document.createElement('div');
+			var config = document.createElement('div');
+
+			property.className = 'property';
+			config.className = 'config';
+			config.setAttribute('data-topic', topic);
+			config.addEventListener('click', UnitPanel.show);
+
+			property.appendChild(slider);
+			property.appendChild(dropdown);
+			property.appendChild(config);
+
+			return property;
+		};
+
+		var initBorderSliceControls = function initBorderSliceControls() {
+			var container = getElemById('border-slice-control');
+
+			var listenForChanges = function listenForChanges(topic, id) {
+				InputSliderManager.subscribe(topic, function(value) {
+					border_slice_values[id] = value;
+					border_slice[id] = value + border_slice_units[id];
+					updateBorderSlice();
+				});
+
+				DropDownManager.subscribe(topic, function(obj) {
+					guidelines[topic].setUnit(obj.value);
+					border_slice_units[id] = obj.value;
+					border_slice[id] = border_slice_values[id] + obj.value;
+					updateBorderSlice();
+				});
+			};
+
+			for (var i = 0; i &lt; positions.length; i++) {
+				var topic = 'slice-' + positions[i];
+				var property = createProperty(topic, i, 0);
+				listenForChanges(topic, i);
+
+				container.appendChild(property);
+			}
+
+			container.appendChild(container.children[1]);
+
+		};
+
+		var initBorderWidthControls = function initBorderWidthControls() {
+			var container = getElemById('border-width-control');
+
+			var listenForChanges = function listenForChanges(topic, id) {
+				InputSliderManager.subscribe(topic, function(value) {
+					border_width_values[id] = value;
+					border_width[id] = value + border_width_units[id];
+					updateBorderWidth();
+				});
+
+				DropDownManager.subscribe(topic, function(obj) {
+					if (obj.value === '%')
+						InputSliderManager.setMax(topic, 100);
+					else
+						InputSliderManager.setMax(topic, 1000);
+
+					border_width_units[id] = obj.value;
+					border_width[id] = border_width_values[id] + obj.value;
+					updateBorderWidth();
+				});
+			};
+
+			for (var i = 0; i &lt; positions.length; i++) {
+				var topic = 'width-' + positions[i];
+				var property = createProperty(topic, i, 1);
+				InputSliderManager.setMax(topic, 1000);
+				listenForChanges(topic, i);
+
+				container.appendChild(property);
+			}
+		};
+
+		var initBorderOutsetControls = function initBorderOutsetControls() {
+
+			var container = getElemById('border-outset-control');
+
+			var listenForChanges = function listenForChanges(topic, id) {
+				InputSliderManager.subscribe(topic, function(value) {
+					border_outset_values[id] = value;
+					border_outset[id] = value + border_outset_units[id];
+					updateBorderOutset();
+				});
+
+				DropDownManager.subscribe(topic, function(obj) {
+					border_outset_units[id] = obj.value;
+					border_outset[id] = border_outset_values[id] + obj.value;
+					updateBorderOutset();
+				});
+			};
+
+			for (var i = 0; i &lt; positions.length; i++) {
+				var topic = 'outset-' + positions[i];
+				var property = createProperty(topic, i, 2);
+				InputSliderManager.setMax(topic, 1000);
+				listenForChanges(topic, i);
+
+				container.appendChild(property);
+			}
+		};
+
+		var init = function init() {
+
+			var gallery =
+			subject = getElemById('subject');
+			preview = getElemById("preview");
+			preview_area = getElemById("preview_section");
+
+
+			CSS_code['source'] = getElemById("out-border-source");
+			CSS_code['slice'] = getElemById("out-border-slice");
+			CSS_code['width'] = getElemById("out-border-width");
+			CSS_code['outset'] = getElemById("out-border-outset");
+			CSS_code['repeat'] = getElemById("out-border-repeat");
+
+			initBorderSliceControls();
+			initBorderWidthControls();
+			initBorderOutsetControls();
+
+			var elem = document.querySelectorAll('.guideline');
+			var size = elem.length;
+			for (var i = 0; i &lt; size; i++)
+				new GuideLine(elem[i]);
+
+			PreviewControl.init();
+
+			ButtonManager.subscribe('slice-fill',setBorderFill);
+			ButtonManager.subscribe('drag-subject', updateDragOption);
+			ButtonManager.setValue('drag-subject', false);
+
+			DropDownManager.subscribe('image-repeat-X', setBorderRepeat);
+			DropDownManager.subscribe('image-repeat-Y', setBorderRepeat);
+
+			InputSliderManager.subscribe('preview-area-height', setPreviewAreaHeight);
+			InputSliderManager.subscribe('preview-width', setPreviewWidth);
+			InputSliderManager.subscribe('preview-height', setPreviewHeight);
+			InputSliderManager.subscribe('font-size', setPreviewFontSize);
+			InputSliderManager.setValue('preview-width', 300);
+			InputSliderManager.setValue('preview-height', 200);
+		};
+
+		return {
+			init: init,
+			setOutputCSS: setOutputCSS,
+			setBorderSlice: setBorderSlice
+		};
+
+	})();
+
+	/**
+	 * Init Tool
+	 */
+	var init = function init() {
+		InputSliderManager.init();
+		DropDownManager.init();
+		ButtonManager.init();
+		UnitPanel.init();
+		Tool.init();
+		ImageControl.init();
+	};
+
+	return {
+		init : init
+	};
+
+})();
+
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Border_Image_Generator', '100%', '1270px') }}</p>
+
+<p> </p>
diff --git a/files/ru/web/css/css_backgrounds_and_borders/border-radius_generator/index.html b/files/ru/web/css/css_backgrounds_and_borders/border-radius_generator/index.html
new file mode 100644
index 0000000000..103a3e0965
--- /dev/null
+++ b/files/ru/web/css/css_backgrounds_and_borders/border-radius_generator/index.html
@@ -0,0 +1,1600 @@
+---
+title: Border-radius генератор
+slug: Web/CSS/CSS_Backgrounds_and_Borders/Border-radius_generator
+translation_of: Web/CSS/CSS_Background_and_Borders/Border-radius_generator
+original_slug: Web/CSS/CSS_Background_and_Borders/Border-radius_generator
+---
+<p>С помощью этого инструмента вы можете создать CSS3 {{cssxref("border-radius")}} эффекты.</p>
+
+<div class="hidden">
+<h2 id="border-radius-generator" name="border-radius-generator">border-radius</h2>
+
+<h3 id="HTML_Content">HTML Content</h3>
+
+<pre class="brush: html">&lt;div id="container"&gt;
+    &lt;div class="group section"&gt;
+        &lt;div id="preview" class="col span_12"&gt;
+            &lt;div id="subject"&gt;
+                &lt;div id="top-left" class="radius-container"
+                    data-X="left" data-Y="top"&gt;
+                &lt;/div&gt;
+                &lt;div id="top-right" class="radius-container"
+                    data-X="right" data-Y="top"&gt;
+                &lt;/div&gt;
+                &lt;div id="bottom-right" class="radius-container"
+                    data-X="right" data-Y="bottom"&gt;
+                &lt;/div&gt;
+                &lt;div id="bottom-left" class="radius-container"
+                    data-X="left" data-Y="bottom"&gt;
+                &lt;/div&gt;
+
+                &lt;div id="radius-ui-sliders"&gt;
+                    &lt;div id="tlr" class="ui-input-slider" data-topic="top-left"
+                         data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
+
+                    &lt;div id="tlw" class="ui-input-slider" data-topic="top-left-w"
+                         data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
+
+                    &lt;div id="tlh" class="ui-input-slider" data-topic="top-left-h"
+                        data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
+
+                    &lt;div id="trr" class="ui-input-slider" data-topic="top-right"
+                         data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
+
+                    &lt;div id="trw" class="ui-input-slider" data-topic="top-right-w"
+                         data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
+
+                    &lt;div id="trh" class="ui-input-slider" data-topic="top-right-h"
+                        data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
+
+                    &lt;div id="brr" class="ui-input-slider" data-topic="bottom-right"
+                         data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
+
+                    &lt;div id="brw" class="ui-input-slider" data-topic="bottom-right-w"
+                         data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
+
+                    &lt;div id="brh" class="ui-input-slider" data-topic="bottom-right-h"
+                        data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
+
+                    &lt;div id="blr" class="ui-input-slider" data-topic="bottom-left"
+                         data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
+
+                    &lt;div id="blw" class="ui-input-slider" data-topic="bottom-left-w"
+                         data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
+
+                    &lt;div id="blh" class="ui-input-slider" data-topic="bottom-left-h"
+                        data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
+                &lt;/div&gt;
+            &lt;/div&gt;
+        &lt;/div&gt;
+    &lt;/div&gt;
+    &lt;div id="controls" class="group section"&gt;
+
+        &lt;div class="group section"&gt;
+            &lt;div id="dimensions"&gt;
+                &lt;div class="ui-input-slider" data-topic="width" data-info="width"
+                     data-unit=" px" data-min="150" data-max="700" data-sensivity="1"&gt;&lt;/div&gt;
+
+                &lt;div class="ui-input-slider" data-topic="height" data-info="height"
+                    data-unit=" px" data-min="75" data-max="350" data-sensivity="1"&gt;&lt;/div&gt;
+            &lt;/div&gt;
+
+            &lt;div id="output"&gt;&lt;/div&gt;
+        &lt;/div&gt;
+
+        &lt;div class="group section"&gt;
+            &lt;div id="radius-lock"&gt;
+                &lt;div class="info"&gt; rounded corner &lt;/div&gt;
+                &lt;div class="ui-checkbox" data-topic='top-left'&gt;&lt;/div&gt;
+                &lt;div class="ui-checkbox" data-topic='top-right'&gt;&lt;/div&gt;
+                &lt;div class="ui-checkbox" data-topic='bottom-right'&gt;&lt;/div&gt;
+                &lt;div class="ui-checkbox" data-topic='bottom-left'&gt;&lt;/div&gt;
+            &lt;/div&gt;
+
+            &lt;div id="unit-selection"&gt;
+                &lt;div class="info"&gt; select border units &lt;/div&gt;
+            &lt;/div&gt;
+        &lt;/div&gt;
+
+    &lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="CSS_Content">CSS Content</h3>
+
+<pre class="brush: css">/*  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 &gt; 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 &gt; input {
+ 	display: none;
+}
+
+.ui-checkbox &gt; 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 &gt; label:hover {
+	cursor: pointer;
+}
+
+.ui-checkbox &gt; 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 &gt; 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;
+}
+
+
+</pre>
+
+<h3 id="JavaScript_Content">JavaScript Content</h3>
+
+<pre class="brush: js"><code class="language-js">'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 &gt; 0 ? max : 100;
+		this.step = step === 0 ? 1 : step;
+		this.topic = topic;
+		this.node = node;
+		this.unit = unit;
+		this.sensivity = sensivity &gt; 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 &gt; slider.max) value = slider.max;
+		if (value &lt; slider.min)	value = slider.min;
+
+		slider.value = value;
+		slider.node.setAttribute('data-value', value);
+
+		if (send_notify !== undefined &amp;&amp; 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 &lt; 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 &lt; 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 &lt; 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' &amp;&amp; y == 'top') handle.className = 'handle handle-top-left'
+		if (x === 'right' &amp;&amp; y == 'top') handle.className = 'handle handle-top-right';
+		if (x === 'right' &amp;&amp; y == 'bottom') handle.className = 'handle handle-bottom-right';
+		if (x === 'left' &amp;&amp; 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 &amp;&amp; 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 &lt; 0)	this.size = 0;
+			if (this.size &gt; this.maxR)	this.size = this.maxR;
+			this.updateRadius();
+			this.updateBorderRadius();
+			return;
+		}
+
+		if (deltaX) {
+			this.width += this.resizeX * deltaX;
+			if (this.width &lt; 0)	this.width = 0;
+			if (this.width &gt; this.maxW)	this.width = this.maxW;
+			this.updateWidth();
+		}
+
+		if (deltaY) {
+			this.height += this.resizeY * deltaY;
+			if (this.height &lt; 0) this.height = 0;
+			if (this.height &gt; 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 &lt; 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 &lt; 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 &lt; 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
+	}
+
+})();
+
+
+</code></pre>
+</div>
+
+<p>{{ EmbedLiveSample('border-radius-generator', '100%', '800px', '') }}</p>
+
+<p> </p>
diff --git a/files/ru/web/css/css_backgrounds_and_borders/box-shadow_generator/index.html b/files/ru/web/css/css_backgrounds_and_borders/box-shadow_generator/index.html
new file mode 100644
index 0000000000..8252c21112
--- /dev/null
+++ b/files/ru/web/css/css_backgrounds_and_borders/box-shadow_generator/index.html
@@ -0,0 +1,2885 @@
+---
+title: Генератор теней
+slug: Web/CSS/CSS_Backgrounds_and_Borders/Box-shadow_generator
+tags:
+  - CSS3
+  - Тень
+  - инструменты
+translation_of: Web/CSS/CSS_Background_and_Borders/Box-shadow_generator
+original_slug: Web/CSS/CSS_Background_and_Borders/Box-shadow_generator
+---
+<p>Этот инструмент позволяет вам создавать CSS {{cssxref("box-shadow")}} эффекты, добавлять тени вашим элементам.</p>
+
+<div class="hidden">
+<h2 id="box-shadow_generator" name="box-shadow_generator">Генератор box-shadow generator</h2>
+
+<h3 id="HTML_Content">HTML Content</h3>
+
+<pre class="brush: html">&lt;div id="container"&gt;
+    &lt;div class="group section"&gt;
+        &lt;div id="layer_manager"&gt;
+            &lt;div class="group section"&gt;
+                &lt;div class="button" data-type="add"&gt; &lt;/div&gt;
+                &lt;div class="button" data-type="move-up"&gt; &lt;/div&gt;
+                &lt;div class="button" data-type="move-down"&gt; &lt;/div&gt;
+            &lt;/div&gt;
+            &lt;div id="stack_container"&gt;&lt;/div&gt;
+        &lt;/div&gt;
+
+        &lt;div id="preview_zone"&gt;
+            &lt;div id="layer_menu" class="col span_12"&gt;
+                &lt;div class="button" id="element" data-type="subject" data-title="element"&gt; элементы &lt;/div&gt;
+                &lt;div class="button" id="before" data-type="subject" data-title=":before"&gt;
+                    :before
+                    &lt;span class="delete" data-type="disable"&gt;&lt;/span&gt;
+                &lt;/div&gt;
+                &lt;div class="button" id="after" data-type="subject" data-title=":after"&gt;
+                    :after
+                    &lt;span class="delete" data-type="disable"&gt;&lt;/span&gt;
+                &lt;/div&gt;
+                &lt;div class="ui-checkbox" data-topic='before' data-label=":before"&gt;&lt;/div&gt;
+                &lt;div class="ui-checkbox" data-topic='after' data-label=":after"&gt;&lt;/div&gt;
+            &lt;/div&gt;
+
+            &lt;div id="preview"&gt;
+                &lt;div id="obj-element"&gt;
+                    &lt;div class="content"&gt; &lt;/div&gt;
+                    &lt;div id="obj-before"&gt; &lt;/div&gt;
+                    &lt;div id="obj-after"&gt; &lt;/div&gt;
+                &lt;/div&gt;
+            &lt;/div&gt;
+        &lt;/div&gt;
+    &lt;/div&gt;
+
+    &lt;div id="controls" class="group section"&gt;
+        &lt;div class="wrap-left"&gt;
+            &lt;div class="colorpicker category"&gt;
+                &lt;div class="title"&gt; &lt;/div&gt;
+                &lt;div id="colorpicker" class="group"&gt;
+                    &lt;div id="gradient" class="gradient"&gt;
+                        &lt;div id="gradient_picker"&gt; &lt;/div&gt;
+                    &lt;/div&gt;
+                    &lt;div id="hue" data-topic="hue" class="hue"&gt;
+                        &lt;div id="hue_selector"&gt; &lt;/div&gt;
+                    &lt;/div&gt;
+                    &lt;div class="info"&gt;
+                        &lt;div class="input" data-topic="hue" data-title='H:' data-action="HSV"&gt;&lt;/div&gt;
+                        &lt;div class="input" data-topic="saturation" data-title='S:' data-action="HSV"&gt;&lt;/div&gt;
+                        &lt;div class="input" data-topic="value" data-title='V:' data-action="HSV"&gt;&lt;/div&gt;
+                    &lt;/div&gt;
+                    &lt;div class="alpha"&gt;
+                        &lt;div id="alpha" data-topic="alpha"&gt;
+                            &lt;div id="alpha_selector"&gt; &lt;/div&gt;
+                        &lt;/div&gt;
+                    &lt;/div&gt;
+                    &lt;div class="info"&gt;
+                        &lt;div class="input" data-topic="r" data-title='R:' data-action="RGB"&gt;&lt;/div&gt;
+                        &lt;div class="input" data-topic="g" data-title='G:' data-action="RGB"&gt;&lt;/div&gt;
+                        &lt;div class="input" data-topic="b" data-title='B:' data-action="RGB"&gt;&lt;/div&gt;
+                    &lt;/div&gt;
+                    &lt;div class="preview block"&gt;
+                        &lt;div id="output_color"&gt; &lt;/div&gt;
+                    &lt;/div&gt;
+                    &lt;div class="block info"&gt;
+                        &lt;div class="input" data-topic="a" data-title='alpha:' data-action="alpha"&gt;&lt;/div&gt;
+                        &lt;div class="input" data-topic="hexa" data-title='' data-action="hexa"&gt;&lt;/div&gt;
+                    &lt;/div&gt;
+                &lt;/div&gt;
+            &lt;/div&gt;
+        &lt;/div&gt;
+
+        &lt;div class="wrap-right"&gt;
+
+            &lt;div id="shadow_properties" class="category"&gt;
+                &lt;div class="title"&gt; Shadow properties &lt;/div&gt;
+                &lt;div class="group"&gt;
+                    &lt;div class="group property"&gt;
+                        &lt;div class="ui-slider-name"&gt; inset &lt;/div&gt;
+                        &lt;div class="ui-checkbox" data-topic='inset'&gt;&lt;/div&gt;
+                    &lt;/div&gt;
+                    &lt;div class="slidergroup"&gt;
+                        &lt;div class="ui-slider-name"&gt; Position x &lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="posX" data-type="sub"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider" data-topic="posX"
+                            data-min="-500" data-max="500" data-step="1"&gt; &lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="posX" data-type="add"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider-input" data-topic="posX" data-unit="px"&gt;&lt;/div&gt;
+                    &lt;/div&gt;
+                    &lt;div class="slidergroup"&gt;
+                        &lt;div class="ui-slider-name"&gt; Position y &lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="posY" data-type="sub"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider" data-topic="posY"
+                            data-min="-500" data-max="500" data-step="1"&gt; &lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="posY" data-type="add"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider-input" data-topic="posY" data-unit="px"&gt;&lt;/div&gt;
+                    &lt;/div&gt;
+                    &lt;div class="slidergroup"&gt;
+                        &lt;div class="ui-slider-name"&gt; Blur &lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="blur" data-type="sub"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider" data-topic="blur"
+                            data-min="0" data-max="200" data-step="1"&gt; &lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="blur" data-type="add"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider-input" data-topic="blur" data-unit="px"&gt;&lt;/div&gt;
+                    &lt;/div&gt;
+                    &lt;div class="slidergroup"&gt;
+                        &lt;div class="ui-slider-name"&gt; Spread &lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="spread" data-type="sub"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider" data-topic="spread"
+                            data-min="-100"    data-max="100" data-step="1" data-value="50"&gt;
+                        &lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="spread" data-type="add"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider-input" data-topic="spread" data-unit="px"&gt;&lt;/div&gt;
+                    &lt;/div&gt;
+                &lt;/div&gt;
+            &lt;/div&gt;
+
+            &lt;div id="element_properties" class="category"&gt;
+                &lt;div class="title"&gt; Параметры элемента&lt;/div&gt;
+                &lt;div class="group"&gt;
+                    &lt;div class="group property"&gt;
+                        &lt;div class="ui-slider-name"&gt; border &lt;/div&gt;
+                        &lt;div class="ui-checkbox" data-topic='border-state' data-state="true"&gt;&lt;/div&gt;
+                    &lt;/div&gt;
+                    &lt;div id="z-index" class="slidergroup"&gt;
+                        &lt;div class="ui-slider-name"&gt; z-index &lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="z-index" data-type="sub"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider" data-topic="z-index"
+                            data-min="-10" data-max="10" data-step="1"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="z-index" data-type="add"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider-input" data-topic="z-index"&gt;&lt;/div&gt;
+                    &lt;/div&gt;
+                    &lt;div class="slidergroup"&gt;
+                        &lt;div class="ui-slider-name"&gt; top &lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="top" data-type="sub"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider" data-topic="top"
+                            data-min="-500" data-max="500" data-step="1"&gt; &lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="top" data-type="add"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider-input" data-topic="top" data-unit="px"&gt;&lt;/div&gt;
+                    &lt;/div&gt;
+                    &lt;div class="slidergroup"&gt;
+                        &lt;div class="ui-slider-name"&gt; left &lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="left" data-type="sub"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider" data-topic="left"
+                            data-min="-300" data-max="700" data-step="1"&gt; &lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="left" data-type="add"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider-input" data-topic="left" data-unit="px"&gt;&lt;/div&gt;
+                    &lt;/div&gt;
+                    &lt;div id="transform_rotate" class="slidergroup"&gt;
+                        &lt;div class="ui-slider-name"&gt; Rotate &lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="rotate" data-type="sub"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider" data-topic="rotate"
+                            data-min="-360" data-max="360" data-step="1" data-value="0"&gt;
+                        &lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="rotate" data-type="add"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider-input" data-topic="rotate" data-unit="deg"&gt;&lt;/div&gt;
+                    &lt;/div&gt;
+                    &lt;div class="slidergroup"&gt;
+                        &lt;div class="ui-slider-name"&gt; Width &lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="width" data-type="sub"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider" data-topic="width"
+                            data-min="0" data-max="1000" data-step="1" data-value="200"&gt;
+                        &lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="width" data-type="add"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider-input" data-topic="width"  data-unit="px"&gt;&lt;/div&gt;
+                    &lt;/div&gt;
+                    &lt;div class="slidergroup"&gt;
+                        &lt;div class="ui-slider-name"&gt; Height &lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="height" data-type="sub"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider" data-topic="height"
+                            data-min="0" data-max="400" data-step="1" data-value="200"&gt;
+                        &lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="height" data-type="add"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider-input" data-topic="height" data-unit="px"&gt;&lt;/div&gt;
+                    &lt;/div&gt;
+                &lt;/div&gt;
+            &lt;/div&gt;
+
+            &lt;div id="output" class="category"&gt;
+                &lt;div id="menu" class="menu"&gt;&lt;/div&gt;
+                &lt;div class="title"&gt;    CSS-код &lt;/div&gt;
+                &lt;div class="group" style="border-top-left-radius: 0;"&gt;
+                    &lt;div class="output" data-topic="element" data-name="element"
+                        data-prop="width height background-color position=[relative] box-shadow"&gt;
+                    &lt;/div&gt;
+                    &lt;div class="output" data-topic="before" data-name="element:before"
+                        data-prop="content=[&amp;quot;&amp;quot;] position=[absolute] width height top left z-index background-color box-shadow transform -webkit-transform -ms-transform"&gt;
+                    &lt;/div&gt;
+                    &lt;div class="output" data-topic="after" data-name="element:after"
+                        data-prop="content=[&amp;quot;&amp;quot;] position=[absolute] width height top left z-index background-color box-shadow transform -webkit-transform -ms-transform"&gt;
+                    &lt;/div&gt;
+                &lt;/div&gt;
+            &lt;/div&gt;
+        &lt;/div&gt;
+    &lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="CSS_Content">CSS Content</h3>
+
+<pre class="brush: css">/*  GRID OF TWELVE
+ * ========================================================================== */
+
+.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 Slider
+ */
+
+.slidergroup {
+	height: 20px;
+	margin: 10px 0;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	-moz-user-select: none;
+	user-select: none;
+}
+
+.slidergroup * {
+	float: left;
+	height: 100%;
+	line-height: 100%;
+}
+
+/* Slider */
+
+.ui-slider {
+	height: 10px;
+	width: 200px;
+	margin: 4px 10px;
+	display: block;
+	border: 1px solid #999;
+	border-radius: 3px;
+	background: #EEE;
+}
+
+.ui-slider:hover {
+	cursor: pointer;
+}
+
+.ui-slider-name {
+	width: 90px;
+	padding: 0 10px 0 0;
+	text-align: right;
+	text-transform: lowercase;
+}
+
+.ui-slider-pointer {
+	width: 13px;
+	height: 13px;
+	background-color: #EEE;
+	border: 1px solid #2C9FC9;
+	border-radius: 3px;
+	position: relative;
+	top: -3px;
+	left: 0%;
+}
+
+.ui-slider-btn-set {
+	width: 25px;
+	background-color: #2C9FC9;
+	border-radius: 3px;
+	color: #FFF;
+	font-weight: bold;
+	text-align: center;
+}
+
+.ui-slider-btn-set:hover {
+	background-color: #379B4A;
+	cursor: pointer;
+}
+
+.ui-slider-input &gt; input {
+	margin: 0 10px;
+	padding: 0;
+	width: 50px;
+	text-align: center;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+/*
+ * UI Button
+ */
+
+/* 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 &gt; input {
+ 	display: none;
+}
+
+.ui-checkbox &gt; 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 &gt; label:hover {
+	cursor: pointer;
+}
+
+.ui-checkbox &gt; input:checked + label {
+	background-image: url("https://mdn.mozillademos.org/files/5681/checked.png");
+	background-color: #379B4A;
+}
+
+/*
+ * BOX SHADOW GENERATOR TOOL
+ */
+
+body {
+	max-width: 1000px;
+	height: 800px;
+	margin: 20px auto 0;
+
+	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;
+}
+
+#container {
+	width: 100%;
+	padding: 2px;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+
+/* container with shadows stacks */
+#stack_container {
+	height: 400px;
+	overflow: hidden;
+	position: relative;
+	border: 1px solid #CCC;
+	border-radius: 3px;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+#stack_container .container {
+	height: 100%;
+	width: 100%;
+	position: absolute;
+	left: 100%;
+	transition-property: left;
+	transition-duration: 0.5s;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+
+#stack_container .title {
+	text-align: center;
+	font-weight: bold;
+	line-height: 2em;
+	border-bottom: 1px solid #43A6E1;
+	color: #666;
+}
+
+
+/*
+ * Stack of Layers for shadow
+ */
+
+#layer_manager {
+	width: 17%;
+	background-color: #FEFEFE;
+	margin: 0 1% 0 0;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+	float: left;
+}
+
+
+#layer_manager .button {
+	width: 30%;
+	height: 25px;
+	margin:0 0 10px;
+	color: #333;
+	background-color: #EEE;
+	text-align: center;
+	font-size: 0.75em;
+	line-height: 1.5em;
+	border: 1px solid #CCC;
+	border-radius: 3px;
+
+	display: block;
+	background-position: center center;
+	background-repeat: no-repeat;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+	float: left;
+}
+
+#layer_manager .button:hover {
+	background-color: #3380C4;
+	border: 1px solid #3380C4;
+	cursor: pointer;
+}
+
+#layer_manager [data-type='add'] {
+	background-image: url("https://mdn.mozillademos.org/files/5685/add-black.png");
+}
+
+#layer_manager [data-type='add']:hover {
+	background-image: url("https://mdn.mozillademos.org/files/5687/add-white.png");
+}
+
+#layer_manager [data-type='move-up'] {
+	background-image: url("https://mdn.mozillademos.org/files/5697/up-black.png");
+	margin-left: 5%;
+	margin-right: 5%;
+}
+
+#layer_manager [data-type='move-up']:hover {
+	background-image: url("https://mdn.mozillademos.org/files/5709/up-white.png");
+}
+
+#layer_manager [data-type='move-down'] {
+	background-image: url("https://mdn.mozillademos.org/files/5693/down-black.png");
+}
+
+#layer_manager [data-type='move-down']:hover {
+	background-image: url("https://mdn.mozillademos.org/files/5695/down-white.png");
+}
+
+/* shadows classes */
+
+#layer_manager .node {
+	width: 100%;
+	margin: 5px 0;
+	padding: 5px;
+	text-align: center;
+	background-color: #EEE;
+	border: 1px solid #DDD;
+	font-size: 0.75em;
+	line-height: 1.5em;
+	color: #333;
+	border-radius: 3px;
+
+	position: relative;
+	display: block;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+#layer_manager .node:hover {
+	color: #FFF;
+	background-color: #3380C4;
+	cursor: pointer;
+}
+
+/* active element styling */
+
+#layer_manager [data-active='layer'] {
+	color: #FFF;
+	border: none;
+	background-color: #379B4A;
+}
+
+#layer_manager [data-active='subject'] {
+	color: #FFF;
+	background-color: #467FC9;
+}
+
+/* delete button */
+
+#layer_manager .delete {
+	width: 1.5em;
+	height: 100%;
+	float: right;
+	border-radius: 3px;
+	background-image: url("https://mdn.mozillademos.org/files/5689/delete-white.png");
+	background-position: center center;
+	background-repeat: no-repeat;
+	position: absolute;
+	top: 0;
+	right: 10px;
+	display: none;
+}
+
+#layer_manager .delete:hover {
+	background-image: url("https://mdn.mozillademos.org/files/5691/delete-yellow.png");
+}
+
+#layer_manager .node:hover .delete {
+	display: block;
+}
+
+
+#layer_manager .stack {
+	padding: 0 5px;
+	max-height: 90%;
+	overflow: auto;
+	overflow-x: hidden;
+}
+
+
+/*
+ * Layer Menu
+ */
+
+#layer_menu {
+	margin: 0 0 10px 0;
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+#layer_menu .button {
+	width: 100px;
+	margin: 0 5px 0 0;
+	padding: 2.5px;
+	color: #333;
+	background-color: #EEE;
+	border: 1px solid #CCC;
+	border-radius: 3px;
+	text-align: center;
+	font-size: 0.75em;
+	line-height: 1.5em;
+
+	position: relative;
+	display: block;
+	float: left;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+#layer_menu .button:hover {
+	color: #FFF;
+	background-color: #3380C4;
+	border: 1px solid #3380C4;
+	cursor: pointer;
+}
+
+#layer_menu .delete {
+	width: 1.5em;
+	height: 100%;
+	float: right;
+	border-radius: 3px;
+	background-image: url("https://mdn.mozillademos.org/files/5689/delete-white.png");
+	background-position: center center;
+	background-repeat: no-repeat;
+	position: absolute;
+	top: 0;
+	right: 5px;
+	display: none;
+}
+
+#layer_menu .delete:hover {
+	background-image: url("https://mdn.mozillademos.org/files/5691/delete-yellow.png");
+}
+
+#layer_menu .button:hover .delete {
+	display: block;
+}
+
+
+/*
+ * active element styling
+ */
+
+#layer_menu [data-active='subject'] {
+	color: #FFF;
+	background-color: #379B4A;
+	border: 1px solid #379B4A;
+}
+
+
+/* Checkbox */
+
+#layer_menu .ui-checkbox &gt; label {
+	height: 15px;
+	line-height: 17px;
+	font-weight: normal;
+	width: 46px;
+	margin: 0 5px 0 0;
+}
+
+#layer_menu .ui-checkbox &gt; input:checked + label {
+	display: none;
+}
+
+
+/******************************************************************************/
+/******************************************************************************/
+/*
+ * Preview Area
+ */
+
+#preview_zone {
+	width: 82%;
+	float: left;
+
+}
+
+
+#preview {
+	width: 100%;
+	height: 400px;
+	border: 1px solid #CCC;
+	border-radius: 3px;
+	text-align: center;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+	cursor: move;
+	float: left;
+}
+
+#preview .content {
+	width: 100%;
+	height: 100%;
+	display: block;
+}
+
+#obj-element {
+	width: 300px;
+	height: 100px;
+	border: 1px solid #CCC;
+	background: #FFF;
+	position: relative;
+}
+
+
+#obj-before {
+	height: 100%;
+	width: 100%;
+	background: #999;
+	border: 1px solid #CCC;
+	text-align: left;
+	display : block;
+	position: absolute;
+	z-index: -1;
+}
+
+#obj-after {
+	height: 100%;
+	width: 100%;
+	background: #DDD;
+	border: 1px solid #CCC;
+	text-align: right;
+	display : block;
+	position: absolute;
+	z-index: -1;
+}
+
+
+/******************************************************************************/
+/******************************************************************************/
+
+/**
+ * Controls
+ */
+
+.wrap-left {
+	float: left;
+	overflow: hidden;
+}
+
+.wrap-right {
+	float: right;
+	overflow: hidden;
+}
+
+.wrap-left &gt; * {
+	float: left;
+}
+
+.wrap-right &gt; * {
+	float: right;
+}
+
+@media (min-width: 960px) {
+
+	.wrap-left {
+		width: 45%;
+	}
+
+	.wrap-right {
+		width: 55%;
+	}
+}
+
+
+@media (max-width: 959px) {
+
+	.wrap-left {
+		width: 30%;
+	}
+
+	.wrap-right {
+		width: 70%;
+	}
+}
+
+
+#controls {
+	color: #444;
+	margin: 10px 0 0 0;
+}
+
+
+#controls .category {
+	width: 500px;
+	margin: 0 auto 20px;
+	padding: 0;
+
+}
+
+#controls .category .title {
+	width: 100%;
+	height: 1.5em;
+	line-height: 1.5em;
+	color: #AAA;
+	text-align: right;
+}
+
+#controls .category &gt; .group {
+	border: 1px solid #CCC;
+	border-radius: 3px;
+}
+
+
+/**
+ * 	Color Picker
+ */
+
+@media (min-width: 960px) {
+	#controls .colorpicker {
+		width: 420px;
+	}
+}
+
+@media (max-width: 959px) {
+	#controls .colorpicker {
+		width: 210px;
+	}
+}
+
+#colorpicker {
+	width: 100%;
+	margin: 0 auto;
+}
+
+#colorpicker .gradient {
+	width: 200px;
+	height: 200px;
+	margin: 5px;
+	background: url("https://mdn.mozillademos.org/files/5707/picker_mask_200.png");
+	background: -moz-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
+				-moz-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
+	background: -webkit-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
+				-webkit-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
+	background-color: #F00;
+	float: left;
+}
+
+#colorpicker .hue {
+	width: 200px;
+	height: 30px;
+	margin: 5px;
+	background: url("https://mdn.mozillademos.org/files/5701/hue.png");
+	background: -moz-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
+				#00F 66.66%, #F0F 83.33%, #F00 100%);
+	background: -webkit-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
+				#00F 66.66%, #F0F 83.33%, #F00 100%);
+	float: left;
+}
+
+#colorpicker .alpha {
+	width: 200px;
+	height: 30px;
+	margin: 5px;
+	border: 1px solid #CCC;
+	float: left;
+	background: url("https://mdn.mozillademos.org/files/5705/alpha.png");
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+#colorpicker #alpha {
+	width: 100%;
+	height: 100%;
+	background: url("https://mdn.mozillademos.org/files/5703/alpha_mask.png");
+	background: -moz-linear-gradient(left, rgba(255, 0, 0, 0) 0%, rgba(255, 0, 0, 1) 100%);
+}
+
+#colorpicker #gradient_picker {
+	width: 0.5em;
+	height: 0.5em;
+	border-radius: 0.4em;
+	border: 2px solid #CCC;
+	position: relative;
+	top: 20%;
+	left: 20%;
+}
+
+#colorpicker #hue_selector,
+#colorpicker #alpha_selector {
+	width: 3px;
+	height: 100%;
+	border: 1px solid #777;
+	background-color: #FFF;
+	position: relative;
+	top: -1px;
+	left: 0%;
+}
+
+/* input HSV and RGB */
+#colorpicker .info {
+	width: 200px;
+	margin: 5px;
+	float: left;
+}
+
+#colorpicker .info * {
+	float: left;
+}
+
+#colorpicker .info input {
+	margin: 0;
+	text-align: center;
+	width: 30px;
+	-moz-user-select: text;
+	-webkit-user-select: text;
+	-ms-user-select: text;
+}
+
+#colorpicker .info span {
+	height: 20px;
+	width: 30px;
+	text-align: center;
+	line-height: 20px;
+	display: block;
+}
+
+/* Preview color */
+#colorpicker .block {
+	width: 95px;
+	height: 54px;
+	float: left;
+	position: relative;
+}
+
+#colorpicker .preview {
+	margin: 5px;
+	border: 1px solid #CCC;
+	background-image: url("https://mdn.mozillademos.org/files/5705/alpha.png");
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+#colorpicker .preview:before {
+	height: 100%;
+	width: 50%;
+	left: 50%;
+	content: "";
+	background: #FFF;
+	position: absolute;
+	z-index: 1;
+}
+
+#colorpicker .preview &gt; * {
+	width: 50%;
+	height: 100%;
+}
+
+#colorpicker #output_color {
+	width: 100%;
+	height: 100%;
+	position: absolute;
+	z-index: 2;
+}
+
+#colorpicker .block .input {
+	float: right;
+}
+
+#colorpicker [data-topic="a"] &gt; span {
+	width: 50px;
+}
+
+#colorpicker [data-topic="hexa"] {
+	float: right;
+	margin: 10px 0 0 0;
+}
+
+#colorpicker [data-topic="hexa"] &gt; span {
+	display: none;
+}
+
+#colorpicker [data-topic="hexa"] &gt; input {
+	width: 85px;
+	padding: 2px 0;
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+
+/*
+ * UI Components
+ */
+
+/* Property */
+
+.property {
+	height: 20px;
+	margin: 10px 0;
+}
+
+.property * {
+	float: left;
+	height: 100%;
+	line-height: 100%;
+}
+
+/* Slider */
+
+#controls .ui-slider-name {
+	margin: 0 10px 0 0;
+}
+
+/*
+ * Output code styling
+ */
+
+#output {
+	position: relative;
+}
+
+#output .menu {
+	max-width: 70%;
+	height: 20px;
+	position: absolute;
+	top: 2px;
+}
+
+#output .button {
+	width: 90px;
+	height: 22px;
+	margin: 0 5px 0 0;
+	text-align: center;
+	line-height: 20px;
+	font-size: 14px;
+	color: #FFF;
+	background-color: #999;
+	border-top-left-radius: 3px;
+	border-top-right-radius: 3px;
+	bottom: -5px;
+	float:left;
+}
+
+#output .button:hover {
+	color: #FFF;
+	background-color: #666;
+	cursor: pointer;
+}
+
+#output .menu [data-active="true"] {
+	color: #777;
+	background-color: #FFF;
+	border: 1px solid #CCC;
+	border-bottom: none;
+}
+
+#output .menu [data-topic="before"] {
+	left: 100px;
+}
+
+#output .menu [data-topic="after"] {
+	left: 200px;
+}
+
+#output .output {
+	width: 480px;
+	margin: 10px;
+	padding: 10px;
+	overflow: hidden;
+	color: #555;
+	font-size: 14px;
+	border: 1px dashed #CCC;
+	border-radius: 3px;
+	display: none;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+
+	-moz-user-select: text;
+	-webkit-user-select: text;
+	-ms-user-select: text;
+}
+
+#output .css-property {
+	width: 100%;
+	float: left;
+	white-space: pre;
+}
+
+#output .name {
+	width: 35%;
+	float: left;
+}
+
+#output .value {
+	width: 65%;
+	float: left;
+}
+
+</pre>
+
+<h3 id="JavaScript_Content">JavaScript Content</h3>
+
+<pre class="brush: js"><code class="language-js">
+
+'use strict';
+
+/**
+ * UI-SlidersManager
+ */
+
+var SliderManager = (function SliderManager() {
+
+	var subscribers = {};
+	var sliders = [];
+
+	var Slider = 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 snap = node.getAttribute('data-snap');
+		var topic = node.getAttribute('data-topic');
+
+		this.min = min;
+		this.max = max &gt; 0 ? max : 100;
+		this.step = step === 0 ? 1 : step;
+		this.value = value &lt;= max &amp;&amp; value &gt;= min ? value : (min + max) / 2 | 0;
+		this.snap = snap === "true" ? true : false;
+		this.topic = topic;
+		this.node = node;
+
+		var pointer = document.createElement('div');
+		pointer.className = 'ui-slider-pointer';
+		node.appendChild(pointer);
+		this.pointer = pointer;
+
+		setMouseTracking(node, updateSlider.bind(this));
+
+		sliders[topic] = this;
+		setValue(topic, this.value);
+	}
+
+	var setButtonComponent = function setButtonComponent(node) {
+		var type = node.getAttribute('data-type');
+		var topic = node.getAttribute('data-topic');
+		if (type === "sub") {
+			node.textContent = '-';
+			node.addEventListener("click", function() {
+				decrement(topic);
+			});
+		}
+		if (type === "add") {
+			node.textContent = '+';
+			node.addEventListener("click", function() {
+				increment(topic);
+			});
+		}
+	}
+
+	var setInputComponent = function setInputComponent(node) {
+		var topic		= node.getAttribute('data-topic');
+		var unit_type	= node.getAttribute('data-unit');
+
+		var input = document.createElement('input');
+		var unit = document.createElement('span');
+		unit.textContent = unit_type;
+
+		input.setAttribute('type', 'text');
+		node.appendChild(input);
+		node.appendChild(unit);
+
+		input.addEventListener('click', function(e) {
+			this.select();
+		});
+
+		input.addEventListener('change', function(e) {
+			setValue(topic, e.target.value | 0);
+		});
+
+		subscribe(topic, function(value) {
+			node.children[0].value = value;
+		});
+	}
+
+	var increment = function increment(topic) {
+		var slider = sliders[topic];
+		if (slider === null || slider === undefined)
+			return;
+
+		if (slider.value + slider.step &lt;= slider.max) {
+			slider.value += slider.step;
+			setValue(slider.topic, slider.value)
+			notify.call(slider);
+		}
+	};
+
+	var decrement = function decrement(topic) {
+		var slider = sliders[topic];
+		if (slider === null || slider === undefined)
+			return;
+
+		if (slider.value - slider.step &gt;= slider.min) {
+			slider.value -= slider.step;
+			setValue(topic, slider.value)
+			notify.call(slider);
+		}
+	}
+
+	// this = Slider object
+	var updateSlider = function updateSlider(e) {
+		var node = this.node;
+		var pos = e.pageX - node.offsetLeft;
+		var width = node.clientWidth;
+		var delta = this.max - this.min;
+		var offset = this.pointer.clientWidth + 4; // border width * 2
+
+		if (pos &lt; 0) pos = 0;
+		if (pos &gt; width) pos = width;
+
+		var value = pos * delta / width | 0;
+		var precision = value % this.step;
+		value = value - precision + this.min;
+		if (precision &gt; this.step / 2)
+			value = value + this.step;
+
+		if (this.snap)
+			pos =  (value - this.min) * width / delta;
+
+		this.pointer.style.left = pos - offset/2 + "px";
+		this.value = value;
+		node.setAttribute('data-value', value);
+		notify.call(this);
+	}
+
+	var setValue = function setValue(topic, value) {
+		var slider = sliders[topic];
+
+		if (value &gt; slider.max || value &lt; slider.min)
+			return;
+
+		var delta = slider.max - slider.min;
+		var width = slider.node.clientWidth;
+		var offset = slider.pointer.clientWidth;
+		var pos =  (value - slider.min) * width / delta;
+		slider.value = value;
+		slider.pointer.style.left = pos - offset / 2 + "px";
+		slider.node.setAttribute('data-value', value);
+		notify.call(slider);
+	}
+
+	var setMouseTracking = function setMouseTracking(elem, callback) {
+		elem.addEventListener("mousedown", function(e) {
+			callback(e);
+			document.addEventListener("mousemove", callback);
+		});
+
+		document.addEventListener("mouseup", function(e) {
+			document.removeEventListener("mousemove", callback);
+		});
+	}
+
+	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() {
+		if (subscribers[this.topic] === undefined)
+			return;
+
+		for (var i in subscribers[this.topic]) {
+			subscribers[this.topic][i](this.value);
+		}
+	}
+
+	var init = function init() {
+		var elem, size;
+
+		elem = document.querySelectorAll('.ui-slider-btn-set');
+		size = elem.length;
+		for (var i = 0; i &lt; size; i++)
+			setButtonComponent(elem[i]);
+
+		elem = document.querySelectorAll('.ui-slider-input');
+		size = elem.length;
+		for (var i = 0; i &lt; size; i++)
+			setInputComponent(elem[i]);
+
+		elem = document.querySelectorAll('.ui-slider');
+		size = elem.length;
+		for (var i = 0; i &lt; size; i++)
+			new Slider(elem[i]);
+	}
+
+	return {
+		init : init,
+		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;
+			notify.call(buttons[topic]);
+		}
+		catch(error) {
+			console.log(error, topic, value);
+		}
+	}
+
+	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() {
+		if (subscribers[this.topic] === undefined)
+			return;
+		for (var i = 0; i &lt; 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 &lt; size; i++)
+			new CheckBox(elem[i]);
+	}
+
+	return {
+		init : init,
+		setValue : setValue,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe
+	}
+
+})();
+
+
+window.addEventListener("load", function(){
+	BoxShadow.init();
+});
+
+var BoxShadow = (function BoxShadow() {
+
+	function getElemById(id) {
+		return document.getElementById(id);
+	}
+
+	/**
+	 * RGBA Color class
+	 */
+
+	function Color() {
+		this.r = 0;
+		this.g = 0;
+		this.b = 0;
+		this.a = 1;
+		this.hue = 0;
+		this.saturation = 0;
+		this.value = 0;
+	}
+
+	Color.prototype.copy = function copy(obj) {
+		if(obj instanceof Color !== true) {
+			console.log("Typeof instance not Color");
+			return;
+		}
+
+		this.r = obj.r;
+		this.g = obj.g;
+		this.b = obj.b;
+		this.a = obj.a;
+		this.hue = obj.hue;
+		this.saturation = obj.saturation;
+		this.value = obj.value;
+	}
+
+	Color.prototype.setRGBA = function setRGBA(red, green, blue, alpha) {
+		if (red != undefined)
+			this.r = red | 0;
+		if (green != undefined)
+			this.g = green | 0;
+		if (blue != undefined)
+			this.b = blue | 0;
+		if (alpha != undefined)
+			this.a = alpha | 0;
+	}
+
+	/**
+	 * HSV/HSB (hue, saturation, value / brightness)
+	 * @param hue			0-360
+	 * @param saturation	0-100
+	 * @param value 		0-100
+	 */
+	Color.prototype.setHSV = function setHSV(hue, saturation, value) {
+		this.hue = hue;
+		this.saturation = saturation;
+		this.value = value;
+		this.updateRGB();
+	}
+
+	Color.prototype.updateRGB = function updateRGB() {
+		var sat = this.saturation / 100;
+		var value = this.value / 100;
+		var C = sat * value;
+		var H = this.hue / 60;
+		var X = C * (1 - Math.abs(H % 2 - 1));
+		var m = value - C;
+		var precision = 255;
+
+		C = (C + m) * precision;
+		X = (X + m) * precision;
+		m = m * precision;
+
+		if (H &gt;= 0 &amp;&amp; H &lt; 1) {	this.setRGBA(C, X, m);	return; }
+		if (H &gt;= 1 &amp;&amp; H &lt; 2) {	this.setRGBA(X, C, m);	return; }
+		if (H &gt;= 2 &amp;&amp; H &lt; 3) {	this.setRGBA(m, C, X);	return; }
+		if (H &gt;= 3 &amp;&amp; H &lt; 4) {	this.setRGBA(m, X, C);	return; }
+		if (H &gt;= 4 &amp;&amp; H &lt; 5) {	this.setRGBA(X, m, C);	return; }
+		if (H &gt;= 5 &amp;&amp; H &lt; 6) {	this.setRGBA(C, m, X);	return; }
+	}
+
+	Color.prototype.updateHSV = function updateHSV() {
+		var red		= this.r / 255;
+		var green	= this.g / 255;
+		var blue	= this.b / 255;
+
+		var cmax = Math.max(red, green, blue);
+		var cmin = Math.min(red, green, blue);
+		var delta = cmax - cmin;
+		var hue = 0;
+		var saturation = 0;
+
+		if (delta) {
+			if (cmax === red ) { hue = ((green - blue) / delta); }
+			if (cmax === green ) { hue = 2 + (blue - red) / delta; }
+			if (cmax === blue ) { hue = 4 + (red - green) / delta; }
+			if (cmax) saturation = delta / cmax;
+		}
+
+		this.hue = 60 * hue | 0;
+		if (this.hue &lt; 0) this.hue += 360;
+		this.saturation = (saturation * 100) | 0;
+		this.value = (cmax * 100) | 0;
+	}
+
+	Color.prototype.setHexa = function setHexa(value) {
+		var valid  = /(^#{0,1}[0-9A-F]{6}$)|(^#{0,1}[0-9A-F]{3}$)/i.test(value)
+		if (valid !== true)
+			return;
+
+		if (value[0] === '#')
+			value = value.slice(1, value.length);
+
+		if (value.length === 3)
+			value = value.replace(/([0-9A-F])([0-9A-F])([0-9A-F])/i,"$1$1$2$2$3$3");
+
+		this.r = parseInt(value.substr(0, 2), 16);
+		this.g = parseInt(value.substr(2, 2), 16);
+		this.b = parseInt(value.substr(4, 2), 16);
+
+		this.alpha	= 1;
+	}
+
+	Color.prototype.getHexa = function getHexa() {
+		var r = this.r.toString(16);
+		var g = this.g.toString(16);
+		var b = this.b.toString(16);
+		if (this.r &lt; 16) r = '0' + r;
+		if (this.g &lt; 16) g = '0' + g;
+		if (this.b &lt; 16) b = '0' + b;
+		var value = '#' + r + g + b;
+		return value.toUpperCase();
+	}
+
+	Color.prototype.getRGBA = function getRGBA() {
+
+		var rgb = "(" + this.r + ", " + this.g + ", " + this.b;
+		var a = '';
+		var v = '';
+		if (this.a !== 1) {
+			a = 'a';
+			v = ', ' + this.a;
+		}
+
+		var value = "rgb" + a + rgb + v + ")";
+		return value;
+	}
+
+	Color.prototype.getColor = function getColor() {
+		if (this.a | 0 === 1)
+			return this.getHexa();
+		return this.getRGBA();
+	}
+
+	/**
+	 * Shadow Object
+	 */
+	function Shadow() {
+		this.inset  = false;
+		this.posX   = 5;
+		this.posY   = -5;
+		this.blur   = 5;
+		this.spread = 0;
+		this.color  = new Color();
+
+		var hue			= (Math.random() * 360) | 0;
+		var saturation	= (Math.random() * 75) | 0;
+		var value 		= (Math.random() * 50 + 50) | 0;
+		this.color.setHSV(hue, saturation, value, 1);
+	}
+
+	Shadow.prototype.computeCSS = function computeCSS() {
+		var value = "";
+		if (this.inset === true)
+			value += "inset ";
+		value += this.posX + "px ";
+		value += this.posY + "px ";
+		value += this.blur + "px ";
+		value += this.spread + "px ";
+		value += this.color.getColor();
+
+		return value;
+	}
+
+	Shadow.prototype.toggleInset = function toggleInset(value) {
+		if (value !== undefined || typeof value === "boolean")
+			this.inset = value;
+		else
+			this.inset = this.inset === true ? false : true;
+	}
+
+	Shadow.prototype.copy = function copy(obj) {
+		if(obj instanceof Shadow !== true) {
+			console.log("Typeof instance not Shadow");
+			return;
+		}
+
+		this.inset  = obj.inset;
+		this.posX   = obj.posX;
+		this.posY   = obj.posY;
+		this.blur   = obj.blur;
+		this.spread = obj.spread;
+		this.color.copy(obj.color);
+	}
+
+	/**
+	 * Color Picker
+	 */
+	var ColoPicker = (function ColoPicker() {
+
+		var colorpicker;
+		var hue_area;
+		var gradient_area;
+		var alpha_area;
+		var gradient_picker;
+		var hue_selector;
+		var alpha_selector;
+		var pick_object;
+		var info_rgb;
+		var info_hsv;
+		var info_hexa;
+		var output_color;
+		var color = new Color();
+		var subscribers = [];
+
+		var updateColor = function updateColor(e) {
+			var x = e.pageX - gradient_area.offsetLeft;
+			var y = e.pageY - gradient_area.offsetTop;
+
+			// width and height should be the same
+			var size = gradient_area.clientWidth;
+
+			if (x &gt; size)
+				x = size;
+			if (y &gt; size)
+				y = size;
+
+			if (x &lt; 0) x = 0;
+			if (y &lt; 0) y = 0;
+
+			var value = 100 - (y * 100 / size) | 0;
+			var saturation = x * 100 / size | 0;
+
+			color.setHSV(color.hue, saturation, value);
+			// should update just
+			// color pointer location
+			updateUI();
+			notify("color", color);
+		}
+
+		var updateHue = function updateHue(e) {
+			var x = e.pageX - hue_area.offsetLeft;
+			var width = hue_area.clientWidth;
+
+			if (x &lt; 0) x = 0;
+			if (x &gt; width) x = width;
+
+			var hue = ((360 * x) / width) | 0;
+			if (hue === 360) hue = 359;
+
+			color.setHSV(hue, color.saturation, color.value);
+
+			// should update just
+			// hue pointer location
+			// picker area background
+			// alpha area background
+			updateUI();
+			notify("color", color);
+		}
+
+		var updateAlpha = function updateAlpha(e) {
+			var x = e.pageX - alpha_area.offsetLeft;
+			var width = alpha_area.clientWidth;
+
+			if (x &lt; 0) x = 0;
+			if (x &gt; width) x = width;
+
+			color.a = (x / width).toFixed(2);
+
+			// should update just
+			// alpha pointer location
+			updateUI();
+			notify("color", color);
+		}
+
+		var setHueGfx = function setHueGfx(hue) {
+			var sat = color.saturation;
+			var val = color.value;
+			var alpha = color.a;
+
+			color.setHSV(hue, 100, 100);
+			gradient_area.style.backgroundColor = color.getHexa();
+
+			color.a = 0;
+			var start = color.getRGBA();
+			color.a = 1;
+			var end = color.getRGBA();
+			color.a = alpha;
+
+			var gradient = '-moz-linear-gradient(left, ' +	start + '0%, ' + end + ' 100%)';
+			alpha_area.style.background = gradient;
+		}
+
+		var updateUI = function updateUI() {
+			var x, y;		// coordinates
+			var size;		// size of the area
+			var offset;		// pointer graphic selector offset
+
+			// Set color pointer location
+			size = gradient_area.clientWidth;
+			offset = gradient_picker.clientWidth / 2 + 2;
+
+			x = (color.saturation * size / 100) | 0;
+			y = size - (color.value * size / 100) | 0;
+
+			gradient_picker.style.left = x - offset + "px";
+			gradient_picker.style.top = y - offset + "px";
+
+			// Set hue pointer location
+			size = hue_area.clientWidth;
+			offset = hue_selector.clientWidth/2;
+			x = (color.hue * size / 360 ) | 0;
+			hue_selector.style.left = x - offset + "px";
+
+			// Set alpha pointer location
+			size = alpha_area.clientWidth;
+			offset = alpha_selector.clientWidth/2;
+			x = (color.a * size) | 0;
+			alpha_selector.style.left = x - offset + "px";
+
+			// Set picker area background
+			var nc = new Color();
+			nc.copy(color);
+			if (nc.hue === 360) nc.hue = 0;
+			nc.setHSV(nc.hue, 100, 100);
+			gradient_area.style.backgroundColor = nc.getHexa();
+
+			// Set alpha area background
+			nc.copy(color);
+			nc.a = 0;
+			var start = nc.getRGBA();
+			nc.a = 1;
+			var end = nc.getRGBA();
+			var gradient = '-moz-linear-gradient(left, ' +	start + '0%, ' + end + ' 100%)';
+			alpha_area.style.background = gradient;
+
+			// Update color info
+			notify("color", color);
+			notify("hue", color.hue);
+			notify("saturation", color.saturation);
+			notify("value", color.value);
+			notify("r", color.r);
+			notify("g", color.g);
+			notify("b", color.b);
+			notify("a", color.a);
+			notify("hexa", color.getHexa());
+			output_color.style.backgroundColor = color.getRGBA();
+		}
+
+		var setInputComponent = function setInputComponent(node) {
+			var topic = node.getAttribute('data-topic');
+			var title = node.getAttribute('data-title');
+			var action = node.getAttribute('data-action');
+			title = title === null ? '' : title;
+
+			var input = document.createElement('input');
+			var info = document.createElement('span');
+			info.textContent = title;
+
+			input.setAttribute('type', 'text');
+			input.setAttribute('data-action', 'set-' + action + '-' + topic);
+			node.appendChild(info);
+			node.appendChild(input);
+
+			input.addEventListener('click', function(e) {
+				this.select();
+			});
+
+			input.addEventListener('change', function(e) {
+				if (action === 'HSV')
+					inputChangeHSV(topic);
+				if (action === 'RGB')
+					inputChangeRGB(topic);
+				if (action === 'alpha')
+					inputChangeAlpha(topic);
+				if (action === 'hexa')
+					inputChangeHexa(topic);
+			});
+
+			subscribe(topic, function(value) {
+				node.children[1].value = value;
+			});
+		}
+
+		var inputChangeHSV = function actionHSV(topic) {
+			var selector = "[data-action='set-HSV-" + topic + "']";
+			var node = document.querySelector("#colorpicker " + selector);
+			var value = parseInt(node.value);
+
+			if (typeof value === 'number' &amp;&amp; isNaN(value) === false &amp;&amp;
+				value &gt;= 0 &amp;&amp; value &lt; 360)
+				color[topic] = value;
+
+			color.updateRGB();
+			updateUI();
+		}
+
+		var inputChangeRGB = function inputChangeRGB(topic) {
+			var selector = "[data-action='set-RGB-" + topic + "']";
+			var node = document.querySelector("#colorpicker " + selector);
+			var value = parseInt(node.value);
+
+			if (typeof value === 'number' &amp;&amp; isNaN(value) === false &amp;&amp;
+				value &gt;= 0 &amp;&amp; value &lt;= 255)
+				color[topic] = value;
+
+			color.updateHSV();
+			updateUI();
+		}
+
+		var inputChangeAlpha = function inputChangeAlpha(topic) {
+			var selector = "[data-action='set-alpha-" + topic + "']";
+			var node = document.querySelector("#colorpicker " + selector);
+			var value = parseFloat(node.value);
+
+			if (typeof value === 'number' &amp;&amp; isNaN(value) === false &amp;&amp;
+				value &gt;= 0 &amp;&amp; value &lt;= 1)
+				color.a = value.toFixed(2);
+
+			updateUI();
+		}
+
+		var inputChangeHexa = function inputChangeHexa(topic) {
+			var selector = "[data-action='set-hexa-" + topic + "']";
+			var node = document.querySelector("#colorpicker " + selector);
+			var value = node.value;
+			color.setHexa(value);
+			color.updateHSV();
+			updateUI();
+		}
+
+		var setMouseTracking = function setMouseTracking(elem, callback) {
+
+			elem.addEventListener("mousedown", function(e) {
+				callback(e);
+				document.addEventListener("mousemove", callback);
+			});
+
+			document.addEventListener("mouseup", function(e) {
+				document.removeEventListener("mousemove", callback);
+			});
+		}
+
+		/*
+		 * Observer
+		 */
+		var setColor = function setColor(obj) {
+			if(obj instanceof Color !== true) {
+				console.log("Typeof instance not Color");
+				return;
+			}
+			color.copy(obj);
+			updateUI();
+		}
+
+		var subscribe = function subscribe(topic, callback) {
+			if (subscribers[topic] === undefined)
+				subscribers[topic] = [];
+
+			subscribers[topic].push(callback);
+		}
+
+		var unsubscribe = function unsubscribe(callback) {
+			subscribers.indexOf(callback);
+			subscribers.splice(index, 1);
+		}
+
+		var notify = function notify(topic, value) {
+			for (var i in subscribers[topic])
+				subscribers[topic][i](value);
+		}
+
+		var init = function init() {
+			colorpicker		= getElemById("colorpicker");
+			hue_area		= getElemById("hue");
+			gradient_area	= getElemById("gradient");
+			alpha_area		= getElemById("alpha");
+			gradient_picker	= getElemById("gradient_picker");
+			hue_selector	= getElemById("hue_selector");
+			alpha_selector	= getElemById("alpha_selector");
+			output_color	= getElemById("output_color");
+
+			var elem = document.querySelectorAll('#colorpicker .input');
+			var size = elem.length;
+			for (var i = 0; i &lt; size; i++)
+				setInputComponent(elem[i]);
+
+			setMouseTracking(gradient_area, updateColor);
+			setMouseTracking(hue_area, updateHue);
+			setMouseTracking(alpha_area, updateAlpha);
+
+		}
+
+		return {
+			init : init,
+			setColor : setColor,
+			subscribe : subscribe,
+			unsubscribe : unsubscribe
+		}
+
+	})();
+
+	/**
+	 * 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
+		}
+
+	})();
+
+	/*
+	 * Element Class
+	 */
+	var CssClass = function CssClass(id) {
+		this.left = 0;
+		this.top = 0;
+		this.rotate = 0;
+		this.width = 300;
+		this.height = 100;
+		this.display = true;
+		this.border = true;
+		this.zIndex = -1;
+		this.bgcolor = new Color();
+		this.id = id;
+		this.node = getElemById('obj-' + id);
+		this.object = getElemById(id);
+		this.shadowID = null;
+		this.shadows = []
+		this.render = [];
+		this.init();
+	}
+
+	CssClass.prototype.init = function init() {
+		this.left = ((this.node.parentNode.clientWidth - this.node.clientWidth) / 2) | 0;
+		this.top = ((this.node.parentNode.clientHeight - this.node.clientHeight) / 2) | 0;
+
+		this.setTop(this.top);
+		this.setLeft(this.left);
+		this.setHeight(this.height);
+		this.setWidth(this.width);
+		this.bgcolor.setHSV(0, 0, 100);
+		this.updateBgColor(this.bgcolor);
+	}
+
+	CssClass.prototype.updatePos = function updatePos(deltaX, deltaY) {
+		this.left += deltaX;
+		this.top += deltaY;
+		this.node.style.top = this.top + "px";
+		this.node.style.left = this.left + "px";
+		SliderManager.setValue("left", this.left);
+		SliderManager.setValue("top", this.top);
+	}
+
+	CssClass.prototype.setLeft = function setLeft(value) {
+		this.left = value;
+		this.node.style.left = this.left + "px";
+		OutputManager.updateProperty(this.id, 'left', this.left + 'px');
+	}
+
+	CssClass.prototype.setTop = function setTop(value) {
+		this.top = value;
+		this.node.style.top = this.top + 'px';
+		OutputManager.updateProperty(this.id, 'top', this.top + 'px');
+	}
+
+	CssClass.prototype.setWidth = function setWidth(value) {
+		this.width = value;
+		this.node.style.width = this.width + 'px';
+		OutputManager.updateProperty(this.id, 'width', this.width + 'px');
+	}
+
+	CssClass.prototype.setHeight = function setHeight(value) {
+		this.height = value;
+		this.node.style.height = this.height + 'px';
+		OutputManager.updateProperty(this.id, 'height', this.height + 'px');
+	}
+
+	// Browser support
+	CssClass.prototype.setRotate = function setRotate(value) {
+		var cssvalue = 'rotate(' + value +'deg)';
+
+		this.node.style.transform = cssvalue;
+		this.node.style.webkitTransform = cssvalue;
+		this.node.style.msTransform = cssvalue;
+
+		if (value !== 0) {
+			if (this.rotate === 0) {
+				OutputManager.toggleProperty(this.id, 'transform', true);
+				OutputManager.toggleProperty(this.id, '-webkit-transform', true);
+				OutputManager.toggleProperty(this.id, '-ms-transform', true);
+			}
+		}
+		else {
+			OutputManager.toggleProperty(this.id, 'transform', false);
+			OutputManager.toggleProperty(this.id, '-webkit-transform', false);
+			OutputManager.toggleProperty(this.id, '-ms-transform', false);
+		}
+
+		OutputManager.updateProperty(this.id, 'transform', cssvalue);
+		OutputManager.updateProperty(this.id, '-webkit-transform', cssvalue);
+		OutputManager.updateProperty(this.id, '-ms-transform', cssvalue);
+		this.rotate = value;
+	}
+
+	CssClass.prototype.setzIndex = function setzIndex(value) {
+		this.node.style.zIndex = value;
+		OutputManager.updateProperty(this.id, 'z-index', value);
+		this.zIndex = value;
+	}
+
+	CssClass.prototype.toggleDisplay = function toggleDisplay(value) {
+		if (typeof value !== "boolean" || this.display === value)
+			return;
+
+		this.display = value;
+		var display = this.display === true ? "block" : "none";
+		this.node.style.display = display;
+		this.object.style.display = display;
+	}
+
+	CssClass.prototype.toggleBorder = function toggleBorder(value) {
+		if (typeof value !== "boolean" || this.border === value)
+			return;
+
+		this.border = value;
+		var border = this.border === true ? "1px solid #CCC" : "none";
+		this.node.style.border = border;
+	}
+
+	CssClass.prototype.updateBgColor = function updateBgColor(color) {
+		this.bgcolor.copy(color);
+		this.node.style.backgroundColor = color.getColor();
+		OutputManager.updateProperty(this.id, 'background-color', color.getColor());
+	}
+
+	CssClass.prototype.updateShadows = function updateShadows() {
+		if (this.render.length === 0)
+			OutputManager.toggleProperty(this.id, 'box-shadow', false);
+		if (this.render.length === 1)
+			OutputManager.toggleProperty(this.id, 'box-shadow', true);
+
+		this.node.style.boxShadow = this.render.join(", ");
+		OutputManager.updateProperty(this.id, 'box-shadow', this.render.join(", \n"));
+
+	}
+
+
+	/**
+	 * Tool Manager
+	 */
+	var Tool = (function Tool() {
+
+		var preview;
+		var classes = [];
+		var active = null;
+		var animate = false;
+
+		/*
+		 * Toll actions
+		 */
+		var addCssClass = function addCssClass(id) {
+			classes[id] = new CssClass(id);
+		}
+
+		var setActiveClass = function setActiveClass(id) {
+			active = classes[id];
+			active.shadowID = null;
+			ColoPicker.setColor(classes[id].bgcolor);
+			SliderManager.setValue("top", active.top);
+			SliderManager.setValue("left", active.left);
+			SliderManager.setValue("rotate", active.rotate);
+			SliderManager.setValue("z-index", active.zIndex);
+			SliderManager.setValue("width", active.width);
+			SliderManager.setValue("height", active.height);
+			ButtonManager.setValue("border-state", active.border);
+			active.updateShadows();
+		}
+
+		var disableClass = function disableClass(topic) {
+			classes[topic].toggleDisplay(false);
+			ButtonManager.setValue(topic, false);
+		}
+
+		var addShadow = function addShadow(position) {
+			if (animate === true)
+				return -1;
+
+			active.shadows.splice(position, 0, new Shadow());
+			active.render.splice(position, 0, null);
+		}
+
+		var swapShadow = function swapShadow(id1, id2) {
+			var x = active.shadows[id1];
+			active.shadows[id1] = active.shadows[id2];
+			active.shadows[id2] = x;
+			updateShadowCSS(id1);
+			updateShadowCSS(id2);
+		}
+
+		var deleteShadow = function deleteShadow(position) {
+			active.shadows.splice(position, 1);
+			active.render.splice(position, 1);
+			active.updateShadows();
+		}
+
+		var setActiveShadow = function setActiveShadow(id, glow) {
+			active.shadowID = id;
+			ColoPicker.setColor(active.shadows[id].color);
+			ButtonManager.setValue("inset", active.shadows[id].inset);
+			SliderManager.setValue("blur", active.shadows[id].blur);
+			SliderManager.setValue("spread", active.shadows[id].spread);
+			SliderManager.setValue("posX", active.shadows[id].posX);
+			SliderManager.setValue("posY", active.shadows[id].posY);
+			if (glow === true)
+				addGlowEffect(id);
+		}
+
+		var addGlowEffect = function addGlowEffect(id) {
+			if (animate === true)
+				return;
+
+			animate = true;
+			var store = new Shadow();
+			var shadow = active.shadows[id];
+
+			store.copy(shadow);
+			shadow.color.setRGBA(40, 125, 200, 1);
+			shadow.blur = 10;
+			shadow.spread = 10;
+
+			active.node.style.transition = "box-shadow 0.2s";
+			updateShadowCSS(id);
+
+			setTimeout(function() {
+				shadow.copy(store);
+				updateShadowCSS(id);
+				setTimeout(function() {
+					active.node.style.removeProperty("transition");
+					animate = false;
+				}, 100);
+			}, 200);
+		}
+
+		var updateActivePos = function updateActivePos(deltaX, deltaY) {
+			if (active.shadowID === null)
+				active.updatePos(deltaX, deltaY);
+			else
+				updateShadowPos(deltaX, deltaY);
+		}
+
+		/*
+		 * Shadow properties
+		 */
+		var updateShadowCSS = function updateShadowCSS(id) {
+			active.render[id] = active.shadows[id].computeCSS();
+			active.updateShadows();
+		}
+
+		var toggleShadowInset = function toggleShadowInset(value) {
+			if (active.shadowID === null)
+				return;
+			active.shadows[active.shadowID].toggleInset(value);
+			updateShadowCSS(active.shadowID);
+		}
+
+		var updateShadowPos = function updateShadowPos(deltaX, deltaY) {
+			var shadow = active.shadows[active.shadowID];
+			shadow.posX += deltaX;
+			shadow.posY += deltaY;
+			SliderManager.setValue("posX", shadow.posX);
+			SliderManager.setValue("posY", shadow.posY);
+			updateShadowCSS(active.shadowID);
+		}
+
+		var setShadowPosX = function setShadowPosX(value) {
+			if (active.shadowID === null)
+				return;
+			active.shadows[active.shadowID].posX = value;
+			updateShadowCSS(active.shadowID);
+		}
+
+		var setShadowPosY = function setShadowPosY(value) {
+			if (active.shadowID === null)
+				return;
+			active.shadows[active.shadowID].posY = value;
+			updateShadowCSS(active.shadowID);
+		}
+
+		var setShadowBlur = function setShadowBlur(value) {
+			if (active.shadowID === null)
+				return;
+			active.shadows[active.shadowID].blur = value;
+			updateShadowCSS(active.shadowID);
+		}
+
+		var setShadowSpread = function setShadowSpread(value) {
+			if (active.shadowID === null)
+				return;
+			active.shadows[active.shadowID].spread = value;
+			updateShadowCSS(active.shadowID);
+		}
+
+		var updateShadowColor = function updateShadowColor(color) {
+			active.shadows[active.shadowID].color.copy(color);
+			updateShadowCSS(active.shadowID);
+		}
+
+		/*
+		 * Element Properties
+		 */
+		var updateColor = function updateColor(color) {
+			if (active.shadowID === null)
+				active.updateBgColor(color);
+			else
+				updateShadowColor(color);
+		}
+
+		var init = function init() {
+			preview = getElemById("preview");
+
+			ColoPicker.subscribe("color", updateColor);
+			PreviewMouseTracking.subscribe(updateActivePos);
+
+			// Affects shadows
+			ButtonManager.subscribe("inset", toggleShadowInset);
+			SliderManager.subscribe("posX", setShadowPosX);
+			SliderManager.subscribe("posY", setShadowPosY);
+			SliderManager.subscribe("blur", setShadowBlur);
+			SliderManager.subscribe("spread", setShadowSpread);
+
+			// Affects element
+			SliderManager.subscribe("top", function(value){
+				active.setTop(value);
+			});
+			SliderManager.subscribe("left", function(value){
+				active.setLeft(value);
+			});
+			SliderManager.subscribe("rotate", function(value) {
+				if (active == classes["element"])
+					return;
+				active.setRotate(value);
+			});
+
+			SliderManager.subscribe("z-index", function(value) {
+				if (active == classes["element"])
+					return;
+				active.setzIndex(value);
+			});
+
+			SliderManager.subscribe("width", function(value) {
+				active.setWidth(value)
+			});
+
+			SliderManager.subscribe("height", function(value) {
+				active.setHeight(value)
+			});
+
+			// Actions
+			classes['before'].top = -30;
+			classes['before'].left = -30;
+			classes['after'].top = 30;
+			classes['after'].left = 30;
+			classes['before'].toggleDisplay(false);
+			classes['after'].toggleDisplay(false);
+			ButtonManager.setValue('before', false);
+			ButtonManager.setValue('after', false);
+
+			ButtonManager.subscribe("before", classes['before'].toggleDisplay.bind(classes['before']));
+			ButtonManager.subscribe("after", classes['after'].toggleDisplay.bind(classes['after']));
+
+			ButtonManager.subscribe("border-state", function(value) {
+				active.toggleBorder(value);
+			});
+
+		}
+
+		return {
+			init 			: init,
+			addShadow		: addShadow,
+			swapShadow		: swapShadow,
+			addCssClass		: addCssClass,
+			disableClass	: disableClass,
+			deleteShadow	: deleteShadow,
+			setActiveClass	: setActiveClass,
+			setActiveShadow : setActiveShadow
+		}
+
+	})();
+
+	/**
+	 * Layer Manager
+	 */
+	var LayerManager = (function LayerManager() {
+		var stacks = [];
+		var active = {
+			node : null,
+			stack : null
+		}
+		var elements = {};
+
+		var mouseEvents = function mouseEvents(e) {
+			var node = e.target;
+			var type = node.getAttribute('data-type');
+
+			if (type === 'subject')
+				setActiveStack(stacks[node.id]);
+
+			if (type === 'disable') {
+				Tool.disableClass(node.parentNode.id);
+				setActiveStack(stacks['element']);
+			}
+
+			if (type === 'add')
+				active.stack.addLayer();
+
+			if (type === 'layer')
+				active.stack.setActiveLayer(node);
+
+			if (type === 'delete')
+				active.stack.deleteLayer(node.parentNode);
+
+			if (type === 'move-up')
+				active.stack.moveLayer(1);
+
+			if (type === 'move-down')
+				active.stack.moveLayer(-1);
+		}
+
+		var setActiveStack = function setActiveStack(stackObj) {
+			active.stack.hide();
+			active.stack = stackObj;
+			active.stack.show();
+		}
+
+		/*
+		 * Stack object
+		 */
+		var Stack = function Stack(subject) {
+			var S = document.createElement('div');
+			var title = document.createElement('div');
+			var stack = document.createElement('div');
+
+			S.className = 'container';
+			stack.className = 'stack';
+			title.className = 'title';
+			title.textContent = subject.getAttribute('data-title');
+			S.appendChild(title);
+			S.appendChild(stack);
+
+			this.id = subject.id;
+			this.container = S;
+			this.stack = stack;
+			this.subject = subject;
+			this.order = [];
+			this.uid = 0;
+			this.count = 0;
+			this.layer = null;
+			this.layerID = 0;
+		}
+
+		Stack.prototype.addLayer = function addLayer() {
+			if (Tool.addShadow(this.layerID) == -1)
+				return;
+
+			var uid = this.getUID();
+			var layer = this.createLayer(uid);
+
+			if (this.layer === null &amp;&amp; this.stack.children.length &gt;= 1)
+				this.layer = this.stack.children[0];
+
+			this.stack.insertBefore(layer, this.layer);
+			this.order.splice(this.layerID, 0, uid);
+			this.count++;
+			this.setActiveLayer(layer);
+		}
+
+		Stack.prototype.createLayer = function createLayer(uid) {
+			var layer = document.createElement('div');
+			var del = document.createElement('span');
+
+			layer.className = 'node';
+			layer.setAttribute('data-shid', uid);
+			layer.setAttribute('data-type', 'layer');
+			layer.textContent = 'тень ' + uid;
+
+			del.className = 'delete';
+			del.setAttribute('data-type', 'delete');
+
+			layer.appendChild(del);
+			return layer;
+		}
+
+		Stack.prototype.getUID = function getUID() {
+			return this.uid++;
+		}
+
+		// SOLVE IE BUG
+		Stack.prototype.moveLayer = function moveLayer(direction) {
+			if (this.count &lt;= 1 || this.layer === null)
+				return;
+			if (direction === -1 &amp;&amp; this.layerID === (this.count - 1) )
+				return;
+			if (direction === 1 &amp;&amp; this.layerID === 0 )
+				return;
+
+			if (direction === -1) {
+				var before = null;
+				Tool.swapShadow(this.layerID, this.layerID + 1);
+				this.swapOrder(this.layerID, this.layerID + 1);
+				this.layerID += 1;
+
+				if (this.layerID + 1 !== this.count)
+					before = this.stack.children[this.layerID + 1];
+
+				this.stack.insertBefore(this.layer, before);
+				Tool.setActiveShadow(this.layerID, false);
+			}
+
+			if (direction === 1) {
+				Tool.swapShadow(this.layerID, this.layerID - 1);
+				this.swapOrder(this.layerID, this.layerID - 1);
+				this.layerID -= 1;
+				this.stack.insertBefore(this.layer, this.stack.children[this.layerID]);
+				Tool.setActiveShadow(this.layerID, false);
+			}
+		}
+
+		Stack.prototype.swapOrder = function swapOrder(pos1, pos2) {
+			var x = this.order[pos1];
+			this.order[pos1] = this.order[pos2];
+			this.order[pos2] = x;
+		}
+
+		Stack.prototype.deleteLayer = function deleteLayer(node) {
+			var shadowID =  node.getAttribute('data-shid') | 0;
+			var index = this.order.indexOf(shadowID);
+			this.stack.removeChild(this.stack.children[index]);
+			this.order.splice(index, 1);
+			this.count--;
+
+			Tool.deleteShadow(index);
+
+			if (index &gt; this.layerID)
+				return;
+
+			if (index == this.layerID) {
+				if (this.count &gt;= 1) {
+					this.layerID = 0;
+					this.setActiveLayer(this.stack.children[0], true);
+				}
+				else {
+					this.layer = null;
+					this.show();
+				}
+			}
+
+			if (index &lt; this.layerID) {
+				this.layerID--;
+				Tool.setActiveShadow(this.layerID, true);
+			}
+
+		}
+
+		Stack.prototype.setActiveLayer = function setActiveLayer(node) {
+			elements.shadow_properties.style.display = 'block';
+			elements.element_properties.style.display = 'none';
+
+			if (this.layer)
+				this.layer.removeAttribute('data-active');
+
+			this.layer = node;
+			this.layer.setAttribute('data-active', 'layer');
+
+			var shadowID =  node.getAttribute('data-shid') | 0;
+			this.layerID = this.order.indexOf(shadowID);
+			Tool.setActiveShadow(this.layerID, true);
+		}
+
+		Stack.prototype.unsetActiveLayer = function unsetActiveLayer() {
+			if (this.layer)
+				this.layer.removeAttribute('data-active');
+
+			this.layer = null;
+			this.layerID = 0;
+		}
+
+		Stack.prototype.hide = function hide() {
+			this.unsetActiveLayer();
+			this.subject.removeAttribute('data-active');
+			var style = this.container.style;
+			style.left = '100%';
+			style.zIndex = '0';
+		}
+
+		Stack.prototype.show = function show() {
+			elements.shadow_properties.style.display = 'none';
+			elements.element_properties.style.display = 'block';
+
+			if (this.id === 'element') {
+				elements.zIndex.style.display = 'none';
+				elements.transform_rotate.style.display = 'none';
+			}
+			else {
+				elements.zIndex.style.display = 'block';
+				elements.transform_rotate.style.display = 'block';
+			}
+
+			this.subject.setAttribute('data-active', 'subject');
+			var style = this.container.style;
+			style.left = '0';
+			style.zIndex = '10';
+			Tool.setActiveClass(this.id);
+		}
+
+		function init() {
+
+			var elem, size;
+			var layerManager = getElemById("layer_manager");
+			var layerMenu = getElemById("layer_menu");
+			var container = getElemById("stack_container");
+
+			elements.shadow_properties = getElemById('shadow_properties');
+			elements.element_properties = getElemById('element_properties');
+			elements.transform_rotate = getElemById('transform_rotate');
+			elements.zIndex = getElemById('z-index');
+
+			elem = document.querySelectorAll('#layer_menu [data-type="subject"]');
+			size = elem.length;
+
+			for (var i = 0; i &lt; size; i++) {
+				var S = new Stack(elem[i]);
+				stacks[elem[i].id] = S;
+				container.appendChild(S.container);
+				Tool.addCssClass(elem[i].id);
+			}
+
+			active.stack = stacks['element'];
+			stacks['element'].show();
+
+			layerManager.addEventListener("click", mouseEvents);
+			layerMenu.addEventListener("click", mouseEvents);
+
+			ButtonManager.subscribe("before", function(value) {
+				if (value === false &amp;&amp; active.stack === stacks['before'])
+					setActiveStack(stacks['element'])
+				if (value === true &amp;&amp; active.stack !== stacks['before'])
+					setActiveStack(stacks['before'])
+			});
+
+			ButtonManager.subscribe("after", function(value) {
+				if (value === false &amp;&amp; active.stack === stacks['after'])
+					setActiveStack(stacks['element'])
+				if (value === true &amp;&amp; active.stack !== stacks['after'])
+					setActiveStack(stacks['after'])
+			});
+		}
+
+		return {
+			init : init
+		}
+	})();
+
+	/*
+	 * OutputManager
+	 */
+	var OutputManager = (function OutputManager() {
+		var classes = [];
+		var buttons = [];
+		var active = null;
+		var menu = null;
+		var button_offset = 0;
+
+		var crateOutputNode = function(topic, property) {
+
+			var prop = document.createElement('div');
+			var name = document.createElement('span');
+			var value = document.createElement('span');
+
+			var pmatch = property.match(/(^([a-z0-9\-]*)=\[([a-z0-9\-\"]*)\])|^([a-z0-9\-]*)/i);
+
+			name.textContent = '\t' + pmatch[4];
+
+			if (pmatch[3] !== undefined) {
+				name.textContent = '\t' + pmatch[2];
+				value.textContent = pmatch[3] + ';';
+			}
+
+			name.textContent += ': ';
+			prop.className = 'css-property';
+			name.className = 'name';
+			value.className = 'value';
+			prop.appendChild(name);
+			prop.appendChild(value);
+
+			classes[topic].node.appendChild(prop);
+			classes[topic].line[property] = prop;
+			classes[topic].prop[property] = value;
+		}
+
+		var OutputClass = function OutputClass(node) {
+			var topic = node.getAttribute('data-topic');
+			var prop = node.getAttribute('data-prop');
+			var name = node.getAttribute('data-name');
+			var properties = prop.split(' ');
+
+			classes[topic] = {};
+			classes[topic].node = node;
+			classes[topic].prop = [];
+			classes[topic].line = [];
+			classes[topic].button = new Button(topic);
+
+			var open_decl = document.createElement('div');
+			var end_decl = document.createElement('div');
+
+			open_decl.textContent = name + ' {';
+			end_decl.textContent = '}';
+			node.appendChild(open_decl);
+
+			for (var i in properties)
+				crateOutputNode(topic, properties[i]);
+
+			node.appendChild(end_decl);
+		}
+
+		var Button = function Button(topic) {
+			var button = document.createElement('div');
+
+			button.className = 'button';
+			button.textContent = topic;
+			button.style.left = button_offset + 'px';
+			button_offset += 100;
+
+			button.addEventListener("click", function() {
+				toggleDisplay(topic);
+			})
+
+			menu.appendChild(button);
+			return button;
+		}
+
+		var toggleDisplay = function toggleDisplay(topic) {
+			active.button.removeAttribute('data-active');
+			active.node.style.display = 'none';
+			active = classes[topic];
+			active.node.style.display = 'block';
+			active.button.setAttribute('data-active', 'true');
+		}
+
+		var toggleButton = function toggleButton(topic, value) {
+			var display = (value === true) ? 'block' : 'none';
+			classes[topic].button.style.display = display;
+
+			if (value === true)
+				toggleDisplay(topic);
+			else
+				toggleDisplay('element');
+		}
+
+		var updateProperty = function updateProperty(topic, property, data) {
+			try {
+				classes[topic].prop[property].textContent = data + ';';
+			}
+			catch(error) {
+				// console.log("ERROR undefined : ", topic, property, data);
+			}
+		}
+
+		var toggleProperty = function toggleProperty(topic, property, value) {
+			var display = (value === true) ? 'block' : 'none';
+			try {
+				classes[topic].line[property].style.display = display;
+			}
+			catch(error) {
+				// console.log("ERROR undefined : ",classes, topic, property, value);
+			}
+		}
+
+		var init = function init() {
+
+			menu = getElemById('menu');
+
+			var elem = document.querySelectorAll('#output .output');
+			var size = elem.length;
+			for (var i = 0; i &lt; size; i++)
+				OutputClass(elem[i]);
+
+			active = classes['element'];
+			toggleDisplay('element');
+
+			ButtonManager.subscribe("before", function(value) {
+				toggleButton('before', value);
+			});
+
+			ButtonManager.subscribe("after", function(value) {
+				toggleButton('after', value);
+			});
+		}
+
+		return {
+			init : init,
+			updateProperty : updateProperty,
+			toggleProperty : toggleProperty
+		}
+
+	})();
+
+
+	/**
+	 * Init Tool
+	 */
+	var init = function init() {
+		ButtonManager.init();
+		OutputManager.init();
+		ColoPicker.init();
+		SliderManager.init();
+		LayerManager.init();
+		PreviewMouseTracking.init("preview");
+		Tool.init();
+	}
+
+	return {
+		init : init
+	}
+
+})();
+
+
+</code></pre>
+</div>
+
+<div>{{ EmbedLiveSample('box-shadow_generator', '100%', '1100px', '') }}</div>
+
+<p><strong>Похожий инструмент: </strong><a href="https://cssgenerator.org/box-shadow-css-generator.html">Генератор CSS Box Shadow</a></p>
diff --git a/files/ru/web/css/css_flow_layout/index.html b/files/ru/web/css/css_flow_layout/index.html
index 3863c2862e..ee7162f19b 100644
--- a/files/ru/web/css/css_flow_layout/index.html
+++ b/files/ru/web/css/css_flow_layout/index.html
@@ -45,7 +45,7 @@ translation_of: Web/CSS/CSS_Flow_Layout
  <li>{{Glossary("Block/CSS", "Block (CSS)")}}</li>
 </ul>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li>
  <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li>
diff --git a/files/ru/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html b/files/ru/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html
index 0bf469ac46..4fd846a256 100644
--- a/files/ru/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html
+++ b/files/ru/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html
@@ -665,7 +665,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout
 
 <p>В данной статье мы очень кратко рассмотрели спецификацию Grid Layout. Поиграйте с примерами кода и переходите  <a href="https://developer.mozilla.org/ru/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">к следующей части нашего гида, где мы детально покопаемся в недрах CSS Grid Layout</a>.</p>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li>
  <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li>
diff --git a/files/ru/web/css/css_grid_layout/box_alignment_in_css_grid_layout/index.html b/files/ru/web/css/css_grid_layout/box_alignment_in_css_grid_layout/index.html
index 80d1ad38af..cce90b7f30 100644
--- a/files/ru/web/css/css_grid_layout/box_alignment_in_css_grid_layout/index.html
+++ b/files/ru/web/css/css_grid_layout/box_alignment_in_css_grid_layout/index.html
@@ -644,7 +644,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout
 
 <p>Однако, если вы устанавливаете автоматические поля, используя <code>margin-right</code> или <code>margin-left</code>, или абсолютно позиционирующий элемент, используя <code>top</code>, <code>right</code>, <code>bottom</code> and <code>left</code> смещения, вы не будете соблюдать режимы записи. В следующем руководстве мы рассмотрим это взаимодействие между компоновкой сетки CSS, выравниванием ящиков и режимами записи. Это будет важно понимать, если вы разрабатываете сайты, которые затем отображаются на нескольких языках, или если вы хотите смешивать языки или режимы записи в дизайне.</p>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li>
  <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li>
diff --git a/files/ru/web/css/css_grid_layout/css_grid_logical_values_and_writing_modes/index.html b/files/ru/web/css/css_grid_layout/css_grid_logical_values_and_writing_modes/index.html
index d94570b6f2..f7b2f65cb7 100644
--- a/files/ru/web/css/css_grid_layout/css_grid_logical_values_and_writing_modes/index.html
+++ b/files/ru/web/css/css_grid_layout/css_grid_logical_values_and_writing_modes/index.html
@@ -440,7 +440,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Mode
 
 <p><a href="https://drafts.csswg.org/css-logical/">Спецификация логических свойств CSS</a> имеет целью изменить это и в будущем мы сможем использовать <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties">логические эквиваленты</a> для свойств, такие как {{cssxref ("margin-left")}} и {{cssxref ("margin-right") }}, в нашем CSS. Firefox уже реализовал их, поэтому вы можете попробовать их прямо сейчас в Firefox. Я знаю в будущем, как только эти корабли повсюду, ваши знания «Блокировать и встроить» с помощью Grid означают, что вы точно знаете, как их использовать.</p>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li>
  <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li>
diff --git a/files/ru/web/css/css_grid_layout/grid_template_areas/index.html b/files/ru/web/css/css_grid_layout/grid_template_areas/index.html
index bdf9906212..830df019a4 100644
--- a/files/ru/web/css/css_grid_layout/grid_template_areas/index.html
+++ b/files/ru/web/css/css_grid_layout/grid_template_areas/index.html
@@ -471,7 +471,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Грид-области
 
 <p>Если вы проработали эти начальные руководства, теперь вы должны иметь возможность создавать сетки с использованием линейного размещения или названных областей. Потратьте некоторое время на создание некоторых общих шаблонов макетов с использованием сетки, в то время как есть много новых терминов для изучения, синтаксис относительно прост. По мере того, как вы разрабатываете примеры, вы, вероятно, придумаете некоторые вопросы и воспользуетесь случаями, которые мы ещё не рассмотрели. В остальных этих руководствах мы рассмотрим некоторые детали, включённые в спецификацию, - чтобы вы могли начать создавать с ним расширенные макеты.</p>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li>
  <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li>
diff --git a/files/ru/web/css/css_grid_layout/index.html b/files/ru/web/css/css_grid_layout/index.html
index 4e6e70cf5f..bac225352c 100644
--- a/files/ru/web/css/css_grid_layout/index.html
+++ b/files/ru/web/css/css_grid_layout/index.html
@@ -177,7 +177,7 @@ translation_of: Web/CSS/CSS_Grid_Layout
  </tbody>
 </table>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li>
  <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li>
diff --git a/files/ru/web/css/css_grid_layout/layout_using_named_grid_lines/index.html b/files/ru/web/css/css_grid_layout/layout_using_named_grid_lines/index.html
index 043d708e69..4d95530d74 100644
--- a/files/ru/web/css/css_grid_layout/layout_using_named_grid_lines/index.html
+++ b/files/ru/web/css/css_grid_layout/layout_using_named_grid_lines/index.html
@@ -434,7 +434,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines
 
 <p>Это все, что мне нужно. Мне не нужно делать никаких вычислений, сетка автоматически удалила мою 10- пиксельную дорожку желоба, прежде чем назначить пространство для треков столбцов 1fr. Когда вы начнёте создавать свои собственные макеты, вы обнаружите, что синтаксис становится более знакомым, и вы выбираете способы, которые лучше всего подходят для вас, а также тип проектов,которые вам нравятся. Попробуйте построить несколько общих шаблонов с помощью этих различных методов, и вскоре вы найдёте свой самый продуктивный способ работы. В следующем руководстве мы рассмотрим, как сетка может размещать элементы для нас - без необходимости использовать свойства размещения вообще!</p>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li>
  <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li>
diff --git a/files/ru/web/css/css_grid_layout/line-based_placement_with_css_grid/index.html b/files/ru/web/css/css_grid_layout/line-based_placement_with_css_grid/index.html
index 682f3051b8..8c8713b6b4 100644
--- a/files/ru/web/css/css_grid_layout/line-based_placement_with_css_grid/index.html
+++ b/files/ru/web/css/css_grid_layout/line-based_placement_with_css_grid/index.html
@@ -594,7 +594,7 @@ original_slug: >-
 
 <p>Также помните, что элементы на гриде могут перекрывать друг друга, если вы намеренно разместили их так, чтобы они друг друга перекрывали. Подобное поведение позволяет получить интересные эффекты, но, если вы некорректно задали начальные и конечные линии, результат может неприятно вас удивить. <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">Firefox Grid Highlighter</a> будет крайне полезен в процессе обучения, особенно, когда вы строите сложные гриды.</p>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li>
  <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li>
diff --git a/files/ru/web/css/css_grid_layout/realizing_common_layouts_using_css_grid_layout/index.html b/files/ru/web/css/css_grid_layout/realizing_common_layouts_using_css_grid_layout/index.html
index 625700ca08..42a0ac6b0d 100644
--- a/files/ru/web/css/css_grid_layout/realizing_common_layouts_using_css_grid_layout/index.html
+++ b/files/ru/web/css/css_grid_layout/realizing_common_layouts_using_css_grid_layout/index.html
@@ -534,7 +534,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_
  <li>For additional common layout patterns see <em><a href="http://gridbyexample.com">Grid by Example</a></em>, where there are many smaller examples of grid layout and also some larger UI patterns and full page layouts.</li>
 </ul>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li>
  <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li>
diff --git a/files/ru/web/css/css_grid_layout/relationship_of_grid_layout/index.html b/files/ru/web/css/css_grid_layout/relationship_of_grid_layout/index.html
index d92d33d0f7..1d3c710434 100644
--- a/files/ru/web/css/css_grid_layout/relationship_of_grid_layout/index.html
+++ b/files/ru/web/css/css_grid_layout/relationship_of_grid_layout/index.html
@@ -567,7 +567,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout
 
 <p>Как вы могли увидеть, CSS Grid Layout - это часть вашего инструментария. Не бойтесь смешивать его с другими методами создания макетов, чтобы получить различные эффекты. И не переключайтесь, дальше будет много интересного.</p>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li>
  <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li>
diff --git a/files/ru/web/css/grid-area/index.html b/files/ru/web/css/grid-area/index.html
index 2712892e54..eef3305724 100644
--- a/files/ru/web/css/grid-area/index.html
+++ b/files/ru/web/css/grid-area/index.html
@@ -140,7 +140,7 @@ grid-area: unset;
  <li>Video tutorial: <em><a href="http://gridbyexample.com/video/grid-template-areas/">Grid Template Areas</a></em></li>
 </ul>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li>
  <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li>
diff --git a/files/ru/web/css/grid-auto-flow/index.html b/files/ru/web/css/grid-auto-flow/index.html
index 226db2bb76..3d8b2e0892 100644
--- a/files/ru/web/css/grid-auto-flow/index.html
+++ b/files/ru/web/css/grid-auto-flow/index.html
@@ -150,7 +150,7 @@ grid-auto-flow: unset;
  <li>Video tutorial: <em><a href="http://gridbyexample.com/video/series-auto-placement-order/">Introducing Grid auto-placement and order</a></em></li>
 </ul>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li>
  <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li>
diff --git a/files/ru/web/css/grid-row-start/index.html b/files/ru/web/css/grid-row-start/index.html
index 5817eef381..b3e5722198 100644
--- a/files/ru/web/css/grid-row-start/index.html
+++ b/files/ru/web/css/grid-row-start/index.html
@@ -173,7 +173,7 @@ grid-row-start: unset;
  <li>Video tutorial: <em><a href="http://gridbyexample.com/video/series-line-based-placement/">Line-based placement</a></em></li>
 </ul>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li>
  <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li>
diff --git a/files/ru/web/css/grid-template-areas/index.html b/files/ru/web/css/grid-template-areas/index.html
index 3e9a83e744..9930232eec 100644
--- a/files/ru/web/css/grid-template-areas/index.html
+++ b/files/ru/web/css/grid-template-areas/index.html
@@ -124,7 +124,7 @@ grid-template-areas: unset;
  <li>Video tutorial: <em><a href="http://gridbyexample.com/video/grid-template-areas/">Grid Template Areas</a></em></li>
 </ul>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li>
  <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li>
diff --git a/files/ru/web/css/grid-template-columns/index.html b/files/ru/web/css/grid-template-columns/index.html
index 546a42ed31..15278dec92 100644
--- a/files/ru/web/css/grid-template-columns/index.html
+++ b/files/ru/web/css/grid-template-columns/index.html
@@ -150,7 +150,7 @@ grid-template-columns: unset;
  <li>Видео туториал: <em><a href="http://gridbyexample.com/video/series-define-a-grid/">Defining a Grid</a></em></li>
 </ul>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li>
  <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li>
diff --git a/files/ru/web/css/grid-template-rows/index.html b/files/ru/web/css/grid-template-rows/index.html
index e4343f33b6..0a0d5ec229 100644
--- a/files/ru/web/css/grid-template-rows/index.html
+++ b/files/ru/web/css/grid-template-rows/index.html
@@ -139,7 +139,7 @@ grid-template-rows: unset;
  <li>Video tutorial: <em><a href="http://gridbyexample.com/video/series-define-a-grid/">Defining a Grid</a></em></li>
 </ul>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li>
  <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li>
diff --git a/files/ru/web/css/grid/index.html b/files/ru/web/css/grid/index.html
index f400457ae7..d46d0121c6 100644
--- a/files/ru/web/css/grid/index.html
+++ b/files/ru/web/css/grid/index.html
@@ -130,7 +130,7 @@ grid: unset;
  <li>Руководство по разметке сетки: <em><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas#Grid_definition_shorthands">Grid template areas - Grid definition shorthands</a></em></li>
 </ul>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li>
  <li><strong><a href="/en-US/docs/Web/CSS/Reference">CSS ссылки </a></strong></li>
diff --git a/files/ru/web/css/minmax()/index.html b/files/ru/web/css/minmax()/index.html
index 5f9739d1ae..d4a4a37361 100644
--- a/files/ru/web/css/minmax()/index.html
+++ b/files/ru/web/css/minmax()/index.html
@@ -132,7 +132,7 @@ minmax(auto, 300px)
  <li>Video tutorial: <em><a href="http://gridbyexample.com/video/series-minmax/">Introducing minmax()</a></em></li>
 </ul>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li>
  <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li>
diff --git a/files/ru/web/css/overscroll-behavior/index.html b/files/ru/web/css/overscroll-behavior/index.html
index 58377262db..38acf1ffba 100644
--- a/files/ru/web/css/overscroll-behavior/index.html
+++ b/files/ru/web/css/overscroll-behavior/index.html
@@ -7,7 +7,7 @@ translation_of: Web/CSS/overscroll-behavior
 ---
 <div>{{CSSRef}}</div>
 
-<p><span class="seoSummary">The <strong><code>overscroll-behavior</code></strong> CSS property is shorthand for the {{cssxref("overscroll-behavior-x")}} and {{cssxref("overscroll-behavior-y")}} properties, which allow you to control the browser's scroll overflow behavior — what happens when the boundary of a scrolling area is reached.</span></p>
+<p><span class="seoSummary">CSS-свойство <strong><code>overscroll-behavior</code></strong> — это сокращение для свойств {{cssxref("overscroll-behavior-x")}} и {{cssxref("overscroll-behavior-y")}}, которые позволяют управлять поведением прокрутки при достижении границы области прокрутки.</span></p>
 
 <pre class="brush:css no-line-numbers">/* Значения-ключевые слова */
 overscroll-behavior: auto; /* по умолчанию */
@@ -23,40 +23,40 @@ overflow: initial;
 overflow: unset;
 </pre>
 
-<p>По умолчанию, мобильные браузеры как правило обеспечивают эффект "отскока" или даже обновляют страницу при достижение её верхней или нижней части (или другой области прокрутки). You may also have noticed that when you have a dialog box with scrolling content on top of a page of scrolling content, once the dialog box's scroll boundary is reached, the underlying page will then start to scroll — this is called <strong>scroll chaining</strong>.</p>
+<p>По умолчанию мобильные браузеры, как правило, обеспечивают эффект «отскока» или даже обновляют страницу при достижении её верхней или нижней части (или другой области прокрутки). Возможно, вы также замечали, что когда поверх страницы с прокруткой расположено диалоговое окно с прокруткой, то при достижении границы прокрутки диалогового окна нижележащая страница начинает прокручиваться. Это называется цепочкой прокрутки (scroll chaining, англ.)</p>
 
-<p>In some cases these behaviors are not desirable. you can use <code>overscroll-behavior</code> to get rid of unwanted scroll chaining and the browser's Facebook/Twitter app-inspired "pull to refresh"-type behavior.</p>
+<p>В некоторых случаях такое поведение нежелательно. Вы можете использовать <code>overscroll-behavior</code>, чтобы избавиться от нежелательных цепочек прокрутки и поведения страниц браузера по принципу «потяните, чтобы обновить» (pull to refresh, англ.), характерного, например, для приложений Facebook и Twitter.</p>
 
 <p>{{cssinfo}}</p>
 
-<h2 id="Syntax">Syntax</h2>
+<h2 id="Syntax">Синтаксис</h2>
 
-<p>The <code>overscroll-behavior</code> property is specified as one or two keywords chosen from the list of values below.</p>
+<p>Свойство <code>overscroll-behavior</code> задаётся в виде одного или двух ключевых слов, выбранных из списка значений ниже.</p>
 
-<p>Two keywords specifies the <code>overscroll-behavior</code> value on the <code>x</code> and <code>y</code> axes respectively. If only one value is specified, both x and y are assumed to have the same value.</p>
+<p>Два ключевых слова определяют значение <code>overscroll-behavior</code> по осям <code>x</code> и <code>y</code> соответственно. Если задано только одно значение, то предполагается, что и <code>x</code>, и <code>y</code> одинаковы.</p>
 
-<h3 id="Values">Values</h3>
+<h3 id="Values">Значения</h3>
 
 <dl>
  <dt><code>auto</code></dt>
- <dd>The default scroll overflow behavior occurs as normal.</dd>
+ <dd>Поведение по умолчанию.</dd>
  <dt><code>contain</code></dt>
- <dd>Default scroll overflow behavior is observed inside the element this value is set on (e.g. "bounce" effects or refreshes), but no scroll chaining occurs to neighbouring scrolling areas, e.g. underlying elements will not scroll.</dd>
+ <dd>Поведение для <code>overscroll-behavior</code> применяется внутри элемента, для которого установлено это значение (например, эффекты «отскока» или обновления), но не возникают цепочки прокрутки для соседних областей прокрутки, например, нижележащие элементы не будут прокручиваться.</dd>
  <dt><code>none</code></dt>
- <dd>No scroll chaining occurs to neighbouring scrolling areas, and default scroll overflow behavior is prevented.</dd>
+ <dd>Не происходит цепочки прокрутки в соседних областях прокрутки, и по умолчанию предотвращается достижение границы области прокрутки.</dd>
 </dl>
 
-<h3 id="Formal_syntax">Formal syntax</h3>
+<h3 id="Formal_syntax">Формальный синтаксис</h3>
 
 {{csssyntax}}
 
-<h2 id="Examples">Examples</h2>
+<h2 id="Examples">Примеры</h2>
 
-<p>In our <a href="https://mdn.github.io/css-examples/overscroll-behavior/">overscroll-behavior example</a> (see the <a href="https://github.com/mdn/css-examples/tree/master/overscroll-behavior">source code</a> also), we present a full-page list of fake contacts, and a dialog box containing a chat window. </p>
+<p>В нашем примере <a href="https://mdn.github.io/css-examples/overscroll-behavior/">overscroll-поведения</a> (см. также код по ссылке <a href="https://github.com/mdn/css-examples/tree/master/overscroll-behavior"></a>) представлен полностраничный список поддельных контактов и диалоговое окно с чатом.</p>
 
 <p><img alt="" src="https://mdn.mozillademos.org/files/15778/example.png" style="border-style: solid; border-width: 1px; display: block; height: 622px; margin: 0px auto; width: 350px;"></p>
 
-<p>Both of these areas scroll; normally if you scrolled the chat window until you hit a scroll boundary, the underlying contacts window would start to scroll too, which is not desirable. This can be stopped using <code>overscroll-behavior-y</code> (<code>overscroll-behavior</code> would also work) on the chat window, like this:</p>
+<p>Обе эти области прокручиваются; обычно, если вы прокручиваете окно чата до тех пор, пока не достигнете границы прокрутки, нижележащее окно контактов тоже начнёт прокручиваться, что нежелательно. Предотвратить такое поведение можно, используя <code>overscroll-behavior-y</code> (<code>overscroll-behavior</code> также подойдет) для окна чата, как показано ниже: </p>
 
 <pre class="brush: css">.messages {
   height: 220px;
@@ -64,16 +64,16 @@ overflow: unset;
   overscroll-behavior-y: contain;
 } </pre>
 
-<p>We also wanted to get rid of the standard overscroll effects when the contacts are scrolled to the top or bottom (e.g. Chrome on Android refreshes the page when you scroll past the top boundary). This can be prevented by setting <code>overscroll-behavior: none</code> on the {{htmlelement("body")}} element:</p>
+<p>Мы также хотим избавиться от стандартного overscroll-эффекта при прокрутке контактов вверх или вниз (например, Chrome на Android обновляет страницу при прокрутке за пределы верхней границы). Это можно предотвратить, установив для элемента {{htmlelement("body")}} значение <code>overscroll-behavior: none</code>:</p>
 
 <pre class="brush: css">body {
   margin: 0;
   overscroll-behavior: none;
 }</pre>
 
-<h2 id="Specifications">Specifications</h2>
+<h2 id="Specifications">Спецификации</h2>
 
-<p>Until the CSSWG publishes their own draft, the specification can only be found in its <a href="https://wicg.github.io/overscroll-behavior/">WICG Github Repository</a>.</p>
+<p>Пока CSSWG не опубликует свой собственный вариант, спецификация может быть найдена только<a href="https://wicg.github.io/overscroll-behavior/">на Github в репозитории WICG</a>.</p>
 
 <table class="standard-table">
  <thead>
@@ -98,7 +98,7 @@ overflow: unset;
 
 <p>{{Compat("css.properties.overscroll-behavior")}}</p>
 
-<h2 id="See_also">See also</h2>
+<h2 id="See_also">См. также</h2>
 
 <ul>
  <li><a href="https://developers.google.com/web/updates/2017/11/overscroll-behavior#demo">Take control of your scroll: customizing pull-to-refresh and overflow effects</a></li>
diff --git a/files/ru/web/css/position/index.html b/files/ru/web/css/position/index.html
index b795b6435d..c75944e603 100644
--- a/files/ru/web/css/position/index.html
+++ b/files/ru/web/css/position/index.html
@@ -203,7 +203,7 @@ span {
 <p>... позиционирует элемент с id "one" относительно до тех пор, пока видовой экран не будет прокручен таким образом, чтобы элемент был меньше 10 пикселей от вершины. Помимо этого порога элемент будет зафиксирован на 10 пикселей сверху.</p>
 
 <div>
-<p>Общее использование для липкого позиционирования - для заголовков в алфавитном списке. Заголовок «B» появится чуть ниже элементов, начинающихся с «A», пока они не будут прокручиваться за кадром. Вместо того, чтобы скользить за кадром с остальной частью содержимого, заголовок «B» затем останется фиксированным в верхней части окна просмотра, пока все элементы «B» не будут прокручиваться на экране, и в этот момент он будет закрыт «C», заголовок и т. д.</p>
+<p>Типичное использование для липкого позиционирования - для заголовков в алфавитном списке. Заголовок «B» появится чуть ниже элементов, начинающихся с «A», пока они не будут прокручиваться за кадром. Вместо того, чтобы скользить за кадром с остальной частью содержимого, заголовок «B» затем останется фиксированным в верхней части окна просмотра, пока все элементы «B» не будут прокручиваться на экране, и в этот момент он будет закрыт «C», заголовок и т. д.</p>
 
 <p>Вы должны указать порог с по крайней мере одним из <span style="line-height: 1.5;"> {{cssxref('top')}}, {{cssxref('right')}}, {{cssxref('bottom')}}, или {{cssxref('left')}}</span> для того, чтобы липкое позиционирование могло вести себя так, как ожидалось. В противном случае он будет неотличим от относительного позиционирования.</p>
 </div>
diff --git a/files/ru/web/html/element/meta/index.html b/files/ru/web/html/element/meta/index.html
index f7c23bfe53..0a9dc58d64 100644
--- a/files/ru/web/html/element/meta/index.html
+++ b/files/ru/web/html/element/meta/index.html
@@ -103,8 +103,8 @@ translation_of: Web/HTML/Element/meta
   <dt><code>"refresh"</code></dt>
   <dd>Эта прагма определяет:
   <ul>
-   <li>Количество секунд перезагрузки таблицы, если {{htmlattrxref("content", "meta")}} атрибут содержит только положительный целочисленный номер;</li>
-   <li>Время, в количестве секунд, за которое страница должна быть перенаправлена ​​на другую, если {{htmlattrxref("content", "meta")}} атрибут содержит положительный целочисленный номер, заканчивающийся строкой '<code>;url=</code>' и корректный URL.</li>
+   <li>Количество секунд перезагрузки таблицы, если {{htmlattrxref("content", "meta")}} атрибут содержит только целое положительное число;</li>
+   <li>Время, в количестве секунд, за которое страница должна быть перенаправлена ​​на другую, если {{htmlattrxref("content", "meta")}} атрибут содержит целое положительное число, заканчивающийся строкой '<code>;url=</code>' и корректный URL.</li>
   </ul>
   </dd>
   <dt><code>"set-cookie"</code> {{obsolete_inline}}</dt>
@@ -270,12 +270,12 @@ translation_of: Web/HTML/Element/meta
     <tbody>
      <tr>
       <td><code>width</code></td>
-      <td>положительный целочисленный номер или литерал <code>device-width</code></td>
+      <td>целое положительное число или литерал <code>device-width</code></td>
       <td>Определяет ширину области просмотра в пикселях</td>
      </tr>
      <tr>
       <td><code>height</code></td>
-      <td>положительный целочисленный номер или литерал <code>device-height</code></td>
+      <td>целое положительное число или литерал <code>device-height</code></td>
       <td>Определяет высоту области просмотра в пикселях</td>
      </tr>
      <tr>
diff --git a/files/ru/web/html/element/template/index.html b/files/ru/web/html/element/template/index.html
index 10b94c2864..e6ead297ab 100644
--- a/files/ru/web/html/element/template/index.html
+++ b/files/ru/web/html/element/template/index.html
@@ -1,21 +1,32 @@
 ---
-title: <template>
+title: '<template>: элемент шаблона контента'
 slug: Web/HTML/Element/template
 tags:
   - Элемент
+  - HTML
+  - HTML Веб-компоненты
+  - HTML:Основной поток
+  - HTML:Метаданные
+  - HTML:Фразовый контент
+  - HTML:Элементы поддержки скриптов
+  - Справочник
+  - Шаблон
+  - Веб
+  - Веб-компоненты
 translation_of: Web/HTML/Element/template
+browser-compat: html.elements.template
 ---
 <div>{{HTMLRef}}</div>
 
-<p><span class="seoSummary"><strong>HTML элемент контент шаблона  <code>&lt;template&gt;</code></strong> - это механизм для отложенного создания клиентского контента, который не отображается во время загрузки, но может быть инициализирован при помощи JavaScript.</span></p>
+<p><a href="/en-US/docs/Web/HTML">HTML</a>-элемент шаблона контента <strong><code>&lt;template&gt;</code></strong> — это механизм для отложенного создания клиентского контента, который не отображается во время загрузки страницы, но может быть инициализирован при помощи JavaScript.</p>
 
-<p>Шаблон можно представить себе как фрагмент контента, сохранённый для последующего использования в документе. Хотя парсер и обрабатывает содержимое элемента <code>&lt;template&gt;</code> во время загрузки страницы, он делает это только чтобы убедиться в валидности содержимого; само содержимое при этом не отображается.</p>
+<p>Шаблон можно представить себе как фрагмент контента страницы, сохранённый для последующего использования в документе. Хотя парсер и обрабатывает содержимое элемента <strong><code>&lt;template&gt;</code></strong> во время загрузки страницы, он делает это, только чтобы убедиться в валидности содержимого, само содержимое при этом не отображается.</p>
 
 <table class="properties">
  <tbody>
   <tr>
-   <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">Категории контента</a></th>
-   <td><a href="/en-US/docs/Web/HTML/Content_categories#Metadata_content">Metadata content</a>, <a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">flow content</a>, <a href="/en-US/docs/Web/Guide/HTML/Content_categories#Phrasing_content">phrasing content</a>, <a href="/en-US/docs/Web/Guide/HTML/Content_categories#Script-supporting_elements">script-supporting element</a></td>
+   <th scope="row"><a href="/ru/docs/Web/Guide/HTML/Content_categories">Категории контента</a></th>
+   <td><a href="/ru/docs/Web/Guide/HTML/Content_categories#метаданные">Метаданные</a>, <a href="/ru/docs/Web/Guide/HTML/Content_categories#основной_поток">основной поток</a>, <a href="/ru/docs/Web/Guide/HTML/Content_categories#phrasing_content">фразовый контент</a>, <a href="/en-US/docs/Web/Guide/HTML/Content_categories#элементы_поддержки_скриптов">элементы поддержки скриптов</a></td>
   </tr>
   <tr>
    <th scope="row">Допустимый контент</th>
@@ -27,7 +38,7 @@ translation_of: Web/HTML/Element/template
   </tr>
   <tr>
    <th scope="row">Разрешённые родители</th>
-   <td>Any element that accepts <a href="/en-US/docs/Web/Guide/HTML/Content_categories#Metadata_content">metadata content</a>, <a href="/en-US/docs/Web/Guide/HTML/Content_categories#Phrasing_content">phrasing content</a>, or <a href="/en-US/docs/Web/Guide/HTML/Content_categories#Script-supporting_elements">script-supporting elements</a>. Also allowed as a child of a {{HTMLElement("colgroup")}} element that does <em>not</em> have a {{htmlattrxref("span", "colgroup")}} attribute.</td>
+   <td>Любые элементы, которые могут содержать <a href="/ru/docs/Web/Guide/HTML/Content_categories#метаданные">метаданные</a>, <a href="/ru/docs/Web/Guide/HTML/Content_categories#phrasing_content">фразовый контент</a> или <a href="/en-US/docs/Web/Guide/HTML/Content_categories#элементы_поддержки_скриптов">элементы поддержки скриптов</a>. Допускается вкладывать элемент в {{HTMLElement("colgroup")}}, у которого <em>отсутствует</em> атрибут {{htmlattrxref("span", "colgroup")}}.</td>
   </tr>
   <tr>
    <th scope="row">Неявные роли ARIA</th>
@@ -44,13 +55,13 @@ translation_of: Web/HTML/Element/template
  </tbody>
 </table>
 
-<h2 id="Атрибуты">Атрибуты</h2>
+<h2 id="Attributes">Атрибуты</h2>
 
 <p>Элемент может иметь <a href="/en-US/docs/Web/HTML/Global_attributes">общие атрибуты</a>.</p>
 
-<p>Также есть доступный только для чтения атрибут <code>content</code>, который предоставляет доступ к содержимому шаблона. Проверка на наличие этого атрибута является распространённым способом определить, поддерживает ли браузер элемент <code>&lt;template&gt;</code>.</p>
+<p>Однако у <code>{{domxref("HTMLTemplateElement")}}</code> есть свойство <code>{{domxref("HTMLTemplateElement.content", "content")}}</code>, которое возвращает доступный только для чтения <code>{{domxref("DocumentFragment")}}</code>, содержащий DOM-поддерево шаблона. Обратите внимание, что прямое использование значения <code>{{domxref("HTMLTemplateElement.content", "content")}}</code> может привести к непредсказуемому поведению, см. раздел <a href="#avoiding_documentfragment_pitfall">ловушка <code>DocumentFragment</code></a> ниже.</p>
 
-<h2 id="Примеры">Примеры</h2>
+<h2 id="Examples">Примеры</h2>
 
 <p>Начнём с HTML.</p>
 
@@ -62,7 +73,7 @@ translation_of: Web/HTML/Element/template
     &lt;/tr&gt;
   &lt;/thead&gt;
   &lt;tbody&gt;
-    &lt;!-- existing data could optionally be included here --&gt;
+    &lt;!-- данные будут вставлены сюда --&gt;
   &lt;/tbody&gt;
 &lt;/table&gt;
 
@@ -74,40 +85,42 @@ translation_of: Web/HTML/Element/template
 &lt;/template&gt;
 </pre>
 
-<p>Для начала у нас есть таблица, в которую мы собираемся вставить содержимое с помощью Javascript кода. Затем следует шаблон, который описывает структуру HTML фрагмента представляющего одну строку таблицы</p>
+<p>Для начала у нас есть таблица, в которую мы собираемся вставить контент с помощью Javascript. За таблицей следует шаблон, который описывает структуру HTML-фрагмента — строку таблицы.</p>
 
-<p>Теперь, когда таблица была создана и шаблон определён, мы используем JavaScript чтобы вставить строки в таблицу. Каждая строка строится с использованием шаблона.</p>
+<p>Теперь, когда таблица была создана, а шаблон определён, используем JavaScript, чтобы вставить строки в таблицу. Каждая строка будет строиться по шаблону.</p>
 
-<pre class="brush:js;">// Проверяем поддерживает ли браузер тег &lt;template&gt;
-// проверив наличие атрибута content у элемента template
+<pre class="brush:js;">// Убеждаемся, что браузер поддерживает тег &lt;template&gt;,
+// проверив наличие атрибута content у элемента template.
 if ('content' in document.createElement('template')) {
 
-  // Instantiate the table with the existing HTML tbody and the row with the template
-  var t = document.querySelector('#productrow'),
-  td = t.content.querySelectorAll("td");
+  // Находим элемент tbody таблицы
+  // и шаблон строки
+  var tbody = document.querySelector("tbody");
+  var template = document.querySelector('#productrow');
+
+  // Клонируем новую строку и вставляем её в таблицу
+  var clone = template.content.cloneNode(true);
+  var td = clone.querySelectorAll("td");
   td[0].textContent = "1235646565";
   td[1].textContent = "Stuff";
 
-  // клонируем новую строку и вставляем её в таблицу
-  var tb = document.getElementsByTagName("tbody");
-  var clone = document.importNode(t.content, true);
-  tb[0].appendChild(clone);
+  tbody.appendChild(clone);
 
-  // создаём новую строку
+  // Клонируем новую строку ещё раз и вставляем её в таблицу
+  var clone2 = template.content.cloneNode(true);
+  td = clone2.querySelectorAll("td");
   td[0].textContent = "0384928528";
-  td[1].textContent = "Acme Kidney Beans";
+  td[1].textContent = "Acme Kidney Beans 2";
 
- // клонируем новую строку и вставляем её в таблицу
-  var clone2 = document.importNode(t.content, true);
-  tb[0].appendChild(clone2);
+  tbody.appendChild(clone2);
 
 } else {
-  // необходимо найти другой способ добавить строку в таблицу т.к.
-  // тег &lt;template&gt; не поддерживается браузером
+  // Иной способ заполнить таблицу, потому что
+  // HTML-элемент template не поддерживается.
 }
 </pre>
 
-<p>Как результат имеем HTML таблицу с двумя новыми строками добавленными с помощью JavaScript:</p>
+<p>Как результат имеем HTML-таблицу с двумя новыми строками, добавленными с помощью JavaScript:</p>
 
 <div class="hidden">
 <pre class="brush: css">table {
@@ -118,39 +131,56 @@ table td {
 }</pre>
 </div>
 
-<p>{{EmbedLiveSample("Example", 500, 120)}}</p>
+<p>{{EmbedLiveSample("Examples", 500, 120)}}</p>
 
-<h2 id="Specifications" name="Specifications">Спецификации</h2>
+<h2 id="Avoiding_DocumentFragment_pitfall">Ловушка <code>DocumentFragment</code></h2>
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Спецификация</th>
-   <th scope="col">Статус</th>
-   <th scope="col">Комментарий</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML WHATWG','/scripting-1.html#the-template-element','template element')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td>No change</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5 W3C','/scripting-1.html#the-template-element','template element')}}</td>
-   <td>{{Spec2('HTML5 W3C')}}</td>
-   <td>Initial definition</td>
-  </tr>
- </tbody>
-</table>
+<p>{{domxref("DocumentFragment")}} не подходит в качестве целевого объекта для многих событий, поэтому предпочтительнее клонировать или ссылаться на элементы внутри него.</p>
+
+<p>Рассмотрим следующие HTML-разметку и JavaScript-код:</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div id="container"&gt;&lt;/div&gt;
+
+&lt;template id="template"&gt;
+  &lt;div&gt;Click me&lt;/div&gt;
+&lt;/template&gt;</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">const container = document.getElementById("container");
+const template = document.getElementById("template");
+
+function clickHandler(event) {
+  event.target.append(" — Clicked this div");
+}
+
+const firstClone = template.content.cloneNode(true);
+firstClone.addEventListener("click", clickHandler);
+container.appendChild(firstClone);
+
+const secondClone = template.content.firstElementChild.cloneNode(true);
+secondClone.addEventListener("click", clickHandler);
+container.appendChild(secondClone);</pre>
+
+<h3 id="Result">Результат</h3>
+
+<p>В переменной <code>firstClone</code> у нас экземпляр (клон) <code>DocumentFragment</code>, и хотя у нас получилось отрисовать его внутри контейнера, клик по нему не срабатывает. В переменной <code>secondClone</code> у нас экземпляр (клон) <code>{{domxref("HTMLDivElement")}}</code>, клик по которому работает как ожидается.</p>
+
+<p>{{EmbedLiveSample('Avoiding_DocumentFragment_pitfall')}}</p>
 
-<h2 id="Совместимость_браузера">Совместимость браузера</h2>
+<h2 id="Specifications">Спецификации</h2>
 
+<p>{{Specifications}}</p>
 
+<h2 id="Browser_compatibility">Совместимость с браузерами</h2>
 
-<p>{{Compat("html.elements.template")}}</p>
+<p>{{Compat}}</p>
 
 <h2 id="Смотрите_также">Смотрите также</h2>
 
 <ul>
- <li>Веб компоненты: {{HTMLElement("slot")}} (и устаревший: {{HTMLElement("shadow")}})</li>
- <li><a href="/en-US/docs/Web/Web_Components/Using_templates_and_slots">Использование шаблонов и слотов</a></li>
+  <li>Веб-компоненты: {{HTMLElement("slot")}} (и устаревший: {{HTMLElement("shadow")}})</li>
+  <li><a href="/en-US/docs/Web/Web_Components/Using_templates_and_slots">Использование шаблонов и слотов</a></li>
 </ul>
diff --git a/files/ru/web/http/headers/etag/index.html b/files/ru/web/http/headers/etag/index.html
index bae3098460..17ebcfdebc 100644
--- a/files/ru/web/http/headers/etag/index.html
+++ b/files/ru/web/http/headers/etag/index.html
@@ -6,7 +6,7 @@ original_slug: Web/HTTP/Заголовки/ETag
 ---
 <div> {{HTTPSidebar}}</div>
 
-<p><code><font face="Arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">Заголовок HTTP ответа </span></font><strong>ETag</strong></code> является идентификатором специфической версии ресурса. Он позволяет более эффективно использовать кеш и сохраняет пропускную способность, позволяя серверу отправлять не весь ответ, если содержимое не изменилось. С другой стороны, если контент все-так поменялся, <code>Etag</code> помогает предотвратить одновременное обновление ресурса от перезаписи друг друга ("воздушная коллизия").</p>
+<p><code><font face="Arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">Заголовок HTTP ответа </span></font><strong>ETag</strong></code> является идентификатором специфической версии ресурса. Он позволяет более эффективно использовать кеш и сохраняет пропускную способность, позволяя серверу отправлять не весь ответ, если содержимое не изменилось. С другой стороны, если контент все-таки поменялся, <code>Etag</code> помогает предотвратить одновременное обновление ресурса от перезаписи друг друга ("воздушная коллизия").</p>
 
 <p>Если ресурс по заданному URL изменился, будет сгенерированно новое значение <code>Etag</code>. Поэтому <code>Etag</code> чем-то похож на отпечаток ("fingerprints") и может также быть использован для отслеживания предназначения некоторых серверов. Сравнение этих заголовков позволяет быстро определить являются ли два представления ресурса одними и теме же. Отслеживаемый сервер также может задать сохранять их постоянно.</p>
 
diff --git a/files/ru/web/index.html b/files/ru/web/index.html
index 2f9e882a5d..e084f7e316 100644
--- a/files/ru/web/index.html
+++ b/files/ru/web/index.html
@@ -6,7 +6,7 @@ tags:
   - Web
 translation_of: Web
 ---
-<section id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li><strong><a href="/ru/docs/Web">Веб-технологии для разработчиков </a></strong></li>
  <li class="toggle">
diff --git a/files/ru/web/javascript/reference/global_objects/string/match/index.html b/files/ru/web/javascript/reference/global_objects/string/match/index.html
index 8a396c6eee..ea19c9d8f2 100644
--- a/files/ru/web/javascript/reference/global_objects/string/match/index.html
+++ b/files/ru/web/javascript/reference/global_objects/string/match/index.html
@@ -53,21 +53,21 @@ translation_of: Web/JavaScript/Reference/Global_Objects/String/match
 
 <p>В следующем примере метод <code>match()</code> используется для поиска слова <code>'Глава'</code>, за которым следуют 1 или более цифр, за которыми следуют 0 или более раз группы из точки и цифры. Регулярное выражение включает флаг <code>i</code>, так что регистр букв игнорируется.</p>
 
-<pre class="brush: js">var str = 'Глава 3.4.5.1 содержит дополнительную информацию';
-var re = /(глава \d+(\.\d)*)/i;
+<pre class="brush: js">var str = 'Смотри главу 3.4.5.1 для дополнительной информации';
+var re = /смотри (главу \d+(\.\d)*)/i;
 var found = str.match(re);
 
 console.log(found);
 
-// выведет [ 'Глава 3.4.5.1',
-//           'Глава 3.4.5.1',
+// выведет [ 'Смотри главу 3.4.5.1',
+//           'главу 3.4.5.1',
 //           '.1',
 //           index: 0,
-//           input: 'Глава 3.4.5.1 содержит дополнительную информацию' ]
+//           input: 'Смотри главу 3.4.5.1 для дополнительной информации' ]
 
-// 'Глава 3.4.5.1' - это первое сопоставление и первое значение,
-// сопоставленное с группой `(Глава \d+(\.\d)*)`.
-// '.1' - это последнее значение, сопоставленное с группой `(\.\d)`.
+// 'Смотри главу 3.4.5.1' - это полное сопоставление
+// 'главу 3.4.5.1' - первое значение, сопоставленное с группой "(главу \d+(\.\d)*)".
+// '.1' - это последнее значение, сопоставленное с группой "(\.\d)".
 // Свойство 'index' содержит значение (0) индекса совпадения
 // относительно начала сопоставления
 // Свойство 'input' содержит значение введённой строки.</pre>
diff --git a/files/ru/web/javascript/reference/statements/for-await...of/index.html b/files/ru/web/javascript/reference/statements/for-await...of/index.html
index 1b0876d01f..011ab8be61 100644
--- a/files/ru/web/javascript/reference/statements/for-await...of/index.html
+++ b/files/ru/web/javascript/reference/statements/for-await...of/index.html
@@ -27,7 +27,7 @@ translation_of: Web/JavaScript/Reference/Statements/for-await...of
  <dd>Объект, чьи итерируемые свойства будут повторяться.</dd>
 </dl>
 
-<h3 id="Итерирование_по_асинхронным_переменным"><span style="background-color: #333333; letter-spacing: -0.00278rem;">Итерирование по асинхронным переменным</span></h3>
+<h3 id="Итерирование_по_асинхронным_переменным">Итерирование по асинхронным переменным</h3>
 
 <p>Вы также можете перебрать объект, который явно реализует асинхронный итерируемый протокол.</p>
 
@@ -57,7 +57,7 @@ translation_of: Web/JavaScript/Reference/Statements/for-await...of
 // 2
 </pre>
 
-<h3 id="Итерирование_по_асинхронным_генераторам."><span style="background-color: #333333; letter-spacing: -0.00278rem;">Итерирование по асинхронным генераторам.</span></h3>
+<h3 id="Итерирование_по_асинхронным_генераторам.">Итерирование по асинхронным генераторам</h3>
 
 <p>Поскольку асинхронные генераторы реализуют асинхронный протокол Iterator, по ним можно пройти циклом с помощью <code>for await... of</code></p>
 
diff --git a/files/ru/web/performance/animation_performance_and_frame_rate/index.html b/files/ru/web/performance/animation_performance_and_frame_rate/index.html
index 8ccf7fb88d..0d0688c535 100644
--- a/files/ru/web/performance/animation_performance_and_frame_rate/index.html
+++ b/files/ru/web/performance/animation_performance_and_frame_rate/index.html
@@ -65,7 +65,11 @@ original_slug: Web/Performance/Производительность_анимац
  <tbody>
   <tr>
    <td>Свойства, затрагивающие геометрию или позицию элемента, запускают <strong>весь</strong> процесс заново: новое вычисление стилей, layout и перерисовку.</td>
-   <td><img alt="" src="https://mdn.mozillademos.org/files/10827/recalculate-style.png" style="height: 26px; width: 123px;"> <img alt="" src="https://mdn.mozillademos.org/files/10825/layout.png" style="height: 26px; width: 123px;"> <img alt="" src="https://mdn.mozillademos.org/files/10823/paint.png" style="height: 26px; width: 123px;"></td>
+   <td>
+     <img alt="" src="/en-US/docs/Web/Performance/Animation_performance_and_frame_rate/recalculate-style.png" loading="lazy" width="246" height="52">
+     <img alt="" src="/en-US/docs/Web/Performance/Animation_performance_and_frame_rate/layout.png" loading="lazy" width="244" height="52">
+     <img alt="" src="/en-US/docs/Web/Performance/Animation_performance_and_frame_rate/paint.png" loading="lazy" width="246" height="52">
+    </td>
    <td>
     <p><code><a href="/en-US/docs/Web/CSS/left">left</a></code><br>
      <code><a href="/en-US/docs/Web/CSS/max-width">max-width</a></code><br>
@@ -78,7 +82,11 @@ original_slug: Web/Performance/Производительность_анимац
    <td>
     <p>Свойства, не затрагивающие геометрию и позиционирование элементов, но не лежащие в отдельном слое, запускают только вычисление стилей и перерисовку, но не Layout.</p>
    </td>
-   <td><img alt="" src="https://mdn.mozillademos.org/files/10827/recalculate-style.png" style="height: 26px; width: 123px;"> <img alt="" src="https://mdn.mozillademos.org/files/10835/layout-faint.png" style="height: 52px; width: 123px;"> <img alt="" src="https://mdn.mozillademos.org/files/10823/paint.png" style="height: 26px; width: 123px;"></td>
+   <td>
+     <img alt="" src="/en-US/docs/Web/Performance/Animation_performance_and_frame_rate/recalculate-style.png" loading="lazy" width="246" height="52">
+     <img alt="" src="/en-US/docs/Web/Performance/Animation_performance_and_frame_rate/layout-faint.png" loading="lazy" width="246" height="52">
+     <img alt="" src="/en-US/docs/Web/Performance/Animation_performance_and_frame_rate/paint.png" loading="lazy" width="246" height="52">
+    </td>
    <td>
     <p><code><a href="/en-US/docs/Web/CSS/color">color</a></code></p>
    </td>
@@ -87,7 +95,11 @@ original_slug: Web/Performance/Производительность_анимац
    <td>
     <p>Свойства, которые рендерятся в отдельном слое не запускают даже repaint, так как результат обновления обрабатывается на этапе композиции.</p>
    </td>
-   <td><img alt="" src="https://mdn.mozillademos.org/files/10827/recalculate-style.png" style="height: 26px; width: 123px;"> <img alt="" src="https://mdn.mozillademos.org/files/10835/layout-faint.png" style="height: 52px; width: 123px;"> <img alt="" src="https://mdn.mozillademos.org/files/10839/paint-faint.png" style="height: 26px; width: 123px;"></td>
+   <td>
+     <img alt="" src="/en-US/docs/Web/Performance/Animation_performance_and_frame_rate/recalculate-style.png" loading="lazy" width="246" height="52">
+     <img alt="" src="/en-US/docs/Web/Performance/Animation_performance_and_frame_rate/layout-faint.png" loading="lazy" width="246" height="52">
+     <img alt="" src="/en-US/docs/Web/Performance/Animation_performance_and_frame_rate/paint-faint.png" loading="lazy" width="246" height="52">
+   </td>
    <td><code><a href="/en-US/docs/Web/CSS/transform">transform</a></code><br>
     <code><a href="/en-US/docs/Web/CSS/opacity">opacity</a></code></td>
   </tr>
@@ -100,7 +112,7 @@ original_slug: Web/Performance/Производительность_анимац
 
 <h2 id="Пример_margin_против_transform">Пример: margin против transform</h2>
 
-<p>В этом разделе мы увидим, как инструмент <a href="/en-US/docs/Tools/Performance/Waterfall">Waterfall</a> может указать на разницу между анимацией. её <code><a href="/en-US/docs/Web/CSS/margin">margin</a></code>  и <code><a href="/en-US/docs/Web/CSS/transform">transform</a></code>.</p>
+<p>В этом разделе мы увидим, как инструмент <a href="/en-US/docs/Tools/Performance/Waterfall">Waterfall</a> может указать на разницу между анимацией <code><a href="/en-US/docs/Web/CSS/margin">margin</a></code> и <code><a href="/en-US/docs/Web/CSS/transform">transform</a></code>.</p>
 
 <p>Задумка этого сценария не в том, чтобы убедить вас, что анимация через <code>margin</code> - это всегда плохая идея. Сценарий нужен, чтобы продемонстрировать, как инструменты могут помочь вам понять работу браузера и как вы можете применить эти знания для оптимизации.</p>
 
@@ -168,7 +180,7 @@ original_slug: Web/Performance/Производительность_анимац
 
 <h4 id="Этапы_рендеринга_в_деталях_Waterfall_2">Этапы рендеринга в деталях (Waterfall)</h4>
 
-<p>В этой секции мы видим объяснения тому, что fps значительно улучшился. Мы больше не тратим время на layout и перерисовку элементов. :</p>
+<p>В этой секции мы видим объяснения тому, что fps значительно улучшился. Мы больше не тратим время на layout и перерисовку элементов:</p>
 
 <p><img alt="" src="https://mdn.mozillademos.org/files/10867/transform-timeline.png" style="display: block; height: 384px; margin-left: auto; margin-right: auto; width: 800px;"></p>
 
diff --git a/files/ru/web/performance/fundamentals/index.html b/files/ru/web/performance/fundamentals/index.html
index 7708cc7c6e..2fd01a765d 100644
--- a/files/ru/web/performance/fundamentals/index.html
+++ b/files/ru/web/performance/fundamentals/index.html
@@ -53,7 +53,7 @@ original_slug: Web/Performance/Основы
 
 <h3 id="Использование_энергии">Использование энергии</h3>
 
-<p>Последний показатель, который нужно упомянуть - это потребление энергии. Подобно использованию памяти, пользователь чувствует потребление памяти опосредованно, отмечая время, через которое устройство начинает изменять воспринимаемую пользователем производительность (UPP). Для минимизации отрицательных эффектов использования энергии, мы должны делать систему экономной.</p>
+<p>Последний показатель, который нужно упомянуть - это потребление энергии. Подобно использованию памяти, пользователь чувствует потребление энергии опосредованно, отмечая время, через которое устройство начинает изменять воспринимаемую пользователем производительность (UPP). Для минимизации отрицательных эффектов использования энергии, мы должны делать систему экономной.</p>
 
 <p>Для примера, вспомните, как работают мобильные устройства: вы можете включить режим энергосбережения, когда отключаются другие системы. Но есть и более жёсткий режим, который включается автоматически, когда заряд уменьшается до 5% - система включает троттлинг процессора, замедляя выполнение всех инструкций.</p>
 
@@ -61,7 +61,7 @@ original_slug: Web/Performance/Основы
 
 <h2 id="Оптимизация_платформы">Оптимизация платформы</h2>
 
-<p>В этой секции приводится краткий обзор того, как Firefox/Gecko вкладывается в производительность в целом, не заостряя внимание на конкретных приложениях. Для разработчиков и пользователей это будет вопрос на ответ "Как платформа помогает мне?".</p>
+<p>В этой секции приводится краткий обзор того, как Firefox/Gecko вкладывается в производительность в целом, не заостряя внимание на конкретных приложениях. Для разработчиков и пользователей это будет ответ на вопрос "Как платформа помогает мне?".</p>
 
 <h3 id="Web_технологии">Web технологии</h3>
 
diff --git a/files/ru/web/performance/how_browsers_work/index.html b/files/ru/web/performance/how_browsers_work/index.html
index 27820e7dc2..9f7009e974 100644
--- a/files/ru/web/performance/how_browsers_work/index.html
+++ b/files/ru/web/performance/how_browsers_work/index.html
@@ -25,7 +25,7 @@ translation_of: Web/Performance/How_browsers_work
 
 <p>Две главных проблемы в производительности - это проблема скорости сети и проблема однопоточности браузеров.</p>
 
-<p>Сетевые задержи - это главная проблема, которую нужно преодолеть при достижении быстрой загрузки. Чтобы ускорить загрузку разработчик должен посылать запрошенные данные как можно быстрее или, на худой конец, сделать вид, что они отправляются очень быстро. Сетевые задержки - это время, которое требуется для передачи данных от источника к браузеру. Производительность здесь - это то, что делает загрузку страницу как можно более скорой.</p>
+<p>Сетевые задержки - это главная проблема, которую нужно преодолеть для достижения быстрой загрузки. Чтобы ускорить загрузку разработчик должен посылать запрошенные данные как можно быстрее или, на худой конец, сделать вид, что они отправляются очень быстро. Сетевые задержки - это время, которое требуется для передачи данных от источника к браузеру. Производительность здесь - это то, что делает загрузку страниц как можно более быстрой.</p>
 
 <p>В большинстве своём браузеры рассматриваются как однопоточные приложения. Чтобы достичь плавности взаимодействия, разработчик должен обеспечивать производительность во всём, начиная от плавного скроллинга, до быстрой реакции на нажатие экрана. Время рендера - это ключевое понятие. Разработчик должен обеспечить такую работу приложения, чтобы все его задачи могли быть выполнены достаточно быстро. В таком случае процессор будет свободен для обработки пользовательского ввода. Для решения проблемы однопоточности вы должны понять природу браузеров и научиться разгружать основной поток процесса там, где это возможно и допустимо.</p>
 
diff --git a/files/ru/web/performance/how_long_is_too_long/index.html b/files/ru/web/performance/how_long_is_too_long/index.html
index e64a560d4a..c835de03fc 100644
--- a/files/ru/web/performance/how_long_is_too_long/index.html
+++ b/files/ru/web/performance/how_long_is_too_long/index.html
@@ -17,7 +17,7 @@ translation_of: Web/Performance/How_long_is_too_long
 
 <p>Как правило, первый ресурс, который получает клиент - это HTML документ, который затем делает запрос на загрузку остальных ресурсов. Как было подмечено в <a href="/ru/docs/Web/Performance/Critical_rendering_path">статье о критическом пути рендеринга</a> - как только браузер получает данные, он сразу начинает их обработку, вместо того, чтобы дожидаться загрузки всех ресурсов.</p>
 
-<p>Да, одна секунда на загрузку - это хорошая цель. Но лишь немногие приложения достигают этой скорости. Всё зависит от ожиданий. Например, от приложения "Hello World", работающего в корпоративной (локальной) сети, будет ожидаться загрузка за миллисекунды. Пользователь из северной Сибири, пользующийся Edge-мобильной сетью и устройством 5-летней давности, вероятно, посчитает даже 20-секундную загрузку быстрой. Однако, в среднем, если вы позволяете приложению не отвечать на запрос 3 или 4 секунды, вы, вероятно, потеряете пользователя. И, что ещё хуже, этот пользователь вряд ли вернётся к вам в ближайшее время.</p>
+<p>Да, одна секунда на загрузку — это хорошая цель. Но лишь немногие приложения достигают этой скорости. Всё зависит от ожиданий. Например, от приложения «Hello World», работающего в корпоративной (локальной) сети, будет ожидаться загрузка за миллисекунды. Пользователь из северной Сибири, пользующийся EDGE-мобильной сетью и устройством 5-летней давности, вероятно, посчитает даже 20-секундную загрузку быстрой. Однако, в среднем, если вы позволяете приложению не отвечать на запрос 3 или 4 секунды, вы, вероятно, потеряете пользователя. И, что ещё хуже, этот пользователь вряд ли вернётся к вам в ближайшее время.</p>
 
 <p>В деле оптимизации производительности рекомендуется обозначить амбициозные задачи по первичной загрузке контента. Например, 5 секунд для 3G сетей и 1.5 секунды для офисного Т1 канала. Для навигации внутри приложения цели должны быть ещё строже. К счастью, для оптимизации можно использовать Service Workers и кеширование.</p>
 
diff --git a/files/ru/web/performance/optimizing_startup_performance/index.html b/files/ru/web/performance/optimizing_startup_performance/index.html
index 4325eeab62..a2b6fbcd0f 100644
--- a/files/ru/web/performance/optimizing_startup_performance/index.html
+++ b/files/ru/web/performance/optimizing_startup_performance/index.html
@@ -9,19 +9,19 @@ translation_of: Web/Performance/Optimizing_startup_performance
 
 <h2 id="Приятный_запуск">Приятный запуск</h2>
 
-<p>Не имеет значения, какую платформу вы используете, всегда будет правильным обеспечить как можно более быструю загрузку приложения. Так как это наиболее общая проблема, мы не будем заострять на ней внимание здесь. Однако, мы обратим внимание на наибольшую проблему Web-приложений: синхронная загрузка ресурсов. Решением этой проблемы был бы максимальный переход на асинхронную загрузку ресурсов. Это означает, что инициализирующий код не должен запускаться в одно единственном обработчике событий в главном потоке процесса.</p>
+<p>Не имеет значения, какую платформу вы используете, всегда будет правильным обеспечить как можно более быструю загрузку приложения. Так как это наиболее общая проблема, мы не будем заострять на ней внимание здесь. Однако, мы обратим внимание на наибольшую проблему Web-приложений: синхронная загрузка ресурсов. Решением этой проблемы был бы максимальный переход на асинхронную загрузку ресурсов. Это означает, что инициализирующий код не должен запускаться в одном единственном обработчике событий в главном потоке процесса.</p>
 
-<p>Вместо этого, вы можете разбить ваш код так, чтобы часть его обрабатывалась в <a href="/en-US/docs/DOM/Using_web_workers" title="/en-US/docs/DOM/Using_web_workers">Web worker</a>, что выделит его в отдельные фоновые неблокирующие треды (например, запросы данных и их обработка). Затем, все, что должно быть выполнено в основном потоке (например, пользовательские события или рендеринг интерфейса) должно быть разбито на небольшие кусочки так, чтобы обработчик браузера выполнял небольшие куски кода итеративно, а не за один подход. Это позволит ваше приложению выглядеть отзывчивым даже во время первоначальной загрузки.</p>
+<p>Вместо этого, вы можете разбить ваш код так, чтобы часть его обрабатывалась в <a href="/en-US/docs/DOM/Using_web_workers" title="/en-US/docs/DOM/Using_web_workers">Web worker</a>, что выделит его в отдельные фоновые неблокирующие треды (например, запросы данных и их обработка). Затем, все, что должно быть выполнено в основном потоке (например, пользовательские события или рендеринг интерфейса) должно быть разбито на небольшие кусочки так, чтобы обработчик браузера выполнял небольшие куски кода итеративно, а не за один подход. Это позволит вашему приложению выглядеть отзывчивым даже во время первоначальной загрузки.</p>
 
-<p>Почему так важно делать все это асинхронно? Помимо причин, перечисленных выше, подумайте о влиянии, которые оказывают зависшие приложения: пользователь не может отменить запуск, даже если он запустил приложение по ошибке. Если приложение запускается в браузере, пользователь даже не сможет закрыть вкладку. В конечно счёте это может привести даже к системным предупреждениям о "медленных скриптах" или "исчерпании памяти". А ведь было время, когда каждая вкладка не работала в отдельном процессе, как сейчас, а потому повисшая вкладка приводила к зависанию всего браузера! Вы должны не просто делать загрузку приложения "мягкой", но и давать пользователю знать о процессе загрузки: показывайте ему прогресс-бары или этапы, которые проходит приложение. Это позволит пользователю убедиться, что приложение не зависло.</p>
+<p>Почему так важно делать все это асинхронно? Помимо причин, перечисленных выше, подумайте о влиянии, которые оказывают зависшие приложения: пользователь не может отменить запуск, даже если он запустил приложение по ошибке. Если приложение запускается в браузере, пользователь даже не сможет закрыть вкладку. В конечном счёте это может привести даже к системным предупреждениям о "медленных скриптах" или "исчерпании памяти". А ведь было время, когда каждая вкладка не работала в отдельном процессе, как сейчас, а потому повисшая вкладка приводила к зависанию всего браузера! Вы должны не просто делать загрузку приложения "мягкой", но и давать пользователю знать о процессе загрузки: показывайте ему прогресс-бары или этапы, которые проходит приложение. Это позволит пользователю убедиться, что приложение не зависло.</p>
 
 <h3 id="Было_бы_желание...">Было бы желание...</h3>
 
-<p>Если вы начинаете ваш проект с нуля, обычно очень легко начать писать код "правильно", делая все изначально асинхронным. Все вычисления при запуски должны выполняться в фоновых потоках, в то время как основной поток должен держаться максимально очищенным от лишних функций. Включайте индикатор прогресса для того, чтобы пользователь знал, что сейчас происходит и не думал, что приложение сломано. В теории, если вы только начинаете разработку приложения - это все должно быть очень просто.</p>
+<p>Если вы начинаете ваш проект с нуля, обычно очень легко начать писать код "правильно", делая все изначально асинхронным. Все вычисления при запуске должны выполняться в фоновых потоках, в то время как основной поток должен держаться максимально очищенным от лишних функций. Включайте индикатор прогресса для того, чтобы пользователь знал, что сейчас происходит и не думал, что приложение сломано. В теории, если вы только начинаете разработку приложения - это все должно быть очень просто.</p>
 
 <p>С другой стороны, потребуются некоторые ухищрения, если вы пытаетесь портировать существующее десктопное приложение в Web или привыкли писать такие. Десктопные приложения обычно не нуждаются в написании кода в асинхронной манере, потому что операционная система берёт заботу об этом на себя. В исходниках такого приложения может быть лишь один поток обработки кода, но даже он может быть легко разбит на асинхронные этапы (запуском каждой новой итерации потока по отдельности). В таких приложениях запуск часто представляет собой последовательную монолитную процедуру, которая время от времени обращается к метрикам прогресса и обновляет их.</p>
 
-<p>И хотя вы можете использовать <a href="/en-US/docs/DOM/Using_web_workers" title="/en-US/docs/DOM/Using_web_workers">Web workers</a>, чтобы обработать очень большие и "тяжёлые" скрипты асинхронно, вы должны учитывать некоторые ограничения. Web Worker-ы не имеют доступа к некоторым API браузера: DOM, <a href="/en-US/docs/WebGL" title="/en-US/docs/WebGL">WebGL</a> или audio, они не могут посылать синхронные сообщения в основной поток, вы даже не можете проксировать некоторые из этих API в основной поток. Это всё означает, что вы можете поместить в Web Worker-ы только "чистые функции", но вам всё равно придётся вычислять огромную часть данных в основном потоке. Поэтому очень полезно разрабатывать систему так, чтобы в ней было как можно больше чистых функций - так их будет проще делегировать  последствии.</p>
+<p>И хотя вы можете использовать <a href="/en-US/docs/DOM/Using_web_workers" title="/en-US/docs/DOM/Using_web_workers">Web workers</a>, чтобы обработать очень большие и "тяжёлые" скрипты асинхронно, вы должны учитывать некоторые ограничения. Web Worker-ы не имеют доступа к некоторым API браузера: DOM, <a href="/en-US/docs/WebGL" title="/en-US/docs/WebGL">WebGL</a> или audio, они не могут посылать синхронные сообщения в основной поток, вы даже не можете проксировать некоторые из этих API в основной поток. Это всё означает, что вы можете поместить в Web Worker-ы только "чистые функции", но вам всё равно придётся вычислять огромную часть данных в основном потоке. Поэтому очень полезно разрабатывать систему так, чтобы в ней было как можно больше чистых функций - так их будет проще делегировать в последствии.</p>
 
 <p>Тем не менее, даже код в основном потоке можно сделать асинхронным, приложив лишь небольшие усилия.</p>
 
diff --git a/files/ru/web/svg/attribute/shape-rendering/index.html b/files/ru/web/svg/attribute/shape-rendering/index.html
index 5ec7870c81..61a64c3bac 100644
--- a/files/ru/web/svg/attribute/shape-rendering/index.html
+++ b/files/ru/web/svg/attribute/shape-rendering/index.html
@@ -5,7 +5,7 @@ translation_of: Web/SVG/Attribute/shape-rendering
 ---
 <p>« <a href="/ru/docs/Web/SVG/Attribute" title="/ru/docs/Web/SVG/Attribute">Справочник SVG атрибутов</a></p>
 
-<p>При создание SVG есть возможность указать браузеру о том, как рекомендуется рендерить (отрисовывать) элементы {{ SVGElement("path") }} или базовые фигуры. <code>shape-rendering</code> предоставляет возможность указывать данные рекомендации.</p>
+<p>При создании SVG есть возможность указать браузеру, как рекомендуется рендерить (отрисовывать) элементы {{ SVGElement("path") }} или базовые фигуры. <code>shape-rendering</code> предоставляет возможность указывать данные рекомендации.</p>
 
 <h2 id="Контекст_использования">Контекст использования</h2>
 
diff --git a/files/zh-cn/_redirects.txt b/files/zh-cn/_redirects.txt
index 83915af3b0..ff820f35f0 100644
--- a/files/zh-cn/_redirects.txt
+++ b/files/zh-cn/_redirects.txt
@@ -412,7 +412,7 @@
 /zh-CN/docs/DOM/event.defaultPrevented	/zh-CN/docs/Web/API/Event/defaultPrevented
 /zh-CN/docs/DOM/event.isChar	/zh-CN/docs/Web/API/UIEvent/isChar
 /zh-CN/docs/DOM/event.isTrusted	/zh-CN/docs/Web/API/Event/isTrusted
-/zh-CN/docs/DOM/event.pageY	/zh-CN/docs/Web/API/UIEvent/pageY
+/zh-CN/docs/DOM/event.pageY	/zh-CN/docs/conflicting/Web/API/MouseEvent/pageY
 /zh-CN/docs/DOM/event.preventDefault	/zh-CN/docs/Web/API/Event/preventDefault
 /zh-CN/docs/DOM/event.stopImmediatePropagation	/zh-CN/docs/Web/API/Event/stopImmediatePropagation
 /zh-CN/docs/DOM/event.stopPropagation	/zh-CN/docs/Web/API/Event/stopPropagation
@@ -432,11 +432,11 @@
 /zh-CN/docs/DOM/window.URL.revokeObjectURL	/zh-CN/docs/Web/API/URL/revokeObjectURL
 /zh-CN/docs/DOM/window.alert	/zh-CN/docs/Web/API/Window/alert
 /zh-CN/docs/DOM/window.applicationCache	/zh-CN/docs/Web/API/Window/applicationCache
-/zh-CN/docs/DOM/window.atob	/zh-CN/docs/Web/API/WindowOrWorkerGlobalScope/atob
-/zh-CN/docs/DOM/window.btoa	/zh-CN/docs/Web/API/WindowOrWorkerGlobalScope/btoa
+/zh-CN/docs/DOM/window.atob	/zh-CN/docs/Web/API/atob
+/zh-CN/docs/DOM/window.btoa	/zh-CN/docs/Web/API/btoa
 /zh-CN/docs/DOM/window.cancelAnimationFrame	/zh-CN/docs/Web/API/Window/cancelAnimationFrame
 /zh-CN/docs/DOM/window.clearImmediate	/zh-CN/docs/Web/API/Window/clearImmediate
-/zh-CN/docs/DOM/window.clearInterval	/zh-CN/docs/Web/API/WindowOrWorkerGlobalScope/clearInterval
+/zh-CN/docs/DOM/window.clearInterval	/zh-CN/docs/Web/API/clearInterval
 /zh-CN/docs/DOM/window.close	/zh-CN/docs/Web/API/Window/close
 /zh-CN/docs/DOM/window.content	/zh-CN/docs/Web/API/Window/content
 /zh-CN/docs/DOM/window.document	/zh-CN/docs/Web/API/Window/document
@@ -475,9 +475,9 @@
 /zh-CN/docs/DOM/window.requestAnimationFrame	/zh-CN/docs/Web/API/Window/requestAnimationFrame
 /zh-CN/docs/DOM/window.scrollByPages	/zh-CN/docs/Web/API/Window/scrollByPages
 /zh-CN/docs/DOM/window.setImmediate	/zh-CN/docs/Web/API/Window/setImmediate
-/zh-CN/docs/DOM/window.setInterval	/zh-CN/docs/Web/API/WindowOrWorkerGlobalScope/setInterval
-/zh-CN/docs/DOM/window.setTimeout	/zh-CN/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout
-/zh-CN/docs/DOM/window.setTimeout12	/zh-CN/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout
+/zh-CN/docs/DOM/window.setInterval	/zh-CN/docs/Web/API/setInterval
+/zh-CN/docs/DOM/window.setTimeout	/zh-CN/docs/Web/API/setTimeout
+/zh-CN/docs/DOM/window.setTimeout12	/zh-CN/docs/Web/API/setTimeout
 /zh-CN/docs/DOM/文件系统API的基本概念	/zh-CN/docs/Web/API/File_and_Directory_Entries_API/Introduction
 /zh-CN/docs/DOM:HTMLDocument	/zh-CN/docs/Web/API/HTMLDocument
 /zh-CN/docs/DOM:XMLDocument	/zh-CN/docs/Web/API/XMLDocument
@@ -1309,7 +1309,7 @@
 /zh-CN/docs/Web/API/Element/removeAttributre	/zh-CN/docs/Web/API/Element/removeAttribute
 /zh-CN/docs/Web/API/Event/CustomEvent	/zh-CN/docs/Web/API/CustomEvent
 /zh-CN/docs/Web/API/Event/isChar	/zh-CN/docs/Web/API/UIEvent/isChar
-/zh-CN/docs/Web/API/Event/pageY	/zh-CN/docs/Web/API/UIEvent/pageY
+/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/EventTarget.dispatchEvent	/zh-CN/docs/Web/API/EventTarget/dispatchEvent
 /zh-CN/docs/Web/API/EventTarget.removeEventListener	/zh-CN/docs/Web/API/EventTarget/removeEventListener
@@ -1349,7 +1349,7 @@
 /zh-CN/docs/Web/API/GlobalEventHandlers/动画效果	/zh-CN/docs/Web/API/GlobalEventHandlers/onanimationend
 /zh-CN/docs/Web/API/GlobalEventHandlers/时长改变	/zh-CN/docs/Web/API/GlobalEventHandlers/ondurationchange
 /zh-CN/docs/Web/API/GlobalFetch	/zh-CN/docs/Web/API/WindowOrWorkerGlobalScope
-/zh-CN/docs/Web/API/GlobalFetch/fetch	/zh-CN/docs/Web/API/WindowOrWorkerGlobalScope/fetch
+/zh-CN/docs/Web/API/GlobalFetch/fetch	/zh-CN/docs/Web/API/fetch
 /zh-CN/docs/Web/API/HTMLAnchorElement/referrer	/zh-CN/docs/Web/API/HTMLAnchorElement/referrerPolicy
 /zh-CN/docs/Web/API/HTMLCanvasElement/捕获流	/zh-CN/docs/Web/API/HTMLCanvasElement/captureStream
 /zh-CN/docs/Web/API/HTMLElement.click	/zh-CN/docs/Web/API/HTMLElement/click
@@ -1374,9 +1374,11 @@
 /zh-CN/docs/Web/API/HTMLHyperlinkElementUtils/toString	/zh-CN/docs/Web/API/HTMLAnchorElement/toString
 /zh-CN/docs/Web/API/HTMLHyperlinkElementUtils/username	/zh-CN/docs/Web/API/HTMLAnchorElement/username
 /zh-CN/docs/Web/API/HTMLTableElement.deleteTHead	/zh-CN/docs/Web/API/HTMLTableElement/deleteTHead
+/zh-CN/docs/Web/API/Headers/getAll	/zh-CN/docs/conflicting/Web/API/Headers/get
 /zh-CN/docs/Web/API/IDBCursor.direction	/zh-CN/docs/Web/API/IDBCursor/direction
 /zh-CN/docs/Web/API/IDBFactory.open	/zh-CN/docs/Web/API/IDBFactory/open
 /zh-CN/docs/Web/API/IDBObjectStore.openCursor	/zh-CN/docs/Web/API/IDBObjectStore/openCursor
+/zh-CN/docs/Web/API/Index	/zh-CN/docs/conflicting/Web/API
 /zh-CN/docs/Web/API/IndexedDB_API/IDBObjectStore	/zh-CN/docs/Web/API/IDBObjectStore
 /zh-CN/docs/Web/API/Intersection_Observer_API/点观察者API的时序元素可见性	/zh-CN/docs/Web/API/Intersection_Observer_API/Timing_element_visibility
 /zh-CN/docs/Web/API/Location.replace	/zh-CN/docs/Web/API/Location/replace
@@ -1474,6 +1476,8 @@
 /zh-CN/docs/Web/API/Touch.screenX	/zh-CN/docs/Web/API/Touch/screenX
 /zh-CN/docs/Web/API/Touch.screenY	/zh-CN/docs/Web/API/Touch/screenY
 /zh-CN/docs/Web/API/TouchEvent.changedTouches	/zh-CN/docs/Web/API/TouchEvent/changedTouches
+/zh-CN/docs/Web/API/UIEvent/pageX	/zh-CN/docs/conflicting/Web/API/MouseEvent/pageX
+/zh-CN/docs/Web/API/UIEvent/pageY	/zh-CN/docs/conflicting/Web/API/MouseEvent/pageY
 /zh-CN/docs/Web/API/UIEvent/视图	/zh-CN/docs/Web/API/UIEvent/view
 /zh-CN/docs/Web/API/URL.URL	/zh-CN/docs/Web/API/URL/URL
 /zh-CN/docs/Web/API/URL.createObjectURL	/zh-CN/docs/Web/API/URL/createObjectURL
@@ -1496,11 +1500,11 @@
 /zh-CN/docs/Web/API/Web_Audio_API/最佳实践	/zh-CN/docs/Web/API/Web_Audio_API/Best_practices
 /zh-CN/docs/Web/API/Window.alert	/zh-CN/docs/Web/API/Window/alert
 /zh-CN/docs/Web/API/Window.applicationCache	/zh-CN/docs/Web/API/Window/applicationCache
-/zh-CN/docs/Web/API/Window.atob	/zh-CN/docs/Web/API/WindowOrWorkerGlobalScope/atob
-/zh-CN/docs/Web/API/Window.btoa	/zh-CN/docs/Web/API/WindowOrWorkerGlobalScope/btoa
+/zh-CN/docs/Web/API/Window.atob	/zh-CN/docs/Web/API/atob
+/zh-CN/docs/Web/API/Window.btoa	/zh-CN/docs/Web/API/btoa
 /zh-CN/docs/Web/API/Window.cancelAnimationFrame	/zh-CN/docs/Web/API/Window/cancelAnimationFrame
 /zh-CN/docs/Web/API/Window.clearImmediate	/zh-CN/docs/Web/API/Window/clearImmediate
-/zh-CN/docs/Web/API/Window.clearInterval	/zh-CN/docs/Web/API/WindowOrWorkerGlobalScope/clearInterval
+/zh-CN/docs/Web/API/Window.clearInterval	/zh-CN/docs/Web/API/clearInterval
 /zh-CN/docs/Web/API/Window.close	/zh-CN/docs/Web/API/Window/close
 /zh-CN/docs/Web/API/Window.document	/zh-CN/docs/Web/API/Window/document
 /zh-CN/docs/Web/API/Window.find	/zh-CN/docs/Web/API/Window/find
@@ -1541,27 +1545,41 @@
 /zh-CN/docs/Web/API/Window.scrollY	/zh-CN/docs/Web/API/Window/scrollY
 /zh-CN/docs/Web/API/Window.self	/zh-CN/docs/Web/API/Window/self
 /zh-CN/docs/Web/API/Window.setImmediate	/zh-CN/docs/Web/API/Window/setImmediate
-/zh-CN/docs/Web/API/Window.setInterval	/zh-CN/docs/Web/API/WindowOrWorkerGlobalScope/setInterval
+/zh-CN/docs/Web/API/Window.setInterval	/zh-CN/docs/Web/API/setInterval
 /zh-CN/docs/Web/API/Window.showModalDialog	/zh-CN/docs/Web/API/Window/showModalDialog
 /zh-CN/docs/Web/API/Window.top	/zh-CN/docs/Web/API/Window/top
 /zh-CN/docs/Web/API/Window/Window.blur()	/zh-CN/docs/Web/API/Window/blur
-/zh-CN/docs/Web/API/Window/atob	/zh-CN/docs/Web/API/WindowOrWorkerGlobalScope/atob
-/zh-CN/docs/Web/API/Window/btoa	/zh-CN/docs/Web/API/WindowOrWorkerGlobalScope/btoa
-/zh-CN/docs/Web/API/Window/caches	/zh-CN/docs/Web/API/WindowOrWorkerGlobalScope/caches
-/zh-CN/docs/Web/API/Window/clearInterval	/zh-CN/docs/Web/API/WindowOrWorkerGlobalScope/clearInterval
+/zh-CN/docs/Web/API/Window/atob	/zh-CN/docs/Web/API/atob
+/zh-CN/docs/Web/API/Window/btoa	/zh-CN/docs/Web/API/btoa
+/zh-CN/docs/Web/API/Window/caches	/zh-CN/docs/Web/API/caches
+/zh-CN/docs/Web/API/Window/clearInterval	/zh-CN/docs/Web/API/clearInterval
 /zh-CN/docs/Web/API/Window/onbeforeunload	/zh-CN/docs/Web/API/WindowEventHandlers/onbeforeunload
 /zh-CN/docs/Web/API/Window/onhashchange	/zh-CN/docs/Web/API/WindowEventHandlers/onhashchange
 /zh-CN/docs/Web/API/Window/onpopstate	/zh-CN/docs/Web/API/WindowEventHandlers/onpopstate
 /zh-CN/docs/Web/API/Window/onresize	/zh-CN/docs/Web/API/GlobalEventHandlers/onresize
 /zh-CN/docs/Web/API/Window/onunload	/zh-CN/docs/Web/API/WindowEventHandlers/onunload
-/zh-CN/docs/Web/API/Window/setInterval	/zh-CN/docs/Web/API/WindowOrWorkerGlobalScope/setInterval
-/zh-CN/docs/Web/API/Window/setTimeout	/zh-CN/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout
+/zh-CN/docs/Web/API/Window/setInterval	/zh-CN/docs/Web/API/setInterval
+/zh-CN/docs/Web/API/Window/setTimeout	/zh-CN/docs/Web/API/setTimeout
 /zh-CN/docs/Web/API/WindowBase64	/zh-CN/docs/Web/API/WindowOrWorkerGlobalScope#方法
 /zh-CN/docs/Web/API/WindowBase64/Base64_encoding_and_decoding	/zh-CN/docs/Glossary/Base64
-/zh-CN/docs/Web/API/WindowBase64/atob	/zh-CN/docs/Web/API/WindowOrWorkerGlobalScope/atob
-/zh-CN/docs/Web/API/WindowBase64/btoa	/zh-CN/docs/Web/API/WindowOrWorkerGlobalScope/btoa
+/zh-CN/docs/Web/API/WindowBase64/atob	/zh-CN/docs/Web/API/atob
+/zh-CN/docs/Web/API/WindowBase64/btoa	/zh-CN/docs/Web/API/btoa
+/zh-CN/docs/Web/API/WindowOrWorkerGlobalScope/atob	/zh-CN/docs/Web/API/atob
+/zh-CN/docs/Web/API/WindowOrWorkerGlobalScope/btoa	/zh-CN/docs/Web/API/btoa
+/zh-CN/docs/Web/API/WindowOrWorkerGlobalScope/caches	/zh-CN/docs/Web/API/caches
+/zh-CN/docs/Web/API/WindowOrWorkerGlobalScope/clearInterval	/zh-CN/docs/Web/API/clearInterval
+/zh-CN/docs/Web/API/WindowOrWorkerGlobalScope/clearTimeout	/zh-CN/docs/Web/API/clearTimeout
+/zh-CN/docs/Web/API/WindowOrWorkerGlobalScope/createImageBitmap	/zh-CN/docs/Web/API/createImageBitmap
+/zh-CN/docs/Web/API/WindowOrWorkerGlobalScope/crossOriginIsolated	/zh-CN/docs/Web/API/crossOriginIsolated
+/zh-CN/docs/Web/API/WindowOrWorkerGlobalScope/fetch	/zh-CN/docs/Web/API/fetch
+/zh-CN/docs/Web/API/WindowOrWorkerGlobalScope/indexedDB	/zh-CN/docs/Web/API/indexedDB
+/zh-CN/docs/Web/API/WindowOrWorkerGlobalScope/isSecureContext	/zh-CN/docs/Web/API/isSecureContext
+/zh-CN/docs/Web/API/WindowOrWorkerGlobalScope/origin	/zh-CN/docs/Web/API/origin
+/zh-CN/docs/Web/API/WindowOrWorkerGlobalScope/queueMicrotask	/zh-CN/docs/Web/API/queueMicrotask
+/zh-CN/docs/Web/API/WindowOrWorkerGlobalScope/setInterval	/zh-CN/docs/Web/API/setInterval
+/zh-CN/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout	/zh-CN/docs/Web/API/setTimeout
 /zh-CN/docs/Web/API/WindowTimers	/zh-CN/docs/Web/API/WindowOrWorkerGlobalScope
-/zh-CN/docs/Web/API/WindowTimers/clearTimeout	/zh-CN/docs/Web/API/WindowOrWorkerGlobalScope/clearTimeout
+/zh-CN/docs/Web/API/WindowTimers/clearTimeout	/zh-CN/docs/Web/API/clearTimeout
 /zh-CN/docs/Web/API/XMLDocument.load	/zh-CN/docs/Web/API/XMLDocument/load
 /zh-CN/docs/Web/API/XMLHttpRequest/FormData	/zh-CN/docs/Web/API/FormData
 /zh-CN/docs/Web/API/console.dir	/zh-CN/docs/Web/API/Console/dir
@@ -1627,7 +1645,7 @@
 /zh-CN/docs/Web/API/event.defaultPrevented	/zh-CN/docs/Web/API/Event/defaultPrevented
 /zh-CN/docs/Web/API/event.isChar	/zh-CN/docs/Web/API/UIEvent/isChar
 /zh-CN/docs/Web/API/event.isTrusted	/zh-CN/docs/Web/API/Event/isTrusted
-/zh-CN/docs/Web/API/event.pageY	/zh-CN/docs/Web/API/UIEvent/pageY
+/zh-CN/docs/Web/API/event.pageY	/zh-CN/docs/conflicting/Web/API/MouseEvent/pageY
 /zh-CN/docs/Web/API/event.preventDefault	/zh-CN/docs/Web/API/Event/preventDefault
 /zh-CN/docs/Web/API/event.stopImmediatePropagation	/zh-CN/docs/Web/API/Event/stopImmediatePropagation
 /zh-CN/docs/Web/API/event.stopPropagation	/zh-CN/docs/Web/API/Event/stopPropagation
@@ -1641,7 +1659,7 @@
 /zh-CN/docs/Web/API/window.requestAnimationFrame	/zh-CN/docs/Web/API/Window/requestAnimationFrame
 /zh-CN/docs/Web/API/剪贴板_API	/zh-CN/docs/Web/API/Clipboard_API
 /zh-CN/docs/Web/API/开发式平台	/zh-CN/docs/Web/API/Push_API
-/zh-CN/docs/Web/API/指数	/zh-CN/docs/Web/API/Index
+/zh-CN/docs/Web/API/指数	/zh-CN/docs/conflicting/Web/API
 /zh-CN/docs/Web/API/支付_请求_接口	/zh-CN/docs/Web/API/Payment_Request_API
 /zh-CN/docs/Web/API/支付_请求_接口/Concepts	/zh-CN/docs/Web/API/Payment_Request_API/Concepts
 /zh-CN/docs/Web/API/消息事件	/zh-CN/docs/Web/API/MessageEvent
@@ -1669,9 +1687,12 @@
 /zh-CN/docs/Web/CSS/Block_formatting_context	/zh-CN/docs/Web/Guide/CSS/Block_formatting_context
 /zh-CN/docs/Web/CSS/CSS3中的关键帧	/zh-CN/docs/Web/CSS/@keyframes
 /zh-CN/docs/Web/CSS/CSSOM_View/坐标系	/zh-CN/docs/Web/CSS/CSSOM_View/Coordinate_systems
-/zh-CN/docs/Web/CSS/CSS_Background_and_Borders/圆角边框发生器	/zh-CN/docs/Web/CSS/CSS_Background_and_Borders/Border-radius_generator
+/zh-CN/docs/Web/CSS/CSS_Background_and_Borders/Border-image_generator	/zh-CN/docs/Web/CSS/CSS_Backgrounds_and_Borders/Border-image_generator
+/zh-CN/docs/Web/CSS/CSS_Background_and_Borders/Border-radius_generator	/zh-CN/docs/Web/CSS/CSS_Backgrounds_and_Borders/Border-radius_generator
+/zh-CN/docs/Web/CSS/CSS_Background_and_Borders/Box-shadow_generator	/zh-CN/docs/Web/CSS/CSS_Backgrounds_and_Borders/Box-shadow_generator
+/zh-CN/docs/Web/CSS/CSS_Background_and_Borders/圆角边框发生器	/zh-CN/docs/Web/CSS/CSS_Backgrounds_and_Borders/Border-radius_generator
 /zh-CN/docs/Web/CSS/CSS_Backgrounds_and_Borders/Scaling_background_images	/zh-CN/docs/Web/CSS/CSS_Backgrounds_and_Borders/Resizing_background_images
-/zh-CN/docs/Web/CSS/CSS_Box_Model/Box-shadow_generator	/zh-CN/docs/Web/CSS/CSS_Background_and_Borders/Box-shadow_generator
+/zh-CN/docs/Web/CSS/CSS_Box_Model/Box-shadow_generator	/zh-CN/docs/Web/CSS/CSS_Backgrounds_and_Borders/Box-shadow_generator
 /zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Flexbox_的_向下_支持	/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Backwards_Compatibility_of_Flexbox
 /zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/典型_用例_的_Flexbox	/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox
 /zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/弹性盒子与其他布局方法的联系	/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Relationship_of_Flexbox_to_Other_Layout_Methods
@@ -1693,6 +1714,7 @@
 /zh-CN/docs/Web/CSS/Reference/Webkit_Extensions	/zh-CN/docs/Web/CSS/WebKit_Extensions
 /zh-CN/docs/Web/CSS/Reference/background-blend-mode	/zh-CN/docs/Web/CSS/background-blend-mode
 /zh-CN/docs/Web/CSS/Reference/mix-blend-mode	/zh-CN/docs/Web/CSS/mix-blend-mode
+/zh-CN/docs/Web/CSS/Tools	/zh-CN/docs/conflicting/Web/CSS
 /zh-CN/docs/Web/CSS/Tutorials/Using_CSS_transforms	/zh-CN/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms
 /zh-CN/docs/Web/CSS/Understanding_z-index	/zh-CN/docs/Web/CSS/CSS_Positioning/Understanding_z_index
 /zh-CN/docs/Web/CSS/Understanding_z-index/Adding_z-index	/zh-CN/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Adding_z-index
@@ -1754,6 +1776,7 @@
 /zh-CN/docs/Web/CSS/文本装饰线厚度(粗细)	/zh-CN/docs/Web/CSS/text-decoration-thickness
 /zh-CN/docs/Web/CSS/混合模式	/zh-CN/docs/Web/CSS/blend-mode
 /zh-CN/docs/Web/CSS/网格-模板-列	/zh-CN/docs/Web/CSS/grid-template-rows
+/zh-CN/docs/Web/Demos_of_open_web_technologies	/zh-CN/docs/Web/Demos
 /zh-CN/docs/Web/Events/Activate	/zh-CN/docs/Web/API/Element/DOMActivate_event
 /zh-CN/docs/Web/Events/DOMContentLoaded	/zh-CN/docs/Web/API/Window/DOMContentLoaded_event
 /zh-CN/docs/Web/Events/DOMContentLoaded_(event)	/zh-CN/docs/Web/API/Window/DOMContentLoaded_event
@@ -1967,6 +1990,7 @@
 /zh-CN/docs/Web/HTTP/策略特征/Using_Feature_Policy	/zh-CN/docs/Web/HTTP/Feature_Policy/Using_Feature_Policy
 /zh-CN/docs/Web/HTTP/缓存_FAQ	/zh-CN/docs/Web/HTTP/Caching
 /zh-CN/docs/Web/HTTP/重定向	/zh-CN/docs/Web/HTTP/Redirections
+/zh-CN/docs/Web/Houdini	/zh-CN/docs/Web/Guide/Houdini
 /zh-CN/docs/Web/JavaScript/Equality_comparisons_and_when_to_use_them	/zh-CN/docs/Web/JavaScript/Equality_comparisons_and_sameness
 /zh-CN/docs/Web/JavaScript/Guide/Closures	/zh-CN/docs/Web/JavaScript/Closures
 /zh-CN/docs/Web/JavaScript/Guide/Equality_comparisons_and_when_to_use_them	/zh-CN/docs/Web/JavaScript/Equality_comparisons_and_sameness
@@ -2164,7 +2188,7 @@
 /zh-CN/docs/Web/媒体	/zh-CN/docs/Web/Media
 /zh-CN/docs/Web/媒体/Autoplay_guide	/zh-CN/docs/Web/Media/Autoplay_guide
 /zh-CN/docs/Web/性能	/zh-CN/docs/Web/Performance
-/zh-CN/docs/Web/演示说明	/zh-CN/docs/Web/Demos_of_open_web_technologies
+/zh-CN/docs/Web/演示说明	/zh-CN/docs/Web/Demos
 /zh-CN/docs/WebAPI/Using_geolocation	/zh-CN/docs/Web/API/Geolocation_API
 /zh-CN/docs/WebAssembly/概念	/zh-CN/docs/WebAssembly/Concepts
 /zh-CN/docs/WebGL	/zh-CN/docs/Web/API/WebGL_API
diff --git a/files/zh-cn/_wikihistory.json b/files/zh-cn/_wikihistory.json
index 091b99d93b..ea8dba13d9 100644
--- a/files/zh-cn/_wikihistory.json
+++ b/files/zh-cn/_wikihistory.json
@@ -15885,12 +15885,6 @@
       "Taoja"
     ]
   },
-  "Web/API/Headers/getAll": {
-    "modified": "2019-03-23T22:15:47.321Z",
-    "contributors": [
-      "Taoja"
-    ]
-  },
   "Web/API/Headers/has": {
     "modified": "2019-03-18T21:43:54.084Z",
     "contributors": [
@@ -16296,13 +16290,6 @@
       "ice-i-snow"
     ]
   },
-  "Web/API/Index": {
-    "modified": "2020-09-07T03:42:22.980Z",
-    "contributors": [
-      "SphinxKnight",
-      "hl7514576"
-    ]
-  },
   "Web/API/IndexedDB_API": {
     "modified": "2020-08-17T03:58:13.141Z",
     "contributors": [
@@ -20828,20 +20815,6 @@
       "jsx"
     ]
   },
-  "Web/API/UIEvent/pageX": {
-    "modified": "2019-03-23T22:51:51.935Z",
-    "contributors": [
-      "Tienyz"
-    ]
-  },
-  "Web/API/UIEvent/pageY": {
-    "modified": "2019-03-24T00:16:10.292Z",
-    "contributors": [
-      "ziyunfei",
-      "teoli",
-      "khalid32"
-    ]
-  },
   "Web/API/UIEvent/view": {
     "modified": "2020-10-15T22:25:09.871Z",
     "contributors": [
@@ -24014,174 +23987,6 @@
       "chrisdavidmills"
     ]
   },
-  "Web/API/WindowOrWorkerGlobalScope/atob": {
-    "modified": "2020-10-15T21:07:00.713Z",
-    "contributors": [
-      "RainSlide",
-      "zhangchen",
-      "nkliyc",
-      "dingyanhe",
-      "xgqfrms-GitHub",
-      "ziyunfei",
-      "happyWang",
-      "teoli",
-      "khalid32"
-    ]
-  },
-  "Web/API/WindowOrWorkerGlobalScope/btoa": {
-    "modified": "2020-10-15T21:06:58.236Z",
-    "contributors": [
-      "RainSlide",
-      "zhangchen",
-      "RoXoM",
-      "Carrotzpc",
-      "dingyanhe",
-      "xgqfrms-GitHub",
-      "ziyunfei",
-      "teoli",
-      "khalid32",
-      "cuixiping"
-    ]
-  },
-  "Web/API/WindowOrWorkerGlobalScope/caches": {
-    "modified": "2019-09-21T03:33:16.440Z",
-    "contributors": [
-      "JarvanMo"
-    ]
-  },
-  "Web/API/WindowOrWorkerGlobalScope/clearInterval": {
-    "modified": "2020-10-15T21:21:33.193Z",
-    "contributors": [
-      "RainCruise",
-      "RainSlide",
-      "luojia",
-      "teoli",
-      "khalid32",
-      "ziyunfei"
-    ]
-  },
-  "Web/API/WindowOrWorkerGlobalScope/clearTimeout": {
-    "modified": "2020-06-09T04:49:33.480Z",
-    "contributors": [
-      "Humilitas",
-      "zhangchen",
-      "luojia",
-      "paddingme"
-    ]
-  },
-  "Web/API/WindowOrWorkerGlobalScope/createImageBitmap": {
-    "modified": "2019-03-18T20:44:01.174Z",
-    "contributors": [
-      "fanerge",
-      "varcat"
-    ]
-  },
-  "Web/API/WindowOrWorkerGlobalScope/crossOriginIsolated": {
-    "modified": "2020-10-15T22:26:03.129Z",
-    "contributors": [
-      "Fulgrim"
-    ]
-  },
-  "Web/API/WindowOrWorkerGlobalScope/fetch": {
-    "modified": "2020-10-15T21:38:47.827Z",
-    "contributors": [
-      "hughfenghen",
-      "jingkaimori",
-      "c1er",
-      "ldc-37",
-      "Rhys_211",
-      "zhangchen",
-      "fscholz",
-      "TiaossuP",
-      "Yanzengyong",
-      "wxs77577",
-      "Ende93",
-      "xuzhijun",
-      "ziyunfei",
-      "camsong",
-      "fuchao2012"
-    ]
-  },
-  "Web/API/WindowOrWorkerGlobalScope/indexedDB": {
-    "modified": "2019-09-21T03:34:03.050Z",
-    "contributors": [
-      "FEhaoxinjie"
-    ]
-  },
-  "Web/API/WindowOrWorkerGlobalScope/isSecureContext": {
-    "modified": "2019-09-21T03:37:23.951Z",
-    "contributors": [
-      "Awe"
-    ]
-  },
-  "Web/API/WindowOrWorkerGlobalScope/origin": {
-    "modified": "2019-03-23T22:03:28.077Z",
-    "contributors": [
-      "xgqfrms-GitHub"
-    ]
-  },
-  "Web/API/WindowOrWorkerGlobalScope/queueMicrotask": {
-    "modified": "2020-10-15T22:23:11.878Z",
-    "contributors": [
-      "RainSlide"
-    ]
-  },
-  "Web/API/WindowOrWorkerGlobalScope/setInterval": {
-    "modified": "2020-11-25T18:16:55.949Z",
-    "contributors": [
-      "RayTang-hub",
-      "cellinlab",
-      "Jiangmenghao",
-      "TXYjing",
-      "Soul",
-      "fengbin",
-      "RainSlide",
-      "brandonhyc",
-      "xgqfrms-GitHub",
-      "shery",
-      "xgqfrms",
-      "teoli",
-      "khalid32",
-      "ziyunfei",
-      "sonicview"
-    ]
-  },
-  "Web/API/WindowOrWorkerGlobalScope/setTimeout": {
-    "modified": "2020-10-15T21:19:52.746Z",
-    "contributors": [
-      "SnowGojira",
-      "iyow",
-      "johnao",
-      "chrisdavidmills",
-      "csga31971",
-      "baijingfeng",
-      "Reci-z",
-      "horrylala",
-      "Adashuai5",
-      "LilyWakana",
-      "Mars687",
-      "pinpinye",
-      "Lby876176278",
-      "Chancefeng",
-      "fscholz",
-      "xiazhe",
-      "Frorice",
-      "yhtml5",
-      "righttoe",
-      "Toxni",
-      "piemonSong",
-      "xgqfrms-GitHub",
-      "heke2929",
-      "SnowOnion",
-      "Chimen",
-      "hbkdsm",
-      "paddingme",
-      "teoli",
-      "khalid32",
-      "Meteormatt",
-      "ziyunfei"
-    ]
-  },
   "Web/API/Worker": {
     "modified": "2020-10-15T21:22:11.206Z",
     "contributors": [
@@ -24713,6 +24518,74 @@
       "Sebastianz"
     ]
   },
+  "Web/API/atob": {
+    "modified": "2020-10-15T21:07:00.713Z",
+    "contributors": [
+      "RainSlide",
+      "zhangchen",
+      "nkliyc",
+      "dingyanhe",
+      "xgqfrms-GitHub",
+      "ziyunfei",
+      "happyWang",
+      "teoli",
+      "khalid32"
+    ]
+  },
+  "Web/API/btoa": {
+    "modified": "2020-10-15T21:06:58.236Z",
+    "contributors": [
+      "RainSlide",
+      "zhangchen",
+      "RoXoM",
+      "Carrotzpc",
+      "dingyanhe",
+      "xgqfrms-GitHub",
+      "ziyunfei",
+      "teoli",
+      "khalid32",
+      "cuixiping"
+    ]
+  },
+  "Web/API/caches": {
+    "modified": "2019-09-21T03:33:16.440Z",
+    "contributors": [
+      "JarvanMo"
+    ]
+  },
+  "Web/API/clearInterval": {
+    "modified": "2020-10-15T21:21:33.193Z",
+    "contributors": [
+      "RainCruise",
+      "RainSlide",
+      "luojia",
+      "teoli",
+      "khalid32",
+      "ziyunfei"
+    ]
+  },
+  "Web/API/clearTimeout": {
+    "modified": "2020-06-09T04:49:33.480Z",
+    "contributors": [
+      "Humilitas",
+      "zhangchen",
+      "luojia",
+      "paddingme"
+    ]
+  },
+  "Web/API/createImageBitmap": {
+    "modified": "2019-03-18T20:44:01.174Z",
+    "contributors": [
+      "fanerge",
+      "varcat"
+    ]
+  },
+  "Web/API/crossOriginIsolated": {
+    "modified": "2020-10-15T22:26:03.129Z",
+    "contributors": [
+      "Fulgrim"
+    ]
+  },
   "Web/API/element/scrollWidth": {
     "modified": "2019-12-11T06:18:59.921Z",
     "contributors": [
@@ -24727,6 +24600,38 @@
       "kuugua"
     ]
   },
+  "Web/API/fetch": {
+    "modified": "2020-10-15T21:38:47.827Z",
+    "contributors": [
+      "hughfenghen",
+      "jingkaimori",
+      "c1er",
+      "ldc-37",
+      "Rhys_211",
+      "zhangchen",
+      "fscholz",
+      "TiaossuP",
+      "Yanzengyong",
+      "wxs77577",
+      "Ende93",
+      "xuzhijun",
+      "ziyunfei",
+      "camsong",
+      "fuchao2012"
+    ]
+  },
+  "Web/API/indexedDB": {
+    "modified": "2019-09-21T03:34:03.050Z",
+    "contributors": [
+      "FEhaoxinjie"
+    ]
+  },
+  "Web/API/isSecureContext": {
+    "modified": "2019-09-21T03:37:23.951Z",
+    "contributors": [
+      "Awe"
+    ]
+  },
   "Web/API/notification": {
     "modified": "2020-09-28T00:03:47.900Z",
     "contributors": [
@@ -24850,6 +24755,74 @@
       "BSPR0002"
     ]
   },
+  "Web/API/origin": {
+    "modified": "2019-03-23T22:03:28.077Z",
+    "contributors": [
+      "xgqfrms-GitHub"
+    ]
+  },
+  "Web/API/queueMicrotask": {
+    "modified": "2020-10-15T22:23:11.878Z",
+    "contributors": [
+      "RainSlide"
+    ]
+  },
+  "Web/API/setInterval": {
+    "modified": "2020-11-25T18:16:55.949Z",
+    "contributors": [
+      "RayTang-hub",
+      "cellinlab",
+      "Jiangmenghao",
+      "TXYjing",
+      "Soul",
+      "fengbin",
+      "RainSlide",
+      "brandonhyc",
+      "xgqfrms-GitHub",
+      "shery",
+      "xgqfrms",
+      "teoli",
+      "khalid32",
+      "ziyunfei",
+      "sonicview"
+    ]
+  },
+  "Web/API/setTimeout": {
+    "modified": "2020-10-15T21:19:52.746Z",
+    "contributors": [
+      "SnowGojira",
+      "iyow",
+      "johnao",
+      "chrisdavidmills",
+      "csga31971",
+      "baijingfeng",
+      "Reci-z",
+      "horrylala",
+      "Adashuai5",
+      "LilyWakana",
+      "Mars687",
+      "pinpinye",
+      "Lby876176278",
+      "Chancefeng",
+      "fscholz",
+      "xiazhe",
+      "Frorice",
+      "yhtml5",
+      "righttoe",
+      "Toxni",
+      "piemonSong",
+      "xgqfrms-GitHub",
+      "heke2929",
+      "SnowOnion",
+      "Chimen",
+      "hbkdsm",
+      "paddingme",
+      "teoli",
+      "khalid32",
+      "Meteormatt",
+      "ziyunfei"
+    ]
+  },
   "Web/Accessibility": {
     "modified": "2020-08-04T10:11:09.882Z",
     "contributors": [
@@ -26111,14 +26084,22 @@
       "hutuxu"
     ]
   },
-  "Web/CSS/CSS_Background_and_Borders/Border-image_generator": {
+  "Web/CSS/CSS_Backgrounds_and_Borders": {
+    "modified": "2019-03-18T21:45:20.317Z",
+    "contributors": [
+      "PythonVsJava",
+      "RainSlide",
+      "Sheppy"
+    ]
+  },
+  "Web/CSS/CSS_Backgrounds_and_Borders/Border-image_generator": {
     "modified": "2019-03-18T21:15:13.389Z",
     "contributors": [
       "Ende93",
       "yellowstar1992"
     ]
   },
-  "Web/CSS/CSS_Background_and_Borders/Border-radius_generator": {
+  "Web/CSS/CSS_Backgrounds_and_Borders/Border-radius_generator": {
     "modified": "2019-03-23T22:42:48.406Z",
     "contributors": [
       "FrontENG",
@@ -26126,7 +26107,7 @@
       "regiondavid"
     ]
   },
-  "Web/CSS/CSS_Background_and_Borders/Box-shadow_generator": {
+  "Web/CSS/CSS_Backgrounds_and_Borders/Box-shadow_generator": {
     "modified": "2019-03-18T20:43:42.671Z",
     "contributors": [
       "BychekRU",
@@ -26134,14 +26115,6 @@
       "charlie"
     ]
   },
-  "Web/CSS/CSS_Backgrounds_and_Borders": {
-    "modified": "2019-03-18T21:45:20.317Z",
-    "contributors": [
-      "PythonVsJava",
-      "RainSlide",
-      "Sheppy"
-    ]
-  },
   "Web/CSS/CSS_Backgrounds_and_Borders/Resizing_background_images": {
     "modified": "2019-03-18T21:38:07.175Z",
     "contributors": [
@@ -27289,16 +27262,6 @@
       "yan"
     ]
   },
-  "Web/CSS/Tools": {
-    "modified": "2019-03-23T22:29:45.280Z",
-    "contributors": [
-      "runyul",
-      "pluwen",
-      "edwards1101",
-      "lucia007",
-      "lunix01"
-    ]
-  },
   "Web/CSS/Tutorials": {
     "modified": "2019-03-23T23:32:32.218Z",
     "contributors": [
@@ -30831,7 +30794,7 @@
       "TimZhao"
     ]
   },
-  "Web/Demos_of_open_web_technologies": {
+  "Web/Demos": {
     "modified": "2019-09-04T03:32:34.828Z",
     "contributors": [
       "RainSlide",
@@ -31077,6 +31040,16 @@
       "Teago"
     ]
   },
+  "Web/Guide/Houdini": {
+    "modified": "2020-11-21T05:08:58.458Z",
+    "contributors": [
+      "xusy",
+      "bingoYB",
+      "cutefcc",
+      "sunfeel",
+      "xgqfrms"
+    ]
+  },
   "Web/Guide/Introduction_to_Web_development": {
     "modified": "2019-03-24T00:00:33.366Z",
     "contributors": [
@@ -35163,16 +35136,6 @@
       "WayneCui"
     ]
   },
-  "Web/Houdini": {
-    "modified": "2020-11-21T05:08:58.458Z",
-    "contributors": [
-      "xusy",
-      "bingoYB",
-      "cutefcc",
-      "sunfeel",
-      "xgqfrms"
-    ]
-  },
   "Web/JavaScript": {
     "modified": "2020-09-21T00:46:20.876Z",
     "contributors": [
@@ -47010,11 +46973,10 @@
     ]
   },
   "conflicting/Web/API": {
-    "modified": "2019-03-23T23:09:29.332Z",
+    "modified": "2020-09-07T03:42:22.980Z",
     "contributors": [
-      "mySoul",
-      "teoli",
-      "AlexChao"
+      "SphinxKnight",
+      "hl7514576"
     ]
   },
   "conflicting/Web/API/Beacon_API": {
@@ -47253,6 +47215,12 @@
       "m2mbob"
     ]
   },
+  "conflicting/Web/API/Headers/get": {
+    "modified": "2019-03-23T22:15:47.321Z",
+    "contributors": [
+      "Taoja"
+    ]
+  },
   "conflicting/Web/API/MouseEvent/altKey": {
     "modified": "2019-03-24T00:16:10.184Z",
     "contributors": [
@@ -47269,6 +47237,20 @@
       "AshfaqHossain"
     ]
   },
+  "conflicting/Web/API/MouseEvent/pageX": {
+    "modified": "2019-03-23T22:51:51.935Z",
+    "contributors": [
+      "Tienyz"
+    ]
+  },
+  "conflicting/Web/API/MouseEvent/pageY": {
+    "modified": "2019-03-24T00:16:10.292Z",
+    "contributors": [
+      "ziyunfei",
+      "teoli",
+      "khalid32"
+    ]
+  },
   "conflicting/Web/API/MouseEvent/relatedTarget": {
     "modified": "2019-03-23T23:09:12.340Z",
     "contributors": [
@@ -47402,6 +47384,16 @@
       "qianzhangcheng"
     ]
   },
+  "conflicting/Web/CSS": {
+    "modified": "2019-03-23T22:29:45.280Z",
+    "contributors": [
+      "runyul",
+      "pluwen",
+      "edwards1101",
+      "lucia007",
+      "lunix01"
+    ]
+  },
   "conflicting/Web/CSS/::placeholder": {
     "modified": "2019-03-23T23:21:18.757Z",
     "contributors": [
diff --git a/files/zh-cn/conflicting/web/api/headers/get/index.html b/files/zh-cn/conflicting/web/api/headers/get/index.html
new file mode 100644
index 0000000000..c4b5464f68
--- /dev/null
+++ b/files/zh-cn/conflicting/web/api/headers/get/index.html
@@ -0,0 +1,135 @@
+---
+title: Headers.getAll()
+slug: conflicting/Web/API/Headers/get
+translation_of: Web/API/Headers/getAll
+original_slug: Web/API/Headers/getAll
+---
+<p>{{APIRef("Fetch")}}{{ SeeCompatTable() }}</p>
+
+<p><strong><code>getAll()</code></strong> 方法会以数组形式返回指定header的所有值. 如果指定的header未存在,则返回一个空数组.</p>
+
+<div class="note">
+<p><strong>Note:</strong>出于安全原因, 部分头信息只能被用户代理控制. 这些头信息包括 {{Glossary("Forbidden_header_name", "forbidden header names", 1)}}  和 {{Glossary("Forbidden_response_header_name", "forbidden response header names", 1)}}.</p>
+</div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush: js">myHeaders.getAll(name);</pre>
+
+<h3 id="Parameters">Parameters</h3>
+
+<dl>
+ <dt><em>name</em></dt>
+ <dd>需检索的HTTP header名称. 如果HTTP header中不存在指定名称<span style="line-height: 19.0909080505371px;">则抛出一个 </span><span style="line-height: 19.0909080505371px;">{{jsxref("TypeError")}}.</span></dd>
+</dl>
+
+<h3 id="Returns">Returns</h3>
+
+<p>An {{domxref("Array")}} containing a {{domxref("ByteString")}} sequence representing the values of the retrieved header.</p>
+
+<h2 id="Example">Example</h2>
+
+<p>Creating an empty <code>Headers</code> object is simple:</p>
+
+<pre class="brush: js">var myHeaders = new Headers(); // Currently empty</pre>
+
+<p>You could add a header to this using {{domxref("Headers.append")}}, then retrieve it using <code>getAll()</code>:</p>
+
+<pre class="brush: js">myHeaders.append('Content-Type', 'image/jpeg');
+myHeaders.getAll('Content-Type'); // Returns [ "image/jpeg" ]
+</pre>
+
+<p>If the header has multiple values associated with it, the array will contain all the values, in the order they were added to the Headers object:</p>
+
+<pre class="brush: js">myHeaders.append('Accept-Encoding', 'deflate');
+myHeaders.append('Accept-Encoding', 'gzip');
+myHeaders.getAll('Accept-Encoding'); // Returns [ "deflate", "gzip" ]</pre>
+
+<div class="note">
+<p><strong>Note</strong>: Use {{domxref("Headers.get")}} to return only the first value added to the <code>Headers</code> object.</p>
+</div>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Fetch','#dom-headers-getall','getAll()')}}</td>
+   <td>{{Spec2('Fetch')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatChrome(42) }}<br>
+    {{ CompatChrome(41) }} behind pref<br>
+     </td>
+   <td>{{ CompatGeckoDesktop(39)}}<br>
+    34 behind pref</td>
+   <td>{{ CompatNo }}</td>
+   <td>
+    <p>29<br>
+     28 behind pref</p>
+   </td>
+   <td>{{ CompatNo }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/Access_control_CORS">HTTP access control (CORS)</a></li>
+ <li><a href="/en-US/docs/Web/HTTP">HTTP</a></li>
+</ul>
diff --git a/files/zh-cn/conflicting/web/api/index.html b/files/zh-cn/conflicting/web/api/index.html
new file mode 100644
index 0000000000..70b70e7ec2
--- /dev/null
+++ b/files/zh-cn/conflicting/web/api/index.html
@@ -0,0 +1,7 @@
+---
+title: 指数
+slug: conflicting/Web/API
+translation_of: Web/API/Index
+original_slug: Web/API/Index
+---
+<p>{{Index("/zh-CN/docs/Web/API")}}</p>
diff --git a/files/zh-cn/conflicting/web/api/mouseevent/pagex/index.html b/files/zh-cn/conflicting/web/api/mouseevent/pagex/index.html
new file mode 100644
index 0000000000..7089c102a8
--- /dev/null
+++ b/files/zh-cn/conflicting/web/api/mouseevent/pagex/index.html
@@ -0,0 +1,106 @@
+---
+title: UIEvent.pageX
+slug: conflicting/Web/API/MouseEvent/pageX
+translation_of: Web/API/UIEvent/pageX
+original_slug: Web/API/UIEvent/pageX
+---
+<p>{{APIRef("DOM Events")}} {{Non-standard_header}}</p>
+
+<p><code><strong>UIEvent.pageX</strong></code> 是只读属性，它返回相对于整个文档的水平坐标。</p>
+
+<h2 id="Syntax" name="Syntax">语法</h2>
+
+<pre class="syntaxbox">var <em>pos</em> = <em>event</em>.pageX</pre>
+
+<h2 id="Syntax" name="Syntax">示例</h2>
+
+<pre><em>var pageX</em> = <em>event</em>.pageX;</pre>
+
+<p><code><em>pageX</em></code>  是鼠标事件触发时，鼠标指针相对于整个文档 X 坐标上像素点的整数值。这一属性同时也参照了页面的水平滚动距离。</p>
+
+<pre class="brush: js">&lt;html&gt;
+&lt;head&gt;
+&lt;title&gt;pageX\pageY &amp; layerX\layerY example&lt;/title&gt;
+
+&lt;script type="text/javascript"&gt;
+
+function showCoords(evt){
+  var form = document.forms.form_coords;
+  var parent_id = evt.target.parentNode.id;
+  form.parentId.value = parent_id;
+  form.pageXCoords.value = evt.pageX;
+  form.pageYCoords.value = evt.pageY;
+  form.layerXCoords.value = evt.layerX;
+  form.layerYCoords.value = evt.layerY;
+}
+
+&lt;/script&gt;
+
+&lt;style type="text/css"&gt;
+
+ #d1 {
+  border: solid blue 1px;
+  padding: 20px;
+ }
+
+ #d2 {
+  position: absolute;
+  top: 180px;
+  left: 80%;
+  right:auto;
+  width: 40%;
+  border: solid blue 1px;
+  padding: 20px;
+ }
+
+ #d3 {
+  position: absolute;
+  top: 240px;
+  left: 20%;
+  width: 50%;
+  border: solid blue 1px;
+  padding: 10px;
+ }
+
+&lt;/style&gt;
+&lt;/head&gt;
+
+&lt;body onmousedown="showCoords(event)"&gt;
+
+&lt;p&gt;To display the mouse coordinates please click anywhere on the page.&lt;/p&gt;
+
+&lt;div id="d1"&gt;
+&lt;span&gt;This is an un-positioned div so clicking it will return
+layerX/layerY values almost the same as pageX/PageY values.&lt;/span&gt;
+&lt;/div&gt;
+
+&lt;div id="d2"&gt;
+&lt;span&gt;This is a positioned div so clicking it will return layerX/layerY
+values that are relative to the top-left corner of this positioned
+element. Note the pageX\pageY properties still return the
+absolute position in the document, including page scrolling.&lt;/span&gt;
+
+&lt;span&gt;Make the page scroll more! This is a positioned div so clicking it
+will return layerX/layerY values that are relative to the top-left
+corner of this positioned element. Note the pageX\pageY properties still
+return the absolute position in the document, including page
+scrolling.&lt;/span&gt;
+&lt;/div&gt;
+
+&lt;div id="d3"&gt;
+&lt;form name="form_coords"&gt;
+ Parent Element id: &lt;input type="text" name="parentId" size="7" /&gt;&lt;br /&gt;
+ pageX:&lt;input type="text" name="pageXCoords" size="7" /&gt;
+ pageY:&lt;input type="text" name="pageYCoords" size="7" /&gt;&lt;br /&gt;
+ layerX:&lt;input type="text" name="layerXCoords" size="7" /&gt;
+ layerY:&lt;input type="text" name="layerYCoords" size="7" /&gt;
+&lt;/form&gt;
+&lt;/div&gt;
+
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h2 id="Specification" name="Specification">规范</h2>
+
+<p>这一属性不在规范中。</p>
diff --git a/files/zh-cn/conflicting/web/api/mouseevent/pagey/index.html b/files/zh-cn/conflicting/web/api/mouseevent/pagey/index.html
new file mode 100644
index 0000000000..f4c92daa4e
--- /dev/null
+++ b/files/zh-cn/conflicting/web/api/mouseevent/pagey/index.html
@@ -0,0 +1,90 @@
+---
+title: event.pageY
+slug: conflicting/Web/API/MouseEvent/pageY
+translation_of: Web/API/UIEvent/pageY
+original_slug: Web/API/UIEvent/pageY
+---
+<p>{{ ApiRef() }}</p>
+<h3 id="Summary" name="Summary">概述</h3>
+<p>返回事件发生时相对于整个文档的纵坐标.</p>
+<h3 id="Syntax" name="Syntax">语法</h3>
+<pre class="eval"><em>var pageY</em> = <em>event</em>.pageY;
+</pre>
+<p><code>pageY</code> 是事件发生时鼠标指针所在位置相对于整个文档的纵坐标,单位为像素.该属性会考虑到页面滚动条的高度.</p>
+<h3 id="Example" name="Example">例子</h3>
+<pre>&lt;html&gt;
+&lt;head&gt;
+&lt;title&gt;pageX\pageY &amp; layerX\layerY example&lt;/title&gt;
+
+&lt;script type="text/javascript"&gt;
+
+function showCoords(evt){
+  var form = document.forms.form_coords;
+  var parent_id = evt.target.parentNode.id;
+  form.parentId.value = parent_id;
+  form.pageXCoords.value = evt.pageX;
+  form.pageYCoords.value = evt.pageY;
+  form.layerXCoords.value = evt.layerX;
+  form.layerYCoords.value = evt.layerY;
+}
+
+&lt;/script&gt;
+
+&lt;style type="text/css"&gt;
+
+ #d1 {
+  border: solid blue 1px;
+  padding: 20px;
+ }
+
+ #d2 {
+  position: absolute;
+  top: 180px;
+  left: 80%;
+  right:auto;
+  width: 40%;
+  border: solid blue 1px;
+  padding: 20px;
+ }
+
+ #d3 {
+  position: absolute;
+  top: 240px;
+  left: 20%;
+  width: 50%;
+  border: solid blue 1px;
+  padding: 10px;
+ }
+
+&lt;/style&gt;
+&lt;/head&gt;
+
+&lt;body onmousedown="showCoords(event)"&gt;
+
+&lt;p&gt;要显示鼠标所在位置的坐标,请点击页面上的任意地方.&lt;/p&gt;
+
+&lt;div id="d1"&gt;
+&lt;span&gt;这是一个未定位的div(没有指定css position属性),所以点击它返回的layerX/layerY值几乎和pageX/PageY值完全相同.&lt;/span&gt;
+&lt;/div&gt;
+
+&lt;div id="d2"&gt;
+&lt;span&gt;<span id="result_box" lang="zh-CN"><span>这是一个</span><span>已定位的div</span><span>,因此</span><span>点击它</span><span>时返回</span><span>的layerX</span><span>/</span><span class="hps">layerY的值是相对于自己左上角(</span></span>top-left<span id="result_box" lang="zh-CN"><span class="hps">)位置的坐标值.</span>
+<span>然而</span><span>pageX</span><span>/</span><span class="hps">pageY</span><span>属性</span><span>仍</span><span>返回该div在</span><span>文档中</span><span>的</span><span>绝对位置</span><span>,</span><span>包括页面</span><span>滚动</span></span>高度.&lt;/span&gt;
+&lt;/div&gt;
+
+&lt;div id="d3"&gt;
+&lt;form name="form_coords"&gt;
+ 父元素id: &lt;input type="text" name="parentId" size="7" /&gt;&lt;br /&gt;
+ pageX:&lt;input type="text" name="pageXCoords" size="7" /&gt;
+ pageY:&lt;input type="text" name="pageYCoords" size="7" /&gt;&lt;br /&gt;
+ layerX:&lt;input type="text" name="layerXCoords" size="7" /&gt;
+ layerY:&lt;input type="text" name="layerYCoords" size="7" /&gt;
+&lt;/form&gt;
+&lt;/div&gt;
+
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+<h3 id="Specification" name="Specification">规范</h3>
+<p>不属于任何公开的标准.</p>
+<p>{{ languages( {"pl": "pl/DOM/event.pageY","en": "en/DOM/event.pageY" } ) }}</p>
diff --git a/files/zh-cn/conflicting/web/css/index.html b/files/zh-cn/conflicting/web/css/index.html
new file mode 100644
index 0000000000..007a716edb
--- /dev/null
+++ b/files/zh-cn/conflicting/web/css/index.html
@@ -0,0 +1,28 @@
+---
+title: 工具
+slug: conflicting/Web/CSS
+tags:
+  - CSS
+translation_of: Web/CSS/Tools
+original_slug: Web/CSS/Tools
+---
+<div>CSS提供了许多强大的功能，但这些功能要么可能很难使用，要么有许多参数，因此在使用它们时，能够可视化它们是有帮助的。此页面提供了一些有用的工具的链接，这些工具将帮助您使用这些功能构建 CSS 来设计您的内容。</div>
+
+<p> </p>
+
+<p>{{LandingPageListSubpages}}</p>
+
+<h2 id="其他工具">其他工具</h2>
+
+<ul>
+ <li>CSS 动画- <a href="http://jeremyckahn.github.io/stylie/">Stylie</a></li>
+ <li>查看设备的显示信息(从 {{Glossary("响应式网页设计")}}处得到帮助) - <a href="http://mydevice.io">mydevice.io</a></li>
+ <li>CSS 菜单- <a href="http://cssmenumaker.com/">cssmenumaker.com</a></li>
+ <li>一个 强大并现代化的 CSS linter 可以帮助你实现统一约定并避免样式表中的错误 - <a href="https://stylelint.io/">stylelint</a></li>
+</ul>
+
+<h2 id="相关主题">相关主题</h2>
+
+<ul>
+ <li><a href="/zh-CN/docs/Web/CSS" title="/en-US/docs/Web/CSS">CSS</a></li>
+</ul>
diff --git a/files/zh-cn/glossary/character_set/index.html b/files/zh-cn/glossary/character_set/index.html
index 9dc43c66b5..450d517a72 100644
--- a/files/zh-cn/glossary/character_set/index.html
+++ b/files/zh-cn/glossary/character_set/index.html
@@ -9,7 +9,7 @@ translation_of: Glossary/character_set
 
 <p>如果一个字符集使用不正确(例如，对于以 Big5 编码的文章使用 Unicode)，你可能会看到全是乱码，这被称为 {{Interwiki("wikipedia", "Mojibake")}}.</p>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li>Wikipedia 文章
   <ol>
diff --git a/files/zh-cn/glossary/crawler/index.html b/files/zh-cn/glossary/crawler/index.html
index 27d5a0f735..048962ae9b 100644
--- a/files/zh-cn/glossary/crawler/index.html
+++ b/files/zh-cn/glossary/crawler/index.html
@@ -16,7 +16,7 @@ translation_of: Glossary/Crawler
  <li>维基百科上关于{{Interwiki("wikipedia", "Web crawler")}}的内容</li>
 </ul>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li><a href="/en-US/docs/">MDN网络文档术语表</a>
 
diff --git a/files/zh-cn/glossary/cross_axis/index.html b/files/zh-cn/glossary/cross_axis/index.html
index 63d0665cce..1c67022dc9 100644
--- a/files/zh-cn/glossary/cross_axis/index.html
+++ b/files/zh-cn/glossary/cross_axis/index.html
@@ -37,7 +37,7 @@ original_slug: Glossary/交叉轴
  <li>CSS 弹性容器指南：<em><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Mastering_Wrapping_of_Flex_Items">Mastering wrapping of flex items</a></em></li>
 </ul>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li><a href="/en-US/docs/Glossary">MDN Web Docs Glossary</a>
 
diff --git a/files/zh-cn/glossary/css_selector/index.html b/files/zh-cn/glossary/css_selector/index.html
index 88170cdb72..d5967dc2f9 100644
--- a/files/zh-cn/glossary/css_selector/index.html
+++ b/files/zh-cn/glossary/css_selector/index.html
@@ -53,7 +53,7 @@ div.warning {
 
 <p>{{EmbedLiveSample("glossary-selector-details", 640, 210)}}</p>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li>查看我们的关于选择器的介绍 <a href="/zh-CN/docs/Learn/CSS/Building_blocks/Selectors">CSS选择器</a></li>
  <li>基础选择器
diff --git a/files/zh-cn/glossary/database/index.html b/files/zh-cn/glossary/database/index.html
index 5b0c1a3082..3e8a5ebb4b 100644
--- a/files/zh-cn/glossary/database/index.html
+++ b/files/zh-cn/glossary/database/index.html
@@ -14,7 +14,7 @@ original_slug: Glossary/数据库
 
 <p>浏览器也有他们特有的数据库系统，被称作 {{glossary("IndexedDB")}}。</p>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li>维基百科上的词条 {{Interwiki("wikipedia", "Database")}}
   <ol>
diff --git a/files/zh-cn/glossary/flexbox/index.html b/files/zh-cn/glossary/flexbox/index.html
index c03d2df467..617ab9d377 100644
--- a/files/zh-cn/glossary/flexbox/index.html
+++ b/files/zh-cn/glossary/flexbox/index.html
@@ -43,7 +43,7 @@ translation_of: Glossary/Flexbox
  <li>CSS Flexbox Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox">Typical use cases of flexbox</a></em></li>
 </ul>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li><a href="/en-US/docs/Glossary">MDN Web Docs Glossary</a>
 
diff --git a/files/zh-cn/glossary/fork/index.html b/files/zh-cn/glossary/fork/index.html
index 6778a8ff6c..66c421a698 100644
--- a/files/zh-cn/glossary/fork/index.html
+++ b/files/zh-cn/glossary/fork/index.html
@@ -22,7 +22,7 @@ translation_of: Glossary/Fork
  <li><a href="https://www.libreoffice.org/about-us/who-are-we/">LibreOffice, a fork of OpenOffice</a></li>
 </ul>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li>基本知识
   <ol>
diff --git a/files/zh-cn/glossary/global_object/index.html b/files/zh-cn/glossary/global_object/index.html
index 5635c4661d..81732082ce 100644
--- a/files/zh-cn/glossary/global_object/index.html
+++ b/files/zh-cn/glossary/global_object/index.html
@@ -50,7 +50,7 @@ window.greeting(); // It is the same as the normal invoking: greeting();
    console.log("Hi!");
 }</pre>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ul>
  <li><a href="/en-US/docs/Glossary">MDN Web Docs Glossary</a>
 
diff --git a/files/zh-cn/glossary/graceful_degradation/index.html b/files/zh-cn/glossary/graceful_degradation/index.html
index 2982cc0074..721c5cc632 100644
--- a/files/zh-cn/glossary/graceful_degradation/index.html
+++ b/files/zh-cn/glossary/graceful_degradation/index.html
@@ -22,7 +22,7 @@ original_slug: Glossary/优雅降级
  <li>维基百科的{{Interwiki("wikipedia", "优雅降级")}}</li>
 </ul>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ul>
  <li><a href="/en-US/docs/Glossary">MDN Web 文档词汇表</a>
 
diff --git a/files/zh-cn/glossary/gzip_compression/index.html b/files/zh-cn/glossary/gzip_compression/index.html
index 8c7e9e0f4a..800d8c12a6 100644
--- a/files/zh-cn/glossary/gzip_compression/index.html
+++ b/files/zh-cn/glossary/gzip_compression/index.html
@@ -17,7 +17,7 @@ translation_of: Glossary/GZip_compression
  <li>中文维基百科上的 <a href="https://zh.wikipedia.org/wiki/Gzip">Gzip</a></li>
 </ul>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ul>
  <li>
   <details open><summary><a href="/zh-CN/docs/Glossary">MDN 术语表</a></summary> {{ListSubpages("/zh-CN/docs/Glossary")}}</details>
diff --git a/files/zh-cn/glossary/http_2/index.html b/files/zh-cn/glossary/http_2/index.html
index 0572bafbf0..c3af127d0d 100644
--- a/files/zh-cn/glossary/http_2/index.html
+++ b/files/zh-cn/glossary/http_2/index.html
@@ -10,7 +10,7 @@ translation_of: Glossary/HTTP_2
 
 <p>HTTP/2 不会修改 HTTP 协议的语义。 HTTP 1.1中的所有核心概念（例如 HTTP 方法，状态码，URI 和 headers）都得以保留。 而是修改了 HTTP/2 数据在客户端和服务器之间的格式（帧）和传输方式，这两者都管理整个过程，并在新的框架层内隐藏了应用程序的复杂性。 所以，所有现有的应用程序都可以不经修改地交付。</p>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li>常识
   <ol>
diff --git a/files/zh-cn/glossary/http_3/index.html b/files/zh-cn/glossary/http_3/index.html
index abd624776b..96350153cb 100644
--- a/files/zh-cn/glossary/http_3/index.html
+++ b/files/zh-cn/glossary/http_3/index.html
@@ -9,7 +9,7 @@ translation_of: Glossary/HTTP_3
 ---
 <p><strong><font><font>HTTP/3</font></font></strong><font><font>是</font></font><font><font>继</font></font>{{glossary("HTTP 2", "HTTP/2")}}<font><font>即将到来的</font><a href="/zh-CN/docs/Web/HTTP/Basics_of_HTTP"><font>HTTP网络协议的</font></a><font>主要修订版。</font></font><font><font>HTTP/3的要点是它使用名为QUIC</font><font>的新</font></font>{{glossary("UDP")}}<font><font>协议代替</font></font>{{glossary("TCP")}}<font><font>。</font></font></p>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li>基础知识
   <ol>
diff --git a/files/zh-cn/glossary/http_header/index.html b/files/zh-cn/glossary/http_header/index.html
index e176995fc8..abb83200b4 100644
--- a/files/zh-cn/glossary/http_header/index.html
+++ b/files/zh-cn/glossary/http_header/index.html
@@ -48,7 +48,7 @@ X-Cache: Hit from cloudfront
 X-Cache-Info: cached
 </pre>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li>规范
   <ol>
diff --git a/files/zh-cn/glossary/index.html b/files/zh-cn/glossary/index.html
index 2d27a1dfde..43354124dd 100644
--- a/files/zh-cn/glossary/index.html
+++ b/files/zh-cn/glossary/index.html
@@ -29,7 +29,7 @@ translation_of: Glossary
 <p>如果你想要了解更多关于如何对该术语表做贡献的相关信息，请访问<a href="/zh-CN/docs/MDN/Doc_status/Glossary">术语表文档状态页面</a>。</p>
 
 <div class="hidden">
-<section id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li><strong><a href="/zh-CN/docs/Glossary">MDN Web 文档术语</a></strong>{{ListSubpagesForSidebar("/zh-CN/docs/Glossary", 0)}}</li>
 </ol>
diff --git a/files/zh-cn/glossary/input_method_editor/index.html b/files/zh-cn/glossary/input_method_editor/index.html
index 381c2ac71b..d4d1a6b9e0 100644
--- a/files/zh-cn/glossary/input_method_editor/index.html
+++ b/files/zh-cn/glossary/input_method_editor/index.html
@@ -15,7 +15,7 @@ translation_of: Glossary/Input_method_editor
  <li>使用手写识别在触摸屏上输入文本</li>
 </ul>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li>维基百科文章
   <ol>
diff --git a/files/zh-cn/glossary/latency/index.html b/files/zh-cn/glossary/latency/index.html
index 8159d00ea3..bc6eb38d21 100644
--- a/files/zh-cn/glossary/latency/index.html
+++ b/files/zh-cn/glossary/latency/index.html
@@ -16,4 +16,4 @@ translation_of: Glossary/Latency
  <li>理解延迟</li>
 </ul>
 
-<section class="Quick_links" id="Quick_Links"></section>
+<section id="Quick_links"></section>
diff --git a/files/zh-cn/glossary/ligature/index.html b/files/zh-cn/glossary/ligature/index.html
index 4e22b4d696..e919f9d405 100644
--- a/files/zh-cn/glossary/ligature/index.html
+++ b/files/zh-cn/glossary/ligature/index.html
@@ -7,7 +7,7 @@ translation_of: Glossary/Ligature
 
 <p>你可以在网页中使用 {{cssxref("font-variant-ligatures")}} 来实现连字</p>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li>{{interwiki("wikipedia", "Typographic ligature", "Ligature")}} on Wikipedia</li>
 </ol>
diff --git a/files/zh-cn/glossary/main_thread/index.html b/files/zh-cn/glossary/main_thread/index.html
index ceb985bb00..2ce47d1a6f 100644
--- a/files/zh-cn/glossary/main_thread/index.html
+++ b/files/zh-cn/glossary/main_thread/index.html
@@ -7,7 +7,7 @@ translation_of: Glossary/Main_thread
 
 <p>除非故意使用 <a href="/en-US/docs/Web/API/Web_Workers_API/Using_web_workers">web worker</a>，比如 <a href="/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers">service worker</a>，不然 JavaScript 只在线程中运行，所以脚本的运行时，很容易导致事件处理流程或绘制的延迟。主线程中运行的工作越少，就有越多的余地来处理用户事件，页面绘制和对用户保持响应。 </p>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li>另可参考
   <ol>
diff --git a/files/zh-cn/glossary/method/index.html b/files/zh-cn/glossary/method/index.html
index 0d4e53b15d..54706f64d1 100644
--- a/files/zh-cn/glossary/method/index.html
+++ b/files/zh-cn/glossary/method/index.html
@@ -24,7 +24,7 @@ translation_of: Glossary/Method
  <li><a href="/en-US/docs/Web/JavaScript/Reference/Methods_Index">List of JavaScript built-in methods</a></li>
 </ul>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ul>
  <li><a href="/en-US/docs/Glossary">MDN Web Docs Glossary</a>
 
diff --git a/files/zh-cn/glossary/nullish/index.html b/files/zh-cn/glossary/nullish/index.html
index bcde8071c5..dff466ef8f 100644
--- a/files/zh-cn/glossary/nullish/index.html
+++ b/files/zh-cn/glossary/nullish/index.html
@@ -11,9 +11,3 @@ translation_of: Glossary/Nullish
 <p>{{Draft}}</p>
 
 <p>一个 nullish 值要么是 {{JSxRef("null")}} 要么是 {{JSxRef("undefined")}}。nullish 值总是 <a href="/zh-CN/docs/Glossary/Falsy">falsy</a>.。</p>
-
-<section id="Quick_Links">
-<ul>
- <li class="hidden">{{Page("/en-US/docs/Glossary/Primitive", "Quick_Links")}}</li>
-</ul>
-</section>
diff --git a/files/zh-cn/glossary/smtp/index.html b/files/zh-cn/glossary/smtp/index.html
index 1bc6829af1..19c5cc7ad8 100644
--- a/files/zh-cn/glossary/smtp/index.html
+++ b/files/zh-cn/glossary/smtp/index.html
@@ -7,7 +7,7 @@ translation_of: Glossary/SMTP
 
 <p>该协议相对简单。最复杂的部分在于添加支持不同的验证机制（<a class="external" href="http://en.wikipedia.org/wiki/Generic_Security_Services_Application_Program_Interface"><abbr title="Generic Security Services Application Program Interface">GSSAPI</abbr></a>， <a class="external" href="http://en.wikipedia.org/wiki/CRAM-MD5"><abbr title="challenge-response authentication mechanism">CRAM-MD5</abbr></a>，<a class="external" href="http://en.wikipedia.org/wiki/NTLM"><abbr title="NT LAN Manager">NTLM</abbr></a>，MSN，AUTH LOGIN，AUTH PLAIN等），处理错误响应以及在验证机制错误时进行状态回退（如服务器声明其支持某种机制但其实并不）。 </p>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li><a href="/zh-CN/docs/Glossary">术语表</a>
 
diff --git a/files/zh-cn/glossary/type_conversion/index.html b/files/zh-cn/glossary/type_conversion/index.html
index 863855caad..300aba36e3 100644
--- a/files/zh-cn/glossary/type_conversion/index.html
+++ b/files/zh-cn/glossary/type_conversion/index.html
@@ -10,7 +10,7 @@ original_slug: Glossary/类型转换
 ---
 <p class="syntaxbox">类型转换（或类型变换；英文：Type conversion, typecasting）是指将数据由一种类型变换为另一种类型。在编译器自动赋值时,会发生<em>隐式转换</em>，但在代码中，也可以用一些写法强制要求进行<em>显式转换</em>。例如：在表达式 <code>5 + 2.0</code> 中，整数 <code>5</code> 被隐式转换为浮点数，但 <code>Number("0x11")</code> 和 "0x11" 则被显式转换为数字 17。</p>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li><a href="/zh-CN/docs/Glossary">术语</a>
 
diff --git a/files/zh-cn/learn/css/first_steps/getting_started/index.html b/files/zh-cn/learn/css/first_steps/getting_started/index.html
index d8a315fba4..a4c358224a 100644
--- a/files/zh-cn/learn/css/first_steps/getting_started/index.html
+++ b/files/zh-cn/learn/css/first_steps/getting_started/index.html
@@ -17,7 +17,7 @@ original_slug: Learn/CSS/First_steps/开始
 <p>{{PreviousMenuNext("Learn/CSS/First_steps/What_is_CSS", "Learn/CSS/First_steps/How_CSS_is_structured", "Learn/CSS/First_steps")}}</p>
 </div>
 
-<p class="summary">在这篇文章中，我们将会拿一个简单的HTML文档做例子，并且在上边使用CSS样式，期待你能在此过程中学会更多有关CSS的实战性知识。</p>
+<p class="summary">在这篇文章中，我们将会拿一个简单的 HTML 文档做例子，并且在里面使用 CSS 样式，期待你能在此过程中学会更多有关 CSS 的实战性知识。</p>
 
 <h4 id="前置知识">前置知识</h4>
 
@@ -26,19 +26,19 @@ original_slug: Learn/CSS/First_steps/开始
 <ul>
  <li><font><font>基本熟悉计算机操作。</font></font></li>
  <li><font><font>基本工作环境的设置（详见</font></font><font><font><a href="https://developer.mozilla.org/zh-CN/docs/Learn/Getting_started_with_the_web/Installing_basic_software">安装基本软件</a>）</font></font><font><font>，基本的文件操作，详见</font></font><font><font><a href="https://developer.mozilla.org/zh-CN/docs/Learn/Getting_started_with_the_web/Dealing_with_files">处理文件</a></font></font><font><font>。</font></font></li>
- <li>熟悉 <a href="https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Introduction_to_HTML">HTML概述</a> 章节中提到的基本HTML知识.</li>
+ <li>熟悉 <a href="https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Introduction_to_HTML">HTML 概述</a> 章节中提到的基本 HTML 知识.</li>
 </ul>
 
 <h4 id="目标">目标</h4>
 
 <ul>
- <li>理解 HTML文档链接CSS文档的几个基本套路，</li>
- <li>并能运用所学的CSS，做些文字上的格式化操作。</li>
+ <li>理解 HTML 文档链接 CSS 文档的几个基本套路，</li>
+ <li>并能运用所学的 CSS，做些文字上的格式化操作。</li>
 </ul>
 
-<h2 id="先从HTML开始吧">先从HTML开始吧</h2>
+<h2 id="先从HTML开始吧">先从 HTML 开始吧</h2>
 
-<p>我们先以HTML文档展开叙述。如果想在自己电脑试一试，可以copy下面的代码。在你的电脑上，将代码以文件名： <code>index.html</code> 的形式保存下来。</p>
+<p>我们先以 HTML 文档展开叙述。如果想在自己电脑试一试，可以复制下面的代码。在你的电脑上，将代码以文件名： <code>index.html</code> 的形式保存下来。</p>
 
 <pre class="brush: html">&lt;!doctype html&gt;
 &lt;html lang="en"&gt;
@@ -71,25 +71,25 @@ original_slug: Learn/CSS/First_steps/开始
 <p><strong>温馨提示：假设你电脑操作环境不方便创建文件运行代码，别担心，可以用我们下方给出的在线实时代码编辑器。</strong></p>
 </div>
 
-<h2 id="添加CSS试试看？">添加CSS试试看？</h2>
+<h2 id="添加CSS试试看？">添加 CSS 试试看？</h2>
 
-<p>我们最想做的就是让HTML文档能够遵守我们给它的CSS规则。 其实有三种方式可以实现，而目前我们更倾向于利用最普遍且有用的方式——在文档的开头链接CSS。</p>
+<p>我们最想做的就是让 HTML 文档能够遵守我们给它的 CSS 规则。 其实有三种方式可以实现，而目前我们更倾向于利用最普遍且有用的方式——在文档的开头链接 CSS。</p>
 
-<p>在与之前所说的HTML文档的相同目录创建一个文件，保存并命名为 <code>styles.css</code> 。（看后缀知道此文件就是CSS文件）</p>
+<p>在与之前所说的 HTML 文档的相同目录创建一个文件，保存并命名为 <code>styles.css</code> 。（看后缀知道此文件就是 CSS 文件）</p>
 
-<p>为了把 <code>styles.css</code> 和 <code>index.html</code> 联结起来，可以在HTML文档中，{{htmlelement("head")}}语句模块里面加上下面的代码：</p>
+<p>为了把 <code>styles.css</code> 和 <code>index.html</code> 连接起来，可以在 HTML 文档中，{{htmlelement("head")}} 语句模块里面加上下面的代码：</p>
 
 <pre class="brush: html">&lt;link rel="stylesheet" href="styles.css"&gt;</pre>
 
-<p> {{htmlelement("link")}} 语句块里面，我们用属性<code>rel</code>，让浏览器知道有CSS文档存在（所以需要遵守CSS样式的规定），并利用属性 <code>href</code> 指定，寻找CSS文件的位置。 你可以做测试来验证CSS是否有效：在 <code>styles.css</code> 里面加上CSS样式并观察显示的结果。下面，用你的编辑器打出下面的代码。</p>
+<p> {{htmlelement("link")}} 语句块里面，我们用属性 <code>rel</code>，让浏览器知道有 CSS 文档存在（所以需要遵守 CSS 样式的规定），并利用属性 <code>href</code> 指定，寻找 CSS 文件的位置。 你可以做测试来验证CSS是否有效：在 <code>styles.css</code> 里面加上CSS样式并观察显示的结果。下面，用你的编辑器打出下面的代码。</p>
 
 <pre class="brush: css">h1 {
   color: red;
 }</pre>
 
-<p>保存HTML和CSS文档，刷新浏览器网页，不出意外你将看到网页顶层的大标题变成红色了。如果看到这个现象，我得恭喜你：你已经成功将某些CSS样式运用到HTML上了。当然假设没有达到预想结果，可以仔细检查每句代码是否正确，加油：）</p>
+<p>保存 HTML 和 CSS 文档，刷新浏览器网页，不出意外你将看到网页顶层的大标题变成红色了。如果看到这个现象，恭喜你：你已经成功将某些 CSS 样式运用到 HTML 上了。当然假设没有达到预想结果，可以仔细检查每句代码是否正确，加油：）</p>
 
-<p>你可以一直在本地编辑器练习 <code>styles.css</code> ，或者采用我们教程下面的交互式智能编辑器。这个编辑器会默认把第一个面板里面的CSS代码联结到旁边的HTML文档，就好像我们上面得两个文档一样互相联结。</p>
+<p>你可以一直在本地编辑器练习 <code>styles.css</code> ，或者采用我们教程下面的交互式智能编辑器。这个编辑器会默认把第一个面板里面的 CSS 代码连接到旁边的 HTML 文档，就好像我们上面得两个文档一样互相连接。</p>
 
 <h2 id="样式化_HTML_元素">样式化 HTML 元素</h2>
 
@@ -177,7 +177,7 @@ span.special {
 
 <p>该选择器将选择<code>&lt;li&gt;</code>内部的任何<code>&lt;em&gt;</code>元素（<code>&lt;li&gt;</code>的后代）。因此在示例文档中，您应该发现第三个列表项内的<code>&lt;em&gt;</code>现在是紫色，但是在段落内的那个没发生变化。</p>
 
-<p>另一些可能想尝试的事情是在HTML文档中设置直接出现在标题后面并且与标题具有相同层级的段落样式，为此需在两个选择器之间添加一个 <code>+</code> 号 (成为 <strong>相邻选择符</strong>) </p>
+<p>另一些可能想尝试的事情是在 HTML 文档中设置直接出现在标题后面并且与标题具有相同层级的段落样式，为此需在两个选择器之间添加一个 <code>+</code> 号 (成为 <strong>相邻选择符</strong>) </p>
 
 <p>也将这个规则添加到样式表中：</p>
 
@@ -185,7 +185,7 @@ span.special {
   font-size: 200%;
 }</pre>
 
-<p>下面的示例包含了上面的两个规则。 尝试添加规则使位于段落中的span变为红色。如果正确您将看到在第一段中的span会变为红色，但是第一个列表项中的span不会改变颜色。</p>
+<p>下面的示例包含了上面的两个规则。 尝试添加规则使位于段落中的 span 变为红色。如果没问题，您将看到在第一段中的 span 会变为红色，但是第一个列表项中的 span 不会改变颜色。</p>
 
 <p>{{EmbedGHLiveSample("css-examples/learn/getting-started/started2.html", '100%', 1100)}}</p>
 
@@ -211,23 +211,23 @@ a:visited {
   text-decoration: none;
 }</pre>
 
-<p>在下面的例子中，你可以对超链接的不同状态尝试各种各样的值。我已经编写了一些规则，然而你肯定已经发现粉色看上去太浅以至于不好辨认。— 换个更好的颜色吧。你能将链接变为黑体吗?</p>
+<p>在下面的例子中，你可以对超链接的不同状态尝试各种各样的值。我已经编写了一些规则，然而你肯定已经发现粉色看上去太浅以至于不好辨认。——换一个更好的颜色吧。你能将链接变为黑体吗?</p>
 
 <p>{{EmbedGHLiveSample("css-examples/learn/getting-started/started3.html", '100%', 900)}} </p>
 
-<p>我们对鼠标悬停于链接上的情况删除了下划线。你当然可以让超链接在任何情况下都没有下划线.。但需要注意的是，对一个实际的站点，需要让浏览者知道“链接是链接”。为了让浏览者注意到一段文字中的某些部分是可点击的，最好保留link状态下的下划线。— 这是下划线的本来作用。不管你用CSS来做什么，都应当使得变化后的文档看上去更加清晰明了。— 在后面，当我们遇到类似的情况时，我们将适时指出。</p>
+<p>我们对鼠标悬停于链接上的情况删除了下划线。你当然可以让超链接在任何情况下都没有下划线。但需要注意的是，对一个实际的站点，需要让浏览者知道“链接是链接”。为了让浏览者注意到一段文字中的某些部分是可点击的，最好保留 link 状态下的下划线。— 这是下划线的本来作用。不管你用 CSS 来做什么，都应当使得变化后的文档看上去更加清晰明了。— 在后面，当我们遇到类似的情况时，我们将适时指出。</p>
 
 <div class="blockIndicator note">
-<p><strong>注</strong>: 在本教程以及整个MDN站点中，你会经常看到“无障碍”这个词。“无障碍”一词的意思是，我们的网页应当每一个访客都能够理解、使用。</p>
+<p><strong>注</strong>: 在本教程以及整个 MDN 站点中，你会经常看到“无障碍”这个词。“无障碍”一词的意思是，我们的网页应当让每一个访客都能够理解、使用。</p>
 
 <p>你的访客可能在一台使用鼠标和键盘操作的计算机前，也可能正在使用带有触摸屏的手机，或者正在使用屏幕阅读软件读出文档内容，或者他们需要使用更大的字体，或者仅仅使用键盘浏览站点。</p>
 
-<p>一个朴素的HTML文档一般来说对任何人都是可以无障碍访问的 ，当你开始为它添加样式，记得不要破坏这种可访问性。</p>
+<p>一个朴素的 HTML 文档一般来说对任何人都是可以无障碍访问的 ，当你开始为它添加样式，记得不要破坏这种可访问性。</p>
 </div>
 
-<h2 id="将选择子和关系选择器组合起来">将选择子和关系选择器组合起来</h2>
+<h2 id="同时使用选择器和选择符">同时使用选择器和选择符</h2>
 
-<p>你可以将多个选择子和关系选择器组合起来。来看一些例子：</p>
+<p>你可以同时使用选择器和选择符。来看一些例子：</p>
 
 <pre class="brush: css">/* selects any &lt;span&gt; that is inside a &lt;p&gt;, which is inside an &lt;article&gt;  */
 article p span { ... }
@@ -243,15 +243,15 @@ h1 + ul + p { ... }</pre>
   padding: 5px;
 }</pre>
 
-<p>上面的代码为以下元素建立样式：在&lt;body&gt;之内，紧接在&lt;h1&gt;后面的&lt;p&gt;元素的内部，类名为special。</p>
+<p>上面的代码为以下元素建立样式：在&lt;body&gt;之内，紧接在&lt;h1&gt;后面的&lt;p&gt;元素的内部，类名为 special。</p>
 
-<p>在我们提供的原始HTML文档中，与之符合的元素只有<code>&lt;span class="special"&gt;</code>.</p>
+<p>在我们提供的原始 HTML 文档中，与之符合的元素只有<code>&lt;span class="special"&gt;</code>.</p>
 
-<p>如果你现在觉得这份代码太复杂了，别担心，— 一旦你开始编写更多的CSS代码，你很快就能找到窍门。</p>
+<p>如果你现在觉得这份代码太复杂了，别担心，— 一旦你开始编写更多的 CSS 代码，你很快就能找到窍门。</p>
 
 <h2 id="总结">总结</h2>
 
-<p>在本教程中，我们学习了使用CSS为文档添加样式的几种方法。在教程的剩下部分，我们将继续这个话题。不过，你现在已经有了足够的知识为文本建立样式；根据目标元素的不同用不同的方式应用样式；在MDN文档中查找属性和值。</p>
+<p>在本教程中，我们学习了使用 CSS 为文档添加样式的几种方法。在教程的剩下部分，我们将继续这个话题。不过，你现在已经有了足够的知识为文本建立样式；根据目标元素的不同用不同的方式应用样式；在 MDN 文档中查找属性和值。</p>
 
 <p>在下一节中，我们将看到样式表的结构是什么样的。</p>
 
@@ -260,9 +260,9 @@ h1 + ul + p { ... }</pre>
 <h2 id="在此模块">在此模块</h2>
 
 <ol>
- <li><a href="/zh-CN/docs/Learn/CSS/First_steps/What_is_CSS">什么是CSS?</a></li>
- <li><a href="/zh-CN/docs/Learn/CSS/First_steps/开始">开始学习CSS</a></li>
- <li><a href="/zh-CN/docs/Learn/CSS/First_steps/How_CSS_is_structured">CSS代码是如何组织的</a></li>
- <li><a href="/zh-CN/docs/Learn/CSS/First_steps/CSS如何运行">CSS是如何工作的</a></li>
+ <li><a href="/zh-CN/docs/Learn/CSS/First_steps/What_is_CSS">什么是 CSS?</a></li>
+ <li><a href="/zh-CN/docs/Learn/CSS/First_steps/开始">开始学习 CSS</a></li>
+ <li><a href="/zh-CN/docs/Learn/CSS/First_steps/How_CSS_is_structured">CSS 代码是如何组织的</a></li>
+ <li><a href="/zh-CN/docs/Learn/CSS/First_steps/CSS如何运行">CSS 是如何工作的</a></li>
  <li><a href="/zh-CN/docs/Learn/CSS/First_steps/Using_your_new_knowledge">开始使用你的新知识</a></li>
 </ol>
diff --git a/files/zh-cn/learn/css/first_steps/how_css_is_structured/index.html b/files/zh-cn/learn/css/first_steps/how_css_is_structured/index.html
index aec4a3a61d..6f09222cf6 100644
--- a/files/zh-cn/learn/css/first_steps/how_css_is_structured/index.html
+++ b/files/zh-cn/learn/css/first_steps/how_css_is_structured/index.html
@@ -215,7 +215,7 @@ p {
   color: blue;
 }</pre>
 
-<p>但是，在我们使用类选择器和元素选择器的早期块中，类将获胜，使得段落变红--即使它出现在样式表的前面。一个类被描述为比元素选择器更具体，或者具有更多的特异性，所以它获胜了。</p>
+<p>但是，在我们同时使用了类选择器和元素选择器的前一个例子中，类将获胜，使得段落变红--即使它出现在样式表的前面。一个类被描述为比元素选择器更具体，或者具有更多的特异性，所以它获胜了。</p>
 
 <p><strong>自己试试上面的实验--将HTML添加到您的实验中，然后将两个p{.}规则添加到样式表中。接下来，将第一个p选择器更改为.Special，以查看它如何更改样式。</strong></p>
 
diff --git a/files/zh-cn/learn/getting_started_with_the_web/javascript_basics/index.html b/files/zh-cn/learn/getting_started_with_the_web/javascript_basics/index.html
index 378913f393..eacd31f1b0 100644
--- a/files/zh-cn/learn/getting_started_with_the_web/javascript_basics/index.html
+++ b/files/zh-cn/learn/getting_started_with_the_web/javascript_basics/index.html
@@ -367,7 +367,7 @@ myImage.onclick = function() {
   <pre class="brush: js notranslate">let myButton = document.querySelector('button');
 let myHeading = document.querySelector('h1');</pre>
  </li>
- <li>然后添加以下函数来设置个性化欢迎信息。（函数暂时不起作用，稍后修复）
+ <li>然后添加以下函数来设置个性化欢迎信息。（函数需要在调用后生效，下文中提供了两种对该函数的调用方式）
   <pre class="brush: html notranslate">function setUserName() {
   let myName = prompt('请输入你的名字。');
   localStorage.setItem('name', myName);
diff --git a/files/zh-cn/learn/html/introduction_to_html/index.html b/files/zh-cn/learn/html/introduction_to_html/index.html
index 4452927531..65a460db43 100644
--- a/files/zh-cn/learn/html/introduction_to_html/index.html
+++ b/files/zh-cn/learn/html/introduction_to_html/index.html
@@ -55,7 +55,7 @@ translation_of: Learn/HTML/Introduction_to_HTML
 <h2 id="相关链接">相关链接</h2>
 
 <dl>
- <dt><a href="https://teach.mozilla.org/activities/web-lit-basics/">网络文化基础 1</a></dt>
+ <dt><a href="https://mozilla.github.io/content/web-lit-whitepaper/">网络文化基础 2</a></dt>
  <dd>一个优秀的Mozilla基础课程，探索和测试在HTML模块介绍中讨论的许多技能。学习者熟悉阅读，写作和参与这个六部分模块的网络。通过生产和协作掌握网络的基础。</dd>
  <dt></dt>
 </dl>
diff --git a/files/zh-cn/learn/javascript/first_steps/what_is_javascript/index.html b/files/zh-cn/learn/javascript/first_steps/what_is_javascript/index.html
index 4f7add7614..02a3936597 100644
--- a/files/zh-cn/learn/javascript/first_steps/what_is_javascript/index.html
+++ b/files/zh-cn/learn/javascript/first_steps/what_is_javascript/index.html
@@ -478,7 +478,7 @@ for (let i = 0; i &lt; buttons.length; i++) {
 
 <p dir="ltr">恭喜你，迈出了探索 JavaScript 世界的第一步。我们从理论开始，介绍为什么要使用 JavaScript，以及用它能做什么事情。过程中穿插了一些代码示例并讲解了 JavaScript 如何与网站中其他代码适配，等等。</p>
 
-<p dir="ltr">现在 JavaScript 或许还有些令人生畏，但不用担心。在课程中我们会循序渐进。下一节将<a href="/en-US/docs/Learn/JavaScript/Introduction_to_JavaScript_1/A_first_splash"> 全力投入实战</a>，让你专注其中，并建立自己的 JavaScript 示例。</p>
+<p dir="ltr">现在 JavaScript 或许还有些令人生畏，但不用担心。在课程中我们会循序渐进。下一节将<a href="/zh-CN/docs/Learn/JavaScript/Introduction_to_JavaScript_1/A_first_splash"> 全力投入实战</a>，让你专注其中，并建立自己的 JavaScript 示例。</p>
 
 <p dir="ltr">{{NextMenu("Learn/JavaScript/First_steps/A_first_splash", "Learn/JavaScript/First_steps")}}</p>
 
diff --git a/files/zh-cn/mdn/about/index.html b/files/zh-cn/mdn/about/index.html
index 912b4e8e75..766e0465ed 100644
--- a/files/zh-cn/mdn/about/index.html
+++ b/files/zh-cn/mdn/about/index.html
@@ -45,7 +45,7 @@ translation_of: MDN/About
 
 <pre class="notranslate">“ <a href="https://developer.mozilla.org/zh-CN/docs/MDN/About$history">Mozilla贡献者</a>基于<a href="http://creativecommons.org/licenses/by-sa/2.5/">CC-BY-SA 2.5</a>协议发布的<a href="https://developer.mozilla.org/zh-CN/docs/MDN/About">关于MDN</a>. ”</pre>
 
-<p>注意，在示例中，“Mozzilla 贡献者”链接了引用页面的历史版本。请浏览<a href="https://wiki.creativecommons.org/Marking/Users">Best practices for attribution</a>以获得进一步的解释。</p>
+<p>注意，在示例中，“Mozilla 贡献者”链接了引用页面的历史版本。请浏览<a href="https://wiki.creativecommons.org/Marking/Users">Best practices for attribution</a>以获得进一步的解释。</p>
 
 <div class="note">
 <p><strong>注意:</strong> 请浏览 <a href="/zh-CN/docs/MDN_content_on_WebPlatform.org" title="/zh-CN/docs/MDN_content_on_WebPlatform.org">MDN content on WebPlatform.org</a> 获取在上述网站使用和署名 MDN 内容的信息。</p>
@@ -53,9 +53,9 @@ translation_of: MDN/About
 
 <p>在2010年8月20日之前添加到 wiki 中的示例代码通过<a class="external external-icon" href="http://www.opensource.org/licenses/mit-license.php" title="http://www.opensource.org/licenses/mit-license.php">MIT license</a>发布，你应该向MIT模板中添加相应的属性信息："© &lt;最后修订时间&gt; &lt;发布者姓名&gt;"。</p>
 
-<p>在2010年8月20日之后添加到wiki中的示例代码属于 <a class="external external-icon" href="http://creativecommons.org/publicdomain/zero/1.0/" title="http://wiki.creativecommons.org/Public_domain">public domain</a>. 版权声明是不必要的，如果你需要，可以使用以下内容："Any copyright is dedicated to the Public Domain. http://creativecommons.org/publicdomain/zero/1.0/".</p>
+<p>在2010年8月20日之后添加到 wiki中的示例代码属于 <a class="external external-icon" href="http://creativecommons.org/publicdomain/zero/1.0/" title="http://wiki.creativecommons.org/Public_domain">public domain</a>. 版权声明是不必要的，如果你需要，可以使用以下内容："Any copyright is dedicated to the Public Domain. http://creativecommons.org/publicdomain/zero/1.0/".</p>
 
-<p>如果你需要对该 wiki 作出贡献，你必须在Attribution-ShareAlike license (或者在你编辑的页面已经制定的其他版权许可)下发布你的文档，在 <a href="http://creativecommons.org/publicdomain/zero/1.0/" title="http://creativecommons.org/publicdomain/zero/1.0/">Creative Commons CC-0</a> (a Public Domain dedication)下发布你的示例代码。将内容添加到这个 wiki 表明你同意在相应的许可之下发布你贡献的内容。</p>
+<p>如果你需要对该 wiki 作出贡献，你必须在 Attribution-ShareAlike license (或者在你编辑的页面已经制定的其他版权许可)下发布你的文档，在 <a href="http://creativecommons.org/publicdomain/zero/1.0/" title="http://creativecommons.org/publicdomain/zero/1.0/">Creative Commons CC-0</a> (a Public Domain dedication)下发布你的示例代码。将内容添加到这个 wiki 表明你同意在相应的许可之下发布你贡献的内容。</p>
 
 <p>一些历史内容是在不同于以上的版权许可之下发布的，这些已在页面底部通过<a href="https://developer.mozilla.org/Archive/Meta_docs/Examples/Alternate_License_Block">其他版权许可</a>的方式进行了标注。</p>
 
@@ -72,11 +72,11 @@ translation_of: MDN/About
 
 <h2 id="下载整站内容">下载整站内容</h2>
 
-<p>你可以下载 <a href="https://mdn-downloads.s3-us-west-2.amazonaws.com/developer.mozilla.org.tar.gz">MDN 的镜像文件</a>(2017年2月，总共2.1GB)</p>
+<p>你可以下载 <a href="https://mdn-downloads.s3-us-west-2.amazonaws.com/developer.mozilla.org.tar.gz">MDN 的镜像文件</a>(2017 年 2 月，总共 2.1GB)</p>
 
 <h3 id="单独页面">单独页面</h3>
 
-<p>你可以通过在页面URL后添加<a href="https://developer.mozilla.org/zh-CN/docs/MDN/Kuma/API#Document_parameters">文档参数</a>来制定需要的格式，获取MDN上每个单页的内容。</p>
+<p>你可以通过在页面 URL 后添加<a href="https://developer.mozilla.org/zh-CN/docs/MDN/Kuma/API#Document_parameters">文档参数</a>来制定需要的格式，获取 MDN 上每个单页的内容。</p>
 
 <h3 id="第三方工具">第三方工具</h3>
 
@@ -98,11 +98,11 @@ translation_of: MDN/About
 
 <p><a href="https://developer.mozilla.org/zh-CN/docs/Project:MDN/Kuma" title="/zh-CN/docs/Project:MDN/Kuma">Kuma</a> 是 Mozilla 开发的用于驱动 MDN 的平台，目前仍处在持续开发的进程中。我们的开发者，以及大量的志愿者，正在不断的对这个平台作出改进。如果你在使用网站时发现了错误，或者遇到的问题，或者有新的可以让这个软件更加完美的想法建议，可以使用 <a href="https://bugzilla.mozilla.org/form.mdn" title="https://bugzilla.mozilla.org/form.mdn">Kuma bug form</a> 进行反馈。</p>
 
-<h2 id="MDN历史">MDN历史</h2>
+<h2 id="MDN历史">MDN 历史</h2>
 
-<p>Mozilla 开发者网络（亦称作 Mozilla 开发者中心（MDC）或 Devmo）在2005年年初启动。那时 <a class="external" href="http://www.mozillafoundation.org">Mozilla 基金会</a> 从 AOL 获得了许可协议，得以使用原创的 <a href="/Project:cn/DevEdge" title="Project:en/DevEdge">DevEdge</a> 内容。DevEdge 内容的引入具有抛砖引玉之效，因此在那不久在社区志愿者的努力下它被迁移到了这个更易于更新与维护的 wiki 。</p>
+<p>Mozilla 开发者网络（亦称作 Mozilla 开发者中心（MDC）或 Devmo）在 2005 年年初启动。那时 <a class="external" href="http://www.mozillafoundation.org">Mozilla 基金会</a> 从 AOL 获得了许可协议，得以使用原创的 <a href="/Project:cn/DevEdge" title="Project:en/DevEdge">DevEdge</a> 内容。DevEdge 内容的引入具有抛砖引玉之效，因此在那不久在社区志愿者的努力下它被迁移到了这个更易于更新与维护的 wiki 。</p>
 
-<p>此后，这个项目不断发展，现在已经成为所有与关于 Mozilla 项目和开放网络技术的文档的核心一环。在2010年，该项目更名为Mozilla开发者网络（Mozilla Developer Network）。2011年，又添加了供web开发者分享与展示代码的 <a class="external" href="http://developer.mozilla.org/zh-CN/demos" title="https://developer.mozilla.org/zh-CN/demos/">Demo Studio</a> 与提供教程的 <a class="external" href="http://developer.mozilla.org/zh-CN/learn" title="https://developer.mozilla.org/zh-CN/learn">Learning</a> 页面。（MDC 现在表示了"MDN文档中心（MDN Doc Center）"）现在，Mozilla开发者网络正向着成为供Web设计师、应用开发者、以及拓展、主题制作者们时常参考的资源的方向发展。</p>
+<p>此后，这个项目不断发展，现在已经成为所有与关于 Mozilla 项目和开放网络技术的文档的核心一环。在2010年，该项目更名为 Mozilla 开发者网络（Mozilla Developer Network）。2011年，又添加了供 web 开发者分享与展示代码的 <a class="external" href="http://developer.mozilla.org/zh-CN/demos" title="https://developer.mozilla.org/zh-CN/demos/">Demo Studio</a> 与提供教程的 <a class="external" href="http://developer.mozilla.org/zh-CN/learn" title="https://developer.mozilla.org/zh-CN/learn">Learning</a> 页面。（MDC 现在表示了"MDN文档中心（MDN Doc Center）"）现在，Mozilla开发者网络正向着成为供Web设计师、应用开发者、以及拓展、主题制作者们时常参考的资源的方向发展。</p>
 
 <p>更多关于 Mozilla 的后世前身可在我们的<a href="/zh-CN/docs/MDN_at_ten">十周年纪念庆</a>页面查看,其中还有参与者发表的 Ta 对 Mozilla 的评价。</p>
 
diff --git a/files/zh-cn/mdn/contribute/localize/index.html b/files/zh-cn/mdn/contribute/localize/index.html
new file mode 100644
index 0000000000..e19453655e
--- /dev/null
+++ b/files/zh-cn/mdn/contribute/localize/index.html
@@ -0,0 +1,74 @@
+---
+title: MDN 的本地化
+slug: MDN/Contribute/Localize
+tags:
+  - Localization
+  - MDN Meta
+  - l10n
+---
+<div>{{MDNSidebar}}</div>
+
+<p>2020年12月14日开始，MDN 将运行在基于 Github 的 <a href="https://github.com/mdn/yari">Yari 平台</a>上。新的平台也使 MDN 在许多方面发生了改变，这些变化基本上都对我们的工作有不同程度的改进，不过，在内容本地化的工作方面，变化可能看起来会更激进一些。许多的英语区域外的内容本地化工作被中止了，其中的内容长久未更新或活跃人数太少都是可能的原因。在将来，我们希望有更好的机制，来管理这些内容的本地化工作。</p>
+
+<p>除了下面列出的地区，所有区域的内容本地化工作都被冻结了，也就意味着这些内容暂时不会开放编辑。所有可接受本地化编辑的内容，都由各自对应的志愿者小组负责管理。</p>
+
+<h2 id="Active_locales">活跃语言</h2>
+
+<div class="notecard note">
+<p><strong>提示</strong>：如果你有意向加入某语言的内容本地化工作，请联系下面这些小组中的成员，也可<a href="/zh-CN/docs/MDN/Contribute/Getting_started#step_4_ask_for_help">尝试寻求帮助</a>。语言名称后的标识与<a href="https://github.com/mdn/translated-content">Translated-content Repo</a>目录是对应的。</p>
+</div>
+
+<h3 id="Brazilian_Portuguese_pt-BR">巴西葡萄牙语（pt-BR）</h3>
+
+<ul>
+ <li>讨论组：<a href="https://t.me/mdn_l10n_pt_br">Telegram (MDN localization in Brazillian Portuguese)</a></li>
+ <li>目前的志愿者：<a href="https://github.com/lumigueres">Luisa Migueres</a>，<a href="https://github.com/juliosampaio">Julio Sampaio</a>，<a href="https://github.com/josielrocha">Josiel Rocha</a>，<a href="https://github.com/clovislima">Clóvis Lima Júnior</a></li>
+</ul>
+
+<h3 id="Chinese_zh-CN_zh-TW">汉语（zh-CN，zh-TW）</h3>
+
+<ul>
+ <li>讨论组：<a href="https://moztw.org/tg">Telegram (MozTW L10n channel)</a></li>
+ <li>目前的志愿者：<a href="https://github.com/irvin">Irvin</a>，<a href="https://github.com/t7yang">t7yang</a>，<a href="https://github.com/dibery">dibery</a></li>
+</ul>
+
+<h3 id="French_fr">法语（fr）</h3>
+
+<ul>
+ <li>讨论组：<a href="https://chat.mozilla.org/#/room/#l10n-fr:mozilla.org">Matrix (#l10n-fr channel)</a></li>
+ <li>目前的志愿者：<a href="https://github.com/SphinxKnight">SphinxKnight</a>，<a href="https://github.com/tristantheb">tristantheb</a>，<a href="https://github.com/JNa0">JNa0</a>，<a href="https://github.com/nicolas-goudry">nicolas-goudry</a>，<a href="https://github.com/LEMIBANDDEXARI">LEMIBANDDEXARI</a></li>
+</ul>
+
+<h3 id="Japanese_ja">日语（ja）</h3>
+
+<ul>
+ <li>讨论组：<a href="https://mozillajp.slack.com/">Slack (#translation channel)</a>，<a href="https://github.com/mozilla-japan/translation">GitHub (mozilla-japan)</a>，<a href="https://groups.google.com/forum/#!forum/mozilla-translations-ja">Google Group (Mozilla.translations.ja)</a></li>
+ <li>目前的志愿者：<a href="https://github.com/mfuji09">mfuji09</a>，<a href="https://github.com/hmatrjp">hmatrjp</a>，<a href="https://github.com/potappo">potappo</a>，<a href="https://github.com/dynamis">dynamis</a>，<a href="https://github.com/kenji-yamasaki">kenji-yamasaki</a></li>
+</ul>
+
+<h3 id="Korean_ko">韩语（ko）</h3>
+
+<ul>
+ <li>讨论组：<a href="https://open.kakao.com/o/gdfG288c">Kakao Talk (#MDN Korea)</a></li>
+ <li>目前的志愿者：<a href="https://github.com/hochan222">hochan222</a>，<a href="https://github.com/yechoi42">yechoi42</a>，<a href="https://github.com/cos18">cos18</a>，<a href="https://github.com/GwangYeol-Im">GwangYeol-Im</a>，<a href="https://github.com/pje1740">pje1740</a>，<a href="https://github.com/nKiNk">nKiNk</a>，<a href="https://github.com/yujo11">yujo11</a></li>
+</ul>
+
+<h3 id="Russian_ru">俄语（ru）</h3>
+
+<ul>
+ <li>讨论组：<a href="https://chat.mozilla.org/#/room/#mdn-l10n-ru:mozilla.org">Matrix (#mdn-l10n-ru channel)</a></li>
+ <li>目前的志愿者：<a href="https://github.com/armanpwnz">armanpwnz</a>，<a href="https://github.com/captainspring">captainspring</a>，<a href="https://github.com/mpstv">mpstv</a>，<a href="https://github.com/myshov">myshov</a>，<a href="https://github.com/Saionaro">Saionaro</a>，<a href="https://github.com/sashasushko">sashasushko</a>，<a href="https://github.com/lex111">lex111</a></li>
+</ul>
+
+<div class="notecard note">
+  <p><strong>提示</strong>：如果你想解冻某个语言的内容本地化工作，请先了解<a href="https://github.com/mdn/translated-content/blob/main/PEERS_GUIDELINES.md#activating-a-locale">解冻所需要的准备工作</a>。</p>
+</div>
+
+
+<h2 id="See_also">参考链接</h2>
+
+<ul>
+ <li><a href="https://hacks.mozilla.org/mdn-localization-update-february-2021/">MDN localization update, February 2021</a>——MDN 内容本地化工作的最新进展</li>
+ <li><a href="https://hacks.mozilla.org/an-update-on-mdn-web-docs-localization-strategy/">An update on MDN Web Docs’ localization strategy</a>——基于社群反馈的更新模式</li>
+ <li><a href="https://hacks.mozilla.org/mdn-web-docs-evolves-lowdown-on-the-upcoming-new-platform/">MDN Web Docs evolves! Lowdown on the upcoming new platform</a>——新平台的优势，以及为何本地化工作有所改变。</li>
+</ul>
diff --git a/files/zh-cn/mdn/structures/macros/commonly-used_macros/index.html b/files/zh-cn/mdn/structures/macros/commonly-used_macros/index.html
index 15252fc83a..313dbd3a22 100644
--- a/files/zh-cn/mdn/structures/macros/commonly-used_macros/index.html
+++ b/files/zh-cn/mdn/structures/macros/commonly-used_macros/index.html
@@ -2,213 +2,268 @@
 title: 常用的宏
 slug: MDN/Structures/Macros/Commonly-used_macros
 tags:
-  - CSS
-  - 参考
-  - 宏
-  - 结构
+- CSS
+- 参考
+- 宏
+- 结构
 translation_of: MDN/Structures/Macros/Commonly-used_macros
 original_slug: MDN/Structures/Macros/Custom_macros
 ---
 <div>{{MDNSidebar}}</div>
 
-<p><span class="seoSummary">本页列举了许多被创建用于 MDN 的通用宏。对于使用这些宏的基础信息，见<a href="/en-US/docs/MDN/Contribute/Content/Macros">使用宏</a>和<a href="/en-US/docs/MDN/Contribute/Editor/Links#Using_link_macros">使用链接宏</a>。</span>对于不常用的，只在特定上下文或不赞成使用的宏的信息，参见<a href="/en-US/docs/MDN/Contribute/Structures/Macros/Other">其它宏</a>。这里也有一份 <a href="/en-US/docs/templates">MDN 上所有宏的完整列表</a>。</p>
+<p><span class="seoSummary">本页列举了一些 MDN 中的常用宏命令。对于使用这些宏的入门信息，请阅读<a href="/zh-CN/docs/MDN/Contribute/Content/Macros">使用宏</a>这篇文章。</span>还有一些不常用或只在特定内容中适用，以及一些不赞成使用的宏的信息，参见<a href="/zh-CN/docs/MDN/Contribute/Structures/Macros/Other">其它宏</a>。在我们的 GitHub Repo 中，可以找到<a href="https://github.com/mdn/yari/tree/master/kumascript/macros">MDN 上所有宏的完整列表</a>。</p>
 
-<p>对于适合你使用的样式，另见 <a href="/en-US/docs/MDN/Contribute/Guidelines/CSS_style_guide">CSS 样式指南</a>。</p>
+<p>对于调整页面样式相关的宏，另见 <a href="/zh-CN/docs/MDN/Contribute/Guidelines/CSS_style_guide">CSS 样式指南</a>。</p>
 
-<h2 id="链接">链接</h2>
+<h2 id="Linking">链接</h2>
 
-<h3 id="创建一个单独的超链接">创建一个单独的超链接</h3>
+<p>为了简化一些常见超链接的创建工作——如指向站内的技术参考页面、术语库以及其他主题的链接——我们提供了丰富的宏来完成这些工作</p>
 
-<p id="To_another_MDN_page_or_its_section_(anch_SectionOnPage_manch_Link_LinkItem_LinkItemDL)">通常来说，你不需要使用宏来创建任意的链接。使用编辑器界面上的<strong>链接</strong>按钮创建链接。</p>
+<p>我们推荐使用宏来创建这些常见的链接，这样不但简洁，对翻译工作也很友好——使用宏创建的术语库和技术参考链接不需要翻译者再做处理，这些宏可提供正确的链接，使其符合当前页面的语言。</p>
 
-<ul>
- <li>{{TemplateLink("Glossary")}} 宏创建一个链接指向 MDN <a href="/en-US/docs/Glossary">术语汇编（glossary）</a>里的一个具体的术语词条。这个宏接受一个必须的和两个可选的参数：
-
-  <ol>
-   <li>术语的名称（比如 "HTML"）。</li>
-   <li>代替术语名称显示在文章中的文本（此项应当尽可能少地使用）。{{optional_inline}}</li>
-   <li>如果这个参数是明确的并且是非零的，一般用于术语汇编链接的自定义样式将不适用。{{optional_inline}}</li>
-  </ol>
+<h3 id="Glossayr_links">链接到术语库</h3>
 
-  <p>示例：</p>
+<p>正如{{TemplateLink("Glossary")}}这个宏的名字所示，它可用于创建指向 MDN 中<a
+    href="/zh-CN/docs/Glossary">术语库</a>内一个具体词条的链接。调用这个宏时，有一个必需的参数和一个可选参数。</p>
 
+<ol>
+  <li>术语的名字，比如“HTML”。
+    <ul>
+      <li><code>\{{Glossary("HTML")}}</code>会指向{{Glossary("HTML")}}。</li>
+    </ul>
+  </li>
+  <li>可选参数：使用参数中的文本内容，替代术语的名字显示在页面中。</li>
   <ul>
-   <li>\{{Glossary("HTML")}} 生成 {{Glossary("HTML")}}</li>
-   <li>\{{Glossary("CSS", "Cascading Style Sheets")}} 生成 {{Glossary("CSS", "Cascading Style Sheets")}}</li>
-   <li>\{{Glossary("HTML", "", 1)}} 生成 {{Glossary("HTML", "", 1)}}</li>
+    <li><code>\{{Glossary("CSS", "Cascading Style Sheets")}}</code>会指向{{Glossary("CSS", "Cascading Style Sheets")}}。
+    </li>
   </ul>
- </li>
-</ul>
+</ol>
 
-<h3 id="链接到参考文档页面">链接到参考文档页面</h3>
+<h3 id="Links_to_in-page_sections">链接到页内章节</h3>
 
-<p>有各种宏用来链接到 MDN 上特定参考区域里的页面。</p>
+<p>{{TemplateLink("anch")}} 可用于创建指向当前文章中其他小节的链接。它和 Glossary 有一个相同作用的可选参数可在翻译时使用。</p>
 
 <ul>
- <li>{{TemplateLink("cssxref")}} 链接到 <a href="/en-US/docs/CSS_Reference" title="en-US/docs/CSS_Reference">CSS 参考</a>里的一个页面。<br>
-  示例： <code>\{{cssxref("cursor")}}</code>，显示为：{{ cssxref("cursor") }} 。</li>
- <li>{{TemplateLink("domxref")}} 链接到 DOM 参考里的页面；如果你在结尾列入了圆括号，这个模板会像一个函数名那样显示这个链接。例如，<span class="plain"><span class="nowiki">\{{domxref("document.getElementsByName()")}}</span></span> 显示为 {{ domxref("document.getElementsByName()") }} <code>而 \{\{domxref("Node")\}\}</code> 显示为 {{ domxref("Node") }} 。</li>
- <li>{{TemplateLink("event")}} 链接到 DOM 事件参考，例如：\{{event("change")}} 显示为 {{event("change")}} 。</li>
- <li>{{TemplateLink("HTMLElement")}} 链接到 HTML 参考里的一个 HTML 元素。</li>
- <li>{{TemplateLink("htmlattrxref")}} 链接到一个 HTML 属性。如果你只指定属性名，它将是一个全局属性的描述。如果你指定一个属性名和一个元素名，它将是一个具体元素的一个属性名。例如，<code>\{\{htmlattrxref("lang")\}\} </code>将创建链接：{{htmlattrxref("lang")}} 。<code>\{\{htmlattrxref("type","input")\}\}</code> 将创建链接：{{htmlattrxref("type","input")}} 。</li>
- <li>{{TemplateLink("jsxref")}} 链接到 <a href="/en-US/docs/Web/JavaScript/Reference" title="en-US/docs/Web/JavaScript/Reference">JavaScript 参考</a>里的一个页面。</li>
- <li>{{TemplateLink("SVGAttr")}} 链接到一个特定的 SVG 属性。例如，<code>\{\{SVGAttr("d")\}\}</code> 创建这样的链接： {{SVGAttr("d")}} 。</li>
- <li>{{TemplateLink("SVGElement")}} 链接到 SVG 参考里的一个 SVG 元素。</li>
+  <li><code>\{{anch("Linking to pages in references","链接到 MDN 的参考文档页面")}}</code></li>
+  <li>
+    <p>实际效果：{{anch("Linking to pages in references","链接到 MDN 的参考文档页面")}}</p>
+  </li>
 </ul>
 
-<h3 id="链接到漏洞和互联网中继聊天（IRC）">链接到漏洞和互联网中继聊天（IRC）</h3>
+<h3 id="Linking_to_pages_in_references">链接到 MDN 的参考文档页面</h3>
+
+<p>下面列出的宏可链接到 MDN 站内不同技术领域的参考文档，如 Javascript,、CSS、HTML、elements、SVG 等。</p>
+
+<P>这些宏都很容易上手，大多数情况下只需一个参数——所涉及的 Web 组件的名字（如标签、对象、方法、属性等的名字）。在{{anch("Glossayrlinks","术语库")}}中提到的，可修改实际显示的文本的可选参数，也存在于下面大多数宏中。如果你想了解其他参数，表格中最左列的链接中可以查看相关宏的文档。</P>
+
+<table class="standard-table">
+  <thead>
+    <tr>
+      <th>宏</th>
+      <th>所归属的主题页面</th>
+      <th>示例</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>{{TemplateLink("CSSxRef")}}</td>
+      <td><a href="/zh-CN/docs/Web/CSS/Reference">CSS 参考文档</a> (/Web/CSS/Reference)</td>
+      <td><code>\{{CSSxRef("cursor")}}</code>会指向{{CSSxRef("cursor")}}.</td>
+    </tr>
+    <tr>
+      <td>{{TemplateLink("DOMxRef")}}</td>
+      <td><a href="/zh-CN/docs/Web/API">DOM 参考文档</a> (/Web/API)</td>
+      <td><code>\{{DOMxRef("Document")}}</code>或<code>\{{DOMxRef("document")}}</code>都指向{{DOMxRef("Document")}}。<br>
+        <code>\{{DOMxRef("document.getElementsByName()")}}</code>会指向{{DOMxRef("document.getElementsByName()")}}<br>
+        <code>\{{DOMxRef("Node")}}</code>会指向{{DOMxRef("Node")}}. <br>
+        你可以使用第二个参数控制在页面上实际显示的文本：<code>\{{DOMxRef("document.getElementsByName()","getElementsByName()")}}</code>会生成{{DOMxRef("document.getElementsByName()","getElementsByName()")}}
+      </td>
+    </tr>
+    <tr>
+      <td>{{TemplateLink("HTMLElement")}}</code>
+      </td>
+      <td><a href="/zh-CN/docs/Web/HTML/Element">HTML 元素参考文档</a> (/Web/HTML/Element)</td>
+      <td><code>\{{HTMLElement("select")}}</code>会指向{{HTMLElement("select")}}</td>
+    </tr>
+    <tr>
+      <td>{{TemplateLink("HTMLAttrxRef")}}</td>
+      <td>如果只指明了属性的名字，链接会跳转到 <a href="/zh-CN/docs/Web/HTML/Global_attributes">HTML 全局属性</a>页面对应属性的位置。<br/>如果同时指明 HTML 元素和属性名，则会跳转到元素页面下对应属性的位置。</td>
+      <td>
+        <code>\{{HTMLAttrxRef("lang")}} </code>会指向{{HTMLAttrxRef("lang")}}.<br /><code>\{{HTMLAttrxRef("type","input")}}</code>生成的链接则会跳转到{{HTMLElement("input")}}元素页面下的{{HTMLAttrxRef("type","input")}}属性。
+      </td>
+    </tr>
+    <tr>
+      <td>{{TemplateLink("JSxRef")}}</td>
+      <td><a href="/zh-CN/docs/Web/JavaScript/Reference">JavaScript 参考文档</a>（/Web/JavaScript/Reference）.</td>
+      <td><code>\{{JSxRef("Promise")}}</code>会指向{{JSxRef("Promise")}}</td>
+    </tr>
+    <tr>
+      <td>{{TemplateLink("SVGAttr")}}</td>
+      <td><a href="/zh-CN/docs/Web/SVG/Attribute">SVG 属性参考</a> (/Web/SVG/Attribute).</td>
+      <td><code>\{{SVGAttr("d")}}</code>会指向{{SVGAttr("d")}}</td>
+    </tr>
+    <tr>
+      <td>{{TemplateLink("SVGElement")}}</td>
+      <td><a href="/zh-CN/docs/Web/SVG/Element">SVG 元素参考</a> (/Web/SVG/Element).</td>
+      <td><code>\{{SVGElement("view")}}</code>会指向{{SVGElement("view")}}</td>
+    </tr>
+    <tr>
+      <td>{{TemplateLink("HTTPHeader")}}</td>
+      <td><a href="/zh-CN/docs/Web/HTTP/Headers">HTTP 消息头</a> (/Web/HTTP/Headers).</td>
+      <td><code>\{{HTTPHeader("ACCEPT")}}</code>会指向{{HTTPHeader("ACCEPT")}}</td>
+    </tr>
+    <tr>
+      <td>{{TemplateLink("HTTPMethod")}}</td>
+      <td><a href="/zh-CN/docs/Web/HTTP/Methods">HTTP 请求方法</a> (/Web/HTTP/Methods).</td>
+      <td><code>\{{HTTPMethod("HEAD")}}</code>会指向{{HTTPMethod("HEAD")}}</td>
+    </tr>
+    <tr>
+      <td>{{TemplateLink("HTTPStatus")}}</td>
+      <td><a href="/zh-CN/docs/Web/HTTP/Status">HTTP 响应代码</a> (/Web/HTTP/Status)</td>
+      <td><code>\{{HTTPStatus("404")}}</code>会指向{{HTTPStatus("404")}}</td>
+    </tr>
+    <tr>
+      <td>{{TemplateLink("event")}}</td>
+      <td><a href="/zh-CN/docs/Web/Events">事件参考</a> (/Web/Events)</td>
+      <td>
+        <div class="notecard note">
+          <h4>注意</h4>
+          <p>因为事件关联在具体的元素下，这个宏不是特别有用。例如想指向 wheel 事件的页面，需要使用
+            <code>\{{DOMxRef("Document.wheel_event")}}</code>：{{DOMxRef("Document.wheel_event")}}
+          </p>
+        </div>
+      </td>
+    </tr>
+  </tbody>
+</table>
+
+<h3 id="Linking_to_bugs">关联到某个 Bug</h3>
 
 <ul>
- <li>漏洞
-  <ul>
-   <li>通过使用下面的语法 {{TemplateLink("bug")}} 可以让你轻松地链接到 bugzilla.mozilla.org 上的一个漏洞（页面）：<code>\{\{Bug(123456)\}\}</code> 。这将显示：{{ Bug(123456) }} 。</li>
-   <li>{{TemplateLink("WebkitBug")}} 插入一条指向 WebKit 漏洞数据库中一个漏洞的链接。例如：<code>\{\{WebkitBug(31277)\}\}</code> 插入 {{ WebkitBug(31277) }} 。</li>
-  </ul>
- </li>
- <li>{{TemplateLink("IRCLink")}} 插入一条指向特定 IRC 频道的链接，它带有一个提示框标明它是做什么的以及它需要一个 IRC 客户端。</li>
+  <li>Bugs
+    <ul>
+      <li>通过编号，{{TemplateLink("bug")}}宏可以指向<a href="bugzilla.mozilla.org">bugzilla.mozilla.org</a>站内相应的 bug，<code>\{{Bug(123456)}}</code>会指向{{Bug(123456)}}.
+      </li>
+      <li>类似的，{{TemplateLink("WebkitBug")}}宏同样可以借助编号，指向 WebKit bug 库里对应的 bug。例如，<code>\{{WebkitBug(31277)}}</code>会指向{{WebkitBug(31277)}}.
+      </li>
+    </ul>
+  </li>
 </ul>
 
-<h3 id="用于多页面指南的导航帮助">用于多页面指南的导航帮助</h3>
+<h3 id="Navigation_aids_for_multi-page_guides">多页面间的导航栏</h3>
 
-<p>{{TemplateLink("Previous")}}，{{TemplateLink("Next")}}，和 {{TemplateLink("PreviousNext")}} 提供导航控制用于序列中的部分文章。对于单向模板，唯一需要的参数是序列中前一篇或后一篇文章的维基（wiki）地址。对于 {{TemplateLink("PreviousNext")}}，需要两个适当的文章地址作为参数。第一个参数用于前一篇文章，而第二个用于后一篇文章。</p>
+<p>
+  {{TemplateLink("Previous")}}、{TemplateLink("Next")}}、{{TemplateLink("PreviousNext")}}、{{TemplateLink("PreviousMenuNext")}}这几个宏可以在页面中创建导航栏，帮助读者按照文章的先后顺序阅读。其中的参数需要填入目标页面在 MDN 中的位置，你可以在页面的网址中找到所需的信息。例如 <a href="/zh-CN/docs/Learn/JavaScript/Objects/Inheritance">JavaScript 中的继承</a>这个页面，链接地址为“https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript/Objects/Inheritance”，那么它在 MDN 中的位置就可以用<code>Learn/JavaScript/Objects/Object_prototypes</code>描述。</p>
 
-<h2 id="代码示例">代码示例</h2>
+<h2 id="Code_samples">代码示例</h2>
 
-<h3 id="实样">实样</h3>
+<h3 id="Live_samples">动态示例</h3>
 
 <ul>
- <li>{{TemplateLink("EmbedLiveSample")}} 让你嵌入一个如<a href="/en-US/docs/MDN/Contribute/Structures/Live_samples">实样（Live samples）</a>中描述的代码示例结果到页面上。</li>
- <li>{{TemplateLink("LiveSampleLink")}} 创建一个链接指向一个包含（当前）页面上如<a href="/en-US/docs/MDN/Contribute/Structures/Live_samples">实样</a>中描述的代码示例结果。</li>
+  <li>{{TemplateLink("EmbedLiveSample")}} 可嵌入一个在<a href="/zh-CN/docs/MDN/Contribute/Structures/Live_samples">动态示例</a>中描述的代码示例，到当前页面上。</li>
+  <li>{{TemplateLink("LiveSampleLink")}} 创建一个页面链接，其中包含如<a href="/zh-CN/docs/MDN/Contribute/Structures/Live_samples">动态示例</a>中描述的示例的结果。</li>
+  <li>{{TemplateLink("EmbedGHLiveSample")}} 提供了一种新的动态示例编写和使用方式，你可以在<a href="/zh-CN/docs/MDN/Structures/Code_examples#github_live_samples">Github动态示例</a>中了解更多信息。</li>
 </ul>
 
-<h3 id="附上的示例文件">附上的示例文件</h3>
+<h2 id="Sidebar_generation">添加侧边栏组</h2>
 
-<ul>
- <li>{{TemplateLink("Embed_text")}} 模板允许你嵌入一份附加的文本文件到你的文章主体部分中。这将有助于你让代码段既可下载又能显示在文章内容中。你可以为语法高亮选择地指定一种语言。如果你不指定一种（语言），该文本将无格式化嵌入。第一个参数是被嵌入附件的文件名；第二个（参数），如果支持的话，是用于语法高亮的语言，比如 "javascript", "svg" 或 "cpp" 。</li>
- <li>{{TemplateLink("EmbedSVG")}} 嵌入一个附带 XML 文件作为一张 SVG 图像到页面当中。指定附带的 SVG 文件的文件名。你可以和 {{TemplateLink("Embed_text")}} 一同使用来展示源码和相同文件的渲染输出。</li>
-</ul>
-
-<h2 id="侧边栏组">侧边栏组</h2>
-
-<p>There templates for almost every large collection of pages. 它们通常链接回参考/指南/教程的主页面（这经常被需要，因为我们的面包屑有时做不到这样）并把文章放入适当的类别中。</p>
+<p>一些有海量子条目的主题，比如技术参考、指南、教程等，通常需要一个单独的主页面提供导航。对于这些主题中的页面，顶部的面包屑导航就显得比较简陋，下面这些模板，可以在页面的左侧，生成对应主题的侧边导航栏。</p>
 
 <ul>
- <li>{{TemplateLink("CSSRef")}} 生成 CSS 参考页面的侧边栏。</li>
- <li>{{TemplateLink("HTMLRef")}} 生成 HTML 参考页面的侧边栏。</li>
- <li>{{TemplateLink("APIRef")}} 生成 Web API 参考页面的侧边栏。</li>
+  <li>{{TemplateLink("CSSRef")}} 生成 CSS 参考页面的侧边栏。</li>
+  <li>{{TemplateLink("HTMLRef")}} 生成 HTML 参考页面的侧边栏。</li>
+  <li>{{TemplateLink("APIRef")}} 生成 Web API 参考页面的侧边栏。</li>
 </ul>
 
-<p>（译者注：通过在 background-color 页面测试，编辑页面中 "Summary" 上一行的 {{CSSRef}} 用于生成页面左侧的 CSS 参考链接的侧边栏）</p>
-
-<h2 id="通用格式化">通用格式化</h2>
+<h2 id="General-purpose_formatting">通用的文章格式化工具</h2>
 
-<h3 id="API_文档的行内指示器">API 文档的行内指示器</h3>
+<h3 id="Inline_indicators_for_API_documentation">API 文档的行内指示器</h3>
 
-<p>{{TemplateLink("optional_inline")}} 和 {{TemplateLink("ReadOnlyInline")}} 被用于 API 文档，通常当描述一个对象的属性或一个函数的参数的列表。</p>
+<p>{{TemplateLink("optional_inline")}} 和 {{TemplateLink("ReadOnlyInline")}} 被用于 API 文档，通常可以用来描述一个对象的属性是只读的或一个函数的参数是可省略的。
+</p>
 
-<p>用法: <code>\{{optional_inline()}}</code> 或 <code>\{{ReadOnlyInline()}} 。</code>示例：</p>
+<p>用法: <code>\{{optional_inline}}</code> 或 <code>\{{ReadOnlyInline}} 。</code>示例：</p>
 
 <dl>
- <dt><code>isCustomObject</code> {{ReadOnlyInline()}}</dt>
- <dd>如果为真，指示该对象是一个自定义对象。</dd>
- <dt>parameterX {{ optional_inline() }}</dt>
- <dd>Blah blah blah...</dd>
+  <dt><code>isCustomObject</code> {{ReadOnlyInline}}</dt>
+  <dd>如果此项值为 <code>true</code>，表明该对象是一个自定义对象。</dd>
+  <dt>某项参数{{optional_inline}}</dt>
+  <dd>参数描述</dd>
 </dl>
 
-<h2 id="状态和兼容性指示器">状态和兼容性指示器</h2>
+<h2 id="Status_and_compatibility_indicators">状态和兼容性指示器</h2>
 
-<h3 id="没有附加参数的行内指示器">没有附加参数的行内指示器</h3>
+<h3 id="Inline_indicators_with_no_additional_parameters">无需参数的行内指示器</h3>
 
-<h4 id="非标准的">非标准的</h4>
+<h4 id="Non-standard">非标准</h4>
 
-<p>{{TemplateLink("non-standard_inline")}} 插入一个行内标记指示当前 API 还没有被标准化，并且不在一个标准行径上。</p>
+<p>{{TemplateLink("non-standard_inline")}} 指示当前 API 还没有被标准化，也没有进入标准化议程。</p>
 
-<h5 id="语法"><strong>语法</strong></h5>
+<h5 id="Syntax"><strong>语法</strong></h5>
 
 <p><code>\{{non-standard_inline}}</code></p>
 
-<h5 id="示例">示例</h5>
+<h5 id="Examples">示例</h5>
 
 <ul>
- <li>图标：{{non-standard_inline}}</li>
+  <li>图标：{{non-standard_inline}}</li>
 </ul>
 
-<h4 id="实验性的">实验性的</h4>
+<h4 id="Experimental">实验性的</h4>
 
-<p>{{TemplateLink("experimental_inline")}} 插入一个行内标记指示当前 API 没有被广泛地实现，并且在以后可能会改变。</p>
+<p>{{TemplateLink("experimental_inline")}} 指示当前 API 没有被广泛支持，且将来可能会有所修改。</p>
 
-<h5 id="语法_2">语法</h5>
+<h5 id="Syntax_2">语法</h5>
 
 <p><code>\{{experimental_inline}}</code></p>
 
-<h5 id="示例_2"><code>示例</code></h5>
+<h5 id="Examples_2"><code>示例</code></h5>
 
 <ul>
- <li>图标：{{experimental_inline}}</li>
+  <li>图标：{{experimental_inline}}</li>
 </ul>
 
-<h3 id="提供明确技术的指示器">提供明确技术的指示器</h3>
-
-<p>在这些宏当中，其参数（在明确规定下）应该是 "html", "js", "css" 或 "gecko" 当中的一个字符串，其后跟着版本号。</p>
+<h3 id="Inline_indicators_that_support_specifying_the_technology">代表明确技术参考的行内指示器</h3>
 
-<h4 id="不赞成的">不赞成的</h4>
+<h4 id="Deprecated">不赞成的</h4>
 
-<p>{{TemplateLink("deprecated_inline")}} 插入一个不赞成的行内标记来劝阻一个官方不赞成的 API 的使用。<strong>注意：</strong>“不赞成的”表示该项不该再被使用，但是仍然可用。如果你想表示它不再起作用了，使用术语“已废弃”。</p>
+<p>{{TemplateLink("deprecated_inline")}}会插入一个带有“不赞成”的行内指示器，即{{Deprecated_Inline}}。这表示不鼓励使用该 API ，或其已经被移除。</p>
 
-<p>不要在任何浏览器不可知的区域（ HTML, APIs, JS, CSS, … ）内使用参数。</p>
+<h5 id="Syntax_3">语法</h5>
 
-<h5 id="语法_3">语法</h5>
+<p><code>\{{deprecated_inline}}</code>></p>
 
-<p><code>\{{deprecated_inline}}</code> <code>或 \{{deprecated_inline("gecko5")}}</code></p>
-
-<h5 id="示例_3">示例</h5>
+<h5 id="Examples_3">示例</h5>
 
 <ul>
- <li>图标：{{deprecated_inline}}</li>
- <li>徽标：{{deprecated_inline("gecko5")}}</li>
+  <li>图标：{{deprecated_inline}}</li>
 </ul>
 
-<h4 id="已废弃的">已废弃的</h4>
-
-<p>{{TemplateLink("obsolete_inline")}} 插入一个已废弃的行内标记来阻止使用，比如正式废弃的一个函数，方法或属性。</p>
+<h3 id="Page_or_section_header_indicators">页面或章节头部的指示器</h3>
 
-<p>不要在任何浏览器不可知的区域（ HTML, APIs, JS, CSS, … ）内使用参数。</p>
+<p>下列指示器的含义，类似于上述的内联指示器。这些组件应直接放置在技术参考页面的标题（或面包屑导航栏）下，也可以用于标记页面上的某个小节。</p>
 
-<h5 id="语法_4">语法</h5>
+<ul>
+  <li>{{TemplateLink("non-standard_header")}}语法：<code>\{{Non-standard_header()}}</code> {{ Non-standard_header}}</li>
 
-<p><code>\{{obsolete_inline}}</code> 或<code> \{{obsolete_inline("js1.8.5")}}</code></p>
+  <li>{{TemplateLink("SeeCompatTable")}} 对于一些介绍<a href="/zh-CN/docs/MDN/Guidelines/Conventions_definitions#experimental">实验性功能</a>的内容，应当在这些内容前放置此指示器。语法：<code>\{{SeeCompatTable}}</code> {{SeeCompatTable()}}</li>
 
-<h5 id="示例_4">示例</h5>
+  <li>{{TemplateLink("deprecated_header")}}: <code>\{{deprecated_header()}}</code> {{ Deprecated_header() }}</li>
 
-<ul>
- <li>图标：{{obsolete_inline}}</li>
- <li>徽标：{{obsolete_inline("js1.8.5")}}</li>
+  <li>{{TemplateLink("secureContext_header")}}: <code>\{{SecureContext_Header}}</code> {{SecureContext_Header}}</li>
 </ul>
 
-<h3 id="模板徽标">模板徽标</h3>
+<h3 id="Indicating_that_a_feature_is_available_in_web_workers">指示一个功能在 web workers 中可用</h3>
 
-<p>这些宏大多数被用于 <a href="/en-US/docs/WebAPI">WebAPI</a> 页面。见 {{anch("Creating new badges")}} 关于创建一个新徽标的信息。</p>
+<p> {{TemplateLink("AvailableInWorkers")}} 宏插入一个本地化的指示框，指示一个功能在<a href="/zh-CN/docs/Web/API/Web_Workers_API">Web worker</a>上下文中可用。它还有一个可选参数，当带有<code>notservice</code>时，表示该功能在 web worker 中可用但在 servcie worker 中不可用。</p>
 
-<h3 id="页面或区域标头指示">页面或区域标头指示</h3>
+<h5 id="Syntax_4">语法</h5>
 
-<p>这些模板与上述内联模板具有相同的语义。 模板应直接放置在参考页面的主页标题（或面包屑导航，如果可用）的下面。 它们也可以用于标记页面上的某个部分。</p>
-
-<ul>
- <li>{{TemplateLink("non-standard_header")}}: <code>\{{Non-standard_header()}}</code> {{ Non-standard_header() }}</li>
- <li>{{TemplateLink("SeeCompatTable")}} 应该被放置在介绍实验性功能或兼容性的区域。 示例: <code>\{{SeeCompatTable()}}</code> {{ SeeCompatTable() }}</li>
- <li>{{TemplateLink("deprecated_header")}}: <code>\{{deprecated_header()}}</code> {{ Deprecated_header() }}</li>
- <li>{{TemplateLink("deprecated_header")}} 搭配变量: <code>\{{deprecated_header("gecko5")}}</code> {{ Deprecated_header("gecko5") }} 不要在与浏览器无关的任何区域中使用该参数 (HTML, APIs, JS, CSS, …).</li>
- <li>{{TemplateLink("obsolete_header")}}: <code>\{{obsolete_header()}}</code> {{ Obsolete_header() }}</li>
- <li>{{TemplateLink("obsolete_header")}} 搭配变量: <code>\{{obsolete_header("gecko30")}}</code> {{ Obsolete_header("gecko30") }} 不要在与浏览器无关的任何区域中使用该参数 (HTML, APIs, JS, CSS, …).</li>
- <li>{{TemplateLink("secureContext_header")}}: <code>\{{SecureContext_Header}}</code> {{SecureContext_Header}}</li>
-</ul>
+<p>\{{AvailableInWorkers}}
+  \{{AvailableInWorkers("notservice")}}</p>
 
-<h3 id="指示一个功能在Web_workers中可用">指示一个功能在Web workers中可用</h3>
+<h5 id="Examples_5">Examples</h5>
 
-<p> {{TemplateLink("AvailableInWorkers")}} 宏插入一个本地化的指示框，指示一个功能在<a href="/en-US/docs/Web/API/Web_Workers_API">Web worker</a> 上下文中可用。</p>
-
-<ol>
-</ol>
-
-<ol>
-</ol>
+<div>{{AvailableInWorkers}}
+  {{AvailableInWorkers("notservice")}}
+</div>
diff --git a/files/zh-cn/mdn/structures/macros/index.html b/files/zh-cn/mdn/structures/macros/index.html
index 4227374bac..67cd0470bd 100644
--- a/files/zh-cn/mdn/structures/macros/index.html
+++ b/files/zh-cn/mdn/structures/macros/index.html
@@ -11,17 +11,17 @@ translation_of: MDN/Structures/Macros
 ---
 <div>{{MDNSidebar}}</div>
 
-<p><span class="seoSummary">为了自动化执行某些工作，<a href="/zh-CN/docs/MDN/Yari">Yari</a> 平台提供了一个强大的宏系统——<a href="/zh-CN/docs/MDN/Tools/KumaScript">KumaScript</a>。本文提供了一些相关信息，方便你在参与编辑 MDN 时，使用这些宏。</span></p>
+<p><span class="seoSummary">为了自动化执行某些工作，<a href="/zh-CN/docs/MDN/Yari">Yari</a> 平台提供了一个强大的宏系统——<a href="/zh-CN/docs/MDN/Tools/KumaScript">KumaScript</a>。本文提供了一些相关信息，方便你在参与编辑 MDN 时使用这些宏。</span></p>
 
-<p>本文只是简要介绍了 KumaScript，<a href="/zh-CN/docs/MDN/Kuma/KumaScript_guide" title="/zh-CN/docs/MDN/Kuma/KumaScript_guide">KumaScript 指南</a>提供了更深入的内容，帮助你使用和掌握它。</p>
+<p>本文只是简要介绍了相关内容，<a href="/zh-CN/docs/MDN/Tools/KumaScript">KumaScript 指南</a>提供了更深入的内容。</p>
 
 <h2 id="How_macros_are_implemented">宏是如何实现的</h2>
 
-<p>MDN 使用宏是基于运行于服务器上的 JavaScript 代码实现的，并由 <a href="http://nodejs.org/">Node.js</a> 解释执行。在此之上，已经实现了一个丰富的工具库，让宏可以与这个平台及其中的内容进行互动。</p>
+<p>MDN 使用的宏基于运行于服务器上的 JavaScript 代码来实现，并由 <a href="http://nodejs.org/">Node.js</a> 解释执行。在此之上，已经实现了一个丰富的工具库，让宏可以与这个平台以及其中的内容进行交互。</p>
 
 <h2 id="Using_a_macro_in_content">在文章中使用宏</h2>
 
-<p>要实际使用宏，只需将对宏的调用和可能需要的参数写在一对双括号中，如下：</p>
+<p>要在文章中实际使用宏，只需将对宏的调用和可能需要的参数写在一对双括号中，如下：</p>
 
 <pre class="notranslate">\{{macroname(parameter-list)}}</pre>
 
@@ -30,13 +30,13 @@ translation_of: MDN/Structures/Macros
 <ul>
  <li>宏的名称区分大小写，但一些常见的大小写错误也可以在执行时被纠正。比如将某个名称中含有大写的宏，全部使用小写字母，或者将某些名字以小写开头的宏大写。</li>
  <li>参数以逗号分隔。</li>
- <li>如果没有参数，括号可以省略：<code>\{{macroname()}}</code> 和 <code>\{{macroname}}</code> 的效果是。</li>
- <li>数字参数可以是引号，也可以不是。这取决于您（但是，像版本号这类可能被识别成小数的参数，则包含在引号中）</li>
+ <li>如果没有参数，括号可以省略：<code>\{{macroname()}}</code> 和 <code>\{{macroname}}</code> 的作用是相同的。</li>
+ <li>数字参数是否放在引号中，一般没有区别。但是，像版本号（如1.2.3）这类可能被识别成小数的参数，则需包含在引号中。</li>
  <li>如果遇到错误，请先仔细检查代码。如果仍然无法弄清楚发生了什么，请参阅<a href="/zh-CN/docs/MDN/Tools/KumaScript/Troubleshooting">排查 KumaScript 中的错误</a>以获取帮助。</li>
 </ul>
 
-<p>宏的几乎所有执行结果都会被缓存，以便被重用来加快执行速度。这意味着宏仅在输入发生变化时才实际运行，包括调用时的参数以及环境值（例如这个宏被调用时所在的路径）。</p>
+<p>宏的几乎所有执行结果都会被缓存，以便被重用并加快执行速度。这意味着宏仅在输入发生变化时才实际运行，包括调用时的参数以及环境值（例如调用这个宏的文章所在的路径）。</p>
 
-<p>宏既可以用来做一些简单的工作，比如插入更大的文本块或从MDN的另一部分交换内容一样简单，也可以通过搜索站点的各个部分，设置输出样式和添加链接来构建整个内容索引。</p>
+<p>宏既可以用来做一些简单的工作，比如插入更大的文本块或用 MDN 的替换文章中的内容。也可以通过搜索站点的各个部分，设置输出样式和添加链接来构建整个内容索引。</p>
 
-<p>您可以在<a href="/zh-CN/docs/MDN/Contribute/Structures/Macros/Commonly-used_macros">常用的宏</a>页面看到一些我们最常用到的宏，还可以在我们 Github 的仓库中，浏览<a href="https://github.com/mdn/yari/tree/master/kumascript/macros">所有可用的宏</a>。大多数宏顶部的注释中，都有内置的文档帮助你了解它的作用。</p>
+<p>你可以在<a href="/zh-CN/docs/MDN/Contribute/Structures/Macros/Commonly-used_macros">常用的宏</a>页面看到一些我们最常用到的宏，还可以在我们 Github 的仓库中，浏览<a href="https://github.com/mdn/yari/tree/master/kumascript/macros">所有可用的宏</a>。大多数宏顶部的注释中，都有内置的文档帮助你了解它的作用。</p>
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/internationalization/index.html b/files/zh-cn/mozilla/add-ons/webextensions/internationalization/index.html
index 88971977ae..501af7897a 100644
--- a/files/zh-cn/mozilla/add-ons/webextensions/internationalization/index.html
+++ b/files/zh-cn/mozilla/add-ons/webextensions/internationalization/index.html
@@ -13,7 +13,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/Internationalization
 
 <h2 id="剖析一个国际化的_WebExtension">剖析一个国际化的 WebExtension</h2>
 
-<p>一个国际化的 WebExtension 与其他 WebExtension 一样可以包含各类功能，如<a href="/en-US/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#Background_scripts">后台脚本</a>、<a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Content_scripts">内容脚本</a>等，但它也有些额外的部分，从而允许它适应不同的语言区域。目录树大致如下：</p>
+<p>一个国际化的 WebExtension 与其他 WebExtension 一样可以包含各类功能，如<a href="/zh-CN/docs/Mozilla/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#后台脚本">后台脚本</a>、<a href="/zh-CN/docs/Mozilla/Add-ons/WebExtensions/Content_scripts">内容脚本</a>等，但它也有些额外的部分，从而允许它适应不同的语言区域。目录树大致如下：</p>
 
 <ul class="directory-tree">
  <li>webextension-根目录/
@@ -65,7 +65,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/Internationalization
 <h2 id="在__locales_中提供本地化的字符串">在 _locales 中提供本地化的字符串</h2>
 
 <div class="pull-aside">
-<div class="moreinfo">你可以使用<a href="http://r12a.github.io/apps/subtags/">Language subtag lookup page</a>上的查找工具查询语言子标签。请注意，你需要搜索语言的英语名称。</div>
+<div class="moreinfo">你可以使用<a href="https://r12a.github.io/app-subtags/">Language subtag lookup page</a>上的查找工具查询语言子标签。请注意，你需要搜索语言的英语名称。</div>
 </div>
 
 <p>每个 i18n 系统都需要你提供想支持的各语言区域的已翻译字符串。 在 WebExtensions 中，这些字符串放在一个名为 <code>_locales</code> 的目录中，<code>_locales</code> 目录则位于扩展的根目录。每个语言区域都有一个名叫 <code>messages.json</code> 的文件，其中包含相应的字符串（在 WebExtension 中称作“消息”），这个文件放在 <code>_locales</code> 的子目录下，子目录以对应语言区域的语言子标签来命名。</p>
@@ -303,8 +303,13 @@ var content = browser.i18n.getMessage("notificationContent", message.url);</pre>
  <tbody>
   <tr>
    <td><code>@@extension_id</code></td>
-   <td>扩展或应用的 ID；你可以使用该字符串构建 URL，用于扩展内部的资源。甚至未本地化的扩展也可以使用该消息。<br>
-    <strong>注意：</strong>该消息无法在 manifest 文件中使用。</td>
+   <td>
+    <p>扩展的 UUID。你可以使用该字符串构建 URL，用于扩展内部的资源。甚至未本地化的扩展也可以使用该消息。</p>
+
+    <p>该消息无法在 manifest 文件中使用。</p>
+
+    <p>此外，此 ID <em>不是</em> {{WebExtAPIRef("runtime.id")}} 返回的附加组件 ID，附加组件 ID 可以使用 manifest.json 中的 <a href="/zh-CN/docs/Mozilla/Add-ons/WebExtensions/manifest.json/browser_specific_settings">applications</a> 键进行设置。这是生成的、出现在附加组件 URL 中的 UUID。这意味着你不能将此值用作 {{WebExtAPIRef("runtime.sendMessage()")}} 的 <code>extensionId</code> 参数，也不能使用它检查 {{WebExtAPIRef("runtime.MessageSender")}} 对象的 id 属性。</p>
+   </td>
   </tr>
   <tr>
    <td><code>@@ui_locale</code></td>
@@ -367,7 +372,7 @@ padding-left: 1.5em;</pre>
 
 <h2 id="测试你的_WebExtension">测试你的 WebExtension</h2>
 
-<p>从 Firefox 45 开始，你可以临时安装磁盘上的 WebExtensions  — 另见<a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Packaging_and_installation#Loading_from_disk">从磁盘加载。</a>按上述步骤操作，然后尝试我们的 <a href="https://github.com/mdn/webextensions-examples/tree/master/notify-link-clicks-i18n">notify-link-clicks-i18n</a> WebExtension。访问你喜欢的任何网站，然后点一下链接，查看是否有通知出现来显示所点击的链接网址。</p>
+<p>从 Firefox 45 开始，你可以临时安装磁盘上的 WebExtensions  — 另见<a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Packaging_and_installation#loading_from_disk">从磁盘加载。</a>按上述步骤操作，然后尝试我们的 <a href="https://github.com/mdn/webextensions-examples/tree/master/notify-link-clicks-i18n">notify-link-clicks-i18n</a> WebExtension。访问你喜欢的任何网站，然后点一下链接，查看是否有通知出现来显示所点击的链接网址。</p>
 
 <p>接下来，将 Firefox 的语言区域更改为你想测试的扩展支持的某个语言区域。</p>
 
diff --git a/files/zh-cn/mozilla/firefox/releases/3.6/index.html b/files/zh-cn/mozilla/firefox/releases/3.6/index.html
index 920c40fa26..a0b87cca2a 100644
--- a/files/zh-cn/mozilla/firefox/releases/3.6/index.html
+++ b/files/zh-cn/mozilla/firefox/releases/3.6/index.html
@@ -3,7 +3,7 @@ title: Firefox 3.6 for developers
 slug: Mozilla/Firefox/Releases/3.6
 translation_of: Mozilla/Firefox/Releases/3.6
 ---
-<div><section class="Quick_links" id="Quick_Links">
+<div><section id="Quick_links">
   <ol>
     <li class="toggle">
         <details>
diff --git a/files/zh-cn/mozilla/firefox/releases/3/updating_extensions/index.html b/files/zh-cn/mozilla/firefox/releases/3/updating_extensions/index.html
index 1202baaa23..a6eac54159 100644
--- a/files/zh-cn/mozilla/firefox/releases/3/updating_extensions/index.html
+++ b/files/zh-cn/mozilla/firefox/releases/3/updating_extensions/index.html
@@ -6,7 +6,7 @@ tags:
 translation_of: Mozilla/Firefox/Releases/3/Updating_extensions
 original_slug: Updating_extensions_for_Firefox_3
 ---
-<div><section class="Quick_links" id="Quick_Links">
+<div><section id="Quick_links">
   <ol>
     <li class="toggle">
         <details>
diff --git a/files/zh-cn/web/accessibility/aria/aria_techniques/index.html b/files/zh-cn/web/accessibility/aria/aria_techniques/index.html
index 2f704dff7f..e8117f3603 100644
--- a/files/zh-cn/web/accessibility/aria/aria_techniques/index.html
+++ b/files/zh-cn/web/accessibility/aria/aria_techniques/index.html
@@ -1,136 +1,214 @@
 ---
-title: ARIA techniques
+title: '使用 ARIA：角色、状态和属性'
 slug: Web/Accessibility/ARIA/ARIA_Techniques
 tags:
-  - ARIA
-  - Accessibility
-  - NeedsTranslation
-  - TopicStub
+- ARIA
+- 可访问性
+- 无障碍
+- Overview
+- Reference
 translation_of: Web/Accessibility/ARIA/ARIA_Techniques
 ---
-<h3 id="Roles">Roles</h3>
-
-<h4 id="Widget_roles">Widget roles</h4>
-
-<ul>
- <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_alert_role" title="Using the alert role">Alert</a></li>
- <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_alertdialog_role" title="Using the alertdialog role">Alertdialog</a></li>
- <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_button_role" title="en/ARIA/ARIA_Techniques/Using_the_button_role">Button</a></li>
- <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_checkbox_role" title="en/ARIA/ARIA_Techniques/Using_the_checkbox_role">Checkbox</a></li>
- <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_dialog_role" title="Using the dialog role">Dialog</a></li>
- <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_link_role" title="en/ARIA/ARIA_Techniques/Using_the_link_role">Link</a></li>
- <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_log_role" title="en/ARIA/ARIA_Techniques/Using_the_log_role">Log</a></li>
- <li>Marquee</li>
- <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_progressbar_role" title="en/ARIA/ARIA_Techniques/Using_the_progressbar_role">Progressbar</a></li>
- <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_radio_role" title="en/ARIA/ARIA_Techniques/Using_the_radio_role">Radio</a></li>
- <li>Scrollbar</li>
- <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_slider_role" title="en/ARIA/ARIA_Techniques/Using_the_slider_role">Slider</a></li>
- <li>Spinbutton</li>
- <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_status_role" title="Using the link role">status</a></li>
- <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_textbox_role" title="en/ARIA/ARIA_Techniques/Using_the_textbox_role">textbox</a></li>
- <li>Timer</li>
- <li>Tooltip</li>
-</ul>
-
-<h4 id="Composite_roles">Composite roles</h4>
-
-<p>The techniques below describes each composite role as well as their required and optional child roles.</p>
-
-<ul>
- <li>Grid (including row, gridcell, rowheader, columnheader roles)</li>
- <li>Menubar/ Menu (including menuitem, menuitemcheckbox, menuitemradio)</li>
- <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_listbox_role" title="en/ARIA/ARIA_Techniques/Using_the_listbox_role">Listbox</a> (包含 option role)</li>
- <li>Tablist (包含 tab 和 tabpanel roles)</li>
- <li>Tree (including group and treeitem roles)</li>
- <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_radio_role" title="en/ARIA/ARIA_Techniques/Using_the_radio_role">Radiogroup (see radio role)</a></li>
- <li>Treegrid</li>
-</ul>
-
-<h4 id="Document_structure_roles">Document structure roles</h4>
-
-<ul>
- <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_article_role" title="en/Accessibility/ARIA/ARIA_Techniques/Using_the_article_role">Article</a></li>
- <li>Definition</li>
- <li>Directory</li>
- <li>Document</li>
- <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_group_role" title="en/ARIA/ARIA_Techniques/Using_the_group_role">Group</a></li>
- <li>Heading</li>
- <li>Img</li>
- <li>List, listitem</li>
- <li>Math</li>
- <li>Note</li>
- <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_presentation_role" title="en/ARIA/ARIA_Techniques/Using_the_presentation_role">Presentation</a></li>
- <li>Region</li>
- <li>Separator</li>
- <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_toolbar_role" title="en/ARIA/ARIA_Techniques/Using_the_toolbar_role">Toolbar</a></li>
-</ul>
-
-<h4 id="Landmark_roles">Landmark roles</h4>
-
-<ul>
- <li>Application</li>
- <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_banner_role" title="en/ARIA/ARIA_Techniques/Using_the_banner_role">Banner</a></li>
- <li>Complementary</li>
- <li>Contentinfo</li>
- <li>Form</li>
- <li>Main</li>
- <li>Navigation</li>
- <li>Search</li>
-</ul>
-
-<h3 id="States_and_properties">States and properties</h3>
-
-<h4 id="Widget_attributes">Widget attributes</h4>
-
-<ul>
- <li>aria-autocomplete</li>
- <li>aria-checked</li>
- <li>aria-disabled</li>
- <li>aria-expanded</li>
- <li>aria-haspopup</li>
- <li>aria-hidden</li>
- <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-invalid_attribute" title="Using the aria-invalid attribute">aria-invalid</a></li>
- <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute" title="Using the aria-labelledby attribute">aria-label</a></li>
- <li>aria-level</li>
- <li>aria-multiline</li>
- <li>aria-multiselectable</li>
- <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-orientation_attribute" title="en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-orientation_attribute">aria-orientation</a></li>
- <li>aria-pressed</li>
- <li>aria-readonly</li>
- <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-required_attribute" title="Using the aria-required property">aria-required</a></li>
- <li>aria-selected</li>
- <li>aria-sort</li>
- <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuemax_attribute" title="Using the aria-required attribute">aria-valuemax</a></li>
- <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuemin_attribute" title="en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuemin_attribute">aria-valuemin</a></li>
- <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuenow_attribute" title="en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuenow_attribute">aria-valuenow</a></li>
- <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuetext_attribute" title="en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuetext_attribute">aria-valuetext</a></li>
-</ul>
-
-<h4 id="Live_region_attributes">Live region attributes</h4>
-
-<ul>
- <li>aria-live</li>
- <li>aria-relevant</li>
- <li>aria-atomic</li>
- <li>aria-busy</li>
-</ul>
-
-<h4 id="Drag_drop_attributes">Drag &amp; drop attributes</h4>
-
-<ul>
- <li>aria-dropeffect</li>
- <li>aria-dragged</li>
-</ul>
-
-<h4 id="Relationship_attributes">Relationship attributes</h4>
-
-<ul>
- <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-activedescendant_attribute" title="Role">aria-activedescendant</a></li>
- <li>aria-controls</li>
- <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute" title="Using the aria-labelledby attribute">aria-describedby</a></li>
- <li>aria-flowto</li>
- <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute" title="en/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute">aria-labelledby</a></li>
- <li>aria-owns</li>
- <li>aria-posinset</li>
- <li>aria-setsize</li>
-</ul>
+
+<p>ARIA 定义了可以应用于元素的语义，这些语义分为 <strong>roles</strong>（定义一种用户界面元素）、<strong>states</strong> 和 <strong>properties</strong>，这些都是角色所支持的。作者必须在元素的生命周期中为其分配一个 ARIA 角色和适当的状态和属性，除非该元素已经具有适当的 ARIA 语义（通过使用适当的 HTML 元素）。添加 ARIA 语义只会向浏览器的可访问性 API 公开额外信息，而不会影响页面的 DOM。</p>
+
+<h2 id="Roles">角色</h2>
+
+<h3 id="Widget_roles">组件角色</h3>
+
+<div class="index">
+  <ul>
+    <li><a href="/zh-CN/docs/Web/Accessibility/ARIA/Roles/button_role">button</a></li>
+    <li><a href="/zh-CN/docs/Web/Accessibility/ARIA/Roles/checkbox_role">checkbox</a></li>
+    <li><a href="/zh-CN/docs/Web/Accessibility/ARIA/Roles/Gridcell_role">gridcell</a></li>
+    <li><a href="/zh-CN/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_link_role">link</a></li>
+    <li>menuitem</li>
+    <li>menuitemcheckbox</li>
+    <li>menuitemradio</li>
+    <li>option</li>
+    <li><a href="/zh-CN/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_progressbar_role">progressbar</a></li>
+    <li><a href="/zh-CN/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_radio_role">radio</a></li>
+    <li>scrollbar</li>
+    <li>searchbox</li>
+    <li>separator (when focusable)</li>
+    <li><a href="/zh-CN/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_slider_role">slider</a></li>
+    <li>spinbutton</li>
+    <li><a href="/zh-CN/docs/Web/Accessibility/ARIA/Roles/Switch_role">switch</a></li>
+    <li><a href="/zh-CN/docs/Web/Accessibility/ARIA/Roles/Tab_Role">tab</a></li>
+    <li><a href="/zh-CN/docs/Web/Accessibility/ARIA/Roles/Tabpanel_Role">tabpanel</a></li>
+    <li><a href="/zh-CN/docs/Web/Accessibility/ARIA/Roles/textbox_role">textbox</a></li>
+    <li>treeitem</li>
+  </ul>
+</div>
+
+<h3 id="Composite_roles">复合角色</h3>
+
+<p>下面的技术描述了每个复合角色及其必需和可选的子角色。</p>
+
+<div class="index">
+  <ul>
+    <li>combobox</li>
+    <li><a href="/zh-CN/docs/Web/Accessibility/ARIA/Roles/Grid_Role">grid</a> (包含 <a href="/zh-CN/docs/Web/Accessibility/ARIA/Roles/Row_Role">row</a>, <a href="/zh-CN/docs/Web/Accessibility/ARIA/Roles/Gridcell_role">gridcell</a>, rowheader, columnheader)</li>
+    <li><a href="/zh-CN/docs/Web/Accessibility/ARIA/Roles/listbox_role">listbox</a> (包含 option)</li>
+    <li>menu</li>
+    <li>menubar</li>
+    <li><a href="/zh-CN/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_radio_role">radiogroup</a> (参考 radio)</li>
+    <li>tablist (包含 <a href="/zh-CN/docs/Web/Accessibility/ARIA/Roles/Tab_Role">tab</a> 和 <a href="/zh-CN/docs/Web/Accessibility/ARIA/Roles/Tabpanel_Role">tabpanel</a>)</li>
+    <li>tree</li>
+    <li>treegrid</li>
+  </ul>
+</div>
+
+<h3 id="Document_structure_roles">文档结构角色</h3>
+
+<div class="index">
+  <ul>
+    <li><a href="/zh-CN/docs/Web/Accessibility/ARIA/Roles/Application_Role">application</a></li>
+    <li><a href="/zh-CN/docs/Web/Accessibility/ARIA/Roles/Article_Role">article</a></li>
+    <li><a href="/zh-CN/docs/Web/Accessibility/ARIA/Roles/Cell_Role">cell</a></li>
+    <li>columnheader</li>
+    <li>definition</li>
+    <li>directory</li>
+    <li><a href="/zh-CN/docs/Web/Accessibility/ARIA/Roles/Document_Role">document</a></li>
+    <li>feed</li>
+    <li><a href="/zh-CN/docs/Web/Accessibility/ARIA/Roles/Figure_Role">figure</a></li>
+    <li><a href="/zh-CN/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_group_role">group</a></li>
+    <li><a href="/zh-CN/docs/Web/Accessibility/ARIA/Roles/heading_role">heading</a></li>
+    <li><a href="/zh-CN/docs/Web/Accessibility/ARIA/Roles/Role_Img">img</a></li>
+    <li><a href="/zh-CN/docs/Web/Accessibility/ARIA/Roles/List_role">list</a></li>
+    <li><a href="/zh-CN/docs/Web/Accessibility/ARIA/Roles/Listitem_role">listitem</a></li>
+    <li>math</li>
+    <li>none</li>
+    <li>note</li>
+    <li><a href="/zh-CN/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_presentation_role">presentation</a></li>
+    <li><a href="/zh-CN/docs/Web/Accessibility/ARIA/Roles/Row_Role">row</a></li>
+    <li><a href="/zh-CN/docs/Web/Accessibility/ARIA/Roles/Rowgroup_Role">rowgroup</a></li>
+    <li>rowheader</li>
+    <li>separator</li>
+    <li><a href="/zh-CN/docs/Web/Accessibility/ARIA/Roles/Table_Role">table</a></li>
+    <li>term</li>
+    <li><a href="/zh-CN/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_toolbar_role">toolbar</a></li>
+    <li>tooltip</li>
+  </ul>
+</div>
+
+<h3 id="Landmark_roles">具有里程碑意义的角色</h3>
+
+<div class="index">
+  <ul>
+    <li><a href="/zh-CN/docs/Web/Accessibility/ARIA/Roles/Banner_role">banner</a></li>
+    <li><a href="/zh-CN/docs/Web/Accessibility/ARIA/Roles/Complementary_role">complementary</a></li>
+    <li><a href="/zh-CN/docs/Web/Accessibility/ARIA/Roles/Contentinfo_role">contentinfo</a></li>
+    <li><a href="/zh-CN/docs/Web/Accessibility/ARIA/Roles/Form_Role">form</a></li>
+    <li><a href="/zh-CN/docs/Web/Accessibility/ARIA/Roles/Main_role">main</a></li>
+    <li><a href="/zh-CN/docs/Web/Accessibility/ARIA/Roles/Navigation_Role">navigation</a></li>
+    <li><a href="/zh-CN/docs/Web/Accessibility/ARIA/Roles/Region_role">region</a></li>
+    <li><a href="/zh-CN/docs/Web/Accessibility/ARIA/Roles/Search_role">search</a></li>
+  </ul>
+</div>
+
+<h3 id="Live_Region_Roles">实时区域角色</h3>
+
+<div class="index">
+  <ul>
+    <li><a href="/zh-CN/docs/Web/Accessibility/ARIA/Roles/Alert_Role">alert</a></li>
+    <li><a href="/zh-CN/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_log_role">log</a></li>
+    <li>marquee</li>
+    <li><a href="/zh-CN/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_status_role">status</a></li>
+    <li><a href="/zh-CN/docs/Web/Accessibility/ARIA/Roles/ARIA_timer_role">timer</a></li>
+  </ul>
+</div>
+
+<h3 id="Window_Roles">窗口角色</h3>
+
+<div class="index">
+  <ul>
+    <li><a href="/zh-CN/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_alertdialog_role">alertdialog</a></li>
+    <li><a href="/zh-CN/docs/Web/Accessibility/ARIA/Roles/dialog_role">dialog</a></li>
+  </ul>
+</div>
+
+<h2 id="States_and_properties">状态和属性</h2>
+
+<h3 id="Widget_attributes">组件属性</h3>
+
+<div class="index">
+  <ul>
+    <li>aria-autocomplete</li>
+    <li>aria-checked</li>
+    <li>aria-current</li>
+    <li>aria-disabled</li>
+    <li>aria-errormessage</li>
+    <li>aria-expanded</li>
+    <li>aria-haspopup</li>
+    <li>aria-hidden</li>
+    <li><a href="/zh-CN/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-invalid_attribute">aria-invalid</a></li>
+    <li><a href="/zh-CN/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute">aria-label</a></li>
+    <li>aria-level</li>
+    <li>aria-modal</li>
+    <li>aria-multiline</li>
+    <li>aria-multiselectable</li>
+    <li><a href="/zh-CN/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-orientation_attribute">aria-orientation</a></li>
+    <li>aria-placeholder</li>
+    <li>aria-pressed</li>
+    <li>aria-readonly</li>
+    <li><a href="/zh-CN/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-required_attribute">aria-required</a></li>
+    <li>aria-selected</li>
+    <li>aria-sort</li>
+    <li><a href="/zh-CN/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuemax_attribute">aria-valuemax</a></li>
+    <li><a href="/zh-CN/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuemin_attribute">aria-valuemin</a></li>
+    <li><a href="/zh-CN/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuenow_attribute">aria-valuenow</a></li>
+    <li><a href="/zh-CN/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuetext_attribute">aria-valuetext</a></li>
+  </ul>
+</div>
+
+<h3 id="Live_region_attributes">实时区域属性</h3>
+
+<div class="index">
+  <ul>
+    <li>aria-live</li>
+    <li><a href="/zh-CN/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-relevant_attribute">aria-relevant</a></li>
+    <li>aria-atomic</li>
+    <li>aria-busy</li>
+  </ul>
+</div>
+
+<h3 id="Drag_drop_attributes">拖放属性</h3>
+
+<div class="index">
+  <ul>
+    <li>aria-dropeffect</li>
+    <li>aria-dragged</li>
+  </ul>
+</div>
+
+<h3 id="Relationship_attributes">关系属性</h3>
+
+<div class="index">
+  <ul>
+    <li><a href="/zh-CN/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-activedescendant_attribute">aria-activedescendant</a></li>
+    <li>aria-colcount</li>
+    <li>aria-colindex</li>
+    <li>aria-colspan</li>
+    <li>aria-controls</li>
+    <li><a href="/zh-CN/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute">aria-describedby</a></li>
+    <li><a href="/zh-CN/docs/Web/Accessibility/ARIA/Annotations#associating_annotated_elements_with_their_details">aria-details</a></li>
+    <li>aria-errormessage</li>
+    <li>aria-flowto</li>
+    <li><a href="/zh-CN/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute">aria-labelledby</a></li>
+    <li>aria-owns</li>
+    <li>aria-posinset</li>
+    <li>aria-rowcount</li>
+    <li>aria-rowindex</li>
+    <li>aria-rowspan</li>
+    <li>aria-setsize</li>
+  </ul>
+</div>
+
+<h3 id="MicrosoftEdge-specific_properties">MicrosoftEdge 特定的属性</h3>
+
+<div class="index">
+  <ul>
+    <li><a href="/zh-CN/docs/Web/Accessibility/ARIA/ARIA_Techniques/x-ms-aria-flowfrom">x-ms-aria-flowfrom</a> {{Non-standard_Inline}}</li>
+  </ul>
+</div>
diff --git a/files/zh-cn/web/accessibility/aria/index.html b/files/zh-cn/web/accessibility/aria/index.html
index da650a78f6..b59dc1e7ca 100644
--- a/files/zh-cn/web/accessibility/aria/index.html
+++ b/files/zh-cn/web/accessibility/aria/index.html
@@ -3,175 +3,123 @@ title: ARIA
 slug: Web/Accessibility/ARIA
 tags:
   - ARIA
-  - Accessibility
-  - NeedsTranslation
-  - TopicStub
+  - 可访问性
+  - 无障碍
+  - HTML
 translation_of: Web/Accessibility/ARIA
 ---
-<p>Accessible Rich Internet Applications <strong>(ARIA)</strong> 是能够让残障人士更加便利的访问 Web 内容和使用 Web 应用（特别是那些由JavaScript 开发的）的一套机制。</p>
 
-<p>ARIA是对超文本标记语言（HTML ）的补充，以便在没有其他机制的情况下，使得应用程序中常用的交互和小部件可以传递给辅助交互技术。例如，ARIA支持HTML4中的可访问导航地标、JavaScript小部件、表单提示和错误消息、实时内容更新等。</p>
+<p><strong>ARIA</strong> (Accessible Rich Internet Applications) 是一组属性，用于定义使残障人士更容易访问 Web 内容和 Web 应用程序（尤其是使用 JavaScript 开发的应用程序）的方法。</p>
 
-<p>ARIA 是一组特殊的易用性属性，可以添加到任意标签上，尤其适用于 HTML。role 属性定义了对象的通用类型（例如文章、警告，或幻灯片）。额外的 ARIA 属性提供了其他有用的特性，例如表单的描述或进度条的当前值。</p>
+<p>它补充了 HTML，以便在没有其他机制时可以将应用程序中常用的交互和小部件传递给辅助技术。例如，ARIA 支持 HTML4 中的可访问导航地标、JavaScript 小部件、表单提示和错误消息、实时内容更新等。</p>
 
-<p>ARIA 在大多数流行的浏览器和屏幕阅读器中得到了实现。尽管如此，实现方式有所不同，而且旧的技术对其支持不好（或者不支持）。使用可以优雅降级的“安全的” ARIA，或者要求用户升级使用新的技术。</p>
-
-<div class="blockIndicator warning">
-<p>这些小部件中的许多后来被合并到HTML5中，如果存在这样的元素，<strong>开发人员应该更倾向使用对应的语义化HTML元素，而不是使用ARIA</strong>。例如，原生元素具有内置的<a href="https://developer.mozilla.org/zh-CN/docs/Web/Accessibility/Keyboard-navigable_JavaScript_widgets">键盘可访问性</a>、角色和状态。但是，如果您选择使用ARIA，您有责任在脚本中模仿(等效的)浏览器行为。</p>
+<div class="notecard warning">
+ <p>许多这些小部件后来被合并到 HTML5 中，如果存在这样的元素，<strong>开发人员应该更喜欢使用正确语义的 HTML 元素而不是使用 ARIA</strong>。例如，原生元素具有内置的<a href="/zh-CN/docs/Web/Accessibility/Keyboard-navigable_JavaScript_widgets">键盘可访问性</a>、角色和状态。但是，如果您选择使用 ARIA，则您有责任在脚本中模仿（等效）浏览器行为。</p>
 </div>
+<p>这是进度条小部件的标记：</p>
 
-<p>下面是一段进度条组件的代码：</p>
-
-<pre class="brush: html notranslate"><code>&lt;div id="percent-loaded" role="progressbar" aria-valuenow="75"
-     aria-valuemin="0" aria-valuemax="100" /&gt;</code>
+<pre class="brush: html">&lt;div id="percent-loaded" role="progressbar" aria-valuenow="75"
+     aria-valuemin="0" aria-valuemax="100"&gt;
+&lt;/div&gt;
 </pre>
 
-<p>由于这个滚动条是用<code>&lt;div&gt;</code>写的，没有字面含义。然而，对开发者来说，在HTML4中，又没有更多的语义化的标签，所以我们需要引入ARIA这个角色和属性，这些是通过向元素添加属性来指定的。举个例子，<code>role="progressbar"</code>这个属性告诉浏览器，该元素其实是一个JavaScript实现的进度条组件。<code>aria-valuemin </code>和<code>aria-valuemax</code> 属性表明了进度条的最小值和最大值。 <code>aria-valuenow</code>则描述了当前进度条的状态， 因此它得用JavaScript来更新。</p>
+<p>这个进度条是使用 {{HTMLElement("div")}} 构建的，它没有任何意义。不幸的是，HTML 4 中没有更多语义标签可供开发人员使用，因此我们需要包含 ARIA 角色和属性。这些是通过向元素添加属性来指定的。在这个例子中， <code>role="progressbar"</code> 属性通知浏览器这个元素实际上是一个 JavaScript 驱动的进度条小部件。 <code>aria-valuemin</code> 和 <code>aria-valuemax</code> 属性指定进度条的最小值和最大值，<code>aria-valuenow</code> 描述进度条的当前状态和因此必须使用 JavaScript 保持更新。</p>
 
-<p>除了直接给标签加属性，还可以通过JavaScript代码把ARIA属性添加到元素并动态地更新，如下面所示：</p>
+<p>除了将它们直接放置在元素中之外，还可以将 ARIA 属性添加到元素中，并使用 JavaScript 代码动态更新，如下所示：</p>
 
-<pre class="brush: js notranslate"><code>// Find the progress bar &lt;div&gt; in the DOM.
- var progressBar = document.getElementById("percent-loaded");</code>
+<pre class="brush: js">// Find the progress bar &lt;div&gt; in the DOM.
+var progressBar = document.getElementById("percent-loaded");
 
-<code>// Set its ARIA roles and states,
-// so that assistive technologies know what kind of widget it is.</code>
- progressBar.setAttribute("role", "progressbar");
- progressBar.setAttribute("aria-valuemin", 0);
- progressBar.setAttribute("aria-valuemax", 100);
+// Set its ARIA roles and states,
+// so that assistive technologies know what kind of widget it is.
+progressBar.setAttribute("role", "progressbar");
+progressBar.setAttribute("aria-valuemin", 0);
+progressBar.setAttribute("aria-valuemax", 100);
 
 // Create a function that can be called at any time to update
 // the value of the progress bar.
- function updateProgress(percentComplete) {
-   progressBar.setAttribute("aria-valuenow", percentComplete);
- }
-
-</pre>
+function updateProgress(percentComplete) {
+  progressBar.setAttribute("aria-valuenow", percentComplete);
+}</pre>
 
-<div class="note">
-<p>注意由于ARIA是在HTML4之后引入的，所以在HTML4或XTHML中没有提供验证。然而，它提供的可访问性收益远远超过任何技术上的无效性。</p>
+<div class="notecard note">
+ <p>请注意，ARIA 是在 HTML4 之后发明的，因此无法在 HTML4 或其 XHTML 变体中进行验证。然而，它提供的可访问性收益远远超过任何技术无效性。</p>
 
-<p>在HTML5中，所有的ARIA属性都是有效的。新的标记元素（<code>&lt;main&gt;</code>, <code>&lt;header&gt;</code>, <code>&lt;nav&gt;</code>等）都已具有了ARIA角色，所以就没必要再标注说明了。</p>
+ <p>在 HTML5 中，所有 ARIA 属性都经过验证。新的地标元素（{{HTMLElement("main")}}、{{HTMLElement("header")}}、{{HTMLElement("nav")}} 等）具有内置的 ARIA 角色，因此有无需复制它们。</p>
 </div>
 
-<table class="topicpage-table">
- <tbody>
-  <tr>
-   <td>
-    <h3 id="Documentation" name="Documentation">ARIA 入门</h3>
-
-    <dl>
-     <dt><a href="/en-US/docs/Accessibility/An_overview_of_accessible_web_applications_and_widgets" title="An overview of accessible web applications and widgets">ARIA 介绍</a></dt>
-     <dd>关于借助 ARIA 使得动态内容可访问的快速介绍。也可参考经典的 <a class="external" href="http://dev.opera.com/articles/view/introduction-to-wai-aria/" title="http://dev.opera.com/articles/view/introduction-to-wai-aria/">ARIA 介绍 - Gez Lemon</a>，2008 年。</dd>
-     <dt><a href="/en-US/docs/Accessibility/ARIA/Web_applications_and_ARIA_FAQ" title="https://developer.mozilla.org/en-US/docs/Accessibility/Web_applications_and_ARIA_FAQ">Web 应用与 ARIA FAQ</a></dt>
-     <dd>解答关于WAI-ARIA的问题并且解释为什么网站需要ARIA。</dd>
-     <dt><a class="external" href="http://zomigi.com/blog/videos-of-screen-readers-using-aria-updated/" title="http://zomigi.com/blog/videos-of-screen-readers-using-aria-updated/">在视频频和屏幕阅读器使用 ARIA</a></dt>
-     <dd>从网上看到真实和简单的例子，包括“before”和“after”ARIA视频。</dd>
-     <dt><a class="external" href="http://dvcs.w3.org/hg/aria-unofficial/raw-file/tip/index.html">在 HTML 使用 ARIA</a></dt>
-     <dd>A practical guide for developers. It suggests what ARIA attributes to use on HTML elements. Suggestions are based on implementation realities.一份为开发人员提供实用指南。它建议一些基于基于执行的在HTML元素上使用哪些ARIA属性。</dd>
-    </dl>
-
-    <h3 id="ARIA_初级进阶">ARIA 初级进阶</h3>
-
-    <dl>
-     <dt><a class="external" href="http://www.paciellogroup.com/blog/2010/10/using-wai-aria-landmark-roles/" rel="external" title="http://www.paciellogroup.com/blog/2010/10/using-wai-aria-landmark-roles/">通过ARIA标签增强页面导航</a></dt>
-     <dd>A nice intro to using ARIA landmarks to improve web page navigation for screen reader users. <a class="external" href="http://www.paciellogroup.com/blog/2011/07/html5-accessibility-chops-aria-landmark-support/" rel="external" title="http://www.paciellogroup.com/blog/2011/07/html5-accessibility-chops-aria-landmark-support/">See also, ARIA landmark implementation notes</a> and examples on real sites (updated as of July '11).</dd>
-     <dt><a href="/en-US/docs/ARIA/forms" rel="internal" title="/en-US/docs/ARIA/forms">提高表单可访问性</a></dt>
-     <dd>ARIA is not just for dynamic content! Learn how to improve accessibility of HTML forms using additional ARIA attributes. </dd>
-     <dt><a class="external" href="/zh-CN/docs/Web/Accessibility/ARIA/ARIA_Live_Regions" rel="external" title="http://www.freedomscientific.com/Training/Surfs-up/AriaLiveRegions.htm">ARIA 活动区域 </a></dt>
-     <dd>活动区域为屏幕阅读器提供关于如何处理一个页面内容变更的建议。</dd>
-     <dt><a class="external" href="http://www.freedomscientific.com/Training/Surfs-up/AriaLiveRegions.htm" rel="external" title="http://www.freedomscientific.com/Training/Surfs-up/AriaLiveRegions.htm">用ARIA 活动区域去通知内容的改变</a></dt>
-     <dd>A quick summary of live regions, by the makers of JAWS screen reader software. Note that live regions are also supported by NVDA in Firefox, and VoiceOver with Safari (as of OS X Lion and iOS 5).</dd>
-    </dl>
-
-    <h3 id="ARIA_与脚本组件">ARIA 与脚本组件</h3>
-
-    <dl>
-     <dt><a class="external" href="/en-US/docs/Accessibility/Keyboard-navigable_JavaScript_widgets" title="en-US/docs/Accessibility/Keyboard-navigable_JavaScript_widgets">键盘导航与组件焦点</a></dt>
-     <dd>The first step in developing an accessible JavaScript widget is to make it keyboard navigable. This article steps through the process. The <a class="external" href="http://www.yuiblog.com/blog/2009/02/23/managing-focus/" title="http://www.yuiblog.com/blog/2009/02/23/managing-focus/">Yahoo! focus management article</a> is a great resource as well.</dd>
-     <dt><a class="external" href="http://access.aol.com/dhtml-style-guide-working-group/" title="http://dev.aol.com/dhtml_style_guide">Style Guide for Keyboard Navigation</a></dt>
-     <dd>A challenge with ARIA is getting developers to implement consistent behavior -- clearly best for users. This style guide describes the keyboard interface for common widgets.</dd>
-    </dl>
-
-    <h3 id="ARIA_资源">ARIA 资源</h3>
-
-    <dl>
-     <dt><a href="/en-US/docs/Accessibility/ARIA/widgets/overview" title="en-US/docs/aria/widgets/overview">Widget Techniques, Tutorials, and Examples</a></dt>
-     <dd>Need a slider, a menu, or another kind of widget? Find resources here.</dd>
-     <dt><a class="external" href="http://www.paciellogroup.com/blog/2009/07/wai-aria-implementation-in-javascript-ui-libraries/" title="http://www.paciellogroup.com/blog/2009/07/wai-aria-implementation-in-javascript-ui-libraries/">ARIA-Enabled JavaScript UI Libraries</a></dt>
-     <dd>If you're starting a new project, choose a UI widget library with ARIA support already built-in. Warning: this is from 2009 -- content should be moved to an MDN page where it can be updated.</dd>
-     <dt><a class="external" href="http://dl.dropbox.com/u/573324/CSUN2012/index.html" title="http://dl.dropbox.com/u/573324/CSUN2012/index.html">Accessibility of HTML5 and Rich Internet Applications - CSUN 2012 Workshop Materials</a></dt>
-     <dd>Includes slide presentations and examples.</dd>
-    </dl>
-   </td>
-   <td>
-    <h3 id="Community" name="Community">邮件列表</h3>
-
-    <dl>
-     <dt><a class="link-https" href="https://groups.google.com/forum/#!forum/free-aria" title="https://groups.google.com/forum/#!forum/free-aria">Free ARIA Google Group</a></dt>
-     <dd>A place to ask questions about ARIA, as well as make suggestions for improving the ARIA documentation found on these pages.</dd>
-    </dl>
-
-    <h3 id="Community" name="Community">博客</h3>
-
-    <p>ARIA information on blogs tends to get out of date quickly. Still, there is some great info out there from other developers making ARIA work today.</p>
-
-    <p><a class="external" href="http://www.paciellogroup.com/blog/category/wai-aria/" title="http://www.paciellogroup.com/blog/category/wai-aria/">Paciello Group</a></p>
-
-    <p><a class="external" href="http://www.accessibleculture.org/tag/wai-aria/" title="http://www.accessibleculture.org/tag/wai-aria/">Accessible Culture</a></p>
-
-    <p><a class="external" href="http://yaccessibilityblog.com/library/category/code/aria" title="http://yaccessibilityblog.com/library/category/code/aria">Yahoo! Accessibility</a></p>
-
-    <h3 id="提交_Bug">提交 Bug</h3>
-
-    <p><a href="/en/Accessibility/ARIA/How_to_file_ARIA-related_bugs" title="https://developer.mozilla.org/en/ARIA/How_to_file_ARIA-related_bugs">File ARIA bugs on browsers, screen readers, and JavaScript libraries</a>.</p>
-
-    <h3 id="示例">示例</h3>
-
-    <dl>
-     <dt><a class="external" href="/en-US/docs/Accessibility/ARIA/ARIA_Test_Cases" title="en-US/docs/ARIA/examples">ARIA 示例库</a></dt>
-     <dd>A set of barebones example files which are easy to learn from.</dd>
-     <dt><span class="external">可访问的 JS 组件库演示</span></dt>
-     <dd><a class="external" href="http://dojotoolkit.org/widgets" title="http://dojotoolkit.org/widgets">Dojo</a>, <a class="external" href="http://hanshillen.github.com/jqtest/" title="http://hanshillen.github.com/jqtest/">jQuery</a>, <a class="external" href="http://wiki.fluidproject.org/display/fluid/Components" title="http://wiki.fluidproject.org/display/fluid/Components">Fluid</a>, <a class="external" href="http://yuilibrary.com/gallery/" title="http://yuilibrary.com/gallery/">YUI</a></dd>
-    </dl>
-
-    <dl>
-     <dt><a class="external" href="http://mail.yahoo.com" title="http://mail.yahoo.com">Yahoo! 邮箱</a></dt>
-     <dd>Yahoo! puts it all together with Yahoo! Mail, a web app that almost looks like a native app. It works very well. As a <a class="external" href="http://www.marcozehe.de/2011/09/21/review-the-all-new-yahoo-mail-web-application/" title="http://www.marcozehe.de/2011/09/21/review-the-all-new-yahoo-mail-web-application/">review of Yahoo! Mail</a> by screen reader Marco Zehe says, "Keep up the good work!".</dd>
-    </dl>
-
-    <dl>
-     <dt><a class="external" href="http://search.yahoo.com" title="http://search.yahoo.com">Yahoo! 搜索</a></dt>
-     <dd>Yahoo! has done an amazing job of advancing ARIA here, by exercising ARIA's full capabilities and <a class="external" href="http://ycorpblog.com/2011/03/23/searchdirect/" title="http://ycorpblog.com/2011/03/23/searchdirect/">sharing their techniques</a>. Yahoo! Search uses a combination of ARIA landmarks, live regions, and widgets.</dd>
-    </dl>
-
-    <h3 id="规范特性">规范特性</h3>
-
-    <dl>
-     <dt><a class="external" href="http://www.w3.org/WAI/intro/aria.php" title="http://www.w3.org/WAI/intro/aria.php">WAI-ARIA Activities Overview at W3C</a></dt>
-     <dd>Authoritative Overview of WAI-ARIA Standardization efforts by the Web Accessibility Initiative (WAI)</dd>
-     <dt><a class="external" href="http://www.w3.org/TR/wai-aria/" title="http://www.w3.org/TR/wai-aria/">WAI-ARIA Specification</a></dt>
-     <dd>The W3C specification itself, useful as a reference. Note that, at this stage, it is important to test compatibility, as implementations are still inconsistent.</dd>
-     <dt><a class="external" href="http://www.w3.org/WAI/PF/aria-practices/" title="http://www.w3.org/WAI/PF/aria-practices/">WAI-ARIA Authoring Practices</a></dt>
-     <dd>Like the W3C WAI-ARIA specification, the official best practices represents a future ideal -- a day when authors can rely on consistent ARIA support across browsers and screen readers. The W3C documents provide an in-depth view of ARIA.<br>
-     <br>
-     For now, web developers implementing ARIA should maximize compatibility. Use best practices docs and examples based on current implementations.</dd>
-     <dt><a class="external" href="http://www.openajax.org/member/wiki/Accessibility" title="http://www.openajax.org/member/wiki/Accessibility">Open AJAX Accessibility Task Force</a></dt>
-     <dd>The Open AJAX effort centers around developing tools, sample files, and automated tests for ARIA.</dd>
-     <dt><a href="/en-US/docs/Accessibility/ARIA/ARIA_Techniques" title="ARIA Techniques">Under Construction: WCAG 2.0 ARIA Techniques</a></dt>
-     <dd>The community needs a complete set of WCAG techniques for WAI-ARIA + HTML, so that organizations can be comfortable claiming their ARIA-enabled content is WCAG compliant. This is mostly important when regulations or policies are based on WCAG.</dd>
-    </dl>
-   </td>
-  </tr>
- </tbody>
- <tbody>
-  <tr>
-   <td colspan="2">
-    <h3 id="Related_Topics" name="Related_Topics">相关主题</h3>
-
-    <dl>
-     <dd><a href="/en-US/docs/Accessibility" title="en-US/docs/Accessibility">Accessibility</a>, <a href="/en-US/docs/AJAX" title="en-US/docs/AJAX">AJAX</a>, <a href="/en-US/docs/JavaScript" title="en-US/docs/JavaScript">JavaScript</a></dd>
-    </dl>
-   </td>
-  </tr>
- </tbody>
-</table>
+<h2 id="Support">支持</h2>
+
+<p>与任何其他 Web 技术一样，对 ARIA 有不同程度的支持。支持基于所使用的操作系统和浏览器，以及与之交互的辅助技术类型。此外，操作系统、浏览器和辅助技术的版本也是影响因素。较旧的软件版本可能不支持某些 ARIA 角色、仅部分支持或误报其功能。</p>
+
+<p>同样重要的是要承认一些依赖辅助技术的人不愿意升级他们的软件，因为害怕失去与他们的计算机和浏览器交互的能力。因此，尽可能对 <a href="/zh-CN/docs/Learn/Accessibility/HTML">使用语义化的 HTML 元素</a> 很重要，因为语义 HTML 对辅助技术的支持要好得多。</p>
+
+<p>使用实际辅助技术测试您编写的 ARIA 也很重要。就像浏览器模拟器和模拟器不是测试完全支持的有效解决方案一样，代理辅助技术解决方案不足以完全保证功能。</p>
+
+<h2 id="Tutorials">教程</h2>
+
+<dl>
+ <dt><a href="/zh-CN/docs/Web/Accessibility/An_overview_of_accessible_web_applications_and_widgets">ARIA 简介</a></dt>
+ <dd>快速介绍如何使用 ARIA 访问动态内容。另请参阅 2008 年的经典 <a href="https://dev.opera.com/articles/view/introduction-to-wai-aria/">ARIA intro by Gez Lemon</a>。</dd>
+ <dt><a href="https://zomigi.com/blog/videos-of-screen-readers-using-aria-updated/">Videos of screen readers using ARIA</a></dt>
+ <dd>查看来自网络的真实和简化示例，视频包括 ARIA “之前”和 ARIA“之后”。</dd>
+ <dt><a href="https://w3c.github.io/using-aria/">Using ARIA</a></dt>
+ <dd>开发人员实用指南。它建议在 HTML 元素上使用哪些 ARIA 属性。建议是基于实施的实际情况。</dd>
+</dl>
+
+<h2 id="Simple_ARIA_enhancements">简单的 ARIA 增强</h2>
+
+<dl>
+ <dt><a href="https://www.paciellogroup.com/blog/2013/02/using-wai-aria-landmarks-2013/">Enhancing page navigation with ARIA landmarks</a></dt>
+ <dd>使用 ARIA 地标改进屏幕阅读器用户的网页导航的一个很好的介绍。参考 <a href="https://www.paciellogroup.com/blog/2011/07/html5-accessibility-chops-aria-landmark-support/">ARIA landmark implementation notes</a> 和真实站点上的示例（截至 2011 年 7 月更新）。</dd>
+ <dt><a href="/zh-CN/docs/Web/Accessibility/ARIA/forms">Improving form accessibility</a></dt>
+ <dd>ARIA 不仅适用于动态内容！了解如何使用附加 ARIA 属性提高 HTML 表单的可访问性。</dd>
+</dl>
+
+<h2 id="ARIA_for_Scripted_Widgets">脚本小部件的 ARIA</h2>
+
+<dl>
+ <dt><a href="/zh-CN/docs/Web/Accessibility/Keyboard-navigable_JavaScript_widgets">编写可通过键盘导航的 JavaScript 小部件</a></dt>
+ <dd>{{HTMLElement("input")}}、{{HTMLElement("button")}} 等内置元素具有内置键盘辅助功能。如果您使用 {{HTMLElement("div")}} 和 ARIA 来“伪造”这些，则必须确保您的小部件可通过键盘访问。</dd>
+ <dt><a href="/zh-CN/docs/Web/Accessibility/ARIA/ARIA_Live_Regions">实时区域</a></dt>
+ <dd>实时区域向屏幕阅读器提供有关如何处理页面内容更改的建议。</dd>
+ <dt><a href="https://www.freedomscientific.com/Training/Surfs-up/AriaLiveRegions.htm">Using ARIA Live Regions to announce content changes</a></dt>
+ <dd>JAWS 屏幕阅读器软件制造商对实时区域的快速总结。带有 Firefox 的 NVDA 和带有 Safari 的 VoiceOver 也支持实时区域。</dd>
+</dl>
+
+<h2 id="References">参考文献</h2>
+
+<dl>
+ <dt><a href="/zh-CN/docs/Web/Accessibility/ARIA/Roles">ARIA Roles</a></dt>
+ <dd>参考页面涵盖了 MDN 上讨论的所有 WAI-ARIA 角色。</dd>
+</dl>
+
+<h2 id="Standardization_Efforts">标准化工作</h2>
+
+<dl>
+ <dt><a href="https://www.w3.org/TR/wai-aria-1.1/">WAI-ARIA Specification</a></dt>
+ <dd>W3C 规范本身。</dd>
+ <dt><a href="https://www.w3.org/TR/wai-aria-practices-1.1/">WAI-ARIA Authoring Practices</a></dt>
+ <dd><p>官方最佳实践记录了如何最好地对常见小部件和交互进行 ARIA 化。一个很好的资源。</p></dd>
+</dl>
+
+<h2 id="Videos">视频</h2>
+
+<p>以下演讲是了解 ARIA 的好方法：</p>
+
+<p><a href="https://www.youtube.com/watch?v=qdB8SRhqvFc">ARIA, Accessibility APIs and coding like you give a damn! – Léonie Watson</a></p>
+
+<h2 id="Filing_Bugs">提交错误</h2>
+
+<p><a href="/zh-CN/docs/Web/Accessibility/ARIA/How_to_file_ARIA-related_bugs">在浏览器、屏幕阅读器和 JavaScript 库上提交 ARIA 错误。</a></p>
+
+<h2 id="Related_Topics">相关话题</h2>
+
+<p><a href="/zh-CN/docs/Web/Accessibility">Accessibility</a>, <a href="/zh-CN/docs/Web/Guide/AJAX">AJAX</a>, <a href="/zh-CN/docs/Web/JavaScript">JavaScript</a></p>
+
+<section id="Quick_links">
+ <ol>
+  <li><a href="/zh-CN/docs/Web/Guide">网页开发</a></li>
+  <li><a href="/zh-CN/docs/Mozilla/Accessibility">Mozilla 的可访问性</a></li>
+ </ol>
+</section>
diff --git a/files/zh-cn/web/accessibility/aria/roles/index.html b/files/zh-cn/web/accessibility/aria/roles/index.html
new file mode 100644
index 0000000000..e32d5a1038
--- /dev/null
+++ b/files/zh-cn/web/accessibility/aria/roles/index.html
@@ -0,0 +1,86 @@
+---
+title: WAI-ARIA Roles
+slug: Web/Accessibility/ARIA/Roles
+tags:
+- ARIA
+- ARIA Roles
+- 可访问性
+- 无障碍
+- Reference
+- Roles
+translation_of: Web/Accessibility/ARIA/Roles
+---
+<p>此页面列出了涵盖 MDN 上讨论的所有 WAI-ARIA 角色的参考页面。有关角色的完整列表，请参阅 <a href="/zh-CN/docs/Web/Accessibility/ARIA/ARIA_Techniques">ARIA 技术</a></p>
+
+<p>{{SubpagesWithSummaries}}</p>
+
+<div class="hidden">
+  <p>请通过在 Role 名称后添加您的姓名来声明您想要从事的 Role：（旧页面从 <a href="/zh-CN/docs/Web/Accessibility/ARIA/ARIA_Techniques">https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques</a> 链接）。已完成初稿的已从以下列表中删除。</p>
+
+  <ul>
+    <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Alertdialog_Role">alertdialog</a></li>
+    <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Banner_role">banner</a></li>
+    <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Combobox_Role">Combobox</a></li>
+    <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Command_Role">Command</a></li>
+    <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Columnheader_Role">Columnheader </a>(Estelle)</li>
+    <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Complementary_role">complementary</a></li>
+    <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Composite_Role">composite</a></li>
+    <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Definition_Role">Definition</a></li>
+    <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Directory_Role">Directory</a></li>
+    <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Feed_Role">Feed</a></li>
+    <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Gridcell_role">Gridcell</a> (Eric E)</li>
+    <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Group_Role">Group</a></li>
+    <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Input_Role">input</a></li>
+    <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Landmark_Role">landmark</a></li>
+    <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Link_Role">Link</a> - old page</li>
+    <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/listbox_role">listbox</a></li>
+    <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Log_Role">Log</a> - old page</li>
+    <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Marquee_Role">Marquee</a></li>
+    <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Math_Role">math</a></li>
+    <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Menu_Role">menu</a></li>
+    <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Menubar_Role">menubar</a></li>
+    <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Menuiitem_Role">Menuitem</a></li>
+    <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Menuitemcheckbox_Role">Menuitemcheckbox</a></li>
+    <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Menuitemradio_Role">Menuitemradio</a></li>
+    <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/None_Role">none</a></li>
+    <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Note_Role">note</a></li>
+    <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Option_Role">Option</a></li>
+    <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Presentation_Role">presentation</a></li>
+    <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Progressbar_Role">Progressbar</a> - old page</li>
+    <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Radio_Role">Radio</a> - old page</li>
+    <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Radiogroup_Role">radiogroup</a></li>
+    <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Range_Role">range</a></li>
+    <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Region_role">region</a></li>
+    <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Roletype_Role">roletype</a></li>
+    <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Rowheader_Role">rowheader</a>(Estelle)</li>
+    <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Scrollbar_Role">Scrollbar</a></li>
+    <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Searchbox_Role">searchbox</a></li>
+    <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Section_Role">section</a></li>
+    <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Sectionhead_Role">sectionhead</a></li>
+    <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Select_Role">select</a></li>
+    <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Separator_Role">separator</a></li>
+    <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Slider_Role">Slider</a> - old page</li>
+    <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Spinbutton_Role">Spinbutton</a></li>
+    <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Status_Role">Status</a> - old page</li>
+    <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Structure_Role">structure</a></li>
+    <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Tab_Role">tab</a></li>
+    <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Tablist_Role">tablist</a> (Michiel)</li>
+    <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Tabpanel_Role">Tabpanel</a> (Michiel)</li>
+    <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Term_Role">term</a></li>
+    <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Time_Role">Timer</a></li>
+    <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Toolbar_Role">toolbar</a></li>
+    <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Tooltip_Role">Tooltip</a></li>
+    <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Tree_Role">Tree</a></li>
+    <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Treegrid_Role">treegrid</a></li>
+    <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Treeitem_Role">Treeitem</a></li>
+    <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Widget_Role">widget</a></li>
+    <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Window_Role">window</a></li>
+  </ul>
+</div>
+
+
+<section id="Quick_links">
+  <ol>
+    <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles"><strong>WAI-ARIA roles</strong></a>{{ListSubpagesForSidebar("/en-US/docs/Web/Accessibility/ARIA/Roles")}}</li>
+  </ol>
+</section>
diff --git a/files/zh-cn/web/accessibility/aria/roles/list_role/index.html b/files/zh-cn/web/accessibility/aria/roles/list_role/index.html
new file mode 100644
index 0000000000..788446c200
--- /dev/null
+++ b/files/zh-cn/web/accessibility/aria/roles/list_role/index.html
@@ -0,0 +1,122 @@
+---
+title: 'ARIA: list role'
+slug: Web/Accessibility/ARIA/Roles/List_role
+tags:
+- ARIA
+- ARIA Role
+- ARIA list
+- 可访问性
+- 无障碍
+- Reference
+- Role
+- list
+---
+<p>ARIA <code>list</code> 角色可用于标识项目列表。它通常与 <code>listitem</code> 角色结合使用，该角色用于标识包含在列表中的列表项。</p>
+
+<pre class="brush: html">&lt;section role="list"&gt;
+  &lt;div role="listitem"&gt;List item 1&lt;/div&gt;
+  &lt;div role="listitem"&gt;List item 2&lt;/div&gt;
+  &lt;div role="listitem"&gt;List item 3&lt;/div&gt;
+&lt;/section&gt;
+</pre>
+
+<h2 id="Description">描述</h2>
+
+<p>任何由外部容器和内部元素列表组成的内容都可以分别使用 <code>list</code> 和 <code>listitem</code> 容器识别为辅助技术。一个 <code>list</code> 必须有一个或多个 <code>listitem</code> 子级，或者，有一个或多个 <code>group</code> 作为子级，每个 <code>group</code>有一个或多个 <code>listitem</code> 作为子项。</p>
+
+<p>关于应该使用哪些元素来标记 <code>list</code> 和 <code>listitem</code> 没有硬性规定，但是您应该确保 <code>listitem</code> 在列表的上下文中有意义，例如购物清单、食谱步骤、行车路线。</p>
+
+<div class="notecard warning">
+  <h4>警告</h4>
+  <p>如果可能，您应该使用适当的语义化 HTML 元素来标记 <code>list</code> 及其 <code>listitem</code>，如 {{HTMLElement("ul")}}、{{HTMLElement("ol")}} 和 {{HTMLElement("li")}}。有关完整示例，请参阅 {{anch("Best_practices", "最佳实践")}}。</p>
+</div>
+
+<h3 id="Associated_WAI-ARIA_Roles_States_and_Properties">关联的 WAI-ARIA 角色、状态和属性</h3>
+
+<dl>
+  <dt><a href="/zh-CN/docs/Web/Accessibility/ARIA/Roles/Listitem_role">listitem</a></dt>
+  <dd><p>列表或目录中的单个项目。角色为 listitem 的元素只能在角色为 <code>list</code> 或 <code>group</code> 的元素中找到。</p></dd>
+  <dt><a href="/zh-CN/docs/Web/Accessibility/ARIA/Roles/group_role">group</a></dt>
+  <dd><p>相关对象的集合，在嵌套在列表中时仅限于列表项，其重要性不足以在页面目录中拥有自己的位置。</p></dd>
+</dl>
+
+<h3 id="Keyboard_Interactions">键盘交互</h3>
+
+<p>无</p>
+
+<h3 id="Required_JavaScript_features">所需的 JavaScript 功能</h3>
+
+<p>无</p>
+
+<h2 id="Examples">示例</h2>
+
+<p><a href="https://www.scottohara.me/blog/2018/05/26/aria-lists.html">ARIA Lists</a> — Scott O'Hara 的一些有用的例子和想法</p>
+
+<h2 id="Best_practices">最佳实践</h2>
+
+<p>仅在必要时使用 <code>role="list"</code> 和 <code>role="listitem"</code>。例如，无法控制 HTML 但能够在之后动态使用 JavaScript 提升可访问性的时候。</p>
+
+<p>与 HTML {{HTMLElement("ol")}} 和 {{HTMLElement("ul")}} 不同，ARIA <code>list</code> 角色不区分有序列表和无序列表。如果可能，您应该使用适当的语义 HTML 元素来标记列表（{{HTMLElement("ol")}} 和 {{HTMLElement("ul")}}）和列表项（{{HTMLElement("li")}})。例如，我们上面的例子应该改写如下：</p>
+
+<pre class="brush: html">&lt;ul&gt;
+  &lt;li&gt;List item 1&lt;/li&gt;
+  &lt;li&gt;List item 2&lt;/li&gt;
+  &lt;li&gt;List item 3&lt;/li&gt;
+&lt;/ul&gt;</pre>
+
+<p>或者如果列表项的顺序很重要，则使用有序列表：</p>
+
+<pre class="brush: html">&lt;ol&gt;
+  &lt;li&gt;List item 1&lt;/li&gt;
+  &lt;li&gt;List item 2&lt;/li&gt;
+  &lt;li&gt;List item 3&lt;/li&gt;
+&lt;/ol&gt;</pre>
+
+<div class="notecard note">
+  <h4>注意</h4>
+  <p>ARIA <code>list</code> / <code>listitem</code> 角色不区分有序列表和无序列表。</p>
+</div>
+
+<p>顺便说一句，请注意，如果您使用 {{HTMLElement("ol")}} 或 {{HTMLElement("ul")}} 的语义 HTML 元素并应用 <a href="/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_presentation_role"><code>presentation</code></a> 角色，则每个子 <code>li</code> 元素都会继承 <code>presentation</code> 角色，因为 ARIA 需要 <code>listitem</code> 元素具有父 <code>list</code> 元素。因此，<code>li</code> 元素不会暴露给辅助技术，但是包含在这些 <code>li</code> 元素中的元素，包括嵌套列表，对辅助技术是可见的。</p>
+
+<div class="notecard note">
+  <h4>注意</h4>
+  <p>如果要标记将用作选项卡式界面的项目列表，则应改为使用 <code>tab</code>、<code>tabpanel</code> 和 <code>tablist</code> 角色。</p>
+</div>
+
+<h2 id="Specifications">规范</h2>
+
+<table>
+  <tbody>
+  <tr>
+    <th scope="col">Specification</th>
+    <th scope="col">Status</th>
+  </tr>
+  <tr>
+    <td>{{SpecName("ARIA","#list","list")}}</td>
+    <td>{{Spec2('ARIA')}}</td>
+  </tr>
+  </tbody>
+</table>
+
+<h2 id="Screen_reader_support">屏幕阅读器支持</h2>
+
+<p>TBD</p>
+
+<h2 id="See_also">相关链接</h2>
+
+<ul>
+  <li><a href="https://wicg.github.io/aom/spec/">Accessibility Object Model</a></li>
+  <li><a href="https://w3c.github.io/html-aria/">ARIA in HTML</a></li>
+  <li>{{HTMLElement("ul")}}</li>
+  <li>{{HTMLElement("ol")}}</li>
+  <li>{{HTMLElement("li")}}</li>
+  <li><a href="/zh-CN/docs/Web/Accessibility/ARIA/Roles/Listitem_role">ARIA: listitem role</a></li>
+  <li><a href="/zh-CN/docs/Web/Accessibility/ARIA/Roles/group_role">ARIA: group role</a></li>
+</ul>
+
+<section id="Quick_links">
+  <ol>
+    <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles"><strong>WAI-ARIA roles</strong></a>{{ListSubpagesForSidebar("/en-US/docs/Web/Accessibility/ARIA/Roles")}}</li>
+  </ol>
+</section>
diff --git a/files/zh-cn/web/accessibility/aria/roles/listbox_role/index.html b/files/zh-cn/web/accessibility/aria/roles/listbox_role/index.html
new file mode 100644
index 0000000000..7c48e3add6
--- /dev/null
+++ b/files/zh-cn/web/accessibility/aria/roles/listbox_role/index.html
@@ -0,0 +1,220 @@
+---
+title: 'ARIA: listbox role'
+slug: Web/Accessibility/ARIA/Roles/listbox_role
+tags:
+  - ARIA
+  - 可访问性
+  - 无障碍
+translation_of: Web/Accessibility/ARIA/Roles/listbox_role
+---
+<p><code>listbox</code> 角色用于列表，用户可以从中选择一个或多个静态选项，并且与 HTML {{HTMLElement("select")}} 元素不同，它可能包含图像。</p>
+
+<h2 id="Description">描述</h2>
+
+<p><code>listbox</code> 角色用于标识创建列表的元素，用户可以从中选择一个或多个静态选项，类似于 HTML {{HTMLElement("select")}} 元素。与 {{HTMLElement("select")}} 不同，<code>listbox</code> 可以包含图像。<code>listbox</code> 的每个子项都应该有一个 <a href="https://www.w3.org/TR/2010/WD-wai-aria-20100916/roles#option"><code>option</code></a> role。</p>
+
+<p>强烈建议使用 HTML {{HTMLElement("select")}} 元素，如果只能选择一个选项，则使用一组单选按钮，如果可以选择多个选项，则使用一组复选框，因为有很多键盘交互来管理所有后代的焦点和原生 HTML 元素为您提供相关的功能。</p>
+
+<p>具有 <code>listbox</code> 角色的元素含有隐式的 <code>aria-orientation</code> 和 <code>vertical</code> 值。</p>
+
+<p>当一个列表被 tab 聚焦到时，如果没有其他内容，将会选择列表中的第一项。可以用 Up/Down 方向键在列表中导航，按 Shift + Up/Down 方向键将移动并扩展选择。键入一个或多个字母将在列表项中导航（相同的字母指向以那个开头的每个选项，不同的字母指向以整个字符串开头的第一个选项）。如果当前选项有关联的菜单， Shift+F10 将启动该菜单。如果项目可被勾选，Space 可用于切换 <a href="https://www.w3.org/TR/wai-aria-practices/#checkbox"><code>checkbox</code></a> role。对于可选择的列表项，Space 切换它们的选择，Shift+Space 可用于选择连续的项目，Ctrl+方向键 移动而不选择， Ctrl+Space 可用于选择非连续的项目。建议使用 checkbox、link 或其他方法来选择所有项目，为此可以使用 Ctrl+A 作为快捷键。</p>
+
+<p>当 listbox 角色被添加到元素中，或含有它的元素变得可见时，屏幕阅读器会在 listbox 获得焦点时读出它的 label 和 role。如果列表中的 option 或选项获得焦点，则接下来会读出它，如果屏幕阅读器支持，则会在列表中指示选项的位置。当焦点在列表中移动时，屏幕阅读器会读出相关选项。</p>
+
+<h3 id="Associated_ARIA_roles_states_and_properties">相关的 ARIA 角色、状态和属性</h3>
+
+<h4 id="Associated_Roles">相关角色</h4>
+
+<dl>
+  <dt><a href="/zh-CN/docs/Web/Accessibility/ARIA/Roles/option_role">option</a></dt>
+  <dd>需要一个或多个嵌套的 <code>option</code>。 所有被选择的选项都含有 <code>aria-selected</code> 且值为 <code>true</code>。所有未选中的选项都含有 <code>aria-selected</code> 且值为 <code>false</code>。 如果某个选项不可选择，<code>aria-selected</code> 会被忽略。</dd>
+  <dt><a href="/zh-CN/docs/Web/Accessibility/ARIA/Roles/List_role">list</a></dt>
+  <dd>包含 <code>listitem</code> 元素的部分</dd>
+</dl>
+
+<h4 id="States_and_Properties">状态和属性</h4>
+
+<dl>
+  <dt>aria-activedescendant</dt>
+  <dd>保存 listbox 中当前活动元素的 <code>id</code> 字符串。如果这是一个 option 元素，那么这将是最近与之交互选项的 <code>id</code>，无论该选项是否具有值为 <code>true</code> 的 <code>aria-selected</code>。即使在多选列表框中，也只会有一个 <code>id</code>。如果 <code>id</code> 不引用 listbox 的 DOM 后代，则 <code>id</code> 必须包含在 <code>aria-owns</code> 属性中的 ID 中。</dd>
+  <dt>aria-owns</dt>
+  <dd>这是一个以空格分隔的元素 ID 列表，它们不是 listbox 的 DOM 子元素。此处列出的 ID 也不能列在任何其他元素的 <code>aria-owns</code> 属性中。</dd>
+  <dt>aria-multiselectable</dt>
+  <dd>如果用户可以选择多个选项，则存在并设置为 <code>true</code>。如果设置为 <code>true</code>，<em>每个</em> 可选的选项都应包含 <code>aria-selected</code> 属性并设置为 <code>true</code> 或 <code>false</code>。 <em>不可选</em>的选项<em>不应该</em>具有<code>aria-selected</code>属性。</dd>
+  <dd>如果值为 <code>false</code> 或被省略，那么仅当前选中的选项（如果有任何选项被选中）才需要<code>aria-selected</code>属性，而且必须设置为<code>true</code>。</dd>
+  <dt>aria-required</dt>
+  <dd>一个布尔属性，指示必须选择具有非空字符串值的选项。</dd>
+  <dt>aria-readonly</dt>
+  <dd>用户无法更改选择或取消选择，但 listbox 是可操作的。</dd>
+  <dt>aria-label</dt>
+  <dd>一个可供人类阅读的字符串，用于标识 listbox。如果有可见标签，则应使用 <code>aria-labelledby</code> 来引用该标签。</dd>
+  <dt>aria-labelledby</dt>
+  <dd>标识以空格分隔的元素 ID 列表中的一个或多个可见元素，这些元素标识 listbox。如果没有可见标签，则应该使用 <code>aria-label</code> 来包含标签。 （注意：带有两个 L 的 "labelled" 是基于辅助功能 API 约定的正确拼写。）</dd>
+  <dt>aria-roledescription</dt>
+  <dd>一个可供人类阅读的字符串，可以更清楚地标识 listbox 的作用。屏幕阅读器通常会在阅读标签（如果存在）后向用户阅读此值，而不是说 “listbox”。</dd>
+</dl>
+
+<p>（有关更多详细信息以及 ARIA 状态和属性的完整列表，请参阅 <a href="https://www.w3.org/TR/wai-aria-1.1/#listbox">ARIA <code>listbox</code> (role)</a> 文档。 )</p>
+
+<h3 id="Keyboard_interactions">键盘交互</h3>
+
+<ul>
+  <li>当单选 listbox 获得焦点时：
+    <ul>
+      <li>如果在 listbox 获得焦点之前没有选择任何选项，则第一个选项将获得焦点。（可选）可以自动选择第一个选项。</li>
+      <li>如果在列表框获得焦点之前选择了一个选项，则焦点将设置在所选选项上。</li>
+    </ul>
+  </li>
+  <li>当多选 listbox 获得焦点时：
+    <ul>
+      <li>如果在列表框获得焦点之前没有选择任何选项，则焦点将设置在第一个选项上，并且选择状态不会自动更改。</li>
+      <li>如果在列表框获得焦点之前选择了一个或多个选项，则焦点将设置在列表中选定的第一个选项上。</li>
+    </ul>
+  </li>
+  <li><kbd>Down Arrow</kbd>: 将焦点移至下一个选项。（可选）在单选 listbox 中，选中的值也可以随焦点移动。</li>
+  <li><kbd>Up Arrow</kbd>: 将焦点移至上一个选项。（可选）在单选 listbox 中，选中的值也可以随焦点移动。</li>
+  <li><kbd>Home</kbd> (可选): 将焦点移至第一个选项。（可选）在单选列表框中，选中的值也可以随焦点移动。对于超过五个选项的列表，强烈建议支持此键。</li>
+  <li><kbd>End</kbd> (可选): 将焦点移至最后一个选项。（可选）在单选列表框中，选中的值也可以随焦点移动。对于超过五个选项的列表，强烈建议支持此键。</li>
+  <li>建议所有 listbox 都预先输入，尤其是那些有七个以上选项的列表框：
+    <ul>
+      <li>键入字符时：焦点移至名称符合键入的字符开头的一项。</li>
+      <li>快速连续键入多个字符时：焦点移至名称符合键入的字符串开头的一项。</li>
+    </ul>
+  </li>
+  <li><strong>多项选择</strong>: 作者可以实现两种交互模型中的任何一种来支持多选：推荐模型，不需要用户在导航列表时按住修饰键，例如 <kbd>Shift</kbd> 或 <kbd>Control</kbd> 或者需要在导航时按住修饰键以避免丢失选择状态的替代模型。
+    <ul>
+      <li>推荐的选择模型——不需要按住修饰键：
+        <ul>
+          <li><kbd>Space</kbd>: 更改焦点选项的选择状态。</li>
+          <li><kbd>Shift + Down Arrow</kbd> （可选）: 将焦点移动并切换到下一个选项的选定状态。</li>
+          <li><kbd>Shift + Up Arrow</kbd> （可选）: 将焦点移动并切换到上一个选项的选定状态。</li>
+          <li><kbd>Shift + Space</kbd> （可选）: 选择从最近选择的项目到焦点项目的连续项目。</li>
+          <li><kbd>Control + Shift + Home</kbd> （可选）: 选择焦点选项和直到第一个选项的所有选项。 （可选）将焦点移至第一个选项。</li>
+          <li><kbd>Control + Shift + End</kbd> （可选）: 选择焦点选项和直到最后一个选项的所有选项。 （可选）将焦点移到最后一个选项。</li>
+          <li><kbd>Control + A</kbd> （可选）: 选择列表中的所有选项。（可选）如果选择了所有选项，它也可以取消选择所有选项。</li>
+        </ul>
+      </li>
+    </ul>
+  </li>
+</ul>
+
+<h3 id="Required_JavaScript_features">所需的 JavaScript 功能</h3>
+
+<h4 id="selecting_an_option_in_a_single_select_listbox">在单选 listbox 中选择一个选项</h4>
+
+<p>当用户选择一个选项时，必须发生以下情况：</p>
+
+<ol>
+  <li>取消选择先前选择的选项，将 aria-selected 设置为 false，或完全删除该属性，将新未选择的选项的外观更改为未选择的。</li>
+  <li>选择新选择的选项，在该选项上设置 aria-selected="true" 并将新选择的选项的外观更改为选中。</li>
+  <li>将列表框上的 <code>aria-activedescendant</code> 值更新为新选择的选项的 id</li>
+  <li>可视化处理选项的丢焦、聚焦和选定状态</li>
+</ol>
+
+<h4 id="Toggling_the_state_of_an_option_in_a_multi_select_listbox">在多选列表框中切换选项的状态</h4>
+
+<p>当用户点击一个选项、聚焦在一个选项时按下 <kbd>Space</kbd>或者以其他方式切换一个选项的状态，必须发生以下情况：</p>
+
+<ol>
+  <li>切换当前聚焦选项的 aria-selected 状态，如果它是 false，则将 aria-selected 的状态更改为 true，如果为 true，则将其更改为 false。</li>
+  <li>更改选项的外观以反映其选定状态</li>
+  <li>将列表框上的 aria-activedescendant 值更新为用户刚刚与之交互的选项的 id，即使他们将选项切换为取消选择。</li>
+</ol>
+
+<div class="notecard note">
+  <p>ARIA 使用的第一原则是您可以使用具有内置语义和行为的原生功能，而不是重新利用元素并<strong>添加</strong> ARIA角色、状态或属性使其可访问。含有后代 {{HTMLElement("option")}} 元素的 {{HTMLElement("select")}} 元素带有所有需要的交互的原生处理方法。</p>
+</div>
+
+<h2 id="Examples">例子</h2>
+
+<h4 id="Example_1_A_single_select_listbox_that_uses_aria-activedescendant">例子 1: 使用 aria-activedescendant 的单个选择列表框</h4>
+
+<p>下面的代码片段显示了如何将列表框角色直接添加到 html 源代码中。</p>
+
+<pre class="brush: html">&lt;p id="listbox1label" role="label"&gt;Select a color:&lt;/p&gt;
+&lt;div role="listbox" tabindex="0" id="listbox1" aria-labelledby="listbox1label"
+  onclick="return listItemClick(event);"
+  onkeydown="return listItemKeyEvent(event);"
+  onkeypress="return listItemKeyEvent(event);"
+  aria-activedescendant="listbox1-1"&gt;
+    &lt;div role="option" id="listbox1-1" class="selected" aria-selected="true"&gt;Green&lt;/div&gt;
+    &lt;div role="option" id="listbox1-2"&gt;Orange&lt;/div&gt;
+    &lt;div role="option" id="listbox1-3"&gt;Red&lt;/div&gt;
+    &lt;div role="option" id="listbox1-4"&gt;Blue&lt;/div&gt;
+    &lt;div role="option" id="listbox1-5"&gt;Violet&lt;/div&gt;
+    &lt;div role="option" id="listbox1-6"&gt;Periwinkle&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>使用原生的 HTML {{HTMLElement("select")}} 和 {{HTMLElement("label")}} 元素可以更简单。</p>
+
+<pre class="brush: html">&lt;label for="listbox1"&gt;Select a color:&lt;/label&gt;
+&lt;select id="listbox1"&gt;
+   &lt;option selected&gt;Green&lt;/option&gt;
+   &lt;option&gt;Orange&lt;/option&gt;
+   &lt;option&gt;Red&lt;/option&gt;
+   &lt;option&gt;Blue&lt;/option&gt;
+   &lt;option&gt;Violet&lt;/option&gt;
+   &lt;option&gt;Periwinkle&lt;/option&gt;
+&lt;/select&gt;</pre>
+
+<h4 id="More_examples">更多例子</h4>
+
+<ul>
+  <li><a href="https://w3c.github.io/aria-practices/examples/listbox/listbox-scrollable.html">可滚动的 listbox 示例</a>: 滚动显示更多选项的单选 listbox，类似于 HTML <code>select</code> 的 <code>size</code> 属性大于 1。</li>
+  <li><a href="https://w3c.github.io/aria-practices/examples/listbox/listbox-collapsible.html">可折叠下拉 listbox 示例</a>: 激活时展开的单选可折叠 listbox，类似于 HTML <code>select</code> 并且属性 <code>size="1"</code>。</li>
+  <li><a href="https://w3c.github.io/aria-practices/examples/listbox/listbox-rearrangeable.html">具有可重新排列选项的 listbox 示例</a>: 带有可以添加、移动和删除选项的附带工具栏的单选和多选 listbox 的示例。</li>
+</ul>
+
+<h2 id="Best_practices">最佳实践</h2>
+
+<ul>
+  <li>为了便于键盘访问，作者应该对这个角色的所有后代进行 <a href="https://www.w3.org/TR/wai-aria-1.1/#managingfocus">焦点管理</a></li>
+  <li>建议作者在列表未聚焦时使用不同的样式进行选择，例如非活动选项通常以较浅的背景颜色显示。</li>
+  <li>如果 listbox 不是另一个组件的一部分，那么它应该具有 <code>aria-labelledby</code> 属性。</li>
+  <li>如果一个或多个条目不是 listbox 的 DOM 子项，则需要设置额外的 <code>aria-*</code> 属性（参见 <a href="https://www.w3.org/TR/wai-aria-practices/#listbox_div">ARIA Best Practices</a>)。</li>
+  <li>如果有理由 <a href="https://www.w3.org/TR/wai-aria-1.1/#aria-expanded">展开</a> 列表框，<a href="/zh-CN/docs/Web/Accessibility/ARIA/Roles/combobox_role"><code>combobox</code></a> 角色可能更合适。</li>
+</ul>
+
+<h2 id="Specifications">规范</h2>
+
+<table>
+  <tbody>
+  <tr>
+    <th scope="col">规范</th>
+    <th scope="col">状态</th>
+  </tr>
+  <tr>
+    <td>{{SpecName("ARIA","#listbox","ARIA listbox role")}}</td>
+    <td>{{Spec2('ARIA')}}</td>
+  </tr>
+  <tr>
+    <td>{{SpecName("ARIA Authoring Practices","#Listbox","Listbox Role")}}</td>
+    <td>{{Spec2('ARIA Authoring Practices')}}</td>
+  </tr>
+  </tbody>
+</table>
+
+<h2 id="Screen_reader_support">屏幕阅读器支持</h2>
+
+<p>TBD</p>
+
+<h2 id="See_also">另见</h2>
+
+<ul>
+  <li>{{HTMLElement("select")}} 元素</li>
+  <li>{{HTMLElement("label")}} 元素</li>
+  <li>{{HTMLElement("option")}} 元素</li>
+  <li><a href="/zh-CN/docs/Web/Accessibility/ARIA/Roles/combobox_role">ARIA: <code>combobox</code> 角色</a></li>
+  <li><a href="/zh-CN/docs/Web/Accessibility/ARIA/Roles/option_role">ARIA: <code>option</code> 角色</a></li>
+  <li><a href="/zh-CN/docs/Web/Accessibility/ARIA/Roles/List_role">ARIA: <code>list</code> 角色</a></li>
+  <li><a href="/zh-CN/docs/Web/Accessibility/ARIA/Roles/Listitem_role">ARIA: <code>listitem</code> 角色</a></li>
+  <li><a href="https://www.w3.org/TR/wai-aria-practices/#Listbox">ARIA Best Practices – Listbox</a></li>
+  <li><a href="https://www.w3.org/TR/wai-aria-1.1/#listbox">ARIA Role Model – Listbox</a></li>
+</ul>
+
+<section id="Quick_links">
+  <ol>
+    <li><a href="/zh-CN/docs/Web/Accessibility/ARIA/Roles"><strong>WAI-ARIA roles</strong></a>{{ListSubpagesForSidebar("/en-US/docs/Web/Accessibility/ARIA/Roles")}}</li>
+  </ol>
+</section>
diff --git a/files/zh-cn/web/accessibility/aria/roles/listitem_role/index.html b/files/zh-cn/web/accessibility/aria/roles/listitem_role/index.html
new file mode 100644
index 0000000000..a4f9bb691d
--- /dev/null
+++ b/files/zh-cn/web/accessibility/aria/roles/listitem_role/index.html
@@ -0,0 +1,120 @@
+---
+title: 'ARIA: listitem role'
+slug: Web/Accessibility/ARIA/Roles/Listitem_role
+tags:
+- ARIA
+- ARIA Role
+- ARIA listitem
+- 可访问性
+- 无障碍
+- Reference
+- Role
+- listitem
+---
+<p>ARIA <code>listitem</code> 角色可用于标识项目列表中的项目。它通常与 <code>list</code> 角色结合使用，用于标识列表容器。</p>
+
+<pre class="brush: html">&lt;section role="list"&gt;
+  &lt;div role="listitem"&gt;List item 1&lt;/div&gt;
+  &lt;div role="listitem"&gt;List item 2&lt;/div&gt;
+  &lt;div role="listitem"&gt;List item 3&lt;/div&gt;
+&lt;/section&gt;
+</pre>
+
+<h2 id="Description">描述</h2>
+
+<p>任何由外部容器和内部元素列表组成的内容都可以分别使用 <code>list</code> 和 <code>listitem</code> 容器识别为辅助技术。</p>
+
+<p>关于应该使用哪些元素来标记 <code>list</code> 和 <code>listitem</code> 没有硬性规定，但是您应该确保 <code>listitem</code> 在列表的上下文中有意义，例如购物清单、食谱步骤、行车路线。</p>
+
+<div class="notecard warning">
+  <h4>警告</h4>
+  <p>如果可能，您应该使用适当的语义化 HTML 元素来标记 <code>list</code> 及其 <code>listitem</code>，如 {{HTMLElement("ul")}}、{{HTMLElement("ol")}} 和 {{HTMLElement("li")}}。有关完整示例，请参阅 {{anch("Best_practices", "最佳实践")}}。</p>
+</div>
+
+<h3 id="Associated_WAI-ARIA_Roles_States_and_Properties">关联的 WAI-ARIA 角色、状态和属性</h3>
+
+<dl>
+  <dt><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/List_role">list</a></dt>
+  <dd><p>项目列表。角色为 <code>list</code> 的元素必须有一个或多个角色为 <code>listitem</code> 的元素作为子元素，一个或多个角色为 <code>group</code> 的元素具有一个或多个具有 <code>listitem</code> 角色的元素作为子元素。</p></dd>
+  <dt><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/group_role">group</a></dt>
+  <dd><p>相关对象的集合，在嵌套在列表中时仅限于列表项，其重要性不足以在页面目录中拥有自己的位置。</p></dd>
+</dl>
+
+<h3 id="Keyboard_Interactions">键盘交互</h3>
+
+<p>无</p>
+
+<h3 id="Required_JavaScript_features">所需的 JavaScript 功能</h3>
+
+<p>无</p>
+
+<h2 id="Examples">示例</h2>
+
+<p><a href="https://www.scottohara.me/blog/2018/05/26/aria-lists.html">ARIA Lists</a> — Scott O'Hara 的一些有用的例子和想法</p>
+
+<h2 id="Best_practices">最佳实践</h2>
+
+<p>仅在必要时使用 <code>role="list"</code> 和 <code>role="listitem"</code>。例如，无法控制 HTML 但能够在之后动态使用 JavaScript 提升可访问性的时候。</p>
+
+<p>与 HTML {{HTMLElement("ol")}} 和 {{HTMLElement("ul")}} 不同，ARIA <code>list</code> 角色不区分有序列表和无序列表。如果可能，您应该使用适当的语义 HTML 元素来标记列表（{{HTMLElement("ol")}} 和 {{HTMLElement("ul")}}）和列表项（{{HTMLElement("li")}})。例如，我们上面的例子应该改写如下：</p>
+
+<pre class="brush: html">&lt;ul&gt;
+  &lt;li&gt;List item 1&lt;/li&gt;
+  &lt;li&gt;List item 2&lt;/li&gt;
+  &lt;li&gt;List item 3&lt;/li&gt;
+&lt;/ul&gt;</pre>
+
+<p>或者如果列表项的顺序很重要，则使用有序列表：</p>
+
+<pre class="brush: html">&lt;ol&gt;
+  &lt;li&gt;List item 1&lt;/li&gt;
+  &lt;li&gt;List item 2&lt;/li&gt;
+  &lt;li&gt;List item 3&lt;/li&gt;
+&lt;/ol&gt;</pre>
+
+<div class="notecard note">
+  <h4>注意</h4>
+  <p>ARIA <code>list</code> / <code>listitem</code> 角色不区分有序列表和无序列表。</p>
+</div>
+
+<div class="notecard note">
+  <h4>注意</h4>
+  <p>如果要标记将用作选项卡式界面的项目列表，则应改为使用 <code>tab</code>、<code>tabpanel</code> 和 <code>tablist</code> 角色。</p>
+</div>
+
+<h2 id="Specifications">规范</h2>
+
+<table>
+  <tbody>
+  <tr>
+    <th scope="col">Specification</th>
+    <th scope="col">Status</th>
+  </tr>
+  <tr>
+    <td>{{SpecName("ARIA","#listitem","listitem")}}</td>
+    <td>{{Spec2('ARIA')}}</td>
+  </tr>
+  </tbody>
+</table>
+
+<h2 id="Screen_reader_support">屏幕阅读器支持</h2>
+
+<p>TBD</p>
+
+<h2 id="See_also">相关链接</h2>
+
+<ul>
+  <li><a href="https://wicg.github.io/aom/spec/">Accessibility Object Model</a></li>
+  <li><a href="https://w3c.github.io/html-aria/">ARIA in HTML</a></li>
+  <li>{{HTMLElement("ul")}}</li>
+  <li>{{HTMLElement("ol")}}</li>
+  <li>{{HTMLElement("li")}}</li>
+  <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/List_role">ARIA: list role</a></li>
+  <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/group_role" rel="nofollow">ARIA: group role</a></li>
+</ul>
+
+<section id="Quick_links">
+  <ol>
+    <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles"><strong>WAI-ARIA roles</strong></a>{{ListSubpagesForSidebar("/en-US/docs/Web/Accessibility/ARIA/Roles")}}</li>
+  </ol>
+</section>
diff --git a/files/zh-cn/web/api/atob/index.html b/files/zh-cn/web/api/atob/index.html
new file mode 100644
index 0000000000..4679dec8c5
--- /dev/null
+++ b/files/zh-cn/web/api/atob/index.html
@@ -0,0 +1,75 @@
+---
+title: WindowOrWorkerGlobalScope.atob()
+slug: Web/API/atob
+tags:
+  - API
+  - Base64
+  - DOM
+  - WindowOrWorkerGlobalScope
+  - atob
+  - 参考
+  - 方法
+translation_of: Web/API/WindowOrWorkerGlobalScope/atob
+original_slug: Web/API/WindowOrWorkerGlobalScope/atob
+---
+<p>{{APIRef("HTML DOM")}}</p>
+
+<p><strong><code>WindowOrWorkerGlobalScope.atob()</code></strong> 对经过 base-64 编码的字符串进行解码。你可以使用 {{domxref("WindowBase64.btoa","window.btoa()")}} 方法来编码一个可能在传输过程中出现问题的数据，并且在接受数据之后，使用 atob() 方法再将数据解码。例如：你可以编码、传输和解码操作各种字符，比如 0-31 的 ASCII 码值。</p>
+
+<p>关于针对 Unicode 或者 UTF-8 的应用方面，请查看 <a href="/en-US/docs/Web/JavaScript/Base64_encoding_and_decoding#The_.22Unicode_Problem.22">this note at Base64 encoding and decoding</a> 和 <a href="/en-US/docs/Web/API/window.btoa#Unicode_Strings"><code>btoa()</code> 的备注</a>。</p>
+
+<h2 id="语法">语法</h2>
+
+<pre class="syntaxbox">var decodedData = scope.atob(<em>encodedData</em>);</pre>
+
+<h3 id="异常">异常</h3>
+
+<p>如果传入字符串不是有效的 base64 字符串，比如其长度不是 4 的倍数，则抛出{{jsxref("DOMException")}}。</p>
+
+<h2 id="示例">示例</h2>
+
+<pre class="brush:js">let encodedData = window.btoa("Hello, world"); // 编码
+let decodedData = window.atob(encodedData);    // 解码
+</pre>
+
+<h2 id="Specification" name="Specification">规范</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#dom-windowbase64-atob', 'WindowBase64.atob()')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>No change since the latest snapshot, {{SpecName("HTML5.1")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', '#dom-windowbase64-atob', 'WindowBase64.atob()')}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>Snapshot of {{SpecName("HTML WHATWG")}}. No change.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5 W3C", "#dom-windowbase64-atob", "WindowBase64.atob()")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Snapshot of {{SpecName("HTML WHATWG")}}. Creation of <code>WindowBase64</code> (properties were on the target before it).</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">浏览器兼容性</h2>
+
+<p>{{Compat("api.WindowOrWorkerGlobalScope.atob")}}</p>
+
+<h2 id="See_also" name="See_also">参见</h2>
+
+<ul>
+ <li><a href="/Web/API/WindowBase64/Base64_encoding_and_decoding">Base64 encoding and decoding</a></li>
+ <li><a href="/en-US/docs/data_URIs"><code>data</code> URIs</a></li>
+ <li>{{domxref("WindowOrWorkerGlobalScope.btoa","window.btoa()")}}</li>
+ <li><a href="/en-US/docs/Components.utils.importGlobalProperties">Components.utils.importGlobalProperties</a></li>
+</ul>
diff --git a/files/zh-cn/web/api/btoa/index.html b/files/zh-cn/web/api/btoa/index.html
new file mode 100644
index 0000000000..1ff44702a1
--- /dev/null
+++ b/files/zh-cn/web/api/btoa/index.html
@@ -0,0 +1,172 @@
+---
+title: WindowOrWorkerGlobalScope.btoa()
+slug: Web/API/btoa
+tags:
+  - API
+  - Base64
+  - Web
+  - WindowOrWorkerGlobalScope
+  - 参考
+  - 字符串
+  - 数据
+  - 方法
+translation_of: Web/API/WindowOrWorkerGlobalScope/btoa
+original_slug: Web/API/WindowOrWorkerGlobalScope/btoa
+---
+<p>{{APIRef("HTML DOM")}}</p>
+
+<p><strong><code>WindowOrWorkerGlobalScope.btoa()</code> </strong> 从 {{jsxref("String")}} 对象中创建一个 base-64 编码的 ASCII 字符串，其中字符串中的每个字符都被视为一个二进制数据字节。</p>
+
+<div class="note">
+<p><strong>Note</strong>: 由于这个函数将每个字符视为二进制数据的字节，而不管实际组成字符的字节数是多少，所以如果任何字符的{{Glossary("code point", "码位")}}超出 <code>0x00</code> ~ <code>0xFF</code> 这个范围，则会引发 <code>InvalidCharacterError</code> 异常。请参阅 {{anch("Unicode_字符串")}} ，该示例演示如何编码含有码位超出 <code>0x00</code> ~ <code>0xFF</code> 范围的字符的字符串。</p>
+</div>
+
+<h2 id="语法">语法</h2>
+
+<pre class="syntaxbox">let encodedData = window.btoa(<var>stringToEncode</var>);
+</pre>
+
+<h3 id="参数">参数</h3>
+
+<dl>
+ <dt><code>stringToEncode</code></dt>
+ <dd>一个字符串, 其字符分别表示要编码为 ASCII 的二进制数据的单个字节。</dd>
+</dl>
+
+<h3 id="返回值">返回值</h3>
+
+<p>一个包含 <code>stringToEncode</code> 的 Base64 表示的字符串。</p>
+
+<h2 id="示例">示例</h2>
+
+<pre class="brush: js">let encodedData = window.btoa("Hello, world"); // 编码
+let decodedData = window.atob(encodedData);    // 解码
+</pre>
+
+<h2 id="备注">备注</h2>
+
+<p>你可以使用此方法对可能导致通信问题的数据进行编码，传输，然后使用 <code>{{domxref("WindowOrWorkerGlobalScope.atob","atob()")}}</code> 方法再次解码数据。例如，可以编码控制字符，包括 ASCII 值为 0 到 31 的字符。</p>
+
+<p>在用 JavaScript 编写 XPCOM 组件时，<code>btoa()</code> 方法也是可用的，虽然全局对象已经不是 {{domxref("Window")}} 了。</p>
+
+<h2 id="Unicode_字符串">Unicode 字符串</h2>
+
+<p>在多数浏览器中，使用 <code>btoa()</code> 对 Unicode 字符串进行编码都会触发 <code>InvalidCharacterError</code> 异常。</p>
+
+<p>一种选择是转义任何扩展字符，以便实际编码的字符串是原始字符的 ASCII 表示形式。考虑这个例子，代码来自 <a href="http://ecmanaut.blogspot.com/2006/07/encoding-decoding-utf8-in-javascript.html">Johan Sundström</a>：</p>
+
+<pre class="brush: js" id="txt">// ucs-2 string to base64 encoded ascii
+function utoa(str) {
+    return window.btoa(unescape(encodeURIComponent(str)));
+}
+// base64 encoded ascii to ucs-2 string
+function atou(str) {
+    return decodeURIComponent(escape(window.atob(str)));
+}
+// Usage:
+utoa('✓ à la mode'); // 4pyTIMOgIGxhIG1vZGU=
+atou('4pyTIMOgIGxhIG1vZGU='); // "✓ à la mode"
+
+utoa('I \u2661 Unicode!'); // SSDimaEgVW5pY29kZSE=
+atou('SSDimaEgVW5pY29kZSE='); // "I ♡ Unicode!"
+</pre>
+
+<p dir="ltr" id="tw-target-text">更好、更可靠、性能更优异的解决方案是使用类型化数组进行转换。</p>
+
+<h2 id="规范">规范</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">规范</th>
+   <th scope="col">状态</th>
+   <th scope="col">备注</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#dom-btoa', 'WindowOrWorkerGlobalScope.btoa()')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Method moved to the <code>WindowOrWorkerGlobalScope</code> mixin in the latest spec.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', '#dom-windowbase64-btoa', 'WindowBase64.btoa()')}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>Snapshot of {{SpecName("HTML WHATWG")}}. No change.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5 W3C", "#dom-windowbase64-btoa", "WindowBase64.btoa()")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Snapshot of {{SpecName("HTML WHATWG")}}. Creation of <code>WindowBase64</code> (properties where on the target before it).</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<pre class="brush: js">// Polyfill from  <a href="https://github.com/MaxArt2501/base64-js/blob/master/base64.js">https://github.com/MaxArt2501/base64-js/blob/master/base64.js
+</a>(function() {
+    // base64 character set, plus padding character (=)
+    var b64 = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=",
+
+        // Regular expression to check formal correctness of base64 encoded strings
+        b64re = /^(?:[A-Za-z\d+\/]{4})*?(?:[A-Za-z\d+\/]{2}(?:==)?|[A-Za-z\d+\/]{3}=?)?$/;
+
+    window.btoa = window.btoa || function(string) {
+        string = String(string);
+        var bitmap, a, b, c,
+            result = "",
+            i = 0,
+            rest = string.length % 3; // To determine the final padding
+
+        for (; i &lt; string.length;) {
+            if ((a = string.charCodeAt(i++)) &gt; 255 ||
+                (b = string.charCodeAt(i++)) &gt; 255 ||
+                (c = string.charCodeAt(i++)) &gt; 255)
+                throw new TypeError("Failed to execute 'btoa' on 'Window': The string to be encoded contains characters outside of the Latin1 range.");
+
+            bitmap = (a &lt;&lt; 16) | (b &lt;&lt; 8) | c;
+            result += b64.charAt(bitmap &gt;&gt; 18 &amp; 63) + b64.charAt(bitmap &gt;&gt; 12 &amp; 63) +
+                b64.charAt(bitmap &gt;&gt; 6 &amp; 63) + b64.charAt(bitmap &amp; 63);
+        }
+
+        // If there's need of padding, replace the last 'A's with equal signs
+        return rest ? result.slice(0, rest - 3) + "===".substring(rest) : result;
+    };
+
+    window.atob = window.atob || function(string) {
+        // atob can work with strings with whitespaces, even inside the encoded part,
+        // but only \t, \n, \f, \r and ' ', which can be stripped.
+        string = String(string).replace(/[\t\n\f\r ]+/g, "");
+        if (!b64re.test(string))
+            throw new TypeError("Failed to execute 'atob' on 'Window': The string to be decoded is not correctly encoded.");
+
+        // Adding the padding if missing, for semplicity
+        string += "==".slice(2 - (string.length &amp; 3));
+        var bitmap, result = "",
+            r1, r2, i = 0;
+        for (; i &lt; string.length;) {
+            bitmap = b64.indexOf(string.charAt(i++)) &lt;&lt; 18 | b64.indexOf(string.charAt(i++)) &lt;&lt; 12 |
+                (r1 = b64.indexOf(string.charAt(i++))) &lt;&lt; 6 | (r2 = b64.indexOf(string.charAt(i++)));
+
+            result += r1 === 64 ? String.fromCharCode(bitmap &gt;&gt; 16 &amp; 255) :
+                r2 === 64 ? String.fromCharCode(bitmap &gt;&gt; 16 &amp; 255, bitmap &gt;&gt; 8 &amp; 255) :
+                String.fromCharCode(bitmap &gt;&gt; 16 &amp; 255, bitmap &gt;&gt; 8 &amp; 255, bitmap &amp; 255);
+        }
+        return result;
+    };
+})()
+</pre>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+<p>{{Compat("api.WindowOrWorkerGlobalScope.btoa")}}</p>
+
+<h2 id="参见">参见</h2>
+
+<ul>
+ <li>{{domxref("WindowBase64/Base64_encoding_and_decoding", "Base64 encoding and decoding")}}</li>
+ <li><a href="/zh-CN/docs/data_URIs"><code>data</code> URI</a></li>
+ <li>{{domxref("WindowOrWorkerGlobalScope.atob","atob()")}}</li>
+ <li><a href="/zh-CN/docs/Components.utils.importGlobalProperties">Components.utils.importGlobalProperties</a></li>
+</ul>
diff --git a/files/zh-cn/web/api/caches/index.html b/files/zh-cn/web/api/caches/index.html
new file mode 100644
index 0000000000..73c9fe5b30
--- /dev/null
+++ b/files/zh-cn/web/api/caches/index.html
@@ -0,0 +1,128 @@
+---
+title: WindowOrWorkerGlobalScope.caches
+slug: Web/API/caches
+translation_of: Web/API/WindowOrWorkerGlobalScope/caches
+original_slug: Web/API/WindowOrWorkerGlobalScope/caches
+---
+<p>{{APIRef()}}{{SeeCompatTable}}</p>
+
+<p><code><strong>caches</strong></code> 是{{domxref("WindowOrWorkerGlobalScope")}}接口的一个只读属性，它返回了与当前上下文紧密相关的{{domxref("CacheStorage")}}对象。此对象激活了诸如存储用于离线使用的资产，并生成对请求生成自定义响应等功能。</p>
+
+<h2 id="语法">语法</h2>
+
+<pre class="syntaxbox">var <em>myCacheStorage</em> = self.caches; // or just caches
+</pre>
+
+<h3 id="值">值</h3>
+
+<p>{{domxref("CacheStorage")}} 对象.</p>
+
+<h2 id="例子">例子</h2>
+
+<p>下面的例子展示了你在<a href="/en-US/docs/Web/API/Service_Worker_API">service worker</a>上下文中如何应该运用cache对离线资产的进行存储。</p>
+
+<pre class="brush: js">this.addEventListener('install', function(event) {
+  event.waitUntil(
+    caches.open('v1').then(function(cache) {
+      return cache.addAll(
+        '/sw-test/',
+        '/sw-test/index.html',
+        '/sw-test/style.css',
+        '/sw-test/app.js',
+        '/sw-test/image-list.js',
+        '/sw-test/star-wars-logo.jpg',
+        '/sw-test/gallery/',
+        '/sw-test/gallery/bountyHunters.jpg',
+        '/sw-test/gallery/myLittleVader.jpg',
+        '/sw-test/gallery/snowTroopers.jpg'
+      );
+    })
+  );
+});</pre>
+
+<h2 id="规范">规范</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Service Workers', '#self-caches', 'caches')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Defined in a <code>WindowOrWorkerGlobalScope</code> partial in the newest spec.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Service Workers')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>40.0</td>
+   <td>{{CompatGeckoDesktop(42)}}<br>
+    {{CompatGeckoDesktop(52)}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(42)}}<br>
+    {{CompatGeckoMobile(52)}}<sup>[1]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] <code>caches 现在被定义在</code> {{domxref("WindowOrWorkerGlobalScope")}} 中的mixin里.</p>
+
+<h2 id="相关链接">相关链接</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/ServiceWorker_API">Service Workers</a></li>
+ <li><a href="/en-US/docs/Web/API/Web_Workers_API">Web Workers</a></li>
+ <li>{{domxref("CacheStorage")}}</li>
+ <li>{{domxref("Cache")}}</li>
+</ul>
diff --git a/files/zh-cn/web/api/canvas_api/index.html b/files/zh-cn/web/api/canvas_api/index.html
index c10f589b23..b2bb060ed4 100644
--- a/files/zh-cn/web/api/canvas_api/index.html
+++ b/files/zh-cn/web/api/canvas_api/index.html
@@ -135,4 +135,4 @@ ctx.fillRect(10, 10, 150, 100);</code></pre>
  <li><a href="/en-US/docs/Web/WebGL">WebGL</a></li>
 </ul>
 
-<section id="Quick_Links"></section>
+<section id="Quick_links"></section>
diff --git a/files/zh-cn/web/api/clearinterval/index.html b/files/zh-cn/web/api/clearinterval/index.html
new file mode 100644
index 0000000000..3ba4544b4b
--- /dev/null
+++ b/files/zh-cn/web/api/clearinterval/index.html
@@ -0,0 +1,75 @@
+---
+title: WindowTimers.clearInterval()
+slug: Web/API/clearInterval
+tags:
+  - API
+  - WindowOrWorkerGlobalScope
+  - 参考
+  - 方法
+translation_of: Web/API/WindowOrWorkerGlobalScope/clearInterval
+original_slug: Web/API/WindowOrWorkerGlobalScope/clearInterval
+---
+<div>{{ApiRef("HTML DOM")}}</div>
+
+<p>{{domxref("WindowOrWorkerGlobalScope")}} mixin 的 <strong><code>clearInterval()</code></strong> 方法可取消先前通过 {{domxref("WindowOrWorkerGlobalScope.setInterval", "setInterval()")}} 设置的重复定时任务。</p>
+
+<h2 id="语法">语法</h2>
+
+<pre class="syntaxbox"><em>scope</em>.clearInterval(<var>intervalID</var>)
+</pre>
+
+<h3 id="Parameters">Parameters</h3>
+
+<dl>
+ <dt><code>intervalID</code></dt>
+ <dd>要取消的定时器的 ID。是由 <code>setInterval()</code> 返回的。</dd>
+</dl>
+
+<p>值得一提的是，{{domxref("WindowOrWorkerGlobalScope.setInterval", "setInterval()")}} 和 {{domxref("WindowOrWorkerGlobalScope.setTimeout", "setTimeout()")}} 共用其定义的 IDs，即可以使用 <code>clearInterval()</code> 和 {{domxref("WindowOrWorkerGlobalScope.clearTimeout", "clearTimeout()")}} 中的任意一个。然而，为了使代码可读性更强，你应该尽量避免这种用法。</p>
+
+<h3 id="返回值">返回值</h3>
+
+<p>{{jsxref("undefined")}}</p>
+
+<h2 id="示例">示例</h2>
+
+<p>查看 <a href="/en-US/docs/DOM/window.setInterval#Example"><code>setInterval()</code> 的示例</a>。</p>
+
+<h2 id="Specification" name="Specification">规范</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">规范</th>
+   <th scope="col">状态</th>
+   <th scope="col">备注</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'webappapis.html#dom-clearinterval', 'WindowOrWorkerGlobalScope.clearInterval()')}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td>Method moved to the <code>WindowOrWorkerGlobalScope</code> mixin in the latest spec.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'webappapis.html#dom-clearinterval', 'clearInterval()')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+
+
+<p>{{Compat("api.WindowOrWorkerGlobalScope.clearInterval")}}</p>
+
+<h2 id="参见">参见</h2>
+
+<ul>
+ <li><a href="/en-US/docs/JavaScript/Timers" title="JavaScript/Timers">JavaScript 定时器</a></li>
+ <li>{{domxref("WindowOrWorkerGlobalScope.setTimeout")}}</li>
+ <li>{{domxref("WindowOrWorkerGlobalScope.setInterval")}}</li>
+ <li>{{domxref("WindowOrWorkerGlobalScope.clearTimeout")}}</li>
+ <li>{{domxref("Window.requestAnimationFrame")}}</li>
+ <li><a href="/en-US/docs/JavaScript/Timers/Daemons" title="JavaScript/Timers/Daemons"><em>Daemons</em> management</a></li>
+</ul>
diff --git a/files/zh-cn/web/api/cleartimeout/index.html b/files/zh-cn/web/api/cleartimeout/index.html
new file mode 100644
index 0000000000..30648c48b7
--- /dev/null
+++ b/files/zh-cn/web/api/cleartimeout/index.html
@@ -0,0 +1,151 @@
+---
+title: WindowOrWorkerGlobalScope.clearTimeout()
+slug: Web/API/clearTimeout
+tags:
+  - API
+  - WindowOrWorkerGlobalScope
+  - clearTimeout
+translation_of: Web/API/WindowOrWorkerGlobalScope/clearTimeout
+original_slug: Web/API/WindowOrWorkerGlobalScope/clearTimeout
+---
+<div>
+<div>{{APIRef("HTML DOM")}}</div>
+</div>
+
+<p>{{domxref("WindowOrWorkerGlobalScope")}}内置的<strong><code>clearTimeout()</code></strong>方法取消了先前通过调用{{domxref("WindowOrWorkerGlobalScope.setTimeout", "setTimeout()")}}建立的定时器。</p>
+
+<h2 id="Syntax" name="Syntax">语法</h2>
+
+<pre class="notranslate"><em>scope</em>.clearTimeout(<em>timeoutID</em>)</pre>
+
+
+
+<h3 id="Parameters">Parameters</h3>
+
+<dl>
+ <dt><code>timeoutID</code></dt>
+ <dd>您要取消定时器的标识符。 该ID由相应的<code>setTimeout()</code>调用返回。</dd>
+</dl>
+
+<p>值得注意的是，{{domxref("WindowOrWorkerGlobalScope.setTimeout", "setTimeout()")}}和{{domxref("WindowOrWorkerGlobalScope.setInterval", "setInterval()")}}使用共享的ID池， 意味着在技术上可以混用<code>clearTimeout()</code>和{{domxref("WindowOrWorkerGlobalScope.clearInterval", "clearInterval()")}} 。 但是，为了清楚起见，你应该避免这样做。</p>
+
+<h2 id="Example" name="Example">示例</h2>
+
+<p>在一个网页中运行如下脚本，并且点击一次页面。一秒钟后你会看见弹出一条信息。如果你在一秒内不停点击页面，弹出框将不再出现。</p>
+
+<pre class="brush: js notranslate">var alarm = {
+  remind: function(aMessage) {
+    alert(aMessage);
+    delete this.timeoutID;
+  },
+
+  setup: function() {
+    this.cancel();
+    var self = this;
+    this.timeoutID = window.setTimeout(function(msg) {self.remind(msg);}, 1000, "Wake up!");
+  },
+
+  cancel: function() {
+    if(typeof this.timeoutID == "number") {
+      window.clearTimeout(this.timeoutID);
+      delete this.timeoutID;
+    }
+  }
+};
+window.onclick = function() { alarm.setup() };</pre>
+
+<h2 id="Notes" name="Notes">注意</h2>
+
+<p>传入一个错误的 ID 给 <code>clearTimeout()</code>不会有任何影响；也不会抛出异常。</p>
+
+<h2 id="Specification" name="Specification">规范</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'webappapis.html#dom-cleartimeout', 'WindowOrWorkerGlobalScope.clearTimeout()')}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td>Method moved to the <code>WindowOrWorkerGlobalScope</code> mixin in the latest spec.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'webappapis.html#dom-cleartimeout', 'clearTimeout()')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容">浏览器兼容</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1")}}<br>
+    {{CompatGeckoDesktop("52")}}<sup>[1]</sup></td>
+   <td>4.0</td>
+   <td>4.0</td>
+   <td>1.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>1.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1")}}<br>
+    {{CompatGeckoMobile("52")}}<sup>[1]</sup></td>
+   <td>6.0</td>
+   <td>6.0</td>
+   <td>1.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] <code>clearTimeout()</code> now defined on {{domxref("WindowOrWorkerGlobalScope")}} mixin.</p>
+
+<h2 id="See_also" name="See_also">更多</h2>
+
+<ul>
+ <li>{{domxref("WindowTimers.setTimeout()")}}</li>
+ <li>{{domxref("WindowTimers.setInterval()")}}</li>
+ <li>{{domxref("WindowTimers.clearInterval()")}}</li>
+ <li>{{domxref("Window.requestAnimationFrame()")}}</li>
+ <li><a href="/en-US/docs/JavaScript/Timers/Daemons" title="JavaScript/Timers/Daemons"><em>Daemons</em> management</a></li>
+</ul>
diff --git a/files/zh-cn/web/api/createimagebitmap/index.html b/files/zh-cn/web/api/createimagebitmap/index.html
new file mode 100644
index 0000000000..c71c592551
--- /dev/null
+++ b/files/zh-cn/web/api/createimagebitmap/index.html
@@ -0,0 +1,208 @@
+---
+title: self.createImageBitmap()
+slug: Web/API/createImageBitmap
+translation_of: Web/API/WindowOrWorkerGlobalScope/createImageBitmap
+original_slug: Web/API/WindowOrWorkerGlobalScope/createImageBitmap
+---
+<div>{{APIRef("Canvas API")}}</div>
+
+<p><code><strong>createImageBitmap</strong></code> 方法存在 windows 和 workers 中. 它接受各种不同的图像来源, 并返回一个{{domxref("Promise")}}, resolve为{{domxref("ImageBitmap")}}. 可选地参数,图像被剪裁成自（sx，sy）且宽度为sw,高度为sh的像素的矩形。</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre>createImageBitmap(<em>image</em>[, options]).then(function(response) { ... });
+createImageBitmap(<em>image, sx, sy, sw, sh</em>[, options]).then(function(response) { ... });
+</pre>
+
+<h3 id="Parameters">Parameters</h3>
+
+<dl>
+ <dt><code>image</code></dt>
+ <dd>一个图像源, 可以是一个 {{HTMLElement("img")}}, SVG {{SVGElement("image")}}, {{HTMLElement("video")}}, {{HTMLElement("canvas")}}, {{domxref("HTMLImageElement")}}, {{domxref("SVGImageElement")}}, {{domxref("HTMLVideoElement")}}, {{domxref("HTMLCanvasElement")}}, {{domxref("Blob")}}, {{domxref("ImageData")}}, {{domxref("ImageBitmap")}}, 或 {{domxref("OffscreenCanvas")}} 对象.</dd>
+ <dt><code>sx</code></dt>
+ <dd>裁剪点x坐标.</dd>
+ <dt><code>sy</code></dt>
+ <dd>裁剪点y坐标.</dd>
+ <dt><code>sw</code></dt>
+ <dd>裁剪宽度,值可为负数.</dd>
+ <dt><code>sh</code></dt>
+ <dd>裁剪高度,值可为负数.</dd>
+ <dt>options {{optional_inline}}</dt>
+ <dd>为其设置选项的对象。可用的选项是:
+ <ul>
+  <li><code>imageOrientation</code>: 指示图像是按原样呈现还是垂直翻转.  <code>none</code> (默认不翻转) 或 <code>flipY</code>.</li>
+  <li><code>premultiplyAlpha</code>: 指示位图颜色通道由alpha通道预乘. 选择其一:<code>none</code>, <code>premultiply</code>, 或 <code>default</code> (默认).</li>
+  <li><code>colorSpaceConversion</code>: 指示图像是否使用色彩空间转换进行解码. <code>none</code> 或 <code>default</code> (默认). The value <code>default</code> indicates that implementation-specific behavior is used.</li>
+  <li><code>resizeWidth</code>: 指示新宽度的长整数。</li>
+  <li><code>resizeHeight</code>: 指示新高度的长整数。</li>
+  <li><code>resizeQuality</code>: 指定图像缩放算法. 选择其一<code>pixelated</code>, <code>low</code> (默认), <code>medium</code>, 或 <code>high</code>.</li>
+ </ul>
+ </dd>
+</dl>
+
+<h3 id="Return_value">Return value</h3>
+
+<p>返回一个解决ImageBitmap的{{domxref("Promise")}} ，当Promise成功时resolves接收一个包含所得到的矩形的位图数据{{domxref("ImageBitmap")}}。</p>
+
+<h2 id="Example">Example</h2>
+
+<pre class="brush: js  language-js">var canvas = document.getElementById('myCanvas'),
+ctx = canvas.getContext('2d'),
+image = new Image();
+
+image.onload = function() {
+  Promise.all([
+    createImageBitmap(this, 0, 0, 32, 32),
+    createImageBitmap(this, 32, 0, 32, 32)
+  ]).then(function(sprites) {
+    ctx.drawImage(sprites[0], 0, 0);
+    ctx.drawImage(sprites[1], 32, 32);
+  });
+}
+
+image.src = 'sprites.png';
+</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "webappapis.html#dom-createimagebitmap", "createImageBitmap")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{ CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Edge</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(50)}}</td>
+   <td>
+    <p>{{CompatGeckoDesktop(42)}}<br>
+     {{CompatGeckoDesktop(52)}}<sup>[1]</sup></p>
+   </td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>options</code> parameter</td>
+   <td>{{CompatChrome(52)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>39</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>resizeWidth</code>, <code>resizeHeight</code>, and <code>resizeQuality</code></td>
+   <td>{{CompatChrome(54)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>SVGImageElement</code> as source image</td>
+   <td>{{CompatChrome(59)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android Webview</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(50)}}</td>
+   <td>{{CompatChrome(50)}}</td>
+   <td>
+    <p>{{CompatGeckomobile(42)}}<br>
+     {{CompatGeckoMobile(52)}}<sup>[1]</sup></p>
+   </td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>options</code> parameter</td>
+   <td>{{CompatChrome(52)}}</td>
+   <td>{{CompatChrome(52)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>39</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>resizeWidth</code>, <code>resizeHeight</code>, and <code>resizeQuality</code></td>
+   <td>{{CompatChrome(54)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>SVGImageElement</code> as source image</td>
+   <td>{{CompatChrome(59)}}</td>
+   <td>{{CompatChrome(59)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] <code>createImageBitmap()</code> now defined on {{domxref("WindowOrWorkerGlobalScope")}} mixin.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("CanvasRenderingContext2D.drawImage()")}}</li>
+ <li>{{domxref("ImageData")}}</li>
+</ul>
+
+<p>
+ <audio class="hidden"> </audio>
+</p>
diff --git a/files/zh-cn/web/api/crossoriginisolated/index.html b/files/zh-cn/web/api/crossoriginisolated/index.html
new file mode 100644
index 0000000000..ff327d5d07
--- /dev/null
+++ b/files/zh-cn/web/api/crossoriginisolated/index.html
@@ -0,0 +1,59 @@
+---
+title: WindowOrWorkerGlobalScope.crossOriginIsolated
+slug: Web/API/crossOriginIsolated
+translation_of: Web/API/WindowOrWorkerGlobalScope/crossOriginIsolated
+original_slug: Web/API/WindowOrWorkerGlobalScope/crossOriginIsolated
+---
+<div>{{APIRef()}}{{SeeCompatTable}}</div>
+
+<p><code><strong>crossOriginIsolated</strong></code> 是 {{domxref("WindowOrWorkerGlobalScope")}} 的一个只读属性，返回一个布尔值，该值指示是否可以通过{{domxref("Window.postMessage()")}}调用发送 {{jsxref("SharedArrayBuffer")}}。</p>
+
+<p>该值取决于响应中存在的{{httpheader("Cross-Origin-Opener-Policy")}} 和{{httpheader("Cross-Origin-Embedder-Policy")}} 头。</p>
+
+<h2 id="语法">语法</h2>
+
+<pre class="syntaxbox">var <em>myCrossOriginIsolated</em> = self.crossOriginIsolated; // 或直接 crossOriginIsolated
+</pre>
+
+<h3 id="类型">类型</h3>
+
+<p>布尔类型</p>
+
+<h2 id="示例">示例</h2>
+
+<pre class="brush: js">if(crossOriginIsolated) {
+  // post SharedArrayBuffer
+} else {
+  // Do something else
+}
+</pre>
+
+<h2 id="规范">规范</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML WHATWG")}}</td>
+   <td></td>
+   <td>Not yet merged into the spec</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+
+
+<p>{{Compat("api.WindowOrWorkerGlobalScope.crossOriginIsolated")}}</p>
+
+<h2 id="参见">参见</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/ServiceWorker_API">Service Workers</a></li>
+ <li><a href="/en-US/docs/Web/API/Web_Workers_API">Web Workers</a></li>
+</ul>
diff --git a/files/zh-cn/web/api/fetch/index.html b/files/zh-cn/web/api/fetch/index.html
new file mode 100644
index 0000000000..a1ee53fadf
--- /dev/null
+++ b/files/zh-cn/web/api/fetch/index.html
@@ -0,0 +1,174 @@
+---
+title: WorkerOrGlobalScope.fetch()
+slug: Web/API/fetch
+tags:
+  - API
+  - Experimental
+  - Fetch
+  - FetchAPI
+  - GlobalFetch
+  - request
+translation_of: Web/API/WindowOrWorkerGlobalScope/fetch
+original_slug: Web/API/WindowOrWorkerGlobalScope/fetch
+---
+<p>{{APIRef("Fetch")}}</p>
+
+<p>位于 {{domxref("WorkerOrGlobalScope")}} 这一个 mixin 中的 <strong><code>fetch()</code> </strong>方法用于发起获取资源的请求。它返回一个 promise，这个 promise 会在请求响应后被 resolve，并传回 {{domxref("Response")}} 对象。</p>
+
+<p>{{domxref("Window")}} 和 {{domxref("WorkerGlobalScope")}} 都实现了 WorkerOrGlobalScope。 ——这意味着基本在任何场景下只要你想获取资源，都可以使用 位于 WorkerOrGlobalScope 中的 <code>fetch()</code> 方法。</p>
+
+<p>当遇到网络错误时，{{domxref("WorkerOrGlobalScope.fetch","fetch()")}} 返回的 promise 会被 reject，并传回 {{jsxref("TypeError")}}，虽然这也可能因为权限或其它问题导致。成功的 fetch() 检查不仅要包括 promise 被 resolve，还要包括 {{domxref("Response.ok")}} 属性为 true。HTTP 404 状态并不被认为是网络错误。</p>
+
+<p><code>fetch()</code> 方法由 <a href="/en-US/docs/Security/CSP/CSP_policy_directives">Content Security Policy</a> 的 <code>connect-src</code>指令控制，而不是它请求的资源。</p>
+
+<div class="note">
+<p><strong>注意</strong>:{{domxref("WorkerOrGlobalScope.fetch","fetch()")}} 方法的参数与 {{domxref("Request.Request","Request()")}} 构造器是一样的。</p>
+</div>
+
+<h2 id="语法">语法</h2>
+
+<pre class="syntaxbox notranslate">Promise&lt;Response&gt; fetch(input[, init]);
+</pre>
+
+<h3 id="参数">参数</h3>
+
+<dl>
+ <dt><em>?input</em></dt>
+ <dd>定义要获取的资源。这可能是：
+ <ul>
+  <li>一个 {{domxref("USVString")}} 字符串，包含要获取资源的 URL。一些浏览器会接受 <code>blob:</code> 和 <code>data:</code> 作为 schemes.</li>
+  <li>一个 {{domxref("Request")}} 对象。</li>
+ </ul>
+ </dd>
+ <dt><em>init</em> {{optional_inline}}</dt>
+ <dd>一个配置项对象，包括所有对请求的设置。可选的参数有：
+ <ul>
+  <li><code>method</code>: 请求使用的方法，如 <code>GET<font face="Open Sans, Arial, sans-serif">、</font></code><code>POST。</code></li>
+  <li><code>headers</code>: 请求的头信息，形式为 {{domxref("Headers")}} 的对象或包含 {{domxref("ByteString")}} 值的对象字面量。</li>
+  <li><code>body</code>: 请求的 body 信息：可能是一个 {{domxref("Blob")}}、{{domxref("BufferSource")}}、{{domxref("FormData")}}、{{domxref("URLSearchParams")}} 或者 {{domxref("USVString")}} 对象。注意 GET 或 HEAD 方法的请求不能包含 body 信息。</li>
+  <li><code>mode</code>: 请求的模式，如 <code>cors、</code> <code>no-cors 或者</code> <code>same-origin。</code></li>
+  <li><code>credentials</code>: 请求的 credentials，如 <code>omit<font face="Open Sans, Arial, sans-serif">、</font></code><code>same-origin 或者</code> <code>include</code>。为了在当前域名内自动发送 cookie ， 必须提供这个选项， 从 Chrome 50 开始， 这个属性也可以接受 {{domxref("FederatedCredential")}} 实例或是一个 {{domxref("PasswordCredential")}} 实例。</li>
+  <li><code>cache</code>:  请求的 cache 模式: <code>default</code>、 <code>no-store</code>、 <code>reload</code> 、 <code>no-cache </code>、 <code>force-cache </code>或者 <code>only-if-cached</code> 。</li>
+  <li><code>redirect</code>: 可用的 redirect 模式: <code>follow</code> (自动重定向), <code>error</code> (如果产生重定向将自动终止并且抛出一个错误）, 或者 <code>manual</code> (手动处理重定向). 在Chrome中默认使用<code>follow（</code>Chrome 47之前的默认值是<code>manual</code>）。</li>
+  <li><code>referrer</code>: 一个 {{domxref("USVString")}} 可以是 <code>no-referrer<font face="Open Sans, Arial, sans-serif">、</font></code><code>client</code>或一个 URL。默认是 <code>client。</code></li>
+  <li><code>referrerPolicy</code>: 指定了HTTP头部referer字段的值。可能为以下值之一： <code>no-referrer、</code> <code>no-referrer-when-downgrade、</code> <code>origin、</code> <code>origin-when-cross-origin、</code> <code>unsafe-url 。</code></li>
+  <li><code>integrity</code>: 包括请求的  <a href="https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity">subresource integrity</a> 值 （ 例如： <code>sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE=）。</code></li>
+ </ul>
+ </dd>
+</dl>
+
+<h3 id="返回值">返回值</h3>
+
+<p>一个 {{jsxref("Promise")}}，resolve 时回传 {{domxref("Response")}} 对象。</p>
+
+<h3 id="例外">例外</h3>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">类型</th>
+   <th scope="col"><strong>描述</strong></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>AbortError</code></td>
+   <td>请求被{{domxref("AbortController.abort()")}}终止。</td>
+  </tr>
+  <tr>
+   <td><code>TypeError</code></td>
+   <td>从<a href="/en-US/docs/Mozilla/Firefox/Releases/43">Firefox 43</a>开始，如果<code>fetch()</code>接收到含有用户名和密码的URL（例如<code>http://user:password@example.com</code>），它将会抛出一个<code>TypeError</code> 。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="示例">示例</h2>
+
+<p>在 <a href="https://github.com/mdn/fetch-examples/tree/gh-pages/fetch-request">Fetch Request 示例</a> (参见 <a href="http://mdn.github.io/fetch-examples/fetch-request/">Fetch Request live</a>) 中，我们使用对应的构造器创建了一个新的 {{domxref("Request")}} 对象，然后调用 fetch() 方法获取资源。因为我们是在请求一个图片，为了解析正常，我们对响应执行 {{domxref("Body.blob")}} 来设置相应的 MIME 类型。然后创建一个 Object URL，并在 {{htmlelement("img")}} 元素中把它显示出来。</p>
+
+<pre class="brush: js notranslate">var myImage = document.querySelector('img');
+
+var myRequest = new Request('flowers.jpg');
+
+fetch(myRequest).then(function(response) {
+  return response.blob();
+}).then(function(response) {
+  var objectURL = URL.createObjectURL(response);
+  myImage.src = objectURL;
+});</pre>
+
+<p>在 <a href="https://github.com/mdn/fetch-examples/tree/gh-pages/fetch-with-init-then-request">Fetch with init then Request 示例</a> (参见 <a href="http://mdn.github.io/fetch-examples/fetch-with-init-then-request/">Fetch Request init live</a>) 中，我们做同样的操作，除了在调用 fetch() 时传入一个 init 对象：</p>
+
+<pre class="brush: js notranslate">var myImage = document.querySelector('img');
+
+var myHeaders = new Headers();
+myHeaders.append('Content-Type', 'image/jpeg');
+
+var myInit = { method: 'GET',
+               headers: myHeaders,
+               mode: 'cors',
+               cache: 'default' };
+
+var myRequest = new Request('flowers.jpg');
+
+fetch(myRequest,myInit).then(function(response) {
+  ...
+});</pre>
+
+<p>你也可以传入同样的 init 对象到 Request 构造器，来实现同样的效果，如：</p>
+
+<pre class="brush: js notranslate">var myRequest = new Request('flowers.jpg',myInit);
+</pre>
+
+<p><code>init</code> 对象中的 <code>headers</code> 也可以是一个对象字面量：</p>
+
+<pre class="brush: js notranslate"><span class="keyword token">var</span> myInit <span class="operator token">=</span> <span class="punctuation token">{</span> method<span class="punctuation token">:</span> <span class="string token">'GET'</span><span class="punctuation token">,</span>
+               headers<span class="punctuation token">:</span> <span class="punctuation token">{</span>
+                   <span class="string token">'Content-Type'</span><span class="punctuation token">:</span> <span class="string token">'image/jpeg'</span>
+               <span class="punctuation token">}</span><span class="punctuation token">,</span>
+               mode<span class="punctuation token">:</span> <span class="string token">'cors'</span><span class="punctuation token">,</span>
+               cache<span class="punctuation token">:</span> <span class="string token">'default'</span> <span class="punctuation token">}</span><span class="punctuation token">;</span>
+
+<span class="keyword token">var</span> myRequest <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">Request</span><span class="punctuation token">(</span><span class="string token">'flowers.jpg'</span><span class="punctuation token">,</span> myInit<span class="punctuation token">)</span><span class="punctuation token">;</span></pre>
+
+<h2 id="规范">规范</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Fetch','#fetch-method','fetch()')}}</td>
+   <td>{{Spec2('Fetch')}}</td>
+   <td>Defined in a <code>WindowOrWorkerGlobalScope</code> partial in the newest spec.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Fetch','#dom-global-fetch','fetch()')}}</td>
+   <td>{{Spec2('Fetch')}}</td>
+   <td>Initial definition</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Credential Management')}}</td>
+   <td>{{Spec2('Credential Management')}}</td>
+   <td>Adds {{domxref("FederatedCredential")}} or {{domxref("PasswordCredential")}} instance as a possible value for <code>init.credentials</code>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+
+
+<p>{{Compat("api.WindowOrWorkerGlobalScope.fetch")}}</p>
+
+<h2 id="相关链接">相关链接</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API">Fetch API</a></li>
+ <li><a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/Access_control_CORS">HTTP access control (CORS)</a></li>
+ <li><a href="/en-US/docs/Web/HTTP">HTTP</a></li>
+</ul>
diff --git a/files/zh-cn/web/api/headers/getall/index.html b/files/zh-cn/web/api/headers/getall/index.html
deleted file mode 100644
index a9a2d22e59..0000000000
--- a/files/zh-cn/web/api/headers/getall/index.html
+++ /dev/null
@@ -1,134 +0,0 @@
----
-title: Headers.getAll()
-slug: Web/API/Headers/getAll
-translation_of: Web/API/Headers/getAll
----
-<p>{{APIRef("Fetch")}}{{ SeeCompatTable() }}</p>
-
-<p><strong><code>getAll()</code></strong> 方法会以数组形式返回指定header的所有值. 如果指定的header未存在,则返回一个空数组.</p>
-
-<div class="note">
-<p><strong>Note:</strong>出于安全原因, 部分头信息只能被用户代理控制. 这些头信息包括 {{Glossary("Forbidden_header_name", "forbidden header names", 1)}}  和 {{Glossary("Forbidden_response_header_name", "forbidden response header names", 1)}}.</p>
-</div>
-
-<h2 id="Syntax">Syntax</h2>
-
-<pre class="brush: js">myHeaders.getAll(name);</pre>
-
-<h3 id="Parameters">Parameters</h3>
-
-<dl>
- <dt><em>name</em></dt>
- <dd>需检索的HTTP header名称. 如果HTTP header中不存在指定名称<span style="line-height: 19.0909080505371px;">则抛出一个 </span><span style="line-height: 19.0909080505371px;">{{jsxref("TypeError")}}.</span></dd>
-</dl>
-
-<h3 id="Returns">Returns</h3>
-
-<p>An {{domxref("Array")}} containing a {{domxref("ByteString")}} sequence representing the values of the retrieved header.</p>
-
-<h2 id="Example">Example</h2>
-
-<p>Creating an empty <code>Headers</code> object is simple:</p>
-
-<pre class="brush: js">var myHeaders = new Headers(); // Currently empty</pre>
-
-<p>You could add a header to this using {{domxref("Headers.append")}}, then retrieve it using <code>getAll()</code>:</p>
-
-<pre class="brush: js">myHeaders.append('Content-Type', 'image/jpeg');
-myHeaders.getAll('Content-Type'); // Returns [ "image/jpeg" ]
-</pre>
-
-<p>If the header has multiple values associated with it, the array will contain all the values, in the order they were added to the Headers object:</p>
-
-<pre class="brush: js">myHeaders.append('Accept-Encoding', 'deflate');
-myHeaders.append('Accept-Encoding', 'gzip');
-myHeaders.getAll('Accept-Encoding'); // Returns [ "deflate", "gzip" ]</pre>
-
-<div class="note">
-<p><strong>Note</strong>: Use {{domxref("Headers.get")}} to return only the first value added to the <code>Headers</code> object.</p>
-</div>
-
-<h2 id="Specifications">Specifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Specification</th>
-   <th scope="col">Status</th>
-   <th scope="col">Comment</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Fetch','#dom-headers-getall','getAll()')}}</td>
-   <td>{{Spec2('Fetch')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility">Browser compatibility</h2>
-
-<p>{{ CompatibilityTable() }}</p>
-
-<div id="compat-desktop">
-<table class="compat-table">
- <tbody>
-  <tr>
-   <th>Feature</th>
-   <th>Chrome</th>
-   <th>Firefox (Gecko)</th>
-   <th>Internet Explorer</th>
-   <th>Opera</th>
-   <th>Safari (WebKit)</th>
-  </tr>
-  <tr>
-   <td>Basic support</td>
-   <td>{{ CompatChrome(42) }}<br>
-    {{ CompatChrome(41) }} behind pref<br>
-     </td>
-   <td>{{ CompatGeckoDesktop(39)}}<br>
-    34 behind pref</td>
-   <td>{{ CompatNo }}</td>
-   <td>
-    <p>29<br>
-     28 behind pref</p>
-   </td>
-   <td>{{ CompatNo }}</td>
-  </tr>
- </tbody>
-</table>
-</div>
-
-<div id="compat-mobile">
-<table class="compat-table">
- <tbody>
-  <tr>
-   <th>Feature</th>
-   <th>Android</th>
-   <th>Firefox Mobile (Gecko)</th>
-   <th>Firefox OS (Gecko)</th>
-   <th>IE Phone</th>
-   <th>Opera Mobile</th>
-   <th>Safari Mobile</th>
-   <th>Chrome for Android</th>
-  </tr>
-  <tr>
-   <td>Basic support</td>
-   <td>{{ CompatNo }}</td>
-   <td>{{ CompatNo }}</td>
-   <td>{{ CompatNo }}</td>
-   <td>{{ CompatNo }}</td>
-   <td>{{ CompatNo }}</td>
-   <td>{{ CompatNo }}</td>
-   <td>{{ CompatNo }}</td>
-  </tr>
- </tbody>
-</table>
-</div>
-
-<h2 id="See_also">See also</h2>
-
-<ul>
- <li><a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li>
- <li><a href="/en-US/docs/Web/HTTP/Access_control_CORS">HTTP access control (CORS)</a></li>
- <li><a href="/en-US/docs/Web/HTTP">HTTP</a></li>
-</ul>
diff --git a/files/zh-cn/web/api/index/index.html b/files/zh-cn/web/api/index/index.html
deleted file mode 100644
index e910b907d2..0000000000
--- a/files/zh-cn/web/api/index/index.html
+++ /dev/null
@@ -1,7 +0,0 @@
----
-title: 指数
-slug: Web/API/Index
-translation_of: Web/API/Index
-original_slug: Web/API/指数
----
-<p>{{Index("/zh-CN/docs/Web/API")}}</p>
diff --git a/files/zh-cn/web/api/indexeddb/index.html b/files/zh-cn/web/api/indexeddb/index.html
new file mode 100644
index 0000000000..baf7f0c1b9
--- /dev/null
+++ b/files/zh-cn/web/api/indexeddb/index.html
@@ -0,0 +1,176 @@
+---
+title: WindowOrWorkerGlobalScope.indexedDB
+slug: Web/API/indexedDB
+tags:
+  - API
+  - Database
+  - IndexedDB
+  - Reference
+  - Storage
+  - WindowOrWorkerGlobalScope
+  - 参考
+  - 属性
+translation_of: Web/API/WindowOrWorkerGlobalScope/indexedDB
+original_slug: Web/API/WindowOrWorkerGlobalScope/indexedDB
+---
+<p>{{ APIRef() }}</p>
+
+<p><strong><code>indexedDB</code></strong> 是 {{domxref("WindowOrWorkerGlobalScope")}}的一个只读属性，它集成了为应用程序提供异步访问索引数据库的功能的机制。.</p>
+
+<h2 id="语法">语法</h2>
+
+<pre class="syntaxbox">var IDBFactory = self.indexedDB;</pre>
+
+<div class="twocolumns">
+<h2 id="值">值</h2>
+</div>
+
+<p>一个 {{domxref("IDBFactory")}} 对象.</p>
+
+<p id="示例">示例</p>
+
+<pre class="brush: js;highlight:[3]">var db;
+function openDB() {
+ var DBOpenRequest = window.indexedDB.open('toDoList');
+ DBOpenRequest.onsuccess = function(e) {
+   db = DBOpenRequest.result;
+ }
+}</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('IndexedDB 2', '#dom-windoworworkerglobalscope-indexeddb', 'indexedDB')}}</td>
+   <td>{{Spec2('IndexedDB 2')}}</td>
+   <td>Defined in a <code>WindowOrWorkerGlobalScope</code> partial in the newest spec.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('IndexedDB', '#widl-IDBEnvironment-indexedDB', 'indexedDB')}}</td>
+   <td>{{Spec2('IndexedDB')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">浏览器兼容性</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>23{{property_prefix("webkit")}}<br>
+    24</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>10 {{property_prefix("moz")}}<br>
+    {{CompatGeckoDesktop("16.0")}}<br>
+    {{CompatGeckoDesktop("52.0")}}<sup>[1]</sup></td>
+   <td>10, partial</td>
+   <td>15</td>
+   <td>7.1</td>
+  </tr>
+  <tr>
+   <td>Available in workers</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("37.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Indexed Database 2.0</td>
+   <td>{{CompatChrome(58)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatOpera(45)}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android Webview</th>
+   <th>Chrome for Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("22.0")}}<br>
+    {{CompatGeckoMobile("52.0")}}<sup>[1]</sup></td>
+   <td>1.0.1</td>
+   <td>10</td>
+   <td>22</td>
+   <td>8</td>
+  </tr>
+  <tr>
+   <td>Available in workers</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("37.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Indexed Database 2.0</td>
+   <td>{{CompatChrome(58)}}</td>
+   <td>{{CompatChrome(58)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatOperaMobile(45)}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] <code>indexedDB</code> 定义在 {{domxref("WindowOrWorkerGlobalScope")}} mixin（一种实现多继承的方法）上.</p>
+
+<h2 id="相关链接">相关链接</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/IndexedDB_API/Using_IndexedDB">Using IndexedDB</a></li>
+ <li>Starting transactions: {{domxref("IDBDatabase")}}</li>
+ <li>Using transactions: {{domxref("IDBTransaction")}}</li>
+ <li>Setting a range of keys: {{domxref("IDBKeyRange")}}</li>
+ <li>Retrieving and making changes to your data: {{domxref("IDBObjectStore")}}</li>
+ <li>Using cursors: {{domxref("IDBCursor")}}</li>
+ <li>Reference example: <a class="external" href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a class="external" href="http://mdn.github.io/to-do-notifications/">view example live</a>.)</li>
+</ul>
diff --git a/files/zh-cn/web/api/intersection_observer_api/index.html b/files/zh-cn/web/api/intersection_observer_api/index.html
index 16ec1fcc7f..37e64b709a 100644
--- a/files/zh-cn/web/api/intersection_observer_api/index.html
+++ b/files/zh-cn/web/api/intersection_observer_api/index.html
@@ -2,14 +2,21 @@
 title: Intersection Observer API
 slug: Web/API/Intersection_Observer_API
 tags:
-  - Intersection Observer API
-  - IntersectionObserver
+- API
+- Clipping
+- Intersection
+- Intersection Observer API
+- IntersectionObserver
+- Overview
+- Performance
+- Reference
+- Web
 translation_of: Web/API/Intersection_Observer_API
 ---
 <div>
 <p>{{DefaultAPISidebar("Intersection Observer API")}}</p>
 
-<p class="summary">Intersection Observer API提供了一种异步检测目标元素与祖先元素或 {{Glossary("viewport")}} 相交情况变化的方法。</p>
+<p class="summary">Intersection Observer API 提供了一种异步检测目标元素与祖先元素或 {{Glossary("viewport")}} 相交情况变化的方法。</p>
 </div>
 
 <p>过去，要检测一个元素是否可见或者两个元素是否相交并不容易，很多解决办法不可靠或性能很差。然而，随着互联网的发展，这种需求却与日俱增，比如，下面这些情况都需要用到相交检测：</p>
@@ -21,7 +28,7 @@ translation_of: Web/API/Intersection_Observer_API
  <li>在用户看见某个区域时执行任务或播放动画</li>
 </ul>
 
-<p>过去，相交检测通常要用到事件监听，并且需要频繁调用{{domxref("Element.getBoundingClientRect()")}} 方法以获取相关元素的边界信息。事件监听和调用 {{domxref("Element.getBoundingClientRect()")}}  都是在主线程上运行，因此频繁触发、调用可能会造成性能问题。这种检测方法极其怪异且不优雅。</p>
+<p>过去，相交检测通常要用到事件监听，并且需要频繁调用 {{domxref("Element.getBoundingClientRect()")}} 方法以获取相关元素的边界信息。事件监听和调用 {{domxref("Element.getBoundingClientRect()")}} 都是在主线程上运行，因此频繁触发、调用可能会造成性能问题。这种检测方法极其怪异且不优雅。</p>
 
 <p>假如有一个无限滚动的网页，开发者使用了一个第三方库来管理整个页面的广告，又用了另外一个库来实现消息盒子和点赞，并且页面有很多动画（译注：动画往往意味着较高的性能消耗）。两个库都有自己的相交检测程序，都运行在主线程里，而网站的开发者对这些库的内部实现知之甚少，所以并未意识到有什么问题。但当用户滚动页面时，这些相交检测程序就会在页面滚动回调函数里不停触发调用，造成性能问题，体验效果让人失望。</p>
 
@@ -31,11 +38,11 @@ translation_of: Web/API/Intersection_Observer_API
 
 <h2 id="Intersection_observer_的概念和用法">Intersection observer 的概念和用法</h2>
 
-<p>Intersection Observer API 允许你配置一个回调函数，当以下情况发生时会被调用</p>
+<p>Intersection Observer API 允许你配置一个回调函数，当以下情况发生时会被调用</p>
 
 <ul>
  <li>每当目标(<strong>target</strong>)元素与设备视窗或者其他指定元素发生交集的时候执行。设备视窗或者其他元素我们称它为根元素或根(<strong>root</strong>)。</li>
- <li>Observer第一次监听目标元素的时候</li>
+ <li>Observer 第一次监听目标元素的时候</li>
 </ul>
 
 <p>通常，您需要关注文档最接近的可滚动祖先元素的交集更改，如果元素不是可滚动元素的后代，则默认为设备视窗。如果要观察相对于根(<strong>root</strong>)元素的交集，请指定根(<strong>root</strong>)元素为<code>null</code>。</p>
@@ -46,97 +53,528 @@ translation_of: Web/API/Intersection_Observer_API
 
 <h3 id="创建一个_intersection_observer">创建一个 intersection observer</h3>
 
-<p>创建一个 IntersectionObserver对象，并传入相应参数和回调用函数，该回调函数将会在目标(<strong>target</strong>)元素和根(<strong>root</strong>)元素的交集大小超过阈值(<strong>threshold</strong>)规定的大小时候被执行。</p>
+<p>创建一个 IntersectionObserver 对象，并传入相应参数和回调用函数，该回调函数将会在目标(<strong>target</strong>)元素和根(<strong>root</strong>)元素的交集大小超过阈值(<strong>threshold</strong>)规定的大小时候被执行。</p>
 
-<pre class="brush: js notranslate">let options = {
-    root: document.querySelector('#scrollArea'),
-    rootMargin: '0px',
-    threshold: 1.0
+<pre class="brush: js">let options = {
+  root: document.querySelector('#scrollArea'),
+  rootMargin: '0px',
+  threshold: 1.0
 }
 
 let observer = new IntersectionObserver(callback, options);
 </pre>
 
-<p>阈值为1.0意味着目标元素完全出现在root选项指定的元素中可见时，回调函数将会被执行。</p>
+<p>阈值为1.0意味着目标元素完全出现在 root 选项指定的元素中可见时，回调函数将会被执行。</p>
 
 <h4 id="Intersection_observer_options">Intersection observer options</h4>
 
-<p>传递到{{domxref("IntersectionObserver.IntersectionObserver", "IntersectionObserver()")}}构造函数的 <code>options</code> 对象，允许您控制观察者的回调函数的被调用时的环境。它有以下字段：</p>
+<p>传递到 {{domxref("IntersectionObserver.IntersectionObserver", "IntersectionObserver()")}} 构造函数的 <code>options</code> 对象，允许您控制观察者的回调函数的被调用时的环境。它有以下字段：</p>
 
 <dl>
  <dt><code>root</code></dt>
  <dd>指定根(<strong>root</strong>)元素，用于检查目标的可见性。必须是目标元素的父级元素。如果未指定或者为<code>null</code>，则默认为浏览器视窗。</dd>
- <dt><code>rootMargin</code>  </dt>
- <dd>根(<strong>root</strong>)元素的外边距。类似于 CSS 中的  {{cssxref("margin")}} 属性，比如 "<code>10px 20px 30px 40px"</code> (top, right, bottom, left)。如果有指定root参数，则rootMargin也可以使用百分比来取值。该属性值是用作root元素和target发生交集时候的计算交集的区域范围，使用该属性可以控制root元素每一边的收缩或者扩张。默认值为0。</dd>
+ <dt><code>rootMargin</code></dt>
+ <dd>根(<strong>root</strong>)元素的外边距。类似于 CSS 中的 {{cssxref("margin")}} 属性，比如 "<code>10px 20px 30px 40px"</code> (top, right, bottom, left)。如果有指定 root 参数，则 rootMargin 也可以使用百分比来取值。该属性值是用作 root 元素和 target 发生交集时候的计算交集的区域范围，使用该属性可以控制 root 元素每一边的收缩或者扩张。默认值为0。</dd>
  <dt><code>threshold</code></dt>
- <dd>可以是单一的number也可以是number数组，target元素和root元素相交程度达到该值的时候IntersectionObserver注册的回调函数将会被执行。如果你只是想要探测当target元素的在root元素中的可见性超过50%的时候，你可以指定该属性值为0.5。如果你想要target元素在root元素的可见程度每多25%就执行一次回调，那么你可以指定一个数组[0, 0.25, 0.5, 0.75, 1]。默认值是0(意味着只要有一个target像素出现在root元素中，回调函数将会被执行)。该值为1.0含义是当target完全出现在root元素中时候 回调才会被执行。</dd>
+ <dd>可以是单一的 number 也可以是 number 数组，target 元素和 root 元素相交程度达到该值的时候 IntersectionObserver 注册的回调函数将会被执行。如果你只是想要探测当 target 元素的在 root 元素中的可见性超过50%的时候，你可以指定该属性值为0.5。如果你想要 target 元素在 root 元素的可见程度每多25%就执行一次回调，那么你可以指定一个数组 <code>[0, 0.25, 0.5, 0.75, 1]</code>。默认值是0 (意味着只要有一个 target 像素出现在 root 元素中，回调函数将会被执行)。该值为1.0含义是当 target 完全出现在 root 元素中时候 回调才会被执行。</dd>
  <dt>
  <h4 id="Targeting_an_element_to_be_observed">Targeting an element to be observed</h4>
  </dt>
 </dl>
 
-<p>为每个观察者配置一个目标</p>
+<p>创建一个 observer 后需要给定一个目标元素进行观察。</p>
 
 <pre class="brush: js notranslate">let target = document.querySelector('#listItem');
 observer.observe(target);
 </pre>
 
-<p>每当目标满足该IntersectionObserver指定的threshold值，回调被调用。</p>
+<p>每当目标满足该 IntersectionObserver 指定的 threshold 值，回调被调用。</p>
 
-<p>只要目标满足为IntersectionObserver指定的阈值，就会调用回调。回调接收 {{domxref("IntersectionObserverEntry")}} 对象和观察者的列表：</p>
+<p>只要目标满足为 IntersectionObserver 指定的阈值，就会调用回调。回调接收 {{domxref("IntersectionObserverEntry")}} 对象和观察者的列表：</p>
 
-<pre class="notranslate"><code>let callback =(entries, observer) =&gt; {
+<pre class="brush: js">let callback =(entries, observer) =&gt; {
   entries.forEach(entry =&gt; {
-    // Each entry describes an intersection change for one observed
-    // target element:
-    //   entry.boundingClientRect
-    //   entry.intersectionRatio
-    //   entry.intersectionRect
-    //   entry.isIntersecting
-    //   entry.rootBounds
-    //   entry.target
-    //   entry.time
+    // Each entry describes an intersection change for one observed target element:
+    // entry.boundingClientRect
+    // entry.intersectionRatio
+    // entry.intersectionRect
+    // entry.isIntersecting
+    // entry.rootBounds
+    // entry.target
+    // entry.time
   });
-};</code></pre>
+};</pre>
 
 <p>请留意，你注册的回调函数将会在主线程中被执行。所以该函数执行速度要尽可能的快。如果有一些耗时的操作需要执行，建议使用 {{domxref("Window.requestIdleCallback()")}} 方法。</p>
 
 <h3 id="How_intersection_is_calculated_--_交集的计算">How intersection is calculated -- 交集的计算</h3>
 
-<p>所有区域均被Intersection Observer API 当做一个矩形看待。如果元素是不规则的图形也将会被看成一个包含元素所有区域的最小矩形，相似的，如果元素发生的交集部分不是一个矩形，那么也会被看作是一个包含他所有交集区域的最小矩形。</p>
+<p>所有区域均被 Intersection Observer API 当做一个矩形看待。如果元素是不规则的图形也将会被看成一个包含元素所有区域的最小矩形，相似的，如果元素发生的交集部分不是一个矩形，那么也会被看作是一个包含他所有交集区域的最小矩形。</p>
 
-<p>这个有助于理解IntersectionObserverEntry 的属性，IntersectionObserverEntry用于描述target和root的交集。</p>
+<p>上述解释有助于理解<code>IntersectionObserverEntry</code> 提供的属性，其用于描述 target 和 root 的交集。</p>
 
 <h4 id="The_intersection_root_and_root_margin">The intersection root and root margin</h4>
 
-<p>在我们开始跟踪target元素和容器元素之前，我们要先知道什么是容器(root)元素。容器元素又称为<strong>intersection root</strong>, 或 <strong>root element</strong>.这个既可以是target元素祖先元素也可以是指定null则使用浏览器视口做为容器(root)。</p>
+<p>在我们开始跟踪 target 元素和容器元素之前，我们要先知道什么是容器 (root) 元素。容器元素又称为 <strong>intersection root</strong>，或 <strong>root element</strong>。 这个既可以是 target 元素祖先元素也可以是指定 null 则使用浏览器视口做为容器(root)。</p>
 
-<p>用作描述intersection root 元素边界的矩形可以使用<strong>root margin</strong>来调整矩形大小，即rootMargin属性，在我们创建IntersectionObserver对象的时候使用。rootMargin的属性值将会做为margin偏移值添加到intersection root 元素的对应的margin位置，并最终形成root 元素的矩形边界。</p>
+
+<p><strong><dfn>root intersection rectangle</dfn></strong> 是用来对目标元素进行相交检测的矩形，它的大小有以下几种情况:</p>
+
+<ul>
+ <li>如果 intersection root 隐含 root (值为<code>null</code>) (也就是顶级 {{domxref("Document")}}), 那么 root intersection 矩形就是视窗的矩形大小。</li>
+ <li>如果 intersection root 有溢出部分, 则 root intersection 矩形是 root 元素的内容 (content) 区域.</li>
+ <li>否则，root intersection 矩形就是 intersection root 的 bounding client rectangle (可以调用元素的 {{domxref("Element.getBoundingClientRect", "getBoundingClientRect()")}} 方法获取).</li>
+</ul>
+
+<p>用作描述 intersection root 元素边界的矩形可以使用 <strong>root margin</strong> 来调整矩形大小，即 <code>rootMargin</code> 属性，在我们创建 IntersectionObserver 对象的时候使用。<code>rootMargin</code> 的属性值将会做为 margin 偏移值添加到 intersection root 元素的对应的 margin 位置，并最终形成 root 元素的矩形边界 (在执行回调函数时可由  {{domxref("IntersectionObserverEntry.rootBounds")}} 得到)。</p>
 
 <h4 id="Thresholds">Thresholds</h4>
 
-<p>IntersectionObserver API并不会每次在元素的交集发生变化的时候都会执行回调。相反它使用了<strong>thresholds</strong>参数。当你创建一个observer的时候，你可以提供一个或者多个number类型的数值用来表示target元素在root元素的可见程序的百分比，然后，API的回调函数只会在元素达到<strong>thresholds</strong>规定的阈值时才会执行。</p>
+<p>IntersectionObserver API 并不会每次在元素的交集发生变化的时候都会执行回调。相反它使用了 <strong>thresholds</strong> 参数。当你创建一个 observer 的时候，你可以提供一个或者多个 number 类型的数值用来表示 target 元素在 root 元素的可见程序的百分比，然后，API的回调函数只会在元素达到 <strong>thresholds</strong> 规定的阈值时才会执行。</p>
 
-<p>例如，当你想要在target在root元素中中的可见性每超过25%或者减少25%的时候都通知一次。你可以在创建observer的时候指定<strong>thresholds</strong>属性值为[0, 0.25, 0.5, 0.75, 1]，你可以通过检测在每次交集发生变化的时候的都会传递回调函数的参数"IntersectionObserverEntry.isIntersecting"的属性值来判断target元素在root元素中的可见性是否发生变化。如果isIntersecting 是 true，target元素的至少已经达到<strong>thresholds</strong>属性值当中规定的其中一个阈值，如果是false，target元素不在给定的阈值范围内可见。</p>
+<p>例如，当你想要在 target 在 root 元素中中的可见性每超过25%或者减少25%的时候都通知一次。你可以在创建 observer 的时候指定 <strong>thresholds</strong> 属性值为 <code>[0, 0.25, 0.5, 0.75, 1]</code>，你可以通过检测在每次交集发生变化的时候的都会传递回调函数的参数 {{domxref("IntersectionObserverEntry.isIntersecting", "isIntersecting")}} 的属性值来判断 target 元素在 root 元素中的可见性是否发生变化。如果 <code>isIntersecting</code> 为真，target 元素的至少已经达到 <strong>thresholds</strong> 属性值当中规定的其中一个阈值，如果为假，则 target 元素不在给定的阈值范围内可见。</p>
 
-<p>为了让我们感受下thresholds是如何工作的，尝试滚动以下的例子，每一个colored box 的四个边角都会展示自身在root元素中的可见程度百分比，所以在你滚动root的时候你将会看到四个边角的数值一直在发生变化。每一个box都有不同的thresholds：</p>
+<p>Note that it's possible to have a non-zero intersection rectangle, which can happen if the intersection is exactly along the boundary between the two or the area of {{domxref("IntersectionObserverEntry.boundingClientRect", "boundingClientRect")}} is zero. This state of the target and root sharing a boundary line is not considered enough to be considered transitioning into an intersecting state.</p>
+
+<p>为了让我们感受下 thresholds 是如何工作的，尝试滚动以下的例子，每一个 colored box 的四个边角都会展示自身在 root 元素中的可见程度百分比，所以在你滚动 root 的时候你将会看到四个边角的数值一直在发生变化。 每一个 box 都有不同的 thresholds：</p>
 
 <ul>
- <li>第一个box的thresholds属性值 <code>[0.00, 0.01, 0.02, ..., 0.99, 1.00]</code>.</li>
- <li>第二个box只有唯一的值 [0.5].</li>
- <li>第三个box thresholds按10%从0递增(0%, 10%, 20%, etc.).</li>
- <li>最后一个box [0, 0.25, 0.5, 0.75, 1.0]</li>
+ <li>第一个盒子的 thresholds 包含每个可视百分比，也就是说，{{domxref("IntersectionObserver.thresholds")}} 数组是 <code>[0.00, 0.01, 0.02, ..., 0.99, 1.00]</code>。</li>
+ <li>第二个盒子只有唯一的值 <code>[0.5]</code>。</li>
+ <li>第三个盒子的 thresholds 按10%从0递增(0%, 10%, 20%, etc.)。</li>
+ <li>最后一个盒子为 <code>[0, 0.25, 0.5, 0.75, 1.0]</code>。</li>
 </ul>
 
+<div id="Threshold_example">
+
+<pre class="brush: html hidden">&lt;template id="boxTemplate"&gt;
+  &lt;div class="sampleBox"&gt;
+    &lt;div class="label topLeft"&gt;&lt;/div&gt;
+    &lt;div class="label topRight"&gt;&lt;/div&gt;
+    &lt;div class="label bottomLeft"&gt;&lt;/div&gt;
+    &lt;div class="label bottomRight"&gt;&lt;/div&gt;
+  &lt;/div&gt;
+&lt;/template&gt;
+
+&lt;main&gt;
+  &lt;div class="contents"&gt;
+    &lt;div class="wrapper"&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+&lt;/main&gt;</pre>
+
+<pre class="brush: css hidden">.contents {
+  position: absolute;
+  width: 700px;
+  height: 1725px;
+}
+
+.wrapper {
+  position: relative;
+  top: 600px;
+}
+
+.sampleBox {
+  position: relative;
+  left: 175px;
+  width: 150px;
+  background-color: rgb(245, 170, 140);
+  border: 2px solid rgb(201, 126, 17);
+  padding: 4px;
+  margin-bottom: 6px;
+}
+
+#box1 {
+  height: 200px;
+}
+
+#box2 {
+  height: 75px;
+}
+
+#box3 {
+  height: 150px;
+}
+
+#box4 {
+  height: 100px;
+}
+
+.label {
+  font: 14px "Open Sans", "Arial", sans-serif;
+  position: absolute;
+  margin: 0;
+  background-color: rgba(255, 255, 255, 0.7);
+  border: 1px solid rgba(0, 0, 0, 0.7);
+  width: 3em;
+  height: 18px;
+  padding: 2px;
+  text-align: center;
+}
+
+.topLeft {
+  left: 2px;
+  top: 2px;
+}
+
+.topRight {
+  right: 2px;
+  top: 2px;
+}
+
+.bottomLeft {
+  bottom: 2px;
+  left: 2px;
+}
+
+.bottomRight {
+  bottom: 2px;
+  right: 2px;
+}
+</pre>
+
+<pre class="brush: js hidden">let observers = [];
+
+startup = () =&gt; {
+  let wrapper = document.querySelector(".wrapper");
+
+  // Options for the observers
+
+  let observerOptions = {
+    root: null,
+    rootMargin: "0px",
+    threshold: []
+  };
+
+  // An array of threshold sets for each of the boxes. The
+  // first box's thresholds are set programmatically
+  // since there will be so many of them (for each percentage
+  // point).
+
+  let thresholdSets = [
+    [],
+    [0.5],
+    [0.0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1.0],
+    [0, 0.25, 0.5, 0.75, 1.0]
+  ];
+
+  for (let i=0; i&lt;=1.0; i+= 0.01) {
+    thresholdSets[0].push(i);
+  }
+
+  // Add each box, creating a new observer for each
+
+  for (let i=0; i&lt;4; i++) {
+    let template = document.querySelector("#boxTemplate").content.cloneNode(true);
+    let boxID = "box" + (i+1);
+    template.querySelector(".sampleBox").id = boxID;
+    wrapper.appendChild(document.importNode(template, true));
+
+    // Set up the observer for this box
+
+    observerOptions.threshold = thresholdSets[i];
+    observers[i] = new IntersectionObserver(intersectionCallback, observerOptions);
+    observers[i].observe(document.querySelector("#" + boxID));
+  }
+
+  // Scroll to the starting position
+
+  document.scrollingElement.scrollTop = wrapper.firstElementChild.getBoundingClientRect().top + window.scrollY;
+  document.scrollingElement.scrollLeft = 750;
+}
+
+intersectionCallback = (entries) =&gt; {
+  entries.forEach((entry) =&gt; {
+    let box = entry.target;
+    let visiblePct = (Math.floor(entry.intersectionRatio * 100)) + "%";
+
+    box.querySelector(".topLeft").innerHTML = visiblePct;
+    box.querySelector(".topRight").innerHTML = visiblePct;
+    box.querySelector(".bottomLeft").innerHTML = visiblePct;
+    box.querySelector(".bottomRight").innerHTML = visiblePct;
+  });
+}
+
+startup();
+</pre>
+</div>
+
+<p>{{EmbedLiveSample("Threshold_example", 500, 500)}}</p>
+
+
+
+<h4 id="Clipping_and_the_intersection_rectangle">Clipping and the intersection rectangle</h4>
+
+<p>The browser computes the final intersection rectangle as follows; this is all done for you, but it can be helpful to understand these steps in order to better grasp exactly when intersections will occur.</p>
+
+<ol>
+ <li>The target element's bounding rectangle (that is, the smallest rectangle that fully encloses the bounding boxes of every component that makes up the element) is obtained by calling {{domxref("Element.getBoundingClientRect", "getBoundingClientRect()")}} on the target. This is the largest the intersection rectangle may be. The remaining steps will remove any portions that don't intersect.</li>
+ <li>Starting at the target's immediate parent block and moving outward, each containing block's clipping (if any) is applied to the intersection rectangle. A block's clipping is determined based on the intersection of the two blocks and the clipping mode (if any) specified by the {{cssxref("overflow")}} property. Setting <code>overflow</code> to anything but <code>visible</code> causes clipping to occur.</li>
+ <li>If one of the containing elements is the root of a nested browsing context (such as the document contained in an {{HTMLElement("iframe")}}, the intersection rectangle is clipped to the containing context's viewport, and recursion upward through the containers continues with the container's containing block. So if the top level of an <code>&lt;iframe&gt;</code> is reached, the intersection rectangle is clipped to the frame's viewport, then the frame's parent element is the next block recursed through toward the intersection root.</li>
+ <li>When recursion upward reaches the intersection root, the resulting rectangle is mapped to the intersection root's coordinate space.</li>
+ <li>The resulting rectangle is then updated by intersecting it with the <a href="#root-intersection-rectangle">root intersection rectangle</a>.</li>
+ <li>This rectangle is, finally, mapped to the coordinate space of the target's {{domxref("document")}}.</li>
+</ol>
+
+<h3 id="Intersection_change_callbacks">Intersection change callbacks</h3>
+
+<p>When the amount of a target element which is visible within the root element crosses one of the visibility thresholds, the {{domxref("IntersectionObserver")}} object's callback is executed. The callback receives as input an array of all of {{domxref("IntersectionObserverEntry")}} objects, one for each threshold which was crossed, and a reference to the <code>IntersectionObserver</code> object itself.</p>
+
+<p>Each entry in the list of thresholds is an {{domxref("IntersectionObserverEntry")}} object describing one threshold that was crossed; that is, each entry describes how much of a given element is intersecting with the root element, whether or not the element is considered to be intersecting or not, and the direction in which the transition occurred.</p>
+
+<p>The code snippet below shows a callback which keeps a counter of how many times elements transition from not intersecting the root to intersecting by at least 75%. For a threshold value of 0.0 (default) the callback is called <a href="https://www.w3.org/TR/intersection-observer/#dom-intersectionobserverentry-isintersecting">approximately</a> upon transition of the boolean value of {{domxref("IntersectionObserverEntry.isIntersecting", "isIntersecting")}}. The snippet thus first checks that the transition is a positive one, then determines whether {{domxref("IntersectionObserverEntry.intersectionRatio", "intersectionRatio")}} is above 75%, in which case it increments the counter.</p>
+
+<pre class="brush: js">intersectionCallback(entries) =&gt; {
+  entries.forEach(entry =&gt; {
+    if (entry.isIntersecting) {
+      let elem = entry.target;
+
+      if (entry.intersectionRatio &gt;= 0.75) {
+        intersectionCounter++;
+      }
+    }
+  });
+}
+</pre>
+
 <h2 id="Interfaces">Interfaces</h2>
 
 <dl>
  <dt>{{domxref("IntersectionObserver")}}</dt>
- <dd>Provides a way to <span style="line-height: 1.5;">asynchronously observe changes in the intersection of a target element with an ancestor element or with a top-level document's {{Glossary('viewport')}}. The ancestor or viewport is referred to as the root.</span></dd>
+ <dd>The primary interface for the Intersection Observer API. Provides methods for creating and managing an observer which can watch any number of target elements for the same intersection configuration. Each observer can asynchronously observe changes in the intersection between one or more target elements and a shared ancestor element or with their top-level {{domxref("Document")}}'s {{Glossary('viewport')}}. The ancestor or viewport is referred to as the <strong>root</strong>.</dd>
  <dt>{{domxref("IntersectionObserverEntry")}}</dt>
- <dd>Provides information about the intersection of a particular target with the observers root element at a particular time. Instances of this interface cannot be created, but a list of them is returned by {{domxref("IntersectionObserver.takeRecords", "IntersectionObserver.takeRecords()")}}.</dd>
+ <dd>Describes the intersection between the target element and its root container at a specific moment of transition. Objects of this type can only be obtained in two ways: as an input to your <code>IntersectionObserver</code> callback, or by calling {{domxref("IntersectionObserver.takeRecords()")}}.</dd>
+</dl>
+
+<h2 id="A_simple_example">A simple example</h2>
+
+<p>This simple example causes a target element to change its color and transparency as it becomes more or less visible. At <a href="/en-US/docs/Web/API/Intersection_Observer_API/Timing_element_visibility">Timing element visibility with the Intersection Observer API</a>, you can find a more extensive example showing how to time how long a set of elements (such as ads) are visible to the user and to react to that information by recording statistics or by updating elements..</p>
+
+<h3 id="HTML">HTML</h3>
+
+<p>The HTML for this example is very short, with a primary element which is the box that we'll be targeting (with the creative ID <code>"box"</code>) and some contents within the box.</p>
+
+<pre class="brush: html">&lt;div id="box"&gt;
+  &lt;div class="vertical"&gt;
+    Welcome to &lt;strong&gt;The Box!&lt;/strong&gt;
+  &lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<p>The CSS isn't terribly important for the purposes of this example; it lays out the element and establishes that the {{cssxref("background-color")}} and {{cssxref("border")}} attributes can participate in <a href="/en-US/docs/Web/CSS/CSS_Transitions">CSS transitions</a>, which we'll use to affect the changes to the element as it becomes more or less obscured.</p>
+
+<pre class="brush: css">#box {
+  background-color: rgba(40, 40, 190, 255);
+  border: 4px solid rgb(20, 20, 120);
+  transition: background-color 1s, border 1s;
+  width: 350px;
+  height: 350px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 20px;
+}
+
+.vertical {
+  color: white;
+  font: 32px "Arial";
+}
+
+.extra {
+  width: 350px;
+  height: 350px;
+  margin-top: 10px;
+  border: 4px solid rgb(20, 20, 120);
+  text-align: center;
+  padding: 20px;
+}</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<p>Finally, let's take a look at the JavaScript code that uses the Intersection Observer API to make things happen.</p>
+
+<h4 id="Setting_up">Setting up</h4>
+
+<p>First, we need to prepare some variables and install the observer.</p>
+
+<pre class="brush: js">const numSteps = 20.0;
+
+let boxElement;
+let prevRatio = 0.0;
+let increasingColor = "rgba(40, 40, 190, ratio)";
+let decreasingColor = "rgba(190, 40, 40, ratio)";
+
+// Set things up
+window.addEventListener("load", (event) =&gt; {
+  boxElement = document.querySelector("#box");
+
+  createObserver();
+}, false);</pre>
+
+<p>The constants and variables we set up here are:</p>
+
+<dl>
+ <dt><code>numSteps</code></dt>
+ <dd>A constant which indicates how many thresholds we want to have between a visibility ratio of 0.0 and 1.0.</dd>
+ <dt><code>prevRatio</code></dt>
+ <dd>This variable will be used to record what the visibility ratio was the last time a threshold was crossed; this will let us figure out whether the target element is becoming more or less visible.</dd>
+ <dt><code>increasingColor</code></dt>
+ <dd>A string defining a color we'll apply to the target element when the visibility ratio is increasing. The word "ratio" in this string will be replaced with the target's current visibility ratio, so that the element not only changes color but also becomes increasingly opaque as it becomes less obscured.</dd>
+ <dt><code>decreasingColor</code></dt>
+ <dd>Similarly, this is a string defining a color we'll apply when the visibility ratio is decreasing.</dd>
 </dl>
 
+<p>We call {{domxref("EventTarget.addEventListener", "Window.addEventListener()")}} to start listening for the {{event("load")}} event; once the page has finished loading, we get a reference to the element with the ID <code>"box"</code> using {{domxref("Document.querySelector", "querySelector()")}}, then call the <code>createObserver()</code> method we'll create in a moment to handle building and installing the intersection observer.</p>
+
+<h4 id="Creating_the_intersection_observer">Creating the intersection observer</h4>
+
+<p>The <code>createObserver()</code> method is called once page load is complete to handle actually creating the new {{domxref("IntersectionObserver")}} and starting the process of observing the target element.</p>
+
+<pre class="brush: js">function createObserver() {
+  let observer;
+
+  let options = {
+    root: null,
+    rootMargin: "0px",
+    threshold: buildThresholdList()
+  };
+
+  observer = new IntersectionObserver(handleIntersect, options);
+  observer.observe(boxElement);
+}</pre>
+
+<p>This begins by setting up an <code>options</code> object containing the settings for the observer. We want to watch for changes in visibility of the target element relative to the document's viewport, so <code>root</code> is <code>null</code>. We need no margin, so the margin offset, <code>rootMargin</code>, is specified as "0px". This causes the observer to watch for changes in the intersection between the target element's bounds and those of the viewport, without any added (or subtracted) space.</p>
+
+<p>The list of visibility ratio thresholds, <code>threshold</code>, is constructed by the function <code>buildThresholdList()</code>. The threshold list is built programmatically in this example since there are a number of them and the number is intended to be adjustable.</p>
+
+<p>Once <code>options</code> is ready, we create the new observer, calling the {{domxref("IntersectionObserver.IntersectionObserver", "IntersectionObserver()")}} constructor, specifying a function to be called when intersection crosses one of our thresholds, <code>handleIntersect()</code>, and our set of options. We then call {{domxref("IntersectionObserver.observe", "observe()")}} on the returned observer, passing into it the desired target element.</p>
+
+<p>We could opt to monitor multiple elements for visibility intersection changes with respect to the viewport by calling <code>observer.observe()</code> for each of those elements, if we wanted to do so.</p>
+
+<h4 id="Building_the_array_of_threshold_ratios">Building the array of threshold ratios</h4>
+
+<p>The <code>buildThresholdList()</code> function, which builds the list of thresholds, looks like this:</p>
+
+<pre class="brush: js">function buildThresholdList() {
+  let thresholds = [];
+  let numSteps = 20;
+
+  for (let i=1.0; i&lt;=numSteps; i++) {
+    let ratio = i/numSteps;
+    thresholds.push(ratio);
+  }
+
+  thresholds.push(0);
+  return thresholds;
+}</pre>
+
+<p>This builds the array of thresholds—each of which is a ratio between 0.0 and 1.0, by pushing the value <code>i/numSteps</code> onto the <code>thresholds</code> array for each integer <code>i</code> between 1 and <code>numSteps</code>. It also pushes 0 to include that value. The result, given the default value of <code>numSteps</code> (20), is the following list of thresholds:</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>#</th>
+   <th>Ratio</th>
+   <th>#</th>
+   <th>Ratio</th>
+  </tr>
+  <tr>
+   <th>1</th>
+   <td>0.05</td>
+   <th>11</th>
+   <td>0.55</td>
+  </tr>
+  <tr>
+   <th>2</th>
+   <td>0.1</td>
+   <th>12</th>
+   <td>0.6</td>
+  </tr>
+  <tr>
+   <th>3</th>
+   <td>0.15</td>
+   <th>13</th>
+   <td>0.65</td>
+  </tr>
+  <tr>
+   <th>4</th>
+   <td>0.2</td>
+   <th>14</th>
+   <td>0.7</td>
+  </tr>
+  <tr>
+   <th>5</th>
+   <td>0.25</td>
+   <th>15</th>
+   <td>0.75</td>
+  </tr>
+  <tr>
+   <th>6</th>
+   <td>0.3</td>
+   <th>16</th>
+   <td>0.8</td>
+  </tr>
+  <tr>
+   <th>7</th>
+   <td>0.35</td>
+   <th>17</th>
+   <td>0.85</td>
+  </tr>
+  <tr>
+   <th>8</th>
+   <td>0.4</td>
+   <th>18</th>
+   <td>0.9</td>
+  </tr>
+  <tr>
+   <th>9</th>
+   <td>0.45</td>
+   <th>19</th>
+   <td>0.95</td>
+  </tr>
+  <tr>
+   <th>10</th>
+   <td>0.5</td>
+   <th>20</th>
+   <td>1.0</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>We could, of course, hard-code the array of thresholds into our code, and often that's what you'll end up doing. But this example leaves room for adding configuration controls to adjust the granularity, for example.</p>
+
+<h4 id="Handling_intersection_changes">Handling intersection changes</h4>
+
+<p>When the browser detects that the target element (in our case, the one with the ID <code>"box"</code>) has been unveiled or obscured such that its visibility ratio crosses one of the thresholds in our list, it calls our handler function, <code>handleIntersect()</code>:</p>
+
+<pre class="brush: js">function handleIntersect(entries, observer) {
+  entries.forEach((entry) =&gt; {
+    if (entry.intersectionRatio &gt; prevRatio) {
+      entry.target.style.backgroundColor = increasingColor.replace("ratio", entry.intersectionRatio);
+    } else {
+      entry.target.style.backgroundColor = decreasingColor.replace("ratio", entry.intersectionRatio);
+    }
+
+    prevRatio = entry.intersectionRatio;
+  });
+}</pre>
+
+<p>For each {{domxref("IntersectionObserverEntry")}} in the list <code>entries</code>, we look to see if the entry's {{domxref("IntersectionObserverEntry.intersectionRatio", "intersectionRatio")}} is going up; if it is, we set the target's {{cssxref("background-color")}} to the string in <code>increasingColor</code> (remember, it's <code>"rgba(40, 40, 190, ratio)"</code>), replaces the word "ratio" with the entry's <code>intersectionRatio</code>. The result: not only does the color get changed, but the transparency of the target element changes, too; as the intersection ratio goes down, the background color's alpha value goes down with it, resulting in an element that's more transparent.</p>
+
+<p>Similarly, if the <code>intersectionRatio</code> is going down, we use the string <code>decreasingColor</code> and replace the word "ratio" in that with the <code>intersectionRatio</code> before setting the target element's <code>background-color</code>.</p>
+
+<p>Finally, in order to track whether the intersection ratio is going up or down, we remember the current ratio in the variable <code>prevRatio</code>.</p>
+
+<h3 id="Result">Result</h3>
+
+<p>Below is the resulting content. Scroll this page up and down and notice how the appearance of the box changes as you do so.</p>
+
+<p>{{EmbedLiveSample('A_simple_example', 425, 425)}}</p>
+
+<p>There's an even more extensive example at <a href="/en-US/docs/Web/API/Intersection_Observer_API/Timing_element_visibility">Timing element visibility with the Intersection Observer API</a>.</p>
+
+
 <h2 id="Specifications">Specifications</h2>
 
 <table class="standard-table">
@@ -156,12 +594,12 @@ observer.observe(target);
 
 <h2 id="浏览器兼容性">浏览器兼容性</h2>
 
-
-
 <p>{{Compat("api.IntersectionObserver")}}</p>
 
 <h2 id="更多参考">更多参考</h2>
 
 <ul>
  <li><a href="https://github.com/w3c/IntersectionObserver/blob/master/polyfill/intersection-observer.js">Intersection Observer polyfill</a></li>
-</ul>
+ <li><a href="/zh-CN/docs/Web/API/Intersection_Observer_API/Timing_element_visibility">Timing element visibility with the Intersection Observer API</a></li>
+ <li>{{domxref("IntersectionObserver")}} and {{domxref("IntersectionObserverEntry")}}</li>
+</ul>
\ No newline at end of file
diff --git a/files/zh-cn/web/api/intersectionobserver/disconnect/index.html b/files/zh-cn/web/api/intersectionobserver/disconnect/index.html
index 0e4513516e..92a8b99ff1 100644
--- a/files/zh-cn/web/api/intersectionobserver/disconnect/index.html
+++ b/files/zh-cn/web/api/intersectionobserver/disconnect/index.html
@@ -4,6 +4,8 @@ slug: Web/API/IntersectionObserver/disconnect
 tags:
   - API
   - Disconnect
+  - Intersection Observer
+  - Intersection Observer API
   - IntersectionObserver
   - Method
 translation_of: Web/API/IntersectionObserver/disconnect
@@ -14,7 +16,8 @@ translation_of: Web/API/IntersectionObserver/disconnect
 
 <h2 id="语法">语法</h2>
 
-<pre class="syntaxbox"><em>IntersectionObserver</em>.disconnect();</pre>
+<pre
+  class="brush: js"><em>intersectionObserver</em>.disconnect();</pre>
 
 <h3 id="参数">参数</h3>
 
@@ -26,26 +29,13 @@ translation_of: Web/API/IntersectionObserver/disconnect
 
 <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('IntersectionObserver','#dom-intersectionobserver-disconnect','IntersectionObserver.disconnect()')}}</td>
-   <td>{{Spec2('IntersectionObserver')}}</td>
-   <td>Initial definition.</td>
-  </tr>
- </tbody>
-</table>
+{{Specifications}}
 
 <h2 id="浏览器兼容性">浏览器兼容性 </h2>
 
-<p>{{Compat("api.IntersectionObserver.disconnect")}}</p>
+<p>{{Compat}}</p>
 
-<h2 id="See_also">See also</h2>
+<h2 id="See_also">参考</h2>
 
 <ul>
  <li>{{domxref("IntersectionObserver.observe", "observe()")}}</li>
diff --git a/files/zh-cn/web/api/intersectionobserver/index.html b/files/zh-cn/web/api/intersectionobserver/index.html
index e3bcf96bd3..1aa608a771 100644
--- a/files/zh-cn/web/api/intersectionobserver/index.html
+++ b/files/zh-cn/web/api/intersectionobserver/index.html
@@ -47,11 +47,12 @@ translation_of: Web/API/IntersectionObserver
  <dt>{{domxref("IntersectionObserver.unobserve()")}}</dt>
  <dd><font face="Open Sans, arial, x-locale-body, sans-serif">使</font><code>IntersectionObserver</code>停止监听特定目标元素。</dd>
  <dt>
- <h2 id="示例">示例</h2>
  </dt>
 </dl>
 
-<pre><code>var intersectionObserver = new IntersectionObserver(function(entries) {
+<h2 id="示例">示例</h2>
+
+<pre class="brush: js">var intersectionObserver = new IntersectionObserver(function(entries) {
   // If intersectionRatio is 0, the target is out of view
   // and we do not need to do anything.
   if (entries[0].intersectionRatio &lt;= 0) return;
@@ -60,28 +61,15 @@ translation_of: Web/API/IntersectionObserver
   console.log('Loaded new items');
 });
 // start observing
-intersectionObserver.observe(document.querySelector('.scrollerFooter'));</code></pre>
+intersectionObserver.observe(document.querySelector('.scrollerFooter'));</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("IntersectionObserver", "#intersection-observer-interface", "IntersectionObserver")}}</td>
-   <td>{{Spec2('IntersectionObserver')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
+{{Specifications}}
 
 <h2 id="浏览器兼容">浏览器兼容</h2>
 
-<p>{{Compat("api.IntersectionObserver")}}</p>
+<p>{{Compat}}</p>
 
 <h2 id="参考">参考</h2>
 
diff --git a/files/zh-cn/web/api/intersectionobserver/observe/index.html b/files/zh-cn/web/api/intersectionobserver/observe/index.html
index c2758917f6..9e5a3a577a 100644
--- a/files/zh-cn/web/api/intersectionobserver/observe/index.html
+++ b/files/zh-cn/web/api/intersectionobserver/observe/index.html
@@ -11,7 +11,8 @@ translation_of: Web/API/IntersectionObserver/observe
 
 <h2 id="语法">语法</h2>
 
-<pre class="syntaxbox"><em>IntersectionObserver</em>.observe(<em>targetElement</em>);</pre>
+<pre
+  class="brush: js"><em>IntersectionObserver</em>.observe(<em>targetElement</em>);</pre>
 
 <h3 id="参数">参数</h3>
 
@@ -25,37 +26,41 @@ translation_of: Web/API/IntersectionObserver/observe
 
 <p><code>undefined</code>.</p>
 
-<dl>
-</dl>
+<h2 id="Examples">示例</h2>
+
+<pre class="brush: js">
+// Register IntersectionObserver
+const io = new IntersectionObserver(entries => {
+  entries.forEach(entry => {
+    // Add 'active' class if observation target is inside viewport
+    if (entry.intersectionRatio > 0) {
+      entry.target.classList.add('active');
+    }
+    // Remove 'active' class otherwise
+    else {
+      entry.target.classList.remove('active');
+    }
+  })
+})
+
+// Declares what to observe, and observes its properties.
+const boxElList = document.querySelectorAll('.box');
+boxElList.forEach((el) => {
+    io.observe(el);
+})
+</pre>
 
-<h2 id="Examples">Examples</h2>
+<h2 id="Specifications">规范</h2>
 
-<p>&lt;&lt;&lt;...&gt;&gt;&gt;</p>
+{{Specifications}}
 
-<h2 id="Specifications">Specifications</h2>
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Specification</th>
-   <th scope="col">Status</th>
-   <th scope="col">Comment</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('IntersectionObserver','#dom-intersectionobserver-observe','IntersectionObserver.observe()')}}</td>
-   <td>{{Spec2('IntersectionObserver')}}</td>
-   <td>Initial definition.</td>
-  </tr>
- </tbody>
-</table>
+<h2 id="Browser_compatibility">浏览器兼容性</h2>
 
-<div>
-<h2 id="Browser_compatibility">Browser compatibility</h2>
+<p>{{Compat}}</p>
 
-<p>{{Compat("api.IntersectionObserver.observe")}}</p>
-</div>
 
-<h2 id="See_also">See also</h2>
+<h2 id="See_also">参考</h2>
 
 <ul>
  <li>{{domxref("IntersectionObserver.unobserve()")}}</li>
diff --git a/files/zh-cn/web/api/intersectionobserver/unobserve/index.html b/files/zh-cn/web/api/intersectionobserver/unobserve/index.html
index c3099ca224..45f8e1f5b5 100644
--- a/files/zh-cn/web/api/intersectionobserver/unobserve/index.html
+++ b/files/zh-cn/web/api/intersectionobserver/unobserve/index.html
@@ -4,14 +4,23 @@ slug: Web/API/IntersectionObserver/unobserve
 tags:
   - API
   - Intersection
+  - Intersection Observer
+  - Intersection Observer API
+  - IntersectionObserver
   - unobserve
 translation_of: Web/API/IntersectionObserver/unobserve
+browser-compat: api.IntersectionObserver.unobserve
 ---
-<div><code>unobserve()方法命令</code>IntersectionObserver停止对一个元素的观察。</div>
+<div>{{APIRef("Intersection Observer API")}}</div>
+
+<p>{{domxref("IntersectionObserver")}}的<code>unobserve()</code>
+  方法命令<code>IntersectionObserver</code>停止对一个元素的观察。
+</p>
 
 <h2 id="语法">语法</h2>
 
-<pre class="syntaxbox">IntersectionObserver.unobserve(<em>target</em>);</pre>
+<pre
+  class="brush: js"><em>IntersectionObserver</em>.unobserve(<em>target</em>);</pre>
 
 <h3 id="参数">参数</h3>
 
@@ -40,24 +49,11 @@ observer.unobserve(document.getElementById("elementToObserve"));</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('IntersectionObserver','#dom-intersectionobserver-unobserve','IntersectionObserver.unobserve()')}}</td>
-   <td>{{Spec2('IntersectionObserver')}}</td>
-   <td>Initial definition.</td>
-  </tr>
- </tbody>
-</table>
+{{Specifications}}
 
 <h2 id="浏览器兼容性">浏览器兼容性</h2>
 
-<p>{{Compat("api.IntersectionObserver.unobserve")}}</p>
+<p>{{Compat}}</p>
 
 <h2 id="另请参阅">另请参阅</h2>
 
diff --git a/files/zh-cn/web/api/issecurecontext/index.html b/files/zh-cn/web/api/issecurecontext/index.html
new file mode 100644
index 0000000000..355b4dcde6
--- /dev/null
+++ b/files/zh-cn/web/api/issecurecontext/index.html
@@ -0,0 +1,101 @@
+---
+title: WindowOrWorkerGlobalScope.isSecureContext
+slug: Web/API/isSecureContext
+tags:
+  - API
+  - Property
+  - Reference
+  - Window
+  - WindowOrWorkerGlobalContext
+  - Workers
+  - isSecureContext
+translation_of: Web/API/WindowOrWorkerGlobalScope/isSecureContext
+original_slug: Web/API/WindowOrWorkerGlobalScope/isSecureContext
+---
+<p>{{APIRef()}}{{SeeCompatTable}}</p>
+
+<p><code><strong>isSecureContext</strong></code> 是 {{domxref("WindowOrWorkerGlobalScope")}} 的一个只读属性，返回一个布尔值，标识当前上下文是否安全，安全（true）或不安全（false）。</p>
+
+<h2 id="语法">语法</h2>
+
+<pre class="syntaxbox">var <em>isItSecure</em> = self.isSecureContext; // 或者直接使用 isSecureContext
+</pre>
+
+<h3 id="类型">类型</h3>
+
+<p> {{domxref("Boolean")}}.</p>
+
+<h2 id="规范">规范</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Secure Contexts', 'webappapis.html#dom-origin', 'WindowOrWorkerGlobalScope.isSecureContext')}}</td>
+   <td>{{Spec2('Secure Contexts')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(55)}}</td>
+   <td>{{CompatGeckoDesktop(52)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android Webview</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(55)}}</td>
+   <td>{{CompatChrome(55)}}</td>
+   <td>{{CompatGeckoMobile(52)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="参考">参考</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Security/Secure_Contexts">Secure contexts</a></li>
+</ul>
diff --git a/files/zh-cn/web/api/origin/index.html b/files/zh-cn/web/api/origin/index.html
new file mode 100644
index 0000000000..eeb79e7cf3
--- /dev/null
+++ b/files/zh-cn/web/api/origin/index.html
@@ -0,0 +1,99 @@
+---
+title: WindowOrWorkerGlobalScope.origin
+slug: Web/API/origin
+tags:
+  - global scope
+  - origin
+  - serialized
+translation_of: Web/API/WindowOrWorkerGlobalScope/origin
+original_slug: Web/API/WindowOrWorkerGlobalScope/origin
+---
+<p>{{APIRef()}}{{SeeCompatTable}}{{domxref("WindowOrWorkerGlobalScope")}} 接口的 <code><strong>origin</strong></code> 只读属性返回全局范围的 <strong>origin</strong>, 序列化为一个字符串。</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">let <em>myOrigin</em> = self.origin; // or just origin
+</pre>
+
+<h3 id="Value">Value</h3>
+
+<p>A {{domxref("USVString")}}.</p>
+
+<h2 id="Examples">Examples</h2>
+
+<p>Executed from inside a worker script, the following snippet will log the worker's global scope's origin to the console each time it receives a message</p>
+
+<pre class="brush: js">onmessage = function() {
+  console.log(self.origin);
+};</pre>
+
+<p>If the origin is not a scheme/host/port tuple (say you are trying to run it locally, i.e. via <code>file://</code> URL), <code>origin</code> will return the string <code>"null"</code>.</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'webappapis.html#dom-origin', 'WindowOrWorkerGlobalScope.origin')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(59)}}</td>
+   <td>{{CompatGeckoDesktop(54)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(59)}}</td>
+   <td>{{CompatChrome(59)}}</td>
+   <td>{{CompatGeckoMobile(54)}} </td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/zh-cn/web/api/queuemicrotask/index.html b/files/zh-cn/web/api/queuemicrotask/index.html
new file mode 100644
index 0000000000..9079205222
--- /dev/null
+++ b/files/zh-cn/web/api/queuemicrotask/index.html
@@ -0,0 +1,109 @@
+---
+title: WindowOrWorkerGlobalScope.queueMicrotask()
+slug: Web/API/queueMicrotask
+tags:
+  - API
+  - JavaScript
+  - Method
+  - Microtask
+  - 参考
+  - 同步
+  - 方法
+translation_of: Web/API/WindowOrWorkerGlobalScope/queueMicrotask
+original_slug: Web/API/WindowOrWorkerGlobalScope/queueMicrotask
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<div><span class="seoSummary">{{domxref("Window")}} 或 {{domxref("Worker")}} 接口的 <code><strong>queueMicrotask()</strong></code> 方法，queues a microtask to be executed at a safe time prior to control returning to the browser's event loop.</span>microtask 是一个简短的函数，它将在当前任务（task）完成其工作之后运行，并且在执行上下文的控制返回到浏览器的事件循环之前，没有其他代码等待运行。The microtask is a short function which will run after the current task has completed its work and when there is no other code waiting to be run before control of the execution context is returned to the browser's event loop.</div>
+
+<div></div>
+
+<p>This lets your code run without interfering with any other, potentially higher priority, code that is pending, but before the browser regains control over the execution context, potentially depending on work you need to complete. You can learn more about how to use microtasks and why you might choose to do so in our <a href="/en-US/docs/Web/API/HTML_DOM_API/Microtask_guide">microtask guide</a>.</p>
+
+<p>The importance of microtasks comes in its ability to perform tasks asynchronously but in a specific order. See <a href="/en-US/docs/Web/API/HTML_DOM_API/Microtask_guide">Using microtasks in JavaScript with queueMicrotask()</a> for more details.</p>
+
+<p>Microtasks are especially useful for libraries and frameworks that need to perform final cleanup or other just-before-rendering tasks.</p>
+
+<p><code>queueMicrotask()</code> 处于 {{domxref("WindowOrWorkerGlobalScope")}} mixin 之下。</p>
+
+<h2 id="语法">语法</h2>
+
+<pre class="syntaxbox"><em>scope</em>.queueMicrotask(<em>function</em>);
+</pre>
+
+<h3 id="参数">参数</h3>
+
+<dl>
+ <dt><code>function</code></dt>
+ <dd>A {{jsxref("function")}} to be executed when the browser engine determines it is safe to call your code.微任务（microtask）的执行顺序在所有挂起的任务（pending tasks）完成之后，在对浏览器的事件循环产生控制（yielding control to the browser's event loop）之前。</dd>
+</dl>
+
+<h3 id="返回值">返回值</h3>
+
+<p><code>undefined</code>。</p>
+
+<h2 id="示例">示例</h2>
+
+<pre class="brush: js">self.queueMicrotask(() =&gt; {
+  // 函数的内容
+})</pre>
+
+<p>来自 <a href="https://html.spec.whatwg.org/multipage/timers-and-user-prompts.html#microtask-queuing"><code>queueMicrotask</code> 的规范文档：</a></p>
+
+<pre class="brush: js">MyElement.prototype.loadData = function (url) {
+  if (this._cache[url]) {
+    queueMicrotask(() =&gt; {
+      this._setData(this._cache[url]);
+      this.dispatchEvent(new Event("load"));
+    });
+  } else {
+    fetch(url).then(res =&gt; res.arrayBuffer()).then(data =&gt; {
+      this._cache[url] = data;
+      this._setData(data);
+      this.dispatchEvent(new Event("load"));
+    });
+  }
+};</pre>
+
+<h2 id="polyfill">polyfill</h2>
+
+<p>下面的代码是一份 <code>queueMicrotask()</code> 的 polyfill。它通过使用立即 resolve 的 promise 创建一个微任务（microtask），如果无法创建 promise，则回落（fallback）到使用<code>setTimeout()</code>。</p>
+
+<pre class="brush: js">if (typeof window.queueMicrotask !== "function") {
+  window.queueMicrotask = function (callback) {
+    Promise.resolve()
+      .then(callback)
+      .catch(e =&gt; setTimeout(() =&gt; { throw e; }));
+  };
+}
+</pre>
+
+<h2 id="规范">规范</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Specification</th>
+   <th>Status</th>
+   <th>Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML WHATWG", "timers-and-user-prompts.html#microtask-queuing", "self.queueMicrotask()")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+<p>{{Compat("api.WindowOrWorkerGlobalScope.queueMicrotask")}}</p>
+
+<h2 id="参见">参见</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/HTML_DOM_API/Microtask_guide">Using microtasks in JavaScript with queueMicrotask()</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous">Asynchronous JavaScript</a></li>
+ <li><a href="https://github.com/fergald/docs/blob/master/explainers/queueMicrotask.md">queueMicrotask explainer</a></li>
+ <li><a href="https://jakearchibald.com/2015/tasks-microtasks-queues-and-schedules/">Tasks, microtasks, queues and schedules</a> by Jake Archibald</li>
+</ul>
diff --git a/files/zh-cn/web/api/setinterval/index.html b/files/zh-cn/web/api/setinterval/index.html
new file mode 100644
index 0000000000..f3401fc5a5
--- /dev/null
+++ b/files/zh-cn/web/api/setinterval/index.html
@@ -0,0 +1,636 @@
+---
+title: window.setInterval
+slug: Web/API/setInterval
+tags:
+  - API
+  - DOM
+  - 定时
+  - 方法
+  - 时间
+translation_of: Web/API/WindowOrWorkerGlobalScope/setInterval
+original_slug: Web/API/WindowOrWorkerGlobalScope/setInterval
+---
+<div>{{ ApiRef("HTML DOM") }}</div>
+
+<p>{{domxref("WindowOrWorkerGlobalScope")}} 的 <strong><code>setInterval()</code> </strong>方法重复调用一个函数或执行一个代码段，在每次调用之间具有固定的时间延迟。</p>
+
+<p><span class="seoSummary">在窗口和工作接口上提供的<strong>setInterval()</strong>方法重复调用函数或执行代码片段，每次调用之间有固定的时间延迟。它返回一个时间间隔ID，该ID唯一地标识时间间隔，因此您可以稍后通过调用<strong>clearInterval()</strong>来删除它。这个方法是由<strong>WindowOrWorkerGlobalScope mixin</strong>定义的。</span></p>
+
+<h2 id="语法">语法</h2>
+
+<pre class="syntaxbox notranslate"><em>var intervalID</em> = scope.setInterval(<em>func</em>, <em>delay</em>, [<em>arg1</em>, <em>arg2</em>, ...]);
+<em>var intervalID</em> = scope.setInterval(<em>code</em>, <em>delay</em>);
+</pre>
+
+<h3 id="参数">参数</h3>
+
+<dl>
+ <dt><code>func</code></dt>
+ <dd>要重复调用的函数。 每经过指定 <code>延迟</code> 毫秒后执行的{{jsxref("函数")}} 。该函数不接受任何参数，也没有返回值。</dd>
+ <dt><code>code</code></dt>
+ <dd>这个语法是可选的，你可以传递一个字符串来代替一个函数对象，你传递的字符串会被编译然后每个delay毫秒时间内执行一次。这个语法因为存在安全风险所以不被推荐使用。</dd>
+ <dt><code>delay</code></dt>
+ <dd>是每次延迟的毫秒数 (一秒等于1000毫秒)，函数的每次调用会在该延迟之后发生。和<a href="/en-US/docs/DOM/window.setTimeout#Minimum_delay_and_timeout_nesting" title="en-US/docs/DOM/window.setTimeout#Minimum delay and timeout nesting">setTimeout</a>一样，实际的延迟时间可能会稍长一点。这个时间计算单位是毫秒（千分之一秒），这个定时器会使指定方法或者代码段执行的时候进行时间延迟。如果这个参数值小于10，则默认使用值为10。请注意，真正延迟时间或许更长； 请参考示例： {{SectionOnPage("/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout", "Reasons for delays longer than specified")}} </dd>
+ <dt><code>arg1, ..., argN</code> {{optional_inline}}</dt>
+ <dd>当定时器过期的时候，将被传递给func指定函数的附加参数。</dd>
+</dl>
+
+<h3 id="返回值">返回值</h3>
+
+<p>此返回值<code>intervalID</code>是一个非零数值，用来标识通过<code>setInterval()</code>创建的计时器，这个值可以用来作为<code>clearInterval()</code>的参数来清除对应的计时器 。</p>
+
+<p>值得注意的是，<code>setInterval()</code>和<code>setTimeout()</code>共享同一个ID池，并且<code>clearInterval()</code>和<code>clearTimeout()</code>在技术上是可互换使用的。但是，我们必须去匹配<code>clearInterval()</code>和<code>clearTimeout()</code>对应的<code>id，以</code>避免代码杂乱无章，增强代码的可维护性。</p>
+
+<div class="note"><strong>Note</strong>: The <code>delay</code> argument is converted to a signed 32-bit integer. This effectively limits <code>delay</code> to 2147483647 ms, since it's specified as a signed integer in the IDL.</div>
+
+<h2 id="示例">示例</h2>
+
+<h3 id="例１：基本用法">例１：基本用法</h3>
+
+<p>下面例子是 <code>setInterval()</code>的基本语法</p>
+
+<pre class="brush:js notranslate">var intervalID = window.setInterval(myCallback, 500, 'Parameter 1', 'Parameter 2');
+
+function myCallback(a, b)
+{
+ // Your code here
+ // Parameters are purely optional.
+ console.log(a);
+ console.log(b);
+}
+</pre>
+
+<h3 id="例２：两种颜色的切换">例２：两种颜色的切换</h3>
+
+<p>下面的例子里会每隔一秒就调用函数 <code>flashtext()</code> 一次，直至你通过按下 Stop 按钮来清除本次重复操作的唯一辨识符 <code>intervalID</code>。</p>
+
+<pre class="brush:html notranslate">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+  &lt;meta charset="UTF-8" /&gt;
+  &lt;title&gt;setInterval/clearInterval example&lt;/title&gt;
+
+  &lt;script&gt;
+    var nIntervId;
+
+    function changeColor() {
+      nIntervId = setInterval(flashText, 1000);
+    }
+
+    function flashText() {
+      var oElem = document.getElementById('my_box');
+      oElem.style.color = oElem.style.color == 'red' ? 'blue' : 'red';
+      // oElem.style.color == 'red' ? 'blue' : 'red' is a ternary operator.
+    }
+
+    function stopTextColor() {
+      clearInterval(nIntervId);
+    }
+  &lt;/script&gt;
+&lt;/head&gt;
+
+&lt;body onload="changeColor();"&gt;
+  &lt;div id="my_box"&gt;
+    &lt;p&gt;Hello World&lt;/p&gt;
+  &lt;/div&gt;
+
+  &lt;button onclick="stopTextColor();"&gt;Stop&lt;/button&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h3 id="例３：打字机效果">例３：打字机效果</h3>
+
+<p>下面这个例子通过键入、删除和再次键入所有 <a href="/en-US/docs/DOM/NodeList"><code>NodeList</code></a> 中的符合特定的选择器的字符，以达到打字机的效果。</p>
+
+<div>
+<pre class="brush:html notranslate">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+&lt;meta charset="UTF-8" /&gt;
+&lt;title&gt;JavaScript Typewriter - MDN Example&lt;/title&gt;
+&lt;script&gt;
+function Typewriter (sSelector, nRate) {
+
+  function clean () {
+    clearInterval(nIntervId);
+    bTyping = false;
+    bStart = true;
+    oCurrent = null;
+    aSheets.length = nIdx = 0;
+  }
+
+  function scroll (oSheet, nPos, bEraseAndStop) {
+    if (!oSheet.hasOwnProperty("parts") || aMap.length &lt; nPos) { return true; }
+
+    var oRel, bExit = false;
+
+    if (aMap.length === nPos) { aMap.push(0); }
+
+    while (aMap[nPos] &lt; oSheet.parts.length) {
+      oRel = oSheet.parts[aMap[nPos]];
+
+      scroll(oRel, nPos + 1, bEraseAndStop) ? aMap[nPos]++ : bExit = true;
+
+      if (bEraseAndStop &amp;&amp; (oRel.ref.nodeType - 1 | 1) === 3 &amp;&amp; oRel.ref.nodeValue) {
+        bExit = true;
+        oCurrent = oRel.ref;
+        sPart = oCurrent.nodeValue;
+        oCurrent.nodeValue = "";
+      }
+
+      oSheet.ref.appendChild(oRel.ref);
+      if (bExit) { return false; }
+    }
+
+    aMap.length--;
+    return true;
+  }
+
+  function typewrite () {
+    if (sPart.length === 0 &amp;&amp; scroll(aSheets[nIdx], 0, true) &amp;&amp; nIdx++ === aSheets.length - 1) { clean(); return; }
+
+    oCurrent.nodeValue += sPart.charAt(0);
+    sPart = sPart.slice(1);
+  }
+
+  function Sheet (oNode) {
+    this.ref = oNode;
+    if (!oNode.hasChildNodes()) { return; }
+    this.parts = Array.prototype.slice.call(oNode.childNodes);
+
+    for (var nChild = 0; nChild &lt; this.parts.length; nChild++) {
+      oNode.removeChild(this.parts[nChild]);
+      this.parts[nChild] = new Sheet(this.parts[nChild]);
+    }
+  }
+
+  var
+    nIntervId, oCurrent = null, bTyping = false, bStart = true,
+    nIdx = 0, sPart = "", aSheets = [], aMap = [];
+
+  this.rate = nRate || 100;
+
+  this.play = function () {
+    if (bTyping) { return; }
+    if (bStart) {
+      var aItems = document.querySelectorAll(sSelector);
+
+      if (aItems.length === 0) { return; }
+      for (var nItem = 0; nItem &lt; aItems.length; nItem++) {
+        aSheets.push(new Sheet(aItems[nItem]));
+        /* Uncomment the following line if you have previously hidden your elements via CSS: */
+        // aItems[nItem].style.visibility = "visible";
+      }
+
+      bStart = false;
+    }
+
+    nIntervId = setInterval(typewrite, this.rate);
+    bTyping = true;
+  };
+
+  this.pause = function () {
+    clearInterval(nIntervId);
+    bTyping = false;
+  };
+
+  this.terminate = function () {
+    oCurrent.nodeValue += sPart;
+    sPart = "";
+    for (nIdx; nIdx &lt; aSheets.length; scroll(aSheets[nIdx++], 0, false));
+    clean();
+  };
+}
+
+/* usage: */
+var oTWExample1 = new Typewriter(/* elements: */ "#article, h1, #info, #copyleft", /* frame rate (optional): */ 15);
+
+/* default frame rate is 100: */
+var oTWExample2 = new Typewriter("#controls");
+
+/* you can also change the frame rate value modifying the "rate" property; for example: */
+// oTWExample2.rate = 150;
+
+onload = function () {
+  oTWExample1.play();
+  oTWExample2.play();
+};
+&lt;/script&gt;
+&lt;style type="text/css"&gt;
+span.intLink, a, a:visited {
+  cursor: pointer;
+  color: #000000;
+  text-decoration: underline;
+}
+
+#info {
+  width: 180px;
+  height: 150px;
+  float: right;
+  background-color: #eeeeff;
+  padding: 4px;
+  overflow: auto;
+  font-size: 12px;
+  margin: 4px;
+  border-radius: 5px;
+  /* visibility: hidden; */
+}
+&lt;/style&gt;
+&lt;/head&gt;
+
+&lt;body&gt;
+
+&lt;p id="copyleft" style="font-style: italic; font-size: 12px; text-align: center;"&gt;CopyLeft 2012 by &lt;a href="https://developer.mozilla.org/" target="_blank"&gt;Mozilla Developer Network&lt;/a&gt;&lt;/p&gt;
+&lt;p id="controls" style="text-align: center;"&gt;[&amp;nbsp;&lt;span class="intLink" onclick="oTWExample1.play();"&gt;Play&lt;/span&gt; | &lt;span class="intLink" onclick="oTWExample1.pause();"&gt;Pause&lt;/span&gt; | &lt;span class="intLink" onclick="oTWExample1.terminate();"&gt;Terminate&lt;/span&gt;&amp;nbsp;]&lt;/p&gt;
+&lt;div id="info"&gt;
+Vivamus blandit massa ut metus mattis in fringilla lectus imperdiet. Proin ac ante a felis ornare vehicula. Fusce pellentesque lacus vitae eros convallis ut mollis magna pellentesque. Pellentesque placerat enim at lacus ultricies vitae facilisis nisi fringilla. In tincidunt tincidunt tincidunt.
+&lt;/div&gt;
+&lt;h1&gt;JavaScript Typewriter&lt;/h1&gt;
+
+&lt;div id="article"&gt;
+&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ultrices dolor ac dolor imperdiet ullamcorper. Suspendisse quam libero, luctus auctor mollis sed, malesuada condimentum magna. Quisque in ante tellus, in placerat est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec a mi magna, quis mattis dolor. Etiam sit amet ligula quis urna auctor imperdiet nec faucibus ante. Mauris vel consectetur dolor. Nunc eget elit eget velit pulvinar fringilla consectetur aliquam purus. Curabitur convallis, justo posuere porta egestas, velit erat ornare tortor, non viverra justo diam eget arcu. Phasellus adipiscing fermentum nibh ac commodo. Nam turpis nunc, suscipit a hendrerit vitae, volutpat non ipsum.&lt;/p&gt;
+&lt;form&gt;
+&lt;p&gt;Phasellus ac nisl lorem: &lt;input type="text" /&gt;&lt;br /&gt;
+&lt;textarea style="width: 400px; height: 200px;"&gt;Nullam commodo suscipit lacus non aliquet. Phasellus ac nisl lorem, sed facilisis ligula. Nam cursus lobortis placerat. Sed dui nisi, elementum eu sodales ac, placerat sit amet mauris. Pellentesque dapibus tellus ut ipsum aliquam eu auctor dui vehicula. Quisque ultrices laoreet erat, at ultrices tortor sodales non. Sed venenatis luctus magna, ultricies ultricies nunc fringilla eget. Praesent scelerisque urna vitae nibh tristique varius consequat neque luctus. Integer ornare, erat a porta tempus, velit justo fermentum elit, a fermentum metus nisi eu ipsum. Vivamus eget augue vel dui viverra adipiscing congue ut massa. Praesent vitae eros erat, pulvinar laoreet magna. Maecenas vestibulum mollis nunc in posuere. Pellentesque sit amet metus a turpis lobortis tempor eu vel tortor. Cras sodales eleifend interdum.&lt;/textarea&gt;&lt;/p&gt;
+&lt;input type="submit" value="Send" /&gt;
+&lt;/form&gt;
+&lt;p&gt;Duis lobortis sapien quis nisl luctus porttitor. In tempor semper libero, eu tincidunt dolor eleifend sit amet. Ut nec velit in dolor tincidunt rhoncus non non diam. Morbi auctor ornare orci, non euismod felis gravida nec. Curabitur elementum nisi a eros rutrum nec blandit diam placerat. Aenean tincidunt risus ut nisi consectetur cursus. Ut vitae quam elit. Donec dignissim est in quam tempor consequat. Aliquam aliquam diam non felis convallis suscipit. Nulla facilisi. Donec lacus risus, dignissim et fringilla et, egestas vel eros. Duis malesuada accumsan dui, at fringilla mauris bibStartum quis. Cras adipiscing ultricies fermentum. Praesent bibStartum condimentum feugiat.&lt;/p&gt;
+&lt;p&gt;Nam faucibus, ligula eu fringilla pulvinar, lectus tellus iaculis nunc, vitae scelerisque metus leo non metus. Proin mattis lobortis lobortis. Quisque accumsan faucibus erat, vel varius tortor ultricies ac. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec libero nunc. Nullam tortor nunc, elementum a consectetur et, ultrices eu orci. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a nisl eu sem vehicula egestas.&lt;/p&gt;
+&lt;/div&gt;
+&lt;/body&gt;
+&lt;/html&gt;</pre>
+</div>
+
+<p><a href="/files/3997/typewriter.html">查看示例效果</a>，亦可参考：<a href="https://developer.mozilla.org/zh-CN/docs/DOM/window.clearInterval" title="en-US/docs/DOM/window.clearInterval"><code>clearInterval()</code></a>。</p>
+
+<h2 id="回调参数">回调参数</h2>
+
+<p>如前所述，Internet Explorer 9及以下版本不支持在<code>setTimeout()</code>或<code>setInterval()</code>中向回调函数传递参数。下面的IE专用代码演示了一种克服这种限制的方法。使用时，只需将以下代码添加到你的脚本顶部即可。</p>
+
+<pre class="brush:js notranslate">/*\
+|*|
+|*|  IE-specific polyfill that enables the passage of arbitrary arguments to the
+|*|  callback functions of javascript timers (HTML5 standard syntax).
+|*|
+|*|  https://developer.mozilla.org/en-US/docs/Web/API/window.setInterval
+|*|  https://developer.mozilla.org/User:fusionchess
+|*|
+|*|  Syntax:
+|*|  var timeoutID = window.setTimeout(func, delay[, arg1, arg2, ...]);
+|*|  var timeoutID = window.setTimeout(code, delay);
+|*|  var intervalID = window.setInterval(func, delay[, arg1, arg2, ...]);
+|*|  var intervalID = window.setInterval(code, delay);
+|*|
+\*/
+
+if (document.all &amp;&amp; !window.setTimeout.isPolyfill) {
+  var __nativeST__ = window.setTimeout;
+  window.setTimeout = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) {
+    var aArgs = Array.prototype.slice.call(arguments, 2);
+    return __nativeST__(vCallback instanceof Function ? function () {
+      vCallback.apply(null, aArgs);
+    } : vCallback, nDelay);
+  };
+  window.setTimeout.isPolyfill = true;
+}
+
+if (document.all &amp;&amp; !window.setInterval.isPolyfill) {
+  var __nativeSI__ = window.setInterval;
+  window.setInterval = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) {
+    var aArgs = Array.prototype.slice.call(arguments, 2);
+    return __nativeSI__(vCallback instanceof Function ? function () {
+      vCallback.apply(null, aArgs);
+    } : vCallback, nDelay);
+  };
+  window.setInterval.isPolyfill = true;
+}
+</pre>
+
+<p>另一种方式是使用匿名函数调用你的回调函数，但是这种方式开销较大。例如：</p>
+
+<pre class="brush:js notranslate">var intervalID = setInterval(function() { myFunc('one', 'two', 'three'); }, 1000);</pre>
+
+<p>还有一种方式是使用 <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Function/bind" title="/en-US/docs/JavaScript/Reference/Global_Objects/Function/bind">function's bind</a>. 例如：</p>
+
+<pre class="brush:js notranslate">var intervalID = setInterval(function(arg1) {}.bind(undefined, 10), 1000);</pre>
+
+<p>{{h3_gecko_minversion("Inactive tabs", "5.0")}}</p>
+
+<p>Starting in Gecko 5.0 {{geckoRelease("5.0")}}, intervals are clamped to fire no more often than once per second in inactive tabs.</p>
+
+<h2 id="this_的问题">"<a href="/en-US/docs/Web/JavaScript/Reference/Operators/this"><code>this</code></a>" 的问题</h2>
+
+<p>当你给 <code>setInterval()</code> 传递一个方法或者函数的时候，<a href="/en-US/docs/Web/JavaScript/Reference/Operators/this"><code>this</code></a> 值的绑定会存在一些问题。  这个问题在<a href="/en-US/docs/Web/JavaScript/Reference/Operators/this#As_an_object_method">JavaScript 参考</a> 进行了详细解释。</p>
+
+<h3 id="解释">解释</h3>
+
+<p>Code executed by <code>setInterval()</code> runs in a separate execution context than the function from which it was called. As a consequence, the <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this"><code>this</code></a> keyword for the called function is set to the <code>window</code> (or <code>global</code>) object, it is not the same as the <code>this</code> value for the function that called <code>setTimeout</code>. See the following example (which uses <code>setTimeout()</code> instead of <code>setInterval()</code> – the problem, in fact, is the same for both timers):</p>
+
+<pre class="brush:js notranslate">myArray = ['zero', 'one', 'two'];
+
+myArray.myMethod = function (sProperty) {
+    alert(arguments.length &gt; 0 ? this[sProperty] : this);
+};
+
+myArray.myMethod(); // prints "zero,one,two"
+myArray.myMethod(1); // prints "one"
+setTimeout(myArray.myMethod, 1000); // prints "[object Window]" after 1 second
+setTimeout(myArray.myMethod, 1500, "1"); // prints "undefined" after 1,5 seconds
+// passing the 'this' object with .call won't work
+// because this will change the value of this inside setTimeout itself
+// while we want to change the value of this inside myArray.myMethod
+// in fact, it will be an error because setTimeout code expects this to be the window object:
+setTimeout.call(myArray, myArray.myMethod, 2000); // error: "NS_ERROR_XPC_BAD_OP_ON_WN_PROTO: Illegal operation on WrappedNative prototype object"
+setTimeout.call(myArray, myArray.myMethod, 2500, 2); // same error
+</pre>
+
+<p>As you can see there are no ways to pass the <code>this</code> object to the callback function in the legacy JavaScript.</p>
+
+<h3 id="一个可能的解决方案">一个可能的解决方案</h3>
+
+<p>A possible way to solve the "<code>this</code>" problem is to replace the two native <code>setTimeout()</code> or <code>setInterval()</code> global functions with two <em>non-native</em> ones that enable their invocation through the <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Function/call"><code>Function.prototype.call</code></a> method. The following example shows a possible replacement:</p>
+
+<pre class="brush:js notranslate">// Enable the passage of the 'this' object through the JavaScript timers
+
+var __nativeST__ = window.setTimeout, __nativeSI__ = window.setInterval;
+
+window.setTimeout = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) {
+  var oThis = this, aArgs = Array.prototype.slice.call(arguments, 2);
+  return __nativeST__(vCallback instanceof Function ? function () {
+    vCallback.apply(oThis, aArgs);
+  } : vCallback, nDelay);
+};
+
+window.setInterval = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) {
+  var oThis = this, aArgs = Array.prototype.slice.call(arguments, 2);
+  return __nativeSI__(vCallback instanceof Function ? function () {
+    vCallback.apply(oThis, aArgs);
+  } : vCallback, nDelay);
+};</pre>
+
+<div class="note">These two replacements also enable the HTML5 standard passage of arbitrary arguments to the callback functions of timers in IE. So they can be used as <em>non-standard-compliant</em> polyfills also. See the <a href="#Callback_arguments">callback arguments paragraph</a> for a <em>standard-compliant</em> polyfill.</div>
+
+<p>New feature test:</p>
+
+<pre class="brush:js notranslate">myArray = ['zero', 'one', 'two'];
+
+myArray.myMethod = function (sProperty) {
+    alert(arguments.length &gt; 0 ? this[sProperty] : this);
+};
+
+setTimeout(alert, 1500, 'Hello world!'); // the standard use of setTimeout and setInterval is preserved, but...
+setTimeout.call(myArray, myArray.myMethod, 2000); // prints "zero,one,two" after 2 seconds
+setTimeout.call(myArray, myArray.myMethod, 2500, 2); // prints "two" after 2,5 seconds
+</pre>
+
+<p>Another, more complex, solution for<strong> </strong>the <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this"><code>this</code></a> problem<strong> </strong>is <a href="#MiniDaemon_-_A_framework_for_managing_timers">the following framework</a>.</p>
+
+<div class="note">JavaScript 1.8.5 introduces the <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind">Function.prototype.bind()</a></code> method, which lets you specify the value that should be used as <code>this</code> for all calls to a given function. This lets you easily bypass problems where it's unclear what this will be, depending on the context from which your function was called. Also, ES2015 supports <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions">arrow functions</a>, with lexical this allowing us to write setInterval( () =&gt; this.myMethod) if we're inside myArray method.</div>
+
+<h2 id="MiniDaemon：一个用于管理定时器的小框架">MiniDaemon：一个用于管理定时器的小框架</h2>
+
+<p>In pages requiring many timers, it can often be difficult to keep track of all of the running timer events. One approach to solving this problem is to store information about the state of a timer in an object. Following is a minimal example of such an abstraction. The constructor architecture explicitly avoids the use of closures. It also offers an alternative way to pass the <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this"><code>this</code></a> object to the callback function (see <a href="#The_.22this.22_problem">The "this" problem</a> for details). The following code is also <a href="https://github.com/madmurphy/minidaemon.js">available on GitHub</a>.</p>
+
+<div class="note">For a more complex but still modular version of it (<code><em>Daemon</em></code>) see <a href="/en-US/Add-ons/Code_snippets/Timers/Daemons">JavaScript Daemons Management</a>. This more complex version is nothing but a big and scalable collection of methods for the <code><em>Daemon</em></code> constructor. However, the <code><em>Daemon</em></code> constructor itself is nothing but a clone of <code><em>MiniDaemon</em></code> with an added support for <em>init</em> and <em>onstart</em> functions declarable during the instantiation of the <code><em>daemon</em></code>. <strong>So the <code><em>MiniDaemon</em></code> framework remains the recommended way for simple animations</strong>, because <code><em>Daemon</em></code> without its collection of methods is essentially a clone of it.</div>
+
+<h3 id="minidaemon.js">minidaemon.js</h3>
+
+<div>
+<pre class="brush:js notranslate">/*\
+|*|
+|*|  :: MiniDaemon ::
+|*|
+|*|  Revision #2 - September 26, 2014
+|*|
+|*|  https://developer.mozilla.org/en-US/docs/Web/API/window.setInterval
+|*|  https://developer.mozilla.org/User:fusionchess
+|*|  https://github.com/madmurphy/minidaemon.js
+|*|
+|*|  This framework is released under the GNU Lesser General Public License, version 3 or later.
+|*|  http://www.gnu.org/licenses/lgpl-3.0.html
+|*|
+\*/
+
+function MiniDaemon (oOwner, fTask, nRate, nLen) {
+  if (!(this &amp;&amp; this instanceof MiniDaemon)) { return; }
+  if (arguments.length &lt; 2) { throw new TypeError('MiniDaemon - not enough arguments'); }
+  if (oOwner) { this.owner = oOwner; }
+  this.task = fTask;
+  if (isFinite(nRate) &amp;&amp; nRate &gt; 0) { this.rate = Math.floor(nRate); }
+  if (nLen &gt; 0) { this.length = Math.floor(nLen); }
+}
+
+MiniDaemon.prototype.owner = null;
+MiniDaemon.prototype.task = null;
+MiniDaemon.prototype.rate = 100;
+MiniDaemon.prototype.length = Infinity;
+
+  /* These properties should be read-only */
+
+MiniDaemon.prototype.SESSION = -1;
+MiniDaemon.prototype.INDEX = 0;
+MiniDaemon.prototype.PAUSED = true;
+MiniDaemon.prototype.BACKW = true;
+
+  /* Global methods */
+
+MiniDaemon.forceCall = function (oDmn) {
+  oDmn.INDEX += oDmn.BACKW ? -1 : 1;
+  if (oDmn.task.call(oDmn.owner, oDmn.INDEX, oDmn.length, oDmn.BACKW) === false || oDmn.isAtEnd()) { oDmn.pause(); return false; }
+  return true;
+};
+
+  /* Instances methods */
+
+MiniDaemon.prototype.isAtEnd = function () {
+  return this.BACKW ? isFinite(this.length) &amp;&amp; this.INDEX &lt; 1 : this.INDEX + 1 &gt; this.length;
+};
+
+MiniDaemon.prototype.synchronize = function () {
+  if (this.PAUSED) { return; }
+  clearInterval(this.SESSION);
+  this.SESSION = setInterval(MiniDaemon.forceCall, this.rate, this);
+};
+
+MiniDaemon.prototype.pause = function () {
+  clearInterval(this.SESSION);
+  this.PAUSED = true;
+};
+
+MiniDaemon.prototype.start = function (bReverse) {
+  var bBackw = Boolean(bReverse);
+  if (this.BACKW === bBackw &amp;&amp; (this.isAtEnd() || !this.PAUSED)) { return; }
+  this.BACKW = bBackw;
+  this.PAUSED = false;
+  this.synchronize();
+};
+</pre>
+</div>
+
+<div class="note">MiniDaemon passes arguments to the callback function. If you want to work on it with browsers that natively do not support this feature, use one of the methods proposed above.</div>
+
+<h3 id="语法_2">语法</h3>
+
+<p><code>var myDaemon = new MiniDaemon(<em>thisObject</em>, <em>callback</em>[</code><code>, <em>rate</em></code><code>[, <em>length</em>]]);</code></p>
+
+<h3 id="说明">说明</h3>
+
+<p>Returns a JavaScript <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object"><code>Object</code></a> containing all information needed by an animation (like the <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this"><code>this</code></a> object, the callback function, the length, the frame-rate).</p>
+
+<h4 id="参数_2">参数</h4>
+
+<dl>
+ <dt><code>thisObject</code></dt>
+ <dd>The <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this"><code>this</code></a> object on which the <em>callback</em> function is called. It can be an <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object"><code>object</code></a> or <code>null</code>.</dd>
+ <dt><code>callback</code></dt>
+ <dd>The function that is repeatedly invoked . <strong>It is called with three arguments</strong>: <em>index</em> (the iterative index of each invocation), <em>length</em> (the number of total invocations assigned to the <em>daemon</em> - finite or <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Infinity"><code>Infinity</code></a>) and <em>backwards</em> (a boolean expressing whether the <em>index</em> is increasing or decreasing). It is something like <em>callback</em>.call(<em>thisObject</em>, <em>index</em>, <em>length</em>, <em>backwards</em>). <strong>If the callback function returns a <code>false</code> value the <em>daemon</em> is paused</strong>.</dd>
+ <dt><code>rate (optional)</code></dt>
+ <dd>The time lapse (in number of milliseconds) between each invocation. The default value is 100.</dd>
+ <dt><code>length (optional)</code></dt>
+ <dd>The total number of invocations. It can be a positive integer or <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Infinity"><code>Infinity</code></a>. The default value is <code>Infinity</code>.</dd>
+</dl>
+
+<h4 id="MiniDaemon_实例（instance）的属性"><code>MiniDaemon</code> 实例（instance）的属性</h4>
+
+<dl>
+ <dt><code>myDaemon.owner</code></dt>
+ <dd>The <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this"><code>this</code></a> object on which is executed the daemon (read/write). It can be an <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object"><code>object</code></a> or <code>null</code>.</dd>
+ <dt><code>myDaemon.task</code></dt>
+ <dd>The function that is repeatedly invoked (read/write). It is called with three arguments: <em>index</em> (the iterative index of each invocation), <em>length</em> (the number of total invocations assigned to the daemon - finite or <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Infinity"><code>Infinity</code></a>) and backwards (a boolean expressing whether the <em>index</em> is decreasing or not) – see above. If the <code>myDaemon.task</code> function returns a <code>false</code> value the <em>daemon</em> is paused.</dd>
+ <dt><code>myDaemon.rate</code></dt>
+ <dd>The time lapse (in number of milliseconds) between each invocation (read/write).</dd>
+ <dt><code>myDaemon.length</code></dt>
+ <dd>The total number of invocations. It can be a positive integer or <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Infinity"><code>Infinity</code></a> (read/write).</dd>
+</dl>
+
+<h4 id="MiniDaemon_实例的方法"><code>MiniDaemon</code> 实例的方法</h4>
+
+<dl>
+ <dt><code>myDaemon.isAtEnd()</code></dt>
+ <dd>Returns a boolean expressing whether the <em>daemon</em> is at the start/end position or not.</dd>
+ <dt><code>myDaemon.synchronize()</code></dt>
+ <dd>Synchronize the timer of a started daemon with the time of its invocation.</dd>
+ <dt><code>myDaemon.pause()</code></dt>
+ <dd>Pauses the daemon.</dd>
+ <dt><code>myDaemon.start([<em>reverse</em>])</code></dt>
+ <dd>Starts the daemon forward (<em>index</em> of each invocation increasing) or backwards (<em>index</em> decreasing).</dd>
+</dl>
+
+<h4 id="MiniDaemon_全局对象的方法"><code>MiniDaemon</code> 全局对象的方法</h4>
+
+<dl>
+ <dt><code>MiniDaemon.forceCall(<em>minidaemon</em>)</code></dt>
+ <dd>Forces a single callback to the <code><em>minidaemon</em>.task</code> function regardless of the fact that the end has been reached or not. In any case the internal <code>INDEX</code> property is increased/decreased (depending on the actual direction of the process).</dd>
+</dl>
+
+<h3 id="使用示例">使用示例</h3>
+
+<p>HTML：</p>
+
+<pre class="brush:html notranslate">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+  &lt;meta charset="UTF-8" /&gt;
+  &lt;title&gt;MiniDaemin Example - MDN&lt;/title&gt;
+  &lt;script type="text/javascript" src="minidaemon.js"&gt;&lt;/script&gt;
+  &lt;style type="text/css"&gt;
+    #sample_div {
+      visibility: hidden;
+    }
+  &lt;/style&gt;
+&lt;/head&gt;
+
+&lt;body&gt;
+  &lt;p&gt;
+    &lt;input type="button" onclick="fadeInOut.start(false /* optional */);" value="fade in" /&gt;
+    &lt;input type="button" onclick="fadeInOut.start(true);" value="fade out"&gt;
+    &lt;input type="button" onclick="fadeInOut.pause();" value="pause" /&gt;
+  &lt;/p&gt;
+
+  &lt;div id="sample_div"&gt;Some text here&lt;/div&gt;
+
+  &lt;script type="text/javascript"&gt;
+    function opacity (nIndex, nLength, bBackwards) {
+      this.style.opacity = nIndex / nLength;
+      if (bBackwards ? nIndex === 0 : nIndex === 1) {
+        this.style.visibility = bBackwards ? 'hidden' : 'visible';
+      }
+    }
+
+    var fadeInOut = new MiniDaemon(document.getElementById('sample_div'), opacity, 300, 8);
+  &lt;/script&gt;
+&lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p><a href="/files/3995/minidaemon_example.html" title="MiniDaemon Example">View this example in action</a></p>
+
+<h2 id="备注">备注</h2>
+
+<p>The <code>setInterval()</code> function is commonly used to set a delay for functions that are executed again and again, such as animations.</p>
+
+<p>You can cancel the interval using {{domxref("WindowOrWorkerGlobalScope.clearInterval()")}}.</p>
+
+<p>If you wish to have your function called <em>once</em> after the specified delay, use {{domxref("WindowOrWorkerGlobalScope.setTimeout()")}}.</p>
+
+<h3 id="Ensure_that_execution_duration_is_shorter_than_interval_frequency">Ensure that execution duration is shorter than interval frequency</h3>
+
+<p>If there is a possibility that your logic could take longer to execute than the interval time, it is recommended that you recursively call a named function using {{domxref("WindowOrWorkerGlobalScope.setTimeout")}}. For example, if using <code>setInterval</code> to poll a remote server every 5 seconds, network latency, an unresponsive server, and a host of other issues could prevent the request from completing in its allotted time. As such, you may find yourself with queued up XHR requests that won't necessarily return in order.</p>
+
+<p>In these cases, a recursive <code>setTimeout()</code> pattern is preferred:</p>
+
+<pre class="brush:js notranslate">(function loop(){
+   setTimeout(function() {
+      // Your logic here
+
+      loop();
+  }, delay);
+})();
+</pre>
+
+<p>In the above snippet, a named function <code>loop()</code> is declared and is immediately executed. <code>loop()</code> is recursively called inside <code>setTimeout()</code> after the logic has completed executing. While this pattern does not guarantee execution on a fixed interval, it does guarantee that the previous interval has completed before recursing.</p>
+
+<h3 id="Throttling_of_intervals">Throttling of intervals</h3>
+
+<p><code>setInterval()</code> is subject to the same throttling restrictions in Firefox as {{domxref("WindowOrWorkerGlobalScope.setTimeout","setTimeout()")}}; see <a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout#Reasons_for_delays_longer_than_specified">Reasons for delays longer than specified</a>.</p>
+
+<h2 id="规范">规范</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Specification</th>
+   <th>Status</th>
+   <th>Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'webappapis.html#dom-setinterval', 'WindowOrWorkerGlobalScope.setInterval()')}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td>Method moved to the <code>WindowOrWorkerGlobalScope</code> mixin in the latest spec.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML WHATWG", "webappapis.html#dom-setinterval", "WindowTimers.setInterval()")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td>Initial definition (DOM Level 0)</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+<div>
+
+
+<p>{{Compat("api.WindowOrWorkerGlobalScope.setInterval")}}</p>
+</div>
+
+<h2 id="参见">参见</h2>
+
+<ul>
+ <li><a href="/en-US/Add-ons/Code_snippets/Timers">JavaScript 定时器</a></li>
+ <li>{{domxref("WindowOrWorkerGlobalScope.setTimeout")}}</li>
+ <li>{{domxref("WindowOrWorkerGlobalScope.clearTimeout")}}</li>
+ <li>{{domxref("WindowOrWorkerGlobalScope.clearInterval")}}</li>
+ <li>{{domxref("window.requestAnimationFrame")}}</li>
+ <li><a href="/en-US/Add-ons/Code_snippets/Timers/Daemons"><em>Daemons</em> management</a></li>
+</ul>
diff --git a/files/zh-cn/web/api/settimeout/index.html b/files/zh-cn/web/api/settimeout/index.html
new file mode 100644
index 0000000000..1499eccade
--- /dev/null
+++ b/files/zh-cn/web/api/settimeout/index.html
@@ -0,0 +1,477 @@
+---
+title: window.setTimeout
+slug: Web/API/setTimeout
+tags:
+  - Timers
+  - WindowOrWorkerGlobalScope
+  - WindowTimers
+  - setTimeout
+translation_of: Web/API/WindowOrWorkerGlobalScope/setTimeout
+original_slug: Web/API/WindowOrWorkerGlobalScope/setTimeout
+---
+<p>{{APIRef("HTML DOM")}}</p>
+
+<p> {{domxref("WindowOrWorkerGlobalScope")}} 混合的 <strong><code>setTimeout()</code></strong>方法设置一个定时器，该定时器在定时器到期后执行一个函数或指定的一段代码。</p>
+
+<h2 id="Syntax" name="Syntax">语法</h2>
+
+<pre class="syntaxbox notranslate"><code>var<em> </em>timeoutID = <em>scope</em>.setTimeout(<em>function</em>[<em>,</em> <em>delay, arg1, arg2</em>, ...]);
+var timeoutID = <em>scope</em>.setTimeout(function[, <em>delay</em>]);
+var<em> </em>timeoutID = <em>scope</em>.setTimeout(<em>code</em>[, <em>delay</em>]);</code></pre>
+
+<h3 id="参数">参数</h3>
+
+<dl>
+ <dt><code>function</code></dt>
+ <dd>{{jsxref("function")}} 是你想要在到期时间(<code>delay</code>毫秒)之后执行的<a href="https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Function" title="en-US/docs/Core_JavaScript_1.5_Reference/Global_Objects/Function">函数</a>。</dd>
+ <dt><code>code</code></dt>
+ <dd>这是一个可选语法，你可以使用字符串而不是{{jsxref("function")}} ，在<code>delay</code>毫秒之后编译和执行字符串 (使用该语法是<strong>不推荐的,</strong> 原因和使用 {{jsxref("Global_Objects/eval", "eval()")}}一样，有安全风险)。</dd>
+ <dt><code>delay</code> {{optional_inline}}</dt>
+ <dd>延迟的毫秒数 (一秒等于1000毫秒)，函数的调用会在该延迟之后发生。如果省略该参数，delay取默认值0，意味着“马上”执行，或者尽快执行。不管是哪种情况，实际的延迟时间可能会比期待的(delay毫秒数) 值长，原因请查看{{anch("实际延时比设定值更久的原因：最小延迟时间")}}。</dd>
+ <dt><code>arg1, ..., argN</code> {{optional_inline}}</dt>
+ <dd>附加参数，一旦定时器到期，它们会作为参数传递给{{jsxref("function")}} </dd>
+</dl>
+
+<div class="note">
+<p><strong>备注</strong>：需要注意的是，IE9 及更早的 IE 浏览器不支持向回调函数传递额外参数(第一种语法)。如果你想要在IE中达到同样的功能,你必须使用一种兼容代码 (查看  {{anch("兼容旧环境（polyfill）")}} 一段).</p>
+</div>
+
+<h3 id="Examples" name="Examples">返回值</h3>
+
+<p>返回值<code>timeoutID</code>是一个正整数，表示定时器的编号。这个值可以传递给{{domxref("WindowOrWorkerGlobalScope.clearTimeout","clearTimeout()")}}来取消该定时器。</p>
+
+<p>需要注意的是<code>setTimeout()</code>和{{domxref("WindowOrWorkerGlobalScope.setInterval", "setInterval()")}}共用一个编号池，技术上，<code>clearTimeout()</code>和 {{domxref("WindowOrWorkerGlobalScope.clearInterval", "clearInterval()")}} 可以互换。但是，为了避免混淆，不要混用取消定时函数。</p>
+
+<p>在同一个对象上（一个window或者worker），<code>setTimeout()</code>或者<code>setInterval()</code>在后续的调用不会重用同一个定时器编号。但是不同的对象使用独立的编号池。</p>
+
+<h2 id="例子">例子</h2>
+
+<p>下文的例子在网页中设置了两个简单的按钮，以触发 <code>setTimeout()</code> 和 <code>clearTimeout()</code> 方法：按下第一个按钮会设置一个定时器，定时器在 2s 后显示一个警告对话框，并将此次 setTimeout 的定时器 ID 保存起来，按下第二个按钮可以取消定时器。</p>
+
+<h3 id="HTML" style="line-height: 24px; font-size: 1.71428571428571rem;">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;p&gt;Live Example&lt;/p&gt;
+&lt;button onclick="delayedAlert();"&gt;Show an alert box after two seconds&lt;/button&gt;
+&lt;p&gt;&lt;/p&gt;
+&lt;button onclick="clearAlert();"&gt;Cancel alert before it happens&lt;/button&gt;
+</pre>
+
+<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 0px; background: 0px 0px;"></div>
+
+<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 19px; background: 0px 0px;"></div>
+
+<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 38px; background: 0px 0px;"></div>
+
+<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 57px; background: 0px 0px;"></div>
+
+<h3 id="JavaScript" style="line-height: 24px; font-size: 1.71428571428571rem;">JavaScript</h3>
+
+<pre class="brush: js notranslate">var timeoutID;
+
+function delayedAlert() {
+  timeoutID = window.setTimeout(slowAlert, 2000);
+}
+
+function slowAlert() {
+  alert('That was really slow!');
+}
+
+function clearAlert() {
+  window.clearTimeout(timeoutID);
+}
+</pre>
+
+<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 0px; background: 0px 0px;"></div>
+
+<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 19px; background: 0px 0px;"></div>
+
+<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 38px; background: 0px 0px;"></div>
+
+<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 57px; background: 0px 0px;"></div>
+
+<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 76px; background: 0px 0px;"></div>
+
+<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 95px; background: 0px 0px;"></div>
+
+<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 114px; background: 0px 0px;"></div>
+
+<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 133px; background: 0px 0px;"></div>
+
+<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 152px; background: 0px 0px;"></div>
+
+<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 171px; background: 0px 0px;"></div>
+
+<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 190px; background: 0px 0px;"></div>
+
+<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 209px; background: 0px 0px;"></div>
+
+<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 228px; background: 0px 0px;"></div>
+
+<h3 id="结果展示">结果展示</h3>
+
+<p>{{EmbedLiveSample('例子')}}</p>
+
+<p>也可参考 <a href="/en-US/docs/DOM/window.clearTimeout#Example" title="en-US/docs/DOM/window.clearTimeout#Example"><code>clearTimeout()</code> </a>示例.</p>
+
+<h2 id="兼容旧环境（polyfill）">兼容旧环境（polyfill）</h2>
+
+<p>如果你需要向你的回调函数内传递一个或多个参数, 而且还需要兼容那些不支持传递额外参数(不管使用<code>setTimeout()</code> 或者 <code>setInterval()</code>)的浏览器时(比如，IE9及更早的版本), 你可以引入下面的兼容代码来支持向定时器函数传参。将以下代码添加到你代码的最上面：</p>
+
+<pre class="brush: js notranslate">/*\
+|*|
+|*|  Polyfill which enables the passage of arbitrary arguments to the
+|*|  callback functions of JavaScript timers (HTML5 standard syntax).
+|*|
+|*|  https://developer.mozilla.org/en-US/docs/DOM/window.setInterval
+|*|
+|*|  Syntax:
+|*|  var timeoutID = window.setTimeout(func, delay[, param1, param2, ...]);
+|*|  var timeoutID = window.setTimeout(code, delay);
+|*|  var intervalID = window.setInterval(func, delay[, param1, param2, ...]);
+|*|  var intervalID = window.setInterval(code, delay);
+|*|
+\*/
+
+(function() {
+  setTimeout(function(arg1) {
+    if (arg1 === 'test') {
+      // feature test is passed, no need for polyfill
+      return;
+    }
+    var __nativeST__ = window.setTimeout;
+    window.setTimeout = function(vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */ ) {
+      var aArgs = Array.prototype.slice.call(arguments, 2);
+      return __nativeST__(vCallback instanceof Function ? function() {
+        vCallback.apply(null, aArgs);
+      } : vCallback, nDelay);
+    };
+  }, 0, 'test');
+
+  var interval = setInterval(function(arg1) {
+    clearInterval(interval);
+    if (arg1 === 'test') {
+      // feature test is passed, no need for polyfill
+      return;
+    }
+    var __nativeSI__ = window.setInterval;
+    window.setInterval = function(vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */ ) {
+      var aArgs = Array.prototype.slice.call(arguments, 2);
+      return __nativeSI__(vCallback instanceof Function ? function() {
+        vCallback.apply(null, aArgs);
+      } : vCallback, nDelay);
+    };
+  }, 0, 'test');
+}())</pre>
+
+<h3 id="针对IE的解决方法">针对IE的解决方法</h3>
+
+<p>如果你需要单独的针对IE9及之前浏览器的 hack 写法，你可以使用 JavaScript 条件注释：</p>
+
+<pre class="brush: js notranslate">/*@cc_on
+  // conditional IE &lt; 9 only fix
+  @if (@_jscript_version &lt;= 9)
+  (function(f){
+     window.setTimeout = f(window.setTimeout);
+     window.setInterval = f(window.setInterval);
+  })(function(f){return function(c,t){var a=[].slice.call(arguments,2);return f(function(){c instanceof Function?c.apply(this,a):eval(c)},t)}});
+  @end
+@*/</pre>
+
+<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 0px; background: 0px 0px;"></div>
+
+<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 19px; background: 0px 0px;"></div>
+
+<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 38px; background: 0px 0px;"></div>
+
+<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 57px; background: 0px 0px;"></div>
+
+<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 76px; background: 0px 0px;"></div>
+
+<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 95px; background: 0px 0px;"></div>
+
+<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 114px; background: 0px 0px;"></div>
+
+<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 133px; background: 0px 0px;"></div>
+
+<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 152px; background: 0px 0px;"></div>
+
+<p>或者使用更加清晰的 IE HTML 条件注释：</p>
+
+<pre class="brush: html notranslate">&lt;!--[if lte IE 9]&gt;&lt;script&gt;
+(function(f){
+window.setTimeout=f(window.setTimeout);
+window.setInterval=f(window.setInterval);
+})(function(f){return function(c,t){
+var a=[].slice.call(arguments,2);return f(function(){c instanceof Function?c.apply(this,a):eval(c)},t)}
+});
+&lt;/script&gt;&lt;![endif]--&gt;
+
+
+</pre>
+
+<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 114px; background: 0px 0px;"></div>
+
+<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 133px; background: 0px 0px;"></div>
+
+<h3 id="变通方法">变通方法</h3>
+
+<p>另一种方法是使用匿名函数包裹你的回调函数，这种方式要消耗更多资源：</p>
+
+<pre class="brush: js notranslate">var intervalID = setTimeout(function() { myFunc('one', 'two', 'three'); }, 1000);
+</pre>
+
+<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 0px; background: 0px 0px;"></div>
+
+<p>上面那个例子也可以用<a href="/zh-CN/docs/Web/JavaScript/Reference/Functions/Arrow_functions">箭头函数</a>:</p>
+
+<pre class="brush: js notranslate">var intervalID = setTimeout(() =&gt; { myFunc('one', 'two', 'three'); }, 1000);
+</pre>
+
+<p>此外，也可使用 <a href="https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Function/bind" title="/en-US/docs/JavaScript/Reference/Global_Objects/Function/bind">function's bind</a>：</p>
+
+<pre class="brush: js notranslate">setTimeout(function(arg1){}.bind(undefined, 10), 1000);
+</pre>
+
+<h2 id="关于this的问题">关于"<code>this</code>"的问题</h2>
+
+<p>当你向 <code>setTimeout()</code> (或者其他函数)传递一个函数时,该函数中的<code>this</code>指向跟你的期望可能不同，这个问题在 <a href="/en-US/docs/JavaScript/Reference/Operators/this#Method_binding" title="en-US/docs/Core_JavaScript_1.5_Reference/Operators/Special_Operators/this_Operator#Method_binding">JavaScript reference</a> 中进行了详细解释.</p>
+
+<h3 id="解释">解释</h3>
+
+<p>由<code>setTimeout()</code>调用的代码运行在与所在函数完全分离的执行环境上。这会导致，这些代码中包含的 <code>this</code> 关键字在非严格模式会指向 <code>window</code> (或全局)对象，严格模式下为 undefined，这和所期望的<code>this</code>的值是不一样的。</p>
+
+<div class="note">
+<p>备注：即使是在严格模式下，<code>setTimeout()</code>的回调函数里面的<code>this</code>仍然默认指向<code>window</code>对象， 并不是<code>undefined</code>。</p>
+</div>
+
+<p>查看下面的例子:</p>
+
+<pre class="brush: js notranslate">let myArray = ["zero", "one", "two"];
+myArray.myMethod = function (sProperty) {
+    alert(arguments.length &gt; 0 ? this[sProperty] : this);
+};
+
+myArray.myMethod(); // prints "zero,one,two"
+myArray.myMethod(1); // prints "one"</pre>
+
+<p>上面这段代码正常工作，用<code>myArray</code>调用，在函数内，<code>this[sProperty]</code>等于 <code>myArray[sProperty]</code>。然后，下面这个例子：</p>
+
+<pre class="brush: js notranslate">setTimeout(myArray.myMethod, 1000); // prints "[object Window]" after 1 second
+setTimeout(myArray.myMethod, 1500, "1"); // prints "undefined" after 1.5 seconds</pre>
+
+<p><code>myArray.myMethod</code>函数传递给 <code>setTimeout</code>，到了定时时间，<code>this</code>没有指向，默认指向<code>window</code>对象。并且没有方法把 <code>thisArg</code> 传递给<code>setTimeout</code>，正如Array方法的<code>forEach</code>，<code>reduce</code>等。下面的例子表示使用<code>call</code>方法设置<code>this</code>也没用。</p>
+
+<pre class="brush: js notranslate">setTimeout.call(myArray, myArray.myMethod, 2000); // error: "NS_ERROR_XPC_BAD_OP_ON_WN_PROTO: Illegal operation on WrappedNative prototype object"
+setTimeout.call(myArray, myArray.myMethod, 2500, 2); // same error</pre>
+
+<h3 id="可能的解决方案">可能的解决方案</h3>
+
+<p>一个通用的方法是用包装函数来设置<code>this</code>：</p>
+
+<pre class="brush: js notranslate">setTimeout(function(){myArray.myMethod()}, 2000); // prints "zero,one,two" after 2 seconds
+setTimeout(function(){myArray.myMethod('1')}, 2500); // prints "one" after 2.5 seconds</pre>
+
+<p>箭头函数也可以：</p>
+
+<pre class="brush: js notranslate">setTimeout(() =&gt; {myArray.myMethod()}, 2000); // prints "zero,one,two" after 2 seconds
+setTimeout(() =&gt; {myArray.myMethod('1')}, 2500); // prints "one" after 2.5 seconds</pre>
+
+<p>另一个解决<code>this</code>问题的方法是使用两个非原生的 <code>setTimeout()</code> 和 <code>setInterval()</code> 全局函数代替原生的。该非原生的函数通过使用<a href="/en-US/docs/JavaScript/Reference/Global_Objects/Function/call" title="en-US/docs/JavaScript/Reference/Global_Objects/Function/call"><code>Function.prototype.call</code></a> 方法激活了正确的作用域。下面的代码显示了应该如何替换：</p>
+
+<pre class="brush: js notranslate">// Enable the passage of the 'this' object through the JavaScript timers
+
+var __nativeST__ = window.setTimeout, __nativeSI__ = window.setInterval;
+
+window.setTimeout = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) {
+  var oThis = this, aArgs = Array.prototype.slice.call(arguments, 2);
+  return __nativeST__(vCallback instanceof Function ? function () {
+    vCallback.apply(oThis, aArgs);
+  } : vCallback, nDelay);
+};
+
+window.setInterval = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) {
+  var oThis = this, aArgs = Array.prototype.slice.call(arguments, 2);
+  return __nativeSI__(vCallback instanceof Function ? function () {
+    vCallback.apply(oThis, aArgs);
+  } : vCallback, nDelay);
+};</pre>
+
+<div class="note"><strong>备注:</strong> 这两个替换也让 IE支持了符合 HTML5 标准的定时器函数。所以也能作为一个 polyfills。查看 <a href="#Callback_arguments">Callback arguments</a> 一段.</div>
+
+<p>新特性检测:</p>
+
+<pre class="brush: js notranslate">let myArray = ["zero", "one", "two"];
+myArray.myMethod = function (sProperty) {
+    alert(arguments.length &gt; 0 ? this[sProperty] : this);
+};
+
+setTimeout(alert, 1500, "Hello world!"); // the standard use of setTimeout and setInterval is preserved, but...
+setTimeout.call(myArray, myArray.myMethod, 2000); // prints "zero,one,two" after 2 seconds
+setTimeout.call(myArray, myArray.myMethod, 2500, 2); // prints "two" after 2,5 seconds
+</pre>
+
+<p>针对这个问题并没有原生的解决方案。</p>
+
+<div class="note"><strong>注：</strong>JavaScript 1.8.5 引入了 <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Function/bind" title="en-US/docs/JavaScript/Reference/Global Objects/Function/bind">Function.prototype.bind()</a></code> 方法，该方法允许显式地指定函数调用时 this 所指向的值 。该方法可以帮助你解决 this 指向不确定的问题。</div>
+
+<p>使用<code>bind()</code>的例子：</p>
+
+<pre class="brush: js notranslate">let myArray = ['zero', 'one', 'two'];
+myBoundMethod = (function (sProperty) {
+    console.log(arguments.length &gt; 0 ? this[sProperty] : this);
+}).bind(myArray);
+
+myBoundMethod(); // prints "zero,one,two" because 'this' is bound to myArray in the function
+myBoundMethod(1); // prints "one"
+setTimeout(myBoundMethod, 1000); // still prints "zero,one,two" after 1 second because of the binding
+setTimeout(myBoundMethod, 1500, "1"); // prints "one" after 1.5 seconds
+</pre>
+
+<h2 id="备注">备注</h2>
+
+<p>你可以使用 {{domxref("WindowOrWorkerGlobalScope.clearTimeout()","clearTimeout()")}}来取消定时器。</p>
+
+<p>如果你希望你的代码被重复的调用 (比如每 N 毫秒一次),考虑使用{{domxref("WindowOrWorkerGlobalScope.setInterval()","setInterval()")}}。</p>
+
+<h3 id="传递字符串字面量">传递字符串字面量</h3>
+
+<p>向<code>setTimeout()</code>传递一个字符串而不是函数会遭受到与使用<code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/eval#Don.27t_use_eval.21" title="https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/eval">eval</a></code>一样的风险.</p>
+
+<pre class="brush: js notranslate">// 推荐
+window.setTimeout(function() {
+    alert("Hello World!");
+}, 500);
+
+// 不推荐
+window.setTimeout("alert(\"Hello World!\");", 500);
+
+</pre>
+
+<p>字符串会在全局作用域内被解释执行，所以当<code>setTimeout()</code>函数执行完毕后，字符串中的变量不可用.</p>
+
+<h3 id="实际延时比设定值更久的原因：最小延迟时间">实际延时比设定值更久的原因：最小延迟时间</h3>
+
+<p>有很多因素会导致setTimeout的回调函数执行比设定的预期值更久，本节将讨论最常见的原因。</p>
+
+<h4 id="最小延时_>4ms">最小延时 &gt;=4ms</h4>
+
+<p>在浏览器中，<code>setTimeout()/</code>{{domxref("WindowOrworkerGlobalScope.setInterval","setInterval()")}} 的每调用一次定时器的最小间隔是4ms，这通常是由于函数嵌套导致（嵌套层级达到一定深度），或者是由于已经执行的setInterval的回调函数阻塞导致的。例如：</p>
+
+<pre class="brush: js notranslate" id="ct-0"><code>function cb() { f(); setTimeout(cb, 0); }
+setTimeout(cb, 0);</code></pre>
+
+<pre class="brush: js notranslate"><code>setInterval(f, 0);</code></pre>
+
+<p>在Chrome 和 Firefox中， 定时器的第5次调用被阻塞了；在Safari是在第6次；Edge是在第3次。Gecko 从这个版本 <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/56">version 56</a>开始对 <code>setInterval()</code> 开始采用这样的机制（<code>setTimeout()</code>已经实现，具体请参考以下内容)。</p>
+
+<p>一直以来，不同浏览器中出现这种最小延迟的情况有所不同（例如Firefox） - 从其他地方调用了setInterval( )，或者在嵌套函数调用setTimeout( ) 时（嵌套级别达到特定深度时），都会出现超时延迟。</p>
+
+<p>如果想在浏览器中实现0ms延时的定时器，你可以参考<a href="http://dbaron.org/log/20100309-faster-timeouts">这里</a>所说的{domxref("window.postMessage()")}}</p>
+
+<div class="note">
+<p><strong>Note</strong>: 最小延时, <code>DOM_MIN_TIMEOUT_VALUE</code>, 是4ms  (但在Firefox中通常是是存储在 <code>dom.min_timeout_value </code>这个变量中), <code>DOM_CLAMP_TIMEOUT_NESTING_LEVEL</code> 的第5层.</p>
+</div>
+
+<div class="note">
+<p><strong>Note</strong>: 4 ms 是在  <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/timers.html#timers">HTML5 spec </a> 中精确的，并且在2010年及以后的跨浏览器中保持了一致，这个数值比 {{geckoRelease("5.0")}}规定的嵌套函数的最小延时10ms更为精确。</p>
+</div>
+
+<h4 id="未被激活的tabs的定时最小延迟>1000ms">未被激活的tabs的定时最小延迟&gt;=1000ms</h4>
+
+<p>为了优化后台tab的加载损耗（以及降低耗电量），在未被激活的tab中定时器的最小延时限制为1S(1000ms)。</p>
+
+<p>Firefox 从version 5 (see {{bug(633421)}}开始采取这种机制，1000ms的间隔值可以通过 <code>dom.min_background_timeout_value</code> 改变。Chrome 从 version 11 (<a href="http://crbug.com/66078">crbug.com/66078</a>)开始采用。</p>
+
+<p>Android 版的Firefox对未被激活的后台tabs的使用了15min的最小延迟间隔时间 ，并且这些tabs也能完全不被加载。</p>
+
+<div class="note">
+<p>当 Web Audio API {{domxref("AudioContext")}} 正在被用来播放音频的时候，Firefox 50不会再限制后台tabs的加载。 后续的Firefox 51 版本修正了这个问题，即使在没有音频播放的情况下，也不再限制后台tabs的加载。这个解决了一些软件应用在后台tabs中播放基于文本的音频( note-based) 时，无法去同步音频和画面的问题。</p>
+</div>
+
+<h4 id="追踪型脚本的最小延时限制">追踪型脚本的最小延时限制</h4>
+
+<p>从Firefox 55版本开始，追踪型脚本（例如 谷歌分析，或者其他的一些被Firefox 的 <a href="https://wiki.mozilla.org/Security/Tracking_protection#Lists">TP lists</a> 识别为追踪型脚本的 外链URL脚本）是重点限制加载的对象。在当前正在使用的页面中，这个节流限制的延时依然是4ms。但是在后台tabs中，这个最小延时限制是10000ms（10s）,这个限制会在文档第一次加载后的30s后生效。</p>
+
+<p>控制这些行为的属性包含以下这些：</p>
+
+<ul>
+ <li><code>dom.min_tracking_timeout_value</code>: 4</li>
+ <li><code>dom.min_tracking_background_timeout_value</code>: 10000</li>
+ <li><code>dom.timeout.tracking_throttling_delay</code>: 30000</li>
+</ul>
+
+<h4 id="超时延迟">超时延迟</h4>
+
+<p>除了"最小延时"之外，定时器仍然有可能因为当前页面（或者操作系统/浏览器本身）被其他任务占用导致延时。 需要被强调是， 直到调用 <code>setTimeout()</code>的主线程执行完其他任务之后，回调函数和代码段才能被执行。例如：</p>
+
+<pre class="notranslate"><code>function foo() {
+  console.log('foo has been called');
+}
+setTimeout(foo, 0);
+console.log('After setTimeout');</code></pre>
+
+<p>会在控制台输出:</p>
+
+<pre class="notranslate"><code>After setTimeout
+foo has been called</code></pre>
+
+<p>出现这个结果的原因是，尽管<code>setTimeout</code> 以0ms的延迟来调用函数，但这个任务已经被放入了队列中并且等待下一次执行；并不是立即执行；队列中的等待函数被调用之前，当前代码必须全部运行完毕，因此这里运行结果并非预想的那样。</p>
+
+<h3 id="WebExtension_Background_pages和定时器">WebExtension Background pages和定时器</h3>
+
+<p>在 <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions">WebExtension</a> 中 background pages，timers工作不正常。这主要因为background pages实际上，并不是一次性全部加载：如果浏览器没有使用它，就不加载，如果需要就恢复。这对于WebExtension是透明的，但是有些事件(包括JS的timers)不会在不加载/恢复循环中执行，所以WebExtension中建议使用alarms。更详细的细节在<a href="https://developer.chrome.com/extensions/background_migration">合并到事件驱动后台脚本</a>。</p>
+
+<p>在本文写作的时候，只有Chrome展示了如上的特性 — Firefox没有未加载/恢复循环的行为，所以timers仍然可以工作。但是，仍然建议不要在WebExtension中使用timers:</p>
+
+<p>1.兼容Chorme。</p>
+
+<p>2.未来行为的改变会引起问题。</p>
+
+<h3 id="最大延时值">最大延时值</h3>
+
+<p>包括 IE,  Chrome, Safari, Firefox 在内的浏览器其内部以32位带符号整数存储延时。这就会导致如果一个延时(delay)大于 2147483647 毫秒 (大约24.8 天)时就会溢出，导致定时器将会被立即执行。</p>
+
+<h2 id="规范">规范</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'webappapis.html#dom-settimeout', 'WindowOrWorkerGlobalScope.setTimeout()')}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td>Method moved to the <code>WindowOrWorkerGlobalScope</code> mixin in the latest spec.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML WHATWG", "webappapis.html#dom-settimeout", "WindowTimers.setTimeout()")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td>Initial definition (DOM Level 0)</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+<div id="compat-desktop">
+<div class="hidden">
+<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<p>{{Compat("api.WindowOrWorkerGlobalScope.setTimeout")}}</p>
+</div>
+
+<h2 id="See_also" name="See_also" style="margin-bottom: 20px; line-height: 30px; font-size: 2.14285714285714rem;">相关链接：</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/JavaScript/Timers" title="/en-US/docs/JavaScript/Timers">JavaScript timers</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/JavaScript_code_modules/Timer.jsm" title="/en-US/docs/Mozilla/JavaScript_code_modules/Timer.jsm">Timer.jsm</a></li>
+ <li>{{domxref("WindowOrWorkerGlobalScope.clearTimeout")}}</li>
+ <li>{{domxref("WindowTimers.setInterval")}}</li>
+ <li>{{domxref("window.requestAnimationFrame")}}</li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/JavaScript/Timers/Daemons" title="/en-US/docs/JavaScript/Timers/Daemons"><em>Daemons</em> management</a></li>
+</ul>
diff --git a/files/zh-cn/web/api/subtlecrypto/index.html b/files/zh-cn/web/api/subtlecrypto/index.html
index 24dec9a283..c173e906e8 100644
--- a/files/zh-cn/web/api/subtlecrypto/index.html
+++ b/files/zh-cn/web/api/subtlecrypto/index.html
@@ -28,8 +28,8 @@ translation_of: Web/API/SubtleCrypto
 <p>这些函数你可以用来实现系统中的隐私和身份验证等安全功能。<strong>SubtleCrypto </strong>API提供了如下加密函数：</p>
 
 <p>* <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/SubtleCrypto/sign">sign()</a></code> 、 <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/SubtleCrypto/verify">verify()</a></code>: 创建和验证数字签名。<br>
- * <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/SubtleCrypto/encrypt">encrypt()</a></code> and <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/SubtleCrypto/decrypt">decrypt()</a></code>: 加密和解密数据。<br>
- * <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/SubtleCrypto/digest">digest()</a></code>: create a fixed-length, collision-resistant digest of some data.</p>
+ * <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/SubtleCrypto/encrypt">encrypt()</a></code> 和 <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/SubtleCrypto/decrypt">decrypt()</a></code>: 加密和解密数据。<br>
+ * <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/SubtleCrypto/digest">digest()</a></code>：为数据生成一个定长的，防碰撞的消息摘要。</p>
 
 <h3 id="密钥管理功能">密钥管理功能</h3>
 
@@ -232,9 +232,9 @@ translation_of: Web/API/SubtleCrypto
 
 <dl>
  <dt>{{domxref("SubtleCrypto.encrypt()")}}</dt>
- <dd><code>以算法、密钥、</code>明文<code>为参数，返回一个包含加密数据的 </code>{{jsxref("Promise")}}对象。</dd>
+ <dd>以算法、密钥、明文为参数，返回一个包含加密数据的 {{jsxref("Promise")}} 对象。</dd>
  <dt>{{domxref("SubtleCrypto.decrypt()")}}</dt>
- <dd><code>以算法、密钥、</code>明文<code>为参数，返回一个包含解密数据的 </code>{{jsxref("Promise")}}对象。</dd>
+ <dd>以算法、密钥、密文为参数，返回一个包含解密数据的 {{jsxref("Promise")}} 对象。</dd>
  <dt>{{domxref("SubtleCrypto.sign()")}}</dt>
  <dd>以文本、算法和密码为参数，返回一个包含签名的 {{jsxref("Promise")}}。</dd>
  <dt>{{domxref("SubtleCrypto.verify()")}}</dt>
diff --git a/files/zh-cn/web/api/uievent/pagex/index.html b/files/zh-cn/web/api/uievent/pagex/index.html
deleted file mode 100644
index b4a7f812f7..0000000000
--- a/files/zh-cn/web/api/uievent/pagex/index.html
+++ /dev/null
@@ -1,105 +0,0 @@
----
-title: UIEvent.pageX
-slug: Web/API/UIEvent/pageX
-translation_of: Web/API/UIEvent/pageX
----
-<p>{{APIRef("DOM Events")}} {{Non-standard_header}}</p>
-
-<p><code><strong>UIEvent.pageX</strong></code> 是只读属性，它返回相对于整个文档的水平坐标。</p>
-
-<h2 id="Syntax" name="Syntax">语法</h2>
-
-<pre class="syntaxbox">var <em>pos</em> = <em>event</em>.pageX</pre>
-
-<h2 id="Syntax" name="Syntax">示例</h2>
-
-<pre><em>var pageX</em> = <em>event</em>.pageX;</pre>
-
-<p><code><em>pageX</em></code>  是鼠标事件触发时，鼠标指针相对于整个文档 X 坐标上像素点的整数值。这一属性同时也参照了页面的水平滚动距离。</p>
-
-<pre class="brush: js">&lt;html&gt;
-&lt;head&gt;
-&lt;title&gt;pageX\pageY &amp; layerX\layerY example&lt;/title&gt;
-
-&lt;script type="text/javascript"&gt;
-
-function showCoords(evt){
-  var form = document.forms.form_coords;
-  var parent_id = evt.target.parentNode.id;
-  form.parentId.value = parent_id;
-  form.pageXCoords.value = evt.pageX;
-  form.pageYCoords.value = evt.pageY;
-  form.layerXCoords.value = evt.layerX;
-  form.layerYCoords.value = evt.layerY;
-}
-
-&lt;/script&gt;
-
-&lt;style type="text/css"&gt;
-
- #d1 {
-  border: solid blue 1px;
-  padding: 20px;
- }
-
- #d2 {
-  position: absolute;
-  top: 180px;
-  left: 80%;
-  right:auto;
-  width: 40%;
-  border: solid blue 1px;
-  padding: 20px;
- }
-
- #d3 {
-  position: absolute;
-  top: 240px;
-  left: 20%;
-  width: 50%;
-  border: solid blue 1px;
-  padding: 10px;
- }
-
-&lt;/style&gt;
-&lt;/head&gt;
-
-&lt;body onmousedown="showCoords(event)"&gt;
-
-&lt;p&gt;To display the mouse coordinates please click anywhere on the page.&lt;/p&gt;
-
-&lt;div id="d1"&gt;
-&lt;span&gt;This is an un-positioned div so clicking it will return
-layerX/layerY values almost the same as pageX/PageY values.&lt;/span&gt;
-&lt;/div&gt;
-
-&lt;div id="d2"&gt;
-&lt;span&gt;This is a positioned div so clicking it will return layerX/layerY
-values that are relative to the top-left corner of this positioned
-element. Note the pageX\pageY properties still return the
-absolute position in the document, including page scrolling.&lt;/span&gt;
-
-&lt;span&gt;Make the page scroll more! This is a positioned div so clicking it
-will return layerX/layerY values that are relative to the top-left
-corner of this positioned element. Note the pageX\pageY properties still
-return the absolute position in the document, including page
-scrolling.&lt;/span&gt;
-&lt;/div&gt;
-
-&lt;div id="d3"&gt;
-&lt;form name="form_coords"&gt;
- Parent Element id: &lt;input type="text" name="parentId" size="7" /&gt;&lt;br /&gt;
- pageX:&lt;input type="text" name="pageXCoords" size="7" /&gt;
- pageY:&lt;input type="text" name="pageYCoords" size="7" /&gt;&lt;br /&gt;
- layerX:&lt;input type="text" name="layerXCoords" size="7" /&gt;
- layerY:&lt;input type="text" name="layerYCoords" size="7" /&gt;
-&lt;/form&gt;
-&lt;/div&gt;
-
-&lt;/body&gt;
-&lt;/html&gt;
-</pre>
-
-<h2 id="Specification" name="Specification">规范</h2>
-
-<p>这一属性不在规范中。</p>
diff --git a/files/zh-cn/web/api/uievent/pagey/index.html b/files/zh-cn/web/api/uievent/pagey/index.html
deleted file mode 100644
index 6c504d3f52..0000000000
--- a/files/zh-cn/web/api/uievent/pagey/index.html
+++ /dev/null
@@ -1,89 +0,0 @@
----
-title: event.pageY
-slug: Web/API/UIEvent/pageY
-translation_of: Web/API/UIEvent/pageY
----
-<p>{{ ApiRef() }}</p>
-<h3 id="Summary" name="Summary">概述</h3>
-<p>返回事件发生时相对于整个文档的纵坐标.</p>
-<h3 id="Syntax" name="Syntax">语法</h3>
-<pre class="eval"><em>var pageY</em> = <em>event</em>.pageY;
-</pre>
-<p><code>pageY</code> 是事件发生时鼠标指针所在位置相对于整个文档的纵坐标,单位为像素.该属性会考虑到页面滚动条的高度.</p>
-<h3 id="Example" name="Example">例子</h3>
-<pre>&lt;html&gt;
-&lt;head&gt;
-&lt;title&gt;pageX\pageY &amp; layerX\layerY example&lt;/title&gt;
-
-&lt;script type="text/javascript"&gt;
-
-function showCoords(evt){
-  var form = document.forms.form_coords;
-  var parent_id = evt.target.parentNode.id;
-  form.parentId.value = parent_id;
-  form.pageXCoords.value = evt.pageX;
-  form.pageYCoords.value = evt.pageY;
-  form.layerXCoords.value = evt.layerX;
-  form.layerYCoords.value = evt.layerY;
-}
-
-&lt;/script&gt;
-
-&lt;style type="text/css"&gt;
-
- #d1 {
-  border: solid blue 1px;
-  padding: 20px;
- }
-
- #d2 {
-  position: absolute;
-  top: 180px;
-  left: 80%;
-  right:auto;
-  width: 40%;
-  border: solid blue 1px;
-  padding: 20px;
- }
-
- #d3 {
-  position: absolute;
-  top: 240px;
-  left: 20%;
-  width: 50%;
-  border: solid blue 1px;
-  padding: 10px;
- }
-
-&lt;/style&gt;
-&lt;/head&gt;
-
-&lt;body onmousedown="showCoords(event)"&gt;
-
-&lt;p&gt;要显示鼠标所在位置的坐标,请点击页面上的任意地方.&lt;/p&gt;
-
-&lt;div id="d1"&gt;
-&lt;span&gt;这是一个未定位的div(没有指定css position属性),所以点击它返回的layerX/layerY值几乎和pageX/PageY值完全相同.&lt;/span&gt;
-&lt;/div&gt;
-
-&lt;div id="d2"&gt;
-&lt;span&gt;<span id="result_box" lang="zh-CN"><span>这是一个</span><span>已定位的div</span><span>,因此</span><span>点击它</span><span>时返回</span><span>的layerX</span><span>/</span><span class="hps">layerY的值是相对于自己左上角(</span></span>top-left<span id="result_box" lang="zh-CN"><span class="hps">)位置的坐标值.</span>
-<span>然而</span><span>pageX</span><span>/</span><span class="hps">pageY</span><span>属性</span><span>仍</span><span>返回该div在</span><span>文档中</span><span>的</span><span>绝对位置</span><span>,</span><span>包括页面</span><span>滚动</span></span>高度.&lt;/span&gt;
-&lt;/div&gt;
-
-&lt;div id="d3"&gt;
-&lt;form name="form_coords"&gt;
- 父元素id: &lt;input type="text" name="parentId" size="7" /&gt;&lt;br /&gt;
- pageX:&lt;input type="text" name="pageXCoords" size="7" /&gt;
- pageY:&lt;input type="text" name="pageYCoords" size="7" /&gt;&lt;br /&gt;
- layerX:&lt;input type="text" name="layerXCoords" size="7" /&gt;
- layerY:&lt;input type="text" name="layerYCoords" size="7" /&gt;
-&lt;/form&gt;
-&lt;/div&gt;
-
-&lt;/body&gt;
-&lt;/html&gt;
-</pre>
-<h3 id="Specification" name="Specification">规范</h3>
-<p>不属于任何公开的标准.</p>
-<p>{{ languages( {"pl": "pl/DOM/event.pageY","en": "en/DOM/event.pageY" } ) }}</p>
diff --git a/files/zh-cn/web/api/web_audio_api/index.html b/files/zh-cn/web/api/web_audio_api/index.html
index f4f25afdfa..75edbde9bf 100644
--- a/files/zh-cn/web/api/web_audio_api/index.html
+++ b/files/zh-cn/web/api/web_audio_api/index.html
@@ -443,7 +443,7 @@ function voiceMute() { // toggle to mute and unmute sound
  <li><a href="https://github.com/goldfire/howler.js/">howler.js</a>: a JS audio library that defaults to <a href="https://dvcs.w3.org/hg/audio/raw-file/tip/webaudio/specification.html">Web Audio API</a> and falls back to <a href="http://www.whatwg.org/specs/web-apps/current-work/#the-audio-element">HTML5 Audio</a>, as well as providing other useful features.</li>
 </ul>
 
-<section id="Quick_Links">
+<section id="Quick_links">
 <h3 id="Quicklinks">Quicklinks</h3>
 
 <ol>
diff --git a/files/zh-cn/web/api/webrtc_api/connectivity/index.html b/files/zh-cn/web/api/webrtc_api/connectivity/index.html
index 647cce7449..7a9950be14 100644
--- a/files/zh-cn/web/api/webrtc_api/connectivity/index.html
+++ b/files/zh-cn/web/api/webrtc_api/connectivity/index.html
@@ -41,33 +41,33 @@ translation_of: Web/API/WebRTC_API/Connectivity
 <ol>
  <li>呼叫者通过 {{domxref("navigator.mediaDevices.getUserMedia()")}} 捕捉本地媒体。</li>
  <li>呼叫者创建一个<code>RTCPeerConnection</code> 并调用 {{domxref("RTCPeerConnection.addTrack()")}} (注： <code>addStream</code> 已经过时。)</li>
- <li>呼叫者调用 ("RTCPeerConnection.createOffer()")来创建一个提议(offer).</li>
- <li>呼叫者调用 ("RTCPeerConnection.setLocalDescription()") 将提议(Offer)<em>   </em>设置为本地描述 (即，连接的本地描述).</li>
+ <li>呼叫者调用 {{domxref("RTCPeerConnection.createOffer()")}} 来创建一个提议(offer).</li>
+ <li>呼叫者调用 {{domxref("RTCPeerConnection.setLocalDescription()")}} 将提议(Offer)<em>   </em>设置为本地描述 (即，连接的本地描述).</li>
  <li>setLocalDescription()之后, 呼叫者请求 STUN 服务创建ice候选(ice candidates)</li>
  <li>呼叫者通过信令服务器将提议(offer)传递至 本次呼叫的预期的接受者.</li>
- <li>接受者收到了提议(offer) 并调用 ("RTCPeerConnection.setRemoteDescription()") 将其记录为远程描述 (也就是连接的另一端的描述).</li>
+ <li>接受者收到了提议(offer) 并调用 {{domxref("RTCPeerConnection.setRemoteDescription()")}} 将其记录为远程描述 (也就是连接的另一端的描述).</li>
  <li>接受者做一些可能需要的步骤结束本次呼叫：捕获本地媒体，然后通过{{domxref("RTCPeerConnection.addTrack()")}}添加到连接中。</li>
- <li>接受者通过("RTCPeerConnection.createAnswer()")创建一个应答。</li>
- <li>接受者调用 ("RTCPeerConnection.setLocalDescription()") 将应答(answer)<em>   </em>设置为本地描述. 此时，接受者已经获知连接双方的配置了.</li>
+ <li>接受者通过 {{domxref("RTCPeerConnection.createAnswer()")}} 创建一个应答。</li>
+ <li>接受者调用 {{domxref("RTCPeerConnection.setLocalDescription()")}} 将应答(answer)<em>   </em>设置为本地描述. 此时，接受者已经获知连接双方的配置了.</li>
  <li>接受者通过信令服务器将应答传递到呼叫者.</li>
  <li>呼叫者接受到应答.</li>
- <li>呼叫者调用 ("RTCPeerConnection.setRemoteDescription()") 将应答设定为远程描述. 如此，呼叫者已经获知连接双方的配置了.</li>
+ <li>呼叫者调用 {{domxref("RTCPeerConnection.setRemoteDescription()")}} 将应答设定为远程描述. 如此，呼叫者已经获知连接双方的配置了.</li>
 </ol>
 
 <h3 id="待定的和当前描述"><strong>待定的和当前描述</strong></h3>
 
 <p>进一步了解该过程，我们发现localDescription和remoteDescription(返回这两个描述的属性 )并不像外观那样简单。 因为在重新协商期间，提议可能会被拒绝，因为它提出了不兼容的格式，每个端点都有能力提出一种新的格式，但是实际上不会切换到另一个对等体，直到它被其他对等体接受为止。 因此，WebRTC使用待定和当前的描述。</p>
 
-<p><strong>当前描述</strong>(由 ("RTCPeerConnection.currentLocalDescription") 和 ("RTCPeerConnection.currentRemoteDescription") 属性返回 )表示连接实际使用的描述。 这是双方已经完全同意使用的最新连接。</p>
+<p><strong>当前描述</strong>(由 {{domxref("RTCPeerConnection.currentLocalDescription")}} 和 {{domxref("RTCPeerConnection.currentRemoteDescription")}} 属性返回 )表示连接实际使用的描述。 这是双方已经完全同意使用的最新连接。</p>
 
-<p><strong>待定的描述</strong>(由 ("RTCPeerConnection.pendingLocalDescription" ) 和 ("RTCPeerConnection.pendingRemoteDescription") 返回 )表示当 分别调用setLocalDescription( )或setRemoteDescription( )。</p>
+<p><strong>待定的描述</strong>(由 {{domxref("RTCPeerConnection.pendingLocalDescription")}} 和 {{domxref("RTCPeerConnection.pendingRemoteDescription")}} 返回 )表示当 分别调用setLocalDescription( )或setRemoteDescription( )。</p>
 
-<p>当读取描述( ("RTCPeerConnection.localDescription" ) 和 ("RTCPeerConnection.remoteDescription" )  )返回时，返回的值是pendingLocalDescription / pendingRemoteDescription的值，如果有待处理的描述( 也就是说，待处理描述不为null ); 否则，返回当前描述(currentLocalDescription / currentRemoteDescription )。</p>
+<p>当读取描述( {{domxref("RTCPeerConnection.localDescription")}} 和 {{domxref("RTCPeerConnection.remoteDescription")}} )返回时，返回的值是pendingLocalDescription / pendingRemoteDescription的值，如果有待处理的描述( 也就是说，待处理描述不为null ); 否则，返回当前描述(currentLocalDescription / currentRemoteDescription )。</p>
 
 <p>通过调用setLocalDescription( )或setRemoteDescription( )更改描述时，将指定的描述设置为待定描述，WebRTC层开始评估是否可以接受。 一旦建议的描述已经达成一致，currentLocalDescription或currentRemoteDescription的值将更改为待处理描述，并且待处理的描述再次设置为null，表示没有待处理的描述。</p>
 
 <div class="note">
-<p>pendingLocalDescription不仅包含正在考虑的提议或答案，而且自从提议或应答以来已经收集到的任何本地ICE候选人都被创建。 类似地，pendingRemoteDescription包括通过调用 ("RTCPeerConnection.addIceCandidate( )" ) 提供的任何远程ICE候选。</p>
+<p>pendingLocalDescription不仅包含正在考虑的提议或答案，而且自从提议或应答以来已经收集到的任何本地ICE候选人都被创建。 类似地，pendingRemoteDescription包括通过调用 {{domxref("RTCPeerConnection.addIceCandidate()")}} 提供的任何远程ICE候选。</p>
 </div>
 
 <p>有关这些属性和方法的更多细节，请参阅各个文章。</p>
diff --git a/files/zh-cn/web/api/windoworworkerglobalscope/atob/index.html b/files/zh-cn/web/api/windoworworkerglobalscope/atob/index.html
deleted file mode 100644
index f664a3908e..0000000000
--- a/files/zh-cn/web/api/windoworworkerglobalscope/atob/index.html
+++ /dev/null
@@ -1,75 +0,0 @@
----
-title: WindowOrWorkerGlobalScope.atob()
-slug: Web/API/WindowOrWorkerGlobalScope/atob
-tags:
-  - API
-  - Base64
-  - DOM
-  - WindowOrWorkerGlobalScope
-  - atob
-  - 参考
-  - 方法
-translation_of: Web/API/WindowOrWorkerGlobalScope/atob
-original_slug: Web/API/WindowBase64/atob
----
-<p>{{APIRef("HTML DOM")}}</p>
-
-<p><strong><code>WindowOrWorkerGlobalScope.atob()</code></strong> 对经过 base-64 编码的字符串进行解码。你可以使用 {{domxref("WindowBase64.btoa","window.btoa()")}} 方法来编码一个可能在传输过程中出现问题的数据，并且在接受数据之后，使用 atob() 方法再将数据解码。例如：你可以编码、传输和解码操作各种字符，比如 0-31 的 ASCII 码值。</p>
-
-<p>关于针对 Unicode 或者 UTF-8 的应用方面，请查看 <a href="/en-US/docs/Web/JavaScript/Base64_encoding_and_decoding#The_.22Unicode_Problem.22">this note at Base64 encoding and decoding</a> 和 <a href="/en-US/docs/Web/API/window.btoa#Unicode_Strings"><code>btoa()</code> 的备注</a>。</p>
-
-<h2 id="语法">语法</h2>
-
-<pre class="syntaxbox">var decodedData = scope.atob(<em>encodedData</em>);</pre>
-
-<h3 id="异常">异常</h3>
-
-<p>如果传入字符串不是有效的 base64 字符串，比如其长度不是 4 的倍数，则抛出{{jsxref("DOMException")}}。</p>
-
-<h2 id="示例">示例</h2>
-
-<pre class="brush:js">let encodedData = window.btoa("Hello, world"); // 编码
-let decodedData = window.atob(encodedData);    // 解码
-</pre>
-
-<h2 id="Specification" name="Specification">规范</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Specification</th>
-   <th scope="col">Status</th>
-   <th scope="col">Comment</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', '#dom-windowbase64-atob', 'WindowBase64.atob()')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td>No change since the latest snapshot, {{SpecName("HTML5.1")}}.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5.1', '#dom-windowbase64-atob', 'WindowBase64.atob()')}}</td>
-   <td>{{Spec2('HTML5.1')}}</td>
-   <td>Snapshot of {{SpecName("HTML WHATWG")}}. No change.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName("HTML5 W3C", "#dom-windowbase64-atob", "WindowBase64.atob()")}}</td>
-   <td>{{Spec2('HTML5 W3C')}}</td>
-   <td>Snapshot of {{SpecName("HTML WHATWG")}}. Creation of <code>WindowBase64</code> (properties were on the target before it).</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_Compatibility" name="Browser_Compatibility">浏览器兼容性</h2>
-
-<p>{{Compat("api.WindowOrWorkerGlobalScope.atob")}}</p>
-
-<h2 id="See_also" name="See_also">参见</h2>
-
-<ul>
- <li><a href="/Web/API/WindowBase64/Base64_encoding_and_decoding">Base64 encoding and decoding</a></li>
- <li><a href="/en-US/docs/data_URIs"><code>data</code> URIs</a></li>
- <li>{{domxref("WindowOrWorkerGlobalScope.btoa","window.btoa()")}}</li>
- <li><a href="/en-US/docs/Components.utils.importGlobalProperties">Components.utils.importGlobalProperties</a></li>
-</ul>
diff --git a/files/zh-cn/web/api/windoworworkerglobalscope/btoa/index.html b/files/zh-cn/web/api/windoworworkerglobalscope/btoa/index.html
deleted file mode 100644
index 83873fc559..0000000000
--- a/files/zh-cn/web/api/windoworworkerglobalscope/btoa/index.html
+++ /dev/null
@@ -1,172 +0,0 @@
----
-title: WindowOrWorkerGlobalScope.btoa()
-slug: Web/API/WindowOrWorkerGlobalScope/btoa
-tags:
-  - API
-  - Base64
-  - Web
-  - WindowOrWorkerGlobalScope
-  - 参考
-  - 字符串
-  - 数据
-  - 方法
-translation_of: Web/API/WindowOrWorkerGlobalScope/btoa
-original_slug: Web/API/WindowBase64/btoa
----
-<p>{{APIRef("HTML DOM")}}</p>
-
-<p><strong><code>WindowOrWorkerGlobalScope.btoa()</code> </strong> 从 {{jsxref("String")}} 对象中创建一个 base-64 编码的 ASCII 字符串，其中字符串中的每个字符都被视为一个二进制数据字节。</p>
-
-<div class="note">
-<p><strong>Note</strong>: 由于这个函数将每个字符视为二进制数据的字节，而不管实际组成字符的字节数是多少，所以如果任何字符的{{Glossary("code point", "码位")}}超出 <code>0x00</code> ~ <code>0xFF</code> 这个范围，则会引发 <code>InvalidCharacterError</code> 异常。请参阅 {{anch("Unicode_字符串")}} ，该示例演示如何编码含有码位超出 <code>0x00</code> ~ <code>0xFF</code> 范围的字符的字符串。</p>
-</div>
-
-<h2 id="语法">语法</h2>
-
-<pre class="syntaxbox">let encodedData = window.btoa(<var>stringToEncode</var>);
-</pre>
-
-<h3 id="参数">参数</h3>
-
-<dl>
- <dt><code>stringToEncode</code></dt>
- <dd>一个字符串, 其字符分别表示要编码为 ASCII 的二进制数据的单个字节。</dd>
-</dl>
-
-<h3 id="返回值">返回值</h3>
-
-<p>一个包含 <code>stringToEncode</code> 的 Base64 表示的字符串。</p>
-
-<h2 id="示例">示例</h2>
-
-<pre class="brush: js">let encodedData = window.btoa("Hello, world"); // 编码
-let decodedData = window.atob(encodedData);    // 解码
-</pre>
-
-<h2 id="备注">备注</h2>
-
-<p>你可以使用此方法对可能导致通信问题的数据进行编码，传输，然后使用 <code>{{domxref("WindowOrWorkerGlobalScope.atob","atob()")}}</code> 方法再次解码数据。例如，可以编码控制字符，包括 ASCII 值为 0 到 31 的字符。</p>
-
-<p>在用 JavaScript 编写 XPCOM 组件时，<code>btoa()</code> 方法也是可用的，虽然全局对象已经不是 {{domxref("Window")}} 了。</p>
-
-<h2 id="Unicode_字符串">Unicode 字符串</h2>
-
-<p>在多数浏览器中，使用 <code>btoa()</code> 对 Unicode 字符串进行编码都会触发 <code>InvalidCharacterError</code> 异常。</p>
-
-<p>一种选择是转义任何扩展字符，以便实际编码的字符串是原始字符的 ASCII 表示形式。考虑这个例子，代码来自 <a href="http://ecmanaut.blogspot.com/2006/07/encoding-decoding-utf8-in-javascript.html">Johan Sundström</a>：</p>
-
-<pre class="brush: js" id="txt">// ucs-2 string to base64 encoded ascii
-function utoa(str) {
-    return window.btoa(unescape(encodeURIComponent(str)));
-}
-// base64 encoded ascii to ucs-2 string
-function atou(str) {
-    return decodeURIComponent(escape(window.atob(str)));
-}
-// Usage:
-utoa('✓ à la mode'); // 4pyTIMOgIGxhIG1vZGU=
-atou('4pyTIMOgIGxhIG1vZGU='); // "✓ à la mode"
-
-utoa('I \u2661 Unicode!'); // SSDimaEgVW5pY29kZSE=
-atou('SSDimaEgVW5pY29kZSE='); // "I ♡ Unicode!"
-</pre>
-
-<p dir="ltr" id="tw-target-text">更好、更可靠、性能更优异的解决方案是使用类型化数组进行转换。</p>
-
-<h2 id="规范">规范</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">规范</th>
-   <th scope="col">状态</th>
-   <th scope="col">备注</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', '#dom-btoa', 'WindowOrWorkerGlobalScope.btoa()')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td>Method moved to the <code>WindowOrWorkerGlobalScope</code> mixin in the latest spec.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5.1', '#dom-windowbase64-btoa', 'WindowBase64.btoa()')}}</td>
-   <td>{{Spec2('HTML5.1')}}</td>
-   <td>Snapshot of {{SpecName("HTML WHATWG")}}. No change.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName("HTML5 W3C", "#dom-windowbase64-btoa", "WindowBase64.btoa()")}}</td>
-   <td>{{Spec2('HTML5 W3C')}}</td>
-   <td>Snapshot of {{SpecName("HTML WHATWG")}}. Creation of <code>WindowBase64</code> (properties where on the target before it).</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Polyfill">Polyfill</h2>
-
-<pre class="brush: js">// Polyfill from  <a href="https://github.com/MaxArt2501/base64-js/blob/master/base64.js">https://github.com/MaxArt2501/base64-js/blob/master/base64.js
-</a>(function() {
-    // base64 character set, plus padding character (=)
-    var b64 = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=",
-
-        // Regular expression to check formal correctness of base64 encoded strings
-        b64re = /^(?:[A-Za-z\d+\/]{4})*?(?:[A-Za-z\d+\/]{2}(?:==)?|[A-Za-z\d+\/]{3}=?)?$/;
-
-    window.btoa = window.btoa || function(string) {
-        string = String(string);
-        var bitmap, a, b, c,
-            result = "",
-            i = 0,
-            rest = string.length % 3; // To determine the final padding
-
-        for (; i &lt; string.length;) {
-            if ((a = string.charCodeAt(i++)) &gt; 255 ||
-                (b = string.charCodeAt(i++)) &gt; 255 ||
-                (c = string.charCodeAt(i++)) &gt; 255)
-                throw new TypeError("Failed to execute 'btoa' on 'Window': The string to be encoded contains characters outside of the Latin1 range.");
-
-            bitmap = (a &lt;&lt; 16) | (b &lt;&lt; 8) | c;
-            result += b64.charAt(bitmap &gt;&gt; 18 &amp; 63) + b64.charAt(bitmap &gt;&gt; 12 &amp; 63) +
-                b64.charAt(bitmap &gt;&gt; 6 &amp; 63) + b64.charAt(bitmap &amp; 63);
-        }
-
-        // If there's need of padding, replace the last 'A's with equal signs
-        return rest ? result.slice(0, rest - 3) + "===".substring(rest) : result;
-    };
-
-    window.atob = window.atob || function(string) {
-        // atob can work with strings with whitespaces, even inside the encoded part,
-        // but only \t, \n, \f, \r and ' ', which can be stripped.
-        string = String(string).replace(/[\t\n\f\r ]+/g, "");
-        if (!b64re.test(string))
-            throw new TypeError("Failed to execute 'atob' on 'Window': The string to be decoded is not correctly encoded.");
-
-        // Adding the padding if missing, for semplicity
-        string += "==".slice(2 - (string.length &amp; 3));
-        var bitmap, result = "",
-            r1, r2, i = 0;
-        for (; i &lt; string.length;) {
-            bitmap = b64.indexOf(string.charAt(i++)) &lt;&lt; 18 | b64.indexOf(string.charAt(i++)) &lt;&lt; 12 |
-                (r1 = b64.indexOf(string.charAt(i++))) &lt;&lt; 6 | (r2 = b64.indexOf(string.charAt(i++)));
-
-            result += r1 === 64 ? String.fromCharCode(bitmap &gt;&gt; 16 &amp; 255) :
-                r2 === 64 ? String.fromCharCode(bitmap &gt;&gt; 16 &amp; 255, bitmap &gt;&gt; 8 &amp; 255) :
-                String.fromCharCode(bitmap &gt;&gt; 16 &amp; 255, bitmap &gt;&gt; 8 &amp; 255, bitmap &amp; 255);
-        }
-        return result;
-    };
-})()
-</pre>
-
-<h2 id="浏览器兼容性">浏览器兼容性</h2>
-
-<p>{{Compat("api.WindowOrWorkerGlobalScope.btoa")}}</p>
-
-<h2 id="参见">参见</h2>
-
-<ul>
- <li>{{domxref("WindowBase64/Base64_encoding_and_decoding", "Base64 encoding and decoding")}}</li>
- <li><a href="/zh-CN/docs/data_URIs"><code>data</code> URI</a></li>
- <li>{{domxref("WindowOrWorkerGlobalScope.atob","atob()")}}</li>
- <li><a href="/zh-CN/docs/Components.utils.importGlobalProperties">Components.utils.importGlobalProperties</a></li>
-</ul>
diff --git a/files/zh-cn/web/api/windoworworkerglobalscope/caches/index.html b/files/zh-cn/web/api/windoworworkerglobalscope/caches/index.html
deleted file mode 100644
index 8debcc3322..0000000000
--- a/files/zh-cn/web/api/windoworworkerglobalscope/caches/index.html
+++ /dev/null
@@ -1,127 +0,0 @@
----
-title: WindowOrWorkerGlobalScope.caches
-slug: Web/API/WindowOrWorkerGlobalScope/caches
-translation_of: Web/API/WindowOrWorkerGlobalScope/caches
----
-<p>{{APIRef()}}{{SeeCompatTable}}</p>
-
-<p><code><strong>caches</strong></code> 是{{domxref("WindowOrWorkerGlobalScope")}}接口的一个只读属性，它返回了与当前上下文紧密相关的{{domxref("CacheStorage")}}对象。此对象激活了诸如存储用于离线使用的资产，并生成对请求生成自定义响应等功能。</p>
-
-<h2 id="语法">语法</h2>
-
-<pre class="syntaxbox">var <em>myCacheStorage</em> = self.caches; // or just caches
-</pre>
-
-<h3 id="值">值</h3>
-
-<p>{{domxref("CacheStorage")}} 对象.</p>
-
-<h2 id="例子">例子</h2>
-
-<p>下面的例子展示了你在<a href="/en-US/docs/Web/API/Service_Worker_API">service worker</a>上下文中如何应该运用cache对离线资产的进行存储。</p>
-
-<pre class="brush: js">this.addEventListener('install', function(event) {
-  event.waitUntil(
-    caches.open('v1').then(function(cache) {
-      return cache.addAll(
-        '/sw-test/',
-        '/sw-test/index.html',
-        '/sw-test/style.css',
-        '/sw-test/app.js',
-        '/sw-test/image-list.js',
-        '/sw-test/star-wars-logo.jpg',
-        '/sw-test/gallery/',
-        '/sw-test/gallery/bountyHunters.jpg',
-        '/sw-test/gallery/myLittleVader.jpg',
-        '/sw-test/gallery/snowTroopers.jpg'
-      );
-    })
-  );
-});</pre>
-
-<h2 id="规范">规范</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Specification</th>
-   <th scope="col">Status</th>
-   <th scope="col">Comment</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Service Workers', '#self-caches', 'caches')}}</td>
-   <td>{{Spec2('Service Workers')}}</td>
-   <td>Defined in a <code>WindowOrWorkerGlobalScope</code> partial in the newest spec.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('Service Workers')}}</td>
-   <td>{{Spec2('Service Workers')}}</td>
-   <td>Initial definition.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility">Browser compatibility</h2>
-
-<p>{{CompatibilityTable}}</p>
-
-<div id="compat-desktop">
-<table class="compat-table">
- <tbody>
-  <tr>
-   <th>Feature</th>
-   <th>Chrome</th>
-   <th>Firefox (Gecko)</th>
-   <th>Internet Explorer</th>
-   <th>Opera</th>
-   <th>Safari</th>
-  </tr>
-  <tr>
-   <td>Basic support</td>
-   <td>40.0</td>
-   <td>{{CompatGeckoDesktop(42)}}<br>
-    {{CompatGeckoDesktop(52)}}<sup>[1]</sup></td>
-   <td>{{CompatNo}}</td>
-   <td>{{CompatUnknown}}</td>
-   <td>{{CompatNo}}</td>
-  </tr>
- </tbody>
-</table>
-</div>
-
-<div id="compat-mobile">
-<table class="compat-table">
- <tbody>
-  <tr>
-   <th>Feature</th>
-   <th>Android</th>
-   <th>Chrome for Android</th>
-   <th>Firefox Mobile (Gecko)</th>
-   <th>IE Mobile</th>
-   <th>Opera Mobile</th>
-   <th>Safari Mobile</th>
-  </tr>
-  <tr>
-   <td>Basic support</td>
-   <td>{{CompatVersionUnknown}}</td>
-   <td>{{CompatVersionUnknown}}</td>
-   <td>{{CompatGeckoMobile(42)}}<br>
-    {{CompatGeckoMobile(52)}}<sup>[1]</sup></td>
-   <td>{{CompatVersionUnknown}}</td>
-   <td>{{CompatVersionUnknown}}</td>
-   <td>{{CompatVersionUnknown}}</td>
-  </tr>
- </tbody>
-</table>
-</div>
-
-<p>[1] <code>caches 现在被定义在</code> {{domxref("WindowOrWorkerGlobalScope")}} 中的mixin里.</p>
-
-<h2 id="相关链接">相关链接</h2>
-
-<ul>
- <li><a href="/en-US/docs/Web/API/ServiceWorker_API">Service Workers</a></li>
- <li><a href="/en-US/docs/Web/API/Web_Workers_API">Web Workers</a></li>
- <li>{{domxref("CacheStorage")}}</li>
- <li>{{domxref("Cache")}}</li>
-</ul>
diff --git a/files/zh-cn/web/api/windoworworkerglobalscope/clearinterval/index.html b/files/zh-cn/web/api/windoworworkerglobalscope/clearinterval/index.html
deleted file mode 100644
index 442e1bb81e..0000000000
--- a/files/zh-cn/web/api/windoworworkerglobalscope/clearinterval/index.html
+++ /dev/null
@@ -1,75 +0,0 @@
----
-title: WindowTimers.clearInterval()
-slug: Web/API/WindowOrWorkerGlobalScope/clearInterval
-tags:
-  - API
-  - WindowOrWorkerGlobalScope
-  - 参考
-  - 方法
-translation_of: Web/API/WindowOrWorkerGlobalScope/clearInterval
-original_slug: Web/API/Window/clearInterval
----
-<div>{{ApiRef("HTML DOM")}}</div>
-
-<p>{{domxref("WindowOrWorkerGlobalScope")}} mixin 的 <strong><code>clearInterval()</code></strong> 方法可取消先前通过 {{domxref("WindowOrWorkerGlobalScope.setInterval", "setInterval()")}} 设置的重复定时任务。</p>
-
-<h2 id="语法">语法</h2>
-
-<pre class="syntaxbox"><em>scope</em>.clearInterval(<var>intervalID</var>)
-</pre>
-
-<h3 id="Parameters">Parameters</h3>
-
-<dl>
- <dt><code>intervalID</code></dt>
- <dd>要取消的定时器的 ID。是由 <code>setInterval()</code> 返回的。</dd>
-</dl>
-
-<p>值得一提的是，{{domxref("WindowOrWorkerGlobalScope.setInterval", "setInterval()")}} 和 {{domxref("WindowOrWorkerGlobalScope.setTimeout", "setTimeout()")}} 共用其定义的 IDs，即可以使用 <code>clearInterval()</code> 和 {{domxref("WindowOrWorkerGlobalScope.clearTimeout", "clearTimeout()")}} 中的任意一个。然而，为了使代码可读性更强，你应该尽量避免这种用法。</p>
-
-<h3 id="返回值">返回值</h3>
-
-<p>{{jsxref("undefined")}}</p>
-
-<h2 id="示例">示例</h2>
-
-<p>查看 <a href="/en-US/docs/DOM/window.setInterval#Example"><code>setInterval()</code> 的示例</a>。</p>
-
-<h2 id="Specification" name="Specification">规范</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">规范</th>
-   <th scope="col">状态</th>
-   <th scope="col">备注</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', 'webappapis.html#dom-clearinterval', 'WindowOrWorkerGlobalScope.clearInterval()')}}</td>
-   <td>{{Spec2("HTML WHATWG")}}</td>
-   <td>Method moved to the <code>WindowOrWorkerGlobalScope</code> mixin in the latest spec.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', 'webappapis.html#dom-clearinterval', 'clearInterval()')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="浏览器兼容性">浏览器兼容性</h2>
-
-
-
-<p>{{Compat("api.WindowOrWorkerGlobalScope.clearInterval")}}</p>
-
-<h2 id="参见">参见</h2>
-
-<ul>
- <li><a href="/en-US/docs/JavaScript/Timers" title="JavaScript/Timers">JavaScript 定时器</a></li>
- <li>{{domxref("WindowOrWorkerGlobalScope.setTimeout")}}</li>
- <li>{{domxref("WindowOrWorkerGlobalScope.setInterval")}}</li>
- <li>{{domxref("WindowOrWorkerGlobalScope.clearTimeout")}}</li>
- <li>{{domxref("Window.requestAnimationFrame")}}</li>
- <li><a href="/en-US/docs/JavaScript/Timers/Daemons" title="JavaScript/Timers/Daemons"><em>Daemons</em> management</a></li>
-</ul>
diff --git a/files/zh-cn/web/api/windoworworkerglobalscope/cleartimeout/index.html b/files/zh-cn/web/api/windoworworkerglobalscope/cleartimeout/index.html
deleted file mode 100644
index 4e700ea7d0..0000000000
--- a/files/zh-cn/web/api/windoworworkerglobalscope/cleartimeout/index.html
+++ /dev/null
@@ -1,151 +0,0 @@
----
-title: WindowOrWorkerGlobalScope.clearTimeout()
-slug: Web/API/WindowOrWorkerGlobalScope/clearTimeout
-tags:
-  - API
-  - WindowOrWorkerGlobalScope
-  - clearTimeout
-translation_of: Web/API/WindowOrWorkerGlobalScope/clearTimeout
-original_slug: Web/API/WindowTimers/clearTimeout
----
-<div>
-<div>{{APIRef("HTML DOM")}}</div>
-</div>
-
-<p>{{domxref("WindowOrWorkerGlobalScope")}}内置的<strong><code>clearTimeout()</code></strong>方法取消了先前通过调用{{domxref("WindowOrWorkerGlobalScope.setTimeout", "setTimeout()")}}建立的定时器。</p>
-
-<h2 id="Syntax" name="Syntax">语法</h2>
-
-<pre class="notranslate"><em>scope</em>.clearTimeout(<em>timeoutID</em>)</pre>
-
-
-
-<h3 id="Parameters">Parameters</h3>
-
-<dl>
- <dt><code>timeoutID</code></dt>
- <dd>您要取消定时器的标识符。 该ID由相应的<code>setTimeout()</code>调用返回。</dd>
-</dl>
-
-<p>值得注意的是，{{domxref("WindowOrWorkerGlobalScope.setTimeout", "setTimeout()")}}和{{domxref("WindowOrWorkerGlobalScope.setInterval", "setInterval()")}}使用共享的ID池， 意味着在技术上可以混用<code>clearTimeout()</code>和{{domxref("WindowOrWorkerGlobalScope.clearInterval", "clearInterval()")}} 。 但是，为了清楚起见，你应该避免这样做。</p>
-
-<h2 id="Example" name="Example">示例</h2>
-
-<p>在一个网页中运行如下脚本，并且点击一次页面。一秒钟后你会看见弹出一条信息。如果你在一秒内不停点击页面，弹出框将不再出现。</p>
-
-<pre class="brush: js notranslate">var alarm = {
-  remind: function(aMessage) {
-    alert(aMessage);
-    delete this.timeoutID;
-  },
-
-  setup: function() {
-    this.cancel();
-    var self = this;
-    this.timeoutID = window.setTimeout(function(msg) {self.remind(msg);}, 1000, "Wake up!");
-  },
-
-  cancel: function() {
-    if(typeof this.timeoutID == "number") {
-      window.clearTimeout(this.timeoutID);
-      delete this.timeoutID;
-    }
-  }
-};
-window.onclick = function() { alarm.setup() };</pre>
-
-<h2 id="Notes" name="Notes">注意</h2>
-
-<p>传入一个错误的 ID 给 <code>clearTimeout()</code>不会有任何影响；也不会抛出异常。</p>
-
-<h2 id="Specification" name="Specification">规范</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Specification</th>
-   <th scope="col">Status</th>
-   <th scope="col">Comment</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', 'webappapis.html#dom-cleartimeout', 'WindowOrWorkerGlobalScope.clearTimeout()')}}</td>
-   <td>{{Spec2("HTML WHATWG")}}</td>
-   <td>Method moved to the <code>WindowOrWorkerGlobalScope</code> mixin in the latest spec.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', 'webappapis.html#dom-cleartimeout', 'clearTimeout()')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="浏览器兼容">浏览器兼容</h2>
-
-<p>{{CompatibilityTable}}</p>
-
-<div id="compat-desktop">
-<table class="compat-table">
- <tbody>
-  <tr>
-   <th>Feature</th>
-   <th>Chrome</th>
-   <th>Edge</th>
-   <th>Firefox (Gecko)</th>
-   <th>Internet Explorer</th>
-   <th>Opera</th>
-   <th>Safari</th>
-  </tr>
-  <tr>
-   <td>Basic support</td>
-   <td>1.0</td>
-   <td>{{CompatVersionUnknown}}</td>
-   <td>{{CompatGeckoDesktop("1")}}<br>
-    {{CompatGeckoDesktop("52")}}<sup>[1]</sup></td>
-   <td>4.0</td>
-   <td>4.0</td>
-   <td>1.0</td>
-  </tr>
- </tbody>
-</table>
-</div>
-
-<div id="compat-mobile">
-<table class="compat-table">
- <tbody>
-  <tr>
-   <th>Feature</th>
-   <th>Android</th>
-   <th>Chrome for Android</th>
-   <th>Edge</th>
-   <th>Firefox Mobile (Gecko)</th>
-   <th>IE Mobile</th>
-   <th>Opera Mobile</th>
-   <th>Safari Mobile</th>
-  </tr>
-  <tr>
-   <td>Basic support</td>
-   <td>1.0</td>
-   <td>1.0</td>
-   <td>{{CompatVersionUnknown}}</td>
-   <td>{{CompatGeckoMobile("1")}}<br>
-    {{CompatGeckoMobile("52")}}<sup>[1]</sup></td>
-   <td>6.0</td>
-   <td>6.0</td>
-   <td>1.0</td>
-  </tr>
- </tbody>
-</table>
-</div>
-
-<p>[1] <code>clearTimeout()</code> now defined on {{domxref("WindowOrWorkerGlobalScope")}} mixin.</p>
-
-<h2 id="See_also" name="See_also">更多</h2>
-
-<ul>
- <li>{{domxref("WindowTimers.setTimeout()")}}</li>
- <li>{{domxref("WindowTimers.setInterval()")}}</li>
- <li>{{domxref("WindowTimers.clearInterval()")}}</li>
- <li>{{domxref("Window.requestAnimationFrame()")}}</li>
- <li><a href="/en-US/docs/JavaScript/Timers/Daemons" title="JavaScript/Timers/Daemons"><em>Daemons</em> management</a></li>
-</ul>
diff --git a/files/zh-cn/web/api/windoworworkerglobalscope/createimagebitmap/index.html b/files/zh-cn/web/api/windoworworkerglobalscope/createimagebitmap/index.html
deleted file mode 100644
index 7d55152960..0000000000
--- a/files/zh-cn/web/api/windoworworkerglobalscope/createimagebitmap/index.html
+++ /dev/null
@@ -1,207 +0,0 @@
----
-title: self.createImageBitmap()
-slug: Web/API/WindowOrWorkerGlobalScope/createImageBitmap
-translation_of: Web/API/WindowOrWorkerGlobalScope/createImageBitmap
----
-<div>{{APIRef("Canvas API")}}</div>
-
-<p><code><strong>createImageBitmap</strong></code> 方法存在 windows 和 workers 中. 它接受各种不同的图像来源, 并返回一个{{domxref("Promise")}}, resolve为{{domxref("ImageBitmap")}}. 可选地参数,图像被剪裁成自（sx，sy）且宽度为sw,高度为sh的像素的矩形。</p>
-
-<h2 id="Syntax">Syntax</h2>
-
-<pre>createImageBitmap(<em>image</em>[, options]).then(function(response) { ... });
-createImageBitmap(<em>image, sx, sy, sw, sh</em>[, options]).then(function(response) { ... });
-</pre>
-
-<h3 id="Parameters">Parameters</h3>
-
-<dl>
- <dt><code>image</code></dt>
- <dd>一个图像源, 可以是一个 {{HTMLElement("img")}}, SVG {{SVGElement("image")}}, {{HTMLElement("video")}}, {{HTMLElement("canvas")}}, {{domxref("HTMLImageElement")}}, {{domxref("SVGImageElement")}}, {{domxref("HTMLVideoElement")}}, {{domxref("HTMLCanvasElement")}}, {{domxref("Blob")}}, {{domxref("ImageData")}}, {{domxref("ImageBitmap")}}, 或 {{domxref("OffscreenCanvas")}} 对象.</dd>
- <dt><code>sx</code></dt>
- <dd>裁剪点x坐标.</dd>
- <dt><code>sy</code></dt>
- <dd>裁剪点y坐标.</dd>
- <dt><code>sw</code></dt>
- <dd>裁剪宽度,值可为负数.</dd>
- <dt><code>sh</code></dt>
- <dd>裁剪高度,值可为负数.</dd>
- <dt>options {{optional_inline}}</dt>
- <dd>为其设置选项的对象。可用的选项是:
- <ul>
-  <li><code>imageOrientation</code>: 指示图像是按原样呈现还是垂直翻转.  <code>none</code> (默认不翻转) 或 <code>flipY</code>.</li>
-  <li><code>premultiplyAlpha</code>: 指示位图颜色通道由alpha通道预乘. 选择其一:<code>none</code>, <code>premultiply</code>, 或 <code>default</code> (默认).</li>
-  <li><code>colorSpaceConversion</code>: 指示图像是否使用色彩空间转换进行解码. <code>none</code> 或 <code>default</code> (默认). The value <code>default</code> indicates that implementation-specific behavior is used.</li>
-  <li><code>resizeWidth</code>: 指示新宽度的长整数。</li>
-  <li><code>resizeHeight</code>: 指示新高度的长整数。</li>
-  <li><code>resizeQuality</code>: 指定图像缩放算法. 选择其一<code>pixelated</code>, <code>low</code> (默认), <code>medium</code>, 或 <code>high</code>.</li>
- </ul>
- </dd>
-</dl>
-
-<h3 id="Return_value">Return value</h3>
-
-<p>返回一个解决ImageBitmap的{{domxref("Promise")}} ，当Promise成功时resolves接收一个包含所得到的矩形的位图数据{{domxref("ImageBitmap")}}。</p>
-
-<h2 id="Example">Example</h2>
-
-<pre class="brush: js  language-js">var canvas = document.getElementById('myCanvas'),
-ctx = canvas.getContext('2d'),
-image = new Image();
-
-image.onload = function() {
-  Promise.all([
-    createImageBitmap(this, 0, 0, 32, 32),
-    createImageBitmap(this, 32, 0, 32, 32)
-  ]).then(function(sprites) {
-    ctx.drawImage(sprites[0], 0, 0);
-    ctx.drawImage(sprites[1], 32, 32);
-  });
-}
-
-image.src = 'sprites.png';
-</pre>
-
-<h2 id="Specifications">Specifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Specification</th>
-   <th scope="col">Status</th>
-   <th scope="col">Comment</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', "webappapis.html#dom-createimagebitmap", "createImageBitmap")}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility">Browser compatibility</h2>
-
-<p>{{ CompatibilityTable}}</p>
-
-<div id="compat-desktop">
-<table class="compat-table">
- <tbody>
-  <tr>
-   <th>Feature</th>
-   <th>Chrome</th>
-   <th>Firefox (Gecko)</th>
-   <th>Edge</th>
-   <th>Internet Explorer</th>
-   <th>Opera</th>
-   <th>Safari</th>
-  </tr>
-  <tr>
-   <td>Basic support</td>
-   <td>{{CompatChrome(50)}}</td>
-   <td>
-    <p>{{CompatGeckoDesktop(42)}}<br>
-     {{CompatGeckoDesktop(52)}}<sup>[1]</sup></p>
-   </td>
-   <td>{{CompatNo}}</td>
-   <td>{{CompatNo}}</td>
-   <td>{{CompatVersionUnknown}}</td>
-   <td>{{CompatNo}}</td>
-  </tr>
-  <tr>
-   <td><code>options</code> parameter</td>
-   <td>{{CompatChrome(52)}}</td>
-   <td>{{CompatUnknown}}</td>
-   <td>{{CompatNo}}</td>
-   <td>{{CompatNo}}</td>
-   <td>39</td>
-   <td>{{CompatNo}}</td>
-  </tr>
-  <tr>
-   <td><code>resizeWidth</code>, <code>resizeHeight</code>, and <code>resizeQuality</code></td>
-   <td>{{CompatChrome(54)}}</td>
-   <td>{{CompatUnknown}}</td>
-   <td>{{CompatNo}}</td>
-   <td>{{CompatNo}}</td>
-   <td>{{CompatUnknown}}</td>
-   <td>{{CompatNo}}</td>
-  </tr>
-  <tr>
-   <td><code>SVGImageElement</code> as source image</td>
-   <td>{{CompatChrome(59)}}</td>
-   <td>{{CompatUnknown}}</td>
-   <td>{{CompatNo}}</td>
-   <td>{{CompatNo}}</td>
-   <td>{{CompatUnknown}}</td>
-   <td>{{CompatNo}}</td>
-  </tr>
- </tbody>
-</table>
-</div>
-
-<div id="compat-mobile">
-<table class="compat-table">
- <tbody>
-  <tr>
-   <th>Feature</th>
-   <th>Android Webview</th>
-   <th>Chrome for Android</th>
-   <th>Firefox Mobile (Gecko)</th>
-   <th>IE Mobile</th>
-   <th>Opera Mobile</th>
-   <th>Safari Mobile</th>
-  </tr>
-  <tr>
-   <td>Basic support</td>
-   <td>{{CompatChrome(50)}}</td>
-   <td>{{CompatChrome(50)}}</td>
-   <td>
-    <p>{{CompatGeckomobile(42)}}<br>
-     {{CompatGeckoMobile(52)}}<sup>[1]</sup></p>
-   </td>
-   <td>{{CompatUnknown}}</td>
-   <td>{{CompatVersionUnknown}}</td>
-   <td>{{CompatUnknown}}</td>
-  </tr>
-  <tr>
-   <td><code>options</code> parameter</td>
-   <td>{{CompatChrome(52)}}</td>
-   <td>{{CompatChrome(52)}}</td>
-   <td>{{CompatUnknown}}</td>
-   <td>{{CompatUnknown}}</td>
-   <td>39</td>
-   <td>{{CompatUnknown}}</td>
-  </tr>
-  <tr>
-   <td><code>resizeWidth</code>, <code>resizeHeight</code>, and <code>resizeQuality</code></td>
-   <td>{{CompatChrome(54)}}</td>
-   <td>{{CompatUnknown}}</td>
-   <td>{{CompatUnknown}}</td>
-   <td>{{CompatUnknown}}</td>
-   <td>{{CompatUnknown}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td><code>SVGImageElement</code> as source image</td>
-   <td>{{CompatChrome(59)}}</td>
-   <td>{{CompatChrome(59)}}</td>
-   <td>{{CompatUnknown}}</td>
-   <td>{{CompatUnknown}}</td>
-   <td>{{CompatUnknown}}</td>
-   <td>{{CompatUnknown}}</td>
-  </tr>
- </tbody>
-</table>
-</div>
-
-<p>[1] <code>createImageBitmap()</code> now defined on {{domxref("WindowOrWorkerGlobalScope")}} mixin.</p>
-
-<h2 id="See_also">See also</h2>
-
-<ul>
- <li>{{domxref("CanvasRenderingContext2D.drawImage()")}}</li>
- <li>{{domxref("ImageData")}}</li>
-</ul>
-
-<p>
- <audio class="hidden"> </audio>
-</p>
diff --git a/files/zh-cn/web/api/windoworworkerglobalscope/crossoriginisolated/index.html b/files/zh-cn/web/api/windoworworkerglobalscope/crossoriginisolated/index.html
deleted file mode 100644
index ad19e53c2e..0000000000
--- a/files/zh-cn/web/api/windoworworkerglobalscope/crossoriginisolated/index.html
+++ /dev/null
@@ -1,58 +0,0 @@
----
-title: WindowOrWorkerGlobalScope.crossOriginIsolated
-slug: Web/API/WindowOrWorkerGlobalScope/crossOriginIsolated
-translation_of: Web/API/WindowOrWorkerGlobalScope/crossOriginIsolated
----
-<div>{{APIRef()}}{{SeeCompatTable}}</div>
-
-<p><code><strong>crossOriginIsolated</strong></code> 是 {{domxref("WindowOrWorkerGlobalScope")}} 的一个只读属性，返回一个布尔值，该值指示是否可以通过{{domxref("Window.postMessage()")}}调用发送 {{jsxref("SharedArrayBuffer")}}。</p>
-
-<p>该值取决于响应中存在的{{httpheader("Cross-Origin-Opener-Policy")}} 和{{httpheader("Cross-Origin-Embedder-Policy")}} 头。</p>
-
-<h2 id="语法">语法</h2>
-
-<pre class="syntaxbox">var <em>myCrossOriginIsolated</em> = self.crossOriginIsolated; // 或直接 crossOriginIsolated
-</pre>
-
-<h3 id="类型">类型</h3>
-
-<p>布尔类型</p>
-
-<h2 id="示例">示例</h2>
-
-<pre class="brush: js">if(crossOriginIsolated) {
-  // post SharedArrayBuffer
-} else {
-  // Do something else
-}
-</pre>
-
-<h2 id="规范">规范</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Specification</th>
-   <th scope="col">Status</th>
-   <th scope="col">Comment</th>
-  </tr>
-  <tr>
-   <td>{{SpecName("HTML WHATWG")}}</td>
-   <td></td>
-   <td>Not yet merged into the spec</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="浏览器兼容性">浏览器兼容性</h2>
-
-
-
-<p>{{Compat("api.WindowOrWorkerGlobalScope.crossOriginIsolated")}}</p>
-
-<h2 id="参见">参见</h2>
-
-<ul>
- <li><a href="/en-US/docs/Web/API/ServiceWorker_API">Service Workers</a></li>
- <li><a href="/en-US/docs/Web/API/Web_Workers_API">Web Workers</a></li>
-</ul>
diff --git a/files/zh-cn/web/api/windoworworkerglobalscope/fetch/index.html b/files/zh-cn/web/api/windoworworkerglobalscope/fetch/index.html
deleted file mode 100644
index 3ebf7d8fdb..0000000000
--- a/files/zh-cn/web/api/windoworworkerglobalscope/fetch/index.html
+++ /dev/null
@@ -1,173 +0,0 @@
----
-title: WorkerOrGlobalScope.fetch()
-slug: Web/API/WindowOrWorkerGlobalScope/fetch
-tags:
-  - API
-  - Experimental
-  - Fetch
-  - FetchAPI
-  - GlobalFetch
-  - request
-translation_of: Web/API/WindowOrWorkerGlobalScope/fetch
----
-<p>{{APIRef("Fetch")}}</p>
-
-<p>位于 {{domxref("WorkerOrGlobalScope")}} 这一个 mixin 中的 <strong><code>fetch()</code> </strong>方法用于发起获取资源的请求。它返回一个 promise，这个 promise 会在请求响应后被 resolve，并传回 {{domxref("Response")}} 对象。</p>
-
-<p>{{domxref("Window")}} 和 {{domxref("WorkerGlobalScope")}} 都实现了 WorkerOrGlobalScope。 ——这意味着基本在任何场景下只要你想获取资源，都可以使用 位于 WorkerOrGlobalScope 中的 <code>fetch()</code> 方法。</p>
-
-<p>当遇到网络错误时，{{domxref("WorkerOrGlobalScope.fetch","fetch()")}} 返回的 promise 会被 reject，并传回 {{jsxref("TypeError")}}，虽然这也可能因为权限或其它问题导致。成功的 fetch() 检查不仅要包括 promise 被 resolve，还要包括 {{domxref("Response.ok")}} 属性为 true。HTTP 404 状态并不被认为是网络错误。</p>
-
-<p><code>fetch()</code> 方法由 <a href="/en-US/docs/Security/CSP/CSP_policy_directives">Content Security Policy</a> 的 <code>connect-src</code>指令控制，而不是它请求的资源。</p>
-
-<div class="note">
-<p><strong>注意</strong>:{{domxref("WorkerOrGlobalScope.fetch","fetch()")}} 方法的参数与 {{domxref("Request.Request","Request()")}} 构造器是一样的。</p>
-</div>
-
-<h2 id="语法">语法</h2>
-
-<pre class="syntaxbox notranslate">Promise&lt;Response&gt; fetch(input[, init]);
-</pre>
-
-<h3 id="参数">参数</h3>
-
-<dl>
- <dt><em>?input</em></dt>
- <dd>定义要获取的资源。这可能是：
- <ul>
-  <li>一个 {{domxref("USVString")}} 字符串，包含要获取资源的 URL。一些浏览器会接受 <code>blob:</code> 和 <code>data:</code> 作为 schemes.</li>
-  <li>一个 {{domxref("Request")}} 对象。</li>
- </ul>
- </dd>
- <dt><em>init</em> {{optional_inline}}</dt>
- <dd>一个配置项对象，包括所有对请求的设置。可选的参数有：
- <ul>
-  <li><code>method</code>: 请求使用的方法，如 <code>GET<font face="Open Sans, Arial, sans-serif">、</font></code><code>POST。</code></li>
-  <li><code>headers</code>: 请求的头信息，形式为 {{domxref("Headers")}} 的对象或包含 {{domxref("ByteString")}} 值的对象字面量。</li>
-  <li><code>body</code>: 请求的 body 信息：可能是一个 {{domxref("Blob")}}、{{domxref("BufferSource")}}、{{domxref("FormData")}}、{{domxref("URLSearchParams")}} 或者 {{domxref("USVString")}} 对象。注意 GET 或 HEAD 方法的请求不能包含 body 信息。</li>
-  <li><code>mode</code>: 请求的模式，如 <code>cors、</code> <code>no-cors 或者</code> <code>same-origin。</code></li>
-  <li><code>credentials</code>: 请求的 credentials，如 <code>omit<font face="Open Sans, Arial, sans-serif">、</font></code><code>same-origin 或者</code> <code>include</code>。为了在当前域名内自动发送 cookie ， 必须提供这个选项， 从 Chrome 50 开始， 这个属性也可以接受 {{domxref("FederatedCredential")}} 实例或是一个 {{domxref("PasswordCredential")}} 实例。</li>
-  <li><code>cache</code>:  请求的 cache 模式: <code>default</code>、 <code>no-store</code>、 <code>reload</code> 、 <code>no-cache </code>、 <code>force-cache </code>或者 <code>only-if-cached</code> 。</li>
-  <li><code>redirect</code>: 可用的 redirect 模式: <code>follow</code> (自动重定向), <code>error</code> (如果产生重定向将自动终止并且抛出一个错误）, 或者 <code>manual</code> (手动处理重定向). 在Chrome中默认使用<code>follow（</code>Chrome 47之前的默认值是<code>manual</code>）。</li>
-  <li><code>referrer</code>: 一个 {{domxref("USVString")}} 可以是 <code>no-referrer<font face="Open Sans, Arial, sans-serif">、</font></code><code>client</code>或一个 URL。默认是 <code>client。</code></li>
-  <li><code>referrerPolicy</code>: 指定了HTTP头部referer字段的值。可能为以下值之一： <code>no-referrer、</code> <code>no-referrer-when-downgrade、</code> <code>origin、</code> <code>origin-when-cross-origin、</code> <code>unsafe-url 。</code></li>
-  <li><code>integrity</code>: 包括请求的  <a href="https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity">subresource integrity</a> 值 （ 例如： <code>sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE=）。</code></li>
- </ul>
- </dd>
-</dl>
-
-<h3 id="返回值">返回值</h3>
-
-<p>一个 {{jsxref("Promise")}}，resolve 时回传 {{domxref("Response")}} 对象。</p>
-
-<h3 id="例外">例外</h3>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">类型</th>
-   <th scope="col"><strong>描述</strong></th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><code>AbortError</code></td>
-   <td>请求被{{domxref("AbortController.abort()")}}终止。</td>
-  </tr>
-  <tr>
-   <td><code>TypeError</code></td>
-   <td>从<a href="/en-US/docs/Mozilla/Firefox/Releases/43">Firefox 43</a>开始，如果<code>fetch()</code>接收到含有用户名和密码的URL（例如<code>http://user:password@example.com</code>），它将会抛出一个<code>TypeError</code> 。</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="示例">示例</h2>
-
-<p>在 <a href="https://github.com/mdn/fetch-examples/tree/gh-pages/fetch-request">Fetch Request 示例</a> (参见 <a href="http://mdn.github.io/fetch-examples/fetch-request/">Fetch Request live</a>) 中，我们使用对应的构造器创建了一个新的 {{domxref("Request")}} 对象，然后调用 fetch() 方法获取资源。因为我们是在请求一个图片，为了解析正常，我们对响应执行 {{domxref("Body.blob")}} 来设置相应的 MIME 类型。然后创建一个 Object URL，并在 {{htmlelement("img")}} 元素中把它显示出来。</p>
-
-<pre class="brush: js notranslate">var myImage = document.querySelector('img');
-
-var myRequest = new Request('flowers.jpg');
-
-fetch(myRequest).then(function(response) {
-  return response.blob();
-}).then(function(response) {
-  var objectURL = URL.createObjectURL(response);
-  myImage.src = objectURL;
-});</pre>
-
-<p>在 <a href="https://github.com/mdn/fetch-examples/tree/gh-pages/fetch-with-init-then-request">Fetch with init then Request 示例</a> (参见 <a href="http://mdn.github.io/fetch-examples/fetch-with-init-then-request/">Fetch Request init live</a>) 中，我们做同样的操作，除了在调用 fetch() 时传入一个 init 对象：</p>
-
-<pre class="brush: js notranslate">var myImage = document.querySelector('img');
-
-var myHeaders = new Headers();
-myHeaders.append('Content-Type', 'image/jpeg');
-
-var myInit = { method: 'GET',
-               headers: myHeaders,
-               mode: 'cors',
-               cache: 'default' };
-
-var myRequest = new Request('flowers.jpg');
-
-fetch(myRequest,myInit).then(function(response) {
-  ...
-});</pre>
-
-<p>你也可以传入同样的 init 对象到 Request 构造器，来实现同样的效果，如：</p>
-
-<pre class="brush: js notranslate">var myRequest = new Request('flowers.jpg',myInit);
-</pre>
-
-<p><code>init</code> 对象中的 <code>headers</code> 也可以是一个对象字面量：</p>
-
-<pre class="brush: js notranslate"><span class="keyword token">var</span> myInit <span class="operator token">=</span> <span class="punctuation token">{</span> method<span class="punctuation token">:</span> <span class="string token">'GET'</span><span class="punctuation token">,</span>
-               headers<span class="punctuation token">:</span> <span class="punctuation token">{</span>
-                   <span class="string token">'Content-Type'</span><span class="punctuation token">:</span> <span class="string token">'image/jpeg'</span>
-               <span class="punctuation token">}</span><span class="punctuation token">,</span>
-               mode<span class="punctuation token">:</span> <span class="string token">'cors'</span><span class="punctuation token">,</span>
-               cache<span class="punctuation token">:</span> <span class="string token">'default'</span> <span class="punctuation token">}</span><span class="punctuation token">;</span>
-
-<span class="keyword token">var</span> myRequest <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">Request</span><span class="punctuation token">(</span><span class="string token">'flowers.jpg'</span><span class="punctuation token">,</span> myInit<span class="punctuation token">)</span><span class="punctuation token">;</span></pre>
-
-<h2 id="规范">规范</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Specification</th>
-   <th scope="col">Status</th>
-   <th scope="col">Comment</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Fetch','#fetch-method','fetch()')}}</td>
-   <td>{{Spec2('Fetch')}}</td>
-   <td>Defined in a <code>WindowOrWorkerGlobalScope</code> partial in the newest spec.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('Fetch','#dom-global-fetch','fetch()')}}</td>
-   <td>{{Spec2('Fetch')}}</td>
-   <td>Initial definition</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('Credential Management')}}</td>
-   <td>{{Spec2('Credential Management')}}</td>
-   <td>Adds {{domxref("FederatedCredential")}} or {{domxref("PasswordCredential")}} instance as a possible value for <code>init.credentials</code>.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="浏览器兼容性">浏览器兼容性</h2>
-
-
-
-<p>{{Compat("api.WindowOrWorkerGlobalScope.fetch")}}</p>
-
-<h2 id="相关链接">相关链接</h2>
-
-<ul>
- <li><a href="https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API">Fetch API</a></li>
- <li><a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li>
- <li><a href="/en-US/docs/Web/HTTP/Access_control_CORS">HTTP access control (CORS)</a></li>
- <li><a href="/en-US/docs/Web/HTTP">HTTP</a></li>
-</ul>
diff --git a/files/zh-cn/web/api/windoworworkerglobalscope/indexeddb/index.html b/files/zh-cn/web/api/windoworworkerglobalscope/indexeddb/index.html
deleted file mode 100644
index 1c1f17f52c..0000000000
--- a/files/zh-cn/web/api/windoworworkerglobalscope/indexeddb/index.html
+++ /dev/null
@@ -1,175 +0,0 @@
----
-title: WindowOrWorkerGlobalScope.indexedDB
-slug: Web/API/WindowOrWorkerGlobalScope/indexedDB
-tags:
-  - API
-  - Database
-  - IndexedDB
-  - Reference
-  - Storage
-  - WindowOrWorkerGlobalScope
-  - 参考
-  - 属性
-translation_of: Web/API/WindowOrWorkerGlobalScope/indexedDB
----
-<p>{{ APIRef() }}</p>
-
-<p><strong><code>indexedDB</code></strong> 是 {{domxref("WindowOrWorkerGlobalScope")}}的一个只读属性，它集成了为应用程序提供异步访问索引数据库的功能的机制。.</p>
-
-<h2 id="语法">语法</h2>
-
-<pre class="syntaxbox">var IDBFactory = self.indexedDB;</pre>
-
-<div class="twocolumns">
-<h2 id="值">值</h2>
-</div>
-
-<p>一个 {{domxref("IDBFactory")}} 对象.</p>
-
-<p id="示例">示例</p>
-
-<pre class="brush: js;highlight:[3]">var db;
-function openDB() {
- var DBOpenRequest = window.indexedDB.open('toDoList');
- DBOpenRequest.onsuccess = function(e) {
-   db = DBOpenRequest.result;
- }
-}</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('IndexedDB 2', '#dom-windoworworkerglobalscope-indexeddb', 'indexedDB')}}</td>
-   <td>{{Spec2('IndexedDB 2')}}</td>
-   <td>Defined in a <code>WindowOrWorkerGlobalScope</code> partial in the newest spec.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('IndexedDB', '#widl-IDBEnvironment-indexedDB', 'indexedDB')}}</td>
-   <td>{{Spec2('IndexedDB')}}</td>
-   <td>Initial definition.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">浏览器兼容性</h2>
-
-<div>{{CompatibilityTable}}</div>
-
-<div id="compat-desktop">
-<table class="compat-table">
- <tbody>
-  <tr>
-   <th>Feature</th>
-   <th>Chrome</th>
-   <th>Edge</th>
-   <th>Firefox (Gecko)</th>
-   <th>Internet Explorer</th>
-   <th>Opera</th>
-   <th>Safari (WebKit)</th>
-  </tr>
-  <tr>
-   <td>Basic support</td>
-   <td>23{{property_prefix("webkit")}}<br>
-    24</td>
-   <td>{{CompatVersionUnknown}}</td>
-   <td>10 {{property_prefix("moz")}}<br>
-    {{CompatGeckoDesktop("16.0")}}<br>
-    {{CompatGeckoDesktop("52.0")}}<sup>[1]</sup></td>
-   <td>10, partial</td>
-   <td>15</td>
-   <td>7.1</td>
-  </tr>
-  <tr>
-   <td>Available in workers</td>
-   <td>{{CompatVersionUnknown}}</td>
-   <td>{{CompatVersionUnknown}}</td>
-   <td>{{CompatGeckoMobile("37.0")}}</td>
-   <td>{{CompatUnknown}}</td>
-   <td>{{CompatVersionUnknown}}</td>
-   <td>{{CompatUnknown}}</td>
-  </tr>
-  <tr>
-   <td>Indexed Database 2.0</td>
-   <td>{{CompatChrome(58)}}</td>
-   <td>{{CompatUnknown}}</td>
-   <td>{{CompatUnknown}}</td>
-   <td>{{CompatUnknown}}</td>
-   <td>{{CompatOpera(45)}}</td>
-   <td>{{CompatUnknown}}</td>
-  </tr>
- </tbody>
-</table>
-</div>
-
-<div id="compat-mobile">
-<table class="compat-table">
- <tbody>
-  <tr>
-   <th>Feature</th>
-   <th>Android Webview</th>
-   <th>Chrome for Android</th>
-   <th>Edge</th>
-   <th>Firefox Mobile (Gecko)</th>
-   <th>Firefox OS</th>
-   <th>IE Phone</th>
-   <th>Opera Mobile</th>
-   <th>Safari Mobile</th>
-  </tr>
-  <tr>
-   <td>Basic support</td>
-   <td>{{CompatVersionUnknown}}</td>
-   <td>{{CompatUnknown}}</td>
-   <td>{{CompatVersionUnknown}}</td>
-   <td>{{CompatGeckoMobile("22.0")}}<br>
-    {{CompatGeckoMobile("52.0")}}<sup>[1]</sup></td>
-   <td>1.0.1</td>
-   <td>10</td>
-   <td>22</td>
-   <td>8</td>
-  </tr>
-  <tr>
-   <td>Available in workers</td>
-   <td>{{CompatVersionUnknown}}</td>
-   <td>{{CompatUnknown}}</td>
-   <td>{{CompatVersionUnknown}}</td>
-   <td>{{CompatGeckoMobile("37.0")}}</td>
-   <td>{{CompatVersionUnknown}}</td>
-   <td>{{CompatUnknown}}</td>
-   <td>{{CompatVersionUnknown}}</td>
-   <td>{{CompatUnknown}}</td>
-  </tr>
-  <tr>
-   <td>Indexed Database 2.0</td>
-   <td>{{CompatChrome(58)}}</td>
-   <td>{{CompatChrome(58)}}</td>
-   <td>{{CompatUnknown}}</td>
-   <td>{{CompatUnknown}}</td>
-   <td>{{CompatUnknown}}</td>
-   <td>{{CompatUnknown}}</td>
-   <td>{{CompatOperaMobile(45)}}</td>
-   <td>{{CompatUnknown}}</td>
-  </tr>
- </tbody>
-</table>
-</div>
-
-<p>[1] <code>indexedDB</code> 定义在 {{domxref("WindowOrWorkerGlobalScope")}} mixin（一种实现多继承的方法）上.</p>
-
-<h2 id="相关链接">相关链接</h2>
-
-<ul>
- <li><a href="/en-US/docs/Web/API/IndexedDB_API/Using_IndexedDB">Using IndexedDB</a></li>
- <li>Starting transactions: {{domxref("IDBDatabase")}}</li>
- <li>Using transactions: {{domxref("IDBTransaction")}}</li>
- <li>Setting a range of keys: {{domxref("IDBKeyRange")}}</li>
- <li>Retrieving and making changes to your data: {{domxref("IDBObjectStore")}}</li>
- <li>Using cursors: {{domxref("IDBCursor")}}</li>
- <li>Reference example: <a class="external" href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a class="external" href="http://mdn.github.io/to-do-notifications/">view example live</a>.)</li>
-</ul>
diff --git a/files/zh-cn/web/api/windoworworkerglobalscope/issecurecontext/index.html b/files/zh-cn/web/api/windoworworkerglobalscope/issecurecontext/index.html
deleted file mode 100644
index d9f72b13a5..0000000000
--- a/files/zh-cn/web/api/windoworworkerglobalscope/issecurecontext/index.html
+++ /dev/null
@@ -1,100 +0,0 @@
----
-title: WindowOrWorkerGlobalScope.isSecureContext
-slug: Web/API/WindowOrWorkerGlobalScope/isSecureContext
-tags:
-  - API
-  - Property
-  - Reference
-  - Window
-  - WindowOrWorkerGlobalContext
-  - Workers
-  - isSecureContext
-translation_of: Web/API/WindowOrWorkerGlobalScope/isSecureContext
----
-<p>{{APIRef()}}{{SeeCompatTable}}</p>
-
-<p><code><strong>isSecureContext</strong></code> 是 {{domxref("WindowOrWorkerGlobalScope")}} 的一个只读属性，返回一个布尔值，标识当前上下文是否安全，安全（true）或不安全（false）。</p>
-
-<h2 id="语法">语法</h2>
-
-<pre class="syntaxbox">var <em>isItSecure</em> = self.isSecureContext; // 或者直接使用 isSecureContext
-</pre>
-
-<h3 id="类型">类型</h3>
-
-<p> {{domxref("Boolean")}}.</p>
-
-<h2 id="规范">规范</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Specification</th>
-   <th scope="col">Status</th>
-   <th scope="col">Comment</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Secure Contexts', 'webappapis.html#dom-origin', 'WindowOrWorkerGlobalScope.isSecureContext')}}</td>
-   <td>{{Spec2('Secure Contexts')}}</td>
-   <td>Initial definition.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="浏览器兼容性">浏览器兼容性</h2>
-
-<p>{{CompatibilityTable}}</p>
-
-<div id="compat-desktop">
-<table class="compat-table">
- <tbody>
-  <tr>
-   <th>Feature</th>
-   <th>Chrome</th>
-   <th>Firefox (Gecko)</th>
-   <th>Internet Explorer</th>
-   <th>Opera</th>
-   <th>Safari</th>
-  </tr>
-  <tr>
-   <td>Basic support</td>
-   <td>{{CompatChrome(55)}}</td>
-   <td>{{CompatGeckoDesktop(52)}}</td>
-   <td>{{CompatUnknown}}</td>
-   <td>{{CompatUnknown}}</td>
-   <td>{{CompatUnknown}}</td>
-  </tr>
- </tbody>
-</table>
-</div>
-
-<div id="compat-mobile">
-<table class="compat-table">
- <tbody>
-  <tr>
-   <th>Feature</th>
-   <th>Android Webview</th>
-   <th>Chrome for Android</th>
-   <th>Firefox Mobile (Gecko)</th>
-   <th>IE Mobile</th>
-   <th>Opera Mobile</th>
-   <th>Safari Mobile</th>
-  </tr>
-  <tr>
-   <td>Basic support</td>
-   <td>{{CompatChrome(55)}}</td>
-   <td>{{CompatChrome(55)}}</td>
-   <td>{{CompatGeckoMobile(52)}}</td>
-   <td>{{CompatUnknown}}</td>
-   <td>{{CompatUnknown}}</td>
-   <td>{{CompatUnknown}}</td>
-  </tr>
- </tbody>
-</table>
-</div>
-
-<h2 id="参考">参考</h2>
-
-<ul>
- <li><a href="/en-US/docs/Web/Security/Secure_Contexts">Secure contexts</a></li>
-</ul>
diff --git a/files/zh-cn/web/api/windoworworkerglobalscope/origin/index.html b/files/zh-cn/web/api/windoworworkerglobalscope/origin/index.html
deleted file mode 100644
index eac425fbd9..0000000000
--- a/files/zh-cn/web/api/windoworworkerglobalscope/origin/index.html
+++ /dev/null
@@ -1,98 +0,0 @@
----
-title: WindowOrWorkerGlobalScope.origin
-slug: Web/API/WindowOrWorkerGlobalScope/origin
-tags:
-  - global scope
-  - origin
-  - serialized
-translation_of: Web/API/WindowOrWorkerGlobalScope/origin
----
-<p>{{APIRef()}}{{SeeCompatTable}}{{domxref("WindowOrWorkerGlobalScope")}} 接口的 <code><strong>origin</strong></code> 只读属性返回全局范围的 <strong>origin</strong>, 序列化为一个字符串。</p>
-
-<h2 id="Syntax">Syntax</h2>
-
-<pre class="syntaxbox">let <em>myOrigin</em> = self.origin; // or just origin
-</pre>
-
-<h3 id="Value">Value</h3>
-
-<p>A {{domxref("USVString")}}.</p>
-
-<h2 id="Examples">Examples</h2>
-
-<p>Executed from inside a worker script, the following snippet will log the worker's global scope's origin to the console each time it receives a message</p>
-
-<pre class="brush: js">onmessage = function() {
-  console.log(self.origin);
-};</pre>
-
-<p>If the origin is not a scheme/host/port tuple (say you are trying to run it locally, i.e. via <code>file://</code> URL), <code>origin</code> will return the string <code>"null"</code>.</p>
-
-<h2 id="Specifications">Specifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Specification</th>
-   <th scope="col">Status</th>
-   <th scope="col">Comment</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', 'webappapis.html#dom-origin', 'WindowOrWorkerGlobalScope.origin')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td>Initial definition.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility">Browser compatibility</h2>
-
-<p>{{CompatibilityTable}}</p>
-
-<div id="compat-desktop">
-<table class="compat-table">
- <tbody>
-  <tr>
-   <th>Feature</th>
-   <th>Chrome</th>
-   <th>Firefox (Gecko)</th>
-   <th>Internet Explorer</th>
-   <th>Opera</th>
-   <th>Safari</th>
-  </tr>
-  <tr>
-   <td>Basic support</td>
-   <td>{{CompatChrome(59)}}</td>
-   <td>{{CompatGeckoDesktop(54)}}</td>
-   <td>{{CompatNo}}</td>
-   <td>{{CompatNo}}</td>
-   <td>{{CompatNo}}</td>
-  </tr>
- </tbody>
-</table>
-</div>
-
-<div id="compat-mobile">
-<table class="compat-table">
- <tbody>
-  <tr>
-   <th>Feature</th>
-   <th>Android</th>
-   <th>Chrome for Android</th>
-   <th>Firefox Mobile (Gecko)</th>
-   <th>IE Mobile</th>
-   <th>Opera Mobile</th>
-   <th>Safari Mobile</th>
-  </tr>
-  <tr>
-   <td>Basic support</td>
-   <td>{{CompatChrome(59)}}</td>
-   <td>{{CompatChrome(59)}}</td>
-   <td>{{CompatGeckoMobile(54)}} </td>
-   <td>{{CompatNo}}</td>
-   <td>{{CompatNo}}</td>
-   <td>{{CompatNo}}</td>
-  </tr>
- </tbody>
-</table>
-</div>
diff --git a/files/zh-cn/web/api/windoworworkerglobalscope/queuemicrotask/index.html b/files/zh-cn/web/api/windoworworkerglobalscope/queuemicrotask/index.html
deleted file mode 100644
index 3f81e04235..0000000000
--- a/files/zh-cn/web/api/windoworworkerglobalscope/queuemicrotask/index.html
+++ /dev/null
@@ -1,108 +0,0 @@
----
-title: WindowOrWorkerGlobalScope.queueMicrotask()
-slug: Web/API/WindowOrWorkerGlobalScope/queueMicrotask
-tags:
-  - API
-  - JavaScript
-  - Method
-  - Microtask
-  - 参考
-  - 同步
-  - 方法
-translation_of: Web/API/WindowOrWorkerGlobalScope/queueMicrotask
----
-<div>{{APIRef("HTML DOM")}}</div>
-
-<div><span class="seoSummary">{{domxref("Window")}} 或 {{domxref("Worker")}} 接口的 <code><strong>queueMicrotask()</strong></code> 方法，queues a microtask to be executed at a safe time prior to control returning to the browser's event loop.</span>microtask 是一个简短的函数，它将在当前任务（task）完成其工作之后运行，并且在执行上下文的控制返回到浏览器的事件循环之前，没有其他代码等待运行。The microtask is a short function which will run after the current task has completed its work and when there is no other code waiting to be run before control of the execution context is returned to the browser's event loop.</div>
-
-<div></div>
-
-<p>This lets your code run without interfering with any other, potentially higher priority, code that is pending, but before the browser regains control over the execution context, potentially depending on work you need to complete. You can learn more about how to use microtasks and why you might choose to do so in our <a href="/en-US/docs/Web/API/HTML_DOM_API/Microtask_guide">microtask guide</a>.</p>
-
-<p>The importance of microtasks comes in its ability to perform tasks asynchronously but in a specific order. See <a href="/en-US/docs/Web/API/HTML_DOM_API/Microtask_guide">Using microtasks in JavaScript with queueMicrotask()</a> for more details.</p>
-
-<p>Microtasks are especially useful for libraries and frameworks that need to perform final cleanup or other just-before-rendering tasks.</p>
-
-<p><code>queueMicrotask()</code> 处于 {{domxref("WindowOrWorkerGlobalScope")}} mixin 之下。</p>
-
-<h2 id="语法">语法</h2>
-
-<pre class="syntaxbox"><em>scope</em>.queueMicrotask(<em>function</em>);
-</pre>
-
-<h3 id="参数">参数</h3>
-
-<dl>
- <dt><code>function</code></dt>
- <dd>A {{jsxref("function")}} to be executed when the browser engine determines it is safe to call your code.微任务（microtask）的执行顺序在所有挂起的任务（pending tasks）完成之后，在对浏览器的事件循环产生控制（yielding control to the browser's event loop）之前。</dd>
-</dl>
-
-<h3 id="返回值">返回值</h3>
-
-<p><code>undefined</code>。</p>
-
-<h2 id="示例">示例</h2>
-
-<pre class="brush: js">self.queueMicrotask(() =&gt; {
-  // 函数的内容
-})</pre>
-
-<p>来自 <a href="https://html.spec.whatwg.org/multipage/timers-and-user-prompts.html#microtask-queuing"><code>queueMicrotask</code> 的规范文档：</a></p>
-
-<pre class="brush: js">MyElement.prototype.loadData = function (url) {
-  if (this._cache[url]) {
-    queueMicrotask(() =&gt; {
-      this._setData(this._cache[url]);
-      this.dispatchEvent(new Event("load"));
-    });
-  } else {
-    fetch(url).then(res =&gt; res.arrayBuffer()).then(data =&gt; {
-      this._cache[url] = data;
-      this._setData(data);
-      this.dispatchEvent(new Event("load"));
-    });
-  }
-};</pre>
-
-<h2 id="polyfill">polyfill</h2>
-
-<p>下面的代码是一份 <code>queueMicrotask()</code> 的 polyfill。它通过使用立即 resolve 的 promise 创建一个微任务（microtask），如果无法创建 promise，则回落（fallback）到使用<code>setTimeout()</code>。</p>
-
-<pre class="brush: js">if (typeof window.queueMicrotask !== "function") {
-  window.queueMicrotask = function (callback) {
-    Promise.resolve()
-      .then(callback)
-      .catch(e =&gt; setTimeout(() =&gt; { throw e; }));
-  };
-}
-</pre>
-
-<h2 id="规范">规范</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th>Specification</th>
-   <th>Status</th>
-   <th>Comment</th>
-  </tr>
-  <tr>
-   <td>{{SpecName("HTML WHATWG", "timers-and-user-prompts.html#microtask-queuing", "self.queueMicrotask()")}}</td>
-   <td>{{Spec2("HTML WHATWG")}}</td>
-   <td>Initial definition</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="浏览器兼容性">浏览器兼容性</h2>
-
-<p>{{Compat("api.WindowOrWorkerGlobalScope.queueMicrotask")}}</p>
-
-<h2 id="参见">参见</h2>
-
-<ul>
- <li><a href="/en-US/docs/Web/API/HTML_DOM_API/Microtask_guide">Using microtasks in JavaScript with queueMicrotask()</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous">Asynchronous JavaScript</a></li>
- <li><a href="https://github.com/fergald/docs/blob/master/explainers/queueMicrotask.md">queueMicrotask explainer</a></li>
- <li><a href="https://jakearchibald.com/2015/tasks-microtasks-queues-and-schedules/">Tasks, microtasks, queues and schedules</a> by Jake Archibald</li>
-</ul>
diff --git a/files/zh-cn/web/api/windoworworkerglobalscope/setinterval/index.html b/files/zh-cn/web/api/windoworworkerglobalscope/setinterval/index.html
deleted file mode 100644
index d5a453b133..0000000000
--- a/files/zh-cn/web/api/windoworworkerglobalscope/setinterval/index.html
+++ /dev/null
@@ -1,636 +0,0 @@
----
-title: window.setInterval
-slug: Web/API/WindowOrWorkerGlobalScope/setInterval
-tags:
-  - API
-  - DOM
-  - 定时
-  - 方法
-  - 时间
-translation_of: Web/API/WindowOrWorkerGlobalScope/setInterval
-original_slug: Web/API/Window/setInterval
----
-<div>{{ ApiRef("HTML DOM") }}</div>
-
-<p>{{domxref("WindowOrWorkerGlobalScope")}} 的 <strong><code>setInterval()</code> </strong>方法重复调用一个函数或执行一个代码段，在每次调用之间具有固定的时间延迟。</p>
-
-<p><span class="seoSummary">在窗口和工作接口上提供的<strong>setInterval()</strong>方法重复调用函数或执行代码片段，每次调用之间有固定的时间延迟。它返回一个时间间隔ID，该ID唯一地标识时间间隔，因此您可以稍后通过调用<strong>clearInterval()</strong>来删除它。这个方法是由<strong>WindowOrWorkerGlobalScope mixin</strong>定义的。</span></p>
-
-<h2 id="语法">语法</h2>
-
-<pre class="syntaxbox notranslate"><em>var intervalID</em> = scope.setInterval(<em>func</em>, <em>delay</em>, [<em>arg1</em>, <em>arg2</em>, ...]);
-<em>var intervalID</em> = scope.setInterval(<em>code</em>, <em>delay</em>);
-</pre>
-
-<h3 id="参数">参数</h3>
-
-<dl>
- <dt><code>func</code></dt>
- <dd>要重复调用的函数。 每经过指定 <code>延迟</code> 毫秒后执行的{{jsxref("函数")}} 。该函数不接受任何参数，也没有返回值。</dd>
- <dt><code>code</code></dt>
- <dd>这个语法是可选的，你可以传递一个字符串来代替一个函数对象，你传递的字符串会被编译然后每个delay毫秒时间内执行一次。这个语法因为存在安全风险所以不被推荐使用。</dd>
- <dt><code>delay</code></dt>
- <dd>是每次延迟的毫秒数 (一秒等于1000毫秒)，函数的每次调用会在该延迟之后发生。和<a href="/en-US/docs/DOM/window.setTimeout#Minimum_delay_and_timeout_nesting" title="en-US/docs/DOM/window.setTimeout#Minimum delay and timeout nesting">setTimeout</a>一样，实际的延迟时间可能会稍长一点。这个时间计算单位是毫秒（千分之一秒），这个定时器会使指定方法或者代码段执行的时候进行时间延迟。如果这个参数值小于10，则默认使用值为10。请注意，真正延迟时间或许更长； 请参考示例： {{SectionOnPage("/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout", "Reasons for delays longer than specified")}} </dd>
- <dt><code>arg1, ..., argN</code> {{optional_inline}}</dt>
- <dd>当定时器过期的时候，将被传递给func指定函数的附加参数。</dd>
-</dl>
-
-<h3 id="返回值">返回值</h3>
-
-<p>此返回值<code>intervalID</code>是一个非零数值，用来标识通过<code>setInterval()</code>创建的计时器，这个值可以用来作为<code>clearInterval()</code>的参数来清除对应的计时器 。</p>
-
-<p>值得注意的是，<code>setInterval()</code>和<code>setTimeout()</code>共享同一个ID池，并且<code>clearInterval()</code>和<code>clearTimeout()</code>在技术上是可互换使用的。但是，我们必须去匹配<code>clearInterval()</code>和<code>clearTimeout()</code>对应的<code>id，以</code>避免代码杂乱无章，增强代码的可维护性。</p>
-
-<div class="note"><strong>Note</strong>: The <code>delay</code> argument is converted to a signed 32-bit integer. This effectively limits <code>delay</code> to 2147483647 ms, since it's specified as a signed integer in the IDL.</div>
-
-<h2 id="示例">示例</h2>
-
-<h3 id="例１：基本用法">例１：基本用法</h3>
-
-<p>下面例子是 <code>setInterval()</code>的基本语法</p>
-
-<pre class="brush:js notranslate">var intervalID = window.setInterval(myCallback, 500, 'Parameter 1', 'Parameter 2');
-
-function myCallback(a, b)
-{
- // Your code here
- // Parameters are purely optional.
- console.log(a);
- console.log(b);
-}
-</pre>
-
-<h3 id="例２：两种颜色的切换">例２：两种颜色的切换</h3>
-
-<p>下面的例子里会每隔一秒就调用函数 <code>flashtext()</code> 一次，直至你通过按下 Stop 按钮来清除本次重复操作的唯一辨识符 <code>intervalID</code>。</p>
-
-<pre class="brush:html notranslate">&lt;!DOCTYPE html&gt;
-&lt;html&gt;
-&lt;head&gt;
-  &lt;meta charset="UTF-8" /&gt;
-  &lt;title&gt;setInterval/clearInterval example&lt;/title&gt;
-
-  &lt;script&gt;
-    var nIntervId;
-
-    function changeColor() {
-      nIntervId = setInterval(flashText, 1000);
-    }
-
-    function flashText() {
-      var oElem = document.getElementById('my_box');
-      oElem.style.color = oElem.style.color == 'red' ? 'blue' : 'red';
-      // oElem.style.color == 'red' ? 'blue' : 'red' is a ternary operator.
-    }
-
-    function stopTextColor() {
-      clearInterval(nIntervId);
-    }
-  &lt;/script&gt;
-&lt;/head&gt;
-
-&lt;body onload="changeColor();"&gt;
-  &lt;div id="my_box"&gt;
-    &lt;p&gt;Hello World&lt;/p&gt;
-  &lt;/div&gt;
-
-  &lt;button onclick="stopTextColor();"&gt;Stop&lt;/button&gt;
-&lt;/body&gt;
-&lt;/html&gt;
-</pre>
-
-<h3 id="例３：打字机效果">例３：打字机效果</h3>
-
-<p>下面这个例子通过键入、删除和再次键入所有 <a href="/en-US/docs/DOM/NodeList"><code>NodeList</code></a> 中的符合特定的选择器的字符，以达到打字机的效果。</p>
-
-<div>
-<pre class="brush:html notranslate">&lt;!DOCTYPE html&gt;
-&lt;html&gt;
-&lt;head&gt;
-&lt;meta charset="UTF-8" /&gt;
-&lt;title&gt;JavaScript Typewriter - MDN Example&lt;/title&gt;
-&lt;script&gt;
-function Typewriter (sSelector, nRate) {
-
-  function clean () {
-    clearInterval(nIntervId);
-    bTyping = false;
-    bStart = true;
-    oCurrent = null;
-    aSheets.length = nIdx = 0;
-  }
-
-  function scroll (oSheet, nPos, bEraseAndStop) {
-    if (!oSheet.hasOwnProperty("parts") || aMap.length &lt; nPos) { return true; }
-
-    var oRel, bExit = false;
-
-    if (aMap.length === nPos) { aMap.push(0); }
-
-    while (aMap[nPos] &lt; oSheet.parts.length) {
-      oRel = oSheet.parts[aMap[nPos]];
-
-      scroll(oRel, nPos + 1, bEraseAndStop) ? aMap[nPos]++ : bExit = true;
-
-      if (bEraseAndStop &amp;&amp; (oRel.ref.nodeType - 1 | 1) === 3 &amp;&amp; oRel.ref.nodeValue) {
-        bExit = true;
-        oCurrent = oRel.ref;
-        sPart = oCurrent.nodeValue;
-        oCurrent.nodeValue = "";
-      }
-
-      oSheet.ref.appendChild(oRel.ref);
-      if (bExit) { return false; }
-    }
-
-    aMap.length--;
-    return true;
-  }
-
-  function typewrite () {
-    if (sPart.length === 0 &amp;&amp; scroll(aSheets[nIdx], 0, true) &amp;&amp; nIdx++ === aSheets.length - 1) { clean(); return; }
-
-    oCurrent.nodeValue += sPart.charAt(0);
-    sPart = sPart.slice(1);
-  }
-
-  function Sheet (oNode) {
-    this.ref = oNode;
-    if (!oNode.hasChildNodes()) { return; }
-    this.parts = Array.prototype.slice.call(oNode.childNodes);
-
-    for (var nChild = 0; nChild &lt; this.parts.length; nChild++) {
-      oNode.removeChild(this.parts[nChild]);
-      this.parts[nChild] = new Sheet(this.parts[nChild]);
-    }
-  }
-
-  var
-    nIntervId, oCurrent = null, bTyping = false, bStart = true,
-    nIdx = 0, sPart = "", aSheets = [], aMap = [];
-
-  this.rate = nRate || 100;
-
-  this.play = function () {
-    if (bTyping) { return; }
-    if (bStart) {
-      var aItems = document.querySelectorAll(sSelector);
-
-      if (aItems.length === 0) { return; }
-      for (var nItem = 0; nItem &lt; aItems.length; nItem++) {
-        aSheets.push(new Sheet(aItems[nItem]));
-        /* Uncomment the following line if you have previously hidden your elements via CSS: */
-        // aItems[nItem].style.visibility = "visible";
-      }
-
-      bStart = false;
-    }
-
-    nIntervId = setInterval(typewrite, this.rate);
-    bTyping = true;
-  };
-
-  this.pause = function () {
-    clearInterval(nIntervId);
-    bTyping = false;
-  };
-
-  this.terminate = function () {
-    oCurrent.nodeValue += sPart;
-    sPart = "";
-    for (nIdx; nIdx &lt; aSheets.length; scroll(aSheets[nIdx++], 0, false));
-    clean();
-  };
-}
-
-/* usage: */
-var oTWExample1 = new Typewriter(/* elements: */ "#article, h1, #info, #copyleft", /* frame rate (optional): */ 15);
-
-/* default frame rate is 100: */
-var oTWExample2 = new Typewriter("#controls");
-
-/* you can also change the frame rate value modifying the "rate" property; for example: */
-// oTWExample2.rate = 150;
-
-onload = function () {
-  oTWExample1.play();
-  oTWExample2.play();
-};
-&lt;/script&gt;
-&lt;style type="text/css"&gt;
-span.intLink, a, a:visited {
-  cursor: pointer;
-  color: #000000;
-  text-decoration: underline;
-}
-
-#info {
-  width: 180px;
-  height: 150px;
-  float: right;
-  background-color: #eeeeff;
-  padding: 4px;
-  overflow: auto;
-  font-size: 12px;
-  margin: 4px;
-  border-radius: 5px;
-  /* visibility: hidden; */
-}
-&lt;/style&gt;
-&lt;/head&gt;
-
-&lt;body&gt;
-
-&lt;p id="copyleft" style="font-style: italic; font-size: 12px; text-align: center;"&gt;CopyLeft 2012 by &lt;a href="https://developer.mozilla.org/" target="_blank"&gt;Mozilla Developer Network&lt;/a&gt;&lt;/p&gt;
-&lt;p id="controls" style="text-align: center;"&gt;[&amp;nbsp;&lt;span class="intLink" onclick="oTWExample1.play();"&gt;Play&lt;/span&gt; | &lt;span class="intLink" onclick="oTWExample1.pause();"&gt;Pause&lt;/span&gt; | &lt;span class="intLink" onclick="oTWExample1.terminate();"&gt;Terminate&lt;/span&gt;&amp;nbsp;]&lt;/p&gt;
-&lt;div id="info"&gt;
-Vivamus blandit massa ut metus mattis in fringilla lectus imperdiet. Proin ac ante a felis ornare vehicula. Fusce pellentesque lacus vitae eros convallis ut mollis magna pellentesque. Pellentesque placerat enim at lacus ultricies vitae facilisis nisi fringilla. In tincidunt tincidunt tincidunt.
-&lt;/div&gt;
-&lt;h1&gt;JavaScript Typewriter&lt;/h1&gt;
-
-&lt;div id="article"&gt;
-&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ultrices dolor ac dolor imperdiet ullamcorper. Suspendisse quam libero, luctus auctor mollis sed, malesuada condimentum magna. Quisque in ante tellus, in placerat est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec a mi magna, quis mattis dolor. Etiam sit amet ligula quis urna auctor imperdiet nec faucibus ante. Mauris vel consectetur dolor. Nunc eget elit eget velit pulvinar fringilla consectetur aliquam purus. Curabitur convallis, justo posuere porta egestas, velit erat ornare tortor, non viverra justo diam eget arcu. Phasellus adipiscing fermentum nibh ac commodo. Nam turpis nunc, suscipit a hendrerit vitae, volutpat non ipsum.&lt;/p&gt;
-&lt;form&gt;
-&lt;p&gt;Phasellus ac nisl lorem: &lt;input type="text" /&gt;&lt;br /&gt;
-&lt;textarea style="width: 400px; height: 200px;"&gt;Nullam commodo suscipit lacus non aliquet. Phasellus ac nisl lorem, sed facilisis ligula. Nam cursus lobortis placerat. Sed dui nisi, elementum eu sodales ac, placerat sit amet mauris. Pellentesque dapibus tellus ut ipsum aliquam eu auctor dui vehicula. Quisque ultrices laoreet erat, at ultrices tortor sodales non. Sed venenatis luctus magna, ultricies ultricies nunc fringilla eget. Praesent scelerisque urna vitae nibh tristique varius consequat neque luctus. Integer ornare, erat a porta tempus, velit justo fermentum elit, a fermentum metus nisi eu ipsum. Vivamus eget augue vel dui viverra adipiscing congue ut massa. Praesent vitae eros erat, pulvinar laoreet magna. Maecenas vestibulum mollis nunc in posuere. Pellentesque sit amet metus a turpis lobortis tempor eu vel tortor. Cras sodales eleifend interdum.&lt;/textarea&gt;&lt;/p&gt;
-&lt;input type="submit" value="Send" /&gt;
-&lt;/form&gt;
-&lt;p&gt;Duis lobortis sapien quis nisl luctus porttitor. In tempor semper libero, eu tincidunt dolor eleifend sit amet. Ut nec velit in dolor tincidunt rhoncus non non diam. Morbi auctor ornare orci, non euismod felis gravida nec. Curabitur elementum nisi a eros rutrum nec blandit diam placerat. Aenean tincidunt risus ut nisi consectetur cursus. Ut vitae quam elit. Donec dignissim est in quam tempor consequat. Aliquam aliquam diam non felis convallis suscipit. Nulla facilisi. Donec lacus risus, dignissim et fringilla et, egestas vel eros. Duis malesuada accumsan dui, at fringilla mauris bibStartum quis. Cras adipiscing ultricies fermentum. Praesent bibStartum condimentum feugiat.&lt;/p&gt;
-&lt;p&gt;Nam faucibus, ligula eu fringilla pulvinar, lectus tellus iaculis nunc, vitae scelerisque metus leo non metus. Proin mattis lobortis lobortis. Quisque accumsan faucibus erat, vel varius tortor ultricies ac. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec libero nunc. Nullam tortor nunc, elementum a consectetur et, ultrices eu orci. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a nisl eu sem vehicula egestas.&lt;/p&gt;
-&lt;/div&gt;
-&lt;/body&gt;
-&lt;/html&gt;</pre>
-</div>
-
-<p><a href="/files/3997/typewriter.html">查看示例效果</a>，亦可参考：<a href="https://developer.mozilla.org/zh-CN/docs/DOM/window.clearInterval" title="en-US/docs/DOM/window.clearInterval"><code>clearInterval()</code></a>。</p>
-
-<h2 id="回调参数">回调参数</h2>
-
-<p>如前所述，Internet Explorer 9及以下版本不支持在<code>setTimeout()</code>或<code>setInterval()</code>中向回调函数传递参数。下面的IE专用代码演示了一种克服这种限制的方法。使用时，只需将以下代码添加到你的脚本顶部即可。</p>
-
-<pre class="brush:js notranslate">/*\
-|*|
-|*|  IE-specific polyfill that enables the passage of arbitrary arguments to the
-|*|  callback functions of javascript timers (HTML5 standard syntax).
-|*|
-|*|  https://developer.mozilla.org/en-US/docs/Web/API/window.setInterval
-|*|  https://developer.mozilla.org/User:fusionchess
-|*|
-|*|  Syntax:
-|*|  var timeoutID = window.setTimeout(func, delay[, arg1, arg2, ...]);
-|*|  var timeoutID = window.setTimeout(code, delay);
-|*|  var intervalID = window.setInterval(func, delay[, arg1, arg2, ...]);
-|*|  var intervalID = window.setInterval(code, delay);
-|*|
-\*/
-
-if (document.all &amp;&amp; !window.setTimeout.isPolyfill) {
-  var __nativeST__ = window.setTimeout;
-  window.setTimeout = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) {
-    var aArgs = Array.prototype.slice.call(arguments, 2);
-    return __nativeST__(vCallback instanceof Function ? function () {
-      vCallback.apply(null, aArgs);
-    } : vCallback, nDelay);
-  };
-  window.setTimeout.isPolyfill = true;
-}
-
-if (document.all &amp;&amp; !window.setInterval.isPolyfill) {
-  var __nativeSI__ = window.setInterval;
-  window.setInterval = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) {
-    var aArgs = Array.prototype.slice.call(arguments, 2);
-    return __nativeSI__(vCallback instanceof Function ? function () {
-      vCallback.apply(null, aArgs);
-    } : vCallback, nDelay);
-  };
-  window.setInterval.isPolyfill = true;
-}
-</pre>
-
-<p>另一种方式是使用匿名函数调用你的回调函数，但是这种方式开销较大。例如：</p>
-
-<pre class="brush:js notranslate">var intervalID = setInterval(function() { myFunc('one', 'two', 'three'); }, 1000);</pre>
-
-<p>还有一种方式是使用 <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Function/bind" title="/en-US/docs/JavaScript/Reference/Global_Objects/Function/bind">function's bind</a>. 例如：</p>
-
-<pre class="brush:js notranslate">var intervalID = setInterval(function(arg1) {}.bind(undefined, 10), 1000);</pre>
-
-<p>{{h3_gecko_minversion("Inactive tabs", "5.0")}}</p>
-
-<p>Starting in Gecko 5.0 {{geckoRelease("5.0")}}, intervals are clamped to fire no more often than once per second in inactive tabs.</p>
-
-<h2 id="this_的问题">"<a href="/en-US/docs/Web/JavaScript/Reference/Operators/this"><code>this</code></a>" 的问题</h2>
-
-<p>当你给 <code>setInterval()</code> 传递一个方法或者函数的时候，<a href="/en-US/docs/Web/JavaScript/Reference/Operators/this"><code>this</code></a> 值的绑定会存在一些问题。  这个问题在<a href="/en-US/docs/Web/JavaScript/Reference/Operators/this#As_an_object_method">JavaScript 参考</a> 进行了详细解释。</p>
-
-<h3 id="解释">解释</h3>
-
-<p>Code executed by <code>setInterval()</code> runs in a separate execution context than the function from which it was called. As a consequence, the <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this"><code>this</code></a> keyword for the called function is set to the <code>window</code> (or <code>global</code>) object, it is not the same as the <code>this</code> value for the function that called <code>setTimeout</code>. See the following example (which uses <code>setTimeout()</code> instead of <code>setInterval()</code> – the problem, in fact, is the same for both timers):</p>
-
-<pre class="brush:js notranslate">myArray = ['zero', 'one', 'two'];
-
-myArray.myMethod = function (sProperty) {
-    alert(arguments.length &gt; 0 ? this[sProperty] : this);
-};
-
-myArray.myMethod(); // prints "zero,one,two"
-myArray.myMethod(1); // prints "one"
-setTimeout(myArray.myMethod, 1000); // prints "[object Window]" after 1 second
-setTimeout(myArray.myMethod, 1500, "1"); // prints "undefined" after 1,5 seconds
-// passing the 'this' object with .call won't work
-// because this will change the value of this inside setTimeout itself
-// while we want to change the value of this inside myArray.myMethod
-// in fact, it will be an error because setTimeout code expects this to be the window object:
-setTimeout.call(myArray, myArray.myMethod, 2000); // error: "NS_ERROR_XPC_BAD_OP_ON_WN_PROTO: Illegal operation on WrappedNative prototype object"
-setTimeout.call(myArray, myArray.myMethod, 2500, 2); // same error
-</pre>
-
-<p>As you can see there are no ways to pass the <code>this</code> object to the callback function in the legacy JavaScript.</p>
-
-<h3 id="一个可能的解决方案">一个可能的解决方案</h3>
-
-<p>A possible way to solve the "<code>this</code>" problem is to replace the two native <code>setTimeout()</code> or <code>setInterval()</code> global functions with two <em>non-native</em> ones that enable their invocation through the <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Function/call"><code>Function.prototype.call</code></a> method. The following example shows a possible replacement:</p>
-
-<pre class="brush:js notranslate">// Enable the passage of the 'this' object through the JavaScript timers
-
-var __nativeST__ = window.setTimeout, __nativeSI__ = window.setInterval;
-
-window.setTimeout = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) {
-  var oThis = this, aArgs = Array.prototype.slice.call(arguments, 2);
-  return __nativeST__(vCallback instanceof Function ? function () {
-    vCallback.apply(oThis, aArgs);
-  } : vCallback, nDelay);
-};
-
-window.setInterval = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) {
-  var oThis = this, aArgs = Array.prototype.slice.call(arguments, 2);
-  return __nativeSI__(vCallback instanceof Function ? function () {
-    vCallback.apply(oThis, aArgs);
-  } : vCallback, nDelay);
-};</pre>
-
-<div class="note">These two replacements also enable the HTML5 standard passage of arbitrary arguments to the callback functions of timers in IE. So they can be used as <em>non-standard-compliant</em> polyfills also. See the <a href="#Callback_arguments">callback arguments paragraph</a> for a <em>standard-compliant</em> polyfill.</div>
-
-<p>New feature test:</p>
-
-<pre class="brush:js notranslate">myArray = ['zero', 'one', 'two'];
-
-myArray.myMethod = function (sProperty) {
-    alert(arguments.length &gt; 0 ? this[sProperty] : this);
-};
-
-setTimeout(alert, 1500, 'Hello world!'); // the standard use of setTimeout and setInterval is preserved, but...
-setTimeout.call(myArray, myArray.myMethod, 2000); // prints "zero,one,two" after 2 seconds
-setTimeout.call(myArray, myArray.myMethod, 2500, 2); // prints "two" after 2,5 seconds
-</pre>
-
-<p>Another, more complex, solution for<strong> </strong>the <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this"><code>this</code></a> problem<strong> </strong>is <a href="#MiniDaemon_-_A_framework_for_managing_timers">the following framework</a>.</p>
-
-<div class="note">JavaScript 1.8.5 introduces the <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind">Function.prototype.bind()</a></code> method, which lets you specify the value that should be used as <code>this</code> for all calls to a given function. This lets you easily bypass problems where it's unclear what this will be, depending on the context from which your function was called. Also, ES2015 supports <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions">arrow functions</a>, with lexical this allowing us to write setInterval( () =&gt; this.myMethod) if we're inside myArray method.</div>
-
-<h2 id="MiniDaemon：一个用于管理定时器的小框架">MiniDaemon：一个用于管理定时器的小框架</h2>
-
-<p>In pages requiring many timers, it can often be difficult to keep track of all of the running timer events. One approach to solving this problem is to store information about the state of a timer in an object. Following is a minimal example of such an abstraction. The constructor architecture explicitly avoids the use of closures. It also offers an alternative way to pass the <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this"><code>this</code></a> object to the callback function (see <a href="#The_.22this.22_problem">The "this" problem</a> for details). The following code is also <a href="https://github.com/madmurphy/minidaemon.js">available on GitHub</a>.</p>
-
-<div class="note">For a more complex but still modular version of it (<code><em>Daemon</em></code>) see <a href="/en-US/Add-ons/Code_snippets/Timers/Daemons">JavaScript Daemons Management</a>. This more complex version is nothing but a big and scalable collection of methods for the <code><em>Daemon</em></code> constructor. However, the <code><em>Daemon</em></code> constructor itself is nothing but a clone of <code><em>MiniDaemon</em></code> with an added support for <em>init</em> and <em>onstart</em> functions declarable during the instantiation of the <code><em>daemon</em></code>. <strong>So the <code><em>MiniDaemon</em></code> framework remains the recommended way for simple animations</strong>, because <code><em>Daemon</em></code> without its collection of methods is essentially a clone of it.</div>
-
-<h3 id="minidaemon.js">minidaemon.js</h3>
-
-<div>
-<pre class="brush:js notranslate">/*\
-|*|
-|*|  :: MiniDaemon ::
-|*|
-|*|  Revision #2 - September 26, 2014
-|*|
-|*|  https://developer.mozilla.org/en-US/docs/Web/API/window.setInterval
-|*|  https://developer.mozilla.org/User:fusionchess
-|*|  https://github.com/madmurphy/minidaemon.js
-|*|
-|*|  This framework is released under the GNU Lesser General Public License, version 3 or later.
-|*|  http://www.gnu.org/licenses/lgpl-3.0.html
-|*|
-\*/
-
-function MiniDaemon (oOwner, fTask, nRate, nLen) {
-  if (!(this &amp;&amp; this instanceof MiniDaemon)) { return; }
-  if (arguments.length &lt; 2) { throw new TypeError('MiniDaemon - not enough arguments'); }
-  if (oOwner) { this.owner = oOwner; }
-  this.task = fTask;
-  if (isFinite(nRate) &amp;&amp; nRate &gt; 0) { this.rate = Math.floor(nRate); }
-  if (nLen &gt; 0) { this.length = Math.floor(nLen); }
-}
-
-MiniDaemon.prototype.owner = null;
-MiniDaemon.prototype.task = null;
-MiniDaemon.prototype.rate = 100;
-MiniDaemon.prototype.length = Infinity;
-
-  /* These properties should be read-only */
-
-MiniDaemon.prototype.SESSION = -1;
-MiniDaemon.prototype.INDEX = 0;
-MiniDaemon.prototype.PAUSED = true;
-MiniDaemon.prototype.BACKW = true;
-
-  /* Global methods */
-
-MiniDaemon.forceCall = function (oDmn) {
-  oDmn.INDEX += oDmn.BACKW ? -1 : 1;
-  if (oDmn.task.call(oDmn.owner, oDmn.INDEX, oDmn.length, oDmn.BACKW) === false || oDmn.isAtEnd()) { oDmn.pause(); return false; }
-  return true;
-};
-
-  /* Instances methods */
-
-MiniDaemon.prototype.isAtEnd = function () {
-  return this.BACKW ? isFinite(this.length) &amp;&amp; this.INDEX &lt; 1 : this.INDEX + 1 &gt; this.length;
-};
-
-MiniDaemon.prototype.synchronize = function () {
-  if (this.PAUSED) { return; }
-  clearInterval(this.SESSION);
-  this.SESSION = setInterval(MiniDaemon.forceCall, this.rate, this);
-};
-
-MiniDaemon.prototype.pause = function () {
-  clearInterval(this.SESSION);
-  this.PAUSED = true;
-};
-
-MiniDaemon.prototype.start = function (bReverse) {
-  var bBackw = Boolean(bReverse);
-  if (this.BACKW === bBackw &amp;&amp; (this.isAtEnd() || !this.PAUSED)) { return; }
-  this.BACKW = bBackw;
-  this.PAUSED = false;
-  this.synchronize();
-};
-</pre>
-</div>
-
-<div class="note">MiniDaemon passes arguments to the callback function. If you want to work on it with browsers that natively do not support this feature, use one of the methods proposed above.</div>
-
-<h3 id="语法_2">语法</h3>
-
-<p><code>var myDaemon = new MiniDaemon(<em>thisObject</em>, <em>callback</em>[</code><code>, <em>rate</em></code><code>[, <em>length</em>]]);</code></p>
-
-<h3 id="说明">说明</h3>
-
-<p>Returns a JavaScript <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object"><code>Object</code></a> containing all information needed by an animation (like the <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this"><code>this</code></a> object, the callback function, the length, the frame-rate).</p>
-
-<h4 id="参数_2">参数</h4>
-
-<dl>
- <dt><code>thisObject</code></dt>
- <dd>The <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this"><code>this</code></a> object on which the <em>callback</em> function is called. It can be an <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object"><code>object</code></a> or <code>null</code>.</dd>
- <dt><code>callback</code></dt>
- <dd>The function that is repeatedly invoked . <strong>It is called with three arguments</strong>: <em>index</em> (the iterative index of each invocation), <em>length</em> (the number of total invocations assigned to the <em>daemon</em> - finite or <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Infinity"><code>Infinity</code></a>) and <em>backwards</em> (a boolean expressing whether the <em>index</em> is increasing or decreasing). It is something like <em>callback</em>.call(<em>thisObject</em>, <em>index</em>, <em>length</em>, <em>backwards</em>). <strong>If the callback function returns a <code>false</code> value the <em>daemon</em> is paused</strong>.</dd>
- <dt><code>rate (optional)</code></dt>
- <dd>The time lapse (in number of milliseconds) between each invocation. The default value is 100.</dd>
- <dt><code>length (optional)</code></dt>
- <dd>The total number of invocations. It can be a positive integer or <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Infinity"><code>Infinity</code></a>. The default value is <code>Infinity</code>.</dd>
-</dl>
-
-<h4 id="MiniDaemon_实例（instance）的属性"><code>MiniDaemon</code> 实例（instance）的属性</h4>
-
-<dl>
- <dt><code>myDaemon.owner</code></dt>
- <dd>The <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this"><code>this</code></a> object on which is executed the daemon (read/write). It can be an <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object"><code>object</code></a> or <code>null</code>.</dd>
- <dt><code>myDaemon.task</code></dt>
- <dd>The function that is repeatedly invoked (read/write). It is called with three arguments: <em>index</em> (the iterative index of each invocation), <em>length</em> (the number of total invocations assigned to the daemon - finite or <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Infinity"><code>Infinity</code></a>) and backwards (a boolean expressing whether the <em>index</em> is decreasing or not) – see above. If the <code>myDaemon.task</code> function returns a <code>false</code> value the <em>daemon</em> is paused.</dd>
- <dt><code>myDaemon.rate</code></dt>
- <dd>The time lapse (in number of milliseconds) between each invocation (read/write).</dd>
- <dt><code>myDaemon.length</code></dt>
- <dd>The total number of invocations. It can be a positive integer or <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Infinity"><code>Infinity</code></a> (read/write).</dd>
-</dl>
-
-<h4 id="MiniDaemon_实例的方法"><code>MiniDaemon</code> 实例的方法</h4>
-
-<dl>
- <dt><code>myDaemon.isAtEnd()</code></dt>
- <dd>Returns a boolean expressing whether the <em>daemon</em> is at the start/end position or not.</dd>
- <dt><code>myDaemon.synchronize()</code></dt>
- <dd>Synchronize the timer of a started daemon with the time of its invocation.</dd>
- <dt><code>myDaemon.pause()</code></dt>
- <dd>Pauses the daemon.</dd>
- <dt><code>myDaemon.start([<em>reverse</em>])</code></dt>
- <dd>Starts the daemon forward (<em>index</em> of each invocation increasing) or backwards (<em>index</em> decreasing).</dd>
-</dl>
-
-<h4 id="MiniDaemon_全局对象的方法"><code>MiniDaemon</code> 全局对象的方法</h4>
-
-<dl>
- <dt><code>MiniDaemon.forceCall(<em>minidaemon</em>)</code></dt>
- <dd>Forces a single callback to the <code><em>minidaemon</em>.task</code> function regardless of the fact that the end has been reached or not. In any case the internal <code>INDEX</code> property is increased/decreased (depending on the actual direction of the process).</dd>
-</dl>
-
-<h3 id="使用示例">使用示例</h3>
-
-<p>HTML：</p>
-
-<pre class="brush:html notranslate">&lt;!DOCTYPE html&gt;
-&lt;html&gt;
-&lt;head&gt;
-  &lt;meta charset="UTF-8" /&gt;
-  &lt;title&gt;MiniDaemin Example - MDN&lt;/title&gt;
-  &lt;script type="text/javascript" src="minidaemon.js"&gt;&lt;/script&gt;
-  &lt;style type="text/css"&gt;
-    #sample_div {
-      visibility: hidden;
-    }
-  &lt;/style&gt;
-&lt;/head&gt;
-
-&lt;body&gt;
-  &lt;p&gt;
-    &lt;input type="button" onclick="fadeInOut.start(false /* optional */);" value="fade in" /&gt;
-    &lt;input type="button" onclick="fadeInOut.start(true);" value="fade out"&gt;
-    &lt;input type="button" onclick="fadeInOut.pause();" value="pause" /&gt;
-  &lt;/p&gt;
-
-  &lt;div id="sample_div"&gt;Some text here&lt;/div&gt;
-
-  &lt;script type="text/javascript"&gt;
-    function opacity (nIndex, nLength, bBackwards) {
-      this.style.opacity = nIndex / nLength;
-      if (bBackwards ? nIndex === 0 : nIndex === 1) {
-        this.style.visibility = bBackwards ? 'hidden' : 'visible';
-      }
-    }
-
-    var fadeInOut = new MiniDaemon(document.getElementById('sample_div'), opacity, 300, 8);
-  &lt;/script&gt;
-&lt;/body&gt;
-&lt;/html&gt;</pre>
-
-<p><a href="/files/3995/minidaemon_example.html" title="MiniDaemon Example">View this example in action</a></p>
-
-<h2 id="备注">备注</h2>
-
-<p>The <code>setInterval()</code> function is commonly used to set a delay for functions that are executed again and again, such as animations.</p>
-
-<p>You can cancel the interval using {{domxref("WindowOrWorkerGlobalScope.clearInterval()")}}.</p>
-
-<p>If you wish to have your function called <em>once</em> after the specified delay, use {{domxref("WindowOrWorkerGlobalScope.setTimeout()")}}.</p>
-
-<h3 id="Ensure_that_execution_duration_is_shorter_than_interval_frequency">Ensure that execution duration is shorter than interval frequency</h3>
-
-<p>If there is a possibility that your logic could take longer to execute than the interval time, it is recommended that you recursively call a named function using {{domxref("WindowOrWorkerGlobalScope.setTimeout")}}. For example, if using <code>setInterval</code> to poll a remote server every 5 seconds, network latency, an unresponsive server, and a host of other issues could prevent the request from completing in its allotted time. As such, you may find yourself with queued up XHR requests that won't necessarily return in order.</p>
-
-<p>In these cases, a recursive <code>setTimeout()</code> pattern is preferred:</p>
-
-<pre class="brush:js notranslate">(function loop(){
-   setTimeout(function() {
-      // Your logic here
-
-      loop();
-  }, delay);
-})();
-</pre>
-
-<p>In the above snippet, a named function <code>loop()</code> is declared and is immediately executed. <code>loop()</code> is recursively called inside <code>setTimeout()</code> after the logic has completed executing. While this pattern does not guarantee execution on a fixed interval, it does guarantee that the previous interval has completed before recursing.</p>
-
-<h3 id="Throttling_of_intervals">Throttling of intervals</h3>
-
-<p><code>setInterval()</code> is subject to the same throttling restrictions in Firefox as {{domxref("WindowOrWorkerGlobalScope.setTimeout","setTimeout()")}}; see <a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout#Reasons_for_delays_longer_than_specified">Reasons for delays longer than specified</a>.</p>
-
-<h2 id="规范">规范</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th>Specification</th>
-   <th>Status</th>
-   <th>Comment</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', 'webappapis.html#dom-setinterval', 'WindowOrWorkerGlobalScope.setInterval()')}}</td>
-   <td>{{Spec2("HTML WHATWG")}}</td>
-   <td>Method moved to the <code>WindowOrWorkerGlobalScope</code> mixin in the latest spec.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName("HTML WHATWG", "webappapis.html#dom-setinterval", "WindowTimers.setInterval()")}}</td>
-   <td>{{Spec2("HTML WHATWG")}}</td>
-   <td>Initial definition (DOM Level 0)</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="浏览器兼容性">浏览器兼容性</h2>
-
-<div>
-
-
-<p>{{Compat("api.WindowOrWorkerGlobalScope.setInterval")}}</p>
-</div>
-
-<h2 id="参见">参见</h2>
-
-<ul>
- <li><a href="/en-US/Add-ons/Code_snippets/Timers">JavaScript 定时器</a></li>
- <li>{{domxref("WindowOrWorkerGlobalScope.setTimeout")}}</li>
- <li>{{domxref("WindowOrWorkerGlobalScope.clearTimeout")}}</li>
- <li>{{domxref("WindowOrWorkerGlobalScope.clearInterval")}}</li>
- <li>{{domxref("window.requestAnimationFrame")}}</li>
- <li><a href="/en-US/Add-ons/Code_snippets/Timers/Daemons"><em>Daemons</em> management</a></li>
-</ul>
diff --git a/files/zh-cn/web/api/windoworworkerglobalscope/settimeout/index.html b/files/zh-cn/web/api/windoworworkerglobalscope/settimeout/index.html
deleted file mode 100644
index d0c80bb95b..0000000000
--- a/files/zh-cn/web/api/windoworworkerglobalscope/settimeout/index.html
+++ /dev/null
@@ -1,477 +0,0 @@
----
-title: window.setTimeout
-slug: Web/API/WindowOrWorkerGlobalScope/setTimeout
-tags:
-  - Timers
-  - WindowOrWorkerGlobalScope
-  - WindowTimers
-  - setTimeout
-translation_of: Web/API/WindowOrWorkerGlobalScope/setTimeout
-original_slug: Web/API/Window/setTimeout
----
-<p>{{APIRef("HTML DOM")}}</p>
-
-<p> {{domxref("WindowOrWorkerGlobalScope")}} 混合的 <strong><code>setTimeout()</code></strong>方法设置一个定时器，该定时器在定时器到期后执行一个函数或指定的一段代码。</p>
-
-<h2 id="Syntax" name="Syntax">语法</h2>
-
-<pre class="syntaxbox notranslate"><code>var<em> </em>timeoutID = <em>scope</em>.setTimeout(<em>function</em>[<em>,</em> <em>delay, arg1, arg2</em>, ...]);
-var timeoutID = <em>scope</em>.setTimeout(function[, <em>delay</em>]);
-var<em> </em>timeoutID = <em>scope</em>.setTimeout(<em>code</em>[, <em>delay</em>]);</code></pre>
-
-<h3 id="参数">参数</h3>
-
-<dl>
- <dt><code>function</code></dt>
- <dd>{{jsxref("function")}} 是你想要在到期时间(<code>delay</code>毫秒)之后执行的<a href="https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Function" title="en-US/docs/Core_JavaScript_1.5_Reference/Global_Objects/Function">函数</a>。</dd>
- <dt><code>code</code></dt>
- <dd>这是一个可选语法，你可以使用字符串而不是{{jsxref("function")}} ，在<code>delay</code>毫秒之后编译和执行字符串 (使用该语法是<strong>不推荐的,</strong> 原因和使用 {{jsxref("Global_Objects/eval", "eval()")}}一样，有安全风险)。</dd>
- <dt><code>delay</code> {{optional_inline}}</dt>
- <dd>延迟的毫秒数 (一秒等于1000毫秒)，函数的调用会在该延迟之后发生。如果省略该参数，delay取默认值0，意味着“马上”执行，或者尽快执行。不管是哪种情况，实际的延迟时间可能会比期待的(delay毫秒数) 值长，原因请查看{{anch("实际延时比设定值更久的原因：最小延迟时间")}}。</dd>
- <dt><code>arg1, ..., argN</code> {{optional_inline}}</dt>
- <dd>附加参数，一旦定时器到期，它们会作为参数传递给{{jsxref("function")}} </dd>
-</dl>
-
-<div class="note">
-<p><strong>备注</strong>：需要注意的是，IE9 及更早的 IE 浏览器不支持向回调函数传递额外参数(第一种语法)。如果你想要在IE中达到同样的功能,你必须使用一种兼容代码 (查看  {{anch("兼容旧环境（polyfill）")}} 一段).</p>
-</div>
-
-<h3 id="Examples" name="Examples">返回值</h3>
-
-<p>返回值<code>timeoutID</code>是一个正整数，表示定时器的编号。这个值可以传递给{{domxref("WindowOrWorkerGlobalScope.clearTimeout","clearTimeout()")}}来取消该定时器。</p>
-
-<p>需要注意的是<code>setTimeout()</code>和{{domxref("WindowOrWorkerGlobalScope.setInterval", "setInterval()")}}共用一个编号池，技术上，<code>clearTimeout()</code>和 {{domxref("WindowOrWorkerGlobalScope.clearInterval", "clearInterval()")}} 可以互换。但是，为了避免混淆，不要混用取消定时函数。</p>
-
-<p>在同一个对象上（一个window或者worker），<code>setTimeout()</code>或者<code>setInterval()</code>在后续的调用不会重用同一个定时器编号。但是不同的对象使用独立的编号池。</p>
-
-<h2 id="例子">例子</h2>
-
-<p>下文的例子在网页中设置了两个简单的按钮，以触发 <code>setTimeout()</code> 和 <code>clearTimeout()</code> 方法：按下第一个按钮会设置一个定时器，定时器在 2s 后显示一个警告对话框，并将此次 setTimeout 的定时器 ID 保存起来，按下第二个按钮可以取消定时器。</p>
-
-<h3 id="HTML" style="line-height: 24px; font-size: 1.71428571428571rem;">HTML</h3>
-
-<pre class="brush: html notranslate">&lt;p&gt;Live Example&lt;/p&gt;
-&lt;button onclick="delayedAlert();"&gt;Show an alert box after two seconds&lt;/button&gt;
-&lt;p&gt;&lt;/p&gt;
-&lt;button onclick="clearAlert();"&gt;Cancel alert before it happens&lt;/button&gt;
-</pre>
-
-<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 0px; background: 0px 0px;"></div>
-
-<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 19px; background: 0px 0px;"></div>
-
-<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 38px; background: 0px 0px;"></div>
-
-<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 57px; background: 0px 0px;"></div>
-
-<h3 id="JavaScript" style="line-height: 24px; font-size: 1.71428571428571rem;">JavaScript</h3>
-
-<pre class="brush: js notranslate">var timeoutID;
-
-function delayedAlert() {
-  timeoutID = window.setTimeout(slowAlert, 2000);
-}
-
-function slowAlert() {
-  alert('That was really slow!');
-}
-
-function clearAlert() {
-  window.clearTimeout(timeoutID);
-}
-</pre>
-
-<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 0px; background: 0px 0px;"></div>
-
-<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 19px; background: 0px 0px;"></div>
-
-<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 38px; background: 0px 0px;"></div>
-
-<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 57px; background: 0px 0px;"></div>
-
-<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 76px; background: 0px 0px;"></div>
-
-<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 95px; background: 0px 0px;"></div>
-
-<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 114px; background: 0px 0px;"></div>
-
-<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 133px; background: 0px 0px;"></div>
-
-<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 152px; background: 0px 0px;"></div>
-
-<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 171px; background: 0px 0px;"></div>
-
-<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 190px; background: 0px 0px;"></div>
-
-<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 209px; background: 0px 0px;"></div>
-
-<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 228px; background: 0px 0px;"></div>
-
-<h3 id="结果展示">结果展示</h3>
-
-<p>{{EmbedLiveSample('例子')}}</p>
-
-<p>也可参考 <a href="/en-US/docs/DOM/window.clearTimeout#Example" title="en-US/docs/DOM/window.clearTimeout#Example"><code>clearTimeout()</code> </a>示例.</p>
-
-<h2 id="兼容旧环境（polyfill）">兼容旧环境（polyfill）</h2>
-
-<p>如果你需要向你的回调函数内传递一个或多个参数, 而且还需要兼容那些不支持传递额外参数(不管使用<code>setTimeout()</code> 或者 <code>setInterval()</code>)的浏览器时(比如，IE9及更早的版本), 你可以引入下面的兼容代码来支持向定时器函数传参。将以下代码添加到你代码的最上面：</p>
-
-<pre class="brush: js notranslate">/*\
-|*|
-|*|  Polyfill which enables the passage of arbitrary arguments to the
-|*|  callback functions of JavaScript timers (HTML5 standard syntax).
-|*|
-|*|  https://developer.mozilla.org/en-US/docs/DOM/window.setInterval
-|*|
-|*|  Syntax:
-|*|  var timeoutID = window.setTimeout(func, delay[, param1, param2, ...]);
-|*|  var timeoutID = window.setTimeout(code, delay);
-|*|  var intervalID = window.setInterval(func, delay[, param1, param2, ...]);
-|*|  var intervalID = window.setInterval(code, delay);
-|*|
-\*/
-
-(function() {
-  setTimeout(function(arg1) {
-    if (arg1 === 'test') {
-      // feature test is passed, no need for polyfill
-      return;
-    }
-    var __nativeST__ = window.setTimeout;
-    window.setTimeout = function(vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */ ) {
-      var aArgs = Array.prototype.slice.call(arguments, 2);
-      return __nativeST__(vCallback instanceof Function ? function() {
-        vCallback.apply(null, aArgs);
-      } : vCallback, nDelay);
-    };
-  }, 0, 'test');
-
-  var interval = setInterval(function(arg1) {
-    clearInterval(interval);
-    if (arg1 === 'test') {
-      // feature test is passed, no need for polyfill
-      return;
-    }
-    var __nativeSI__ = window.setInterval;
-    window.setInterval = function(vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */ ) {
-      var aArgs = Array.prototype.slice.call(arguments, 2);
-      return __nativeSI__(vCallback instanceof Function ? function() {
-        vCallback.apply(null, aArgs);
-      } : vCallback, nDelay);
-    };
-  }, 0, 'test');
-}())</pre>
-
-<h3 id="针对IE的解决方法">针对IE的解决方法</h3>
-
-<p>如果你需要单独的针对IE9及之前浏览器的 hack 写法，你可以使用 JavaScript 条件注释：</p>
-
-<pre class="brush: js notranslate">/*@cc_on
-  // conditional IE &lt; 9 only fix
-  @if (@_jscript_version &lt;= 9)
-  (function(f){
-     window.setTimeout = f(window.setTimeout);
-     window.setInterval = f(window.setInterval);
-  })(function(f){return function(c,t){var a=[].slice.call(arguments,2);return f(function(){c instanceof Function?c.apply(this,a):eval(c)},t)}});
-  @end
-@*/</pre>
-
-<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 0px; background: 0px 0px;"></div>
-
-<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 19px; background: 0px 0px;"></div>
-
-<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 38px; background: 0px 0px;"></div>
-
-<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 57px; background: 0px 0px;"></div>
-
-<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 76px; background: 0px 0px;"></div>
-
-<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 95px; background: 0px 0px;"></div>
-
-<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 114px; background: 0px 0px;"></div>
-
-<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 133px; background: 0px 0px;"></div>
-
-<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 152px; background: 0px 0px;"></div>
-
-<p>或者使用更加清晰的 IE HTML 条件注释：</p>
-
-<pre class="brush: html notranslate">&lt;!--[if lte IE 9]&gt;&lt;script&gt;
-(function(f){
-window.setTimeout=f(window.setTimeout);
-window.setInterval=f(window.setInterval);
-})(function(f){return function(c,t){
-var a=[].slice.call(arguments,2);return f(function(){c instanceof Function?c.apply(this,a):eval(c)},t)}
-});
-&lt;/script&gt;&lt;![endif]--&gt;
-
-
-</pre>
-
-<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 114px; background: 0px 0px;"></div>
-
-<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 133px; background: 0px 0px;"></div>
-
-<h3 id="变通方法">变通方法</h3>
-
-<p>另一种方法是使用匿名函数包裹你的回调函数，这种方式要消耗更多资源：</p>
-
-<pre class="brush: js notranslate">var intervalID = setTimeout(function() { myFunc('one', 'two', 'three'); }, 1000);
-</pre>
-
-<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 0px; background: 0px 0px;"></div>
-
-<p>上面那个例子也可以用<a href="/zh-CN/docs/Web/JavaScript/Reference/Functions/Arrow_functions">箭头函数</a>:</p>
-
-<pre class="brush: js notranslate">var intervalID = setTimeout(() =&gt; { myFunc('one', 'two', 'three'); }, 1000);
-</pre>
-
-<p>此外，也可使用 <a href="https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Function/bind" title="/en-US/docs/JavaScript/Reference/Global_Objects/Function/bind">function's bind</a>：</p>
-
-<pre class="brush: js notranslate">setTimeout(function(arg1){}.bind(undefined, 10), 1000);
-</pre>
-
-<h2 id="关于this的问题">关于"<code>this</code>"的问题</h2>
-
-<p>当你向 <code>setTimeout()</code> (或者其他函数)传递一个函数时,该函数中的<code>this</code>指向跟你的期望可能不同，这个问题在 <a href="/en-US/docs/JavaScript/Reference/Operators/this#Method_binding" title="en-US/docs/Core_JavaScript_1.5_Reference/Operators/Special_Operators/this_Operator#Method_binding">JavaScript reference</a> 中进行了详细解释.</p>
-
-<h3 id="解释">解释</h3>
-
-<p>由<code>setTimeout()</code>调用的代码运行在与所在函数完全分离的执行环境上。这会导致，这些代码中包含的 <code>this</code> 关键字在非严格模式会指向 <code>window</code> (或全局)对象，严格模式下为 undefined，这和所期望的<code>this</code>的值是不一样的。</p>
-
-<div class="note">
-<p>备注：即使是在严格模式下，<code>setTimeout()</code>的回调函数里面的<code>this</code>仍然默认指向<code>window</code>对象， 并不是<code>undefined</code>。</p>
-</div>
-
-<p>查看下面的例子:</p>
-
-<pre class="brush: js notranslate">let myArray = ["zero", "one", "two"];
-myArray.myMethod = function (sProperty) {
-    alert(arguments.length &gt; 0 ? this[sProperty] : this);
-};
-
-myArray.myMethod(); // prints "zero,one,two"
-myArray.myMethod(1); // prints "one"</pre>
-
-<p>上面这段代码正常工作，用<code>myArray</code>调用，在函数内，<code>this[sProperty]</code>等于 <code>myArray[sProperty]</code>。然后，下面这个例子：</p>
-
-<pre class="brush: js notranslate">setTimeout(myArray.myMethod, 1000); // prints "[object Window]" after 1 second
-setTimeout(myArray.myMethod, 1500, "1"); // prints "undefined" after 1.5 seconds</pre>
-
-<p><code>myArray.myMethod</code>函数传递给 <code>setTimeout</code>，到了定时时间，<code>this</code>没有指向，默认指向<code>window</code>对象。并且没有方法把 <code>thisArg</code> 传递给<code>setTimeout</code>，正如Array方法的<code>forEach</code>，<code>reduce</code>等。下面的例子表示使用<code>call</code>方法设置<code>this</code>也没用。</p>
-
-<pre class="brush: js notranslate">setTimeout.call(myArray, myArray.myMethod, 2000); // error: "NS_ERROR_XPC_BAD_OP_ON_WN_PROTO: Illegal operation on WrappedNative prototype object"
-setTimeout.call(myArray, myArray.myMethod, 2500, 2); // same error</pre>
-
-<h3 id="可能的解决方案">可能的解决方案</h3>
-
-<p>一个通用的方法是用包装函数来设置<code>this</code>：</p>
-
-<pre class="brush: js notranslate">setTimeout(function(){myArray.myMethod()}, 2000); // prints "zero,one,two" after 2 seconds
-setTimeout(function(){myArray.myMethod('1')}, 2500); // prints "one" after 2.5 seconds</pre>
-
-<p>箭头函数也可以：</p>
-
-<pre class="brush: js notranslate">setTimeout(() =&gt; {myArray.myMethod()}, 2000); // prints "zero,one,two" after 2 seconds
-setTimeout(() =&gt; {myArray.myMethod('1')}, 2500); // prints "one" after 2.5 seconds</pre>
-
-<p>另一个解决<code>this</code>问题的方法是使用两个非原生的 <code>setTimeout()</code> 和 <code>setInterval()</code> 全局函数代替原生的。该非原生的函数通过使用<a href="/en-US/docs/JavaScript/Reference/Global_Objects/Function/call" title="en-US/docs/JavaScript/Reference/Global_Objects/Function/call"><code>Function.prototype.call</code></a> 方法激活了正确的作用域。下面的代码显示了应该如何替换：</p>
-
-<pre class="brush: js notranslate">// Enable the passage of the 'this' object through the JavaScript timers
-
-var __nativeST__ = window.setTimeout, __nativeSI__ = window.setInterval;
-
-window.setTimeout = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) {
-  var oThis = this, aArgs = Array.prototype.slice.call(arguments, 2);
-  return __nativeST__(vCallback instanceof Function ? function () {
-    vCallback.apply(oThis, aArgs);
-  } : vCallback, nDelay);
-};
-
-window.setInterval = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) {
-  var oThis = this, aArgs = Array.prototype.slice.call(arguments, 2);
-  return __nativeSI__(vCallback instanceof Function ? function () {
-    vCallback.apply(oThis, aArgs);
-  } : vCallback, nDelay);
-};</pre>
-
-<div class="note"><strong>备注:</strong> 这两个替换也让 IE支持了符合 HTML5 标准的定时器函数。所以也能作为一个 polyfills。查看 <a href="#Callback_arguments">Callback arguments</a> 一段.</div>
-
-<p>新特性检测:</p>
-
-<pre class="brush: js notranslate">let myArray = ["zero", "one", "two"];
-myArray.myMethod = function (sProperty) {
-    alert(arguments.length &gt; 0 ? this[sProperty] : this);
-};
-
-setTimeout(alert, 1500, "Hello world!"); // the standard use of setTimeout and setInterval is preserved, but...
-setTimeout.call(myArray, myArray.myMethod, 2000); // prints "zero,one,two" after 2 seconds
-setTimeout.call(myArray, myArray.myMethod, 2500, 2); // prints "two" after 2,5 seconds
-</pre>
-
-<p>针对这个问题并没有原生的解决方案。</p>
-
-<div class="note"><strong>注：</strong>JavaScript 1.8.5 引入了 <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Function/bind" title="en-US/docs/JavaScript/Reference/Global Objects/Function/bind">Function.prototype.bind()</a></code> 方法，该方法允许显式地指定函数调用时 this 所指向的值 。该方法可以帮助你解决 this 指向不确定的问题。</div>
-
-<p>使用<code>bind()</code>的例子：</p>
-
-<pre class="brush: js notranslate">let myArray = ['zero', 'one', 'two'];
-myBoundMethod = (function (sProperty) {
-    console.log(arguments.length &gt; 0 ? this[sProperty] : this);
-}).bind(myArray);
-
-myBoundMethod(); // prints "zero,one,two" because 'this' is bound to myArray in the function
-myBoundMethod(1); // prints "one"
-setTimeout(myBoundMethod, 1000); // still prints "zero,one,two" after 1 second because of the binding
-setTimeout(myBoundMethod, 1500, "1"); // prints "one" after 1.5 seconds
-</pre>
-
-<h2 id="备注">备注</h2>
-
-<p>你可以使用 {{domxref("WindowOrWorkerGlobalScope.clearTimeout()","clearTimeout()")}}来取消定时器。</p>
-
-<p>如果你希望你的代码被重复的调用 (比如每 N 毫秒一次),考虑使用{{domxref("WindowOrWorkerGlobalScope.setInterval()","setInterval()")}}。</p>
-
-<h3 id="传递字符串字面量">传递字符串字面量</h3>
-
-<p>向<code>setTimeout()</code>传递一个字符串而不是函数会遭受到与使用<code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/eval#Don.27t_use_eval.21" title="https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/eval">eval</a></code>一样的风险.</p>
-
-<pre class="brush: js notranslate">// 推荐
-window.setTimeout(function() {
-    alert("Hello World!");
-}, 500);
-
-// 不推荐
-window.setTimeout("alert(\"Hello World!\");", 500);
-
-</pre>
-
-<p>字符串会在全局作用域内被解释执行，所以当<code>setTimeout()</code>函数执行完毕后，字符串中的变量不可用.</p>
-
-<h3 id="实际延时比设定值更久的原因：最小延迟时间">实际延时比设定值更久的原因：最小延迟时间</h3>
-
-<p>有很多因素会导致setTimeout的回调函数执行比设定的预期值更久，本节将讨论最常见的原因。</p>
-
-<h4 id="最小延时_>4ms">最小延时 &gt;=4ms</h4>
-
-<p>在浏览器中，<code>setTimeout()/</code>{{domxref("WindowOrworkerGlobalScope.setInterval","setInterval()")}} 的每调用一次定时器的最小间隔是4ms，这通常是由于函数嵌套导致（嵌套层级达到一定深度），或者是由于已经执行的setInterval的回调函数阻塞导致的。例如：</p>
-
-<pre class="brush: js notranslate" id="ct-0"><code>function cb() { f(); setTimeout(cb, 0); }
-setTimeout(cb, 0);</code></pre>
-
-<pre class="brush: js notranslate"><code>setInterval(f, 0);</code></pre>
-
-<p>在Chrome 和 Firefox中， 定时器的第5次调用被阻塞了；在Safari是在第6次；Edge是在第3次。Gecko 从这个版本 <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/56">version 56</a>开始对 <code>setInterval()</code> 开始采用这样的机制（<code>setTimeout()</code>已经实现，具体请参考以下内容)。</p>
-
-<p>一直以来，不同浏览器中出现这种最小延迟的情况有所不同（例如Firefox） - 从其他地方调用了setInterval( )，或者在嵌套函数调用setTimeout( ) 时（嵌套级别达到特定深度时），都会出现超时延迟。</p>
-
-<p>如果想在浏览器中实现0ms延时的定时器，你可以参考<a href="http://dbaron.org/log/20100309-faster-timeouts">这里</a>所说的{domxref("window.postMessage()")}}</p>
-
-<div class="note">
-<p><strong>Note</strong>: 最小延时, <code>DOM_MIN_TIMEOUT_VALUE</code>, 是4ms  (但在Firefox中通常是是存储在 <code>dom.min_timeout_value </code>这个变量中), <code>DOM_CLAMP_TIMEOUT_NESTING_LEVEL</code> 的第5层.</p>
-</div>
-
-<div class="note">
-<p><strong>Note</strong>: 4 ms 是在  <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/timers.html#timers">HTML5 spec </a> 中精确的，并且在2010年及以后的跨浏览器中保持了一致，这个数值比 {{geckoRelease("5.0")}}规定的嵌套函数的最小延时10ms更为精确。</p>
-</div>
-
-<h4 id="未被激活的tabs的定时最小延迟>1000ms">未被激活的tabs的定时最小延迟&gt;=1000ms</h4>
-
-<p>为了优化后台tab的加载损耗（以及降低耗电量），在未被激活的tab中定时器的最小延时限制为1S(1000ms)。</p>
-
-<p>Firefox 从version 5 (see {{bug(633421)}}开始采取这种机制，1000ms的间隔值可以通过 <code>dom.min_background_timeout_value</code> 改变。Chrome 从 version 11 (<a href="http://crbug.com/66078">crbug.com/66078</a>)开始采用。</p>
-
-<p>Android 版的Firefox对未被激活的后台tabs的使用了15min的最小延迟间隔时间 ，并且这些tabs也能完全不被加载。</p>
-
-<div class="note">
-<p>当 Web Audio API {{domxref("AudioContext")}} 正在被用来播放音频的时候，Firefox 50不会再限制后台tabs的加载。 后续的Firefox 51 版本修正了这个问题，即使在没有音频播放的情况下，也不再限制后台tabs的加载。这个解决了一些软件应用在后台tabs中播放基于文本的音频( note-based) 时，无法去同步音频和画面的问题。</p>
-</div>
-
-<h4 id="追踪型脚本的最小延时限制">追踪型脚本的最小延时限制</h4>
-
-<p>从Firefox 55版本开始，追踪型脚本（例如 谷歌分析，或者其他的一些被Firefox 的 <a href="https://wiki.mozilla.org/Security/Tracking_protection#Lists">TP lists</a> 识别为追踪型脚本的 外链URL脚本）是重点限制加载的对象。在当前正在使用的页面中，这个节流限制的延时依然是4ms。但是在后台tabs中，这个最小延时限制是10000ms（10s）,这个限制会在文档第一次加载后的30s后生效。</p>
-
-<p>控制这些行为的属性包含以下这些：</p>
-
-<ul>
- <li><code>dom.min_tracking_timeout_value</code>: 4</li>
- <li><code>dom.min_tracking_background_timeout_value</code>: 10000</li>
- <li><code>dom.timeout.tracking_throttling_delay</code>: 30000</li>
-</ul>
-
-<h4 id="超时延迟">超时延迟</h4>
-
-<p>除了"最小延时"之外，定时器仍然有可能因为当前页面（或者操作系统/浏览器本身）被其他任务占用导致延时。 需要被强调是， 直到调用 <code>setTimeout()</code>的主线程执行完其他任务之后，回调函数和代码段才能被执行。例如：</p>
-
-<pre class="notranslate"><code>function foo() {
-  console.log('foo has been called');
-}
-setTimeout(foo, 0);
-console.log('After setTimeout');</code></pre>
-
-<p>会在控制台输出:</p>
-
-<pre class="notranslate"><code>After setTimeout
-foo has been called</code></pre>
-
-<p>出现这个结果的原因是，尽管<code>setTimeout</code> 以0ms的延迟来调用函数，但这个任务已经被放入了队列中并且等待下一次执行；并不是立即执行；队列中的等待函数被调用之前，当前代码必须全部运行完毕，因此这里运行结果并非预想的那样。</p>
-
-<h3 id="WebExtension_Background_pages和定时器">WebExtension Background pages和定时器</h3>
-
-<p>在 <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions">WebExtension</a> 中 background pages，timers工作不正常。这主要因为background pages实际上，并不是一次性全部加载：如果浏览器没有使用它，就不加载，如果需要就恢复。这对于WebExtension是透明的，但是有些事件(包括JS的timers)不会在不加载/恢复循环中执行，所以WebExtension中建议使用alarms。更详细的细节在<a href="https://developer.chrome.com/extensions/background_migration">合并到事件驱动后台脚本</a>。</p>
-
-<p>在本文写作的时候，只有Chrome展示了如上的特性 — Firefox没有未加载/恢复循环的行为，所以timers仍然可以工作。但是，仍然建议不要在WebExtension中使用timers:</p>
-
-<p>1.兼容Chorme。</p>
-
-<p>2.未来行为的改变会引起问题。</p>
-
-<h3 id="最大延时值">最大延时值</h3>
-
-<p>包括 IE,  Chrome, Safari, Firefox 在内的浏览器其内部以32位带符号整数存储延时。这就会导致如果一个延时(delay)大于 2147483647 毫秒 (大约24.8 天)时就会溢出，导致定时器将会被立即执行。</p>
-
-<h2 id="规范">规范</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Specification</th>
-   <th scope="col">Status</th>
-   <th scope="col">Comment</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', 'webappapis.html#dom-settimeout', 'WindowOrWorkerGlobalScope.setTimeout()')}}</td>
-   <td>{{Spec2("HTML WHATWG")}}</td>
-   <td>Method moved to the <code>WindowOrWorkerGlobalScope</code> mixin in the latest spec.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName("HTML WHATWG", "webappapis.html#dom-settimeout", "WindowTimers.setTimeout()")}}</td>
-   <td>{{Spec2("HTML WHATWG")}}</td>
-   <td>Initial definition (DOM Level 0)</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="浏览器兼容性">浏览器兼容性</h2>
-
-<div id="compat-desktop">
-<div class="hidden">
-<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
-</div>
-
-<p>{{Compat("api.WindowOrWorkerGlobalScope.setTimeout")}}</p>
-</div>
-
-<h2 id="See_also" name="See_also" style="margin-bottom: 20px; line-height: 30px; font-size: 2.14285714285714rem;">相关链接：</h2>
-
-<ul>
- <li><a href="https://developer.mozilla.org/en-US/docs/JavaScript/Timers" title="/en-US/docs/JavaScript/Timers">JavaScript timers</a></li>
- <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/JavaScript_code_modules/Timer.jsm" title="/en-US/docs/Mozilla/JavaScript_code_modules/Timer.jsm">Timer.jsm</a></li>
- <li>{{domxref("WindowOrWorkerGlobalScope.clearTimeout")}}</li>
- <li>{{domxref("WindowTimers.setInterval")}}</li>
- <li>{{domxref("window.requestAnimationFrame")}}</li>
- <li><a href="https://developer.mozilla.org/en-US/docs/JavaScript/Timers/Daemons" title="/en-US/docs/JavaScript/Timers/Daemons"><em>Daemons</em> management</a></li>
-</ul>
diff --git a/files/zh-cn/web/api/xmlhttprequest/responsetype/index.html b/files/zh-cn/web/api/xmlhttprequest/responsetype/index.html
index c270b2f109..7201946aae 100644
--- a/files/zh-cn/web/api/xmlhttprequest/responsetype/index.html
+++ b/files/zh-cn/web/api/xmlhttprequest/responsetype/index.html
@@ -2,44 +2,88 @@
 title: XMLHttpRequest.responseType
 slug: Web/API/XMLHttpRequest/responseType
 tags:
-  - XMLHttpRequest.responseType
+  - AJAX
+  - API
+  - HTTP
+  - HTTP Response
+  - HTTP Response Type
+  - Property
+  - Reference
+  - Response
+  - XHR
+  - XMLHttpRequest
+  - responseType
 translation_of: Web/API/XMLHttpRequest/responseType
+browser-compat: api.XMLHttpRequest.responseType
 ---
-<p>{{APIRef('XMLHttpRequest')}}</p>
+<div>{{APIRef('XMLHttpRequest')}}</div>
 
-<p><strong>XMLHttpRequest.responseType </strong>属性是一个枚举类型的属性，返回响应数据的类型。它允许我们手动的设置返回数据的类型。如果我们将它设置为一个空字符串，它将使用默认的"text"类型。</p>
+<p>{{DOMxRef("XMLHttpRequest")}} 属性 <strong><code>responseType</code></strong> 是一个枚举字符串值，用于指定响应中包含的数据类型。</p>
 
-<p>在工作环境(Work Environment)中将responseType的值设置为"document"通常会被忽略. 当将responseType设置为一个特定的类型时，你需要确保服务器所返回的类型和你所设置的返回值类型是兼容的。那么如果两者类型不兼容呢?恭喜你，你会发现服务器返回的数据变成了null，即使服务器返回了数据。还有一个要注意的是，给一个同步请求设置responseType会抛出一个<code>InvalidAccessError</code> 的异常。</p>
+<p>它还允许作者更改响应类型。如果将 <code>responseType</code> 的值设置为空字符串，则会使用 <code>text</code> 作为默认值。</p>
 
-<p>responseType支持以下几种值：</p>
+<h2 id="syntax">语法</h2>
 
-<p>{{page("/zh-CN/docs/Web/API/XMLHttpRequestResponseType", "取值")}}</p>
+<pre class="brush: js">var <var>type</var> = <var>XMLHttpRequest</var>.responseType;
 
-<h2 id="规范">规范</h2>
+<var>XMLHttpRequest</var>.responseType = <var>type</var>;</pre>
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">规范</th>
-   <th scope="col">状态</th>
-   <th scope="col">注释</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('XMLHttpRequest', '#the-responsetype-attribute')}}</td>
-   <td>{{Spec2('XMLHttpRequest')}}</td>
-   <td>WHATWG living standard</td>
-  </tr>
- </tbody>
-</table>
+<h3 id="Value">值</h3>
 
-<h2 id="浏览器兼容性">浏览器兼容性</h2>
+<p>{{JSxRef("Global_Objects/String")}} 类型的值，指定响应包含的数据类型。它可以采用以下值：</p>
 
-<p>{{Compat("api.XMLHttpRequest.responseType")}}</p>
+<dl>
+    <dt><code>""</code></dt>
+    <dd>空的 <code>responseType</code> 字符串与默认类型 <code>"text"</code> 相同。</dd>
+    <dt><code>"arraybuffer"</code></dt>
+    <dd>{{DOMxRef("XMLHttpRequest.response", "response")}} 是一个包含二进制数据的 JavaScript {{JSxRef("ArrayBuffer")}}。</dd>
+    <dt><code>"blob"</code></dt>
+    <dd>{{DOMxRef("XMLHttpRequest.response", "response")}} 是一个包含二进制数据的 {{DOMxRef("Blob")}} 对象。</dd>
+    <dt><code>"document"</code></dt>
+    <dd>{{DOMxRef("XMLHttpRequest.response", "response")}} 是一个 {{Glossary("HTML")}} {{DOMxRef("Document")}} 或 {{Glossary("XML")}} {{DOMxRef("XMLDocument")}}，根据接收到的数据的 MIME 类型而定。请参阅 <a href="/zh-CN/docs/Web/API/XMLHttpRequest/HTML_in_XMLHttpRequest">HTML in XMLHttpRequest</a> 中的 HTML，了解有关使用 XHR 获取 HTML 内容的更多信息。</dd>
+    <dt><code>"json"</code></dt>
+    <dd>{{DOMxRef("XMLHttpRequest.response", "response")}} 是通过将接收到的数据内容解析为 {{Glossary("JSON")}} 而创建的 JavaScript 对象。</dd>
+    <dt><code>"text"</code></dt>
+    <dd>{{DOMxRef("XMLHttpRequest.response", "response")}} 是 {{DOMxRef("DOMString")}} 对象中的文本。</dd>
+    <dt><code>"ms-stream"</code> {{non-standard_inline}}</dt>
+    <dd>{{DOMxRef("XMLHttpRequest.response", "response")}} 是流式下载的一部分；此响应类型仅允许用于下载请求，并且仅受 Internet Explorer 支持。</dd>
+</dl>
 
-<h2 id="了解更多">了解更多</h2>
+<div class="note">
+    <p>将 <code>responseType</code> 设置为特定值时，作者应确保服务器实际发送的响应与该格式兼容。如果服务器返回的数据与设置的 <code>responseType</code> 不兼容，则 {{DOMxRef("XMLHttpRequest.response", "response")}} 的值将为<code>null</code> .</p>
+</div>
+
+<h3 id="Exceptions">异常</h3>
+
+<dl>
+    <dt><code>InvalidAccessError</code></dt>
+    <dd>试图更改 <code>XMLHttpRequest</code> 的 <code>responseType</code>，该值处于同步模式但不在 {{DOMxRef("Worker")}} 中。有关其他详细信息，请参阅下面的 {{anch("Synchronous_XHR_restrictions", "同步 XHR 限制")}}。</dd>
+</dl>
+
+<h2 id="Usage_notes">使用说明</h2>
+
+<h3 id="Synchronous_XHR_restrictions">同步 XHR 限制</h3>
+
+<p>您不能在同步<code>XMLHttpRequest</code> 中更改 <code>responseType</code> 的值，除非请求属于 {{DOMxRef("Worker")}}。此限制部分旨在帮助确保同步操作不会用于阻塞浏览器主线程的大型事务，从而阻碍用户体验。</p>
+
+<p>XHR 请求默认是异步的；它们仅通过在调用 {{DOMxRef("XMLHttpRequest.open", "open()")}} 时将 <code>false</code> 作为可选<code>async</code> 参数的值传递来置于同步模式。</p>
+
+<h3 id="Restrictions_in_Workers">Worker 中的限制</h3>
+
+<p>在 {{DOMxRef("Worker")}} 中尝试将 <code>responseType</code> 的值设置为 <code>document</code> 时会被忽略。</p>
+
+<h2 id="Specifications">规范</h2>
+
+{{Specifications}}
+
+<h2 id="Browser_compatibility">浏览器兼容性</h2>
+
+<p>{{Compat}}</p>
+
+<h2 id="See_also">相关链接</h2>
 
 <ul>
- <li><a href="/zh-CN/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest">Using XMLHttpRequest</a></li>
- <li><a href="/zh-CN/docs/Web/API/XMLHttpRequest/HTML_in_XMLHttpRequest">HTML in XMLHttpRequest</a></li>
- <li>响应数据： {{domxref("XMLHttpRequest.response", "response")}} 、 {{domxref("XMLHttpRequest.responseText", "responseText")}} 和 {{domxref("XMLHttpRequest.responseXML", "responseXML")}}</li>
+    <li><a href="/zh-CN/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest">使用 XMLHttpRequest</a></li>
+    <li><a href="/zh-CN/docs/Web/API/XMLHttpRequest/HTML_in_XMLHttpRequest">HTML in XMLHttpRequest</a></li>
+    <li>{{DOMxRef("XMLHttpRequest.response", "response")}}, {{DOMxRef("XMLHttpRequest.responseText", "responseText")}} 和 {{DOMxRef("XMLHttpRequest.responseXML", "responseXML")}}</li>
 </ul>
diff --git a/files/zh-cn/web/css/_doublecolon_before/index.html b/files/zh-cn/web/css/_doublecolon_before/index.html
index e71e51a49b..c26c09f813 100644
--- a/files/zh-cn/web/css/_doublecolon_before/index.html
+++ b/files/zh-cn/web/css/_doublecolon_before/index.html
@@ -33,7 +33,7 @@ p::before { content: "Hello world!"; } </pre>
 
 <h3 id="Adding_quotation_marks" name="Adding_quotation_marks">加入引用标记</h3>
 
-<p>使用 <code>::before </code>伪元素的一个简单示例就是用于加入引号。此处同时使用了 <code>::before</code> 和 <code>{{Cssref("::after")}}</code>来插入引用性文本。</p>
+<p>使用 <code>::before </code>伪元素的一个简单示例就是用于加入引号。此处同时使用了 <code>::before</code> 和 <code>{{Cssxref("::after")}}</code>来插入引用性文本。</p>
 
 <h4 id="HTML_内容">HTML 内容</h4>
 
diff --git a/files/zh-cn/web/css/css_background_and_borders/border-image_generator/index.html b/files/zh-cn/web/css/css_background_and_borders/border-image_generator/index.html
deleted file mode 100644
index 85b576cfd7..0000000000
--- a/files/zh-cn/web/css/css_background_and_borders/border-image_generator/index.html
+++ /dev/null
@@ -1,2628 +0,0 @@
----
-title: Border-image 生成器
-slug: Web/CSS/CSS_Background_and_Borders/Border-image_generator
-tags:
-  - CSS
-  - Tools
-translation_of: Web/CSS/CSS_Background_and_Borders/Border-image_generator
----
-<p>这个工具用于生成 CSS3 {{cssxref("border-image")}} 的值.</p>
-
-<div class="hidden">
-<h2 id="Border_Image_Generator" name="Border_Image_Generator">Border Image Generator</h2>
-
-<h3 id="HTML_Content">HTML Content</h3>
-
-<pre class="brush: html">    &lt;div id="container"&gt;
-
-        &lt;div id="gallery"&gt;
-            &lt;div id="image-gallery"&gt;
-                &lt;img class="image" src="https://mdn.mozillademos.org/files/6007/border-image-1.png" data-stateID="border1"/&gt;
-                &lt;img class="image" src="https://mdn.mozillademos.org/files/6009/border-image-2.png" data-stateID="border2"/&gt;
-                &lt;img class="image" src="https://mdn.mozillademos.org/files/6011/border-image-3.png" data-stateID="border3"/&gt;
-                &lt;img class="image" src="https://mdn.mozillademos.org/files/6013/border-image-4.png" data-stateID="border4"/&gt;
-                &lt;img class="image" src="https://mdn.mozillademos.org/files/6015/border-image-5.png" data-stateID="border5"/&gt;
-                &lt;img class="image" src="https://mdn.mozillademos.org/files/6017/border-image-6.svg" data-stateID="border6"/&gt;
-            &lt;/div&gt;
-        &lt;/div&gt;
-
-        &lt;div id="load-actions" class="group section"&gt;
-            &lt;div id="toggle-gallery" data-action="hide"&gt; &lt;/div&gt;
-            &lt;div id="load-image" class="button"&gt; Upload image &lt;/div&gt;
-            &lt;input id="remote-url" type="text" placeholder="Load an image from URL"/&gt;
-            &lt;div id="load-remote" class="button"&gt; &lt;/div&gt;
-        &lt;/div&gt;
-
-        &lt;div id="general-controls" class="group section"&gt;
-            &lt;div class="name"&gt; Control Box &lt;/div&gt;
-            &lt;div class="separator"&gt;&lt;/div&gt;
-            &lt;div class="property"&gt;
-                &lt;div class="name"&gt;scale&lt;/div&gt;
-                &lt;div class="ui-input-slider" data-topic="scale"
-                    data-unit="%" data-max="300" data-sensivity="10"&gt;
-                &lt;/div&gt;
-            &lt;/div&gt;
-            &lt;div class="separator"&gt;&lt;/div&gt;
-            &lt;div class="property"&gt;
-                &lt;div class="name"&gt;draggable&lt;/div&gt;
-                &lt;div class="ui-checkbox" data-topic='drag-subject'&gt;&lt;/div&gt;
-            &lt;/div&gt;
-            &lt;div class="property right"&gt;
-                &lt;div class="name"&gt;section height&lt;/div&gt;
-                &lt;div class="ui-input-slider" data-topic="preview-area-height"
-                    data-min="400" data-max="1000"&gt;
-                &lt;/div&gt;
-            &lt;/div&gt;
-        &lt;/div&gt;
-
-        &lt;div id="preview_section" class="group section"&gt;
-            &lt;div id="subject"&gt;
-                &lt;div class="guideline" data-axis="Y" data-topic="slice-top"&gt;&lt;/div&gt;
-                &lt;div class="guideline" data-axis="X" data-topic="slice-right"&gt;&lt;/div&gt;
-                &lt;div class="guideline" data-axis="Y" data-topic="slice-bottom"&gt;&lt;/div&gt;
-                &lt;div class="guideline" data-axis="X" data-topic="slice-left"&gt;&lt;/div&gt;
-            &lt;/div&gt;
-            &lt;div id="preview"&gt; &lt;/div&gt;
-        &lt;/div&gt;
-
-        &lt;!-- controls --&gt;
-        &lt;div id="controls" class="group section"&gt;
-
-            &lt;!-- border-image-slice --&gt;
-            &lt;div id="border-slice-control" class="category"&gt;
-                &lt;div class="title"&gt; border-image-slice &lt;/div&gt;
-                &lt;div class="property"&gt;
-                    &lt;div class="name"&gt;fill&lt;/div&gt;
-                    &lt;div class="ui-checkbox" data-topic='slice-fill'&gt;&lt;/div&gt;
-                &lt;/div&gt;
-            &lt;/div&gt;
-
-            &lt;!-- border-image-width --&gt;
-            &lt;div id="border-width-control" class="category"&gt;
-                &lt;div class="title"&gt; border-image-width &lt;/div&gt;
-            &lt;/div&gt;
-
-            &lt;!-- border-image-outset --&gt;
-            &lt;div id="border-outset-control" class="category"&gt;
-                &lt;div class="title"&gt; border-image-outset &lt;/div&gt;
-            &lt;/div&gt;
-
-            &lt;!-- other-settings --&gt;
-            &lt;div id="aditional-properties" class="category"&gt;
-                &lt;div class="title"&gt; aditional-properties &lt;/div&gt;
-                &lt;div class="property"&gt;
-                    &lt;div class="name"&gt; repeat-x &lt;/div&gt;
-                    &lt;div class="ui-dropdown border-repeat" data-topic="image-repeat-X" data-selected="2"&gt;
-                        &lt;div data-value="0"&gt;repeat&lt;/div&gt;
-                        &lt;div data-value="0"&gt;stretch&lt;/div&gt;
-                        &lt;div data-value="0"&gt;round&lt;/div&gt;
-                    &lt;/div&gt;
-                &lt;/div&gt;
-                &lt;div class="property"&gt;
-                    &lt;div class="name"&gt; repeat-y &lt;/div&gt;
-                    &lt;div class="ui-dropdown border-repeat" data-topic="image-repeat-Y" data-selected="2"&gt;
-                        &lt;div data-value="1"&gt;repeat&lt;/div&gt;
-                        &lt;div data-value="1"&gt;stretch&lt;/div&gt;
-                        &lt;div data-value="1"&gt;round&lt;/div&gt;
-                    &lt;/div&gt;
-                &lt;/div&gt;
-                &lt;div class="property"&gt;
-                    &lt;div class="ui-input-slider" data-topic="font-size" data-info="em size"
-                        data-unit="px" data-value="12" data-sensivity="3"&gt;
-                    &lt;/div&gt;
-                &lt;/div&gt;
-
-                &lt;div class="property"&gt;
-                    &lt;div class="ui-input-slider" data-topic="preview-width" data-info="width"
-                         data-unit=" px" data-min="10" data-max="10000" data-sensivity="3"&gt;&lt;/div&gt;
-                &lt;/div&gt;
-                &lt;div class="property"&gt;
-                    &lt;div class="ui-input-slider" data-topic="preview-height" data-info="height"
-                        data-unit=" px" data-min="10" data-max="10000" data-sensivity="3"&gt;
-                    &lt;/div&gt;
-                &lt;/div&gt;
-            &lt;/div&gt;
-
-
-            &lt;div id="output" class="category"&gt;
-                &lt;div class="title"&gt; CSS Code &lt;/div&gt;
-                &lt;div class="css-property"&gt;
-                    &lt;span class="name"&gt; border-image-slice: &lt;/span&gt;
-                    &lt;span id="out-border-slice" class="value"&gt; &lt;/span&gt;
-                &lt;/div&gt;
-                &lt;div class="css-property"&gt;
-                    &lt;span class="name"&gt; border-image-width: &lt;/span&gt;
-                    &lt;span id="out-border-width" class="value"&gt; &lt;/span&gt;
-                &lt;/div&gt;
-                &lt;div class="css-property"&gt;
-                    &lt;span class="name"&gt; border-image-outset: &lt;/span&gt;
-                    &lt;span id="out-border-outset" class="value"&gt; &lt;/span&gt;
-                &lt;/div&gt;
-                &lt;div class="css-property"&gt;
-                    &lt;span class="name"&gt; border-image-repeat: &lt;/span&gt;
-                    &lt;span id="out-border-repeat" class="value"&gt; &lt;/span&gt;
-                &lt;/div&gt;
-                &lt;div class="css-property"&gt;
-                    &lt;span class="name"&gt; border-image-source: &lt;/span&gt;
-                    &lt;span id="out-border-source" class="value"&gt;  &lt;/span&gt;
-                &lt;/div&gt;
-            &lt;/div&gt;
-
-        &lt;/div&gt;
-    &lt;/div&gt;</pre>
-
-<h3 id="CSS_Content">CSS Content</h3>
-
-<pre class="brush: css">/*  GRID OF TWELVE
- * ========================================================================== */
-
-.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 {
-	height: 20px;
-	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
-	-moz-user-select: none;
-	user-select: none;
-}
-
-.ui-input-slider * {
-	float: left;
-	height: 100%;
-	line-height: 100%;
-}
-
-/* Input Slider */
-
-.ui-input-slider &gt; 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 DropDown
- */
-
-/* Dropdown */
-
-.ui-dropdown {
-	height: 2em;
-	width: 120px;
-	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
-	font-size: 12px;
-
-	background-image: url("https://mdn.mozillademos.org/files/6037/drop_arrow_icon.png");
-	background-position: right center;
-	background-repeat: no-repeat;
-	background-color: #359740;
-
-	position: relative;
-
-	-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;
-}
-
-.ui-dropdown:hover {
-	cursor: pointer;
-	background-color: #208B20;
-}
-
-/* Dropdown Select Button */
-
-.ui-dropdown-select {
-	height: inherit;
-	padding: 0 0.75em;
-	color: #FFF;
-	line-height: 2em;
-}
-
-/* Dropdown List */
-
-.ui-dropdown-list {
-	width: 100%;
-	height: 150px;
-	max-height: 150px;
-	margin: 0;
-	padding: 0 0.3em;
-
-	border: 3px solid #3490D2;
-	border-color: #208B20;
-	background: #666;
-	background-color: #EEF1F5;
-	color: #000;
-
-	position: absolute;
-	top: 2em;
-	left: 0;
-	z-index: 100;
-
-	overflow: hidden;
-	transition: all 0.3s;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-}
-
-.ui-dropdown-list:hover {
-	overflow: auto;
-}
-
-.ui-dropdown-list[data-hidden='true'] {
-	height: 0 !important;
-	opacity: 0;
-	visibility: hidden;
-}
-
-.ui-dropdown[data-position='left'] .ui-dropdown-list {
-	left: -100%;
-	top: 0;
-}
-
-.ui-dropdown[data-position='right'] .ui-dropdown-list {
-	left: 100%;
-	top: 0;
-}
-
-.ui-dropdown-list &gt; div {
-	width: 100%;
-	height: 1.6em;
-	margin: 0.3em 0;
-	padding: 0.3em;
-	line-height: 1em;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-}
-
-.ui-dropdown-list &gt; div:hover {
-	background: #3490D2;
-	color:#FFF;
-	border-radius: 2px;
-	cursor: pointer;
-}
-
-
-/*************************************************************************************/
-/*************************************************************************************/
-
-/*
- * UI Button
- */
-
-/* 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 &gt; input {
- 	display: none;
-}
-
-.ui-checkbox &gt; 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: 2px;
-	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 &gt; label:hover {
-	cursor: pointer;
-}
-
-.ui-checkbox &gt; input:checked + label {
-	background-image: url("https://mdn.mozillademos.org/files/5681/checked.png");
-	background-color: #379B4A;
-}
-
-/*************************************************************************************/
-/*************************************************************************************/
-
-/*
- * BORDER IMAGE GENERATOR TOOL
- */
-
-body {
-	width: 100%;
-	margin: 0 auto;
-	padding: 0 0 20px 0;
-
-	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
-
-	/*background: url("https://mdn.mozillademos.org/files/6025/grain.png");*/
-	border: 1px solid #EEE;
-
-	-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;
-}
-
-body[data-move='X'] {
-	cursor: w-resize !important;
-}
-
-body[data-move='Y'] {
-	cursor: s-resize !important;
-}
-
-#container {
-	width: 100%;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-}
-
-[data-draggable='true']:hover {
-	cursor: move;
-}
-
-[data-draggable='true']:hover &gt; * {
-	cursor: default;
-}
-
-
-
-/******************************************************************************/
-/******************************************************************************/
-
-/*
- * Border Image Picker
- */
-
-#gallery {
-	box-shadow: 0 0 3px 0 #BABABA;
-}
-
-#image-gallery {
-	width: 600px;
-	height: 100px;
-	margin: 0 auto;
-	transition: margin 0.4s;
-}
-
-#image-gallery .image {
-	height: 80px;
-	float: left;
-	margin: 10px;
-	opacity: 0.5;
-	background-color: #FFF;
-	box-shadow: 0px 0px 3px 1px #BABABA;
-}
-
-#image-gallery .image[selected="true"] {
-	box-shadow: 0px 0px 3px 1px #3BBA52;
-	opacity: 1;
-}
-
-#image-gallery .image:hover {
-	cursor: pointer;
-	box-shadow: 0px 0px 3px 1px #30ACE5;
-	opacity: 1;
-}
-
-#image-gallery[data-collapsed='true'] {
-	margin-top: -100px;
-}
-
-/* Load Menu */
-
-#load-actions {
-	margin: 10px 0;
-}
-
-#toggle-gallery {
-	width: 30px;
-	height: 25px;
-	margin: 10px;
-	color: #FFF;
-
-	background-image: url('https://mdn.mozillademos.org/files/6005/arrow-up-white.png');
-	background-repeat: no-repeat;
-	background-position: top 4px center;
-	background-color: #888888 !important;
-
-	border-radius: 2px;
-	float: left;
-}
-
-#toggle-gallery:hover {
-	cursor: pointer;
-}
-
-#toggle-gallery[data-action='show'] {
-	background-image: url('https://mdn.mozillademos.org/files/6001/arrow-down-white.png');
-	background-color: #888888 !important;
-}
-
-#toggle-gallery[data-action='hide'] {
-	background-image: url('https://mdn.mozillademos.org/files/6005/arrow-up-white.png');
-}
-
-.button {
-	width: 100px;
-	height: 25px;
-	margin: 10px;
-	color: #FFF;
-	text-align: center;
-	font-size: 12px;
-	line-height: 25px;
-	background-color: #379B4A;
-	border-radius: 2px;
-	float: left;
-}
-
-.button:hover {
-	cursor: pointer;
-	background-color: #3380C4;
-}
-
-#load-image {
-	float: left;
-}
-
-#load-remote {
-	width: 30px;
-	background-image: url('https://mdn.mozillademos.org/files/6003/arrow-right-white.png');
-	background-repeat: no-repeat;
-	background-position: center center;
-}
-
-#remote-url {
-	width: 200px;
-	height: 23px;
-	margin: 10px;
-	padding: 0 5px;
-	border: 1px solid #379B4A;
-	border-radius: 2px;
-	float: left;
-
-	transition: width 0.5s;
-}
-
-#remote-url:focus {
-	box-shadow: 0px 0px 3px -1px #379B4A; /*#68ACE8; */
-	border-color: rgba(55, 155, 74, 0.5);
-	width: 450px;
-}
-
-/*
- * Visible Area
- */
-
-#preview_section {
-	position: relative;
-	min-height: 400px;
-}
-
-/* Image Control */
-
-#subject {
-	width: 300px;
-	height: 300px;
-	background-repeat: no-repeat;
-	background-size: 100%;
-	background-color: #FFF;
-	border: 1px solid #CCC;
-
-	position: absolute;
-	z-index: 10;
-	top: 15%;
-	left: 10%;
-
-	box-shadow: 0 0 3px 0 #BABABA;
-	transition-property: width, height;
-	transition-duration: 0.1s;
-}
-
-#subject .guideline {
-	background-color: rgba(255, 255, 255, 0.7);
-	border: 1px solid rgba(0, 0, 0, 0.3);
-	position: absolute;
-}
-
-#subject .guideline:hover {
-	background-color: #F00;
-}
-
-#subject .guideline[data-active] {
-	background-color: #F00;
-	z-index: 10;
-}
-
-#subject .guideline[data-axis='X'] {
-	width: 1px;
-	height: 100%;
-	top: -1px;
-}
-
-#subject .guideline[data-axis='Y'] {
-	width: 100%;
-	height: 1px;
-	left: -1px;
-}
-
-#subject .guideline[data-axis='X']:hover {
-	cursor: w-resize;
-}
-
-#subject .guideline[data-axis='Y']:hover {
-	cursor: s-resize;
-}
-
-
-#subject .relative {
-	position: relative;
-	font-size: 12px;
-}
-
-#subject .tooltip, #subject .tooltip2 {
-	width: 40px;
-	height: 20px;
-	line-height: 20px;
-	font-size: 12px;
-	text-align: center;
-
-	position: absolute;
-	opacity: 0.5;
-	transition: opacity 0.25s;
-}
-
-#subject .tooltip {
-	background: #EEE;
-	border-radius: 2px;
-	border: 1px solid #CCC;
-}
-
-#subject .tooltip2{
-	color: #555;
-}
-
-#subject [data-active] &gt; * {
-	opacity: 1;
-}
-
-#subject .tooltip[data-info='top'] {
-	top: -10px;
-	right: -50px;
-}
-
-#subject .tooltip[data-info='right'] {
-	bottom: -30px;
-	right: -20px;
-}
-
-#subject .tooltip[data-info='bottom'] {
-	top: -10px;
-	left: -50px;
-}
-
-#subject .tooltip[data-info='left'] {
-	top: -30px;
-	right: -20px;
-}
-
-#subject .tooltip2[data-info='top'] {
-	top: -10px;
-	left: -50px;
-}
-
-#subject .tooltip2[data-info='right'] {
-	top: -30px;
-	right: -20px;
-}
-
-#subject .tooltip2[data-info='bottom'] {
-	top: -10px;
-	right: -50px;
-}
-
-#subject .tooltip2[data-info='left'] {
-	bottom: -30px;
-	right: -20px;
-}
-
-/* Preview */
-
-#preview {
-	width: 30%;
-	height: 50%;
-	background-color: #FFF;
-	text-align: center;
-	overflow: hidden;
-	position: absolute;
-	z-index: 10;
-
-	left: 60%;
-	top: 15%;
-
-	border-radius: 2px;
-	border-image-width: 20px;
-	border-image-repeat: round;
-	box-shadow: 0 0 3px 0 #BABABA;
-}
-
-#preview .resize-handle {
-	width: 10px;
-	height: 10px;
-	background: url("https://mdn.mozillademos.org/files/6027/resize.png") center center no-repeat;
-	position: absolute;
-	bottom: 0;
-	right: 0;
-}
-
-#preview .resize-handle:hover {
-	cursor: nw-resize;
-}
-
-
-/*
- * General controls MENU
- */
-
-#general-controls {
-	padding: 10px 30px;
-	background-color: #FFF;
-	opacity: 0.95;
-	color: #888;
-	/*border-radius: 2px;*/
-	box-shadow: 0 0 3px 0 #BABABA;
-}
-
-#general-controls .property {
-	width: 130px;
-	float: left;
-}
-
-#general-controls .name {
-	height: 20px;
-	margin: 0 10px 0 0;
-	line-height: 100%;
-	text-align: right;
-	float: left;
-}
-
-#general-controls .right {
-	width: 200px;
-	float: right;
-}
-
-#general-controls .ui-checkbox label {
-	height: 10px;
-}
-
-#general-controls .separator {
-	height: 40px;
-	width: 1px;
-	margin: -10px 15px;
-	background-color: #EEE;
-	float: left;
-}
-
-/*
- * Controls
- */
-
-#controls {
-	color: #444;
-	margin: 10px 0 0 0;
-}
-
-#controls .category {
-	height: 190px;
-	min-width: 260px;
-	margin: 10px;
-	padding: 10px;
-	border: 1px solid #CCC;
-	border-radius: 3px;
-	float: left;
-
-	box-shadow: 0 0 3px 0 #BABABA;
-	transition: all 0.25s;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-}
-
-@media (min-width: 880px) {
-	#controls .category {
-		width: 30%;
-		margin-left: 1.66%;
-		margin-right: 1.66%;
-	}
-}
-
-@media (max-width: 879px) {
-	#controls .category {
-		width: 37%;
-		margin-left: 6.5%;
-		margin-right: 6.5%;
-	}
-}
-
-#controls .category .title {
-	width: 100%;
-	height: 30px;
-	margin: 0 0 10px 0;
-	line-height: 25px;
-
-	text-align: center;
-	color: #AAA;
-}
-
-#controls .category:hover .title {
-	color: #777;
-}
-
-#controls .category &gt; .group {
-	border: 1px solid #CCC;
-	border-radius: 2px;
-}
-
-
-/* property */
-
-#controls .property {
-	width: 250px;
-	height: 20px;
-	margin: 5px auto;
-}
-
-#controls .property .ui-input-slider {
-	margin: 0;
-	float: left;
-}
-
-#controls .property .ui-input-slider-info {
-	width: 60px;
-}
-
-#controls .property .ui-input-slider-left {
-	transition: opacity 0.15s;
-    opacity: 0;
-}
-
-#controls .property .ui-input-slider-right {
-	transition: opacity 0.15s;
-    opacity: 0;
-}
-
-#controls .property .name {
-	width: 60px;
-	height: 20px;
-	padding: 0px 10px 0px 0px;
-	text-align: right;
-	line-height: 100%;
-	float: left;
-}
-
-#controls .property .config {
-	width: 20px;
-	height: 20px;
-	float: left;
-	background: url("https://mdn.mozillademos.org/files/6021/config.png") center center no-repeat;
-	opacity: 0.5;
-}
-
-#controls .property .config:hover {
-	cursor: pointer;
-	opacity: 1;
-}
-
-#controls .ui-input-slider:hover .ui-input-slider-right {
-    opacity: 1;
-}
-
-#controls .ui-input-slider:hover .ui-input-slider-left {
-    opacity: 1;
-}
-
-#controls .property .ui-dropdown {
-	margin: 0 10px;
-	float: left;
-}
-
-
-#controls .property .ui-checkbox {
-	margin: 0 0 0 16px;
-	float: left;
-}
-
-#controls .property .ui-checkbox label {
-	height: 0.85em;
-	width: 10px;
-}
-
-/* dropdowns */
-#controls .ui-dropdown {
-	width: 50px;
-	height: 1.7em;
-	border-radius: 2px;
-}
-
-#controls .ui-dropdown-select {
-	line-height: 1.6em;
-}
-
-#controls .ui-dropdown-list {
-	top: 20px;
-}
-
-#controls .ui-dropdown-list {
-	border-width: 1px;
-	text-align: center;
-}
-
-#controls .ui-dropdown-list:hover {
-	overflow: hidden;
-}
-
-#controls .border-repeat {
-	margin: 0 0 0 16px !important;
-	width: 80px;
-}
-
-#controls .border-repeat .ui-dropdown-list {
-	height: 6.2em;
-	border-width: 1px;
-	text-align: center;
-}
-
-/* border-image-slice */
-
-
-#border-slice-control .ui-dropdown-list {
-	height: 4.3em;
-}
-
-/* border-image-width */
-
-#border-width-control .ui-dropdown-list {
-	height: 6.2em;
-}
-
-/* border-image-outset */
-
-#border-outset-control .ui-dropdown-list {
-	height: 4.3em;
-}
-
-#aditional-properties .property {
-	width: 200px;
-}
-
-#aditional-properties .ui-input-slider &gt; input {
-	width: 80px !important;
-}
-
-/* unit settings panel */
-
-#unit-settings {
-	padding: 10px;
-	position: absolute;
-
-	background: #FFF;
-
-	font-size: 12px;
-	border-radius: 3px;
-	border: 1px solid #CCC;
-	text-align: center;
-	color: #555;
-
-	position: absolute;
-	z-index: 1000;
-
-	box-shadow: 0 0 3px 0 #BABABA;
-	transition: all 0.25s;
-}
-
-#unit-settings .title {
-	width: 100%;
-	margin: -5px auto 0;
-
-	color: #666;
-	font-size: 14px;
-	font-weight: bold;
-	line-height: 25px;
-	border-bottom: 1px solid #E5E5E5;
-}
-
-#unit-settings .ui-input-slider {
-	margin: 10px 0 0 0;
-}
-
-#unit-settings .ui-input-slider-info {
-	width: 50px;
-	line-height: 1.5em;
-}
-
-#unit-settings input {
-	font-size: 12px;
-	width: 40px !important;
-}
-
-#unit-settings .close {
-	width: 16px;
-	height: 16px;
-	background: url('https://mdn.mozillademos.org/files/6019/close.png') no-repeat center center;
-	background-size: 75%;
-
-	position: absolute;
-	top: 4px;
-	right: 4px;
-	opacity: 0.5;
-}
-
-#unit-settings .close:hover {
-	cursor: pointer;
-	opacity: 1;
-}
-
-#unit-settings[data-active='true'] {
-	opacity: 1;
-}
-
-#unit-settings[data-active='false'] {
-	opacity: 0;
-	top: -100px !important;
-}
-
-/*
- * CSS Output Code
- */
-
-#output {
-	padding: 10px;
-	border: 2px dashed #888 !important;
-	box-shadow: none !important;
-	border-radius: 3px;
-	overflow: hidden;
-
-	-moz-user-select: text;
-	-webkit-user-select: text;
-	-ms-user-select: text;
-	user-select: text;
-}
-
-
-@media (min-width: 880px) {
-	#output {
-		width: 63.33% !important;
-	}
-}
-
-@media (max-width: 879px) {
-	#output {
-		width: 87% !important;
-	}
-}
-
-
-#output .title {
-	width: 100%;
-	height: 30px;
-	margin: 0 0 10px 0;
-	line-height: 25px;
-
-	text-align: center;
-	color: #AAA;
-}
-
-#output .css-property {
-	width: 100%;
-	margin: 0;
-	color: #555;
-	font-size: 14px;
-	line-height: 18px;
-	float: left;
-}
-
-#output .css-property .name {
-	width: 30%;
-	font-weight: bold;
-	text-align: right;
-	float: left;
-}
-
-#output .css-property .value {
-	width: 65%;
-	padding: 0 2.5%;
-	word-break: break-all;
-	float: left;
-}
-
-</pre>
-
-<h3 id="JavaScript_Content">JavaScript Content</h3>
-
-<pre class="brush: js">'use strict';
-
-/**
- * UI-SlidersManager
- */
-
-var InputSliderManager = (function InputSliderManager() {
-
-	var subscribers = {};
-	var sliders = [];
-
-	var InputComponent = function InputComponent(obj) {
-		var input = document.createElement('input');
-		input.setAttribute('type', 'text');
-		input.style.width = 50 + obj.precision * 10 + 'px';
-
-		input.addEventListener('click', function(e) {
-			this.select();
-		});
-
-		input.addEventListener('change', function(e) {
-			var value = parseFloat(e.target.value);
-
-			if (isNaN(value) === true)
-				setValue(obj.topic, obj.value);
-			else
-				setValue(obj.topic, value);
-		});
-
-		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) {
-			document.removeEventListener("mousemove", sliderMotion);
-			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("mouseup", slideEnd);
-			document.addEventListener("mousemove", sliderMotion);
-		});
-
-		var slideEnd = function slideEnd(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		= parseFloat(node.getAttribute('data-min'));
-		var max		= parseFloat(node.getAttribute('data-max'));
-		var step	= parseFloat(node.getAttribute('data-step'));
-		var value	= parseFloat(node.getAttribute('data-value'));
-		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;
-		var precision = node.getAttribute('data-precision') | 0;
-
-		this.min = isNaN(min) ? 0 : min;
-		this.max = isNaN(max) ? 100 : max;
-		this.precision = precision &gt;= 0 ? precision : 0;
-		this.step = step &lt; 0 || isNaN(step) ? 1 : step.toFixed(precision);
-		this.topic = topic;
-		this.node = node;
-		this.unit = unit === null ? '' : unit;
-		this.sensivity = sensivity &gt; 0 ? sensivity : 5;
-		value = isNaN(value) ? this.min : value;
-
-		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);
-
-		this.input = input;
-		sliders[topic] = this;
-		setValue(topic, value);
-	};
-
-	InputSlider.prototype.setInputValue = function setInputValue() {
-		this.input.value = this.value.toFixed(this.precision) + this.unit;
-	};
-
-	var setValue = function setValue(topic, value, send_notify) {
-		var slider = sliders[topic];
-		if (slider === undefined)
-			return;
-
-		value = parseFloat(value.toFixed(slider.precision));
-
-		if (value &gt; slider.max) value = slider.max;
-		if (value &lt; slider.min)	value = slider.min;
-
-		slider.value = value;
-		slider.node.setAttribute('data-value', value);
-
-		slider.setInputValue();
-
-		if (send_notify === false)
-			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 setStep = function setStep(topic, value) {
-		var slider = sliders[topic];
-		if (slider === undefined)
-			return;
-
-		slider.step = parseFloat(value);
-		setValue(topic, slider.value);
-	};
-
-	var setPrecision = function setPrecision(topic, value) {
-		var slider = sliders[topic];
-		if (slider === undefined)
-			return;
-
-		value = value | 0;
-		slider.precision = value;
-
-		var step = parseFloat(slider.step.toFixed(value));
-		if (step === 0)
-			slider.step = 1 / Math.pow(10, value);
-
-		setValue(topic, slider.value);
-	};
-
-	var setSensivity = function setSensivity(topic, value) {
-		var slider = sliders[topic];
-		if (slider === undefined)
-			return;
-
-		value = value | 0;
-
-		slider.sensivity = value &gt; 0 ? value : 5;
-	};
-
-	var getNode =  function getNode(topic) {
-		return sliders[topic].node;
-	};
-
-	var getPrecision =  function getPrecision(topic) {
-		return sliders[topic].precision;
-	};
-
-	var getStep =  function getStep(topic) {
-		return sliders[topic].step;
-	};
-
-	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() {
-		if (subscribers[this.topic] === undefined)
-			return;
-		for (var i = 0; i &lt; subscribers[this.topic].length; i++)
-			subscribers[this.topic][i](this.value);
-	};
-
-	var createSlider = function createSlider(topic, label) {
-		var slider = document.createElement('div');
-		slider.className = 'ui-input-slider';
-		slider.setAttribute('data-topic', topic);
-
-		if (label !== undefined)
-			slider.setAttribute('data-info', label);
-
-		new InputSlider(slider);
-		return slider;
-	};
-
-	var init = function init() {
-		var elem = document.querySelectorAll('.ui-input-slider');
-		var size = elem.length;
-		for (var i = 0; i &lt; size; i++)
-			new InputSlider(elem[i]);
-	};
-
-	return {
-		init : init,
-		setMax : setMax,
-		setMin : setMin,
-		setUnit : setUnit,
-		setStep : setStep,
-		getNode : getNode,
-		getStep : getStep,
-		setValue : setValue,
-		subscribe : subscribe,
-		unsubscribe : unsubscribe,
-		setPrecision : setPrecision,
-		setSensivity : setSensivity,
-		getPrecision : getPrecision,
-		createSlider : createSlider,
-	};
-
-})();
-
-
-/**
- * UI-DropDown Select
- */
-
-var DropDownManager = (function DropdownManager() {
-
-	var subscribers = {};
-	var dropdowns = [];
-	var active = null;
-
-	var visbility = ["hidden", "visible"];
-
-
-	var DropDown = function DropDown(node) {
-		var topic = node.getAttribute('data-topic');
-		var label = node.getAttribute('data-label');
-		var selected = node.getAttribute('data-selected') | 0;
-
-		var select = document.createElement('div');
-		var list = document.createElement('div');
-		var uval = 0;
-		var option = null;
-		var option_value = null;
-
-		list.className = 'ui-dropdown-list';
-		select.className = 'ui-dropdown-select';
-
-		while (node.firstElementChild !== null) {
-			option = node.firstElementChild;
-			option_value = option.getAttribute('data-value');
-
-			if (option_value === null)
-				option.setAttribute('data-value', uval);
-
-			list.appendChild(node.firstElementChild);
-			uval++;
-		}
-
-		node.appendChild(select);
-		node.appendChild(list);
-
-		select.onclick = this.toggle.bind(this);
-		list.onclick = this.updateValue.bind(this);
-		document.addEventListener('click', clickOut);
-
-		this.state = 0;
-		this.time = 0;
-		this.dropmenu = list;
-		this.select = select;
-		this.toggle(false);
-		this.value = {};
-		this.topic = topic;
-
-		if (label)
-			select.textContent = label;
-		else
-			this.setNodeValue(list.children[selected]);
-
-		dropdowns[topic] = this;
-
-	};
-
-	DropDown.prototype.toggle = function toggle(state) {
-		if (typeof(state) === 'boolean')
-			this.state = state === false ? 0 : 1;
-		else
-			this.state = 1 ^ this.state;
-
-		if (active !== this) {
-			if (active)
-				active.toggle(false);
-			active = this;
-		}
-
-		if (this.state === 0)
-			this.dropmenu.setAttribute('data-hidden', 'true');
-		else
-			this.dropmenu.removeAttribute('data-hidden');
-
-	};
-
-	var clickOut = function clickOut(e) {
-		if (active.state === 0 ||
-			e.target === active.dropmenu ||
-			e.target === active.select)
-			return;
-
-		active.toggle(false);
-	};
-
-	DropDown.prototype.updateValue = function updateValue(e) {
-
-		if (Date.now() - this.time &lt; 500)
-			return;
-
-		if (e.target.className !== "ui-dropdown-list") {
-			this.setNodeValue(e.target);
-			this.toggle(false);
-		}
-
-		this.time = Date.now();
-	};
-
-	DropDown.prototype.setNodeValue = function setNodeValue(node) {
-		this.value['name'] = node.textContent;
-		this.value['value'] = node.getAttribute('data-value');
-
-		this.select.textContent = node.textContent;
-		this.select.setAttribute('data-value', this.value['value']);
-
-		notify.call(this);
-	};
-
-	var createDropDown = function createDropDown(topic, options) {
-
-		var dropdown = document.createElement('div');
-		dropdown.setAttribute('data-topic', topic);
-		dropdown.className = 'ui-dropdown';
-
-		for (var i in options) {
-			var x = document.createElement('div');
-			x.setAttribute('data-value', i);
-			x.textContent = options[i];
-			dropdown.appendChild(x);
-		}
-
-		new DropDown(dropdown);
-
-		return dropdown;
-	};
-
-	var setValue = function setValue(topic, index) {
-		if (dropdowns[topic] === undefined ||
-			index &gt;= dropdowns[topic].dropmenu.children.length)
-			return;
-
-		dropdowns[topic].setNodeValue(dropdowns[topic].dropmenu.children[index]);
-	};
-
-	var subscribe = function subscribe(topic, callback) {
-		if (subscribers[topic] === undefined)
-			subscribers[topic] = [];
-		subscribers[topic].push(callback);
-	};
-
-	var unsubscribe = function unsubscribe(topic, callback) {
-		var index = subscribers[topic].indexOf(callback);
-		subscribers[topic].splice(index, 1);
-	};
-
-	var notify = function notify() {
-		if (subscribers[this.topic] === undefined)
-			return;
-
-		for (var i in subscribers[this.topic]) {
-			subscribers[this.topic][i](this.value);
-		}
-	};
-
-	var init = function init() {
-		var elem, size;
-
-		elem = document.querySelectorAll('.ui-dropdown');
-		size = elem.length;
-		for (var i = 0; i &lt; size; i++)
-			new DropDown(elem[i]);
-
-	};
-
-	return {
-		init : init,
-		setValue : setValue,
-		subscribe : subscribe,
-		unsubscribe : unsubscribe,
-		createDropDown : createDropDown
-	};
-
-})();
-
-
-/**
- * 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) {
-		var obj = buttons[topic];
-		if (obj === undefined)
-			return;
-
-		obj.checkbox.checked = value;
-		notify.call(obj);
-	};
-
-	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() {
-		if (subscribers[this.topic] === undefined)
-			return;
-		for (var i = 0; i &lt; 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 &lt; size; i++)
-			new CheckBox(elem[i]);
-	};
-
-	return {
-		init : init,
-		setValue : setValue,
-		subscribe : subscribe,
-		unsubscribe : unsubscribe
-	};
-
-})();
-
-window.addEventListener("load", function() {
-	BorderImage.init();
-});
-
-var BorderImage = (function BorderImage() {
-
-	var getElemById = document.getElementById.bind(document);
-
-	var subject;
-	var preview;
-	var guidelines = [];
-	var positions = ['top', 'right', 'bottom', 'left'];
-
-	var makeDraggable = function makeDraggable(elem) {
-
-		var offsetTop;
-		var offsetLeft;
-
-		elem.setAttribute('data-draggable', 'true');
-
-		var dragStart = function dragStart(e) {
-			if (e.target.getAttribute('data-draggable') !== 'true' ||
-				e.target !== elem || e.button !== 0)
-				return;
-
-			offsetLeft = e.clientX - elem.offsetLeft;
-			offsetTop = e.clientY - elem.offsetTop;
-
-			document.addEventListener('mousemove', mouseDrag);
-			document.addEventListener('mouseup', dragEnd);
-		};
-
-		var dragEnd = function dragEnd(e) {
-			if (e.button !== 0)
-				return;
-
-			document.removeEventListener('mousemove', mouseDrag);
-			document.removeEventListener('mouseup', dragEnd);
-		};
-
-		var mouseDrag = function mouseDrag(e) {
-
-			elem.style.left = e.clientX - offsetLeft + 'px';
-			elem.style.top = e.clientY - offsetTop + 'px';
-		};
-
-		elem.addEventListener('mousedown', dragStart, false);
-	};
-
-	var PreviewControl = function PreviewControl() {
-
-		var dragging = false;
-		var valueX = null;
-		var valueY = null;
-
-		var dragStart = function dragStart(e) {
-			if (e.button !== 0)
-				return;
-
-			valueX = e.clientX - preview.clientWidth;
-			valueY = e.clientY - preview.clientHeight;
-			dragging = true;
-
-			document.addEventListener('mousemove', mouseDrag);
-		};
-
-		var dragEnd = function dragEnd(e) {
-			if (e.button !== 0 || dragging === false)
-				return;
-
-			document.removeEventListener('mousemove', mouseDrag);
-			dragging = false;
-		};
-
-		var mouseDrag = function mouseDrag(e) {
-			InputSliderManager.setValue('preview-width', e.clientX - valueX);
-			InputSliderManager.setValue('preview-height', e.clientY - valueY);
-		};
-
-		var init = function init() {
-
-			makeDraggable(preview);
-			makeDraggable(subject);
-
-			var handle = document.createElement('div');
-			handle.className = 'resize-handle';
-
-			handle.addEventListener('mousedown', dragStart);
-			document.addEventListener('mouseup', dragEnd);
-
-			preview.appendChild(handle);
-
-		};
-
-		return {
-			init: init
-		};
-
-	}();
-
-	var ImageReader = (function ImageReader() {
-
-		var fReader = new FileReader();
-		var browse = document.createElement('input');
-
-		var loadImage = function loadImage(e) {
-			if (browse.files.length === 0)
-				return;
-
-			var file = browse.files[0];
-
-			if (file.type.slice(0, 5) !== 'image')
-				return;
-
-			fReader.readAsDataURL(file);
-
-			return false;
-		};
-
-		fReader.onload = function(e) {
-			ImageControl.loadRemoteImage(e.target.result);
-		};
-
-		var load = function load() {
-			browse.click();
-		};
-
-		browse.setAttribute('type', 'file');
-		browse.style.display = 'none';
-		browse.onchange = loadImage;
-
-		return {
-			load: load
-		};
-
-	})();
-
-	var ImageControl = (function ImageControl() {
-
-		var scale = 0.5;
-		var imgSource = new Image();
-		var imgState = null;
-		var selected = null;
-
-
-		var topics = ['slice', 'width', 'outset'];
-		var properties = {};
-		properties['border1'] = {
-			fill			: false,
-
-			slice_values	: [27, 27, 27, 27],
-			width_values	: [20, 20, 20, 20],
-			outset_values	: [0, 0, 0, 0],
-
-			slice_units		: [0, 0, 0, 0],
-			width_units		: [0, 0, 0, 0],
-			outset_units	: [0, 0, 0, 0],
-
-			repeat			: [1, 1],
-			size			: [300, 200],
-			preview_area	: 400
-		};
-
-		properties['border2'] = {
-			fill			: false,
-
-			slice_values	: [33, 33, 33, 33],
-			width_values	: [1.5, 1.5, 1.5, 1.5],
-			outset_values	: [0, 0, 0, 0],
-
-			slice_units		: [1, 1, 1, 1],
-			width_units		: [2, 2, 2, 2],
-			outset_units	: [0, 0, 0, 0],
-
-			repeat			: [2, 2],
-			size			: [300, 200],
-			preview_area	: 400
-		};
-
-		properties['border3'] = {
-			fill			: true,
-
-			slice_values	: [15, 15, 15, 15],
-			width_values	: [10, 10, 10, 10],
-			outset_values	: [0, 0, 0, 0],
-
-			slice_units		: [0, 0, 0, 0],
-			width_units		: [0, 0, 0, 0],
-			outset_units	: [0, 0, 0, 0],
-
-			repeat			: [2, 2],
-			size			: [300, 200],
-			preview_area	: 400
-		};
-
-		properties['border4'] = {
-			fill			: false,
-
-			slice_values	: [13, 13, 13, 13],
-			width_values	: [13, 13, 13, 13],
-			outset_values	: [13, 13, 13, 13],
-
-			slice_units		: [0, 0, 0, 0],
-			width_units		: [0, 0, 0, 0],
-			outset_units	: [0, 0, 0, 0],
-
-			repeat			: [0, 0],
-			size			: [300, 200],
-			preview_area	: 400
-		};
-
-		properties['border5'] = {
-			fill			: false,
-
-			slice_values	: [0, 12, 0, 12],
-			width_values	: [0, 12, 0, 12],
-			outset_values	: [0, 0, 0, 0],
-
-			slice_units		: [0, 0, 0, 0],
-			width_units		: [0, 0, 0, 0],
-			outset_units	: [0, 0, 0, 0],
-
-			repeat			: [0, 0],
-			size			: [300, 200],
-			preview_area	: 400,
-		};
-
-		properties['border6'] = {
-			fill			: false,
-
-			slice_values	: [42, 42, 42, 42],
-			width_values	: [42, 42, 42, 42],
-			outset_values	: [0, 0, 0, 0],
-
-			slice_units		: [0, 0, 0, 0],
-			width_units		: [0, 0, 0, 0],
-			outset_units	: [0, 0, 0, 0],
-
-			repeat			: [2, 2],
-			size			: [350, 350],
-			preview_area	: 500,
-		};
-
-
-		var loadLocalImage = function loadLocalImage(source) {
-			var location = "images/" + source;
-			imgSource.src = location;
-		};
-
-		var loadRemoteImage = function loadRemoteImage(source) {
-			imgSource.src = source;
-			if (selected)
-				selected.removeAttribute('selected');
-			Tool.setOutputCSS('source', 'url("' + source + '")');
-		};
-
-		var pickImage = function pickImage(e) {
-			if (e.target.className === 'image') {
-				selected = e.target;
-				selected.setAttribute('selected', 'true');
-				loadRemoteImage(e.target.src);
-				imgState = e.target.getAttribute('data-stateID');
-			}
-		};
-
-		var loadImageState = function loadImageState(stateID) {
-			if (properties[stateID] === undefined)
-				return;
-
-			var prop = properties[stateID];
-			var topic;
-			var unit_array;
-			var value_array;
-
-			for (var i in topics) {
-				for (var j=0; j&lt;4; j++) {
-					topic = topics[i] + '-' + positions[j];
-					unit_array = topics[i] + '_units';
-					value_array = topics[i] + '_values';
-					InputSliderManager.setValue(topic, prop[value_array][j]);
-					DropDownManager.setValue(topic, prop[unit_array][j]);
-				}
-			}
-
-			ButtonManager.setValue('slice-fill', prop['fill']);
-			DropDownManager.setValue('image-repeat-X', prop['repeat'][0]);
-			DropDownManager.setValue('image-repeat-Y', prop['repeat'][1]);
-			InputSliderManager.setValue('preview-width', prop['size'][0]);
-			InputSliderManager.setValue('preview-height', prop['size'][1]);
-			InputSliderManager.setValue('preview-area-height', prop['preview_area']);
-		};
-
-		var update = function update() {
-			scale =  Math.min(300, (30000 / this.width) | 0);
-			setScale(scale);
-			InputSliderManager.setValue('scale', scale, false);
-
-			subject.style.backgroundImage = 'url("' + this.src + '")';
-			preview.style.borderImageSource = 'url("' + this.src + '")';
-
-			guidelines['slice-top'].setMax(this.height);
-			guidelines['slice-right'].setMax(this.width);
-			guidelines['slice-bottom'].setMax(this.height);
-			guidelines['slice-left'].setMax(this.width);
-
-			if (imgState)
-				loadImageState(imgState);
-		};
-
-		var setScale = function setScale(value) {
-			scale = value;
-			var w = imgSource.width * scale / 100 | 0;
-			var h = imgSource.height * scale / 100 | 0;
-			subject.style.width = w + 'px';
-			subject.style.height = h + 'px';
-
-			for (var i = 0; i &lt; positions.length; i++)
-				guidelines['slice-' + positions[i]].updateGuidelinePos();
-		};
-
-		var getScale = function getScale() {
-			return scale/100;
-		};
-
-		var toggleGallery = function toggleGallery() {
-			var gallery = getElemById('image-gallery');
-			var button  = getElemById('toggle-gallery');
-			var state = 1;
-			button.addEventListener('click', function() {
-				state = 1 ^ state;
-				if (state === 0) {
-					gallery.setAttribute('data-collapsed', 'true');
-					button.setAttribute('data-action', 'show');
-				}
-				else {
-					gallery.removeAttribute('data-collapsed');
-					button.setAttribute('data-action', 'hide');
-				}
-			});
-		};
-
-		var init = function init() {
-			var gallery = getElemById('image-gallery');
-			var browse = getElemById('load-image');
-			var remote = getElemById('remote-url');
-			var load_remote = getElemById('load-remote');
-
-			remote.addEventListener('change', function(){
-				loadRemoteImage(this.value);
-			});
-
-			load_remote.addEventListener('click', function(){
-				loadRemoteImage(remote.value);
-			});
-
-			browse.addEventListener('click', ImageReader.load);
-			gallery.addEventListener('click', pickImage);
-			imgSource.addEventListener('load', update);
-
-			InputSliderManager.subscribe('scale', setScale);
-			InputSliderManager.setValue('scale', scale);
-			imgState = 'border1';
-			loadRemoteImage('https://mdn.mozillademos.org/files/6007/border-image-1.png');
-			toggleGallery();
-		};
-
-		return {
-			init: init,
-			getScale : getScale,
-			loadRemoteImage: loadRemoteImage
-		};
-
-	})();
-
-	var GuideLine = function GuideLine(node) {
-		var topic = node.getAttribute('data-topic');
-		var axis = node.getAttribute('data-axis');
-
-		this.node = node;
-		this.topic = topic;
-		this.axis = axis;
-		this.info = topic.split('-')[1];
-
-		this.position = 0;
-		this.value = 0;
-		this.unit = 0;
-		this.max = 0;
-		this.pos = positions.indexOf(this.info);
-
-		guidelines[topic] = this;
-
-		var relative_container = document.createElement('div');
-		var tooltip = document.createElement('div');
-		var tooltip2 = document.createElement('div');
-
-		tooltip.className = 'tooltip';
-		tooltip.setAttribute('data-info', this.info);
-
-		tooltip2.className = 'tooltip2';
-		tooltip2.textContent = this.info;
-		tooltip2.setAttribute('data-info', this.info);
-
-		this.tooltip = tooltip;
-
-		relative_container.appendChild(tooltip);
-		relative_container.appendChild(tooltip2);
-		node.appendChild(relative_container);
-
-		var startX = 0;
-		var startY = 0;
-		var start = 0;
-
-		var startDrag = function startDrag(e) {
-			startX = e.clientX;
-			startY = e.clientY;
-			start = guidelines[topic].position;
-			document.body.setAttribute('data-move', axis);
-			relative_container.setAttribute('data-active', '');
-			node.setAttribute('data-active', '');
-
-			document.addEventListener('mousemove', updateGuideline);
-			document.addEventListener('mouseup', endDrag);
-		};
-
-		var endDrag = function endDrag() {
-			document.body.removeAttribute('data-move');
-			relative_container.removeAttribute('data-active');
-			node.removeAttribute('data-active');
-
-			document.removeEventListener('mousemove', updateGuideline);
-		};
-
-		var updateGuideline = function updateGuideline(e) {
-			var value;
-			if (topic === 'slice-top')
-				value = e.clientY - startY + start;
-
-			if (topic === 'slice-right')
-				value = startX - e.clientX + start;
-
-			if (topic === 'slice-bottom')
-				value = startY - e.clientY + start;
-
-			if (topic === 'slice-left')
-				value = e.clientX - startX + start;
-
-			if (this.unit === 0)
-				InputSliderManager.setValue(topic, value * 1 / ImageControl.getScale() | 0);
-			else {
-				InputSliderManager.setValue(topic, (value * 100 / (this.max * ImageControl.getScale())) | 0);
-			}
-
-		}.bind(this);
-
-		node.addEventListener("mousedown", startDrag);
-
-		InputSliderManager.subscribe(topic, this.setPosition.bind(this));
-		InputSliderManager.setValue(topic, this.position);
-	};
-
-
-	GuideLine.prototype.updateGuidelinePos = function updateGuidelinePos() {
-		if (this.unit === 0)
-			this.position = this.value * ImageControl.getScale() | 0;
-		else
-			this.position = this.value * this.max * ImageControl.getScale() / 100 | 0;
-
-		this.node.style[this.info] = this.position + 'px';
-	};
-
-	GuideLine.prototype.setPosition = function setPosition(value) {
-		this.value = value;
-		this.tooltip.textContent = value;
-		this.updateGuidelinePos();
-		Tool.setBorderSlice(this.pos, value);
-	};
-
-	GuideLine.prototype.setMax = function setMax(max) {
-		this.max = max;
-		this.updateLimit();
-	};
-
-	GuideLine.prototype.updateLimit = function updateLimit() {
-		if (this.unit === 1)
-			InputSliderManager.setMax(this.topic, 100);
-		else
-			InputSliderManager.setMax(this.topic, this.max);
-	};
-
-	GuideLine.prototype.setUnit = function setUnit(type) {
-		if (type === '%')	this.unit = 1;
-		if (type === '')	this.unit = 0;
-		this.updateLimit();
-	};
-
-	/*
-	 * Unit panel
-	 */
-	var UnitPanel = (function UnitPanel () {
-
-		var panel;
-		var title;
-		var precision;
-		var step;
-		var unit_topic = null; // settings are made for this topic
-		var step_option = [1, 0.1, 0.01];
-
-		var updatePrecision = function updatePrecision(value) {
-			InputSliderManager.setPrecision('unit-step', value);
-			InputSliderManager.setStep('unit-step', step_option[value]);
-			InputSliderManager.setMin('unit-step', step_option[value]);
-
-			if (unit_topic)
-				InputSliderManager.setPrecision(unit_topic, value);
-		};
-
-		var updateUnitSettings = function updateUnitSettings(value) {
-			if (unit_topic)
-				InputSliderManager.setStep(unit_topic, value);
-		};
-
-		var show = function show(e) {
-			var topic = e.target.getAttribute('data-topic');
-			var precision = InputSliderManager.getPrecision(topic);
-			var step = InputSliderManager.getStep(topic);
-
-			unit_topic = topic;
-			title.textContent = topic;
-
-			panel.setAttribute('data-active', 'true');
-			panel.style.top = e.target.offsetTop - 40 + 'px';
-			panel.style.left = e.target.offsetLeft + 30 + 'px';
-
-			InputSliderManager.setValue('unit-precision', precision);
-			InputSliderManager.setValue('unit-step', step);
-		};
-
-		var init = function init() {
-			panel = document.createElement('div');
-			title = document.createElement('div');
-			var close = document.createElement('div');
-
-			step = InputSliderManager.createSlider('unit-step', 'step');
-			precision = InputSliderManager.createSlider('unit-precision', 'precision');
-
-			InputSliderManager.setStep('unit-precision', 1);
-			InputSliderManager.setMax('unit-precision', 2);
-			InputSliderManager.setValue('unit-precision', 2);
-			InputSliderManager.setSensivity('unit-precision', 20);
-
-			InputSliderManager.setValue('unit-step', 1);
-			InputSliderManager.setStep('unit-step', 0.01);
-			InputSliderManager.setPrecision('unit-step', 2);
-
-			InputSliderManager.subscribe('unit-precision', updatePrecision);
-			InputSliderManager.subscribe('unit-step', updateUnitSettings);
-
-			close.addEventListener('click', function () {
-				panel.setAttribute('data-active', 'false');
-			});
-
-			title.textContent = 'Properties';
-			title.className = 'title';
-			close.className = 'close';
-			panel.id = 'unit-settings';
-			panel.setAttribute('data-active', 'false');
-			panel.appendChild(title);
-			panel.appendChild(precision);
-			panel.appendChild(step);
-			panel.appendChild(close);
-			document.body.appendChild(panel);
-		};
-
-		return {
-			init : init,
-			show : show
-		};
-
-	})();
-
-	/**
-	 * Tool Manager
-	 */
-	var Tool = (function Tool() {
-		var preview_area;
-		var dropdown_unit_options = [
-			{ '' : '--', '%' : '%'},
-			{ 'px' : 'px', '%' : '%', 'em' : 'em'},
-			{ 'px' : 'px', 'em' : 'em'},
-		];
-
-		var border_slice = [];
-		var border_width = [];
-		var border_outset = [];
-
-		var border_slice_values = [];
-		var border_width_values = [];
-		var border_outset_values = [];
-
-		var border_slice_units = ['', '', '', ''];
-		var border_width_units = ['px', 'px', 'px', 'px'];
-		var border_outset_units = ['px', 'px', 'px', 'px'];
-
-		var border_fill = false;
-		var border_repeat = ['round', 'round'];
-		var CSS_code = {
-			'source' : null,
-			'slice' : null,
-			'width' : null,
-			'outset' : null,
-			'repeat' : null
-		};
-
-		var setBorderSlice = function setBorderSlice(positionID, value) {
-			border_slice[positionID] = value + border_slice_units[positionID];
-			updateBorderSlice();
-		};
-
-		var updateBorderSlice = function updateBorderSlice() {
-			var value = border_slice.join(' ');
-			if (border_fill === true)
-				value += ' fill';
-
-			preview.style.borderImageSlice = value;
-			setOutputCSS('slice', value);
-		};
-
-		var setBorderFill = function setBorderFill(value) {
-			border_fill = value;
-			var bimgslice = border_slice.join(' ');;
-			if (value === true)
-				bimgslice += ' fill';
-
-			preview.style.borderImageSlice = bimgslice;
-		};
-
-		var updateBorderWidth = function updateBorderWidth() {
-			var value = border_width.join(' ');
-			preview.style.borderImageWidth = value;
-			setOutputCSS('width', value);
-		};
-
-		var updateBorderOutset = function updateBorderOutset() {
-			var value = border_outset.join(' ');
-			preview.style.borderImageOutset = border_outset.join(' ');
-			setOutputCSS('outset', value);
-		};
-
-		var setBorderRepeat = function setBorderRepeat(obj) {
-			border_repeat[obj.value] = obj.name;
-			var value = border_repeat.join(' ');
-			preview.style.borderImageRepeat = value;
-			setOutputCSS('repeat', value);
-		};
-
-		var setOutputCSS = function setOutputCSS(topic, value) {
-			CSS_code[topic].textContent = value + ';';
-		};
-
-		var setPreviewFontSize = function setPreviewFontSize(value) {
-			preview.style.fontSize = value + 'px';
-		};
-
-		var setPreviewWidth = function setPreviewWidth(value) {
-			preview.style.width = value + 'px';
-		};
-
-		var setPreviewHeight = function setPreviewHeight(value) {
-			preview.style.height = value + 'px';
-		};
-
-		var setPreviewAreaHeight = function setPreviewAreaHeight(value) {
-			preview_area.style.height = value + 'px';
-		};
-
-		var updateDragOption = function updateDragOption(value) {
-			if (value === true)
-				subject.setAttribute('data-draggable', 'true');
-			else
-				subject.removeAttribute('data-draggable');
-		};
-
-		var createProperty = function createProperty(topic, labelID, optionsID) {
-
-			var slider = InputSliderManager.createSlider(topic, positions[labelID]);
-			var dropdown = DropDownManager.createDropDown(topic, dropdown_unit_options[optionsID]);
-
-			InputSliderManager.setSensivity(topic, 3);
-			InputSliderManager.setPrecision(topic, 1);
-
-			var property = document.createElement('div');
-			var config = document.createElement('div');
-
-			property.className = 'property';
-			config.className = 'config';
-			config.setAttribute('data-topic', topic);
-			config.addEventListener('click', UnitPanel.show);
-
-			property.appendChild(slider);
-			property.appendChild(dropdown);
-			property.appendChild(config);
-
-			return property;
-		};
-
-		var initBorderSliceControls = function initBorderSliceControls() {
-			var container = getElemById('border-slice-control');
-
-			var listenForChanges = function listenForChanges(topic, id) {
-				InputSliderManager.subscribe(topic, function(value) {
-					border_slice_values[id] = value;
-					border_slice[id] = value + border_slice_units[id];
-					updateBorderSlice();
-				});
-
-				DropDownManager.subscribe(topic, function(obj) {
-					guidelines[topic].setUnit(obj.value);
-					border_slice_units[id] = obj.value;
-					border_slice[id] = border_slice_values[id] + obj.value;
-					updateBorderSlice();
-				});
-			};
-
-			for (var i = 0; i &lt; positions.length; i++) {
-				var topic = 'slice-' + positions[i];
-				var property = createProperty(topic, i, 0);
-				listenForChanges(topic, i);
-
-				container.appendChild(property);
-			}
-
-			container.appendChild(container.children[1]);
-
-		};
-
-		var initBorderWidthControls = function initBorderWidthControls() {
-			var container = getElemById('border-width-control');
-
-			var listenForChanges = function listenForChanges(topic, id) {
-				InputSliderManager.subscribe(topic, function(value) {
-					border_width_values[id] = value;
-					border_width[id] = value + border_width_units[id];
-					updateBorderWidth();
-				});
-
-				DropDownManager.subscribe(topic, function(obj) {
-					if (obj.value === '%')
-						InputSliderManager.setMax(topic, 100);
-					else
-						InputSliderManager.setMax(topic, 1000);
-
-					border_width_units[id] = obj.value;
-					border_width[id] = border_width_values[id] + obj.value;
-					updateBorderWidth();
-				});
-			};
-
-			for (var i = 0; i &lt; positions.length; i++) {
-				var topic = 'width-' + positions[i];
-				var property = createProperty(topic, i, 1);
-				InputSliderManager.setMax(topic, 1000);
-				listenForChanges(topic, i);
-
-				container.appendChild(property);
-			}
-		};
-
-		var initBorderOutsetControls = function initBorderOutsetControls() {
-
-			var container = getElemById('border-outset-control');
-
-			var listenForChanges = function listenForChanges(topic, id) {
-				InputSliderManager.subscribe(topic, function(value) {
-					border_outset_values[id] = value;
-					border_outset[id] = value + border_outset_units[id];
-					updateBorderOutset();
-				});
-
-				DropDownManager.subscribe(topic, function(obj) {
-					border_outset_units[id] = obj.value;
-					border_outset[id] = border_outset_values[id] + obj.value;
-					updateBorderOutset();
-				});
-			};
-
-			for (var i = 0; i &lt; positions.length; i++) {
-				var topic = 'outset-' + positions[i];
-				var property = createProperty(topic, i, 2);
-				InputSliderManager.setMax(topic, 1000);
-				listenForChanges(topic, i);
-
-				container.appendChild(property);
-			}
-		};
-
-		var init = function init() {
-
-			var gallery =
-			subject = getElemById('subject');
-			preview = getElemById("preview");
-			preview_area = getElemById("preview_section");
-
-
-			CSS_code['source'] = getElemById("out-border-source");
-			CSS_code['slice'] = getElemById("out-border-slice");
-			CSS_code['width'] = getElemById("out-border-width");
-			CSS_code['outset'] = getElemById("out-border-outset");
-			CSS_code['repeat'] = getElemById("out-border-repeat");
-
-			initBorderSliceControls();
-			initBorderWidthControls();
-			initBorderOutsetControls();
-
-			var elem = document.querySelectorAll('.guideline');
-			var size = elem.length;
-			for (var i = 0; i &lt; size; i++)
-				new GuideLine(elem[i]);
-
-			PreviewControl.init();
-
-			ButtonManager.subscribe('slice-fill',setBorderFill);
-			ButtonManager.subscribe('drag-subject', updateDragOption);
-			ButtonManager.setValue('drag-subject', false);
-
-			DropDownManager.subscribe('image-repeat-X', setBorderRepeat);
-			DropDownManager.subscribe('image-repeat-Y', setBorderRepeat);
-
-			InputSliderManager.subscribe('preview-area-height', setPreviewAreaHeight);
-			InputSliderManager.subscribe('preview-width', setPreviewWidth);
-			InputSliderManager.subscribe('preview-height', setPreviewHeight);
-			InputSliderManager.subscribe('font-size', setPreviewFontSize);
-			InputSliderManager.setValue('preview-width', 300);
-			InputSliderManager.setValue('preview-height', 200);
-		};
-
-		return {
-			init: init,
-			setOutputCSS: setOutputCSS,
-			setBorderSlice: setBorderSlice
-		};
-
-	})();
-
-	/**
-	 * Init Tool
-	 */
-	var init = function init() {
-		InputSliderManager.init();
-		DropDownManager.init();
-		ButtonManager.init();
-		UnitPanel.init();
-		Tool.init();
-		ImageControl.init();
-	};
-
-	return {
-		init : init
-	};
-
-})();
-
-</pre>
-</div>
-
-<p>{{ EmbedLiveSample('Border_Image_Generator', '100%', '1270px') }}</p>
-
-<p> </p>
diff --git a/files/zh-cn/web/css/css_background_and_borders/border-radius_generator/index.html b/files/zh-cn/web/css/css_background_and_borders/border-radius_generator/index.html
deleted file mode 100644
index 70ffc1aad1..0000000000
--- a/files/zh-cn/web/css/css_background_and_borders/border-radius_generator/index.html
+++ /dev/null
@@ -1,1600 +0,0 @@
----
-title: 圆角边框生成器
-slug: Web/CSS/CSS_Background_and_Borders/Border-radius_generator
-translation_of: Web/CSS/CSS_Background_and_Borders/Border-radius_generator
-original_slug: Web/CSS/CSS_Background_and_Borders/圆角边框发生器
----
-<p>使用<em>Border-radius generator</em>生成 CSS3 {{cssxref("border-radius")}} 样式</p>
-
-<div class="hidden">
-<h2 id="border-radius-generator" name="border-radius-generator">border-radius</h2>
-
-<h3 id="HTML_Content">HTML Content</h3>
-
-<pre class="brush: html">&lt;div id="container"&gt;
-    &lt;div class="group section"&gt;
-        &lt;div id="preview" class="col span_12"&gt;
-            &lt;div id="subject"&gt;
-                &lt;div id="top-left" class="radius-container"
-                    data-X="left" data-Y="top"&gt;
-                &lt;/div&gt;
-                &lt;div id="top-right" class="radius-container"
-                    data-X="right" data-Y="top"&gt;
-                &lt;/div&gt;
-                &lt;div id="bottom-right" class="radius-container"
-                    data-X="right" data-Y="bottom"&gt;
-                &lt;/div&gt;
-                &lt;div id="bottom-left" class="radius-container"
-                    data-X="left" data-Y="bottom"&gt;
-                &lt;/div&gt;
-
-                &lt;div id="radius-ui-sliders"&gt;
-                    &lt;div id="tlr" class="ui-input-slider" data-topic="top-left"
-                         data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
-
-                    &lt;div id="tlw" class="ui-input-slider" data-topic="top-left-w"
-                         data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
-
-                    &lt;div id="tlh" class="ui-input-slider" data-topic="top-left-h"
-                        data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
-
-                    &lt;div id="trr" class="ui-input-slider" data-topic="top-right"
-                         data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
-
-                    &lt;div id="trw" class="ui-input-slider" data-topic="top-right-w"
-                         data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
-
-                    &lt;div id="trh" class="ui-input-slider" data-topic="top-right-h"
-                        data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
-
-                    &lt;div id="brr" class="ui-input-slider" data-topic="bottom-right"
-                         data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
-
-                    &lt;div id="brw" class="ui-input-slider" data-topic="bottom-right-w"
-                         data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
-
-                    &lt;div id="brh" class="ui-input-slider" data-topic="bottom-right-h"
-                        data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
-
-                    &lt;div id="blr" class="ui-input-slider" data-topic="bottom-left"
-                         data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
-
-                    &lt;div id="blw" class="ui-input-slider" data-topic="bottom-left-w"
-                         data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
-
-                    &lt;div id="blh" class="ui-input-slider" data-topic="bottom-left-h"
-                        data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
-                &lt;/div&gt;
-            &lt;/div&gt;
-        &lt;/div&gt;
-    &lt;/div&gt;
-    &lt;div id="controls" class="group section"&gt;
-
-        &lt;div class="group section"&gt;
-            &lt;div id="dimensions"&gt;
-                &lt;div class="ui-input-slider" data-topic="width" data-info="width"
-                     data-unit=" px" data-min="150" data-max="700" data-sensivity="1"&gt;&lt;/div&gt;
-
-                &lt;div class="ui-input-slider" data-topic="height" data-info="height"
-                    data-unit=" px" data-min="75" data-max="350" data-sensivity="1"&gt;&lt;/div&gt;
-            &lt;/div&gt;
-
-            &lt;div id="output"&gt;&lt;/div&gt;
-        &lt;/div&gt;
-
-        &lt;div class="group section"&gt;
-            &lt;div id="radius-lock"&gt;
-                &lt;div class="info"&gt; rounded corner &lt;/div&gt;
-                &lt;div class="ui-checkbox" data-topic='top-left'&gt;&lt;/div&gt;
-                &lt;div class="ui-checkbox" data-topic='top-right'&gt;&lt;/div&gt;
-                &lt;div class="ui-checkbox" data-topic='bottom-right'&gt;&lt;/div&gt;
-                &lt;div class="ui-checkbox" data-topic='bottom-left'&gt;&lt;/div&gt;
-            &lt;/div&gt;
-
-            &lt;div id="unit-selection"&gt;
-                &lt;div class="info"&gt; select border units &lt;/div&gt;
-            &lt;/div&gt;
-        &lt;/div&gt;
-
-    &lt;/div&gt;
-&lt;/div&gt;
-</pre>
-
-<h3 id="CSS_Content">CSS Content</h3>
-
-<pre class="brush: css">/*  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 &gt; 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 &gt; input {
- 	display: none;
-}
-
-.ui-checkbox &gt; 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 &gt; label:hover {
-	cursor: pointer;
-}
-
-.ui-checkbox &gt; 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 &gt; 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;
-}
-
-
-</pre>
-
-<h3 id="JavaScript_Content">JavaScript Content</h3>
-
-<pre class="brush: js"><code class="language-js">'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 &gt; 0 ? max : 100;
-		this.step = step === 0 ? 1 : step;
-		this.topic = topic;
-		this.node = node;
-		this.unit = unit;
-		this.sensivity = sensivity &gt; 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 &gt; slider.max) value = slider.max;
-		if (value &lt; slider.min)	value = slider.min;
-
-		slider.value = value;
-		slider.node.setAttribute('data-value', value);
-
-		if (send_notify !== undefined &amp;&amp; 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 &lt; 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 &lt; 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 &lt; 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' &amp;&amp; y == 'top') handle.className = 'handle handle-top-left'
-		if (x === 'right' &amp;&amp; y == 'top') handle.className = 'handle handle-top-right';
-		if (x === 'right' &amp;&amp; y == 'bottom') handle.className = 'handle handle-bottom-right';
-		if (x === 'left' &amp;&amp; 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 &amp;&amp; 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 &lt; 0)	this.size = 0;
-			if (this.size &gt; this.maxR)	this.size = this.maxR;
-			this.updateRadius();
-			this.updateBorderRadius();
-			return;
-		}
-
-		if (deltaX) {
-			this.width += this.resizeX * deltaX;
-			if (this.width &lt; 0)	this.width = 0;
-			if (this.width &gt; this.maxW)	this.width = this.maxW;
-			this.updateWidth();
-		}
-
-		if (deltaY) {
-			this.height += this.resizeY * deltaY;
-			if (this.height &lt; 0) this.height = 0;
-			if (this.height &gt; 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 &lt; 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 &lt; 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 &lt; 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
-	}
-
-})();
-
-
-</code></pre>
-</div>
-
-<p>{{ EmbedLiveSample('border-radius-generator', '100%', '800px', '') }}</p>
-
-<p> </p>
diff --git a/files/zh-cn/web/css/css_background_and_borders/box-shadow_generator/index.html b/files/zh-cn/web/css/css_background_and_borders/box-shadow_generator/index.html
deleted file mode 100644
index 79b9abe9e2..0000000000
--- a/files/zh-cn/web/css/css_background_and_borders/box-shadow_generator/index.html
+++ /dev/null
@@ -1,2881 +0,0 @@
----
-title: Box-shadow generator
-slug: Web/CSS/CSS_Background_and_Borders/Box-shadow_generator
-translation_of: Web/CSS/CSS_Background_and_Borders/Box-shadow_generator
-original_slug: Web/CSS/CSS_Box_Model/Box-shadow_generator
----
-<p>这个可视化工具可以帮助你生成一个元素的CSS{{cssxref("box-shadow")}}相关代码，添加box shadow效果到你的CSS对象上。</p>
-
-<div class="hidden">
-<h2 id="box-shadow_generator" name="box-shadow_generator">box-shadow generator</h2>
-
-<h3 id="HTML_Content">HTML Content</h3>
-
-<pre class="brush: html">&lt;div id="container"&gt;
-    &lt;div class="group section"&gt;
-        &lt;div id="layer_manager"&gt;
-            &lt;div class="group section"&gt;
-                &lt;div class="button" data-type="add"&gt; &lt;/div&gt;
-                &lt;div class="button" data-type="move-up"&gt; &lt;/div&gt;
-                &lt;div class="button" data-type="move-down"&gt; &lt;/div&gt;
-            &lt;/div&gt;
-            &lt;div id="stack_container"&gt;&lt;/div&gt;
-        &lt;/div&gt;
-
-        &lt;div id="preview_zone"&gt;
-            &lt;div id="layer_menu" class="col span_12"&gt;
-                &lt;div class="button" id="element" data-type="subject" data-title="element"&gt; element &lt;/div&gt;
-                &lt;div class="button" id="before" data-type="subject" data-title=":before"&gt;
-                    :before
-                    &lt;span class="delete" data-type="disable"&gt;&lt;/span&gt;
-                &lt;/div&gt;
-                &lt;div class="button" id="after" data-type="subject" data-title=":after"&gt;
-                    :after
-                    &lt;span class="delete" data-type="disable"&gt;&lt;/span&gt;
-                &lt;/div&gt;
-                &lt;div class="ui-checkbox" data-topic='before' data-label=":before"&gt;&lt;/div&gt;
-                &lt;div class="ui-checkbox" data-topic='after' data-label=":after"&gt;&lt;/div&gt;
-            &lt;/div&gt;
-
-            &lt;div id="preview"&gt;
-                &lt;div id="obj-element"&gt;
-                    &lt;div class="content"&gt; &lt;/div&gt;
-                    &lt;div id="obj-before"&gt; &lt;/div&gt;
-                    &lt;div id="obj-after"&gt; &lt;/div&gt;
-                &lt;/div&gt;
-            &lt;/div&gt;
-        &lt;/div&gt;
-    &lt;/div&gt;
-
-    &lt;div id="controls" class="group section"&gt;
-        &lt;div class="wrap-left"&gt;
-            &lt;div class="colorpicker category"&gt;
-                &lt;div class="title"&gt; &lt;/div&gt;
-                &lt;div id="colorpicker" class="group"&gt;
-                    &lt;div id="gradient" class="gradient"&gt;
-                        &lt;div id="gradient_picker"&gt; &lt;/div&gt;
-                    &lt;/div&gt;
-                    &lt;div id="hue" data-topic="hue" class="hue"&gt;
-                        &lt;div id="hue_selector"&gt; &lt;/div&gt;
-                    &lt;/div&gt;
-                    &lt;div class="info"&gt;
-                        &lt;div class="input" data-topic="hue" data-title='H:' data-action="HSV"&gt;&lt;/div&gt;
-                        &lt;div class="input" data-topic="saturation" data-title='S:' data-action="HSV"&gt;&lt;/div&gt;
-                        &lt;div class="input" data-topic="value" data-title='V:' data-action="HSV"&gt;&lt;/div&gt;
-                    &lt;/div&gt;
-                    &lt;div class="alpha"&gt;
-                        &lt;div id="alpha" data-topic="alpha"&gt;
-                            &lt;div id="alpha_selector"&gt; &lt;/div&gt;
-                        &lt;/div&gt;
-                    &lt;/div&gt;
-                    &lt;div class="info"&gt;
-                        &lt;div class="input" data-topic="r" data-title='R:' data-action="RGB"&gt;&lt;/div&gt;
-                        &lt;div class="input" data-topic="g" data-title='G:' data-action="RGB"&gt;&lt;/div&gt;
-                        &lt;div class="input" data-topic="b" data-title='B:' data-action="RGB"&gt;&lt;/div&gt;
-                    &lt;/div&gt;
-                    &lt;div class="preview block"&gt;
-                        &lt;div id="output_color"&gt; &lt;/div&gt;
-                    &lt;/div&gt;
-                    &lt;div class="block info"&gt;
-                        &lt;div class="input" data-topic="a" data-title='alpha:' data-action="alpha"&gt;&lt;/div&gt;
-                        &lt;div class="input" data-topic="hexa" data-title='' data-action="hexa"&gt;&lt;/div&gt;
-                    &lt;/div&gt;
-                &lt;/div&gt;
-            &lt;/div&gt;
-        &lt;/div&gt;
-
-        &lt;div class="wrap-right"&gt;
-
-            &lt;div id="shadow_properties" class="category"&gt;
-                &lt;div class="title"&gt; Shadow properties &lt;/div&gt;
-                &lt;div class="group"&gt;
-                    &lt;div class="group property"&gt;
-                        &lt;div class="ui-slider-name"&gt; inset &lt;/div&gt;
-                        &lt;div class="ui-checkbox" data-topic='inset'&gt;&lt;/div&gt;
-                    &lt;/div&gt;
-                    &lt;div class="slidergroup"&gt;
-                        &lt;div class="ui-slider-name"&gt; Position x &lt;/div&gt;
-                        &lt;div class="ui-slider-btn-set" data-topic="posX" data-type="sub"&gt;&lt;/div&gt;
-                        &lt;div class="ui-slider" data-topic="posX"
-                            data-min="-500" data-max="500" data-step="1"&gt; &lt;/div&gt;
-                        &lt;div class="ui-slider-btn-set" data-topic="posX" data-type="add"&gt;&lt;/div&gt;
-                        &lt;div class="ui-slider-input" data-topic="posX" data-unit="px"&gt;&lt;/div&gt;
-                    &lt;/div&gt;
-                    &lt;div class="slidergroup"&gt;
-                        &lt;div class="ui-slider-name"&gt; Position y &lt;/div&gt;
-                        &lt;div class="ui-slider-btn-set" data-topic="posY" data-type="sub"&gt;&lt;/div&gt;
-                        &lt;div class="ui-slider" data-topic="posY"
-                            data-min="-500" data-max="500" data-step="1"&gt; &lt;/div&gt;
-                        &lt;div class="ui-slider-btn-set" data-topic="posY" data-type="add"&gt;&lt;/div&gt;
-                        &lt;div class="ui-slider-input" data-topic="posY" data-unit="px"&gt;&lt;/div&gt;
-                    &lt;/div&gt;
-                    &lt;div class="slidergroup"&gt;
-                        &lt;div class="ui-slider-name"&gt; Blur &lt;/div&gt;
-                        &lt;div class="ui-slider-btn-set" data-topic="blur" data-type="sub"&gt;&lt;/div&gt;
-                        &lt;div class="ui-slider" data-topic="blur"
-                            data-min="0" data-max="200" data-step="1"&gt; &lt;/div&gt;
-                        &lt;div class="ui-slider-btn-set" data-topic="blur" data-type="add"&gt;&lt;/div&gt;
-                        &lt;div class="ui-slider-input" data-topic="blur" data-unit="px"&gt;&lt;/div&gt;
-                    &lt;/div&gt;
-                    &lt;div class="slidergroup"&gt;
-                        &lt;div class="ui-slider-name"&gt; Spread &lt;/div&gt;
-                        &lt;div class="ui-slider-btn-set" data-topic="spread" data-type="sub"&gt;&lt;/div&gt;
-                        &lt;div class="ui-slider" data-topic="spread"
-                            data-min="-100"    data-max="100" data-step="1" data-value="50"&gt;
-                        &lt;/div&gt;
-                        &lt;div class="ui-slider-btn-set" data-topic="spread" data-type="add"&gt;&lt;/div&gt;
-                        &lt;div class="ui-slider-input" data-topic="spread" data-unit="px"&gt;&lt;/div&gt;
-                    &lt;/div&gt;
-                &lt;/div&gt;
-            &lt;/div&gt;
-
-            &lt;div id="element_properties" class="category"&gt;
-                &lt;div class="title"&gt; Class element properties &lt;/div&gt;
-                &lt;div class="group"&gt;
-                    &lt;div class="group property"&gt;
-                        &lt;div class="ui-slider-name"&gt; border &lt;/div&gt;
-                        &lt;div class="ui-checkbox" data-topic='border-state' data-state="true"&gt;&lt;/div&gt;
-                    &lt;/div&gt;
-                    &lt;div id="z-index" class="slidergroup"&gt;
-                        &lt;div class="ui-slider-name"&gt; z-index &lt;/div&gt;
-                        &lt;div class="ui-slider-btn-set" data-topic="z-index" data-type="sub"&gt;&lt;/div&gt;
-                        &lt;div class="ui-slider" data-topic="z-index"
-                            data-min="-10" data-max="10" data-step="1"&gt;&lt;/div&gt;
-                        &lt;div class="ui-slider-btn-set" data-topic="z-index" data-type="add"&gt;&lt;/div&gt;
-                        &lt;div class="ui-slider-input" data-topic="z-index"&gt;&lt;/div&gt;
-                    &lt;/div&gt;
-                    &lt;div class="slidergroup"&gt;
-                        &lt;div class="ui-slider-name"&gt; top &lt;/div&gt;
-                        &lt;div class="ui-slider-btn-set" data-topic="top" data-type="sub"&gt;&lt;/div&gt;
-                        &lt;div class="ui-slider" data-topic="top"
-                            data-min="-500" data-max="500" data-step="1"&gt; &lt;/div&gt;
-                        &lt;div class="ui-slider-btn-set" data-topic="top" data-type="add"&gt;&lt;/div&gt;
-                        &lt;div class="ui-slider-input" data-topic="top" data-unit="px"&gt;&lt;/div&gt;
-                    &lt;/div&gt;
-                    &lt;div class="slidergroup"&gt;
-                        &lt;div class="ui-slider-name"&gt; left &lt;/div&gt;
-                        &lt;div class="ui-slider-btn-set" data-topic="left" data-type="sub"&gt;&lt;/div&gt;
-                        &lt;div class="ui-slider" data-topic="left"
-                            data-min="-300" data-max="700" data-step="1"&gt; &lt;/div&gt;
-                        &lt;div class="ui-slider-btn-set" data-topic="left" data-type="add"&gt;&lt;/div&gt;
-                        &lt;div class="ui-slider-input" data-topic="left" data-unit="px"&gt;&lt;/div&gt;
-                    &lt;/div&gt;
-                    &lt;div id="transform_rotate" class="slidergroup"&gt;
-                        &lt;div class="ui-slider-name"&gt; Rotate &lt;/div&gt;
-                        &lt;div class="ui-slider-btn-set" data-topic="rotate" data-type="sub"&gt;&lt;/div&gt;
-                        &lt;div class="ui-slider" data-topic="rotate"
-                            data-min="-360" data-max="360" data-step="1" data-value="0"&gt;
-                        &lt;/div&gt;
-                        &lt;div class="ui-slider-btn-set" data-topic="rotate" data-type="add"&gt;&lt;/div&gt;
-                        &lt;div class="ui-slider-input" data-topic="rotate" data-unit="deg"&gt;&lt;/div&gt;
-                    &lt;/div&gt;
-                    &lt;div class="slidergroup"&gt;
-                        &lt;div class="ui-slider-name"&gt; Width &lt;/div&gt;
-                        &lt;div class="ui-slider-btn-set" data-topic="width" data-type="sub"&gt;&lt;/div&gt;
-                        &lt;div class="ui-slider" data-topic="width"
-                            data-min="0" data-max="1000" data-step="1" data-value="200"&gt;
-                        &lt;/div&gt;
-                        &lt;div class="ui-slider-btn-set" data-topic="width" data-type="add"&gt;&lt;/div&gt;
-                        &lt;div class="ui-slider-input" data-topic="width"  data-unit="px"&gt;&lt;/div&gt;
-                    &lt;/div&gt;
-                    &lt;div class="slidergroup"&gt;
-                        &lt;div class="ui-slider-name"&gt; Height &lt;/div&gt;
-                        &lt;div class="ui-slider-btn-set" data-topic="height" data-type="sub"&gt;&lt;/div&gt;
-                        &lt;div class="ui-slider" data-topic="height"
-                            data-min="0" data-max="400" data-step="1" data-value="200"&gt;
-                        &lt;/div&gt;
-                        &lt;div class="ui-slider-btn-set" data-topic="height" data-type="add"&gt;&lt;/div&gt;
-                        &lt;div class="ui-slider-input" data-topic="height" data-unit="px"&gt;&lt;/div&gt;
-                    &lt;/div&gt;
-                &lt;/div&gt;
-            &lt;/div&gt;
-
-            &lt;div id="output" class="category"&gt;
-                &lt;div id="menu" class="menu"&gt;&lt;/div&gt;
-                &lt;div class="title"&gt;    CSS Code &lt;/div&gt;
-                &lt;div class="group" style="border-top-left-radius: 0;"&gt;
-                    &lt;div class="output" data-topic="element" data-name="element"
-                        data-prop="width height background-color position=[relative] box-shadow"&gt;
-                    &lt;/div&gt;
-                    &lt;div class="output" data-topic="before" data-name="element:before"
-                        data-prop="content=[&amp;quot;&amp;quot;] position=[absolute] width height top left z-index background-color box-shadow transform -webkit-transform -ms-transform"&gt;
-                    &lt;/div&gt;
-                    &lt;div class="output" data-topic="after" data-name="element:after"
-                        data-prop="content=[&amp;quot;&amp;quot;] position=[absolute] width height top left z-index background-color box-shadow transform -webkit-transform -ms-transform"&gt;
-                    &lt;/div&gt;
-                &lt;/div&gt;
-            &lt;/div&gt;
-        &lt;/div&gt;
-    &lt;/div&gt;
-&lt;/div&gt;
-</pre>
-
-<h3 id="CSS_Content">CSS Content</h3>
-
-<pre class="brush: css">/*  GRID OF TWELVE
- * ========================================================================== */
-
-.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 Slider
- */
-
-.slidergroup {
-	height: 20px;
-	margin: 10px 0;
-	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
-	-moz-user-select: none;
-	user-select: none;
-}
-
-.slidergroup * {
-	float: left;
-	height: 100%;
-	line-height: 100%;
-}
-
-/* Slider */
-
-.ui-slider {
-	height: 10px;
-	width: 200px;
-	margin: 4px 10px;
-	display: block;
-	border: 1px solid #999;
-	border-radius: 3px;
-	background: #EEE;
-}
-
-.ui-slider:hover {
-	cursor: pointer;
-}
-
-.ui-slider-name {
-	width: 90px;
-	padding: 0 10px 0 0;
-	text-align: right;
-	text-transform: lowercase;
-}
-
-.ui-slider-pointer {
-	width: 13px;
-	height: 13px;
-	background-color: #EEE;
-	border: 1px solid #2C9FC9;
-	border-radius: 3px;
-	position: relative;
-	top: -3px;
-	left: 0%;
-}
-
-.ui-slider-btn-set {
-	width: 25px;
-	background-color: #2C9FC9;
-	border-radius: 3px;
-	color: #FFF;
-	font-weight: bold;
-	text-align: center;
-}
-
-.ui-slider-btn-set:hover {
-	background-color: #379B4A;
-	cursor: pointer;
-}
-
-.ui-slider-input &gt; input {
-	margin: 0 10px;
-	padding: 0;
-	width: 50px;
-	text-align: center;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-}
-
-/*
- * UI Button
- */
-
-/* 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 &gt; input {
- 	display: none;
-}
-
-.ui-checkbox &gt; 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 &gt; label:hover {
-	cursor: pointer;
-}
-
-.ui-checkbox &gt; input:checked + label {
-	background-image: url("https://mdn.mozillademos.org/files/5681/checked.png");
-	background-color: #379B4A;
-}
-
-/*
- * BOX SHADOW GENERATOR TOOL
- */
-
-body {
-	max-width: 1000px;
-	height: 800px;
-	margin: 20px auto 0;
-
-	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;
-}
-
-#container {
-	width: 100%;
-	padding: 2px;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-}
-
-
-/* container with shadows stacks */
-#stack_container {
-	height: 400px;
-	overflow: hidden;
-	position: relative;
-	border: 1px solid #CCC;
-	border-radius: 3px;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-}
-
-#stack_container .container {
-	height: 100%;
-	width: 100%;
-	position: absolute;
-	left: 100%;
-	transition-property: left;
-	transition-duration: 0.5s;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-}
-
-
-#stack_container .title {
-	text-align: center;
-	font-weight: bold;
-	line-height: 2em;
-	border-bottom: 1px solid #43A6E1;
-	color: #666;
-}
-
-
-/*
- * Stack of Layers for shadow
- */
-
-#layer_manager {
-	width: 17%;
-	background-color: #FEFEFE;
-	margin: 0 1% 0 0;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-	float: left;
-}
-
-
-#layer_manager .button {
-	width: 30%;
-	height: 25px;
-	margin:0 0 10px;
-	color: #333;
-	background-color: #EEE;
-	text-align: center;
-	font-size: 0.75em;
-	line-height: 1.5em;
-	border: 1px solid #CCC;
-	border-radius: 3px;
-
-	display: block;
-	background-position: center center;
-	background-repeat: no-repeat;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-	float: left;
-}
-
-#layer_manager .button:hover {
-	background-color: #3380C4;
-	border: 1px solid #3380C4;
-	cursor: pointer;
-}
-
-#layer_manager [data-type='add'] {
-	background-image: url("https://mdn.mozillademos.org/files/5685/add-black.png");
-}
-
-#layer_manager [data-type='add']:hover {
-	background-image: url("https://mdn.mozillademos.org/files/5687/add-white.png");
-}
-
-#layer_manager [data-type='move-up'] {
-	background-image: url("https://mdn.mozillademos.org/files/5697/up-black.png");
-	margin-left: 5%;
-	margin-right: 5%;
-}
-
-#layer_manager [data-type='move-up']:hover {
-	background-image: url("https://mdn.mozillademos.org/files/5709/up-white.png");
-}
-
-#layer_manager [data-type='move-down'] {
-	background-image: url("https://mdn.mozillademos.org/files/5693/down-black.png");
-}
-
-#layer_manager [data-type='move-down']:hover {
-	background-image: url("https://mdn.mozillademos.org/files/5695/down-white.png");
-}
-
-/* shadows classes */
-
-#layer_manager .node {
-	width: 100%;
-	margin: 5px 0;
-	padding: 5px;
-	text-align: center;
-	background-color: #EEE;
-	border: 1px solid #DDD;
-	font-size: 0.75em;
-	line-height: 1.5em;
-	color: #333;
-	border-radius: 3px;
-
-	position: relative;
-	display: block;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-}
-
-#layer_manager .node:hover {
-	color: #FFF;
-	background-color: #3380C4;
-	cursor: pointer;
-}
-
-/* active element styling */
-
-#layer_manager [data-active='layer'] {
-	color: #FFF;
-	border: none;
-	background-color: #379B4A;
-}
-
-#layer_manager [data-active='subject'] {
-	color: #FFF;
-	background-color: #467FC9;
-}
-
-/* delete button */
-
-#layer_manager .delete {
-	width: 1.5em;
-	height: 100%;
-	float: right;
-	border-radius: 3px;
-	background-image: url("https://mdn.mozillademos.org/files/5689/delete-white.png");
-	background-position: center center;
-	background-repeat: no-repeat;
-	position: absolute;
-	top: 0;
-	right: 10px;
-	display: none;
-}
-
-#layer_manager .delete:hover {
-	background-image: url("https://mdn.mozillademos.org/files/5691/delete-yellow.png");
-}
-
-#layer_manager .node:hover .delete {
-	display: block;
-}
-
-
-#layer_manager .stack {
-	padding: 0 5px;
-	max-height: 90%;
-	overflow: auto;
-	overflow-x: hidden;
-}
-
-
-/*
- * Layer Menu
- */
-
-#layer_menu {
-	margin: 0 0 10px 0;
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-}
-
-#layer_menu .button {
-	width: 100px;
-	margin: 0 5px 0 0;
-	padding: 2.5px;
-	color: #333;
-	background-color: #EEE;
-	border: 1px solid #CCC;
-	border-radius: 3px;
-	text-align: center;
-	font-size: 0.75em;
-	line-height: 1.5em;
-
-	position: relative;
-	display: block;
-	float: left;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-}
-
-#layer_menu .button:hover {
-	color: #FFF;
-	background-color: #3380C4;
-	border: 1px solid #3380C4;
-	cursor: pointer;
-}
-
-#layer_menu .delete {
-	width: 1.5em;
-	height: 100%;
-	float: right;
-	border-radius: 3px;
-	background-image: url("https://mdn.mozillademos.org/files/5689/delete-white.png");
-	background-position: center center;
-	background-repeat: no-repeat;
-	position: absolute;
-	top: 0;
-	right: 5px;
-	display: none;
-}
-
-#layer_menu .delete:hover {
-	background-image: url("https://mdn.mozillademos.org/files/5691/delete-yellow.png");
-}
-
-#layer_menu .button:hover .delete {
-	display: block;
-}
-
-
-/*
- * active element styling
- */
-
-#layer_menu [data-active='subject'] {
-	color: #FFF;
-	background-color: #379B4A;
-	border: 1px solid #379B4A;
-}
-
-
-/* Checkbox */
-
-#layer_menu .ui-checkbox &gt; label {
-	height: 15px;
-	line-height: 17px;
-	font-weight: normal;
-	width: 46px;
-	margin: 0 5px 0 0;
-}
-
-#layer_menu .ui-checkbox &gt; input:checked + label {
-	display: none;
-}
-
-
-/******************************************************************************/
-/******************************************************************************/
-/*
- * Preview Area
- */
-
-#preview_zone {
-	width: 82%;
-	float: left;
-
-}
-
-
-#preview {
-	width: 100%;
-	height: 400px;
-	border: 1px solid #CCC;
-	border-radius: 3px;
-	text-align: center;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-	cursor: move;
-	float: left;
-}
-
-#preview .content {
-	width: 100%;
-	height: 100%;
-	display: block;
-}
-
-#obj-element {
-	width: 300px;
-	height: 100px;
-	border: 1px solid #CCC;
-	background: #FFF;
-	position: relative;
-}
-
-
-#obj-before {
-	height: 100%;
-	width: 100%;
-	background: #999;
-	border: 1px solid #CCC;
-	text-align: left;
-	display : block;
-	position: absolute;
-	z-index: -1;
-}
-
-#obj-after {
-	height: 100%;
-	width: 100%;
-	background: #DDD;
-	border: 1px solid #CCC;
-	text-align: right;
-	display : block;
-	position: absolute;
-	z-index: -1;
-}
-
-
-/******************************************************************************/
-/******************************************************************************/
-
-/**
- * Controls
- */
-
-.wrap-left {
-	float: left;
-	overflow: hidden;
-}
-
-.wrap-right {
-	float: right;
-	overflow: hidden;
-}
-
-.wrap-left &gt; * {
-	float: left;
-}
-
-.wrap-right &gt; * {
-	float: right;
-}
-
-@media (min-width: 960px) {
-
-	.wrap-left {
-		width: 45%;
-	}
-
-	.wrap-right {
-		width: 55%;
-	}
-}
-
-
-@media (max-width: 959px) {
-
-	.wrap-left {
-		width: 30%;
-	}
-
-	.wrap-right {
-		width: 70%;
-	}
-}
-
-
-#controls {
-	color: #444;
-	margin: 10px 0 0 0;
-}
-
-
-#controls .category {
-	width: 500px;
-	margin: 0 auto 20px;
-	padding: 0;
-
-}
-
-#controls .category .title {
-	width: 100%;
-	height: 1.5em;
-	line-height: 1.5em;
-	color: #AAA;
-	text-align: right;
-}
-
-#controls .category &gt; .group {
-	border: 1px solid #CCC;
-	border-radius: 3px;
-}
-
-
-/**
- * 	Color Picker
- */
-
-@media (min-width: 960px) {
-	#controls .colorpicker {
-		width: 420px;
-	}
-}
-
-@media (max-width: 959px) {
-	#controls .colorpicker {
-		width: 210px;
-	}
-}
-
-#colorpicker {
-	width: 100%;
-	margin: 0 auto;
-}
-
-#colorpicker .gradient {
-	width: 200px;
-	height: 200px;
-	margin: 5px;
-	background: url("https://mdn.mozillademos.org/files/5707/picker_mask_200.png");
-	background: -moz-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
-				-moz-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
-	background: -webkit-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
-				-webkit-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
-	background-color: #F00;
-	float: left;
-}
-
-#colorpicker .hue {
-	width: 200px;
-	height: 30px;
-	margin: 5px;
-	background: url("https://mdn.mozillademos.org/files/5701/hue.png");
-	background: -moz-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
-				#00F 66.66%, #F0F 83.33%, #F00 100%);
-	background: -webkit-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
-				#00F 66.66%, #F0F 83.33%, #F00 100%);
-	float: left;
-}
-
-#colorpicker .alpha {
-	width: 200px;
-	height: 30px;
-	margin: 5px;
-	border: 1px solid #CCC;
-	float: left;
-	background: url("https://mdn.mozillademos.org/files/5705/alpha.png");
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-}
-
-#colorpicker #alpha {
-	width: 100%;
-	height: 100%;
-	background: url("https://mdn.mozillademos.org/files/5703/alpha_mask.png");
-	background: -moz-linear-gradient(left, rgba(255, 0, 0, 0) 0%, rgba(255, 0, 0, 1) 100%);
-}
-
-#colorpicker #gradient_picker {
-	width: 0.5em;
-	height: 0.5em;
-	border-radius: 0.4em;
-	border: 2px solid #CCC;
-	position: relative;
-	top: 20%;
-	left: 20%;
-}
-
-#colorpicker #hue_selector,
-#colorpicker #alpha_selector {
-	width: 3px;
-	height: 100%;
-	border: 1px solid #777;
-	background-color: #FFF;
-	position: relative;
-	top: -1px;
-	left: 0%;
-}
-
-/* input HSV and RGB */
-#colorpicker .info {
-	width: 200px;
-	margin: 5px;
-	float: left;
-}
-
-#colorpicker .info * {
-	float: left;
-}
-
-#colorpicker .info input {
-	margin: 0;
-	text-align: center;
-	width: 30px;
-	-moz-user-select: text;
-	-webkit-user-select: text;
-	-ms-user-select: text;
-}
-
-#colorpicker .info span {
-	height: 20px;
-	width: 30px;
-	text-align: center;
-	line-height: 20px;
-	display: block;
-}
-
-/* Preview color */
-#colorpicker .block {
-	width: 95px;
-	height: 54px;
-	float: left;
-	position: relative;
-}
-
-#colorpicker .preview {
-	margin: 5px;
-	border: 1px solid #CCC;
-	background-image: url("https://mdn.mozillademos.org/files/5705/alpha.png");
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-}
-
-#colorpicker .preview:before {
-	height: 100%;
-	width: 50%;
-	left: 50%;
-	content: "";
-	background: #FFF;
-	position: absolute;
-	z-index: 1;
-}
-
-#colorpicker .preview &gt; * {
-	width: 50%;
-	height: 100%;
-}
-
-#colorpicker #output_color {
-	width: 100%;
-	height: 100%;
-	position: absolute;
-	z-index: 2;
-}
-
-#colorpicker .block .input {
-	float: right;
-}
-
-#colorpicker [data-topic="a"] &gt; span {
-	width: 50px;
-}
-
-#colorpicker [data-topic="hexa"] {
-	float: right;
-	margin: 10px 0 0 0;
-}
-
-#colorpicker [data-topic="hexa"] &gt; span {
-	display: none;
-}
-
-#colorpicker [data-topic="hexa"] &gt; input {
-	width: 85px;
-	padding: 2px 0;
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-}
-
-
-/*
- * UI Components
- */
-
-/* Property */
-
-.property {
-	height: 20px;
-	margin: 10px 0;
-}
-
-.property * {
-	float: left;
-	height: 100%;
-	line-height: 100%;
-}
-
-/* Slider */
-
-#controls .ui-slider-name {
-	margin: 0 10px 0 0;
-}
-
-/*
- * Output code styling
- */
-
-#output {
-	position: relative;
-}
-
-#output .menu {
-	max-width: 70%;
-	height: 20px;
-	position: absolute;
-	top: 2px;
-}
-
-#output .button {
-	width: 90px;
-	height: 22px;
-	margin: 0 5px 0 0;
-	text-align: center;
-	line-height: 20px;
-	font-size: 14px;
-	color: #FFF;
-	background-color: #999;
-	border-top-left-radius: 3px;
-	border-top-right-radius: 3px;
-	bottom: -5px;
-	float:left;
-}
-
-#output .button:hover {
-	color: #FFF;
-	background-color: #666;
-	cursor: pointer;
-}
-
-#output .menu [data-active="true"] {
-	color: #777;
-	background-color: #FFF;
-	border: 1px solid #CCC;
-	border-bottom: none;
-}
-
-#output .menu [data-topic="before"] {
-	left: 100px;
-}
-
-#output .menu [data-topic="after"] {
-	left: 200px;
-}
-
-#output .output {
-	width: 480px;
-	margin: 10px;
-	padding: 10px;
-	overflow: hidden;
-	color: #555;
-	font-size: 14px;
-	border: 1px dashed #CCC;
-	border-radius: 3px;
-	display: none;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-
-	-moz-user-select: text;
-	-webkit-user-select: text;
-	-ms-user-select: text;
-}
-
-#output .css-property {
-	width: 100%;
-	float: left;
-	white-space: pre;
-}
-
-#output .name {
-	width: 35%;
-	float: left;
-}
-
-#output .value {
-	width: 65%;
-	float: left;
-}
-
-</pre>
-
-<h3 id="JavaScript_Content">JavaScript Content</h3>
-
-<pre class="brush: js"><code class="language-js">
-
-'use strict';
-
-/**
- * UI-SlidersManager
- */
-
-var SliderManager = (function SliderManager() {
-
-	var subscribers = {};
-	var sliders = [];
-
-	var Slider = 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 snap = node.getAttribute('data-snap');
-		var topic = node.getAttribute('data-topic');
-
-		this.min = min;
-		this.max = max &gt; 0 ? max : 100;
-		this.step = step === 0 ? 1 : step;
-		this.value = value &lt;= max &amp;&amp; value &gt;= min ? value : (min + max) / 2 | 0;
-		this.snap = snap === "true" ? true : false;
-		this.topic = topic;
-		this.node = node;
-
-		var pointer = document.createElement('div');
-		pointer.className = 'ui-slider-pointer';
-		node.appendChild(pointer);
-		this.pointer = pointer;
-
-		setMouseTracking(node, updateSlider.bind(this));
-
-		sliders[topic] = this;
-		setValue(topic, this.value);
-	}
-
-	var setButtonComponent = function setButtonComponent(node) {
-		var type = node.getAttribute('data-type');
-		var topic = node.getAttribute('data-topic');
-		if (type === "sub") {
-			node.textContent = '-';
-			node.addEventListener("click", function() {
-				decrement(topic);
-			});
-		}
-		if (type === "add") {
-			node.textContent = '+';
-			node.addEventListener("click", function() {
-				increment(topic);
-			});
-		}
-	}
-
-	var setInputComponent = function setInputComponent(node) {
-		var topic		= node.getAttribute('data-topic');
-		var unit_type	= node.getAttribute('data-unit');
-
-		var input = document.createElement('input');
-		var unit = document.createElement('span');
-		unit.textContent = unit_type;
-
-		input.setAttribute('type', 'text');
-		node.appendChild(input);
-		node.appendChild(unit);
-
-		input.addEventListener('click', function(e) {
-			this.select();
-		});
-
-		input.addEventListener('change', function(e) {
-			setValue(topic, e.target.value | 0);
-		});
-
-		subscribe(topic, function(value) {
-			node.children[0].value = value;
-		});
-	}
-
-	var increment = function increment(topic) {
-		var slider = sliders[topic];
-		if (slider === null || slider === undefined)
-			return;
-
-		if (slider.value + slider.step &lt;= slider.max) {
-			slider.value += slider.step;
-			setValue(slider.topic, slider.value)
-			notify.call(slider);
-		}
-	};
-
-	var decrement = function decrement(topic) {
-		var slider = sliders[topic];
-		if (slider === null || slider === undefined)
-			return;
-
-		if (slider.value - slider.step &gt;= slider.min) {
-			slider.value -= slider.step;
-			setValue(topic, slider.value)
-			notify.call(slider);
-		}
-	}
-
-	// this = Slider object
-	var updateSlider = function updateSlider(e) {
-		var node = this.node;
-		var pos = e.pageX - node.offsetLeft;
-		var width = node.clientWidth;
-		var delta = this.max - this.min;
-		var offset = this.pointer.clientWidth + 4; // border width * 2
-
-		if (pos &lt; 0) pos = 0;
-		if (pos &gt; width) pos = width;
-
-		var value = pos * delta / width | 0;
-		var precision = value % this.step;
-		value = value - precision + this.min;
-		if (precision &gt; this.step / 2)
-			value = value + this.step;
-
-		if (this.snap)
-			pos =  (value - this.min) * width / delta;
-
-		this.pointer.style.left = pos - offset/2 + "px";
-		this.value = value;
-		node.setAttribute('data-value', value);
-		notify.call(this);
-	}
-
-	var setValue = function setValue(topic, value) {
-		var slider = sliders[topic];
-
-		if (value &gt; slider.max || value &lt; slider.min)
-			return;
-
-		var delta = slider.max - slider.min;
-		var width = slider.node.clientWidth;
-		var offset = slider.pointer.clientWidth;
-		var pos =  (value - slider.min) * width / delta;
-		slider.value = value;
-		slider.pointer.style.left = pos - offset / 2 + "px";
-		slider.node.setAttribute('data-value', value);
-		notify.call(slider);
-	}
-
-	var setMouseTracking = function setMouseTracking(elem, callback) {
-		elem.addEventListener("mousedown", function(e) {
-			callback(e);
-			document.addEventListener("mousemove", callback);
-		});
-
-		document.addEventListener("mouseup", function(e) {
-			document.removeEventListener("mousemove", callback);
-		});
-	}
-
-	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() {
-		if (subscribers[this.topic] === undefined)
-			return;
-
-		for (var i in subscribers[this.topic]) {
-			subscribers[this.topic][i](this.value);
-		}
-	}
-
-	var init = function init() {
-		var elem, size;
-
-		elem = document.querySelectorAll('.ui-slider-btn-set');
-		size = elem.length;
-		for (var i = 0; i &lt; size; i++)
-			setButtonComponent(elem[i]);
-
-		elem = document.querySelectorAll('.ui-slider-input');
-		size = elem.length;
-		for (var i = 0; i &lt; size; i++)
-			setInputComponent(elem[i]);
-
-		elem = document.querySelectorAll('.ui-slider');
-		size = elem.length;
-		for (var i = 0; i &lt; size; i++)
-			new Slider(elem[i]);
-	}
-
-	return {
-		init : init,
-		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;
-			notify.call(buttons[topic]);
-		}
-		catch(error) {
-			console.log(error, topic, value);
-		}
-	}
-
-	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() {
-		if (subscribers[this.topic] === undefined)
-			return;
-		for (var i = 0; i &lt; 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 &lt; size; i++)
-			new CheckBox(elem[i]);
-	}
-
-	return {
-		init : init,
-		setValue : setValue,
-		subscribe : subscribe,
-		unsubscribe : unsubscribe
-	}
-
-})();
-
-
-window.addEventListener("load", function(){
-	BoxShadow.init();
-});
-
-var BoxShadow = (function BoxShadow() {
-
-	function getElemById(id) {
-		return document.getElementById(id);
-	}
-
-	/**
-	 * RGBA Color class
-	 */
-
-	function Color() {
-		this.r = 0;
-		this.g = 0;
-		this.b = 0;
-		this.a = 1;
-		this.hue = 0;
-		this.saturation = 0;
-		this.value = 0;
-	}
-
-	Color.prototype.copy = function copy(obj) {
-		if(obj instanceof Color !== true) {
-			console.log("Typeof instance not Color");
-			return;
-		}
-
-		this.r = obj.r;
-		this.g = obj.g;
-		this.b = obj.b;
-		this.a = obj.a;
-		this.hue = obj.hue;
-		this.saturation = obj.saturation;
-		this.value = obj.value;
-	}
-
-	Color.prototype.setRGBA = function setRGBA(red, green, blue, alpha) {
-		if (red != undefined)
-			this.r = red | 0;
-		if (green != undefined)
-			this.g = green | 0;
-		if (blue != undefined)
-			this.b = blue | 0;
-		if (alpha != undefined)
-			this.a = alpha | 0;
-	}
-
-	/**
-	 * HSV/HSB (hue, saturation, value / brightness)
-	 * @param hue			0-360
-	 * @param saturation	0-100
-	 * @param value 		0-100
-	 */
-	Color.prototype.setHSV = function setHSV(hue, saturation, value) {
-		this.hue = hue;
-		this.saturation = saturation;
-		this.value = value;
-		this.updateRGB();
-	}
-
-	Color.prototype.updateRGB = function updateRGB() {
-		var sat = this.saturation / 100;
-		var value = this.value / 100;
-		var C = sat * value;
-		var H = this.hue / 60;
-		var X = C * (1 - Math.abs(H % 2 - 1));
-		var m = value - C;
-		var precision = 255;
-
-		C = (C + m) * precision;
-		X = (X + m) * precision;
-		m = m * precision;
-
-		if (H &gt;= 0 &amp;&amp; H &lt; 1) {	this.setRGBA(C, X, m);	return; }
-		if (H &gt;= 1 &amp;&amp; H &lt; 2) {	this.setRGBA(X, C, m);	return; }
-		if (H &gt;= 2 &amp;&amp; H &lt; 3) {	this.setRGBA(m, C, X);	return; }
-		if (H &gt;= 3 &amp;&amp; H &lt; 4) {	this.setRGBA(m, X, C);	return; }
-		if (H &gt;= 4 &amp;&amp; H &lt; 5) {	this.setRGBA(X, m, C);	return; }
-		if (H &gt;= 5 &amp;&amp; H &lt; 6) {	this.setRGBA(C, m, X);	return; }
-	}
-
-	Color.prototype.updateHSV = function updateHSV() {
-		var red		= this.r / 255;
-		var green	= this.g / 255;
-		var blue	= this.b / 255;
-
-		var cmax = Math.max(red, green, blue);
-		var cmin = Math.min(red, green, blue);
-		var delta = cmax - cmin;
-		var hue = 0;
-		var saturation = 0;
-
-		if (delta) {
-			if (cmax === red ) { hue = ((green - blue) / delta); }
-			if (cmax === green ) { hue = 2 + (blue - red) / delta; }
-			if (cmax === blue ) { hue = 4 + (red - green) / delta; }
-			if (cmax) saturation = delta / cmax;
-		}
-
-		this.hue = 60 * hue | 0;
-		if (this.hue &lt; 0) this.hue += 360;
-		this.saturation = (saturation * 100) | 0;
-		this.value = (cmax * 100) | 0;
-	}
-
-	Color.prototype.setHexa = function setHexa(value) {
-		var valid  = /(^#{0,1}[0-9A-F]{6}$)|(^#{0,1}[0-9A-F]{3}$)/i.test(value)
-		if (valid !== true)
-			return;
-
-		if (value[0] === '#')
-			value = value.slice(1, value.length);
-
-		if (value.length === 3)
-			value = value.replace(/([0-9A-F])([0-9A-F])([0-9A-F])/i,"$1$1$2$2$3$3");
-
-		this.r = parseInt(value.substr(0, 2), 16);
-		this.g = parseInt(value.substr(2, 2), 16);
-		this.b = parseInt(value.substr(4, 2), 16);
-
-		this.alpha	= 1;
-	}
-
-	Color.prototype.getHexa = function getHexa() {
-		var r = this.r.toString(16);
-		var g = this.g.toString(16);
-		var b = this.b.toString(16);
-		if (this.r &lt; 16) r = '0' + r;
-		if (this.g &lt; 16) g = '0' + g;
-		if (this.b &lt; 16) b = '0' + b;
-		var value = '#' + r + g + b;
-		return value.toUpperCase();
-	}
-
-	Color.prototype.getRGBA = function getRGBA() {
-
-		var rgb = "(" + this.r + ", " + this.g + ", " + this.b;
-		var a = '';
-		var v = '';
-		if (this.a !== 1) {
-			a = 'a';
-			v = ', ' + this.a;
-		}
-
-		var value = "rgb" + a + rgb + v + ")";
-		return value;
-	}
-
-	Color.prototype.getColor = function getColor() {
-		if (this.a | 0 === 1)
-			return this.getHexa();
-		return this.getRGBA();
-	}
-
-	/**
-	 * Shadow Object
-	 */
-	function Shadow() {
-		this.inset  = false;
-		this.posX   = 5;
-		this.posY   = -5;
-		this.blur   = 5;
-		this.spread = 0;
-		this.color  = new Color();
-
-		var hue			= (Math.random() * 360) | 0;
-		var saturation	= (Math.random() * 75) | 0;
-		var value 		= (Math.random() * 50 + 50) | 0;
-		this.color.setHSV(hue, saturation, value, 1);
-	}
-
-	Shadow.prototype.computeCSS = function computeCSS() {
-		var value = "";
-		if (this.inset === true)
-			value += "inset ";
-		value += this.posX + "px ";
-		value += this.posY + "px ";
-		value += this.blur + "px ";
-		value += this.spread + "px ";
-		value += this.color.getColor();
-
-		return value;
-	}
-
-	Shadow.prototype.toggleInset = function toggleInset(value) {
-		if (value !== undefined || typeof value === "boolean")
-			this.inset = value;
-		else
-			this.inset = this.inset === true ? false : true;
-	}
-
-	Shadow.prototype.copy = function copy(obj) {
-		if(obj instanceof Shadow !== true) {
-			console.log("Typeof instance not Shadow");
-			return;
-		}
-
-		this.inset  = obj.inset;
-		this.posX   = obj.posX;
-		this.posY   = obj.posY;
-		this.blur   = obj.blur;
-		this.spread = obj.spread;
-		this.color.copy(obj.color);
-	}
-
-	/**
-	 * Color Picker
-	 */
-	var ColoPicker = (function ColoPicker() {
-
-		var colorpicker;
-		var hue_area;
-		var gradient_area;
-		var alpha_area;
-		var gradient_picker;
-		var hue_selector;
-		var alpha_selector;
-		var pick_object;
-		var info_rgb;
-		var info_hsv;
-		var info_hexa;
-		var output_color;
-		var color = new Color();
-		var subscribers = [];
-
-		var updateColor = function updateColor(e) {
-			var x = e.pageX - gradient_area.offsetLeft;
-			var y = e.pageY - gradient_area.offsetTop;
-
-			// width and height should be the same
-			var size = gradient_area.clientWidth;
-
-			if (x &gt; size)
-				x = size;
-			if (y &gt; size)
-				y = size;
-
-			if (x &lt; 0) x = 0;
-			if (y &lt; 0) y = 0;
-
-			var value = 100 - (y * 100 / size) | 0;
-			var saturation = x * 100 / size | 0;
-
-			color.setHSV(color.hue, saturation, value);
-			// should update just
-			// color pointer location
-			updateUI();
-			notify("color", color);
-		}
-
-		var updateHue = function updateHue(e) {
-			var x = e.pageX - hue_area.offsetLeft;
-			var width = hue_area.clientWidth;
-
-			if (x &lt; 0) x = 0;
-			if (x &gt; width) x = width;
-
-			var hue = ((360 * x) / width) | 0;
-			if (hue === 360) hue = 359;
-
-			color.setHSV(hue, color.saturation, color.value);
-
-			// should update just
-			// hue pointer location
-			// picker area background
-			// alpha area background
-			updateUI();
-			notify("color", color);
-		}
-
-		var updateAlpha = function updateAlpha(e) {
-			var x = e.pageX - alpha_area.offsetLeft;
-			var width = alpha_area.clientWidth;
-
-			if (x &lt; 0) x = 0;
-			if (x &gt; width) x = width;
-
-			color.a = (x / width).toFixed(2);
-
-			// should update just
-			// alpha pointer location
-			updateUI();
-			notify("color", color);
-		}
-
-		var setHueGfx = function setHueGfx(hue) {
-			var sat = color.saturation;
-			var val = color.value;
-			var alpha = color.a;
-
-			color.setHSV(hue, 100, 100);
-			gradient_area.style.backgroundColor = color.getHexa();
-
-			color.a = 0;
-			var start = color.getRGBA();
-			color.a = 1;
-			var end = color.getRGBA();
-			color.a = alpha;
-
-			var gradient = '-moz-linear-gradient(left, ' +	start + '0%, ' + end + ' 100%)';
-			alpha_area.style.background = gradient;
-		}
-
-		var updateUI = function updateUI() {
-			var x, y;		// coordinates
-			var size;		// size of the area
-			var offset;		// pointer graphic selector offset
-
-			// Set color pointer location
-			size = gradient_area.clientWidth;
-			offset = gradient_picker.clientWidth / 2 + 2;
-
-			x = (color.saturation * size / 100) | 0;
-			y = size - (color.value * size / 100) | 0;
-
-			gradient_picker.style.left = x - offset + "px";
-			gradient_picker.style.top = y - offset + "px";
-
-			// Set hue pointer location
-			size = hue_area.clientWidth;
-			offset = hue_selector.clientWidth/2;
-			x = (color.hue * size / 360 ) | 0;
-			hue_selector.style.left = x - offset + "px";
-
-			// Set alpha pointer location
-			size = alpha_area.clientWidth;
-			offset = alpha_selector.clientWidth/2;
-			x = (color.a * size) | 0;
-			alpha_selector.style.left = x - offset + "px";
-
-			// Set picker area background
-			var nc = new Color();
-			nc.copy(color);
-			if (nc.hue === 360) nc.hue = 0;
-			nc.setHSV(nc.hue, 100, 100);
-			gradient_area.style.backgroundColor = nc.getHexa();
-
-			// Set alpha area background
-			nc.copy(color);
-			nc.a = 0;
-			var start = nc.getRGBA();
-			nc.a = 1;
-			var end = nc.getRGBA();
-			var gradient = '-moz-linear-gradient(left, ' +	start + '0%, ' + end + ' 100%)';
-			alpha_area.style.background = gradient;
-
-			// Update color info
-			notify("color", color);
-			notify("hue", color.hue);
-			notify("saturation", color.saturation);
-			notify("value", color.value);
-			notify("r", color.r);
-			notify("g", color.g);
-			notify("b", color.b);
-			notify("a", color.a);
-			notify("hexa", color.getHexa());
-			output_color.style.backgroundColor = color.getRGBA();
-		}
-
-		var setInputComponent = function setInputComponent(node) {
-			var topic = node.getAttribute('data-topic');
-			var title = node.getAttribute('data-title');
-			var action = node.getAttribute('data-action');
-			title = title === null ? '' : title;
-
-			var input = document.createElement('input');
-			var info = document.createElement('span');
-			info.textContent = title;
-
-			input.setAttribute('type', 'text');
-			input.setAttribute('data-action', 'set-' + action + '-' + topic);
-			node.appendChild(info);
-			node.appendChild(input);
-
-			input.addEventListener('click', function(e) {
-				this.select();
-			});
-
-			input.addEventListener('change', function(e) {
-				if (action === 'HSV')
-					inputChangeHSV(topic);
-				if (action === 'RGB')
-					inputChangeRGB(topic);
-				if (action === 'alpha')
-					inputChangeAlpha(topic);
-				if (action === 'hexa')
-					inputChangeHexa(topic);
-			});
-
-			subscribe(topic, function(value) {
-				node.children[1].value = value;
-			});
-		}
-
-		var inputChangeHSV = function actionHSV(topic) {
-			var selector = "[data-action='set-HSV-" + topic + "']";
-			var node = document.querySelector("#colorpicker " + selector);
-			var value = parseInt(node.value);
-
-			if (typeof value === 'number' &amp;&amp; isNaN(value) === false &amp;&amp;
-				value &gt;= 0 &amp;&amp; value &lt; 360)
-				color[topic] = value;
-
-			color.updateRGB();
-			updateUI();
-		}
-
-		var inputChangeRGB = function inputChangeRGB(topic) {
-			var selector = "[data-action='set-RGB-" + topic + "']";
-			var node = document.querySelector("#colorpicker " + selector);
-			var value = parseInt(node.value);
-
-			if (typeof value === 'number' &amp;&amp; isNaN(value) === false &amp;&amp;
-				value &gt;= 0 &amp;&amp; value &lt;= 255)
-				color[topic] = value;
-
-			color.updateHSV();
-			updateUI();
-		}
-
-		var inputChangeAlpha = function inputChangeAlpha(topic) {
-			var selector = "[data-action='set-alpha-" + topic + "']";
-			var node = document.querySelector("#colorpicker " + selector);
-			var value = parseFloat(node.value);
-
-			if (typeof value === 'number' &amp;&amp; isNaN(value) === false &amp;&amp;
-				value &gt;= 0 &amp;&amp; value &lt;= 1)
-				color.a = value.toFixed(2);
-
-			updateUI();
-		}
-
-		var inputChangeHexa = function inputChangeHexa(topic) {
-			var selector = "[data-action='set-hexa-" + topic + "']";
-			var node = document.querySelector("#colorpicker " + selector);
-			var value = node.value;
-			color.setHexa(value);
-			color.updateHSV();
-			updateUI();
-		}
-
-		var setMouseTracking = function setMouseTracking(elem, callback) {
-
-			elem.addEventListener("mousedown", function(e) {
-				callback(e);
-				document.addEventListener("mousemove", callback);
-			});
-
-			document.addEventListener("mouseup", function(e) {
-				document.removeEventListener("mousemove", callback);
-			});
-		}
-
-		/*
-		 * Observer
-		 */
-		var setColor = function setColor(obj) {
-			if(obj instanceof Color !== true) {
-				console.log("Typeof instance not Color");
-				return;
-			}
-			color.copy(obj);
-			updateUI();
-		}
-
-		var subscribe = function subscribe(topic, callback) {
-			if (subscribers[topic] === undefined)
-				subscribers[topic] = [];
-
-			subscribers[topic].push(callback);
-		}
-
-		var unsubscribe = function unsubscribe(callback) {
-			subscribers.indexOf(callback);
-			subscribers.splice(index, 1);
-		}
-
-		var notify = function notify(topic, value) {
-			for (var i in subscribers[topic])
-				subscribers[topic][i](value);
-		}
-
-		var init = function init() {
-			colorpicker		= getElemById("colorpicker");
-			hue_area		= getElemById("hue");
-			gradient_area	= getElemById("gradient");
-			alpha_area		= getElemById("alpha");
-			gradient_picker	= getElemById("gradient_picker");
-			hue_selector	= getElemById("hue_selector");
-			alpha_selector	= getElemById("alpha_selector");
-			output_color	= getElemById("output_color");
-
-			var elem = document.querySelectorAll('#colorpicker .input');
-			var size = elem.length;
-			for (var i = 0; i &lt; size; i++)
-				setInputComponent(elem[i]);
-
-			setMouseTracking(gradient_area, updateColor);
-			setMouseTracking(hue_area, updateHue);
-			setMouseTracking(alpha_area, updateAlpha);
-
-		}
-
-		return {
-			init : init,
-			setColor : setColor,
-			subscribe : subscribe,
-			unsubscribe : unsubscribe
-		}
-
-	})();
-
-	/**
-	 * 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
-		}
-
-	})();
-
-	/*
-	 * Element Class
-	 */
-	var CssClass = function CssClass(id) {
-		this.left = 0;
-		this.top = 0;
-		this.rotate = 0;
-		this.width = 300;
-		this.height = 100;
-		this.display = true;
-		this.border = true;
-		this.zIndex = -1;
-		this.bgcolor = new Color();
-		this.id = id;
-		this.node = getElemById('obj-' + id);
-		this.object = getElemById(id);
-		this.shadowID = null;
-		this.shadows = []
-		this.render = [];
-		this.init();
-	}
-
-	CssClass.prototype.init = function init() {
-		this.left = ((this.node.parentNode.clientWidth - this.node.clientWidth) / 2) | 0;
-		this.top = ((this.node.parentNode.clientHeight - this.node.clientHeight) / 2) | 0;
-
-		this.setTop(this.top);
-		this.setLeft(this.left);
-		this.setHeight(this.height);
-		this.setWidth(this.width);
-		this.bgcolor.setHSV(0, 0, 100);
-		this.updateBgColor(this.bgcolor);
-	}
-
-	CssClass.prototype.updatePos = function updatePos(deltaX, deltaY) {
-		this.left += deltaX;
-		this.top += deltaY;
-		this.node.style.top = this.top + "px";
-		this.node.style.left = this.left + "px";
-		SliderManager.setValue("left", this.left);
-		SliderManager.setValue("top", this.top);
-	}
-
-	CssClass.prototype.setLeft = function setLeft(value) {
-		this.left = value;
-		this.node.style.left = this.left + "px";
-		OutputManager.updateProperty(this.id, 'left', this.left + 'px');
-	}
-
-	CssClass.prototype.setTop = function setTop(value) {
-		this.top = value;
-		this.node.style.top = this.top + 'px';
-		OutputManager.updateProperty(this.id, 'top', this.top + 'px');
-	}
-
-	CssClass.prototype.setWidth = function setWidth(value) {
-		this.width = value;
-		this.node.style.width = this.width + 'px';
-		OutputManager.updateProperty(this.id, 'width', this.width + 'px');
-	}
-
-	CssClass.prototype.setHeight = function setHeight(value) {
-		this.height = value;
-		this.node.style.height = this.height + 'px';
-		OutputManager.updateProperty(this.id, 'height', this.height + 'px');
-	}
-
-	// Browser support
-	CssClass.prototype.setRotate = function setRotate(value) {
-		var cssvalue = 'rotate(' + value +'deg)';
-
-		this.node.style.transform = cssvalue;
-		this.node.style.webkitTransform = cssvalue;
-		this.node.style.msTransform = cssvalue;
-
-		if (value !== 0) {
-			if (this.rotate === 0) {
-				OutputManager.toggleProperty(this.id, 'transform', true);
-				OutputManager.toggleProperty(this.id, '-webkit-transform', true);
-				OutputManager.toggleProperty(this.id, '-ms-transform', true);
-			}
-		}
-		else {
-			OutputManager.toggleProperty(this.id, 'transform', false);
-			OutputManager.toggleProperty(this.id, '-webkit-transform', false);
-			OutputManager.toggleProperty(this.id, '-ms-transform', false);
-		}
-
-		OutputManager.updateProperty(this.id, 'transform', cssvalue);
-		OutputManager.updateProperty(this.id, '-webkit-transform', cssvalue);
-		OutputManager.updateProperty(this.id, '-ms-transform', cssvalue);
-		this.rotate = value;
-	}
-
-	CssClass.prototype.setzIndex = function setzIndex(value) {
-		this.node.style.zIndex = value;
-		OutputManager.updateProperty(this.id, 'z-index', value);
-		this.zIndex = value;
-	}
-
-	CssClass.prototype.toggleDisplay = function toggleDisplay(value) {
-		if (typeof value !== "boolean" || this.display === value)
-			return;
-
-		this.display = value;
-		var display = this.display === true ? "block" : "none";
-		this.node.style.display = display;
-		this.object.style.display = display;
-	}
-
-	CssClass.prototype.toggleBorder = function toggleBorder(value) {
-		if (typeof value !== "boolean" || this.border === value)
-			return;
-
-		this.border = value;
-		var border = this.border === true ? "1px solid #CCC" : "none";
-		this.node.style.border = border;
-	}
-
-	CssClass.prototype.updateBgColor = function updateBgColor(color) {
-		this.bgcolor.copy(color);
-		this.node.style.backgroundColor = color.getColor();
-		OutputManager.updateProperty(this.id, 'background-color', color.getColor());
-	}
-
-	CssClass.prototype.updateShadows = function updateShadows() {
-		if (this.render.length === 0)
-			OutputManager.toggleProperty(this.id, 'box-shadow', false);
-		if (this.render.length === 1)
-			OutputManager.toggleProperty(this.id, 'box-shadow', true);
-
-		this.node.style.boxShadow = this.render.join(", ");
-		OutputManager.updateProperty(this.id, 'box-shadow', this.render.join(", \n"));
-
-	}
-
-
-	/**
-	 * Tool Manager
-	 */
-	var Tool = (function Tool() {
-
-		var preview;
-		var classes = [];
-		var active = null;
-		var animate = false;
-
-		/*
-		 * Toll actions
-		 */
-		var addCssClass = function addCssClass(id) {
-			classes[id] = new CssClass(id);
-		}
-
-		var setActiveClass = function setActiveClass(id) {
-			active = classes[id];
-			active.shadowID = null;
-			ColoPicker.setColor(classes[id].bgcolor);
-			SliderManager.setValue("top", active.top);
-			SliderManager.setValue("left", active.left);
-			SliderManager.setValue("rotate", active.rotate);
-			SliderManager.setValue("z-index", active.zIndex);
-			SliderManager.setValue("width", active.width);
-			SliderManager.setValue("height", active.height);
-			ButtonManager.setValue("border-state", active.border);
-			active.updateShadows();
-		}
-
-		var disableClass = function disableClass(topic) {
-			classes[topic].toggleDisplay(false);
-			ButtonManager.setValue(topic, false);
-		}
-
-		var addShadow = function addShadow(position) {
-			if (animate === true)
-				return -1;
-
-			active.shadows.splice(position, 0, new Shadow());
-			active.render.splice(position, 0, null);
-		}
-
-		var swapShadow = function swapShadow(id1, id2) {
-			var x = active.shadows[id1];
-			active.shadows[id1] = active.shadows[id2];
-			active.shadows[id2] = x;
-			updateShadowCSS(id1);
-			updateShadowCSS(id2);
-		}
-
-		var deleteShadow = function deleteShadow(position) {
-			active.shadows.splice(position, 1);
-			active.render.splice(position, 1);
-			active.updateShadows();
-		}
-
-		var setActiveShadow = function setActiveShadow(id, glow) {
-			active.shadowID = id;
-			ColoPicker.setColor(active.shadows[id].color);
-			ButtonManager.setValue("inset", active.shadows[id].inset);
-			SliderManager.setValue("blur", active.shadows[id].blur);
-			SliderManager.setValue("spread", active.shadows[id].spread);
-			SliderManager.setValue("posX", active.shadows[id].posX);
-			SliderManager.setValue("posY", active.shadows[id].posY);
-			if (glow === true)
-				addGlowEffect(id);
-		}
-
-		var addGlowEffect = function addGlowEffect(id) {
-			if (animate === true)
-				return;
-
-			animate = true;
-			var store = new Shadow();
-			var shadow = active.shadows[id];
-
-			store.copy(shadow);
-			shadow.color.setRGBA(40, 125, 200, 1);
-			shadow.blur = 10;
-			shadow.spread = 10;
-
-			active.node.style.transition = "box-shadow 0.2s";
-			updateShadowCSS(id);
-
-			setTimeout(function() {
-				shadow.copy(store);
-				updateShadowCSS(id);
-				setTimeout(function() {
-					active.node.style.removeProperty("transition");
-					animate = false;
-				}, 100);
-			}, 200);
-		}
-
-		var updateActivePos = function updateActivePos(deltaX, deltaY) {
-			if (active.shadowID === null)
-				active.updatePos(deltaX, deltaY);
-			else
-				updateShadowPos(deltaX, deltaY);
-		}
-
-		/*
-		 * Shadow properties
-		 */
-		var updateShadowCSS = function updateShadowCSS(id) {
-			active.render[id] = active.shadows[id].computeCSS();
-			active.updateShadows();
-		}
-
-		var toggleShadowInset = function toggleShadowInset(value) {
-			if (active.shadowID === null)
-				return;
-			active.shadows[active.shadowID].toggleInset(value);
-			updateShadowCSS(active.shadowID);
-		}
-
-		var updateShadowPos = function updateShadowPos(deltaX, deltaY) {
-			var shadow = active.shadows[active.shadowID];
-			shadow.posX += deltaX;
-			shadow.posY += deltaY;
-			SliderManager.setValue("posX", shadow.posX);
-			SliderManager.setValue("posY", shadow.posY);
-			updateShadowCSS(active.shadowID);
-		}
-
-		var setShadowPosX = function setShadowPosX(value) {
-			if (active.shadowID === null)
-				return;
-			active.shadows[active.shadowID].posX = value;
-			updateShadowCSS(active.shadowID);
-		}
-
-		var setShadowPosY = function setShadowPosY(value) {
-			if (active.shadowID === null)
-				return;
-			active.shadows[active.shadowID].posY = value;
-			updateShadowCSS(active.shadowID);
-		}
-
-		var setShadowBlur = function setShadowBlur(value) {
-			if (active.shadowID === null)
-				return;
-			active.shadows[active.shadowID].blur = value;
-			updateShadowCSS(active.shadowID);
-		}
-
-		var setShadowSpread = function setShadowSpread(value) {
-			if (active.shadowID === null)
-				return;
-			active.shadows[active.shadowID].spread = value;
-			updateShadowCSS(active.shadowID);
-		}
-
-		var updateShadowColor = function updateShadowColor(color) {
-			active.shadows[active.shadowID].color.copy(color);
-			updateShadowCSS(active.shadowID);
-		}
-
-		/*
-		 * Element Properties
-		 */
-		var updateColor = function updateColor(color) {
-			if (active.shadowID === null)
-				active.updateBgColor(color);
-			else
-				updateShadowColor(color);
-		}
-
-		var init = function init() {
-			preview = getElemById("preview");
-
-			ColoPicker.subscribe("color", updateColor);
-			PreviewMouseTracking.subscribe(updateActivePos);
-
-			// Affects shadows
-			ButtonManager.subscribe("inset", toggleShadowInset);
-			SliderManager.subscribe("posX", setShadowPosX);
-			SliderManager.subscribe("posY", setShadowPosY);
-			SliderManager.subscribe("blur", setShadowBlur);
-			SliderManager.subscribe("spread", setShadowSpread);
-
-			// Affects element
-			SliderManager.subscribe("top", function(value){
-				active.setTop(value);
-			});
-			SliderManager.subscribe("left", function(value){
-				active.setLeft(value);
-			});
-			SliderManager.subscribe("rotate", function(value) {
-				if (active == classes["element"])
-					return;
-				active.setRotate(value);
-			});
-
-			SliderManager.subscribe("z-index", function(value) {
-				if (active == classes["element"])
-					return;
-				active.setzIndex(value);
-			});
-
-			SliderManager.subscribe("width", function(value) {
-				active.setWidth(value)
-			});
-
-			SliderManager.subscribe("height", function(value) {
-				active.setHeight(value)
-			});
-
-			// Actions
-			classes['before'].top = -30;
-			classes['before'].left = -30;
-			classes['after'].top = 30;
-			classes['after'].left = 30;
-			classes['before'].toggleDisplay(false);
-			classes['after'].toggleDisplay(false);
-			ButtonManager.setValue('before', false);
-			ButtonManager.setValue('after', false);
-
-			ButtonManager.subscribe("before", classes['before'].toggleDisplay.bind(classes['before']));
-			ButtonManager.subscribe("after", classes['after'].toggleDisplay.bind(classes['after']));
-
-			ButtonManager.subscribe("border-state", function(value) {
-				active.toggleBorder(value);
-			});
-
-		}
-
-		return {
-			init 			: init,
-			addShadow		: addShadow,
-			swapShadow		: swapShadow,
-			addCssClass		: addCssClass,
-			disableClass	: disableClass,
-			deleteShadow	: deleteShadow,
-			setActiveClass	: setActiveClass,
-			setActiveShadow : setActiveShadow
-		}
-
-	})();
-
-	/**
-	 * Layer Manager
-	 */
-	var LayerManager = (function LayerManager() {
-		var stacks = [];
-		var active = {
-			node : null,
-			stack : null
-		}
-		var elements = {};
-
-		var mouseEvents = function mouseEvents(e) {
-			var node = e.target;
-			var type = node.getAttribute('data-type');
-
-			if (type === 'subject')
-				setActiveStack(stacks[node.id]);
-
-			if (type === 'disable') {
-				Tool.disableClass(node.parentNode.id);
-				setActiveStack(stacks['element']);
-			}
-
-			if (type === 'add')
-				active.stack.addLayer();
-
-			if (type === 'layer')
-				active.stack.setActiveLayer(node);
-
-			if (type === 'delete')
-				active.stack.deleteLayer(node.parentNode);
-
-			if (type === 'move-up')
-				active.stack.moveLayer(1);
-
-			if (type === 'move-down')
-				active.stack.moveLayer(-1);
-		}
-
-		var setActiveStack = function setActiveStack(stackObj) {
-			active.stack.hide();
-			active.stack = stackObj;
-			active.stack.show();
-		}
-
-		/*
-		 * Stack object
-		 */
-		var Stack = function Stack(subject) {
-			var S = document.createElement('div');
-			var title = document.createElement('div');
-			var stack = document.createElement('div');
-
-			S.className = 'container';
-			stack.className = 'stack';
-			title.className = 'title';
-			title.textContent = subject.getAttribute('data-title');
-			S.appendChild(title);
-			S.appendChild(stack);
-
-			this.id = subject.id;
-			this.container = S;
-			this.stack = stack;
-			this.subject = subject;
-			this.order = [];
-			this.uid = 0;
-			this.count = 0;
-			this.layer = null;
-			this.layerID = 0;
-		}
-
-		Stack.prototype.addLayer = function addLayer() {
-			if (Tool.addShadow(this.layerID) == -1)
-				return;
-
-			var uid = this.getUID();
-			var layer = this.createLayer(uid);
-
-			if (this.layer === null &amp;&amp; this.stack.children.length &gt;= 1)
-				this.layer = this.stack.children[0];
-
-			this.stack.insertBefore(layer, this.layer);
-			this.order.splice(this.layerID, 0, uid);
-			this.count++;
-			this.setActiveLayer(layer);
-		}
-
-		Stack.prototype.createLayer = function createLayer(uid) {
-			var layer = document.createElement('div');
-			var del = document.createElement('span');
-
-			layer.className = 'node';
-			layer.setAttribute('data-shid', uid);
-			layer.setAttribute('data-type', 'layer');
-			layer.textContent = 'shadow ' + uid;
-
-			del.className = 'delete';
-			del.setAttribute('data-type', 'delete');
-
-			layer.appendChild(del);
-			return layer;
-		}
-
-		Stack.prototype.getUID = function getUID() {
-			return this.uid++;
-		}
-
-		// SOLVE IE BUG
-		Stack.prototype.moveLayer = function moveLayer(direction) {
-			if (this.count &lt;= 1 || this.layer === null)
-				return;
-			if (direction === -1 &amp;&amp; this.layerID === (this.count - 1) )
-				return;
-			if (direction === 1 &amp;&amp; this.layerID === 0 )
-				return;
-
-			if (direction === -1) {
-				var before = null;
-				Tool.swapShadow(this.layerID, this.layerID + 1);
-				this.swapOrder(this.layerID, this.layerID + 1);
-				this.layerID += 1;
-
-				if (this.layerID + 1 !== this.count)
-					before = this.stack.children[this.layerID + 1];
-
-				this.stack.insertBefore(this.layer, before);
-				Tool.setActiveShadow(this.layerID, false);
-			}
-
-			if (direction === 1) {
-				Tool.swapShadow(this.layerID, this.layerID - 1);
-				this.swapOrder(this.layerID, this.layerID - 1);
-				this.layerID -= 1;
-				this.stack.insertBefore(this.layer, this.stack.children[this.layerID]);
-				Tool.setActiveShadow(this.layerID, false);
-			}
-		}
-
-		Stack.prototype.swapOrder = function swapOrder(pos1, pos2) {
-			var x = this.order[pos1];
-			this.order[pos1] = this.order[pos2];
-			this.order[pos2] = x;
-		}
-
-		Stack.prototype.deleteLayer = function deleteLayer(node) {
-			var shadowID =  node.getAttribute('data-shid') | 0;
-			var index = this.order.indexOf(shadowID);
-			this.stack.removeChild(this.stack.children[index]);
-			this.order.splice(index, 1);
-			this.count--;
-
-			Tool.deleteShadow(index);
-
-			if (index &gt; this.layerID)
-				return;
-
-			if (index == this.layerID) {
-				if (this.count &gt;= 1) {
-					this.layerID = 0;
-					this.setActiveLayer(this.stack.children[0], true);
-				}
-				else {
-					this.layer = null;
-					this.show();
-				}
-			}
-
-			if (index &lt; this.layerID) {
-				this.layerID--;
-				Tool.setActiveShadow(this.layerID, true);
-			}
-
-		}
-
-		Stack.prototype.setActiveLayer = function setActiveLayer(node) {
-			elements.shadow_properties.style.display = 'block';
-			elements.element_properties.style.display = 'none';
-
-			if (this.layer)
-				this.layer.removeAttribute('data-active');
-
-			this.layer = node;
-			this.layer.setAttribute('data-active', 'layer');
-
-			var shadowID =  node.getAttribute('data-shid') | 0;
-			this.layerID = this.order.indexOf(shadowID);
-			Tool.setActiveShadow(this.layerID, true);
-		}
-
-		Stack.prototype.unsetActiveLayer = function unsetActiveLayer() {
-			if (this.layer)
-				this.layer.removeAttribute('data-active');
-
-			this.layer = null;
-			this.layerID = 0;
-		}
-
-		Stack.prototype.hide = function hide() {
-			this.unsetActiveLayer();
-			this.subject.removeAttribute('data-active');
-			var style = this.container.style;
-			style.left = '100%';
-			style.zIndex = '0';
-		}
-
-		Stack.prototype.show = function show() {
-			elements.shadow_properties.style.display = 'none';
-			elements.element_properties.style.display = 'block';
-
-			if (this.id === 'element') {
-				elements.zIndex.style.display = 'none';
-				elements.transform_rotate.style.display = 'none';
-			}
-			else {
-				elements.zIndex.style.display = 'block';
-				elements.transform_rotate.style.display = 'block';
-			}
-
-			this.subject.setAttribute('data-active', 'subject');
-			var style = this.container.style;
-			style.left = '0';
-			style.zIndex = '10';
-			Tool.setActiveClass(this.id);
-		}
-
-		function init() {
-
-			var elem, size;
-			var layerManager = getElemById("layer_manager");
-			var layerMenu = getElemById("layer_menu");
-			var container = getElemById("stack_container");
-
-			elements.shadow_properties = getElemById('shadow_properties');
-			elements.element_properties = getElemById('element_properties');
-			elements.transform_rotate = getElemById('transform_rotate');
-			elements.zIndex = getElemById('z-index');
-
-			elem = document.querySelectorAll('#layer_menu [data-type="subject"]');
-			size = elem.length;
-
-			for (var i = 0; i &lt; size; i++) {
-				var S = new Stack(elem[i]);
-				stacks[elem[i].id] = S;
-				container.appendChild(S.container);
-				Tool.addCssClass(elem[i].id);
-			}
-
-			active.stack = stacks['element'];
-			stacks['element'].show();
-
-			layerManager.addEventListener("click", mouseEvents);
-			layerMenu.addEventListener("click", mouseEvents);
-
-			ButtonManager.subscribe("before", function(value) {
-				if (value === false &amp;&amp; active.stack === stacks['before'])
-					setActiveStack(stacks['element'])
-				if (value === true &amp;&amp; active.stack !== stacks['before'])
-					setActiveStack(stacks['before'])
-			});
-
-			ButtonManager.subscribe("after", function(value) {
-				if (value === false &amp;&amp; active.stack === stacks['after'])
-					setActiveStack(stacks['element'])
-				if (value === true &amp;&amp; active.stack !== stacks['after'])
-					setActiveStack(stacks['after'])
-			});
-		}
-
-		return {
-			init : init
-		}
-	})();
-
-	/*
-	 * OutputManager
-	 */
-	var OutputManager = (function OutputManager() {
-		var classes = [];
-		var buttons = [];
-		var active = null;
-		var menu = null;
-		var button_offset = 0;
-
-		var crateOutputNode = function(topic, property) {
-
-			var prop = document.createElement('div');
-			var name = document.createElement('span');
-			var value = document.createElement('span');
-
-			var pmatch = property.match(/(^([a-z0-9\-]*)=\[([a-z0-9\-\"]*)\])|^([a-z0-9\-]*)/i);
-
-			name.textContent = '\t' + pmatch[4];
-
-			if (pmatch[3] !== undefined) {
-				name.textContent = '\t' + pmatch[2];
-				value.textContent = pmatch[3] + ';';
-			}
-
-			name.textContent += ': ';
-			prop.className = 'css-property';
-			name.className = 'name';
-			value.className = 'value';
-			prop.appendChild(name);
-			prop.appendChild(value);
-
-			classes[topic].node.appendChild(prop);
-			classes[topic].line[property] = prop;
-			classes[topic].prop[property] = value;
-		}
-
-		var OutputClass = function OutputClass(node) {
-			var topic = node.getAttribute('data-topic');
-			var prop = node.getAttribute('data-prop');
-			var name = node.getAttribute('data-name');
-			var properties = prop.split(' ');
-
-			classes[topic] = {};
-			classes[topic].node = node;
-			classes[topic].prop = [];
-			classes[topic].line = [];
-			classes[topic].button = new Button(topic);
-
-			var open_decl = document.createElement('div');
-			var end_decl = document.createElement('div');
-
-			open_decl.textContent = name + ' {';
-			end_decl.textContent = '}';
-			node.appendChild(open_decl);
-
-			for (var i in properties)
-				crateOutputNode(topic, properties[i]);
-
-			node.appendChild(end_decl);
-		}
-
-		var Button = function Button(topic) {
-			var button = document.createElement('div');
-
-			button.className = 'button';
-			button.textContent = topic;
-			button.style.left = button_offset + 'px';
-			button_offset += 100;
-
-			button.addEventListener("click", function() {
-				toggleDisplay(topic);
-			})
-
-			menu.appendChild(button);
-			return button;
-		}
-
-		var toggleDisplay = function toggleDisplay(topic) {
-			active.button.removeAttribute('data-active');
-			active.node.style.display = 'none';
-			active = classes[topic];
-			active.node.style.display = 'block';
-			active.button.setAttribute('data-active', 'true');
-		}
-
-		var toggleButton = function toggleButton(topic, value) {
-			var display = (value === true) ? 'block' : 'none';
-			classes[topic].button.style.display = display;
-
-			if (value === true)
-				toggleDisplay(topic);
-			else
-				toggleDisplay('element');
-		}
-
-		var updateProperty = function updateProperty(topic, property, data) {
-			try {
-				classes[topic].prop[property].textContent = data + ';';
-			}
-			catch(error) {
-				// console.log("ERROR undefined : ", topic, property, data);
-			}
-		}
-
-		var toggleProperty = function toggleProperty(topic, property, value) {
-			var display = (value === true) ? 'block' : 'none';
-			try {
-				classes[topic].line[property].style.display = display;
-			}
-			catch(error) {
-				// console.log("ERROR undefined : ",classes, topic, property, value);
-			}
-		}
-
-		var init = function init() {
-
-			menu = getElemById('menu');
-
-			var elem = document.querySelectorAll('#output .output');
-			var size = elem.length;
-			for (var i = 0; i &lt; size; i++)
-				OutputClass(elem[i]);
-
-			active = classes['element'];
-			toggleDisplay('element');
-
-			ButtonManager.subscribe("before", function(value) {
-				toggleButton('before', value);
-			});
-
-			ButtonManager.subscribe("after", function(value) {
-				toggleButton('after', value);
-			});
-		}
-
-		return {
-			init : init,
-			updateProperty : updateProperty,
-			toggleProperty : toggleProperty
-		}
-
-	})();
-
-
-	/**
-	 * Init Tool
-	 */
-	var init = function init() {
-		ButtonManager.init();
-		OutputManager.init();
-		ColoPicker.init();
-		SliderManager.init();
-		LayerManager.init();
-		PreviewMouseTracking.init("preview");
-		Tool.init();
-	}
-
-	return {
-		init : init
-	}
-
-})();
-
-
-</code></pre>
-</div>
-
-<div>{{ EmbedLiveSample('box-shadow_generator', '100%', '1100px', '') }}</div>
-
-<p><strong>Related Tool: </strong><a href="https://cssgenerator.org/box-shadow-css-generator.html">Box Shadow CSS Generator</a></p>
diff --git a/files/zh-cn/web/css/css_backgrounds_and_borders/border-image_generator/index.html b/files/zh-cn/web/css/css_backgrounds_and_borders/border-image_generator/index.html
new file mode 100644
index 0000000000..870e84f663
--- /dev/null
+++ b/files/zh-cn/web/css/css_backgrounds_and_borders/border-image_generator/index.html
@@ -0,0 +1,2629 @@
+---
+title: Border-image 生成器
+slug: Web/CSS/CSS_Backgrounds_and_Borders/Border-image_generator
+tags:
+  - CSS
+  - Tools
+translation_of: Web/CSS/CSS_Background_and_Borders/Border-image_generator
+original_slug: Web/CSS/CSS_Background_and_Borders/Border-image_generator
+---
+<p>这个工具用于生成 CSS3 {{cssxref("border-image")}} 的值.</p>
+
+<div class="hidden">
+<h2 id="Border_Image_Generator" name="Border_Image_Generator">Border Image Generator</h2>
+
+<h3 id="HTML_Content">HTML Content</h3>
+
+<pre class="brush: html">    &lt;div id="container"&gt;
+
+        &lt;div id="gallery"&gt;
+            &lt;div id="image-gallery"&gt;
+                &lt;img class="image" src="https://mdn.mozillademos.org/files/6007/border-image-1.png" data-stateID="border1"/&gt;
+                &lt;img class="image" src="https://mdn.mozillademos.org/files/6009/border-image-2.png" data-stateID="border2"/&gt;
+                &lt;img class="image" src="https://mdn.mozillademos.org/files/6011/border-image-3.png" data-stateID="border3"/&gt;
+                &lt;img class="image" src="https://mdn.mozillademos.org/files/6013/border-image-4.png" data-stateID="border4"/&gt;
+                &lt;img class="image" src="https://mdn.mozillademos.org/files/6015/border-image-5.png" data-stateID="border5"/&gt;
+                &lt;img class="image" src="https://mdn.mozillademos.org/files/6017/border-image-6.svg" data-stateID="border6"/&gt;
+            &lt;/div&gt;
+        &lt;/div&gt;
+
+        &lt;div id="load-actions" class="group section"&gt;
+            &lt;div id="toggle-gallery" data-action="hide"&gt; &lt;/div&gt;
+            &lt;div id="load-image" class="button"&gt; Upload image &lt;/div&gt;
+            &lt;input id="remote-url" type="text" placeholder="Load an image from URL"/&gt;
+            &lt;div id="load-remote" class="button"&gt; &lt;/div&gt;
+        &lt;/div&gt;
+
+        &lt;div id="general-controls" class="group section"&gt;
+            &lt;div class="name"&gt; Control Box &lt;/div&gt;
+            &lt;div class="separator"&gt;&lt;/div&gt;
+            &lt;div class="property"&gt;
+                &lt;div class="name"&gt;scale&lt;/div&gt;
+                &lt;div class="ui-input-slider" data-topic="scale"
+                    data-unit="%" data-max="300" data-sensivity="10"&gt;
+                &lt;/div&gt;
+            &lt;/div&gt;
+            &lt;div class="separator"&gt;&lt;/div&gt;
+            &lt;div class="property"&gt;
+                &lt;div class="name"&gt;draggable&lt;/div&gt;
+                &lt;div class="ui-checkbox" data-topic='drag-subject'&gt;&lt;/div&gt;
+            &lt;/div&gt;
+            &lt;div class="property right"&gt;
+                &lt;div class="name"&gt;section height&lt;/div&gt;
+                &lt;div class="ui-input-slider" data-topic="preview-area-height"
+                    data-min="400" data-max="1000"&gt;
+                &lt;/div&gt;
+            &lt;/div&gt;
+        &lt;/div&gt;
+
+        &lt;div id="preview_section" class="group section"&gt;
+            &lt;div id="subject"&gt;
+                &lt;div class="guideline" data-axis="Y" data-topic="slice-top"&gt;&lt;/div&gt;
+                &lt;div class="guideline" data-axis="X" data-topic="slice-right"&gt;&lt;/div&gt;
+                &lt;div class="guideline" data-axis="Y" data-topic="slice-bottom"&gt;&lt;/div&gt;
+                &lt;div class="guideline" data-axis="X" data-topic="slice-left"&gt;&lt;/div&gt;
+            &lt;/div&gt;
+            &lt;div id="preview"&gt; &lt;/div&gt;
+        &lt;/div&gt;
+
+        &lt;!-- controls --&gt;
+        &lt;div id="controls" class="group section"&gt;
+
+            &lt;!-- border-image-slice --&gt;
+            &lt;div id="border-slice-control" class="category"&gt;
+                &lt;div class="title"&gt; border-image-slice &lt;/div&gt;
+                &lt;div class="property"&gt;
+                    &lt;div class="name"&gt;fill&lt;/div&gt;
+                    &lt;div class="ui-checkbox" data-topic='slice-fill'&gt;&lt;/div&gt;
+                &lt;/div&gt;
+            &lt;/div&gt;
+
+            &lt;!-- border-image-width --&gt;
+            &lt;div id="border-width-control" class="category"&gt;
+                &lt;div class="title"&gt; border-image-width &lt;/div&gt;
+            &lt;/div&gt;
+
+            &lt;!-- border-image-outset --&gt;
+            &lt;div id="border-outset-control" class="category"&gt;
+                &lt;div class="title"&gt; border-image-outset &lt;/div&gt;
+            &lt;/div&gt;
+
+            &lt;!-- other-settings --&gt;
+            &lt;div id="aditional-properties" class="category"&gt;
+                &lt;div class="title"&gt; aditional-properties &lt;/div&gt;
+                &lt;div class="property"&gt;
+                    &lt;div class="name"&gt; repeat-x &lt;/div&gt;
+                    &lt;div class="ui-dropdown border-repeat" data-topic="image-repeat-X" data-selected="2"&gt;
+                        &lt;div data-value="0"&gt;repeat&lt;/div&gt;
+                        &lt;div data-value="0"&gt;stretch&lt;/div&gt;
+                        &lt;div data-value="0"&gt;round&lt;/div&gt;
+                    &lt;/div&gt;
+                &lt;/div&gt;
+                &lt;div class="property"&gt;
+                    &lt;div class="name"&gt; repeat-y &lt;/div&gt;
+                    &lt;div class="ui-dropdown border-repeat" data-topic="image-repeat-Y" data-selected="2"&gt;
+                        &lt;div data-value="1"&gt;repeat&lt;/div&gt;
+                        &lt;div data-value="1"&gt;stretch&lt;/div&gt;
+                        &lt;div data-value="1"&gt;round&lt;/div&gt;
+                    &lt;/div&gt;
+                &lt;/div&gt;
+                &lt;div class="property"&gt;
+                    &lt;div class="ui-input-slider" data-topic="font-size" data-info="em size"
+                        data-unit="px" data-value="12" data-sensivity="3"&gt;
+                    &lt;/div&gt;
+                &lt;/div&gt;
+
+                &lt;div class="property"&gt;
+                    &lt;div class="ui-input-slider" data-topic="preview-width" data-info="width"
+                         data-unit=" px" data-min="10" data-max="10000" data-sensivity="3"&gt;&lt;/div&gt;
+                &lt;/div&gt;
+                &lt;div class="property"&gt;
+                    &lt;div class="ui-input-slider" data-topic="preview-height" data-info="height"
+                        data-unit=" px" data-min="10" data-max="10000" data-sensivity="3"&gt;
+                    &lt;/div&gt;
+                &lt;/div&gt;
+            &lt;/div&gt;
+
+
+            &lt;div id="output" class="category"&gt;
+                &lt;div class="title"&gt; CSS Code &lt;/div&gt;
+                &lt;div class="css-property"&gt;
+                    &lt;span class="name"&gt; border-image-slice: &lt;/span&gt;
+                    &lt;span id="out-border-slice" class="value"&gt; &lt;/span&gt;
+                &lt;/div&gt;
+                &lt;div class="css-property"&gt;
+                    &lt;span class="name"&gt; border-image-width: &lt;/span&gt;
+                    &lt;span id="out-border-width" class="value"&gt; &lt;/span&gt;
+                &lt;/div&gt;
+                &lt;div class="css-property"&gt;
+                    &lt;span class="name"&gt; border-image-outset: &lt;/span&gt;
+                    &lt;span id="out-border-outset" class="value"&gt; &lt;/span&gt;
+                &lt;/div&gt;
+                &lt;div class="css-property"&gt;
+                    &lt;span class="name"&gt; border-image-repeat: &lt;/span&gt;
+                    &lt;span id="out-border-repeat" class="value"&gt; &lt;/span&gt;
+                &lt;/div&gt;
+                &lt;div class="css-property"&gt;
+                    &lt;span class="name"&gt; border-image-source: &lt;/span&gt;
+                    &lt;span id="out-border-source" class="value"&gt;  &lt;/span&gt;
+                &lt;/div&gt;
+            &lt;/div&gt;
+
+        &lt;/div&gt;
+    &lt;/div&gt;</pre>
+
+<h3 id="CSS_Content">CSS Content</h3>
+
+<pre class="brush: css">/*  GRID OF TWELVE
+ * ========================================================================== */
+
+.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 {
+	height: 20px;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	-moz-user-select: none;
+	user-select: none;
+}
+
+.ui-input-slider * {
+	float: left;
+	height: 100%;
+	line-height: 100%;
+}
+
+/* Input Slider */
+
+.ui-input-slider &gt; 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 DropDown
+ */
+
+/* Dropdown */
+
+.ui-dropdown {
+	height: 2em;
+	width: 120px;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	font-size: 12px;
+
+	background-image: url("https://mdn.mozillademos.org/files/6037/drop_arrow_icon.png");
+	background-position: right center;
+	background-repeat: no-repeat;
+	background-color: #359740;
+
+	position: relative;
+
+	-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;
+}
+
+.ui-dropdown:hover {
+	cursor: pointer;
+	background-color: #208B20;
+}
+
+/* Dropdown Select Button */
+
+.ui-dropdown-select {
+	height: inherit;
+	padding: 0 0.75em;
+	color: #FFF;
+	line-height: 2em;
+}
+
+/* Dropdown List */
+
+.ui-dropdown-list {
+	width: 100%;
+	height: 150px;
+	max-height: 150px;
+	margin: 0;
+	padding: 0 0.3em;
+
+	border: 3px solid #3490D2;
+	border-color: #208B20;
+	background: #666;
+	background-color: #EEF1F5;
+	color: #000;
+
+	position: absolute;
+	top: 2em;
+	left: 0;
+	z-index: 100;
+
+	overflow: hidden;
+	transition: all 0.3s;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+.ui-dropdown-list:hover {
+	overflow: auto;
+}
+
+.ui-dropdown-list[data-hidden='true'] {
+	height: 0 !important;
+	opacity: 0;
+	visibility: hidden;
+}
+
+.ui-dropdown[data-position='left'] .ui-dropdown-list {
+	left: -100%;
+	top: 0;
+}
+
+.ui-dropdown[data-position='right'] .ui-dropdown-list {
+	left: 100%;
+	top: 0;
+}
+
+.ui-dropdown-list &gt; div {
+	width: 100%;
+	height: 1.6em;
+	margin: 0.3em 0;
+	padding: 0.3em;
+	line-height: 1em;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+.ui-dropdown-list &gt; div:hover {
+	background: #3490D2;
+	color:#FFF;
+	border-radius: 2px;
+	cursor: pointer;
+}
+
+
+/*************************************************************************************/
+/*************************************************************************************/
+
+/*
+ * UI Button
+ */
+
+/* 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 &gt; input {
+ 	display: none;
+}
+
+.ui-checkbox &gt; 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: 2px;
+	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 &gt; label:hover {
+	cursor: pointer;
+}
+
+.ui-checkbox &gt; input:checked + label {
+	background-image: url("https://mdn.mozillademos.org/files/5681/checked.png");
+	background-color: #379B4A;
+}
+
+/*************************************************************************************/
+/*************************************************************************************/
+
+/*
+ * BORDER IMAGE GENERATOR TOOL
+ */
+
+body {
+	width: 100%;
+	margin: 0 auto;
+	padding: 0 0 20px 0;
+
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+
+	/*background: url("https://mdn.mozillademos.org/files/6025/grain.png");*/
+	border: 1px solid #EEE;
+
+	-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;
+}
+
+body[data-move='X'] {
+	cursor: w-resize !important;
+}
+
+body[data-move='Y'] {
+	cursor: s-resize !important;
+}
+
+#container {
+	width: 100%;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+[data-draggable='true']:hover {
+	cursor: move;
+}
+
+[data-draggable='true']:hover &gt; * {
+	cursor: default;
+}
+
+
+
+/******************************************************************************/
+/******************************************************************************/
+
+/*
+ * Border Image Picker
+ */
+
+#gallery {
+	box-shadow: 0 0 3px 0 #BABABA;
+}
+
+#image-gallery {
+	width: 600px;
+	height: 100px;
+	margin: 0 auto;
+	transition: margin 0.4s;
+}
+
+#image-gallery .image {
+	height: 80px;
+	float: left;
+	margin: 10px;
+	opacity: 0.5;
+	background-color: #FFF;
+	box-shadow: 0px 0px 3px 1px #BABABA;
+}
+
+#image-gallery .image[selected="true"] {
+	box-shadow: 0px 0px 3px 1px #3BBA52;
+	opacity: 1;
+}
+
+#image-gallery .image:hover {
+	cursor: pointer;
+	box-shadow: 0px 0px 3px 1px #30ACE5;
+	opacity: 1;
+}
+
+#image-gallery[data-collapsed='true'] {
+	margin-top: -100px;
+}
+
+/* Load Menu */
+
+#load-actions {
+	margin: 10px 0;
+}
+
+#toggle-gallery {
+	width: 30px;
+	height: 25px;
+	margin: 10px;
+	color: #FFF;
+
+	background-image: url('https://mdn.mozillademos.org/files/6005/arrow-up-white.png');
+	background-repeat: no-repeat;
+	background-position: top 4px center;
+	background-color: #888888 !important;
+
+	border-radius: 2px;
+	float: left;
+}
+
+#toggle-gallery:hover {
+	cursor: pointer;
+}
+
+#toggle-gallery[data-action='show'] {
+	background-image: url('https://mdn.mozillademos.org/files/6001/arrow-down-white.png');
+	background-color: #888888 !important;
+}
+
+#toggle-gallery[data-action='hide'] {
+	background-image: url('https://mdn.mozillademos.org/files/6005/arrow-up-white.png');
+}
+
+.button {
+	width: 100px;
+	height: 25px;
+	margin: 10px;
+	color: #FFF;
+	text-align: center;
+	font-size: 12px;
+	line-height: 25px;
+	background-color: #379B4A;
+	border-radius: 2px;
+	float: left;
+}
+
+.button:hover {
+	cursor: pointer;
+	background-color: #3380C4;
+}
+
+#load-image {
+	float: left;
+}
+
+#load-remote {
+	width: 30px;
+	background-image: url('https://mdn.mozillademos.org/files/6003/arrow-right-white.png');
+	background-repeat: no-repeat;
+	background-position: center center;
+}
+
+#remote-url {
+	width: 200px;
+	height: 23px;
+	margin: 10px;
+	padding: 0 5px;
+	border: 1px solid #379B4A;
+	border-radius: 2px;
+	float: left;
+
+	transition: width 0.5s;
+}
+
+#remote-url:focus {
+	box-shadow: 0px 0px 3px -1px #379B4A; /*#68ACE8; */
+	border-color: rgba(55, 155, 74, 0.5);
+	width: 450px;
+}
+
+/*
+ * Visible Area
+ */
+
+#preview_section {
+	position: relative;
+	min-height: 400px;
+}
+
+/* Image Control */
+
+#subject {
+	width: 300px;
+	height: 300px;
+	background-repeat: no-repeat;
+	background-size: 100%;
+	background-color: #FFF;
+	border: 1px solid #CCC;
+
+	position: absolute;
+	z-index: 10;
+	top: 15%;
+	left: 10%;
+
+	box-shadow: 0 0 3px 0 #BABABA;
+	transition-property: width, height;
+	transition-duration: 0.1s;
+}
+
+#subject .guideline {
+	background-color: rgba(255, 255, 255, 0.7);
+	border: 1px solid rgba(0, 0, 0, 0.3);
+	position: absolute;
+}
+
+#subject .guideline:hover {
+	background-color: #F00;
+}
+
+#subject .guideline[data-active] {
+	background-color: #F00;
+	z-index: 10;
+}
+
+#subject .guideline[data-axis='X'] {
+	width: 1px;
+	height: 100%;
+	top: -1px;
+}
+
+#subject .guideline[data-axis='Y'] {
+	width: 100%;
+	height: 1px;
+	left: -1px;
+}
+
+#subject .guideline[data-axis='X']:hover {
+	cursor: w-resize;
+}
+
+#subject .guideline[data-axis='Y']:hover {
+	cursor: s-resize;
+}
+
+
+#subject .relative {
+	position: relative;
+	font-size: 12px;
+}
+
+#subject .tooltip, #subject .tooltip2 {
+	width: 40px;
+	height: 20px;
+	line-height: 20px;
+	font-size: 12px;
+	text-align: center;
+
+	position: absolute;
+	opacity: 0.5;
+	transition: opacity 0.25s;
+}
+
+#subject .tooltip {
+	background: #EEE;
+	border-radius: 2px;
+	border: 1px solid #CCC;
+}
+
+#subject .tooltip2{
+	color: #555;
+}
+
+#subject [data-active] &gt; * {
+	opacity: 1;
+}
+
+#subject .tooltip[data-info='top'] {
+	top: -10px;
+	right: -50px;
+}
+
+#subject .tooltip[data-info='right'] {
+	bottom: -30px;
+	right: -20px;
+}
+
+#subject .tooltip[data-info='bottom'] {
+	top: -10px;
+	left: -50px;
+}
+
+#subject .tooltip[data-info='left'] {
+	top: -30px;
+	right: -20px;
+}
+
+#subject .tooltip2[data-info='top'] {
+	top: -10px;
+	left: -50px;
+}
+
+#subject .tooltip2[data-info='right'] {
+	top: -30px;
+	right: -20px;
+}
+
+#subject .tooltip2[data-info='bottom'] {
+	top: -10px;
+	right: -50px;
+}
+
+#subject .tooltip2[data-info='left'] {
+	bottom: -30px;
+	right: -20px;
+}
+
+/* Preview */
+
+#preview {
+	width: 30%;
+	height: 50%;
+	background-color: #FFF;
+	text-align: center;
+	overflow: hidden;
+	position: absolute;
+	z-index: 10;
+
+	left: 60%;
+	top: 15%;
+
+	border-radius: 2px;
+	border-image-width: 20px;
+	border-image-repeat: round;
+	box-shadow: 0 0 3px 0 #BABABA;
+}
+
+#preview .resize-handle {
+	width: 10px;
+	height: 10px;
+	background: url("https://mdn.mozillademos.org/files/6027/resize.png") center center no-repeat;
+	position: absolute;
+	bottom: 0;
+	right: 0;
+}
+
+#preview .resize-handle:hover {
+	cursor: nw-resize;
+}
+
+
+/*
+ * General controls MENU
+ */
+
+#general-controls {
+	padding: 10px 30px;
+	background-color: #FFF;
+	opacity: 0.95;
+	color: #888;
+	/*border-radius: 2px;*/
+	box-shadow: 0 0 3px 0 #BABABA;
+}
+
+#general-controls .property {
+	width: 130px;
+	float: left;
+}
+
+#general-controls .name {
+	height: 20px;
+	margin: 0 10px 0 0;
+	line-height: 100%;
+	text-align: right;
+	float: left;
+}
+
+#general-controls .right {
+	width: 200px;
+	float: right;
+}
+
+#general-controls .ui-checkbox label {
+	height: 10px;
+}
+
+#general-controls .separator {
+	height: 40px;
+	width: 1px;
+	margin: -10px 15px;
+	background-color: #EEE;
+	float: left;
+}
+
+/*
+ * Controls
+ */
+
+#controls {
+	color: #444;
+	margin: 10px 0 0 0;
+}
+
+#controls .category {
+	height: 190px;
+	min-width: 260px;
+	margin: 10px;
+	padding: 10px;
+	border: 1px solid #CCC;
+	border-radius: 3px;
+	float: left;
+
+	box-shadow: 0 0 3px 0 #BABABA;
+	transition: all 0.25s;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+@media (min-width: 880px) {
+	#controls .category {
+		width: 30%;
+		margin-left: 1.66%;
+		margin-right: 1.66%;
+	}
+}
+
+@media (max-width: 879px) {
+	#controls .category {
+		width: 37%;
+		margin-left: 6.5%;
+		margin-right: 6.5%;
+	}
+}
+
+#controls .category .title {
+	width: 100%;
+	height: 30px;
+	margin: 0 0 10px 0;
+	line-height: 25px;
+
+	text-align: center;
+	color: #AAA;
+}
+
+#controls .category:hover .title {
+	color: #777;
+}
+
+#controls .category &gt; .group {
+	border: 1px solid #CCC;
+	border-radius: 2px;
+}
+
+
+/* property */
+
+#controls .property {
+	width: 250px;
+	height: 20px;
+	margin: 5px auto;
+}
+
+#controls .property .ui-input-slider {
+	margin: 0;
+	float: left;
+}
+
+#controls .property .ui-input-slider-info {
+	width: 60px;
+}
+
+#controls .property .ui-input-slider-left {
+	transition: opacity 0.15s;
+    opacity: 0;
+}
+
+#controls .property .ui-input-slider-right {
+	transition: opacity 0.15s;
+    opacity: 0;
+}
+
+#controls .property .name {
+	width: 60px;
+	height: 20px;
+	padding: 0px 10px 0px 0px;
+	text-align: right;
+	line-height: 100%;
+	float: left;
+}
+
+#controls .property .config {
+	width: 20px;
+	height: 20px;
+	float: left;
+	background: url("https://mdn.mozillademos.org/files/6021/config.png") center center no-repeat;
+	opacity: 0.5;
+}
+
+#controls .property .config:hover {
+	cursor: pointer;
+	opacity: 1;
+}
+
+#controls .ui-input-slider:hover .ui-input-slider-right {
+    opacity: 1;
+}
+
+#controls .ui-input-slider:hover .ui-input-slider-left {
+    opacity: 1;
+}
+
+#controls .property .ui-dropdown {
+	margin: 0 10px;
+	float: left;
+}
+
+
+#controls .property .ui-checkbox {
+	margin: 0 0 0 16px;
+	float: left;
+}
+
+#controls .property .ui-checkbox label {
+	height: 0.85em;
+	width: 10px;
+}
+
+/* dropdowns */
+#controls .ui-dropdown {
+	width: 50px;
+	height: 1.7em;
+	border-radius: 2px;
+}
+
+#controls .ui-dropdown-select {
+	line-height: 1.6em;
+}
+
+#controls .ui-dropdown-list {
+	top: 20px;
+}
+
+#controls .ui-dropdown-list {
+	border-width: 1px;
+	text-align: center;
+}
+
+#controls .ui-dropdown-list:hover {
+	overflow: hidden;
+}
+
+#controls .border-repeat {
+	margin: 0 0 0 16px !important;
+	width: 80px;
+}
+
+#controls .border-repeat .ui-dropdown-list {
+	height: 6.2em;
+	border-width: 1px;
+	text-align: center;
+}
+
+/* border-image-slice */
+
+
+#border-slice-control .ui-dropdown-list {
+	height: 4.3em;
+}
+
+/* border-image-width */
+
+#border-width-control .ui-dropdown-list {
+	height: 6.2em;
+}
+
+/* border-image-outset */
+
+#border-outset-control .ui-dropdown-list {
+	height: 4.3em;
+}
+
+#aditional-properties .property {
+	width: 200px;
+}
+
+#aditional-properties .ui-input-slider &gt; input {
+	width: 80px !important;
+}
+
+/* unit settings panel */
+
+#unit-settings {
+	padding: 10px;
+	position: absolute;
+
+	background: #FFF;
+
+	font-size: 12px;
+	border-radius: 3px;
+	border: 1px solid #CCC;
+	text-align: center;
+	color: #555;
+
+	position: absolute;
+	z-index: 1000;
+
+	box-shadow: 0 0 3px 0 #BABABA;
+	transition: all 0.25s;
+}
+
+#unit-settings .title {
+	width: 100%;
+	margin: -5px auto 0;
+
+	color: #666;
+	font-size: 14px;
+	font-weight: bold;
+	line-height: 25px;
+	border-bottom: 1px solid #E5E5E5;
+}
+
+#unit-settings .ui-input-slider {
+	margin: 10px 0 0 0;
+}
+
+#unit-settings .ui-input-slider-info {
+	width: 50px;
+	line-height: 1.5em;
+}
+
+#unit-settings input {
+	font-size: 12px;
+	width: 40px !important;
+}
+
+#unit-settings .close {
+	width: 16px;
+	height: 16px;
+	background: url('https://mdn.mozillademos.org/files/6019/close.png') no-repeat center center;
+	background-size: 75%;
+
+	position: absolute;
+	top: 4px;
+	right: 4px;
+	opacity: 0.5;
+}
+
+#unit-settings .close:hover {
+	cursor: pointer;
+	opacity: 1;
+}
+
+#unit-settings[data-active='true'] {
+	opacity: 1;
+}
+
+#unit-settings[data-active='false'] {
+	opacity: 0;
+	top: -100px !important;
+}
+
+/*
+ * CSS Output Code
+ */
+
+#output {
+	padding: 10px;
+	border: 2px dashed #888 !important;
+	box-shadow: none !important;
+	border-radius: 3px;
+	overflow: hidden;
+
+	-moz-user-select: text;
+	-webkit-user-select: text;
+	-ms-user-select: text;
+	user-select: text;
+}
+
+
+@media (min-width: 880px) {
+	#output {
+		width: 63.33% !important;
+	}
+}
+
+@media (max-width: 879px) {
+	#output {
+		width: 87% !important;
+	}
+}
+
+
+#output .title {
+	width: 100%;
+	height: 30px;
+	margin: 0 0 10px 0;
+	line-height: 25px;
+
+	text-align: center;
+	color: #AAA;
+}
+
+#output .css-property {
+	width: 100%;
+	margin: 0;
+	color: #555;
+	font-size: 14px;
+	line-height: 18px;
+	float: left;
+}
+
+#output .css-property .name {
+	width: 30%;
+	font-weight: bold;
+	text-align: right;
+	float: left;
+}
+
+#output .css-property .value {
+	width: 65%;
+	padding: 0 2.5%;
+	word-break: break-all;
+	float: left;
+}
+
+</pre>
+
+<h3 id="JavaScript_Content">JavaScript Content</h3>
+
+<pre class="brush: js">'use strict';
+
+/**
+ * UI-SlidersManager
+ */
+
+var InputSliderManager = (function InputSliderManager() {
+
+	var subscribers = {};
+	var sliders = [];
+
+	var InputComponent = function InputComponent(obj) {
+		var input = document.createElement('input');
+		input.setAttribute('type', 'text');
+		input.style.width = 50 + obj.precision * 10 + 'px';
+
+		input.addEventListener('click', function(e) {
+			this.select();
+		});
+
+		input.addEventListener('change', function(e) {
+			var value = parseFloat(e.target.value);
+
+			if (isNaN(value) === true)
+				setValue(obj.topic, obj.value);
+			else
+				setValue(obj.topic, value);
+		});
+
+		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) {
+			document.removeEventListener("mousemove", sliderMotion);
+			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("mouseup", slideEnd);
+			document.addEventListener("mousemove", sliderMotion);
+		});
+
+		var slideEnd = function slideEnd(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		= parseFloat(node.getAttribute('data-min'));
+		var max		= parseFloat(node.getAttribute('data-max'));
+		var step	= parseFloat(node.getAttribute('data-step'));
+		var value	= parseFloat(node.getAttribute('data-value'));
+		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;
+		var precision = node.getAttribute('data-precision') | 0;
+
+		this.min = isNaN(min) ? 0 : min;
+		this.max = isNaN(max) ? 100 : max;
+		this.precision = precision &gt;= 0 ? precision : 0;
+		this.step = step &lt; 0 || isNaN(step) ? 1 : step.toFixed(precision);
+		this.topic = topic;
+		this.node = node;
+		this.unit = unit === null ? '' : unit;
+		this.sensivity = sensivity &gt; 0 ? sensivity : 5;
+		value = isNaN(value) ? this.min : value;
+
+		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);
+
+		this.input = input;
+		sliders[topic] = this;
+		setValue(topic, value);
+	};
+
+	InputSlider.prototype.setInputValue = function setInputValue() {
+		this.input.value = this.value.toFixed(this.precision) + this.unit;
+	};
+
+	var setValue = function setValue(topic, value, send_notify) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		value = parseFloat(value.toFixed(slider.precision));
+
+		if (value &gt; slider.max) value = slider.max;
+		if (value &lt; slider.min)	value = slider.min;
+
+		slider.value = value;
+		slider.node.setAttribute('data-value', value);
+
+		slider.setInputValue();
+
+		if (send_notify === false)
+			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 setStep = function setStep(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.step = parseFloat(value);
+		setValue(topic, slider.value);
+	};
+
+	var setPrecision = function setPrecision(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		value = value | 0;
+		slider.precision = value;
+
+		var step = parseFloat(slider.step.toFixed(value));
+		if (step === 0)
+			slider.step = 1 / Math.pow(10, value);
+
+		setValue(topic, slider.value);
+	};
+
+	var setSensivity = function setSensivity(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		value = value | 0;
+
+		slider.sensivity = value &gt; 0 ? value : 5;
+	};
+
+	var getNode =  function getNode(topic) {
+		return sliders[topic].node;
+	};
+
+	var getPrecision =  function getPrecision(topic) {
+		return sliders[topic].precision;
+	};
+
+	var getStep =  function getStep(topic) {
+		return sliders[topic].step;
+	};
+
+	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() {
+		if (subscribers[this.topic] === undefined)
+			return;
+		for (var i = 0; i &lt; subscribers[this.topic].length; i++)
+			subscribers[this.topic][i](this.value);
+	};
+
+	var createSlider = function createSlider(topic, label) {
+		var slider = document.createElement('div');
+		slider.className = 'ui-input-slider';
+		slider.setAttribute('data-topic', topic);
+
+		if (label !== undefined)
+			slider.setAttribute('data-info', label);
+
+		new InputSlider(slider);
+		return slider;
+	};
+
+	var init = function init() {
+		var elem = document.querySelectorAll('.ui-input-slider');
+		var size = elem.length;
+		for (var i = 0; i &lt; size; i++)
+			new InputSlider(elem[i]);
+	};
+
+	return {
+		init : init,
+		setMax : setMax,
+		setMin : setMin,
+		setUnit : setUnit,
+		setStep : setStep,
+		getNode : getNode,
+		getStep : getStep,
+		setValue : setValue,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe,
+		setPrecision : setPrecision,
+		setSensivity : setSensivity,
+		getPrecision : getPrecision,
+		createSlider : createSlider,
+	};
+
+})();
+
+
+/**
+ * UI-DropDown Select
+ */
+
+var DropDownManager = (function DropdownManager() {
+
+	var subscribers = {};
+	var dropdowns = [];
+	var active = null;
+
+	var visbility = ["hidden", "visible"];
+
+
+	var DropDown = function DropDown(node) {
+		var topic = node.getAttribute('data-topic');
+		var label = node.getAttribute('data-label');
+		var selected = node.getAttribute('data-selected') | 0;
+
+		var select = document.createElement('div');
+		var list = document.createElement('div');
+		var uval = 0;
+		var option = null;
+		var option_value = null;
+
+		list.className = 'ui-dropdown-list';
+		select.className = 'ui-dropdown-select';
+
+		while (node.firstElementChild !== null) {
+			option = node.firstElementChild;
+			option_value = option.getAttribute('data-value');
+
+			if (option_value === null)
+				option.setAttribute('data-value', uval);
+
+			list.appendChild(node.firstElementChild);
+			uval++;
+		}
+
+		node.appendChild(select);
+		node.appendChild(list);
+
+		select.onclick = this.toggle.bind(this);
+		list.onclick = this.updateValue.bind(this);
+		document.addEventListener('click', clickOut);
+
+		this.state = 0;
+		this.time = 0;
+		this.dropmenu = list;
+		this.select = select;
+		this.toggle(false);
+		this.value = {};
+		this.topic = topic;
+
+		if (label)
+			select.textContent = label;
+		else
+			this.setNodeValue(list.children[selected]);
+
+		dropdowns[topic] = this;
+
+	};
+
+	DropDown.prototype.toggle = function toggle(state) {
+		if (typeof(state) === 'boolean')
+			this.state = state === false ? 0 : 1;
+		else
+			this.state = 1 ^ this.state;
+
+		if (active !== this) {
+			if (active)
+				active.toggle(false);
+			active = this;
+		}
+
+		if (this.state === 0)
+			this.dropmenu.setAttribute('data-hidden', 'true');
+		else
+			this.dropmenu.removeAttribute('data-hidden');
+
+	};
+
+	var clickOut = function clickOut(e) {
+		if (active.state === 0 ||
+			e.target === active.dropmenu ||
+			e.target === active.select)
+			return;
+
+		active.toggle(false);
+	};
+
+	DropDown.prototype.updateValue = function updateValue(e) {
+
+		if (Date.now() - this.time &lt; 500)
+			return;
+
+		if (e.target.className !== "ui-dropdown-list") {
+			this.setNodeValue(e.target);
+			this.toggle(false);
+		}
+
+		this.time = Date.now();
+	};
+
+	DropDown.prototype.setNodeValue = function setNodeValue(node) {
+		this.value['name'] = node.textContent;
+		this.value['value'] = node.getAttribute('data-value');
+
+		this.select.textContent = node.textContent;
+		this.select.setAttribute('data-value', this.value['value']);
+
+		notify.call(this);
+	};
+
+	var createDropDown = function createDropDown(topic, options) {
+
+		var dropdown = document.createElement('div');
+		dropdown.setAttribute('data-topic', topic);
+		dropdown.className = 'ui-dropdown';
+
+		for (var i in options) {
+			var x = document.createElement('div');
+			x.setAttribute('data-value', i);
+			x.textContent = options[i];
+			dropdown.appendChild(x);
+		}
+
+		new DropDown(dropdown);
+
+		return dropdown;
+	};
+
+	var setValue = function setValue(topic, index) {
+		if (dropdowns[topic] === undefined ||
+			index &gt;= dropdowns[topic].dropmenu.children.length)
+			return;
+
+		dropdowns[topic].setNodeValue(dropdowns[topic].dropmenu.children[index]);
+	};
+
+	var subscribe = function subscribe(topic, callback) {
+		if (subscribers[topic] === undefined)
+			subscribers[topic] = [];
+		subscribers[topic].push(callback);
+	};
+
+	var unsubscribe = function unsubscribe(topic, callback) {
+		var index = subscribers[topic].indexOf(callback);
+		subscribers[topic].splice(index, 1);
+	};
+
+	var notify = function notify() {
+		if (subscribers[this.topic] === undefined)
+			return;
+
+		for (var i in subscribers[this.topic]) {
+			subscribers[this.topic][i](this.value);
+		}
+	};
+
+	var init = function init() {
+		var elem, size;
+
+		elem = document.querySelectorAll('.ui-dropdown');
+		size = elem.length;
+		for (var i = 0; i &lt; size; i++)
+			new DropDown(elem[i]);
+
+	};
+
+	return {
+		init : init,
+		setValue : setValue,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe,
+		createDropDown : createDropDown
+	};
+
+})();
+
+
+/**
+ * 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) {
+		var obj = buttons[topic];
+		if (obj === undefined)
+			return;
+
+		obj.checkbox.checked = value;
+		notify.call(obj);
+	};
+
+	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() {
+		if (subscribers[this.topic] === undefined)
+			return;
+		for (var i = 0; i &lt; 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 &lt; size; i++)
+			new CheckBox(elem[i]);
+	};
+
+	return {
+		init : init,
+		setValue : setValue,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe
+	};
+
+})();
+
+window.addEventListener("load", function() {
+	BorderImage.init();
+});
+
+var BorderImage = (function BorderImage() {
+
+	var getElemById = document.getElementById.bind(document);
+
+	var subject;
+	var preview;
+	var guidelines = [];
+	var positions = ['top', 'right', 'bottom', 'left'];
+
+	var makeDraggable = function makeDraggable(elem) {
+
+		var offsetTop;
+		var offsetLeft;
+
+		elem.setAttribute('data-draggable', 'true');
+
+		var dragStart = function dragStart(e) {
+			if (e.target.getAttribute('data-draggable') !== 'true' ||
+				e.target !== elem || e.button !== 0)
+				return;
+
+			offsetLeft = e.clientX - elem.offsetLeft;
+			offsetTop = e.clientY - elem.offsetTop;
+
+			document.addEventListener('mousemove', mouseDrag);
+			document.addEventListener('mouseup', dragEnd);
+		};
+
+		var dragEnd = function dragEnd(e) {
+			if (e.button !== 0)
+				return;
+
+			document.removeEventListener('mousemove', mouseDrag);
+			document.removeEventListener('mouseup', dragEnd);
+		};
+
+		var mouseDrag = function mouseDrag(e) {
+
+			elem.style.left = e.clientX - offsetLeft + 'px';
+			elem.style.top = e.clientY - offsetTop + 'px';
+		};
+
+		elem.addEventListener('mousedown', dragStart, false);
+	};
+
+	var PreviewControl = function PreviewControl() {
+
+		var dragging = false;
+		var valueX = null;
+		var valueY = null;
+
+		var dragStart = function dragStart(e) {
+			if (e.button !== 0)
+				return;
+
+			valueX = e.clientX - preview.clientWidth;
+			valueY = e.clientY - preview.clientHeight;
+			dragging = true;
+
+			document.addEventListener('mousemove', mouseDrag);
+		};
+
+		var dragEnd = function dragEnd(e) {
+			if (e.button !== 0 || dragging === false)
+				return;
+
+			document.removeEventListener('mousemove', mouseDrag);
+			dragging = false;
+		};
+
+		var mouseDrag = function mouseDrag(e) {
+			InputSliderManager.setValue('preview-width', e.clientX - valueX);
+			InputSliderManager.setValue('preview-height', e.clientY - valueY);
+		};
+
+		var init = function init() {
+
+			makeDraggable(preview);
+			makeDraggable(subject);
+
+			var handle = document.createElement('div');
+			handle.className = 'resize-handle';
+
+			handle.addEventListener('mousedown', dragStart);
+			document.addEventListener('mouseup', dragEnd);
+
+			preview.appendChild(handle);
+
+		};
+
+		return {
+			init: init
+		};
+
+	}();
+
+	var ImageReader = (function ImageReader() {
+
+		var fReader = new FileReader();
+		var browse = document.createElement('input');
+
+		var loadImage = function loadImage(e) {
+			if (browse.files.length === 0)
+				return;
+
+			var file = browse.files[0];
+
+			if (file.type.slice(0, 5) !== 'image')
+				return;
+
+			fReader.readAsDataURL(file);
+
+			return false;
+		};
+
+		fReader.onload = function(e) {
+			ImageControl.loadRemoteImage(e.target.result);
+		};
+
+		var load = function load() {
+			browse.click();
+		};
+
+		browse.setAttribute('type', 'file');
+		browse.style.display = 'none';
+		browse.onchange = loadImage;
+
+		return {
+			load: load
+		};
+
+	})();
+
+	var ImageControl = (function ImageControl() {
+
+		var scale = 0.5;
+		var imgSource = new Image();
+		var imgState = null;
+		var selected = null;
+
+
+		var topics = ['slice', 'width', 'outset'];
+		var properties = {};
+		properties['border1'] = {
+			fill			: false,
+
+			slice_values	: [27, 27, 27, 27],
+			width_values	: [20, 20, 20, 20],
+			outset_values	: [0, 0, 0, 0],
+
+			slice_units		: [0, 0, 0, 0],
+			width_units		: [0, 0, 0, 0],
+			outset_units	: [0, 0, 0, 0],
+
+			repeat			: [1, 1],
+			size			: [300, 200],
+			preview_area	: 400
+		};
+
+		properties['border2'] = {
+			fill			: false,
+
+			slice_values	: [33, 33, 33, 33],
+			width_values	: [1.5, 1.5, 1.5, 1.5],
+			outset_values	: [0, 0, 0, 0],
+
+			slice_units		: [1, 1, 1, 1],
+			width_units		: [2, 2, 2, 2],
+			outset_units	: [0, 0, 0, 0],
+
+			repeat			: [2, 2],
+			size			: [300, 200],
+			preview_area	: 400
+		};
+
+		properties['border3'] = {
+			fill			: true,
+
+			slice_values	: [15, 15, 15, 15],
+			width_values	: [10, 10, 10, 10],
+			outset_values	: [0, 0, 0, 0],
+
+			slice_units		: [0, 0, 0, 0],
+			width_units		: [0, 0, 0, 0],
+			outset_units	: [0, 0, 0, 0],
+
+			repeat			: [2, 2],
+			size			: [300, 200],
+			preview_area	: 400
+		};
+
+		properties['border4'] = {
+			fill			: false,
+
+			slice_values	: [13, 13, 13, 13],
+			width_values	: [13, 13, 13, 13],
+			outset_values	: [13, 13, 13, 13],
+
+			slice_units		: [0, 0, 0, 0],
+			width_units		: [0, 0, 0, 0],
+			outset_units	: [0, 0, 0, 0],
+
+			repeat			: [0, 0],
+			size			: [300, 200],
+			preview_area	: 400
+		};
+
+		properties['border5'] = {
+			fill			: false,
+
+			slice_values	: [0, 12, 0, 12],
+			width_values	: [0, 12, 0, 12],
+			outset_values	: [0, 0, 0, 0],
+
+			slice_units		: [0, 0, 0, 0],
+			width_units		: [0, 0, 0, 0],
+			outset_units	: [0, 0, 0, 0],
+
+			repeat			: [0, 0],
+			size			: [300, 200],
+			preview_area	: 400,
+		};
+
+		properties['border6'] = {
+			fill			: false,
+
+			slice_values	: [42, 42, 42, 42],
+			width_values	: [42, 42, 42, 42],
+			outset_values	: [0, 0, 0, 0],
+
+			slice_units		: [0, 0, 0, 0],
+			width_units		: [0, 0, 0, 0],
+			outset_units	: [0, 0, 0, 0],
+
+			repeat			: [2, 2],
+			size			: [350, 350],
+			preview_area	: 500,
+		};
+
+
+		var loadLocalImage = function loadLocalImage(source) {
+			var location = "images/" + source;
+			imgSource.src = location;
+		};
+
+		var loadRemoteImage = function loadRemoteImage(source) {
+			imgSource.src = source;
+			if (selected)
+				selected.removeAttribute('selected');
+			Tool.setOutputCSS('source', 'url("' + source + '")');
+		};
+
+		var pickImage = function pickImage(e) {
+			if (e.target.className === 'image') {
+				selected = e.target;
+				selected.setAttribute('selected', 'true');
+				loadRemoteImage(e.target.src);
+				imgState = e.target.getAttribute('data-stateID');
+			}
+		};
+
+		var loadImageState = function loadImageState(stateID) {
+			if (properties[stateID] === undefined)
+				return;
+
+			var prop = properties[stateID];
+			var topic;
+			var unit_array;
+			var value_array;
+
+			for (var i in topics) {
+				for (var j=0; j&lt;4; j++) {
+					topic = topics[i] + '-' + positions[j];
+					unit_array = topics[i] + '_units';
+					value_array = topics[i] + '_values';
+					InputSliderManager.setValue(topic, prop[value_array][j]);
+					DropDownManager.setValue(topic, prop[unit_array][j]);
+				}
+			}
+
+			ButtonManager.setValue('slice-fill', prop['fill']);
+			DropDownManager.setValue('image-repeat-X', prop['repeat'][0]);
+			DropDownManager.setValue('image-repeat-Y', prop['repeat'][1]);
+			InputSliderManager.setValue('preview-width', prop['size'][0]);
+			InputSliderManager.setValue('preview-height', prop['size'][1]);
+			InputSliderManager.setValue('preview-area-height', prop['preview_area']);
+		};
+
+		var update = function update() {
+			scale =  Math.min(300, (30000 / this.width) | 0);
+			setScale(scale);
+			InputSliderManager.setValue('scale', scale, false);
+
+			subject.style.backgroundImage = 'url("' + this.src + '")';
+			preview.style.borderImageSource = 'url("' + this.src + '")';
+
+			guidelines['slice-top'].setMax(this.height);
+			guidelines['slice-right'].setMax(this.width);
+			guidelines['slice-bottom'].setMax(this.height);
+			guidelines['slice-left'].setMax(this.width);
+
+			if (imgState)
+				loadImageState(imgState);
+		};
+
+		var setScale = function setScale(value) {
+			scale = value;
+			var w = imgSource.width * scale / 100 | 0;
+			var h = imgSource.height * scale / 100 | 0;
+			subject.style.width = w + 'px';
+			subject.style.height = h + 'px';
+
+			for (var i = 0; i &lt; positions.length; i++)
+				guidelines['slice-' + positions[i]].updateGuidelinePos();
+		};
+
+		var getScale = function getScale() {
+			return scale/100;
+		};
+
+		var toggleGallery = function toggleGallery() {
+			var gallery = getElemById('image-gallery');
+			var button  = getElemById('toggle-gallery');
+			var state = 1;
+			button.addEventListener('click', function() {
+				state = 1 ^ state;
+				if (state === 0) {
+					gallery.setAttribute('data-collapsed', 'true');
+					button.setAttribute('data-action', 'show');
+				}
+				else {
+					gallery.removeAttribute('data-collapsed');
+					button.setAttribute('data-action', 'hide');
+				}
+			});
+		};
+
+		var init = function init() {
+			var gallery = getElemById('image-gallery');
+			var browse = getElemById('load-image');
+			var remote = getElemById('remote-url');
+			var load_remote = getElemById('load-remote');
+
+			remote.addEventListener('change', function(){
+				loadRemoteImage(this.value);
+			});
+
+			load_remote.addEventListener('click', function(){
+				loadRemoteImage(remote.value);
+			});
+
+			browse.addEventListener('click', ImageReader.load);
+			gallery.addEventListener('click', pickImage);
+			imgSource.addEventListener('load', update);
+
+			InputSliderManager.subscribe('scale', setScale);
+			InputSliderManager.setValue('scale', scale);
+			imgState = 'border1';
+			loadRemoteImage('https://mdn.mozillademos.org/files/6007/border-image-1.png');
+			toggleGallery();
+		};
+
+		return {
+			init: init,
+			getScale : getScale,
+			loadRemoteImage: loadRemoteImage
+		};
+
+	})();
+
+	var GuideLine = function GuideLine(node) {
+		var topic = node.getAttribute('data-topic');
+		var axis = node.getAttribute('data-axis');
+
+		this.node = node;
+		this.topic = topic;
+		this.axis = axis;
+		this.info = topic.split('-')[1];
+
+		this.position = 0;
+		this.value = 0;
+		this.unit = 0;
+		this.max = 0;
+		this.pos = positions.indexOf(this.info);
+
+		guidelines[topic] = this;
+
+		var relative_container = document.createElement('div');
+		var tooltip = document.createElement('div');
+		var tooltip2 = document.createElement('div');
+
+		tooltip.className = 'tooltip';
+		tooltip.setAttribute('data-info', this.info);
+
+		tooltip2.className = 'tooltip2';
+		tooltip2.textContent = this.info;
+		tooltip2.setAttribute('data-info', this.info);
+
+		this.tooltip = tooltip;
+
+		relative_container.appendChild(tooltip);
+		relative_container.appendChild(tooltip2);
+		node.appendChild(relative_container);
+
+		var startX = 0;
+		var startY = 0;
+		var start = 0;
+
+		var startDrag = function startDrag(e) {
+			startX = e.clientX;
+			startY = e.clientY;
+			start = guidelines[topic].position;
+			document.body.setAttribute('data-move', axis);
+			relative_container.setAttribute('data-active', '');
+			node.setAttribute('data-active', '');
+
+			document.addEventListener('mousemove', updateGuideline);
+			document.addEventListener('mouseup', endDrag);
+		};
+
+		var endDrag = function endDrag() {
+			document.body.removeAttribute('data-move');
+			relative_container.removeAttribute('data-active');
+			node.removeAttribute('data-active');
+
+			document.removeEventListener('mousemove', updateGuideline);
+		};
+
+		var updateGuideline = function updateGuideline(e) {
+			var value;
+			if (topic === 'slice-top')
+				value = e.clientY - startY + start;
+
+			if (topic === 'slice-right')
+				value = startX - e.clientX + start;
+
+			if (topic === 'slice-bottom')
+				value = startY - e.clientY + start;
+
+			if (topic === 'slice-left')
+				value = e.clientX - startX + start;
+
+			if (this.unit === 0)
+				InputSliderManager.setValue(topic, value * 1 / ImageControl.getScale() | 0);
+			else {
+				InputSliderManager.setValue(topic, (value * 100 / (this.max * ImageControl.getScale())) | 0);
+			}
+
+		}.bind(this);
+
+		node.addEventListener("mousedown", startDrag);
+
+		InputSliderManager.subscribe(topic, this.setPosition.bind(this));
+		InputSliderManager.setValue(topic, this.position);
+	};
+
+
+	GuideLine.prototype.updateGuidelinePos = function updateGuidelinePos() {
+		if (this.unit === 0)
+			this.position = this.value * ImageControl.getScale() | 0;
+		else
+			this.position = this.value * this.max * ImageControl.getScale() / 100 | 0;
+
+		this.node.style[this.info] = this.position + 'px';
+	};
+
+	GuideLine.prototype.setPosition = function setPosition(value) {
+		this.value = value;
+		this.tooltip.textContent = value;
+		this.updateGuidelinePos();
+		Tool.setBorderSlice(this.pos, value);
+	};
+
+	GuideLine.prototype.setMax = function setMax(max) {
+		this.max = max;
+		this.updateLimit();
+	};
+
+	GuideLine.prototype.updateLimit = function updateLimit() {
+		if (this.unit === 1)
+			InputSliderManager.setMax(this.topic, 100);
+		else
+			InputSliderManager.setMax(this.topic, this.max);
+	};
+
+	GuideLine.prototype.setUnit = function setUnit(type) {
+		if (type === '%')	this.unit = 1;
+		if (type === '')	this.unit = 0;
+		this.updateLimit();
+	};
+
+	/*
+	 * Unit panel
+	 */
+	var UnitPanel = (function UnitPanel () {
+
+		var panel;
+		var title;
+		var precision;
+		var step;
+		var unit_topic = null; // settings are made for this topic
+		var step_option = [1, 0.1, 0.01];
+
+		var updatePrecision = function updatePrecision(value) {
+			InputSliderManager.setPrecision('unit-step', value);
+			InputSliderManager.setStep('unit-step', step_option[value]);
+			InputSliderManager.setMin('unit-step', step_option[value]);
+
+			if (unit_topic)
+				InputSliderManager.setPrecision(unit_topic, value);
+		};
+
+		var updateUnitSettings = function updateUnitSettings(value) {
+			if (unit_topic)
+				InputSliderManager.setStep(unit_topic, value);
+		};
+
+		var show = function show(e) {
+			var topic = e.target.getAttribute('data-topic');
+			var precision = InputSliderManager.getPrecision(topic);
+			var step = InputSliderManager.getStep(topic);
+
+			unit_topic = topic;
+			title.textContent = topic;
+
+			panel.setAttribute('data-active', 'true');
+			panel.style.top = e.target.offsetTop - 40 + 'px';
+			panel.style.left = e.target.offsetLeft + 30 + 'px';
+
+			InputSliderManager.setValue('unit-precision', precision);
+			InputSliderManager.setValue('unit-step', step);
+		};
+
+		var init = function init() {
+			panel = document.createElement('div');
+			title = document.createElement('div');
+			var close = document.createElement('div');
+
+			step = InputSliderManager.createSlider('unit-step', 'step');
+			precision = InputSliderManager.createSlider('unit-precision', 'precision');
+
+			InputSliderManager.setStep('unit-precision', 1);
+			InputSliderManager.setMax('unit-precision', 2);
+			InputSliderManager.setValue('unit-precision', 2);
+			InputSliderManager.setSensivity('unit-precision', 20);
+
+			InputSliderManager.setValue('unit-step', 1);
+			InputSliderManager.setStep('unit-step', 0.01);
+			InputSliderManager.setPrecision('unit-step', 2);
+
+			InputSliderManager.subscribe('unit-precision', updatePrecision);
+			InputSliderManager.subscribe('unit-step', updateUnitSettings);
+
+			close.addEventListener('click', function () {
+				panel.setAttribute('data-active', 'false');
+			});
+
+			title.textContent = 'Properties';
+			title.className = 'title';
+			close.className = 'close';
+			panel.id = 'unit-settings';
+			panel.setAttribute('data-active', 'false');
+			panel.appendChild(title);
+			panel.appendChild(precision);
+			panel.appendChild(step);
+			panel.appendChild(close);
+			document.body.appendChild(panel);
+		};
+
+		return {
+			init : init,
+			show : show
+		};
+
+	})();
+
+	/**
+	 * Tool Manager
+	 */
+	var Tool = (function Tool() {
+		var preview_area;
+		var dropdown_unit_options = [
+			{ '' : '--', '%' : '%'},
+			{ 'px' : 'px', '%' : '%', 'em' : 'em'},
+			{ 'px' : 'px', 'em' : 'em'},
+		];
+
+		var border_slice = [];
+		var border_width = [];
+		var border_outset = [];
+
+		var border_slice_values = [];
+		var border_width_values = [];
+		var border_outset_values = [];
+
+		var border_slice_units = ['', '', '', ''];
+		var border_width_units = ['px', 'px', 'px', 'px'];
+		var border_outset_units = ['px', 'px', 'px', 'px'];
+
+		var border_fill = false;
+		var border_repeat = ['round', 'round'];
+		var CSS_code = {
+			'source' : null,
+			'slice' : null,
+			'width' : null,
+			'outset' : null,
+			'repeat' : null
+		};
+
+		var setBorderSlice = function setBorderSlice(positionID, value) {
+			border_slice[positionID] = value + border_slice_units[positionID];
+			updateBorderSlice();
+		};
+
+		var updateBorderSlice = function updateBorderSlice() {
+			var value = border_slice.join(' ');
+			if (border_fill === true)
+				value += ' fill';
+
+			preview.style.borderImageSlice = value;
+			setOutputCSS('slice', value);
+		};
+
+		var setBorderFill = function setBorderFill(value) {
+			border_fill = value;
+			var bimgslice = border_slice.join(' ');;
+			if (value === true)
+				bimgslice += ' fill';
+
+			preview.style.borderImageSlice = bimgslice;
+		};
+
+		var updateBorderWidth = function updateBorderWidth() {
+			var value = border_width.join(' ');
+			preview.style.borderImageWidth = value;
+			setOutputCSS('width', value);
+		};
+
+		var updateBorderOutset = function updateBorderOutset() {
+			var value = border_outset.join(' ');
+			preview.style.borderImageOutset = border_outset.join(' ');
+			setOutputCSS('outset', value);
+		};
+
+		var setBorderRepeat = function setBorderRepeat(obj) {
+			border_repeat[obj.value] = obj.name;
+			var value = border_repeat.join(' ');
+			preview.style.borderImageRepeat = value;
+			setOutputCSS('repeat', value);
+		};
+
+		var setOutputCSS = function setOutputCSS(topic, value) {
+			CSS_code[topic].textContent = value + ';';
+		};
+
+		var setPreviewFontSize = function setPreviewFontSize(value) {
+			preview.style.fontSize = value + 'px';
+		};
+
+		var setPreviewWidth = function setPreviewWidth(value) {
+			preview.style.width = value + 'px';
+		};
+
+		var setPreviewHeight = function setPreviewHeight(value) {
+			preview.style.height = value + 'px';
+		};
+
+		var setPreviewAreaHeight = function setPreviewAreaHeight(value) {
+			preview_area.style.height = value + 'px';
+		};
+
+		var updateDragOption = function updateDragOption(value) {
+			if (value === true)
+				subject.setAttribute('data-draggable', 'true');
+			else
+				subject.removeAttribute('data-draggable');
+		};
+
+		var createProperty = function createProperty(topic, labelID, optionsID) {
+
+			var slider = InputSliderManager.createSlider(topic, positions[labelID]);
+			var dropdown = DropDownManager.createDropDown(topic, dropdown_unit_options[optionsID]);
+
+			InputSliderManager.setSensivity(topic, 3);
+			InputSliderManager.setPrecision(topic, 1);
+
+			var property = document.createElement('div');
+			var config = document.createElement('div');
+
+			property.className = 'property';
+			config.className = 'config';
+			config.setAttribute('data-topic', topic);
+			config.addEventListener('click', UnitPanel.show);
+
+			property.appendChild(slider);
+			property.appendChild(dropdown);
+			property.appendChild(config);
+
+			return property;
+		};
+
+		var initBorderSliceControls = function initBorderSliceControls() {
+			var container = getElemById('border-slice-control');
+
+			var listenForChanges = function listenForChanges(topic, id) {
+				InputSliderManager.subscribe(topic, function(value) {
+					border_slice_values[id] = value;
+					border_slice[id] = value + border_slice_units[id];
+					updateBorderSlice();
+				});
+
+				DropDownManager.subscribe(topic, function(obj) {
+					guidelines[topic].setUnit(obj.value);
+					border_slice_units[id] = obj.value;
+					border_slice[id] = border_slice_values[id] + obj.value;
+					updateBorderSlice();
+				});
+			};
+
+			for (var i = 0; i &lt; positions.length; i++) {
+				var topic = 'slice-' + positions[i];
+				var property = createProperty(topic, i, 0);
+				listenForChanges(topic, i);
+
+				container.appendChild(property);
+			}
+
+			container.appendChild(container.children[1]);
+
+		};
+
+		var initBorderWidthControls = function initBorderWidthControls() {
+			var container = getElemById('border-width-control');
+
+			var listenForChanges = function listenForChanges(topic, id) {
+				InputSliderManager.subscribe(topic, function(value) {
+					border_width_values[id] = value;
+					border_width[id] = value + border_width_units[id];
+					updateBorderWidth();
+				});
+
+				DropDownManager.subscribe(topic, function(obj) {
+					if (obj.value === '%')
+						InputSliderManager.setMax(topic, 100);
+					else
+						InputSliderManager.setMax(topic, 1000);
+
+					border_width_units[id] = obj.value;
+					border_width[id] = border_width_values[id] + obj.value;
+					updateBorderWidth();
+				});
+			};
+
+			for (var i = 0; i &lt; positions.length; i++) {
+				var topic = 'width-' + positions[i];
+				var property = createProperty(topic, i, 1);
+				InputSliderManager.setMax(topic, 1000);
+				listenForChanges(topic, i);
+
+				container.appendChild(property);
+			}
+		};
+
+		var initBorderOutsetControls = function initBorderOutsetControls() {
+
+			var container = getElemById('border-outset-control');
+
+			var listenForChanges = function listenForChanges(topic, id) {
+				InputSliderManager.subscribe(topic, function(value) {
+					border_outset_values[id] = value;
+					border_outset[id] = value + border_outset_units[id];
+					updateBorderOutset();
+				});
+
+				DropDownManager.subscribe(topic, function(obj) {
+					border_outset_units[id] = obj.value;
+					border_outset[id] = border_outset_values[id] + obj.value;
+					updateBorderOutset();
+				});
+			};
+
+			for (var i = 0; i &lt; positions.length; i++) {
+				var topic = 'outset-' + positions[i];
+				var property = createProperty(topic, i, 2);
+				InputSliderManager.setMax(topic, 1000);
+				listenForChanges(topic, i);
+
+				container.appendChild(property);
+			}
+		};
+
+		var init = function init() {
+
+			var gallery =
+			subject = getElemById('subject');
+			preview = getElemById("preview");
+			preview_area = getElemById("preview_section");
+
+
+			CSS_code['source'] = getElemById("out-border-source");
+			CSS_code['slice'] = getElemById("out-border-slice");
+			CSS_code['width'] = getElemById("out-border-width");
+			CSS_code['outset'] = getElemById("out-border-outset");
+			CSS_code['repeat'] = getElemById("out-border-repeat");
+
+			initBorderSliceControls();
+			initBorderWidthControls();
+			initBorderOutsetControls();
+
+			var elem = document.querySelectorAll('.guideline');
+			var size = elem.length;
+			for (var i = 0; i &lt; size; i++)
+				new GuideLine(elem[i]);
+
+			PreviewControl.init();
+
+			ButtonManager.subscribe('slice-fill',setBorderFill);
+			ButtonManager.subscribe('drag-subject', updateDragOption);
+			ButtonManager.setValue('drag-subject', false);
+
+			DropDownManager.subscribe('image-repeat-X', setBorderRepeat);
+			DropDownManager.subscribe('image-repeat-Y', setBorderRepeat);
+
+			InputSliderManager.subscribe('preview-area-height', setPreviewAreaHeight);
+			InputSliderManager.subscribe('preview-width', setPreviewWidth);
+			InputSliderManager.subscribe('preview-height', setPreviewHeight);
+			InputSliderManager.subscribe('font-size', setPreviewFontSize);
+			InputSliderManager.setValue('preview-width', 300);
+			InputSliderManager.setValue('preview-height', 200);
+		};
+
+		return {
+			init: init,
+			setOutputCSS: setOutputCSS,
+			setBorderSlice: setBorderSlice
+		};
+
+	})();
+
+	/**
+	 * Init Tool
+	 */
+	var init = function init() {
+		InputSliderManager.init();
+		DropDownManager.init();
+		ButtonManager.init();
+		UnitPanel.init();
+		Tool.init();
+		ImageControl.init();
+	};
+
+	return {
+		init : init
+	};
+
+})();
+
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Border_Image_Generator', '100%', '1270px') }}</p>
+
+<p> </p>
diff --git a/files/zh-cn/web/css/css_backgrounds_and_borders/border-radius_generator/index.html b/files/zh-cn/web/css/css_backgrounds_and_borders/border-radius_generator/index.html
new file mode 100644
index 0000000000..4781337bc3
--- /dev/null
+++ b/files/zh-cn/web/css/css_backgrounds_and_borders/border-radius_generator/index.html
@@ -0,0 +1,1600 @@
+---
+title: 圆角边框生成器
+slug: Web/CSS/CSS_Backgrounds_and_Borders/Border-radius_generator
+translation_of: Web/CSS/CSS_Background_and_Borders/Border-radius_generator
+original_slug: Web/CSS/CSS_Background_and_Borders/Border-radius_generator
+---
+<p>使用<em>Border-radius generator</em>生成 CSS3 {{cssxref("border-radius")}} 样式</p>
+
+<div class="hidden">
+<h2 id="border-radius-generator" name="border-radius-generator">border-radius</h2>
+
+<h3 id="HTML_Content">HTML Content</h3>
+
+<pre class="brush: html">&lt;div id="container"&gt;
+    &lt;div class="group section"&gt;
+        &lt;div id="preview" class="col span_12"&gt;
+            &lt;div id="subject"&gt;
+                &lt;div id="top-left" class="radius-container"
+                    data-X="left" data-Y="top"&gt;
+                &lt;/div&gt;
+                &lt;div id="top-right" class="radius-container"
+                    data-X="right" data-Y="top"&gt;
+                &lt;/div&gt;
+                &lt;div id="bottom-right" class="radius-container"
+                    data-X="right" data-Y="bottom"&gt;
+                &lt;/div&gt;
+                &lt;div id="bottom-left" class="radius-container"
+                    data-X="left" data-Y="bottom"&gt;
+                &lt;/div&gt;
+
+                &lt;div id="radius-ui-sliders"&gt;
+                    &lt;div id="tlr" class="ui-input-slider" data-topic="top-left"
+                         data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
+
+                    &lt;div id="tlw" class="ui-input-slider" data-topic="top-left-w"
+                         data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
+
+                    &lt;div id="tlh" class="ui-input-slider" data-topic="top-left-h"
+                        data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
+
+                    &lt;div id="trr" class="ui-input-slider" data-topic="top-right"
+                         data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
+
+                    &lt;div id="trw" class="ui-input-slider" data-topic="top-right-w"
+                         data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
+
+                    &lt;div id="trh" class="ui-input-slider" data-topic="top-right-h"
+                        data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
+
+                    &lt;div id="brr" class="ui-input-slider" data-topic="bottom-right"
+                         data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
+
+                    &lt;div id="brw" class="ui-input-slider" data-topic="bottom-right-w"
+                         data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
+
+                    &lt;div id="brh" class="ui-input-slider" data-topic="bottom-right-h"
+                        data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
+
+                    &lt;div id="blr" class="ui-input-slider" data-topic="bottom-left"
+                         data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
+
+                    &lt;div id="blw" class="ui-input-slider" data-topic="bottom-left-w"
+                         data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
+
+                    &lt;div id="blh" class="ui-input-slider" data-topic="bottom-left-h"
+                        data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
+                &lt;/div&gt;
+            &lt;/div&gt;
+        &lt;/div&gt;
+    &lt;/div&gt;
+    &lt;div id="controls" class="group section"&gt;
+
+        &lt;div class="group section"&gt;
+            &lt;div id="dimensions"&gt;
+                &lt;div class="ui-input-slider" data-topic="width" data-info="width"
+                     data-unit=" px" data-min="150" data-max="700" data-sensivity="1"&gt;&lt;/div&gt;
+
+                &lt;div class="ui-input-slider" data-topic="height" data-info="height"
+                    data-unit=" px" data-min="75" data-max="350" data-sensivity="1"&gt;&lt;/div&gt;
+            &lt;/div&gt;
+
+            &lt;div id="output"&gt;&lt;/div&gt;
+        &lt;/div&gt;
+
+        &lt;div class="group section"&gt;
+            &lt;div id="radius-lock"&gt;
+                &lt;div class="info"&gt; rounded corner &lt;/div&gt;
+                &lt;div class="ui-checkbox" data-topic='top-left'&gt;&lt;/div&gt;
+                &lt;div class="ui-checkbox" data-topic='top-right'&gt;&lt;/div&gt;
+                &lt;div class="ui-checkbox" data-topic='bottom-right'&gt;&lt;/div&gt;
+                &lt;div class="ui-checkbox" data-topic='bottom-left'&gt;&lt;/div&gt;
+            &lt;/div&gt;
+
+            &lt;div id="unit-selection"&gt;
+                &lt;div class="info"&gt; select border units &lt;/div&gt;
+            &lt;/div&gt;
+        &lt;/div&gt;
+
+    &lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="CSS_Content">CSS Content</h3>
+
+<pre class="brush: css">/*  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 &gt; 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 &gt; input {
+ 	display: none;
+}
+
+.ui-checkbox &gt; 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 &gt; label:hover {
+	cursor: pointer;
+}
+
+.ui-checkbox &gt; 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 &gt; 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;
+}
+
+
+</pre>
+
+<h3 id="JavaScript_Content">JavaScript Content</h3>
+
+<pre class="brush: js"><code class="language-js">'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 &gt; 0 ? max : 100;
+		this.step = step === 0 ? 1 : step;
+		this.topic = topic;
+		this.node = node;
+		this.unit = unit;
+		this.sensivity = sensivity &gt; 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 &gt; slider.max) value = slider.max;
+		if (value &lt; slider.min)	value = slider.min;
+
+		slider.value = value;
+		slider.node.setAttribute('data-value', value);
+
+		if (send_notify !== undefined &amp;&amp; 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 &lt; 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 &lt; 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 &lt; 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' &amp;&amp; y == 'top') handle.className = 'handle handle-top-left'
+		if (x === 'right' &amp;&amp; y == 'top') handle.className = 'handle handle-top-right';
+		if (x === 'right' &amp;&amp; y == 'bottom') handle.className = 'handle handle-bottom-right';
+		if (x === 'left' &amp;&amp; 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 &amp;&amp; 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 &lt; 0)	this.size = 0;
+			if (this.size &gt; this.maxR)	this.size = this.maxR;
+			this.updateRadius();
+			this.updateBorderRadius();
+			return;
+		}
+
+		if (deltaX) {
+			this.width += this.resizeX * deltaX;
+			if (this.width &lt; 0)	this.width = 0;
+			if (this.width &gt; this.maxW)	this.width = this.maxW;
+			this.updateWidth();
+		}
+
+		if (deltaY) {
+			this.height += this.resizeY * deltaY;
+			if (this.height &lt; 0) this.height = 0;
+			if (this.height &gt; 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 &lt; 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 &lt; 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 &lt; 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
+	}
+
+})();
+
+
+</code></pre>
+</div>
+
+<p>{{ EmbedLiveSample('border-radius-generator', '100%', '800px', '') }}</p>
+
+<p> </p>
diff --git a/files/zh-cn/web/css/css_backgrounds_and_borders/box-shadow_generator/index.html b/files/zh-cn/web/css/css_backgrounds_and_borders/box-shadow_generator/index.html
new file mode 100644
index 0000000000..2847389264
--- /dev/null
+++ b/files/zh-cn/web/css/css_backgrounds_and_borders/box-shadow_generator/index.html
@@ -0,0 +1,2881 @@
+---
+title: Box-shadow generator
+slug: Web/CSS/CSS_Backgrounds_and_Borders/Box-shadow_generator
+translation_of: Web/CSS/CSS_Background_and_Borders/Box-shadow_generator
+original_slug: Web/CSS/CSS_Background_and_Borders/Box-shadow_generator
+---
+<p>这个可视化工具可以帮助你生成一个元素的CSS{{cssxref("box-shadow")}}相关代码，添加box shadow效果到你的CSS对象上。</p>
+
+<div class="hidden">
+<h2 id="box-shadow_generator" name="box-shadow_generator">box-shadow generator</h2>
+
+<h3 id="HTML_Content">HTML Content</h3>
+
+<pre class="brush: html">&lt;div id="container"&gt;
+    &lt;div class="group section"&gt;
+        &lt;div id="layer_manager"&gt;
+            &lt;div class="group section"&gt;
+                &lt;div class="button" data-type="add"&gt; &lt;/div&gt;
+                &lt;div class="button" data-type="move-up"&gt; &lt;/div&gt;
+                &lt;div class="button" data-type="move-down"&gt; &lt;/div&gt;
+            &lt;/div&gt;
+            &lt;div id="stack_container"&gt;&lt;/div&gt;
+        &lt;/div&gt;
+
+        &lt;div id="preview_zone"&gt;
+            &lt;div id="layer_menu" class="col span_12"&gt;
+                &lt;div class="button" id="element" data-type="subject" data-title="element"&gt; element &lt;/div&gt;
+                &lt;div class="button" id="before" data-type="subject" data-title=":before"&gt;
+                    :before
+                    &lt;span class="delete" data-type="disable"&gt;&lt;/span&gt;
+                &lt;/div&gt;
+                &lt;div class="button" id="after" data-type="subject" data-title=":after"&gt;
+                    :after
+                    &lt;span class="delete" data-type="disable"&gt;&lt;/span&gt;
+                &lt;/div&gt;
+                &lt;div class="ui-checkbox" data-topic='before' data-label=":before"&gt;&lt;/div&gt;
+                &lt;div class="ui-checkbox" data-topic='after' data-label=":after"&gt;&lt;/div&gt;
+            &lt;/div&gt;
+
+            &lt;div id="preview"&gt;
+                &lt;div id="obj-element"&gt;
+                    &lt;div class="content"&gt; &lt;/div&gt;
+                    &lt;div id="obj-before"&gt; &lt;/div&gt;
+                    &lt;div id="obj-after"&gt; &lt;/div&gt;
+                &lt;/div&gt;
+            &lt;/div&gt;
+        &lt;/div&gt;
+    &lt;/div&gt;
+
+    &lt;div id="controls" class="group section"&gt;
+        &lt;div class="wrap-left"&gt;
+            &lt;div class="colorpicker category"&gt;
+                &lt;div class="title"&gt; &lt;/div&gt;
+                &lt;div id="colorpicker" class="group"&gt;
+                    &lt;div id="gradient" class="gradient"&gt;
+                        &lt;div id="gradient_picker"&gt; &lt;/div&gt;
+                    &lt;/div&gt;
+                    &lt;div id="hue" data-topic="hue" class="hue"&gt;
+                        &lt;div id="hue_selector"&gt; &lt;/div&gt;
+                    &lt;/div&gt;
+                    &lt;div class="info"&gt;
+                        &lt;div class="input" data-topic="hue" data-title='H:' data-action="HSV"&gt;&lt;/div&gt;
+                        &lt;div class="input" data-topic="saturation" data-title='S:' data-action="HSV"&gt;&lt;/div&gt;
+                        &lt;div class="input" data-topic="value" data-title='V:' data-action="HSV"&gt;&lt;/div&gt;
+                    &lt;/div&gt;
+                    &lt;div class="alpha"&gt;
+                        &lt;div id="alpha" data-topic="alpha"&gt;
+                            &lt;div id="alpha_selector"&gt; &lt;/div&gt;
+                        &lt;/div&gt;
+                    &lt;/div&gt;
+                    &lt;div class="info"&gt;
+                        &lt;div class="input" data-topic="r" data-title='R:' data-action="RGB"&gt;&lt;/div&gt;
+                        &lt;div class="input" data-topic="g" data-title='G:' data-action="RGB"&gt;&lt;/div&gt;
+                        &lt;div class="input" data-topic="b" data-title='B:' data-action="RGB"&gt;&lt;/div&gt;
+                    &lt;/div&gt;
+                    &lt;div class="preview block"&gt;
+                        &lt;div id="output_color"&gt; &lt;/div&gt;
+                    &lt;/div&gt;
+                    &lt;div class="block info"&gt;
+                        &lt;div class="input" data-topic="a" data-title='alpha:' data-action="alpha"&gt;&lt;/div&gt;
+                        &lt;div class="input" data-topic="hexa" data-title='' data-action="hexa"&gt;&lt;/div&gt;
+                    &lt;/div&gt;
+                &lt;/div&gt;
+            &lt;/div&gt;
+        &lt;/div&gt;
+
+        &lt;div class="wrap-right"&gt;
+
+            &lt;div id="shadow_properties" class="category"&gt;
+                &lt;div class="title"&gt; Shadow properties &lt;/div&gt;
+                &lt;div class="group"&gt;
+                    &lt;div class="group property"&gt;
+                        &lt;div class="ui-slider-name"&gt; inset &lt;/div&gt;
+                        &lt;div class="ui-checkbox" data-topic='inset'&gt;&lt;/div&gt;
+                    &lt;/div&gt;
+                    &lt;div class="slidergroup"&gt;
+                        &lt;div class="ui-slider-name"&gt; Position x &lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="posX" data-type="sub"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider" data-topic="posX"
+                            data-min="-500" data-max="500" data-step="1"&gt; &lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="posX" data-type="add"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider-input" data-topic="posX" data-unit="px"&gt;&lt;/div&gt;
+                    &lt;/div&gt;
+                    &lt;div class="slidergroup"&gt;
+                        &lt;div class="ui-slider-name"&gt; Position y &lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="posY" data-type="sub"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider" data-topic="posY"
+                            data-min="-500" data-max="500" data-step="1"&gt; &lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="posY" data-type="add"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider-input" data-topic="posY" data-unit="px"&gt;&lt;/div&gt;
+                    &lt;/div&gt;
+                    &lt;div class="slidergroup"&gt;
+                        &lt;div class="ui-slider-name"&gt; Blur &lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="blur" data-type="sub"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider" data-topic="blur"
+                            data-min="0" data-max="200" data-step="1"&gt; &lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="blur" data-type="add"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider-input" data-topic="blur" data-unit="px"&gt;&lt;/div&gt;
+                    &lt;/div&gt;
+                    &lt;div class="slidergroup"&gt;
+                        &lt;div class="ui-slider-name"&gt; Spread &lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="spread" data-type="sub"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider" data-topic="spread"
+                            data-min="-100"    data-max="100" data-step="1" data-value="50"&gt;
+                        &lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="spread" data-type="add"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider-input" data-topic="spread" data-unit="px"&gt;&lt;/div&gt;
+                    &lt;/div&gt;
+                &lt;/div&gt;
+            &lt;/div&gt;
+
+            &lt;div id="element_properties" class="category"&gt;
+                &lt;div class="title"&gt; Class element properties &lt;/div&gt;
+                &lt;div class="group"&gt;
+                    &lt;div class="group property"&gt;
+                        &lt;div class="ui-slider-name"&gt; border &lt;/div&gt;
+                        &lt;div class="ui-checkbox" data-topic='border-state' data-state="true"&gt;&lt;/div&gt;
+                    &lt;/div&gt;
+                    &lt;div id="z-index" class="slidergroup"&gt;
+                        &lt;div class="ui-slider-name"&gt; z-index &lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="z-index" data-type="sub"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider" data-topic="z-index"
+                            data-min="-10" data-max="10" data-step="1"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="z-index" data-type="add"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider-input" data-topic="z-index"&gt;&lt;/div&gt;
+                    &lt;/div&gt;
+                    &lt;div class="slidergroup"&gt;
+                        &lt;div class="ui-slider-name"&gt; top &lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="top" data-type="sub"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider" data-topic="top"
+                            data-min="-500" data-max="500" data-step="1"&gt; &lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="top" data-type="add"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider-input" data-topic="top" data-unit="px"&gt;&lt;/div&gt;
+                    &lt;/div&gt;
+                    &lt;div class="slidergroup"&gt;
+                        &lt;div class="ui-slider-name"&gt; left &lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="left" data-type="sub"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider" data-topic="left"
+                            data-min="-300" data-max="700" data-step="1"&gt; &lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="left" data-type="add"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider-input" data-topic="left" data-unit="px"&gt;&lt;/div&gt;
+                    &lt;/div&gt;
+                    &lt;div id="transform_rotate" class="slidergroup"&gt;
+                        &lt;div class="ui-slider-name"&gt; Rotate &lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="rotate" data-type="sub"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider" data-topic="rotate"
+                            data-min="-360" data-max="360" data-step="1" data-value="0"&gt;
+                        &lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="rotate" data-type="add"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider-input" data-topic="rotate" data-unit="deg"&gt;&lt;/div&gt;
+                    &lt;/div&gt;
+                    &lt;div class="slidergroup"&gt;
+                        &lt;div class="ui-slider-name"&gt; Width &lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="width" data-type="sub"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider" data-topic="width"
+                            data-min="0" data-max="1000" data-step="1" data-value="200"&gt;
+                        &lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="width" data-type="add"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider-input" data-topic="width"  data-unit="px"&gt;&lt;/div&gt;
+                    &lt;/div&gt;
+                    &lt;div class="slidergroup"&gt;
+                        &lt;div class="ui-slider-name"&gt; Height &lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="height" data-type="sub"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider" data-topic="height"
+                            data-min="0" data-max="400" data-step="1" data-value="200"&gt;
+                        &lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="height" data-type="add"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider-input" data-topic="height" data-unit="px"&gt;&lt;/div&gt;
+                    &lt;/div&gt;
+                &lt;/div&gt;
+            &lt;/div&gt;
+
+            &lt;div id="output" class="category"&gt;
+                &lt;div id="menu" class="menu"&gt;&lt;/div&gt;
+                &lt;div class="title"&gt;    CSS Code &lt;/div&gt;
+                &lt;div class="group" style="border-top-left-radius: 0;"&gt;
+                    &lt;div class="output" data-topic="element" data-name="element"
+                        data-prop="width height background-color position=[relative] box-shadow"&gt;
+                    &lt;/div&gt;
+                    &lt;div class="output" data-topic="before" data-name="element:before"
+                        data-prop="content=[&amp;quot;&amp;quot;] position=[absolute] width height top left z-index background-color box-shadow transform -webkit-transform -ms-transform"&gt;
+                    &lt;/div&gt;
+                    &lt;div class="output" data-topic="after" data-name="element:after"
+                        data-prop="content=[&amp;quot;&amp;quot;] position=[absolute] width height top left z-index background-color box-shadow transform -webkit-transform -ms-transform"&gt;
+                    &lt;/div&gt;
+                &lt;/div&gt;
+            &lt;/div&gt;
+        &lt;/div&gt;
+    &lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="CSS_Content">CSS Content</h3>
+
+<pre class="brush: css">/*  GRID OF TWELVE
+ * ========================================================================== */
+
+.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 Slider
+ */
+
+.slidergroup {
+	height: 20px;
+	margin: 10px 0;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	-moz-user-select: none;
+	user-select: none;
+}
+
+.slidergroup * {
+	float: left;
+	height: 100%;
+	line-height: 100%;
+}
+
+/* Slider */
+
+.ui-slider {
+	height: 10px;
+	width: 200px;
+	margin: 4px 10px;
+	display: block;
+	border: 1px solid #999;
+	border-radius: 3px;
+	background: #EEE;
+}
+
+.ui-slider:hover {
+	cursor: pointer;
+}
+
+.ui-slider-name {
+	width: 90px;
+	padding: 0 10px 0 0;
+	text-align: right;
+	text-transform: lowercase;
+}
+
+.ui-slider-pointer {
+	width: 13px;
+	height: 13px;
+	background-color: #EEE;
+	border: 1px solid #2C9FC9;
+	border-radius: 3px;
+	position: relative;
+	top: -3px;
+	left: 0%;
+}
+
+.ui-slider-btn-set {
+	width: 25px;
+	background-color: #2C9FC9;
+	border-radius: 3px;
+	color: #FFF;
+	font-weight: bold;
+	text-align: center;
+}
+
+.ui-slider-btn-set:hover {
+	background-color: #379B4A;
+	cursor: pointer;
+}
+
+.ui-slider-input &gt; input {
+	margin: 0 10px;
+	padding: 0;
+	width: 50px;
+	text-align: center;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+/*
+ * UI Button
+ */
+
+/* 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 &gt; input {
+ 	display: none;
+}
+
+.ui-checkbox &gt; 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 &gt; label:hover {
+	cursor: pointer;
+}
+
+.ui-checkbox &gt; input:checked + label {
+	background-image: url("https://mdn.mozillademos.org/files/5681/checked.png");
+	background-color: #379B4A;
+}
+
+/*
+ * BOX SHADOW GENERATOR TOOL
+ */
+
+body {
+	max-width: 1000px;
+	height: 800px;
+	margin: 20px auto 0;
+
+	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;
+}
+
+#container {
+	width: 100%;
+	padding: 2px;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+
+/* container with shadows stacks */
+#stack_container {
+	height: 400px;
+	overflow: hidden;
+	position: relative;
+	border: 1px solid #CCC;
+	border-radius: 3px;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+#stack_container .container {
+	height: 100%;
+	width: 100%;
+	position: absolute;
+	left: 100%;
+	transition-property: left;
+	transition-duration: 0.5s;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+
+#stack_container .title {
+	text-align: center;
+	font-weight: bold;
+	line-height: 2em;
+	border-bottom: 1px solid #43A6E1;
+	color: #666;
+}
+
+
+/*
+ * Stack of Layers for shadow
+ */
+
+#layer_manager {
+	width: 17%;
+	background-color: #FEFEFE;
+	margin: 0 1% 0 0;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+	float: left;
+}
+
+
+#layer_manager .button {
+	width: 30%;
+	height: 25px;
+	margin:0 0 10px;
+	color: #333;
+	background-color: #EEE;
+	text-align: center;
+	font-size: 0.75em;
+	line-height: 1.5em;
+	border: 1px solid #CCC;
+	border-radius: 3px;
+
+	display: block;
+	background-position: center center;
+	background-repeat: no-repeat;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+	float: left;
+}
+
+#layer_manager .button:hover {
+	background-color: #3380C4;
+	border: 1px solid #3380C4;
+	cursor: pointer;
+}
+
+#layer_manager [data-type='add'] {
+	background-image: url("https://mdn.mozillademos.org/files/5685/add-black.png");
+}
+
+#layer_manager [data-type='add']:hover {
+	background-image: url("https://mdn.mozillademos.org/files/5687/add-white.png");
+}
+
+#layer_manager [data-type='move-up'] {
+	background-image: url("https://mdn.mozillademos.org/files/5697/up-black.png");
+	margin-left: 5%;
+	margin-right: 5%;
+}
+
+#layer_manager [data-type='move-up']:hover {
+	background-image: url("https://mdn.mozillademos.org/files/5709/up-white.png");
+}
+
+#layer_manager [data-type='move-down'] {
+	background-image: url("https://mdn.mozillademos.org/files/5693/down-black.png");
+}
+
+#layer_manager [data-type='move-down']:hover {
+	background-image: url("https://mdn.mozillademos.org/files/5695/down-white.png");
+}
+
+/* shadows classes */
+
+#layer_manager .node {
+	width: 100%;
+	margin: 5px 0;
+	padding: 5px;
+	text-align: center;
+	background-color: #EEE;
+	border: 1px solid #DDD;
+	font-size: 0.75em;
+	line-height: 1.5em;
+	color: #333;
+	border-radius: 3px;
+
+	position: relative;
+	display: block;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+#layer_manager .node:hover {
+	color: #FFF;
+	background-color: #3380C4;
+	cursor: pointer;
+}
+
+/* active element styling */
+
+#layer_manager [data-active='layer'] {
+	color: #FFF;
+	border: none;
+	background-color: #379B4A;
+}
+
+#layer_manager [data-active='subject'] {
+	color: #FFF;
+	background-color: #467FC9;
+}
+
+/* delete button */
+
+#layer_manager .delete {
+	width: 1.5em;
+	height: 100%;
+	float: right;
+	border-radius: 3px;
+	background-image: url("https://mdn.mozillademos.org/files/5689/delete-white.png");
+	background-position: center center;
+	background-repeat: no-repeat;
+	position: absolute;
+	top: 0;
+	right: 10px;
+	display: none;
+}
+
+#layer_manager .delete:hover {
+	background-image: url("https://mdn.mozillademos.org/files/5691/delete-yellow.png");
+}
+
+#layer_manager .node:hover .delete {
+	display: block;
+}
+
+
+#layer_manager .stack {
+	padding: 0 5px;
+	max-height: 90%;
+	overflow: auto;
+	overflow-x: hidden;
+}
+
+
+/*
+ * Layer Menu
+ */
+
+#layer_menu {
+	margin: 0 0 10px 0;
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+#layer_menu .button {
+	width: 100px;
+	margin: 0 5px 0 0;
+	padding: 2.5px;
+	color: #333;
+	background-color: #EEE;
+	border: 1px solid #CCC;
+	border-radius: 3px;
+	text-align: center;
+	font-size: 0.75em;
+	line-height: 1.5em;
+
+	position: relative;
+	display: block;
+	float: left;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+#layer_menu .button:hover {
+	color: #FFF;
+	background-color: #3380C4;
+	border: 1px solid #3380C4;
+	cursor: pointer;
+}
+
+#layer_menu .delete {
+	width: 1.5em;
+	height: 100%;
+	float: right;
+	border-radius: 3px;
+	background-image: url("https://mdn.mozillademos.org/files/5689/delete-white.png");
+	background-position: center center;
+	background-repeat: no-repeat;
+	position: absolute;
+	top: 0;
+	right: 5px;
+	display: none;
+}
+
+#layer_menu .delete:hover {
+	background-image: url("https://mdn.mozillademos.org/files/5691/delete-yellow.png");
+}
+
+#layer_menu .button:hover .delete {
+	display: block;
+}
+
+
+/*
+ * active element styling
+ */
+
+#layer_menu [data-active='subject'] {
+	color: #FFF;
+	background-color: #379B4A;
+	border: 1px solid #379B4A;
+}
+
+
+/* Checkbox */
+
+#layer_menu .ui-checkbox &gt; label {
+	height: 15px;
+	line-height: 17px;
+	font-weight: normal;
+	width: 46px;
+	margin: 0 5px 0 0;
+}
+
+#layer_menu .ui-checkbox &gt; input:checked + label {
+	display: none;
+}
+
+
+/******************************************************************************/
+/******************************************************************************/
+/*
+ * Preview Area
+ */
+
+#preview_zone {
+	width: 82%;
+	float: left;
+
+}
+
+
+#preview {
+	width: 100%;
+	height: 400px;
+	border: 1px solid #CCC;
+	border-radius: 3px;
+	text-align: center;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+	cursor: move;
+	float: left;
+}
+
+#preview .content {
+	width: 100%;
+	height: 100%;
+	display: block;
+}
+
+#obj-element {
+	width: 300px;
+	height: 100px;
+	border: 1px solid #CCC;
+	background: #FFF;
+	position: relative;
+}
+
+
+#obj-before {
+	height: 100%;
+	width: 100%;
+	background: #999;
+	border: 1px solid #CCC;
+	text-align: left;
+	display : block;
+	position: absolute;
+	z-index: -1;
+}
+
+#obj-after {
+	height: 100%;
+	width: 100%;
+	background: #DDD;
+	border: 1px solid #CCC;
+	text-align: right;
+	display : block;
+	position: absolute;
+	z-index: -1;
+}
+
+
+/******************************************************************************/
+/******************************************************************************/
+
+/**
+ * Controls
+ */
+
+.wrap-left {
+	float: left;
+	overflow: hidden;
+}
+
+.wrap-right {
+	float: right;
+	overflow: hidden;
+}
+
+.wrap-left &gt; * {
+	float: left;
+}
+
+.wrap-right &gt; * {
+	float: right;
+}
+
+@media (min-width: 960px) {
+
+	.wrap-left {
+		width: 45%;
+	}
+
+	.wrap-right {
+		width: 55%;
+	}
+}
+
+
+@media (max-width: 959px) {
+
+	.wrap-left {
+		width: 30%;
+	}
+
+	.wrap-right {
+		width: 70%;
+	}
+}
+
+
+#controls {
+	color: #444;
+	margin: 10px 0 0 0;
+}
+
+
+#controls .category {
+	width: 500px;
+	margin: 0 auto 20px;
+	padding: 0;
+
+}
+
+#controls .category .title {
+	width: 100%;
+	height: 1.5em;
+	line-height: 1.5em;
+	color: #AAA;
+	text-align: right;
+}
+
+#controls .category &gt; .group {
+	border: 1px solid #CCC;
+	border-radius: 3px;
+}
+
+
+/**
+ * 	Color Picker
+ */
+
+@media (min-width: 960px) {
+	#controls .colorpicker {
+		width: 420px;
+	}
+}
+
+@media (max-width: 959px) {
+	#controls .colorpicker {
+		width: 210px;
+	}
+}
+
+#colorpicker {
+	width: 100%;
+	margin: 0 auto;
+}
+
+#colorpicker .gradient {
+	width: 200px;
+	height: 200px;
+	margin: 5px;
+	background: url("https://mdn.mozillademos.org/files/5707/picker_mask_200.png");
+	background: -moz-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
+				-moz-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
+	background: -webkit-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
+				-webkit-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
+	background-color: #F00;
+	float: left;
+}
+
+#colorpicker .hue {
+	width: 200px;
+	height: 30px;
+	margin: 5px;
+	background: url("https://mdn.mozillademos.org/files/5701/hue.png");
+	background: -moz-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
+				#00F 66.66%, #F0F 83.33%, #F00 100%);
+	background: -webkit-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
+				#00F 66.66%, #F0F 83.33%, #F00 100%);
+	float: left;
+}
+
+#colorpicker .alpha {
+	width: 200px;
+	height: 30px;
+	margin: 5px;
+	border: 1px solid #CCC;
+	float: left;
+	background: url("https://mdn.mozillademos.org/files/5705/alpha.png");
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+#colorpicker #alpha {
+	width: 100%;
+	height: 100%;
+	background: url("https://mdn.mozillademos.org/files/5703/alpha_mask.png");
+	background: -moz-linear-gradient(left, rgba(255, 0, 0, 0) 0%, rgba(255, 0, 0, 1) 100%);
+}
+
+#colorpicker #gradient_picker {
+	width: 0.5em;
+	height: 0.5em;
+	border-radius: 0.4em;
+	border: 2px solid #CCC;
+	position: relative;
+	top: 20%;
+	left: 20%;
+}
+
+#colorpicker #hue_selector,
+#colorpicker #alpha_selector {
+	width: 3px;
+	height: 100%;
+	border: 1px solid #777;
+	background-color: #FFF;
+	position: relative;
+	top: -1px;
+	left: 0%;
+}
+
+/* input HSV and RGB */
+#colorpicker .info {
+	width: 200px;
+	margin: 5px;
+	float: left;
+}
+
+#colorpicker .info * {
+	float: left;
+}
+
+#colorpicker .info input {
+	margin: 0;
+	text-align: center;
+	width: 30px;
+	-moz-user-select: text;
+	-webkit-user-select: text;
+	-ms-user-select: text;
+}
+
+#colorpicker .info span {
+	height: 20px;
+	width: 30px;
+	text-align: center;
+	line-height: 20px;
+	display: block;
+}
+
+/* Preview color */
+#colorpicker .block {
+	width: 95px;
+	height: 54px;
+	float: left;
+	position: relative;
+}
+
+#colorpicker .preview {
+	margin: 5px;
+	border: 1px solid #CCC;
+	background-image: url("https://mdn.mozillademos.org/files/5705/alpha.png");
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+#colorpicker .preview:before {
+	height: 100%;
+	width: 50%;
+	left: 50%;
+	content: "";
+	background: #FFF;
+	position: absolute;
+	z-index: 1;
+}
+
+#colorpicker .preview &gt; * {
+	width: 50%;
+	height: 100%;
+}
+
+#colorpicker #output_color {
+	width: 100%;
+	height: 100%;
+	position: absolute;
+	z-index: 2;
+}
+
+#colorpicker .block .input {
+	float: right;
+}
+
+#colorpicker [data-topic="a"] &gt; span {
+	width: 50px;
+}
+
+#colorpicker [data-topic="hexa"] {
+	float: right;
+	margin: 10px 0 0 0;
+}
+
+#colorpicker [data-topic="hexa"] &gt; span {
+	display: none;
+}
+
+#colorpicker [data-topic="hexa"] &gt; input {
+	width: 85px;
+	padding: 2px 0;
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+
+/*
+ * UI Components
+ */
+
+/* Property */
+
+.property {
+	height: 20px;
+	margin: 10px 0;
+}
+
+.property * {
+	float: left;
+	height: 100%;
+	line-height: 100%;
+}
+
+/* Slider */
+
+#controls .ui-slider-name {
+	margin: 0 10px 0 0;
+}
+
+/*
+ * Output code styling
+ */
+
+#output {
+	position: relative;
+}
+
+#output .menu {
+	max-width: 70%;
+	height: 20px;
+	position: absolute;
+	top: 2px;
+}
+
+#output .button {
+	width: 90px;
+	height: 22px;
+	margin: 0 5px 0 0;
+	text-align: center;
+	line-height: 20px;
+	font-size: 14px;
+	color: #FFF;
+	background-color: #999;
+	border-top-left-radius: 3px;
+	border-top-right-radius: 3px;
+	bottom: -5px;
+	float:left;
+}
+
+#output .button:hover {
+	color: #FFF;
+	background-color: #666;
+	cursor: pointer;
+}
+
+#output .menu [data-active="true"] {
+	color: #777;
+	background-color: #FFF;
+	border: 1px solid #CCC;
+	border-bottom: none;
+}
+
+#output .menu [data-topic="before"] {
+	left: 100px;
+}
+
+#output .menu [data-topic="after"] {
+	left: 200px;
+}
+
+#output .output {
+	width: 480px;
+	margin: 10px;
+	padding: 10px;
+	overflow: hidden;
+	color: #555;
+	font-size: 14px;
+	border: 1px dashed #CCC;
+	border-radius: 3px;
+	display: none;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+
+	-moz-user-select: text;
+	-webkit-user-select: text;
+	-ms-user-select: text;
+}
+
+#output .css-property {
+	width: 100%;
+	float: left;
+	white-space: pre;
+}
+
+#output .name {
+	width: 35%;
+	float: left;
+}
+
+#output .value {
+	width: 65%;
+	float: left;
+}
+
+</pre>
+
+<h3 id="JavaScript_Content">JavaScript Content</h3>
+
+<pre class="brush: js"><code class="language-js">
+
+'use strict';
+
+/**
+ * UI-SlidersManager
+ */
+
+var SliderManager = (function SliderManager() {
+
+	var subscribers = {};
+	var sliders = [];
+
+	var Slider = 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 snap = node.getAttribute('data-snap');
+		var topic = node.getAttribute('data-topic');
+
+		this.min = min;
+		this.max = max &gt; 0 ? max : 100;
+		this.step = step === 0 ? 1 : step;
+		this.value = value &lt;= max &amp;&amp; value &gt;= min ? value : (min + max) / 2 | 0;
+		this.snap = snap === "true" ? true : false;
+		this.topic = topic;
+		this.node = node;
+
+		var pointer = document.createElement('div');
+		pointer.className = 'ui-slider-pointer';
+		node.appendChild(pointer);
+		this.pointer = pointer;
+
+		setMouseTracking(node, updateSlider.bind(this));
+
+		sliders[topic] = this;
+		setValue(topic, this.value);
+	}
+
+	var setButtonComponent = function setButtonComponent(node) {
+		var type = node.getAttribute('data-type');
+		var topic = node.getAttribute('data-topic');
+		if (type === "sub") {
+			node.textContent = '-';
+			node.addEventListener("click", function() {
+				decrement(topic);
+			});
+		}
+		if (type === "add") {
+			node.textContent = '+';
+			node.addEventListener("click", function() {
+				increment(topic);
+			});
+		}
+	}
+
+	var setInputComponent = function setInputComponent(node) {
+		var topic		= node.getAttribute('data-topic');
+		var unit_type	= node.getAttribute('data-unit');
+
+		var input = document.createElement('input');
+		var unit = document.createElement('span');
+		unit.textContent = unit_type;
+
+		input.setAttribute('type', 'text');
+		node.appendChild(input);
+		node.appendChild(unit);
+
+		input.addEventListener('click', function(e) {
+			this.select();
+		});
+
+		input.addEventListener('change', function(e) {
+			setValue(topic, e.target.value | 0);
+		});
+
+		subscribe(topic, function(value) {
+			node.children[0].value = value;
+		});
+	}
+
+	var increment = function increment(topic) {
+		var slider = sliders[topic];
+		if (slider === null || slider === undefined)
+			return;
+
+		if (slider.value + slider.step &lt;= slider.max) {
+			slider.value += slider.step;
+			setValue(slider.topic, slider.value)
+			notify.call(slider);
+		}
+	};
+
+	var decrement = function decrement(topic) {
+		var slider = sliders[topic];
+		if (slider === null || slider === undefined)
+			return;
+
+		if (slider.value - slider.step &gt;= slider.min) {
+			slider.value -= slider.step;
+			setValue(topic, slider.value)
+			notify.call(slider);
+		}
+	}
+
+	// this = Slider object
+	var updateSlider = function updateSlider(e) {
+		var node = this.node;
+		var pos = e.pageX - node.offsetLeft;
+		var width = node.clientWidth;
+		var delta = this.max - this.min;
+		var offset = this.pointer.clientWidth + 4; // border width * 2
+
+		if (pos &lt; 0) pos = 0;
+		if (pos &gt; width) pos = width;
+
+		var value = pos * delta / width | 0;
+		var precision = value % this.step;
+		value = value - precision + this.min;
+		if (precision &gt; this.step / 2)
+			value = value + this.step;
+
+		if (this.snap)
+			pos =  (value - this.min) * width / delta;
+
+		this.pointer.style.left = pos - offset/2 + "px";
+		this.value = value;
+		node.setAttribute('data-value', value);
+		notify.call(this);
+	}
+
+	var setValue = function setValue(topic, value) {
+		var slider = sliders[topic];
+
+		if (value &gt; slider.max || value &lt; slider.min)
+			return;
+
+		var delta = slider.max - slider.min;
+		var width = slider.node.clientWidth;
+		var offset = slider.pointer.clientWidth;
+		var pos =  (value - slider.min) * width / delta;
+		slider.value = value;
+		slider.pointer.style.left = pos - offset / 2 + "px";
+		slider.node.setAttribute('data-value', value);
+		notify.call(slider);
+	}
+
+	var setMouseTracking = function setMouseTracking(elem, callback) {
+		elem.addEventListener("mousedown", function(e) {
+			callback(e);
+			document.addEventListener("mousemove", callback);
+		});
+
+		document.addEventListener("mouseup", function(e) {
+			document.removeEventListener("mousemove", callback);
+		});
+	}
+
+	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() {
+		if (subscribers[this.topic] === undefined)
+			return;
+
+		for (var i in subscribers[this.topic]) {
+			subscribers[this.topic][i](this.value);
+		}
+	}
+
+	var init = function init() {
+		var elem, size;
+
+		elem = document.querySelectorAll('.ui-slider-btn-set');
+		size = elem.length;
+		for (var i = 0; i &lt; size; i++)
+			setButtonComponent(elem[i]);
+
+		elem = document.querySelectorAll('.ui-slider-input');
+		size = elem.length;
+		for (var i = 0; i &lt; size; i++)
+			setInputComponent(elem[i]);
+
+		elem = document.querySelectorAll('.ui-slider');
+		size = elem.length;
+		for (var i = 0; i &lt; size; i++)
+			new Slider(elem[i]);
+	}
+
+	return {
+		init : init,
+		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;
+			notify.call(buttons[topic]);
+		}
+		catch(error) {
+			console.log(error, topic, value);
+		}
+	}
+
+	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() {
+		if (subscribers[this.topic] === undefined)
+			return;
+		for (var i = 0; i &lt; 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 &lt; size; i++)
+			new CheckBox(elem[i]);
+	}
+
+	return {
+		init : init,
+		setValue : setValue,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe
+	}
+
+})();
+
+
+window.addEventListener("load", function(){
+	BoxShadow.init();
+});
+
+var BoxShadow = (function BoxShadow() {
+
+	function getElemById(id) {
+		return document.getElementById(id);
+	}
+
+	/**
+	 * RGBA Color class
+	 */
+
+	function Color() {
+		this.r = 0;
+		this.g = 0;
+		this.b = 0;
+		this.a = 1;
+		this.hue = 0;
+		this.saturation = 0;
+		this.value = 0;
+	}
+
+	Color.prototype.copy = function copy(obj) {
+		if(obj instanceof Color !== true) {
+			console.log("Typeof instance not Color");
+			return;
+		}
+
+		this.r = obj.r;
+		this.g = obj.g;
+		this.b = obj.b;
+		this.a = obj.a;
+		this.hue = obj.hue;
+		this.saturation = obj.saturation;
+		this.value = obj.value;
+	}
+
+	Color.prototype.setRGBA = function setRGBA(red, green, blue, alpha) {
+		if (red != undefined)
+			this.r = red | 0;
+		if (green != undefined)
+			this.g = green | 0;
+		if (blue != undefined)
+			this.b = blue | 0;
+		if (alpha != undefined)
+			this.a = alpha | 0;
+	}
+
+	/**
+	 * HSV/HSB (hue, saturation, value / brightness)
+	 * @param hue			0-360
+	 * @param saturation	0-100
+	 * @param value 		0-100
+	 */
+	Color.prototype.setHSV = function setHSV(hue, saturation, value) {
+		this.hue = hue;
+		this.saturation = saturation;
+		this.value = value;
+		this.updateRGB();
+	}
+
+	Color.prototype.updateRGB = function updateRGB() {
+		var sat = this.saturation / 100;
+		var value = this.value / 100;
+		var C = sat * value;
+		var H = this.hue / 60;
+		var X = C * (1 - Math.abs(H % 2 - 1));
+		var m = value - C;
+		var precision = 255;
+
+		C = (C + m) * precision;
+		X = (X + m) * precision;
+		m = m * precision;
+
+		if (H &gt;= 0 &amp;&amp; H &lt; 1) {	this.setRGBA(C, X, m);	return; }
+		if (H &gt;= 1 &amp;&amp; H &lt; 2) {	this.setRGBA(X, C, m);	return; }
+		if (H &gt;= 2 &amp;&amp; H &lt; 3) {	this.setRGBA(m, C, X);	return; }
+		if (H &gt;= 3 &amp;&amp; H &lt; 4) {	this.setRGBA(m, X, C);	return; }
+		if (H &gt;= 4 &amp;&amp; H &lt; 5) {	this.setRGBA(X, m, C);	return; }
+		if (H &gt;= 5 &amp;&amp; H &lt; 6) {	this.setRGBA(C, m, X);	return; }
+	}
+
+	Color.prototype.updateHSV = function updateHSV() {
+		var red		= this.r / 255;
+		var green	= this.g / 255;
+		var blue	= this.b / 255;
+
+		var cmax = Math.max(red, green, blue);
+		var cmin = Math.min(red, green, blue);
+		var delta = cmax - cmin;
+		var hue = 0;
+		var saturation = 0;
+
+		if (delta) {
+			if (cmax === red ) { hue = ((green - blue) / delta); }
+			if (cmax === green ) { hue = 2 + (blue - red) / delta; }
+			if (cmax === blue ) { hue = 4 + (red - green) / delta; }
+			if (cmax) saturation = delta / cmax;
+		}
+
+		this.hue = 60 * hue | 0;
+		if (this.hue &lt; 0) this.hue += 360;
+		this.saturation = (saturation * 100) | 0;
+		this.value = (cmax * 100) | 0;
+	}
+
+	Color.prototype.setHexa = function setHexa(value) {
+		var valid  = /(^#{0,1}[0-9A-F]{6}$)|(^#{0,1}[0-9A-F]{3}$)/i.test(value)
+		if (valid !== true)
+			return;
+
+		if (value[0] === '#')
+			value = value.slice(1, value.length);
+
+		if (value.length === 3)
+			value = value.replace(/([0-9A-F])([0-9A-F])([0-9A-F])/i,"$1$1$2$2$3$3");
+
+		this.r = parseInt(value.substr(0, 2), 16);
+		this.g = parseInt(value.substr(2, 2), 16);
+		this.b = parseInt(value.substr(4, 2), 16);
+
+		this.alpha	= 1;
+	}
+
+	Color.prototype.getHexa = function getHexa() {
+		var r = this.r.toString(16);
+		var g = this.g.toString(16);
+		var b = this.b.toString(16);
+		if (this.r &lt; 16) r = '0' + r;
+		if (this.g &lt; 16) g = '0' + g;
+		if (this.b &lt; 16) b = '0' + b;
+		var value = '#' + r + g + b;
+		return value.toUpperCase();
+	}
+
+	Color.prototype.getRGBA = function getRGBA() {
+
+		var rgb = "(" + this.r + ", " + this.g + ", " + this.b;
+		var a = '';
+		var v = '';
+		if (this.a !== 1) {
+			a = 'a';
+			v = ', ' + this.a;
+		}
+
+		var value = "rgb" + a + rgb + v + ")";
+		return value;
+	}
+
+	Color.prototype.getColor = function getColor() {
+		if (this.a | 0 === 1)
+			return this.getHexa();
+		return this.getRGBA();
+	}
+
+	/**
+	 * Shadow Object
+	 */
+	function Shadow() {
+		this.inset  = false;
+		this.posX   = 5;
+		this.posY   = -5;
+		this.blur   = 5;
+		this.spread = 0;
+		this.color  = new Color();
+
+		var hue			= (Math.random() * 360) | 0;
+		var saturation	= (Math.random() * 75) | 0;
+		var value 		= (Math.random() * 50 + 50) | 0;
+		this.color.setHSV(hue, saturation, value, 1);
+	}
+
+	Shadow.prototype.computeCSS = function computeCSS() {
+		var value = "";
+		if (this.inset === true)
+			value += "inset ";
+		value += this.posX + "px ";
+		value += this.posY + "px ";
+		value += this.blur + "px ";
+		value += this.spread + "px ";
+		value += this.color.getColor();
+
+		return value;
+	}
+
+	Shadow.prototype.toggleInset = function toggleInset(value) {
+		if (value !== undefined || typeof value === "boolean")
+			this.inset = value;
+		else
+			this.inset = this.inset === true ? false : true;
+	}
+
+	Shadow.prototype.copy = function copy(obj) {
+		if(obj instanceof Shadow !== true) {
+			console.log("Typeof instance not Shadow");
+			return;
+		}
+
+		this.inset  = obj.inset;
+		this.posX   = obj.posX;
+		this.posY   = obj.posY;
+		this.blur   = obj.blur;
+		this.spread = obj.spread;
+		this.color.copy(obj.color);
+	}
+
+	/**
+	 * Color Picker
+	 */
+	var ColoPicker = (function ColoPicker() {
+
+		var colorpicker;
+		var hue_area;
+		var gradient_area;
+		var alpha_area;
+		var gradient_picker;
+		var hue_selector;
+		var alpha_selector;
+		var pick_object;
+		var info_rgb;
+		var info_hsv;
+		var info_hexa;
+		var output_color;
+		var color = new Color();
+		var subscribers = [];
+
+		var updateColor = function updateColor(e) {
+			var x = e.pageX - gradient_area.offsetLeft;
+			var y = e.pageY - gradient_area.offsetTop;
+
+			// width and height should be the same
+			var size = gradient_area.clientWidth;
+
+			if (x &gt; size)
+				x = size;
+			if (y &gt; size)
+				y = size;
+
+			if (x &lt; 0) x = 0;
+			if (y &lt; 0) y = 0;
+
+			var value = 100 - (y * 100 / size) | 0;
+			var saturation = x * 100 / size | 0;
+
+			color.setHSV(color.hue, saturation, value);
+			// should update just
+			// color pointer location
+			updateUI();
+			notify("color", color);
+		}
+
+		var updateHue = function updateHue(e) {
+			var x = e.pageX - hue_area.offsetLeft;
+			var width = hue_area.clientWidth;
+
+			if (x &lt; 0) x = 0;
+			if (x &gt; width) x = width;
+
+			var hue = ((360 * x) / width) | 0;
+			if (hue === 360) hue = 359;
+
+			color.setHSV(hue, color.saturation, color.value);
+
+			// should update just
+			// hue pointer location
+			// picker area background
+			// alpha area background
+			updateUI();
+			notify("color", color);
+		}
+
+		var updateAlpha = function updateAlpha(e) {
+			var x = e.pageX - alpha_area.offsetLeft;
+			var width = alpha_area.clientWidth;
+
+			if (x &lt; 0) x = 0;
+			if (x &gt; width) x = width;
+
+			color.a = (x / width).toFixed(2);
+
+			// should update just
+			// alpha pointer location
+			updateUI();
+			notify("color", color);
+		}
+
+		var setHueGfx = function setHueGfx(hue) {
+			var sat = color.saturation;
+			var val = color.value;
+			var alpha = color.a;
+
+			color.setHSV(hue, 100, 100);
+			gradient_area.style.backgroundColor = color.getHexa();
+
+			color.a = 0;
+			var start = color.getRGBA();
+			color.a = 1;
+			var end = color.getRGBA();
+			color.a = alpha;
+
+			var gradient = '-moz-linear-gradient(left, ' +	start + '0%, ' + end + ' 100%)';
+			alpha_area.style.background = gradient;
+		}
+
+		var updateUI = function updateUI() {
+			var x, y;		// coordinates
+			var size;		// size of the area
+			var offset;		// pointer graphic selector offset
+
+			// Set color pointer location
+			size = gradient_area.clientWidth;
+			offset = gradient_picker.clientWidth / 2 + 2;
+
+			x = (color.saturation * size / 100) | 0;
+			y = size - (color.value * size / 100) | 0;
+
+			gradient_picker.style.left = x - offset + "px";
+			gradient_picker.style.top = y - offset + "px";
+
+			// Set hue pointer location
+			size = hue_area.clientWidth;
+			offset = hue_selector.clientWidth/2;
+			x = (color.hue * size / 360 ) | 0;
+			hue_selector.style.left = x - offset + "px";
+
+			// Set alpha pointer location
+			size = alpha_area.clientWidth;
+			offset = alpha_selector.clientWidth/2;
+			x = (color.a * size) | 0;
+			alpha_selector.style.left = x - offset + "px";
+
+			// Set picker area background
+			var nc = new Color();
+			nc.copy(color);
+			if (nc.hue === 360) nc.hue = 0;
+			nc.setHSV(nc.hue, 100, 100);
+			gradient_area.style.backgroundColor = nc.getHexa();
+
+			// Set alpha area background
+			nc.copy(color);
+			nc.a = 0;
+			var start = nc.getRGBA();
+			nc.a = 1;
+			var end = nc.getRGBA();
+			var gradient = '-moz-linear-gradient(left, ' +	start + '0%, ' + end + ' 100%)';
+			alpha_area.style.background = gradient;
+
+			// Update color info
+			notify("color", color);
+			notify("hue", color.hue);
+			notify("saturation", color.saturation);
+			notify("value", color.value);
+			notify("r", color.r);
+			notify("g", color.g);
+			notify("b", color.b);
+			notify("a", color.a);
+			notify("hexa", color.getHexa());
+			output_color.style.backgroundColor = color.getRGBA();
+		}
+
+		var setInputComponent = function setInputComponent(node) {
+			var topic = node.getAttribute('data-topic');
+			var title = node.getAttribute('data-title');
+			var action = node.getAttribute('data-action');
+			title = title === null ? '' : title;
+
+			var input = document.createElement('input');
+			var info = document.createElement('span');
+			info.textContent = title;
+
+			input.setAttribute('type', 'text');
+			input.setAttribute('data-action', 'set-' + action + '-' + topic);
+			node.appendChild(info);
+			node.appendChild(input);
+
+			input.addEventListener('click', function(e) {
+				this.select();
+			});
+
+			input.addEventListener('change', function(e) {
+				if (action === 'HSV')
+					inputChangeHSV(topic);
+				if (action === 'RGB')
+					inputChangeRGB(topic);
+				if (action === 'alpha')
+					inputChangeAlpha(topic);
+				if (action === 'hexa')
+					inputChangeHexa(topic);
+			});
+
+			subscribe(topic, function(value) {
+				node.children[1].value = value;
+			});
+		}
+
+		var inputChangeHSV = function actionHSV(topic) {
+			var selector = "[data-action='set-HSV-" + topic + "']";
+			var node = document.querySelector("#colorpicker " + selector);
+			var value = parseInt(node.value);
+
+			if (typeof value === 'number' &amp;&amp; isNaN(value) === false &amp;&amp;
+				value &gt;= 0 &amp;&amp; value &lt; 360)
+				color[topic] = value;
+
+			color.updateRGB();
+			updateUI();
+		}
+
+		var inputChangeRGB = function inputChangeRGB(topic) {
+			var selector = "[data-action='set-RGB-" + topic + "']";
+			var node = document.querySelector("#colorpicker " + selector);
+			var value = parseInt(node.value);
+
+			if (typeof value === 'number' &amp;&amp; isNaN(value) === false &amp;&amp;
+				value &gt;= 0 &amp;&amp; value &lt;= 255)
+				color[topic] = value;
+
+			color.updateHSV();
+			updateUI();
+		}
+
+		var inputChangeAlpha = function inputChangeAlpha(topic) {
+			var selector = "[data-action='set-alpha-" + topic + "']";
+			var node = document.querySelector("#colorpicker " + selector);
+			var value = parseFloat(node.value);
+
+			if (typeof value === 'number' &amp;&amp; isNaN(value) === false &amp;&amp;
+				value &gt;= 0 &amp;&amp; value &lt;= 1)
+				color.a = value.toFixed(2);
+
+			updateUI();
+		}
+
+		var inputChangeHexa = function inputChangeHexa(topic) {
+			var selector = "[data-action='set-hexa-" + topic + "']";
+			var node = document.querySelector("#colorpicker " + selector);
+			var value = node.value;
+			color.setHexa(value);
+			color.updateHSV();
+			updateUI();
+		}
+
+		var setMouseTracking = function setMouseTracking(elem, callback) {
+
+			elem.addEventListener("mousedown", function(e) {
+				callback(e);
+				document.addEventListener("mousemove", callback);
+			});
+
+			document.addEventListener("mouseup", function(e) {
+				document.removeEventListener("mousemove", callback);
+			});
+		}
+
+		/*
+		 * Observer
+		 */
+		var setColor = function setColor(obj) {
+			if(obj instanceof Color !== true) {
+				console.log("Typeof instance not Color");
+				return;
+			}
+			color.copy(obj);
+			updateUI();
+		}
+
+		var subscribe = function subscribe(topic, callback) {
+			if (subscribers[topic] === undefined)
+				subscribers[topic] = [];
+
+			subscribers[topic].push(callback);
+		}
+
+		var unsubscribe = function unsubscribe(callback) {
+			subscribers.indexOf(callback);
+			subscribers.splice(index, 1);
+		}
+
+		var notify = function notify(topic, value) {
+			for (var i in subscribers[topic])
+				subscribers[topic][i](value);
+		}
+
+		var init = function init() {
+			colorpicker		= getElemById("colorpicker");
+			hue_area		= getElemById("hue");
+			gradient_area	= getElemById("gradient");
+			alpha_area		= getElemById("alpha");
+			gradient_picker	= getElemById("gradient_picker");
+			hue_selector	= getElemById("hue_selector");
+			alpha_selector	= getElemById("alpha_selector");
+			output_color	= getElemById("output_color");
+
+			var elem = document.querySelectorAll('#colorpicker .input');
+			var size = elem.length;
+			for (var i = 0; i &lt; size; i++)
+				setInputComponent(elem[i]);
+
+			setMouseTracking(gradient_area, updateColor);
+			setMouseTracking(hue_area, updateHue);
+			setMouseTracking(alpha_area, updateAlpha);
+
+		}
+
+		return {
+			init : init,
+			setColor : setColor,
+			subscribe : subscribe,
+			unsubscribe : unsubscribe
+		}
+
+	})();
+
+	/**
+	 * 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
+		}
+
+	})();
+
+	/*
+	 * Element Class
+	 */
+	var CssClass = function CssClass(id) {
+		this.left = 0;
+		this.top = 0;
+		this.rotate = 0;
+		this.width = 300;
+		this.height = 100;
+		this.display = true;
+		this.border = true;
+		this.zIndex = -1;
+		this.bgcolor = new Color();
+		this.id = id;
+		this.node = getElemById('obj-' + id);
+		this.object = getElemById(id);
+		this.shadowID = null;
+		this.shadows = []
+		this.render = [];
+		this.init();
+	}
+
+	CssClass.prototype.init = function init() {
+		this.left = ((this.node.parentNode.clientWidth - this.node.clientWidth) / 2) | 0;
+		this.top = ((this.node.parentNode.clientHeight - this.node.clientHeight) / 2) | 0;
+
+		this.setTop(this.top);
+		this.setLeft(this.left);
+		this.setHeight(this.height);
+		this.setWidth(this.width);
+		this.bgcolor.setHSV(0, 0, 100);
+		this.updateBgColor(this.bgcolor);
+	}
+
+	CssClass.prototype.updatePos = function updatePos(deltaX, deltaY) {
+		this.left += deltaX;
+		this.top += deltaY;
+		this.node.style.top = this.top + "px";
+		this.node.style.left = this.left + "px";
+		SliderManager.setValue("left", this.left);
+		SliderManager.setValue("top", this.top);
+	}
+
+	CssClass.prototype.setLeft = function setLeft(value) {
+		this.left = value;
+		this.node.style.left = this.left + "px";
+		OutputManager.updateProperty(this.id, 'left', this.left + 'px');
+	}
+
+	CssClass.prototype.setTop = function setTop(value) {
+		this.top = value;
+		this.node.style.top = this.top + 'px';
+		OutputManager.updateProperty(this.id, 'top', this.top + 'px');
+	}
+
+	CssClass.prototype.setWidth = function setWidth(value) {
+		this.width = value;
+		this.node.style.width = this.width + 'px';
+		OutputManager.updateProperty(this.id, 'width', this.width + 'px');
+	}
+
+	CssClass.prototype.setHeight = function setHeight(value) {
+		this.height = value;
+		this.node.style.height = this.height + 'px';
+		OutputManager.updateProperty(this.id, 'height', this.height + 'px');
+	}
+
+	// Browser support
+	CssClass.prototype.setRotate = function setRotate(value) {
+		var cssvalue = 'rotate(' + value +'deg)';
+
+		this.node.style.transform = cssvalue;
+		this.node.style.webkitTransform = cssvalue;
+		this.node.style.msTransform = cssvalue;
+
+		if (value !== 0) {
+			if (this.rotate === 0) {
+				OutputManager.toggleProperty(this.id, 'transform', true);
+				OutputManager.toggleProperty(this.id, '-webkit-transform', true);
+				OutputManager.toggleProperty(this.id, '-ms-transform', true);
+			}
+		}
+		else {
+			OutputManager.toggleProperty(this.id, 'transform', false);
+			OutputManager.toggleProperty(this.id, '-webkit-transform', false);
+			OutputManager.toggleProperty(this.id, '-ms-transform', false);
+		}
+
+		OutputManager.updateProperty(this.id, 'transform', cssvalue);
+		OutputManager.updateProperty(this.id, '-webkit-transform', cssvalue);
+		OutputManager.updateProperty(this.id, '-ms-transform', cssvalue);
+		this.rotate = value;
+	}
+
+	CssClass.prototype.setzIndex = function setzIndex(value) {
+		this.node.style.zIndex = value;
+		OutputManager.updateProperty(this.id, 'z-index', value);
+		this.zIndex = value;
+	}
+
+	CssClass.prototype.toggleDisplay = function toggleDisplay(value) {
+		if (typeof value !== "boolean" || this.display === value)
+			return;
+
+		this.display = value;
+		var display = this.display === true ? "block" : "none";
+		this.node.style.display = display;
+		this.object.style.display = display;
+	}
+
+	CssClass.prototype.toggleBorder = function toggleBorder(value) {
+		if (typeof value !== "boolean" || this.border === value)
+			return;
+
+		this.border = value;
+		var border = this.border === true ? "1px solid #CCC" : "none";
+		this.node.style.border = border;
+	}
+
+	CssClass.prototype.updateBgColor = function updateBgColor(color) {
+		this.bgcolor.copy(color);
+		this.node.style.backgroundColor = color.getColor();
+		OutputManager.updateProperty(this.id, 'background-color', color.getColor());
+	}
+
+	CssClass.prototype.updateShadows = function updateShadows() {
+		if (this.render.length === 0)
+			OutputManager.toggleProperty(this.id, 'box-shadow', false);
+		if (this.render.length === 1)
+			OutputManager.toggleProperty(this.id, 'box-shadow', true);
+
+		this.node.style.boxShadow = this.render.join(", ");
+		OutputManager.updateProperty(this.id, 'box-shadow', this.render.join(", \n"));
+
+	}
+
+
+	/**
+	 * Tool Manager
+	 */
+	var Tool = (function Tool() {
+
+		var preview;
+		var classes = [];
+		var active = null;
+		var animate = false;
+
+		/*
+		 * Toll actions
+		 */
+		var addCssClass = function addCssClass(id) {
+			classes[id] = new CssClass(id);
+		}
+
+		var setActiveClass = function setActiveClass(id) {
+			active = classes[id];
+			active.shadowID = null;
+			ColoPicker.setColor(classes[id].bgcolor);
+			SliderManager.setValue("top", active.top);
+			SliderManager.setValue("left", active.left);
+			SliderManager.setValue("rotate", active.rotate);
+			SliderManager.setValue("z-index", active.zIndex);
+			SliderManager.setValue("width", active.width);
+			SliderManager.setValue("height", active.height);
+			ButtonManager.setValue("border-state", active.border);
+			active.updateShadows();
+		}
+
+		var disableClass = function disableClass(topic) {
+			classes[topic].toggleDisplay(false);
+			ButtonManager.setValue(topic, false);
+		}
+
+		var addShadow = function addShadow(position) {
+			if (animate === true)
+				return -1;
+
+			active.shadows.splice(position, 0, new Shadow());
+			active.render.splice(position, 0, null);
+		}
+
+		var swapShadow = function swapShadow(id1, id2) {
+			var x = active.shadows[id1];
+			active.shadows[id1] = active.shadows[id2];
+			active.shadows[id2] = x;
+			updateShadowCSS(id1);
+			updateShadowCSS(id2);
+		}
+
+		var deleteShadow = function deleteShadow(position) {
+			active.shadows.splice(position, 1);
+			active.render.splice(position, 1);
+			active.updateShadows();
+		}
+
+		var setActiveShadow = function setActiveShadow(id, glow) {
+			active.shadowID = id;
+			ColoPicker.setColor(active.shadows[id].color);
+			ButtonManager.setValue("inset", active.shadows[id].inset);
+			SliderManager.setValue("blur", active.shadows[id].blur);
+			SliderManager.setValue("spread", active.shadows[id].spread);
+			SliderManager.setValue("posX", active.shadows[id].posX);
+			SliderManager.setValue("posY", active.shadows[id].posY);
+			if (glow === true)
+				addGlowEffect(id);
+		}
+
+		var addGlowEffect = function addGlowEffect(id) {
+			if (animate === true)
+				return;
+
+			animate = true;
+			var store = new Shadow();
+			var shadow = active.shadows[id];
+
+			store.copy(shadow);
+			shadow.color.setRGBA(40, 125, 200, 1);
+			shadow.blur = 10;
+			shadow.spread = 10;
+
+			active.node.style.transition = "box-shadow 0.2s";
+			updateShadowCSS(id);
+
+			setTimeout(function() {
+				shadow.copy(store);
+				updateShadowCSS(id);
+				setTimeout(function() {
+					active.node.style.removeProperty("transition");
+					animate = false;
+				}, 100);
+			}, 200);
+		}
+
+		var updateActivePos = function updateActivePos(deltaX, deltaY) {
+			if (active.shadowID === null)
+				active.updatePos(deltaX, deltaY);
+			else
+				updateShadowPos(deltaX, deltaY);
+		}
+
+		/*
+		 * Shadow properties
+		 */
+		var updateShadowCSS = function updateShadowCSS(id) {
+			active.render[id] = active.shadows[id].computeCSS();
+			active.updateShadows();
+		}
+
+		var toggleShadowInset = function toggleShadowInset(value) {
+			if (active.shadowID === null)
+				return;
+			active.shadows[active.shadowID].toggleInset(value);
+			updateShadowCSS(active.shadowID);
+		}
+
+		var updateShadowPos = function updateShadowPos(deltaX, deltaY) {
+			var shadow = active.shadows[active.shadowID];
+			shadow.posX += deltaX;
+			shadow.posY += deltaY;
+			SliderManager.setValue("posX", shadow.posX);
+			SliderManager.setValue("posY", shadow.posY);
+			updateShadowCSS(active.shadowID);
+		}
+
+		var setShadowPosX = function setShadowPosX(value) {
+			if (active.shadowID === null)
+				return;
+			active.shadows[active.shadowID].posX = value;
+			updateShadowCSS(active.shadowID);
+		}
+
+		var setShadowPosY = function setShadowPosY(value) {
+			if (active.shadowID === null)
+				return;
+			active.shadows[active.shadowID].posY = value;
+			updateShadowCSS(active.shadowID);
+		}
+
+		var setShadowBlur = function setShadowBlur(value) {
+			if (active.shadowID === null)
+				return;
+			active.shadows[active.shadowID].blur = value;
+			updateShadowCSS(active.shadowID);
+		}
+
+		var setShadowSpread = function setShadowSpread(value) {
+			if (active.shadowID === null)
+				return;
+			active.shadows[active.shadowID].spread = value;
+			updateShadowCSS(active.shadowID);
+		}
+
+		var updateShadowColor = function updateShadowColor(color) {
+			active.shadows[active.shadowID].color.copy(color);
+			updateShadowCSS(active.shadowID);
+		}
+
+		/*
+		 * Element Properties
+		 */
+		var updateColor = function updateColor(color) {
+			if (active.shadowID === null)
+				active.updateBgColor(color);
+			else
+				updateShadowColor(color);
+		}
+
+		var init = function init() {
+			preview = getElemById("preview");
+
+			ColoPicker.subscribe("color", updateColor);
+			PreviewMouseTracking.subscribe(updateActivePos);
+
+			// Affects shadows
+			ButtonManager.subscribe("inset", toggleShadowInset);
+			SliderManager.subscribe("posX", setShadowPosX);
+			SliderManager.subscribe("posY", setShadowPosY);
+			SliderManager.subscribe("blur", setShadowBlur);
+			SliderManager.subscribe("spread", setShadowSpread);
+
+			// Affects element
+			SliderManager.subscribe("top", function(value){
+				active.setTop(value);
+			});
+			SliderManager.subscribe("left", function(value){
+				active.setLeft(value);
+			});
+			SliderManager.subscribe("rotate", function(value) {
+				if (active == classes["element"])
+					return;
+				active.setRotate(value);
+			});
+
+			SliderManager.subscribe("z-index", function(value) {
+				if (active == classes["element"])
+					return;
+				active.setzIndex(value);
+			});
+
+			SliderManager.subscribe("width", function(value) {
+				active.setWidth(value)
+			});
+
+			SliderManager.subscribe("height", function(value) {
+				active.setHeight(value)
+			});
+
+			// Actions
+			classes['before'].top = -30;
+			classes['before'].left = -30;
+			classes['after'].top = 30;
+			classes['after'].left = 30;
+			classes['before'].toggleDisplay(false);
+			classes['after'].toggleDisplay(false);
+			ButtonManager.setValue('before', false);
+			ButtonManager.setValue('after', false);
+
+			ButtonManager.subscribe("before", classes['before'].toggleDisplay.bind(classes['before']));
+			ButtonManager.subscribe("after", classes['after'].toggleDisplay.bind(classes['after']));
+
+			ButtonManager.subscribe("border-state", function(value) {
+				active.toggleBorder(value);
+			});
+
+		}
+
+		return {
+			init 			: init,
+			addShadow		: addShadow,
+			swapShadow		: swapShadow,
+			addCssClass		: addCssClass,
+			disableClass	: disableClass,
+			deleteShadow	: deleteShadow,
+			setActiveClass	: setActiveClass,
+			setActiveShadow : setActiveShadow
+		}
+
+	})();
+
+	/**
+	 * Layer Manager
+	 */
+	var LayerManager = (function LayerManager() {
+		var stacks = [];
+		var active = {
+			node : null,
+			stack : null
+		}
+		var elements = {};
+
+		var mouseEvents = function mouseEvents(e) {
+			var node = e.target;
+			var type = node.getAttribute('data-type');
+
+			if (type === 'subject')
+				setActiveStack(stacks[node.id]);
+
+			if (type === 'disable') {
+				Tool.disableClass(node.parentNode.id);
+				setActiveStack(stacks['element']);
+			}
+
+			if (type === 'add')
+				active.stack.addLayer();
+
+			if (type === 'layer')
+				active.stack.setActiveLayer(node);
+
+			if (type === 'delete')
+				active.stack.deleteLayer(node.parentNode);
+
+			if (type === 'move-up')
+				active.stack.moveLayer(1);
+
+			if (type === 'move-down')
+				active.stack.moveLayer(-1);
+		}
+
+		var setActiveStack = function setActiveStack(stackObj) {
+			active.stack.hide();
+			active.stack = stackObj;
+			active.stack.show();
+		}
+
+		/*
+		 * Stack object
+		 */
+		var Stack = function Stack(subject) {
+			var S = document.createElement('div');
+			var title = document.createElement('div');
+			var stack = document.createElement('div');
+
+			S.className = 'container';
+			stack.className = 'stack';
+			title.className = 'title';
+			title.textContent = subject.getAttribute('data-title');
+			S.appendChild(title);
+			S.appendChild(stack);
+
+			this.id = subject.id;
+			this.container = S;
+			this.stack = stack;
+			this.subject = subject;
+			this.order = [];
+			this.uid = 0;
+			this.count = 0;
+			this.layer = null;
+			this.layerID = 0;
+		}
+
+		Stack.prototype.addLayer = function addLayer() {
+			if (Tool.addShadow(this.layerID) == -1)
+				return;
+
+			var uid = this.getUID();
+			var layer = this.createLayer(uid);
+
+			if (this.layer === null &amp;&amp; this.stack.children.length &gt;= 1)
+				this.layer = this.stack.children[0];
+
+			this.stack.insertBefore(layer, this.layer);
+			this.order.splice(this.layerID, 0, uid);
+			this.count++;
+			this.setActiveLayer(layer);
+		}
+
+		Stack.prototype.createLayer = function createLayer(uid) {
+			var layer = document.createElement('div');
+			var del = document.createElement('span');
+
+			layer.className = 'node';
+			layer.setAttribute('data-shid', uid);
+			layer.setAttribute('data-type', 'layer');
+			layer.textContent = 'shadow ' + uid;
+
+			del.className = 'delete';
+			del.setAttribute('data-type', 'delete');
+
+			layer.appendChild(del);
+			return layer;
+		}
+
+		Stack.prototype.getUID = function getUID() {
+			return this.uid++;
+		}
+
+		// SOLVE IE BUG
+		Stack.prototype.moveLayer = function moveLayer(direction) {
+			if (this.count &lt;= 1 || this.layer === null)
+				return;
+			if (direction === -1 &amp;&amp; this.layerID === (this.count - 1) )
+				return;
+			if (direction === 1 &amp;&amp; this.layerID === 0 )
+				return;
+
+			if (direction === -1) {
+				var before = null;
+				Tool.swapShadow(this.layerID, this.layerID + 1);
+				this.swapOrder(this.layerID, this.layerID + 1);
+				this.layerID += 1;
+
+				if (this.layerID + 1 !== this.count)
+					before = this.stack.children[this.layerID + 1];
+
+				this.stack.insertBefore(this.layer, before);
+				Tool.setActiveShadow(this.layerID, false);
+			}
+
+			if (direction === 1) {
+				Tool.swapShadow(this.layerID, this.layerID - 1);
+				this.swapOrder(this.layerID, this.layerID - 1);
+				this.layerID -= 1;
+				this.stack.insertBefore(this.layer, this.stack.children[this.layerID]);
+				Tool.setActiveShadow(this.layerID, false);
+			}
+		}
+
+		Stack.prototype.swapOrder = function swapOrder(pos1, pos2) {
+			var x = this.order[pos1];
+			this.order[pos1] = this.order[pos2];
+			this.order[pos2] = x;
+		}
+
+		Stack.prototype.deleteLayer = function deleteLayer(node) {
+			var shadowID =  node.getAttribute('data-shid') | 0;
+			var index = this.order.indexOf(shadowID);
+			this.stack.removeChild(this.stack.children[index]);
+			this.order.splice(index, 1);
+			this.count--;
+
+			Tool.deleteShadow(index);
+
+			if (index &gt; this.layerID)
+				return;
+
+			if (index == this.layerID) {
+				if (this.count &gt;= 1) {
+					this.layerID = 0;
+					this.setActiveLayer(this.stack.children[0], true);
+				}
+				else {
+					this.layer = null;
+					this.show();
+				}
+			}
+
+			if (index &lt; this.layerID) {
+				this.layerID--;
+				Tool.setActiveShadow(this.layerID, true);
+			}
+
+		}
+
+		Stack.prototype.setActiveLayer = function setActiveLayer(node) {
+			elements.shadow_properties.style.display = 'block';
+			elements.element_properties.style.display = 'none';
+
+			if (this.layer)
+				this.layer.removeAttribute('data-active');
+
+			this.layer = node;
+			this.layer.setAttribute('data-active', 'layer');
+
+			var shadowID =  node.getAttribute('data-shid') | 0;
+			this.layerID = this.order.indexOf(shadowID);
+			Tool.setActiveShadow(this.layerID, true);
+		}
+
+		Stack.prototype.unsetActiveLayer = function unsetActiveLayer() {
+			if (this.layer)
+				this.layer.removeAttribute('data-active');
+
+			this.layer = null;
+			this.layerID = 0;
+		}
+
+		Stack.prototype.hide = function hide() {
+			this.unsetActiveLayer();
+			this.subject.removeAttribute('data-active');
+			var style = this.container.style;
+			style.left = '100%';
+			style.zIndex = '0';
+		}
+
+		Stack.prototype.show = function show() {
+			elements.shadow_properties.style.display = 'none';
+			elements.element_properties.style.display = 'block';
+
+			if (this.id === 'element') {
+				elements.zIndex.style.display = 'none';
+				elements.transform_rotate.style.display = 'none';
+			}
+			else {
+				elements.zIndex.style.display = 'block';
+				elements.transform_rotate.style.display = 'block';
+			}
+
+			this.subject.setAttribute('data-active', 'subject');
+			var style = this.container.style;
+			style.left = '0';
+			style.zIndex = '10';
+			Tool.setActiveClass(this.id);
+		}
+
+		function init() {
+
+			var elem, size;
+			var layerManager = getElemById("layer_manager");
+			var layerMenu = getElemById("layer_menu");
+			var container = getElemById("stack_container");
+
+			elements.shadow_properties = getElemById('shadow_properties');
+			elements.element_properties = getElemById('element_properties');
+			elements.transform_rotate = getElemById('transform_rotate');
+			elements.zIndex = getElemById('z-index');
+
+			elem = document.querySelectorAll('#layer_menu [data-type="subject"]');
+			size = elem.length;
+
+			for (var i = 0; i &lt; size; i++) {
+				var S = new Stack(elem[i]);
+				stacks[elem[i].id] = S;
+				container.appendChild(S.container);
+				Tool.addCssClass(elem[i].id);
+			}
+
+			active.stack = stacks['element'];
+			stacks['element'].show();
+
+			layerManager.addEventListener("click", mouseEvents);
+			layerMenu.addEventListener("click", mouseEvents);
+
+			ButtonManager.subscribe("before", function(value) {
+				if (value === false &amp;&amp; active.stack === stacks['before'])
+					setActiveStack(stacks['element'])
+				if (value === true &amp;&amp; active.stack !== stacks['before'])
+					setActiveStack(stacks['before'])
+			});
+
+			ButtonManager.subscribe("after", function(value) {
+				if (value === false &amp;&amp; active.stack === stacks['after'])
+					setActiveStack(stacks['element'])
+				if (value === true &amp;&amp; active.stack !== stacks['after'])
+					setActiveStack(stacks['after'])
+			});
+		}
+
+		return {
+			init : init
+		}
+	})();
+
+	/*
+	 * OutputManager
+	 */
+	var OutputManager = (function OutputManager() {
+		var classes = [];
+		var buttons = [];
+		var active = null;
+		var menu = null;
+		var button_offset = 0;
+
+		var crateOutputNode = function(topic, property) {
+
+			var prop = document.createElement('div');
+			var name = document.createElement('span');
+			var value = document.createElement('span');
+
+			var pmatch = property.match(/(^([a-z0-9\-]*)=\[([a-z0-9\-\"]*)\])|^([a-z0-9\-]*)/i);
+
+			name.textContent = '\t' + pmatch[4];
+
+			if (pmatch[3] !== undefined) {
+				name.textContent = '\t' + pmatch[2];
+				value.textContent = pmatch[3] + ';';
+			}
+
+			name.textContent += ': ';
+			prop.className = 'css-property';
+			name.className = 'name';
+			value.className = 'value';
+			prop.appendChild(name);
+			prop.appendChild(value);
+
+			classes[topic].node.appendChild(prop);
+			classes[topic].line[property] = prop;
+			classes[topic].prop[property] = value;
+		}
+
+		var OutputClass = function OutputClass(node) {
+			var topic = node.getAttribute('data-topic');
+			var prop = node.getAttribute('data-prop');
+			var name = node.getAttribute('data-name');
+			var properties = prop.split(' ');
+
+			classes[topic] = {};
+			classes[topic].node = node;
+			classes[topic].prop = [];
+			classes[topic].line = [];
+			classes[topic].button = new Button(topic);
+
+			var open_decl = document.createElement('div');
+			var end_decl = document.createElement('div');
+
+			open_decl.textContent = name + ' {';
+			end_decl.textContent = '}';
+			node.appendChild(open_decl);
+
+			for (var i in properties)
+				crateOutputNode(topic, properties[i]);
+
+			node.appendChild(end_decl);
+		}
+
+		var Button = function Button(topic) {
+			var button = document.createElement('div');
+
+			button.className = 'button';
+			button.textContent = topic;
+			button.style.left = button_offset + 'px';
+			button_offset += 100;
+
+			button.addEventListener("click", function() {
+				toggleDisplay(topic);
+			})
+
+			menu.appendChild(button);
+			return button;
+		}
+
+		var toggleDisplay = function toggleDisplay(topic) {
+			active.button.removeAttribute('data-active');
+			active.node.style.display = 'none';
+			active = classes[topic];
+			active.node.style.display = 'block';
+			active.button.setAttribute('data-active', 'true');
+		}
+
+		var toggleButton = function toggleButton(topic, value) {
+			var display = (value === true) ? 'block' : 'none';
+			classes[topic].button.style.display = display;
+
+			if (value === true)
+				toggleDisplay(topic);
+			else
+				toggleDisplay('element');
+		}
+
+		var updateProperty = function updateProperty(topic, property, data) {
+			try {
+				classes[topic].prop[property].textContent = data + ';';
+			}
+			catch(error) {
+				// console.log("ERROR undefined : ", topic, property, data);
+			}
+		}
+
+		var toggleProperty = function toggleProperty(topic, property, value) {
+			var display = (value === true) ? 'block' : 'none';
+			try {
+				classes[topic].line[property].style.display = display;
+			}
+			catch(error) {
+				// console.log("ERROR undefined : ",classes, topic, property, value);
+			}
+		}
+
+		var init = function init() {
+
+			menu = getElemById('menu');
+
+			var elem = document.querySelectorAll('#output .output');
+			var size = elem.length;
+			for (var i = 0; i &lt; size; i++)
+				OutputClass(elem[i]);
+
+			active = classes['element'];
+			toggleDisplay('element');
+
+			ButtonManager.subscribe("before", function(value) {
+				toggleButton('before', value);
+			});
+
+			ButtonManager.subscribe("after", function(value) {
+				toggleButton('after', value);
+			});
+		}
+
+		return {
+			init : init,
+			updateProperty : updateProperty,
+			toggleProperty : toggleProperty
+		}
+
+	})();
+
+
+	/**
+	 * Init Tool
+	 */
+	var init = function init() {
+		ButtonManager.init();
+		OutputManager.init();
+		ColoPicker.init();
+		SliderManager.init();
+		LayerManager.init();
+		PreviewMouseTracking.init("preview");
+		Tool.init();
+	}
+
+	return {
+		init : init
+	}
+
+})();
+
+
+</code></pre>
+</div>
+
+<div>{{ EmbedLiveSample('box-shadow_generator', '100%', '1100px', '') }}</div>
+
+<p><strong>Related Tool: </strong><a href="https://cssgenerator.org/box-shadow-css-generator.html">Box Shadow CSS Generator</a></p>
diff --git a/files/zh-cn/web/css/css_flow_layout/index.html b/files/zh-cn/web/css/css_flow_layout/index.html
index e6736b7023..4338eb2f88 100644
--- a/files/zh-cn/web/css/css_flow_layout/index.html
+++ b/files/zh-cn/web/css/css_flow_layout/index.html
@@ -37,7 +37,7 @@ translation_of: Web/CSS/CSS_Flow_Layout
  <li>{{Glossary("Block/CSS", "Block (CSS)")}}</li>
 </ul>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li>
  <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li>
diff --git a/files/zh-cn/web/css/css_grid_layout/auto-placement_in_css_grid_layout/index.html b/files/zh-cn/web/css/css_grid_layout/auto-placement_in_css_grid_layout/index.html
index 9386a5ef17..f1c3a4ecc2 100644
--- a/files/zh-cn/web/css/css_grid_layout/auto-placement_in_css_grid_layout/index.html
+++ b/files/zh-cn/web/css/css_grid_layout/auto-placement_in_css_grid_layout/index.html
@@ -555,7 +555,7 @@ dd {
 
 <p>可能你在使用自动定位或网格布局的其他功能时也会遇到问题，如果遇到了，请把它们抛出来，或者作为用例追加到已有问题上，一方面便于解决，另一方面也会帮助规范在未来的新版本变得更好。</p>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li><a href="/zh-CN/docs/Web/CSS"><strong>CSS</strong></a></li>
  <li><a href="/zh-CN/docs/Web/CSS/Reference"><strong>CSS参考</strong></a></li>
diff --git a/files/zh-cn/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html b/files/zh-cn/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html
index 57d8f1b75c..0659a28b3a 100644
--- a/files/zh-cn/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html
+++ b/files/zh-cn/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html
@@ -685,7 +685,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout
 
 <p>在本文章中我们快速对网格布局的概念有了个基本的了解。利用示例代码进行练习，然后<a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">接下来我们正式开始挖掘关于网格布局的各种细节</a>。</p>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li>
  <li><strong><a href="/zh-CN/docs/Web/CSS/Reference">CSS 参考</a></strong></li>
diff --git a/files/zh-cn/web/css/css_grid_layout/box_alignment_in_css_grid_layout/index.html b/files/zh-cn/web/css/css_grid_layout/box_alignment_in_css_grid_layout/index.html
index 0b5c506a1f..9496e10a87 100644
--- a/files/zh-cn/web/css/css_grid_layout/box_alignment_in_css_grid_layout/index.html
+++ b/files/zh-cn/web/css/css_grid_layout/box_alignment_in_css_grid_layout/index.html
@@ -643,7 +643,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout
 
 <p>CSS 网格布局和盒模型对齐规范是为了解决 CSS 中的书写模式而设计的，这意味着，如果你用一种从右到左的语言工作，比如阿拉伯语，那网格的起始线就应该是从右上开始，此时 justify-content: start 也将使网格轨道从网格的右侧开始。为 <code>margin-right</code> 和 <code>margin-left</code> 设置自动外边距，或者使用绝对位置如 <code>top<font face="Open Sans, arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">，</span></font></code><code>right<font face="Open Sans, arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">，</span></font></code><code>bottom</code> 和 <code>left</code> 来设置偏移量对书写模式来说并不是一种友好的表达方式。在下一篇文章中，我们会深入讨论 CSS 网格布局、盒模型对齐和书写模式之间的关系，理解这些原理，对于开发用多种语言显示的网站，或者设计混合了多种语言和书写模式的页面将大有益处。</p>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li><a href="/zh-CN/docs/Web/CSS"><strong>CSS</strong></a></li>
  <li><a href="/zh-CN/docs/Web/CSS/Reference"><strong>CSS参考</strong></a></li>
diff --git a/files/zh-cn/web/css/css_grid_layout/css_grid_and_progressive_enhancement/index.html b/files/zh-cn/web/css/css_grid_layout/css_grid_and_progressive_enhancement/index.html
index e67b69a9fa..3e606beaa6 100644
--- a/files/zh-cn/web/css/css_grid_layout/css_grid_and_progressive_enhancement/index.html
+++ b/files/zh-cn/web/css/css_grid_layout/css_grid_and_progressive_enhancement/index.html
@@ -393,7 +393,7 @@ img {
  <li><a href="https://css-tricks.com/css-grid-in-ie-css-grid-and-the-new-autoprefixer">CSS Grid and the New Autoprefixer</a></li>
 </ul>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li>
  <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li>
diff --git a/files/zh-cn/web/css/css_grid_layout/css_grid_layout_and_accessibility/index.html b/files/zh-cn/web/css/css_grid_layout/css_grid_layout_and_accessibility/index.html
index 286a249901..a68be27726 100644
--- a/files/zh-cn/web/css/css_grid_layout/css_grid_layout_and_accessibility/index.html
+++ b/files/zh-cn/web/css/css_grid_layout/css_grid_layout_and_accessibility/index.html
@@ -121,7 +121,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility
 
 <p>作为一种开始思考这些问题的方式，当使用 CSS 网格布局时，建议阅读 Leonie Watson 的 <em><a href="http://tink.uk/flexbox-the-keyboard-navigation-disconnect/">Flexbox &amp; the Keyboard Navigation Disconnect</a>。<a href="https://www.youtube.com/watch?v=spxT2CmHoPk">来自 ffconf 的 Leoie 的演示视频</a>有助于了解屏幕阅读器如何使用 CSS 的视觉表示进行工作。Adrian Roselli 也发表了 <a href="http://adrianroselli.com/2015/10/html-source-order-vs-css-display-order.html">tab order in various browsers</a> —— 尽管这是在 Firefox 完全实现网格支持之前。</em></p>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li><em><a href="/zh-CN/docs/Web/CSS"><strong>CSS</strong></a></em></li>
  <li><em><a href="/zh-CN/docs/Web/CSS/Reference"><strong>CSS参考</strong></a></em></li>
diff --git a/files/zh-cn/web/css/css_grid_layout/css_grid_logical_values_and_writing_modes/index.html b/files/zh-cn/web/css/css_grid_layout/css_grid_logical_values_and_writing_modes/index.html
index 216a6fa669..9608cd5fda 100644
--- a/files/zh-cn/web/css/css_grid_layout/css_grid_logical_values_and_writing_modes/index.html
+++ b/files/zh-cn/web/css/css_grid_layout/css_grid_logical_values_and_writing_modes/index.html
@@ -444,7 +444,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Mode
 
 <p><a href="https://drafts.csswg.org/css-logical-props/">CSS 逻辑属性规范</a> 的目标是改变现状，在未来的 CSS 中，{{cssxref("margin-left")}} 和 {{cssxref("margin-right")}} 将与<a href="/en-US/docs/Web/CSS/CSS_Logical_Properties">逻辑属性</a>相同。Firefox 已经实现了，所以你现在就可以在 Firefox 中试上一试。未来如果得到全面支持，那么通过网格学习到的“块和行内”的知识，你也能马上举一反三地用在其他地方了。</p>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li><a href="/zh-CN/docs/Web/CSS"><strong>CSS</strong></a></li>
  <li><a href="/zh-CN/docs/Web/CSS/Reference"><strong>CSS参考</strong></a></li>
diff --git a/files/zh-cn/web/css/css_grid_layout/grid_template_areas/index.html b/files/zh-cn/web/css/css_grid_layout/grid_template_areas/index.html
index bdbddab744..5c3d8b05d5 100644
--- a/files/zh-cn/web/css/css_grid_layout/grid_template_areas/index.html
+++ b/files/zh-cn/web/css/css_grid_layout/grid_template_areas/index.html
@@ -482,7 +482,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Grid_Template_Areas
 
 <p>如果你通过阅读本指南前面的几篇文章已经开始上手了，那么你应该是用基于线的定位方式或用命名区域的方式来创建网格布局的。花费一些时间用网格去创建常见的布局模式，虽然还有很多的术语要学习，不过语法是非常一目了然的。在你练习开发的过程中可能会遭遇到一些问题，并且用我们没有讲过的方法去解决它们。在本指南后面的文章中，我们将着眼于更多规范中的细节 —— 目标是让你能用它创建出更加复杂的布局。</p>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li><a href="/zh-CN/docs/Web/CSS"><strong>CSS</strong></a></li>
  <li><a href="/zh-CN/docs/Web/CSS/Reference"><strong>CSS参考</strong></a></li>
diff --git a/files/zh-cn/web/css/css_grid_layout/index.html b/files/zh-cn/web/css/css_grid_layout/index.html
index 17f637d96f..46faef1a06 100644
--- a/files/zh-cn/web/css/css_grid_layout/index.html
+++ b/files/zh-cn/web/css/css_grid_layout/index.html
@@ -204,7 +204,7 @@ translation_of: Web/CSS/CSS_Grid_Layout
  </tbody>
 </table>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li><a href="/zh-CN/docs/Web/CSS"><strong>CSS</strong></a></li>
  <li><a href="/zh-CN/docs/Web/CSS/Reference"><strong>CSS索引</strong></a></li>
diff --git a/files/zh-cn/web/css/css_grid_layout/layout_using_named_grid_lines/index.html b/files/zh-cn/web/css/css_grid_layout/layout_using_named_grid_lines/index.html
index 86699a10f4..4ca790f7b7 100644
--- a/files/zh-cn/web/css/css_grid_layout/layout_using_named_grid_lines/index.html
+++ b/files/zh-cn/web/css/css_grid_layout/layout_using_named_grid_lines/index.html
@@ -428,7 +428,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines
 
 <p>这就是我们需要的，不用做任何计算，网格在分配 1fr 的列轨道空间之前会自动把 10 像素的轨道间距删除掉。在你动手创建自己的布局的过程中，语法会变得越来越熟悉，你能找到适于自己的方法和喜欢创建的项目类型。尝试用不同的方法去创建一些通用的布局模式，你会找到最适合自己的工作方式。在下一篇文章中我们会探讨如何用网格定位元素 —— 根本不需要使用定位属性！</p>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li><a href="/zh-CN/docs/Web/CSS"><strong>CSS</strong></a></li>
  <li><a href="/zh-CN/docs/Web/CSS/Reference"><strong>CSS参考</strong></a></li>
diff --git a/files/zh-cn/web/css/css_grid_layout/line-based_placement_with_css_grid/index.html b/files/zh-cn/web/css/css_grid_layout/line-based_placement_with_css_grid/index.html
index 004634d8b8..89a3d38534 100644
--- a/files/zh-cn/web/css/css_grid_layout/line-based_placement_with_css_grid/index.html
+++ b/files/zh-cn/web/css/css_grid_layout/line-based_placement_with_css_grid/index.html
@@ -600,7 +600,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid
 
 <p>再者，记住你明确定位的元素是可以互相重叠的。有时你能用这点创造一些有趣的效果，但有时也会因为你定位错了线而导致不正确的重叠。<a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">Firefox Grid Highlighter</a> 可以在你学习时给你帮助，特别是当你的网格比较复杂时。</p>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li><a href="/zh-CN/docs/Web/CSS"><strong>CSS</strong></a></li>
  <li><a href="/zh-CN/docs/Web/CSS/Reference"><strong>CSS索引</strong></a></li>
diff --git a/files/zh-cn/web/css/css_grid_layout/realizing_common_layouts_using_css_grid_layout/index.html b/files/zh-cn/web/css/css_grid_layout/realizing_common_layouts_using_css_grid_layout/index.html
index a20d8b626a..e052b14da2 100644
--- a/files/zh-cn/web/css/css_grid_layout/realizing_common_layouts_using_css_grid_layout/index.html
+++ b/files/zh-cn/web/css/css_grid_layout/realizing_common_layouts_using_css_grid_layout/index.html
@@ -535,7 +535,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/利用CSS网格布局实现常用布局
  <li>有关其他常见布局模式，请参见 <a href="http://gridbyexample.com">Grid by Example</a>, 这里有许多网格布局的小例子，也有一些较大的UI模式和完整的页面布局。</li>
 </ul>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li>
  <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li>
diff --git a/files/zh-cn/web/css/css_grid_layout/relationship_of_grid_layout/index.html b/files/zh-cn/web/css/css_grid_layout/relationship_of_grid_layout/index.html
index 6294c4aa25..2f3ed187ba 100644
--- a/files/zh-cn/web/css/css_grid_layout/relationship_of_grid_layout/index.html
+++ b/files/zh-cn/web/css/css_grid_layout/relationship_of_grid_layout/index.html
@@ -580,7 +580,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout
 
 <p>正如本文中所述，CSS Grid Layout 只是您工具包的一部分。不要害怕在布局时将它与其他布局方法混用，大胆用它获得你想要的效果吧。</p>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li><a href="/zh-CN/docs/Web/CSS"><strong>CSS</strong></a></li>
  <li><a href="/zh-CN/docs/Web/CSS/Reference"><strong>CSS索引</strong></a></li>
diff --git a/files/zh-cn/web/css/grid-area/index.html b/files/zh-cn/web/css/grid-area/index.html
index d5c5c3d9e2..4f35049aee 100644
--- a/files/zh-cn/web/css/grid-area/index.html
+++ b/files/zh-cn/web/css/grid-area/index.html
@@ -220,7 +220,7 @@ grid-area: unset;</pre>
  <li>Video tutorial: <em><a href="http://gridbyexample.com/video/grid-template-areas/">Grid Template Areas</a></em></li>
 </ul>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li>
  <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li>
diff --git a/files/zh-cn/web/css/grid-auto-columns/index.html b/files/zh-cn/web/css/grid-auto-columns/index.html
index 7b24f9199e..fa64012b44 100644
--- a/files/zh-cn/web/css/grid-auto-columns/index.html
+++ b/files/zh-cn/web/css/grid-auto-columns/index.html
@@ -149,7 +149,7 @@ grid-auto-columns: unset;
  <li>Video tutorial: <em><a href="http://gridbyexample.com/video/series-auto-placement-order/">Introducing Grid auto-placement and order</a></em></li>
 </ul>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li>
  <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li>
diff --git a/files/zh-cn/web/css/grid-auto-flow/index.html b/files/zh-cn/web/css/grid-auto-flow/index.html
index bf53cdd92b..3f6d6cf6c0 100644
--- a/files/zh-cn/web/css/grid-auto-flow/index.html
+++ b/files/zh-cn/web/css/grid-auto-flow/index.html
@@ -154,7 +154,7 @@ grid-auto-flow: unset;</pre>
  <li>Video tutorial: <em><a href="http://gridbyexample.com/video/series-auto-placement-order/">Introducing Grid auto-placement and order</a></em></li>
 </ul>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li>
  <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li>
diff --git a/files/zh-cn/web/css/grid-auto-rows/index.html b/files/zh-cn/web/css/grid-auto-rows/index.html
index a448a6833b..536e625a8a 100644
--- a/files/zh-cn/web/css/grid-auto-rows/index.html
+++ b/files/zh-cn/web/css/grid-auto-rows/index.html
@@ -148,7 +148,7 @@ grid-auto-rows: unset;
  <li>视频教程：<em><a href="http://gridbyexample.com/video/series-auto-placement-order/">引入网格自动放置和排序</a></em></li>
 </ul>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li><a href="/zh-CN/docs/Web/CSS"><strong>CSS</strong></a></li>
  <li><a href="/zh-CN/docs/Web/CSS/Reference"><strong>CSS参考</strong></a></li>
diff --git a/files/zh-cn/web/css/grid-column/index.html b/files/zh-cn/web/css/grid-column/index.html
index d826b70c60..c8f01a098a 100644
--- a/files/zh-cn/web/css/grid-column/index.html
+++ b/files/zh-cn/web/css/grid-column/index.html
@@ -138,7 +138,7 @@ translation_of: Web/CSS/grid-column
  <li>Video tutorial: <em><a href="http://gridbyexample.com/video/series-line-based-placement/">Line-based placement</a></em></li>
 </ul>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li>
  <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li>
diff --git a/files/zh-cn/web/css/grid-row/index.html b/files/zh-cn/web/css/grid-row/index.html
index 4f5826271a..83baa1020b 100644
--- a/files/zh-cn/web/css/grid-row/index.html
+++ b/files/zh-cn/web/css/grid-row/index.html
@@ -144,7 +144,7 @@ grid-row: unset;
  <li>Video tutorial: <em><a href="http://gridbyexample.com/video/series-line-based-placement/">Line-based placement</a></em></li>
 </ul>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li>
  <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li>
diff --git a/files/zh-cn/web/css/grid-template-areas/index.html b/files/zh-cn/web/css/grid-template-areas/index.html
index 15cdc56df2..89b09a064f 100644
--- a/files/zh-cn/web/css/grid-template-areas/index.html
+++ b/files/zh-cn/web/css/grid-template-areas/index.html
@@ -141,7 +141,7 @@ grid-template-areas: unset; /* 未设置 */
  <li>视频教程<em>：<a href="http://gridbyexample.com/video/grid-template-areas/">Grid Template Areas</a></em></li>
 </ul>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li>
  <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li>
diff --git a/files/zh-cn/web/css/grid-template-columns/index.html b/files/zh-cn/web/css/grid-template-columns/index.html
index bb3150a257..3cd25ea361 100644
--- a/files/zh-cn/web/css/grid-template-columns/index.html
+++ b/files/zh-cn/web/css/grid-template-columns/index.html
@@ -140,7 +140,7 @@ grid-template-columns: unset;
  <li>视频教程: <em><a href="http://gridbyexample.com/video/series-define-a-grid/">Defining a Grid</a></em></li>
 </ul>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li>
  <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li>
diff --git a/files/zh-cn/web/css/grid-template-rows/index.html b/files/zh-cn/web/css/grid-template-rows/index.html
index fdffd201ff..7ab2365eeb 100644
--- a/files/zh-cn/web/css/grid-template-rows/index.html
+++ b/files/zh-cn/web/css/grid-template-rows/index.html
@@ -153,7 +153,7 @@ grid-template-rows: unset;
  <li>视频教程: <em><a href="http://gridbyexample.com/video/series-define-a-grid/">Defining a Grid</a></em></li>
 </ul>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li>
  <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li>
diff --git a/files/zh-cn/web/css/grid-template/index.html b/files/zh-cn/web/css/grid-template/index.html
index 0b79fc80d3..7b305e2862 100644
--- a/files/zh-cn/web/css/grid-template/index.html
+++ b/files/zh-cn/web/css/grid-template/index.html
@@ -146,7 +146,7 @@ footer {
  <li>视频教程：<em> <a href="http://gridbyexample.com/video/grid-template-shorthand/">Grid Template shorthand</a></em></li>
 </ul>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li>
  <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li>
diff --git a/files/zh-cn/web/css/grid/index.html b/files/zh-cn/web/css/grid/index.html
index 2e4e255ebe..ff04b9027c 100644
--- a/files/zh-cn/web/css/grid/index.html
+++ b/files/zh-cn/web/css/grid/index.html
@@ -133,7 +133,7 @@ grid: unset;
  <li><em>网格布局指南：</em><em><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas#Grid_definition_shorthands">Grid template areas - Grid definition shorthands</a></em></li>
 </ul>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li>
  <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li>
diff --git a/files/zh-cn/web/css/minmax()/index.html b/files/zh-cn/web/css/minmax()/index.html
index 3d78c94ddf..4509e35f5d 100644
--- a/files/zh-cn/web/css/minmax()/index.html
+++ b/files/zh-cn/web/css/minmax()/index.html
@@ -138,7 +138,7 @@ minmax(auto, 300px)
  <li>视频教程：<em><a href="http://gridbyexample.com/video/series-minmax/">Introducing minmax()</a></em></li>
 </ul>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li> </li>
  <li><a href="/zh-CN/docs/Web/CSS"><strong>CSS</strong></a></li>
diff --git a/files/zh-cn/web/css/tools/index.html b/files/zh-cn/web/css/tools/index.html
deleted file mode 100644
index a4c348fb36..0000000000
--- a/files/zh-cn/web/css/tools/index.html
+++ /dev/null
@@ -1,27 +0,0 @@
----
-title: 工具
-slug: Web/CSS/Tools
-tags:
-  - CSS
-translation_of: Web/CSS/Tools
----
-<div>CSS提供了许多强大的功能，但这些功能要么可能很难使用，要么有许多参数，因此在使用它们时，能够可视化它们是有帮助的。此页面提供了一些有用的工具的链接，这些工具将帮助您使用这些功能构建 CSS 来设计您的内容。</div>
-
-<p> </p>
-
-<p>{{LandingPageListSubpages}}</p>
-
-<h2 id="其他工具">其他工具</h2>
-
-<ul>
- <li>CSS 动画- <a href="http://jeremyckahn.github.io/stylie/">Stylie</a></li>
- <li>查看设备的显示信息(从 {{Glossary("响应式网页设计")}}处得到帮助) - <a href="http://mydevice.io">mydevice.io</a></li>
- <li>CSS 菜单- <a href="http://cssmenumaker.com/">cssmenumaker.com</a></li>
- <li>一个 强大并现代化的 CSS linter 可以帮助你实现统一约定并避免样式表中的错误 - <a href="https://stylelint.io/">stylelint</a></li>
-</ul>
-
-<h2 id="相关主题">相关主题</h2>
-
-<ul>
- <li><a href="/zh-CN/docs/Web/CSS" title="/en-US/docs/Web/CSS">CSS</a></li>
-</ul>
diff --git a/files/zh-cn/web/demos/index.html b/files/zh-cn/web/demos/index.html
new file mode 100644
index 0000000000..04c11c2257
--- /dev/null
+++ b/files/zh-cn/web/demos/index.html
@@ -0,0 +1,155 @@
+---
+title: 开源 Web 技术示例
+slug: Web/Demos
+tags:
+  - 2D
+  - 3D
+  - CSS
+  - Canvas
+  - Design
+  - HTML
+  - SVG
+  - Video
+translation_of: Web/Demos_of_open_web_technologies
+original_slug: Web/Demos_of_open_web_technologies
+---
+<p class="summary">Mozilla 支持各种令人兴奋的开源 Web 技术,我们鼓励大家使用它们。此页面提供了有关这些技术的一些有趣演示链接。</p>
+
+<p>如果你知道开源 Web 技术的优秀演示或者应用,就在这里（以及 <a href="https://developer.mozilla.org/en-US/docs/Web/Demos_of_open_web_technologies">英文页面</a>）添加一个合适的链接吧。</p>
+
+<h2 id="2D_图形">2D 图形</h2>
+
+<h3 id="Canvas">Canvas</h3>
+
+<ul>
+ <li><a href="http://www.blobsallad.se/">Blob Sallad: an interactive blob using JavaScript and canvas</a>（<a href="http://blobsallad.se/article/">示例</a>）</li>
+ <li><a href="http://arapehlivanian.com/wp-content/uploads/2007/02/canvas.html">Flying through space</a></li>
+ <li><a href="https://developer.mozilla.org/samples/raycaster/RayCaster.html" title="https://developer.mozilla.org/editor/fckeditor/core/editor/samples/raycaster/RayCaster.html">3D RayCaster</a></li>
+ <li><a href="http://processingjs.org/exhibition/">processing.js</a></li>
+ <li><a href="http://gyu.que.jp/jscloth/">3D on 2D Canvas</a></li>
+ <li><a href="http://viliusle.github.io/miniPaint/">miniPaint: Image editor</a>（<a href="https://github.com/viliusle/miniPaint">源码</a>）</li>
+ <li><a href="http://zenphoton.com/">Zen Photon Garden</a>（<a href="https://github.com/scanlime/zenphoton">源码</a>）</li>
+</ul>
+
+<h3 id="SVG">SVG</h3>
+
+<ul>
+ <li><a class="external" href="http://starkravingfinkle.org/projects/demo/svg-bubblemenu-in-html.xml">Bubblemenu</a> （视觉特效与交互）</li>
+ <li><a class="external" href="http://starkravingfinkle.org/blog/2007/07/firefox-3-svg-foreignobject/">HTML transformations</a>（使用了 <code>&lt;foreignObject&gt;</code> 元素）（视觉特效与变换）</li>
+ <li><a class="external" href="http://svg-whiz.com/svg/linguistics/theCreepyMouth.svg">Phonetics Guide</a>（可交互）</li>
+ <li><a class="external" href="http://www.lutanho.net/svgvml3d/platonic.html">3D objects demo</a>（可交互）</li>
+ <li><a class="external" href="http://www.themaninblue.com/experiment/Blobular/">Blobular</a>（可交互）</li>
+ <li><a class="external" href="http://www.double.co.nz/video_test/video.svg">Video embedded in SVG</a>（或<a href="http://www.double.co.nz/video_test/video_svg.tar.bz2">下载到本地</a>）</li>
+ <li><a href="http://summerstyle.github.io/summer/">Summer HTML image map creator</a>（<a href="https://github.com/summerstyle/summer">源码</a>）</li>
+</ul>
+
+<h3 id="Video" name="Video">视频</h3>
+
+<ul>
+ <li><a href="https://vimeo.com/172328210">Video 3D Animation "mozilla constantly evolving" </a></li>
+ <li><a href="https://vimeo.com/173851395">Video 3D animation "Floating Dance" </a></li>
+ <li><a class="external" href="http://www.double.co.nz/video_test/test1.html">Streaming Anime, Movie Trailer and Interview</a></li>
+ <li><a class="external" href="http://www.double.co.nz/video_test/test2.html">Billy's Browser Firefox Flick</a></li>
+ <li><a class="external" href="http://www.double.co.nz/video_test/test3.html">Virtual Barber Shop</a></li>
+ <li><a class="external" href="http://www.double.co.nz/video_test/test4.html">Transformers Movie Trailer</a></li>
+ <li><a class="external" href="http://www.double.co.nz/video_test/test5.html">A Scanner Darkly Movie Trailer</a>（自带控制功能）</li>
+ <li><a class="external" href="http://www.double.co.nz/video_test/events.html">Events firing and volume control</a></li>
+ <li><a class="external" href="http://www.double.co.nz/video_test/video.svg">Dragable and sizable videos</a></li>
+</ul>
+
+<h2 id="3D_图像">3D 图像</h2>
+
+<h3 id="WebGL">WebGL</h3>
+
+<ul>
+ <li><a href="http://ondras.github.io/fireworks-webgl/">Web Audio Fireworks</a></li>
+ <li>IoQuake3（<a href="https://github.com/klaussilveira/ioquake3.js">源码</a>）</li>
+ <li>Escher puzzle（<a href="https://github.com/micahbolen/demoscene">源码</a>）</li>
+ <li><a href="http://collinhover.github.io/kaiopua/">Kai 'Opua</a>（<a href="https://github.com/collinhover/kaiopua">源码</a>）</li>
+</ul>
+
+<h3 id="虚拟现实（VR）">虚拟现实（VR）</h3>
+
+<ul>
+ <li><a href="http://mozvr.com/demos/polarsea/">The Polar Sea</a>（<a href="https://github.com/MozVR/polarsea">源码</a>）</li>
+ <li><a href="http://mozvr.github.io/sechelt/">Sechelt fly-through</a>（<a href="https://github.com/mozvr/sechelt">源码</a>）</li>
+</ul>
+
+<h2 id="CSS">CSS</h2>
+
+<ul>
+ <li><a href="http://www.csszengarden.com/">CSS Zen Garden</a></li>
+ <li><a href="https://codepen.io/SoftwareRVG/pen/OXkOWj/">CSS floating logo "mozilla"</a></li>
+ <li><a href="http://felixniklas.com/paperfold/">Paperfold</a></li>
+ <li><a href="http://ondras.github.io/blockout/">CSS Blockout</a></li>
+ <li><a href="http://ondras.zarovi.cz/demos/rubik/">Rubik's cube</a></li>
+ <li><a href="http://ondras.zarovi.cz/demos/nojs/">Pure CSS Slides</a></li>
+ <li>Planetarium（<a href="https://github.com/littleworkshop/planetarium">源码</a>）</li>
+ <li><a href="https://codepen.io/equinusocio/full/qjyXPP/">Loader with blend modes</a></li>
+ <li><a href="https://codepen.io/equinusocio/full/KNYOxJ/">Text reveal with clip-path</a></li>
+ <li><a href="https://codepen.io/equinusocio/full/GvyvWd/">Ambient shadow with custom properties</a></li>
+ <li><a href="https://codepen.io/equinusocio/full/jEVNeJ/">Luminiscent vial</a></li>
+</ul>
+
+<p>旧项目：</p>
+
+<ul>
+ <li><a href="https://s.codepen.io/SoftwareRVG/debug/OXkOWj">CSS floating logo "Mozilla" developed by Rober Villar, from Software RVG. </a>(debug模式)</li>
+ <li><a href="https://webdeveloperbareilly.in/blog/html5/responsive-contact-form-bootstrap.php">Bootstrap Contact Form Design</a></li>
+ <li><a href="http://www.lesmoffat.co.uk/folio/forest/forest.html">CSS Paralax Forest</a></li>
+ <li><a href="http://webdeveloperbareilly.in/blog/css3/awesome-login-form.html">Responsive Login Page Design</a></li>
+ <li><a href="http://webdeveloperbareilly.in/blog/css3/onepage-scroll-template.html" rel="bookmark" title="One Page Scroll Website Template Theme Free Download">One Page Scroll Website Template</a></li>
+</ul>
+
+<h3 id="变换">变换</h3>
+
+<ul>
+ <li><a href="http://impress.github.io/impress.js">Impress.js</a> (<a href="https://github.com/impress/impress.js">源码</a>)</li>
+</ul>
+
+<h2 id="游戏">游戏</h2>
+
+<ul>
+ <li>IoQuake3（<a href="https://github.com/klaussilveira/ioquake3.js">源码</a>）</li>
+ <li><a href="http://collinhover.github.io/kaiopua/">Kai 'Opua</a>（<a href="https://github.com/collinhover/kaiopua">源码</a>）</li>
+</ul>
+
+<h2 id="Web_API">Web API</h2>
+
+<ul>
+</ul>
+
+<h3 id="通知_API">通知 API</h3>
+
+<ul>
+ <li><a href="http://elfoxero.github.io/html5notifications/">HTML5 Notifications</a>（<a href="https://github.com/elfoxero/html5notifications">源码</a>）</li>
+</ul>
+
+<ul>
+</ul>
+
+<h3 id="网络音频_API">网络音频 API</h3>
+
+<ul>
+ <li><a href="http://ondras.github.io/fireworks-webgl/">Web Audio Fireworks</a></li>
+ <li><a href="http://ondras.github.io/oscope/">oscope.js - JavaScript oscilloscope</a></li>
+ <li><a href="http://nipe-systems.de/webapps/html5-web-audio/">HTML5 Web Audio Showcase</a>（<a href="https://github.com/NIPE-SYSTEMS/html5-web-audio-showcase">源码</a>）</li>
+ <li><a href="http://wayou.github.io/HTML5_Audio_Visualizer/">HTML5 Audio Visualizer</a>（<a href="https://github.com/Wayou/HTML5_Audio_Visualizer">源码</a>）</li>
+ <li><a href="http://carlosrafaelgn.com.br/GraphicalFilterEditor/">Graphical Filter Editor and Visualizer</a>（<a href="https://github.com/carlosrafaelgn/GraphicalFilterEditor">源码</a>）</li>
+</ul>
+
+<h3 id="文件_API">文件 API</h3>
+
+<ul>
+ <li><a href="http://palerdot.github.io/slide-my-text/">Slide My Text - presentation from plain text files</a></li>
+</ul>
+
+<h3 id="Unclassified" name="Unclassified">其他</h3>
+
+<ul>
+ <li><a href="http://ondras.github.io/fractal/">Web Worker Fractals</a></li>
+ <li><a href="http://ondras.github.io/photo/">Photo editor</a></li>
+ <li><a href="http://ondras.github.io/coral/">Coral generator</a></li>
+ <li><a class="external" href="http://nerget.com/rayjs-mt/rayjs.html">Raytracer</a></li>
+ <li><a href="http://palerdot.github.io/hotcold/">HotCold Touch Typing</a></li>
+</ul>
diff --git a/files/zh-cn/web/demos_of_open_web_technologies/index.html b/files/zh-cn/web/demos_of_open_web_technologies/index.html
deleted file mode 100644
index 29978d4ed2..0000000000
--- a/files/zh-cn/web/demos_of_open_web_technologies/index.html
+++ /dev/null
@@ -1,155 +0,0 @@
----
-title: 开源 Web 技术示例
-slug: Web/Demos_of_open_web_technologies
-tags:
-  - 2D
-  - 3D
-  - CSS
-  - Canvas
-  - Design
-  - HTML
-  - SVG
-  - Video
-translation_of: Web/Demos_of_open_web_technologies
-original_slug: Web/演示说明
----
-<p class="summary">Mozilla 支持各种令人兴奋的开源 Web 技术,我们鼓励大家使用它们。此页面提供了有关这些技术的一些有趣演示链接。</p>
-
-<p>如果你知道开源 Web 技术的优秀演示或者应用,就在这里（以及 <a href="https://developer.mozilla.org/en-US/docs/Web/Demos_of_open_web_technologies">英文页面</a>）添加一个合适的链接吧。</p>
-
-<h2 id="2D_图形">2D 图形</h2>
-
-<h3 id="Canvas">Canvas</h3>
-
-<ul>
- <li><a href="http://www.blobsallad.se/">Blob Sallad: an interactive blob using JavaScript and canvas</a>（<a href="http://blobsallad.se/article/">示例</a>）</li>
- <li><a href="http://arapehlivanian.com/wp-content/uploads/2007/02/canvas.html">Flying through space</a></li>
- <li><a href="https://developer.mozilla.org/samples/raycaster/RayCaster.html" title="https://developer.mozilla.org/editor/fckeditor/core/editor/samples/raycaster/RayCaster.html">3D RayCaster</a></li>
- <li><a href="http://processingjs.org/exhibition/">processing.js</a></li>
- <li><a href="http://gyu.que.jp/jscloth/">3D on 2D Canvas</a></li>
- <li><a href="http://viliusle.github.io/miniPaint/">miniPaint: Image editor</a>（<a href="https://github.com/viliusle/miniPaint">源码</a>）</li>
- <li><a href="http://zenphoton.com/">Zen Photon Garden</a>（<a href="https://github.com/scanlime/zenphoton">源码</a>）</li>
-</ul>
-
-<h3 id="SVG">SVG</h3>
-
-<ul>
- <li><a class="external" href="http://starkravingfinkle.org/projects/demo/svg-bubblemenu-in-html.xml">Bubblemenu</a> （视觉特效与交互）</li>
- <li><a class="external" href="http://starkravingfinkle.org/blog/2007/07/firefox-3-svg-foreignobject/">HTML transformations</a>（使用了 <code>&lt;foreignObject&gt;</code> 元素）（视觉特效与变换）</li>
- <li><a class="external" href="http://svg-whiz.com/svg/linguistics/theCreepyMouth.svg">Phonetics Guide</a>（可交互）</li>
- <li><a class="external" href="http://www.lutanho.net/svgvml3d/platonic.html">3D objects demo</a>（可交互）</li>
- <li><a class="external" href="http://www.themaninblue.com/experiment/Blobular/">Blobular</a>（可交互）</li>
- <li><a class="external" href="http://www.double.co.nz/video_test/video.svg">Video embedded in SVG</a>（或<a href="http://www.double.co.nz/video_test/video_svg.tar.bz2">下载到本地</a>）</li>
- <li><a href="http://summerstyle.github.io/summer/">Summer HTML image map creator</a>（<a href="https://github.com/summerstyle/summer">源码</a>）</li>
-</ul>
-
-<h3 id="Video" name="Video">视频</h3>
-
-<ul>
- <li><a href="https://vimeo.com/172328210">Video 3D Animation "mozilla constantly evolving" </a></li>
- <li><a href="https://vimeo.com/173851395">Video 3D animation "Floating Dance" </a></li>
- <li><a class="external" href="http://www.double.co.nz/video_test/test1.html">Streaming Anime, Movie Trailer and Interview</a></li>
- <li><a class="external" href="http://www.double.co.nz/video_test/test2.html">Billy's Browser Firefox Flick</a></li>
- <li><a class="external" href="http://www.double.co.nz/video_test/test3.html">Virtual Barber Shop</a></li>
- <li><a class="external" href="http://www.double.co.nz/video_test/test4.html">Transformers Movie Trailer</a></li>
- <li><a class="external" href="http://www.double.co.nz/video_test/test5.html">A Scanner Darkly Movie Trailer</a>（自带控制功能）</li>
- <li><a class="external" href="http://www.double.co.nz/video_test/events.html">Events firing and volume control</a></li>
- <li><a class="external" href="http://www.double.co.nz/video_test/video.svg">Dragable and sizable videos</a></li>
-</ul>
-
-<h2 id="3D_图像">3D 图像</h2>
-
-<h3 id="WebGL">WebGL</h3>
-
-<ul>
- <li><a href="http://ondras.github.io/fireworks-webgl/">Web Audio Fireworks</a></li>
- <li>IoQuake3（<a href="https://github.com/klaussilveira/ioquake3.js">源码</a>）</li>
- <li>Escher puzzle（<a href="https://github.com/micahbolen/demoscene">源码</a>）</li>
- <li><a href="http://collinhover.github.io/kaiopua/">Kai 'Opua</a>（<a href="https://github.com/collinhover/kaiopua">源码</a>）</li>
-</ul>
-
-<h3 id="虚拟现实（VR）">虚拟现实（VR）</h3>
-
-<ul>
- <li><a href="http://mozvr.com/demos/polarsea/">The Polar Sea</a>（<a href="https://github.com/MozVR/polarsea">源码</a>）</li>
- <li><a href="http://mozvr.github.io/sechelt/">Sechelt fly-through</a>（<a href="https://github.com/mozvr/sechelt">源码</a>）</li>
-</ul>
-
-<h2 id="CSS">CSS</h2>
-
-<ul>
- <li><a href="http://www.csszengarden.com/">CSS Zen Garden</a></li>
- <li><a href="https://codepen.io/SoftwareRVG/pen/OXkOWj/">CSS floating logo "mozilla"</a></li>
- <li><a href="http://felixniklas.com/paperfold/">Paperfold</a></li>
- <li><a href="http://ondras.github.io/blockout/">CSS Blockout</a></li>
- <li><a href="http://ondras.zarovi.cz/demos/rubik/">Rubik's cube</a></li>
- <li><a href="http://ondras.zarovi.cz/demos/nojs/">Pure CSS Slides</a></li>
- <li>Planetarium（<a href="https://github.com/littleworkshop/planetarium">源码</a>）</li>
- <li><a href="https://codepen.io/equinusocio/full/qjyXPP/">Loader with blend modes</a></li>
- <li><a href="https://codepen.io/equinusocio/full/KNYOxJ/">Text reveal with clip-path</a></li>
- <li><a href="https://codepen.io/equinusocio/full/GvyvWd/">Ambient shadow with custom properties</a></li>
- <li><a href="https://codepen.io/equinusocio/full/jEVNeJ/">Luminiscent vial</a></li>
-</ul>
-
-<p>旧项目：</p>
-
-<ul>
- <li><a href="https://s.codepen.io/SoftwareRVG/debug/OXkOWj">CSS floating logo "Mozilla" developed by Rober Villar, from Software RVG. </a>(debug模式)</li>
- <li><a href="https://webdeveloperbareilly.in/blog/html5/responsive-contact-form-bootstrap.php">Bootstrap Contact Form Design</a></li>
- <li><a href="http://www.lesmoffat.co.uk/folio/forest/forest.html">CSS Paralax Forest</a></li>
- <li><a href="http://webdeveloperbareilly.in/blog/css3/awesome-login-form.html">Responsive Login Page Design</a></li>
- <li><a href="http://webdeveloperbareilly.in/blog/css3/onepage-scroll-template.html" rel="bookmark" title="One Page Scroll Website Template Theme Free Download">One Page Scroll Website Template</a></li>
-</ul>
-
-<h3 id="变换">变换</h3>
-
-<ul>
- <li><a href="http://impress.github.io/impress.js">Impress.js</a> (<a href="https://github.com/impress/impress.js">源码</a>)</li>
-</ul>
-
-<h2 id="游戏">游戏</h2>
-
-<ul>
- <li>IoQuake3（<a href="https://github.com/klaussilveira/ioquake3.js">源码</a>）</li>
- <li><a href="http://collinhover.github.io/kaiopua/">Kai 'Opua</a>（<a href="https://github.com/collinhover/kaiopua">源码</a>）</li>
-</ul>
-
-<h2 id="Web_API">Web API</h2>
-
-<ul>
-</ul>
-
-<h3 id="通知_API">通知 API</h3>
-
-<ul>
- <li><a href="http://elfoxero.github.io/html5notifications/">HTML5 Notifications</a>（<a href="https://github.com/elfoxero/html5notifications">源码</a>）</li>
-</ul>
-
-<ul>
-</ul>
-
-<h3 id="网络音频_API">网络音频 API</h3>
-
-<ul>
- <li><a href="http://ondras.github.io/fireworks-webgl/">Web Audio Fireworks</a></li>
- <li><a href="http://ondras.github.io/oscope/">oscope.js - JavaScript oscilloscope</a></li>
- <li><a href="http://nipe-systems.de/webapps/html5-web-audio/">HTML5 Web Audio Showcase</a>（<a href="https://github.com/NIPE-SYSTEMS/html5-web-audio-showcase">源码</a>）</li>
- <li><a href="http://wayou.github.io/HTML5_Audio_Visualizer/">HTML5 Audio Visualizer</a>（<a href="https://github.com/Wayou/HTML5_Audio_Visualizer">源码</a>）</li>
- <li><a href="http://carlosrafaelgn.com.br/GraphicalFilterEditor/">Graphical Filter Editor and Visualizer</a>（<a href="https://github.com/carlosrafaelgn/GraphicalFilterEditor">源码</a>）</li>
-</ul>
-
-<h3 id="文件_API">文件 API</h3>
-
-<ul>
- <li><a href="http://palerdot.github.io/slide-my-text/">Slide My Text - presentation from plain text files</a></li>
-</ul>
-
-<h3 id="Unclassified" name="Unclassified">其他</h3>
-
-<ul>
- <li><a href="http://ondras.github.io/fractal/">Web Worker Fractals</a></li>
- <li><a href="http://ondras.github.io/photo/">Photo editor</a></li>
- <li><a href="http://ondras.github.io/coral/">Coral generator</a></li>
- <li><a class="external" href="http://nerget.com/rayjs-mt/rayjs.html">Raytracer</a></li>
- <li><a href="http://palerdot.github.io/hotcold/">HotCold Touch Typing</a></li>
-</ul>
diff --git a/files/zh-cn/web/guide/houdini/index.html b/files/zh-cn/web/guide/houdini/index.html
new file mode 100644
index 0000000000..2c81ff1ed3
--- /dev/null
+++ b/files/zh-cn/web/guide/houdini/index.html
@@ -0,0 +1,91 @@
+---
+title: CSS Houdini
+slug: Web/Guide/Houdini
+tags:
+  - API
+  - CSS
+  - Houdini
+  - Web
+translation_of: Web/Houdini
+original_slug: Web/Houdini
+---
+<p>Houdini是一组底层API，它们公开了CSS引擎的各个部分，从而使开发人员能够通过加入浏览器渲染引擎的样式和布局过程来扩展CSS。 Houdini是一组API，它们使开发人员可以直接访问<a href="/en-US/docs/Web/API/CSS_Object_Model">CSS 对象模型</a> （CSSOM），使开发人员可以编写浏览器可以解析为CSS的代码，从而创建新的CSS功能，而无需等待它们在浏览器中本地实现。</p>
+
+<h2 id="Houdini_的优点">Houdini 的优点</h2>
+
+<p>当样式改变时Houdini相比JavaScript<a href="/zh-CN/docs/Web/API/ElementCSSInlineStyle/style">.style</a> 的方式能够能够更快的解析。  浏览器在应用脚本中发现的任何样式更新之前，会对CSSOM进行解析--包括布局、绘制和合成过程。此外，对于JavaScript样式更新，布局、绘制和复合过程也会重复进行。Houdini代码不会等待第一个渲染周期完成。相反，它被包含在第一个周期中--创建可渲染的、可理解的样式。Houdini为在JavaScript中使用CSS值提供了一个基于对象的API。</p>
+
+<p>Houdini 的 CSS Typed OM 是一个包含类型和方法的 CSS 对象、并且暴露出了作为 JavaScript 对象的值。比起先前基于字符串的，对  <code><a href="/zh-CN/docs/Web/API/HTMLElement/style">HTMLElement.style</a></code> 进行操作的方案，对 JavaScript 对象进行操作更符合直觉。每个元素和样式表规则都拥有一个样式对应表，该对应表可以通过  <code><a href="/zh-CN/docs/Web/API/StylePropertyMap">StylePropertyMap</a></code> 来获得。</p>
+
+<p>一个 CSS Houdini 的特性就是  <a href="/zh-CN/docs/Web/API/Worklet">Worklet</a>。在它的帮助下，你可以通过引入一行 JavaScript 代码来引入配置化的组件，从而创建模块式的 CSS。不依赖任何前置处理器、后置处理器或者 JavaScript 框架。</p>
+
+<pre class="brush: js notranslate">&lt;script&gt;
+  CSS.paintWorklet.addModule('csscomponent.js');
+&lt;/script&gt;
+</pre>
+
+<p>以上添加进的模块包含一个  <code><a href="/zh-CN/docs/Web/API/PaintWorklet/registerPaint">registerPaint()</a></code>函数，这个模块是完全通过可配置的 worklets 来注册的。</p>
+
+<p>这个 CSS  <code>paint()</code>  函数的参数包括 worklet 的名字，以及其他可选的参数。worklet 同时能够访问元素的自定义属性：它们不需要作为函数参数传递。</p>
+
+<pre class="brush: css line-numbers language-css notranslate"><code class="language-css"><span class="selector token">li</span> <span class="punctuation token">{</span>
+	<span class="property token">background-image</span><span class="punctuation token">:</span> <span class="function token">paint</span><span class="punctuation token">(myComponent</span><span class="punctuation token">,</span> stroke<span class="punctuation token">,</span> <span class="number token">10</span><span class="token unit">px</span><span class="punctuation token">)</span><span class="punctuation token">;
+    --hilights: blue;
+    --lowlights: green;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<div class="blockIndicator note">
+<p><strong>提醒</strong>: 能力越大，责任越大！在 Houdini 的帮助下你能够在 css 中实现你自己的布局、栅格、或者区域特性，但是这么做并不是最佳实践。CSS 工作组已经做了许多努力来确保 CSS 中的每一项特性都能正常运行，覆盖各种边界情况，同时考虑到了安全、隐私，以及可用性方面的表现。如果你要深入使用 Houdini，确保你也把以上这些事项考虑在内！并且先从小处开始，再把你的自定义 Houdini 推向一个富有雄心的项目。</p>
+</div>
+
+<h2 class="Documentation" id="Houdini_APIs">Houdini APIs</h2>
+
+<p>在下面，你能够找到一些链接。这些链接指向 Houdini 范围下的 API 的主列表页面，同时链接到一些指导页来帮助你，如果你需要指导如何去使用这些API。</p>
+
+<div class="hidden">
+<p>你可以通过读下面这篇文章开始你的学习： <a href="https://developer.mozilla.org/en-US/docs/Web/Houdini/learn">Houdini, an introduction</a> — 这篇文章包含了关于 Houdini 的简单历史，以及关于 Houdini 的许多特性的概览。</p>
+</div>
+
+<dl>
+ <dt>CSS Parser API</dt>
+ <dd>这是一个更直接地暴露出 CSS 解析器的 API，能够把任意 CSS 类语言解析成为一种中间类型。</dd>
+ <dd>目前还没有该 API 的教程或参考。</dd>
+ <dt>CSS Properties and Values API </dt>
+ <dd>定义了一个用来注册新的 CSS 属性的 API。通过该 API 注册的属性必须用一种特定的解析语法书写，以定义其类型、继承行为以及初始值。<br>
+ <br>
+ <a href="/en-US/docs/Web/API/CSS_Properties_and_Values_API">CSS Properties and Values API reference</a><br>
+ <a href="/en-US/docs/Web/API/CSS_Properties_and_Values_API/guide">CSS Properties and Values API guide</a></dd>
+ <dt></dt>
+ <dt>CSS Typed OM</dt>
+ <dd>该 API 将 CSSOM 字符串转化为有类型意义的 JavaScript。这将对后续的一个重要的表现打下基础。CSS Typed OM 将 CSS 值以类型化处理的 JavaScript 对象的形式暴露出来，以使其表现可以被控制。<br>
+ <br>
+ <a href="/en-US/docs/Web/API/CSS_Typed_OM_API">CSS Typed OM reference</a><br>
+ <a href="/en-US/docs/Web/API/CSS_Typed_OM_API/Guide">CSS Typed OM guide</a></dd>
+ <dt>CSS Layout API </dt>
+ <dd>
+ <p>作为一个被设计来提升 CSS 扩展性的 API，该 API 能够让开发者去书写他们自己的布局算法，比如 masonry 或者 line snapping。该 API 目前还没有原生支持。</p>
+
+ <p>目前还没有该 API 的教程或参考。</p>
+ </dd>
+ <dt>CSS Painting API</dt>
+ <dd>
+ <p>作为一个被设计来提升 CSS 扩展性的 API，该 API 允许开发者通过 <code>paint()</code> 方法书写 JavaScript 函数，以控制绘制元素的背景、边框或者内容区域。<br>
+  <br>
+  <a href="/en-US/docs/Web/API/CSS_Painting_API">CSS Painting API reference</a><br>
+  <a href="/en-US/docs/Web/API/CSS_Painting_API/Guide">CSS Painting API guide </a></p>
+ </dd>
+ <dt>Worklets </dt>
+ <dd>
+ <p>该 API 允许脚本独立于 JavaScript 执行环境，运行在渲染流程的各个阶段。Worklets 在概念上很接近于 <a href="/en-US/docs/Web/API/Web_Workers_API/Using_web_workers">Web Workers</a> ，它由渲染引擎调用，并扩展了渲染引擎。<br>
+  <br>
+  <a href="/en-US/docs/Web/API/Worklet">Worklets reference</a></p>
+ </dd>
+</dl>
+
+<h2 id="其他">其他</h2>
+
+<p>以下主题你可能会感兴趣，它们可能在你使用 Houdini API 的时候起一些有趣的作用。</p>
+
+<dl>
+ <dt>Composite Scrolling and Animation </dt>
+</dl>
diff --git a/files/zh-cn/web/houdini/index.html b/files/zh-cn/web/houdini/index.html
deleted file mode 100644
index 68259ebd34..0000000000
--- a/files/zh-cn/web/houdini/index.html
+++ /dev/null
@@ -1,90 +0,0 @@
----
-title: CSS Houdini
-slug: Web/Houdini
-tags:
-  - API
-  - CSS
-  - Houdini
-  - Web
-translation_of: Web/Houdini
----
-<p>Houdini是一组底层API，它们公开了CSS引擎的各个部分，从而使开发人员能够通过加入浏览器渲染引擎的样式和布局过程来扩展CSS。 Houdini是一组API，它们使开发人员可以直接访问<a href="/en-US/docs/Web/API/CSS_Object_Model">CSS 对象模型</a> （CSSOM），使开发人员可以编写浏览器可以解析为CSS的代码，从而创建新的CSS功能，而无需等待它们在浏览器中本地实现。</p>
-
-<h2 id="Houdini_的优点">Houdini 的优点</h2>
-
-<p>当样式改变时Houdini相比JavaScript<a href="/zh-CN/docs/Web/API/ElementCSSInlineStyle/style">.style</a> 的方式能够能够更快的解析。  浏览器在应用脚本中发现的任何样式更新之前，会对CSSOM进行解析--包括布局、绘制和合成过程。此外，对于JavaScript样式更新，布局、绘制和复合过程也会重复进行。Houdini代码不会等待第一个渲染周期完成。相反，它被包含在第一个周期中--创建可渲染的、可理解的样式。Houdini为在JavaScript中使用CSS值提供了一个基于对象的API。</p>
-
-<p>Houdini 的 CSS Typed OM 是一个包含类型和方法的 CSS 对象、并且暴露出了作为 JavaScript 对象的值。比起先前基于字符串的，对  <code><a href="/zh-CN/docs/Web/API/HTMLElement/style">HTMLElement.style</a></code> 进行操作的方案，对 JavaScript 对象进行操作更符合直觉。每个元素和样式表规则都拥有一个样式对应表，该对应表可以通过  <code><a href="/zh-CN/docs/Web/API/StylePropertyMap">StylePropertyMap</a></code> 来获得。</p>
-
-<p>一个 CSS Houdini 的特性就是  <a href="/zh-CN/docs/Web/API/Worklet">Worklet</a>。在它的帮助下，你可以通过引入一行 JavaScript 代码来引入配置化的组件，从而创建模块式的 CSS。不依赖任何前置处理器、后置处理器或者 JavaScript 框架。</p>
-
-<pre class="brush: js notranslate">&lt;script&gt;
-  CSS.paintWorklet.addModule('csscomponent.js');
-&lt;/script&gt;
-</pre>
-
-<p>以上添加进的模块包含一个  <code><a href="/zh-CN/docs/Web/API/PaintWorklet/registerPaint">registerPaint()</a></code>函数，这个模块是完全通过可配置的 worklets 来注册的。</p>
-
-<p>这个 CSS  <code>paint()</code>  函数的参数包括 worklet 的名字，以及其他可选的参数。worklet 同时能够访问元素的自定义属性：它们不需要作为函数参数传递。</p>
-
-<pre class="brush: css line-numbers language-css notranslate"><code class="language-css"><span class="selector token">li</span> <span class="punctuation token">{</span>
-	<span class="property token">background-image</span><span class="punctuation token">:</span> <span class="function token">paint</span><span class="punctuation token">(myComponent</span><span class="punctuation token">,</span> stroke<span class="punctuation token">,</span> <span class="number token">10</span><span class="token unit">px</span><span class="punctuation token">)</span><span class="punctuation token">;
-    --hilights: blue;
-    --lowlights: green;</span>
-<span class="punctuation token">}</span></code></pre>
-
-<div class="blockIndicator note">
-<p><strong>提醒</strong>: 能力越大，责任越大！在 Houdini 的帮助下你能够在 css 中实现你自己的布局、栅格、或者区域特性，但是这么做并不是最佳实践。CSS 工作组已经做了许多努力来确保 CSS 中的每一项特性都能正常运行，覆盖各种边界情况，同时考虑到了安全、隐私，以及可用性方面的表现。如果你要深入使用 Houdini，确保你也把以上这些事项考虑在内！并且先从小处开始，再把你的自定义 Houdini 推向一个富有雄心的项目。</p>
-</div>
-
-<h2 class="Documentation" id="Houdini_APIs">Houdini APIs</h2>
-
-<p>在下面，你能够找到一些链接。这些链接指向 Houdini 范围下的 API 的主列表页面，同时链接到一些指导页来帮助你，如果你需要指导如何去使用这些API。</p>
-
-<div class="hidden">
-<p>你可以通过读下面这篇文章开始你的学习： <a href="https://developer.mozilla.org/en-US/docs/Web/Houdini/learn">Houdini, an introduction</a> — 这篇文章包含了关于 Houdini 的简单历史，以及关于 Houdini 的许多特性的概览。</p>
-</div>
-
-<dl>
- <dt>CSS Parser API</dt>
- <dd>这是一个更直接地暴露出 CSS 解析器的 API，能够把任意 CSS 类语言解析成为一种中间类型。</dd>
- <dd>目前还没有该 API 的教程或参考。</dd>
- <dt>CSS Properties and Values API </dt>
- <dd>定义了一个用来注册新的 CSS 属性的 API。通过该 API 注册的属性必须用一种特定的解析语法书写，以定义其类型、继承行为以及初始值。<br>
- <br>
- <a href="/en-US/docs/Web/API/CSS_Properties_and_Values_API">CSS Properties and Values API reference</a><br>
- <a href="/en-US/docs/Web/API/CSS_Properties_and_Values_API/guide">CSS Properties and Values API guide</a></dd>
- <dt></dt>
- <dt>CSS Typed OM</dt>
- <dd>该 API 将 CSSOM 字符串转化为有类型意义的 JavaScript。这将对后续的一个重要的表现打下基础。CSS Typed OM 将 CSS 值以类型化处理的 JavaScript 对象的形式暴露出来，以使其表现可以被控制。<br>
- <br>
- <a href="/en-US/docs/Web/API/CSS_Typed_OM_API">CSS Typed OM reference</a><br>
- <a href="/en-US/docs/Web/API/CSS_Typed_OM_API/Guide">CSS Typed OM guide</a></dd>
- <dt>CSS Layout API </dt>
- <dd>
- <p>作为一个被设计来提升 CSS 扩展性的 API，该 API 能够让开发者去书写他们自己的布局算法，比如 masonry 或者 line snapping。该 API 目前还没有原生支持。</p>
-
- <p>目前还没有该 API 的教程或参考。</p>
- </dd>
- <dt>CSS Painting API</dt>
- <dd>
- <p>作为一个被设计来提升 CSS 扩展性的 API，该 API 允许开发者通过 <code>paint()</code> 方法书写 JavaScript 函数，以控制绘制元素的背景、边框或者内容区域。<br>
-  <br>
-  <a href="/en-US/docs/Web/API/CSS_Painting_API">CSS Painting API reference</a><br>
-  <a href="/en-US/docs/Web/API/CSS_Painting_API/Guide">CSS Painting API guide </a></p>
- </dd>
- <dt>Worklets </dt>
- <dd>
- <p>该 API 允许脚本独立于 JavaScript 执行环境，运行在渲染流程的各个阶段。Worklets 在概念上很接近于 <a href="/en-US/docs/Web/API/Web_Workers_API/Using_web_workers">Web Workers</a> ，它由渲染引擎调用，并扩展了渲染引擎。<br>
-  <br>
-  <a href="/en-US/docs/Web/API/Worklet">Worklets reference</a></p>
- </dd>
-</dl>
-
-<h2 id="其他">其他</h2>
-
-<p>以下主题你可能会感兴趣，它们可能在你使用 Houdini API 的时候起一些有趣的作用。</p>
-
-<dl>
- <dt>Composite Scrolling and Animation </dt>
-</dl>
diff --git a/files/zh-cn/web/http/methods/index.html b/files/zh-cn/web/http/methods/index.html
index 6f926a633d..036f553cf5 100644
--- a/files/zh-cn/web/http/methods/index.html
+++ b/files/zh-cn/web/http/methods/index.html
@@ -14,15 +14,15 @@ translation_of: Web/HTTP/Methods
 ---
 <p>{{HTTPSidebar}}</p>
 
-<p>HTTP 定义了一组<strong>请求方法</strong>, 以表明要对给定资源执行的操作。指示针对给定资源要执行的期望动作. 虽然他们也可以是名词, 但这些请求方法有时被称为HTTP动词. 每一个请求方法都实现了不同的语义, 但一些共同的特征由一组共享：: 例如一个请求方法可以是 {{glossary("safe")}}, {{glossary("idempotent")}}, 或 {{glossary("cacheable")}}.</p>
+<p>HTTP 定义了一组<strong>请求方法</strong>，以表明要对给定资源执行的操作。指示针对给定资源要执行的期望动作。虽然他们也可以是名词, 但这些请求方法有时被称为HTTP动词。每一个请求方法都实现了不同的语义，但一些共同的特征由一组共享：例如一个请求方法可以是 {{glossary("safe")}}, {{glossary("idempotent")}}, 或 {{glossary("cacheable")}}。</p>
 
 <dl>
  <dt><code><a href="/en-US/docs/Web/HTTP/Methods/GET">GET</a></code></dt>
- <dd>GET方法请求一个指定资源的表示形式. 使用GET的请求应该只被用于获取数据.</dd>
+ <dd>GET方法请求一个指定资源的表示形式，使用GET的请求应该只被用于获取数据。</dd>
  <dt><code><a href="/en-US/docs/Web/HTTP/Methods/HEAD">HEAD</a></code></dt>
- <dd>HEAD方法请求一个与GET请求的响应相同的响应，但没有响应体.</dd>
+ <dd>HEAD方法请求一个与GET请求的响应相同的响应，但没有响应体。</dd>
  <dt><code><a href="/en-US/docs/Web/HTTP/Methods/POST">POST</a></code></dt>
- <dd>POST方法用于将实体提交到指定的资源，通常导致在服务器上的状态变化或副作用. </dd>
+ <dd>POST方法用于将实体提交到指定的资源，通常导致在服务器上的状态变化或副作用。</dd>
  <dt><code><a href="/en-US/docs/Web/HTTP/Methods/PUT">PUT</a></code></dt>
  <dd>PUT方法用请求有效载荷替换目标资源的所有当前表示。</dd>
  <dt><code><a href="/en-US/docs/Web/HTTP/Methods/DELETE">DELETE</a></code></dt>
diff --git a/files/zh-cn/web/javascript/guide/grammar_and_types/index.html b/files/zh-cn/web/javascript/guide/grammar_and_types/index.html
index 0ea7538a96..8b00401fcc 100644
--- a/files/zh-cn/web/javascript/guide/grammar_and_types/index.html
+++ b/files/zh-cn/web/javascript/guide/grammar_and_types/index.html
@@ -447,8 +447,8 @@ console.log(a[0]); // 3</pre>
 
 <pre class="brush: js notranslate">3.14
 -.2345789 // -0.23456789
--3.12e+12  // -3.12*10<sup>12</sup>
-.1e-23    // 0.1*10<sup>-23</sup>=10<sup>-24</sup>=1e-24
+-3.12e+12  // -3.12*10^12
+.1e-23    // 0.1*10^(-23)=10^(-24)=1e-24
 </pre>
 
 <h3 id="对象字面量_Object_literals">对象字面量 (Object literals)</h3>
diff --git a/files/zh-cn/web/javascript/guide/text_formatting/index.html b/files/zh-cn/web/javascript/guide/text_formatting/index.html
index 522b3ed362..eac38b4502 100644
--- a/files/zh-cn/web/javascript/guide/text_formatting/index.html
+++ b/files/zh-cn/web/javascript/guide/text_formatting/index.html
@@ -62,7 +62,7 @@ typeof foo; // 返回 'object'</pre>
 <pre class="brush: js notranslate">const firstString = '2 + 2'; //创建一个字符串字面量
 const secondString = new String('2 + 2'); // 创建一个字符串对象
 eval(firstString); // 返回数字 4
-eval(secondString); // 返回字符串 "2 + 2"</pre>
+eval(secondString); // 返回包含 "2 + 2" 的字符串对象</pre>
 
 <p><code>String</code> 对象有一个属性 <code>length</code>，标识了字符串中 UTF-16 的码点个数。举例，下面的代码把 13 赋值给了<code>helloLength</code>，因为 "Hello, World!" 包含 13 个字符，每个字符用一个 UTF-16 码点表示。你可以通过数组的方式访问每一个码点，但你不能修改每个字符，因为字符串是不变的类数组对象： </p>
 
diff --git a/files/zh-cn/web/javascript/reference/global_objects/array/array/index.md b/files/zh-cn/web/javascript/reference/global_objects/array/array/index.md
new file mode 100644
index 0000000000..708d629c23
--- /dev/null
+++ b/files/zh-cn/web/javascript/reference/global_objects/array/array/index.md
@@ -0,0 +1,81 @@
+---
+title: Array() 构造器
+slug: Web/JavaScript/Reference/Global_Objects/Array/Array
+tags:
+  - 数组
+  - 构造器
+  - JavaScript
+  - 参考手册
+browser-compat: javascript.builtins.Array.Array
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/Array
+---
+{{JSRef}}
+
+**`Array()`** 构造器用于创建 {{jsxref("Array")}} 对象。
+
+## 语法
+
+```js
+// literal constructor
+[element0, element1, ..., elementN]
+
+// construct from elements
+new Array(element0, element1, ..., elementN)
+
+// construct from array length
+new Array(arrayLength)
+```
+
+### 参数
+
+- `elementN`
+  - : `Array` 构造器会根据给定的元素创建一个 JavaScript 数组，但是当仅有一个参数且为数字时除外（详见下面的 `arrayLength` 参数）。注意，后者仅适用于用 Array 构造器创建数组，而不适用于用方括号创建的数组字面量。
+- `arrayLength`
+  - : 一个范围在 0 到 2^32 - 1 之间的整数，此时将返回一个 `length` 的值等于 `arrayLength` 的数组对象（言外之意就是该数组此时并没有包含任何实际的元素，不能理所当然地认为它包含 `arrayLength` 个值为 undefined 的元素）。如果传入的参数不是有效值，则会抛出 {{jsxref("RangeError")}} 异常
+
+## 示例
+
+### 数组字面量
+
+可以通过使用 [数组字面量](/zn-CN/docs/Web/JavaScript/Reference/Lexical_grammar#Array_literals) 创建数组
+
+```js
+let fruits = ['Apple', 'Banana'];
+
+console.log(fruits.length); // 2
+console.log(fruits[0]);     // "Apple"
+```
+
+### 单个参数的 Array 构造器
+
+可以通过单个数字参数的构造器创建数组，数组的长度为传入的参数，该数组不包含任何实际的元素
+
+```js
+let fruits = new Array(2);
+
+console.log(fruits.length); // 2
+console.log(fruits[0]);     // undefined
+```
+
+### 多个参数的 Array 构造器
+
+如果向构造器传入多个参数，则会创建一个包含所有传入参数的新数组
+
+```js
+let fruits = new Array('Apple', 'Banana');
+
+console.log(fruits.length); // 2
+console.log(fruits[0]);     // "Apple"
+```
+
+## 规范
+
+{{Specifications}}
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 相关链接
+
+- {{jsxref("Array")}} class
diff --git a/files/zh-cn/web/javascript/reference/global_objects/array/index.html b/files/zh-cn/web/javascript/reference/global_objects/array/index.html
deleted file mode 100644
index 3b16a483c8..0000000000
--- a/files/zh-cn/web/javascript/reference/global_objects/array/index.html
+++ /dev/null
@@ -1,443 +0,0 @@
----
-title: Array
-slug: Web/JavaScript/Reference/Global_Objects/Array
-tags:
-  - JavaScript
-  - 二维数组
-  - 全局对象
-  - 参考手册
-  - 数组
-translation_of: Web/JavaScript/Reference/Global_Objects/Array
----
-<div>{{JSRef}}</div>
-
-<div></div>
-
-<p>JavaScript的 <code><strong>Array</strong></code> 对象是用于构造数组的全局对象，数组是类似于列表的高阶对象。</p>
-
-<p><strong>创建数组</strong></p>
-
-<pre class="brush: js">var fruits = ['Apple', 'Banana'];
-
-console.log(fruits.length);
-// 2
-</pre>
-
-<p><strong>通过索引访问数组元素</strong></p>
-
-<pre class="brush: js">var first = fruits[0];
-// Apple
-
-var last = fruits[fruits.length - 1];
-// Banana</pre>
-
-<p><strong>遍历数组</strong></p>
-
-<pre class="brush: js">fruits.forEach(function (item, index, array) {
-    console.log(item, index);
-});
-// Apple 0
-// Banana 1</pre>
-
-<p><strong>添加元素到数组的末尾</strong></p>
-
-<pre class="brush: js">var newLength = fruits.push('Orange');
-// newLength:3; fruits: ["Apple", "Banana", "Orange"]</pre>
-
-<p><strong>删除数组末尾的元素</strong></p>
-
-<pre class="brush: js">var last = fruits.pop(); // remove Orange (from the end)
-// last: "Orange"; fruits: ["Apple", "Banana"];</pre>
-
-<p><strong>删除数组最前面（头部）的元素</strong></p>
-
-<pre class="brush: js">var first = fruits.shift(); // remove Apple from the front
-// first: "Apple"; fruits: ["Banana"];</pre>
-
-<p><strong>添加元素到数组的头部</strong></p>
-
-<pre class="brush: js">var newLength = fruits.unshift('Strawberry') // add to the front
-// ["Strawberry", "Banana"];
-</pre>
-
-<p><strong>找出某个元素在数组中的索引</strong></p>
-
-<pre class="brush: js">fruits.push('Mango');
-// ["Strawberry", "Banana", "Mango"]
-
-var pos = fruits.indexOf('Banana');
-// 1</pre>
-
-<p><strong>通过索引删除某个元素</strong></p>
-
-<pre class="brush: js">var removedItem = fruits.splice(pos, 1); // this is how to remove an item
-
-// ["Strawberry", "Mango"]</pre>
-
-<p><strong>从一个索引位置删除多个元素</strong></p>
-
-<pre class="brush: js">var vegetables = ['Cabbage', 'Turnip', 'Radish', 'Carrot'];
-console.log(vegetables);
-// ["Cabbage", "Turnip", "Radish", "Carrot"]
-
-var pos = 1, n = 2;
-
-var removedItems = vegetables.splice(pos, n);
-// this is how to remove items, n defines the number of items to be removed,
-// from that position(pos) onward to the end of array.
-
-console.log(vegetables);
-// ["Cabbage", "Carrot"] (the original array is changed)
-
-console.log(removedItems);
-// ["Turnip", "Radish"]</pre>
-
-<p><strong>复制一个数组</strong></p>
-
-<pre class="brush: js">var shallowCopy = fruits.slice(); // this is how to make a copy
-// ["Strawberry", "Mango"]</pre>
-
-<h2 id="语法">语法</h2>
-
-<pre class="syntaxbox">[<var>element0</var>, <var>element1</var>, ..., <var>elementN</var>]
-new Array(<var>element0</var>, <var>element1</var>[, ...[, <var>elementN</var>]])
-new Array(<var>arrayLength</var>)
-</pre>
-
-<dl>
- <dt>
- <h3 id="参数">参数</h3>
- </dt>
- <dt><code>elementN</code></dt>
- <dd><code>Array</code> 构造器会根据给定的元素创建一个 JavaScript 数组，但是当仅有一个参数且为数字时除外（详见下面的 <code>arrayLength</code> 参数）。注意，后面这种情况仅适用于用 <code>Array</code> 构造器创建数组，而不适用于用方括号创建的数组字面量。</dd>
- <dt><code>arrayLength</code></dt>
- <dd>一个范围在 0 到 2<sup>32</sup>-1 之间的整数，此时将返回一个 <code>length</code> 的值等于 <code>arrayLength</code> 的数组对象（言外之意就是该数组此时并没有包含任何实际的元素，不能理所当然地认为它包含 <code>arrayLength</code> 个值为 <code>undefined</code> 的元素）。如果传入的参数不是有效值，则会抛出 {{jsxref("RangeError")}} 异常。</dd>
-</dl>
-
-<h2 id="描述">描述</h2>
-
-<p>数组是一种类列表对象，它的原型中提供了遍历和修改元素的相关操作。JavaScript 数组的长度和元素类型都是非固定的。因为数组的长度可随时改变，并且其数据在内存中也可以不连续，所以 JavaScript 数组不一定是密集型的，这取决于它的使用方式。一般来说，数组的这些特性会给使用带来方便，但如果这些特性不适用于你的特定使用场景的话，可以考虑使用类型数组 {{jsxref("TypedArray")}}。</p>
-
-<p>只能用整数作为数组元素的索引，而不能用字符串。后者称为<a href="https://en.wikipedia.org/wiki/Associative_array">关联数组</a>。使用非整数并通过<a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Working_with_Objects#Objects_and_properties">方括号</a>或<a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Property_Accessors">点号</a>来访问或设置数组元素时，所操作的并不是数组列表中的元素，而是数组对象的<a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Data_structures#Properties">属性集合</a>上的变量。数组对象的属性和数组元素列表是分开存储的，并且数组的遍历和修改操作也不能作用于这些命名属性。</p>
-
-<h3 id="访问数组元素">访问数组元素</h3>
-
-<p>JavaScript 数组的索引是从0开始的，第一个元素的索引为0，最后一个元素的索引等于该数组的长度减1。如果指定的索引是一个无效值，JavaScript 数组并不会报错，而是会返回 <code>undefined</code>。</p>
-
-<pre class="brush: js  language-js">var arr = ['this is the first element', 'this is the second element', 'this is the last element'];
-console.log(arr[0]);              // 打印 'this is the first element'
-console.log(arr[1]);              // 打印 'this is the second element'
-console.log(arr[arr.length - 1]); // 打印 'this is the last element'
-</pre>
-
-<p>虽然数组元素可以看做是数组对象的属性，就像 <code>toString</code> 一样，但是下面的写法是错误的，运行时会抛出 <code>SyntaxError</code> 异常，而原因则是使用了非法的属性名：</p>
-
-<pre class="brush: js  language-js">console.log(arr.0); // a syntax error
-</pre>
-<p>并不是 JavaScript 数组有什么特殊之处，而是因为在 JavaScript 中，以数字开头的属性不能用点号引用，必须用方括号。比如，如果一个对象有一个名为 <code>3d</code> 的属性，那么只能用方括号来引用它。下面是具体的例子：</p>
-
-<pre class="brush: js  language-js">var years = [1950, 1960, 1970, 1980, 1990, 2000, 2010];
-console.log(years.0);   // 语法错误
-console.log(years[0]);  // √
-</pre>
-<pre class="brush: js  language-js">renderer.3d.setTexture(model, 'character.png');     // 语法错误
-renderer['3d'].setTexture(model, 'character.png');  // √
-</pre>
-
-<p>注意在 <code>3d</code> 那个例子中，引号是必须的。你也可以将数组的索引用引号引起来，比如 <code>years[2]</code> 可以写成 <code>years['2']</code>。 <code>years[2]</code> 中的 2 会被 JavaScript 解释器通过调用 <code>toString</code> 隐式转换成字符串。正因为这样，<code>'2'</code> 和 <code>'02'</code> 在 <code>years</code> 中所引用的可能是不同位置上的元素。而下面这个例子也可能会打印 <code>true</code>：</p>
-
-<pre class="brush: js  language-js">console.log(years['2'] != years['02']);
-</pre>
-<p>类似地，如果对象的属性名称是保留字（最好不要这么做！），那么就只能通过字符串的形式用方括号来访问（从 firefox 40.0a2 开始也支持用点号访问了）：</p>
-
-<pre class="brush: js  language-js">var promise = {
-  'var'  : 'text',
-  'array': [1, 2, 3, 4]
-};
-
-console.log(promise['var']);
-</pre>
-
-<h3 id="length_和数字下标之间的关系">length 和数字下标之间的关系</h3>
-
-<p>JavaScript 数组的 {{jsxref("Array.length", "length")}} 属性和其数字下标之间有着紧密的联系。数组内置的几个方法（例如 {{jsxref("Array.join", "join")}}、{{jsxref("Array.slice", "slice")}}、{{jsxref("Array.indexOf", "indexOf")}} 等）都会考虑 {{jsxref("Array.length", "length")}} 的值。另外还有一些方法（例如 {{jsxref("Array.push", "push")}}、{{jsxref("Array.splice", "splice")}} 等）还会改变 {{jsxref("Array.length", "length")}} 的值。</p>
-
-<pre class="brush: js  language-js">var fruits = [];
-fruits.push('banana', 'apple', 'peach');
-
-console.log(fruits.length); // 3
-</pre>
-
-<p>使用一个合法的下标为数组元素赋值，并且该下标超出了当前数组的大小的时候，解释器会同时修改 {{jsxref("Array.length", "length")}} 的值：</p>
-
-<pre class="brush: js  language-js">fruits[5] = 'mango';
-console.log(fruits[5]); // 'mango'
-console.log(Object.keys(fruits));  // ['0', '1', '2', '5']
-console.log(fruits.length); // 6
-</pre>
-
-<p>也可以显式地给 {{jsxref("Array.length", "length")}} 赋一个更大的值：</p>
-
-<pre class="brush: js  language-js">fruits.length = 10;
-console.log(Object.keys(fruits)); // ['0', '1', '2', '5']
-console.log(fruits.length); // 10
-</pre>
-<p>而为 {{jsxref("Array.length", "length")}} 赋一个更小的值则会删掉一部分元素：</p>
-
-<pre class="brush: js  language-js">fruits.length = 2;
-console.log(Object.keys(fruits)); // ['0', '1']
-console.log(fruits.length); // 2</pre>
-
-<p>这一节的内容在 {{jsxref("Array.length")}} 中有更详细的介绍。</p>
-<h3 id="正则匹配结果所返回的数组">正则匹配结果所返回的数组</h3>
-
-<p>使用正则表达式匹配字符串可以得到一个数组。这个数组中包含本次匹配的相关信息和匹配结果。{{jsxref("RegExp.exec")}}、{{jsxref("String.match")}}、{{jsxref("String.replace")}} 都会返回这样的数组。看下面的例子和例子下面的表格：</p>
-
-<pre class="brush: js">// 匹配1个 d 后面紧跟着至少1个 b，再后面又跟着1个 d 的子串，
-// 并且需要记住子串中匹配到的 b 和最后的 d （通过正则表达式中的分组），
-// 同时在匹配时忽略大小写
-
-myRe = /d(b+)(d)/i;
-myArray = myRe.exec("cdbBdbsbz");
-</pre>
-
-<p>该正则匹配返回的数组包含以下属性和元素：</p>
-
-<table class="fullwidth-table">
- <tbody>
-  <tr>
-   <td class="header">属性/元素</td>
-   <td class="header">说明</td>
-   <td class="header">示例</td>
-  </tr>
-  <tr>
-   <td><code>input</code></td>
-   <td>只读属性，原始字符串</td>
-   <td>cdbBdbsbz</td>
-  </tr>
-  <tr>
-   <td><code>index</code></td>
-   <td>只读属性，匹配到的子串在原始字符串中的索引</td>
-   <td>1</td>
-  </tr>
-  <tr>
-   <td><code>[0]</code></td>
-   <td>只读元素，本次匹配到的子串</td>
-   <td>dbBd</td>
-  </tr>
-  <tr>
-   <td><code>[1], ...[n]</code></td>
-   <td>只读元素，正则表达式中所指定的分组所匹配到的子串，其数量由正则中的分组数量决定，无最大上限</td>
-   <td>[1]: bB<br>
-    [2]: d</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="属性">属性</h2>
-
-<div><code>Array.length</code></div>
-
-<dl>
- <dd><code>Array</code> 构造函数的 length 属性，其值为1（注意该属性为静态属性，不是数组实例的 length 属性）。</dd>
- <dt>{{jsxref("Array.@@species", "get Array[@@species]")}}</dt>
- <dd>返回 <code>Array</code> 构造函数。</dd>
- <dt>{{jsxref("Array.prototype")}}</dt>
- <dd>通过数组的原型对象可以为所有数组对象添加属性。</dd>
-</dl>
-
-<h2 id="方法">方法</h2>
-
-<dl>
- <dt>{{jsxref("Array.from()")}}</dt>
- <dd>从类数组对象或者可迭代对象中创建一个新的数组实例。</dd>
- <dt>{{jsxref("Array.isArray()")}}</dt>
- <dd>用来判断某个变量是否是一个数组对象。</dd>
- <dt>{{jsxref("Array.of()")}}</dt>
- <dd>根据一组参数来创建新的数组实例，支持任意的参数数量和类型。</dd>
-</dl>
-
-<h2 id="数组实例"><font face="Consolas, Liberation Mono, Courier, monospace">数组实例</font></h2>
-
-<p>所有数组实例都会从 {{jsxref("Array.prototype")}} 继承属性和方法。修改 <code>Array</code> 的原型会影响到所有的数组实例。</p>
-
-<h3 id="属性_2">属性</h3>
-
-<div>{{page('/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/prototype', 'Properties')}}</div>
-
-<h3 id="方法_2">方法</h3>
-
-<h4 id="修改器方法">修改器方法</h4>
-
-<p>{{page('zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/prototype', 'Mutator_methods')}}</p>
-
-<h4 id="访问方法">访问方法</h4>
-
-<p>{{page('zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/prototype', 'Accessor_methods')}}</p>
-
-<h4 id="迭代方法">迭代方法</h4>
-
-<p>{{page('zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/prototype', 'Iteration_methods')}}</p>
-
-<h2 id="数组泛型方法">数组泛型方法</h2>
-
-<div class="warning">
-<p><strong>泛型方法是非标准，并且已弃用，有可能不久就会移除。</strong> 需注意的是此方法同时有跨浏览器问题. 但是 <a href="https://github.com/plusdude/array-generics">Github上有可用的shim</a>。</p>
-</div>
-
-<p>有时我们会希望在字符串或其他类数组对象上使用数组所提供的方法（如函数的 {{jsxref("Functions/arguments", "arguments", "", 1)}}）。此时你可以把一个字符串作为一个字符数组来看待（也就是说，把非数组以某种方式看成是一个数组）。比如，可以用下面的方法来检查变量 <code>str</code> 中的字符是否都是字母：</p>
-
-<pre class="brush: js">function isLetter(character) {
-  return character &gt;= 'a' &amp;&amp; character &lt;= 'z';
-}
-
-if (Array.prototype.every.call(str, isLetter)) {
-  console.log("The string '" + str + "' contains only letters!");
-}</pre>
-
-<p>这种方法能够行得通，但不够简洁，JavaScript 1.6 中引入了一个泛型化的简写形式：</p>
-
-<pre class="brush: js">if (Array.every(str, isLetter)) {
-  console.log("The string '" + str + "' contains only letters!");
-}</pre>
-
-<p>{{jsxref("Global_Objects/String", "String")}} 对象也包含一些泛型方法，见： {{jsxref("Global_Objects/String", "Generics", "#String_generic_methods", 1)}}。</p>
-
-<p>注意，这些并不属于 ECMAScript 标准，也不能在非 Gecko 浏览器中使用。你可以用标准方法 {{jsxref("Array.from()")}} 来替代上面的写法， <code>from</code> 方法可以将一个对象转换为真正的数组（虽然老的浏览器可能不支持）：</p>
-
-<pre class="brush: js"><code>if (Array.from(str).every(isLetter)) {
-  console.log("The string '" + str + "' contains only letters!");
-}</code></pre>
-
-<h2 id="示例">示例</h2>
-
-<h3 id="创建数组">创建数组</h3>
-
-<p>下面这个例子创建了一个长度为 0 的数组 <code>msgArray</code>，然后给 <code>msgArray[0]</code> 和 <code>msgArray[99]</code> 赋值，从而导致数组长度变为了 100。</p>
-
-<pre class="brush: js">var msgArray = [];
-msgArray[0] = 'Hello';
-msgArray[99] = 'world';
-
-if (msgArray.length === 100) {
-  console.log('The length is 100.');
-}</pre>
-
-<h3 id="创建二维数组">创建二维数组</h3>
-
-<p>下面的例子创建了一个代表国际象棋棋盘的二维数组，然后将 (6, 4) 上的 Pawn （卒）拷贝到 (4, 4) 位置，而原本 (6, 4) 位置则被设置为空格。</p>
-
-<pre class="brush: js">var board = [
-  ['R','N','B','Q','K','B','N','R'],
-  ['P','P','P','P','P','P','P','P'],
-  [' ',' ',' ',' ',' ',' ',' ',' '],
-  [' ',' ',' ',' ',' ',' ',' ',' '],
-  [' ',' ',' ',' ',' ',' ',' ',' '],
-  [' ',' ',' ',' ',' ',' ',' ',' '],
-  ['p','p','p','p','p','p','p','p'],
-  ['r','n','b','q','k','b','n','r'] ];
-
-console.log(board.join('\n') + '\n\n');
-
-// Move King's Pawn forward 2
-board[4][4] = board[6][4];
-board[6][4] = ' ';
-console.log(board.join('\n'));
-</pre>
-
-<p>下面是输出：</p>
-
-<pre class="brush: js">R,N,B,Q,K,B,N,R
-P,P,P,P,P,P,P,P
- , , , , , , ,
- , , , , , , ,
- , , , , , , ,
- , , , , , , ,
-p,p,p,p,p,p,p,p
-r,n,b,q,k,b,n,r
-
-R,N,B,Q,K,B,N,R
-P,P,P,P,P,P,P,P
- , , , , , , ,
- , , , , , , ,
- , , , ,p, , ,
- , , , , , , ,
-p,p,p,p, ,p,p,p
-r,n,b,q,k,b,n,r
-</pre>
-
-<h3 id="用数组将一组值以表格形式显示">用数组将一组值以表格形式显示</h3>
-
-<pre class="brush: js"><code>values = [];
-for (var x = 0; x &lt; 10; x++){
- values.push([
-  2 ** x,
-  2 * x ** 2
- ])
-};
-console.table(values)</code></pre>
-
-<p>结果为：</p>
-
-<pre><code>0	1	0
-1	2	2
-2	4	8
-3	8	18
-4	16	32
-5	32	50
-6	64	72
-7	128	98
-8	256	128
-9	512	162</code></pre>
-
-<p>（第一列为索引）</p>
-
-<h2 id="规范">规范</h2>
-
-<table class=" standard-table">
- <tbody>
-  <tr>
-   <th scope="col">规范</th>
-   <th scope="col">状态</th>
-   <th scope="col">说明</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES1')}}</td>
-   <td>{{Spec2('ES1')}}</td>
-   <td>初始定义。</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-15.4', 'Array')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td>新增方法: {{jsxref("Array.isArray")}}, {{jsxref("Array.prototype.indexOf", "indexOf")}}, {{jsxref("Array.prototype.lastIndexOf", "lastIndexOf")}}, {{jsxref("Array.prototype.every", "every")}}, {{jsxref("Array.prototype.some", "some")}}, {{jsxref("Array.prototype.forEach", "forEach")}}, {{jsxref("Array.prototype.map", "map")}}, {{jsxref("Array.prototype.filter", "filter")}}, {{jsxref("Array.prototype.reduce", "reduce")}}, {{jsxref("Array.prototype.reduceRight", "reduceRight")}}</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-array-objects', 'Array')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td>
-    <p>新增方法：{{jsxref("Array.from")}}, {{jsxref("Array.of")}}, {{jsxref("Array.prototype.find", "find")}}, {{jsxref("Array.prototype.findIndex", "findIndex")}}, {{jsxref("Array.prototype.fill", "fill")}}, {{jsxref("Array.prototype.copyWithin", "copyWithin")}}</p>
-   </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft', '#sec-array-objects', 'Array')}}</td>
-   <td>{{Spec2('ESDraft')}}</td>
-   <td>
-    <p>新增方法：{{jsxref("Array.prototype.includes()")}}</p>
-   </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="浏览器兼容性">浏览器兼容性</h2>
-
-<div>{{Compat("javascript.builtins.Array")}}</div>
-
-<h2 id="相关链接">相关链接</h2>
-
-<ul>
- <li><a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Working_with_Objects#Indexing_object_properties">JavaScript Guide: “Indexing object properties”</a></li>
- <li><a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Predefined_Core_Objects#Array_Object">JavaScript Guide: “Predefined Core Objects: <code>Array</code> Object”</a></li>
- <li><a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Array_comprehensions">Array comprehensions</a></li>
- <li><a href="https://github.com/plusdude/array-generics">Polyfill for JavaScript 1.8.5 Array Generics and ECMAScript 5 Array Extras</a></li>
- <li><a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Typed_arrays">Typed Arrays</a></li>
-</ul>
diff --git a/files/zh-cn/web/javascript/reference/global_objects/array/index.md b/files/zh-cn/web/javascript/reference/global_objects/array/index.md
new file mode 100644
index 0000000000..70b70221e2
--- /dev/null
+++ b/files/zh-cn/web/javascript/reference/global_objects/array/index.md
@@ -0,0 +1,467 @@
+---
+title: Array
+slug: Web/JavaScript/Reference/Global_Objects/Array
+tags:
+  - 数组
+  - 类
+  - 示例
+  - 全局对象
+  - JavaScript
+  - 参考手册
+browser-compat: javascript.builtins.Array
+translation_of: Web/JavaScript/Reference/Global_Objects/Array
+---
+{{JSRef}}
+
+JavaScript的 **`Array`** 对象是用于构造数组的全局对象，数组是类似于列表的高阶对象。
+
+## 描述
+
+数组是一种类列表对象，它的原型中提供了遍历和修改元素的相关操作。JavaScript 数组的长度和元素类型都是非固定的。因为数组的长度可随时改变，并且其数据在内存中也可以不连续，所以 JavaScript 数组不一定是密集型的，这取决于它的使用方式。一般来说，数组的这些特性会给使用带来方便，但如果这些特性不适用于你的特定使用场景的话，可以考虑使用类型数组 {{jsxref("TypedArray")}}。
+
+只能用整数作为数组元素的索引，而不能用字符串。后者称为 [关联数组](https://en.wikipedia.org/wiki/Associative_array)。使用非整数并通过 [方括号](/zh-CN/docs/Web/JavaScript/Guide/Working_with_Objects#对象和属性) 或 [点号](/zh-CN/docs/Web/JavaScript/Reference/Operators/Property_Accessors) 来访问或设置数组元素时，所操作的并不是数组列表中的元素，而是数组对象的 [属性集合](/zh-CN/docs/Web/JavaScript/Data_structures#属性) 上的变量。数组对象的属性和数组元素列表是分开存储的，并且数组的遍历和修改操作也不能作用于这些命名属性。
+
+### 常见操作
+
+**创建数组**
+
+```js
+let fruits = ['Apple', 'Banana']
+
+console.log(fruits.length)
+// 2
+```
+
+**通过索引访问数组元素**
+
+```js
+let first = fruits[0]
+// Apple
+
+let last = fruits[fruits.length - 1]
+// Banana
+```
+
+**遍历数组**
+
+```js
+fruits.forEach(function(item, index, array) {
+  console.log(item, index)
+})
+// Apple 0
+// Banana 1
+```
+
+**添加元素到数组的末尾**
+
+```js
+let newLength = fruits.push('Orange')
+// ["Apple", "Banana", "Orange"]
+```
+
+**删除数组末尾的元素**
+
+```js
+let last = fruits.pop() // remove Orange (from the end)
+// ["Apple", "Banana"]
+```
+
+**删除数组头部元素**
+
+```js
+let first = fruits.shift() // remove Apple from the front
+// ["Banana"]
+```
+
+**添加元素到数组的头部**
+
+```js
+let newLength = fruits.unshift('Strawberry') // add to the front
+// ["Strawberry", "Banana"]
+```
+
+**找出某个元素在数组中的索引**
+
+```js
+fruits.push('Mango')
+// ["Strawberry", "Banana", "Mango"]
+
+let pos = fruits.indexOf('Banana')
+// 1
+```
+
+**通过索引删除某个元素**
+
+```js
+let removedItem = fruits.splice(pos, 1) // this is how to remove an item
+
+// ["Strawberry", "Mango"]
+```
+
+**从一个索引位置删除多个元素**
+
+```js
+let vegetables = ['Cabbage', 'Turnip', 'Radish', 'Carrot']
+console.log(vegetables)
+// ["Cabbage", "Turnip", "Radish", "Carrot"]
+
+let pos = 1
+let n = 2
+
+let removedItems = vegetables.splice(pos, n)
+// this is how to remove items, n defines the number of items to be removed,
+// starting at the index position specified by pos and progressing toward the end of array.
+
+console.log(vegetables)
+// ["Cabbage", "Carrot"] (the original array is changed)
+
+console.log(removedItems)
+// ["Turnip", "Radish"]
+```
+
+**复制一个数组**
+
+```js
+let shallowCopy = fruits.slice() // this is how to make a copy
+// ["Strawberry", "Mango"]
+```
+
+### 访问数组元素
+
+JavaScript 数组的索引是从0开始的，第一个元素的索引为0，最后一个元素的索引等于该数组的 {{jsxref("Array.length", "长度")}} 减1。
+
+如果指定的索引是一个无效值，JavaScript 数组并不会报错，而是会返回 `undefined`。
+
+```js
+let arr = ['this is the first element', 'this is the second element', 'this is the last element']
+console.log(arr[0])              // logs 'this is the first element'
+console.log(arr[1])              // logs 'this is the second element'
+console.log(arr[arr.length - 1]) // logs 'this is the last element'
+```
+
+虽然数组元素可以看做是数组对象的属性，就像 `toString` 一样，但是下面的写法是错误的，运行时会抛出 `SyntaxError` 异常，而原因则是使用了非法的属性名：
+
+```js
+console.log(arr.0) // a syntax error
+```
+
+并不是 JavaScript 数组有什么特殊之处，而是因为在 JavaScript 中，以数字开头的属性不能用点号引用，必须用方括号。
+
+比如，如果一个对象有一个名为 `3d` 的属性，那么只能用方括号来引用它。下面是具体的例子：
+
+```js
+let years = [1950, 1960, 1970, 1980, 1990, 2000, 2010]
+console.log(years.0)   // a syntax error
+console.log(years[0])  // works properly
+```
+
+```js
+renderer.3d.setTexture(model, 'character.png')     // a syntax error
+renderer['3d'].setTexture(model, 'character.png')  // works properly
+```
+
+注意在 `3d` 那个例子中，引号是必须的。你也可以将数组的索引用引号引起来，比如 `years[2]` 可以写成 `years['2']`。
+
+`years[2]` 中的 2 会被 JavaScript 解释器通过调用 `toString` 隐式转换成字符串。正因为这样，`'2'` 和 `'02'` 在 `years` 中所引用的可能是不同位置上的元素。而下面这个例子也可能会打印 `true`：
+
+```js
+console.log(years['2'] != years['02'])
+```
+
+### 数组长度与数字下标之间的关系
+
+JavaScript 数组的 {{jsxref("Array.length", "length")}} 属性和其数字下标之间有着紧密的联系。
+
+数组内置的几个方法（例如 {{jsxref("Array.join", "join")}}、{{jsxref("Array.slice", "slice")}}、{{jsxref("Array.indexOf", "indexOf")}} 等）都会考虑 {{jsxref("Array.length", "length")}} 的值。
+
+另外还有一些方法（例如 {{jsxref("Array.push", "push")}}、{{jsxref("Array.splice", "splice")}} 等）还会改变 {{jsxref("Array.length", "length")}} 的值。
+
+```js
+const fruits = []
+fruits.push('banana', 'apple', 'peach')
+
+console.log(fruits.length) // 3
+```
+
+使用一个合法的下标为数组元素赋值，并且该下标超出了当前数组的大小的时候，解释器会同时修改 {{jsxref("Array.length", "length")}} 的值：
+
+```js
+fruits[5] = 'mango'
+console.log(fruits[5])            // 'mango'
+console.log(Object.keys(fruits))  // ['0', '1', '2', '5']
+console.log(fruits.length)        // 6
+```
+
+也可以显式地给 {{jsxref("Array.length", "length")}} 赋一个更大的值：
+
+```js
+fruits.length = 10
+console.log(fruits)              // ['banana', 'apple', 'peach', empty x 2, 'mango', empty x 4]
+console.log(Object.keys(fruits)) // ['0', '1', '2', '5']
+console.log(fruits.length)       // 10
+console.log(fruits[8])           // undefined
+```
+
+而为 {{jsxref("Array.length", "length")}} 赋一个更小的值则会删掉一部分元素：
+
+```js
+fruits.length = 2
+console.log(Object.keys(fruits)) // ['0', '1']
+console.log(fruits.length)       // 2
+```
+
+这一节的内容在 {{jsxref("Array.length")}} 中有更详细的介绍。
+
+### 正则匹配结果所返回的数组
+
+使用正则表达式匹配字符串可以得到一个数组。这个数组中包含本次匹配的相关信息和匹配结果。{{jsxref("RegExp.exec")}}、{{jsxref("String.match")}}、{{jsxref("String.replace")}} 都会返回这样的数组。
+
+看下面的例子和例子下面的表格：
+
+```js
+// Match one d followed by one or more b's followed by one d
+// Remember matched b's and the following d
+// Ignore case
+
+const myRe = /d(b+)(d)/i
+const myArray = myRe.exec('cdbBdbsbz')
+```
+
+该正则匹配返回的数组包含以下属性和元素：
+
+<table class="fullwidth-table standard-table">
+  <thead>
+    <tr>
+      <th class="header" scope="col">属性/元素</td>
+      <th class="header" scope="col">说明</td>
+      <th class="header" scope="col">示例</td>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td><code>input</code><br />{{ReadOnlyInline}}</td>
+      <td>正则表达式所匹配的原始字符串</td>
+      <td><code>"cdbBdbsbz"</code></td>
+    </tr>
+    <tr>
+      <td><code>index</code><br />{{ReadOnlyInline}}</td>
+      <td>匹配到的子串在原始字符串中的索引</td>
+      <td><code>1</code></td>
+    </tr>
+    <tr>
+      <td><code>[0]</code><br />{{ReadOnlyInline}}</td>
+      <td>最后匹配到的子串</td>
+      <td><code>"dbBd"</code></td>
+    </tr>
+    <tr>
+      <td><code>[1], ...[n]</code><br />{{ReadOnlyInline}}</td>
+      <td>正则表达式中所指定的分组所匹配到的子串，其数量由正则中的分组数量决定，无最大上限</td>
+      <td>
+        <code>[1]: "bB"<br />[2]: "d"</code>
+      </td>
+    </tr>
+  </tbody>
+</table>
+
+## 构造器
+
+- {{jsxref("Array/Array", "Array()")}}
+  - : 创建一个新的 `Array` 对象
+
+## 静态属性
+
+- {{jsxref("Array/@@species", "get Array[@@species]")}}
+  - : 返回 Array 的构造函数
+
+## 静态方法
+
+- {{jsxref("Array.from()")}}
+  - : 从类数组对象或者可迭代对象中创建一个新的数组实例
+- {{jsxref("Array.isArray()")}}
+  - : 用来判断某个变量是否是一个数组对象
+- {{jsxref("Array.of()")}}
+  - : 根据一组参数来创建新的数组实例，支持任意的参数数量和类型
+
+## 实例属性
+
+- {{jsxref("Array.prototype.length")}}
+  - : 数组中的元素个数
+- {{jsxref("Array/@@unscopables", "Array.prototype[@@unscopables]")}}
+  - : 包含了所有 ES2015 (ES6) 中新定义的、且并未被更早的 ECMAScript 标准收纳的属性名。这些属性被排除在由 [`with`](/zh-CN/docs/Web/JavaScript/Reference/Statements/with) 语句绑定的环境中
+
+## 实例方法
+
+- {{jsxref("Array.prototype.at()")}}{{Experimental_Inline}}
+  - : Returns the array item at the given index. Accepts negative integers, which count back from the last item.
+- {{jsxref("Array.prototype.concat()")}}
+  - : 用于合并两个或多个数组。此方法不会更改现有数组，而是返回一个新数组
+- {{jsxref("Array.prototype.copyWithin()")}}
+  - : 浅复制数组的一部分到同一数组中的另一个位置，并返回它，不会改变原数组的长度
+- {{jsxref("Array.prototype.entries()")}}
+  - : 返回一个新的 `Array Iterator` 对象，该对象包含数组中每个索引的键/值对
+- {{jsxref("Array.prototype.every()")}}
+  - : 测试一个数组内的所有元素是否都能通过某个指定函数的测试。它返回一个布尔值
+- {{jsxref("Array.prototype.fill()")}}
+  - : 用一个固定值填充一个数组中从起始索引到终止索引内的全部元素
+- {{jsxref("Array.prototype.filter()")}}
+  - : 创建一个新数组, 其包含通过所提供函数实现的测试的所有元素
+- {{jsxref("Array.prototype.find()")}}
+  - : 返回数组中满足提供的测试函数的第一个元素的值。否则返回 `undefined`
+- {{jsxref("Array.prototype.findIndex()")}}
+  - : 返回数组中满足提供的测试函数的第一个元素的**索引**。若没有找到对应元素则返回 `-1`
+- {{jsxref("Array.prototype.flat()")}}
+  - : 按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回 
+- {{jsxref("Array.prototype.flatMap()")}}
+  - : 使用映射函数映射每个元素，然后将结果压缩成一个新数组
+- {{jsxref("Array.prototype.forEach()")}}
+  - : 对数组的每个元素执行一次给定的函数
+- {{jsxref("Array.prototype.includes()")}}
+  - : 判断一个数组是否包含一个指定的值，如果包含则返回 `true`，否则返回 `false`
+- {{jsxref("Array.prototype.indexOf()")}}
+  - : 返回在数组中可以找到一个给定元素的第一个索引，如果不存在，则返回 `-1`
+- {{jsxref("Array.prototype.join()")}}
+  - : 将一个数组的所有元素连接成一个字符串并返回这个字符串
+- {{jsxref("Array.prototype.keys()")}}
+  - : 返回一个包含数组中每个索引键的 `Array Iterator` 对象
+- {{jsxref("Array.prototype.lastIndexOf()")}}
+  - : 返回指定元素在数组中的最后一个的索引，如果不存在则返回 `-1`
+- {{jsxref("Array.prototype.map()")}}
+  - : 返回一个新数组，其结果是该数组中的每个元素是调用一次提供的函数后的返回值
+- {{jsxref("Array.prototype.pop()")}}
+  - : 从数组中删除最后一个元素，并返回该元素的值
+- {{jsxref("Array.prototype.push()")}}
+  - : 将一个或多个元素添加到数组的末尾，并返回该数组的新长度
+- {{jsxref("Array.prototype.reduce()")}}
+  - : 对数组中的每个元素执行一个由您提供的reducer函数（升序执行），将其结果汇总为单个返回值
+- {{jsxref("Array.prototype.reduceRight()")}}
+  - : 接受一个函数作为累加器（accumulator）和数组的每个值（从右到左）将其减少为单个值
+- {{jsxref("Array.prototype.reverse()")}}
+  - : 将数组中元素的位置颠倒，并返回该数组。该方法会改变原数组
+- {{jsxref("Array.prototype.shift()")}}
+  - : 从数组中删除第一个元素，并返回该元素的值
+- {{jsxref("Array.prototype.slice()")}}
+  - : 提取源数组的一部分并返回一个新数组
+- {{jsxref("Array.prototype.some()")}}
+  - : 测试数组中是不是至少有一个元素通过了被提供的函数测试
+- {{jsxref("Array.prototype.sort()")}}
+  - : 对数组元素进行原地排序并返回此数组
+- {{jsxref("Array.prototype.splice()")}}
+  - : 通过删除或替换现有元素或者原地添加新的元素来修改数组,并以数组形式返回被修改的内容
+- {{jsxref("Array.prototype.toLocaleString()")}}
+  - : 返回一个字符串表示数组中的元素。数组中的元素将使用各自的 {{jsxref("Object.prototype.toLocaleString()")}} 方法转成字符串
+- {{jsxref("Array.prototype.toString()")}}
+  - : 返回一个字符串表示指定的数组及其元素。数组中的元素将使用各自的 {{jsxref("Object.prototype.toString()")}} 方法转成字符串
+- {{jsxref("Array.prototype.unshift()")}}
+  - : 将一个或多个元素添加到数组的头部，并返回该数组的新长度
+- {{jsxref("Array.prototype.values()")}}
+  - : 返回一个新的 `Array Iterator 对象`，该对象包含数组每个索引的值
+- {{jsxref("Array.prototype.@@iterator()", "Array.prototype[@@iterator]()")}}
+  - : 返回一个新的 `Array Iterator 对象`，该对象包含数组每个索引的值
+
+## 示例
+
+### 创建数组
+
+下面这个例子创建了一个长度为 `0` 的数组 `msgArray`，然后给 `msgArray[0]` 和 `msgArray[99]` 赋值，从而导致数组长度变为了 `100`。
+
+```js
+let msgArray = []
+msgArray[0] = 'Hello'
+msgArray[99] = 'world'
+
+if (msgArray.length === 100) {
+  console.log('The length is 100.')
+}
+```
+
+### 创建二维数组
+
+下面的例子创建了一个代表国际象棋棋盘的二维数组，然后将 `[6][4]` 上的 `p` (Pawn 兵) 拷贝到 `[4][4]`，而原本的 `[6][4]` 位置则被设置为空格。
+
+```js
+let board = [
+  ['R','N','B','Q','K','B','N','R'],
+  ['P','P','P','P','P','P','P','P'],
+  [' ',' ',' ',' ',' ',' ',' ',' '],
+  [' ',' ',' ',' ',' ',' ',' ',' '],
+  [' ',' ',' ',' ',' ',' ',' ',' '],
+  [' ',' ',' ',' ',' ',' ',' ',' '],
+  ['p','p','p','p','p','p','p','p'],
+  ['r','n','b','q','k','b','n','r'] ]
+
+console.log(board.join('\n') + '\n\n')
+
+// Move King's Pawn forward 2
+board[4][4] = board[6][4]
+board[6][4] = ' '
+console.log(board.join('\n'))
+```
+
+下面是输出：
+
+```plain
+R,N,B,Q,K,B,N,R
+P,P,P,P,P,P,P,P
+ , , , , , , ,
+ , , , , , , ,
+ , , , , , , ,
+ , , , , , , ,
+p,p,p,p,p,p,p,p
+r,n,b,q,k,b,n,r
+
+R,N,B,Q,K,B,N,R
+P,P,P,P,P,P,P,P
+ , , , , , , ,
+ , , , , , , ,
+ , , , ,p, , ,
+ , , , , , , ,
+p,p,p,p, ,p,p,p
+r,n,b,q,k,b,n,r
+```
+
+### 用数组将一组值以表格形式显示
+
+```js
+values = []
+for (let x = 0; x < 10; x++){
+ values.push([
+  2 ** x,
+  2 * x ** 2
+ ])
+}
+console.table(values)
+```
+
+结果为：
+
+```plain
+// The first column is the index
+0	1	0
+1	2	2
+2	4	8
+3	8	18
+4	16	32
+5	32	50
+6	64	72
+7	128	98
+8	256	128
+9	512	162
+```
+
+## 规范
+
+{{Specifications}}
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 相关链接
+
+- JavaScript 指南:
+
+  - [对象属性索引](/zh-CN/docs/Web/JavaScript/Guide/Working_with_Objects#对象属性索引)
+  - [索引集合类: 数组对象](/zh-CN/docs/Web/JavaScript/Guide/Indexed_collections#数组对象array_object)
+
+- [Typed Arrays](/zh-CN/docs/Web/JavaScript/Typed_arrays)
+- [RangeError: invalid array length](/zh-CN/docs/Web/JavaScript/Reference/Errors/Invalid_array_length)
diff --git a/files/zh-cn/web/javascript/reference/statements/import/index.html b/files/zh-cn/web/javascript/reference/statements/import/index.html
index b7634d9cef..203ce9b8cc 100644
--- a/files/zh-cn/web/javascript/reference/statements/import/index.html
+++ b/files/zh-cn/web/javascript/reference/statements/import/index.html
@@ -21,7 +21,7 @@ translation_of: Web/JavaScript/Reference/Statements/import
 
 <p>语法</p>
 
-<pre class="syntaxbox notranslate">import <em>defaultExport</em> from "<em>module-name</em>";
+<pre class="syntaxbox brush: js notranslate">import <em>defaultExport</em> from "<em>module-name</em>";
 import * as <em>name</em> from "<em>module-name</em>";
 import { <em>export </em>} from "<em>module-name</em>";
 import { <em>export</em> as <em>alias </em>} from "<em>module-name</em>";
@@ -95,7 +95,7 @@ var promise = import("module-name");//这是一个处于第三阶段的提案。
 
 <p>整个模块仅为副作用（中性词，无贬义含义）而导入，而不导入模块中的任何内容（接口）。 这将运行模块中的全局代码, 但实际上不导入任何值。</p>
 
-<pre class="notranslate"><code>import '/modules/my-module.js';</code></pre>
+<pre class="brush: js notranslate">import '/modules/my-module.js';</pre>
 
 <h3 id="导入默认值">导入默认值</h3>
 
@@ -116,9 +116,9 @@ var promise = import("module-name");//这是一个处于第三阶段的提案。
 // specific, named imports
 </pre>
 
-<p>When importing a default export with {{anch("Dynamic Imports", "dynamic imports")}}, it works a bit differently. You need to destructure and rename the "default" key from the returned object.</p>
+<p>当用{{anch("动态导入")}}的方式导入默认导出时，其工作方式有所不同。你需要从返回的对象中解构并重命名 "default" 键。</p>
 
-<pre class="notranslate">(async () =&gt; {
+<pre class="brush: js notranslate">(async () =&gt; {
   if (somethingIsTrue) {
     const { default: myDefault, foo, bar } = await import('/modules/my-module.js');
   }
@@ -140,15 +140,15 @@ var promise = import("module-name");//这是一个处于第三阶段的提案。
 
 <p>关键字import可以像调用函数一样来动态的导入模块。以这种方式调用，将返回一个 <code>promise</code>。</p>
 
-<pre class="brush: js notranslate"><code>import('/modules/my-module.js')
+<pre class="brush: js notranslate">import('/modules/my-module.js')
   .then((module) =&gt; {
     // Do something with the module.
-  });</code>
+  });
 </pre>
 
 <p>这种使用方式也支持 <code>await</code> 关键字。</p>
 
-<pre class="brush: js notranslate"><code>let module = await import('/modules/my-module.js');</code></pre>
+<pre class="brush: js notranslate">let module = await import('/modules/my-module.js');</pre>
 
 <h2 id="示例">示例</h2>
 
@@ -227,6 +227,6 @@ for (const link of document.querySelectorAll("nav &gt; a")) {
  <li>Limin Zhu, Brian Terlson and Microsoft Edge Team: <a href="https://blogs.windows.com/msedgedev/2016/05/17/es6-modules-and-beyond/">Previewing ES6 Modules and more from ES2015, ES2016 and beyond</a></li>
  <li>Hacks blog post by Jason Orendorff: <a href="https://hacks.mozilla.org/2015/08/es6-in-depth-modules/">ES6 in Depth: Modules</a></li>
  <li>Hacks blog post by Lin Clark: <a href="https://hacks.mozilla.org/2018/03/es-modules-a-cartoon-deep-dive/">ES modules: A cartoon deep-dive</a></li>
- <li>Axel Rauschmayer's book: <a class="external" href="http://exploringjs.com/es6/ch_modules.html">"Exploring JS: Modules"</a></li>
+ <li>Axel Rauschmayer's book: <a class="external" href="https://exploringjs.com/es6/ch_modules.html">"Exploring JS: Modules"</a></li>
  <li>The Modern JavaScript Tutorial(javascript.info): <a class="external" href="https://javascript.info/import-export">Export and Import</a></li>
 </ul>
diff --git a/files/zh-cn/web/javascript/reference/statements/return/index.html b/files/zh-cn/web/javascript/reference/statements/return/index.html
index 9debeab7af..8c82917d96 100644
--- a/files/zh-cn/web/javascript/reference/statements/return/index.html
+++ b/files/zh-cn/web/javascript/reference/statements/return/index.html
@@ -69,11 +69,11 @@ a + b;</pre>
 <pre class="brush: js">function counter() {
   for (var count = 1; ; count++) {  // 无限循环
     console.log(count + "A"); // 执行5次
-      if (count === 5) {
-        return;
-      }
-      console.log(count + "B");  // 执行4次
+    if (count === 5) {
+      return;
     }
+    console.log(count + "B");  // 执行4次
+  }
   console.log(count + "C");  // 永远不会执行
 }
 
diff --git a/files/zh-cn/web/media/autoplay_guide/index.html b/files/zh-cn/web/media/autoplay_guide/index.html
index aa8c207ed2..332f54bfa4 100644
--- a/files/zh-cn/web/media/autoplay_guide/index.html
+++ b/files/zh-cn/web/media/autoplay_guide/index.html
@@ -4,7 +4,7 @@ slug: Web/Media/Autoplay_guide
 translation_of: Web/Media/Autoplay_guide
 original_slug: Web/媒体/Autoplay_guide
 ---
-<p>Automatically starting the playback of audio (or videos with audio tracks) immediately upon page load can be an unwelcome surprise to users. While autoplay of media serves a useful purpose, it should be used carefully and only when needed. In order to give users control over this, browsers often provide various forms of autoplay blocking. <span class="seoSummary">In this guide, we'll cover autoplay functionality in the various media and Web Audio APIs, including a brief overview of how to use autoplay and how to work with browsers to handle autoplay blocking gracefully.</span></p>
+<p>网页加载完成后立即播放音频（或带有音频轨道的视频）可能会意外地打扰到用户。尽管自动播放媒体文件是一个很实用的功能，但是我们也应该谨慎地使用它，保证只有在它被需要的时候才使用。为了让用户拥有控制权，通常浏览器会提供各种方式禁用自动播放音频功能。<span class="seoSummary">在这篇文章中，我们将介绍各种媒体和 Web Audio APIs 的自动播放功能，包括关于如何使用自动播放功能、如何优雅的处理阻止自动播放功能的一些简短的介绍。</span></p>
 
 <p>Autoplay blocking is <em>not</em> applied to {{HTMLElement("video")}} elements when the source media does not have an audio track, or if the audio track is muted. Media with an active audio track are considered to be <strong>audible</strong>, and autoplay blocking applies to them. <strong>Inaudible</strong> media are not affected by autoplay blocking.</p>
 
diff --git a/files/zh-tw/_redirects.txt b/files/zh-tw/_redirects.txt
index b7266c16c2..ba04b91d36 100644
--- a/files/zh-tw/_redirects.txt
+++ b/files/zh-tw/_redirects.txt
@@ -512,6 +512,7 @@
 /zh-TW/docs/Using_files_from_web_applications	/zh-TW/docs/Web/API/File/Using_files_from_web_applications
 /zh-TW/docs/Using_geolocation	/zh-TW/docs/Web/API/Geolocation_API
 /zh-TW/docs/Web/API/Ambient_Light_Events	/zh-TW/docs/orphaned/Web/API/Ambient_Light_Events
+/zh-TW/docs/Web/API/AnimationEvent/initAnimationEvent	/zh-TW/docs/Web/API/AnimationEvent/AnimationEvent
 /zh-TW/docs/Web/API/Body	/zh-TW/docs/orphaned/Web/API/Body
 /zh-TW/docs/Web/API/Body/json	/zh-TW/docs/orphaned/Web/API/Body/json
 /zh-TW/docs/Web/API/Canvas_API/Drawing_graphics_with_canvas	/zh-TW/docs/conflicting/Web/API/Canvas_API/Tutorial
@@ -570,6 +571,8 @@
 /zh-TW/docs/Web/API/Window.requestAnimationFrame	/zh-TW/docs/Web/API/window/requestAnimationFrame
 /zh-TW/docs/Web/API/Window/sidebar/Adding_search_engines_from_Web_pages	/zh-TW/docs/conflicting/Web/OpenSearch
 /zh-TW/docs/Web/API/WindowBase64	/zh-TW/docs/conflicting/Web/API/WindowOrWorkerGlobalScope
+/zh-TW/docs/Web/API/WindowOrWorkerGlobalScope/btoa	/zh-TW/docs/Web/API/btoa
+/zh-TW/docs/Web/API/WindowOrWorkerGlobalScope/setInterval	/zh-TW/docs/Web/API/setInterval
 /zh-TW/docs/Web/API/WindowTimers	/zh-TW/docs/conflicting/Web/API/WindowOrWorkerGlobalScope_e2691f7ad05781a30c5fc5bb3b3f633a
 /zh-TW/docs/Web/API/XMLHttpRequest/FormData	/zh-TW/docs/Web/API/FormData
 /zh-TW/docs/Web/API/document.createTreeWalker	/zh-TW/docs/Web/API/Document/createTreeWalker
@@ -595,6 +598,7 @@
 /zh-TW/docs/Web/CSS/彈頭	/zh-TW/docs/Web/CSS/box-sizing
 /zh-TW/docs/Web/CSS/繼承	/zh-TW/docs/Web/CSS/inheritance
 /zh-TW/docs/Web/CSS/語法	/zh-TW/docs/Web/CSS/Syntax
+/zh-TW/docs/Web/Demos_of_open_web_technologies	/zh-TW/docs/Web/Demos
 /zh-TW/docs/Web/Events/DOMContentLoaded	/zh-TW/docs/Web/API/Window/DOMContentLoaded_event
 /zh-TW/docs/Web/Events/abort	/zh-TW/docs/Web/API/HTMLMediaElement/abort_event
 /zh-TW/docs/Web/Events/click	/zh-TW/docs/Web/API/Element/click_event
diff --git a/files/zh-tw/_wikihistory.json b/files/zh-tw/_wikihistory.json
index d8927a29a7..bbfdfa477f 100644
--- a/files/zh-tw/_wikihistory.json
+++ b/files/zh-tw/_wikihistory.json
@@ -2874,7 +2874,7 @@
       "fscholz"
     ]
   },
-  "Web/API/AnimationEvent/initAnimationEvent": {
+  "Web/API/AnimationEvent/AnimationEvent": {
     "modified": "2019-03-23T22:58:50.823Z",
     "contributors": [
       "teoli",
@@ -4722,18 +4722,6 @@
       "mfuji09"
     ]
   },
-  "Web/API/WindowOrWorkerGlobalScope/btoa": {
-    "modified": "2020-10-15T22:35:15.820Z",
-    "contributors": [
-      "evo938evo938"
-    ]
-  },
-  "Web/API/WindowOrWorkerGlobalScope/setInterval": {
-    "modified": "2020-10-15T22:29:07.467Z",
-    "contributors": [
-      "chrischi0922s"
-    ]
-  },
   "Web/API/XMLHttpRequest": {
     "modified": "2020-10-15T21:21:13.079Z",
     "contributors": [
@@ -4806,6 +4794,12 @@
       "jackblackevo"
     ]
   },
+  "Web/API/btoa": {
+    "modified": "2020-10-15T22:35:15.820Z",
+    "contributors": [
+      "evo938evo938"
+    ]
+  },
   "Web/API/console/assert": {
     "modified": "2020-10-15T22:03:27.482Z",
     "contributors": [
@@ -4822,6 +4816,12 @@
       "Shiyou"
     ]
   },
+  "Web/API/setInterval": {
+    "modified": "2020-10-15T22:29:07.467Z",
+    "contributors": [
+      "chrischi0922s"
+    ]
+  },
   "Web/API/window/requestAnimationFrame": {
     "modified": "2020-10-15T21:24:54.235Z",
     "contributors": [
@@ -5382,7 +5382,7 @@
       "yutzuch"
     ]
   },
-  "Web/Demos_of_open_web_technologies": {
+  "Web/Demos": {
     "modified": "2019-03-23T22:08:13.863Z",
     "contributors": [
       "h223449961",
diff --git a/files/zh-tw/glossary/adobe_flash/index.html b/files/zh-tw/glossary/adobe_flash/index.html
index 8e09c12f7b..3fcfabd140 100644
--- a/files/zh-tw/glossary/adobe_flash/index.html
+++ b/files/zh-tw/glossary/adobe_flash/index.html
@@ -9,7 +9,7 @@ translation_of: Glossary/Adobe_Flash
 ---
 <p id="Summary">Flash 是一個由 Adobe 開發的過時網路技術。它能展現出富有表現力的 Web 程式、向量圖形、還有各種多媒體。Adobe Flash 需要在{{Glossary("瀏覽器")}}安裝相對應的擴充套件後才能使用。</p>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li><a href="https://www.adobe.com/products/flashruntimes.html">官方網站</a></li>
  <li><a href="https://mozilla.github.io/shumway/">Shumway，由 Mozilla 實作的自由軟體</a></li>
diff --git a/files/zh-tw/glossary/bootstrap/index.html b/files/zh-tw/glossary/bootstrap/index.html
index 1fa3eca197..63d8470d1c 100644
--- a/files/zh-tw/glossary/bootstrap/index.html
+++ b/files/zh-tw/glossary/bootstrap/index.html
@@ -7,7 +7,7 @@ translation_of: Glossary/Bootstrap
 
 <p>起初 Bootstrap 被稱為 Twitter Blueprint，並且由 <a href="https://twitter.com/">Twitter</a> 的內部團隊開發。它支援響應式設計、提供已經設計好能直接使用的設計樣板、或著針對該樣板，做出需要的自訂更動。在開發過程中，由於 Bootstrap 已經與當代瀏覽器，還有最新版 {{glossary("Microsoft Internet Explorer", "Internet Explorer")}} 相容，在使用 Bootstrap 開發時也不需要多操心相容性問題。</p>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li>維基百科的{{interwiki("wikipedia", "Bootstrap")}}</li>
  <li><a href="https://getbootstrap.com">Bootstrap 官方網站</a>（<a href="https://bootstrap.hexschool.com">非官方中文翻譯</a>）</li>
diff --git a/files/zh-tw/glossary/character_set/index.html b/files/zh-tw/glossary/character_set/index.html
index 0bbdcf4f19..3e5681f399 100644
--- a/files/zh-tw/glossary/character_set/index.html
+++ b/files/zh-tw/glossary/character_set/index.html
@@ -12,7 +12,7 @@ translation_of: Glossary/character_set
 
 <p>如果字符集使用不當（像是用 Unicode 閱覽 Big5 編碼的文章），可能會看到一大堆破碎的文字。這些破碎的文字，一般被俗稱為{{Interwiki("wikipedia", "亂碼")}}。</p>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li>維基百科
   <ol>
diff --git a/files/zh-tw/glossary/css_preprocessor/index.html b/files/zh-tw/glossary/css_preprocessor/index.html
index b450a2dea9..8184c5046c 100644
--- a/files/zh-tw/glossary/css_preprocessor/index.html
+++ b/files/zh-tw/glossary/css_preprocessor/index.html
@@ -7,7 +7,7 @@ translation_of: Glossary/CSS_preprocessor
 
 <p>要使用 CSS 預處理器，你需要在{{Glossary("伺服器")}}安裝 CSS 編譯器，或是在開發環境透過 CSS 預處理器編譯後，上傳編譯好的 CSS 到伺服器。</p>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li>以下列出幾個最受歡迎的 CSS 預處理器：
   <ol>
diff --git a/files/zh-tw/glossary/php/index.html b/files/zh-tw/glossary/php/index.html
index 1b27ff0c82..aab9d1a64b 100644
--- a/files/zh-tw/glossary/php/index.html
+++ b/files/zh-tw/glossary/php/index.html
@@ -37,7 +37,7 @@ translation_of: Glossary/PHP
  echo $email;
 ?&gt;</pre>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li><a href="http://php.net/">PHP - 官方網站</a></li>
  <li>維基百科的 {{Interwiki("wikipedia", "PHP")}}</li>
diff --git a/files/zh-tw/glossary/python/index.html b/files/zh-tw/glossary/python/index.html
index 61d6a4b107..0a936217d1 100644
--- a/files/zh-tw/glossary/python/index.html
+++ b/files/zh-tw/glossary/python/index.html
@@ -9,7 +9,7 @@ translation_of: Glossary/Python
 
 <p>Python 是在 OSI 認可的開源許可證規範下開發的，使其能自由使用與分發，即使是商用亦然。目前 Python 許可證是由 <a href="https://www.python.org/psf">Python Software Foundation</a> 管理的。</p>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li>進一步理解
   <ol>
diff --git a/files/zh-tw/glossary/ruby/index.html b/files/zh-tw/glossary/ruby/index.html
index 1e1832c8a8..221dd62c66 100644
--- a/files/zh-tw/glossary/ruby/index.html
+++ b/files/zh-tw/glossary/ruby/index.html
@@ -7,7 +7,7 @@ translation_of: Glossary/Ruby
 
 <p>Ruby 也可以指 HTML 文件內，東亞文字的註釋方法。請參考 {{HTMLElement("ruby")}} 元素。</p>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li>深入了解
   <ol>
diff --git a/files/zh-tw/glossary/spa/index.html b/files/zh-tw/glossary/spa/index.html
index 7bf0e740dc..d76369e1f9 100644
--- a/files/zh-tw/glossary/spa/index.html
+++ b/files/zh-tw/glossary/spa/index.html
@@ -19,7 +19,7 @@ translation_of: Glossary/SPA
  <li><a href="https://vuejs.org/">Vue.JS</a></li>
 </ul>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li>維基百科
   <ol>
diff --git a/files/zh-tw/learn/javascript/building_blocks/events/index.html b/files/zh-tw/learn/javascript/building_blocks/events/index.html
index 9bb566a61d..f9ca1fc99f 100644
--- a/files/zh-tw/learn/javascript/building_blocks/events/index.html
+++ b/files/zh-tw/learn/javascript/building_blocks/events/index.html
@@ -83,4 +83,4 @@ original_slug: Web/Guide/HTML/Event_attributes
 
 <p>{{ EmbedLiveSample('Example_using_event_listeners', '', '', '') }}</p>
 
-<section id="Quick_Links"><ol><li><a href="/en-US/docs/Web/API/Event" title='The Event interface represents an event which takes place in the DOM; some are user-generated (such as mouse or keyboard events), while others are generated by APIs (such as events that indicate an animation has finished running, a video has been paused, and so forth). While events are usually triggered by such "external" sources, they can also be triggered programmatically, such as by calling the HTMLElement.click() method of an element, or by defining the event, then sending it to a specified target using EventTarget.dispatchEvent(). There are many types of events, some of which use other interfaces based on the main Event interface. Event itself contains the properties and methods which are common to all events.'>Event</a></li><li><a href="/en-US/docs/Web/API/EventTarget" title="EventTarget is a DOM interface implemented by objects that can receive events and may have listeners for them.">EventTarget</a></li><li><a href="/en-US/docs/Web/API/EventTarget.addEventListener">EventTarget.addEventListener</a></li></ol></section>
+<section id="Quick_links"><ol><li><a href="/en-US/docs/Web/API/Event" title='The Event interface represents an event which takes place in the DOM; some are user-generated (such as mouse or keyboard events), while others are generated by APIs (such as events that indicate an animation has finished running, a video has been paused, and so forth). While events are usually triggered by such "external" sources, they can also be triggered programmatically, such as by calling the HTMLElement.click() method of an element, or by defining the event, then sending it to a specified target using EventTarget.dispatchEvent(). There are many types of events, some of which use other interfaces based on the main Event interface. Event itself contains the properties and methods which are common to all events.'>Event</a></li><li><a href="/en-US/docs/Web/API/EventTarget" title="EventTarget is a DOM interface implemented by objects that can receive events and may have listeners for them.">EventTarget</a></li><li><a href="/en-US/docs/Web/API/EventTarget.addEventListener">EventTarget.addEventListener</a></li></ol></section>
diff --git a/files/zh-tw/mozilla/firefox/releases/3.6/index.html b/files/zh-tw/mozilla/firefox/releases/3.6/index.html
index f053267778..7a247ac6c6 100644
--- a/files/zh-tw/mozilla/firefox/releases/3.6/index.html
+++ b/files/zh-tw/mozilla/firefox/releases/3.6/index.html
@@ -3,7 +3,7 @@ title: Firefox 3.6 技術文件
 slug: Mozilla/Firefox/Releases/3.6
 translation_of: Mozilla/Firefox/Releases/3.6
 ---
-<div><section class="Quick_links" id="Quick_Links">
+<div><section id="Quick_links">
   <ol>
     <li class="toggle">
         <details>
diff --git a/files/zh-tw/mozilla/firefox/releases/35/index.html b/files/zh-tw/mozilla/firefox/releases/35/index.html
index d15394097d..be1e55dea8 100644
--- a/files/zh-tw/mozilla/firefox/releases/35/index.html
+++ b/files/zh-tw/mozilla/firefox/releases/35/index.html
@@ -3,7 +3,7 @@ title: Firefox 35 技術文件
 slug: Mozilla/Firefox/Releases/35
 translation_of: Mozilla/Firefox/Releases/35
 ---
-<div><section class="Quick_links" id="Quick_Links">
+<div><section id="Quick_links">
   <ol>
     <li class="toggle">
         <details>
diff --git a/files/zh-tw/mozilla/firefox/releases/6/index.html b/files/zh-tw/mozilla/firefox/releases/6/index.html
index bd3141a249..92591ea074 100644
--- a/files/zh-tw/mozilla/firefox/releases/6/index.html
+++ b/files/zh-tw/mozilla/firefox/releases/6/index.html
@@ -3,7 +3,7 @@ title: Firefox 6 技術文件
 slug: Mozilla/Firefox/Releases/6
 translation_of: Mozilla/Firefox/Releases/6
 ---
-<div><section class="Quick_links" id="Quick_Links">
+<div><section id="Quick_links">
   <ol>
     <li class="toggle">
         <details>
diff --git a/files/zh-tw/mozilla/firefox/releases/8/index.html b/files/zh-tw/mozilla/firefox/releases/8/index.html
index 51ca78d6e7..3d8da3f091 100644
--- a/files/zh-tw/mozilla/firefox/releases/8/index.html
+++ b/files/zh-tw/mozilla/firefox/releases/8/index.html
@@ -3,7 +3,7 @@ title: Firefox 8 技術文件
 slug: Mozilla/Firefox/Releases/8
 translation_of: Mozilla/Firefox/Releases/8
 ---
-<div><section class="Quick_links" id="Quick_Links">
+<div><section id="Quick_links">
   <ol>
     <li class="toggle">
         <details>
diff --git a/files/zh-tw/mozilla/firefox/releases/9/index.html b/files/zh-tw/mozilla/firefox/releases/9/index.html
index 39e727c628..1c441a0fe2 100644
--- a/files/zh-tw/mozilla/firefox/releases/9/index.html
+++ b/files/zh-tw/mozilla/firefox/releases/9/index.html
@@ -3,7 +3,7 @@ title: Firefox 9 技術文件
 slug: Mozilla/Firefox/Releases/9
 translation_of: Mozilla/Firefox/Releases/9
 ---
-<div><section class="Quick_links" id="Quick_Links">
+<div><section id="Quick_links">
   <ol>
     <li class="toggle">
         <details>
diff --git a/files/zh-tw/web/api/animationevent/animationevent/index.html b/files/zh-tw/web/api/animationevent/animationevent/index.html
new file mode 100644
index 0000000000..eebaac85f0
--- /dev/null
+++ b/files/zh-tw/web/api/animationevent/animationevent/index.html
@@ -0,0 +1,130 @@
+---
+title: AnimationEvent.initAnimationEvent()
+slug: Web/API/AnimationEvent/AnimationEvent
+tags:
+  - API
+  - AnimationEvent
+  - CSSOM
+  - Method
+  - Obsolete
+  - Web Animations
+translation_of: Web/API/AnimationEvent/initAnimationEvent
+original_slug: Web/API/AnimationEvent/initAnimationEvent
+---
+<p>{{obsolete_header}}{{non-standard_header}}{{ apiref("Web Animations API") }}</p>
+
+<h2 id="Summary">Summary</h2>
+
+<p>The <code><strong>AnimationEvent.initAnimationEvent()</strong></code> method Initializes an animation event created using the deprecated {{domxref("Document.createEvent()", "Document.createEvent(\"AnimationEvent\")")}} method.</p>
+
+<p><code>AnimationEvent</code> created this way are untrusted.</p>
+
+<div class="note">
+<p><strong>Note:</strong> During the standardization process, this method was removed from the specification. It has been deprecated and is in the progress of being removed from most implementations. <strong>Do not use this method</strong>; instead, use the standard constructor, {{domxref("AnimationEvent.AnimationEvent", "AnimationEvent()")}}, to create a synthetic {{domxref("AnimationEvent")}}.</p>
+</div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><em>animationEvent</em>.initAnimationEvent(<em>typeArg</em>, <em>canBubbleArg</em>, <em>cancelableArg</em>, <em>animationNameArg</em>, <em>elapsedTimeArg</em>);</pre>
+
+<h3 id="Parameters">Parameters</h3>
+
+<dl>
+ <dt><code>typeArg</code></dt>
+ <dd>A {{domxref("DOMString")}} identifying the specific type of animation event that occurred. The following values are allowed:
+ <table class="standard-table">
+  <thead>
+   <tr>
+    <th scope="col">Value</th>
+    <th scope="col">Meaning</th>
+   </tr>
+  </thead>
+  <tbody>
+   <tr>
+    <td><code>animationstart</code></td>
+    <td>The animation has started.</td>
+   </tr>
+   <tr>
+    <td><code>animationend</code></td>
+    <td>The animation completed.</td>
+   </tr>
+   <tr>
+    <td><code>animationiteration</code></td>
+    <td>The current iteration just completed.</td>
+   </tr>
+  </tbody>
+ </table>
+ </dd>
+ <dt><code>canBubbleArg</code></dt>
+ <dd>A {{domxref("Boolean")}} flag indicating if the event can bubble (<code>true</code>) or not (<code>false)</code>.</dd>
+ <dt><code>cancelableArg</code></dt>
+ <dd>A {{domxref("Boolean")}} flag indicating if the event associated action can be avoided (<code>true</code>) or not (<code>false)</code>.</dd>
+ <dt><code>animationNameArg</code></dt>
+ <dd>A {{domxref("DOMString")}} containing the value of the {{cssxref("animation-name")}} CSS property associated with the transition.</dd>
+ <dt><code>elapsedTimeArg</code></dt>
+ <dd>A <code>float</code> indicating the amount of time the animation has been running, in seconds, as of the time the event was fired, excluding any time the animation was paused. For an <code>"animationstart"</code> event, <code>elapsedTime</code> is <code>0.0</code> unless there was a negative value for <code><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/animation-delay" title="The animation-delay CSS property specifies when the animation should start. This lets the animation sequence begin some time after it's applied to an element.">animation-delay</a></code>, in which case the event will be fired with <code>elapsedTime</code> containing  <code>(-1 * </code><em>delay</em><code>)</code>.</dd>
+</dl>
+
+<h2 id="Specifications">Specifications</h2>
+
+<p><em>This method is non-standard and not part of any specification, though it was present in early drafts of {{SpecName("CSS3 Animations")}}.</em></p>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{ CompatibilityTable }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatGeckoDesktop("6.0") }}<br>
+    Removed in {{ CompatGeckoDesktop("23.0") }}</td>
+   <td>10.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatGeckoMobile("6.0") }}<br>
+    Removed in {{ CompatGeckoMobile("23.0") }}</td>
+   <td>10.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_animations">Using CSS animations</a></li>
+ <li>Animation-related CSS properties and at-rules: {{cssxref("animation")}}, {{cssxref("animation-delay")}}, {{cssxref("animation-direction")}}, {{cssxref("animation-duration")}}, {{cssxref("animation-fill-mode")}}, {{cssxref("animation-iteration-count")}}, {{cssxref("animation-name")}}, {{cssxref("animation-play-state")}}, {{cssxref("animation-timing-function")}}, {{cssxref("@keyframes")}}.</li>
+ <li>The {{domxref("AnimationEvent")}} interface it belongs to.</li>
+</ul>
diff --git a/files/zh-tw/web/api/animationevent/initanimationevent/index.html b/files/zh-tw/web/api/animationevent/initanimationevent/index.html
deleted file mode 100644
index de5c7efe15..0000000000
--- a/files/zh-tw/web/api/animationevent/initanimationevent/index.html
+++ /dev/null
@@ -1,129 +0,0 @@
----
-title: AnimationEvent.initAnimationEvent()
-slug: Web/API/AnimationEvent/initAnimationEvent
-tags:
-  - API
-  - AnimationEvent
-  - CSSOM
-  - Method
-  - Obsolete
-  - Web Animations
-translation_of: Web/API/AnimationEvent/initAnimationEvent
----
-<p>{{obsolete_header}}{{non-standard_header}}{{ apiref("Web Animations API") }}</p>
-
-<h2 id="Summary">Summary</h2>
-
-<p>The <code><strong>AnimationEvent.initAnimationEvent()</strong></code> method Initializes an animation event created using the deprecated {{domxref("Document.createEvent()", "Document.createEvent(\"AnimationEvent\")")}} method.</p>
-
-<p><code>AnimationEvent</code> created this way are untrusted.</p>
-
-<div class="note">
-<p><strong>Note:</strong> During the standardization process, this method was removed from the specification. It has been deprecated and is in the progress of being removed from most implementations. <strong>Do not use this method</strong>; instead, use the standard constructor, {{domxref("AnimationEvent.AnimationEvent", "AnimationEvent()")}}, to create a synthetic {{domxref("AnimationEvent")}}.</p>
-</div>
-
-<h2 id="Syntax">Syntax</h2>
-
-<pre class="syntaxbox"><em>animationEvent</em>.initAnimationEvent(<em>typeArg</em>, <em>canBubbleArg</em>, <em>cancelableArg</em>, <em>animationNameArg</em>, <em>elapsedTimeArg</em>);</pre>
-
-<h3 id="Parameters">Parameters</h3>
-
-<dl>
- <dt><code>typeArg</code></dt>
- <dd>A {{domxref("DOMString")}} identifying the specific type of animation event that occurred. The following values are allowed:
- <table class="standard-table">
-  <thead>
-   <tr>
-    <th scope="col">Value</th>
-    <th scope="col">Meaning</th>
-   </tr>
-  </thead>
-  <tbody>
-   <tr>
-    <td><code>animationstart</code></td>
-    <td>The animation has started.</td>
-   </tr>
-   <tr>
-    <td><code>animationend</code></td>
-    <td>The animation completed.</td>
-   </tr>
-   <tr>
-    <td><code>animationiteration</code></td>
-    <td>The current iteration just completed.</td>
-   </tr>
-  </tbody>
- </table>
- </dd>
- <dt><code>canBubbleArg</code></dt>
- <dd>A {{domxref("Boolean")}} flag indicating if the event can bubble (<code>true</code>) or not (<code>false)</code>.</dd>
- <dt><code>cancelableArg</code></dt>
- <dd>A {{domxref("Boolean")}} flag indicating if the event associated action can be avoided (<code>true</code>) or not (<code>false)</code>.</dd>
- <dt><code>animationNameArg</code></dt>
- <dd>A {{domxref("DOMString")}} containing the value of the {{cssxref("animation-name")}} CSS property associated with the transition.</dd>
- <dt><code>elapsedTimeArg</code></dt>
- <dd>A <code>float</code> indicating the amount of time the animation has been running, in seconds, as of the time the event was fired, excluding any time the animation was paused. For an <code>"animationstart"</code> event, <code>elapsedTime</code> is <code>0.0</code> unless there was a negative value for <code><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/animation-delay" title="The animation-delay CSS property specifies when the animation should start. This lets the animation sequence begin some time after it's applied to an element.">animation-delay</a></code>, in which case the event will be fired with <code>elapsedTime</code> containing  <code>(-1 * </code><em>delay</em><code>)</code>.</dd>
-</dl>
-
-<h2 id="Specifications">Specifications</h2>
-
-<p><em>This method is non-standard and not part of any specification, though it was present in early drafts of {{SpecName("CSS3 Animations")}}.</em></p>
-
-<h2 id="Browser_compatibility">Browser compatibility</h2>
-
-<p>{{ CompatibilityTable }}</p>
-
-<div id="compat-desktop">
-<table class="compat-table">
- <tbody>
-  <tr>
-   <th>Feature</th>
-   <th>Chrome</th>
-   <th>Firefox (Gecko)</th>
-   <th>Internet Explorer</th>
-   <th>Opera</th>
-   <th>Safari</th>
-  </tr>
-  <tr>
-   <td>Basic support</td>
-   <td>{{CompatVersionUnknown}}</td>
-   <td>{{ CompatGeckoDesktop("6.0") }}<br>
-    Removed in {{ CompatGeckoDesktop("23.0") }}</td>
-   <td>10.0</td>
-   <td>{{CompatVersionUnknown}}</td>
-   <td>{{CompatVersionUnknown}}</td>
-  </tr>
- </tbody>
-</table>
-</div>
-
-<div id="compat-mobile">
-<table class="compat-table">
- <tbody>
-  <tr>
-   <th>Feature</th>
-   <th>Android</th>
-   <th>Firefox Mobile (Gecko)</th>
-   <th>IE Mobile</th>
-   <th>Opera Mobile</th>
-   <th>Safari Mobile</th>
-  </tr>
-  <tr>
-   <td>Basic support</td>
-   <td>{{CompatVersionUnknown}}</td>
-   <td>{{ CompatGeckoMobile("6.0") }}<br>
-    Removed in {{ CompatGeckoMobile("23.0") }}</td>
-   <td>10.0</td>
-   <td>{{CompatVersionUnknown}}</td>
-   <td>{{CompatVersionUnknown}}</td>
-  </tr>
- </tbody>
-</table>
-</div>
-
-<h2 id="See_also">See also</h2>
-
-<ul>
- <li><a href="https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_animations">Using CSS animations</a></li>
- <li>Animation-related CSS properties and at-rules: {{cssxref("animation")}}, {{cssxref("animation-delay")}}, {{cssxref("animation-direction")}}, {{cssxref("animation-duration")}}, {{cssxref("animation-fill-mode")}}, {{cssxref("animation-iteration-count")}}, {{cssxref("animation-name")}}, {{cssxref("animation-play-state")}}, {{cssxref("animation-timing-function")}}, {{cssxref("@keyframes")}}.</li>
- <li>The {{domxref("AnimationEvent")}} interface it belongs to.</li>
-</ul>
diff --git a/files/zh-tw/web/api/btoa/index.html b/files/zh-tw/web/api/btoa/index.html
new file mode 100644
index 0000000000..9f846d885d
--- /dev/null
+++ b/files/zh-tw/web/api/btoa/index.html
@@ -0,0 +1,137 @@
+---
+title: WindowOrWorkerGlobalScope.btoa()
+slug: Web/API/btoa
+translation_of: Web/API/WindowOrWorkerGlobalScope/btoa
+original_slug: Web/API/WindowOrWorkerGlobalScope/btoa
+---
+<p>{{APIRef("HTML DOM")}}</p>
+
+<p>The <code><strong>WindowOrWorkerGlobalScope.btoa()</strong></code> method creates a {{glossary("Base64")}}-encoded ASCII string from a <a href="/en-US/docs/Web/API/DOMString/Binary">binary string</a> (i.e., a {{jsxref("String")}} object in which each character in the string is treated as a byte of binary data).</p>
+
+<p>You can use this method to encode data which may otherwise cause communication problems, transmit it, then use the {{domxref("WindowOrWorkerGlobalScope.atob", "atob()")}} method to decode the data again. For example, you can encode control characters such as ASCII values 0 through 31.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox notranslate">var <var>encodedData</var> = <var>scope</var>.btoa(<var>stringToEncode</var>);</pre>
+
+<h3 id="Parameters">Parameters</h3>
+
+<dl>
+ <dt><code><var>stringToEncode</var></code></dt>
+ <dd>The <a href="/en-US/docs/Web/API/DOMString/Binary">binary string</a> to encode.</dd>
+</dl>
+
+<h3 id="Return_value">Return value</h3>
+
+<p>An ASCII string containing the Base64 representation of <code><var>stringToEncode</var></code>.</p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<dl>
+ <dt><code>InvalidCharacterError</code></dt>
+ <dd>The string contained a character that did not fit in a single byte. See "Unicode strings" below for more detail.</dd>
+</dl>
+
+<h2 id="Example">Example</h2>
+
+<pre class="brush:js notranslate">const encodedData = window.btoa('Hello, world'); // encode a string
+const decodedData = window.atob(encodedData); // decode the string
+</pre>
+
+<h2 id="Unicode_strings">Unicode strings</h2>
+
+<p>The <code>btoa()</code> function takes a JavaScript string as a parameter. In JavaScript strings are represented using the UTF-16 character encoding: in this encoding, strings are represented as a sequence of 16-bit (2 byte) units. Every ASCII character fits into the first byte of one of these units, but many other characters don't.</p>
+
+<p>Base64, by design, expects binary data as its input. In terms of JavaScript strings, this means strings in which each character occupies only one byte. So if you pass a string into <code>btoa()</code> containing characters that occupy more than one byte, you will get an error, because this is not considered binary data:</p>
+
+<pre class="brush: js notranslate">const ok = "a";
+console.log(ok.codePointAt(0).toString(16)); //   61: occupies &lt; 1 byte
+
+const notOK = "✓"
+console.log(notOK.codePointAt(0).toString(16)); // 2713: occupies &gt; 1 byte
+
+console.log(btoa(ok));    // YQ==
+console.log(btoa(notOK)); // error</pre>
+
+<p>If you need to encode Unicode text as ASCII using <code>btoa()</code>, one option is to convert the string such that each 16-bit unit occupies only one byte. For example:</p>
+
+<pre class="brush: js notranslate">// convert a Unicode string to a string in which
+// each 16-bit unit occupies only one byte
+function toBinary(string) {
+  const codeUnits = new Uint16Array(string.length);
+  for (let i = 0; i &lt; codeUnits.length; i++) {
+    codeUnits[i] = string.charCodeAt(i);
+  }
+  return String.fromCharCode(...new Uint8Array(codeUnits.buffer));
+}
+
+// a string that contains characters occupying &gt; 1 byte
+const myString = "☸☹☺☻☼☾☿";
+
+const converted = toBinary(myString);
+const encoded = btoa(converted);
+console.log(encoded);                 // OCY5JjomOyY8Jj4mPyY=
+</pre>
+
+<p>If you do this, of course you'll have to reverse the conversion on the decoded string:</p>
+
+<pre class="brush: js language-js notranslate">function fromBinary(binary) {
+  const bytes = new Uint8Array(binary.length);
+  for (let i = 0; i &lt; bytes.length; i++) {
+    bytes[i] = binary.charCodeAt(i);
+  }
+  return String.fromCharCode(...new Uint16Array(bytes.buffer));
+}
+
+const decoded = atob(encoded);
+const original = fromBinary(decoded);
+console.log(original);                // ☸☹☺☻☼☾☿
+</pre>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<p>You can use a polyfill from <a href="https://github.com/MaxArt2501/base64-js/blob/master/base64.js">https://github.com/MaxArt2501/base64-js/blob/master/base64.js</a> for browsers that don't support it.</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#dom-btoa', 'WindowOrWorkerGlobalScope.btoa()')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Method moved to the <code>WindowOrWorkerGlobalScope</code> mixin in the latest spec.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', '#dom-windowbase64-btoa', 'WindowBase64.btoa()')}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>Snapshot of {{SpecName("HTML WHATWG")}}. No change.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5 W3C", "#dom-windowbase64-btoa", "WindowBase64.btoa()")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Snapshot of {{SpecName("HTML WHATWG")}}. Creation of <code>WindowBase64</code> (properties where on the target before it).</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>
+
+
+<p>{{Compat("api.WindowOrWorkerGlobalScope.btoa")}}</p>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs"><code>data</code> URIs</a></li>
+ <li>{{domxref("WindowOrWorkerGlobalScope.atob","atob()")}}</li>
+</ul>
diff --git a/files/zh-tw/web/api/setinterval/index.html b/files/zh-tw/web/api/setinterval/index.html
new file mode 100644
index 0000000000..ac8ee376e0
--- /dev/null
+++ b/files/zh-tw/web/api/setinterval/index.html
@@ -0,0 +1,628 @@
+---
+title: WindowOrWorkerGlobalScope.setInterval()
+slug: Web/API/setInterval
+translation_of: Web/API/WindowOrWorkerGlobalScope/setInterval
+original_slug: Web/API/WindowOrWorkerGlobalScope/setInterval
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p><span class="seoSummary"><strong><code>setInterval()</code></strong> 函式, {{domxref("Window")}} 與 {{domxref("Worker")}} 介面皆提供此一函式, 此函式作用為重複地執行一個函式呼叫或一個程式碼片斷, 每一次執行間隔固定的延遲時間.</span> 此函式呼叫時將傳回一個間隔代碼(Interval ID)用以識別該間隔程序, 因此後續您可以呼叫 {{domxref("WindowOrWorkerGlobalScope.clearInterval", "clearInterval()")}} 函式移除該間隔程序. 此函式為由 {{domxref("WindowOrWorkerGlobalScope")}} 混合定義.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><em>var intervalID</em> = <em>scope</em>.setInterval(<em>func</em>, [<em>delay</em>, <em>arg1</em>, <em>arg2</em>, ...]);
+<em>var intervalID</em> = <em>scope</em>.setInterval(<em>code</em>, [<em>delay]</em>);
+</pre>
+
+<h3 id="Parameters">Parameters</h3>
+
+<dl>
+ <dt><code>func</code></dt>
+ <dd>A {{jsxref("function")}} to be executed every <code>delay</code> milliseconds. The function is not passed any arguments, and no return value is expected.</dd>
+ <dt><code>code</code></dt>
+ <dd>An optional syntax allows you to include a string instead of a function, which is compiled and executed every <code>delay</code> milliseconds. This syntax is <em>not recommended</em> for the same reasons that make using {{jsxref("eval", "eval()")}} a security risk.</dd>
+ <dt><code>delay</code>{{optional_inline}}</dt>
+ <dd>The time, in milliseconds (thousandths of a second), the timer should delay in between executions of the specified function or code. See {{anch("Delay restrictions")}} below for details on the permitted range of <code>delay</code> values.</dd>
+ <dt><code>arg1, ..., argN</code> {{optional_inline}}</dt>
+ <dd>Additional arguments which are passed through to the function specified by <em>func</em> once the timer expires.</dd>
+</dl>
+
+<div class="note">
+<p><strong>Note</strong>: Passing additional arguments to <code>setInterval()</code> in the first syntax does not work in Internet Explorer 9 and earlier. If you want to enable this functionality on that browser, you must use a polyfill (see the <a href="#Callback_arguments">Callback arguments</a> section).</p>
+</div>
+
+<h3 id="Return_value">Return value</h3>
+
+<p>The returned <code>intervalID</code> is a numeric, non-zero value which identifies the timer created by the call to <code>setInterval()</code>; this value can be passed to {{domxref("WindowOrWorkerGlobalScope.clearInterval()")}} to cancel the timeout.</p>
+
+<p>It may be helpful to be aware that <code>setInterval()</code> and {{domxref("WindowOrWorkerGlobalScope.setTimeout", "setTimeout()")}} share the same pool of IDs, and that <code>clearInterval()</code> and {{domxref("WindowOrWorkerGlobalScope.clearTimeout", "clearTimeout()")}} can technically be used interchangeably. For clarity, however, you should try to always match them to avoid confusion when maintaining your code.</p>
+
+<div class="note"><strong>Note</strong>: The <code>delay</code> argument is converted to a signed 32-bit integer. This effectively limits <code>delay</code> to 2147483647 ms, since it's specified as a signed integer in the IDL.</div>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="Example_1_Basic_syntax">Example 1: Basic syntax</h3>
+
+<p>The following example demonstrates <code>setInterval()</code>'s basic syntax.</p>
+
+<pre class="brush:js">var intervalID = window.setInterval(myCallback, 500, 'Parameter 1', 'Parameter 2');
+
+function myCallback(a, b)
+{
+ // Your code here
+ // Parameters are purely optional.
+ console.log(a);
+ console.log(b);
+}
+</pre>
+
+<h3 id="Example_2_Alternating_two_colors">Example 2: Alternating two colors</h3>
+
+<p>The following example calls the <code>flashtext()</code> function once a second until the Stop button is pressed.</p>
+
+<pre class="brush:html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+  &lt;meta charset="UTF-8" /&gt;
+  &lt;title&gt;setInterval/clearInterval example&lt;/title&gt;
+
+  &lt;script&gt;
+    var nIntervId;
+
+    function changeColor() {
+      nIntervId = setInterval(flashText, 1000);
+    }
+
+    function flashText() {
+      var oElem = document.getElementById('my_box');
+      oElem.style.color = oElem.style.color == 'red' ? 'blue' : 'red';
+      // oElem.style.color == 'red' ? 'blue' : 'red' is a ternary operator.
+    }
+
+    function stopTextColor() {
+      clearInterval(nIntervId);
+    }
+  &lt;/script&gt;
+&lt;/head&gt;
+
+&lt;body onload="changeColor();"&gt;
+  &lt;div id="my_box"&gt;
+    &lt;p&gt;Hello World&lt;/p&gt;
+  &lt;/div&gt;
+
+  &lt;button onclick="stopTextColor();"&gt;Stop&lt;/button&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h3 id="Example_3_Typewriter_simulation">Example 3: Typewriter simulation</h3>
+
+<p>The following example simulates typewriter by first clearing and then slowly typing content into the <a href="/en-US/docs/DOM/NodeList"><code>NodeList</code></a> that matches a specified group of selectors.</p>
+
+<pre class="brush:html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+&lt;meta charset="UTF-8" /&gt;
+&lt;title&gt;JavaScript Typewriter - MDN Example&lt;/title&gt;
+&lt;script&gt;
+  function Typewriter (sSelector, nRate) {
+
+  function clean () {
+    clearInterval(nIntervId);
+    bTyping = false;
+    bStart = true;
+    oCurrent = null;
+    aSheets.length = nIdx = 0;
+  }
+
+  function scroll (oSheet, nPos, bEraseAndStop) {
+    if (!oSheet.hasOwnProperty('parts') || aMap.length &lt; nPos) { return true; }
+
+    var oRel, bExit = false;
+
+    if (aMap.length === nPos) { aMap.push(0); }
+
+    while (aMap[nPos] &lt; oSheet.parts.length) {
+      oRel = oSheet.parts[aMap[nPos]];
+
+      scroll(oRel, nPos + 1, bEraseAndStop) ? aMap[nPos]++ : bExit = true;
+
+      if (bEraseAndStop &amp;&amp; (oRel.ref.nodeType - 1 | 1) === 3 &amp;&amp; oRel.ref.nodeValue) {
+        bExit = true;
+        oCurrent = oRel.ref;
+        sPart = oCurrent.nodeValue;
+        oCurrent.nodeValue = '';
+      }
+
+      oSheet.ref.appendChild(oRel.ref);
+      if (bExit) { return false; }
+    }
+
+    aMap.length--;
+    return true;
+  }
+
+  function typewrite () {
+    if (sPart.length === 0 &amp;&amp; scroll(aSheets[nIdx], 0, true) &amp;&amp; nIdx++ === aSheets.length - 1) { clean(); return; }
+
+    oCurrent.nodeValue += sPart.charAt(0);
+    sPart = sPart.slice(1);
+  }
+
+  function Sheet (oNode) {
+    this.ref = oNode;
+    if (!oNode.hasChildNodes()) { return; }
+    this.parts = Array.prototype.slice.call(oNode.childNodes);
+
+    for (var nChild = 0; nChild &lt; this.parts.length; nChild++) {
+      oNode.removeChild(this.parts[nChild]);
+      this.parts[nChild] = new Sheet(this.parts[nChild]);
+    }
+  }
+
+  var
+    nIntervId, oCurrent = null, bTyping = false, bStart = true,
+    nIdx = 0, sPart = "", aSheets = [], aMap = [];
+
+  this.rate = nRate || 100;
+
+  this.play = function () {
+    if (bTyping) { return; }
+    if (bStart) {
+      var aItems = document.querySelectorAll(sSelector);
+
+      if (aItems.length === 0) { return; }
+      for (var nItem = 0; nItem &lt; aItems.length; nItem++) {
+        aSheets.push(new Sheet(aItems[nItem]));
+        /* Uncomment the following line if you have previously hidden your elements via CSS: */
+        // aItems[nItem].style.visibility = "visible";
+      }
+
+      bStart = false;
+    }
+
+    nIntervId = setInterval(typewrite, this.rate);
+    bTyping = true;
+  };
+
+  this.pause = function () {
+    clearInterval(nIntervId);
+    bTyping = false;
+  };
+
+  this.terminate = function () {
+    oCurrent.nodeValue += sPart;
+    sPart = "";
+    for (nIdx; nIdx &lt; aSheets.length; scroll(aSheets[nIdx++], 0, false));
+    clean();
+  };
+}
+
+/* usage: */
+var oTWExample1 = new Typewriter(/* elements: */ '#article, h1, #info, #copyleft', /* frame rate (optional): */ 15);
+
+/* default frame rate is 100: */
+var oTWExample2 = new Typewriter('#controls');
+
+/* you can also change the frame rate value modifying the "rate" property; for example: */
+// oTWExample2.rate = 150;
+
+onload = function () {
+  oTWExample1.play();
+  oTWExample2.play();
+};
+&lt;/script&gt;
+&lt;style type="text/css"&gt;
+span.intLink, a, a:visited {
+  cursor: pointer;
+  color: #000000;
+  text-decoration: underline;
+}
+
+#info {
+  width: 180px;
+  height: 150px;
+  float: right;
+  background-color: #eeeeff;
+  padding: 4px;
+  overflow: auto;
+  font-size: 12px;
+  margin: 4px;
+  border-radius: 5px;
+  /* visibility: hidden; */
+}
+&lt;/style&gt;
+&lt;/head&gt;
+
+&lt;body&gt;
+
+&lt;p id="copyleft" style="font-style: italic; font-size: 12px; text-align: center;"&gt;CopyLeft 2012 by &lt;a href="https://developer.mozilla.org/" target="_blank"&gt;Mozilla Developer Network&lt;/a&gt;&lt;/p&gt;
+&lt;p id="controls" style="text-align: center;"&gt;[&amp;nbsp;&lt;span class="intLink" onclick="oTWExample1.play();"&gt;Play&lt;/span&gt; | &lt;span class="intLink" onclick="oTWExample1.pause();"&gt;Pause&lt;/span&gt; | &lt;span class="intLink" onclick="oTWExample1.terminate();"&gt;Terminate&lt;/span&gt;&amp;nbsp;]&lt;/p&gt;
+&lt;div id="info"&gt;
+Vivamus blandit massa ut metus mattis in fringilla lectus imperdiet. Proin ac ante a felis ornare vehicula. Fusce pellentesque lacus vitae eros convallis ut mollis magna pellentesque. Pellentesque placerat enim at lacus ultricies vitae facilisis nisi fringilla. In tincidunt tincidunt tincidunt.
+&lt;/div&gt;
+&lt;h1&gt;JavaScript Typewriter&lt;/h1&gt;
+
+&lt;div id="article"&gt;
+&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ultrices dolor ac dolor imperdiet ullamcorper. Suspendisse quam libero, luctus auctor mollis sed, malesuada condimentum magna. Quisque in ante tellus, in placerat est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec a mi magna, quis mattis dolor. Etiam sit amet ligula quis urna auctor imperdiet nec faucibus ante. Mauris vel consectetur dolor. Nunc eget elit eget velit pulvinar fringilla consectetur aliquam purus. Curabitur convallis, justo posuere porta egestas, velit erat ornare tortor, non viverra justo diam eget arcu. Phasellus adipiscing fermentum nibh ac commodo. Nam turpis nunc, suscipit a hendrerit vitae, volutpat non ipsum.&lt;/p&gt;
+&lt;form&gt;
+&lt;p&gt;Phasellus ac nisl lorem: &lt;input type="text" /&gt;&lt;br /&gt;
+&lt;textarea style="width: 400px; height: 200px;"&gt;Nullam commodo suscipit lacus non aliquet. Phasellus ac nisl lorem, sed facilisis ligula. Nam cursus lobortis placerat. Sed dui nisi, elementum eu sodales ac, placerat sit amet mauris. Pellentesque dapibus tellus ut ipsum aliquam eu auctor dui vehicula. Quisque ultrices laoreet erat, at ultrices tortor sodales non. Sed venenatis luctus magna, ultricies ultricies nunc fringilla eget. Praesent scelerisque urna vitae nibh tristique varius consequat neque luctus. Integer ornare, erat a porta tempus, velit justo fermentum elit, a fermentum metus nisi eu ipsum. Vivamus eget augue vel dui viverra adipiscing congue ut massa. Praesent vitae eros erat, pulvinar laoreet magna. Maecenas vestibulum mollis nunc in posuere. Pellentesque sit amet metus a turpis lobortis tempor eu vel tortor. Cras sodales eleifend interdum.&lt;/textarea&gt;&lt;/p&gt;
+&lt;p&gt;&lt;input type="submit" value="Send" /&gt;
+&lt;/form&gt;
+&lt;p&gt;Duis lobortis sapien quis nisl luctus porttitor. In tempor semper libero, eu tincidunt dolor eleifend sit amet. Ut nec velit in dolor tincidunt rhoncus non non diam. Morbi auctor ornare orci, non euismod felis gravida nec. Curabitur elementum nisi a eros rutrum nec blandit diam placerat. Aenean tincidunt risus ut nisi consectetur cursus. Ut vitae quam elit. Donec dignissim est in quam tempor consequat. Aliquam aliquam diam non felis convallis suscipit. Nulla facilisi. Donec lacus risus, dignissim et fringilla et, egestas vel eros. Duis malesuada accumsan dui, at fringilla mauris bibStartum quis. Cras adipiscing ultricies fermentum. Praesent bibStartum condimentum feugiat.&lt;/p&gt;
+&lt;p&gt;Nam faucibus, ligula eu fringilla pulvinar, lectus tellus iaculis nunc, vitae scelerisque metus leo non metus. Proin mattis lobortis lobortis. Quisque accumsan faucibus erat, vel varius tortor ultricies ac. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec libero nunc. Nullam tortor nunc, elementum a consectetur et, ultrices eu orci. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a nisl eu sem vehicula egestas.&lt;/p&gt;
+&lt;/div&gt;
+&lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p><a href="/files/3997/typewriter.html">View this demo in action</a>. See also: <a href="/en-US/docs/DOM/window.clearInterval"><code>clearInterval()</code></a>.</p>
+
+<h2 id="Callback_arguments">Callback arguments</h2>
+
+<p>As previously discussed, Internet Explorer versions 9 and below do not support the passing of arguments to the callback function in either <code>setTimeout()</code> or <code>setInterval()</code>. The following <strong>IE-specific</strong> code demonstrates a method for overcoming this limitation.  To use, simply add the following code to the top of your script.</p>
+
+<pre class="brush:js">/*\
+|*|
+|*|  IE-specific polyfill that enables the passage of arbitrary arguments to the
+|*|  callback functions of javascript timers (HTML5 standard syntax).
+|*|
+|*|  https://developer.mozilla.org/en-US/docs/Web/API/window.setInterval
+|*|  https://developer.mozilla.org/User:fusionchess
+|*|
+|*|  Syntax:
+|*|  var timeoutID = window.setTimeout(func, delay[, arg1, arg2, ...]);
+|*|  var timeoutID = window.setTimeout(code, delay);
+|*|  var intervalID = window.setInterval(func, delay[, arg1, arg2, ...]);
+|*|  var intervalID = window.setInterval(code, delay);
+|*|
+\*/
+
+if (document.all &amp;&amp; !window.setTimeout.isPolyfill) {
+  var __nativeST__ = window.setTimeout;
+  window.setTimeout = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) {
+    var aArgs = Array.prototype.slice.call(arguments, 2);
+    return __nativeST__(vCallback instanceof Function ? function () {
+      vCallback.apply(null, aArgs);
+    } : vCallback, nDelay);
+  };
+  window.setTimeout.isPolyfill = true;
+}
+
+if (document.all &amp;&amp; !window.setInterval.isPolyfill) {
+  var __nativeSI__ = window.setInterval;
+  window.setInterval = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) {
+    var aArgs = Array.prototype.slice.call(arguments, 2);
+    return __nativeSI__(vCallback instanceof Function ? function () {
+      vCallback.apply(null, aArgs);
+    } : vCallback, nDelay);
+  };
+  window.setInterval.isPolyfill = true;
+}
+</pre>
+
+<p>Another possibility is to use an anonymous function to call your callback, although this solution is a bit more expensive. Example:</p>
+
+<pre class="brush:js">var intervalID = setInterval(function() { myFunc('one', 'two', 'three'); }, 1000);</pre>
+
+<p>Another possibility is to use <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind">function's bind</a>. Example:</p>
+
+<pre class="brush:js">var intervalID = setInterval(function(arg1) {}.bind(undefined, 10), 1000);</pre>
+
+<p>{{h3_gecko_minversion("Inactive tabs", "5.0")}}</p>
+
+<p>Starting in Gecko 5.0 {{geckoRelease("5.0")}}, intervals are clamped to fire no more often than once per second in inactive tabs.</p>
+
+<h2 id="The_this_problem">The "<a href="/en-US/docs/Web/JavaScript/Reference/Operators/this"><code>this</code></a>" problem</h2>
+
+<p>When you pass a method to <code>setInterval()</code> or any other function, it is invoked with the wrong <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this"><code>this</code></a> value. This problem is explained in detail in the <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this#As_an_object_method">JavaScript reference</a>.</p>
+
+<h3 id="Explanation">Explanation</h3>
+
+<p>Code executed by <code>setInterval()</code> runs in a separate execution context than the function from which it was called. As a consequence, the <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this"><code>this</code></a> keyword for the called function is set to the <code>window</code> (or <code>global</code>) object, it is not the same as the <code>this</code> value for the function that called <code>setTimeout</code>. See the following example (which uses <code>setTimeout()</code> instead of <code>setInterval()</code> – the problem, in fact, is the same for both timers):</p>
+
+<pre class="brush:js">myArray = ['zero', 'one', 'two'];
+
+myArray.myMethod = function (sProperty) {
+    alert(arguments.length &gt; 0 ? this[sProperty] : this);
+};
+
+myArray.myMethod(); // prints "zero,one,two"
+myArray.myMethod(1); // prints "one"
+setTimeout(myArray.myMethod, 1000); // prints "[object Window]" after 1 second
+setTimeout(myArray.myMethod, 1500, "1"); // prints "undefined" after 1,5 seconds
+// passing the 'this' object with .call won't work
+// because this will change the value of this inside setTimeout itself
+// while we want to change the value of this inside myArray.myMethod
+// in fact, it will be an error because setTimeout code expects this to be the window object:
+setTimeout.call(myArray, myArray.myMethod, 2000); // error: "NS_ERROR_XPC_BAD_OP_ON_WN_PROTO: Illegal operation on WrappedNative prototype object"
+setTimeout.call(myArray, myArray.myMethod, 2500, 2); // same error
+</pre>
+
+<p>As you can see there are no ways to pass the <code>this</code> object to the callback function in the legacy JavaScript.</p>
+
+<h3 id="A_possible_solution">A possible solution</h3>
+
+<p>A possible way to solve the "<code>this</code>" problem is to replace the two native <code>setTimeout()</code> or <code>setInterval()</code> global functions with two <em>non-native</em> ones that enable their invocation through the <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Function/call"><code>Function.prototype.call</code></a> method. The following example shows a possible replacement:</p>
+
+<pre class="brush:js">// Enable the passage of the 'this' object through the JavaScript timers
+
+var __nativeST__ = window.setTimeout, __nativeSI__ = window.setInterval;
+
+window.setTimeout = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) {
+  var oThis = this, aArgs = Array.prototype.slice.call(arguments, 2);
+  return __nativeST__(vCallback instanceof Function ? function () {
+    vCallback.apply(oThis, aArgs);
+  } : vCallback, nDelay);
+};
+
+window.setInterval = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) {
+  var oThis = this, aArgs = Array.prototype.slice.call(arguments, 2);
+  return __nativeSI__(vCallback instanceof Function ? function () {
+    vCallback.apply(oThis, aArgs);
+  } : vCallback, nDelay);
+};</pre>
+
+<div class="note">These two replacements also enable the HTML5 standard passage of arbitrary arguments to the callback functions of timers in IE. So they can be used as <em>non-standard-compliant</em> polyfills also. See the <a href="#Callback_arguments">callback arguments paragraph</a> for a <em>standard-compliant</em> polyfill.</div>
+
+<p>New feature test:</p>
+
+<pre class="brush:js">myArray = ['zero', 'one', 'two'];
+
+myArray.myMethod = function (sProperty) {
+    alert(arguments.length &gt; 0 ? this[sProperty] : this);
+};
+
+setTimeout(alert, 1500, 'Hello world!'); // the standard use of setTimeout and setInterval is preserved, but...
+setTimeout.call(myArray, myArray.myMethod, 2000); // prints "zero,one,two" after 2 seconds
+setTimeout.call(myArray, myArray.myMethod, 2500, 2); // prints "two" after 2,5 seconds
+</pre>
+
+<p>Another, more complex, solution for<strong> </strong>the <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this"><code>this</code></a> problem<strong> </strong>is <a href="#MiniDaemon_-_A_framework_for_managing_timers">the following framework</a>.</p>
+
+<div class="note">JavaScript 1.8.5 introduces the <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind">Function.prototype.bind()</a></code> method, which lets you specify the value that should be used as <code>this</code> for all calls to a given function. This lets you easily bypass problems where it's unclear what this will be, depending on the context from which your function was called. Also, ES2015 supports <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions">arrow functions</a>, with lexical this allowing us to write setInterval( () =&gt; this.myMethod) if we're inside myArray method.</div>
+
+<h2 id="MiniDaemon_-_A_framework_for_managing_timers">MiniDaemon - A framework for managing timers</h2>
+
+<p>In pages requiring many timers, it can often be difficult to keep track of all of the running timer events. One approach to solving this problem is to store information about the state of a timer in an object. Following is a minimal example of such an abstraction. The constructor architecture explicitly avoids the use of closures. It also offers an alternative way to pass the <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this"><code>this</code></a> object to the callback function (see <a href="#The_.22this.22_problem">The "this" problem</a> for details). The following code is also <a href="https://github.com/madmurphy/minidaemon.js">available on GitHub</a>.</p>
+
+<div class="note">For a more complex but still modular version of it (<code><em>Daemon</em></code>) see <a href="/en-US/Add-ons/Code_snippets/Timers/Daemons">JavaScript Daemons Management</a>. This more complex version is nothing but a big and scalable collection of methods for the <code><em>Daemon</em></code> constructor. However, the <code><em>Daemon</em></code> constructor itself is nothing but a clone of <code><em>MiniDaemon</em></code> with an added support for <em>init</em> and <em>onstart</em> functions declarable during the instantiation of the <code><em>daemon</em></code>. <strong>So the <code><em>MiniDaemon</em></code> framework remains the recommended way for simple animations</strong>, because <code><em>Daemon</em></code> without its collection of methods is essentially a clone of it.</div>
+
+<h3 id="minidaemon.js">minidaemon.js</h3>
+
+<pre class="brush:js">/*\
+|*|
+|*|  :: MiniDaemon ::
+|*|
+|*|  Revision #2 - September 26, 2014
+|*|
+|*|  https://developer.mozilla.org/en-US/docs/Web/API/window.setInterval
+|*|  https://developer.mozilla.org/User:fusionchess
+|*|  https://github.com/madmurphy/minidaemon.js
+|*|
+|*|  This framework is released under the GNU Lesser General Public License, version 3 or later.
+|*|  http://www.gnu.org/licenses/lgpl-3.0.html
+|*|
+\*/
+
+function MiniDaemon (oOwner, fTask, nRate, nLen) {
+  if (!(this &amp;&amp; this instanceof MiniDaemon)) { return; }
+  if (arguments.length &lt; 2) { throw new TypeError('MiniDaemon - not enough arguments'); }
+  if (oOwner) { this.owner = oOwner; }
+  this.task = fTask;
+  if (isFinite(nRate) &amp;&amp; nRate &gt; 0) { this.rate = Math.floor(nRate); }
+  if (nLen &gt; 0) { this.length = Math.floor(nLen); }
+}
+
+MiniDaemon.prototype.owner = null;
+MiniDaemon.prototype.task = null;
+MiniDaemon.prototype.rate = 100;
+MiniDaemon.prototype.length = Infinity;
+
+  /* These properties should be read-only */
+
+MiniDaemon.prototype.SESSION = -1;
+MiniDaemon.prototype.INDEX = 0;
+MiniDaemon.prototype.PAUSED = true;
+MiniDaemon.prototype.BACKW = true;
+
+  /* Global methods */
+
+MiniDaemon.forceCall = function (oDmn) {
+  oDmn.INDEX += oDmn.BACKW ? -1 : 1;
+  if (oDmn.task.call(oDmn.owner, oDmn.INDEX, oDmn.length, oDmn.BACKW) === false || oDmn.isAtEnd()) { oDmn.pause(); return false; }
+  return true;
+};
+
+  /* Instances methods */
+
+MiniDaemon.prototype.isAtEnd = function () {
+  return this.BACKW ? isFinite(this.length) &amp;&amp; this.INDEX &lt; 1 : this.INDEX + 1 &gt; this.length;
+};
+
+MiniDaemon.prototype.synchronize = function () {
+  if (this.PAUSED) { return; }
+  clearInterval(this.SESSION);
+  this.SESSION = setInterval(MiniDaemon.forceCall, this.rate, this);
+};
+
+MiniDaemon.prototype.pause = function () {
+  clearInterval(this.SESSION);
+  this.PAUSED = true;
+};
+
+MiniDaemon.prototype.start = function (bReverse) {
+  var bBackw = Boolean(bReverse);
+  if (this.BACKW === bBackw &amp;&amp; (this.isAtEnd() || !this.PAUSED)) { return; }
+  this.BACKW = bBackw;
+  this.PAUSED = false;
+  this.synchronize();
+};
+</pre>
+
+<div class="note">MiniDaemon passes arguments to the callback function. If you want to work on it with browsers that natively do not support this feature, use one of the methods proposed above.</div>
+
+<h3 id="Syntax_2">Syntax</h3>
+
+<p><code>var myDaemon = new MiniDaemon(<em>thisObject</em>, <em>callback</em>[</code><code>, <em>rate</em></code><code>[, <em>length</em>]]);</code></p>
+
+<h3 id="Description">Description</h3>
+
+<p>Returns a JavaScript <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object"><code>Object</code></a> containing all information needed by an animation (like the <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this"><code>this</code></a> object, the callback function, the length, the frame-rate).</p>
+
+<h4 id="Arguments">Arguments</h4>
+
+<dl>
+ <dt><code>thisObject</code></dt>
+ <dd>The <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this"><code>this</code></a> object on which the <em>callback</em> function is called. It can be an <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object"><code>object</code></a> or <code>null</code>.</dd>
+ <dt><code>callback</code></dt>
+ <dd>The function that is repeatedly invoked . <strong>It is called with three arguments</strong>: <em>index</em> (the iterative index of each invocation), <em>length</em> (the number of total invocations assigned to the <em>daemon</em> - finite or <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Infinity"><code>Infinity</code></a>) and <em>backwards</em> (a boolean expressing whether the <em>index</em> is increasing or decreasing). It is something like <em>callback</em>.call(<em>thisObject</em>, <em>index</em>, <em>length</em>, <em>backwards</em>). <strong>If the callback function returns a <code>false</code> value the <em>daemon</em> is paused</strong>.</dd>
+ <dt><code>rate (optional)</code></dt>
+ <dd>The time lapse (in number of milliseconds) between each invocation. The default value is 100.</dd>
+ <dt><code>length (optional)</code></dt>
+ <dd>The total number of invocations. It can be a positive integer or <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Infinity"><code>Infinity</code></a>. The default value is <code>Infinity</code>.</dd>
+</dl>
+
+<h4 id="MiniDaemon_instances_properties"><code>MiniDaemon</code> instances properties</h4>
+
+<dl>
+ <dt><code>myDaemon.owner</code></dt>
+ <dd>The <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this"><code>this</code></a> object on which is executed the daemon (read/write). It can be an <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object"><code>object</code></a> or <code>null</code>.</dd>
+ <dt><code>myDaemon.task</code></dt>
+ <dd>The function that is repeatedly invoked (read/write). It is called with three arguments: <em>index</em> (the iterative index of each invocation), <em>length</em> (the number of total invocations assigned to the daemon - finite or <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Infinity"><code>Infinity</code></a>) and backwards (a boolean expressing whether the <em>index</em> is decreasing or not) – see above. If the <code>myDaemon.task</code> function returns a <code>false</code> value the <em>daemon</em> is paused.</dd>
+ <dt><code>myDaemon.rate</code></dt>
+ <dd>The time lapse (in number of milliseconds) between each invocation (read/write).</dd>
+ <dt><code>myDaemon.length</code></dt>
+ <dd>The total number of invocations. It can be a positive integer or <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Infinity"><code>Infinity</code></a> (read/write).</dd>
+</dl>
+
+<h4 id="MiniDaemon_instances_methods"><code>MiniDaemon</code> instances methods</h4>
+
+<dl>
+ <dt><code>myDaemon.isAtEnd()</code></dt>
+ <dd>Returns a boolean expressing whether the <em>daemon</em> is at the start/end position or not.</dd>
+ <dt><code>myDaemon.synchronize()</code></dt>
+ <dd>Synchronize the timer of a started daemon with the time of its invocation.</dd>
+ <dt><code>myDaemon.pause()</code></dt>
+ <dd>Pauses the daemon.</dd>
+ <dt><code>myDaemon.start([<em>reverse</em>])</code></dt>
+ <dd>Starts the daemon forward (<em>index</em> of each invocation increasing) or backwards (<em>index</em> decreasing).</dd>
+</dl>
+
+<h4 id="MiniDaemon_global_object_methods"><code>MiniDaemon</code> global object methods</h4>
+
+<dl>
+ <dt><code>MiniDaemon.forceCall(<em>minidaemon</em>)</code></dt>
+ <dd>Forces a single callback to the <code><em>minidaemon</em>.task</code> function regardless of the fact that the end has been reached or not. In any case the internal <code>INDEX</code> property is increased/decreased (depending on the actual direction of the process).</dd>
+</dl>
+
+<h3 id="Example_usage">Example usage</h3>
+
+<p>Your HTML page:</p>
+
+<pre class="brush:html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+  &lt;meta charset="UTF-8" /&gt;
+  &lt;title&gt;MiniDaemin Example - MDN&lt;/title&gt;
+  &lt;script type="text/javascript" src="minidaemon.js"&gt;&lt;/script&gt;
+  &lt;style type="text/css"&gt;
+    #sample_div {
+      visibility: hidden;
+    }
+  &lt;/style&gt;
+&lt;/head&gt;
+
+&lt;body&gt;
+  &lt;p&gt;
+    &lt;input type="button" onclick="fadeInOut.start(false /* optional */);" value="fade in" /&gt;
+    &lt;input type="button" onclick="fadeInOut.start(true);" value="fade out"&gt;
+    &lt;input type="button" onclick="fadeInOut.pause();" value="pause" /&gt;
+  &lt;/p&gt;
+
+  &lt;div id="sample_div"&gt;Some text here&lt;/div&gt;
+
+  &lt;script type="text/javascript"&gt;
+    function opacity (nIndex, nLength, bBackwards) {
+      this.style.opacity = nIndex / nLength;
+      if (bBackwards ? nIndex === 0 : nIndex === 1) {
+        this.style.visibility = bBackwards ? 'hidden' : 'visible';
+      }
+    }
+
+    var fadeInOut = new MiniDaemon(document.getElementById('sample_div'), opacity, 300, 8);
+  &lt;/script&gt;
+&lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p><a href="/files/3995/minidaemon_example.html" title="MiniDaemon Example">View this example in action</a></p>
+
+<h2 id="Usage_notes">Usage notes</h2>
+
+<p>The <code>setInterval()</code> function is commonly used to set a delay for functions that are executed again and again, such as animations. You can cancel the interval using {{domxref("WindowOrWorkerGlobalScope.clearInterval()")}}.</p>
+
+<p>If you wish to have your function called <em>once</em> after the specified delay, use {{domxref("WindowOrWorkerGlobalScope.setTimeout()")}}.</p>
+
+<h3 id="Delay_restrictions">Delay restrictions</h3>
+
+<p>It's possible for intervals to be nested; that is, the callback for <code>setInterval()</code> can in turn call <code>setInterval()</code> to start another interval running, even though the first one is still going. To mitigate the potential impact this can have on performance, once intervals are nested beyond five levels deep, the browser will automatically enforce a 4 ms minimum value for the interval. Attempts to specify a value less than 4 ms in deeply-nested calls to <code>setInterval()</code> will be pinned to 4 ms.</p>
+
+<p>Browsers may enforce even more stringent minimum values for the interval under some circumstances, although these should not be common. Note also that the actual amount of time that elapses between calls to the callback may be longer than the given <code>delay</code>; see {{SectionOnPage("/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout", "Reasons for delays longer than specified")}} for examples.</p>
+
+<h3 id="Ensure_that_execution_duration_is_shorter_than_interval_frequency">Ensure that execution duration is shorter than interval frequency</h3>
+
+<p>If there is a possibility that your logic could take longer to execute than the interval time, it is recommended that you recursively call a named function using {{domxref("WindowOrWorkerGlobalScope.setTimeout", "setTimeout()")}}. For example, if using <code>setInterval()</code> to poll a remote server every 5 seconds, network latency, an unresponsive server, and a host of other issues could prevent the request from completing in its allotted time. As such, you may find yourself with queued up XHR requests that won't necessarily return in order.</p>
+
+<p>In these cases, a recursive <code>setTimeout()</code> pattern is preferred:</p>
+
+<pre class="brush:js">(function loop(){
+   setTimeout(function() {
+      // Your logic here
+
+      loop();
+  }, delay);
+})();
+</pre>
+
+<p>In the above snippet, a named function <code>loop()</code> is declared and is immediately executed. <code>loop()</code> is recursively called inside <code>setTimeout()</code> after the logic has completed executing. While this pattern does not guarantee execution on a fixed interval, it does guarantee that the previous interval has completed before recursing.</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Specification</th>
+   <th>Status</th>
+   <th>Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'webappapis.html#dom-setinterval', 'WindowOrWorkerGlobalScope.setInterval()')}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td>Method moved to the <code>WindowOrWorkerGlobalScope</code> mixin in the latest spec.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML WHATWG", "webappapis.html#dom-setinterval", "WindowTimers.setInterval()")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td>Initial definition (DOM Level 0)</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>
+
+
+<p>{{Compat("api.WindowOrWorkerGlobalScope.setInterval")}}</p>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/Add-ons/Code_snippets/Timers">JavaScript timers</a></li>
+ <li>{{domxref("WindowOrWorkerGlobalScope.setTimeout")}}</li>
+ <li>{{domxref("WindowOrWorkerGlobalScope.clearTimeout")}}</li>
+ <li>{{domxref("WindowOrWorkerGlobalScope.clearInterval")}}</li>
+ <li>{{domxref("window.requestAnimationFrame")}}</li>
+ <li><a href="/en-US/Add-ons/Code_snippets/Timers/Daemons"><em>Daemons</em> management</a></li>
+</ul>
diff --git a/files/zh-tw/web/api/windoworworkerglobalscope/btoa/index.html b/files/zh-tw/web/api/windoworworkerglobalscope/btoa/index.html
deleted file mode 100644
index 93d63b6010..0000000000
--- a/files/zh-tw/web/api/windoworworkerglobalscope/btoa/index.html
+++ /dev/null
@@ -1,136 +0,0 @@
----
-title: WindowOrWorkerGlobalScope.btoa()
-slug: Web/API/WindowOrWorkerGlobalScope/btoa
-translation_of: Web/API/WindowOrWorkerGlobalScope/btoa
----
-<p>{{APIRef("HTML DOM")}}</p>
-
-<p>The <code><strong>WindowOrWorkerGlobalScope.btoa()</strong></code> method creates a {{glossary("Base64")}}-encoded ASCII string from a <a href="/en-US/docs/Web/API/DOMString/Binary">binary string</a> (i.e., a {{jsxref("String")}} object in which each character in the string is treated as a byte of binary data).</p>
-
-<p>You can use this method to encode data which may otherwise cause communication problems, transmit it, then use the {{domxref("WindowOrWorkerGlobalScope.atob", "atob()")}} method to decode the data again. For example, you can encode control characters such as ASCII values 0 through 31.</p>
-
-<h2 id="Syntax">Syntax</h2>
-
-<pre class="syntaxbox notranslate">var <var>encodedData</var> = <var>scope</var>.btoa(<var>stringToEncode</var>);</pre>
-
-<h3 id="Parameters">Parameters</h3>
-
-<dl>
- <dt><code><var>stringToEncode</var></code></dt>
- <dd>The <a href="/en-US/docs/Web/API/DOMString/Binary">binary string</a> to encode.</dd>
-</dl>
-
-<h3 id="Return_value">Return value</h3>
-
-<p>An ASCII string containing the Base64 representation of <code><var>stringToEncode</var></code>.</p>
-
-<h3 id="Exceptions">Exceptions</h3>
-
-<dl>
- <dt><code>InvalidCharacterError</code></dt>
- <dd>The string contained a character that did not fit in a single byte. See "Unicode strings" below for more detail.</dd>
-</dl>
-
-<h2 id="Example">Example</h2>
-
-<pre class="brush:js notranslate">const encodedData = window.btoa('Hello, world'); // encode a string
-const decodedData = window.atob(encodedData); // decode the string
-</pre>
-
-<h2 id="Unicode_strings">Unicode strings</h2>
-
-<p>The <code>btoa()</code> function takes a JavaScript string as a parameter. In JavaScript strings are represented using the UTF-16 character encoding: in this encoding, strings are represented as a sequence of 16-bit (2 byte) units. Every ASCII character fits into the first byte of one of these units, but many other characters don't.</p>
-
-<p>Base64, by design, expects binary data as its input. In terms of JavaScript strings, this means strings in which each character occupies only one byte. So if you pass a string into <code>btoa()</code> containing characters that occupy more than one byte, you will get an error, because this is not considered binary data:</p>
-
-<pre class="brush: js notranslate">const ok = "a";
-console.log(ok.codePointAt(0).toString(16)); //   61: occupies &lt; 1 byte
-
-const notOK = "✓"
-console.log(notOK.codePointAt(0).toString(16)); // 2713: occupies &gt; 1 byte
-
-console.log(btoa(ok));    // YQ==
-console.log(btoa(notOK)); // error</pre>
-
-<p>If you need to encode Unicode text as ASCII using <code>btoa()</code>, one option is to convert the string such that each 16-bit unit occupies only one byte. For example:</p>
-
-<pre class="brush: js notranslate">// convert a Unicode string to a string in which
-// each 16-bit unit occupies only one byte
-function toBinary(string) {
-  const codeUnits = new Uint16Array(string.length);
-  for (let i = 0; i &lt; codeUnits.length; i++) {
-    codeUnits[i] = string.charCodeAt(i);
-  }
-  return String.fromCharCode(...new Uint8Array(codeUnits.buffer));
-}
-
-// a string that contains characters occupying &gt; 1 byte
-const myString = "☸☹☺☻☼☾☿";
-
-const converted = toBinary(myString);
-const encoded = btoa(converted);
-console.log(encoded);                 // OCY5JjomOyY8Jj4mPyY=
-</pre>
-
-<p>If you do this, of course you'll have to reverse the conversion on the decoded string:</p>
-
-<pre class="brush: js language-js notranslate">function fromBinary(binary) {
-  const bytes = new Uint8Array(binary.length);
-  for (let i = 0; i &lt; bytes.length; i++) {
-    bytes[i] = binary.charCodeAt(i);
-  }
-  return String.fromCharCode(...new Uint16Array(bytes.buffer));
-}
-
-const decoded = atob(encoded);
-const original = fromBinary(decoded);
-console.log(original);                // ☸☹☺☻☼☾☿
-</pre>
-
-<h2 id="Polyfill">Polyfill</h2>
-
-<p>You can use a polyfill from <a href="https://github.com/MaxArt2501/base64-js/blob/master/base64.js">https://github.com/MaxArt2501/base64-js/blob/master/base64.js</a> for browsers that don't support it.</p>
-
-<h2 id="Specifications">Specifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Specification</th>
-   <th scope="col">Status</th>
-   <th scope="col">Comment</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', '#dom-btoa', 'WindowOrWorkerGlobalScope.btoa()')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td>Method moved to the <code>WindowOrWorkerGlobalScope</code> mixin in the latest spec.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5.1', '#dom-windowbase64-btoa', 'WindowBase64.btoa()')}}</td>
-   <td>{{Spec2('HTML5.1')}}</td>
-   <td>Snapshot of {{SpecName("HTML WHATWG")}}. No change.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName("HTML5 W3C", "#dom-windowbase64-btoa", "WindowBase64.btoa()")}}</td>
-   <td>{{Spec2('HTML5 W3C')}}</td>
-   <td>Snapshot of {{SpecName("HTML WHATWG")}}. Creation of <code>WindowBase64</code> (properties where on the target before it).</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility">Browser compatibility</h2>
-
-<div>
-
-
-<p>{{Compat("api.WindowOrWorkerGlobalScope.btoa")}}</p>
-</div>
-
-<h2 id="See_also">See also</h2>
-
-<ul>
- <li><a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs"><code>data</code> URIs</a></li>
- <li>{{domxref("WindowOrWorkerGlobalScope.atob","atob()")}}</li>
-</ul>
diff --git a/files/zh-tw/web/api/windoworworkerglobalscope/setinterval/index.html b/files/zh-tw/web/api/windoworworkerglobalscope/setinterval/index.html
deleted file mode 100644
index 7685a8f754..0000000000
--- a/files/zh-tw/web/api/windoworworkerglobalscope/setinterval/index.html
+++ /dev/null
@@ -1,627 +0,0 @@
----
-title: WindowOrWorkerGlobalScope.setInterval()
-slug: Web/API/WindowOrWorkerGlobalScope/setInterval
-translation_of: Web/API/WindowOrWorkerGlobalScope/setInterval
----
-<div>{{APIRef("HTML DOM")}}</div>
-
-<p><span class="seoSummary"><strong><code>setInterval()</code></strong> 函式, {{domxref("Window")}} 與 {{domxref("Worker")}} 介面皆提供此一函式, 此函式作用為重複地執行一個函式呼叫或一個程式碼片斷, 每一次執行間隔固定的延遲時間.</span> 此函式呼叫時將傳回一個間隔代碼(Interval ID)用以識別該間隔程序, 因此後續您可以呼叫 {{domxref("WindowOrWorkerGlobalScope.clearInterval", "clearInterval()")}} 函式移除該間隔程序. 此函式為由 {{domxref("WindowOrWorkerGlobalScope")}} 混合定義.</p>
-
-<h2 id="Syntax">Syntax</h2>
-
-<pre class="syntaxbox"><em>var intervalID</em> = <em>scope</em>.setInterval(<em>func</em>, [<em>delay</em>, <em>arg1</em>, <em>arg2</em>, ...]);
-<em>var intervalID</em> = <em>scope</em>.setInterval(<em>code</em>, [<em>delay]</em>);
-</pre>
-
-<h3 id="Parameters">Parameters</h3>
-
-<dl>
- <dt><code>func</code></dt>
- <dd>A {{jsxref("function")}} to be executed every <code>delay</code> milliseconds. The function is not passed any arguments, and no return value is expected.</dd>
- <dt><code>code</code></dt>
- <dd>An optional syntax allows you to include a string instead of a function, which is compiled and executed every <code>delay</code> milliseconds. This syntax is <em>not recommended</em> for the same reasons that make using {{jsxref("eval", "eval()")}} a security risk.</dd>
- <dt><code>delay</code>{{optional_inline}}</dt>
- <dd>The time, in milliseconds (thousandths of a second), the timer should delay in between executions of the specified function or code. See {{anch("Delay restrictions")}} below for details on the permitted range of <code>delay</code> values.</dd>
- <dt><code>arg1, ..., argN</code> {{optional_inline}}</dt>
- <dd>Additional arguments which are passed through to the function specified by <em>func</em> once the timer expires.</dd>
-</dl>
-
-<div class="note">
-<p><strong>Note</strong>: Passing additional arguments to <code>setInterval()</code> in the first syntax does not work in Internet Explorer 9 and earlier. If you want to enable this functionality on that browser, you must use a polyfill (see the <a href="#Callback_arguments">Callback arguments</a> section).</p>
-</div>
-
-<h3 id="Return_value">Return value</h3>
-
-<p>The returned <code>intervalID</code> is a numeric, non-zero value which identifies the timer created by the call to <code>setInterval()</code>; this value can be passed to {{domxref("WindowOrWorkerGlobalScope.clearInterval()")}} to cancel the timeout.</p>
-
-<p>It may be helpful to be aware that <code>setInterval()</code> and {{domxref("WindowOrWorkerGlobalScope.setTimeout", "setTimeout()")}} share the same pool of IDs, and that <code>clearInterval()</code> and {{domxref("WindowOrWorkerGlobalScope.clearTimeout", "clearTimeout()")}} can technically be used interchangeably. For clarity, however, you should try to always match them to avoid confusion when maintaining your code.</p>
-
-<div class="note"><strong>Note</strong>: The <code>delay</code> argument is converted to a signed 32-bit integer. This effectively limits <code>delay</code> to 2147483647 ms, since it's specified as a signed integer in the IDL.</div>
-
-<h2 id="Examples">Examples</h2>
-
-<h3 id="Example_1_Basic_syntax">Example 1: Basic syntax</h3>
-
-<p>The following example demonstrates <code>setInterval()</code>'s basic syntax.</p>
-
-<pre class="brush:js">var intervalID = window.setInterval(myCallback, 500, 'Parameter 1', 'Parameter 2');
-
-function myCallback(a, b)
-{
- // Your code here
- // Parameters are purely optional.
- console.log(a);
- console.log(b);
-}
-</pre>
-
-<h3 id="Example_2_Alternating_two_colors">Example 2: Alternating two colors</h3>
-
-<p>The following example calls the <code>flashtext()</code> function once a second until the Stop button is pressed.</p>
-
-<pre class="brush:html">&lt;!DOCTYPE html&gt;
-&lt;html&gt;
-&lt;head&gt;
-  &lt;meta charset="UTF-8" /&gt;
-  &lt;title&gt;setInterval/clearInterval example&lt;/title&gt;
-
-  &lt;script&gt;
-    var nIntervId;
-
-    function changeColor() {
-      nIntervId = setInterval(flashText, 1000);
-    }
-
-    function flashText() {
-      var oElem = document.getElementById('my_box');
-      oElem.style.color = oElem.style.color == 'red' ? 'blue' : 'red';
-      // oElem.style.color == 'red' ? 'blue' : 'red' is a ternary operator.
-    }
-
-    function stopTextColor() {
-      clearInterval(nIntervId);
-    }
-  &lt;/script&gt;
-&lt;/head&gt;
-
-&lt;body onload="changeColor();"&gt;
-  &lt;div id="my_box"&gt;
-    &lt;p&gt;Hello World&lt;/p&gt;
-  &lt;/div&gt;
-
-  &lt;button onclick="stopTextColor();"&gt;Stop&lt;/button&gt;
-&lt;/body&gt;
-&lt;/html&gt;
-</pre>
-
-<h3 id="Example_3_Typewriter_simulation">Example 3: Typewriter simulation</h3>
-
-<p>The following example simulates typewriter by first clearing and then slowly typing content into the <a href="/en-US/docs/DOM/NodeList"><code>NodeList</code></a> that matches a specified group of selectors.</p>
-
-<pre class="brush:html">&lt;!DOCTYPE html&gt;
-&lt;html&gt;
-&lt;head&gt;
-&lt;meta charset="UTF-8" /&gt;
-&lt;title&gt;JavaScript Typewriter - MDN Example&lt;/title&gt;
-&lt;script&gt;
-  function Typewriter (sSelector, nRate) {
-
-  function clean () {
-    clearInterval(nIntervId);
-    bTyping = false;
-    bStart = true;
-    oCurrent = null;
-    aSheets.length = nIdx = 0;
-  }
-
-  function scroll (oSheet, nPos, bEraseAndStop) {
-    if (!oSheet.hasOwnProperty('parts') || aMap.length &lt; nPos) { return true; }
-
-    var oRel, bExit = false;
-
-    if (aMap.length === nPos) { aMap.push(0); }
-
-    while (aMap[nPos] &lt; oSheet.parts.length) {
-      oRel = oSheet.parts[aMap[nPos]];
-
-      scroll(oRel, nPos + 1, bEraseAndStop) ? aMap[nPos]++ : bExit = true;
-
-      if (bEraseAndStop &amp;&amp; (oRel.ref.nodeType - 1 | 1) === 3 &amp;&amp; oRel.ref.nodeValue) {
-        bExit = true;
-        oCurrent = oRel.ref;
-        sPart = oCurrent.nodeValue;
-        oCurrent.nodeValue = '';
-      }
-
-      oSheet.ref.appendChild(oRel.ref);
-      if (bExit) { return false; }
-    }
-
-    aMap.length--;
-    return true;
-  }
-
-  function typewrite () {
-    if (sPart.length === 0 &amp;&amp; scroll(aSheets[nIdx], 0, true) &amp;&amp; nIdx++ === aSheets.length - 1) { clean(); return; }
-
-    oCurrent.nodeValue += sPart.charAt(0);
-    sPart = sPart.slice(1);
-  }
-
-  function Sheet (oNode) {
-    this.ref = oNode;
-    if (!oNode.hasChildNodes()) { return; }
-    this.parts = Array.prototype.slice.call(oNode.childNodes);
-
-    for (var nChild = 0; nChild &lt; this.parts.length; nChild++) {
-      oNode.removeChild(this.parts[nChild]);
-      this.parts[nChild] = new Sheet(this.parts[nChild]);
-    }
-  }
-
-  var
-    nIntervId, oCurrent = null, bTyping = false, bStart = true,
-    nIdx = 0, sPart = "", aSheets = [], aMap = [];
-
-  this.rate = nRate || 100;
-
-  this.play = function () {
-    if (bTyping) { return; }
-    if (bStart) {
-      var aItems = document.querySelectorAll(sSelector);
-
-      if (aItems.length === 0) { return; }
-      for (var nItem = 0; nItem &lt; aItems.length; nItem++) {
-        aSheets.push(new Sheet(aItems[nItem]));
-        /* Uncomment the following line if you have previously hidden your elements via CSS: */
-        // aItems[nItem].style.visibility = "visible";
-      }
-
-      bStart = false;
-    }
-
-    nIntervId = setInterval(typewrite, this.rate);
-    bTyping = true;
-  };
-
-  this.pause = function () {
-    clearInterval(nIntervId);
-    bTyping = false;
-  };
-
-  this.terminate = function () {
-    oCurrent.nodeValue += sPart;
-    sPart = "";
-    for (nIdx; nIdx &lt; aSheets.length; scroll(aSheets[nIdx++], 0, false));
-    clean();
-  };
-}
-
-/* usage: */
-var oTWExample1 = new Typewriter(/* elements: */ '#article, h1, #info, #copyleft', /* frame rate (optional): */ 15);
-
-/* default frame rate is 100: */
-var oTWExample2 = new Typewriter('#controls');
-
-/* you can also change the frame rate value modifying the "rate" property; for example: */
-// oTWExample2.rate = 150;
-
-onload = function () {
-  oTWExample1.play();
-  oTWExample2.play();
-};
-&lt;/script&gt;
-&lt;style type="text/css"&gt;
-span.intLink, a, a:visited {
-  cursor: pointer;
-  color: #000000;
-  text-decoration: underline;
-}
-
-#info {
-  width: 180px;
-  height: 150px;
-  float: right;
-  background-color: #eeeeff;
-  padding: 4px;
-  overflow: auto;
-  font-size: 12px;
-  margin: 4px;
-  border-radius: 5px;
-  /* visibility: hidden; */
-}
-&lt;/style&gt;
-&lt;/head&gt;
-
-&lt;body&gt;
-
-&lt;p id="copyleft" style="font-style: italic; font-size: 12px; text-align: center;"&gt;CopyLeft 2012 by &lt;a href="https://developer.mozilla.org/" target="_blank"&gt;Mozilla Developer Network&lt;/a&gt;&lt;/p&gt;
-&lt;p id="controls" style="text-align: center;"&gt;[&amp;nbsp;&lt;span class="intLink" onclick="oTWExample1.play();"&gt;Play&lt;/span&gt; | &lt;span class="intLink" onclick="oTWExample1.pause();"&gt;Pause&lt;/span&gt; | &lt;span class="intLink" onclick="oTWExample1.terminate();"&gt;Terminate&lt;/span&gt;&amp;nbsp;]&lt;/p&gt;
-&lt;div id="info"&gt;
-Vivamus blandit massa ut metus mattis in fringilla lectus imperdiet. Proin ac ante a felis ornare vehicula. Fusce pellentesque lacus vitae eros convallis ut mollis magna pellentesque. Pellentesque placerat enim at lacus ultricies vitae facilisis nisi fringilla. In tincidunt tincidunt tincidunt.
-&lt;/div&gt;
-&lt;h1&gt;JavaScript Typewriter&lt;/h1&gt;
-
-&lt;div id="article"&gt;
-&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ultrices dolor ac dolor imperdiet ullamcorper. Suspendisse quam libero, luctus auctor mollis sed, malesuada condimentum magna. Quisque in ante tellus, in placerat est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec a mi magna, quis mattis dolor. Etiam sit amet ligula quis urna auctor imperdiet nec faucibus ante. Mauris vel consectetur dolor. Nunc eget elit eget velit pulvinar fringilla consectetur aliquam purus. Curabitur convallis, justo posuere porta egestas, velit erat ornare tortor, non viverra justo diam eget arcu. Phasellus adipiscing fermentum nibh ac commodo. Nam turpis nunc, suscipit a hendrerit vitae, volutpat non ipsum.&lt;/p&gt;
-&lt;form&gt;
-&lt;p&gt;Phasellus ac nisl lorem: &lt;input type="text" /&gt;&lt;br /&gt;
-&lt;textarea style="width: 400px; height: 200px;"&gt;Nullam commodo suscipit lacus non aliquet. Phasellus ac nisl lorem, sed facilisis ligula. Nam cursus lobortis placerat. Sed dui nisi, elementum eu sodales ac, placerat sit amet mauris. Pellentesque dapibus tellus ut ipsum aliquam eu auctor dui vehicula. Quisque ultrices laoreet erat, at ultrices tortor sodales non. Sed venenatis luctus magna, ultricies ultricies nunc fringilla eget. Praesent scelerisque urna vitae nibh tristique varius consequat neque luctus. Integer ornare, erat a porta tempus, velit justo fermentum elit, a fermentum metus nisi eu ipsum. Vivamus eget augue vel dui viverra adipiscing congue ut massa. Praesent vitae eros erat, pulvinar laoreet magna. Maecenas vestibulum mollis nunc in posuere. Pellentesque sit amet metus a turpis lobortis tempor eu vel tortor. Cras sodales eleifend interdum.&lt;/textarea&gt;&lt;/p&gt;
-&lt;p&gt;&lt;input type="submit" value="Send" /&gt;
-&lt;/form&gt;
-&lt;p&gt;Duis lobortis sapien quis nisl luctus porttitor. In tempor semper libero, eu tincidunt dolor eleifend sit amet. Ut nec velit in dolor tincidunt rhoncus non non diam. Morbi auctor ornare orci, non euismod felis gravida nec. Curabitur elementum nisi a eros rutrum nec blandit diam placerat. Aenean tincidunt risus ut nisi consectetur cursus. Ut vitae quam elit. Donec dignissim est in quam tempor consequat. Aliquam aliquam diam non felis convallis suscipit. Nulla facilisi. Donec lacus risus, dignissim et fringilla et, egestas vel eros. Duis malesuada accumsan dui, at fringilla mauris bibStartum quis. Cras adipiscing ultricies fermentum. Praesent bibStartum condimentum feugiat.&lt;/p&gt;
-&lt;p&gt;Nam faucibus, ligula eu fringilla pulvinar, lectus tellus iaculis nunc, vitae scelerisque metus leo non metus. Proin mattis lobortis lobortis. Quisque accumsan faucibus erat, vel varius tortor ultricies ac. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec libero nunc. Nullam tortor nunc, elementum a consectetur et, ultrices eu orci. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a nisl eu sem vehicula egestas.&lt;/p&gt;
-&lt;/div&gt;
-&lt;/body&gt;
-&lt;/html&gt;</pre>
-
-<p><a href="/files/3997/typewriter.html">View this demo in action</a>. See also: <a href="/en-US/docs/DOM/window.clearInterval"><code>clearInterval()</code></a>.</p>
-
-<h2 id="Callback_arguments">Callback arguments</h2>
-
-<p>As previously discussed, Internet Explorer versions 9 and below do not support the passing of arguments to the callback function in either <code>setTimeout()</code> or <code>setInterval()</code>. The following <strong>IE-specific</strong> code demonstrates a method for overcoming this limitation.  To use, simply add the following code to the top of your script.</p>
-
-<pre class="brush:js">/*\
-|*|
-|*|  IE-specific polyfill that enables the passage of arbitrary arguments to the
-|*|  callback functions of javascript timers (HTML5 standard syntax).
-|*|
-|*|  https://developer.mozilla.org/en-US/docs/Web/API/window.setInterval
-|*|  https://developer.mozilla.org/User:fusionchess
-|*|
-|*|  Syntax:
-|*|  var timeoutID = window.setTimeout(func, delay[, arg1, arg2, ...]);
-|*|  var timeoutID = window.setTimeout(code, delay);
-|*|  var intervalID = window.setInterval(func, delay[, arg1, arg2, ...]);
-|*|  var intervalID = window.setInterval(code, delay);
-|*|
-\*/
-
-if (document.all &amp;&amp; !window.setTimeout.isPolyfill) {
-  var __nativeST__ = window.setTimeout;
-  window.setTimeout = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) {
-    var aArgs = Array.prototype.slice.call(arguments, 2);
-    return __nativeST__(vCallback instanceof Function ? function () {
-      vCallback.apply(null, aArgs);
-    } : vCallback, nDelay);
-  };
-  window.setTimeout.isPolyfill = true;
-}
-
-if (document.all &amp;&amp; !window.setInterval.isPolyfill) {
-  var __nativeSI__ = window.setInterval;
-  window.setInterval = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) {
-    var aArgs = Array.prototype.slice.call(arguments, 2);
-    return __nativeSI__(vCallback instanceof Function ? function () {
-      vCallback.apply(null, aArgs);
-    } : vCallback, nDelay);
-  };
-  window.setInterval.isPolyfill = true;
-}
-</pre>
-
-<p>Another possibility is to use an anonymous function to call your callback, although this solution is a bit more expensive. Example:</p>
-
-<pre class="brush:js">var intervalID = setInterval(function() { myFunc('one', 'two', 'three'); }, 1000);</pre>
-
-<p>Another possibility is to use <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind">function's bind</a>. Example:</p>
-
-<pre class="brush:js">var intervalID = setInterval(function(arg1) {}.bind(undefined, 10), 1000);</pre>
-
-<p>{{h3_gecko_minversion("Inactive tabs", "5.0")}}</p>
-
-<p>Starting in Gecko 5.0 {{geckoRelease("5.0")}}, intervals are clamped to fire no more often than once per second in inactive tabs.</p>
-
-<h2 id="The_this_problem">The "<a href="/en-US/docs/Web/JavaScript/Reference/Operators/this"><code>this</code></a>" problem</h2>
-
-<p>When you pass a method to <code>setInterval()</code> or any other function, it is invoked with the wrong <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this"><code>this</code></a> value. This problem is explained in detail in the <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this#As_an_object_method">JavaScript reference</a>.</p>
-
-<h3 id="Explanation">Explanation</h3>
-
-<p>Code executed by <code>setInterval()</code> runs in a separate execution context than the function from which it was called. As a consequence, the <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this"><code>this</code></a> keyword for the called function is set to the <code>window</code> (or <code>global</code>) object, it is not the same as the <code>this</code> value for the function that called <code>setTimeout</code>. See the following example (which uses <code>setTimeout()</code> instead of <code>setInterval()</code> – the problem, in fact, is the same for both timers):</p>
-
-<pre class="brush:js">myArray = ['zero', 'one', 'two'];
-
-myArray.myMethod = function (sProperty) {
-    alert(arguments.length &gt; 0 ? this[sProperty] : this);
-};
-
-myArray.myMethod(); // prints "zero,one,two"
-myArray.myMethod(1); // prints "one"
-setTimeout(myArray.myMethod, 1000); // prints "[object Window]" after 1 second
-setTimeout(myArray.myMethod, 1500, "1"); // prints "undefined" after 1,5 seconds
-// passing the 'this' object with .call won't work
-// because this will change the value of this inside setTimeout itself
-// while we want to change the value of this inside myArray.myMethod
-// in fact, it will be an error because setTimeout code expects this to be the window object:
-setTimeout.call(myArray, myArray.myMethod, 2000); // error: "NS_ERROR_XPC_BAD_OP_ON_WN_PROTO: Illegal operation on WrappedNative prototype object"
-setTimeout.call(myArray, myArray.myMethod, 2500, 2); // same error
-</pre>
-
-<p>As you can see there are no ways to pass the <code>this</code> object to the callback function in the legacy JavaScript.</p>
-
-<h3 id="A_possible_solution">A possible solution</h3>
-
-<p>A possible way to solve the "<code>this</code>" problem is to replace the two native <code>setTimeout()</code> or <code>setInterval()</code> global functions with two <em>non-native</em> ones that enable their invocation through the <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Function/call"><code>Function.prototype.call</code></a> method. The following example shows a possible replacement:</p>
-
-<pre class="brush:js">// Enable the passage of the 'this' object through the JavaScript timers
-
-var __nativeST__ = window.setTimeout, __nativeSI__ = window.setInterval;
-
-window.setTimeout = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) {
-  var oThis = this, aArgs = Array.prototype.slice.call(arguments, 2);
-  return __nativeST__(vCallback instanceof Function ? function () {
-    vCallback.apply(oThis, aArgs);
-  } : vCallback, nDelay);
-};
-
-window.setInterval = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) {
-  var oThis = this, aArgs = Array.prototype.slice.call(arguments, 2);
-  return __nativeSI__(vCallback instanceof Function ? function () {
-    vCallback.apply(oThis, aArgs);
-  } : vCallback, nDelay);
-};</pre>
-
-<div class="note">These two replacements also enable the HTML5 standard passage of arbitrary arguments to the callback functions of timers in IE. So they can be used as <em>non-standard-compliant</em> polyfills also. See the <a href="#Callback_arguments">callback arguments paragraph</a> for a <em>standard-compliant</em> polyfill.</div>
-
-<p>New feature test:</p>
-
-<pre class="brush:js">myArray = ['zero', 'one', 'two'];
-
-myArray.myMethod = function (sProperty) {
-    alert(arguments.length &gt; 0 ? this[sProperty] : this);
-};
-
-setTimeout(alert, 1500, 'Hello world!'); // the standard use of setTimeout and setInterval is preserved, but...
-setTimeout.call(myArray, myArray.myMethod, 2000); // prints "zero,one,two" after 2 seconds
-setTimeout.call(myArray, myArray.myMethod, 2500, 2); // prints "two" after 2,5 seconds
-</pre>
-
-<p>Another, more complex, solution for<strong> </strong>the <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this"><code>this</code></a> problem<strong> </strong>is <a href="#MiniDaemon_-_A_framework_for_managing_timers">the following framework</a>.</p>
-
-<div class="note">JavaScript 1.8.5 introduces the <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind">Function.prototype.bind()</a></code> method, which lets you specify the value that should be used as <code>this</code> for all calls to a given function. This lets you easily bypass problems where it's unclear what this will be, depending on the context from which your function was called. Also, ES2015 supports <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions">arrow functions</a>, with lexical this allowing us to write setInterval( () =&gt; this.myMethod) if we're inside myArray method.</div>
-
-<h2 id="MiniDaemon_-_A_framework_for_managing_timers">MiniDaemon - A framework for managing timers</h2>
-
-<p>In pages requiring many timers, it can often be difficult to keep track of all of the running timer events. One approach to solving this problem is to store information about the state of a timer in an object. Following is a minimal example of such an abstraction. The constructor architecture explicitly avoids the use of closures. It also offers an alternative way to pass the <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this"><code>this</code></a> object to the callback function (see <a href="#The_.22this.22_problem">The "this" problem</a> for details). The following code is also <a href="https://github.com/madmurphy/minidaemon.js">available on GitHub</a>.</p>
-
-<div class="note">For a more complex but still modular version of it (<code><em>Daemon</em></code>) see <a href="/en-US/Add-ons/Code_snippets/Timers/Daemons">JavaScript Daemons Management</a>. This more complex version is nothing but a big and scalable collection of methods for the <code><em>Daemon</em></code> constructor. However, the <code><em>Daemon</em></code> constructor itself is nothing but a clone of <code><em>MiniDaemon</em></code> with an added support for <em>init</em> and <em>onstart</em> functions declarable during the instantiation of the <code><em>daemon</em></code>. <strong>So the <code><em>MiniDaemon</em></code> framework remains the recommended way for simple animations</strong>, because <code><em>Daemon</em></code> without its collection of methods is essentially a clone of it.</div>
-
-<h3 id="minidaemon.js">minidaemon.js</h3>
-
-<pre class="brush:js">/*\
-|*|
-|*|  :: MiniDaemon ::
-|*|
-|*|  Revision #2 - September 26, 2014
-|*|
-|*|  https://developer.mozilla.org/en-US/docs/Web/API/window.setInterval
-|*|  https://developer.mozilla.org/User:fusionchess
-|*|  https://github.com/madmurphy/minidaemon.js
-|*|
-|*|  This framework is released under the GNU Lesser General Public License, version 3 or later.
-|*|  http://www.gnu.org/licenses/lgpl-3.0.html
-|*|
-\*/
-
-function MiniDaemon (oOwner, fTask, nRate, nLen) {
-  if (!(this &amp;&amp; this instanceof MiniDaemon)) { return; }
-  if (arguments.length &lt; 2) { throw new TypeError('MiniDaemon - not enough arguments'); }
-  if (oOwner) { this.owner = oOwner; }
-  this.task = fTask;
-  if (isFinite(nRate) &amp;&amp; nRate &gt; 0) { this.rate = Math.floor(nRate); }
-  if (nLen &gt; 0) { this.length = Math.floor(nLen); }
-}
-
-MiniDaemon.prototype.owner = null;
-MiniDaemon.prototype.task = null;
-MiniDaemon.prototype.rate = 100;
-MiniDaemon.prototype.length = Infinity;
-
-  /* These properties should be read-only */
-
-MiniDaemon.prototype.SESSION = -1;
-MiniDaemon.prototype.INDEX = 0;
-MiniDaemon.prototype.PAUSED = true;
-MiniDaemon.prototype.BACKW = true;
-
-  /* Global methods */
-
-MiniDaemon.forceCall = function (oDmn) {
-  oDmn.INDEX += oDmn.BACKW ? -1 : 1;
-  if (oDmn.task.call(oDmn.owner, oDmn.INDEX, oDmn.length, oDmn.BACKW) === false || oDmn.isAtEnd()) { oDmn.pause(); return false; }
-  return true;
-};
-
-  /* Instances methods */
-
-MiniDaemon.prototype.isAtEnd = function () {
-  return this.BACKW ? isFinite(this.length) &amp;&amp; this.INDEX &lt; 1 : this.INDEX + 1 &gt; this.length;
-};
-
-MiniDaemon.prototype.synchronize = function () {
-  if (this.PAUSED) { return; }
-  clearInterval(this.SESSION);
-  this.SESSION = setInterval(MiniDaemon.forceCall, this.rate, this);
-};
-
-MiniDaemon.prototype.pause = function () {
-  clearInterval(this.SESSION);
-  this.PAUSED = true;
-};
-
-MiniDaemon.prototype.start = function (bReverse) {
-  var bBackw = Boolean(bReverse);
-  if (this.BACKW === bBackw &amp;&amp; (this.isAtEnd() || !this.PAUSED)) { return; }
-  this.BACKW = bBackw;
-  this.PAUSED = false;
-  this.synchronize();
-};
-</pre>
-
-<div class="note">MiniDaemon passes arguments to the callback function. If you want to work on it with browsers that natively do not support this feature, use one of the methods proposed above.</div>
-
-<h3 id="Syntax_2">Syntax</h3>
-
-<p><code>var myDaemon = new MiniDaemon(<em>thisObject</em>, <em>callback</em>[</code><code>, <em>rate</em></code><code>[, <em>length</em>]]);</code></p>
-
-<h3 id="Description">Description</h3>
-
-<p>Returns a JavaScript <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object"><code>Object</code></a> containing all information needed by an animation (like the <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this"><code>this</code></a> object, the callback function, the length, the frame-rate).</p>
-
-<h4 id="Arguments">Arguments</h4>
-
-<dl>
- <dt><code>thisObject</code></dt>
- <dd>The <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this"><code>this</code></a> object on which the <em>callback</em> function is called. It can be an <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object"><code>object</code></a> or <code>null</code>.</dd>
- <dt><code>callback</code></dt>
- <dd>The function that is repeatedly invoked . <strong>It is called with three arguments</strong>: <em>index</em> (the iterative index of each invocation), <em>length</em> (the number of total invocations assigned to the <em>daemon</em> - finite or <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Infinity"><code>Infinity</code></a>) and <em>backwards</em> (a boolean expressing whether the <em>index</em> is increasing or decreasing). It is something like <em>callback</em>.call(<em>thisObject</em>, <em>index</em>, <em>length</em>, <em>backwards</em>). <strong>If the callback function returns a <code>false</code> value the <em>daemon</em> is paused</strong>.</dd>
- <dt><code>rate (optional)</code></dt>
- <dd>The time lapse (in number of milliseconds) between each invocation. The default value is 100.</dd>
- <dt><code>length (optional)</code></dt>
- <dd>The total number of invocations. It can be a positive integer or <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Infinity"><code>Infinity</code></a>. The default value is <code>Infinity</code>.</dd>
-</dl>
-
-<h4 id="MiniDaemon_instances_properties"><code>MiniDaemon</code> instances properties</h4>
-
-<dl>
- <dt><code>myDaemon.owner</code></dt>
- <dd>The <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this"><code>this</code></a> object on which is executed the daemon (read/write). It can be an <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object"><code>object</code></a> or <code>null</code>.</dd>
- <dt><code>myDaemon.task</code></dt>
- <dd>The function that is repeatedly invoked (read/write). It is called with three arguments: <em>index</em> (the iterative index of each invocation), <em>length</em> (the number of total invocations assigned to the daemon - finite or <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Infinity"><code>Infinity</code></a>) and backwards (a boolean expressing whether the <em>index</em> is decreasing or not) – see above. If the <code>myDaemon.task</code> function returns a <code>false</code> value the <em>daemon</em> is paused.</dd>
- <dt><code>myDaemon.rate</code></dt>
- <dd>The time lapse (in number of milliseconds) between each invocation (read/write).</dd>
- <dt><code>myDaemon.length</code></dt>
- <dd>The total number of invocations. It can be a positive integer or <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Infinity"><code>Infinity</code></a> (read/write).</dd>
-</dl>
-
-<h4 id="MiniDaemon_instances_methods"><code>MiniDaemon</code> instances methods</h4>
-
-<dl>
- <dt><code>myDaemon.isAtEnd()</code></dt>
- <dd>Returns a boolean expressing whether the <em>daemon</em> is at the start/end position or not.</dd>
- <dt><code>myDaemon.synchronize()</code></dt>
- <dd>Synchronize the timer of a started daemon with the time of its invocation.</dd>
- <dt><code>myDaemon.pause()</code></dt>
- <dd>Pauses the daemon.</dd>
- <dt><code>myDaemon.start([<em>reverse</em>])</code></dt>
- <dd>Starts the daemon forward (<em>index</em> of each invocation increasing) or backwards (<em>index</em> decreasing).</dd>
-</dl>
-
-<h4 id="MiniDaemon_global_object_methods"><code>MiniDaemon</code> global object methods</h4>
-
-<dl>
- <dt><code>MiniDaemon.forceCall(<em>minidaemon</em>)</code></dt>
- <dd>Forces a single callback to the <code><em>minidaemon</em>.task</code> function regardless of the fact that the end has been reached or not. In any case the internal <code>INDEX</code> property is increased/decreased (depending on the actual direction of the process).</dd>
-</dl>
-
-<h3 id="Example_usage">Example usage</h3>
-
-<p>Your HTML page:</p>
-
-<pre class="brush:html">&lt;!DOCTYPE html&gt;
-&lt;html&gt;
-&lt;head&gt;
-  &lt;meta charset="UTF-8" /&gt;
-  &lt;title&gt;MiniDaemin Example - MDN&lt;/title&gt;
-  &lt;script type="text/javascript" src="minidaemon.js"&gt;&lt;/script&gt;
-  &lt;style type="text/css"&gt;
-    #sample_div {
-      visibility: hidden;
-    }
-  &lt;/style&gt;
-&lt;/head&gt;
-
-&lt;body&gt;
-  &lt;p&gt;
-    &lt;input type="button" onclick="fadeInOut.start(false /* optional */);" value="fade in" /&gt;
-    &lt;input type="button" onclick="fadeInOut.start(true);" value="fade out"&gt;
-    &lt;input type="button" onclick="fadeInOut.pause();" value="pause" /&gt;
-  &lt;/p&gt;
-
-  &lt;div id="sample_div"&gt;Some text here&lt;/div&gt;
-
-  &lt;script type="text/javascript"&gt;
-    function opacity (nIndex, nLength, bBackwards) {
-      this.style.opacity = nIndex / nLength;
-      if (bBackwards ? nIndex === 0 : nIndex === 1) {
-        this.style.visibility = bBackwards ? 'hidden' : 'visible';
-      }
-    }
-
-    var fadeInOut = new MiniDaemon(document.getElementById('sample_div'), opacity, 300, 8);
-  &lt;/script&gt;
-&lt;/body&gt;
-&lt;/html&gt;</pre>
-
-<p><a href="/files/3995/minidaemon_example.html" title="MiniDaemon Example">View this example in action</a></p>
-
-<h2 id="Usage_notes">Usage notes</h2>
-
-<p>The <code>setInterval()</code> function is commonly used to set a delay for functions that are executed again and again, such as animations. You can cancel the interval using {{domxref("WindowOrWorkerGlobalScope.clearInterval()")}}.</p>
-
-<p>If you wish to have your function called <em>once</em> after the specified delay, use {{domxref("WindowOrWorkerGlobalScope.setTimeout()")}}.</p>
-
-<h3 id="Delay_restrictions">Delay restrictions</h3>
-
-<p>It's possible for intervals to be nested; that is, the callback for <code>setInterval()</code> can in turn call <code>setInterval()</code> to start another interval running, even though the first one is still going. To mitigate the potential impact this can have on performance, once intervals are nested beyond five levels deep, the browser will automatically enforce a 4 ms minimum value for the interval. Attempts to specify a value less than 4 ms in deeply-nested calls to <code>setInterval()</code> will be pinned to 4 ms.</p>
-
-<p>Browsers may enforce even more stringent minimum values for the interval under some circumstances, although these should not be common. Note also that the actual amount of time that elapses between calls to the callback may be longer than the given <code>delay</code>; see {{SectionOnPage("/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout", "Reasons for delays longer than specified")}} for examples.</p>
-
-<h3 id="Ensure_that_execution_duration_is_shorter_than_interval_frequency">Ensure that execution duration is shorter than interval frequency</h3>
-
-<p>If there is a possibility that your logic could take longer to execute than the interval time, it is recommended that you recursively call a named function using {{domxref("WindowOrWorkerGlobalScope.setTimeout", "setTimeout()")}}. For example, if using <code>setInterval()</code> to poll a remote server every 5 seconds, network latency, an unresponsive server, and a host of other issues could prevent the request from completing in its allotted time. As such, you may find yourself with queued up XHR requests that won't necessarily return in order.</p>
-
-<p>In these cases, a recursive <code>setTimeout()</code> pattern is preferred:</p>
-
-<pre class="brush:js">(function loop(){
-   setTimeout(function() {
-      // Your logic here
-
-      loop();
-  }, delay);
-})();
-</pre>
-
-<p>In the above snippet, a named function <code>loop()</code> is declared and is immediately executed. <code>loop()</code> is recursively called inside <code>setTimeout()</code> after the logic has completed executing. While this pattern does not guarantee execution on a fixed interval, it does guarantee that the previous interval has completed before recursing.</p>
-
-<h2 id="Specifications">Specifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th>Specification</th>
-   <th>Status</th>
-   <th>Comment</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', 'webappapis.html#dom-setinterval', 'WindowOrWorkerGlobalScope.setInterval()')}}</td>
-   <td>{{Spec2("HTML WHATWG")}}</td>
-   <td>Method moved to the <code>WindowOrWorkerGlobalScope</code> mixin in the latest spec.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName("HTML WHATWG", "webappapis.html#dom-setinterval", "WindowTimers.setInterval()")}}</td>
-   <td>{{Spec2("HTML WHATWG")}}</td>
-   <td>Initial definition (DOM Level 0)</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility">Browser compatibility</h2>
-
-<div>
-
-
-<p>{{Compat("api.WindowOrWorkerGlobalScope.setInterval")}}</p>
-</div>
-
-<h2 id="See_also">See also</h2>
-
-<ul>
- <li><a href="/en-US/Add-ons/Code_snippets/Timers">JavaScript timers</a></li>
- <li>{{domxref("WindowOrWorkerGlobalScope.setTimeout")}}</li>
- <li>{{domxref("WindowOrWorkerGlobalScope.clearTimeout")}}</li>
- <li>{{domxref("WindowOrWorkerGlobalScope.clearInterval")}}</li>
- <li>{{domxref("window.requestAnimationFrame")}}</li>
- <li><a href="/en-US/Add-ons/Code_snippets/Timers/Daemons"><em>Daemons</em> management</a></li>
-</ul>
diff --git a/files/zh-tw/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html b/files/zh-tw/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html
index 57e89bdf94..c29958f3db 100644
--- a/files/zh-tw/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html
+++ b/files/zh-tw/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html
@@ -656,7 +656,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout
 
 <p>In this article we have had a very quick look through the Grid Layout Specification. Have a play with the code examples, and then move onto <a href="https://developer.mozilla.org/zh-TW/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">the next part of this guide where we will really start to dig into the detail of CSS Grid Layout</a>.</p>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li><a href="/zh-TW/docs/Web/CSS"><strong>CSS</strong></a></li>
  <li><a href="/zh-TW/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li>
diff --git a/files/zh-tw/web/css/css_grid_layout/index.html b/files/zh-tw/web/css/css_grid_layout/index.html
index 0fd5616848..dd32113679 100644
--- a/files/zh-tw/web/css/css_grid_layout/index.html
+++ b/files/zh-tw/web/css/css_grid_layout/index.html
@@ -193,7 +193,7 @@ translation_of: Web/CSS/CSS_Grid_Layout
  </tbody>
 </table>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li><a href="/zh-TW/docs/Web/CSS"><strong>CSS</strong></a></li>
  <li><a href="/zh-TW/docs/Web/CSS/Reference"><strong>CSS 參考</strong></a></li>
diff --git a/files/zh-tw/web/css/grid-row/index.html b/files/zh-tw/web/css/grid-row/index.html
index e3e6daca74..4f2a2270de 100644
--- a/files/zh-tw/web/css/grid-row/index.html
+++ b/files/zh-tw/web/css/grid-row/index.html
@@ -137,7 +137,7 @@ grid-row: unset;
  <li>Video tutorial: <em><a href="http://gridbyexample.com/video/series-line-based-placement/">Line-based placement</a></em></li>
 </ul>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li>
  <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li>
diff --git a/files/zh-tw/web/css/grid-template-columns/index.html b/files/zh-tw/web/css/grid-template-columns/index.html
index ac327e5b4e..690f7125df 100644
--- a/files/zh-tw/web/css/grid-template-columns/index.html
+++ b/files/zh-tw/web/css/grid-template-columns/index.html
@@ -139,7 +139,7 @@ grid-template-columns: unset;
  <li>Video tutorial: <em><a href="http://gridbyexample.com/video/series-define-a-grid/">Defining a Grid</a></em></li>
 </ul>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li>
  <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li>
diff --git a/files/zh-tw/web/css/grid-template/index.html b/files/zh-tw/web/css/grid-template/index.html
index 9682acb462..e4a13e78f0 100644
--- a/files/zh-tw/web/css/grid-template/index.html
+++ b/files/zh-tw/web/css/grid-template/index.html
@@ -140,7 +140,7 @@ footer {
  <li>Video tutorial:<em> <a href="http://gridbyexample.com/video/grid-template-shorthand/">Grid Template shorthand</a></em></li>
 </ul>
 
-<section class="Quick_links" id="Quick_Links">
+<section id="Quick_links">
 <ol>
  <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li>
  <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li>
diff --git a/files/zh-tw/web/demos/index.html b/files/zh-tw/web/demos/index.html
new file mode 100644
index 0000000000..862fc1bbbb
--- /dev/null
+++ b/files/zh-tw/web/demos/index.html
@@ -0,0 +1,145 @@
+---
+title: Demos of open web technologies
+slug: Web/Demos
+tags:
+  - 影片
+  - 網站
+  - 網頁
+  - 設計
+translation_of: Web/Demos_of_open_web_technologies
+original_slug: Web/Demos_of_open_web_technologies
+---
+<p>Mozilla 支援豐富、廣泛且扣人心弦的網路公開技術，並且我們鼓勵使用他們。這個頁面提供一些展示這些有趣技術的連結，包含那些曾經在 Demo Studio 有人氣的，但<a href="https://blog.mozilla.org/community/2015/12/18/saying-goodbye-to-demo-studio/">現在已經落伍了</a>的技術。如果你知道有關於新的網路公開技術，不錯的展示或是應用程式，請將連結加到下方適合的區塊中。</p>
+
+<h2 id="2D_繪圖">2D 繪圖</h2>
+
+<h3 id="SVG" name="SVG">Canvas</h3>
+
+<ul>
+ <li><a class="external" href="http://www.blobsallad.se/">An interactive blob using javascript and canvas (fun)</a></li>
+ <li><a class="external" href="http://blobsallad.se/article/" title="http://blobsallad.se/article/">Blob's demos</a></li>
+ <li><a class="external" href="http://www.xs4all.nl/~peterned/3d/" title="http://www.xs4all.nl/~peterned/3d/">Canvas3D &amp; Flickr</a></li>
+ <li><a class="external" href="http://arapehlivanian.com/wp-content/uploads/2007/02/canvas.html" title="http://arapehlivanian.com/wp-content/uploads/2007/02/canvas.html">Playing with Canvas</a></li>
+ <li><a class="external" href="http://langexplr.blogspot.com/2008/11/using-canvas-html-element.html" title="http://langexplr.blogspot.com/2008/11/using-canvas-html-element.html">Using the Canvas Html element5</a></li>
+ <li><a class="external" href="/samples/raycaster/RayCaster.html" title="https://developer.mozilla.org/editor/fckeditor/core/editor/samples/raycaster/RayCaster.html">RayCaster</a></li>
+ <li><a class="external" href="http://jsmsxdemo.googlepages.com/jsmsx.html" title="http://jsmsxdemo.googlepages.com/jsmsx.html">MSX Emulator</a></li>
+ <li><a class="external" href="http://processingjs.org/exhibition/" title="http://dev.jquery.com/~john/processing.js/examples/basic/">processing.js</a></li>
+ <li><a class="external" href="http://gyu.que.jp/jscloth/" title="http://gyu.que.jp/jscloth/">3D on 2D Canvas</a></li>
+ <li><a href="http://viliusle.github.io/miniPaint/">miniPaint - Image editor </a>(<a href="https://github.com/viliusle/miniPaint">source code</a>)</li>
+</ul>
+
+<h3 id="SVG" name="SVG">SVG</h3>
+
+<ul>
+ <li><a class="external" href="http://starkravingfinkle.org/projects/demo/svg-bubblemenu-in-html.xml">Bubblemenu</a> (visual effects and interaction)</li>
+ <li><a class="external" href="http://starkravingfinkle.org/blog/2007/07/firefox-3-svg-foreignobject/">HTML transformations</a> using <code>foreignObject</code> (visual effects and transforms)</li>
+ <li><a class="external" href="http://svg-whiz.com/svg/linguistics/theCreepyMouth.svg">Phonetics Guide</a> (interactive)</li>
+ <li><a class="external" href="http://www.lutanho.net/svgvml3d/platonic.html">3D objects demo</a> (interactive)</li>
+ <li><a class="external" href="http://www.themaninblue.com/experiment/Blobular/" title="http://www.themaninblue.com/experiment/Blobular/">Blobular</a> (interactive)</li>
+ <li><a class="external" href="http://www.double.co.nz/video_test/video.svg">Video embedded in SVG</a> (or use the <a class="external" href="http://www.double.co.nz/video_test/video_svg.tar.bz2">local download</a>)</li>
+ <li><a href="http://summerstyle.github.io/summer/">Summer HTML image map creator</a> (<a href="https://github.com/summerstyle/summer">source code</a>)</li>
+ <li><a href="http://s.codepen.io/SoftwareRVG/debug/JRJZVW">SVG/CSS demo firefox developer edition</a> design by Rober Villar from Software RVG (<a href="https://github.com/SoftwareRVG/mde_design/blob/master/css_svg_dev">source code</a>) (<a href="http://s.codepen.io/SoftwareRVG/debug/JRJZVW">debug mode</a>)</li>
+</ul>
+
+<h3 id="Video" name="Video">影片</h3>
+
+<ul>
+ <li><a href="https://vimeo.com/172328210">Video 3D Animation "mozilla constantly evolving" Designed by Rober Villar ,SoftwareRVG developer.</a></li>
+ <li><a class="external external-icon" href="https://vimeo.com/173851395">Video 3D animation "Floating Dance" . Designed by Rober Villar , developer from SoftwareRVGdesignS.</a></li>
+ <li><a class="external" href="http://www.double.co.nz/video_test/test1.html">Streaming Anime, Movie Trailer and Interview</a></li>
+ <li><a class="external" href="http://www.double.co.nz/video_test/test2.html">Billy's Browser Firefox Flick</a></li>
+ <li><a class="external" href="http://www.double.co.nz/video_test/test3.html">Virtual Barber Shop</a></li>
+ <li><a class="external" href="http://www.double.co.nz/video_test/test4.html">Transformers Movie Trailer</a></li>
+ <li><a class="external" href="http://www.double.co.nz/video_test/test5.html">A Scanner Darkly Movie Trailer</a> (with built in controls)</li>
+ <li><a class="external" href="http://www.double.co.nz/video_test/events.html">Events firing and volume control</a></li>
+ <li><a class="external" href="http://www.double.co.nz/video_test/video.svg" title="http://www.double.co.nz/video_test/video.svg">Dragable and sizable videos</a></li>
+</ul>
+
+<h2 id="3D_繪圖">3D 繪圖</h2>
+
+<h3 id="WebGL">WebGL</h3>
+
+<ul>
+ <li><a href="http://ondras.github.io/fireworks-webgl/">Web Audio Fireworks</a></li>
+ <li>IoQuake3 (<a href="https://github.com/klaussilveira/ioquake3.js">source code</a>)</li>
+ <li>Escher puzzle (<a href="https://github.com/micahbolen/demoscene">source code</a>)</li>
+ <li><a href="http://collinhover.github.io/kaiopua/">Kai 'Opua</a> (<a href="https://github.com/collinhover/kaiopua">source code</a>)</li>
+</ul>
+
+<h3 id="虛擬實境_(_Virtual_Reality_)">虛擬實境 ( Virtual Reality )</h3>
+
+<ul>
+ <li><a href="http://mozvr.com/demos/polarsea/">The Polar Sea</a> (<a href="https://github.com/MozVR/polarsea">source code</a>)</li>
+ <li>Sechelt fly-through (<a href="https://github.com/mozvr/sechelt">source code</a>)</li>
+</ul>
+
+<h2 id="CSS">CSS</h2>
+
+<ul>
+ <li><a class="external external-icon" href="https://codepen.io/SoftwareRVG/full/OXkOWj">CSS floating logo " mozilla "  developed by Rober Villar , from Software RVG. </a>(debug mode)</li>
+ <li><a class="external external-icon" href="http://codepen.io/SoftwareRVG/pen/OXkOWj/">CSS floating logo " mozilla "  developed by Rober Villar , from Software RVG. </a>(source code)</li>
+ <li><a href="http://felixniklas.com/paperfold/">Paperfold</a></li>
+ <li><a href="http://ondras.github.io/blockout/">CSS Blockout</a></li>
+ <li><a href="http://ondras.zarovi.cz/demos/rubik/">Rubik's cube</a></li>
+ <li><a href="http://ondras.zarovi.cz/demos/nojs/">Pure CSS Slides</a></li>
+ <li>Planetarium (<a href="https://github.com/littleworkshop/planetarium">source code</a>)</li>
+</ul>
+
+<h3 id="轉換_(_Transformations_)">轉換 ( Transformations )</h3>
+
+<ul>
+ <li><a href="http://impress.github.io/impress.js">Impress.js</a> (<a href="https://github.com/impress/impress.js">source code</a>)</li>
+</ul>
+
+<h2 id="遊戲">遊戲</h2>
+
+<ul>
+ <li>IoQuake3 (<a href="https://github.com/klaussilveira/ioquake3.js">source code</a>)</li>
+ <li><a href="http://collinhover.github.io/kaiopua/">Kai 'Opua</a> (<a href="https://github.com/collinhover/kaiopua">source code</a>)</li>
+</ul>
+
+<h2 id="HTML">HTML</h2>
+
+<ul>
+ <li> <a href="http://zenphoton.com">Zen Photon Garden </a>(<a href="https://github.com/scanlime/zenphoton">source code</a>)</li>
+</ul>
+
+<h2 id="Web_APIs">Web APIs</h2>
+
+<ul>
+</ul>
+
+<h3 id="提示工具的_API">提示工具的 API</h3>
+
+<ul>
+ <li><a href="http://elfoxero.github.io/html5notifications/">HTML5 Notifications</a> (<a href="https://github.com/elfoxero/html5notifications">source code</a>)</li>
+</ul>
+
+<ul>
+</ul>
+
+<h3 id="網路_API">網路 API</h3>
+
+<ul>
+ <li><a href="http://ondras.github.io/fireworks-webgl/">Web Audio Fireworks</a></li>
+ <li><a href="http://ondras.github.io/oscope/">oscope.js - JavaScript oscilloscope</a></li>
+ <li><a href="http://nipe-systems.de/webapps/html5-web-audio/">HTML5 Web Audio Showcase</a> (<a href="https://github.com/NIPE-SYSTEMS/html5-web-audio-showcase">source code</a>)</li>
+ <li><a href="http://wayou.github.io/HTML5_Audio_Visualizer/">HTML5 Audio Visualizer</a> (<a href="https://github.com/Wayou/HTML5_Audio_Visualizer">source code</a>)</li>
+ <li><a href="http://carlosrafaelgn.com.br/GraphicalFilterEditor/">Graphical Filter Editor and Visualizer</a> (<a href="https://github.com/carlosrafaelgn/GraphicalFilterEditor">source code</a>)</li>
+</ul>
+
+<h3 id="檔案的_API">檔案的 API</h3>
+
+<ul>
+ <li><a href="http://palerdot.github.io/slide-my-text/">Slide My Text - presentation from plain text files</a></li>
+</ul>
+
+<h3 id="Unclassified" name="Unclassified">Web Workers</h3>
+
+<ul>
+ <li><a href="http://ondras.github.io/fractal/">Web Worker Fractals</a></li>
+ <li><a href="http://ondras.github.io/photo/">圖片編輯器</a></li>
+ <li><a href="http://ondras.github.io/coral/">Coral generator</a></li>
+ <li><a class="external" href="http://nerget.com/rayjs-mt/rayjs.html" title="http://nerget.com/rayjs-mt/rayjs.html">Raytracer</a></li>
+ <li><a href="http://palerdot.github.io/hotcold/">HotCold Touch Typing</a></li>
+</ul>
diff --git a/files/zh-tw/web/demos_of_open_web_technologies/index.html b/files/zh-tw/web/demos_of_open_web_technologies/index.html
deleted file mode 100644
index 5baa250a38..0000000000
--- a/files/zh-tw/web/demos_of_open_web_technologies/index.html
+++ /dev/null
@@ -1,144 +0,0 @@
----
-title: Demos of open web technologies
-slug: Web/Demos_of_open_web_technologies
-tags:
-  - 影片
-  - 網站
-  - 網頁
-  - 設計
-translation_of: Web/Demos_of_open_web_technologies
----
-<p>Mozilla 支援豐富、廣泛且扣人心弦的網路公開技術，並且我們鼓勵使用他們。這個頁面提供一些展示這些有趣技術的連結，包含那些曾經在 Demo Studio 有人氣的，但<a href="https://blog.mozilla.org/community/2015/12/18/saying-goodbye-to-demo-studio/">現在已經落伍了</a>的技術。如果你知道有關於新的網路公開技術，不錯的展示或是應用程式，請將連結加到下方適合的區塊中。</p>
-
-<h2 id="2D_繪圖">2D 繪圖</h2>
-
-<h3 id="SVG" name="SVG">Canvas</h3>
-
-<ul>
- <li><a class="external" href="http://www.blobsallad.se/">An interactive blob using javascript and canvas (fun)</a></li>
- <li><a class="external" href="http://blobsallad.se/article/" title="http://blobsallad.se/article/">Blob's demos</a></li>
- <li><a class="external" href="http://www.xs4all.nl/~peterned/3d/" title="http://www.xs4all.nl/~peterned/3d/">Canvas3D &amp; Flickr</a></li>
- <li><a class="external" href="http://arapehlivanian.com/wp-content/uploads/2007/02/canvas.html" title="http://arapehlivanian.com/wp-content/uploads/2007/02/canvas.html">Playing with Canvas</a></li>
- <li><a class="external" href="http://langexplr.blogspot.com/2008/11/using-canvas-html-element.html" title="http://langexplr.blogspot.com/2008/11/using-canvas-html-element.html">Using the Canvas Html element5</a></li>
- <li><a class="external" href="/samples/raycaster/RayCaster.html" title="https://developer.mozilla.org/editor/fckeditor/core/editor/samples/raycaster/RayCaster.html">RayCaster</a></li>
- <li><a class="external" href="http://jsmsxdemo.googlepages.com/jsmsx.html" title="http://jsmsxdemo.googlepages.com/jsmsx.html">MSX Emulator</a></li>
- <li><a class="external" href="http://processingjs.org/exhibition/" title="http://dev.jquery.com/~john/processing.js/examples/basic/">processing.js</a></li>
- <li><a class="external" href="http://gyu.que.jp/jscloth/" title="http://gyu.que.jp/jscloth/">3D on 2D Canvas</a></li>
- <li><a href="http://viliusle.github.io/miniPaint/">miniPaint - Image editor </a>(<a href="https://github.com/viliusle/miniPaint">source code</a>)</li>
-</ul>
-
-<h3 id="SVG" name="SVG">SVG</h3>
-
-<ul>
- <li><a class="external" href="http://starkravingfinkle.org/projects/demo/svg-bubblemenu-in-html.xml">Bubblemenu</a> (visual effects and interaction)</li>
- <li><a class="external" href="http://starkravingfinkle.org/blog/2007/07/firefox-3-svg-foreignobject/">HTML transformations</a> using <code>foreignObject</code> (visual effects and transforms)</li>
- <li><a class="external" href="http://svg-whiz.com/svg/linguistics/theCreepyMouth.svg">Phonetics Guide</a> (interactive)</li>
- <li><a class="external" href="http://www.lutanho.net/svgvml3d/platonic.html">3D objects demo</a> (interactive)</li>
- <li><a class="external" href="http://www.themaninblue.com/experiment/Blobular/" title="http://www.themaninblue.com/experiment/Blobular/">Blobular</a> (interactive)</li>
- <li><a class="external" href="http://www.double.co.nz/video_test/video.svg">Video embedded in SVG</a> (or use the <a class="external" href="http://www.double.co.nz/video_test/video_svg.tar.bz2">local download</a>)</li>
- <li><a href="http://summerstyle.github.io/summer/">Summer HTML image map creator</a> (<a href="https://github.com/summerstyle/summer">source code</a>)</li>
- <li><a href="http://s.codepen.io/SoftwareRVG/debug/JRJZVW">SVG/CSS demo firefox developer edition</a> design by Rober Villar from Software RVG (<a href="https://github.com/SoftwareRVG/mde_design/blob/master/css_svg_dev">source code</a>) (<a href="http://s.codepen.io/SoftwareRVG/debug/JRJZVW">debug mode</a>)</li>
-</ul>
-
-<h3 id="Video" name="Video">影片</h3>
-
-<ul>
- <li><a href="https://vimeo.com/172328210">Video 3D Animation "mozilla constantly evolving" Designed by Rober Villar ,SoftwareRVG developer.</a></li>
- <li><a class="external external-icon" href="https://vimeo.com/173851395">Video 3D animation "Floating Dance" . Designed by Rober Villar , developer from SoftwareRVGdesignS.</a></li>
- <li><a class="external" href="http://www.double.co.nz/video_test/test1.html">Streaming Anime, Movie Trailer and Interview</a></li>
- <li><a class="external" href="http://www.double.co.nz/video_test/test2.html">Billy's Browser Firefox Flick</a></li>
- <li><a class="external" href="http://www.double.co.nz/video_test/test3.html">Virtual Barber Shop</a></li>
- <li><a class="external" href="http://www.double.co.nz/video_test/test4.html">Transformers Movie Trailer</a></li>
- <li><a class="external" href="http://www.double.co.nz/video_test/test5.html">A Scanner Darkly Movie Trailer</a> (with built in controls)</li>
- <li><a class="external" href="http://www.double.co.nz/video_test/events.html">Events firing and volume control</a></li>
- <li><a class="external" href="http://www.double.co.nz/video_test/video.svg" title="http://www.double.co.nz/video_test/video.svg">Dragable and sizable videos</a></li>
-</ul>
-
-<h2 id="3D_繪圖">3D 繪圖</h2>
-
-<h3 id="WebGL">WebGL</h3>
-
-<ul>
- <li><a href="http://ondras.github.io/fireworks-webgl/">Web Audio Fireworks</a></li>
- <li>IoQuake3 (<a href="https://github.com/klaussilveira/ioquake3.js">source code</a>)</li>
- <li>Escher puzzle (<a href="https://github.com/micahbolen/demoscene">source code</a>)</li>
- <li><a href="http://collinhover.github.io/kaiopua/">Kai 'Opua</a> (<a href="https://github.com/collinhover/kaiopua">source code</a>)</li>
-</ul>
-
-<h3 id="虛擬實境_(_Virtual_Reality_)">虛擬實境 ( Virtual Reality )</h3>
-
-<ul>
- <li><a href="http://mozvr.com/demos/polarsea/">The Polar Sea</a> (<a href="https://github.com/MozVR/polarsea">source code</a>)</li>
- <li>Sechelt fly-through (<a href="https://github.com/mozvr/sechelt">source code</a>)</li>
-</ul>
-
-<h2 id="CSS">CSS</h2>
-
-<ul>
- <li><a class="external external-icon" href="https://codepen.io/SoftwareRVG/full/OXkOWj">CSS floating logo " mozilla "  developed by Rober Villar , from Software RVG. </a>(debug mode)</li>
- <li><a class="external external-icon" href="http://codepen.io/SoftwareRVG/pen/OXkOWj/">CSS floating logo " mozilla "  developed by Rober Villar , from Software RVG. </a>(source code)</li>
- <li><a href="http://felixniklas.com/paperfold/">Paperfold</a></li>
- <li><a href="http://ondras.github.io/blockout/">CSS Blockout</a></li>
- <li><a href="http://ondras.zarovi.cz/demos/rubik/">Rubik's cube</a></li>
- <li><a href="http://ondras.zarovi.cz/demos/nojs/">Pure CSS Slides</a></li>
- <li>Planetarium (<a href="https://github.com/littleworkshop/planetarium">source code</a>)</li>
-</ul>
-
-<h3 id="轉換_(_Transformations_)">轉換 ( Transformations )</h3>
-
-<ul>
- <li><a href="http://impress.github.io/impress.js">Impress.js</a> (<a href="https://github.com/impress/impress.js">source code</a>)</li>
-</ul>
-
-<h2 id="遊戲">遊戲</h2>
-
-<ul>
- <li>IoQuake3 (<a href="https://github.com/klaussilveira/ioquake3.js">source code</a>)</li>
- <li><a href="http://collinhover.github.io/kaiopua/">Kai 'Opua</a> (<a href="https://github.com/collinhover/kaiopua">source code</a>)</li>
-</ul>
-
-<h2 id="HTML">HTML</h2>
-
-<ul>
- <li> <a href="http://zenphoton.com">Zen Photon Garden </a>(<a href="https://github.com/scanlime/zenphoton">source code</a>)</li>
-</ul>
-
-<h2 id="Web_APIs">Web APIs</h2>
-
-<ul>
-</ul>
-
-<h3 id="提示工具的_API">提示工具的 API</h3>
-
-<ul>
- <li><a href="http://elfoxero.github.io/html5notifications/">HTML5 Notifications</a> (<a href="https://github.com/elfoxero/html5notifications">source code</a>)</li>
-</ul>
-
-<ul>
-</ul>
-
-<h3 id="網路_API">網路 API</h3>
-
-<ul>
- <li><a href="http://ondras.github.io/fireworks-webgl/">Web Audio Fireworks</a></li>
- <li><a href="http://ondras.github.io/oscope/">oscope.js - JavaScript oscilloscope</a></li>
- <li><a href="http://nipe-systems.de/webapps/html5-web-audio/">HTML5 Web Audio Showcase</a> (<a href="https://github.com/NIPE-SYSTEMS/html5-web-audio-showcase">source code</a>)</li>
- <li><a href="http://wayou.github.io/HTML5_Audio_Visualizer/">HTML5 Audio Visualizer</a> (<a href="https://github.com/Wayou/HTML5_Audio_Visualizer">source code</a>)</li>
- <li><a href="http://carlosrafaelgn.com.br/GraphicalFilterEditor/">Graphical Filter Editor and Visualizer</a> (<a href="https://github.com/carlosrafaelgn/GraphicalFilterEditor">source code</a>)</li>
-</ul>
-
-<h3 id="檔案的_API">檔案的 API</h3>
-
-<ul>
- <li><a href="http://palerdot.github.io/slide-my-text/">Slide My Text - presentation from plain text files</a></li>
-</ul>
-
-<h3 id="Unclassified" name="Unclassified">Web Workers</h3>
-
-<ul>
- <li><a href="http://ondras.github.io/fractal/">Web Worker Fractals</a></li>
- <li><a href="http://ondras.github.io/photo/">圖片編輯器</a></li>
- <li><a href="http://ondras.github.io/coral/">Coral generator</a></li>
- <li><a class="external" href="http://nerget.com/rayjs-mt/rayjs.html" title="http://nerget.com/rayjs-mt/rayjs.html">Raytracer</a></li>
- <li><a href="http://palerdot.github.io/hotcold/">HotCold Touch Typing</a></li>
-</ul>
diff --git a/files/zh-tw/web/javascript/eventloop/index.html b/files/zh-tw/web/javascript/eventloop/index.html
index 5518397de9..4dcfca821f 100644
--- a/files/zh-tw/web/javascript/eventloop/index.html
+++ b/files/zh-tw/web/javascript/eventloop/index.html
@@ -17,7 +17,7 @@ translation_of: Web/JavaScript/EventLoop
 
 <h3 id="視覺化呈現（Visual_representation）">視覺化呈現（Visual representation）</h3>
 
-<p style="text-align: center;"><img alt="Stack, heap, queue" src="/files/4617/default.svg" style="height: 270px; width: 294px;"></p>
+<p style="text-align: center;"><img alt="Stack, heap, queue" src="the_javascript_runtime_environment_example.svg" ></p>
 
 <h3 id="堆疊（Stack）">堆疊（Stack）</h3>
 
@@ -66,11 +66,29 @@ console.log(bar(7));
 
 <p>瀏覽器中，會添加訊息是由於事件的觸動，以及伴隨著事件的監聽者。若是沒有事件監聽者，則該事件的觸動就不會形成訊息，例如說一個點擊的動作伴隨著點擊事件監聽者就會形成一個新的訊息，其他類事件亦然。</p>
 
-<p>呼叫 {{domxref("WindowTimers.setTimeout", "setTimeout")}} 時有兩個參數：第一個是會被加入到佇列中的訊息，第二個參數為延遲時間（預設為 0）。若無其他訊息在佇列中，則這個訊息會在設定的延遲後立刻被處理。但若佇列內有其他訊息，<code>setTimeout</code> 的訊息必須等到其他訊息處理完。因此第二個時間參數只能表示為最少時間，而不是一個精準的時間。</p>
+<p>呼叫 <a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout"><code>setTimeout</code></a> 時有兩個參數：第一個是會被加入到佇列中的訊息，第二個參數為延遲時間（預設為<code>0</code>）。若無其他訊息在佇列中，則這個訊息會在設定的延遲後立刻被處理。但若佇列內有其他訊息，<code>setTimeout</code> 的訊息必須等到其他訊息處理完。因此第二個時間參數只能表示為最少時間，而不是一個精準的時間。</p>
+
+<p>這裡有個示範此概念的例子（<code>setTimeout</code>在其計時器到期後不會立刻執行）：</p>
+
+<pre class="brush: js">
+  const s = new Date().getSeconds();
+
+  setTimeout(function() {
+    // prints out "2", meaning that the callback is not called immediately after 500 milliseconds.
+    console.log("Ran after " + (new Date().getSeconds() - s) + " seconds");
+  }, 500)
+
+  while (true) {
+    if (new Date().getSeconds() - s >= 2) {
+      console.log("Good, looped for 2 seconds")
+      break;
+    }
+  }
+</pre>
 
 <h3 id="零延遲（Zero_delays）">零延遲（Zero delays）</h3>
 
-<p>「零延遲」並非意味著回呼函式（callback function）會在 0 毫秒之後立刻執行。當使用延遲 0 毫秒參數來呼叫 {{domxref("WindowTimers.setTimeout", "setTimeout")}} 函式並非是程式會過了該段時間就會執行，而是會參考佇列中等待的訊息數量。<br>
+<p>「零延遲」並非意味著回呼函式（callback function）會在 0 毫秒之後立刻執行。當使用延遲 0 毫秒參數來呼叫 <a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout"><code>setTimeout</code></a> 函式並非是程式會過了該段時間就會執行，而是會參考佇列中等待的訊息數量。<br>
  在下面範例中，「this is just a message」會寫在 setTimeout 的回呼訊息被執行之前，因為該時間段參數是要求執行環境處理所需的最少等待時間，而非一個保證時間。</p>
 
 <pre class="brush: js">(function() {
@@ -100,10 +118,10 @@ console.log(bar(7));
 
 <h3 id="多個執行環境的互相溝通（Several_Runtime_communicating_together）">多個執行環境的互相溝通（Several Runtime communicating together）</h3>
 
-<p>Web worker 或是跨來源網域（cross-origin）的 <code>iframe</code> 都會有各自的堆疊、堆積及訊息佇列。兩個特定的執行環境只能透過 <a href="/zh-TW/docs/DOM/window.postMessage"><code>postMessage</code></a> 這個方法來溝通。如果一個執行環境有監聽 <code>message</code> 事件時，另一個執行環境便可透過這個方法來新增一個訊息到該執行環境中。</p>
+<p>Web worker 或是跨來源網域（cross-origin）的 <code>iframe</code> 都會有各自的堆疊、堆積及訊息佇列。兩個特定的執行環境只能透過 <a href="/en-US/docs/Web/API/Window/postMessage"><code>postMessage</code></a> 這個方法來溝通。如果一個執行環境有監聽 <code>message</code> 事件時，另一個執行環境便可透過這個方法來新增一個訊息到該執行環境中。</p>
 
 <h2 id="絕不阻塞（Never_blocking）">絕不阻塞（Never blocking）</h2>
 
 <p>事件循環這個模型有一個非常有趣的特色就是永不阻塞，這與其他語言不一樣。I/O 的處理通常會經由事件以及回呼函式實作，因此當一個程式正在等待 <a href="/zh-TW/docs/Web/API/IndexedDB_API">IndexedDB</a> 的查詢結果或是回傳 <a href="/zh-TW/docs/Web/API/XMLHttpRequest">XHR</a> 請求時，依舊可以執行其他像是使用者輸入的動作。</p>
 
-<p>例外（exceptions）永遠存在，像是 <code>alert</code> 或是同步的 XHR，但好的實作方式就是避開他們。另外要注意個是，<a href="http://stackoverflow.com/questions/2734025/is-javascript-guaranteed-to-be-single-threaded/2734311#2734311">例外的例外一直是存在的</a>（但通常為實作時的錯誤而非其他情況）。</p>
+<p>例外（exceptions）永遠存在，像是 <code>alert</code> 或是同步的 XHR，但好的實作方式就是避開他們。另外要注意個是，<a href="https://stackoverflow.com/questions/2734025/is-javascript-guaranteed-to-be-single-threaded/2734311#2734311">例外的例外一直是存在的</a>（但通常為實作時的錯誤而非其他情況）。</p>
diff --git a/files/zh-tw/web/javascript/eventloop/the_javascript_runtime_environment_example.svg b/files/zh-tw/web/javascript/eventloop/the_javascript_runtime_environment_example.svg
new file mode 100644
index 0000000000..1b57821636
--- /dev/null
+++ b/files/zh-tw/web/javascript/eventloop/the_javascript_runtime_environment_example.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="294.708" height="271.079" viewBox="0 0 77.975 71.723"><g style="visibility:visible" class="com.sun.star.drawing.CustomShape"><path style="fill:#cfe7f5;stroke:none" d="M5550 11500H1200V3500h8700v8000z" transform="translate(-10.576 -31.118) scale(.00893)"/><path style="fill:none;stroke:gray" d="M5550 11500H1200V3500h8700v8000H5550" transform="translate(-10.576 -31.118) scale(.00893)"/><path style="fill:none;stroke:none" d="M1200 3500h8701v8001H1200z" transform="translate(-10.576 -31.118) scale(.00893)"/></g><g style="visibility:visible" class="com.sun.star.drawing.CustomShape"><path style="fill:#0ff;stroke:none" d="M5550 11500H1200V9700h8700v1800z" transform="translate(-10.576 -31.118) scale(.00893)"/><path style="fill:none;stroke:gray" d="M5550 11500H1200V9700h8700v1800H5550" transform="translate(-10.576 -31.118) scale(.00893)"/><path style="fill:none;stroke:none" d="M1200 9700h8701v1801H1200z" transform="translate(-10.576 -31.118) scale(.00893)"/></g><g style="visibility:visible" class="com.sun.star.drawing.CustomShape"><path style="fill:#09f;stroke:none" d="M2250 9700H1200V3500h2100v6200z" transform="translate(-10.576 -31.118) scale(.00893)"/><path style="fill:none;stroke:gray" d="M2250 9700H1200V3500h2100v6200H2250" transform="translate(-10.576 -31.118) scale(.00893)"/><path style="fill:none;stroke:none" d="M1200 3500h2101v6201H1200z" transform="translate(-10.576 -31.118) scale(.00893)"/></g><g style="visibility:visible" class="com.sun.star.drawing.CustomShape"><path style="fill:#cfe7f5;stroke:none" d="M5549 11499H1199V3499h8700v8000z" transform="translate(-10.576 -31.118) scale(.00893)"/><path style="fill:none;stroke:gray" d="M5549 11499H1199V3499h8700v8000H5549" transform="translate(-10.576 -31.118) scale(.00893)"/><path style="fill:none;stroke:none" d="M1199 3499h8701v8001H1199z" transform="translate(-10.576 -31.118) scale(.00893)"/></g><g style="visibility:visible;stroke:#000;stroke-width:29.62461853;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"><g style="stroke:#000;stroke-width:29.62461853;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"><path style="fill:#0ff;stroke:#000;stroke-width:29.62461853;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" d="M5549 11499H1199v-1100h8700v1100z" transform="translate(-10.576 -31.118) scale(.00893)"/><path style="fill:none;stroke:#000;stroke-width:29.62461853;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" d="M5549 11499H1199v-1100h8700v1100H5549" transform="translate(-10.576 -31.118) scale(.00893)"/><path style="fill:none;stroke:#000;stroke-width:29.62461853;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" d="M1199 10399h8701v1101H1199z" transform="translate(-10.576 -31.118) scale(.00893)"/></g></g><g style="visibility:visible;stroke:#000;stroke-width:29.62461853;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"><g style="stroke:#000;stroke-width:29.62461853;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"><path style="fill:#09f;stroke:#000;stroke-width:29.62461853;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" d="M1999 10399h-800V3499h1600v6900z" transform="translate(-10.576 -31.118) scale(.00893)"/><path style="fill:none;stroke:#000;stroke-width:29.62461853;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" d="M1999 10399h-800V3499h1600v6900h-800" transform="translate(-10.576 -31.118) scale(.00893)"/><path style="fill:none;stroke:#000;stroke-width:29.62461853;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" d="M1199 3499h1601v6901H1199z" transform="translate(-10.576 -31.118) scale(.00893)"/></g></g><g style="visibility:visible" class="com.sun.star.drawing.CustomShape"><path style="fill:#7e0021;stroke:none" d="M7500 7000h-300v-600h600v600z" transform="translate(-10.576 -30.853) scale(.00893)"/><path style="fill:none;stroke:gray" d="M7500 7000h-300v-600h600v600h-300" transform="translate(-10.576 -30.853) scale(.00893)"/><path style="fill:none;stroke:none" d="M7200 6400h601v601h-601z" transform="translate(-10.576 -30.853) scale(.00893)"/></g><g style="visibility:visible" class="com.sun.star.drawing.CustomShape"><path style="fill:#7e0021;stroke:none" d="M6499 6299h-300v-600h600v600z" transform="translate(-10.576 -30.853) scale(.00893)"/><path style="fill:none;stroke:gray" d="M6499 6299h-300v-600h600v600h-300" transform="translate(-10.576 -30.853) scale(.00893)"/><path style="fill:none;stroke:none" d="M6199 5699h601v601h-601z" transform="translate(-10.576 -30.853) scale(.00893)"/></g><g style="visibility:visible" class="com.sun.star.drawing.CustomShape"><path style="fill:#7e0021;stroke:none" d="M7099 4799h-300v-600h600v600z" transform="translate(-10.576 -30.853) scale(.00893)"/><path style="fill:none;stroke:gray" d="M7099 4799h-300v-600h600v600h-300" transform="translate(-10.576 -30.853) scale(.00893)"/><path style="fill:none;stroke:none" d="M6799 4199h601v601h-601z" transform="translate(-10.576 -30.853) scale(.00893)"/></g><g style="visibility:visible" class="com.sun.star.drawing.CustomShape"><path style="fill:#7e0021;stroke:none" d="M5099 5199h-300v-600h600v600z" transform="translate(-10.576 -30.853) scale(.00893)"/><path style="fill:none;stroke:gray" d="M5099 5199h-300v-600h600v600h-300" transform="translate(-10.576 -30.853) scale(.00893)"/><path style="fill:none;stroke:none" d="M4799 4599h601v601h-601z" transform="translate(-10.576 -30.853) scale(.00893)"/></g><g style="visibility:visible" class="com.sun.star.drawing.CustomShape"><path style="fill:#7e0021;stroke:none" d="M8699 6499h-300v-600h600v600z" transform="translate(-10.576 -30.853) scale(.00893)"/><path style="fill:none;stroke:gray" d="M8699 6499h-300v-600h600v600h-300" transform="translate(-10.576 -30.853) scale(.00893)"/><path style="fill:none;stroke:none" d="M8399 5899h601v601h-601z" transform="translate(-10.576 -30.853) scale(.00893)"/></g><g style="visibility:visible" class="com.sun.star.drawing.CustomShape"><path style="fill:#7e0021;stroke:none" d="M7899 8299h-300v-600h600v600z" transform="translate(-10.576 -30.853) scale(.00893)"/><path style="fill:none;stroke:gray" d="M7899 8299h-300v-600h600v600h-300" transform="translate(-10.576 -30.853) scale(.00893)"/><path style="fill:none;stroke:none" d="M7599 7699h601v601h-601z" transform="translate(-10.576 -30.853) scale(.00893)"/></g><g style="visibility:visible" class="com.sun.star.drawing.CustomShape"><path style="fill:#7e0021;stroke:none" d="M5399 8099h-300v-600h600v600z" transform="translate(-10.576 -30.853) scale(.00893)"/><path style="fill:none;stroke:gray" d="M5399 8099h-300v-600h600v600h-300" transform="translate(-10.576 -30.853) scale(.00893)"/><path style="fill:none;stroke:none" d="M5099 7499h601v601h-601z" transform="translate(-10.576 -30.853) scale(.00893)"/></g><g style="visibility:visible" class="com.sun.star.drawing.CustomShape"><path style="fill:#ff950e;stroke:none" d="M1999 10299h-700v-800h1400v800z" transform="translate(-10.576 -31.118) scale(.00893)"/><path style="fill:none;stroke:gray" d="M1999 10299h-700v-800h1400v800h-700" transform="translate(-10.576 -31.118) scale(.00893)"/><path style="fill:none;stroke:none" d="M1299 9499h1401v801H1299z" transform="translate(-10.576 -31.118) scale(.00893)"/></g><g style="visibility:visible" class="com.sun.star.drawing.CustomShape"><path style="fill:#ff950e;stroke:none" d="M1999 9399h-700v-800h1400v800z" transform="translate(-10.576 -31.118) scale(.00893)"/><path style="fill:none;stroke:gray" d="M1999 9399h-700v-800h1400v800h-700" transform="translate(-10.576 -31.118) scale(.00893)"/><path style="fill:none;stroke:none" d="M1299 8599h1401v801H1299z" transform="translate(-10.576 -31.118) scale(.00893)"/></g><g style="visibility:visible" class="com.sun.star.drawing.CustomShape"><path style="fill:#ff950e;stroke:none" d="M1999 8499h-700v-800h1400v800z" transform="translate(-10.576 -31.118) scale(.00893)"/><path style="fill:none;stroke:gray" d="M1999 8499h-700v-800h1400v800h-700" transform="translate(-10.576 -31.118) scale(.00893)"/><path style="fill:none;stroke:none" d="M1299 7699h1401v801H1299z" transform="translate(-10.576 -31.118) scale(.00893)"/></g><g style="visibility:visible" class="com.sun.star.drawing.CustomShape"><path style="fill:#cc0;stroke:none" d="M1999 11399h-700v-900h1400v900z" transform="translate(-10.576 -31.118) scale(.00893)"/><path style="fill:none;stroke:gray" d="M1999 11399h-700v-900h1400v900h-700" transform="translate(-10.576 -31.118) scale(.00893)"/><path style="fill:none;stroke:none" d="M1299 10499h1401v901H1299z" transform="translate(-10.576 -31.118) scale(.00893)"/></g><g style="visibility:visible" class="com.sun.star.drawing.CustomShape"><path style="fill:#cc0;stroke:none" d="M3599 11399h-700v-900h1400v900z" transform="translate(-10.576 -31.118) scale(.00893)"/><path style="fill:none;stroke:gray" d="M3599 11399h-700v-900h1400v900h-700" transform="translate(-10.576 -31.118) scale(.00893)"/><path style="fill:none;stroke:none" d="M2899 10499h1401v901H2899z" transform="translate(-10.576 -31.118) scale(.00893)"/></g><g style="visibility:visible" class="com.sun.star.drawing.CustomShape"><path style="fill:#cc0;stroke:none" d="M5199 11399h-700v-900h1400v900z" transform="translate(-10.576 -31.118) scale(.00893)"/><path style="fill:none;stroke:gray" d="M5199 11399h-700v-900h1400v900h-700" transform="translate(-10.576 -31.118) scale(.00893)"/><path style="fill:none;stroke:none" d="M4499 10499h1401v901H4499z" transform="translate(-10.576 -31.118) scale(.00893)"/></g><g style="visibility:visible" class="com.sun.star.drawing.CustomShape"><path style="fill:#ff950e;stroke:none" d="M1999 8499h-700v-800h1400v800z" transform="translate(-10.594 -38.959) scale(.00893)"/><path style="fill:none;stroke:gray" d="M1999 8499h-700v-800h1400v800h-700" transform="translate(-10.594 -38.959) scale(.00893)"/><path style="fill:none;stroke:none" d="M1299 7699h1401v801H1299z" transform="translate(-10.594 -38.959) scale(.00893)"/></g><text xml:space="preserve" style="font-style:normal;font-variant:normal;font-weight:400;font-stretch:normal;font-size:3.17499995px;line-height:0%;font-family:Arial;-inkscape-font-specification:Arial;text-align:start;letter-spacing:0;word-spacing:0;writing-mode:lr-tb;text-anchor:start;fill:#000;fill-opacity:1;stroke:none;stroke-width:.26458332" x="57.178" y="182.058" transform="translate(-56.533 -176.993)"><tspan x="57.178" y="182.058" style="font-size:5.29166651px;line-height:1.38999999;stroke-width:.26458332">Stack</tspan></text><text xml:space="preserve" style="font-style:normal;font-variant:normal;font-weight:400;font-stretch:normal;font-size:3.17499995px;line-height:0%;font-family:Arial;-inkscape-font-specification:Arial;text-align:start;letter-spacing:0;word-spacing:0;writing-mode:lr-tb;text-anchor:start;fill:#000;fill-opacity:1;stroke:none;stroke-width:.26458332" x="120.167" y="182.1" transform="translate(-56.533 -176.993)"><tspan x="120.167" y="182.1" style="font-size:5.29166651px;line-height:1.38999999;stroke-width:.26458332">Heap</tspan></text><text xml:space="preserve" style="font-style:normal;font-variant:normal;font-weight:400;font-stretch:normal;font-size:3.17499995px;line-height:0%;font-family:Arial;-inkscape-font-specification:Arial;text-align:start;letter-spacing:0;word-spacing:0;writing-mode:lr-tb;text-anchor:start;fill:#000;fill-opacity:1;stroke:none;stroke-width:.26458332" x="117.418" y="244.809" transform="translate(-56.533 -176.993)"><tspan x="117.418" y="244.809" style="font-size:5.29166651px;line-height:1.38999999;stroke-width:.26458332">Queue</tspan></text><text xml:space="preserve" style="font-style:normal;font-variant:normal;font-weight:400;font-stretch:normal;font-size:3.17499995px;line-height:0%;font-family:Arial;-inkscape-font-specification:Arial;text-align:start;letter-spacing:0;word-spacing:0;writing-mode:lr-tb;text-anchor:start;fill:#000;fill-opacity:1;stroke:none;stroke-width:.26458332" x="58.622" y="211.613" transform="translate(-56.533 -176.993)"><tspan x="58.622" y="211.613" style="font-size:3.52777767px;line-height:1.38999999;stroke-width:.26458332">Frame</tspan></text><text xml:space="preserve" style="font-style:normal;font-variant:normal;font-weight:400;font-stretch:normal;font-size:3.17499995px;line-height:0%;font-family:Arial;-inkscape-font-specification:Arial;text-align:start;letter-spacing:0;word-spacing:0;writing-mode:lr-tb;text-anchor:start;fill:#000;fill-opacity:1;stroke:none;stroke-width:.26458332" x="58.639" y="219.453" transform="translate(-56.533 -176.993)"><tspan x="58.639" y="219.453" style="font-size:3.52777767px;line-height:1.38999999;stroke-width:.26458332">Frame</tspan></text><text xml:space="preserve" style="font-style:normal;font-variant:normal;font-weight:400;font-stretch:normal;font-size:3.17499995px;line-height:0%;font-family:Arial;-inkscape-font-specification:Arial;text-align:start;letter-spacing:0;word-spacing:0;writing-mode:lr-tb;text-anchor:start;fill:#000;fill-opacity:1;stroke:none;stroke-width:.26458332" x="58.639" y="227.491" transform="translate(-56.533 -176.993)"><tspan x="58.639" y="227.491" style="font-size:3.52777767px;line-height:1.38999999;stroke-width:.26458332">Frame</tspan></text><text xml:space="preserve" style="font-style:normal;font-variant:normal;font-weight:400;font-stretch:normal;font-size:3.17499995px;line-height:0%;font-family:Arial;-inkscape-font-specification:Arial;text-align:start;letter-spacing:0;word-spacing:0;writing-mode:lr-tb;text-anchor:start;fill:#000;fill-opacity:1;stroke:none;stroke-width:.26458332" x="58.639" y="235.529" transform="translate(-56.533 -176.993)"><tspan x="58.639" y="235.529" style="font-size:3.52777767px;line-height:1.38999999;stroke-width:.26458332">Frame</tspan></text><text xml:space="preserve" style="font-style:normal;font-variant:normal;font-weight:400;font-stretch:normal;font-size:3.17499995px;line-height:0%;font-family:Arial;-inkscape-font-specification:Arial;text-align:start;letter-spacing:0;word-spacing:0;writing-mode:lr-tb;text-anchor:start;fill:#000;fill-opacity:1;stroke:none;stroke-width:.26458332" x="58.037" y="244.378" transform="translate(-56.533 -176.993)"><tspan x="58.037" y="244.378" style="font-size:2.82222223px;line-height:1.38999999;stroke-width:.26458332">Message</tspan></text><text xml:space="preserve" style="font-style:normal;font-variant:normal;font-weight:400;font-stretch:normal;font-size:3.17499995px;line-height:0%;font-family:Arial;-inkscape-font-specification:Arial;text-align:start;letter-spacing:0;word-spacing:0;writing-mode:lr-tb;text-anchor:start;fill:#000;fill-opacity:1;stroke:none;stroke-width:.26458332" x="72.327" y="244.378" transform="translate(-56.533 -176.993)"><tspan x="72.327" y="244.378" style="font-size:2.82222223px;line-height:1.38999999;stroke-width:.26458332">Message</tspan></text><text xml:space="preserve" style="font-style:normal;font-variant:normal;font-weight:400;font-stretch:normal;font-size:3.17499995px;line-height:0%;font-family:Arial;-inkscape-font-specification:Arial;text-align:start;letter-spacing:0;word-spacing:0;writing-mode:lr-tb;text-anchor:start;fill:#000;fill-opacity:1;stroke:none;stroke-width:.26458332" x="86.617" y="244.378" transform="translate(-56.533 -176.993)"><tspan x="86.617" y="244.378" style="font-size:2.82222223px;line-height:1.38999999;stroke-width:.26458332">Message</tspan></text><text xml:space="preserve" style="font-style:normal;font-variant:normal;font-weight:400;font-stretch:normal;font-size:3.17499995px;line-height:0%;font-family:Arial;-inkscape-font-specification:Arial;text-align:start;letter-spacing:0;word-spacing:0;writing-mode:lr-tb;text-anchor:start;fill:#000;fill-opacity:1;stroke:none;stroke-width:.26458332" x="86.327" y="185.938" transform="translate(-56.533 -176.993)"><tspan x="86.327" y="185.938" style="font-size:3.52777767px;line-height:1.38999999;stroke-width:.26458332">Object</tspan></text><text xml:space="preserve" style="font-style:normal;font-variant:normal;font-weight:400;font-stretch:normal;font-size:3.17499995px;line-height:0%;font-family:Arial;-inkscape-font-specification:Arial;text-align:start;letter-spacing:0;word-spacing:0;writing-mode:lr-tb;text-anchor:start;fill:#000;fill-opacity:1;stroke:none;stroke-width:.26458332" x="104.189" y="182.366" transform="translate(-56.533 -176.993)"><tspan x="104.189" y="182.366" style="font-size:3.52777767px;line-height:1.38999999;stroke-width:.26458332">Object</tspan></text><text xml:space="preserve" style="font-style:normal;font-variant:normal;font-weight:400;font-stretch:normal;font-size:3.17499995px;line-height:0%;font-family:Arial;-inkscape-font-specification:Arial;text-align:start;letter-spacing:0;word-spacing:0;writing-mode:lr-tb;text-anchor:start;fill:#000;fill-opacity:1;stroke:none;stroke-width:.26458332" x="98.831" y="195.763" transform="translate(-56.533 -176.993)"><tspan x="98.831" y="195.763" style="font-size:3.52777767px;line-height:1.38999999;stroke-width:.26458332">Object</tspan></text><text xml:space="preserve" style="font-style:normal;font-variant:normal;font-weight:400;font-stretch:normal;font-size:3.17499995px;line-height:0%;font-family:Arial;-inkscape-font-specification:Arial;text-align:start;letter-spacing:0;word-spacing:0;writing-mode:lr-tb;text-anchor:start;fill:#000;fill-opacity:1;stroke:none;stroke-width:.26458332" x="118.479" y="197.549" transform="translate(-56.533 -176.993)"><tspan x="118.479" y="197.549" style="font-size:3.52777767px;line-height:1.38999999;stroke-width:.26458332">Object</tspan></text><text xml:space="preserve" style="font-style:normal;font-variant:normal;font-weight:400;font-stretch:normal;font-size:3.17499995px;line-height:0%;font-family:Arial;-inkscape-font-specification:Arial;text-align:start;letter-spacing:0;word-spacing:0;writing-mode:lr-tb;text-anchor:start;fill:#000;fill-opacity:1;stroke:none;stroke-width:.26458332" x="107.771" y="202.023" transform="translate(-56.533 -176.993)"><tspan x="107.771" y="202.023" style="font-size:3.52777767px;line-height:1.38999999;stroke-width:.26458332">Object</tspan></text><text xml:space="preserve" style="font-style:normal;font-variant:normal;font-weight:400;font-stretch:normal;font-size:3.17499995px;line-height:0%;font-family:Arial;-inkscape-font-specification:Arial;text-align:start;letter-spacing:0;word-spacing:0;writing-mode:lr-tb;text-anchor:start;fill:#000;fill-opacity:1;stroke:none;stroke-width:.26458332" x="111.334" y="213.625" transform="translate(-56.533 -176.993)"><tspan x="111.334" y="213.625" style="font-size:3.52777767px;line-height:1.38999999;stroke-width:.26458332">Object</tspan></text><text xml:space="preserve" style="font-style:normal;font-variant:normal;font-weight:400;font-stretch:normal;font-size:3.17499995px;line-height:0%;font-family:Arial;-inkscape-font-specification:Arial;text-align:start;letter-spacing:0;word-spacing:0;writing-mode:lr-tb;text-anchor:start;fill:#000;fill-opacity:1;stroke:none;stroke-width:.26458332" x="89.006" y="211.839" transform="translate(-56.533 -176.993)"><tspan x="89.006" y="211.839" style="font-size:3.52777767px;line-height:1.38999999;stroke-width:.26458332">Object</tspan></text></svg>
\ No newline at end of file